@alacris/ui 0.0.0 → 0.1.1

package/src/components/ui-snackbar.js

@@ -0,0 +1,233 @@
+// <ui-snackbar> — a transient bottom-center message, plus `showSnackbar()`,
+// an imperative service that queues messages through one shared instance.
+//
+// Declarative (parent owns the state):
+//
+//   <ui-snackbar open=${open} message="Draft saved" action="Undo"
+//                @action=${undo} @close=${() => open(false)}></ui-snackbar>
+//
+// Imperative (fire and forget; FIFO — one visible at a time):
+//
+//   const { close, closed } = showSnackbar('Message archived', { action: 'Undo' });
+//
+// The component requests closing by emitting `close` with a reason — the
+// PARENT flips `open`. `closed` fires after the exit animation finishes.
+//
+// @prop  {boolean} open=false
+// @prop  {string}  message=''
+// @prop  {string}  action=''      — label for a trailing text action button
+// @prop  {number}  duration=4000  — auto-dismiss after ms; 0 = sticky
+// @prop  {boolean} closeButton=false — trailing close icon button
+// @event action — action button pressed
+// @event close  — detail: { reason: 'timeout' | 'action' | 'close' | 'method' }
+// @event opened — enter animation finished
+// @event closed — exit animation finished, DOM removed
+// @part  surface, message, action, close
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars, effect } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base, focusRingOn } from './base.js';
+import { presence } from '../motion/presence.js';
+import { fx } from '../motion/animate.js';
+import { ripple } from '../motion/ripple.js';
+import './ui-icon.js';
+
+const t = vars('ui-snackbar', {
+  bg: sys.color.inverseSurface,
+  fg: sys.color.inverseOnSurface,
+  actionFg: sys.color.inversePrimary,
+  radius: sys.radius.xs,
+  minWidth: '288px',
+  maxWidth: '560px',
+  elevation: sys.elevation[3],
+});
+
+const styles = css`
+  :host { display: contents; }
+  .region {
+    position: fixed;
+    inset-inline: 0;
+    inset-block-end: ${sys.space(4)};
+    z-index: ${sys.z.snackbar};
+    display: flex;
+    justify-content: center;
+    padding-inline: ${sys.space(4)};
+    pointer-events: none;
+  }
+  .surface {
+    pointer-events: auto;
+    display: flex;
+    align-items: center;
+    gap: ${sys.space(1)};
+    min-inline-size: min(${t.minWidth}, 100%);
+    max-inline-size: ${t.maxWidth};
+    min-block-size: 48px;
+    padding-block: ${sys.space(1)};
+    padding-inline: ${sys.space(4)} ${sys.space(2)};
+    background: ${t.bg};
+    color: ${t.fg};
+    border-radius: ${t.radius};
+    box-shadow: ${t.elevation};
+    font: ${sys.type.bodyMd};
+    letter-spacing: ${sys.tracking.bodyMd};
+  }
+  .message { flex: 1; padding-block: ${sys.space(2)}; }
+  .surface:not(.trailing) { padding-inline-end: ${sys.space(4)}; }
+
+  .action, .close {
+    position: relative;
+    isolation: isolate;
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    border-radius: ${sys.radius.full};
+  }
+  ${focusRingOn('.action')}
+  ${focusRingOn('.close')}
+  .layer {
+    position: absolute; inset: 0; z-index: -1;
+    border-radius: inherit; background: currentColor; opacity: 0;
+    transition: opacity ${sys.duration.short2} ${sys.easing.standard};
+  }
+  .action:hover .layer, .close:hover .layer { opacity: ${sys.state.hover}; }
+  .action:focus-visible .layer, .close:focus-visible .layer { opacity: ${sys.state.focus}; }
+  .action:active .layer, .close:active .layer { opacity: ${sys.state.pressed}; }
+
+  .action {
+    block-size: 36px;
+    padding-inline: ${sys.space(2)};
+    color: ${t.actionFg};
+    font: ${sys.type.labelLg};
+    letter-spacing: ${sys.tracking.labelLg};
+    white-space: nowrap;
+  }
+  .close {
+    inline-size: 32px;
+    block-size: 32px;
+    padding: 0;
+    color: inherit;
+    --ui-icon-size: 18px;
+  }
+`;
+
+define('ui-snackbar', {
+  props: { open: false, message: '', action: '', duration: 4000, closeButton: false },
+  styles: [base, styles],
+  setup({ open, message, action, duration, closeButton }, host) {
+    const requestClose = (reason) => host.emit('close', { reason });
+
+    // Auto-dismiss while open; the cleanup clears the pending timer whenever
+    // `open`/`duration` change or the element goes away.
+    effect(() => {
+      if (!open()) return;
+      const ms = duration();
+      if (!(ms > 0)) return;
+      const id = setTimeout(() => requestClose('timeout'), ms);
+      return () => clearTimeout(id);
+    });
+
+    const view = () => html`
+      <div class="region">
+        <div part="surface" role="status" aria-live="polite"
+             class=${() => `surface${action() || closeButton() ? ' trailing' : ''}`}>
+          <span class="message" part="message">${message}</span>
+          ${() =>
+            action()
+              ? html`<button class="action" part="action" type="button"
+                        @click=${() => { host.emit('action'); requestClose('action'); }}
+                        ref=${(el) => ripple(el)}>
+                    <span class="layer" aria-hidden="true"></span>${action}
+                  </button>`
+              : null}
+          ${() =>
+            closeButton()
+              ? html`<button class="close" part="close" type="button" aria-label="Dismiss"
+                        @click=${() => requestClose('close')}
+                        ref=${(el) => ripple(el, { centered: true })}>
+                    <span class="layer" aria-hidden="true"></span>
+                    <ui-icon name="close"></ui-icon>
+                  </button>`
+              : null}
+        </div>
+      </div>`;
+
+    return html`${presence(open, view, {
+      enter: fx.slideInUp,
+      exit: fx.slideOutDown,
+      exitDuration: 'short4',
+      target: '.surface',
+      onEntered: () => host.emit('opened'),
+      onExited: () => host.emit('closed'),
+    })}`;
+  },
+});
+
+export const tag = 'ui-snackbar';
+export const themeVars = t;
+
+// --------------------------------------------------------------- service
+//
+// One shared light-DOM <ui-snackbar> appended to <body>; messages queue FIFO
+// and the next one shows only after the previous fully exited.
+
+let serviceEl = null; // singleton host
+let current = null;   // entry on screen (or animating out)
+const queue = [];
+
+function serviceHost() {
+  if (!serviceEl || !serviceEl.isConnected) {
+    serviceEl = document.createElement('ui-snackbar');
+    // The service is the "parent": it owns the open state.
+    serviceEl.addEventListener('close', () => { serviceEl.open = false; });
+    serviceEl.addEventListener('closed', () => {
+      const done = current;
+      current = null;
+      done?.resolve();
+      next();
+    });
+    document.body.append(serviceEl);
+  }
+  return serviceEl;
+}
+
+function next() {
+  if (current || !queue.length) return;
+  current = queue.shift();
+  const el = serviceHost();
+  el.message = current.message;
+  el.action = current.action;
+  el.duration = current.duration;
+  el.closeButton = current.closeButton;
+  el.open = true;
+}
+
+/**
+ * showSnackbar(message, { action, duration, closeButton })
+ *
+ * Returns { close, closed }: `close()` dismisses this snackbar (or removes it
+ * from the queue if it has not shown yet); `closed` resolves once it has fully
+ * left the screen.
+ */
+export function showSnackbar(message, { action = '', duration = 4000, closeButton = false } = {}) {
+  let resolve;
+  const closed = new Promise((r) => { resolve = r; });
+  const entry = { message, action, duration, closeButton, resolve };
+  queue.push(entry);
+  next();
+  return {
+    closed,
+    close() {
+      if (current === entry) {
+        serviceEl.open = false; // exit animation → 'closed' → resolve + next
+      } else {
+        const i = queue.indexOf(entry);
+        if (i > -1) { queue.splice(i, 1); entry.resolve(); }
+      }
+    },
+  };
+}

