@sankhyatronics/sankhya-cms 0.1.10 → 0.1.12

package/dist/chunk-LGGLQNSU.js

@@ -0,0 +1,93 @@
+import {
+  fontFamilyStyles
+} from "./chunk-KMU6ABQF.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/chip/Chip.ts
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var Chip = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.tone = "neutral";
+    this.size = "md";
+    this.dot = false;
+  }
+  render() {
+    return html`<span class="dot" part="dot" aria-hidden="true"></span><slot></slot>`;
+  }
+};
+Chip.styles = css`
+    ${fontFamilyStyles}
+
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--st-space-6);
+      padding: var(--st-space-2) var(--st-space-10);
+      border-radius: var(--st-radius-full);
+      font-size: var(--st-text-sm);
+      font-weight: var(--st-font-weight-medium);
+      line-height: 1.4;
+      white-space: nowrap;
+      background: var(--st-color-subtle);
+      color: var(--st-color-text-secondary);
+      font-variant-numeric: tabular-nums;
+    }
+
+    :host([size='sm']) {
+      padding: 0 var(--st-space-8);
+      font-size: var(--st-text-xs);
+    }
+
+    :host([tone='accent']) {
+      background: var(--st-color-accent-subtle);
+      color: var(--st-color-accent-text);
+    }
+
+    :host([tone='success']) {
+      background: var(--st-color-success-subtle);
+      color: var(--st-color-success-text);
+    }
+
+    :host([tone='warning']) {
+      background: var(--st-color-warning-subtle);
+      color: var(--st-color-warning-text);
+    }
+
+    :host([tone='danger']) {
+      background: var(--st-color-danger-subtle);
+      color: var(--st-color-danger-text);
+    }
+
+    .dot {
+      width: 6px;
+      height: 6px;
+      border-radius: var(--st-radius-circle);
+      background: currentColor;
+      flex: none;
+    }
+
+    :host(:not([dot])) .dot {
+      display: none;
+    }
+  `;
+__decorateClass([
+  property({ type: String, reflect: true })
+], Chip.prototype, "tone", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], Chip.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Chip.prototype, "dot", 2);
+Chip = __decorateClass([
+  customElement("st-chip")
+], Chip);
+
+export {
+  Chip
+};
+//# sourceMappingURL=chunk-LGGLQNSU.js.map

