@sankhyatronics/sankhya-cms 0.1.9 → 0.1.11

package/dist/schema/index.js

@@ -17,9 +17,13 @@ function patchNodeById(nodes, id, props) {
 var componentTags = {
   BentoGrid: "st-bento-grid",
   Card: "st-card",
+  AttentionPanel: "st-attention-panel",
+  BarChart: "st-bar-chart",
   Carousel: "st-carousel",
+  Chip: "st-chip",
   ContentBlock: "st-content-block",
   CookieConsent: "st-cookie-consent",
+  DateTile: "st-date-tile",
   Dropdown: "st-dropdown",
   FeatureItem: "st-feature-item",
   FeatureSplit: "st-feature-split",
@@ -29,6 +33,7 @@ var componentTags = {
   Hero: "st-hero",
   IconButton: "st-icon-button",
   ItemsAccordion: "st-items-accordion",
+  KpiCard: "st-kpi-card",
   MegaMenu: "st-mega-menu",
   MegaMenuColumn: "st-mega-menu-column",
   MegaMenuFeature: "st-mega-menu-feature",
@@ -36,6 +41,7 @@ var componentTags = {
   MenuGridItem: "st-menu-grid-item",
   MenuItem: "st-menu-item",
   PromoBanner: "st-promo-banner",
+  SegmentedControl: "st-segmented-control",
   Section: "st-section",
   Select: "st-select",
   Stats: "st-stats",

package/dist/schema/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/schema/node.ts","../../src/schema/nodeUtils.ts","../../src/schema/components.ts","../../src/schema/validate.ts"],"sourcesContent":["/** Dependency-free node types, safe to import from the content API layer. */\n\n/** Action reference in JSON, resolved against the `handlers` prop of `DynamicRenderer`. */\nexport type ActionRef = `@action:${string}`;\n\n/** Keys the renderer owns; everything else on a node is passed to the component as a prop. */\nexport interface NodeEnvelope<TNode> {\n    id?: string;\n    /** Named slot in the parent (e.g. Header: \"utility\"). Omit for the default slot. */\n    slot?: string;\n    /** Editor-only label, never passed to the component. */\n    label?: string;\n    children?: TNode[];\n}\n\n/**\n * A node as it appears in JSON: flat, no `data` wrapper.\n * `{ \"type\": \"Hero\", \"id\": \"home-hero\", \"title\": \"...\", \"children\": [...] }`\n */\nexport interface ComponentNode extends NodeEnvelope<ComponentNode> {\n    type: string;\n    [prop: string]: unknown;\n}\n\n/** A page is a list of nodes. */\nexport type PageContent = ComponentNode[];\n\nexport function isComponentNode(value: unknown): value is ComponentNode {\n    return (\n        typeof value === 'object' &&\n        value !== null &&\n        !Array.isArray(value) &&\n        typeof (value as { type?: unknown }).type === 'string' &&\n        (value as { type: string }).type.trim().length > 0\n    );\n}\n","import type { ComponentNode } from './node';\n\n/**\n * Returns a copy of `nodes` where the node with the given `id` has `props` merged in.\n * Use it to inject runtime state (e.g. the selected language) into fetched JSON without mutating it.\n */\nexport function patchNodeById(nodes: ComponentNode[], id: string, props: Record<string, unknown>): ComponentNode[] {\n    return nodes.map(node => {\n        const patched = node.id === id ? { ...node, ...props } : node;\n        return patched.children\n            ? { ...patched, children: patchNodeById(patched.children, id, props) }\n            : patched;\n    });\n}\n","/**\n * The JSON `type` of every base component, and the Lit element that renders it.\n * This is the contract page JSON is written against — renderers (React, or any other binding)\n * map each `type` to their own component for that element.\n */\nexport const componentTags = {\n    BentoGrid: 'st-bento-grid',\n    Card: 'st-card',\n    Carousel: 'st-carousel',\n    ContentBlock: 'st-content-block',\n    CookieConsent: 'st-cookie-consent',\n    Dropdown: 'st-dropdown',\n    FeatureItem: 'st-feature-item',\n    FeatureSplit: 'st-feature-split',\n    FeaturesSection: 'st-features-section',\n    Footer: 'st-footer',\n    Header: 'st-header',\n    Hero: 'st-hero',\n    IconButton: 'st-icon-button',\n    ItemsAccordion: 'st-items-accordion',\n    MegaMenu: 'st-mega-menu',\n    MegaMenuColumn: 'st-mega-menu-column',\n    MegaMenuFeature: 'st-mega-menu-feature',\n    MenuGrid: 'st-menu-grid',\n    MenuGridItem: 'st-menu-grid-item',\n    MenuItem: 'st-menu-item',\n    PromoBanner: 'st-promo-banner',\n    Section: 'st-section',\n    Select: 'st-select',\n    Stats: 'st-stats',\n    Testimonials: 'st-testimonials'\n} as const;\n\n/** Every `type` the base set knows. */\nexport type ComponentType = keyof typeof componentTags;\n\nexport function isBaseComponentType(type: string): type is ComponentType {\n    return Object.hasOwn(componentTags, type);\n}\n","import { isBaseComponentType } from './components';\nimport type { ComponentNode } from './node';\n\n/** Keys from the pre-flat schema; their presence means the JSON still needs `scripts/migrate-json.mjs`. */\nconst LEGACY_KEYS = ['data', 'embeddedView', 'data-position', 'image', 'contentUrl'] as const;\n\n/**\n * Returns the schema violations for a node and its descendants (empty when valid).\n * `isKnownType` defaults to the base component set; pass a wider predicate when a renderer also\n * registers custom components.\n */\nexport function validateNode(node: unknown, where = 'node', isKnownType: (type: string) => boolean = isBaseComponentType): string[] {\n    if (typeof node !== 'object' || node === null || Array.isArray(node)) return [`${where}: node must be an object`];\n    const n = node as ComponentNode;\n    const found: string[] = [];\n    if (typeof n.type !== 'string' || !isKnownType(n.type)) found.push(`${where}: unknown type \"${String(n.type)}\"`);\n    for (const legacy of LEGACY_KEYS) {\n        if (legacy in n) found.push(`${where}: legacy key \"${legacy}\"`);\n    }\n    if (Array.isArray(n.items) && n.items.some(item => typeof item === 'object' && item !== null && 'type' in item)) {\n        found.push(`${where}: \"items\" must hold plain data; nest components under \"children\"`);\n    }\n    if (n.children !== undefined) {\n        if (!Array.isArray(n.children)) found.push(`${where}: children must be an array`);\n        else n.children.forEach((child, i) => found.push(...validateNode(child, `${where}.children[${i}]`, isKnownType)));\n    }\n    return found;\n}\n\n/** Validates a page: a node or a list of nodes. */\nexport function validatePage(page: unknown, isKnownType?: (type: string) => boolean): string[] {\n    const nodes = Array.isArray(page) ? page : [page];\n    return nodes.flatMap((node, i) => validateNode(node, `[${i}]`, isKnownType));\n}\n"],"mappings":";;;AA2BO,SAAS,gBAAgB,OAAwC;AACpE,SACI,OAAO,UAAU,YACjB,UAAU,QACV,CAAC,MAAM,QAAQ,KAAK,KACpB,OAAQ,MAA6B,SAAS,YAC7C,MAA2B,KAAK,KAAK,EAAE,SAAS;AAEzD;;;AC7BO,SAAS,cAAc,OAAwB,IAAY,OAAiD;AAC/G,SAAO,MAAM,IAAI,UAAQ;AACrB,UAAM,UAAU,KAAK,OAAO,KAAK,EAAE,GAAG,MAAM,GAAG,MAAM,IAAI;AACzD,WAAO,QAAQ,WACT,EAAE,GAAG,SAAS,UAAU,cAAc,QAAQ,UAAU,IAAI,KAAK,EAAE,IACnE;AAAA,EACV,CAAC;AACL;;;ACRO,IAAM,gBAAgB;AAAA,EACzB,WAAW;AAAA,EACX,MAAM;AAAA,EACN,UAAU;AAAA,EACV,cAAc;AAAA,EACd,eAAe;AAAA,EACf,UAAU;AAAA,EACV,aAAa;AAAA,EACb,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,cAAc;AAAA,EACd,UAAU;AAAA,EACV,aAAa;AAAA,EACb,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,cAAc;AAClB;AAKO,SAAS,oBAAoB,MAAqC;AACrE,SAAO,OAAO,OAAO,eAAe,IAAI;AAC5C;;;AClCA,IAAM,cAAc,CAAC,QAAQ,gBAAgB,iBAAiB,SAAS,YAAY;AAO5E,SAAS,aAAa,MAAe,QAAQ,QAAQ,cAAyC,qBAA+B;AAChI,MAAI,OAAO,SAAS,YAAY,SAAS,QAAQ,MAAM,QAAQ,IAAI,EAAG,QAAO,CAAC,GAAG,KAAK,0BAA0B;AAChH,QAAM,IAAI;AACV,QAAM,QAAkB,CAAC;AACzB,MAAI,OAAO,EAAE,SAAS,YAAY,CAAC,YAAY,EAAE,IAAI,EAAG,OAAM,KAAK,GAAG,KAAK,mBAAmB,OAAO,EAAE,IAAI,CAAC,GAAG;AAC/G,aAAW,UAAU,aAAa;AAC9B,QAAI,UAAU,EAAG,OAAM,KAAK,GAAG,KAAK,iBAAiB,MAAM,GAAG;AAAA,EAClE;AACA,MAAI,MAAM,QAAQ,EAAE,KAAK,KAAK,EAAE,MAAM,KAAK,UAAQ,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,IAAI,GAAG;AAC7G,UAAM,KAAK,GAAG,KAAK,kEAAkE;AAAA,EACzF;AACA,MAAI,EAAE,aAAa,QAAW;AAC1B,QAAI,CAAC,MAAM,QAAQ,EAAE,QAAQ,EAAG,OAAM,KAAK,GAAG,KAAK,6BAA6B;AAAA,QAC3E,GAAE,SAAS,QAAQ,CAAC,OAAO,MAAM,MAAM,KAAK,GAAG,aAAa,OAAO,GAAG,KAAK,aAAa,CAAC,KAAK,WAAW,CAAC,CAAC;AAAA,EACpH;AACA,SAAO;AACX;AAGO,SAAS,aAAa,MAAe,aAAmD;AAC3F,QAAM,QAAQ,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;AAChD,SAAO,MAAM,QAAQ,CAAC,MAAM,MAAM,aAAa,MAAM,IAAI,CAAC,KAAK,WAAW,CAAC;AAC/E;","names":[]}
+{"version":3,"sources":["../../src/schema/node.ts","../../src/schema/nodeUtils.ts","../../src/schema/components.ts","../../src/schema/validate.ts"],"sourcesContent":["/** Dependency-free node types, safe to import from the content API layer. */\n\n/** Action reference in JSON, resolved against the `handlers` prop of `DynamicRenderer`. */\nexport type ActionRef = `@action:${string}`;\n\n/** Keys the renderer owns; everything else on a node is passed to the component as a prop. */\nexport interface NodeEnvelope<TNode> {\n    id?: string;\n    /** Named slot in the parent (e.g. Header: \"utility\"). Omit for the default slot. */\n    slot?: string;\n    /** Editor-only label, never passed to the component. */\n    label?: string;\n    children?: TNode[];\n}\n\n/**\n * A node as it appears in JSON: flat, no `data` wrapper.\n * `{ \"type\": \"Hero\", \"id\": \"home-hero\", \"title\": \"...\", \"children\": [...] }`\n */\nexport interface ComponentNode extends NodeEnvelope<ComponentNode> {\n    type: string;\n    [prop: string]: unknown;\n}\n\n/** A page is a list of nodes. */\nexport type PageContent = ComponentNode[];\n\nexport function isComponentNode(value: unknown): value is ComponentNode {\n    return (\n        typeof value === 'object' &&\n        value !== null &&\n        !Array.isArray(value) &&\n        typeof (value as { type?: unknown }).type === 'string' &&\n        (value as { type: string }).type.trim().length > 0\n    );\n}\n","import type { ComponentNode } from './node';\n\n/**\n * Returns a copy of `nodes` where the node with the given `id` has `props` merged in.\n * Use it to inject runtime state (e.g. the selected language) into fetched JSON without mutating it.\n */\nexport function patchNodeById(nodes: ComponentNode[], id: string, props: Record<string, unknown>): ComponentNode[] {\n    return nodes.map(node => {\n        const patched = node.id === id ? { ...node, ...props } : node;\n        return patched.children\n            ? { ...patched, children: patchNodeById(patched.children, id, props) }\n            : patched;\n    });\n}\n","/**\n * The JSON `type` of every base component, and the Lit element that renders it.\n * This is the contract page JSON is written against — renderers (React, or any other binding)\n * map each `type` to their own component for that element.\n */\nexport const componentTags = {\n    BentoGrid: 'st-bento-grid',\n    Card: 'st-card',\n    AttentionPanel: 'st-attention-panel',\n    BarChart: 'st-bar-chart',\n    Carousel: 'st-carousel',\n    Chip: 'st-chip',\n    ContentBlock: 'st-content-block',\n    CookieConsent: 'st-cookie-consent',\n    DateTile: 'st-date-tile',\n    Dropdown: 'st-dropdown',\n    FeatureItem: 'st-feature-item',\n    FeatureSplit: 'st-feature-split',\n    FeaturesSection: 'st-features-section',\n    Footer: 'st-footer',\n    Header: 'st-header',\n    Hero: 'st-hero',\n    IconButton: 'st-icon-button',\n    ItemsAccordion: 'st-items-accordion',\n    KpiCard: 'st-kpi-card',\n    MegaMenu: 'st-mega-menu',\n    MegaMenuColumn: 'st-mega-menu-column',\n    MegaMenuFeature: 'st-mega-menu-feature',\n    MenuGrid: 'st-menu-grid',\n    MenuGridItem: 'st-menu-grid-item',\n    MenuItem: 'st-menu-item',\n    PromoBanner: 'st-promo-banner',\n    SegmentedControl: 'st-segmented-control',\n    Section: 'st-section',\n    Select: 'st-select',\n    Stats: 'st-stats',\n    Testimonials: 'st-testimonials'\n} as const;\n\n/** Every `type` the base set knows. */\nexport type ComponentType = keyof typeof componentTags;\n\nexport function isBaseComponentType(type: string): type is ComponentType {\n    return Object.hasOwn(componentTags, type);\n}\n","import { isBaseComponentType } from './components';\nimport type { ComponentNode } from './node';\n\n/** Keys from the pre-flat schema; their presence means the JSON still needs `scripts/migrate-json.mjs`. */\nconst LEGACY_KEYS = ['data', 'embeddedView', 'data-position', 'image', 'contentUrl'] as const;\n\n/**\n * Returns the schema violations for a node and its descendants (empty when valid).\n * `isKnownType` defaults to the base component set; pass a wider predicate when a renderer also\n * registers custom components.\n */\nexport function validateNode(node: unknown, where = 'node', isKnownType: (type: string) => boolean = isBaseComponentType): string[] {\n    if (typeof node !== 'object' || node === null || Array.isArray(node)) return [`${where}: node must be an object`];\n    const n = node as ComponentNode;\n    const found: string[] = [];\n    if (typeof n.type !== 'string' || !isKnownType(n.type)) found.push(`${where}: unknown type \"${String(n.type)}\"`);\n    for (const legacy of LEGACY_KEYS) {\n        if (legacy in n) found.push(`${where}: legacy key \"${legacy}\"`);\n    }\n    if (Array.isArray(n.items) && n.items.some(item => typeof item === 'object' && item !== null && 'type' in item)) {\n        found.push(`${where}: \"items\" must hold plain data; nest components under \"children\"`);\n    }\n    if (n.children !== undefined) {\n        if (!Array.isArray(n.children)) found.push(`${where}: children must be an array`);\n        else n.children.forEach((child, i) => found.push(...validateNode(child, `${where}.children[${i}]`, isKnownType)));\n    }\n    return found;\n}\n\n/** Validates a page: a node or a list of nodes. */\nexport function validatePage(page: unknown, isKnownType?: (type: string) => boolean): string[] {\n    const nodes = Array.isArray(page) ? page : [page];\n    return nodes.flatMap((node, i) => validateNode(node, `[${i}]`, isKnownType));\n}\n"],"mappings":";;;AA2BO,SAAS,gBAAgB,OAAwC;AACpE,SACI,OAAO,UAAU,YACjB,UAAU,QACV,CAAC,MAAM,QAAQ,KAAK,KACpB,OAAQ,MAA6B,SAAS,YAC7C,MAA2B,KAAK,KAAK,EAAE,SAAS;AAEzD;;;AC7BO,SAAS,cAAc,OAAwB,IAAY,OAAiD;AAC/G,SAAO,MAAM,IAAI,UAAQ;AACrB,UAAM,UAAU,KAAK,OAAO,KAAK,EAAE,GAAG,MAAM,GAAG,MAAM,IAAI;AACzD,WAAO,QAAQ,WACT,EAAE,GAAG,SAAS,UAAU,cAAc,QAAQ,UAAU,IAAI,KAAK,EAAE,IACnE;AAAA,EACV,CAAC;AACL;;;ACRO,IAAM,gBAAgB;AAAA,EACzB,WAAW;AAAA,EACX,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,UAAU;AAAA,EACV,MAAM;AAAA,EACN,cAAc;AAAA,EACd,eAAe;AAAA,EACf,UAAU;AAAA,EACV,UAAU;AAAA,EACV,aAAa;AAAA,EACb,cAAc;AAAA,EACd,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB,UAAU;AAAA,EACV,cAAc;AAAA,EACd,UAAU;AAAA,EACV,aAAa;AAAA,EACb,kBAAkB;AAAA,EAClB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,cAAc;AAClB;AAKO,SAAS,oBAAoB,MAAqC;AACrE,SAAO,OAAO,OAAO,eAAe,IAAI;AAC5C;;;ACxCA,IAAM,cAAc,CAAC,QAAQ,gBAAgB,iBAAiB,SAAS,YAAY;AAO5E,SAAS,aAAa,MAAe,QAAQ,QAAQ,cAAyC,qBAA+B;AAChI,MAAI,OAAO,SAAS,YAAY,SAAS,QAAQ,MAAM,QAAQ,IAAI,EAAG,QAAO,CAAC,GAAG,KAAK,0BAA0B;AAChH,QAAM,IAAI;AACV,QAAM,QAAkB,CAAC;AACzB,MAAI,OAAO,EAAE,SAAS,YAAY,CAAC,YAAY,EAAE,IAAI,EAAG,OAAM,KAAK,GAAG,KAAK,mBAAmB,OAAO,EAAE,IAAI,CAAC,GAAG;AAC/G,aAAW,UAAU,aAAa;AAC9B,QAAI,UAAU,EAAG,OAAM,KAAK,GAAG,KAAK,iBAAiB,MAAM,GAAG;AAAA,EAClE;AACA,MAAI,MAAM,QAAQ,EAAE,KAAK,KAAK,EAAE,MAAM,KAAK,UAAQ,OAAO,SAAS,YAAY,SAAS,QAAQ,UAAU,IAAI,GAAG;AAC7G,UAAM,KAAK,GAAG,KAAK,kEAAkE;AAAA,EACzF;AACA,MAAI,EAAE,aAAa,QAAW;AAC1B,QAAI,CAAC,MAAM,QAAQ,EAAE,QAAQ,EAAG,OAAM,KAAK,GAAG,KAAK,6BAA6B;AAAA,QAC3E,GAAE,SAAS,QAAQ,CAAC,OAAO,MAAM,MAAM,KAAK,GAAG,aAAa,OAAO,GAAG,KAAK,aAAa,CAAC,KAAK,WAAW,CAAC,CAAC;AAAA,EACpH;AACA,SAAO;AACX;AAGO,SAAS,aAAa,MAAe,aAAmD;AAC3F,QAAM,QAAQ,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI;AAChD,SAAO,MAAM,QAAQ,CAAC,MAAM,MAAM,aAAa,MAAM,IAAI,CAAC,KAAK,WAAW,CAAC;AAC/E;","names":[]}

package/dist/segmented-control/index.d.ts

@@ -0,0 +1,30 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+interface SegmentedOption {
+    value: string;
+    label: string;
+}
+/** Fired when a segment is chosen. `detail.value` is the chosen option's `value`. */
+interface SegmentChangeEventDetail {
+    value: string;
+}
+/**
+ * A row of mutually exclusive segments in a grey track, one of them lifted as white. Pass the
+ * segments as `options` and the chosen one as `value`; a `segment-change` event fires on choice.
+ * Keyboard: arrows move between segments, Home and End jump to the ends.
+ */
+declare class SegmentedControl extends LitElement {
+    static styles: lit.CSSResult;
+    /** The segments, in order. */
+    options: SegmentedOption[];
+    /** The chosen segment's `value`. */
+    value: string;
+    /** Names the group for assistive technology. */
+    groupLabel: string;
+    private select;
+    private onKeydown;
+    render(): lit.TemplateResult<1>;
+}
+
+export { type SegmentChangeEventDetail, SegmentedControl, type SegmentedOption };

package/dist/segmented-control/index.js

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

package/dist/segmented-control/index.js.map

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

package/dist/theme.css

@@ -29,8 +29,8 @@
    /* =========================================================
      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-primary-color: #14171F;
+   --st-primary-background: #F6F7F9;
    --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);
@@ -55,16 +55,37 @@
    /* --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);
+   --st-primary-accent: var(--st-brand-color, #3557E0);
+   --st-primary-danger: #C0364A;
+   --st-primary-warning: #B4610E;
+   --st-primary-success: #12805C;
 
    /* 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-canvas: #FFFFFF;
    --st-primary-ink: var(--st-neutral-950);
 
+   /* Fixed surface, line and text anchors. Named literals so the semantic
+     tokens below can match the design spec exactly. Themes that re-tint the
+     page (themes.css) do not change these. */
+   --st-primary-line: #E6E8EC;
+   --st-primary-divider: #EEF0F3;
+   --st-primary-text-secondary: #4B5263;
+   --st-primary-text-muted: #666E80;
+
+   /* Brand soft/ink: fixed, so they do not follow --st-brand-color. */
+   --st-primary-brand-soft: #EEF2FE;
+   --st-primary-brand-ink: #2440B8;
+
+   /* Status: the spec colour is for dots, icons and borders. Text on a soft
+     background uses the darker variant so it passes WCAG AA (4.5:1). */
+   --st-primary-success-soft: #E7F6F0;
+   --st-primary-warning-soft: #FDF3E6;
+   --st-primary-danger-soft: #FCECEE;
+   --st-primary-success-text: #0F6E4E;
+   --st-primary-warning-text: #8A4A0B;
+   --st-primary-danger-text: #B02E41;
+
    --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));
@@ -89,16 +110,17 @@
    --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-divider: var(--st-primary-divider);
    --st-color-hover: var(--st-neutral-200);
-   --st-color-border: var(--st-neutral-300);
+   --st-color-border: var(--st-primary-line);
    --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);
+   --st-color-text-faint: var(--st-primary-text-muted);
+   --st-color-text-muted: var(--st-primary-text-muted);
+   --st-color-text-secondary: var(--st-primary-text-secondary);
+   --st-color-text: var(--st-neutral-950);
+   --st-color-text-strong: var(--st-neutral-950);
 
    /* Text/icon color for content sitting on a solid/dark fill (buttons,
      avatars, active pills) — never hardcode "white" at the point of use. */
@@ -111,20 +133,27 @@
    --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 ---- */
+   /* Brand aliases for the design spec: primary = the accent, primary-soft and
+     primary-ink are the fixed brand tints (see --st-primary-brand-*). */
+   --st-color-primary: var(--st-color-accent);
+   --st-color-primary-soft: var(--st-primary-brand-soft);
+   --st-color-primary-ink: var(--st-primary-brand-ink);
+
+   /* ---- Semantic state ramps — status colour for dots, icons and borders;
+     the soft background and text tokens are fixed for contrast. ---- */
    --st-color-danger: var(--st-primary-danger);
-   --st-color-danger-subtle: var(--st-danger-subtle);
+   --st-color-danger-subtle: var(--st-primary-danger-soft);
    --st-color-danger-border: var(--st-danger-border);
-   --st-color-danger-text: var(--st-danger-text);
+   --st-color-danger-text: var(--st-primary-danger-text);
 
    --st-color-warning: var(--st-primary-warning);
-   --st-color-warning-subtle: var(--st-warning-subtle);
+   --st-color-warning-subtle: var(--st-primary-warning-soft);
    --st-color-warning-border: var(--st-warning-border);
-   --st-color-warning-text: var(--st-warning-text);
+   --st-color-warning-text: var(--st-primary-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);
+   --st-color-success-subtle: var(--st-primary-success-soft);
+   --st-color-success-text: var(--st-primary-success-text);
 
    /* ---- File-type badge colors ---- */
    --st-color-type-word: var(--st-primary-type-word);
@@ -149,6 +178,11 @@
    --st-shadow-color-lg: var(--st-neutral-300);
    --st-shadow-color-xl: var(--st-neutral-300);
 
+   /* ---- Elevation presets, for the design spec's card and primary button.
+     Components reference these rather than writing their own shadows. ---- */
+   --st-shadow-card: 0 1px 2px rgba(20, 23, 31, 0.04);
+   --st-shadow-button-primary: 0 1px 2px rgba(53, 87, 224, 0.25), 0 4px 12px rgba(53, 87, 224, 0.18);
+
    /* =========================================================
      SPACING SCALE — padding/margin/gap/inset. Named by their px
      value for exactness; override one step or the whole scale.
@@ -185,7 +219,7 @@
    --st-radius-xs: 4px;
    --st-radius-sm: 8px;
    --st-radius-md: 10px;
-   --st-radius-lg: 12px;
+   --st-radius-lg: 14px;
    --st-radius-full: 999px;
    --st-radius-circle: 50%;
 
@@ -209,7 +243,10 @@
    /* =========================================================
      TYPOGRAPHY TOKENS
      ========================================================= */
-   --st-font-family: system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+   /* Inter is loaded by @sankhyatronics/sankhya-cms/fonts.css. */
+   --st-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+   /* Figures (KPIs, amounts, table numbers) line up in columns. */
+   --st-numeric-features: tabular-nums;
 
    --st-text-2xs: 10px;
    --st-text-xs: 11px;
@@ -219,6 +256,9 @@
    --st-text-lg: 15px;
    --st-text-xl: 16px;
    --st-text-2xl: 20px;
+   --st-text-3xl: 28px;
+   --st-text-kpi: 34px;
+   --st-text-hero: 40px;
 
    --st-font-weight-regular: 400;
    --st-font-weight-medium: 500;
@@ -234,6 +274,7 @@
    --st-tracking-normal: 0;
    --st-tracking-wide: 0.3px;
    --st-tracking-wider: 0.4px;
+   --st-tracking-display: -0.02em;
 
    /* =========================================================
      COMPONENT TOKENS — narrowly-scoped overrides for one piece
@@ -257,10 +298,11 @@
    --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-radius: var(--st-radius-md);
+   --st-button-primary-bg: var(--st-color-accent);
    --st-button-primary-color: var(--st-color-on-solid);
-   --st-button-primary-font-weight: var(--st-font-weight-bold);
+   --st-button-primary-font-weight: var(--st-font-weight-semibold);
+   --st-button-primary-shadow: var(--st-shadow-button-primary);
 
    /* ---- Checkboxes/radios (native controls, tinted via accent-color).
      `auto` = the browser's own color. ---- */
@@ -268,8 +310,8 @@
 
    /* ---- 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;
+   --st-focus-ring: 2px solid var(--st-color-accent);
+   --st-focus-ring-offset: 2px;
 
    /* ---- Text inputs (search boxes, file names, new folder, pattern) ---- */
    --st-input-font-family: var(--st-font-family);
@@ -278,7 +320,14 @@
    --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);
