@c2n/badge 0.0.11 → 0.0.13

package/custom-elements.json

@@ -0,0 +1 @@
+{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/badge.ts","declarations":[{"kind":"class","description":"Small status label: a tinted pill with text, a number or an icon, or a plain dot. Six `tone`s carry meaning\n(neutral, primary, success, warning, danger, info); each is a pair of CSS variables so a design system can recolour\nthem without touching the markup. Give it a `count` to show a number clamped at `max` (`99+`), or `dot` for a\npresence indicator that can `pulse`. Put an element in the `anchor` slot and the badge pins itself to one of its\ncorners (`placement`), for example a notification count on an icon button; `overlap=\"circular\"` moves it onto the\nedge of a round anchor such as an avatar.","name":"Badge","cssProperties":[{"type":{"text":"pixel"},"name":"--c2-badge--height","default":"20px"},{"type":{"text":"pixel"},"description":"Keeps single digits round.","name":"--c2-badge--min-width","default":"20px"},{"type":{"text":"padding"},"name":"--c2-badge--padding-left","default":"6px"},{"type":{"text":"padding"},"name":"--c2-badge--padding-right","default":"6px"},{"type":{"text":"pixel"},"description":"Space between the icon and the text.","name":"--c2-badge--gap","default":"4px"},{"type":{"text":"border-radius"},"name":"--c2-badge--border-radius","default":"999px"},{"type":{"text":"border"},"description":"Set a border for an outlined look, together with a transparent background.","name":"--c2-badge--border","default":"none"},{"type":{"text":"box-shadow"},"name":"--c2-badge--box-shadow"},{"type":{"text":"background"},"description":"Overrides the tone background.","name":"--c2-badge--background"},{"type":{"text":"color"},"description":"Overrides the tone text colour.","name":"--c2-badge--color"},{"type":{"text":"font-family"},"name":"--c2-badge--font-family","default":"inherit"},{"type":{"text":"font-size"},"name":"--c2-badge--font-size","default":"12px"},{"type":{"text":"font-weight"},"name":"--c2-badge--font-weight","default":"500"},{"type":{"text":"line-height"},"name":"--c2-badge--line-height","default":"1"},{"type":{"text":"pixel"},"name":"--c2-badge--letter-spacing"},{"type":{"text":"text-transform"},"name":"--c2-badge--text-transform","default":"none"},{"type":{"text":"pixel"},"name":"--c2-badge__icon--size","default":"12px"},{"type":{"text":"background"},"name":"--c2-badge__neutral--background","default":"#f4f4f5"},{"type":{"text":"color"},"name":"--c2-badge__neutral--color","default":"#52525b"},{"type":{"text":"background"},"name":"--c2-badge__primary--background","default":"#edf1fe"},{"type":{"text":"color"},"name":"--c2-badge__primary--color","default":"#0265dc"},{"type":{"text":"background"},"name":"--c2-badge__success--background","default":"#dcfce7"},{"type":{"text":"color"},"name":"--c2-badge__success--color","default":"#166534"},{"type":{"text":"background"},"name":"--c2-badge__warning--background","default":"#fef3c7"},{"type":{"text":"color"},"name":"--c2-badge__warning--color","default":"#92400e"},{"type":{"text":"background"},"name":"--c2-badge__danger--background","default":"#fee2e2"},{"type":{"text":"color"},"name":"--c2-badge__danger--color","default":"#dc2626"},{"type":{"text":"background"},"name":"--c2-badge__info--background","default":"#e0f2fe"},{"type":{"text":"color"},"name":"--c2-badge__info--color","default":"#075985"},{"type":{"text":"pixel"},"description":"Diameter of the `dot` badge; its colour is the tone text colour.","name":"--c2-badge__dot--size","default":"8px"},{"type":{"text":"time"},"description":"Length of one `pulse` cycle; respects reduced motion.","name":"--c2-badge__pulse--animation-duration","default":"1.5s"},{"type":{"text":"border"},"description":"Ring around an anchored badge, in the page background colour. Drawn outside a `dot`.","name":"--c2-badge__anchor--border","default":"2px solid #ffffff"},{"type":{"text":"pixel"},"description":"Moves an anchored badge inwards horizontally (`14.6%` with `overlap=\"circular\"`).","name":"--c2-badge__anchor--offset-x","default":"0px"},{"type":{"text":"pixel"},"description":"Moves an anchored badge inwards vertically (`14.6%` with `overlap=\"circular\"`).","name":"--c2-badge__anchor--offset-y","default":"0px"}],"cssParts":[{"name":"badge","description":"Shadow DOM styling hook for the badge element."}],"slots":[{"description":"Label text. Ignored while `count` or `dot` is set.","name":""},{"description":"Icon shown before the text, sized by `--c2-badge__icon--size`.","name":"prefix-icon"},{"description":"Element the badge is pinned to. When filled the badge becomes an overlay at the `placement` corner.","name":"anchor"}],"members":[{"kind":"field","name":"tone","type":{"text":"BadgeTone"},"default":"'neutral'","description":"Colour role of the badge.","attribute":"tone","reflects":true},{"kind":"field","name":"count","type":{"text":"number | undefined"},"default":"undefined","description":"Number to display instead of the slotted text. Hidden when it is `0` unless `show-zero` is set.","attribute":"count"},{"kind":"field","name":"max","type":{"text":"number"},"default":"99","description":"Upper bound for `count`; larger values render as `<max>+`.","attribute":"max"},{"kind":"field","name":"showZero","type":{"text":"boolean"},"default":"false","description":"Keeps a `count` of `0` visible.","attribute":"show-zero","reflects":true},{"kind":"field","name":"dot","type":{"text":"boolean"},"default":"false","description":"Renders a small dot without text.","attribute":"dot","reflects":true},{"kind":"field","name":"pulse","type":{"text":"boolean"},"default":"false","description":"Animates a fading ring around a `dot` badge to draw attention.","attribute":"pulse","reflects":true},{"kind":"field","name":"placement","type":{"text":"BadgePlacement"},"default":"'top-right'","description":"Corner of the `anchor` element the badge is pinned to.","attribute":"placement","reflects":true},{"kind":"field","name":"overlap","type":{"text":"BadgeOverlap"},"default":"'rectangular'","description":"Shape of the anchor: `circular` pulls the badge onto the edge of a round anchor instead of its bounding-box corner.","attribute":"overlap","reflects":true},{"kind":"field","name":"hasAnchor","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"method","name":"handleAnchorChange","privacy":"private","parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"updateAnchor","privacy":"private","parameters":[{"name":"slot","type":{"text":"HTMLSlotElement"}}]},{"kind":"field","name":"displayCount","type":{"text":"string"},"description":"Text shown for `count`, clamped at `max`.","readonly":true},{"kind":"field","name":"visible","type":{"text":"boolean"},"privacy":"private","readonly":true},{"kind":"method","name":"renderBadge","privacy":"private"}],"attributes":[{"name":"tone","type":{"text":"BadgeTone"},"default":"'neutral'","description":"Colour role of the badge.","fieldName":"tone"},{"name":"count","type":{"text":"number | undefined"},"default":"undefined","description":"Number to display instead of the slotted text. Hidden when it is `0` unless `show-zero` is set.","fieldName":"count"},{"name":"max","type":{"text":"number"},"default":"99","description":"Upper bound for `count`; larger values render as `<max>+`.","fieldName":"max"},{"name":"show-zero","type":{"text":"boolean"},"default":"false","description":"Keeps a `count` of `0` visible.","fieldName":"showZero"},{"name":"dot","type":{"text":"boolean"},"default":"false","description":"Renders a small dot without text.","fieldName":"dot"},{"name":"pulse","type":{"text":"boolean"},"default":"false","description":"Animates a fading ring around a `dot` badge to draw attention.","fieldName":"pulse"},{"name":"placement","type":{"text":"BadgePlacement"},"default":"'top-right'","description":"Corner of the `anchor` element the badge is pinned to.","fieldName":"placement"},{"name":"overlap","type":{"text":"BadgeOverlap"},"default":"'rectangular'","description":"Shape of the anchor: `circular` pulls the badge onto the edge of a round anchor instead of its bounding-box corner.","fieldName":"overlap"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-badge","customElement":true}],"exports":[{"kind":"js","name":"Badge","declaration":{"name":"Badge","module":"src/badge.ts"}},{"kind":"custom-element-definition","name":"c2-badge","declaration":{"name":"Badge","module":"src/badge.ts"}}]}]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/badge",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "main": "dist/badge.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,17 +6,25 @@
 //
 // 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 { Badge } from '@c2n/badge'
 
 /** 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 {
     interface IntrinsicElements {
-      'c2-badge': C2Props<Badge>
+      'c2-badge': C2Props<Badge> & {
+        'show-zero'?: Attribute
+      }
     }
   }
 }