@vadem/ui 0.0.0-stage → 0.0.1

package/styles/components/sidebar.css

@@ -0,0 +1,105 @@
+/* Sidebar - spec: specs/sidebar.md */
+@layer vd.components {
+  .vd-sidebar-layout {
+    --vd-sidebar-width: 16rem;
+    --vd-sidebar-padding: var(--vd-space-3);
+    --vd-sidebar-gap: var(--vd-space-6);
+    --vd-sidebar-rail-width: calc(
+      var(--vd-control-height-md) + var(--vd-sidebar-padding) * 2 +
+        (var(--vd-focus-ring-width) + var(--vd-focus-ring-offset)) * 2
+    );
+    --vd-sidebar-bg: var(--vd-color-bg);
+    --vd-sidebar-border: var(--vd-color-border);
+    /* Viewport-height shell by default; set a length to embed the layout in a bounded box. */
+    --vd-sidebar-block-size: 100dvh;
+
+    display: grid;
+    grid-template-columns: var(--vd-sidebar-width) minmax(0, 1fr);
+    min-block-size: var(--vd-sidebar-block-size);
+  }
+  .vd-sidebar-layout[data-collapsed] {
+    grid-template-columns: var(--vd-sidebar-rail-width) minmax(0, 1fr);
+  }
+  .vd-sidebar-layout[data-mode='drawer'] {
+    grid-template-columns: minmax(0, 1fr);
+  }
+
+  .vd-sidebar-layout__body {
+    min-inline-size: 0;
+  }
+
+  .vd-sidebar {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vd-sidebar-gap);
+    min-inline-size: 0;
+  }
+  .vd-sidebar-layout > .vd-sidebar {
+    position: sticky;
+    inset-block-start: 0;
+    max-block-size: var(--vd-sidebar-block-size);
+    padding: var(--vd-sidebar-padding);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border-inline-end: var(--vd-border-width) solid var(--vd-sidebar-border);
+    background: var(--vd-sidebar-bg);
+  }
+
+  /* ------------------------------------------------------------ rail */
+
+  .vd-sidebar-layout[data-collapsed] > .vd-sidebar {
+    overflow-x: hidden;
+  }
+  /* An opt-out flag must beat any consumer display value, which is unlayered and would win;
+     a layered !important outranks unlayered declarations (as the UA does for [hidden]). */
+  .vd-sidebar-layout[data-collapsed] > .vd-sidebar [data-rail='hidden'] {
+    display: none !important;
+  }
+  /* Names stay in the accessibility tree; only the icon remains visible. */
+  .vd-sidebar-layout[data-collapsed] .vd-navigation-link > :not([slot='start']),
+  .vd-sidebar-layout[data-collapsed] .vd-navigation-label {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .vd-sidebar-layout[data-collapsed] .vd-navigation-link {
+    position: relative;
+    grid-template-columns: auto;
+    justify-content: center;
+  }
+  .vd-sidebar-layout[data-collapsed] .vd-navigation-link > [slot='start'] {
+    display: inline-flex;
+    grid-column: 1;
+  }
+  .vd-sidebar-layout[data-collapsed] .vd-navigation-list section + section {
+    padding-block-start: var(--vd-navigation-list-group-gap);
+    border-block-start: var(--vd-border-width) solid var(--vd-sidebar-border);
+  }
+  .vd-sidebar-layout[data-collapsed] .vd-navigation-list {
+    --vd-navigation-list-group-gap: var(--vd-space-3);
+  }
+
+  /* ---------------------------------------------------------- drawer */
+
+  /* The only place the breakpoint lives; the layout reads this flag (media can't read tokens). */
+  @media (width < 64rem) {
+    .vd-sidebar-layout {
+      --vd-sidebar-drawer: 1;
+    }
+    /* Before the script switches modes (and under SSR), never show the docked copy. */
+    .vd-sidebar-layout > .vd-sidebar {
+      display: none;
+    }
+    .vd-sidebar-layout {
+      grid-template-columns: minmax(0, 1fr);
+    }
+  }
+  @media (forced-colors: active) {
+    .vd-sidebar-layout > .vd-sidebar {
+      border-inline-end-color: CanvasText;
+    }
+  }
+}

package/styles/components/skeleton.css

