@happyvertical/smrt-ui 0.51.38 → 0.52.0

package/dist/components/nav/Tabs.svelte

@@ -10,9 +10,19 @@
  * - Proper ARIA roles: tablist, tab, tabpanel
  * - aria-selected indicates active tab
  * - aria-controls links tab to panel
+ *
+ * Link tabs: give every tab an `href` and the row renders as navigation — a
+ * `<nav>` of links with `aria-current="page"` on the active one, each tab its
+ * own URL (a content item's Article / Images / Review pages). With
+ * `maxVisible`, extra link tabs move to a "More" menu while the active tab
+ * always stays in the row; `badge` marks a tab needing attention (and puts a
+ * dot on "More" when a hidden tab has one). The row scrolls sideways on
+ * phones and keeps the active tab scrolled into view. It carries
+ * `data-shell-tabs`, so AdminShell keeps it sticky under its phone top bar.
  */
 import type { Snippet } from 'svelte';
 import { ripple } from '../../actions/ripple.js';
+import { splitTabs } from './tabs-overflow.js';
 import type { Tab } from './types.js';
 
 export interface Props {
@@ -30,6 +40,12 @@ export interface Props {
   children?: Snippet;
   /** Accessible label for the tablist */
   'aria-label'?: string;
+  /** Link tabs only: most tabs shown in the row; the rest go under "More". */
+  maxVisible?: number;
+  /** Link tabs only: label of the overflow menu (default "More"). */
+  moreLabel?: string;
+  /** Link tabs only: screen-reader text for the "More" attention dot. */
+  moreBadgeLabel?: string;
 }
 
 const {
@@ -40,8 +56,39 @@ const {
   variant = 'primary',
   children,
   'aria-label': ariaLabel,
+  maxVisible,
+  moreLabel = 'More',
+  moreBadgeLabel = 'has updates',
 }: Props = $props();
 
+/** Link tabs: every tab has an href, so the row is navigation, not a tablist. */
+const linkMode = $derived(tabs.length > 0 && tabs.every((tab) => !!tab.href));
+const split = $derived(
+  linkMode
+    ? splitTabs(tabs, active, maxVisible)
+    : { visible: tabs, overflow: [] as Tab[] },
+);
+// Same rule as the tab's own badge, so an empty badge dots neither.
+const overflowHasBadge = $derived(split.overflow.some((tab) => hasBadge(tab)));
+let moreMenu = $state<HTMLDetailsElement | null>(null);
+let linkRow = $state<HTMLElement | null>(null);
+
+// Keep the active link tab scrolled into view in a sideways-scrolling row,
+// and close "More" once the active tab changes (a link was followed).
+$effect(() => {
+  const current = active;
+  if (!linkMode || !linkRow) return;
+  if (moreMenu) moreMenu.open = false;
+  const activeLink = linkRow.querySelector<HTMLElement>(
+    `[data-tab-id="${CSS.escape(current)}"]`,
+  );
+  activeLink?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });
+});
+
+function hasBadge(tab: Tab): boolean {
+  return tab.badge !== undefined && tab.badge !== null && tab.badge !== '';
+}
+
 /** Get enabled tabs only */
 const enabledTabs = $derived(tabs.filter((t) => !t.disabled));
 
@@ -51,6 +98,9 @@ let tablistEl: HTMLElement | null = $state(null);
 const instanceId = $props.id();
 
 function handleClick(id: string) {
+  // A disabled tab (a link one has no href but is still clickable) never
+  // changes the active tab.
+  if (tabs.find((tab) => tab.id === id)?.disabled) return;
   if (id !== active) {
     onchange?.(id);
   }
@@ -101,6 +151,70 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
 }
 </script>
 
+{#snippet linkTab(tab: Tab)}
+  <a
+    class="tab-link"
+    class:active={tab.id === active}
+    href={tab.disabled ? undefined : tab.href}
+    aria-current={tab.id === active ? 'page' : undefined}
+    aria-disabled={tab.disabled ? 'true' : undefined}
+    data-tab-id={tab.id}
+    onclick={(event) => {
+      if (tab.disabled) {
+        event.preventDefault();
+        return;
+      }
+      handleClick(tab.id);
+    }}
+  >
+    <span class="tab-label">{tab.label}</span>
+    {#if tab.count !== undefined}
+      <span class="tab-count">{tab.count}</span>
+    {/if}
+    {#if hasBadge(tab)}
+      <span class="tab-badge">{tab.badge}</span>
+    {/if}
+  </a>
+{/snippet}
+
+{#if linkMode}
+<div class="tabs-container">
+  <nav
+    class="tabs-links"
+    class:sm={size === 'sm'}
+    class:lg={size === 'lg'}
+    aria-label={ariaLabel}
+    data-shell-tabs
+  >
+    <div class="tabs-links-row" bind:this={linkRow}>
+      {#each split.visible as tab (tab.id)}
+        {@render linkTab(tab)}
+      {/each}
+    </div>
+    {#if split.overflow.length > 0}
+      <details class="tabs-more" bind:this={moreMenu}>
+        <summary class="tab-link">
+          <span class="tab-label">{moreLabel}</span>
+          {#if overflowHasBadge}
+            <span class="tab-dot" aria-hidden="true"></span>
+            <span class="visually-hidden">({moreBadgeLabel})</span>
+          {/if}
+        </summary>
+        <div class="tabs-more-menu">
+          {#each split.overflow as tab (tab.id)}
+            {@render linkTab(tab)}
+          {/each}
+        </div>
+      </details>
+    {/if}
+  </nav>
+  {#if children}
+    <div class="tab-panel">
+      {@render children()}
+    </div>
+  {/if}
+</div>
+{:else}
 <div class="tabs-container">
   <div
     class="tabs-nav"
@@ -132,6 +246,9 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
           {#if tab.count !== undefined}
             <span class="tab-count">{tab.count}</span>
           {/if}
+          {#if hasBadge(tab)}
+            <span class="tab-badge">{tab.badge}</span>
+          {/if}
         </span>
         <div class="active-indicator"></div>
       </button>
@@ -149,6 +266,7 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
     </div>
   {/if}
 </div>
+{/if}
 
 <style>
   .tabs-container {
@@ -249,4 +367,127 @@ function handleKeydown(event: KeyboardEvent, tabId: string) {
   .tab-panel {
     padding-top: 1.5rem;
   }
+
+  .tab-badge {
+    min-width: 1.25rem;
+    padding: 0.05rem 0.4rem;
+    border-radius: 999px;
+    background: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-on-surface);
+    font: var(--smrt-typography-label-small-font);
+    font-weight: var(--smrt-typography-weight-bold, 700);
+    text-align: center;
+  }
+
+  /* Link tabs: a navigation row, one URL per tab. */
+  .tabs-links {
+    display: flex;
+    align-items: stretch;
+    gap: var(--smrt-spacing-1, 4px);
+    width: 100%;
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .tabs-links-row {
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    gap: var(--smrt-spacing-1, 4px);
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
+  .tab-link {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 8px);
+    min-height: 44px;
+    padding: 0 var(--smrt-spacing-4, 16px);
+    margin-bottom: -1px;
+    border-bottom: 2px solid transparent;
+    color: var(--smrt-color-on-surface-variant);
+    font: var(--smrt-typography-title-small-font);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+  }
+
+  .tabs-links.sm .tab-link {
+    min-height: 40px;
+    font: var(--smrt-typography-label-large-font);
+  }
+
+  .tabs-links.lg .tab-link {
+    min-height: 56px;
+    font: var(--smrt-typography-title-medium-font);
+  }
+
+  .tab-link:hover {
+    color: var(--smrt-color-on-surface);
+  }
+
+  .tab-link.active {
+    border-bottom-color: var(--smrt-color-primary);
+    color: var(--smrt-color-primary);
+  }
+
+  .tab-link[aria-disabled='true'] {
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  .tab-link:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: -2px;
+  }
+
+  .tab-dot {
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 999px;
+    background: var(--smrt-color-primary);
+  }
+
+  .tabs-more {
+    position: relative;
+    flex: 0 0 auto;
+  }
+
+  .tabs-more summary {
+    list-style: none;
+  }
+
+  .tabs-more summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .tabs-more-menu {
+    position: absolute;
+    inset-inline-end: 0;
+    z-index: var(--smrt-z-index-dropdown, 20);
+    display: grid;
+    min-width: 12rem;
+    padding: var(--smrt-spacing-1, 4px);
+    border: 1px solid var(--smrt-color-outline-variant);
+    border-radius: var(--smrt-radius-small, 0.5rem);
+    background: var(--smrt-color-surface);
+    box-shadow: var(--smrt-elevation-2);
+  }
+
+  .tabs-more-menu .tab-link {
+    margin: 0;
+    border-bottom: 0;
+    border-radius: var(--smrt-radius-extra-small, 0.35rem);
+  }
+
+  .visually-hidden {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    white-space: nowrap;
+  }
 </style>

package/dist/components/nav/Tabs.svelte.d.ts

@@ -9,6 +9,15 @@
  * - Proper ARIA roles: tablist, tab, tabpanel
  * - aria-selected indicates active tab
  * - aria-controls links tab to panel
+ *
+ * Link tabs: give every tab an `href` and the row renders as navigation — a
+ * `<nav>` of links with `aria-current="page"` on the active one, each tab its
+ * own URL (a content item's Article / Images / Review pages). With
+ * `maxVisible`, extra link tabs move to a "More" menu while the active tab
+ * always stays in the row; `badge` marks a tab needing attention (and puts a
+ * dot on "More" when a hidden tab has one). The row scrolls sideways on
+ * phones and keeps the active tab scrolled into view. It carries
+ * `data-shell-tabs`, so AdminShell keeps it sticky under its phone top bar.
  */
 import type { Snippet } from 'svelte';
 import type { Tab } from './types.js';
@@ -27,6 +36,12 @@ export interface Props {
     children?: Snippet;
     /** Accessible label for the tablist */
     'aria-label'?: string;
+    /** Link tabs only: most tabs shown in the row; the rest go under "More". */
+    maxVisible?: number;
+    /** Link tabs only: label of the overflow menu (default "More"). */
+    moreLabel?: string;
+    /** Link tabs only: screen-reader text for the "More" attention dot. */
+    moreBadgeLabel?: string;
 }
 declare const Tabs: import("svelte").Component<Props, {}, "">;
 type Tabs = ReturnType<typeof Tabs>;

package/dist/components/nav/Tabs.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/nav/Tabs.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAGtC,MAAM,WAAW,KAAK;IACpB,qBAAqB;IACrB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAsGD,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Tabs.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/nav/Tabs.svelte.ts"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC;AAGtC,MAAM,WAAW,KAAK;IACpB,qBAAqB;IACrB,IAAI,EAAE,GAAG,EAAE,CAAC;IACZ,8BAA8B;IAC9B,MAAM,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,qBAAqB;IACrB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mEAAmE;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AA+LD,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/nav/__tests__/LinkTabs.test.js

@@ -0,0 +1,117 @@
+/** Link tabs: a navigation row of URLs with overflow, badges, active-in-view. */
+import { render, screen, within } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import Tabs from '../Tabs.svelte';
+import { splitTabs } from '../tabs-overflow.js';
+const TABS = [
+    { id: 'article', label: 'Article', href: '/c/1' },
+    { id: 'images', label: 'Images', href: '/c/1/images', badge: 3 },
+    { id: 'videos', label: 'Videos', href: '/c/1/videos' },
+    { id: 'social', label: 'Social', href: '/c/1/social' },
+    { id: 'review', label: 'Review', href: '/c/1/review', badge: '!' },
+    { id: 'jobs', label: 'Background work', href: '/c/1/jobs' },
+];
+describe('splitTabs', () => {
+    it('keeps everything in the row under the limit', () => {
+        expect(splitTabs(TABS, 'article', 10).overflow).toEqual([]);
+        expect(splitTabs(TABS, 'article', undefined).overflow).toEqual([]);
+    });
+    it('promotes the active tab into the row', () => {
+        const { visible, overflow } = splitTabs(TABS, 'jobs', 4);
+        expect(visible.map((tab) => tab.id)).toEqual([
+            'article',
+            'images',
+            'videos',
+            'jobs',
+        ]);
+        expect(overflow.map((tab) => tab.id)).toEqual(['social', 'review']);
+    });
+});
+describe('Tabs with hrefs', () => {
+    it('renders navigation links, not a tablist, with aria-current on the active tab', () => {
+        render(Tabs, {
+            props: { tabs: TABS, active: 'images', 'aria-label': 'Content sections' },
+        });
+        const nav = screen.getByRole('navigation', { name: 'Content sections' });
+        expect(nav).toHaveAttribute('data-shell-tabs');
+        expect(screen.queryByRole('tablist')).not.toBeInTheDocument();
+        const active = within(nav).getByRole('link', { name: /Images/ });
+        expect(active).toHaveAttribute('href', '/c/1/images');
+        expect(active).toHaveAttribute('aria-current', 'page');
+        expect(active).toHaveTextContent('3');
+        expect(within(nav).getByRole('link', { name: 'Article' })).not.toHaveAttribute('aria-current');
+    });
+    it('moves extra tabs under "More", keeps the active one visible, and dots the menu for a hidden badge', async () => {
+        const { container } = render(Tabs, {
+            props: {
+                tabs: TABS,
+                active: 'jobs',
+                maxVisible: 4,
+                'aria-label': 'Content sections',
+            },
+        });
+        const row = container.querySelector('.tabs-links-row');
+        expect(within(row)
+            .getAllByRole('link')
+            .map((link) => link.dataset.tabId)).toEqual(['article', 'images', 'videos', 'jobs']);
+        const more = container.querySelector('details.tabs-more');
+        expect(within(more).getByText('More')).toBeInTheDocument();
+        expect(within(more).getByText('(has updates)')).toBeInTheDocument();
+        await userEvent.click(within(more).getByText('More'));
+        expect(more.open).toBe(true);
+        expect(within(more).getByRole('link', { name: /Review/ })).toHaveAttribute('href', '/c/1/review');
+    });
+    it('a disabled link tab never fires onchange', async () => {
+        const onchange = vi.fn();
+        render(Tabs, {
+            props: {
+                tabs: [
+                    { id: 'article', label: 'Article', href: '/c/1' },
+                    {
+                        id: 'locked',
+                        label: 'Locked',
+                        href: '/c/1/locked',
+                        disabled: true,
+                    },
+                ],
+                active: 'article',
+                onchange,
+                'aria-label': 'Content sections',
+            },
+        });
+        const locked = screen.getByText('Locked').closest('a');
+        await userEvent.click(locked);
+        expect(onchange).not.toHaveBeenCalled();
+    });
+    it('does not dot "More" for an empty-string badge, matching the tab itself', () => {
+        const { container } = render(Tabs, {
+            props: {
+                tabs: [
+                    { id: 'a', label: 'A', href: '/a' },
+                    { id: 'b', label: 'B', href: '/b' },
+                    { id: 'c', label: 'C', href: '/c', badge: '' },
+                ],
+                active: 'a',
+                maxVisible: 2,
+                'aria-label': 'Sections',
+            },
+        });
+        const more = container.querySelector('details.tabs-more');
+        expect(more).not.toBeNull();
+        expect(more.querySelector('.tab-dot')).toBeNull();
+        expect(more.querySelector('.tab-badge')).toBeNull();
+    });
+    it('is axe-clean', async () => {
+        const { container } = render(Tabs, {
+            props: {
+                tabs: TABS,
+                active: 'article',
+                maxVisible: 4,
+                'aria-label': 'Content sections',
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/nav/index.d.ts

@@ -3,5 +3,6 @@
  */
 export { default as FilterChips } from './FilterChips.svelte';
 export { default as Tabs } from './Tabs.svelte';
+export { splitTabs } from './tabs-overflow.js';
 export type { FilterOption, Tab } from './types.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/nav/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/nav/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAEhD,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/nav/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,MAAM,YAAY,CAAC"}

package/dist/components/nav/index.js

@@ -4,3 +4,4 @@
 // Export components
 export { default as FilterChips } from './FilterChips.svelte';
 export { default as Tabs } from './Tabs.svelte';
+export { splitTabs } from './tabs-overflow.js';

package/dist/components/nav/tabs-overflow.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Split tabs into the row and a "More" menu, keeping the active tab in the
+ * row: with more tabs than `maxVisible`, the first `maxVisible - 1` show, then
+ * the active tab (or the next one), and the rest go to the menu.
+ */
+export declare function splitTabs<T extends {
+    id: string;
+}>(tabs: readonly T[], activeId: string | null | undefined, maxVisible: number | undefined): {
+    visible: T[];
+    overflow: T[];
+};
+//# sourceMappingURL=tabs-overflow.d.ts.map

package/dist/components/nav/tabs-overflow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-overflow.d.ts","sourceRoot":"","sources":["../../../src/components/nav/tabs-overflow.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EAChD,IAAI,EAAE,SAAS,CAAC,EAAE,EAClB,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EACnC,UAAU,EAAE,MAAM,GAAG,SAAS,GAC7B;IAAE,OAAO,EAAE,CAAC,EAAE,CAAC;IAAC,QAAQ,EAAE,CAAC,EAAE,CAAA;CAAE,CAWjC"}

package/dist/components/nav/tabs-overflow.js

@@ -0,0 +1,17 @@
+/**
+ * Split tabs into the row and a "More" menu, keeping the active tab in the
+ * row: with more tabs than `maxVisible`, the first `maxVisible - 1` show, then
+ * the active tab (or the next one), and the rest go to the menu.
+ */
+export function splitTabs(tabs, activeId, maxVisible) {
+    if (!maxVisible || maxVisible < 1 || tabs.length <= maxVisible) {
+        return { visible: [...tabs], overflow: [] };
+    }
+    const visible = tabs.slice(0, maxVisible - 1);
+    const rest = tabs.slice(maxVisible - 1);
+    const promoted = rest.find((tab) => tab.id === activeId) ?? rest[0];
+    return {
+        visible: promoted ? [...visible, promoted] : visible,
+        overflow: rest.filter((tab) => tab !== promoted),
+    };
+}

package/dist/components/nav/types.d.ts

@@ -20,5 +20,13 @@ export interface Tab {
     count?: number;
     /** Disabled state */
     disabled?: boolean;
+    /**
+     * Makes this a link tab: the tab row renders as navigation (`<nav>` of
+     * links, `aria-current="page"` on the active one) instead of a tablist.
+     * Give every tab an `href` or none.
+     */
+    href?: string;
+    /** Short attention badge (e.g. `3` pending, `!`); `null`/absent shows none. */
+    badge?: string | number | null;
 }
 //# sourceMappingURL=types.d.ts.map

package/dist/components/nav/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/nav/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,YAAY;IAC3B,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,GAAG;IAClB,qBAAqB;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/nav/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,MAAM,WAAW,YAAY;IAC3B,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,GAAG;IAClB,qBAAqB;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CAChC"}

package/dist/components/ui/Button.svelte

@@ -295,6 +295,13 @@ function handleClick(event: MouseEvent) {
     outline-offset: 2px;
   }
 
+  /* Phones: every size is at least a 44px touch target. */
+  @media (max-width: 48rem) {
+    .button {
+      min-block-size: 2.75rem;
+    }
+  }
+
   /* Reduced motion */
   @media (prefers-reduced-motion: reduce) {
     .spinner {

package/dist/components/ui/Card.svelte

@@ -52,15 +52,24 @@ const {
 </div>
 
 <style>
+  /*
+   * Themeable look (app-level custom properties; defaults keep the stock look):
+   *   --smrt-card-border      edge of default and elevated cards
+   *   --smrt-card-background  card fill
+   *   --smrt-card-shadow      shadow of default cards (elevated keeps its elevation)
+   *   --smrt-card-divider     rule between the header/footer and the content
+   * The `outlined` variant always draws its outline.
+   */
   .card {
-    background: var(--smrt-color-surface);
+    background: var(--smrt-card-background, var(--smrt-color-surface));
     border-radius: var(--smrt-radius-medium);
     transition: all var(--smrt-duration-short2) var(--smrt-easing-standard);
   }
 
   /* Variants */
   .default {
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-card-border, 1px solid var(--smrt-color-outline-variant));
+    box-shadow: var(--smrt-card-shadow, none);
   }
 
   .outlined {
@@ -68,7 +77,7 @@ const {
   }
 
   .elevated {
-    border: 1px solid var(--smrt-color-outline-variant);
+    border: var(--smrt-card-border, 1px solid var(--smrt-color-outline-variant));
     box-shadow: var(--smrt-elevation-2);
   }
 
@@ -98,7 +107,7 @@ const {
   /* Header */
   .card-header {
     padding: var(--smrt-spacing-6);
-    border-bottom: 1px solid var(--smrt-color-outline-variant);
+    border-bottom: var(--smrt-card-divider, 1px solid var(--smrt-color-outline-variant));
   }
 
   .padding-sm .card-header {
@@ -112,7 +121,7 @@ const {
   /* Footer */
   .card-footer {
     padding: var(--smrt-spacing-6);
-    border-top: 1px solid var(--smrt-color-outline-variant);
+    border-top: var(--smrt-card-divider, 1px solid var(--smrt-color-outline-variant));
     background: var(--smrt-color-surface-container-low);
     border-bottom-left-radius: var(--smrt-radius-medium);
     border-bottom-right-radius: var(--smrt-radius-medium);