@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/table/table-cells/table-actions-cell.svelte.d.ts

@@ -1,17 +1,17 @@
-import { type DropdownPosition } from '../../dropdown';
+import type { Placement } from '@floating-ui/dom';
 import type { Snippet } from 'svelte';
 type Props = {
-    dropdownPosition?: DropdownPosition;
+    popoverPosition?: Placement;
     children: Snippet;
 };
 /**
- * Actions cell for table rows. Shows a dropdown trigger with a "more" icon.
+ * Actions cell for table rows. Shows a popover trigger with a "more" icon.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--table-actions-cell--trigger--border-color` | Trigger button border color | `light-dark(primary-50, primary-900)` |
- * | `--sc-kit--table-actions-cell--trigger--icon-color` | Trigger icon color | `light-dark(primary-300, primary-400)` |
+ * | `--sc-kit--table-actions-cell--trigger--border-color` | Trigger button border color | `--sc-kit--color--accent--soft` |
+ * | `--sc-kit--table-actions-cell--trigger--icon-color` | Trigger icon color | `--sc-kit--color--accent` |
  */
 declare const TableActionsCell: import("svelte").Component<Props, {}, "">;
 type TableActionsCell = ReturnType<typeof TableActionsCell>;

package/dist/ui/table/table-cells/table-badge-cell.svelte

@@ -1,12 +1,12 @@
 <script lang="ts" generics="T extends {id: string}">import { Badge } from '../../badge';
 let { item, column } = $props();
 const getValueForColumn = (column, item) => (column.valueFactory ? column.valueFactory(item) : String(item[column.id]));
