fix(icons): polish after lib update

packages/components/src/components/collapsible/__snapshots__/collapsible.spec.ts.snap

@@ -6,7 +6,7 @@ exports[`TextField should match snapshot 1`] = `
     <div class="collapsible" part="base">
       <h2 aria-level="2" class="collapsible__heading" part="heading">
         <button aria-controls="collapsable-panel-0" aria-expanded="false" class="collapsible__button" id="collapsable-heading-0" part="button">
-          <scale-icon-navigation-collapse-down class="collapsible__icon" decorative="" part="icon" size="16"></scale-icon-navigation-collapse-down>
+          <scale-icon-navigation-right class="collapsible__icon" decorative="" part="icon" size="20"></scale-icon-navigation-right>
           <span class="collapsible__button-text" part="button-text">
             <slot name="heading"></slot>
           </span>

packages/components/src/components/collapsible/collapsible.css

@@ -18,7 +18,7 @@
   --line-height-button: var(--telekom-typography-line-spacing-standard);
   --border-width-button: var(--telekom-spacing-unit-x05);
   --radius-button: var(--telekom-radius-small);
-  --spacing-left-button: var(--telekom-spacing-unit-x1);
+  --spacing-left-button: 0;
   --spacing-left-button-text: var(--telekom-spacing-unit-x2);
   --color-button-hover: var(--telekom-color-text-and-icon-primary-hovered);
   --color-button-active: var(--telekom-color-text-and-icon-primary-pressed);
@@ -27,7 +27,7 @@
     var(--telekom-color-functional-focus-standard);
 
   /* icon */
-  --spacing-top-icon: calc(var(--telekom-spacing-unit-x1) + 1px);
+  --spacing-top-icon: var(--telekom-spacing-unit-x1);
 
   /* content */
   --spacing-right-content: var(--telekom-spacing-unit-x12);
@@ -103,7 +103,6 @@
 }
 
 .collapsible__icon {
-  transform: rotate(0.75turn);
   flex-shrink: 0;
   margin-top: var(--spacing-top-icon);
 }
@@ -113,7 +112,7 @@
 }
 
 .collapsible__button[aria-expanded='true'] .collapsible__icon {
-  transform: none;
+  /*  */
 }
 
 .collapsible__content {

packages/components/src/components/collapsible/collapsible.tsx

@@ -25,6 +25,8 @@ export interface CollapsibleEventDetail {
   expanded: boolean;
 }
 
+const DEFAULT_ICON_SIZE = 20;
+
 let i = 0;
 
 @Component({
@@ -89,6 +91,9 @@ export class Collapsible {
   }
 
   render() {
+    const IconTag = this.expanded
+      ? 'scale-icon-navigation-collapse-down'
+      : 'scale-icon-navigation-right';
     return (
       <Host>
         {this.styles && <style>{this.styles}</style>}
@@ -111,8 +116,8 @@ export class Collapsible {
               aria-controls={this.panelId}
             >
               {this.iconLocation === 'left' ? (
-                <scale-icon-navigation-collapse-down
-                  size={16}
+                <IconTag
+                  size={DEFAULT_ICON_SIZE}
                   decorative
                   class="collapsible__icon"
                   part={classNames('icon', this.expanded && 'expanded')}
@@ -126,8 +131,8 @@ export class Collapsible {
                 <slot name="heading"></slot>
               </span>
               {this.iconLocation === 'right' ? (
-                <scale-icon-navigation-collapse-down
-                  size={16}
+                <IconTag
+                  size={DEFAULT_ICON_SIZE}
                   decorative
                   class="collapsible__icon collapsible__icon-right"
                   part={classNames('icon', this.expanded && 'expanded')}

packages/components/src/components/collapsible/readme.md

@@ -33,19 +33,6 @@
 | `"heading"`     |             |
 
 
-## Dependencies
-
-### Depends on
-
-- [scale-icon-navigation-collapse-down](../icons/navigation-collapse-down)
-
-### Graph
-```mermaid
-graph TD;
-  scale-collapsible --> scale-icon-navigation-collapse-down
-  style scale-collapsible fill:#f9f,stroke:#333,stroke-width:4px
-```
-
 ----------------------------------------------
 
 *Built with [StencilJS](https://stenciljs.com/)*

packages/components/src/components/data-grid/readme.md

@@ -87,6 +87,10 @@ graph TD;
   scale-checkbox --> scale-icon-action-checkmark
   scale-checkbox --> scale-icon-alert-information
   scale-checkbox --> scale-icon-alert-error
+  scale-pagination --> scale-icon-navigation-double-left
+  scale-pagination --> scale-icon-navigation-left
+  scale-pagination --> scale-icon-navigation-right
+  scale-pagination --> scale-icon-navigation-double-right
   scale-switch --> scale-icon-action-checkmark
   scale-progress-bar --> scale-icon-alert-error
   scale-progress-bar --> scale-icon-action-success

packages/components/src/components/date-picker/date-picker.css

@@ -271,8 +271,8 @@ duet-date-picker .duet-date__select-label {
 }
 
 duet-date-picker .duet-date__select-label svg {
-  width: var(--telekom-spacing-unit-x3);
-  height: var(--telekom-spacing-unit-x3);
+  width: 16px;
+  height: 16px;
   margin-left: var(--telekom-spacing-unit-x2);
 }
 

packages/components/src/components/date-picker/date-picker.tsx

@@ -276,7 +276,7 @@ export class DatePicker {
       const scaleNavLeftIcon = document.createElement(
         'scale-icon-navigation-left'
       );
-      scaleNavLeftIcon.size = 12;
+      scaleNavLeftIcon.size = 16;
       navLeftIcon.replaceWith(scaleNavLeftIcon);
     }
 
@@ -286,7 +286,7 @@ export class DatePicker {
       const scaleNavRightIcon = document.createElement(
         'scale-icon-navigation-right'
       );
-      scaleNavRightIcon.size = 12;
+      scaleNavRightIcon.size = 16;
       navRightIcon.replaceWith(scaleNavRightIcon);
     }
 

packages/components/src/components/dropdown-select/dropdown-select.css

@@ -276,7 +276,7 @@
   position: relative;
 }
 
-[part~='option'][aria-selected='true'] scale-icon-action-success {
+[part~='option'][aria-selected='true'] scale-icon-action-checkmark {
   position: absolute;
   right: 16px;
   top: 12px;

packages/components/src/components/dropdown/dropdown.css

@@ -46,7 +46,7 @@ scale-dropdown {
   --color-meta: var(--telekom-color-text-and-icon-standard);
 
   /*icon*/
-  --height-icon: var(--telekom-spacing-unit-x6);
+  --height-icon: var(--telekom-spacing-unit-x5);
   --color-icon: var(--telekom-color-text-and-icon-standard);
   --color-icon-hover: var(--telekom-color-text-and-icon-standard);
   --color-icon-active: var(--telekom-color-text-and-icon-standard);

packages/components/src/components/dropdown/dropdown.tsx

@@ -276,7 +276,7 @@ export class Dropdown {
               {this.hasSlotIcon ? (
                 <slot name="icon" />
               ) : (
-                <scale-icon-navigation-collapse-down decorative />
+                <scale-icon-navigation-collapse-down size={20} decorative />
               )}
             </div>
           </div>

packages/components/src/components/pagination/__snapshots__/pagination.spec.ts.snap

@@ -18,24 +18,16 @@ exports[`pagination should match snapshot 1`] = `
           / 1
         </div>
         <button aria-label="Go to first page" class="pagination__first-prompt" disabled="" part="first-prompt">
