@sankhyatronics/sankhya-cms 0.1.12 → 0.1.14

package/custom-elements.json

@@ -8,7 +8,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A tinted panel that calls out the most serious item needing action: an icon, a title, a line of\ndetail 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\nSlots: `icon` (a glyph beside the title), default (the detail text), `action` (a link or button).",
+          "description": "A tinted panel that calls out the most serious item needing action: an icon, a title, a line of\ndetail 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\nSlots: `icon` (a glyph beside the title), default (the detail text), `action` (a link or button).\nThe panel's box sits on an inner element, not on `:host`, so an outer page's CSS reset can't\nremove its padding.",
           "name": "AttentionPanel",
           "members": [
             {
@@ -910,6 +910,125 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/chip/Chip.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A small rounded status pill: text in the default slot, with an optional leading dot. Tones map\nto the theme's status tokens (soft background, text colour on that background), so a chip reads\nthe same in every theme. Use `neutral` for plain labels, `accent` for the brand tint, and the\nstatus tones for meaning only (success = done, warning = due soon, danger = overdue).\n\nThe pill's box (padding, background) sits on an inner element, not on `:host`: an outer page's\nCSS reset (Tailwind's preflight zeroes padding on every element) beats a component's `:host`\nrules, which would leave the pill without its padding.",
+          "name": "Chip",
+          "members": [
+            {
+              "kind": "field",
+              "name": "tone",
+              "type": {
+                "text": "'neutral' | 'accent' | 'success' | 'warning' | 'danger'"
+              },
+              "default": "'neutral'",
+              "description": "Colour treatment: a soft tint of the matching theme token.",
+              "attribute": "tone",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "'md' | 'sm'"
+              },
+              "default": "'md'",
+              "description": "`sm` for dense lists and table cells.",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "translucent",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "A see-through white pill with white text, for a chip on a coloured card.",
+              "attribute": "translucent",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "dot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows a leading dot in the chip's text colour.",
+              "attribute": "dot",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "tone",
+              "type": {
+                "text": "'neutral' | 'accent' | 'success' | 'warning' | 'danger'"
+              },
+              "default": "'neutral'",
+              "description": "Colour treatment: a soft tint of the matching theme token.",
+              "fieldName": "tone"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "'md' | 'sm'"
+              },
+              "default": "'md'",
+              "description": "`sm` for dense lists and table cells.",
+              "fieldName": "size"
+            },
+            {
+              "name": "translucent",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "A see-through white pill with white text, for a chip on a coloured card.",
+              "fieldName": "translucent"
+            },
+            {
+              "name": "dot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Shows a leading dot in the chip's text colour.",
+              "fieldName": "dot"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "st-chip",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "Chip",
+          "declaration": {
+            "name": "Chip",
+            "module": "src/chip/Chip.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "st-chip",
+          "declaration": {
+            "name": "Chip",
+            "module": "src/chip/Chip.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/content-block/ContentBlock.ts",
@@ -1096,105 +1215,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/chip/Chip.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A small rounded status pill: text in the default slot, with an optional leading dot. Tones map\nto the theme's status tokens (soft background, text colour on that background), so a chip reads\nthe same in every theme. Use `neutral` for plain labels, `accent` for the brand tint, and the\nstatus tones for meaning only (success = done, warning = due soon, danger = overdue).",
-          "name": "Chip",
-          "members": [
-            {
-              "kind": "field",
-              "name": "tone",
-              "type": {
-                "text": "'neutral' | 'accent' | 'success' | 'warning' | 'danger'"
-              },
-              "default": "'neutral'",
-              "description": "Colour treatment: a soft tint of the matching theme token.",
-              "attribute": "tone",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "'md' | 'sm'"
-              },
-              "default": "'md'",
-              "description": "`sm` for dense lists and table cells.",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Shows a leading dot in the chip's text colour.",
-              "attribute": "dot",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "tone",
-              "type": {
-                "text": "'neutral' | 'accent' | 'success' | 'warning' | 'danger'"
-              },
-              "default": "'neutral'",
-              "description": "Colour treatment: a soft tint of the matching theme token.",
-              "fieldName": "tone"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "'md' | 'sm'"
-              },
-              "default": "'md'",
-              "description": "`sm` for dense lists and table cells.",
-              "fieldName": "size"
-            },
-            {
-              "name": "dot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "description": "Shows a leading dot in the chip's text colour.",
-              "fieldName": "dot"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "st-chip",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Chip",
-          "declaration": {
-            "name": "Chip",
-            "module": "src/chip/Chip.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "st-chip",
-          "declaration": {
-            "name": "Chip",
-            "module": "src/chip/Chip.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/cookie-consent/CookieConsent.ts",
@@ -1390,7 +1410,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A calendar date tile: a month band over a large day number, as used for due dates. `tone`\ncolours the month band: `default` for a neutral date, `warning` for due soon, `danger` for\noverdue.",
+          "description": "A calendar date tile: a month band over a large day number, as used for due dates. `tone`\ncolours the month band: `default` for a neutral date, `warning` for due soon, `danger` for\noverdue. The tile's box sits on an inner element, so an outer page's CSS reset can't remove\nits border.",
           "name": "DateTile",
           "members": [
             {
@@ -4008,7 +4028,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "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\npassed in: format numbers (Indian grouping, currency symbols) before setting it.\n\nSlots: `icon` (optional glyph), `chips` (a row of `st-chip`), `footer` (anything below the chips).",
+          "description": "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\npassed in: format numbers (Indian grouping, currency symbols) before setting it.\n\nSlots: `icon` (optional glyph), `chips` (a row of `st-chip`), `footer` (anything below the chips).\n\nThe card's box sits on an inner element, not on `:host`: an outer page's CSS reset (Tailwind's\npreflight zeroes padding and borders on every element) beats a component's `:host` rules.",
           "name": "KpiCard",
           "members": [
             {

package/dist/attention-panel/index.d.ts

@@ -7,6 +7,8 @@ import { LitElement } from 'lit';
  * `danger` (red) for overdue or failing items, `accent` (blue) for set-up tips.
  *
  * Slots: `icon` (a glyph beside the title), default (the detail text), `action` (a link or button).
+ * The panel's box sits on an inner element, not on `:host`, so an outer page's CSS reset can't
+ * remove its padding.
  */
 declare class AttentionPanel extends LitElement {
     static styles: lit.CSSResult;

package/dist/attention-panel/index.js

@@ -1,6 +1,6 @@
 import {
   AttentionPanel
-} from "../chunk-4PXZPGWQ.js";
+} from "../chunk-35TX3AOA.js";
 import "../chunk-KMU6ABQF.js";
 import "../chunk-EUXUH3YW.js";
 export {

package/dist/chip/index.d.ts

@@ -6,6 +6,10 @@ import { LitElement } from 'lit';
  * to the theme's status tokens (soft background, text colour on that background), so a chip reads
  * the same in every theme. Use `neutral` for plain labels, `accent` for the brand tint, and the
  * status tones for meaning only (success = done, warning = due soon, danger = overdue).
+ *
+ * The pill's box (padding, background) sits on an inner element, not on `:host`: an outer page's
+ * CSS reset (Tailwind's preflight zeroes padding on every element) beats a component's `:host`
+ * rules, which would leave the pill without its padding.
  */
 declare class Chip extends LitElement {
     static styles: lit.CSSResult;
@@ -13,6 +17,8 @@ declare class Chip extends LitElement {
     tone: 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
     /** `sm` for dense lists and table cells. */
     size: 'md' | 'sm';
+    /** A see-through white pill with white text, for a chip on a coloured card. */
+    translucent: boolean;
     /** Shows a leading dot in the chip's text colour. */
     dot: boolean;
     render(): lit.TemplateResult<1>;

package/dist/chip/index.js

@@ -1,6 +1,6 @@
 import {
   Chip
-} from "../chunk-LGGLQNSU.js";
+} from "../chunk-AKJQ345O.js";
 import "../chunk-KMU6ABQF.js";
 import "../chunk-EUXUH3YW.js";
 export {

package/dist/{chunk-4PXZPGWQ.js → chunk-35TX3AOA.js}

@@ -21,11 +21,13 @@ var AttentionPanel = class extends LitElement {
   }
   render() {
     return html`
-      ${this.hasIcon ? html`<span class="icon" part="icon"><slot name="icon"></slot></span>` : nothing}
-      <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 class="panel" part="panel">
+        <span class="icon" part="icon"><slot name="icon"></slot></span>
+        <div class="body">
+          ${this.heading ? html`<p class="title" part="title">${this.heading}</p>` : nothing}
+          <div class="detail" part="detail"><slot></slot></div>
+          <div class="action" part="action"><slot name="action"></slot></div>
+        </div>
       </div>
     `;
   }
@@ -34,20 +36,24 @@ AttentionPanel.styles = css`
     ${fontFamilyStyles}
 
     :host {
+      display: block;
+      color: var(--st-color-text);
+    }
+
+    .panel {
       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']) {
+    :host([tone='warning']) .panel {
       background: var(--st-color-warning-subtle);
     }
 
-    :host([tone='danger']) {
+    :host([tone='danger']) .panel {
       background: var(--st-color-danger-subtle);
     }
 
@@ -61,6 +67,10 @@ AttentionPanel.styles = css`
       flex: none;
     }
 
+    :host(:not([has-icon])) .icon {
+      display: none;
+    }
+
     .body {
       display: flex;
       flex-direction: column;
@@ -103,10 +113,6 @@ AttentionPanel.styles = css`
     .action:empty {
       display: none;
     }
-
-    .icon:empty {
-      display: none;
-    }
   `;
 __decorateClass([
   property({ type: String, reflect: true })
@@ -124,4 +130,4 @@ AttentionPanel = __decorateClass([
 export {
   AttentionPanel
 };
-//# sourceMappingURL=chunk-4PXZPGWQ.js.map
+//# sourceMappingURL=chunk-35TX3AOA.js.map

package/dist/chunk-35TX3AOA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/attention-panel/AttentionPanel.ts"],"sourcesContent":["import { LitElement, css, html, nothing } 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 * The panel's box sits on an inner element, not on `:host`, so an outer page's CSS reset can't\n * remove its padding.\n */\n@customElement('st-attention-panel')\nexport class AttentionPanel extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      display: block;\n      color: var(--st-color-text);\n    }\n\n    .panel {\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    }\n\n    :host([tone='warning']) .panel {\n      background: var(--st-color-warning-subtle);\n    }\n\n    :host([tone='danger']) .panel {\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    :host(:not([has-icon])) .icon {\n      display: 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\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  /** Set when an element is slotted into `icon`, so the icon tile only renders with 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=\"panel\" part=\"panel\">\n        <span class=\"icon\" part=\"icon\"><slot name=\"icon\"></slot></span>\n        <div class=\"body\">\n          ${this.heading ? html`<p class=\"title\" part=\"title\">${this.heading}</p>` : nothing}\n          <div class=\"detail\" part=\"detail\"><slot></slot></div>\n          <div class=\"action\" part=\"action\"><slot name=\"action\"></slot></div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAcjC,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC;AAAA;AAsFL,gBAAwC;AAIxC,mBAAU;AAIV,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;AAAA,YAIC,KAAK,UAAU,qCAAqC,KAAK,OAAO,SAAS,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAM1F;AACF;AAjHa,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;AAAA;AAAA;AAAA;AAAA;AAoFpB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GArF9B,eAsFX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAzFf,eA0FX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,WAAW,CAAC;AAAA,GA7FtD,eA8FX;AA9FW,iBAAN;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB;","names":[]}

package/dist/{chunk-T55CG4YG.js → chunk-6D6ROU7X.js}

@@ -7,7 +7,7 @@ import {
 } from "./chunk-EUXUH3YW.js";
 
 // src/kpi-card/KpiCard.ts
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 var KpiCard = class extends LitElement {
   constructor() {
@@ -25,17 +25,19 @@ var KpiCard = class extends LitElement {
   }
   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 class="card" part="card">
+        <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>` : nothing}
+        </div>
+        ${this.sub ? html`<div class="sub" part="sub">${this.sub}</div>` : nothing}
+        <div class="chips" part="chips"><slot name="chips"></slot></div>
+        <div class="footer" part="footer"><slot name="footer"></slot></div>
       </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>
     `;
   }
 };
@@ -43,24 +45,29 @@ KpiCard.styles = css`
     ${fontFamilyStyles}
 
     :host {
+      display: block;
+      min-width: 0;
+      color: var(--st-color-text);
+    }
+
+    .card {
+      position: relative;
       display: flex;
       flex-direction: column;
-      min-width: 0;
+      height: 100%;
       box-sizing: border-box;
       padding: var(--st-space-20);
+      overflow: hidden;
       ${cardShellStyles}
-      color: var(--st-color-text);
     }
 
-    :host([hero]) {
-      position: relative;
-      overflow: hidden;
+    :host([hero]) .card {
       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 {
+    :host([hero]) .card::after {
       content: '';
       position: absolute;
       top: -40%;
@@ -137,11 +144,6 @@ KpiCard.styles = css`
       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;
@@ -154,12 +156,14 @@ KpiCard.styles = css`
       margin-top: var(--st-space-14);
     }
 
-    .chips:empty {
+    .chips:empty,
+    .footer:empty {
       display: none;
     }
 
-    .footer:empty {
-      display: none;
+    :host([hero]) ::slotted(st-chip) {
+      background: color-mix(in oklch, var(--st-color-on-solid) 18%, transparent);
+      color: var(--st-color-on-solid);
     }
   `;
 __decorateClass([
@@ -187,4 +191,4 @@ KpiCard = __decorateClass([
 export {
   KpiCard
 };
-//# sourceMappingURL=chunk-T55CG4YG.js.map
+//# sourceMappingURL=chunk-6D6ROU7X.js.map

package/dist/chunk-6D6ROU7X.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/kpi-card/KpiCard.ts"],"sourcesContent":["import { LitElement, css, html, nothing } 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 * The card's box sits on an inner element, not on `:host`: an outer page's CSS reset (Tailwind's\n * preflight zeroes padding and borders on every element) beats a component's `:host` rules.\n */\n@customElement('st-kpi-card')\nexport class KpiCard extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      display: block;\n      min-width: 0;\n      color: var(--st-color-text);\n    }\n\n    .card {\n      position: relative;\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      box-sizing: border-box;\n      padding: var(--st-space-20);\n      overflow: hidden;\n      ${cardShellStyles}\n    }\n\n    :host([hero]) .card {\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]) .card::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    .footer:empty {\n      display: none;\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\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=\"card\" part=\"card\">\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>` : nothing}\n        </div>\n        ${this.sub ? html`<div class=\"sub\" part=\"sub\">${this.sub}</div>` : nothing}\n        <div class=\"chips\" part=\"chips\"><slot name=\"chips\"></slot></div>\n        <div class=\"footer\" part=\"footer\"><slot name=\"footer\"></slot></div>\n      </div>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;AAAA,SAAS,YAAY,KAAK,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAgBjC,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC;AAAA;AAiIL,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;AAAA,+BAIoB,KAAK,KAAK;AAAA;AAAA;AAAA,kBAGvB,KAAK,KAAK;AAAA,YAChB,KAAK,OAAO,sCAAsC,KAAK,IAAI,YAAY,OAAO;AAAA;AAAA,UAEhF,KAAK,MAAM,mCAAmC,KAAK,GAAG,WAAW,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhF;AACF;AA7Ka,QACJ,SAAS;AAAA,MACZ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAgBd,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;AA+GrB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAhIf,QAiIX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApIf,QAqIX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAxIf,QAyIX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA5If,QA6IX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAhJ/B,QAiJX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,WAAW,CAAC;AAAA,GApJtD,QAqJX;AArJW,UAAN;AAAA,EADN,cAAc,aAAa;AAAA,GACf;","names":[]}

package/dist/{chunk-LGGLQNSU.js → chunk-AKJQ345O.js}

@@ -13,16 +13,22 @@ var Chip = class extends LitElement {
     super(...arguments);
     this.tone = "neutral";
     this.size = "md";
+    this.translucent = false;
     this.dot = false;
   }
   render() {
-    return html`<span class="dot" part="dot" aria-hidden="true"></span><slot></slot>`;
+    return html`<span class="pill" part="pill"><span class="dot" part="dot" aria-hidden="true"></span><slot></slot></span>`;
   }
 };
 Chip.styles = css`
     ${fontFamilyStyles}
 
     :host {
+      display: inline-flex;
+      max-width: 100%;
+    }
+
+    .pill {
       display: inline-flex;
       align-items: center;
       gap: var(--st-space-6);
@@ -37,31 +43,38 @@ Chip.styles = css`
       font-variant-numeric: tabular-nums;
     }
 
-    :host([size='sm']) {
+    :host([size='sm']) .pill {
       padding: 0 var(--st-space-8);
       font-size: var(--st-text-xs);
     }
 
-    :host([tone='accent']) {
+    :host([tone='accent']) .pill {
       background: var(--st-color-accent-subtle);
       color: var(--st-color-accent-text);
     }
 
-    :host([tone='success']) {
+    :host([tone='success']) .pill {
       background: var(--st-color-success-subtle);
       color: var(--st-color-success-text);
     }
 
-    :host([tone='warning']) {
+    :host([tone='warning']) .pill {
       background: var(--st-color-warning-subtle);
       color: var(--st-color-warning-text);
     }
 
-    :host([tone='danger']) {
+    :host([tone='danger']) .pill {
       background: var(--st-color-danger-subtle);
       color: var(--st-color-danger-text);
     }
 
+    /* A see-through pill for a chip on a coloured card (the blue hero): white at a low opacity, with white
+       text, like the License Server's hero chips. */
+    :host([translucent]) .pill {
+      background: rgb(255 255 255 / 0.18);
+      color: var(--st-color-on-solid);
+    }
+
     .dot {
       width: 6px;
       height: 6px;
@@ -80,6 +93,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true })
 ], Chip.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Chip.prototype, "translucent", 2);
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], Chip.prototype, "dot", 2);
@@ -90,4 +106,4 @@ Chip = __decorateClass([
 export {
   Chip
 };
-//# sourceMappingURL=chunk-LGGLQNSU.js.map
+//# sourceMappingURL=chunk-AKJQ345O.js.map

package/dist/chunk-AKJQ345O.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 * The pill's box (padding, background) sits on an inner element, not on `:host`: an outer page's\n * CSS reset (Tailwind's preflight zeroes padding on every element) beats a component's `:host`\n * rules, which would leave the pill without its padding.\n */\n@customElement('st-chip')\nexport class Chip extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      display: inline-flex;\n      max-width: 100%;\n    }\n\n    .pill {\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']) .pill {\n      padding: 0 var(--st-space-8);\n      font-size: var(--st-text-xs);\n    }\n\n    :host([tone='accent']) .pill {\n      background: var(--st-color-accent-subtle);\n      color: var(--st-color-accent-text);\n    }\n\n    :host([tone='success']) .pill {\n      background: var(--st-color-success-subtle);\n      color: var(--st-color-success-text);\n    }\n\n    :host([tone='warning']) .pill {\n      background: var(--st-color-warning-subtle);\n      color: var(--st-color-warning-text);\n    }\n\n    :host([tone='danger']) .pill {\n      background: var(--st-color-danger-subtle);\n      color: var(--st-color-danger-text);\n    }\n\n    /* A see-through pill for a chip on a coloured card (the blue hero): white at a low opacity, with white\n       text, like the License Server's hero chips. */\n    :host([translucent]) .pill {\n      background: rgb(255 255 255 / 0.18);\n      color: var(--st-color-on-solid);\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  /** A see-through white pill with white text, for a chip on a coloured card. */\n  @property({ type: Boolean, reflect: true })\n  translucent = false;\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=\"pill\" part=\"pill\"><span class=\"dot\" part=\"dot\" aria-hidden=\"true\"></span><slot></slot></span>`;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAejC,IAAM,OAAN,cAAmB,WAAW;AAAA,EAA9B;AAAA;AAuEL,gBAAgE;AAIhE,gBAAoB;AAIpB,uBAAc;AAId,eAAM;AAAA;AAAA,EAEN,SAAS;AACP,WAAO;AAAA,EACT;AACF;AAxFa,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqEpB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAtE9B,KAuEX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA1E9B,KA2EX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA9E/B,KA+EX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlF/B,KAmFX;AAnFW,OAAN;AAAA,EADN,cAAc,SAAS;AAAA,GACX;","names":[]}

package/dist/{chunk-DAGSL2JV.js → chunk-INMSEYT6.js}

@@ -16,7 +16,7 @@ var DateTile = class extends LitElement {
     this.tone = "default";
   }
   render() {
-    return html`<span class="month" part="month">${this.month}</span><span class="day" part="day">${this.day}</span>`;
+    return html`<div class="tile" part="tile"><span class="month" part="month">${this.month}</span><span class="day" part="day">${this.day}</span></div>`;
   }
 };
 DateTile.styles = css`
@@ -24,6 +24,11 @@ DateTile.styles = css`
 
     :host {
       display: inline-flex;
+      flex: none;
+    }
+
+    .tile {
+      display: flex;
       flex-direction: column;
       align-items: stretch;
       width: 52px;
@@ -32,7 +37,6 @@ DateTile.styles = css`
       background: var(--st-color-surface);
       overflow: hidden;
       text-align: center;
-      flex: none;
     }
 
     .month {
@@ -80,4 +84,4 @@ DateTile = __decorateClass([
 export {
   DateTile
 };
-//# sourceMappingURL=chunk-DAGSL2JV.js.map
+//# sourceMappingURL=chunk-INMSEYT6.js.map

package/dist/chunk-INMSEYT6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/date-tile/DateTile.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 calendar date tile: a month band over a large day number, as used for due dates. `tone`\n * colours the month band: `default` for a neutral date, `warning` for due soon, `danger` for\n * overdue. The tile's box sits on an inner element, so an outer page's CSS reset can't remove\n * its border.\n */\n@customElement('st-date-tile')\nexport class DateTile extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      display: inline-flex;\n      flex: none;\n    }\n\n    .tile {\n      display: flex;\n      flex-direction: column;\n      align-items: stretch;\n      width: 52px;\n      border: 1px solid var(--st-color-border);\n      border-radius: var(--st-radius-sm);\n      background: var(--st-color-surface);\n      overflow: hidden;\n      text-align: center;\n    }\n\n    .month {\n      padding: var(--st-space-3) 0;\n      font-size: var(--st-text-2xs);\n      font-weight: var(--st-font-weight-bold);\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      background: var(--st-color-accent-subtle);\n      color: var(--st-color-accent-text);\n    }\n\n    :host([tone='warning']) .month {\n      background: var(--st-color-warning-subtle);\n      color: var(--st-color-warning-text);\n    }\n\n    :host([tone='danger']) .month {\n      background: var(--st-color-danger-subtle);\n      color: var(--st-color-danger-text);\n    }\n\n    .day {\n      padding: var(--st-space-6) 0 var(--st-space-8);\n      font-size: var(--st-text-2xl);\n      font-weight: var(--st-font-weight-bold);\n      line-height: 1;\n      font-variant-numeric: tabular-nums;\n      color: var(--st-color-text-strong);\n    }\n  `;\n\n  /** Month abbreviation shown in the band (for example \"NOV\"). */\n  @property({ type: String })\n  month = '';\n\n  /** Day of the month (for example \"11\"). */\n  @property({ type: String })\n  day = '';\n\n  /** Colour of the month band. */\n  @property({ type: String, reflect: true })\n  tone: 'default' | 'warning' | 'danger' = 'default';\n\n  render() {\n    return html`<div class=\"tile\" part=\"tile\"><span class=\"month\" part=\"month\">${this.month}</span><span class=\"day\" part=\"day\">${this.day}</span></div>`;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAWjC,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC;AAAA;AAqDL,iBAAQ;AAIR,eAAM;AAIN,gBAAyC;AAAA;AAAA,EAEzC,SAAS;AACP,WAAO,sEAAsE,KAAK,KAAK,uCAAuC,KAAK,GAAG;AAAA,EACxI;AACF;AAlEa,SACJ,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;AAmDpB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApDf,SAqDX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAxDf,SAyDX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA5D9B,SA6DX;AA7DW,WAAN;AAAA,EADN,cAAc,cAAc;AAAA,GAChB;","names":[]}

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

@@ -4,7 +4,8 @@ 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.
+ * overdue. The tile's box sits on an inner element, so an outer page's CSS reset can't remove
+ * its border.
  */
 declare class DateTile extends LitElement {
     static styles: lit.CSSResult;

package/dist/date-tile/index.js

@@ -1,6 +1,6 @@
 import {
   DateTile
-} from "../chunk-DAGSL2JV.js";
+} from "../chunk-INMSEYT6.js";
 import "../chunk-KMU6ABQF.js";
 import "../chunk-EUXUH3YW.js";
 export {

package/dist/index.js

@@ -24,7 +24,7 @@ import {
 } from "./chunk-ALI26WOB.js";
 import {
   KpiCard
-} from "./chunk-T55CG4YG.js";
+} from "./chunk-6D6ROU7X.js";
 import {
   MegaMenu,
   MegaMenuColumn,
@@ -44,7 +44,7 @@ import {
 } from "./chunk-MSSH3HFK.js";
 import {
   DateTile
-} from "./chunk-DAGSL2JV.js";
+} from "./chunk-INMSEYT6.js";
 import {
   Dropdown
 } from "./chunk-LEXZKGQX.js";
@@ -67,7 +67,7 @@ import {
 } from "./chunk-JKBWZLG4.js";
 import {
   AttentionPanel
-} from "./chunk-4PXZPGWQ.js";
+} from "./chunk-35TX3AOA.js";
 import {
   BarChart
 } from "./chunk-AG2COC64.js";
@@ -82,7 +82,7 @@ import {
 } from "./chunk-EMCQBT3S.js";
 import {
   Chip
-} from "./chunk-LGGLQNSU.js";
+} from "./chunk-AKJQ345O.js";
 import {
   ContentBlock
 } from "./chunk-BMHMNXIA.js";

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

@@ -8,6 +8,9 @@ import { LitElement } from 'lit';
  * 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).
+ *
+ * The card's box sits on an inner element, not on `:host`: an outer page's CSS reset (Tailwind's
+ * preflight zeroes padding and borders on every element) beats a component's `:host` rules.
  */
 declare class KpiCard extends LitElement {
     static styles: lit.CSSResult;

package/dist/kpi-card/index.js

@@ -1,6 +1,6 @@
 import {
   KpiCard
-} from "../chunk-T55CG4YG.js";
+} from "../chunk-6D6ROU7X.js";
 import "../chunk-KMU6ABQF.js";
 import "../chunk-EUXUH3YW.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sankhyatronics/sankhya-cms",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "repository": {
     "type": "git",
     "url": "https://github.com/sankhyatronics/SankhyaCMS.git",

package/dist/chunk-4PXZPGWQ.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/attention-panel/AttentionPanel.ts"],"sourcesContent":["import { LitElement, css, html, nothing } 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  /** Set when an element is slotted into `icon`, so the icon tile only renders with 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      ${this.hasIcon ? html`<span class=\"icon\" part=\"icon\"><slot name=\"icon\"></slot></span>` : nothing}\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,MAAM,eAAe;AAC/C,SAAS,eAAe,gBAAgB;AAYjC,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC;AAAA;AAkFL,gBAAwC;AAIxC,mBAAU;AAIV,mBAAU;AAAA;AAAA,EAEV,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,UAAU,KAAK,cAAc,eAAe,MAAM;AAAA,EACzD;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH,KAAK,UAAU,wEAAwE,OAAO;AAAA;AAAA,wCAE9D,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKlD;AACF;AA3Ga,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;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,WAAW,CAAC;AAAA,GAzFtD,eA0FX;AA1FW,iBAAN;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB;","names":[]}

package/dist/chunk-DAGSL2JV.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/date-tile/DateTile.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 calendar date tile: a month band over a large day number, as used for due dates. `tone`\n * colours the month band: `default` for a neutral date, `warning` for due soon, `danger` for\n * overdue.\n */\n@customElement('st-date-tile')\nexport class DateTile extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      display: inline-flex;\n      flex-direction: column;\n      align-items: stretch;\n      width: 52px;\n      border: 1px solid var(--st-color-border);\n      border-radius: var(--st-radius-sm);\n      background: var(--st-color-surface);\n      overflow: hidden;\n      text-align: center;\n      flex: none;\n    }\n\n    .month {\n      padding: var(--st-space-3) 0;\n      font-size: var(--st-text-2xs);\n      font-weight: var(--st-font-weight-bold);\n      letter-spacing: 0.06em;\n      text-transform: uppercase;\n      background: var(--st-color-accent-subtle);\n      color: var(--st-color-accent-text);\n    }\n\n    :host([tone='warning']) .month {\n      background: var(--st-color-warning-subtle);\n      color: var(--st-color-warning-text);\n    }\n\n    :host([tone='danger']) .month {\n      background: var(--st-color-danger-subtle);\n      color: var(--st-color-danger-text);\n    }\n\n    .day {\n      padding: var(--st-space-6) 0 var(--st-space-8);\n      font-size: var(--st-text-2xl);\n      font-weight: var(--st-font-weight-bold);\n      line-height: 1;\n      font-variant-numeric: tabular-nums;\n      color: var(--st-color-text-strong);\n    }\n  `;\n\n  /** Month abbreviation shown in the band (for example \"NOV\"). */\n  @property({ type: String })\n  month = '';\n\n  /** Day of the month (for example \"11\"). */\n  @property({ type: String })\n  day = '';\n\n  /** Colour of the month band. */\n  @property({ type: String, reflect: true })\n  tone: 'default' | 'warning' | 'danger' = 'default';\n\n  render() {\n    return html`<span class=\"month\" part=\"month\">${this.month}</span><span class=\"day\" part=\"day\">${this.day}</span>`;\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAUjC,IAAM,WAAN,cAAuB,WAAW;AAAA,EAAlC;AAAA;AAiDL,iBAAQ;AAIR,eAAM;AAIN,gBAAyC;AAAA;AAAA,EAEzC,SAAS;AACP,WAAO,wCAAwC,KAAK,KAAK,uCAAuC,KAAK,GAAG;AAAA,EAC1G;AACF;AA9Da,SACJ,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;AA+CpB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAhDf,SAiDX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GApDf,SAqDX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAxD9B,SAyDX;AAzDW,WAAN;AAAA,EADN,cAAc,cAAc;AAAA,GAChB;","names":[]}

package/dist/chunk-LGGLQNSU.js.map

@@ -1 +0,0 @@
-{"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-T55CG4YG.js.map

@@ -1 +0,0 @@
-{"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":[]}