package/src/components/ui-spinner.js

@@ -0,0 +1,101 @@
+// <ui-spinner> — Material circular progress.
+//
+//   <ui-spinner label="Loading"></ui-spinner>                 indeterminate
+//   <ui-spinner label="Upload" value=${pct}></ui-spinner>     determinate
+//   <ui-spinner label="Loading" size="24px"></ui-spinner>
+//
+// @prop  {number} value=-1 — current value; -1 (any negative) = indeterminate
+// @prop  {number} max=100  — value scale
+// @prop  {string} size=''  — CSS length; overrides --ui-spinner-size (default 48px)
+// @prop  {string} label='' — accessible name (aria-label on the progressbar)
+// @part  progress — the progressbar wrapper
+// @vars  see `t` below (`themeVars.names`)
+//
+// One SVG circle in a 44-unit viewBox with a 4-unit stroke, so the stroke
+// scales with `size`. Determinate progress binds stroke-dashoffset from the
+// value; indeterminate is the classic rotate + dash-grow loop as CSS
+// keyframes, its cycle derived from the motion tokens.
+
+import { define, html, svg, css, vars, computed, effect } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+
+const t = vars('ui-spinner', {
+  size: '48px',
+  color: sys.color.primary,
+  trackColor: 'transparent',
+});
+
+// r=20 in a 44-unit viewBox; the arc length everything is dashed against.
+const R = 20;
+const C = 2 * Math.PI * R; // ≈ 125.66
+
+const styles = css`
+  :host {
+    display: inline-flex;
+    inline-size: ${t.size};
+    block-size: ${t.size};
+    flex: none;
+    color: ${t.color};
+  }
+  .progress, svg { inline-size: 100%; block-size: 100%; }
+  svg { transform: rotate(-90deg); } /* start determinate sweep at 12 o'clock */
+  circle { fill: none; stroke-width: 4; }
+  .track { stroke: ${t.trackColor}; }
+  .arc {
+    stroke: currentColor;
+    stroke-linecap: round;
+    transition: stroke-dashoffset ${sys.duration.short4} ${sys.easing.standard};
+  }
+
+  @keyframes ui-spinner-rotate {
+    100% { transform: rotate(360deg); }
+  }
+  @keyframes ui-spinner-dash {
+    0%   { stroke-dasharray: 1, 200; stroke-dashoffset: 0; }
+    50%  { stroke-dasharray: 90, 200; stroke-dashoffset: -35; }
+    100% { stroke-dasharray: 90, 200; stroke-dashoffset: -124; }
+  }
+  .indeterminate svg {
+    transform: none;
+    animation: ui-spinner-rotate calc(${sys.duration.extraLong4} * 1.4) ${sys.easing.linear} infinite;
+  }
+  .indeterminate .arc {
+    animation: ui-spinner-dash calc(${sys.duration.extraLong4} * 1.4) ${sys.easing.standard} infinite;
+  }
+`;
+
+define('ui-spinner', {
+  props: { value: -1, max: 100, size: '', label: '' },
+  styles: [base, styles],
+  setup({ value, max, size, label }, host) {
+    const indeterminate = computed(() => value() < 0);
+    const clamped = computed(() => Math.min(Math.max(value(), 0), max() || 100));
+    const offset = computed(() => C * (1 - clamped() / (max() || 100)));
+
+    effect(() => {
+      if (size()) host.style.setProperty('--ui-spinner-size', size());
+      else host.style.removeProperty('--ui-spinner-size');
+    });
+
+    return html`
+      <div part="progress"
+           class=${() => `progress${indeterminate() ? ' indeterminate' : ''}`}
+           role="progressbar"
+           aria-label=${() => label() || null}
+           aria-valuemin="0"
+           aria-valuemax=${max}
+           aria-valuenow=${() => (indeterminate() ? null : String(clamped()))}>
+        ${svg`
+          <svg viewBox="0 0 44 44" aria-hidden="true">
+            <circle class="track" cx="22" cy="22" r="20"></circle>
+            <circle class="arc" cx="22" cy="22" r="20"
+                    stroke-dasharray=${() => (indeterminate() ? null : `${C}`)}
+                    stroke-dashoffset=${() => (indeterminate() ? null : String(offset()))}></circle>
+          </svg>`}
+      </div>`;
+  },
+});
+
+export const tag = 'ui-spinner';
+export const themeVars = t;