@@ -0,0 +1,83 @@
+@layer vd.components {
+  .vd-skeleton {
+    --vd-skeleton-bg: var(--vd-color-fill-hover);
+    --vd-skeleton-radius: var(--vd-radius-sm);
+    --vd-skeleton-inline-size: auto;
+    --vd-skeleton-block-size: auto;
+    --vd-skeleton-duration: var(--vd-duration-shimmer);
+
+    position: relative;
+    overflow: hidden;
+    min-block-size: 1lh;
+    display: block;
+    flex-shrink: 0;
+    inline-size: var(--vd-skeleton-inline-size);
+    max-inline-size: 100%;
+    block-size: var(--vd-skeleton-block-size);
+    border-radius: var(--vd-skeleton-radius);
+    background: var(--vd-skeleton-bg);
+    pointer-events: none;
+  }
+  .vd-skeleton[data-shape] {
+    --vd-skeleton-inline-size: 100%;
+    --vd-skeleton-bg: var(--vd-color-fill-active);
+    min-block-size: 0;
+  }
+  .vd-skeleton[data-shape='text'] {
+    --vd-skeleton-block-size: var(--vd-text-sm);
+    --vd-skeleton-radius: var(--vd-radius-xs);
+  }
+  .vd-skeleton[data-shape='text'][data-size='sm'] {
+    --vd-skeleton-block-size: var(--vd-text-xs);
+  }
+  .vd-skeleton[data-shape='text'][data-size='lg'] {
+    --vd-skeleton-block-size: var(--vd-text-lg);
+  }
+  .vd-skeleton[data-shape='circle'] {
+    --vd-skeleton-inline-size: var(--vd-space-10);
+    --vd-skeleton-block-size: var(--vd-space-10);
+    --vd-skeleton-radius: var(--vd-radius-full);
+    aspect-ratio: 1;
+    block-size: auto;
+  }
+  .vd-skeleton[data-shape='circle'][data-size='sm'] {
+    --vd-skeleton-inline-size: var(--vd-space-8);
+    --vd-skeleton-block-size: var(--vd-space-8);
+  }
+  .vd-skeleton[data-shape='circle'][data-size='lg'] {
+    --vd-skeleton-inline-size: var(--vd-space-12);
+    --vd-skeleton-block-size: var(--vd-space-12);
+  }
+  .vd-skeleton[data-shape='rectangle'] {
+    --vd-skeleton-block-size: var(--vd-space-24);
+    --vd-skeleton-radius: var(--vd-radius-md);
+  }
+  @media (prefers-reduced-motion: no-preference) {
+    .vd-skeleton[data-animated]::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(90deg, transparent, var(--vd-color-shimmer), transparent);
+      translate: -100% 0;
+      animation: vd-skeleton-shimmer var(--vd-skeleton-duration) var(--vd-ease-in-out) infinite;
+    }
+    .vd-skeleton[data-animated]:dir(rtl)::after {
+      animation-direction: reverse;
+    }
+  }
+  @keyframes vd-skeleton-shimmer {
+    to {
+      translate: 100% 0;
+    }
+  }
+  @media (forced-colors: active) {
+    .vd-skeleton {
+      background: Canvas;
+      border: var(--vd-border-width) solid GrayText;
+    }
+    .vd-skeleton[data-animated]::after {
+      content: none;
+      animation: none;
+    }
+  }
+}

package/styles/components/slider.css

