@nysds/nys-radiobutton 1.13.0 → 1.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,2 @@
1
+ export * from "./nys-radiobutton";
2
+ export * from "./nys-radiogroup";
@@ -0,0 +1,89 @@
1
+ import { LitElement } from "lit";
2
+ import "./nys-radiogroup";
3
+ /**
4
+ * A radio button for single selection within a `nys-radiogroup`. Only one radio with the same `name` can be selected.
5
+ *
6
+ * Use within `nys-radiogroup` for 2-6 mutually exclusive options. For 7+ options, use `nys-select`.
7
+ * For multiple selections, use `nys-checkbox`.
8
+ *
9
+ * @summary Radio button for single selection from mutually exclusive options.
10
+ * @element nys-radiobutton
11
+ *
12
+ * @slot description - Custom HTML description content.
13
+ *
14
+ * @fires nys-change - Fired when selection changes. Detail: `{id, checked, name, value}`.
15
+ * @fires nys-focus - Fired when radio gains focus.
16
+ * @fires nys-blur - Fired when radio loses focus.
17
+ *
18
+ * @example Radio group
19
+ * ```html
20
+ * <nys-radiogroup label="Select borough" required>
21
+ * <nys-radiobutton name="borough" value="bronx" label="The Bronx"></nys-radiobutton>
22
+ * <nys-radiobutton name="borough" value="brooklyn" label="Brooklyn"></nys-radiobutton>
23
+ * </nys-radiogroup>
24
+ * ```
25
+ */
26
+ export declare class NysRadiobutton extends LitElement {
27
+ static styles: import("lit").CSSResult;
28
+ /** Whether this radio is selected. Only one per group can be checked. */
29
+ checked: boolean;
30
+ /** Prevents interaction. */
31
+ disabled: boolean;
32
+ /** Marks group as required. Set on radiogroup, not individual radios. */
33
+ required: boolean;
34
+ /** Visible label text. Required for accessibility. */
35
+ label: string;
36
+ /** Helper text below label. Use slot for custom HTML. */
37
+ description: string;
38
+ /** Unique identifier. Auto-generated if not provided. */
39
+ id: string;
40
+ /** Group name. Radios with same name are mutually exclusive. */
41
+ name: string;
42
+ /** Value submitted when this radio is selected. */
43
+ value: string;
44
+ /** Adjusts colors for dark backgrounds. */
45
+ inverted: boolean;
46
+ /** Form `id` to associate with. */
47
+ form: string | null;
48
+ /**
49
+ * Radio size: `sm` (24px) or `md` (32px, default).
50
+ * @default "md"
51
+ */
52
+ size: "sm" | "md";
53
+ /** Renders as tile with larger clickable area. */
54
+ tile: boolean;
55
+ other: boolean;
56
+ showOtherError: boolean;
57
+ private isMobile;
58
+ private _hasUserInteracted;
59
+ static buttonGroup: Record<string, NysRadiobutton>;
60
+ /**
61
+ * Lifecycle methods
62
+ * --------------------------------------------------------------------------
63
+ */
64
+ connectedCallback(): void;
65
+ disconnectedCallback(): void;
66
+ updated(changedProperties: Map<string | number | symbol, unknown>): void;
67
+ /**
68
+ * Functions
69
+ * --------------------------------------------------------------------------
70
+ */
71
+ getInputElement(): Promise<HTMLInputElement | null>;
72
+ formResetUpdate(): void;
73
+ private _handleResize;
74
+ private _clearOtherState;
75
+ /**
76
+ * Event Handlers
77
+ * --------------------------------------------------------------------------
78
+ */
79
+ private _emitChangeEvent;
80
+ private _handleChange;
81
+ private _handleFocus;
82
+ private _handleBlur;
83
+ private _callInputHandling;
84
+ private _handleTextInput;
85
+ private _handleTextInputBlur;
86
+ private _validateOtherAndEmitError;
87
+ private _handleOtherKeydown;
88
+ render(): import("lit-html").TemplateResult<1>;
89
+ }
@@ -1,21 +1,21 @@
1
- import { LitElement as _, unsafeCSS as g, html as v } from "lit";
2
- import { property as r, state as m } from "lit/decorators.js";
3
- import { ifDefined as p } from "lit/directives/if-defined.js";
4
- const k = `:host{--_nys-radiobutton-size: var(--nys-size-400, 32px);--_nys-radiobutton-border-radius: var(--nys-radius-md, 4px);--_nys-radiobutton-border-width: var(--nys-border-width-md, 2px);--_nys-radiobutton-outline-color: var(--nys-color-focus, #004dd1);--_nys-radiobutton-outline-width: var(--nys-border-width-md, 2px);--_nys-radiobutton-outline-offset: var(--nys-space-2px, 2px);--_nys-radiobutton-gap: var(--nys-space-150, 12px);--_nys-radiogroup-gap: var(--nys-space-200, 16px);--_nys-radiobutton-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-radiobutton-font-size: var(--nys-font-size-ui-md, 16px);--_nys-radiobutton-font-weight--label: var(--nys-font-weight-regular, 400);--_nys-radiobutton-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-radiobutton-color: var( --nys-color-text, var(--nys-color-neutral-900, #1b1b1b) );--_nys-radiobutton-background-color: var(--nys-color-ink-reverse, #ffffff);--_nys-radiobutton-border-color: var(--nys-color-neutral-600, #62666a);--_nys-radiobutton-background-color--hover: var( --nys-color-neutral-50, #ededed );--_nys-radiobutton-border-color--hover: var(--nys-color-ink, #1b1b1b);--_nys-radiobutton-background-color--active: var( --nys-color-neutral-100, #d0d0ce );--_nys-radiobutton-border-color--active: var(--nys-color-ink, #1b1b1b);--_nys-radiobutton-background-color--checked: var( --nys-color-theme, #154973 );--_nys-radiobutton-background-color--disabled: var( --nys-color-ink-reverse, #f0f0f0 );--_nys-radiobutton-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-radiobutton-border-color--disabled: var( --nys-color-neutral-100, #d0d0ce );--_nys-radiobutton-background-color--checked--disabled: var( --nys-color-neutral-100, #d0d0ce );--_nys-radiobutton-border-color--checked--disabled: var( --nys-color-neutral-100, #d0d0ce )}:host([size=sm]){--_nys-radiobutton-size: var(--nys-size-300, 24px);--_nys-radiobutton-border-radius: var(--nys-radius-sm, 2px);--_nys-radiogroup-gap: var(--nys-space-100, 8px);--_nys-radiobutton-gap: var(--nys-space-100, 8px)}:host([size=md]){--_nys-radiobutton-size: var(--nys-size-400, 32px);--_nys-radiobutton-border-radius: var(--nys-radius-md, 4px);--_nys-radiogroup-gap: var(--nys-space-200, 16px);--_nys-radiobutton-gap: var(--nys-space-150, 12px)}:host([tile]){--_nys-radiobutton-font-weight--label: var(--nys-font-weight-semibold, 600);--_nys-radiobutton-border-width--tile: var(--nys-border-width-sm, 1px);--_nys-radiobutton-border-radius--tile: var(--nys-radius-md, 4px);--_nys-radiobutton-border-color--tile: var( --nys-color-neutral-100, #d0d0ce );--_nys-radiobutton-background-color--tile: var( --nys-color-ink-reverse, #ffffff );--_nys-radiobutton-padding--x--tile: var(--nys-space-250, 20px);--_nys-radiobutton-padding--y--tile: var(--nys-space-200, 16px);--_nys-radiobutton-border-color--tile--hover: var( --nys-color-neutral-700, #4a4d4f );--_nys-radiobutton-background-color--tile--hover: var( --nys-color-ink-reverse, #ffffff );--_nys-radiobutton-border-color--tile--active: var( --nys-color-neutral-900, #1b1b1b );--_nys-radiobutton-background-color--tile--active: var( --nys-color-ink-reverse, #ffffff );--_nys-radiobutton-border-color--tile--checked: var( --nys-color-theme-mid, #457aa5 );--_nys-radiobutton-background-color--tile--checked: var( --nys-color-theme-faint, #f7fafd );--_nys-radiobutton-border-color--tile--disabled: var( --nys-color-ink-reverse, #f0f0f0 );--_nys-radiobutton-background-color--tile--disabled: var( --nys-color-neutral-100, #d0d0ce )}:host([tile][size=sm]){--_nys-radiobutton-padding--x--tile: var(--nys-space-200, 16px);--_nys-radiobutton-padding--y--tile: var(--nys-space-150, 12px)}:host([tile][showError]){--_nys-radiobutton-border-color--tile: var(--nys-color-danger, #b52c2c);--_nys-radiobutton-border-color--tile--hover: var( --nys-color-danger, #b52c2c );--_nys-radiobutton-border-color--tile--active: var( --nys-color-danger, #b52c2c );--_nys-radiobutton-border-color--tile--checked: var( --nys-color-danger, #b52c2c )}.nys-radiogroup{display:flex;flex-direction:column;gap:var(--nys-space-200, 16px);font-family:var(--_nys-radiobutton-font-family);font-size:var(--_nys-radiobutton-font-size);line-height:var(--_nys-radiobutton-line-height)}.nys-radiogroup__content{gap:var(--_nys-radiogroup-gap);display:flex;flex-direction:column}.nys-radiobutton{display:flex;align-items:center;font-family:var(--_nys-radiobutton-font-family);font-size:var(--_nys-radiobutton-font-size);line-height:var(--_nys-radiobutton-line-height);border-radius:var(--_nys-radiobutton-border-radius--tile);border:var(--_nys-radiobutton-border-width--tile) solid var(--_nys-radiobutton-border-color--tile);background-color:var(--_nys-radiobutton-background-color--tile);padding:var(--_nys-radiobutton-padding--y--tile) var(--_nys-radiobutton-padding--x--tile)}.nys-radiobutton__radio{appearance:none;width:var(--_nys-radiobutton-size);height:var(--_nys-radiobutton-size);min-width:var(--_nys-radiobutton-size);min-height:var(--_nys-radiobutton-size);max-width:var(--_nys-radiobutton-size);max-height:var(--_nys-radiobutton-size);border:solid var(--_nys-radiobutton-border-width) var(--_nys-radiobutton-border-color);background-color:var(--_nys-radiobutton-background-color);border-radius:100%;background-repeat:no-repeat;background-position:center;background-size:contain;outline-offset:var(--_nys-radiobutton-outline-offset);outline:none;margin:0 0 auto;box-sizing:border-box}.nys-radiobutton:hover,.nys-radiobutton:hover *{cursor:pointer}input:not(:disabled):checked+.nys-radiobutton .nys-radiobutton__radio{background-image:url('data:image/svg+xml;utf8,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="11" stroke="white" stroke-width="6"/></svg>');background-color:var(--_nys-radiobutton-background-color--checked)}:host([tile]) .nys-radiobutton:has(input:not(:disabled):checked)+.nys-radiobutton .nys-radiobutton__radio{border-color:var(--_nys-radiobutton-border-color--tile--checked);background-color:var(--_nys-radiobutton-background-color--tile--checked)}:host([tile]) .nys-radiobutton:has(input:not(:disabled):checked:hover)+.nys-radiobutton .nys-radiobutton__radio{cursor:default}input:disabled:checked+.nys-radiobutton .nys-radiobutton__radio{background-image:url('data:image/svg+xml;utf8,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="11" stroke="white" stroke-width="6"/></svg>');border-color:var(--_nys-radiobutton-border-color--checked--disabled);background-color:var(--_nys-radiobutton-background-color--checked--disabled)}:host([tile]) .nys-radiobutton:has(input:disabled:checked)+.nys-radiobutton .nys-radiobutton__radio{border-color:var(--_nys-radiobutton-background-color--tile--disabled);background-color:var(--_nys-radiobutton-border-color--tile--disabled)}input:disabled+.nys-radiobutton,input:disabled+.nys-radiobutton *{cursor:not-allowed}input:disabled+.nys-radiobutton .nys-radiobutton__radio{background-color:var(--_nys-radiobutton-background-color--disabled);border-color:var(--_nys-radiobutton-border-color--disabled);cursor:not-allowed}:host([tile]) .nys-radiobutton:has(input:disabled)+.nys-radiobutton .nys-radiobutton__radio{background-color:var(--_nys-radiobutton-background-color--disabled);border-color:var(--_nys-radiobutton-border-color--disabled);cursor:not-allowed}input:hover:not(:disabled):not(:checked)+.nys-radiobutton .nys-radiobutton__radio{border-color:var(--_nys-radiobutton-border-color--hover);background-color:var(--_nys-radiobutton-background-color--hover)}:host([tile]) .nys-radiobutton:has(input:hover:not(:disabled):not(:checked)+.nys-radiobutton .nys-radiobutton__radio){border-color:var(--_nys-radiobutton-border-color--tile--hover);background-color:var(--_nys-radiobutton-background-color--tile--hover);outline:solid var(--_nys-radiobutton-border-width--tile) var(--_nys-radiobutton-border-color--tile--hover)}input:active:not(:disabled):not(:checked)+.nys-radiobutton .nys-radiobutton__radio{border-color:var(--_nys-radiobutton-border-color--active);background-color:var(--_nys-radiobutton-background-color--active)}:host([tile]) .nys-radiobutton:has(input:active:not(:disabled):not(:checked)+.nys-radiobutton .nys-radiobutton__radio){border-color:var(--_nys-radiobutton-border-color--tile--active);background-color:var(--_nys-radiobutton-background-color--tile--active);outline:solid var(--_nys-radiobutton-border-width--tile) var(--_nys-radiobutton-border-color--tile--active)}:host:focus-visible,:host(.active-focus){outline:solid var(--_nys-radiobutton-outline-width) var(--_nys-radiobutton-outline-color)}.nys-radiobutton>nys-label{--_nys-label-font-weight: var(--_nys-radiobutton-font-weight--label);display:flex;padding-inline-start:var(--_nys-radiobutton-gap)}:host([tile]) .nys-radiobutton>nys-label{--_nys-description-font-style: normal}input:disabled+.nys-radiobutton>nys-label,input:disabled+.nys-radiobutton>nys-label *{cursor:not-allowed;--_nys-label-cursor: not-allowed;--_nys-label-color: var(--_nys-radiobutton-color--disabled);--_nys-description-color: var(--_nys-radiobutton-color--disabled);color:var(--_nys-radiobutton-color--disabled)}fieldset{all:unset;display:contents}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}`;
5
- var w = Object.defineProperty, a = (h, t, e, o) => {
6
- for (var n = void 0, c = h.length - 1, d; c >= 0; c--)
7
- (d = h[c]) && (n = d(t, e, n) || n);
8
- return n && w(t, e, n), n;
1
+ import { LitElement as g, unsafeCSS as k, html as p } from "lit";
2
+ import { property as r, state as _ } from "lit/decorators.js";
3
+ import { ifDefined as v } from "lit/directives/if-defined.js";
4
+ const w = `:host{--_nys-radiobutton-size: var(--nys-size-400, 32px);--_nys-radiobutton-border-radius: var(--nys-radius-md, 4px);--_nys-radiobutton-border-width: var(--nys-border-width-md, 2px);--_nys-radiobutton-outline-color: var(--nys-color-focus, #004dd1);--_nys-radiobutton-outline-width: var(--nys-border-width-md, 2px);--_nys-radiobutton-outline-offset: var(--nys-space-2px, 2px);--_nys-radiobutton-gap: var(--nys-space-150, 12px);--_nys-radiogroup-gap: var(--nys-space-200, 16px);--_nys-radiobutton-font-family: var( --nys-font-family-ui, var( --nys-font-family-sans, "Proxima Nova", "Helvetica Neue", "Helvetica", "Arial", sans-serif ) );--_nys-radiobutton-font-size: var(--nys-font-size-ui-md, 16px);--_nys-radiobutton-font-weight--label: var(--nys-font-weight-regular, 400);--_nys-radiobutton-line-height: var(--nys-font-lineheight-ui-md, 24px);--_nys-radiobutton-color: var( --nys-color-text, var(--nys-color-neutral-900, #1b1b1b) );--_nys-radiobutton-background-color: var(--nys-color-ink-reverse, #ffffff);--_nys-radiobutton-border-color: var(--nys-color-neutral-600, #62666a);--_nys-radiobutton-background-color--hover: var( --nys-color-neutral-50, #ededed );--_nys-radiobutton-border-color--hover: var(--nys-color-ink, #1b1b1b);--_nys-radiobutton-background-color--active: var( --nys-color-neutral-100, #d0d0ce );--_nys-radiobutton-border-color--active: var(--nys-color-ink, #1b1b1b);--_nys-radiobutton-background-color--checked: var(--nys-color-theme, #154973);--_nys-radiobutton-background-color--disabled: var( --nys-color-ink-reverse, #f0f0f0 );--_nys-radiobutton-color--disabled: var(--nys-color-text-disabled, #bec0c1);--_nys-radiobutton-border-color--disabled: var( --nys-color-neutral-100, #d0d0ce );--_nys-radiobutton-background-color--checked--disabled: var( --nys-color-neutral-100, #d0d0ce );--_nys-radiobutton-border-color--checked--disabled: var( --nys-color-neutral-100, #d0d0ce )}:host([size=sm]){--_nys-radiobutton-size: var(--nys-size-300, 24px);--_nys-radiobutton-border-radius: var(--nys-radius-sm, 2px);--_nys-radiogroup-gap: var(--nys-space-100, 8px);--_nys-radiobutton-gap: var(--nys-space-100, 8px)}:host([size=md]){--_nys-radiobutton-size: var(--nys-size-400, 32px);--_nys-radiobutton-border-radius: var(--nys-radius-md, 4px);--_nys-radiogroup-gap: var(--nys-space-200, 16px);--_nys-radiobutton-gap: var(--nys-space-150, 12px)}:host([tile]){--_nys-radiobutton-font-weight--label: var(--nys-font-weight-semibold, 600);--_nys-radiobutton-border-width--tile: var(--nys-border-width-sm, 1px);--_nys-radiobutton-border-radius--tile: var(--nys-radius-md, 4px);--_nys-radiobutton-border-color--tile: var(--nys-color-neutral-100, #d0d0ce);--_nys-radiobutton-background-color--tile: var(--nys-color-ink-reverse, #ffffff);--_nys-radiobutton-padding--x--tile: var(--nys-space-250, 20px);--_nys-radiobutton-padding--y--tile: var(--nys-space-200, 16px);--_nys-radiobutton-border-color--tile--hover: var( --nys-color-neutral-700, #4a4d4f );--_nys-radiobutton-background-color--tile--hover: var( --nys-color-ink-reverse, #ffffff );--_nys-radiobutton-border-color--tile--active: var( --nys-color-neutral-900, #1b1b1b );--_nys-radiobutton-background-color--tile--active: var( --nys-color-ink-reverse, #ffffff );--_nys-radiobutton-border-color--tile--checked: var( --nys-color-theme-mid, #457aa5 );--_nys-radiobutton-background-color--tile--checked: var( --nys-color-theme-faint, #f7fafd );--_nys-radiobutton-border-color--tile--disabled: var( --nys-color-ink-reverse, #f0f0f0 );--_nys-radiobutton-background-color--tile--disabled: var( --nys-color-neutral-100, #d0d0ce )}:host([tile][size=sm]){--_nys-radiobutton-padding--x--tile: var(--nys-space-200, 16px);--_nys-radiobutton-padding--y--tile: var(--nys-space-150, 12px)}:host([tile][showError]){--_nys-radiobutton-border-color--tile: var(--nys-color-danger, #b52c2c);--_nys-radiobutton-border-color--tile--hover: var( --nys-color-danger, #b52c2c );--_nys-radiobutton-border-color--tile--active: var( --nys-color-danger, #b52c2c );--_nys-radiobutton-border-color--tile--checked: var( --nys-color-danger, #b52c2c )}.nys-radiogroup{display:flex;flex-direction:column;gap:var(--nys-space-200, 16px);font-family:var(--_nys-radiobutton-font-family);font-size:var(--_nys-radiobutton-font-size);line-height:var(--_nys-radiobutton-line-height)}.nys-radiogroup__content{gap:var(--_nys-radiogroup-gap);display:flex;flex-direction:column}.nys-radiobutton{display:flex;flex-direction:column;font-family:var(--_nys-radiobutton-font-family);font-size:var(--_nys-radiobutton-font-size);line-height:var(--_nys-radiobutton-line-height);border-radius:var(--_nys-radiobutton-border-radius--tile);border:var(--_nys-radiobutton-border-width--tile) solid var(--_nys-radiobutton-border-color--tile);background-color:var(--_nys-radiobutton-background-color--tile);padding:var(--_nys-radiobutton-padding--y--tile) var(--_nys-radiobutton-padding--x--tile)}.nys-radiobutton__radio{appearance:none;width:var(--_nys-radiobutton-size);height:var(--_nys-radiobutton-size);min-width:var(--_nys-radiobutton-size);min-height:var(--_nys-radiobutton-size);max-width:var(--_nys-radiobutton-size);max-height:var(--_nys-radiobutton-size);border:solid var(--_nys-radiobutton-border-width) var(--_nys-radiobutton-border-color);background-color:var(--_nys-radiobutton-background-color);border-radius:100%;background-repeat:no-repeat;background-position:center;background-size:contain;outline-offset:var(--_nys-radiobutton-outline-offset);outline:none;margin:0 0 auto;box-sizing:border-box}.nys-radiobutton:hover,.nys-radiobutton:hover *{cursor:pointer}input:not(:disabled):checked+.nys-radiobutton .nys-radiobutton__radio{background-image:url('data:image/svg+xml;utf8,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="11" stroke="white" stroke-width="6"/></svg>');background-color:var(--_nys-radiobutton-background-color--checked)}:host([tile]) .nys-radiobutton:has(input:not(:disabled):checked)+.nys-radiobutton .nys-radiobutton__radio{border-color:var(--_nys-radiobutton-border-color--tile--checked);background-color:var(--_nys-radiobutton-background-color--tile--checked)}:host([tile]) .nys-radiobutton:has(input:not(:disabled):checked:hover)+.nys-radiobutton .nys-radiobutton__radio{cursor:default}input:disabled:checked+.nys-radiobutton .nys-radiobutton__radio{background-image:url('data:image/svg+xml;utf8,<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="11" cy="11" r="11" stroke="white" stroke-width="6"/></svg>');border-color:var(--_nys-radiobutton-border-color--checked--disabled);background-color:var(--_nys-radiobutton-background-color--checked--disabled)}:host([tile]) .nys-radiobutton:has(input:disabled:checked)+.nys-radiobutton .nys-radiobutton__radio{border-color:var(--_nys-radiobutton-background-color--tile--disabled);background-color:var(--_nys-radiobutton-border-color--tile--disabled)}input:disabled+.nys-radiobutton,input:disabled+.nys-radiobutton *{cursor:not-allowed}input:disabled+.nys-radiobutton .nys-radiobutton__radio{background-color:var(--_nys-radiobutton-background-color--disabled);border-color:var(--_nys-radiobutton-border-color--disabled);cursor:not-allowed}:host([tile]) .nys-radiobutton:has(input:disabled)+.nys-radiobutton .nys-radiobutton__radio{background-color:var(--_nys-radiobutton-background-color--disabled);border-color:var(--_nys-radiobutton-border-color--disabled);cursor:not-allowed}input:hover:not(:disabled):not(:checked)+.nys-radiobutton .nys-radiobutton__radio{border-color:var(--_nys-radiobutton-border-color--hover);background-color:var(--_nys-radiobutton-background-color--hover)}:host([tile]) .nys-radiobutton:has(input:hover:not(:disabled):not(:checked)+.nys-radiobutton .nys-radiobutton__radio){border-color:var(--_nys-radiobutton-border-color--tile--hover);background-color:var(--_nys-radiobutton-background-color--tile--hover);outline:solid var(--_nys-radiobutton-border-width--tile) var(--_nys-radiobutton-border-color--tile--hover)}input:active:not(:disabled):not(:checked)+.nys-radiobutton .nys-radiobutton__radio{border-color:var(--_nys-radiobutton-border-color--active);background-color:var(--_nys-radiobutton-background-color--active)}:host([tile]) .nys-radiobutton:has(input:active:not(:disabled):not(:checked)+.nys-radiobutton .nys-radiobutton__radio){border-color:var(--_nys-radiobutton-border-color--tile--active);background-color:var(--_nys-radiobutton-background-color--tile--active);outline:solid var(--_nys-radiobutton-border-width--tile) var(--_nys-radiobutton-border-color--tile--active)}:host(:focus-visible){outline:none}:host(:focus-visible) .nys-radiobutton__radio{outline:solid var(--_nys-radiobutton-outline-width) var(--_nys-radiobutton-outline-color)}input:focus+.nys-radiobutton .nys-radiobutton__radio,.nys-radiobutton:focus-within .nys-radiobutton__radio,:host(.focused) .nys-radiobutton__radio{outline:solid var(--_nys-radiobutton-outline-width) var(--_nys-radiobutton-outline-color);outline-offset:var(--_nys-radiobutton-outline-offset)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.nys-radiobutton__main-container{display:flex;align-items:center}.nys-radiobutton__other-container{display:flex;padding-inline-start:calc(var(--_nys-radiobutton-size) + var(--_nys-radiobutton-gap))}.nys-radiobutton__main-container>nys-label{--_nys-label-font-weight: var(--_nys-radiobutton-font-weight--label);display:flex;padding-inline-start:var(--_nys-radiobutton-gap)}:host([tile]) .nys-radiobutton__main-container>nys-label{--_nys-description-font-style: normal}input:disabled+.nys-radiobutton .nys-radiobutton__main-container>nys-label,input:disabled+.nys-radiobutton .nys-radiobutton__main-container>nys-label *{cursor:not-allowed;--_nys-label-cursor: not-allowed;--_nys-label-color: var(--_nys-radiobutton-color--disabled);--_nys-description-color: var(--_nys-radiobutton-color--disabled);color:var(--_nys-radiobutton-color--disabled)}fieldset{all:unset;display:contents}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0}`;
5
+ var x = Object.defineProperty, d = (h, t, e, o) => {
6
+ for (var i = void 0, c = h.length - 1, u; c >= 0; c--)
7
+ (u = h[c]) && (i = u(t, e, i) || i);
8
+ return i && x(t, e, i), i;
9
9
  };
10
- let x = 0;
11
- const b = class b extends _ {
10
+ let E = 0;
11
+ const f = class f extends g {
12
12
  // allows use of elementInternals' API
13
13
  constructor() {
14
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.selectedValue = null, this._slottedDescriptionText = "", this._internals = this.attachInternals();
15
15
  }
16
16
  // Generate a unique ID if one is not provided
17
17
  connectedCallback() {
18
- super.connectedCallback(), this.id || (this.id = `nys-radiogroup-${Date.now()}-${x++}`), this.addEventListener("nys-change", this._handleRadioButtonChange), this.addEventListener("invalid", this._handleInvalid);
18
+ super.connectedCallback(), this.id || (this.id = `nys-radiogroup-${Date.now()}-${E++}`), this.addEventListener("nys-change", this._handleRadioButtonChange), this.addEventListener("invalid", this._handleInvalid), this.addEventListener("nys-error", this._handleChildError);
19
19
  }
20
20
  disconnectedCallback() {
21
21
  super.disconnectedCallback(), this.removeEventListener("nys-change", this._handleRadioButtonChange), this.removeEventListener("invalid", this._handleInvalid);
@@ -66,32 +66,27 @@ const b = class b extends _ {
66
66
  }
67
67
  // Arrow / Space / Enter navigation at group level
68
68
  async _handleKeyDown(t) {
69
- if (![
70
- "ArrowUp",
71
- "ArrowDown",
72
- "ArrowLeft",
73
- "ArrowRight",
74
- " ",
75
- "Enter"
76
- ].includes(t.key)) return;
69
+ if (!["ArrowUp", "ArrowDown", " ", "Enter"].includes(t.key)) return;
77
70
  t.preventDefault();
78
- const o = this._getAllRadios().filter((y) => !y.disabled), n = o.find((y) => y.checked) || o[0], c = t.key === " " || t.key === "Enter" ? 0 : ["ArrowUp", "ArrowLeft"].includes(t.key) ? -1 : 1;
79
- let d = o.indexOf(n) + c;
80
- d < 0 && (d = o.length - 1), d >= o.length && (d = 0);
81
- const f = o[d];
82
- (await f.getInputElement())?.click(), this._updateGroupTabIndex(), f.focus();
71
+ const o = this._getAllRadios().filter((y) => !y.disabled), c = o.find((y) => y.matches(":focus")) || o.find((y) => y.checked) || o[0];
72
+ let u = 0;
73
+ ["ArrowUp", "ArrowLeft"].includes(t.key) ? u = -1 : ["ArrowDown", "ArrowRight"].includes(t.key) && (u = 1);
74
+ let b = o.indexOf(c) + u;
75
+ b < 0 && (b = o.length - 1), b >= o.length && (b = 0);
76
+ const m = o[b];
77
+ (await m.getInputElement())?.click(), await this.updateComplete, this._updateGroupTabIndex(), m.focus();
83
78
  }
84
79
  _updateGroupTabIndex() {
85
- const t = this._getAllRadios(), e = t.find((o) => o.checked) || t[0];
80
+ const t = this._getAllRadios(), e = t.find((o) => o.checked && !o.disabled) || t.find((o) => !o.disabled);
86
81
  t.forEach((o) => {
87
- o.disabled ? o.tabIndex = -1 : o.tabIndex = o === e ? 0 : -1, o.setAttribute("aria-checked", o.checked ? "true" : "false"), o.setAttribute("aria-disabled", o.disabled ? "true" : "false"), o.setAttribute("aria-required", this.required ? "true" : "false");
82
+ o.setAttribute("aria-checked", String(o.checked)), o.tabIndex = o === e && !o.disabled ? 0 : -1;
88
83
  });
89
84
  }
90
85
  // This callback is automatically called when the parent form is reset.
91
86
  formResetCallback() {
92
87
  this.querySelectorAll("nys-radiobutton").forEach((e) => {
93
88
  e.formResetUpdate();
94
- });
89
+ }), this.selectedValue = null, this._internals.setFormValue(null), this.showError = !1, this.errorMessage = "", this._internals.setValidity({}), this.requestUpdate();
95
90
  }
96
91
  /**
97
92
  * Functions
@@ -142,11 +137,21 @@ const b = class b extends _ {
142
137
  */
143
138
  // Keeps radiogroup informed of the name and value of its current selected radiobutton at each change
144
139
  _handleRadioButtonChange(t) {
145
- const e = t, { name: o, value: n } = e.detail;
146
- this.name = o, this.selectedValue = n, this._internals.setFormValue(this.selectedValue), this._updateGroupTabIndex();
140
+ const { name: e, value: o } = t.detail;
141
+ this.name = e, this.selectedValue = o, this._internals.setFormValue(this.selectedValue), this._internals.setValidity({}), this.showError = !1, this._updateGroupTabIndex();
147
142
  }
148
143
  async _handleInvalid(t) {
149
- if (t.preventDefault(), this._internals.validity.valueMissing) {
144
+ if (t.preventDefault(), this._internals.validity.customError) {
145
+ const o = this._getAllRadios().find((i) => i.other && i.checked);
146
+ if (o) {
147
+ const i = o.shadowRoot?.querySelector("nys-textinput");
148
+ if (o.classList.remove("focused"), i) {
149
+ await i.updateComplete, i.focus();
150
+ return;
151
+ }
152
+ }
153
+ }
154
+ if (this._internals.validity.valueMissing) {
150
155
  this.showError = !0, this._manageRequire();
151
156
  const e = this.querySelector(
152
157
  "nys-radiobutton"
@@ -154,13 +159,26 @@ const b = class b extends _ {
154
159
  if (e) {
155
160
  const o = this._internals.form;
156
161
  o ? Array.from(o.elements).find(
157
- (d) => typeof d.checkValidity == "function" && !d.checkValidity()
158
- ) === this && (e.focus(), e.classList.add("active-focus")) : (e.focus(), e.classList.add("active-focus"));
162
+ (u) => typeof u.checkValidity == "function" && !u.checkValidity()
163
+ ) === this && e.focus() : e.focus();
159
164
  }
160
165
  }
161
166
  }
167
+ _handleChildError(t) {
168
+ t.stopPropagation();
169
+ const { message: e, sourceRadio: o } = t.detail;
170
+ o && (this.showError = !0, this._internals.setValidity(
171
+ { customError: !0 },
172
+ e || "Please complete this field.",
173
+ o
174
+ ));
175
+ }
162
176
  render() {
163
- return v`<div class="nys-radiogroup">
177
+ return p`<fieldset
178
+ aria-label="${this.label}${this._slottedDescriptionText ? ` ${this._slottedDescriptionText}` : this.description ? ` ${this.description}` : ""}"
179
+ role="radiogroup"
180
+ class="nys-radiogroup"
181
+ >
164
182
  <nys-label
165
183
  for=${this.id + "--native"}
166
184
  label=${this.label}
@@ -171,111 +189,114 @@ const b = class b extends _ {
171
189
  >
172
190
  <slot name="description" slot="description">${this.description}</slot>
173
191
  </nys-label>
174
- <div class="nys-radiogroup__content">
175
- <fieldset role="radiogroup" @keydown=${this._handleKeyDown}>
176
- <legend class="sr-only">
177
- ${this.label}${this._slottedDescriptionText ? ` ${this._slottedDescriptionText}` : this.description ? ` ${this.description}` : ""}
178
- </legend>
179
- <slot></slot>
180
- </fieldset>
192
+ <div class="nys-radiogroup__content" @keydown=${this._handleKeyDown}>
193
+ <slot></slot>
181
194
  </div>
182
195
  <nys-errormessage
183
196
  ?showError=${this.showError}
184
197
  errorMessage=${this._internals.validationMessage || this.errorMessage}
185
198
  .showDivider=${!this.tile}
186
199
  ></nys-errormessage>
187
- </div>`;
200
+ </fieldset>`;
188
201
  }
189
202
  };
190
- b.styles = g(k), b.formAssociated = !0;
191
- let s = b;
192
- a([
203
+ f.styles = k(w), f.formAssociated = !0;
204
+ let n = f;
205
+ d([
193
206
  r({ type: String, reflect: !0 })
194
- ], s.prototype, "id");
195
- a([
207
+ ], n.prototype, "id");
208
+ d([
196
209
  r({ type: String, reflect: !0 })
197
- ], s.prototype, "name");
198
- a([
210
+ ], n.prototype, "name");
211
+ d([
199
212
  r({ type: Boolean, reflect: !0 })
200
- ], s.prototype, "required");
201
- a([
213
+ ], n.prototype, "required");
214
+ d([
202
215
  r({ type: Boolean, reflect: !0 })
203
- ], s.prototype, "optional");
204
- a([
216
+ ], n.prototype, "optional");
217
+ d([
205
218
  r({ type: Boolean, reflect: !0 })
206
- ], s.prototype, "showError");
207
- a([
219
+ ], n.prototype, "showError");
220
+ d([
208
221
  r({ type: String })
209
- ], s.prototype, "errorMessage");
210
- a([
222
+ ], n.prototype, "errorMessage");
223
+ d([
211
224
  r({ type: String })
212
- ], s.prototype, "label");
213
- a([
225
+ ], n.prototype, "label");
226
+ d([
214
227
  r({ type: String })
215
- ], s.prototype, "description");
216
- a([
228
+ ], n.prototype, "description");
229
+ d([
217
230
  r({ type: Boolean, reflect: !0 })
218
- ], s.prototype, "tile");
219
- a([
231
+ ], n.prototype, "tile");
232
+ d([
220
233
  r({ type: String })
221
- ], s.prototype, "tooltip");
222
- a([
234
+ ], n.prototype, "tooltip");
235
+ d([
223
236
  r({ type: Boolean, reflect: !0 })
224
- ], s.prototype, "inverted");
225
- a([
237
+ ], n.prototype, "inverted");
238
+ d([
226
239
  r({ type: String, reflect: !0 })
227
- ], s.prototype, "form");
228
- a([
240
+ ], n.prototype, "form");
241
+ d([
229
242
  r({ type: String, reflect: !0 })
230
- ], s.prototype, "size");
231
- a([
232
- m()
233
- ], s.prototype, "selectedValue");
234
- a([
235
- m()
236
- ], s.prototype, "_slottedDescriptionText");
237
- customElements.get("nys-radiogroup") || customElements.define("nys-radiogroup", s);
238
- var E = Object.defineProperty, u = (h, t, e, o) => {
239
- for (var n = void 0, c = h.length - 1, d; c >= 0; c--)
240
- (d = h[c]) && (n = d(t, e, n) || n);
241
- return n && E(t, e, n), n;
243
+ ], n.prototype, "size");
244
+ d([
245
+ _()
246
+ ], n.prototype, "selectedValue");
247
+ d([
248
+ _()
249
+ ], n.prototype, "_slottedDescriptionText");
250
+ customElements.get("nys-radiogroup") || customElements.define("nys-radiogroup", n);
251
+ var A = Object.defineProperty, l = (h, t, e, o) => {
252
+ for (var i = void 0, c = h.length - 1, u; c >= 0; c--)
253
+ (u = h[c]) && (i = u(t, e, i) || i);
254
+ return i && A(t, e, i), i;
242
255
  };
243
- let A = 0;
244
- var i;
245
- const l = (i = class extends _ {
256
+ let B = 0;
257
+ var s;
258
+ const a = (s = class extends g {
246
259
  constructor() {
247
- super(...arguments), this.checked = !1, this.disabled = !1, this.required = !1, this.label = "", this.description = "", this.id = "", this.name = "", this.value = "", this.inverted = !1, this.form = null, this.size = "md", this.tile = !1;
248
- }
249
- async getInputElement() {
250
- return await this.updateComplete, this.shadowRoot?.querySelector("input") || null;
251
- }
252
- // This callback is automatically called when the parent form is reset.
253
- formResetUpdate() {
254
- this.checked = !1;
260
+ super(...arguments), this.checked = !1, this.disabled = !1, this.required = !1, this.label = "", this.description = "", this.id = "", this.name = "", this.value = "", this.inverted = !1, this.form = null, this.size = "md", this.tile = !1, this.other = !1, this.showOtherError = !1, this.isMobile = window.innerWidth < 480, this._hasUserInteracted = !1, this._handleResize = () => {
261
+ this.isMobile = window.innerWidth < 480;
262
+ };
255
263
  }
256
264
  /**
257
265
  * Lifecycle methods
258
266
  * --------------------------------------------------------------------------
259
267
  */
260
268
  connectedCallback() {
261
- super.connectedCallback(), this.id || (this.id = `nys-radiobutton-${Date.now()}-${A++}`), this.checked && (i.buttonGroup[this.name] && (i.buttonGroup[this.name].checked = !1, i.buttonGroup[this.name].requestUpdate()), i.buttonGroup[this.name] = this), this.addEventListener("focus", this._handleFocus), this.addEventListener("blur", this._handleBlur), this.addEventListener("click", this._handleChange);
269
+ super.connectedCallback(), this.id || (this.id = `nys-radiobutton-${Date.now()}-${B++}`), this.checked && (s.buttonGroup[this.name] && (s.buttonGroup[this.name].checked = !1, s.buttonGroup[this.name].requestUpdate()), s.buttonGroup[this.name] = this), this.addEventListener("focus", this._handleFocus), this.addEventListener("blur", this._handleBlur), this.addEventListener("click", this._handleChange), window.addEventListener("resize", this._handleResize);
262
270
  }
263
271
  disconnectedCallback() {
264
- super.disconnectedCallback(), this.removeEventListener("focus", this._handleFocus), this.removeEventListener("blur", this._handleBlur);
272
+ super.disconnectedCallback(), this.removeEventListener("focus", this._handleFocus), this.removeEventListener("blur", this._handleBlur), window.removeEventListener("resize", this._handleResize);
265
273
  }
266
274
  updated(t) {
267
- t.has("checked") && this.checked && i.buttonGroup[this.name] !== this && (i.buttonGroup[this.name] && (i.buttonGroup[this.name].checked = !1, i.buttonGroup[this.name].requestUpdate()), i.buttonGroup[this.name] = this);
275
+ t.has("checked") && (t.get("checked") && !this.checked && this._clearOtherState(), this.checked && s.buttonGroup[this.name] !== this && (s.buttonGroup[this.name] && (s.buttonGroup[this.name].checked = !1, s.buttonGroup[this.name].requestUpdate()), s.buttonGroup[this.name] = this));
268
276
  }
269
277
  /**
270
278
  * Functions
271
279
  * --------------------------------------------------------------------------
272
280
  */
273
- // This helper function is called to perform the element's native validation.
274
- checkValidity() {
275
- if (this.required && !this.checked)
276
- return !1;
277
- const t = this.shadowRoot?.querySelector("input");
278
- return t ? t.checkValidity() : !0;
281
+ async getInputElement() {
282
+ return await this.updateComplete, this.shadowRoot?.querySelector("input") || null;
283
+ }
284
+ // This callback is automatically called when the parent form is reset.
285
+ formResetUpdate() {
286
+ this.checked = !1, this._clearOtherState(), s.buttonGroup[this.name] === this && delete s.buttonGroup[this.name], this.requestUpdate();
287
+ }
288
+ _clearOtherState() {
289
+ this.other && (this.showOtherError = !1, this._hasUserInteracted = !1, this.dispatchEvent(
290
+ new CustomEvent("nys-error-clear", {
291
+ detail: {
292
+ id: this.id,
293
+ name: this.name,
294
+ type: "other"
295
+ },
296
+ bubbles: !0,
297
+ composed: !0
298
+ })
299
+ ));
279
300
  }
280
301
  /**
281
302
  * Event Handlers
@@ -295,17 +316,21 @@ const l = (i = class extends _ {
295
316
  })
296
317
  );
297
318
  }
298
- // Handle radiobutton change event & unselection of other options in group
299
- _handleChange() {
300
- this.classList.remove("active-focus"), !this.checked && !this.disabled && (i.buttonGroup[this.name] && (i.buttonGroup[this.name].checked = !1, i.buttonGroup[this.name].requestUpdate()), i.buttonGroup[this.name] = this, this.checked = !0, this._emitChangeEvent());
319
+ // Handle radiobutton change event & un-selection of other radio options in group
320
+ async _handleChange() {
321
+ this.showOtherError = !1, !this.checked && !this.disabled && (s.buttonGroup[this.name] && (s.buttonGroup[this.name].checked = !1, s.buttonGroup[this.name].requestUpdate()), s.buttonGroup[this.name] = this, this.checked = !0, this._validateOtherAndEmitError(), this._emitChangeEvent());
301
322
  }
302
323
  // Handle focus event
303
- _handleFocus() {
304
- this.dispatchEvent(new Event("nys-focus"));
324
+ _handleFocus(t) {
325
+ (t?.composedPath() || []).some(
326
+ (i) => i.tagName?.toLowerCase() === "nys-textinput"
327
+ ) || this.classList.add("focused"), this.dispatchEvent(new Event("nys-focus"));
305
328
  }
306
329
  // Handle blur event
307
330
  _handleBlur() {
308
- this.classList.remove("active-focus"), this.dispatchEvent(new Event("nys-blur"));
331
+ this.classList.remove("focused"), this.dispatchEvent(new Event("nys-blur")), setTimeout(() => {
332
+ this.other && this.checked && (this._hasUserInteracted = !0, this._validateOtherAndEmitError());
333
+ }, 50);
309
334
  }
310
335
  _callInputHandling() {
311
336
  if (this.disabled) return;
@@ -314,77 +339,137 @@ const l = (i = class extends _ {
314
339
  );
315
340
  t && (t.focus(), t.click());
316
341
  }
342
+ _handleTextInput(t) {
343
+ let o = t.target.value;
344
+ this.value = o, this._hasUserInteracted && this._validateOtherAndEmitError(), this._emitChangeEvent();
345
+ }
346
+ _handleTextInputBlur() {
347
+ this._hasUserInteracted = !0, this._validateOtherAndEmitError();
348
+ }
349
+ _validateOtherAndEmitError() {
350
+ if (!this.other) return;
351
+ if (!this.checked || !this._hasUserInteracted) {
352
+ this.showOtherError = !1;
353
+ return;
354
+ }
355
+ const t = this.value.trim() === "";
356
+ this.showOtherError = t, t && this.dispatchEvent(
357
+ new CustomEvent("nys-error", {
358
+ detail: {
359
+ id: this.id,
360
+ name: this.name,
361
+ type: "other",
362
+ message: "Please enter a value for this option.",
363
+ sourceRadio: this
364
+ },
365
+ bubbles: !0,
366
+ composed: !0
367
+ })
368
+ );
369
+ }
370
+ _handleOtherKeydown(t) {
371
+ (t.key == "Space" || t.key === " ") && t.stopPropagation();
372
+ }
317
373
  render() {
318
- return v`
374
+ return p`
319
375
  <input
320
376
  type="radio"
321
- name="${p(this.name ? this.name : void 0)}"
377
+ name="${v(this.name ? this.name : void 0)}"
322
378
  .checked=${this.checked}
323
379
  ?disabled=${this.disabled}
324
380
  .value=${this.value}
325
381
  ?required="${this.required}"
326
- form=${p(this.form || void 0)}
382
+ form=${v(this.form || void 0)}
327
383
  @change="${this._handleChange}"
328
- hidden
329
384
  aria-hidden="true"
385
+ hidden
386
+ class="sr-only"
330
387
  />
331
388
  <div
332
389
  class="nys-radiobutton"
333
390
  @click="${this._callInputHandling}"
334
- aria-label=${this.label}
391
+ aria-label=${this.label || (this.other ?? "Other")}
335
392
  >
336
- <span class="nys-radiobutton__radio"></span>
337
- ${this.label && v`<nys-label
338
- label=${this.label}
339
- description=${p(this.description || void 0)}
340
- ?inverted=${this.inverted}
341
- >
342
- <slot name="description" slot="description">${this.description}</slot>
343
- </nys-label> `}
393
+ <div class="nys-radiobutton__main-container">
394
+ <span class="nys-radiobutton__radio"></span>
395
+ ${(this.label || this.other) && p`<nys-label
396
+ label="${this.label || (this.other ? "Other" : "")}"
397
+ description=${v(this.description || void 0)}
398
+ ?inverted=${this.inverted}
399
+ >
400
+ <slot name="description" slot="description"
401
+ >${this.description}</slot
402
+ >
403
+ </nys-label> `}
404
+ </div>
405
+ </div>
406
+ <div class="nys-radiobutton__other-container">
407
+ ${this.other && this.checked ? p`
408
+ <nys-textinput
409
+ .value=${this.value}
410
+ id=${"radiobutton-other-" + this.id}
411
+ @nys-input=${this._handleTextInput}
412
+ @nys-blur=${this._handleTextInputBlur}
413
+ @keydown=${this._handleOtherKeydown}
414
+ @nys-focus=${() => this.classList.remove("focused")}
415
+ ariaLabel="Other"
416
+ aria-invalid=${this.showOtherError ? "true" : "false"}
417
+ width=${this.isMobile ? "full" : "md"}
418
+ ></nys-textinput>
419
+ ` : ""}
344
420
  </div>
345
421
  `;
346
422
  }
347
- }, i.styles = g(k), i.buttonGroup = {}, i);
348
- u([
423
+ }, s.styles = k(w), s.buttonGroup = {}, s);
424
+ l([
349
425
  r({ type: Boolean, reflect: !0 })
350
- ], l.prototype, "checked");
351
- u([
426
+ ], a.prototype, "checked");
427
+ l([
352
428
  r({ type: Boolean, reflect: !0 })
353
- ], l.prototype, "disabled");
354
- u([
429
+ ], a.prototype, "disabled");
430
+ l([
355
431
  r({ type: Boolean, reflect: !0 })
356
- ], l.prototype, "required");
357
- u([
432
+ ], a.prototype, "required");
433
+ l([
358
434
  r({ type: String })
359
- ], l.prototype, "label");
360
- u([
435
+ ], a.prototype, "label");
436
+ l([
361
437
  r({ type: String })
362
- ], l.prototype, "description");
363
- u([
438
+ ], a.prototype, "description");
439
+ l([
364
440
  r({ type: String, reflect: !0 })
365
- ], l.prototype, "id");
366
- u([
441
+ ], a.prototype, "id");
442
+ l([
367
443
  r({ type: String, reflect: !0 })
368
- ], l.prototype, "name");
369
- u([
444
+ ], a.prototype, "name");
445
+ l([
370
446
  r({ type: String })
371
- ], l.prototype, "value");
372
- u([
447
+ ], a.prototype, "value");
448
+ l([
373
449
  r({ type: Boolean, reflect: !0 })
374
- ], l.prototype, "inverted");
375
- u([
450
+ ], a.prototype, "inverted");
451
+ l([
376
452
  r({ type: String, reflect: !0 })
377
- ], l.prototype, "form");
378
- u([
453
+ ], a.prototype, "form");
454
+ l([
379
455
  r({ type: String, reflect: !0 })
380
- ], l.prototype, "size");
381
- u([
456
+ ], a.prototype, "size");
457
+ l([
458
+ r({ type: Boolean, reflect: !0 })
459
+ ], a.prototype, "tile");
460
+ l([
382
461
  r({ type: Boolean, reflect: !0 })
383
- ], l.prototype, "tile");
384
- let B = l;
385
- customElements.get("nys-radiobutton") || customElements.define("nys-radiobutton", B);
462
+ ], a.prototype, "other");
463
+ l([
464
+ r({ type: Boolean })
465
+ ], a.prototype, "showOtherError");
466
+ l([
467
+ _()
468
+ ], a.prototype, "isMobile");
469
+ let S = a;
470
+ customElements.get("nys-radiobutton") || customElements.define("nys-radiobutton", S);
386
471
  export {
387
- B as NysRadiobutton,
388
- s as NysRadiogroup
472
+ S as NysRadiobutton,
473
+ n as NysRadiogroup
389
474
  };
390
475
  //# sourceMappingURL=nys-radiobutton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nys-radiobutton.js","sources":["../src/nys-radiogroup.ts","../src/nys-radiobutton.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport type { NysRadiobutton } from \"./nys-radiobutton\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-radiobutton.scss?inline\";\n\nlet radiogroupIdCounter = 0;\n\n/**\n * `<nys-radiogroup>` groups `<nys-radiobutton>` elements into a single\n * selectable control.\n *\n * Supports keyboard navigation, validation, and native form submission\n * through ElementInternals.\n *\n * @slot default - One or more `<nys-radiobutton>` elements\n * @slot description - Optional descriptive text announced to screen readers\n *\n * @fires nys-change - Fired when selection changes\n * detail: { name: string; value: string }\n */\n\nexport class NysRadiogroup extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: String, reflect: true }) name = \"\"; // while not use by users, this prop is needed for internalElement form logic\n @property({ type: Boolean, reflect: true }) required = false;\n @property({ type: Boolean, reflect: true }) optional = false;\n @property({ type: Boolean, reflect: true }) showError = false;\n @property({ type: String }) errorMessage = \"\";\n @property({ type: String }) label = \"\";\n @property({ type: String }) description = \"\";\n @property({ type: Boolean, reflect: true }) tile = false;\n @property({ type: String }) tooltip = \"\";\n @property({ type: Boolean, reflect: true }) inverted = false;\n @property({ type: String, reflect: true }) form: string | null = null;\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n @state() private selectedValue: string | null = null;\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-radiogroup-${Date.now()}-${radiogroupIdCounter++}`;\n }\n this.addEventListener(\"nys-change\", this._handleRadioButtonChange);\n this.addEventListener(\"invalid\", this._handleInvalid);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"nys-change\", this._handleRadioButtonChange);\n this.removeEventListener(\"invalid\", this._handleInvalid);\n }\n\n async firstUpdated() {\n await this.updateComplete;\n this._initializeCheckedRadioValue();\n this._setValue(); // This ensures our element always participates in the form\n this._setRadioButtonRequire();\n this._updateRadioButtonsSize();\n this._updateRadioButtonsTile();\n this._updateRadioButtonsShowError();\n this._getSlotDescriptionForAria();\n\n this._initializeChildAttributes();\n this._updateGroupTabIndex();\n }\n\n updated(changedProperties: Map<string | symbol, unknown>) {\n if (\n changedProperties.has(\"required\") ||\n changedProperties.has(\"selectedValue\")\n ) {\n this._manageRequire();\n }\n if (changedProperties.has(\"size\")) {\n this._updateRadioButtonsSize();\n }\n if (changedProperties.has(\"tile\")) {\n this._updateRadioButtonsTile();\n }\n if (changedProperties.has(\"inverted\")) {\n this._updateRadioButtonsInvert();\n }\n if (changedProperties.has(\"showError\")) {\n this._updateRadioButtonsShowError();\n }\n if (changedProperties.has(\"form\")) {\n this._updateRadioButtonsForm();\n }\n }\n\n /**\n * Form Integration\n * --------------------------------------------------------------------------\n */\n\n private _setValue() {\n this._internals.setFormValue(this.selectedValue);\n }\n\n // Updates the \"require\" attribute of the first radiobutton underneath a radiogroup.\n // This will make sure there's a requirement for all radiobutton under the same name/group\n private _setRadioButtonRequire() {\n const radioButtons = this.querySelectorAll(\"nys-radiobutton\");\n radioButtons.forEach((radioButton, index) => {\n if (this.required && index === 0) {\n radioButton.setAttribute(\"required\", \"required\");\n }\n });\n }\n\n private async _manageRequire() {\n const message = this.errorMessage || \"Please select an option.\";\n\n const radioButtons = Array.from(this.querySelectorAll(\"nys-radiobutton\"));\n const firstRadio = radioButtons[0] as HTMLElement;\n\n if (firstRadio) {\n if (this.required && !this.selectedValue) {\n this._internals.setValidity(\n { valueMissing: true },\n message,\n firstRadio, // pass the custom element, not shadow input\n );\n } else {\n this.showError = false;\n this._internals.setValidity({}, \"\", firstRadio);\n }\n }\n }\n\n checkValidity() {\n const radioButtons = Array.from(this.querySelectorAll(\"nys-radiobutton\"));\n const valid =\n !this.required ||\n radioButtons.some((radio) => (radio as NysRadiobutton).checked);\n return valid;\n }\n\n // Need to account for if radiogroup already have a radiobutton checked at initialization\n private _initializeCheckedRadioValue() {\n const checkedRadio = this.querySelector(\"nys-radiobutton[checked]\");\n if (checkedRadio) {\n this.selectedValue = checkedRadio.getAttribute(\"value\");\n this._internals.setFormValue(this.selectedValue);\n }\n }\n\n // Core Keyboard & Click Logic\n private _getAllRadios() {\n return Array.from(\n this.querySelectorAll(\"nys-radiobutton\"),\n ) as NysRadiobutton[];\n }\n\n // Arrow / Space / Enter navigation at group level\n private async _handleKeyDown(event: KeyboardEvent) {\n const keys = [\n \"ArrowUp\",\n \"ArrowDown\",\n \"ArrowLeft\",\n \"ArrowRight\",\n \" \",\n \"Enter\",\n ];\n\n if (!keys.includes(event.key)) return;\n event.preventDefault();\n\n const radioBtns = this._getAllRadios().filter((radio) => !radio.disabled);\n const checkedRadio =\n radioBtns.find((radio) => radio.checked) || radioBtns[0];\n\n // Computing the new index based on the keydown event\n const increment =\n event.key === \" \" || event.key === \"Enter\"\n ? 0\n : [\"ArrowUp\", \"ArrowLeft\"].includes(event.key)\n ? -1\n : 1;\n\n let index = radioBtns.indexOf(checkedRadio) + increment;\n // Handles the wrap around ends if user is at first or last radiobutton\n if (index < 0) {\n index = radioBtns.length - 1;\n }\n if (index >= radioBtns.length) {\n index = 0;\n }\n\n // The target is the new radiobutton the user want to choose given the keydown type.\n // We let the target's <input/> dispatch the clickEvent and call _handleRadioButtonChange() directly to make form integration work\n const target = radioBtns[index];\n const input = await target.getInputElement();\n input?.click();\n\n this._updateGroupTabIndex();\n target.focus();\n }\n\n private _updateGroupTabIndex() {\n const radios = this._getAllRadios();\n const active = radios.find((radio) => radio.checked) || radios[0]; // If none checked, make first radiobutton tabbable\n\n radios.forEach((radio) => {\n if (radio.disabled) {\n radio.tabIndex = -1;\n } else {\n radio.tabIndex = radio === active ? 0 : -1;\n }\n\n // Need to update ARIA state due to the new tabindex\n radio.setAttribute(\"aria-checked\", radio.checked ? \"true\" : \"false\");\n radio.setAttribute(\"aria-disabled\", radio.disabled ? \"true\" : \"false\");\n radio.setAttribute(\"aria-required\", this.required ? \"true\" : \"false\");\n });\n }\n\n // This callback is automatically called when the parent form is reset.\n formResetCallback() {\n const radioButtons = this.querySelectorAll(\"nys-radiobutton\");\n radioButtons.forEach((radioButton) => {\n (radioButton as NysRadiobutton).formResetUpdate();\n });\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\n\n // Apply ARIA & initial tabindex to each child radio\n private _initializeChildAttributes() {\n const radios = this._getAllRadios();\n radios.forEach((radio) => {\n radio.setAttribute(\"role\", \"radio\");\n radio.setAttribute(\"aria-checked\", String(radio.checked));\n radio.setAttribute(\"aria-required\", String(radio.required));\n radio.setAttribute(\"aria-disabled\", String(radio.disabled));\n radio.setAttribute(\"tabindex\", \"-1\");\n });\n }\n\n // Updates the size of each radiobutton underneath a radiogroup to ensure size standardization\n private _updateRadioButtonsSize() {\n const radioButtons = this.querySelectorAll(\"nys-radiobutton\");\n radioButtons.forEach((radioButton) => {\n radioButton.setAttribute(\"size\", this.size);\n });\n }\n\n private _updateRadioButtonsTile() {\n const radioButtons = this.querySelectorAll(\"nys-radiobutton\");\n radioButtons.forEach((radioButton) => {\n if (this.tile) {\n radioButton.toggleAttribute(\"tile\", true);\n } else {\n radioButton.removeAttribute(\"tile\");\n }\n });\n }\n\n private _updateRadioButtonsInvert() {\n const radioButtons = this.querySelectorAll(\"nys-radiobutton\");\n radioButtons.forEach((radioButton) => {\n if (this.inverted) {\n radioButton.toggleAttribute(\"inverted\", true);\n } else {\n radioButton.removeAttribute(\"inverted\");\n }\n });\n }\n\n private _updateRadioButtonsShowError() {\n const radioButtons = this.querySelectorAll(\"nys-radiobutton\");\n radioButtons.forEach((radioButton) => {\n if (this.showError) {\n radioButton.setAttribute(\"showError\", \"\");\n } else {\n radioButton.removeAttribute(\"showError\");\n }\n });\n }\n\n private _updateRadioButtonsForm() {\n const radioButtons = this.querySelectorAll(\"nys-radiobutton\");\n radioButtons.forEach((radioButton) => {\n if (this.showError) {\n if (this.form !== null) {\n radioButton.setAttribute(\"form\", this.form);\n } else {\n radioButton.removeAttribute(\"form\");\n }\n } else {\n radioButton.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 /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n // Keeps radiogroup informed of the name and value of its current selected radiobutton at each change\n private _handleRadioButtonChange(event: Event) {\n const customEvent = event as CustomEvent;\n const { name, value } = customEvent.detail;\n\n this.name = name;\n this.selectedValue = value;\n this._internals.setFormValue(this.selectedValue);\n\n // Accounts for tabindex & ARIA on every click/space select\n this._updateGroupTabIndex();\n }\n\n private async _handleInvalid(event: Event) {\n event.preventDefault();\n\n // Check if the radio group is invalid and set `showError` accordingly\n if (this._internals.validity.valueMissing) {\n this.showError = true;\n this._manageRequire(); // Refresh validation message\n\n const firstRadio = this.querySelector(\n \"nys-radiobutton\",\n ) as NysRadiobutton;\n\n if (firstRadio) {\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\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 firstRadio.focus();\n firstRadio.classList.add(\"active-focus\"); // Needed to show focus outline; will be removed if user clicks to select\n }\n } else {\n // If not part of a form, simply focus.\n firstRadio.focus();\n firstRadio.classList.add(\"active-focus\");\n }\n }\n }\n }\n\n render() {\n return html`<div class=\"nys-radiogroup\">\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-radiogroup__content\">\n <fieldset role=\"radiogroup\" @keydown=${this._handleKeyDown}>\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\nif (!customElements.get(\"nys-radiogroup\")) {\n customElements.define(\"nys-radiogroup\", NysRadiogroup);\n}\n","import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport \"./nys-radiogroup\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-radiobutton.scss?inline\";\n\nlet radiobuttonIdCounter = 0;\n\n/**\n * `<nys-radiobutton>` represents a single radio button for use in a `<nys-radiogroup>`.\n *\n * Features:\n * - Single selection per group\n * - Supports labels, descriptions, tile layout, inverted style, and size variants\n * - Integrates with forms and dispatches `nys-change` events on selection\n *\n * @slot description - Optional description text announced to screen readers\n *\n * @fires nys-change - Fired when the radio is selected or deselected\n * detail: { id: string, checked: boolean, name: string, value: string }\n * @fires nys-focus - Fired when the radio gains focus\n * @fires nys-blur - Fired when the radio loses focus\n */\n\nexport class NysRadiobutton extends LitElement {\n static styles = unsafeCSS(styles);\n\n @property({ type: Boolean, reflect: true }) checked = false;\n @property({ type: Boolean, reflect: true }) disabled = false;\n @property({ type: Boolean, reflect: true }) required = false;\n @property({ type: String }) label = \"\";\n @property({ type: String }) description = \"\";\n @property({ type: String, reflect: true }) id = \"\";\n @property({ type: String, reflect: true }) name = \"\";\n @property({ type: String }) value = \"\";\n @property({ type: Boolean, reflect: true }) inverted = false;\n @property({ type: String, reflect: true }) form: string | null = null;\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n @property({ type: Boolean, reflect: true }) tile = false;\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 // This callback is automatically called when the parent form is reset.\n public formResetUpdate() {\n this.checked = false;\n }\n\n static buttonGroup: Record<string, NysRadiobutton> = {};\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-radiobutton-${Date.now()}-${radiobuttonIdCounter++}`;\n }\n\n // If this button is initially checked, set it as the current button in its group\n if (this.checked) {\n if (NysRadiobutton.buttonGroup[this.name]) {\n NysRadiobutton.buttonGroup[this.name].checked = false;\n NysRadiobutton.buttonGroup[this.name].requestUpdate();\n }\n NysRadiobutton.buttonGroup[this.name] = this;\n }\n\n this.addEventListener(\"focus\", this._handleFocus);\n this.addEventListener(\"blur\", this._handleBlur);\n this.addEventListener(\"click\", this._handleChange);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\"focus\", this._handleFocus);\n this.removeEventListener(\"blur\", this._handleBlur);\n }\n\n updated(changedProperties: Map<string | number | symbol, unknown>) {\n // When \"checked\" changes, update the internals.\n if (changedProperties.has(\"checked\")) {\n // Ensure only one radiobutton per group is checked.\n if (this.checked && NysRadiobutton.buttonGroup[this.name] !== this) {\n if (NysRadiobutton.buttonGroup[this.name]) {\n NysRadiobutton.buttonGroup[this.name].checked = false;\n NysRadiobutton.buttonGroup[this.name].requestUpdate();\n }\n NysRadiobutton.buttonGroup[this.name] = this;\n }\n }\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 /**\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 radiobutton change event & unselection of other options in group\n private _handleChange() {\n // Remove active-focus so the focus outline doesn't linger\n // when the user selects a choice, since form focus is no longer needed\n this.classList.remove(\"active-focus\");\n\n if (!this.checked && !this.disabled) {\n if (NysRadiobutton.buttonGroup[this.name]) {\n NysRadiobutton.buttonGroup[this.name].checked = false;\n NysRadiobutton.buttonGroup[this.name].requestUpdate();\n }\n\n NysRadiobutton.buttonGroup[this.name] = this;\n this.checked = true;\n\n // Dispatch a change event with the name and value\n this._emitChangeEvent();\n }\n }\n\n // Handle focus event\n private _handleFocus() {\n this.dispatchEvent(new Event(\"nys-focus\"));\n }\n\n // Handle blur event\n private _handleBlur() {\n this.classList.remove(\"active-focus\"); // removing this classList so the focus ring for handleInvalid() at radiogroup level will disappear\n this.dispatchEvent(new Event(\"nys-blur\"));\n }\n\n private _callInputHandling() {\n if (this.disabled) return;\n\n // Find the hidden input and trigger a click to toggle selection\n const input = this.shadowRoot?.querySelector(\n 'input[type=\"radio\"]',\n ) as HTMLInputElement;\n\n if (input) {\n input.focus();\n input.click();\n }\n }\n\n render() {\n return html`\n <input\n type=\"radio\"\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 @change=\"${this._handleChange}\"\n hidden\n aria-hidden=\"true\"\n />\n <div\n class=\"nys-radiobutton\"\n @click=\"${this._callInputHandling}\"\n aria-label=${this.label}\n >\n <span class=\"nys-radiobutton__radio\"></span>\n ${this.label &&\n html`<nys-label\n label=${this.label}\n description=${ifDefined(this.description || undefined)}\n ?inverted=${this.inverted}\n >\n <slot name=\"description\" slot=\"description\">${this.description}</slot>\n </nys-label> `}\n </div>\n `;\n }\n}\n\nif (!customElements.get(\"nys-radiobutton\")) {\n customElements.define(\"nys-radiobutton\", NysRadiobutton);\n}\n"],"names":["radiogroupIdCounter","_NysRadiogroup","LitElement","changedProperties","radioButton","index","message","firstRadio","radioButtons","radio","checkedRadio","event","radioBtns","increment","target","radios","active","nodes","node","customEvent","name","value","form","element","html","unsafeCSS","styles","NysRadiogroup","__decorateClass","property","state","radiobuttonIdCounter","_NysRadiobutton","_a","input","ifDefined","NysRadiobutton"],"mappings":"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"}
1
+ {"version":3,"file":"nys-radiobutton.js","sources":["../src/nys-radiogroup.ts","../src/nys-radiobutton.ts"],"sourcesContent":["import { LitElement, html, unsafeCSS } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport type { NysRadiobutton } from \"./nys-radiobutton\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-radiobutton.scss?inline\";\n\nlet radiogroupIdCounter = 0;\n\n/**\n * A container for grouping `nys-radiobutton` elements as a single form control with enforced single selection.\n * Handles keyboard navigation (arrow keys), validation, required constraints, and form integration.\n *\n * Use to let users select exactly one option from 2-6 choices. Apply `tile`, `size`, and `inverted` to the group\n * and all children inherit these styles automatically. For 7+ options, use `nys-select`.\n *\n * @summary Container for grouping radio buttons as a single form control.\n * @element nys-radiogroup\n *\n * @slot - Default slot for `nys-radiobutton` elements.\n * @slot description - Custom HTML description content.\n *\n * @example Basic radio group\n * ```html\n * <nys-radiogroup label=\"Select borough\" required>\n * <nys-radiobutton name=\"borough\" value=\"bronx\" label=\"The Bronx\"></nys-radiobutton>\n * <nys-radiobutton name=\"borough\" value=\"brooklyn\" label=\"Brooklyn\"></nys-radiobutton>\n * <nys-radiobutton name=\"borough\" value=\"manhattan\" label=\"Manhattan\"></nys-radiobutton>\n * </nys-radiogroup>\n * ```\n */\n\nexport class NysRadiogroup 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. Auto-populated from child radiobuttons. */\n @property({ type: String, reflect: true }) name = \"\";\n\n /** Requires a selection before form submission. */\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 radiobuttons 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 * Radio 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 selectedValue: string | null = null;\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-radiogroup-${Date.now()}-${radiogroupIdCounter++}`;\n }\n this.addEventListener(\"nys-change\", this._handleRadioButtonChange);\n this.addEventListener(\"invalid\", this._handleInvalid);\n this.addEventListener(\"nys-error\", this._handleChildError);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener(\"nys-change\", this._handleRadioButtonChange);\n this.removeEventListener(\"invalid\", this._handleInvalid);\n }\n\n async firstUpdated() {\n await this.updateComplete;\n this._initializeCheckedRadioValue();\n this._setValue(); // This ensures our element always participates in the form\n this._setRadioButtonRequire();\n this._updateRadioButtonsSize();\n this._updateRadioButtonsTile();\n this._updateRadioButtonsShowError();\n this._getSlotDescriptionForAria();\n\n this._initializeChildAttributes();\n this._updateGroupTabIndex();\n }\n\n updated(changedProperties: Map<string | symbol, unknown>) {\n if (\n changedProperties.has(\"required\") ||\n changedProperties.has(\"selectedValue\")\n ) {\n this._manageRequire();\n }\n if (changedProperties.has(\"size\")) {\n this._updateRadioButtonsSize();\n }\n if (changedProperties.has(\"tile\")) {\n this._updateRadioButtonsTile();\n }\n if (changedProperties.has(\"inverted\")) {\n this._updateRadioButtonsInvert();\n }\n if (changedProperties.has(\"showError\")) {\n this._updateRadioButtonsShowError();\n }\n if (changedProperties.has(\"form\")) {\n this._updateRadioButtonsForm();\n }\n }\n\n /**\n * Form Integration\n * --------------------------------------------------------------------------\n */\n\n private _setValue() {\n this._internals.setFormValue(this.selectedValue);\n }\n\n // Updates the \"require\" attribute of the first radiobutton underneath a radiogroup.\n // This will make sure there's a requirement for all radiobutton under the same name/group\n private _setRadioButtonRequire() {\n const radioButtons = this.querySelectorAll(\"nys-radiobutton\");\n radioButtons.forEach((radioButton, index) => {\n if (this.required && index === 0) {\n radioButton.setAttribute(\"required\", \"required\");\n }\n });\n }\n\n private async _manageRequire() {\n const message = this.errorMessage || \"Please select an option.\";\n\n const radioButtons = Array.from(this.querySelectorAll(\"nys-radiobutton\"));\n const firstRadio = radioButtons[0] as HTMLElement;\n\n if (firstRadio) {\n if (this.required && !this.selectedValue) {\n this._internals.setValidity(\n { valueMissing: true },\n message,\n firstRadio, // pass the custom element, not shadow input\n );\n } else {\n this.showError = false;\n this._internals.setValidity({}, \"\", firstRadio);\n }\n }\n }\n\n checkValidity() {\n const radioButtons = Array.from(this.querySelectorAll(\"nys-radiobutton\"));\n const valid =\n !this.required ||\n radioButtons.some((radio) => (radio as NysRadiobutton).checked);\n return valid;\n }\n\n // Need to account for if radiogroup already have a radiobutton checked at initialization\n private _initializeCheckedRadioValue() {\n const checkedRadio = this.querySelector(\"nys-radiobutton[checked]\");\n if (checkedRadio) {\n this.selectedValue = checkedRadio.getAttribute(\"value\");\n this._internals.setFormValue(this.selectedValue);\n }\n }\n\n // Core Keyboard & Click Logic\n private _getAllRadios() {\n return Array.from(\n this.querySelectorAll(\"nys-radiobutton\"),\n ) as NysRadiobutton[];\n }\n\n // Arrow / Space / Enter navigation at group level\n private async _handleKeyDown(event: KeyboardEvent) {\n const keys = [\"ArrowUp\", \"ArrowDown\", \" \", \"Enter\"];\n\n if (!keys.includes(event.key)) return;\n event.preventDefault();\n\n const radioBtns = this._getAllRadios().filter((radio) => !radio.disabled);\n\n const focusedRadio = radioBtns.find((radio) => radio.matches(\":focus\"));\n const currentRadio =\n focusedRadio || radioBtns.find((radio) => radio.checked) || radioBtns[0]; // fallback is checked radio or first radio\n\n let increment = 0;\n if ([\"ArrowUp\", \"ArrowLeft\"].includes(event.key)) {\n increment = -1;\n } else if ([\"ArrowDown\", \"ArrowRight\"].includes(event.key)) {\n increment = 1;\n }\n\n let index = radioBtns.indexOf(currentRadio) + increment;\n\n // Handles the wrap around ends if user is at first or last radiobutton\n if (index < 0) {\n index = radioBtns.length - 1;\n }\n if (index >= radioBtns.length) {\n index = 0;\n }\n\n const target = radioBtns[index];\n const input = await target.getInputElement();\n input?.click();\n\n await this.updateComplete;\n this._updateGroupTabIndex();\n target.focus();\n }\n\n private _updateGroupTabIndex() {\n const radios = this._getAllRadios();\n\n // Pick active: checked first, otherwise first enabled\n const active =\n radios.find((radio) => radio.checked && !radio.disabled) ||\n radios.find((radio) => !radio.disabled);\n\n radios.forEach((radio) => {\n radio.setAttribute(\"aria-checked\", String(radio.checked));\n // Only one radiobutton can be focusable at all times.\n // Due to this, we calculate logic to determine an active radiobutton and call all other as tabindex=\"-1\"\n radio.tabIndex = radio === active && !radio.disabled ? 0 : -1;\n });\n }\n\n // This callback is automatically called when the parent form is reset.\n public formResetCallback() {\n const radioButtons = this.querySelectorAll(\"nys-radiobutton\");\n radioButtons.forEach((radioButton) => {\n (radioButton as NysRadiobutton).formResetUpdate();\n });\n\n this.selectedValue = null;\n\n this._internals.setFormValue(null);\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 // Apply ARIA & initial tabindex to each child radio\n private _initializeChildAttributes() {\n const radios = this._getAllRadios();\n radios.forEach((radio) => {\n radio.setAttribute(\"role\", \"radio\");\n radio.setAttribute(\"aria-checked\", String(radio.checked));\n radio.setAttribute(\"aria-required\", String(radio.required));\n radio.setAttribute(\"aria-disabled\", String(radio.disabled));\n radio.setAttribute(\"tabindex\", \"-1\");\n });\n }\n\n // Updates the size of each radiobutton underneath a radiogroup to ensure size standardization\n private _updateRadioButtonsSize() {\n const radioButtons = this.querySelectorAll(\"nys-radiobutton\");\n radioButtons.forEach((radioButton) => {\n radioButton.setAttribute(\"size\", this.size);\n });\n }\n\n private _updateRadioButtonsTile() {\n const radioButtons = this.querySelectorAll(\"nys-radiobutton\");\n radioButtons.forEach((radioButton) => {\n if (this.tile) {\n radioButton.toggleAttribute(\"tile\", true);\n } else {\n radioButton.removeAttribute(\"tile\");\n }\n });\n }\n\n private _updateRadioButtonsInvert() {\n const radioButtons = this.querySelectorAll(\"nys-radiobutton\");\n radioButtons.forEach((radioButton) => {\n if (this.inverted) {\n radioButton.toggleAttribute(\"inverted\", true);\n } else {\n radioButton.removeAttribute(\"inverted\");\n }\n });\n }\n\n private _updateRadioButtonsShowError() {\n const radioButtons = this.querySelectorAll(\"nys-radiobutton\");\n radioButtons.forEach((radioButton) => {\n if (this.showError) {\n radioButton.setAttribute(\"showError\", \"\");\n } else {\n radioButton.removeAttribute(\"showError\");\n }\n });\n }\n\n private _updateRadioButtonsForm() {\n const radioButtons = this.querySelectorAll(\"nys-radiobutton\");\n radioButtons.forEach((radioButton) => {\n if (this.showError) {\n if (this.form !== null) {\n radioButton.setAttribute(\"form\", this.form);\n } else {\n radioButton.removeAttribute(\"form\");\n }\n } else {\n radioButton.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 /**\n * Event Handlers\n * --------------------------------------------------------------------------\n */\n\n // Keeps radiogroup informed of the name and value of its current selected radiobutton at each change\n private _handleRadioButtonChange(event: Event) {\n const { name, value } = (event as CustomEvent).detail;\n\n this.name = name;\n this.selectedValue = value;\n this._internals.setFormValue(this.selectedValue);\n\n // selecting anything clears group required error\n this._internals.setValidity({});\n this.showError = false;\n\n // Accounts for tabindex & ARIA on every click/space select\n this._updateGroupTabIndex();\n }\n\n private async _handleInvalid(event: Event) {\n event.preventDefault();\n\n // Focus \"other\" text input when customError is set\n if (this._internals.validity.customError) {\n const radios = this._getAllRadios();\n const otherRadio = radios.find((radio) => radio.other && radio.checked);\n\n if (otherRadio) {\n const textInput = otherRadio.shadowRoot?.querySelector(\"nys-textinput\");\n otherRadio.classList.remove(\"focused\");\n\n if (textInput) {\n await (textInput as any).updateComplete;\n (textInput as HTMLElement).focus();\n return;\n }\n }\n }\n\n // Check if the radio group is invalid and set `showError` accordingly\n if (this._internals.validity.valueMissing) {\n this.showError = true;\n this._manageRequire(); // Refresh validation message\n\n const firstRadio = this.querySelector(\n \"nys-radiobutton\",\n ) as NysRadiobutton;\n\n if (firstRadio) {\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\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 firstRadio.focus();\n }\n } else {\n // If not part of a form, simply focus.\n firstRadio.focus();\n }\n }\n }\n }\n\n private _handleChildError(event: Event) {\n event.stopPropagation();\n\n const { message, sourceRadio } = (event as CustomEvent).detail;\n if (!sourceRadio) return;\n\n this.showError = true;\n\n this._internals.setValidity(\n { customError: true },\n message || \"Please complete this field.\",\n sourceRadio as HTMLElement,\n );\n }\n\n render() {\n return html`<fieldset\n aria-label=\"${this.label}${this._slottedDescriptionText\n ? ` ${this._slottedDescriptionText}`\n : this.description\n ? ` ${this.description}`\n : \"\"}\"\n role=\"radiogroup\"\n class=\"nys-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-radiogroup__content\" @keydown=${this._handleKeyDown}>\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\nif (!customElements.get(\"nys-radiogroup\")) {\n customElements.define(\"nys-radiogroup\", NysRadiogroup);\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-radiogroup\";\n// @ts-ignore: SCSS module imported via bundler as inline\nimport styles from \"./nys-radiobutton.scss?inline\";\n\nlet radiobuttonIdCounter = 0;\n\n/**\n * A radio button for single selection within a `nys-radiogroup`. Only one radio with the same `name` can be selected.\n *\n * Use within `nys-radiogroup` for 2-6 mutually exclusive options. For 7+ options, use `nys-select`.\n * For multiple selections, use `nys-checkbox`.\n *\n * @summary Radio button for single selection from mutually exclusive options.\n * @element nys-radiobutton\n *\n * @slot description - Custom HTML description content.\n *\n * @fires nys-change - Fired when selection changes. Detail: `{id, checked, name, value}`.\n * @fires nys-focus - Fired when radio gains focus.\n * @fires nys-blur - Fired when radio loses focus.\n *\n * @example Radio group\n * ```html\n * <nys-radiogroup label=\"Select borough\" required>\n * <nys-radiobutton name=\"borough\" value=\"bronx\" label=\"The Bronx\"></nys-radiobutton>\n * <nys-radiobutton name=\"borough\" value=\"brooklyn\" label=\"Brooklyn\"></nys-radiobutton>\n * </nys-radiogroup>\n * ```\n */\n\nexport class NysRadiobutton extends LitElement {\n static styles = unsafeCSS(styles);\n\n /** Whether this radio is selected. Only one per group can be checked. */\n @property({ type: Boolean, reflect: true }) checked = false;\n\n /** Prevents interaction. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Marks group as required. Set on radiogroup, not individual radios. */\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 /** Group name. Radios with same name are mutually exclusive. */\n @property({ type: String, reflect: true }) name = \"\";\n\n /** Value submitted when this radio is selected. */\n @property({ type: String }) value = \"\";\n\n /** Adjusts colors for dark backgrounds. */\n @property({ type: Boolean, reflect: true }) inverted = false;\n\n /** Form `id` to associate with. */\n @property({ type: String, reflect: true }) form: string | null = null;\n\n /**\n * Radio size: `sm` (24px) or `md` (32px, default).\n * @default \"md\"\n */\n @property({ type: String, reflect: true }) size: \"sm\" | \"md\" = \"md\";\n\n /** Renders as tile with larger clickable area. */\n @property({ type: Boolean, reflect: true }) tile = false;\n @property({ type: Boolean, reflect: true }) other = false;\n @property({ type: Boolean }) showOtherError = false;\n\n @state() private isMobile = window.innerWidth < 480;\n\n private _hasUserInteracted = false; // need this flag for \"eager mode\"\n\n static buttonGroup: Record<string, NysRadiobutton> = {};\n\n /**\n * Lifecycle methods\n * --------------------------------------------------------------------------\n */\n connectedCallback() {\n super.connectedCallback();\n if (!this.id) {\n this.id = `nys-radiobutton-${Date.now()}-${radiobuttonIdCounter++}`;\n }\n\n // If this button is initially checked, set it as the current button in its group\n if (this.checked) {\n if (NysRadiobutton.buttonGroup[this.name]) {\n NysRadiobutton.buttonGroup[this.name].checked = false;\n NysRadiobutton.buttonGroup[this.name].requestUpdate();\n }\n NysRadiobutton.buttonGroup[this.name] = this;\n }\n\n this.addEventListener(\"focus\", this._handleFocus);\n this.addEventListener(\"blur\", this._handleBlur);\n this.addEventListener(\"click\", this._handleChange);\n window.addEventListener(\"resize\", this._handleResize);\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n this.removeEventListener(\"focus\", this._handleFocus);\n this.removeEventListener(\"blur\", this._handleBlur);\n window.removeEventListener(\"resize\", this._handleResize);\n }\n\n updated(changedProperties: Map<string | number | symbol, unknown>) {\n // When \"checked\" changes, update the internals.\n if (changedProperties.has(\"checked\")) {\n const wasChecked = changedProperties.get(\"checked\") as\n | boolean\n | undefined;\n\n // If this radio was unchecked, clear \"other\" error state\n if (wasChecked && !this.checked) {\n this._clearOtherState();\n }\n\n // Ensure only one radiobutton per group is checked.\n if (this.checked && NysRadiobutton.buttonGroup[this.name] !== this) {\n if (NysRadiobutton.buttonGroup[this.name]) {\n NysRadiobutton.buttonGroup[this.name].checked = false;\n NysRadiobutton.buttonGroup[this.name].requestUpdate();\n }\n NysRadiobutton.buttonGroup[this.name] = this;\n }\n }\n }\n\n /**\n * Functions\n * --------------------------------------------------------------------------\n */\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 // This callback is automatically called when the parent form is reset.\n public formResetUpdate() {\n this.checked = false;\n this._clearOtherState();\n\n if (NysRadiobutton.buttonGroup[this.name] === this) {\n delete NysRadiobutton.buttonGroup[this.name];\n }\n\n // Re-render UI\n this.requestUpdate();\n }\n\n private _handleResize = () => {\n this.isMobile = window.innerWidth < 480;\n };\n\n private _clearOtherState() {\n if (!this.other) return;\n\n this.showOtherError = false;\n this._hasUserInteracted = false;\n\n // Optional: clear error at the group level\n this.dispatchEvent(\n new CustomEvent(\"nys-error-clear\", {\n detail: {\n id: this.id,\n name: this.name,\n type: \"other\",\n },\n bubbles: true,\n composed: true,\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 radiobutton change event & un-selection of other radio options in group\n private async _handleChange() {\n this.showOtherError = false;\n\n if (!this.checked && !this.disabled) {\n if (NysRadiobutton.buttonGroup[this.name]) {\n NysRadiobutton.buttonGroup[this.name].checked = false;\n NysRadiobutton.buttonGroup[this.name].requestUpdate();\n }\n NysRadiobutton.buttonGroup[this.name] = this;\n\n this.checked = true;\n this._validateOtherAndEmitError();\n this._emitChangeEvent();\n }\n }\n\n // Handle focus event\n private _handleFocus(event: FocusEvent) {\n // If the focus event came from the internal nys-textinput, skip\n const path = event?.composedPath() || [];\n const isInsideTextInput = path.some(\n (el) => (el as HTMLElement).tagName?.toLowerCase() === \"nys-textinput\",\n );\n\n if (!isInsideTextInput) {\n this.classList.add(\"focused\");\n }\n\n this.dispatchEvent(new Event(\"nys-focus\"));\n }\n\n // Handle blur event\n private _handleBlur() {\n this.classList.remove(\"focused\");\n this.dispatchEvent(new Event(\"nys-blur\"));\n\n setTimeout(() => {\n // Only validate if we're blurring away from the component entirely\n // and this is an \"other\" radio that's checked\n if (this.other && this.checked) {\n this._hasUserInteracted = true;\n this._validateOtherAndEmitError();\n }\n }, 50);\n }\n\n private _callInputHandling() {\n if (this.disabled) return;\n\n // Find the hidden input and trigger a click to toggle selection\n const input = this.shadowRoot?.querySelector(\n 'input[type=\"radio\"]',\n ) as HTMLInputElement;\n\n if (input) {\n input.focus();\n input.click();\n }\n }\n\n private _handleTextInput(event: Event) {\n const input = event.target as HTMLInputElement;\n let newValue = input.value;\n this.value = newValue;\n\n if (this._hasUserInteracted) {\n this._validateOtherAndEmitError();\n }\n\n this._emitChangeEvent();\n }\n\n private _handleTextInputBlur() {\n this._hasUserInteracted = true;\n this._validateOtherAndEmitError();\n }\n\n private _validateOtherAndEmitError() {\n if (!this.other) return;\n\n if (!this.checked || !this._hasUserInteracted) {\n this.showOtherError = false;\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 sourceRadio: this,\n },\n bubbles: true,\n composed: true,\n }),\n );\n }\n }\n\n private _handleOtherKeydown(e: KeyboardEvent) {\n if (e.key == \"Space\" || e.key === \" \") {\n e.stopPropagation();\n }\n }\n\n render() {\n return html`\n <input\n type=\"radio\"\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 @change=\"${this._handleChange}\"\n aria-hidden=\"true\"\n hidden\n class=\"sr-only\"\n />\n <div\n class=\"nys-radiobutton\"\n @click=\"${this._callInputHandling}\"\n aria-label=${this.label || (this.other ?? \"Other\")}\n >\n <div class=\"nys-radiobutton__main-container\">\n <span class=\"nys-radiobutton__radio\"></span>\n ${(this.label || this.other) &&\n html`<nys-label\n label=\"${this.label || (this.other ? \"Other\" : \"\")}\"\n description=${ifDefined(this.description || undefined)}\n ?inverted=${this.inverted}\n >\n <slot name=\"description\" slot=\"description\"\n >${this.description}</slot\n >\n </nys-label> `}\n </div>\n </div>\n <div class=\"nys-radiobutton__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 @keydown=${this._handleOtherKeydown}\n @nys-focus=${() => this.classList.remove(\"focused\")}\n ariaLabel=\"Other\"\n aria-invalid=${this.showOtherError ? \"true\" : \"false\"}\n width=${this.isMobile ? \"full\" : \"md\"}\n ></nys-textinput>\n `\n : \"\"}\n </div>\n `;\n }\n}\n\nif (!customElements.get(\"nys-radiobutton\")) {\n customElements.define(\"nys-radiobutton\", NysRadiobutton);\n}\n"],"names":["radiogroupIdCounter","_NysRadiogroup","LitElement","changedProperties","radioButton","index","message","firstRadio","radioButtons","radio","checkedRadio","event","radioBtns","currentRadio","increment","target","radios","active","nodes","node","name","value","otherRadio","textInput","form","element","sourceRadio","html","unsafeCSS","styles","NysRadiogroup","__decorateClass","property","state","radiobuttonIdCounter","_NysRadiobutton","_a","el","input","newValue","isInvalid","e","ifDefined","NysRadiobutton"],"mappings":"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"}
@@ -0,0 +1,100 @@
1
+ import { LitElement } from "lit";
2
+ /**
3
+ * A container for grouping `nys-radiobutton` elements as a single form control with enforced single selection.
4
+ * Handles keyboard navigation (arrow keys), validation, required constraints, and form integration.
5
+ *
6
+ * Use to let users select exactly one option from 2-6 choices. Apply `tile`, `size`, and `inverted` to the group
7
+ * and all children inherit these styles automatically. For 7+ options, use `nys-select`.
8
+ *
9
+ * @summary Container for grouping radio buttons as a single form control.
10
+ * @element nys-radiogroup
11
+ *
12
+ * @slot - Default slot for `nys-radiobutton` elements.
13
+ * @slot description - Custom HTML description content.
14
+ *
15
+ * @example Basic radio group
16
+ * ```html
17
+ * <nys-radiogroup label="Select borough" required>
18
+ * <nys-radiobutton name="borough" value="bronx" label="The Bronx"></nys-radiobutton>
19
+ * <nys-radiobutton name="borough" value="brooklyn" label="Brooklyn"></nys-radiobutton>
20
+ * <nys-radiobutton name="borough" value="manhattan" label="Manhattan"></nys-radiobutton>
21
+ * </nys-radiogroup>
22
+ * ```
23
+ */
24
+ export declare class NysRadiogroup extends LitElement {
25
+ static styles: import("lit").CSSResult;
26
+ /** Unique identifier. Auto-generated if not provided. */
27
+ id: string;
28
+ /** Name for form submission. Auto-populated from child radiobuttons. */
29
+ name: string;
30
+ /** Requires a selection before form submission. */
31
+ required: boolean;
32
+ /** Shows "Optional" flag. */
33
+ optional: boolean;
34
+ /** Shows error message when true. */
35
+ showError: boolean;
36
+ /** Error message text. Shown only when `showError` is true. */
37
+ errorMessage: string;
38
+ /** Visible label text for the group. */
39
+ label: string;
40
+ /** Helper text below label. Use slot for custom HTML. */
41
+ description: string;
42
+ /** Renders all radiobuttons as tiles with larger clickable area. */
43
+ tile: boolean;
44
+ /** Tooltip text shown on hover/focus of info icon. */
45
+ tooltip: string;
46
+ /** Adjusts colors for dark backgrounds. Applied to all children. */
47
+ inverted: boolean;
48
+ /** Form `id` to associate with. Applied to all children. */
49
+ form: string | null;
50
+ /**
51
+ * Radio size for all children: `sm` (24px) or `md` (32px, default).
52
+ * @default "md"
53
+ */
54
+ size: "sm" | "md";
55
+ private selectedValue;
56
+ private _slottedDescriptionText;
57
+ private _internals;
58
+ /**
59
+ * Lifecycle methods
60
+ * --------------------------------------------------------------------------
61
+ */
62
+ static formAssociated: boolean;
63
+ constructor();
64
+ connectedCallback(): void;
65
+ disconnectedCallback(): void;
66
+ firstUpdated(): Promise<void>;
67
+ updated(changedProperties: Map<string | symbol, unknown>): void;
68
+ /**
69
+ * Form Integration
70
+ * --------------------------------------------------------------------------
71
+ */
72
+ private _setValue;
73
+ private _setRadioButtonRequire;
74
+ private _manageRequire;
75
+ checkValidity(): boolean;
76
+ private _initializeCheckedRadioValue;
77
+ private _getAllRadios;
78
+ private _handleKeyDown;
79
+ private _updateGroupTabIndex;
80
+ formResetCallback(): void;
81
+ /**
82
+ * Functions
83
+ * --------------------------------------------------------------------------
84
+ */
85
+ private _initializeChildAttributes;
86
+ private _updateRadioButtonsSize;
87
+ private _updateRadioButtonsTile;
88
+ private _updateRadioButtonsInvert;
89
+ private _updateRadioButtonsShowError;
90
+ private _updateRadioButtonsForm;
91
+ private _getSlotDescriptionForAria;
92
+ /**
93
+ * Event Handlers
94
+ * --------------------------------------------------------------------------
95
+ */
96
+ private _handleRadioButtonChange;
97
+ private _handleInvalid;
98
+ private _handleChildError;
99
+ render(): import("lit-html").TemplateResult<1>;
100
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nysds/nys-radiobutton",
3
- "version": "1.13.0",
3
+ "version": "1.14.0",
4
4
  "description": "The Radiobutton component from the NYS Design System.",
5
5
  "module": "dist/nys-radiobutton.js",
6
6
  "types": "dist/index.d.ts",
@@ -23,13 +23,13 @@
23
23
  "lit-analyze": "lit-analyzer '**/*.ts'"
24
24
  },
25
25
  "dependencies": {
26
- "@nysds/nys-label": "^1.13.0",
27
- "@nysds/nys-errormessage": "^1.13.0"
26
+ "@nysds/nys-label": "^1.14.0",
27
+ "@nysds/nys-errormessage": "^1.14.0"
28
28
  },
29
29
  "devDependencies": {
30
30
  "lit": "^3.3.1",
31
31
  "typescript": "^5.9.3",
32
- "vite": "^7.1.12"
32
+ "vite": "^7.3.1"
33
33
  },
34
34
  "keywords": [
35
35
  "new-york-state",