@sankhyatronics/sankhya-cms 0.1.10 → 0.1.11

package/dist/chunk-MG2VTZA4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/segmented-control/SegmentedControl.ts"],"sourcesContent":["import { LitElement, css, html, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { fontFamilyStyles } from '../shared/styles';\n\nexport interface SegmentedOption {\n  value: string;\n  label: string;\n}\n\n/** Fired when a segment is chosen. `detail.value` is the chosen option's `value`. */\nexport interface SegmentChangeEventDetail {\n  value: string;\n}\n\n/**\n * A row of mutually exclusive segments in a grey track, one of them lifted as white. Pass the\n * segments as `options` and the chosen one as `value`; a `segment-change` event fires on choice.\n * Keyboard: arrows move between segments, Home and End jump to the ends.\n */\n@customElement('st-segmented-control')\nexport class SegmentedControl extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      display: inline-flex;\n      max-width: 100%;\n    }\n\n    .track {\n      display: flex;\n      gap: var(--st-space-2);\n      padding: var(--st-space-3);\n      border-radius: var(--st-radius-md);\n      background: var(--st-color-subtle);\n      max-width: 100%;\n    }\n\n    button {\n      appearance: none;\n      border: 0;\n      border-radius: var(--st-radius-sm);\n      padding: var(--st-space-6) var(--st-space-14);\n      background: transparent;\n      color: var(--st-color-text-secondary);\n      font: inherit;\n      font-size: var(--st-text-base);\n      font-weight: var(--st-font-weight-medium);\n      white-space: nowrap;\n      cursor: pointer;\n    }\n\n    button[aria-checked='true'] {\n      background: var(--st-color-surface);\n      color: var(--st-color-text-strong);\n      font-weight: var(--st-font-weight-semibold);\n      box-shadow: 0 1px 2px rgba(20, 23, 31, 0.08);\n    }\n\n    button:focus-visible {\n      outline: 2px solid var(--st-color-accent);\n      outline-offset: 1px;\n    }\n\n    button:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  `;\n\n  /** The segments, in order. */\n  @property({ attribute: false })\n  options: SegmentedOption[] = [];\n\n  /** The chosen segment's `value`. */\n  @property({ type: String, reflect: true })\n  value = '';\n\n  /** Names the group for assistive technology. */\n  @property({ type: String, attribute: 'group-label' })\n  groupLabel = '';\n\n  private select(next: string) {\n    if (next === this.value) return;\n    this.value = next;\n    this.dispatchEvent(\n      new CustomEvent<SegmentChangeEventDetail>('segment-change', {\n        detail: { value: next },\n        bubbles: true,\n        composed: true\n      })\n    );\n  }\n\n  private onKeydown(event: KeyboardEvent) {\n    const enabled = this.options;\n    if (!enabled.length) return;\n    const index = enabled.findIndex(option => option.value === this.value);\n    let next: number | null = null;\n    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') next = (index + 1) % enabled.length;\n    if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') next = (index - 1 + enabled.length) % enabled.length;\n    if (event.key === 'Home') next = 0;\n    if (event.key === 'End') next = enabled.length - 1;\n    if (next === null) return;\n    event.preventDefault();\n    this.select(enabled[next].value);\n    this.renderRoot.querySelector<HTMLButtonElement>(`button[data-value=\"${enabled[next].value}\"]`)?.focus();\n  }\n\n  render() {\n    return html`<div class=\"track\" role=\"radiogroup\" aria-label=${this.groupLabel || nothing} @keydown=${this.onKeydown}>\n      ${this.options.map(\n        option => html`<button\n          type=\"button\"\n          role=\"radio\"\n          data-value=${option.value}\n          aria-checked=${option.value === this.value ? 'true' : 'false'}\n          tabindex=${option.value === this.value ? 0 : -1}\n          @click=${() => this.select(option.value)}\n        >${option.label}</button>`\n      )}\n    </div>`;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAoBjC,IAAM,mBAAN,cAA+B,WAAW;AAAA,EAA1C;AAAA;AAoDL,mBAA6B,CAAC;AAI9B,iBAAQ;AAIR,sBAAa;AAAA;AAAA,EAEL,OAAO,MAAc;AAC3B,QAAI,SAAS,KAAK,MAAO;AACzB,SAAK,QAAQ;AACb,SAAK;AAAA,MACH,IAAI,YAAsC,kBAAkB;AAAA,QAC1D,QAAQ,EAAE,OAAO,KAAK;AAAA,QACtB,SAAS;AAAA,QACT,UAAU;AAAA,MACZ,CAAC;AAAA,IACH;AAAA,EACF;AAAA,EAEQ,UAAU,OAAsB;AACtC,UAAM,UAAU,KAAK;AACrB,QAAI,CAAC,QAAQ,OAAQ;AACrB,UAAM,QAAQ,QAAQ,UAAU,YAAU,OAAO,UAAU,KAAK,KAAK;AACrE,QAAI,OAAsB;AAC1B,QAAI,MAAM,QAAQ,gBAAgB,MAAM,QAAQ,YAAa,SAAQ,QAAQ,KAAK,QAAQ;AAC1F,QAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,UAAW,SAAQ,QAAQ,IAAI,QAAQ,UAAU,QAAQ;AACxG,QAAI,MAAM,QAAQ,OAAQ,QAAO;AACjC,QAAI,MAAM,QAAQ,MAAO,QAAO,QAAQ,SAAS;AACjD,QAAI,SAAS,KAAM;AACnB,UAAM,eAAe;AACrB,SAAK,OAAO,QAAQ,IAAI,EAAE,KAAK;AAC/B,SAAK,WAAW,cAAiC,sBAAsB,QAAQ,IAAI,EAAE,KAAK,IAAI,GAAG,MAAM;AAAA,EACzG;AAAA,EAEA,SAAS;AACP,WAAO,uDAAuD,KAAK,cAAc,OAAO,aAAa,KAAK,SAAS;AAAA,QAC/G,KAAK,QAAQ;AAAA,MACb,YAAU;AAAA;AAAA;AAAA,uBAGK,OAAO,KAAK;AAAA,yBACV,OAAO,UAAU,KAAK,QAAQ,SAAS,OAAO;AAAA,qBAClD,OAAO,UAAU,KAAK,QAAQ,IAAI,EAAE;AAAA,mBACtC,MAAM,KAAK,OAAO,OAAO,KAAK,CAAC;AAAA,WACvC,OAAO,KAAK;AAAA,IACjB,CAAC;AAAA;AAAA,EAEL;AACF;AAvGa,iBACJ,SAAS;AAAA,MACZ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDpB;AAAA,EADC,SAAS,EAAE,WAAW,MAAM,CAAC;AAAA,GAnDnB,iBAoDX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAvD9B,iBAwDX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,cAAc,CAAC;AAAA,GA3DzC,iBA4DX;AA5DW,mBAAN;AAAA,EADN,cAAc,sBAAsB;AAAA,GACxB;","names":[]}

