@c2n/label 0.0.13 → 0.0.15
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.
- package/custom-elements.json +1 -1
- package/dist/label.js +1 -1
- package/package.json +3 -3
- package/react.d.ts +2 -3
- package/types/src/label.d.ts +3 -0
- package/types/src/label.d.ts.map +1 -1
package/custom-elements.json
CHANGED
|
@@ -1 +1 @@
|
|
|
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":[{"
|
|
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":[{"description":"The label text and optional required marker.","name":"label"},{"description":"Marker containing the `required-indicator` slot or fallback asterisk while `required` is set.","name":"required-indicator"}],"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/dist/label.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { LitElement, html, nothing, unsafeCSS } from "lit";
|
|
2
|
-
import { property } from "lit
|
|
2
|
+
import { property } from "@c2n/core/lit-helper.js";
|
|
3
3
|
import { customElement } from "@c2n/core/element-helper.js";
|
|
4
4
|
//#region src/label.scss?inline
|
|
5
5
|
var label_default = "/* ex : var((width: 24px), width, c2-checkbox) returns var(--c2-checkbox-width, 24px) */\n:host {\n display: inline-flex;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host([for]:not([disabled])) {\n cursor: pointer;\n}\n\n:host([disabled]) {\n cursor: default;\n}\n\n.c2-label {\n display: inline-flex;\n align-items: baseline;\n gap: var(--c2-label__container--gap,4px);\n color: var(--c2-label__container--color,inherit);\n font-family: var(--c2-label__container--font-family,inherit);\n font-size: var(--c2-label__container--font-size,inherit);\n font-weight: var(--c2-label__container--font-weight,inherit);\n line-height: var(--c2-label__container--line-height,inherit);\n letter-spacing: var(--c2-label__container--letter-spacing,inherit);\n text-transform: var(--c2-label__container--text-transform,inherit);\n transition: color 250ms cubic-bezier(0.2, 0, 0, 1);\n}\n\n:host([for]:not([disabled])) .c2-label:hover {\n color: var(--c2-label__container__hover--color,var(--c2-label__container--color,inherit));\n}\n\n:host([disabled]) .c2-label {\n opacity: var(--c2-label__container__disabled--opacity,0.38);\n}\n\n.c2-label__required {\n color: var(--c2-label__required-indicator--color,rgb(211, 21, 16));\n font-size: var(--c2-label__required-indicator--font-size,inherit);\n font-weight: var(--c2-label__required-indicator--font-weight,inherit);\n line-height: 1;\n}";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@c2n/label",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.15",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/label.js",
|
|
6
6
|
"exports": {
|
|
@@ -61,12 +61,12 @@
|
|
|
61
61
|
}
|
|
62
62
|
},
|
|
63
63
|
"dependencies": {
|
|
64
|
-
"@c2n/core": "0.0.
|
|
64
|
+
"@c2n/core": "0.0.15",
|
|
65
65
|
"lit": "3.3.3"
|
|
66
66
|
},
|
|
67
67
|
"devDependencies": {
|
|
68
68
|
"@c2n/config": "*"
|
|
69
69
|
},
|
|
70
70
|
"customElements": "custom-elements.json",
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "129a6e537c68c04ed2a36508789bf42c9781e196"
|
|
72
72
|
}
|
package/react.d.ts
CHANGED
|
@@ -9,15 +9,14 @@
|
|
|
9
9
|
//
|
|
10
10
|
// On a server-rendered page (Next.js, React Router SSR) write a camelCase property by its kebab-case attribute
|
|
11
11
|
// name ('row-key', not rowKey): the server emits props verbatim, HTML lowercases them, and hydration does not
|
|
12
|
-
// set properties. Those names are listed next to the properties below.
|
|
12
|
+
// set properties. Those names are listed next to the properties below. Structured converter-backed values
|
|
13
|
+
// also accept their serialized string form, so server JSX can emit the same JSON/CSV attribute used by HTML.
|
|
13
14
|
|
|
14
15
|
import type { DetailedHTMLProps, HTMLAttributes } from 'react'
|
|
15
16
|
import type { Label } from '@c2n/label'
|
|
16
17
|
|
|
17
18
|
/** Standard React host-element attributes plus the element's own public properties. */
|
|
18
19
|
type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
|
|
19
|
-
/** What React writes to a custom element's attribute: true becomes the empty string, false removes it. */
|
|
20
|
-
type Attribute = string | number | boolean
|
|
21
20
|
|
|
22
21
|
declare module 'react' {
|
|
23
22
|
namespace JSX {
|
package/types/src/label.d.ts
CHANGED
|
@@ -10,6 +10,9 @@ import { LitElement, type PropertyValues } from 'lit';
|
|
|
10
10
|
* @slot default - Label text.
|
|
11
11
|
* @slot required-indicator - Marker shown after the text when `required` is set. Defaults to an asterisk.
|
|
12
12
|
*
|
|
13
|
+
* @csspart label - The label text and optional required marker.
|
|
14
|
+
* @csspart required-indicator - Marker containing the `required-indicator` slot or fallback asterisk while `required` is set.
|
|
15
|
+
*
|
|
13
16
|
* @cssproperty {pixel} [--c2-label__container--gap=4px]
|
|
14
17
|
* @cssproperty {color} [--c2-label__container--color=inherit]
|
|
15
18
|
* @cssproperty {font-family} [--c2-label__container--font-family=inherit]
|
package/types/src/label.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../src/label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAO/E
|
|
1
|
+
{"version":3,"file":"label.d.ts","sourceRoot":"","sources":["../../src/label.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAO/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,KAAM,SAAQ,UAAU;IACnC,OAAgB,MAAM,0BAAoB;IAE1C,qFAAqF;IACzC,QAAQ,UAAQ;IAE5D,mDAAmD;IACP,QAAQ,UAAQ;IAE5D,kHAAkH;IACvE,GAAG,SAAK;IAEnD,OAAO,CAAC,YAAY,CAA2B;;IAOtC,oBAAoB,IAAI,IAAI;cAKlB,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAK/D,OAAO,CAAC,aAAa;IAOrB,sHAAsH;IACtH,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW,CAgBlB;IAEQ,MAAM;CAShB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,KAAK,CAAA;KAClB;CACF"}
|