+   --st-input-radius: var(--st-radius-md);
+
+   /* ---- Cards and page chrome ---- */
+   --st-card-radius: var(--st-radius-lg);
+   --st-card-padding: var(--st-space-24);
+   --st-card-shadow: var(--st-shadow-card);
+   --st-page-padding: var(--st-space-32) var(--st-space-40);
+   --st-page-gap: var(--st-space-20);
 
    /* ---- Wizard frame (<st-template-hub>). Set --st-wizard-bg to
      `transparent` to sit on the host app's own card/page. ---- */

package/dist/themes.css

@@ -2,6 +2,26 @@
    --st-primary-color: oklch(97.913% 0.00011 271.152);
    --st-primary-background: oklch(11.862% 0.03663 260.411 / 0.808);
    --st-font-family: "Open Sans";
+
+   /* The light-theme literals in theme.css, re-set for dark. Not part of the
+     light design spec: these keep every surface, line and status readable. */
+   --st-primary-canvas: #1B1F2B;
+   --st-primary-accent: var(--st-brand-color, #6F8BFF);
+   --st-primary-line: #2A3142;
+   --st-primary-divider: #232937;
+   --st-primary-text-secondary: #B9C0CE;
+   --st-primary-text-muted: #9AA2B5;
+   --st-primary-brand-soft: #1E2A4F;
+   --st-primary-brand-ink: #AFC3FF;
+   --st-primary-success: #2FB97F;
+   --st-primary-warning: #E0893A;
+   --st-primary-danger: #E0576B;
+   --st-primary-success-soft: #123329;
+   --st-primary-warning-soft: #3A2A12;
+   --st-primary-danger-soft: #3B1A22;
+   --st-primary-success-text: #6EDCA9;
+   --st-primary-warning-text: #F5C27A;
+   --st-primary-danger-text: #FF9AA8;
 }
 
 :root.red {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sankhyatronics/sankhya-cms",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "repository": {
     "type": "git",
     "url": "https://github.com/sankhyatronics/SankhyaCMS.git",
@@ -18,6 +18,7 @@
     },
     "./cms-theme.css": "./dist/cms-theme.css",
     "./theme.css": "./dist/theme.css",
