@urbicon-ui/table 6.1.4

package/dist/core/EmptyState.svelte

@@ -0,0 +1,161 @@
+<script lang="ts">
+  import { useTableI18n } from '../i18n';
+  import { emptyStateVariants, tableRowVariants, type EmptyStateVariantProps } from '../variants';
+  import { getTableStyleConfig, resolveSlotClass } from './table-style-context';
+
+  const tt = useTableI18n();
+
+  export type EmptyStateProps = {
+    message?: string;
+    description?: string;
+    icon?: string;
+    actionText?: string;
+    onAction?: () => void;
+    colSpan?: number;
+    class?: string;
+    testId?: string;
+    useI18n?: boolean;
+    size?: EmptyStateVariantProps['size'];
+  };
+
+  let {
+    message = undefined,
+    description = undefined,
+    icon = undefined,
+    actionText = undefined,
+    onAction = undefined,
+    colSpan = 1,
+    class: className = '',
+    testId = 'empty-state',
+    useI18n = true,
+    size = 'md'
+  }: EmptyStateProps = $props();
+
+  const styleConfig = getTableStyleConfig();
+
+  // Smart message with I18n fallback
+  const displayMessage = $derived.by(() => {
+    if (message) return message;
+
+    if (useI18n) {
+      return tt('data.empty');
+    }
+
+    return 'No data found';
+  });
+
+  // Smart action text with I18n fallback
+  const displayActionText = $derived.by(() => {
+    if (actionText) return actionText;
+
+    if (useI18n && onAction) {
+      return tt('data.refresh');
+    }
+
+    return actionText;
+  });
+
+  // TV Styles
+  const styles = $derived(emptyStateVariants({ size }));
+  const rowStyles = $derived(tableRowVariants({ size }));
+
+  // Event handlers
+  function handleAction() {
+    if (onAction) {
+      onAction();
+    }
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (onAction && (event.key === 'Enter' || event.key === ' ')) {
+      event.preventDefault();
+      onAction();
+    }
+  }
+</script>
+
+<tr class={rowStyles.row()} data-testid={testId}>
+  <td colspan={colSpan} class={rowStyles.cell()}>
+    <div
+      class={resolveSlotClass(
+        styles.container(),
+        styleConfig.slotClasses.emptyState,
+        styleConfig.unstyled,
+        className
+      )}
+    >
+      {#if icon}
+        <div class={styles.icon()}>
+          {#if icon === 'search'}
+            <svg
+              class={styles.iconSvg()}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <circle cx="11" cy="11" r="8"></circle>
+              <path d="M21 21L16.65 16.65"></path>
+            </svg>
+          {:else if icon === 'database'}
+            <svg
+              class={styles.iconSvg()}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
+              <path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"></path>
+              <path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"></path>
+            </svg>
+          {:else if icon === 'inbox'}
+            <svg
+              class={styles.iconSvg()}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <polyline points="22,12 18,12 15,21 9,21 6,12 2,12"></polyline>
+              <path
+                d="M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"
+              ></path>
+            </svg>
+          {:else}
+            <!-- Consumer-provided SVG markup; they are responsible for
+                 sanitisation (same contract as the other icon slots). -->
+            <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+            {@html icon}
+          {/if}
+        </div>
+      {/if}
+
+      <div class={styles.content()}>
+        <h3 class={styles.title()}>
+          {displayMessage}
+        </h3>
+
+        {#if description}
+          <p class={styles.description()}>
+            {description}
+          </p>
+        {/if}
+
+        {#if displayActionText && onAction}
+          <button
+            class={styles.action()}
+            onclick={handleAction}
+            onkeydown={handleKeyDown}
+            type="button"
+          >
+            {displayActionText}
+          </button>
+        {/if}
+      </div>
+    </div>
+  </td>
+</tr>

package/dist/core/EmptyState.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type EmptyStateVariantProps } from '../variants';
+export type EmptyStateProps = {
+    message?: string;
+    description?: string;
+    icon?: string;
+    actionText?: string;
+    onAction?: () => void;
+    colSpan?: number;
+    class?: string;
+    testId?: string;
+    useI18n?: boolean;
+    size?: EmptyStateVariantProps['size'];
+};
+declare const EmptyState: import("svelte").Component<EmptyStateProps, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/core/ErrorState.svelte

@@ -0,0 +1,158 @@
+<script lang="ts">
+  import { useTableI18n } from '../i18n';
+  import { errorStateVariants, tableRowVariants, type ErrorStateVariantProps } from '../variants';
+  import { getTableStyleConfig, resolveSlotClass } from './table-style-context';
+
+  const tt = useTableI18n();
+
+  export type ErrorStateProps = {
+    title?: string;
+    message?: string;
+    details?: string;
+    retryText?: string;
+    onRetry?: () => void;
+    colSpan?: number;
+    className?: string;
+    testId?: string;
+    size?: ErrorStateVariantProps['size'];
+  };
+
+  let {
+    title = tt('error.loadingError'),
+    message = tt('error.genericMessage'),
+    details = undefined,
+    retryText = tt('error.retry'),
+    onRetry = undefined,
+    colSpan = 1,
+    className = '',
+    testId = 'error-state',
+    size = 'md'
+  }: ErrorStateProps = $props();
+
+  const styleConfig = getTableStyleConfig();
+
+  let showDetails = $state(false);
+
+  // TV Styles
+  const styles = $derived(errorStateVariants({ size, detailsExpanded: showDetails }));
+  const rowStyles = $derived(tableRowVariants({ size }));
+
+  // Event handlers
+  function handleRetry() {
+    if (onRetry) {
+      onRetry();
+    }
+  }
+
+  function toggleDetails() {
+    showDetails = !showDetails;
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      const target = event.target as HTMLElement;
+
+      if (target.classList.contains('retry-button')) {
+        handleRetry();
+      } else if (target.classList.contains('details-toggle')) {
+        toggleDetails();
+      }
+    }
+  }
+</script>
+
+<tr class={rowStyles.row()} data-testid={testId}>
+  <td colspan={colSpan} class={rowStyles.cell()}>
+    <div
+      class={resolveSlotClass(
+        styles.container(),
+        styleConfig.slotClasses.errorState,
+        styleConfig.unstyled,
+        className
+      )}
+    >
+      <div class={styles.icon()}>
+        <svg
+          class={styles.iconSvg()}
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="12" cy="12" r="10"></circle>
+          <line x1="15" y1="9" x2="9" y2="15"></line>
+          <line x1="9" y1="9" x2="15" y2="15"></line>
+        </svg>
+      </div>
+
+      <div class={styles.content()}>
+        <h3 class={styles.title()}>
+          {title}
+        </h3>
+
+        <p class={styles.message()}>
+          {message}
+        </p>
+
+        {#if details}
+          <div class={styles.details()}>
+            <button
+              class="{styles.detailsToggle()} details-toggle"
+              onclick={toggleDetails}
+              onkeydown={handleKeyDown}
+              type="button"
+              aria-expanded={showDetails}
+            >
+              <span>{tt('actions.showDetails')}</span>
+              <svg
+                class={styles.detailsIcon()}
+                width="16"
+                height="16"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <polyline points="6,9 12,15 18,9"></polyline>
+              </svg>
+            </button>
+
+            {#if showDetails}
+              <div class={styles.detailsContent()}>
+                <pre class={styles.detailsText()}>{details}</pre>
+              </div>
+            {/if}
+          </div>
+        {/if}
+
+        {#if onRetry}
+          <button
+            class="{styles.retryButton()} retry-button"
+            onclick={handleRetry}
+            onkeydown={handleKeyDown}
+            type="button"
+          >
+            <svg
+              class={styles.retryIcon()}
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <polyline points="23,4 23,10 17,10"></polyline>
+              <polyline points="1,20 1,14 7,14"></polyline>
+              <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
+            </svg>
+            {retryText}
+          </button>
+        {/if}
+      </div>
+    </div>
+  </td>
+</tr>

package/dist/core/ErrorState.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type ErrorStateVariantProps } from '../variants';
+export type ErrorStateProps = {
+    title?: string;
+    message?: string;
+    details?: string;
+    retryText?: string;
+    onRetry?: () => void;
+    colSpan?: number;
+    className?: string;
+    testId?: string;
+    size?: ErrorStateVariantProps['size'];
+};
+declare const ErrorState: import("svelte").Component<ErrorStateProps, {}, "">;
+type ErrorState = ReturnType<typeof ErrorState>;
+export default ErrorState;

package/dist/core/GroupedRow.svelte

@@ -0,0 +1,239 @@
+<script lang="ts">
+  import { slide } from 'svelte/transition';
+  import {
+    resolveIcon,
+    Checkbox,
+    ChevronDownIcon as ChevronDownIconDefault
+  } from '@urbicon-ui/blocks';
+  import { getTableContext } from '../stores/TableStore.svelte';
+  import { useTableI18n } from '../i18n';
+
+  const ChevronDownIcon = resolveIcon('chevronDown', ChevronDownIconDefault);
+  import { groupHeaderVariants, type GroupHeaderVariantProps } from '../variants';
+  import { tableRowVariants } from '../variants';
+  import TableCell from './TableCell.svelte';
+  import { getTableStyleConfig, resolveSlotClass } from './table-style-context';
+  import { getStickyContext } from './sticky-context.svelte';
+  import { resolveColumnId } from '../utils';
+  import type { Column, TableItem } from '../types/tableTypes';
+  import type { Snippet } from 'svelte';
+
+  const tt = useTableI18n();
+
+  export type GroupedRowProps = {
+    groupName: string;
+    items: TableItem[];
+    expandable?: boolean;
+    expandedRowContent?: Snippet<[item: TableItem]>;
+    cell?: Snippet<[item: TableItem, value: unknown, column: Column]>;
+    size?: GroupHeaderVariantProps['size'];
+    class?: string;
+    testId?: string;
+    groupHeaderContent?: Snippet<[groupName: string, items: TableItem[], isExpanded: boolean]>;
+    onRowClick?: (item: TableItem) => void;
+  };
+
+  let {
+    groupName,
+    items,
+    expandable = false,
+    expandedRowContent = undefined,
+    cell = undefined,
+    size = 'md',
+    class: className = '',
+    testId = undefined,
+    groupHeaderContent,
+    onRowClick = undefined
+  }: GroupedRowProps = $props();
+
+  // Table context
+  const tableContext = getTableContext();
+  const { state: tableState, toggleGroupExpand, toggleExpand, isItemExpanded } = tableContext;
+
+  // Reactive computations
+  const computedTestId = $derived.by(() => {
+    if (testId) return testId;
+    return `grouped-row-${groupName.replace(/\s+/g, '-').toLowerCase()}`;
+  });
+
+  const isExpanded = $derived.by(() => {
+    return !tableState.collapsedGroups.has(groupName);
+  });
+
+  let selectable = $derived(tableState.selectionMode !== 'none');
+  const styleConfig = getTableStyleConfig();
+  const stickyContext = getStickyContext();
+
+  const colSpan = $derived.by(() => {
+    let count = tableState.columns.length;
+    if (expandable) count++; // For expand column
+    if (tableState.groupByKey) count++; // For group indentation column
+    if (selectable) count++; // For selection checkbox column
+    return count;
+  });
+
+  const displayGroupName = $derived.by(() => {
+    if (groupName === '' || groupName === null || groupName === undefined) {
+      return tt('group.noGroup');
+    }
+    return String(groupName);
+  });
+
+  const itemCountText = $derived.by(() => {
+    const count = items.length;
+    return `(${count} ${count === 1 ? tt('group.item') : tt('group.items')})`;
+  });
+
+  // Tailwind-Variants styling
+  const styles = $derived(groupHeaderVariants({ size, sticky: stickyContext.mode.group }));
+
+  // TableRow styles for individual items
+  const rowStyles = $derived(
+    tableRowVariants({
+      state: 'default',
+      size
+    })
+  );
+
+  // Event handlers
+  function handleToggleGroup() {
+    toggleGroupExpand(groupName);
+  }
+
+  function handleKeyDown(event: KeyboardEvent) {
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      handleToggleGroup();
+    }
+  }
+
+  function handleItemToggleExpand(e: MouseEvent, row: TableItem) {
+    e.stopPropagation();
+    if (!expandable) return;
+    const candidate = row.id ?? row.__index;
+    if (typeof candidate === 'string' || typeof candidate === 'number') {
+      toggleExpand(candidate);
+    }
+  }
+</script>
+
+<!-- Group Header Row -->
+<tr
+  class={resolveSlotClass(
+    styles.row(),
+    styleConfig.slotClasses.groupHeader,
+    styleConfig.unstyled,
+    className
+  )}
+  data-testid={computedTestId}
+  id={`grouped-item-${groupName}`}
+>
+  <td
+    colspan={colSpan}
+    class={styles.cell()}
+    onclick={handleToggleGroup}
+    onkeydown={handleKeyDown}
+    role="button"
+    tabindex="0"
+    aria-expanded={isExpanded}
+    aria-label="{displayGroupName} {isExpanded
+      ? tt('header.collapseAllGroups')
+      : tt('header.expandAllGroups')}"
+  >
+    <div class={styles.content()}>
+      <!-- Expand/Collapse Icon -->
+      <div class={styles.chevron()}>
+        <ChevronDownIcon class={styles.chevron()} size={16} />
+      </div>
+
+      <!-- Group Name and Count -->
+      <div class={styles.content()}>
+        <span class={styles.title()}>
+          {displayGroupName}
+        </span>
+        <span class={styles.count()}>
+          {itemCountText}
+        </span>
+      </div>
+
+      <!-- Custom header content or actions -->
+      <div class={styles.actions()}>
+        {#if groupHeaderContent}
+          {@render groupHeaderContent(groupName, items, isExpanded)}
+        {/if}
+      </div>
+    </div>
+  </td>
+</tr>
+
+<!-- Group Content Rows -->
+{#if isExpanded}
+  {#each items as item, index (item.id ?? index)}
+    {@const rowItemId =
+      typeof item.id === 'string' || typeof item.id === 'number' ? item.id : index}
+    {@const isRowExpanded = isItemExpanded(rowItemId)}
+    {@const isRowSelected = selectable && tableContext.isSelected(rowItemId)}
+    <tr
+      class={rowStyles.row()}
+      transition:slide={{ duration: 150 }}
+      aria-selected={selectable ? isRowSelected : undefined}
+      data-testid={`grouped-item-${rowItemId}`}
+    >
+      {#if selectable}
+        <td class="{rowStyles.cell()} w-12" onclick={(e) => e.stopPropagation()}>
+          <div class="flex h-full w-full items-center justify-center">
+            <Checkbox
+              checked={isRowSelected}
+              onchange={() => tableContext.toggleItem(rowItemId)}
+              aria-label={isRowSelected ? tt('selection.deselectRow') : tt('selection.selectRow')}
+              size="sm"
+            />
+          </div>
+        </td>
+      {/if}
+
+      {#if tableState.groupByKey}
+        <td class={rowStyles.cell()} aria-hidden="true"></td>
+      {/if}
+
+      {#if expandable}
+        <td class="{rowStyles.cell()} w-10">
+          <div class="flex h-full w-full items-center justify-center px-2 py-2">
+            <button
+              class="table-expand-button rounded-modify flex h-6 w-6 items-center justify-center transition-transform duration-(--blocks-duration-fast) {isRowExpanded
+                ? 'rotate-180'
+                : ''}"
+              onclick={(e) => handleItemToggleExpand(e, item)}
+              aria-label={tt('actions.showDetails')}
+              data-testid={`expand-button-${rowItemId}`}
+            >
+              <ChevronDownIcon class="h-4 w-4" />
+            </button>
+          </div>
+        </td>
+      {/if}
+
+      {#each tableContext.orderedColumns as column (resolveColumnId(column))}
+        <TableCell
+          {item}
+          {column}
+          {cell}
+          {size}
+          cellClass={rowStyles.cell()}
+          testIdPrefix="grouped-cell"
+        />
+      {/each}
+    </tr>
+
+    <!-- Expanded row content -->
+    {#if isRowExpanded && expandedRowContent}
+      <tr data-testid={`expanded-row-${rowItemId}`} class="border-b-0">
+        <td colspan={colSpan} class="p-0">
+          <div class="bg-surface-elevated/50 px-6 py-4" transition:slide={{ duration: 150 }}>
+            {@render expandedRowContent(item)}
+          </div>
+        </td>
+      </tr>
+    {/if}
+  {/each}
+{/if}

package/dist/core/GroupedRow.svelte.d.ts

@@ -0,0 +1,18 @@
+import { type GroupHeaderVariantProps } from '../variants';
+import type { Column, TableItem } from '../types/tableTypes';
+import type { Snippet } from 'svelte';
+export type GroupedRowProps = {
+    groupName: string;
+    items: TableItem[];
+    expandable?: boolean;
+    expandedRowContent?: Snippet<[item: TableItem]>;
+    cell?: Snippet<[item: TableItem, value: unknown, column: Column]>;
+    size?: GroupHeaderVariantProps['size'];
+    class?: string;
+    testId?: string;
+    groupHeaderContent?: Snippet<[groupName: string, items: TableItem[], isExpanded: boolean]>;
+    onRowClick?: (item: TableItem) => void;
+};
+declare const GroupedRow: import("svelte").Component<GroupedRowProps, {}, "">;
+type GroupedRow = ReturnType<typeof GroupedRow>;
+export default GroupedRow;

package/dist/core/LoadingState.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+  import { useTableI18n } from '../i18n';
+  import { Spinner } from '@urbicon-ui/blocks';
+  import {
+    loadingStateVariants,
+    tableRowVariants,
+    type LoadingStateVariantProps
+  } from '../variants';
+  import { getTableStyleConfig, resolveSlotClass } from './table-style-context';
+
+  const tt = useTableI18n();
+
+  export type LoadingStateProps = {
+    text?: string;
+    description?: string;
+    showSpinner?: boolean;
+    colSpan?: number;
+    class?: string;
+    testId?: string;
+    useI18n?: boolean;
+    size?: LoadingStateVariantProps['size'];
+  };
+
+  let {
+    text = undefined,
+    description = undefined,
+    showSpinner = true,
+    colSpan = 1,
+    class: className = '',
+    testId = 'loading-state',
+    useI18n = true,
+    size = 'md'
+  }: LoadingStateProps = $props();
+
+  const SPINNER_SIZE_MAP = { sm: 'sm', md: 'md', lg: 'lg' } as const;
+
+  const displayText = $derived.by(() => {
+    if (text) return text;
+    if (useI18n) return tt('data.loading');
+    return 'Loading data...';
+  });
+
+  const styles = $derived(loadingStateVariants({ size }));
+  const rowStyles = $derived(tableRowVariants({ size }));
+  const styleConfig = getTableStyleConfig();
+</script>
+
+<tr class={rowStyles.row()} data-testid={testId}>
+  <td colspan={colSpan} class={rowStyles.cell()}>
+    <div
+      class={resolveSlotClass(
+        styles.container(),
+        styleConfig.slotClasses.loadingState,
+        styleConfig.unstyled,
+        className
+      )}
+    >
+      {#if showSpinner}
+        <Spinner size={SPINNER_SIZE_MAP[size]} intent="primary" label={displayText} />
+      {/if}
+
+      <div class={styles.content()}>
+        <h3 class={styles.text()}>
+          {displayText}
+        </h3>
+
+        {#if description}
+          <p class={styles.description()}>
+            {description}
+          </p>
+        {/if}
+      </div>
+    </div>
+  </td>
+</tr>

package/dist/core/LoadingState.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type LoadingStateVariantProps } from '../variants';
+export type LoadingStateProps = {
+    text?: string;
+    description?: string;
+    showSpinner?: boolean;
+    colSpan?: number;
+    class?: string;
+    testId?: string;
+    useI18n?: boolean;
+    size?: LoadingStateVariantProps['size'];
+};
+declare const LoadingState: import("svelte").Component<LoadingStateProps, {}, "">;
+type LoadingState = ReturnType<typeof LoadingState>;
+export default LoadingState;