@skdx/docs-kit 0.35.0

package/dist/skins-src/components/sign-in-page.css

@@ -0,0 +1,47 @@
+/*
+ * 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';
+
+/** SignInPage — provider buttons and an email/password or magic-link form, centred on the page. */
+@layer skdx-components {
+  :where(.skdx-sign-in-page) {
+    display: flex;
+    justify-content: center;
+    padding: var(--skdx-space-8);
+  }
+
+  :where(.skdx-sign-in-page__panel) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-4);
+
+    inline-size: 100%;
+    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-sign-in-page__providers) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-sign-in-page__provider) {
+    inline-size: 100%;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-sign-in-page__panel) {
+      border-color: CanvasText;
+    }
+  }
+}

package/dist/skins-src/components/sign-up-page.css

@@ -0,0 +1,55 @@
+/*
+ * 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';
+
+/** SignUpPage — provider buttons above the credentials form, centred on the page. */
+@layer skdx-components {
+  :where(.skdx-sign-up-page) {
+    display: flex;
+    justify-content: center;
+    padding: var(--skdx-space-8);
+  }
+
+  :where(.skdx-sign-up-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-sign-up-page__providers) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-sign-up-page__provider) {
+    inline-size: 100%;
+  }
+
+  :where(.skdx-sign-up-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-sign-up-page__panel) {
+      border-color: CanvasText;
+    }
+  }
+}

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

@@ -0,0 +1,55 @@
+/*
+ * 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';
+
+/**
+ * Skeleton — a content placeholder. Pulses rather than sweeps: opacity composites,
+ * while a moving background position repaints every frame.
+ */
+@layer skdx-components {
+  :where(.skdx-skeleton) {
+    --skdx-skeleton-color: var(--skdx-color-skeleton);
+    --skdx-skeleton-radius: var(--skdx-radius-sm);
+
+    display: block;
+    background-color: var(--skdx-skeleton-color);
+    border-radius: var(--skdx-skeleton-radius);
+
+    /* Placeholders must not be announced or read as content. The component
+       already sets aria-hidden; this stops selection from picking up the empty
+       box mid-drag. */
+    user-select: none;
+
+    animation: skdx-pulse var(--skdx-motion-duration-slow) var(--skdx-motion-easing) infinite;
+  }
+
+  /* A line skeleton takes the height of the line it stands in for, so swapping
+     real content in does not shift the layout. */
+  :where(.skdx-skeleton)[data-shape='line'] {
+    block-size: 1em;
+    --skdx-skeleton-radius: var(--skdx-radius-inner);
+  }
+
+  :where(.skdx-skeleton)[data-shape='circle'] {
+    --skdx-skeleton-radius: var(--skdx-radius-full);
+    aspect-ratio: 1;
+  }
+
+  /* A screen of forty placeholders animates forty times. This is the way off
+     that, and off the animation generally, without a consumer having to
+     out-specify the `animation` shorthand above. Skin-layer only: it changes no
+     markup and no semantics, so it is not a component prop. */
+  :where(.skdx-skeleton)[data-animation='none'] {
+    animation: none;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-skeleton) {
+      background-color: GrayText;
+    }
+  }
+}

package/dist/skins-src/components/skip-link.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';
+
+/**
+ * The bypass-block recipe class: put it on the Link that is the first tab stop,
+ * jumping past repeated navigation (WCAG 2.4.1). No component renders it — it is
+ * the one class the skin owns for markup the consumer composes. Clipped, never
+ * `display: none`, which would remove it from the tab order.
+ */
+@layer skdx-components {
+  :where(.skdx-skip-link) {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-start: 0;
+    z-index: var(--skdx-z-index-max);
+
+    /* Clipped rather than removed, so it keeps its place in the tab order. */
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  :where(.skdx-skip-link):focus-visible,
+  :where(.skdx-skip-link):focus {
+    inline-size: auto;
+    block-size: auto;
+    overflow: visible;
+    clip-path: none;
+
+    margin: var(--skdx-space-2);
+    padding-inline: var(--skdx-space-4);
+    padding-block: var(--skdx-space-2);
+
+    color: var(--skdx-color-action-primary-text);
+    background-color: var(--skdx-color-action-primary-bg);
+    border-radius: var(--skdx-radius-md);
+    box-shadow: var(--skdx-shadow-lg);
+
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-medium);
+    text-decoration: none;
+  }
+}

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

