@skdx/docs-kit 0.35.0

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

@@ -0,0 +1,214 @@
+/*
+ * 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';
+
+/* Builds to dist/internal/, so the package's ./components/*.css export can't reach it. */
+@layer skdx-components {
+  /* `&` in the nested state rules resolves to `:is(:where(…))`, whose specificity is the
+     zero of the `:where()` it wraps, so nesting the list costs no weight. */
+  :where(
+    .skdx-dialog__content,
+    .skdx-drawer__content,
+    .skdx-popover__content,
+    .skdx-menu__content,
+    .skdx-menu__sub-content,
+    .skdx-menubar__content,
+    .skdx-menubar__sub-content,
+    .skdx-select__content,
+    .skdx-combobox__content,
+    .skdx-autocomplete__content,
+    .skdx-mentions__content,
+    .skdx-tree-select__content,
+    .skdx-date-picker__content,
+    .skdx-floating-panel__content,
+    .skdx-tour__content,
+    .skdx-speed-dial__content,
+    .skdx-navigation-menu__content
+  ) {
+    box-sizing: border-box;
+    min-inline-size: var(--skdx-overlay-min-width);
+
+    color: var(--skdx-color-text-default);
+    background-color: var(--skdx-color-surface-raised);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: var(--skdx-overlay-radius);
+    box-shadow: var(--skdx-shadow-overlay);
+
+    overflow: auto;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+
+    z-index: var(--skdx-z-index-popover);
+
+    /* Only transform and opacity animate: a max-height entrance relayouts every frame, the usual reason menus stutter open. */
+    &[data-state='open'] {
+      animation: skdx-zoom-in var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+    }
+
+    &[data-state='closed'] {
+      animation: skdx-zoom-out var(--skdx-motion-duration-fast) var(--skdx-motion-easing-exit);
+      /* `forwards`, or a forceMounted overlay snaps back to opaque after this `to`-only animation ends. */
+      animation-fill-mode: forwards;
+      pointer-events: none;
+    }
+
+    /** Forced colours drops the shadow, so the border becomes the only boundary. */
+    @media (forced-colors: active) {
+      border-color: CanvasText;
+    }
+  }
+
+  /* --skdx-<family>-available-height is a per-family custom property written by the popper helper, not a shared name. */
+  :where(.skdx-popover__content) {
+    max-block-size: var(--skdx-popover-available-height, none);
+  }
+
+  :where(.skdx-menu__content),
+  :where(.skdx-menu__sub-content) {
+    max-block-size: var(--skdx-menu-available-height, none);
+  }
+
+  :where(.skdx-menubar__content),
+  :where(.skdx-menubar__sub-content) {
+    max-block-size: var(--skdx-menubar-available-height, none);
+  }
+
+  :where(.skdx-select__content) {
+    max-block-size: var(--skdx-select-available-height, none);
+  }
+
+  :where(.skdx-combobox__content) {
+    max-block-size: var(--skdx-combobox-available-height, none);
+  }
+
+  :where(.skdx-autocomplete__content) {
+    max-block-size: var(--skdx-autocomplete-available-height, none);
+  }
+
+  :where(.skdx-mentions__content) {
+    max-block-size: var(--skdx-mentions-available-height, none);
+  }
+
+  :where(.skdx-tree-select__content) {
+    max-block-size: var(--skdx-tree-select-available-height, none);
+  }
+
+  :where(.skdx-speed-dial__content) {
+    max-block-size: var(--skdx-speed-dial-available-height, none);
+  }
+
+  /* Under role="tooltip" the open data-state is 'delayed-open' or 'instant-open',
+     never the literal 'open' the rest of this family uses — :not() catches both. */
+  :where(.skdx-popover__content):not([data-state='closed']) {
+    animation: skdx-zoom-in var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-drawer__content)[data-side='top'][data-state='open'],
+  :where(.skdx-menu__content)[data-side='top'][data-state='open'],
+  :where(.skdx-menubar__content)[data-side='top'][data-state='open'],
+  :where(.skdx-select__content)[data-side='top'][data-state='open'],
+  :where(.skdx-combobox__content)[data-side='top'][data-state='open'],
+  :where(.skdx-autocomplete__content)[data-side='top'][data-state='open'],
+  :where(.skdx-mentions__content)[data-side='top'][data-state='open'],
+  :where(.skdx-tree-select__content)[data-side='top'][data-state='open'],
+  :where(.skdx-date-picker__content)[data-side='top'][data-state='open'],
+  :where(.skdx-tour__content)[data-side='top'][data-state='open'],
+  :where(.skdx-speed-dial__content)[data-side='top'][data-state='open'] {
+    animation-name: skdx-slide-in-from-bottom;
+  }
+
+  :where(.skdx-popover__content)[data-side='top']:not([data-state='closed']) {
+    animation-name: skdx-slide-in-from-bottom;
+  }
+
+  :where(.skdx-drawer__content)[data-side='bottom'][data-state='open'],
+  :where(.skdx-menu__content)[data-side='bottom'][data-state='open'],
+  :where(.skdx-menubar__content)[data-side='bottom'][data-state='open'],
+  :where(.skdx-select__content)[data-side='bottom'][data-state='open'],
+  :where(.skdx-combobox__content)[data-side='bottom'][data-state='open'],
+  :where(.skdx-autocomplete__content)[data-side='bottom'][data-state='open'],
+  :where(.skdx-mentions__content)[data-side='bottom'][data-state='open'],
+  :where(.skdx-tree-select__content)[data-side='bottom'][data-state='open'],
+  :where(.skdx-date-picker__content)[data-side='bottom'][data-state='open'],
+  :where(.skdx-tour__content)[data-side='bottom'][data-state='open'],
+  :where(.skdx-speed-dial__content)[data-side='bottom'][data-state='open'] {
+    animation-name: skdx-slide-in-from-top;
+  }
+
+  :where(.skdx-popover__content)[data-side='bottom']:not([data-state='closed']) {
+    animation-name: skdx-slide-in-from-top;
+  }
+
+  :where(.skdx-drawer__content)[data-side='left'][data-state='open'],
+  :where(.skdx-menu__content)[data-side='left'][data-state='open'],
+  :where(.skdx-menu__sub-content)[data-side='left'][data-state='open'],
+  :where(.skdx-menubar__content)[data-side='left'][data-state='open'],
+  :where(.skdx-menubar__sub-content)[data-side='left'][data-state='open'],
+  :where(.skdx-select__content)[data-side='left'][data-state='open'],
+  :where(.skdx-combobox__content)[data-side='left'][data-state='open'],
+  :where(.skdx-autocomplete__content)[data-side='left'][data-state='open'],
+  :where(.skdx-mentions__content)[data-side='left'][data-state='open'],
+  :where(.skdx-tree-select__content)[data-side='left'][data-state='open'],
+  :where(.skdx-date-picker__content)[data-side='left'][data-state='open'],
+  :where(.skdx-tour__content)[data-side='left'][data-state='open'],
+  :where(.skdx-speed-dial__content)[data-side='left'][data-state='open'] {
+    animation-name: skdx-slide-in-from-end;
+  }
+
+  :where(.skdx-popover__content)[data-side='left']:not([data-state='closed']) {
+    animation-name: skdx-slide-in-from-end;
+  }
+
+  :where(.skdx-drawer__content)[data-side='right'][data-state='open'],
+  :where(.skdx-menu__content)[data-side='right'][data-state='open'],
+  :where(.skdx-menu__sub-content)[data-side='right'][data-state='open'],
+  :where(.skdx-menubar__content)[data-side='right'][data-state='open'],
+  :where(.skdx-menubar__sub-content)[data-side='right'][data-state='open'],
+  :where(.skdx-select__content)[data-side='right'][data-state='open'],
+  :where(.skdx-combobox__content)[data-side='right'][data-state='open'],
+  :where(.skdx-autocomplete__content)[data-side='right'][data-state='open'],
+  :where(.skdx-mentions__content)[data-side='right'][data-state='open'],
+  :where(.skdx-tree-select__content)[data-side='right'][data-state='open'],
+  :where(.skdx-date-picker__content)[data-side='right'][data-state='open'],
+  :where(.skdx-tour__content)[data-side='right'][data-state='open'],
+  :where(.skdx-speed-dial__content)[data-side='right'][data-state='open'] {
+    animation-name: skdx-slide-in-from-start;
+  }
+
+  :where(.skdx-popover__content)[data-side='right']:not([data-state='closed']) {
+    animation-name: skdx-slide-in-from-start;
+  }
+
+  /* Viewport-fixed is what makes this modal; LoadingOverlay's backdrop is region-scoped and styles itself separately. */
+  :where(.skdx-dialog__overlay),
+  :where(.skdx-drawer__overlay),
+  :where(.skdx-tour__backdrop) {
+    position: fixed;
+    inset: 0;
+    background-color: var(--skdx-color-surface-overlay);
+    z-index: var(--skdx-z-index-overlay);
+  }
+
+  :where(.skdx-dialog__overlay)[data-state='open'],
+  :where(.skdx-drawer__overlay)[data-state='open'],
+  :where(.skdx-tour__backdrop)[data-state='open'] {
+    animation: skdx-fade-in var(--skdx-motion-duration-normal) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-dialog__overlay)[data-state='closed'],
+  :where(.skdx-drawer__overlay)[data-state='closed'],
+  :where(.skdx-tour__backdrop)[data-state='closed'] {
+    animation: skdx-fade-out var(--skdx-motion-duration-fast) var(--skdx-motion-easing-exit);
+    /* Same as the content rule above: a forceMounted scrim needs `forwards` or it reverts to fully opaque and blocks the page. */
+    animation-fill-mode: forwards;
+    pointer-events: none;
+  }
+
+  /* dialog::backdrop is silenced (transparent, not removed — the UA default wash would show through): the scrim is the .overlay element in every framework, not this pseudo. */
+  :where(dialog.skdx-dialog__content)::backdrop {
+    background-color: transparent;
+  }
+}

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

