@alacris/ui 0.0.0 → 0.1.1

package/src/components/ui-pagination.js

@@ -0,0 +1,173 @@
+// <ui-pagination> — page navigation with sibling/boundary windows.
+//
+//   <ui-pagination count="10" page=${page} @change=${(e) => page(e.detail.page)}>
+//   </ui-pagination>
+//
+// @prop  {number}  page=1       — current page (1-based)
+// @prop  {number}  count=1      — total pages
+// @prop  {number}  siblings=1   — pages shown on each side of the current page
+// @prop  {number}  boundaries=1 — pages always shown at each end
+// @prop  {boolean} disabled=false
+// @prop  {string}  label='Pagination' — accessible name of the <nav>
+// @event change — a page was chosen (numbers, prev, next); detail: { page }
+// @part  nav, list
+// @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 { ripple } from '../motion/ripple.js';
+import './ui-icon.js';
+
+const t = vars('ui-pagination', {
+  size: '40px',
+  radius: sys.radius.full,
+  fg: sys.color.onSurfaceVariant,
+  currentBg: sys.color.primary,
+  currentFg: sys.color.onPrimary,
+  font: sys.type.labelLg,
+  tracking: sys.tracking.labelLg,
+});
+
+const styles = css`
+  :host { display: block; }
+  .list {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: ${sys.space(1)};
+  }
+  .item {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-inline-size: calc(${t.size} + var(--ui-density, 0) * 4px);
+    block-size: calc(${t.size} + var(--ui-density, 0) * 4px);
+    border-radius: ${t.radius};
+    font: ${t.font};
+    letter-spacing: ${t.tracking};
+    color: ${t.fg};
+  }
+  button.item {
+    position: relative;
+    isolation: isolate;
+    border: none;
+    background: transparent;
+    padding: 0;
+    cursor: pointer;
+    user-select: none;
+    --ui-icon-size: 1.25rem;
+  }
+  ${focusRingOn('button.item')}
+  .layer {
+    position: absolute; inset: 0; z-index: -1;
+    border-radius: inherit;
+    background: currentColor;
+    opacity: 0;
+    transition: opacity ${sys.duration.short2} ${sys.easing.standard};
+  }
+  button.item:hover .layer { opacity: ${sys.state.hover}; }
+  button.item:focus-visible .layer { opacity: ${sys.state.focus}; }
+  button.item:active .layer { opacity: ${sys.state.pressed}; }
+  button.item.current { background: ${t.currentBg}; color: ${t.currentFg}; }
+  button.item:disabled {
+    cursor: default;
+    pointer-events: none;
+    color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+  }
+  button.item.current:disabled {
+    background: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContainer} * 100%), transparent);
+  }
+`;
+
+const range = (start, end) => {
+  const out = [];
+  for (let i = start; i <= end; i++) out.push(i);
+  return out;
+};
+
+define('ui-pagination', {
+  props: { page: 1, count: 1, siblings: 1, boundaries: 1, disabled: false, label: 'Pagination' },
+  styles: [base, styles],
+  setup({ page, count, siblings, boundaries, disabled, label }, host) {
+    const total = () => Math.max(1, Math.floor(count()) || 1);
+    const current = () => Math.min(Math.max(1, Math.floor(page()) || 1), total());
+
+    // The MUI usePagination windowing: boundary pages at both ends, a sibling
+    // window around the current page, and ellipses where the gaps are >1.
+    const items = computed(() => {
+      const c = total();
+      const p = current();
+      const sib = Math.max(0, siblings());
+      const bnd = Math.max(0, boundaries());
+
+      const startPages = range(1, Math.min(bnd, c));
+      const endPages = range(Math.max(c - bnd + 1, bnd + 1), c);
+
+      const siblingsStart = Math.max(Math.min(p - sib, c - bnd - sib * 2 - 1), bnd + 2);
+      const siblingsEnd = Math.min(
+        Math.max(p + sib, bnd + sib * 2 + 2),
+        endPages.length > 0 ? endPages[0] - 2 : c - 1,
+      );
+
+      return [
+        'prev',
+        ...startPages,
+        ...(siblingsStart > bnd + 2 ? ['start-ellipsis'] : bnd + 1 < c - bnd ? [bnd + 1] : []),
+        ...range(siblingsStart, siblingsEnd),
+        ...(siblingsEnd < c - bnd - 1 ? ['end-ellipsis'] : c - bnd > bnd ? [c - bnd] : []),
+        ...endPages,
+        'next',
+      ];
+    });
+
+    const setPage = (n) => {
+      const clamped = Math.min(Math.max(1, n), total());
+      if (clamped === current()) return;
+      page.set(clamped);
+      host.emit('change', { page: clamped });
+    };
+
+    return html`
+      <nav part="nav" aria-label=${label}>
+        <div class="list" part="list">
+          ${() => {
+            const dis = disabled();
+            const p = current();
+            const c = total();
+            return items().map((it) => {
+              if (it === 'prev' || it === 'next') {
+                const next = it === 'next';
+                return html`
+                  <button type="button" class="item"
+                          aria-label=${next ? 'Next page' : 'Previous page'}
+                          ?disabled=${dis || (next ? p >= c : p <= 1)}
+                          @click=${() => setPage(next ? current() + 1 : current() - 1)}
+                          ref=${(el) => ripple(el, { disabled, centered: true })}>
+                    <span class="layer" aria-hidden="true"></span>
+                    <ui-icon name=${next ? 'chevron-right' : 'chevron-left'}></ui-icon>
+                  </button>`;
+              }
+              if (typeof it === 'string') {
+                return html`<span class="item ellipsis" aria-hidden="true">…</span>`;
+              }
+              const isCurrent = it === p;
+              return html`
+                <button type="button" class=${isCurrent ? 'item current' : 'item'}
+                        aria-label=${`Page ${it}`}
+                        aria-current=${isCurrent ? 'page' : null}
+                        ?disabled=${dis}
+                        @click=${() => setPage(it)}
+                        ref=${(el) => ripple(el, { disabled, centered: true })}>
+                  <span class="layer" aria-hidden="true"></span>
+                  ${it}
+                </button>`;
+            });
+          }}
+        </div>
+      </nav>`;
+  },
+});
+
+export const tag = 'ui-pagination';
+export const themeVars = t;

