@skdx/docs-kit 0.35.0

package/dist/skins-src/components/split-button.css

@@ -0,0 +1,167 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_actuator.css';
+
+/* data-variant/data-size go on .skdx-split-button once, not on each half, so the two can't disagree. */
+@layer skdx-components {
+  :where(.skdx-split-button) {
+    display: inline-flex;
+    align-items: stretch;
+  }
+
+  /* Leads, so only its outer corners round. */
+  :where(.skdx-split-button__action) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  :where(.skdx-split-button__trigger) {
+    inline-size: var(--skdx-split-button-trigger-size, var(--skdx-control-height-md));
+    padding-inline: 0;
+
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+    /* Collapses the seam so the join is one line, not two. */
+    margin-inline-start: calc(var(--skdx-border-width-thin) * -1);
+  }
+
+  /* Declared on the group, not per half, so it carries across the display: contents host Angular renders between them. */
+  :where(.skdx-split-button)[data-size='sm'] {
+    --skdx-split-button-trigger-size: var(--skdx-control-height-sm);
+  }
+
+  :where(.skdx-split-button)[data-size='md'] {
+    --skdx-split-button-trigger-size: var(--skdx-control-height-md);
+  }
+
+  :where(.skdx-split-button)[data-size='lg'] {
+    --skdx-split-button-trigger-size: var(--skdx-control-height-lg);
+  }
+
+  :where(.skdx-split-button)[data-size='sm']
+    :where(.skdx-split-button__action, .skdx-split-button__trigger) {
+    block-size: var(--skdx-control-height-sm);
+    gap: var(--skdx-control-gap-sm);
+    font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-split-button)[data-size='sm'] :where(.skdx-split-button__action) {
+    padding-inline: var(--skdx-control-padding-sm);
+  }
+
+  :where(.skdx-split-button)[data-size='md']
+    :where(.skdx-split-button__action, .skdx-split-button__trigger) {
+    block-size: var(--skdx-control-height-md);
+    gap: var(--skdx-control-gap-md);
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-split-button)[data-size='md'] :where(.skdx-split-button__action) {
+    padding-inline: var(--skdx-control-padding-md);
+  }
+
+  :where(.skdx-split-button)[data-size='lg']
+    :where(.skdx-split-button__action, .skdx-split-button__trigger) {
+    block-size: var(--skdx-control-height-lg);
+    gap: var(--skdx-control-gap-lg);
+    font-size: var(--skdx-font-size-md);
+  }
+
+  :where(.skdx-split-button)[data-size='lg'] :where(.skdx-split-button__action) {
+    padding-inline: var(--skdx-control-padding-lg);
+  }
+
+  :where(.skdx-split-button)[data-variant='secondary']
+    :where(.skdx-split-button__action, .skdx-split-button__trigger) {
+    color: var(--skdx-color-action-secondary-text);
+    background-color: var(--skdx-color-action-secondary-bg);
+    border-color: var(--skdx-color-action-secondary-border);
+  }
+
+  :where(.skdx-split-button)[data-variant='secondary']
+    :where(.skdx-split-button__action, .skdx-split-button__trigger):hover:not(
+      :disabled,
+      [data-disabled],
+      [aria-disabled='true']
+    ) {
+    background-color: var(--skdx-color-action-secondary-bg-hover);
+    border-color: var(--skdx-color-field-border-hover);
+  }
+
+  :where(.skdx-split-button)[data-variant='primary']
+    :where(.skdx-split-button__action, .skdx-split-button__trigger) {
+    color: var(--skdx-color-action-primary-text);
+    background-color: var(--skdx-color-action-primary-bg);
+    border-color: var(--skdx-color-action-primary-border);
+  }
+
+  /* Elevation and a darker rim, not a shifted fill — same resolution as button.css's primary variant. */
+  :where(.skdx-split-button)[data-variant='primary']
+    :where(.skdx-split-button__action, .skdx-split-button__trigger):hover:not(
+      :disabled,
+      [data-disabled],
+      [aria-disabled='true']
+    ) {
+    background-color: var(--skdx-color-action-primary-bg);
+    border-color: var(--skdx-color-action-primary-border-hover);
+    box-shadow: var(--skdx-shadow-sm);
+  }
+
+  :where(.skdx-split-button)[data-variant='danger']
+    :where(.skdx-split-button__action, .skdx-split-button__trigger) {
+    color: var(--skdx-color-action-danger-text);
+    background-color: var(--skdx-color-action-danger-bg);
+    border-color: var(--skdx-color-action-danger-border);
+  }
+
+  :where(.skdx-split-button)[data-variant='danger']
+    :where(.skdx-split-button__action, .skdx-split-button__trigger):hover:not(
+      :disabled,
+      [data-disabled],
+      [aria-disabled='true']
+    ) {
+    background-color: var(--skdx-color-action-danger-bg-hover);
+    border-color: var(--skdx-color-action-danger-bg-hover);
+  }
+
+  :where(.skdx-split-button)[data-variant='outline']
+    :where(.skdx-split-button__action, .skdx-split-button__trigger) {
+    color: var(--skdx-color-action-outline-text);
+    background-color: transparent;
+    border-color: var(--skdx-color-action-outline-border);
+  }
+
+  :where(.skdx-split-button)[data-variant='outline']
+    :where(.skdx-split-button__action, .skdx-split-button__trigger):hover:not(
+      :disabled,
+      [data-disabled],
+      [aria-disabled='true']
+    ) {
+    background-color: var(--skdx-color-action-outline-bg-hover);
+    border-color: var(--skdx-color-action-outline-border);
+  }
+
+  :where(.skdx-split-button)[data-variant='ghost']
+    :where(.skdx-split-button__action, .skdx-split-button__trigger) {
+    color: var(--skdx-color-action-ghost-text);
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  :where(.skdx-split-button)[data-variant='ghost'] :where(.skdx-split-button__trigger) {
+    border-inline-start-color: var(--skdx-color-border-default);
+  }
+
+  :where(.skdx-split-button)[data-variant='ghost']
+    :where(.skdx-split-button__action, .skdx-split-button__trigger):hover:not(
+      :disabled,
+      [data-disabled],
+      [aria-disabled='true']
+    ) {
+    background-color: var(--skdx-color-action-ghost-bg-hover);
+  }
+}

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

@@ -0,0 +1,117 @@
+/*
+ * 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';
+
+/** StatCard — a KPI tile: a label, a value, an optional trend, description, progress and visual region. */
+@layer skdx-components {
+  :where(.skdx-stat-card) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-3);
+
+    padding: var(--skdx-space-4);
+
+    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-sm);
+    color: var(--skdx-color-text-default);
+  }
+
+  :where(.skdx-stat-card__header) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-stat-card__icon) {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-stat-card__label) {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-stat-card__actions) {
+    flex: none;
+    margin-inline-start: auto;
+  }
+
+  :where(.skdx-stat-card__body) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-stat-card__value) {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+    /* Reserves the value line's height so the skeleton swap causes no layout shift. */
+    min-block-size: calc(var(--skdx-font-size-2xl) * var(--skdx-font-line-height-tight));
+
+    font-size: var(--skdx-font-size-2xl);
+    font-weight: var(--skdx-font-weight-semibold);
+    line-height: var(--skdx-font-line-height-tight);
+  }
+
+  :where(.skdx-stat-card__trend) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-1);
+
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-stat-card__trend)[data-sentiment='positive'] {
+    color: var(--skdx-color-text-success);
+  }
+
+  :where(.skdx-stat-card__trend)[data-sentiment='negative'] {
+    color: var(--skdx-color-text-danger);
+  }
+
+  :where(.skdx-stat-card__trend)[data-sentiment='neutral'] {
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-stat-card__trend-icon) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :where(.skdx-stat-card__description) {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+
+  :where(.skdx-stat-card__visual) {
+    margin-block-start: var(--skdx-space-3);
+  }
+
+  :where(.skdx-stat-card__footer) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-stat-card) {
+      border-color: CanvasText;
+    }
+  }
+}

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

