@alacris/ui 0.0.0 → 0.1.0

package/src/components/ui-dialog.js

@@ -0,0 +1,179 @@
+// <ui-dialog> — a modal dialog.
+//
+//   <ui-dialog open=${open} @close=${() => open(false)}>
+//     <span slot="headline">Discard draft?</span>
+//     Your changes will be lost.
+//     <ui-button slot="actions" variant="text">Cancel</ui-button>
+//     <ui-button slot="actions">Discard</ui-button>
+//   </ui-dialog>
+//
+// Opening: set the `open` prop (pass a signal from the parent to stay live).
+// The dialog animates in, traps focus, and locks page scroll. It requests
+// closing by emitting `close` with a reason — the PARENT owns the state and
+// flips the signal; Escape and scrim clicks emit `close` too (unless
+// `persistent`).
+//
+// @prop  {boolean} open=false
+// @prop  {boolean} persistent=false — Escape/scrim do not request closing
+// @prop  {string}  label=''         — accessible name if no headline slot
+// @event close  — detail: { reason: 'esc' | 'scrim' | 'method' }
+// @event opened — enter animation finished
+// @event closed — exit animation finished, DOM removed
+// @slot  (default) — body content
+// @slot  headline
+// @slot  actions   — right-aligned buttons
+// @part  scrim, surface, headline, body, actions
+// @vars  see `t` below
+
+import { define, html, css, vars, effect, onCleanup, signal } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+import { presence } from '../motion/presence.js';
+import { animate, fx } from '../motion/animate.js';
+import { focusTrap, scrollLock } from '../util/focus.js';
+
+const t = vars('ui-dialog', {
+  bg: sys.color.surfaceContainerHigh,
+  fg: sys.color.onSurface,
+  headlineFg: sys.color.onSurface,
+  radius: sys.radius.xl,
+  width: 'min(560px, calc(100vw - 48px))',
+  scrim: `color-mix(in srgb, ${sys.color.scrim} 32%, transparent)`,
+});
+
+const styles = css`
+  :host { display: contents; }
+  .overlay {
+    position: fixed;
+    inset: 0;
+    z-index: ${sys.z.modal};
+    display: grid;
+    place-items: center;
+  }
+  .scrim { position: absolute; inset: 0; background: ${t.scrim}; }
+  @keyframes ui-dialog-in {
+    from { transform: scale(0.8); }
+    to { transform: none; }
+  }
+  .surface {
+    animation: ui-dialog-in ${sys.duration.medium2} ${sys.easing.emphasizedDecelerate};
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    inline-size: ${t.width};
+    max-block-size: calc(100vh - 48px);
+    background: ${t.bg};
+    color: ${t.fg};
+    border-radius: ${t.radius};
+    box-shadow: ${sys.elevation[3]};
+    padding: ${sys.space(6)};
+    gap: ${sys.space(4)};
+  }
+  .headline {
+    font: ${sys.type.headlineSm};
+    letter-spacing: ${sys.tracking.headlineSm};
+    color: ${t.headlineFg};
+  }
+  .headline:not(.has) { display: none; }
+  .body {
+    overflow: auto;
+    font: ${sys.type.bodyMd};
+    letter-spacing: ${sys.tracking.bodyMd};
+    color: ${sys.color.onSurfaceVariant};
+  }
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: ${sys.space(2)};
+  }
+  .actions:not(.has) { display: none; }
+`;
+
+define('ui-dialog', {
+  props: { open: false, persistent: false, label: '' },
+  styles: [base, styles],
+  setup({ open, persistent, label }, host) {
+    let releaseTrap = null;
+    let unlock = null;
+    let surfaceEl = null;
+    const hasHeadline = signal(false);
+
+    const requestClose = (reason) => {
+      if (reason !== 'method' && persistent()) return;
+      host.emit('close', { reason });
+    };
+
+
+    // Escape must work wherever focus is, so listen at the document while
+    // open (capture beats stopPropagation games in page code).
+    const onDocKeydown = (e) => {
+      if (e.key === 'Escape') requestClose('esc');
+    };
+
+    // Trap focus + lock scroll exactly while open; presence handles the DOM.
+    effect(() => {
+      if (open()) {
+        document.addEventListener('keydown', onDocKeydown, true);
+        unlock = scrollLock();
+        // The surface renders synchronously with the signal write, but wait a
+        // microtask so slotted content is distributed before we look for it.
+        queueMicrotask(() => {
+          if (open() && !releaseTrap) releaseTrap = focusTrap(host);
+        });
+      } else {
+        document.removeEventListener('keydown', onDocKeydown, true);
+        releaseTrap?.();
+        releaseTrap = null;
+        unlock?.();
+        unlock = null;
+        if (surfaceEl?.isConnected) {
+          animate(surfaceEl, fx.scaleOut, { duration: 'short4', easing: 'emphasizedAccelerate' });
+        }
+      }
+    });
+    onCleanup(() => {
+      document.removeEventListener('keydown', onDocKeydown, true);
+      releaseTrap?.();
+      unlock?.();
+    });
+
+    const hasSlot = (el, set) => {
+      const sync = () => set(el.assignedElements().length > 0);
+      el.addEventListener('slotchange', sync);
+      sync();
+    };
+
+    const view = () => html`
+      <div class="overlay">
+        <div class="scrim" part="scrim" aria-hidden="true" @click=${() => requestClose('scrim')}></div>
+        <div class="surface" part="surface" role="dialog" aria-modal="true"
+             aria-labelledby=${() => (hasHeadline() ? 'headline' : null)}
+             aria-label=${() => (hasHeadline() ? null : (label() || 'Dialog'))}
+             tabindex="-1" ref=${(el) => (surfaceEl = el)}>
+          <div class="headline" part="headline" id="headline"
+               ref=${(el) => hasSlot(el.querySelector('slot'), (has) => {
+                 hasHeadline.set(has);
+                 el.classList.toggle('has', has);
+               })}>
+            <slot name="headline"></slot>
+          </div>
+          <div class="body" part="body"><slot></slot></div>
+          <div class="actions" part="actions"
+               ref=${(el) => hasSlot(el.querySelector('slot'), (has) => el.classList.toggle('has', has))}>
+            <slot name="actions"></slot>
+          </div>
+        </div>
+      </div>`;
+
+    return html`${presence(open, view, {
+      enter: fx.fadeIn,
+      exit: fx.fadeOut,
+      exitDuration: 'short4',
+      onEntered: () => host.emit('opened'),
+      onExited: () => host.emit('closed'),
+    })}`;
+  },
+});
+
+export const tag = 'ui-dialog';
+export const themeVars = t;

