@truenas/ui-components 0.8.10 → 0.8.11

package/fesm2022/truenas-ui-components.mjs

@@ -25588,6 +25588,37 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}]
 });
+var TnSidePanelTitleDirective = class TnSidePanelTitleDirective {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: TnSidePanelTitleDirective,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: TnSidePanelTitleDirective,
+		isStandalone: true,
+		selector: "[tnSidePanelTitle]",
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: TnSidePanelTitleDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[tnSidePanelTitle]",
+			standalone: true
+		}]
+	}]
+});
 var TnSidePanelComponent = class TnSidePanelComponent {
 	iconRegistry = inject(TnIconRegistryService);
 	document = inject(DOCUMENT);
@@ -25619,6 +25650,8 @@ var TnSidePanelComponent = class TnSidePanelComponent {
 	closed = output();
 	actionContent = contentChildren(TnSidePanelActionDirective, ...ngDevMode ? [{ debugName: "actionContent" }] : /* istanbul ignore next */ []);
 	hasActions = computed(() => this.actionContent().length > 0, ...ngDevMode ? [{ debugName: "hasActions" }] : /* istanbul ignore next */ []);
+	titleSlotContent = contentChildren(TnSidePanelTitleDirective, ...ngDevMode ? [{ debugName: "titleSlotContent" }] : /* istanbul ignore next */ []);
+	hasTitleSlot = computed(() => this.titleSlotContent().length > 0, ...ngDevMode ? [{ debugName: "hasTitleSlot" }] : /* istanbul ignore next */ []);
 	panelId = `tn-side-panel-${Math.random().toString(36).substring(2, 9)}`;
 	titleId = `${this.panelId}-title`;
 	hasTitle = computed(() => this.title().trim() !== "", ...ngDevMode ? [{ debugName: "hasTitle" }] : /* istanbul ignore next */ []);
@@ -25858,6 +25891,10 @@ var TnSidePanelComponent = class TnSidePanelComponent {
 			propertyName: "actionContent",
 			predicate: TnSidePanelActionDirective,
 			isSignal: true
+		}, {
+			propertyName: "titleSlotContent",
+			predicate: TnSidePanelTitleDirective,
+			isSignal: true
 		}],
 		viewQueries: [
 			{
@@ -25883,8 +25920,8 @@ var TnSidePanelComponent = class TnSidePanelComponent {
 			}
 		],
 		ngImport: i0,
-		template: "<!--\n  Overlay wrapper: moved into a CDK overlay while the panel is open (#322), and\n  back here — `display: none` — while it is not. `--open` and `--attached` are\n  applied by the component rather than bound, because both have to land in a\n  fixed order around the move; see the constants in `side-panel.component.ts`.\n\n  A CLOSED panel is `inert` as well as `aria-hidden` (#214). It stays in the DOM\n  and keeps its close button and its projected content, so `aria-hidden` alone\n  hid a subtree a keyboard user could still Tab into — landing focus on controls\n  that are translated off-screen. `inert` takes the subtree out of the focus\n  order and the accessibility tree together; `aria-hidden` stays beside it for\n  browsers without `inert` (Firefox before 112), where it is still the half that\n  works. Same reasoning as the checkbox in `list-option.component.html`.\n\n  `aria-label` and `aria-labelledby` are gated on `open()` for the same reason\n  `aria-modal` is: a closed panel is not in the accessibility tree, so a name on\n  it would describe nothing. `resolvedAriaLabelledby` prefers the visible\n  heading. `resolvedAriaLabel` is `null` when the panel is named by a heading or\n  an IDREF and the caller passed no `ariaLabel` of their own — an explicit one is\n  always emitted, so that a dangling IDREF cannot leave the panel unnamed.\n\n  `aria-hidden` is `hiddenFromAssistiveTech` rather than `!open()` because a\n  dialog opened OVER the panel hides it too (#322) — the panel is still open\n  underneath, which is why the other three stay on `open()`.\n-->\n<div\n  #overlay\n  class=\"tn-side-panel__overlay\"\n  role=\"dialog\"\n  tnTestIdType=\"side-panel\"\n  [attr.data-tn-panel]=\"panelId\"\n  [tnTestId]=\"testId()\"\n  [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n  [attr.aria-modal]=\"open() ? 'true' : null\"\n  [attr.aria-labelledby]=\"open() ? resolvedAriaLabelledby() : null\"\n  [attr.aria-label]=\"open() ? resolvedAriaLabel() : null\"\n  [attr.aria-hidden]=\"hiddenFromAssistiveTech() ? 'true' : null\"\n  [attr.inert]=\"open() ? null : ''\">\n\n  <!-- Backdrop -->\n  @if (hasBackdrop()) {\n    <div\n      class=\"tn-side-panel__backdrop\"\n      aria-hidden=\"true\"\n      (click)=\"onBackdropClick()\">\n    </div>\n  }\n\n  <!--\n    Panel. `cdkTrapFocus` keeps Tab inside it while it is open; what moves focus\n    IN on open is `tnFocusOnOpen` in the component, not\n    `[cdkTrapFocusAutoCapture]`, which used to be here and could silently do\n    nothing (#227). `tabindex=\"-1\"` is what makes this element the target it\n    focuses — see `../a11y/initial-focus.ts` for why the container and not the\n    first control inside it.\n\n    No `(keydown)` here since #322: Escape arrives through CDK's overlay\n    keyboard dispatcher, which knows which overlay is on top and this element\n    does not.\n  -->\n  <div\n    #panel\n    class=\"tn-side-panel__panel\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    [style.width]=\"width()\"\n    (transitionend)=\"onTransitionEnd($event)\">\n\n    <!-- Header -->\n    <header class=\"tn-side-panel__header\">\n      <!--\n        No heading element at all when there is no title, rather than an empty\n        one: an `<h2>` with no text is an `empty-heading` violation, and it puts\n        a level-2 heading with nothing in it into the document outline.\n      -->\n      @if (hasTitle()) {\n        <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n      }\n      <div class=\"tn-side-panel__header-actions\">\n        <ng-content select=\"[tnSidePanelHeaderAction]\" />\n        <tn-icon-button\n          name=\"close\"\n          library=\"mdi\"\n          size=\"sm\"\n          [ariaLabel]=\"closeButtonAriaLabel()\"\n          [testId]=\"closeButtonTestId()\"\n          (onClick)=\"dismiss()\" />\n      </div>\n    </header>\n\n    <!--\n      Content. This is the element that scrolls, and a scrolling element a\n      keyboard cannot reach is content below the fold that a keyboard cannot\n      read (#248). The panel's own `tabindex=\"-1\"` above does not cover it: that\n      is a focus TARGET, not a tab stop, and it is on the container rather than\n      on the element with the overflow.\n\n      All three attributes are gated together, and the gate is the point — an\n      unconditional tab stop would land on every panel in the library, including\n      the ones whose content fits, where it announces a group and does nothing.\n\n      The gate is `contentKeyboardReachable`, which is the measurement OR the\n      region's own focus, not the measurement alone. Content that stops\n      overflowing while the region is focused would otherwise take the tab stop\n      off the focused element and blur a keyboard user out of the open panel.\n      Both halves are `tnScrollableRegion`'s, in `../a11y/scrollable-region.ts`,\n      which says why in full — including why it listens for this element's own\n      `focus`/`blur` itself rather than leaving each caller to bind them.\n\n      `role=\"group\"` rather than the `region` a named `<section>` would imply:\n      `region` is a landmark, and a landmark named the same thing in every panel\n      is what `landmark-unique` reports the moment two of them are open. A group\n      is not summarised, which is what this is.\n    -->\n    <section\n      #content\n      class=\"tn-side-panel__content\"\n      [attr.tabindex]=\"contentKeyboardReachable() ? '0' : null\"\n      [attr.role]=\"contentKeyboardReachable() ? 'group' : null\"\n      [attr.aria-label]=\"contentKeyboardReachable() ? contentAriaLabel() : null\">\n      <ng-content />\n    </section>\n\n    <!-- Actions -->\n    @if (hasActions()) {\n      <footer class=\"tn-side-panel__actions\">\n        <ng-content select=\"[tnSidePanelAction]\" />\n      </footer>\n    }\n  </div>\n</div>\n",
-		styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;display:none;pointer-events:none}.tn-side-panel__overlay--attached{display:block}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0);box-shadow:-4px 0 24px #0000004d}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch;overflow-wrap:break-word}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"],
+		template: "<!--\n  Overlay wrapper: moved into a CDK overlay while the panel is open (#322), and\n  back here — `display: none` — while it is not. `--open` and `--attached` are\n  applied by the component rather than bound, because both have to land in a\n  fixed order around the move; see the constants in `side-panel.component.ts`.\n\n  A CLOSED panel is `inert` as well as `aria-hidden` (#214). It stays in the DOM\n  and keeps its close button and its projected content, so `aria-hidden` alone\n  hid a subtree a keyboard user could still Tab into — landing focus on controls\n  that are translated off-screen. `inert` takes the subtree out of the focus\n  order and the accessibility tree together; `aria-hidden` stays beside it for\n  browsers without `inert` (Firefox before 112), where it is still the half that\n  works. Same reasoning as the checkbox in `list-option.component.html`.\n\n  `aria-label` and `aria-labelledby` are gated on `open()` for the same reason\n  `aria-modal` is: a closed panel is not in the accessibility tree, so a name on\n  it would describe nothing. `resolvedAriaLabelledby` prefers the visible\n  heading. `resolvedAriaLabel` is `null` when the panel is named by a heading or\n  an IDREF and the caller passed no `ariaLabel` of their own — an explicit one is\n  always emitted, so that a dangling IDREF cannot leave the panel unnamed.\n\n  `aria-hidden` is `hiddenFromAssistiveTech` rather than `!open()` because a\n  dialog opened OVER the panel hides it too (#322) — the panel is still open\n  underneath, which is why the other three stay on `open()`.\n-->\n<div\n  #overlay\n  class=\"tn-side-panel__overlay\"\n  role=\"dialog\"\n  tnTestIdType=\"side-panel\"\n  [attr.data-tn-panel]=\"panelId\"\n  [tnTestId]=\"testId()\"\n  [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n  [attr.aria-modal]=\"open() ? 'true' : null\"\n  [attr.aria-labelledby]=\"open() ? resolvedAriaLabelledby() : null\"\n  [attr.aria-label]=\"open() ? resolvedAriaLabel() : null\"\n  [attr.aria-hidden]=\"hiddenFromAssistiveTech() ? 'true' : null\"\n  [attr.inert]=\"open() ? null : ''\">\n\n  <!-- Backdrop -->\n  @if (hasBackdrop()) {\n    <div\n      class=\"tn-side-panel__backdrop\"\n      aria-hidden=\"true\"\n      (click)=\"onBackdropClick()\">\n    </div>\n  }\n\n  <!--\n    Panel. `cdkTrapFocus` keeps Tab inside it while it is open; what moves focus\n    IN on open is `tnFocusOnOpen` in the component, not\n    `[cdkTrapFocusAutoCapture]`, which used to be here and could silently do\n    nothing (#227). `tabindex=\"-1\"` is what makes this element the target it\n    focuses — see `../a11y/initial-focus.ts` for why the container and not the\n    first control inside it.\n\n    No `(keydown)` here since #322: Escape arrives through CDK's overlay\n    keyboard dispatcher, which knows which overlay is on top and this element\n    does not.\n  -->\n  <div\n    #panel\n    class=\"tn-side-panel__panel\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    [style.width]=\"width()\"\n    (transitionend)=\"onTransitionEnd($event)\">\n\n    <!-- Header -->\n    <header class=\"tn-side-panel__header\">\n      <!--\n        No heading element at all when there is no title, rather than an empty\n        one: an `<h2>` with no text is an `empty-heading` violation, and it puts\n        a level-2 heading with nothing in it into the document outline.\n      -->\n      @if (hasTitle()) {\n        <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n      }\n      <!--\n        A heading of the consumer's own (#372), in the place `title` takes and\n        outside the actions group. The wrapper is what grows and shrinks, since\n        the projected element is the consumer's and this stylesheet cannot reach\n        it; it is only rendered when something is projected into it, so a titled\n        panel's header is unchanged.\n      -->\n      @if (hasTitleSlot()) {\n        <div class=\"tn-side-panel__title-slot\">\n          <ng-content select=\"[tnSidePanelTitle]\" />\n        </div>\n      }\n      <div class=\"tn-side-panel__header-actions\">\n        <ng-content select=\"[tnSidePanelHeaderAction]\" />\n        <tn-icon-button\n          name=\"close\"\n          library=\"mdi\"\n          size=\"sm\"\n          [ariaLabel]=\"closeButtonAriaLabel()\"\n          [testId]=\"closeButtonTestId()\"\n          (onClick)=\"dismiss()\" />\n      </div>\n    </header>\n\n    <!--\n      Content. This is the element that scrolls, and a scrolling element a\n      keyboard cannot reach is content below the fold that a keyboard cannot\n      read (#248). The panel's own `tabindex=\"-1\"` above does not cover it: that\n      is a focus TARGET, not a tab stop, and it is on the container rather than\n      on the element with the overflow.\n\n      All three attributes are gated together, and the gate is the point — an\n      unconditional tab stop would land on every panel in the library, including\n      the ones whose content fits, where it announces a group and does nothing.\n\n      The gate is `contentKeyboardReachable`, which is the measurement OR the\n      region's own focus, not the measurement alone. Content that stops\n      overflowing while the region is focused would otherwise take the tab stop\n      off the focused element and blur a keyboard user out of the open panel.\n      Both halves are `tnScrollableRegion`'s, in `../a11y/scrollable-region.ts`,\n      which says why in full — including why it listens for this element's own\n      `focus`/`blur` itself rather than leaving each caller to bind them.\n\n      `role=\"group\"` rather than the `region` a named `<section>` would imply:\n      `region` is a landmark, and a landmark named the same thing in every panel\n      is what `landmark-unique` reports the moment two of them are open. A group\n      is not summarised, which is what this is.\n    -->\n    <section\n      #content\n      class=\"tn-side-panel__content\"\n      [attr.tabindex]=\"contentKeyboardReachable() ? '0' : null\"\n      [attr.role]=\"contentKeyboardReachable() ? 'group' : null\"\n      [attr.aria-label]=\"contentKeyboardReachable() ? contentAriaLabel() : null\">\n      <ng-content />\n    </section>\n\n    <!-- Actions -->\n    @if (hasActions()) {\n      <footer class=\"tn-side-panel__actions\">\n        <ng-content select=\"[tnSidePanelAction]\" />\n      </footer>\n    }\n  </div>\n</div>\n",
+		styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;display:none;pointer-events:none}.tn-side-panel__overlay--attached{display:block}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0);box-shadow:-4px 0 24px #0000004d}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__title-slot{flex:1;min-width:0}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch;overflow-wrap:break-word}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"],
 		dependencies: [
 			{
 				kind: "ngmodule",
@@ -25953,8 +25990,8 @@ i0.ɵɵngDeclareClassMetadata({
 				"class": "tn-side-panel",
 				"[attr.data-tn-panel]": "panelId"
 			},
-			template: "<!--\n  Overlay wrapper: moved into a CDK overlay while the panel is open (#322), and\n  back here — `display: none` — while it is not. `--open` and `--attached` are\n  applied by the component rather than bound, because both have to land in a\n  fixed order around the move; see the constants in `side-panel.component.ts`.\n\n  A CLOSED panel is `inert` as well as `aria-hidden` (#214). It stays in the DOM\n  and keeps its close button and its projected content, so `aria-hidden` alone\n  hid a subtree a keyboard user could still Tab into — landing focus on controls\n  that are translated off-screen. `inert` takes the subtree out of the focus\n  order and the accessibility tree together; `aria-hidden` stays beside it for\n  browsers without `inert` (Firefox before 112), where it is still the half that\n  works. Same reasoning as the checkbox in `list-option.component.html`.\n\n  `aria-label` and `aria-labelledby` are gated on `open()` for the same reason\n  `aria-modal` is: a closed panel is not in the accessibility tree, so a name on\n  it would describe nothing. `resolvedAriaLabelledby` prefers the visible\n  heading. `resolvedAriaLabel` is `null` when the panel is named by a heading or\n  an IDREF and the caller passed no `ariaLabel` of their own — an explicit one is\n  always emitted, so that a dangling IDREF cannot leave the panel unnamed.\n\n  `aria-hidden` is `hiddenFromAssistiveTech` rather than `!open()` because a\n  dialog opened OVER the panel hides it too (#322) — the panel is still open\n  underneath, which is why the other three stay on `open()`.\n-->\n<div\n  #overlay\n  class=\"tn-side-panel__overlay\"\n  role=\"dialog\"\n  tnTestIdType=\"side-panel\"\n  [attr.data-tn-panel]=\"panelId\"\n  [tnTestId]=\"testId()\"\n  [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n  [attr.aria-modal]=\"open() ? 'true' : null\"\n  [attr.aria-labelledby]=\"open() ? resolvedAriaLabelledby() : null\"\n  [attr.aria-label]=\"open() ? resolvedAriaLabel() : null\"\n  [attr.aria-hidden]=\"hiddenFromAssistiveTech() ? 'true' : null\"\n  [attr.inert]=\"open() ? null : ''\">\n\n  <!-- Backdrop -->\n  @if (hasBackdrop()) {\n    <div\n      class=\"tn-side-panel__backdrop\"\n      aria-hidden=\"true\"\n      (click)=\"onBackdropClick()\">\n    </div>\n  }\n\n  <!--\n    Panel. `cdkTrapFocus` keeps Tab inside it while it is open; what moves focus\n    IN on open is `tnFocusOnOpen` in the component, not\n    `[cdkTrapFocusAutoCapture]`, which used to be here and could silently do\n    nothing (#227). `tabindex=\"-1\"` is what makes this element the target it\n    focuses — see `../a11y/initial-focus.ts` for why the container and not the\n    first control inside it.\n\n    No `(keydown)` here since #322: Escape arrives through CDK's overlay\n    keyboard dispatcher, which knows which overlay is on top and this element\n    does not.\n  -->\n  <div\n    #panel\n    class=\"tn-side-panel__panel\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    [style.width]=\"width()\"\n    (transitionend)=\"onTransitionEnd($event)\">\n\n    <!-- Header -->\n    <header class=\"tn-side-panel__header\">\n      <!--\n        No heading element at all when there is no title, rather than an empty\n        one: an `<h2>` with no text is an `empty-heading` violation, and it puts\n        a level-2 heading with nothing in it into the document outline.\n      -->\n      @if (hasTitle()) {\n        <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n      }\n      <div class=\"tn-side-panel__header-actions\">\n        <ng-content select=\"[tnSidePanelHeaderAction]\" />\n        <tn-icon-button\n          name=\"close\"\n          library=\"mdi\"\n          size=\"sm\"\n          [ariaLabel]=\"closeButtonAriaLabel()\"\n          [testId]=\"closeButtonTestId()\"\n          (onClick)=\"dismiss()\" />\n      </div>\n    </header>\n\n    <!--\n      Content. This is the element that scrolls, and a scrolling element a\n      keyboard cannot reach is content below the fold that a keyboard cannot\n      read (#248). The panel's own `tabindex=\"-1\"` above does not cover it: that\n      is a focus TARGET, not a tab stop, and it is on the container rather than\n      on the element with the overflow.\n\n      All three attributes are gated together, and the gate is the point — an\n      unconditional tab stop would land on every panel in the library, including\n      the ones whose content fits, where it announces a group and does nothing.\n\n      The gate is `contentKeyboardReachable`, which is the measurement OR the\n      region's own focus, not the measurement alone. Content that stops\n      overflowing while the region is focused would otherwise take the tab stop\n      off the focused element and blur a keyboard user out of the open panel.\n      Both halves are `tnScrollableRegion`'s, in `../a11y/scrollable-region.ts`,\n      which says why in full — including why it listens for this element's own\n      `focus`/`blur` itself rather than leaving each caller to bind them.\n\n      `role=\"group\"` rather than the `region` a named `<section>` would imply:\n      `region` is a landmark, and a landmark named the same thing in every panel\n      is what `landmark-unique` reports the moment two of them are open. A group\n      is not summarised, which is what this is.\n    -->\n    <section\n      #content\n      class=\"tn-side-panel__content\"\n      [attr.tabindex]=\"contentKeyboardReachable() ? '0' : null\"\n      [attr.role]=\"contentKeyboardReachable() ? 'group' : null\"\n      [attr.aria-label]=\"contentKeyboardReachable() ? contentAriaLabel() : null\">\n      <ng-content />\n    </section>\n\n    <!-- Actions -->\n    @if (hasActions()) {\n      <footer class=\"tn-side-panel__actions\">\n        <ng-content select=\"[tnSidePanelAction]\" />\n      </footer>\n    }\n  </div>\n</div>\n",
-			styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;display:none;pointer-events:none}.tn-side-panel__overlay--attached{display:block}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0);box-shadow:-4px 0 24px #0000004d}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch;overflow-wrap:break-word}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"]
+			template: "<!--\n  Overlay wrapper: moved into a CDK overlay while the panel is open (#322), and\n  back here — `display: none` — while it is not. `--open` and `--attached` are\n  applied by the component rather than bound, because both have to land in a\n  fixed order around the move; see the constants in `side-panel.component.ts`.\n\n  A CLOSED panel is `inert` as well as `aria-hidden` (#214). It stays in the DOM\n  and keeps its close button and its projected content, so `aria-hidden` alone\n  hid a subtree a keyboard user could still Tab into — landing focus on controls\n  that are translated off-screen. `inert` takes the subtree out of the focus\n  order and the accessibility tree together; `aria-hidden` stays beside it for\n  browsers without `inert` (Firefox before 112), where it is still the half that\n  works. Same reasoning as the checkbox in `list-option.component.html`.\n\n  `aria-label` and `aria-labelledby` are gated on `open()` for the same reason\n  `aria-modal` is: a closed panel is not in the accessibility tree, so a name on\n  it would describe nothing. `resolvedAriaLabelledby` prefers the visible\n  heading. `resolvedAriaLabel` is `null` when the panel is named by a heading or\n  an IDREF and the caller passed no `ariaLabel` of their own — an explicit one is\n  always emitted, so that a dangling IDREF cannot leave the panel unnamed.\n\n  `aria-hidden` is `hiddenFromAssistiveTech` rather than `!open()` because a\n  dialog opened OVER the panel hides it too (#322) — the panel is still open\n  underneath, which is why the other three stay on `open()`.\n-->\n<div\n  #overlay\n  class=\"tn-side-panel__overlay\"\n  role=\"dialog\"\n  tnTestIdType=\"side-panel\"\n  [attr.data-tn-panel]=\"panelId\"\n  [tnTestId]=\"testId()\"\n  [class.tn-side-panel__overlay--initialized]=\"initialized()\"\n  [attr.aria-modal]=\"open() ? 'true' : null\"\n  [attr.aria-labelledby]=\"open() ? resolvedAriaLabelledby() : null\"\n  [attr.aria-label]=\"open() ? resolvedAriaLabel() : null\"\n  [attr.aria-hidden]=\"hiddenFromAssistiveTech() ? 'true' : null\"\n  [attr.inert]=\"open() ? null : ''\">\n\n  <!-- Backdrop -->\n  @if (hasBackdrop()) {\n    <div\n      class=\"tn-side-panel__backdrop\"\n      aria-hidden=\"true\"\n      (click)=\"onBackdropClick()\">\n    </div>\n  }\n\n  <!--\n    Panel. `cdkTrapFocus` keeps Tab inside it while it is open; what moves focus\n    IN on open is `tnFocusOnOpen` in the component, not\n    `[cdkTrapFocusAutoCapture]`, which used to be here and could silently do\n    nothing (#227). `tabindex=\"-1\"` is what makes this element the target it\n    focuses — see `../a11y/initial-focus.ts` for why the container and not the\n    first control inside it.\n\n    No `(keydown)` here since #322: Escape arrives through CDK's overlay\n    keyboard dispatcher, which knows which overlay is on top and this element\n    does not.\n  -->\n  <div\n    #panel\n    class=\"tn-side-panel__panel\"\n    tabindex=\"-1\"\n    cdkTrapFocus\n    [style.width]=\"width()\"\n    (transitionend)=\"onTransitionEnd($event)\">\n\n    <!-- Header -->\n    <header class=\"tn-side-panel__header\">\n      <!--\n        No heading element at all when there is no title, rather than an empty\n        one: an `<h2>` with no text is an `empty-heading` violation, and it puts\n        a level-2 heading with nothing in it into the document outline.\n      -->\n      @if (hasTitle()) {\n        <h2 class=\"tn-side-panel__title\" [id]=\"titleId\">{{ title() }}</h2>\n      }\n      <!--\n        A heading of the consumer's own (#372), in the place `title` takes and\n        outside the actions group. The wrapper is what grows and shrinks, since\n        the projected element is the consumer's and this stylesheet cannot reach\n        it; it is only rendered when something is projected into it, so a titled\n        panel's header is unchanged.\n      -->\n      @if (hasTitleSlot()) {\n        <div class=\"tn-side-panel__title-slot\">\n          <ng-content select=\"[tnSidePanelTitle]\" />\n        </div>\n      }\n      <div class=\"tn-side-panel__header-actions\">\n        <ng-content select=\"[tnSidePanelHeaderAction]\" />\n        <tn-icon-button\n          name=\"close\"\n          library=\"mdi\"\n          size=\"sm\"\n          [ariaLabel]=\"closeButtonAriaLabel()\"\n          [testId]=\"closeButtonTestId()\"\n          (onClick)=\"dismiss()\" />\n      </div>\n    </header>\n\n    <!--\n      Content. This is the element that scrolls, and a scrolling element a\n      keyboard cannot reach is content below the fold that a keyboard cannot\n      read (#248). The panel's own `tabindex=\"-1\"` above does not cover it: that\n      is a focus TARGET, not a tab stop, and it is on the container rather than\n      on the element with the overflow.\n\n      All three attributes are gated together, and the gate is the point — an\n      unconditional tab stop would land on every panel in the library, including\n      the ones whose content fits, where it announces a group and does nothing.\n\n      The gate is `contentKeyboardReachable`, which is the measurement OR the\n      region's own focus, not the measurement alone. Content that stops\n      overflowing while the region is focused would otherwise take the tab stop\n      off the focused element and blur a keyboard user out of the open panel.\n      Both halves are `tnScrollableRegion`'s, in `../a11y/scrollable-region.ts`,\n      which says why in full — including why it listens for this element's own\n      `focus`/`blur` itself rather than leaving each caller to bind them.\n\n      `role=\"group\"` rather than the `region` a named `<section>` would imply:\n      `region` is a landmark, and a landmark named the same thing in every panel\n      is what `landmark-unique` reports the moment two of them are open. A group\n      is not summarised, which is what this is.\n    -->\n    <section\n      #content\n      class=\"tn-side-panel__content\"\n      [attr.tabindex]=\"contentKeyboardReachable() ? '0' : null\"\n      [attr.role]=\"contentKeyboardReachable() ? 'group' : null\"\n      [attr.aria-label]=\"contentKeyboardReachable() ? contentAriaLabel() : null\">\n      <ng-content />\n    </section>\n\n    <!-- Actions -->\n    @if (hasActions()) {\n      <footer class=\"tn-side-panel__actions\">\n        <ng-content select=\"[tnSidePanelAction]\" />\n      </footer>\n    }\n  </div>\n</div>\n",
+			styles: [":host{display:contents}.tn-side-panel__overlay{position:fixed;inset:0;display:none;pointer-events:none}.tn-side-panel__overlay--attached{display:block}.tn-side-panel__overlay--open{pointer-events:auto}.tn-side-panel__overlay--open .tn-side-panel__backdrop{opacity:1}.tn-side-panel__overlay--open .tn-side-panel__panel{transform:translate(0);box-shadow:-4px 0 24px #0000004d}.tn-side-panel__backdrop{position:absolute;inset:0;background:#00000080;opacity:0}.tn-side-panel__overlay--initialized .tn-side-panel__backdrop{transition:opacity .2s ease}.tn-side-panel__panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;max-width:100vw;background:var(--tn-bg2, #282828);color:var(--tn-fg1, #ffffff);box-shadow:-4px 0 24px #0000;outline:none;transform:translate(100%)}.tn-side-panel__overlay--initialized .tn-side-panel__panel{transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1)}.tn-side-panel__header{flex:0 0 auto;display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--tn-lines, #383838)}.tn-side-panel__title{margin:0;font-size:1.25rem;font-weight:600;line-height:1.5;color:var(--tn-fg1, #ffffff);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tn-side-panel__title-slot{flex:1;min-width:0}.tn-side-panel__header-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto}.tn-side-panel__content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--tn-content-padding, 24px);-webkit-overflow-scrolling:touch;overflow-wrap:break-word}.tn-side-panel__actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid var(--tn-lines, #383838)}@media(max-width:640px){.tn-side-panel__panel{width:100vw!important}}@media(prefers-reduced-motion:reduce){.tn-side-panel__panel,.tn-side-panel__backdrop{transition-duration:0ms!important}}\n"]
 		}]
 	}],
 	ctorParameters: () => [],
