@skdx/docs-kit 0.35.0

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

@@ -0,0 +1,150 @@
+/*
+ * 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';
+
+/**
+ * Rating — a star scale, readable and settable. `data-size`'s
+ * rungs set a `font-size` the slotted icons inherit, and `md` gets its own
+ * selector so a rating can be sized back down to the default rung.
+ */
+@layer skdx-components {
+  :where(.skdx-rating),
+  :where(.skdx-rating)[data-size='md'] {
+    --skdx-rating-item-size: var(--skdx-font-size-lg);
+    --skdx-rating-gap: var(--skdx-space-1);
+  }
+
+  :where(.skdx-rating)[data-size='sm'] {
+    --skdx-rating-item-size: var(--skdx-font-size-sm);
+    --skdx-rating-gap: calc(var(--skdx-space-1) / 2);
+  }
+
+  :where(.skdx-rating)[data-size='lg'] {
+    --skdx-rating-item-size: var(--skdx-font-size-2xl);
+    --skdx-rating-gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-rating) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-rating-gap);
+    font-size: var(--skdx-rating-item-size);
+  }
+
+  :where(.skdx-rating__item) {
+    display: inline-flex;
+    /* Inherited from the root's rung, so a slotted icon sized in `em` — or a
+       text star — scales with the whole scale. */
+    font-size: inherit;
+    position: relative;
+    /* The empty part of the scale, not a track: it has to read as "a star you
+       have not chosen". `--skdx-color-track` is tuned to sit almost invisibly
+       under a progress fill, which measured ~1.0:1 against the page here, and
+       `--skdx-color-border-strong` collapses onto the filled ink's CanvasText
+       when the skin runs on its fallbacks alone. */
+    color: var(--skdx-color-status-neutral-icon);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+    transition: color var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+  }
+
+  /* Filled stars use the warning ramp — the conventional "star" hue — rather
+     than the brand, so a rating does not restyle itself per theme accent. */
+  :where(.skdx-rating__item)[data-state='checked'],
+  :where(.skdx-rating__item)[data-highlighted] {
+    color: var(--skdx-color-status-warning-icon);
+  }
+
+  :where(.skdx-rating)[data-readonly] :where(.skdx-rating__item) {
+    cursor: default;
+  }
+
+  /* A disabled rating still has to be *readable* — it reports a value. Border
+     ink is tuned to sit quietly against a field and measured ~1.1:1 against the
+     page here, which erased the scale entirely. */
+  :where(.skdx-rating)[data-disabled] :where(.skdx-rating__item) {
+    color: var(--skdx-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  /* A single unavailable item, independent of the root's own disabled state —
+     it still has to read as excluded, checked or not. Ordered after the
+     checked/highlighted rules above, so a disabled item that also happens to
+     be checked shows as disabled. */
+  :where(.skdx-rating__item)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  /* The half star: a two-stop gradient clipped to the glyph — the one technique
+     needing no second copy of consumer-owned content. `> *` element children are
+     masked instead, since `background-clip: text` only clips text runs. CSS has no
+     logical gradient direction, so the RTL mirror below is written by hand. */
+  :where(.skdx-rating__item)[data-half] {
+    background-image: linear-gradient(
+      to right,
+      var(--skdx-color-status-warning-icon) 50%,
+      var(--skdx-color-status-neutral-icon) 50%
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
+  :where([dir='rtl']) :where(.skdx-rating__item)[data-half] {
+    background-image: linear-gradient(
+      to left,
+      var(--skdx-color-status-warning-icon) 50%,
+      var(--skdx-color-status-neutral-icon) 50%
+    );
+  }
+
+  :where(.skdx-rating__item)[data-half] > * {
+    color: var(--skdx-color-status-warning-icon);
+    -webkit-mask-image: linear-gradient(to right, black 50%, transparent 50%);
+    mask-image: linear-gradient(to right, black 50%, transparent 50%);
+  }
+
+  :where([dir='rtl']) :where(.skdx-rating__item)[data-half] > * {
+    -webkit-mask-image: linear-gradient(to left, black 50%, transparent 50%);
+    mask-image: linear-gradient(to left, black 50%, transparent 50%);
+  }
+
+  /* Highlighting reaches past the half star — pointing at it means the whole
+     star — and needs the extra attribute to outrank the gradient above. */
+  :where(.skdx-rating__item)[data-half][data-highlighted] {
+    background-image: none;
+    color: var(--skdx-color-status-warning-icon);
+  }
+
+  :where(.skdx-rating__item)[data-half][data-highlighted] > * {
+    -webkit-mask-image: none;
+    mask-image: none;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-rating__item)[data-state='checked'] {
+      color: Highlight;
+    }
+
+    /* Forced colours drop background images, so the gradient vanishes and a
+       transparent glyph would leave nothing at all. Fall back to the filled
+       colour: a half star reads as full, which is wrong by half a star and not
+       invisible. */
+    :where(.skdx-rating__item)[data-half] {
+      background-image: none;
+      color: Highlight;
+    }
+
+    :where(.skdx-rating__item)[data-half] > * {
+      -webkit-mask-image: none;
+      mask-image: none;
+      color: Highlight;
+    }
+  }
+}

package/dist/skins-src/components/reset-password-page.css

@@ -0,0 +1,51 @@
+/*
+ * 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';
+
+/** ResetPasswordPage — a new password with its rules and confirmation, centred on the page. */
+@layer skdx-components {
+  :where(.skdx-reset-password-page) {
+    display: flex;
+    justify-content: center;
+    padding: var(--skdx-space-8);
+  }
+
+  :where(.skdx-reset-password-page__panel) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-4);
+
+    inline-size: 100%;
+    min-inline-size: 0;
+    max-inline-size: 24rem;
+    padding: var(--skdx-space-6);
+
+    background-color: var(--skdx-color-surface-raised);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: var(--skdx-radius-lg);
+    box-shadow: var(--skdx-shadow-md);
+  }
+
+  :where(.skdx-reset-password-page__requirements) {
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-muted);
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-reset-password-page__footer) {
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-muted);
+    text-align: center;
+    overflow-wrap: anywhere;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-reset-password-page__panel) {
+      border-color: CanvasText;
+    }
+  }
+}

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