package/src/components/ui-progress.js

@@ -0,0 +1,100 @@
+// <ui-progress> — Material linear progress.
+//
+//   <ui-progress label="Upload" value=${pct}></ui-progress>   determinate
+//   <ui-progress label="Loading"></ui-progress>               indeterminate
+//
+// @prop  {number} value=-1 — current value; -1 (any negative) = indeterminate
+// @prop  {number} max=100  — value scale
+// @prop  {string} label='' — accessible name (aria-label on the progressbar)
+// @part  track — the rail
+// @part  bar   — the active indicator
+// @vars  see `t` below (`themeVars.names`)
+//
+// The determinate width rides a custom property bound from the template
+// (`--ui-progress-pct`), so a value change is one property write. The
+// indeterminate mode is the Material two-bar translate/scale loop, written as
+// CSS keyframes; its cycle length derives from the motion tokens so a theme's
+// motion scale slows or stops it with everything else.
+
+import { define, html, css, vars, computed } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+
+const t = vars('ui-progress', {
+  height: '4px',
+  radius: sys.radius.full,
+  trackBg: sys.color.surfaceContainerHighest,
+  barBg: sys.color.primary,
+});
+
+const styles = css`
+  :host { display: block; inline-size: 100%; }
+  .track {
+    position: relative;
+    block-size: ${t.height};
+    background: ${t.trackBg};
+    border-radius: ${t.radius};
+    overflow: hidden;
+  }
+  .bar {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-start: 0;
+    inline-size: 100%;
+    background: ${t.barBg};
+    border-radius: inherit;
+  }
+  .track:not(.indeterminate) .bar1 {
+    inline-size: var(--ui-progress-pct, 0%);
+    transition: inline-size ${sys.duration.short4} ${sys.easing.standard};
+  }
+  .bar2 { display: none; }
+
+  @keyframes ui-progress-i1 {
+    0%   { transform: translateX(-100%) scaleX(0.5); }
+    30%  { transform: translateX(-10%) scaleX(0.7); }
+    60%  { transform: translateX(100%) scaleX(0.35); }
+    100% { transform: translateX(100%) scaleX(0.35); }
+  }
+  @keyframes ui-progress-i2 {
+    0%   { transform: translateX(-100%) scaleX(0.6); }
+    40%  { transform: translateX(-100%) scaleX(0.6); }
+    70%  { transform: translateX(15%) scaleX(0.5); }
+    100% { transform: translateX(101%) scaleX(0.2); }
+  }
+  .indeterminate .bar { transform: translateX(-100%); transform-origin: left center; }
+  .indeterminate .bar1 {
+    animation: ui-progress-i1 calc(${sys.duration.extraLong4} * 2) ${sys.easing.linear} infinite;
+  }
+  .indeterminate .bar2 {
+    display: block;
+    animation: ui-progress-i2 calc(${sys.duration.extraLong4} * 2) ${sys.easing.linear} infinite;
+  }
+`;
+
+define('ui-progress', {
+  props: { value: -1, max: 100, label: '' },
+  styles: [base, styles],
+  setup({ value, max, label }) {
+    const indeterminate = computed(() => value() < 0);
+    const clamped = computed(() => Math.min(Math.max(value(), 0), max() || 100));
+    // Rounded so float noise (55.00000000000001) never reaches the style.
+    const pct = computed(() => Math.round((clamped() / (max() || 100)) * 10000) / 100);
+
+    return html`
+      <div part="track"
+           class=${() => `track${indeterminate() ? ' indeterminate' : ''}`}
+           role="progressbar"
+           aria-label=${() => label() || null}
+           aria-valuemin="0"
+           aria-valuemax=${max}
+           aria-valuenow=${() => (indeterminate() ? null : String(clamped()))}
+           style=${() => (indeterminate() ? null : { '--ui-progress-pct': pct() + '%' })}>
+        <div class="bar bar1" part="bar"></div>
+        <div class="bar bar2" aria-hidden="true"></div>
+      </div>`;
+  },
+});
+
+export const tag = 'ui-progress';
+export const themeVars = t;

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

