@alacris/ui 0.0.0 → 0.1.0

package/src/components/ui-badge.js

@@ -0,0 +1,95 @@
+// <ui-badge> — a small status badge anchored to the top-end corner of its
+// slotted content (an icon button, a nav item, an avatar…).
+//
+// Hidden while `value` is 0 unless `dot`. Counts above `max` render '99+'
+// style. Appearing/disappearing animates with a scale-in/out.
+//
+// @prop  {number}  value=0   — the count; 0 hides the badge (unless `dot`)
+// @prop  {number}  max=99    — counts above this render as 'max+'
+// @prop  {boolean} dot=false — a plain 8px dot instead of a count
+// @prop  {boolean} show=true — master visibility switch
+// @prop  {string}  label=''  — accessible meaning of the badge ('3 unread');
+//                              empty marks the badge decorative
+// @slot  (default) — the anchored content
+// @part  badge — the badge pill/dot
+// @vars  --ui-badge-bg, --ui-badge-fg, --ui-badge-size, --ui-badge-dot-size,
+//        --ui-badge-font
+
+import { define, html, css, vars, computed } 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';
+
+const t = vars('ui-badge', {
+  bg: sys.color.error,
+  fg: sys.color.onError,
+  size: '16px',
+  dotSize: '8px',
+  font: sys.type.labelSm,
+  tracking: sys.tracking.labelSm,
+});
+
+const styles = css`
+  :host {
+    position: relative;
+    display: inline-flex;
+    vertical-align: middle;
+  }
+  .badge {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: 0;
+    transform: translate(50%, -50%);
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-block-size: ${t.size};
+    min-inline-size: ${t.size};
+    padding-inline: ${sys.space(1)};
+    border-radius: ${sys.radius.full};
+    background: ${t.bg};
+    color: ${t.fg};
+    font: ${t.font};
+    letter-spacing: ${t.tracking};
+    line-height: 1;
+    pointer-events: none;
+    white-space: nowrap;
+  }
+  .badge.dot {
+    min-block-size: ${t.dotSize};
+    min-inline-size: ${t.dotSize};
+    block-size: ${t.dotSize};
+    inline-size: ${t.dotSize};
+    padding: 0;
+  }
+`;
+
+define('ui-badge', {
+  props: { value: 0, max: 99, dot: false, show: true, label: '' },
+  styles: [base, styles],
+  setup({ value, max, dot, show, label }) {
+    const visible = computed(() => show() && (dot() || value() > 0));
+    const text = computed(() =>
+      dot() ? '' : value() > max() ? `${max()}+` : String(value()));
+
+    const view = () => html`
+      <span part="badge"
+            class=${() => `badge${dot() ? ' dot' : ''}`}
+            aria-label=${() => label() || null}
+            aria-hidden=${() => (label() ? null : 'true')}>${text}</span>`;
+
+    return html`
+      <slot></slot>
+      ${presence(visible, view, {
+        enter: fx.scaleIn,
+        exit: fx.scaleOut,
+        enterDuration: 'short4',
+        exitDuration: 'short2',
+      })}`;
+  },
+});
+
+export const tag = 'ui-badge';
+export const themeVars = t;

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

