@alacris/ui 0.0.0 → 0.1.1

package/src/components/ui-stepper.js

@@ -0,0 +1,86 @@
+// <ui-stepper> — a horizontal stepper of <ui-step> children.
+//
+//   <ui-stepper active=${active}>
+//     <ui-step label="Cart"></ui-step>
+//     <ui-step label="Shipping" optional-text="Optional"></ui-step>
+//     <ui-step label="Payment"></ui-step>
+//   </ui-stepper>
+//
+// @prop  {number} active=0 — index of the active step; steps before it become
+//                            `completed`, steps after it `upcoming`
+// @slot  (default) — <ui-step> children
+// @part  row — the flex row wrapping the slot
+// @vars  see `t` below (`themeVars.names`)
+//
+// Presentation only — it emits nothing; wiring next/back navigation to
+// `active` is application logic. On slotchange (and every `active` write) it
+// assigns each child's `index`, `state`, a `data-state` attribute (used by the
+// connector CSS), `role="listitem"`, and `aria-current="step"` on the active
+// step. Connector lines between steps turn primary once the segment before a
+// step is completed.
+
+import { define, html, css, vars, effect } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+import './ui-step.js';
+
+const t = vars('ui-stepper', {
+  connector: sys.color.outlineVariant,
+  connectorActive: sys.color.primary,
+});
+
+const styles = css`
+  :host { display: block; }
+  .row {
+    display: flex;
+    align-items: flex-start;
+  }
+  ::slotted(ui-step) {
+    flex: 1;
+    min-inline-size: 0;
+    position: relative;
+  }
+  ::slotted(ui-step:not(:first-child))::before {
+    content: "";
+    position: absolute;
+    inset-block-start: 12px;
+    inset-inline-start: calc(-50% + 20px);
+    inset-inline-end: calc(50% + 20px);
+    block-size: 1px;
+    background: ${t.connector};
+    transition: background-color ${sys.duration.short4} ${sys.easing.standard};
+  }
+  ::slotted(ui-step[data-state="completed"]:not(:first-child))::before,
+  ::slotted(ui-step[data-state="active"]:not(:first-child))::before {
+    background: ${t.connectorActive};
+  }
+`;
+
+define('ui-stepper', {
+  props: { active: 0 },
+  styles: [base, styles],
+  setup({ active }, host) {
+    const sync = () => {
+      const a = active();
+      const steps = host.querySelectorAll('ui-step');
+      let i = 0;
+      for (const el of steps) {
+        const s = i < a ? 'completed' : i === a ? 'active' : 'upcoming';
+        el.index = i;
+        el.state = s;
+        el.setAttribute('data-state', s);
+        el.setAttribute('role', 'listitem');
+        if (s === 'active') el.setAttribute('aria-current', 'step');
+        else el.removeAttribute('aria-current');
+        i++;
+      }
+    };
+
+    effect(sync); // re-runs on every `active` write
+
+    return html`<div class="row" part="row" role="list"><slot @slotchange=${sync}></slot></div>`;
+  },
+});
+
+export const tag = 'ui-stepper';
+export const themeVars = t;

package/src/components/ui-surface.js

