@sewadah/selaras 0.1.1 → 0.3.0

package/dist/runtime/internal/ProgrammaticTheme.d.vue.ts

@@ -0,0 +1,17 @@
+import type { ProgrammaticThemeSnapshot } from '../utils/programmatic-theme.js';
+type __VLS_Props = {
+    snapshot: ProgrammaticThemeSnapshot;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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;
+    };
+};

package/dist/runtime/internal/ProgrammaticTheme.vue

@@ -0,0 +1,41 @@
+<script setup>
+import { computed, provide, useId } from "vue";
+import { useHead } from "#imports";
+import { generateRuntimeTokenOverrideCss } from "../utils/color-registry";
+import { THEME_INJECTION_KEY } from "../utils/injection-keys";
+const props = defineProps({
+  snapshot: { type: Object, required: true }
+});
+const scopeId = `p${useId()}`;
+const context = computed(() => {
+  let current;
+  for (const layer of props.snapshot.layers) {
+    current = {
+      ui: layer.ui,
+      defaults: layer.defaults,
+      parent: current
+    };
+  }
+  return {
+    ui: current?.ui,
+    defaults: current?.defaults,
+    parent: current?.parent,
+    scopeId,
+    tokens: props.snapshot.tokens,
+    mode: props.snapshot.mode,
+    replaceGlobal: true
+  };
+});
+provide(THEME_INJECTION_KEY, context);
+const css = computed(() => generateRuntimeTokenOverrideCss(
+  props.snapshot.tokens ?? {},
+  `[data-selaras-theme="${scopeId}"]`
+));
+useHead({
+  style: [{ key: `selaras-programmatic-theme-${scopeId}`, textContent: () => css.value || void 0 }]
+});
+</script>
+
+<template>
+  <slot />
+</template>

package/dist/runtime/internal/ProgrammaticTheme.vue.d.ts

@@ -0,0 +1,17 @@
+import type { ProgrammaticThemeSnapshot } from '../utils/programmatic-theme.js';
+type __VLS_Props = {
+    snapshot: ProgrammaticThemeSnapshot;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, 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;
+    };
+};

package/dist/runtime/internal/TimeStepper.vue

@@ -73,7 +73,7 @@ const effectiveSize = computed(() => props.size ?? "sm");
     class="w-28"
     @update:model-value="setHour"
   />
-  <span v-if="granularity === 'minute'" class="text-[var(--ui-text-muted)]">:</span>
+  <span v-if="granularity === 'minute'" class="text-[var(--selaras-resolved-text-muted)]">:</span>
   <InputNumber
     v-if="granularity === 'minute'"
     :id="minuteId"

package/dist/runtime/internal/ToastItemRenderer.d.vue.ts