@@ -0,0 +1,131 @@
+/*
+ * 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';
+
+/* Every rung is at least 24px on the resize axis (WCAG 2.2 SC 2.5.8), even though the painted line stays one hairline. */
+@layer skdx-components {
+  :where(.skdx-resizable) {
+    display: flex;
+    inline-size: 100%;
+
+    --skdx-resizable-handle-size: 1.5rem;
+  }
+
+  :where(.skdx-resizable)[data-size='sm'] {
+    --skdx-resizable-handle-size: 1.5rem;
+  }
+
+  :where(.skdx-resizable)[data-size='lg'] {
+    --skdx-resizable-handle-size: 2rem;
+  }
+
+  :where(.skdx-resizable)[data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  :where(.skdx-resizable__panel) {
+    overflow: hidden;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+  }
+
+  :where(.skdx-resizable__handle) {
+    position: relative;
+    /* Above both panels: the negative margin below overlaps this box onto them, so the handle must win that overlap for pointer events. */
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+
+    inline-size: var(--skdx-resizable-handle-size, 1.5rem);
+    /* Negative margin cancels the handle's own width, since the panels' inline flex-basis already sums to 100% without it. */
+    margin-inline: calc(var(--skdx-resizable-handle-size, 1.5rem) / -2);
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+    cursor: col-resize;
+    touch-action: none;
+  }
+
+  :where(.skdx-resizable)[data-orientation='vertical'] :where(.skdx-resizable__handle) {
+    inline-size: auto;
+    block-size: var(--skdx-resizable-handle-size, 1.5rem);
+    margin-inline: 0;
+    margin-block: calc(var(--skdx-resizable-handle-size, 1.5rem) / -2);
+    cursor: row-resize;
+  }
+
+  :where(.skdx-resizable__handle)::after {
+    content: '';
+    background-color: var(--skdx-color-separator);
+    inline-size: var(--skdx-border-width-thin);
+    block-size: 100%;
+  }
+
+  :where(.skdx-resizable)[data-orientation='vertical'] :where(.skdx-resizable__handle)::after {
+    inline-size: 100%;
+    block-size: var(--skdx-border-width-thin);
+  }
+
+  /* data-dragging keeps the divider's active paint once the pointer leaves the handle during a drag; :hover covers the approach. */
+  :where(.skdx-resizable__handle):hover::after,
+  :where(.skdx-resizable__handle)[data-dragging]::after {
+    background-color: var(--skdx-color-border-accent);
+  }
+
+  :where(.skdx-resizable__handle)[data-disabled] {
+    cursor: default;
+  }
+
+  :where(.skdx-resizable__resize-trigger) {
+    flex: none;
+    position: relative;
+    z-index: 1;
+    inline-size: var(--skdx-space-1);
+    /* Same fix as __handle above. */
+    margin-inline: calc(var(--skdx-space-1) / -2);
+    background-color: var(--skdx-color-separator);
+    cursor: col-resize;
+    touch-action: none;
+  }
+
+  :where(.skdx-resizable)[data-orientation='vertical'] :where(.skdx-resizable__resize-trigger) {
+    inline-size: auto;
+    block-size: var(--skdx-space-1);
+    margin-inline: 0;
+    margin-block: calc(var(--skdx-space-1) / -2);
+    cursor: row-resize;
+  }
+
+  :where(.skdx-resizable__resize-trigger):hover,
+  :where(.skdx-resizable__resize-trigger)[data-dragging] {
+    background-color: var(--skdx-color-border-accent);
+  }
+
+  :where(.skdx-resizable__resize-trigger)[data-disabled] {
+    cursor: default;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-resizable__handle)::after,
+    :where(.skdx-resizable__resize-trigger) {
+      background-color: CanvasText;
+    }
+
+    :where(.skdx-resizable__handle):hover::after,
+    :where(.skdx-resizable__handle)[data-dragging]::after,
+    :where(.skdx-resizable__resize-trigger):hover,
+    :where(.skdx-resizable__resize-trigger)[data-dragging] {
+      background-color: Highlight;
+    }
+
+    :where(.skdx-resizable__handle)[data-disabled]::after,
+    :where(.skdx-resizable__resize-trigger)[data-disabled] {
+      background-color: GrayText;
+    }
+  }
+}

