@alacris/ui 0.0.0 → 0.1.1

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

@@ -0,0 +1,53 @@
+// <ui-carousel-item> — one slide inside <ui-carousel>.
+//
+// `selected` is written by the parent carousel; set the carousel's `index`
+// instead of this prop. Width comes from `--ui-carousel-item-basis` on the
+// parent (so the carousel variants can size slides without fighting `:host`).
+// The last item snaps to the end of the track so it can be scrolled fully into
+// view.
+//
+// @prop  {boolean} selected=false — managed by the parent <ui-carousel>
+// @slot  (default) — slide content
+// @part  surface — the snap item
+// @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';
+
+const t = vars('ui-carousel-item', {
+  bg: sys.color.surfaceContainerHighest,
+  fg: sys.color.onSurface,
+  radius: sys.radius.xl,
+});
+
+const styles = css`
+  :host {
+    display: block;
+    flex: 0 0 var(--ui-carousel-item-basis, 40%);
+    scroll-snap-align: start;
+    min-inline-size: 0;
+    transition: flex-basis ${sys.duration.medium2} ${sys.easing.standard};
+  }
+  :host(:last-child) { scroll-snap-align: end; }
+  .surface {
+    block-size: 100%;
+    overflow: hidden;
+    background: ${t.bg};
+    color: ${t.fg};
+    border-radius: ${t.radius};
+  }
+`;
+
+define('ui-carousel-item', {
+  props: { selected: false },
+  styles: [base, styles],
+  setup({ selected }, host) {
+    effect(() => host.toggleAttribute('selected', selected()));
+    return html`<div class="surface" part="surface" role="group"
+                     aria-roledescription="slide"><slot></slot></div>`;
+  },
+});
+
+export const tag = 'ui-carousel-item';
+export const themeVars = t;

package/src/components/ui-carousel.js

