@alacris/ui 0.0.0 → 0.1.0

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

@@ -0,0 +1,170 @@
+// <ui-toggle-button> — one Material segmented button, used inside
+// <ui-toggle-group> (the group draws the outlined container and dividers;
+// standalone the segment is a flat pill).
+//
+// Selecting animates a leading check icon in smoothly via width and scale transitions,
+// adhering to Material Design 3. When an icon is already present, selecting smoothly
+// crossfades and morphs between the custom icon and the checkmark in both directions.
+// The button does not own its selection: it emits `ui-toggle` and the group
+// (or any parent) sets `selected` back down.
+//
+// @prop  {string}  value=''       — REQUIRED identity within the group
+// @prop  {boolean} selected=false — set by the owning group
+// @prop  {boolean} disabled=false
+// @prop  {string}  icon=''        — optional leading icon
+// @event ui-toggle — pressed; detail: { value } (consumed by ui-toggle-group)
+// @slot  (default) — label
+// @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-toggle-button', {
+  height: '40px',
+  radius: sys.radius.full,
+  bg: sys.color.surface,
+  fg: sys.color.onSurface,
+  selectedBg: sys.color.secondaryContainer,
+  selectedFg: sys.color.onSecondaryContainer,
+  font: sys.type.labelLg,
+  tracking: sys.tracking.labelLg,
+});
+
+const styles = css`
+  :host { display: inline-flex; vertical-align: middle; flex: 1; }
+  .control {
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: 100%;
+    block-size: calc(${t.height} + var(--ui-density, 0) * 4px);
+    padding-inline: ${sys.space(3)};
+    border: none;
+    border-radius: ${t.radius};
+    background: ${t.bg};
+    color: ${t.fg};
+    font: ${t.font};
+    letter-spacing: ${t.tracking};
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    transition: background-color ${sys.duration.short4} ${sys.easing.standard},
+                color ${sys.duration.short4} ${sys.easing.standard};
+    --ui-icon-size: 1.125rem;
+  }
+  .lead {
+    position: relative;
+    display: inline-grid;
+    place-items: center;
+    inline-size: 0;
+    min-inline-size: 0;
+    block-size: 1.125rem;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+    transition: inline-size ${sys.duration.short4} ${sys.easing.emphasized},
+                margin-inline-end ${sys.duration.short4} ${sys.easing.emphasized},
+                opacity ${sys.duration.short2} ${sys.easing.standard};
+  }
+  .lead.on {
+    inline-size: 1.125rem;
+    margin-inline-end: ${sys.space(2)};
+    opacity: 1;
+    pointer-events: auto;
+  }
+  .lead ui-icon {
+    grid-area: 1 / 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    transition: opacity ${sys.duration.short3} ${sys.easing.standard},
+                scale ${sys.duration.short3} ${sys.easing.emphasized},
+                transform ${sys.duration.short3} ${sys.easing.emphasized};
+  }
+  .lead .check-glyph {
+    opacity: 0;
+    scale: 0.5;
+    pointer-events: none;
+  }
+  .lead .check-glyph.on {
+    opacity: 1;
+    scale: 1;
+    pointer-events: auto;
+  }
+  .lead .custom-glyph {
+    opacity: 1;
+    scale: 1;
+    pointer-events: auto;
+  }
+  .lead .custom-glyph.off {
+    opacity: 0;
+    scale: 0.5;
+    pointer-events: none;
+  }
+
+  ${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}; }
+
+  .control[aria-pressed="true"] {
+    background: ${t.selectedBg};
+    color: ${t.selectedFg};
+  }
+
+  .control:disabled {
+    cursor: default;
+    pointer-events: none;
+    color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+  }
+  .control:disabled[aria-pressed="true"] {
+    background: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContainer} * 100%), transparent);
+  }
+`;
+
+define('ui-toggle-button', {
+  props: { value: '', selected: false, disabled: false, icon: '' },
+  styles: [base, styles],
+  setup({ value, selected, disabled, icon }, host) {
+    const onClick = () => {
+      if (disabled()) return;
+      host.emit('ui-toggle', { value: value() });
+    };
+
+    const isSelected = () => selected();
+    const hasIcon = () => !!icon();
+    const showLead = () => isSelected() || hasIcon();
+
+    return html`
+      <button part="control" class="control" type="button" ?disabled=${disabled}
+              aria-pressed=${() => String(selected())}
+              @click=${onClick} ref=${(el) => ripple(el, { disabled })}>
+        <span class="layer" aria-hidden="true"></span>
+        <span class=${() => `lead${showLead() ? ' on' : ''}`}>
+          <ui-icon class=${() => `check-glyph${isSelected() ? ' on' : ''}`}
+                   name="check"></ui-icon>
+          ${() => (hasIcon()
+            ? html`<ui-icon class=${() => `custom-glyph${isSelected() ? ' off' : ''}`}
+                           name=${icon}></ui-icon>`
+            : null)}
+        </span>
+        <slot></slot>
+      </button>`;
+  },
+});
+
+export const tag = 'ui-toggle-button';
+export const themeVars = t;

