@skdx/docs-kit 0.35.0

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

@@ -0,0 +1,207 @@
+/*
+ * 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';
+
+/* The fill is driven by --skdx-progress, a custom property the headless component already sets, so one source of truth drives both the ARIA value and the paint.
+   Under role="meter" the same bar reports a measurement instead of a task: it never animates, has no indeterminate state, and paints the band data-range resolves to. */
+@layer skdx-components {
+  :where(.skdx-progress) {
+    position: relative;
+    display: block;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+  }
+
+  /* Scoped away from a .skdx-progress__circle child, so the circular variant (same root class) isn't clipped to this box's fixed track height. */
+  :where(.skdx-progress):not(:has(.skdx-progress__circle)) {
+    overflow: hidden;
+
+    inline-size: 100%;
+    block-size: var(--skdx-space-2);
+
+    background-color: var(--skdx-color-track);
+    /* Border, not fill, is the boundary: the dark-mode track alias equals background exactly in several themes (WCAG 2.2 1.4.11). */
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-strong);
+    border-radius: var(--skdx-radius-full);
+  }
+
+  :where(.skdx-progress):has(.skdx-progress__circle) {
+    overflow: visible;
+    inline-size: auto;
+    block-size: auto;
+  }
+
+  :where(.skdx-progress__indicator) {
+    /* Rendered as a span; without an explicit display it stays inline and block-size is ignored. */
+    display: block;
+    block-size: 100%;
+    inline-size: var(--skdx-progress, 0%);
+
+    background-color: var(--skdx-color-track-fill);
+    border-radius: inherit;
+
+    transition: inline-size var(--skdx-motion-duration-normal) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-progress)[data-state='indeterminate'] :where(.skdx-progress__indicator) {
+    inline-size: 25%;
+    transition: none;
+    animation: skdx-indeterminate var(--skdx-motion-duration-slow) var(--skdx-motion-easing-steady)
+      infinite;
+  }
+
+  /* Reduced motion clamps the shuttle to a static 25%-wide fill, which would misread as "a quarter done" — filling the track and dimming it instead keeps it legible as "busy, not a number". */
+  @media (prefers-reduced-motion: reduce) {
+    :where(.skdx-progress)[data-state='indeterminate'] :where(.skdx-progress__indicator) {
+      inline-size: 100%;
+      opacity: 0.5;
+    }
+  }
+
+  /* Absolutely positioned so it resolves against the root (the track), not the fill it hangs off; both properties fall back to 0% until the component sets them. */
+  :where(.skdx-progress__indicator)::after {
+    content: '';
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: var(--skdx-progress, 0%);
+    inline-size: calc(var(--skdx-progress-buffer, 0%) - var(--skdx-progress, 0%));
+    background-color: var(--skdx-color-track-fill);
+    opacity: 0.35;
+    border-radius: inherit;
+  }
+
+  :where(.skdx-progress__label),
+  :where(.skdx-progress__value) {
+    font-size: var(--skdx-font-size-xs);
+    color: var(--skdx-color-text-muted);
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Bands, under role="meter": data-range carries the resolved region, so the fill
+     is painted without this sheet re-deriving it from low/high/optimum. */
+  :where(.skdx-progress)[data-range='optimum'] :where(.skdx-progress__indicator) {
+    background-color: var(--skdx-color-status-success-icon);
+  }
+
+  :where(.skdx-progress)[data-range='suboptimal'] :where(.skdx-progress__indicator) {
+    background-color: var(--skdx-color-status-warning-icon);
+  }
+
+  :where(.skdx-progress)[data-range='poor'] :where(.skdx-progress__indicator) {
+    background-color: var(--skdx-color-status-danger-icon);
+  }
+
+  /* A mounted Label or Value turns the root into the container and ::before into the
+     track, since the root cannot be both the track and their container at once. */
+  :where(.skdx-progress):has(.skdx-progress__label, .skdx-progress__value) {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    gap: var(--skdx-space-1);
+    block-size: auto;
+    overflow: visible;
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  :where(.skdx-progress):has(.skdx-progress__label, .skdx-progress__value)::before {
+    content: '';
+    grid-row: 2;
+    grid-column: 1 / -1;
+    block-size: var(--skdx-space-2);
+    background-color: var(--skdx-color-track);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-strong);
+    border-radius: var(--skdx-radius-full);
+  }
+
+  /* The track's own cell, later in paint order, so the fill sits on top of it. */
+  :where(.skdx-progress):has(.skdx-progress__label, .skdx-progress__value)
+    :where(.skdx-progress__indicator) {
+    grid-row: 2;
+    grid-column: 1 / -1;
+    block-size: var(--skdx-space-2);
+  }
+
+  /* The buffer resolves against the root, which is now the whole container, so it is
+     pinned back to the track row rather than stretched over the label. */
+  :where(.skdx-progress):has(.skdx-progress__label, .skdx-progress__value)
+    :where(.skdx-progress__indicator)::after {
+    inset-block: auto 0;
+    block-size: var(--skdx-space-2);
+  }
+
+  /* Placed explicitly: auto-placement puts a Value authored after the indicator
+     on a third row instead of beside the label. */
+  :where(.skdx-progress):has(.skdx-progress__label, .skdx-progress__value)
+    :where(.skdx-progress__label) {
+    grid-row: 1;
+    grid-column: 1;
+  }
+
+  :where(.skdx-progress):has(.skdx-progress__label, .skdx-progress__value)
+    :where(.skdx-progress__value) {
+    grid-row: 1;
+    grid-column: 2;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-progress),
+    :where(.skdx-progress):has(.skdx-progress__label, .skdx-progress__value)::before {
+      border: var(--skdx-border-width-thin) solid CanvasText;
+    }
+
+    :where(.skdx-progress__indicator) {
+      background-color: Highlight;
+    }
+  }
+
+  /* This box is also the track, a ring cut out with mask-image: the bare-div variant paints its arc into it, and an SVG arc strokes exactly this band. */
+  :where(.skdx-progress__circle) {
+    position: relative;
+    display: block;
+    inline-size: calc(var(--skdx-progress-circle-size, 48) * 1px);
+    block-size: calc(var(--skdx-progress-circle-size, 48) * 1px);
+    background-color: var(--skdx-color-track);
+    border-radius: var(--skdx-radius-full);
+    mask-image: radial-gradient(
+      farthest-side,
+      transparent calc(100% - var(--skdx-progress-circle-thickness, 4) * 1px),
+      currentColor calc(100% - var(--skdx-progress-circle-thickness, 4) * 1px)
+    );
+  }
+
+  /* Rotates the nested SVG, not the host: rotating the host would also spin the bare-div ring below, which needs no correction. */
+  :where(.skdx-progress__circle) > svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+    rotate: -90deg;
+  }
+
+  :where(circle.skdx-progress__circle-indicator) {
+    fill: none;
+    stroke: var(--skdx-color-track-fill);
+    stroke-width: var(--skdx-border-width-thicker);
+    stroke-linecap: round;
+    transition: stroke-dashoffset var(--skdx-motion-duration-normal) var(--skdx-motion-easing);
+  }
+
+  /* --skdx-progress drives this arc as a conic-gradient, the same value that drives the linear fill's width.
+     Matched by position (direct-child), not tag name: Angular and Web Components render a custom element tag
+     here instead of a div. Excludes an indicator that wraps an <svg>: Web Components hosts the generated SVG
+     arc inside its own custom-element wrapper, which would otherwise paint this conic arc behind its stroke. */
+  :where(.skdx-progress__circle) > :where(.skdx-progress__circle-indicator):not(:has(> svg)) {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    background: conic-gradient(
+      var(--skdx-color-track-fill, transparent) var(--skdx-progress, 0%),
+      transparent 0%
+    );
+    mask-image: inherit;
+    transition: background var(--skdx-motion-duration-normal) var(--skdx-motion-easing);
+  }
+}