@@ -0,0 +1,78 @@
+// <ui-bottom-app-bar> — the Material bottom app bar.
+//
+//   <ui-bottom-app-bar>
+//     <ui-icon-button slot="navigation" icon="menu" label="Menu"></ui-icon-button>
+//     <ui-icon-button slot="actions" icon="search" label="Search"></ui-icon-button>
+//     <ui-fab slot="fab" icon="add"></ui-fab>
+//   </ui-bottom-app-bar>
+//
+// A surface for a leading navigation icon, trailing actions, and an optional
+// FAB. The host flows with the page — pin it with CSS when it should hug the
+// viewport bottom. Distinct from <ui-bottom-nav>, which is destination tabs.
+//
+// @prop  {string}  label='Bottom app bar' — accessible name of the toolbar
+// @prop  {string} fabAlign='end' — end | center | start — where the FAB sits
+// @slot  navigation — leading icon button
+// @slot  actions    — trailing icon buttons
+// @slot  fab        — optional <ui-fab>
+// @part  bar, navigation, actions, fab
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars, computed } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+
+const t = vars('ui-bottom-app-bar', {
+  height: '80px',
+  bg: sys.color.surfaceContainer,
+  fg: sys.color.onSurface,
+  shadow: sys.elevation[2],
+});
+
+const styles = css`
+  :host { display: block; }
+  .bar {
+    position: relative;
+    display: flex;
+    align-items: center;
+    block-size: ${t.height};
+    padding-inline: ${sys.space(1)} ${sys.space(4)};
+    background: ${t.bg};
+    color: ${t.fg};
+    box-shadow: ${t.shadow};
+  }
+  .nav, .actions, .fab {
+    display: inline-flex;
+    align-items: center;
+    gap: ${sys.space(1)};
+  }
+  .nav { order: 0; }
+  .actions { order: 1; margin-inline-start: auto; }
+  .fab { order: 2; margin-inline-start: ${sys.space(2)}; }
+  .start .fab { order: 1; }
+  .start .actions { order: 2; }
+  .center .fab {
+    order: 0;
+    position: absolute;
+    inset-inline-start: 50%;
+    translate: -50% 0;
+    margin: 0;
+  }
+`;
+
+define('ui-bottom-app-bar', {
+  props: { label: 'Bottom app bar', fabAlign: 'end' },
+  styles: [base, styles],
+  setup({ label, fabAlign }) {
+    const cls = computed(() => `bar ${fabAlign() === 'center' ? 'center' : fabAlign() === 'start' ? 'start' : 'end'}`);
+    return html`
+      <div class=${cls} part="bar" role="toolbar" aria-label=${() => label() || 'Bottom app bar'}>
+        <div class="nav" part="navigation"><slot name="navigation"></slot></div>
+        <div class="fab" part="fab"><slot name="fab"></slot></div>
+        <div class="actions" part="actions"><slot name="actions"></slot></div>
+      </div>`;
+  },
+});
+
+export const tag = 'ui-bottom-app-bar';
+export const themeVars = t;

package/src/components/ui-bottom-nav.js

@@ -0,0 +1,83 @@
+// <ui-bottom-nav> — the Material navigation bar.
+//
+//   <ui-bottom-nav value=${route} @change=${(e) => route(e.detail.value)}>
+//     <ui-nav-item value="home" icon="home" label="Home"></ui-nav-item>
+//     <ui-nav-item value="search" icon="search" label="Search"></ui-nav-item>
+//   </ui-bottom-nav>
+//
+// @prop  {string} value='' — the selected item's `value`
+// @prop  {string} label='' — accessible name of the <nav>
+// @event change — a destination was chosen; detail: { value }
+// @slot  (default) — <ui-nav-item> children
+// @part  bar — the <nav> container
+// @vars  see `t` below (`themeVars.names`)
+//
+// The host is `display: block` and flows with the page — apps that want the
+// bar pinned to the viewport position it themselves (position: fixed; bottom:
+// 0; left: 0; right: 0). Selection reflects down: every `value` write (or
+// slotchange) sets `selected` on the children. Keyboard: one Tab stop, arrow
+// keys rove between items (rovingTabindex, horizontal).
+
+import { define, html, css, vars, effect, onCleanup } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+import { rovingTabindex } from '../util/keys.js';
+import './ui-nav-item.js';
+
+const t = vars('ui-bottom-nav', {
+  height: '80px',
+  bg: sys.color.surfaceContainer,
+  shadow: 'none',
+});
+
+const styles = css`
+  :host { display: block; }
+  .bar {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-around;
+    block-size: ${t.height};
+    background: ${t.bg};
+    box-shadow: ${t.shadow};
+  }
+  ::slotted(ui-nav-item) { flex: 1; max-inline-size: 168px; }
+`;
+
+define('ui-bottom-nav', {
+  props: { value: '', label: '' },
+  styles: [base, styles],
+  setup({ value, label }, host) {
+    const roving = rovingTabindex(host, {
+      selector: 'ui-nav-item',
+      orientation: 'horizontal',
+      skip: (el) => el.disabled,
+    });
+    onCleanup(() => roving.destroy());
+
+    const sync = () => {
+      for (const item of host.querySelectorAll('ui-nav-item')) {
+        item.selected = item.value === value();
+      }
+      roving.refresh();
+    };
+    effect(sync); // re-runs on every `value` write; slotchange calls it too
+
+    const onSelect = (e) => {
+      const v = e.detail?.value;
+      if (v === undefined || v === value()) return;
+      value.set(v);
+      host.emit('change', { value: v });
+    };
+    // Items are light-DOM children; their bubbling select events reach the host.
+    host.addEventListener('ui-nav-select', onSelect);
+    onCleanup(() => host.removeEventListener('ui-nav-select', onSelect));
+
+    return html`
+      <nav class="bar" part="bar" aria-label=${() => label() || null}>
+        <slot @slotchange=${sync}></slot>
+      </nav>`;
+  },
+});
+
+export const tag = 'ui-bottom-nav';
+export const themeVars = t;

