@nysds/nys-checkbox 1.13.1 → 1.15.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 +126 -0
  3. package/dist/nys-checkbox.figma.d.ts +1 -0
  4. package/dist/nys-checkbox.js +371 -215
  5. package/dist/nys-checkbox.js.map +1 -1
  6. package/dist/nys-checkboxgroup.d.ts +102 -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,126 @@
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
+ * @fires nys-other-input - Fired when "other" text input value changes. Detail: `{id, name, value}`.
19
+ *
20
+ * @example Single checkbox
21
+ * ```html
22
+ * <nys-checkbox label="I agree to the terms" name="terms" required></nys-checkbox>
23
+ * ```
24
+ *
25
+ * @example Checkbox group
26
+ * ```html
27
+ * <nys-checkboxgroup label="Select landmarks">
28
+ * <nys-checkbox name="landmarks" value="adirondacks" label="Adirondacks"></nys-checkbox>
29
+ * <nys-checkbox name="landmarks" value="niagara" label="Niagara Falls"></nys-checkbox>
30
+ * </nys-checkboxgroup>
31
+ * ```
32
+ */
33
+ export declare class NysCheckbox extends LitElement {
34
+ static styles: import("lit").CSSResult;
35
+ static shadowRootOptions: {
36
+ delegatesFocus: boolean;
37
+ clonable?: boolean;
38
+ customElementRegistry?: CustomElementRegistry;
39
+ mode: ShadowRootMode;
40
+ serializable?: boolean;
41
+ slotAssignment?: SlotAssignmentMode;
42
+ };
43
+ /** Whether checkbox is checked. */
44
+ checked: boolean;
45
+ /** Prevents interaction. */
46
+ disabled: boolean;
47
+ /** Marks as required. Validates that checkbox is checked. */
48
+ required: boolean;
49
+ /** Visible label text. Required for accessibility. */
50
+ label: string;
51
+ /** Helper text below label. Use slot for custom HTML. */
52
+ description: string;
53
+ /** Unique identifier. Auto-generated if not provided. */
54
+ id: string;
55
+ /** Name for form submission. Use same name for grouped checkboxes. */
56
+ name: string;
57
+ /** Value submitted when checked. */
58
+ value: string;
59
+ /** Form `id` to associate with when checkbox is outside form element. */
60
+ form: string | null;
61
+ /** Shows error message when true. */
62
+ showError: boolean;
63
+ /** Error message text. Shown only when `showError` is true. */
64
+ errorMessage: string;
65
+ /** Internal: Set by parent checkboxgroup. Do not set manually. */
66
+ groupExist: boolean;
67
+ /** Renders as tile with larger clickable area. Apply to group for consistency. */
68
+ tile: boolean;
69
+ /** Adjusts colors for dark backgrounds. */
70
+ inverted: boolean;
71
+ /** Tooltip text shown on hover/focus of info icon. */
72
+ tooltip: string;
73
+ /**
74
+ * Checkbox size: `sm` (24px) or `md` (32px, default).
75
+ * @default "md"
76
+ */
77
+ size: "sm" | "md";
78
+ other: boolean;
79
+ showOtherError: boolean;
80
+ private isMobile;
81
+ private _hasUserInteracted;
82
+ getInputElement(): Promise<HTMLInputElement | null>;
83
+ private _internals;
84
+ /**
85
+ * Lifecycle methods
86
+ * --------------------------------------------------------------------------
87
+ */
88
+ static formAssociated: boolean;
89
+ constructor();
90
+ connectedCallback(): void;
91
+ disconnectedCallback(): void;
92
+ firstUpdated(): void;
93
+ /**
94
+ * Form Integration
95
+ * --------------------------------------------------------------------------
96
+ */
97
+ private _setValue;
98
+ private _manageRequire;
99
+ private _setValidityMessage;
100
+ private _validate;
101
+ formResetCallback(): void;
102
+ /**
103
+ * Functions
104
+ * --------------------------------------------------------------------------
105
+ */
106
+ checkValidity(): boolean;
107
+ private _handleInvalid;
108
+ private _manageLabelClick;
109
+ get _hasDescription(): boolean;
110
+ private _handleResize;
111
+ /**
112
+ * Event Handlers
113
+ * --------------------------------------------------------------------------
114
+ */
115
+ private _emitChangeEvent;
116
+ private _emitOtherInputEvent;
117
+ private _handleChange;
118
+ private _handleFocus;
119
+ private _handleBlur;
120
+ private _handleTextInputBlur;
121
+ private _handleKeydown;
122
+ private _handleTextInput;
123
+ private _validateOtherAndEmitError;
124
+ private _dispatchClearError;
125
+ render(): import("lit-html").TemplateResult<1>;
126
+ }
package/dist/nys-checkbox.figma.d.ts ADDED
@@ -0,0 +1 @@
1
+ export {};
package/dist/nys-checkbox.js CHANGED
@@ -1,24 +1,34 @@
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
+ /*!
5
+ * █▄ █ █ █ █▀▀▀█ █▀▀▄ █▀▀▀█
6
+ * █ █ █ █▄▄▄█ ▀▀▀▄▄ █ █ ▀▀▀▄▄
7
+ * █ ▀█ █ █▄▄▄█ █▄▄▀ █▄▄▄█
8
+ *
9
+ * Checkbox Component
10
+ * Part of the New York State Design System
11
+ * Repository: https://github.com/its-hcd/nysds
12
+ * License: MIT
13
+ */
14
+ 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:hover .nys-checkbox__checkbox:not(:disabled):not(:checked),.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:hover .nys-checkbox__checkbox:not(:disabled):checked,.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:active .nys-checkbox__checkbox:not(:disabled):not(: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:active .nys-checkbox__checkbox:not(:disabled):checked,.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-visible{outline:solid var(--_nys-checkbox-outline-width) var(--_nys-checkbox-outline-color)}:host([tile]) .nys-checkbox:has(*:focus-visible){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))}';
15
+ var g = Object.defineProperty, h = (b, e, t, r) => {
16
+ for (var o = void 0, l = b.length - 1, a; l >= 0; l--)
17
+ (a = b[l]) && (o = a(e, t, o) || o);
18
+ return o && g(e, t, o), o;
9
19
  };
