@truenas/ui-components 0.7.1 → 0.7.2

package/fesm2022/truenas-ui-components.mjs

@@ -652,7 +652,7 @@ function injectTnLabels(token) {
     return isSignal(provided) ? provided : signal(provided).asReadonly();
 }
 
-let nextId$5 = 0;
+let nextId$6 = 0;
 /** English defaults used when no `TN_AUTOCOMPLETE_LABELS` provider is registered. */
 const TN_AUTOCOMPLETE_DEFAULT_LABELS = {
     placeholder: 'Type to search...',
@@ -672,7 +672,7 @@ class TnAutocompleteComponent {
     overlay = inject(Overlay);
     viewContainerRef = inject(ViewContainerRef);
     /** Unique instance ID for ARIA linkage */
-    uid = `tn-autocomplete-${nextId$5++}`;
+    uid = `tn-autocomplete-${nextId$6++}`;
     /**
      * All available options. The `label` is displayed; the `value` is committed
      * to the form control. A written value is resolved back to its option's
@@ -6184,7 +6184,7 @@ function libIconMarker(iconName) {
 // Module-level counter for deterministic, unique instance ids (matches the
 // tn-autocomplete convention). Deterministic ids are SSR/hydration-safe and
 // stable across snapshots, unlike a Math.random() seed.
-let nextId$4 = 0;
+let nextId$5 = 0;
 class TnInputComponent {
     inputEl = viewChild.required('inputEl');
     inputType = input(InputType.PlainText, ...(ngDevMode ? [{ debugName: "inputType" }] : []));
@@ -6361,7 +6361,7 @@ class TnInputComponent {
     // Unique per instance: a hard-coded id produced duplicate ids when multiple
     // tn-inputs share a page (invalid HTML, and it breaks any future label `for=`,
     // aria-describedby, or getElementById targeting this input).
-    id = `tn-input-${nextId$4++}`;
+    id = `tn-input-${nextId$5++}`;
     // Protected: the display string is owned by the component and driven through the
     // CVA flow (writeValue / onValueChange). External writes would bypass that flow.
     // A signal so the `[value]` binding reflects writeValue reactively — a plain field
@@ -7628,7 +7628,7 @@ class TnChipHarness extends ComponentHarness {
     }
 }
 
-let nextId$3 = 0;
+let nextId$4 = 0;
 /**
  * An editable, multi-value chip input — tokenized entry where typed text
  * becomes removable `tn-chip`s alongside an inline text field. Text is
@@ -7673,7 +7673,7 @@ class TnChipInputComponent {
     overlay = inject(Overlay);
     viewContainerRef = inject(ViewContainerRef);
     /** Unique instance id for ARIA linkage between the input and its dropdown. */
-    uid = `tn-chip-input-${nextId$3++}`;
+    uid = `tn-chip-input-${nextId$4++}`;
     /** Placeholder shown in the text field when it is empty. */
     placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
     /** Disables the whole control — chips become non-removable and the field read-only. */
@@ -9762,6 +9762,403 @@ class TnCheckboxHarness extends ComponentHarness {
     }
 }
 
+let nextId$3 = 0;
+/**
+ * A `role="group"` wrapper that owns the selection for a set of `tn-checkbox`es, as one control
+ * whose value is the ARRAY of checked option values.
+ *
+ * `tn-checkbox` is a boolean `ControlValueAccessor` — one control per box. A multi-select field
+ * ("which USB devices to pass through", "which catalog trains to offer") has a single
+ * array-valued control instead, and nothing in the library spoke that shape: consumers either
+ * exploded it into one boolean control per option and reassembled the array by hand on submit, or
+ * kept a bespoke component outside the library. This is that shape, with the same
+ * `options`/`compareWith`/`testId` surface as {@link TnRadioGroupComponent} so the single-select
+ * and multi-select forms of the same field read alike.
+ *
+ * ```html
+ * <tn-form-field label="USB Devices" tooltip="Devices to pass through to the container">
+ *   <tn-checkbox-group formControlName="usb_devices" [options]="usbOptions" />
+ * </tn-form-field>
+ * ```
+ *
+ * Inside a `tn-form-field` the group is a normal control: the field names it via
+ * `aria-labelledby`, infers the required indicator from its validators, and renders its validation
+ * message — none of which a loose pile of checkboxes gets.
+ *
+ * Options come from the `options` input only. Unlike `tn-radio`, `tn-checkbox` is not group-aware,
+ * so a projected child would render as an independent boolean control that silently ignores the
+ * group's value; the group therefore projects nothing rather than accepting content it cannot
+ * drive.
+ */
+class TnCheckboxGroupComponent {
+    /**
+     * Options to render, one checkbox each.
+     *
+     * Options are tracked by `value`, so object values must be referentially stable — rebuilding
+     * them as fresh literals on every change detection pass re-creates the whole list. Same
+     * requirement the `compareWith` case implies; hold the objects in a field.
+     */
+    options = input([], ...(ngDevMode ? [{ debugName: "options" }] : []));
+    /**
+     * Lays the options out in a wrapping row of equal columns instead of stacking them. Column width
+     * comes from `--tn-checkbox-group-inline-basis` (default `50%`), and collapses to one column on
+     * a narrow viewport.
+     */
+    inline = input(false, ...(ngDevMode ? [{ debugName: "inline" }] : []));
+    /**
+     * Explicit accessible name for the group. Inside a `tn-form-field` with a label this is
+     * unnecessary — the field names the group automatically — but a group with neither is announced
+     * as an unlabeled group.
+     *
+     * A required group appends "required" to whatever this says, since that is the only channel
+     * `role="group"` leaves open for it — see the `required` input.
+     */
+    ariaLabel = input(undefined, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : []));
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * Whether the group announces itself as required.
+     *
+     * Deliberately NOT propagated to the options' native `required`, which is the opposite of the
+     * choice `tn-radio-group` makes — and the difference is in the HTML, not in taste. A required
+     * radio is satisfied by any one option in the `name` group; a required checkbox is satisfied
+     * only by ITSELF being checked, so propagating it here would have the browser demand every box.
+     * "At least one" is a validator's job.
+     *
+     * Nor does it become `aria-required`, which is the OTHER place `tn-radio-group` cannot be
+     * copied: WAI-ARIA 1.2 supports only the globals plus `aria-activedescendant`/`aria-disabled`
+     * on `role="group"`, so an `aria-required` there is dropped by assistive tech and flagged by
+     * axe, whereas `role="radiogroup"` genuinely supports it. The state instead rides in the
+     * group's accessible NAME, as a "required" suffix — see {@link labelledBy}.
+     */
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    /**
+     * Test-id base for the group and, scoped by the option label, for every option: base
+     * `usb_devices` yields `checkbox-group-usb-devices` on the group and
+     * `checkbox-usb-devices-web-cam` on its options. Falls back to the bound control name.
+     */
+    testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
+    /**
+     * Custom comparator for matching option values against the selected ones. Provide it when option
+     * values are objects — the default is identity, so a structurally-equal-but-distinct object
+     * would leave the group rendering nothing as checked.
+     *
+     * Called with an option value on the right and a currently-selected value on the left, and must
+     * tolerate `null`/`undefined` on either side rather than dereferencing straight into a property.
+     *
+     * @example
+     * ```ts
+     * compareWith = (a, b) => a?.id === b?.id;
+     * ```
+     */
+    compareWith = input(...(ngDevMode ? [undefined, { debugName: "compareWith" }] : []));
+    /** Emits the new value array on every user toggle (not on programmatic writes). */
+    change = output();
+    /**
+     * ARIA wiring from an enclosing `tn-form-field` (label, error/hint, invalid, required).
+     * All-null standalone, or when `ariaLabel` overrides the field's label.
+     */
+    fieldAria = injectTnFormFieldAria(this.ariaLabel);
+    /** Test-id base, falling back to the bound control name when `testId` is unset. */
+    resolvedTestId = controlTestId(this.testId);
+    selectedValues = signal([], ...(ngDevMode ? [{ debugName: "selectedValues" }] : []));
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
+    /**
+     * Combined disabled state (own input plus a disabled bound control). The native `disabled` on
+     * each option is what blocks interaction; `aria-disabled` on the group is what tells a screen
+     * reader landing on the container about it, and gives styling a hook for the group as a whole.
+     */
+    isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
+    /** Whether the group announces itself as required: its own input, or the field's inferred state. */
+    ariaRequired = computed(() => this.required() || this.fieldAria.required() === true, ...(ngDevMode ? [{ debugName: "ariaRequired" }] : []));
+    /** Id of the visually hidden "required" text this group contributes to its own name. */
+    requiredTextId = `tn-checkbox-group-required-${nextId$3++}`;
+    /**
+     * `aria-label` for the group: the `ariaLabel` input with the required-ness folded in, since
+     * `role="group"` gives it nowhere else to go (see the `required` input).
+     */
+    resolvedAriaLabel = computed(() => {
+        const label = this.ariaLabel();
+        if (!label) {
+            return null;
+        }
+        return this.ariaRequired() ? `${label} required` : label;
+    }, ...(ngDevMode ? [{ debugName: "resolvedAriaLabel" }] : []));
+    /**
+     * `aria-labelledby` for the group: the enclosing field's label, plus this group's own hidden
+     * "required" text when required. A multi-id `aria-labelledby` concatenates, so the field keeps
+     * naming the group and the required-ness reaches a screen reader as part of that name.
+     *
+     * Null when the name comes from `ariaLabel` instead — that path carries the suffix itself,
+     * because `aria-labelledby` would otherwise win over the very label it is meant to extend.
+     */
+    labelledBy = computed(() => {
+        const fieldLabel = this.fieldAria.labelledby();
+        if (!fieldLabel) {
+            return null;
+        }
+        return this.ariaRequired() ? `${fieldLabel} ${this.requiredTextId}` : fieldLabel;
+    }, ...(ngDevMode ? [{ debugName: "labelledBy" }] : []));
+    onChange = () => { };
+    onTouched = () => { };
+    /** Whether `value` is among the currently selected values. */
+    isSelected(value) {
+        const comparator = this.compareWith();
+        if (comparator) {
+            return this.selectedValues().some((selected) => comparator(selected, value));
+        }
+        return this.selectedValues().includes(value);
+    }
+    /**
+     * Adds or removes an option's value.
+     *
+     * The emitted array is rebuilt in `options` order rather than appended to in click order, so the
+     * value a given set of checked boxes produces is the same however the user got there — which is
+     * what makes a payload diff (and a spec asserting one) stable.
+     *
+     * Ordering is all the rebuild changes: an already-selected value is re-emitted as the object the
+     * consumer wrote, not as the equal-under-`compareWith` object the option holds. A control loaded
+     * with `{ id: 2, name: 'usb-cam' }` against an option of `{ id: 2 }` keeps its `name` when an
+     * unrelated box is toggled; only a newly checked option contributes the option's own value.
+     */
+    toggle(value, checked) {
+        const isCurrentlySelected = this.isSelected(value);
+        if (checked === isCurrentlySelected) {
+            return;
+        }
+        const next = this.options()
+            .map((option) => option.value)
+            .filter((optionValue) => (this.matches(optionValue, value) ? checked : this.isSelected(optionValue)))
+            .map((optionValue) => this.selectedValues().find((selected) => this.matches(optionValue, selected)) ?? optionValue);
+        // Values written by the consumer that no longer correspond to an option are kept: a control
+        // loaded with a device that has since been unplugged would otherwise be silently pruned by an
+        // unrelated toggle.
+        const unknownValues = this.selectedValues().filter((selected) => !this.options().some((option) => this.matches(option.value, selected)));
+        this.selectedValues.set([...next, ...unknownValues]);
+        this.onChange(this.selectedValues());
+        this.onTouched();
+        this.change.emit(this.selectedValues());
+    }
+    matches(a, b) {
+        const comparator = this.compareWith();
+        return comparator ? comparator(a, b) : a === b;
+    }
+    // ── ControlValueAccessor ──
+    writeValue(value) {
+        this.selectedValues.set(value ?? []);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    /**
+     * Marks the control touched when focus leaves the group. `focusout` also fires while moving
+     * between the group's own options, which is harmless — the user has interacted either way — and
+     * it is the only blur signal available, since a checkbox's blur does not bubble.
+     */
+    onFocusOut() {
+        this.onTouched();
+    }
+    /** Per-option test-id segments: the group's base scoped by the option label. */
+    optionTestId(option) {
+        return scopeTestId(this.resolvedTestId(), option.label);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnCheckboxGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: TnCheckboxGroupComponent, isStandalone: true, selector: "tn-checkbox-group", inputs: { options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, inline: { classPropertyName: "inline", publicName: "inline", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change" }, host: { classAttribute: "tn-checkbox-group-host" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => TnCheckboxGroupComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div\n  class=\"tn-checkbox-group\"\n  role=\"group\"\n  tnTestIdType=\"checkbox-group\"\n  [class.tn-checkbox-group--inline]=\"inline()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-describedby]=\"fieldAria.describedby()\"\n  [attr.aria-invalid]=\"fieldAria.invalid()\"\n  [attr.aria-disabled]=\"isDisabled() ? true : null\"\n  [tnTestId]=\"resolvedTestId()\"\n  (focusout)=\"onFocusOut()\"\n>\n  @for (option of options(); track option.value) {\n    <tn-checkbox\n      class=\"tn-checkbox-group__option\"\n      [label]=\"option.label\"\n      [checked]=\"isSelected(option.value)\"\n      [disabled]=\"isDisabled() || !!option.disabled\"\n      [testId]=\"optionTestId(option)\"\n      (change)=\"toggle(option.value, $event)\"\n    />\n  }\n</div>\n\n<!-- The required-ness rides in the group's accessible NAME, because `role=\"group\"` does not\n     support `aria-required` \u2014 see the `required` input's docblock. It sits OUTSIDE the group so\n     the text is not also read as group content on the way past the options; `aria-labelledby`\n     resolves ids document-wide, so it names the group from here just the same. -->\n@if (ariaRequired()) {\n  <span class=\"cdk-visually-hidden\" [attr.id]=\"requiredTextId\">required</span>\n}\n", styles: [".tn-checkbox-group-host{display:block}.tn-checkbox-group{display:flex;flex-direction:column;gap:var(--tn-checkbox-group-gap, 8px)}.tn-checkbox-group--inline{flex-direction:row;flex-wrap:wrap;column-gap:var(--tn-checkbox-group-inline-gap, 16px)}.tn-checkbox-group--inline .tn-checkbox-group__option{flex:1 1 calc(var(--tn-checkbox-group-inline-basis, 50%) - var(--tn-checkbox-group-inline-gap, 16px));box-sizing:border-box}@media(max-width:768px){.tn-checkbox-group--inline .tn-checkbox-group__option{flex-basis:100%}}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n"], dependencies: [{ kind: "component", type: TnCheckboxComponent, selector: "tn-checkbox", inputs: ["label", "hideLabel", "disabled", "required", "indeterminate", "testId", "error", "checked"], outputs: ["change"] }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnCheckboxGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tn-checkbox-group', standalone: true, imports: [TnCheckboxComponent, TnTestIdDirective], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => TnCheckboxGroupComponent),
+                            multi: true
+                        }
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'tn-checkbox-group-host'
+                    }, template: "<div\n  class=\"tn-checkbox-group\"\n  role=\"group\"\n  tnTestIdType=\"checkbox-group\"\n  [class.tn-checkbox-group--inline]=\"inline()\"\n  [attr.aria-label]=\"resolvedAriaLabel()\"\n  [attr.aria-labelledby]=\"labelledBy()\"\n  [attr.aria-describedby]=\"fieldAria.describedby()\"\n  [attr.aria-invalid]=\"fieldAria.invalid()\"\n  [attr.aria-disabled]=\"isDisabled() ? true : null\"\n  [tnTestId]=\"resolvedTestId()\"\n  (focusout)=\"onFocusOut()\"\n>\n  @for (option of options(); track option.value) {\n    <tn-checkbox\n      class=\"tn-checkbox-group__option\"\n      [label]=\"option.label\"\n      [checked]=\"isSelected(option.value)\"\n      [disabled]=\"isDisabled() || !!option.disabled\"\n      [testId]=\"optionTestId(option)\"\n      (change)=\"toggle(option.value, $event)\"\n    />\n  }\n</div>\n\n<!-- The required-ness rides in the group's accessible NAME, because `role=\"group\"` does not\n     support `aria-required` \u2014 see the `required` input's docblock. It sits OUTSIDE the group so\n     the text is not also read as group content on the way past the options; `aria-labelledby`\n     resolves ids document-wide, so it names the group from here just the same. -->\n@if (ariaRequired()) {\n  <span class=\"cdk-visually-hidden\" [attr.id]=\"requiredTextId\">required</span>\n}\n", styles: [".tn-checkbox-group-host{display:block}.tn-checkbox-group{display:flex;flex-direction:column;gap:var(--tn-checkbox-group-gap, 8px)}.tn-checkbox-group--inline{flex-direction:row;flex-wrap:wrap;column-gap:var(--tn-checkbox-group-inline-gap, 16px)}.tn-checkbox-group--inline .tn-checkbox-group__option{flex:1 1 calc(var(--tn-checkbox-group-inline-basis, 50%) - var(--tn-checkbox-group-inline-gap, 16px));box-sizing:border-box}@media(max-width:768px){.tn-checkbox-group--inline .tn-checkbox-group__option{flex-basis:100%}}.cdk-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}\n"] }]
+        }], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], inline: [{ type: i0.Input, args: [{ isSignal: true, alias: "inline", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
+
+/**
+ * Harness for interacting with `tn-checkbox-group` in tests.
+ * Drives the group as a whole — reading the checked set, replacing it wholesale, toggling one
+ * option by label — rather than reaching for each `tn-checkbox` individually.
+ *
+ * @example
+ * ```typescript
+ * const group = await loader.getHarness(TnCheckboxGroupHarness.with({ testId: 'checkbox-group-trains' }));
+ * // Labels, not option values — the DOM only carries what the user can read.
+ * await group.setValue(['Stable', 'Enterprise']);
+ * expect(await group.getValue()).toEqual(['Stable', 'Enterprise']);
+ * ```
+ */
+class TnCheckboxGroupHarness extends ComponentHarness {
+    /** The selector for the host element of a `TnCheckboxGroupComponent` instance. */
+    static hostSelector = 'tn-checkbox-group';
+    _root = this.locatorFor('.tn-checkbox-group');
+    _checkboxes = this.locatorForAll(TnCheckboxHarness);
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a checkbox group with specific
+     * attributes.
+     *
+     * @param options Options for filtering which checkbox group instances are considered a match.
+     * @returns A `HarnessPredicate` configured with the given options.
+     *
+     * @example
+     * ```typescript
+     * // Find by accessible name
+     * const group = await loader.getHarness(TnCheckboxGroupHarness.with({ ariaLabel: 'USB Devices' }));
+     *
+     * // Find by testId
+     * const group = await loader.getHarness(TnCheckboxGroupHarness.with({ testId: 'checkbox-group-usb-devices' }));
+     * ```
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(TnCheckboxGroupHarness, options)
+            .addOption('ariaLabel', options.ariaLabel, (harness, ariaLabel) => HarnessPredicate.stringMatches(harness.getAriaLabel(), ariaLabel))
+            .addOption('testId', options.testId, async (harness, testId) => {
+            return (await harness.getTestId()) === testId;
+        });
+    }
+    /**
+     * Gets the harnesses for the group's options, in DOM order.
+     *
+     * @example
+     * ```typescript
+     * const options = await group.getOptions();
+     * expect(options).toHaveLength(3);
+     * ```
+     */
+    async getOptions() {
+        return this._checkboxes();
+    }
+    /**
+     * Gets the label text of every option, in DOM order.
+     *
+     * @example
+     * ```typescript
+     * expect(await group.getOptionLabels()).toEqual(['Stable', 'Enterprise']);
+     * ```
+     */
+    async getOptionLabels() {
+        const checkboxes = await this._checkboxes();
+        return Promise.all(checkboxes.map((checkbox) => checkbox.getLabelText()));
+    }
+    /**
+     * Gets the labels of the currently checked options, in DOM order.
+     *
+     * Labels rather than values, because the values live in the bound control and the DOM only ever
+     * carries what the user can read.
+     *
+     * @example
+     * ```typescript
+     * expect(await group.getValue()).toEqual(['Stable']);
+     * ```
+     */
+    async getValue() {
+        const checkboxes = await this._checkboxes();
+        const checked = [];
+        for (const checkbox of checkboxes) {
+            if (await checkbox.isChecked()) {
+                checked.push(await checkbox.getLabelText());
+            }
+        }
+        return checked;
+    }
+    /**
+     * Makes the checked set exactly the options with the given labels — checking the ones listed and
+     * unchecking every other.
+     *
+     * @param labels Label text of the options that should end up checked.
+     *
+     * @example
+     * ```typescript
+     * await group.setValue(['Stable']);
+     * ```
+     */
+    async setValue(labels) {
+        const checkboxes = await this._checkboxes();
+        for (const checkbox of checkboxes) {
+            const label = await checkbox.getLabelText();
+            if (labels.includes(label)) {
+                await checkbox.check();
+            }
+            else {
+                await checkbox.uncheck();
+            }
+        }
+    }
+    /**
+     * Toggles the option with the given label. Throws when the group has no such option, so a
+     * renamed or missing option fails loudly instead of silently leaving the selection unchanged.
+     *
+     * @param label Label text of the option to toggle.
+     *
+     * @example
+     * ```typescript
+     * await group.toggle('Enterprise');
+     * ```
+     */
+    async toggle(label) {
+        const checkbox = await this.locatorForOptional(TnCheckboxHarness.with({ label }))();
+        if (!checkbox) {
+            const available = (await this.getOptionLabels()).join(', ');
+            throw new Error(`No option labelled "${label}" in this tn-checkbox-group (available: ${available}).`);
+        }
+        await checkbox.toggle();
+    }
+    /**
+     * Checks whether every option is disabled — the state a disabled group or a disabled bound form
+     * control produces. Use {@link getOptions} to inspect a single per-option `disabled`.
+     *
+     * @example
+     * ```typescript
+     * expect(await group.isDisabled()).toBe(true);
+     * ```
+     */
+    async isDisabled() {
+        const checkboxes = await this._checkboxes();
+        if (!checkboxes.length) {
+            return false;
+        }
+        const states = await Promise.all(checkboxes.map((checkbox) => checkbox.isDisabled()));
+        return states.every(Boolean);
+    }
+    /**
+     * Gets the group's accessible name as written by the `ariaLabel` input, or null when the name
+     * comes from an enclosing `tn-form-field` (see {@link getAriaLabelledBy}).
+     */
+    async getAriaLabel() {
+        return (await this._root()).getAttribute('aria-label');
+    }
+    /** Gets the id the group's accessible name is delegated to, or null. */
+    async getAriaLabelledBy() {
+        return (await this._root()).getAttribute('aria-labelledby');
+    }
+    /**
+     * Gets the test ID attribute value of the group root.
+     *
+     * @example
+     * ```typescript
+     * expect(await group.getTestId()).toBe('checkbox-group-trains');
+     * ```
+     */
+    async getTestId() {
+        const root = await this._root();
+        return (await root.getAttribute('data-testid')) ?? (await root.getAttribute('data-test'));
+    }
+}
+
 /** DI token under which `tn-radio-group` exposes its {@link TnRadioGroupApi} to child radios. */
 const TN_RADIO_GROUP = new InjectionToken('TN_RADIO_GROUP');
 
@@ -28219,5 +28616,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, THEME_MAP, THEME_STORAGE_KEY, TN_AUTOCOMPLETE_DEFAULT_LABELS, TN_AUTOCOMPLETE_LABELS, TN_BRANDED_SPINNER_DEFAULT_LABEL, TN_CALENDAR_INTL, TN_CALENDAR_INTL_DEFAULTS, TN_DEFAULT_FALLBACK_LABELS, TN_DIALOG_CHROME_LABELS, TN_DIALOG_DEFAULT_CHROME_LABELS, TN_DIALOG_SHELL_DEFAULT_LABEL, TN_DRAWER_CONTENT_LABEL, TN_DRAWER_DEFAULT_LABEL, TN_FALLBACK_LABELS, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_DISMISSIBLE_ERRORS, TN_FORM_FIELD_ERRORS, TN_FORM_LIST_CONTEXT, TN_PARTICLE_PROGRESS_BAR_DEFAULT_LABEL, TN_PROGRESS_BAR_DEFAULT_LABEL, TN_RADIO_GROUP, TN_SELECT_DEFAULT_LABELS, TN_SELECT_LABELS, TN_SIDE_PANEL_CONTENT_LABEL, TN_SIDE_PANEL_DEFAULT_LABEL, TN_SIDE_PANEL_OVERFLOW_TOLERANCE_PX, TN_SPINNER_DEFAULT_LABEL, TN_STEPPER_STATUS_COMPLETED, TN_STEPPER_STATUS_ERROR, TN_TABLE_DEFAULT_LABELS, TN_TABLE_LABELS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TABLE_SCROLL_REGION_LABEL, TN_TAB_PANEL_CONTENT_LABEL, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TN_TOAST_ANNOUNCE_DELAY_MS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerActionHarness, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarCellHarness, TnCalendarComponent, TnCalendarHarness, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerHarness, TnFilePickerPopupComponent, TnFormErrorsComponent, TnFormErrorsHarness, TnFormFieldComponent, TnFormFieldHarness, TnFormListComponent, TnFormListHarness, TnFormListItemComponent, TnFormListItemHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeDataSource, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioGroupComponent, TnRadioGroupHarness, TnRadioHarness, TnRowActionsDefDirective, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTableTesting, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTooltipHarness, TnTooltipTesting, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeHarness, TnTreeNodeComponent, TnTreeNodeHarness, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, allowsCurrentDirectorySelection, canonicalizeSize, composeTestId, controlTestId, createFlatTreeControl, createLucideLibrary, createNestedTreeControl, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, formatSizeExact, formatSizeForEditing, getSelectableTypes, injectTnCalendarIntl, injectTnFallbackName, injectTnFormFieldAria, injectTnLabels, isPathWithinRoot, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, normalizeRootPath, optionTestId, parseLabelMarkup, parseSize, parseSizeParts, registerLucideIcons, resolveErrorMessage, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
+export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, InputType, LIGHT_THEME, LabelMarkupPipe, LabelTextPipe, LinuxModifierKeys, LinuxShortcuts, ModifierKeys, QuickShortcuts, ShortcutBuilder, THEME_MAP, THEME_STORAGE_KEY, TN_AUTOCOMPLETE_DEFAULT_LABELS, TN_AUTOCOMPLETE_LABELS, TN_BRANDED_SPINNER_DEFAULT_LABEL, TN_CALENDAR_INTL, TN_CALENDAR_INTL_DEFAULTS, TN_DEFAULT_FALLBACK_LABELS, TN_DIALOG_CHROME_LABELS, TN_DIALOG_DEFAULT_CHROME_LABELS, TN_DIALOG_SHELL_DEFAULT_LABEL, TN_DRAWER_CONTENT_LABEL, TN_DRAWER_DEFAULT_LABEL, TN_FALLBACK_LABELS, TN_FORM_FIELD_CONTEXT, TN_FORM_FIELD_DISMISSIBLE_ERRORS, TN_FORM_FIELD_ERRORS, TN_FORM_LIST_CONTEXT, TN_PARTICLE_PROGRESS_BAR_DEFAULT_LABEL, TN_PROGRESS_BAR_DEFAULT_LABEL, TN_RADIO_GROUP, TN_SELECT_DEFAULT_LABELS, TN_SELECT_LABELS, TN_SIDE_PANEL_CONTENT_LABEL, TN_SIDE_PANEL_DEFAULT_LABEL, TN_SIDE_PANEL_OVERFLOW_TOLERANCE_PX, TN_SPINNER_DEFAULT_LABEL, TN_STEPPER_STATUS_COMPLETED, TN_STEPPER_STATUS_ERROR, TN_TABLE_DEFAULT_LABELS, TN_TABLE_LABELS, TN_TABLE_PAGER_DEFAULT_LABELS, TN_TABLE_PAGER_LABELS, TN_TABLE_SCROLL_REGION_LABEL, TN_TAB_PANEL_CONTENT_LABEL, TN_TEST_ATTR, TN_THEME_DEFINITIONS, TN_TOAST_ANNOUNCE_DELAY_MS, TnAutocompleteComponent, TnAutocompleteHarness, TnBannerActionDirective, TnBannerActionHarness, TnBannerComponent, TnBannerHarness, TnBrandedSpinnerComponent, TnButtonComponent, TnButtonHarness, TnButtonToggleComponent, TnButtonToggleGroupComponent, TnButtonToggleGroupHarness, TnButtonToggleHarness, TnCalendarCellHarness, TnCalendarComponent, TnCalendarHarness, TnCalendarHeaderComponent, TnCardComponent, TnCardFooterActionsDirective, TnCardHeaderActionsDirective, TnCardHeaderDirective, TnCellDefDirective, TnCheckboxComponent, TnCheckboxGroupComponent, TnCheckboxGroupHarness, TnCheckboxHarness, TnCheckboxLabelDirective, TnChipComponent, TnChipHarness, TnChipInputComponent, TnChipInputHarness, TnConfirmDialogComponent, TnDateInputComponent, TnDateInputHarness, TnDateRangeInputComponent, TnDateRangeInputHarness, TnDetailRowDefDirective, TnDialog, TnDialogHarness, TnDialogShellComponent, TnDialogTesting, TnDividerComponent, TnDividerDirective, TnDrawerComponent, TnDrawerContainerComponent, TnDrawerContainerHarness, TnDrawerContentComponent, TnDrawerHarness, TnEmptyComponent, TnEmptyHarness, TnExpansionPanelComponent, TnExpansionPanelHarness, TnFileInputComponent, TnFileInputHarness, TnFilePickerComponent, TnFilePickerHarness, TnFilePickerPopupComponent, TnFormErrorsComponent, TnFormErrorsHarness, TnFormFieldComponent, TnFormFieldHarness, TnFormListComponent, TnFormListHarness, TnFormListItemComponent, TnFormListItemHarness, TnFormSectionComponent, TnFormSectionHarness, TnHeaderCellDefDirective, TnIconButtonComponent, TnIconButtonHarness, TnIconComponent, TnIconHarness, TnIconRegistryService, TnIconTesting, TnInputComponent, TnInputDirective, TnInputHarness, TnKeyboardShortcutComponent, TnKeyboardShortcutService, TnListAvatarDirective, TnListComponent, TnListIconDirective, TnListItemComponent, TnListItemLineDirective, TnListItemPrimaryDirective, TnListItemSecondaryDirective, TnListItemTitleDirective, TnListItemTrailingDirective, TnListOptionComponent, TnListSubheaderComponent, TnMenuActivateHoverDirective, TnMenuComponent, TnMenuHarness, TnMenuItemComponent, TnMenuTesting, TnMenuTriggerDirective, TnMonthViewComponent, TnMultiYearViewComponent, TnNestedTreeDataSource, TnNestedTreeNodeComponent, TnParticleProgressBarComponent, TnProgressBarComponent, TnRadioComponent, TnRadioGroupComponent, TnRadioGroupHarness, TnRadioHarness, TnRowActionsDefDirective, TnSelectComponent, TnSelectHarness, TnSelectionListComponent, TnSidePanelActionDirective, TnSidePanelComponent, TnSidePanelHarness, TnSidePanelHeaderActionDirective, TnSlideToggleComponent, TnSlideToggleHarness, TnSliderComponent, TnSliderThumbDirective, TnSliderWithLabelDirective, TnSpinnerComponent, TnSpriteLoaderService, TnStepComponent, TnStepperComponent, TnStepperHarness, TnStepperNextDirective, TnStepperPreviousDirective, TnTabComponent, TnTabHarness, TnTabPanelComponent, TnTabPanelHarness, TnTableColumnDirective, TnTableComponent, TnTableHarness, TnTablePagerComponent, TnTablePagerHarness, TnTableTesting, TnTabsComponent, TnTabsHarness, TnTestIdDirective, TnTheme, TnThemeService, TnTimeInputComponent, TnToastComponent, TnToastMock, TnToastPosition, TnToastRef, TnToastService, TnToastTesting, TnToastType, TnTooltipComponent, TnTooltipDirective, TnTooltipHarness, TnTooltipTesting, TnTreeComponent, TnTreeFlatDataSource, TnTreeFlattener, TnTreeHarness, TnTreeNodeComponent, TnTreeNodeHarness, TnTreeNodeOutletDirective, TnTreeVirtualScrollNodeOutletDirective, TnTreeVirtualScrollViewComponent, TnTreeVirtualScrollViewHarness, TruncatePathPipe, WindowsModifierKeys, WindowsShortcuts, allowsCurrentDirectorySelection, canonicalizeSize, composeTestId, controlTestId, createFlatTreeControl, createLucideLibrary, createNestedTreeControl, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, formatSizeExact, formatSizeForEditing, getSelectableTypes, injectTnCalendarIntl, injectTnFallbackName, injectTnFormFieldAria, injectTnLabels, isPathWithinRoot, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, normalizeRootPath, optionTestId, parseLabelMarkup, parseSize, parseSizeParts, registerLucideIcons, resolveErrorMessage, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
 //# sourceMappingURL=truenas-ui-components.mjs.map