@@ -0,0 +1,153 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_actuator.css';
+@import '../base.css';
+
+/**
+ * Stepper — progress through a multi-stage flow. Only `root`, `item` and `trigger`
+ * are components; the marker glyph, caption and connector are class hooks on
+ * consumer-supplied content, and the derived `items` anatomy emits the same classes.
+ */
+@layer skdx-components {
+  :where(.skdx-stepper) {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--skdx-space-2);
+    /* Items refuse to shrink below their label (see `min-inline-size` below),
+       so a row narrower than its steps scrolls instead of silently clipping. */
+    overflow-x: auto;
+  }
+
+  :where(.skdx-stepper)[data-orientation='vertical'] {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  /* `max-content` floors the item at its label's width, so a squeezed row
+     overflows before a word breaks mid-label. */
+  :where(.skdx-stepper__item) {
+    display: flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+    flex: 1;
+    min-inline-size: max-content;
+  }
+
+  /* Vertical mode stacks the trigger above its own separator; a row layout would
+     otherwise put the connector beside the label instead of below it. */
+  :where(.skdx-stepper)[data-orientation='vertical'] :where(.skdx-stepper__item) {
+    flex-direction: column;
+    align-items: stretch;
+    min-inline-size: 0;
+  }
+
+  :where(.skdx-stepper__description) {
+    font-size: var(--skdx-font-size-xs);
+    color: var(--skdx-color-text-muted);
+  }
+
+  :where(.skdx-stepper__indicator) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+
+    inline-size: var(--skdx-control-height-sm);
+    block-size: var(--skdx-control-height-sm);
+
+    color: var(--skdx-color-text-muted);
+    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);
+
+    font-size: var(--skdx-font-size-xs);
+    font-weight: var(--skdx-font-weight-semibold);
+    font-variant-numeric: tabular-nums;
+  }
+
+  :where(.skdx-stepper__item)[data-state='current'] :where(.skdx-stepper__indicator) {
+    color: var(--skdx-color-action-primary-text);
+    background-color: var(--skdx-color-action-primary-bg);
+    border-color: var(--skdx-color-action-primary-bg);
+  }
+
+  :where(.skdx-stepper__item)[data-state='completed'] :where(.skdx-stepper__indicator) {
+    color: var(--skdx-color-status-success-text);
+    background-color: var(--skdx-color-status-success-bg);
+    border-color: var(--skdx-color-status-success-border);
+  }
+
+  /* The failed step reads `data-state`, not `data-status`: `_status.css` owns
+     that attribute repo-wide for severity. */
+  :where(.skdx-stepper__item)[data-state='error'] :where(.skdx-stepper__indicator) {
+    color: var(--skdx-color-status-danger-text);
+    background-color: var(--skdx-color-status-danger-bg);
+    border-color: var(--skdx-color-status-danger-border);
+  }
+
+  :where(.skdx-stepper__item)[data-state='error'] :where(.skdx-stepper__title) {
+    color: var(--skdx-color-status-danger-text);
+  }
+
+  :where(.skdx-stepper__item)[data-disabled] :where(.skdx-stepper__indicator) {
+    color: var(--skdx-color-text-disabled);
+  }
+
+  /* The connector. `flex: 1` renders 0 wide inside a shrink-to-fit stepper, so
+     the floor keeps the line visible there; a full-width stepper still stretches it. */
+  :where(.skdx-stepper__separator) {
+    flex: 1;
+    min-inline-size: var(--skdx-space-6);
+    block-size: var(--skdx-border-width-thin);
+    background-color: var(--skdx-color-separator);
+  }
+
+  :where(.skdx-stepper)[data-orientation='vertical'] :where(.skdx-stepper__separator) {
+    inline-size: var(--skdx-border-width-thin);
+    block-size: var(--skdx-space-4);
+    margin-inline-start: calc(var(--skdx-control-height-sm) / 2);
+  }
+
+  :where(.skdx-stepper__title) {
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-medium);
+    color: var(--skdx-color-text-default);
+    overflow-wrap: normal;
+  }
+
+  /* Strips the `_actuator.css` button chrome on layer order — the indicator circle
+     is the affordance. The shared focus treatment a layer down deliberately still applies. */
+  :where(.skdx-stepper__trigger) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+
+    block-size: auto;
+    min-block-size: var(--skdx-target-min);
+    padding-inline: 0;
+
+    color: inherit;
+    background-color: transparent;
+    border: 0;
+    border-radius: var(--skdx-radius-sm);
+    text-align: start;
+    white-space: normal;
+    /* Host pages commonly reset `overflow-wrap: anywhere` on body/prose,
+       which inherits in and breaks a squeezed label mid-word instead of
+       overflowing. */
+    overflow-wrap: normal;
+  }
+
+  /* Blocked is not disabled: a linear-mode-refused step is `aria-disabled` and stays
+     focusable, so it is muted — not the disabled ink, and no `not-allowed` cursor. */
+  :where(.skdx-stepper__trigger)[aria-disabled='true']:not([data-disabled], :disabled) {
+    color: var(--skdx-color-text-muted);
+    background-color: transparent;
+    border-color: transparent;
+    cursor: default;
+  }
+}

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

