@sewadah/selaras 0.1.1 → 0.2.0

package/dist/runtime/components/SlideoverRenderer.vue

@@ -1,27 +1,34 @@
 <script setup>
-import { useSlideover } from "../composables/use-slideover";
+import { onUnmounted } from "vue";
+import { useSlideoverService } from "../internal/programmatic-services";
+import ProgrammaticTheme from "../internal/ProgrammaticTheme.vue";
 import Slideover from "./Slideover.vue";
-const { slideovers, close, remove } = useSlideover();
+const { instances: slideovers, close, remove, dispose } = useSlideoverService();
+onUnmounted(dispose);
 </script>
 
 <template>
-  <Slideover
+  <ProgrammaticTheme
     v-for="instance in slideovers"
     :key="instance.id"
-    :open="instance.isOpen"
-    :title="instance.title"
-    :description="instance.description"
-    :side="instance.side"
-    :inset="instance.inset"
-    :dismissible="instance.dismissible"
-    :modal="instance.modal"
-    :overlay="instance.overlay"
-    :transition="instance.transition"
-    @update:open="(open) => !open && close(instance.id)"
-    @after-leave="remove(instance.id)"
+    :snapshot="instance._theme"
   >
-    <template #content>
-      <component :is="instance.component" v-bind="instance.props" @close="(value) => close(instance.id, value)" />
-    </template>
-  </Slideover>
+    <Slideover
+      :open="instance.isOpen"
+      :title="instance.title"
+      :description="instance.description"
+      :side="instance.side"
+      :inset="instance.inset"
+      :dismissible="instance.dismissible"
+      :modal="instance.modal"
+      :overlay="instance.overlay"
+      :transition="instance.transition"
+      @update:open="(open) => !open && close(instance.id)"
+      @after-leave="remove(instance.id)"
+    >
+      <template #content>
+        <component :is="instance.component" v-bind="instance.props" @close="(value) => close(instance.id, value)" />
+      </template>
+    </Slideover>
+  </ProgrammaticTheme>
 </template>

package/dist/runtime/components/Slider.d.vue.ts

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { SliderThemeSlots } from '../theme/slider.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { sliderTheme } from '../theme/slider.js';
 type SliderVariants = VariantProps<typeof sliderTheme>;
@@ -19,7 +20,7 @@ export interface SliderProps {
     /** Shows a tick mark at every step along the track - own addition, Reka's primitive has no tick/mark concept of its own. */
     showTicks?: boolean;
     size?: SliderVariants['size'];
-    color?: SliderVariants['color'];
+    color?: ColorRole;
     /** @default 'circle' */
     thumbVariant?: SliderVariants['thumbVariant'];
     /** Shows the current value in a tooltip on hover/focus of each thumb - reuses Tooltip, not a bespoke floating label. */

package/dist/runtime/components/Slider.vue

@@ -4,6 +4,7 @@ import { computed, ref, watch } from "vue";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { sliderTheme } from "../theme/slider";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Button from "./Button.vue";
 import Tooltip from "./Tooltip.vue";
@@ -83,9 +84,10 @@ const ticks = computed(() => {
   });
 });
 const theme = useComponentTheme("slider", sliderTheme);
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
   size: props.size,
-  color: props.color,
+  color: effectiveColor.value,
   orientation: props.orientation,
   thumbVariant: props.thumbVariant
 }));
@@ -109,6 +111,7 @@ const endProps = computed(() => resolveSlot(ui.value.end, props.ui?.end));
     :orientation="orientation"
     :inverted="inverted"
     :name="name"
+    :data-selaras-color="effectiveColor"
     v-bind="rootProps"
     @update:model-value="onUpdateModelValue"
     @value-commit="onValueCommit"

package/dist/runtime/components/Slider.vue.d.ts

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { SliderThemeSlots } from '../theme/slider.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { sliderTheme } from '../theme/slider.js';
 type SliderVariants = VariantProps<typeof sliderTheme>;
