@skdx/docs-kit 0.35.0

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

@@ -0,0 +1,115 @@
+/*
+ * 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';
+
+/** Form — layout rhythm for a set of Fields, plus the error summary (WCAG 3.3.1: focus moves here on failed submit). */
+@layer skdx-components {
+  :where(.skdx-form) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-4);
+  }
+
+  /* Density — same hook as Field and Table. Skin-layer only:
+     no behaviour/state/ARIA change. */
+  :where(.skdx-form)[data-density='compact'] {
+    gap: var(--skdx-space-2);
+  }
+
+  :where(.skdx-form)[data-density='compact'] :where(.skdx-form__field) {
+    gap: var(--skdx-space-1);
+  }
+
+  :where(.skdx-form__error-summary) {
+    /* Painted first regardless of DOM position: Angular renders it after the
+       fields so change detection updates their messages before it scans for them. */
+    order: -1;
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-2);
+
+    padding: var(--skdx-space-3);
+
+    color: var(--skdx-color-status-danger-text);
+    background-color: var(--skdx-color-status-danger-bg);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-status-danger-border);
+    border-inline-start-width: var(--skdx-border-width-thicker);
+    border-radius: var(--skdx-radius-md);
+
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  /* Author `display: flex` above beats the UA's `[hidden]` rule on origin
+     alone; without this the empty alert paints on every unsubmitted form. */
+  :where(.skdx-form__error-summary)[hidden] {
+    display: none;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-form__error-summary) {
+      border-color: CanvasText;
+    }
+  }
+
+  :where(.skdx-form__field) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-field-gap);
+  }
+
+  :where(.skdx-form__label) {
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-medium);
+    color: var(--skdx-color-text-default);
+  }
+
+  :where(.skdx-form__control) {
+    color: var(--skdx-color-field-text);
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-form__control):not([type='checkbox']):not([type='radio']):not([role='checkbox']):not(
+      [role='radio']
+    ) {
+    inline-size: 100%;
+    block-size: var(--skdx-control-height-md);
+    padding-inline: var(--skdx-control-padding-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-md);
+  }
+
+  /* Never colour alone — wired to the control with `aria-describedby` so it's announced too. */
+  :where(.skdx-form__message) {
+    font-size: var(--skdx-font-size-xs);
+    line-height: var(--skdx-font-line-height-normal);
+    color: var(--skdx-color-text-danger);
+  }
+
+  /* Underlined since it sits on a coloured wash where colour alone can't mark
+     a link. `inline-block`, not `inline`: transforms (the shared pressed cue)
+     don't apply to non-replaced inline boxes. */
+  :where(.skdx-form__error-summary-link) {
+    display: inline-block;
+    color: inherit;
+    text-decoration: underline;
+  }
+
+  :where(.skdx-form__error-summary-list) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-space-1);
+    margin: 0;
+    padding-inline-start: var(--skdx-space-4);
+  }
+
+  :where(.skdx-form__error-summary-title) {
+    font-weight: var(--skdx-font-weight-semibold);
+  }
+}

package/dist/skins-src/components/heading.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.
+ */
+
+/**
+ * Heading — the visual scale, decoupled from the outline level. `data-size` and
+ * the rendered `h1`–`h6` are independent so type scale never bends the outline.
+ */
+@layer skdx-components {
+  :where(.skdx-heading) {
+    color: var(--skdx-color-text-default);
+    font-family: var(--skdx-font-family);
+    font-size: var(--skdx-font-size-lg);
+    font-weight: var(--skdx-font-weight-semibold);
+    line-height: var(--skdx-font-line-height-tight);
+    letter-spacing: var(--skdx-font-letter-spacing-tight);
+    /* The browser's own h1–h6 margins would make the size attribute change the
+       spacing too, which is a second axis nobody asked for. */
+    margin: 0;
+  }
+
+  /* `md` restates the base rule, so a consumer writing it gets what they asked
+     for rather than the base by accident. */
+  :where(.skdx-heading)[data-size='md'] {
+    font-size: var(--skdx-font-size-lg);
+  }
+  :where(.skdx-heading)[data-size='sm'] {
+    font-size: var(--skdx-font-size-md);
+  }
+  :where(.skdx-heading)[data-size='lg'] {
+    font-size: var(--skdx-font-size-xl);
+  }
+  :where(.skdx-heading)[data-size='xl'] {
+    font-size: var(--skdx-font-size-2xl);
+  }
+}

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