package/src/components/ui-toggle-group.js

@@ -0,0 +1,111 @@
+// <ui-toggle-group> — Material segmented buttons: an outlined container that
+// owns the selection of its slotted <ui-toggle-button>s.
+//
+//   <ui-toggle-group value=${align} @change=${(e) => align.set(e.detail.value)}>
+//     <ui-toggle-button value="left">Left</ui-toggle-button>
+//     <ui-toggle-button value="right">Right</ui-toggle-button>
+//   </ui-toggle-group>
+//
+// Single-select by default (`value` is the selected string, '' for none;
+// pressing the selected segment deselects it). With `multi`, `value` is an
+// array (a JSON array string works as an attribute). Buttons are natural tab
+// stops — no roving tabindex, per the toolbar-of-toggle-buttons pattern.
+//
+// @prop  {string|array} value=''   — selected value, or array when `multi`
+// @prop  {boolean} multi=false     — multiple segments may be selected
+// @prop  {boolean} disabled=false  — disables every segment
+// @prop  {string}  label=''        — accessible name for the group
+// @event change — selection changed; detail: { value } (string, or array when multi)
+// @slot  (default) — the <ui-toggle-button> children
+// @part  group — the outlined clipping container
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars, effect, untrack } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+import './ui-toggle-button.js';
+
+const t = vars('ui-toggle-group', {
+  radius: sys.radius.full,
+  outlineColor: sys.color.outline,
+});
+
+const styles = css`
+  :host { display: inline-flex; vertical-align: middle; }
+  .group {
+    display: inline-flex;
+    align-items: stretch;
+    gap: 1px;
+    border: 1px solid ${t.outlineColor};
+    background: ${t.outlineColor};
+    border-radius: ${t.radius};
+    overflow: hidden;
+  }
+  ::slotted(ui-toggle-button) { --ui-toggle-button-radius: 0; flex: 1; }
+`;
+
+define('ui-toggle-group', {
+  props: { value: '', multi: false, disabled: false, label: '' },
+  styles: [base, styles],
+  setup({ value, multi, disabled, label }, host) {
+    const buttons = () => [...host.querySelectorAll('ui-toggle-button')];
+
+    /** Current selection, normalized to an array of values. */
+    const selection = () => {
+      const v = value();
+      if (Array.isArray(v)) return v;
+      if (typeof v === 'string' && v.trim().startsWith('[')) {
+        try { return JSON.parse(v); } catch { return []; }
+      }
+      return v == null || v === '' ? [] : [v];
+    };
+
+    // Reflect the selection down whenever value changes …
+    const sync = () => {
+      const sel = selection();
+      for (const b of buttons()) b.selected = sel.includes(b.value);
+    };
+    effect(sync);
+    // … and once after children have upgraded/distributed.
+    queueMicrotask(() => untrack(sync));
+
+    // Group-level disabling: remember which children we disabled so their own
+    // `disabled` survives the round trip.
+    let claimed = null;
+    effect(() => {
+      if (disabled()) {
+        if (claimed) return;
+        claimed = new Set();
+        for (const b of buttons()) if (!b.disabled) { b.disabled = true; claimed.add(b); }
+      } else if (claimed) {
+        for (const b of claimed) b.disabled = false;
+        claimed = null;
+      }
+    });
+
+    host.addEventListener('ui-toggle', (e) => {
+      e.stopPropagation();
+      if (disabled()) return;
+      const v = e.detail.value;
+      let next;
+      if (multi()) {
+        const sel = selection();
+        next = sel.includes(v) ? sel.filter((x) => x !== v) : [...sel, v];
+      } else {
+        next = selection().includes(v) ? '' : v;
+      }
+      value.set(next);
+      host.emit('change', { value: next });
+    });
+
+    return html`
+      <div class="group" part="group" role="group"
+           aria-label=${() => label() || null}
+           aria-disabled=${() => (disabled() ? 'true' : null)}>
+        <slot @slotchange=${() => untrack(sync)}></slot>
+      </div>`;
+  },
+});
+
+export const tag = 'ui-toggle-group';
+export const themeVars = t;