@@ -19,7 +20,7 @@ export interface SliderProps {
     /** Shows a tick mark at every step along the track - own addition, Reka's primitive has no tick/mark concept of its own. */
     showTicks?: boolean;
     size?: SliderVariants['size'];
-    color?: SliderVariants['color'];
+    color?: ColorRole;
     /** @default 'circle' */
     thumbVariant?: SliderVariants['thumbVariant'];
     /** Shows the current value in a tooltip on hover/focus of each thumb - reuses Tooltip, not a bespoke floating label. */

package/dist/runtime/components/SplitterResizeHandle.d.vue.ts

@@ -1,11 +1,14 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { SplitterResizeHandleThemeSlots } from '../theme/splitter-resize-handle.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { splitterResizeHandleTheme } from '../theme/splitter-resize-handle.js';
 type SplitterResizeHandleVariants = VariantProps<typeof splitterResizeHandleTheme>;
 export interface SplitterResizeHandleProps {
     /** Match the parent Splitter's own `direction` - this isn't read from it automatically. @default 'horizontal' */
     direction?: SplitterResizeHandleVariants['direction'];
+    /** The hover and drag accent. @default 'primary' */
+    color?: ColorRole;
     disabled?: boolean;
     ui?: UiProp<SplitterResizeHandleThemeSlots>;
 }

package/dist/runtime/components/SplitterResizeHandle.vue

@@ -2,21 +2,24 @@
 import { SplitterResizeHandle as RekaSplitterResizeHandle } from "reka-ui";
 import { computed } from "vue";
 import { splitterResizeHandleTheme } from "../theme/splitter-resize-handle";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   direction: { type: null, required: false, default: "horizontal" },
+  color: { type: null, required: false },
   disabled: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });
 const theme = useComponentTheme("splitterResizeHandle", splitterResizeHandleTheme);
-const ui = computed(() => theme.value({ direction: props.direction }));
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ direction: props.direction, color: effectiveColor.value }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
 const lineProps = computed(() => resolveSlot(ui.value.line, props.ui?.line));
 </script>
 
 <template>
-  <RekaSplitterResizeHandle :disabled="disabled" v-bind="rootProps">
+  <RekaSplitterResizeHandle :disabled="disabled" :data-selaras-color="effectiveColor" v-bind="rootProps">
     <div v-bind="lineProps" />
   </RekaSplitterResizeHandle>
 </template>

package/dist/runtime/components/SplitterResizeHandle.vue.d.ts

@@ -1,11 +1,14 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { SplitterResizeHandleThemeSlots } from '../theme/splitter-resize-handle.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { splitterResizeHandleTheme } from '../theme/splitter-resize-handle.js';
 type SplitterResizeHandleVariants = VariantProps<typeof splitterResizeHandleTheme>;
 export interface SplitterResizeHandleProps {
     /** Match the parent Splitter's own `direction` - this isn't read from it automatically. @default 'horizontal' */
     direction?: SplitterResizeHandleVariants['direction'];
+    /** The hover and drag accent. @default 'primary' */
+    color?: ColorRole;
     disabled?: boolean;
     ui?: UiProp<SplitterResizeHandleThemeSlots>;
 }

package/dist/runtime/components/Stepper.d.vue.ts

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { StepperThemeSlots } from '../theme/stepper.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { stepperTheme } from '../theme/stepper.js';
 type StepperVariants = VariantProps<typeof stepperTheme>;