package/src/components/ui-divider.js

@@ -0,0 +1,58 @@
+// <ui-divider> — a 1px rule separating content, horizontal or vertical.
+//
+// Props reflect to host attributes so the styling is pure CSS on :host.
+//
+// @prop  {string}  orientation='horizontal' — horizontal | vertical
+// @prop  {boolean} inset=false  — indented from the start edge (16px)
+// @prop  {boolean} middle=false — indented from both edges
+// @vars  --ui-divider-color, --ui-divider-thickness
+//
+// role="separator" with aria-orientation.
+
+import { define, html, css, vars, effect } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+
+const t = vars('ui-divider', {
+  color: sys.color.outlineVariant,
+  thickness: '1px',
+});
+
+const styles = css`
+  :host {
+    display: block;
+    flex: none;
+    align-self: stretch;
+    background: ${t.color};
+    block-size: ${t.thickness};
+    margin: 0;
+  }
+  :host([inset]) { margin-inline-start: ${sys.space(4)}; }
+  :host([middle]) { margin-inline: ${sys.space(4)}; }
+  :host([orientation="vertical"]) {
+    inline-size: ${t.thickness};
+    block-size: auto;
+    min-block-size: 1em;
+    margin-inline: 0;
+  }
+  :host([orientation="vertical"][inset]) { margin-inline: 0; margin-block-start: ${sys.space(4)}; }
+  :host([orientation="vertical"][middle]) { margin-inline: 0; margin-block: ${sys.space(4)}; }
+`;
+
+define('ui-divider', {
+  props: { orientation: 'horizontal', inset: false, middle: false },
+  styles: [base, styles],
+  setup({ orientation, inset, middle }, host) {
+    host.setAttribute('role', 'separator');
+    effect(() => {
+      host.setAttribute('orientation', orientation());
+      host.setAttribute('aria-orientation', orientation());
+    });
+    effect(() => host.toggleAttribute('inset', inset()));
+    effect(() => host.toggleAttribute('middle', middle()));
+    return html``;
+  },
+});
+
+export const tag = 'ui-divider';
+export const themeVars = t;