@@ -0,0 +1,104 @@
+// <ui-radio-group> — owns a set of slotted <ui-radio>s: one selected value,
+// one tab stop, arrow keys move AND select (ARIA APG radio group pattern).
+//
+//   <ui-radio-group name="size" value=${size} @change=${(e) => size.set(e.detail.value)}>
+//     <ui-radio value="s" label="Small"></ui-radio>
+//     <ui-radio value="m" label="Medium"></ui-radio>
+//   </ui-radio-group>
+//
+// @prop  {string}  value=''
+// @prop  {string}  name=''  — form participation (submits `value`)
+// @prop  {string}  label='' — accessible name for the group
+// @prop  {boolean} disabled=false — disables every radio
+// @prop  {string}  orientation='vertical' — vertical | horizontal (layout only;
+//        arrows work on both axes per the APG)
+// @event change — detail: { value }
+// @slot  (default) — the <ui-radio> children
+// @part  group — the layout container
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars, effect, onCleanup, untrack } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base } from './base.js';
+import { rovingTabindex } from '../util/keys.js';
+import { formBind } from '../util/form.js';
+import './ui-radio.js';
+
+const t = vars('ui-radio-group', {
+  gap: sys.space(1),
+});
+
+const styles = css`
+  :host { display: inline-flex; }
+  .group { display: flex; flex-direction: column; gap: ${t.gap}; }
+  :host([orientation="horizontal"]) .group { flex-direction: row; gap: ${sys.space(4)}; }
+`;
+
+define('ui-radio-group', {
+  formAssociated: true,
+  props: { value: '', name: '', label: '', disabled: false, orientation: 'vertical' },
+  styles: [base, styles],
+  setup({ value, name, label, disabled }, host) {
+    formBind(host, { name, value, disabled });
+
+    const radios = () => [...host.querySelectorAll('ui-radio')];
+
+    // Reflect the value down: check the matching radio, give it the tab stop.
+    const sync = () => {
+      const v = value();
+      const list = radios();
+      const stop = list.find((r) => r.value === v && !r.disabled) || list.find((r) => !r.disabled);
+      for (const r of list) {
+        r.checked = r.value === v;
+        r.tabIndex = r === stop ? 0 : -1;
+      }
+    };
+    effect(sync);
+    // … and once after children have upgraded/distributed.
+    queueMicrotask(() => untrack(sync));
+
+    // Group-level disabling with remember-restore, so a radio's own
+    // `disabled` survives the group toggling.
+    let claimed = null;
+    effect(() => {
+      if (disabled()) {
+        if (claimed) return;
+        claimed = new Set();
+        for (const r of radios()) if (!r.disabled) { r.disabled = true; claimed.add(r); }
+      } else if (claimed) {
+        for (const r of claimed) r.disabled = false;
+        claimed = null;
+      }
+    });
+
+    const select = (v) => {
+      if (disabled() || v === value()) return;
+      value.set(v);
+      host.emit('change', { value: v });
+    };
+
+    // Per the APG, moving with arrows also selects the focused radio.
+    const roving = rovingTabindex(host, {
+      selector: 'ui-radio',
+      orientation: 'both',
+      skip: (el) => el.disabled,
+      onMove: (el) => select(el.value),
+    });
+    onCleanup(() => roving.destroy());
+
+    host.addEventListener('ui-radio-select', (e) => {
+      e.stopPropagation();
+      select(e.detail.value);
+    });
+
+    return html`
+      <div class="group" part="group" role="radiogroup"
+           aria-label=${() => label() || null}
+           aria-disabled=${() => (disabled() ? 'true' : null)}>
+        <slot @slotchange=${() => untrack(sync)}></slot>
+      </div>`;
+  },
+});
+
+export const tag = 'ui-radio-group';
+export const themeVars = t;