@@ -0,0 +1,51 @@
+// <ui-surface> — a themable surface (the Paper equivalent).
+//
+//   <ui-surface elevation="2" radius="lg" bg="surface-container">…</ui-surface>
+//
+// @prop  {number}  elevation=0 — shadow level 0..5 (--ui-elevation-N)
+// @prop  {string}  radius='md' — none | xs | sm | md | lg | xl | full
+// @prop  {string}  bg='surface' — any color role name, kebab or camel
+//                                 ('primary-container', 'surfaceContainerHigh');
+//                                 text color pairs automatically with the
+//                                 role's on- counterpart when one exists,
+//                                 falling back to on-surface
+// @prop  {boolean} outlined=false — 1px outline-variant border
+// @slot  (default)
+// @vars  (none — every value resolves through the system tokens)
+
+import { define, html, css, effect } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+
+const camel = (s) => s.replace(/-([a-z0-9])/g, (_, c) => c.toUpperCase());
+
+define('ui-surface', {
+  props: { elevation: 0, radius: 'md', bg: 'surface', outlined: false },
+  styles: [base, css`
+    :host {
+      display: block;
+      transition: box-shadow ${sys.duration.short4} ${sys.easing.standard};
+    }
+  `],
+  setup({ elevation, radius, bg, outlined }, host) {
+    effect(() => {
+      const role = camel(bg());
+      host.style.background = sys.color[role] || sys.color.surface;
+      const on = sys.color['on' + role[0].toUpperCase() + role.slice(1)];
+      host.style.color = on || sys.color.onSurface;
+    });
+    effect(() => {
+      const lvl = Math.max(0, Math.min(5, Math.round(Number(elevation()) || 0)));
+      host.style.boxShadow = sys.elevation[lvl];
+    });
+    effect(() => {
+      host.style.borderRadius = sys.radius[radius()] || sys.radius.md;
+    });
+    effect(() => {
+      host.style.border = outlined() ? `1px solid ${sys.color.outlineVariant}` : '';
+    });
+    return html`<slot></slot>`;
+  },
+});
+
+export const tag = 'ui-surface';

package/src/components/ui-switch.js

@@ -0,0 +1,153 @@
+// <ui-switch> — the Material switch.
+//
+// @prop  {boolean} checked=false
+// @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 'on'/value while checked)
+// @prop  {string}  value='on'
+// @prop  {boolean} icons=false — show check/close glyphs in the handle
+// @event change — detail: { checked }
+// @part  control — the switch track (role="switch")
+// @part  handle
+// @vars  see `t` below
+
+import { define, html, css, vars } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base, focusRingOn } from './base.js';
+import { formBind } from '../util/form.js';
+import './ui-icon.js';
+
+const t = vars('ui-switch', {
+  trackWidth: '52px',
+  trackHeight: '32px',
+  trackBg: sys.color.surfaceContainerHighest,
+  trackBgChecked: sys.color.primary,
+  trackOutline: sys.color.outline,
+  handleBg: sys.color.outline,
+  handleBgChecked: sys.color.onPrimary,
+  iconFg: sys.color.surfaceContainerHighest,
+  iconFgChecked: sys.color.onPrimaryContainer,
+});
+
+const styles = css`
+  :host { display: inline-flex; }
+  label {
+    display: inline-flex;
+    align-items: center;
+    gap: ${sys.space(3)};
+    cursor: pointer;
+    font: ${sys.type.bodyMd};
+    letter-spacing: ${sys.tracking.bodyMd};
+    color: ${sys.color.onSurface};
+    user-select: none;
+  }
+  .control {
+    position: relative;
+    flex: none;
+    inline-size: ${t.trackWidth};
+    block-size: ${t.trackHeight};
+    border: 2px solid ${t.trackOutline};
+    border-radius: ${sys.radius.full};
+    background: ${t.trackBg};
+    cursor: pointer;
+    padding: 0;
+    overflow: visible;
+    transition: background-color ${sys.duration.short4} ${sys.easing.standard},
+                border-color ${sys.duration.short4} ${sys.easing.standard};
+  }
+  ${focusRingOn('.control')}
+  .control[aria-checked="true"] {
+    background: ${t.trackBgChecked};
+    border-color: ${t.trackBgChecked};
+  }
+  .handle {
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 6px;
+    translate: 0 -50%;
+    inline-size: 16px;
+    block-size: 16px;
+    border-radius: ${sys.radius.full};
+    background: ${t.handleBg};
+    display: grid;
+    place-items: center;
+    color: ${t.iconFg};
+    --ui-icon-size: 12px;
+    transition: translate ${sys.duration.medium2} ${sys.easing.emphasizedOvershoot},
+                inline-size ${sys.duration.medium1} ${sys.easing.standard},
+                block-size ${sys.duration.medium1} ${sys.easing.standard},
+                background-color ${sys.duration.short2} ${sys.easing.standard};
+  }
+  .handle::after {
+    content: '';
+    position: absolute;
+    inset: 50%;
+    width: 40px;
+    height: 40px;
+    margin: -20px;
+    border-radius: 50%;
+    background: currentColor;
+    opacity: 0;
+    pointer-events: none;
+    z-index: -1;
+    transition: opacity ${sys.duration.short2} ${sys.easing.standard};
+  }
+  .control:hover .handle::after { opacity: ${sys.state.hover}; }
+  .control:focus-visible .handle::after { opacity: ${sys.state.focus}; }
+  .control:active .handle::after { opacity: ${sys.state.pressed}; }
+  .control:hover:not([aria-checked="true"]) .handle { background: ${sys.color.onSurface}; }
+  .control[aria-checked="true"]:hover .handle { background: ${sys.color.primaryContainer}; }
+  .control[aria-checked="true"] .handle {
+    translate: 16px -50%;
+    inline-size: 24px;
+    block-size: 24px;
+    background: ${t.handleBgChecked};
+    color: ${t.iconFgChecked};
+    --ui-icon-size: 16px;
+  }
+  .control:active:not([aria-checked="true"]) .handle {
+    inline-size: 28px;
+    block-size: 28px;
+    translate: -2px -50%;
+  }
+  .control:active[aria-checked="true"] .handle {
+    inline-size: 28px;
+    block-size: 28px;
+    translate: 14px -50%;
+  }
+  .control:disabled { cursor: default; pointer-events: none; opacity: ${sys.state.disabledContent}; }
+  :host([disabled]) label { cursor: default; pointer-events: none; }
+`;
+
+define('ui-switch', {
+  formAssociated: true,
+  props: { checked: false, disabled: false, label: '', name: '', value: 'on', icons: false },
+  styles: [base, styles],
+  setup({ checked, disabled, label, name, value, icons }, host) {
+    formBind(host, { name, value, checked, disabled });
+
+    const toggle = () => {
+      if (disabled()) return;
+      checked.set(!checked());
+      host.emit('change', { checked: checked() });
+    };
+
+    return html`
+      <label>
+        <button part="control" class=${() => `control${icons() ? ' with-icons' : ''}`} type="button" role="switch"
+                aria-checked=${() => String(checked())}
+                aria-labelledby=${() => (label() ? 'label' : null)}
+                ?disabled=${disabled}
+                @click=${toggle}>
+          <span part="handle" class="handle" aria-hidden="true">
+            ${() => (icons() ? html`<ui-icon name=${() => (checked() ? 'check' : 'close')}></ui-icon>` : null)}
+          </span>
+        </button>
+        ${() => (label() ? html`<span id="label">${label}</span>` : null)}
+      </label>`;
+  },
+});
+
+export const tag = 'ui-switch';
+export const themeVars = t;