package/src/components/ui-toolbar.js

@@ -0,0 +1,64 @@
+// <ui-toolbar> — a Material contextual toolbar: a floating strip of icon
+// actions, optionally with an attached FAB.
+//
+//   <ui-toolbar label="Selection">
+//     <ui-icon-button icon="edit" label="Edit"></ui-icon-button>
+//     <ui-icon-button icon="delete" label="Delete"></ui-icon-button>
+//     <ui-fab slot="fab" icon="add" size="sm"></ui-fab>
+//   </ui-toolbar>
+//
+// @prop  {string} label='' — accessible name for the toolbar
+// @slot  (default) — icon buttons and other actions
+// @slot  fab       — optional <ui-fab> attached to the end
+// @part  bar, actions, fab
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+
+const t = vars('ui-toolbar', {
+  height: '64px',
+  bg: sys.color.surfaceContainer,
+  fg: sys.color.onSurface,
+  radius: sys.radius.full,
+  pad: sys.space(2),
+  elevation: sys.elevation[2],
+});
+
+const styles = css`
+  :host { display: inline-flex; vertical-align: middle; }
+  .bar {
+    display: inline-flex;
+    align-items: center;
+    gap: ${sys.space(1)};
+    min-block-size: ${t.height};
+    padding: ${t.pad};
+    background: ${t.bg};
+    color: ${t.fg};
+    border-radius: ${t.radius};
+    box-shadow: ${t.elevation};
+  }
+  .actions {
+    display: inline-flex;
+    align-items: center;
+    gap: ${sys.space(1)};
+    padding-inline: ${sys.space(1)};
+  }
+  .fab { display: inline-flex; align-items: center; }
+`;
+
+define('ui-toolbar', {
+  props: { label: '' },
+  styles: [base, styles],
+  setup({ label }) {
+    return html`
+      <div class="bar" part="bar" role="toolbar" aria-label=${() => label() || null}>
+        <div class="actions" part="actions"><slot></slot></div>
+        <div class="fab" part="fab"><slot name="fab"></slot></div>
+      </div>`;
+  },
+});
+
+export const tag = 'ui-toolbar';
+export const themeVars = t;

package/src/components/ui-tooltip.js