package/src/components/ui-radio.js

@@ -0,0 +1,143 @@
+// <ui-radio> — one Material radio button, managed by <ui-radio-group>.
+//
+// The interactive element is a native <button role="radio"> on a 40px touch
+// target. The radio never checks itself: it emits `ui-radio-select` and the
+// owning group sets `checked` back down and roves the host's tabindex (the
+// host forwards focus to the inner button).
+//
+// @prop  {string}  value=''      — REQUIRED identity within the group
+// @prop  {boolean} checked=false — set by the owning group
+// @prop  {boolean} disabled=false
+// @prop  {string}  label=''      — visible label; also the accessible name.
+//                                   Empty leaves the control unnamed (authoring error).
+// @event ui-radio-select — pressed; detail: { value } (consumed by ui-radio-group)
+// @part  control — the <button role="radio"> (the 40px target)
+// @part  circle  — the visible 20px ring
+// @vars  see `t` below (`themeVars.names`)
+
+import { define, html, css, vars } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base, focusRingOn } from './base.js';
+import { ripple } from '../motion/ripple.js';
+import { presence } from '../motion/presence.js';
+import { fx } from '../motion/animate.js';
+
+const t = vars('ui-radio', {
+  target: '40px',
+  circleSize: '20px',
+  outlineColor: sys.color.onSurfaceVariant,
+  checkedColor: sys.color.primary,
+  labelFg: sys.color.onSurface,
+});
+
+const styles = css`
+  :host { display: inline-flex; outline: none; }
+  label {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    font: ${sys.type.bodyMd};
+    letter-spacing: ${sys.tracking.bodyMd};
+    color: ${t.labelFg};
+    user-select: none;
+  }
+  label.disabled {
+    cursor: default;
+    pointer-events: none;
+    color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+  }
+  .control {
+    position: relative;
+    isolation: isolate;
+    flex: none;
+    display: grid;
+    place-items: center;
+    inline-size: max(${t.circleSize}, calc(${t.target} + var(--ui-density, 0) * 4px));
+    block-size: max(${t.circleSize}, calc(${t.target} + var(--ui-density, 0) * 4px));
+    padding: 0;
+    border: none;
+    border-radius: ${sys.radius.full};
+    background: transparent;
+    color: ${t.outlineColor};
+    cursor: pointer;
+  }
+  ${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};
+  }
+  .control:hover .layer { opacity: ${sys.state.hover}; }
+  .control:focus-visible .layer { opacity: ${sys.state.focus}; }
+  .control:active .layer { opacity: ${sys.state.pressed}; }
+
+  .circle {
+    inline-size: ${t.circleSize};
+    block-size: ${t.circleSize};
+    border: 2px solid ${t.outlineColor};
+    border-radius: ${sys.radius.full};
+    display: grid;
+    place-items: center;
+    transition: border-color ${sys.duration.short2} ${sys.easing.standard};
+  }
+  .control[aria-checked="true"] { color: ${t.checkedColor}; }
+  .control[aria-checked="true"] .circle { border-color: ${t.checkedColor}; }
+  .dot {
+    inline-size: 10px;
+    block-size: 10px;
+    border-radius: ${sys.radius.full};
+    background: ${t.checkedColor};
+  }
+
+  .control:disabled { cursor: default; pointer-events: none; }
+  .control:disabled .circle {
+    border-color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+  }
+  .control:disabled .dot {
+    background: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+  }
+`;
+
+define('ui-radio', {
+  props: { value: '', checked: false, disabled: false, label: '' },
+  styles: [base, styles],
+  setup({ value, checked, disabled, label }, host) {
+    let btn = null;
+
+    // The group roves tabindex on the HOST; forward its focus to the button
+    // so keyboard interaction lands on the real control.
+    host.focus = (opts) => btn?.focus(opts);
+    host.addEventListener('focus', () => btn?.focus());
+
+    const onClick = () => {
+      if (disabled()) return;
+      host.emit('ui-radio-select', { value: value() });
+    };
+
+    return html`
+      <label class=${() => (disabled() ? 'disabled' : null)}>
+        <button part="control" class="control" type="button" role="radio"
+                tabindex="-1"
+                aria-checked=${() => String(checked())} ?disabled=${disabled}
+                aria-labelledby=${() => (label() ? 'label' : null)}
+                @click=${onClick}
+                ref=${(el) => { btn = el; ripple(el, { disabled, centered: true }); }}>
+          <span class="layer" aria-hidden="true"></span>
+          <span part="circle" class="circle" aria-hidden="true">
+            ${presence(checked, () => html`<span class="dot"></span>`, {
+              enter: fx.scaleIn,
+              exit: fx.scaleOut,
+              enterDuration: 'short4',
+              exitDuration: 'short2',
+            })}
+          </span>
+        </button>
+        ${() => (label() ? html`<span id="label">${label}</span>` : null)}
+      </label>`;
+  },
+});
+
+export const tag = 'ui-radio';
+export const themeVars = t;

