@aceshooting/lyra-ui 1.1.0 → 1.2.0

package/dist/components/select/select.js

@@ -14,47 +14,6 @@ import { chevronIcon } from '../../internal/icons.js';
 import { styles } from './select.styles.js';
 import { LyraOption } from '../combobox/option.js';
 import '../combobox/option.js';
-/**
- * `<lyra-select>` — a plain closed-list dropdown: a direct `<lyra-*>`
- * counterpart to `<wa-select>`/`<wa-option>`. Trigger is a button (not a text
- * input) -- click/Enter/Space/ArrowDown opens it, there's no typing-to-filter.
- * A printable keypress instead jumps (or, while closed, directly selects) the
- * next option whose label starts with what's been typed, like a native
- * `<select>`'s type-ahead.
- *
- * Options are `<lyra-option value>` children, the same element `<lyra-combobox>`
- * uses. Unlike `lyra-combobox` this is single-select only, with no filter/
- * source/with-clear/max-options-visible/empty-text/max-render/multiple surface
- * -- see `<lyra-combobox>` for the filterable/multi-select case.
- *
- * Reuses `lyra-combobox`'s popup positioning (`internal/positioner.js`) and
- * click-outside/Escape/Home/End/Arrow-key listbox navigation patterns,
- * adapted to a trigger button that keeps DOM focus throughout (the listbox's
- * "active" row is conveyed via `aria-activedescendant`, never actual focus),
- * matching the WAI-ARIA "select-only combobox" pattern.
- *
- * @customElement lyra-select
- * @slot - `<lyra-option>` elements.
- * @slot label - Custom label content.
- * @slot hint - Custom hint content.
- * @slot error - Custom error content.
- * @event change - The selection changed.
- * @event input - Fired alongside `change` on every selection change (native
- *   `<select>` doesn't meaningfully distinguish the two either).
- * @event lyra-show - The listbox opened.
- * @event lyra-hide - The listbox closed.
- * @csspart form-control - The outer wrapper around label, trigger, listbox, error and hint.
- * @csspart form-control-label - The `<label>` element.
- * @csspart trigger - The trigger button (positioning anchor).
- * @csspart listbox - The options popover.
- * @csspart option - An option row.
- * @csspart option-dot - An option row's leading status dot (when `dot-color` is set).
- * @csspart option-label - An option row's label/sub wrapper.
- * @csspart option-sub - An option row's secondary line (when `sub` is set).
- * @csspart expand-icon - The dropdown indicator.
- * @csspart error - The error message.
- * @csspart hint - The hint message.
- */
 export class LyraSelect extends LyraElement {
     static { this.formAssociated = true; }
     static { this.styles = [LyraElement.styles, styles]; }
@@ -71,6 +30,8 @@ export class LyraSelect extends LyraElement {
         this.hint = '';
         this.errorText = '';
         this.open = false;
+        /** Visual size — same `xs`–`xl` scale as `lyra-toast-item`'s `size`. */
+        this.size = 'm';
         this.activeIndex = -1;
         this.options = [];
         // Set on the trigger button's first `blur`; gates the `data-invalid`
@@ -438,7 +399,7 @@ export class LyraSelect extends LyraElement {
           aria-expanded=${this.open ? 'true' : 'false'}
           aria-controls=${this.listId}
           aria-activedescendant=${activeId}
-          aria-label=${this.label || this.placeholder || 'Select'}
+          aria-label=${this.getAttribute('aria-label') || this.label || this.placeholder || 'Select'}
           aria-required=${this.required ? 'true' : 'false'}
           aria-invalid=${this.touched && !this.internals.validity.valid ? 'true' : 'false'}
           ?disabled=${this.disabled}
@@ -495,6 +456,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraSelect.prototype, "open", void 0);
+__decorate([
+    property({ reflect: true })
+], LyraSelect.prototype, "size", void 0);
 __decorate([
     state()
 ], LyraSelect.prototype, "activeIndex", void 0);

package/dist/components/select/select.stories.d.ts

@@ -11,6 +11,8 @@ export declare const PreSelectedValue: Story;
  * rich-row support as `<lyra-combobox>`.
  */
 export declare const RichRows: Story;
+/** `size` spans the same `xs`–`xl` scale as `lyra-toast-item`, default `m`. */
+export declare const Sizes: Story;
 export declare const Disabled: Story;
 /**
  * `required` blocks form submission while empty; `error-text` renders a

package/dist/components/select/select.stories.js

@@ -46,6 +46,22 @@ export const RichRows = {
     </lyra-select>
   `,
 };
+/** `size` spans the same `xs`–`xl` scale as `lyra-toast-item`, default `m`. */
+export const Sizes = {
+    render: () => {
+        const sizes = ['xs', 's', 'm', 'l', 'xl'];
+        return html `
+      <div style="display: flex; flex-direction: column; gap: 1rem; max-width: 20rem">
+        ${sizes.map((size) => html `
+            <lyra-select size=${size} placeholder=${`Size "${size}"`}>
+              <lyra-option value="a">Apple</lyra-option>
+              <lyra-option value="b">Banana</lyra-option>
+            </lyra-select>
+          `)}
+      </div>
+    `;
+    },
+};
 export const Disabled = {
     render: () => html `
     <lyra-select label="Disabled" disabled placeholder="Can't touch this" style="max-width: 20rem">

package/dist/components/select/select.styles.js

@@ -2,6 +2,29 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     display: block;
+    --lyra-select-trigger-padding: var(--lyra-space-xs) var(--lyra-space-s);
+    --lyra-select-trigger-min-height: 2.5rem;
+    --lyra-select-font-size: 1rem;
+  }
+  :host([size='xs']) {
+    --lyra-select-trigger-padding: 0.125rem var(--lyra-space-xs);
+    --lyra-select-trigger-min-height: 1.5rem;
+    --lyra-select-font-size: 0.75rem;
+  }
+  :host([size='s']) {
+    --lyra-select-trigger-padding: var(--lyra-space-xs) var(--lyra-space-xs);
+    --lyra-select-trigger-min-height: 1.875rem;
+    --lyra-select-font-size: 0.8125rem;
+  }
+  :host([size='l']) {
+    --lyra-select-trigger-padding: var(--lyra-space-s) var(--lyra-space-m);
+    --lyra-select-trigger-min-height: 3rem;
+    --lyra-select-font-size: 1.125rem;
+  }
+  :host([size='xl']) {
+    --lyra-select-trigger-padding: var(--lyra-space-m) var(--lyra-space-l);
+    --lyra-select-trigger-min-height: 3.5rem;
+    --lyra-select-font-size: 1.25rem;
   }
   [part='form-control-label'] {
     display: block;
@@ -30,13 +53,14 @@ export const styles = css `
     justify-content: space-between;
     gap: var(--lyra-space-xs);
     inline-size: 100%;
-    min-block-size: 2.5rem;
-    padding: var(--lyra-space-xs) var(--lyra-space-s);
+    min-block-size: var(--lyra-select-trigger-min-height);
+    padding: var(--lyra-select-trigger-padding);
     border: 1px solid var(--lyra-color-border);
     border-radius: var(--lyra-radius);
     background: var(--lyra-color-surface);
     color: inherit;
     font: inherit;
+    font-size: var(--lyra-select-font-size);
     text-align: start;
     cursor: pointer;
   }

package/dist/components/stat/stat.d.ts

@@ -15,6 +15,7 @@ export interface StatRow {
  * @slot caption - Rich caption content (overrides the `caption` attribute).
  * @slot spark - A sparkline (e.g. `<lyra-sparkline>`) or other compact trend
  *   visual. `lyra-stat` only reserves the slot; it doesn't render one itself.
+ * @slot sub - Rich sub-line content (overrides the `sub` attribute).
  * @csspart base - The component's root wrapper.
  * @csspart icon - Container for the leading icon slot.
  * @csspart label - The label text.
@@ -22,6 +23,7 @@ export interface StatRow {
  * @csspart value - The value text.
  * @csspart unit - The unit text.
  * @csspart trend - The trend pill.
+ * @csspart sub - Container for the `sub` attribute/slot.
  * @csspart spark - Container for the `spark` slot.
  * @csspart caption - Container for the caption attribute/slot.
  * @csspart rows - Container for the `rows` breakdown list.
@@ -46,13 +48,27 @@ export declare class LyraStat extends LyraElement {
      *  the status `variant`; see the `[part='value']` selector below for how
      *  the two combine. */
     emphasis: boolean;
+    /** Exact value shown as a hover/focus tooltip on the headline `value` (e.g. `value="$1.2K"
+     *  exact-value="$1,204.37"`). Also makes `[part='value']` keyboard-focusable so the tooltip is
+     *  reachable without a pointer. */
+    exactValue: string;
+    /** A secondary line distinct from `caption` (e.g. a comparison-period label), rendered between the
+     *  trend pill and the caption. */
+    sub: string;
+    /** Renders `value` as smaller/lighter prose (e.g. a loading/status message) instead of the bold
+     *  numeric headline style, and hides `unit`. */
+    prose: boolean;
+    /** Tighter padding for constrained spaces — same convention as `lyra-empty`'s `compact`. */
+    compact: boolean;
     private hasIcon;
     private hasCaptionSlot;
     private hasSparkSlot;
+    private hasSubSlot;
     protected willUpdate(): void;
     private onIconSlotChange;
     private onCaptionSlotChange;
     private onSparkSlotChange;
+    private onSubSlotChange;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/stat/stat.js

@@ -20,6 +20,7 @@ import { styles } from './stat.styles.js';
  * @slot caption - Rich caption content (overrides the `caption` attribute).
  * @slot spark - A sparkline (e.g. `<lyra-sparkline>`) or other compact trend
  *   visual. `lyra-stat` only reserves the slot; it doesn't render one itself.
+ * @slot sub - Rich sub-line content (overrides the `sub` attribute).
  * @csspart base - The component's root wrapper.
  * @csspart icon - Container for the leading icon slot.
  * @csspart label - The label text.
@@ -27,6 +28,7 @@ import { styles } from './stat.styles.js';
  * @csspart value - The value text.
  * @csspart unit - The unit text.
  * @csspart trend - The trend pill.
+ * @csspart sub - Container for the `sub` attribute/slot.
  * @csspart spark - Container for the `spark` slot.
  * @csspart caption - Container for the caption attribute/slot.
  * @csspart rows - Container for the `rows` breakdown list.
@@ -52,12 +54,25 @@ export class LyraStat extends LyraElement {
          *  the status `variant`; see the `[part='value']` selector below for how
          *  the two combine. */
         this.emphasis = false;
+        /** Exact value shown as a hover/focus tooltip on the headline `value` (e.g. `value="$1.2K"
+         *  exact-value="$1,204.37"`). Also makes `[part='value']` keyboard-focusable so the tooltip is
+         *  reachable without a pointer. */
+        this.exactValue = '';
+        /** A secondary line distinct from `caption` (e.g. a comparison-period label), rendered between the
+         *  trend pill and the caption. */
+        this.sub = '';
+        /** Renders `value` as smaller/lighter prose (e.g. a loading/status message) instead of the bold
+         *  numeric headline style, and hides `unit`. */
+        this.prose = false;
+        /** Tighter padding for constrained spaces — same convention as `lyra-empty`'s `compact`. */
+        this.compact = false;
         // Same fix `lyra-empty` already established: `[part]:empty` never matches
         // because the part always contains a literal `<slot>` child. Track real
         // slot assignment in JS instead.
         this.hasIcon = false;
         this.hasCaptionSlot = false;
         this.hasSparkSlot = false;
+        this.hasSubSlot = false;
         this.onIconSlotChange = (e) => {
             this.hasIcon = e.target.assignedElements({ flatten: true }).length > 0;
         };
@@ -67,6 +82,9 @@ export class LyraStat extends LyraElement {
         this.onSparkSlotChange = (e) => {
             this.hasSparkSlot = e.target.assignedElements({ flatten: true }).length > 0;
         };
+        this.onSubSlotChange = (e) => {
+            this.hasSubSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
     }
     static { this.styles = [LyraElement.styles, styles, srOnly]; }
     willUpdate() {
@@ -74,6 +92,7 @@ export class LyraStat extends LyraElement {
             this.hasIcon = Array.from(this.children).some((el) => !el.hasAttribute('slot'));
             this.hasCaptionSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'caption');
             this.hasSparkSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'spark');
+            this.hasSubSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'sub');
         }
     }
     render() {
@@ -86,6 +105,7 @@ export class LyraStat extends LyraElement {
         // [part='trend'].
         const arrow = rawDirection === 'flat' ? '–' : chevronIcon();
         const hasCaption = this.hasCaptionSlot || this.caption.length > 0;
+        const hasSub = this.hasSubSlot || this.sub.length > 0;
         // The visible pill only ever shows the icon rotation + color to convey
         // direction and good/bad polarity; both are invisible to screen readers,
         // so mirror them into a plain-language sr-only announcement.
@@ -99,7 +119,9 @@ export class LyraStat extends LyraElement {
         ></span>
         <span part="label">${this.label}</span>
         <div part="value-row">
-          <span part="value">${this.value}</span>
+          <span part="value" title=${this.exactValue || nothing} tabindex=${this.exactValue ? '0' : nothing}
+            >${this.value}</span
+          >
           <span part="unit">${this.unit}</span>
         </div>
         ${hasTrend
@@ -112,6 +134,9 @@ export class LyraStat extends LyraElement {
               <span class="sr-only">${trendAnnouncement}</span>
             </span>`
             : nothing}
+        <div part="sub" ?hidden=${!hasSub}>
+          ${this.sub}<slot name="sub" @slotchange=${this.onSubSlotChange}></slot>
+        </div>
         <div part="spark" ?hidden=${!this.hasSparkSlot}>
           <slot name="spark" @slotchange=${this.onSparkSlotChange}></slot>
         </div>
@@ -157,6 +182,18 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraStat.prototype, "emphasis", void 0);
+__decorate([
+    property({ attribute: 'exact-value' })
+], LyraStat.prototype, "exactValue", void 0);
+__decorate([
+    property()
+], LyraStat.prototype, "sub", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraStat.prototype, "prose", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraStat.prototype, "compact", void 0);
 __decorate([
     state()
 ], LyraStat.prototype, "hasIcon", void 0);
@@ -166,4 +203,7 @@ __decorate([
 __decorate([
     state()
 ], LyraStat.prototype, "hasSparkSlot", void 0);
+__decorate([
+    state()
+], LyraStat.prototype, "hasSubSlot", void 0);
 defineElement('stat', LyraStat);

package/dist/components/stat/stat.stories.d.ts

@@ -6,3 +6,4 @@ export declare const Gallery: Story;
 export declare const SparkAndBreakdown: Story;
 export declare const BreakdownRows: Story;
 export declare const Emphasis: Story;
+export declare const ExactValueSubProseCompact: Story;

package/dist/components/stat/stat.stories.js

@@ -62,3 +62,20 @@ export const Emphasis = {
     </div>
   `,
 };
+export const ExactValueSubProseCompact = {
+    render: () => html `
+    <div class="flex flex-wrap gap-4">
+      <lyra-stat
+        label="Revenue"
+        value="$1.2K"
+        exact-value="$1,204.37"
+        sub="vs. last week"
+        caption="Updated 2h ago"
+        trend="3.2"
+        variant="success"
+      ></lyra-stat>
+      <lyra-stat label="Status" prose value="Waiting for the next sync…"></lyra-stat>
+      <lyra-stat label="Sessions" value="9,204" sub="+312 today" compact></lyra-stat>
+    </div>
+  `,
+};

package/dist/components/stat/stat.styles.js

@@ -84,6 +84,13 @@ export const styles = css `
   [part='spark'][hidden] {
     display: none;
   }
+  [part='sub'] {
+    font-size: 0.8125rem;
+    font-weight: 600;
+  }
+  [part='sub'][hidden] {
+    display: none;
+  }
   [part='caption'] {
     font-size: 0.8125rem;
     color: var(--lyra-color-text-quiet);
@@ -127,4 +134,17 @@ export const styles = css `
   :host([emphasis][variant='neutral']) [part='value'] {
     color: var(--lyra-color-brand);
   }
+  :host([prose]) [part='value'] {
+    font-size: 0.9375rem;
+    font-weight: 400;
+    font-family: inherit;
+    color: var(--lyra-color-text-quiet);
+  }
+  :host([prose]) [part='unit'] {
+    display: none;
+  }
+  :host([compact]) [part='base'] {
+    padding: var(--lyra-space-s);
+    gap: 0.125rem;
+  }
 `;

package/dist/components/widget/widget.d.ts

@@ -21,6 +21,10 @@ import { LyraElement } from '../../internal/lyra-element.js';
  * @csspart fullscreen-button - The fullscreen toggle button.
  * @csspart body - The wrapper around the default slot (the panel body).
  * @csspart backdrop - The fullscreen scrim behind the panel.
+ *
+ * `fullscreen-inset` overrides the default `var(--lyra-space-l)` inset applied to `[part="base"]`
+ * and `[part="backdrop"]` while fullscreen (e.g. `"0 0 0 240px"` to leave a persistent sidebar
+ * visible). `compact` tightens header/body padding — same convention as `lyra-empty`'s `compact`.
  */
 export declare class LyraWidget extends LyraElement {
     static styles: import("lit").CSSResultGroup[];
@@ -30,6 +34,12 @@ export declare class LyraWidget extends LyraElement {
     collapsed: boolean;
     expandable: boolean;
     fullscreen: boolean;
+    /** Raw CSS `inset` shorthand applied to the fullscreen panel and backdrop instead of the default
+     *  `var(--lyra-space-l)` on every side — e.g. `"0 0 0 240px"` to leave a 240px persistent sidebar
+     *  visible while fullscreen. */
+    fullscreenInset: string;
+    /** Tighter header/body padding for constrained spaces. */
+    compact: boolean;
     private hasActionsSlot;
     private releaseScrollLock?;
     private lastTrigger?;

package/dist/components/widget/widget.js

@@ -69,6 +69,10 @@ function isRendered(el) {
  * @csspart fullscreen-button - The fullscreen toggle button.
  * @csspart body - The wrapper around the default slot (the panel body).
  * @csspart backdrop - The fullscreen scrim behind the panel.
+ *
+ * `fullscreen-inset` overrides the default `var(--lyra-space-l)` inset applied to `[part="base"]`
+ * and `[part="backdrop"]` while fullscreen (e.g. `"0 0 0 240px"` to leave a persistent sidebar
+ * visible). `compact` tightens header/body padding — same convention as `lyra-empty`'s `compact`.
  */
 export class LyraWidget extends LyraElement {
     constructor() {
@@ -79,6 +83,12 @@ export class LyraWidget extends LyraElement {
         this.collapsed = false;
         this.expandable = false;
         this.fullscreen = false;
+        /** Raw CSS `inset` shorthand applied to the fullscreen panel and backdrop instead of the default
+         *  `var(--lyra-space-l)` on every side — e.g. `"0 0 0 240px"` to leave a 240px persistent sidebar
+         *  visible while fullscreen. */
+        this.fullscreenInset = '';
+        /** Tighter header/body padding for constrained spaces. */
+        this.compact = false;
         this.hasActionsSlot = false;
         this.bodyId = nextId('widget-body');
         this.onActionsSlotChange = (e) => {
@@ -221,13 +231,20 @@ export class LyraWidget extends LyraElement {
         const hasLabel = this.label.length > 0;
         const hasSublabel = this.sublabel.length > 0;
         return html `
-      ${this.fullscreen ? html `<div part="backdrop" @click=${this.onBackdropClick}></div>` : nothing}
+      ${this.fullscreen
+            ? html `<div
+            part="backdrop"
+            style=${this.fullscreenInset ? `--lyra-widget-fullscreen-inset:${this.fullscreenInset}` : nothing}
+            @click=${this.onBackdropClick}
+          ></div>`
+            : nothing}
       <div
         part="base"
         role=${this.fullscreen ? 'dialog' : nothing}
         aria-modal=${this.fullscreen ? 'true' : nothing}
         aria-label=${this.fullscreen ? (hasLabel ? this.label : 'Fullscreen panel') : nothing}
         tabindex=${this.fullscreen ? '-1' : nothing}
+        style=${this.fullscreenInset ? `--lyra-widget-fullscreen-inset:${this.fullscreenInset}` : nothing}
       >
         <div part="header">
           <div part="title">
@@ -288,6 +305,12 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], LyraWidget.prototype, "fullscreen", void 0);
+__decorate([
+    property({ attribute: 'fullscreen-inset' })
+], LyraWidget.prototype, "fullscreenInset", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraWidget.prototype, "compact", void 0);
 __decorate([
     state()
 ], LyraWidget.prototype, "hasActionsSlot", void 0);

package/dist/components/widget/widget.stories.d.ts

@@ -5,3 +5,5 @@ type Story = StoryObj;
 export declare const Default: Story;
 export declare const CollapsedInitially: Story;
 export declare const FullscreenInitially: Story;
+export declare const FullscreenWithSidebarInset: Story;
+export declare const Compact: Story;

package/dist/components/widget/widget.stories.js

@@ -39,3 +39,36 @@ export const FullscreenInitially = {
     </lyra-widget>
   `,
 };
+export const FullscreenWithSidebarInset = {
+    render: () => html `
+    <div style="position: relative;">
+      <div
+        style="position: fixed; inset: 0 auto 0 0; inline-size: 240px; background: #1e293b; color: #fff; padding: 1rem; z-index: 1001;"
+      >
+        Persistent sidebar (stays visible above the widget's fullscreen panel)
+      </div>
+      <lyra-widget
+        label="Load profile"
+        sublabel="Last 7 days"
+        expandable
+        fullscreen
+        fullscreen-inset="0 0 0 240px"
+        style="max-width: 28rem;"
+      >
+        <div style="padding: 1rem;">
+          <p style="margin: 0;">
+            Fullscreen with <code>fullscreen-inset="0 0 0 240px"</code> — the panel and backdrop leave
+            room for the 240px sidebar instead of covering it.
+          </p>
+        </div>
+      </lyra-widget>
+    </div>
+  `,
+};
+export const Compact = {
+    render: () => html `
+    <lyra-widget label="Alerts" sublabel="3 active" compact collapsible expandable style="max-width: 28rem;">
+      <div style="padding: 0.5rem;">Tighter header/body padding for constrained spaces.</div>
+    </lyra-widget>
+  `,
+};

package/dist/components/widget/widget.styles.js

@@ -6,6 +6,7 @@ export const styles = css `
        without a raw literal leaking into the public API (no shared
        --wa-*-overlay token exists in the design system to resolve through). */
     --lyra-widget-overlay-color: rgb(0 0 0 / 0.5);
+    --lyra-widget-fullscreen-inset: var(--lyra-space-l);
   }
   [part='base'] {
     display: flex;
@@ -77,13 +78,13 @@ export const styles = css `
   }
   [part='backdrop'] {
     position: fixed;
-    inset: 0;
+    inset: var(--lyra-widget-fullscreen-inset, 0);
     background: var(--lyra-widget-overlay-color);
     z-index: 999;
   }
   :host([fullscreen]) [part='base'] {
     position: fixed;
-    inset: var(--lyra-space-l);
+    inset: var(--lyra-widget-fullscreen-inset);
     z-index: 1000;
     box-shadow: var(--lyra-shadow);
   }
@@ -91,6 +92,12 @@ export const styles = css `
     overflow: auto;
     block-size: 100%;
   }
+  :host([compact]) [part='header'] {
+    padding: var(--lyra-space-xs) var(--lyra-space-s);
+  }
+  :host([compact]) [part='body'] {
+    padding: var(--lyra-space-s);
+  }
   @media (prefers-reduced-motion: reduce) {
     [part='collapse-button'],
     [part='fullscreen-button'] {

package/dist/components/word-cloud/word-cloud.styles.js

@@ -20,6 +20,7 @@ export const styles = css `
     display: flex;
     flex-direction: column;
     gap: var(--lyra-space-xs);
+    block-size: 100%;
   }
   svg {
     display: block;