@c2n/switch 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,28 @@
+# @c2n/switch
+
+Switch built with Lit: an on/off toggle on a native `<input type="checkbox" role="switch">`, with label, description and optional icons inside the thumb.
+
+```bash
+npm install @c2n/switch
+```
+
+```html
+<script type="module">
+  import '@c2n/switch'
+</script>
+
+<c2-switch checked>Notifications</c2-switch>
+<c2-switch name="digest" value="daily">Email digest<span slot="description">Every morning at 8:00.</span></c2-switch>
+<c2-switch checked>
+  <svg slot="checked-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3.5"><polyline points="20 6 9 17 4 12"></polyline></svg>
+  Two-factor authentication
+</c2-switch>
+```
+
+- **State**: `checked` reflects the state, `change` fires on every user toggle (click, Space or dragging the thumb past the middle of the track), `toggle(force?)` flips it from code and fires `change`; setting `checked` is silent. `disabled` dims the row and blocks toggling.
+- **Label**: the whole row is the label (slotted text or the `label` attribute, plus a `description` slot). `--c2-switch__container--flex-direction: row-reverse` with `justify-content: space-between` gives the settings-row layout with the track at the far edge.
+- **Icons**: `checked-icon` and `unchecked-icon` slots show inside the thumb, cross-faded, sized by `--c2-switch__icon--size`.
+- **Forms**: the input carries `name` and `value` but sits in a shadow root, so read `checked` on submit or mirror it into a hidden input.
+- **Motion**: the thumb slides over `--c2-switch--transition-duration` and stretches slightly while pressed (`--c2-switch__thumb__active--stretch`); both respect reduced motion. Right-to-left layouts slide the other way.
+
+Theme the track (`--c2-switch__track--*`: size, radius, border, off/on/hover colours, focus ring), the thumb (`--c2-switch__thumb--*`) and the text (`--c2-switch__label--*`, `--c2-switch__description--*`). The full list is in `custom-elements.json` and on the docs site.

package/dist/switch.js