package/src/components/ui-tab-panel.js

@@ -0,0 +1,54 @@
+// <ui-tab-panel> — the content pane paired with a <ui-tab>.
+//
+// Slot it into <ui-tabs slot="panels">. The parent sets `active` when its
+// `value` matches; do not set `active` yourself. The panel is hidden while
+// inactive and fades in when it becomes active.
+//
+// @prop  {string}  value=''      — REQUIRED; matched against the tabs' value
+// @prop  {boolean} active=false  — managed by the parent <ui-tabs>
+// @slot  (default) — panel content
+// @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';
+import { animate, fx } from '../motion/animate.js';
+
+const t = vars('ui-tab-panel', {
+  fg: sys.color.onSurface,
+  font: sys.type.bodyMd,
+  padBlock: sys.space(4),
+});
+
+const styles = css`
+  :host { display: block; }
+  .body {
+    color: ${t.fg};
+    font: ${t.font};
+    padding-block: ${t.padBlock};
+  }
+`;
+
+define('ui-tab-panel', {
+  props: { value: '', active: false },
+  styles: [base, styles],
+  setup({ value, active }, host) {
+    host.setAttribute('role', 'tabpanel');
+    host.tabIndex = 0;
+    effect(() => {
+      if (active()) host.removeAttribute('hidden');
+      else host.setAttribute('hidden', '');
+    });
+
+    return html`${() =>
+      active()
+        ? html`<div class="body"
+                    ref=${(el) => animate(el, fx.fadeIn, { duration: 'short4', easing: 'standard' })}>
+            <slot></slot>
+          </div>`
+        : null}`;
+  },
+});
+
+export const tag = 'ui-tab-panel';
+export const themeVars = t;

