@aceshooting/lyra-ui 0.1.5 → 1.0.1

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

@@ -0,0 +1,40 @@
+import { type TemplateResult, type PropertyValues } from 'lit';
+import { LyraElement } from '../../internal/lyra-element.js';
+/**
+ * `<lyra-widget>` — a titled panel shell with an optional collapse toggle and
+ * an optional fullscreen-expand toggle. Fullscreen promotes the same host
+ * element in place (a CSS state, not a clone/portal), so slotted content
+ * (a chart, a running simulation, scroll position) survives the transition.
+ *
+ * @customElement lyra-widget
+ * @slot - The panel body.
+ * @slot actions - Header action controls, rendered before the collapse/expand buttons.
+ * @event lyra-collapse-change - `detail: boolean` (the new `collapsed` state).
+ * @event lyra-fullscreen-change - `detail: boolean` (the new `fullscreen` state).
+ * @csspart base, header, title, label, sublabel, actions, body, backdrop
+ */
+export declare class LyraWidget extends LyraElement {
+    static styles: import("lit").CSSResultGroup[];
+    label: string;
+    sublabel: string;
+    collapsible: boolean;
+    collapsed: boolean;
+    expandable: boolean;
+    fullscreen: boolean;
+    private hasActionsSlot;
+    private releaseScrollLock?;
+    private lastTrigger?;
+    protected willUpdate(changed: PropertyValues): void;
+    disconnectedCallback(): void;
+    private onActionsSlotChange;
+    private toggleCollapsed;
+    private toggleFullscreen;
+    private onDocKeyDown;
+    private onBackdropClick;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'lyra-widget': LyraWidget;
+    }
+}

package/dist/components/widget/widget.js