package/src/components/ui-breadcrumbs.js

@@ -0,0 +1,100 @@
+// <ui-breadcrumbs> — a navigation trail of slotted links.
+//
+//   <ui-breadcrumbs separator-icon="chevron-right">
+//     <a href="/">Home</a>
+//     <a href="/library">Library</a>
+//     <span aria-current="page">Data</span>
+//   </ui-breadcrumbs>
+//
+// @prop  {string} separator='/'     — separator text between items
+// @prop  {string} separatorIcon=''  — registry icon name; overrides `separator`
+// @prop  {string} label='Breadcrumb' — accessible name of the <nav>
+// @slot  (default) — the trail items. Children MUST be elements (<a>, <span>,
+//                    <ui-button variant="text">, …), never bare text nodes —
+//                    separators are drawn with ::slotted(*)::before, which only
+//                    exists on element children. Mark the current page with
+//                    aria-current="page".
+// @part  nav, list
+// @vars  see `t` below (`themeVars.names`)
+//
+// Separators are rendered as generated content on every item but the first:
+// text mode sets the `content` from a private custom property; icon mode masks
+// a currentColor box with the icon's path, so it themes like any glyph.
+
+import { define, html, css, vars, effect } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+import { iconPath, iconsVersion } from '../util/icons.js';
+
+const t = vars('ui-breadcrumbs', {
+  fg: sys.color.onSurfaceVariant,
+  currentFg: sys.color.onSurface,
+  separatorFg: sys.color.onSurfaceVariant,
+  gap: sys.space(2),
+  font: sys.type.bodyMd,
+  tracking: sys.tracking.bodyMd,
+});
+
+const styles = css`
+  :host { display: block; }
+  nav {
+    font: ${t.font};
+    letter-spacing: ${t.tracking};
+    color: ${t.fg};
+  }
+  .list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: ${t.gap};
+  }
+  ::slotted(*) { display: inline-flex; align-items: center; color: inherit; }
+  ::slotted(a) { color: inherit; text-decoration: none; }
+  ::slotted(a:hover) { color: ${t.currentFg}; text-decoration: underline; }
+  ::slotted([aria-current="page"]) { color: ${t.currentFg}; }
+  ::slotted(*:not(:first-child))::before {
+    content: var(--_ui-breadcrumbs-sep, "/");
+    display: inline-block;
+    flex: none;
+    margin-inline-end: ${t.gap};
+    color: ${t.separatorFg};
+    inline-size: var(--_ui-breadcrumbs-sep-size, auto);
+    block-size: var(--_ui-breadcrumbs-sep-size, auto);
+    background: var(--_ui-breadcrumbs-sep-bg, none);
+    -webkit-mask: var(--_ui-breadcrumbs-sep-mask, none) center / contain no-repeat;
+    mask: var(--_ui-breadcrumbs-sep-mask, none) center / contain no-repeat;
+  }
+`;
+
+define('ui-breadcrumbs', {
+  props: { separator: '/', separatorIcon: '', label: 'Breadcrumb' },
+  styles: [base, styles],
+  setup({ separator, separatorIcon, label }, host) {
+    effect(() => {
+      iconsVersion(); // pick up icons registered after first render
+      const d = separatorIcon() && iconPath(separatorIcon());
+      const s = host.style;
+      if (d) {
+        const svgMarkup =
+          `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="${d}"/></svg>`;
+        s.setProperty('--_ui-breadcrumbs-sep', '""');
+        s.setProperty('--_ui-breadcrumbs-sep-mask', `url("data:image/svg+xml,${encodeURIComponent(svgMarkup)}")`);
+        s.setProperty('--_ui-breadcrumbs-sep-bg', 'currentColor');
+        s.setProperty('--_ui-breadcrumbs-sep-size', '1em');
+      } else {
+        s.setProperty('--_ui-breadcrumbs-sep', JSON.stringify(separator()));
+        s.removeProperty('--_ui-breadcrumbs-sep-mask');
+        s.removeProperty('--_ui-breadcrumbs-sep-bg');
+        s.removeProperty('--_ui-breadcrumbs-sep-size');
+      }
+    });
+
+    return html`
+      <nav part="nav" aria-label=${label}>
+        <div class="list" part="list"><slot></slot></div>
+      </nav>`;
+  },
+});
+
+export const tag = 'ui-breadcrumbs';
+export const themeVars = t;

