@skdx/docs-kit 0.35.0

package/dist/skins-src/utilities.css

@@ -0,0 +1,130 @@
+/*
+ * 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';
+
+/**
+ * Opt-in helpers, in the last layer so they win over component rules without
+ * `!important`. Deliberately tiny — not a utility framework.
+ */
+@layer skdx-utilities {
+  /* Visually hidden but still announced: clip-path, never `display: none` or
+     `visibility: hidden`, which remove the element from the accessibility tree.
+     `-focusable` is the inverse: revealed once focused, for skip links and the like. */
+  .skdx-visually-hidden,
+  .skdx-visually-hidden-focusable:not(:focus, :focus-within) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /** Suppresses the skin's focus ring where a parent already renders one. */
+  .skdx-focus-ring-none:focus-visible {
+    outline: none;
+  }
+}
+
+@layer skdx-utilities {
+  /* An attached strip of plain buttons: seams share one border, only the outer
+     corners keep their radius. The focused button rises above its neighbours so
+     the ring is not clipped by the overlap. */
+  .skdx-button-group {
+    display: inline-flex;
+  }
+
+  .skdx-button-group > .skdx-button:not(:first-child) {
+    margin-inline-start: calc(-1 * var(--skdx-border-width-thin));
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
+  }
+
+  .skdx-button-group > .skdx-button:not(:last-child) {
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+  }
+
+  .skdx-button-group[data-orientation='vertical'] {
+    flex-direction: column;
+  }
+
+  .skdx-button-group[data-orientation='vertical'] > .skdx-button:not(:first-child) {
+    margin-inline-start: 0;
+    margin-block-start: calc(-1 * var(--skdx-border-width-thin));
+    border-start-start-radius: 0;
+    border-start-end-radius: 0;
+    border-end-start-radius: var(--skdx-radius-md);
+  }
+
+  .skdx-button-group[data-orientation='vertical'] > .skdx-button:not(:last-child) {
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+    border-start-end-radius: var(--skdx-radius-md);
+  }
+
+  .skdx-button-group > .skdx-button:focus-visible {
+    position: relative;
+    z-index: 1;
+  }
+
+  /* Enter and exit animations on the motion tokens. Without data-state the
+     element animates in on mount; with the data-state every overlay part
+     publishes it also animates out — pair with forceMount (and Presence in
+     React) so the exit has time to play. */
+  .skdx-fade,
+  .skdx-zoom,
+  .skdx-slide-from-top,
+  .skdx-slide-from-bottom,
+  .skdx-slide-from-start,
+  .skdx-slide-from-end {
+    animation-duration: var(--skdx-motion-duration-normal);
+    animation-timing-function: var(--skdx-motion-easing);
+    animation-fill-mode: forwards;
+  }
+
+  .skdx-fade:not([data-state='closed']) {
+    animation-name: skdx-fade-in;
+  }
+
+  .skdx-zoom:not([data-state='closed']) {
+    animation-name: skdx-zoom-in;
+  }
+
+  .skdx-slide-from-top:not([data-state='closed']) {
+    animation-name: skdx-slide-in-from-top;
+  }
+
+  .skdx-slide-from-bottom:not([data-state='closed']) {
+    animation-name: skdx-slide-in-from-bottom;
+  }
+
+  .skdx-slide-from-start:not([data-state='closed']) {
+    animation-name: skdx-slide-in-from-start;
+  }
+
+  .skdx-slide-from-end:not([data-state='closed']) {
+    animation-name: skdx-slide-in-from-end;
+  }
+
+  .skdx-fade[data-state='closed'],
+  .skdx-slide-from-top[data-state='closed'],
+  .skdx-slide-from-bottom[data-state='closed'],
+  .skdx-slide-from-start[data-state='closed'],
+  .skdx-slide-from-end[data-state='closed'] {
+    animation-name: skdx-fade-out;
+    animation-timing-function: var(--skdx-motion-easing-exit);
+  }
+
+  .skdx-zoom[data-state='closed'] {
+    animation-name: skdx-zoom-out;
+    animation-timing-function: var(--skdx-motion-easing-exit);
+  }
+}

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

