@swisspost/design-system-styles 8.2.1 → 8.3.0

package/components/_index.scss

@@ -19,6 +19,7 @@
 @use 'form-select';
 @use 'form-textarea';
 @use 'datatable';
+@use 'dialog';
 @use 'form-check';
 @use 'forms';
 @use 'grid';

package/components/dialog.css

@@ -0,0 +1 @@
+dialog{box-shadow:1px 6px 8px rgba(0,0,0,.1),2px 8px 20px 8px rgba(0,0,0,.14);padding:0;min-width:min(389px,90vw);max-width:590px;max-height:90vh;overflow:auto;margin:revert;overscroll-behavior:contain;border:2px solid var(--post-contrast-color)}dialog::backdrop{background-color:rgba(0,0,0,.8);-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){dialog{border-width:2px}dialog::backdrop{background-image:linear-gradient(135deg, CanvasText 4.55%, transparent 4.55%, transparent 50%, CanvasText 50%, CanvasText 54.55%, transparent 54.55%, transparent 100%);background-size:22px 22px;-webkit-backdrop-filter:none;backdrop-filter:none;background-color:rgba(0,0,0,0);forced-color-adjust:none}}dialog[data-size=small]{min-width:296px;max-width:388px}dialog[data-size=large]{min-width:min(600px,90vw);max-width:792px}dialog[data-position=top]{top:2rem;bottom:auto}dialog[data-position=bottom]{top:auto;bottom:2rem}dialog>.dialog-grid{margin:1rem 1rem 0 1rem;display:grid;column-gap:1rem;grid-template-columns:auto 1fr auto;grid-template-areas:"icon header close-button" "icon body close-button" "controls controls controls";background-color:inherit}:where(.dialog-icon,.dialog-header,.dialog-body,.dialog-controls,.dialog-close):empty{display:none}.dialog-grid>post-icon{grid-area:icon;display:block;width:2rem;height:2rem}@media(min-width: 600px){dialog:not([size=small]) .dialog-grid>post-icon{width:3rem;height:3rem}}.dialog-header{grid-area:header;margin-top:0}.dialog-body{grid-area:body;margin-bottom:0}.dialog-body>*:last-child{margin-bottom:0}.dialog-controls{grid-area:controls;position:sticky;bottom:0;padding-block:1rem;display:flex;flex-wrap:wrap;flex-direction:row-reverse;gap:1rem;background-color:inherit}@media(max-width: 399.98px){.dialog-controls button{width:100%}}.dialog-grid>.btn-close{position:sticky;top:0;grid-area:close-button;width:1.5rem;height:1.5rem;min-height:0}dialog:not([data-animation=none]){--_dialog-transition-duration: var(--dialog-transition-duration, 0.5s);transform:scale(0.8);opacity:0;transition-property:transform,opacity,overlay,display;transition-behavior:allow-discrete;transition-duration:var(--_dialog-transition-duration);transition-timing-function:linear(0, 0.007, 0.029 2.2%, 0.118 4.7%, 0.625 14.4%, 0.826 19%, 0.902, 0.962, 1.008 26.1%, 1.041 28.7%, 1.064 32.1%, 1.07 36%, 1.061 40.5%, 1.015 53.4%, 0.999 61.6%, 0.995 71.2%, 1)}dialog:not([data-animation=none])::backdrop{opacity:0;transition:opacity var(--_dialog-transition-duration),overlay var(--_dialog-transition-duration) allow-discrete,display var(--_dialog-transition-duration) allow-discrete,-webkit-backdrop-filter var(--_dialog-transition-duration);transition:backdrop-filter var(--_dialog-transition-duration),opacity var(--_dialog-transition-duration),overlay var(--_dialog-transition-duration) allow-discrete,display var(--_dialog-transition-duration) allow-discrete;transition:backdrop-filter var(--_dialog-transition-duration),opacity var(--_dialog-transition-duration),overlay var(--_dialog-transition-duration) allow-discrete,display var(--_dialog-transition-duration) allow-discrete,-webkit-backdrop-filter var(--_dialog-transition-duration)}dialog:not([data-animation=none])[open]{transform:scale(1);opacity:1}@starting-style{dialog:not([data-animation=none])[open]{opacity:0;transform:scale(0.8)}}dialog:not([data-animation=none])[open]::backdrop{opacity:1;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@starting-style{dialog:not([data-animation=none])[open]::backdrop{opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}@media(forced-colors: active){dialog:not([data-animation=none])[open]::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}}dialog:not([data-animation=none])[data-animation=slide-in]{transform:translateY(calc(var(--_dialog-slide-in-offset)))}dialog:not([data-animation=none])[data-animation=slide-in][data-position=top]{--_dialog-slide-in-offset: -3rem}dialog:not([data-animation=none])[data-animation=slide-in][data-position=bottom]{--_dialog-slide-in-offset: 3rem}dialog:not([data-animation=none])[data-animation=slide-in][open]{transform:translateY(0)}@starting-style{dialog:not([data-animation=none])[data-animation=slide-in][open]{transform:translateY(calc(var(--_dialog-slide-in-offset)))}}

package/components/dialog.scss

@@ -0,0 +1,249 @@
+@use '../mixins/elevation';
+@use '../mixins/utilities';
+@use '../variables/spacing';
+@use '../variables/color';
+@use '../variables/animation';
+
+@use './../themes/bootstrap/core' as *;
+
+dialog {
+  @include elevation.elevation('elevation-5');
+
+  padding: 0;
+  min-width: min(389px, 90vw);
+  max-width: 590px;
+  max-height: 90vh;
+  overflow: auto;
+  margin: revert;
+  overscroll-behavior: contain;
+  border: 2px solid var(--post-contrast-color); // Ensures good contrast when bg is dark against dark backdrop
+
+  &::backdrop {
+    background-color: rgba(0, 0, 0, 0.8);
+    -webkit-backdrop-filter: blur(0);
+            backdrop-filter: blur(0);
+  }
+
+  @include utilities.high-contrast-mode {
+    // Show the border in HCM
+    border-width: 2px;
+
+    // Mark the backdrop as inactive in HCM
+    &::backdrop {
+      background-image: linear-gradient(
+        135deg,
+        CanvasText 4.55%,
+        transparent 4.55%,
+        transparent 50%,
+        CanvasText 50%,
+        CanvasText 54.55%,
+        transparent 54.55%,
+        transparent 100%
+      );
+      background-size: 22px 22px;
+      -webkit-backdrop-filter: none;
+              backdrop-filter: none;
+      background-color: transparent;
+      forced-color-adjust: none;
+    }
+  }
+
+  // Sizes
+  // [small, medium (default), large]
+  &[data-size='small'] {
+    min-width: 296px;
+    max-width: 388px;
+  }
+
+  &[data-size='large'] {
+    min-width: min(600px, 90vw);
+    max-width: 792px;
+  }
+
+  // Positioning
+  // [top, center (default), bottom]
+  &[data-position='top'] {
+    top: 2rem;
+    bottom: auto;
+  }
+
+  &[data-position='bottom'] {
+    top: auto;
+    bottom: 2rem;
+  }
+}
+
+dialog > .dialog-grid {
+  margin: spacing.$size-regular spacing.$size-regular 0 spacing.$size-regular;
+  display: grid;
+  column-gap: spacing.$size-regular;
+  grid-template-columns: auto 1fr auto;
+  grid-template-areas:
+    'icon header close-button'
+    'icon body close-button'
+    'controls controls controls';
+
+  // Propagate bg color to the controls
+  background-color: inherit;
+}
+
+:where(.dialog-icon, .dialog-header, .dialog-body, .dialog-controls, .dialog-close):empty {
+  display: none;
+}
+
+.dialog-grid > post-icon {
+  grid-area: icon;
+  display: block;
+
+  width: spacing.$size-big;
+  height: spacing.$size-big;
+
+  // Larger icon for bigger notification dialogs
+  dialog:not([size='small']) & {
+    @include media-breakpoint-up(rg) {
+      width: spacing.$size-small-huge;
+      height: spacing.$size-small-huge;
+    }
+  }
+}
+
+.dialog-header {
+  grid-area: header;
+  margin-top: 0;
+}
+
+.dialog-body {
+  grid-area: body;
+  margin-bottom: 0;
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+.dialog-controls {
+  grid-area: controls;
+  position: sticky;
+  bottom: 0;
+  padding-block: spacing.$size-regular;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row-reverse;
+  gap: spacing.$size-regular;
+  background-color: inherit;
+
+  button {
+    @include media-breakpoint-down(sm) {
+      width: 100%;
+    }
+  }
+}
+
+.dialog-grid > .btn-close {
+  position: sticky;
+  top: 0;
+  grid-area: close-button;
+  width: spacing.$size-large;
+  height: spacing.$size-large;
+  min-height: 0;
+}
+
+// Animations
+// [slide-in, pop-in, none]
+// Progressively enhanced with currently experimental @starting-style which allows to animate stuff appearing in the top layer
+// https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
+dialog:not([data-animation='none']) {
+  --_dialog-transition-duration: var(--dialog-transition-duration, 0.5s);
+
+  transform: scale(0.8);
+  opacity: 0;
+  transition-property: transform, opacity, overlay, display;
+  transition-behavior: allow-discrete;
+  transition-duration: var(--_dialog-transition-duration);
+  transition-timing-function: linear(
+    0,
+    0.007,
+    0.029 2.2%,
+    0.118 4.7%,
+    0.625 14.4%,
+    0.826 19%,
+    0.902,
+    0.962,
+    1.008 26.1%,
+    1.041 28.7%,
+    1.064 32.1%,
+    1.07 36%,
+    1.061 40.5%,
+    1.015 53.4%,
+    0.999 61.6%,
+    0.995 71.2%,
+    1
+  );
+
+  &::backdrop {
+    opacity: 0;
+    transition:
+      opacity var(--_dialog-transition-duration),
+      overlay var(--_dialog-transition-duration) allow-discrete,
+      display var(--_dialog-transition-duration) allow-discrete,
+      -webkit-backdrop-filter var(--_dialog-transition-duration);
+    transition:
+      backdrop-filter var(--_dialog-transition-duration),
+      opacity var(--_dialog-transition-duration),
+      overlay var(--_dialog-transition-duration) allow-discrete,
+      display var(--_dialog-transition-duration) allow-discrete;
+    transition:
+      backdrop-filter var(--_dialog-transition-duration),
+      opacity var(--_dialog-transition-duration),
+      overlay var(--_dialog-transition-duration) allow-discrete,
+      display var(--_dialog-transition-duration) allow-discrete,
+      -webkit-backdrop-filter var(--_dialog-transition-duration);
+  }
+
+  &[open] {
+    transform: scale(1);
+    opacity: 1;
+
+    @starting-style {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+
+    &::backdrop {
+      opacity: 1;
+      -webkit-backdrop-filter: blur(10px);
+              backdrop-filter: blur(10px);
+
+      @starting-style {
+        opacity: 0;
+        -webkit-backdrop-filter: blur(0);
+                backdrop-filter: blur(0);
+      }
+
+      @media (forced-colors: active) {
+        -webkit-backdrop-filter: none;
+                backdrop-filter: none;
+      }
+    }
+  }
+
+  &[data-animation='slide-in'] {
+    &[data-position='top'] {
+      --_dialog-slide-in-offset: -3rem;
+    }
+
+    &[data-position='bottom'] {
+      --_dialog-slide-in-offset: 3rem;
+    }
+
+    transform: translateY(calc(var(--_dialog-slide-in-offset)));
+
+    &[open] {
+      transform: translateY(0);
+
+      @starting-style {
+        transform: translateY(calc(var(--_dialog-slide-in-offset)));
+      }
+    }
+  }
+}

package/components/stepper.css

@@ -1 +1 @@
-.stepper-container{margin-bottom:1.25rem}@media(min-width: 780px){.stepper-container{margin-bottom:2rem}}@media(min-width: 1280px){.stepper-container{margin-bottom:2.5rem}}.stepper-container>.stepper-bar{display:none}.stepper{counter-reset:step-index;margin:0;padding:0;list-style:none;display:grid;position:relative;overflow:hidden;grid-template-columns:1.25rem;grid-auto-columns:minmax(0, 1fr);padding-inline-end:1.25rem}.stepper-item{grid-row:1;position:relative}.stepper-item:not(:first-child){padding-inline-start:.5rem}.stepper-item:not(:last-child){padding-inline-end:.5rem;grid-column:span 2}.stepper-item::before,.stepper-item::after{content:"";display:block;position:absolute;inset-block-start:1.125rem;height:.25rem;background-color:#999;inset-inline:0}.stepper-item:not(:first-child,:last-child)::before{inset-inline-end:50%}.stepper-item:not(:first-child,:last-child)::after{inset-inline-start:50%}.stepper-item:not(.stepper-item[aria-current=step]~*,:first-child)::before,.stepper-item:not([aria-current=step]:not(:last-child),.stepper-item[aria-current=step]~*)::after{background-color:#fc0;z-index:1}.stepper-link{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;position:relative;z-index:2;overflow:hidden;text-decoration:none;color:var(--post-gray-60);width:-moz-fit-content;width:fit-content;line-height:1.2}.stepper-link:not([title]){-webkit-line-clamp:initial}.stepper-item:not(:first-child,:last-child)>.stepper-link{margin-inline:auto;text-align:center}.stepper-item:last-child>.stepper-link{margin-inline-start:auto;margin-inline-end:-1.25rem;text-align:end}.stepper-item[aria-current=step]>.stepper-link{color:var(--post-gray-80);font-weight:700}.stepper-link::before{counter-increment:step-index;content:counter(step-index);display:flex;align-items:center;justify-content:center;z-index:1;height:2.5rem;width:2.5rem;box-sizing:border-box;margin-block-end:.5rem;color:#000;background-color:#fc0;border:.25rem solid rgb(var(--post-bg-rgb, 255 255 255));border-radius:50%;font-weight:700;text-indent:initial;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.stepper-item:not(:first-child,:last-child)>.stepper-link::before{margin-inline:auto}.stepper-item:last-child>.stepper-link::before{margin-inline-start:auto}.stepper-item:not([aria-current=step],.stepper-item[aria-current=step]~*)>.stepper-link::before{color:rgba(0,0,0,0)}.stepper-item[aria-current=step]~.stepper-item>.stepper-link::before{color:#fff;background-color:#666}.stepper-link::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;display:block;position:absolute;top:.5rem;z-index:1;height:1.5rem;width:1.5rem;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);color:#000}.stepper-item:first-child>.stepper-link::after{left:.5rem}.stepper-item:not(:first-child,:last-child)>.stepper-link::after{left:calc(50% - 0.75rem)}.stepper-item:last-child>.stepper-link::after{right:.5rem}.stepper-item:not([aria-current=step],.stepper-item[aria-current=step]~*)>.stepper-link::after{content:""}.stepper-link:is(a[href]){outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){color:var(--post-gray-80)}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{color:var(--post-contrast-color-inverted)}@supports not selector(:has(:focus-visible)){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){color:var(--post-gray-80)}.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::after{color:var(--post-contrast-color-inverted)}}.stepper-link:is(a[href]):hover{color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):hover{color:var(--post-gray-80)}.stepper-link:is(a[href]):hover::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):hover::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):hover::after{color:var(--post-contrast-color-inverted)}@media(max-width: 599.98px){.stepper-item:first-child,.stepper-item:last-child{padding-inline:0}.stepper-item[aria-current=step]{display:contents}.stepper-item[aria-current=step]>.stepper-link{display:contents}.stepper-item[aria-current=step]::before{grid-row:-1;margin-block-start:1.125rem;position:static}.stepper-item[aria-current=step]:not(:last-child)>.stepper-link::before{grid-row:-1}.stepper-item[aria-current=step]:not(:first-child,:last-child)::after{inset-inline-start:0}.stepper-item:not([aria-current=step]){grid-row:-1;justify-self:stretch}.stepper-item:not([aria-current=step])>.stepper-link{-webkit-line-clamp:initial;line-height:0;text-indent:100%}.stepper-link{white-space:nowrap;width:100%}.stepper-item[aria-current=step]:first-child>.stepper-link::before{order:-1}.stepper-item[aria-current=step]:not(:first-child,:last-child)>.stepper-link::before{margin-inline-start:0;transform:translateX(-50%)}.stepper-item[aria-current=step]:last-child>.stepper-link::before{position:absolute;z-index:2;inset-block-start:0;inset-inline-end:0}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-item::before,.stepper-item::after{background-color:CanvasText}.stepper-item:not(.stepper-item[aria-current=step]~.stepper-item,:first-child)::before,.stepper-item:not([aria-current=step]:not(:last-child),.stepper-item[aria-current=step]~*)::after{background-color:Highlight}.stepper-link::before{forced-color-adjust:none}.stepper-item[aria-current=step]>.stepper-link::before{background-color:Canvas;color:CanvasText}.stepper-item[aria-current=step]~.stepper-item>.stepper-link::before,.stepper-item:not([aria-current=step])>.stepper-link::before{color:Canvas;border-color:Canvas;background-color:CanvasText}.stepper-link::after{color:Canvas}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{border-color:Highlight}@supports not selector(:has(:focus-visible)){.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{border-color:Highlight}}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):hover::before{border-color:Highlight}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href])::before{color:Canvas}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{background-color:Highlight;color:HighlightText}@supports not selector(:has(:focus-visible)){.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{background-color:Highlight;color:HighlightText}}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):hover::before{background-color:Highlight;color:HighlightText}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href])::before{background-color:LinkText}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{color:HighlightText}@supports not selector(:has(:focus-visible)){.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::after{color:HighlightText}}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):hover::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):hover::after{color:HighlightText}}
+.stepper-container{margin-bottom:1.25rem}@media(min-width: 780px){.stepper-container{margin-bottom:2rem}}@media(min-width: 1280px){.stepper-container{margin-bottom:2.5rem}}.stepper-container>.stepper-bar{display:none}.stepper{counter-reset:step-index;margin:0;padding:0;list-style:none;display:grid;position:relative;overflow:hidden;grid-template-columns:1.25rem;grid-auto-columns:minmax(0, 1fr);padding-inline-end:1.25rem}.stepper-item{grid-row:1;position:relative}.stepper-item:not(:first-child){padding-inline-start:.5rem}.stepper-item:not(:last-child){padding-inline-end:.5rem;grid-column:span 2}.stepper-item::before,.stepper-item::after{content:"";display:block;position:absolute;inset-block-start:1.125rem;height:.25rem;background-color:#999;inset-inline:0}.stepper-item:not(:first-child,:last-child)::before{inset-inline-end:50%}.stepper-item:not(:first-child,:last-child)::after{inset-inline-start:50%}.stepper-item:not(.stepper-item[aria-current=step]~*,:first-child)::before,.stepper-item:not([aria-current=step]:not(:last-child),.stepper-item[aria-current=step]~*)::after{background-color:#fc0;z-index:1}.stepper-link{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;counter-increment:step-index;position:relative;z-index:2;overflow:hidden;text-decoration:none;color:var(--post-gray-60);width:-moz-fit-content;width:fit-content;line-height:1.2}.stepper-link:not([title]){-webkit-line-clamp:initial}.stepper-item:not(:first-child,:last-child)>.stepper-link{margin-inline:auto;text-align:center}.stepper-item:last-child>.stepper-link{margin-inline-start:auto;margin-inline-end:-1.25rem;text-align:end}.stepper-item[aria-current=step]>.stepper-link{color:var(--post-gray-80);font-weight:700}.stepper-link::before{content:counter(step-index);display:flex;align-items:center;justify-content:center;z-index:1;height:2.5rem;width:2.5rem;box-sizing:border-box;margin-block-end:.5rem;color:#000;background-color:#fc0;border:.25rem solid rgb(var(--post-bg-rgb, 255 255 255));border-radius:50%;font-weight:700;text-indent:initial;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1)}.stepper-item:not(:first-child,:last-child)>.stepper-link::before{margin-inline:auto}.stepper-item:last-child>.stepper-link::before{margin-inline-start:auto}.stepper-item:not([aria-current=step],.stepper-item[aria-current=step]~*)>.stepper-link::before{color:rgba(0,0,0,0)}.stepper-item[aria-current=step]~.stepper-item>.stepper-link::before{color:#fff;background-color:#666}.stepper-link::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.667 24.533-7.6-7.6 1.867-1.867 5.733 5.733 12.4-12.4 1.867 1.867z'/%3E%3C/svg%3E");background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;display:block;position:absolute;top:.5rem;z-index:1;height:1.5rem;width:1.5rem;transition:color 250ms cubic-bezier(0.4, 0, 0.2, 1),background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);color:#000}.stepper-item:first-child>.stepper-link::after{left:.5rem}.stepper-item:not(:first-child,:last-child)>.stepper-link::after{left:calc(50% - 0.75rem)}.stepper-item:last-child>.stepper-link::after{right:.5rem}.stepper-item:not([aria-current=step],.stepper-item[aria-current=step]~*)>.stepper-link::after{content:""}.stepper-link:is(a[href]){outline-style:none !important;outline-offset:2px !important;outline-width:2px !important;outline-color:var(--post-focus-color) !important}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){outline-style:solid !important;border-radius:4px}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus){color:var(--post-gray-80)}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{color:var(--post-contrast-color-inverted)}@supports not selector(:has(:focus-visible)){.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus){color:var(--post-gray-80)}.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::after{color:var(--post-contrast-color-inverted)}}.stepper-link:is(a[href]):hover{color:var(--post-gray-60)}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):hover{color:var(--post-gray-80)}.stepper-link:is(a[href]):hover::before,.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):hover::before{color:var(--post-contrast-color-inverted);background-color:var(--post-contrast-color)}.stepper-link:is(a[href]):hover::after{color:var(--post-contrast-color-inverted)}@media(max-width: 599.98px){.stepper-item:first-child,.stepper-item:last-child{padding-inline:0}.stepper-item[aria-current=step]{display:contents}.stepper-item[aria-current=step]>.stepper-link{display:contents}.stepper-item[aria-current=step]::before{grid-row:-1;margin-block-start:1.125rem;position:static}.stepper-item[aria-current=step]:not(:last-child)>.stepper-link::before{grid-row:-1}.stepper-item[aria-current=step]:not(:first-child,:last-child)::after{inset-inline-start:0}.stepper-item:not([aria-current=step]){grid-row:-1;justify-self:stretch}.stepper-item:not([aria-current=step])>.stepper-link{-webkit-line-clamp:initial;line-height:0;text-indent:100%}.stepper-link{white-space:nowrap;width:100%}.stepper-item[aria-current=step]:first-child>.stepper-link::before{order:-1}.stepper-item[aria-current=step]:not(:first-child,:last-child)>.stepper-link::before{margin-inline-start:0;transform:translateX(-50%)}.stepper-item[aria-current=step]:last-child>.stepper-link::before{position:absolute;z-index:2;inset-block-start:0;inset-inline-end:0}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.stepper-item::before,.stepper-item::after{background-color:CanvasText}.stepper-item:not(.stepper-item[aria-current=step]~.stepper-item,:first-child)::before,.stepper-item:not([aria-current=step]:not(:last-child),.stepper-item[aria-current=step]~*)::after{background-color:Highlight}.stepper-link::before{forced-color-adjust:none}.stepper-item[aria-current=step]>.stepper-link::before{background-color:Canvas;color:CanvasText}.stepper-item[aria-current=step]~.stepper-item>.stepper-link::before,.stepper-item:not([aria-current=step])>.stepper-link::before{color:Canvas;border-color:Canvas;background-color:CanvasText}.stepper-link::after{color:Canvas}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{border-color:Highlight}@supports not selector(:has(:focus-visible)){.stepper-item[aria-current=step]>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{border-color:Highlight}}.stepper-item[aria-current=step]>.stepper-link:is(a[href]):hover::before{border-color:Highlight}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href])::before{color:Canvas}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{background-color:Highlight;color:HighlightText}@supports not selector(:has(:focus-visible)){.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{background-color:Highlight;color:HighlightText}}.stepper-item[aria-current=step]~.stepper-item>.stepper-link:is(a[href]):hover::before{background-color:Highlight;color:HighlightText}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href])::before{background-color:LinkText}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:has(:focus-visible),.pretend-focus)::after{color:HighlightText}@supports not selector(:has(:focus-visible)){.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):is(:focus-visible,:focus-within,.pretend-focus)::after{color:HighlightText}}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):hover::before{background-color:Highlight}.stepper-item:not([aria-current=step])>.stepper-link:is(a[href]):hover::after{color:HighlightText}}

package/components/stepper.scss

@@ -88,6 +88,7 @@
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
+  counter-increment: step-index;
   position: relative;
   z-index: 2;
   overflow: hidden;
@@ -121,7 +122,6 @@
 
 // step indicator
 .stepper-link::before {
-  counter-increment: step-index;
   content: counter(step-index);
   display: flex;
   align-items: center;