@@ -0,0 +1,148 @@
+// <ui-tooltip> — a plain (or rich) tooltip on hover/focus around its target.
+//
+//   <ui-tooltip text="Save changes"><ui-button>Save</ui-button></ui-tooltip>
+//
+// Shows after `delay` ms on pointerenter (timer cancelled on leave) and
+// immediately on focusin; hides on pointerleave, focusout, and Escape. The
+// panel is position: fixed, anchored to the host with position()/autoUpdate,
+// flipping to the opposite side when it would overflow the viewport.
+//
+// a11y: `aria-describedby` cannot point across shadow boundaries, so the
+// association is not programmatic — the panel carries role="tooltip" and the
+// target keeps its own accessible name. Give the target a matching
+// label/aria-label when the tooltip is the only description.
+//
+// @prop  {string}  text=''      — plain tooltip content
+// @prop  {string}  position='top' — top | bottom | left | right
+// @prop  {number}  delay=500    — hover show delay (ms); focus shows instantly
+// @prop  {boolean} rich=false   — renders the `content` slot in a surface
+//                                 panel instead of the text pill
+// @slot  (default) — the target
+// @slot  content   — rich tooltip content (title/body/actions) when `rich`
+// @part  panel — the tooltip surface
+// @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 { fx } from '../motion/animate.js';
+import { autoUpdate } from '../util/position.js';
+
+const t = vars('ui-tooltip', {
+  bg: sys.color.inverseSurface,
+  fg: sys.color.inverseOnSurface,
+  font: sys.type.labelSm,
+  radius: sys.radius.xs,
+  maxWidth: '200px',
+  richBg: sys.color.surfaceContainer,
+  richFg: sys.color.onSurfaceVariant,
+  richRadius: sys.radius.md,
+  richMaxWidth: '320px',
+});
+
+const styles = css`
+  :host { display: inline-block; }
+  .panel {
+    position: fixed;
+    inset-inline-start: 0;
+    inset-block-start: 0;
+    z-index: ${sys.z.tooltip};
+    inline-size: max-content;
+  }
+  .plain {
+    background: ${t.bg};
+    color: ${t.fg};
+    font: ${t.font};
+    letter-spacing: ${sys.tracking.labelSm};
+    border-radius: ${t.radius};
+    padding: ${sys.space(1)} ${sys.space(2)};
+    max-inline-size: ${t.maxWidth};
+    pointer-events: none;
+  }
+  .rich {
+    background: ${t.richBg};
+    color: ${t.richFg};
+    font: ${sys.type.bodyMd};
+    letter-spacing: ${sys.tracking.bodyMd};
+    border-radius: ${t.richRadius};
+    box-shadow: ${sys.elevation[2]};
+    padding: ${sys.space(3)};
+    max-inline-size: ${t.richMaxWidth};
+  }
+`;
+
+define('ui-tooltip', {
+  props: { text: '', position: 'top', delay: 500, rich: false },
+  styles: [base, styles],
+  setup({ text, position: pos, delay, rich }, host) {
+    const open = signal(false);
+    let timer = 0;
+    let stopAuto = null;
+
+    const show = () => open.set(true);
+    const hide = () => {
+      clearTimeout(timer);
+      timer = 0;
+      open.set(false);
+    };
+
+    host.addEventListener('pointerenter', () => {
+      clearTimeout(timer);
+      const d = Math.max(0, delay());
+      if (d) timer = setTimeout(show, d);
+      else show();
+    });
+    host.addEventListener('pointerleave', hide);
+    host.addEventListener('focusin', show); // no delay on keyboard focus
+    host.addEventListener('focusout', hide);
+
+    // Escape hides even while focus is elsewhere on the page.
+    effect(() => {
+      if (!open()) return;
+      const onKey = (e) => { if (e.key === 'Escape') hide(); };
+      document.addEventListener('keydown', onKey, true);
+      return () => document.removeEventListener('keydown', onKey, true);
+    });
+
+    // Anchor tracking lives exactly as long as the panel does.
+    effect(() => {
+      if (!open()) {
+        stopAuto?.();
+        stopAuto = null;
+      }
+    });
+    onCleanup(() => {
+      clearTimeout(timer);
+      stopAuto?.();
+      stopAuto = null;
+    });
+
+    const anchor = (el) => {
+      stopAuto?.();
+      stopAuto = autoUpdate(el, host, {
+        placement: `${pos()}-center`,
+        offset: 8,
+      });
+    };
+
+    const view = () => html`
+      <div part="panel" role="tooltip"
+           class=${() => `panel ${rich() ? 'rich' : 'plain'}`}
+           ref=${anchor}>
+        ${() => (rich() ? html`<slot name="content"></slot>` : html`${text}`)}
+      </div>`;
+
+    return html`
+      <slot></slot>
+      ${presence(open, view, {
+        enter: fx.fadeIn,
+        exit: fx.fadeOut,
+        enterDuration: 'short2',
+        exitDuration: 'short2',
+      })}`;
+  },
+});
+
+export const tag = 'ui-tooltip';
+export const themeVars = t;

package/src/index.js