@@ -0,0 +1,132 @@
+/* Slider (native range) - spec: specs/slider.md */
+/* Engine pseudo-elements live in separate rules: an unknown one drops the whole rule. */
+@layer vd.components {
+  .vd-slider {
+    --vd-slider-track-size: var(--vd-space-1-5);
+    --vd-slider-thumb-size: 1.125rem;
+    --vd-slider-track: var(--vd-color-fill-hover);
+    --vd-slider-range: var(--vd-color-action);
+    --vd-slider-thumb-bg: var(--vd-color-on-action);
+    --vd-slider-thumb-border: var(--vd-color-action);
+    --vd-slider-ring: var(--vd-color-focus);
+    /* Track gradient direction; mirrored in RTL (the native range flips too). */
+    --vd-slider-direction: to right;
+
+    appearance: none;
+    display: block;
+    inline-size: 100%;
+    block-size: var(--vd-slider-thumb-size);
+    margin: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+
+  .vd-slider:dir(rtl) {
+    --vd-slider-direction: to left;
+  }
+
+  .vd-slider[data-invalid] {
+    --vd-slider-range: var(--vd-color-danger);
+    --vd-slider-thumb-border: var(--vd-color-danger);
+    --vd-slider-ring: var(--vd-color-danger);
+  }
+
+  .vd-slider:disabled {
+    opacity: var(--vd-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .vd-slider:focus-visible {
+    outline: none;
+  }
+
+  /* --------------------------------------------------------- WebKit/Blink */
+
+  .vd-slider::-webkit-slider-runnable-track {
+    block-size: var(--vd-slider-track-size);
+    border-radius: var(--vd-radius-full);
+    background: linear-gradient(
+      var(--vd-slider-direction),
+      var(--vd-slider-range) var(--vd-slider-fill, 0%),
+      var(--vd-slider-track) var(--vd-slider-fill, 0%)
+    );
+  }
+
+  .vd-slider::-webkit-slider-thumb {
+    appearance: none;
+    inline-size: var(--vd-slider-thumb-size);
+    block-size: var(--vd-slider-thumb-size);
+    margin-block-start: calc((var(--vd-slider-track-size) - var(--vd-slider-thumb-size)) / 2);
+    border: calc(var(--vd-border-width) * 2) solid var(--vd-slider-thumb-border);
+    border-radius: var(--vd-radius-full);
+    background: var(--vd-slider-thumb-bg);
+    box-shadow: var(--vd-shadow-sm);
+    transition:
+      scale var(--vd-duration-fast) var(--vd-ease-out),
+      box-shadow var(--vd-duration-fast) var(--vd-ease-out);
+  }
+
+  .vd-slider:focus-visible::-webkit-slider-thumb {
+    box-shadow:
+      0 0 0 var(--vd-focus-ring-offset) var(--vd-color-bg),
+      0 0 0 calc(var(--vd-focus-ring-offset) + var(--vd-focus-ring-width)) var(--vd-slider-ring);
+  }
+
+  .vd-slider:not(:disabled):active::-webkit-slider-thumb {
+    scale: 1.1;
+  }
+
+  /* -------------------------------------------------------------- Firefox */
+
+  .vd-slider::-moz-range-track {
+    block-size: var(--vd-slider-track-size);
+    border-radius: var(--vd-radius-full);
+    background: var(--vd-slider-track);
+  }
+
+  .vd-slider::-moz-range-progress {
+    block-size: var(--vd-slider-track-size);
+    border-radius: var(--vd-radius-full);
+    background: var(--vd-slider-range);
+  }
+
+  .vd-slider::-moz-range-thumb {
+    box-sizing: border-box;
+    inline-size: var(--vd-slider-thumb-size);
+    block-size: var(--vd-slider-thumb-size);
+    border: calc(var(--vd-border-width) * 2) solid var(--vd-slider-thumb-border);
+    border-radius: var(--vd-radius-full);
+    background: var(--vd-slider-thumb-bg);
+    box-shadow: var(--vd-shadow-sm);
+    transition: scale var(--vd-duration-fast) var(--vd-ease-out);
+  }
+
+  .vd-slider:focus-visible::-moz-range-thumb {
+    box-shadow:
+      0 0 0 var(--vd-focus-ring-offset) var(--vd-color-bg),
+      0 0 0 calc(var(--vd-focus-ring-offset) + var(--vd-focus-ring-width)) var(--vd-slider-ring);
+  }
+
+  .vd-slider:not(:disabled):active::-moz-range-thumb {
+    scale: 1.1;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .vd-slider:active::-webkit-slider-thumb {
+      scale: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .vd-slider:active::-moz-range-thumb {
+      scale: none;
+    }
+  }
+
+  /* System colors: fall back to the native control (custom tracks may lose their colors). */
+  @media (forced-colors: active) {
+    .vd-slider {
+      appearance: auto;
+    }
+  }
+}

package/styles/components/splitter.css

@@ -0,0 +1,83 @@
+@layer vd.components {
+  .vd-splitter {
+    --vd-splitter-handle-size: var(--vd-space-6);
+    --vd-splitter-rail: var(--vd-color-border-control);
+    --vd-splitter-rail-active: var(--vd-color-focus);
+    --vd-splitter-handle-bg: var(--vd-color-surface);
+    --vd-splitter-handle-hover: var(--vd-color-fill);
+    --vd-splitter-radius: var(--vd-radius-lg);
+    --vd-splitter-border: var(--vd-color-border);
+    display: grid;
+    grid-template-columns:
+      minmax(0, var(--vd-splitter-first, 50fr)) var(--vd-splitter-handle-size)
+      minmax(0, var(--vd-splitter-second, 50fr));
+    min-inline-size: 0;
+    min-block-size: 0;
+    max-inline-size: 100%;
+    border: var(--vd-border-width) solid var(--vd-splitter-border);
+    border-radius: var(--vd-splitter-radius);
+  }
+  .vd-splitter[data-orientation='vertical'] {
+    grid-template-columns: minmax(0, 1fr);
+    grid-template-rows:
+      minmax(0, var(--vd-splitter-first, 50fr)) var(--vd-splitter-handle-size)
+      minmax(0, var(--vd-splitter-second, 50fr));
+  }
+  .vd-splitter__pane {
+    min-inline-size: 0;
+    min-block-size: 0;
+    overflow: auto;
+  }
+  .vd-splitter__handle {
+    display: grid;
+    place-items: center;
+    min-inline-size: 0;
+    min-block-size: 0;
+    cursor: col-resize;
+    background: var(--vd-splitter-handle-bg);
+    touch-action: none;
+    user-select: none;
+  }
+  .vd-splitter__handle::before {
+    content: '';
+    inline-size: var(--vd-border-width);
+    block-size: 100%;
+    background: var(--vd-splitter-rail);
+    pointer-events: none;
+  }
+  .vd-splitter[data-orientation='vertical'] > .vd-splitter__handle {
+    cursor: row-resize;
+  }
+  .vd-splitter[data-orientation='vertical'] > .vd-splitter__handle::before {
+    inline-size: 100%;
+    block-size: var(--vd-border-width);
+  }
+  .vd-splitter__handle:not([aria-disabled='true']):hover,
+  .vd-splitter[data-dragging] > .vd-splitter__handle {
+    background: var(--vd-splitter-handle-hover);
+  }
+  .vd-splitter__pane:focus-visible,
+  .vd-splitter__handle:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: calc(var(--vd-focus-ring-width) * -1);
+  }
+  .vd-splitter__handle:focus-visible::before,
+  .vd-splitter[data-dragging] > .vd-splitter__handle::before {
+    background: var(--vd-splitter-rail-active);
+  }
+  .vd-splitter__handle[aria-disabled='true'] {
+    cursor: default;
+  }
+  @media (forced-colors: active) {
+    .vd-splitter {
+      border-color: CanvasText;
+    }
+    .vd-splitter__handle::before {
+      background: CanvasText;
+    }
+    .vd-splitter__pane:focus-visible,
+    .vd-splitter__handle:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+}

package/styles/components/stat.css

@@ -0,0 +1,62 @@
+/* Stat - spec: specs/stat.md */
+@layer vd.components {
+  .vd-stat {
+    --vd-stat-gap: var(--vd-space-2);
+    --vd-stat-label: var(--vd-color-text-muted);
+    --vd-stat-value-size: var(--vd-text-3xl);
+    --vd-stat-caption: var(--vd-color-text-subtle);
+
+    display: grid;
+    gap: var(--vd-stat-gap);
+    min-inline-size: 0;
+  }
+  .vd-stat[data-size='sm'] {
+    --vd-stat-gap: var(--vd-space-1);
+    --vd-stat-value-size: var(--vd-text-xl);
+  }
+
+  .vd-stat__list {
+    display: grid;
+    gap: var(--vd-stat-gap);
+    margin: 0;
+  }
+  .vd-stat__list > * {
+    margin: 0;
+  }
+  .vd-stat__label {
+    color: var(--vd-stat-label);
+    font-size: var(--vd-text-sm);
+    font-weight: var(--vd-weight-medium);
+    overflow-wrap: anywhere;
+  }
+  /* Values are wrapped in <bdi>: "₴ 48 920" keeps its order in RTL while the block keeps the
+     page's alignment. */
+  /* Large standalone figures keep proportional digits (tabular "121" looks loose at display
+     size); the delta sits in a badge and stays tabular. */
+  .vd-stat__delta-value {
+    font-variant-numeric: tabular-nums;
+  }
+  .vd-stat__value {
+    font-size: var(--vd-stat-value-size);
+    font-weight: var(--vd-weight-extrabold);
+    letter-spacing: var(--vd-tracking-tighter);
+    line-height: var(--vd-leading-tight);
+    overflow-wrap: anywhere;
+    text-wrap: balance;
+  }
+  .vd-stat__meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--vd-space-1) var(--vd-space-2);
+    color: var(--vd-stat-caption);
+    font-size: var(--vd-text-xs);
+  }
+  .vd-stat__skeleton-value {
+    inline-size: 70%;
+    block-size: calc(var(--vd-stat-value-size) * var(--vd-leading-tight));
+  }
+  .vd-stat__skeleton-meta {
+    inline-size: 85%;
+  }
+}

package/styles/components/stepper.css

@@ -0,0 +1,236 @@
+/* Ordered process navigation. Spec: specs/stepper.md. */
+@layer vd.components {
+  .vd-stepper {
+    --vd-stepper-gap: var(--vd-space-3);
+    --vd-stepper-padding: var(--vd-space-3);
+    --vd-stepper-indicator-size: var(--vd-control-height-sm);
+    --vd-stepper-radius: var(--vd-radius-control);
+    --vd-stepper-connector: var(--vd-color-border-strong);
+    --vd-stepper-connector-complete: var(--vd-color-action-text);
+    --vd-stepper-fg: var(--vd-color-text);
+    --vd-stepper-fg-muted: var(--vd-color-text-muted);
+    --vd-stepper-current-bg: var(--vd-color-action);
+    --vd-stepper-current-fg: var(--vd-color-on-action);
+    --vd-stepper-complete-bg: var(--vd-color-action-subtle);
+    --vd-stepper-complete-fg: var(--vd-color-action-text);
+    --vd-stepper-error-bg: var(--vd-color-danger-subtle);
+    --vd-stepper-error-fg: var(--vd-color-danger-text);
+    --vd-stepper-hover: var(--vd-color-fill);
+
+    display: block;
+    container: vd-stepper / inline-size;
+  }
+
+  .vd-stepper > ol {
+    display: flex;
+    gap: var(--vd-stepper-gap);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .vd-stepper > ol > li {
+    position: relative;
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .vd-stepper > ol > li:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    inset-block-start: calc(var(--vd-stepper-padding) + var(--vd-stepper-indicator-size) / 2);
+    inset-inline-start: calc(
+      var(--vd-stepper-padding) + var(--vd-stepper-indicator-size) + var(--vd-stepper-gap)
+    );
+    inset-inline-end: 0;
+    block-size: var(--vd-border-width);
+    background: var(--vd-stepper-connector);
+    pointer-events: none;
+  }
+
+  .vd-stepper > ol > li:has(> .vd-step[data-completed]:not([data-invalid]))::after {
+    background: var(--vd-stepper-connector-complete);
+  }
+
+  .vd-step {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--vd-stepper-gap);
+    inline-size: 100%;
+    min-inline-size: 0;
+    padding: var(--vd-stepper-padding);
+    border: 0;
+    border-radius: var(--vd-stepper-radius);
+    background: transparent;
+    color: var(--vd-stepper-fg);
+    text-align: start;
+    font: inherit;
+    cursor: pointer;
+    transition: var(--vd-transition-colors);
+  }
+
+  .vd-step__indicator {
+    display: grid;
+    place-items: center;
+    flex: none;
+    inline-size: var(--vd-stepper-indicator-size);
+    block-size: var(--vd-stepper-indicator-size);
+    border: var(--vd-border-width) solid var(--vd-color-border-control);
+    border-radius: var(--vd-radius-full);
+    background: var(--vd-color-surface);
+    color: var(--vd-stepper-fg-muted);
+    font-size: var(--vd-text-sm);
+    font-weight: var(--vd-weight-semibold);
+    font-variant-numeric: tabular-nums;
+    transition: var(--vd-transition-colors);
+  }
+
+  .vd-step__indicator vd-icon {
+    --vd-icon-size: var(--vd-space-4);
+  }
+
+  .vd-step__content {
+    display: grid;
+    gap: var(--vd-space-1);
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .vd-step__title {
+    font-size: var(--vd-text-sm);
+    font-weight: var(--vd-weight-semibold);
+    line-height: var(--vd-leading-snug);
+  }
+
+  /* Current remains recognizable when completion/error takes indicator priority. */
+  .vd-step[data-current] .vd-step__title {
+    text-decoration: underline;
+    text-decoration-thickness: var(--vd-border-width);
+    text-underline-offset: var(--vd-space-1);
+  }
+
+  .vd-step__description {
+    color: var(--vd-stepper-fg-muted);
+    font-size: var(--vd-text-sm);
+    line-height: var(--vd-leading-normal);
+  }
+
+  .vd-step[data-state='current'] .vd-step__indicator {
+    border-color: var(--vd-stepper-current-bg);
+    background: var(--vd-stepper-current-bg);
+    color: var(--vd-stepper-current-fg);
+  }
+
+  .vd-step[data-state='complete'] .vd-step__indicator {
+    border-color: var(--vd-stepper-complete-fg);
+    background: var(--vd-stepper-complete-bg);
+    color: var(--vd-stepper-complete-fg);
+  }
+
+  .vd-step[data-state='error'] .vd-step__indicator {
+    border-color: var(--vd-stepper-error-fg);
+    background: var(--vd-stepper-error-bg);
+    color: var(--vd-stepper-error-fg);
+  }
+
+  .vd-step[data-state='error'] .vd-step__title {
+    color: var(--vd-stepper-error-fg);
+  }
+
+  .vd-step:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: var(--vd-focus-ring-offset);
+  }
+
+  .vd-step:disabled {
+    opacity: var(--vd-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  @media (hover: hover) {
+    .vd-step:not(:disabled):hover {
+      background: var(--vd-stepper-hover);
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .vd-step:not(:disabled):active .vd-step__indicator {
+      scale: var(--vd-press-scale);
+    }
+  }
+
+  .vd-stepper[data-orientation='vertical'] > ol {
+    flex-direction: column;
+  }
+
+  .vd-stepper[data-orientation='vertical'] .vd-step {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .vd-stepper[data-orientation='vertical'] > ol > li:not(:last-child)::after {
+    inset-block-start: calc(
+      var(--vd-stepper-padding) + var(--vd-stepper-indicator-size) + var(--vd-space-1)
+    );
+    inset-block-end: calc(var(--vd-stepper-gap) * -1 + var(--vd-space-1));
+    inset-inline-start: calc(var(--vd-stepper-padding) + var(--vd-stepper-indicator-size) / 2);
+    inset-inline-end: auto;
+    inline-size: var(--vd-border-width);
+    block-size: auto;
+  }
+
+  /* Container breakpoint is structural (media/container queries cannot read tokens). */
+  @container vd-stepper (width < 30rem) {
+    .vd-stepper[data-orientation='horizontal'] > ol {
+      flex-direction: column;
+    }
+
+    .vd-stepper[data-orientation='horizontal'] .vd-step {
+      flex-direction: row;
+      align-items: flex-start;
+    }
+
+    .vd-stepper[data-orientation='horizontal'] > ol > li:not(:last-child)::after {
+      inset-block-start: calc(
+        var(--vd-stepper-padding) + var(--vd-stepper-indicator-size) + var(--vd-space-1)
+      );
+      inset-block-end: calc(var(--vd-stepper-gap) * -1 + var(--vd-space-1));
+      inset-inline-start: calc(var(--vd-stepper-padding) + var(--vd-stepper-indicator-size) / 2);
+      inset-inline-end: auto;
+      inline-size: var(--vd-border-width);
+      block-size: auto;
+    }
+  }
+
+  /* At text zoom, preserve label width instead of squeezing it beside the indicator. */
+  @container vd-stepper (width < 12rem) {
+    .vd-stepper[data-orientation] .vd-step {
+      flex-direction: column;
+    }
+
+    .vd-stepper[data-orientation] > ol > li:not(:last-child)::after {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .vd-step__indicator {
+      border-color: CanvasText;
+    }
+
+    .vd-step[data-current] .vd-step__indicator {
+      outline: var(--vd-focus-ring-width) solid Highlight;
+      outline-offset: var(--vd-focus-ring-offset);
+    }
+
+    .vd-stepper > ol > li:not(:last-child)::after {
+      background: CanvasText;
+    }
+
+    .vd-step:disabled {
+      opacity: 1;
+      color: GrayText;
+    }
+  }
+}