@rcarls/rc-switch 0.4.0

package/README.md

@@ -0,0 +1,12 @@
+# @rcarls/rc-switch
+
+Switch wrapper that enhances a native checkbox input.
+
+```html
+<rc-switch>
+  <input id="notifications" name="notifications" type="checkbox" />
+</rc-switch>
+<label for="notifications">Notifications</label>
+```
+
+The native checkbox remains connected for labels, forms, validation, and no-JavaScript fallback.

package/dist/custom-elements.json

@@ -0,0 +1,526 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/define.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "custom-element-definition",
+          "name": "rc-switch",
+          "declaration": {
+            "name": "RCSwitch",
+            "module": "/src/rc-switch.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCSwitch",
+          "declaration": {
+            "name": "default",
+            "module": "./rc-switch.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "RCSwitchChangeDetail",
+          "declaration": {
+            "name": "RCSwitchChangeDetail",
+            "module": "./rc-switch.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/rc-switch.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Switch wrapper that enhances a direct native checkbox input.",
+          "name": "RCSwitch",
+          "cssProperties": [
+            {
+              "description": "Track inline size. No built-in default; a theme must set this for the switch to render with a visible size.",
+              "name": "--rc-switch-track-inline-size"
+            },
+            {
+              "description": "Track block size. No built-in default; a theme must set this for the switch to render with a visible size.",
+              "name": "--rc-switch-track-block-size"
+            },
+            {
+              "description": "Slotted native checkbox `appearance`.",
+              "name": "--rc-switch-native-appearance",
+              "default": "revert"
+            },
+            {
+              "description": "Slotted native checkbox inline size.",
+              "name": "--rc-switch-native-inline-size",
+              "default": "revert"
+            },
+            {
+              "description": "Slotted native checkbox block size.",
+              "name": "--rc-switch-native-block-size",
+              "default": "revert"
+            },
+            {
+              "description": "Slotted native checkbox margin.",
+              "name": "--rc-switch-native-margin",
+              "default": "revert"
+            },
+            {
+              "description": "Slotted native checkbox opacity.",
+              "name": "--rc-switch-native-opacity",
+              "default": "revert"
+            },
+            {
+              "description": "Display of the track/thumb/icon decoration. Themes set this to `block` (or similar) to opt into the decorated switch look.",
+              "name": "--rc-switch-decoration-display",
+              "default": "none"
+            },
+            {
+              "description": "Track border.",
+              "name": "--rc-switch-track-border",
+              "default": "2px solid ButtonBorder"
+            },
+            {
+              "description": "Track and thumb border radius.",
+              "name": "--rc-switch-track-radius",
+              "default": "9999px"
+            },
+            {
+              "description": "Unselected track background.",
+              "name": "--rc-switch-track-bg",
+              "default": "ButtonFace"
+            },
+            {
+              "description": "Track/thumb/icon transition duration.",
+              "name": "--rc-switch-duration",
+              "default": "150ms"
+            },
+            {
+              "description": "Track/thumb/icon transition easing.",
+              "name": "--rc-switch-easing",
+              "default": "ease"
+            },
+            {
+              "description": "Unselected thumb inline and block size.",
+              "name": "--rc-switch-thumb-size",
+              "default": "1rem"
+            },
+            {
+              "description": "Thumb and icon inline start offset within the track.",
+              "name": "--rc-switch-thumb-offset",
+              "default": "0.375rem"
+            },
+            {
+              "description": "Thumb border radius.",
+              "name": "--rc-switch-thumb-radius",
+              "default": "9999px"
+            },
+            {
+              "description": "Unselected thumb background.",
+              "name": "--rc-switch-thumb-bg",
+              "default": "ButtonText"
+            },
+            {
+              "description": "Selected/deselected icon container size.",
+              "name": "--rc-switch-icon-size",
+              "default": "1rem"
+            },
+            {
+              "description": "Icon color.",
+              "name": "--rc-switch-icon-color",
+              "default": "Canvas"
+            },
+            {
+              "description": "Display of the active icon container when `icons` or `show-only-selected-icon` is set.",
+              "name": "--rc-switch-icon-display",
+              "default": "none"
+            },
+            {
+              "description": "Selected track border color.",
+              "name": "--rc-switch-selected-track-border-color",
+              "default": "Highlight"
+            },
+            {
+              "description": "Selected track background.",
+              "name": "--rc-switch-selected-track-bg",
+              "default": "Highlight"
+            },
+            {
+              "description": "Selected thumb inline and block size.",
+              "name": "--rc-switch-selected-thumb-size",
+              "default": "1.5rem"
+            },
+            {
+              "description": "Selected thumb background.",
+              "name": "--rc-switch-selected-thumb-bg",
+              "default": "HighlightText"
+            },
+            {
+              "description": "Inline-axis translation applied to the thumb and icons when selected.",
+              "name": "--rc-switch-thumb-translate",
+              "default": "1.125rem"
+            },
+            {
+              "description": "Track focus ring, shown on focus-within.",
+              "name": "--rc-switch-focus-ring",
+              "default": "2px solid Highlight"
+            },
+            {
+              "description": "Track focus ring offset.",
+              "name": "--rc-switch-focus-ring-offset",
+              "default": "2px"
+            },
+            {
+              "description": "Host opacity while `disabled`.",
+              "name": "--rc-switch-disabled-opacity",
+              "default": "0.5"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "Visual switch track.",
+              "name": "track"
+            },
+            {
+              "description": "Visual switch thumb.",
+              "name": "thumb"
+            },
+            {
+              "description": "Optional selected-state icon container.",
+              "name": "selected-icon"
+            },
+            {
+              "description": "Optional deselected-state icon container.",
+              "name": "deselected-icon"
+            }
+          ],
+          "slots": [
+            {
+              "description": "A direct native `<input type=\"checkbox\">` child.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_checked",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "_defaultChecked",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_checkedInitialized",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_$input",
+              "type": {
+                "text": "HTMLInputElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_inputObserver",
+              "type": {
+                "text": "MutationObserver | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_$form",
+              "type": {
+                "text": "HTMLFormElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_roleOwned",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_disabledOwned",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "_slotMicrotaskQueued",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Current checked state. Host writes are silent.",
+              "attribute": "checked",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "defaultChecked",
+              "type": {
+                "text": "boolean"
+              },
+              "description": "Initial checked state for uncontrolled usage.",
+              "attribute": "default-checked"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Mirror disabled state to the native checkbox.",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "icons",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show selected and deselected icon affordance containers.",
+              "attribute": "icons",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "showOnlySelectedIcon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Show only the selected icon affordance container.",
+              "attribute": "show-only-selected-icon",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "_handleSlotChange",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_syncNativeInput",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_handleNativeChange",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_syncFromNative",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_applyNativeSemantics",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_applyChecked",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "writeDefault",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_applyDisabled",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "_setForm",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "$form",
+                  "type": {
+                    "text": "HTMLFormElement | null"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_handleFormReset",
+              "privacy": "private",
+              "readonly": true
+            }
+          ],
+          "events": [
+            {
+              "description": "Fired after user interaction changes the checked state.",
+              "name": "rc-switch-change"
+            }
+          ],
+          "attributes": [
+            {
+              "description": "Current checked state. Host writes are silent.",
+              "name": "checked",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "checked"
+            },
+            {
+              "description": "Initial checked state for uncontrolled usage.",
+              "name": "default-checked",
+              "type": {
+                "text": "boolean"
+              },
+              "fieldName": "defaultChecked"
+            },
+            {
+              "description": "Mirror disabled state to the native checkbox.",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "description": "Show selected and deselected icon affordance containers.",
+              "name": "icons",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "icons"
+            },
+            {
+              "description": "Show only the selected icon affordance container.",
+              "name": "show-only-selected-icon",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "showOnlySelectedIcon"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "rc-switch",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "RCSwitch",
+          "declaration": {
+            "name": "RCSwitch",
+            "module": "src/rc-switch.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "RCSwitch",
+            "module": "src/rc-switch.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/rc-switch-98TbWbUy.js

@@ -0,0 +1,256 @@
+import { css as l, LitElement as u, html as p } from "lit";
+import { property as r } from "lit/decorators.js";
+const v = l`
+  :host {
+    display: inline-grid;
+    inline-size: var(--rc-switch-track-inline-size);
+    block-size: var(--rc-switch-track-block-size);
+    position: relative;
+    color-scheme: inherit;
+    vertical-align: middle;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  ::slotted(input[type='checkbox']) {
+    appearance: var(--rc-switch-native-appearance, revert);
+    grid-area: 1 / 1;
+    inline-size: var(--rc-switch-native-inline-size, revert);
+    block-size: var(--rc-switch-native-block-size, revert);
+    margin: var(--rc-switch-native-margin, revert);
+    opacity: var(--rc-switch-native-opacity, revert);
+  }
+
+  [part='track'],
+  [part='thumb'],
+  [part='selected-icon'],
+  [part='deselected-icon'] {
+    pointer-events: none;
+    grid-area: 1 / 1;
+  }
+
+  [part='track'] {
+    display: var(--rc-switch-decoration-display, none);
+    border: var(--rc-switch-track-border, 2px solid ButtonBorder);
+    border-radius: var(--rc-switch-track-radius, 9999px);
+    background: var(--rc-switch-track-bg, ButtonFace);
+    transition:
+      background-color var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),
+      border-color var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease);
+  }
+
+  [part='thumb'] {
+    display: var(--rc-switch-decoration-display, none);
+    align-self: center;
+    justify-self: start;
+    inline-size: var(--rc-switch-thumb-size, 1rem);
+    block-size: var(--rc-switch-thumb-size, 1rem);
+    margin-inline-start: var(--rc-switch-thumb-offset, 0.375rem);
+    border-radius: var(--rc-switch-thumb-radius, 9999px);
+    background: var(--rc-switch-thumb-bg, ButtonText);
+    transform: translateX(0);
+    transition:
+      background-color var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),
+      inline-size var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),
+      block-size var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),
+      transform var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease);
+  }
+
+  [part='selected-icon'],
+  [part='deselected-icon'] {
+    place-self: center start;
+    display: none;
+    inline-size: var(--rc-switch-icon-size, 1rem);
+    block-size: var(--rc-switch-icon-size, 1rem);
+    margin-inline-start: var(--rc-switch-thumb-offset, 0.375rem);
+    color: var(--rc-switch-icon-color, Canvas);
+    transform: translateX(0);
+    transition: transform var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease);
+  }
+
+  :host([icons]) [part='deselected-icon'],
+  :host([icons][checked]) [part='selected-icon'],
+  :host([show-only-selected-icon][checked]) [part='selected-icon'] {
+    display: var(--rc-switch-icon-display, none);
+    place-items: center;
+  }
+
+  :host([icons][checked]) [part='deselected-icon'],
+  :host([show-only-selected-icon]) [part='deselected-icon'] {
+    display: none;
+  }
+
+  :host([checked]) [part='track'] {
+    border-color: var(--rc-switch-selected-track-border-color, Highlight);
+    background: var(--rc-switch-selected-track-bg, Highlight);
+  }
+
+  :host([checked]) [part='thumb'] {
+    inline-size: var(--rc-switch-selected-thumb-size, 1.5rem);
+    block-size: var(--rc-switch-selected-thumb-size, 1.5rem);
+    background: var(--rc-switch-selected-thumb-bg, HighlightText);
+    transform: translateX(var(--rc-switch-thumb-translate, 1.125rem));
+  }
+
+  :host([checked]) [part='selected-icon'],
+  :host([checked]) [part='deselected-icon'] {
+    transform: translateX(var(--rc-switch-thumb-translate, 1.125rem));
+  }
+
+  :host(:focus-within) [part='track'] {
+    outline: var(--rc-switch-focus-ring, 2px solid Highlight);
+    outline-offset: var(--rc-switch-focus-ring-offset, 2px);
+  }
+
+  :host([disabled]) {
+    opacity: var(--rc-switch-disabled-opacity, 0.5);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [part='track'],
+    [part='thumb'],
+    [part='selected-icon'],
+    [part='deselected-icon'] {
+      transition-duration: 0ms;
+    }
+  }
+
+  @media (forced-colors: active) {
+    [part='track'] {
+      forced-color-adjust: none;
+      border-color: ButtonText;
+      background: ButtonFace;
+    }
+
+    :host([checked]) [part='track'] {
+      border-color: Highlight;
+      background: Highlight;
+    }
+
+    [part='thumb'] {
+      background: ButtonText;
+    }
+
+    :host([checked]) [part='thumb'] {
+      background: HighlightText;
+    }
+  }
+`;
+var k = Object.defineProperty, b = Object.getOwnPropertyDescriptor, c = (d, e, t, a) => {
+  for (var i = a > 1 ? void 0 : a ? b(e, t) : e, n = d.length - 1, h; n >= 0; n--)
+    (h = d[n]) && (i = (a ? h(e, t, i) : h(i)) || i);
+  return a && i && k(e, t, i), i;
+};
+const o = class o extends u {
+  constructor() {
+    super(...arguments), this._defaultChecked = !1, this._checkedInitialized = !1, this._$input = null, this._inputObserver = null, this._$form = null, this._roleOwned = !1, this._disabledOwned = !1, this._slotMicrotaskQueued = !1, this.disabled = !1, this.icons = !1, this.showOnlySelectedIcon = !1, this._handleNativeChange = () => {
+      this._syncFromNative(), this.dispatchEvent(
+        new CustomEvent("rc-switch-change", {
+          bubbles: !0,
+          composed: !0,
+          detail: { checked: this.checked }
+        })
+      );
+    }, this._handleFormReset = () => {
+      queueMicrotask(() => this._syncFromNative());
+    };
+  }
+  get checked() {
+    return this._checked ?? this._defaultChecked;
+  }
+  set checked(e) {
+    const t = this.checked;
+    this._checked = e, this._checkedInitialized = !0, this._applyChecked(!1), this.requestUpdate("checked", t);
+  }
+  get defaultChecked() {
+    return this._defaultChecked;
+  }
+  set defaultChecked(e) {
+    const t = this._defaultChecked;
+    this._defaultChecked = e, !this._checkedInitialized && this._checked === void 0 && (this._applyChecked(!1), this.requestUpdate("checked", t)), this.requestUpdate("defaultChecked", t);
+  }
+  disconnectedCallback() {
+    this._inputObserver?.disconnect(), this._inputObserver = null, this._setForm(null), super.disconnectedCallback();
+  }
+  firstUpdated() {
+    this._syncNativeInput();
+  }
+  updated(e) {
+    e.has("disabled") && this._applyDisabled();
+  }
+  render() {
+    return p`
+      <span part="track" aria-hidden="true"></span>
+      <span part="thumb" aria-hidden="true"></span>
+      <span part="selected-icon" aria-hidden="true"><slot name="selected-icon">✓</slot></span>
+      <span part="deselected-icon" aria-hidden="true"><slot name="deselected-icon">–</slot></span>
+      <slot @slotchange=${this._handleSlotChange}></slot>
+    `;
+  }
+  _handleSlotChange() {
+    this._slotMicrotaskQueued || (this._slotMicrotaskQueued = !0, queueMicrotask(() => {
+      this._slotMicrotaskQueued = !1, this.isConnected && this._syncNativeInput();
+    }));
+  }
+  _syncNativeInput() {
+    const e = this.querySelector(':scope > input[type="checkbox"]');
+    if (e === this._$input) {
+      this._applyNativeSemantics(), this._applyChecked(!1), this._applyDisabled();
+      return;
+    }
+    this._$input?.removeEventListener("change", this._handleNativeChange), this._inputObserver?.disconnect(), this._inputObserver = null, this._$input = e, this._roleOwned = !1, this._disabledOwned = !1, this._setForm(e?.form ?? null), e && (!this._checkedInitialized && this._checked === void 0 && (this._defaultChecked = e.defaultChecked || e.checked, this._checked = e.checked), e.addEventListener("change", this._handleNativeChange), this._inputObserver = new MutationObserver(() => {
+      this._applyNativeSemantics(), this._syncFromNative();
+    }), this._inputObserver.observe(e, {
+      attributeFilter: ["checked", "disabled", "role"]
+    })), this._applyNativeSemantics(), this._applyChecked(!1), this._applyDisabled();
+  }
+  _syncFromNative() {
+    const e = this._$input;
+    if (!e)
+      return;
+    const t = this.checked;
+    this._checked = e.checked, this._checkedInitialized = !0, this.toggleAttribute("checked", e.checked), this.requestUpdate("checked", t);
+  }
+  _applyNativeSemantics() {
+    const e = this._$input;
+    e && (e.hasAttribute("role") ? this._roleOwned && e.getAttribute("role") !== "switch" && (this._roleOwned = !1) : (e.setAttribute("role", "switch"), this._roleOwned = !0));
+  }
+  _applyChecked(e) {
+    const t = this._$input;
+    if (!t) {
+      this.toggleAttribute("checked", this.checked);
+      return;
+    }
+    t.checked = this.checked, e && (t.defaultChecked = this._defaultChecked), this.toggleAttribute("checked", t.checked);
+  }
+  _applyDisabled() {
+    const e = this._$input;
+    e && (this.disabled ? (e.disabled || (this._disabledOwned = !0), e.disabled = !0) : this._disabledOwned && (e.disabled = !1, this._disabledOwned = !1));
+  }
+  _setForm(e) {
+    this._$form?.removeEventListener("reset", this._handleFormReset), this._$form = e, this._$form?.addEventListener("reset", this._handleFormReset);
+  }
+};
+o.styles = v;
+let s = o;
+c([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "checked", 1);
+c([
+  r({ type: Boolean, attribute: "default-checked" })
+], s.prototype, "defaultChecked", 1);
+c([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 2);
+c([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "icons", 2);
+c([
+  r({ type: Boolean, attribute: "show-only-selected-icon", reflect: !0 })
+], s.prototype, "showOnlySelectedIcon", 2);
+export {
+  s as R
+};
+//# sourceMappingURL=rc-switch-98TbWbUy.js.map

package/dist/rc-switch-98TbWbUy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-switch-98TbWbUy.js","sources":["../src/rc-switch.styles.ts","../src/rc-switch.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const switchStyles = css`\n  :host {\n    display: inline-grid;\n    inline-size: var(--rc-switch-track-inline-size);\n    block-size: var(--rc-switch-track-block-size);\n    position: relative;\n    color-scheme: inherit;\n    vertical-align: middle;\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  ::slotted(input[type='checkbox']) {\n    appearance: var(--rc-switch-native-appearance, revert);\n    grid-area: 1 / 1;\n    inline-size: var(--rc-switch-native-inline-size, revert);\n    block-size: var(--rc-switch-native-block-size, revert);\n    margin: var(--rc-switch-native-margin, revert);\n    opacity: var(--rc-switch-native-opacity, revert);\n  }\n\n  [part='track'],\n  [part='thumb'],\n  [part='selected-icon'],\n  [part='deselected-icon'] {\n    pointer-events: none;\n    grid-area: 1 / 1;\n  }\n\n  [part='track'] {\n    display: var(--rc-switch-decoration-display, none);\n    border: var(--rc-switch-track-border, 2px solid ButtonBorder);\n    border-radius: var(--rc-switch-track-radius, 9999px);\n    background: var(--rc-switch-track-bg, ButtonFace);\n    transition:\n      background-color var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),\n      border-color var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease);\n  }\n\n  [part='thumb'] {\n    display: var(--rc-switch-decoration-display, none);\n    align-self: center;\n    justify-self: start;\n    inline-size: var(--rc-switch-thumb-size, 1rem);\n    block-size: var(--rc-switch-thumb-size, 1rem);\n    margin-inline-start: var(--rc-switch-thumb-offset, 0.375rem);\n    border-radius: var(--rc-switch-thumb-radius, 9999px);\n    background: var(--rc-switch-thumb-bg, ButtonText);\n    transform: translateX(0);\n    transition:\n      background-color var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),\n      inline-size var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),\n      block-size var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease),\n      transform var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease);\n  }\n\n  [part='selected-icon'],\n  [part='deselected-icon'] {\n    place-self: center start;\n    display: none;\n    inline-size: var(--rc-switch-icon-size, 1rem);\n    block-size: var(--rc-switch-icon-size, 1rem);\n    margin-inline-start: var(--rc-switch-thumb-offset, 0.375rem);\n    color: var(--rc-switch-icon-color, Canvas);\n    transform: translateX(0);\n    transition: transform var(--rc-switch-duration, 150ms) var(--rc-switch-easing, ease);\n  }\n\n  :host([icons]) [part='deselected-icon'],\n  :host([icons][checked]) [part='selected-icon'],\n  :host([show-only-selected-icon][checked]) [part='selected-icon'] {\n    display: var(--rc-switch-icon-display, none);\n    place-items: center;\n  }\n\n  :host([icons][checked]) [part='deselected-icon'],\n  :host([show-only-selected-icon]) [part='deselected-icon'] {\n    display: none;\n  }\n\n  :host([checked]) [part='track'] {\n    border-color: var(--rc-switch-selected-track-border-color, Highlight);\n    background: var(--rc-switch-selected-track-bg, Highlight);\n  }\n\n  :host([checked]) [part='thumb'] {\n    inline-size: var(--rc-switch-selected-thumb-size, 1.5rem);\n    block-size: var(--rc-switch-selected-thumb-size, 1.5rem);\n    background: var(--rc-switch-selected-thumb-bg, HighlightText);\n    transform: translateX(var(--rc-switch-thumb-translate, 1.125rem));\n  }\n\n  :host([checked]) [part='selected-icon'],\n  :host([checked]) [part='deselected-icon'] {\n    transform: translateX(var(--rc-switch-thumb-translate, 1.125rem));\n  }\n\n  :host(:focus-within) [part='track'] {\n    outline: var(--rc-switch-focus-ring, 2px solid Highlight);\n    outline-offset: var(--rc-switch-focus-ring-offset, 2px);\n  }\n\n  :host([disabled]) {\n    opacity: var(--rc-switch-disabled-opacity, 0.5);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    [part='track'],\n    [part='thumb'],\n    [part='selected-icon'],\n    [part='deselected-icon'] {\n      transition-duration: 0ms;\n    }\n  }\n\n  @media (forced-colors: active) {\n    [part='track'] {\n      forced-color-adjust: none;\n      border-color: ButtonText;\n      background: ButtonFace;\n    }\n\n    :host([checked]) [part='track'] {\n      border-color: Highlight;\n      background: Highlight;\n    }\n\n    [part='thumb'] {\n      background: ButtonText;\n    }\n\n    :host([checked]) [part='thumb'] {\n      background: HighlightText;\n    }\n  }\n`;\n\nexport default switchStyles;\n","import { LitElement, html } from 'lit';\nimport type { PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport switchStyles from './rc-switch.styles.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-switch': RCSwitch;\n  }\n\n  interface HTMLElementEventMap {\n    'rc-switch-change': CustomEvent<RCSwitchChangeDetail>;\n  }\n}\n\n/** Detail payload for `rc-switch-change`. */\nexport interface RCSwitchChangeDetail {\n  /** Current checked state after user interaction. */\n  checked: boolean;\n}\n\n/**\n * Switch wrapper that enhances a direct native checkbox input.\n *\n * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-switch rc-switch docs}\n * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/switch/ WAI-ARIA switch pattern}\n *\n * @slot - A direct native `<input type=\"checkbox\">` child.\n *\n * @fires rc-switch-change - Fired after user interaction changes the checked state.\n *\n * @csspart track - Visual switch track.\n * @csspart thumb - Visual switch thumb.\n * @csspart selected-icon - Optional selected-state icon container.\n * @csspart deselected-icon - Optional deselected-state icon container.\n *\n * @attr checked - Current checked state. Host writes are silent.\n * @attr default-checked - Initial checked state for uncontrolled usage.\n * @attr disabled - Mirrors disabled state to the native checkbox.\n * @attr icons - Shows both selected and deselected icon containers.\n * @attr show-only-selected-icon - Shows only the selected icon container.\n *\n * @cssprop [--rc-switch-track-inline-size] - Track inline size. No built-in default; a theme\n *   must set this for the switch to render with a visible size.\n * @cssprop [--rc-switch-track-block-size] - Track block size. No built-in default; a theme must\n *   set this for the switch to render with a visible size.\n * @cssprop [--rc-switch-native-appearance=revert] - Slotted native checkbox `appearance`.\n * @cssprop [--rc-switch-native-inline-size=revert] - Slotted native checkbox inline size.\n * @cssprop [--rc-switch-native-block-size=revert] - Slotted native checkbox block size.\n * @cssprop [--rc-switch-native-margin=revert] - Slotted native checkbox margin.\n * @cssprop [--rc-switch-native-opacity=revert] - Slotted native checkbox opacity.\n * @cssprop [--rc-switch-decoration-display=none] - Display of the track/thumb/icon decoration.\n *   Themes set this to `block` (or similar) to opt into the decorated switch look.\n * @cssprop [--rc-switch-track-border=2px solid ButtonBorder] - Track border.\n * @cssprop [--rc-switch-track-radius=9999px] - Track and thumb border radius.\n * @cssprop [--rc-switch-track-bg=ButtonFace] - Unselected track background.\n * @cssprop [--rc-switch-duration=150ms] - Track/thumb/icon transition duration.\n * @cssprop [--rc-switch-easing=ease] - Track/thumb/icon transition easing.\n * @cssprop [--rc-switch-thumb-size=1rem] - Unselected thumb inline and block size.\n * @cssprop [--rc-switch-thumb-offset=0.375rem] - Thumb and icon inline start offset within the\n *   track.\n * @cssprop [--rc-switch-thumb-radius=9999px] - Thumb border radius.\n * @cssprop [--rc-switch-thumb-bg=ButtonText] - Unselected thumb background.\n * @cssprop [--rc-switch-icon-size=1rem] - Selected/deselected icon container size.\n * @cssprop [--rc-switch-icon-color=Canvas] - Icon color.\n * @cssprop [--rc-switch-icon-display=none] - Display of the active icon container when `icons`\n *   or `show-only-selected-icon` is set.\n * @cssprop [--rc-switch-selected-track-border-color=Highlight] - Selected track border color.\n * @cssprop [--rc-switch-selected-track-bg=Highlight] - Selected track background.\n * @cssprop [--rc-switch-selected-thumb-size=1.5rem] - Selected thumb inline and block size.\n * @cssprop [--rc-switch-selected-thumb-bg=HighlightText] - Selected thumb background.\n * @cssprop [--rc-switch-thumb-translate=1.125rem] - Inline-axis translation applied to the thumb\n *   and icons when selected.\n * @cssprop [--rc-switch-focus-ring=2px solid Highlight] - Track focus ring, shown on\n *   focus-within.\n * @cssprop [--rc-switch-focus-ring-offset=2px] - Track focus ring offset.\n * @cssprop [--rc-switch-disabled-opacity=0.5] - Host opacity while `disabled`.\n */\nexport class RCSwitch extends LitElement {\n  static override styles = switchStyles;\n\n  private _checked: boolean | undefined;\n  private _defaultChecked = false;\n  private _checkedInitialized = false;\n  private _$input: HTMLInputElement | null = null;\n  private _inputObserver: MutationObserver | null = null;\n  private _$form: HTMLFormElement | null = null;\n  private _roleOwned = false;\n  private _disabledOwned = false;\n  private _slotMicrotaskQueued = false;\n\n  /** Current checked state. Host writes are silent. */\n  @property({ type: Boolean, reflect: true })\n  get checked(): boolean {\n    return this._checked ?? this._defaultChecked;\n  }\n\n  set checked(value: boolean | undefined) {\n    const oldValue = this.checked;\n\n    this._checked = value;\n    this._checkedInitialized = true;\n    this._applyChecked(false);\n    this.requestUpdate('checked', oldValue);\n  }\n\n  /** Initial checked state for uncontrolled usage. */\n  @property({ type: Boolean, attribute: 'default-checked' })\n  get defaultChecked(): boolean {\n    return this._defaultChecked;\n  }\n\n  set defaultChecked(value: boolean) {\n    const oldValue = this._defaultChecked;\n\n    this._defaultChecked = value;\n\n    if (!this._checkedInitialized && this._checked === undefined) {\n      this._applyChecked(false);\n      this.requestUpdate('checked', oldValue);\n    }\n\n    this.requestUpdate('defaultChecked', oldValue);\n  }\n\n  /** Mirror disabled state to the native checkbox. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Show selected and deselected icon affordance containers. */\n  @property({ type: Boolean, reflect: true })\n  icons = false;\n\n  /** Show only the selected icon affordance container. */\n  @property({ type: Boolean, attribute: 'show-only-selected-icon', reflect: true })\n  showOnlySelectedIcon = false;\n\n  override disconnectedCallback(): void {\n    this._inputObserver?.disconnect();\n    this._inputObserver = null;\n    this._setForm(null);\n    super.disconnectedCallback();\n  }\n\n  protected override firstUpdated(): void {\n    this._syncNativeInput();\n  }\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (changed.has('disabled')) {\n      this._applyDisabled();\n    }\n  }\n\n  protected override render() {\n    return html`\n      <span part=\"track\" aria-hidden=\"true\"></span>\n      <span part=\"thumb\" aria-hidden=\"true\"></span>\n      <span part=\"selected-icon\" aria-hidden=\"true\"><slot name=\"selected-icon\">✓</slot></span>\n      <span part=\"deselected-icon\" aria-hidden=\"true\"><slot name=\"deselected-icon\">–</slot></span>\n      <slot @slotchange=${this._handleSlotChange}></slot>\n    `;\n  }\n\n  private _handleSlotChange(): void {\n    if (this._slotMicrotaskQueued) {\n      return;\n    }\n\n    this._slotMicrotaskQueued = true;\n\n    queueMicrotask(() => {\n      this._slotMicrotaskQueued = false;\n\n      if (this.isConnected) {\n        this._syncNativeInput();\n      }\n    });\n  }\n\n  private _syncNativeInput(): void {\n    const $nextInput = this.querySelector<HTMLInputElement>(':scope > input[type=\"checkbox\"]');\n\n    if (!$nextInput && import.meta.env.DEV) {\n      console.warn(\n        '[rc-switch] No direct child <input type=\"checkbox\"> found. Place a native checkbox inside <rc-switch>.',\n        this,\n      );\n    }\n\n    if ($nextInput === this._$input) {\n      this._applyNativeSemantics();\n      this._applyChecked(false);\n      this._applyDisabled();\n\n      return;\n    }\n\n    this._$input?.removeEventListener('change', this._handleNativeChange);\n    this._inputObserver?.disconnect();\n    this._inputObserver = null;\n    this._$input = $nextInput;\n    this._roleOwned = false;\n    this._disabledOwned = false;\n    this._setForm($nextInput?.form ?? null);\n\n    if ($nextInput) {\n      if (!this._checkedInitialized && this._checked === undefined) {\n        this._defaultChecked = $nextInput.defaultChecked || $nextInput.checked;\n        this._checked = $nextInput.checked;\n      }\n\n      $nextInput.addEventListener('change', this._handleNativeChange);\n\n      this._inputObserver = new MutationObserver(() => {\n        this._applyNativeSemantics();\n        this._syncFromNative();\n      });\n\n      this._inputObserver.observe($nextInput, {\n        attributeFilter: ['checked', 'disabled', 'role'],\n      });\n    }\n\n    this._applyNativeSemantics();\n    this._applyChecked(false);\n    this._applyDisabled();\n  }\n\n  private readonly _handleNativeChange = (): void => {\n    this._syncFromNative();\n\n    this.dispatchEvent(\n      new CustomEvent<RCSwitchChangeDetail>('rc-switch-change', {\n        bubbles: true,\n        composed: true,\n        detail: { checked: this.checked },\n      }),\n    );\n  };\n\n  private _syncFromNative(): void {\n    const $input = this._$input;\n\n    if (!$input) {\n      return;\n    }\n\n    const oldValue = this.checked;\n\n    this._checked = $input.checked;\n    this._checkedInitialized = true;\n    this.toggleAttribute('checked', $input.checked);\n    this.requestUpdate('checked', oldValue);\n  }\n\n  private _applyNativeSemantics(): void {\n    const $input = this._$input;\n\n    if (!$input) {\n      return;\n    }\n\n    if (!$input.hasAttribute('role')) {\n      $input.setAttribute('role', 'switch');\n      this._roleOwned = true;\n    } else if (this._roleOwned && $input.getAttribute('role') !== 'switch') {\n      this._roleOwned = false;\n    }\n  }\n\n  private _applyChecked(writeDefault: boolean): void {\n    const $input = this._$input;\n\n    if (!$input) {\n      this.toggleAttribute('checked', this.checked);\n\n      return;\n    }\n\n    $input.checked = this.checked;\n\n    if (writeDefault) {\n      $input.defaultChecked = this._defaultChecked;\n    }\n\n    this.toggleAttribute('checked', $input.checked);\n  }\n\n  private _applyDisabled(): void {\n    const $input = this._$input;\n\n    if (!$input) {\n      return;\n    }\n\n    if (this.disabled) {\n      if (!$input.disabled) {\n        this._disabledOwned = true;\n      }\n\n      $input.disabled = true;\n    } else if (this._disabledOwned) {\n      $input.disabled = false;\n      this._disabledOwned = false;\n    }\n  }\n\n  private _setForm($form: HTMLFormElement | null): void {\n    this._$form?.removeEventListener('reset', this._handleFormReset);\n    this._$form = $form;\n    this._$form?.addEventListener('reset', this._handleFormReset);\n  }\n\n  private readonly _handleFormReset = (): void => {\n    queueMicrotask(() => this._syncFromNative());\n  };\n}\n\nexport default RCSwitch;\n"],"names":["switchStyles","css","_RCSwitch","LitElement","value","oldValue","changed","html","$nextInput","$input","writeDefault","$form","RCSwitch","__decorateClass","property"],"mappings":"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"}

package/dist/rc-switch-define.js

@@ -0,0 +1,3 @@
+import { R as t } from "./rc-switch-98TbWbUy.js";
+customElements.get("rc-switch") || customElements.define("rc-switch", t);
+//# sourceMappingURL=rc-switch-define.js.map

package/dist/rc-switch-define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-switch-define.js","sources":["../src/define.ts"],"sourcesContent":["import RCSwitch from './rc-switch.js';\n\ncustomElements.get('rc-switch') || customElements.define('rc-switch', RCSwitch);\n"],"names":["RCSwitch"],"mappings":";AAEA,eAAe,IAAI,WAAW,KAAK,eAAe,OAAO,aAAaA,CAAQ;"}

package/dist/rc-switch.js

@@ -0,0 +1,5 @@
+import { R as t } from "./rc-switch-98TbWbUy.js";
+export {
+  t as RCSwitch
+};
+//# sourceMappingURL=rc-switch.js.map

package/dist/rc-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-switch.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types/packages/rc-switch/src/define.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/packages/rc-switch/src/index.d.ts

@@ -0,0 +1,2 @@
+export { default as RCSwitch } from './rc-switch.js';
+export type { RCSwitchChangeDetail } from './rc-switch.js';

package/dist/types/packages/rc-switch/src/rc-switch.d.ts

@@ -0,0 +1,109 @@
+import { LitElement, PropertyValues } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-switch': RCSwitch;
+    }
+    interface HTMLElementEventMap {
+        'rc-switch-change': CustomEvent<RCSwitchChangeDetail>;
+    }
+}
+/** Detail payload for `rc-switch-change`. */
+export interface RCSwitchChangeDetail {
+    /** Current checked state after user interaction. */
+    checked: boolean;
+}
+/**
+ * Switch wrapper that enhances a direct native checkbox input.
+ *
+ * @see {@link https://richardcarls.github.io/rc-webcomponents/components/rc-switch rc-switch docs}
+ * @see {@link https://www.w3.org/WAI/ARIA/apg/patterns/switch/ WAI-ARIA switch pattern}
+ *
+ * @slot - A direct native `<input type="checkbox">` child.
+ *
+ * @fires rc-switch-change - Fired after user interaction changes the checked state.
+ *
+ * @csspart track - Visual switch track.
+ * @csspart thumb - Visual switch thumb.
+ * @csspart selected-icon - Optional selected-state icon container.
+ * @csspart deselected-icon - Optional deselected-state icon container.
+ *
+ * @attr checked - Current checked state. Host writes are silent.
+ * @attr default-checked - Initial checked state for uncontrolled usage.
+ * @attr disabled - Mirrors disabled state to the native checkbox.
+ * @attr icons - Shows both selected and deselected icon containers.
+ * @attr show-only-selected-icon - Shows only the selected icon container.
+ *
+ * @cssprop [--rc-switch-track-inline-size] - Track inline size. No built-in default; a theme
+ *   must set this for the switch to render with a visible size.
+ * @cssprop [--rc-switch-track-block-size] - Track block size. No built-in default; a theme must
+ *   set this for the switch to render with a visible size.
+ * @cssprop [--rc-switch-native-appearance=revert] - Slotted native checkbox `appearance`.
+ * @cssprop [--rc-switch-native-inline-size=revert] - Slotted native checkbox inline size.
+ * @cssprop [--rc-switch-native-block-size=revert] - Slotted native checkbox block size.
+ * @cssprop [--rc-switch-native-margin=revert] - Slotted native checkbox margin.
+ * @cssprop [--rc-switch-native-opacity=revert] - Slotted native checkbox opacity.
+ * @cssprop [--rc-switch-decoration-display=none] - Display of the track/thumb/icon decoration.
+ *   Themes set this to `block` (or similar) to opt into the decorated switch look.
+ * @cssprop [--rc-switch-track-border=2px solid ButtonBorder] - Track border.
+ * @cssprop [--rc-switch-track-radius=9999px] - Track and thumb border radius.
+ * @cssprop [--rc-switch-track-bg=ButtonFace] - Unselected track background.
+ * @cssprop [--rc-switch-duration=150ms] - Track/thumb/icon transition duration.
+ * @cssprop [--rc-switch-easing=ease] - Track/thumb/icon transition easing.
+ * @cssprop [--rc-switch-thumb-size=1rem] - Unselected thumb inline and block size.
+ * @cssprop [--rc-switch-thumb-offset=0.375rem] - Thumb and icon inline start offset within the
+ *   track.
+ * @cssprop [--rc-switch-thumb-radius=9999px] - Thumb border radius.
+ * @cssprop [--rc-switch-thumb-bg=ButtonText] - Unselected thumb background.
+ * @cssprop [--rc-switch-icon-size=1rem] - Selected/deselected icon container size.
+ * @cssprop [--rc-switch-icon-color=Canvas] - Icon color.
+ * @cssprop [--rc-switch-icon-display=none] - Display of the active icon container when `icons`
+ *   or `show-only-selected-icon` is set.
+ * @cssprop [--rc-switch-selected-track-border-color=Highlight] - Selected track border color.
+ * @cssprop [--rc-switch-selected-track-bg=Highlight] - Selected track background.
+ * @cssprop [--rc-switch-selected-thumb-size=1.5rem] - Selected thumb inline and block size.
+ * @cssprop [--rc-switch-selected-thumb-bg=HighlightText] - Selected thumb background.
+ * @cssprop [--rc-switch-thumb-translate=1.125rem] - Inline-axis translation applied to the thumb
+ *   and icons when selected.
+ * @cssprop [--rc-switch-focus-ring=2px solid Highlight] - Track focus ring, shown on
+ *   focus-within.
+ * @cssprop [--rc-switch-focus-ring-offset=2px] - Track focus ring offset.
+ * @cssprop [--rc-switch-disabled-opacity=0.5] - Host opacity while `disabled`.
+ */
+export declare class RCSwitch extends LitElement {
+    static styles: import('lit').CSSResult;
+    private _checked;
+    private _defaultChecked;
+    private _checkedInitialized;
+    private _$input;
+    private _inputObserver;
+    private _$form;
+    private _roleOwned;
+    private _disabledOwned;
+    private _slotMicrotaskQueued;
+    /** Current checked state. Host writes are silent. */
+    get checked(): boolean;
+    set checked(value: boolean | undefined);
+    /** Initial checked state for uncontrolled usage. */
+    get defaultChecked(): boolean;
+    set defaultChecked(value: boolean);
+    /** Mirror disabled state to the native checkbox. */
+    disabled: boolean;
+    /** Show selected and deselected icon affordance containers. */
+    icons: boolean;
+    /** Show only the selected icon affordance container. */
+    showOnlySelectedIcon: boolean;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    protected render(): import('lit').TemplateResult<1>;
+    private _handleSlotChange;
+    private _syncNativeInput;
+    private readonly _handleNativeChange;
+    private _syncFromNative;
+    private _applyNativeSemantics;
+    private _applyChecked;
+    private _applyDisabled;
+    private _setForm;
+    private readonly _handleFormReset;
+}
+export default RCSwitch;

package/dist/types/packages/rc-switch/src/rc-switch.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const switchStyles: import('lit').CSSResult;
+export default switchStyles;

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@rcarls/rc-switch",
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "0.4.0",
+  "description": "Switch wrapper that enhances a native checkbox input.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/richardcarls/rc-webcomponents.git",
+    "directory": "packages/rc-switch"
+  },
+  "homepage": "https://richardcarls.github.io/rc-webcomponents/components/rc-switch",
+  "license": "MIT",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "module": "./dist/rc-switch.js",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/types/packages/rc-switch/src/index.d.ts",
+        "default": "./dist/rc-switch.js"
+      }
+    },
+    "./define": {
+      "import": {
+        "types": "./dist/types/packages/rc-switch/src/define.d.ts",
+        "default": "./dist/rc-switch-define.js"
+      }
+    }
+  },
+  "types": "./dist/types/packages/rc-switch/src/index.d.ts",
+  "sideEffects": [
+    "./dist/rc-switch-define.js"
+  ],
+  "customElements": "dist/custom-elements.json",
+  "scripts": {
+    "build": "tsc && vite build && cem analyze",
+    "cem:analyze": "cem analyze",
+    "preview": "vite preview",
+    "test:browser": "vitest --run",
+    "test:browser:chrome": "vitest --run --project=chromium",
+    "test:browser:firefox": "vitest --run --project=firefox"
+  },
+  "devDependencies": {
+    "@custom-elements-manifest/analyzer": "0.11.0",
+    "@vitest/browser-playwright": "4.1.5",
+    "lit": "^3.0.0",
+    "playwright": "^1.56.0",
+    "rollup": "^4.60.2",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.6",
+    "vitest-browser-lit": "^1.0.1"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  }
+}