@sankhyatronics/sankhya-cms 0.1.12 → 0.1.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/custom-elements.json +4 -4
  2. package/dist/attention-panel/index.d.ts +2 -0
  3. package/dist/attention-panel/index.js +1 -1
  4. package/dist/chip/index.d.ts +4 -0
  5. package/dist/chip/index.js +1 -1
  6. package/dist/{chunk-4PXZPGWQ.js → chunk-35TX3AOA.js} +19 -13
  7. package/dist/chunk-35TX3AOA.js.map +1 -0
  8. package/dist/{chunk-T55CG4YG.js → chunk-6D6ROU7X.js} +30 -26
  9. package/dist/chunk-6D6ROU7X.js.map +1 -0
  10. package/dist/{chunk-DAGSL2JV.js → chunk-INMSEYT6.js} +7 -3
  11. package/dist/chunk-INMSEYT6.js.map +1 -0
  12. package/dist/{chunk-LGGLQNSU.js → chunk-M5RNFNBI.js} +12 -7
  13. package/dist/chunk-M5RNFNBI.js.map +1 -0
  14. package/dist/date-tile/index.d.ts +2 -1
  15. package/dist/date-tile/index.js +1 -1
  16. package/dist/index.js +4 -4
  17. package/dist/kpi-card/index.d.ts +3 -0
  18. package/dist/kpi-card/index.js +1 -1
  19. package/package.json +1 -1
  20. package/dist/chunk-4PXZPGWQ.js.map +0 -1
  21. package/dist/chunk-DAGSL2JV.js.map +0 -1
  22. package/dist/chunk-LGGLQNSU.js.map +0 -1
  23. package/dist/chunk-T55CG4YG.js.map +0 -1
