@wildmason/aegis 2.0.0 → 2.2.0

package/dist/fesm2022/wildmason-aegis.mjs

@@ -1,6 +1,6 @@
 import { CdkTrapFocus } from '@angular/cdk/a11y';
 import * as i0 from '@angular/core';
-import { input, output, HostListener, ChangeDetectionStrategy, Component, model, signal, computed, inject, ElementRef, Renderer2, ChangeDetectorRef, viewChild, effect, ViewEncapsulation, Input, Directive, contentChildren, forwardRef, ViewChild, Injectable, Injector, DestroyRef, TemplateRef, contentChild } from '@angular/core';
+import { input, output, HostListener, ChangeDetectionStrategy, Component, model, signal, computed, inject, ElementRef, Renderer2, ChangeDetectorRef, viewChild, effect, ViewEncapsulation, Input, Directive, contentChildren, booleanAttribute, forwardRef, HostAttributeToken, linkedSignal, ViewChild, Injectable, Injector, DestroyRef, TemplateRef, contentChild } from '@angular/core';
 import { CdkConnectedOverlay, CdkOverlayOrigin, createFlexibleConnectedPositionStrategy, createOverlayRef, createRepositionScrollStrategy } from '@angular/cdk/overlay';
 import { NgTemplateOutlet } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -14,7 +14,16 @@ import { ComponentPortal } from '@angular/cdk/portal';
  *
  * Owns the fixed backdrop, centering, keyboard/pointer dismissal AND the focus trap,
  * so individual modal components don't need to repeat this logic or add their own
- * HostListeners.
+ * HostListeners. The consumer supplies the whole panel: its surface, size, header
+ * and close control.
+ *
+ * ## wm-modal or wm-dialog
+ *
+ * Reach for `wm-dialog` first. It is a complete dialog — header, title wired to
+ * `aria-labelledby`, close button, padded scrolling body — and it is not limited to
+ * its `size` presets: `--wm-dialog-width` sets any width (Helm uses up to 960px).
+ * Use `wm-modal` when that chrome is wrong for the surface: a two-pane browser, a
+ * command palette, a panel with its own toolbar or its own scroll regions.
  *
  * ## Focus is trapped here, and it has to be
  *
@@ -33,8 +42,9 @@ import { ComponentPortal } from '@angular/cdk/portal';
  *
  * Usage:
  *   <wm-modal [visible]="visible()" (dismiss)="close()">
- *     <div class="p-6 wm-r-md w-80" style="background: var(--wm-bg-raised)">
- *       <!-- modal panel content -->
+ *     <div class="panel" role="dialog" aria-modal="true" aria-labelledby="panel-title">
+ *       <h2 id="panel-title">Browse snapshot</h2>
+ *       <!-- modal panel content, including a visible close control -->
  *     </div>
  *   </wm-modal>
  *
@@ -43,6 +53,11 @@ import { ComponentPortal } from '@angular/cdk/portal';
  *
  * The projected content is wrapped in a stop-propagation container so clicks inside
  * the panel do not bubble up to the backdrop and trigger a dismiss.
