@sankhyatronics/sankhya-cms 0.0.0-stage → 0.0.9

package/dist/shared/icons.d.ts

@@ -0,0 +1,77 @@
+import { TemplateResult } from 'lit';
+
+/** Filled folder glyph (browse rows/tiles). Fixed 20x16 — folders don't resize per usage. */
+declare function folderIcon(): TemplateResult;
+/** Outlined folder glyph (breadcrumb crumb icon). `className` lets the caller hook its own layout class. */
+declare function folderOutlineIcon(size?: number, className?: string): TemplateResult;
+/** External-link/"open" glyph (open site/library actions in the Templates/Data/Save-location pickers). */
+declare function externalLinkIcon(size?: number): TemplateResult;
+/** Refresh/reload glyph (Templates/Data picker refresh buttons). */
+declare function refreshIcon(size?: number): TemplateResult;
+/** Clock glyph (the wizard's "Recent activity" history trigger button, Steps 1-3). */
+declare function historyIcon(size?: number): TemplateResult;
+/** Trash/delete glyph (clear-all button in the selected-chips summary badge). */
+declare function trashIcon(size?: number): TemplateResult;
+/** Chevron glyph (pager prev/next buttons, the select trigger's caret). */
+declare function chevronIcon(direction: 'left' | 'right' | 'down', size?: number): TemplateResult;
+/** Plus glyph ("New folder" action button). */
+declare function plusIcon(size?: number): TemplateResult;
+/** Cards-view glyph (2x2 grid — view-toggle button). */
+declare function cardsViewIcon(size?: number): TemplateResult;
+/** Checkmark glyph (completed-step marker in the step indicator). */
+declare function checkIcon(size?: number): TemplateResult;
+/** SharePoint site glyph (globe — root "All sites" browser rows). */
+declare function siteIcon(size?: number): TemplateResult;
+/** 3x3 dot-grid glyph (bento-menu app-switcher trigger). */
+declare function bentoGridIcon(size?: number): TemplateResult;
+/** List-view glyph (stacked rows — view-toggle button). */
+declare function listViewIcon(size?: number): TemplateResult;
+/**
+ * A small set of generic domain icons for `st-menu-grid-item`'s icon slot (nav "mega menu"
+ * entries — sales/purchase/accounting/settings items) — deliberately simple line glyphs rather
+ * than pixel-perfect illustrations, same fidelity level as the icons above.
+ */
+/** Shopping-cart glyph (sales/orders). */
+declare function cartIcon(size?: number): TemplateResult;
+/** Delivery-truck glyph (purchase orders / receiving). */
+declare function truckIcon(size?: number): TemplateResult;
+/** Package/box glyph (products, inventory). */
+declare function boxIcon(size?: number): TemplateResult;
+/** Map-pin glyph (stock locations). */
+declare function mapPinIcon(size?: number): TemplateResult;
+/** Two-person glyph (partners — customers/vendors/employees). */
+declare function usersIcon(size?: number): TemplateResult;
+/** Open-book glyph (journals). */
+declare function bookIcon(size?: number): TemplateResult;
+/** Document/invoice glyph. */
+declare function documentIcon(size?: number): TemplateResult;
+/** Receipt glyph, zig-zag bottom edge (credit/debit notes). */
+declare function receiptIcon(size?: number): TemplateResult;
+/** Percent glyph (taxes). */
+declare function percentIcon(size?: number): TemplateResult;
+/** Stacked-coins glyph (payment terms). */
+declare function coinsIcon(size?: number): TemplateResult;
+/** Padlock glyph (fiscal year closing / lock dates). */
+declare function lockIcon(size?: number): TemplateResult;
+/**
+ * Office file-type glyphs, ported from `PennyIcons` in `@sankhyatronics/sankhya-icons`
+ * (FileWordIcon/FileExcelIcon/FilePowerPointIcon) — this package is Lit, so it can't import
+ * the React components and carries the same path data instead. Filled, `currentColor`.
+ */
+declare const FILE_TYPE_ICON_PATHS: {
+    readonly word: "m19.95 5.54-3.48-3.49A6.96 6.96 0 0 0 11.52 0H7C4.24 0 2 2.24 2 5v14c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5v-8.51c0-1.87-.73-3.63-2.05-4.95Zm-1.41 1.41c.32.32.59.67.81 1.05h-4.34c-.55 0-1-.45-1-1V2.66c.38.22.73.49 1.05.81l3.48 3.49ZM20 19c0 1.65-1.35 3-3 3H7c-1.65 0-3-1.35-3-3V5c0-1.65 1.35-3 3-3h4.51c.16 0 .33 0 .49.02V7c0 1.65 1.35 3 3 3h4.98c.02.16.02.32.02.49V19Zm-3.28-5.76L15.3 18.9c-.15.61-.68 1.05-1.31 1.09-.63.04-1.21-.32-1.44-.91L12 17.7l-.55 1.38c-.22.56-.75.91-1.34.91h-.1c-.63-.04-1.15-.48-1.31-1.1l-1.41-5.66a1 1 0 0 1 1.94-.48l1 4 .85-2.13a1 1 0 0 1 1.86 0l.84 2.13 1.01-4a1 1 0 0 1 1.94.48Z";
+    readonly excel: "M15.27 13.64 13.3 16l1.97 2.36a1.001 1.001 0 1 1-1.54 1.28L12 17.56l-1.73 2.08a.99.99 0 0 1-.77.36c-.23 0-.45-.08-.64-.23-.42-.35-.48-.98-.13-1.41L10.7 16l-1.97-2.36a1.001 1.001 0 1 1 1.54-1.28L12 14.44l1.73-2.08c.35-.42.98-.48 1.41-.13.42.35.48.98.13 1.41ZM22 10.49V19c0 2.76-2.24 5-5 5H7c-2.76 0-5-2.24-5-5V5c0-2.76 2.24-5 5-5h4.51c1.87 0 3.63.73 4.95 2.05l3.48 3.49a6.96 6.96 0 0 1 2.05 4.95Zm-6.95-7.03c-.32-.32-.67-.59-1.05-.81V7c0 .55.45 1 1 1h4.34c-.22-.38-.49-.73-.81-1.05l-3.48-3.49ZM20 10.48c0-.16 0-.33-.02-.49H15c-1.65 0-3-1.35-3-3V2.02C11.84 2 11.68 2 11.51 2H7C5.35 2 4 3.35 4 5v14c0 1.65 1.35 3 3 3h10c1.65 0 3-1.35 3-3v-8.51Z";
+    readonly powerpoint: "m19.95 5.54-3.49-3.49A6.96 6.96 0 0 0 11.51 0H7C4.24 0 2 2.24 2 5v14c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5v-8.51c0-1.87-.73-3.63-2.05-4.95Zm-1.41 1.41c.32.32.59.67.81 1.05h-4.34c-.55 0-1-.45-1-1V2.66c.38.22.73.49 1.05.81l3.49 3.49ZM20 19c0 1.65-1.35 3-3 3H7c-1.65 0-3-1.35-3-3V5c0-1.65 1.35-3 3-3h4.51c.16 0 .33 0 .49.02V7c0 1.65 1.35 3 3 3h4.98c.02.16.02.32.02.49V19Zm-10 1c-.55 0-1-.45-1-1v-5c0-1.1.9-2 2-2h1c1.65 0 3 1.35 3 3s-1.35 3-3 3h-1v1c0 .55-.45 1-1 1Zm1-4h1c.55 0 1-.45 1-1s-.45-1-1-1h-1v2Z";
+};
+/** Word/Excel/PowerPoint file glyph (the document icon in front of template/file rows). */
+declare function fileTypeIcon(type: keyof typeof FILE_TYPE_ICON_PATHS, size?: number): TemplateResult;
+/** Hamburger glyph (`st-header`'s mobile nav toggle, closed state). */
+declare function menuIcon(size?: number): TemplateResult;
+/** X/close glyph (`st-header`'s mobile nav toggle, open state). */
+declare function closeIcon(size?: number): TemplateResult;
+/** Gear/cog glyph (company settings). */
+declare function gearIcon(size?: number): TemplateResult;
+/** Paint-palette glyph (theme/color-scheme switcher). */
+declare function paletteIcon(size?: number): TemplateResult;
+
+export { bentoGridIcon, bookIcon, boxIcon, cardsViewIcon, cartIcon, checkIcon, chevronIcon, closeIcon, coinsIcon, documentIcon, externalLinkIcon, fileTypeIcon, folderIcon, folderOutlineIcon, gearIcon, historyIcon, listViewIcon, lockIcon, mapPinIcon, menuIcon, paletteIcon, percentIcon, plusIcon, receiptIcon, refreshIcon, siteIcon, trashIcon, truckIcon, usersIcon };