@@ -0,0 +1,301 @@
+// <ui-carousel> — a Material carousel: snap-scrolling slides with previous /
+// next controls.
+//
+//   <ui-carousel label="Photos" variant="multi-browse">
+//     <ui-carousel-item>One</ui-carousel-item>
+//     <ui-carousel-item>Two</ui-carousel-item>
+//   </ui-carousel>
+//
+// multi-browse shows several items; uncontained lets slides overflow the
+// frame; hero makes the selected slide dominate. Selection reflects down as
+// `selected` on each <ui-carousel-item>. Prev/next (and arrow keys) scroll
+// the selected slide into view; dragging the track updates `index`. The last
+// slide snaps to the end of the viewport so a hero (or any oversized) last
+// item can still become selected.
+//
+// @prop  {number} index=0 — the selected slide
+// @prop  {string} variant='multi-browse' — multi-browse | uncontained | hero
+// @prop  {string} label='' — accessible name for the region
+// @event change — index moved; detail: { index }
+// @slot  (default) — <ui-carousel-item> children
+// @part  viewport, track, prev, next
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars, effect, computed, signal, onCleanup } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base, focusRingOn } from './base.js';
+import { prefersReducedMotion } from '../motion/animate.js';
+import './ui-icon-button.js';
+import './ui-carousel-item.js';
+
+const t = vars('ui-carousel', {
+  gap: sys.space(2),
+  height: '200px',
+  heroSize: '80%',
+  controlFg: sys.color.onSurface,
+  itemBasis: '40%',
+});
+
+const styles = css`
+  :host { display: block; position: relative; }
+  .root { position: relative; }
+  .viewport {
+    overflow-x: auto;
+    overflow-y: hidden;
+    scroll-snap-type: x mandatory;
+    scrollbar-width: none;
+    block-size: ${t.height};
+    --ui-carousel-item-basis: ${t.itemBasis};
+  }
+  .viewport::-webkit-scrollbar { display: none; }
+  .track {
+    display: flex;
+    align-items: stretch;
+    gap: ${t.gap};
+    block-size: 100%;
+    padding-inline: ${sys.space(2)};
+  }
+  .track > slot { display: contents; }
+  .uncontained { --ui-carousel-item-basis: 56%; }
+  .hero { --ui-carousel-item-basis: ${t.heroSize}; }
+  .hero ::slotted(ui-carousel-item) {
+    transition: opacity ${sys.duration.medium2} ${sys.easing.standard};
+    opacity: 0.75;
+  }
+  .hero ::slotted(ui-carousel-item[selected]) {
+    opacity: 1;
+  }
+  .prev, .next {
+    position: absolute;
+    inset-block-start: 50%;
+    translate: 0 -50%;
+    z-index: 1;
+    color: ${t.controlFg};
+  }
+  .prev { inset-inline-start: ${sys.space(1)}; }
+  .next { inset-inline-end: ${sys.space(1)}; }
+  ${focusRingOn('.prev')}
+  ${focusRingOn('.next')}
+`;
+
+define('ui-carousel', {
+  props: { index: 0, variant: 'multi-browse', label: '' },
+  styles: [base, styles],
+  setup({ index, variant, label }, host) {
+    const rev = signal(0);
+    const scrollPos = signal(0);
+    const maxScroll = signal(0);
+    const bump = () => rev.update((n) => n + 1);
+    const itemsOf = () => [...host.querySelectorAll('ui-carousel-item')];
+    let viewport = null;
+    let ignoreScroll = false;
+    let ignoreTimer = 0;
+    let ignoreGen = 0;
+
+    const clamp = (n) => {
+      const max = Math.max(0, itemsOf().length - 1);
+      return Math.max(0, Math.min(max, n));
+    };
+
+    const updateScrollBounds = () => {
+      if (!viewport) return;
+      scrollPos.set(viewport.scrollLeft);
+      maxScroll.set(Math.max(0, viewport.scrollWidth - viewport.clientWidth));
+    };
+
+    let isProgrammatic = true;
+
+    const beginIgnore = () => {
+      const gen = ++ignoreGen;
+      ignoreScroll = true;
+      if (ignoreTimer) clearTimeout(ignoreTimer);
+      const done = () => {
+        if (gen !== ignoreGen) return;
+        ignoreScroll = false;
+        ignoreTimer = 0;
+        updateScrollBounds();
+      };
+      viewport.addEventListener('scrollend', done, { once: true });
+      ignoreTimer = setTimeout(done, 500);
+    };
+
+    const targetScrollFor = (i) => {
+      const items = itemsOf();
+      if (!items.length || !viewport) return 0;
+      const idx = clamp(i);
+      const max = Math.max(0, viewport.scrollWidth - viewport.clientWidth);
+      if (idx === 0) return 0;
+      if (idx === items.length - 1 && items.length > 1) return max;
+
+      const track = viewport.querySelector('.track');
+      const trackPad = track ? parseFloat(getComputedStyle(track).paddingInlineStart) || 8 : 8;
+      const target = items[idx];
+      if (!target) return 0;
+      const dest = target.offsetLeft - trackPad;
+      return Math.max(0, Math.min(max, dest));
+    };
+
+    const go = (n) => {
+      const items = itemsOf();
+      if (!items.length) return;
+      const cur = index.peek();
+      const max = viewport ? Math.max(0, viewport.scrollWidth - viewport.clientWidth) : 0;
+      const hasLayout = viewport && viewport.clientWidth > 0 && max > 0;
+
+      let targetIdx = clamp(n);
+
+      if (hasLayout) {
+        const curScroll = viewport.scrollLeft;
+        if (n < cur) {
+          for (let i = cur - 1; i >= 0; i--) {
+            const dest = targetScrollFor(i);
+            if (dest < curScroll - 5 || i === 0) {
+              targetIdx = i;
+              break;
+            }
+          }
+        } else if (n > cur) {
+          for (let i = cur + 1; i < items.length; i++) {
+            const dest = targetScrollFor(i);
+            if (dest > curScroll + 5 || (i === items.length - 1 && curScroll < max - 5)) {
+              targetIdx = i;
+              break;
+            }
+          }
+        }
+        if (targetIdx === cur && Math.abs(targetScrollFor(targetIdx) - curScroll) < 2) return;
+      }
+
+      isProgrammatic = true;
+      index.set(targetIdx);
+      host.emit('change', { index: targetIdx });
+    };
+
+    const scrollToCurrent = () => {
+      const items = itemsOf();
+      const i = clamp(index.peek());
+      const target = items[i];
+      if (!target || !viewport) return;
+      if (typeof viewport.scrollTo !== 'function') return;
+      const dest = targetScrollFor(i);
+      if (Math.abs(dest - viewport.scrollLeft) < 1) {
+        updateScrollBounds();
+        return;
+      }
+      beginIgnore();
+      viewport.scrollTo({
+        left: dest,
+        behavior: prefersReducedMotion() ? 'auto' : 'smooth',
+      });
+    };
+
+    const sync = () => {
+      rev();
+      const i = clamp(index());
+      itemsOf().forEach((el, n) => { el.selected = n === i; });
+      if (isProgrammatic || !viewport) {
+        isProgrammatic = false;
+        requestAnimationFrame(scrollToCurrent);
+      }
+    };
+    effect(sync);
+
+    const onScroll = () => {
+      updateScrollBounds();
+    };
+
+    const onScrollEnd = () => {
+      updateScrollBounds();
+      if (ignoreScroll) return;
+      const items = itemsOf();
+      if (!items.length || !viewport) return;
+      const curScroll = viewport.scrollLeft;
+      const max = viewport.scrollWidth - viewport.clientWidth;
+
+      let best = 0;
+      if (max > 1 && curScroll >= max - 2) {
+        best = items.length - 1;
+      } else if (curScroll <= 2) {
+        best = 0;
+      } else {
+        const origin = viewport.getBoundingClientRect().left;
+        let bestDist = Infinity;
+        items.forEach((el, n) => {
+          const d = Math.abs(el.getBoundingClientRect().left - origin);
+          if (d < bestDist) { bestDist = d; best = n; }
+        });
+      }
+
+      if (best !== index.peek()) {
+        index.set(best);
+        host.emit('change', { index: best });
+      }
+    };
+
+    const onKey = (e) => {
+      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); go(index() + 1); }
+      else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); go(index() - 1); }
+      else if (e.key === 'Home') { e.preventDefault(); go(0); }
+      else if (e.key === 'End') { e.preventDefault(); go(itemsOf().length - 1); }
+    };
+
+    const viewportRef = (el) => {
+      viewport?.removeEventListener('scrollend', onScrollEnd);
+      viewport?.removeEventListener('scroll', onScroll);
+      viewport = el;
+      el.addEventListener('scrollend', onScrollEnd);
+      el.addEventListener('scroll', onScroll, { passive: true });
+      requestAnimationFrame(() => {
+        updateScrollBounds();
+        scrollToCurrent();
+      });
+    };
+    onCleanup(() => {
+      if (ignoreTimer) clearTimeout(ignoreTimer);
+      viewport?.removeEventListener('scrollend', onScrollEnd);
+      viewport?.removeEventListener('scroll', onScroll);
+    });
+
+    const cls = computed(() => `viewport ${variant()}`);
+    const atStart = computed(() => {
+      rev();
+      const i = index();
+      if (i <= 0) return true;
+      if (variant() !== 'hero' && viewport && viewport.clientWidth > 0) {
+        return scrollPos() <= 1 && i <= 0;
+      }
+      return i <= 0;
+    });
+    const atEnd = computed(() => {
+      rev();
+      const n = itemsOf().length;
+      if (n === 0) return true;
+      const i = index();
+      if (i >= n - 1) return true;
+      if (variant() !== 'hero' && viewport && viewport.clientWidth > 0) {
+        const max = maxScroll();
+        if (max > 1 && scrollPos() >= max - 2) return true;
+      }
+      return false;
+    });
+
+    return html`
+      <div class="root" role="region" aria-roledescription="carousel"
+           aria-label=${() => label() || null} @keydown=${onKey}>
+        <ui-icon-button class="prev" part="prev" variant="tonal"
+                        icon="chevron-left" label="Previous"
+                        ?disabled=${atStart} @click=${() => go(index() - 1)}></ui-icon-button>
+        <div class=${cls} part="viewport" tabindex="0" ref=${viewportRef}>
+          <div class="track" part="track">
+            <slot @slotchange=${bump}></slot>
+          </div>
+        </div>
+        <ui-icon-button class="next" part="next" variant="tonal"
+                        icon="chevron-right" label="Next"
+                        ?disabled=${atEnd} @click=${() => go(index() + 1)}></ui-icon-button>
+      </div>`;
+  },
+});
+
+export const tag = 'ui-carousel';
+export const themeVars = t;

