@ultimat3/ui 1.0.0

package/src/components/Badge.module.scss

@@ -0,0 +1,94 @@
+@use '../tokens' as t;
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: t.space(1);
+  border: 1px solid transparent;
+  border-radius: t.radius(pill);
+  font-weight: t.weight(medium);
+  line-height: t.leading(tight);
+  white-space: nowrap;
+}
+
+.dot {
+  inline-size: 0.4rem;
+  block-size: 0.4rem;
+  border-radius: t.radius(full);
+  background: currentcolor;
+}
+
+.size-sm {
+  @include t.padding-inline(t.space(2));
+  padding-block: 0.0625rem;
+  font-size: t.text(xs);
+}
+
+.size-md {
+  @include t.padding-inline(t.space(3));
+  padding-block: t.space(1);
+  font-size: t.text(xs);
+}
+
+.size-lg {
+  @include t.padding-inline(t.space(4));
+  padding-block: t.space(1);
+  font-size: t.text(sm);
+}
+
+.tone-neutral {
+  --badge: #{t.role('fg-muted')};
+  --badge-soft: #{t.role('bg-soft')};
+  --badge-fg: #{t.role('fg-strong')};
+  --badge-on: #{t.role('bg')};
+}
+
+.tone-accent {
+  --badge: #{t.role('accent')};
+  --badge-soft: #{t.role('accent', 0.14)};
+  --badge-fg: #{t.role('accent-strong')};
+  --badge-on: #{t.role('accent-fg')};
+}
+
+.tone-success {
+  --badge: #{t.role('success')};
+  --badge-soft: #{t.role('success-soft')};
+  --badge-fg: #{t.role('success')};
+  --badge-on: #{t.role('success-fg')};
+}
+
+.tone-warning {
+  --badge: #{t.role('warning')};
+  --badge-soft: #{t.role('warning-soft')};
+  --badge-fg: #{t.role('warning')};
+  --badge-on: #{t.role('warning-fg')};
+}
+
+.tone-danger {
+  --badge: #{t.role('danger')};
+  --badge-soft: #{t.role('danger-soft')};
+  --badge-fg: #{t.role('danger')};
+  --badge-on: #{t.role('danger-fg')};
+}
+
+.tone-info {
+  --badge: #{t.role('info')};
+  --badge-soft: #{t.role('info-soft')};
+  --badge-fg: #{t.role('info')};
+  --badge-on: #{t.role('info-fg')};
+}
+
+.variant-soft {
+  background: var(--badge-soft);
+  color: var(--badge-fg);
+}
+
+.variant-solid {
+  background: var(--badge);
+  color: var(--badge-on);
+}
+
+.variant-outline {
+  border-color: var(--badge);
+  color: var(--badge-fg);
+}

package/src/components/Badge.tsx

@@ -0,0 +1,34 @@
+// Small status label. Tone maps straight onto the status colour roles so the
+// same component is legible on both themes with no per-theme override.
+
+import type { JSX } from 'solid-js';
+import { cx } from '../cx';
+import styles from './Badge.module.scss';
+import type { Size, Tone } from './variants';
+
+export interface BadgeProps {
+  children: JSX.Element;
+  tone?: Tone | undefined;
+  size?: Size | undefined;
+  variant?: 'soft' | 'solid' | 'outline' | undefined;
+  /** Renders a leading dot; pair with a tone that carries the meaning. */
+  dot?: boolean | undefined;
+  class?: string | undefined;
+}
+
+export function Badge(props: BadgeProps): JSX.Element {
+  return (
+    <span
+      class={cx(
+        styles['badge'],
+        styles[`tone-${props.tone ?? 'neutral'}`],
+        styles[`variant-${props.variant ?? 'soft'}`],
+        styles[`size-${props.size ?? 'md'}`],
+        props.class,
+      )}
+    >
+      {props.dot === true ? <span aria-hidden="true" class={styles['dot']} /> : null}
+      {props.children}
+    </span>
+  );
+}

package/src/components/Breadcrumb.module.scss

