@c2n/checkbox 0.0.6 → 0.0.8

package/dist/checkbox.js

@@ -1,5 +1,6 @@
 import { LitElement, html, unsafeCSS } from "lit";
-import { customElement, property, query } from "lit/decorators.js";
+import { property, query, state } from "lit/decorators.js";
+import { customElement } from "@c2n/core/element-helper.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { redispatchEvent } from "@c2n/core/dom-helper.js";
 //#region src/checkbox.scss?inline
@@ -17,10 +18,55 @@ function __decorate(decorators, target, key, desc) {
 var Checkbox = class Checkbox extends LitElement {
 	constructor(..._args) {
 		super(..._args);
+		this.internals = this.attachInternals();
+		this.customValidityMessage = "";
+		this.disabledByForm = false;
 		this.checked = false;
 		this.indeterminate = false;
 		this.disabled = false;
 		this.name = "";
+		this.value = "on";
+		this.required = false;
+	}
+	static {
+		this.formAssociated = true;
+	}
+	/** The containing form, when this control is associated with one. */
+	get form() {
+		return this.internals.form;
+	}
+	/** Labels associated with this form control. */
+	get labels() {
+		return this.internals.labels;
+	}
+	get validity() {
+		return this.internals.validity;
+	}
+	get validationMessage() {
+		return this.internals.validationMessage;
+	}
+	get willValidate() {
+		return this.internals.willValidate;
+	}
+	formResetCallback() {
+		this.checked = this.hasAttribute("checked");
+		this.indeterminate = false;
+	}
+	formDisabledCallback(disabled) {
+		this.disabledByForm = disabled && !this.hasAttribute("disabled");
+	}
+	formStateRestoreCallback(state) {
+		this.checked = state === "checked";
+	}
+	checkValidity() {
+		return this.internals.checkValidity();
+	}
+	reportValidity() {
+		return this.internals.reportValidity();
+	}
+	setCustomValidity(message) {
+		this.customValidityMessage = message;
+		this.requestUpdate();
 	}
 	render() {
 		const ariaChecked = this.indeterminate ? "mixed" : void 0;
@@ -34,7 +80,9 @@ var Checkbox = class Checkbox extends LitElement {
           aria-label="${ifDefined(this.ariaLabel)}"
           aria-labelledby="${ifDefined(this.ariaLabelledBy)}"
           aria-describedby="${ifDefined(this.ariaDescribedBy)}"
-          ?disabled="${this.disabled}"
+          ?disabled="${this.effectiveDisabled}"
+          ?required="${this.required}"
+          .value="${this.value}"
           .indeterminate="${this.indeterminate}"
           ?checked="${this.checked}"
           @change="${this.handleChange}"
@@ -71,6 +119,16 @@ var Checkbox = class Checkbox extends LitElement {
 		if (changedProperties.has("checked") && this.formElement) this.formElement.checked = this.checked;
 		super.update(changedProperties);
 	}
+	updated(_changedProperties) {
+		this.internals.setFormValue(this.checked ? this.value : null, this.checked ? "checked" : "unchecked");
+		const missing = this.required && !this.checked;
+		const flags = this.customValidityMessage ? { customError: true } : missing ? { valueMissing: true } : {};
+		const message = this.customValidityMessage || (missing ? "Please check this box." : "");
+		this.internals.setValidity(flags, message, this.formElement);
+	}
+	get effectiveDisabled() {
+		return this.disabled || this.disabledByForm;
+	}
 	handleChange(event) {
 		this.checked = this.formElement.checked;
 		this.indeterminate = this.formElement.indeterminate;
@@ -80,11 +138,9 @@ var Checkbox = class Checkbox extends LitElement {
 		this.styles = unsafeCSS(checkbox_default);
 	}
 };
+__decorate([state()], Checkbox.prototype, "disabledByForm", void 0);
 __decorate([query("input")], Checkbox.prototype, "formElement", void 0);
-__decorate([property({
-	type: Boolean,
-	reflect: true
-})], Checkbox.prototype, "checked", void 0);
+__decorate([property({ type: Boolean })], Checkbox.prototype, "checked", void 0);
 __decorate([property({
 	type: Boolean,
 	reflect: true
@@ -94,6 +150,11 @@ __decorate([property({
 	reflect: true
 })], Checkbox.prototype, "disabled", void 0);
 __decorate([property({ type: String })], Checkbox.prototype, "name", void 0);
+__decorate([property({ type: String })], Checkbox.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Checkbox.prototype, "required", void 0);
 __decorate([property({
 	type: String,
 	attribute: "aria-label"

package/package.json

@@ -1,18 +1,30 @@
 {
   "name": "@c2n/checkbox",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "dist/checkbox.js",
   "exports": {
     ".": {
-      "default": "./dist/checkbox.js",
-      "types": "./types/src/checkbox.d.ts"
+      "types": "./types/src/checkbox.d.ts",
+      "default": "./dist/checkbox.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
     },
     "./custom-elements.json": "./custom-elements.json"
   },
   "files": [
     "dist",
-    "types"
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
   ],
   "keywords": [
     "checkbox",
@@ -48,12 +60,12 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.6",
+    "@c2n/core": "0.0.8",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "2921054bc75299da66dad11c1e374246ff88a51e"
+  "gitHead": "be59cbccee1d33ca248e39f69b05c0b595ec6c6d"
 }

package/react.d.ts

@@ -0,0 +1,24 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/checkbox. Import once, anywhere in the program:
+//
+//     import '@c2n/checkbox/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { Checkbox } from '@c2n/checkbox'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-checkbox': C2Props<Checkbox>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/checkbox.d.ts

@@ -1,4 +1,13 @@
 import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+/** Events fired by {@link Checkbox}, keyed for `addEventListener`. */
+export interface CheckboxEventMap {
+    change: Event;
+}
+export interface Checkbox {
+    addEventListener: TypedAddEventListener<Checkbox, CheckboxEventMap>;
+    removeEventListener: TypedRemoveEventListener<Checkbox, CheckboxEventMap>;
+}
 /**
  * A checkbox with native `<input type="checkbox">` behaviour. The visible box sits centred in a square touch target
  * (`state-layer--size`) that doubles as the hover layer; that layer is transparent unless a
@@ -56,6 +65,10 @@ import { LitElement, type PropertyValues } from 'lit';
  * @cssproperty {color} --c2-checkbox__state-layer__hover__selected--color
  */
 export declare class Checkbox extends LitElement {
+    static formAssociated: boolean;
+    private readonly internals;
+    private customValidityMessage;
+    private disabledByForm;
     protected formElement: HTMLInputElement;
     /** Whether the checkbox is checked. */
     checked: boolean;
@@ -65,12 +78,34 @@ export declare class Checkbox extends LitElement {
     disabled: boolean;
     /** Form field name forwarded to the inner input. */
     name: string;
+    /** Value submitted while checked. */
+    value: string;
+    /** Requires the checkbox to be checked for the form to be valid. */
+    required: boolean;
+    /** Accessible name used when no visible label names the checkbox. */
     ariaLabel: string;
+    /** Id of the element that labels the checkbox. */
     ariaLabelledBy: undefined | string;
+    /** Id of the element that describes the checkbox. */
     ariaDescribedBy: undefined | string;
+    /** The containing form, when this control is associated with one. */
+    get form(): HTMLFormElement | null;
+    /** Labels associated with this form control. */
+    get labels(): NodeList;
+    get validity(): ValidityState;
+    get validationMessage(): string;
+    get willValidate(): boolean;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+    setCustomValidity(message: string): void;
     render(): import("lit-html").TemplateResult<1>;
     focus(options?: FocusOptions | undefined): void;
     protected update(changedProperties: PropertyValues): void;
+    protected updated(_changedProperties: PropertyValues): void;
+    private get effectiveDisabled();
     protected handleChange(event: Event): void;
     static styles: import("lit").CSSResult;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAMtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtB,SAAS,CAAC,WAAW,EAAG,gBAAgB,CAAA;IAExD,uCAAuC;IACK,OAAO,UAAQ;IAE3D,8GAA8G;IAClE,aAAa,UAAQ;IAEjE,yEAAyE;IAC7B,QAAQ,UAAQ;IAE5D,oDAAoD;IACxB,IAAI,SAAK;IAG5B,SAAS,EAAG,MAAM,CAAA;IAG3B,cAAc,EAAG,SAAS,GAAG,MAAM,CAAA;IAGnC,eAAe,EAAG,SAAS,GAAG,MAAM,CAAA;IAE3B,MAAM;IA2CN,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI;cAIrC,MAAM,CAAC,iBAAiB,EAAE,cAAc;IAO3D,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK;IAMnC,OAAgB,MAAM,0BAAoB;CAC3C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,QAAQ,CAAA;KACxB;CACF"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAGtE,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAKhG,sEAAsE;AACtE,MAAM,WAAW,gBAAgB;IAC/B,MAAM,EAAE,KAAK,CAAA;CACd;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,qBAAqB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;IACnE,mBAAmB,EAAE,wBAAwB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;CAC1E;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,MAAM,CAAC,cAAc,UAAO;IAE5B,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IACnD,OAAO,CAAC,qBAAqB,CAAK;IACzB,OAAO,CAAC,cAAc,CAAQ;IAEvB,SAAS,CAAC,WAAW,EAAG,gBAAgB,CAAA;IAExD,uCAAuC;IACV,OAAO,UAAQ;IAE5C,8GAA8G;IAClE,aAAa,UAAQ;IAEjE,yEAAyE;IAC7B,QAAQ,UAAQ;IAE5D,oDAAoD;IACxB,IAAI,SAAK;IAErC,qCAAqC;IACT,KAAK,SAAO;IAExC,oEAAoE;IACxB,QAAQ,UAAQ;IAE5D,qEAAqE;IAE5D,SAAS,EAAG,MAAM,CAAA;IAE3B,kDAAkD;IAElD,cAAc,EAAG,SAAS,GAAG,MAAM,CAAA;IAEnC,qDAAqD;IAErD,eAAe,EAAG,SAAS,GAAG,MAAM,CAAA;IAEpC,qEAAqE;IACrE,IAAI,IAAI,2BAEP;IAED,gDAAgD;IAChD,IAAI,MAAM,aAET;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED,iBAAiB;IAKjB,oBAAoB,CAAC,QAAQ,EAAE,OAAO;IAItC,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI;IAI/D,aAAa;IAIb,cAAc;IAId,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAKxB,MAAM;IA6CN,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI;cAIrC,MAAM,CAAC,iBAAiB,EAAE,cAAc;cAOxC,OAAO,CAAC,kBAAkB,EAAE,cAAc;IAQ7D,OAAO,KAAK,iBAAiB,GAE5B;IAED,SAAS,CAAC,YAAY,CAAC,KAAK,EAAE,KAAK;IAMnC,OAAgB,MAAM,0BAAoB;CAC3C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,QAAQ,CAAA;KACxB;CACF"}

package/vue.d.ts

@@ -0,0 +1,36 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/checkbox. Import once, anywhere in the program:
+//
+//     import '@c2n/checkbox/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { Checkbox, CheckboxEventMap } from '@c2n/checkbox'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-checkbox': DefineComponent<
+      C2Props<Checkbox> & {
+        'aria-label'?: unknown
+        'aria-labelledby'?: unknown
+        'aria-describedby'?: unknown
+        onChange?: (event: CheckboxEventMap['change']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}