package/src/components/ui-tab.js

@@ -0,0 +1,116 @@
+// <ui-tab> — one tab inside <ui-tabs>.
+//
+// The host element carries the `tab` semantics (role, aria-selected,
+// focusability) so <ui-tabs>' roving tabindex can manage it directly in the
+// light DOM. `selected` is written by the parent <ui-tabs>; do not set it
+// yourself — set the tabs' `value` instead.
+//
+// @prop  {string}  value=''       — REQUIRED; matched against the tabs' value
+// @prop  {string}  icon=''        — leading registry icon
+// @prop  {boolean} disabled=false
+// @prop  {boolean} selected=false — managed by the parent <ui-tabs>
+// @event ui-tab-select — internal; detail: { value } (consumed by <ui-tabs>)
+// @slot  (default) — label
+// @part  control — the styled tab 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-tab', {
+  height: '48px',
+  padInline: sys.space(4),
+  gap: sys.space(2),
+  font: sys.type.titleSm,
+  tracking: sys.tracking.titleSm,
+  fg: sys.color.onSurfaceVariant,
+  selectedFg: sys.color.primary,
+});
+
+const styles = css`
+  :host {
+    display: inline-flex;
+    outline: none;
+  }
+  :host([aria-disabled="true"]) { pointer-events: none; }
+  ${focusRingOn(':host')}
+  :host(:focus-visible) { outline-offset: -2px; }
+  .control {
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: ${t.gap};
+    inline-size: 100%;
+    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;
+    transition: color ${sys.duration.short4} ${sys.easing.standard};
+    --ui-icon-size: 1.5rem;
+  }
+  .inner {
+    display: inline-flex;
+    align-items: center;
+    gap: inherit;
+  }
+  .selected { color: ${t.selectedFg}; }
+  .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}; }
+  :host([aria-disabled="true"]) .control {
+    cursor: default;
+    color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+  }
+`;
+
+define('ui-tab', {
+  props: { value: '', icon: '', disabled: false, selected: false },
+  styles: [base, styles],
+  setup({ value, icon, disabled, selected }, host) {
+    host.setAttribute('role', 'tab');
+    effect(() => host.setAttribute('aria-selected', selected() ? 'true' : 'false'));
+    effect(() => {
+      if (disabled()) host.setAttribute('aria-disabled', 'true');
+      else host.removeAttribute('aria-disabled');
+    });
+
+    const select = () => {
+      if (disabled()) return;
+      host.emit('ui-tab-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${selected() ? ' selected' : ''}`}
+           ref=${(el) => ripple(el, { disabled })}>
+        <span class="layer" aria-hidden="true"></span>
+        <span class="inner">
+          ${() => (icon() ? html`<ui-icon name=${icon}></ui-icon>` : null)}
+          <slot></slot>
+        </span>
+      </div>`;
+  },
+});
+
+export const tag = 'ui-tab';
+export const themeVars = t;

package/src/components/ui-table-footer.js

@@ -0,0 +1,141 @@
+// <ui-table-footer> — pagination and row-count for <ui-table>.
+// Composes <ui-pagination> for the page window and a rows-per-page <select>.
+//
+//   <ui-table-footer page=${page} page-size="10" row-count=${n}
+//                    @page=${(e) => page(e.detail.page)}></ui-table-footer>
+//
+// @prop  {number}  page=1
+// @prop  {number}  pageSize=0       — 0 hides the pager and shows a total only
+// @prop  {number}  rowCount=0
+// @prop  {Array}   pageSizeOptions=[] — default 5, 10, 25
+// @prop  {boolean} disabled=false
+// @prop  {string}  label='Table pagination'
+// @event page — page or page-size changed; detail: { page, pageSize }
+// @part  footer, range
+// @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 './ui-pagination.js';
+import './ui-icon.js';
+
+const t = vars('ui-table-footer', {
+  height: '52px',
+  fg: sys.color.onSurfaceVariant,
+  borderColor: sys.color.outlineVariant,
+});
+
+const styles = css`
+  :host { display: block; }
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: ${sys.space(4)};
+    min-block-size: ${t.height};
+    padding-inline: ${sys.space(4)};
+    border-block-start: 1px solid ${t.borderColor};
+    color: ${t.fg};
+    font: ${sys.type.bodySm};
+    letter-spacing: ${sys.tracking.bodySm};
+  }
+  .page-size {
+    display: inline-flex;
+    align-items: center;
+    gap: ${sys.space(2)};
+  }
+  .select-wrap {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    --ui-icon-size: 1.25rem;
+  }
+  .page-size select {
+    appearance: none;
+    margin: 0;
+    padding: ${sys.space(1)} ${sys.space(6)} ${sys.space(1)} ${sys.space(2)};
+    border: none;
+    border-radius: ${sys.radius.xs};
+    background: ${sys.color.surfaceContainerHighest};
+    color: ${sys.color.onSurface};
+    font: ${sys.type.bodyMd};
+    letter-spacing: ${sys.tracking.bodyMd};
+    cursor: pointer;
+  }
+  .select-wrap ui-icon {
+    position: absolute;
+    inset-inline-end: ${sys.space(1)};
+    pointer-events: none;
+    color: ${sys.color.onSurfaceVariant};
+  }
+  ${focusRingOn('.page-size select')}
+  .range { font: ${sys.type.bodySm}; letter-spacing: ${sys.tracking.bodySm}; }
+  ui-pagination { flex: none; }
+`;
+
+define('ui-table-footer', {
+  props: {
+    page: 1,
+    pageSize: 0,
+    rowCount: 0,
+    pageSizeOptions: [],
+    disabled: false,
+    label: 'Table pagination',
+  },
+  styles: [base, styles],
+  setup({ page, pageSize, rowCount, pageSizeOptions, disabled, label }, host) {
+    const size = computed(() => Math.max(0, Math.floor(pageSize()) || 0));
+    const total = computed(() => Math.max(0, Math.floor(rowCount()) || 0));
+    const pages = computed(() => {
+      const s = size();
+      if (!s) return 1;
+      return Math.max(1, Math.ceil(total() / s));
+    });
+    const current = computed(() =>
+      Math.min(Math.max(1, Math.floor(page()) || 1), pages()));
+    const choices = computed(() => {
+      const o = pageSizeOptions();
+      return o && o.length ? o : [5, 10, 25];
+    });
+    const rangeText = computed(() => {
+      const n = total();
+      const s = size();
+      if (!s) return `Total rows: ${n}`;
+      if (!n) return '0 of 0';
+      const start = (current() - 1) * s + 1;
+      const end = Math.min(current() * s, n);
+      return `${start}–${end} of ${n}`;
+    });
+
+    const emitPage = (nextPage, nextSize = size()) => {
+      host.emit('page', { page: nextPage, pageSize: nextSize });
+    };
+
+    return html`
+      <div class="footer" part="footer">
+        ${() => (size() ? html`
+          <label class="page-size">
+            Rows per page
+            <span class="select-wrap">
+              <select aria-label="Rows per page" ?disabled=${disabled}
+                      .value=${() => String(size())}
+                      @change=${(e) => emitPage(1, +e.target.value)}>
+                ${() => choices().map((n) => html`<option value=${n}>${n}</option>`)}
+              </select>
+              <ui-icon name="arrow-drop-down"></ui-icon>
+            </span>
+          </label>` : null)}
+        <span class="range" part="range">${rangeText}</span>
+        ${() => (size() ? html`
+          <ui-pagination page=${current} count=${pages} disabled=${disabled}
+                         label=${label}
+                         @change=${(e) => { e.stopPropagation(); emitPage(e.detail.page); }}>
+          </ui-pagination>` : null)}
+      </div>`;
+  },
+});
+
+export const tag = 'ui-table-footer';
+export const themeVars = t;