@@ -0,0 +1,159 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, nothing } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { LyraElement } from '../../internal/lyra-element.js';
+import { defineElement } from '../../internal/prefix.js';
+import { lockScroll } from '../../internal/scroll-lock.js';
+import { chevronIcon, closeIcon, expandIcon } from '../../internal/icons.js';
+import { styles } from './widget.styles.js';
+/**
+ * `<lyra-widget>` — a titled panel shell with an optional collapse toggle and
+ * an optional fullscreen-expand toggle. Fullscreen promotes the same host
+ * element in place (a CSS state, not a clone/portal), so slotted content
+ * (a chart, a running simulation, scroll position) survives the transition.
+ *
+ * @customElement lyra-widget
+ * @slot - The panel body.
+ * @slot actions - Header action controls, rendered before the collapse/expand buttons.
+ * @event lyra-collapse-change - `detail: boolean` (the new `collapsed` state).
+ * @event lyra-fullscreen-change - `detail: boolean` (the new `fullscreen` state).
+ * @csspart base, header, title, label, sublabel, actions, body, backdrop
+ */
+export class LyraWidget extends LyraElement {
+    constructor() {
+        super(...arguments);
+        this.label = '';
+        this.sublabel = '';
+        this.collapsible = false;
+        this.collapsed = false;
+        this.expandable = false;
+        this.fullscreen = false;
+        this.hasActionsSlot = false;
+        this.onActionsSlotChange = (e) => {
+            this.hasActionsSlot = e.target.assignedElements({ flatten: true }).length > 0;
+        };
+        this.toggleCollapsed = () => {
+            this.collapsed = !this.collapsed;
+            this.emit('lyra-collapse-change', this.collapsed);
+        };
+        this.toggleFullscreen = (e) => {
+            this.lastTrigger = e.currentTarget;
+            this.fullscreen = !this.fullscreen;
+            this.emit('lyra-fullscreen-change', this.fullscreen);
+            if (!this.fullscreen) {
+                this.lastTrigger?.focus();
+            }
+        };
+        this.onDocKeyDown = (e) => {
+            if (e.key === 'Escape' && this.fullscreen) {
+                e.preventDefault();
+                this.fullscreen = false;
+                this.emit('lyra-fullscreen-change', false);
+                this.lastTrigger?.focus();
+            }
+        };
+        this.onBackdropClick = () => {
+            if (!this.fullscreen)
+                return;
+            this.fullscreen = false;
+            this.emit('lyra-fullscreen-change', false);
+            document.removeEventListener('keydown', this.onDocKeyDown);
+            this.lastTrigger?.focus();
+        };
+    }
+    static { this.styles = [LyraElement.styles, styles]; }
+    willUpdate(changed) {
+        if (!this.hasUpdated) {
+            this.hasActionsSlot = Array.from(this.children).some((el) => el.getAttribute('slot') === 'actions');
+        }
+        if (changed.has('fullscreen')) {
+            if (this.fullscreen) {
+                this.releaseScrollLock = lockScroll();
+                document.addEventListener('keydown', this.onDocKeyDown);
+            }
+            else {
+                this.releaseScrollLock?.();
+                this.releaseScrollLock = undefined;
+                document.removeEventListener('keydown', this.onDocKeyDown);
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.releaseScrollLock?.();
+        this.releaseScrollLock = undefined;
+        document.removeEventListener('keydown', this.onDocKeyDown);
+    }
+    render() {
+        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}
+      <div part="base">
+        <div part="header">
+          <div part="title">
+            ${hasLabel ? html `<span part="label">${this.label}</span>` : nothing}
+            ${hasSublabel ? html `<span part="sublabel">${this.sublabel}</span>` : nothing}
+          </div>
+          <div part="actions" ?hidden=${!this.hasActionsSlot}>
+            <slot name="actions" @slotchange=${this.onActionsSlotChange}></slot>
+          </div>
+          ${this.collapsible
+            ? html `<button
+                part="collapse-button"
+                type="button"
+                aria-expanded=${this.collapsed ? 'false' : 'true'}
+                aria-label=${this.collapsed ? 'Expand panel' : 'Collapse panel'}
+                @click=${this.toggleCollapsed}
+              >
+                <span style="display:inline-flex;transform:rotate(${this.collapsed ? '0deg' : '90deg'})"
+                  >${chevronIcon()}</span
+                >
+              </button>`
+            : nothing}
+          ${this.expandable
+            ? html `<button
+                part="fullscreen-button"
+                type="button"
+                aria-pressed=${this.fullscreen ? 'true' : 'false'}
+                aria-label=${this.fullscreen ? 'Exit fullscreen' : 'Expand to fullscreen'}
+                @click=${this.toggleFullscreen}
+              >
+                ${this.fullscreen ? closeIcon() : expandIcon()}
+              </button>`
+            : nothing}
+        </div>
+        <div part="body" ?hidden=${this.collapsed}>
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+}
+__decorate([
+    property()
+], LyraWidget.prototype, "label", void 0);
+__decorate([
+    property()
+], LyraWidget.prototype, "sublabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraWidget.prototype, "collapsible", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraWidget.prototype, "collapsed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraWidget.prototype, "expandable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LyraWidget.prototype, "fullscreen", void 0);
+__decorate([
+    state()
+], LyraWidget.prototype, "hasActionsSlot", void 0);
+defineElement('widget', LyraWidget);

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const CollapsedInitially: Story;

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

@@ -0,0 +1,31 @@
+import { html } from 'lit';
+const meta = {
+    title: 'Widget',
+    component: 'lyra-widget',
+    tags: ['autodocs'],
+};
+export default meta;
+export const Default = {
+    render: () => html `
+    <lyra-widget
+      label="Load profile"
+      sublabel="Last 7 days"
+      collapsible
+      expandable
+      style="max-width: 28rem;"
+    >
+      <span slot="actions"><button>Refresh</button></span>
+      <div style="padding: 1rem;">
+        <p style="margin: 0 0 0.5rem;">Panel body content — a chart, a table, anything.</p>
+        <p style="margin: 0; color: #666;">Click the chevron to collapse, or the expand icon to go fullscreen.</p>
+      </div>
+    </lyra-widget>
+  `,
+};
+export const CollapsedInitially = {
+    render: () => html `
+    <lyra-widget label="Alerts" sublabel="3 active" collapsible collapsed style="max-width: 28rem;">
+      <div style="padding: 1rem;">This body is hidden until the panel is expanded.</div>
+    </lyra-widget>
+  `,
+};

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

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

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

@@ -0,0 +1,90 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+  [part='base'] {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--lyra-color-border);
+    border-radius: var(--lyra-radius);
+    background: var(--lyra-color-surface);
+    overflow: hidden;
+  }
+  [part='header'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-s);
+    padding: var(--lyra-space-s) var(--lyra-space-m);
+    border-block-end: 1px solid var(--lyra-color-border);
+  }
+  [part='title'] {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+  [part='label'] {
+    font-weight: 600;
+  }
+  [part='sublabel'] {
+    font-size: 0.8125rem;
+    color: var(--lyra-color-text-quiet);
+  }
+  [part='actions'] {
+    display: flex;
+    align-items: center;
+    gap: var(--lyra-space-xs);
+  }
+  [part='actions'][hidden] {
+    display: none;
+  }
+  [part='collapse-button'],
+  [part='fullscreen-button'] {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: var(--lyra-icon-button-size);
+    min-block-size: var(--lyra-icon-button-size);
+    border: none;
+    background: transparent;
+    color: var(--lyra-color-text-quiet);
+    border-radius: var(--lyra-radius);
+    cursor: pointer;
+    transition: transform var(--lyra-transition-fast);
+  }
+  [part='collapse-button']:hover,
+  [part='fullscreen-button']:hover {
+    background: var(--lyra-color-brand-quiet);
+    color: var(--lyra-color-brand);
+  }
+  [part='collapse-button']:focus-visible,
+  [part='fullscreen-button']:focus-visible {
+    outline: var(--lyra-focus-ring-width) solid var(--lyra-focus-ring-color);
+    outline-offset: var(--lyra-focus-ring-offset);
+  }
+  [part='body'] {
+    padding: var(--lyra-space-m);
+    flex: 1 1 auto;
+    min-block-size: 0;
+  }
+  [part='body'][hidden] {
+    display: none;
+  }
+  [part='backdrop'] {
+    position: fixed;
+    inset: 0;
+    background: rgb(0 0 0 / 0.5);
+    z-index: 999;
+  }
+  :host([fullscreen]) [part='base'] {
+    position: fixed;
+    inset: var(--lyra-space-l);
+    z-index: 1000;
+    box-shadow: var(--lyra-shadow);
+  }
+  :host([fullscreen]) [part='body'] {
+    overflow: auto;
+    block-size: 100%;
+  }
+`;

package/dist/internal/icons.d.ts

@@ -9,3 +9,5 @@ export declare function playIcon(): SVGTemplateResult;
 export declare function pauseIcon(): SVGTemplateResult;
 /** A calendar/date glyph, for date-input's open-calendar toggle. */
 export declare function calendarIcon(): SVGTemplateResult;
+/** A four-corner "expand to fullscreen" glyph. */
+export declare function expandIcon(): SVGTemplateResult;

package/dist/internal/icons.js

@@ -62,3 +62,12 @@ export function calendarIcon() {
     <line x1="3" y1="10" x2="21" y2="10"></line>
   `);
 }