package/src/components/ui-rating.js

@@ -0,0 +1,126 @@
+// <ui-rating> — a star rating.
+//
+// A11y choice: the whole rating is ONE control — role="slider" with
+// aria-valuenow/-min/-max and aria-valuetext, a single tab stop, and arrow
+// keys adjusting the value (Home=0, End=max). The stars themselves are
+// pointer affordances only (hover previews, click commits), so there is no
+// tab-stop-per-star noise for keyboard and screen-reader users.
+//
+// Clicking the star matching the current value clears the rating to 0
+// (MUI parity).
+//
+// @prop  {number}  value=0
+// @prop  {number}  max=5
+// @prop  {boolean} readonly=false — shows the value, no interaction
+// @prop  {boolean} disabled=false
+// @prop  {string}  label='Rating' — accessible name
+// @prop  {string}  size=''  — CSS length for the stars (overrides --ui-icon-size)
+// @event change — committed; detail: { value }
+// @part  root — the slider container
+// @vars  see `t` below (`themeVars.names`); the fill color defaults to primary
+
+import { define, html, css, vars, computed, signal } from '@alacris/core';
+import { sys } from '../tokens/sys.js';
+import { base, focusRingOn } from './base.js';
+import './ui-icon.js';
+
+const t = vars('ui-rating', {
+  activeFg: sys.color.primary,
+  emptyFg: sys.color.onSurfaceVariant,
+  gap: '2px',
+});
+
+const styles = css`
+  :host { display: inline-flex; vertical-align: middle; }
+  .root {
+    display: inline-flex;
+    align-items: center;
+    gap: ${t.gap};
+    border-radius: ${sys.radius.sm};
+    color: ${t.emptyFg};
+    cursor: pointer;
+  }
+  ${focusRingOn('.root')}
+  .root.readonly, .root.disabled { cursor: default; }
+  .root.disabled { pointer-events: none; }
+  .star {
+    display: inline-flex;
+    transition: color ${sys.duration.short2} ${sys.easing.standard},
+                scale ${sys.duration.short2} ${sys.easing.standard};
+  }
+  .star.filled { color: ${t.activeFg}; }
+  .root:not(.readonly):not(.disabled) .star:hover { scale: 1.15; }
+  .root.disabled .star,
+  .root.disabled .star.filled {
+    color: color-mix(in srgb, ${sys.color.onSurface} calc(${sys.state.disabledContent} * 100%), transparent);
+  }
+`;
+
+define('ui-rating', {
+  props: { value: 0, max: 5, readonly: false, disabled: false, label: 'Rating', size: '' },
+  styles: [base, styles],
+  setup({ value, max, readonly, disabled, label, size }, host) {
+    const hover = signal(0);
+    const shown = computed(() => (hover() > 0 ? hover() : value()));
+    const interactive = () => !readonly() && !disabled();
+
+    const set = (next) => {
+      if (next === value()) return;
+      value.set(next);
+      host.emit('change', { value: next });
+    };
+
+    const commit = (n) => {
+      if (!interactive()) return;
+      hover.set(0);
+      set(n === value() ? 0 : n);
+    };
+
+    const onKeydown = (e) => {
+      if (!interactive()) return;
+      let next;
+      switch (e.key) {
+        case 'ArrowRight': case 'ArrowUp': next = Math.min(max(), value() + 1); break;
+        case 'ArrowLeft': case 'ArrowDown': next = Math.max(0, value() - 1); break;
+        case 'Home': next = 0; break;
+        case 'End': next = max(); break;
+        default: return;
+      }
+      e.preventDefault();
+      set(next);
+    };
+
+    const cls = computed(() =>
+      ['root', readonly() && 'readonly', disabled() && 'disabled'].filter(Boolean).join(' '));
+
+    return html`
+      <div part="root" class=${cls} role="slider"
+           tabindex=${() => (disabled() ? null : '0')}
+           aria-label=${label}
+           aria-valuemin="0" aria-valuemax=${max} aria-valuenow=${value}
+           aria-valuetext=${() => `${value()} of ${max()} stars`}
+           aria-readonly=${() => (readonly() ? 'true' : null)}
+           aria-disabled=${() => (disabled() ? 'true' : null)}
+           style=${() => (size() ? { '--ui-icon-size': size() } : null)}
+           @keydown=${onKeydown}
+           @pointerleave=${() => hover.set(0)}>
+        ${() => {
+          const s = shown();
+          const m = Math.max(0, max());
+          const stars = [];
+          for (let n = 1; n <= m; n++) {
+            stars.push(html`
+              <span class="star ${s >= n ? 'filled' : ''}" aria-hidden="true"
+                    @click=${() => commit(n)}
+                    @pointerenter=${() => interactive() && hover.set(n)}>
+                <ui-icon name=${s >= n ? 'star' : 'star-border'}></ui-icon>
+              </span>`);
+          }
+          return stars;
+        }}
+      </div>`;
+  },
+});
+
+export const tag = 'ui-rating';
+export const themeVars = t;