@@ -0,0 +1,38 @@
+/*
+ * 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';
+
+/* data-status is the severity scale, set as a prop or attribute; data-state is a component's own lifecycle vocabulary and never carries severity. */
+@layer skdx-components {
+  :where(.skdx-alert, .skdx-badge, .skdx-button, .skdx-toast)[data-status='info'] {
+    --skdx-status-bg: var(--skdx-color-status-info-bg);
+    --skdx-status-border: var(--skdx-color-status-info-border);
+    --skdx-status-text: var(--skdx-color-status-info-text);
+    --skdx-status-icon: var(--skdx-color-status-info-icon);
+  }
+
+  :where(.skdx-alert, .skdx-badge, .skdx-button, .skdx-toast)[data-status='success'] {
+    --skdx-status-bg: var(--skdx-color-status-success-bg);
+    --skdx-status-border: var(--skdx-color-status-success-border);
+    --skdx-status-text: var(--skdx-color-status-success-text);
+    --skdx-status-icon: var(--skdx-color-status-success-icon);
+  }
+
+  :where(.skdx-alert, .skdx-badge, .skdx-button, .skdx-toast)[data-status='warning'] {
+    --skdx-status-bg: var(--skdx-color-status-warning-bg);
+    --skdx-status-border: var(--skdx-color-status-warning-border);
+    --skdx-status-text: var(--skdx-color-status-warning-text);
+    --skdx-status-icon: var(--skdx-color-status-warning-icon);
+  }
+
+  :where(.skdx-alert, .skdx-badge, .skdx-button, .skdx-toast)[data-status='danger'] {
+    --skdx-status-bg: var(--skdx-color-status-danger-bg);
+    --skdx-status-border: var(--skdx-color-status-danger-border);
+    --skdx-status-text: var(--skdx-color-status-danger-text);
+    --skdx-status-icon: var(--skdx-color-status-danger-icon);
+  }
+}

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