10
- let w = 0;
20
+ let E = 0;
11
21
  const u = class u extends x {
12
22
  // allows use of elementInternals' API
13
23
  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();
24
+ 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
25
  }
16
26
  // Generate a unique ID if one is not provided
17
27
  connectedCallback() {
18
- super.connectedCallback(), this.id || (this.id = `nys-checkboxgroup-${Date.now()}-${w++}`), this.addEventListener("nys-change", this._handleCheckboxChange), this.addEventListener("invalid", this._handleInvalid);
28
+ 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
29
  }
20
30
  disconnectedCallback() {
21
- super.disconnectedCallback(), this.removeEventListener("nys-change", this._handleCheckboxChange), this.removeEventListener("invalid", this._handleInvalid);
31
+ 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
32
  }
23
33
  firstUpdated() {
24
34
  this._setGroupExist(), this._updateCheckboxSize(), this._updateCheckboxTile(), this._updateCheckboxShowError(), this._getSlotDescriptionForAria();
@@ -30,88 +40,116 @@ const u = class u extends x {
30
40
  * Functions
31
41
  * --------------------------------------------------------------------------
32
42
  */
43
+ _hasAtLeastOneChecked() {
44
+ return Array.from(this.querySelectorAll("nys-checkbox")).some(
45
+ (e) => e.checked
46
+ );
47
+ }
33
48
  _setGroupExist() {
34
- this.querySelectorAll("nys-checkbox").forEach((o) => {
35
- o.groupExist = !0;
49
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
50
+ t.groupExist = !0;
36
51
  });
37
52
  }
38
53
  // Initial update on checkbox required attribute
39
54
  async _setupCheckboxRequired() {
40
- const e = this.querySelector("nys-checkbox"), o = this.errorMessage || "This field is required", r = e ? await e.getInputElement() : null;
55
+ const e = this.querySelector("nys-checkbox"), t = this.errorMessage || "This field is required", r = e ? await e.getInputElement() : null;
41
56
  this._internals.setValidity(
42
57
  { valueMissing: !0 },
43
- o,
58
+ t,
44
59
  r || this
45
60
  );
46
61
  }
47
62
  // Updates the required attribute of each checkbox in the group
48
63
  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
- }
64
+ if (!this.required) return;
65
+ const e = this.errorMessage || "You must make a selection to proceed.", t = Array.from(
66
+ this.querySelectorAll("nys-checkbox")
67
+ ), r = this._hasAtLeastOneChecked(), o = t ? await t[0].getInputElement().catch(() => null) : null;
68
+ 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(
69
+ { valueMissing: !0 },
70
+ e,
71
+ o ?? this
72
+ ), this.showError = !0);
73
+ }
74
+ _setCustomOtherError() {
75
+ const t = this._otherErrorCheckbox?.shadowRoot?.querySelector("nys-textinput") || this._otherErrorCheckbox;
76
+ this._internals.setValidity(
77
+ { customError: !0 },
78
+ "Please complete this field.",
79
+ t
80
+ );
59
81
  }
