@aceshooting/lyra-ui 0.1.0

package/dist/internal/a11y.js

@@ -0,0 +1,18 @@
+import { css } from 'lit';
+let counter = 0;
+/** Monotonic unique id, scoped by a short label (e.g. `nextId('listbox')`). */
+export const nextId = (scope) => `lyra-${scope}-${++counter}`;
+/** Visually-hidden-but-screen-reader-available helper class. */
+export const srOnly = css `
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+    border: 0;
+  }
+`;

package/dist/internal/form-associated.d.ts

@@ -0,0 +1,26 @@
+import type { LitElement } from 'lit';
+type Constructor<T> = new (...args: any[]) => T;
+/** Public surface a `FormAssociated`-mixed element exposes to consumers and subclasses. */
+export interface FormAssociatedInterface {
+    internals: ElementInternals;
+    name: string;
+    value: string;
+    disabled: boolean;
+    required: boolean;
+    setFormValue(next: string): void;
+    checkValidity(): boolean;
+    reportValidity(): boolean;
+}
+/**
+ * Mixin that turns a Lit component into a form-associated custom element via
+ * `ElementInternals`, so it participates in native `<form>` submission,
+ * validation, and reset — matching Web Awesome's free form controls.
+ *
+ * `value` uses a hand-written accessor (`noAccessor`) so `setFormValue` runs
+ * synchronously on assignment rather than on the async update cycle.
+ *
+ * The explicit return-type annotation is required so TypeScript can emit a
+ * declaration file for the (otherwise anonymous) mixin class (avoids TS4094).
+ */
+export declare function FormAssociated<T extends Constructor<LitElement>>(Base: T): T & Constructor<FormAssociatedInterface>;
+export {};

package/dist/internal/form-associated.js

@@ -0,0 +1,56 @@
+/**
+ * Mixin that turns a Lit component into a form-associated custom element via
+ * `ElementInternals`, so it participates in native `<form>` submission,
+ * validation, and reset — matching Web Awesome's free form controls.
+ *
+ * `value` uses a hand-written accessor (`noAccessor`) so `setFormValue` runs
+ * synchronously on assignment rather than on the async update cycle.
+ *
+ * The explicit return-type annotation is required so TypeScript can emit a
+ * declaration file for the (otherwise anonymous) mixin class (avoids TS4094).
+ */
+export function FormAssociated(Base) {
+    class FormAssociatedElement extends Base {
+        static { this.formAssociated = true; }
+        static { this.properties = {
+            name: {},
+            value: { noAccessor: true },
+            disabled: { type: Boolean, reflect: true },
+            required: { type: Boolean, reflect: true },
+        }; }
+        constructor(...args) {
+            super(...args);
+            this.name = '';
+            this.disabled = false;
+            this.required = false;
+            this._value = '';
+            this.internals = this.attachInternals();
+        }
+        get value() {
+            return this._value;
+        }
+        set value(next) {
+            const old = this._value;
+            this._value = next ?? '';
+            this.internals.setFormValue(this._value);
+            this.requestUpdate('value', old);
+        }
+        /** Programmatically set the submitted value (alias kept for clarity). */
+        setFormValue(next) {
+            this.value = next;
+        }
+        checkValidity() {
+            return this.internals.checkValidity();
+        }
+        reportValidity() {
+            return this.internals.reportValidity();
+        }
+        formResetCallback() {
+            this.value = '';
+        }
+        formDisabledCallback(disabled) {
+            this.disabled = disabled;
+        }
+    }
+    return FormAssociatedElement;
+}

package/dist/internal/lyra-element.d.ts

@@ -0,0 +1,11 @@
+import { LitElement, type CSSResultGroup } from 'lit';
+/**
+ * Shared base for every Lyra component. Supplies the design-token layer
+ * (Web Awesome `--wa-*` tokens with `--lyra-*` fallbacks). RTL is handled by
+ * components using CSS logical properties rather than a forced `dir`.
+ */
+export declare class LyraElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** Dispatch a composed, bubbling `lyra-*` custom event. */
+    protected emit<T = unknown>(name: string, detail?: T): CustomEvent<T>;
+}

