@happyvertical/smrt-ui 0.30.0

package/dist/components/nav/Tabs.svelte

@@ -0,0 +1,252 @@
+<script lang="ts">
+/**
+ * Tabs - Tab navigation component
+ * refactored for Material 3
+ *
+ * Provides tabbed navigation with optional counts and content slots.
+ *
+ * Accessibility:
+ * - Supports keyboard navigation with Arrow keys
+ * - Proper ARIA roles: tablist, tab, tabpanel
+ * - aria-selected indicates active tab
+ * - aria-controls links tab to panel
+ */
+import type { Snippet } from 'svelte';
+import { ripple } from '../../actions/ripple.js';
+import type { Tab } from './types.js';
+
+export interface Props {
+  /** Available tabs */
+  tabs: Tab[];
+  /** Currently active tab id */
+  active: string;
+  /** Called when tab changes */
+  onchange?: (id: string) => void;
+  /** Size variant */
+  size?: 'sm' | 'md' | 'lg';
+  /** Visual variant */
+  variant?: 'primary' | 'secondary';
+  /** Tab content slot */
+  children?: Snippet;
+  /** Accessible label for the tablist */
+  'aria-label'?: string;
+}
+
+const {
+  tabs,
+  active,
+  onchange,
+  size = 'md',
+  variant = 'primary',
+  children,
+  'aria-label': ariaLabel,
+}: Props = $props();
+
+/** Get enabled tabs only */
+const enabledTabs = $derived(tabs.filter((t) => !t.disabled));
+
+let tablistEl: HTMLElement | null = $state(null);
+
+// Generate unique ID for this tabs instance
+const instanceId = $props.id();
+
+function handleClick(id: string) {
+  if (id !== active) {
+    onchange?.(id);
+  }
+}
+
+/**
+ * Handle keyboard navigation for accessibility
+ * ArrowRight/ArrowLeft: Move between tabs
+ * Home: Go to first tab
+ * End: Go to last tab
+ */
+function handleKeydown(event: KeyboardEvent, tabId: string) {
+  const currentIndex = enabledTabs.findIndex((t) => t.id === tabId);
+  let nextIndex: number | null = null;
+
+  switch (event.key) {
+    case 'ArrowRight':
+      event.preventDefault();
+      nextIndex = (currentIndex + 1) % enabledTabs.length;
+      break;
+    case 'ArrowLeft':
+      event.preventDefault();
+      nextIndex = (currentIndex - 1 + enabledTabs.length) % enabledTabs.length;
+      break;
+    case 'Home':
+      event.preventDefault();
+      nextIndex = 0;
+      break;
+    case 'End':
+      event.preventDefault();
+      nextIndex = enabledTabs.length - 1;
+      break;
+  }
+
+  if (nextIndex !== null && nextIndex !== currentIndex) {
+    const nextTab = enabledTabs[nextIndex];
+    if (nextTab) {
+      onchange?.(nextTab.id);
+      // Focus the next tab button after the DOM updates
+      requestAnimationFrame(() => {
+        const tabButton = tablistEl?.querySelector(
+          `[data-tab-id="${CSS.escape(nextTab.id)}"]`,
+        ) as HTMLElement;
+        tabButton?.focus();
+      });
+    }
+  }
+}
+</script>
+
+<div class="tabs-container">
+  <div
+    class="tabs-nav"
+    class:sm={size === 'sm'}
+    class:lg={size === 'lg'}
+    class:secondary={variant === 'secondary'}
+    role="tablist"
+    aria-label={ariaLabel}
+    bind:this={tablistEl}
+  >
+    {#each tabs as tab (tab.id)}
+      <button
+        type="button"
+        class="tab-button"
+        class:active={tab.id === active}
+        disabled={tab.disabled}
+        role="tab"
+        id="tab-{instanceId}-{tab.id}"
+        aria-selected={tab.id === active}
+        aria-controls="tab-panel-{instanceId}"
+        tabindex={tab.id === active ? 0 : -1}
+        data-tab-id={tab.id}
+        onclick={() => handleClick(tab.id)}
+        onkeydown={(e) => handleKeydown(e, tab.id)}
+        use:ripple
+      >
+        <span class="tab-content-wrapper">
+          <span class="tab-label">{tab.label}</span>
+          {#if tab.count !== undefined}
+            <span class="tab-count">{tab.count}</span>
+          {/if}
+        </span>
+        <div class="active-indicator"></div>
+      </button>
+    {/each}
+  </div>
+
+  {#if children}
+    <div 
+      class="tab-panel" 
+      role="tabpanel" 
+      id="tab-panel-{instanceId}"
+      aria-labelledby="tab-{instanceId}-{active}"
+    >
+      {@render children()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .tabs-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  .tabs-nav {
+    display: flex;
+    border-bottom: 1px solid var(--smrt-color-surface-variant);
+    width: 100%;
+  }
+
+  .tab-button {
+    flex: 1;
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--smrt-spacing-4, 16px);
+    height: 48px;
+    font: var(--smrt-typography-title-small-font);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    color: var(--smrt-color-on-surface-variant);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
+    position: relative;
+    overflow: hidden;
+    min-width: 90px;
+  }
+
+  .sm .tab-button {
+    height: 40px;
+    font: var(--smrt-typography-label-large-font);
+  }
+
+  .lg .tab-button {
+    height: 56px;
+    font: var(--smrt-typography-title-medium-font);
+  }
+
+  .tab-button:hover:not(:disabled) {
+    background-color: var(--smrt-color-surface-container-high);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .tab-button:focus-visible {
+    outline: 2px solid var(--smrt-color-primary);
+    outline-offset: -2px;
+  }
+
+  .tab-button.active {
+    color: var(--smrt-color-primary);
+  }
+
+  .tab-button:disabled {
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  .tab-content-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 8px);
+    height: 100%;
+  }
+
+  .tab-count {
+    font: var(--smrt-typography-label-small-font);
+    opacity: 0.7;
+  }
+
+  .active-indicator {
+    position: absolute;
+    bottom: 0;
+    height: 3px;
+    background-color: var(--smrt-color-primary);
+    border-radius: var(--smrt-radius-sm, 4px) var(--smrt-radius-sm, 4px) 0 0;
+    transition: width 200ms, opacity 200ms;
+    width: 0;
+    opacity: 0;
+  }
+
+  .active .active-indicator {
+    width: 40px; /* Primary variant indicator width */
+    opacity: 1;
+  }
+
+  /* Secondary variant - full width indicator */
+  .secondary .active .active-indicator {
+    width: 100%;
+    height: 2px;
+  }
+
+  .tab-panel {
+    padding-top: 1.5rem;
+  }
+</style>

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

@@ -0,0 +1,34 @@
+/**
+ * Tabs - Tab navigation component
+ * refactored for Material 3
+ *
+ * Provides tabbed navigation with optional counts and content slots.
+ *
+ * Accessibility:
+ * - Supports keyboard navigation with Arrow keys
+ * - Proper ARIA roles: tablist, tab, tabpanel
+ * - aria-selected indicates active tab
+ * - aria-controls links tab to panel
+ */
+import type { Snippet } from 'svelte';
+import type { Tab } from './types.js';
+export interface Props {
+    /** Available tabs */
+    tabs: Tab[];
+    /** Currently active tab id */
+    active: string;
+    /** Called when tab changes */
+    onchange?: (id: string) => void;
+    /** Size variant */
+    size?: 'sm' | 'md' | 'lg';
+    /** Visual variant */
+    variant?: 'primary' | 'secondary';
+    /** Tab content slot */
+    children?: Snippet;
+    /** Accessible label for the tablist */
+    'aria-label'?: string;
+}
+declare const Tabs: import("svelte").Component<Props, {}, "">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;
+//# sourceMappingURL=Tabs.svelte.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,94 @@
+/**
+ * Component test for FilterChips (Sweep S11, #1416).
+ *
+ * FilterChips is a single-select filter: a `role="radiogroup"` of
+ * `role="radio"` buttons where the selected option carries `aria-checked`.
+ * (There is no per-chip remove/dismiss affordance in the source — selection is
+ * the only interaction.) This suite asserts that structure/state, drives
+ * selection via click, and proves axe-cleanliness, including the optional
+ * "All" option.
+ */
+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 FilterChips from '../FilterChips.svelte';
+const OPTIONS = [
+    { value: 'all-news', label: 'News', count: 12 },
+    { value: 'sports', label: 'Sports', count: 5 },
+    { value: 'tech', label: 'Tech' },
+];
+describe('FilterChips', () => {
+    it('renders a radiogroup with one radio per option', () => {
+        render(FilterChips, { props: { options: OPTIONS, selected: 'all-news' } });
+        const group = screen.getByRole('radiogroup');
+        expect(within(group).getAllByRole('radio')).toHaveLength(3);
+    });
+    it('marks the selected option with aria-checked=true and others false', () => {
+        render(FilterChips, { props: { options: OPTIONS, selected: 'sports' } });
+        expect(screen.getByRole('radio', { name: /Sports/ })).toHaveAttribute('aria-checked', 'true');
+        expect(screen.getByRole('radio', { name: /News/ })).toHaveAttribute('aria-checked', 'false');
+    });
+    it('renders the optional count alongside its chip label', () => {
+        render(FilterChips, { props: { options: OPTIONS, selected: 'all-news' } });
+        expect(screen.getByRole('radio', { name: /News/ })).toHaveTextContent('12');
+    });
+    it('fires onchange with the clicked option value', async () => {
+        const onchange = vi.fn();
+        render(FilterChips, {
+            props: { options: OPTIONS, selected: 'all-news', onchange },
+        });
+        await userEvent.click(screen.getByRole('radio', { name: /Tech/ }));
+        expect(onchange).toHaveBeenCalledWith('tech');
+    });
+    it('does not fire onchange when the already-selected chip is clicked', async () => {
+        const onchange = vi.fn();
+        render(FilterChips, {
+            props: { options: OPTIONS, selected: 'sports', onchange },
+        });
+        await userEvent.click(screen.getByRole('radio', { name: /Sports/ }));
+        expect(onchange).not.toHaveBeenCalled();
+    });
+    it('does not fire onchange for a disabled option', async () => {
+        const onchange = vi.fn();
+        const options = [
+            { value: 'a', label: 'A' },
+            { value: 'b', label: 'B', disabled: true },
+        ];
+        render(FilterChips, { props: { options, selected: 'a', onchange } });
+        const disabled = screen.getByRole('radio', { name: 'B' });
+        expect(disabled).toBeDisabled();
+        await userEvent.click(disabled);
+        expect(onchange).not.toHaveBeenCalled();
+    });
+    it('prepends an "All" option (empty value) when showAll is set', async () => {
+        const onchange = vi.fn();
+        render(FilterChips, {
+            props: {
+                options: OPTIONS,
+                selected: 'sports',
+                showAll: true,
+                allLabel: 'Everything',
+                onchange,
+            },
+        });
+        const radios = screen.getAllByRole('radio');
+        expect(radios).toHaveLength(4);
+        const all = screen.getByRole('radio', { name: /Everything/ });
+        expect(all).toHaveAttribute('aria-checked', 'false');
+        await userEvent.click(all);
+        expect(onchange).toHaveBeenCalledWith('');
+    });
+    it('is axe-clean for a default selected group', async () => {
+        const { container } = render(FilterChips, {
+            props: { options: OPTIONS, selected: 'all-news' },
+        });
+        await expectNoA11yViolations(container);
+    });
+    it('is axe-clean with the "All" option enabled', async () => {
+        const { container } = render(FilterChips, {
+            props: { options: OPTIONS, selected: '', showAll: true },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

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

@@ -0,0 +1,128 @@
+/**
+ * Component test for Tabs (Sweep S11, #1416).
+ *
+ * Tabs renders an ARIA tablist of `role="tab"` buttons with roving tabindex,
+ * `aria-selected` on the active tab, and a `role="tabpanel"` for children.
+ * This suite asserts that structure/state, drives click + Arrow/Home/End
+ * keyboard navigation (which fire `onchange`), and proves axe-cleanliness.
+ */
+import { render, screen, within } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { createRawSnippet } from 'svelte';
+import { describe, expect, it, vi } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import Tabs from '../Tabs.svelte';
+const TABS = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'activity', label: 'Activity', count: 4 },
+    { id: 'settings', label: 'Settings' },
+];
+/** Build a text Snippet for the Tabs `children` (panel) prop. */
+function panelSnippet(text) {
+    return createRawSnippet(() => ({ render: () => `<span>${text}</span>` }));
+}
+describe('Tabs', () => {
+    it('renders a tablist with one tab button per tab', () => {
+        render(Tabs, {
+            props: { tabs: TABS, active: 'overview', 'aria-label': 'Sections' },
+        });
+        const tablist = screen.getByRole('tablist', { name: 'Sections' });
+        expect(within(tablist).getAllByRole('tab')).toHaveLength(3);
+    });
+    it('marks the active tab with aria-selected and a tabindex of 0', () => {
+        render(Tabs, { props: { tabs: TABS, active: 'activity' } });
+        const active = screen.getByRole('tab', { name: /Activity/ });
+        expect(active).toHaveAttribute('aria-selected', 'true');
+        expect(active).toHaveAttribute('tabindex', '0');
+        const inactive = screen.getByRole('tab', { name: 'Overview' });
+        expect(inactive).toHaveAttribute('aria-selected', 'false');
+        expect(inactive).toHaveAttribute('tabindex', '-1');
+    });
+    it('renders the optional count alongside its tab label', () => {
+        render(Tabs, { props: { tabs: TABS, active: 'overview' } });
+        expect(screen.getByRole('tab', { name: /Activity/ })).toHaveTextContent('4');
+    });
+    it('renders children inside a tabpanel labelled by the active tab', () => {
+        render(Tabs, {
+            props: {
+                tabs: TABS,
+                active: 'overview',
+                children: panelSnippet('Overview content'),
+            },
+        });
+        const panel = screen.getByRole('tabpanel');
+        expect(within(panel).getByText('Overview content')).toBeInTheDocument();
+    });
+    it('fires onchange with the clicked tab id', async () => {
+        const onchange = vi.fn();
+        render(Tabs, { props: { tabs: TABS, active: 'overview', onchange } });
+        await userEvent.click(screen.getByRole('tab', { name: 'Settings' }));
+        expect(onchange).toHaveBeenCalledWith('settings');
+    });
+    it('does not fire onchange when the already-active tab is clicked', async () => {
+        const onchange = vi.fn();
+        render(Tabs, { props: { tabs: TABS, active: 'overview', onchange } });
+        await userEvent.click(screen.getByRole('tab', { name: 'Overview' }));
+        expect(onchange).not.toHaveBeenCalled();
+    });
+    // ArrowRight/ArrowLeft are asserted in separate renders rather than chained:
+    // the component moves focus to the newly-activated tab, so a second arrow key
+    // in the same render would target whichever tab focus landed on — racy across
+    // suite ordering. Each test focuses one known tab and asserts a single hop.
+    it('moves to the next tab with ArrowRight', async () => {
+        const onchange = vi.fn();
+        render(Tabs, { props: { tabs: TABS, active: 'overview', onchange } });
+        screen.getByRole('tab', { name: 'Overview' }).focus();
+        await userEvent.keyboard('{ArrowRight}');
+        expect(onchange).toHaveBeenLastCalledWith('activity');
+    });
+    it('moves to the previous tab with ArrowLeft', async () => {
+        const onchange = vi.fn();
+        // Render with Activity active so it owns the roving tabindex and is focusable.
+        // Activity carries a count badge, so its accessible name is "Activity 4".
+        render(Tabs, { props: { tabs: TABS, active: 'activity', onchange } });
+        screen.getByRole('tab', { name: /Activity/ }).focus();
+        await userEvent.keyboard('{ArrowLeft}');
+        expect(onchange).toHaveBeenLastCalledWith('overview');
+    });
+    it('wraps from the first tab to the last with ArrowLeft', async () => {
+        const onchange = vi.fn();
+        render(Tabs, { props: { tabs: TABS, active: 'overview', onchange } });
+        screen.getByRole('tab', { name: 'Overview' }).focus();
+        await userEvent.keyboard('{ArrowLeft}');
+        expect(onchange).toHaveBeenLastCalledWith('settings');
+    });
+    it('jumps to the first/last tab with Home/End', async () => {
+        const onchange = vi.fn();
+        render(Tabs, { props: { tabs: TABS, active: 'activity', onchange } });
+        screen.getByRole('tab', { name: /Activity/ }).focus();
+        await userEvent.keyboard('{End}');
+        expect(onchange).toHaveBeenLastCalledWith('settings');
+        await userEvent.keyboard('{Home}');
+        expect(onchange).toHaveBeenLastCalledWith('overview');
+    });
+    it('skips disabled tabs during keyboard navigation', async () => {
+        const onchange = vi.fn();
+        const tabs = [
+            { id: 'a', label: 'A' },
+            { id: 'b', label: 'B', disabled: true },
+            { id: 'c', label: 'C' },
+        ];
+        render(Tabs, { props: { tabs, active: 'a', onchange } });
+        expect(screen.getByRole('tab', { name: 'B' })).toBeDisabled();
+        screen.getByRole('tab', { name: 'A' }).focus();
+        await userEvent.keyboard('{ArrowRight}');
+        expect(onchange).toHaveBeenLastCalledWith('c');
+    });
+    it('is axe-clean with a labelled tablist and panel', async () => {
+        const { container } = render(Tabs, {
+            props: {
+                tabs: TABS,
+                active: 'overview',
+                'aria-label': 'Sections',
+                children: panelSnippet('Panel content'),
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});

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

@@ -0,0 +1,7 @@
+/**
+ * Navigation components
+ */
+export { default as FilterChips } from './FilterChips.svelte';
+export { default as Tabs } from './Tabs.svelte';
+export type { FilterOption, Tab } from './types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/nav/index.js

@@ -0,0 +1,6 @@
+/**
+ * Navigation components
+ */
+// Export components
+export { default as FilterChips } from './FilterChips.svelte';
+export { default as Tabs } from './Tabs.svelte';

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

@@ -0,0 +1,24 @@
+/**
+ * Navigation component types
+ */
+export interface FilterOption {
+    /** Option value */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Optional count badge */
+    count?: number;
+    /** Disabled state */
+    disabled?: boolean;
+}
+export interface Tab {
+    /** Tab identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional count badge */
+    count?: number;
+    /** Disabled state */
+    disabled?: boolean;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/nav/types.js

@@ -0,0 +1,4 @@
+/**
+ * Navigation component types
+ */
+export {};

package/dist/components/permissions/PermissionCheck.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+
+interface Props {
+  /** Single permission to check */
+  permission?: string;
+  /** Multiple permissions to check */
+  permissions?: string[];
+  /** User's current permissions */
+  userPermissions: string[];
+  /** 'all' requires all permissions, 'any' requires at least one */
+  mode?: 'all' | 'any';
+  /** Content to show when permission check passes */
+  children: Snippet;
+  /** Optional fallback content when check fails */
+  fallback?: Snippet;
+}
+
+const {
+  permission,
+  permissions = [],
+  userPermissions,
+  mode = 'all',
+  children,
+  fallback,
+}: Props = $props();
+
+const requiredPermissions = $derived(permission ? [permission] : permissions);
+
+const hasAccess = $derived(() => {
+  if (requiredPermissions.length === 0) return true;
+
+  if (mode === 'any') {
+    return requiredPermissions.some((p) => userPermissions.includes(p));
+  }
+
+  return requiredPermissions.every((p) => userPermissions.includes(p));
+});
+</script>
+
+{#if hasAccess()}
+  {@render children()}
+{:else if fallback}
+  {@render fallback()}
+{/if}

package/dist/components/permissions/PermissionCheck.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Single permission to check */
+    permission?: string;
+    /** Multiple permissions to check */
+    permissions?: string[];
+    /** User's current permissions */
+    userPermissions: string[];
+    /** 'all' requires all permissions, 'any' requires at least one */
+    mode?: 'all' | 'any';
+    /** Content to show when permission check passes */
+    children: Snippet;
+    /** Optional fallback content when check fails */
+    fallback?: Snippet;
+}
+declare const PermissionCheck: import("svelte").Component<Props, {}, "">;
+type PermissionCheck = ReturnType<typeof PermissionCheck>;
+export default PermissionCheck;
+//# sourceMappingURL=PermissionCheck.svelte.d.ts.map

package/dist/components/permissions/PermissionCheck.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PermissionCheck.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/permissions/PermissionCheck.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAGtC,UAAU,KAAK;IACb,iCAAiC;IACjC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC;IACvB,iCAAiC;IACjC,eAAe,EAAE,MAAM,EAAE,CAAC;IAC1B,kEAAkE;IAClE,IAAI,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACrB,mDAAmD;IACnD,QAAQ,EAAE,OAAO,CAAC;IAClB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAmCD,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}