@alacris/ui 0.0.0 → 0.1.0

package/src/components/ui-side-sheet.js

@@ -0,0 +1,221 @@
+// <ui-side-sheet> — a Material side sheet for complementary content.
+//
+//   <ui-side-sheet open=${open} @close=${() => open(false)}>
+//     <span slot="headline">Filters</span>
+//     Sheet body
+//     <ui-button slot="actions" variant="text">Apply</ui-button>
+//   </ui-side-sheet>
+//
+// Distinct from <ui-drawer> (navigation) and <ui-sheet> (bottom). Modal
+// (default): a scrim plus a panel that slides in from the end edge. Focus is
+// trapped and page scroll locked while open. The PARENT owns `open`. Standard:
+// an in-flow panel that animates its inline size — no scrim, no trap.
+//
+// @prop  {boolean} open=false
+// @prop  {string}  variant='modal' — modal | standard
+// @prop  {string}  anchor='end'    — start | end
+// @prop  {boolean} persistent=false — Escape/scrim do not request closing
+// @prop  {string}  label=''         — accessible name if no headline slot
+// @event close  — detail: { reason: 'esc' | 'scrim' | 'method' }
+// @event opened — enter animation finished
+// @event closed — exit animation finished, DOM removed
+// @slot  (default) — body content
+// @slot  headline
+// @slot  actions
+// @part  scrim, surface, headline, body, actions
+// @vars  see `t` below (`themeVars.names`)
+
+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 { animate, fx } from '../motion/animate.js';
+import { focusTrap, scrollLock } from '../util/focus.js';
+import './ui-icon-button.js';
+
+const t = vars('ui-side-sheet', {
+  bg: sys.color.surfaceContainerLow,
+  fg: sys.color.onSurface,
+  width: 'min(400px, 90vw)',
+  radius: sys.radius.lg,
+  scrim: `color-mix(in srgb, ${sys.color.scrim} 32%, transparent)`,
+});
+
+const styles = css`
+  :host { display: contents; }
+  .overlay {
+    position: fixed;
+    inset: 0;
+    z-index: ${sys.z.modal};
+  }
+  .scrim { position: absolute; inset: 0; background: ${t.scrim}; }
+  .surface {
+    position: absolute;
+    inset-block: 0;
+    display: flex;
+    flex-direction: column;
+    inline-size: ${t.width};
+    background: ${t.bg};
+    color: ${t.fg};
+    box-shadow: ${sys.elevation[1]};
+  }
+  .surface.start {
+    inset-inline-start: 0;
+    border-start-end-radius: ${t.radius};
+    border-end-end-radius: ${t.radius};
+  }
+  .surface.end {
+    inset-inline-end: 0;
+    border-start-start-radius: ${t.radius};
+    border-end-start-radius: ${t.radius};
+  }
+  .header {
+    display: flex;
+    align-items: center;
+    gap: ${sys.space(1)};
+    min-block-size: 64px;
+    padding-inline: ${sys.space(4)} ${sys.space(2)};
+  }
+  .headline {
+    flex: 1;
+    font: ${sys.type.titleLg};
+    letter-spacing: ${sys.tracking.titleLg};
+  }
+  .body {
+    flex: 1;
+    overflow: auto;
+    padding: ${sys.space(2)} ${sys.space(6)} ${sys.space(6)};
+    font: ${sys.type.bodyMd};
+    letter-spacing: ${sys.tracking.bodyMd};
+    color: ${sys.color.onSurfaceVariant};
+  }
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: ${sys.space(2)};
+    padding: ${sys.space(2)} ${sys.space(4)} ${sys.space(4)};
+  }
+  .actions:not(.has) { display: none; }
+
+  .std {
+    display: block;
+    inline-size: 0;
+    overflow: hidden;
+    background: ${t.bg};
+    color: ${t.fg};
+    transition: inline-size ${sys.duration.medium2} ${sys.easing.emphasized};
+  }
+  .std.open { inline-size: ${t.width}; }
+  .std-inner { inline-size: ${t.width}; }
+`;
+
+define('ui-side-sheet', {
+  props: { open: false, variant: 'modal', anchor: 'end', persistent: false, label: '' },
+  styles: [base, styles],
+  setup({ open, variant, anchor, persistent, label }, host) {
+    let releaseTrap = null;
+    let unlock = null;
+    let surfaceEl = null;
+    const hasHeadline = signal(false);
+
+    const requestClose = (reason) => {
+      if (reason !== 'method' && persistent()) return;
+      host.emit('close', { reason });
+    };
+
+    const slideIn = () => (anchor.peek() === 'start' ? fx.slideInLeft : fx.slideInRight);
+    const slideOut = () => (anchor.peek() === 'start' ? fx.slideOutLeft : fx.slideOutRight);
+
+    const onDocKeydown = (e) => {
+      if (e.key === 'Escape') requestClose('esc');
+    };
+
+    effect(() => {
+      if (open() && variant() !== 'standard') {
+        document.addEventListener('keydown', onDocKeydown, true);
+        unlock = scrollLock();
+        queueMicrotask(() => {
+          if (open() && !releaseTrap) releaseTrap = focusTrap(host);
+        });
+      } else {
+        document.removeEventListener('keydown', onDocKeydown, true);
+        releaseTrap?.();
+        releaseTrap = null;
+        unlock?.();
+        unlock = null;
+      }
+    });
+    effect(() => {
+      if (!open() && surfaceEl?.isConnected) {
+        animate(surfaceEl, slideOut(), { duration: 'short4', easing: 'emphasizedAccelerate' });
+      }
+    });
+    onCleanup(() => {
+      document.removeEventListener('keydown', onDocKeydown, true);
+      releaseTrap?.();
+      unlock?.();
+    });
+
+    const surfaceRef = (el) => {
+      surfaceEl = el;
+      animate(el, slideIn(), { duration: 'medium2', easing: 'emphasizedDecelerate' });
+    };
+
+    const hasSlot = (el, set) => {
+      const sync = () => set(el.assignedElements().length > 0);
+      el.addEventListener('slotchange', sync);
+      sync();
+    };
+
+    const modalView = () => html`
+      <div class="overlay">
+        <div class="scrim" part="scrim" aria-hidden="true" @click=${() => requestClose('scrim')}></div>
+        <aside class=${() => `surface ${anchor()}`} part="surface" role="dialog" aria-modal="true"
+               aria-labelledby=${() => (hasHeadline() ? 'headline' : null)}
+               aria-label=${() => (hasHeadline() ? null : (label() || 'Side sheet'))}
+               tabindex="-1" ref=${surfaceRef}>
+          <div class="header">
+            <div class="headline" part="headline" id="headline"
+                 ref=${(el) => hasSlot(el.querySelector('slot'), (has) => hasHeadline.set(has))}>
+              <slot name="headline"></slot>
+            </div>
+            <ui-icon-button icon="close" label="Close" @click=${() => requestClose('method')}></ui-icon-button>
+          </div>
+          <div class="body" part="body"><slot></slot></div>
+          <div class="actions" part="actions"
+               ref=${(el) => hasSlot(el.querySelector('slot'), (has) => el.classList.toggle('has', has))}>
+            <slot name="actions"></slot>
+          </div>
+        </aside>
+      </div>`;
+
+    return html`
+      ${() =>
+        variant() === 'standard'
+          ? html`<aside class=${() => `std ${anchor()}${open() ? ' open' : ''}`} part="surface"
+                        role="region"
+                        aria-labelledby=${() => (hasHeadline() ? 'headline' : null)}
+                        aria-label=${() => (hasHeadline() ? null : (label() || 'Side sheet'))}>
+              <div class="std-inner">
+                <div class="header">
+                  <div class="headline" part="headline" id="headline"
+                       ref=${(el) => hasSlot(el.querySelector('slot'), (has) => hasHeadline.set(has))}>
+                    <slot name="headline"></slot>
+                  </div>
+                </div>
+                <div class="body" part="body"><slot></slot></div>
+              </div>
+            </aside>`
+          : null}
+      ${presence(() => open() && variant() !== 'standard', modalView, {
+        enter: fx.fadeIn,
+        exit: fx.fadeOut,
+        exitDuration: 'short4',
+        onEntered: () => host.emit('opened'),
+        onExited: () => host.emit('closed'),
+      })}`;
+  },
+});
+
+export const tag = 'ui-side-sheet';
+export const themeVars = t;

