@sankhyatronics/sankhya-cms 0.1.11 → 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 (27) hide show
  1. package/custom-elements.json +210 -190
  2. package/dist/attention-panel/index.d.ts +5 -0
  3. package/dist/attention-panel/index.js +1 -1
  4. package/dist/bar-chart/index.js +1 -1
  5. package/dist/chip/index.d.ts +4 -0
  6. package/dist/chip/index.js +1 -1
  7. package/dist/{chunk-TVE4EPVK.js → chunk-35TX3AOA.js} +28 -14
  8. package/dist/chunk-35TX3AOA.js.map +1 -0
  9. package/dist/{chunk-YLY5DXQE.js → chunk-6D6ROU7X.js} +30 -21
  10. package/dist/chunk-6D6ROU7X.js.map +1 -0
  11. package/dist/{chunk-2TPTJN36.js → chunk-AG2COC64.js} +2 -1
  12. package/dist/chunk-AG2COC64.js.map +1 -0
  13. package/dist/{chunk-DAGSL2JV.js → chunk-INMSEYT6.js} +7 -3
  14. package/dist/chunk-INMSEYT6.js.map +1 -0
  15. package/dist/{chunk-LGGLQNSU.js → chunk-M5RNFNBI.js} +12 -7
  16. package/dist/chunk-M5RNFNBI.js.map +1 -0
  17. package/dist/date-tile/index.d.ts +2 -1
  18. package/dist/date-tile/index.js +1 -1
  19. package/dist/index.js +5 -5
  20. package/dist/kpi-card/index.d.ts +3 -0
  21. package/dist/kpi-card/index.js +1 -1
  22. package/package.json +1 -1
  23. package/dist/chunk-2TPTJN36.js.map +0 -1
  24. package/dist/chunk-DAGSL2JV.js.map +0 -1
  25. package/dist/chunk-LGGLQNSU.js.map +0 -1
  26. package/dist/chunk-TVE4EPVK.js.map +0 -1
  27. package/dist/chunk-YLY5DXQE.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
  {
@@ -31,6 +31,17 @@
31
31
  "default": "''",
32
32
  "description": "Bold line at the top of the panel.",
33
33
  "attribute": "heading"
34
+ },
35
+ {
36
+ "kind": "field",
37
+ "name": "hasIcon",
38
+ "type": {
39
+ "text": "boolean"
40
+ },
41
+ "default": "false",
42
+ "description": "Set when an element is slotted into `icon`, so the icon tile only renders with an icon.",
43
+ "attribute": "has-icon",
44
+ "reflects": true
34
45
  }
35
46
  ],
36
47
  "attributes": [
@@ -51,6 +62,15 @@
51
62
  "default": "''",
52
63
  "description": "Bold line at the top of the panel.",
53
64
  "fieldName": "heading"
65
+ },
66
+ {
67
+ "name": "has-icon",
68
+ "type": {
69
+ "text": "boolean"
70
+ },
71
+ "default": "false",
72
+ "description": "Set when an element is slotted into `icon`, so the icon tile only renders with an icon.",
73
+ "fieldName": "hasIcon"
54
74
  }
55
75
  ],
56
76
  "superclass": {
@@ -890,13 +910,199 @@
890
910
  }
891
911
  ]
892
912
  },
