@c2n/label 0.0.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# Label
+
+// TODO

package/dist/label.js

@@ -0,0 +1,90 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+//#region src/label.scss?inline
+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}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/label.ts
+var labelCount = 0;
+var Label = class Label extends LitElement {
+	static {
+		this.styles = unsafeCSS(label_default);
+	}
+	constructor() {
+		super();
+		this.disabled = false;
+		this.required = false;
+		this.for = "";
+		this.linkedTarget = null;
+		this.handleClick = (event) => {
+			if (this.disabled || event.defaultPrevented) return;
+			const target = this.resolveTarget();
+			if (!target) return;
+			const toggle = (el) => el instanceof HTMLInputElement && (el.type === "checkbox" || el.type === "radio");
+			if (toggle(target)) {
+				target.click();
+				return;
+			}
+			const inner = target.shadowRoot?.querySelector("input[type=\"checkbox\"], input[type=\"radio\"]");
+			if (toggle(inner)) {
+				inner.click();
+				return;
+			}
+			target.focus();
+		};
+		this.addEventListener("click", this.handleClick);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.unlinkTarget();
+	}
+	updated(changed) {
+		super.updated(changed);
+		if (changed.has("for")) this.linkTarget();
+	}
+	resolveTarget() {
+		if (!this.for) return null;
+		const root = this.getRootNode();
+		return (typeof root.getElementById === "function" ? root.getElementById(this.for) : null) ?? this.parentElement?.querySelector(`#${CSS.escape(this.for)}`) ?? null;
+	}
+	/** Points the target's `aria-labelledby` at this label (unless it already has one) so the label names the control. */
+	linkTarget() {
+		this.unlinkTarget();
+		const target = this.resolveTarget();
+		if (!target || target.hasAttribute("aria-labelledby")) return;
+		if (!this.id) this.id = `c2-label-${++labelCount}`;
+		target.setAttribute("aria-labelledby", this.id);
+		this.linkedTarget = target;
+	}
+	unlinkTarget() {
+		if (this.linkedTarget?.getAttribute("aria-labelledby") === this.id) this.linkedTarget.removeAttribute("aria-labelledby");
+		this.linkedTarget = null;
+	}
+	render() {
+		return html`<span class="c2-label" part="label"
+      ><slot></slot>${this.required ? html`<span class="c2-label__required" part="required-indicator" aria-hidden="true"><slot name="required-indicator">*</slot></span>` : nothing}</span
+    >`;
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Label.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Label.prototype, "required", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], Label.prototype, "for", void 0);
+Label = __decorate([customElement("c2-label")], Label);
+//#endregion
+export { Label };

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@c2n/label",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/label.js",
+  "exports": {
+    ".": {
+      "default": "./dist/label.js",
+      "types": "./types/src/label.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "label",
+    "web component",
+    "lit"
+  ],
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.6",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+}

package/types/src/label.d.ts

@@ -0,0 +1,53 @@
+import { LitElement, type PropertyValues } from 'lit';
+/**
+ * Caption for a form control. Clicking it activates the element referenced by `for`: native checkboxes and radios
+ * (also the ones inside a component's shadow root, such as `c2-checkbox`) are toggled, anything else is focused.
+ * It also names that element for assistive technology by setting `aria-labelledby` when the target has none.
+ * Typography inherits from the surrounding text until a `--c2-label__container--*` variable is set.
+ *
+ * @tag c2-label
+ *
+ * @slot default - Label text.
+ * @slot required-indicator - Marker shown after the text when `required` is set. Defaults to an asterisk.
+ *
+ * @cssproperty {pixel} [--c2-label__container--gap=4px]
+ * @cssproperty {color} [--c2-label__container--color=inherit]
+ * @cssproperty {font-family} [--c2-label__container--font-family=inherit]
+ * @cssproperty {pixel} [--c2-label__container--font-size=inherit]
+ * @cssproperty {font-weight} [--c2-label__container--font-weight=inherit]
+ * @cssproperty {line-height} [--c2-label__container--line-height=inherit]
+ * @cssproperty {pixel} [--c2-label__container--letter-spacing=inherit]
+ * @cssproperty {text-transform} [--c2-label__container--text-transform=inherit]
+ *
+ * @cssproperty {color} --c2-label__container__hover--color
+ * @cssproperty {opacity} [--c2-label__container__disabled--opacity=0.38]
+ *
+ * @cssproperty {color} [--c2-label__required-indicator--color=rgb(211, 21, 16)]
+ * @cssproperty {pixel} [--c2-label__required-indicator--font-size=inherit]
+ * @cssproperty {font-weight} [--c2-label__required-indicator--font-weight=inherit]
+ */
+export declare class Label extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Disables the label: clicks no longer reach the control and the text is dimmed. */
+    disabled: boolean;
+    /** Shows the required indicator after the text. */
+    required: boolean;
+    /** `id` of the control this label describes. It is looked up in the label's own root, then among its siblings. */
+    for: string;
+    private linkedTarget;
+    constructor();
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private resolveTarget;
+    /** Points the target's `aria-labelledby` at this label (unless it already has one) so the label names the control. */
+    private linkTarget;
+    private unlinkTarget;
+    private handleClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-label': Label;
+    }
+}
+//# sourceMappingURL=label.d.ts.map

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

@@ -0,0 +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;AAM/E;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;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"}