@vadem/ui 0.0.0-stage → 0.0.1

package/styles/components/rating.css

@@ -0,0 +1,100 @@
+/* Whole-star Rating: specs/rating.md. */
+@layer vd.components {
+  .vd-rating {
+    --vd-rating-hit-size: var(--vd-control-height-md);
+    --vd-rating-icon-size: var(--vd-space-6);
+    --vd-rating-gap: var(--vd-space-1);
+    --vd-rating-color: var(--vd-color-border-control);
+    --vd-rating-selected: var(--vd-color-action-text);
+    --vd-rating-hover: var(--vd-color-fill-hover);
+    --vd-rating-radius: var(--vd-radius-control);
+
+    display: block;
+    min-inline-size: 0;
+  }
+  .vd-rating[data-size='sm'] {
+    --vd-rating-hit-size: var(--vd-control-height-sm);
+    --vd-rating-icon-size: var(--vd-space-5);
+  }
+  .vd-rating[data-size='lg'] {
+    --vd-rating-hit-size: var(--vd-control-height-lg);
+    --vd-rating-icon-size: var(--vd-space-8);
+  }
+  .vd-rating__group {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    min-inline-size: 0;
+  }
+  .vd-rating__label {
+    padding: 0;
+    margin-block-end: var(--vd-space-1-5);
+    max-inline-size: 100%;
+    overflow-wrap: anywhere;
+  }
+  .vd-rating__stars {
+    display: flex;
+    /* Under extreme text enlargement the stars reflow instead of overflowing (WCAG 1.4.10). */
+    flex-wrap: wrap;
+    gap: var(--vd-rating-gap);
+    inline-size: fit-content;
+    max-inline-size: 100%;
+  }
+  .vd-rating__star {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 1 var(--vd-rating-hit-size);
+    inline-size: var(--vd-rating-hit-size);
+    min-inline-size: 0;
+    min-block-size: var(--vd-rating-hit-size);
+    padding: var(--vd-space-1);
+    border: 0;
+    border-radius: var(--vd-rating-radius);
+    color: var(--vd-rating-color);
+    background: transparent;
+    cursor: pointer;
+    transition: var(--vd-transition-colors);
+  }
+  .vd-rating__star .vd-icon {
+    --vd-icon-size: var(--vd-rating-icon-size);
+    max-inline-size: 100%;
+  }
+  .vd-rating__star[data-filled] {
+    color: var(--vd-rating-selected);
+  }
+  .vd-rating__star[data-filled] .vd-icon__svg {
+    fill: currentColor;
+  }
+  .vd-rating__star:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: calc(-1 * var(--vd-focus-ring-width));
+  }
+  .vd-rating:not([data-disabled], [data-readonly]) .vd-rating__star:hover {
+    background: var(--vd-rating-hover);
+  }
+  .vd-rating[data-readonly] .vd-rating__star {
+    cursor: default;
+  }
+  .vd-rating[data-disabled] {
+    opacity: var(--vd-opacity-disabled);
+  }
+  .vd-rating__star:disabled {
+    cursor: not-allowed;
+  }
+  .vd-rating[data-invalid] {
+    --vd-rating-color: var(--vd-color-danger-text);
+  }
+  @media (forced-colors: active) {
+    .vd-rating {
+      --vd-rating-color: CanvasText;
+      --vd-rating-selected: Highlight;
+    }
+    .vd-rating__star:focus-visible {
+      outline-color: Highlight;
+    }
+    .vd-rating__star[data-filled] .vd-icon__svg {
+      forced-color-adjust: none;
+    }
+  }
+}

package/styles/components/reorder-list.css