@@ -0,0 +1,164 @@
+/*
+ * 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';
+
+/**
+ * Slider — pick a value (or a range) along a track. Thumb and Range position
+ * themselves with inline logical insets, so both need `position: absolute` from
+ * this stylesheet to take effect. Nothing here may reintroduce a physical
+ * `left`/`right`: under `dir="rtl"` the start of the track is its right edge.
+ */
+@layer skdx-components {
+  /* Size ladder declared as custom properties on the root; `md` gets
+     its own selector so a nested slider can be sized back down to the default rung. */
+  :where(.skdx-slider),
+  :where(.skdx-slider)[data-size='md'] {
+    --skdx-slider-control-size: var(--skdx-control-height-md);
+    --skdx-slider-thumb-size: var(--skdx-indicator-size-md);
+    --skdx-slider-track-size: var(--skdx-space-2);
+  }
+
+  :where(.skdx-slider)[data-size='sm'] {
+    --skdx-slider-control-size: var(--skdx-control-height-sm);
+    --skdx-slider-thumb-size: var(--skdx-indicator-size-sm);
+    --skdx-slider-track-size: var(--skdx-space-1);
+  }
+
+  :where(.skdx-slider)[data-size='lg'] {
+    --skdx-slider-control-size: var(--skdx-control-height-lg);
+    --skdx-slider-thumb-size: var(--skdx-indicator-size-lg);
+    --skdx-slider-track-size: var(--skdx-space-3);
+  }
+
+  :where(.skdx-slider) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    /* Room for the thumb to overhang the track without being clipped. */
+    min-block-size: var(--skdx-slider-control-size);
+    /* The track's `flex: 1` means a flex-basis of 0, so a content-sized container
+       collapses to 0 inline size without an explicit length here. */
+    min-inline-size: 10rem;
+    touch-action: none;
+  }
+
+  :where(.skdx-slider)[data-orientation='vertical'] {
+    flex-direction: column;
+    min-block-size: 10rem;
+    min-inline-size: var(--skdx-slider-control-size);
+  }
+
+  :where(.skdx-slider__track) {
+    position: relative;
+    flex: 1;
+    block-size: var(--skdx-slider-track-size);
+    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). Same
+       recipe as the switch's off-state track. */
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-strong);
+    border-radius: var(--skdx-radius-full);
+  }
+
+  :where(.skdx-slider)[data-orientation='vertical'] :where(.skdx-slider__track) {
+    inline-size: var(--skdx-slider-track-size);
+    block-size: auto;
+  }
+
+  :where(.skdx-slider__range) {
+    position: absolute;
+    block-size: 100%;
+    background-color: var(--skdx-color-track-fill);
+    border-radius: inherit;
+  }
+
+  :where(.skdx-slider)[data-orientation='vertical'] :where(.skdx-slider__range) {
+    inline-size: 100%;
+    block-size: auto;
+  }
+
+  :where(.skdx-slider__thumb) {
+    position: absolute;
+    display: block;
+    inline-size: var(--skdx-slider-thumb-size);
+    block-size: var(--skdx-slider-thumb-size);
+
+    background-color: var(--skdx-color-surface-page);
+    border: var(--skdx-border-width-thick) solid var(--skdx-color-track-fill);
+    border-radius: var(--skdx-radius-full);
+    box-shadow: var(--skdx-shadow-sm);
+
+    cursor: grab;
+    touch-action: none;
+  }
+
+  :where(.skdx-slider__thumb)[data-dragging] {
+    cursor: grabbing;
+    /* Grows slightly so the thumb stays visible under the fingertip. */
+    scale: 1.1;
+  }
+
+  :where(.skdx-slider)[data-disabled] :where(.skdx-slider__range) {
+    background-color: var(--skdx-color-border-disabled);
+  }
+
+  :where(.skdx-slider)[data-disabled] :where(.skdx-slider__thumb) {
+    border-color: var(--skdx-color-border-disabled);
+    cursor: not-allowed;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-slider__range) {
+      background-color: Highlight;
+    }
+
+    :where(.skdx-slider__thumb) {
+      border-color: CanvasText;
+      background-color: Canvas;
+    }
+  }
+
+  /* A mark is a label anchored by the inline offset `SliderMark` computes. The
+     tick is drawn via `::before` so the label can size to its own text. */
+  :where(.skdx-slider__mark) {
+    position: absolute;
+    inset-block-start: 100%;
+    translate: -50% 0;
+    padding-block-start: var(--skdx-space-2);
+    font-size: var(--skdx-font-size-xs);
+    line-height: 1;
+    color: var(--skdx-color-text-muted);
+    white-space: nowrap;
+  }
+
+  :where(.skdx-slider__mark)::before {
+    content: '';
+    position: absolute;
+    inset-inline-start: 50%;
+    inset-block-start: 0;
+    translate: -50% 0;
+    inline-size: var(--skdx-border-width-thin);
+    block-size: var(--skdx-space-2);
+    background-color: var(--skdx-color-border-strong);
+  }
+
+  :where(.skdx-slider)[data-orientation='vertical'] :where(.skdx-slider__mark) {
+    inset-block-start: auto;
+    inset-inline-start: 100%;
+    translate: 0 -50%;
+    padding-block-start: 0;
+    padding-inline-start: var(--skdx-space-2);
+  }
+
+  :where(.skdx-slider)[data-orientation='vertical'] :where(.skdx-slider__mark)::before {
+    inset-inline-start: 0;
+    inset-block-start: 50%;
+    translate: 0 -50%;
+    inline-size: var(--skdx-space-2);
+    block-size: var(--skdx-border-width-thin);
+  }
+}