package/custom-elements.json CHANGED
@@ -8,7 +8,7 @@
8
8
  "declarations": [
9
9
  {
10
10
  "kind": "class",
11
- "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).",
11
+ "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.",
12
12
  "name": "AttentionPanel",
13
13
  "members": [
14
14
  {
@@ -1102,7 +1102,7 @@
1102
1102
  "declarations": [
1103
1103
  {
1104
1104
  "kind": "class",
1105
- "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).",
1105
+ "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.",
1106
1106
  "name": "Chip",
1107
1107
  "members": [
1108
1108
  {
@@ -1390,7 +1390,7 @@
1390
1390
  "declarations": [
1391
1391
  {
1392
1392
  "kind": "class",
1393
- "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.",
1393
+ "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.",
1394
1394
  "name": "DateTile",
1395
1395
  "members": [
1396
1396
  {
@@ -4008,7 +4008,7 @@
4008
4008
  "declarations": [
4009
4009
  {
4010
4010
  "kind": "class",
4011
- "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).",
4011
+ "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.",
4012
4012
  "name": "KpiCard",
4013
4013
  "members": [
4014
4014
  {
package/dist/attention-panel/index.d.ts CHANGED
@@ -7,6 +7,8 @@ import { LitElement } from 'lit';
7
7
  * `danger` (red) for overdue or failing items, `accent` (blue) for set-up tips.
8
8
  *
9
9
  * Slots: `icon` (a glyph beside the title), default (the detail text), `action` (a link or button).
10
+ * The panel's box sits on an inner element, not on `:host`, so an outer page's CSS reset can't
11
+ * remove its padding.
10
12
  */
11
13
  declare class AttentionPanel extends LitElement {
12
14
  static styles: lit.CSSResult;
package/dist/attention-panel/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  AttentionPanel
3
- } from "../chunk-4PXZPGWQ.js";
3
+ } from "../chunk-35TX3AOA.js";
4
4
  import "../chunk-KMU6ABQF.js";
5
5
  import "../chunk-EUXUH3YW.js";
6
6
  export {
package/dist/chip/index.d.ts CHANGED
@@ -6,6 +6,10 @@ import { LitElement } from 'lit';
6
6
  * to the theme's status tokens (soft background, text colour on that background), so a chip reads
7
7
  * the same in every theme. Use `neutral` for plain labels, `accent` for the brand tint, and the
8
8
  * status tones for meaning only (success = done, warning = due soon, danger = overdue).
9
+ *
10
+ * The pill's box (padding, background) sits on an inner element, not on `:host`: an outer page's
11
+ * CSS reset (Tailwind's preflight zeroes padding on every element) beats a component's `:host`
12
+ * rules, which would leave the pill without its padding.
9
13
  */
10
14
  declare class Chip extends LitElement {
11
15
  static styles: lit.CSSResult;
package/dist/chip/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  Chip
3
- } from "../chunk-LGGLQNSU.js";
3
+ } from "../chunk-M5RNFNBI.js";
4
4
  import "../chunk-KMU6ABQF.js";
5
5
  import "../chunk-EUXUH3YW.js";
6
6
  export {
package/dist/{chunk-4PXZPGWQ.js → chunk-35TX3AOA.js} RENAMED
@@ -21,11 +21,13 @@ var AttentionPanel = class extends LitElement {
21
21
  }
22
22
  render() {
23
23
  return html`
24
- ${this.hasIcon ? html`<span class="icon" part="icon"><slot name="icon"></slot></span>` : nothing}
25
- <div class="body">
26
- <p class="title" part="title">${this.heading}</p>
27
- <div class="detail" part="detail"><slot></slot></div>
28
- <div class="action" part="action"><slot name="action"></slot></div>
24
+ <div class="panel" part="panel">
25
+ <span class="icon" part="icon"><slot name="icon"></slot></span>
26
+ <div class="body">
27
+ ${this.heading ? html`<p class="title" part="title">${this.heading}</p>` : nothing}
28
+ <div class="detail" part="detail"><slot></slot></div>
29
+ <div class="action" part="action"><slot name="action"></slot></div>
30
+ </div>
29
31
  </div>
30
32
  `;
31
33
  }
@@ -34,20 +36,24 @@ AttentionPanel.styles = css`
34
36
  ${fontFamilyStyles}
35
37
 
36
38
  :host {
39
+ display: block;
40
+ color: var(--st-color-text);
41
+ }
42
+
43
+ .panel {
37
44
  display: flex;
38
45
  align-items: flex-start;
39
46
  gap: var(--st-space-12);
40
47
  padding: var(--st-space-16);
41
48
  border-radius: var(--st-radius-md);
42
49
  background: var(--st-color-accent-subtle);
43
- color: var(--st-color-text);
44
50
  }
45
51
 
46
- :host([tone='warning']) {
52
+ :host([tone='warning']) .panel {
47
53
  background: var(--st-color-warning-subtle);
48
54
  }
49
55
 
50
- :host([tone='danger']) {
56
+ :host([tone='danger']) .panel {
51
57
  background: var(--st-color-danger-subtle);
52
58
  }
53
59
 
@@ -61,6 +67,10 @@ AttentionPanel.styles = css`
61
67
  flex: none;
62
68
  }
63
69
 
70
+ :host(:not([has-icon])) .icon {
71
+ display: none;
72
+ }
73
+
64
74
  .body {
65
75
  display: flex;
66
76
  flex-direction: column;
@@ -103,10 +113,6 @@ AttentionPanel.styles = css`
103
113
  .action:empty {
104
114
  display: none;
105
115
  }
106
-
107
- .icon:empty {
108
- display: none;
109
- }
110
116
  `;
111
117
  __decorateClass([
112
118
  property({ type: String, reflect: true })
@@ -124,4 +130,4 @@ AttentionPanel = __decorateClass([
124
130
  export {
125
131
  AttentionPanel
126
132
  };
127
- //# sourceMappingURL=chunk-4PXZPGWQ.js.map
133
+ //# sourceMappingURL=chunk-35TX3AOA.js.map
package/dist/chunk-35TX3AOA.js.map ADDED
@@ -0,0 +1 @@
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} RENAMED
@@ -7,7 +7,7 @@ import {
7
7
  } from "./chunk-EUXUH3YW.js";
8
8
 
9
9
  // src/kpi-card/KpiCard.ts
10
- import { LitElement, css, html } from "lit";
10
+ import { LitElement, css, html, nothing } from "lit";
11
11
  import { customElement, property } from "lit/decorators.js";
12
12
  var KpiCard = class extends LitElement {
13
13
  constructor() {
@@ -25,17 +25,19 @@ var KpiCard = class extends LitElement {
25
25
  }
26
26
  render() {
27
27
  return html`
28
- <div class="head" part="head">
29
- <span class="icon" part="icon"><slot name="icon"></slot></span>
30
- <span part="label">${this.label}</span>
28
+ <div class="card" part="card">
29
+ <div class="head" part="head">
30
+ <span class="icon" part="icon"><slot name="icon"></slot></span>
31
+ <span part="label">${this.label}</span>
32
+ </div>
33
+ <div class="value" part="value">
34
+ <span>${this.value}</span>
35
+ ${this.unit ? html`<span class="unit" part="unit">${this.unit}</span>` : nothing}
36
+ </div>
37
+ ${this.sub ? html`<div class="sub" part="sub">${this.sub}</div>` : nothing}
38
+ <div class="chips" part="chips"><slot name="chips"></slot></div>
39
+ <div class="footer" part="footer"><slot name="footer"></slot></div>
31
40
  </div>
32
- <div class="value" part="value">
33
- <span>${this.value}</span>
34
- ${this.unit ? html`<span class="unit" part="unit">${this.unit}</span>` : ""}
35
- </div>
36
- ${this.sub ? html`<div class="sub" part="sub">${this.sub}</div>` : ""}
37
- <div class="chips" part="chips"><slot name="chips"></slot></div>
38
- <div class="footer" part="footer"><slot name="footer"></slot></div>
39
41
  `;
40
42
  }
41
43
  };
@@ -43,24 +45,29 @@ KpiCard.styles = css`
43
45
  ${fontFamilyStyles}
44
46
 
45
47
  :host {
48
+ display: block;
49
+ min-width: 0;
50
+ color: var(--st-color-text);
51
+ }
52
+
53
+ .card {
54
+ position: relative;
46
55
  display: flex;
47
56
  flex-direction: column;
48
- min-width: 0;
57
+ height: 100%;
49
58
  box-sizing: border-box;
50
59
  padding: var(--st-space-20);
60
+ overflow: hidden;
51
61
  ${cardShellStyles}
52
- color: var(--st-color-text);
53
62
  }
54
63
 
55
- :host([hero]) {
56
- position: relative;
57
- overflow: hidden;
64
+ :host([hero]) .card {
58
65
  border: 0;
59
66
  background: linear-gradient(135deg, var(--st-color-accent) 0%, color-mix(in oklch, var(--st-color-accent) 70%, #3aa8e8) 100%);
60
67
  color: var(--st-color-on-solid);
61
68
  }
62
69
 
63
- :host([hero])::after {
70
+ :host([hero]) .card::after {
64
71
  content: '';
65
72
  position: absolute;
66
73
  top: -40%;
@@ -137,11 +144,6 @@ KpiCard.styles = css`
137
144
  color: var(--st-color-text-muted);
138
145
  }
139
146
 
140
- :host([hero]) ::slotted(st-chip) {
141
- background: color-mix(in oklch, var(--st-color-on-solid) 18%, transparent);
142
- color: var(--st-color-on-solid);
143
- }
144
-
145
147
  :host([hero]) .sub {
146
148
  color: var(--st-color-on-solid);
147
149
  opacity: 0.85;
@@ -154,12 +156,14 @@ KpiCard.styles = css`
154
156
  margin-top: var(--st-space-14);
155
157
  }
156
158
 
157
- .chips:empty {
159
+ .chips:empty,
160
+ .footer:empty {
158
161
  display: none;
159
162
  }
160
163
 
161
- .footer:empty {
162
- display: none;
164
+ :host([hero]) ::slotted(st-chip) {
165
+ background: color-mix(in oklch, var(--st-color-on-solid) 18%, transparent);
166
+ color: var(--st-color-on-solid);
163
167
  }
164
168
  `;
165
169
  __decorateClass([
@@ -187,4 +191,4 @@ KpiCard = __decorateClass([
187
191
  export {
188
192
  KpiCard
189
193
  };
190
- //# sourceMappingURL=chunk-T55CG4YG.js.map
194
+ //# sourceMappingURL=chunk-6D6ROU7X.js.map
package/dist/chunk-6D6ROU7X.js.map ADDED
@@ -0,0 +1 @@
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-DAGSL2JV.js → chunk-INMSEYT6.js} RENAMED
@@ -16,7 +16,7 @@ var DateTile = class extends LitElement {
16
16
  this.tone = "default";
17
17
  }
18
18
  render() {
19
- return html`<span class="month" part="month">${this.month}</span><span class="day" part="day">${this.day}</span>`;
19
+ return html`<div class="tile" part="tile"><span class="month" part="month">${this.month}</span><span class="day" part="day">${this.day}</span></div>`;
20
20
  }
21
21
  };
22
22
  DateTile.styles = css`
@@ -24,6 +24,11 @@ DateTile.styles = css`
24
24
 
25
25
  :host {
26
26
  display: inline-flex;
27
+ flex: none;
28
+ }
29
+
30
+ .tile {
31
+ display: flex;
27
32
  flex-direction: column;
28
33
  align-items: stretch;
29
34
  width: 52px;
@@ -32,7 +37,6 @@ DateTile.styles = css`
32
37
  background: var(--st-color-surface);
33
38
  overflow: hidden;
34
39
  text-align: center;
35
- flex: none;
36
40
  }
37
41
 
38
42
  .month {
@@ -80,4 +84,4 @@ DateTile = __decorateClass([
80
84
  export {
81
85
  DateTile
82
86
  };
83
- //# sourceMappingURL=chunk-DAGSL2JV.js.map
87
+ //# sourceMappingURL=chunk-INMSEYT6.js.map
package/dist/chunk-INMSEYT6.js.map ADDED
@@ -0,0 +1 @@
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/{chunk-LGGLQNSU.js → chunk-M5RNFNBI.js} RENAMED
@@ -16,13 +16,18 @@ var Chip = class extends LitElement {
16
16
  this.dot = false;
17
17
  }
18
18
  render() {
19
- return html`<span class="dot" part="dot" aria-hidden="true"></span><slot></slot>`;
19
+ return html`<span class="pill" part="pill"><span class="dot" part="dot" aria-hidden="true"></span><slot></slot></span>`;
20
20
  }
21
21
  };
22
22
  Chip.styles = css`
23
23
  ${fontFamilyStyles}
24
24
 
25
25
  :host {
26
+ display: inline-flex;
27
+ max-width: 100%;
28
+ }
29
+
30
+ .pill {
26
31
  display: inline-flex;
27
32
  align-items: center;
28
33
  gap: var(--st-space-6);
@@ -37,27 +42,27 @@ Chip.styles = css`
37
42
  font-variant-numeric: tabular-nums;
38
43
  }
39
44
 
40
- :host([size='sm']) {
45
+ :host([size='sm']) .pill {
41
46
  padding: 0 var(--st-space-8);
42
47
  font-size: var(--st-text-xs);
43
48
  }
44
49
 
45
- :host([tone='accent']) {
50
+ :host([tone='accent']) .pill {
46
51
  background: var(--st-color-accent-subtle);
47
52
  color: var(--st-color-accent-text);
48
53
  }
49
54
 
50
- :host([tone='success']) {
55
+ :host([tone='success']) .pill {
51
56
  background: var(--st-color-success-subtle);
52
57
  color: var(--st-color-success-text);
53
58
  }
54
59
 
55
- :host([tone='warning']) {
60
+ :host([tone='warning']) .pill {
56
61
  background: var(--st-color-warning-subtle);
57
62
  color: var(--st-color-warning-text);
58
63
  }
59
64
 
60
- :host([tone='danger']) {
65
+ :host([tone='danger']) .pill {
61
66
  background: var(--st-color-danger-subtle);
62
67
  color: var(--st-color-danger-text);
63
68
  }
@@ -90,4 +95,4 @@ Chip = __decorateClass([
90
95
  export {
91
96
  Chip
92
97
  };
93
- //# sourceMappingURL=chunk-LGGLQNSU.js.map
98
+ //# sourceMappingURL=chunk-M5RNFNBI.js.map
package/dist/chunk-M5RNFNBI.js.map ADDED
@@ -0,0 +1 @@
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 .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=\"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;AAgEL,gBAAgE;AAIhE,gBAAoB;AAIpB,eAAM;AAAA;AAAA,EAEN,SAAS;AACP,WAAO;AAAA,EACT;AACF;AA7Ea,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;AA8DpB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA/D9B,KAgEX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAnE9B,KAoEX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAvE/B,KAwEX;AAxEW,OAAN;AAAA,EADN,cAAc,SAAS;AAAA,GACX;","names":[]}
package/dist/date-tile/index.d.ts CHANGED
@@ -4,7 +4,8 @@ import { LitElement } from 'lit';
4
4
  /**
5
5
  * A calendar date tile: a month band over a large day number, as used for due dates. `tone`
6
6
  * colours the month band: `default` for a neutral date, `warning` for due soon, `danger` for
7
- * overdue.
7
+ * overdue. The tile's box sits on an inner element, so an outer page's CSS reset can't remove
8
+ * its border.
8
9
  */
9
10
  declare class DateTile extends LitElement {
10
11
  static styles: lit.CSSResult;
package/dist/date-tile/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  DateTile
3
- } from "../chunk-DAGSL2JV.js";
3
+ } from "../chunk-INMSEYT6.js";
4
4
  import "../chunk-KMU6ABQF.js";
5
5
  import "../chunk-EUXUH3YW.js";
6
6
  export {
package/dist/index.js CHANGED
@@ -24,7 +24,7 @@ import {
24
24
  } from "./chunk-ALI26WOB.js";
25
25
  import {
26
26
  KpiCard
27
- } from "./chunk-T55CG4YG.js";
27
+ } from "./chunk-6D6ROU7X.js";
28
28
  import {
29
29
  MegaMenu,
30
30
  MegaMenuColumn,
@@ -44,7 +44,7 @@ import {
44
44
  } from "./chunk-MSSH3HFK.js";
45
45
  import {
46
46
  DateTile
47
- } from "./chunk-DAGSL2JV.js";
47
+ } from "./chunk-INMSEYT6.js";
48
48
  import {
49
49
  Dropdown
50
50
  } from "./chunk-LEXZKGQX.js";
@@ -67,7 +67,7 @@ import {
67
67
  } from "./chunk-JKBWZLG4.js";
68
68
  import {
69
69
  AttentionPanel
70
- } from "./chunk-4PXZPGWQ.js";
70
+ } from "./chunk-35TX3AOA.js";
71
71
  import {
72
72
  BarChart
73
73
  } from "./chunk-AG2COC64.js";
@@ -82,7 +82,7 @@ import {
82
82
  } from "./chunk-EMCQBT3S.js";
83
83
  import {
84
84
  Chip
85
- } from "./chunk-LGGLQNSU.js";
85
+ } from "./chunk-M5RNFNBI.js";
86
86
  import {
87
87
  ContentBlock
88
88
  } from "./chunk-BMHMNXIA.js";
package/dist/kpi-card/index.d.ts CHANGED
@@ -8,6 +8,9 @@ import { LitElement } from 'lit';
8
8
  * passed in: format numbers (Indian grouping, currency symbols) before setting it.
9
9
  *
10
10
  * Slots: `icon` (optional glyph), `chips` (a row of `st-chip`), `footer` (anything below the chips).
11
+ *
12
+ * The card's box sits on an inner element, not on `:host`: an outer page's CSS reset (Tailwind's
13
+ * preflight zeroes padding and borders on every element) beats a component's `:host` rules.
11
14
  */
12
15
  declare class KpiCard extends LitElement {
13
16
  static styles: lit.CSSResult;
package/dist/kpi-card/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  KpiCard
3
- } from "../chunk-T55CG4YG.js";
3
+ } from "../chunk-6D6ROU7X.js";
4
4
  import "../chunk-KMU6ABQF.js";
5
5
  import "../chunk-EUXUH3YW.js";
6
6
  export {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sankhyatronics/sankhya-cms",
3
- "version": "0.1.12",
3
+ "version": "0.1.13",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/sankhyatronics/SankhyaCMS.git",
package/dist/chunk-4PXZPGWQ.js.map DELETED
@@ -1 +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-DAGSL2JV.js.map DELETED
@@ -1 +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.\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 DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/chip/Chip.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { fontFamilyStyles } from '../shared/styles';\n\n/**\n * A small rounded status pill: text in the default slot, with an optional leading dot. Tones map\n * to the theme's status tokens (soft background, text colour on that background), so a chip reads\n * the same in every theme. Use `neutral` for plain labels, `accent` for the brand tint, and the\n * status tones for meaning only (success = done, warning = due soon, danger = overdue).\n */\n@customElement('st-chip')\nexport class Chip extends LitElement {\n static styles = css`\n ${fontFamilyStyles}\n\n :host {\n display: inline-flex;\n align-items: center;\n gap: var(--st-space-6);\n padding: var(--st-space-2) var(--st-space-10);\n border-radius: var(--st-radius-full);\n font-size: var(--st-text-sm);\n font-weight: var(--st-font-weight-medium);\n line-height: 1.4;\n white-space: nowrap;\n background: var(--st-color-subtle);\n color: var(--st-color-text-secondary);\n font-variant-numeric: tabular-nums;\n }\n\n :host([size='sm']) {\n padding: 0 var(--st-space-8);\n font-size: var(--st-text-xs);\n }\n\n :host([tone='accent']) {\n background: var(--st-color-accent-subtle);\n color: var(--st-color-accent-text);\n }\n\n :host([tone='success']) {\n background: var(--st-color-success-subtle);\n color: var(--st-color-success-text);\n }\n\n :host([tone='warning']) {\n background: var(--st-color-warning-subtle);\n color: var(--st-color-warning-text);\n }\n\n :host([tone='danger']) {\n background: var(--st-color-danger-subtle);\n color: var(--st-color-danger-text);\n }\n\n .dot {\n width: 6px;\n height: 6px;\n border-radius: var(--st-radius-circle);\n background: currentColor;\n flex: none;\n }\n\n :host(:not([dot])) .dot {\n display: none;\n }\n `;\n\n /** Colour treatment: a soft tint of the matching theme token. */\n @property({ type: String, reflect: true })\n tone: 'neutral' | 'accent' | 'success' | 'warning' | 'danger' = 'neutral';\n\n /** `sm` for dense lists and table cells. */\n @property({ type: String, reflect: true })\n size: 'md' | 'sm' = 'md';\n\n /** Shows a leading dot in the chip's text colour. */\n @property({ type: Boolean, reflect: true })\n dot = false;\n\n render() {\n return html`<span class=\"dot\" part=\"dot\" aria-hidden=\"true\"></span><slot></slot>`;\n }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAWjC,IAAM,OAAN,cAAmB,WAAW;AAAA,EAA9B;AAAA;AA2DL,gBAAgE;AAIhE,gBAAoB;AAIpB,eAAM;AAAA;AAAA,EAEN,SAAS;AACP,WAAO;AAAA,EACT;AACF;AAxEa,KACJ,SAAS;AAAA,MACZ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyDpB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA1D9B,KA2DX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA9D9B,KA+DX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlE/B,KAmEX;AAnEW,OAAN;AAAA,EADN,cAAc,SAAS;AAAA,GACX;","names":[]}
package/dist/chunk-T55CG4YG.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/kpi-card/KpiCard.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { cardShellStyles, fontFamilyStyles } from '../shared/styles';\n\n/**\n * A key-figure card for dashboards: a label, one large value with an optional unit (for example\n * \"lakh\" or \"crore\"), a secondary line, and a row of chips. The `icon` slot sits beside the label.\n * `hero` gives the blue gradient card used for the headline figure. The value is shown exactly as\n * passed in: format numbers (Indian grouping, currency symbols) before setting it.\n *\n * Slots: `icon` (optional glyph), `chips` (a row of `st-chip`), `footer` (anything below the chips).\n */\n@customElement('st-kpi-card')\nexport class KpiCard extends LitElement {\n static styles = css`\n ${fontFamilyStyles}\n\n :host {\n display: flex;\n flex-direction: column;\n min-width: 0;\n box-sizing: border-box;\n padding: var(--st-space-20);\n ${cardShellStyles}\n color: var(--st-color-text);\n }\n\n :host([hero]) {\n position: relative;\n overflow: hidden;\n border: 0;\n background: linear-gradient(135deg, var(--st-color-accent) 0%, color-mix(in oklch, var(--st-color-accent) 70%, #3aa8e8) 100%);\n color: var(--st-color-on-solid);\n }\n\n :host([hero])::after {\n content: '';\n position: absolute;\n top: -40%;\n right: -20%;\n width: 60%;\n padding-bottom: 60%;\n border-radius: var(--st-radius-circle);\n background: color-mix(in oklch, var(--st-color-on-solid) 10%, transparent);\n pointer-events: none;\n }\n\n .head {\n display: flex;\n align-items: center;\n gap: var(--st-space-10);\n min-height: 32px;\n font-size: var(--st-text-md);\n font-weight: var(--st-font-weight-medium);\n color: var(--st-color-text-secondary);\n }\n\n :host([hero]) .head {\n color: var(--st-color-on-solid);\n opacity: 0.85;\n }\n\n .icon {\n display: inline-grid;\n place-items: center;\n width: 32px;\n height: 32px;\n border-radius: var(--st-radius-sm);\n background: var(--st-color-accent-subtle);\n flex: none;\n }\n\n :host(:not([has-icon])) .icon {\n display: none;\n }\n\n .value {\n display: flex;\n align-items: baseline;\n flex-wrap: wrap;\n gap: var(--st-space-6);\n margin-top: var(--st-space-14);\n font-size: var(--st-text-kpi);\n font-weight: var(--st-font-weight-bold);\n line-height: 1.1;\n letter-spacing: -0.02em;\n font-variant-numeric: tabular-nums;\n color: var(--st-color-text-strong);\n }\n\n :host([hero]) .value {\n color: var(--st-color-on-solid);\n font-size: var(--st-text-hero);\n }\n\n .unit {\n font-size: var(--st-text-lg);\n font-weight: var(--st-font-weight-medium);\n color: var(--st-color-text-secondary);\n }\n\n :host([hero]) .unit {\n color: var(--st-color-on-solid);\n opacity: 0.85;\n }\n\n .sub {\n margin-top: var(--st-space-6);\n font-size: var(--st-text-base);\n color: var(--st-color-text-muted);\n }\n\n :host([hero]) ::slotted(st-chip) {\n background: color-mix(in oklch, var(--st-color-on-solid) 18%, transparent);\n color: var(--st-color-on-solid);\n }\n\n :host([hero]) .sub {\n color: var(--st-color-on-solid);\n opacity: 0.85;\n }\n\n .chips {\n display: flex;\n flex-wrap: wrap;\n gap: var(--st-space-8);\n margin-top: var(--st-space-14);\n }\n\n .chips:empty {\n display: none;\n }\n\n .footer:empty {\n display: none;\n }\n `;\n\n /** Label above the figure. */\n @property({ type: String })\n label = '';\n\n /** The figure, already formatted (for example \"25.88\"). */\n @property({ type: String })\n value = '';\n\n /** Unit shown beside the figure (for example \"lakh\"). */\n @property({ type: String })\n unit = '';\n\n /** Secondary line below the figure (for example the exact amount and the period). */\n @property({ type: String })\n sub = '';\n\n /** The blue gradient headline card. */\n @property({ type: Boolean, reflect: true })\n hero = false;\n\n /** Set when an element is slotted into `icon`, so the icon tile only shows when there is an icon. */\n @property({ type: Boolean, reflect: true, attribute: 'has-icon' })\n hasIcon = false;\n\n connectedCallback() {\n super.connectedCallback();\n this.hasIcon = this.querySelector('[slot=\"icon\"]') !== null;\n }\n\n render() {\n return html`\n <div class=\"head\" part=\"head\">\n <span class=\"icon\" part=\"icon\"><slot name=\"icon\"></slot></span>\n <span part=\"label\">${this.label}</span>\n </div>\n <div class=\"value\" part=\"value\">\n <span>${this.value}</span>\n ${this.unit ? html`<span class=\"unit\" part=\"unit\">${this.unit}</span>` : ''}\n </div>\n ${this.sub ? html`<div class=\"sub\" part=\"sub\">${this.sub}</div>` : ''}\n <div class=\"chips\" part=\"chips\"><slot name=\"chips\"></slot></div>\n <div class=\"footer\" part=\"footer\"><slot name=\"footer\"></slot></div>\n `;\n }\n}\n"],"mappings":";;;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAajC,IAAM,UAAN,cAAsB,WAAW;AAAA,EAAjC;AAAA;AA+HL,iBAAQ;AAIR,iBAAQ;AAIR,gBAAO;AAIP,eAAM;AAIN,gBAAO;AAIP,mBAAU;AAAA;AAAA,EAEV,oBAAoB;AAClB,UAAM,kBAAkB;AACxB,SAAK,UAAU,KAAK,cAAc,eAAe,MAAM;AAAA,EACzD;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,6BAGkB,KAAK,KAAK;AAAA;AAAA;AAAA,gBAGvB,KAAK,KAAK;AAAA,UAChB,KAAK,OAAO,sCAAsC,KAAK,IAAI,YAAY,EAAE;AAAA;AAAA,QAE3E,KAAK,MAAM,mCAAmC,KAAK,GAAG,WAAW,EAAE;AAAA;AAAA;AAAA;AAAA,EAIzE;AACF;AAzKa,QACJ,SAAS;AAAA,MACZ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAQd,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqHrB;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA9Hf,QA+HX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAlIf,QAmIX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAtIf,QAuIX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA1If,QA2IX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA9I/B,QA+IX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,WAAW,CAAC;AAAA,GAlJtD,QAmJX;AAnJW,UAAN;AAAA,EADN,cAAc,aAAa;AAAA,GACf;","names":[]}