package/dist/shared/icons.js

@@ -0,0 +1,64 @@
+import {
+  bentoGridIcon,
+  bookIcon,
+  boxIcon,
+  cardsViewIcon,
+  cartIcon,
+  checkIcon,
+  chevronIcon,
+  closeIcon,
+  coinsIcon,
+  documentIcon,
+  externalLinkIcon,
+  fileTypeIcon,
+  folderIcon,
+  folderOutlineIcon,
+  gearIcon,
+  historyIcon,
+  listViewIcon,
+  lockIcon,
+  mapPinIcon,
+  menuIcon,
+  paletteIcon,
+  percentIcon,
+  plusIcon,
+  receiptIcon,
+  refreshIcon,
+  siteIcon,
+  trashIcon,
+  truckIcon,
+  usersIcon
+} from "../chunk-3TCP25JG.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  bentoGridIcon,
+  bookIcon,
+  boxIcon,
+  cardsViewIcon,
+  cartIcon,
+  checkIcon,
+  chevronIcon,
+  closeIcon,
+  coinsIcon,
+  documentIcon,
+  externalLinkIcon,
+  fileTypeIcon,
+  folderIcon,
+  folderOutlineIcon,
+  gearIcon,
+  historyIcon,
+  listViewIcon,
+  lockIcon,
+  mapPinIcon,
+  menuIcon,
+  paletteIcon,
+  percentIcon,
+  plusIcon,
+  receiptIcon,
+  refreshIcon,
+  siteIcon,
+  trashIcon,
+  truckIcon,
+  usersIcon
+};
+//# sourceMappingURL=icons.js.map