package/dist/internal/lyra-element.js

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+import { tokens } from './tokens.styles.js';
+/**
+ * Shared base for every Lyra component. Supplies the design-token layer
+ * (Web Awesome `--wa-*` tokens with `--lyra-*` fallbacks). RTL is handled by
+ * components using CSS logical properties rather than a forced `dir`.
+ */
+export class LyraElement extends LitElement {
+    static { this.styles = [tokens]; }
+    /** Dispatch a composed, bubbling `lyra-*` custom event. */
+    emit(name, detail) {
+        const event = new CustomEvent(name, {
+            detail: detail,
+            bubbles: true,
+            composed: true,
+            cancelable: true,
+        });
+        this.dispatchEvent(event);
+        return event;
+    }
+}

package/dist/internal/positioner.d.ts

@@ -0,0 +1,10 @@
+import { type Placement } from '@floating-ui/dom';
+export interface PlaceOptions {
+    placement?: Placement;
+    offset?: number;
+}
+/**
+ * Position `popup` (fixed) relative to `anchor` with flip/shift, keeping it
+ * updated on scroll/resize. Returns a cleanup function that stops updating.
+ */
+export declare function place(anchor: HTMLElement, popup: HTMLElement, opts?: PlaceOptions): () => void;

package/dist/internal/positioner.js

@@ -0,0 +1,21 @@
+import { computePosition, autoUpdate, flip, shift, offset, } from '@floating-ui/dom';
+/**
+ * Position `popup` (fixed) relative to `anchor` with flip/shift, keeping it
+ * updated on scroll/resize. Returns a cleanup function that stops updating.
+ */
+export function place(anchor, popup, opts = {}) {
+    popup.style.position = 'fixed';
+    popup.style.margin = '0';
+    const update = () => computePosition(anchor, popup, {
+        // The popup is `position: fixed`, so Floating UI must compute viewport-relative
+        // coordinates; without this it defaults to 'absolute' and the popup lands off by
+        // the scroll offset (appears too far down on a scrolled page).
+        strategy: 'fixed',
+        placement: opts.placement ?? 'bottom-start',
+        middleware: [offset(opts.offset ?? 4), flip(), shift({ padding: 8 })],
+    }).then(({ x, y }) => {
+        popup.style.left = `${x}px`;
+        popup.style.top = `${y}px`;
+    });
+    return autoUpdate(anchor, popup, update);
+}

package/dist/internal/prefix.d.ts

@@ -0,0 +1,4 @@
+export declare const LYRA_PREFIX = "lyra";
+export declare const tag: (name: string) => string;
+/** Idempotent registration — safe if a module is imported twice. */
+export declare function defineElement(name: string, ctor: CustomElementConstructor): void;

package/dist/internal/prefix.js

@@ -0,0 +1,8 @@
+export const LYRA_PREFIX = 'lyra';
+export const tag = (name) => `${LYRA_PREFIX}-${name}`;
+/** Idempotent registration — safe if a module is imported twice. */
+export function defineElement(name, ctor) {
+    const t = tag(name);
+    if (!customElements.get(t))
+        customElements.define(t, ctor);
+}

package/dist/internal/tokens.styles.d.ts

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

package/dist/internal/tokens.styles.js

@@ -0,0 +1,35 @@
+import { css } from 'lit';
+// Every design value references a Web Awesome token with a --lyra-* fallback,
+// so components look native inside a WA app and still render standalone.
+export const tokens = css `
+  :host {
+    --lyra-color-surface: var(--wa-color-surface-default, #fff);
+    --lyra-color-text: var(--wa-color-text-normal, #1a1a1a);
+    --lyra-color-text-quiet: var(--wa-color-text-quiet, #6b7280);
+    --lyra-color-border: var(--wa-color-neutral-fill-normal, #d4d4d8);
+    --lyra-color-brand: var(--wa-color-brand-fill-loud, #0969da);
+    --lyra-color-brand-quiet: var(--wa-color-brand-fill-quiet, #ddf4ff);
+    --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);
+    --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);
+    --lyra-space-l: var(--wa-space-l, 1rem);
+    --lyra-radius: var(--wa-border-radius-m, 0.375rem);
+    --lyra-shadow: var(--wa-shadow-m, 0 2px 8px rgb(0 0 0 / 0.15));
+    --lyra-font: var(--wa-font-family-body, system-ui, sans-serif);
+
+    font-family: var(--lyra-font);
+    color: var(--lyra-color-text);
+    box-sizing: border-box;
+  }
+  :host([hidden]) {
+    display: none !important;
+  }
+  *,
+  *::before,
+  *::after {
+    box-sizing: inherit;
+  }
+`;