@@ -19,7 +20,7 @@ export interface StepperProps {
     linear?: boolean;
     orientation?: StepperVariants['orientation'];
     size?: StepperVariants['size'];
-    color?: StepperVariants['color'];
+    color?: ColorRole;
     ui?: UiProp<StepperThemeSlots>;
 }
 export interface StepperEmits {

package/dist/runtime/components/Stepper.vue

@@ -3,6 +3,7 @@ import { StepperDescription, StepperIndicator, StepperItem, StepperRoot, Stepper
 import { computed } from "vue";
 import { useIcons } from "../composables/use-icons";
 import { stepperTheme } from "../theme/stepper";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -20,10 +21,11 @@ const emit = defineEmits(["update:modelValue"]);
 defineSlots();
 const icons = useIcons();
 const theme = useComponentTheme("stepper", stepperTheme);
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
 const ui = computed(() => theme.value({
   orientation: props.orientation,
   size: props.size,
-  color: props.color
+  color: effectiveColor.value
 }));
 const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
 const itemProps = computed(() => resolveSlot(ui.value.item, props.ui?.item));
@@ -43,6 +45,7 @@ const separatorProps = computed(() => resolveSlot(ui.value.separator, props.ui?.
     :default-value="defaultValue"
     :linear="linear"
     :orientation="orientation"
+    :data-selaras-color="effectiveColor"
     v-bind="rootProps"
     @update:model-value="(value) => emit('update:modelValue', value)"
   >

package/dist/runtime/components/Stepper.vue.d.ts

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { StepperThemeSlots } from '../theme/stepper.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { stepperTheme } from '../theme/stepper.js';
 type StepperVariants = VariantProps<typeof stepperTheme>;
@@ -19,7 +20,7 @@ export interface StepperProps {
     linear?: boolean;
     orientation?: StepperVariants['orientation'];
     size?: StepperVariants['size'];
-    color?: StepperVariants['color'];
+    color?: ColorRole;
     ui?: UiProp<StepperThemeSlots>;
 }
 export interface StepperEmits {

package/dist/runtime/components/Switch.d.vue.ts

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { SwitchThemeSlots } from '../theme/switch.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { switchTheme } from '../theme/switch.js';
 type SwitchVariants = VariantProps<typeof switchTheme>;
@@ -14,7 +15,7 @@ export interface SwitchProps {
     invalid?: boolean;
     required?: boolean;
     size?: SwitchVariants['size'];
-    color?: SwitchVariants['color'];
+    color?: ColorRole;
     /** Shows a spinner in the thumb. Doesn't imply `disabled` - combine `:loading="x" :disabled="x"` if a busy switch shouldn't be touchable. Takes precedence over checkedIcon/uncheckedIcon. */
     loading?: boolean;
     /** Icon shown in the thumb when on. */

package/dist/runtime/components/Switch.vue

@@ -4,6 +4,7 @@ import { computed } from "vue";
 import { useFormField } from "../composables/use-form-field";
 import { useIcons } from "../composables/use-icons";
 import { switchTheme } from "../theme/switch";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps, withFallthroughClass } from "../utils/ui";
 import Icon from "./Icon.vue";
 defineOptions({ inheritAttrs: false });
@@ -30,7 +31,8 @@ const switchInvalid = computed(() => props.invalid || (field?.invalid.value ?? f
 const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
 const describedBy = computed(() => field?.describedBy.value);
 const theme = useComponentTheme("switch", switchTheme);
-const ui = computed(() => theme.value({ invalid: switchInvalid.value, size: effectiveSize.value, color: props.color }));
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({ invalid: switchInvalid.value, size: effectiveSize.value, color: effectiveColor.value }));
 const rootProps = useRootProps(() => ui.value.root, () => withFallthroughClass(props.description ? "items-start" : void 0, props.ui?.root));
 const trackProps = computed(() => resolveSlot(ui.value.track, withFallthroughClass(props.description ? "mt-0.5" : void 0, props.ui?.track)));
 const thumbProps = computed(() => resolveSlot(ui.value.thumb, props.ui?.thumb));
@@ -42,7 +44,7 @@ const icons = useIcons();
 </script>
 
 <template>
-  <label v-bind="rootProps">
+  <label :data-selaras-color="switchInvalid ? 'danger' : effectiveColor" v-bind="rootProps">
     <SwitchRoot
       :id="switchId"
       :model-value="modelValue"

package/dist/runtime/components/Switch.vue.d.ts

@@ -1,5 +1,6 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { SwitchThemeSlots } from '../theme/switch.js';
+import type { ColorRole } from '../utils/color-registry.js';
 import type { UiProp } from '../utils/ui.js';
 import { switchTheme } from '../theme/switch.js';
 type SwitchVariants = VariantProps<typeof switchTheme>;
@@ -14,7 +15,7 @@ export interface SwitchProps {
     invalid?: boolean;
     required?: boolean;
     size?: SwitchVariants['size'];
-    color?: SwitchVariants['color'];
+    color?: ColorRole;
     /** Shows a spinner in the thumb. Doesn't imply `disabled` - combine `:loading="x" :disabled="x"` if a busy switch shouldn't be touchable. Takes precedence over checkedIcon/uncheckedIcon. */
     loading?: boolean;
     /** Icon shown in the thumb when on. */

package/dist/runtime/components/Table.d.vue.ts

@@ -1,83 +1,31 @@
-import type { TableThemeSlots } from '../theme/table.js';
-import type { UiProp } from '../utils/ui.js';
-export interface TableProps {
-    data: unknown[];
-    columns?: any[];
-    selectable?: boolean;
-    pageSize?: number;
-    loading?: boolean;
-    sorting?: any[];
-    defaultSorting?: any[];
-    rowSelection?: Record<string, boolean>;
-    globalFilter?: string;
-    pageIndex?: number;
-    size?: 'sm' | 'md' | 'lg';
-    gridlines?: boolean;
-    striped?: boolean;
-    expandable?: boolean;
-    expanded?: any;
-    columnVisibility?: Record<string, boolean>;
-    columnToggle?: boolean;
-    /** Enables vertical scroll with a sticky header, capped at this CSS height (e.g. '24rem'). */
-    scrollHeight?: string;
-    virtualize?: boolean | {
-        estimateSize?: number;
-        overscan?: number;
-    };
-    /** Opts out of the local sorted/filtered/paginated row models - set when `data` is already sorted/filtered/paginated server-side, so this table doesn't redundantly (and incorrectly) reprocess an already-server-processed slice. `sorting`/`globalFilter`/`pageIndex` still drive the UI and still emit their `update:*` events the same way - only the *local row model* is skipped, not the state itself. `manualPagination` also suppresses the built-in Pagination UI entirely (there's no way to know the real page count from a server-paginated slice) - bring your own `SPagination`, bound to your own server metadata, the same way this table already expects you to bring your own search input for `globalFilter`. */
-    manualSorting?: boolean;
-    manualFiltering?: boolean;
-    manualPagination?: boolean;
-    /** Adds a class to a body row based on its own data - e.g. highlighting a flagged row. Called per row, not per render, so keep it cheap. */
-    rowClass?: (row: unknown) => string | undefined;
-    /** Same as `rowClass`, for inline styles. */
-    rowStyle?: (row: unknown) => Record<string, string> | undefined;
-    ui?: UiProp<TableThemeSlots>;
-}
-export interface TableEmits {
-    'update:sorting': [value: any[]];
-    'update:rowSelection': [value: Record<string, boolean>];
-    'update:globalFilter': [value: string];
-    'update:pageIndex': [value: number];
-    'update:expanded': [value: any];
-    'update:columnVisibility': [value: Record<string, boolean>];
-    'rowClick': [row: unknown, event: MouseEvent];
-    'rowContextmenu': [row: unknown, event: MouseEvent];
-}
-declare var __VLS_44: {
-    row: import("@tanstack/vue-table").RowData;
-}, __VLS_51: {};
-type __VLS_Slots = {} & {
-    expanded?: (props: typeof __VLS_44) => any;
-} & {
-    empty?: (props: typeof __VLS_51) => any;
+import type { RowData } from '@tanstack/vue-table';
+import type { TableProps, TableSlots } from '../utils/table-contracts.js';
+declare const __VLS_export: <TData extends RowData = RowData>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TableProps<TData> & {
+        "onUpdate:sorting"?: ((value: import("@tanstack/vue-table").SortingState) => any) | undefined;
+        "onUpdate:rowSelection"?: ((value: import("@tanstack/vue-table").RowSelectionState) => any) | undefined;
+        "onUpdate:globalFilter"?: ((value: string) => any) | undefined;
+        "onUpdate:pageIndex"?: ((value: number) => any) | undefined;
+        "onUpdate:expanded"?: ((value: import("@tanstack/vue-table").ExpandedState) => any) | undefined;
+        "onUpdate:columnVisibility"?: ((value: import("@tanstack/vue-table").ColumnVisibilityState) => any) | undefined;
+        onRowClick?: ((row: TData, event: MouseEvent) => any) | undefined;
+        onRowContextmenu?: ((row: TData, event: MouseEvent) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        exportCsv: (filename?: string) => void;
+    }>) => void;
+    attrs: any;
+    slots: TableSlots<TData>;
+    emit: ((evt: "update:sorting", value: import("@tanstack/vue-table").SortingState) => void) & ((evt: "update:rowSelection", value: import("@tanstack/vue-table").RowSelectionState) => void) & ((evt: "update:globalFilter", value: string) => void) & ((evt: "update:pageIndex", value: number) => void) & ((evt: "update:expanded", value: import("@tanstack/vue-table").ExpandedState) => void) & ((evt: "update:columnVisibility", value: import("@tanstack/vue-table").ColumnVisibilityState) => void) & ((evt: "rowClick", row: TData, event: MouseEvent) => void) & ((evt: "rowContextmenu", row: TData, event: MouseEvent) => void);
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-declare const __VLS_base: import("vue").DefineComponent<TableProps, {
-    exportCsv: (filename?: string) => void;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:sorting": (value: any[]) => any;
-    "update:rowSelection": (value: Record<string, boolean>) => any;
-    "update:globalFilter": (value: string) => any;
-    "update:pageIndex": (value: number) => any;
-    "update:expanded": (value: any) => any;
-    "update:columnVisibility": (value: Record<string, boolean>) => any;
-    rowClick: (row: unknown, event: MouseEvent) => any;
-    rowContextmenu: (row: unknown, event: MouseEvent) => any;
-}, string, import("vue").PublicProps, Readonly<TableProps> & Readonly<{
-    "onUpdate:sorting"?: ((value: any[]) => any) | undefined;
-    "onUpdate:rowSelection"?: ((value: Record<string, boolean>) => any) | undefined;
-    "onUpdate:globalFilter"?: ((value: string) => any) | undefined;
-    "onUpdate:pageIndex"?: ((value: number) => any) | undefined;
-    "onUpdate:expanded"?: ((value: any) => any) | undefined;
-    "onUpdate:columnVisibility"?: ((value: Record<string, boolean>) => any) | undefined;
-    onRowClick?: ((row: unknown, event: MouseEvent) => any) | undefined;
-    onRowContextmenu?: ((row: unknown, event: MouseEvent) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_WithSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/runtime/components/Table.vue

@@ -1,11 +1,12 @@
 <script setup>
 import { FlexRender } from "@tanstack/vue-table";
 import { useVirtualizer } from "@tanstack/vue-virtual";
-import { computed, getCurrentInstance, h, nextTick, onMounted, onUnmounted, ref, useSlots, watch, watchEffect } from "vue";
+import { computed, getCurrentInstance, h, nextTick, onMounted, onUnmounted, ref, watch, watchEffect } from "vue";
 import { useIcons } from "../composables/use-icons";
 import { useMessages } from "../composables/use-messages";
 import { useTable } from "../composables/use-table";
 import { tableTheme } from "../theme/table";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { collectColumnPinning, convertChildrenToColumns } from "../utils/table-columns";
 import { exportTableToCsv } from "../utils/table-export";
 import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps, withFallthroughClass } from "../utils/ui";
@@ -21,33 +22,42 @@ const props = defineProps({
   selectable: { type: Boolean, required: false },
   pageSize: { type: Number, required: false },
   loading: { type: Boolean, required: false },
-  sorting: { type: Array, required: false },
-  defaultSorting: { type: Array, required: false },
-  rowSelection: { type: Object, required: false },
+  sorting: { type: null, required: false },
+  defaultSorting: { type: null, required: false },
+  rowSelection: { type: null, required: false },
   globalFilter: { type: String, required: false },
   pageIndex: { type: Number, required: false },
   size: { type: String, required: false, default: "md" },
+  color: { type: null, required: false },
   gridlines: { type: Boolean, required: false },
   striped: { type: Boolean, required: false },
   expandable: { type: Boolean, required: false },
   expanded: { type: null, required: false },
-  columnVisibility: { type: Object, required: false },
+  columnVisibility: { type: null, required: false },
   columnToggle: { type: Boolean, required: false },
   scrollHeight: { type: String, required: false },
   virtualize: { type: [Boolean, Object], required: false },
   manualSorting: { type: Boolean, required: false },
   manualFiltering: { type: Boolean, required: false },
   manualPagination: { type: Boolean, required: false },
+  getRowId: { type: Function, required: false },
   rowClass: { type: Function, required: false },
   rowStyle: { type: Function, required: false },
   ui: { type: Object, required: false }
 });
 const emit = defineEmits(["update:sorting", "update:rowSelection", "update:globalFilter", "update:pageIndex", "update:expanded", "update:columnVisibility", "rowClick", "rowContextmenu"]);
-const slots = useSlots();
+const slots = defineSlots();
 const icons = useIcons();
 const messages = useMessages();
 const theme = useComponentTheme("table", tableTheme);
-const ui = computed(() => theme.value({ size: props.size, gridlines: props.gridlines, striped: props.striped, scrollable: !!props.scrollHeight }));
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const ui = computed(() => theme.value({
+  size: props.size,
+  color: effectiveColor.value,
+  gridlines: props.gridlines,
+  striped: props.striped,
+  scrollable: !!props.scrollHeight
+}));
 const selectColumn = {
   id: "__select__",
   header: ({ table: table2 }) => h(Checkbox, {
@@ -64,13 +74,15 @@ const selectColumn = {
 };
 const expandColumn = {
   id: "__expand__",
-  header: "",
+  // An empty-string component root has no SSR text node to hydrate. Render
+  // no content explicitly so Vue preserves a stable comment anchor instead.
+  header: () => null,
   cell: ({ row }) => h("button", {
     "type": "button",
-    "class": ui.value.expandButton(),
+    ...resolveSlot(ui.value.expandButton, props.ui?.expandButton),
     "aria-label": row.getIsExpanded() ? messages.value.collapseRow : messages.value.expandRow,
     "onClick": () => row.toggleExpanded()
-  }, [h(Icon, { "name": icons.value.chevronRight, "class": ui.value.expandChevron(), "data-expanded": row.getIsExpanded() || void 0 })]),
+  }, [h(Icon, { "name": icons.value.chevronRight, ...resolveSlot(ui.value.expandChevron, props.ui?.expandChevron), "data-expanded": row.getIsExpanded() || void 0 })]),
   enableSorting: false,
   enableColumnFilter: false
 };
@@ -87,7 +99,7 @@ if (import.meta.dev) {
     if (!firstRow)
       return;
     for (const column of columns.value) {
-      if (column.accessorKey && !(column.accessorKey in firstRow))
+      if ("accessorKey" in column && typeof column.accessorKey === "string" && !(column.accessorKey in firstRow))
         console.warn(`[SColumn] field "${column.accessorKey}" was not found on the first row of data.`);
     }
   });
@@ -117,7 +129,7 @@ function onRowContextmenu(rowOriginal, event) {
   emit("rowContextmenu", rowOriginal, event);
 }
 const thProps = computed(() => resolveSlot(ui.value.th, props.ui?.th));
-const thSortableClass = computed(() => ui.value.thSortable());
+const thSortableClass = computed(() => resolveSlot(ui.value.thSortable, props.ui?.thSortable).class);
 const sortIconProps = computed(() => resolveSlot(ui.value.sortIcon, props.ui?.sortIcon));
 const tdProps = computed(() => resolveSlot(ui.value.td, props.ui?.td));
 const tfootProps = computed(() => resolveSlot(ui.value.tfoot, props.ui?.tfoot));
@@ -207,7 +219,7 @@ defineExpose({
 </script>
 
 <template>
-  <div v-bind="rootProps">
+  <div :data-selaras-color="effectiveColor" v-bind="rootProps">
     <div v-if="columnToggle" :class="applyClassPrefix('mb-2 flex justify-end')">
       <div data-column-toggle v-bind="columnToggleProps">
         <Button variant="outline" size="sm" :icon="icons.columns" @click="showColumnTogglePanel = !showColumnTogglePanel">