package/dist/shared/icons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/shared/styles.d.ts

@@ -0,0 +1,90 @@
+import * as lit from 'lit';
+
+/**
+ * Reusable `css` fragments shared across component `static styles` blocks.
+ *
+ * Lit's `css` tag allows interpolating another `CSSResult` anywhere inside a
+ * template, including mid-rule — `${fragment}` below expands to raw CSS
+ * text, so these compose into a component's own selectors without forcing a
+ * shared class name or touching `render()`. Each component keeps its own
+ * selectors; only the duplicated property lists move here. Layout details
+ * that genuinely vary per component (padding, gap, font-size, ...) stay
+ * local, declared after a fragment so the cascade lets them override it.
+ *
+ * Add a fragment here only once a pattern is byte-identical (or near enough
+ * that the deltas are better expressed as local overrides) across 3+
+ * components — see `packages/suite-components/README.md#shared-style-fragments`.
+ */
+/** Truncates overflowing text to a single line with an ellipsis. */
+declare const truncateStyles: lit.CSSResult;
+/**
+ * Base for an unstyled, click-through interactive element (icon buttons,
+ * menu triggers, link-like buttons) before component-specific padding,
+ * font-size, and color are layered on.
+ */
+declare const buttonResetStyles: lit.CSSResult;
+/**
+ * The dark-filled primary-action button look (wizard Next/Generate/Run/Save,
+ * active toggle buttons, ...). Pair with `ctaButtonDisabledStyles` on the
+ * same selector's `:disabled` state.
+ */
+declare const ctaButtonStyles: lit.CSSResult;
+declare const ctaButtonDisabledStyles: lit.CSSResult;
+/**
+ * Just the fill (background + color) from `ctaButtonStyles`, for selectors
+ * that only need to swap an already-bordered/sized button into the CTA look
+ * on an active/pressed/selected state (`[aria-pressed='true']`, `.active`,
+ * ...) rather than defining the button from scratch.
+ */
+declare const ctaButtonFillStyles: lit.CSSResult;
+/** Floating menu/dropdown panel chrome (user menu, language menu, ...). */
+declare const dropdownPanelStyles: lit.CSSResult;
+/** "No results" / "Nothing here." empty-state text. Padding stays local. */
+declare const emptyStateStyles: lit.CSSResult;
+/** Bordered, rounded shell wrapping a data table (browse/list views). */
+declare const tableShellStyles: lit.CSSResult;
+/** A single bordered result row with a name (truncated) + trailing link. */
+declare const resultRowStyles: lit.CSSResult;
+declare const resultNameStyles: lit.CSSResult;
+declare const resultLinkStyles: lit.CSSResult;
+/**
+ * Uppercase, letter-spaced section/field "eyebrow" label (card headings,
+ * table headers, field labels, ...). Font-size stays local since it varies
+ * (11–12px) by context.
+ */
+declare const eyebrowLabelStyles: lit.CSSResult;
+/** Top border separating stacked rows in a list/table (folder rows, data rows, table rows, ...). */
+declare const rowDividerStyles: lit.CSSResult;
+/**
+ * Bordered, rounded surface shell for a card/tile/panel (as opposed to
+ * `tableShellStyles`, which additionally clips overflow for tabular content).
+ * Padding, gap, and cursor stay local since they vary by component.
+ */
+declare const cardShellStyles: lit.CSSResult;
+/** A card/tile/row's bold primary name line (folder tiles/rows, template cards, ...). */
+declare const itemNameStyles: lit.CSSResult;
+/** A card/tile/row's muted secondary caption line, paired with `itemNameStyles`. */
+declare const itemCaptionStyles: lit.CSSResult;
+/**
+ * Whole rules (not a property list) every component's stylesheet starts
+ * with: routes keyboard focus rings and native checkbox/radio tint through
+ * `--st-focus-ring` / `--st-checkbox-color`, whose defaults (`auto`) keep
+ * the browser's own look until a host app themes them.
+ */
+declare const controlBaseStyles: lit.CSSResult;
+/** Default font stack, used by nearly every component. */
+declare const fontFamilyStyles: lit.CSSResult;
+/**
+ * Font stack for page-root/chrome components (`st-template-hub`, the admin
+ * and configuration pages, `st-app-header`, ...). Identical to
+ * `fontFamilyStyles` now that `--st-font-family` always resolves via
+ * `theme.css` (no per-usage fallback) — kept as a separate export so those
+ * call sites stay semantically distinct if the two ever need to diverge
+ * again.
+ */
+declare const rootFontFamilyStyles: lit.CSSResult;
+/** Canonical responsive breakpoints (px). Interpolate as `${BREAKPOINT_TABLET}px`. */
+declare const BREAKPOINT_TABLET = 900;
+declare const BREAKPOINT_MOBILE = 500;
+
+export { BREAKPOINT_MOBILE, BREAKPOINT_TABLET, buttonResetStyles, cardShellStyles, controlBaseStyles, ctaButtonDisabledStyles, ctaButtonFillStyles, ctaButtonStyles, dropdownPanelStyles, emptyStateStyles, eyebrowLabelStyles, fontFamilyStyles, itemCaptionStyles, itemNameStyles, resultLinkStyles, resultNameStyles, resultRowStyles, rootFontFamilyStyles, rowDividerStyles, tableShellStyles, truncateStyles };

