@skdx/docs-kit 0.35.0

package/dist/skins-src/components/toast.css

@@ -0,0 +1,133 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_actuator.css';
+@import '_status.css';
+
+/**
+ * Toast — a transient notification stacked in a viewport corner. Enters from
+ * the edge it is docked to and exits on the same axis.
+ */
+@layer skdx-components {
+  :where(.skdx-toast__viewport) {
+    position: fixed;
+    /* Without an inset a fixed element keeps its static position — the portaled viewport's would be the top-left, under the site header. */
+    inset-block-end: 0;
+    inset-inline-end: 0;
+    z-index: var(--skdx-z-index-toast);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-2);
+
+    inline-size: min(24rem, calc(100vw - var(--skdx-space-8)));
+    max-block-size: 100dvh;
+    padding: var(--skdx-space-4);
+
+    /* Spans a corner but must not swallow clicks across it; only the toasts themselves are interactive. */
+    pointer-events: none;
+  }
+
+  /* Each rule writes both logical axes: setting only inset-block-start would leave the base rule's block-end anchor in place and stretch the region. */
+  :where(.skdx-toast__viewport)[data-placement='top-start'] {
+    inset-block: 0 auto;
+    inset-inline: 0 auto;
+    flex-direction: column-reverse;
+  }
+
+  :where(.skdx-toast__viewport)[data-placement='top'] {
+    inset-block: 0 auto;
+    /* Both inline edges plus auto margins, not translate: a transform here would establish a containing block for the fixed-position toasts inside. */
+    inset-inline: 0;
+    margin-inline: auto;
+    flex-direction: column-reverse;
+  }
+
+  :where(.skdx-toast__viewport)[data-placement='top-end'] {
+    inset-block: 0 auto;
+    inset-inline: auto 0;
+    flex-direction: column-reverse;
+  }
+
+  :where(.skdx-toast__viewport)[data-placement='bottom-start'] {
+    inset-block: auto 0;
+    inset-inline: 0 auto;
+    flex-direction: column;
+  }
+
+  :where(.skdx-toast__viewport)[data-placement='bottom'] {
+    inset-block: auto 0;
+    inset-inline: 0;
+    margin-inline: auto;
+    flex-direction: column;
+  }
+
+  /* Restated rather than left to the base rule, so a consumer's own-layer override of bottom-end doesn't silently win. */
+  :where(.skdx-toast__viewport)[data-placement='bottom-end'] {
+    inset-block: auto 0;
+    inset-inline: auto 0;
+    flex-direction: column;
+  }
+
+  /* Grid, not flex row: text parts share the first column and stack top to bottom, close spans both rows in the second. */
+  :where(.skdx-toast) {
+    pointer-events: auto;
+
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: start;
+    column-gap: var(--skdx-space-3);
+    row-gap: var(--skdx-space-1);
+    padding: var(--skdx-space-3);
+
+    /* Fallbacks stay: a Toast mounted directly, outside any Toaster, carries no data-status and must still render. */
+    color: var(--skdx-status-text, var(--skdx-color-text-default));
+    background-color: var(--skdx-status-bg, var(--skdx-color-surface-raised));
+    border: var(--skdx-border-width-thin) solid
+      var(--skdx-status-border, var(--skdx-color-border-default));
+    border-radius: var(--skdx-radius-lg);
+    box-shadow: var(--skdx-shadow-overlay);
+
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  /* Web Components keeps a closed toast mounted and hidden; author display: grid above beats its shadow-tree hidden styles on origin, so it must be restated here. */
+  :where(.skdx-toast)[hidden] {
+    display: none;
+  }
+
+  :where(.skdx-toast)[data-state='open'] {
+    animation: skdx-slide-in-from-end var(--skdx-motion-duration-normal) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-toast__title) {
+    grid-column: 1;
+    font-weight: var(--skdx-font-weight-semibold);
+  }
+
+  :where(.skdx-toast__description) {
+    grid-column: 1;
+    color: currentColor;
+  }
+
+  :where(.skdx-toast__action) {
+    grid-column: 1;
+    /* Own margin, not the tighter title/description row-gap — an action button needs more breathing room. */
+    margin-block-start: var(--skdx-space-1);
+  }
+
+  :where(.skdx-toast__close) {
+    grid-column: 2;
+    grid-row: 1 / -1;
+    min-inline-size: var(--skdx-target-min);
+    min-block-size: var(--skdx-target-min);
+    color: currentColor;
+    background: transparent;
+    border: 0;
+    border-radius: var(--skdx-radius-sm);
+    cursor: pointer;
+  }
+}