@@ -0,0 +1,85 @@
+/*
+ * 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';
+
+/* Scoped to an explicit family list, not [data-part='trigger']: that wildcard also matches non-field triggers like Clipboard's copy button. */
+@layer skdx-components {
+  /* `&` in the nested state rules resolves to `:is(:where(…))`, whose specificity is the
+     zero of the `:where()` it wraps, so nesting the list costs no weight. */
+  :where(
+    .skdx-select__trigger,
+    .skdx-autocomplete__trigger,
+    .skdx-combobox__trigger,
+    .skdx-tree-select__trigger,
+    .skdx-date-picker__trigger
+  ) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--skdx-space-2);
+
+    inline-size: 100%;
+    block-size: var(--skdx-control-height-md);
+    padding-inline: var(--skdx-control-padding-md);
+
+    color: var(--skdx-color-field-text);
+    background-color: var(--skdx-color-field-bg);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-field-border);
+    border-radius: var(--skdx-radius-md);
+
+    font-size: var(--skdx-font-size-sm);
+    text-align: start;
+    cursor: pointer;
+
+    transition: border-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+
+    &:hover:not([data-disabled]) {
+      border-color: var(--skdx-color-field-border-hover);
+    }
+
+    &[data-state='open'] {
+      border-color: var(--skdx-color-field-border-focus);
+    }
+
+    &[data-invalid] {
+      border-color: var(--skdx-color-field-border-invalid);
+      border-width: var(--skdx-border-width-thick);
+    }
+
+    &[data-disabled] {
+      color: var(--skdx-color-text-disabled);
+      background-color: var(--skdx-color-field-bg-disabled);
+      border-color: var(--skdx-color-border-disabled);
+      cursor: not-allowed;
+    }
+
+    @media (forced-colors: active) {
+      border-color: CanvasText;
+    }
+  }
+
+  /* Overrides the shared group above — both `:where()`, so source order decides. */
+  :where(.skdx-combobox__trigger) {
+    inline-size: var(--skdx-control-height-md);
+    justify-content: center;
+    padding-inline: 0;
+  }
+
+  /* The value slot truncates; the disclosure icon never shrinks. */
+  :where(.skdx-select__value),
+  :where(.skdx-tree-select__value) {
+    overflow: hidden;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :where(.skdx-select__value)[data-placeholder],
+  :where(.skdx-tree-select__value)[data-placeholder] {
+    color: var(--skdx-color-text-placeholder);
+  }
+}

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