package/src/components/ui-drawer.js

@@ -0,0 +1,169 @@
+// <ui-drawer> — a navigation drawer, modal or standard.
+//
+//   <ui-drawer open=${open} @close=${() => open(false)}>…nav content…</ui-drawer>
+//   <ui-drawer variant="standard" anchor="start" open=${open}>…</ui-drawer>
+//
+// Modal: a fixed overlay — scrim plus a full-height panel that slides in from
+// the anchor side. Focus is trapped and page scroll locked while open. The
+// PARENT owns `open`: Escape and scrim clicks emit `close` with a reason and
+// the parent flips the signal. `opened`/`closed` fire after the enter/exit
+// animations settle.
+// Standard: an in-flow panel; the host animates its inline size open/closed —
+// no scrim, no trap.
+//
+// @prop  {boolean} open=false
+// @prop  {string}  variant='modal' — modal | standard
+// @prop  {string}  anchor='start'  — start | end (which edge it slides from)
+// @prop  {string}  label=''        — accessible name; falls back to "Navigation"
+// @event close  — modal dismissed; detail: { reason: 'esc' | 'scrim' }
+// @event opened — modal enter animation finished
+// @event closed — modal exit animation finished, DOM removed
+// @slot  (default) — drawer content
+// @part  surface, scrim
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars, effect, onCleanup } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+import { presence } from '../motion/presence.js';
+import { animate, fx } from '../motion/animate.js';
+import { focusTrap, scrollLock } from '../util/focus.js';
+
+const t = vars('ui-drawer', {
+  bg: sys.color.surfaceContainerLow,
+  stdBg: sys.color.surface,
+  fg: sys.color.onSurface,
+  width: 'min(360px, 80vw)',
+  radius: sys.radius.lg,
+  pad: sys.space(3),
+  scrim: `color-mix(in srgb, ${sys.color.scrim} 32%, transparent)`,
+});
+
+const styles = css`
+  :host { display: block; inline-size: fit-content; }
+  .overlay {
+    position: fixed;
+    inset: 0;
+    z-index: ${sys.z.drawer};
+  }
+  .scrim { position: absolute; inset: 0; background: ${t.scrim}; }
+  .surface {
+    position: absolute;
+    inset-block: 0;
+    inline-size: ${t.width};
+    background: ${t.bg};
+    color: ${t.fg};
+    padding: ${t.pad};
+    overflow-y: auto;
+    box-shadow: ${sys.elevation[1]};
+  }
+  .surface.start {
+    inset-inline-start: 0;
+    border-start-end-radius: ${t.radius};
+    border-end-end-radius: ${t.radius};
+  }
+  .surface.end {
+    inset-inline-end: 0;
+    border-start-start-radius: ${t.radius};
+    border-end-start-radius: ${t.radius};
+  }
+  .std {
+    inline-size: 0;
+    block-size: 100%;
+    overflow: hidden;
+    background: ${t.stdBg};
+    color: ${t.fg};
+    transition: inline-size ${sys.duration.medium2} ${sys.easing.emphasized};
+  }
+  .std.open { inline-size: ${t.width}; }
+  .std.start {
+    border-start-end-radius: ${t.radius};
+    border-end-end-radius: ${t.radius};
+  }
+  .std.end {
+    border-start-start-radius: ${t.radius};
+    border-end-start-radius: ${t.radius};
+  }
+  .std .inner { padding: ${t.pad}; inline-size: ${t.width}; }
+`;
+
+define('ui-drawer', {
+  props: { open: false, variant: 'modal', anchor: 'start', label: '' },
+  styles: [base, styles],
+  setup({ open, variant, anchor, label }, host) {
+    let releaseTrap = null;
+    let unlock = null;
+    let surfaceEl = null;
+
+    const slideIn = () => (anchor.peek() === 'start' ? fx.slideInLeft : fx.slideInRight);
+    const slideOut = () => (anchor.peek() === 'start' ? fx.slideOutLeft : fx.slideOutRight);
+
+    // Escape must work wherever focus is, so listen at the document while
+    // the modal drawer is open.
+    const onDocKeydown = (e) => {
+      if (e.key === 'Escape') host.emit('close', { reason: 'esc' });
+    };
+
+    // Trap focus + lock scroll exactly while the modal drawer is open.
+    effect(() => {
+      if (open() && variant() === 'modal') {
+        document.addEventListener('keydown', onDocKeydown, true);
+        if (!unlock) unlock = scrollLock();
+        queueMicrotask(() => {
+          if (open.peek() && !releaseTrap) releaseTrap = focusTrap(host);
+        });
+      } else {
+        document.removeEventListener('keydown', onDocKeydown, true);
+        releaseTrap?.();
+        releaseTrap = null;
+        unlock?.();
+        unlock = null;
+      }
+    });
+    onCleanup(() => {
+      document.removeEventListener('keydown', onDocKeydown, true);
+      releaseTrap?.();
+      unlock?.();
+    });
+
+    // The panel slides out while the presence overlay (scrim included) fades.
+    effect(() => {
+      if (!open() && surfaceEl?.isConnected) {
+        animate(surfaceEl, slideOut(), { duration: 'short4', easing: 'emphasizedAccelerate' });
+      }
+    });
+
+    const surfaceRef = (el) => {
+      surfaceEl = el;
+      animate(el, slideIn(), { duration: 'medium2', easing: 'emphasizedDecelerate' });
+    };
+
+    const overlay = () => html`
+      <div class="overlay">
+        <div class="scrim" part="scrim" aria-hidden="true" @click=${() => host.emit('close', { reason: 'scrim' })}></div>
+        <aside class=${() => `surface ${anchor()}`} part="surface" role="dialog" aria-modal="true"
+               aria-label=${() => label() || 'Navigation'} tabindex="-1" ref=${surfaceRef}>
+          <slot></slot>
+        </aside>
+      </div>`;
+
+    return html`
+      ${() =>
+        variant() === 'standard'
+          ? html`<aside class=${() => `std ${anchor()}${open() ? ' open' : ''}`} part="surface"
+                        aria-label=${() => label() || 'Navigation'}>
+              <div class="inner"><slot></slot></div>
+            </aside>`
+          : null}
+      ${presence(() => open() && variant() === 'modal', overlay, {
+        enter: fx.fadeIn,
+        exit: fx.fadeOut,
+        exitDuration: 'short4',
+        onEntered: () => host.emit('opened'),
+        onExited: () => host.emit('closed'),
+      })}`;
+  },
+});
+
+export const tag = 'ui-drawer';
+export const themeVars = t;