+/** A four-corner "expand to fullscreen" glyph. */
+export function expandIcon() {
+    return icon(svg `
+    <polyline points="15 3 21 3 21 9"></polyline>
+    <polyline points="9 21 3 21 3 15"></polyline>
+    <line x1="21" y1="3" x2="14" y2="10"></line>
+    <line x1="3" y1="21" x2="10" y2="14"></line>
+  `);
+}

package/dist/internal/scroll-lock.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Ref-counted document scroll lock — safe when a lock is acquired and
+ * released more than once concurrently (e.g. a fast open/close/open
+ * sequence). The original `overflow` value is restored only once the last
+ * outstanding lock releases.
+ */
+export declare function lockScroll(): () => void;

package/dist/internal/scroll-lock.js

@@ -0,0 +1,25 @@
+let lockCount = 0;
+let previousOverflow = '';
+/**
+ * Ref-counted document scroll lock — safe when a lock is acquired and
+ * released more than once concurrently (e.g. a fast open/close/open
+ * sequence). The original `overflow` value is restored only once the last
+ * outstanding lock releases.
+ */
+export function lockScroll() {
+    if (lockCount === 0) {
+        previousOverflow = document.documentElement.style.overflow;
+        document.documentElement.style.overflow = 'hidden';
+    }
+    lockCount++;
+    let released = false;
+    return () => {
+        if (released)
+            return;
+        released = true;
+        lockCount--;
+        if (lockCount === 0) {
+            document.documentElement.style.overflow = previousOverflow;
+        }
+    };
+}

package/dist/internal/tokens.styles.js