package/src/components/ui-split-button.js

@@ -0,0 +1,158 @@
+// <ui-split-button> — a Material split button: a primary action plus a
+// connected chevron that opens related actions.
+//
+//   <ui-split-button variant="filled" @click=${save}>
+//     Save
+//     <ui-menu-item slot="menu" value="draft">Save draft</ui-menu-item>
+//     <ui-menu-item slot="menu" value="copy">Save a copy</ui-menu-item>
+//   </ui-split-button>
+//
+// The leading segment is the primary action (native click bubbles). Choosing
+// a menu item emits `select` with that item's value.
+//
+// @prop  {string}  variant='filled' — filled | tonal | outlined | elevated
+// @prop  {boolean} disabled=false
+// @event (native click bubbles from the leading segment)
+// @event select — a menu action was chosen; detail: { value }
+// @slot  (default) — leading-segment label
+// @slot  icon      — leading icon on the primary action
+// @slot  menu      — <ui-menu-item> children
+// @part  group, action, chevron
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars, computed, onCleanup } 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';
+import './ui-menu.js';
+import './ui-menu-item.js';
+
+const t = vars('ui-split-button', {
+  height: '40px',
+  padInline: '20px',
+  radius: sys.radius.full,
+  font: sys.type.labelLg,
+  tracking: sys.tracking.labelLg,
+  filledBg: sys.color.primary,
+  filledFg: sys.color.onPrimary,
+  tonalBg: sys.color.secondaryContainer,
+  tonalFg: sys.color.onSecondaryContainer,
+  outlinedFg: sys.color.primary,
+  outlineColor: sys.color.outline,
+  elevatedBg: sys.color.surfaceContainerLow,
+  elevatedFg: sys.color.primary,
+  divider: sys.color.outlineVariant,
+});
+
+const styles = css`
+  :host { display: inline-flex; vertical-align: middle; }
+  .group {
+    display: inline-flex;
+    align-items: stretch;
+    block-size: calc(${t.height} + var(--ui-density, 0) * 4px);
+    border-radius: ${t.radius};
+    overflow: hidden;
+    font: ${t.font};
+    letter-spacing: ${t.tracking};
+  }
+  .action, .chevron {
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    user-select: none;
+  }
+  ${focusRingOn('.action')}
+  ${focusRingOn('.chevron')}
+  .layer {
+    position: absolute; inset: 0; z-index: -1;
+    background: currentColor; opacity: 0;
+    transition: opacity ${sys.duration.short2} ${sys.easing.standard};
+  }
+  .action:hover .layer, .chevron:hover .layer { opacity: ${sys.state.hover}; }
+  .action:focus-visible .layer, .chevron:focus-visible .layer { opacity: ${sys.state.focus}; }
+  .action:active .layer, .chevron:active .layer { opacity: ${sys.state.pressed}; }
+
+  .action {
+    gap: ${sys.space(2)};
+    padding-inline: ${t.padInline} ${sys.space(3)};
+    --ui-icon-size: 1.125rem;
+  }
+  .chevron {
+    padding-inline: ${sys.space(2)} ${sys.space(3)};
+    border-inline-start: 1px solid ${t.divider};
+    --ui-icon-size: 1.5rem;
+  }
+
+  .filled { background: ${t.filledBg}; color: ${t.filledFg}; }
+  .tonal { background: ${t.tonalBg}; color: ${t.tonalFg}; }
+  .outlined {
+    color: ${t.outlinedFg};
+    box-shadow: inset 0 0 0 1px ${t.outlineColor};
+    background: transparent;
+  }
+  .elevated {
+    background: ${t.elevatedBg};
+    color: ${t.elevatedFg};
+    box-shadow: ${sys.elevation[1]};
+  }
+
+  .disabled { pointer-events: none; }
+  .filled.disabled, .tonal.disabled, .elevated.disabled {
+    background: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContainer} * 100%), transparent);
+    color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+    box-shadow: none;
+  }
+  .outlined.disabled {
+    color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+    box-shadow: inset 0 0 0 1px color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContainer} * 100%), transparent);
+  }
+  .group ui-menu { display: contents; }
+`;
+
+define('ui-split-button', {
+  props: { variant: 'filled', disabled: false },
+  styles: [base, styles],
+  setup({ variant, disabled }, host) {
+    const cls = computed(() =>
+      `group ${variant()}${disabled() ? ' disabled' : ''}`);
+
+    const onSelect = (e) => {
+      e.stopPropagation();
+      host.emit('select', { value: e.detail.value });
+      const menu = host.shadowRoot?.querySelector('ui-menu');
+      if (menu) menu.open = false;
+    };
+    host.addEventListener('ui-menu-select', onSelect);
+    onCleanup(() => host.removeEventListener('ui-menu-select', onSelect));
+
+    return html`
+      <div class=${cls} part="group" role="group">
+        <button part="action" class="action" type="button" ?disabled=${disabled}
+                ref=${(el) => ripple(el, { disabled })}>
+          <span class="layer" aria-hidden="true"></span>
+          <slot name="icon"></slot>
+          <slot></slot>
+        </button>
+        <ui-menu>
+          <button slot="anchor" part="chevron" class="chevron" type="button"
+                  ?disabled=${disabled} aria-label="More actions"
+                  ref=${(el) => ripple(el, { disabled })}>
+            <span class="layer" aria-hidden="true"></span>
+            <ui-icon name="arrow-drop-down"></ui-icon>
+          </button>
+          <slot name="menu"></slot>
+        </ui-menu>
+      </div>`;
+  },
+});
+
+export const tag = 'ui-split-button';
+export const themeVars = t;

