@alacris/ui 0.0.0 → 0.1.0

package/src/components/ui-app-bar.js

@@ -0,0 +1,119 @@
+// <ui-app-bar> — the Material top app bar.
+//
+//   <ui-app-bar variant="small" scroll-elevate>
+//     <ui-icon-button slot="navigation" icon="menu" label="Menu"></ui-icon-button>
+//     Page title
+//     <ui-icon-button slot="actions" icon="search" label="Search"></ui-icon-button>
+//   </ui-app-bar>
+//
+// The host is position:sticky at the top. `elevated` forces the on-scroll
+// container tint + shadow; `scrollElevate` listens to window scroll and
+// applies it automatically once the page is scrolled (listener removed when
+// the prop turns off or the element leaves the document).
+//
+// @prop  {string}  variant='small' — small | center | medium | large
+// @prop  {boolean} elevated=false  — force the scrolled container/elevation
+// @prop  {boolean} scrollElevate=false — auto-elevate once window is scrolled
+// @slot  navigation — leading icon button
+// @slot  (default)  — title text
+// @slot  actions    — trailing icon buttons
+// @part  bar — the header surface
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars, signal, effect, computed } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+
+const t = vars('ui-app-bar', {
+  bg: sys.color.surface,
+  scrolledBg: sys.color.surfaceContainer,
+  fg: sys.color.onSurface,
+  heightSmall: '64px',
+  heightMedium: '112px',
+  heightLarge: '152px',
+  font: sys.type.titleLg,
+  tracking: sys.tracking.titleLg,
+});
+
+const styles = css`
+  :host {
+    display: block;
+    position: sticky;
+    inset-block-start: 0;
+    z-index: ${sys.z.appBar};
+  }
+  .bar {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    column-gap: ${sys.space(1)};
+    padding-inline: ${sys.space(1)};
+    block-size: ${t.heightSmall};
+    background: ${t.bg};
+    color: ${t.fg};
+    box-shadow: none;
+    transition: background-color ${sys.duration.short4} ${sys.easing.standard},
+                box-shadow ${sys.duration.short4} ${sys.easing.standard};
+  }
+  .raised { background: ${t.scrolledBg}; box-shadow: ${sys.elevation[2]}; }
+  .title {
+    font: ${t.font};
+    letter-spacing: ${t.tracking};
+    padding-inline: ${sys.space(1)};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .center .title { text-align: center; }
+  .nav, .actions { display: inline-flex; align-items: center; gap: ${sys.space(1)}; }
+  .medium, .large {
+    grid-template-rows: ${t.heightSmall} 1fr;
+    grid-template-areas: 'nav . actions' 'title title title';
+    align-items: start;
+  }
+  .medium { block-size: ${t.heightMedium}; }
+  .large { block-size: ${t.heightLarge}; }
+  .medium .nav, .large .nav { grid-area: nav; align-self: center; }
+  .medium .actions, .large .actions { grid-area: actions; align-self: center; }
+  .medium .title, .large .title {
+    grid-area: title;
+    align-self: end;
+    padding-block-end: ${sys.space(4)};
+    padding-inline: ${sys.space(3)};
+  }
+  .medium .title { font: ${sys.type.headlineSm}; letter-spacing: ${sys.tracking.headlineSm}; }
+  .large .title { font: ${sys.type.headlineMd}; letter-spacing: ${sys.tracking.headlineMd}; }
+`;
+
+define('ui-app-bar', {
+  props: { variant: 'small', elevated: false, scrollElevate: false },
+  styles: [base, styles],
+  setup({ variant, elevated, scrollElevate }, host) {
+    const scrolled = signal(false);
+
+    effect(() => {
+      if (!scrollElevate()) {
+        scrolled.set(false);
+        return;
+      }
+      const onScroll = () => scrolled.set((window.scrollY || 0) > 0);
+      onScroll();
+      window.addEventListener('scroll', onScroll, { passive: true });
+      return () => window.removeEventListener('scroll', onScroll);
+    });
+
+    const cls = computed(
+      () => `bar ${variant()}${elevated() || scrolled() ? ' raised' : ''}`
+    );
+
+    return html`
+      <header class=${cls} part="bar">
+        <div class="nav"><slot name="navigation"></slot></div>
+        <div class="title"><slot></slot></div>
+        <div class="actions"><slot name="actions"></slot></div>
+      </header>`;
+  },
+});
+
+export const tag = 'ui-app-bar';
+export const themeVars = t;