package/dist/chunk-TVE4EPVK.js

@@ -0,0 +1,119 @@
+import {
+  fontFamilyStyles
+} from "./chunk-KMU6ABQF.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/attention-panel/AttentionPanel.ts
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var AttentionPanel = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.tone = "accent";
+    this.heading = "";
+  }
+  render() {
+    return html`
+      <span class="icon" part="icon"><slot name="icon"></slot></span>
+      <div class="body">
+        <p class="title" part="title">${this.heading}</p>
+        <div class="detail" part="detail"><slot></slot></div>
+        <div class="action" part="action"><slot name="action"></slot></div>
+      </div>
+    `;
+  }
+};
+AttentionPanel.styles = css`
+    ${fontFamilyStyles}
+
+    :host {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--st-space-12);
+      padding: var(--st-space-16);
+      border-radius: var(--st-radius-md);
+      background: var(--st-color-accent-subtle);
+      color: var(--st-color-text);
+    }
+
+    :host([tone='warning']) {
+      background: var(--st-color-warning-subtle);
+    }
+
+    :host([tone='danger']) {
+      background: var(--st-color-danger-subtle);
+    }
+
+    .icon {
+      display: inline-grid;
+      place-items: center;
+      width: 32px;
+      height: 32px;
+      border-radius: var(--st-radius-sm);
+      background: var(--st-color-surface);
+      flex: none;
+    }
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      gap: var(--st-space-4);
+      min-width: 0;
+      flex: 1;
+    }
+
+    .title {
+      margin: 0;
+      font-size: var(--st-text-lg);
+      font-weight: var(--st-font-weight-semibold);
+      color: var(--st-color-text-strong);
+    }
+
+    .detail {
+      font-size: var(--st-text-base);
+      line-height: 1.5;
+      color: var(--st-color-text-secondary);
+    }
+
+    .action {
+      margin-top: var(--st-space-6);
+      font-size: var(--st-text-base);
+      font-weight: var(--st-font-weight-semibold);
+    }
+
+    :host([tone='warning']) .action {
+      color: var(--st-color-warning-text);
+    }
+
+    :host([tone='danger']) .action {
+      color: var(--st-color-danger-text);
+    }
+
+    :host([tone='accent']) .action {
+      color: var(--st-color-accent-text);
+    }
+
+    .action:empty {
+      display: none;
+    }
+
+    .icon:empty {
+      display: none;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], AttentionPanel.prototype, "tone", 2);
+__decorateClass([
+  property({ type: String })
+], AttentionPanel.prototype, "heading", 2);
+AttentionPanel = __decorateClass([
+  customElement("st-attention-panel")
+], AttentionPanel);
+
+export {
+  AttentionPanel
+};
+//# sourceMappingURL=chunk-TVE4EPVK.js.map

package/dist/chunk-TVE4EPVK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/attention-panel/AttentionPanel.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { fontFamilyStyles } from '../shared/styles';\n\n/**\n * A tinted panel that calls out the most serious item needing action: an icon, a title, a line of\n * detail and an action link. `tone` picks the colour: `warning` (amber) for things due soon,\n * `danger` (red) for overdue or failing items, `accent` (blue) for set-up tips.\n *\n * Slots: `icon` (a glyph beside the title), default (the detail text), `action` (a link or button).\n */\n@customElement('st-attention-panel')\nexport class AttentionPanel extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--st-space-12);\n      padding: var(--st-space-16);\n      border-radius: var(--st-radius-md);\n      background: var(--st-color-accent-subtle);\n      color: var(--st-color-text);\n    }\n\n    :host([tone='warning']) {\n      background: var(--st-color-warning-subtle);\n    }\n\n    :host([tone='danger']) {\n      background: var(--st-color-danger-subtle);\n    }\n\n    .icon {\n      display: inline-grid;\n      place-items: center;\n      width: 32px;\n      height: 32px;\n      border-radius: var(--st-radius-sm);\n      background: var(--st-color-surface);\n      flex: none;\n    }\n\n    .body {\n      display: flex;\n      flex-direction: column;\n      gap: var(--st-space-4);\n      min-width: 0;\n      flex: 1;\n    }\n\n    .title {\n      margin: 0;\n      font-size: var(--st-text-lg);\n      font-weight: var(--st-font-weight-semibold);\n      color: var(--st-color-text-strong);\n    }\n\n    .detail {\n      font-size: var(--st-text-base);\n      line-height: 1.5;\n      color: var(--st-color-text-secondary);\n    }\n\n    .action {\n      margin-top: var(--st-space-6);\n      font-size: var(--st-text-base);\n      font-weight: var(--st-font-weight-semibold);\n    }\n\n    :host([tone='warning']) .action {\n      color: var(--st-color-warning-text);\n    }\n\n    :host([tone='danger']) .action {\n      color: var(--st-color-danger-text);\n    }\n\n    :host([tone='accent']) .action {\n      color: var(--st-color-accent-text);\n    }\n\n    .action:empty {\n      display: none;\n    }\n\n    .icon:empty {\n      display: none;\n    }\n  `;\n\n  /** Colour of the panel: `accent` for tips, `warning` for due soon, `danger` for overdue. */\n  @property({ type: String, reflect: true })\n  tone: 'accent' | 'warning' | 'danger' = 'accent';\n\n  /** Bold line at the top of the panel. */\n  @property({ type: String })\n  heading = '';\n\n  render() {\n    return html`\n      <span class=\"icon\" part=\"icon\"><slot name=\"icon\"></slot></span>\n      <div class=\"body\">\n        <p class=\"title\" part=\"title\">${this.heading}</p>\n        <div class=\"detail\" part=\"detail\"><slot></slot></div>\n        <div class=\"action\" part=\"action\"><slot name=\"action\"></slot></div>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAYjC,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC;AAAA;AAkFL,gBAAwC;AAIxC,mBAAU;AAAA;AAAA,EAEV,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,wCAG6B,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKlD;AACF;AAlGa,eACJ,SAAS;AAAA,MACZ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgFpB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAjF9B,eAkFX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArFf,eAsFX;AAtFW,iBAAN;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB;","names":[]}

package/dist/chunk-YLY5DXQE.js

@@ -0,0 +1,185 @@
+import {
+  cardShellStyles,
+  fontFamilyStyles
+} from "./chunk-KMU6ABQF.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/kpi-card/KpiCard.ts
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var KpiCard = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.label = "";
+    this.value = "";
+    this.unit = "";
+    this.sub = "";
+    this.hero = false;
+    this.hasIcon = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.hasIcon = this.querySelector('[slot="icon"]') !== null;
+  }
+  render() {
+    return html`
+      <div class="head" part="head">
+        <span class="icon" part="icon"><slot name="icon"></slot></span>
+        <span part="label">${this.label}</span>
+      </div>
+      <div class="value" part="value">
+        <span>${this.value}</span>
+        ${this.unit ? html`<span class="unit" part="unit">${this.unit}</span>` : ""}
+      </div>
+      ${this.sub ? html`<div class="sub" part="sub">${this.sub}</div>` : ""}
+      <div class="chips" part="chips"><slot name="chips"></slot></div>
+      <div class="footer" part="footer"><slot name="footer"></slot></div>
+    `;
+  }
+};
+KpiCard.styles = css`
+    ${fontFamilyStyles}
+
+    :host {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      box-sizing: border-box;
+      padding: var(--st-space-20);
+      ${cardShellStyles}
+      color: var(--st-color-text);
+    }
+
+    :host([hero]) {
+      position: relative;
+      overflow: hidden;
+      border: 0;
+      background: linear-gradient(135deg, var(--st-color-accent) 0%, color-mix(in oklch, var(--st-color-accent) 70%, #3aa8e8) 100%);
+      color: var(--st-color-on-solid);
+    }
+
+    :host([hero])::after {
+      content: '';
+      position: absolute;
+      top: -40%;
+      right: -20%;
+      width: 60%;
+      padding-bottom: 60%;
+      border-radius: var(--st-radius-circle);
+      background: color-mix(in oklch, var(--st-color-on-solid) 10%, transparent);
+      pointer-events: none;
+    }
+
+    .head {
+      display: flex;
+      align-items: center;
+      gap: var(--st-space-10);
+      min-height: 32px;
+      font-size: var(--st-text-md);
+      font-weight: var(--st-font-weight-medium);
+      color: var(--st-color-text-secondary);
+    }
+
+    :host([hero]) .head {
+      color: var(--st-color-on-solid);
+      opacity: 0.85;
+    }
+
+    .icon {
+      display: inline-grid;
+      place-items: center;
+      width: 32px;
+      height: 32px;
+      border-radius: var(--st-radius-sm);
+      background: var(--st-color-accent-subtle);
+      flex: none;
+    }
+
+    :host(:not([has-icon])) .icon {
+      display: none;
+    }
+
+    .value {
+      display: flex;
+      align-items: baseline;
+      flex-wrap: wrap;
+      gap: var(--st-space-6);
+      margin-top: var(--st-space-14);
+      font-size: var(--st-text-kpi);
+      font-weight: var(--st-font-weight-bold);
+      line-height: 1.1;
+      letter-spacing: -0.02em;
+      font-variant-numeric: tabular-nums;
+      color: var(--st-color-text-strong);
+    }
+
+    :host([hero]) .value {
+      color: var(--st-color-on-solid);
+      font-size: var(--st-text-hero);
+    }
+
+    .unit {
+      font-size: var(--st-text-lg);
+      font-weight: var(--st-font-weight-medium);
+      color: var(--st-color-text-secondary);
+    }
+
+    :host([hero]) .unit {
+      color: var(--st-color-on-solid);
+      opacity: 0.85;
+    }
+
+    .sub {
+      margin-top: var(--st-space-6);
+      font-size: var(--st-text-base);
+      color: var(--st-color-text-muted);
+    }
+
+    :host([hero]) .sub {
+      color: var(--st-color-on-solid);
+      opacity: 0.85;
+    }
+
+    .chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--st-space-8);
+      margin-top: var(--st-space-14);
+    }
+
+    .chips:empty {
+      display: none;
+    }
+
+    .footer:empty {
+      display: none;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], KpiCard.prototype, "label", 2);
+__decorateClass([
+  property({ type: String })
+], KpiCard.prototype, "value", 2);
+__decorateClass([
+  property({ type: String })
+], KpiCard.prototype, "unit", 2);
+__decorateClass([
+  property({ type: String })
+], KpiCard.prototype, "sub", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KpiCard.prototype, "hero", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "has-icon" })
+], KpiCard.prototype, "hasIcon", 2);
+KpiCard = __decorateClass([
+  customElement("st-kpi-card")
+], KpiCard);
+
+export {
+  KpiCard
+};
+//# sourceMappingURL=chunk-YLY5DXQE.js.map