package/src/components/ui-button-group.js

@@ -0,0 +1,49 @@
+// <ui-button-group> — joins slotted <ui-button>s into one segmented bar.
+//
+// Slotted buttons lose their own rounding (their `--ui-button-radius` is
+// zeroed); the group container carries the full radius and clips, and a 1px
+// gap lets the container's divider color show between segments — the Material
+// connected button group.
+//
+// @prop  {string} label='' — accessible name for the group
+// @slot  (default) — the <ui-button> children
+// @part  group — the clipping container
+// @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';
+import './ui-button.js';
+
+const t = vars('ui-button-group', {
+  radius: sys.radius.full,
+  divider: sys.color.outlineVariant,
+});
+
+const styles = css`
+  :host { display: inline-flex; vertical-align: middle; }
+  .group {
+    display: inline-flex;
+    align-items: stretch;
+    gap: 1px;
+    background: ${t.divider};
+    border-radius: ${t.radius};
+    overflow: hidden;
+  }
+  ::slotted(ui-button) { --ui-button-radius: 0; }
+`;
+
+define('ui-button-group', {
+  props: { label: '' },
+  styles: [base, styles],
+  setup({ label }) {
+    return html`
+      <div class="group" part="group" role="group"
+           aria-label=${() => label() || null}>
+        <slot></slot>
+      </div>`;
+  },
+});
+
+export const tag = 'ui-button-group';
+export const themeVars = t;

package/src/components/ui-button.js