@@ -0,0 +1,14 @@
+import type { ToastThemeSlots } from '../theme/toast.js';
+import type { UiProp } from '../utils/ui.js';
+import type { ToastItem } from './programmatic-services.js';
+type __VLS_Props = {
+    toast: ToastItem;
+    ui?: UiProp<ToastThemeSlots>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: (id: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: ((id: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/internal/ToastItemRenderer.vue

@@ -0,0 +1,54 @@
+<script setup>
+import { ToastClose, ToastDescription, ToastRoot, ToastTitle } from "reka-ui";
+import { computed } from "vue";
+import Button from "../components/Button.vue";
+import Icon from "../components/Icon.vue";
+import { useIcons } from "../composables/use-icons";
+import { useMessages } from "../composables/use-messages";
+import { toastTheme } from "../theme/toast";
+import { isFeedbackIntent } from "../utils/icons";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
+const props = defineProps({
+  toast: { type: Object, required: true },
+  ui: { type: Object, required: false }
+});
+const emit = defineEmits(["remove"]);
+const icons = useIcons();
+const messages = useMessages();
+const theme = useComponentTheme("toast", toastTheme);
+const themeBindings = useThemeBindings();
+const effectiveColor = computed(() => props.toast.color ? resolveRegisteredColorRole(props.toast.color, "info") : void 0);
+const itemUi = computed(() => theme.value({ color: effectiveColor.value }));
+const rootProps = computed(() => resolveSlot(itemUi.value.root, props.ui?.root));
+const iconProps = computed(() => resolveSlot(itemUi.value.icon, props.ui?.icon));
+const titleProps = computed(() => resolveSlot(itemUi.value.title, props.ui?.title));
+const descriptionProps = computed(() => resolveSlot(itemUi.value.description, props.ui?.description));
+const closeProps = computed(() => resolveSlot(itemUi.value.close, props.ui?.close));
+const iconName = computed(() => props.toast.icon ?? (effectiveColor.value && isFeedbackIntent(effectiveColor.value) ? icons.value[effectiveColor.value] : void 0));
+</script>
+
+<template>
+  <ToastRoot
+    :duration="toast.duration ?? 5e3"
+    :data-selaras-theme="themeBindings['data-selaras-theme']"
+    :data-selaras-mode="themeBindings['data-selaras-mode']"
+    :data-selaras-color="effectiveColor"
+    :style="themeBindings.style"
+    v-bind="rootProps"
+    @update:open="(open) => !open && emit('remove', toast.id)"
+  >
+    <Icon v-if="iconName" :name="iconName" v-bind="iconProps" />
+    <div>
+      <ToastTitle v-if="toast.title" v-bind="titleProps">
+        {{ toast.title }}
+      </ToastTitle>
+      <ToastDescription v-if="toast.description" v-bind="descriptionProps">
+        {{ toast.description }}
+      </ToastDescription>
+    </div>
+    <ToastClose as-child>
+      <Button size="sm" variant="ghost" color="neutral" :icon="icons.close" :aria-label="messages.close" v-bind="closeProps" />
+    </ToastClose>
+  </ToastRoot>
+</template>

package/dist/runtime/internal/ToastItemRenderer.vue.d.ts

@@ -0,0 +1,14 @@
+import type { ToastThemeSlots } from '../theme/toast.js';
+import type { UiProp } from '../utils/ui.js';
+import type { ToastItem } from './programmatic-services.js';
+type __VLS_Props = {
+    toast: ToastItem;
+    ui?: UiProp<ToastThemeSlots>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    remove: (id: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onRemove?: ((id: number) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/internal/combobox-select.d.ts

@@ -0,0 +1,52 @@
+import type { ComputedRef } from 'vue';
+import type { SelectValue } from '../utils/select-contracts.js';
+/** Erased runtime records for the shared implementation, not authoring types. */
+export interface SelectOption<Value extends SelectValue = SelectValue> {
+    [key: string]: unknown;
+    /** The default option key. Custom `valueKey` fields use the same primitive contract. */
+    value?: Value;
+    disabled?: boolean;
+}
+export interface SelectOptionGroup<Value extends SelectValue = SelectValue> {
+    label: string;
+    items: readonly SelectOption<Value>[];
+}
+export type SelectItems<Value extends SelectValue = SelectValue> = readonly (SelectOption<Value> | SelectOptionGroup<Value>)[];
+export declare function isOptionGroup<Value extends SelectValue = SelectValue>(entry: SelectOption<Value> | SelectOptionGroup<Value>): entry is SelectOptionGroup<Value>;
+/** Flattens groups into a plain option list - groups lose their header when virtualized. */
+export declare function flattenItems<Value extends SelectValue = SelectValue>(items: SelectItems<Value>): SelectOption<Value>[];
+interface SelectLikeProps {
+    items: SelectItems;
+    valueKey?: string;
+    labelKey?: string;
+    modelValue?: SelectValue | SelectValue[];
+    multiple?: boolean;
+    displayMode?: 'comma' | 'chip';
+    maxChips?: number;
+}
+export interface ResolvedOption {
+    value: SelectValue;
+    label: string;
+    disabled: boolean;
+    raw: SelectOption | undefined;
+}
+export interface ResolvedItemOption extends ResolvedOption {
+    raw: SelectOption;
+}
+export declare function useComboboxSelect(props: SelectLikeProps, emit: (event: 'update:modelValue', value: SelectValue | SelectValue[] | undefined) => void, { creatable }?: {
+    creatable?: boolean;
+}): {
+    flatOptions: ComputedRef<ResolvedItemOption[]>;
+    selectedValues: ComputedRef<SelectValue[]>;
+    selectedOptions: ComputedRef<ResolvedOption[]>;
+    visibleOptions: ComputedRef<ResolvedOption[]>;
+    overflowOptions: ComputedRef<ResolvedOption[]>;
+    commaText: ComputedRef<string>;
+    resolveOption: (value: SelectValue) => ResolvedOption;
+    toOption: (raw: SelectOption) => ResolvedItemOption;
+    setValue: (value: SelectValue | SelectValue[] | undefined) => void;
+    removeValue: (value: SelectValue) => void;
+    hasMatchingOption: (text: string) => boolean;
+    commitCreatableText: (rawText: string) => boolean;
+};
+export {};

package/dist/runtime/{composables/use-combobox-select.js → internal/combobox-select.js}

@@ -1,6 +1,11 @@
 import { computed } from "vue";
+function optionValue(value) {
+  if (typeof value === "string" || typeof value === "number" && Number.isFinite(value))
+    return value;
+  throw new TypeError("[selaras] Select option values must be strings or finite numbers.");
+}
 export function isOptionGroup(entry) {
-  return "items" in entry && Array.isArray(entry.items);
+  return typeof entry.label === "string" && "items" in entry && Array.isArray(entry.items);
 }
 export function flattenItems(items) {
   return items.flatMap((entry) => isOptionGroup(entry) ? entry.items : [entry]);
@@ -8,12 +13,22 @@ export function flattenItems(items) {
 export function useComboboxSelect(props, emit, { creatable = false } = {}) {
   const valueKey = computed(() => props.valueKey ?? "value");
   const labelKey = computed(() => props.labelKey ?? "label");
-  const flatOptions = computed(() => flattenItems(props.items).map((raw) => ({
-    value: String(raw[valueKey.value] ?? ""),
-    label: String(raw[labelKey.value] ?? raw[valueKey.value] ?? ""),
-    disabled: !!raw.disabled,
-    raw
-  })));
+  const flatOptions = computed(() => {
+    const identities = /* @__PURE__ */ new Set();
+    return flattenItems(props.items).map((raw) => {
+      const value = optionValue(raw[valueKey.value]);
+      if (identities.has(value)) {
+        throw new TypeError(`[selaras] Select option identities must be unique across all groups. Duplicate ${valueKey.value}: ${typeof value} ${JSON.stringify(value)}.`);
+      }
+      identities.add(value);
+      return {
+        value,
+        label: String(raw[labelKey.value] ?? value),
+        disabled: !!raw.disabled,
+        raw
+      };
+    });
+  });
   const selectedValues = computed(() => {
     const v = props.modelValue;
     if (v === void 0)
@@ -21,11 +36,11 @@ export function useComboboxSelect(props, emit, { creatable = false } = {}) {
     return Array.isArray(v) ? v : [v];
   });
   function resolveOption(value) {
-    return flatOptions.value.find((o) => o.value === value) ?? { value, label: value, disabled: false, raw: { [valueKey.value]: value, [labelKey.value]: value } };
+    return flatOptions.value.find((o) => o.value === value) ?? { value, label: String(value), disabled: false, raw: void 0 };
   }
   function toOption(raw) {
     return {
-      value: String(raw[valueKey.value] ?? ""),
+      value: optionValue(raw[valueKey.value]),
       label: String(raw[labelKey.value] ?? raw[valueKey.value] ?? ""),
       disabled: !!raw.disabled,
       raw
@@ -48,14 +63,14 @@ export function useComboboxSelect(props, emit, { creatable = false } = {}) {
   }
   function hasMatchingOption(text) {
     const lower = text.toLowerCase();
-    return flatOptions.value.some((o) => o.value.toLowerCase().includes(lower) || o.label.toLowerCase().includes(lower));
+    return flatOptions.value.some((o) => String(o.value).toLowerCase().includes(lower) || o.label.toLowerCase().includes(lower));
   }
   function commitCreatableText(rawText) {
     const text = rawText.trim();
     if (!creatable || !text || hasMatchingOption(text))
       return false;
     if (props.multiple) {
-      if (selectedValues.value.some((v) => v.toLowerCase() === text.toLowerCase()))
+      if (selectedValues.value.some((v) => typeof v === "string" && v.toLowerCase() === text.toLowerCase()))
         return false;
       setValue([...selectedValues.value, text]);
     } else {

package/dist/runtime/internal/programmatic-services.d.ts

@@ -0,0 +1,71 @@
+import type { Component, Ref } from 'vue';
+import type { ToastOptions } from '../composables/use-toast.js';
+import type { ProgrammaticThemeSnapshot } from '../utils/programmatic-theme.js';
+interface ProgrammaticOverlayInstance {
+    id: number;
+    isOpen: boolean;
+    _settled: boolean;
+    resolve: (value: unknown) => void;
+}
+export interface ModalInstance extends ProgrammaticOverlayInstance {
+    component: Component;
+    props: Record<string, unknown>;
+    title?: string;
+    description?: string;
+    dismissible?: boolean;
+    modal?: boolean;
+    overlay?: boolean;
+    transition?: boolean;
+    _theme: ProgrammaticThemeSnapshot;
+}
+export interface DrawerInstance extends ProgrammaticOverlayInstance {
+    component: Component;
+    props: Record<string, unknown>;
+    title?: string;
+    description?: string;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    handle?: boolean;
+    snapPoints?: (number | string)[];
+    snapPoint?: number | string | null;
+    snapToSequentialPoints?: boolean;
+    dismissible?: boolean;
+    modal?: boolean | 'trap-focus';
+    overlay?: boolean;
+    transition?: boolean;
+    _theme: ProgrammaticThemeSnapshot;
+}
+export interface SlideoverInstance extends ProgrammaticOverlayInstance {
+    component: Component;
+    props: Record<string, unknown>;
+    title?: string;
+    description?: string;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    inset?: boolean;
+    dismissible?: boolean;
+    modal?: boolean;
+    overlay?: boolean;
+    transition?: boolean;
+    _theme: ProgrammaticThemeSnapshot;
+}
+export interface ToastItem extends ToastOptions {
+    id: number;
+    _theme: ProgrammaticThemeSnapshot;
+}
+export interface ProgrammaticOverlayService<T extends ProgrammaticOverlayInstance> {
+    instances: Ref<T[]>;
+    nextId: () => number;
+    close: (id: number, value?: unknown) => void;
+    remove: (id: number) => void;
+    dispose: () => void;
+}
+export interface ToastService {
+    toasts: Ref<ToastItem[]>;
+    nextId: () => number;
+    remove: (id: number) => void;
+    dispose: () => void;
+}
+export declare const useModalService: () => ProgrammaticOverlayService<ModalInstance>;
+export declare const useDrawerService: () => ProgrammaticOverlayService<DrawerInstance>;
+export declare const useSlideoverService: () => ProgrammaticOverlayService<SlideoverInstance>;
+export declare function useToastService(): ToastService;
+export {};

package/dist/runtime/internal/programmatic-services.js

@@ -0,0 +1,61 @@
+import { ref } from "vue";
+import { createAppScopedState } from "../utils/app-scoped-state.js";
+function createOverlayService() {
+  const useState = createAppScopedState(() => ({
+    instances: ref([]),
+    counter: 0
+  }));
+  return function useOverlayService() {
+    const state = useState();
+    function nextId() {
+      return state.counter++;
+    }
+    function close(id, value) {
+      const instance = state.instances.value.find((item) => item.id === id);
+      if (!instance)
+        return;
+      instance.isOpen = false;
+      if (!instance._settled) {
+        instance._settled = true;
+        instance.resolve(value);
+      }
+    }
+    function remove(id) {
+      const index = state.instances.value.findIndex((item) => item.id === id);
+      if (index !== -1)
+        state.instances.value.splice(index, 1);
+    }
+    function dispose() {
+      for (const instance of state.instances.value) {
+        if (!instance._settled) {
+          instance._settled = true;
+          instance.resolve(void 0);
+        }
+      }
+      state.instances.value = [];
+    }
+    return { instances: state.instances, nextId, close, remove, dispose };
+  };
+}
+export const useModalService = createOverlayService();
+export const useDrawerService = createOverlayService();
+export const useSlideoverService = createOverlayService();
+const useToastState = createAppScopedState(() => ({
+  toasts: ref([]),
+  counter: 0
+}));
+export function useToastService() {
+  const state = useToastState();
+  return {
+    toasts: state.toasts,
+    nextId: () => state.counter++,
+    remove(id) {
+      const index = state.toasts.value.findIndex((toast) => toast.id === id);
+      if (index !== -1)
+        state.toasts.value.splice(index, 1);
+    },
+    dispose() {
+      state.toasts.value = [];
+    }
+  };
+}

package/dist/runtime/prose.css

@@ -1 +1 @@
-@layer base, selaras-prose, utilities;@layer selaras-prose{:root{--selaras-prose-font-body:inherit;--selaras-prose-font-heading:inherit;--selaras-prose-font-mono:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace)}.selaras-prose{color:var(--ui-text);font-family:var(--selaras-prose-font-body);font-size:1rem;line-height:1.75;overflow-wrap:break-word}.selaras-prose :where(.not-prose){line-height:1.5}.selaras-prose>:where(*+*){margin-block-start:1.25em}.selaras-prose :where(h1,h2,h3,h4,h5,h6):not(:where(.not-prose,.not-prose *)){color:var(--ui-text);font-family:var(--selaras-prose-font-heading);font-weight:600;letter-spacing:-.025em;margin-block-start:2em;scroll-margin-top:5rem}.selaras-prose :where(h1):not(:where(.not-prose,.not-prose *)){font-size:1.875rem;line-height:2.25rem}.selaras-prose :where(h2):not(:where(.not-prose,.not-prose *)){font-size:1.5rem;line-height:2rem}.selaras-prose :where(h3):not(:where(.not-prose,.not-prose *)){font-size:1.25rem;line-height:1.75rem}.selaras-prose :where(h4):not(:where(.not-prose,.not-prose *)){font-size:1.125rem;line-height:1.75rem}.selaras-prose :where(h5,h6):not(:where(.not-prose,.not-prose *)){font-size:1rem;line-height:1.5rem}.selaras-prose :where(a):not(:where(.not-prose,.not-prose *)){color:var(--ui-primary);font-weight:500;text-decoration-line:underline;text-underline-offset:4px}.selaras-prose :where(a:hover):not(:where(.not-prose,.not-prose *)){color:var(--ui-primary-hover)}.selaras-prose :where(h1,h2,h3,h4,h5,h6) :where(a):not(:where(.not-prose,.not-prose *)){color:inherit;font-weight:inherit}.selaras-prose :where(strong):not(:where(.not-prose,.not-prose *)){color:var(--ui-text);font-weight:600}.selaras-prose :where(em):not(:where(.not-prose,.not-prose *)){font-style:italic}.selaras-prose :where(blockquote):not(:where(.not-prose,.not-prose *)){border-inline-start:2px solid var(--ui-border);color:var(--ui-text-muted);font-style:italic;padding-inline-start:1rem}.selaras-prose :where(hr):not(:where(.not-prose,.not-prose *)){border-color:var(--ui-border)}.selaras-prose :where(img):not(:where(.not-prose,.not-prose *)){border-radius:var(--ui-radius-md);max-width:100%}.selaras-prose :where(ul,ol):not(:where(.not-prose,.not-prose *)){color:var(--ui-text);padding-inline-start:1.5rem}.selaras-prose :where(ul):not(:where(.not-prose,.not-prose *)){list-style-type:disc}.selaras-prose :where(ol):not(:where(.not-prose,.not-prose *)){list-style-type:decimal}.selaras-prose :where(li+li):not(:where(.not-prose,.not-prose *)){margin-block-start:.25em}.selaras-prose :where(code):not(:where(.not-prose,.not-prose *)){background-color:var(--ui-bg-elevated);border-radius:var(--ui-radius-sm);color:var(--ui-text);font-family:var(--selaras-prose-font-mono);font-size:.875em;padding-block:.125rem;padding-inline:.375rem}.selaras-prose :where(pre):not(:where(.not-prose,.not-prose *)){background-color:var(--ui-bg-elevated);border-radius:var(--ui-radius-md);font-family:var(--selaras-prose-font-mono);font-size:.875rem;line-height:1.625;overflow-x:auto;padding:1rem}.selaras-prose :where(pre code):not(:where(.not-prose,.not-prose *)){background-color:transparent;border-radius:0;font-size:1em;padding:0}.selaras-prose :where(table):not(:where(.not-prose,.not-prose *)){border-collapse:collapse;display:block;font-size:.875rem;overflow-x:auto;width:100%}.selaras-prose :where(thead):not(:where(.not-prose,.not-prose *)){background-color:var(--ui-bg-elevated)}.selaras-prose :where(th):not(:where(.not-prose,.not-prose *)){border-bottom:1px solid var(--ui-border);color:var(--ui-text-muted);font-weight:500;padding-block:.5rem;padding-inline:.75rem;text-align:start}.selaras-prose :where(td):not(:where(.not-prose,.not-prose *)){border-bottom:1px solid var(--ui-border-muted);color:var(--ui-text);padding-block:.5rem;padding-inline:.75rem}}
+@layer base, selaras-prose, utilities;@layer selaras-prose{:root{--selaras-prose-font-body:inherit;--selaras-prose-font-heading:inherit;--selaras-prose-font-mono:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace)}.selaras-prose{color:var(--selaras-resolved-text-default);font-family:var(--selaras-prose-font-body);font-size:1rem;line-height:1.75;overflow-wrap:break-word}.selaras-prose :where(.not-prose){line-height:1.5}.selaras-prose>:where(*+*){margin-block-start:1.25em}.selaras-prose :where(h1,h2,h3,h4,h5,h6):not(:where(.not-prose,.not-prose *)){color:var(--selaras-resolved-text-default);font-family:var(--selaras-prose-font-heading);font-weight:600;letter-spacing:-.025em;margin-block-start:2em;scroll-margin-top:5rem}.selaras-prose :where(h1):not(:where(.not-prose,.not-prose *)){font-size:1.875rem;line-height:2.25rem}.selaras-prose :where(h2):not(:where(.not-prose,.not-prose *)){font-size:1.5rem;line-height:2rem}.selaras-prose :where(h3):not(:where(.not-prose,.not-prose *)){font-size:1.25rem;line-height:1.75rem}.selaras-prose :where(h4):not(:where(.not-prose,.not-prose *)){font-size:1.125rem;line-height:1.75rem}.selaras-prose :where(h5,h6):not(:where(.not-prose,.not-prose *)){font-size:1rem;line-height:1.5rem}.selaras-prose :where(a):not(:where(.not-prose,.not-prose *)){color:var(--selaras-resolved-color-primary-text);font-weight:500;text-decoration-line:underline;text-underline-offset:4px}.selaras-prose :where(a:hover):not(:where(.not-prose,.not-prose *)){color:var(--selaras-resolved-color-primary-text-hover)}.selaras-prose :where(h1,h2,h3,h4,h5,h6) :where(a):not(:where(.not-prose,.not-prose *)){color:inherit;font-weight:inherit}.selaras-prose :where(strong):not(:where(.not-prose,.not-prose *)){color:var(--selaras-resolved-text-default);font-weight:600}.selaras-prose :where(em):not(:where(.not-prose,.not-prose *)){font-style:italic}.selaras-prose :where(blockquote):not(:where(.not-prose,.not-prose *)){border-inline-start:2px solid var(--selaras-resolved-border-default);color:var(--selaras-resolved-text-muted);font-style:italic;padding-inline-start:1rem}.selaras-prose :where(hr):not(:where(.not-prose,.not-prose *)){border-color:var(--selaras-resolved-border-default)}.selaras-prose :where(img):not(:where(.not-prose,.not-prose *)){border-radius:var(--selaras-resolved-radius-md);max-width:100%}.selaras-prose :where(ul,ol):not(:where(.not-prose,.not-prose *)){color:var(--selaras-resolved-text-default);padding-inline-start:1.5rem}.selaras-prose :where(ul):not(:where(.not-prose,.not-prose *)){list-style-type:disc}.selaras-prose :where(ol):not(:where(.not-prose,.not-prose *)){list-style-type:decimal}.selaras-prose :where(li+li):not(:where(.not-prose,.not-prose *)){margin-block-start:.25em}.selaras-prose :where(code):not(:where(.not-prose,.not-prose *)){background-color:var(--selaras-resolved-surface-elevated);border-radius:var(--selaras-resolved-radius-sm);color:var(--selaras-resolved-text-default);font-family:var(--selaras-prose-font-mono);font-size:.875em;padding-block:.125rem;padding-inline:.375rem}.selaras-prose :where(pre):not(:where(.not-prose,.not-prose *)){background-color:var(--selaras-resolved-surface-elevated);border-radius:var(--selaras-resolved-radius-md);font-family:var(--selaras-prose-font-mono);font-size:.875rem;line-height:1.625;overflow-x:auto;padding:1rem}.selaras-prose :where(pre code):not(:where(.not-prose,.not-prose *)){background-color:transparent;border-radius:0;font-size:1em;padding:0}.selaras-prose :where(table):not(:where(.not-prose,.not-prose *)){border-collapse:collapse;display:block;font-size:.875rem;overflow-x:auto;width:100%}.selaras-prose :where(thead):not(:where(.not-prose,.not-prose *)){background-color:var(--selaras-resolved-surface-elevated)}.selaras-prose :where(th):not(:where(.not-prose,.not-prose *)){border-bottom:1px solid var(--selaras-resolved-border-default);color:var(--selaras-resolved-text-muted);font-weight:500;padding-block:.5rem;padding-inline:.75rem;text-align:start}.selaras-prose :where(td):not(:where(.not-prose,.not-prose *)){border-bottom:1px solid var(--selaras-resolved-border-muted);color:var(--selaras-resolved-text-default);padding-block:.5rem;padding-inline:.75rem}}

package/dist/runtime/structural.css

@@ -0,0 +1 @@
+@import "tw-animate-css";@source "./components";@source "./internal";@source "./theme";@source "./utils";@custom-variant dark (&:where(.dark, .dark *));@layer base{a:focus-visible{outline-offset:0}}@keyframes selaras-ripple{to{opacity:0;transform:scale(1)}}@keyframes selaras-accordion-down{0%{height:0}to{height:var(--reka-accordion-content-height)}}@keyframes selaras-accordion-up{0%{height:var(--reka-accordion-content-height)}to{height:0}}@keyframes selaras-collapsible-down{0%{height:0}to{height:var(--reka-collapsible-content-height)}}@keyframes selaras-collapsible-up{0%{height:var(--reka-collapsible-content-height)}to{height:0}}@keyframes selaras-skeleton-shimmer{0%{background-position:150% 0}to{background-position:-50% 0}}@keyframes selaras-progress-indeterminate{0%{transform:translateX(-100%)}to{transform:translateX(300%)}}@media (prefers-reduced-motion:reduce){*,:after,:before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}.selaras-nav-elbow{position:relative}.selaras-nav-elbow:before{inset-inline-start:-16px;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;width:16px}.selaras-nav-elbow:after,.selaras-nav-elbow:before{background-color:var(--selaras-resolved-border-default);content:"";position:absolute;top:0}.selaras-nav-elbow:after{inset-inline-start:-15px;width:1.5px}.selaras-nav-elbow--content-navigation:before{height:40px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 14a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 40'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 14a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E")}.selaras-nav-elbow--content-navigation:after{bottom:-2px}.selaras-nav-elbow--content-navigation:last-child:after{bottom:auto;height:14px}.selaras-nav-elbow--navigation-menu:before{height:32px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 10a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 32'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 10a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E")}.selaras-nav-elbow--navigation-menu:after{bottom:-4px}.selaras-nav-elbow--navigation-menu:last-child:after{bottom:auto;height:10px}.selaras-nav-elbow--file-tree:before{height:28px;-webkit-mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 8a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 28'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-width='1.5' d='M1 8a6 6 0 0 0 6 6h7'/%3E%3C/svg%3E")}.selaras-nav-elbow--file-tree:after{bottom:-2px}.selaras-nav-elbow--file-tree:last-child:after{bottom:auto;height:8px}@layer theme{:root,[data-selaras-theme]{--selaras-resolved-surface-canvas:var(--selaras-surface-canvas,var(--_selaras-default-surface-canvas));--selaras-resolved-surface-default:var(--selaras-surface-default,var(--_selaras-default-surface-default));--selaras-resolved-surface-elevated:var(--selaras-surface-elevated,var(--_selaras-default-surface-elevated));--selaras-resolved-surface-inverted:var(--selaras-surface-inverted,var(--_selaras-default-surface-inverted));--selaras-resolved-text-default:var(--selaras-text-default,var(--_selaras-default-text-default));--selaras-resolved-text-muted:var(--selaras-text-muted,var(--_selaras-default-text-muted));--selaras-resolved-text-inverted:var(--selaras-text-inverted,var(--_selaras-default-text-inverted));--selaras-resolved-border-default:var(--selaras-border-default,var(--_selaras-default-border-default));--selaras-resolved-border-muted:var(--selaras-border-muted,var(--_selaras-default-border-muted));--selaras-resolved-border-hover:var(--selaras-border-hover,var(--_selaras-default-border-hover));--selaras-resolved-scrim:var(--selaras-scrim,rgba(0,0,0,.5));--selaras-resolved-radius-base:var(--selaras-radius-base,8px);--selaras-resolved-radius-sm:var(--selaras-radius-sm,calc(var(--selaras-resolved-radius-base)*0.75));--selaras-resolved-radius-md:var(--selaras-radius-md,var(--selaras-resolved-radius-base));--selaras-resolved-radius-lg:var(--selaras-radius-lg,calc(var(--selaras-resolved-radius-base)*2));--selaras-resolved-radius-full:var(--selaras-radius-full,9999px);--selaras-resolved-shadow-sm:var(--selaras-shadow-sm,0 1px 2px 0 rgba(0,0,0,.06));--selaras-resolved-shadow-md:var(--selaras-shadow-md,0 4px 16px -2px rgba(0,0,0,.12));--selaras-resolved-shadow-lg:var(--selaras-shadow-lg,0 12px 32px -4px rgba(0,0,0,.16));--selaras-resolved-z-modal-overlay:var(--selaras-z-modal-overlay,40);--selaras-resolved-z-modal:var(--selaras-z-modal,50);--selaras-resolved-z-dropdown:var(--selaras-z-dropdown,60);--selaras-resolved-z-tooltip:var(--selaras-z-tooltip,70);--selaras-resolved-z-toast:var(--selaras-z-toast,80)}:root.dark,:root.dark [data-selaras-theme]:where(:not([data-selaras-mode]),[data-selaras-mode=root]),[data-selaras-theme]:where([data-selaras-mode=dark]){--selaras-resolved-surface-canvas:var(--selaras-surface-canvas,var(--_selaras-default-surface-canvas));--selaras-resolved-surface-default:var(--selaras-surface-default,var(--_selaras-default-surface-default));--selaras-resolved-surface-elevated:var(--selaras-surface-elevated,var(--_selaras-default-surface-elevated));--selaras-resolved-surface-inverted:var(--selaras-surface-inverted,var(--_selaras-default-surface-inverted));--selaras-resolved-text-default:var(--selaras-text-default,var(--_selaras-default-text-default));--selaras-resolved-text-muted:var(--selaras-text-muted,var(--_selaras-default-text-muted));--selaras-resolved-text-inverted:var(--selaras-text-inverted,var(--_selaras-default-text-inverted));--selaras-resolved-border-default:var(--selaras-border-default,var(--_selaras-default-border-default));--selaras-resolved-border-muted:var(--selaras-border-muted,var(--_selaras-default-border-muted));--selaras-resolved-border-hover:var(--selaras-border-hover,var(--_selaras-default-border-hover))}}

package/dist/runtime/table.d.ts

@@ -0,0 +1,3 @@
+export type { TableColumnDef, TableColumnVisibilityState, TableExpandedState, TableGetRowId, TableRowSelectionState, TableSortingState } from './composables/use-table.js';
+export { createTableColumnHelper } from './composables/use-table.js';
+export type { TableEmits, TableProps, TableSlots } from './utils/table-contracts.js';

package/dist/runtime/table.js

@@ -0,0 +1 @@
+export { createTableColumnHelper } from "./composables/use-table.js";

package/dist/runtime/theme/accordion.d.ts

@@ -1,4 +1,13 @@
 export declare const accordionTheme: import("tailwind-variants").TVReturnType<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     size: {
         sm: {
             trigger: string;
@@ -42,6 +51,15 @@ export declare const accordionTheme: import("tailwind-variants").TVReturnType<{
     content: string;
     contentInner: string;
 }, undefined, {
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     size: {
         sm: {
             trigger: string;
@@ -85,6 +103,15 @@ export declare const accordionTheme: import("tailwind-variants").TVReturnType<{
     content: string;
     contentInner: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
+    color: {
+        primary: "";
+        neutral: "";
+        secondary: "";
+        success: "";
+        danger: "";
+        info: "";
+        warning: "";
+    };
     size: {
         sm: {
             trigger: string;

package/dist/runtime/theme/accordion.js

@@ -8,14 +8,14 @@ export const accordionTheme = tv({
     root: "w-full flex flex-col",
     item: "",
     header: "",
-    trigger: "group flex w-full items-center gap-2 text-start font-medium text-[var(--ui-text)] transition-colors hover:text-[var(--ui-primary)] disabled:opacity-50 disabled:pointer-events-none",
+    trigger: "group flex w-full items-center gap-2 text-start font-medium text-[var(--selaras-resolved-text-default)] transition-colors hover:text-[var(--_selaras-color-text-hover)] disabled:opacity-50 disabled:pointer-events-none",
     label: "",
-    chevron: "size-4 shrink-0 text-[var(--ui-text-muted)] transition-transform group-data-[state=open]:rotate-180",
+    chevron: "size-4 shrink-0 text-[var(--selaras-resolved-text-muted)] transition-transform group-data-[state=open]:rotate-180",
     // overflow-hidden clips the panel to its own animated height (without
     // it, content would visibly spill out mid-animation); the two
     // data-state keyframes interpolate between 0 and Reka's own measured
     // --reka-accordion-content-height, so this never hardcodes a height.
-    content: "overflow-hidden text-[var(--ui-text-muted)] data-[state=open]:animate-[selaras-accordion-down_200ms_ease-out] data-[state=closed]:animate-[selaras-accordion-up_200ms_ease-out]",
+    content: "overflow-hidden text-[var(--selaras-resolved-text-muted)] data-[state=open]:animate-[selaras-accordion-down_200ms_ease-out] data-[state=closed]:animate-[selaras-accordion-up_200ms_ease-out]",
     // A separate slot (not `content` itself) for the padding that used to
     // live on `content` directly - the padding must NOT be part of the
     // height being animated (animating a 0-to-N height with vertical
@@ -24,6 +24,15 @@ export const accordionTheme = tv({
     contentInner: "pb-3"
   },
   variants: {
+    color: {
+      primary: "",
+      neutral: "",
+      secondary: "",
+      success: "",
+      danger: "",
+      info: "",
+      warning: ""
+    },
     size: {
       sm: { trigger: "py-2 text-sm", content: "text-sm" },
       md: { trigger: "py-3 text-sm", content: "text-sm" },
@@ -43,11 +52,11 @@ export const accordionTheme = tv({
     // instead of a shared divider - overflow-hidden on `item` clips the
     // content panel's corners to match, the same way Card's root does.
     variant: {
-      list: { item: "border-b border-[var(--ui-border)] last:border-b-0" },
+      list: { item: "border-b border-[var(--selaras-resolved-border-default)] last:border-b-0" },
       pill: {
         root: "gap-2",
-        item: "rounded-[var(--ui-radius-md)] bg-[var(--ui-bg)] ring-1 ring-[var(--ui-border)] overflow-hidden",
-        trigger: "px-3 hover:bg-[var(--ui-bg-elevated)] hover:text-[var(--ui-text)]",
+        item: "rounded-[var(--selaras-resolved-radius-md)] bg-[var(--selaras-resolved-surface-default)] ring-1 ring-[var(--selaras-resolved-border-default)] overflow-hidden",
+        trigger: "px-3 hover:bg-[var(--selaras-resolved-surface-elevated)] hover:text-[var(--selaras-resolved-text-default)]",
         contentInner: "px-3"
       }
     }

package/dist/runtime/theme/alert-dialog.js

@@ -5,12 +5,12 @@ export const alertDialogTheme = tv({
     // same kind of centered, blocking surface, just a distinct semantic
     // (Reka's AlertDialogContent unconditionally blocks outside-click
     // dismissal itself, so there's no need for a second z-index tier).
-    overlay: "fixed inset-0 z-[var(--ui-z-modal-overlay)] bg-black/50",
-    content: "fixed left-1/2 top-1/2 z-[var(--ui-z-modal)] flex max-h-[calc(100vh-2rem)] w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-[var(--ui-radius-lg)] bg-[var(--ui-bg)] p-6 shadow-[var(--ui-shadow-lg)] focus:outline-none",
+    overlay: "fixed inset-0 z-[var(--selaras-resolved-z-modal-overlay)] bg-[var(--selaras-resolved-scrim)]",
+    content: "fixed left-1/2 top-1/2 z-[var(--selaras-resolved-z-modal)] flex max-h-[calc(100vh-2rem)] w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 flex-col gap-4 rounded-[var(--selaras-resolved-radius-lg)] bg-[var(--selaras-resolved-surface-default)] p-6 shadow-[var(--selaras-resolved-shadow-lg)] focus:outline-none",
     header: "flex flex-col gap-1",
-    title: "text-base font-semibold text-[var(--ui-text)]",
-    description: "text-sm text-[var(--ui-text-muted)]",
-    body: "text-sm text-[var(--ui-text-muted)]",
+    title: "text-base font-semibold text-[var(--selaras-resolved-text-default)]",
+    description: "text-sm text-[var(--selaras-resolved-text-muted)]",
+    body: "text-sm text-[var(--selaras-resolved-text-muted)]",
     footer: "flex items-center justify-end gap-2"
   },
   variants: {

package/dist/runtime/theme/alert.js

@@ -1,11 +1,11 @@
 import { tv } from "tailwind-variants";
 export const alertTheme = tv({
   slots: {
-    root: "relative flex items-start gap-3 rounded-[var(--ui-radius-md)] p-4",
+    root: "relative flex items-start gap-3 rounded-[var(--selaras-resolved-radius-md)] p-4",
     icon: "size-5 shrink-0",
     content: "min-w-0 flex-1",
-    title: "text-sm font-medium text-[var(--ui-text)]",
-    description: "mt-1 text-sm text-[var(--ui-text-muted)]",
+    title: "text-sm font-medium text-[var(--selaras-resolved-text-default)]",
+    description: "mt-1 text-sm text-[var(--selaras-resolved-text-muted)]",
     actions: "mt-3 flex items-center gap-2",
     // Rendered as an <SButton> (ghost/neutral) - matches Toast's own
     // close slot exactly (theme/toast.ts).
@@ -32,18 +32,9 @@ export const alertTheme = tv({
     // so title/description have to flip to that color's own
     // `-foreground` token to stay legible, the same pairing Button's
     // own solid variant already uses.
-    { color: "success", variant: "soft", class: { root: "bg-[var(--ui-success-soft)]", icon: "text-[var(--ui-success)]" } },
-    { color: "success", variant: "outline", class: { root: "bg-[var(--ui-bg)] ring-1 ring-[var(--ui-success)]", icon: "text-[var(--ui-success)]" } },
-    { color: "success", variant: "solid", class: { root: "bg-[var(--ui-success)]", icon: "text-[var(--ui-success-foreground)]", title: "text-[var(--ui-success-foreground)]", description: "text-[var(--ui-success-foreground)] opacity-80" } },
-    { color: "danger", variant: "soft", class: { root: "bg-[var(--ui-danger-soft)]", icon: "text-[var(--ui-danger)]" } },
-    { color: "danger", variant: "outline", class: { root: "bg-[var(--ui-bg)] ring-1 ring-[var(--ui-danger)]", icon: "text-[var(--ui-danger)]" } },
-    { color: "danger", variant: "solid", class: { root: "bg-[var(--ui-danger)]", icon: "text-[var(--ui-danger-foreground)]", title: "text-[var(--ui-danger-foreground)]", description: "text-[var(--ui-danger-foreground)] opacity-80" } },
-    { color: "warning", variant: "soft", class: { root: "bg-[var(--ui-warning-soft)]", icon: "text-[var(--ui-warning)]" } },
-    { color: "warning", variant: "outline", class: { root: "bg-[var(--ui-bg)] ring-1 ring-[var(--ui-warning)]", icon: "text-[var(--ui-warning)]" } },
-    { color: "warning", variant: "solid", class: { root: "bg-[var(--ui-warning)]", icon: "text-[var(--ui-warning-foreground)]", title: "text-[var(--ui-warning-foreground)]", description: "text-[var(--ui-warning-foreground)] opacity-80" } },
-    { color: "info", variant: "soft", class: { root: "bg-[var(--ui-info-soft)]", icon: "text-[var(--ui-info)]" } },
-    { color: "info", variant: "outline", class: { root: "bg-[var(--ui-bg)] ring-1 ring-[var(--ui-info)]", icon: "text-[var(--ui-info)]" } },
-    { color: "info", variant: "solid", class: { root: "bg-[var(--ui-info)]", icon: "text-[var(--ui-info-foreground)]", title: "text-[var(--ui-info-foreground)]", description: "text-[var(--ui-info-foreground)] opacity-80" } }
+    { variant: "soft", class: { root: "bg-[var(--_selaras-color-subtle)]", icon: "text-[var(--_selaras-color-text)]" } },
+    { variant: "outline", class: { root: "bg-[var(--selaras-resolved-surface-default)] ring-1 ring-[var(--_selaras-color-border)]", icon: "text-[var(--_selaras-color-text)]" } },
+    { variant: "solid", class: { root: "bg-[var(--_selaras-color-fill)]", icon: "text-[var(--_selaras-color-on-fill)]", title: "text-[var(--_selaras-color-on-fill)]", description: "text-[var(--_selaras-color-on-fill)] opacity-80" } }
   ],
   defaultVariants: {
     color: "info",