package/dist/chunk-LGGLQNSU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/chip/Chip.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 small rounded status pill: text in the default slot, with an optional leading dot. Tones map\n * to the theme's status tokens (soft background, text colour on that background), so a chip reads\n * the same in every theme. Use `neutral` for plain labels, `accent` for the brand tint, and the\n * status tones for meaning only (success = done, warning = due soon, danger = overdue).\n */\n@customElement('st-chip')\nexport class Chip extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--st-space-6);\n      padding: var(--st-space-2) var(--st-space-10);\n      border-radius: var(--st-radius-full);\n      font-size: var(--st-text-sm);\n      font-weight: var(--st-font-weight-medium);\n      line-height: 1.4;\n      white-space: nowrap;\n      background: var(--st-color-subtle);\n      color: var(--st-color-text-secondary);\n      font-variant-numeric: tabular-nums;\n    }\n\n    :host([size='sm']) {\n      padding: 0 var(--st-space-8);\n      font-size: var(--st-text-xs);\n    }\n\n    :host([tone='accent']) {\n      background: var(--st-color-accent-subtle);\n      color: var(--st-color-accent-text);\n    }\n\n    :host([tone='success']) {\n      background: var(--st-color-success-subtle);\n      color: var(--st-color-success-text);\n    }\n\n    :host([tone='warning']) {\n      background: var(--st-color-warning-subtle);\n      color: var(--st-color-warning-text);\n    }\n\n    :host([tone='danger']) {\n      background: var(--st-color-danger-subtle);\n      color: var(--st-color-danger-text);\n    }\n\n    .dot {\n      width: 6px;\n      height: 6px;\n      border-radius: var(--st-radius-circle);\n      background: currentColor;\n      flex: none;\n    }\n\n    :host(:not([dot])) .dot {\n      display: none;\n    }\n  `;\n\n  /** Colour treatment: a soft tint of the matching theme token. */\n  @property({ type: String, reflect: true })\n  tone: 'neutral' | 'accent' | 'success' | 'warning' | 'danger' = 'neutral';\n\n  /** `sm` for dense lists and table cells. */\n  @property({ type: String, reflect: true })\n  size: 'md' | 'sm' = 'md';\n\n  /** Shows a leading dot in the chip's text colour. */\n  @property({ type: Boolean, reflect: true })\n  dot = false;\n\n  render() {\n    return html`<span class=\"dot\" part=\"dot\" aria-hidden=\"true\"></span><slot></slot>`;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAWjC,IAAM,OAAN,cAAmB,WAAW;AAAA,EAA9B;AAAA;AA2DL,gBAAgE;AAIhE,gBAAoB;AAIpB,eAAM;AAAA;AAAA,EAEN,SAAS;AACP,WAAO;AAAA,EACT;AACF;AAxEa,KACJ,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;AAyDpB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA1D9B,KA2DX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA9D9B,KA+DX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlE/B,KAmEX;AAnEW,OAAN;AAAA,EADN,cAAc,SAAS;AAAA,GACX;","names":[]}

package/dist/chunk-MG2VTZA4.js

@@ -0,0 +1,122 @@
+import {
+  fontFamilyStyles
+} from "./chunk-KMU6ABQF.js";
+import {
+  __decorateClass
+} from "./chunk-EUXUH3YW.js";
+
+// src/segmented-control/SegmentedControl.ts
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var SegmentedControl = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.options = [];
+    this.value = "";
+    this.groupLabel = "";
+  }
+  select(next) {
+    if (next === this.value) return;
+    this.value = next;
+    this.dispatchEvent(
+      new CustomEvent("segment-change", {
+        detail: { value: next },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  onKeydown(event) {
+    const enabled = this.options;
+    if (!enabled.length) return;
+    const index = enabled.findIndex((option) => option.value === this.value);
+    let next = null;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") next = (index + 1) % enabled.length;
+    if (event.key === "ArrowLeft" || event.key === "ArrowUp") next = (index - 1 + enabled.length) % enabled.length;
+    if (event.key === "Home") next = 0;
+    if (event.key === "End") next = enabled.length - 1;
+    if (next === null) return;
+    event.preventDefault();
+    this.select(enabled[next].value);
+    this.renderRoot.querySelector(`button[data-value="${enabled[next].value}"]`)?.focus();
+  }
+  render() {
+    return html`<div class="track" role="radiogroup" aria-label=${this.groupLabel || nothing} @keydown=${this.onKeydown}>
+      ${this.options.map(
+      (option) => html`<button
+          type="button"
+          role="radio"
+          data-value=${option.value}
+          aria-checked=${option.value === this.value ? "true" : "false"}
+          tabindex=${option.value === this.value ? 0 : -1}
+          @click=${() => this.select(option.value)}
+        >${option.label}</button>`
+    )}
+    </div>`;
+  }
+};
+SegmentedControl.styles = css`
+    ${fontFamilyStyles}
+
+    :host {
+      display: inline-flex;
+      max-width: 100%;
+    }
+
+    .track {
+      display: flex;
+      gap: var(--st-space-2);
+      padding: var(--st-space-3);
+      border-radius: var(--st-radius-md);
+      background: var(--st-color-subtle);
+      max-width: 100%;
+    }
+
+    button {
+      appearance: none;
+      border: 0;
+      border-radius: var(--st-radius-sm);
+      padding: var(--st-space-6) var(--st-space-14);
+      background: transparent;
+      color: var(--st-color-text-secondary);
+      font: inherit;
+      font-size: var(--st-text-base);
+      font-weight: var(--st-font-weight-medium);
+      white-space: nowrap;
+      cursor: pointer;
+    }
+
+    button[aria-checked='true'] {
+      background: var(--st-color-surface);
+      color: var(--st-color-text-strong);
+      font-weight: var(--st-font-weight-semibold);
+      box-shadow: 0 1px 2px rgba(20, 23, 31, 0.08);
+    }
+
+    button:focus-visible {
+      outline: 2px solid var(--st-color-accent);
+      outline-offset: 1px;
+    }
+
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+  `;
+__decorateClass([
+  property({ attribute: false })
+], SegmentedControl.prototype, "options", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], SegmentedControl.prototype, "value", 2);
+__decorateClass([
+  property({ type: String, attribute: "group-label" })
+], SegmentedControl.prototype, "groupLabel", 2);
+SegmentedControl = __decorateClass([
+  customElement("st-segmented-control")
+], SegmentedControl);
+
+export {
+  SegmentedControl
+};
+//# sourceMappingURL=chunk-MG2VTZA4.js.map

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-T55CG4YG.js

@@ -0,0 +1,190 @@
+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]) ::slotted(st-chip) {
+      background: color-mix(in oklch, var(--st-color-on-solid) 18%, transparent);
+      color: var(--st-color-on-solid);
+    }
+
+    :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-T55CG4YG.js.map

package/dist/chunk-T55CG4YG.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]) ::slotted(st-chip) {\n      background: color-mix(in oklch, var(--st-color-on-solid) 18%, transparent);\n      color: var(--st-color-on-solid);\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;AA+HL,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;AAzKa,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAqHrB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA9Hf,QA+HX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlIf,QAmIX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAtIf,QAuIX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA1If,QA2IX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA9I/B,QA+IX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,WAAW,CAAC;AAAA,GAlJtD,QAmJX;AAnJW,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-T55CG4YG.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-4PXZPGWQ.js";
 import {
-  MegaMenu,
-  MegaMenuColumn,
-  MegaMenuFeature
-} from "./chunk-G3CF7MBO.js";
+  BarChart
+} from "./chunk-AG2COC64.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 };