@sankhyatronics/sankhya-cms 0.1.11 → 0.1.12

package/custom-elements.json

@@ -31,6 +31,17 @@
               "default": "''",
               "description": "Bold line at the top of the panel.",
               "attribute": "heading"
+            },
+            {
+              "kind": "field",
+              "name": "hasIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set when an element is slotted into `icon`, so the icon tile only renders with an icon.",
+              "attribute": "has-icon",
+              "reflects": true
             }
           ],
           "attributes": [
@@ -51,6 +62,15 @@
               "default": "''",
               "description": "Bold line at the top of the panel.",
               "fieldName": "heading"
+            },
+            {
+              "name": "has-icon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Set when an element is slotted into `icon`, so the icon tile only renders with an icon.",
+              "fieldName": "hasIcon"
             }
           ],
           "superclass": {
@@ -890,6 +910,192 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/content-block/ContentBlock.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A long-form article section: centered title/subtitle, an optional featured image with caption,\nthen Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from\n`content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the\nblock works without a fetch); `content-src` wins when both are set.",
+          "name": "ContentBlock",
+          "cssProperties": [
+            {
+              "description": "Overrides the block's padding.",
+              "name": "--st-content-block-padding"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "title"
+            },
+            {
+              "kind": "field",
+              "name": "subtitle",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "subtitle"
+            },
+            {
+              "kind": "field",
+              "name": "contentSrc",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "URL of a Markdown file.",
+              "attribute": "content-src"
+            },
+            {
+              "kind": "field",
+              "name": "content",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Inline Markdown, used when `content-src` is not set.",
+              "attribute": "content"
+            },
+            {
+              "kind": "field",
+              "name": "imageSrc",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "image-src"
+            },
+            {
+              "kind": "field",
+              "name": "imageAlt",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "image-alt"
+            },
+            {
+              "kind": "field",
+              "name": "imageCaption",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "image-caption"
+            },
+            {
+              "kind": "field",
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "inverted",
+              "reflects": true
+            }
+          ],
+          "attributes": [
+            {
+              "name": "title",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "title"
+            },
+            {
+              "name": "subtitle",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "subtitle"
+            },
+            {
+              "name": "content-src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "URL of a Markdown file.",
+              "fieldName": "contentSrc"
+            },
+            {
+              "name": "content",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "description": "Inline Markdown, used when `content-src` is not set.",
+              "fieldName": "content"
+            },
+            {
+              "name": "image-src",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "imageSrc"
+            },
+            {
+              "name": "image-alt",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "imageAlt"
+            },
+            {
+              "name": "image-caption",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "imageCaption"
+            },
+            {
+              "name": "inverted",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "inverted"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "st-content-block",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ContentBlock",
+          "declaration": {
+            "name": "ContentBlock",
+            "module": "src/content-block/ContentBlock.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "st-content-block",
+          "declaration": {
+            "name": "ContentBlock",
+            "module": "src/content-block/ContentBlock.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/chip/Chip.ts",
@@ -1178,192 +1384,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/content-block/ContentBlock.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "A long-form article section: centered title/subtitle, an optional featured image with caption,\nthen Markdown body text. Ports `SankhyaUI`'s React `ContentBlock`. The body comes from\n`content-src` (a Markdown URL, as in the source) or an inline `content` string (added so the\nblock works without a fetch); `content-src` wins when both are set.",
-          "name": "ContentBlock",
-          "cssProperties": [
-            {
-              "description": "Overrides the block's padding.",
-              "name": "--st-content-block-padding"
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "title"
-            },
-            {
-              "kind": "field",
-              "name": "subtitle",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "subtitle"
-            },
-            {
-              "kind": "field",
-              "name": "contentSrc",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "URL of a Markdown file.",
-              "attribute": "content-src"
-            },
-            {
-              "kind": "field",
-              "name": "content",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Inline Markdown, used when `content-src` is not set.",
-              "attribute": "content"
-            },
-            {
-              "kind": "field",
-              "name": "imageSrc",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "image-src"
-            },
-            {
-              "kind": "field",
-              "name": "imageAlt",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "image-alt"
-            },
-            {
-              "kind": "field",
-              "name": "imageCaption",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "attribute": "image-caption"
-            },
-            {
-              "kind": "field",
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "inverted",
-              "reflects": true
-            }
-          ],
-          "attributes": [
-            {
-              "name": "title",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "title"
-            },
-            {
-              "name": "subtitle",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "subtitle"
-            },
-            {
-              "name": "content-src",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "URL of a Markdown file.",
-              "fieldName": "contentSrc"
-            },
-            {
-              "name": "content",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "description": "Inline Markdown, used when `content-src` is not set.",
-              "fieldName": "content"
-            },
-            {
-              "name": "image-src",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "imageSrc"
-            },
-            {
-              "name": "image-alt",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "imageAlt"
-            },
-            {
-              "name": "image-caption",
-              "type": {
-                "text": "string"
-              },
-              "default": "''",
-              "fieldName": "imageCaption"
-            },
-            {
-              "name": "inverted",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "inverted"
-            }
-          ],
-          "superclass": {
-            "name": "LitElement",
-            "package": "lit"
-          },
-          "tagName": "st-content-block",
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "ContentBlock",
-          "declaration": {
-            "name": "ContentBlock",
-            "module": "src/content-block/ContentBlock.ts"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "st-content-block",
-          "declaration": {
-            "name": "ContentBlock",
-            "module": "src/content-block/ContentBlock.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/date-tile/DateTile.ts",

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

@@ -14,6 +14,9 @@ declare class AttentionPanel extends LitElement {
     tone: 'accent' | 'warning' | 'danger';
     /** Bold line at the top of the panel. */
     heading: string;
+    /** Set when an element is slotted into `icon`, so the icon tile only renders with an icon. */
+    hasIcon: boolean;
+    connectedCallback(): void;
     render(): lit.TemplateResult<1>;
 }
 

package/dist/attention-panel/index.js

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

package/dist/bar-chart/index.js

@@ -1,6 +1,6 @@
 import {
   BarChart
-} from "../chunk-2TPTJN36.js";
+} from "../chunk-AG2COC64.js";
 import "../chunk-KMU6ABQF.js";
 import "../chunk-EUXUH3YW.js";
 export {

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

@@ -6,17 +6,22 @@ import {
 } from "./chunk-EUXUH3YW.js";
 
 // src/attention-panel/AttentionPanel.ts
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 var AttentionPanel = class extends LitElement {
   constructor() {
     super(...arguments);
     this.tone = "accent";
     this.heading = "";
+    this.hasIcon = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.hasIcon = this.querySelector('[slot="icon"]') !== null;
   }
   render() {
     return html`
-      <span class="icon" part="icon"><slot name="icon"></slot></span>
+      ${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>
@@ -109,6 +114,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String })
 ], AttentionPanel.prototype, "heading", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "has-icon" })