+    "./fonts.css": "./dist/fonts.css",
     "./themes.css": "./dist/themes.css",
     "./bento-grid": {
       "types": "./dist/bento-grid/index.d.ts",
@@ -27,6 +28,30 @@
       "types": "./dist/card/index.d.ts",
       "import": "./dist/card/index.js"
     },
+    "./attention-panel": {
+      "types": "./dist/attention-panel/index.d.ts",
+      "import": "./dist/attention-panel/index.js"
+    },
+    "./bar-chart": {
+      "types": "./dist/bar-chart/index.d.ts",
+      "import": "./dist/bar-chart/index.js"
+    },
+    "./chip": {
+      "types": "./dist/chip/index.d.ts",
+      "import": "./dist/chip/index.js"
+    },
+    "./date-tile": {
+      "types": "./dist/date-tile/index.d.ts",
+      "import": "./dist/date-tile/index.js"
+    },
+    "./kpi-card": {
+      "types": "./dist/kpi-card/index.d.ts",
+      "import": "./dist/kpi-card/index.js"
+    },
+    "./segmented-control": {
+      "types": "./dist/segmented-control/index.d.ts",
+      "import": "./dist/segmented-control/index.js"
+    },
     "./carousel": {
       "types": "./dist/carousel/index.d.ts",
       "import": "./dist/carousel/index.js"
@@ -135,6 +160,7 @@
   ],
   "sideEffects": true,
   "dependencies": {
+    "@fontsource/inter": "^5.3.0",
     "dompurify": "^3.4.16",
     "iconify-icon": "^3.0.3",
     "lit": "^3.3.3",
@@ -151,7 +177,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsup src/index.ts src/schema/index.ts src/theming/index.ts src/shared/styles.ts src/shared/icons.ts src/bento-grid/index.ts src/card/index.ts src/carousel/index.ts src/content-block/index.ts src/cookie-consent/index.ts src/dropdown/index.ts src/feature-split/index.ts src/features-section/index.ts src/footer/index.ts src/header/index.ts src/hero/index.ts src/icon-button/index.ts src/items-accordion/index.ts src/markdown/index.ts src/mega-menu/index.ts src/menu-grid/index.ts src/menu-grid-item/index.ts src/menu-item/index.ts src/promo-banner/index.ts src/section/index.ts src/select/index.ts src/stats/index.ts src/testimonials/index.ts --format esm --dts --sourcemap --clean && node scripts/copy-theme.mjs && cem analyze",
+    "build": "tsup src/index.ts src/schema/index.ts src/theming/index.ts src/shared/styles.ts src/shared/icons.ts src/attention-panel/index.ts src/bar-chart/index.ts src/chip/index.ts src/date-tile/index.ts src/kpi-card/index.ts src/segmented-control/index.ts src/bento-grid/index.ts src/card/index.ts src/carousel/index.ts src/content-block/index.ts src/cookie-consent/index.ts src/dropdown/index.ts src/feature-split/index.ts src/features-section/index.ts src/footer/index.ts src/header/index.ts src/hero/index.ts src/icon-button/index.ts src/items-accordion/index.ts src/markdown/index.ts src/mega-menu/index.ts src/menu-grid/index.ts src/menu-grid-item/index.ts src/menu-item/index.ts src/promo-banner/index.ts src/section/index.ts src/select/index.ts src/stats/index.ts src/testimonials/index.ts --format esm --dts --sourcemap --clean && node scripts/copy-theme.mjs && node scripts/copy-fonts.mjs && cem analyze",
     "dev": "tsup src/index.ts --watch --format esm --dts",
     "typecheck": "tsc --noEmit",
     "lint": "oxlint",