package/src/components/ui-fab-menu.js

@@ -0,0 +1,122 @@
+// <ui-fab-menu> — a Material FAB menu: a trigger FAB that expands related
+// actions stacked above it.
+//
+//   <ui-fab-menu>
+//     <ui-fab slot="trigger" icon="add"></ui-fab>
+//     <ui-fab icon="edit" label="Edit" size="sm"></ui-fab>
+//     <ui-fab icon="send" label="Send" size="sm"></ui-fab>
+//   </ui-fab-menu>
+//
+// The PARENT may pass `open`; clicking the trigger toggles it and emits
+// `open`/`close`. Related actions are a disclosure of buttons (not a menu
+// widget) so slotted `<ui-fab>`s keep their native button semantics.
+// Escape closes and returns focus to the trigger.
+//
+// @prop  {boolean} open=false
+// @prop  {string}  label='' — accessible name for the action list
+// @event open  — menu visible (after the enter animation)
+// @event close — menu removed (after the exit animation)
+// @slot  trigger  — the <ui-fab> that toggles the menu
+// @slot  (default) — related <ui-fab> actions
+// @part  actions, trigger
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars, effect, onCleanup } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+import { presence } from '../motion/presence.js';
+import { fx } from '../motion/animate.js';
+import './ui-fab.js';
+
+const t = vars('ui-fab-menu', {
+  gap: sys.space(4),
+});
+
+const styles = css`
+  :host {
+    display: inline-flex;
+    flex-direction: column-reverse;
+    align-items: flex-end;
+    gap: ${t.gap};
+  }
+  .actions {
+    display: flex;
+    flex-direction: column-reverse;
+    align-items: flex-end;
+    gap: ${t.gap};
+  }
+  .trigger { display: inline-flex; }
+`;
+
+define('ui-fab-menu', {
+  props: { open: false, label: '' },
+  styles: [base, styles],
+  setup({ open, label }, host) {
+    const triggerEl = () => host.querySelector('[slot="trigger"]');
+    const triggerControl = () => {
+      const el = triggerEl();
+      return el?.shadowRoot?.querySelector('button, a[href]') || el;
+    };
+    const syncTrigger = () => {
+      const control = triggerControl();
+      if (!control) return;
+      control.setAttribute('aria-haspopup', 'true');
+      control.setAttribute('aria-expanded', open.peek() ? 'true' : 'false');
+    };
+
+    host.addEventListener('click', (e) => {
+      const trigger = triggerEl();
+      if (trigger && e.composedPath().includes(trigger)) {
+        open.set(!open.peek());
+        return;
+      }
+      if (open.peek() && host.contains(e.target) && e.target !== host) {
+        open.set(false);
+      }
+    });
+
+    effect(() => {
+      open();
+      queueMicrotask(syncTrigger);
+    });
+
+    effect(() => {
+      if (!open()) return;
+      const onKey = (e) => {
+        if (e.key !== 'Escape') return;
+        e.stopPropagation();
+        open.set(false);
+        triggerControl()?.focus?.();
+      };
+      document.addEventListener('keydown', onKey, true);
+      return () => document.removeEventListener('keydown', onKey, true);
+    });
+    onCleanup(() => {
+      const control = triggerControl();
+      control?.removeAttribute('aria-haspopup');
+      control?.removeAttribute('aria-expanded');
+    });
+
+    const actionsView = () => html`
+      <div class="actions" part="actions" role="group"
+           aria-label=${() => label() || 'Actions'}>
+        <slot></slot>
+      </div>`;
+
+    return html`
+      <div class="trigger" part="trigger">
+        <slot name="trigger"></slot>
+      </div>
+      ${presence(open, actionsView, {
+        enter: fx.scaleIn,
+        exit: fx.scaleOut,
+        enterDuration: 'short4',
+        exitDuration: 'short2',
+        onEntered: () => host.emit('open'),
+        onExited: () => host.emit('close'),
+      })}`;
+  },
+});
+
+export const tag = 'ui-fab-menu';
+export const themeVars = t;