package/src/components/ui-checkbox.js

@@ -0,0 +1,165 @@
+// <ui-checkbox> — the Material checkbox with indeterminate support.
+//
+// The interactive element is a native <button role="checkbox"> sized to a
+// 40px touch target; the visible 18px box sits centered inside it. Clicking
+// clears `indeterminate` and toggles `checked`. The check/dash is the MD3
+// 2px stroke mark in the 18dp icon, not the generic 24dp `check` glyph.
+//
+// @prop  {boolean} checked=false
+// @prop  {boolean} indeterminate=false — aria-checked="mixed", shows a dash
+// @prop  {boolean} disabled=false
+// @prop  {string}  label=''  — visible label; also the accessible name.
+//                               Empty leaves the control unnamed (authoring error).
+// @prop  {string}  name=''   — form field name (submits `value` while checked)
+// @prop  {string}  value='on'
+// @event change — detail: { checked, indeterminate: false }
+// @part  control — the <button role="checkbox"> (the 40px target)
+// @part  box     — the visible 18px box
+// @part  label   — the visible label span (omit `label` and this is absent)
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, svg, 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 { presence } from '../motion/presence.js';
+import { fx } from '../motion/animate.js';
+import { formBind } from '../util/form.js';
+
+const t = vars('ui-checkbox', {
+  target: '40px',
+  boxSize: '18px',
+  radius: sys.radius.xs,
+  outlineColor: sys.color.onSurfaceVariant,
+  bg: sys.color.primary,
+  markFg: sys.color.onPrimary,
+  labelFg: sys.color.onSurface,
+});
+
+const styles = css`
+  :host { display: inline-flex; }
+  label {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    font: ${sys.type.bodyMd};
+    letter-spacing: ${sys.tracking.bodyMd};
+    color: ${t.labelFg};
+    user-select: none;
+  }
+  label.disabled {
+    cursor: default;
+    pointer-events: none;
+    color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+  }
+  .control {
+    position: relative;
+    isolation: isolate;
+    flex: none;
+    display: grid;
+    place-items: center;
+    inline-size: max(${t.boxSize}, calc(${t.target} + var(--ui-density, 0) * 4px));
+    block-size: max(${t.boxSize}, calc(${t.target} + var(--ui-density, 0) * 4px));
+    padding: 0;
+    border: none;
+    border-radius: ${sys.radius.full};
+    background: transparent;
+    color: ${t.outlineColor};
+    cursor: pointer;
+  }
+  ${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}; }
+
+  .box {
+    position: relative;
+    inline-size: ${t.boxSize};
+    block-size: ${t.boxSize};
+    border-radius: ${t.radius};
+    display: grid;
+    place-items: center;
+    overflow: hidden;
+    color: ${t.markFg};
+    box-shadow: inset 0 0 0 2px ${t.outlineColor};
+    transition: background-color ${sys.duration.short2} ${sys.easing.standard},
+                box-shadow ${sys.duration.short2} ${sys.easing.standard};
+  }
+  .box svg {
+    display: block;
+    inline-size: ${t.boxSize};
+    block-size: ${t.boxSize};
+  }
+  .control[aria-checked="true"],
+  .control[aria-checked="mixed"] { color: ${t.bg}; }
+  .control[aria-checked="true"] .box,
+  .control[aria-checked="mixed"] .box {
+    background: ${t.bg};
+    box-shadow: none;
+  }
+
+  .control:disabled { cursor: default; pointer-events: none; }
+  .control:disabled .box {
+    box-shadow: inset 0 0 0 2px color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+  }
+  .control:disabled[aria-checked="true"] .box,
+  .control:disabled[aria-checked="mixed"] .box {
+    background: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+    box-shadow: none;
+    color: ${sys.color.surface};
+  }
+`;
+
+define('ui-checkbox', {
+  formAssociated: true,
+  props: { checked: false, indeterminate: false, disabled: false, label: '', name: '', value: 'on' },
+  styles: [base, styles],
+  setup({ checked, indeterminate, disabled, label, name, value }, host) {
+    formBind(host, { name, value, checked, disabled });
+
+    const state = computed(() => (indeterminate() ? 'mixed' : String(checked())));
+    const marked = computed(() => checked() || indeterminate());
+
+    const onClick = () => {
+      if (disabled()) return;
+      indeterminate.set(false);
+      checked.set(!checked());
+      host.emit('change', { checked: checked(), indeterminate: false });
+    };
+
+    return html`
+      <label class=${() => (disabled() ? 'disabled' : null)}>
+        <button part="control" class="control" type="button" role="checkbox"
+                aria-checked=${state} ?disabled=${disabled}
+                aria-labelledby=${() => (label() ? 'label' : null)}
+                @click=${onClick}
+                ref=${(el) => ripple(el, { disabled, centered: true })}>
+          <span class="layer" aria-hidden="true"></span>
+          <span part="box" class="box" aria-hidden="true">
+            ${presence(marked, () => svg`
+                <svg viewBox="0 0 18 18" aria-hidden="true">
+                  <path fill="none" stroke="currentColor" stroke-width="2"
+                        stroke-linecap="round" stroke-linejoin="round"
+                        d=${() => (indeterminate() ? 'M4 9h10' : 'M4 9.8l3.2 3.2 7.2-7.2')}></path>
+                </svg>`, {
+              enter: fx.scaleIn,
+              exit: fx.scaleOut,
+              enterDuration: 'short4',
+              exitDuration: 'short2',
+            })}
+          </span>
+        </button>
+        ${() => (label() ? html`<span id="label" part="label">${label}</span>` : null)}
+      </label>`;
+  },
+});
+
+export const tag = 'ui-checkbox';
+export const themeVars = t;