@@ -26089,6 +26126,10 @@ i0.ɵɵngDeclareClassMetadata({
 		actionContent: [{
 			type: i0.ContentChildren,
 			args: [i0.forwardRef(() => TnSidePanelActionDirective), { isSignal: true }]
+		}],
+		titleSlotContent: [{
+			type: i0.ContentChildren,
+			args: [i0.forwardRef(() => TnSidePanelTitleDirective), { isSignal: true }]
 		}]
 	}
 });
@@ -26103,7 +26144,8 @@ var TnSidePanelHarness = class TnSidePanelHarness extends ComponentHarness {
 	}
 	async getTitle() {
 		const panelId = await (await this.host()).getAttribute("data-tn-panel");
-		const titleEl = await this.documentRootLocatorFactory().locatorForOptional(`[data-tn-panel="${panelId}"] .tn-side-panel__title`)();
+		const slot = `[data-tn-panel="${panelId}"] .tn-side-panel__title-slot`;
+		const titleEl = await this.documentRootLocatorFactory().locatorForOptional(`[data-tn-panel="${panelId}"] .tn-side-panel__title`, `${slot} :is(h1, h2, h3, h4, h5, h6, [role="heading"])`)();
 		return titleEl ? (await titleEl.text()).trim() : "";
 	}
 	async isOpen() {
@@ -28816,6 +28858,6 @@ i0.ɵɵngDeclareClassMetadata({
 	}],
 	ctorParameters: () => []
 });
-export { CommonShortcuts, DEFAULT_THEME, DiskIconComponent, DiskType, FileSizePipe, FlatTreeControl, 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_CHIP_INPUT_DEFAULT_LABELS, TN_CHIP_INPUT_LABELS, 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, createTnOptionsDataSource, 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, FlatTreeControl, 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_CHIP_INPUT_DEFAULT_LABELS, TN_CHIP_INPUT_LABELS, 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, TnSidePanelTitleDirective, 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, createTnOptionsDataSource, 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