@@ -0,0 +1,43 @@
+/*
+ * 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';
+
+/**
+ * Image — a picture, or its fallback while one isn't showing. `fit`/`position`
+ * resolve to inline styles on the component, so this file sets neither; root and
+ * fallback share `--skdx-image-radius` because the fallback is a sibling of the `<img>`.
+ */
+@layer skdx-components {
+  :where(.skdx-image, .skdx-image__fallback) {
+    --skdx-image-radius: 0px;
+
+    border-radius: var(--skdx-image-radius);
+  }
+
+  :where(.skdx-image) {
+    display: block;
+    max-inline-size: 100%;
+  }
+
+  /* A placeholder ground while there is no decoded pixel to show yet, so the
+     space doesn't flash blank between mount and load. */
+  :where(.skdx-image)[data-loading-status='idle'],
+  :where(.skdx-image)[data-loading-status='loading'] {
+    background-color: var(--skdx-color-surface-sunken);
+  }
+
+  :where(.skdx-image__fallback) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 100%;
+    block-size: 100%;
+
+    background-color: var(--skdx-color-surface-sunken);
+    color: var(--skdx-color-text-muted);
+  }
+}

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

@@ -0,0 +1,76 @@
+/*
+ * 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';
+
+/**
+ * Kbd — a rendered key cap. Uses the mono stack: key names are read character
+ * by character, and a proportional font makes `Il1` ambiguous.
+ */
+@layer skdx-components {
+  :where(.skdx-kbd) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    min-inline-size: 1.5em;
+    padding-inline: var(--skdx-space-1);
+    padding-block: 0;
+
+    font-family: var(--skdx-font-family-mono);
+    font-size: var(--skdx-font-size-xs);
+    line-height: var(--skdx-font-line-height-tight);
+    white-space: nowrap;
+
+    color: var(--skdx-color-text-default);
+    background-color: var(--skdx-color-surface-sunken);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    /* Logical, so the "sitting on the page" edge stays on the correct side
+       when the document direction flips. */
+    border-block-end-width: var(--skdx-border-width-thick);
+    border-radius: var(--skdx-radius-sm);
+  }
+
+  /* Sizes here. Only `font-size` and `padding-inline` move: the cap's height
+     comes from the line box, so it sits on the baseline of the surrounding text. */
+  :where(.skdx-kbd)[data-size='sm'] {
+    padding-inline: calc(var(--skdx-space-1) / 2);
+    font-size: calc(var(--skdx-font-size-xs) * 0.85);
+  }
+
+  :where(.skdx-kbd)[data-size='md'] {
+    padding-inline: var(--skdx-space-1);
+    font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-kbd)[data-size='lg'] {
+    padding-inline: var(--skdx-space-2);
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  /* A key combination (nested `<kbd>`): the outer element is not a key, so everything
+     that draws a cap is unset. Descendant, not `>`: Angular's `display: contents` host
+     makes the inner cap a grandchild there. */
+  :where(.skdx-kbd):has(.skdx-kbd) {
+    gap: var(--skdx-space-1);
+    min-inline-size: 0;
+    padding-inline: 0;
+    background-color: transparent;
+    border: 0;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-kbd) {
+      border-color: CanvasText;
+    }
+
+    /* The outer element of a combination has no border to repaint — restoring
+       one here is exactly the double cap the rule above removes. */
+    :where(.skdx-kbd):has(.skdx-kbd) {
+      border-color: transparent;
+    }
+  }
+}

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