package/src/components/ui-fab.js

@@ -0,0 +1,117 @@
+// <ui-fab> — the Material floating action button, regular and extended.
+//
+// A non-empty `label` renders the extended FAB (icon + text) and is always the
+// accessible name, extended or not.
+//
+// @prop  {string}  icon=''           — registry icon name (or slot custom content)
+// @prop  {string}  label=''          — extended-FAB text; always used as aria-label
+//                                      (falls back to the icon name when empty)
+// @prop  {string}  variant='primary' — primary | secondary | tertiary | surface
+// @prop  {string}  size='md'         — sm (40px) | md (56px) | lg (96px)
+// @prop  {boolean} disabled=false
+// @event (native click bubbles; no custom event)
+// @slot  (default) — custom icon content when `icon` is empty
+// @part  control   — the <button>
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars, computed } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base, focusRingOn } from './base.js';
+import { ripple } from '../motion/ripple.js';
+import './ui-icon.js';
+
+const t = vars('ui-fab', {
+  sizeSm: '40px',
+  sizeMd: '56px',
+  sizeLg: '96px',
+  radiusSm: sys.radius.md,
+  radiusMd: sys.radius.lg,
+  radiusLg: sys.radius.xl,
+  font: sys.type.labelLg,
+  tracking: sys.tracking.labelLg,
+  primaryBg: sys.color.primaryContainer,
+  primaryFg: sys.color.onPrimaryContainer,
+  secondaryBg: sys.color.secondaryContainer,
+  secondaryFg: sys.color.onSecondaryContainer,
+  tertiaryBg: sys.color.tertiaryContainer,
+  tertiaryFg: sys.color.onTertiaryContainer,
+  surfaceBg: sys.color.surfaceContainerHigh,
+  surfaceFg: sys.color.primary,
+});
+
+const styles = css`
+  :host { display: inline-flex; vertical-align: middle; }
+  .control {
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: ${sys.space(3)};
+    block-size: calc(var(--_size) + var(--ui-density, 0) * 4px);
+    min-inline-size: calc(var(--_size) + var(--ui-density, 0) * 4px);
+    padding: 0;
+    border: none;
+    border-radius: var(--_radius);
+    font: ${t.font};
+    letter-spacing: ${t.tracking};
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    box-shadow: ${sys.elevation[3]};
+    transition: box-shadow ${sys.duration.short4} ${sys.easing.standard};
+    --ui-icon-size: var(--_icon);
+  }
+  .control:hover { box-shadow: ${sys.elevation[4]}; }
+  .control:active { box-shadow: ${sys.elevation[3]}; }
+  ${focusRingOn('.control')}
+  .layer {
+    position: absolute; inset: 0; z-index: -1;
+    border-radius: inherit;
+    background: currentColor;
+    opacity: 0;
+    transition: opacity ${sys.duration.short2} ${sys.easing.standard};
+  }
+  .control:hover .layer { opacity: ${sys.state.hover}; }
+  .control:focus-visible .layer { opacity: ${sys.state.focus}; }
+  .control:active .layer { opacity: ${sys.state.pressed}; }
+
+  .sm { --_size: ${t.sizeSm}; --_radius: ${t.radiusSm}; --_icon: 1.5rem; }
+  .md { --_size: ${t.sizeMd}; --_radius: ${t.radiusMd}; --_icon: 1.5rem; }
+  .lg { --_size: ${t.sizeLg}; --_radius: ${t.radiusLg}; --_icon: 2.25rem; }
+  .extended { padding-inline: ${sys.space(4)} 20px; --_icon: 1.5rem; }
+
+  .primary { background: ${t.primaryBg}; color: ${t.primaryFg}; }
+  .secondary { background: ${t.secondaryBg}; color: ${t.secondaryFg}; }
+  .tertiary { background: ${t.tertiaryBg}; color: ${t.tertiaryFg}; }
+  .surface { background: ${t.surfaceBg}; color: ${t.surfaceFg}; }
+
+  .control:disabled {
+    cursor: default;
+    pointer-events: none;
+    box-shadow: none;
+    color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+    background: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContainer} * 100%), transparent);
+  }
+`;
+
+define('ui-fab', {
+  props: { icon: '', label: '', variant: 'primary', size: 'md', disabled: false },
+  styles: [base, styles],
+  setup({ icon, label, variant, size, disabled }, host) {
+    const cls = computed(() =>
+      `control ${variant()} ${size()}${label() ? ' extended' : ''}`);
+
+    return html`
+      <button part="control" class=${cls} type="button" ?disabled=${disabled}
+              aria-label=${() => label() || icon() || null}
+              ref=${(el) => ripple(el, { disabled })}>
+        <span class="layer" aria-hidden="true"></span>
+        ${() => (icon() ? html`<ui-icon name=${icon}></ui-icon>` : html`<slot></slot>`)}
+        ${() => (label() ? html`<span class="text">${label}</span>` : null)}
+      </button>`;
+  },
+});
+
+export const tag = 'ui-fab';
+export const themeVars = t;