+], AttentionPanel.prototype, "hasIcon", 2);
 AttentionPanel = __decorateClass([
   customElement("st-attention-panel")
 ], AttentionPanel);
@@ -116,4 +124,4 @@ AttentionPanel = __decorateClass([
 export {
   AttentionPanel
 };
-//# sourceMappingURL=chunk-TVE4EPVK.js.map
+//# sourceMappingURL=chunk-4PXZPGWQ.js.map

package/dist/chunk-4PXZPGWQ.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 */\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-2TPTJN36.js → chunk-AG2COC64.js}

@@ -149,6 +149,7 @@ BarChart.styles = css`
 
     .bar {
       width: 100%;
+      height: 100%;
       border-radius: 4px 4px 0 0;
       background: var(--st-color-accent);
       min-height: 2px;
@@ -213,4 +214,4 @@ BarChart = __decorateClass([
 export {
   BarChart
 };
-//# sourceMappingURL=chunk-2TPTJN36.js.map
+//# sourceMappingURL=chunk-AG2COC64.js.map

package/dist/chunk-AG2COC64.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/bar-chart/BarChart.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 BarChartBar {\n  /** Category under the bar (for example a month abbreviation). */\n  label: string;\n  /** Bar height in the chart's units. `null` draws a grey stub, for periods not reached yet. */\n  value: number | null;\n  /** The value text above the bar. Format it before passing it in (for example \"5.74 L\"). */\n  valueLabel?: string;\n  /** Highlights this bar in the lighter accent, for the current period. */\n  current?: boolean;\n}\n\nexport interface BarChartTick {\n  /** Height of the gridline, in the chart's units. */\n  value: number;\n  /** Text at the left edge of the gridline, already formatted. */\n  label: string;\n}\n\n/**\n * A vertical bar chart for a fixed set of categories: value labels above the bars, gridlines with\n * labels on the left, and category labels underneath. Heights scale to `max`, or to the largest\n * bar or tick when `max` is not set. Values are not formatted here: pass `valueLabel` and tick\n * labels already formatted (currency, lakh/crore), so this element stays locale-free.\n */\n@customElement('st-bar-chart')\nexport class BarChart extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      display: block;\n      min-width: 0;\n      color: var(--st-color-text-muted);\n    }\n\n    .frame {\n      position: relative;\n      display: grid;\n      grid-template-columns: auto 1fr;\n      column-gap: var(--st-space-10);\n    }\n\n    .axis {\n      position: relative;\n      height: var(--st-bar-chart-height, 200px);\n      font-size: var(--st-text-xs);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .axis span {\n      position: absolute;\n      right: 0;\n      transform: translateY(50%);\n      white-space: nowrap;\n    }\n\n    .plot {\n      position: relative;\n      height: var(--st-bar-chart-height, 200px);\n      border-bottom: 1px solid var(--st-color-border);\n    }\n\n    .grid {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n    }\n\n    .grid i {\n      position: absolute;\n      left: 0;\n      right: 0;\n      border-top: 1px dashed var(--st-color-border);\n    }\n\n    .bars {\n      position: absolute;\n      inset: 0;\n      display: grid;\n      grid-auto-flow: column;\n      grid-auto-columns: 1fr;\n      align-items: end;\n      gap: var(--st-space-8);\n    }\n\n    .col {\n      position: relative;\n      height: 100%;\n      min-width: 0;\n    }\n\n    /* The bar and its value label share one box, anchored to the baseline, so the label always\n       sits just above the bar's top edge. */\n    .stack {\n      position: absolute;\n      left: 0;\n      right: 0;\n      bottom: 0;\n    }\n\n    .value {\n      position: absolute;\n      left: 0;\n      right: 0;\n      bottom: 100%;\n      padding-bottom: var(--st-space-4);\n      text-align: center;\n      font-size: var(--st-text-xs);\n      font-weight: var(--st-font-weight-medium);\n      white-space: nowrap;\n      color: var(--st-color-text-secondary);\n    }\n\n    .bar {\n      width: 100%;\n      height: 100%;\n      border-radius: 4px 4px 0 0;\n      background: var(--st-color-accent);\n      min-height: 2px;\n    }\n\n    .col[data-state='current'] .bar {\n      background: color-mix(in oklch, var(--st-color-accent) 70%, #ffffff);\n    }\n\n    .col[data-state='future'] .bar {\n      background: var(--st-color-subtle);\n      min-height: 4px;\n    }\n\n    .col[data-state='current'] .value {\n      color: var(--st-color-accent-text);\n      font-weight: var(--st-font-weight-semibold);\n    }\n\n    .categories {\n      display: grid;\n      grid-auto-flow: column;\n      grid-auto-columns: 1fr;\n      gap: var(--st-space-8);\n      margin-top: var(--st-space-8);\n      font-size: var(--st-text-xs);\n      text-align: center;\n    }\n\n    .categories .current {\n      font-weight: var(--st-font-weight-semibold);\n      color: var(--st-color-accent-text);\n    }\n\n    .empty {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 120px;\n      font-size: var(--st-text-base);\n    }\n  `;\n\n  /** The bars, in order from left to right. */\n  @property({ attribute: false })\n  bars: BarChartBar[] = [];\n\n  /** Optional gridlines with labels. */\n  @property({ attribute: false })\n  ticks: BarChartTick[] = [];\n\n  /** The value that maps to the top of the plot. Defaults to the largest bar or tick. */\n  @property({ type: Number })\n  max: number | null = null;\n\n  /** Plot height in pixels, excluding category labels. */\n  @property({ type: Number, attribute: 'plot-height' })\n  plotHeight = 200;\n\n  /** Accessible name for the chart. */\n  @property({ type: String, attribute: 'chart-label' })\n  chartLabel = '';\n\n  private topValue(): number {\n    if (this.max !== null && this.max > 0) return this.max;\n    const values = [...this.bars.map(bar => bar.value ?? 0), ...this.ticks.map(tick => tick.value)];\n    return Math.max(...values, 0) || 1;\n  }\n\n  private heightPct(value: number | null): number {\n    if (value === null) return 0;\n    return Math.max(0, Math.min(100, (value / this.topValue()) * 100));\n  }\n\n  render() {\n    if (!this.bars.length) {\n      return html`<div class=\"empty\">${this.chartLabel || nothing}</div>`;\n    }\n    const top = this.topValue();\n    return html`\n      <div class=\"frame\" role=\"img\" aria-label=${this.chartLabel || nothing} style=\"--st-bar-chart-height: ${this.plotHeight}px\">\n        <div class=\"axis\" aria-hidden=\"true\">\n          ${this.ticks.map(tick => html`<span style=\"bottom: ${(tick.value / top) * 100}%\">${tick.label}</span>`)}\n        </div>\n        <div class=\"plot\">\n          <div class=\"grid\" aria-hidden=\"true\">\n            ${this.ticks.map(tick => html`<i style=\"bottom: ${(tick.value / top) * 100}%\"></i>`)}\n          </div>\n          <div class=\"bars\">\n            ${this.bars.map(bar => {\n              const state = bar.value === null ? 'future' : bar.current ? 'current' : 'default';\n              return html`<div class=\"col\" data-state=${state} title=${bar.valueLabel ?? bar.label}>\n                <div class=\"stack\" style=\"height: ${this.heightPct(bar.value)}%\">\n                  ${bar.valueLabel ? html`<span class=\"value\">${bar.valueLabel}</span>` : nothing}\n                  <div class=\"bar\"></div>\n                </div>\n              </div>`;\n            })}\n          </div>\n        </div>\n        <div></div>\n        <div class=\"categories\" aria-hidden=\"true\">\n          ${this.bars.map(bar => html`<span class=${bar.current ? 'current' : ''}>${bar.label}</span>`)}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-YLY5DXQE.js → chunk-T55CG4YG.js}

@@ -137,6 +137,11 @@ 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;
@@ -182,4 +187,4 @@ KpiCard = __decorateClass([
 export {
   KpiCard
 };
-//# sourceMappingURL=chunk-YLY5DXQE.js.map
+//# sourceMappingURL=chunk-T55CG4YG.js.map

package/dist/{chunk-YLY5DXQE.js.map → chunk-T55CG4YG.js.map}

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

@@ -24,7 +24,7 @@ import {
 } from "./chunk-ALI26WOB.js";
 import {
   KpiCard
-} from "./chunk-YLY5DXQE.js";
+} from "./chunk-T55CG4YG.js";
 import {
   MegaMenu,
   MegaMenuColumn,
@@ -67,10 +67,10 @@ import {
 } from "./chunk-JKBWZLG4.js";
 import {
   AttentionPanel
-} from "./chunk-TVE4EPVK.js";
+} from "./chunk-4PXZPGWQ.js";
 import {
   BarChart
-} from "./chunk-2TPTJN36.js";
+} from "./chunk-AG2COC64.js";
 import {
   BentoGrid
 } from "./chunk-76AVBQUA.js";

package/dist/kpi-card/index.js

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

package/package.json

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

package/dist/chunk-2TPTJN36.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/bar-chart/BarChart.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 BarChartBar {\n  /** Category under the bar (for example a month abbreviation). */\n  label: string;\n  /** Bar height in the chart's units. `null` draws a grey stub, for periods not reached yet. */\n  value: number | null;\n  /** The value text above the bar. Format it before passing it in (for example \"5.74 L\"). */\n  valueLabel?: string;\n  /** Highlights this bar in the lighter accent, for the current period. */\n  current?: boolean;\n}\n\nexport interface BarChartTick {\n  /** Height of the gridline, in the chart's units. */\n  value: number;\n  /** Text at the left edge of the gridline, already formatted. */\n  label: string;\n}\n\n/**\n * A vertical bar chart for a fixed set of categories: value labels above the bars, gridlines with\n * labels on the left, and category labels underneath. Heights scale to `max`, or to the largest\n * bar or tick when `max` is not set. Values are not formatted here: pass `valueLabel` and tick\n * labels already formatted (currency, lakh/crore), so this element stays locale-free.\n */\n@customElement('st-bar-chart')\nexport class BarChart extends LitElement {\n  static styles = css`\n    ${fontFamilyStyles}\n\n    :host {\n      display: block;\n      min-width: 0;\n      color: var(--st-color-text-muted);\n    }\n\n    .frame {\n      position: relative;\n      display: grid;\n      grid-template-columns: auto 1fr;\n      column-gap: var(--st-space-10);\n    }\n\n    .axis {\n      position: relative;\n      height: var(--st-bar-chart-height, 200px);\n      font-size: var(--st-text-xs);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .axis span {\n      position: absolute;\n      right: 0;\n      transform: translateY(50%);\n      white-space: nowrap;\n    }\n\n    .plot {\n      position: relative;\n      height: var(--st-bar-chart-height, 200px);\n      border-bottom: 1px solid var(--st-color-border);\n    }\n\n    .grid {\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n    }\n\n    .grid i {\n      position: absolute;\n      left: 0;\n      right: 0;\n      border-top: 1px dashed var(--st-color-border);\n    }\n\n    .bars {\n      position: absolute;\n      inset: 0;\n      display: grid;\n      grid-auto-flow: column;\n      grid-auto-columns: 1fr;\n      align-items: end;\n      gap: var(--st-space-8);\n    }\n\n    .col {\n      position: relative;\n      height: 100%;\n      min-width: 0;\n    }\n\n    /* The bar and its value label share one box, anchored to the baseline, so the label always\n       sits just above the bar's top edge. */\n    .stack {\n      position: absolute;\n      left: 0;\n      right: 0;\n      bottom: 0;\n    }\n\n    .value {\n      position: absolute;\n      left: 0;\n      right: 0;\n      bottom: 100%;\n      padding-bottom: var(--st-space-4);\n      text-align: center;\n      font-size: var(--st-text-xs);\n      font-weight: var(--st-font-weight-medium);\n      white-space: nowrap;\n      color: var(--st-color-text-secondary);\n    }\n\n    .bar {\n      width: 100%;\n      border-radius: 4px 4px 0 0;\n      background: var(--st-color-accent);\n      min-height: 2px;\n    }\n\n    .col[data-state='current'] .bar {\n      background: color-mix(in oklch, var(--st-color-accent) 70%, #ffffff);\n    }\n\n    .col[data-state='future'] .bar {\n      background: var(--st-color-subtle);\n      min-height: 4px;\n    }\n\n    .col[data-state='current'] .value {\n      color: var(--st-color-accent-text);\n      font-weight: var(--st-font-weight-semibold);\n    }\n\n    .categories {\n      display: grid;\n      grid-auto-flow: column;\n      grid-auto-columns: 1fr;\n      gap: var(--st-space-8);\n      margin-top: var(--st-space-8);\n      font-size: var(--st-text-xs);\n      text-align: center;\n    }\n\n    .categories .current {\n      font-weight: var(--st-font-weight-semibold);\n      color: var(--st-color-accent-text);\n    }\n\n    .empty {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      min-height: 120px;\n      font-size: var(--st-text-base);\n    }\n  `;\n\n  /** The bars, in order from left to right. */\n  @property({ attribute: false })\n  bars: BarChartBar[] = [];\n\n  /** Optional gridlines with labels. */\n  @property({ attribute: false })\n  ticks: BarChartTick[] = [];\n\n  /** The value that maps to the top of the plot. Defaults to the largest bar or tick. */\n  @property({ type: Number })\n  max: number | null = null;\n\n  /** Plot height in pixels, excluding category labels. */\n  @property({ type: Number, attribute: 'plot-height' })\n  plotHeight = 200;\n\n  /** Accessible name for the chart. */\n  @property({ type: String, attribute: 'chart-label' })\n  chartLabel = '';\n\n  private topValue(): number {\n    if (this.max !== null && this.max > 0) return this.max;\n    const values = [...this.bars.map(bar => bar.value ?? 0), ...this.ticks.map(tick => tick.value)];\n    return Math.max(...values, 0) || 1;\n  }\n\n  private heightPct(value: number | null): number {\n    if (value === null) return 0;\n    return Math.max(0, Math.min(100, (value / this.topValue()) * 100));\n  }\n\n  render() {\n    if (!this.bars.length) {\n      return html`<div class=\"empty\">${this.chartLabel || nothing}</div>`;\n    }\n    const top = this.topValue();\n    return html`\n      <div class=\"frame\" role=\"img\" aria-label=${this.chartLabel || nothing} style=\"--st-bar-chart-height: ${this.plotHeight}px\">\n        <div class=\"axis\" aria-hidden=\"true\">\n          ${this.ticks.map(tick => html`<span style=\"bottom: ${(tick.value / top) * 100}%\">${tick.label}</span>`)}\n        </div>\n        <div class=\"plot\">\n          <div class=\"grid\" aria-hidden=\"true\">\n            ${this.ticks.map(tick => html`<i style=\"bottom: ${(tick.value / top) * 100}%\"></i>`)}\n          </div>\n          <div class=\"bars\">\n            ${this.bars.map(bar => {\n              const state = bar.value === null ? 'future' : bar.current ? 'current' : 'default';\n              return html`<div class=\"col\" data-state=${state} title=${bar.valueLabel ?? bar.label}>\n                <div class=\"stack\" style=\"height: ${this.heightPct(bar.value)}%\">\n                  ${bar.valueLabel ? html`<span class=\"value\">${bar.valueLabel}</span>` : nothing}\n                  <div class=\"bar\"></div>\n                </div>\n              </div>`;\n            })}\n          </div>\n        </div>\n        <div></div>\n        <div class=\"categories\" aria-hidden=\"true\">\n          ${this.bars.map(bar => html`<span class=${bar.current ? 'current' : ''}>${bar.label}</span>`)}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-TVE4EPVK.js.map

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