@@ -0,0 +1,85 @@
+/*
+ * 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';
+
+/**
+ * Accordion — a stack of independently expandable sections. The panel is not
+ * height-animated: `hidden="until-found"` reveals collapsed sections via
+ * find-in-page, and an animated max-height fights the browser's own reveal.
+ */
+@layer skdx-components {
+  :where(.skdx-accordion) {
+    display: flex;
+    flex-direction: column;
+    inline-size: 100%;
+
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: var(--skdx-radius-md);
+    /* Clips the first and last item's corners to the container's radius. */
+    overflow: hidden;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+  }
+
+  :where(.skdx-accordion__item) + :where(.skdx-accordion__item) {
+    border-block-start: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+  }
+
+  :where(.skdx-accordion__header) {
+    margin: 0;
+  }
+
+  :where(.skdx-accordion__trigger) {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--skdx-space-3);
+
+    inline-size: 100%;
+    min-block-size: var(--skdx-control-height-lg);
+    padding-inline: var(--skdx-space-4);
+
+    color: var(--skdx-color-text-default);
+    background: transparent;
+    border: 0;
+
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-medium);
+    text-align: start;
+    cursor: pointer;
+
+    transition: background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-accordion__trigger):hover:not([data-disabled]) {
+    background-color: color-mix(in srgb, var(--skdx-color-surface-hover) 50%, transparent);
+  }
+
+  :where(.skdx-accordion__trigger)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  :where(.skdx-accordion__content) {
+    padding-inline: var(--skdx-space-4);
+    padding-block-end: var(--skdx-space-4);
+    font-size: var(--skdx-font-size-sm);
+    line-height: var(--skdx-font-line-height-relaxed);
+    color: var(--skdx-color-text-muted);
+  }
+
+  /* The chevron rotates to point at the content when open. */
+  :where(.skdx-accordion__indicator) {
+    flex: none;
+    display: inline-flex;
+    color: var(--skdx-color-text-muted);
+    transition: rotate var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-accordion__trigger)[data-state='open'] :where(.skdx-accordion__indicator) {
+    rotate: 180deg;
+  }
+}

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