-const color = $derived(column.colorFactory ? column.colorFactory(item) : 'default');
+const variant = $derived(column.variantFactory ? column.variantFactory(item) : 'neutral');
 </script>
 
 {#if getValueForColumn(column, item) !== null}
   <div class="table-badge-cell">
-    <Badge color={color} rounded={column.roundedBadge ?? false}>{getValueForColumn(column, item)}</Badge>
+    <Badge variant={variant}>{getValueForColumn(column, item)}</Badge>
   </div>
 {/if}
 

package/dist/ui/table/table-cells/table-button-cell.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" generics="T extends {id: string}">import { Button } from '../../button';
 let { item, column } = $props();
 const getValueForColumn = (column, item) => (column.valueFactory ? column.valueFactory(item) : String(item[column.id]));
-const variant = $derived(column.styleFactory ? column.styleFactory(item) : null);
-const size = $derived(column.sizeFactory ? column.sizeFactory(item) : null);
+const variant = $derived(column.styleFactory ? column.styleFactory(item) : undefined);
+const size = $derived(column.sizeFactory ? column.sizeFactory(item) : undefined);
 const handleClick = (e) => {
     e.stopPropagation();
     column.onClick?.(item);
@@ -11,7 +11,7 @@ const handleClick = (e) => {
 
 {#if getValueForColumn(column, item) !== null}
   <div class="table-button-cell">
-    <Button variant={variant} size={size} on={{ click: handleClick }}>{getValueForColumn(column, item)}</Button>
+    <Button type="button" variant={variant} size={size} on={{ click: handleClick }}>{getValueForColumn(column, item)}</Button>
   </div>
 {/if}
 

package/dist/ui/table/table-cells/table-by-cell.svelte

@@ -30,22 +30,17 @@ const navigateToUser = (event, by) => {
   {#if dateTime}
     {#if by}
       <span class="table-by-cell__by">
-        <Tooltip position="bottom" offset={5}>
-          {#snippet trigger()}
-            {@const href = getHref(by)}
-            {#if href}
-              <a href={href} onclick={(e) => navigateToUser(e, by)} class="table-by-cell__by-image">
-                <ImageRound src={by.image} />
-              </a>
-            {:else}
-              <span class="table-by-cell__by-image">
-                <ImageRound src={by.image} />
-              </span>
-            {/if}
-          {/snippet}
-          <div class="table-by-cell__by-name">
-            {by.name}
-          </div>
+        <Tooltip text={by.name} placement="bottom">
+          {@const href = getHref(by)}
+          {#if href}
+            <a href={href} onclick={(e) => navigateToUser(e, by)} class="table-by-cell__by-image">
+              <ImageRound src={by.image} />
+            </a>
+          {:else}
+            <span class="table-by-cell__by-image">
+              <ImageRound src={by.image} />
+            </span>
+          {/if}
         </Tooltip>
       </span>
     {/if}
@@ -65,7 +60,7 @@ const navigateToUser = (event, by) => {
 
 <style>.table-by-cell {
   --_table-by-cell--font-size: var(--sc-kit--table--cell--font-size, 0.875em);
-  --_table-by-cell--no-date--color: var(--sc-color--text-paragraph, #9ca3af);
+  --_table-by-cell--no-date--color: var(--sc-kit--color--text--muted);
   height: 3.125em;
   min-height: 3.125em;
   max-height: 3.125em;
@@ -98,8 +93,4 @@ const navigateToUser = (event, by) => {
   display: flex;
   align-items: center;
   width: var(--_table-by-cell--image--size, 1.5em);
-}
-.table-by-cell__by-name {
-  font-size: var(--_table-by-cell--font-size);
-  padding: 1em;
 }</style>

package/dist/ui/table/table-cells/table-checkbox-cell.svelte

@@ -17,5 +17,8 @@ const toggle = () => {
 </div>
 
 <style>.table-checkbox-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: var(--_table--cell--font-size);
 }</style>

package/dist/ui/table/table-cells/table-icon-cell.svelte

@@ -1,8 +1,7 @@
-<script lang="ts" generics="T extends {id: string}">import { Icon } from '../../icon';
+<script lang="ts" generics="T extends {id: string}">import { IconSlot } from '../../icon';
 import { Tooltip } from '../../tooltip';
 let { item, column } = $props();
-const iconSrc = $derived(column.iconSrcFactory ? column.iconSrcFactory(item) : String(item[column.id]));
-const iconColor = $derived(column.colorFactory ? column.colorFactory(item) : null);
+const iconProp = $derived(column.iconFactory ? column.iconFactory(item) : String(item[column.id]));
 const cssWidth = (column) => {
     if (column?.fixedCssWidth) {
         return `width: ${column.fixedCssWidth};`;
@@ -13,41 +12,19 @@ const cssWidth = (column) => {
 
 <div class="table-icon-cell" style={cssWidth(column)}>
   {#if column.tooltipTextFactory && column.tooltipTextFactory(item)}
-    <Tooltip>
-      {#snippet trigger()}
-        <Icon src={iconSrc} color={iconColor} />
-      {/snippet}
-      <div class="table-icon-cell__tooltip">
-        {column.tooltipTextFactory(item)}
-      </div>
+    <Tooltip text={column.tooltipTextFactory(item)}>
+      <IconSlot icon={iconProp} />
     </Tooltip>
   {:else}
-    <Icon src={iconSrc} color={iconColor} />
+    <IconSlot icon={iconProp} />
   {/if}
 </div>
 
 <!--
 @component
 Icon cell for table rows. Displays an icon with optional tooltip.
-
-### CSS Custom Properties
-| Property | Description | Default |
-|---|---|---|
-| `--sc-kit--table-icon-cell--tooltip--color` | Tooltip text color | `white` |
-| `--sc-kit--table-icon-cell--tooltip--background` | Tooltip background color | `black` |
-| `--sc-kit--table-icon-cell--tooltip--opacity` | Tooltip opacity | `70%` |
 -->
 
 <style>.table-icon-cell {
-  --_table-icon-cell--tooltip--color: var(--sc-kit--table-icon-cell--tooltip--color, #ffffff);
-  --_table-icon-cell--tooltip--background: var(--sc-kit--table-icon-cell--tooltip--background, #000000);
-  --_table-icon-cell--tooltip--opacity: var(--sc-kit--table-icon-cell--tooltip--opacity, 70%);
-}
-.table-icon-cell__tooltip {
-  background-color: var(--_table-icon-cell--tooltip--background);
-  font-size: 0.875em;
-  padding: 0.5714em 1.1429em;
-  border-radius: 0.2857em;
-  color: var(--_table-icon-cell--tooltip--color);
-  opacity: var(--_table-icon-cell--tooltip--opacity);
+  display: inline-flex;
 }</style>

package/dist/ui/table/table-cells/table-icon-cell.svelte.d.ts

@@ -31,16 +31,7 @@ interface $$IsomorphicComponent {
     }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-/**
- * Icon cell for table rows. Displays an icon with optional tooltip.
- *
- * ### CSS Custom Properties
- * | Property | Description | Default |
- * |---|---|---|
- * | `--sc-kit--table-icon-cell--tooltip--color` | Tooltip text color | `white` |
- * | `--sc-kit--table-icon-cell--tooltip--background` | Tooltip background color | `black` |
- * | `--sc-kit--table-icon-cell--tooltip--opacity` | Tooltip opacity | `70%` |
- */
+/** Icon cell for table rows. Displays an icon with optional tooltip. */
 declare const TableIconCell: $$IsomorphicComponent;
 type TableIconCell<T extends {
     id: string;

package/dist/ui/table/table-cells/table-move-row-cell.svelte

@@ -21,9 +21,9 @@ const onDown = () => on?.down?.();
   gap: 0.125rem;
   justify-content: space-evenly;
   --sc-kit--icon--size: 1rem;
-  opacity: 0;
-  transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  opacity: var(--_table--move-row-cell-opacity, 0);
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .move-row-cell button:disabled {
-  --sc-kit--icon--color: #6b7280;
+  --sc-kit--icon--color: var(--sc-kit--color--text--muted);
 }</style>

package/dist/ui/table/table-cells/table-select-cell.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" generics="T extends {id: string}">import { Singleselect } from '../../selects';
+<script lang="ts" generics="T extends {id: string}">import { Singleselect } from '../../select';
 let { item, column } = $props();
 const getValueForColumn = (column, item) => (column.valueFactory ? column.valueFactory(item) : item[column.id]);
 const onSelected = (value) => {
@@ -8,15 +8,21 @@ const onSelected = (value) => {
 </script>
 
 {#if !column.visibilityFactory || column.visibilityFactory(item)}
-  <Singleselect
-    placeholder={column.placeholder || ' '}
-    value={getValueForColumn(column, item)}
-    options={column.optionsFactory(item)}
-    disabled={(column.disabledFactory && column.disabledFactory(item)) || false}
-    allowReset={column.allowReset}
-    on={{
-      change: (v) => {
-        onSelected(v);
-      }
-    }} />
+  {#if column.clearable}
+    <Singleselect
+      clearable
+      placeholder={column.placeholder || ' '}
+      value={getValueForColumn(column, item)}
+      options={column.optionsFactory(item)}
+      disabled={(column.disabledFactory && column.disabledFactory(item)) || false}
+      on={{ change: (v) => onSelected(v) }} />
+  {:else}
+    <Singleselect
+      clearable={false}
+      placeholder={column.placeholder || ' '}
+      value={getValueForColumn(column, item)}
+      options={column.optionsFactory(item)}
+      disabled={(column.disabledFactory && column.disabledFactory(item)) || false}
+      on={{ change: (v) => onSelected(v) }} />
+  {/if}
 {/if}

package/dist/ui/table/table-cells/table-text-cell.svelte

@@ -37,14 +37,11 @@ Text cell for table rows. Supports plain text, date, date-time, and HTML formats
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--table-text-cell--clickable--color` | Text color when column has onClick | `light-dark(primary-500, primary-400)` |
+| `--sc-kit--table-text-cell--clickable--color` | Text color when column has onClick | `--sc-kit--color--accent` |
 -->
 
 <style>.table-text-cell {
-  --_table-text-cell--clickable--color: var(
-    --sc-kit--table-text-cell--clickable--color,
-    light-dark(#144ab0, #5a8dec)
-  );
+  --_table-text-cell--clickable--color: var(--sc-kit--table-text-cell--clickable--color, var(--sc-kit--color--accent));
   display: flex;
   align-content: center;
   font-size: var(--_table--cell--font-size);

package/dist/ui/table/table-cells/table-text-cell.svelte.d.ts

@@ -38,7 +38,7 @@ interface $$IsomorphicComponent {
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--table-text-cell--clickable--color` | Text color when column has onClick | `light-dark(primary-500, primary-400)` |
+ * | `--sc-kit--table-text-cell--clickable--color` | Text color when column has onClick | `--sc-kit--color--accent` |
  */
 declare const TableTextCell: $$IsomorphicComponent;
 type TableTextCell<T extends {

package/dist/ui/table/table-cells/table-text-input-cell.svelte

@@ -1,10 +1,11 @@
-<script lang="ts" generics="T extends {id: string}">import { Input, NumeralInput } from '../../inputs';
+<script lang="ts" generics="T extends {id: string}">import { Input } from '../../input';
 import { LineClamp } from '../../line-clamp';
+import { NumeralInput } from '../../numeral-input';
 import { untrack } from 'svelte';
 let { item, column } = $props();
 let errorText = $state('');
 const onInput = async (val) => {
-    item[column.id] = String(val);
+    item[column.id] = val === null ? '' : String(val);
     await validate();
     if (column.onInput) {
         column.onInput(item, item[column.id]);
@@ -39,7 +40,7 @@ $effect(() => {
 
 <div class="table-text-input-cell" class:table-text-input-cell--errored={!!errorText}>
   {#if column.inputType === 'number'}
-    <NumeralInput value={item[column.id]} on={{ input: onInput }} />
+    <NumeralInput clearable value={item[column.id]} on={{ input: onInput }} />
   {:else}
     <Input value={item[column.id]} on={{ input: onInput }} />
   {/if}
@@ -51,33 +52,18 @@ $effect(() => {
 </div>
 
 <style>.table-text-input-cell {
+  position: relative;
   font-size: var(--_table--cell--font-size);
-  --sc-kit--validatable--margin-bottom: 1.5em;
   padding-top: 1.5em;
-  --_validatable--error--color: var(--sc-kit--validatable--error--color, #e71d36);
-  --_validatable--error--position: var(--sc-kit--validatable--error--position, absolute);
-  --_validatable--error--left: var(--sc-kit--validatable--error--left, 0);
-  --_validatable--error--right: var(--sc-kit--validatable--error--right, 0);
-  --_validatable--margin-bottom: var(--sc-kit--validatable--margin-bottom, 1.1em);
-  --_validatable--margin-right: var(--sc-kit--validatable--margin-right, 0);
-  --_validatable--display: var(--sc-kit--validatable--display, block);
-  --_validatable--width: var(--sc-kit--validatable--width, auto);
-  position: relative;
-  margin-bottom: var(--_validatable--margin-bottom);
-  margin-right: var(--_validatable--margin-right);
-  display: var(--_validatable--display);
-  width: var(--_validatable--width);
-}
-.table-text-input-cell--errored {
-  --_input--explicit-shadow-color: var(--_validatable--error--color);
+  margin-bottom: 1.5em;
 }
 .table-text-input-cell__error {
-  position: var(--_validatable--error--position);
+  position: absolute;
   top: calc(100% + 0.1em);
-  left: var(--_validatable--error--left);
-  right: var(--_validatable--error--right);
+  left: 0;
+  right: 0;
   display: block;
-  color: var(--_validatable--error--color);
-  font-size: 0.7rem;
+  color: var(--sc-kit--color--danger);
+  font-size: 0.6875rem;
   font-weight: 400;
 }</style>

package/dist/ui/table/table-columns-manager/cmp.table-columns-manager.svelte

@@ -1,8 +1,8 @@
 <script lang="ts" generics="T extends {id: string}">import { LocalStorageItem } from '../../../core/local-storage';
 import { Button } from '../../button';
-import { Dropdown } from '../../dropdown';
 import { IconText } from '../../icon-text';
 import { ReorderableToggleList } from '../../page-toolbar';
+import { Popover } from '../../popover';
 import { TableColumnsManagerLocalization } from './table-columns-manager-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 import IconColumnTwo from '@fluentui/svg-icons/icons/text_column_two_20_regular.svg?raw';
@@ -75,10 +75,10 @@ const handleChange = (updatedItems) => {
 };
 </script>
 
-<Dropdown position="bottom-start" keepDropdownOpen>
+<Popover position="bottom-start" keepOpen>
   {#snippet trigger()}
-    <Button variant="standard" size="small">
-      <IconText icon={IconColumnTwo} iconColor="blue" secondaryIcon={IconChevronDown}>{localization.columns}</IconText>
+    <Button type="button" variant="secondary" size="sm">
+      <IconText icon={{ src: IconColumnTwo, color: 'accent' }} secondaryIcon={IconChevronDown}>{localization.columns}</IconText>
     </Button>
   {/snippet}
   <div class="columns-manager">
@@ -87,24 +87,21 @@ const handleChange = (updatedItems) => {
       <ReorderableToggleList items={items} on={{ change: handleChange }} />
     </div>
   </div>
-</Dropdown>
+</Popover>
 
 <!--
 @component
-Column visibility and order manager for tables. Shows a dropdown with a reorderable toggle list for each hideable column.
+Column visibility and order manager for tables. Shows a popover with a reorderable toggle list for each hideable column.
 Supports optional localStorage persistence of column order and visibility.
 
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--table-columns-manager--title--color` | Title text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+| `--sc-kit--table-columns-manager--title--color` | Title text color | `var(--sc-kit--color--text--primary)` |
 -->
 
 <style>.columns-manager {
-  --_columns-manager--title--color: var(
-    --sc-kit--table-columns-manager--title--color,
-    var(--sc-color--text-primary, light-dark(#000000, #ffffff))
-  );
+  --_columns-manager--title--color: var(--sc-kit--table-columns-manager--title--color, var(--sc-kit--color--text--primary));
   width: 21.875rem;
   padding: 1.5rem;
 }

package/dist/ui/table/table-columns-manager/cmp.table-columns-manager.svelte.d.ts

@@ -41,13 +41,13 @@ interface $$IsomorphicComponent {
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /**
- * Column visibility and order manager for tables. Shows a dropdown with a reorderable toggle list for each hideable column.
+ * Column visibility and order manager for tables. Shows a popover with a reorderable toggle list for each hideable column.
  * Supports optional localStorage persistence of column order and visibility.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--table-columns-manager--title--color` | Title text color | `var(--sc-color--text-primary, light-dark(black, white))` |
+ * | `--sc-kit--table-columns-manager--title--color` | Title text color | `var(--sc-kit--color--text--primary)` |
  */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends {

package/dist/ui/table/table-group-actions/cmp.table-group-actions.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" generics="T extends {id: string}">import { Button } from '../../button';
-import { Dropdown, DropdownItem } from '../../dropdown';
 import { IconText } from '../../icon-text';
+import { Popover, PopoverItem } from '../../popover';
 import { TableGroupActionsLocalization } from './table-group-actions-localization';
 import IconChevronDown from '@fluentui/svg-icons/icons/chevron_down_20_regular.svg?raw';
 let { groupActions, selection } = $props();
@@ -15,25 +15,25 @@ const singleGroupAction = $derived(availableGroupActions[0]);
 {#if selection.items.length && availableGroupActions.length}
   <div class="table-group-actions">
     {#if availableGroupActions.length > 1}
-      <Dropdown position="bottom-end">
+      <Popover position="bottom-end">
         {#snippet trigger()}
-          <Button variant="standard" size="small">
-            <IconText icon={IconChevronDown} iconPosition="right">{localization.actions}</IconText>
+          <Button type="button" variant="secondary" size="sm">
+            <IconText icon={IconChevronDown} iconPosition="trailing">{localization.actions}</IconText>
           </Button>
         {/snippet}
         {#each groupActions as action (action)}
           {#if isActionVisible(action, selection.items)}
-            <DropdownItem on={{ click: () => action.action(selection.items) }}>
-              <IconText icon={action.icon} iconColor={action.color}>
+            <PopoverItem on={{ click: () => action.action(selection.items) }}>
+              <IconText icon={action.icon}>
                 {action.title}
               </IconText>
-            </DropdownItem>
+            </PopoverItem>
           {/if}
         {/each}
-      </Dropdown>
+      </Popover>
     {:else if singleGroupAction}
-      <Button variant="standard" size="small" on={{ click: () => singleGroupAction.action(selection.items) }}>
-        <IconText icon={singleGroupAction.icon} iconColor={singleGroupAction.color}>
+      <Button type="button" variant="secondary" size="sm" on={{ click: () => singleGroupAction.action(selection.items) }}>
+        <IconText icon={singleGroupAction.icon}>
           {singleGroupAction.title}
         </IconText>
       </Button>
@@ -43,14 +43,14 @@ const singleGroupAction = $derived(availableGroupActions[0]);
 
 <!--
 @component
-Group actions toolbar for table selections. Shows a single button or dropdown with multiple actions based on the current selection.
+Group actions toolbar for table selections. Shows a single button or popover with multiple actions based on the current selection.
 -->
 
 <style>.table-group-actions {
   display: contents;
-  --sc-kit--dropdown-item--font-size: 0.875rem;
-  --sc-kit--dropdown-item--min-width: 11.25rem;
-  --sc-kit--dropdown-item--padding: 0.75rem 1.25rem;
+  --sc-kit--popover-item--font-size: 0.875rem;
+  --sc-kit--popover-item--min-width: 11.25rem;
+  --sc-kit--popover-item--padding: 0.75rem 1.25rem;
   --sc-kit--icon-text--text--font-size: 0.875rem;
   --sc-kit--icon-text--icon--font-size: 1.125rem;
 }</style>

package/dist/ui/table/table-group-actions/cmp.table-group-actions.svelte.d.ts

@@ -32,7 +32,7 @@ interface $$IsomorphicComponent {
     }>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-/** Group actions toolbar for table selections. Shows a single button or dropdown with multiple actions based on the current selection. */
+/** Group actions toolbar for table selections. Shows a single button or popover with multiple actions based on the current selection. */
 declare const Cmp: $$IsomorphicComponent;
 type Cmp<T extends {
     id: string;

package/dist/ui/table/table-group-actions/types.svelte.d.ts

@@ -1,8 +1,7 @@
-import type { IconColor } from '../../icon';
+import type { IconProp } from '../../icon';
 export type TableGroupAction<T> = {
     title: string;
-    icon?: string;
-    color?: IconColor;
+    icon?: IconProp;
     action: (items: T[]) => void;
     visibilityFactory?: (items: T[]) => boolean;
 };

package/dist/ui/table/table-headers/table-header-sortable.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">import { Checkbox } from '../../checkbox';
-import { Dropdown } from '../../dropdown';
 import { Icon } from '../../icon';
+import { Popover } from '../../popover';
 import { TableHeaderSortableLocalization } from './table-header-sortable-localization';
 import TableHeader from './table-header.svelte';
 import IconCaretDownFilled from '@fluentui/svg-icons/icons/caret_down_16_filled.svg?raw';
@@ -21,7 +21,7 @@ const changeSort = (direction) => {
   <div class="th-sortable" class:th-sortable--centered={column.centered}>
     {@render children?.()}
     <span>&nbsp;</span>
-    <Dropdown position="bottom-start">
+    <Popover position="bottom-start">
       {#snippet trigger()}
         <button type="button" class="th-sortable__marker">
           <span class="th-sortable__title">
@@ -31,7 +31,7 @@ const changeSort = (direction) => {
         </button>
       {/snippet}
 
-      <div class="th-sortable__dropdown">
+      <div class="th-sortable__popover">
         <div class="th-sortable__dropdown-title">{localization.orderBy}</div>
         {#if column.type === 'by'}
           <div class="th-sortable__dropdown-option">
@@ -62,7 +62,7 @@ const changeSort = (direction) => {
           </div>
         {/if}
       </div>
-    </Dropdown>
+    </Popover>
   </div>
 </TableHeader>
 
@@ -82,7 +82,7 @@ const changeSort = (direction) => {
   align-self: center;
   text-transform: inherit;
 }
-.th-sortable__dropdown {
+.th-sortable__popover {
   font-size: 0.875em;
   min-width: 14.5625em;
   padding: 1.375em 1.75em;

package/dist/ui/table/table-headers/table-header.svelte

@@ -11,8 +11,8 @@ export {};
 </div>
 
 <style>.table-header {
-  font-size: var(--_table--cell--font-size);
-  font-weight: 400;
-  text-transform: none;
+  display: flex;
+  align-items: center;
+  justify-content: var(--_table-header--justify-content, flex-start);
   white-space: nowrap;
 }</style>

package/dist/ui/table/table-model.svelte.d.ts

@@ -27,7 +27,7 @@ export declare class TableModel<T extends WithId> {
     get columns(): ResolvedColumn<T>[];
     get itemActions(): TableItemAction<T>[];
     get itemGroupActions(): TableGroupAction<T>[];
-    get styles(): TableStyles;
+    get styles(): Readonly<TableStyles>;
     get selection(): Repository<T>;
     get editingItem(): T | null;
     get highlightedItemIds(): string[];
@@ -36,6 +36,7 @@ export declare class TableModel<T extends WithId> {
     set columns(value: IAnyTableColumn<T>[]);
     set editingItem(value: T | null);
     set highlightedItemIds(value: string[]);
+    updateStyles: (styles: Partial<TableStyles>) => void;
     setResolvedColumns: (columns: ResolvedColumn<T>[]) => void;
     private reconcileColumns;
     private mapColumn;

package/dist/ui/table/table-model.svelte.js

@@ -11,7 +11,7 @@ export class TableModel {
     _columns = $state.raw([]);
     _itemActions = $state.raw([]);
     _itemGroupActions = $state.raw([]);
-    _styles;
+    _styles = $state({ stickyHeader: true });
     _selection;
     _preserveSelection = false;
     _dataProvider;
@@ -97,6 +97,9 @@ export class TableModel {
     set highlightedItemIds(value) {
         this._highlightedItemIds = value;
     }
+    updateStyles = (styles) => {
+        Object.assign(this._styles, styles);
+    };
     setResolvedColumns = (columns) => {
         this._columns = columns;
     };