@akcelik/strct 5.13.0 → 5.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akcelik/strct",
-  "version": "5.13.0",
+  "version": "5.15.0",
   "description": "UIStruct — a standalone Angular component library with a tokenised, multi-palette theme system, built for datacenter / infrastructure management UIs.",
   "author": "Serkan Akcelik <serkan.akcelik@gmail.com>",
   "license": "MIT",

package/styles/_tokens.scss

@@ -81,11 +81,6 @@
   --t4: rgba(255, 255, 255, 0.15);
   --inv: #0e1015;
   --acc: #7b9ec8;
-  --acc-m: rgba(123, 158, 200, 0.12);
-  --acc-s: rgba(123, 158, 200, 0.06);
-  --acc50: rgba(123, 158, 200, 0.5);
-  --acc30: rgba(123, 158, 200, 0.3);
-  --acc18: rgba(123, 158, 200, 0.18);
   --success: #7da87e;
   --success-bg: rgba(125, 168, 126, 0.12);
   --warning: #bfae6a;
@@ -151,11 +146,6 @@
   --t4: rgba(0, 0, 0, 0.14);
   --inv: #ffffff;
   --acc: #4a6b8f;
-  --acc-m: rgba(74, 107, 143, 0.1);
-  --acc-s: rgba(74, 107, 143, 0.05);
-  --acc50: rgba(74, 107, 143, 0.5);
-  --acc30: rgba(74, 107, 143, 0.3);
-  --acc18: rgba(74, 107, 143, 0.18);
   --success: #4c7a4f;
   --success-bg: rgba(76, 122, 79, 0.12);
   --warning: #7d6f30;
@@ -221,11 +211,6 @@
   --t4: rgba(255, 225, 195, 0.14);
   --inv: #12100d;
   --acc: #c49a6c;
-  --acc-m: rgba(196, 154, 108, 0.12);
-  --acc-s: rgba(196, 154, 108, 0.06);
-  --acc50: rgba(196, 154, 108, 0.5);
-  --acc30: rgba(196, 154, 108, 0.3);
-  --acc18: rgba(196, 154, 108, 0.18);
   --success: #8aaa7a;
   --success-bg: rgba(138, 170, 122, 0.12);
   --warning: #c4b060;
@@ -291,11 +276,6 @@
   --t4: rgba(80, 55, 30, 0.14);
   --inv: #fdfcfa;
   --acc: #7d5e3f;
-  --acc-m: rgba(125, 94, 63, 0.1);
-  --acc-s: rgba(125, 94, 63, 0.05);
-  --acc50: rgba(125, 94, 63, 0.5);
-  --acc30: rgba(125, 94, 63, 0.3);
-  --acc18: rgba(125, 94, 63, 0.18);
   --success: #4c7a46;
   --success-bg: rgba(76, 122, 70, 0.12);
   --warning: #7d6e2c;
@@ -361,11 +341,6 @@
   --t4: rgba(195, 222, 210, 0.14);
   --inv: #0d1210;
   --acc: #7aab90;
-  --acc-m: rgba(122, 171, 144, 0.12);
-  --acc-s: rgba(122, 171, 144, 0.06);
-  --acc50: rgba(122, 171, 144, 0.5);
-  --acc30: rgba(122, 171, 144, 0.3);
-  --acc18: rgba(122, 171, 144, 0.18);
   --success: #82aa82;
   --success-bg: rgba(130, 170, 130, 0.12);
   --warning: #b8ac6a;
@@ -431,11 +406,6 @@
   --t4: rgba(35, 65, 45, 0.14);
   --inv: #fafcfb;
   --acc: #3f7355;
-  --acc-m: rgba(63, 115, 85, 0.1);
-  --acc-s: rgba(63, 115, 85, 0.05);
-  --acc50: rgba(63, 115, 85, 0.5);
-  --acc30: rgba(63, 115, 85, 0.3);
-  --acc18: rgba(63, 115, 85, 0.18);
   --success: #467a48;
   --success-bg: rgba(70, 122, 72, 0.12);
   --warning: #6f682d;
@@ -474,6 +444,37 @@
   --disabled-opacity: 0.5;
 }
 