@@ -0,0 +1,118 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_status.css';
+
+/**
+ * Alert — an inline message about the state of the page. Grid, not flex-row:
+ * title/description sit directly inside `Alert` with no wrapper in the common
+ * case, and must stack in one column either way.
+ */
+@layer skdx-components {
+  :where(.skdx-alert) {
+    display: grid;
+    grid-template-columns: auto 1fr auto auto;
+    align-items: start;
+    gap: var(--skdx-space-2);
+
+    padding: var(--skdx-space-3);
+
+    color: var(--skdx-status-text, var(--skdx-color-status-neutral-text));
+    background-color: var(--skdx-status-bg, var(--skdx-color-status-neutral-bg));
+    border: var(--skdx-border-width-thin) solid
+      var(--skdx-status-border, var(--skdx-color-status-neutral-border));
+    border-inline-start-width: var(--skdx-border-width-thicker);
+    border-radius: var(--skdx-radius-md);
+
+    font-size: var(--skdx-font-size-sm);
+    line-height: var(--skdx-font-line-height-normal);
+  }
+
+  /* Visual weight is a separate axis from severity; severity stays on `data-status`. */
+  :where(.skdx-alert)[data-variant='solid'] {
+    background-color: var(--skdx-status-bg, var(--skdx-color-status-neutral-bg));
+  }
+
+  :where(.skdx-alert)[data-variant='outline'] {
+    background-color: transparent;
+  }
+
+  /* A dismissed alert: Web Components hides the host via the native `hidden` attribute
+     rather than unmounting, and carries an equivalent `:host([hidden])` rule — but that
+     shadow declaration loses to this file's, since an outer-tree declaration wins over
+     an inner-tree one before layers or specificity are consulted. Without this rule,
+     `display: grid` above kept every dismissed alert on the page. */
+  :where(.skdx-alert)[hidden] {
+    display: none;
+  }
+
+  /* The icon is the non-colour signal for severity: an alert distinguished only
+     by a wash is invisible to a reader who cannot see the wash. */
+  :where(.skdx-alert__icon) {
+    grid-column: 1;
+    grid-row: 1;
+    inline-size: var(--skdx-icon-size-md);
+    block-size: var(--skdx-icon-size-md);
+    color: var(--skdx-status-icon, var(--skdx-color-status-neutral-icon));
+  }
+
+  :where(.skdx-alert__title) {
+    grid-column: 2;
+    grid-row: 1;
+    /* AlertTitle renders an `<h3>`; the UA default heading margin otherwise
+       pushes it away from the icon it should sit level with. */
+    margin: 0;
+    font-weight: var(--skdx-font-weight-semibold);
+    line-height: var(--skdx-font-line-height-tight);
+  }
+
+  :where(.skdx-alert__description) {
+    grid-column: 2;
+    grid-row: 2;
+    color: currentColor;
+  }
+
+  :where(.skdx-alert__action) {
+    grid-column: 3;
+    grid-row: 1;
+    align-self: center;
+    /* Commonly holds two things (a button, a "see more" link); no text node survives
+       between JSX siblings, so without this gap they'd render flush together. */
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-3);
+  }
+
+  :where(.skdx-alert__close) {
+    grid-column: 4;
+    grid-row: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    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;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-alert) {
+      border-color: CanvasText;
+    }
+  }
+
+  :where(.skdx-alert__content) {
+    grid-column: 2;
+    grid-row: 1;
+    min-inline-size: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-1);
+  }
+}

package/dist/skins-src/components/angle-slider.css