package/src/components/ui-autocomplete.js

@@ -0,0 +1,371 @@
+// <ui-autocomplete> — a combobox with a filtering text input.
+//
+//   <ui-autocomplete label="Fruit" options=${['Apple', 'Banana']}
+//                    @change=${(e) => pick(e.detail.value)}></ui-autocomplete>
+//
+// Typing filters the options case-insensitively and opens a listbox panel
+// while there are matches. ArrowUp/Down move the active option, Enter commits
+// the active option (or, with `freeSolo`, the raw text), Escape closes, blur
+// commits an exact label match — or the raw text when `freeSolo` — and
+// otherwise reverts to the last committed value.
+//
+// @prop  {string}  label=''
+// @prop  {string}  value=''         — the committed value
+// @prop  {Array}   options=[]       — strings or { value, label } objects
+//                                     (JSON attribute or property)
+// @prop  {string}  variant='filled' — filled | outlined
+// @prop  {boolean} disabled=false
+// @prop  {boolean} required=false
+// @prop  {string}  name=''          — form participation
+// @prop  {string}  placeholder=''
+// @prop  {boolean} freeSolo=false   — allow values not present in options
+// @event input  — every keystroke; detail: { value } (the raw text)
+// @event change — committed; detail: { value }
+// @part  field, input, label, panel
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars, computed, signal, effect, onCleanup, each } 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';
+import { autoUpdate } from '../util/position.js';
+import './ui-icon.js';
+
+const t = vars('ui-autocomplete', {
+  bg: sys.color.surfaceContainerHighest,
+  fg: sys.color.onSurface,
+  labelFg: sys.color.onSurfaceVariant,
+  accent: sys.color.primary,
+  outlineColor: sys.color.outline,
+  radius: sys.radius.xs,
+  font: sys.type.bodyLg,
+  height: '56px',
+  panelBg: sys.color.surfaceContainer,
+});
+
+const styles = css`
+  :host { display: block; inline-size: 240px; }
+  .root { display: block; position: relative; }
+  .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};
+    letter-spacing: ${sys.tracking.bodyLg};
+    color: ${t.fg};
+    cursor: text;
+    --ui-icon-size: 1.5rem;
+  }
+  .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 .field::before {
+    content: '';
+    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(.disabled) .field::before {
+    opacity: ${sys.state.hover};
+  }
+  .filled:hover:not(.focused):not(.disabled) .field::after {
+    background: ${sys.color.onSurface};
+  }
+
+  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)} - 0.5px);
+    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}; }
+  .root:hover:not(.focused) fieldset { border-color: ${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};
+  }
+  .filled.floating .label { translate: 0 calc(-50% - 16px); scale: 0.75; }
+  .outlined.floating .label {
+    translate: 0 calc(-50% - (${t.height} + var(--ui-density, 0) * 4px) / 2);
+    scale: 0.75;
+  }
+  .focused .label { color: ${t.accent}; }
+
+  input {
+    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; }
+  input::placeholder { color: ${t.labelFg}; opacity: 0; transition: opacity ${sys.duration.short2} linear; }
+  .floating input::placeholder { opacity: 1; }
+
+  .arrow {
+    color: ${t.labelFg};
+    transition: rotate ${sys.duration.short3} ${sys.easing.standard};
+  }
+  .expanded .arrow { rotate: 180deg; }
+
+  .panel {
+    position: fixed;
+    z-index: ${sys.z.modal};
+    min-inline-size: 112px;
+    max-block-size: 40vh;
+    overflow: auto;
+    padding-block: ${sys.space(2)};
+    background: ${t.panelBg};
+    border-radius: ${sys.radius.xs};
+    box-shadow: ${sys.elevation[2]};
+    transform-origin: top center;
+  }
+  .opt {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    align-items: center;
+    min-block-size: calc(48px + var(--ui-density, 0) * 4px);
+    padding-inline: ${sys.space(4)};
+    font: ${t.font};
+    letter-spacing: ${sys.tracking.bodyLg};
+    color: ${t.fg};
+    cursor: pointer;
+    user-select: none;
+  }
+  .opt .layer {
+    position: absolute; inset: 0; z-index: -1;
+    background: currentColor; opacity: 0;
+    transition: opacity ${sys.duration.short2} ${sys.easing.standard};
+  }
+  .opt:hover .layer { opacity: ${sys.state.hover}; }
+  .opt.active .layer { opacity: ${sys.state.focus}; }
+  .opt:active .layer { opacity: ${sys.state.pressed}; }
+  .opt[aria-selected="true"] { background: ${sys.color.secondaryContainer}; color: ${sys.color.onSecondaryContainer}; }
+
+  .disabled { opacity: ${sys.state.disabledContent}; pointer-events: none; }
+`;
+
+define('ui-autocomplete', {
+  formAssociated: true,
+  props: {
+    label: '', value: '', options: [], variant: 'filled', disabled: false,
+    required: false, name: '', placeholder: '', freeSolo: false,
+  },
+  styles: [base, styles],
+  setup(p, host) {
+    const { label, value, options, variant, disabled, required, name, placeholder, freeSolo } = p;
+    formBind(host, { name, value, disabled });
+
+    const query = signal('');
+    const focused = signal(false);
+    const open = signal(false);
+    const activeIndex = signal(-1);
+    let fieldEl = null;
+    let stopAuto = null;
+
+    const opts = computed(() => (options() || []).map((o) =>
+      typeof o === 'string'
+        ? { value: o, label: o }
+        : { value: String(o.value), label: o.label != null ? String(o.label) : String(o.value) }));
+
+    const labelFor = (v) => opts().find((o) => o.value === v)?.label ?? v;
+
+    // The committed value drives the visible text (also picks up label text
+    // arriving late through `options`).
+    effect(() => query.set(labelFor(value())));
+
+    const filtered = computed(() => {
+      const q = query().trim().toLowerCase();
+      return q ? opts().filter((o) => o.label.toLowerCase().includes(q)) : opts();
+    });
+    // New matches invalidate the keyboard-active option.
+    effect(() => { filtered(); activeIndex.set(-1); });
+
+    const activeOpt = computed(() => filtered()[activeIndex()] ?? null);
+    const showPanel = computed(() => open() && !disabled() && filtered().length > 0);
+
+    const floating = computed(() => focused() || query() !== '' || placeholder() !== '');
+    const cls = computed(() =>
+      ['root', variant(), floating() && 'floating', focused() && 'focused',
+       showPanel() && 'expanded', disabled() && 'disabled', label() && 'has-label']
+        .filter(Boolean).join(' '));
+
+    const commit = (v) => {
+      const text = labelFor(v);
+      if (v !== value()) {
+        value.set(v);
+        host.emit('change', { value: v });
+      }
+      query.set(text);
+      open.set(false);
+    };
+
+    const onInput = (e) => {
+      e.stopPropagation();
+      query.set(e.target.value);
+      open.set(true);
+      host.emit('input', { value: e.target.value });
+    };
+    const move = (delta) => {
+      const list = filtered();
+      if (!list.length) return;
+      const i = activeIndex();
+      activeIndex.set(i < 0 ? (delta > 0 ? 0 : list.length - 1) : (i + delta + list.length) % list.length);
+    };
+    const onKeydown = (e) => {
+      switch (e.key) {
+        case 'ArrowDown': e.preventDefault(); if (!open()) open.set(true); move(1); break;
+        case 'ArrowUp': e.preventDefault(); if (!open()) open.set(true); move(-1); break;
+        case 'Enter':
+          if (showPanel() && activeOpt()) { e.preventDefault(); commit(activeOpt().value); }
+          else if (freeSolo()) commit(query().trim());
+          break;
+        case 'Escape': open.set(false); break;
+      }
+    };
+    const onFocus = () => { focused.set(true); open.set(true); };
+    const onBlur = () => {
+      focused.set(false);
+      open.set(false);
+      const raw = query().trim();
+      if (freeSolo()) { commit(raw); return; }
+      const match = opts().find((o) => o.label.toLowerCase() === raw.toLowerCase());
+      if (match) commit(match.value);
+      else query.set(labelFor(value())); // revert to the committed value
+    };
+
+    effect(() => {
+      if (!showPanel() && stopAuto) { stopAuto(); stopAuto = null; }
+    });
+    onCleanup(() => stopAuto?.());
+
+    const panelRef = (el) => {
+      stopAuto?.();
+      stopAuto = autoUpdate(el, fieldEl, { placement: 'bottom-start', matchWidth: true, offset: 4 });
+    };
+    const panelView = () => html`
+      <div class="panel" part="panel" role="listbox" id="panel"
+           aria-label=${() => label() || null} ref=${panelRef}>
+        ${each(
+          () => filtered(),
+          (o) => html`
+            <div role="option"
+                 class=${() => ({ opt: true, active: activeOpt()?.value === o().value })}
+                 id=${() => (activeOpt()?.value === o().value ? 'ui-ac-active' : null)}
+                 aria-selected=${() => String(value() === o().value)}
+                 @pointerdown=${(e) => e.preventDefault()}
+                 @click=${() => commit(o().value)}>
+              <span class="layer" aria-hidden="true"></span>
+              ${() => o().label}
+            </div>`,
+          (o) => o.value,
+        )}
+      </div>`;
+
+    return html`
+      <div class=${cls}>
+        <label class="field" part="field" ref=${(el) => (fieldEl = el)}>
+          ${() => (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)}
+          <input part="input" role="combobox" aria-autocomplete="list"
+                 aria-haspopup="listbox" aria-controls="panel"
+                 aria-expanded=${() => String(showPanel())}
+                 aria-activedescendant=${() => (showPanel() && activeOpt() ? 'ui-ac-active' : null)}
+                 .value=${query}
+                 placeholder=${() => placeholder() || null}
+                 ?disabled=${disabled} ?required=${required}
+                 @input=${onInput} @change=${(e) => e.stopPropagation()} @keydown=${onKeydown}
+                 @focus=${onFocus} @blur=${onBlur}>
+          <ui-icon class="arrow" name="arrow-drop-down"></ui-icon>
+        </label>
+        ${presence(showPanel, panelView, {
+          enter: fx.scaleIn,
+          exit: fx.scaleOut,
+          enterDuration: 'short4',
+          exitDuration: 'short2',
+          enterEasing: 'emphasizedDecelerate',
+          exitEasing: 'emphasizedAccelerate',
+        })}
+      </div>`;
+  },
+});
+
+export const tag = 'ui-autocomplete';
+export const themeVars = t;