package/dist/skins-src/components/toggle-group.css

@@ -0,0 +1,185 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import 'toggle.css';
+
+/**
+ * ToggleGroup — a run of Toggles acting as one control, joined into a single pill.
+ * Logical border radii keep the rounded ends on the visual ends under RTL.
+ */
+@layer skdx-components {
+  :where(.skdx-toggle-group) {
+    display: inline-flex;
+    align-items: center;
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: var(--skdx-radius-md);
+    /* Clips the children's square corners to the group's radius. */
+    overflow: hidden;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+  }
+
+  :where(.skdx-toggle-group)[data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  :where(.skdx-toggle-group__item) {
+    border: 0;
+    border-radius: 0;
+  }
+
+  /* The second selector of each pair is the flattened-tree form: a framework
+     wrapper (an Angular component host, `display: contents`) can sit between
+     sibling items in the DOM tree without existing in the box tree, and `+`
+     sees the wrapper rather than the item.
+
+     Matched on `[data-skdx-toggle-group-item-wrapper]`, which the
+     wrapper-emitting frameworks put on that host on purpose. A heuristic like
+     `:not([class*='skdx-']):has(> item)` — "an element of ours with no class
+     of ours" — would stop matching the moment the design system gives that
+     host a class, with no error and no visible cause: the divider would
+     simply vanish. */
+  :where(.skdx-toggle-group__item) + :where(.skdx-toggle-group__item),
+  :where([data-skdx-toggle-group-item-wrapper])
+    + :where([data-skdx-toggle-group-item-wrapper])
+    > :where(.skdx-toggle-group__item) {
+    border-inline-start: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+  }
+
+  :where(.skdx-toggle-group)[data-orientation='vertical']
+    :where(.skdx-toggle-group__item)
+    + :where(.skdx-toggle-group__item),
+  :where(.skdx-toggle-group)[data-orientation='vertical']
+    :where([data-skdx-toggle-group-item-wrapper])
+    + :where([data-skdx-toggle-group-item-wrapper])
+    > :where(.skdx-toggle-group__item) {
+    border-inline-start: 0;
+    border-block-start: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+  }
+
+  /* Skin-only: no behaviour or ARIA change, the same group in a different box. */
+  :where(.skdx-toggle-group)[data-full-width] {
+    display: flex;
+    inline-size: 100%;
+  }
+
+  /* min-inline-size: 0 with flex: 1 — items carry white-space: nowrap, so a long
+     label would otherwise set a floor the other items cannot match. */
+  :where(.skdx-toggle-group)[data-full-width] :where(.skdx-toggle-group__item) {
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  /* The pill's corner follows the item height, so the group reads as one shape
+     at every rung; toggle.css carries the rest of the size ladder. */
+  :where(.skdx-toggle-group)[data-size='sm'] {
+    border-radius: var(--skdx-radius-sm);
+  }
+
+  :where(.skdx-toggle-group)[data-size='lg'] {
+    border-radius: var(--skdx-radius-lg);
+  }
+
+  /**
+   * data-variant="segmented" — pick one of a small set, shown all at once. Reads
+   * as one inset well with a raised selected segment rather than a row of
+   * buttons, so the outer border and the seams between items both go.
+   */
+  :where(.skdx-toggle-group)[data-variant='segmented'] {
+    /* The indicator's x/y are offsets from this root's edges; without a
+       positioning context here they would resolve against whatever ancestor
+       has one. */
+    position: relative;
+    padding: var(--skdx-border-width-thick);
+    background-color: var(--skdx-color-surface-sunken);
+    border-color: transparent;
+  }
+
+  :where(.skdx-toggle-group)[data-variant='segmented'] :where(.skdx-toggle-group__item),
+  :where(.skdx-toggle-group)[data-variant='segmented']
+    :where([data-skdx-toggle-group-item-wrapper])
+    + :where([data-skdx-toggle-group-item-wrapper])
+    > :where(.skdx-toggle-group__item) {
+    /* z-index: 1 is one level above the indicator's --skdx-z-index-base, so the
+       labels stay above the moving pill. */
+    position: relative;
+    z-index: 1;
+    border-inline-start: 0;
+    border-block-start: 0;
+    border-radius: var(--skdx-radius-inner);
+    color: var(--skdx-color-text-muted);
+    white-space: nowrap;
+  }
+
+  :where(.skdx-toggle-group)[data-variant='segmented']
+    :where(.skdx-toggle-group__item)[data-state='on'] {
+    color: var(--skdx-color-text-default);
+    background-color: transparent;
+  }
+
+  :where(.skdx-toggle-group)[data-variant='segmented']
+    :where(.skdx-toggle-group__item):hover:not([data-disabled]) {
+    color: var(--skdx-color-text-default);
+  }
+
+  /* Read-only keeps colour, contrast and the focus ring; only the pointer
+     cursor and the hover fill are withdrawn. */
+  :where(.skdx-toggle-group)[data-readonly] :where(.skdx-toggle-group__item) {
+    cursor: default;
+  }
+
+  :where(.skdx-toggle-group)[data-readonly] :where(.skdx-toggle-group__item):hover {
+    background-color: transparent;
+  }
+
+  /* Invalid is presentational — the Field owns validation — so this is a halo
+     outside the box rather than a border-width change the group does not have. */
+  :where(.skdx-toggle-group)[data-invalid] {
+    box-shadow: 0 0 0 var(--skdx-border-width-thin) var(--skdx-color-field-border-invalid);
+  }
+
+  :where(.skdx-toggle-group__indicator) {
+    position: absolute;
+    z-index: var(--skdx-z-index-base);
+    inset-block: 0;
+    /* Physical left, not logical: the component publishes x as an offset from
+       the root's left edge, so inset-inline-start would desync under dir="rtl". */
+    left: 0;
+    inline-size: var(--skdx-toggle-group-width, 0);
+    translate: var(--skdx-toggle-group-x, 0) 0;
+    background-color: var(--skdx-color-surface-raised);
+    border-radius: var(--skdx-radius-inner);
+    box-shadow: var(--skdx-shadow-sm);
+    transition:
+      translate var(--skdx-motion-duration-normal) var(--skdx-motion-easing),
+      inline-size var(--skdx-motion-duration-normal) var(--skdx-motion-easing);
+  }
+
+  /* Nothing pressed means nothing to measure, so the indicator publishes no
+     geometry at all and this is what "not yet chosen" looks like. */
+  :where(.skdx-toggle-group__indicator)[data-state='hidden'] {
+    opacity: 0;
+  }
+
+  /* Vertical strips stack, so the indicator tracks the cross axis. */
+  :where(.skdx-toggle-group)[data-orientation='vertical'] :where(.skdx-toggle-group__indicator) {
+    inset-block: auto;
+    inset-inline: 0;
+    inline-size: auto;
+    block-size: var(--skdx-toggle-group-height, 0);
+    translate: 0 var(--skdx-toggle-group-y, 0);
+  }
+
+  /* Forced colours drops the raised fill, so the pressed segment needs this to
+     stay distinguishable from its neighbours. */
+  @media (forced-colors: active) {
+    :where(.skdx-toggle-group)[data-variant='segmented']
+      :where(.skdx-toggle-group__item)[data-state='on'] {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
+}

package/dist/skins-src/components/toggle.css

@@ -0,0 +1,89 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '../base.css';
+
+/**
+ * Toggle — a button that stays pressed. `data-state="on"` is the only styling
+ * hook; `aria-pressed` is deliberately not matched. A `ToggleGroup` item wears
+ * `.skdx-toggle` alongside its own class in every package, so one selector styles
+ * both; the pressed border rule excludes group items with `:not()` so it cannot
+ * out-specify `toggle-group.css`'s seam rule.
+ */
+@layer skdx-components {
+  :where(.skdx-toggle) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--skdx-toggle-gap);
+
+    min-inline-size: var(--skdx-target-min);
+    block-size: var(--skdx-toggle-height);
+    padding-inline: var(--skdx-toggle-padding);
+
+    color: var(--skdx-color-text-default);
+    background: transparent;
+    border: var(--skdx-border-width-thin) solid transparent;
+    border-radius: var(--skdx-radius-md);
+
+    font-size: var(--skdx-toggle-font-size);
+    font-weight: var(--skdx-font-weight-medium);
+    cursor: pointer;
+
+    transition: background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+
+    /* The medium rung of the control ladder, as variables so `data-size` below only overrides these. */
+    --skdx-toggle-gap: var(--skdx-control-gap-md);
+    --skdx-toggle-height: var(--skdx-control-height-md);
+    --skdx-toggle-padding: var(--skdx-control-padding-md);
+    --skdx-toggle-font-size: var(--skdx-font-size-sm);
+  }
+
+  /* Size read on either class and via the group descendant form,
+     so a run of items can't end up at mixed sizes. */
+  :where(.skdx-toggle)[data-size='sm'],
+  :where(.skdx-toggle-group)[data-size='sm'] :where(.skdx-toggle-group__item) {
+    --skdx-toggle-gap: var(--skdx-control-gap-sm);
+    --skdx-toggle-height: var(--skdx-control-height-sm);
+    --skdx-toggle-padding: var(--skdx-control-padding-sm);
+    --skdx-toggle-font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-toggle)[data-size='lg'],
+  :where(.skdx-toggle-group)[data-size='lg'] :where(.skdx-toggle-group__item) {
+    --skdx-toggle-gap: var(--skdx-control-gap-lg);
+    --skdx-toggle-height: var(--skdx-control-height-lg);
+    --skdx-toggle-padding: var(--skdx-control-padding-lg);
+    --skdx-toggle-font-size: var(--skdx-font-size-md);
+  }
+
+  :where(.skdx-toggle):hover:not([data-disabled]):not([data-state='on']) {
+    background-color: var(--skdx-color-action-ghost-bg-hover);
+  }
+
+  /* Pressed is a filled state: readable at a glance from across the toolbar. */
+  :where(.skdx-toggle)[data-state='on'] {
+    color: var(--skdx-color-text-accent);
+    background-color: var(--skdx-color-surface-selected);
+  }
+
+  :where(.skdx-toggle):not(.skdx-toggle-group__item)[data-state='on'] {
+    border-color: var(--skdx-color-border-accent);
+  }
+
+  :where(.skdx-toggle)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  /* Forced colours drops the background fill, so pressed needs this to stay distinguishable. */
+  @media (forced-colors: active) {
+    :where(.skdx-toggle)[data-state='on'] {
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
+}

package/dist/skins-src/components/toolbar.css

@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_actuator.css';
+@import '../base.css';
+
+/** Toolbar — a grouped row of controls with a single tab stop. */
+@layer skdx-components {
+  :where(.skdx-toolbar) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-1);
+    flex-wrap: wrap;
+
+    padding: var(--skdx-space-1);
+    background-color: var(--skdx-color-surface-default);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: var(--skdx-radius-md);
+  }
+
+  :where(.skdx-toolbar)[data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  :where(.skdx-toolbar__separator) {
+    align-self: stretch;
+    inline-size: var(--skdx-border-width-thin);
+    background-color: var(--skdx-color-separator);
+    margin-inline: var(--skdx-space-1);
+  }
+
+  :where(.skdx-toolbar)[data-orientation='vertical'] :where(.skdx-toolbar__separator) {
+    inline-size: auto;
+    block-size: var(--skdx-border-width-thin);
+    margin-inline: 0;
+    margin-block: var(--skdx-space-1);
+  }
+
+  :where(.skdx-toolbar__toggle-group) {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  :where(.skdx-toolbar__toggle-item) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    min-inline-size: var(--skdx-target-min);
+    min-block-size: var(--skdx-target-min);
+    block-size: var(--skdx-control-height-sm);
+    padding-inline: var(--skdx-space-2);
+
+    color: var(--skdx-color-text-default);
+    background: transparent;
+    border: 0;
+    border-radius: var(--skdx-radius-sm);
+    cursor: pointer;
+  }
+
+  /* On/off is a fill *and* the button's own `aria-pressed`, so the state is
+     available to a screen reader as well as to the eye. */
+  :where(.skdx-toolbar__toggle-item)[data-state='on'] {
+    color: var(--skdx-color-text-accent);
+    background-color: var(--skdx-color-surface-selected);
+  }
+
+  /* Actuator rules restated locally with the actuator's own tokens. The pressed
+     rule above is deliberately overridden: pressed-and-disabled must read as disabled. */
+  :where(.skdx-toolbar__toggle-item):hover:not(:disabled, [data-disabled], [aria-disabled='true']) {
+    background-color: var(--skdx-color-action-secondary-bg-hover);
+  }
+
+  :where(.skdx-toolbar__toggle-item):is(:disabled, [data-disabled], [aria-disabled='true']) {
+    color: var(--skdx-color-action-disabled-text);
+    background-color: var(--skdx-color-action-disabled-bg);
+    border-color: var(--skdx-color-action-disabled-border);
+    cursor: not-allowed;
+  }
+}

package/dist/skins-src/components/tour.css

@@ -0,0 +1,67 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_actuator.css';
+@import '_overlay.css';
+@import '_arrow.css';
+
+/** Tour — a guided sequence of spotlighted steps. */
+@layer skdx-components {
+  :where(.skdx-tour__content) {
+    padding: var(--skdx-space-4);
+    max-inline-size: 20rem;
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-3);
+    z-index: var(--skdx-z-index-max);
+  }
+
+  /* The `display: flex` above beats the UA's `[hidden]` rule on origin alone,
+     and some frameworks keep a finished tour's step mounted and hidden. */
+  :where(.skdx-tour__content)[hidden] {
+    display: none;
+  }
+
+  /* An untargeted step has no popper anchor; without this the panel is
+     `position: static`, laid out wherever the portal appended it in `document.body`. */
+  :where(.skdx-tour__content)[data-centered] {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  :where(.skdx-tour__title) {
+    font-size: var(--skdx-font-size-md);
+    font-weight: var(--skdx-font-weight-semibold);
+  }
+
+  :where(.skdx-tour__description) {
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-muted);
+    line-height: var(--skdx-font-line-height-relaxed);
+  }
+
+  :where(.skdx-tour__progress-text) {
+    font-size: var(--skdx-font-size-xs);
+    color: var(--skdx-color-text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* The spotlight cut-out sits above the scrim but below the step card. */
+  :where(.skdx-tour__backdrop) {
+    z-index: var(--skdx-z-index-overlay);
+  }
+
+  :where(.skdx-tour__actions) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--skdx-space-2);
+    /* A flex item's automatic min-size otherwise keeps the row from wrapping inside the panel. */
+    min-inline-size: 0;
+  }
+}

package/dist/skins-src/components/transfer.css

@@ -0,0 +1,112 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_actuator.css';
+@import '_collection.css';
+/* Each side *is* a Listbox — see the `.skdx-listbox` rule below. */
+@import 'listbox.css';
+
+/** Transfer — move items between a source and a target list. */
+@layer skdx-components {
+  /* Grid placement keys on `[data-part]`/`[data-side]`, so the DOM order of the two sides never matters. */
+  :where(.skdx-transfer) {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    grid-template-rows: auto auto 1fr auto;
+    align-items: stretch;
+    gap: var(--skdx-space-3);
+  }
+
+  :where(.skdx-transfer) > [data-side='source'] {
+    grid-column: 1;
+  }
+
+  :where(.skdx-transfer) > [data-side='target'] {
+    grid-column: 3;
+  }
+
+  :where(.skdx-transfer) > [data-part='list-header'] {
+    grid-row: 1;
+  }
+
+  :where(.skdx-transfer) > [data-part='list-search'] {
+    grid-row: 2;
+  }
+
+  :where(.skdx-transfer) > [data-part='empty'] {
+    grid-row: 4;
+  }
+
+  :where(.skdx-transfer) > [data-part='controls'] {
+    grid-column: 2;
+    grid-row: 1 / -1;
+  }
+
+  :where(.skdx-transfer__list-header) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+
+    padding: var(--skdx-space-2);
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-medium);
+
+    background-color: var(--skdx-color-surface-default);
+    border-block-end: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+  }
+
+  :where(.skdx-transfer__list-search) {
+    inline-size: 100%;
+    block-size: var(--skdx-control-height-sm);
+    padding-inline: var(--skdx-space-2);
+
+    background-color: var(--skdx-color-field-bg);
+    border: 0;
+    border-block-end: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-transfer__controls) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: var(--skdx-space-2);
+  }
+
+  /* Dimmed at the column, not per trigger: the triggers are aria-disabled, so `:disabled` matches none of them. */
+  :where(.skdx-transfer__controls)[data-disabled] {
+    opacity: var(--skdx-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  /* A trigger with nothing to move stays focusable (a natively disabled button
+     is skipped by Tab), so it is dimmed via `data-disabled` instead. */
+  :where(.skdx-transfer__move-trigger)[data-disabled],
+  :where(.skdx-transfer__move-all-trigger)[data-disabled] {
+    opacity: var(--skdx-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  /* No `pointer-events: none` — hover and tooltips must keep working; a focused control restores full contrast. */
+  :where(.skdx-transfer__move-trigger)[data-disabled]:focus-visible,
+  :where(.skdx-transfer__move-all-trigger)[data-disabled]:focus-visible {
+    opacity: 1;
+  }
+
+  :where(.skdx-transfer__empty) {
+    padding: var(--skdx-space-4);
+    text-align: center;
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-muted);
+  }
+
+  /* `TransferList` renders a real `Listbox` wearing `.skdx-listbox`; `>` is safe in
+     all five frameworks — the listbox is a direct child or the class sits on the host. */
+  :where(.skdx-transfer) > :where(.skdx-listbox) {
+    grid-row: 3;
+    min-inline-size: 0;
+  }
+}