@wildmason/aegis 2.1.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.
  *
@@ -811,7 +1061,7 @@ const MAX_VALUE_CANDIDATES = 64;
  *
  * 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-select> or a pill tab group
+ *  - 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
@@ -1109,6 +1359,305 @@ 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.
  *
@@ -2936,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, WmSlider, 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