package/dist/skins-src/components/speed-dial.css

@@ -0,0 +1,162 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_overlay.css';
+
+/* No root rule: React's root renders no element. Sizes are set on the part elements. */
+@layer skdx-components {
+  :where(.skdx-speed-dial__trigger) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    inline-size: var(--skdx-control-height-lg);
+    block-size: var(--skdx-control-height-lg);
+
+    color: var(--skdx-color-action-primary-text);
+    background-color: var(--skdx-color-action-primary-bg);
+    border: 0;
+    border-radius: var(--skdx-radius-full);
+    box-shadow: var(--skdx-shadow-lg);
+    cursor: pointer;
+
+    /* Same z-index as Content, above the scrim: a second click on the trigger must reach the button, not the scrim underneath. */
+    position: relative;
+    z-index: var(--skdx-z-index-popover);
+  }
+
+  /* Signals with elevation and a rim, not a fill shift, as button.css does for the primary variant. */
+  :where(.skdx-speed-dial__trigger):hover:not([data-disabled]) {
+    box-shadow: var(--skdx-shadow-overlay);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-action-primary-border-hover);
+  }
+
+  :where(.skdx-speed-dial__content) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-2);
+    background: transparent;
+    border: 0;
+    box-shadow: none;
+    min-inline-size: 0;
+  }
+
+  /* Angular/Web Components keep the closed fan mounted and [hidden]; author display: flex above beats it on origin, so it must be restated here. */
+  :where(.skdx-speed-dial__content)[hidden] {
+    display: none;
+  }
+
+  /* Not in _overlay.css: this scrim isn't modal. `pointer-events: none` because dismissal
+     is a document-level listener; z-index sits below the popover's so the fan paints over it. */
+  :where(.skdx-speed-dial__overlay) {
+    position: fixed;
+    inset: 0;
+    background-color: var(--skdx-color-surface-overlay);
+    z-index: var(--skdx-z-index-overlay);
+    pointer-events: none;
+  }
+
+  /* Same correction as .skdx-speed-dial__content[hidden] above. */
+  :where(.skdx-speed-dial__overlay)[hidden] {
+    display: none;
+  }
+
+  :where(.skdx-speed-dial__overlay)[data-state='open'] {
+    animation: skdx-fade-in var(--skdx-motion-duration-normal) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-speed-dial__overlay)[data-state='closed'] {
+    animation: skdx-fade-out var(--skdx-motion-duration-fast) var(--skdx-motion-easing-exit);
+    /* skdx-fade-out has only a to frame, so without this it snaps back to opaque for a frame before unmounting. */
+    animation-fill-mode: forwards;
+  }
+
+  :where(.skdx-speed-dial__item) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+
+    inline-size: var(--skdx-control-height-md);
+    block-size: var(--skdx-control-height-md);
+    padding-inline: var(--skdx-space-1);
+
+    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-radius-full);
+    box-shadow: var(--skdx-shadow-md);
+    cursor: pointer;
+
+    font-size: var(--skdx-font-size-xs);
+    white-space: nowrap;
+  }
+
+  :where(.skdx-speed-dial__item):hover:not([data-disabled]) {
+    background-color: var(--skdx-color-surface-hover);
+    border-color: var(--skdx-color-border-strong);
+  }
+
+  /* Absolutely positioned so its width is never clamped to the item's circle: the item no longer clips it, and it reads beside the item instead of overlapping the fan's own stacking axis. */
+  :where(.skdx-speed-dial__item-label) {
+    position: absolute;
+    top: 50%;
+    inset-inline-end: 100%;
+    transform: translateY(-50%);
+    margin-inline-end: var(--skdx-space-2);
+
+    padding-inline: var(--skdx-space-2);
+    padding-block: var(--skdx-space-1);
+    color: var(--skdx-color-text-on-inverse);
+    background-color: var(--skdx-color-surface-inverse);
+    border-radius: var(--skdx-radius-sm);
+    font-size: var(--skdx-font-size-xs);
+    white-space: nowrap;
+  }
+
+  /* left/right fans stack items along the inline axis, so the label moves to the cross (block) axis instead. */
+  :where(.skdx-speed-dial__content[data-direction='left']) .skdx-speed-dial__item-label,
+  :where(.skdx-speed-dial__content[data-direction='right']) .skdx-speed-dial__item-label {
+    top: auto;
+    inset-inline-end: auto;
+    inset-inline-start: 50%;
+    inset-block-end: 100%;
+    transform: translateX(-50%);
+    margin-inline-end: 0;
+    margin-block-end: var(--skdx-space-2);
+  }
+
+  /* data-size goes on the trigger/item elements themselves, not a root: this family has no root element, and Content is portalled to document.body. */
+  :where(.skdx-speed-dial__trigger)[data-size='sm'] {
+    inline-size: var(--skdx-control-height-md);
+    block-size: var(--skdx-control-height-md);
+  }
+
+  :where(.skdx-speed-dial__trigger)[data-size='md'] {
+    inline-size: var(--skdx-control-height-lg);
+    block-size: var(--skdx-control-height-lg);
+  }
+
+  :where(.skdx-speed-dial__trigger)[data-size='lg'] {
+    inline-size: calc(var(--skdx-control-height-lg) * 1.25);
+    block-size: calc(var(--skdx-control-height-lg) * 1.25);
+  }
+
+  :where(.skdx-speed-dial__item)[data-size='sm'] {
+    inline-size: var(--skdx-control-height-sm);
+    block-size: var(--skdx-control-height-sm);
+  }
+
+  :where(.skdx-speed-dial__item)[data-size='md'] {
+    inline-size: var(--skdx-control-height-md);
+    block-size: var(--skdx-control-height-md);
+  }
+
+  :where(.skdx-speed-dial__item)[data-size='lg'] {
+    inline-size: var(--skdx-control-height-lg);
+    block-size: var(--skdx-control-height-lg);
+  }
+}

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

