@alacris/ui 0.0.0 → 0.1.0

package/src/components/ui-tabs.js

@@ -0,0 +1,178 @@
+// <ui-tabs> — Material tabs: a tab bar with an animated active indicator.
+//
+//   <ui-tabs value="one" label="Demo tabs" @change=${(e) => ...}>
+//     <ui-tab value="one" icon="home">One</ui-tab>
+//     <ui-tab value="two">Two</ui-tab>
+//     <ui-tab-panel slot="panels" value="one">…</ui-tab-panel>
+//     <ui-tab-panel slot="panels" value="two">…</ui-tab-panel>
+//   </ui-tabs>
+//
+// Tabs go in the default slot, panels in the "panels" slot. The parent
+// reflects `selected` onto each <ui-tab> and `active` onto each
+// <ui-tab-panel>, and wires aria-controls/aria-labelledby ids between them.
+// Activation is AUTOMATIC per the ARIA APG: arrow keys move focus AND select
+// (one Tab stop for the whole bar via roving tabindex).
+//
+// @prop  {string} value='' — the selected tab's value
+// @prop  {string} variant='primary' — primary | secondary
+// @prop  {string} label='' — accessible name for the tablist
+// @event change — user selected a tab; detail: { value }
+// @slot  (default) — <ui-tab> children
+// @slot  panels    — <ui-tab-panel> children
+// @part  tablist, indicator
+// @vars  see `t` below (`themeVars.names`)
+
+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-tab.js';
+import './ui-tab-panel.js';
+
+const t = vars('ui-tabs', {
+  indicator: sys.color.primary,
+  indicatorHeight: '3px',
+  divider: sys.color.outlineVariant,
+});
+
+const styles = css`
+  :host { display: block; position: relative; }
+  .tablist {
+    position: relative;
+    display: flex;
+    align-items: stretch;
+    border-block-end: 1px solid ${t.divider};
+  }
+  .indicator {
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    block-size: ${t.indicatorHeight};
+    background: ${t.indicator};
+    border-start-start-radius: ${t.indicatorHeight};
+    border-start-end-radius: ${t.indicatorHeight};
+    pointer-events: none;
+    transition: transform ${sys.duration.medium2} ${sys.easing.emphasized},
+                width ${sys.duration.medium2} ${sys.easing.emphasized},
+                opacity ${sys.duration.short2} ${sys.easing.standard};
+  }
+  .secondary .indicator {
+    block-size: 2px;
+    border-radius: 0;
+    background: ${sys.color.onSurface};
+  }
+`;
+
+let uid = 0;
+
+define('ui-tabs', {
+  props: { value: '', variant: 'primary', label: '' },
+  styles: [base, styles],
+  setup({ value, variant, label }, host) {
+    const id = ++uid;
+    const rev = signal(0); // bumped on slotchange so syncs re-run
+    const bump = () => rev.update((n) => n + 1);
+
+    const tabsOf = () => [...host.querySelectorAll('ui-tab')];
+    const panelsOf = () => [...host.querySelectorAll('ui-tab-panel')];
+
+    const select = (v) => {
+      if (v === undefined || v === value.peek()) return;
+      value.set(v);
+      host.emit('change', { value: v });
+    };
+
+    // Selection made by a tab (click / Enter / Space).
+    host.addEventListener('ui-tab-select', (e) => {
+      e.stopPropagation();
+      select(e.detail.value);
+    });
+
+    // Automatic activation: arrows move focus and select.
+    const roving = rovingTabindex(host, {
+      selector: 'ui-tab',
+      orientation: 'horizontal',
+      skip: (el) => el.disabled,
+      onMove: (el) => select(el.value),
+    });
+    onCleanup(() => roving.destroy());
+
+    // Reflect selection down and keep the ARIA wiring current.
+    effect(() => {
+      const v = value();
+      rev();
+      const tabs = tabsOf();
+      const panels = panelsOf();
+      let hasStop = false;
+      for (const tab of tabs) {
+        const on = tab.value === v;
+        tab.selected = on;
+        tab.tabIndex = on && !tab.disabled ? 0 : -1;
+        if (on && !tab.disabled) hasStop = true;
+        if (!tab.id) tab.id = `ui-tab-${id}-${tab.value}`;
+      }
+      if (!hasStop) {
+        const first = tabs.find((el) => !el.disabled);
+        if (first) first.tabIndex = 0;
+      }
+      for (const panel of panels) {
+        panel.active = panel.value === v;
+        if (!panel.id) panel.id = `ui-tab-panel-${id}-${panel.value}`;
+        const tab = tabs.find((el) => el.value === panel.value);
+        if (tab) {
+          tab.setAttribute('aria-controls', panel.id);
+          panel.setAttribute('aria-labelledby', tab.id);
+        }
+      }
+    });
+
+    // Animated indicator: measure the selected tab in the host's coordinate
+    // space. Zero sizes (simulated DOM, display:none) hide the bar instead of
+    // animating to garbage.
+    const ix = signal(0);
+    const iw = signal(0);
+    let tablistEl = null;
+    const measure = () => {
+      const tab = tabsOf().find((el) => el.selected);
+      if (!tab || !tablistEl) { iw.set(0); return; }
+      if (variant.peek() === 'primary') {
+        const inner = tab.shadowRoot?.querySelector('.inner');
+        const listRect = tablistEl.getBoundingClientRect();
+        const r = (inner || tab).getBoundingClientRect();
+        if (!r.width) { iw.set(0); return; }
+        ix.set(r.left - listRect.left);
+        iw.set(r.width);
+      } else {
+        const w = tab.offsetWidth || 0;
+        if (!w) { iw.set(0); return; }
+        ix.set(tab.offsetLeft || 0);
+        iw.set(w);
+      }
+    };
+    effect(() => {
+      value();
+      rev();
+      queueMicrotask(measure);
+    });
+    effect(() => {
+      window.addEventListener('resize', measure, { passive: true });
+      return () => window.removeEventListener('resize', measure);
+    });
+
+    return html`
+      <div class=${() => `tablist ${variant()}`} part="tablist" role="tablist" aria-label=${() => label() || null}
+           ref=${(el) => (tablistEl = el)}>
+        <slot @slotchange=${bump}></slot>
+        <span class="indicator" part="indicator" aria-hidden="true"
+              style=${() => ({
+                transform: `translateX(${ix()}px)`,
+                width: `${iw()}px`,
+                opacity: iw() ? '1' : '0',
+              })}></span>
+      </div>
+      <slot name="panels" @slotchange=${bump}></slot>`;
+  },
+});
+
+export const tag = 'ui-tabs';
+export const themeVars = t;

