@svadmin/ui 0.88.1 → 0.92.0

package/dist/components/NotificationsSettings.svelte

@@ -33,13 +33,13 @@
   let loading = $state(false);
   let saving = $state(false);
   let loaded = $state(false);
-  let loadError = $state('');
-  let saveError = $state('');
+  let loadError = $state(false);
+  let saveError = $state(false);
   let epoch = 0;
   async function load() {
     const provider = preferencesProvider;
     const request = ++epoch;
-    loadError = ''; saveError = ''; loaded = false; saving = false;
+    loadError = false; saveError = false; loaded = false; saving = false;
     loading = Boolean(provider);
     if (!provider) return;
     try {
@@ -47,8 +47,8 @@
       if (request !== epoch) return;
       emailAlerts = { ...result.email }; pushAlerts = { ...result.push }; smsAlerts = { ...result.sms };
       loaded = true;
-    } catch (caught) {
-      if (request === epoch) loadError = caught instanceof Error ? caught.message : String(caught);
+    } catch {
+      if (request === epoch) loadError = true;
     } finally {
       if (request === epoch) loading = false;
     }
@@ -62,12 +62,12 @@
     const provider = preferencesProvider;
     if (!provider || !loaded || saving) return;
     const request = epoch;
-    saving = true; saveError = '';
+    saving = true; saveError = false;
     try {
       await provider.save({ email: { ...emailAlerts }, push: { ...pushAlerts }, sms: { ...smsAlerts } });
       if (request === epoch) notification.success(i18n.t('common.updateSuccess'), 3000);
-    } catch (caught) {
-      if (request === epoch) saveError = caught instanceof Error ? caught.message : String(caught);
+    } catch {
+      if (request === epoch) saveError = true;
     } finally {
       if (request === epoch) saving = false;
     }
@@ -89,9 +89,9 @@
   {#if loading}
     <DataState state="loading" />
   {:else if loadError}
-    <DataState state="error" description={loadError} retry={load} />
+    <DataState state="error" description={i18n.t('common.operationFailed')} retry={load} />
   {:else if saveError}
-    <FeedbackNotice tone="danger" message={saveError} />
+    <FeedbackNotice tone="danger" message={i18n.t('common.operationFailed')} />
   {/if}
   {#if loaded || !preferencesProvider}
   <fieldset disabled={!preferencesProvider || saving} class="svadmin-u-b3542e058833">

package/dist/components/NumberInput.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
   import NumericInput from './NumericInput.svelte';
+  import type { NumericInputLocale } from './numeric-format.js';
   import type { NumericInputMode } from './NumericInput.svelte';
 
   interface Props {
     value?: number | null;
+    locale?: NumericInputLocale | undefined;
     min?: number;
     max?: number;
     step?: number;
@@ -14,12 +16,12 @@
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;
-    describedby?: string;
+    describedby?: string | undefined;
     class?: string;
     onchange?: (value: number | null) => void;
   }
 
-  let props: Props = $props();
+  let { value = $bindable(null), ...props }: Props = $props();
 </script>
 
-<NumericInput {...props} mode={'number' satisfies NumericInputMode} />
+<NumericInput {...props} bind:value mode={'number' satisfies NumericInputMode} />

package/dist/components/NumberInput.svelte.d.ts

@@ -1,5 +1,7 @@
+import type { NumericInputLocale } from './numeric-format.js';
 interface Props {
     value?: number | null;
+    locale?: NumericInputLocale | undefined;
     min?: number;
     max?: number;
     step?: number;
@@ -10,10 +12,10 @@ interface Props {
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;
-    describedby?: string;
+    describedby?: string | undefined;
     class?: string;
     onchange?: (value: number | null) => void;
 }
-declare const NumberInput: import("svelte").Component<Props, {}, "">;
+declare const NumberInput: import("svelte").Component<Props, {}, "value">;
 type NumberInput = ReturnType<typeof NumberInput>;
 export default NumberInput;

package/dist/components/NumericInput.svelte

@@ -1,6 +1,15 @@
 <script lang="ts">
   import { Input } from './ui/input/index.js';
   import { cn } from '../utils.js';
+  import { useTranslation } from '@svadmin/core/i18n';
+  import {
+    addNumericStep,
+    formatNumericEditingText,
+    formatNumericValue,
+    isNumericInputLocale,
+    parseNumericInput,
+    type NumericInputLocale,
+  } from './numeric-format.js';
 
   export type NumericInputMode = 'number' | 'currency' | 'percent';
 
@@ -9,6 +18,7 @@
     mode?: NumericInputMode;
     currency?: string;
     scale?: '100' | '1';
+    locale?: NumericInputLocale | undefined;
     min?: number;
     max?: number;
     step?: number;
@@ -19,7 +29,7 @@
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;
-    describedby?: string;
+    describedby?: string | undefined;
     class?: string;
     onchange?: (value: number | null) => void;
   }
@@ -29,6 +39,7 @@
     mode = 'number',
     currency,
     scale = '100',
+    locale,
     min,
     max,
     step,
@@ -50,27 +61,138 @@
       : Math.min(20, Math.max(0, Math.trunc(precision))),
   );
 
+  const i18n = useTranslation();
+  const localeValue = $derived(isNumericInputLocale(locale) ? locale : undefined);
+  const localeRequested = $derived(locale !== undefined);
+  const localeUnsupported = $derived(localeRequested && localeValue === undefined);
+
+  let localeFocused = $state(false);
+  let localeDraft = $state<string | null>(null);
+  let localeInvalid = $state(false);
+  let observedValue = $state<number | null | undefined>(undefined);
+  let observedLocale = $state<string | NumericInputLocale | undefined>(undefined);
+  let localeInputElement = $state<HTMLInputElement | null>(null);
+  let localeComposing = $state(false);
+  let composedText: string | null = null;
+
+  const localeBoundaryInvalid = $derived.by(() => {
+    if (!localeRequested || value == null) return false;
+    if (!Number.isFinite(value) || !Number.isFinite(displayNumber)) return true;
+    const lower = min != null && Number.isFinite(min) ? min : undefined;
+    const upper = max != null && Number.isFinite(max) ? max : undefined;
+    return (lower !== undefined && value < lower) || (upper !== undefined && value > upper);
+  });
+
+  const localeErrorMessage = $derived(
+    localeUnsupported
+      ? i18n.t('validation.invalidFormat')
+      : localeInvalid || localeBoundaryInvalid || localeComposing
+        ? i18n.t('validation.invalidNumber')
+        : '',
+  );
+
+  const displayNumber = $derived.by(() => {
+    if (value == null || !Number.isFinite(value)) return null;
+    const scaled = mode === 'percent' && scale === '1' ? value * 100 : value;
+    return Number.isFinite(scaled) ? scaled : null;
+  });
+
   const displayValue = $derived.by(() => {
-    if (value == null) return '';
-    const displayed = mode === 'percent' && scale === '1' ? value * 100 : value;
-    return normalizedPrecision === undefined ? String(displayed) : displayed.toFixed(normalizedPrecision);
+    if (displayNumber == null) return '';
+    return normalizedPrecision === undefined
+      ? String(displayNumber)
+      : displayNumber.toFixed(normalizedPrecision);
+  });
+
+  const localizedDisplay = $derived(
+    localeValue ? formatNumericValue(localeValue, displayNumber, normalizedPrecision) : displayValue,
+  );
+  const localizedEditing = $derived(
+    localeValue
+      ? formatNumericEditingText(localeValue, displayNumber, normalizedPrecision)
+      : displayValue,
+  );
+
+  const inputValue = $derived(
+    localeRequested
+      ? localeDraft ?? (localeFocused && localeValue ? localizedEditing : localeValue ? localizedDisplay : displayValue)
+      : displayValue,
+  );
+
+  const submittedValue = $derived(
+    value == null || !Number.isFinite(value) ? '' : String(value),
+  );
+  const hiddenDisabled = $derived(
+    disabled || localeInvalid || localeUnsupported || localeBoundaryInvalid || localeComposing,
+  );
+
+  $effect(() => {
+    if (!localeRequested) return;
+    const current = value;
+    const finite = current == null || Number.isFinite(current);
+    const display = displayNumber;
+    if (!finite || display == null) {
+      if (!Object.is(current, observedValue)) {
+        observedValue = current;
+        localeInvalid = false;
+      }
+      localeDraft = null;
+      return;
+    }
+    if (Object.is(current, observedValue)) return;
+    observedValue = current;
+    localeInvalid = false;
+    localeDraft = localeFocused && localeValue
+      ? formatNumericEditingText(localeValue, display, normalizedPrecision)
+      : null;
+  });
+
+  $effect(() => {
+    const nextLocale = locale;
+    if (Object.is(nextLocale, observedLocale)) return;
+    observedLocale = nextLocale;
+    localeFocused = false;
+    localeDraft = null;
+    localeInvalid = false;
+    localeComposing = false;
+    composedText = null;
+    observedValue = value;
+  });
+
+  $effect(() => {
+    localeInputElement?.setCustomValidity(localeErrorMessage);
   });
 
   const displayMin = $derived(mode === 'percent' && scale === '1' && min != null ? min * 100 : min);
   const displayMax = $derived(mode === 'percent' && scale === '1' && max != null ? max * 100 : max);
-  const resolvedStep = $derived(
-    mode === 'percent' && scale === '1'
-      ? step == null ? 1 : step * 100
-      : step ?? (normalizedPrecision === undefined ? 'any' : 10 ** -normalizedPrecision),
+  const explicitDisplayStep = $derived.by(() => {
+    if (step == null || !Number.isFinite(step) || step <= 0) return undefined;
+    const scaled = mode === 'percent' && scale === '1' ? step * 100 : step;
+    return Number.isFinite(scaled) && scaled > 0 ? scaled : undefined;
+  });
+  const displayStep = $derived(
+    explicitDisplayStep
+      ?? (mode === 'percent' && scale === '1'
+        ? 1
+        : normalizedPrecision === undefined
+          ? undefined
+          : 10 ** -normalizedPrecision),
   );
+  const resolvedStep = $derived(displayStep ?? 'any');
 
   function clamp(next: number): number {
     return Math.min(max ?? next, Math.max(min ?? next, next));
   }
 
-  function handleInput(event: Event): void {
+  function commit(next: number | null): void {
+    observedValue = next;
+    value = next;
+    onchange?.(next);
+  }
+
+  function handleLegacyInput(event: Event): void {
     const input = event.currentTarget;
-    if (!(input instanceof HTMLInputElement)) return;
+    if (!(input instanceof HTMLInputElement) || disabled) return;
     if (input.value === '') {
       value = null;
       onchange?.(null);
@@ -83,27 +205,157 @@
     value = next;
     onchange?.(next);
   }
+
+  function applyLocaleText(text: string): void {
+    if (!localeValue) return;
+    localeDraft = text;
+    const parsed = parseNumericInput(localeValue, text);
+    if (!parsed.ok) {
+      localeInvalid = true;
+      localeInputElement?.setCustomValidity(i18n.t('validation.invalidNumber'));
+      return;
+    }
+    localeInvalid = false;
+    localeInputElement?.setCustomValidity('');
+    if (parsed.value === null) {
+      commit(null);
+      return;
+    }
+    const stored = mode === 'percent' && scale === '1' ? parsed.value / 100 : parsed.value;
+    commit(clamp(stored));
+  }
+
+  function handleLocaleInput(event: Event): void {
+    const input = event.currentTarget;
+    if (!(input instanceof HTMLInputElement) || disabled) return;
+    const text = input.value;
+    if (localeUnsupported) {
+      localeDraft = text;
+      return;
+    }
+    if (!localeValue) return;
+    localeDraft = text;
+    if (localeComposing || (typeof InputEvent !== 'undefined' && event instanceof InputEvent && event.isComposing)) {
+      return;
+    }
+    if (composedText !== null && text === composedText) {
+      composedText = null;
+      return;
+    }
+    composedText = null;
+    applyLocaleText(text);
+  }
+
+  function handleCompositionStart(): void {
+    if (disabled || localeUnsupported || !localeValue) return;
+    localeComposing = true;
+  }
+
+  function handleCompositionEnd(event: Event): void {
+    const input = event.currentTarget;
+    if (!(input instanceof HTMLInputElement) || disabled || localeUnsupported || !localeValue) return;
+    localeComposing = false;
+    composedText = input.value;
+    applyLocaleText(input.value);
+  }
+
+  function handleLocaleFocus(): void {
+    if (disabled || localeUnsupported || !localeValue) return;
+    localeFocused = true;
+    observedValue = value;
+    if (!localeInvalid) localeDraft = localizedEditing;
+  }
+
+  function handleLocaleBlur(): void {
+    localeFocused = false;
+    if (!localeInvalid) localeDraft = null;
+  }
+
+  function handleLocaleKeyDown(event: KeyboardEvent): void {
+    if (disabled || localeUnsupported || !localeValue) return;
+    if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown') return;
+    event.preventDefault();
+    if (localeComposing || event.isComposing) return;
+    const increment = displayStep !== undefined && Number.isFinite(displayStep) && displayStep > 0
+      ? displayStep
+      : 1;
+    const base = value ?? min ?? 0;
+    const displayedBase = mode === 'percent' && scale === '1' ? base * 100 : base;
+    const nextDisplayed = addNumericStep(
+      displayedBase,
+      increment,
+      event.key === 'ArrowUp' ? 1 : -1,
+    );
+    const stored = mode === 'percent' && scale === '1' ? nextDisplayed / 100 : nextDisplayed;
+    const next = clamp(stored);
+    localeInvalid = false;
+    localeInputElement?.setCustomValidity('');
+    localeDraft = formatNumericEditingText(
+      localeValue,
+      mode === 'percent' && scale === '1' ? next * 100 : next,
+      normalizedPrecision,
+    );
+    commit(next);
+  }
 </script>
 
 <div class={cn('svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc', className)} data-numeric-input={mode}>
   {#if mode === 'currency' && currency}
     <span class="svadmin-u-bfa603190748 svadmin-u-012fbd121f37" aria-hidden="true">{currency}</span>
   {/if}
-  <Input
-    {id}
-    {name}
-    type="number"
-    value={displayValue}
-    min={displayMin}
-    max={displayMax}
-    step={resolvedStep}
-    {placeholder}
-    {disabled}
-    {required}
-    aria-invalid={invalid || undefined}
-    aria-describedby={describedby}
-    oninput={handleInput}
-  />
+  {#if localeRequested}
+    {#if name}
+      <input
+        type="hidden"
+        {name}
+        value={submittedValue}
+        disabled={hiddenDisabled}
+        data-numeric-submit-value
+      />
+    {/if}
+    <Input
+      bind:ref={localeInputElement}
+      {id}
+      type="text"
+      inputmode="decimal"
+      role="spinbutton"
+      lang={localeValue}
+      value={inputValue}
+      min={displayMin}
+      max={displayMax}
+      step={resolvedStep}
+      aria-valuemin={displayMin}
+      aria-valuemax={displayMax}
+      aria-valuenow={displayNumber ?? undefined}
+      {placeholder}
+      {disabled}
+      {required}
+      aria-invalid={invalid || localeInvalid || localeBoundaryInvalid || localeUnsupported || undefined}
+      aria-describedby={describedby}
+      onfocus={handleLocaleFocus}
+      onblur={handleLocaleBlur}
+      onkeydown={handleLocaleKeyDown}
+      oninput={handleLocaleInput}
+      oncompositionstart={handleCompositionStart}
+      oncompositionend={handleCompositionEnd}
+    />
+  {:else}
+    <Input
+      {id}
+      {name}
+      type="number"
+      value={displayValue}
+      min={displayMin}
+      max={displayMax}
+      step={resolvedStep}
+      {placeholder}
+      {disabled}
+      {required}
+      aria-invalid={invalid || undefined}
+      aria-describedby={describedby}
+      oninput={handleLegacyInput}
+    />
+  {/if}
   {#if mode === 'percent'}
     <span class="svadmin-u-bfa603190748 svadmin-u-012fbd121f37" aria-hidden="true">%</span>
   {/if}

package/dist/components/NumericInput.svelte.d.ts

@@ -1,9 +1,11 @@
+import { type NumericInputLocale } from './numeric-format.js';
 export type NumericInputMode = 'number' | 'currency' | 'percent';
 interface Props {
     value?: number | null;
     mode?: NumericInputMode;
     currency?: string;
     scale?: '100' | '1';
+    locale?: NumericInputLocale | undefined;
     min?: number;
     max?: number;
     step?: number;
@@ -14,7 +16,7 @@ interface Props {
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;
-    describedby?: string;
+    describedby?: string | undefined;
     class?: string;
     onchange?: (value: number | null) => void;
 }

package/dist/components/PercentInput.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
   import NumericInput from './NumericInput.svelte';
+  import type { NumericInputLocale } from './numeric-format.js';
 
   interface Props {
     value?: number | null;
+    locale?: NumericInputLocale | undefined;
     scale?: '100' | '1';
     min?: number;
     max?: number;
@@ -14,12 +16,12 @@
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;
-    describedby?: string;
+    describedby?: string | undefined;
     class?: string;
     onchange?: (value: number | null) => void;
   }
 
-  let props: Props = $props();
+  let { value = $bindable(null), ...props }: Props = $props();
 </script>
 
-<NumericInput {...props} mode="percent" />
+<NumericInput {...props} bind:value mode="percent" />

package/dist/components/PercentInput.svelte.d.ts

@@ -1,5 +1,7 @@
+import type { NumericInputLocale } from './numeric-format.js';
 interface Props {
     value?: number | null;
+    locale?: NumericInputLocale | undefined;
     scale?: '100' | '1';
     min?: number;
     max?: number;
@@ -11,10 +13,10 @@ interface Props {
     disabled?: boolean;
     required?: boolean;
     invalid?: boolean;
-    describedby?: string;
+    describedby?: string | undefined;
     class?: string;
     onchange?: (value: number | null) => void;
 }
-declare const PercentInput: import("svelte").Component<Props, {}, "">;
+declare const PercentInput: import("svelte").Component<Props, {}, "value">;
 type PercentInput = ReturnType<typeof PercentInput>;
 export default PercentInput;

package/dist/components/PermissionMatrix.svelte

@@ -24,6 +24,7 @@
       return value === key && labels ? labels[translation.locale === 'zh-CN' ? 1 : 0] : value;
     },
   };
+  const instanceId = $props.id();
 
   
   let {
@@ -48,6 +49,7 @@
     // Custom slots for injecting multi-tenant switchers or security filters
     sidebarExtra,
     headerExtra,
+    tableContent,
 
     // Callback event
     onToggle
@@ -63,6 +65,7 @@
     conflictCount?: number;
     sidebarExtra?: Snippet;
     headerExtra?: Snippet;
+    tableContent?: Snippet | undefined;
     onToggle: (role: string, resource: string, action: string, grant: boolean) => void;
   } = $props();
 
@@ -72,6 +75,20 @@
       selectedRole = firstRole.code;
     }
   });
+
+  type PermissionDecision = 'granted' | 'denied' | 'unknown';
+
+  function resolveDecision(role: string, resource: string, action: string): PermissionDecision {
+    if (!role) return 'unknown';
+    try {
+      const value: unknown = isGranted(role, resource, action);
+      if (value === true) return 'granted';
+      if (value === false) return 'denied';
+      return 'unknown';
+    } catch {
+      return 'unknown';
+    }
+  }
 </script>
 
 <div class="svadmin-u-668b21aa5409 svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-f46b61a9b310">
@@ -87,7 +104,11 @@
     
     <!-- Toast Feedback -->
     {#if message}
-      <div class={`svadmin-u-f0faeb26d656 svadmin-u-03b4dd7f172b svadmin-u-5f22e64f2282 svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-438b2237b8d6 svadmin-u-0fe7d7d814d0 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 ${messageType === 'success' ? 'svadmin-u-17a9f7af2265 svadmin-u-76747e5e02ff svadmin-u-3daca9af0861 svadmin-u-be62e835b692' : 'svadmin-u-43928fcc832f svadmin-u-811148b13d1e svadmin-u-3daca9af0861 svadmin-u-5b92fd698365'}`}>
+      <div
+        role={messageType === 'error' ? 'alert' : 'status'}
+        aria-live={messageType === 'error' ? 'assertive' : 'polite'}
+        class={`svadmin-u-f0faeb26d656 svadmin-u-03b4dd7f172b svadmin-u-5f22e64f2282 svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-438b2237b8d6 svadmin-u-0fe7d7d814d0 svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 ${messageType === 'success' ? 'svadmin-u-17a9f7af2265 svadmin-u-76747e5e02ff svadmin-u-3daca9af0861 svadmin-u-be62e835b692' : 'svadmin-u-43928fcc832f svadmin-u-811148b13d1e svadmin-u-3daca9af0861 svadmin-u-5b92fd698365'}`}
+      >
         {#if messageType === 'success'}
            <Check class="svadmin-u-dc7972ebf3f3 svadmin-u-11e59c6d5f6b" />
         {:else}
@@ -100,8 +121,8 @@
 
   <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-2adea12c41f3 svadmin-u-0d304f904cb0 svadmin-u-36e579c0b41c svadmin-u-243d62579c55">
     <div class="svadmin-u-6da6a3c3f741 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-8e63407b5ceb svadmin-u-438b2237b8d6 svadmin-u-a327049cac5b">
-      <label for="permission-role-select" class="svadmin-u-a77ed4d908c0 svadmin-u-0214b4b355d1 svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{i18n.t('permissions.roles') || 'Roles'}</label>
-      <select id="permission-role-select" bind:value={selectedRole} class="svadmin-u-e7a768f922d2 svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-fc7473ca09eb svadmin-u-582e6ef4b245 svadmin-u-55d048ebfb1c svadmin-u-608dd26cd5ba svadmin-u-80b9d0ae125f svadmin-u-6b22a22a9752" disabled={roles.length === 0}>
+      <label for={`${instanceId}-permission-role-select`} class="svadmin-u-a77ed4d908c0 svadmin-u-0214b4b355d1 svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{i18n.t('permissions.roles') || 'Roles'}</label>
+      <select id={`${instanceId}-permission-role-select`} value={selectedRole} onchange={(event) => { selectedRole = event.currentTarget.value; }} class="svadmin-u-e7a768f922d2 svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-fc7473ca09eb svadmin-u-582e6ef4b245 svadmin-u-55d048ebfb1c svadmin-u-608dd26cd5ba svadmin-u-80b9d0ae125f svadmin-u-6b22a22a9752" disabled={roles.length === 0}>
         {#each roles as role (role.code)}<option value={role.code}>{role.name}</option>{/each}
       </select>
       {#if roles.length === 0}<p class="svadmin-u-50d0d216a2f8 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('permissions.noRoles') || 'No roles available'}</p>{/if}
@@ -114,7 +135,9 @@
       <div class="svadmin-u-da7c36cd8867 svadmin-u-36e579c0b41c svadmin-u-92bf82f493b1">
         {#each roles as role, _i (_i)}
           <button 
+            type="button"
             onclick={() => selectedRole = role.code}
+            aria-pressed={selectedRole === role.code}
             class="svadmin-u-6da6a3c3f741 svadmin-u-2eba0d65d059 svadmin-u-0e17f2bd9074 svadmin-u-e7ee55ac7ffe svadmin-u-5f22e64f2282 svadmin-u-fc7473ca09eb svadmin-u-0fe7d7d814d0 svadmin-u-625a4c3fbeb2 {selectedRole === role.code ? 'svadmin-u-375dc44df6e9 svadmin-u-20aaf08a7ed1 svadmin-u-2689f3958069 svadmin-u-438b2237b8d6 svadmin-u-3daca9af0861 svadmin-u-2b6f77ad4036' : 'svadmin-u-d4108abe6359 svadmin-u-8e551981c8d7'}"
           >
             {role.name}
@@ -161,6 +184,9 @@
       
       <!-- Table Area -->
       <div class="svadmin-u-36e579c0b41c svadmin-u-73fc3fb18ceb svadmin-u-8e63407b5ceb">
+        {#if tableContent}
+          {@render tableContent()}
+        {:else}
         <table class="svadmin-u-a1e7a8069878 svadmin-u-5f22e64f2282 svadmin-u-2cd02d11d1af svadmin-u-438b2237b8d6 svadmin-u-3daca9af0861 svadmin-u-a10fdd7667ee">
           <thead class="svadmin-u-358af0b65a31">
             <tr>
@@ -197,19 +223,28 @@
                 
                 <!-- Action Checkboxes -->
                 {#each actions as action, _i (_i)}
-                  {@const granted = selectedRole ? isGranted(selectedRole, resource.code, action.code) : false}
+                  {@const decision = selectedRole ? resolveDecision(selectedRole, resource.code, action.code) : 'unknown'}
+                  {@const granted = decision === 'granted'}
+                  {@const actionable = !loading && !!selectedRole && decision !== 'unknown'}
                   <td class="svadmin-u-e82ae8be04aa svadmin-u-0e17f2bd9074 svadmin-u-1b2d54a3fd12 svadmin-u-ca6bf63030aa">
                     <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227">
                       <button 
-                        disabled={loading || !selectedRole}
-                        aria-label="Toggle {action.name}"
-                        onclick={() => onToggle(selectedRole as string, resource.code, action.code, !granted)}
-                        class="svadmin-u-7ec10f86d9b1 svadmin-u-f6fe902450dc svadmin-u-07389a777c1f svadmin-u-ca6bcd4b6f3f svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-0fe7d7d814d0 svadmin-u-55d048ebfb1c svadmin-u-608dd26cd5ba svadmin-u-094cedcfedfd {granted ? 'svadmin-u-75b1bec3ea0e svadmin-u-6cbc84dd9e1a svadmin-u-30ca335ae9c2' : 'svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0557b88819cd'} {loading || !selectedRole ? 'svadmin-u-0b8c506a0596 svadmin-u-29b733e4c162' : 'svadmin-u-34516836730d'}"
+                        type="button"
+                        disabled={!actionable}
+                        aria-label={translation.t('permissions.toggleAction').replaceAll('{action}', () => action.name)}
+                        aria-describedby={`${instanceId}-permission-${resource.code}-${action.code}`}
+                        aria-pressed={granted}
+                        onclick={() => { if (actionable) onToggle(selectedRole as string, resource.code, action.code, !granted); }}
+                        class="svadmin-u-7ec10f86d9b1 svadmin-u-f6fe902450dc svadmin-u-07389a777c1f svadmin-u-ca6bcd4b6f3f svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-0fe7d7d814d0 svadmin-u-55d048ebfb1c svadmin-u-608dd26cd5ba svadmin-u-094cedcfedfd {granted ? 'svadmin-u-75b1bec3ea0e svadmin-u-6cbc84dd9e1a svadmin-u-30ca335ae9c2' : 'svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0557b88819cd'} {!actionable ? 'svadmin-u-0b8c506a0596 svadmin-u-29b733e4c162' : 'svadmin-u-34516836730d'}"
                       >
                         <svg class="svadmin-u-bf600f8e029c svadmin-u-7fc7f732bf7e {granted ? 'svadmin-u-0214b4b355d1' : 'svadmin-u-99d72c7fc3e2'}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
                           <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                         </svg>
                       </button>
+                      <span id={`${instanceId}-permission-${resource.code}-${action.code}`} class="svadmin-sr-only">
+                        {roles.find(role => role.code === selectedRole)?.name || selectedRole} {selectedRole ? `(${selectedRole})` : ''}
+                        / {resource.name} ({resource.code}) / {action.name} ({action.code})
+                      </span>
                     </div>
                   </td>
                 {/each}
@@ -217,6 +252,7 @@
             {/each}
           </tbody>
         </table>
+        {/if}
       </div>
     </div>
   </div>

package/dist/components/PermissionMatrix.svelte.d.ts

@@ -12,6 +12,7 @@ type $$ComponentProps = {
     conflictCount?: number;
     sidebarExtra?: Snippet;
     headerExtra?: Snippet;
+    tableContent?: Snippet | undefined;
     onToggle: (role: string, resource: string, action: string, grant: boolean) => void;
 };
 declare const PermissionMatrix: import("svelte").Component<$$ComponentProps, {}, "selectedRole">;