@@ -0,0 +1,64 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+/* Web Components only. `:not(:defined)` matches any unregistered tag, and the
+   Angular package uses these same tag names as component selectors without ever
+   calling `customElements.define`. Every rule below is scoped with
+   `:root:not(:has([ng-version]))` — Angular stamps `ng-version` on its bootstrapped
+   root element — so it never matches inside an Angular app. Kept out of base.css
+   and all.css regardless, since it has no effect there. */
+@layer skdx-reset, skdx-base, skdx-components, skdx-utilities;
+
+@layer skdx-base {
+  /* A custom element the browser has not upgraded yet has no box of its own, so every
+     `<skdx-*>` on the page collapses and the content below it jumps the moment its
+     module runs. These reserve the control box for the four families whose height is a
+     token; `visibility: hidden` keeps it empty until the upgrade drops the selector.
+     Families with no height token (text, cards, overlays) still reflow — see guides/ssr. */
+  :root:not(:has([ng-version])) skdx-button:not(:defined),
+  :root:not(:has([ng-version])) skdx-tabs-trigger:not(:defined) {
+    display: inline-block;
+    visibility: hidden;
+    block-size: var(--skdx-control-height-md);
+  }
+
+  :root:not(:has([ng-version])) skdx-text-field:not(:defined),
+  :root:not(:has([ng-version])) skdx-number-field:not(:defined),
+  :root:not(:has([ng-version])) skdx-password-input:not(:defined),
+  :root:not(:has([ng-version])) skdx-select-trigger:not(:defined),
+  :root:not(:has([ng-version])) skdx-tabs-list:not(:defined) {
+    display: block;
+    visibility: hidden;
+    block-size: var(--skdx-control-height-md);
+  }
+
+  /* `data-size` is authored markup, so it is already on the element before the upgrade. */
+  :root:not(:has([ng-version]))
+    :is(
+      skdx-button,
+      skdx-tabs-trigger,
+      skdx-text-field,
+      skdx-number-field,
+      skdx-password-input,
+      skdx-select-trigger,
+      skdx-tabs-list
+    ):not(:defined)[data-size='sm'] {
+    block-size: var(--skdx-control-height-sm);
+  }
+
+  :root:not(:has([ng-version]))
+    :is(
+      skdx-button,
+      skdx-tabs-trigger,
+      skdx-text-field,
+      skdx-number-field,
+      skdx-password-input,
+      skdx-select-trigger,
+      skdx-tabs-list
+    ):not(:defined)[data-size='lg'] {
+    block-size: var(--skdx-control-height-lg);
+  }
+}

package/dist/strip-paint.d.mts

@@ -0,0 +1,7 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+export function stripPaint(css: string): string;

package/dist/strip-paint.mjs