package/src/components/ui-text-field.js

@@ -0,0 +1,319 @@
+// <ui-text-field> — Material text field, filled and outlined, floating label.
+//
+// @prop  {string}  variant='filled' — filled | outlined
+// @prop  {string}  label=''
+// @prop  {string}  value=''
+// @prop  {string}  type='text'      — any native input type; 'textarea' renders one
+// @prop  {string}  placeholder=''
+// @prop  {string}  helper=''        — supporting text under the field
+// @prop  {string}  error=''         — error message; non-empty switches to error state
+// @prop  {boolean} disabled=false
+// @prop  {boolean} required=false
+// @prop  {boolean} clearable=false  — trailing ✕ while there is content
+// @prop  {string}  name=''          — form participation
+// @prop  {number}  maxlength=0      — >0 shows a character counter and enforces it
+// @prop  {number}  rows=3           — textarea rows
+// @event input  — every keystroke;   detail: { value }
+// @event change — committed (blur/Enter); detail: { value }
+// @event clear  — the clear affordance was used
+// @slot  leading  — icon before the input
+// @slot  trailing — icon after the input (replaced by ✕ while clearable+content)
+// @part  field, input, label, helper
+// @vars  see `t` below
+
+import { define, html, css, vars, computed, signal } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+import { formBind } from '../util/form.js';
+import './ui-icon-button.js';
+
+const t = vars('ui-text-field', {
+  bg: sys.color.surfaceContainerHighest,
+  fg: sys.color.onSurface,
+  labelFg: sys.color.onSurfaceVariant,
+  accent: sys.color.primary,
+  errorFg: sys.color.error,
+  outlineColor: sys.color.outline,
+  radius: sys.radius.xs,
+  font: sys.type.bodyLg,
+  height: '56px',
+});
+
+const styles = css`
+  :host { display: block; inline-size: 240px; }
+  .root { display: block; }
+  .field {
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: ${sys.space(2)};
+    min-block-size: calc(${t.height} + var(--ui-density, 0) * 4px);
+    padding-inline: ${sys.space(4)};
+    border-radius: ${t.radius};
+    font: ${t.font};
+    color: ${t.fg};
+    cursor: text;
+    --ui-icon-size: 1.5rem;
+  }
+  /* Resize lives on .grow, not the textarea, so padding on the text
+     does not inset the native grip from the field's corner. */
+  .multiline .field {
+    padding-inline: 0;
+    align-items: stretch;
+  }
+  .grow {
+    flex: 1;
+    min-inline-size: 0;
+    display: flex;
+    align-self: stretch;
+  }
+  .multiline .grow {
+    resize: vertical;
+    overflow: hidden;
+    min-block-size: calc(${t.height} + var(--ui-density, 0) * 4px);
+  }
+  .disabled .grow { resize: none; }
+  .filled .field {
+    background: ${t.bg};
+    border-start-start-radius: ${t.radius};
+    border-start-end-radius: ${t.radius};
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
+  }
+  .filled .field::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    block-size: 1px;
+    background: ${sys.color.onSurfaceVariant};
+    transition: block-size ${sys.duration.short2} ${sys.easing.standard},
+                background-color ${sys.duration.short2} ${sys.easing.standard};
+  }
+  .filled.focused .field::after { block-size: 2px; background: ${t.accent}; }
+  .filled.error .field::after { background: ${t.errorFg}; }
+  /* Opaque band so scrolled lines do not paint over the floating label. */
+  .filled.multiline.floating.has-label .field::before {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    inset-block-start: 0;
+    block-size: 24px;
+    background: ${t.bg};
+    pointer-events: none;
+    z-index: 1;
+    border-start-start-radius: inherit;
+    border-start-end-radius: inherit;
+  }
+
+  /* Outlined: a fieldset draws the border; its legend opens the label notch. */
+  fieldset {
+    position: absolute;
+    inset: -6px 0 0;
+    margin: 0;
+    padding: 0 calc(${sys.space(3)} - 2px);
+    min-inline-size: 0;
+    box-sizing: border-box;
+    appearance: none;
+    border: 1px solid ${t.outlineColor};
+    border-radius: ${t.radius};
+    pointer-events: none;
+    transition: border-color ${sys.duration.short2} ${sys.easing.standard},
+                border-width ${sys.duration.short2} ${sys.easing.standard};
+  }
+  legend {
+    float: unset;
+    display: block;
+    width: max-content;
+    padding: 0;
+    margin: 0;
+    margin-inline-start: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    font: ${t.font};
+    font-size: 0.75em;
+    letter-spacing: calc(${sys.tracking.bodyLg} * 0.75);
+    visibility: hidden;
+    max-inline-size: 0.01px;
+    height: 12px;
+    line-height: 12px;
+    transition: max-inline-size ${sys.duration.short2} ${sys.easing.standard};
+  }
+  legend span {
+    padding-inline: ${sys.space(1)} calc(${sys.space(1)} - 3px);
+    display: inline-block;
+    opacity: 0;
+    visibility: visible;
+  }
+  .outlined.floating legend {
+    max-inline-size: 100%;
+    transition: max-inline-size ${sys.duration.short3} ${sys.easing.standard};
+  }
+  .outlined.focused fieldset { border-width: 2px; border-color: ${t.accent}; }
+  .outlined.error fieldset { border-color: ${t.errorFg}; }
+  .root:hover:not(.focused):not(.error) fieldset { border-color: ${sys.color.onSurface}; }
+  .filled .filled-hover {
+    position: absolute; inset: 0; pointer-events: none;
+    background: ${sys.color.onSurface};
+    opacity: 0;
+    border-radius: inherit;
+    transition: opacity ${sys.duration.short2} ${sys.easing.standard};
+  }
+  .filled:hover:not(.focused):not(.error):not(.disabled) .filled-hover {
+    opacity: ${sys.state.hover};
+  }
+  .filled:hover:not(.focused):not(.error):not(.disabled) .field::after {
+    background: ${sys.color.onSurface};
+  }
+
+  .label {
+    position: absolute;
+    inset-inline-start: ${sys.space(4)};
+    inset-block-start: 50%;
+    translate: 0 -50%;
+    color: ${t.labelFg};
+    pointer-events: none;
+    transform-origin: 0 50%;
+    transition: translate ${sys.duration.short3} ${sys.easing.standard},
+                scale ${sys.duration.short3} ${sys.easing.standard},
+                color ${sys.duration.short2} ${sys.easing.standard};
+  }
+  .with-leading .label { inset-inline-start: calc(${sys.space(4)} + 1.5rem + ${sys.space(2)}); }
+  /* Multi-line fields anchor the label to the top, not the vertical center. */
+  .multiline .label { inset-block-start: 24px; z-index: 2; }
+  .filled.floating .label { translate: 0 calc(-50% - 16px); scale: 0.75; }
+  .filled.multiline.floating .label { translate: 0 -85%; scale: 0.75; }
+  .outlined.multiline.floating .label { inset-block-start: 8px; }
+  .outlined.floating .label {
+    inset-inline-start: ${sys.space(4)};
+    translate: 0 calc(-50% - (${t.height} + var(--ui-density, 0) * 4px) / 2);
+    scale: 0.75;
+  }
+  .focused .label { color: ${t.accent}; }
+  .error .label { color: ${t.errorFg}; }
+
+  input, textarea {
+    flex: 1;
+    min-inline-size: 0;
+    margin: 0;
+    border: none;
+    outline: none;
+    appearance: none;
+    background: transparent;
+    font: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    padding: 0;
+  }
+  .filled.has-label input { padding-block-start: 18px; }
+  textarea {
+    display: block;
+    flex: 1;
+    inline-size: 100%;
+    min-block-size: 0;
+    resize: none;
+    padding: ${sys.space(4)};
+  }
+  .filled.has-label textarea { padding-top: ${sys.space(7)}; }
+  .with-leading.multiline .field { padding-inline-start: ${sys.space(4)}; }
+  .with-leading.multiline textarea { padding-inline-start: 0; }
+  input::placeholder, textarea::placeholder { color: ${t.labelFg}; opacity: 0; transition: opacity ${sys.duration.short2} linear; }
+  .floating input::placeholder, .floating textarea::placeholder { opacity: 1; }
+
+  .below {
+    display: flex;
+    justify-content: space-between;
+    gap: ${sys.space(4)};
+    padding-inline: ${sys.space(4)};
+    padding-block-start: ${sys.space(1)};
+    font: ${sys.type.bodySm};
+    letter-spacing: ${sys.tracking.bodySm};
+    color: ${t.labelFg};
+  }
+  .error .below .msg { color: ${t.errorFg}; }
+  .disabled { opacity: ${sys.state.disabledContent}; pointer-events: none; }
+  ::slotted([slot]) { color: ${t.labelFg}; }
+`;
+
+define('ui-text-field', {
+  formAssociated: true,
+  props: {
+    variant: 'filled', label: '', value: '', type: 'text', placeholder: '',
+    helper: '', error: '', disabled: false, required: false, clearable: false,
+    name: '', maxlength: 0, rows: 3,
+  },
+  styles: [base, styles],
+  setup(p, host) {
+    const { variant, label, value, type, placeholder, helper, error, disabled, required, clearable, name, maxlength, rows } = p;
+    formBind(host, { name, value, disabled });
+
+    const focused = signal(false);
+    const hasLeading = signal(false);
+    let input;
+
+    const floating = computed(() => focused() || value() !== '' || placeholder() !== '');
+    const cls = computed(() =>
+      ['root', variant(), floating() && 'floating', focused() && 'focused',
+       error() && 'error', disabled() && 'disabled', label() && 'has-label',
+       hasLeading() && 'with-leading', type() === 'textarea' && 'multiline'].filter(Boolean).join(' '));
+
+    const onInput = (e) => {
+      value.set(e.target.value);
+      host.emit('input', { value: value() });
+    };
+    const commit = () => host.emit('change', { value: value() });
+    const clear = () => {
+      value.set('');
+      host.emit('clear');
+      host.emit('input', { value: '' });
+      input?.focus();
+    };
+
+    const describe = computed(() => error() || helper() || null);
+    const counter = computed(() => (maxlength() > 0 ? `${value().length} / ${maxlength()}` : null));
+
+    const fieldBody = html`
+      <slot name="leading" ref=${(el) => el.addEventListener('slotchange', () => hasLeading.set(el.assignedElements().length > 0))}></slot>
+      ${() => (type() === 'textarea'
+        ? html`<span class="grow"><textarea part="input" ref=${(el) => (input = el)}
+              .value=${value} rows=${rows}
+              placeholder=${() => placeholder() || null}
+              maxlength=${() => (maxlength() > 0 ? maxlength() : null)}
+              ?required=${required} ?disabled=${disabled}
+              aria-invalid=${() => (error() ? 'true' : null)}
+              @input=${onInput} @change=${commit}
+              @focus=${() => focused.set(true)} @blur=${() => focused.set(false)}></textarea></span>`
+        : html`<input part="input" ref=${(el) => (input = el)}
+              type=${type} .value=${value}
+              placeholder=${() => placeholder() || null}
+              maxlength=${() => (maxlength() > 0 ? maxlength() : null)}
+              ?required=${required} ?disabled=${disabled}
+              aria-invalid=${() => (error() ? 'true' : null)}
+              @input=${onInput} @change=${commit}
+              @focus=${() => focused.set(true)} @blur=${() => focused.set(false)}>`)}
+      ${() => (clearable() && value() !== '' && !disabled()
+        ? html`<ui-icon-button icon="close" label="Clear" @click=${clear}></ui-icon-button>`
+        : html`<slot name="trailing"></slot>`)}`;
+
+    return html`
+      <label class=${cls}>
+        <span class="field" part="field">
+          ${() => (variant() === 'filled' ? html`<span class="filled-hover" aria-hidden="true"></span>` : null)}
+          ${() => (variant() === 'outlined'
+            ? html`<fieldset aria-hidden="true"><legend><span>${label}${() => (required() ? ' *' : '')}</span></legend></fieldset>`
+            : null)}
+          ${() => (label() ? html`<span class="label" part="label">${label}${() => (required() ? ' *' : '')}</span>` : null)}
+          ${fieldBody}
+        </span>
+        ${() => (describe() || counter()
+          ? html`<span class="below" part="helper">
+              <span class="msg" role=${() => (error() ? 'alert' : null)}>${describe}</span>
+              ${() => counter() && html`<span class="count">${counter}</span>`}
+            </span>`
+          : null)}
+      </label>`;
+  },
+});
+
+export const tag = 'ui-text-field';
+export const themeVars = t;

