@nysds/nys-toggle 1.13.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,21 +1,21 @@
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
20
  /**
21
21
  * Form Integration
@@ -25,6 +25,9 @@ const i = class i extends h {
25
25
  updated(o) {
26
26
  (o.has("checked") || o.has("value")) && this._internals.setFormValue(this.checked ? this.value : null);
27
27
  }
28
+ formResetCallback() {
29
+ this.checked = !1, this._internals.setFormValue(this.checked ? this.value : null), this.requestUpdate();
30
+ }
28
31
  /**
29
32
  * Event Handlers
30
33
  * --------------------------------------------------------------------------
@@ -47,27 +50,28 @@ const i = class i extends h {
47
50
  this.dispatchEvent(new Event("nys-blur"));
48
51
  }
49
52
  _handleChange(o) {
50
- const { checked: r } = o.target;
51
- this.checked = r, this._emitChangeEvent();
53
+ const { checked: l } = o.target;
54
+ this.checked = l, this._emitChangeEvent();
52
55
  }
53
56
  _handleKeyDown(o) {
54
57
  !this.disabled && (o.key === " " || o.key === "Enter") && (o.preventDefault(), this.checked = !this.checked, this._emitChangeEvent());
55
58
  }
56
59
  render() {
57
- return c`
60
+ return g`
58
61
  <label class="nys-toggle">
59
62
  <div class="nys-toggle__content">
60
63
  <div class="nys-toggle__toggle">
61
64
  <input
62
65
  type="checkbox"
63
- name="${d(this.name ? this.name : void 0)}"
66
+ name="${a(this.name ? this.name : void 0)}"
64
67
  .value=${this.value}
65
- form=${d(this.form || void 0)}
68
+ form=${a(this.form || void 0)}
66
69
  .checked=${this.checked}
67
70
  ?disabled=${this.disabled}
68
71
  role="switch"
69
72
  aria-checked="${this.checked ? "true" : "false"}"
70
73
  aria-disabled="${this.disabled ? "true" : "false"}"
74
+ aria-label="${this.label || "Toggle switch"}"
71
75
  @change=${this._handleChange}
72
76
  @focus=${this._handleFocus}
73
77
  @blur=${this._handleBlur}
@@ -75,7 +79,7 @@ const i = class i extends h {
75
79
  />
76
80
  <span class="slider">
77
81
  <div class="knob">
78
- ${this.noIcon ? "" : c`<nys-icon
82
+ ${this.noIcon ? "" : g`<nys-icon
79
83
  class="toggle-icon"
80
84
  name="${this.checked ? "check" : "close"}"
81
85
  size="2xl"
@@ -83,17 +87,22 @@ const i = class i extends h {
83
87
  </div>
84
88
  </span>
85
89
  </div>
86
- <div class="nys-toggle__text ${this.inverted ? "invert" : ""}">
87
- <div class="nys-toggle__label">${this.label}</div>
88
- <slot name="description">${this.description}</slot>
89
- </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> `}
90
99
  </div>
91
100
  </label>
92
101
  `;
93
102
  }
94
103
  };
95
- i.styles = y(v), i.formAssociated = !0;
96
- let e = i;
104
+ r.styles = y(u), r.formAssociated = !0;
105
+ let e = r;
97
106
  n([
98
107
  t({ type: String, reflect: !0 })
99
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;\n\n/**\n * `<nys-toggle>` is a form-associated toggle switch with label, description,\n * size variants, inverted styles, and optional icons. Supports keyboard\n * interaction and integrates with forms via ElementInternals.\n *\n * @slot description - Optional slot to provide additional description below the label.\n *\n * @fires nys-change - Fired when toggle changes state. Detail: `{ id, checked }`.\n * @fires nys-focus - Fired when toggle receives focus.\n * @fires nys-blur - Fired when toggle loses focus.\n */\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 /**\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 /**\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 @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":";;;;;;;;;AAMA,IAAIA,IAAkB;AA4Bf,MAAMC,IAAN,MAAMA,UAAkBC,EAAW;AAAA;AAAA,EAgDxC,cAAc;AACZ,UAAA,GA7CyC,KAAA,KAAK,IAGL,KAAA,OAAO,IAGtB,KAAA,QAAQ,IAGR,KAAA,QAAQ,IAGR,KAAA,cAAc,IAGC,KAAA,OAAsB,MAGrB,KAAA,UAAU,IAGV,KAAA,WAAW,IAG1B,KAAA,SAAS,IAGM,KAAA,WAAW,IAMZ,KAAA,OAAoB,MAa7D,KAAK,aAAa,KAAK,gBAAA;AAAA,EACzB;AAAA;AAAA,EAGA,oBAAoB;AAClB,UAAM,kBAAA,GACD,KAAK,OACR,KAAK,KAAK,cAAc,KAAK,KAAK,IAAIF,GAAiB;AAAA,EAE3D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQA,QAAQG,GAAqC;AAC3C,KAAIA,EAAkB,IAAI,SAAS,KAAKA,EAAkB,IAAI,OAAO,MACnE,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI;AAAA,EAEjE;AAAA,EAEO,oBAAoB;AACzB,SAAK,UAAU,IAEf,KAAK,WAAW,aAAa,KAAK,UAAU,KAAK,QAAQ,IAAI,GAG7D,KAAK,cAAA;AAAA,EACP;AAAA;AAAA;AAAA;AAAA;AAAA,EAOQ,mBAAmB;AACzB,SAAK;AAAA,MACH,IAAI,YAAY,cAAc;AAAA,QAC5B,QAAQ,EAAE,IAAI,KAAK,IAAI,SAAS,KAAK,QAAA;AAAA,QACrC,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EAEL;AAAA;AAAA,EAGQ,eAAe;AACrB,SAAK,cAAc,IAAI,MAAM,WAAW,CAAC;AAAA,EAC3C;AAAA;AAAA,EAGQ,cAAc;AACpB,SAAK,cAAc,IAAI,MAAM,UAAU,CAAC;AAAA,EAC1C;AAAA,EAEQ,cAAcC,GAAU;AAC9B,UAAM,EAAE,SAAAC,MAAYD,EAAE;AACtB,SAAK,UAAUC,GACf,KAAK,iBAAA;AAAA,EACP;AAAA,EAEQ,eAAeC,GAAsB;AAC3C,IAAI,CAAC,KAAK,aAAaA,EAAM,QAAQ,OAAOA,EAAM,QAAQ,aACxDA,EAAM,eAAA,GAGN,KAAK,UAAU,CAAC,KAAK,SAErB,KAAK,iBAAA;AAAA,EAET;AAAA,EAEA,SAAS;AACP,WAAOC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMWC,EAAU,KAAK,OAAO,KAAK,OAAO,MAAS,CAAC;AAAA,uBAC3C,KAAK,KAAK;AAAA,qBACZA,EAAU,KAAK,QAAQ,MAAS,CAAC;AAAA,yBAC7B,KAAK,OAAO;AAAA,0BACX,KAAK,QAAQ;AAAA;AAAA,8BAET,KAAK,UAAU,SAAS,OAAO;AAAA,+BAC9B,KAAK,WAAW,SAAS,OAAO;AAAA,4BACnC,KAAK,SAAS,eAAe;AAAA,wBACjC,KAAK,aAAa;AAAA,uBACnB,KAAK,YAAY;AAAA,sBAClB,KAAK,WAAW;AAAA,yBACb,KAAK,cAAc;AAAA;AAAA;AAAA;AAAA,kBAI1B,KAAK,SACH,KACAD;AAAA;AAAA,8BAEU,KAAK,UAAU,UAAU,OAAO;AAAA;AAAA,iCAE7B;AAAA;AAAA;AAAA;AAAA,YAIrB,KAAK,SACPA;AAAA,oBACU,KAAK,KAAK;AAAA,0BACJC,EAAU,KAAK,eAAe,MAAS,CAAC;AAAA,wBAC1C,KAAK,QAAQ;AAAA;AAAA;AAAA,iBAGpB,KAAK,WAAW;AAAA;AAAA,wBAET;AAAA;AAAA;AAAA;AAAA,EAItB;AACF;AA1KEP,EAAO,SAASQ,EAAUC,CAAM,GA6ChCT,EAAO,iBAAiB;AA9CnB,IAAMU,IAANV;AAIsCW,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAJ9BF,EAIgC,WAAA,IAAA;AAGAC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAP9BF,EAOgC,WAAA,MAAA;AAGfC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAVfF,EAUiB,WAAA,OAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAbfF,EAaiB,WAAA,OAAA;AAGAC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhBfF,EAgBiB,WAAA,aAAA;AAGeC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAnB9BF,EAmBgC,WAAA,MAAA;AAGCC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtB/BF,EAsBiC,WAAA,SAAA;AAGAC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAzB/BF,EAyBiC,WAAA,UAAA;AAGfC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA5BhBF,EA4BkB,WAAA,QAAA;AAGeC,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA/B/BF,EA+BiC,WAAA,UAAA;AAMDC,EAAA;AAAA,EAA1CC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GArC9BF,EAqCgC,WAAA,MAAA;AAwIxC,eAAe,IAAI,YAAY,KAClC,eAAe,OAAO,cAAcA,CAAS;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nysds/nys-toggle",
3
- "version": "1.13.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.13.0"
25
+ "@nysds/nys-icon": "^1.13.1"
26
26
  },
27
27
  "devDependencies": {
28
28
  "lit": "^3.3.1",