@@ -0,0 +1,143 @@
+// <ui-button> — the Material common button, all five variants.
+//
+// @prop  {string}  variant='filled' — filled | tonal | outlined | text | elevated
+// @prop  {boolean} disabled=false
+// @prop  {string}  type='button'    — button | submit (submit reaches the enclosing form)
+// @prop  {string}  href=''          — renders a link styled as a button
+// @prop  {string}  target=''        — link target when href is set
+// @event (native click bubbles; no custom event)
+// @slot  (default) — label
+// @slot  icon      — leading icon
+// @slot  trailing  — trailing icon
+// @part  control   — the <button>/<a>
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars, computed, signal } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base, focusRingOn, stateLayerOn } from './base.js';
+import { ripple } from '../motion/ripple.js';
+
+const t = vars('ui-button', {
+  height: '40px',
+  padInline: sys.space(6),
+  gap: sys.space(2),
+  radius: sys.radius.full,
+  font: sys.type.labelLg,
+  tracking: sys.tracking.labelLg,
+  filledBg: sys.color.primary,
+  filledFg: sys.color.onPrimary,
+  tonalBg: sys.color.secondaryContainer,
+  tonalFg: sys.color.onSecondaryContainer,
+  outlinedFg: sys.color.primary,
+  outlineColor: sys.color.outline,
+  textFg: sys.color.primary,
+  elevatedBg: sys.color.surfaceContainerLow,
+  elevatedFg: sys.color.primary,
+});
+
+const styles = css`
+  :host { display: inline-flex; vertical-align: middle; }
+  .control {
+    position: relative;
+    isolation: isolate;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: ${t.gap};
+    block-size: calc(${t.height} + var(--ui-density, 0) * 4px);
+    padding-inline: ${t.padInline};
+    border: none;
+    border-radius: ${t.radius};
+    font: ${t.font};
+    letter-spacing: ${t.tracking};
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    user-select: none;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: box-shadow ${sys.duration.short4} ${sys.easing.standard};
+    --ui-icon-size: 1.125rem;
+  }
+  ${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};
+  }
+  ${stateLayerOn('.control')}
+
+  .filled { background: ${t.filledBg}; color: ${t.filledFg}; }
+  .filled:hover { box-shadow: ${sys.elevation[1]}; }
+  .filled:active { box-shadow: none; }
+  .tonal { background: ${t.tonalBg}; color: ${t.tonalFg}; }
+  .outlined {
+    color: ${t.outlinedFg};
+    border: 1px solid ${t.outlineColor};
+  }
+  .text { color: ${t.textFg}; padding-inline: ${sys.space(3)}; }
+  .elevated { background: ${t.elevatedBg}; color: ${t.elevatedFg}; box-shadow: ${sys.elevation[1]}; }
+  .elevated:hover { box-shadow: ${sys.elevation[2]}; }
+  .elevated:active { box-shadow: ${sys.elevation[1]}; }
+
+  /* Leading icon: 16dp start padding. Trailing icon: 16dp end padding. */
+  .with-icon:not(.text) { padding-inline-start: ${sys.space(4)}; }
+  .with-trailing:not(.text) { padding-inline-end: ${sys.space(4)}; }
+  .text.with-icon { padding-inline-end: ${sys.space(4)}; }
+  .text.with-trailing { padding-inline-start: ${sys.space(4)}; }
+
+  .control:disabled, .control[aria-disabled="true"] {
+    cursor: default;
+    pointer-events: none;
+    box-shadow: none;
+    color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+  }
+  .filled:disabled, .tonal:disabled, .elevated:disabled,
+  .filled[aria-disabled="true"], .tonal[aria-disabled="true"], .elevated[aria-disabled="true"] {
+    background: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContainer} * 100%), transparent);
+  }
+  .outlined:disabled, .outlined[aria-disabled="true"] {
+    border-color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContainer} * 100%), transparent);
+  }
+`;
+
+define('ui-button', {
+  props: { variant: 'filled', disabled: false, type: 'button', href: '', target: '' },
+  styles: [base, styles],
+  setup({ variant, disabled, type, href, target }, host) {
+    const hasIcon = signal(false);
+    const hasTrailing = signal(false);
+    const onSlot = (sig) => (el) => {
+      const sync = () => sig.set(el.assignedElements().length > 0);
+      el.addEventListener('slotchange', sync);
+      sync();
+    };
+    const cls = computed(() =>
+      `control ${variant()}${hasIcon() ? ' with-icon' : ''}${hasTrailing() ? ' with-trailing' : ''}`);
+
+    const onClick = (e) => {
+      if (disabled()) { e.preventDefault(); e.stopPropagation(); return; }
+      // A shadow-DOM button cannot submit the host's form; bridge it.
+      if (!href() && type() === 'submit') host.closest('form')?.requestSubmit();
+    };
+
+    const inner = html`
+      <span class="layer" aria-hidden="true"></span>
+      <slot name="icon" ref=${onSlot(hasIcon)}></slot>
+      <slot></slot>
+      <slot name="trailing" ref=${onSlot(hasTrailing)}></slot>`;
+
+    return html`${() =>
+      href()
+        ? html`<a part="control" class=${cls} href=${href} target=${() => target() || null}
+                  aria-disabled=${() => (disabled() ? 'true' : null)} tabindex=${() => (disabled() ? '-1' : null)}
+                  @click=${onClick} ref=${(el) => ripple(el, { disabled })}>${inner}</a>`
+        : html`<button part="control" class=${cls} type="button" ?disabled=${disabled}
+                  @click=${onClick} ref=${(el) => ripple(el, { disabled })}>${inner}</button>`}`;
+  },
+});
+
+export const tag = 'ui-button';
+export const themeVars = t;

