@c2n/label 0.0.11 → 0.0.13

package/custom-elements.json

@@ -0,0 +1 @@
+{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/label.ts","declarations":[{"kind":"class","description":"Caption for a form control. Clicking it activates the element referenced by `for`: native checkboxes and radios\n(also the ones inside a component's shadow root, such as `c2-checkbox`) are toggled, anything else is focused.\nIt also names that element for assistive technology by setting `aria-labelledby` when the target has none.\nTypography inherits from the surrounding text until a `--c2-label__container--*` variable is set.","name":"Label","cssProperties":[{"type":{"text":"pixel"},"name":"--c2-label__container--gap","default":"4px"},{"type":{"text":"color"},"name":"--c2-label__container--color","default":"inherit"},{"type":{"text":"font-family"},"name":"--c2-label__container--font-family","default":"inherit"},{"type":{"text":"pixel"},"name":"--c2-label__container--font-size","default":"inherit"},{"type":{"text":"font-weight"},"name":"--c2-label__container--font-weight","default":"inherit"},{"type":{"text":"line-height"},"name":"--c2-label__container--line-height","default":"inherit"},{"type":{"text":"pixel"},"name":"--c2-label__container--letter-spacing","default":"inherit"},{"type":{"text":"text-transform"},"name":"--c2-label__container--text-transform","default":"inherit"},{"type":{"text":"color"},"name":"--c2-label__container__hover--color"},{"type":{"text":"opacity"},"name":"--c2-label__container__disabled--opacity","default":"0.38"},{"type":{"text":"color"},"name":"--c2-label__required-indicator--color","default":"rgb(211, 21, 16)"},{"type":{"text":"pixel"},"name":"--c2-label__required-indicator--font-size","default":"inherit"},{"type":{"text":"font-weight"},"name":"--c2-label__required-indicator--font-weight","default":"inherit"}],"cssParts":[{"name":"label","description":"Shadow DOM styling hook for the label element."},{"name":"required-indicator","description":"Shadow DOM styling hook for the required indicator element."}],"slots":[{"description":"Label text.","name":"default"},{"description":"Marker shown after the text when `required` is set. Defaults to an asterisk.","name":"required-indicator"}],"members":[{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the label: clicks no longer reach the control and the text is dimmed.","attribute":"disabled","reflects":true},{"kind":"field","name":"required","type":{"text":"boolean"},"default":"false","description":"Shows the required indicator after the text.","attribute":"required","reflects":true},{"kind":"field","name":"for","type":{"text":"string"},"default":"''","description":"`id` of the control this label describes. It is looked up in the label's own root, then among its siblings.","attribute":"for","reflects":true},{"kind":"field","name":"linkedTarget","type":{"text":"HTMLElement | null"},"privacy":"private","default":"null"},{"kind":"method","name":"resolveTarget","privacy":"private","return":{"type":{"text":"HTMLElement | null"}}},{"kind":"method","name":"linkTarget","privacy":"private","return":{"type":{"text":"void"}},"description":"Points the target's `aria-labelledby` at this label (unless it already has one) so the label names the control."},{"kind":"method","name":"unlinkTarget","privacy":"private","return":{"type":{"text":"void"}}},{"kind":"field","name":"handleClick","privacy":"private"}],"attributes":[{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the label: clicks no longer reach the control and the text is dimmed.","fieldName":"disabled"},{"name":"required","type":{"text":"boolean"},"default":"false","description":"Shows the required indicator after the text.","fieldName":"required"},{"name":"for","type":{"text":"string"},"default":"''","description":"`id` of the control this label describes. It is looked up in the label's own root, then among its siblings.","fieldName":"for"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-label","customElement":true}],"exports":[{"kind":"js","name":"Label","declaration":{"name":"Label","module":"src/label.ts"}},{"kind":"custom-element-definition","name":"c2-label","declaration":{"name":"Label","module":"src/label.ts"}}]}]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/label",
-  "version": "0.0.11",
+  "version": "0.0.13",
   "type": "module",
   "main": "dist/label.js",
   "exports": {
@@ -21,6 +21,7 @@
   "files": [
     "dist",
     "types",
+    "custom-elements.json",
     "react.d.ts",
     "react.js",
     "vue.d.ts",
@@ -60,12 +61,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 { Label } from '@c2n/label'
 
 /** 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 {