@@ -0,0 +1,45 @@
+/*
+ * 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';
+
+/** Label — the accessible name for a control, rendered. */
+@layer skdx-components {
+  :where(.skdx-label) {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--skdx-field-label-gap);
+
+    font-size: var(--skdx-font-size-sm);
+    font-weight: var(--skdx-font-weight-medium);
+    line-height: var(--skdx-font-line-height-tight);
+    color: var(--skdx-color-text-default);
+  }
+
+  /* Clicking a label focuses its control, so it gets the pointer that implies
+     that — but only when it is actually bound to one. */
+  :where(.skdx-label)[for] {
+    cursor: pointer;
+  }
+
+  /* Needed here regardless of the prop: a standalone `<skdx-label>` names a control
+     it may not even contain, so it cannot see whether that control is disabled.
+     A label inside a Field needs nothing here — the Field root emits
+     `data-disabled` and `field.css` colours `.skdx-field__label` from it, which
+     is the same result reached from the one element that does know. Declared in
+     `labelContract.styling.dataAttributes` so this rule stops being a selector
+     with nothing behind it and no documentation in front of it. */
+  :where(.skdx-label)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+    cursor: not-allowed;
+  }
+
+  /* Author-composed, not emitted by any package: the control carries
+     `required`/`aria-required`, and the author marks this `aria-hidden`. */
+  :where(.skdx-label__indicator) {
+    color: var(--skdx-color-text-danger);
+  }
+}

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

@@ -0,0 +1,72 @@
+/*
+ * 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';
+
+/**
+ * Link — inline text that navigates. `auto` underlines only inside running text,
+ * where the underline tells it apart from prose; standing alone, colour does that.
+ * `--skdx-link-color-hover`/`-visited` default to the resting colour.
+ */
+@layer skdx-components {
+  :where(.skdx-link) {
+    --skdx-link-color: var(--skdx-color-text-accent);
+    --skdx-link-color-hover: var(--skdx-link-color);
+    --skdx-link-color-visited: var(--skdx-link-color);
+    --skdx-link-underline-offset: var(--skdx-space-1);
+
+    color: var(--skdx-link-color);
+    text-underline-offset: var(--skdx-link-underline-offset);
+    border-radius: var(--skdx-radius-sm);
+  }
+
+  :where(.skdx-link):visited {
+    color: var(--skdx-link-color-visited);
+  }
+
+  :where(.skdx-link):hover {
+    color: var(--skdx-link-color-hover);
+  }
+
+  :where(.skdx-link):focus-visible {
+    outline: var(--skdx-focus-ring-width) solid var(--skdx-color-focus-ring);
+    outline-offset: var(--skdx-focus-ring-offset);
+  }
+
+  :where(.skdx-link)[data-underline='always'] {
+    text-decoration-line: underline;
+  }
+
+  /* Bare by default — the UA underlines a[href], so `auto` must opt out before
+     the running-text rule below opts back in. */
+  :where(.skdx-link)[data-underline='auto'] {
+    text-decoration-line: none;
+  }
+
+  :where(p, li, dd, td, th, blockquote, figcaption) :where(.skdx-link)[data-underline='auto'] {
+    text-decoration-line: underline;
+  }
+
+  :where(.skdx-link)[data-underline='none'] {
+    text-decoration-line: none;
+  }
+
+  :where(.skdx-link)[data-underline='hover'] {
+    text-decoration-line: none;
+  }
+
+  :where(.skdx-link)[data-underline='hover']:hover,
+  :where(.skdx-link)[data-underline='hover']:focus-visible {
+    text-decoration-line: underline;
+  }
+
+  /* Keeps whatever underline the `data-underline` mode gave it: inside running text the
+     disabled colour clears only 2.35:1 against the prose, so colour alone cannot mark it. */
+  :where(.skdx-link)[data-disabled] {
+    color: var(--skdx-color-text-disabled);
+    cursor: not-allowed;
+  }
+}

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