-          <svg fill="none" height="12" stroke="#cacaca" viewBox="0 0 48 52" xmlns="http://www.w3.org/2000/svg">
-            <path d="M44.5 48.5L21.5 26L44.5 3.5M27.5 48.5L4.5 26L27.5 3.5" stroke-linecap="round" stroke-width="6"></path>
-          </svg>
+          <scale-icon-navigation-double-left decorative="" size="20"></scale-icon-navigation-double-left>
         </button>
         <button aria-label="Go to previous page" class="pagination__prev-prompt" disabled="" part="prev-prompt">
-          <svg fill="none" height="12" stroke="#cacaca" viewBox="0 0 37 52" xmlns="http://www.w3.org/2000/svg">
-            <path d="M33 48L6 26L33 4" stroke-linecap="round" stroke-width="7"></path>
-          </svg>
+          <scale-icon-navigation-left decorative="" size="20"></scale-icon-navigation-left>
         </button>
         <button aria-label="Go to next page" class="pagination__next-prompt" disabled="" part="next-prompt">
-          <svg fill="none" height="12" stroke="#cacaca" viewBox="0 0 37 52" xmlns="http://www.w3.org/2000/svg">
-            <path d="M4 4L31 26L4 48" stroke-linecap="round" stroke-width="7"></path>
-          </svg>
+          <scale-icon-navigation-right decorative="" size="20"></scale-icon-navigation-right>
         </button>
         <button aria-label="Go to last page" class="pagination__last-prompt" disabled="" part="last-prompt">