package/dist/skins-src/components/qr-code.css

@@ -0,0 +1,62 @@
+/*
+ * 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';
+
+/**
+ * QrCode — a rendered QR matrix. Contrast is functional: matrix and quiet zone
+ * come from the neutral ramp's extremes, not the surface tokens, so the code
+ * stays scannable under a theme whose surface is mid-grey.
+ */
+@layer skdx-components {
+  :where(.skdx-qr-code) {
+    position: relative;
+    display: inline-block;
+    /* The mandatory quiet zone. */
+    padding: var(--skdx-space-2);
+    background-color: var(--skdx-color-neutral-50);
+    border-radius: var(--skdx-radius-sm);
+  }
+
+  :where(.skdx-qr-code__pattern) {
+    display: block;
+    inline-size: 100%;
+    block-size: auto;
+    fill: var(--skdx-color-neutral-950);
+    /* The custom element's <path> uses fill="currentColor", so `color` must carry the same ink. */
+    color: var(--skdx-color-neutral-950);
+  }
+
+  /* `QrCodeOverlay` renders an SVG `<g>`, which has no CSS box — only inherited
+     `color` applies, giving `fill="currentColor"` content the quiet-zone neutral. */
+  :where(.skdx-qr-code__overlay) {
+    color: var(--skdx-color-neutral-50);
+  }
+
+  /* Forced colours would repaint the matrix and break scanning, so the code
+     opts out — one of the few legitimate uses of this property. */
+  @media (forced-colors: active) {
+    :where(.skdx-qr-code) {
+      forced-color-adjust: none;
+    }
+  }
+
+  /* A quiet zone in the page's own colour. A QR matrix flush against arbitrary
+     content is one a camera cannot lock onto.
+     `QrCodeFrame` *is* the `<svg>` — "the element itself carries no width or
+     height; size it from CSS" is its own doc comment. Nothing here did, so the
+     viewBox had a 0×0 viewport to scale into and the whole matrix vanished.
+     Four pixels per module, the same ratio `QrCode`'s own doc example uses for
+     `--skdx-qr-code-size`. */
+  :where(.skdx-qr-code__frame) {
+    display: block;
+    inline-size: calc(var(--skdx-qr-code-size, 21) * 4px);
+    block-size: calc(var(--skdx-qr-code-size, 21) * 4px);
+    padding: var(--skdx-space-3);
+    background-color: var(--skdx-color-neutral-50);
+    border-radius: var(--skdx-radius-md);
+  }
+}