package/dist/chunk-YLY5DXQE.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/kpi-card/KpiCard.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { cardShellStyles, fontFamilyStyles } from '../shared/styles';\n\n/**\n * A key-figure card for dashboards: a label, one large value with an optional unit (for example\n * \"lakh\" or \"crore\"), a secondary line, and a row of chips. The `icon` slot sits beside the label.\n * `hero` gives the blue gradient card used for the headline figure. The value is shown exactly as\n * passed in: format numbers (Indian grouping, currency symbols) before setting it.\n *\n * Slots: `icon` (optional glyph), `chips` (a row of `st-chip`), `footer` (anything below the chips).\n */\n@customElement('st-kpi-card')\nexport class KpiCard extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n      box-sizing: border-box;\n      padding: var(--st-space-20);\n      ${cardShellStyles}\n      color: var(--st-color-text);\n    }\n\n    :host([hero]) {\n      position: relative;\n      overflow: hidden;\n      border: 0;\n      background: linear-gradient(135deg, var(--st-color-accent) 0%, color-mix(in oklch, var(--st-color-accent) 70%, #3aa8e8) 100%);\n      color: var(--st-color-on-solid);\n    }\n\n    :host([hero])::after {\n      content: '';\n      position: absolute;\n      top: -40%;\n      right: -20%;\n      width: 60%;\n      padding-bottom: 60%;\n      border-radius: var(--st-radius-circle);\n      background: color-mix(in oklch, var(--st-color-on-solid) 10%, transparent);\n      pointer-events: none;\n    }\n\n    .head {\n      display: flex;\n      align-items: center;\n      gap: var(--st-space-10);\n      min-height: 32px;\n      font-size: var(--st-text-md);\n      font-weight: var(--st-font-weight-medium);\n      color: var(--st-color-text-secondary);\n    }\n\n    :host([hero]) .head {\n      color: var(--st-color-on-solid);\n      opacity: 0.85;\n    }\n\n    .icon {\n      display: inline-grid;\n      place-items: center;\n      width: 32px;\n      height: 32px;\n      border-radius: var(--st-radius-sm);\n      background: var(--st-color-accent-subtle);\n      flex: none;\n    }\n\n    :host(:not([has-icon])) .icon {\n      display: none;\n    }\n\n    .value {\n      display: flex;\n      align-items: baseline;\n      flex-wrap: wrap;\n      gap: var(--st-space-6);\n      margin-top: var(--st-space-14);\n      font-size: var(--st-text-kpi);\n      font-weight: var(--st-font-weight-bold);\n      line-height: 1.1;\n      letter-spacing: -0.02em;\n      font-variant-numeric: tabular-nums;\n      color: var(--st-color-text-strong);\n    }\n\n    :host([hero]) .value {\n      color: var(--st-color-on-solid);\n      font-size: var(--st-text-hero);\n    }\n\n    .unit {\n      font-size: var(--st-text-lg);\n      font-weight: var(--st-font-weight-medium);\n      color: var(--st-color-text-secondary);\n    }\n\n    :host([hero]) .unit {\n      color: var(--st-color-on-solid);\n      opacity: 0.85;\n    }\n\n    .sub {\n      margin-top: var(--st-space-6);\n      font-size: var(--st-text-base);\n      color: var(--st-color-text-muted);\n    }\n\n    :host([hero]) .sub {\n      color: var(--st-color-on-solid);\n      opacity: 0.85;\n    }\n\n    .chips {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--st-space-8);\n      margin-top: var(--st-space-14);\n    }\n\n    .chips:empty {\n      display: none;\n    }\n\n    .footer:empty {\n      display: none;\n    }\n  `;\n\n  /** Label above the figure. */\n  @property({ type: String })\n  label = '';\n\n  /** The figure, already formatted (for example \"25.88\"). */\n  @property({ type: String })\n  value = '';\n\n  /** Unit shown beside the figure (for example \"lakh\"). */\n  @property({ type: String })\n  unit = '';\n\n  /** Secondary line below the figure (for example the exact amount and the period). */\n  @property({ type: String })\n  sub = '';\n\n  /** The blue gradient headline card. */\n  @property({ type: Boolean, reflect: true })\n  hero = false;\n\n  /** Set when an element is slotted into `icon`, so the icon tile only shows when there is an icon. */\n  @property({ type: Boolean, reflect: true, attribute: 'has-icon' })\n  hasIcon = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.hasIcon = this.querySelector('[slot=\"icon\"]') !== null;\n  }\n\n  render() {\n    return html`\n      <div class=\"head\" part=\"head\">\n        <span class=\"icon\" part=\"icon\"><slot name=\"icon\"></slot></span>\n        <span part=\"label\">${this.label}</span>\n      </div>\n      <div class=\"value\" part=\"value\">\n        <span>${this.value}</span>\n        ${this.unit ? html`<span class=\"unit\" part=\"unit\">${this.unit}</span>` : ''}\n      </div>\n      ${this.sub ? html`<div class=\"sub\" part=\"sub\">${this.sub}</div>` : ''}\n      <div class=\"chips\" part=\"chips\"><slot name=\"chips\"></slot></div>\n      <div class=\"footer\" part=\"footer\"><slot name=\"footer\"></slot></div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAajC,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC;AAAA;AA0HL,iBAAQ;AAIR,iBAAQ;AAIR,gBAAO;AAIP,eAAM;AAIN,gBAAO;AAIP,mBAAU;AAAA;AAAA,EAEV,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,UAAU,KAAK,cAAc,eAAe,MAAM;AAAA,EACzD;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,6BAGkB,KAAK,KAAK;AAAA;AAAA;AAAA,gBAGvB,KAAK,KAAK;AAAA,UAChB,KAAK,OAAO,sCAAsC,KAAK,IAAI,YAAY,EAAE;AAAA;AAAA,QAE3E,KAAK,MAAM,mCAAmC,KAAK,GAAG,WAAW,EAAE;AAAA;AAAA;AAAA;AAAA,EAIzE;AACF;AApKa,QACJ,SAAS;AAAA,MACZ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQd,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgHrB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAzHf,QA0HX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA7Hf,QA8HX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAjIf,QAkIX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArIf,QAsIX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAzI/B,QA0IX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,WAAW,CAAC;AAAA,GA7ItD,QA8IX;AA9IW,UAAN;AAAA,EADN,cAAc,aAAa;AAAA,GACf;","names":[]}

package/dist/date-tile/index.d.ts

@@ -0,0 +1,20 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * A calendar date tile: a month band over a large day number, as used for due dates. `tone`
+ * colours the month band: `default` for a neutral date, `warning` for due soon, `danger` for
+ * overdue.
+ */
+declare class DateTile extends LitElement {
+    static styles: lit.CSSResult;
+    /** Month abbreviation shown in the band (for example "NOV"). */
+    month: string;
+    /** Day of the month (for example "11"). */
+    day: string;
+    /** Colour of the month band. */
+    tone: 'default' | 'warning' | 'danger';
+    render(): lit.TemplateResult<1>;
+}
+
+export { DateTile };

package/dist/date-tile/index.js

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

package/dist/date-tile/index.js.map

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

package/dist/index.d.ts

@@ -1,8 +1,12 @@
+export { AttentionPanel } from './attention-panel/index.js';
+export { BarChart } from './bar-chart/index.js';
 export { BentoGrid, BentoGridItem } from './bento-grid/index.js';
 export { Card } from './card/index.js';
 export { Carousel, CarouselChangeEventDetail } from './carousel/index.js';
+export { Chip } from './chip/index.js';
 export { ContentBlock } from './content-block/index.js';
 export { CookieConsent, CookieConsentEventDetail, CookieConsentStatus } from './cookie-consent/index.js';
+export { DateTile } from './date-tile/index.js';
 export { Dropdown, DropdownToggleEventDetail } from './dropdown/index.js';
 export { FeatureSplit, FeatureSplitActionEventDetail, FeatureSplitImagePosition, FeatureSplitItem } from './feature-split/index.js';
 export { FeatureItem, FeatureItemData, FeaturesSection } from './features-section/index.js';
@@ -11,13 +15,15 @@ export { Header, LanguageChangedEventDetail } from './header/index.js';
 export { Hero, HeroActionEventDetail } from './hero/index.js';
 export { IconButton } from './icon-button/index.js';
 export { AccordionItem, AccordionToggleEventDetail, ItemsAccordion } from './items-accordion/index.js';
+export { KpiCard } from './kpi-card/index.js';
 export { Markdown, MarkdownErrorEventDetail } from './markdown/index.js';
 export { MegaMenu, MegaMenuColumn, MegaMenuFeature, MegaMenuSelectEventDetail } from './mega-menu/index.js';
-export { MenuGrid } from './menu-grid/index.js';
 export { MenuGridItem, MenuGridItemSelectEventDetail } from './menu-grid-item/index.js';
+export { MenuGrid } from './menu-grid/index.js';
 export { MenuItem, MenuItemSelectEventDetail } from './menu-item/index.js';
 export { PromoBanner } from './promo-banner/index.js';
 export { Section } from './section/index.js';
+export { SegmentChangeEventDetail, SegmentedControl, SegmentedOption } from './segmented-control/index.js';
 export { Select, SelectChangedEventDetail, SelectOption } from './select/index.js';
 export { StatItem, Stats } from './stats/index.js';
 export { TestimonialItem, TestimonialMetric, Testimonials, TestimonialsLinkEventDetail } from './testimonials/index.js';

package/dist/index.js

@@ -1,9 +1,35 @@
+import {
+  Testimonials
+} from "./chunk-DH53HZPB.js";
+import {
+  PromoBanner
+} from "./chunk-VWS53WY4.js";
+import {
+  Section
+} from "./chunk-7NLZND6Q.js";
+import {
+  SegmentedControl
+} from "./chunk-MG2VTZA4.js";
+import {
+  Select
+} from "./chunk-BLQV2YMO.js";
 import {
   Stats
 } from "./chunk-YVTFQHVY.js";
 import {
-  Testimonials
-} from "./chunk-DH53HZPB.js";
+  IconButton
+} from "./chunk-YQ42EBK5.js";
+import {
+  ItemsAccordion
+} from "./chunk-ALI26WOB.js";
+import {
+  KpiCard
+} from "./chunk-YLY5DXQE.js";
+import {
+  MegaMenu,
+  MegaMenuColumn,
+  MegaMenuFeature
+} from "./chunk-G3CF7MBO.js";
 import {
   MenuGrid
 } from "./chunk-SMLR736E.js";
@@ -14,14 +40,17 @@ import {
   MenuItem
 } from "./chunk-R5G6KFTJ.js";
 import {
-  PromoBanner
-} from "./chunk-VWS53WY4.js";
+  CookieConsent
+} from "./chunk-MSSH3HFK.js";
 import {
-  Section
-} from "./chunk-7NLZND6Q.js";
+  DateTile
+} from "./chunk-DAGSL2JV.js";
 import {
-  Select
-} from "./chunk-BLQV2YMO.js";
+  Dropdown
+} from "./chunk-LEXZKGQX.js";
+import {
+  FeatureSplit
+} from "./chunk-WT4OATGP.js";
 import {
   FeatureItem,
   FeaturesSection
@@ -32,20 +61,16 @@ import {
 import {
   Header
 } from "./chunk-XWB4CKDU.js";
+import "./chunk-WTD2YIAA.js";
 import {
   Hero
 } from "./chunk-JKBWZLG4.js";
 import {
-  IconButton
-} from "./chunk-YQ42EBK5.js";
-import {
-  ItemsAccordion
-} from "./chunk-ALI26WOB.js";
+  AttentionPanel
+} from "./chunk-TVE4EPVK.js";
 import {
-  MegaMenu,
-  MegaMenuColumn,
-  MegaMenuFeature
-} from "./chunk-G3CF7MBO.js";
+  BarChart
+} from "./chunk-2TPTJN36.js";
 import {
   BentoGrid
 } from "./chunk-76AVBQUA.js";