package/src/components/ui-skeleton.js

@@ -0,0 +1,89 @@
+// <ui-skeleton> — a loading placeholder shape.
+//
+//   <ui-skeleton variant="circular" width="40px" height="40px"></ui-skeleton>
+//   <ui-skeleton width="60%"></ui-skeleton>
+//   <ui-skeleton variant="rectangular" height="120px" animation="wave"></ui-skeleton>
+//
+// Always aria-hidden: a skeleton is decorative. Announce loading state on the
+// region that will receive the content (aria-busy), not on the placeholder.
+//
+// @prop  {string} variant='text'    — text | circular | rectangular
+// @prop  {string} width=''          — CSS length; defaults to 100%
+// @prop  {string} height=''         — CSS length; text defaults to 1em
+// @prop  {string} animation='pulse' — pulse | wave | none
+// @part  shape — the placeholder element
+// @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-skeleton', {
+  bg: `color-mix(in srgb, ${sys.color.onSurface} 11%, transparent)`,
+  wave: `color-mix(in srgb, ${sys.color.onSurface} 7%, transparent)`,
+  radius: sys.radius.xs,
+});
+
+const styles = css`
+  :host { display: block; }
+  .shape {
+    position: relative;
+    overflow: hidden;
+    inline-size: 100%;
+    background: ${t.bg};
+  }
+  .text {
+    block-size: 1em;
+    border-radius: ${t.radius};
+    transform: scale(1, 0.6); /* mimic a line of text within its line-height */
+    transform-origin: 0 60%;
+  }
+  .circular {
+    border-radius: ${sys.radius.full};
+    inline-size: 40px;
+    block-size: 40px;
+  }
+  .rectangular { block-size: 1.2em; }
+
+  @keyframes ui-skeleton-pulse {
+    0%   { opacity: 1; }
+    50%  { opacity: 0.5; }
+    100% { opacity: 1; }
+  }
+  .pulse {
+    animation: ui-skeleton-pulse calc(${sys.duration.extraLong4} * 2) ${sys.easing.standard} infinite;
+  }
+
+  @keyframes ui-skeleton-wave {
+    0%   { transform: translateX(-100%); }
+    100% { transform: translateX(100%); }
+  }
+  .wave::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(90deg, transparent, ${t.wave}, transparent);
+    animation: ui-skeleton-wave calc(${sys.duration.extraLong4} * 1.6) ${sys.easing.linear} infinite;
+  }
+`;
+
+define('ui-skeleton', {
+  props: { variant: 'text', width: '', height: '', animation: 'pulse' },
+  styles: [base, styles],
+  setup({ variant, width, height, animation }, host) {
+    host.setAttribute('aria-hidden', 'true');
+
+    const cls = () =>
+      `shape ${variant()}${animation() !== 'none' ? ` ${animation()}` : ''}`;
+    const dims = () => ({
+      width: width() || null,
+      height: height() || null,
+    });
+
+    return html`<div part="shape" class=${cls} style=${dims}></div>`;
+  },
+});
+
+export const tag = 'ui-skeleton';
+export const themeVars = t;

