@nysds/nys-toggle 1.12.0 → 1.13.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,28 +1,37 @@
1
- import { LitElement as h, unsafeCSS as y, html as c } from "lit";
1
+ import { LitElement as h, unsafeCSS as y, html as g } from "lit";
2
2
  import { property as t } from "lit/decorators.js";
3
- import { ifDefined as d } from "lit/directives/if-defined.js";
4
- const v = ':host{--_nys-toggle-width: var(--nys-font-size-8xl, 44px);--_nys-toggle-height: var(--nys-size-300, 24px);--_nys-toggle-border-radius: var(--nys-radius-round, 1776px);--_nys-toggle-border-width: var(--nys-border-width-md, 2px);--_nys-toggle-size--knob: var(--nys-font-size-lg, 18px);--_nys-toggle-margin--knob: calc( (var(--_nys-toggle-height) - var(--_nys-toggle-size--knob)) / 2 );--_nys-toggle-transform--translateX: calc( var(--_nys-toggle-width) - var(--_nys-toggle-size--knob) - var( --_nys-toggle-margin--knob ) - 2px );--_nys-toggle-gap: var(--nys-space-150, 12px);--_nys-toggle-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-toggle-font-size: var(--nys-font-size-ui-md, 16px);--_nys-toggle-font-weight: var(--nys-font-weight-regular, 400);--_nys-toggle-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-toggle-transition-duration: .3s;--_nys-toggle-outline-color: var(--nys-color-focus, #004dd1);--_nys-toggle-outline-width: var(--nys-border-width-md, 2px);--_nys-toggle-background-color: var(--nys-color-neutral-500, #797c7f);--_nys-toggle-background-color--disabled: var( --nys-color-neutral-100, #d0d0ce );--_nys-toggle-background-color--checked: var(--nys-color-theme, #154973);--_nys-toggle-background-color--hover: var( --nys-color-neutral-600, #62666a );--_nys-toggle-background-color--active: var( --nys-color-neutral-700, #4a4d4f );--_nys-toggle-background-color--checked--hover: var( --nys-color-theme-strong, #0e324f );--_nys-toggle-background-color--checked--active: var( --nys-color-theme-stronger, #081b2b );--_nys-toggle-color-ink-reverse: var(--nys-color-ink-reverse, #fff);--_nys-toggle-color: var( --nys-color-text, var(--nys-color-neutral-900, #1b1b1b) );--_nys-toggle-color--disabled: var(--nys-color-neutral-500, #797c7f)}::slotted([slot^=description]){font-style:italic;margin:0}slot[name=description]{font-style:italic;text-align:left;display:flex}.nys-toggle__content{display:flex;gap:var(--_nys-toggle-gap)}.nys-toggle__text{color:var(--_nys-toggle-color);display:flex;flex-direction:column;align-items:flex-start;font-size:var(--_nys-toggle-font-size);font-family:var(--_nys-toggle-font-family);font-weight:var(--_nys-toggle-font-weight);line-height:var(--_nys-toggle-line-height)}.nys-toggle__content:has(input:disabled) .nys-toggle__text *{color:var(--_nys-toggle-color--disabled);cursor:not-allowed}.nys-toggle__toggle{position:relative;display:inline-block;width:var(--_nys-toggle-width);min-width:var(--_nys-toggle-width);max-width:var(--_nys-toggle-width);height:var(--_nys-toggle-height);min-height:var(--_nys-toggle-height);max-height:var(--_nys-toggle-height)}.nys-toggle__toggle input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;border-radius:var(--_nys-toggle-border-radius);outline-offset:var(--_nys-toggle-border-width);width:var(--_nys-toggle-width);inset:0;background-color:var(--_nys-toggle-background-color);display:flex;align-items:center}.knob{content:"";height:var(--_nys-toggle-size--knob);width:var(--_nys-toggle-size--knob);margin:var(--_nys-toggle-margin--knob);border-radius:var(--nys-radius-round, 1776px);background-color:var(--_nys-toggle-color-ink-reverse);transition:all var(--_nys-toggle-transition-duration) cubic-bezier(.27,.2,.25,1.51);overflow:hidden;display:flex;align-items:center;justify-content:center}input:checked+.slider{background-color:var(--_nys-toggle-background-color--checked)}.slider:hover{background-color:var(--_nys-toggle-background-color--hover)}input:checked+.slider:hover{background-color:var(--_nys-toggle-background-color--checked--hover)}.slider:hover .knob .toggle-icon{color:var(--_nys-toggle-background-color--hover)}input:checked:not(:disabled)+.slider:hover .knob .toggle-icon{color:var(--_nys-toggle-background-color--checked--hover)}input:active:not(:disabled)+.slider{background-color:var(--_nys-toggle-background-color--active);outline:solid var(--_nys-toggle-outline-width) var(--_nys-toggle-outline-color)}input:active:checked+.slider{background-color:var(--_nys-toggle-background-color--checked--active)}input:focus+.slider{outline:solid var(--_nys-toggle-outline-width) var(--_nys-toggle-outline-color)}input:checked+.slider .knob{transform:translate(var(--_nys-toggle-transform--translateX))}.toggle-icon{position:absolute;color:var(--_nys-toggle-background-color)}input:checked+.slider .knob .toggle-icon{color:var(--_nys-toggle-background-color--checked)}input:active+.slider .knob .toggle-icon{color:var(--_nys-toggle-background-color--active)}input:active:checked+.slider .knob .toggle-icon{color:var(--_nys-toggle-background-color--checked--active)}:host([size=sm]) .toggle-icon{font-size:var(--nys-font-size-body-xs, 12px)}:host([size=md]) .toggle-icon{font-size:var(--nys-font-size-body-sm, 14px)}@supports not (font-size: 1cap){:host([size=sm]) .toggle-icon{font-size:var(--nys-font-size-body-xs, 12px)}:host([size=md]) .toggle-icon{font-size:calc(var(--nys-font-size-body-sm, 14px) - 1px)}}input:disabled+.slider,input:disabled+.slider:hover{background-color:var(--_nys-toggle-background-color--disabled);cursor:not-allowed}input:disabled+.slider .knob .toggle-icon,input:disabled:active+.slider .knob .toggle-icon{color:var(--_nys-toggle-background-color--disabled)}:host([size=sm]){--_nys-toggle-width: var(--nys-size-450, 36px);--_nys-toggle-height: var(--nys-size-250, 20px);--_nys-toggle-size--knob: var(--nys-size-200, 16px);--_nys-toggle-gap: var(--nys-space-100, 8px)}:host([size=md]){--_nys-toggle-width: var(--nys-size-550, 44px);--_nys-toggle-height: var(--nys-size-300, 24px);--_nys-toggle-size--knob: var(--nys-size-250, 20px)}.nys-toggle__text.invert{--_nys-toggle-color: var(--nys-color-text-reverse, #fff)}@media(prefers-reduced-motion:reduce){:host{--toggle-transition-duration: 0s}}';
5
- var u = Object.defineProperty, n = (a, o, r, _) => {
6
- for (var s = void 0, l = a.length - 1, g; l >= 0; l--)
7
- (g = a[l]) && (s = g(o, r, s) || s);
8
- return s && u(o, r, s), s;
3
+ import { ifDefined as a } from "lit/directives/if-defined.js";
4
+ const u = ':host{--_nys-toggle-width: var(--nys-font-size-8xl, 44px);--_nys-toggle-height: var(--nys-size-300, 24px);--_nys-toggle-border-radius: var(--nys-radius-round, 1776px);--_nys-toggle-border-width: var(--nys-border-width-md, 2px);--_nys-toggle-size--knob: var(--nys-font-size-lg, 18px);--_nys-toggle-margin--knob: calc( (var(--_nys-toggle-height) - var(--_nys-toggle-size--knob)) / 2 );--_nys-toggle-transform--translateX: calc( var(--_nys-toggle-width) - var(--_nys-toggle-size--knob) - var( --_nys-toggle-margin--knob ) - 2px );--_nys-toggle-gap: var(--nys-space-150, 12px);--_nys-toggle-transition-duration: .3s;--_nys-toggle-outline-color: var(--nys-color-focus, #004dd1);--_nys-toggle-outline-width: var(--nys-border-width-md, 2px);--_nys-toggle-background-color: var(--nys-color-neutral-500, #797c7f);--_nys-toggle-background-color--disabled: var( --nys-color-neutral-100, #d0d0ce );--_nys-toggle-background-color--checked: var(--nys-color-theme, #154973);--_nys-toggle-background-color--hover: var(--nys-color-neutral-600, #62666a);--_nys-toggle-background-color--active: var(--nys-color-neutral-700, #4a4d4f);--_nys-toggle-background-color--checked--hover: var( --nys-color-theme-strong, #0e324f );--_nys-toggle-background-color--checked--active: var( --nys-color-theme-stronger, #081b2b );--_nys-toggle-color-ink-reverse: var(--nys-color-ink-reverse, #fff);--_nys-toggle-color--disabled: var(--nys-color-neutral-500, #797c7f)}.nys-toggle__content{display:flex;gap:var(--_nys-toggle-gap)}.nys-toggle__content nys-label{--_nys-label-font-weight: var(--nys-font-weight-regular, 400)}.nys-toggle__content:has(input:disabled) nys-label{--_nys-label-color: var(--_nys-toggle-color--disabled);cursor:not-allowed}.nys-toggle__toggle{position:relative;display:inline-block;width:var(--_nys-toggle-width);min-width:var(--_nys-toggle-width);max-width:var(--_nys-toggle-width);height:var(--_nys-toggle-height);min-height:var(--_nys-toggle-height);max-height:var(--_nys-toggle-height)}.nys-toggle__toggle input{opacity:0;width:0;height:0}.nys-toggle__toggle input:checked+.slider{background-color:var(--_nys-toggle-background-color--checked)}.nys-toggle__toggle input:checked+.slider:hover{background-color:var(--_nys-toggle-background-color--checked--hover)}.nys-toggle__toggle input:checked+.slider:hover .knob .toggle-icon{color:var(--_nys-toggle-background-color--checked--hover)}.nys-toggle__toggle input:checked+.slider .knob{transform:translate(var(--_nys-toggle-transform--translateX))}.nys-toggle__toggle input:checked+.slider .knob .toggle-icon{color:var(--_nys-toggle-background-color--checked)}.nys-toggle__toggle input:active:not(:disabled)+.slider{background-color:var(--_nys-toggle-background-color--active);outline:solid var(--_nys-toggle-outline-width) var(--_nys-toggle-outline-color)}.nys-toggle__toggle input:active:not(:disabled)+.slider .knob .toggle-icon{color:var(--_nys-toggle-background-color--active)}.nys-toggle__toggle input:active:not(:disabled)+.slider:checked{background-color:var(--_nys-toggle-background-color--checked--active)}.nys-toggle__toggle input:active:not(:disabled)+.slider:checked .knob .toggle-icon{color:var(--_nys-toggle-background-color--checked--active)}.nys-toggle__toggle input:focus+.slider{outline:solid var(--_nys-toggle-outline-width) var(--_nys-toggle-outline-color)}.nys-toggle__toggle input:disabled+.slider{background-color:var(--_nys-toggle-background-color--disabled);cursor:not-allowed}.nys-toggle__toggle input:disabled+.slider:hover{background-color:var(--_nys-toggle-background-color--disabled)}.nys-toggle__toggle input:disabled+.slider .knob .toggle-icon{color:var(--_nys-toggle-background-color--disabled)}.slider{position:absolute;cursor:pointer;border-radius:var(--_nys-toggle-border-radius);outline-offset:var(--_nys-toggle-border-width);width:var(--_nys-toggle-width);inset:0;background-color:var(--_nys-toggle-background-color);display:flex;align-items:center}.slider:hover{background-color:var(--_nys-toggle-background-color--hover)}.slider:hover .knob .toggle-icon{color:var(--_nys-toggle-background-color--hover)}.knob{content:"";height:var(--_nys-toggle-size--knob);width:var(--_nys-toggle-size--knob);margin:var(--_nys-toggle-margin--knob);border-radius:var(--nys-radius-round, 1776px);background-color:var(--_nys-toggle-color-ink-reverse);transition:all var(--_nys-toggle-transition-duration) cubic-bezier(.27,.2,.25,1.51);overflow:hidden;display:flex;align-items:center;justify-content:center}.toggle-icon{position:absolute;color:var(--_nys-toggle-background-color)}:host([size=sm]){--_nys-toggle-width: var(--nys-size-450, 36px);--_nys-toggle-height: var(--nys-size-250, 20px);--_nys-toggle-size--knob: var(--nys-size-200, 16px);--_nys-toggle-gap: var(--nys-space-100, 8px)}:host([size=sm]) .toggle-icon{font-size:var(--nys-font-size-body-xs, 12px)}@supports not (font-size: 1cap){:host([size=sm]) .toggle-icon{font-size:var(--nys-font-size-body-xs, 12px)}}:host([size=md]){--_nys-toggle-width: var(--nys-size-550, 44px);--_nys-toggle-height: var(--nys-size-300, 24px);--_nys-toggle-size--knob: var(--nys-size-250, 20px)}:host([size=md]) .toggle-icon{font-size:var(--nys-font-size-body-sm, 14px)}@supports not (font-size: 1cap){:host([size=md]) .toggle-icon{font-size:calc(var(--nys-font-size-body-sm, 14px) - 1px)}}@media(prefers-reduced-motion:reduce){:host{--toggle-transition-duration: 0s}}';
5
+ var v = Object.defineProperty, n = (c, o, l, p) => {
6
+ for (var s = void 0, i = c.length - 1, d; i >= 0; i--)
7
+ (d = c[i]) && (s = d(o, l, s) || s);
8
+ return s && v(o, l, s), s;
9
9
  };
10
- let p = 0;
11
- const i = class i extends h {
10
+ let _ = 0;
11
+ const r = class r extends h {
12
12
  // allows use of elementInternals' API
13
13
  constructor() {
14
14
  super(), this.id = "", this.name = "", this.value = "", this.label = "", this.description = "", this.form = null, this.checked = !1, this.disabled = !1, this.noIcon = !1, this.inverted = !1, this.size = "md", this._internals = this.attachInternals();
15
15
  }
16
16
  // Generate a unique ID if one is not provided
17
17
  connectedCallback() {
18
- super.connectedCallback(), this.id || (this.id = `nys-toggle-${Date.now()}-${p++}`);
18
+ super.connectedCallback(), this.id || (this.id = `nys-toggle-${Date.now()}-${_++}`);
19
19
  }
20
- // Form Integration
20
+ /**
21
+ * Form Integration
22
+ * --------------------------------------------------------------------------
23
+ */
21
24
  // Update the internals whenever `checked` or `value` changes.
22
25
  updated(o) {
23
26
  (o.has("checked") || o.has("value")) && this._internals.setFormValue(this.checked ? this.value : null);
24
27
  }
25
- //Event Handlers
28
+ formResetCallback() {
29
+ this.checked = !1, this._internals.setFormValue(this.checked ? this.value : null), this.requestUpdate();
30
+ }
31
+ /**
32
+ * Event Handlers
33
+ * --------------------------------------------------------------------------
34
+ */
26
35
  _emitChangeEvent() {
27
36
  this.dispatchEvent(
28
37
  new CustomEvent("nys-change", {
@@ -41,27 +50,28 @@ const i = class i extends h {
41
50
  this.dispatchEvent(new Event("nys-blur"));
42
51
  }
43
52
  _handleChange(o) {
44
- const { checked: r } = o.target;
45
- this.checked = r, this._emitChangeEvent();
53
+ const { checked: l } = o.target;
54
+ this.checked = l, this._emitChangeEvent();
46
55
  }
47
56
  _handleKeyDown(o) {
48
57
  !this.disabled && (o.key === " " || o.key === "Enter") && (o.preventDefault(), this.checked = !this.checked, this._emitChangeEvent());
49
58
  }
50
59
  render() {
51
- return c`
60
+ return g`
52
61
  <label class="nys-toggle">
53
62
  <div class="nys-toggle__content">
54
63
  <div class="nys-toggle__toggle">
55
64
  <input
56
65
  type="checkbox"
57
- name="${d(this.name ? this.name : void 0)}"
66
+ name="${a(this.name ? this.name : void 0)}"
58
67
  .value=${this.value}
59
- form=${d(this.form || void 0)}
68
+ form=${a(this.form || void 0)}
60
69
  .checked=${this.checked}
61
70
  ?disabled=${this.disabled}
62
71
  role="switch"
63
72
  aria-checked="${this.checked ? "true" : "false"}"
64
73
  aria-disabled="${this.disabled ? "true" : "false"}"
74
+ aria-label="${this.label || "Toggle switch"}"
65
75
  @change=${this._handleChange}
66
76
  @focus=${this._handleFocus}
67
77
  @blur=${this._handleBlur}
@@ -69,7 +79,7 @@ const i = class i extends h {
69
79
  />
70
80
  <span class="slider">
71
81
  <div class="knob">
72
- ${this.noIcon ? "" : c`<nys-icon
82
+ ${this.noIcon ? "" : g`<nys-icon
73
83
  class="toggle-icon"
74
84
  name="${this.checked ? "check" : "close"}"
75
85
  size="2xl"
@@ -77,17 +87,22 @@ const i = class i extends h {
77
87
  </div>
78
88
  </span>
79
89
  </div>
80
- <div class="nys-toggle__text ${this.inverted ? "invert" : ""}">
81
- <div class="nys-toggle__label">${this.label}</div>
82
- <slot name="description">${this.description}</slot>
83
- </div>
90
+ ${this.label && g`<nys-label
91
+ label=${this.label}
92
+ description=${a(this.description || void 0)}
93
+ ?inverted=${this.inverted}
94
+ >
95
+ <slot name="description" slot="description"
96
+ >${this.description}</slot
97
+ >
98
+ </nys-label> `}
84
99
  </div>
85
100
  </label>
86
101
  `;
87
102
  }
88
103
  };
89
- i.styles = y(v), i.formAssociated = !0;
90
- let e = i;
104
+ r.styles = y(u), r.formAssociated = !0;
105
+ let e = r;
91
106
  n([
92
107
  t({ type: String, reflect: !0 })
93
108
  ], e.prototype, "id");
@@ -1 +1 @@
1
- {"version":3,"file":"nys-toggle.js","sources":["../src/nys-toggle.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-toggle.scss?inline\";\n\nlet toggleIdCounter = 0; // Counter for generating unique IDs\n\nexport class NysToggle extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: String, reflect: true }) name = \"\";\n @property({ type: String }) value = \"\";\n @property({ type: String }) label = \"\";\n @property({ type: String }) description = \"\";\n @property({ type: String, reflect: true }) form: string | null = null;\n @property({ type: Boolean, reflect: true }) checked = false;\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ type: Boolean }) noIcon = false;\n @property({ type: Boolean, reflect: true }) inverted = false;\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n private _internals: ElementInternals;\n\n // Lifecycle Updates\n static formAssociated = true; // allows use of elementInternals' API\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-toggle-${Date.now()}-${toggleIdCounter++}`;\n }\n }\n\n // Form Integration\n // Update the internals whenever `checked` or `value` changes.\n updated(changedProperties: Map<string, any>) {\n if (changedProperties.has(\"checked\") || changedProperties.has(\"value\")) {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n }\n\n //Event Handlers\n private _emitChangeEvent() {\n this.dispatchEvent(\n new CustomEvent(\"nys-change\", {\n detail: { id: this.id, checked: this.checked },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n // Handle focus event\n private _handleFocus() {\n this.dispatchEvent(new Event(\"nys-focus\"));\n }\n\n // Handle blur event\n private _handleBlur() {\n this.dispatchEvent(new Event(\"nys-blur\"));\n }\n\n private _handleChange(e: Event) {\n const { checked } = e.target as HTMLInputElement;\n this.checked = checked;\n this._emitChangeEvent();\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n if (!this.disabled && (event.key === \" \" || event.key === \"Enter\")) {\n event.preventDefault();\n\n // Manually toggle the checked state\n this.checked = !this.checked;\n\n /* Dispatch a custom event for the toggle action:\n * allows bubbling up so if developers wish to use the toggle state info.\n */\n this._emitChangeEvent();\n }\n }\n\n render() {\n return html`\n <label class=\"nys-toggle\">\n <div class=\"nys-toggle__content\">\n <div class=\"nys-toggle__toggle\">\n <input\n type=\"checkbox\"\n name=\"${ifDefined(this.name ? this.name : undefined)}\"\n .value=${this.value}\n form=${ifDefined(this.form || undefined)}\n .checked=${this.checked}\n ?disabled=${this.disabled}\n role=\"switch\"\n aria-checked=\"${this.checked ? \"true\" : \"false\"}\"\n aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n @change=${this._handleChange}\n @focus=${this._handleFocus}\n @blur=${this._handleBlur}\n @keydown=${this._handleKeyDown}\n />\n <span class=\"slider\">\n <div class=\"knob\">\n ${this.noIcon\n ? \"\"\n : html`<nys-icon\n class=\"toggle-icon\"\n name=\"${this.checked ? \"check\" : \"close\"}\"\n size=\"2xl\"\n ></nys-icon>`}\n </div>\n </span>\n </div>\n <div class=\"nys-toggle__text ${this.inverted ? \"invert\" : \"\"}\">\n <div class=\"nys-toggle__label\">${this.label}</div>\n <slot name=\"description\">${this.description}</slot>\n </div>\n </div>\n </label>\n `;\n }\n}\n\nif (!customElements.get(\"nys-toggle\")) {\n customElements.define(\"nys-toggle\", NysToggle);\n}\n"],"names":["toggleIdCounter","_NysToggle","LitElement","changedProperties","e","checked","event","html","ifDefined","unsafeCSS","styles","NysToggle","__decorateClass","property"],"mappings":"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"}
1
+ {"version":3,"file":"nys-toggle.js","sources":["../src/nys-toggle.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-toggle.scss?inline\";\n\nlet toggleIdCounter = 0;\n\n/**\n * A toggle switch for binary settings with immediate effect. Form-associated via ElementInternals.\n *\n * Use when changing a setting takes effect immediately (e.g., dark mode, notifications).\n * For binary choices in forms that submit later, use `nys-checkbox` instead.\n *\n * @summary Toggle switch for binary settings with immediate effect.\n * @element nys-toggle\n *\n * @slot description - Custom HTML description content.\n *\n * @fires nys-change - Fired when toggle state changes. Detail: `{id, checked}`.\n * @fires nys-focus - Fired when toggle gains focus.\n * @fires nys-blur - Fired when toggle loses focus.\n *\n * @example Basic toggle\n * ```html\n * <nys-toggle label=\"Enable notifications\" name=\"notifications\"></nys-toggle>\n * ```\n *\n * @example Dark mode toggle\n * ```html\n * <nys-toggle label=\"Dark mode\" description=\"Adjust display for low light\" checked></nys-toggle>\n * ```\n */\n\nexport class NysToggle extends LitElement {\n static styles = unsafeCSS(styles);\n\n /** Unique identifier. Auto-generated if not provided. */\n @property({ type: String, reflect: true }) id = \"\";\n\n /** Name for form submission. */\n @property({ type: String, reflect: true }) name = \"\";\n\n /** Value submitted when toggle is on. */\n @property({ type: String }) value = \"\";\n\n /** Visible label text. */\n @property({ type: String }) label = \"\";\n\n /** Helper text below label. Use slot for custom HTML. */\n @property({ type: String }) description = \"\";\n\n /** Form `id` to associate with. */\n @property({ type: String, reflect: true }) form: string | null = null;\n\n /** Whether toggle is on. */\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /** Prevents interaction. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Hides check/close icon inside toggle knob. */\n @property({ type: Boolean }) noIcon = false;\n\n /** Adjusts colors for dark backgrounds. */\n @property({ type: Boolean, reflect: true }) inverted = false;\n\n /**\n * Toggle size: `sm` or `md` (default).\n * @default \"md\"\n */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n private _internals: ElementInternals;\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n\n static formAssociated = true; // allows use of elementInternals' API\n\n constructor() {\n super();\n this._internals = this.attachInternals();\n }\n\n // Generate a unique ID if one is not provided\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-toggle-${Date.now()}-${toggleIdCounter++}`;\n }\n }\n\n /**\n * Form Integration\n * --------------------------------------------------------------------------\n */\n\n // Update the internals whenever `checked` or `value` changes.\n updated(changedProperties: Map<string, any>) {\n if (changedProperties.has(\"checked\") || changedProperties.has(\"value\")) {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n }\n\n public formResetCallback() {\n this.checked = false;\n\n this._internals.setFormValue(this.checked ? this.value : null);\n\n // Re-render UI\n this.requestUpdate();\n }\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n private _emitChangeEvent() {\n this.dispatchEvent(\n new CustomEvent(\"nys-change\", {\n detail: { id: this.id, checked: this.checked },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n // Handle focus event\n private _handleFocus() {\n this.dispatchEvent(new Event(\"nys-focus\"));\n }\n\n // Handle blur event\n private _handleBlur() {\n this.dispatchEvent(new Event(\"nys-blur\"));\n }\n\n private _handleChange(e: Event) {\n const { checked } = e.target as HTMLInputElement;\n this.checked = checked;\n this._emitChangeEvent();\n }\n\n private _handleKeyDown(event: KeyboardEvent) {\n if (!this.disabled && (event.key === \" \" || event.key === \"Enter\")) {\n event.preventDefault();\n\n // Manually toggle the checked state\n this.checked = !this.checked;\n\n this._emitChangeEvent();\n }\n }\n\n render() {\n return html`\n <label class=\"nys-toggle\">\n <div class=\"nys-toggle__content\">\n <div class=\"nys-toggle__toggle\">\n <input\n type=\"checkbox\"\n name=\"${ifDefined(this.name ? this.name : undefined)}\"\n .value=${this.value}\n form=${ifDefined(this.form || undefined)}\n .checked=${this.checked}\n ?disabled=${this.disabled}\n role=\"switch\"\n aria-checked=\"${this.checked ? \"true\" : \"false\"}\"\n aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n aria-label=\"${this.label || \"Toggle switch\"}\"\n @change=${this._handleChange}\n @focus=${this._handleFocus}\n @blur=${this._handleBlur}\n @keydown=${this._handleKeyDown}\n />\n <span class=\"slider\">\n <div class=\"knob\">\n ${this.noIcon\n ? \"\"\n : html`<nys-icon\n class=\"toggle-icon\"\n name=\"${this.checked ? \"check\" : \"close\"}\"\n size=\"2xl\"\n ></nys-icon>`}\n </div>\n </span>\n </div>\n ${this.label &&\n html`<nys-label\n label=${this.label}\n description=${ifDefined(this.description || undefined)}\n ?inverted=${this.inverted}\n >\n <slot name=\"description\" slot=\"description\"\n >${this.description}</slot\n >\n </nys-label> `}\n </div>\n </label>\n `;\n }\n}\n\nif (!customElements.get(\"nys-toggle\")) {\n customElements.define(\"nys-toggle\", NysToggle);\n}\n"],"names":["toggleIdCounter","_NysToggle","LitElement","changedProperties","e","checked","event","html","ifDefined","unsafeCSS","styles","NysToggle","__decorateClass","property"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nysds/nys-toggle",
3
- "version": "1.12.0",
3
+ "version": "1.13.1",
4
4
  "description": "The Toggle component from the NYS Design System.",
5
5
  "module": "dist/nys-toggle.js",
6
6
  "exports": {
@@ -22,7 +22,7 @@
22
22
  "lit-analyze": "lit-analyzer '**/*.ts'"
23
23
  },
24
24
  "dependencies": {
25
- "@nysds/nys-icon": "^1.12.0"
25
+ "@nysds/nys-icon": "^1.13.1"
26
26
  },
27
27
  "devDependencies": {
28
28
  "lit": "^3.3.1",