@@ -55,19 +80,12 @@ import {
 import {
   Carousel
 } from "./chunk-EMCQBT3S.js";
+import {
+  Chip
+} from "./chunk-LGGLQNSU.js";
 import {
   ContentBlock
 } from "./chunk-BMHMNXIA.js";
-import {
-  CookieConsent
-} from "./chunk-MSSH3HFK.js";
-import {
-  Dropdown
-} from "./chunk-LEXZKGQX.js";
-import "./chunk-WTD2YIAA.js";
-import {
-  FeatureSplit
-} from "./chunk-WT4OATGP.js";
 import {
   Markdown
 } from "./chunk-5EBWMPJS.js";
@@ -75,11 +93,15 @@ import "./chunk-FZ36KL73.js";
 import "./chunk-KMU6ABQF.js";
 import "./chunk-EUXUH3YW.js";
 export {
+  AttentionPanel,
+  BarChart,
   BentoGrid,
   Card,
   Carousel,
+  Chip,
   ContentBlock,
   CookieConsent,
+  DateTile,
   Dropdown,
   FeatureItem,
   FeatureSplit,
@@ -89,6 +111,7 @@ export {
   Hero,
   IconButton,
   ItemsAccordion,
+  KpiCard,
   Markdown,
   MegaMenu,
   MegaMenuColumn,
@@ -98,6 +121,7 @@ export {
   MenuItem,
   PromoBanner,
   Section,
+  SegmentedControl,
   Select,
   Stats,
   Testimonials

package/dist/kpi-card/index.d.ts

@@ -0,0 +1,30 @@
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * A key-figure card for dashboards: a label, one large value with an optional unit (for example
+ * "lakh" or "crore"), a secondary line, and a row of chips. The `icon` slot sits beside the label.
+ * `hero` gives the blue gradient card used for the headline figure. The value is shown exactly as
+ * passed in: format numbers (Indian grouping, currency symbols) before setting it.
+ *
+ * Slots: `icon` (optional glyph), `chips` (a row of `st-chip`), `footer` (anything below the chips).
+ */
+declare class KpiCard extends LitElement {
+    static styles: lit.CSSResult;
+    /** Label above the figure. */
+    label: string;
+    /** The figure, already formatted (for example "25.88"). */
+    value: string;
+    /** Unit shown beside the figure (for example "lakh"). */
+    unit: string;
+    /** Secondary line below the figure (for example the exact amount and the period). */
+    sub: string;
+    /** The blue gradient headline card. */
+    hero: boolean;
+    /** Set when an element is slotted into `icon`, so the icon tile only shows when there is an icon. */
+    hasIcon: boolean;
+    connectedCallback(): void;
+    render(): lit.TemplateResult<1>;
+}
+
+export { KpiCard };

package/dist/kpi-card/index.js

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

package/dist/kpi-card/index.js.map

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

package/dist/schema/index.d.ts

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

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",