@alacris/ui 0.0.0 → 0.1.0

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

@@ -0,0 +1,112 @@
+// <ui-icon-button> — a 40px icon button, optionally a toggle.
+//
+// @prop  {string}  icon=''          — registry icon name (or slot an <ui-icon>)
+// @prop  {string}  selectedIcon=''  — icon while selected (toggle mode; defaults to `icon`)
+// @prop  {string}  label=''         — REQUIRED accessible name
+// @prop  {string}  variant='standard' — standard | filled | tonal | outlined
+// @prop  {boolean} toggle=false     — makes it a pressed-state toggle
+// @prop  {boolean} selected=false   — toggle state
+// @prop  {boolean} disabled=false
+// @event change — toggle flipped; detail: { selected }
+// @slot  (default) — custom icon content when `icon` is empty
+// @part  control — the <button>
+// @vars  see `t` below
+
+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-icon-button', {
+  size: '40px',
+  radius: sys.radius.full,
+  fg: sys.color.onSurfaceVariant,
+  selectedFg: sys.color.primary,
+  filledBg: sys.color.primary,
+  filledFg: sys.color.onPrimary,
+  tonalBg: sys.color.secondaryContainer,
+  tonalFg: sys.color.onSecondaryContainer,
+  outlineColor: sys.color.outline,
+});
+
+const styles = css`
+  :host { display: inline-flex; vertical-align: middle; }
+  .control {
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: calc(${t.size} + var(--ui-density, 0) * 4px);
+    block-size: calc(${t.size} + var(--ui-density, 0) * 4px);
+    border: none;
+    border-radius: ${t.radius};
+    background: transparent;
+    color: ${t.fg};
+    cursor: pointer;
+    user-select: none;
+    transition: background-color ${sys.duration.short4} ${sys.easing.standard},
+                color ${sys.duration.short4} ${sys.easing.standard};
+  }
+  ${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}; }
+
+  .standard[aria-pressed="true"] { color: ${t.selectedFg}; }
+  .filled { background: ${t.filledBg}; color: ${t.filledFg}; }
+  .filled:not([aria-pressed="true"]).toggle { background: ${sys.color.surfaceContainerHighest}; color: ${t.selectedFg}; }
+  .tonal { background: ${t.tonalBg}; color: ${t.tonalFg}; }
+  .tonal:not([aria-pressed="true"]).toggle { background: ${sys.color.surfaceContainerHighest}; color: ${sys.color.onSurfaceVariant}; }
+  .outlined { border: 1px solid ${t.outlineColor}; }
+  .outlined[aria-pressed="true"] { background: ${sys.color.inverseSurface}; color: ${sys.color.inverseOnSurface}; border-color: transparent; }
+
+  .control:disabled {
+    cursor: default;
+    pointer-events: none;
+    color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+  }
+  .filled:disabled, .tonal:disabled {
+    background: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContainer} * 100%), transparent);
+  }
+  .outlined:disabled {
+    border-color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContainer} * 100%), transparent);
+  }
+`;
+
+define('ui-icon-button', {
+  props: {
+    icon: '', selectedIcon: '', label: '',
+    variant: 'standard', toggle: false, selected: false, disabled: false,
+  },
+  styles: [base, styles],
+  setup({ icon, selectedIcon, label, variant, toggle, selected, disabled }, host) {
+    const cls = computed(() => `control ${variant()}${toggle() ? ' toggle' : ''}`);
+    const shownIcon = computed(() => (toggle() && selected() && selectedIcon()) || icon());
+
+    const onClick = () => {
+      if (!toggle()) return;
+      selected.set(!selected());
+      host.emit('change', { selected: selected() });
+    };
+
+    return html`
+      <button part="control" class=${cls} type="button" ?disabled=${disabled}
+              aria-label=${() => label() || icon() || null}
+              aria-pressed=${() => (toggle() ? String(selected()) : null)}
+              @click=${onClick}
+              ref=${(el) => ripple(el, { disabled, centered: true })}>
+        <span class="layer" aria-hidden="true"></span>
+        ${() => (shownIcon() ? html`<ui-icon name=${shownIcon}></ui-icon>` : html`<slot></slot>`)}
+      </button>`;
+  },
+});
+
+export const tag = 'ui-icon-button';
+export const themeVars = t;