@@ -0,0 +1,59 @@
+/*
+ * 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';
+
+/**
+ * Spinner — an indeterminate busy indicator. A ring with a contrasting segment,
+ * so it stays legible when `prefers-reduced-motion` stills the rotation. Every
+ * ring rule is gated on the spinner having no custom graphic — via `:has()` on
+ * "any child that is not the label part", because the visually hidden label
+ * means `:empty` would match no spinner at all.
+ */
+@layer skdx-components {
+  :where(.skdx-spinner) {
+    display: inline-block;
+    flex: none;
+
+    --skdx-spinner-track-color: var(--skdx-color-track);
+    /* `currentColor` stays the fallback: inheriting the surrounding ink is the
+       behaviour MUI's `color="inherit"` exists to opt into, and a spinner inside
+       a primary button gets it here for free. */
+    --skdx-spinner-indicator-color: currentColor;
+    --skdx-spinner-track-width: var(--skdx-border-width-thick);
+    --skdx-spinner-speed: var(--skdx-motion-duration-slow);
+  }
+
+  :where(.skdx-spinner):not(:has(> :not(.skdx-spinner__label))) {
+    inline-size: var(--skdx-icon-size-md);
+    block-size: var(--skdx-icon-size-md);
+
+    border: var(--skdx-spinner-track-width) solid var(--skdx-spinner-track-color);
+    /* The leading edge. */
+    border-block-start-color: var(--skdx-spinner-indicator-color);
+    border-radius: var(--skdx-radius-full);
+
+    animation: skdx-spin var(--skdx-spinner-speed) var(--skdx-motion-easing-linear) infinite;
+  }
+
+  :where(.skdx-spinner):not(:has(> :not(.skdx-spinner__label)))[data-size='sm'] {
+    inline-size: var(--skdx-icon-size-sm);
+    block-size: var(--skdx-icon-size-sm);
+    --skdx-spinner-track-width: var(--skdx-border-width-thin);
+  }
+
+  :where(.skdx-spinner):not(:has(> :not(.skdx-spinner__label)))[data-size='lg'] {
+    inline-size: var(--skdx-icon-size-lg);
+    block-size: var(--skdx-icon-size-lg);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-spinner):not(:has(> :not(.skdx-spinner__label))) {
+      border-color: CanvasText;
+      border-block-start-color: Highlight;
+    }
+  }
+}