@c2n/switch 0.0.12 → 0.0.14

package/custom-elements.json

@@ -0,0 +1 @@
+{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/switch.ts","declarations":[{"kind":"class","description":"On/off toggle built on a native `<input type=\"checkbox\" role=\"switch\">`, so keyboard activation (Space), form value\nand the `switch` role come from the browser. The thumb can also be dragged: it follows the pointer and the side it is\nreleased on decides the state. The whole row is the label: text in the default slot and an optional `description`\nsit beside the track, and clicking them toggles it. Icons for either state can ride inside the thumb.","name":"Switch","cssProperties":[{"type":{"text":"pixel"},"description":"Space between the track and the text.","name":"--c2-switch__container--gap","default":"8px"},{"type":{"text":"flex-direction-row"},"description":"`row-reverse` puts the text before the track.","name":"--c2-switch__container--flex-direction","default":"row"},{"type":{"text":"justify-content"},"description":"`space-between` with a fixed width pushes the track to the far edge.","name":"--c2-switch__container--justify-content","default":"flex-start"},{"type":{"text":"opacity"},"name":"--c2-switch__container__disabled--opacity","default":"0.38"},{"type":{"text":"pixel"},"name":"--c2-switch__track--width","default":"36px"},{"type":{"text":"pixel"},"name":"--c2-switch__track--height","default":"20px"},{"type":{"text":"border-radius"},"name":"--c2-switch__track--border-radius","default":"999px"},{"type":{"text":"border"},"description":"Set a colour for an outlined switch.","name":"--c2-switch__track--border","default":"1px solid transparent"},{"type":{"text":"color"},"description":"Track fill while off.","name":"--c2-switch__track--color","default":"#e4e4e7"},{"type":{"text":"color"},"name":"--c2-switch__track__hover--color","default":"#d4d4d8"},{"type":{"text":"color"},"description":"Track fill while on.","name":"--c2-switch__track__checked--color","default":"#0265dc"},{"type":{"text":"color"},"name":"--c2-switch__track__checked__hover--color","default":"#0154b8"},{"type":{"text":"border"},"name":"--c2-switch__track__checked--border"},{"type":{"text":"outline"},"name":"--c2-switch__track__focus--outline","default":"2px solid rgba(2, 101, 220, 0.4)"},{"type":{"text":"pixel"},"name":"--c2-switch__track__focus--outline-offset","default":"2px"},{"type":{"text":"pixel"},"name":"--c2-switch__thumb--size","default":"16px"},{"type":{"text":"pixel"},"description":"Gap between the thumb and the track edge.","name":"--c2-switch__thumb--offset","default":"2px"},{"type":{"text":"border-radius"},"name":"--c2-switch__thumb--border-radius","default":"999px"},{"type":{"text":"color"},"name":"--c2-switch__thumb--color","default":"#ffffff"},{"type":{"text":"color"},"description":"Thumb fill while on; falls back to the off colour.","name":"--c2-switch__thumb__checked--color"},{"type":{"text":"box-shadow"},"name":"--c2-switch__thumb--box-shadow","default":"0 1px 2px rgba(0, 0, 0, 0.2)"},{"type":{"text":"pixel"},"description":"Extra thumb width while pressed, for a squishy feel; `0px` disables it.","name":"--c2-switch__thumb__active--stretch","default":"4px"},{"type":{"text":"pixel"},"name":"--c2-switch__icon--size","default":"10px"},{"type":{"text":"color"},"description":"Colour of the `unchecked-icon`.","name":"--c2-switch__icon--color","default":"#71717a"},{"type":{"text":"color"},"description":"Colour of the `checked-icon`.","name":"--c2-switch__icon__checked--color","default":"#0265dc"},{"type":{"text":"color"},"name":"--c2-switch__label--color","default":"inherit"},{"type":{"text":"font-size"},"name":"--c2-switch__label--font-size","default":"inherit"},{"type":{"text":"font-weight"},"name":"--c2-switch__label--font-weight","default":"inherit"},{"type":{"text":"line-height"},"name":"--c2-switch__label--line-height","default":"inherit"},{"type":{"text":"color"},"name":"--c2-switch__description--color","default":"#71717a"},{"type":{"text":"font-size"},"name":"--c2-switch__description--font-size","default":"12px"},{"type":{"text":"pixel"},"name":"--c2-switch__description--margin-top","default":"2px"},{"type":{"text":"time"},"description":"Thumb slide and colour change.","name":"--c2-switch--transition-duration","default":"200ms"}],"cssParts":[{"description":"The switch control, excluding its label and description.","name":"control"},{"description":"The switch track.","name":"track"},{"description":"The movable switch thumb.","name":"thumb"},{"description":"Icon region containing the `unchecked-icon` slot inside the thumb while off.","name":"unchecked-icon"},{"description":"Icon region containing the `checked-icon` slot inside the thumb while on.","name":"checked-icon"},{"description":"The switch label.","name":"label"},{"description":"Supporting-text region containing the `description` slot below the label.","name":"description"}],"slots":[{"description":"Label text. Falls back to the `label` attribute.","name":""},{"description":"Supporting text shown under the label.","name":"description"},{"description":"Small icon shown inside the thumb while on (an inline SVG, a `c2-feather-*` icon or a `c2-mat-icon`).","name":"checked-icon"},{"description":"Small icon shown inside the thumb while off.","name":"unchecked-icon"}],"members":[{"kind":"field","name":"formAssociated","type":{"text":"boolean"},"static":true,"default":"true"},{"kind":"field","name":"internals","privacy":"private","readonly":true},{"kind":"field","name":"customValidityMessage","type":{"text":"string"},"privacy":"private","default":"''"},{"kind":"field","name":"disabledByForm","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"defaultChecked","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"defaultCheckedCaptured","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"formElement","type":{"text":"HTMLInputElement"},"privacy":"protected"},{"kind":"field","name":"trackElement","type":{"text":"HTMLElement"},"privacy":"private"},{"kind":"field","name":"thumbElement","type":{"text":"HTMLElement"},"privacy":"private"},{"kind":"field","name":"checked","type":{"text":"boolean"},"default":"false","description":"Whether the switch is on.","attribute":"checked","reflects":true},{"kind":"field","name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the control: it no longer toggles and is rendered dimmed.","attribute":"disabled","reflects":true},{"kind":"field","name":"name","type":{"text":"string"},"default":"''","description":"Form field name forwarded to the inner input.","attribute":"name"},{"kind":"field","name":"value","type":{"text":"string"},"default":"'on'","description":"Form value submitted while on. Defaults to `on`, like a native checkbox.","attribute":"value"},{"kind":"field","name":"required","type":{"text":"boolean"},"default":"false","description":"Requires the switch to be on for the form to be valid.","attribute":"required","reflects":true},{"kind":"field","name":"label","type":{"text":"string"},"default":"''","description":"Label text when the default slot is empty.","attribute":"label"},{"kind":"field","name":"ariaLabel","type":{"text":"string"},"description":"Accessible name used when no visible label names the switch.","attribute":"aria-label"},{"kind":"field","name":"ariaLabelledBy","type":{"text":"undefined | string"},"description":"Id of the element that labels the switch.","attribute":"aria-labelledby"},{"kind":"field","name":"ariaDescribedBy","type":{"text":"undefined | string"},"description":"Id of the element that describes the switch.","attribute":"aria-describedby"},{"kind":"field","name":"slotPresence","privacy":"private","readonly":true,"default":"new SlotPresenceController(this, ['description'])"},{"kind":"field","name":"dragging","type":{"text":"boolean"},"privacy":"private","default":"false","description":"True while the thumb follows the pointer; disables the slide transition."},{"kind":"field","name":"drag","type":{"text":"{ pointerId: number; startX: number; startPosition: number; travel: number; position: number; moved: boolean } | undefined"},"privacy":"private"},{"kind":"field","name":"suppressClick","type":{"text":"boolean"},"privacy":"private","default":"false","description":"The click that follows a drag must not toggle the input again."},{"kind":"field","name":"form","description":"The containing form, when this control is associated with one.","readonly":true},{"kind":"field","name":"labels","description":"Labels associated with this form control.","readonly":true},{"kind":"field","name":"validity","readonly":true},{"kind":"field","name":"validationMessage","readonly":true},{"kind":"field","name":"willValidate","readonly":true},{"kind":"method","name":"formResetCallback"},{"kind":"method","name":"formDisabledCallback","parameters":[{"name":"disabled","type":{"text":"boolean"}}]},{"kind":"method","name":"formStateRestoreCallback","parameters":[{"name":"state","type":{"text":"string | File | FormData | null"}}]},{"kind":"method","name":"checkValidity"},{"kind":"method","name":"reportValidity"},{"kind":"method","name":"setCustomValidity","parameters":[{"name":"message","type":{"text":"string"}}]},{"kind":"method","name":"focus","parameters":[{"name":"options","optional":true,"type":{"text":"FocusOptions"}}]},{"kind":"method","name":"toggle","parameters":[{"name":"force","optional":true,"type":{"text":"boolean"}}],"description":"Flips the state (or forces it) and fires `change`, as a click would."},{"kind":"field","name":"effectiveDisabled","privacy":"private","readonly":true},{"kind":"method","name":"handleDescriptionChange","privacy":"private","parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"method","name":"handleChange","privacy":"private","parameters":[{"name":"event","type":{"text":"Event"}}]},{"kind":"field","name":"rtl","type":{"text":"boolean"},"privacy":"private","readonly":true},{"kind":"method","name":"handlePointerDown","privacy":"private","parameters":[{"name":"event","type":{"text":"PointerEvent"}}]},{"kind":"method","name":"handlePointerMove","privacy":"private","parameters":[{"name":"event","type":{"text":"PointerEvent"}}]},{"kind":"method","name":"handlePointerUp","privacy":"private","parameters":[{"name":"event","type":{"text":"PointerEvent"}}]},{"kind":"method","name":"handlePointerCancel","privacy":"private","parameters":[{"name":"event","type":{"text":"PointerEvent"}}]},{"kind":"method","name":"endDrag","privacy":"private"},{"kind":"method","name":"handleClick","privacy":"private","parameters":[{"name":"event","type":{"text":"Event"}}]}],"events":[{"name":"change","type":{"text":"Event"},"description":"Re-dispatched from the inner input when the state changes."}],"attributes":[{"name":"checked","type":{"text":"boolean"},"default":"false","description":"Whether the switch is on.","fieldName":"checked"},{"name":"disabled","type":{"text":"boolean"},"default":"false","description":"Disables the control: it no longer toggles and is rendered dimmed.","fieldName":"disabled"},{"name":"name","type":{"text":"string"},"default":"''","description":"Form field name forwarded to the inner input.","fieldName":"name"},{"name":"value","type":{"text":"string"},"default":"'on'","description":"Form value submitted while on. Defaults to `on`, like a native checkbox.","fieldName":"value"},{"name":"required","type":{"text":"boolean"},"default":"false","description":"Requires the switch to be on for the form to be valid.","fieldName":"required"},{"name":"label","type":{"text":"string"},"default":"''","description":"Label text when the default slot is empty.","fieldName":"label"},{"name":"aria-label","type":{"text":"string"},"description":"Accessible name used when no visible label names the switch.","fieldName":"ariaLabel"},{"name":"aria-labelledby","type":{"text":"undefined | string"},"description":"Id of the element that labels the switch.","fieldName":"ariaLabelledBy"},{"name":"aria-describedby","type":{"text":"undefined | string"},"description":"Id of the element that describes the switch.","fieldName":"ariaDescribedBy"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-switch","customElement":true}],"exports":[{"kind":"js","name":"Switch","declaration":{"name":"Switch","module":"src/switch.ts"}},{"kind":"custom-element-definition","name":"c2-switch","declaration":{"name":"Switch","module":"src/switch.ts"}}]}]}

package/dist/switch.js

@@ -1,9 +1,10 @@
 import { LitElement, html, unsafeCSS } from "lit";
-import { property, query, state } from "lit/decorators.js";
+import { query, state } from "lit/decorators.js";
+import { property } from "@c2n/core/lit-helper.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 { hasSlottedContent, redispatchEvent } from "@c2n/core/dom-helper.js";
+import { SlotPresenceController, 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
@@ -30,7 +31,7 @@ var Switch = class Switch extends LitElement {
 		this.value = "on";
 		this.required = false;
 		this.label = "";
-		this.hasDescription = false;
+		this.slotPresence = new SlotPresenceController(this, ["description"]);
 		this.dragging = false;
 		this.suppressClick = false;
 	}
@@ -97,9 +98,6 @@ var Switch = class Switch extends LitElement {
 			composed: true
 		}));
 	}