@@ -0,0 +1,155 @@
+/*
+ * 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';
+
+/**
+ * Switch — an immediate on/off toggle, distinct from Checkbox: a checkbox
+ * states an intention a form submit later commits, a switch takes effect at
+ * once.
+ */
+@layer skdx-components {
+  :where(.skdx-switch) {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-space-2);
+    flex: none;
+
+    /* Shared by the root and the ::before pill (labelled case, below), so checked/hover/disabled only ever set these two once. */
+    --skdx-switch-fill: var(--skdx-color-track);
+    --skdx-switch-border: var(--skdx-color-border-strong);
+
+    /* Own metric, not --skdx-indicator-size-md: a switch is not a scaled-up checkbox. */
+    --skdx-switch-track-size: 1rem;
+
+    inline-size: calc(var(--skdx-switch-track-size) * 2);
+    block-size: var(--skdx-switch-track-size);
+    /* No padding: the 2px rim below is what insets the thumb now. */
+    padding: 0;
+
+    background-color: var(--skdx-switch-fill);
+    /* Border, not fill, is the boundary: an unchecked track measures below 3:1 against the page in most themes (WCAG 2.2 §1.4.11). */
+    border: var(--skdx-border-width-thick) solid var(--skdx-switch-border);
+    border-radius: var(--skdx-radius-full);
+    cursor: pointer;
+
+    transition: background-color var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+  }
+
+  /* Pill moves to ::before (fixed size), so the root is free to grow around the label. */
+  :where(.skdx-switch):has(.skdx-switch__label) {
+    inline-size: auto;
+    padding: 0;
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  :where(.skdx-switch):has(.skdx-switch__label)::before {
+    content: '';
+    flex: none;
+    inline-size: calc(var(--skdx-switch-track-size) * 2);
+    block-size: var(--skdx-switch-track-size);
+    background-color: var(--skdx-switch-fill);
+    border: var(--skdx-border-width-thick) solid var(--skdx-switch-border);
+    border-radius: var(--skdx-radius-full);
+  }
+
+  /* Block inset stays auto so align-items: center still centers it; inset-inline-start mirrors under dir="rtl". */
+  :where(.skdx-switch):has(.skdx-switch__label) :where(.skdx-switch__thumb) {
+    position: absolute;
+    inset-inline-start: var(--skdx-border-width-thick);
+  }
+
+  /* Fills the track's content box; the 2px rim is subtracted from each edge. */
+  :where(.skdx-switch__thumb) {
+    inline-size: calc(var(--skdx-switch-track-size) - var(--skdx-border-width-thick) * 2);
+    block-size: calc(var(--skdx-switch-track-size) - var(--skdx-border-width-thick) * 2);
+
+    background-color: var(--skdx-color-surface-page);
+    border-radius: var(--skdx-radius-full);
+    box-shadow: var(--skdx-shadow-sm);
+
+    transition: translate var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+  }
+
+  /* Every metric derives from --skdx-switch-track-size. */
+  :where(.skdx-switch)[data-size='sm'] {
+    --skdx-switch-track-size: 0.75rem;
+  }
+
+  :where(.skdx-switch)[data-size='lg'] {
+    --skdx-switch-track-size: 1.25rem;
+  }
+
+  :where(.skdx-switch)[data-state='checked'] {
+    --skdx-switch-fill: var(--skdx-color-selection-bg);
+    --skdx-switch-border: var(--skdx-color-selection-bg);
+  }
+
+  /* translate has no logical equivalent, so [dir='rtl'] below mirrors it explicitly — the one place needing a direction selector instead of logical properties. */
+  :where(.skdx-switch)[data-state='checked'] :where(.skdx-switch__thumb) {
+    translate: var(--skdx-switch-track-size);
+  }
+
+  :where([dir='rtl']) :where(.skdx-switch)[data-state='checked'] :where(.skdx-switch__thumb) {
+    translate: calc(var(--skdx-switch-track-size) * -1);
+  }
+
+  /* Border strengthens on hover unchecked (it's the only edge); checked, the fill carries the state instead. */
+  :where(.skdx-switch):hover:not([data-disabled], [data-readonly]) {
+    --skdx-switch-border: var(--skdx-color-border-accent);
+  }
+
+  /** Read-only keeps colours, contrast and focus ring; only cursor and hover border are withdrawn. */
+  :where(.skdx-switch)[data-readonly] {
+    cursor: default;
+  }
+
+  /* Checked, the fill stays fixed (thumb reads against it); the rim is free to deepen instead. */
+  :where(.skdx-switch)[data-state='checked']:hover:not([data-disabled], [data-readonly]) {
+    --skdx-switch-border: var(--skdx-color-border-strong);
+  }
+
+  :where(.skdx-switch)[data-disabled] {
+    --skdx-switch-fill: var(--skdx-color-border-disabled);
+    cursor: not-allowed;
+  }
+
+  :where(.skdx-switch)[data-disabled] :where(.skdx-switch__thumb) {
+    background-color: var(--skdx-color-surface-disabled);
+    box-shadow: none;
+  }
+
+  /** Forced-colours drops the track fill, so the thumb's colour swap carries the on/off state instead. */
+  @media (forced-colors: active) {
+    :where(.skdx-switch) {
+      --skdx-switch-border: CanvasText;
+      --skdx-switch-fill: Canvas;
+    }
+
+    :where(.skdx-switch)[data-state='checked'] {
+      --skdx-switch-fill: Highlight;
+    }
+
+    :where(.skdx-switch__thumb) {
+      background-color: CanvasText;
+    }
+
+    :where(.skdx-switch)[data-state='checked'] :where(.skdx-switch__thumb) {
+      background-color: HighlightText;
+    }
+  }
+
+  :where(.skdx-switch__label) {
+    font-size: var(--skdx-font-size-sm);
+    color: var(--skdx-color-text-default);
+  }
+
+  :where(.skdx-switch)[data-disabled] :where(.skdx-switch__label) {
+    color: var(--skdx-color-text-disabled);
+  }
+}