@@ -0,0 +1,143 @@
+@layer vd.components {
+  .vd-reorder-list {
+    --vd-reorder-list-gap: var(--vd-space-3);
+    --vd-reorder-list-padding: var(--vd-space-4);
+    --vd-reorder-list-border: var(--vd-color-border);
+    --vd-reorder-list-fg: var(--vd-color-text);
+    --vd-reorder-list-muted: var(--vd-color-text-muted);
+    --vd-reorder-list-active-bg: var(--vd-color-action-subtle);
+    --vd-reorder-list-marker: var(--vd-color-focus);
+    --vd-reorder-list-grip-size: var(--vd-control-height-lg);
+    --vd-reorder-list-compact-action-padding: var(--vd-space-1);
+    --vd-reorder-list-compact-grip-size: var(--vd-control-height-md);
+    display: block;
+    min-inline-size: 0;
+    color: var(--vd-reorder-list-fg);
+    container-type: inline-size;
+  }
+  .vd-reorder-list__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  .vd-reorder-list__item {
+    position: relative;
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: start;
+    gap: var(--vd-reorder-list-gap);
+    padding-block: var(--vd-reorder-list-padding);
+    border-block-end: var(--vd-border-width) solid var(--vd-reorder-list-border);
+  }
+  .vd-reorder-list__item:last-child {
+    border-block-end: 0;
+  }
+  .vd-reorder-list__grip {
+    display: grid;
+    place-items: center;
+    inline-size: var(--vd-reorder-list-grip-size);
+    min-block-size: var(--vd-reorder-list-grip-size);
+    touch-action: none;
+    cursor: grab;
+    user-select: none;
+    color: var(--vd-reorder-list-muted);
+  }
+  .vd-reorder-list__body {
+    min-inline-size: 0;
+  }
+  .vd-reorder-list__title {
+    display: flex;
+    align-items: baseline;
+    gap: var(--vd-reorder-list-gap);
+    font-weight: var(--vd-weight-semibold);
+  }
+  .vd-reorder-list__title bdi {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+  .vd-reorder-list__position {
+    color: var(--vd-reorder-list-muted);
+    font-size: var(--vd-text-sm);
+    font-variant-numeric: tabular-nums;
+  }
+  .vd-reorder-list__description {
+    margin: var(--vd-space-2) 0 0;
+    color: var(--vd-reorder-list-muted);
+    font-size: var(--vd-text-sm);
+    overflow-wrap: anywhere;
+  }
+  .vd-reorder-list__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--vd-space-1);
+    min-inline-size: 0;
+  }
+  .vd-reorder-list__actions .vd-button {
+    max-inline-size: 100%;
+  }
+  .vd-reorder-list__item[data-dragging] {
+    background: var(--vd-reorder-list-active-bg);
+  }
+  .vd-reorder-list__item[data-dragging] .vd-reorder-list__grip {
+    cursor: grabbing;
+  }
+  .vd-reorder-list__item[data-drop]::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    block-size: var(--vd-focus-ring-width);
+    background: var(--vd-reorder-list-marker);
+    pointer-events: none;
+  }
+  .vd-reorder-list__item[data-drop='before']::after {
+    inset-block-start: 0;
+  }
+  .vd-reorder-list__item[data-drop='after']::after {
+    inset-block-end: 0;
+  }
+  .vd-reorder-list__grip[data-disabled] {
+    touch-action: auto;
+    cursor: default;
+  }
+  .vd-reorder-list__empty {
+    padding-block: var(--vd-reorder-list-padding);
+    color: var(--vd-reorder-list-muted);
+  }
+  @container (width < 32rem) {
+    .vd-reorder-list__item {
+      grid-template-columns: minmax(0, 1fr) auto;
+    }
+    .vd-reorder-list__body {
+      grid-column: 1 / -1;
+      grid-row: 1;
+    }
+    .vd-reorder-list__grip {
+      grid-column: 2;
+      grid-row: 2;
+      inline-size: var(--vd-reorder-list-compact-grip-size);
+      min-block-size: var(--vd-reorder-list-compact-grip-size);
+    }
+    .vd-reorder-list__actions {
+      grid-column: 1;
+      grid-row: 2;
+    }
+    .vd-reorder-list__actions .vd-icon {
+      display: none;
+    }
+    .vd-reorder-list__actions .vd-button {
+      --vd-button-padding-inline: var(--vd-reorder-list-compact-action-padding);
+    }
+  }
+  @media (forced-colors: active) {
+    .vd-reorder-list__item {
+      border-color: CanvasText;
+    }
+    .vd-reorder-list__item[data-dragging] {
+      outline: var(--vd-border-width) solid Highlight;
+      outline-offset: calc(-1 * var(--vd-border-width));
+    }
+    .vd-reorder-list__item[data-drop]::after {
+      background: Highlight;
+    }
+  }
+}