60
82
  // Updates the size of each checkbox in the group
61
83
  _updateCheckboxSize() {
62
- this.querySelectorAll("nys-checkbox").forEach((o) => {
63
- o.setAttribute("size", this.size);
84
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
85
+ t.setAttribute("size", this.size);
64
86
  });
65
87
  }
66
88
  _updateCheckboxTile() {
67
- this.querySelectorAll("nys-checkbox").forEach((o) => {
68
- this.tile ? o.toggleAttribute("tile", !0) : o.removeAttribute("tile");
89
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
90
+ this.tile ? t.toggleAttribute("tile", !0) : t.removeAttribute("tile");
69
91
  });
70
92
  }
71
93
  _updateCheckboxInvert() {
72
- this.querySelectorAll("nys-checkbox").forEach((o) => {
73
- this.inverted ? o.toggleAttribute("inverted", !0) : o.removeAttribute("inverted");
94
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
95
+ this.inverted ? t.toggleAttribute("inverted", !0) : t.removeAttribute("inverted");
74
96
  });
75
97
  }
76
98
  _updateCheckboxShowError() {
77
- this.querySelectorAll("nys-checkbox").forEach((o) => {
78
- this.showError ? o.setAttribute("showError", "") : o.removeAttribute("showError");
99
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
100
+ this.showError ? t.setAttribute("showError", "") : t.removeAttribute("showError");
79
101
  });
80
102
  }
81
103
  _updateCheckboxForm() {
82
- this.querySelectorAll("nys-checkbox").forEach((o) => {
83
- this.showError && this.form !== null ? o.setAttribute("form", this.form) : o.removeAttribute("form");
104
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
105
+ this.showError && this.form !== null ? t.setAttribute("form", this.form) : t.removeAttribute("form");
84
106
  });
85
107
  }
86
108
  // Get the slotted text contents so native VO can attempt to announce it within the legend in the fieldset