-          <svg fill="none" height="12" stroke="#cacaca" viewBox="0 0 48 52" xmlns="http://www.w3.org/2000/svg">
-            <path d="M3.5 3.5L26.5 26L3.5 48.5M20.5 3.5L43.5 26L20.5 48.5" stroke-linecap="round" stroke-width="6"></path>
-          </svg>
+          <scale-icon-navigation-double-right decorative="" size="20"></scale-icon-navigation-double-right>
         </button>
       </div>
     </div>

packages/components/src/components/pagination/pagination.css

@@ -97,26 +97,26 @@ button:not(:disabled) {
   cursor: pointer;
 }
 button:not(:disabled) svg {
-  stroke: var(--stroke-svg);
+  color: var(--stroke-svg);
 }
 
 button:disabled svg {
-  stroke: var(--telekom-color-text-and-icon-disabled);
+  color: var(--telekom-color-text-and-icon-disabled);
 }
 
 button:not(:disabled):hover {
   border-color: var(--telekom-color-primary-hovered);
   z-index: 1;
 }
 button:not(:disabled):hover svg {
-  stroke: var(--color-hover);
+  color: var(--color-hover);
 }
 button:not(:disabled):active {
   border-color: var(--color-active);
   z-index: 1;
 }
 button:not(:disabled):active svg {
-  stroke: var(--color-active);
+  color: var(--color-active);
 }
 
 /* Hide Borders option */