package/src/components/ui-chip-set.js

@@ -0,0 +1,90 @@
+// <ui-chip-set> — a wrapping row of <ui-chip>s with roving-tabindex focus.
+//
+// When any slotted chip is a filter chip the set is a listbox
+// (aria-multiselectable mirrors `multi`); otherwise it is a plain group.
+// Single-select coordination: with `multi=false`, selecting a filter chip
+// deselects its siblings and the set emits `change` with the selected chip's
+// `value`; deselecting the active chip emits `change` with ''.
+//
+// @prop  {string}  label='' — accessible name for the set
+// @prop  {boolean} multi=false — allow several filter chips selected at once
+// @event change — single-select mode only; detail: { value }
+// @slot  (default) — <ui-chip> children
+// @vars  --ui-chip-set-gap
+
+import { define, html, css, vars, signal, effect, onCleanup } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+import { rovingTabindex } from '../util/keys.js';
+import './ui-chip.js';
+
+const t = vars('ui-chip-set', {
+  gap: sys.space(2),
+});
+
+const styles = css`
+  :host {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: ${t.gap};
+  }
+`;
+
+define('ui-chip-set', {
+  props: { label: '', multi: false },
+  styles: [base, styles],
+  setup({ label, multi }, host) {
+    const hasFilter = signal(false);
+
+    effect(() => {
+      if (hasFilter()) {
+        host.setAttribute('role', 'listbox');
+        host.setAttribute('aria-multiselectable', String(multi()));
+      } else {
+        host.setAttribute('role', 'group');
+        host.removeAttribute('aria-multiselectable');
+      }
+    });
+    effect(() => {
+      if (label()) host.setAttribute('aria-label', label());
+      else host.removeAttribute('aria-label');
+    });
+
+    const roving = rovingTabindex(host, {
+      selector: 'ui-chip',
+      orientation: 'both',
+      skip: (el) => !!el.disabled || el.hasAttribute('disabled'),
+    });
+    onCleanup(() => roving.destroy());
+
+    const chips = () => [...host.querySelectorAll('ui-chip')];
+    const chipValue = (c) => {
+      const v = c.value;
+      return (v === undefined || v === null || v === '') ? (c.getAttribute('value') || '') : String(v);
+    };
+    const scan = () => {
+      hasFilter.set(chips().some((c) => (c.variant ?? c.getAttribute('variant')) === 'filter'));
+      roving.refresh();
+    };
+
+    // Single-select coordination over bubbling chip `change` events.
+    host.addEventListener('change', (e) => {
+      const chip = e.target;
+      if (!(chip instanceof Element) || chip.tagName !== 'UI-CHIP') return;
+      if (multi()) return;
+      e.stopPropagation();
+      if (e.detail?.selected) {
+        for (const c of chips()) if (c !== chip) c.selected = false;
+        host.emit('change', { value: chipValue(chip) });
+      } else {
+        host.emit('change', { value: '' });
+      }
+    });
+
+    return html`<slot ref=${(el) => { el.addEventListener('slotchange', scan); scan(); }}></slot>`;
+  },
+});
+
+export const tag = 'ui-chip-set';
+export const themeVars = t;