package/dist/lyra.d.ts

@@ -0,0 +1,26 @@
+import './components/sparkline/sparkline.js';
+import './components/toast/toast.js';
+import './components/toast/toast-item.js';
+import './components/combobox/combobox.js';
+import './components/combobox/option.js';
+import './components/date-picker/date-picker.js';
+import './components/date-picker/date-input.js';
+import './components/flag/flag.js';
+export { LyraSparkline } from './components/sparkline/sparkline.js';
+export { LyraToast } from './components/toast/toast.js';
+export type { ToastPlacement, ToastCreateOptions } from './components/toast/toast.js';
+export { LyraToastItem } from './components/toast/toast-item.js';
+export type { ToastVariant, ToastSize } from './components/toast/toast-item.js';
+export { toast } from './components/toast/toaster.js';
+export type { ToastOptions, ToastHandle } from './components/toast/toaster.js';
+export { LyraCombobox } from './components/combobox/combobox.js';
+export type { OptionFilter } from './components/combobox/combobox.js';
+export { LyraOption } from './components/combobox/option.js';
+export { LyraDatePicker } from './components/date-picker/date-picker.js';
+export type { DateRange } from './components/date-picker/date-picker.js';
+export { LyraDateInput } from './components/date-picker/date-input.js';
+export { LyraFlag } from './components/flag/flag.js';
+export { LANGUAGE_TO_COUNTRY, languageToCountry } from './components/flag/language-map.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

@@ -0,0 +1,23 @@
+// Side-effect imports register every component…
+import './components/sparkline/sparkline.js';
+import './components/toast/toast.js';
+import './components/toast/toast-item.js';
+import './components/combobox/combobox.js';
+import './components/combobox/option.js';
+import './components/date-picker/date-picker.js';
+import './components/date-picker/date-input.js';
+import './components/flag/flag.js';
+// …and the barrel re-exports classes, helpers, and types.
+export { LyraSparkline } from './components/sparkline/sparkline.js';
+export { LyraToast } from './components/toast/toast.js';
+export { LyraToastItem } from './components/toast/toast-item.js';
+export { toast } from './components/toast/toaster.js';
+export { LyraCombobox } from './components/combobox/combobox.js';
+export { LyraOption } from './components/combobox/option.js';
+export { LyraDatePicker } from './components/date-picker/date-picker.js';
+export { LyraDateInput } from './components/date-picker/date-input.js';
+export { LyraFlag } from './components/flag/flag.js';
+export { LANGUAGE_TO_COUNTRY, languageToCountry } from './components/flag/language-map.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/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@aceshooting/lyra-ui",
+  "version": "0.1.0",
+  "description": "Free, clean-room Lit web components — a companion to Web Awesome.",
+  "license": "MIT",
+  "type": "module",
+  "author": {
+    "name": "Aceshooting",
+    "email": "info@aceshooting.com"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/aceshooting/lyra-ui.git",
+    "directory": "packages/lyra-ui"
+  },
+  "homepage": "https://github.com/aceshooting/lyra-ui#readme",
+  "bugs": {
+    "url": "https://github.com/aceshooting/lyra-ui/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": "./dist/lyra.js",
+    "./components/*": "./dist/components/*",
+    "./internal/*": "./dist/internal/*"
+  },
+  "sideEffects": [
+    "**/components/**/*.js",
+    "./dist/lyra.js"
+  ],
+  "dependencies": {
+    "lit": "^3.2.0",
+    "@floating-ui/dom": "^1.6.0"
+  },
+  "peerDependencies": {
+    "@aceshooting/lyra-flags": "^0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@aceshooting/lyra-flags": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "typescript": "^5.6.0",
+    "@web/test-runner": "^0.19.0",
+    "@web/test-runner-playwright": "^0.11.0",
+    "@web/dev-server-esbuild": "^1.0.2",
+    "@open-wc/testing": "^4.0.0",
+    "@custom-elements-manifest/analyzer": "^0.10.0",
+    "@aceshooting/lyra-flags": "0.1.0"
+  },
+  "customElements": "custom-elements.json",
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "test": "wtr",
+    "test:watch": "wtr --watch",
+    "manifest": "cem analyze --litelement --outdir .",
+    "lint": "tsc --noEmit -p tsconfig.json"
+  }
+}