package/src/components/ui-slider.js

@@ -0,0 +1,266 @@
+// <ui-slider> — a Material slider on native <input type="range">s for
+// keyboard and screen-reader behavior.
+//
+// The active track portion is painted with `--ui-slider-fill` (or start/end
+// when `range`) bound from the template into a gradient; the thumb's
+// hover/focus halo is a box-shadow state layer.
+//
+// @prop  {number}  value=0
+// @prop  {number}  min=0
+// @prop  {number}  max=100
+// @prop  {number}  step=1
+// @prop  {boolean} range=false — two thumbs; uses valueStart / valueEnd
+// @prop  {number}  valueStart=0
+// @prop  {number}  valueEnd=100
+// @prop  {string}  label=''   — REQUIRED accessible name (aria-label)
+// @prop  {boolean} disabled=false
+// @prop  {boolean} showValue=false — value bubble above the thumb while
+//        focused/dragging (animates in and out)
+// @prop  {string}  name=''    — form participation
+// @event input  — every drag/keystroke; detail: { value } or { start, end }
+// @event change — committed value; detail: { value } or { start, end }
+// @part  input — the native <input type="range"> (both, when range)
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars, computed, signal, effect } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+import { formBind } from '../util/form.js';
+import { presence } from '../motion/presence.js';
+import { fx } from '../motion/animate.js';
+
+const t = vars('ui-slider', {
+  trackHeight: '4px',
+  thumbSize: '20px',
+  track: sys.color.surfaceContainerHighest,
+  active: sys.color.primary,
+  thumb: sys.color.primary,
+  bubbleBg: sys.color.primary,
+  bubbleFg: sys.color.onPrimary,
+});
+
+const styles = css`
+  :host { display: block; inline-size: 240px; }
+  .root { position: relative; display: flex; align-items: center; }
+  input {
+    appearance: none;
+    -webkit-appearance: none;
+    inline-size: 100%;
+    /* density never shrinks the touch target below 44px */
+    block-size: max(44px, calc(48px + var(--ui-density, 0) * 4px));
+    margin: 0;
+    padding: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+  /* The thumb halo below replaces the native outline as the focus indicator. */
+  input:focus-visible { outline: none; }
+
+  input::-webkit-slider-runnable-track {
+    block-size: ${t.trackHeight};
+    border-radius: ${sys.radius.full};
+    background: linear-gradient(to right,
+      ${t.track} 0%,
+      ${t.track} var(--ui-slider-start, 0%),
+      ${t.active} var(--ui-slider-start, 0%),
+      ${t.active} var(--ui-slider-end, var(--ui-slider-fill, 0%)),
+      ${t.track} var(--ui-slider-end, var(--ui-slider-fill, 0%)),
+      ${t.track} 100%);
+  }
+  input::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    inline-size: ${t.thumbSize};
+    block-size: ${t.thumbSize};
+    margin-block-start: calc((${t.trackHeight} - ${t.thumbSize}) / 2);
+    border: none;
+    border-radius: ${sys.radius.full};
+    background: ${t.thumb};
+    transition: box-shadow ${sys.duration.short2} ${sys.easing.standard};
+  }
+  input:hover::-webkit-slider-thumb {
+    box-shadow: 0 0 0 10px color-mix(in srgb, ${t.thumb} calc(${sys.state.hover} * 100%), transparent);
+  }
+  input:focus-visible::-webkit-slider-thumb,
+  input:active::-webkit-slider-thumb {
+    box-shadow: 0 0 0 10px color-mix(in srgb, ${t.thumb} calc(${sys.state.focus} * 100%), transparent);
+  }
+
+  input::-moz-range-track {
+    block-size: ${t.trackHeight};
+    border-radius: ${sys.radius.full};
+    background: ${t.track};
+  }
+  input::-moz-range-progress {
+    block-size: ${t.trackHeight};
+    border-radius: ${sys.radius.full};
+    background: ${t.active};
+  }
+  input::-moz-range-thumb {
+    inline-size: ${t.thumbSize};
+    block-size: ${t.thumbSize};
+    border: none;
+    border-radius: ${sys.radius.full};
+    background: ${t.thumb};
+    transition: box-shadow ${sys.duration.short2} ${sys.easing.standard};
+  }
+  input:hover::-moz-range-thumb {
+    box-shadow: 0 0 0 10px color-mix(in srgb, ${t.thumb} calc(${sys.state.hover} * 100%), transparent);
+  }
+  input:focus-visible::-moz-range-thumb {
+    box-shadow: 0 0 0 10px color-mix(in srgb, ${t.thumb} calc(${sys.state.focus} * 100%), transparent);
+  }
+
+  input:disabled { cursor: default; pointer-events: none; opacity: ${sys.state.disabledContent}; }
+
+  .dual {
+    position: relative;
+    inline-size: 100%;
+    /* Abs-pos thumbs are out of flow; without this the track collapses to 0. */
+    block-size: max(44px, calc(48px + var(--ui-density, 0) * 4px));
+  }
+  .dual input { position: absolute; inset: 0; pointer-events: none; }
+  .dual input::-webkit-slider-thumb { pointer-events: auto; }
+  .dual input::-moz-range-thumb { pointer-events: auto; }
+  .dual input:last-child::-webkit-slider-runnable-track { background: transparent; }
+  .dual input:last-child::-moz-range-track { background: transparent; }
+  .dual input:last-child::-moz-range-progress { background: transparent; }
+
+  .bubble {
+    position: absolute;
+    inset-inline-start: var(--ui-slider-fill, 0%);
+    inset-block-start: 0;
+    translate: -50% -100%;
+    padding: ${sys.space(1)} ${sys.space(2)};
+    border-radius: ${sys.radius.full};
+    background: ${t.bubbleBg};
+    color: ${t.bubbleFg};
+    font: ${sys.type.labelMd};
+    letter-spacing: ${sys.tracking.labelMd};
+    white-space: nowrap;
+    pointer-events: none;
+  }
+`;
+
+define('ui-slider', {
+  formAssociated: true,
+  props: {
+    value: 0, min: 0, max: 100, step: 1,
+    range: false, valueStart: 0, valueEnd: 100,
+    label: '', disabled: false, showValue: false, name: '',
+  },
+  styles: [base, styles],
+  setup({ value, min, max, step, range, valueStart, valueEnd, label, disabled, showValue, name }, host) {
+    const submitted = signal(String(value.peek()));
+    effect(() => {
+      submitted.set(range() ? `${valueStart()},${valueEnd()}` : String(value()));
+    });
+    formBind(host, { name, value: submitted, disabled });
+
+    const active = signal(false);
+    const activeThumb = signal('end');
+
+    const pct = (n) => {
+      const lo = min();
+      const span = max() - lo || 1;
+      return Math.min(100, Math.max(0, ((n - lo) / span) * 100));
+    };
+    const fill = computed(() => pct(value()));
+    const startPct = computed(() => (range() ? pct(valueStart()) : 0));
+    const endPct = computed(() => (range() ? pct(valueEnd()) : fill()));
+    const bubblePct = computed(() =>
+      range() ? (activeThumb() === 'start' ? startPct() : endPct()) : fill());
+    const bubbleText = computed(() =>
+      range() ? (activeThumb() === 'start' ? valueStart() : valueEnd()) : value());
+
+    const read = (el) => {
+      const n = Number(el.value);
+      return Number.isNaN(n) ? min() : n;
+    };
+    const emit = (type) => {
+      host.emit(type, range()
+        ? { start: valueStart(), end: valueEnd(), value: `${valueStart()},${valueEnd()}` }
+        : { value: value() });
+    };
+    const onInput = (e) => {
+      e.stopPropagation();
+      value.set(read(e.target));
+      emit('input');
+    };
+    const onChange = (e) => {
+      e.stopPropagation();
+      value.set(read(e.target));
+      emit('change');
+    };
+    const onStartInput = (e) => {
+      e.stopPropagation();
+      valueStart.set(Math.min(read(e.target), valueEnd()));
+      activeThumb.set('start');
+      emit('input');
+    };
+    const onEndInput = (e) => {
+      e.stopPropagation();
+      valueEnd.set(Math.max(read(e.target), valueStart()));
+      activeThumb.set('end');
+      emit('input');
+    };
+    const onStartChange = (e) => {
+      e.stopPropagation();
+      valueStart.set(Math.min(read(e.target), valueEnd()));
+      emit('change');
+    };
+    const onEndChange = (e) => {
+      e.stopPropagation();
+      valueEnd.set(Math.max(read(e.target), valueStart()));
+      emit('change');
+    };
+
+    const styleVars = computed(() => ({
+      '--ui-slider-fill': fill() + '%',
+      '--ui-slider-start': startPct() + '%',
+      '--ui-slider-end': endPct() + '%',
+    }));
+
+    return html`
+      <div class="root" style=${styleVars}>
+        ${() => (range()
+          ? html`<div class="dual">
+              <input part="input" type="range"
+                     min=${min} max=${max} step=${step} .value=${valueStart}
+                     ?disabled=${disabled}
+                     aria-label=${() => (label() ? label() + ' start' : 'Start')}
+                     @input=${onStartInput} @change=${onStartChange}
+                     @pointerdown=${() => { active.set(true); activeThumb.set('start'); }}
+                     @focus=${() => { active.set(true); activeThumb.set('start'); }}
+                     @blur=${() => active.set(false)}>
+              <input part="input" type="range"
+                     min=${min} max=${max} step=${step} .value=${valueEnd}
+                     ?disabled=${disabled}
+                     aria-label=${() => (label() ? label() + ' end' : 'End')}
+                     @input=${onEndInput} @change=${onEndChange}
+                     @pointerdown=${() => { active.set(true); activeThumb.set('end'); }}
+                     @focus=${() => { active.set(true); activeThumb.set('end'); }}
+                     @blur=${() => active.set(false)}>
+            </div>`
+          : html`<input part="input" type="range"
+                     min=${min} max=${max} step=${step} .value=${value}
+                     ?disabled=${disabled}
+                     aria-label=${() => label() || 'Slider'}
+                     @input=${onInput} @change=${onChange}
+                     @pointerdown=${() => active.set(true)}
+                     @focus=${() => active.set(true)}
+                     @blur=${() => active.set(false)}>`)}
+        ${presence(() => showValue() && active(), () => html`
+            <output class="bubble" style=${() => ({ insetInlineStart: bubblePct() + '%' })}
+                    aria-hidden="true">${bubbleText}</output>`, {
+          enter: fx.scaleIn,
+          exit: fx.scaleOut,
+          enterDuration: 'short4',
+          exitDuration: 'short2',
+        })}
+      </div>`;
+  },
+});
+
+export const tag = 'ui-slider';
+export const themeVars = t;