package/src/components/ui-stack.js

@@ -0,0 +1,37 @@
+// <ui-stack> — a flexbox layout primitive.
+//
+//   <ui-stack direction="row" gap="4" align="center">…</ui-stack>
+//
+// @prop  {string}         direction='column' — row | column | row-reverse | column-reverse
+// @prop  {number|string}  gap=2   — a spacing step (maps to the --ui-space-N
+//                                   token: 1,2,3,4,5,6,7,8,10,12,16,20,24) or
+//                                   any raw CSS length ('1.5rem', '12px')
+// @prop  {string}         align=''   — align-items value ('' leaves the default)
+// @prop  {string}         justify='' — justify-content value
+// @prop  {boolean}        wrap=false — flex-wrap: wrap
+// @slot  (default)
+// @vars  (none — spacing flows from the --ui-space-* system tokens)
+
+import { define, html, css, effect } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+
+define('ui-stack', {
+  // gap defaults to a string so raw CSS lengths survive attribute coercion;
+  // numeric property writes are normalized below.
+  props: { direction: 'column', gap: '2', align: '', justify: '', wrap: false },
+  styles: [base, css`:host { display: flex; }`],
+  setup({ direction, gap, align, justify, wrap }, host) {
+    effect(() => { host.style.flexDirection = direction(); });
+    effect(() => {
+      const g = String(gap() ?? '').trim();
+      host.style.gap = /^\d+$/.test(g) ? sys.space(g) : g;
+    });
+    effect(() => { host.style.alignItems = align() || ''; });
+    effect(() => { host.style.justifyContent = justify() || ''; });
+    effect(() => { host.style.flexWrap = wrap() ? 'wrap' : ''; });
+    return html`<slot></slot>`;
+  },
+});
+
+export const tag = 'ui-stack';