package/dist/skins-src/components/scroll-area.css

@@ -0,0 +1,101 @@
+/*
+ * 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';
+
+/**
+ * ScrollArea — a scrollable region with a styled scrollbar. The native scrollbar
+ * is hidden only where a custom one is rendered; the region keeps real scrolling,
+ * so keyboard scrolling, momentum and `scroll-into-view` keep working.
+ */
+@layer skdx-components {
+  :where(.skdx-scroll-area) {
+    position: relative;
+    overflow: hidden;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+
+    /* data-size drives both the track thickness and the thumb's grab length. */
+    --skdx-scroll-area-track-size: var(--skdx-space-2);
+    --skdx-scroll-area-thumb-min-length: var(--skdx-space-6);
+  }
+
+  :where(.skdx-scroll-area)[data-size='sm'] {
+    --skdx-scroll-area-track-size: var(--skdx-space-1);
+    --skdx-scroll-area-thumb-min-length: var(--skdx-space-4);
+  }
+
+  :where(.skdx-scroll-area)[data-size='lg'] {
+    --skdx-scroll-area-track-size: var(--skdx-space-3);
+    --skdx-scroll-area-thumb-min-length: var(--skdx-space-8);
+  }
+
+  :where(.skdx-scroll-area__viewport) {
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: auto;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+    scrollbar-width: none;
+  }
+
+  :where(.skdx-scroll-area__viewport)::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* position: absolute, not in flow: the bar is the thumb's positioning context for the component's inline absolute offsets. */
+  :where(.skdx-scroll-area__scrollbar) {
+    position: absolute;
+    display: flex;
+    padding: 2px;
+    background: transparent;
+    transition: opacity var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+    touch-action: none;
+    user-select: none;
+  }
+
+  /* Angular/Web Components mark a non-overflowing axis [hidden] rather than unmounting; author display: flex above beats it on origin, so it must be restated here. */
+  :where(.skdx-scroll-area__scrollbar)[hidden] {
+    display: none;
+  }
+
+  :where(.skdx-scroll-area__scrollbar)[data-orientation='vertical'] {
+    inset-block: 0;
+    inset-inline-end: 0;
+    inline-size: var(--skdx-scroll-area-track-size, var(--skdx-space-2));
+  }
+
+  :where(.skdx-scroll-area__scrollbar)[data-orientation='horizontal'] {
+    inset-inline: 0;
+    inset-block-end: 0;
+    flex-direction: column;
+    block-size: var(--skdx-scroll-area-track-size, var(--skdx-space-2));
+  }
+
+  :where(.skdx-scroll-area__thumb) {
+    flex: 1;
+    background-color: var(--skdx-color-border-strong);
+    border-radius: var(--skdx-radius-full);
+    /* Comfortably grabbable even when the bar is thin. */
+    min-block-size: var(--skdx-scroll-area-thumb-min-length, var(--skdx-space-6));
+  }
+
+  :where(.skdx-scroll-area__thumb):hover {
+    background-color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-scroll-area__corner) {
+    background: transparent;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-scroll-area__thumb) {
+      background-color: CanvasText;
+    }
+
+    :where(.skdx-scroll-area__thumb):hover {
+      background-color: Highlight;
+    }
+  }
+}

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

