@wildmason/aegis 2.2.0 → 2.3.0

package/dist/types/wildmason-aegis.d.ts

@@ -138,6 +138,12 @@ interface SelectOption {
     label: string;
     /** When true, the option is visible but cannot be selected. */
     disabled?: boolean;
+    /**
+     * A second, muted line under the label, in the dropdown list only. The
+     * option keeps its label as its accessible name and takes this line as its
+     * description. Leave it out and the option renders as it always has.
+     */
+    description?: string;
 }
 
 /**
@@ -160,6 +166,12 @@ declare class WmAnchoredScrollStrategy implements ScrollStrategy {
     detach(): void;
 }
 
+/** How the trigger is drawn. See `WmSelect.appearance`. */
+type WmSelectAppearance = 'field' | 'chip';
+/** The trigger's status colour. See `WmSelect.tone`. */
+type WmSelectTone = 'neutral' | 'danger';
+/** How wide the panel is. See `WmSelect.panelWidth`. */
+type WmSelectPanelWidth = 'trigger' | 'content' | number;
 /**
  * WmSelect — Accessible dropdown select built on Angular CDK Overlay.
  *
@@ -177,20 +189,26 @@ declare class WmAnchoredScrollStrategy implements ScrollStrategy {
  *  - Yes/No choices → use a Toggle or two radio buttons
  *
  * Options API:
- *   options: SelectOption[]  — Array of { value, label, disabled? } objects.
+ *   options: SelectOption[]  — Array of { value, label, disabled?, description? } objects.
  *
  * Two-way binding:
  *   <wm-select [(value)]="selectedValue" [options]="myOptions" />
  *
+ * A compact choice in a row of others, which reads "Opus model":
+ *   <wm-select appearance="chip" suffix="model" aria-label="Model" [options]="models" [(value)]="model" />
+ *
  * Accessibility:
  *  - Trigger has role="combobox", aria-expanded, aria-haspopup="listbox"
  *  - Panel has role="listbox"; each option has role="option" + aria-selected
  *  - Disabled options have aria-disabled="true"
+ *  - An option with a description is named by its label (aria-labelledby) and
+ *    described by the second line (aria-describedby)
  *  - Focus is trapped inside the open panel (cdkTrapFocus)
  *  - Clicking the backdrop closes the panel and returns focus to the trigger
  *  - Keyboard: Enter/Space on trigger opens; Escape closes; arrow keys
  *    navigate options (relies on natural tab order within the panel)
- *  - Always pair with a visible label via <wm-label> or aria-label on the host
+ *  - Always pair with a visible label via <wm-label> or aria-label on the host.
+ *    A chip has no visible label of its own, so it always needs the aria-label
  */
 declare class WmSelect {
     /**
@@ -203,6 +221,8 @@ declare class WmSelect {
      * keeps the coordinates it was born with while the trigger scrolls away.
      */
     protected readonly scrollStrategy: WmAnchoredScrollStrategy;
+    /** Prefix for the ids that tie an option to its label and description. */
+    protected readonly uid: string;
     /** Array of options to display. */
     options: _angular_core.InputSignal<SelectOption[]>;
     /** The currently selected value. Two-way bindable. */
@@ -211,15 +231,49 @@ declare class WmSelect {
     placeholder: _angular_core.InputSignal<string>;
     /** Disables the trigger and prevents the panel from opening. */
     disabled: _angular_core.InputSignal<boolean>;
+    /**
+     * `field` (the default) is a full-width form control with a border.
+     * `chip` is a compact, filled trigger as wide as its words, for a row of
+     * choices such as a composer's model and permissions.
+     */
+    appearance: _angular_core.InputSignal<WmSelectAppearance>;
+    /**
+     * A muted word after the chosen label, in the trigger only: `suffix="model"`
+     * reads "Opus model". It names the choice where no label sits beside it. It
+     * is left out while the placeholder shows.
+     */
+    suffix: _angular_core.InputSignal<string>;
+    /**
+     * `danger` draws the trigger in the danger status colours, for a choice that
+     * is risky to keep, such as running without permission prompts.
+     */
+    tone: _angular_core.InputSignal<WmSelectTone>;
+    /**
+     * `trigger` holds the panel to the trigger's width. `content` lets it grow to
+     * its widest option, from the trigger's width up to 24rem, where a
+     * description wraps. A number is a fixed width in pixels. Left unset, a
+     * field's panel matches the trigger and a chip's panel fits its content.
+     */
+    panelWidth: _angular_core.InputSignal<WmSelectPanelWidth>;
     protected isOpen: _angular_core.WritableSignal<boolean>;
     protected selectedOption: _angular_core.Signal<SelectOption>;
+    protected readonly sizing: _angular_core.Signal<WmSelectPanelWidth>;
     private hostEl;
-    protected get overlayWidth(): number;
+    /**
+     * The trigger's width, measured as the panel opens. A width read on every
+     * check would differ between Angular's update pass and its no-changes pass
+     * whenever the trigger is resizing, which a chip does while its text renders.
+     */
+    private readonly triggerWidth;
+    protected readonly overlayWidth: _angular_core.Signal<string | number>;
+    protected readonly overlayMinWidth: _angular_core.Signal<string | number>;
+    /** The overlay has no max-width input, so the cap sits on the panel it holds. */
+    protected readonly panelMaxWidth: _angular_core.Signal<"" | "24rem">;
     protected positions: ConnectedPosition[];
     protected toggleOpen(): void;
     protected selectOption(opt: SelectOption): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<WmSelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WmSelect, "wm-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WmSelect, "wm-select", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
 }
 
 /**
@@ -1610,4 +1664,4 @@ declare class WmRichTooltip {
 declare function onViewportChange(handler: () => void): () => void;
 
 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 };
-export type { ButtonSize, ButtonVariant, ComboboxOption, DialogSize, SelectOption, Toast, ToastType, WmSliderTick, WmSliderTickFn, WmSliderTrack, WmToggleGroupAppearance, WmToggleGroupSize, WmTooltipPosition, WmTooltipRelation };
+export type { ButtonSize, ButtonVariant, ComboboxOption, DialogSize, SelectOption, Toast, ToastType, WmSelectAppearance, WmSelectPanelWidth, WmSelectTone, WmSliderTick, WmSliderTickFn, WmSliderTrack, WmToggleGroupAppearance, WmToggleGroupSize, WmTooltipPosition, WmTooltipRelation };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wildmason/aegis",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Aegis design system — CSS tokens and Angular component library",
   "scripts": {
     "check:offline-fonts": "node scripts/check-offline-fonts.mjs",

package/themes.css

@@ -1107,7 +1107,8 @@
   /* Text — Crisp Soft White with hint of mint */
   --wm-text-primary: #d8e0d8;
   --wm-text-secondary: #c2ccc2;
-  --wm-text-muted: #c0cac0;
+  /* Muted sits visibly below secondary (Matt, 2026-10-02): #c0cac0 was 1% from #c2ccc2. */
+  --wm-text-muted: #949d94;
   --wm-text-placeholder: #687068;
 
   /* Borders — Deep Stone */