@@ -12,6 +12,11 @@ export const tokens = css `
     --lyra-color-success: var(--wa-color-success-fill-loud, #1a7f37);
     --lyra-color-warning: var(--wa-color-warning-fill-loud, #9a6700);
     --lyra-color-danger: var(--wa-color-danger-fill-loud, #cf222e);
+    /* Text/icon color for content painted on top of a solid brand-fill
+       background (selected calendar days, filled badges, etc.) -- almost
+       always white on both the light and dark brand fills above, so it's
+       not itself light/dark-mode-swapped like the other tokens here. */
+    --lyra-color-on-brand: var(--wa-color-on-brand, #fff);
     --lyra-space-xs: var(--wa-space-xs, 0.25rem);
     --lyra-space-s: var(--wa-space-s, 0.5rem);
     --lyra-space-m: var(--wa-space-m, 0.75rem);

package/dist/lyra.d.ts

@@ -32,6 +32,7 @@ import './components/chart/box-plot.js';
 import './components/chart/histogram.js';
 import './components/map/map.js';
 import './components/file-input/file-input.js';
+import './components/widget/widget.js';
 export { LyraSparkline } from './components/sparkline/sparkline.js';
 export { LyraToast } from './components/toast/toast.js';
 export type { ToastPlacement, ToastCreateOptions } from './components/toast/toast.js';
@@ -88,6 +89,10 @@ export type { HistogramBucket } from './components/chart/histogram-bin.js';
 export { LyraMap } from './components/map/map.js';
 export type { LegendEntry, ChoroplethLayer } from './components/map/map.js';
 export { LyraFileInput } from './components/file-input/file-input.js';
+export { LyraWidget } from './components/widget/widget.js';
+export type { MapMarker } from './components/map/map.js';
+export type { ComboboxSource, ComboboxSourceRow } from './components/combobox/combobox.js';
+export type { CalendarDay } from './components/heatmap/calendar-grid.js';
 export { LyraElement } from './internal/lyra-element.js';
 export { FormAssociated } from './internal/form-associated.js';
 export { LYRA_PREFIX, tag, defineElement } from './internal/prefix.js';

package/dist/lyra.js

@@ -33,6 +33,7 @@ import './components/chart/box-plot.js';
 import './components/chart/histogram.js';
 import './components/map/map.js';
 import './components/file-input/file-input.js';
+import './components/widget/widget.js';
 // …and the barrel re-exports classes, helpers, and types.
 export { LyraSparkline } from './components/sparkline/sparkline.js';
 export { LyraToast } from './components/toast/toast.js';
@@ -73,6 +74,7 @@ export { LyraHistogram } from './components/chart/histogram.js';
 export { binValues } from './components/chart/histogram-bin.js';
 export { LyraMap } from './components/map/map.js';
 export { LyraFileInput } from './components/file-input/file-input.js';
+export { LyraWidget } from './components/widget/widget.js';
 export { LyraElement } from './internal/lyra-element.js';
 export { FormAssociated } from './internal/form-associated.js';
 export { LYRA_PREFIX, tag, defineElement } from './internal/prefix.js';

package/llms.txt

@@ -9,6 +9,9 @@
 
 ## Docs
 
+- [Live docs site](https://aceshooting.github.io/lyra-ui/): Storybook site with a live, interactive
+  example and copy-pasteable source for every component — useful for a human reviewing this
+  library, less relevant for a coding assistant already reading this file.
 - [llms-full.txt](./llms-full.txt): Complete component-by-component API reference (properties,
   events, slots, CSS parts, themeable custom properties, optional peer deps, usage snippets, and
   known gotchas) for every tag in the library — the primary resource for a coding assistant

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aceshooting/lyra-ui",
-  "version": "0.1.5",
+  "version": "1.0.1",
   "description": "Free, clean-room Lit web components — a companion to Web Awesome.",
   "license": "MIT",
   "type": "module",
@@ -43,7 +43,7 @@
     "lit": "^3.3.3"
   },
   "peerDependencies": {
-    "@aceshooting/lyra-flags": "^0.1.0",
+    "@aceshooting/lyra-flags": "^1.0.0",
     "@sgratzl/chartjs-chart-boxplot": "^4.4.0",
     "chart.js": "^4.5.0",
     "chartjs-plugin-zoom": "^2.2.0",
@@ -83,7 +83,7 @@
     }
   },
   "devDependencies": {
-    "@aceshooting/lyra-flags": "^0.1.0",
+    "@aceshooting/lyra-flags": "^1.0.0",
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@open-wc/testing": "^4.0.0",
     "@sgratzl/chartjs-chart-boxplot": "^4.4.5",