@c2n/stat 0.0.11 → 0.0.13

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":[{"name":"container","description":"Shadow DOM styling hook for the container element."},{"name":"icon","description":"Shadow DOM styling hook for the icon element."},{"name":"value","description":"Shadow DOM styling hook for the value element."},{"name":"trend","description":"Shadow DOM styling hook for the trend element."},{"name":"label","description":"Shadow DOM styling hook for the label element."},{"name":"description","description":"Shadow DOM styling hook for the description element."}],"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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/stat",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "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.11",
+    "@c2n/core": "0.0.13",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "bf962fba5e49a0ac7555a082584e262949d323a5"
+  "gitHead": "aa19b641f64fbc54c36b7649a8171d7a686abbdd"
 }

package/react.d.ts

@@ -6,12 +6,18 @@
 //
 // Register the elements at module scope before React renders, or React writes an object prop as an
 // attribute and it stringifies.
+//
+// On a server-rendered page (Next.js, React Router SSR) write a camelCase property by its kebab-case attribute
+// name ('row-key', not rowKey): the server emits props verbatim, HTML lowercases them, and hydration does not
+// set properties. Those names are listed next to the properties below.
 
 import type { DetailedHTMLProps, HTMLAttributes } from 'react'
 import type { Stat } from '@c2n/stat'
 
 /** Standard React host-element attributes plus the element's own public properties. */
 type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+/** What React writes to a custom element's attribute: true becomes the empty string, false removes it. */
+type Attribute = string | number | boolean
 
 declare module 'react' {
   namespace JSX {