+// A product's own accent, independent of the operator's palette (FR-52-03).
+// Every translucent accent tint is derived from --acc rather than written out
+// per palette, so a subtree that sets --acc on a [data-accent] element remaps
+// badges, check marks, links, focus rings and selection fills with it — no
+// second set of tokens, and no component has to know the product's name.
+//
+//   [data-accent='backup'] { --acc: #2f8f7a; }
+//   [data-theme='dark'] [data-accent='backup'] { --acc: #58b9a3; }
+//
+// The mixes are the values these tokens have always had: 12/6% in dark and
+// 10/5% in light, 50/30/18% in both. The colour is the app's to pick, so its
+// contrast is the app's to check: >= 4.5:1 on --bg-0/1/2 for text and marks,
+// >= 3:1 on --hdr for a line or a chip (the palette's own light accent is
+// 2.67-2.85:1 on its header, which is why a header shade is a second value).
+[data-palette][data-theme='dark'],
+[data-theme='dark'] [data-accent] {
+  --acc-m: color-mix(in srgb, var(--acc) 12%, transparent);
+  --acc-s: color-mix(in srgb, var(--acc) 6%, transparent);
+  --acc50: color-mix(in srgb, var(--acc) 50%, transparent);
+  --acc30: color-mix(in srgb, var(--acc) 30%, transparent);
+  --acc18: color-mix(in srgb, var(--acc) 18%, transparent);
+}
+[data-palette][data-theme='light'],
+[data-theme='light'] [data-accent] {
+  --acc-m: color-mix(in srgb, var(--acc) 10%, transparent);
+  --acc-s: color-mix(in srgb, var(--acc) 5%, transparent);
+  --acc50: color-mix(in srgb, var(--acc) 50%, transparent);
+  --acc30: color-mix(in srgb, var(--acc) 30%, transparent);
+  --acc18: color-mix(in srgb, var(--acc) 18%, transparent);
+}
+
 // Honour the OS "increase contrast" preference (low-vision users / bright ambient
 // light): strengthen borders and lift secondary/tertiary text toward primary.
 // Only active when the OS asks, so the default look is untouched. Scoped by

package/types/akcelik-strct.d.ts

@@ -434,6 +434,17 @@ declare class StrctShellService {
     readonly mobileNavOpen: _angular_core.WritableSignal<boolean>;
     /** Id of the vertical nav controlled by the header drawer toggle. */
     readonly navId: string;
+    /**
+     * The header's drawer toggle, so closing the drawer can hand focus back to
+     * what opened it. The header registers it; nothing else writes it.
+     */
+    drawerToggle: HTMLElement | null;
+    /**
+     * Closes the navigation drawer. On a phone the drawer holds the
+     * navigation, so a choice made in it opens a page *behind* it; the shell
+     * calls this on every completed navigation unless told not to.
+     */
+    closeNav(): void;
 }
 /**
  * Application frame: a full-viewport grid of header / body / footer rows.
@@ -454,16 +465,65 @@ declare class StrctShell {
     readonly skipLinkLabel: _angular_core.InputSignal<string>;
     /** The name of the backdrop that closes the navigation drawer on a phone. */
     readonly closeNavLabel: _angular_core.InputSignal<string>;
+    /**
+     * Close the drawer when a navigation completes — the subscription every app
+     * with a router ends up writing. It needs a `Router`; without one nothing
+     * happens. Set it to `false` to keep the drawer open across navigations,
+     * and close it yourself with `StrctShellService.closeNav()`.
+     */
+    readonly closeNavOnNavigate: _angular_core.InputSignalWithTransform<boolean, unknown>;
     /** The drawer's open state lives on the shell, and so does its backdrop. */
     protected readonly shell: StrctShellService;
     private readonly doc;