-	willUpdate(_changed) {
-		if (!this.hasUpdated) this.hasDescription = hasSlottedContent(this, "description");
-	}
 	update(changed) {
 		if (changed.has("checked") && this.formElement) this.formElement.checked = this.checked;
 		super.update(changed);
@@ -115,10 +113,7 @@ var Switch = class Switch extends LitElement {
 		return this.disabled || this.disabledByForm;
 	}
 	handleDescriptionChange(event) {
-		this.updateDescription(event.target);
-	}
-	updateDescription(slot) {
-		this.hasDescription = slot.assignedNodes({ flatten: true }).some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? "").trim() !== "");
+		this.slotPresence.handleSlotChange(event);
 	}
 	handleChange(event) {
 		this.checked = this.formElement.checked;
@@ -185,10 +180,11 @@ var Switch = class Switch extends LitElement {
 		event.preventDefault();
 	}
 	render() {
+		const hasDescription = this.slotPresence.has("description");
 		return html`
       <label class=${classMap({
 			"c2-switch": true,
-			"has-description": this.hasDescription,
+			"has-description": hasDescription,
 			"is-dragging": this.dragging
 		})}>
         <span class="c2-switch-control" part="control">
@@ -220,7 +216,7 @@ var Switch = class Switch extends LitElement {
         </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}>
+          <span class="c2-switch-description" part="description" ?hidden=${!hasDescription}>
             <slot name="description" @slotchange=${this.handleDescriptionChange}></slot>
           </span>
         </span>
@@ -259,7 +255,6 @@ __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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c2n/switch",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "main": "dist/switch.js",
   "exports": {
@@ -21,6 +21,7 @@
   "files": [
     "dist",
     "types",
+    "custom-elements.json",
     "react.d.ts",
     "react.js",
     "vue.d.ts",
@@ -62,12 +63,12 @@
     }
   },
   "dependencies": {
-    "@c2n/core": "0.0.12",
+    "@c2n/core": "0.0.14",
     "lit": "3.3.3"
   },
   "devDependencies": {
     "@c2n/config": "*"
   },
   "customElements": "custom-elements.json",
-  "gitHead": "43e38b42ac221ffeef99a773c42dd3356961d26a"
+  "gitHead": "0261bfceaaa9f710a54e8f36cb57f946c0b83e53"
 }

package/types/src/switch.d.ts

@@ -23,6 +23,14 @@ export interface Switch {
  *
  * @event {Event} change - Re-dispatched from the inner input when the state changes.
  *
+ * @csspart control - The switch control, excluding its label and description.
+ * @csspart track - The switch track.
+ * @csspart thumb - The movable switch thumb.
+ * @csspart unchecked-icon - Icon region containing the `unchecked-icon` slot inside the thumb while off.
+ * @csspart checked-icon - Icon region containing the `checked-icon` slot inside the thumb while on.
+ * @csspart label - The switch label.
+ * @csspart description - Supporting-text region containing the `description` slot below the label.
+ *
  * @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.
@@ -91,7 +99,7 @@ export declare class Switch extends LitElement {
     ariaLabelledBy: undefined | string;
     /** Id of the element that describes the switch. */
     ariaDescribedBy: undefined | string;
-    private hasDescription;
+    private readonly slotPresence;
     /** True while the thumb follows the pointer; disables the slide transition. */
     private dragging;
     private drag?;
@@ -114,12 +122,10 @@ export declare class Switch extends LitElement {
     focus(options?: FocusOptions): void;
     /** Flips the state (or forces it) and fires `change`, as a click would. */
     toggle(force?: boolean): void;
-    protected willUpdate(_changed: PropertyValues<this>): void;
     protected update(changed: PropertyValues<this>): void;
     protected updated(_changed: PropertyValues<this>): void;
     private get effectiveDisabled();
     private handleDescriptionChange;
-    private updateDescription;
     private handleChange;
     private get rtl();
     private handlePointerDown;

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

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/switch.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/switch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAItE,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAMhG,oEAAoE;AACpE,MAAM,WAAW,cAAc;IAC7B,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;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,cAAc,CAAQ;IAC9B,OAAO,CAAC,sBAAsB,CAAQ;IAEtB,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,6DAA6D;IACjB,QAAQ,UAAQ;IAE5D,iDAAiD;IACrC,KAAK,SAAK;IAEtB,mEAAmE;IAE1D,SAAS,EAAG,MAAM,CAAA;IAE3B,gDAAgD;IAEhD,cAAc,EAAG,SAAS,GAAG,MAAM,CAAA;IAEnC,mDAAmD;IAEnD,eAAe,EAAG,SAAS,GAAG,MAAM,CAAA;IAEpC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAAoD;IACjF,+EAA+E;IACtE,OAAO,CAAC,QAAQ,CAAQ;IAEjC,OAAO,CAAC,IAAI,CAAC,CAAgH;IAC7H,qEAAqE;IACrE,OAAO,CAAC,aAAa,CAAQ;IAEpB,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;IAKxB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAIrC,2EAA2E;IAC3E,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO;cAQH,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC;cAKpC,OAAO,CAAC,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC;IAQzD,OAAO,KAAK,iBAAiB,GAE5B;IAED,OAAO,CAAC,uBAAuB;IAI/B,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;CAwChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,MAAM,CAAA;KACpB;CACF"}