@nysds/nys-checkbox 1.13.1 → 1.14.0

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.
Files changed (7) hide show
  1. package/dist/index.d.ts +2 -0
  2. package/dist/nys-checkbox.d.ts +116 -0
  3. package/dist/nys-checkbox.figma.d.ts +1 -0
  4. package/dist/nys-checkbox.js +342 -214
  5. package/dist/nys-checkbox.js.map +1 -1
  6. package/dist/nys-checkboxgroup.d.ts +94 -0
  7. package/package.json +5 -5
package/dist/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from "./nys-checkbox";
2
+ export * from "./nys-checkboxgroup";
package/dist/nys-checkbox.d.ts ADDED
@@ -0,0 +1,116 @@
1
+ import { LitElement } from "lit";
2
+ import "./nys-checkboxgroup";
3
+ /**
4
+ * A checkbox input for binary choices or multi-select lists. Can be used standalone or in a `nys-checkboxgroup`.
5
+ * Form-associated with validation via ElementInternals.
6
+ *
7
+ * Use for binary decisions (agree/disagree) or selecting multiple options from a list.
8
+ * For single selection from 2-6 options, use `nys-radiobutton`. For immediate state changes, use `nys-toggle`.
9
+ *
10
+ * @summary Checkbox for binary choices or multi-select options.
11
+ * @element nys-checkbox
12
+ *
13
+ * @slot description - Custom HTML description content.
14
+ *
15
+ * @fires nys-change - Fired when checked state changes. Detail: `{id, checked, name, value}`.
16
+ * @fires nys-focus - Fired when checkbox gains focus.
17
+ * @fires nys-blur - Fired when checkbox loses focus.
18
+ *
19
+ * @example Single checkbox
20
+ * ```html
21
+ * <nys-checkbox label="I agree to the terms" name="terms" required></nys-checkbox>
22
+ * ```
23
+ *
24
+ * @example Checkbox group
25
+ * ```html
26
+ * <nys-checkboxgroup label="Select landmarks">
27
+ * <nys-checkbox name="landmarks" value="adirondacks" label="Adirondacks"></nys-checkbox>
28
+ * <nys-checkbox name="landmarks" value="niagara" label="Niagara Falls"></nys-checkbox>
29
+ * </nys-checkboxgroup>
30
+ * ```
31
+ */
32
+ export declare class NysCheckbox extends LitElement {
33
+ static styles: import("lit").CSSResult;
34
+ /** Whether checkbox is checked. */
35
+ checked: boolean;
36
+ /** Prevents interaction. */
37
+ disabled: boolean;
38
+ /** Marks as required. Validates that checkbox is checked. */
39
+ required: boolean;
40
+ /** Visible label text. Required for accessibility. */
41
+ label: string;
42
+ /** Helper text below label. Use slot for custom HTML. */
43
+ description: string;
44
+ /** Unique identifier. Auto-generated if not provided. */
45
+ id: string;
46
+ /** Name for form submission. Use same name for grouped checkboxes. */
47
+ name: string;
48
+ /** Value submitted when checked. */
49
+ value: string;
50
+ /** Form `id` to associate with when checkbox is outside form element. */
51
+ form: string | null;
52
+ /** Shows error message when true. */
53
+ showError: boolean;
54
+ /** Error message text. Shown only when `showError` is true. */
55
+ errorMessage: string;
56
+ /** Internal: Set by parent checkboxgroup. Do not set manually. */
57
+ groupExist: boolean;
58
+ /** Renders as tile with larger clickable area. Apply to group for consistency. */
59
+ tile: boolean;
60
+ /** Adjusts colors for dark backgrounds. */
61
+ inverted: boolean;
62
+ /** Tooltip text shown on hover/focus of info icon. */
63
+ tooltip: string;
64
+ /**
65
+ * Checkbox size: `sm` (24px) or `md` (32px, default).
66
+ * @default "md"
67
+ */
68
+ size: "sm" | "md";
69
+ other: boolean;
70
+ showOtherError: boolean;
71
+ private isMobile;
72
+ private _hasUserInteracted;
73
+ getInputElement(): Promise<HTMLInputElement | null>;
74
+ private _internals;
75
+ /**
76
+ * Lifecycle methods
77
+ * --------------------------------------------------------------------------
78
+ */
79
+ static formAssociated: boolean;
80
+ constructor();
81
+ connectedCallback(): void;
82
+ disconnectedCallback(): void;
83
+ firstUpdated(): void;
84
+ /**
85
+ * Form Integration
86
+ * --------------------------------------------------------------------------
87
+ */
88
+ private _setValue;
89
+ private _manageRequire;
90
+ private _setValidityMessage;
91
+ private _validate;
92
+ formResetCallback(): void;
93
+ /**
94
+ * Functions
95
+ * --------------------------------------------------------------------------
96
+ */
97
+ checkValidity(): boolean;
98
+ private _handleInvalid;
99
+ private _manageLabelClick;
100
+ get _hasDescription(): boolean;
101
+ private _handleResize;
102
+ /**
103
+ * Event Handlers
104
+ * --------------------------------------------------------------------------
105
+ */
106
+ private _emitChangeEvent;
107
+ private _handleChange;
108
+ private _handleFocus;
109
+ private _handleBlur;
110
+ private _handleTextInputBlur;
111
+ private _handleKeydown;
112
+ private _handleTextInput;
113
+ private _validateOtherAndEmitError;
114
+ private _dispatchClearError;
115
+ render(): import("lit-html").TemplateResult<1>;
116
+ }
package/dist/nys-checkbox.figma.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/nys-checkbox.js CHANGED
@@ -1,24 +1,24 @@
1
- import { LitElement as x, unsafeCSS as v, html as b } from "lit";
2
- import { property as t, state as g } from "lit/decorators.js";
3
- import { ifDefined as k } from "lit/directives/if-defined.js";
4
- const f = ':host{--_nys-checkbox-size: var(--nys-size-400, 32px);--_nys-checkbox-border-radius: var(--nys-radius-md, 4px);--_nys-checkbox-border-width: var(--nys-border-width-md, 2px);--_nys-checkbox-outline-color: var(--nys-color-focus, #004dd1);--_nys-checkbox-outline-width: var(--nys-border-width-md, 2px);--_nys-checkbox-outline-offset: var(--nys-space-2px, 2px);--_nys-checkbox-gap: var(--nys-space-150, 12px);--_nys-checkboxgroup-gap: var(--nys-space-200, 16px);--_nys-checkbox-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-checkbox-font-size: var(--nys-font-size-ui-md, 16px);--_nys-checkbox-font-weight: var(--nys-font-weight-regular, 400);--_nys-checkbox-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-checkbox-color: var( --nys-color-ink, var(--nys-color-neutral-900, #1b1b1b) );--_nys-checkbox-background-color: var(--nys-color-ink-reverse, #ffffff);--_nys-checkbox-border-color: var(--nys-color-neutral-600, #62666a);--_nys-checkbox-background-color--hover: var( --nys-color-neutral-50, #ededed );--_nys-checkbox-border-color--hover: var(--nys-color-ink, #1b1b1b);--_nys-checkbox-background-color--active: var( --nys-color-neutral-100, #d0d0ce );--_nys-checkbox-border-color--active: var(--nys-color-ink, #1b1b1b);--_nys-checkbox-background-color--checked: var(--nys-color-theme, #154973);--_nys-checkbox-border-color--checked: var(--nys-color-theme, #154973);--_nys-checkbox-background-color--checked--hover: var( --nys-color-theme-strong, #0e324f );--_nys-checkbox-border-color--checked--hover: var( --nys-color-theme-strong, #0e324f );--_nys-checkbox-background-color--checked--active: var( --nys-color-theme-stronger, #081b2b );--_nys-checkbox-border-color--checked--active: var( --nys-color-theme-stronger, #081b2b );--_nys-checkbox-background-color--disabled: var( --nys-color-ink-reverse, #f0f0f0 );--_nys-checkbox-border-color--disabled: var( --nys-color-neutral-400, #757575 );--_nys-checkbox-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-checkbox-background-color--checked--disabled: var( --nys-color-neutral-100, #d0d0ce );--_nys-checkbox-border-color--checked--disabled: var( --nys-color-neutral-100, #d0d0ce )}:host([size=sm]){--_nys-checkbox-size: var(--nys-size-300, 24px);--_nys-checkbox-border-radius: var(--nys-radius-sm, 2px);--_nys-checkboxgroup-gap: var(--nys-space-100, 8px);--_nys-checkbox-gap: var(--nys-space-100, 8px)}:host([size=md]){--_nys-checkbox-size: var(--nys-size-400, 32px);--_nys-checkbox-border-radius: var(--nys-radius-md, 4px)}:host([tile]){--_nys-checkbox-border-width--tile: var(--nys-border-width-sm, 1px);--_nys-checkbox-border-radius--tile: var(--nys-radius-md, 4px);--_nys-checkbox-border-color--tile: var(--nys-color-neutral-100, #d0d0ce);--_nys-checkbox-background-color--tile: var( --nys-color-ink-reverse, #ffffff );--_nys-checkbox-padding--x--tile: var(--nys-space-250, 20px);--_nys-checkbox-padding--y--tile: var(--nys-space-200, 16px);--_nys-checkbox-border-color--tile--hover: var( --nys-color-neutral-700, #4a4d4f );--_nys-checkbox-background-color--tile--hover: var( --nys-color-ink-reverse, #ffffff );--_nys-checkbox-border-color--tile--active: var( --nys-color-neutral-900, #1b1b1b );--_nys-checkbox-background-color--tile--active: var( --nys-color-ink-reverse, #ffffff );--_nys-checkbox-border-color--tile--checked: var( --nys-color-theme-mid, #457aa5 );--_nys-checkbox-background-color--tile--checked: var( --nys-color-theme-faint, #f7fafd );--_nys-checkbox-background-color--tile--disabled: var( --nys-color-ink-reverse, #f0f0f0 );--_nys-checkbox-border-color--tile--disabled: var( --nys-color-neutral-100, #d0d0ce )}:host([tile][size=sm]){--_nys-checkbox-padding--x--tile: var(--nys-space-200, 16px);--_nys-checkbox-padding--y--tile: var(--nys-space-150, 12px)}:host([tile][showError]){--_nys-checkbox-border-color--tile: var(--nys-color-danger, #b52c2c);--_nys-checkbox-border-color--tile--hover: var(--nys-color-danger, #b52c2c);--_nys-checkbox-border-color--tile--active: var( --nys-color-danger, #b52c2c );--_nys-checkbox-border-color--tile--checked: var( --nys-color-danger, #b52c2c )}#single-error-message{--_nys-errormessage-margin-top: var(--nys-space-50, 4px)}.nys-checkboxgroup{display:flex;flex-direction:column;gap:var(--nys-space-200, 16px);font-family:var(--_nys-checkbox-font-family);font-size:var(--_nys-checkbox-font-size);line-height:var(--_nys-checkbox-line-height)}.nys-checkboxgroup__content{display:flex;flex-direction:column;gap:var(--_nys-checkboxgroup-gap)}.nys-checkbox{display:flex;font-family:var(--_nys-checkbox-font-family);font-size:var(--_nys-checkbox-font-size);line-height:var(--_nys-checkbox-line-height);border-radius:var(--_nys-checkbox-border-radius--tile);border:var(--_nys-checkbox-border-width--tile) solid var(--_nys-checkbox-border-color--tile);background:var(--_nys-checkbox-background-color--tile);padding:var(--_nys-checkbox-padding--y--tile) var(--_nys-checkbox-padding--x--tile);gap:var(--_nys-checkbox-gap)}.nys-checkbox__checkboxwrapper{position:relative;display:flex;justify-content:center;align-items:center;max-height:var(--_nys-checkbox-size)}.nys-checkbox__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;color:#fff}.nys-checkbox__checkbox{appearance:none;background-repeat:no-repeat;background-position:center;width:var(--_nys-checkbox-size);min-width:var(--_nys-checkbox-size);min-height:var(--_nys-checkbox-size);height:var(--_nys-checkbox-size);max-width:var(--_nys-checkbox-size);max-height:var(--_nys-checkbox-size);border:solid var(--_nys-checkbox-border-width) var(--_nys-checkbox-border-color);background-color:var(--_nys-checkbox-background-color);border-radius:var(--_nys-checkbox-border-radius);outline-offset:var(--_nys-checkbox-outline-offset);outline:none}.nys-checkbox:hover,.nys-checkbox:hover *{cursor:pointer}.nys-checkbox__checkbox:not(:disabled):checked{background-color:var(--_nys-checkbox-background-color--checked);border-color:var(--_nys-checkbox-border-color--checked)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:not(:disabled):checked){border-color:var(--_nys-checkbox-border-color--tile--checked);background-color:var(--_nys-checkbox-background-color--tile--checked)}.nys-checkbox__checkbox:disabled:checked{background-color:var(--_nys-checkbox-background-color--checked--disabled);border-color:var(--_nys-checkbox-border-color--checked--disabled)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:disabled:checked){border-color:var(--_nys-checkbox-border-color--tile--disabled);background-color:var(--_nys-checkbox-background-color--tile--disabled)}.nys-checkbox__checkbox:disabled{background-color:var(--_nys-checkbox-background-color--disabled);border-color:var(--_nys-checkbox-border-color--disabled);cursor:not-allowed}.nys-checkbox:has(.nys-checkbox__checkbox:disabled) *{color:var(--_nys-checkbox-color--disabled);cursor:not-allowed;--_nys-label-cursor: not-allowed;--_nys-label-color: var(--_nys-checkbox-color--disabled)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:disabled){background-color:var(--_nys-checkbox-background-color--disabled);border-color:var(--_nys-checkbox-border-color--disabled);cursor:not-allowed}.nys-checkbox__checkbox:hover:not(:disabled):not(:checked){background-color:var(--_nys-checkbox-background-color--hover);border-color:var(--_nys-checkbox-border-color--hover)}:host([tile]) .nys-checkbox:hover:has(.nys-checkbox__checkbox:not(:disabled):not(:checked)){border-color:var(--_nys-checkbox-border-color--tile--hover);background-color:var(--_nys-checkbox-background-color--tile--hover);outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-border-color--tile--hover)}.nys-checkbox__checkbox:hover:not(:disabled):checked{border-color:var(--_nys-checkbox-border-color--checked--hover);background-color:var(--_nys-checkbox-background-color--checked--hover)}:host([tile]) .nys-checkbox:hover:has(.nys-checkbox__checkbox:not(:disabled):checked){outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-border-color--tile--checked)}.nys-checkbox__checkbox:active:not(:disabled):not(:checked){background-color:var(--_nys-checkbox-background-color--active);border-color:var(--_nys-checkbox-border-color--active)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:active:not(:disabled):not(:checked)){border-color:var(--_nys-checkbox-border-color--tile--active);background-color:var(--_nys-checkbox-background-color--tile--active);outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-border-color--tile--active)}.nys-checkbox__checkbox:active:not(:disabled):checked{border-color:var(--_nys-checkbox-border-color--checked--active);background-color:var(--_nys-checkbox-background-color--checked--active)}:host(:not([tile])) .nys-checkbox__checkbox:focus{outline:solid var(--_nys-checkbox-outline-width) var(--_nys-checkbox-outline-color)}:host([tile]) .nys-checkbox:has(*:focus){outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-outline-color)!important;border-color:var(--_nys-checkbox-outline-color)!important}:host(:not([tile])) .nys-checkbox>nys-label{--_nys-label-font-weight: var(--_nys-checkbox-font-weight)}:host([tile]) .nys-checkbox>nys-label{--_nys-description-font-style: normal}.nys-checkbox__required{color:var(--nys-color-danger, #b52c2c)}.nys-checkbox__requiredwrapper{display:flex;gap:3px}fieldset{all:unset;display:contents}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}';
5
- var m = Object.defineProperty, l = (d, e, o, r) => {
6
- for (var s = void 0, h = d.length - 1, a; h >= 0; h--)
7
- (a = d[h]) && (s = a(e, o, s) || s);
8
- return s && m(e, o, s), s;
1
+ import { LitElement as x, unsafeCSS as v, html as d } from "lit";
2
+ import { property as s, state as _ } from "lit/decorators.js";
3
+ import { ifDefined as y } from "lit/directives/if-defined.js";
4
+ const f = ':host{--_nys-checkbox-size: var(--nys-size-400, 32px);--_nys-checkbox-border-radius: var(--nys-radius-md, 4px);--_nys-checkbox-border-width: var(--nys-border-width-md, 2px);--_nys-checkbox-outline-color: var(--nys-color-focus, #004dd1);--_nys-checkbox-outline-width: var(--nys-border-width-md, 2px);--_nys-checkbox-outline-offset: var(--nys-space-2px, 2px);--_nys-checkbox-gap: var(--nys-space-150, 12px);--_nys-checkboxgroup-gap: var(--nys-space-200, 16px);--_nys-checkbox-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-checkbox-font-size: var(--nys-font-size-ui-md, 16px);--_nys-checkbox-font-weight: var(--nys-font-weight-regular, 400);--_nys-checkbox-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-checkbox-color: var( --nys-color-ink, var(--nys-color-neutral-900, #1b1b1b) );--_nys-checkbox-background-color: var(--nys-color-ink-reverse, #ffffff);--_nys-checkbox-border-color: var(--nys-color-neutral-600, #62666a);--_nys-checkbox-background-color--hover: var(--nys-color-neutral-50, #ededed);--_nys-checkbox-border-color--hover: var(--nys-color-ink, #1b1b1b);--_nys-checkbox-background-color--active: var( --nys-color-neutral-100, #d0d0ce );--_nys-checkbox-border-color--active: var(--nys-color-ink, #1b1b1b);--_nys-checkbox-background-color--checked: var(--nys-color-theme, #154973);--_nys-checkbox-border-color--checked: var(--nys-color-theme, #154973);--_nys-checkbox-background-color--checked--hover: var( --nys-color-theme-strong, #0e324f );--_nys-checkbox-border-color--checked--hover: var( --nys-color-theme-strong, #0e324f );--_nys-checkbox-background-color--checked--active: var( --nys-color-theme-stronger, #081b2b );--_nys-checkbox-border-color--checked--active: var( --nys-color-theme-stronger, #081b2b );--_nys-checkbox-background-color--disabled: var( --nys-color-ink-reverse, #f0f0f0 );--_nys-checkbox-border-color--disabled: var(--nys-color-neutral-400, #757575);--_nys-checkbox-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-checkbox-background-color--checked--disabled: var( --nys-color-neutral-100, #d0d0ce );--_nys-checkbox-border-color--checked--disabled: var( --nys-color-neutral-100, #d0d0ce )}:host([size=sm]){--_nys-checkbox-size: var(--nys-size-300, 24px);--_nys-checkbox-border-radius: var(--nys-radius-sm, 2px);--_nys-checkboxgroup-gap: var(--nys-space-100, 8px);--_nys-checkbox-gap: var(--nys-space-100, 8px)}:host([size=md]){--_nys-checkbox-size: var(--nys-size-400, 32px);--_nys-checkbox-border-radius: var(--nys-radius-md, 4px)}:host([tile]){--_nys-checkbox-border-width--tile: var(--nys-border-width-sm, 1px);--_nys-checkbox-border-radius--tile: var(--nys-radius-md, 4px);--_nys-checkbox-border-color--tile: var(--nys-color-neutral-100, #d0d0ce);--_nys-checkbox-background-color--tile: var(--nys-color-ink-reverse, #ffffff);--_nys-checkbox-padding--x--tile: var(--nys-space-250, 20px);--_nys-checkbox-padding--y--tile: var(--nys-space-200, 16px);--_nys-checkbox-border-color--tile--hover: var( --nys-color-neutral-700, #4a4d4f );--_nys-checkbox-background-color--tile--hover: var( --nys-color-ink-reverse, #ffffff );--_nys-checkbox-border-color--tile--active: var( --nys-color-neutral-900, #1b1b1b );--_nys-checkbox-background-color--tile--active: var( --nys-color-ink-reverse, #ffffff );--_nys-checkbox-border-color--tile--checked: var( --nys-color-theme-mid, #457aa5 );--_nys-checkbox-background-color--tile--checked: var( --nys-color-theme-faint, #f7fafd );--_nys-checkbox-background-color--tile--disabled: var( --nys-color-ink-reverse, #f0f0f0 );--_nys-checkbox-border-color--tile--disabled: var( --nys-color-neutral-100, #d0d0ce )}:host([tile][size=sm]){--_nys-checkbox-padding--x--tile: var(--nys-space-200, 16px);--_nys-checkbox-padding--y--tile: var(--nys-space-150, 12px)}:host([tile][showError]){--_nys-checkbox-border-color--tile: var(--nys-color-danger, #b52c2c);--_nys-checkbox-border-color--tile--hover: var(--nys-color-danger, #b52c2c);--_nys-checkbox-border-color--tile--active: var(--nys-color-danger, #b52c2c);--_nys-checkbox-border-color--tile--checked: var(--nys-color-danger, #b52c2c)}#single-error-message{--_nys-errormessage-margin-top: var(--nys-space-50, 4px)}.nys-checkboxgroup{display:flex;flex-direction:column;gap:var(--nys-space-200, 16px);font-family:var(--_nys-checkbox-font-family);font-size:var(--_nys-checkbox-font-size);line-height:var(--_nys-checkbox-line-height)}.nys-checkboxgroup__content{display:flex;flex-direction:column;gap:var(--_nys-checkboxgroup-gap)}.nys-checkbox{display:flex;flex-direction:column;border-radius:var(--_nys-checkbox-border-radius--tile);border:var(--_nys-checkbox-border-width--tile) solid var(--_nys-checkbox-border-color--tile);background:var(--_nys-checkbox-background-color--tile);padding:var(--_nys-checkbox-padding--y--tile) var(--_nys-checkbox-padding--x--tile)}.nys-checkbox .nys-checkbox__main-container{display:flex;font-family:var(--_nys-checkbox-font-family);font-size:var(--_nys-checkbox-font-size);line-height:var(--_nys-checkbox-line-height);align-items:center;gap:var(--_nys-checkbox-gap)}.nys-checkbox .nys-checkbox__main-container.has-description{align-items:flex-start}.nys-checkbox__checkbox-wrapper{position:relative;display:flex;justify-content:center;align-items:center;max-height:var(--_nys-checkbox-size)}.nys-checkbox__icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;color:var(--nys-color-ink-reverse, #ffffff)}.nys-checkbox__checkbox{appearance:none;background-repeat:no-repeat;background-position:center;width:var(--_nys-checkbox-size);min-width:var(--_nys-checkbox-size);min-height:var(--_nys-checkbox-size);height:var(--_nys-checkbox-size);max-width:var(--_nys-checkbox-size);max-height:var(--_nys-checkbox-size);border:solid var(--_nys-checkbox-border-width) var(--_nys-checkbox-border-color);background-color:var(--_nys-checkbox-background-color);border-radius:var(--_nys-checkbox-border-radius);outline-offset:var(--_nys-checkbox-outline-offset);outline:none;margin:0}.nys-checkbox:hover,.nys-checkbox:hover *{cursor:pointer}.nys-checkbox__checkbox:not(:disabled):checked{background-color:var(--_nys-checkbox-background-color--checked);border-color:var(--_nys-checkbox-border-color--checked)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:not(:disabled):checked){border-color:var(--_nys-checkbox-border-color--tile--checked);background-color:var(--_nys-checkbox-background-color--tile--checked)}.nys-checkbox__checkbox:disabled:checked{background-color:var(--_nys-checkbox-background-color--checked--disabled);border-color:var(--_nys-checkbox-border-color--checked--disabled)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:disabled:checked){border-color:var(--_nys-checkbox-border-color--tile--disabled);background-color:var(--_nys-checkbox-background-color--tile--disabled)}.nys-checkbox__checkbox:disabled{background-color:var(--_nys-checkbox-background-color--disabled);border-color:var(--_nys-checkbox-border-color--disabled);cursor:not-allowed}.nys-checkbox:has(.nys-checkbox__checkbox:disabled) *{color:var(--_nys-checkbox-color--disabled);cursor:not-allowed;--_nys-label-cursor: not-allowed;--_nys-label-color: var(--_nys-checkbox-color--disabled)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:disabled){background-color:var(--_nys-checkbox-background-color--disabled);border-color:var(--_nys-checkbox-border-color--disabled);cursor:not-allowed}.nys-checkbox__checkbox:hover:not(:disabled):not(:checked){background-color:var(--_nys-checkbox-background-color--hover);border-color:var(--_nys-checkbox-border-color--hover)}:host([tile]) .nys-checkbox:hover:has(.nys-checkbox__checkbox:not(:disabled):not(:checked)){border-color:var(--_nys-checkbox-border-color--tile--hover);background-color:var(--_nys-checkbox-background-color--tile--hover);outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-border-color--tile--hover)}.nys-checkbox__checkbox:hover:not(:disabled):checked{border-color:var(--_nys-checkbox-border-color--checked--hover);background-color:var(--_nys-checkbox-background-color--checked--hover)}:host([tile]) .nys-checkbox:hover:has(.nys-checkbox__checkbox:not(:disabled):checked){outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-border-color--tile--checked)}.nys-checkbox__checkbox:active:not(:disabled):not(:checked){background-color:var(--_nys-checkbox-background-color--active);border-color:var(--_nys-checkbox-border-color--active)}:host([tile]) .nys-checkbox:has(.nys-checkbox__checkbox:active:not(:disabled):not(:checked)){border-color:var(--_nys-checkbox-border-color--tile--active);background-color:var(--_nys-checkbox-background-color--tile--active);outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-border-color--tile--active)}.nys-checkbox__checkbox:active:not(:disabled):checked{border-color:var(--_nys-checkbox-border-color--checked--active);background-color:var(--_nys-checkbox-background-color--checked--active)}:host(:not([tile])) .nys-checkbox__checkbox:focus{outline:solid var(--_nys-checkbox-outline-width) var(--_nys-checkbox-outline-color)}:host([tile]) .nys-checkbox:has(*:focus){outline:solid var(--_nys-checkbox-border-width--tile) var(--_nys-checkbox-outline-color)!important;border-color:var(--_nys-checkbox-outline-color)!important}:host(:not([tile])) .nys-checkbox__main-container>nys-label{--_nys-label-font-weight: var(--_nys-checkbox-font-weight)}:host([tile]) .nys-checkbox__main-container>nys-label{--_nys-description-font-style: normal}.nys-checkbox__required{color:var(--nys-color-danger, #b52c2c)}.nys-checkbox__requiredwrapper{display:flex;gap:3px}fieldset{all:unset;display:contents}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}.nys-checkbox__other-container{display:flex;padding-inline-start:calc(var(--_nys-checkbox-size) + var(--_nys-checkbox-gap))}';
5
+ var g = Object.defineProperty, h = (b, e, t, r) => {
6
+ for (var o = void 0, l = b.length - 1, a; l >= 0; l--)
7
+ (a = b[l]) && (o = a(e, t, o) || o);
8
+ return o && g(e, t, o), o;
9
9
  };
10
- let w = 0;
11
- const u = class u extends x {
10
+ let E = 0;
11
+ const k = class k extends x {
12
12
  // allows use of elementInternals' API
13
13
  constructor() {
14
- super(), this.id = "", this.name = "", this.required = !1, this.optional = !1, this.showError = !1, this.errorMessage = "", this.label = "", this.description = "", this.tile = !1, this.tooltip = "", this.inverted = !1, this.form = null, this.size = "md", this._slottedDescriptionText = "", this._internals = this.attachInternals();
14
+ super(), this.id = "", this.name = "", this.required = !1, this.optional = !1, this.showError = !1, this.errorMessage = "", this.label = "", this.description = "", this.tile = !1, this.tooltip = "", this.inverted = !1, this.form = null, this.size = "md", this._slottedDescriptionText = "", this._hasOtherError = !1, this._otherErrorCheckbox = null, 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-checkboxgroup-${Date.now()}-${w++}`), this.addEventListener("nys-change", this._handleCheckboxChange), this.addEventListener("invalid", this._handleInvalid);
18
+ super.connectedCallback(), this.id || (this.id = `nys-checkboxgroup-${Date.now()}-${E++}`), this.addEventListener("nys-change", this._handleCheckboxChange), this.addEventListener("invalid", this._handleInvalid), this.addEventListener("nys-error", this._handleChildError), this.addEventListener("nys-error-clear", this._handleChildErrorClear);
19
19
  }
20
20
  disconnectedCallback() {
21
- super.disconnectedCallback(), this.removeEventListener("nys-change", this._handleCheckboxChange), this.removeEventListener("invalid", this._handleInvalid);
21
+ super.disconnectedCallback(), this.removeEventListener("nys-change", this._handleCheckboxChange), this.removeEventListener("invalid", this._handleInvalid), this.removeEventListener("nys-error", this._handleChildError), this.removeEventListener("nys-error-clear", this._handleChildErrorClear);
22
22
  }
23
23
  firstUpdated() {
24
24
  this._setGroupExist(), this._updateCheckboxSize(), this._updateCheckboxTile(), this._updateCheckboxShowError(), this._getSlotDescriptionForAria();
@@ -30,88 +30,116 @@ const u = class u extends x {
30
30
  * Functions
31
31
  * --------------------------------------------------------------------------
32
32
  */
33
+ _hasAtLeastOneChecked() {
34
+ return Array.from(this.querySelectorAll("nys-checkbox")).some(
35
+ (e) => e.checked
36
+ );
37
+ }
33
38
  _setGroupExist() {
34
- this.querySelectorAll("nys-checkbox").forEach((o) => {
35
- o.groupExist = !0;
39
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
40
+ t.groupExist = !0;
36
41
  });
37
42
  }
38
43
  // Initial update on checkbox required attribute
39
44
  async _setupCheckboxRequired() {
40
- const e = this.querySelector("nys-checkbox"), o = this.errorMessage || "This field is required", r = e ? await e.getInputElement() : null;
45
+ const e = this.querySelector("nys-checkbox"), t = this.errorMessage || "This field is required", r = e ? await e.getInputElement() : null;
41
46
  this._internals.setValidity(
42
47
  { valueMissing: !0 },
43
- o,
48
+ t,
44
49
  r || this
45
50
  );
46
51
  }
47
52
  // Updates the required attribute of each checkbox in the group
48
53
  async _manageRequire() {
49
- if (this.required) {
50
- const e = this.errorMessage || "Please select at least one option.", o = this.querySelector("nys-checkbox"), r = o ? await o.getInputElement().catch(() => null) : null, s = this.querySelectorAll("nys-checkbox");
51
- Array.from(s).some(
52
- (a) => a.checked
53
- ) ? (this._internals.setValidity({}), this.showError = !1) : (this._internals.setValidity(
54
- { valueMissing: !0 },
55
- e,
56
- r || this
57
- ), this.showError = !0);
58
- }
54
+ if (!this.required) return;
55
+ const e = this.errorMessage || "You must make a selection to proceed.", t = Array.from(
56
+ this.querySelectorAll("nys-checkbox")
57
+ ), r = this._hasAtLeastOneChecked(), o = t ? await t[0].getInputElement().catch(() => null) : null;
58
+ this._internals.setValidity({}), this.showError = !1, r ? this._hasOtherError && this._otherErrorCheckbox && (this._setCustomOtherError(), this.showError = !0) : this._hasOtherError ? (this._setCustomOtherError(), this.showError = !0) : (this._internals.setValidity(
59
+ { valueMissing: !0 },
60
+ e,
61
+ o ?? this
62
+ ), this.showError = !0);
63
+ }
64
+ _setCustomOtherError() {
65
+ const t = this._otherErrorCheckbox?.shadowRoot?.querySelector("nys-textinput") || this._otherErrorCheckbox;
66
+ this._internals.setValidity(
67
+ { customError: !0 },
68
+ "Please complete this field.",
69
+ t
70
+ );
59
71
  }
60
72
  // Updates the size of each checkbox in the group
61
73
  _updateCheckboxSize() {
62
- this.querySelectorAll("nys-checkbox").forEach((o) => {
63
- o.setAttribute("size", this.size);
74
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
75
+ t.setAttribute("size", this.size);
64
76
  });
65
77
  }
66
78
  _updateCheckboxTile() {
67
- this.querySelectorAll("nys-checkbox").forEach((o) => {
68
- this.tile ? o.toggleAttribute("tile", !0) : o.removeAttribute("tile");
79
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
80
+ this.tile ? t.toggleAttribute("tile", !0) : t.removeAttribute("tile");
69
81
  });
70
82
  }
71
83
  _updateCheckboxInvert() {
72
- this.querySelectorAll("nys-checkbox").forEach((o) => {
73
- this.inverted ? o.toggleAttribute("inverted", !0) : o.removeAttribute("inverted");
84
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
85
+ this.inverted ? t.toggleAttribute("inverted", !0) : t.removeAttribute("inverted");
74
86
  });
75
87
  }
76
88
  _updateCheckboxShowError() {
77
- this.querySelectorAll("nys-checkbox").forEach((o) => {
78
- this.showError ? o.setAttribute("showError", "") : o.removeAttribute("showError");
89
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
90
+ this.showError ? t.setAttribute("showError", "") : t.removeAttribute("showError");
79
91
  });
80
92
  }
81
93
  _updateCheckboxForm() {
82
- this.querySelectorAll("nys-checkbox").forEach((o) => {
83
- this.showError && this.form !== null ? o.setAttribute("form", this.form) : o.removeAttribute("form");
94
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
95
+ this.showError && this.form !== null ? t.setAttribute("form", this.form) : t.removeAttribute("form");
84
96
  });
85
97
  }
86
98
  // Get the slotted text contents so native VO can attempt to announce it within the legend in the fieldset
87
99
  _getSlotDescriptionForAria() {
88
- const o = this.shadowRoot?.querySelector(
100
+ const t = this.shadowRoot?.querySelector(
89
101
  'slot[name="description"]'
90
102
  )?.assignedNodes({ flatten: !0 }) || [];
91
- this._slottedDescriptionText = o.map((r) => r.textContent?.trim()).filter(Boolean).join(", ");
103
+ this._slottedDescriptionText = t.map((r) => r.textContent?.trim()).filter(Boolean).join(", ");
92
104
  }
93
105
  // This callback is automatically called when the parent form is reset.
94
106
  formResetCallback() {
95
- this.querySelectorAll("nys-checkbox").forEach((o) => {
96
- o.formResetCallback();
107
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
108
+ t.formResetCallback();
97
109
  }), this._internals.setFormValue(""), this.showError = !1, this._internals.setValidity({}), this.requestUpdate();
98
110
  }
99
111
  async _handleInvalid(e) {
100
- e.preventDefault(), this.showError = !0, this._manageRequire();
101
- const o = this.querySelector("nys-checkbox"), r = o ? await o.getInputElement() : null;
102
- if (r) {
103
- const s = this._internals.form;
104
- s ? Array.from(s.elements).find((y) => {
105
- if (y.tagName.toLowerCase() === "nys-checkboxgroup") {
106
- if (Array.from(
107
- this.querySelectorAll("nys-checkbox")
108
- ).filter(
109
- (_) => _.checked
110
- ).length === 0)
111
- return y;
112
- } else
113
- return typeof y.checkValidity == "function" && !y.checkValidity();
114
- }) === this && r.focus() : r.focus();
112
+ if (e.preventDefault(), this._internals.validity.customError) {
113
+ const r = Array.from(
114
+ this.querySelectorAll("nys-checkbox")
115
+ ).find(
116
+ (o) => o.other && o.checked
117
+ );
118
+ if (r) {
119
+ const o = r.shadowRoot?.querySelector("nys-textinput");
120
+ if (o) {
121
+ await o.updateComplete, o.focus();
122
+ return;
123
+ }
124
+ }
125
+ }
126
+ if (this._internals.validity.valueMissing) {
127
+ this.showError = !0, this._manageRequire();
128
+ const t = this.querySelector("nys-checkbox"), r = t ? await t.getInputElement() : null;
129
+ if (r) {
130
+ const o = this._internals.form;
131
+ o ? Array.from(o.elements).find((u) => {
132
+ if (u.tagName.toLowerCase() === "nys-checkboxgroup") {
133
+ if (Array.from(
134
+ this.querySelectorAll("nys-checkbox")
135
+ ).filter(
136
+ (m) => m.checked
137
+ ).length === 0)
138
+ return u;
139
+ } else
140
+ return typeof u.checkValidity == "function" && !u.checkValidity();
141
+ }) === this && r.focus() : r.focus();
142
+ }
115
143
  }
116
144
  }
117
145
  /**
@@ -120,12 +148,41 @@ const u = class u extends x {
120
148
  */
121
149
  // Similar to how native forms handle multiple same-name fields, we group the selected values into a list for FormData.
122
150
  _handleCheckboxChange(e) {
123
- const o = e, { name: r } = o.detail, h = Array.from(this.querySelectorAll("nys-checkbox")).filter((a) => a.checked).map((a) => a.value);
124
- this.name = r, this._internals.setFormValue(h.join(", ")), this._manageRequire();
151
+ const t = e, { name: r } = t.detail, o = Array.from(
152
+ this.querySelectorAll("nys-checkbox")
153
+ ), l = o.filter((a) => a.checked).map((a) => a.value);
154
+ this.name = r, this._internals.setFormValue(l.join(", ")), this._checkOtherInputs(o), this._hasOtherError || this._manageRequire();
155
+ }
156
+ async _handleChildError(e) {
157
+ e.stopPropagation();
158
+ const { sourceCheckbox: t } = e.detail;
159
+ t && (this._hasOtherError = !0, this._otherErrorCheckbox = t, this.showError = !0, this._setCustomOtherError());
160
+ }
161
+ _handleChildErrorClear(e) {
162
+ const r = e.detail?.sourceCheckbox;
163
+ this._otherErrorCheckbox && r !== this._otherErrorCheckbox || (this._internals.setValidity({}), this.showError = !1, this.required && !this._hasAtLeastOneChecked() && this._manageRequire());
164
+ }
165
+ async _checkOtherInputs(e) {
166
+ let t = !1;
167
+ for (const r of e)
168
+ if (r.checked && r.other) {
169
+ const o = r.value.trim();
170
+ if (!r._hasUserInteracted)
171
+ continue;
172
+ if (!o || o === "") {
173
+ this._hasOtherError = !0, this._otherErrorCheckbox = r, this._setCustomOtherError(), this.showError = !0, t = !0;
174
+ return;
175
+ }
176
+ }
177
+ !t && this._hasOtherError && (this._hasOtherError = !1, this._otherErrorCheckbox = null, this.required ? this._manageRequire() : (this._internals.setValidity({}), this.showError = !1));
125
178
  }
126
179
  render() {
127
- return b`
128
- <div class="nys-checkboxgroup">
180
+ return d`
181
+ <fieldset
182
+ aria-label="${this.label}${this._slottedDescriptionText ? ` ${this._slottedDescriptionText}` : this.description ? ` ${this.description}` : ""}"
183
+ class="nys-checkboxgroup"
184
+ role="radiogroup"
185
+ >
129
186
  <nys-label
130
187
  for=${this.id + "--native"}
131
188
  label=${this.label}
@@ -137,92 +194,98 @@ const u = class u extends x {
137
194
  <slot name="description" slot="description">${this.description}</slot>
138
195
  </nys-label>
139
196
  <div class="nys-checkboxgroup__content">
140
- <fieldset>
141
- <legend class="sr-only">
142
- ${this.label}${this._slottedDescriptionText ? ` ${this._slottedDescriptionText}` : this.description ? ` ${this.description}` : ""}
143
- </legend>
144
- <slot></slot>
145
- </fieldset>
197
+ <slot></slot>
146
198
  </div>
147
199
  <nys-errormessage
148
200
  ?showError=${this.showError}
149
201
  errorMessage=${this._internals.validationMessage || this.errorMessage}
150
202
  .showDivider=${!this.tile}
151
203
  ></nys-errormessage>
152
- </div>
204
+ </fieldset>
153
205
  `;
154
206
  }
155
207
  };
156
- u.styles = v(f), u.formAssociated = !0;
157
- let i = u;
158
- l([
159
- t({ type: String, reflect: !0 })
160
- ], i.prototype, "id");
161
- l([
162
- t({ type: String, reflect: !0 })
163
- ], i.prototype, "name");
164
- l([
165
- t({ type: Boolean, reflect: !0 })
166
- ], i.prototype, "required");
167
- l([
168
- t({ type: Boolean, reflect: !0 })
169
- ], i.prototype, "optional");
170
- l([
171
- t({ type: Boolean, reflect: !0 })
172
- ], i.prototype, "showError");
173
- l([
174
- t({ type: String })
175
- ], i.prototype, "errorMessage");
176
- l([
177
- t({ type: String })
178
- ], i.prototype, "label");
179
- l([
180
- t({ type: String })
181
- ], i.prototype, "description");
182
- l([
183
- t({ type: Boolean, reflect: !0 })
184
- ], i.prototype, "tile");
185
- l([
186
- t({ type: String })
187
- ], i.prototype, "tooltip");
188
- l([
189
- t({ type: Boolean, reflect: !0 })
190
- ], i.prototype, "inverted");
191
- l([
192
- t({ type: String, reflect: !0 })
193
- ], i.prototype, "form");
194
- l([
195
- t({ type: String, reflect: !0 })
196
- ], i.prototype, "size");
197
- l([
198
- g()
199
- ], i.prototype, "_slottedDescriptionText");
200
- customElements.get("nys-checkboxgroup") || customElements.define("nys-checkboxgroup", i);
201
- var E = Object.defineProperty, n = (d, e, o, r) => {
202
- for (var s = void 0, h = d.length - 1, a; h >= 0; h--)
203
- (a = d[h]) && (s = a(e, o, s) || s);
204
- return s && E(e, o, s), s;
208
+ k.styles = v(f), k.formAssociated = !0;
209
+ let c = k;
210
+ h([
211
+ s({ type: String, reflect: !0 })
212
+ ], c.prototype, "id");
213
+ h([
214
+ s({ type: String, reflect: !0 })
215
+ ], c.prototype, "name");
216
+ h([
217
+ s({ type: Boolean, reflect: !0 })
218
+ ], c.prototype, "required");
219
+ h([
220
+ s({ type: Boolean, reflect: !0 })
221
+ ], c.prototype, "optional");
222
+ h([
223
+ s({ type: Boolean, reflect: !0 })
224
+ ], c.prototype, "showError");
225
+ h([
226
+ s({ type: String })
227
+ ], c.prototype, "errorMessage");
228
+ h([
229
+ s({ type: String })
230
+ ], c.prototype, "label");
231
+ h([
232
+ s({ type: String })
233
+ ], c.prototype, "description");
234
+ h([
235
+ s({ type: Boolean, reflect: !0 })
236
+ ], c.prototype, "tile");
237
+ h([
238
+ s({ type: String })
239
+ ], c.prototype, "tooltip");
240
+ h([
241
+ s({ type: Boolean, reflect: !0 })
242
+ ], c.prototype, "inverted");
243
+ h([
244
+ s({ type: String, reflect: !0 })
245
+ ], c.prototype, "form");
246
+ h([
247
+ s({ type: String, reflect: !0 })
248
+ ], c.prototype, "size");
249
+ h([
250
+ _()
251
+ ], c.prototype, "_slottedDescriptionText");
252
+ h([
253
+ _()
254
+ ], c.prototype, "_hasOtherError");
255
+ h([
256
+ _()
257
+ ], c.prototype, "_otherErrorCheckbox");
258
+ customElements.get("nys-checkboxgroup") || customElements.define("nys-checkboxgroup", c);
259
+ var w = Object.defineProperty, n = (b, e, t, r) => {
260
+ for (var o = void 0, l = b.length - 1, a; l >= 0; l--)
261
+ (a = b[l]) && (o = a(e, t, o) || o);
262
+ return o && w(e, t, o), o;
205
263
  };
206
264
  let C = 0;
207
265
  const p = class p extends x {
208
266
  // allows use of elementInternals' API
209
267
  constructor() {
210
- super(), this.checked = !1, this.disabled = !1, this.required = !1, this.label = "", this.description = "", this.id = "", this.name = "", this.value = "", this.form = null, this.showError = !1, this.errorMessage = "", this.groupExist = !1, this.tile = !1, this.inverted = !1, this.tooltip = "", this.size = "md", this._manageLabelClick = () => {
211
- const e = this.shadowRoot?.querySelector(".nys-checkbox"), o = this.shadowRoot?.querySelector("input");
212
- !e || !o || e.addEventListener("click", (r) => {
213
- r.target.tagName.toLowerCase() !== "input" && (this.disabled || o.click());
268
+ super(), this.checked = !1, this.disabled = !1, this.required = !1, this.label = "", this.description = "", this.id = "", this.name = "", this.value = "", this.form = null, this.showError = !1, this.errorMessage = "", this.groupExist = !1, this.tile = !1, this.inverted = !1, this.tooltip = "", this.size = "md", this.other = !1, this.showOtherError = !1, this.isMobile = window.innerWidth < 480, this._hasUserInteracted = !1, this._manageLabelClick = () => {
269
+ const e = this.shadowRoot?.querySelector(
270
+ ".nys-checkbox__main-container"
271
+ ), t = this.shadowRoot?.querySelector("input");
272
+ !e || !t || e.addEventListener("click", (r) => {
273
+ r.target.tagName.toLowerCase() !== "input" && (this.disabled || (t.click(), t.focus()));
214
274
  });
275
+ }, this._handleResize = () => {
276
+ this.isMobile = window.innerWidth < 480;
215
277
  }, this._internals = this.attachInternals();
216
278
  }
279
+ // need this flag for "eager mode"
217
280
  async getInputElement() {
218
281
  return await this.updateComplete, this.shadowRoot?.querySelector("input") || null;
219
282
  }
220
283
  // Generate a unique ID if one is not provided
221
284
  connectedCallback() {
222
- super.connectedCallback(), this.id || (this.id = `nys-checkbox-${Date.now()}-${C++}`), this.addEventListener("invalid", this._handleInvalid);
285
+ super.connectedCallback(), this.id || (this.id = `nys-checkbox-${Date.now()}-${C++}`), this.addEventListener("invalid", this._handleInvalid), this.addEventListener("blur", this._handleBlur), window.addEventListener("resize", this._handleResize);
223
286
  }
224
287
  disconnectedCallback() {
225
- super.disconnectedCallback(), this.removeEventListener("invalid", this._handleInvalid);
288
+ super.disconnectedCallback(), this.removeEventListener("invalid", this._handleInvalid), this.removeEventListener("blur", this._handleBlur), window.removeEventListener("resize", this._handleResize);
226
289
  }
227
290
  firstUpdated() {
228
291
  this._setValue(), this._manageRequire(), this._manageLabelClick();
@@ -235,23 +298,23 @@ const p = class p extends x {
235
298
  this.groupExist || this._internals.setFormValue(this.checked ? this.value : null);
236
299
  }
237
300
  _manageRequire() {
238
- const e = this.shadowRoot?.querySelector("input"), o = this.errorMessage || "This field is required";
239
- e && (this.required && !this.checked ? (this._internals.ariaRequired = "true", this._internals.setValidity({ valueMissing: !0 }, o, e)) : this._internals.setValidity({}));
301
+ const e = this.shadowRoot?.querySelector("input"), t = this.errorMessage || "This field is required";
302
+ e && (this.required && !this.checked ? (this._internals.ariaRequired = "true", this._internals.setValidity({ valueMissing: !0 }, t, e)) : this._internals.setValidity({}));
240
303
  }
241
304
  _setValidityMessage(e = "") {
242
- const o = this.shadowRoot?.querySelector("input");
243
- o && (this.showError = !!e, this.errorMessage?.trim() && e !== "" && (e = this.errorMessage), this._internals.setValidity(
305
+ const t = this.shadowRoot?.querySelector("input");
306
+ t && (this.showError = !!e, this.errorMessage?.trim() && e !== "" && (e = this.errorMessage), this._internals.setValidity(
244
307
  e ? { customError: !0 } : {},
245
308
  e,
246
- o
309
+ t
247
310
  ));
248
311
  }
249
312
  _validate() {
250
313
  const e = this.shadowRoot?.querySelector("input");
251
314
  if (!e) return;
252
- const o = e.validity;
315
+ const t = e.validity;
253
316
  let r = "";
254
- o.valueMissing && (r = "This field is required"), this._setValidityMessage(r);
317
+ t.valueMissing && (r = "This field is required"), this._setValidityMessage(r);
255
318
  }
256
319
  // Called automatically when the parent form is reset
257
320
  formResetCallback() {
@@ -272,14 +335,18 @@ const p = class p extends x {
272
335
  }
273
336
  _handleInvalid(e) {
274
337
  e.preventDefault(), this.showError = !0, this._validate();
275
- const o = this.shadowRoot?.querySelector("input");
276
- if (o) {
338
+ const t = this.shadowRoot?.querySelector("input");
339
+ if (t) {
277
340
  const r = this._internals.form;
278
341
  r ? Array.from(r.elements).find(
279
342
  (a) => typeof a.checkValidity == "function" && !a.checkValidity()
280
- ) === this && o.focus() : o.focus();
343
+ ) === this && t.focus() : t.focus();
281
344
  }
282
345
  }
346
+ get _hasDescription() {
347
+ const e = this.querySelector('[slot="description"]');
348
+ return !!this.description || !!e;
349
+ }
283
350
  /**
284
351
  * Event Handlers
285
352
  * --------------------------------------------------------------------------
@@ -299,65 +366,117 @@ const p = class p extends x {
299
366
  );
300
367
  }
301
368
  // Handle checkbox change event
302
- _handleChange(e) {
303
- const { checked: o } = e.target;
304
- this.checked = o, this.groupExist || this._internals.setFormValue(this.checked ? this.value : null), this._validate(), this._emitChangeEvent();
369
+ async _handleChange(e) {
370
+ const { checked: t } = e.target, r = this.checked;
371
+ this.checked = t, this.groupExist || this._internals.setFormValue(this.checked ? this.value : null), this.other && r && !t && (this.showOtherError = !1, this._hasUserInteracted = !1, this._dispatchClearError()), this._validate(), this._emitChangeEvent();
305
372
  }
306
373
  _handleFocus() {
307
374
  this.dispatchEvent(new Event("nys-focus"));
308
375
  }
309
376
  _handleBlur() {
310
- this.dispatchEvent(new Event("nys-blur"));
377
+ this.dispatchEvent(new Event("nys-blur")), this.other && this.checked && (this._hasUserInteracted = !0, this._validateOtherAndEmitError());
378
+ }
379
+ _handleTextInputBlur() {
380
+ this._hasUserInteracted = !0, this._validateOtherAndEmitError();
311
381
  }
312
382
  async _handleKeydown(e) {
313
383
  e.code === "Space" && (e.preventDefault(), this.disabled || (this.checked = !this.checked, this._internals.setFormValue(this.checked ? this.value : null), await this.updateComplete, this._validate(), this._emitChangeEvent()));
314
384
  }
385
+ _handleTextInput(e) {
386
+ let r = e.target.value;
387
+ this.value = r, this._hasUserInteracted && this._validateOtherAndEmitError(), this._emitChangeEvent();
388
+ }
389
+ _validateOtherAndEmitError() {
390
+ if (!this.other) return;
391
+ if (!this.checked || !this._hasUserInteracted) {
392
+ this.showOtherError = !1, this._dispatchClearError();
393
+ return;
394
+ }
395
+ const e = this.value.trim() === "";
396
+ this.showOtherError = e, e && this.dispatchEvent(
397
+ new CustomEvent("nys-error", {
398
+ detail: {
399
+ id: this.id,
400
+ name: this.name,
401
+ type: "other",
402
+ message: "Please enter a value for this option.",
403
+ sourceCheckbox: this
404
+ },
405
+ bubbles: !0,
406
+ composed: !0
407
+ })
408
+ );
409
+ }
410
+ _dispatchClearError() {
411
+ this.dispatchEvent(
412
+ new CustomEvent("nys-error-clear", {
413
+ bubbles: !0,
414
+ composed: !0
415
+ })
416
+ );
417
+ }
315
418
  render() {
316
- return b`
419
+ return d`
317
420
  <div class="nys-checkbox">
318
- <div class="nys-checkbox__checkboxwrapper">
319
- <input
320
- id=${this.id + "--native"}
321
- class="nys-checkbox__checkbox"
322
- type="checkbox"
323
- name="${k(this.name ? this.name : void 0)}"
324
- .checked=${this.checked}
325
- ?disabled=${this.disabled}
326
- .value=${this.value}
327
- ?required="${this.required}"
328
- form=${k(this.form || void 0)}
329
- aria-checked="${this.checked}"
330
- aria-disabled="${this.disabled ? "true" : "false"}"
331
- aria-required="${this.required}"
332
- aria-describedby="group-info"
333
- @change="${this._handleChange}"
334
- @focus="${this._handleFocus}"
335
- @blur="${this._handleBlur}"
336
- @keydown="${this._handleKeydown}"
337
- aria-label="${this.label}"
338
- />
339
- ${this.checked ? b`<nys-icon
340
- name="check"
341
- size="${this.size === "md" ? "4xl" : this.size === "sm" ? "2xl" : "4xl"}"
342
- class="nys-checkbox__icon"
343
- ></nys-icon>` : ""}
344
- </div>
345
- ${this.label && b`
346
- <nys-label
347
- tooltip=${this.tooltip}
348
- for=${this.id + "--native"}
349
- label=${this.label}
350
- description=${k(this.description ?? void 0)}
351
- flag=${k(this.required ? "required" : void 0)}
352
- ?inverted=${this.inverted}
353
- >
354
- <slot name="description" slot="description"
355
- >${this.description}</slot
421
+ <div
422
+ class="nys-checkbox__main-container ${this._hasDescription ? "has-description" : ""}"
423
+ >
424
+ <div class="nys-checkbox__checkbox-wrapper">
425
+ <input
426
+ id=${this.id + "--native"}
427
+ class="nys-checkbox__checkbox"
428
+ type="checkbox"
429
+ name="${y(this.name ? this.name : void 0)}"
430
+ .checked=${this.checked}
431
+ ?disabled=${this.disabled}
432
+ .value=${this.value}
433
+ ?required="${this.required}"
434
+ form=${y(this.form || void 0)}
435
+ aria-checked="${this.checked}"
436
+ aria-disabled="${this.disabled ? "true" : "false"}"
437
+ aria-required="${this.required}"
438
+ aria-describedby="group-info"
439
+ @change="${this._handleChange}"
440
+ @focus="${this._handleFocus}"
441
+ @keydown="${this._handleKeydown}"
442
+ aria-label=${this.label || y(this.other ? "Other" : void 0)}
443
+ />
444
+ ${this.checked ? d`<nys-icon
445
+ name="check"
446
+ size="${this.size === "md" ? "4xl" : this.size === "sm" ? "2xl" : "4xl"}"
447
+ class="nys-checkbox__icon"
448
+ ></nys-icon>` : ""}
449
+ </div>
450
+ ${(this.label || this.other) && d`
451
+ <nys-label
452
+ tooltip=${this.tooltip}
453
+ for=${this.id + "--native"}
454
+ label="${this.label || (this.other ? "Other" : "")}"
455
+ description=${y(this.description || void 0)}
456
+ flag=${y(this.required ? "required" : void 0)}
457
+ ?inverted=${this.inverted}
356
458
  >
357
- </nys-label>
358
- `}
459
+ <slot name="description" slot="description"
460
+ >${this.description}</slot
461
+ >
462
+ </nys-label>
463
+ `}
464
+ </div>
465
+ <div class="nys-checkbox__other-container">
466
+ ${this.other && this.checked ? d`
467
+ <nys-textinput
468
+ .value=${this.value}
469
+ id=${"radiobutton-other-" + this.id}
470
+ @nys-input=${this._handleTextInput}
471
+ @nys-blur=${this._handleTextInputBlur}
472
+ ariaLabel="Other"
473
+ aria-invalid=${this.showOtherError ? "true" : "false"}
474
+ width=${this.isMobile ? "full" : "md"}
475
+ ></nys-textinput>
476
+ ` : ""}
477
+ </div>
359
478
  </div>
360
- ${this.parentElement?.tagName.toLowerCase() !== "nys-checkboxgroup" ? b`<nys-errormessage
479
+ ${this.parentElement?.tagName.toLowerCase() !== "nys-checkboxgroup" ? d`<nys-errormessage
361
480
  id="single-error-message"
362
481
  ?showError=${this.showError}
363
482
  errorMessage=${this._internals.validationMessage || this.errorMessage}
@@ -367,58 +486,67 @@ const p = class p extends x {
367
486
  }
368
487
  };
369
488
  p.styles = v(f), p.formAssociated = !0;
370
- let c = p;
489
+ let i = p;
371
490
  n([
372
- t({ type: Boolean, reflect: !0 })
373
- ], c.prototype, "checked");
491
+ s({ type: Boolean, reflect: !0 })
492
+ ], i.prototype, "checked");
374
493
  n([
375
- t({ type: Boolean, reflect: !0 })
376
- ], c.prototype, "disabled");
494
+ s({ type: Boolean, reflect: !0 })
495
+ ], i.prototype, "disabled");
377
496
  n([
378
- t({ type: Boolean, reflect: !0 })
379
- ], c.prototype, "required");
497
+ s({ type: Boolean, reflect: !0 })
498
+ ], i.prototype, "required");
380
499
  n([
381
- t({ type: String })
382
- ], c.prototype, "label");
500
+ s({ type: String })
501
+ ], i.prototype, "label");
383
502
  n([
384
- t({ type: String })
385
- ], c.prototype, "description");
503
+ s({ type: String })
504
+ ], i.prototype, "description");
386
505
  n([
387
- t({ type: String, reflect: !0 })
388
- ], c.prototype, "id");
506
+ s({ type: String, reflect: !0 })
507
+ ], i.prototype, "id");
389
508
  n([
390
- t({ type: String, reflect: !0 })
391
- ], c.prototype, "name");
509
+ s({ type: String, reflect: !0 })
510
+ ], i.prototype, "name");
392
511
  n([
393
- t({ type: String })
394
- ], c.prototype, "value");
512
+ s({ type: String })
513
+ ], i.prototype, "value");
395
514
  n([
396
- t({ type: String, reflect: !0 })
397
- ], c.prototype, "form");
515
+ s({ type: String, reflect: !0 })
516
+ ], i.prototype, "form");
398
517
  n([
399
- t({ type: Boolean, reflect: !0 })
400
- ], c.prototype, "showError");
518
+ s({ type: Boolean, reflect: !0 })
519
+ ], i.prototype, "showError");
401
520
  n([
402
- t({ type: String })
403
- ], c.prototype, "errorMessage");
521
+ s({ type: String })
522
+ ], i.prototype, "errorMessage");
404
523
  n([
405
- t({ type: Boolean })
406
- ], c.prototype, "groupExist");
524
+ s({ type: Boolean })
525
+ ], i.prototype, "groupExist");
407
526
  n([
408
- t({ type: Boolean, reflect: !0 })
409
- ], c.prototype, "tile");
527
+ s({ type: Boolean, reflect: !0 })
528
+ ], i.prototype, "tile");
410
529
  n([
411
- t({ type: Boolean, reflect: !0 })
412
- ], c.prototype, "inverted");
530
+ s({ type: Boolean, reflect: !0 })
531
+ ], i.prototype, "inverted");
413
532
  n([
414
- t({ type: String })
415
- ], c.prototype, "tooltip");
533
+ s({ type: String })
534
+ ], i.prototype, "tooltip");
416
535
  n([
417
- t({ type: String, reflect: !0 })
418
- ], c.prototype, "size");
419
- customElements.get("nys-checkbox") || customElements.define("nys-checkbox", c);
536
+ s({ type: String, reflect: !0 })
537
+ ], i.prototype, "size");
538
+ n([
539
+ s({ type: Boolean, reflect: !0 })
540
+ ], i.prototype, "other");
541
+ n([
542
+ s({ type: Boolean })
543
+ ], i.prototype, "showOtherError");
544
+ n([
545
+ _()
546
+ ], i.prototype, "isMobile");
547
+ customElements.get("nys-checkbox") || customElements.define("nys-checkbox", i);
420
548
  export {
421
- c as NysCheckbox,
422
- i as NysCheckboxgroup
549
+ i as NysCheckbox,
550
+ c as NysCheckboxgroup
423
551
  };
424
552
  //# sourceMappingURL=nys-checkbox.js.map
package/dist/nys-checkbox.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nys-checkbox.js","sources":["../src/nys-checkboxgroup.ts","../src/nys-checkbox.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-checkbox.scss?inline\";\n\nlet checkboxgroupIdCounter = 0;\n\n/**\n * A container for grouping multiple `nys-checkbox` components as a single form control.\n * Handles validation, required constraints, and submits comma-separated values.\n *\n * Use to allow users to select multiple options from a list. Apply `tile`, `size`, and `inverted` to the group\n * and all children inherit these styles automatically.\n *\n * @summary Container for grouping checkboxes as a single form control.\n * @element nys-checkboxgroup\n *\n * @slot - Default slot for `nys-checkbox` elements.\n * @slot description - Custom HTML description content.\n *\n * @example Basic checkbox group\n * ```html\n * <nys-checkboxgroup label=\"Select landmarks\" required>\n * <nys-checkbox name=\"landmarks\" value=\"adirondacks\" label=\"Adirondacks\"></nys-checkbox>\n * <nys-checkbox name=\"landmarks\" value=\"niagara\" label=\"Niagara Falls\"></nys-checkbox>\n * </nys-checkboxgroup>\n * ```\n */\n\nexport class NysCheckboxgroup 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. Set on group, not individual checkboxes. */\n @property({ type: String, reflect: true }) name = \"\";\n\n /** Requires at least one checkbox to be checked. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Shows \"Optional\" flag. */\n @property({ type: Boolean, reflect: true }) optional = false;\n\n /** Shows error message when true. */\n @property({ type: Boolean, reflect: true }) showError = false;\n\n /** Error message text. Shown only when `showError` is true. */\n @property({ type: String }) errorMessage = \"\";\n\n /** Visible label text for the group. */\n @property({ type: String }) label = \"\";\n\n /** Helper text below label. Use slot for custom HTML. */\n @property({ type: String }) description = \"\";\n\n /** Renders all checkboxes as tiles with larger clickable area. */\n @property({ type: Boolean, reflect: true }) tile = false;\n\n /** Tooltip text shown on hover/focus of info icon. */\n @property({ type: String }) tooltip = \"\";\n\n /** Adjusts colors for dark backgrounds. Applied to all children. */\n @property({ type: Boolean, reflect: true }) inverted = false;\n\n /** Form `id` to associate with. Applied to all children. */\n @property({ type: String, reflect: true }) form: string | null = null;\n\n /**\n * Checkbox size for all children: `sm` (24px) or `md` (32px, default).\n * @default \"md\"\n */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n @state() private _slottedDescriptionText = \"\";\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-checkboxgroup-${Date.now()}-${checkboxgroupIdCounter++}`;\n }\n this.addEventListener(\"nys-change\", this._handleCheckboxChange);\n this.addEventListener(\"invalid\", this._handleInvalid);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"nys-change\", this._handleCheckboxChange);\n this.removeEventListener(\"invalid\", this._handleInvalid);\n }\n\n firstUpdated() {\n // This ensures our checkboxes sets the value only once for formData (not within the individual checkboxes)\n this._setGroupExist();\n this._updateCheckboxSize();\n this._updateCheckboxTile();\n this._updateCheckboxShowError();\n this._getSlotDescriptionForAria();\n }\n\n updated(changedProperties: Map<string | symbol, unknown>) {\n if (changedProperties.has(\"required\")) {\n if (this.required) {\n this._setupCheckboxRequired();\n }\n }\n if (changedProperties.has(\"size\")) {\n this._updateCheckboxSize();\n }\n if (changedProperties.has(\"tile\")) {\n this._updateCheckboxTile();\n }\n if (changedProperties.has(\"inverted\")) {\n this._updateCheckboxInvert();\n }\n if (changedProperties.has(\"showError\")) {\n this._updateCheckboxShowError();\n }\n if (changedProperties.has(\"form\")) {\n this._updateCheckboxForm();\n }\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n private _setGroupExist() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox: any) => {\n checkbox.groupExist = true;\n });\n }\n\n // Initial update on checkbox required attribute\n private async _setupCheckboxRequired() {\n const firstCheckbox = this.querySelector(\"nys-checkbox\");\n const message = this.errorMessage || \"This field is required\";\n\n const firstCheckboxInput = firstCheckbox\n ? await (firstCheckbox as any).getInputElement()\n : null;\n\n this._internals.setValidity(\n { valueMissing: true },\n message,\n firstCheckboxInput ? firstCheckboxInput : this,\n );\n }\n\n // Updates the required attribute of each checkbox in the group\n private async _manageRequire() {\n if (this.required) {\n const message = this.errorMessage || \"Please select at least one option.\";\n const firstCheckbox = this.querySelector(\"nys-checkbox\");\n const firstCheckboxInput = firstCheckbox\n ? await (firstCheckbox as any).getInputElement().catch(() => null)\n : null;\n\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n // Loop through each child checkbox to see if one is checked.\n const atLeastOneChecked = Array.from(checkboxes).some(\n (checkbox: any) => checkbox.checked,\n );\n\n if (atLeastOneChecked) {\n this._internals.setValidity({});\n this.showError = false;\n } else {\n this._internals.setValidity(\n { valueMissing: true },\n message,\n firstCheckboxInput ? firstCheckboxInput : this,\n );\n this.showError = true;\n }\n }\n }\n\n // Updates the size of each checkbox in the group\n private _updateCheckboxSize() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n checkbox.setAttribute(\"size\", this.size);\n });\n }\n\n private _updateCheckboxTile() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n if (this.tile) {\n checkbox.toggleAttribute(\"tile\", true);\n } else {\n checkbox.removeAttribute(\"tile\");\n }\n });\n }\n\n private _updateCheckboxInvert() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n if (this.inverted) {\n checkbox.toggleAttribute(\"inverted\", true);\n } else {\n checkbox.removeAttribute(\"inverted\");\n }\n });\n }\n\n private _updateCheckboxShowError() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n if (this.showError) {\n checkbox.setAttribute(\"showError\", \"\");\n } else {\n checkbox.removeAttribute(\"showError\");\n }\n });\n }\n\n private _updateCheckboxForm() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n if (this.showError) {\n if (this.form !== null) {\n checkbox.setAttribute(\"form\", this.form);\n } else {\n checkbox.removeAttribute(\"form\");\n }\n } else {\n checkbox.removeAttribute(\"form\");\n }\n });\n }\n\n // Get the slotted text contents so native VO can attempt to announce it within the legend in the fieldset\n private _getSlotDescriptionForAria() {\n const slot = this.shadowRoot?.querySelector(\n 'slot[name=\"description\"]',\n ) as HTMLSlotElement;\n const nodes = slot?.assignedNodes({ flatten: true }) || [];\n\n this._slottedDescriptionText = nodes\n .map((node) => node.textContent?.trim())\n .filter(Boolean)\n .join(\", \");\n }\n\n // This callback is automatically called when the parent form is reset.\n public formResetCallback() {\n // Reset all child checkboxes\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox: any) => {\n checkbox.formResetCallback();\n });\n\n this._internals.setFormValue(\"\");\n\n // Reset validation UI\n this.showError = false;\n this._internals.setValidity({});\n\n // Re-render UI\n this.requestUpdate();\n }\n\n private async _handleInvalid(event: Event) {\n event.preventDefault();\n\n this.showError = true;\n this._manageRequire(); // Refresh validation message\n\n const firstCheckbox = this.querySelector(\"nys-checkbox\");\n const firstCheckboxInput = firstCheckbox\n ? await (firstCheckbox as any).getInputElement()\n : null;\n\n if (firstCheckboxInput) {\n // Focus only if this is the first invalid element (top-down approach)\n const form = this._internals.form;\n if (form) {\n const elements = Array.from(form.elements) as Array<\n HTMLElement & { checkValidity?: () => boolean }\n >;\n // Find the first element in the form that is invalid\n const firstInvalidElement = elements.find((element) => {\n // If element is checkboxgroup, we see if anyone checkboxes within the group is checked to fulfill required constraint\n if (element.tagName.toLowerCase() === \"nys-checkboxgroup\") {\n const allCheckboxes = Array.from(\n this.querySelectorAll(\"nys-checkbox\"),\n ) as any[];\n const hasCheckedCheckbox = allCheckboxes.filter(\n (checkbox) => checkbox.checked,\n );\n // Required constraint not met, continue logic to have this component be focused\n if (hasCheckedCheckbox.length === 0) {\n return element;\n }\n } else {\n return (\n typeof element.checkValidity === \"function\" &&\n !element.checkValidity()\n );\n }\n });\n\n if (firstInvalidElement === this) {\n firstCheckboxInput.focus();\n }\n } else {\n // If not part of a form, simply focus.\n firstCheckboxInput.focus();\n }\n }\n }\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n // Similar to how native forms handle multiple same-name fields, we group the selected values into a list for FormData.\n private _handleCheckboxChange(event: Event) {\n const customEvent = event as CustomEvent;\n const { name } = customEvent.detail;\n const checkboxes = Array.from(this.querySelectorAll(\"nys-checkbox\"));\n\n // Filter to only the checked ones and extract their values.\n const selectedValues = checkboxes\n .filter((checkbox: any) => checkbox.checked)\n .map((checkbox: any) => checkbox.value);\n\n this.name = name;\n\n this._internals.setFormValue(selectedValues.join(\", \"));\n\n this._manageRequire();\n }\n\n render() {\n return html`\n <div class=\"nys-checkboxgroup\">\n <nys-label\n for=${this.id + \"--native\"}\n label=${this.label}\n description=${this.description}\n flag=${this.required ? \"required\" : this.optional ? \"optional\" : \"\"}\n tooltip=${this.tooltip}\n ?inverted=${this.inverted}\n >\n <slot name=\"description\" slot=\"description\">${this.description}</slot>\n </nys-label>\n <div class=\"nys-checkboxgroup__content\">\n <fieldset>\n <legend class=\"sr-only\">\n ${this.label}${this._slottedDescriptionText\n ? ` ${this._slottedDescriptionText}`\n : this.description\n ? ` ${this.description}`\n : \"\"}\n </legend>\n <slot></slot>\n </fieldset>\n </div>\n <nys-errormessage\n ?showError=${this.showError}\n errorMessage=${this._internals.validationMessage || this.errorMessage}\n .showDivider=${!this.tile}\n ></nys-errormessage>\n </div>\n `;\n }\n}\n\nif (!customElements.get(\"nys-checkboxgroup\")) {\n customElements.define(\"nys-checkboxgroup\", NysCheckboxgroup);\n}\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport \"./nys-checkboxgroup\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-checkbox.scss?inline\";\n\nlet checkboxIdCounter = 0;\n\n/**\n * A checkbox input for binary choices or multi-select lists. Can be used standalone or in a `nys-checkboxgroup`.\n * Form-associated with validation via ElementInternals.\n *\n * Use for binary decisions (agree/disagree) or selecting multiple options from a list.\n * For single selection from 2-6 options, use `nys-radiobutton`. For immediate state changes, use `nys-toggle`.\n *\n * @summary Checkbox for binary choices or multi-select options.\n * @element nys-checkbox\n *\n * @slot description - Custom HTML description content.\n *\n * @fires nys-change - Fired when checked state changes. Detail: `{id, checked, name, value}`.\n * @fires nys-focus - Fired when checkbox gains focus.\n * @fires nys-blur - Fired when checkbox loses focus.\n *\n * @example Single checkbox\n * ```html\n * <nys-checkbox label=\"I agree to the terms\" name=\"terms\" required></nys-checkbox>\n * ```\n *\n * @example Checkbox group\n * ```html\n * <nys-checkboxgroup label=\"Select landmarks\">\n * <nys-checkbox name=\"landmarks\" value=\"adirondacks\" label=\"Adirondacks\"></nys-checkbox>\n * <nys-checkbox name=\"landmarks\" value=\"niagara\" label=\"Niagara Falls\"></nys-checkbox>\n * </nys-checkboxgroup>\n * ```\n */\n\nexport class NysCheckbox extends LitElement {\n static styles = unsafeCSS(styles);\n\n /** Whether checkbox is checked. */\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /** Prevents interaction. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Marks as required. Validates that checkbox is checked. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Visible label text. Required for accessibility. */\n @property({ type: String }) label = \"\";\n\n /** Helper text below label. Use slot for custom HTML. */\n @property({ type: String }) description = \"\";\n\n /** Unique identifier. Auto-generated if not provided. */\n @property({ type: String, reflect: true }) id = \"\";\n\n /** Name for form submission. Use same name for grouped checkboxes. */\n @property({ type: String, reflect: true }) name = \"\";\n\n /** Value submitted when checked. */\n @property({ type: String }) value = \"\";\n\n /** Form `id` to associate with when checkbox is outside form element. */\n @property({ type: String, reflect: true }) form: string | null = null;\n\n /** Shows error message when true. */\n @property({ type: Boolean, reflect: true }) showError = false;\n\n /** Error message text. Shown only when `showError` is true. */\n @property({ type: String }) errorMessage = \"\";\n\n /** Internal: Set by parent checkboxgroup. Do not set manually. */\n @property({ type: Boolean }) groupExist = false;\n\n /** Renders as tile with larger clickable area. Apply to group for consistency. */\n @property({ type: Boolean, reflect: true }) tile = false;\n\n /** Adjusts colors for dark backgrounds. */\n @property({ type: Boolean, reflect: true }) inverted = false;\n\n /** Tooltip text shown on hover/focus of info icon. */\n @property({ type: String }) tooltip = \"\";\n\n /**\n * Checkbox size: `sm` (24px) or `md` (32px, default).\n * @default \"md\"\n */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n public async getInputElement(): Promise<HTMLInputElement | null> {\n await this.updateComplete; // Wait for the component to finish rendering\n return this.shadowRoot?.querySelector(\"input\") || null;\n }\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-checkbox-${Date.now()}-${checkboxIdCounter++}`;\n }\n this.addEventListener(\"invalid\", this._handleInvalid);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"invalid\", this._handleInvalid);\n }\n\n firstUpdated() {\n // This ensures our element always participates in the form\n this._setValue();\n this._manageRequire();\n this._manageLabelClick();\n }\n\n /**\n * Form Integration\n * --------------------------------------------------------------------------\n */\n\n private _setValue() {\n if (!this.groupExist) {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n }\n\n private _manageRequire() {\n const input = this.shadowRoot?.querySelector(\"input\");\n const message = this.errorMessage || \"This field is required\";\n if (!input) return;\n\n if (this.required && !this.checked) {\n this._internals.ariaRequired = \"true\";\n this._internals.setValidity({ valueMissing: true }, message, input);\n } else {\n this._internals.setValidity({});\n }\n }\n\n private _setValidityMessage(message: string = \"\") {\n const input = this.shadowRoot?.querySelector(\"input\");\n if (!input) return;\n\n // Toggle the HTML <div> tag error message\n this.showError = !!message;\n // If user sets errorMessage, this will always override the native validation message\n if (this.errorMessage?.trim() && message !== \"\") {\n message = this.errorMessage;\n }\n\n this._internals.setValidity(\n message ? { customError: true } : {},\n message,\n input,\n );\n }\n\n private _validate() {\n const input = this.shadowRoot?.querySelector(\"input\");\n if (!input) return;\n\n // Get the native validation state\n const validity = input.validity;\n let message = \"\";\n\n if (validity.valueMissing) {\n message = \"This field is required\";\n }\n\n this._setValidityMessage(message);\n }\n\n // Called automatically when the parent form is reset\n public formResetCallback() {\n this.checked = false;\n\n this._internals.setFormValue(null);\n\n const input = this.shadowRoot?.querySelector(\"input\");\n if (input) {\n input.checked = false;\n }\n\n // Reset validation UI\n this.showError = false;\n this.errorMessage = \"\";\n this._internals.setValidity({});\n\n // Re-render UI\n this.requestUpdate();\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n // This helper function is called to perform the element's native validation.\n checkValidity(): boolean {\n // If the radiogroup is required but no radio is selected, return false.\n if (this.required && !this.checked) {\n return false;\n }\n\n // Otherwise, optionally check the native input's validity if available.\n const input = this.shadowRoot?.querySelector(\"input\");\n return input ? input.checkValidity() : true;\n }\n\n private _handleInvalid(event: Event) {\n event.preventDefault();\n\n this.showError = true;\n this._validate(); // Make sure validation message appears\n\n const input = this.shadowRoot?.querySelector(\"input\");\n if (input) {\n // Focus only if this is the first invalid element (top-down approach)\n const form = this._internals.form;\n if (form) {\n const elements = Array.from(form.elements) as Array<\n HTMLElement & { checkValidity?: () => boolean }\n >;\n // Find the first element in the form that is invalid\n const firstInvalidElement = elements.find(\n (element) =>\n typeof element.checkValidity === \"function\" &&\n !element.checkValidity(),\n );\n if (firstInvalidElement === this) {\n input.focus();\n }\n } else {\n // If not part of a form, simply focus.\n input.focus();\n }\n }\n }\n\n private _manageLabelClick = () => {\n const wrapper = this.shadowRoot?.querySelector(\".nys-checkbox\");\n const inputEl = this.shadowRoot?.querySelector(\"input\");\n\n if (!wrapper || !inputEl) return;\n\n wrapper.addEventListener(\"click\", (e) => {\n // Avoid double toggling the checkbox. Already handled by input\n if ((e.target as HTMLElement).tagName.toLowerCase() === \"input\") return;\n\n if (!this.disabled) {\n inputEl.click();\n }\n });\n };\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n private _emitChangeEvent() {\n this.dispatchEvent(\n new CustomEvent(\"nys-change\", {\n detail: {\n id: this.id,\n checked: this.checked,\n name: this.name,\n value: this.value,\n },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n // Handle checkbox change event\n private _handleChange(e: Event) {\n const { checked } = e.target as HTMLInputElement;\n this.checked = checked;\n if (!this.groupExist) {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n this._validate();\n this._emitChangeEvent();\n }\n\n private _handleFocus() {\n this.dispatchEvent(new Event(\"nys-focus\"));\n }\n\n private _handleBlur() {\n this.dispatchEvent(new Event(\"nys-blur\"));\n }\n\n private async _handleKeydown(e: KeyboardEvent) {\n if (e.code === \"Space\") {\n e.preventDefault();\n if (!this.disabled) {\n this.checked = !this.checked;\n this._internals.setFormValue(this.checked ? this.value : null);\n\n // Wait for DOM updates before validating. This is necessary to ensure the native input validation state is updated before this.validate().\n await this.updateComplete;\n this._validate();\n\n this._emitChangeEvent();\n }\n }\n }\n\n render() {\n return html`\n <div class=\"nys-checkbox\">\n <div class=\"nys-checkbox__checkboxwrapper\">\n <input\n id=${this.id + \"--native\"}\n class=\"nys-checkbox__checkbox\"\n type=\"checkbox\"\n name=\"${ifDefined(this.name ? this.name : undefined)}\"\n .checked=${this.checked}\n ?disabled=${this.disabled}\n .value=${this.value}\n ?required=\"${this.required}\"\n form=${ifDefined(this.form || undefined)}\n aria-checked=\"${this.checked}\"\n aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n aria-required=\"${this.required}\"\n aria-describedby=\"group-info\"\n @change=\"${this._handleChange}\"\n @focus=\"${this._handleFocus}\"\n @blur=\"${this._handleBlur}\"\n @keydown=\"${this._handleKeydown}\"\n aria-label=\"${this.label}\"\n />\n ${this.checked\n ? html`<nys-icon\n name=\"check\"\n size=\"${this.size === \"md\"\n ? \"4xl\"\n : this.size === \"sm\"\n ? \"2xl\"\n : \"4xl\"}\"\n class=\"nys-checkbox__icon\"\n ></nys-icon>`\n : \"\"}\n </div>\n ${this.label &&\n html`\n <nys-label\n tooltip=${this.tooltip}\n for=${this.id + \"--native\"}\n label=${this.label}\n description=${ifDefined(this.description ?? undefined)}\n flag=${ifDefined(this.required ? \"required\" : undefined)}\n ?inverted=${this.inverted}\n >\n <slot name=\"description\" slot=\"description\"\n >${this.description}</slot\n >\n </nys-label>\n `}\n </div>\n ${this.parentElement?.tagName.toLowerCase() !== \"nys-checkboxgroup\"\n ? html`<nys-errormessage\n id=\"single-error-message\"\n ?showError=${this.showError}\n errorMessage=${this._internals.validationMessage ||\n this.errorMessage}\n .showDivider=${!this.tile}\n ></nys-errormessage>`\n : \"\"}\n `;\n }\n}\n\nif (!customElements.get(\"nys-checkbox\")) {\n customElements.define(\"nys-checkbox\", NysCheckbox);\n}\n"],"names":["checkboxgroupIdCounter","_NysCheckboxgroup","LitElement","changedProperties","checkbox","firstCheckbox","message","firstCheckboxInput","checkboxes","nodes","node","event","form","element","customEvent","name","selectedValues","html","unsafeCSS","styles","NysCheckboxgroup","__decorateClass","property","state","checkboxIdCounter","_NysCheckbox","wrapper","inputEl","e","input","validity","checked","ifDefined","NysCheckbox"],"mappings":"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"}
1
+ {"version":3,"file":"nys-checkbox.js","sources":["../src/nys-checkboxgroup.ts","../src/nys-checkbox.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-checkbox.scss?inline\";\nimport type { NysCheckbox } from \"./nys-checkbox\";\n\nlet checkboxgroupIdCounter = 0;\n\n/**\n * A container for grouping multiple `nys-checkbox` components as a single form control.\n * Handles validation, required constraints, and submits comma-separated values.\n *\n * Use to allow users to select multiple options from a list. Apply `tile`, `size`, and `inverted` to the group\n * and all children inherit these styles automatically.\n *\n * @summary Container for grouping checkboxes as a single form control.\n * @element nys-checkboxgroup\n *\n * @slot - Default slot for `nys-checkbox` elements.\n * @slot description - Custom HTML description content.\n *\n * @example Basic checkbox group\n * ```html\n * <nys-checkboxgroup label=\"Select landmarks\" required>\n * <nys-checkbox name=\"landmarks\" value=\"adirondacks\" label=\"Adirondacks\"></nys-checkbox>\n * <nys-checkbox name=\"landmarks\" value=\"niagara\" label=\"Niagara Falls\"></nys-checkbox>\n * </nys-checkboxgroup>\n * ```\n */\n\nexport class NysCheckboxgroup 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. Set on group, not individual checkboxes. */\n @property({ type: String, reflect: true }) name = \"\";\n\n /** Requires at least one checkbox to be checked. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Shows \"Optional\" flag. */\n @property({ type: Boolean, reflect: true }) optional = false;\n\n /** Shows error message when true. */\n @property({ type: Boolean, reflect: true }) showError = false;\n\n /** Error message text. Shown only when `showError` is true. */\n @property({ type: String }) errorMessage = \"\";\n\n /** Visible label text for the group. */\n @property({ type: String }) label = \"\";\n\n /** Helper text below label. Use slot for custom HTML. */\n @property({ type: String }) description = \"\";\n\n /** Renders all checkboxes as tiles with larger clickable area. */\n @property({ type: Boolean, reflect: true }) tile = false;\n\n /** Tooltip text shown on hover/focus of info icon. */\n @property({ type: String }) tooltip = \"\";\n\n /** Adjusts colors for dark backgrounds. Applied to all children. */\n @property({ type: Boolean, reflect: true }) inverted = false;\n\n /** Form `id` to associate with. Applied to all children. */\n @property({ type: String, reflect: true }) form: string | null = null;\n\n /**\n * Checkbox size for all children: `sm` (24px) or `md` (32px, default).\n * @default \"md\"\n */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n @state() private _slottedDescriptionText = \"\";\n @state() private _hasOtherError = false;\n @state() private _otherErrorCheckbox: NysCheckbox | null = null;\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-checkboxgroup-${Date.now()}-${checkboxgroupIdCounter++}`;\n }\n this.addEventListener(\"nys-change\", this._handleCheckboxChange);\n this.addEventListener(\"invalid\", this._handleInvalid);\n this.addEventListener(\"nys-error\", this._handleChildError);\n this.addEventListener(\"nys-error-clear\", this._handleChildErrorClear);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"nys-change\", this._handleCheckboxChange);\n this.removeEventListener(\"invalid\", this._handleInvalid);\n this.removeEventListener(\"nys-error\", this._handleChildError);\n this.removeEventListener(\"nys-error-clear\", this._handleChildErrorClear);\n }\n\n firstUpdated() {\n // This ensures our checkboxes sets the value only once for formData (not within the individual checkboxes)\n this._setGroupExist();\n this._updateCheckboxSize();\n this._updateCheckboxTile();\n this._updateCheckboxShowError();\n this._getSlotDescriptionForAria();\n }\n\n updated(changedProperties: Map<string | symbol, unknown>) {\n if (changedProperties.has(\"required\")) {\n if (this.required) {\n this._setupCheckboxRequired();\n }\n }\n if (changedProperties.has(\"size\")) {\n this._updateCheckboxSize();\n }\n if (changedProperties.has(\"tile\")) {\n this._updateCheckboxTile();\n }\n if (changedProperties.has(\"inverted\")) {\n this._updateCheckboxInvert();\n }\n if (changedProperties.has(\"showError\")) {\n this._updateCheckboxShowError();\n }\n if (changedProperties.has(\"form\")) {\n this._updateCheckboxForm();\n }\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n private _hasAtLeastOneChecked() {\n return Array.from(this.querySelectorAll(\"nys-checkbox\")).some(\n (checkbox: any) => checkbox.checked,\n );\n }\n\n private _setGroupExist() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox: any) => {\n checkbox.groupExist = true;\n });\n }\n\n // Initial update on checkbox required attribute\n private async _setupCheckboxRequired() {\n const firstCheckbox = this.querySelector(\"nys-checkbox\");\n const message = this.errorMessage || \"This field is required\";\n\n const firstCheckboxInput = firstCheckbox\n ? await (firstCheckbox as any).getInputElement()\n : null;\n\n this._internals.setValidity(\n { valueMissing: true },\n message,\n firstCheckboxInput ? firstCheckboxInput : this,\n );\n }\n\n // Updates the required attribute of each checkbox in the group\n private async _manageRequire() {\n if (!this.required) return;\n\n const message =\n this.errorMessage || \"You must make a selection to proceed.\";\n const checkboxes = Array.from(\n this.querySelectorAll(\"nys-checkbox\"),\n ) as any[];\n\n // Loop through each child checkbox to see if one is checked.\n const atLeastOneChecked = this._hasAtLeastOneChecked();\n\n const firstCheckboxInput = checkboxes\n ? await checkboxes[0].getInputElement().catch(() => null)\n : null;\n\n // Always clear validation first to prevent message lingering\n this._internals.setValidity({});\n this.showError = false;\n\n if (!atLeastOneChecked) {\n // Only set valueMissing if there's no active \"other\" error\n // If there IS an \"other\" error, keep that as the primary error\n if (!this._hasOtherError) {\n this._internals.setValidity(\n { valueMissing: true },\n message,\n firstCheckboxInput ?? this,\n );\n this.showError = true;\n } else {\n // Re-set the other error since we just cleared everything\n this._setCustomOtherError();\n this.showError = true;\n }\n } else {\n // At least one checkbox is checked\n // If there's an \"other\" error, reset it since we cleared everything above\n if (this._hasOtherError && this._otherErrorCheckbox) {\n this._setCustomOtherError();\n this.showError = true;\n }\n }\n }\n\n private _setCustomOtherError() {\n const textInput =\n this._otherErrorCheckbox?.shadowRoot?.querySelector(\"nys-textinput\");\n const targetElement = textInput || this._otherErrorCheckbox;\n this._internals.setValidity(\n { customError: true },\n \"Please complete this field.\",\n targetElement as HTMLElement,\n );\n }\n\n // Updates the size of each checkbox in the group\n private _updateCheckboxSize() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n checkbox.setAttribute(\"size\", this.size);\n });\n }\n\n private _updateCheckboxTile() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n if (this.tile) {\n checkbox.toggleAttribute(\"tile\", true);\n } else {\n checkbox.removeAttribute(\"tile\");\n }\n });\n }\n\n private _updateCheckboxInvert() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n if (this.inverted) {\n checkbox.toggleAttribute(\"inverted\", true);\n } else {\n checkbox.removeAttribute(\"inverted\");\n }\n });\n }\n\n private _updateCheckboxShowError() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n if (this.showError) {\n checkbox.setAttribute(\"showError\", \"\");\n } else {\n checkbox.removeAttribute(\"showError\");\n }\n });\n }\n\n private _updateCheckboxForm() {\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox) => {\n if (this.showError) {\n if (this.form !== null) {\n checkbox.setAttribute(\"form\", this.form);\n } else {\n checkbox.removeAttribute(\"form\");\n }\n } else {\n checkbox.removeAttribute(\"form\");\n }\n });\n }\n\n // Get the slotted text contents so native VO can attempt to announce it within the legend in the fieldset\n private _getSlotDescriptionForAria() {\n const slot = this.shadowRoot?.querySelector(\n 'slot[name=\"description\"]',\n ) as HTMLSlotElement;\n const nodes = slot?.assignedNodes({ flatten: true }) || [];\n\n this._slottedDescriptionText = nodes\n .map((node) => node.textContent?.trim())\n .filter(Boolean)\n .join(\", \");\n }\n\n // This callback is automatically called when the parent form is reset.\n public formResetCallback() {\n // Reset all child checkboxes\n const checkboxes = this.querySelectorAll(\"nys-checkbox\");\n checkboxes.forEach((checkbox: any) => {\n checkbox.formResetCallback();\n });\n\n this._internals.setFormValue(\"\");\n\n // Reset validation UI\n this.showError = false;\n this._internals.setValidity({});\n\n // Re-render UI\n this.requestUpdate();\n }\n\n private async _handleInvalid(event: Event) {\n event.preventDefault();\n\n // Priority 1: Focus \"other\" text input when customError is set\n if (this._internals.validity.customError) {\n const checkboxes = Array.from(\n this.querySelectorAll(\"nys-checkbox\"),\n ) as NysCheckbox[];\n\n const otherCheckbox = checkboxes.find(\n (checkbox) => checkbox.other && checkbox.checked,\n );\n\n if (otherCheckbox) {\n const textInput =\n otherCheckbox.shadowRoot?.querySelector(\"nys-textinput\");\n\n if (textInput) {\n await (textInput as any).updateComplete;\n (textInput as HTMLElement).focus();\n return;\n }\n }\n }\n\n // Priority 2: Handle valueMissing (required validation)\n if (this._internals.validity.valueMissing) {\n this.showError = true;\n this._manageRequire(); // Refresh validation message\n\n // Fallback behavior\n const firstCheckbox = this.querySelector(\"nys-checkbox\");\n const firstCheckboxInput = firstCheckbox\n ? await (firstCheckbox as any).getInputElement()\n : null;\n\n if (firstCheckboxInput) {\n // Focus only if this is the first invalid element (top-down approach)\n const form = this._internals.form;\n if (form) {\n const elements = Array.from(form.elements) as Array<\n HTMLElement & { checkValidity?: () => boolean }\n >;\n // Find the first element in the form that is invalid\n const firstInvalidElement = elements.find((element) => {\n // If element is <nys-checkboxgroup>, we see if anyone checkboxes within the group is checked to fulfill required constraint\n if (element.tagName.toLowerCase() === \"nys-checkboxgroup\") {\n const allCheckboxes = Array.from(\n this.querySelectorAll(\"nys-checkbox\"),\n ) as any[];\n const hasCheckedCheckbox = allCheckboxes.filter(\n (checkbox) => checkbox.checked,\n );\n // Required constraint not met, continue logic to have this component be focused\n if (hasCheckedCheckbox.length === 0) {\n return element;\n }\n } else {\n return (\n typeof element.checkValidity === \"function\" &&\n !element.checkValidity()\n );\n }\n });\n\n if (firstInvalidElement === this) {\n firstCheckboxInput.focus();\n }\n } else {\n // If not part of a form, simply focus.\n firstCheckboxInput.focus();\n }\n }\n }\n }\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n // Similar to how native forms handle multiple same-name fields, we group the selected values into a list for FormData.\n private _handleCheckboxChange(event: Event) {\n const customEvent = event as CustomEvent;\n const { name } = customEvent.detail;\n const checkboxes = Array.from(\n this.querySelectorAll(\"nys-checkbox\"),\n ) as NysCheckbox[];\n\n // Filter to only the checked ones and extract their values.\n const selectedValues = checkboxes\n .filter((checkbox: any) => checkbox.checked)\n .map((checkbox: any) => checkbox.value);\n\n this.name = name;\n this._internals.setFormValue(selectedValues.join(\", \"));\n\n // Check \"other\" inputs first (they take priority)\n this._checkOtherInputs(checkboxes);\n\n // Only run required validation if no \"other\" error is active\n if (!this._hasOtherError) {\n this._manageRequire();\n }\n }\n\n private async _handleChildError(event: Event) {\n event.stopPropagation();\n\n const { sourceCheckbox } = (event as CustomEvent).detail;\n if (!sourceCheckbox) return;\n\n // Track which checkbox has the error\n this._hasOtherError = true;\n this._otherErrorCheckbox = sourceCheckbox;\n this.showError = true;\n\n this._setCustomOtherError();\n }\n\n private _handleChildErrorClear(event: Event) {\n const customEvent = event as CustomEvent;\n const sourceCheckbox = customEvent.detail?.sourceCheckbox;\n\n if (\n this._otherErrorCheckbox &&\n sourceCheckbox !== this._otherErrorCheckbox\n ) {\n return;\n }\n\n // Clear the old validation state first so to prevent the old customError message from persisting\n this._internals.setValidity({});\n this.showError = false;\n\n // Then check if we need to set a new required error\n if (this.required && !this._hasAtLeastOneChecked()) {\n this._manageRequire();\n }\n }\n\n private async _checkOtherInputs(checkboxes: NysCheckbox[]) {\n let foundInvalidOther = false;\n\n for (const checkbox of checkboxes) {\n if (checkbox.checked && checkbox.other) {\n const value = checkbox.value.trim();\n\n const hasUserInteracted = (checkbox as any)._hasUserInteracted;\n\n if (!hasUserInteracted) {\n // User hasn't interacted yet, skip validation\n continue;\n }\n\n if (!value || value === \"\") {\n this._hasOtherError = true;\n this._otherErrorCheckbox = checkbox;\n this._setCustomOtherError();\n this.showError = true;\n foundInvalidOther = true;\n return;\n }\n }\n }\n\n // If we checked all and found no invalid \"other\" inputs, clear that error\n if (!foundInvalidOther && this._hasOtherError) {\n this._hasOtherError = false;\n this._otherErrorCheckbox = null;\n\n // Re-check required constraint\n if (this.required) {\n this._manageRequire();\n } else {\n this._internals.setValidity({});\n this.showError = false;\n }\n }\n }\n\n render() {\n return html`\n <fieldset\n aria-label=\"${this.label}${this._slottedDescriptionText\n ? ` ${this._slottedDescriptionText}`\n : this.description\n ? ` ${this.description}`\n : \"\"}\"\n class=\"nys-checkboxgroup\"\n role=\"radiogroup\"\n >\n <nys-label\n for=${this.id + \"--native\"}\n label=${this.label}\n description=${this.description}\n flag=${this.required ? \"required\" : this.optional ? \"optional\" : \"\"}\n tooltip=${this.tooltip}\n ?inverted=${this.inverted}\n >\n <slot name=\"description\" slot=\"description\">${this.description}</slot>\n </nys-label>\n <div class=\"nys-checkboxgroup__content\">\n <slot></slot>\n </div>\n <nys-errormessage\n ?showError=${this.showError}\n errorMessage=${this._internals.validationMessage || this.errorMessage}\n .showDivider=${!this.tile}\n ></nys-errormessage>\n </fieldset>\n `;\n }\n}\n\nif (!customElements.get(\"nys-checkboxgroup\")) {\n customElements.define(\"nys-checkboxgroup\", NysCheckboxgroup);\n}\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport \"./nys-checkboxgroup\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-checkbox.scss?inline\";\n\nlet checkboxIdCounter = 0;\n\n/**\n * A checkbox input for binary choices or multi-select lists. Can be used standalone or in a `nys-checkboxgroup`.\n * Form-associated with validation via ElementInternals.\n *\n * Use for binary decisions (agree/disagree) or selecting multiple options from a list.\n * For single selection from 2-6 options, use `nys-radiobutton`. For immediate state changes, use `nys-toggle`.\n *\n * @summary Checkbox for binary choices or multi-select options.\n * @element nys-checkbox\n *\n * @slot description - Custom HTML description content.\n *\n * @fires nys-change - Fired when checked state changes. Detail: `{id, checked, name, value}`.\n * @fires nys-focus - Fired when checkbox gains focus.\n * @fires nys-blur - Fired when checkbox loses focus.\n *\n * @example Single checkbox\n * ```html\n * <nys-checkbox label=\"I agree to the terms\" name=\"terms\" required></nys-checkbox>\n * ```\n *\n * @example Checkbox group\n * ```html\n * <nys-checkboxgroup label=\"Select landmarks\">\n * <nys-checkbox name=\"landmarks\" value=\"adirondacks\" label=\"Adirondacks\"></nys-checkbox>\n * <nys-checkbox name=\"landmarks\" value=\"niagara\" label=\"Niagara Falls\"></nys-checkbox>\n * </nys-checkboxgroup>\n * ```\n */\n\nexport class NysCheckbox extends LitElement {\n static styles = unsafeCSS(styles);\n\n /** Whether checkbox is checked. */\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /** Prevents interaction. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Marks as required. Validates that checkbox is checked. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Visible label text. Required for accessibility. */\n @property({ type: String }) label = \"\";\n\n /** Helper text below label. Use slot for custom HTML. */\n @property({ type: String }) description = \"\";\n\n /** Unique identifier. Auto-generated if not provided. */\n @property({ type: String, reflect: true }) id = \"\";\n\n /** Name for form submission. Use same name for grouped checkboxes. */\n @property({ type: String, reflect: true }) name = \"\";\n\n /** Value submitted when checked. */\n @property({ type: String }) value = \"\";\n\n /** Form `id` to associate with when checkbox is outside form element. */\n @property({ type: String, reflect: true }) form: string | null = null;\n\n /** Shows error message when true. */\n @property({ type: Boolean, reflect: true }) showError = false;\n\n /** Error message text. Shown only when `showError` is true. */\n @property({ type: String }) errorMessage = \"\";\n\n /** Internal: Set by parent checkboxgroup. Do not set manually. */\n @property({ type: Boolean }) groupExist = false;\n\n /** Renders as tile with larger clickable area. Apply to group for consistency. */\n @property({ type: Boolean, reflect: true }) tile = false;\n\n /** Adjusts colors for dark backgrounds. */\n @property({ type: Boolean, reflect: true }) inverted = false;\n\n /** Tooltip text shown on hover/focus of info icon. */\n @property({ type: String }) tooltip = \"\";\n\n /**\n * Checkbox size: `sm` (24px) or `md` (32px, default).\n * @default \"md\"\n */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n @property({ type: Boolean, reflect: true }) other = false;\n @property({ type: Boolean }) showOtherError = false;\n @state() private isMobile = window.innerWidth < 480;\n\n private _hasUserInteracted = false; // need this flag for \"eager mode\"\n\n public async getInputElement(): Promise<HTMLInputElement | null> {\n await this.updateComplete; // Wait for the component to finish rendering\n return this.shadowRoot?.querySelector(\"input\") || null;\n }\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-checkbox-${Date.now()}-${checkboxIdCounter++}`;\n }\n this.addEventListener(\"invalid\", this._handleInvalid);\n this.addEventListener(\"blur\", this._handleBlur);\n window.addEventListener(\"resize\", this._handleResize);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"invalid\", this._handleInvalid);\n this.removeEventListener(\"blur\", this._handleBlur);\n window.removeEventListener(\"resize\", this._handleResize);\n }\n\n firstUpdated() {\n // This ensures our element always participates in the form\n this._setValue();\n this._manageRequire();\n this._manageLabelClick();\n }\n\n /**\n * Form Integration\n * --------------------------------------------------------------------------\n */\n\n private _setValue() {\n if (!this.groupExist) {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n }\n\n private _manageRequire() {\n const input = this.shadowRoot?.querySelector(\"input\");\n const message = this.errorMessage || \"This field is required\";\n if (!input) return;\n\n if (this.required && !this.checked) {\n this._internals.ariaRequired = \"true\";\n this._internals.setValidity({ valueMissing: true }, message, input);\n } else {\n this._internals.setValidity({});\n }\n }\n\n private _setValidityMessage(message: string = \"\") {\n const input = this.shadowRoot?.querySelector(\"input\");\n if (!input) return;\n\n // Toggle the HTML <div> tag error message\n this.showError = !!message;\n // If user sets errorMessage, this will always override the native validation message\n if (this.errorMessage?.trim() && message !== \"\") {\n message = this.errorMessage;\n }\n\n this._internals.setValidity(\n message ? { customError: true } : {},\n message,\n input,\n );\n }\n\n private _validate() {\n const input = this.shadowRoot?.querySelector(\"input\");\n if (!input) return;\n\n // Get the native validation state\n const validity = input.validity;\n let message = \"\";\n\n if (validity.valueMissing) {\n message = \"This field is required\";\n }\n\n this._setValidityMessage(message);\n }\n\n // Called automatically when the parent form is reset\n public formResetCallback() {\n this.checked = false;\n\n this._internals.setFormValue(null);\n\n const input = this.shadowRoot?.querySelector(\"input\");\n if (input) {\n input.checked = false;\n }\n\n // Reset validation UI\n this.showError = false;\n this.errorMessage = \"\";\n this._internals.setValidity({});\n\n // Re-render UI\n this.requestUpdate();\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n // This helper function is called to perform the element's native validation.\n checkValidity(): boolean {\n // If the radiogroup is required but no radio is selected, return false.\n if (this.required && !this.checked) {\n return false;\n }\n\n // Otherwise, optionally check the native input's validity if available.\n const input = this.shadowRoot?.querySelector(\"input\");\n return input ? input.checkValidity() : true;\n }\n\n private _handleInvalid(event: Event) {\n event.preventDefault();\n\n this.showError = true;\n this._validate(); // Make sure validation message appears\n\n const input = this.shadowRoot?.querySelector(\"input\");\n if (input) {\n // Focus only if this is the first invalid element (top-down approach)\n const form = this._internals.form;\n if (form) {\n const elements = Array.from(form.elements) as Array<\n HTMLElement & { checkValidity?: () => boolean }\n >;\n // Find the first element in the form that is invalid\n const firstInvalidElement = elements.find(\n (element) =>\n typeof element.checkValidity === \"function\" &&\n !element.checkValidity(),\n );\n if (firstInvalidElement === this) {\n input.focus();\n }\n } else {\n // If not part of a form, simply focus.\n input.focus();\n }\n }\n }\n\n private _manageLabelClick = () => {\n const main = this.shadowRoot?.querySelector(\n \".nys-checkbox__main-container\",\n );\n const inputEl = this.shadowRoot?.querySelector(\"input\");\n\n if (!main || !inputEl) return;\n\n main.addEventListener(\"click\", (e) => {\n const target = e.target as HTMLElement;\n\n // Let native input behavior work. Avoid double toggling the checkbox.\n if (target.tagName.toLowerCase() === \"input\") return;\n\n if (!this.disabled) {\n inputEl.click();\n inputEl.focus();\n }\n });\n };\n\n get _hasDescription() {\n // This accounts for both description prop or slotted content. Used for styling text alignment.\n const slot = this.querySelector('[slot=\"description\"]');\n return !!this.description || !!slot;\n }\n\n private _handleResize = () => {\n this.isMobile = window.innerWidth < 480;\n };\n\n /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n private _emitChangeEvent() {\n this.dispatchEvent(\n new CustomEvent(\"nys-change\", {\n detail: {\n id: this.id,\n checked: this.checked,\n name: this.name,\n value: this.value,\n },\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n // Handle checkbox change event\n private async _handleChange(e: Event) {\n const { checked } = e.target as HTMLInputElement;\n const wasChecked = this.checked;\n\n this.checked = checked;\n\n if (!this.groupExist) {\n this._internals.setFormValue(this.checked ? this.value : null);\n }\n\n // If unchecking \"other\", clear error state\n if (this.other && wasChecked && !checked) {\n this.showOtherError = false;\n this._hasUserInteracted = false;\n this._dispatchClearError();\n }\n\n this._validate();\n this._emitChangeEvent();\n }\n\n private _handleFocus() {\n this.dispatchEvent(new Event(\"nys-focus\"));\n }\n\n private _handleBlur() {\n this.dispatchEvent(new Event(\"nys-blur\"));\n\n if (this.other && this.checked) {\n this._hasUserInteracted = true;\n this._validateOtherAndEmitError();\n }\n }\n\n private _handleTextInputBlur() {\n this._hasUserInteracted = true;\n this._validateOtherAndEmitError();\n }\n\n private async _handleKeydown(e: KeyboardEvent) {\n if (e.code === \"Space\") {\n e.preventDefault();\n if (!this.disabled) {\n this.checked = !this.checked;\n this._internals.setFormValue(this.checked ? this.value : null);\n\n // Wait for DOM updates before validating. This is necessary to ensure the native input validation state is updated before this.validate().\n await this.updateComplete;\n this._validate();\n\n this._emitChangeEvent();\n }\n }\n }\n\n private _handleTextInput(event: Event) {\n const input = event.target as HTMLInputElement;\n let newValue = input.value;\n this.value = newValue;\n\n if (this._hasUserInteracted) {\n this._validateOtherAndEmitError();\n }\n\n this._emitChangeEvent();\n }\n\n private _validateOtherAndEmitError() {\n if (!this.other) return;\n\n // Prevent early validation of the \"other\" input before the user interacts with it.\n // Additionally clear validation when \"other\" checkbox is unchecked\n if (!this.checked || !this._hasUserInteracted) {\n this.showOtherError = false;\n\n this._dispatchClearError();\n return;\n }\n\n const isInvalid = this.value.trim() === \"\";\n this.showOtherError = isInvalid;\n\n if (isInvalid) {\n this.dispatchEvent(\n new CustomEvent(\"nys-error\", {\n detail: {\n id: this.id,\n name: this.name,\n type: \"other\",\n message: \"Please enter a value for this option.\",\n sourceCheckbox: this,\n },\n bubbles: true,\n composed: true,\n }),\n );\n }\n }\n\n private _dispatchClearError() {\n this.dispatchEvent(\n new CustomEvent(\"nys-error-clear\", {\n bubbles: true,\n composed: true,\n }),\n );\n }\n\n render() {\n return html`\n <div class=\"nys-checkbox\">\n <div\n class=\"nys-checkbox__main-container ${this._hasDescription\n ? \"has-description\"\n : \"\"}\"\n >\n <div class=\"nys-checkbox__checkbox-wrapper\">\n <input\n id=${this.id + \"--native\"}\n class=\"nys-checkbox__checkbox\"\n type=\"checkbox\"\n name=\"${ifDefined(this.name ? this.name : undefined)}\"\n .checked=${this.checked}\n ?disabled=${this.disabled}\n .value=${this.value}\n ?required=\"${this.required}\"\n form=${ifDefined(this.form || undefined)}\n aria-checked=\"${this.checked}\"\n aria-disabled=\"${this.disabled ? \"true\" : \"false\"}\"\n aria-required=\"${this.required}\"\n aria-describedby=\"group-info\"\n @change=\"${this._handleChange}\"\n @focus=\"${this._handleFocus}\"\n @keydown=\"${this._handleKeydown}\"\n aria-label=${this.label ||\n ifDefined(this.other ? \"Other\" : undefined)}\n />\n ${this.checked\n ? html`<nys-icon\n name=\"check\"\n size=\"${this.size === \"md\"\n ? \"4xl\"\n : this.size === \"sm\"\n ? \"2xl\"\n : \"4xl\"}\"\n class=\"nys-checkbox__icon\"\n ></nys-icon>`\n : \"\"}\n </div>\n ${(this.label || this.other) &&\n html`\n <nys-label\n tooltip=${this.tooltip}\n for=${this.id + \"--native\"}\n label=\"${this.label || (this.other ? \"Other\" : \"\")}\"\n description=${ifDefined(this.description || undefined)}\n flag=${ifDefined(this.required ? \"required\" : undefined)}\n ?inverted=${this.inverted}\n >\n <slot name=\"description\" slot=\"description\"\n >${this.description}</slot\n >\n </nys-label>\n `}\n </div>\n <div class=\"nys-checkbox__other-container\">\n ${this.other && this.checked\n ? html`\n <nys-textinput\n .value=${this.value}\n id=${\"radiobutton-other-\" + this.id}\n @nys-input=${this._handleTextInput}\n @nys-blur=${this._handleTextInputBlur}\n ariaLabel=\"Other\"\n aria-invalid=${this.showOtherError ? \"true\" : \"false\"}\n width=${this.isMobile ? \"full\" : \"md\"}\n ></nys-textinput>\n `\n : \"\"}\n </div>\n </div>\n ${this.parentElement?.tagName.toLowerCase() !== \"nys-checkboxgroup\"\n ? html`<nys-errormessage\n id=\"single-error-message\"\n ?showError=${this.showError}\n errorMessage=${this._internals.validationMessage ||\n this.errorMessage}\n .showDivider=${!this.tile}\n ></nys-errormessage>`\n : \"\"}\n `;\n }\n}\n\nif (!customElements.get(\"nys-checkbox\")) {\n customElements.define(\"nys-checkbox\", NysCheckbox);\n}\n"],"names":["checkboxgroupIdCounter","_NysCheckboxgroup","LitElement","changedProperties","checkbox","firstCheckbox","message","firstCheckboxInput","checkboxes","atLeastOneChecked","targetElement","nodes","node","event","otherCheckbox","textInput","form","element","customEvent","name","selectedValues","sourceCheckbox","foundInvalidOther","value","html","unsafeCSS","styles","NysCheckboxgroup","__decorateClass","property","state","checkboxIdCounter","_NysCheckbox","main","inputEl","e","input","validity","slot","checked","wasChecked","newValue","isInvalid","ifDefined","NysCheckbox"],"mappings":"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"}
package/dist/nys-checkboxgroup.d.ts ADDED
@@ -0,0 +1,94 @@
1
+ import { LitElement } from "lit";
2
+ /**
3
+ * A container for grouping multiple `nys-checkbox` components as a single form control.
4
+ * Handles validation, required constraints, and submits comma-separated values.
5
+ *
6
+ * Use to allow users to select multiple options from a list. Apply `tile`, `size`, and `inverted` to the group
7
+ * and all children inherit these styles automatically.
8
+ *
9
+ * @summary Container for grouping checkboxes as a single form control.
10
+ * @element nys-checkboxgroup
11
+ *
12
+ * @slot - Default slot for `nys-checkbox` elements.
13
+ * @slot description - Custom HTML description content.
14
+ *
15
+ * @example Basic checkbox group
16
+ * ```html
17
+ * <nys-checkboxgroup label="Select landmarks" required>
18
+ * <nys-checkbox name="landmarks" value="adirondacks" label="Adirondacks"></nys-checkbox>
19
+ * <nys-checkbox name="landmarks" value="niagara" label="Niagara Falls"></nys-checkbox>
20
+ * </nys-checkboxgroup>
21
+ * ```
22
+ */
23
+ export declare class NysCheckboxgroup extends LitElement {
24
+ static styles: import("lit").CSSResult;
25
+ /** Unique identifier. Auto-generated if not provided. */
26
+ id: string;
27
+ /** Name for form submission. Set on group, not individual checkboxes. */
28
+ name: string;
29
+ /** Requires at least one checkbox to be checked. */
30
+ required: boolean;
31
+ /** Shows "Optional" flag. */
32
+ optional: boolean;
33
+ /** Shows error message when true. */
34
+ showError: boolean;
35
+ /** Error message text. Shown only when `showError` is true. */
36
+ errorMessage: string;
37
+ /** Visible label text for the group. */
38
+ label: string;
39
+ /** Helper text below label. Use slot for custom HTML. */
40
+ description: string;
41
+ /** Renders all checkboxes as tiles with larger clickable area. */
42
+ tile: boolean;
43
+ /** Tooltip text shown on hover/focus of info icon. */
44
+ tooltip: string;
45
+ /** Adjusts colors for dark backgrounds. Applied to all children. */
46
+ inverted: boolean;
47
+ /** Form `id` to associate with. Applied to all children. */
48
+ form: string | null;
49
+ /**
50
+ * Checkbox size for all children: `sm` (24px) or `md` (32px, default).
51
+ * @default "md"
52
+ */
53
+ size: "sm" | "md";
54
+ private _slottedDescriptionText;
55
+ private _hasOtherError;
56
+ private _otherErrorCheckbox;
57
+ private _internals;
58
+ /**
59
+ * Lifecycle methods
60
+ * --------------------------------------------------------------------------
61
+ */
62
+ static formAssociated: boolean;
63
+ constructor();
64
+ connectedCallback(): void;
65
+ disconnectedCallback(): void;
66
+ firstUpdated(): void;
67
+ updated(changedProperties: Map<string | symbol, unknown>): void;
68
+ /**
69
+ * Functions
70
+ * --------------------------------------------------------------------------
71
+ */
72
+ private _hasAtLeastOneChecked;
73
+ private _setGroupExist;
74
+ private _setupCheckboxRequired;
75
+ private _manageRequire;
76
+ private _setCustomOtherError;
77
+ private _updateCheckboxSize;
78
+ private _updateCheckboxTile;
79
+ private _updateCheckboxInvert;
80
+ private _updateCheckboxShowError;
81
+ private _updateCheckboxForm;
82
+ private _getSlotDescriptionForAria;
83
+ formResetCallback(): void;
84
+ private _handleInvalid;
85
+ /**
86
+ * Event Handlers
87
+ * --------------------------------------------------------------------------
88
+ */
89
+ private _handleCheckboxChange;
90
+ private _handleChildError;
91
+ private _handleChildErrorClear;
92
+ private _checkOtherInputs;
93
+ render(): import("lit-html").TemplateResult<1>;
94
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nysds/nys-checkbox",
3
- "version": "1.13.1",
3
+ "version": "1.14.0",
4
4
  "description": "The Checkbox component from the NYS Design System.",
5
5
  "module": "dist/nys-checkbox.js",
6
6
  "types": "dist/index.d.ts",
@@ -23,14 +23,14 @@
23
23
  "lit-analyze": "lit-analyzer '**/*.ts'"
24
24
  },
25
25
  "dependencies": {
26
- "@nysds/nys-icon": "^1.13.1",
27
- "@nysds/nys-label": "^1.13.1",
28
- "@nysds/nys-errormessage": "^1.13.1"
26
+ "@nysds/nys-icon": "^1.14.0",
27
+ "@nysds/nys-label": "^1.14.0",
28
+ "@nysds/nys-errormessage": "^1.14.0"
29
29
  },
30
30
  "devDependencies": {
31
31
  "lit": "^3.3.1",
32
32
  "typescript": "^5.9.3",
33
- "vite": "^7.1.12"
33
+ "vite": "^7.3.1"
34
34
  },
35
35
  "keywords": [
36
36
  "new-york-state",