913
+ {
914
+ "kind": "javascript-module",
915
+ "path": "src/content-block/ContentBlock.ts",
916
+ "declarations": [
917
+ {
918
+ "kind": "class",
919
+ "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.",
920
+ "name": "ContentBlock",
921
+ "cssProperties": [
922
+ {
923
+ "description": "Overrides the block's padding.",
924
+ "name": "--st-content-block-padding"
925
+ }
926
+ ],
927
+ "members": [
928
+ {
929
+ "kind": "field",
930
+ "name": "title",
931
+ "type": {
932
+ "text": "string"
933
+ },
934
+ "default": "''",
935
+ "attribute": "title"
936
+ },
937
+ {
938
+ "kind": "field",
939
+ "name": "subtitle",
940
+ "type": {
941
+ "text": "string"
942
+ },
943
+ "default": "''",
944
+ "attribute": "subtitle"
945
+ },
946
+ {
947
+ "kind": "field",
948
+ "name": "contentSrc",
949
+ "type": {
950
+ "text": "string"
951
+ },
952
+ "default": "''",
953
+ "description": "URL of a Markdown file.",
954
+ "attribute": "content-src"
955
+ },
956
+ {
957
+ "kind": "field",
958
+ "name": "content",
959
+ "type": {
960
+ "text": "string"
961
+ },
962
+ "default": "''",
963
+ "description": "Inline Markdown, used when `content-src` is not set.",
964
+ "attribute": "content"
965
+ },
966
+ {
967
+ "kind": "field",
968
+ "name": "imageSrc",
969
+ "type": {
970
+ "text": "string"
971
+ },
972
+ "default": "''",
973
+ "attribute": "image-src"
974
+ },
975
+ {
976
+ "kind": "field",
977
+ "name": "imageAlt",
978
+ "type": {
979
+ "text": "string"
980
+ },
981
+ "default": "''",
982
+ "attribute": "image-alt"
983
+ },
984
+ {
985
+ "kind": "field",
986
+ "name": "imageCaption",
987
+ "type": {
988
+ "text": "string"
989
+ },
990
+ "default": "''",
991
+ "attribute": "image-caption"
992
+ },
993
+ {
994
+ "kind": "field",
995
+ "name": "inverted",
996
+ "type": {
997
+ "text": "boolean"
998
+ },
999
+ "default": "false",
1000
+ "attribute": "inverted",
1001
+ "reflects": true
1002
+ }
1003
+ ],
1004
+ "attributes": [
1005
+ {
1006
+ "name": "title",
1007
+ "type": {
1008
+ "text": "string"
1009
+ },
1010
+ "default": "''",
1011
+ "fieldName": "title"
1012
+ },
1013
+ {
1014
+ "name": "subtitle",
1015
+ "type": {
1016
+ "text": "string"
1017
+ },
1018
+ "default": "''",
1019
+ "fieldName": "subtitle"
1020
+ },
1021
+ {
1022
+ "name": "content-src",
1023
+ "type": {
1024
+ "text": "string"
1025
+ },
1026
+ "default": "''",
1027
+ "description": "URL of a Markdown file.",
1028
+ "fieldName": "contentSrc"
1029
+ },
1030
+ {
1031
+ "name": "content",
1032
+ "type": {
1033
+ "text": "string"
1034
+ },
1035
+ "default": "''",
1036
+ "description": "Inline Markdown, used when `content-src` is not set.",
1037
+ "fieldName": "content"
1038
+ },
1039
+ {
1040
+ "name": "image-src",
1041
+ "type": {
1042
+ "text": "string"
1043
+ },
1044
+ "default": "''",
1045
+ "fieldName": "imageSrc"
1046
+ },
1047
+ {
1048
+ "name": "image-alt",
1049
+ "type": {
1050
+ "text": "string"
1051
+ },
1052
+ "default": "''",
1053
+ "fieldName": "imageAlt"
1054
+ },
1055
+ {
1056
+ "name": "image-caption",
1057
+ "type": {
1058
+ "text": "string"
1059
+ },
1060
+ "default": "''",
1061
+ "fieldName": "imageCaption"
1062
+ },
1063
+ {
1064
+ "name": "inverted",
1065
+ "type": {
1066
+ "text": "boolean"
1067
+ },
1068
+ "default": "false",
1069
+ "fieldName": "inverted"
1070
+ }
1071
+ ],
1072
+ "superclass": {
1073
+ "name": "LitElement",
1074
+ "package": "lit"
1075
+ },
1076
+ "tagName": "st-content-block",
1077
+ "customElement": true
1078
+ }
1079
+ ],
1080
+ "exports": [
1081
+ {
1082
+ "kind": "js",
1083
+ "name": "ContentBlock",
1084
+ "declaration": {
1085
+ "name": "ContentBlock",
1086
+ "module": "src/content-block/ContentBlock.ts"
1087
+ }
1088
+ },
1089
+ {
1090
+ "kind": "custom-element-definition",
1091
+ "name": "st-content-block",
1092
+ "declaration": {
1093
+ "name": "ContentBlock",
1094
+ "module": "src/content-block/ContentBlock.ts"
1095
+ }
1096
+ }
1097
+ ]
1098
+ },
893
1099
  {
894
1100
  "kind": "javascript-module",
895
1101
  "path": "src/chip/Chip.ts",
896
1102
  "declarations": [
897
1103
  {
898
1104
  "kind": "class",
899
- "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.",
900
1106
  "name": "Chip",
901
1107
  "members": [
902
1108
  {
@@ -1178,199 +1384,13 @@
1178
1384
  }
1179
1385
  ]
1180
1386
  },
1181
- {
1182
- "kind": "javascript-module",
1183
- "path": "src/content-block/ContentBlock.ts",
1184
- "declarations": [
1185
- {
1186
- "kind": "class",
1187
- "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.",
1188
- "name": "ContentBlock",
1189
- "cssProperties": [
1190
- {
1191
- "description": "Overrides the block's padding.",
1192
- "name": "--st-content-block-padding"
1193
- }
1194
- ],
1195
- "members": [
1196
- {
1197
- "kind": "field",
1198
- "name": "title",
1199
- "type": {
1200
- "text": "string"
1201
- },
1202
- "default": "''",
1203
- "attribute": "title"
1204
- },
1205
- {
1206
- "kind": "field",
1207
- "name": "subtitle",
1208
- "type": {
1209
- "text": "string"
1210
- },
1211
- "default": "''",
1212
- "attribute": "subtitle"
1213
- },
1214
- {
1215
- "kind": "field",
1216
- "name": "contentSrc",
1217
- "type": {
1218
- "text": "string"
1219
- },
1220
- "default": "''",
1221
- "description": "URL of a Markdown file.",
1222
- "attribute": "content-src"
1223
- },
1224
- {
1225
- "kind": "field",
1226
- "name": "content",
1227
- "type": {
1228
- "text": "string"
1229
- },
1230
- "default": "''",
1231
- "description": "Inline Markdown, used when `content-src` is not set.",
1232
- "attribute": "content"
1233
- },
1234
- {
1235
- "kind": "field",
1236
- "name": "imageSrc",
1237
- "type": {
1238
- "text": "string"
1239
- },
1240
- "default": "''",
1241
- "attribute": "image-src"
1242
- },
1243
- {
1244
- "kind": "field",
1245
- "name": "imageAlt",
1246
- "type": {
1247
- "text": "string"
1248
- },
1249
- "default": "''",
1250
- "attribute": "image-alt"
1251
- },
1252
- {
1253
- "kind": "field",
1254
- "name": "imageCaption",
1255
- "type": {
1256
- "text": "string"
1257
- },
1258
- "default": "''",
1259
- "attribute": "image-caption"
1260
- },
1261
- {
1262
- "kind": "field",
1263
- "name": "inverted",
1264
- "type": {
1265
- "text": "boolean"
1266
- },
1267
- "default": "false",
1268
- "attribute": "inverted",
1269
- "reflects": true
1270
- }
1271
- ],
1272
- "attributes": [
1273
- {
1274
- "name": "title",
1275
- "type": {
1276
- "text": "string"
1277
- },
1278
- "default": "''",
1279
- "fieldName": "title"
1280
- },
1281
- {
1282
- "name": "subtitle",
1283
- "type": {
1284
- "text": "string"
1285
- },
1286
- "default": "''",
1287
- "fieldName": "subtitle"
1288
- },
1289
- {
1290
- "name": "content-src",
1291
- "type": {
1292
- "text": "string"
1293
- },
1294
- "default": "''",
1295
- "description": "URL of a Markdown file.",
1296
- "fieldName": "contentSrc"
1297
- },
1298
- {
1299
- "name": "content",
1300
- "type": {
1301
- "text": "string"
1302
- },
1303
- "default": "''",
1304
- "description": "Inline Markdown, used when `content-src` is not set.",
1305
- "fieldName": "content"
1306
- },
1307
- {
1308
- "name": "image-src",
1309
- "type": {
1310
- "text": "string"
1311
- },
1312
- "default": "''",
1313
- "fieldName": "imageSrc"
1314
- },
1315
- {
1316
- "name": "image-alt",
1317
- "type": {
1318
- "text": "string"
1319
- },
1320
- "default": "''",
1321
- "fieldName": "imageAlt"
1322
- },
1323
- {
1324
- "name": "image-caption",
1325
- "type": {
1326
- "text": "string"
1327
- },
1328
- "default": "''",
1329
- "fieldName": "imageCaption"
1330
- },
1331
- {
1332
- "name": "inverted",
1333
- "type": {
1334
- "text": "boolean"
1335
- },
1336
- "default": "false",
1337
- "fieldName": "inverted"
1338
- }
1339
- ],
1340
- "superclass": {
1341
- "name": "LitElement",
1342
- "package": "lit"
1343
- },
1344
- "tagName": "st-content-block",
1345
- "customElement": true
1346
- }
1347
- ],
1348
- "exports": [
1349
- {
1350
- "kind": "js",
1351
- "name": "ContentBlock",
1352
- "declaration": {
1353
- "name": "ContentBlock",
1354
- "module": "src/content-block/ContentBlock.ts"
1355
- }
1356
- },
1357
- {
1358
- "kind": "custom-element-definition",
1359
- "name": "st-content-block",
1360
- "declaration": {
1361
- "name": "ContentBlock",
1362
- "module": "src/content-block/ContentBlock.ts"
1363
- }
1364
- }
1365
- ]
1366
- },
1367
1387
  {
1368
1388
  "kind": "javascript-module",
1369
1389
  "path": "src/date-tile/DateTile.ts",
1370
1390
  "declarations": [
1371
1391
  {
1372
1392
  "kind": "class",
1373
- "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.",
1374
1394
  "name": "DateTile",
1375
1395
  "members": [
1376
1396
  {
@@ -3988,7 +4008,7 @@
3988
4008
  "declarations": [
3989
4009
  {
3990
4010
  "kind": "class",
3991
- "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.",
3992
4012
  "name": "KpiCard",
3993
4013
  "members": [
3994
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;
@@ -14,6 +16,9 @@ declare class AttentionPanel extends LitElement {
14
16
  tone: 'accent' | 'warning' | 'danger';
15
17
  /** Bold line at the top of the panel. */
16
18
  heading: string;
19
+ /** Set when an element is slotted into `icon`, so the icon tile only renders with an icon. */
20
+ hasIcon: boolean;
21
+ connectedCallback(): void;
17
22
  render(): lit.TemplateResult<1>;
18
23
  }
19
24
 
package/dist/attention-panel/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  AttentionPanel
3
- } from "../chunk-TVE4EPVK.js";
3
+ } from "../chunk-35TX3AOA.js";
4
4
  import "../chunk-KMU6ABQF.js";
5
5
  import "../chunk-EUXUH3YW.js";
6
6
  export {
package/dist/bar-chart/index.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  BarChart
3
- } from "../chunk-2TPTJN36.js";
3
+ } from "../chunk-AG2COC64.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-TVE4EPVK.js → chunk-35TX3AOA.js} RENAMED
@@ -6,21 +6,28 @@ import {
6
6
  } from "./chunk-EUXUH3YW.js";
7
7
 
8
8
  // src/attention-panel/AttentionPanel.ts
9
- import { LitElement, css, html } from "lit";
9
+ import { LitElement, css, html, nothing } from "lit";
10
10
  import { customElement, property } from "lit/decorators.js";
11
11
  var AttentionPanel = class extends LitElement {
12
12
  constructor() {
13
13
  super(...arguments);
14
14
  this.tone = "accent";
15
15
  this.heading = "";
16
+ this.hasIcon = false;
17
+ }
18
+ connectedCallback() {
19
+ super.connectedCallback();
20
+ this.hasIcon = this.querySelector('[slot="icon"]') !== null;
16
21
  }
17
22
  render() {
18
23
  return html`
19
- <span class="icon" part="icon"><slot name="icon"></slot></span>
20
- <div class="body">
21
- <p class="title" part="title">${this.heading}</p>
22
- <div class="detail" part="detail"><slot></slot></div>
23
- <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>
24
31
  </div>
25
32
  `;
26
33
  }
@@ -29,20 +36,24 @@ AttentionPanel.styles = css`
29
36
  ${fontFamilyStyles}
30
37
 
31
38
  :host {
39
+ display: block;
40
+ color: var(--st-color-text);
41
+ }
42
+
43
+ .panel {
32
44
  display: flex;
33
45
  align-items: flex-start;
34
46
  gap: var(--st-space-12);
35
47
  padding: var(--st-space-16);
36
48
  border-radius: var(--st-radius-md);
37
49
  background: var(--st-color-accent-subtle);
38
- color: var(--st-color-text);
39
50
  }
40
51
 
41
- :host([tone='warning']) {
52
+ :host([tone='warning']) .panel {
42
53
  background: var(--st-color-warning-subtle);
43
54
  }
44
55
 
45
- :host([tone='danger']) {
56
+ :host([tone='danger']) .panel {
46
57
  background: var(--st-color-danger-subtle);
47
58
  }
48
59
 
@@ -56,6 +67,10 @@ AttentionPanel.styles = css`
56
67
  flex: none;
57
68
  }
58
69
 
70
+ :host(:not([has-icon])) .icon {
71
+ display: none;
72
+ }
73
+
59
74
  .body {
60
75
  display: flex;
61
76
  flex-direction: column;
@@ -98,10 +113,6 @@ AttentionPanel.styles = css`
98
113
  .action:empty {
99
114
  display: none;
100
115
  }
101
-
102
- .icon:empty {
103
- display: none;
104
- }
105
116
  `;
106
117
  __decorateClass([
107
118
  property({ type: String, reflect: true })
@@ -109,6 +120,9 @@ __decorateClass([
109
120
  __decorateClass([
110
121
  property({ type: String })
111
122
  ], AttentionPanel.prototype, "heading", 2);
123
+ __decorateClass([
124
+ property({ type: Boolean, reflect: true, attribute: "has-icon" })
125
+ ], AttentionPanel.prototype, "hasIcon", 2);
112
126
  AttentionPanel = __decorateClass([
113
127
  customElement("st-attention-panel")
114
128
  ], AttentionPanel);
@@ -116,4 +130,4 @@ AttentionPanel = __decorateClass([
116
130
  export {
117
131
  AttentionPanel
118
132
  };
119
- //# sourceMappingURL=chunk-TVE4EPVK.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-YLY5DXQE.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%;
@@ -149,12 +156,14 @@ KpiCard.styles = css`
149
156
  margin-top: var(--st-space-14);
150
157
  }
151
158
 
152
- .chips:empty {
159
+ .chips:empty,
160
+ .footer:empty {
153
161
  display: none;
154
162
  }
155
163
 
156
- .footer:empty {
157
- 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);
158
167
  }
159
168
  `;
160
169
  __decorateClass([
@@ -182,4 +191,4 @@ KpiCard = __decorateClass([
182
191
  export {
183
192
  KpiCard
184
193
  };
185
- //# sourceMappingURL=chunk-YLY5DXQE.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-2TPTJN36.js → chunk-AG2COC64.js} RENAMED
@@ -149,6 +149,7 @@ BarChart.styles = css`
149
149
 
150
150
  .bar {
151
151
  width: 100%;
152
+ height: 100%;
152
153
  border-radius: 4px 4px 0 0;
153
154
  background: var(--st-color-accent);
154
155
  min-height: 2px;
@@ -213,4 +214,4 @@ BarChart = __decorateClass([
213
214
  export {
214
215
  BarChart
215
216
  };
216
- //# sourceMappingURL=chunk-2TPTJN36.js.map
217
+ //# sourceMappingURL=chunk-AG2COC64.js.map
package/dist/chunk-AG2COC64.js.map ADDED
@@ -0,0 +1 @@
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-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-YLY5DXQE.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,10 +67,10 @@ import {
67
67
  } from "./chunk-JKBWZLG4.js";
68
68
  import {
69
69
  AttentionPanel
70
- } from "./chunk-TVE4EPVK.js";
70
+ } from "./chunk-35TX3AOA.js";
71
71
  import {
72
72
  BarChart
73
- } from "./chunk-2TPTJN36.js";
73
+ } from "./chunk-AG2COC64.js";
74
74
  import {
75
75
  BentoGrid
76
76
  } from "./chunk-76AVBQUA.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-YLY5DXQE.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.11",
3
+ "version": "0.1.13",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/sankhyatronics/SankhyaCMS.git",
package/dist/chunk-2TPTJN36.js.map DELETED
@@ -1 +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 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-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-TVE4EPVK.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/attention-panel/AttentionPanel.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { fontFamilyStyles } from '../shared/styles';\n\n/**\n * A tinted panel that calls out the most serious item needing action: an icon, a title, a line of\n * detail and an action link. `tone` picks the colour: `warning` (amber) for things due soon,\n * `danger` (red) for overdue or failing items, `accent` (blue) for set-up tips.\n *\n * Slots: `icon` (a glyph beside the title), default (the detail text), `action` (a link or button).\n */\n@customElement('st-attention-panel')\nexport class AttentionPanel extends LitElement {\n static styles = css`\n ${fontFamilyStyles}\n\n :host {\n display: flex;\n align-items: flex-start;\n gap: var(--st-space-12);\n padding: var(--st-space-16);\n border-radius: var(--st-radius-md);\n background: var(--st-color-accent-subtle);\n color: var(--st-color-text);\n }\n\n :host([tone='warning']) {\n background: var(--st-color-warning-subtle);\n }\n\n :host([tone='danger']) {\n background: var(--st-color-danger-subtle);\n }\n\n .icon {\n display: inline-grid;\n place-items: center;\n width: 32px;\n height: 32px;\n border-radius: var(--st-radius-sm);\n background: var(--st-color-surface);\n flex: none;\n }\n\n .body {\n display: flex;\n flex-direction: column;\n gap: var(--st-space-4);\n min-width: 0;\n flex: 1;\n }\n\n .title {\n margin: 0;\n font-size: var(--st-text-lg);\n font-weight: var(--st-font-weight-semibold);\n color: var(--st-color-text-strong);\n }\n\n .detail {\n font-size: var(--st-text-base);\n line-height: 1.5;\n color: var(--st-color-text-secondary);\n }\n\n .action {\n margin-top: var(--st-space-6);\n font-size: var(--st-text-base);\n font-weight: var(--st-font-weight-semibold);\n }\n\n :host([tone='warning']) .action {\n color: var(--st-color-warning-text);\n }\n\n :host([tone='danger']) .action {\n color: var(--st-color-danger-text);\n }\n\n :host([tone='accent']) .action {\n color: var(--st-color-accent-text);\n }\n\n .action:empty {\n display: none;\n }\n\n .icon:empty {\n display: none;\n }\n `;\n\n /** Colour of the panel: `accent` for tips, `warning` for due soon, `danger` for overdue. */\n @property({ type: String, reflect: true })\n tone: 'accent' | 'warning' | 'danger' = 'accent';\n\n /** Bold line at the top of the panel. */\n @property({ type: String })\n heading = '';\n\n render() {\n return html`\n <span class=\"icon\" part=\"icon\"><slot name=\"icon\"></slot></span>\n <div class=\"body\">\n <p class=\"title\" part=\"title\">${this.heading}</p>\n <div class=\"detail\" part=\"detail\"><slot></slot></div>\n <div class=\"action\" part=\"action\"><slot name=\"action\"></slot></div>\n </div>\n `;\n }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAYjC,IAAM,iBAAN,cAA6B,WAAW;AAAA,EAAxC;AAAA;AAkFL,gBAAwC;AAIxC,mBAAU;AAAA;AAAA,EAEV,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,wCAG6B,KAAK,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKlD;AACF;AAlGa,eACJ,SAAS;AAAA,MACZ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgFpB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAjF9B,eAkFX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArFf,eAsFX;AAtFW,iBAAN;AAAA,EADN,cAAc,oBAAoB;AAAA,GACtB;","names":[]}
package/dist/chunk-YLY5DXQE.js.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]) .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":[]}