package/dist/shared/styles.js

@@ -0,0 +1,48 @@
+import {
+  BREAKPOINT_MOBILE,
+  BREAKPOINT_TABLET,
+  buttonResetStyles,
+  cardShellStyles,
+  controlBaseStyles,
+  ctaButtonDisabledStyles,
+  ctaButtonFillStyles,
+  ctaButtonStyles,
+  dropdownPanelStyles,
+  emptyStateStyles,
+  eyebrowLabelStyles,
+  fontFamilyStyles,
+  itemCaptionStyles,
+  itemNameStyles,
+  resultLinkStyles,
+  resultNameStyles,
+  resultRowStyles,
+  rootFontFamilyStyles,
+  rowDividerStyles,
+  tableShellStyles,
+  truncateStyles
+} from "../chunk-RHAOQ6K4.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  BREAKPOINT_MOBILE,
+  BREAKPOINT_TABLET,
+  buttonResetStyles,
+  cardShellStyles,
+  controlBaseStyles,
+  ctaButtonDisabledStyles,
+  ctaButtonFillStyles,
+  ctaButtonStyles,
+  dropdownPanelStyles,
+  emptyStateStyles,
+  eyebrowLabelStyles,
+  fontFamilyStyles,
+  itemCaptionStyles,
+  itemNameStyles,
+  resultLinkStyles,
+  resultNameStyles,
+  resultRowStyles,
+  rootFontFamilyStyles,
+  rowDividerStyles,
+  tableShellStyles,
+  truncateStyles
+};
+//# sourceMappingURL=styles.js.map

package/dist/shared/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/stats/index.d.ts