package/src/components/ui-text.js

@@ -0,0 +1,36 @@
+// <ui-text> — typography, the type scale as an element.
+//
+//   <ui-text variant="headline-md" as="h2">Section</ui-text>
+//
+// @prop  {string} variant='body-md' — any type role: display|headline|title|body|label × lg|md|sm
+// @prop  {string} color=''          — a color role name ('primary', 'onSurfaceVariant', …)
+// @slot  (default)
+// @vars  (uses the --ui-type-* system tokens directly)
+//
+// Semantics: <ui-text> is styling only. Keep real headings in your markup
+// (`<h2><ui-text variant="headline-md">…</ui-text></h2>`) or set an ARIA role
+// on the host when the document outline needs one.
+
+import { define, html, css, effect } from '@alacris/core';
+import { base } from './base.js';
+
+const kebab = (s) => s.replace(/[A-Z]/g, (c) => '-' + c.toLowerCase());
+
+define('ui-text', {
+  props: { variant: 'body-md', color: '' },
+  styles: [base, css`:host { display: block; margin: 0; }`],
+  setup({ variant, color }, host) {
+    effect(() => {
+      const v = kebab(variant());
+      host.style.font = `var(--ui-type-${v})`;
+      host.style.letterSpacing = `var(--ui-type-${v}-tracking)`;
+    });
+    effect(() => {
+      if (color()) host.style.color = `var(--ui-color-${kebab(color())})`;
+      else host.style.removeProperty('color');
+    });
+    return html`<slot></slot>`;
+  },
+});
+
+export const tag = 'ui-text';