@happyvertical/smrt-ui 0.30.0

package/dist/components/ui/Dropdown.svelte

@@ -0,0 +1,250 @@
+<script module lang="ts">
+let menuIdCounter = 0;
+</script>
+
+<script lang="ts">
+/**
+ * Dropdown / Menu — a trigger button and a positioned menu list.
+ *
+ * Implements the WAI-ARIA menu-button pattern: trigger has
+ * `aria-haspopup="menu"` + `aria-expanded`; the list is `role="menu"` with
+ * `role="menuitem"` buttons under roving focus (ArrowUp/Down/Home/End), Enter/
+ * Space to activate, Escape to close + refocus the trigger, and click-outside to
+ * dismiss. CSS-anchored via `placement` — no JS positioning dependency.
+ */
+import { tick } from 'svelte';
+import type { Snippet } from 'svelte';
+import type { DropdownPlacement, MenuItem } from '../../types-generic';
+
+export interface Props {
+  /** Trigger button text (ignored when a `trigger` snippet is given). */
+  label?: string;
+  /** Custom trigger content. */
+  trigger?: Snippet;
+  /** Menu items. */
+  items: MenuItem[];
+  /** Menu placement relative to the trigger. */
+  placement?: DropdownPlacement;
+  /** Fired with the activated item's id. */
+  onselect?: (id: string) => void;
+  /** Disable the trigger. */
+  disabled?: boolean;
+}
+
+const {
+  label,
+  trigger,
+  items,
+  placement = 'bottom-start',
+  onselect,
+  disabled = false,
+}: Props = $props();
+
+const menuId = `smrt-menu-${(menuIdCounter += 1)}`;
+let open = $state(false);
+let wrapEl = $state<HTMLElement | null>(null);
+let triggerEl = $state<HTMLButtonElement | null>(null);
+let itemEls = $state<Array<HTMLButtonElement | null>>([]);
+
+const enabledIndexes = $derived(
+  items.map((it, i) => (it.disabled ? -1 : i)).filter((i) => i >= 0),
+);
+
+async function openMenu(focusLast = false) {
+  open = true;
+  await tick();
+  const target = focusLast
+    ? enabledIndexes[enabledIndexes.length - 1]
+    : enabledIndexes[0];
+  if (target != null) itemEls[target]?.focus();
+}
+
+function closeMenu(refocus = true) {
+  open = false;
+  if (refocus) triggerEl?.focus();
+}
+
+function selectItem(item: MenuItem) {
+  if (item.disabled) return;
+  item.onselect?.();
+  onselect?.(item.id);
+  closeMenu();
+}
+
+function onTriggerKeydown(event: KeyboardEvent) {
+  if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {
+    event.preventDefault();
+    openMenu();
+  } else if (event.key === 'ArrowUp') {
+    event.preventDefault();
+    openMenu(true);
+  }
+}
+
+function focusByOffset(offset: number) {
+  const order = enabledIndexes;
+  if (order.length === 0) return;
+  const current = itemEls.findIndex((el) => el === document.activeElement);
+  const pos = order.indexOf(current);
+  const next = order[(pos + offset + order.length) % order.length];
+  itemEls[next]?.focus();
+}
+
+function onMenuKeydown(event: KeyboardEvent) {
+  switch (event.key) {
+    case 'ArrowDown':
+      event.preventDefault();
+      focusByOffset(1);
+      break;
+    case 'ArrowUp':
+      event.preventDefault();
+      focusByOffset(-1);
+      break;
+    case 'Home':
+      event.preventDefault();
+      itemEls[enabledIndexes[0]]?.focus();
+      break;
+    case 'End':
+      event.preventDefault();
+      itemEls[enabledIndexes[enabledIndexes.length - 1]]?.focus();
+      break;
+    case 'Escape':
+      event.preventDefault();
+      closeMenu();
+      break;
+    case 'Tab':
+      closeMenu(false);
+      break;
+  }
+}
+
+// Dismiss on outside click while open.
+$effect(() => {
+  if (!open) return;
+  const onDocPointer = (event: MouseEvent) => {
+    if (wrapEl && !wrapEl.contains(event.target as Node)) closeMenu(false);
+  };
+  document.addEventListener('click', onDocPointer, true);
+  return () => document.removeEventListener('click', onDocPointer, true);
+});
+</script>
+
+<span class="dropdown" bind:this={wrapEl}>
+  <button
+    bind:this={triggerEl}
+    type="button"
+    class="dropdown__trigger"
+    aria-haspopup="menu"
+    aria-expanded={open}
+    aria-controls={open ? menuId : undefined}
+    {disabled}
+    onclick={() => (open ? closeMenu(false) : openMenu())}
+    onkeydown={onTriggerKeydown}
+  >
+    {#if trigger}{@render trigger()}{:else}{label}{/if}
+  </button>
+
+  {#if open}
+    <div
+      id={menuId}
+      role="menu"
+      tabindex={-1}
+      class="dropdown__menu dropdown__menu--{placement}"
+      onkeydown={onMenuKeydown}
+    >
+      {#each items as item, i (item.id)}
+        <button
+          bind:this={itemEls[i]}
+          type="button"
+          role="menuitem"
+          class="dropdown__item"
+          disabled={item.disabled}
+          tabindex={-1}
+          onclick={() => selectItem(item)}
+        >
+          {item.label}
+        </button>
+      {/each}
+    </div>
+  {/if}
+</span>
+
+<style>
+  .dropdown {
+    position: relative;
+    display: inline-flex;
+  }
+
+  .dropdown__trigger {
+    appearance: none;
+    font: inherit;
+    cursor: pointer;
+    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    border-radius: var(--smrt-radius-medium, 8px);
+    border: 1px solid var(--smrt-color-outline-variant, #cac4d0);
+    background: var(--smrt-color-surface);
+    color: var(--smrt-color-on-surface);
+  }
+  .dropdown__trigger:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: 2px;
+  }
+  .dropdown__trigger:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .dropdown__menu {
+    position: absolute;
+    z-index: var(--smrt-z-index-dropdown, 1000);
+    min-width: 10rem;
+    margin: var(--smrt-spacing-1, 4px) 0;
+    padding: var(--smrt-spacing-1, 4px);
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-1, 4px);
+    border-radius: var(--smrt-radius-medium, 8px);
+    background: var(--smrt-color-surface-container, #f3edf7);
+    border: 1px solid var(--smrt-color-outline-variant, #cac4d0);
+    box-shadow: var(--smrt-elevation-2, 0 2px 6px rgba(0, 0, 0, 0.15));
+  }
+
+  .dropdown__menu--bottom-start {
+    top: 100%;
+    left: 0;
+  }
+  .dropdown__menu--bottom-end {
+    top: 100%;
+    right: 0;
+  }
+  .dropdown__menu--top-start {
+    bottom: 100%;
+    left: 0;
+  }
+  .dropdown__menu--top-end {
+    bottom: 100%;
+    right: 0;
+  }
+
+  .dropdown__item {
+    appearance: none;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+    padding: var(--smrt-spacing-2, 8px) var(--smrt-spacing-3, 12px);
+    border: none;
+    border-radius: var(--smrt-radius-small, 4px);
+    background: none;
+    color: var(--smrt-color-on-surface);
+    white-space: nowrap;
+  }
+  .dropdown__item:hover:not(:disabled),
+  .dropdown__item:focus-visible {
+    background: var(--smrt-color-surface-container-high);
+    outline: none;
+  }
+  .dropdown__item:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+</style>

package/dist/components/ui/Dropdown.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { Snippet } from 'svelte';
+import type { DropdownPlacement, MenuItem } from '../../types-generic';
+export interface Props {
+    /** Trigger button text (ignored when a `trigger` snippet is given). */
+    label?: string;
+    /** Custom trigger content. */
+    trigger?: Snippet;
+    /** Menu items. */
+    items: MenuItem[];
+    /** Menu placement relative to the trigger. */
+    placement?: DropdownPlacement;
+    /** Fired with the activated item's id. */
+    onselect?: (id: string) => void;
+    /** Disable the trigger. */
+    disabled?: boolean;
+}
+declare const Dropdown: import("svelte").Component<Props, {}, "">;
+type Dropdown = ReturnType<typeof Dropdown>;
+export default Dropdown;
+//# sourceMappingURL=Dropdown.svelte.d.ts.map

package/dist/components/ui/Dropdown.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Dropdown.svelte.ts"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAGvE,MAAM,WAAW,KAAK;IACpB,uEAAuE;IACvE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kBAAkB;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAgID,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/ui/Pagination.svelte

@@ -0,0 +1,294 @@
+<script lang="ts">
+/**
+ * Pagination - Page navigation component
+ *
+ * Provides page navigation with first/prev/next/last controls.
+ * Supports both link-based (SSR) and callback-based (client-side) modes.
+ *
+ * Accessibility:
+ * - Proper ARIA labels on all controls
+ * - aria-current marks current page
+ * - Native list semantics for numbered pages
+ */
+
+import { M } from '../../i18n/strings.ui.js';
+import { useI18n } from '../../i18n/use-i18n.js';
+
+const { t } = useI18n();
+
+/** Props for Pagination component */
+export interface Props {
+  /** Current active page (1-based) */
+  currentPage: number;
+  /** Total number of pages */
+  totalPages: number;
+  /** Base URL for link mode (e.g., '/articles') */
+  baseUrl?: string;
+  /** When provided, renders buttons instead of links and calls this on page change */
+  onPageChange?: (page: number) => void;
+  /** Accessible label for pagination nav */
+  'aria-label'?: string;
+  /** Show first/last page buttons */
+  showFirstLast?: boolean;
+  /** Maximum number of visible page numbers */
+  maxVisible?: number;
+}
+
+const {
+  currentPage,
+  totalPages,
+  baseUrl = '/articles',
+  onPageChange,
+  'aria-label': ariaLabel = 'Pagination',
+  showFirstLast = true,
+  maxVisible = 5,
+}: Props = $props();
+
+function getPageUrl(page: number): string {
+  if (page === 1) return baseUrl || '/';
+  return `${baseUrl}/page/${page}`;
+}
+
+// Generate array of page numbers to display
+function getPageNumbers(): (number | 'ellipsis')[] {
+  const pages: (number | 'ellipsis')[] = [];
+
+  if (totalPages <= maxVisible + 2) {
+    // Show all pages if there aren't many
+    for (let i = 1; i <= totalPages; i++) {
+      pages.push(i);
+    }
+  } else {
+    // Always show first page
+    pages.push(1);
+
+    // Calculate range around current page
+    let start = Math.max(2, currentPage - 1);
+    let end = Math.min(totalPages - 1, currentPage + 1);
+
+    // Adjust if at the start
+    if (currentPage <= 3) {
+      end = Math.min(totalPages - 1, maxVisible - 1);
+    }
+
+    // Adjust if at the end
+    if (currentPage >= totalPages - 2) {
+      start = Math.max(2, totalPages - maxVisible + 2);
+    }
+
+    // Add ellipsis before middle section if needed
+    if (start > 2) {
+      pages.push('ellipsis');
+    }
+
+    // Add middle pages
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+
+    // Add ellipsis after middle section if needed
+    if (end < totalPages - 1) {
+      pages.push('ellipsis');
+    }
+
+    // Always show last page
+    pages.push(totalPages);
+  }
+
+  return pages;
+}
+
+const pageNumbers = $derived(getPageNumbers());
+const hasPrevPage = $derived(currentPage > 1);
+const hasNextPage = $derived(currentPage < totalPages);
+const isFirstPage = $derived(currentPage === 1);
+const isLastPage = $derived(currentPage === totalPages);
+</script>
+
+{#if totalPages > 1}
+  <nav class="pagination" aria-label={ariaLabel}>
+    <!-- First page -->
+    {#if showFirstLast}
+      {#if onPageChange}
+        <button class="page-link nav-link first" type="button" disabled={isFirstPage} onclick={() => onPageChange(1)} aria-label={t(M['ui.pagination.first_page'])}>
+          &laquo; First
+        </button>
+      {:else if !isFirstPage}
+        <a href={getPageUrl(1)} class="page-link nav-link first" aria-label={t(M['ui.pagination.first_page'])}>
+          &laquo; First
+        </a>
+      {:else}
+        <span class="page-link nav-link disabled first" aria-hidden="true">&laquo; First</span>
+      {/if}
+    {/if}
+
+    <!-- Previous page -->
+    {#if onPageChange}
+      <button class="page-link nav-link" type="button" disabled={!hasPrevPage} onclick={() => onPageChange(currentPage - 1)} aria-label={t(M['ui.pagination.previous_page'])}>
+        &larr; Prev
+      </button>
+    {:else if hasPrevPage}
+      <a href={getPageUrl(currentPage - 1)} class="page-link nav-link" aria-label={t(M['ui.pagination.previous_page'])}>
+        &larr; Prev
+      </a>
+    {:else}
+      <span class="page-link nav-link disabled" aria-hidden="true">&larr; Prev</span>
+    {/if}
+
+    <ul class="page-numbers">
+      {#each pageNumbers as page}
+        {#if page === 'ellipsis'}
+          <li class="page-numbers__item">
+            <span class="ellipsis" aria-hidden="true">&hellip;</span>
+          </li>
+        {:else if page === currentPage}
+          <li class="page-numbers__item">
+            <span class="page-link current" aria-current="page" aria-label={t(M['ui.pagination.page_current'], { page })}>{page}</span>
+          </li>
+        {:else if onPageChange}
+          <li class="page-numbers__item">
+            <button class="page-link" type="button" onclick={() => onPageChange(page as number)} aria-label={t(M['ui.pagination.go_to_page'], { page })}>{page}</button>
+          </li>
+        {:else}
+          <li class="page-numbers__item">
+            <a href={getPageUrl(page)} class="page-link" aria-label={t(M['ui.pagination.go_to_page'], { page })}>{page}</a>
+          </li>
+        {/if}
+      {/each}
+    </ul>
+
+    <!-- Next page -->
+    {#if onPageChange}
+      <button class="page-link nav-link" type="button" disabled={!hasNextPage} onclick={() => onPageChange(currentPage + 1)} aria-label={t(M['ui.pagination.next_page'])}>
+        Next &rarr;
+      </button>
+    {:else if hasNextPage}
+      <a href={getPageUrl(currentPage + 1)} class="page-link nav-link" aria-label={t(M['ui.pagination.next_page'])}>
+        Next &rarr;
+      </a>
+    {:else}
+      <span class="page-link nav-link disabled" aria-hidden="true">Next &rarr;</span>
+    {/if}
+
+    <!-- Last page -->
+    {#if showFirstLast}
+      {#if onPageChange}
+        <button class="page-link nav-link last" type="button" disabled={isLastPage} onclick={() => onPageChange(totalPages)} aria-label={t(M['ui.pagination.last_page'], { totalPages })}>
+          Last &raquo;
+        </button>
+      {:else if !isLastPage}
+        <a href={getPageUrl(totalPages)} class="page-link nav-link last" aria-label={t(M['ui.pagination.last_page'], { totalPages })}>
+          Last &raquo;
+        </a>
+      {:else}
+        <span class="page-link nav-link disabled last" aria-hidden="true">Last &raquo;</span>
+      {/if}
+    {/if}
+  </nav>
+{/if}
+
+<style>
+  .pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 0.5rem);
+    margin-top: var(--smrt-spacing-8, 2rem);
+    padding: var(--smrt-spacing-4, 1rem) 0;
+    flex-wrap: wrap;
+  }
+
+  .page-numbers {
+    list-style: none;
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-1, 0.25rem);
+    margin: 0;
+    padding: 0;
+  }
+
+  .page-numbers__item {
+    margin: 0;
+    padding: 0;
+  }
+
+  .page-link {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    padding: 0 var(--smrt-spacing-2, 0.5rem);
+    border-radius: var(--smrt-radius-small, 0.25rem);
+    font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    text-decoration: none;
+    transition: background-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease), color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+  }
+
+  .page-link:not(.current):not(.disabled) {
+    background: var(--smrt-color-surface-container-high, #f3f4f6);
+    color: var(--smrt-color-on-surface, #374151);
+  }
+
+  .page-link:not(.current):not(.disabled):hover {
+    background: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-on-primary, white);
+  }
+
+  .page-link.current {
+    background: var(--smrt-color-primary, #005ac1);
+    color: white;
+    cursor: default;
+  }
+
+  .page-link.disabled,
+  .page-link:disabled {
+    background: var(--smrt-color-surface-container-high, #f3f4f6);
+    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    cursor: not-allowed;
+  }
+
+  button.page-link {
+    border: none;
+    font: inherit;
+    cursor: pointer;
+  }
+
+  .nav-link {
+    padding: 0 var(--smrt-spacing-4, 1rem);
+  }
+
+  .nav-link.first,
+  .nav-link.last {
+    display: none;
+  }
+
+  @media (min-width: 640px) {
+    .nav-link.first,
+    .nav-link.last {
+      display: inline-flex;
+    }
+  }
+
+  .ellipsis {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 2.25rem;
+    height: 2.25rem;
+    color: var(--smrt-color-on-surface-variant, #6b7280);
+  }
+
+  @media (max-width: 480px) {
+    .page-link {
+      min-width: 2rem;
+      height: 2rem;
+      font-size: var(--smrt-typography-body-medium-size, 0.8125rem);
+    }
+
+    .nav-link {
+      padding: 0 var(--smrt-spacing-2, 0.5rem);
+    }
+  }
+</style>

package/dist/components/ui/Pagination.svelte.d.ts

@@ -0,0 +1,21 @@
+/** Props for Pagination component */
+export interface Props {
+    /** Current active page (1-based) */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Base URL for link mode (e.g., '/articles') */
+    baseUrl?: string;
+    /** When provided, renders buttons instead of links and calls this on page change */
+    onPageChange?: (page: number) => void;
+    /** Accessible label for pagination nav */
+    'aria-label'?: string;
+    /** Show first/last page buttons */
+    showFirstLast?: boolean;
+    /** Maximum number of visible page numbers */
+    maxVisible?: number;
+}
+declare const Pagination: import("svelte").Component<Props, {}, "">;
+type Pagination = ReturnType<typeof Pagination>;
+export default Pagination;
+//# sourceMappingURL=Pagination.svelte.d.ts.map

package/dist/components/ui/Pagination.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/ui/Pagination.svelte.ts"],"names":[],"mappings":"AAkBA,qCAAqC;AACrC,MAAM,WAAW,KAAK;IACpB,oCAAoC;IACpC,WAAW,EAAE,MAAM,CAAC;IACpB,4BAA4B;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,oFAAoF;IACpF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,0CAA0C;IAC1C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mCAAmC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,6CAA6C;IAC7C,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAuKD,QAAA,MAAM,UAAU,2CAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/components/ui/Skeleton.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+/**
+ * Skeleton — shape-matching loading placeholder.
+ *
+ * Variants: `text` (one or more lines), `circle`, `rect`. The wrapper is a
+ * polite `role="status"` region with an sr-only label so assistive tech
+ * announces that content is loading; the shimmer honors `prefers-reduced-motion`.
+ */
+export type SkeletonVariant = 'text' | 'circle' | 'rect';
+
+export interface Props {
+  /** Placeholder shape. */
+  variant?: SkeletonVariant;
+  /** CSS width (e.g. '100%', '8rem'). */
+  width?: string;
+  /** CSS height (e.g. '1rem', '48px'). */
+  height?: string;
+  /** Number of lines for the `text` variant. */
+  lines?: number;
+  /** Accessible loading label. */
+  label?: string;
+}
+
+const {
+  variant = 'text',
+  width,
+  height,
+  lines = 1,
+  label = 'Loading…',
+}: Props = $props();
+
+const lineIndexes = $derived(
+  variant === 'text'
+    ? Array.from({ length: Math.max(1, lines) }, (_, i) => i)
+    : [0],
+);
+</script>
+
+<span class="skeleton-wrap" role="status" aria-label={label}>
+  {#if variant === 'text'}
+    {#each lineIndexes as i (i)}
+      <span
+        class="skeleton skeleton--text"
+        style:width={width}
+        style:height={height}
+        aria-hidden="true"
+      ></span>
+    {/each}
+  {:else}
+    <span
+      class="skeleton skeleton--{variant}"
+      style:width={width}
+      style:height={height}
+      aria-hidden="true"
+    ></span>
+  {/if}
+</span>
+
+<style>
+  .skeleton-wrap {
+    display: inline-flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-2, 8px);
+    width: 100%;
+  }
+
+  .skeleton {
+    display: block;
+    background: var(--smrt-color-surface-container-highest, #e7e0ec);
+    background-image: linear-gradient(
+      90deg,
+      transparent 0%,
+      color-mix(in srgb, var(--smrt-color-surface) 60%, transparent) 50%,
+      transparent 100%
+    );
+    background-size: 200% 100%;
+    animation: smrt-skeleton-shimmer 1.4s ease-in-out infinite;
+    border-radius: var(--smrt-radius-small, 4px);
+  }
+
+  .skeleton--text {
+    width: 100%;
+    height: var(--smrt-typography-body-medium-size, 1rem);
+    border-radius: var(--smrt-radius-extra-small, 4px);
+  }
+
+  .skeleton--circle {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--smrt-radius-full, 9999px);
+  }
+
+  .skeleton--rect {
+    width: 100%;
+    height: 96px;
+    border-radius: var(--smrt-radius-medium, 8px);
+  }
+
+  @keyframes smrt-skeleton-shimmer {
+    from {
+      background-position: 200% 0;
+    }
+    to {
+      background-position: -200% 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .skeleton {
+      animation: none;
+    }
+  }
+</style>