@@ -0,0 +1,239 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_trigger.css';
+@import '_overlay.css';
+@import '_collection.css';
+@import '_hit-target.css';
+
+/** Select — choose one option from a list, in a popup, or several as removable tags. */
+@layer skdx-components {
+  :where(.skdx-select__content) {
+    padding: var(--skdx-overlay-padding);
+  }
+
+  /* The popup matches the trigger's width so the options line up under the
+     value they replace. The popper helper measures the anchor and writes this. */
+  :where(.skdx-select__content)[data-match-width] {
+    inline-size: var(--skdx-select-trigger-width, auto);
+  }
+
+  /* `data-size`/`data-shape` resolve on the trigger; the `md`/`rounded`
+     defaults stay in `_trigger.css` as the base rule. */
+  :where(.skdx-select__trigger)[data-size='sm'] {
+    block-size: var(--skdx-control-height-sm);
+    padding-inline: var(--skdx-control-padding-sm);
+    font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-select__trigger)[data-size='lg'] {
+    block-size: var(--skdx-control-height-lg);
+    padding-inline: var(--skdx-control-padding-lg);
+    font-size: var(--skdx-font-size-md);
+  }
+
+  :where(.skdx-select__trigger)[data-shape='rounded'] {
+    border-radius: var(--skdx-radius-md);
+  }
+
+  :where(.skdx-select__trigger)[data-shape='square'] {
+    border-radius: 0;
+  }
+
+  :where(.skdx-select__trigger)[data-shape='pill'] {
+    border-radius: var(--skdx-radius-full);
+  }
+
+  :where(.skdx-select__item-indicator) {
+    margin-inline-start: auto;
+  }
+
+  /* No padding of its own: `__content` already pays the overlay padding, and
+     the viewport sits inside it. Both declaring it made the popup's inset
+     twice the shared value. */
+  :where(.skdx-select__viewport) {
+    padding: 0;
+  }
+
+  :where(.skdx-select__item-text) {
+    overflow: hidden;
+    /* Custom `renderOption` markup (its own flex row) needs the same room a
+       plain label gets from the item; without a grow factor a wrapping
+       inline span shrinks to content, and a child's `width: 100%` inside it
+       resolves against that same shrunk box instead of the item's row. */
+    flex: 1 1 0%;
+    min-inline-size: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+  }
+
+  /* One `Value` renders every chip in a row; without the gap a multiple
+     selection reads as a run of unseparated words. */
+  :where(.skdx-select__value)[data-multiple] {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--skdx-space-1);
+  }
+
+  /* Styled from tag.css's tokens rather than by importing it: these are inert
+     read-outs inside a `<button>` (a nested remove control would be invalid
+     HTML), so they take the tag's shape without its interactive parts. */
+  :where(.skdx-select__value) [data-chip] {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-1);
+
+    max-inline-size: 12ch;
+    overflow: hidden;
+    padding-inline: var(--skdx-space-2);
+
+    color: var(--skdx-color-status-neutral-text);
+    background-color: var(--skdx-color-status-neutral-bg);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-status-neutral-border);
+    border-radius: var(--skdx-radius-md);
+
+    font-size: var(--skdx-font-size-xs);
+    line-height: var(--skdx-font-line-height-tight);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  /* The chevron. Rotates rather than swaps, so the open and closed states are
+     one object in two positions. */
+  :where(.skdx-select__icon) {
+    display: inline-flex;
+    flex: none;
+    margin-inline-start: auto;
+    inline-size: var(--skdx-icon-size-md);
+    block-size: var(--skdx-icon-size-md);
+    color: var(--skdx-color-text-muted);
+    transition: rotate var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-select__trigger)[data-state='open'] :where(.skdx-select__icon) {
+    rotate: 180deg;
+  }
+
+  /* The tag strip a `multiple` selection draws beside the field. Wraps rather
+     than scrolls: six chosen values are readable stacked, not truncated. */
+  :where(.skdx-select__tag-list) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--skdx-select-tag-gap);
+    flex: 1;
+    min-inline-size: 0;
+    --skdx-select-tag-gap: var(--skdx-space-1);
+  }
+
+  :where(.skdx-select__tag-list)[data-density='compact'] {
+    --skdx-select-tag-gap: 0px;
+  }
+
+  :where(.skdx-select__tag-list)[data-density='comfortable'] {
+    --skdx-select-tag-gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-select__tag) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-1);
+    max-inline-size: 100%;
+    min-inline-size: 0;
+
+    padding-inline: var(--skdx-space-2);
+    padding-block: 0;
+    min-block-size: var(--skdx-control-height-sm);
+
+    font-size: var(--skdx-font-size-xs);
+    color: var(--skdx-select-tag-text);
+    background-color: var(--skdx-select-tag-bg);
+    border: var(--skdx-border-width-thin) solid var(--skdx-select-tag-border);
+    border-radius: var(--skdx-radius-sm);
+
+    /* Its own three names rather than the shared --skdx-status-* trio: those
+       inherit, so a Select inside an Alert would take that alert's severity. */
+    --skdx-select-tag-text: var(--skdx-color-text-default);
+    --skdx-select-tag-bg: var(--skdx-color-surface-sunken);
+    --skdx-select-tag-border: var(--skdx-color-border-subtle);
+  }
+
+  :where(.skdx-select__tag)[data-status='info'] {
+    --skdx-select-tag-text: var(--skdx-color-status-info-text);
+    --skdx-select-tag-bg: var(--skdx-color-status-info-bg);
+    --skdx-select-tag-border: var(--skdx-color-status-info-border);
+  }
+
+  :where(.skdx-select__tag)[data-status='success'] {
+    --skdx-select-tag-text: var(--skdx-color-status-success-text);
+    --skdx-select-tag-bg: var(--skdx-color-status-success-bg);
+    --skdx-select-tag-border: var(--skdx-color-status-success-border);
+  }
+
+  :where(.skdx-select__tag)[data-status='warning'] {
+    --skdx-select-tag-text: var(--skdx-color-status-warning-text);
+    --skdx-select-tag-bg: var(--skdx-color-status-warning-bg);
+    --skdx-select-tag-border: var(--skdx-color-status-warning-border);
+  }
+
+  :where(.skdx-select__tag)[data-status='danger'] {
+    --skdx-select-tag-text: var(--skdx-color-status-danger-text);
+    --skdx-select-tag-bg: var(--skdx-color-status-danger-bg);
+    --skdx-select-tag-border: var(--skdx-color-status-danger-border);
+  }
+
+  /* position: relative is what _hit-target.css fills with the 24px minimum. */
+  :where(.skdx-select__tag-remove) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--skdx-color-text-muted);
+    background: transparent;
+    border: 0;
+    border-radius: var(--skdx-radius-sm);
+    cursor: pointer;
+  }
+
+  :where(.skdx-select__tag-remove):hover {
+    color: var(--skdx-color-text-danger);
+  }
+
+  /* The filter field. Borderless because the field box around it draws the
+     boundary. */
+  :where(.skdx-select__input) {
+    flex: 1;
+    min-inline-size: var(--skdx-space-10);
+    color: var(--skdx-color-field-text);
+    background: transparent;
+    border: 0;
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  /* Empties the whole selection and the draft text in one press. A real tab
+     stop of its own — unlike TagRemove, which deliberately is not one — so
+     `:disabled` carries the state rather than `[data-disabled]` alone. */
+  :where(.skdx-select__clear) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--skdx-color-text-muted);
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+  }
+
+  :where(.skdx-select__clear):hover:not(:disabled) {
+    color: var(--skdx-color-text-danger);
+  }
+
+  :where(.skdx-select__clear):disabled {
+    color: var(--skdx-color-text-disabled);
+    cursor: default;
+  }
+}