@alacris/ui 0.0.0 → 0.1.0

package/src/components/ui-menu.js

@@ -0,0 +1,192 @@
+// <ui-menu> — a menu anchored to a slotted trigger.
+//
+//   <ui-menu placement="bottom-start" @select=${(e) => ...}>
+//     <ui-icon-button slot="anchor" icon="more-vert" label="More"></ui-icon-button>
+//     <ui-menu-item value="edit" icon="edit">Edit</ui-menu-item>
+//     <ui-menu-item value="delete" icon="delete" danger>Delete</ui-menu-item>
+//   </ui-menu>
+//
+// The "anchor" slot renders inline; clicking it toggles the menu. The panel is
+// position:fixed, anchored to the slotted trigger, flips when it would
+// overflow, and stays glued through scroll/resize. While open, focus moves to
+// the first item and arrows rove vertically; Escape closes and refocuses the
+// anchor, Tab and outside pointerdown close. Selecting an item emits `select`
+// and closes.
+//
+// @prop  {boolean} open=false
+// @prop  {string}  placement='bottom-start' — side[-alignment] (see util/position.js)
+// @event select — an item was chosen; detail: { value }
+// @event open   — panel visible (after the enter animation)
+// @event close  — panel removed (after the exit animation)
+// @slot  anchor    — the trigger element
+// @slot  (default) — <ui-menu-item> children
+// @part  panel — the floating menu surface
+// @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 { autoUpdate } from '../util/position.js';
+import { rovingTabindex } from '../util/keys.js';
+import './ui-menu-item.js';
+
+const t = vars('ui-menu', {
+  bg: sys.color.surfaceContainer,
+  radius: sys.radius.xs,
+  minWidth: '112px',
+  maxWidth: '280px',
+  elevation: sys.elevation[2],
+});
+
+const styles = css`
+  :host { display: inline-block; }
+  .anchor { display: contents; }
+  .panel {
+    position: fixed;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    z-index: ${sys.z.modal};
+    min-inline-size: ${t.minWidth};
+    max-inline-size: ${t.maxWidth};
+    padding-block: ${sys.space(2)};
+    background: ${t.bg};
+    border-radius: ${t.radius};
+    box-shadow: ${t.elevation};
+    overflow-y: auto;
+    max-block-size: calc(100vh - 16px);
+  }
+`;
+
+// transform-origin on the panel's anchor-facing corner, per placement.
+const originFor = (placement) => {
+  const [side, align = 'start'] = placement.split('-');
+  const cross = align === 'end' ? 'right' : align === 'center' ? 'center' : 'left';
+  if (side === 'top') return `bottom ${cross}`;
+  if (side === 'bottom') return `top ${cross}`;
+  const block = align === 'end' ? 'bottom' : align === 'center' ? 'center' : 'top';
+  return `${block} ${side === 'left' ? 'right' : 'left'}`;
+};
+
+define('ui-menu', {
+  props: { open: false, placement: 'bottom-start' },
+  styles: [base, styles],
+  setup({ open, placement }, host) {
+    let anchorSlot = null;
+    let stopPosition = null;
+    let roving = null;
+
+    const anchorEl = () => anchorSlot?.assignedElements()[0] || host;
+
+    const popupTrigger = (el) => {
+      if (!el || el === host) return null;
+      return el.shadowRoot?.querySelector('button, a[href], [role="button"]') || el;
+    };
+
+    const syncTrigger = () => {
+      const trigger = popupTrigger(anchorEl());
+      if (!trigger) return;
+      trigger.setAttribute('aria-haspopup', 'menu');
+      trigger.setAttribute('aria-expanded', open.peek() ? 'true' : 'false');
+    };
+
+    const close = () => {
+      if (!open.peek()) return;
+      open.set(false);
+      (popupTrigger(anchorEl()) || anchorEl()).focus?.();
+    };
+
+    host.addEventListener('keydown', (e) => {
+      if (!open.peek()) return;
+      if (e.key === 'Escape') {
+        e.stopPropagation();
+        close();
+      } else if (e.key === 'Tab') {
+        close();
+      }
+    });
+
+    host.addEventListener('ui-menu-select', (e) => {
+      e.stopPropagation();
+      host.emit('select', { value: e.detail.value });
+      close();
+    });
+
+    // Keyboard roving + outside-pointerdown dismissal, exactly while open.
+    // Items may be projected through a nested slot (ui-split-button), so
+    // collect from the flattened default slot and listen on document.
+    effect(() => {
+      syncTrigger();
+      if (!open()) return;
+      const menuItems = () => {
+        const slot = host.shadowRoot?.querySelector('.panel > slot');
+        return (slot?.assignedElements({ flatten: true }) || [])
+          .filter((el) => el.localName === 'ui-menu-item');
+      };
+      roving = rovingTabindex(host, {
+        items: menuItems,
+        listenOn: document,
+        orientation: 'vertical',
+        skip: (el) => el.disabled,
+      });
+      queueMicrotask(() => {
+        if (open.peek()) roving?.focus(0);
+      });
+      const onPointerDown = (e) => {
+        if (!e.composedPath().includes(host)) close();
+      };
+      const onDocKey = (e) => {
+        if (e.key === 'Escape') {
+          e.stopPropagation();
+          close();
+        } else if (e.key === 'Tab') {
+          close();
+        }
+      };
+      document.addEventListener('pointerdown', onPointerDown);
+      document.addEventListener('keydown', onDocKey);
+      return () => {
+        document.removeEventListener('pointerdown', onPointerDown);
+        document.removeEventListener('keydown', onDocKey);
+        roving?.destroy();
+        roving = null;
+        stopPosition?.();
+        stopPosition = null;
+      };
+    });
+    onCleanup(() => stopPosition?.());
+
+    const panelRef = (el) => {
+      el.style.transformOrigin = originFor(placement());
+      stopPosition = autoUpdate(el, anchorEl(), { placement: placement() });
+    };
+
+    const view = () => html`
+      <div class="panel" part="panel" role="menu" ref=${panelRef}>
+        <slot></slot>
+      </div>`;
+
+    return html`
+      <span class="anchor" @click=${() => open.set(!open())}>
+        <slot name="anchor" ref=${(el) => {
+          anchorSlot = el;
+          el.addEventListener('slotchange', syncTrigger);
+          syncTrigger();
+        }}></slot>
+      </span>
+      ${presence(open, view, {
+        enter: fx.scaleIn,
+        exit: fx.scaleOut,
+        enterDuration: 'short4',
+        exitDuration: 'short2',
+        enterEasing: 'emphasizedDecelerate',
+        exitEasing: 'emphasizedAccelerate',
+        onEntered: () => host.emit('open'),
+        onExited: () => host.emit('close'),
+      })}`;
+  },
+});
+
+export const tag = 'ui-menu';
+export const themeVars = t;