@@ -0,0 +1,104 @@
+/*
+ * 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';
+
+/**
+ * List / ListItem — a marked or plain run of items, or the label/value pairs of a
+ * description list. `markers={false}` only removes the marker here; the component
+ * adds `role="list"` back (WebKit 170179). An item's marker is replaced via
+ * `:has()` on its `indicator` part.
+ */
+@layer skdx-components {
+  :where(.skdx-list) {
+    --skdx-list-gap: 0px;
+    --skdx-list-marker-color: var(--skdx-color-text-muted);
+    --skdx-list-indent: var(--skdx-space-6);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-list-gap);
+
+    margin: 0;
+    padding-inline-start: var(--skdx-list-indent);
+    list-style-type: revert;
+  }
+
+  :where(.skdx-list)[data-markers='false'] {
+    list-style: none;
+    padding-inline-start: 0;
+  }
+
+  :where(.skdx-list__item)::marker {
+    color: var(--skdx-list-marker-color);
+  }
+
+  /* Sized like an inline icon everywhere else in the skin, and pulled in
+     from the text it stands in for the marker of. */
+  :where(.skdx-list__indicator) {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--skdx-icon-size-sm);
+    block-size: var(--skdx-icon-size-sm);
+    margin-inline-end: var(--skdx-space-2);
+    color: var(--skdx-list-marker-color);
+  }
+
+  /* The glyph replaces the marker rather than doubling it. */
+  :where(.skdx-list__item):has(> .skdx-list__indicator) {
+    list-style: none;
+  }
+
+  /* Description list — `data-orientation` is written only under as="dl", so its
+     presence is what swaps the run of items for a grid of pairs. Labels size to
+     content and values take the rest, so every value starts on the same axis
+     without a fixed label width. */
+  :where(.skdx-list)[data-orientation] {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    gap: var(--skdx-space-2) var(--skdx-space-4);
+    padding-inline-start: 0;
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  :where(.skdx-list)[data-orientation='vertical'] {
+    grid-template-columns: 1fr;
+    gap: var(--skdx-space-1);
+  }
+
+  /* Density — `comfortable` is the rhythm above and the default; `compact` is for
+     an inspector panel or a sidebar, where the same pairs have to read denser than
+     they do in a page header. `gap` and `font-size` only: anything else here would
+     start deciding the layout rather than its rhythm. */
+  :where(.skdx-list)[data-density='compact'] {
+    gap: var(--skdx-space-1) var(--skdx-space-2);
+    font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-list)[data-density='compact'][data-orientation='vertical'] {
+    gap: 0;
+  }
+
+  /* The pair wrapper participates in the parent grid rather than forming a new
+     one, so pairs stay aligned whether or not it is used. */
+  :where(.skdx-list)[data-orientation] > :where(.skdx-list__item) {
+    display: grid;
+    grid-column: 1 / -1;
+    grid-template-columns: subgrid;
+  }
+
+  :where(.skdx-list__term) {
+    color: var(--skdx-color-text-muted);
+    font-weight: var(--skdx-font-weight-medium);
+  }
+
+  :where(.skdx-list__description) {
+    margin: 0;
+    color: var(--skdx-color-text-default);
+  }
+}

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

@@ -0,0 +1,90 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+@import '_collection.css';
+
+/**
+ * Listbox — an always-visible list of selectable options. Not a popup: it sits
+ * in the page, so it takes a field's border rather than an overlay's shadow.
+ */
+@layer skdx-components {
+  :where(.skdx-listbox) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--skdx-item-gap);
+
+    padding: var(--skdx-overlay-padding);
+    overflow: auto;
+    --skdx-focus-ring-offset: var(--skdx-focus-ring-offset-inset);
+
+    background-color: var(--skdx-color-field-bg);
+    border: var(--skdx-border-width-thin) solid var(--skdx-color-border-default);
+    border-radius: var(--skdx-radius-md);
+  }
+
+  /* `orientation` is a component prop, not a skin attribute — it
+     changes which arrow-key pair roves — so the skin only ever reads it back,
+     never sets it. `column` above is the `vertical` default, restated here so
+     an author can key off `[data-orientation]` without special-casing the
+     unset case. */
+  :where(.skdx-listbox)[data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  :where(.skdx-listbox)[data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  :where(.skdx-listbox)[data-disabled] {
+    background-color: var(--skdx-color-field-bg-disabled);
+    cursor: not-allowed;
+  }
+
+  /* `data-size`, `data-density` and `data-shape` resolve on the root.
+     The defaults are the base rules above. */
+  :where(.skdx-listbox)[data-size='sm'] {
+    padding: var(--skdx-space-1);
+    font-size: var(--skdx-font-size-xs);
+  }
+
+  :where(.skdx-listbox)[data-size='lg'] {
+    padding: var(--skdx-space-3);
+    font-size: var(--skdx-font-size-md);
+  }
+
+  :where(.skdx-listbox)[data-size='sm'] :where(.skdx-listbox__item) {
+    min-block-size: var(--skdx-item-height-sm);
+  }
+
+  :where(.skdx-listbox)[data-size='lg'] :where(.skdx-listbox__item) {
+    min-block-size: var(--skdx-item-height-lg);
+  }
+
+  /* Density is the *between-rows* axis, size the row axis: a compact list packs
+     the same rows closer rather than shrinking them, which is what a long
+     settings list wants and what shrinking the text would not give it. */
+  :where(.skdx-listbox)[data-density='compact'] {
+    gap: 0;
+  }
+
+  :where(.skdx-listbox)[data-density='compact'] :where(.skdx-listbox__item) {
+    padding-block: var(--skdx-space-1);
+  }
+
+  :where(.skdx-listbox)[data-shape='square'] {
+    border-radius: 0;
+  }
+
+  :where(.skdx-listbox)[data-shape='rounded'] {
+    border-radius: var(--skdx-radius-md);
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-listbox) {
+      border-color: CanvasText;
+    }
+  }
+}