package/styles/components/scroll-area.css

@@ -0,0 +1,39 @@
+/* Native scroll viewport: specs/scroll-area.md. */
+@layer vd.components {
+  .vd-scroll-area {
+    --vd-scroll-area-bg: var(--vd-color-surface);
+    --vd-scroll-area-border: var(--vd-color-border-control);
+    --vd-scroll-area-radius: var(--vd-radius-md);
+    --vd-scroll-area-thumb: var(--vd-color-border-control);
+    --vd-scroll-area-track: var(--vd-scroll-area-bg);
+    --vd-scroll-area-ring: var(--vd-color-focus);
+    --vd-scroll-area-max-block-size: none;
+
+    min-inline-size: 0;
+    min-block-size: 0;
+    max-inline-size: 100%;
+    max-block-size: var(--vd-scroll-area-max-block-size);
+    overflow: auto;
+    border: var(--vd-border-width) solid var(--vd-scroll-area-border);
+    border-radius: var(--vd-scroll-area-radius);
+    background-color: var(--vd-scroll-area-bg);
+    scrollbar-color: var(--vd-scroll-area-thumb) var(--vd-scroll-area-track);
+    scrollbar-width: auto;
+    scrollbar-gutter: stable;
+  }
+
+  .vd-scroll-area:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-scroll-area-ring);
+    outline-offset: calc(var(--vd-focus-ring-width) * -1);
+  }
+
+  @media (forced-colors: active) {
+    .vd-scroll-area {
+      border-color: CanvasText;
+      scrollbar-color: auto;
+    }
+    .vd-scroll-area:focus-visible {
+      outline-color: Highlight;
+    }
+  }
+}

package/styles/components/search-input.css

@@ -0,0 +1,25 @@
+/* Search input - spec: specs/search-input.md */
+@layer vd.components {
+  .vd-search-input {
+    --vd-search-input-button-size: calc(var(--vd-input-height) - var(--vd-space-2));
+    --vd-search-input-gap: var(--vd-space-2);
+    gap: var(--vd-search-input-gap);
+  }
+  .vd-search-input > .vd-search-input__clear {
+    inline-size: min(var(--vd-search-input-button-size), 25%);
+    padding-inline: 0;
+  }
+  .vd-search-input > .vd-progress-ring {
+    color: var(--vd-color-text-muted);
+  }
+  /* The group draws its own clear action; hide the engine's. */
+  .vd-search-input__input::-webkit-search-cancel-button,
+  .vd-search-input__input::-webkit-search-decoration {
+    appearance: none;
+  }
+  @media (forced-colors: active) {
+    .vd-search-input {
+      border-color: CanvasText;
+    }
+  }
+}

package/styles/components/segmented.css