@@ -0,0 +1,17 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+interface StatItem {
+    value: string;
+    label: string;
+    description?: string;
+}
+/** Responsive grid of headline numbers with a label and optional description. Port of React `Stats`. */
+declare class Stats extends LitElement {
+    static styles: lit.CSSResult;
+    items: StatItem[];
+    inverted: boolean;
+    render(): lit.TemplateResult<1>;
+}
+
+export { type StatItem, Stats };

package/dist/stats/index.js

@@ -0,0 +1,9 @@
+import {
+  Stats
+} from "../chunk-USNFT4DU.js";
+import "../chunk-RHAOQ6K4.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  Stats
+};
+//# sourceMappingURL=index.js.map

package/dist/stats/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/testimonials/index.d.ts

@@ -0,0 +1,25 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+interface TestimonialItem {
+    id?: string;
+    name: string;
+    role: string;
+    company?: string;
+    imageSrc?: string;
+    quote: string;
+    /** Number of stars, default 5. */
+    rating?: number;
+}
+/** Section heading plus a grid of quote cards with star rating and author. Port of React `Testimonials`. */
+declare class Testimonials extends LitElement {
+    static styles: lit.CSSResult;
+    title: string;
+    subtitle: string;
+    items: TestimonialItem[];
+    inverted: boolean;
+    private renderItem;
+    render(): lit.TemplateResult<1>;
+}
+
+export { type TestimonialItem, Testimonials };

package/dist/testimonials/index.js

@@ -0,0 +1,10 @@
+import {
+  Testimonials
+} from "../chunk-WCO7JAIK.js";
+import "../chunk-3VE6VFJ4.js";
+import "../chunk-RHAOQ6K4.js";
+import "../chunk-EUXUH3YW.js";
+export {
+  Testimonials
+};
+//# sourceMappingURL=index.js.map

package/dist/testimonials/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/theme.css