+ *
+ * The backdrop's layout lives in this component's stylesheet, so it needs no utility
+ * framework in the consumer. Its colour stays an inline
+ * `background: var(--wm-modal-backdrop)`, because consumers detect an open modal
+ * with `[style*="--wm-modal-backdrop"]`.
  */
 class WmModal {
     /** Whether the modal is currently open. */
@@ -51,8 +66,8 @@ class WmModal {
     dismiss = output();
     /**
      * Vertical alignment of the panel within the backdrop.
-     * - 'center' (default): panel is vertically centered (items-center)
-     * - 'top': panel appears near the top (items-start pt-20), for search/command overlays
+     * - 'center' (default): panel is centered on both axes
+     * - 'top': panel sits 5rem below the top edge, for search/command overlays
      */
     align = input('center', ...(ngDevMode ? [{ debugName: "align" }] : /* istanbul ignore next */ []));
     onEscape() {
@@ -60,11 +75,11 @@ class WmModal {
             this.dismiss.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WmModal, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: WmModal, isStandalone: true, selector: "wm-modal", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (visible()) {\n  <div [class]=\"align() === 'top'\n      ? 'fixed inset-0 flex items-start justify-center pt-20 z-50'\n      : 'fixed inset-0 flex items-center justify-center z-50'\"\n       style=\"background: var(--wm-modal-backdrop)\"\n       (click)=\"dismiss.emit()\">\n    <!-- The trap must sit on an element this template owns, inside this `@if`, so it\n         has a parentNode by the time CdkTrapFocus runs ngAfterContentInit. A consumer\n         cannot achieve that on projected content \u2014 see the class doc. -->\n    <div (click)=\"$event.stopPropagation()\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <ng-content />\n    </div>\n  </div>\n}\n", dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: WmModal, isStandalone: true, selector: "wm-modal", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: true, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dismiss: "dismiss" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (visible()) {\n  <!-- The inline background is a contract, not a leftover: consumers detect an open\n       modal with `[style*=\"--wm-modal-backdrop\"]`, so it must stay on this element. -->\n  <div class=\"wm-modal-backdrop\"\n       [class.wm-modal-backdrop--top]=\"align() === 'top'\"\n       style=\"background: var(--wm-modal-backdrop)\"\n       (click)=\"dismiss.emit()\">\n    <!-- The trap must sit on an element this template owns, inside this `@if`, so it\n         has a parentNode by the time CdkTrapFocus runs ngAfterContentInit. A consumer\n         cannot achieve that on projected content \u2014 see the class doc. -->\n    <div (click)=\"$event.stopPropagation()\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: [".wm-modal-backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center}.wm-modal-backdrop--top{align-items:flex-start;padding-top:5rem}\n"], dependencies: [{ kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WmModal, decorators: [{
             type: Component,
-            args: [{ selector: 'wm-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkTrapFocus], template: "@if (visible()) {\n  <div [class]=\"align() === 'top'\n      ? 'fixed inset-0 flex items-start justify-center pt-20 z-50'\n      : 'fixed inset-0 flex items-center justify-center z-50'\"\n       style=\"background: var(--wm-modal-backdrop)\"\n       (click)=\"dismiss.emit()\">\n    <!-- The trap must sit on an element this template owns, inside this `@if`, so it\n         has a parentNode by the time CdkTrapFocus runs ngAfterContentInit. A consumer\n         cannot achieve that on projected content \u2014 see the class doc. -->\n    <div (click)=\"$event.stopPropagation()\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <ng-content />\n    </div>\n  </div>\n}\n" }]
+            args: [{ selector: 'wm-modal', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CdkTrapFocus], template: "@if (visible()) {\n  <!-- The inline background is a contract, not a leftover: consumers detect an open\n       modal with `[style*=\"--wm-modal-backdrop\"]`, so it must stay on this element. -->\n  <div class=\"wm-modal-backdrop\"\n       [class.wm-modal-backdrop--top]=\"align() === 'top'\"\n       style=\"background: var(--wm-modal-backdrop)\"\n       (click)=\"dismiss.emit()\">\n    <!-- The trap must sit on an element this template owns, inside this `@if`, so it\n         has a parentNode by the time CdkTrapFocus runs ngAfterContentInit. A consumer\n         cannot achieve that on projected content \u2014 see the class doc. -->\n    <div (click)=\"$event.stopPropagation()\" cdkTrapFocus [cdkTrapFocusAutoCapture]=\"true\">\n      <ng-content />\n    </div>\n  </div>\n}\n", styles: [".wm-modal-backdrop{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center}.wm-modal-backdrop--top{align-items:flex-start;padding-top:5rem}\n"] }]
         }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: true }] }], dismiss: [{ type: i0.Output, args: ["dismiss"] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], onEscape: [{
                 type: HostListener,
                 args: ['document:keydown.escape']
@@ -88,21 +103,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  *     </div>
  *   </wm-dialog>
  *
+ * Width:
+ *  `size` picks a preset (sm 360px, md 480px, lg 640px). For any other width, set the
+ *  `--wm-dialog-width` custom property on the host; it overrides every preset:
+ *    <wm-dialog [(isOpen)]="open" title="Line history" style="--wm-dialog-width: 800px">
+ *  Fluid values work too, e.g. `min(90vw, 48rem)`. Whatever the width, the panel is
+ *  capped at `calc(100vw - 2rem)` wide and `calc(100dvh - 4rem)` tall.
+ *
+ *  When the dialog chrome itself is wrong for the surface (a two-pane browser, a
+ *  command palette, a panel with its own toolbar), use `wm-modal` with your own panel.
+ *
  * Accessibility:
  *  - role="dialog" + aria-modal="true" on the panel
  *  - aria-labelledby wired to the title element (when title is set)
- *  - Focus is trapped inside the panel when open (cdkTrapFocus)
+ *  - Focus is trapped inside the panel when open (cdkTrapFocus). Do not add a
+ *    cdkTrapFocus of your own inside the body; it would nest a second trap.
  *  - Escape key closes the dialog
  *  - Clicking the backdrop closes the dialog
- *  - On close, focus returns to the element that opened the dialog
- *    (browser default when focus trap is released)
+ *  - On close, focus returns to the element that had it when the dialog opened
+ *    (cdkTrapFocusAutoCapture records that element and refocuses it when the
+ *    trap is destroyed)
  */
 class WmDialog {
     /** Two-way binding for open/closed state. */
     isOpen = model(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
     /** Dialog heading text. When set, aria-labelledby is applied automatically. */
     title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
-    /** Panel width preset. sm = 360px, md = 480px (default), lg = 640px. */
+    /**
+     * Panel width preset. sm = 360px, md = 480px (default), lg = 640px.
+     * `--wm-dialog-width` on the host overrides every preset.
+     */
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
     close() { this.isOpen.set(false); }
     onEscape() {
@@ -302,8 +332,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  * backdrop, focus-trapping, and ARIA attribute management.
  *
  * Slots:
- *  - [trigger]  — the anchor element (button, icon, etc.)
- *  - [content]  — the panel body (menu items, form, etc.)
+ *  - [trigger]  — the anchor element. Put the attribute on the focusable
+ *                 element itself, never on a wrapper or on a component host
+ *                 such as <wm-button>: the ARIA below goes to the element
+ *                 that carries it. For an Aegis-styled trigger, use
+ *                 `<button wmButton trigger>`. Nothing reads
+ *                 `data-popover-trigger`
+ *  - [content]  — the panel body (menu items, form, etc.). The panel carries
+ *                 the role, so the body takes no role of its own
  *
  * Usage:
  * ```html
@@ -316,16 +352,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  *   align="end"
  * >
  *   <button trigger (click)="open.set(!open())">Options</button>
- *   <div content role="menu">
+ *   <div content>
  *     <button role="menuitem" (click)="doThing()">Do thing</button>
  *   </div>
  * </wm-popover>
  * ```
  *
  * Accessibility:
- *  - Trigger element automatically receives aria-haspopup, aria-expanded, aria-controls
- *  - Panel receives the configured role and optional accessible name
+ *  - Trigger element automatically receives aria-haspopup (from `hasPopup`),
+ *    aria-expanded and aria-controls, plus role="button" when it has no role.
+ *    They are rewritten on every change to `isOpen` or `hasPopup`, so the
+ *    consumer does not bind them
+ *  - Panel receives the configured role and optional accessible name. The
+ *    role goes on the panel only: the host element, which wraps the trigger,
+ *    never carries it, even when a consumer writes `role` as a static attribute
+ *  - A `dialog` or `alertdialog` panel receives aria-modal="true" while it
+ *    captures focus (see `trapFocusAutoCapture`)
  *  - Focus is trapped inside the open panel (cdkTrapFocus)
+ *  - A modal panel whose content has nothing tabbable (text only, or a lone
+ *    disabled button) takes focus itself (tabindex="-1") and keeps it on Tab,
+ *    so focus is never left on the trigger that aria-modal makes inert
  *  - Escape key closes the panel
  *  - Backdrop click closes the panel
  *
@@ -378,6 +424,30 @@ class WmPopover {
      * auto-restore.
      */
     trapFocusAutoCapture = input(true, ...(ngDevMode ? [{ debugName: "trapFocusAutoCapture" }] : /* istanbul ignore next */ []));
+    /**
+     * `"true"` for a `dialog` or `alertdialog` panel that captures focus, else
+     * no attribute.
+     *
+     * The panel opens over a click-catching backdrop, and a modal panel keeps
+     * focus inside itself (see `onAttach` and `onPanelKeydown`), so nothing
+     * outside it can be reached until it closes. A dialog that is modal must say
+     * so, or a screen reader keeps reading the page behind it. `aria-modal` is
+     * defined for those two roles only, so a menu or listbox panel gets no
+     * attribute. With `trapFocusAutoCapture` off, focus is meant to stay on the
+     * trigger outside the panel, and `aria-modal` would hide that focused
+     * trigger from a screen reader, so the panel is not declared modal.
+     */
+    ariaModal = computed(() => {
+        const role = this.role();
+        const modalRole = role === 'dialog' || role === 'alertdialog';
+        return modalRole && this.trapFocusAutoCapture() ? 'true' : null;
+    }, ...(ngDevMode ? [{ debugName: "ariaModal" }] : /* istanbul ignore next */ []));
+    /**
+     * `-1` on a modal panel, so the panel itself can take focus when its content
+     * has nothing tabbable. A non-modal panel stays unfocusable: a click on it
+     * must not pull focus off a typeahead trigger input.
+     */
+    panelTabIndex = computed(() => (this.ariaModal() ? -1 : null), ...(ngDevMode ? [{ debugName: "panelTabIndex" }] : /* istanbul ignore next */ []));
     /** Emitted when the panel should close (backdrop click, Escape key, CDK detach). */
     closed = output();
     renderer = inject(Renderer2);
@@ -385,6 +455,7 @@ class WmPopover {
     cdr = inject(ChangeDetectorRef);
     panelId = 'wm-popover-' + Math.random().toString(36).substring(2, 9);
     panel = viewChild('panel', ...(ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []));
+    trap = viewChild(CdkTrapFocus, ...(ngDevMode ? [{ debugName: "trap" }] : /* istanbul ignore next */ []));
     constructor() {
         effect(() => {
             const open = this.isOpen();
@@ -408,14 +479,26 @@ class WmPopover {
             { originX: x, originY: 'top', overlayX: x, overlayY: 'bottom', offsetY: -4 },
         ];
     }
+    /**
+     * Runs after the focus trap's own capture, which CDK defers to the next
+     * render. A `[wmAutoFocus]` element takes focus first. Otherwise a modal
+     * panel that the trap left without focus takes focus itself. The trap finds
+     * nothing to focus when the content has no tabbable element (text only, or a
+     * lone disabled button), and it then leaves focus on the trigger, which
+     * `aria-modal` has just made inert to a screen reader.
+     */
     onAttach() {
         setTimeout(() => {
-            const panelEl = this.panel();
+            const panelEl = this.panel()?.nativeElement;
             if (!panelEl)
                 return;
-            const el = panelEl.nativeElement.querySelector('[wmAutoFocus]');
-            if (!el)
+            const el = panelEl.querySelector('[wmAutoFocus]');
+            if (!el) {
+                if (this.ariaModal() && !panelEl.contains(panelEl.ownerDocument.activeElement)) {
+                    panelEl.focus();
+                }
                 return;
+            }
             el.focus();
             if (typeof el.showPicker === 'function') {
                 const type = el.type;
@@ -428,16 +511,44 @@ class WmPopover {
             }
         }, 10);
     }
+    /**
+     * Tab and Shift+Tab while focus is on a modal panel itself, not on a control
+     * inside it. Focus moves to the first or the last tabbable control. With none,
+     * focus stays on the panel. The trap's own boundary anchors cannot do this:
+     * with nothing tabbable inside, the anchor keeps focus, and the next Tab
+     * leaves the overlay for the page behind the backdrop.
+     */
+    onPanelKeydown(event) {
+        if (event.key !== 'Tab' || !this.ariaModal())
+            return;
+        if (event.target !== this.panel()?.nativeElement)
+            return;
+        event.preventDefault();
+        const focusTrap = this.trap()?.focusTrap;
+        if (event.shiftKey) {
+            focusTrap?.focusLastTabbableElement();
+        }
+        else {
+            focusTrap?.focusFirstTabbableElement();
+        }
+    }
     onClose() {
         this.closed.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WmPopover, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.23", type: WmPopover, isStandalone: true, selector: "wm-popover", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hasPopup: { classPropertyName: "hasPopup", publicName: "hasPopup", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, trapFocusAutoCapture: { classPropertyName: "trapFocusAutoCapture", publicName: "trapFocusAutoCapture", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Trigger anchor -->\n<div cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"wm-popover-trigger\">\n  <ng-content select=\"[trigger]\"></ng-content>\n</div>\n\n<!-- Floating panel -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"onClose()\"\n  (detach)=\"onClose()\"\n  (attach)=\"onAttach()\"\n>\n  <div\n    #panel\n    [id]=\"panelId\"\n    [attr.role]=\"role()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    class=\"wm-popover-panel\"\n    [style.width]=\"width() === 'auto' ? 'auto' : width() + 'px'\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture()\"\n    (keydown.escape)=\"onClose()\"\n  >\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</ng-template>\n", styles: ["wm-popover{display:inline-flex;align-items:center}.wm-popover-trigger{display:block;width:100%}.wm-popover-panel{background:var(--wm-bg-raised);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #00000024;overflow:hidden;outline:none}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.23", type: WmPopover, isStandalone: true, selector: "wm-popover", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, role: { classPropertyName: "role", publicName: "role", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, hasPopup: { classPropertyName: "hasPopup", publicName: "hasPopup", isSignal: true, isRequired: false, transformFunction: null }, align: { classPropertyName: "align", publicName: "align", isSignal: true, isRequired: false, transformFunction: null }, trapFocusAutoCapture: { classPropertyName: "trapFocusAutoCapture", publicName: "trapFocusAutoCapture", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, host: { properties: { "attr.role": "null" } }, viewQueries: [{ propertyName: "panel", first: true, predicate: ["panel"], descendants: true, isSignal: true }, { propertyName: "trap", first: true, predicate: CdkTrapFocus, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Trigger anchor -->\n<div cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"wm-popover-trigger\">\n  <ng-content select=\"[trigger]\"></ng-content>\n</div>\n\n<!-- Floating panel -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"onClose()\"\n  (detach)=\"onClose()\"\n  (attach)=\"onAttach()\"\n>\n  <div\n    #panel\n    [id]=\"panelId\"\n    [attr.role]=\"role()\"\n    [attr.aria-modal]=\"ariaModal()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.tabindex]=\"panelTabIndex()\"\n    class=\"wm-popover-panel\"\n    [style.width]=\"width() === 'auto' ? 'auto' : width() + 'px'\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture()\"\n    (keydown.escape)=\"onClose()\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</ng-template>\n", styles: ["wm-popover{display:inline-flex;align-items:center}.wm-popover-trigger{display:block;width:100%}.wm-popover-panel{background:var(--wm-bg-raised);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #00000024;overflow:hidden;outline:none}\n"], dependencies: [{ kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation", "cdkConnectedOverlayUsePopover", "cdkConnectedOverlayMatchWidth", "cdkConnectedOverlay"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WmPopover, decorators: [{
             type: Component,
-            args: [{ selector: 'wm-popover', imports: [CdkConnectedOverlay, CdkOverlayOrigin, CdkTrapFocus], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<!-- Trigger anchor -->\n<div cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"wm-popover-trigger\">\n  <ng-content select=\"[trigger]\"></ng-content>\n</div>\n\n<!-- Floating panel -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"onClose()\"\n  (detach)=\"onClose()\"\n  (attach)=\"onAttach()\"\n>\n  <div\n    #panel\n    [id]=\"panelId\"\n    [attr.role]=\"role()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    class=\"wm-popover-panel\"\n    [style.width]=\"width() === 'auto' ? 'auto' : width() + 'px'\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture()\"\n    (keydown.escape)=\"onClose()\"\n  >\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</ng-template>\n", styles: ["wm-popover{display:inline-flex;align-items:center}.wm-popover-trigger{display:block;width:100%}.wm-popover-panel{background:var(--wm-bg-raised);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #00000024;overflow:hidden;outline:none}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPopup", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], trapFocusAutoCapture: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocusAutoCapture", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }] } });
+            args: [{ selector: 'wm-popover', imports: [CdkConnectedOverlay, CdkOverlayOrigin, CdkTrapFocus], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        // A consumer writes `role="dialog"` as a plain attribute, and Angular
+                        // copies a static attribute onto the host element as well as into the
+                        // `role` input. The host wraps only the trigger, so that copy would put
+                        // the trigger inside a second, unnamed dialog, or inside a menu that owns
+                        // no menuitem. The role belongs to the panel alone.
+                        '[attr.role]': 'null',
+                    }, template: "<!-- Trigger anchor -->\n<div cdkOverlayOrigin #origin=\"cdkOverlayOrigin\" class=\"wm-popover-trigger\">\n  <ng-content select=\"[trigger]\"></ng-content>\n</div>\n\n<!-- Floating panel -->\n<ng-template\n  cdkConnectedOverlay\n  [cdkConnectedOverlayOrigin]=\"origin\"\n  [cdkConnectedOverlayOpen]=\"isOpen()\"\n  [cdkConnectedOverlayPositions]=\"positions\"\n  [cdkConnectedOverlayScrollStrategy]=\"scrollStrategy\"\n  [cdkConnectedOverlayHasBackdrop]=\"true\"\n  cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\n  (backdropClick)=\"onClose()\"\n  (detach)=\"onClose()\"\n  (attach)=\"onAttach()\"\n>\n  <div\n    #panel\n    [id]=\"panelId\"\n    [attr.role]=\"role()\"\n    [attr.aria-modal]=\"ariaModal()\"\n    [attr.aria-label]=\"ariaLabel()\"\n    [attr.tabindex]=\"panelTabIndex()\"\n    class=\"wm-popover-panel\"\n    [style.width]=\"width() === 'auto' ? 'auto' : width() + 'px'\"\n    cdkTrapFocus\n    [cdkTrapFocusAutoCapture]=\"trapFocusAutoCapture()\"\n    (keydown.escape)=\"onClose()\"\n    (keydown)=\"onPanelKeydown($event)\"\n  >\n    <ng-content select=\"[content]\"></ng-content>\n  </div>\n</ng-template>\n", styles: ["wm-popover{display:inline-flex;align-items:center}.wm-popover-trigger{display:block;width:100%}.wm-popover-panel{background:var(--wm-bg-raised);border:1px solid var(--wm-border);border-radius:var(--wm-radius-lg);box-shadow:0 4px 6px -1px #00000014,0 10px 20px -4px #00000024;overflow:hidden;outline:none}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], role: [{ type: i0.Input, args: [{ isSignal: true, alias: "role", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], hasPopup: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasPopup", required: false }] }], align: [{ type: i0.Input, args: [{ isSignal: true, alias: "align", required: false }] }], trapFocusAutoCapture: [{ type: i0.Input, args: [{ isSignal: true, alias: "trapFocusAutoCapture", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], panel: [{ type: i0.ViewChild, args: ['panel', { isSignal: true }] }], trap: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkTrapFocus), { isSignal: true }] }] } });
 
 /**
  * WmAutoFocus — focuses an element when it enters the DOM.
@@ -513,21 +624,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
                 }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], unavailable: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailable", required: false }] }], unavailableReason: [{ type: i0.Input, args: [{ isSignal: true, alias: "unavailableReason", required: false }] }], separatorBefore: [{ type: i0.Input, args: [{ isSignal: true, alias: "separatorBefore", required: false }] }], tmpl: [{ type: i0.ViewChild, args: ['tmpl', { isSignal: true }] }] } });
 
+/**
+ * WmTabs — an ARIA tablist of `<wm-tab>` children with a roving tab stop.
+ *
+ * Usage:
+ *   <wm-tabs [activeValue]="tool()" ariaLabel="Navigator tools" (select)="tool.set($event)">
+ *     <wm-tab value="graph">Graph</wm-tab>
+ *     <wm-tab value="search">Search</wm-tab>
+ *   </wm-tabs>
+ *
+ * Selection:
+ *  - `activeValue` names the selected tab. `null`, or a value no tab carries,
+ *    selects nothing: every tab reports aria-selected="false" and none paints
+ *    as active. Use it when the stage shows something that is not any tab's
+ *    panel, such as a document opened from a second tablist in the same row.
+ *  - The tablist always keeps exactly one tab stop: the focused tab while
+ *    focus is inside, otherwise the selected tab, otherwise the first tab that
+ *    is not unavailable (the first tab when every tab is unavailable).
+ *  - Arrow keys, Home and End move focus only. A tab is selected on click,
+ *    Enter or Space, which emit `(select)`; the consumer sets `activeValue`.
+ *
+ * Accessibility:
+ *  - `ariaLabel` or `ariaLabelledby` names the inner role="tablist". Name
+ *    every tablist that shares a surface with another one, or assistive
+ *    technology cannot tell them apart. `ariaLabelledby` wins when both are
+ *    set. An `aria-label` attribute on the `<wm-tabs>` host names nothing: the
+ *    host has no role, so the attribute never reaches the tablist.
+ *  - Each tab is `id="wm-tab-{value}"` with `aria-controls="wm-panel-{value}"`.
+ *    Give the panel that id and role="tabpanel". The ids are built from the
+ *    value alone, so values must be unique across every tablist on the page.
+ */
 class WmTabs {
+    /**
+     * Value of the selected tab. `null`, or a value that matches no tab, selects
+     * nothing; the tablist still keeps one tab stop (see the class comment).
+     */
     activeValue = input.required(...(ngDevMode ? [{ debugName: "activeValue" }] : /* istanbul ignore next */ []));
     variant = input('line', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    /** Accessible name for the tablist. Ignored while `ariaLabelledby` is set. */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Id of a visible element that names the tablist. Prefer it over
+     * `ariaLabel` when a visible caption exists, so the accessible name matches
+     * the visible text (WCAG 2.5.3, Label in Name).
+     */
+    ariaLabelledby = input(null, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
     select = output();
     tabs = contentChildren(WmTab, ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
-    focusedIndex = signal(null, ...(ngDevMode ? [{ debugName: "focusedIndex" }] : /* istanbul ignore next */ []));
-    selectTab(tab, index) {
-        this.focusedIndex.set(index);
+    /**
+     * Value of the tab that holds focus, or null while focus is outside the
+     * tablist. Keyed by value, not index, so a tab added or removed before it
+     * cannot move the stop onto a different tab or off the end of the list.
+     */
+    focusedValue = signal(null, ...(ngDevMode ? [{ debugName: "focusedValue" }] : /* istanbul ignore next */ []));
+    /** Index of the one tab that is in the page's Tab order. */
+    tabStop = computed(() => {
+        const tabs = this.tabs();
+        const focused = this.focusedValue();
+        const focusedIndex = focused === null ? -1 : tabs.findIndex(t => t.value() === focused);
+        if (focusedIndex >= 0)
+            return focusedIndex;
+        const active = this.activeValue();
+        const activeIndex = active === null ? -1 : tabs.findIndex(t => t.value() === active);
+        if (activeIndex >= 0)
+            return activeIndex;
+        const firstAvailable = tabs.findIndex(t => !t.unavailable());
+        return firstAvailable >= 0 ? firstAvailable : 0;
+    }, ...(ngDevMode ? [{ debugName: "tabStop" }] : /* istanbul ignore next */ []));
+    host = inject(ElementRef);
+    selectTab(tab) {
+        this.focusedValue.set(tab.value());
         if (!tab.unavailable())
             this.select.emit(tab.value());
     }
     onBlur() {
         setTimeout(() => {
-            if (!document.activeElement?.closest('.wm-tabs')) {
-                this.focusedIndex.set(null);
+            // This tablist only. Focus that moved to a second <wm-tabs> must still
+            // return this one's stop to its selected tab.
+            if (!this.host.nativeElement.contains(document.activeElement)) {
+                this.focusedValue.set(null);
             }
         }, 0);
     }
@@ -535,8 +710,7 @@ class WmTabs {
         const tabs = this.tabs();
         if (tabs.length === 0)
             return;
-        const activeIndex = tabs.findIndex(t => t.value() === this.activeValue());
-        const currentIndex = this.focusedIndex() ?? (activeIndex >= 0 ? activeIndex : 0);
+        const currentIndex = this.tabStop();
         let nextIndex = null;
         switch (event.key) {
             case 'ArrowRight':
@@ -556,19 +730,43 @@ class WmTabs {
         }
         if (nextIndex !== null) {
             event.preventDefault();
-            this.focusedIndex.set(nextIndex);
+            this.focusedValue.set(tabs[nextIndex].value());
             const btns = container.querySelectorAll('[role="tab"]');
             btns[nextIndex]?.focus();
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WmTabs, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: WmTabs, isStandalone: true, selector: "wm-tabs", inputs: { activeValue: { classPropertyName: "activeValue", publicName: "activeValue", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, queries: [{ propertyName: "tabs", predicate: WmTab, isSignal: true }], ngImport: i0, template: "<div\n  class=\"wm-tabs\"\n  [class.wm-tabs--line]=\"variant() === 'line'\"\n  [class.wm-tabs--pill]=\"variant() === 'pill'\"\n  role=\"tablist\"\n  #container\n  (keydown)=\"onKeyDown($event, container)\"\n>\n  @for (tab of tabs(); track tab.value(); let i = $index) {\n    @if (tab.separatorBefore()) {\n      <span\n        class=\"wm-tab-separator\"\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n      ></span>\n    }\n    <button\n      type=\"button\"\n      role=\"tab\"\n      class=\"wm-tab\"\n      [id]=\"'wm-tab-' + tab.value()\"\n      [attr.aria-selected]=\"activeValue() === tab.value()\"\n      [attr.aria-controls]=\"'wm-panel-' + tab.value()\"\n      [attr.aria-disabled]=\"tab.unavailable() ? true : null\"\n      [attr.aria-description]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n      [attr.title]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n      [tabIndex]=\"(focusedIndex() === null ? activeValue() === tab.value() : focusedIndex() === i) ? 0 : -1\"\n      [class.is-active]=\"activeValue() === tab.value()\"\n      [class.is-unavailable]=\"tab.unavailable()\"\n      (click)=\"selectTab(tab, i)\"\n      (focus)=\"focusedIndex.set(i)\"\n      (blur)=\"onBlur()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"tab.tmpl()\" />\n    </button>\n  }\n</div>\n", styles: [".wm-tab{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;background:transparent;border:none;cursor:pointer;white-space:nowrap;transition:color var(--wm-duration-fast) var(--wm-ease-standard),background var(--wm-duration-fast) var(--wm-ease-standard),border-color var(--wm-duration-fast) var(--wm-ease-standard)}.wm-tab:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:-2px;border-radius:var(--wm-radius-sm)}.wm-tab.is-unavailable{cursor:not-allowed;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}.wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent)}.wm-tab-separator{flex:0 0 1px;align-self:center;width:1px;height:1.25rem;margin:0 .375rem;background:var(--wm-border-subtle)}.wm-tabs--line{display:flex;gap:1.5rem;border-bottom:1px solid var(--wm-border-subtle)}.wm-tabs--line .wm-tab{padding:.625rem .25rem;color:var(--wm-text-muted);border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}.wm-tabs--line .wm-tab:hover{color:var(--wm-text-secondary)}.wm-tabs--line .wm-tab.is-active{color:var(--wm-color-accent-readable);border-bottom-color:var(--wm-color-accent-readable)}.wm-tabs--pill{display:inline-flex;background:var(--wm-bg-sunken);padding:.25rem;border-radius:var(--wm-radius-md);gap:.125rem;border:1px solid var(--wm-border-subtle)}.wm-tabs--pill .wm-tab{padding:.375rem .75rem;border-radius:var(--wm-radius-sm);color:var(--wm-text-muted)}.wm-tabs--pill .wm-tab:hover{background:color-mix(in srgb,var(--wm-color-accent) 5%,transparent);color:var(--wm-text-secondary)}.wm-tabs--pill .wm-tab.is-active{background:var(--wm-bg-float);color:var(--wm-text-primary);box-shadow:var(--wm-shadow-sm)}.wm-tabs--line .wm-tab.is-unavailable,.wm-tabs--line .wm-tab.is-unavailable:hover,.wm-tabs--pill .wm-tab.is-unavailable,.wm-tabs--pill .wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}@media(prefers-reduced-motion:reduce){.wm-tab{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: WmTabs, isStandalone: true, selector: "wm-tabs", inputs: { activeValue: { classPropertyName: "activeValue", publicName: "activeValue", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { select: "select" }, queries: [{ propertyName: "tabs", predicate: WmTab, isSignal: true }], ngImport: i0, template: "<div\n  class=\"wm-tabs\"\n  [class.wm-tabs--line]=\"variant() === 'line'\"\n  [class.wm-tabs--pill]=\"variant() === 'pill'\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabelledby() ? null : ariaLabel() || null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n  #container\n  (keydown)=\"onKeyDown($event, container)\"\n>\n  @for (tab of tabs(); track tab.value(); let i = $index) {\n    @if (tab.separatorBefore()) {\n      <span\n        class=\"wm-tab-separator\"\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n      ></span>\n    }\n    <button\n      type=\"button\"\n      role=\"tab\"\n      class=\"wm-tab\"\n      [id]=\"'wm-tab-' + tab.value()\"\n      [attr.aria-selected]=\"activeValue() === tab.value()\"\n      [attr.aria-controls]=\"'wm-panel-' + tab.value()\"\n      [attr.aria-disabled]=\"tab.unavailable() ? true : null\"\n      [attr.aria-description]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n      [attr.title]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n      [tabIndex]=\"tabStop() === i ? 0 : -1\"\n      [class.is-active]=\"activeValue() === tab.value()\"\n      [class.is-unavailable]=\"tab.unavailable()\"\n      (click)=\"selectTab(tab)\"\n      (focus)=\"focusedValue.set(tab.value())\"\n      (blur)=\"onBlur()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"tab.tmpl()\" />\n    </button>\n  }\n</div>\n", styles: [".wm-tab{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;background:transparent;border:none;cursor:pointer;white-space:nowrap;transition:color var(--wm-duration-fast) var(--wm-ease-standard),background var(--wm-duration-fast) var(--wm-ease-standard),border-color var(--wm-duration-fast) var(--wm-ease-standard)}.wm-tab:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:-2px;border-radius:var(--wm-radius-sm)}.wm-tab.is-unavailable{cursor:not-allowed;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}.wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent)}.wm-tab-separator{flex:0 0 1px;align-self:center;width:1px;height:1.25rem;margin:0 .375rem;background:var(--wm-border-subtle)}.wm-tabs--line{display:flex;gap:1.5rem;border-bottom:1px solid var(--wm-border-subtle)}.wm-tabs--line .wm-tab{padding:.625rem .25rem;color:var(--wm-text-muted);border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}.wm-tabs--line .wm-tab:hover{color:var(--wm-text-secondary)}.wm-tabs--line .wm-tab.is-active{color:var(--wm-color-accent-readable);border-bottom-color:var(--wm-color-accent-readable)}.wm-tabs--pill{display:inline-flex;background:var(--wm-bg-sunken);padding:.25rem;border-radius:var(--wm-radius-md);gap:.125rem;border:1px solid var(--wm-border-subtle)}.wm-tabs--pill .wm-tab{padding:.375rem .75rem;border-radius:var(--wm-radius-sm);color:var(--wm-text-muted)}.wm-tabs--pill .wm-tab:hover{background:color-mix(in srgb,var(--wm-color-accent) 5%,transparent);color:var(--wm-text-secondary)}.wm-tabs--pill .wm-tab.is-active{background:var(--wm-bg-float);color:var(--wm-text-primary);box-shadow:var(--wm-shadow-sm)}.wm-tabs--line .wm-tab.is-unavailable,.wm-tabs--line .wm-tab.is-unavailable:hover,.wm-tabs--pill .wm-tab.is-unavailable,.wm-tabs--pill .wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}@media(prefers-reduced-motion:reduce){.wm-tab{transition:none}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WmTabs, decorators: [{
             type: Component,
-            args: [{ selector: 'wm-tabs', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"wm-tabs\"\n  [class.wm-tabs--line]=\"variant() === 'line'\"\n  [class.wm-tabs--pill]=\"variant() === 'pill'\"\n  role=\"tablist\"\n  #container\n  (keydown)=\"onKeyDown($event, container)\"\n>\n  @for (tab of tabs(); track tab.value(); let i = $index) {\n    @if (tab.separatorBefore()) {\n      <span\n        class=\"wm-tab-separator\"\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n      ></span>\n    }\n    <button\n      type=\"button\"\n      role=\"tab\"\n      class=\"wm-tab\"\n      [id]=\"'wm-tab-' + tab.value()\"\n      [attr.aria-selected]=\"activeValue() === tab.value()\"\n      [attr.aria-controls]=\"'wm-panel-' + tab.value()\"\n      [attr.aria-disabled]=\"tab.unavailable() ? true : null\"\n      [attr.aria-description]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n      [attr.title]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n      [tabIndex]=\"(focusedIndex() === null ? activeValue() === tab.value() : focusedIndex() === i) ? 0 : -1\"\n      [class.is-active]=\"activeValue() === tab.value()\"\n      [class.is-unavailable]=\"tab.unavailable()\"\n      (click)=\"selectTab(tab, i)\"\n      (focus)=\"focusedIndex.set(i)\"\n      (blur)=\"onBlur()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"tab.tmpl()\" />\n    </button>\n  }\n</div>\n", styles: [".wm-tab{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;background:transparent;border:none;cursor:pointer;white-space:nowrap;transition:color var(--wm-duration-fast) var(--wm-ease-standard),background var(--wm-duration-fast) var(--wm-ease-standard),border-color var(--wm-duration-fast) var(--wm-ease-standard)}.wm-tab:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:-2px;border-radius:var(--wm-radius-sm)}.wm-tab.is-unavailable{cursor:not-allowed;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}.wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent)}.wm-tab-separator{flex:0 0 1px;align-self:center;width:1px;height:1.25rem;margin:0 .375rem;background:var(--wm-border-subtle)}.wm-tabs--line{display:flex;gap:1.5rem;border-bottom:1px solid var(--wm-border-subtle)}.wm-tabs--line .wm-tab{padding:.625rem .25rem;color:var(--wm-text-muted);border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}.wm-tabs--line .wm-tab:hover{color:var(--wm-text-secondary)}.wm-tabs--line .wm-tab.is-active{color:var(--wm-color-accent-readable);border-bottom-color:var(--wm-color-accent-readable)}.wm-tabs--pill{display:inline-flex;background:var(--wm-bg-sunken);padding:.25rem;border-radius:var(--wm-radius-md);gap:.125rem;border:1px solid var(--wm-border-subtle)}.wm-tabs--pill .wm-tab{padding:.375rem .75rem;border-radius:var(--wm-radius-sm);color:var(--wm-text-muted)}.wm-tabs--pill .wm-tab:hover{background:color-mix(in srgb,var(--wm-color-accent) 5%,transparent);color:var(--wm-text-secondary)}.wm-tabs--pill .wm-tab.is-active{background:var(--wm-bg-float);color:var(--wm-text-primary);box-shadow:var(--wm-shadow-sm)}.wm-tabs--line .wm-tab.is-unavailable,.wm-tabs--line .wm-tab.is-unavailable:hover,.wm-tabs--pill .wm-tab.is-unavailable,.wm-tabs--pill .wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}@media(prefers-reduced-motion:reduce){.wm-tab{transition:none}}\n"] }]
-        }], propDecorators: { activeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeValue", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WmTab), { isSignal: true }] }] } });
+            args: [{ selector: 'wm-tabs', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"wm-tabs\"\n  [class.wm-tabs--line]=\"variant() === 'line'\"\n  [class.wm-tabs--pill]=\"variant() === 'pill'\"\n  role=\"tablist\"\n  [attr.aria-label]=\"ariaLabelledby() ? null : ariaLabel() || null\"\n  [attr.aria-labelledby]=\"ariaLabelledby() || null\"\n  #container\n  (keydown)=\"onKeyDown($event, container)\"\n>\n  @for (tab of tabs(); track tab.value(); let i = $index) {\n    @if (tab.separatorBefore()) {\n      <span\n        class=\"wm-tab-separator\"\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n      ></span>\n    }\n    <button\n      type=\"button\"\n      role=\"tab\"\n      class=\"wm-tab\"\n      [id]=\"'wm-tab-' + tab.value()\"\n      [attr.aria-selected]=\"activeValue() === tab.value()\"\n      [attr.aria-controls]=\"'wm-panel-' + tab.value()\"\n      [attr.aria-disabled]=\"tab.unavailable() ? true : null\"\n      [attr.aria-description]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n      [attr.title]=\"tab.unavailable() ? tab.unavailableReason() : null\"\n      [tabIndex]=\"tabStop() === i ? 0 : -1\"\n      [class.is-active]=\"activeValue() === tab.value()\"\n      [class.is-unavailable]=\"tab.unavailable()\"\n      (click)=\"selectTab(tab)\"\n      (focus)=\"focusedValue.set(tab.value())\"\n      (blur)=\"onBlur()\"\n    >\n      <ng-container [ngTemplateOutlet]=\"tab.tmpl()\" />\n    </button>\n  }\n</div>\n", styles: [".wm-tab{display:inline-flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:600;background:transparent;border:none;cursor:pointer;white-space:nowrap;transition:color var(--wm-duration-fast) var(--wm-ease-standard),background var(--wm-duration-fast) var(--wm-ease-standard),border-color var(--wm-duration-fast) var(--wm-ease-standard)}.wm-tab:focus-visible{outline:2px solid var(--wm-color-accent);outline-offset:-2px;border-radius:var(--wm-radius-sm)}.wm-tab.is-unavailable{cursor:not-allowed;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}.wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent)}.wm-tab-separator{flex:0 0 1px;align-self:center;width:1px;height:1.25rem;margin:0 .375rem;background:var(--wm-border-subtle)}.wm-tabs--line{display:flex;gap:1.5rem;border-bottom:1px solid var(--wm-border-subtle)}.wm-tabs--line .wm-tab{padding:.625rem .25rem;color:var(--wm-text-muted);border-radius:0;border-bottom:2px solid transparent;margin-bottom:-1px}.wm-tabs--line .wm-tab:hover{color:var(--wm-text-secondary)}.wm-tabs--line .wm-tab.is-active{color:var(--wm-color-accent-readable);border-bottom-color:var(--wm-color-accent-readable)}.wm-tabs--pill{display:inline-flex;background:var(--wm-bg-sunken);padding:.25rem;border-radius:var(--wm-radius-md);gap:.125rem;border:1px solid var(--wm-border-subtle)}.wm-tabs--pill .wm-tab{padding:.375rem .75rem;border-radius:var(--wm-radius-sm);color:var(--wm-text-muted)}.wm-tabs--pill .wm-tab:hover{background:color-mix(in srgb,var(--wm-color-accent) 5%,transparent);color:var(--wm-text-secondary)}.wm-tabs--pill .wm-tab.is-active{background:var(--wm-bg-float);color:var(--wm-text-primary);box-shadow:var(--wm-shadow-sm)}.wm-tabs--line .wm-tab.is-unavailable,.wm-tabs--line .wm-tab.is-unavailable:hover,.wm-tabs--pill .wm-tab.is-unavailable,.wm-tabs--pill .wm-tab.is-unavailable:hover{background:transparent;color:color-mix(in srgb,var(--wm-text-muted) 52%,transparent);box-shadow:none}@media(prefers-reduced-motion:reduce){.wm-tab{transition:none}}\n"] }]
+        }], propDecorators: { activeValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeValue", required: true }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], select: [{ type: i0.Output, args: ["select"] }], tabs: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WmTab), { isSignal: true }] }] } });
 
+/**
+ * The class set for one button. `<wm-button>` puts it on its inner `<button>`
+ * and `[wmButton]` puts it on the host, so the two forms cannot drift apart.
+ */
+function wmButtonClass(variant, size, iconOnly) {
+    const base = `wm-btn wm-btn--${variant} wm-btn--${size}`;
+    return iconOnly ? `${base} btn-icon-only` : base;
+}
+/**
+ * WmButton — an Aegis button as an element: `<wm-button variant="ghost">`.
+ *
+ * The host wraps a real `<button>` and passes it four inputs: `disabled`,
+ * `type`, `ariaLabel` (as `aria-label`) and `btnTitle` (as `title`). Nothing
+ * else crosses. An attribute, class or directive written on `<wm-button>` stays on
+ * the host, which has no role and cannot take focus. When something must reach
+ * the element a screen reader and the keyboard use (ARIA state such as
+ * `aria-pressed` or `aria-expanded`, `cdkFocusInitial`, an `id` another element
+ * points at, a popover `trigger`, `[wmTooltip]`, a class that changes the
+ * button's own box), write a native element with `[wmButton]` instead:
+ *
+ * ```html
+ * <button wmButton variant="ghost" [attr.aria-pressed]="wrap()">Wrap</button>
+ * ```
+ */
 class WmButton {
     variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
     size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
@@ -580,10 +778,7 @@ class WmButton {
     ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
     /** Tooltip text forwarded to the inner <button>. Named btnTitle to avoid native attribute conflict. */
     btnTitle = input('', ...(ngDevMode ? [{ debugName: "btnTitle" }] : /* istanbul ignore next */ []));
-    btnClass = computed(() => {
-        const base = `wm-btn wm-btn--${this.variant()} wm-btn--${this.size()}`;
-        return this.iconOnly() ? `${base} btn-icon-only` : base;
-    }, ...(ngDevMode ? [{ debugName: "btnClass" }] : /* istanbul ignore next */ []));
+    btnClass = computed(() => wmButtonClass(this.variant(), this.size(), this.iconOnly()), ...(ngDevMode ? [{ debugName: "btnClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WmButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: WmButton, isStandalone: true, selector: "wm-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, btnTitle: { classPropertyName: "btnTitle", publicName: "btnTitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<button\n  [class]=\"btnClass()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.title]=\"btnTitle() || null\"\n>\n  <ng-content />\n</button>\n", styles: [":host{display:inline-flex}\n"] });
 }
@@ -592,6 +787,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
             args: [{ selector: 'wm-button', template: "<button\n  [class]=\"btnClass()\"\n  [disabled]=\"disabled()\"\n  [type]=\"type()\"\n  [attr.aria-label]=\"ariaLabel() || null\"\n  [attr.title]=\"btnTitle() || null\"\n>\n  <ng-content />\n</button>\n", styles: [":host{display:inline-flex}\n"] }]
         }], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], btnTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "btnTitle", required: false }] }] } });
 
+/**
+ * WmButtonDirective — the Aegis button classes on a native `<button>` or `<a>`.
+ *
+ * It renders exactly the class set `<wm-button>` puts on its inner button, but
+ * on the element the consumer writes. That element is the focusable one, so
+ * every attribute and directive on it reaches the right place with no
+ * forwarding list: ARIA state, `cdkFocusInitial`, `id`, `form`, a popover
+ * `trigger`, `[wmTooltip]`, test ids and consumer classes.
+ *
+ * Use `<wm-button>` by default. Use this when one of those has to land on the
+ * button itself (see `WmButton` for what the component forwards).
+ *
+ * - `variant`, `size` and `iconOnly` mean what they mean on `<wm-button>`.
+ * - Classes the consumer writes, static or bound, are kept.
+ * - A `<button>` with no `type` gets `type="button"`, the `<wm-button>`
+ *   default, so it does not submit a surrounding form. A written or bound
+ *   `type` wins. An `<a>` is left alone.
+ * - Everything else is native: write `disabled`, `aria-label` and `title`
+ *   directly. An `<a>` cannot be disabled.
+ *
+ * @example
+ * <button wmButton variant="ghost" size="sm" [attr.aria-pressed]="wrap()" (click)="toggleWrap()">
+ *   Wrap lines
+ * </button>
+ * <button wmButton variant="secondary" cdkFocusInitial (click)="cancel()">Keep editing</button>
+ * <a wmButton variant="ghost" href="/back">Back</a>
+ */
+class WmButtonDirective {
+    variant = input('primary', ...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Makes the button square. An icon-only button still needs an `aria-label`. */
+    iconOnly = input(false, { ...(ngDevMode ? { debugName: "iconOnly" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    hostClass = computed(() => wmButtonClass(this.variant(), this.size(), this.iconOnly()), ...(ngDevMode ? [{ debugName: "hostClass" }] : /* istanbul ignore next */ []));
+    constructor() {
+        // Static attributes are on the element before a directive is constructed,
+        // and a `[type]` or `[attr.type]` binding runs after, so this sets a default
+        // that anything the consumer writes overrides.
+        const element = inject(ElementRef).nativeElement;
+        if (element.tagName === 'BUTTON' && !element.hasAttribute('type')) {
+            element.setAttribute('type', 'button');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WmButtonDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.23", type: WmButtonDirective, isStandalone: true, selector: "button[wmButton], a[wmButton]", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClass()" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WmButtonDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'button[wmButton], a[wmButton]',
+                    host: {
+                        '[class]': 'hostClass()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }] } });
+
 /**
  * WmCheckbox — Boolean selection control with optional indeterminate state.
  *
@@ -783,6 +1033,631 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
             args: [{ selector: 'wm-toggle', template: "<button\n  type=\"button\"\n  role=\"switch\"\n  class=\"wm-toggle\"\n  [class.is-on]=\"checked()\"\n  [class.is-disabled]=\"disabled()\"\n  [attr.aria-checked]=\"checked()\"\n  [attr.aria-label]=\"ariaLabel()\"\n  [attr.aria-disabled]=\"disabled() ? true : null\"\n  [disabled]=\"disabled() || null\"\n  (click)=\"toggle()\"\n>\n  <span class=\"wm-toggle-track\" aria-hidden=\"true\">\n    <span class=\"wm-toggle-thumb\"></span>\n  </span>\n</button>\n", styles: [":host{display:inline-flex}.wm-toggle{display:inline-flex;align-items:center;background:none;border:none;padding:2px;margin:-2px;cursor:pointer;border-radius:var(--wm-radius-full);outline:none}.wm-toggle:focus-visible .wm-toggle-track{outline:2px solid var(--wm-color-accent);outline-offset:2px}.wm-toggle.is-disabled{opacity:.45;cursor:not-allowed;pointer-events:none}.wm-toggle-track{position:relative;width:40px;height:22px;background:var(--wm-border-input);border-radius:var(--wm-radius-full);transition:background var(--wm-transition-fast);flex-shrink:0}.wm-toggle.is-on .wm-toggle-track{background:var(--wm-color-accent)}.wm-toggle-thumb{position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:var(--wm-radius-full);box-shadow:0 1px 3px #00000040;transition:transform var(--wm-transition-fast)}.wm-toggle.is-on .wm-toggle-thumb{transform:translate(18px)}@media(prefers-reduced-motion:reduce){.wm-toggle-track,.wm-toggle-thumb{transition:none}}\n"] }]
         }], propDecorators: { checked: [{ type: i0.Input, args: [{ isSignal: true, alias: "checked", required: false }] }, { type: i0.Output, args: ["checkedChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
 
+/**
+ * Upper bound on generated marks. A numeric interval that would exceed it draws
+ * NOTHING rather than a truncated grid or a frozen tab: an empty rail is
+ * obviously wrong to whoever set it, where a silently shortened grid is not.
+ */
+const MAX_TICKS = 1000;
+/**
+ * Upper bound on reserved readout strings. Only labelled stops reach this, so
+ * it is a guard against a pathological grid rather than a limit anyone meets.
+ */
+const MAX_VALUE_CANDIDATES = 64;
+/**
+ * WmSlider — Continuous value selection along a bounded range.
+ *
+ * Built on a native `<input type="range">`. The native control is the whole
+ * interaction: pointer drag, touch, arrow keys, Home/End, Page Up/Page Down,
+ * RTL mirroring and the implicit `role="slider"` with `aria-valuenow` all come
+ * from the browser rather than from hand-written handlers. Aegis styles the
+ * track and thumb through the range pseudo-elements, so there is no invisible
+ * overlay input and no drag maths to get wrong.
+ *
+ * When to use:
+ *  - A bounded value where the approximate position matters more than the exact
+ *    number (volume, opacity, zoom, a brightness or threshold setting)
+ *  - A value the user wants to sweep through and preview as it changes
+ *
+ * When NOT to use:
+ *  - An exact number the user knows before they start typing it → <wm-number-input>
+ *  - Fewer than about five discrete choices → <wm-toggle-group> or <wm-select>
+ *  - An unbounded value — a slider has to have a min and a max
+ *
+ * Value pipeline: every value, whether it arrives from a two-way binding, a
+ * form, or a drag, is clamped into min..max and snapped onto the step grid
+ * measured FROM MIN. The snapped value is written back, so the binding, the
+ * form control and the thumb never disagree.
+ *
+ * Accessibility:
+ *  - The native input is the focusable control and carries the slider role.
+ *  - `ariaLabel` is required unless visible surrounding text names the control.
+ *  - `formatValue` also drives `aria-valuetext`, so a screen reader announces
+ *    "40 percent" rather than "40" when the raw number means nothing alone.
+ *  - Ticks and the value readout are decoration; the native value is the truth.
+ *
+ * Form integration:
+ *   <!-- Template-driven -->
+ *   <wm-slider [(ngModel)]="volume" [min]="0" [max]="100" />
+ *
+ *   <!-- Reactive -->
+ *   <wm-slider formControlName="opacity" [min]="0" [max]="1" [step]="0.05" />
+ *
+ *   <!-- Two-way signal binding, no forms -->
+ *   <wm-slider [(value)]="volume" ariaLabel="Volume" />
+ */
+class WmSlider {
+    /** Two-way bindable value. Always reads back clamped and snapped to the step grid. */
+    value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Lower bound, inclusive. */
+    min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+    /** Upper bound, inclusive. Values never exceed it, even when it is off the step grid. */
+    max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+    /** Grid spacing, measured from `min`. Use 0 for a continuous slider. */
+    step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+    /** Disables the control from the template. Reactive forms set this independently. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    /** Accessible name. Required unless visible text already names the control. */
+    ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /** Shows a live readout beside the rail. */
+    showValue = input(false, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Renders the value for humans. Also sets `aria-valuetext`, so pass one
+     * whenever the bare number would not be understood on its own.
+     */
+    formatValue = input(null, ...(ngDevMode ? [{ debugName: "formatValue" }] : /* istanbul ignore next */ []));
+    /**
+     * How the track is drawn. `rail` is one continuous bar. `segmented` breaks it
+     * into blocks bounded by the grid stops, and the block holding the value fills
+     * partially — so a segmented track does not have to mean one block per step,
+     * and survives a dense range that one-block-per-step cannot.
+     */
+    track = input('rail', ...(ngDevMode ? [{ debugName: "track" }] : /* istanbul ignore next */ []));
+    /**
+     * The grid, in one of three shapes:
+     *  - a **number** — a stop every N, measured from `min`
+     *  - an **array** of {@link WmSliderTick} — explicit stops, with labels and levels
+     *  - a **{@link WmSliderTickFn}** — computed from the live range
+     *
+     * Whatever the shape, the result is clamped to the range, sorted, and
+     * de-duplicated. The same resolved grid draws the marks AND bounds the blocks
+     * of a segmented track, so the two renderings cannot disagree.
+     *
+     * The grid is deliberately independent of `step`: a 0–100 slider stepping by 1
+     * carries 101 reachable values and should still draw about 11 marks.
+     */
+    ticks = input([], ...(ngDevMode ? [{ debugName: "ticks" }] : /* istanbul ignore next */ []));
+    /** Set by reactive forms through setDisabledState, independent of the input. */
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /** Position of the thumb across the span, 0..1, as a CSS-ready string. */
+    fraction = computed(() => trim(this.fractionOf(this.value())), ...(ngDevMode ? [{ debugName: "fraction" }] : /* istanbul ignore next */ []));
+    displayValue = computed(() => {
+        const format = this.formatValue();
+        return format ? format(this.value()) : String(this.value());
+    }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Every string the readout can show at a grid stop, de-duplicated.
+     *
+     * The shell is `1fr auto`, so a readout column sized by the CURRENT value
+     * takes its width from the rail and gives it back on the next value — the bar
+     * moves while you drag it. Rendering these hidden in the readout's own grid
+     * cell makes the browser reserve the widest of them once, with no measuring.
+     *
+     * Only LABELLED stops contribute. An unlabelled stop is a position rather
+     * than a word, and a numeric readout is already bounded by tabular numerals
+     * and the two endpoints — so a 101-mark grid reserves two slots, not 101.
+     */
+    valueCandidates = computed(() => {
+        const format = this.formatValue();
+        const render = (value) => (format ? format(value) : String(value));
+        const values = [
+            this.min(),
+            this.max(),
+            ...this.resolvedTicks()
+                .filter(tick => tick.label !== undefined)
+                .map(tick => tick.value),
+        ];
+        const out = new Set();
+        for (const value of values) {
+            out.add(render(value));
+            if (out.size >= MAX_VALUE_CANDIDATES)
+                break;
+        }
+        return [...out];
+    }, ...(ngDevMode ? [{ debugName: "valueCandidates" }] : /* istanbul ignore next */ []));
+    /** Null unless a formatter is set — a valuetext echoing valuenow is noise. */
+    valueText = computed(() => {
+        const format = this.formatValue();
+        return format ? format(this.value()) : null;
+    }, ...(ngDevMode ? [{ debugName: "valueText" }] : /* istanbul ignore next */ []));
+    /** The declared grid, before it is measured against the range. */
+    declaredTicks = computed(() => {
+        const raw = this.ticks();
+        if (typeof raw === 'number') {
+            return gridEvery(this.min(), this.max(), raw);
+        }
+        if (typeof raw === 'function') {
+            return raw({ min: this.min(), max: this.max(), step: this.step() }) ?? [];
+        }
+        return raw ?? [];
+    }, ...(ngDevMode ? [{ debugName: "declaredTicks" }] : /* istanbul ignore next */ []));
+    resolvedTicks = computed(() => {
+        const min = this.min();
+        const max = this.max();
+        const current = this.value();
+        const seen = new Set();
+        return this.declaredTicks()
+            .filter(tick => tick.value >= min && tick.value <= max)
+            // A duplicate value is not cosmetic — two marks at one value collide on
+            // the @for track key and Angular throws. First declaration wins, so an
+            // explicit label is never dropped in favour of a bare repeat.
+            .filter(tick => {
+            if (seen.has(tick.value))
+                return false;
+            seen.add(tick.value);
+            return true;
+        })
+            .sort((a, b) => a.value - b.value)
+            .map(tick => {
+            const fraction = this.fractionOf(tick.value);
+            return {
+                ...tick,
+                level: tick.level ?? 'major',
+                fraction,
+                left: `calc(var(--wm-slider-thumb) / 2 + ${trim(fraction)} * (100% - var(--wm-slider-thumb)))`,
+                passed: tick.value <= current,
+            };
+        });
+    }, ...(ngDevMode ? [{ debugName: "resolvedTicks" }] : /* istanbul ignore next */ []));
+    /**
+     * Blocks of a segmented track. The boundaries are the grid stops plus the two
+     * ends of the range, so the blocks are the intervals BETWEEN stops — which is
+     * what a block can honestly represent. Each one is sized by its own span, so
+     * an uneven grid produces uneven blocks rather than lying about the scale.
+     */
+    segments = computed(() => {
+        if (this.track() !== 'segmented')
+            return [];
+        const min = this.min();
+        const max = this.max();
+        if (max <= min)
+            return [];
+        const current = this.value();
+        const bounds = [...new Set([min, ...this.resolvedTicks().map(t => t.value), max])].sort((a, b) => a - b);
+        const out = [];
+        for (let i = 0; i < bounds.length - 1; i++) {
+            const from = bounds[i];
+            const to = bounds[i + 1];
+            const span = to - from;
+            if (span <= 0)
+                continue;
+            const fill = Math.min(Math.max((current - from) / span, 0), 1);
+            out.push({
+                from,
+                to,
+                span,
+                fill,
+                passed: fill >= 1,
+                current: fill > 0 && fill < 1,
+            });
+        }
+        return out;
+    }, ...(ngDevMode ? [{ debugName: "segments" }] : /* istanbul ignore next */ []));
+    hasTickLabels = computed(() => this.resolvedTicks().some(tick => tick.label !== undefined), ...(ngDevMode ? [{ debugName: "hasTickLabels" }] : /* istanbul ignore next */ []));
+    onChangeFn = () => { };
+    onTouchedFn = () => { };
+    constructor() {
+        // Normalisation runs on the value itself rather than on a derived signal,
+        // so a caller that binds [(value)] or a form control gets the corrected
+        // number back instead of holding one the thumb does not sit on.
+        effect(() => {
+            const resolved = this.resolve(this.value());
+            if (resolved !== this.value()) {
+                this.value.set(resolved);
+                this.onChangeFn(resolved);
+            }
+        });
+    }
+    writeValue(value) {
+        this.value.set(this.resolve(value ?? this.min()));
+    }
+    registerOnChange(fn) {
+        this.onChangeFn = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouchedFn = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    onRangeInput(event) {
+        const resolved = this.resolve(Number(event.target.value));
+        this.value.set(resolved);
+        this.onChangeFn(resolved);
+    }
+    /** Clamps into min..max, then snaps onto the step grid measured from min. */
+    resolve(raw) {
+        const min = this.min();
+        const max = this.max();
+        if (!Number.isFinite(raw))
+            return min;
+        if (max <= min)
+            return min;
+        const clamped = Math.min(Math.max(raw, min), max);
+        const step = this.step();
+        if (!Number.isFinite(step) || step <= 0)
+            return clamped;
+        // Rounding through a fixed number of decimals keeps a 0.1 grid on 0.3
+        // rather than 0.30000000000000004, which would then render and compare
+        // as a different number than the one the caller asked for.
+        const decimals = decimalsOf(step) + decimalsOf(min);
+        const snapped = round(min + Math.round((clamped - min) / step) * step, decimals);
+        // Snapping up can overshoot a max that is not a whole number of steps
+        // above min; the last reachable stop is one step back.
+        return snapped > max ? round(snapped - step, decimals) : snapped;
+    }
+    fractionOf(value) {
+        const span = this.max() - this.min();
+        if (span <= 0)
+            return 0;
+        return (value - this.min()) / span;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WmSlider, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.23", type: WmSlider, isStandalone: true, selector: "wm-slider", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, formatValue: { classPropertyName: "formatValue", publicName: "formatValue", isSignal: true, isRequired: false, transformFunction: null }, track: { classPropertyName: "track", publicName: "track", isSignal: true, isRequired: false, transformFunction: null }, ticks: { classPropertyName: "ticks", publicName: "ticks", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => WmSlider),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<!--\n  The native <input type=\"range\"> is the control, not a decoration over one:\n  its track and thumb are the styled surfaces. --wm-slider-p carries the thumb\n  position to the CSS so the filled part of the track, every tick and every\n  block are placed from the same number the thumb is.\n-->\n<div\n  class=\"wm-slider\"\n  [attr.data-track]=\"track()\"\n  [class.is-disabled]=\"isDisabled()\"\n  [class.has-ticks]=\"resolvedTicks().length > 0\"\n  [style.--wm-slider-p]=\"fraction()\"\n>\n  <div class=\"wm-slider-rail\">\n    @if (segments().length > 0) {\n      <!--\n        Blocks sit under the transparent native track. They are bounded by the\n        same resolved grid the marks come from, so a block and the mark on its\n        edge can never disagree about where a value falls.\n      -->\n      <div class=\"wm-slider-segments\" aria-hidden=\"true\">\n        @for (segment of segments(); track segment.from) {\n          <span\n            class=\"wm-slider-seg\"\n            [class.is-passed]=\"segment.passed\"\n            [class.is-current]=\"segment.current\"\n            [style.flexGrow]=\"segment.span\"\n            [style.--wm-slider-seg-p]=\"segment.fill\"\n          ></span>\n        }\n      </div>\n    }\n\n    @if (resolvedTicks().length > 0) {\n      <div class=\"wm-slider-ticks\" aria-hidden=\"true\">\n        @for (tick of resolvedTicks(); track tick.value) {\n          <span\n            class=\"wm-slider-tick\"\n            [class.wm-slider-tick--minor]=\"tick.level === 'minor'\"\n            [class.is-passed]=\"tick.passed\"\n            [style.left]=\"tick.left\"\n          ></span>\n        }\n      </div>\n    }\n\n    <input\n      class=\"wm-slider-input\"\n      type=\"range\"\n      [value]=\"value()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step() > 0 ? step() : 'any'\"\n      [disabled]=\"isDisabled() || null\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-valuetext]=\"valueText()\"\n      (input)=\"onRangeInput($event)\"\n      (blur)=\"onTouchedFn()\"\n    />\n  </div>\n\n  @if (showValue()) {\n    <!--\n      The sizers stack on the output in one grid cell, so the column reserves\n      the widest string the readout can hold and stops stealing width from the\n      rail every time the value changes.\n    -->\n    <div class=\"wm-slider-value-cell\">\n      <output class=\"wm-slider-value\">{{ displayValue() }}</output>\n      @for (candidate of valueCandidates(); track candidate) {\n        <span class=\"wm-slider-value-sizer\" aria-hidden=\"true\">{{ candidate }}</span>\n      }\n    </div>\n  }\n\n  @if (hasTickLabels()) {\n    <div class=\"wm-slider-tick-labels\" aria-hidden=\"true\">\n      @for (tick of resolvedTicks(); track tick.value) {\n        @if (tick.label !== undefined) {\n          <span class=\"wm-slider-tick-label\" [style.left]=\"tick.left\">{{ tick.label }}</span>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.wm-slider{--wm-slider-thumb: 16px;--wm-slider-track: 4px;--wm-slider-gap: 3px;--wm-slider-p: 0;--wm-slider-stop: calc( var(--wm-slider-thumb) / 2 + var(--wm-slider-p) * (100% - var(--wm-slider-thumb)) );--wm-slider-fill: linear-gradient( to right, var(--wm-color-accent) 0 var(--wm-slider-stop), var(--wm-border-input) var(--wm-slider-stop) 100% );display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:.75rem;row-gap:.375rem}.wm-slider-rail{position:relative;min-width:0}.wm-slider.has-ticks .wm-slider-rail{margin-bottom:10px}.wm-slider-input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:var(--wm-slider-thumb);margin:0;padding:0;background:transparent;cursor:pointer;position:relative;z-index:1}.wm-slider-input:focus{outline:none}.wm-slider-input::-webkit-slider-runnable-track{height:var(--wm-slider-track);border-radius:var(--wm-radius-full);background:var(--wm-slider-fill)}.wm-slider-input::-webkit-slider-thumb{-webkit-appearance:none;width:var(--wm-slider-thumb);height:var(--wm-slider-thumb);margin-top:calc((var(--wm-slider-track) - var(--wm-slider-thumb)) / 2);border-radius:var(--wm-radius-full);background:var(--wm-color-accent);border:2px solid var(--wm-bg-base);box-shadow:var(--wm-shadow-sm);transition:background var(--wm-transition-fast),transform var(--wm-transition-fast)}.wm-slider-input:hover::-webkit-slider-thumb{background:var(--wm-color-accent-hover);transform:scale(1.12)}.wm-slider-input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--wm-bg-base),0 0 0 4px var(--wm-color-accent)}.wm-slider-input::-moz-range-track{height:var(--wm-slider-track);border-radius:var(--wm-radius-full);background:var(--wm-slider-fill)}.wm-slider-input::-moz-range-thumb{width:var(--wm-slider-thumb);height:var(--wm-slider-thumb);box-sizing:border-box;border-radius:var(--wm-radius-full);background:var(--wm-color-accent);border:2px solid var(--wm-bg-base);box-shadow:var(--wm-shadow-sm);transition:background var(--wm-transition-fast),transform var(--wm-transition-fast)}.wm-slider-input:hover::-moz-range-thumb{background:var(--wm-color-accent-hover);transform:scale(1.12)}.wm-slider-input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--wm-bg-base),0 0 0 4px var(--wm-color-accent)}.wm-slider-ticks{position:absolute;inset-inline:0;top:100%;margin-top:2px;height:6px;pointer-events:none}.wm-slider-tick{position:absolute;top:0;width:2px;height:6px;margin-left:-1px;border-radius:1px;background:var(--wm-border-input);transition:background var(--wm-transition-fast)}.wm-slider-tick.is-passed{background:var(--wm-color-accent)}.wm-slider-tick--minor{height:3px;background:var(--wm-border-subtle)}.wm-slider-tick--minor.is-passed{background:color-mix(in srgb,var(--wm-color-accent) 55%,transparent)}.wm-slider[data-track=segmented]{--wm-slider-fill: none}.wm-slider-segments{position:absolute;inset:0 calc(var(--wm-slider-thumb) / 2);display:flex;align-items:center;gap:var(--wm-slider-gap);pointer-events:none}.wm-slider-seg{flex-basis:0;min-width:0;height:var(--wm-slider-track);border-radius:1px;background:var(--wm-border-input);transition:background var(--wm-transition-fast)}.wm-slider-seg.is-passed{background:var(--wm-color-accent)}.wm-slider-seg.is-current{background-image:linear-gradient(var(--wm-color-accent) 0 0);background-repeat:no-repeat;background-size:calc(var(--wm-slider-seg-p, 0) * 100%) 100%}.wm-slider-tick-labels{position:relative;grid-column:1;height:1rem}.wm-slider-tick-label{position:absolute;top:0;transform:translate(-50%);font-size:.75rem;color:var(--wm-text-muted);white-space:nowrap}.wm-slider-value-cell{grid-area:1 / 2;display:grid;justify-items:end}.wm-slider-value,.wm-slider-value-sizer{grid-area:1 / 1;font-family:var(--wm-font-mono);font-size:.8125rem;font-variant-numeric:tabular-nums;white-space:nowrap}.wm-slider-value{color:var(--wm-text-secondary);min-width:4ch;text-align:right}.wm-slider-value-sizer{visibility:hidden;pointer-events:none}.wm-slider.is-disabled{opacity:.5}.wm-slider-input:disabled{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.wm-slider-input::-webkit-slider-thumb,.wm-slider-input::-moz-range-thumb,.wm-slider-tick{transition:none}.wm-slider-input:hover::-webkit-slider-thumb,.wm-slider-input:hover::-moz-range-thumb{transform:none}}\n"] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WmSlider, decorators: [{
+            type: Component,
+            args: [{ selector: 'wm-slider', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => WmSlider),
+                            multi: true,
+                        },
+                    ], template: "<!--\n  The native <input type=\"range\"> is the control, not a decoration over one:\n  its track and thumb are the styled surfaces. --wm-slider-p carries the thumb\n  position to the CSS so the filled part of the track, every tick and every\n  block are placed from the same number the thumb is.\n-->\n<div\n  class=\"wm-slider\"\n  [attr.data-track]=\"track()\"\n  [class.is-disabled]=\"isDisabled()\"\n  [class.has-ticks]=\"resolvedTicks().length > 0\"\n  [style.--wm-slider-p]=\"fraction()\"\n>\n  <div class=\"wm-slider-rail\">\n    @if (segments().length > 0) {\n      <!--\n        Blocks sit under the transparent native track. They are bounded by the\n        same resolved grid the marks come from, so a block and the mark on its\n        edge can never disagree about where a value falls.\n      -->\n      <div class=\"wm-slider-segments\" aria-hidden=\"true\">\n        @for (segment of segments(); track segment.from) {\n          <span\n            class=\"wm-slider-seg\"\n            [class.is-passed]=\"segment.passed\"\n            [class.is-current]=\"segment.current\"\n            [style.flexGrow]=\"segment.span\"\n            [style.--wm-slider-seg-p]=\"segment.fill\"\n          ></span>\n        }\n      </div>\n    }\n\n    @if (resolvedTicks().length > 0) {\n      <div class=\"wm-slider-ticks\" aria-hidden=\"true\">\n        @for (tick of resolvedTicks(); track tick.value) {\n          <span\n            class=\"wm-slider-tick\"\n            [class.wm-slider-tick--minor]=\"tick.level === 'minor'\"\n            [class.is-passed]=\"tick.passed\"\n            [style.left]=\"tick.left\"\n          ></span>\n        }\n      </div>\n    }\n\n    <input\n      class=\"wm-slider-input\"\n      type=\"range\"\n      [value]=\"value()\"\n      [min]=\"min()\"\n      [max]=\"max()\"\n      [step]=\"step() > 0 ? step() : 'any'\"\n      [disabled]=\"isDisabled() || null\"\n      [attr.aria-label]=\"ariaLabel() || null\"\n      [attr.aria-valuetext]=\"valueText()\"\n      (input)=\"onRangeInput($event)\"\n      (blur)=\"onTouchedFn()\"\n    />\n  </div>\n\n  @if (showValue()) {\n    <!--\n      The sizers stack on the output in one grid cell, so the column reserves\n      the widest string the readout can hold and stops stealing width from the\n      rail every time the value changes.\n    -->\n    <div class=\"wm-slider-value-cell\">\n      <output class=\"wm-slider-value\">{{ displayValue() }}</output>\n      @for (candidate of valueCandidates(); track candidate) {\n        <span class=\"wm-slider-value-sizer\" aria-hidden=\"true\">{{ candidate }}</span>\n      }\n    </div>\n  }\n\n  @if (hasTickLabels()) {\n    <div class=\"wm-slider-tick-labels\" aria-hidden=\"true\">\n      @for (tick of resolvedTicks(); track tick.value) {\n        @if (tick.label !== undefined) {\n          <span class=\"wm-slider-tick-label\" [style.left]=\"tick.left\">{{ tick.label }}</span>\n        }\n      }\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.wm-slider{--wm-slider-thumb: 16px;--wm-slider-track: 4px;--wm-slider-gap: 3px;--wm-slider-p: 0;--wm-slider-stop: calc( var(--wm-slider-thumb) / 2 + var(--wm-slider-p) * (100% - var(--wm-slider-thumb)) );--wm-slider-fill: linear-gradient( to right, var(--wm-color-accent) 0 var(--wm-slider-stop), var(--wm-border-input) var(--wm-slider-stop) 100% );display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:.75rem;row-gap:.375rem}.wm-slider-rail{position:relative;min-width:0}.wm-slider.has-ticks .wm-slider-rail{margin-bottom:10px}.wm-slider-input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:var(--wm-slider-thumb);margin:0;padding:0;background:transparent;cursor:pointer;position:relative;z-index:1}.wm-slider-input:focus{outline:none}.wm-slider-input::-webkit-slider-runnable-track{height:var(--wm-slider-track);border-radius:var(--wm-radius-full);background:var(--wm-slider-fill)}.wm-slider-input::-webkit-slider-thumb{-webkit-appearance:none;width:var(--wm-slider-thumb);height:var(--wm-slider-thumb);margin-top:calc((var(--wm-slider-track) - var(--wm-slider-thumb)) / 2);border-radius:var(--wm-radius-full);background:var(--wm-color-accent);border:2px solid var(--wm-bg-base);box-shadow:var(--wm-shadow-sm);transition:background var(--wm-transition-fast),transform var(--wm-transition-fast)}.wm-slider-input:hover::-webkit-slider-thumb{background:var(--wm-color-accent-hover);transform:scale(1.12)}.wm-slider-input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--wm-bg-base),0 0 0 4px var(--wm-color-accent)}.wm-slider-input::-moz-range-track{height:var(--wm-slider-track);border-radius:var(--wm-radius-full);background:var(--wm-slider-fill)}.wm-slider-input::-moz-range-thumb{width:var(--wm-slider-thumb);height:var(--wm-slider-thumb);box-sizing:border-box;border-radius:var(--wm-radius-full);background:var(--wm-color-accent);border:2px solid var(--wm-bg-base);box-shadow:var(--wm-shadow-sm);transition:background var(--wm-transition-fast),transform var(--wm-transition-fast)}.wm-slider-input:hover::-moz-range-thumb{background:var(--wm-color-accent-hover);transform:scale(1.12)}.wm-slider-input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--wm-bg-base),0 0 0 4px var(--wm-color-accent)}.wm-slider-ticks{position:absolute;inset-inline:0;top:100%;margin-top:2px;height:6px;pointer-events:none}.wm-slider-tick{position:absolute;top:0;width:2px;height:6px;margin-left:-1px;border-radius:1px;background:var(--wm-border-input);transition:background var(--wm-transition-fast)}.wm-slider-tick.is-passed{background:var(--wm-color-accent)}.wm-slider-tick--minor{height:3px;background:var(--wm-border-subtle)}.wm-slider-tick--minor.is-passed{background:color-mix(in srgb,var(--wm-color-accent) 55%,transparent)}.wm-slider[data-track=segmented]{--wm-slider-fill: none}.wm-slider-segments{position:absolute;inset:0 calc(var(--wm-slider-thumb) / 2);display:flex;align-items:center;gap:var(--wm-slider-gap);pointer-events:none}.wm-slider-seg{flex-basis:0;min-width:0;height:var(--wm-slider-track);border-radius:1px;background:var(--wm-border-input);transition:background var(--wm-transition-fast)}.wm-slider-seg.is-passed{background:var(--wm-color-accent)}.wm-slider-seg.is-current{background-image:linear-gradient(var(--wm-color-accent) 0 0);background-repeat:no-repeat;background-size:calc(var(--wm-slider-seg-p, 0) * 100%) 100%}.wm-slider-tick-labels{position:relative;grid-column:1;height:1rem}.wm-slider-tick-label{position:absolute;top:0;transform:translate(-50%);font-size:.75rem;color:var(--wm-text-muted);white-space:nowrap}.wm-slider-value-cell{grid-area:1 / 2;display:grid;justify-items:end}.wm-slider-value,.wm-slider-value-sizer{grid-area:1 / 1;font-family:var(--wm-font-mono);font-size:.8125rem;font-variant-numeric:tabular-nums;white-space:nowrap}.wm-slider-value{color:var(--wm-text-secondary);min-width:4ch;text-align:right}.wm-slider-value-sizer{visibility:hidden;pointer-events:none}.wm-slider.is-disabled{opacity:.5}.wm-slider-input:disabled{cursor:not-allowed}@media(prefers-reduced-motion:reduce){.wm-slider-input::-webkit-slider-thumb,.wm-slider-input::-moz-range-thumb,.wm-slider-tick{transition:none}.wm-slider-input:hover::-webkit-slider-thumb,.wm-slider-input:hover::-moz-range-thumb{transform:none}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], formatValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "formatValue", required: false }] }], track: [{ type: i0.Input, args: [{ isSignal: true, alias: "track", required: false }] }], ticks: [{ type: i0.Input, args: [{ isSignal: true, alias: "ticks", required: false }] }] } });
+/**
+ * A stop every `interval`, starting at `min` and never passing `max`. Returns
+ * nothing for an interval that is not positive, or one that would draw more
+ * than {@link MAX_TICKS} marks.
+ */
+function gridEvery(min, max, interval) {
+    if (!Number.isFinite(interval) || interval <= 0)
+        return [];
+    const span = max - min;
+    if (!Number.isFinite(span) || span <= 0)
+        return [];
+    const count = Math.floor(span / interval + 1e-9);
+    if (count + 1 > MAX_TICKS)
+        return [];
+    const decimals = decimalsOf(interval) + decimalsOf(min);
+    const out = [];
+    for (let i = 0; i <= count; i++) {
+        out.push({ value: round(min + i * interval, decimals) });
+    }
+    return out;
+}
+/** Decimal places in a number's plain decimal form, capped to what f64 can hold. */
+function decimalsOf(value) {
+    const text = String(value);
+    if (text.includes('e') || text.includes('E'))
+        return 10;
+    const dot = text.indexOf('.');
+    return dot === -1 ? 0 : Math.min(text.length - dot - 1, 10);
+}
+function round(value, decimals) {
+    return Number(value.toFixed(Math.min(decimals, 10)));
+}
+/** A CSS-ready fraction: enough precision to be exact, no trailing noise. */
+function trim(fraction) {
+    return String(round(fraction, 6));
+}
+
+/**
+ * WmToggleGroupItem — one choice in a `<wm-toggle-group>`.
+ *
+ * The element itself is the `role="radio"`, so anything written on it lands
+ * on the control a screen reader and the keyboard use: `aria-label` for an
+ * icon-only item, `[wmTooltip]`, `data-testid`, a consumer class.
+ */
+class WmToggleGroupItem {
+    /**
+     * The value the group takes, and emits, when this item is checked. Give
+     * every item one.
+     *
+     * Not `input.required`: the group reads every item's value to place the tab
+     * stop, and an item rendered by `@for` has its host bindings run before the
+     * next item's inputs are set. A required input throws NG0950 on that read;
+     * this one reads `undefined`, the group places the stop without it, and the
+     * binding settles when the next item's value arrives in the same pass.
+     */
+    value = input(undefined, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Takes this item out of the focus order and out of selection. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    group = inject(WmToggleGroup);
+    /** @internal The item's own element, which carries role="radio". */
+    element = inject(ElementRef).nativeElement;
+    checked = computed(() => this.group.isChecked(this), ...(ngDevMode ? [{ debugName: "checked" }] : /* istanbul ignore next */ []));
+    /** @internal Disabled by its own input or by the group. */
+    isDisabled = computed(() => this.disabled() || this.group.isDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * 0 for the one tab stop, -1 for the rest. A disabled item gets no tabindex
+     * at all: -1 would still let a pointer press focus it.
+     */
+    tabIndex = computed(() => {
+        if (this.isDisabled())
+            return null;
+        return this.group.tabStop() === this ? 0 : -1;
+    }, ...(ngDevMode ? [{ debugName: "tabIndex" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WmToggleGroupItem, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.23", type: WmToggleGroupItem, isStandalone: true, selector: "wm-toggle-group-item", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "radio" }, listeners: { "click": "group.select(this)" }, properties: { "class.is-checked": "checked()", "class.is-disabled": "isDisabled()", "attr.aria-checked": "checked()", "attr.aria-disabled": "isDisabled() || null", "attr.tabindex": "tabIndex()" }, classAttribute: "wm-toggle-group-item" }, ngImport: i0, template: '<ng-content />', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WmToggleGroupItem, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'wm-toggle-group-item',
+                    template: '<ng-content />',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    host: {
+                        role: 'radio',
+                        class: 'wm-toggle-group-item',
+                        '[class.is-checked]': 'checked()',
+                        '[class.is-disabled]': 'isDisabled()',
+                        '[attr.aria-checked]': 'checked()',
+                        '[attr.aria-disabled]': 'isDisabled() || null',
+                        '[attr.tabindex]': 'tabIndex()',
+                        '(click)': 'group.select(this)',
+                    },
+                }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
+/**
+ * WmToggleGroup — a single-select choice among a few options, drawn as joined
+ * segments or as separate chips.
+ *
+ * Usage:
+ *   <wm-toggle-group [(value)]="strategy" ariaLabel="Pull strategy">
+ *     <wm-toggle-group-item value="merge">Merge</wm-toggle-group-item>
+ *     <wm-toggle-group-item value="rebase">Rebase</wm-toggle-group-item>
+ *   </wm-toggle-group>
+ *
+ * When to use:
+ *  - Two to about five mutually exclusive options that should all stay visible:
+ *    a setting (pull strategy, tab size, config scope), a view mode, a verdict
+ *  - A single-select filter row → `appearance="chip"`
+ *
+ * When NOT to use:
+ *  - Choosing which panel shows → `<wm-tabs>`. A tab controls a panel; a toggle
+ *    group sets a value
+ *  - An on/off setting → `<wm-toggle>` or a checkbox
+ *  - Several options that can be on together → checkboxes
+ *  - More options than fit on one line → `<wm-select>`
+ *
+ * Selection:
+ *  - `value` names the checked item. `null`, or a value no item carries,
+ *    checks nothing; the group still keeps one tab stop.
+ *  - `(valueChange)` fires once per user choice and only then: never for a
+ *    value written from outside, never for the item that is already checked,
+ *    and never with null. A two-way binding to a signal that cannot hold null
+ *    therefore type-checks.
+ *  - Items compare by `Object.is`, so a value keeps its type: `[value]="4"` on
+ *    an item emits the number 4, not the string "4".
+ *
+ * Keyboard (the WAI-ARIA APG radio group):
+ *  - Tab enters the group on one stop: the focused item while focus is inside,
+ *    otherwise the checked item, otherwise the first item that is not disabled.
+ *  - Arrow keys move focus AND check, wrapping at both ends and stepping over
+ *    disabled items. Left and Right swap in a right-to-left layout; Up and Down
+ *    follow document order. `Home` and `End` go to the first and last items.
+ *  - `Space` checks the focused item. `Enter` does not, as on a native radio.
+ *
+ * Accessibility:
+ *  - The `<wm-toggle-group>` element is the `role="radiogroup"` and each item
+ *    is a `role="radio"` with `aria-checked`. Name the group with `ariaLabel`,
+ *    or `ariaLabelledby` when a visible caption exists; `ariaLabelledby` wins.
+ *    An `aria-label` written straight on the element also works, because the
+ *    element carries the role.
+ *  - An icon-only item needs its own `aria-label`, written on the item.
+ *  - A disabled item keeps `aria-disabled="true"` and leaves the focus order.
+ *    A disabled group does the same for every item.
+ *
+ * Form integration: a ControlValueAccessor, so `formControlName`,
+ * `[formControl]` and `[(ngModel)]` all work. The control is marked touched
+ * when focus leaves the group.
+ */
+class WmToggleGroup {
+    /** Value of the checked item. `null`, or a value no item carries, checks nothing. */
+    value = input(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** The value of the item the user checked. Never null; see the class comment. */
+    valueChange = output();
+    /** Accessible name for the radiogroup. Ignored while `ariaLabelledby` is set. */
+    ariaLabel = input(null, ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Id of a visible element that names the group. Prefer it over `ariaLabel`
+     * when a visible caption exists, so the accessible name matches the visible
+     * text (WCAG 2.5.3, Label in Name).
+     */
+    ariaLabelledby = input(null, ...(ngDevMode ? [{ debugName: "ariaLabelledby" }] : /* istanbul ignore next */ []));
+    /**
+     * `segmented` joins the items in one sunken track, for a setting or a view
+     * mode. `chip` spaces them as separate rounded chips that wrap, for a filter
+     * row or a verdict.
+     */
+    appearance = input('segmented', ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Disables every item. Reactive forms set this independently. */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+    items = contentChildren(WmToggleGroupItem, { ...(ngDevMode ? { debugName: "items" } : /* istanbul ignore next */ {}), descendants: true });
+    host = inject(ElementRef).nativeElement;
+    // An aria-label or aria-labelledby attribute written on the element is kept
+    // when the matching input is unset. The element carries the role, so the
+    // attribute is a valid way to name it, and the host binding below would
+    // otherwise erase it on the first change detection.
+    staticLabel = inject(new HostAttributeToken('aria-label'), { optional: true });
+    staticLabelledby = inject(new HostAttributeToken('aria-labelledby'), {
+        optional: true,
+    });
+    accessibleLabelledby = computed(() => this.ariaLabelledby() || this.staticLabelledby || null, ...(ngDevMode ? [{ debugName: "accessibleLabelledby" }] : /* istanbul ignore next */ []));
+    accessibleLabel = computed(() => this.accessibleLabelledby() ? null : this.ariaLabel() || this.staticLabel || null, ...(ngDevMode ? [{ debugName: "accessibleLabel" }] : /* istanbul ignore next */ []));
+    /** The checked value. Follows `value`, and moves at once on a user choice or a form write. */
+    checkedValue = linkedSignal(() => this.value(), ...(ngDevMode ? [{ debugName: "checkedValue" }] : /* istanbul ignore next */ []));
+    /** Set by reactive forms through setDisabledState, independent of the input. */
+    formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+    /** @internal */
+    isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * The item that holds focus, or null while focus is outside the group. Kept
+     * as the item itself rather than an index, so an item added or removed
+     * before it cannot move the stop onto another item.
+     */
+    focusedItem = signal(null, ...(ngDevMode ? [{ debugName: "focusedItem" }] : /* istanbul ignore next */ []));
+    /** @internal The one item in the page's Tab order, or null when none can take focus. */
+    tabStop = computed(() => {
+        if (this.isDisabled())
+            return null;
+        const items = this.items();
+        const focused = this.focusedItem();
+        if (focused && items.includes(focused) && !focused.disabled())
+            return focused;
+        const checked = items.find((item) => !item.disabled() && this.isChecked(item));
+        return checked ?? items.find((item) => !item.disabled()) ?? null;
+    }, ...(ngDevMode ? [{ debugName: "tabStop" }] : /* istanbul ignore next */ []));
+    onChange = () => { };
+    onTouched = () => { };
+    /** @internal */
+    isChecked(item) {
+        const checked = this.checkedValue();
+        return checked !== null && Object.is(item.value(), checked);
+    }
+    /** @internal Checks `item` on a user action. */
+    select(item) {
+        if (item.isDisabled())
+            return;
+        const value = item.value();
+        if (Object.is(this.checkedValue(), value))
+            return;
+        this.checkedValue.set(value);
+        this.onChange(value);
+        this.valueChange.emit(value);
+    }
+    onKeydown(event) {
+        if (this.isDisabled() || event.altKey || event.ctrlKey || event.metaKey)
+            return;
+        const items = this.items();
+        const current = items.find((item) => item.element.contains(event.target));
+        if (!current)
+            return;
+        if (event.key === ' ') {
+            event.preventDefault();
+            this.select(current);
+            return;
+        }
+        const rtl = getComputedStyle(this.host).direction === 'rtl';
+        let target;
+        switch (event.key) {
+            case 'ArrowDown':
+                target = this.step(items, current, 1);
+                break;
+            case 'ArrowUp':
+                target = this.step(items, current, -1);
+                break;
+            case 'ArrowRight':
+                target = this.step(items, current, rtl ? -1 : 1);
+                break;
+            case 'ArrowLeft':
+                target = this.step(items, current, rtl ? 1 : -1);
+                break;
+            case 'Home':
+                target = items.find((item) => !item.disabled());
+                break;
+            case 'End': {
+                const enabled = items.filter((item) => !item.disabled());
+                target = enabled[enabled.length - 1];
+                break;
+            }
+            default:
+                return;
+        }
+        event.preventDefault();
+        if (!target)
+            return;
+        this.focusedItem.set(target);
+        target.element.focus();
+        this.select(target);
+    }
+    onFocusIn(event) {
+        const item = this.items().find((candidate) => candidate.element.contains(event.target));
+        if (item)
+            this.focusedItem.set(item);
+    }
+    onFocusOut(event) {
+        const next = event.relatedTarget;
+        if (next && this.host.contains(next))
+            return;
+        this.focusedItem.set(null);
+        this.onTouched();
+    }
+    /** The next item in `direction` that is not disabled, wrapping at both ends. */
+    step(items, from, direction) {
+        const count = items.length;
+        const start = items.indexOf(from);
+        for (let offset = 1; offset <= count; offset += 1) {
+            const candidate = items[(((start + direction * offset) % count) + count) % count];
+            if (!candidate.disabled())
+                return candidate;
+        }
+        return undefined;
+    }
+    // ── ControlValueAccessor ──────────────────────────────────────────────────
+    writeValue(value) {
+        this.checkedValue.set(value ?? null);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WmToggleGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.23", type: WmToggleGroup, isStandalone: true, selector: "wm-toggle-group", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { attributes: { "role": "radiogroup" }, listeners: { "keydown": "onKeydown($event)", "focusin": "onFocusIn($event)", "focusout": "onFocusOut($event)" }, properties: { "class.wm-toggle-group--segmented": "appearance() === 'segmented'", "class.wm-toggle-group--chip": "appearance() === 'chip'", "class.wm-toggle-group--sm": "size() === 'sm'", "attr.aria-label": "accessibleLabel()", "attr.aria-labelledby": "accessibleLabelledby()", "attr.aria-disabled": "isDisabled() || null" }, classAttribute: "wm-toggle-group" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => WmToggleGroup),
+                multi: true,
+            },
+        ], queries: [{ propertyName: "items", predicate: WmToggleGroupItem, descendants: true, isSignal: true }], ngImport: i0, template: '<ng-content />', isInline: true, styles: [".wm-toggle-group{display:inline-flex;align-items:stretch;max-width:100%}.wm-toggle-group-item{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-height:28px;padding:0 12px;border:1px solid transparent;background-color:transparent;color:var(--wm-text-secondary);font-family:inherit;font-size:.8125rem;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:background-color var(--wm-transition-fast),border-color var(--wm-transition-fast),color var(--wm-transition-fast)}.wm-toggle-group-item svg{flex-shrink:0;width:14px;height:14px}.wm-toggle-group-item:focus-visible{outline:2px solid var(--wm-color-accent-readable);outline-offset:2px}.wm-toggle-group--segmented{gap:2px;padding:3px;border:1px solid var(--wm-border-subtle);border-radius:var(--wm-radius-md);background-color:var(--wm-bg-sunken)}.wm-toggle-group--segmented .wm-toggle-group-item{border-radius:var(--wm-radius-sm)}.wm-toggle-group--segmented .wm-toggle-group-item:hover:not(.is-checked):not(.is-disabled){background-color:var(--wm-bg-float);color:var(--wm-text-primary)}.wm-toggle-group--chip{display:flex;flex-wrap:wrap;gap:6px}.wm-toggle-group--chip .wm-toggle-group-item{border-color:var(--wm-border-input);border-radius:var(--wm-radius-full)}.wm-toggle-group--chip .wm-toggle-group-item:hover:not(.is-checked):not(.is-disabled){background-color:var(--wm-bg-sunken);border-color:var(--wm-border-hover);color:var(--wm-text-primary)}.wm-toggle-group-item.is-checked{background-color:var(--wm-color-accent);border-color:var(--wm-color-accent-readable);color:var(--wm-color-accent-text)}.wm-toggle-group-item.is-checked:hover:not(.is-disabled){background-color:var(--wm-color-accent-hover)}.wm-toggle-group-item.is-disabled{opacity:.5;cursor:not-allowed}.wm-toggle-group--sm .wm-toggle-group-item{min-height:24px;padding:0 8px;font-size:.75rem}.wm-toggle-group--sm.wm-toggle-group--segmented{padding:2px;border-radius:var(--wm-radius-sm)}.wm-toggle-group--sm.wm-toggle-group--segmented .wm-toggle-group-item{border-radius:var(--wm-radius-xs)}@media(forced-colors:active){.wm-toggle-group-item{border-color:ButtonText}.wm-toggle-group-item.is-checked{forced-color-adjust:none;background-color:SelectedItem;border-color:SelectedItem;color:SelectedItemText}.wm-toggle-group-item.is-disabled{border-color:GrayText;color:GrayText}}@media(prefers-reduced-motion:reduce){.wm-toggle-group-item{transition:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImport: i0, type: WmToggleGroup, decorators: [{
+            type: Component,
+            args: [{ selector: 'wm-toggle-group', template: '<ng-content />', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => WmToggleGroup),
+                            multi: true,
+                        },
+                    ], host: {
+                        role: 'radiogroup',
+                        class: 'wm-toggle-group',
+                        '[class.wm-toggle-group--segmented]': "appearance() === 'segmented'",
+                        '[class.wm-toggle-group--chip]': "appearance() === 'chip'",
+                        '[class.wm-toggle-group--sm]': "size() === 'sm'",
+                        '[attr.aria-label]': 'accessibleLabel()',
+                        '[attr.aria-labelledby]': 'accessibleLabelledby()',
+                        '[attr.aria-disabled]': 'isDisabled() || null',
+                        '(keydown)': 'onKeydown($event)',
+                        '(focusin)': 'onFocusIn($event)',
+                        '(focusout)': 'onFocusOut($event)',
+                    }, styles: [".wm-toggle-group{display:inline-flex;align-items:stretch;max-width:100%}.wm-toggle-group-item{display:inline-flex;align-items:center;justify-content:center;gap:6px;box-sizing:border-box;min-height:28px;padding:0 12px;border:1px solid transparent;background-color:transparent;color:var(--wm-text-secondary);font-family:inherit;font-size:.8125rem;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;-webkit-user-select:none;user-select:none;outline:none;transition:background-color var(--wm-transition-fast),border-color var(--wm-transition-fast),color var(--wm-transition-fast)}.wm-toggle-group-item svg{flex-shrink:0;width:14px;height:14px}.wm-toggle-group-item:focus-visible{outline:2px solid var(--wm-color-accent-readable);outline-offset:2px}.wm-toggle-group--segmented{gap:2px;padding:3px;border:1px solid var(--wm-border-subtle);border-radius:var(--wm-radius-md);background-color:var(--wm-bg-sunken)}.wm-toggle-group--segmented .wm-toggle-group-item{border-radius:var(--wm-radius-sm)}.wm-toggle-group--segmented .wm-toggle-group-item:hover:not(.is-checked):not(.is-disabled){background-color:var(--wm-bg-float);color:var(--wm-text-primary)}.wm-toggle-group--chip{display:flex;flex-wrap:wrap;gap:6px}.wm-toggle-group--chip .wm-toggle-group-item{border-color:var(--wm-border-input);border-radius:var(--wm-radius-full)}.wm-toggle-group--chip .wm-toggle-group-item:hover:not(.is-checked):not(.is-disabled){background-color:var(--wm-bg-sunken);border-color:var(--wm-border-hover);color:var(--wm-text-primary)}.wm-toggle-group-item.is-checked{background-color:var(--wm-color-accent);border-color:var(--wm-color-accent-readable);color:var(--wm-color-accent-text)}.wm-toggle-group-item.is-checked:hover:not(.is-disabled){background-color:var(--wm-color-accent-hover)}.wm-toggle-group-item.is-disabled{opacity:.5;cursor:not-allowed}.wm-toggle-group--sm .wm-toggle-group-item{min-height:24px;padding:0 8px;font-size:.75rem}.wm-toggle-group--sm.wm-toggle-group--segmented{padding:2px;border-radius:var(--wm-radius-sm)}.wm-toggle-group--sm.wm-toggle-group--segmented .wm-toggle-group-item{border-radius:var(--wm-radius-xs)}@media(forced-colors:active){.wm-toggle-group-item{border-color:ButtonText}.wm-toggle-group-item.is-checked{forced-color-adjust:none;background-color:SelectedItem;border-color:SelectedItem;color:SelectedItemText}.wm-toggle-group-item.is-disabled{border-color:GrayText;color:GrayText}}@media(prefers-reduced-motion:reduce){.wm-toggle-group-item{transition:none}}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => WmToggleGroupItem), { ...{ descendants: true }, isSignal: true }] }] } });
+
 /**
  * GhostField — transparent-until-hover wrapper for inline-editable fields.
  *
@@ -2610,5 +3485,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.23", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { Checkbox, GhostField, NumberInput, PageHeader, Toggle, WmAnchoredScrollStrategy, WmAutoFocus, WmButton, WmCombobox, WmDialog, WmModal, WmPopover, WmRichTooltip, WmRichTooltipContent, WmRichTooltipTrigger, WmSelect, WmTab, WmTabs, WmToastContainer, WmToastService, WmTooltip, onViewportChange };
+export { Checkbox, GhostField, NumberInput, PageHeader, Toggle, WmAnchoredScrollStrategy, WmAutoFocus, WmButton, WmButtonDirective, WmCombobox, WmDialog, WmModal, WmPopover, WmRichTooltip, WmRichTooltipContent, WmRichTooltipTrigger, WmSelect, WmSlider, WmTab, WmTabs, WmToastContainer, WmToastService, WmToggleGroup, WmToggleGroupItem, WmTooltip, onViewportChange };
 //# sourceMappingURL=wildmason-aegis.mjs.map