package/src/components/ui-nav-item.js

@@ -0,0 +1,138 @@
+// <ui-nav-item> — one destination inside <ui-bottom-nav> or <ui-nav-rail>.
+//
+// @prop  {string}  value=''      — REQUIRED identity of the destination
+// @prop  {string}  icon=''       — registry icon name
+// @prop  {string}  activeIcon='' — icon while selected (defaults to `icon`)
+// @prop  {string}  label=''      — visible label (and the accessible name)
+// @prop  {boolean} selected=false — managed by <ui-bottom-nav>
+// @prop  {boolean} disabled=false
+// @event ui-nav-select — activated; detail: { value }
+// @slot  icon — custom icon content when `icon` is empty
+// @part  control — the <button>
+// @part  pill    — the 56×32 icon container
+// @vars  see `t` below (`themeVars.names`)
+//
+// Focus: the host is the roving tab stop (<ui-bottom-nav> assigns tabindex);
+// focus is forwarded to the inner button so Enter/Space activate natively.
+
+import { define, html, css, vars, computed, onCleanup } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+import { ripple } from '../motion/ripple.js';
+import './ui-icon.js';
+
+const t = vars('ui-nav-item', {
+  pillBg: sys.color.secondaryContainer,
+  iconFg: sys.color.onSurfaceVariant,
+  iconFgActive: sys.color.onSecondaryContainer,
+  labelFg: sys.color.onSurfaceVariant,
+  labelFgActive: sys.color.onSurface,
+  font: sys.type.labelMd,
+  tracking: sys.tracking.labelMd,
+});
+
+const styles = css`
+  :host { display: block; }
+  :host(:focus-visible) {
+    outline: ${sys.focus.ring};
+    outline-offset: calc(-1 * ${sys.focus.ringWidth});
+    border-radius: ${sys.radius.sm};
+  }
+  .control {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: ${sys.space(1)};
+    inline-size: 100%;
+    block-size: 100%;
+    min-inline-size: 48px;
+    padding-block: ${sys.space(3)};
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    color: ${t.iconFg};
+  }
+  .pill {
+    position: relative;
+    isolation: isolate;
+    display: grid;
+    place-items: center;
+    inline-size: 56px;
+    block-size: 32px;
+    border-radius: ${sys.radius.full};
+    transition: color ${sys.duration.short4} ${sys.easing.standard};
+  }
+  .bg {
+    position: absolute; inset: 0; z-index: -1;
+    border-radius: inherit;
+    background: ${t.pillBg};
+    opacity: 0;
+    scale: 0.6 1;
+    transition: opacity ${sys.duration.short4} ${sys.easing.standard},
+                scale ${sys.duration.medium2} ${sys.easing.emphasizedDecelerate};
+  }
+  .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, :host(:focus-visible) .layer { opacity: ${sys.state.focus}; }
+  .control:active .layer { opacity: ${sys.state.pressed}; }
+  .selected .pill { color: ${t.iconFgActive}; }
+  .selected .bg { opacity: 1; scale: 1; }
+  .label {
+    font: ${t.font};
+    letter-spacing: ${t.tracking};
+    color: ${t.labelFg};
+    transition: color ${sys.duration.short4} ${sys.easing.standard};
+  }
+  .selected .label { color: ${t.labelFgActive}; }
+  .control:disabled {
+    cursor: default;
+    pointer-events: none;
+    color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+  }
+  .control:disabled .label { color: inherit; }
+`;
+
+define('ui-nav-item', {
+  props: { value: '', icon: '', activeIcon: '', label: '', selected: false, disabled: false },
+  styles: [base, styles],
+  setup({ value, icon, activeIcon, label, selected, disabled }, host) {
+    let btn = null;
+    const forward = () => btn?.focus();
+    host.addEventListener('focus', forward);
+    onCleanup(() => host.removeEventListener('focus', forward));
+
+    const shownIcon = computed(() => (selected() && activeIcon()) || icon());
+
+    const onClick = () => {
+      if (disabled()) return;
+      host.emit('ui-nav-select', { value: value() });
+    };
+
+    return html`
+      <button part="control" class=${() => `control${selected() ? ' selected' : ''}`}
+              type="button" tabindex="-1" ?disabled=${disabled}
+              aria-label=${() => label() || value()}
+              aria-current=${() => (selected() ? 'page' : null)}
+              @click=${onClick}
+              ref=${(el) => (btn = el)}>
+        <span part="pill" class="pill" ref=${(el) => ripple(el, { disabled, centered: true })}>
+          <span class="bg" aria-hidden="true"></span>
+          <span class="layer" aria-hidden="true"></span>
+          ${() => (shownIcon() ? html`<ui-icon name=${shownIcon}></ui-icon>` : html`<slot name="icon"></slot>`)}
+        </span>
+        ${() => (label() ? html`<span class="label">${label}</span>` : null)}
+      </button>`;
+  },
+});
+
+export const tag = 'ui-nav-item';
+export const themeVars = t;

