@sewadah/selaras 0.2.0 → 0.3.1

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

@@ -3,6 +3,9 @@ export interface ComboboxSelectBodyProps {
     listbox?: boolean;
     searchable?: boolean;
     creatable?: boolean;
+    multiple?: boolean;
+    forceSelection?: boolean;
+    selectedValues?: (string | number)[];
     searchText: string;
     displayValue: (value: unknown) => string;
     items: SelectItems;
@@ -30,15 +33,15 @@ export interface ComboboxSelectBodyEmits {
     'update:searchText': [value: string];
 }
 declare function focusSearch(): boolean;
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_21: {}, __VLS_29: {}, __VLS_37: {}, __VLS_57: {
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_21: {}, __VLS_29: {}, __VLS_31: {}, __VLS_39: {}, __VLS_61: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_82: {
+}, __VLS_92: {
     group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_90: {
+}, __VLS_102: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_109: {
+}, __VLS_123: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_122: {};
+}, __VLS_136: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {
@@ -48,17 +51,19 @@ type __VLS_Slots = {} & {
 } & {
     'empty-filter'?: (props: typeof __VLS_29) => any;
 } & {
-    'empty-filter'?: (props: typeof __VLS_37) => any;
+    'empty-filter'?: (props: typeof __VLS_31) => any;
 } & {
-    item?: (props: typeof __VLS_57) => any;
+    'empty-filter'?: (props: typeof __VLS_39) => any;
 } & {
-    group?: (props: typeof __VLS_82) => any;
+    item?: (props: typeof __VLS_61) => any;
 } & {
-    item?: (props: typeof __VLS_90) => any;
+    group?: (props: typeof __VLS_92) => any;
 } & {
-    item?: (props: typeof __VLS_109) => any;
+    item?: (props: typeof __VLS_102) => any;
 } & {
-    footer?: (props: typeof __VLS_122) => any;
+    item?: (props: typeof __VLS_123) => any;
+} & {
+    footer?: (props: typeof __VLS_136) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBodyProps, {
     focusSearch: typeof focusSearch;

package/dist/runtime/internal/ComboboxSelectBody.vue

@@ -27,6 +27,9 @@ const props = defineProps({
   listbox: { type: Boolean, required: false },
   searchable: { type: Boolean, required: false },
   creatable: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false },
+  forceSelection: { type: Boolean, required: false },
+  selectedValues: { type: Array, required: false },
   searchText: { type: String, required: true },
   displayValue: { type: Function, required: true },
   items: { type: null, required: true },
@@ -53,10 +56,29 @@ const searchInput = ref();
 const { contains } = useFilter({ sensitivity: "base" });
 const primitives = computed(() => props.listbox ? { input: ListboxFilter, viewport: ListboxContent, group: ListboxGroup, label: ListboxGroupLabel, item: ListboxItem, indicator: ListboxItemIndicator, virtualizer: ListboxVirtualizer } : { input: ComboboxInput, viewport: ComboboxViewport, group: ComboboxGroup, label: ComboboxLabel, item: ComboboxItem, indicator: ComboboxItemIndicator, virtualizer: ComboboxVirtualizer });
 function matches(option) {
-  return !props.listbox || !props.searchable || contains(option.label, props.searchText);
+  return !(props.listbox || props.creatable && props.multiple) || !props.searchable || contains(option.label, props.searchText);
 }
 const visibleOptions = computed(() => props.flatOptions.filter(matches));
-const virtualOptions = computed(() => props.listbox ? visibleOptions.value : props.virtualizedOptions);
+const createText = computed(() => {
+  if (!props.creatable || !props.multiple || props.forceSelection)
+    return "";
+  const text = props.searchText.trim();
+  const lower = text.toLowerCase();
+  if (!text || props.flatOptions.some((option) => String(option.value).toLowerCase() === lower || option.label.toLowerCase() === lower) || props.selectedValues?.some((value) => typeof value === "string" && value.toLowerCase() === lower)) {
+    return "";
+  }
+  return text;
+});
+const virtualOptions = computed(() => {
+  const options = props.listbox ? visibleOptions.value : props.virtualizedOptions;
+  return createText.value ? [{ value: createText.value, label: messages.value.createOption(createText.value), disabled: false, raw: void 0 }, ...options] : options;
+});
+function onItemSelect(event, value) {
+  if (!props.creatable || !props.multiple || !props.selectedValues?.includes(value))
+    return;
+  event.preventDefault();
+  emit("update:searchText", "");
+}
 const filterInputProps = computed(() => mergeProps(
   props.listbox ? { "role": "combobox", "aria-autocomplete": "list", "aria-expanded": true, "aria-controls": listboxId, "aria-label": messages.value.search } : { displayValue: props.displayValue },
   props.searchInputProps ?? {}
@@ -90,18 +112,23 @@ defineExpose({ focusSearch });
     />
   </div>
 
-  <div v-if="flatOptions.length === 0" v-bind="emptyProps">
+  <div v-if="flatOptions.length === 0 && !createText" v-bind="emptyProps">
     <slot name="empty">
       {{ messages.noOptions }}
     </slot>
   </div>
   <component :is="primitives.viewport" v-else :id="listbox ? listboxId : void 0" v-bind="viewportProps">
-    <div v-if="listbox && visibleOptions.length === 0" v-bind="emptyProps">
+    <div v-if="listbox && visibleOptions.length === 0 && !createText" v-bind="emptyProps">
       <slot name="empty-filter">
         {{ messages.noResultsFound }}
       </slot>
     </div>
-    <ComboboxEmpty v-else-if="!listbox" v-bind="emptyProps">
+    <div v-else-if="creatable && multiple && visibleOptions.length === 0 && !createText" v-bind="emptyProps">
+      <slot name="empty-filter">
+        {{ messages.noResultsFound }}
+      </slot>
+    </div>
+    <ComboboxEmpty v-else-if="!listbox && !(creatable && multiple)" v-bind="emptyProps">
       <slot name="empty-filter">
         {{ messages.noResultsFound }}
       </slot>
@@ -121,20 +148,30 @@ defineExpose({ focusSearch });
           :key="String(virtualItem.key)"
           :value="option.value"
           :disabled="option.disabled"
+          :data-selaras-create-option="!option.raw || void 0"
           :style="{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${virtualItem.start}px)`, height: `${virtualItem.size}px` }"
           v-bind="itemProps"
+          @select="onItemSelect($event, option.value)"
         >
-          <slot name="item" :item="option.raw">
+          <template v-if="!option.raw">
             {{ option.label }}
-          </slot>
-          <component :is="primitives.indicator" v-bind="itemIndicatorProps">
-            <Icon :name="icons.check" class="size-4" />
-          </component>
+          </template>
+          <template v-else>
+            <slot name="item" :item="option.raw">
+              {{ option.label }}
+            </slot>
+            <component :is="primitives.indicator" v-bind="itemIndicatorProps">
+              <Icon :name="icons.check" class="size-4" />
+            </component>
+          </template>
         </component>
       </component>
     </ClientOnly>
 
     <template v-else>
+      <component :is="primitives.item" v-if="createText" :value="createText" data-selaras-create-option v-bind="itemProps">
+        {{ messages.createOption(createText) }}
+      </component>
       <template v-for="(entry, index) in items" :key="index">
         <component :is="primitives.group" v-if="isOptionGroup(entry) && groupOptions(entry).some(matches)">
           <component :is="primitives.label" v-bind="groupProps">
@@ -149,6 +186,7 @@ defineExpose({ focusSearch });
             :value="option.value"
             :disabled="option.disabled"
             v-bind="itemProps"
+            @select="onItemSelect($event, option.value)"
           >
             <slot name="item" :item="option.raw">
               {{ option.label }}
@@ -164,6 +202,7 @@ defineExpose({ focusSearch });
           :value="toOption(entry).value"
           :disabled="toOption(entry).disabled"
           v-bind="itemProps"
+          @select="onItemSelect($event, toOption(entry).value)"
         >
           <slot name="item" :item="entry">
             {{ toOption(entry).label }}

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

@@ -3,6 +3,9 @@ export interface ComboboxSelectBodyProps {
     listbox?: boolean;
     searchable?: boolean;
     creatable?: boolean;
+    multiple?: boolean;
+    forceSelection?: boolean;
+    selectedValues?: (string | number)[];
     searchText: string;
     displayValue: (value: unknown) => string;
     items: SelectItems;
@@ -30,15 +33,15 @@ export interface ComboboxSelectBodyEmits {
     'update:searchText': [value: string];
 }
 declare function focusSearch(): boolean;
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_21: {}, __VLS_29: {}, __VLS_37: {}, __VLS_57: {
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_21: {}, __VLS_29: {}, __VLS_31: {}, __VLS_39: {}, __VLS_61: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_82: {
+}, __VLS_92: {
     group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_90: {
+}, __VLS_102: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_109: {
+}, __VLS_123: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_122: {};
+}, __VLS_136: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {
@@ -48,17 +51,19 @@ type __VLS_Slots = {} & {
 } & {
     'empty-filter'?: (props: typeof __VLS_29) => any;
 } & {
-    'empty-filter'?: (props: typeof __VLS_37) => any;
+    'empty-filter'?: (props: typeof __VLS_31) => any;
 } & {
-    item?: (props: typeof __VLS_57) => any;
+    'empty-filter'?: (props: typeof __VLS_39) => any;
 } & {
-    group?: (props: typeof __VLS_82) => any;
+    item?: (props: typeof __VLS_61) => any;
 } & {
-    item?: (props: typeof __VLS_90) => any;
+    group?: (props: typeof __VLS_92) => any;
 } & {
-    item?: (props: typeof __VLS_109) => any;
+    item?: (props: typeof __VLS_102) => any;
 } & {
-    footer?: (props: typeof __VLS_122) => any;
+    item?: (props: typeof __VLS_123) => any;
+} & {
+    footer?: (props: typeof __VLS_136) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBodyProps, {
     focusSearch: typeof focusSearch;

package/dist/runtime/internal/DatePickerCalendarBody.vue

@@ -120,7 +120,7 @@ const cellTriggerUi = {
       <DatePickerGrid v-for="month in grid" :key="month.value.toString()" v-bind="gridProps">
         <DatePickerGridHead v-bind="gridHeadProps">
           <DatePickerGridRow>
-            <DatePickerHeadCell v-for="day in weekDays" :key="day" v-bind="headCellProps">
+            <DatePickerHeadCell v-for="(day, index) in weekDays" :key="index" v-bind="headCellProps">
               {{ day }}
             </DatePickerHeadCell>
           </DatePickerGridRow>

package/dist/runtime/internal/DatePickerRangeCalendarBody.vue

@@ -51,7 +51,7 @@ const rangeCellTriggerUi = {
       <DateRangePickerGrid v-for="month in grid" :key="month.value.toString()" v-bind="gridProps">
         <DateRangePickerGridHead v-bind="gridHeadProps">
           <DateRangePickerGridRow>
-            <DateRangePickerHeadCell v-for="day in weekDays" :key="day" v-bind="headCellProps">
+            <DateRangePickerHeadCell v-for="(day, index) in weekDays" :key="index" v-bind="headCellProps">
               {{ day }}
             </DateRangePickerHeadCell>
           </DateRangePickerGridRow>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    shortcut?: string;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/internal/ShortcutHint.vue

@@ -0,0 +1,13 @@
+<script setup>
+import Kbd from "../components/Kbd.vue";
+import { applyClassPrefix } from "../utils/ui";
+defineProps({
+  shortcut: { type: String, required: false }
+});
+</script>
+
+<template>
+  <span v-if="shortcut" :class="applyClassPrefix('ms-auto inline-flex items-center gap-1')" aria-hidden="true">
+    <Kbd v-for="key in shortcut.split('+')" :key="key" :value="key.trim()" size="sm" />
+  </span>
+</template>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    shortcut?: string;
+};
+declare const __VLS_export: 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 _default: typeof __VLS_export;
+export default _default;

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

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

package/dist/runtime/internal/ToastItemRenderer.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ToastClose, ToastDescription, ToastRoot, ToastTitle } from "reka-ui";
-import { computed } from "vue";
+import { computed, ref, watch } from "vue";
 import Button from "../components/Button.vue";
 import Icon from "../components/Icon.vue";
 import { useIcons } from "../composables/use-icons";
@@ -11,16 +11,62 @@ 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 }
+  ui: { type: Object, required: false },
+  duration: { type: Number, required: true },
+  expand: { type: Boolean, required: true },
+  position: { type: null, required: true },
+  placement: { type: null, required: true },
+  leaving: { type: Boolean, required: true }
 });
-const emit = defineEmits(["remove"]);
+const emit = defineEmits(["remove", "resize"]);
+const rootElement = ref(null);
+function setRootElement(instance) {
+  if (typeof HTMLElement === "undefined")
+    return;
+  const element = instance instanceof HTMLElement ? instance : instance?.$el;
+  if (element instanceof HTMLElement)
+    rootElement.value = element;
+}
+const placement = ref(props.placement);
+watch(() => [props.placement, props.leaving], ([next, leaving]) => {
+  if (!leaving && next)
+    placement.value = next;
+});
+const clamped = computed(() => placement.value?.height !== void 0);
+watch(rootElement, (element, _previous, onCleanup) => {
+  if (!element)
+    return;
+  const updateHeight = () => {
+    if (!clamped.value && !props.leaving)
+      emit("resize", element.offsetHeight);
+  };
+  updateHeight();
+  if (typeof ResizeObserver === "undefined")
+    return;
+  const observer = new ResizeObserver(updateHeight);
+  observer.observe(element);
+  onCleanup(() => observer.disconnect());
+}, { flush: "post" });
 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 itemUi = computed(() => theme.value({
+  color: effectiveColor.value,
+  expand: props.expand,
+  position: props.position
+}));
 const rootProps = computed(() => resolveSlot(itemUi.value.root, props.ui?.root));
+const rootBindings = computed(() => ({
+  ...rootProps.value,
+  "data-stack": placement.value?.state,
+  "style": [
+    themeBindings.value.style,
+    placement.value && { transform: placement.value.transform, height: placement.value.height, zIndex: placement.value.zIndex },
+    rootProps.value.style
+  ]
+}));
 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));
@@ -30,12 +76,13 @@ const iconName = computed(() => props.toast.icon ?? (effectiveColor.value && isF
 
 <template>
   <ToastRoot
-    :duration="toast.duration ?? 5e3"
+    :ref="setRootElement"
+    :duration="toast.duration ?? duration"
     :data-selaras-theme="themeBindings['data-selaras-theme']"
     :data-selaras-mode="themeBindings['data-selaras-mode']"
     :data-selaras-color="effectiveColor"
-    :style="themeBindings.style"
-    v-bind="rootProps"
+    :open="!leaving"
+    v-bind="rootBindings"
     @update:open="(open) => !open && emit('remove', toast.id)"
   >
     <Icon v-if="iconName" :name="iconName" v-bind="iconProps" />
@@ -48,7 +95,7 @@ const iconName = computed(() => props.toast.icon ?? (effectiveColor.value && isF
       </ToastDescription>
     </div>
     <ToastClose as-child>
-      <Button size="sm" variant="ghost" color="neutral" :icon="icons.close" :aria-label="messages.close" v-bind="closeProps" />
+      <Button size="sm" variant="ghost" :color="effectiveColor ?? 'neutral'" :icon="icons.close" :aria-label="messages.close" v-bind="closeProps" />
     </ToastClose>
   </ToastRoot>
 </template>

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

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

package/dist/runtime/internal/combobox-select.js

@@ -67,7 +67,8 @@ export function useComboboxSelect(props, emit, { creatable = false } = {}) {
   }
   function commitCreatableText(rawText) {
     const text = rawText.trim();
-    if (!creatable || !text || hasMatchingOption(text))
+    const lower = text.toLowerCase();
+    if (!creatable || !text || flatOptions.value.some((o) => String(o.value).toLowerCase() === lower || o.label.toLowerCase() === lower))
       return false;
     if (props.multiple) {
       if (selectedValues.value.some((v) => typeof v === "string" && v.toLowerCase() === text.toLowerCase()))

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

@@ -60,7 +60,9 @@ export interface ProgrammaticOverlayService<T extends ProgrammaticOverlayInstanc
 }
 export interface ToastService {
     toasts: Ref<ToastItem[]>;
+    max: Ref<number>;
     nextId: () => number;
+    setMax: (max: number) => void;
     remove: (id: number) => void;
     dispose: () => void;
 }

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

@@ -42,13 +42,20 @@ export const useDrawerService = createOverlayService();
 export const useSlideoverService = createOverlayService();
 const useToastState = createAppScopedState(() => ({
   toasts: ref([]),
+  max: ref(5),
   counter: 0
 }));
 export function useToastService() {
   const state = useToastState();
   return {
     toasts: state.toasts,
+    max: state.max,
     nextId: () => state.counter++,
+    setMax(max) {
+      const limit = Number.isFinite(max) ? Math.max(0, Math.floor(max)) : 5;
+      state.max.value = limit;
+      state.toasts.value = limit > 0 ? state.toasts.value.slice(-limit) : [];
+    },
     remove(id) {
       const index = state.toasts.value.findIndex((toast) => toast.id === id);
       if (index !== -1)
@@ -56,6 +63,7 @@ export function useToastService() {
     },
     dispose() {
       state.toasts.value = [];
+      state.max.value = 5;
     }
   };
 }

package/dist/runtime/internal/toast-stack.d.ts

@@ -0,0 +1,36 @@
+/** Space between toasts when the stack is expanded. */
+export declare const TOAST_GAP = 12;
+/** How far each stacked toast shows behind the one in front of it. */
+export declare const TOAST_PEEK = 14;
+/** How much smaller each step back in the collapsed stack is drawn. */
+export declare const TOAST_SCALE_STEP = 0.05;
+/** Toasts visible in the collapsed stack, including the front one. */
+export declare const TOAST_VISIBLE_STACKED = 3;
+/** How long a dismissed toast stays mounted so it can animate out. */
+export declare const TOAST_EXIT_DURATION = 300;
+/** Used until a toast has been measured. */
+export declare const FALLBACK_TOAST_HEIGHT = 64;
+export interface ToastStackLayout {
+    /** Distance of each toast from the anchored edge when expanded, front toast first. */
+    offsets: number[];
+    frontHeight: number;
+    /** Height the viewport needs to contain the stack. */
+    height: number;
+}
+/** Lays out a stack from each toast's natural height, front (newest) toast first. */
+export declare function layoutToastStack(heights: number[], expanded: boolean): ToastStackLayout;
+/** Where a toast sits in the stack: the newest card, a card peeking behind it, one tucked away, or fanned out. */
+export type ToastStackState = 'front' | 'behind' | 'hidden' | 'expanded';
+export interface ToastStackItem {
+    state: ToastStackState;
+    transform: string;
+    /** Cards behind the front one borrow its height so the stack reads as a neat pile. */
+    height: string | undefined;
+    zIndex: number;
+}
+/**
+ * Places one toast in the stack. `index` counts from the front (newest)
+ * toast; `lift` is -1 when the stack grows upward from the bottom edge and
+ * 1 when it grows downward from the top edge.
+ */
+export declare function placeToast(index: number, layout: ToastStackLayout, expanded: boolean, lift: 1 | -1): ToastStackItem;

package/dist/runtime/internal/toast-stack.js

@@ -0,0 +1,36 @@
+export const TOAST_GAP = 12;
+export const TOAST_PEEK = 14;
+export const TOAST_SCALE_STEP = 0.05;
+export const TOAST_VISIBLE_STACKED = 3;
+export const TOAST_EXIT_DURATION = 300;
+export const FALLBACK_TOAST_HEIGHT = 64;
+export function layoutToastStack(heights, expanded) {
+  const offsets = [];
+  let offset = 0;
+  for (const height2 of heights) {
+    offsets.push(offset);
+    offset += height2 + TOAST_GAP;
+  }
+  const frontHeight = heights[0] ?? 0;
+  const shown = Math.min(heights.length, TOAST_VISIBLE_STACKED);
+  const height = heights.length === 0 ? 0 : expanded ? offset - TOAST_GAP : frontHeight + (shown - 1) * TOAST_PEEK;
+  return { offsets, frontHeight, height };
+}
+export function placeToast(index, layout, expanded, lift) {
+  const zIndex = layout.offsets.length - index;
+  if (expanded) {
+    return {
+      state: "expanded",
+      transform: `translateY(${lift * (layout.offsets[index] ?? 0)}px) scale(1)`,
+      height: void 0,
+      zIndex
+    };
+  }
+  const depth = Math.min(index, TOAST_VISIBLE_STACKED - 1);
+  return {
+    state: index === 0 ? "front" : index < TOAST_VISIBLE_STACKED ? "behind" : "hidden",
+    transform: `translateY(${lift * depth * TOAST_PEEK}px) scale(${1 - depth * TOAST_SCALE_STEP})`,
+    height: index === 0 ? void 0 : `${layout.frontHeight}px`,
+    zIndex
+  };
+}

package/dist/runtime/structural.css

@@ -1 +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-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-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))}}
+@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-toast-in{0%{opacity:0;translate:0 calc(var(--_selaras-toast-lift, -1)*-100%)}}@keyframes selaras-toast-out{to{opacity:0;translate:0 calc(var(--_selaras-toast-lift, -1)*var(--_selaras-toast-exit, -100%))}}@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-scrim:var(--selaras-scrim,hsla(0,0%,100%,.05));--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-code-tree-code span{color:var(--shiki-light)}.selaras-code-tree-code:where([data-selaras-code-mode=dark]) span,:root.dark .selaras-code-tree-code:where([data-selaras-code-mode=root]) span{color:var(--shiki-dark)}

package/dist/runtime/table.d.ts

@@ -1,3 +1,3 @@
-export type { TableColumnDef, TableColumnVisibilityState, TableExpandedState, TableGetRowId, TableRowSelectionState, TableSortingState } from './composables/use-table.js';
+export type { TableColumnDef, TableColumnVisibilityState, TableExpandedState, TableGetRowId, TableGetSubRows, 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/theme/alert-dialog.js

@@ -5,7 +5,7 @@ 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(--selaras-resolved-z-modal-overlay)] bg-[var(--selaras-resolved-scrim)]",
+    overlay: "fixed inset-0 z-[var(--selaras-resolved-z-modal-overlay)] bg-[var(--selaras-resolved-scrim)] backdrop-blur-[2px]",
     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(--selaras-resolved-text-default)]",

package/dist/runtime/theme/avatar.js

@@ -31,13 +31,13 @@ export const avatarTheme = tv({
     // (online, offline, ...) rarely match the avatar's own identity color, so
     // it gets its own variant rather than tracking the avatar's.
     statusColor: {
-      primary: { status: "bg-[var(--selaras-resolved-color-primary-fill)]" },
-      neutral: { status: "bg-[var(--selaras-resolved-text-muted)]" },
-      secondary: { status: "bg-[var(--selaras-resolved-color-secondary-fill)]" },
-      success: { status: "bg-[var(--selaras-resolved-color-success-fill)]" },
-      danger: { status: "bg-[var(--selaras-resolved-color-danger-fill)]" },
-      info: { status: "bg-[var(--selaras-resolved-color-info-fill)]" },
-      warning: { status: "bg-[var(--selaras-resolved-color-warning-fill)]" }
+      primary: { status: "bg-[var(--selaras-resolved-color-primary-indicator)]" },
+      neutral: { status: "bg-[var(--selaras-resolved-color-neutral-indicator)]" },
+      secondary: { status: "bg-[var(--selaras-resolved-color-secondary-indicator)]" },
+      success: { status: "bg-[var(--selaras-resolved-color-success-indicator)]" },
+      danger: { status: "bg-[var(--selaras-resolved-color-danger-indicator)]" },
+      info: { status: "bg-[var(--selaras-resolved-color-info-indicator)]" },
+      warning: { status: "bg-[var(--selaras-resolved-color-warning-indicator)]" }
     },
     size: {
       sm: { base: "size-6", fallback: "text-[10px]", icon: "size-3", status: "size-1.5" },