package/src/components/ui-icon.js

@@ -0,0 +1,64 @@
+// <ui-icon> — an icon from the registry, or any slotted SVG.
+//
+// @prop  {string} name=''  — registry name (see util/icons.js); empty renders the slot
+// @prop  {string} label='' — accessible name; empty marks the icon decorative
+// @prop  {string} size=''  — CSS length; overrides --ui-icon-size for this element
+// @slot  (default) — a custom <svg> when no name is given
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, svg, css, vars, effect } from '@alacris/core';
+import { base } from './base.js';
+import { iconPath, iconsVersion } from '../util/icons.js';
+
+const t = vars('ui-icon', {
+  size: '1.5rem',
+});
+
+define('ui-icon', {
+  props: { name: '', label: '', size: '' },
+  styles: [base, css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      vertical-align: middle;
+      inline-size: ${t.size};
+      block-size: ${t.size};
+      flex: none;
+      color: inherit;
+    }
+    svg, ::slotted(svg) {
+      display: block;
+      inline-size: 100%;
+      block-size: 100%;
+      fill: currentColor;
+    }
+  `],
+  setup({ name, label, size }, host) {
+    effect(() => {
+      if (label()) {
+        host.setAttribute('role', 'img');
+        host.setAttribute('aria-label', label());
+        host.removeAttribute('aria-hidden');
+      } else {
+        host.removeAttribute('role');
+        host.removeAttribute('aria-label');
+        host.setAttribute('aria-hidden', 'true');
+      }
+    });
+    effect(() => {
+      if (size()) host.style.setProperty('--ui-icon-size', size());
+      else host.style.removeProperty('--ui-icon-size');
+    });
+    return html`${() => {
+      iconsVersion(); // re-render if icons register late
+      const d = name() && iconPath(name());
+      return d
+        ? svg`<svg viewBox="0 0 24 24" aria-hidden="true"><path d=${d}></path></svg>`
+        : html`<slot></slot>`;
+    }}`;
+  },
+});
+
+export const tag = 'ui-icon';
+export const themeVars = t;

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

@@ -0,0 +1,166 @@
+// <ui-list-item> — one row of a <ui-list>.
+//
+// One line (56px) by default; supplying supporting text (prop or slot) makes
+// it two lines (72px). `interactive` adds button semantics, a state layer and
+// a ripple; `href` renders the row as a link instead. Activation emits only
+// the native (bubbling) click — no custom event.
+//
+// @prop  {string}  headline=''    — primary text (or use the default slot)
+// @prop  {string}  supporting=''  — secondary text (or use the supporting slot)
+// @prop  {boolean} interactive=false — state layer + ripple + role="button"
+// @prop  {string}  href=''        — renders the row as an <a>
+// @prop  {boolean} selected=false — secondaryContainer background
+// @prop  {boolean} disabled=false
+// @slot  (default)  — headline content when the prop is empty
+// @slot  leading    — icon / avatar / checkbox
+// @slot  supporting — secondary line when the prop is empty
+// @slot  trailing   — trailing meta text or icon
+// @part  control — the row element (<div> or <a>)
+// @vars  see `t` below
+
+import { define, html, css, vars, computed, effect, signal } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base, focusRingOn } from './base.js';
+import { ripple } from '../motion/ripple.js';
+
+const t = vars('ui-list-item', {
+  height: '56px',
+  twoLineHeight: '72px',
+  padInline: sys.space(4),
+  gap: sys.space(4),
+  headlineFg: sys.color.onSurface,
+  headlineFont: sys.type.bodyLg,
+  supportingFg: sys.color.onSurfaceVariant,
+  supportingFont: sys.type.bodyMd,
+  trailingFg: sys.color.onSurfaceVariant,
+  trailingFont: sys.type.labelSm,
+  selectedBg: sys.color.secondaryContainer,
+  selectedFg: sys.color.onSecondaryContainer,
+});
+
+const styles = css`
+  :host { display: block; }
+  .control {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    align-items: center;
+    gap: ${t.gap};
+    min-block-size: calc(${t.height} + var(--ui-density, 0) * 4px);
+    padding-inline: ${t.padInline};
+    padding-block: ${sys.space(2)};
+    color: ${t.headlineFg};
+    text-decoration: none;
+    background: transparent;
+    border: none;
+    inline-size: 100%;
+    text-align: start;
+  }
+  .two-line { min-block-size: calc(${t.twoLineHeight} + var(--ui-density, 0) * 4px); }
+  ${focusRingOn('.interactive')}
+  .interactive { cursor: pointer; user-select: none; }
+  .layer {
+    position: absolute; inset: 0; z-index: -1;
+    background: currentColor; opacity: 0; pointer-events: none;
+    transition: opacity ${sys.duration.short2} ${sys.easing.standard};
+  }
+  .interactive:hover .layer { opacity: ${sys.state.hover}; }
+  .interactive:focus-visible .layer { opacity: ${sys.state.focus}; }
+  .interactive:active .layer { opacity: ${sys.state.pressed}; }
+  .selected { background: ${t.selectedBg}; color: ${t.selectedFg}; }
+
+  .text {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-inline-size: 0;
+    gap: calc(${sys.space(1)} / 2);
+  }
+  .headline {
+    font: ${t.headlineFont};
+    letter-spacing: ${sys.tracking.bodyLg};
+  }
+  .supporting {
+    font: ${t.supportingFont};
+    letter-spacing: ${sys.tracking.bodyMd};
+    color: ${t.supportingFg};
+  }
+  .control:not(.two-line) .supporting { display: none; }
+  .trailing {
+    display: inline-flex;
+    align-items: center;
+    flex: none;
+    font: ${t.trailingFont};
+    letter-spacing: ${sys.tracking.labelSm};
+    color: ${t.trailingFg};
+  }
+  .disabled {
+    pointer-events: none;
+    color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+  }
+  .disabled .supporting, .disabled .trailing { color: inherit; }
+`;
+
+define('ui-list-item', {
+  props: {
+    headline: '', supporting: '',
+    interactive: false, href: '', selected: false, disabled: false,
+  },
+  styles: [base, styles],
+  setup({ headline, supporting, interactive, href, selected, disabled }, host) {
+    host.setAttribute('role', 'listitem');
+
+    const slotSupporting = signal(false);
+    const twoLine = computed(() => !!supporting() || slotSupporting());
+    const isInteractive = computed(() => !!href() || interactive());
+
+    const cls = computed(() =>
+      'control' +
+      (isInteractive() ? ' interactive' : '') +
+      (selected() ? ' selected' : '') +
+      (twoLine() ? ' two-line' : '') +
+      (disabled() ? ' disabled' : ''));
+
+    const onSupportingSlot = (el) =>
+      el.addEventListener('slotchange', () => slotSupporting.set(el.assignedNodes().length > 0));
+
+    const onKeydown = (e) => {
+      if (!href() && interactive() && !disabled() && (e.key === 'Enter' || e.key === ' ')) {
+        e.preventDefault();
+        e.currentTarget.click();
+      }
+    };
+    const onClick = (e) => {
+      if (disabled()) { e.preventDefault(); e.stopPropagation(); }
+    };
+
+    const inner = html`
+      <span class="layer" aria-hidden="true"></span>
+      <slot name="leading"></slot>
+      <span class="text">
+        <span class="headline">${headline}<slot></slot></span>
+        <span class="supporting">${supporting}<slot name="supporting" ref=${onSupportingSlot}></slot></span>
+      </span>
+      <span class="trailing"><slot name="trailing"></slot></span>`;
+
+    const notInteractive = () => disabled() || !isInteractive();
+
+    return html`${() =>
+      href()
+        ? html`<a part="control" class=${cls} href=${href}
+                  aria-disabled=${() => (disabled() ? 'true' : null)}
+                  tabindex=${() => (disabled() ? '-1' : null)}
+                  @click=${onClick}
+                  ref=${(el) => ripple(el, { disabled: notInteractive })}>${inner}</a>`
+        : html`<div part="control" class=${cls}
+                  role=${() => (interactive() ? 'button' : null)}
+                  tabindex=${() => (interactive() && !disabled() ? '0' : null)}
+                  aria-disabled=${() => (interactive() && disabled() ? 'true' : null)}
+                  aria-current=${() => (selected() ? 'true' : null)}
+                  @click=${onClick} @keydown=${onKeydown}
+                  ref=${(el) => ripple(el, { disabled: notInteractive })}>${inner}</div>`}`;
+  },
+});
+
+export const tag = 'ui-list-item';
+export const themeVars = t;

package/src/components/ui-list.js

@@ -0,0 +1,38 @@
+// <ui-list> — a Material list container for <ui-list-item> children.
+//
+// @prop  {string} label='' — accessible name for the list
+// @slot  (default) — <ui-list-item> elements (and <ui-divider>s)
+// @vars  --ui-list-bg, --ui-list-pad-block
+//
+// role="list" on the host; items carry role="listitem".
+
+import { define, html, css, vars, effect } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+
+const t = vars('ui-list', {
+  bg: 'transparent',
+  padBlock: sys.space(2),
+});
+
+define('ui-list', {
+  props: { label: '' },
+  styles: [base, css`
+    :host {
+      display: block;
+      background: ${t.bg};
+      padding-block: ${t.padBlock};
+    }
+  `],
+  setup({ label }, host) {
+    host.setAttribute('role', 'list');
+    effect(() => {
+      if (label()) host.setAttribute('aria-label', label());
+      else host.removeAttribute('aria-label');
+    });
+    return html`<slot></slot>`;
+  },
+});
+
+export const tag = 'ui-list';
+export const themeVars = t;

package/src/components/ui-loading-indicator.js

@@ -0,0 +1,74 @@
+// <ui-loading-indicator> — the Material loading indicator: morphing dots,
+// distinct from determinate <ui-progress> / <ui-spinner>.
+//
+//   <ui-loading-indicator label="Loading"></ui-loading-indicator>
+//   <ui-loading-indicator variant="contained"></ui-loading-indicator>
+//
+// Always indeterminate. `contained` draws the dots on a tonal pill.
+//
+// @prop  {string} variant='uncontained' — uncontained | contained
+// @prop  {string} label='Loading'       — accessible name
+// @part  track, dot
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars, computed } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+
+const t = vars('ui-loading-indicator', {
+  size: '10px',
+  gap: sys.space(2),
+  dot: sys.color.primary,
+  containedBg: sys.color.secondaryContainer,
+  containedPad: sys.space(3),
+  containedRadius: sys.radius.full,
+});
+
+const styles = css`
+  :host { display: inline-flex; vertical-align: middle; }
+  .track {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: ${t.gap};
+  }
+  .contained {
+    padding: ${t.containedPad} ${sys.space(4)};
+    background: ${t.containedBg};
+    border-radius: ${t.containedRadius};
+  }
+  .dot {
+    inline-size: ${t.size};
+    block-size: ${t.size};
+    border-radius: ${sys.radius.full};
+    background: ${t.dot};
+    animation: ui-loading-dot ${sys.duration.extraLong2} ${sys.easing.standard} infinite;
+  }
+  .dot:nth-child(2) { animation-delay: calc(${sys.duration.short4} * 0.5); }
+  .dot:nth-child(3) { animation-delay: ${sys.duration.short4}; }
+  .dot:nth-child(4) { animation-delay: calc(${sys.duration.short4} * 1.5); }
+  @keyframes ui-loading-dot {
+    0%, 80%, 100% { transform: scale(0.55); opacity: 0.4; }
+    40% { transform: scale(1); opacity: 1; }
+  }
+`;
+
+define('ui-loading-indicator', {
+  props: { variant: 'uncontained', label: 'Loading' },
+  styles: [base, styles],
+  setup({ variant, label }) {
+    const cls = computed(() =>
+      `track${variant() === 'contained' ? ' contained' : ''}`);
+    return html`
+      <div class=${cls} part="track" role="progressbar" aria-busy="true"
+           aria-label=${() => label() || 'Loading'}>
+        <span class="dot" part="dot" aria-hidden="true"></span>
+        <span class="dot" part="dot" aria-hidden="true"></span>
+        <span class="dot" part="dot" aria-hidden="true"></span>
+        <span class="dot" part="dot" aria-hidden="true"></span>
+      </div>`;
+  },
+});
+
+export const tag = 'ui-loading-indicator';
+export const themeVars = t;

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

@@ -0,0 +1,117 @@
+// <ui-menu-item> — one action inside <ui-menu>.
+//
+// The host carries the `menuitem` semantics so the menu's roving tabindex can
+// manage it directly in the light DOM.
+//
+// @prop  {string}  value=''       — reported in the menu's `select` detail
+// @prop  {string}  icon=''        — leading registry icon
+// @prop  {boolean} disabled=false
+// @prop  {boolean} danger=false   — error color for destructive actions
+// @event ui-menu-select — internal; detail: { value } (consumed by <ui-menu>)
+// @slot  (default) — label
+// @slot  icon      — custom leading icon when `icon` is empty
+// @slot  trailing  — trailing hint (keyboard shortcut, badge)
+// @part  control — the styled item surface
+// @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 { ripple } from '../motion/ripple.js';
+import './ui-icon.js';
+
+const t = vars('ui-menu-item', {
+  height: '48px',
+  padInline: sys.space(3),
+  gap: sys.space(3),
+  font: sys.type.bodyLg,
+  tracking: sys.tracking.bodyLg,
+  fg: sys.color.onSurface,
+  iconFg: sys.color.onSurfaceVariant,
+  trailingFg: sys.color.onSurfaceVariant,
+  dangerFg: sys.color.error,
+});
+
+const styles = css`
+  :host { display: block; outline: none; }
+  :host([aria-disabled="true"]) { pointer-events: none; }
+  ${focusRingOn(':host')}
+  :host(:focus-visible) { outline-offset: -2px; }
+  .control {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    align-items: center;
+    gap: ${t.gap};
+    min-block-size: calc(${t.height} + var(--ui-density, 0) * 4px);
+    padding-inline: ${t.padInline};
+    font: ${t.font};
+    letter-spacing: ${t.tracking};
+    color: ${t.fg};
+    cursor: pointer;
+    user-select: none;
+    white-space: nowrap;
+    --ui-icon-size: 1.5rem;
+  }
+  .danger { color: ${t.dangerFg}; }
+  .layer {
+    position: absolute; inset: 0; z-index: -1;
+    background: currentColor; opacity: 0;
+    transition: opacity ${sys.duration.short2} ${sys.easing.standard};
+  }
+  .control:hover .layer { opacity: ${sys.state.hover}; }
+  :host(:focus-visible) .layer { opacity: ${sys.state.focus}; }
+  .control:active .layer { opacity: ${sys.state.pressed}; }
+  .leading { display: inline-flex; color: ${t.iconFg}; }
+  .danger .leading { color: inherit; }
+  .label { flex: 1; }
+  .trailing {
+    display: inline-flex;
+    color: ${t.trailingFg};
+    font: ${sys.type.labelMd};
+    letter-spacing: ${sys.tracking.labelMd};
+  }
+  :host([aria-disabled="true"]) .control {
+    cursor: default;
+    color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+  }
+`;
+
+define('ui-menu-item', {
+  props: { value: '', icon: '', disabled: false, danger: false },
+  styles: [base, styles],
+  setup({ value, icon, disabled, danger }, host) {
+    host.setAttribute('role', 'menuitem');
+    if (!host.hasAttribute('tabindex')) host.tabIndex = -1;
+    effect(() => {
+      if (disabled()) host.setAttribute('aria-disabled', 'true');
+      else host.removeAttribute('aria-disabled');
+    });
+
+    const select = () => {
+      if (disabled()) return;
+      host.emit('ui-menu-select', { value: value() });
+    };
+    host.addEventListener('click', select);
+    host.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        select();
+      }
+    });
+
+    return html`
+      <div part="control" class=${() => `control${danger() ? ' danger' : ''}`}
+           ref=${(el) => ripple(el, { disabled })}>
+        <span class="layer" aria-hidden="true"></span>
+        <span class="leading" aria-hidden="true">
+          ${() => (icon() ? html`<ui-icon name=${icon}></ui-icon>` : html`<slot name="icon"></slot>`)}
+        </span>
+        <span class="label"><slot></slot></span>
+        <span class="trailing"><slot name="trailing"></slot></span>
+      </div>`;
+  },
+});
+
+export const tag = 'ui-menu-item';
+export const themeVars = t;