@@ -0,0 +1,136 @@
+/* Segmented control - spec: specs/segmented.md */
+/* Same look as the pill tabs: concentric radii, raised selected segment. */
+@layer vd.components {
+  .vd-segmented {
+    --vd-segmented-padding: var(--vd-space-1);
+    --vd-segmented-radius: var(--vd-radius-lg);
+    --vd-segmented-bg: var(--vd-color-fill);
+    --vd-segmented-border: var(--vd-color-border);
+    --vd-segment-height: var(--vd-control-height-sm);
+    --vd-segment-padding-inline: var(--vd-space-3);
+    --vd-segment-font-size: var(--vd-text-sm);
+    --vd-segment-fg: var(--vd-color-text-muted);
+    --vd-segment-fg-hover: var(--vd-color-text);
+    --vd-segment-fg-checked: var(--vd-color-text);
+    --vd-segment-bg-checked: var(--vd-color-surface-raised);
+
+    display: inline-flex;
+    flex-wrap: wrap;
+    min-inline-size: 0;
+    gap: var(--vd-space-0-5);
+    max-inline-size: 100%;
+    padding: var(--vd-segmented-padding);
+    border: var(--vd-border-width) solid var(--vd-segmented-border);
+    border-radius: var(--vd-segmented-radius);
+    background-color: var(--vd-segmented-bg);
+    vertical-align: middle;
+  }
+
+  .vd-segmented[data-size='sm'] {
+    --vd-segmented-padding: var(--vd-space-0-5);
+    --vd-segmented-radius: var(--vd-radius-md);
+    --vd-segment-height: calc(var(--vd-control-height-sm) - var(--vd-space-2));
+    --vd-segment-padding-inline: var(--vd-space-2);
+    --vd-segment-font-size: var(--vd-text-xs);
+  }
+
+  .vd-segmented[data-disabled] {
+    opacity: var(--vd-opacity-disabled);
+  }
+
+  /* --------------------------------------------------------------- segment */
+
+  .vd-segment {
+    position: relative;
+    display: inline-flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: center;
+    gap: var(--vd-space-2);
+    min-inline-size: min(var(--vd-segment-height), 100%);
+    min-block-size: var(--vd-segment-height);
+    padding-inline: var(--vd-segment-padding-inline);
+    border-radius: calc(var(--vd-segmented-radius) - var(--vd-segmented-padding));
+    color: var(--vd-segment-fg);
+    font-size: var(--vd-segment-font-size);
+    font-weight: var(--vd-weight-semibold);
+    line-height: var(--vd-leading-snug);
+    white-space: nowrap;
+    transition:
+      var(--vd-transition-colors),
+      box-shadow var(--vd-duration-fast) var(--vd-ease-out);
+  }
+
+  /* The radio covers the whole segment: it is the hit area and the focus target. */
+  .vd-segment__input {
+    appearance: none;
+    position: absolute;
+    inset: 0;
+    margin: 0;
+    border-radius: inherit;
+    cursor: pointer;
+  }
+
+  .vd-segment__input:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: var(--vd-focus-ring-offset);
+  }
+
+  /* Too little room: segments shrink and long labels truncate instead of overflowing. */
+  .vd-segment__label {
+    display: block;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    pointer-events: none;
+  }
+
+  /* Block label (ellipsis needs it): icons sit inline with the text. */
+  .vd-segment .vd-icon {
+    --vd-icon-size: var(--vd-space-4);
+
+    display: inline-flex;
+    vertical-align: -0.2em;
+  }
+
+  .vd-segment:not([data-icon-only]) .vd-icon {
+    margin-inline-end: var(--vd-space-1-5);
+  }
+
+  @media (hover: hover) {
+    .vd-segment:not([data-checked], [data-disabled]):hover {
+      color: var(--vd-segment-fg-hover);
+    }
+  }
+
+  .vd-segment[data-checked] {
+    background-color: var(--vd-segment-bg-checked);
+    box-shadow: var(--vd-highlight-top), var(--vd-shadow-sm);
+    color: var(--vd-segment-fg-checked);
+  }
+
+  /* A disabled group is already dimmed as a whole; only single segments get the disabled text. */
+  .vd-segmented:not([data-disabled]) .vd-segment[data-disabled] {
+    color: var(--vd-color-text-disabled);
+  }
+
+  .vd-segment[data-disabled] .vd-segment__input {
+    cursor: not-allowed;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .vd-segment:active:not([data-disabled]) .vd-segment__label {
+      scale: var(--vd-press-scale);
+    }
+
+    .vd-segment__label {
+      transition: scale var(--vd-duration-fast) var(--vd-ease-out);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .vd-segment[data-checked] {
+      outline: var(--vd-border-width) solid Highlight;
+    }
+  }
+}

package/styles/components/select.css