87
109
  _getSlotDescriptionForAria() {
88
- const o = this.shadowRoot?.querySelector(
110
+ const t = this.shadowRoot?.querySelector(
89
111
  'slot[name="description"]'
90
112
  )?.assignedNodes({ flatten: !0 }) || [];
91
- this._slottedDescriptionText = o.map((r) => r.textContent?.trim()).filter(Boolean).join(", ");
113
+ this._slottedDescriptionText = t.map((r) => r.textContent?.trim()).filter(Boolean).join(", ");
92
114
  }
93
115
  // This callback is automatically called when the parent form is reset.
94
116
  formResetCallback() {
95
- this.querySelectorAll("nys-checkbox").forEach((o) => {
96
- o.formResetCallback();
117
+ this.querySelectorAll("nys-checkbox").forEach((t) => {
118
+ t.formResetCallback();
97
119
  }), this._internals.setFormValue(""), this.showError = !1, this._internals.setValidity({}), this.requestUpdate();
98
120
  }
99
121
  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();
122
+ if (e.preventDefault(), this._internals.validity.customError) {
123
+ const r = Array.from(
124
+ this.querySelectorAll("nys-checkbox")
125
+ ).find(
126
+ (o) => o.other && o.checked
127
+ );
128
+ if (r) {
129
+ const o = r.shadowRoot?.querySelector("nys-textinput");
130
+ if (o) {
131
+ await o.updateComplete, o.focus();
132
+ return;
133
+ }
134
+ }
135
+ }
136
+ if (this._internals.validity.valueMissing) {
137
+ this.showError = !0, this._manageRequire();
138
+ const t = this.querySelector("nys-checkbox"), r = t ? await t.getInputElement() : null;
139
+ if (r) {
140
+ const o = this._internals.form;
141
+ o ? Array.from(o.elements).find((p) => {
142
+ if (p.tagName.toLowerCase() === "nys-checkboxgroup") {
143
+ if (Array.from(
144
+ this.querySelectorAll("nys-checkbox")
145
+ ).filter(
146
+ (m) => m.checked
147
+ ).length === 0)
148
+ return p;
149
+ } else
150
+ return typeof p.checkValidity == "function" && !p.checkValidity();
151
+ }) === this && r.focus() : r.focus();
152
+ }
115
153
  }
116
154
  }
117
155
  /**
@@ -120,12 +158,40 @@ const u = class u extends x {
120
158
  */
121
159
  // Similar to how native forms handle multiple same-name fields, we group the selected values into a list for FormData.
122
160
  _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();
161
+ const t = e, { name: r } = t.detail, o = Array.from(
162
+ this.querySelectorAll("nys-checkbox")
163
+ ), l = o.filter((a) => a.checked).map((a) => a.value);
164
+ this.name = r, this._internals.setFormValue(l.join(", ")), this._checkOtherInputs(o), this._hasOtherError || this._manageRequire();
165
+ }
166
+ async _handleChildError(e) {
167
+ e.stopPropagation();
168
+ const { sourceCheckbox: t } = e.detail;
169
+ t && (this._hasOtherError = !0, this._otherErrorCheckbox = t, this.showError = !0, this._setCustomOtherError());
170
+ }
171
+ _handleChildErrorClear(e) {
172
+ const r = e.detail?.sourceCheckbox;
173
+ this._otherErrorCheckbox && r !== this._otherErrorCheckbox || (this._internals.setValidity({}), this.showError = !1, this.required && !this._hasAtLeastOneChecked() && this._manageRequire());
174
+ }
175
+ async _checkOtherInputs(e) {
176
+ for (const t of e)
177
+ if (t.checked && t.other) {
178
+ const r = t.value.trim();
179
+ if (!t._hasUserInteracted)
180
+ continue;
181
+ if (!r || r === "") {
182
+ this._hasOtherError = !0, this._otherErrorCheckbox = t, this._setCustomOtherError(), this.showError = !0;
183
+ return;
184
+ }
185
+ }
186
+ this._hasOtherError && (this._hasOtherError = !1, this._otherErrorCheckbox = null, this.required ? this._manageRequire() : (this._internals.setValidity({}), this.showError = !1));
125
187
  }
126
188
  render() {
127
- return b`
128
- <div class="nys-checkboxgroup">
189
+ return d`
190
+ <fieldset
191
+ aria-label="${this.label}${this._slottedDescriptionText ? ` ${this._slottedDescriptionText}` : this.description ? ` ${this.description}` : ""}"
192
+ class="nys-checkboxgroup"
193
+ role="radiogroup"
194
+ >
129
195
  <nys-label
130
196
  for=${this.id + "--native"}
131
197
  label=${this.label}
@@ -137,92 +203,101 @@ const u = class u extends x {
137
203
  <slot name="description" slot="description">${this.description}</slot>
138
204
  </nys-label>
139
205
  <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>
206
+ <slot></slot>
146
207
  </div>
147
208
  <nys-errormessage
148
209
  ?showError=${this.showError}
149
210
  errorMessage=${this._internals.validationMessage || this.errorMessage}
150
211
  .showDivider=${!this.tile}
151
212
  ></nys-errormessage>
152
- </div>
213
+ </fieldset>
153
214
  `;
154
215
  }
155
216
  };
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;
217
+ u.styles = v(f), u.shadowRootOptions = {
218
+ ...x.shadowRootOptions,
219
+ delegatesFocus: !0
220
+ }, u.formAssociated = !0;
221
+ let c = u;
222
+ h([
223
+ s({ type: String, reflect: !0 })
224
+ ], c.prototype, "id");
225
+ h([
226
+ s({ type: String, reflect: !0 })
227
+ ], c.prototype, "name");
228
+ h([
229
+ s({ type: Boolean, reflect: !0 })
230
+ ], c.prototype, "required");
231
+ h([
232
+ s({ type: Boolean, reflect: !0 })
233
+ ], c.prototype, "optional");
234
+ h([
235
+ s({ type: Boolean, reflect: !0 })
236
+ ], c.prototype, "showError");
237
+ h([
238
+ s({ type: String })
239
+ ], c.prototype, "errorMessage");
240
+ h([
241
+ s({ type: String })
242
+ ], c.prototype, "label");
243
+ h([
244
+ s({ type: String })
245
+ ], c.prototype, "description");
246
+ h([
247
+ s({ type: Boolean, reflect: !0 })
248
+ ], c.prototype, "tile");
249
+ h([
250
+ s({ type: String })
251
+ ], c.prototype, "tooltip");
252
+ h([
253
+ s({ type: Boolean, reflect: !0 })
254
+ ], c.prototype, "inverted");
255
+ h([
256
+ s({ type: String, reflect: !0 })
257
+ ], c.prototype, "form");
258
+ h([
259
+ s({ type: String, reflect: !0 })
260
+ ], c.prototype, "size");
261
+ h([
262
+ _()
263
+ ], c.prototype, "_slottedDescriptionText");
264
+ h([
265
+ _()
266
+ ], c.prototype, "_hasOtherError");
267
+ h([
268
+ _()
269
+ ], c.prototype, "_otherErrorCheckbox");
270
+ customElements.get("nys-checkboxgroup") || customElements.define("nys-checkboxgroup", c);
271
+ var w = Object.defineProperty, n = (b, e, t, r) => {
272
+ for (var o = void 0, l = b.length - 1, a; l >= 0; l--)
273
+ (a = b[l]) && (o = a(e, t, o) || o);
274
+ return o && w(e, t, o), o;
205
275
  };
206
276
  let C = 0;
207
- const p = class p extends x {
277
+ const k = class k extends x {
208
278
  // allows use of elementInternals' API
209
279
  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());
280
+ 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 = () => {
281
+ const e = this.shadowRoot?.querySelector(
282
+ ".nys-checkbox__main-container"
283
+ ), t = this.shadowRoot?.querySelector("input");
284
+ !e || !t || e.addEventListener("click", (r) => {
285
+ r.target.tagName.toLowerCase() !== "input" && (this.disabled || (t.click(), t.focus()));
214
286
  });
287
+ }, this._handleResize = () => {
288
+ this.isMobile = window.innerWidth < 480;
215
289
  }, this._internals = this.attachInternals();
216
290
  }
291
+ // need this flag for "eager mode"
217
292
  async getInputElement() {
218
293
  return await this.updateComplete, this.shadowRoot?.querySelector("input") || null;
219
294
  }
220
295
  // Generate a unique ID if one is not provided
221
296
  connectedCallback() {
222
- super.connectedCallback(), this.id || (this.id = `nys-checkbox-${Date.now()}-${C++}`), this.addEventListener("invalid", this._handleInvalid);
297
+ 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
298
  }
224
299
  disconnectedCallback() {
225
- super.disconnectedCallback(), this.removeEventListener("invalid", this._handleInvalid);
300
+ super.disconnectedCallback(), this.removeEventListener("invalid", this._handleInvalid), this.removeEventListener("blur", this._handleBlur), window.removeEventListener("resize", this._handleResize);
226
301
  }
227
302
  firstUpdated() {
228
303
  this._setValue(), this._manageRequire(), this._manageLabelClick();
@@ -235,23 +310,23 @@ const p = class p extends x {
235
310
  this.groupExist || this._internals.setFormValue(this.checked ? this.value : null);
236
311
  }
237
312
  _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({}));
313
+ const e = this.shadowRoot?.querySelector("input"), t = this.errorMessage || "This field is required";
314
+ e && (this.required && !this.checked ? (this._internals.ariaRequired = "true", this._internals.setValidity({ valueMissing: !0 }, t, e)) : this._internals.setValidity({}));
240
315
  }
241
316
  _setValidityMessage(e = "") {
242
- const o = this.shadowRoot?.querySelector("input");
243
- o && (this.showError = !!e, this.errorMessage?.trim() && e !== "" && (e = this.errorMessage), this._internals.setValidity(
317
+ const t = this.shadowRoot?.querySelector("input");
318
+ t && (this.showError = !!e, this.errorMessage?.trim() && e !== "" && (e = this.errorMessage), this._internals.setValidity(
244
319
  e ? { customError: !0 } : {},
245
320
  e,
246
- o
321
+ t
247
322
  ));
248
323
  }
249
324
  _validate() {
250
325
  const e = this.shadowRoot?.querySelector("input");
251
326
  if (!e) return;
252
- const o = e.validity;
327
+ const t = e.validity;
253
328
  let r = "";
254
- o.valueMissing && (r = "This field is required"), this._setValidityMessage(r);
329
+ t.valueMissing && (r = "This field is required"), this._setValidityMessage(r);
255
330
  }
256
331
  // Called automatically when the parent form is reset
257
332
  formResetCallback() {
@@ -272,14 +347,18 @@ const p = class p extends x {
272
347
  }
273
348
  _handleInvalid(e) {
274
349
  e.preventDefault(), this.showError = !0, this._validate();
275
- const o = this.shadowRoot?.querySelector("input");
276
- if (o) {
350
+ const t = this.shadowRoot?.querySelector("input");
351
+ if (t) {
277
352
  const r = this._internals.form;
278
353
  r ? Array.from(r.elements).find(
279
354
  (a) => typeof a.checkValidity == "function" && !a.checkValidity()
280
- ) === this && o.focus() : o.focus();
355
+ ) === this && t.focus() : t.focus();
281
356
  }
282
357
  }
358
+ get _hasDescription() {
359
+ const e = this.querySelector('[slot="description"]');
360
+ return !!this.description || !!e;
361
+ }
283
362
  /**
284
363
  * Event Handlers
285
364
  * --------------------------------------------------------------------------
@@ -298,66 +377,131 @@ const p = class p extends x {
298
377
  })
299
378
  );
300
379
  }
380
+ _emitOtherInputEvent() {
381
+ this.dispatchEvent(
382
+ new CustomEvent("nys-other-input", {
383
+ detail: {
384
+ id: this.id,
385
+ name: this.name,
386
+ value: this.value
387
+ },
388
+ bubbles: !0,
389
+ composed: !0
390
+ })
391
+ );
392
+ }
301
393
  // 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();
394
+ async _handleChange(e) {
395
+ const { checked: t } = e.target, r = this.checked;
396
+ 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
397
  }
306
398
  _handleFocus() {
307
399
  this.dispatchEvent(new Event("nys-focus"));
308
400
  }
309
401
  _handleBlur() {
310
- this.dispatchEvent(new Event("nys-blur"));
402
+ this.dispatchEvent(new Event("nys-blur")), this.other && this.checked && (this._hasUserInteracted = !0, this._validateOtherAndEmitError());
403
+ }
404
+ _handleTextInputBlur() {
405
+ this._hasUserInteracted = !0, this._validateOtherAndEmitError();
311
406
  }
312
407
  async _handleKeydown(e) {
313
408
  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
409
  }
410
+ _handleTextInput(e) {
411
+ let r = e.target.value;
412
+ this.value = r, this._hasUserInteracted && this._validateOtherAndEmitError(), this._emitOtherInputEvent();
413
+ }
414
+ _validateOtherAndEmitError() {
415
+ if (!this.other) return;
416
+ if (!this.checked || !this._hasUserInteracted) {
417
+ this.showOtherError = !1, this._dispatchClearError();
418
+ return;
419
+ }
420
+ const e = this.value.trim() === "";
421
+ this.showOtherError = e, e && this.dispatchEvent(
422
+ new CustomEvent("nys-error", {
423
+ detail: {
424
+ id: this.id,
425
+ name: this.name,
426
+ type: "other",
427
+ message: "Please enter a value for this option.",
428
+ sourceCheckbox: this
429
+ },
430
+ bubbles: !0,
431
+ composed: !0
432
+ })
433
+ );
434
+ }
435
+ _dispatchClearError() {
436
+ this.dispatchEvent(
437
+ new CustomEvent("nys-error-clear", {
438
+ bubbles: !0,
439
+ composed: !0
440
+ })
441
+ );
442
+ }
315
443
  render() {
316
- return b`
444
+ return d`
317
445
  <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
446
+ <div
447
+ class="nys-checkbox__main-container ${this._hasDescription ? "has-description" : ""}"
448
+ >
449
+ <div class="nys-checkbox__checkbox-wrapper">
450
+ <input
451
+ id=${this.id + "--native"}
452
+ class="nys-checkbox__checkbox"
453
+ type="checkbox"
454
+ name="${y(this.name ? this.name : void 0)}"
455
+ .checked=${this.checked}
456
+ ?disabled=${this.disabled}
457
+ .value=${this.value}
458
+ ?required="${this.required}"
459
+ form=${y(this.form || void 0)}
460
+ aria-checked="${this.checked}"
461
+ aria-disabled="${this.disabled ? "true" : "false"}"
462
+ aria-required="${this.required}"
463
+ aria-describedby="group-info"
464
+ @change="${this._handleChange}"
465
+ @focus="${this._handleFocus}"
466
+ @keydown="${this._handleKeydown}"
467
+ aria-label=${this.label || y(this.other ? "Other" : void 0)}
468
+ />
469
+ ${this.checked ? d`<nys-icon
470
+ name="check"
471
+ size="${this.size === "md" ? "4xl" : this.size === "sm" ? "2xl" : "4xl"}"
472
+ class="nys-checkbox__icon"
473
+ ></nys-icon>` : ""}
474
+ </div>
475
+ ${(this.label || this.other) && d`
476
+ <nys-label
477
+ tooltip=${this.tooltip}
478
+ for=${this.id + "--native"}
479
+ label="${this.label || (this.other ? "Other" : "")}"
480
+ description=${y(this.description || void 0)}
481
+ flag=${y(this.required ? "required" : void 0)}
482
+ ?inverted=${this.inverted}
356
483
  >
357
- </nys-label>
358
- `}
484
+ <slot name="description" slot="description"
485
+ >${this.description}</slot
486
+ >
487
+ </nys-label>
488
+ `}
489
+ </div>
490
+ <div class="nys-checkbox__other-container">
491
+ ${this.other && this.checked ? d`
492
+ <nys-textinput
493
+ .value=${this.value}
494
+ id=${"radiobutton-other-" + this.id}
495
+ @nys-input=${this._handleTextInput}
496
+ @nys-blur=${this._handleTextInputBlur}
497
+ ariaLabel="Other"
498
+ aria-invalid=${this.showOtherError ? "true" : "false"}
499
+ width=${this.isMobile ? "full" : "md"}
500
+ ></nys-textinput>
501
+ ` : ""}
502
+ </div>
359
503
  </div>
360
- ${this.parentElement?.tagName.toLowerCase() !== "nys-checkboxgroup" ? b`<nys-errormessage
504
+ ${this.parentElement?.tagName.toLowerCase() !== "nys-checkboxgroup" ? d`<nys-errormessage
361
505
  id="single-error-message"
362
506
  ?showError=${this.showError}
363
507
  errorMessage=${this._internals.validationMessage || this.errorMessage}
@@ -366,59 +510,71 @@ const p = class p extends x {
366
510
  `;
367
511
  }
368
512
  };
369
- p.styles = v(f), p.formAssociated = !0;
370
- let c = p;
513
+ k.styles = v(f), k.shadowRootOptions = {
514
+ ...x.shadowRootOptions,
515
+ delegatesFocus: !0
516
+ }, k.formAssociated = !0;
517
+ let i = k;
371
518
  n([
372
- t({ type: Boolean, reflect: !0 })
373
- ], c.prototype, "checked");
519
+ s({ type: Boolean, reflect: !0 })
520
+ ], i.prototype, "checked");
374
521
  n([
375
- t({ type: Boolean, reflect: !0 })
376
- ], c.prototype, "disabled");
522
+ s({ type: Boolean, reflect: !0 })
523
+ ], i.prototype, "disabled");
377
524
  n([
378
- t({ type: Boolean, reflect: !0 })
379
- ], c.prototype, "required");
525
+ s({ type: Boolean, reflect: !0 })
526
+ ], i.prototype, "required");
380
527
  n([
381
- t({ type: String })
382
- ], c.prototype, "label");
528
+ s({ type: String })
529
+ ], i.prototype, "label");
383
530
  n([
384
- t({ type: String })
385
- ], c.prototype, "description");
531
+ s({ type: String })
532
+ ], i.prototype, "description");
386
533
  n([
387
- t({ type: String, reflect: !0 })
388
- ], c.prototype, "id");
534
+ s({ type: String, reflect: !0 })
535
+ ], i.prototype, "id");
389
536
  n([
390
- t({ type: String, reflect: !0 })
391
- ], c.prototype, "name");
537
+ s({ type: String, reflect: !0 })
538
+ ], i.prototype, "name");
392
539
  n([
393
- t({ type: String })
394
- ], c.prototype, "value");
540
+ s({ type: String })
541
+ ], i.prototype, "value");
395
542
  n([
396
- t({ type: String, reflect: !0 })
397
- ], c.prototype, "form");
543
+ s({ type: String, reflect: !0 })
544
+ ], i.prototype, "form");
398
545
  n([
399
- t({ type: Boolean, reflect: !0 })
400
- ], c.prototype, "showError");
546
+ s({ type: Boolean, reflect: !0 })
547
+ ], i.prototype, "showError");
401
548
  n([
402
- t({ type: String })
403
- ], c.prototype, "errorMessage");
549
+ s({ type: String })
550
+ ], i.prototype, "errorMessage");
404
551
  n([
405
- t({ type: Boolean })
406
- ], c.prototype, "groupExist");
552
+ s({ type: Boolean })
553
+ ], i.prototype, "groupExist");
407
554
  n([
408
- t({ type: Boolean, reflect: !0 })
409
- ], c.prototype, "tile");
555
+ s({ type: Boolean, reflect: !0 })
556
+ ], i.prototype, "tile");
410
557
  n([
411
- t({ type: Boolean, reflect: !0 })
412
- ], c.prototype, "inverted");
558
+ s({ type: Boolean, reflect: !0 })
559
+ ], i.prototype, "inverted");
413
560
  n([
414
- t({ type: String })
415
- ], c.prototype, "tooltip");
561
+ s({ type: String })
562
+ ], i.prototype, "tooltip");
416
563
  n([
417
- t({ type: String, reflect: !0 })
418
- ], c.prototype, "size");
419
- customElements.get("nys-checkbox") || customElements.define("nys-checkbox", c);
564
+ s({ type: String, reflect: !0 })
565
+ ], i.prototype, "size");
566
+ n([
567
+ s({ type: Boolean, reflect: !0 })
568
+ ], i.prototype, "other");
569
+ n([
570
+ s({ type: Boolean })
571
+ ], i.prototype, "showOtherError");
572
+ n([
573
+ _()
574
+ ], i.prototype, "isMobile");
575
+ customElements.get("nys-checkbox") || customElements.define("nys-checkbox", i);
420
576
  export {
421
- c as NysCheckbox,
422
- i as NysCheckboxgroup
577
+ i as NysCheckbox,
578
+ c as NysCheckboxgroup
423
579
  };
424
580
  //# 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 static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\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 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 return;\n }\n }\n }\n\n // If we reached here, no other invalid \"other\" was found.\n // Clear any previous \"other\" error\n if (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 * @fires nys-other-input - Fired when \"other\" text input value changes. Detail: `{id, name, value}`.\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 static shadowRootOptions = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\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 private _emitOtherInputEvent() {\n this.dispatchEvent(\n new CustomEvent(\"nys-other-input\", {\n detail: {\n id: this.id,\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._emitOtherInputEvent();\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","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,102 @@
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
+ static shadowRootOptions: {
26
+ delegatesFocus: boolean;
27
+ clonable?: boolean;
28
+ customElementRegistry?: CustomElementRegistry;
29
+ mode: ShadowRootMode;
30
+ serializable?: boolean;
31
+ slotAssignment?: SlotAssignmentMode;
32
+ };
33
+ /** Unique identifier. Auto-generated if not provided. */
34
+ id: string;
35
+ /** Name for form submission. Set on group, not individual checkboxes. */
36
+ name: string;
37
+ /** Requires at least one checkbox to be checked. */
38
+ required: boolean;
39
+ /** Shows "Optional" flag. */
40
+ optional: boolean;
41
+ /** Shows error message when true. */
42
+ showError: boolean;
43
+ /** Error message text. Shown only when `showError` is true. */
44
+ errorMessage: string;
45
+ /** Visible label text for the group. */
46
+ label: string;
47
+ /** Helper text below label. Use slot for custom HTML. */
48
+ description: string;
49
+ /** Renders all checkboxes as tiles with larger clickable area. */
50
+ tile: boolean;
51
+ /** Tooltip text shown on hover/focus of info icon. */
52
+ tooltip: string;
53
+ /** Adjusts colors for dark backgrounds. Applied to all children. */
54
+ inverted: boolean;
55
+ /** Form `id` to associate with. Applied to all children. */
56
+ form: string | null;
57
+ /**
58
+ * Checkbox size for all children: `sm` (24px) or `md` (32px, default).
59
+ * @default "md"
60
+ */
61
+ size: "sm" | "md";
62
+ private _slottedDescriptionText;
63
+ private _hasOtherError;
64
+ private _otherErrorCheckbox;
65
+ private _internals;
66
+ /**
67
+ * Lifecycle methods
68
+ * --------------------------------------------------------------------------
69
+ */
70
+ static formAssociated: boolean;
71
+ constructor();
72
+ connectedCallback(): void;
73
+ disconnectedCallback(): void;
74
+ firstUpdated(): void;
75
+ updated(changedProperties: Map<string | symbol, unknown>): void;
76
+ /**
77
+ * Functions
78
+ * --------------------------------------------------------------------------
79
+ */
80
+ private _hasAtLeastOneChecked;
81
+ private _setGroupExist;
82
+ private _setupCheckboxRequired;
83
+ private _manageRequire;
84
+ private _setCustomOtherError;
85
+ private _updateCheckboxSize;
86
+ private _updateCheckboxTile;
87
+ private _updateCheckboxInvert;
88
+ private _updateCheckboxShowError;
89
+ private _updateCheckboxForm;
90
+ private _getSlotDescriptionForAria;
91
+ formResetCallback(): void;
92
+ private _handleInvalid;
93
+ /**
94
+ * Event Handlers
95
+ * --------------------------------------------------------------------------
96
+ */
97
+ private _handleCheckboxChange;
98
+ private _handleChildError;
99
+ private _handleChildErrorClear;
100
+ private _checkOtherInputs;
101
+ render(): import("lit-html").TemplateResult<1>;
102
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nysds/nys-checkbox",
3
- "version": "1.13.1",
3
+ "version": "1.15.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.15.0",
27
+ "@nysds/nys-label": "^1.15.0",
28
+ "@nysds/nys-errormessage": "^1.15.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",