@@ -0,0 +1,121 @@
+// Alacris UI — public surface (`@alacris/ui` on npm).
+//
+// Importing this module registers every component and re-exports the theme,
+// motion, token, and utility APIs. Tree-shaking-friendly alternative: import
+// only the component files and helpers you use — each component module is
+// self-contained. Do not bundle a second copy of `@alacris/core`; these modules
+// import it by specifier so the app and the design system share one graph.
+
+// Theme
+export {
+  createTheme, applyTheme, themeCss, activeTheme, loadThemeFonts,
+  scheme, schemePreference, setScheme, toggleScheme,
+} from './theme/index.js';
+
+// Tokens
+export { sys, typeRule } from './tokens/sys.js';
+export {
+  FONT_PRESETS, FONT_STACKS, DEFAULT_FONT_PRESET, TYPE_ROLES,
+  resolveTypography, googleFontsHref,
+} from './tokens/typography.js';
+
+// Motion
+export { animate, settled, duration, easing, fx, prefersReducedMotion } from './motion/animate.js';
+export { presence } from './motion/presence.js';
+export { withFlip } from './motion/flip.js';
+export { ripple } from './motion/ripple.js';
+
+// Utilities
+export { position, autoUpdate } from './util/position.js';
+export { focusTrap, focusables, scrollLock } from './util/focus.js';
+export { rovingTabindex } from './util/keys.js';
+export { formBind } from './util/form.js';
+export { registerIcons, iconPath, iconNames } from './util/icons.js';
+export {
+  processTable, filterRows, sortRows, groupRows, paginate,
+  aggregateRow, toCsv, downloadText, inferColumns, visibleColumns,
+} from './util/table.js';
+
+// Components — importing registers the custom element.
+import './components/ui-icon.js';
+import './components/ui-text.js';
+
+// Actions
+import './components/ui-button.js';
+import './components/ui-icon-button.js';
+import './components/ui-fab.js';
+import './components/ui-fab-menu.js';
+import './components/ui-button-group.js';
+import './components/ui-split-button.js';
+import './components/ui-toggle-button.js';
+import './components/ui-toggle-group.js';
+
+// Inputs
+import './components/ui-checkbox.js';
+import './components/ui-radio.js';
+import './components/ui-radio-group.js';
+import './components/ui-switch.js';
+import './components/ui-slider.js';
+import './components/ui-rating.js';
+import './components/ui-text-field.js';
+import './components/ui-select.js';
+import './components/ui-option.js';
+import './components/ui-autocomplete.js';
+import './components/ui-chip.js';
+import './components/ui-chip-set.js';
+import './components/ui-date-picker.js';
+import './components/ui-time-picker.js';
+import './components/ui-search.js';
+
+// Data display
+import './components/ui-avatar.js';
+import './components/ui-badge.js';
+import './components/ui-divider.js';
+import './components/ui-list.js';
+import './components/ui-list-item.js';
+import './components/ui-table.js';
+import './components/ui-table-toolbar.js';
+import './components/ui-table-footer.js';
+import './components/ui-tooltip.js';
+import './components/ui-carousel.js';
+import './components/ui-carousel-item.js';
+
+// Feedback
+import './components/ui-alert.js';
+import './components/ui-progress.js';
+import './components/ui-spinner.js';
+import './components/ui-loading-indicator.js';
+import './components/ui-skeleton.js';
+import './components/ui-snackbar.js';
+import './components/ui-backdrop.js';
+import './components/ui-sheet.js';
+import './components/ui-side-sheet.js';
+
+export { showSnackbar } from './components/ui-snackbar.js';
+
+// Surfaces & navigation
+import './components/ui-card.js';
+import './components/ui-dialog.js';
+import './components/ui-tabs.js';
+import './components/ui-tab.js';
+import './components/ui-tab-panel.js';
+import './components/ui-menu.js';
+import './components/ui-menu-item.js';
+import './components/ui-drawer.js';
+import './components/ui-app-bar.js';
+import './components/ui-bottom-app-bar.js';
+import './components/ui-toolbar.js';
+import './components/ui-accordion.js';
+import './components/ui-accordion-item.js';
+import './components/ui-breadcrumbs.js';
+import './components/ui-pagination.js';
+import './components/ui-stepper.js';
+import './components/ui-step.js';
+import './components/ui-bottom-nav.js';
+import './components/ui-nav-item.js';
+import './components/ui-nav-rail.js';
+
+// Layout
+import './components/ui-stack.js';
+import './components/ui-container.js';
+import './components/ui-surface.js';