@sonic-equipment/ui 208.0.0 → 209.0.0

package/dist/styles.css

@@ -202,11 +202,7 @@
   );
 }
 :root {
-  /*********************************************************
-  *
-  *  Global border radius tokens
-  *
-  *********************************************************/
+  /* border radius */
   --border-radius-2: 2px;
   --border-radius-8: 8px;
   --border-radius-12: 12px;
@@ -214,11 +210,7 @@
   --border-radius-22: 22px;
   --border-radius-32: 32px;
 
-  /*********************************************************
-  *
-  *  Global border width tokens
-  *
-  *********************************************************/
+  /* border width */
   --border-width-0: 0px;
   --border-width-1: 1px;
   --border-width-2: 2px;
@@ -226,8 +218,9 @@
 }
 :root {
   /* Outlines */
-  --shadow-focus-outline: 0 0 1px 2px rgb(227 6 19 / 40%);
-  --shadow-focus-outline-padded: 0 0 1px 4px rgb(227 6 19 / 40%);
+
+  /* --shadow-focus-outline: 0 0 1px 2px rgb(227 6 19 / 40%);
+  --shadow-focus-outline-padded: 0 0 1px 4px rgb(227 6 19 / 40%); */
 
   /* Box shadows */
   --box-shadow-heavy: 0 0 96px 0 rgb(0 0 0 / 30%);
@@ -265,6 +258,14 @@
 :root {
   --transition-duration-short: 250ms;
 }
+:root {
+  /* focus outline */
+  --focus-outline-size: 2px;
+  --focus-outline-offset: 2px;
+  --focus-outline-inset: calc(var(--focus-outline-size) * -1);
+  --focus-outline-color: rgb(227 6 19 / 40%);
+  --focus-outline: var(--focus-outline-size) solid var(--focus-outline-color);
+}
 html {
   padding-right: 0 !important;
   interpolate-size: allow-keywords;
@@ -282,66 +283,44 @@ html {
 
 /* stylelint-disable no-descending-specificity */
 .link-module-xLqBn {
+  --color: currentcolor;
+  --hover-color: var(--color-brand-dark-red);
+
   all: unset;
   position: relative;
   display: inline-flex;
   align-items: center;
-  color: currentcolor;
+  color: var(--color);
   cursor: pointer;
   font: inherit;
   gap: var(--space-4);
   -webkit-tap-highlight-color: transparent;
 }
-.link-module-xLqBn:where(:not([data-disabled]):focus),
-  .link-module-xLqBn:where(:not([data-disabled]):hover) {
-    color: var(--color-brand-dark-red);
-  }
-.link-module-xLqBn:where(:not([data-disabled]):focus)::after, .link-module-xLqBn:where(:not([data-disabled]):hover)::after {
-      background-color: var(--color-brand-dark-red);
-    }
 .link-module-xLqBn > svg {
-    display: block;
-    width: 12px;
-    height: 12px;
-  }
-.link-module-xLqBn:focus-visible {
-    box-shadow: var(--shadow-focus-outline);
-    outline: none;
+    width: var(--space-12);
+    height: var(--space-12);
   }
-.link-module-xLqBn:where([data-disabled]) {
+.link-module-xLqBn[data-disabled] {
     cursor: default;
     opacity: 0.4;
     pointer-events: none;
   }
-.link-module-xLqBn:where(.link-module-HZbAL) {
-    cursor: pointer;
+.link-module-xLqBn:hover {
+    color: var(--hover-color);
+  }
+.link-module-xLqBn:focus-visible {
+    outline: var(--focus-outline);
   }
 .link-module-xLqBn:where(.link-module-UuCEp) {
     text-decoration: underline;
   }
-.link-module-xLqBn:where(.link-module-UuCEp)::after {
-      display: none;
-    }
-.link-module-xLqBn:where(.link-module-v31wH) {
-    color: var(--color-brand-red);
-  }
-.link-module-xLqBn:where(.link-module-v31wH):where(:not([data-disabled]):focus),
-    .link-module-xLqBn:where(.link-module-v31wH):where(:not([data-disabled]):hover) {
-      color: var(--color-brand-dark-red);
-    }
-.link-module-xLqBn:where(.link-module-v31wH):where(:not([data-disabled]):focus)::after, .link-module-xLqBn:where(.link-module-v31wH):where(:not([data-disabled]):hover)::after {
-        background-color: var(--color-brand-dark-red);
-      }
 .link-module-xLqBn:where(.link-module-bGD6u) {
-    color: var(--color-black);
+    --color: var(--color-black);
+    --hover-color: var(--color-brand-red);
+  }
+.link-module-xLqBn:where(.link-module-v31wH) {
+    --color: var(--color-brand-red);
   }
-.link-module-xLqBn:where(.link-module-bGD6u):where(.link-module-xLqBn:where(.link-module-bGD6u):not([data-disabled]):focus),
-    .link-module-xLqBn:where(.link-module-bGD6u):where(.link-module-xLqBn:where(.link-module-bGD6u):not([data-disabled]):hover) {
-      color: var(--color-brand-red);
-    }
-.link-module-xLqBn:where(.link-module-bGD6u):where(.link-module-xLqBn:where(.link-module-bGD6u):not([data-disabled]):focus)::after, .link-module-xLqBn:where(.link-module-bGD6u):where(.link-module-xLqBn:where(.link-module-bGD6u):not([data-disabled]):hover)::after {
-        background-color: var(--color-brand-red);
-      }
 
 .accordion-module-9WvAH {
   --color: var(--color-black);
@@ -353,6 +332,8 @@ html {
   --accordion-item-border-accentuated-color: var(--color-brand-dark-gray);
   --accordion-item-border: 1px solid var(--accordion-item-border-color);
   --accordion-item-hover-color: var(--color-brand-light-gray);
+
+  color: var(--color);
 }
 
   .accordion-module-9WvAH.accordion-module-6CcEH {
@@ -380,10 +361,6 @@ html {
       --seperator-color: var(--color-white);
     }
 
-  .accordion-module-9WvAH .accordion-module-lf9d- {
-    --transition-duration: 0.2s;
-  }
-
   .accordion-module-9WvAH .accordion-module-lf9d- .accordion-module-d-B4T {
       margin: 0;
     }
@@ -392,8 +369,6 @@ html {
       position: relative;
       display: flex;
       width: 100%;
-      padding-right: var(--accordion-padding-inline);
-      padding-left: var(--accordion-padding-inline);
       border: none;
       background: none;
       color: var(--color);
@@ -402,6 +377,7 @@ html {
       font-weight: var(--font-weight-bold);
       line-height: 1;
       padding-block: var(--accordion-padding-block);
+      padding-inline: var(--accordion-padding-inline);
       text-align: left;
     }
 
@@ -415,13 +391,13 @@ html {
           width: 16px;
           height: 16px;
           transform: rotate(0deg);
-          transition: transform var(--transition-duration) ease;
+          transition: transform var(--transition-duration-short);
         }
 
   .accordion-module-9WvAH .accordion-module-lf9d- .accordion-module--Rwpb:focus-visible,
       .accordion-module-9WvAH .accordion-module-lf9d- .accordion-module--Rwpb.accordion-module-M4BZs {
-        box-shadow: var(--shadow-focus-outline-padded);
-        outline: none;
+        outline: var(--focus-outline);
+        outline-offset: var(--focus-outline-offset);
       }
 
   .accordion-module-9WvAH .accordion-module-lf9d- .accordion-module--Rwpb[disabled] {
@@ -442,19 +418,15 @@ html {
         }
       }
 
+  /* panel */
+
   .accordion-module-9WvAH .accordion-module-lf9d- .accordion-module-KZjMo {
-      display: grid;
-      grid-template-rows: 0fr;
-      transition:
-        grid-template-rows var(--transition-duration) linear,
-        padding-block var(--transition-duration) linear;
+      overflow: clip;
+      transition: var(--transition-duration-short) ease-in-out;
+      transition-behavior: allow-discrete;
+      transition-property: visibility, block-size;
     }
 
-  .accordion-module-9WvAH .accordion-module-lf9d- .accordion-module-KZjMo .accordion-module-ejMH3 {
-        overflow: hidden;
-        color: var(--color);
-      }
-
   .accordion-module-9WvAH .accordion-module-lf9d-.accordion-module-oTdZK {
       border-bottom: var(--accordion-item-border);
     }
@@ -471,23 +443,29 @@ html {
       border-bottom: solid 2px var(--accordion-item-border-accentuated-color);
     }
 
+  /* closed state */
+
+  .accordion-module-9WvAH .accordion-module-lf9d-.accordion-module-kYmoe .accordion-module-KZjMo {
+        block-size: 0;
+        visibility: hidden;
+      }
+
+  /* open state */
+
   .accordion-module-9WvAH .accordion-module-lf9d-.accordion-module-W0F1z .accordion-module-Y50uq svg {
         transform: rotate(-180deg);
       }
 
   .accordion-module-9WvAH .accordion-module-lf9d-.accordion-module-W0F1z .accordion-module-KZjMo {
-        grid-template-rows: 1fr;
+        block-size: auto;
+        visibility: visible;
       }
 
   .accordion-module-9WvAH .accordion-module-lf9d-:has(.accordion-module--Rwpb[disabled]):not(.accordion-module-RnNRT) {
       border-color: var(--color-brand-light-gray);
     }
 
-  /*********************************************************
-  *
-  * Dropdown variant 
-  *
-  *********************************************************/
+  /* dropdown variant */
 
   .accordion-module-9WvAH.accordion-module-SAbiG .accordion-module-ogvYX {
       color: var(--color-brand-black);
@@ -884,9 +862,14 @@ html {
 }
 
 .algolia-filter-panel-module-GfhOO {
-  --padding: var(--space-16);
+  display: grid;
+  grid-template-areas:
+    'content'
+    'footer';
+  grid-template-rows: 1fr auto;
+  min-block-size: 100%;
 
-  height: 100%;
+  /* padding-inline: var(--space-16); */
 }
 
   .algolia-filter-panel-module-GfhOO,
@@ -894,12 +877,17 @@ html {
     box-sizing: border-box;
   }
 
-  .algolia-filter-panel-module-GfhOO .algolia-filter-panel-module-4ubB1 {
-    overflow: auto;
-    width: 100%;
-    height: 100%;
-    padding-bottom: 16px;
-    padding-inline: var(--padding);
+  .algolia-filter-panel-module-GfhOO .algolia-filter-panel-module-KFCCf {
+    grid-area: content;
+  }
+
+  .algolia-filter-panel-module-GfhOO .algolia-filter-panel-module--DfrD {
+    position: sticky;
+    display: grid;
+    background: var(--color-white);
+    grid-area: footer;
+    inset-block-end: 0;
+    padding-block: var(--space-16);
   }
 
   .algolia-filter-panel-module-GfhOO .algolia-filter-panel-module-LKet3 {
@@ -907,7 +895,6 @@ html {
     cursor: pointer;
     font: inherit;
     font-size: var(--font-size-14);
-    -webkit-tap-highlight-color: transparent;
     text-decoration: none;
   }
 
@@ -933,22 +920,8 @@ html {
       color: var(--color-brand-medium-gray);
     }
 
-  .algolia-filter-panel-module-GfhOO .algolia-filter-panel-module-ABOYv {
-    position: absolute;
-    z-index: calc(var(--sidebar-layer) + 1);
-    bottom: var(--padding);
-    display: grid;
-    inset-inline: 0;
-    padding-inline: var(--padding);
-  }
-
   @media (width >= 1440px) {
-    .algolia-filter-panel-module-GfhOO .algolia-filter-panel-module-4ubB1 {
-      overflow: hidden;
-      padding-left: 0;
-    }
-
-    .algolia-filter-panel-module-GfhOO .algolia-filter-panel-module-ABOYv {
+    .algolia-filter-panel-module-GfhOO .algolia-filter-panel-module--DfrD {
       display: none;
     }
   }
@@ -969,13 +942,15 @@ html {
   .icon-button-module-4PDK-[data-disabled] {
     cursor: default;
     opacity: 0.4;
+    pointer-events: none;
   }
 
-/*********************************************************
- *
- *  Sizes
- *
-*********************************************************/
+  .icon-button-module-4PDK-:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-inset);
+  }
+
+/* sizes */
 
 .icon-button-module-k3s9J svg {
     block-size: 24px;
@@ -987,11 +962,7 @@ html {
     inline-size: 32px;
   }
 
-/*********************************************************
- *
- *  Variants
- *
-*********************************************************/
+/* variants */
 
 .icon-button-module-fTeP4 {
   color: var(--color-brand-black);
@@ -1005,10 +976,6 @@ html {
   color: currentcolor;
 }
 
-.icon-button-module-fTeP4:focus-visible, .icon-button-module-dM0eo:focus-visible {
-    color: var(--color-brand-red);
-  }
-
 @media (hover: hover) {
     .icon-button-module-fTeP4:hover, .icon-button-module-dM0eo:hover {
       color: var(--color-brand-red);
@@ -1121,6 +1088,11 @@ html {
     cursor: default;
   }
 
+  .button-module-V4meK:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+  }
+
   .button-module-V4meK .button-module-XaNWz {
     display: block;
     width: 24px;
@@ -1140,7 +1112,6 @@ html {
   .button-module-V4meK.button-module-LwuW2 .button-module-13ndF {
       position: absolute;
       margin: auto;
-      inset: 0;
     }
 
   .button-module-V4meK.button-module-U5IxM {
@@ -1173,11 +1144,7 @@ html {
       color: var(--color-brand-medium-gray);
     }
 
-/*********************************************************
- *
- *  Sizes
- *
-*********************************************************/
+/* sizes */
 
 .button-module-Pbwz7 {
   min-height: 36px;
@@ -1213,18 +1180,14 @@ html {
   padding-inline: var(--space-24);
 }
 
-/*********************************************************
- *
- *  Variants
- *
-*********************************************************/
+/* variants */
 
 .button-module-tmyk8:where(.button-module-vq9GI, .button-module-AjvlY) {
     background-color: var(--color-brand-red);
     color: var(--color-brand-white);
   }
 
-.button-module-tmyk8:where(.button-module-vq9GI, .button-module-AjvlY):where(:focus-visible, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module-tmyk8:where(.button-module-vq9GI, .button-module-AjvlY):where(:hover, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj) {
+.button-module-tmyk8:where(.button-module-vq9GI, .button-module-AjvlY):where(:hover, .button-module-YzPAr, .button-module-XMFzj) {
       background-color: var(--color-brand-dark-red);
     }
 
@@ -1232,7 +1195,7 @@ html {
     color: var(--color-brand-black);
   }
 
-.button-module-tmyk8:where(.button-module-f4UVe):where(:focus-visible, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module-tmyk8:where(.button-module-f4UVe):where(:hover, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj) {
+.button-module-tmyk8:where(.button-module-f4UVe):where(:hover, .button-module-YzPAr, .button-module-XMFzj) {
       color: var(--color-brand-red);
     }
 
@@ -1258,7 +1221,7 @@ html {
     color: var(--color-brand-black);
   }
 
-.button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY):where(:focus-visible, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY):where(:hover, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj) {
+.button-module--1bCH:where(.button-module-vq9GI, .button-module-AjvlY):where(:hover, .button-module-YzPAr, .button-module-XMFzj) {
       background-color: var(--color-brand-light-gray);
     }
 
@@ -1266,7 +1229,7 @@ html {
     color: var(--color-brand-black);
   }
 
-.button-module--1bCH:where(.button-module-f4UVe):where(:focus-visible, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-f4UVe):where(:hover, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj) {
+.button-module--1bCH:where(.button-module-f4UVe):where(:hover, .button-module-YzPAr, .button-module-XMFzj) {
       color: var(--color-brand-red);
     }
 
@@ -1274,7 +1237,7 @@ html {
     border: 1px solid var(--color-brand-medium-gray);
   }
 
-.button-module--1bCH:where(.button-module-vq9GI):where(:focus-visible, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj), .button-module--1bCH:where(.button-module-vq9GI):where(:hover, .button-module-YzPAr, .button-module--xzsY, .button-module-XMFzj) {
+.button-module--1bCH:where(.button-module-vq9GI):where(:hover, .button-module-YzPAr, .button-module-XMFzj) {
       border-color: var(--color-brand-light-gray);
     }
 
@@ -1297,44 +1260,51 @@ html {
     }
 
 .show-all-module-BDp21 {
-  --transition-duration: 0.2s;
-  --initital-height: 0;
+  --initial-height: 0;
+
+  display: grid;
+  grid-template-areas:
+    'panel'
+    'button';
 }
 
   .show-all-module-BDp21 .show-all-module-bEdda {
     display: grid;
+    grid-area: panel;
     grid-template-rows: 0fr;
-    transition: grid-template-rows var(--transition-duration) ease-in-out;
+    transition: grid-template-rows var(--transition-duration-short) ease-in-out;
   }
 
   .show-all-module-BDp21 .show-all-module-bEdda .show-all-module-RF--F {
       position: relative;
       overflow: hidden;
-      min-height: var(--initital-height);
       color: currentcolor;
+      min-block-size: var(--initial-height);
     }
 
   .show-all-module-BDp21 .show-all-module-bEdda .show-all-module-RF--F.show-all-module-30y7l::after {
           position: absolute;
-          bottom: 0;
-          left: 0;
           display: block;
-          width: 100%;
-          height: 24px;
           background-image: linear-gradient(to bottom, transparent, white);
+          block-size: 24px;
           content: '';
+          inline-size: 100%;
+          inset-block-end: 0;
+          inset-inline-start: 0;
         }
 
   .show-all-module-BDp21 .show-all-module-58e7Q {
-    margin-top: var(--space-8);
+    margin: var(--space-8) 0 0 var(--focus-outline-size);
     font-size: var(--font-size-14);
+    grid-area: button;
+    justify-self: start;
   }
 
   .show-all-module-BDp21 .show-all-module-58e7Q .show-all-module-fqncI {
       display: block;
-      width: 12px;
-      height: 12px;
-      transition: transform var(--transition-duration) ease;
+      block-size: 12px;
+      inline-size: 12px;
+      transition: transform var(--transition-duration-short) ease;
     }
 
   .show-all-module-BDp21.show-all-module-hQeGI .show-all-module-58e7Q .show-all-module-fqncI {
@@ -1355,10 +1325,10 @@ html {
 
 .multi-select-module-DC7Ix .multi-select-module-OW-NK {
     display: flex;
-    min-height: 32px;
     align-items: center;
     color: var(--color-brand-medium-gray);
     gap: var(--space-4);
+    min-block-size: 32px;
   }
 
 .label-module-iLPRx {
@@ -1413,7 +1383,12 @@ html {
     border: 2px solid var(--color-brand-medium-gray);
     border-radius: var(--border-radius-2);
     color: var(--checkmark-color);
-    transition: all 200ms;
+    margin-inline-start: calc(
+      var(--focus-outline-size) + var(--focus-outline-offset)
+    );
+    transition:
+      border var(--transition-duration-short),
+      background var(--transition-duration-short);
   }
 
   .checkbox-module-QzsaZ .checkbox-module-CQcmb {
@@ -1442,9 +1417,8 @@ html {
   }
 
   .checkbox-module-QzsaZ[data-focus-visible] .checkbox-module-spG9E {
-      box-shadow: var(--shadow-focus-outline-padded);
-      outline: 2px solid var(--color-brand-white);
-      outline-offset: 0;
+      outline: var(--focus-outline);
+      outline-offset: var(--focus-outline-offset);
     }
 
   .checkbox-module-QzsaZ[data-selected] .checkbox-module-spG9E, .checkbox-module-QzsaZ[data-indeterminate] .checkbox-module-spG9E {
@@ -1624,7 +1598,8 @@ html {
     }
 
   .info-icon-tooltip-module-oR4nD .info-icon-tooltip-module-0lY-K:focus-visible {
-      box-shadow: var(--shadow-focus-outline);
+      outline: var(--focus-outline);
+      outline-offset: 0;
     }
 
   .info-icon-tooltip-module-oR4nD .info-icon-tooltip-module-0lY-K[aria-expanded='true'] {
@@ -1702,8 +1677,8 @@ html {
   }
 .input-module-uAOUY.input-module-7iPV5,
   .input-module-uAOUY:has([data-focused]) {
-    box-shadow: var(--shadow-focus-outline);
-    outline: 0;
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
   }
 .input-module-uAOUY:has([data-invalid]) {
     border-bottom-color: var(--color-brand-red);
@@ -1885,22 +1860,14 @@ html {
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: var(--space-12);
 }
 
   .pagination-module-k4OgY .pagination-module-oq89A, .pagination-module-oq89A .pagination-module-oq89A {
     gap: var(--space-8);
   }
 
-  .pagination-module-k4OgY button, .pagination-module-oq89A button {
-    align-self: stretch;
-    padding-inline: var(--space-24);
-  }
-
-  .pagination-module-k4OgY button[disabled], .pagination-module-oq89A button[disabled] {
-      pointer-events: none;
-    }
-
-  .pagination-module-k4OgY button svg, .pagination-module-oq89A button svg {
+  .pagination-module-k4OgY .pagination-module-cYO35 svg, .pagination-module-k4OgY .pagination-module-rljds svg, .pagination-module-oq89A .pagination-module-cYO35 svg, .pagination-module-oq89A .pagination-module-rljds svg {
       width: 12px;
       height: 12px;
     }
@@ -1959,11 +1926,9 @@ html {
     }
 
   .select-module-IPU-m .select-module-0kwVJ.select-module-cnFLz,
-    .select-module-IPU-m .select-module-0kwVJ:focus,
-    .select-module-IPU-m .select-module-0kwVJ:has([data-focused]) {
-      border-color: transparent;
-      box-shadow: var(--shadow-focus-outline);
-      outline: none;
+    .select-module-IPU-m .select-module-0kwVJ:focus {
+      outline: var(--focus-outline);
+      outline-offset: var(--focus-outline-offset);
     }
 
   .select-module-IPU-m .select-module-0kwVJ[disabled] {
@@ -2183,6 +2148,7 @@ html {
   align-items: center;
   padding: 0;
   margin: 0;
+  color: var(--color-brand-dark-gray);
   list-style: none;
 }
 .breadcrumb-module-CQGse .breadcrumb-module-hxhDY {
@@ -2190,37 +2156,30 @@ html {
     align-items: center;
   }
 .breadcrumb-module-CQGse .breadcrumb-module-hxhDY .breadcrumb-module-fp2Q6 {
-      display: inline-block;
       color: var(--color-brand-dark-gray);
     }
 .breadcrumb-module-CQGse .breadcrumb-module-hxhDY .breadcrumb-module-fp2Q6 .breadcrumb-module-uIn3w {
-        display: inline-block;
-        width: 14px;
-        height: 14px;
+        block-size: 14px;
+        inline-size: 14px;
       }
 .breadcrumb-module-CQGse .breadcrumb-module-hxhDY .breadcrumb-module-fp2Q6 .breadcrumb-module-uIn3w.breadcrumb-module-K-wMJ {
           display: none;
         }
 .breadcrumb-module-CQGse .breadcrumb-module-hxhDY .breadcrumb-module-fp2Q6:focus-visible {
-        box-shadow: var(--shadow-focus-outline);
-        outline: none;
-      }
-.breadcrumb-module-CQGse .breadcrumb-module-hxhDY .breadcrumb-module-fp2Q6[data-disabled] {
-        cursor: default;
+        outline: var(--focus-outline);
       }
-.breadcrumb-module-CQGse .breadcrumb-module-hxhDY .breadcrumb-module-fp2Q6:not([data-disabled]):hover {
+.breadcrumb-module-CQGse .breadcrumb-module-hxhDY .breadcrumb-module-fp2Q6:hover {
         color: var(--color-brand-red);
       }
 /* stylelint-disable-next-line no-descending-specificity */
 .breadcrumb-module-CQGse .breadcrumb-module-hxhDY:last-of-type .breadcrumb-module-fp2Q6 {
-        color: var(--color-brand-dark-gray);
+        color: currentcolor;
         font-weight: var(--font-weight-bold);
         opacity: 1;
       }
 .breadcrumb-module-CQGse .breadcrumb-module-hxhDY:not(:last-of-type)::after {
-      color: var(--color-brand-medium-gray);
       content: '/';
-      margin-inline: 10px;
+      margin-inline: 0.75em;
     }
 .breadcrumb-module-CQGse .breadcrumb-module-hxhDY.breadcrumb-module-ToeDB {
       display: flex;
@@ -2248,9 +2207,6 @@ html {
         font-size: var(--font-size-14);
         gap: 6px;
       }
-          .breadcrumb-module-CQGse .breadcrumb-module-hxhDY .breadcrumb-module-fp2Q6 .breadcrumb-module-uIn3w.breadcrumb-module-K-wMJ {
-            display: inline-block;
-          }
         .breadcrumb-module-CQGse .breadcrumb-module-hxhDY:last-of-type .breadcrumb-module-fp2Q6 {
           font-weight: var(--font-weight-normal);
         }
@@ -3172,13 +3128,21 @@ html {
   }
 
   .orderline-card-module-AMTMm .orderline-card-module-C8xE6[href]::after {
-      position: absolute;
-      z-index: var(--z-link);
-      background: transparent;
-      content: '';
-      inset: 0;
+        position: absolute;
+        z-index: var(--z-link);
+        background: transparent;
+        content: '';
+        inset: 0;
+      }
+
+  .orderline-card-module-AMTMm .orderline-card-module-C8xE6:focus-visible {
+      outline: 0;
     }
 
+  .orderline-card-module-AMTMm .orderline-card-module-C8xE6:focus-visible::after {
+        outline: var(--focus-outline);
+      }
+
   .orderline-card-module-AMTMm .orderline-card-module-gXavY {
     display: flex;
     flex-wrap: wrap;
@@ -3370,10 +3334,14 @@ html {
       inset: 0;
     }
 
-.product-card-module-pLaiB .product-card-module-CStNi:focus-visible::after {
-      box-shadow: var(--shadow-focus-outline);
+.product-card-module-pLaiB .product-card-module-CStNi:focus-visible {
+      outline: 0;
     }
 
+.product-card-module-pLaiB .product-card-module-CStNi:focus-visible::after {
+        outline: var(--focus-outline);
+      }
+
 .product-card-module-pLaiB .product-card-module-CStNi mark {
       background-color: rgb(109 170 200 / 40%);
       color: currentcolor;
@@ -4026,26 +3994,36 @@ html {
 /* Slide styles end */
 
 .carousel-navigation-button-module-a1-I4 {
+  --color: var(--color-brand-medium-gray);
+  --bg-color: var(--color-brand-light-gray);
+
+  display: grid;
   width: 44px;
   height: 44px;
   border: 1px solid currentcolor;
   border-radius: 100%;
   background-color: var(--color-brand-white);
-  color: var(--color-brand-medium-gray);
+  color: var(--color);
   cursor: pointer;
-  outline: none;
+  place-items: center;
   -webkit-tap-highlight-color: transparent;
   transition: background-color 0.2s ease;
 }
 
+  .carousel-navigation-button-module-a1-I4:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+  }
+
   .carousel-navigation-button-module-a1-I4:hover {
-    background-color: var(--color-brand-light-gray);
+    background-color: var(--bg-color);
   }
 
   .carousel-navigation-button-module-a1-I4[disabled],
   .carousel-navigation-button-module-a1-I4.swiper-button-disabled {
-    background-color: var(--color-brand-white);
-    color: #bcbcbc66;
+    --bg-color: var(--color-brand-white);
+    --color: color-mix(in srgb, var(--color-brand-medium-gray) 40%, white 100%);
+
     cursor: default;
   }
 
@@ -4314,6 +4292,7 @@ html {
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: var(--space-4);
   }
   .pagination-module-pQ-Pu.pagination-module-4U0M3 {
     padding: var(--space-4);
@@ -4327,13 +4306,22 @@ html {
   height: var(--space-16);
   align-items: center;
   justify-content: center;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: transparent;
   cursor: pointer;
 }
 
+.pagination-module-E-D6l:focus-visible {
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+  }
+
 .pagination-module-E-D6l::before {
     display: block;
-    width: 5px;
-    height: 5px;
+    width: 6px;
+    height: 6px;
     box-sizing: border-box;
     padding: 0;
     border-radius: 50%;
@@ -4341,8 +4329,9 @@ html {
     background-color: var(--color-brand-black);
     content: '';
     opacity: 1;
-    text-indent: -9999px;
-    transition: opacity 0.2s linear;
+
+    /* text-indent: -9999px; */
+    transition: opacity var(--transition-duration-short);
   }
 
 .pagination-module-4U0M3 .pagination-module-E-D6l::before {
@@ -4363,7 +4352,7 @@ html {
   width: var(--space-16);
   height: var(--space-16);
   pointer-events: none;
-  transition: transform 0.2s linear;
+  transition: transform var(--transition-duration-short);
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -4374,22 +4363,22 @@ html {
   }
 
 .pagination-module-rNIvD .pagination-module-4--ee {
+    --size: 1px;
+
     display: block;
-    width: var(--size);
-    height: var(--size);
     box-sizing: border-box;
     padding: 0;
     border: 2px solid var(--color-brand-red);
     border-radius: 50%;
     margin: 0;
     background-color: transparent;
+    block-size: var(--size);
     content: '';
+    inline-size: var(--size);
     text-indent: -9999px;
     transition:
-      width 0.2s linear,
-      height 0.2s linear;
-
-    --size: 1px;
+      inline-size var(--transition-duration-short) linear,
+      block-size var(--transition-duration-short) linear;
   }
 
 .pagination-module-4U0M3 .pagination-module-rNIvD .pagination-module-4--ee {
@@ -4808,9 +4797,8 @@ button.swiper-pagination-bullet {
 
   .select-field-module-T07fb .select-field-module-uGX30[data-focused],
     .select-field-module-T07fb .select-field-module-uGX30[data-pressed] {
-      border-color: transparent;
-      box-shadow: var(--shadow-focus-outline);
-      outline: none;
+      outline: var(--focus-outline);
+      outline-offset: var(--focus-outline-offset);
     }
 
   .select-field-module-T07fb .select-field-module-uGX30[disabled] {
@@ -4953,7 +4941,7 @@ button.swiper-pagination-bullet {
   }
 
   .country-selector-trigger-module-aioDu:focus-visible {
-    box-shadow: var(--shadow-focus-outline);
+    outline: var(--focus-outline);
   }
 
   .country-selector-trigger-module-aioDu .country-selector-trigger-module-zOSJK {
@@ -5285,9 +5273,8 @@ button.swiper-pagination-bullet {
       }
 
   .switch-module-C7eqt[data-focus-visible] .switch-module-UZop9 {
-      box-shadow: var(--shadow-focus-outline-padded);
-      outline: 2px solid var(--color-brand-white);
-      outline-offset: 0;
+      outline: var(--focus-outline);
+      outline-offset: var(--focus-outline-offset);
     }
 
   .switch-module-C7eqt[data-selected] .switch-module-UZop9 {
@@ -6186,7 +6173,7 @@ button.swiper-pagination-bullet {
 }
 
 .menu-list-module-eKDL9:focus-visible {
-    box-shadow: inset var(--shadow-focus-outline);
+    outline: var(--focus-outline);
   }
 
 .menu-list-module-eKDL9 .menu-list-module-syyw9 {
@@ -6239,11 +6226,12 @@ button.swiper-pagination-bullet {
 
 .menu-list-module-S08LI:has(:focus-visible) {
     z-index: 1;
-    box-shadow: inset var(--shadow-focus-outline);
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-inset);
   }
 
 .menu-list-module-S08LI:has(:focus-visible) [href] {
-      box-shadow: none;
+      outline: 0;
     }
 
 /* menu list item */
@@ -6385,11 +6373,12 @@ button.swiper-pagination-bullet {
   }
 
 .menu-list-module-4QhF4:has(:focus-visible) .menu-list-module-xFYyo {
-      box-shadow: none;
+      outline: 0;
     }
 
 .menu-list-module-4QhF4:has(:focus-visible) .menu-list-module-xFYyo::before {
-        box-shadow: inset var(--shadow-focus-outline);
+        outline: var(--focus-outline);
+        outline-offset: var(--focus-outline-inset);
       }
 
 /* selected state */
@@ -7016,7 +7005,6 @@ button.swiper-pagination-bullet {
     width: 100%;
     aspect-ratio: 1 / 1;
     background-color: var(--color-brand-light-gray);
-    outline: none;
   }
 
   .images-grid-module-i5868 .images-grid-module-nY9-n .images-grid-module-TahRy {
@@ -7028,7 +7016,7 @@ button.swiper-pagination-bullet {
     }
 
   .images-grid-module-i5868 .images-grid-module-nY9-n.images-grid-module-Ruktz:focus-visible {
-        box-shadow: var(--shadow-focus-outline);
+        outline: var(--focus-outline);
       }
 
   .images-grid-module-i5868[data-count='5'] .images-grid-module-nY9-n:nth-child(3) {
@@ -7320,6 +7308,7 @@ button.swiper-pagination-bullet {
         position: static;
         flex-shrink: 1;
         color: currentcolor;
+        gap: 0;
       }
 
   .announcement-module-Xi0L5 .announcement-module-4XVjD .announcement-module-1Jn7y .announcement-module--Bhqj:hover {
@@ -8517,8 +8506,8 @@ button.swiper-pagination-bullet {
 }
 
 .table-module-RtOV-:focus-visible {
-    box-shadow: var(--shadow-focus-outline) inset;
-    outline: none;
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-inset);
   }
 
 .table-module-RtOV- .table-module-ukG8s {
@@ -8877,52 +8866,37 @@ button.swiper-pagination-bullet {
   gap: var(--space-24);
 }
 
-& .promo-banner-module-yuVEO {
+.promo-banner-module-yuVEO {
   position: relative;
   display: block;
   height: 122px;
-  outline: none;
 }
 
-  & .promo-banner-module-yuVEO.promo-banner-module-ut8Kd {
+  .promo-banner-module-yuVEO.promo-banner-module-ut8Kd {
     width: 250px;
   }
 
-  & .promo-banner-module-yuVEO.promo-banner-module-CSkIw {
+  .promo-banner-module-yuVEO.promo-banner-module-CSkIw {
     width: 310px;
   }
 
-  & .promo-banner-module-yuVEO picture {
+  .promo-banner-module-yuVEO picture {
     width: 100%;
   }
 
-  & .promo-banner-module-yuVEO picture img {
+  .promo-banner-module-yuVEO picture img {
       width: 100%;
     }
 
-  & .promo-banner-module-yuVEO:focus-visible::after {
-    position: absolute;
-    display: block;
-    background-color: transparent;
-    box-shadow: var(--shadow-focus-outline) inset;
-    content: '';
-    inset: 0;
-    pointer-events: none;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-            user-select: none;
-  }
-
-@media (width >= 768px) {
-  & .promo-banner-module-yuVEO {
-    height: 230px;
-  }
+  @media (width >= 768px) {.promo-banner-module-yuVEO {
+    height: 230px
+}
 
-    & .promo-banner-module-yuVEO.promo-banner-module-CSkIw,
-    & .promo-banner-module-yuVEO.promo-banner-module-ut8Kd {
+    .promo-banner-module-yuVEO.promo-banner-module-CSkIw,
+    .promo-banner-module-yuVEO.promo-banner-module-ut8Kd {
       width: auto;
     }
-}
+  }
 
 .promo-banners-module-uVyxh {
   margin-bottom: var(--space-24);
@@ -8944,86 +8918,61 @@ button.swiper-pagination-bullet {
   }
 }
 
-.sidebar-module-fSa9Q.sidebar-module-AIq0M {
-  --transition-timing-function: ease-in-out;
+.sidebar-module-fSa9Q {
+  --docked-size: 324px;
 
-  position: fixed;
-  z-index: calc(var(--sidebar-layer) + 1);
-  top: 0;
-  left: 0;
-  width: 382px;
-  max-width: 100vw;
-  height: 100%;
   box-sizing: border-box;
-  padding-top: 46px;
-  padding-bottom: 56px;
-  background: var(--color-white);
 }
 
-  .sidebar-module-fSa9Q.sidebar-module-AIq0M.sidebar-module-LEZgg {
-    transition: transform var(--transition-duration)
-      var(--transition-timing-function);
+  /* docked */
+  .sidebar-module-fSa9Q.sidebar-module-AIq0M {
+    position: fixed;
+    z-index: calc(var(--sidebar-layer) + 1);
+    display: grid;
+    background: var(--color-white);
+    grid-template: 46px 1fr / 1fr;
+    grid-template-areas:
+      'header'
+      'content';
+    inline-size: min(382px, 100%);
+    inset: 0 auto 0 0;
   }
-
+  .sidebar-module-fSa9Q.sidebar-module-AIq0M.sidebar-module-LEZgg {
+      transition: var(--transition-duration) ease-in-out;
+      transition-property: translate, box-shadow;
+    }
   .sidebar-module-fSa9Q.sidebar-module-AIq0M.sidebar-module-lV7wp {
-    box-shadow: var(--box-shadow-heavy);
-    pointer-events: auto;
-    transform: translateX(0);
-  }
-
+      box-shadow: var(--box-shadow-heavy);
+      translate: 0 0;
+    }
   .sidebar-module-fSa9Q.sidebar-module-AIq0M.sidebar-module-dGDrr {
-    box-shadow: none;
-    pointer-events: none;
-    transform: translateX(-100%);
-  }
-
+      pointer-events: none;
+      translate: -100% 0;
+    }
   .sidebar-module-fSa9Q.sidebar-module-AIq0M .sidebar-module-2puGC {
-    position: absolute;
-    z-index: calc(var(--sidebar-layer) + 2);
-    top: 36px;
-    right: 8px;
-  }
-
-  .sidebar-module-fSa9Q.sidebar-module-AIq0M .sidebar-module-2puGC svg {
-      display: block;
-      width: 32px;
-      height: 32px;
+      grid-area: header;
+      justify-self: end;
     }
-
-  .sidebar-module-fSa9Q.sidebar-module-AIq0M .sidebar-module-2puGC button {
-      -webkit-tap-highlight-color: transparent;
+  .sidebar-module-fSa9Q.sidebar-module-AIq0M .sidebar-module-2puGC svg {
+        block-size: var(--space-32);
+        inline-size: var(--space-32);
+      }
+  .sidebar-module-fSa9Q.sidebar-module-AIq0M .sidebar-module-83z7V {
+      overflow: hidden auto;
+      grid-area: content;
+      padding-inline: var(--space-16);
+      scrollbar-width: thin;
     }
-
-.sidebar-module-fSa9Q.sidebar-module-Scw7D {
-  --transition-timing-function: ease-in-out;
-
-  position: static;
-  z-index: initial;
-  overflow: hidden;
-  width: 0;
-  padding: 0;
-  transform: translateX(0);
-  white-space: nowrap;
-}
-
-.sidebar-module-fSa9Q.sidebar-module-Scw7D.sidebar-module-LEZgg {
-    transition:
-      width var(--transition-duration) var(--transition-timing-function),
-      transform var(--transition-duration) var(--transition-timing-function);
-  }
-
-.sidebar-module-fSa9Q.sidebar-module-Scw7D.sidebar-module-lV7wp {
-    width: 324px;
-    box-shadow: none;
-  }
-
-.sidebar-module-fSa9Q.sidebar-module-Scw7D.sidebar-module-dGDrr {
-    transform: translateX(0);
-  }
-
-.sidebar-module-fSa9Q.sidebar-module-Scw7D .sidebar-module-2puGC {
-    display: none;
+  /* not docked */
+  .sidebar-module-fSa9Q.sidebar-module-Scw7D {
+    inline-size: var(--docked-size);
   }
+  .sidebar-module-fSa9Q.sidebar-module-Scw7D.sidebar-module-dGDrr {
+      display: none;
+    }
+  .sidebar-module-fSa9Q.sidebar-module-Scw7D .sidebar-module-2puGC {
+      display: none;
+    }
 
 .product-listing-page-module-U0zLZ .product-listing-page-module-9a0ps {
     margin-bottom: 44px;
@@ -9087,12 +9036,12 @@ button.swiper-pagination-bullet {
         }
 
       .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-qhR-J {
-        justify-self: flex-start;
+        justify-self: start;
       }
 
       .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-3LRKg {
         display: flex;
-        justify-self: flex-end;
+        justify-self: end;
       }
 
       .product-listing-page-module-U0zLZ .product-listing-page-module-jGACo .product-listing-page-module-3Jtw- {
@@ -9102,8 +9051,19 @@ button.swiper-pagination-bullet {
   }
   @media (width >= 1440px) {
     .product-listing-page-module-U0zLZ .product-listing-page-module-cUe4a {
+      align-items: start;
+      gap: var(--space-16);
+      grid-template-areas: 'sidebar products';
       grid-template-columns: auto 1fr;
     }
+
+    .product-listing-page-module-U0zLZ .product-listing-page-module-bIfdi {
+      grid-area: sidebar;
+    }
+
+    .product-listing-page-module-U0zLZ .product-listing-page-module-dtbXB {
+      grid-area: products;
+    }
   }
 
 .search-results-page-module-uE5NE .search-results-page-module-grXkv {