package/dist/skins-src/components/radio-card.css

@@ -0,0 +1,158 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_card-control.css';
+@import 'radio-group.css';
+
+/** RadioCard — a radio presented as a selectable panel. */
+@layer skdx-components {
+  :where(.skdx-radio-card) {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--skdx-space-3);
+
+    padding: var(--skdx-space-3);
+
+    background-color: var(--skdx-color-surface-raised);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: var(--skdx-radius-md);
+    cursor: pointer;
+
+    transition:
+      border-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),
+      background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-radio-card):hover:not([data-disabled]) {
+    border-color: var(--skdx-color-border-strong);
+  }
+
+  :where(.skdx-radio-card)[data-state='checked'] {
+    border-color: var(--skdx-color-border-accent);
+    background-color: var(--skdx-color-surface-selected);
+  }
+
+  :where(.skdx-radio-card)[data-disabled] {
+    background-color: var(--skdx-color-surface-disabled);
+    border-color: var(--skdx-color-border-disabled);
+    cursor: not-allowed;
+  }
+
+  /* Read-only cards are available, only not selectable: ordinary paint, no
+     click-promising cursor. The flag lives on the group root, not the card. */
+  :where(.skdx-radio-group)[data-readonly] :where(.skdx-radio-card) {
+    cursor: default;
+  }
+
+  :where(.skdx-radio-group)[data-readonly] :where(.skdx-radio-card):hover {
+    border-color: var(--skdx-color-border-default);
+  }
+
+  /* An invalid group paints its cards: RadioCard has no `invalid` prop, because
+     validity is a statement about the set and lives on the group root. */
+  :where(.skdx-radio-group)[data-invalid] :where(.skdx-radio-card) {
+    border-color: var(--skdx-color-border-danger);
+  }
+
+  :where(.skdx-radio-card__label) {
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-medium);
+  }
+
+  :where(.skdx-radio-card__description) {
+    font-size: var(--skdx-font-size-xs);
+    color: var(--skdx-color-text-muted);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-radio-card)[data-state='checked'] {
+      border-color: Highlight;
+      border-width: var(--skdx-border-width-thick);
+    }
+  }
+
+  /* The visible ring and dot. Not drawn on `control`: that is the real `<input>`, and
+     the VisuallyHidden wrapper's inline 1×1/clip styles outrank any layered rule on it.
+     The dot is a pseudo-element so it scales with the ring at any `data-size`. */
+  :where(.skdx-radio-card__indicator) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+
+    inline-size: var(--skdx-indicator-size-md);
+    block-size: var(--skdx-indicator-size-md);
+
+    background-color: var(--skdx-color-field-bg);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-field-border);
+    /* The one control in the system that is always fully round. */
+    border-radius: var(--skdx-radius-full);
+  }
+
+  :where(.skdx-radio-card__indicator):empty::after {
+    content: '';
+    inline-size: 50%;
+    block-size: 50%;
+    border-radius: var(--skdx-radius-full);
+    /* Drawn but uninked until chosen, so the ring never resizes on selection. */
+    background-color: transparent;
+  }
+
+  :where(.skdx-radio-card)[data-state='checked'] :where(.skdx-radio-card__indicator) {
+    border-color: var(--skdx-color-selection-bg);
+    border-width: var(--skdx-border-width-thicker);
+  }
+
+  :where(.skdx-radio-card)[data-state='checked'] :where(.skdx-radio-card__indicator):empty::after {
+    background-color: var(--skdx-color-selection-bg);
+  }
+
+  :where(.skdx-radio-card)[data-disabled] :where(.skdx-radio-card__indicator) {
+    background-color: var(--skdx-color-field-bg-disabled);
+    border-color: var(--skdx-color-border-disabled);
+  }
+
+  :where(.skdx-radio-card)[data-disabled] :where(.skdx-radio-card__indicator):empty::after {
+    background-color: var(--skdx-color-text-disabled);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-radio-card__indicator) {
+      border-color: CanvasText;
+    }
+
+    :where(.skdx-radio-card)[data-state='checked']
+      :where(.skdx-radio-card__indicator):empty::after {
+      background-color: Highlight;
+    }
+  }
+
+  /* On a card `data-size` means padding and type scale, not the box size radio-group.css's
+     metrics adjust. Duplicated in checkbox-card.css; the values must stay identical. */
+  :where(.skdx-radio-card)[data-size='sm'] {
+    padding: var(--skdx-space-2);
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-radio-card)[data-size='sm'] :where(.skdx-radio-card__label) {
+    font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-radio-card)[data-size='md'] {
+    padding: var(--skdx-space-3);
+    gap: var(--skdx-space-3);
+  }
+
+  :where(.skdx-radio-card)[data-size='lg'] {
+    padding: var(--skdx-space-4);
+    gap: var(--skdx-space-4);
+  }
+
+  :where(.skdx-radio-card)[data-size='lg'] :where(.skdx-radio-card__label) {
+    font-size: var(--skdx-font-size-md);
+  }
+}

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