package/src/components/ui-nav-rail.js

@@ -0,0 +1,111 @@
+// <ui-nav-rail> — the Material navigation rail.
+//
+//   <ui-nav-rail value=${route} @change=${(e) => route(e.detail.value)}>
+//     <ui-fab slot="fab" icon="add"></ui-fab>
+//     <ui-nav-item value="home" icon="home" label="Home"></ui-nav-item>
+//     <ui-nav-item value="search" icon="search" label="Search"></ui-nav-item>
+//   </ui-nav-rail>
+//
+// A compact vertical destination list (the large-screen counterpart of
+// <ui-bottom-nav>). Reuses <ui-nav-item>. The host flows with the page —
+// pin it with position: sticky/fixed yourself.
+//
+// @prop  {string} value='' — the selected item's `value`
+// @prop  {string} label='' — accessible name of the <nav>
+// @prop  {string} align='start' — start | center | end (where destinations sit)
+// @event change — a destination was chosen; detail: { value }
+// @slot  menu — optional leading icon button (typically "menu")
+// @slot  fab  — optional FAB above the destinations
+// @slot  (default) — <ui-nav-item> children
+// @part  rail — the <nav> container
+// @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 { rovingTabindex } from '../util/keys.js';
+import './ui-nav-item.js';
+
+const t = vars('ui-nav-rail', {
+  width: '80px',
+  bg: sys.color.surface,
+  pad: sys.space(3),
+});
+
+const styles = css`
+  :host { display: block; inline-size: ${t.width}; block-size: 100%; }
+  .rail {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: ${sys.space(3)};
+    box-sizing: border-box;
+    inline-size: ${t.width};
+    min-block-size: 100%;
+    padding-block: ${t.pad};
+    background: ${t.bg};
+  }
+  .lead, .fab { display: flex; flex-direction: column; align-items: center; gap: ${sys.space(2)}; }
+  .lead:not(.has), .fab:not(.has) { display: none; }
+  .destinations {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: ${sys.space(1)};
+    inline-size: 100%;
+    flex: 1;
+  }
+  .destinations.start { justify-content: flex-start; }
+  .destinations.center { justify-content: center; }
+  .destinations.end { justify-content: flex-end; }
+  ::slotted(ui-nav-item) { inline-size: 100%; }
+`;
+
+define('ui-nav-rail', {
+  props: { value: '', label: '', align: 'start' },
+  styles: [base, styles],
+  setup({ value, label, align }, host) {
+    const roving = rovingTabindex(host, {
+      selector: 'ui-nav-item',
+      orientation: 'vertical',
+      skip: (el) => el.disabled,
+    });
+    onCleanup(() => roving.destroy());
+
+    const sync = () => {
+      for (const item of host.querySelectorAll('ui-nav-item')) {
+        item.selected = item.value === value();
+      }
+      roving.refresh();
+    };
+    effect(sync);
+
+    const onSelect = (e) => {
+      const v = e.detail?.value;
+      if (v === undefined || v === value()) return;
+      value.set(v);
+      host.emit('change', { value: v });
+    };
+    host.addEventListener('ui-nav-select', onSelect);
+    onCleanup(() => host.removeEventListener('ui-nav-select', onSelect));
+
+    const hasSlot = (el, set) =>
+      el.addEventListener('slotchange', () => set(el.assignedElements().length > 0));
+
+    return html`
+      <nav class="rail" part="rail" aria-label=${() => label() || null}>
+        <div class="lead" ref=${(el) => hasSlot(el.querySelector('slot'), (has) => el.classList.toggle('has', has))}>
+          <slot name="menu"></slot>
+        </div>
+        <div class="fab" ref=${(el) => hasSlot(el.querySelector('slot'), (has) => el.classList.toggle('has', has))}>
+          <slot name="fab"></slot>
+        </div>
+        <div class=${() => `destinations ${align() || 'start'}`}>
+          <slot @slotchange=${sync}></slot>
+        </div>
+      </nav>`;
+  },
+});
+
+export const tag = 'ui-nav-rail';
+export const themeVars = t;

