@c2n/slider 0.0.6 → 0.0.8

package/dist/slider.js

@@ -1,5 +1,6 @@
 import { LitElement, html, nothing, 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 { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -20,6 +21,11 @@ var MAX_TICKS = 200;
 var Slider = class Slider extends LitElement {
 	constructor(..._args) {
 		super(..._args);
+		this.internals = this.attachInternals();
+		this.customValidityMessage = "";
+		this.disabledByForm = false;
+		this.defaultValue = 0;
+		this.defaultValueCaptured = false;
 		this.value = 0;
 		this.min = 0;
 		this.max = 100;
@@ -31,9 +37,56 @@ var Slider = class Slider extends LitElement {
 		this.ticks = false;
 		this.formatValue = (value) => String(value);
 	}
+	static {
+		this.formAssociated = true;
+	}
 	static {
 		this.styles = unsafeCSS(slider_default);
 	}
+	connectedCallback() {
+		super.connectedCallback();
+		if (!this.defaultValueCaptured) {
+			this.defaultValue = Number(this.getAttribute("value") ?? 0);
+			this.defaultValueCaptured = 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.value = this.defaultValue;
+	}
+	formDisabledCallback(disabled) {
+		this.disabledByForm = disabled && !this.hasAttribute("disabled");
+	}
+	formStateRestoreCallback(state) {
+		if (typeof state === "string") this.value = Number(state);
+	}
+	checkValidity() {
+		return this.internals.checkValidity();
+	}
+	reportValidity() {
+		return this.internals.reportValidity();
+	}
+	setCustomValidity(message) {
+		this.customValidityMessage = message;
+		this.formElement?.setCustomValidity(message);
+		this.syncFormState();
+	}
 	focus(options) {
 		this.formElement?.focus(options);
 	}
@@ -51,6 +104,27 @@ var Slider = class Slider extends LitElement {
 		this.value = Number(this.formElement.value);
 		redispatchEvent(this, event);
 	}
+	updated(changed) {
+		if (changed.has("value") || changed.has("min") || changed.has("max") || changed.has("step")) {
+			const value = this.formElement.valueAsNumber;
+			if (Number.isFinite(value) && value !== this.value) this.value = value;
+		}
+		this.syncFormState();
+	}
+	syncFormState() {
+		if (!this.formElement) return;
+		const value = this.formElement.value;
+		this.internals.setFormValue(value, value);
+		if (this.effectiveDisabled) {
+			this.internals.setValidity({});
+			return;
+		}
+		this.formElement.setCustomValidity(this.customValidityMessage);
+		this.internals.setValidity(this.formElement.validity, this.formElement.validationMessage, this.formElement);
+	}
+	get effectiveDisabled() {
+		return this.disabled || this.disabledByForm;
+	}
 	handleChange(event) {
 		this.value = Number(this.formElement.value);
 		redispatchEvent(this, event);
@@ -91,7 +165,7 @@ var Slider = class Slider extends LitElement {
           max=${this.max}
           step=${this.step}
           .value=${String(this.value)}
-          ?disabled=${this.disabled}
+          ?disabled=${this.effectiveDisabled}
           aria-label=${ifDefined(this.ariaLabel)}
           aria-labelledby=${ifDefined(this.ariaLabelledBy)}
           aria-valuetext=${formatted}
@@ -103,6 +177,7 @@ var Slider = class Slider extends LitElement {
     `;
 	}
 };
+__decorate([state()], Slider.prototype, "disabledByForm", void 0);
 __decorate([query("input")], Slider.prototype, "formElement", void 0);
 __decorate([property({
 	type: Number,

package/package.json

@@ -1,18 +1,30 @@
 {
   "name": "@c2n/slider",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "type": "module",
   "main": "dist/slider.js",
   "exports": {
     ".": {
-      "default": "./dist/slider.js",
-      "types": "./types/src/slider.d.ts"
+      "types": "./types/src/slider.d.ts",
+      "default": "./dist/slider.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": [
     "slider",
@@ -50,12 +62,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/slider. Import once, anywhere in the program:
+//
+//     import '@c2n/slider/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 { Slider } from '@c2n/slider'
+
+/** 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-slider': C2Props<Slider>
+    }
+  }
+}
+
+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/slider.d.ts

@@ -1,5 +1,15 @@
 import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
 export type SliderOrientation = 'horizontal' | 'vertical';
+/** Events fired by {@link Slider}, keyed for `addEventListener`. */
+export interface SliderEventMap {
+    input: Event;
+    change: Event;
+}
+export interface Slider {
+    addEventListener: TypedAddEventListener<Slider, SliderEventMap>;
+    removeEventListener: TypedRemoveEventListener<Slider, SliderEventMap>;
+}
 /**
  * Single-value slider built on a native `<input type="range">`, so dragging, keyboard steps (Arrow keys, Page Up/Down,
  * Home/End), RTL and the `slider` role come from the browser. The component draws the track, the filled part, the
@@ -43,11 +53,19 @@ export type SliderOrientation = 'horizontal' | 'vertical';
  * @cssproperty {opacity} [--c2-slider__value--opacity=0] - Resting opacity of the bubble; it is fully visible while hovering, dragging or focused. `1` keeps it always on.
  */
 export declare class Slider extends LitElement {
+    static formAssociated: boolean;
     static styles: import("lit").CSSResult;
+    private readonly internals;
+    private customValidityMessage;
+    private disabledByForm;
+    private defaultValue;
+    private defaultValueCaptured;
     protected formElement: HTMLInputElement;
     /** Current value, clamped to `min`/`max` and snapped to `step` by the inner input. */
     value: number;
+    /** Minimum selectable value. */
     min: number;
+    /** Maximum selectable value. */
     max: number;
     /** Increment between values; also the distance between `ticks`. */
     step: number;
@@ -63,13 +81,32 @@ export declare class Slider extends LitElement {
     ticks: boolean;
     /** Formats the value for the bubble and `aria-valuetext`, e.g. `(v) => \`${v}%\``. Property only. */
     formatValue: (value: number) => string;
+    /** Accessible name used when no visible label names the slider. */
     ariaLabel: string;
+    /** Id of the element that labels the slider. */
     ariaLabelledBy: undefined | string;
+    connectedCallback(): void;
+    /** 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;
     focus(options?: FocusOptions): void;
     /** Position of the value along the track, `0` at `min` and `1` at `max`. */
     get fraction(): number;
     protected update(changed: PropertyValues<this>): void;
     private handleInput;
+    protected updated(changed: PropertyValues<this>): void;
+    private syncFormState;
+    private get effectiveDisabled();
     private handleChange;
     private renderTicks;
     render(): import("lit-html").TemplateResult<1>;

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

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAQ/E,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAA;AAIzD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BAAoB;IAE1B,SAAS,CAAC,WAAW,EAAG,gBAAgB,CAAA;IAExD,sFAAsF;IAC3C,KAAK,SAAI;IAExB,GAAG,SAAI;IAEP,GAAG,SAAM;IAErC,mEAAmE;IACvC,IAAI,SAAI;IAEpC,6DAA6D;IACjB,QAAQ,UAAQ;IAE5D,oDAAoD;IACxC,IAAI,SAAK;IAErB,sGAAsG;IACzE,WAAW,EAAE,iBAAiB,CAAe;IAE1E,uFAAuF;IAClB,SAAS,UAAQ;IAEtF,4FAA4F;IAChD,KAAK,UAAQ;IAEzD,qGAAqG;IACrE,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAA2B;IAGxF,SAAS,EAAG,MAAM,CAAA;IAG3B,cAAc,EAAG,SAAS,GAAG,MAAM,CAAA;IAE1B,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAIrC,4EAA4E;IAC5E,IAAI,QAAQ,IAAI,MAAM,CAIrB;cAEkB,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAKvD,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,WAAW;IAiBV,MAAM;CA8BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAA;KACpB;CACF"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../src/slider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA4B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAG/E,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAOhG,MAAM,MAAM,iBAAiB,GAAG,YAAY,GAAG,UAAU,CAAA;AAIzD,oEAAoE;AACpE,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,KAAK,CAAA;IACZ,MAAM,EAAE,KAAK,CAAA;CACd;AAED,MAAM,WAAW,MAAM;IACrB,gBAAgB,EAAE,qBAAqB,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;IAC/D,mBAAmB,EAAE,wBAAwB,CAAC,MAAM,EAAE,cAAc,CAAC,CAAA;CACtE;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,MAAM,CAAC,cAAc,UAAO;IAE5B,OAAgB,MAAM,0BAAoB;IAE1C,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAyB;IACnD,OAAO,CAAC,qBAAqB,CAAK;IACzB,OAAO,CAAC,cAAc,CAAQ;IACvC,OAAO,CAAC,YAAY,CAAI;IACxB,OAAO,CAAC,oBAAoB,CAAQ;IAEpB,SAAS,CAAC,WAAW,EAAG,gBAAgB,CAAA;IAExD,sFAAsF;IAC3C,KAAK,SAAI;IAEpD,gCAAgC;IACJ,GAAG,SAAI;IAEnC,gCAAgC;IACJ,GAAG,SAAM;IAErC,mEAAmE;IACvC,IAAI,SAAI;IAEpC,6DAA6D;IACjB,QAAQ,UAAQ;IAE5D,oDAAoD;IACxC,IAAI,SAAK;IAErB,sGAAsG;IACzE,WAAW,EAAE,iBAAiB,CAAe;IAE1E,uFAAuF;IAClB,SAAS,UAAQ;IAEtF,4FAA4F;IAChD,KAAK,UAAQ;IAEzD,qGAAqG;IACrE,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAA2B;IAEjG,mEAAmE;IAE1D,SAAS,EAAG,MAAM,CAAA;IAE3B,gDAAgD;IAEhD,cAAc,EAAG,SAAS,GAAG,MAAM,CAAA;IAE1B,iBAAiB;IAQ1B,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;IAIjB,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;IAMxB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAIrC,4EAA4E;IAC5E,IAAI,QAAQ,IAAI,MAAM,CAIrB;cAEkB,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAKvD,OAAO,CAAC,WAAW;cAKA,OAAO,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAUxD,OAAO,CAAC,aAAa;IAYrB,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,WAAW;IAiBV,MAAM;CA8BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAA;KACpB;CACF"}

package/vue.d.ts

@@ -0,0 +1,37 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/slider. Import once, anywhere in the program:
+//
+//     import '@c2n/slider/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 { Slider, SliderEventMap } from '@c2n/slider'
+
+/** 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-slider': DefineComponent<
+      C2Props<Slider> & {
+        'show-value'?: unknown
+        'aria-label'?: unknown
+        'aria-labelledby'?: unknown
+        onInput?: (event: SliderEventMap['input']) => void
+        onChange?: (event: SliderEventMap['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 {}