package/src/components/ui-card.js

@@ -0,0 +1,86 @@
+// <ui-card> — a Material card surface.
+//
+// @prop  {string}  variant='elevated' — elevated | filled | outlined
+// @prop  {boolean} interactive=false  — hover elevation + ripple + button semantics
+// @event action — interactive card activated (click/Enter/Space)
+// @slot  (default) — card body (compose freely; padding is yours via parts/vars)
+// @slot  media     — full-bleed media at the top
+// @part  container — the card surface
+// @part  body      — padded wrapper around the default slot
+// @vars  see `t` below
+
+import { define, html, css, vars, computed } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base, focusRingOn } from './base.js';
+import { ripple } from '../motion/ripple.js';
+
+const t = vars('ui-card', {
+  radius: sys.radius.md,
+  bg: sys.color.surfaceContainerLow,
+  fg: sys.color.onSurface,
+  filledBg: sys.color.surfaceContainerHighest,
+  outlineColor: sys.color.outlineVariant,
+  padding: sys.space(4),
+});
+
+const styles = css`
+  :host { display: block; }
+  .container {
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    flex-direction: column;
+    border-radius: ${t.radius};
+    color: ${t.fg};
+    overflow: hidden;
+    transition: box-shadow ${sys.duration.short4} ${sys.easing.standard};
+  }
+  .elevated { background: ${t.bg}; box-shadow: ${sys.elevation[1]}; }
+  .filled { background: ${t.filledBg}; }
+  .outlined { background: ${sys.color.surface}; border: 1px solid ${t.outlineColor}; }
+  .body { padding: ${t.padding}; }
+  .interactive { cursor: pointer; }
+  ${focusRingOn('.interactive')}
+  .interactive .layer {
+    position: absolute; inset: 0; z-index: 1;
+    background: currentColor; opacity: 0; pointer-events: none;
+    transition: opacity ${sys.duration.short2} ${sys.easing.standard};
+  }
+  .interactive:hover .layer { opacity: ${sys.state.hover}; }
+  .interactive:focus-visible .layer { opacity: ${sys.state.focus}; }
+  .interactive:active .layer { opacity: ${sys.state.pressed}; }
+  .interactive.elevated:hover { box-shadow: ${sys.elevation[2]}; }
+  .interactive.elevated:active { box-shadow: ${sys.elevation[1]}; }
+  .interactive.outlined:hover, .interactive.filled:hover { box-shadow: ${sys.elevation[1]}; }
+  .interactive.outlined:active, .interactive.filled:active { box-shadow: none; }
+`;
+
+define('ui-card', {
+  props: { variant: 'elevated', interactive: false },
+  styles: [base, styles],
+  setup({ variant, interactive }, host) {
+    const cls = computed(() => `container ${variant()}${interactive() ? ' interactive' : ''}`);
+
+    const activate = () => interactive() && host.emit('action');
+    const onKeydown = (e) => {
+      if (interactive() && (e.key === 'Enter' || e.key === ' ')) {
+        e.preventDefault();
+        activate();
+      }
+    };
+
+    return html`
+      <div part="container" class=${cls}
+           role=${() => (interactive() ? 'button' : null)}
+           tabindex=${() => (interactive() ? '0' : null)}
+           @click=${activate} @keydown=${onKeydown}
+           ref=${(el) => ripple(el, { disabled: () => !interactive() })}>
+        <span class="layer" aria-hidden="true"></span>
+        <slot name="media"></slot>
+        <div class="body" part="body"><slot></slot></div>
+      </div>`;
+  },
+});
+
+export const tag = 'ui-card';
+export const themeVars = t;