package/dist/skins-src/components/loading-overlay.css

@@ -0,0 +1,89 @@
+/*
+ * 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 root is only the containing block the scrim covers. `data-state` here is
+   visible/hidden, not the open/closed every other family uses. */
+@layer skdx-components {
+  :where(.skdx-loading-overlay) {
+    position: relative;
+  }
+
+  /* Deliberately not in _overlay.css with the modal scrims: those are all position: fixed, which would make a panel-scoped loading state cover the whole page. */
+  :where(.skdx-loading-overlay__backdrop),
+  :where(.skdx-loading-overlay__content) {
+    position: absolute;
+    inset: 0;
+    z-index: var(--skdx-z-index-overlay);
+  }
+
+  :where(.skdx-loading-overlay__backdrop)[data-full-screen],
+  :where(.skdx-loading-overlay__content)[data-full-screen] {
+    position: fixed;
+  }
+
+  :where(.skdx-loading-overlay__backdrop) {
+    background-color: var(--skdx-color-surface-overlay);
+    opacity: var(--skdx-loading-overlay-scrim-opacity, 1);
+  }
+
+  /* A hint of dimming — enough to say "not yet" over a card the user can still read. */
+  :where(.skdx-loading-overlay__backdrop)[data-emphasis='low'] {
+    --skdx-loading-overlay-scrim-opacity: 0.55;
+  }
+
+  /* The default weight, and what a Backdrop with no attribute already paints. */
+  :where(.skdx-loading-overlay__backdrop)[data-emphasis='medium'] {
+    --skdx-loading-overlay-scrim-opacity: 1;
+  }
+
+  /* backdrop-filter degrades to nothing where unsupported, leaving the medium weight behind it. */
+  :where(.skdx-loading-overlay__backdrop)[data-emphasis='high'] {
+    --skdx-loading-overlay-scrim-opacity: 1;
+    backdrop-filter: blur(2px);
+  }
+
+  :where(.skdx-loading-overlay__content) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--skdx-space-3);
+
+    color: var(--skdx-color-text-default);
+    font-size: var(--skdx-font-size-sm);
+  }
+
+  /* Angular/Web Components keep the content mounted and [hidden]; author display: flex above beats it on origin, so it must be restated here. */
+  :where(.skdx-loading-overlay__content)[hidden] {
+    display: none;
+  }
+
+  :where(.skdx-loading-overlay__backdrop)[data-state='visible'],
+  :where(.skdx-loading-overlay__content)[data-state='visible'] {
+    animation: skdx-fade-in var(--skdx-motion-duration-fast) var(--skdx-motion-easing);
+  }
+
+  :where(.skdx-loading-overlay__backdrop)[data-state='hidden'],
+  :where(.skdx-loading-overlay__content)[data-state='hidden'] {
+    animation: skdx-fade-out var(--skdx-motion-duration-fast) var(--skdx-motion-easing-exit);
+    /* skdx-fade-out has only a to frame, so forwards holds the end state until Presence unmounts it. */
+    animation-fill-mode: forwards;
+    pointer-events: none;
+  }
+
+  @media (forced-colors: active) {
+    :where(.skdx-loading-overlay__backdrop) {
+      background-color: Highlight;
+      opacity: 1;
+    }
+
+    :where(.skdx-loading-overlay__content) {
+      color: HighlightText;
+    }
+  }
+}