package/src/components/ui-avatar.js

@@ -0,0 +1,104 @@
+// <ui-avatar> — a circular avatar: image, initials, or icon.
+//
+// Fallback chain: `src` image → initials from `name` (first + last word) →
+// `icon` → slotted content. A broken image (error event) falls back to the
+// initials automatically. Initials scale with the avatar (~40% of its size).
+//
+// @prop  {string} src=''   — image URL (object-fit: cover)
+// @prop  {string} name=''  — person's name; drives initials and the aria-label fallback
+// @prop  {string} icon=''  — registry icon shown when there is no image and no name
+// @prop  {string} size=''  — CSS length overriding the 40px default (sets --ui-avatar-size)
+// @prop  {string} label='' — accessible name; falls back to `name`, else decorative
+// @slot  (default) — custom content when src/name/icon are all empty
+// @vars  --ui-avatar-size, --ui-avatar-bg, --ui-avatar-fg, --ui-avatar-radius
+
+import { define, html, css, vars, computed, effect, signal } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+import './ui-icon.js';
+
+const t = vars('ui-avatar', {
+  size: '40px',
+  bg: sys.color.primaryContainer,
+  fg: sys.color.onPrimaryContainer,
+  radius: sys.radius.full,
+});
+
+const styles = css`
+  :host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    inline-size: ${t.size};
+    block-size: ${t.size};
+    border-radius: ${t.radius};
+    background: ${t.bg};
+    color: ${t.fg};
+    overflow: hidden;
+    vertical-align: middle;
+    user-select: none;
+    /* em-based scaling: initials are 1em of this. */
+    font-size: calc(${t.size} * 0.4);
+    --ui-icon-size: calc(${t.size} * 0.6);
+  }
+  img {
+    inline-size: 100%;
+    block-size: 100%;
+    object-fit: cover;
+    display: block;
+  }
+  .initials {
+    font: ${sys.type.titleMd};
+    font-size: 1em;
+    letter-spacing: normal;
+    line-height: 1;
+  }
+`;
+
+define('ui-avatar', {
+  props: { src: '', name: '', icon: '', size: '', label: '' },
+  styles: [base, styles],
+  setup({ src, name, icon, size, label }, host) {
+    const broken = signal(false);
+    effect(() => { src(); broken.set(false); }); // new source, new chance
+
+    const initials = computed(() => {
+      const words = name().trim().split(/\s+/).filter(Boolean);
+      if (!words.length) return '';
+      const first = words[0][0];
+      const last = words.length > 1 ? words[words.length - 1][0] : '';
+      return (first + last).toUpperCase();
+    });
+
+    effect(() => {
+      const l = label() || name();
+      if (l) {
+        host.setAttribute('role', 'img');
+        host.setAttribute('aria-label', l);
+        host.removeAttribute('aria-hidden');
+      } else {
+        host.removeAttribute('role');
+        host.removeAttribute('aria-label');
+        host.setAttribute('aria-hidden', 'true');
+      }
+    });
+
+    effect(() => {
+      if (size()) host.style.setProperty('--ui-avatar-size', size());
+      else host.style.removeProperty('--ui-avatar-size');
+    });
+
+    return html`${() => {
+      if (src() && !broken()) {
+        return html`<img src=${src} alt="" @error=${() => broken.set(true)}>`;
+      }
+      if (initials()) return html`<span class="initials" aria-hidden="true">${initials}</span>`;
+      if (icon()) return html`<ui-icon name=${icon}></ui-icon>`;
+      return html`<slot></slot>`;
+    }}`;
+  },
+});
+
+export const tag = 'ui-avatar';
+export const themeVars = t;