@@ -0,0 +1,257 @@
+/* Select, combobox, listbox, option - spec: specs/select.md */
+@layer vd.components {
+  /* ------------------------------------------------------------ the field */
+  /* Same box as vdInput: control height, field background, 3:1 border, ring on the border. */
+
+  .vd-select,
+  .vd-combobox,
+  .vd-multi-select {
+    --vd-select-height: var(--vd-control-height-md);
+    --vd-select-padding-inline: var(--vd-space-3);
+    --vd-select-font-size: var(--vd-text-md);
+    --vd-select-radius: var(--vd-radius-md);
+    --vd-select-bg: var(--vd-color-field);
+    --vd-select-border: var(--vd-color-border-control);
+    --vd-select-border-hover: var(--vd-color-border-control-hover);
+    --vd-select-ring: var(--vd-color-focus);
+
+    position: relative;
+    display: block;
+    inline-size: 100%;
+  }
+
+  :is(.vd-select, .vd-combobox, .vd-multi-select)[data-size='sm'] {
+    --vd-select-height: var(--vd-control-height-sm);
+    --vd-select-padding-inline: var(--vd-space-2);
+    --vd-select-font-size: var(--vd-text-sm);
+    --vd-select-radius: var(--vd-radius-sm);
+  }
+
+  :is(.vd-select, .vd-combobox, .vd-multi-select)[data-size='lg'] {
+    --vd-select-height: var(--vd-control-height-lg);
+    --vd-select-padding-inline: var(--vd-space-4);
+    --vd-select-radius: var(--vd-radius-lg);
+  }
+
+  :is(.vd-select, .vd-combobox, .vd-multi-select)[data-invalid] {
+    --vd-select-border: var(--vd-color-danger);
+    --vd-select-border-hover: var(--vd-color-danger);
+    --vd-select-ring: var(--vd-color-danger);
+  }
+
+  .vd-select__trigger,
+  .vd-combobox__field {
+    display: flex;
+    align-items: center;
+    gap: var(--vd-space-2);
+    inline-size: 100%;
+    min-block-size: var(--vd-select-height);
+    padding-block: var(--vd-space-1);
+    padding-inline: var(--vd-select-padding-inline);
+    border: var(--vd-border-width) solid var(--vd-select-border);
+    border-radius: var(--vd-select-radius);
+    background-color: var(--vd-select-bg);
+    color: var(--vd-color-text);
+    font-family: inherit;
+    font-size: var(--vd-select-font-size);
+    line-height: var(--vd-leading-snug);
+    text-align: start;
+    transition: var(--vd-transition-colors);
+  }
+
+  .vd-select__trigger {
+    cursor: pointer;
+  }
+
+  .vd-combobox__field {
+    cursor: text;
+  }
+
+  @media (hover: hover) {
+    .vd-select:not([data-disabled]) .vd-select__trigger:hover,
+    .vd-combobox:not([data-disabled]) .vd-combobox__field:hover {
+      border-color: var(--vd-select-border-hover);
+    }
+  }
+
+  .vd-select__trigger:focus-visible,
+  .vd-select[data-open] .vd-select__trigger,
+  .vd-combobox__field:has(.vd-combobox__input:focus-visible) {
+    border-color: var(--vd-select-ring);
+    outline: var(--vd-focus-ring-width) solid var(--vd-select-ring);
+    outline-offset: calc(var(--vd-border-width) * -1);
+  }
+
+  :is(.vd-select, .vd-combobox, .vd-multi-select)[data-disabled] {
+    opacity: var(--vd-opacity-disabled);
+  }
+
+  :is(.vd-select, .vd-combobox)[data-disabled] :is(.vd-select__trigger, .vd-combobox__field) {
+    cursor: not-allowed;
+  }
+
+  .vd-select__value {
+    flex: 1;
+    /* Zero preferred width: the (nowrap) selected label never sets the select's min-content
+       size, so long values truncate instead of widening grid/flex parents. */
+    inline-size: 0;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .vd-select__value[data-placeholder] {
+    color: var(--vd-color-text-subtle);
+  }
+
+  .vd-select__chevron {
+    color: var(--vd-color-text-subtle);
+    transition: rotate var(--vd-duration-base) var(--vd-ease-out);
+  }
+
+  :is(.vd-select, .vd-combobox, .vd-multi-select)[data-open] .vd-select__chevron {
+    rotate: 180deg;
+  }
+
+  .vd-combobox__icon {
+    color: var(--vd-color-text-subtle);
+  }
+
+  .vd-combobox__input {
+    flex: 1;
+    min-inline-size: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    outline: none;
+  }
+
+  .vd-combobox__input::placeholder {
+    color: var(--vd-color-text-subtle);
+    opacity: 1;
+  }
+
+  /* --------------------------------------------------------------- listbox */
+
+  .vd-listbox {
+    --vd-listbox-padding: var(--vd-space-1);
+    --vd-listbox-radius: var(--vd-radius-lg);
+    --vd-listbox-max-height: 20rem;
+
+    /* Geometry on the base rule (D45). Anchored under the field, at least as wide as it. */
+    position: fixed;
+    inset: auto;
+    margin: 0;
+    margin-block-start: var(--vd-space-1);
+    position-area: block-end span-inline-end;
+    position-try-fallbacks: flip-block;
+    min-inline-size: anchor-size(inline);
+    max-inline-size: min(28rem, 100vw - var(--vd-space-4) * 2);
+    max-block-size: min(var(--vd-listbox-max-height), 50dvh);
+    padding: var(--vd-listbox-padding);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    border: var(--vd-border-width) solid var(--vd-color-border-strong);
+    border-radius: var(--vd-listbox-radius);
+    background-color: var(--vd-color-surface-overlay);
+    box-shadow: var(--vd-highlight-top), var(--vd-shadow-lg);
+    color: var(--vd-color-text);
+    scrollbar-width: thin;
+
+    opacity: 0;
+    translate: 0 calc(var(--vd-space-1) * -1);
+    transition:
+      opacity var(--vd-duration-fast) var(--vd-ease-out),
+      translate var(--vd-duration-base) var(--vd-ease-out),
+      display var(--vd-duration-fast) allow-discrete,
+      overlay var(--vd-duration-fast) allow-discrete;
+  }
+
+  .vd-listbox:popover-open {
+    opacity: 1;
+    translate: 0 0;
+  }
+
+  @starting-style {
+    .vd-listbox:popover-open {
+      opacity: 0;
+      translate: 0 calc(var(--vd-space-1) * -1);
+    }
+  }
+
+  .vd-listbox__empty {
+    padding: var(--vd-space-3);
+    color: var(--vd-color-text-muted);
+    font-size: var(--vd-text-sm);
+    text-align: center;
+  }
+
+  /* ---------------------------------------------------------------- option */
+
+  .vd-option {
+    display: flex;
+    align-items: center;
+    gap: var(--vd-space-2);
+    min-block-size: var(--vd-control-height-sm);
+    padding-block: var(--vd-space-1-5);
+    padding-inline: var(--vd-space-3) var(--vd-space-2);
+    border-radius: max(
+      var(--vd-radius-xs),
+      calc(var(--vd-listbox-radius) - var(--vd-listbox-padding))
+    );
+    font-size: var(--vd-text-sm);
+    line-height: var(--vd-leading-snug);
+    cursor: pointer;
+    user-select: none;
+    scroll-margin-block: var(--vd-listbox-padding);
+  }
+
+  .vd-option__label {
+    display: flex;
+    align-items: center;
+    gap: var(--vd-space-2);
+    flex: 1;
+    min-inline-size: 0;
+  }
+
+  .vd-option__check {
+    --vd-icon-size: var(--vd-space-4);
+
+    color: var(--vd-color-text-accent);
+    opacity: 0;
+  }
+
+  .vd-option[aria-selected='true'] {
+    font-weight: var(--vd-weight-semibold);
+  }
+
+  .vd-option[aria-selected='true'] .vd-option__check {
+    opacity: 1;
+  }
+
+  .vd-option[data-active] {
+    background-color: var(--vd-color-fill-hover);
+  }
+
+  .vd-option[aria-disabled='true'] {
+    color: var(--vd-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  .vd-option[aria-disabled='true'][data-active] {
+    background-color: transparent;
+  }
+
+  @media (forced-colors: active) {
+    .vd-option[data-active] {
+      outline: var(--vd-border-width) solid Highlight;
+    }
+
+    .vd-listbox {
+      border-color: CanvasText;
+    }
+  }
+}