@@ -0,0 +1,131 @@
+#!/usr/bin/env node
+
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+/*
+ * Strips paint properties, --skdx-color-* custom properties, and the colour
+ * part of border/outline/column-rule shorthands (width and style survive).
+ *
+ * ponytail: the parser below does no string/url escaping, so a `;`, `{`, or
+ * `}` inside a `url()` or quoted string would mis-tokenize. Fine for our own
+ * CSS; `tests/structure.test.ts` guards the filtered output. Reach for a real
+ * CSS parser if that assumption ever breaks.
+ */
+
+const PAINT_PROPERTY =
+  /^(color|background|background-color|background-image|background-blend-mode|box-shadow|text-shadow|text-emphasis-color|text-decoration-color|column-rule-color|outline-color|border-color|border(-block|-inline)?(-start|-end)?-color|border-(top|right|bottom|left)-color|fill|stroke|caret-color|accent-color|-webkit-text-fill-color)$/;
+
+const COLOUR_VALUE =
+  /var\(\s*--skdx-color-|#[0-9a-f]{3,8}\b|\b(rgba?|hsla?|oklch|oklab|lab|lch|color-mix|(linear|radial|conic)-gradient)\(|(^|[\s,(])(transparent|currentcolor|canvas|canvastext|highlight|highlighttext|graytext|linktext|visitedtext|activetext|buttonface|buttontext|buttonborder|field|fieldtext|mark|marktext|accentcolor|accentcolortext|selecteditem|selecteditemtext)([\s,)]|$)/i;
+
+const GEOMETRY_SHORTHAND =
+  /^(border(-block|-inline)?(-start|-end)?|border-(top|right|bottom|left)|outline|column-rule)$/;
+
+const GEOMETRY_PART =
+  /^(none|hidden|solid|dashed|dotted|double|groove|ridge|inset|outset|thin|medium|thick|0|[\d.]+(px|rem|em|ch|ex|%|vw|vh)?|var\(\s*--skdx-[a-z0-9-]*width[a-z0-9-]*\s*\))$/i;
+
+function splitParts(value) {
+  const parts = [];
+  let buf = '';
+  let depth = 0;
+  for (const ch of value) {
+    if (ch === '(') depth++;
+    else if (ch === ')') depth--;
+    if (depth === 0 && /\s/.test(ch)) {
+      if (buf) parts.push(buf);
+      buf = '';
+      continue;
+    }
+    buf += ch;
+  }
+  if (buf) parts.push(buf);
+  return parts;
+}
+
+function keepDeclaration(property, value) {
+  if (PAINT_PROPERTY.test(property)) return null;
+  if (property.startsWith('--')) return COLOUR_VALUE.test(value) ? null : `${property}: ${value}`;
+  if (GEOMETRY_SHORTHAND.test(property)) {
+    const kept = splitParts(value).filter((part) => GEOMETRY_PART.test(part));
+    return kept.length > 0 ? `${property}: ${kept.join(' ')}` : null;
+  }
+  return `${property}: ${value}`;
+}
+
+// CSS comments are dropped along with the paint they describe.
+
+function parse(css) {
+  const root = { children: [] };
+  const stack = [root];
+  let buf = '';
+  let depth = 0;
+
+  for (let i = 0; i < css.length; i++) {
+    const ch = css[i];
+    if (ch === '/' && css[i + 1] === '*') {
+      const end = css.indexOf('*/', i + 2);
+      i = end === -1 ? css.length : end + 1;
+      continue;
+    }
+    if (ch === '(') depth++;
+    else if (ch === ')') depth--;
+
+    if (depth === 0 && (ch === '{' || ch === '}' || ch === ';')) {
+      const chunk = buf.trim();
+      buf = '';
+      const parent = stack[stack.length - 1];
+      if (ch === '{') {
+        const block = { prelude: chunk, children: [] };
+        parent.children.push(block);
+        stack.push(block);
+      } else {
+        if (chunk) parent.children.push({ text: chunk });
+        if (ch === '}') stack.pop();
+      }
+      continue;
+    }
+    buf += ch;
+  }
+  return root;
+}
+
+function render(node, indent, out) {
+  for (const child of node.children) {
+    if (child.children) {
+      const inner = [];
+      render(child, `${indent}  `, inner);
+      if (inner.length === 0) continue;
+      out.push(`${indent}${child.prelude} {`, ...inner, `${indent}}`);
+      continue;
+    }
+    // `@layer a, b;` and friends are statements, not declarations.
+    if (child.text.startsWith('@')) {
+      out.push(`${indent}${child.text};`);
+      continue;
+    }
+    const colon = child.text.indexOf(':');
+    if (colon === -1) continue;
+    const kept = keepDeclaration(
+      child.text.slice(0, colon).trim(),
+      child.text
+        .slice(colon + 1)
+        .replace(/\s+/g, ' ')
+        .trim(),
+    );
+    if (kept) out.push(`${indent}${kept};`);
+  }
+}
+
+/**
+ * @param {string} css
+ * @returns {string} the same rules with nothing that paints.
+ */
+export function stripPaint(css) {
+  const out = [];
+  render(parse(css), '', out);
+  return out.join('\n');
+}

package/dist/themes/AntDark.md

@@ -0,0 +1,14 @@
+---
+upstream: Ant Design
+deviations:
+  - token: text-muted
+    upstream: #8c8c8c
+    ours: #989898
+    reason: Read 3.90:1 against selected, the primary-950 wash, under the 4.5:1
+      floor for body text. Lightened on lightness alone, hue and saturation kept,
+      to clear 4.5:1 against selected.
+---
+
+# themes/ant-dark.ts
+
+Exports **`antDark`** — a dark theme registered as `data-skdx-theme="ant-dark"`, the `ant` brand's dark mode, following Ant Design's dark algorithm — `background: #141414`, `surface: #1f1f1f`, gray borders at `#303030`/`#424242`, and the same daybreak-blue primary ramp as `ant-daybreak`.

package/dist/themes/AntDark.ts

@@ -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 type { Theme } from '../utils/theme';
+import { antLight } from './AntLight';
+import { createTheme } from './DefaultTheme';
+
+/** Dark counterpart of Ant Design's dark surfaces (#141414/#1f1f1f), using the dark-derived blue since the light ramp's blue fails contrast on dark backgrounds. @public */
+export const antDark: Theme = createTheme(
+  'ant-dark',
+  {
+    mode: 'dark',
+    colors: {
+      primary: {
+        50: '#f3f9fe',
+        100: '#e4f1fc',
+        200: '#c5e1f8',
+        300: '#9ecdf4',
+        400: '#7abaef',
+        500: '#5baaec',
+        600: '#3c9ae8',
+        700: '#327dbd',
+        800: '#2a669a',
+        900: '#23527c',
+        950: '#18324c',
+      },
+      neutral: { 200: '#303030', 300: '#424242', 800: '#1f1f1f', 900: '#141414', 950: '#0a0a0a' },
+      semantic: {
+        background: '#141414',
+        surface: '#1f1f1f',
+        surfaceHover: '#262626',
+        overlay: 'rgb(0 0 0 / 0.65)',
+        text: '#d9d9d9',
+        textMuted: '#989898',
+        textInverted: '#141414',
+        border: '#303030',
+        borderStrong: '#6b6b6b',
+        focusRing: '#4096ff',
+      },
+    },
+    shadow: { color: '0 0 0', strength: '4.7' },
+  },
+  antLight,
+);

package/dist/themes/AntLight.md

@@ -0,0 +1,21 @@
+---
+upstream: Ant Design
+deviations:
+  - token: warning-600
+    upstream: #d48806 (gold-7)
+    ours: #c88006
+    reason: Ant's gold-7 reads 2.76:1 against gold-1, the wash the alert icon sits
+      on, and the icon is the non-colour signal for severity. Darkened on lightness
+      alone to clear 3:1; hue and saturation are Ant's. Inherited by ant-dark, where
+      the icon reads step 400 and the value is unused.
+  - token: text-muted
+    upstream: #737373
+    ours: #686868
+    reason: Read 4.35:1 against hover, 4.23:1 against selected and 3.85:1 against
+      pressed, under the 4.5:1 floor for body text. Darkened on lightness alone,
+      hue and saturation kept, to clear 4.5:1 against all three fills.
+---
+
+# themes/ant-light.ts
+
+Character: Ant's "daybreak blue" primary ramp (`#1677ff` at 500), its signature status palettes on the success/warning/danger ramps, alpha-based text color (`rgb(0 0 0 / 0.88)`), neutral gray surfaces, and Ant's compact pixel-based corners (`sm: 2px`, `md: 6px`, `lg: 8px`, `xl: 12px`).

package/dist/themes/AntLight.ts

@@ -0,0 +1,95 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+import type { Theme } from '../utils/theme';
+
+/** Ant Design inspired: daybreak blue, compact corners, signature status palettes. @public */
+export const antLight: Theme = {
+  name: 'ant-daybreak',
+  mode: 'light',
+  colors: {
+    primary: {
+      50: '#e6f4ff',
+      100: '#bae0ff',
+      200: '#91caff',
+      300: '#69b1ff',
+      400: '#4096ff',
+      500: '#1677ff',
+      600: '#0958d9',
+      700: '#003eb3',
+      800: '#002c8c',
+      900: '#001d66',
+      950: '#001141',
+    },
+    neutral: {
+      50: '#f8fafc',
+      100: '#f1f5f9',
+      200: '#e2e8f0',
+      300: '#cbd5e1',
+      400: '#94a3b8',
+      500: '#64748b',
+      600: '#475569',
+      700: '#334155',
+      800: '#1e293b',
+      900: '#0f172a',
+      950: '#020617',
+    },
+    success: {
+      50: '#f6ffed',
+      100: '#d9f7be',
+      200: '#b7eb8f',
+      300: '#95de64',
+      400: '#73d13d',
+      500: '#52c41a',
+      600: '#389e0d',
+      700: '#237804',
+      800: '#135200',
+      900: '#092b00',
+      950: '#051f00',
+    },
+    warning: {
+      50: '#fffbe6',
+      100: '#fff1b8',
+      200: '#ffe58f',
+      300: '#ffd666',
+      400: '#ffc53d',
+      500: '#faad14',
+      600: '#c88006',
+      700: '#ad6800',
+      800: '#874d00',
+      900: '#613400',
+      950: '#422400',
+    },
+    danger: {
+      50: '#fff1f0',
+      100: '#ffccc7',
+      200: '#ffa39e',
+      300: '#ff7875',
+      400: '#ff4d4f',
+      500: '#f5222d',
+      600: '#cf1322',
+      700: '#a8071a',
+      800: '#820014',
+      900: '#5c0011',
+      950: '#3d000b',
+    },
+    semantic: {
+      background: '#ffffff',
+      surface: '#fafafa',
+      surfaceHover: '#f5f5f5',
+      overlay: 'rgb(0 0 0 / 0.45)',
+      // text/textMuted are hex composites over background: contrastRatio() rejects non-hex values.
+      text: '#1f1f1f',
+      textMuted: '#686868',
+      textInverted: '#ffffff',
+      border: '#d9d9d9',
+      borderStrong: '#919191',
+      focusRing: '#1677ff',
+    },
+  },
+  shadow: { color: '2 6 23', strength: '1' },
+  motion: { easing: 'cubic-bezier(0.645, 0.045, 0.355, 1)' },
+};

package/dist/themes/CatppuccinLatte.md

@@ -0,0 +1,20 @@
+---
+upstream: Catppuccin Latte
+deviations:
+  - token: success-600
+    upstream: #40a02b (green)
+    ours: #3f9e2a
+    reason: Read 2.96:1 against the theme background, under the 3:1 floor for status
+      ramps. Darkened on lightness alone, hue and saturation kept, to reach 3.03:1
+      contrast against the theme background.
+  - token: text-muted
+    upstream: #65687d
+    ours: #5f6276
+    reason: Read 4.14:1 against hover, under the 4.5:1 floor for body text.
+      Darkened on lightness alone, hue and saturation kept, to clear 4.5:1
+      against hover.
+---
+
+# themes/catppuccin-latte.ts
+
+Character: warm off-white surfaces (`background: #eff1f5`, `surface: #e6e9ef`), saturated Latte blue actions (`#1e66f5` at 600), Latte green/yellow/red on the status ramps, ink-blue text (`#4c4f69`), and a neutral ramp built from the Latte surface/overlay/subtext grays.

package/dist/themes/CatppuccinLatte.ts

@@ -0,0 +1,93 @@
+/*
+ * Copyright (c) 2026 SkandaDX
+ * This file is part of the SkandaDX organization.
+ * Licensed under the MIT License. See LICENSE in the repository root.
+ */
+
+import type { Theme } from '../utils/theme';
+
+/** Catppuccin Latte inspired light theme: warm off-white surfaces, saturated blue actions, Latte status hues. Palette source: catppuccin/catppuccin (MIT). @public */
+export const catppuccinLatte: Theme = {
+  name: 'catppuccin-latte',
+  mode: 'light',
+  colors: {
+    primary: {
+      50: '#eef2fe',
+      100: '#dde6fd',
+      200: '#c1d2fb',
+      300: '#96b4f9',
+      400: '#648df7',
+      500: '#3a70f6',
+      600: '#1e66f5',
+      700: '#1652cd',
+      800: '#1543a4',
+      900: '#163a82',
+      950: '#12254f',
+    },
+    neutral: {
+      50: '#f4f6fa',
+      100: '#eff1f5',
+      200: '#e6e9ef',
+      300: '#ccd0da',
+      400: '#acb0be',
+      500: '#9ca0b0',
+      600: '#7c7f93',
+      700: '#6c6f85',
+      800: '#5c5f77',
+      900: '#4c4f69',
+      950: '#3a3d52',
+    },
+    success: {
+      50: '#f1faee',
+      100: '#e0f4d9',
+      200: '#c3e8b6',
+      300: '#9cd688',
+      400: '#6fbe55',
+      500: '#4fae38',
+      600: '#3f9e2a',
+      700: '#357f25',
+      800: '#2d6521',
+      900: '#27531f',
+      950: '#112d0c',
+    },
+    warning: {
+      50: '#fdf7ec',
+      100: '#f9ecd3',
+      200: '#f3d7a5',
+      300: '#ecbd6e',
+      400: '#e5a340',
+      500: '#df8e1d',
+      600: '#c67916',
+      700: '#a45e15',
+      800: '#854a17',
+      900: '#6d3d16',
+      950: '#3e1f09',
+    },
+    danger: {
+      50: '#fef1f4',
+      100: '#fde0e7',
+      200: '#fbc6d3',
+      300: '#f79cb1',
+      400: '#f16587',
+      500: '#e63862',
+      600: '#d20f39',
+      700: '#b10d33',
+      800: '#940e31',
+      900: '#7f102f',
+      950: '#470415',
+    },
+    semantic: {
+      background: '#eff1f5',
+      surface: '#e6e9ef',
+      surfaceHover: '#dce0e8',
+      overlay: 'rgb(76 79 105 / 0.4)',
+      text: '#4c4f69',
+      textMuted: '#5f6276',
+      textInverted: '#ffffff',
+      border: '#ccd0da',
+      borderStrong: '#7c849c',
+      focusRing: '#1e66f5',
+    },
+  },
+  shadow: { color: '76 79 105', strength: '1.3' },
+};

package/dist/themes/CatppuccinMocha.md

@@ -0,0 +1,15 @@
+---
+upstream: Catppuccin Mocha
+deviations:
+  - token: neutral-400
+    upstream: #a6adc8 (subtext0)
+    ours: #9399b2 (overlay2)
+    reason: In dark mode this step is the disabled ink and nothing else, and holding
+      subtext0 made it identical to text-muted, so a disabled control was
+      indistinguishable from an enabled one. Remapped to the next dimmer Catppuccin
+      colour rather than inventing a value; text-muted still carries subtext0.
+---
+
+# themes/catppuccin-mocha.ts
+
+Character: the signature `#1e1e2e` base with `#313244` surfaces, pastel blue actions (`#89b4fa` at 400) with dark inverted text, Mocha green/yellow/red status hues, lavender-tinted text (`#cdd6f4`), and a neutral ramp whose dark steps are remapped to the Mocha surface/base/crust colors.