@@ -0,0 +1,110 @@
+/*
+ * 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';
+
+/* Placement is rotate(<angle>) translateY(-<radius>). Not mirrored under
+   dir="rtl": 0deg is 12 o'clock and the angle increases clockwise in every locale. */
+@layer skdx-components {
+  :where(.skdx-angle-slider) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    inline-size: 6rem;
+    block-size: 6rem;
+    /* Half the dial, less the thumb's own half-width, so the thumb sits inside the ring rather than straddling it. */
+    --skdx-angle-slider-radius: 2.5rem;
+
+    background-color: var(--skdx-color-surface-sunken);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: var(--skdx-radius-full);
+    touch-action: none;
+  }
+
+  :where(.skdx-angle-slider__thumb) {
+    position: absolute;
+    inline-size: var(--skdx-indicator-size-md);
+    block-size: var(--skdx-indicator-size-md);
+
+    background-color: var(--skdx-color-track-fill);
+    border-radius: var(--skdx-radius-full);
+    cursor: grab;
+    transform: rotate(var(--skdx-angle-slider-angle, 0deg))
+      translateY(calc(-1 * var(--skdx-angle-slider-radius)));
+  }
+
+  :where(.skdx-angle-slider__marks) {
+    position: absolute;
+    inset: 0;
+    border-radius: var(--skdx-radius-full);
+    pointer-events: none;
+  }
+
+  :where(.skdx-angle-slider__mark) {
+    position: absolute;
+    /* The marks container is inset: 0, not a flex centre, so a mark has to find the pivot itself before rotating about it. */
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    inline-size: var(--skdx-border-width-thin);
+    block-size: var(--skdx-space-1);
+    background-color: var(--skdx-color-border-strong);
+    transform-origin: center;
+    transform: translate(-50%, -50%) rotate(var(--skdx-angle-slider-mark-angle, 0deg))
+      translateY(calc(-1 * var(--skdx-angle-slider-radius)));
+  }
+
+  :where(.skdx-angle-slider)[data-dragging] :where(.skdx-angle-slider__thumb) {
+    cursor: grabbing;
+    /* No transition while dragging: a tween on the rotation lags the pointer instead of smoothing it. */
+    transition: none;
+  }
+
+  :where(.skdx-angle-slider)[data-readonly] {
+    border-color: var(--skdx-color-border-subtle);
+  }
+
+  :where(.skdx-angle-slider)[data-readonly] :where(.skdx-angle-slider__thumb) {
+    cursor: default;
+  }
+
+  :where(.skdx-angle-slider__mark)[data-state='active'] {
+    background-color: var(--skdx-color-track-fill);
+  }
+
+  /* A mark that carries a label is sized by its content and painted over border-strong (4.41:1), not the dial behind it. */
+  :where(.skdx-angle-slider__mark):not(:empty) {
+    background-color: transparent;
+    inline-size: auto;
+    block-size: auto;
+  }
+
+  :where(.skdx-angle-slider)[data-disabled] :where(.skdx-angle-slider__thumb) {
+    background-color: var(--skdx-color-border-disabled);
+    cursor: not-allowed;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-angle-slider) {
+      border-color: CanvasText;
+    }
+
+    :where(.skdx-angle-slider__thumb) {
+      background-color: Highlight;
+      /* Forced colours drop the background on some engines; the outline is what survives either way. */
+      outline: var(--skdx-border-width-thin) solid CanvasText;
+    }
+
+    :where(.skdx-angle-slider__mark) {
+      background-color: CanvasText;
+    }
+
+    :where(.skdx-angle-slider__mark)[data-state='active'] {
+      background-color: Highlight;
+    }
+  }
+}

package/dist/skins-src/components/aspect-ratio.css

@@ -0,0 +1,26 @@
+/*
+ * 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';
+
+/**
+ * AspectRatio — constrains content to a ratio. The ratio itself is an inline
+ * style on the element; this file only handles the clip and the media fit.
+ */
+@layer skdx-components {
+  :where(.skdx-aspect-ratio) {
+    overflow: hidden;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+  }
+
+  /* Media fills the frame and is cropped, never letterboxed or stretched. */
+  :where(.skdx-aspect-ratio) > :where(img, video, iframe, canvas, svg) {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+  }
+}