package/src/components/ui-step.js

@@ -0,0 +1,91 @@
+// <ui-step> — one step inside <ui-stepper>.
+//
+// @prop  {string} label=''
+// @prop  {number} index=0            — 0-based position; assigned by <ui-stepper>
+// @prop  {string} state='upcoming'   — upcoming | active | completed; assigned
+//                                      by <ui-stepper> from its `active` prop
+// @prop  {string} optionalText=''    — small secondary line under the label
+// @part  indicator — the 24px circle
+// @part  label
+// @vars  see `t` below (`themeVars.names`)
+//
+// Presentation only: the circle shows the 1-based number (or a check when
+// completed); <ui-stepper> owns index/state assignment and the connectors.
+
+import { define, html, css, vars } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+import './ui-icon.js';
+
+const t = vars('ui-step', {
+  indicatorSize: '24px',
+  bg: sys.color.surfaceContainerHighest,
+  fg: sys.color.onSurfaceVariant,
+  activeBg: sys.color.primary,
+  activeFg: sys.color.onPrimary,
+  labelFg: sys.color.onSurfaceVariant,
+  labelFgActive: sys.color.onSurface,
+  font: sys.type.titleSm,
+  tracking: sys.tracking.titleSm,
+  optionalFont: sys.type.bodySm,
+  optionalTracking: sys.tracking.bodySm,
+});
+
+const styles = css`
+  :host {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: ${sys.space(2)};
+    padding-inline: ${sys.space(2)};
+    text-align: center;
+  }
+  .indicator {
+    display: grid;
+    place-items: center;
+    inline-size: ${t.indicatorSize};
+    block-size: ${t.indicatorSize};
+    border-radius: ${sys.radius.full};
+    background: ${t.bg};
+    color: ${t.fg};
+    font: ${sys.type.labelMd};
+    letter-spacing: ${sys.tracking.labelMd};
+    --ui-icon-size: 16px;
+    transition: background-color ${sys.duration.short4} ${sys.easing.standard},
+                color ${sys.duration.short4} ${sys.easing.standard};
+  }
+  .indicator.active, .indicator.completed {
+    background: ${t.activeBg};
+    color: ${t.activeFg};
+  }
+  .label {
+    font: ${t.font};
+    letter-spacing: ${t.tracking};
+    color: ${t.labelFg};
+    transition: color ${sys.duration.short4} ${sys.easing.standard};
+  }
+  .label.active { color: ${t.labelFgActive}; }
+  .optional {
+    font: ${t.optionalFont};
+    letter-spacing: ${t.optionalTracking};
+    color: ${t.labelFg};
+  }
+`;
+
+define('ui-step', {
+  props: { label: '', index: 0, state: 'upcoming', optionalText: '' },
+  styles: [base, styles],
+  setup({ label, index, state, optionalText }) {
+    return html`
+      <span part="indicator" class=${() => `indicator ${state()}`} aria-hidden="true">
+        ${() => (state() === 'completed'
+          ? html`<ui-icon name="check"></ui-icon>`
+          : html`${() => index() + 1}`)}
+      </span>
+      <span part="label" class=${() => `label ${state()}`}>${label}</span>
+      ${() => (optionalText() ? html`<span class="optional">${optionalText}</span>` : null)}`;
+  },
+});
+
+export const tag = 'ui-step';
+export const themeVars = t;