@@ -0,0 +1,148 @@
+/*
+ * 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';
+
+/**
+ * RadioGroup — a set of mutually exclusive options. The ring is drawn on the
+ * item's `::before`, so its size never depends on what the item lays out beside it.
+ */
+@layer skdx-components {
+  :where(.skdx-radio-group) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-3);
+  }
+
+  /* both and vertical share a rule: both is about which arrow keys respond, not the axis the boxes sit on. */
+  :where(.skdx-radio-group)[data-orientation='vertical'],
+  :where(.skdx-radio-group)[data-orientation='both'] {
+    flex-direction: column;
+    flex-wrap: nowrap;
+    gap: var(--skdx-space-3);
+  }
+
+  :where(.skdx-radio-group)[data-orientation='horizontal'] {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--skdx-space-4);
+  }
+
+  /* Read-only is not disabled: available, only not editable. See checkbox.css. */
+  :where(.skdx-radio-group)[data-readonly] :where(.skdx-radio-group__item) {
+    cursor: default;
+  }
+
+  /* The ring is a pseudo-element on ::before, not the item's own box, so its size never depends on label text laid out beside it. */
+  :where(.skdx-radio-group__item) {
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+    position: relative;
+    flex: none;
+
+    /* Native <button> UA padding counts toward the flex item's automatic min-width. */
+    padding: 0;
+    min-inline-size: 0;
+
+    background: none;
+    border: none;
+    /* Matches the ring's radius so the shared focus outline stays round unlabeled and pill-shaped around the whole row when labeled. */
+    border-radius: var(--skdx-radius-full);
+  }
+
+  :where(.skdx-radio-group__item)::before {
+    content: '';
+    flex: none;
+
+    inline-size: var(--skdx-indicator-size-md);
+    block-size: var(--skdx-indicator-size-md);
+
+    background-color: var(--skdx-color-field-bg);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-field-border);
+    border-radius: var(--skdx-radius-full);
+
+    transition:
+      background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing),
+      border-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+  }
+
+  /* transparent, not an omission: overrides base.css's generic :hover fill, since the item itself carries no visible box, only ::before does. */
+  :where(.skdx-radio-group__item):hover {
+    background-color: transparent;
+  }
+
+  :where(.skdx-radio-group__item):hover::before {
+    border-color: var(--skdx-color-field-border-hover);
+    background-color: var(--skdx-color-field-bg-hover);
+  }
+
+  /* A halo outside the box, since a selected radio's border/fill are already accented and neither can signal hover by changing colour. box-shadow, not outline, so it can't be confused with the focus ring. */
+  :where(.skdx-radio-group__item)[data-state='checked']:hover::before {
+    box-shadow: 0 0 0 var(--skdx-border-width-thick) var(--skdx-color-border-accent);
+  }
+
+  :where(.skdx-radio-group__item)[data-state='checked']::before {
+    border-color: var(--skdx-color-selection-bg);
+    border-width: var(--skdx-border-width-thicker);
+    background-color: var(--skdx-color-field-bg);
+  }
+
+  :where(.skdx-radio-group__indicator) {
+    position: absolute;
+    inset-inline-start: calc(var(--skdx-indicator-size-md) * 0.25);
+    inset-block-start: 50%;
+    translate: 0 -50%;
+
+    inline-size: calc(var(--skdx-indicator-size-md) * 0.5);
+    block-size: calc(var(--skdx-indicator-size-md) * 0.5);
+    border-radius: var(--skdx-radius-full);
+    background-color: var(--skdx-color-selection-bg);
+  }
+
+  :where(.skdx-radio-group__item)[data-disabled] {
+    cursor: not-allowed;
+  }
+
+  :where(.skdx-radio-group__item)[data-disabled]::before {
+    background-color: var(--skdx-color-field-bg-disabled);
+    border-color: var(--skdx-color-border-disabled);
+  }
+
+  :where(.skdx-radio-group__item)[data-disabled] :where(.skdx-radio-group__indicator) {
+    background-color: var(--skdx-color-text-disabled);
+  }
+
+  /* data-invalid lives on the group root, not the item — no package emits it there, so this is a descendant selector from the root. */
+  :where(.skdx-radio-group)[data-invalid] :where(.skdx-radio-group__item)::before {
+    border-color: var(--skdx-color-field-border-invalid);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-radio-group__item)::before {
+      border-color: CanvasText;
+    }
+
+    :where(.skdx-radio-group__indicator) {
+      background-color: Highlight;
+    }
+
+    :where(.skdx-radio-group__item)[data-disabled]::before {
+      border-color: GrayText;
+    }
+  }
+
+  /* label is a consumer-composed slot, not a part any package emits — the caption is the consumer's own <label for>. */
+  :where(.skdx-radio-group__label) {
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-default);
+  }
+
+  :where(.skdx-radio-group__item)[data-disabled] :where(.skdx-radio-group__label) {
+    color: var(--skdx-color-text-disabled);
+  }
+}