@@ -0,0 +1,292 @@
+/**
+ * Design tokens for @sankhyatronics/components.
+ *
+ * Every st-* component reads its styling exclusively via `var(--st-x)` — no
+ * fallback values anywhere — and custom properties inherit through Shadow
+ * DOM, so setting these at :root (or any ancestor of your st-* components)
+ * reskins/rescales the whole tree without forking any component.
+ *
+ * Import this file once. There are three layers, in cascade order:
+ *   1. PRIMARIES — the only literal color values in the system (5 seeds,
+ *      plus the 3 independent file-type brand colors). Override these for a
+ *      full rebrand — everything else follows.
+ *   2. SHADES — an internal color-mix() ramp derived from each primary,
+ *      EXCEPT the neutral ramp: --st-neutral-50 through --st-neutral-950
+ *      (the standard 11-step scale) is the one shade ramp meant to be
+ *      overridden directly — every neutral text/background token below
+ *      resolves to one of these 11 steps.
+ *   3. SEMANTIC TOKENS — what components actually consume
+ *      (--st-color-text, --st-radius-md, --st-text-sm, ...), each pointing
+ *      at one shade/scale step. Override a semantic token for a single
+ *      exception, or override a whole scale (spacing/radius/size/type) for
+ *      a density or typography change.
+ *
+ * Only reach for an individual token override (see component READMEs /
+ * source for the full list) when you need an exception the primaries,
+ * neutral palette, and scales below don't cover.
+ */
+:root {
+   /* =========================================================
+     PRIMARIES — override these for a rebrand.
+     ========================================================= */
+   --st-primary-color: oklch(12.9% 0.042 264.695);
+   --st-primary-background: oklch(98.4% 0.003 247.858);
+   --st-neutral-50: var(--st-primary-background);
+   --st-neutral-950: var(--st-primary-color);
+   --st-neutral-100: oklch(from color-mix(in oklch, var(--st-neutral-950) 8%, var(--st-neutral-50)) l calc(c * 2.1) h);
+   --st-neutral-200: oklch(from color-mix(in oklch, var(--st-neutral-950) 15%, var(--st-neutral-50)) l calc(c * 3.0) h);
+   --st-neutral-300: oklch(from color-mix(in oklch, var(--st-neutral-950) 27%, var(--st-neutral-50)) l calc(c * 4.3) h);
+   --st-neutral-400: oklch(from color-mix(in oklch, var(--st-neutral-950) 36%, var(--st-neutral-50)) l calc(c * 5.2) h);
+   --st-neutral-500: oklch(from color-mix(in oklch, var(--st-neutral-950) 49%, var(--st-neutral-50)) l calc(c * 7.0) h);
+   --st-neutral-600: oklch(from color-mix(in oklch, var(--st-neutral-950) 69%, var(--st-neutral-50)) l calc(c * 5.4) h);
+   --st-neutral-700: oklch(from color-mix(in oklch, var(--st-neutral-950) 86%, var(--st-neutral-50)) l calc(c * 3.0) h);
+   --st-neutral-800: oklch(from color-mix(in oklch, var(--st-neutral-950) 93%, var(--st-neutral-50)) l calc(c * 2.3) h);
+   --st-neutral-900: oklch(from color-mix(in oklch, var(--st-neutral-950) 96%, var(--st-neutral-50)) l calc(c * 1.6) h);
+
+
+   /* Brand-like file-type colors are intentionally independent of the accent
+     seed (Word/Excel/PowerPoint have their own identity) — three extra,
+     narrowly-scoped primaries rather than derived shades. */
+   --st-primary-type-word: oklch(0.55 0.13 250);
+   --st-primary-type-excel: oklch(0.55 0.13 145);
+   --st-primary-type-powerpoint: oklch(0.55 0.13 40);
+
+   --st-primary-neutral: var(--st-neutral-50);
+   /* --st-brand-color is deliberately left undefined: set it (on :root) to
+     make the accent, the solid call-to-action buttons and checkboxes all
+     follow one host-app brand color. Unset, each keeps its own default. */
+   --st-primary-accent: var(--st-brand-color, var(--st-neutral-500));
+   --st-primary-danger: oklch(0.6 0.2 25);
+   --st-primary-warning: oklch(0.75 0.16 40);
+   --st-primary-success: oklch(0.55 0.13 145);
+
+   /* Pure white/black anchors for the color-mix() ramps below and the
+     "text/icon on a solid fill" token — not general-purpose literals. */
+   --st-primary-canvas: var(--st-neutral-50);
+   --st-primary-ink: var(--st-neutral-950);
+
+   --st-accent-subtle: color-mix(in oklch, var(--st-primary-accent) 8%, var(--st-primary-canvas));
+   --st-accent-border: color-mix(in oklch, var(--st-primary-accent) 22%, var(--st-primary-canvas));
+   --st-accent-muted: color-mix(in oklch, var(--st-primary-accent) 55%, var(--st-primary-canvas));
+   --st-accent-text: color-mix(in oklch, var(--st-primary-accent) 78%, var(--st-primary-ink));
+
+   --st-danger-subtle: color-mix(in oklch, var(--st-primary-danger) 10%, var(--st-primary-canvas));
+   --st-danger-border: color-mix(in oklch, var(--st-primary-danger) 28%, var(--st-primary-canvas));
+   --st-danger-text: color-mix(in oklch, var(--st-primary-danger) 70%, var(--st-primary-ink));
+
+   --st-warning-subtle: color-mix(in oklch, var(--st-primary-warning) 10%, var(--st-primary-canvas));
+   --st-warning-border: color-mix(in oklch, var(--st-primary-warning) 28%, var(--st-primary-canvas));
+   --st-warning-text: color-mix(in oklch, var(--st-primary-warning) 70%, var(--st-primary-ink));
+
+   --st-success-subtle: color-mix(in oklch, var(--st-primary-success) 20%, var(--st-primary-canvas));
+   --st-success-text: color-mix(in oklch, var(--st-primary-success) 70%, var(--st-primary-ink));
+
+   /* =========================================================
+     SEMANTIC TOKENS — what components actually consume.
+     ========================================================= */
+
+   /* ---- Neutral surfaces & text ---- */
+   --st-color-page: var(--st-neutral-50);
+   --st-color-surface: var(--st-primary-canvas);
+   --st-color-subtle: var(--st-neutral-100);
+   --st-color-divider: var(--st-neutral-200);
+   --st-color-hover: var(--st-neutral-200);
+   --st-color-border: var(--st-neutral-300);
+   --st-color-skeleton: var(--st-neutral-300);
+   --st-color-folder-icon-bg: var(--st-neutral-300);
+   --st-color-border-strong: var(--st-neutral-400);
+   --st-color-text-faint: var(--st-neutral-600);
+   --st-color-text-muted: var(--st-neutral-600);
+   --st-color-text: var(--st-neutral-600);
+   --st-color-text-strong: var(--st-neutral-900);
+
+   /* Text/icon color for content sitting on a solid/dark fill (buttons,
+     avatars, active pills) — never hardcode "white" at the point of use. */
+   --st-color-on-solid: var(--st-primary-canvas);
+
+   /* ---- Accent ramp — derived from --st-primary-accent ---- */
+   --st-color-accent: var(--st-primary-accent);
+   --st-color-accent-subtle: var(--st-accent-subtle);
+   --st-color-accent-border: var(--st-accent-border);
+   --st-color-accent-muted: var(--st-accent-muted);
+   --st-color-accent-text: var(--st-accent-text);
+
+   /* ---- Semantic state ramps — derived from --st-primary-danger/warning/success ---- */
+   --st-color-danger: var(--st-primary-danger);
+   --st-color-danger-subtle: var(--st-danger-subtle);
+   --st-color-danger-border: var(--st-danger-border);
+   --st-color-danger-text: var(--st-danger-text);
+
+   --st-color-warning: var(--st-primary-warning);
+   --st-color-warning-subtle: var(--st-warning-subtle);
+   --st-color-warning-border: var(--st-warning-border);
+   --st-color-warning-text: var(--st-warning-text);
+
+   --st-color-success: var(--st-primary-success);
+   --st-color-success-subtle: var(--st-success-subtle);
+   --st-color-success-text: var(--st-success-text);
+
+   /* ---- File-type badge colors ---- */
+   --st-color-type-word: var(--st-primary-type-word);
+   --st-color-type-excel: var(--st-primary-type-excel);
+   --st-color-type-powerpoint: var(--st-primary-type-powerpoint);
+
+   /* ---- Standalone brand accent (favorites/star marker) ---- */
+   --st-favorite-accent: #f0b429;
+
+   /* ---- <st-status-pill> override points. Consumers set --st-status-hue
+     (or --st-status-bg/--st-status-color directly) on the host element;
+     these root defaults mean the token always resolves, so call sites
+     never need a fallback. ---- */
+   --st-status-hue: var(--st-neutral-hue);
+   --st-status-bg: oklch(0.95 0.05 var(--st-status-hue));
+   --st-status-color: oklch(0.4 0.13 var(--st-status-hue));
+
+   /* ---- Shadow tint — box-shadows are colors too, so they get tokens. ---- */
+   --st-shadow-color-subtle: var(--st-neutral-300);
+   --st-shadow-color-sm: var(--st-neutral-300);
+   --st-shadow-color-md: var(--st-neutral-300);
+   --st-shadow-color-lg: var(--st-neutral-300);
+   --st-shadow-color-xl: var(--st-neutral-300);
+
+   /* =========================================================
+     SPACING SCALE — padding/margin/gap/inset. Named by their px
+     value for exactness; override one step or the whole scale.
+     ========================================================= */
+   --st-space-0: 0;
+   --st-space-2: 2px;
+   --st-space-3: 3px;
+   --st-space-4: 4px;
+   --st-space-5: 5px;
+   --st-space-6: 6px;
+   --st-space-7: 7px;
+   --st-space-8: 8px;
+   --st-space-9: 9px;
+   --st-space-10: 10px;
+   --st-space-11: 11px;
+   --st-space-12: 12px;
+   --st-space-14: 14px;
+   --st-space-16: 16px;
+   --st-space-18: 18px;
+   --st-space-20: 20px;
+   --st-space-22: 22px;
+   --st-space-24: 24px;
+   --st-space-28: 28px;
+   --st-space-30: 30px;
+   --st-space-32: 32px;
+   --st-space-40: 40px;
+   --st-space-44: 44px;
+   --st-space-48: 48px;
+
+   /* =========================================================
+     RADIUS SCALE
+     ========================================================= */
+   --st-radius-none: 0;
+   --st-radius-xs: 4px;
+   --st-radius-sm: 8px;
+   --st-radius-md: 10px;
+   --st-radius-lg: 12px;
+   --st-radius-full: 999px;
+   --st-radius-circle: 50%;
+
+   /* =========================================================
+     CONTROL-SIZE SCALE — square-ish UI controls (checkboxes,
+     icon buttons, avatars, badges, table icon columns).
+     ========================================================= */
+   --st-size-14: 14px;
+   --st-size-16: 16px;
+   --st-size-18: 18px;
+   --st-size-20: 20px;
+   --st-size-24: 24px;
+   --st-size-26: 26px;
+   --st-size-28: 28px;
+   --st-size-30: 30px;
+   --st-size-32: 32px;
+   --st-size-36: 36px;
+   --st-size-38: 38px;
+   --st-size-40: 40px;
+
+   /* =========================================================
+     TYPOGRAPHY TOKENS
+     ========================================================= */
+   --st-font-family: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+
+   --st-text-2xs: 10px;
+   --st-text-xs: 11px;
+   --st-text-sm: 12px;
+   --st-text-base: 13px;
+   --st-text-md: 14px;
+   --st-text-lg: 15px;
+   --st-text-xl: 16px;
+   --st-text-2xl: 20px;
+
+   --st-font-weight-regular: 400;
+   --st-font-weight-medium: 500;
+   --st-font-weight-semibold: 600;
+   --st-font-weight-bold: 700;
+   --st-font-weight-extrabold: 800;
+
+   --st-leading-none: 1;
+   --st-leading-snug: 1.35;
+   --st-leading-normal: 1.4;
+
+   --st-tracking-tight: -0.2px;
+   --st-tracking-normal: 0;
+   --st-tracking-wide: 0.3px;
+   --st-tracking-wider: 0.4px;
+
+   /* =========================================================
+     COMPONENT TOKENS — narrowly-scoped overrides for one piece
+     of chrome, each defaulting to a scale step above. Set them
+     on :root or on the component's host element, the same way
+     as --st-primary-color.
+     ========================================================= */
+
+   /* ---- Wizard step heading/description (<st-template-hub>) ---- */
+   --st-step-heading-font-size: var(--st-text-2xl);
+   --st-step-heading-font-weight: var(--st-font-weight-bold);
+   --st-step-heading-color: var(--st-color-text-strong);
+   --st-step-description-font-size: var(--st-text-base);
+   --st-step-description-color: var(--st-color-text-muted);
+
+   /* ---- Buttons. --st-button-font-size sizes the wizard footer
+     (Back/Next/Finish/...); --st-button-font-size-sm the in-content
+     action buttons (Generate/Regenerate). The primary fill applies
+     to every solid call-to-action button. ---- */
+   --st-button-font-size: var(--st-text-md);
+   --st-button-font-size-sm: var(--st-text-base);
+   --st-button-font-weight: var(--st-font-weight-semibold);
+   --st-button-height: var(--st-size-40);
+   --st-button-radius: var(--st-radius-sm);
+   --st-button-primary-bg: var(--st-brand-color, var(--st-color-text-strong));
+   --st-button-primary-color: var(--st-color-on-solid);
+   --st-button-primary-font-weight: var(--st-font-weight-bold);
+
+   /* ---- Checkboxes/radios (native controls, tinted via accent-color).
+     `auto` = the browser's own color. ---- */
+   --st-checkbox-color: var(--st-brand-color, auto);
+
+   /* ---- Keyboard focus ring, an `outline` shorthand. `auto` = the
+     browser's own ring; e.g. `2px solid #0b5cff` for a custom one. ---- */
+   --st-focus-ring: auto;
+   --st-focus-ring-offset: 0px;
+
+   /* ---- Text inputs (search boxes, file names, new folder, pattern) ---- */
+   --st-input-font-family: var(--st-font-family);
+   --st-input-mono-font-family: ui-monospace, monospace;
+   --st-input-font-size: var(--st-text-base);
+   --st-input-color: var(--st-color-text-strong);
+   --st-input-bg: var(--st-color-surface);
+   --st-input-border-color: var(--st-color-border);
+   --st-input-radius: var(--st-radius-sm);
+
+   /* ---- Wizard frame (<st-template-hub>). Set --st-wizard-bg to
+     `transparent` to sit on the host app's own card/page. ---- */
+   --st-wizard-bg: var(--st-color-page);
+   --st-wizard-subheader-bg: var(--st-color-subtle);
+   --st-wizard-footer-bg: var(--st-color-surface);
+   --st-wizard-footer-height: 64px;
+   --st-wizard-border-color: var(--st-color-border);
+   --st-wizard-content-padding: var(--st-space-24) var(--st-space-32);
+   --st-wizard-content-padding-compact: var(--st-space-16) var(--st-space-18);
+}