@@ -0,0 +1,199 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { redispatchEvent } from "@c2n/core/dom-helper.js";
+//#region src/switch.scss?inline
+var switch_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: inline-flex;\n  vertical-align: middle;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n.c2-switch {\n  display: inline-flex;\n  align-items: center;\n  flex: 1;\n  min-width: 0;\n  flex-direction: var(--c2-switch__container--flex-direction,row);\n  justify-content: var(--c2-switch__container--justify-content,flex-start);\n  gap: var(--c2-switch__container--gap,8px);\n  cursor: pointer;\n}\n.c2-switch.has-description {\n  align-items: flex-start;\n}\n.c2-switch:has(.c2-switch-input:disabled) {\n  cursor: default;\n  opacity: var(--c2-switch__container__disabled--opacity,0.38);\n}\n\n.c2-switch-control {\n  position: relative;\n  display: inline-flex;\n  flex: none;\n  line-height: 0;\n}\n\n.c2-switch-input {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  opacity: 0;\n  cursor: inherit;\n  z-index: 1;\n  touch-action: pan-y;\n}\n\n.c2-switch-track {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  width: var(--c2-switch__track--width,36px);\n  height: var(--c2-switch__track--height,20px);\n  padding: var(--c2-switch__thumb--offset,2px);\n  border-radius: var(--c2-switch__track--border-radius,999px);\n  border: var(--c2-switch__track--border,1px solid transparent);\n  background-color: var(--c2-switch__track--color,#e4e4e7);\n  transition: background-color var(--c2-switch--transition-duration,200ms) cubic-bezier(0.2, 0, 0, 1), border-color var(--c2-switch--transition-duration,200ms) cubic-bezier(0.2, 0, 0, 1);\n}\n\n.c2-switch-thumb {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--c2-switch__thumb--size,16px);\n  height: var(--c2-switch__thumb--size,16px);\n  border-radius: var(--c2-switch__thumb--border-radius,999px);\n  background-color: var(--c2-switch__thumb--color,#ffffff);\n  box-shadow: var(--c2-switch__thumb--box-shadow,0 1px 2px rgba(0, 0, 0, 0.2));\n  transform: translateX(0);\n  transition: transform var(--c2-switch--transition-duration,200ms) cubic-bezier(0.2, 0, 0, 1), width var(--c2-switch--transition-duration,200ms) cubic-bezier(0.2, 0, 0, 1), background-color var(--c2-switch--transition-duration,200ms) cubic-bezier(0.2, 0, 0, 1);\n}\n\n.c2-switch-icon {\n  position: absolute;\n  inset: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  line-height: 0;\n  color: var(--c2-switch__icon--color,#71717a);\n  opacity: 1;\n  transition: opacity var(--c2-switch--transition-duration,200ms) cubic-bezier(0.2, 0, 0, 1);\n  --c2-feather-icon--size: var(--c2-switch__icon--size,10px);\n  --c2-mat-icon--font-size: var(--c2-switch__icon--size,10px);\n}\n.c2-switch-icon ::slotted(*) {\n  width: var(--c2-switch__icon--size,10px);\n  height: var(--c2-switch__icon--size,10px);\n}\n\n.c2-switch-icon--checked {\n  color: var(--c2-switch__icon__checked--color,#0265dc);\n  opacity: 0;\n}\n\n.c2-switch-input:checked ~ .c2-switch-track {\n  background-color: var(--c2-switch__track__checked--color,#0265dc);\n  border: var(--c2-switch__track__checked--border,var(--c2-switch__track--border,1px solid transparent));\n}\n.c2-switch-input:checked ~ .c2-switch-track .c2-switch-thumb {\n  transform: translateX(calc(var(--c2-switch__track--width,36px) - var(--c2-switch__thumb--size,16px) - 2 * var(--c2-switch__thumb--offset,2px)));\n  background-color: var(--c2-switch__thumb__checked--color,var(--c2-switch__thumb--color,#ffffff));\n}\n.c2-switch-input:checked ~ .c2-switch-track .c2-switch-icon--unchecked {\n  opacity: 0;\n}\n.c2-switch-input:checked ~ .c2-switch-track .c2-switch-icon--checked {\n  opacity: 1;\n}\n\n.c2-switch-input:enabled:hover ~ .c2-switch-track {\n  background-color: var(--c2-switch__track__hover--color,var(--c2-switch__track--color,#d4d4d8));\n}\n\n.c2-switch-input:enabled:checked:hover ~ .c2-switch-track {\n  background-color: var(--c2-switch__track__checked__hover--color,var(--c2-switch__track__checked--color,#0154b8));\n}\n\n.c2-switch:not(.is-dragging) .c2-switch-input:enabled:active ~ .c2-switch-track .c2-switch-thumb {\n  width: calc(var(--c2-switch__thumb--size,16px) + var(--c2-switch__thumb__active--stretch,4px));\n}\n\n.c2-switch:not(.is-dragging) .c2-switch-input:enabled:active:checked ~ .c2-switch-track .c2-switch-thumb {\n  transform: translateX(calc(calc(var(--c2-switch__track--width,36px) - var(--c2-switch__thumb--size,16px) - 2 * var(--c2-switch__thumb--offset,2px)) - var(--c2-switch__thumb__active--stretch,4px)));\n}\n\n.c2-switch.is-dragging .c2-switch-input ~ .c2-switch-track .c2-switch-thumb {\n  transition: none;\n  width: var(--c2-switch__thumb--size,16px);\n  transform: translateX(var(--_drag, 0px));\n}\n\n.c2-switch-input:focus-visible ~ .c2-switch-track {\n  outline: var(--c2-switch__track__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-switch__track__focus--outline-offset,2px);\n}\n\n.c2-switch-text {\n  display: flex;\n  flex-direction: column;\n  flex: 1 1 auto;\n  min-width: 0;\n}\n\n.c2-switch-label {\n  color: var(--c2-switch__label--color,inherit);\n  font-size: var(--c2-switch__label--font-size,inherit);\n  font-weight: var(--c2-switch__label--font-weight,inherit);\n  line-height: var(--c2-switch__label--line-height,inherit);\n}\n\n.has-description .c2-switch-label {\n  display: flex;\n  align-items: center;\n  min-height: var(--c2-switch__track--height,20px);\n}\n\n.c2-switch-description {\n  color: var(--c2-switch__description--color,#71717a);\n  font-size: var(--c2-switch__description--font-size,12px);\n  margin-top: var(--c2-switch__description--margin-top,2px);\n  line-height: 1.4;\n}\n.c2-switch-description[hidden] {\n  display: none;\n}\n\n:host(:dir(rtl)) .c2-switch-input:checked ~ .c2-switch-track .c2-switch-thumb {\n  transform: translateX(calc(-1 * calc(var(--c2-switch__track--width,36px) - var(--c2-switch__thumb--size,16px) - 2 * var(--c2-switch__thumb--offset,2px))));\n}\n\n:host(:dir(rtl)) .c2-switch:not(.is-dragging) .c2-switch-input:enabled:active:checked ~ .c2-switch-track .c2-switch-thumb {\n  transform: translateX(calc(-1 * (calc(var(--c2-switch__track--width,36px) - var(--c2-switch__thumb--size,16px) - 2 * var(--c2-switch__thumb--offset,2px)) - var(--c2-switch__thumb__active--stretch,4px))));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .c2-switch-track,\n  .c2-switch-thumb,\n  .c2-switch-icon {\n    transition: none;\n  }\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/switch.ts
+var Switch = class Switch extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.checked = false;
+		this.disabled = false;
+		this.name = "";
+		this.value = "on";
+		this.label = "";
+		this.hasDescription = false;
+		this.dragging = false;
+		this.suppressClick = false;
+	}
+	static {
+		this.styles = unsafeCSS(switch_default);
+	}
+	focus(options) {
+		this.formElement?.focus(options);
+	}
+	/** Flips the state (or forces it) and fires `change`, as a click would. */
+	toggle(force) {
+		if (this.disabled) return;
+		const next = force ?? !this.checked;
+		if (next === this.checked) return;
+		this.checked = next;
+		this.dispatchEvent(new Event("change", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/** `slotchange` does not fire for server-rendered slots, so read the description once after the first render. */
+	firstUpdated() {
+		const slot = this.renderRoot.querySelector("slot[name=\"description\"]");
+		if (slot) this.updateDescription(slot);
+	}
+	update(changed) {
+		if (changed.has("checked") && this.formElement) this.formElement.checked = this.checked;
+		super.update(changed);
+	}
+	handleDescriptionChange(event) {
+		this.updateDescription(event.target);
+	}
+	updateDescription(slot) {
+		this.hasDescription = slot.assignedNodes({ flatten: true }).some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? "").trim() !== "");
+	}
+	handleChange(event) {
+		this.checked = this.formElement.checked;
+		redispatchEvent(this, event);
+	}
+	get rtl() {
+		return getComputedStyle(this).direction === "rtl";
+	}
+	handlePointerDown(event) {
+		if (this.disabled || event.button !== 0) return;
+		const track = this.trackElement;
+		const padding = parseFloat(getComputedStyle(track).paddingLeft) || 0;
+		const travel = Math.max(0, track.clientWidth - 2 * padding - this.thumbElement.getBoundingClientRect().height);
+		const startPosition = this.checked ? travel : 0;
+		this.drag = {
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startPosition,
+			travel,
+			position: startPosition,
+			moved: false
+		};
+		this.formElement.setPointerCapture(event.pointerId);
+	}
+	handlePointerMove(event) {
+		const drag = this.drag;
+		if (!drag || event.pointerId !== drag.pointerId) return;
+		const rtl = this.rtl;
+		const delta = (event.clientX - drag.startX) * (rtl ? -1 : 1);
+		if (!drag.moved && Math.abs(delta) < 4) return;
+		drag.moved = true;
+		drag.position = Math.min(drag.travel, Math.max(0, drag.startPosition + delta));
+		this.dragging = true;
+		this.thumbElement.style.setProperty("--_drag", `${rtl ? -drag.position : drag.position}px`);
+	}
+	handlePointerUp(event) {
+		const drag = this.drag;
+		if (!drag || event.pointerId !== drag.pointerId) return;
+		this.drag = void 0;
+		if (!drag.moved) return;
+		this.endDrag();
+		this.suppressClick = true;
+		const next = drag.position > drag.travel / 2;
+		if (next !== this.checked) {
+			this.checked = next;
+			this.dispatchEvent(new Event("change", {
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+	handlePointerCancel(event) {
+		if (!this.drag || event.pointerId !== this.drag.pointerId) return;
+		this.drag = void 0;
+		this.endDrag();
+	}
+	endDrag() {
+		this.dragging = false;
+		this.thumbElement.style.removeProperty("--_drag");
+	}
+	handleClick(event) {
+		if (!this.suppressClick) return;
+		this.suppressClick = false;
+		event.preventDefault();
+	}
+	render() {
+		return html`
+      <label class=${classMap({
+			"c2-switch": true,
+			"has-description": this.hasDescription,
+			"is-dragging": this.dragging
+		})}>
+        <span class="c2-switch-control" part="control">
+          <input
+            class="c2-switch-input"
+            type="checkbox"
+            role="switch"
+            name=${ifDefined(this.name || void 0)}
+            .value=${this.value}
+            aria-label=${ifDefined(this.ariaLabel)}
+            aria-labelledby=${ifDefined(this.ariaLabelledBy)}
+            aria-describedby=${ifDefined(this.ariaDescribedBy)}
+            ?checked=${this.checked}
+            ?disabled=${this.disabled}
+            @change=${this.handleChange}
+            @click=${this.handleClick}
+            @pointerdown=${this.handlePointerDown}
+            @pointermove=${this.handlePointerMove}
+            @pointerup=${this.handlePointerUp}
+            @pointercancel=${this.handlePointerCancel}
+          />
+          <span class="c2-switch-track" part="track">
+            <span class="c2-switch-thumb" part="thumb">
+              <span class="c2-switch-icon c2-switch-icon--unchecked" part="unchecked-icon"><slot name="unchecked-icon"></slot></span>
+              <span class="c2-switch-icon c2-switch-icon--checked" part="checked-icon"><slot name="checked-icon"></slot></span>
+            </span>
+          </span>
+        </span>
+        <span class="c2-switch-text">
+          <span class="c2-switch-label" part="label"><slot>${this.label}</slot></span>
+          <span class="c2-switch-description" part="description" ?hidden=${!this.hasDescription}>
+            <slot name="description" @slotchange=${this.handleDescriptionChange}></slot>
+          </span>
+        </span>
+      </label>
+    `;
+	}
+};
+__decorate([query("input")], Switch.prototype, "formElement", void 0);
+__decorate([query(".c2-switch-track")], Switch.prototype, "trackElement", void 0);
+__decorate([query(".c2-switch-thumb")], Switch.prototype, "thumbElement", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Switch.prototype, "checked", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], Switch.prototype, "disabled", void 0);
+__decorate([property()], Switch.prototype, "name", void 0);
+__decorate([property()], Switch.prototype, "value", void 0);
+__decorate([property()], Switch.prototype, "label", void 0);
+__decorate([property({
+	type: String,
+	attribute: "aria-label"
+})], Switch.prototype, "ariaLabel", void 0);
+__decorate([property({
+	type: String,
+	attribute: "aria-labelledby"
+})], Switch.prototype, "ariaLabelledBy", void 0);
+__decorate([property({
+	type: String,
+	attribute: "aria-describedby"
+})], Switch.prototype, "ariaDescribedBy", void 0);
+__decorate([state()], Switch.prototype, "hasDescription", void 0);
+__decorate([state()], Switch.prototype, "dragging", void 0);
+Switch = __decorate([customElement("c2-switch")], Switch);
+//#endregion
+export { Switch };

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@c2n/switch",
+  "version": "0.0.6",
+  "type": "module",
+  "main": "dist/switch.js",
+  "exports": {
+    ".": {
+      "default": "./dist/switch.js",
+      "types": "./types/src/switch.d.ts"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types"
+  ],
+  "keywords": [
+    "switch",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "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",
+    "build:only": "vite build",
+    "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/switch.d.ts

@@ -0,0 +1,103 @@
+import { LitElement, type PropertyValues } from 'lit';
+/**
+ * On/off toggle built on a native `<input type="checkbox" role="switch">`, so keyboard activation (Space), form value
+ * and the `switch` role come from the browser. The thumb can also be dragged: it follows the pointer and the side it is
+ * released on decides the state. The whole row is the label: text in the default slot and an optional `description`
+ * sit beside the track, and clicking them toggles it. Icons for either state can ride inside the thumb.
+ *
+ * @tag c2-switch
+ *
+ * @slot - Label text. Falls back to the `label` attribute.
+ * @slot description - Supporting text shown under the label.
+ * @slot checked-icon - Small icon shown inside the thumb while on (an inline SVG, a `c2-feather-*` icon or a `c2-mat-icon`).
+ * @slot unchecked-icon - Small icon shown inside the thumb while off.
+ *
+ * @event {Event} change - Re-dispatched from the inner input when the state changes.
+ *
+ * @cssproperty {pixel} [--c2-switch__container--gap=8px] - Space between the track and the text.
+ * @cssproperty {flex-direction-row} [--c2-switch__container--flex-direction=row] - `row-reverse` puts the text before the track.
+ * @cssproperty {justify-content} [--c2-switch__container--justify-content=flex-start] - `space-between` with a fixed width pushes the track to the far edge.
+ * @cssproperty {opacity} [--c2-switch__container__disabled--opacity=0.38]
+ *
+ * @cssproperty {pixel} [--c2-switch__track--width=36px]
+ * @cssproperty {pixel} [--c2-switch__track--height=20px]
+ * @cssproperty {border-radius} [--c2-switch__track--border-radius=999px]
+ * @cssproperty {border} [--c2-switch__track--border=1px solid transparent] - Set a colour for an outlined switch.
+ * @cssproperty {color} [--c2-switch__track--color=#e4e4e7] - Track fill while off.
+ * @cssproperty {color} [--c2-switch__track__hover--color=#d4d4d8]
+ * @cssproperty {color} [--c2-switch__track__checked--color=#0265dc] - Track fill while on.
+ * @cssproperty {color} [--c2-switch__track__checked__hover--color=#0154b8]
+ * @cssproperty {border} --c2-switch__track__checked--border
+ * @cssproperty {outline} [--c2-switch__track__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {pixel} [--c2-switch__track__focus--outline-offset=2px]
+ *
+ * @cssproperty {pixel} [--c2-switch__thumb--size=16px]
+ * @cssproperty {pixel} [--c2-switch__thumb--offset=2px] - Gap between the thumb and the track edge.
+ * @cssproperty {border-radius} [--c2-switch__thumb--border-radius=999px]
+ * @cssproperty {color} [--c2-switch__thumb--color=#ffffff]
+ * @cssproperty {color} --c2-switch__thumb__checked--color - Thumb fill while on; falls back to the off colour.
+ * @cssproperty {box-shadow} [--c2-switch__thumb--box-shadow=0 1px 2px rgba(0, 0, 0, 0.2)]
+ * @cssproperty {pixel} [--c2-switch__thumb__active--stretch=4px] - Extra thumb width while pressed, for a squishy feel; `0px` disables it.
+ *
+ * @cssproperty {pixel} [--c2-switch__icon--size=10px]
+ * @cssproperty {color} [--c2-switch__icon--color=#71717a] - Colour of the `unchecked-icon`.
+ * @cssproperty {color} [--c2-switch__icon__checked--color=#0265dc] - Colour of the `checked-icon`.
+ *
+ * @cssproperty {color} [--c2-switch__label--color=inherit]
+ * @cssproperty {font-size} [--c2-switch__label--font-size=inherit]
+ * @cssproperty {font-weight} [--c2-switch__label--font-weight=inherit]
+ * @cssproperty {line-height} [--c2-switch__label--line-height=inherit]
+ * @cssproperty {color} [--c2-switch__description--color=#71717a]
+ * @cssproperty {font-size} [--c2-switch__description--font-size=12px]
+ * @cssproperty {pixel} [--c2-switch__description--margin-top=2px]
+ *
+ * @cssproperty {time} [--c2-switch--transition-duration=200ms] - Thumb slide and colour change.
+ */
+export declare class Switch extends LitElement {
+    static styles: import("lit").CSSResult;
+    protected formElement: HTMLInputElement;
+    private trackElement;
+    private thumbElement;
+    /** Whether the switch is on. */
+    checked: boolean;
+    /** Disables the control: it no longer toggles and is rendered dimmed. */
+    disabled: boolean;
+    /** Form field name forwarded to the inner input. */
+    name: string;
+    /** Form value submitted while on. Defaults to `on`, like a native checkbox. */
+    value: string;
+    /** Label text when the default slot is empty. */
+    label: string;
+    ariaLabel: string;
+    ariaLabelledBy: undefined | string;
+    ariaDescribedBy: undefined | string;
+    private hasDescription;
+    /** True while the thumb follows the pointer; disables the slide transition. */
+    private dragging;
+    private drag?;
+    /** The click that follows a drag must not toggle the input again. */
+    private suppressClick;
+    focus(options?: FocusOptions): void;
+    /** Flips the state (or forces it) and fires `change`, as a click would. */
+    toggle(force?: boolean): void;
+    /** `slotchange` does not fire for server-rendered slots, so read the description once after the first render. */
+    firstUpdated(): void;
+    protected update(changed: PropertyValues<this>): void;
+    private handleDescriptionChange;
+    private updateDescription;
+    private handleChange;
+    private get rtl();
+    private handlePointerDown;
+    private handlePointerMove;
+    private handlePointerUp;
+    private handlePointerCancel;
+    private endDrag;
+    private handleClick;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-switch': Switch;
+    }
+}
+//# sourceMappingURL=switch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAOtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,0BAAoB;IAE1B,SAAS,CAAC,WAAW,EAAG,gBAAgB,CAAA;IAC7B,OAAO,CAAC,YAAY,CAAc;IAClC,OAAO,CAAC,YAAY,CAAc;IAE7D,gCAAgC;IACY,OAAO,UAAQ;IAE3D,yEAAyE;IAC7B,QAAQ,UAAQ;IAE5D,oDAAoD;IACxC,IAAI,SAAK;IAErB,+EAA+E;IACnE,KAAK,SAAO;IAExB,iDAAiD;IACrC,KAAK,SAAK;IAGb,SAAS,EAAG,MAAM,CAAA;IAG3B,cAAc,EAAG,SAAS,GAAG,MAAM,CAAA;IAGnC,eAAe,EAAG,SAAS,GAAG,MAAM,CAAA;IAE3B,OAAO,CAAC,cAAc,CAAQ;IACvC,+EAA+E;IACtE,OAAO,CAAC,QAAQ,CAAQ;IAEjC,OAAO,CAAC,IAAI,CAAC,CAAgH;IAC7H,qEAAqE;IACrE,OAAO,CAAC,aAAa,CAAQ;IAEpB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAIrC,2EAA2E;IAC3E,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO;IAQtB,iHAAiH;IACxG,YAAY;cAKF,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;IAKvD,OAAO,CAAC,uBAAuB;IAI/B,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,YAAY;IAKpB,OAAO,KAAK,GAAG,GAEd;IAED,OAAO,CAAC,iBAAiB;IAWzB,OAAO,CAAC,iBAAiB;IAazB,OAAO,CAAC,eAAe;IAevB,OAAO,CAAC,mBAAmB;IAM3B,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,WAAW;IAMV,MAAM;CAsChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAA;KACpB;CACF"}