package/src/components/ui-backdrop.js

@@ -0,0 +1,66 @@
+// <ui-backdrop> — a full-screen scrim behind custom overlays.
+//
+//   <ui-backdrop open=${open} @close=${() => open(false)}></ui-backdrop>
+//
+// Fades in/out, locks page scroll while open, and requests closing by
+// emitting `close` when the scrim is clicked — the PARENT owns the state and
+// flips the signal.
+//
+// @prop  {boolean} open=false
+// @prop  {boolean} invisible=false — transparent scrim (still catches clicks)
+// @event close — scrim clicked; detail: { reason: 'scrim' }
+// @part  scrim
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars, effect, onCleanup } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+import { presence } from '../motion/presence.js';
+import { fx } from '../motion/animate.js';
+import { scrollLock } from '../util/focus.js';
+
+const t = vars('ui-backdrop', {
+  bg: `color-mix(in srgb, ${sys.color.scrim} 32%, transparent)`,
+});
+
+const styles = css`
+  :host { display: contents; }
+  .scrim {
+    position: fixed;
+    inset: 0;
+    z-index: ${sys.z.modal};
+    background: ${t.bg};
+  }
+  .invisible { background: transparent; }
+`;
+
+define('ui-backdrop', {
+  props: { open: false, invisible: false },
+  styles: [base, styles],
+  setup({ open, invisible }, host) {
+    let unlock = null;
+    effect(() => {
+      if (open()) {
+        if (!unlock) unlock = scrollLock();
+      } else {
+        unlock?.();
+        unlock = null;
+      }
+    });
+    onCleanup(() => unlock?.());
+
+    const view = () => html`
+      <div part="scrim" aria-hidden="true"
+           class=${() => `scrim${invisible() ? ' invisible' : ''}`}
+           @click=${() => host.emit('close', { reason: 'scrim' })}></div>`;
+
+    return html`${presence(open, view, {
+      enter: fx.fadeIn,
+      exit: fx.fadeOut,
+      exitDuration: 'short3',
+    })}`;
+  },
+});
+
+export const tag = 'ui-backdrop';
+export const themeVars = t;