@truenas/ui-components 0.6.1 → 0.7.0

package/fesm2022/truenas-ui-components.mjs

@@ -5746,6 +5746,13 @@ class TnIconButtonHarness extends ComponentHarness {
 // Ordered binary/decimal prefixes; the array index doubles as the power applied
 // to the base (B = base^0, K = base^1, M = base^2, ...).
 const UNIT_PREFIXES = ['B', 'K', 'M', 'G', 'T', 'P', 'E'];
+// Display spellings for each standard, indexed by the same power as
+// UNIT_PREFIXES. These are the symbols `filesize` emits, so a value this module
+// renders itself is spelled exactly like one `formatSize` renders.
+const UNIT_SYMBOLS = {
+    iec: ['B', 'KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB'],
+    si: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB'],
+};
 /**
  * Formats a raw byte count into a human-readable string (e.g. `2 GiB`).
  *
@@ -5784,6 +5791,17 @@ function formatSize(bytes, standard = 'iec', round = 2) {
  * @param standard Unit standard (defaults to IEC base-2).
  */
 function parseSize(raw, defaultUnit = 'MiB', standard = 'iec') {
+    return parseSizeParts(raw, defaultUnit, standard)?.bytes ?? null;
+}
+/**
+ * {@link parseSize}, keeping the parts rather than collapsing them to a byte
+ * count. The unit matters when the text has to be re-rendered: the number the
+ * user wrote and the unit they wrote it in always denote their byte count
+ * exactly, which a rounded rendering may not.
+ *
+ * @internal
+ */
+function parseSizeParts(raw, defaultUnit = 'MiB', standard = 'iec') {
     if (raw === null || raw === undefined) {
         return null;
     }
@@ -5806,9 +5824,101 @@ function parseSize(raw, defaultUnit = 'MiB', standard = 'iec') {
         return null;
     }
     const base = standard === 'si' ? 1000 : 1024;
-    // Round to whole bytes: a byte count is an integer, and rounding absorbs the
-    // floating-point drift of e.g. 1.1 * 1024.
-    return Math.round(num * base ** exponent);
+    return {
+        // Round to whole bytes: a byte count is an integer, and rounding absorbs the
+        // floating-point drift of e.g. 1.1 * 1024.
+        bytes: Math.round(num * base ** exponent),
+        digits: match[1],
+        exponent,
+    };
+}
+/**
+ * Renders a byte count in the largest unit that expresses it EXACTLY within
+ * `round` decimals, or `null` when no suitable unit does.
+ *
+ * The point is a field the user types into. `formatSize` always picks the
+ * natural unit and rounds to fit — 1 572 864 000 becomes `1.46 GiB`, which is a
+ * fine way to READ a size but a lie to hand back to someone who typed
+ * `1500 MiB`: it no longer denotes the value the field holds. One unit down
+ * usually does denote it exactly, so this looks there.
+ *
+ * It looks exactly one step down and no further, which is what keeps the result
+ * readable: a value that is exact in neither its own unit nor the next is
+ * always exact in bytes, and `1567663063 B` helps nobody. Such a value has no
+ * exact spelling worth showing, so this returns `null` and the caller falls
+ * back to the rounded rendering.
+ *
+ * @param bytes The byte count to render. Non-integer and unsafe magnitudes
+ *              return `null` — a byte count is a whole number, and past
+ *              `MAX_SAFE_INTEGER` "exactly" stops meaning anything.
+ * @param standard Unit standard (defaults to IEC base-2).
+ * @param round Decimal places the rendering may use (defaults to 2).
+ * @internal
+ */
+function formatSizeExact(bytes, standard = 'iec', round = 2) {
+    if (!Number.isSafeInteger(bytes) || bytes < 0) {
+        return null;
+    }
+    const symbols = UNIT_SYMBOLS[standard];
+    if (bytes === 0) {
+        return `0 ${symbols[0]}`;
+    }
+    const base = standard === 'si' ? 1000 : 1024;
+    // The unit `formatSize` would pick, and the one below it.
+    const natural = Math.min(symbols.length - 1, Math.floor(Math.log(bytes) / Math.log(base)));
+    for (let exponent = natural; exponent >= Math.max(0, natural - 1); exponent--) {
+        const scaled = bytes / base ** exponent;
+        // Exact in this unit when the rounded rendering IS the value, and it still
+        // multiplies back to the byte count we started from.
+        if (Number(scaled.toFixed(round)) === scaled && scaled * base ** exponent === bytes) {
+            return `${scaled} ${symbols[exponent]}`;
+        }
+    }
+    return null;
+}
+/**
+ * Formats a byte count for a field the user edits: {@link formatSizeExact} when
+ * some unit states the value exactly, and {@link formatSize}'s rounded
+ * rendering when none does.
+ *
+ * @param bytes The byte count to format.
+ * @param standard Unit standard (defaults to IEC base-2).
+ * @param round Decimal places to round to (defaults to 2).
+ * @internal
+ */
+function formatSizeForEditing(bytes, standard = 'iec', round = 2) {
+    const rounded = formatSize(bytes, standard, round);
+    if (rounded === '') {
+        return '';
+    }
+    return formatSizeExact(Number(bytes), standard, round) ?? rounded;
+}
+/**
+ * Tidies a size the user typed into its canonical spelling, without ever
+ * restating it as a value it does not denote.
+ *
+ * `2048 KiB` becomes `2 MiB` and `200tib` becomes `200 TiB`, because both
+ * renderings are exact. `1500` becomes `1500 MiB` rather than `1.46 GiB`, and
+ * `1.755 GiB` is left at `1.755 GiB`: where no unit expresses the value within
+ * `round` decimals, the number and unit the user wrote do, so those are kept
+ * and only the spelling is normalized.
+ *
+ * Returns `null` for text {@link parseSize} cannot read, which the caller leaves
+ * on screen for its validators to flag.
+ *
+ * @param raw The text to canonicalize.
+ * @param defaultUnit Unit assumed when the input carries no unit (defaults to `MiB`).
+ * @param standard Unit standard (defaults to IEC base-2).
+ * @param round Decimal places a rendering may use (defaults to 2).
+ * @internal
+ */
+function canonicalizeSize(raw, defaultUnit = 'MiB', standard = 'iec', round = 2) {
+    const parts = parseSizeParts(raw, defaultUnit, standard);
+    if (!parts) {
+        return null;
+    }
+    return (formatSizeExact(parts.bytes, standard, round)
+        ?? `${parts.digits} ${UNIT_SYMBOLS[standard][parts.exponent]}`);
 }
 /**
  * Resolves a unit spelling to its prefix power (B → 0, K → 1, M → 2, ...).
@@ -6011,6 +6121,12 @@ class TnInputComponent {
     /**
      * Decimal places used when formatting a `Size` field's value for display
      * (e.g. `1.5 GiB`). Ignored unless `inputType` is `Size`.
+     *
+     * Display only: the form model always holds the exact byte count the typed
+     * text denotes, and is never re-read from the display. The display avoids
+     * rounding where it can — `1500M` shows as `1500 MiB`, not as a `1.46 GiB`
+     * that means 1 567 663 063 — and where a value fits no unit exactly (a size
+     * read back from the server, say) it is rounded for reading only.
      */
     sizeRound = input(2, ...(ngDevMode ? [{ debugName: "sizeRound" }] : []));
     /**
@@ -6136,7 +6252,10 @@ class TnInputComponent {
         if (this.isSize()) {
             // The model is a byte count; show it as a human-readable string. Empty/null
             // stays blank, and a non-numeric model maps to blank (formatSize returns '').
-            this.value.set(formatSize(value, this.sizeStandard(), this.sizeRound()));
+            // `formatSizeForEditing` prefers a unit that states the value exactly, so a
+            // field the user can edit shows '1500 MiB' rather than a '1.46 GiB' that
+            // would parse back ~5 MB short of what it holds.
+            this.value.set(formatSizeForEditing(value, this.sizeStandard(), this.sizeRound()));
             return;
         }
         // Display the model verbatim via String(); do NOT sanitize here. Sanitizing a
@@ -6187,23 +6306,24 @@ class TnInputComponent {
     }
     onBlur() {
         if (this.isSize() && this.value() !== '') {
-            // Canonicalize the display on blur: "2048 KiB" -> "2 MiB", "200tib" -> "200 TiB".
-            // Leave unparseable text in place so the consumer's validators can flag it.
-            const bytes = parseSize(this.value(), this.sizeDefaultUnit(), this.sizeStandard());
-            if (bytes !== null) {
-                const canonical = formatSize(bytes, this.sizeStandard(), this.sizeRound());
-                // Only rewrite + re-emit when the canonical form actually differs from what
-                // the user left in the field. This both:
-                //  (a) skips a no-op onChange that would mark an untouched, pre-filled
-                //      control dirty (falsely tripping "unsaved changes" guards), and
-                //  (b) still re-syncs the model when rounding is lossy — e.g. an edited
-                //      "1.755 GiB" canonicalizes to a different string, so it emits the
-                //      byte count parsed back from the rounded display, keeping
-                //      parseSize(display) === model.
-                if (canonical !== this.value()) {
-                    this.value.set(canonical);
-                    this.onChange(parseSize(canonical, this.sizeDefaultUnit(), this.sizeStandard()));
-                }
+            // Canonicalize the DISPLAY on blur: "2048 KiB" -> "2 MiB", "200tib" ->
+            // "200 TiB", "1500" -> "1500 MiB". Leave unparseable text in place so the
+            // consumer's validators can flag it.
+            //
+            // `canonicalizeSize` never restates the value as something it is not: where
+            // no unit expresses it within `sizeRound` decimals it keeps the number and
+            // unit the user wrote. So the text left on screen always denotes the byte
+            // count in the model — "1500" tidies to "1500 MiB", not to a "1.46 GiB"
+            // that means 1_567_663_063, ~5 MB short of the 1_572_864_000 stored.
+            //
+            // The model is still deliberately NOT re-emitted from that text. The byte
+            // count `onValueChange` emitted while typing is already exact, and emitting
+            // again would mark a control dirty for a field the user only tabbed through.
+            const canonical = canonicalizeSize(this.value(), this.sizeDefaultUnit(), this.sizeStandard(), this.sizeRound());
+            if (canonical !== null) {
+                // A no-op for a pre-filled control the user merely tabbed through: the
+                // signal already holds that exact string, so nothing repaints.
+                this.value.set(canonical);
             }
         }
         this.onTouched();
@@ -9514,6 +9634,12 @@ class TnRadioComponent {
     name = input(undefined, ...(ngDevMode ? [{ debugName: "name" }] : []));
     disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
     required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
+    /**
+     * Test-id base. The element type this composes with is `radio-button`, not `radio`: the id
+     * identifies one radio BUTTON within a `radio-group`, matching the `radio-group`/`radio-button`
+     * pair every other grouped control in this library uses (`button-toggle-group`/`button-toggle`).
+     * So `testId="email"` yields `radio-button-email`.
+     */
     testId = input(undefined, ...(ngDevMode ? [{ debugName: "testId" }] : []));
     /** Test-id base, falling back to the bound control name when `testId` is unset. */
     resolvedTestId = controlTestId(this.testId);
@@ -9627,7 +9753,7 @@ class TnRadioComponent {
                 useExisting: forwardRef(() => TnRadioComponent),
                 multi: true
             }
-        ], viewQueries: [{ propertyName: "radioEl", first: true, predicate: ["radioEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [ngClass]=\"classes()\">\n  <label class=\"tn-radio__label\" tnTestIdType=\"radio\" [for]=\"id\" [tnTestId]=\"resolvedTestId()\">\n    <input\n      #radioEl\n      type=\"radio\"\n      class=\"tn-radio__input\"\n      [id]=\"id\"\n      [name]=\"resolvedName()\"\n      [value]=\"value()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"isRequired()\"\n      [attr.aria-describedby]=\"error() ? id + '-error' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      (change)=\"onRadioChange($event)\"\n    />\n    <span class=\"tn-radio__checkmark\"></span>\n    <span class=\"tn-radio__text\" [innerHTML]=\"label() | tnLabelMarkup\"></span>\n  </label>\n\n  @if (error()) {\n    <div\n      class=\"tn-radio__error\"\n      role=\"alert\"\n      [id]=\"id + '-error'\"\n    >\n      {{ error() }}\n    </div>\n  }\n</div>", styles: [".tn-radio{display:inline-block;margin-bottom:.5rem}.tn-radio__label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:.5rem}.tn-radio__label:hover .tn-radio__checkmark{border-color:var(--tn-primary, #007cba)}.tn-radio__input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.tn-radio__input:focus+.tn-radio__checkmark{outline:2px solid var(--tn-primary, #007cba);outline-offset:2px}.tn-radio__input:checked+.tn-radio__checkmark{border-color:var(--tn-primary, #007cba);background-color:var(--tn-primary, #007cba)}.tn-radio__input:checked+.tn-radio__checkmark:after{display:block}.tn-radio__input:disabled+.tn-radio__checkmark{border-color:var(--tn-lines, #e5e7eb);background-color:var(--tn-alt-bg1, #f8f9fa);cursor:not-allowed}.tn-radio__checkmark{position:relative;height:18px;width:18px;border:2px solid var(--tn-lines, #e5e7eb);border-radius:50%;background-color:transparent;transition:all .2s ease;flex-shrink:0}.tn-radio__checkmark:after{content:\"\";position:absolute;display:none;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background-color:#fff;transform:translate(-50%,-50%)}.tn-radio__text ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-radio__text{color:var(--tn-fg1, #000000);font-size:14px;line-height:1.4}.tn-radio__error{margin-top:.25rem;font-size:12px;color:var(--tn-error-text, var(--tn-red, #b91c1c))}.tn-radio--disabled .tn-radio__label{cursor:not-allowed;opacity:.6}.tn-radio--disabled .tn-radio__text{color:var(--tn-fg2, #6c757d)}.tn-radio--error .tn-radio__checkmark{border-color:var(--tn-red, #dc3545)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { kind: "pipe", type: LabelMarkupPipe, name: "tnLabelMarkup" }] });
+        ], viewQueries: [{ propertyName: "radioEl", first: true, predicate: ["radioEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [ngClass]=\"classes()\">\n  <label class=\"tn-radio__label\" tnTestIdType=\"radio-button\" [for]=\"id\" [tnTestId]=\"resolvedTestId()\">\n    <input\n      #radioEl\n      type=\"radio\"\n      class=\"tn-radio__input\"\n      [id]=\"id\"\n      [name]=\"resolvedName()\"\n      [value]=\"value()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"isRequired()\"\n      [attr.aria-describedby]=\"error() ? id + '-error' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      (change)=\"onRadioChange($event)\"\n    />\n    <span class=\"tn-radio__checkmark\"></span>\n    <span class=\"tn-radio__text\" [innerHTML]=\"label() | tnLabelMarkup\"></span>\n  </label>\n\n  @if (error()) {\n    <div\n      class=\"tn-radio__error\"\n      role=\"alert\"\n      [id]=\"id + '-error'\"\n    >\n      {{ error() }}\n    </div>\n  }\n</div>", styles: [".tn-radio{display:inline-block;margin-bottom:.5rem}.tn-radio__label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:.5rem}.tn-radio__label:hover .tn-radio__checkmark{border-color:var(--tn-primary, #007cba)}.tn-radio__input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.tn-radio__input:focus+.tn-radio__checkmark{outline:2px solid var(--tn-primary, #007cba);outline-offset:2px}.tn-radio__input:checked+.tn-radio__checkmark{border-color:var(--tn-primary, #007cba);background-color:var(--tn-primary, #007cba)}.tn-radio__input:checked+.tn-radio__checkmark:after{display:block}.tn-radio__input:disabled+.tn-radio__checkmark{border-color:var(--tn-lines, #e5e7eb);background-color:var(--tn-alt-bg1, #f8f9fa);cursor:not-allowed}.tn-radio__checkmark{position:relative;height:18px;width:18px;border:2px solid var(--tn-lines, #e5e7eb);border-radius:50%;background-color:transparent;transition:all .2s ease;flex-shrink:0}.tn-radio__checkmark:after{content:\"\";position:absolute;display:none;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background-color:#fff;transform:translate(-50%,-50%)}.tn-radio__text ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-radio__text{color:var(--tn-fg1, #000000);font-size:14px;line-height:1.4}.tn-radio__error{margin-top:.25rem;font-size:12px;color:var(--tn-error-text, var(--tn-red, #b91c1c))}.tn-radio--disabled .tn-radio__label{cursor:not-allowed;opacity:.6}.tn-radio--disabled .tn-radio__text{color:var(--tn-fg2, #6c757d)}.tn-radio--error .tn-radio__checkmark{border-color:var(--tn-red, #dc3545)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: TnTestIdDirective, selector: "[tnTestId]", inputs: ["tnTestId", "tnTestIdType"] }, { kind: "pipe", type: LabelMarkupPipe, name: "tnLabelMarkup" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: TnRadioComponent, decorators: [{
             type: Component,
@@ -9637,7 +9763,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                             useExisting: forwardRef(() => TnRadioComponent),
                             multi: true
                         }
-                    ], template: "<div [ngClass]=\"classes()\">\n  <label class=\"tn-radio__label\" tnTestIdType=\"radio\" [for]=\"id\" [tnTestId]=\"resolvedTestId()\">\n    <input\n      #radioEl\n      type=\"radio\"\n      class=\"tn-radio__input\"\n      [id]=\"id\"\n      [name]=\"resolvedName()\"\n      [value]=\"value()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"isRequired()\"\n      [attr.aria-describedby]=\"error() ? id + '-error' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      (change)=\"onRadioChange($event)\"\n    />\n    <span class=\"tn-radio__checkmark\"></span>\n    <span class=\"tn-radio__text\" [innerHTML]=\"label() | tnLabelMarkup\"></span>\n  </label>\n\n  @if (error()) {\n    <div\n      class=\"tn-radio__error\"\n      role=\"alert\"\n      [id]=\"id + '-error'\"\n    >\n      {{ error() }}\n    </div>\n  }\n</div>", styles: [".tn-radio{display:inline-block;margin-bottom:.5rem}.tn-radio__label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:.5rem}.tn-radio__label:hover .tn-radio__checkmark{border-color:var(--tn-primary, #007cba)}.tn-radio__input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.tn-radio__input:focus+.tn-radio__checkmark{outline:2px solid var(--tn-primary, #007cba);outline-offset:2px}.tn-radio__input:checked+.tn-radio__checkmark{border-color:var(--tn-primary, #007cba);background-color:var(--tn-primary, #007cba)}.tn-radio__input:checked+.tn-radio__checkmark:after{display:block}.tn-radio__input:disabled+.tn-radio__checkmark{border-color:var(--tn-lines, #e5e7eb);background-color:var(--tn-alt-bg1, #f8f9fa);cursor:not-allowed}.tn-radio__checkmark{position:relative;height:18px;width:18px;border:2px solid var(--tn-lines, #e5e7eb);border-radius:50%;background-color:transparent;transition:all .2s ease;flex-shrink:0}.tn-radio__checkmark:after{content:\"\";position:absolute;display:none;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background-color:#fff;transform:translate(-50%,-50%)}.tn-radio__text ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-radio__text{color:var(--tn-fg1, #000000);font-size:14px;line-height:1.4}.tn-radio__error{margin-top:.25rem;font-size:12px;color:var(--tn-error-text, var(--tn-red, #b91c1c))}.tn-radio--disabled .tn-radio__label{cursor:not-allowed;opacity:.6}.tn-radio--disabled .tn-radio__text{color:var(--tn-fg2, #6c757d)}.tn-radio--error .tn-radio__checkmark{border-color:var(--tn-red, #dc3545)}\n"] }]
+                    ], template: "<div [ngClass]=\"classes()\">\n  <label class=\"tn-radio__label\" tnTestIdType=\"radio-button\" [for]=\"id\" [tnTestId]=\"resolvedTestId()\">\n    <input\n      #radioEl\n      type=\"radio\"\n      class=\"tn-radio__input\"\n      [id]=\"id\"\n      [name]=\"resolvedName()\"\n      [value]=\"value()\"\n      [checked]=\"checked()\"\n      [disabled]=\"isDisabled()\"\n      [required]=\"isRequired()\"\n      [attr.aria-describedby]=\"error() ? id + '-error' : null\"\n      [attr.aria-invalid]=\"error() ? 'true' : null\"\n      (change)=\"onRadioChange($event)\"\n    />\n    <span class=\"tn-radio__checkmark\"></span>\n    <span class=\"tn-radio__text\" [innerHTML]=\"label() | tnLabelMarkup\"></span>\n  </label>\n\n  @if (error()) {\n    <div\n      class=\"tn-radio__error\"\n      role=\"alert\"\n      [id]=\"id + '-error'\"\n    >\n      {{ error() }}\n    </div>\n  }\n</div>", styles: [".tn-radio{display:inline-block;margin-bottom:.5rem}.tn-radio__label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:.5rem}.tn-radio__label:hover .tn-radio__checkmark{border-color:var(--tn-primary, #007cba)}.tn-radio__input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.tn-radio__input:focus+.tn-radio__checkmark{outline:2px solid var(--tn-primary, #007cba);outline-offset:2px}.tn-radio__input:checked+.tn-radio__checkmark{border-color:var(--tn-primary, #007cba);background-color:var(--tn-primary, #007cba)}.tn-radio__input:checked+.tn-radio__checkmark:after{display:block}.tn-radio__input:disabled+.tn-radio__checkmark{border-color:var(--tn-lines, #e5e7eb);background-color:var(--tn-alt-bg1, #f8f9fa);cursor:not-allowed}.tn-radio__checkmark{position:relative;height:18px;width:18px;border:2px solid var(--tn-lines, #e5e7eb);border-radius:50%;background-color:transparent;transition:all .2s ease;flex-shrink:0}.tn-radio__checkmark:after{content:\"\";position:absolute;display:none;top:50%;left:50%;width:8px;height:8px;border-radius:50%;background-color:#fff;transform:translate(-50%,-50%)}.tn-radio__text ::ng-deep code{font-family:var(--tn-font-family-monospace, monospace);font-size:.875em;background:var(--tn-bg2, #f5f5f5);border:1px solid var(--tn-lines, #ccc);border-radius:4px;padding:.125em .45em}.tn-radio__text{color:var(--tn-fg1, #000000);font-size:14px;line-height:1.4}.tn-radio__error{margin-top:.25rem;font-size:12px;color:var(--tn-error-text, var(--tn-red, #b91c1c))}.tn-radio--disabled .tn-radio__label{cursor:not-allowed;opacity:.6}.tn-radio--disabled .tn-radio__text{color:var(--tn-fg2, #6c757d)}.tn-radio--error .tn-radio__checkmark{border-color:var(--tn-red, #dc3545)}\n"] }]
         }], propDecorators: { radioEl: [{ type: i0.ViewChild, args: ['radioEl', { isSignal: true }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", 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 }] }], error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: false }] }], change: [{ type: i0.Output, args: ["change"] }] } });
 
 /**
@@ -9835,7 +9961,7 @@ class TnRadioGroupComponent {
     /**
      * Test-id base for the group and, scoped by the option label, for every option rendered from
      * `options`: base `encryption` yields `radio-group-encryption` on the group and
-     * `radio-encryption-passphrase` on its options. Falls back to the bound control name.
+     * `radio-button-encryption-passphrase` on its options. Falls back to the bound control name.
      *
      * Projected `<tn-radio>` children keep their own test-id resolution — the group does not reach
      * into content it did not render — so give each one a `testId` of its own.
@@ -28024,5 +28150,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_DIALOG_CHROME_LABELS, TN_DIALOG_DEFAULT_CHROME_LABELS, TN_DIALOG_SHELL_DEFAULT_LABEL, TN_DRAWER_CONTENT_LABEL, TN_DRAWER_DEFAULT_LABEL, 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, composeTestId, controlTestId, createFlatTreeControl, createLucideLibrary, createNestedTreeControl, createShortcut, defaultSpriteBasePath, defaultSpriteConfigPath, defaultTreeItemSize, formatSize, getSelectableTypes, injectTnCalendarIntl, injectTnFormFieldAria, injectTnLabels, isPathWithinRoot, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, normalizeRootPath, optionTestId, parseLabelMarkup, parseSize, 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_DIALOG_CHROME_LABELS, TN_DIALOG_DEFAULT_CHROME_LABELS, TN_DIALOG_SHELL_DEFAULT_LABEL, TN_DRAWER_CONTENT_LABEL, TN_DRAWER_DEFAULT_LABEL, 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, injectTnFormFieldAria, injectTnLabels, isPathWithinRoot, kebabTestSegment, labelMarkupToHtml, labelMarkupToText, libIconMarker, normalizeRootPath, optionTestId, parseLabelMarkup, parseSize, parseSizeParts, registerLucideIcons, resolveErrorMessage, scopeTestId, setupLucideIntegration, tnIconMarker, writeTestId };
 //# sourceMappingURL=truenas-ui-components.mjs.map