@c2n/stat 0.0.12 → 0.0.14

package/custom-elements.json

@@ -0,0 +1 @@
+{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/stat.ts","declarations":[{"kind":"class","description":"A compact KPI block with an optional icon and trend. Text can be supplied through attributes for simple cases or\nreplaced with slots when the value needs richer formatting.","name":"Stat","cssProperties":[{"type":{"text":"padding"},"name":"--c2-stat--padding","default":"16px"},{"type":{"text":"pixel"},"name":"--c2-stat--gap","default":"12px"},{"type":{"text":"color"},"name":"--c2-stat--background","default":"#ffffff"},{"type":{"text":"color"},"name":"--c2-stat--color","default":"#18181b"},{"type":{"text":"border"},"name":"--c2-stat--border","default":"1px solid #e4e4e7"},{"type":{"text":"border-radius"},"name":"--c2-stat--border-radius","default":"8px"},{"type":{"text":"box-shadow"},"name":"--c2-stat--box-shadow","default":"none"},{"type":{"text":"pixel"},"name":"--c2-stat__icon--size","default":"40px"},{"type":{"text":"color"},"name":"--c2-stat__icon--background","default":"#f4f4f5"},{"type":{"text":"color"},"name":"--c2-stat__icon--color","default":"#71717a"},{"type":{"text":"border-radius"},"name":"--c2-stat__icon--border-radius","default":"8px"},{"type":{"text":"color"},"name":"--c2-stat__icon__positive--background","default":"#dcfce7"},{"type":{"text":"color"},"name":"--c2-stat__icon__positive--color","default":"#15803d"},{"type":{"text":"color"},"name":"--c2-stat__icon__negative--background","default":"#fee2e2"},{"type":{"text":"color"},"name":"--c2-stat__icon__negative--color","default":"#b91c1c"},{"type":{"text":"color"},"name":"--c2-stat__icon__warning--background","default":"#fef3c7"},{"type":{"text":"color"},"name":"--c2-stat__icon__warning--color","default":"#a16207"},{"type":{"text":"font-size"},"name":"--c2-stat__value--font-size","default":"24px"},{"type":{"text":"font-weight"},"name":"--c2-stat__value--font-weight","default":"600"},{"type":{"text":"pixel"},"name":"--c2-stat__value--line-height","default":"32px"},{"type":{"text":"font-size"},"name":"--c2-stat__label--font-size","default":"14px"},{"type":{"text":"color"},"name":"--c2-stat__label--color","default":"#71717a"},{"type":{"text":"font-size"},"name":"--c2-stat__description--font-size","default":"12px"},{"type":{"text":"color"},"name":"--c2-stat__description--color","default":"#71717a"}],"cssParts":[{"description":"The outer statistic layout container.","name":"container"},{"description":"Container wrapping the assigned leading `icon` slot.","name":"icon"},{"description":"Container wrapping the assigned primary `value` slot.","name":"value"},{"description":"Container wrapping the assigned `trend` slot badge or text.","name":"trend"},{"description":"Container wrapping the assigned statistic `label` slot.","name":"label"},{"description":"Container wrapping the assigned supporting `description` slot.","name":"description"}],"slots":[{"description":"Replaces the `value` text.","name":"value"},{"description":"Replaces the `label` text.","name":"label"},{"description":"Icon shown in the tinted leading container.","name":"icon"},{"description":"Badge or short trend text shown beside the value.","name":"trend"},{"description":"Supporting context below the label.","name":"description"}],"members":[{"kind":"field","name":"value","type":{"text":"string"},"default":"''","description":"Plain-text metric. Use the `value` slot for formatted markup.","attribute":"value"},{"kind":"field","name":"label","type":{"text":"string"},"default":"''","description":"Plain-text label. Use the `label` slot for formatted markup.","attribute":"label"},{"kind":"field","name":"tone","type":{"text":"StatTone"},"default":"'neutral'","description":"Semantic colour applied to the icon container.","attribute":"tone","reflects":true}],"attributes":[{"name":"value","type":{"text":"string"},"default":"''","description":"Plain-text metric. Use the `value` slot for formatted markup.","fieldName":"value"},{"name":"label","type":{"text":"string"},"default":"''","description":"Plain-text label. Use the `label` slot for formatted markup.","fieldName":"label"},{"name":"tone","type":{"text":"StatTone"},"default":"'neutral'","description":"Semantic colour applied to the icon container.","fieldName":"tone"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-stat","customElement":true}],"exports":[{"kind":"js","name":"Stat","declaration":{"name":"Stat","module":"src/stat.ts"}},{"kind":"custom-element-definition","name":"c2-stat","declaration":{"name":"Stat","module":"src/stat.ts"}}]}]}

package/dist/stat.js

@@ -1,5 +1,5 @@
 import { LitElement, html, unsafeCSS } from "lit";
-import { property } from "lit/decorators.js";
+import { property } from "@c2n/core/lit-helper.js";
 import { customElement } from "@c2n/core/element-helper.js";
 //#region src/stat.scss?inline
 var stat_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: block;\n}\n\n.c2-stat {\n  display: flex;\n  align-items: flex-start;\n  gap: var(--c2-stat--gap,12px);\n  padding: var(--c2-stat--padding,16px);\n  color: var(--c2-stat--color,#18181b);\n  background: var(--c2-stat--background,#ffffff);\n  border: var(--c2-stat--border,1px solid #e4e4e7);\n  border-radius: var(--c2-stat--border-radius,8px);\n  box-shadow: var(--c2-stat--box-shadow,none);\n}\n\n.icon {\n  display: grid;\n  width: var(--c2-stat__icon--size,40px);\n  height: var(--c2-stat__icon--size,40px);\n  flex: 0 0 var(--c2-stat__icon--size,40px);\n  place-items: center;\n  color: var(--c2-stat__icon--color,#71717a);\n  background: var(--c2-stat__icon--background,#f4f4f5);\n  border-radius: var(--c2-stat__icon--border-radius,8px);\n}\n.icon ::slotted(*) {\n  width: 50%;\n  height: 50%;\n}\n\n:host(:not(:has(> [slot=icon]))) .icon,\n:host(:not(:has(> [slot=description]))) .description {\n  display: none;\n}\n\n.content {\n  min-width: 0;\n  margin: 0;\n}\n\n.value-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.value,\n.trend,\n.description {\n  margin: 0;\n}\n\n.value {\n  font-size: var(--c2-stat__value--font-size,24px);\n  font-weight: var(--c2-stat__value--font-weight,600);\n  line-height: var(--c2-stat__value--line-height,32px);\n}\n\n.label {\n  color: var(--c2-stat__label--color,#71717a);\n  font-size: var(--c2-stat__label--font-size,14px);\n}\n\n.description {\n  margin-top: 4px;\n  color: var(--c2-stat__description--color,#71717a);\n  font-size: var(--c2-stat__description--font-size,12px);\n}\n\n:host([tone=positive]) .icon {\n  color: var(--c2-stat__icon__positive--color,#15803d);\n  background: var(--c2-stat__icon__positive--background,#dcfce7);\n}\n\n:host([tone=negative]) .icon {\n  color: var(--c2-stat__icon__negative--color,#b91c1c);\n  background: var(--c2-stat__icon__negative--background,#fee2e2);\n}\n\n:host([tone=warning]) .icon {\n  color: var(--c2-stat__icon__warning--color,#a16207);\n  background: var(--c2-stat__icon__warning--background,#fef3c7);\n}";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/stat",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "main": "dist/stat.js",
   "exports": {
@@ -21,6 +21,7 @@
   "files": [
     "dist",
     "types",
+    "custom-elements.json",
     "react.d.ts",
     "react.js",
     "vue.d.ts",
@@ -62,12 +63,12 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.12",
+    "@c2n/core": "0.0.14",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "43e38b42ac221ffeef99a773c42dd3356961d26a"
+  "gitHead": "0261bfceaaa9f710a54e8f36cb57f946c0b83e53"
 }

package/types/src/stat.d.ts

@@ -10,6 +10,13 @@ export type StatTone = 'neutral' | 'positive' | 'negative' | 'warning';
  * @slot icon - Icon shown in the tinted leading container.
  * @slot trend - Badge or short trend text shown beside the value.
  * @slot description - Supporting context below the label.
+ * @csspart container - The outer statistic layout container.
+ * @csspart icon - Container wrapping the assigned leading `icon` slot.
+ * @csspart value - Container wrapping the assigned primary `value` slot.
+ * @csspart trend - Container wrapping the assigned `trend` slot badge or text.
+ * @csspart label - Container wrapping the assigned statistic `label` slot.
+ * @csspart description - Container wrapping the assigned supporting `description` slot.
+ *
  * @cssproperty {padding} [--c2-stat--padding=16px]
  * @cssproperty {pixel} [--c2-stat--gap=12px]
  * @cssproperty {color} [--c2-stat--background=#ffffff]

package/types/src/stat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"stat.d.ts","sourceRoot":"","sources":["../../src/stat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAA;AAKjD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAA;AAEtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,0BAAoB;IAE1C,oEAAoE;IACxD,KAAK,SAAK;IAEtB,mEAAmE;IACvD,KAAK,SAAK;IAEtB,qDAAqD;IACxB,IAAI,EAAE,QAAQ,CAAY;IAE9C,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAA;KAChB;CACF"}
+{"version":3,"file":"stat.d.ts","sourceRoot":"","sources":["../../src/stat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAA;AAKjD,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAA;AAEtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBACa,IAAK,SAAQ,UAAU;IAClC,OAAgB,MAAM,0BAAoB;IAE1C,oEAAoE;IACxD,KAAK,SAAK;IAEtB,mEAAmE;IACvD,KAAK,SAAK;IAEtB,qDAAqD;IACxB,IAAI,EAAE,QAAQ,CAAY;IAE9C,MAAM;CAiBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,IAAI,CAAA;KAChB;CACF"}