+    private readonly router;
+    constructor();
     /**
      * Moves focus rather than only the scroll position: an href alone scrolls
      * without focusing, so the next Tab would resume from the link.
      */
     protected skipToMain(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctShell, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctShell, "strct-shell", never, { "skipLinkTarget": { "alias": "skipLinkTarget"; "required": false; "isSignal": true; }; "skipLinkLabel": { "alias": "skipLinkLabel"; "required": false; "isSignal": true; }; "closeNavLabel": { "alias": "closeNavLabel"; "required": false; "isSignal": true; }; }, {}, never, ["strct-header", "*", "strct-footer"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctShell, "strct-shell", never, { "skipLinkTarget": { "alias": "skipLinkTarget"; "required": false; "isSignal": true; }; "skipLinkLabel": { "alias": "skipLinkLabel"; "required": false; "isSignal": true; }; "closeNavLabel": { "alias": "closeNavLabel"; "required": false; "isSignal": true; }; "closeNavOnNavigate": { "alias": "closeNavOnNavigate"; "required": false; "isSignal": true; }; }, {}, never, ["strct-header", "*", "strct-footer"], true, never>;
+}
+/** What a header action is, and whether it may move into the overflow menu. */
+interface StrctHeaderActionConfig {
+    /** The name the overflow row shows, and the action's own name. */
+    label: string;
+    /** Optional icon for the overflow row (an icon-set name). */
+    icon?: string;
+    /**
+     * `'phone'` (the default) moves the action into the "More" menu below the
+     * breakpoint. `'never'` keeps it in the header at every width — what an
+     * action that opens its own popover (alarms, the account menu) needs, since
+     * a popover inside a menu is a menu inside a menu.
+     */
+    overflow?: 'phone' | 'never';
+    /**
+     * What the overflow row does when it is chosen. Given one, the row is a
+     * menu item with the icon and the label — a command.
+     *
+     * Without one the action's own template is drawn in the menu instead, in a
+     * row that is not a menu item: the way out for an action that is a control
+     * in its own right (a segmented choice, a switcher). It keeps its own tab
+     * stop and its own clicks, and using it does not close the menu.
+     */
+    run?: () => void;
+}
+/**
+ * An action in the header that knows whether it may move into the overflow
+ * menu on a phone:
+ *
+ *   <ng-container *strctHeaderAction="{ label: 'Create', icon: 'plus', run: create }">
+ *     <button strct-button variant="flat" iconOnly aria-label="Create">…</button>
+ *   </ng-container>
+ *
+ * Content projected into the header without this directive never moves.
+ */
+declare class StrctHeaderAction {
+    readonly config: _angular_core.InputSignal<StrctHeaderActionConfig>;
+    readonly template: TemplateRef<unknown>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctHeaderAction, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<StrctHeaderAction, "[strctHeaderAction]", never, { "config": { "alias": "strctHeaderAction"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 /** Top application bar. Holds brand on the left and actions on the right. */
 declare class StrctHeader {
@@ -475,9 +535,29 @@ declare class StrctHeader {
      * nothing under it moves. Empty leaves today's border alone.
      */
     readonly accent: _angular_core.InputSignal<string>;
+    /**
+     * Below this width (px) the actions marked `overflow: 'phone'` move into a
+     * "More" menu. A console header carries more icons than a phone has room
+     * for, and an app should not have to draw two copies of each.
+     */
+    readonly overflowBreakpoint: _angular_core.InputSignal<number>;
+    /** The "More" trigger's accessible name (localisable). */
+    readonly overflowLabel: _angular_core.InputSignal<string>;
+    protected readonly actions: _angular_core.Signal<readonly StrctHeaderAction[]>;
+    /** Whether the viewport is below `overflowBreakpoint`. */
+    private readonly narrow;
+    protected readonly inlineActions: _angular_core.Signal<StrctHeaderAction[]>;
+    protected readonly overflowActions: _angular_core.Signal<StrctHeaderAction[]>;
+    /** An action that brings its own control makes the panel a dialog, not a menu. */
+    protected readonly overflowIsPanel: _angular_core.Signal<boolean>;
+    private readonly overflowPanel;
+    /** In panel mode nothing closes on activation, so a command closes it. */
+    protected runAndClose(run: () => void): void;
     protected readonly shell: StrctShellService;
+    private readonly hostEl;
+    constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctHeader, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctHeader, "strct-header", never, { "drawerToggleAriaLabel": { "alias": "drawerToggleAriaLabel"; "required": false; "isSignal": true; }; "accent": { "alias": "accent"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctHeader, "strct-header", never, { "drawerToggleAriaLabel": { "alias": "drawerToggleAriaLabel"; "required": false; "isSignal": true; }; "accent": { "alias": "accent"; "required": false; "isSignal": true; }; "overflowBreakpoint": { "alias": "overflowBreakpoint"; "required": false; "isSignal": true; }; "overflowLabel": { "alias": "overflowLabel"; "required": false; "isSignal": true; }; }, {}, ["actions"], ["*"], true, never>;
 }
 /** Bottom status bar. */
 declare class StrctFooter {
@@ -488,10 +568,39 @@ declare class StrctFooter {
 /** Scrollable left sidebar surface. Holds the icon nav and/or a tree. */
 declare class StrctVerticalNav {
     protected readonly shell: StrctShellService;
+    private readonly host;
+    /**
+     * How wide the drawer may get on a phone — only in drawer mode, so the
+     * width an app sets for its desktop sidebar is untouched. The default
+     * leaves 48px of page to tap the drawer away.
+     */
+    readonly drawerMaxWidth: _angular_core.InputSignal<string>;
+    /**
+     * Draw a close control at the drawer's top. Escape and the backdrop close
+     * it too, but neither is visible, and a touch screen has no Escape.
+     */
+    readonly closeButton: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The close control's accessible name (localisable). */
+    readonly closeLabel: _angular_core.InputSignal<string>;
+    /**
+     * Keep Tab inside the open drawer and move focus into it, the way a dialog
+     * does. It is only ever on in drawer mode: a sidebar that is part of the
+     * page must not trap anything.
+     */
+    readonly trapFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** True while the drawer is open AND the viewport is in drawer mode. */
+    protected trapped(): boolean;
+    constructor();
     /** Closes the mobile nav on Escape. */
     protected onEscape(): void;
+    protected onTab(event: Event): void;
+    /**
+     * The drawer breakpoint is the media query the styles use; matchMedia is
+     * the only way the component can read it, and a server render has none.
+     */
+    private isDrawer;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctVerticalNav, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctVerticalNav, "strct-vertical-nav", never, {}, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctVerticalNav, "strct-vertical-nav", never, { "drawerMaxWidth": { "alias": "drawerMaxWidth"; "required": false; "isSignal": true; }; "closeButton": { "alias": "closeButton"; "required": false; "isSignal": true; }; "closeLabel": { "alias": "closeLabel"; "required": false; "isSignal": true; }; "trapFocus": { "alias": "trapFocus"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 /** Horizontal strip of icon tabs (e.g. section switcher at the top of a sidebar). */
 declare class StrctNav {
@@ -2008,7 +2117,7 @@ declare class StrctDropdownItem {
     protected readonly tabindex: _angular_core.Signal<number | null>;
     constructor();
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctDropdownItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDropdownItem, "strct-dropdown-item", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "critical": { "alias": "critical"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, {}, never, ["[strctDropdownItemIcon]", "[strctDropdownItemAction]", "[strctDropdownItemLabel]", "[strctDropdownItemDescription]", "*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctDropdownItem, "strct-dropdown-item, a[strctDropdownItem]", never, { "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "critical": { "alias": "critical"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; }, {}, never, ["[strctDropdownItemIcon]", "[strctDropdownItemAction]", "[strctDropdownItemLabel]", "[strctDropdownItemDescription]", "*"], true, never>;
 }
 /**
  * A named group of rows — "Create" above the create actions, where a divider
@@ -2339,6 +2448,15 @@ interface StrctMenuLink {
     dotStatus?: StrctRailStatus;
     /** Muted trailing icon (e.g. "restart required"), before any badge / dot. */
     trailingIcon?: string;
+    /**
+     * Render as a real router link (`<a routerLink>`): middle-click, ⌘/Ctrl-click
+     * and "open in new tab" work, and the address can be copied — which a page
+     * with an address of its own needs. `(select)` still fires on plain
+     * activation. Without `routerLink` or `href` the entry stays a `<button>`.
+     */
+    routerLink?: string | unknown[];
+    /** Render as a plain `<a href>` (external or non-router destinations). */
+    href?: string;
 }
 /** A category (level 1) that groups {@link StrctMenuLink} items (level 2). */
 interface StrctMenuSection {
@@ -2375,7 +2493,15 @@ declare class StrctSectionMenu {
     private readonly overrides;
     protected isOpen(sec: StrctMenuSection): boolean;
     protected toggle(sec: StrctMenuSection): void;
-    protected pick(item: StrctMenuLink): void;
+    /** Enabled entry with a router destination → renders as `<a routerLink>`. */
+    protected isRouted(item: StrctMenuLink): boolean;
+    /**
+     * Active state of a router-link entry: an explicit `activeId` is
+     * authoritative; without one the router's own active state drives it — the
+     * rail's contract.
+     */
+    protected isActive(item: StrctMenuLink, routerActive: boolean): boolean;
+    protected pick(item: StrctMenuLink, event?: MouseEvent): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctSectionMenu, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctSectionMenu, "strct-section-menu", never, { "sections": { "alias": "sections"; "required": true; "isSignal": true; }; "activeId": { "alias": "activeId"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "showIcons": { "alias": "showIcons"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "activeId": "activeIdChange"; "select": "select"; }, never, never, true, never>;
 }
@@ -8280,5 +8406,79 @@ declare class StrctMarkdown {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctMarkdown, "strct-markdown", never, { "source": { "alias": "source"; "required": false; "isSignal": true; }; "tree": { "alias": "tree"; "required": false; "isSignal": true; }; "streaming": { "alias": "streaming"; "required": false; "isSignal": true; }; "headingOffset": { "alias": "headingOffset"; "required": false; "isSignal": true; }; "linkPolicy": { "alias": "linkPolicy"; "required": false; "isSignal": true; }; "tokens": { "alias": "tokens"; "required": false; "isSignal": true; }; }, { "navigate": "navigate"; }, ["tokenDefs"], never, true, never>;
 }
 
-export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_MD_LIMITS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAlertActions, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatMessageActions, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDetailPaneActions, StrctDetailPaneMeta, StrctDetailPaneTitle, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownGroup, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownItemDescription, StrctDropdownItemIcon, StrctDropdownItemLabel, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFieldValue, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctGroupHeaderDef, StrctHeader, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMarkdown, StrctMarkdownToken, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowDockItem, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, parseInlines, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctClassifyHref, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctParseMarkdown, strctQrMatrix, strctValidationIcon, strctValidationTone, unlockBodyScroll };
-export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartColor, StrctChartCurve, StrctChartSeries, StrctChartSlot, StrctChartStatus, StrctChartSummaryInfo, StrctChartThreshold, StrctChartType, StrctChatAuthor, StrctColumn, StrctCommandItem, StrctConfirmOptions, StrctConfirmTone, StrctDatagridColumn, StrctDatagridColumnState, StrctDatagridFilters, StrctDatagridGroup, StrctDatagridLabels, StrctDatagridLazyState, StrctDescAlign, StrctDescItem, StrctDiffRow, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFilterChip, StrctFlowColumn, StrctFlowDirection, StrctFlowEdge, StrctFlowNode, StrctFlowOrientation, StrctHeatmapCell, StrctHeatmapSummaryInfo, StrctHotkey, StrctIconBadge, StrctIconName, StrctKnobStatus, StrctLegendItem, StrctLiveLabels, StrctLiveState, StrctLogLine, StrctMdAlign, StrctMdBlock, StrctMdInline, StrctMdToken, StrctMdTokenizer, StrctMediaState, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuPlacement, StrctMenuSection, StrctMenubarItem, StrctMetricStatus, StrctModalSize, StrctMode, StrctNotification, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProgressSegment, StrctProgressStatus, StrctQrEcc, StrctRailItem, StrctRailStatus, StrctReorderEvent, StrctReorderMoveEvent, StrctRow, StrctRowId, StrctSegmentedOption, StrctSegmentedSize, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctStatus, StrctStatusDotSize, StrctStepPhase, StrctStepState, StrctStepsLabels, StrctTagStatus, StrctThresholds, StrctTimeRange, StrctTimeRangePreset, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTourStep, StrctTransferItem, StrctTreeDropEvent, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn, StrctValidationState, StrctValidationStatus, StrctWindowBounds, StrctWindowLabels, StrctWindowOutsidePointer, StrctWizardDefaults };
+/** One product (or platform) a person may switch to. */
+interface StrctProductItem {
+    /** Stable identity, matched against `current`. */
+    id: string;
+    /** The product's full name — the menu row's label, and what a reader hears. */
+    name: string;
+    /** What the chip shows; the full name when omitted. */
+    label?: string;
+    /**
+     * What the chip shows below `shortLabelWidth`. An icon alone does not say
+     * where you are — "Site Recovery" and "Backup" icons are not self-evident —
+     * while a short word fits. The full name stays in the accessible name.
+     */
+    shortLabel?: string;
+    /** Icon name from the icon set. */
+    icon?: string;
+    /** One line of health under the name ("2 VMs past RPO"). */
+    description?: string;
+    /** The dot beside that line. */
+    status?: StrctStatus;
+    /** The product's own colour (a token or value): the icons take it. */
+    tone?: string;
+    /** Render the row as a real router link (middle-click, a new tab). */
+    routerLink?: string | unknown[];
+    /** Render the row as a plain link. */
+    href?: string;
+    disabled?: boolean;
+}
+/**
+ * The product switcher every multi-product console grows: a chip beside the
+ * logo saying where you are, opening the products you may use with a line of
+ * health each, and the platform after a divider.
+ *
+ *   <strct-product-switcher
+ *     [items]="products" [(current)]="productId" [footerItems]="[admin]"
+ *     (opened)="loadHealth()" (select)="go($event)" />
+ *
+ * A person offered one product sees a plain chip, not a menu of one.
+ */
+declare class StrctProductSwitcher {
+    /** The products this person may switch to. */
+    readonly items: _angular_core.InputSignal<readonly StrctProductItem[]>;
+    /** Entries after a divider — the shared platform, administration. */
+    readonly footerItems: _angular_core.InputSignal<readonly StrctProductItem[]>;
+    /** Which product you are in, two-way. */
+    readonly current: _angular_core.ModelSignal<string | null>;
+    /**
+     * What the chip is for, after the product's name:
+     * "HyperStruct Backup — switch product".
+     */
+    readonly switchLabel: _angular_core.InputSignal<string>;
+    /**
+     * Below this width (px) the chip shows each item's `shortLabel` instead of
+     * its label. The full name stays in the accessible name.
+     */
+    readonly shortLabelWidth: _angular_core.InputSignal<number>;
+    /** The menu has opened — read the health lines now, not before. */
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    /** A product was chosen (plain activation only, as the rail does). */
+    readonly select: _angular_core.OutputEmitterRef<StrctProductItem>;
+    private readonly menu;
+    private readonly narrow;
+    private wasOpen;
+    /** With one product and nowhere else to go, there is no menu to open. */
+    protected readonly hasMenu: _angular_core.Signal<boolean>;
+    protected readonly currentItem: _angular_core.Signal<StrctProductItem>;
+    protected readonly chipText: _angular_core.Signal<string>;
+    protected readonly chipAriaLabel: _angular_core.Signal<string>;
+    constructor();
+    protected pick(item: StrctProductItem, event?: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<StrctProductSwitcher, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<StrctProductSwitcher, "strct-product-switcher", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "footerItems": { "alias": "footerItems"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; "switchLabel": { "alias": "switchLabel"; "required": false; "isSignal": true; }; "shortLabelWidth": { "alias": "shortLabelWidth"; "required": false; "isSignal": true; }; }, { "current": "currentChange"; "opened": "opened"; "select": "select"; }, never, never, true, never>;
+}
+
+export { FOCUSABLE_SELECTOR, STRCT_DP_DOW, STRCT_DP_DOW_FULL, STRCT_DP_MONTHS, STRCT_ICONS, STRCT_ICON_GROUPS, STRCT_ICON_NAMES, STRCT_MASKS, STRCT_MD_LIMITS, STRCT_NOTIFICATION_HISTORY_LIMIT, STRCT_PALETTES, STRCT_RAW_ICONS, STRCT_TIME_RANGE_PRESETS, STRCT_WIZARD_DEFAULTS, StrctAccordion, StrctAccordionPanel, StrctAlert, StrctAlertActions, StrctAnnouncer, StrctAvatar, StrctBadge, StrctBreadcrumb, StrctBreadcrumbItem, StrctButton, StrctButtonGroup, StrctBytesPipe, StrctCard, StrctCardBlock, StrctCardFooter, StrctCardHeader, StrctCardHeaderActions, StrctCardHeaderLeading, StrctCardHeaderMeta, StrctCardHeaderNote, StrctCascadeColumn, StrctCascadeHost, StrctCascadeSelect, StrctCellDef, StrctCellStatus, StrctChange, StrctChart, StrctChatAttachment, StrctChatComposer, StrctChatMessage, StrctChatMessageActions, StrctChatThread, StrctCheckbox, StrctChips, StrctCode, StrctCodeInline, StrctColorPicker, StrctCombobox, StrctCommandPalette, StrctConfirmOutlet, StrctConfirmService, StrctContextMenu, StrctContextMenuTrigger, StrctControlDescription, StrctCopy, StrctDatagrid, StrctDatagridActionBar, StrctDatagridActionBarCaption, StrctDatepicker, StrctDatetimePicker, StrctDesc, StrctDescriptionList, StrctDetailPaneActions, StrctDetailPaneMeta, StrctDetailPaneTitle, StrctDiff, StrctDivider, StrctDonut, StrctDrawer, StrctDrawerFooter, StrctDropdown, StrctDropdownDivider, StrctDropdownGroup, StrctDropdownItem, StrctDropdownItemAction, StrctDropdownItemDescription, StrctDropdownItemIcon, StrctDropdownItemLabel, StrctDropdownTrigger, StrctDurationPipe, StrctEmptyState, StrctField, StrctFieldGroup, StrctFieldHint, StrctFieldPrefix, StrctFieldSuffix, StrctFieldValue, StrctFile, StrctFilterBar, StrctFlow, StrctFlowNodeTemplate, StrctFooter, StrctGauge, StrctGroupHeaderDef, StrctHeader, StrctHeaderAction, StrctHeatmap, StrctHero, StrctHotkeysHelp, StrctHotkeysService, StrctIcon, StrctInlineEdit, StrctInput, StrctInputMask, StrctInputOtp, StrctKbd, StrctKnob, StrctLegend, StrctList, StrctListItem, StrctListItemDescription, StrctListItemLeading, StrctListItemMeta, StrctListItemTrailing, StrctLiveIndicator, StrctLogViewer, StrctLogin, StrctMarkdown, StrctMarkdownToken, StrctMediaFrame, StrctMenuPanel, StrctMenuService, StrctMenubar, StrctMetricTile, StrctModal, StrctModalContent, StrctNav, StrctNavItem, StrctNotificationCenter, StrctNumber, StrctOverlay, StrctPageHeader, StrctPageHeaderActions, StrctPageHeaderCrumbs, StrctPageHeaderTitleMeta, StrctPagination, StrctPassword, StrctPopover, StrctPopoverTrigger, StrctProductSwitcher, StrctProgress, StrctQr, StrctRadio, StrctRadioGroup, StrctRail, StrctRange, StrctRatePipe, StrctRating, StrctReorder, StrctReorderGroup, StrctReorderHandle, StrctReorderItem, StrctResizeHandle, StrctRowDetailDef, StrctSearchbox, StrctSectionHeader, StrctSectionHeaderActions, StrctSectionHeaderMeta, StrctSectionMenu, StrctSegmented, StrctSelect, StrctShell, StrctShellService, StrctSiPipe, StrctSignpost, StrctSignpostTrigger, StrctSkeleton, StrctSparkline, StrctSpeedDial, StrctSpinner, StrctSplitButton, StrctSplitter, StrctStack, StrctStackItem, StrctStatusDot, StrctStep, StrctStepAction, StrctSteps, StrctSubmenu, StrctTab, StrctTable, StrctTabs, StrctTag, StrctTagLeading, StrctThemeService, StrctThemeSwitcher, StrctTimeRangePicker, StrctTimeline, StrctTimelineItem, StrctToastOutlet, StrctToastService, StrctToggle, StrctToolbar, StrctToolbarCaption, StrctToolbarSpacer, StrctTooltip, StrctTour, StrctTransfer, StrctTree, StrctTreeNode, StrctTreeSelect, StrctVerticalNav, StrctWatermark, StrctWindow, StrctWindowDock, StrctWindowDockItem, StrctWindowService, StrctWizard, StrctWizardAside, __qrInternals, focusFirstIn, keepTabInside, lockBodyScroll, parseAnsi, parseInlines, provideStrctWizardDefaults, registerStrctIcon, restoreFocus, saveFocusedElement, strctCheckHostDisplay, strctCheckHostInputs, strctClassifyHref, strctComputeDiff, strctDpPad, strctFormatBytes, strctFormatDuration, strctFormatRate, strctFormatSi, strctParseMarkdown, strctQrMatrix, strctValidationIcon, strctValidationTone, unlockBodyScroll };
+export type { StrctAlertType, StrctAvatarSize, StrctAvatarStatus, StrctBadgeStatus, StrctButtonSize, StrctButtonVariant, StrctCascadeOption, StrctCellContext, StrctChartAnnotation, StrctChartColor, StrctChartCurve, StrctChartSeries, StrctChartSlot, StrctChartStatus, StrctChartSummaryInfo, StrctChartThreshold, StrctChartType, StrctChatAuthor, StrctColumn, StrctCommandItem, StrctConfirmOptions, StrctConfirmTone, StrctDatagridColumn, StrctDatagridColumnState, StrctDatagridFilters, StrctDatagridGroup, StrctDatagridLabels, StrctDatagridLazyState, StrctDescAlign, StrctDescItem, StrctDiffRow, StrctDonutSegment, StrctDrawerSide, StrctDrawerSize, StrctEmptyVariant, StrctFilterChip, StrctFlowColumn, StrctFlowDirection, StrctFlowEdge, StrctFlowNode, StrctFlowOrientation, StrctHeaderActionConfig, StrctHeatmapCell, StrctHeatmapSummaryInfo, StrctHotkey, StrctIconBadge, StrctIconName, StrctKnobStatus, StrctLegendItem, StrctLiveLabels, StrctLiveState, StrctLogLine, StrctMdAlign, StrctMdBlock, StrctMdInline, StrctMdToken, StrctMdTokenizer, StrctMediaState, StrctMenuItem, StrctMenuLink, StrctMenuOpenOptions, StrctMenuPlacement, StrctMenuSection, StrctMenubarItem, StrctMetricStatus, StrctModalSize, StrctMode, StrctNotification, StrctOption, StrctOverlayPlacement, StrctPalette, StrctPaletteInfo, StrctProductItem, StrctProgressSegment, StrctProgressStatus, StrctQrEcc, StrctRailItem, StrctRailStatus, StrctReorderEvent, StrctReorderMoveEvent, StrctRow, StrctRowId, StrctSegmentedOption, StrctSegmentedSize, StrctSignpostPosition, StrctSpeedDialDirection, StrctSpinnerSize, StrctStatus, StrctStatusDotSize, StrctStepPhase, StrctStepState, StrctStepsLabels, StrctTagStatus, StrctThresholds, StrctTimeRange, StrctTimeRangePreset, StrctTimelineState, StrctToast, StrctToastOptions, StrctToastType, StrctTooltipPosition, StrctTourStep, StrctTransferItem, StrctTreeDropEvent, StrctTreeMenuEvent, StrctTreeNodeData, StrctTreeNodeMenuFn, StrctValidationState, StrctValidationStatus, StrctWindowBounds, StrctWindowLabels, StrctWindowOutsidePointer, StrctWizardDefaults };