package/src/components/ui-option.js

@@ -0,0 +1,85 @@
+// <ui-option> — one choice inside <ui-select>.
+//
+// The host itself is the option (role="option"): it lives in the select's
+// light DOM and is projected into the select's listbox panel. The select
+// drives `selected`/`active` (via their attributes) and handles activation;
+// the option only renders itself and its state layer.
+//
+// @prop  {string}  value=''       — the value this option contributes (required)
+// @prop  {boolean} disabled=false
+// @prop  {boolean} selected=false — set by the owning select; mirrors aria-selected
+// @prop  {boolean} active=false   — set by the owning select while keyboard-active
+// @slot  (default) — the visible label (also used by the select's field text)
+// @part  control — the option row
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars, effect } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+import { ripple } from '../motion/ripple.js';
+
+const t = vars('ui-option', {
+  fg: sys.color.onSurface,
+  selectedBg: sys.color.secondaryContainer,
+  selectedFg: sys.color.onSecondaryContainer,
+  font: sys.type.bodyLg,
+  height: '48px',
+});
+
+let uid = 0;
+
+const styles = css`
+  :host { display: block; cursor: pointer; user-select: none; }
+  .control {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    align-items: center;
+    gap: ${sys.space(3)};
+    min-block-size: calc(${t.height} + var(--ui-density, 0) * 4px);
+    padding-inline: ${sys.space(4)};
+    font: ${t.font};
+    letter-spacing: ${sys.tracking.bodyLg};
+    color: ${t.fg};
+  }
+  .layer {
+    position: absolute; inset: 0; z-index: -1;
+    background: currentColor; opacity: 0;
+    transition: opacity ${sys.duration.short2} ${sys.easing.standard};
+  }
+  :host(:hover) .layer { opacity: ${sys.state.hover}; }
+  :host([data-active]) .layer { opacity: ${sys.state.focus}; }
+  :host(:active) .layer { opacity: ${sys.state.pressed}; }
+  :host([aria-selected="true"]) .control {
+    background: ${t.selectedBg};
+    color: ${t.selectedFg};
+  }
+  :host([aria-disabled="true"]) { pointer-events: none; cursor: default; }
+  :host([aria-disabled="true"]) .control {
+    color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+  }
+`;
+
+define('ui-option', {
+  props: { value: '', disabled: false, selected: false, active: false },
+  styles: [base, styles],
+  setup({ disabled, selected, active }, host) {
+    if (!host.id) host.id = `ui-option-${++uid}`;
+    host.setAttribute('role', 'option');
+    effect(() => host.setAttribute('aria-selected', String(selected())));
+    effect(() => {
+      if (disabled()) host.setAttribute('aria-disabled', 'true');
+      else host.removeAttribute('aria-disabled');
+    });
+    effect(() => host.toggleAttribute('data-active', active()));
+
+    return html`
+      <div class="control" part="control" ref=${(el) => ripple(el, { disabled })}>
+        <span class="layer" aria-hidden="true"></span>
+        <slot></slot>
+      </div>`;
+  },
+});
+
+export const tag = 'ui-option';
+export const themeVars = t;