@@ -153,7 +153,7 @@ button:not(:disabled):active svg {
 
 @media screen and (forced-colors: active), (-ms-high-contrast: active) {
   button:not(:disabled) svg {
-    stroke: var(--stroke-svg-high-contrast);
+    color: var(--stroke-svg-high-contrast);
   }
 }
 

packages/components/src/components/pagination/pagination.tsx

@@ -37,6 +37,8 @@ import { emitEvent } from '../../utils/utils';
 
 export type PaginationEventDirection = 'FIRST' | 'PREVIOUS' | 'NEXT' | 'LAST';
 
+const DEFAULT_ICON_SIZE = 20;
+
 const name = 'pagination';
 @Component({
   tag: 'scale-pagination',
@@ -207,19 +209,10 @@ export class Pagination {
               onClick={() => this.goFirstPage()}
               aria-label={this.ariaLabelFirstPage}
             >
-              <svg
-                height="12"
-                viewBox="0 0 48 52"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                stroke="#cacaca"
-              >
-                <path
-                  d="M44.5 48.5L21.5 26L44.5 3.5M27.5 48.5L4.5 26L27.5 3.5"
-                  stroke-width="6"
-                  stroke-linecap="round"
-                />
-              </svg>
+              <scale-icon-navigation-double-left
+                size={DEFAULT_ICON_SIZE}
+                decorative
+              />
             </button>
             <button
               class={`${name}__prev-prompt`}
@@ -228,22 +221,7 @@ export class Pagination {
               onClick={() => this.goPreviousPage()}
               aria-label={this.ariaLabelPreviousPage}
             >
-              <svg
-                height="12"
-                viewBox="0 0 37 52"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                stroke="#cacaca"
-              >
-                <path
-                  d="M33 48L6 26L33 4"
-                  stroke-width="7"
-                  stroke-linecap="round"
-                />
-              </svg>
-              {/* scale-icon behaves differently from inlined svg in HCM,
-                  and we want all four icons to be the same, so leaving that for now */}
-              {/*<scale-icon-navigation-left size={16} />*/}
+              <scale-icon-navigation-left size={DEFAULT_ICON_SIZE} decorative />
             </button>
             <button
               class={`${name}__next-prompt`}
@@ -252,19 +230,10 @@ export class Pagination {
               onClick={() => this.goNextPage()}
               aria-label={this.ariaLabelNextPage}
             >
-              <svg
-                height="12"
-                viewBox="0 0 37 52"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                stroke="#cacaca"
-              >
-                <path
-                  d="M4 4L31 26L4 48"
-                  stroke-width="7"
-                  stroke-linecap="round"
-                />
-              </svg>
+              <scale-icon-navigation-right
+                size={DEFAULT_ICON_SIZE}
+                decorative
+              />
             </button>
             <button
               class={`${name}__last-prompt`}
@@ -273,19 +242,10 @@ export class Pagination {
               onClick={() => this.goLastPage()}
               aria-label={this.ariaLabelLastPage}
             >
-              <svg
-                height="12"
-                viewBox="0 0 48 52"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                stroke="#cacaca"
-              >
-                <path
-                  d="M3.5 3.5L26.5 26L3.5 48.5M20.5 3.5L43.5 26L20.5 48.5"
-                  stroke-width="6"
-                  stroke-linecap="round"
-                />
-              </svg>
+              <scale-icon-navigation-double-right
+                size={DEFAULT_ICON_SIZE}
+                decorative
+              />
             </button>
           </div>
         </div>

packages/components/src/components/pagination/readme.md

@@ -49,9 +49,20 @@
 
  - [scale-data-grid](../data-grid)
 
+### Depends on
+
+- [scale-icon-navigation-double-left](../icons/navigation-double-left)
+- [scale-icon-navigation-left](../icons/navigation-left)
+- [scale-icon-navigation-right](../icons/navigation-right)
+- [scale-icon-navigation-double-right](../icons/navigation-double-right)
+
 ### Graph
 ```mermaid
 graph TD;
+  scale-pagination --> scale-icon-navigation-double-left
+  scale-pagination --> scale-icon-navigation-left
+  scale-pagination --> scale-icon-navigation-right
+  scale-pagination --> scale-icon-navigation-double-right
   scale-data-grid --> scale-pagination
   style scale-pagination fill:#f9f,stroke:#333,stroke-width:4px
 ```

packages/components/src/components/sidebar-nav-collapsible/__snapshots__/sidebar-nav-collapsible.spec.ts.snap

@@ -6,7 +6,7 @@ exports[`SidebarNavCollapsible emitter exit handleKeydown if event metaKey 1`] =
     <li class="sidebar-nav-collapsible" part="sidebar-nav-collapsible" role="listitem">
       <div class="sidebar-nav-collapsible__wrapper" part="wrapper">
         <a aria-expanded="false" class="sidebar-nav-collapsible__button" href="#" part="button" role="button">
-          <scale-icon-navigation-collapse-down class="sidebar-nav-collapsible__icon" part="icon" size="16"></scale-icon-navigation-collapse-down>
+          <scale-icon-navigation-collapse-down class="sidebar-nav-collapsible__icon" part="icon" size="20"></scale-icon-navigation-collapse-down>
         </a>
       </div>
       <ul class="sidebar-nav-collapsible__list" hidden="" part="list">
@@ -23,7 +23,7 @@ exports[`SidebarNavCollapsible snapshots smoke test 1`] = `
     <li class="sidebar-nav-collapsible" part="sidebar-nav-collapsible" role="listitem">
       <div class="sidebar-nav-collapsible__wrapper" part="wrapper">
         <a aria-expanded="false" class="sidebar-nav-collapsible__button" href="#" part="button" role="button">
-          <scale-icon-navigation-collapse-down class="sidebar-nav-collapsible__icon" part="icon" size="16"></scale-icon-navigation-collapse-down>
+          <scale-icon-navigation-collapse-down class="sidebar-nav-collapsible__icon" part="icon" size="20"></scale-icon-navigation-collapse-down>
         </a>
       </div>
       <ul class="sidebar-nav-collapsible__list" hidden="" part="list">

packages/components/src/components/sidebar-nav-collapsible/sidebar-nav-collapsible.tsx

@@ -91,7 +91,7 @@ export class SidebarNavCollapsible {
               <scale-icon-navigation-collapse-down
                 class="sidebar-nav-collapsible__icon"
                 selected={this.bold}
-                size={16}
+                size={20}
                 part="icon"
               />
             </a>