@@ -0,0 +1,45 @@
+@use '../tokens' as t;
+
+.breadcrumb {
+  font-size: t.text(sm);
+}
+
+.list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: t.space(2);
+  list-style: none;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: t.space(2);
+
+  // The chevron is generated content, so it is never read out and it mirrors
+  // with the writing direction.
+  &:not(:first-child)::before {
+    color: t.role('fg-muted');
+    content: '/';
+  }
+}
+
+.link {
+  @include t.focus-ring;
+  border-radius: t.radius(sm);
+  color: t.role('fg-muted');
+  text-decoration: none;
+
+  &:hover {
+    color: t.role('accent');
+    text-decoration: underline;
+  }
+}
+
+.current {
+  @include t.truncate;
+  max-inline-size: 20rem;
+  color: t.role('fg-strong');
+  font-weight: t.weight(medium);
+}

package/src/components/Breadcrumb.tsx

@@ -0,0 +1,48 @@
+// Ancestor trail. The last item is the current page: rendered as text, never a
+// link, and marked `aria-current="page"`. Separators are decorative CSS.
+
+import type { JSX } from 'solid-js';
+import { cx } from '../cx';
+import { UI_KEYS } from '../i18n-keys';
+import { useUi } from '../theme/context';
+import styles from './Breadcrumb.module.scss';
+
+export interface BreadcrumbItem {
+  /** Already-translated label. */
+  label: string;
+  /** Omit on the final item — the current page is not a link. */
+  href?: string | undefined;
+}
+
+export interface BreadcrumbProps {
+  items: readonly BreadcrumbItem[];
+  /** Overrides the translated `ui.breadcrumb` landmark name. */
+  label?: string | undefined;
+  class?: string | undefined;
+}
+
+export function Breadcrumb(props: BreadcrumbProps): JSX.Element {
+  const ui = useUi();
+  return (
+    <nav
+      class={cx(styles['breadcrumb'], props.class)}
+      aria-label={props.label ?? ui.t(UI_KEYS.breadcrumb)}
+    >
+      <ol class={styles['list']}>
+        {props.items.map((item, index) => (
+          <li class={styles['item']}>
+            {item.href === undefined || index === props.items.length - 1 ? (
+              <span class={styles['current']} aria-current="page">
+                {item.label}
+              </span>
+            ) : (
+              <a class={styles['link']} href={item.href}>
+                {item.label}
+              </a>
+            )}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}

package/src/components/Button.module.scss

@@ -0,0 +1,146 @@
+@use '../tokens' as t;
+
+.button {
+  @include t.focus-ring;
+  @include t.transition(background, border-color, color, box-shadow, transform);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: t.space(2);
+  border: 1px solid transparent;
+  border-radius: t.radius(md);
+  font-weight: t.weight(semibold);
+  line-height: t.leading(tight);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:active:not(:disabled) {
+    transform: translateY(1px);
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    opacity: 0.55;
+    cursor: not-allowed;
+  }
+}
+
+.full {
+  inline-size: 100%;
+}
+
+.label {
+  @include t.truncate;
+}
+
+.spinner {
+  display: inline-flex;
+}
+
+// --- sizes -------------------------------------------------------------------
+
+.size-sm {
+  @include t.padding-inline(t.space(3));
+  padding-block: t.space(1);
+  font-size: t.text(sm);
+}
+
+.size-md {
+  @include t.padding-inline(t.space(4));
+  padding-block: t.space(2);
+  font-size: t.text(md);
+}
+
+.size-lg {
+  @include t.padding-inline(t.space(6));
+  padding-block: t.space(3);
+  font-size: t.text(lg);
+}
+
+// --- variants x tones --------------------------------------------------------
+// `--tone-*` is set by the tone class, so each variant is written once.
+
+.tone-neutral {
+  --tone: #{t.role('fg-strong')};
+  --tone-strong: #{t.role('fg')};
+  --tone-fg: #{t.role('bg')};
+  --tone-soft: #{t.role('bg-soft')};
+}
+
+.tone-accent {
+  --tone: #{t.role('accent')};
+  --tone-strong: #{t.role('accent-strong')};
+  --tone-fg: #{t.role('accent-fg')};
+  --tone-soft: #{t.role('accent', 0.12)};
+}
+
+.tone-success {
+  --tone: #{t.role('success')};
+  --tone-strong: #{t.role('success')};
+  --tone-fg: #{t.role('success-fg')};
+  --tone-soft: #{t.role('success-soft')};
+}
+
+.tone-warning {
+  --tone: #{t.role('warning')};
+  --tone-strong: #{t.role('warning')};
+  --tone-fg: #{t.role('warning-fg')};
+  --tone-soft: #{t.role('warning-soft')};
+}
+
+.tone-danger {
+  --tone: #{t.role('danger')};
+  --tone-strong: #{t.role('danger')};
+  --tone-fg: #{t.role('danger-fg')};
+  --tone-soft: #{t.role('danger-soft')};
+}
+
+.tone-info {
+  --tone: #{t.role('info')};
+  --tone-strong: #{t.role('info')};
+  --tone-fg: #{t.role('info-fg')};
+  --tone-soft: #{t.role('info-soft')};
+}
+
+.variant-primary {
+  background: var(--tone);
+  color: var(--tone-fg);
+
+  &:hover:not(:disabled, [aria-disabled='true']) {
+    background: var(--tone-strong);
+  }
+}
+
+.variant-secondary {
+  border-color: t.role('line');
+  background: t.role('surface-raised');
+  color: t.role('fg-strong');
+
+  &:hover:not(:disabled, [aria-disabled='true']) {
+    border-color: var(--tone);
+    background: var(--tone-soft);
+    color: var(--tone);
+  }
+}
+
+.variant-ghost {
+  background: transparent;
+  color: var(--tone);
+
+  &:hover:not(:disabled, [aria-disabled='true']) {
+    background: var(--tone-soft);
+  }
+}
+
+.variant-link {
+  @include t.padding-inline(0);
+  background: transparent;
+  color: var(--tone);
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+
+  &:hover:not(:disabled, [aria-disabled='true']) {
+    color: var(--tone-strong);
+  }
+}

package/src/components/Button.tsx

@@ -0,0 +1,66 @@
+// The one button. Variants and tones are token-driven, so dark mode and RTL
+// need no extra rules; `loading` keeps the label mounted to avoid a layout jump.
+
+import type { JSX } from 'solid-js';
+import { ariaBool } from '../a11y';
+import { cx } from '../cx';
+import styles from './Button.module.scss';
+import { Spinner } from './Spinner';
+import type { ButtonVariant, Size, Tone } from './variants';
+
+export interface ButtonProps {
+  /** Visible label. Never hardcoded inside the component. */
+  children: JSX.Element;
+  variant?: ButtonVariant | undefined;
+  tone?: Tone | undefined;
+  size?: Size | undefined;
+  type?: 'button' | 'submit' | 'reset' | undefined;
+  disabled?: boolean | undefined;
+  /** Blocks interaction and announces progress via `aria-busy`. */
+  loading?: boolean | undefined;
+  fullWidth?: boolean | undefined;
+  iconStart?: JSX.Element | undefined;
+  iconEnd?: JSX.Element | undefined;
+  id?: string | undefined;
+  class?: string | undefined;
+  'aria-label'?: string | undefined;
+  'aria-controls'?: string | undefined;
+  'aria-expanded'?: boolean | undefined;
+  onClick?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> | undefined;
+}
+
+export function Button(props: ButtonProps): JSX.Element {
+  const inert = (): boolean => props.disabled === true || props.loading === true;
+
+  return (
+    <button
+      id={props.id}
+      type={props.type ?? 'button'}
+      class={cx(
+        styles['button'],
+        styles[`variant-${props.variant ?? 'primary'}`],
+        styles[`tone-${props.tone ?? 'accent'}`],
+        styles[`size-${props.size ?? 'md'}`],
+        props.fullWidth === true && styles['full'],
+        props.class,
+      )}
+      disabled={inert()}
+      aria-disabled={ariaBool(inert())}
+      aria-busy={ariaBool(props.loading === true)}
+      aria-label={props['aria-label']}
+      aria-controls={props['aria-controls']}
+      aria-expanded={ariaBool(props['aria-expanded'])}
+      onClick={props.onClick}
+    >
+      {props.loading === true ? (
+        <span class={styles['spinner']}>
+          <Spinner size="sm" />
+        </span>
+      ) : (
+        props.iconStart
+      )}
+      <span class={styles['label']}>{props.children}</span>
+      {props.iconEnd}
+    </button>
+  );
+}

package/src/components/Card.module.scss

@@ -0,0 +1,69 @@
+@use '../tokens' as t;
+
+.card {
+  @include t.container(card);
+  @include t.transition(box-shadow, border-color, transform);
+  display: flex;
+  flex-direction: column;
+  border: 1px solid t.role('line');
+  border-radius: t.radius(lg);
+  background: t.role('surface');
+  color: t.role('fg');
+  overflow: clip;
+}
+
+.interactive {
+  cursor: pointer;
+
+  &:hover {
+    border-color: t.role('accent', 0.4);
+    transform: translateY(-2px);
+    box-shadow: t.shadow(md);
+  }
+
+  &:focus-within {
+    border-color: t.role('accent');
+  }
+}
+
+.header,
+.footer {
+  @include t.padding-inline(var(--card-padding));
+  padding-block: t.space(3);
+  background: t.role('bg-soft');
+}
+
+.header {
+  border-block-end: 1px solid t.role('line');
+  color: t.role('fg-strong');
+  font-weight: t.weight(semibold);
+}
+
+.footer {
+  border-block-start: 1px solid t.role('line');
+}
+
+.body {
+  padding: var(--card-padding, #{t.space(5)});
+  flex: 1;
+}
+
+.elevation-flat {
+  box-shadow: none;
+}
+
+.elevation-xs {
+  box-shadow: t.shadow(xs);
+}
+
+.elevation-sm {
+  box-shadow: t.shadow(sm);
+}
+
+.elevation-md {
+  box-shadow: t.shadow(md);
+}
+
+.elevation-lg {
+  box-shadow: t.shadow(lg);
+}

package/src/components/Card.tsx

@@ -0,0 +1,40 @@
+// Surface container. Elevation is a token rung, and because the shadow tokens
+// are themed the same `elevation` reads correctly on light and dark.
+
+import type { JSX } from 'solid-js';
+import { cx } from '../cx';
+import styles from './Card.module.scss';
+import type { SpaceStep } from './variants';
+
+export type Elevation = 'flat' | 'xs' | 'sm' | 'md' | 'lg';
+
+export interface CardProps {
+  children: JSX.Element;
+  header?: JSX.Element | undefined;
+  footer?: JSX.Element | undefined;
+  elevation?: Elevation | undefined;
+  padding?: SpaceStep | undefined;
+  /** Adds hover affordance. Only use when the whole card is a link/button. */
+  interactive?: boolean | undefined;
+  as?: 'div' | 'article' | 'section' | 'li' | undefined;
+  class?: string | undefined;
+}
+
+export function Card(props: CardProps): JSX.Element {
+  const Tag = props.as ?? 'div';
+  return (
+    <Tag
+      class={cx(
+        styles['card'],
+        styles[`elevation-${props.elevation ?? 'sm'}`],
+        props.interactive === true && styles['interactive'],
+        props.class,
+      )}
+      style={{ '--card-padding': `var(--space-${props.padding ?? 5})` }}
+    >
+      {props.header === undefined ? null : <div class={styles['header']}>{props.header}</div>}
+      <div class={styles['body']}>{props.children}</div>
+      {props.footer === undefined ? null : <div class={styles['footer']}>{props.footer}</div>}
+    </Tag>
+  );
+}

package/src/components/Checkbox.module.scss

@@ -0,0 +1,90 @@
+@use '../tokens' as t;
+
+.row {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: t.space(2);
+  cursor: pointer;
+
+  &:has(:disabled) {
+    color: t.role('fg-muted');
+    cursor: not-allowed;
+  }
+}
+
+// The real control stays in the a11y tree and drives the visual box via :checked.
+.input {
+  @include t.visually-hidden;
+}
+
+.box {
+  @include t.transition(background, border-color, box-shadow);
+  position: relative;
+  flex: none;
+  inline-size: 1.05rem;
+  block-size: 1.05rem;
+  margin-block-start: 0.15rem;
+  border: 1px solid t.role('line');
+  border-radius: t.radius(sm);
+  background: t.role('surface-raised');
+
+  &::after {
+    position: absolute;
+    inset-inline-start: 0.28rem;
+    inset-block-start: 0.1rem;
+    inline-size: 0.3rem;
+    block-size: 0.55rem;
+    border-inline-end: 2px solid t.role('accent-fg');
+    border-block-end: 2px solid t.role('accent-fg');
+    transform: rotate(40deg) scale(0);
+    transform-origin: center;
+    content: '';
+  }
+}
+
+.input:checked + .box {
+  border-color: t.role('accent');
+  background: t.role('accent');
+
+  &::after {
+    transform: rotate(40deg) scale(1);
+  }
+}
+
+.box[data-mixed='true'] {
+  border-color: t.role('accent');
+  background: t.role('accent');
+
+  &::after {
+    inset-inline-start: 0.2rem;
+    inset-block-start: 0.42rem;
+    inline-size: 0.55rem;
+    block-size: 0;
+    border-inline-end: 0;
+    transform: none;
+  }
+}
+
+.input:focus-visible + .box {
+  outline: 2px solid t.role('accent');
+  outline-offset: 2px;
+}
+
+.input[aria-invalid='true'] + .box {
+  border-color: t.role('danger');
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.1rem;
+}
+
+.label {
+  font-size: t.text(sm);
+}
+
+.description {
+  color: t.role('fg-muted');
+  font-size: t.text(xs);
+}

package/src/components/Checkbox.tsx

@@ -0,0 +1,57 @@
+// Native checkbox with a token-drawn indicator. The label element wraps the
+// input, so the whole row is a hit target without a manual `for`/`id` pairing.
+
+import type { JSX } from 'solid-js';
+import { ariaBool } from '../a11y';
+import { cx } from '../cx';
+import styles from './Checkbox.module.scss';
+
+export interface CheckboxProps {
+  /** Already-translated label. Required — an unlabelled checkbox is a bug. */
+  label: string;
+  id?: string | undefined;
+  name?: string | undefined;
+  value?: string | undefined;
+  checked?: boolean | undefined;
+  /** Tri-state for "some children selected". Mirrored to `aria-checked`. */
+  indeterminate?: boolean | undefined;
+  disabled?: boolean | undefined;
+  required?: boolean | undefined;
+  description?: string | undefined;
+  class?: string | undefined;
+  'aria-describedby'?: string | undefined;
+  'aria-invalid'?: boolean | undefined;
+  onChange?: JSX.EventHandlerUnion<HTMLInputElement, Event> | undefined;
+}
+
+export function Checkbox(props: CheckboxProps): JSX.Element {
+  return (
+    <label class={cx(styles['row'], props.class)}>
+      <input
+        class={styles['input']}
+        type="checkbox"
+        id={props.id}
+        name={props.name}
+        value={props.value}
+        checked={props.checked === true}
+        disabled={props.disabled === true}
+        required={props.required === true}
+        aria-checked={props.indeterminate === true ? 'mixed' : ariaBool(props.checked === true)}
+        aria-describedby={props['aria-describedby']}
+        aria-invalid={ariaBool(props['aria-invalid'])}
+        onChange={props.onChange}
+      />
+      <span
+        aria-hidden="true"
+        class={styles['box']}
+        data-mixed={props.indeterminate === true ? 'true' : undefined}
+      />
+      <span class={styles['text']}>
+        <span class={styles['label']}>{props.label}</span>
+        {props.description === undefined ? null : (
+          <span class={styles['description']}>{props.description}</span>
+        )}
+      </span>
+    </label>
+  );
+}