@sewadah/selaras 0.3.0 → 0.3.1

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-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))}}
+@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/calendar.d.ts

@@ -0,0 +1,86 @@
+export declare const calendarTheme: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
+            grids?: import("tailwind-variants").ClassValue;
+            grid?: import("tailwind-variants").ClassValue;
+            gridHead?: import("tailwind-variants").ClassValue;
+            headCell?: import("tailwind-variants").ClassValue;
+            cell?: import("tailwind-variants").ClassValue;
+            dayButton?: import("tailwind-variants").ClassValue;
+            dayDetails?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
+            grids?: import("tailwind-variants").ClassValue;
+            grid?: import("tailwind-variants").ClassValue;
+            gridHead?: import("tailwind-variants").ClassValue;
+            headCell?: import("tailwind-variants").ClassValue;
+            cell?: import("tailwind-variants").ClassValue;
+            dayButton?: import("tailwind-variants").ClassValue;
+            dayDetails?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    header: string;
+    heading: string;
+    grids: string;
+    grid: string;
+    gridHead: string;
+    headCell: string;
+    cell: string;
+    dayButton: string;
+    dayDetails: string;
+    footer: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            root?: import("tailwind-variants").ClassValue;
+            header?: import("tailwind-variants").ClassValue;
+            footer?: import("tailwind-variants").ClassValue;
+            heading?: import("tailwind-variants").ClassValue;
+            grids?: import("tailwind-variants").ClassValue;
+            grid?: import("tailwind-variants").ClassValue;
+            gridHead?: import("tailwind-variants").ClassValue;
+            headCell?: import("tailwind-variants").ClassValue;
+            cell?: import("tailwind-variants").ClassValue;
+            dayButton?: import("tailwind-variants").ClassValue;
+            dayDetails?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    header: string;
+    heading: string;
+    grids: string;
+    grid: string;
+    gridHead: string;
+    headCell: string;
+    cell: string;
+    dayButton: string;
+    dayDetails: string;
+    footer: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+    root: string;
+    header: string;
+    heading: string;
+    grids: string;
+    grid: string;
+    gridHead: string;
+    headCell: string;
+    cell: string;
+    dayButton: string;
+    dayDetails: string;
+    footer: string;
+}>>;
+export type CalendarThemeSlots = keyof (typeof calendarTheme)['slots'];

package/dist/runtime/theme/calendar.js

@@ -0,0 +1,19 @@
+import { tv } from "tailwind-variants";
+export const calendarTheme = tv({
+  slots: {
+    root: "inline-block",
+    header: "mb-2 flex items-center justify-between gap-2",
+    heading: "text-sm font-medium text-[var(--selaras-resolved-text-default)]",
+    grids: "flex flex-col gap-4 sm:flex-row",
+    // Give each month an intrinsic compact width. A percentage width here
+    // expands the inline-block root to its entire container. The fixed table
+    // layout keeps all seven columns equal even with day-details content.
+    grid: "w-72 table-fixed border-collapse",
+    gridHead: "",
+    headCell: "w-[14.285714%] h-8 text-xs font-medium text-[var(--selaras-resolved-text-muted)]",
+    cell: "p-0.5 text-center align-top",
+    dayButton: "relative data-[today]:font-semibold data-[today]:after:absolute data-[today]:after:bottom-1 data-[today]:after:left-1/2 data-[today]:after:size-1 data-[today]:after:-translate-x-1/2 data-[today]:after:rounded-full data-[today]:after:bg-[var(--_selaras-color-fill)] data-[outside-view]:opacity-40 data-[unavailable]:opacity-40 data-[unavailable]:line-through",
+    dayDetails: "min-w-0",
+    footer: "mt-3"
+  }
+});

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

@@ -1,19 +1,15 @@
 export declare const calloutTheme: import("tailwind-variants").TVReturnType<{
     type: {
         note: {
-            root: string;
             icon: string;
         };
         tip: {
-            root: string;
             icon: string;
         };
         warning: {
-            root: string;
             icon: string;
         };
         danger: {
-            root: string;
             icon: string;
         };
     };
@@ -25,19 +21,15 @@ export declare const calloutTheme: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     type: {
         note: {
-            root: string;
             icon: string;
         };
         tip: {
-            root: string;
             icon: string;
         };
         warning: {
-            root: string;
             icon: string;
         };
         danger: {
-            root: string;
             icon: string;
         };
     };
@@ -49,19 +41,15 @@ export declare const calloutTheme: import("tailwind-variants").TVReturnType<{
 }, import("tailwind-variants").TVReturnTypeLike<{
     type: {
         note: {
-            root: string;
             icon: string;
         };
         tip: {
-            root: string;
             icon: string;
         };
         warning: {
-            root: string;
             icon: string;
         };
         danger: {
-            root: string;
             icon: string;
         };
     };

package/dist/runtime/theme/callout.js

@@ -1,20 +1,20 @@
 import { tv } from "tailwind-variants";
 export const calloutTheme = tv({
   slots: {
-    // Border-only accent (not a filled background like Alert) - a callout
-    // sits inline in a long stretch of prose, so it stays closer to a
-    // styled blockquote than a standalone UI element.
-    root: "flex gap-3 rounded-[var(--selaras-resolved-radius-md)] border-s-4 bg-[var(--selaras-resolved-surface-elevated)] p-4",
+    // Match Alert's soft surface by default. A masked pseudo-element draws
+    // the striped accent over the edge on hover or focus within without
+    // changing the box's size or the content's padding.
+    root: "relative flex items-start gap-3 rounded-[var(--selaras-resolved-radius-md)] bg-[var(--_selaras-color-subtle)] p-4 before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:bg-[repeating-linear-gradient(135deg,var(--_selaras-color-border)_0_2px,transparent_2px_4px)] before:p-0.5 before:opacity-0 before:transition-opacity before:content-[''] hover:before:opacity-100 focus-within:before:opacity-100",
     icon: "mt-0.5 size-5 shrink-0",
     content: "min-w-0 flex-1 text-sm text-[var(--selaras-resolved-text-muted)] [&>:first-child]:mt-0 [&>:last-child]:mb-0",
     title: "font-medium text-[var(--selaras-resolved-text-default)]"
   },
   variants: {
     type: {
-      note: { root: "border-s-[var(--selaras-resolved-color-info-border)]", icon: "text-[var(--selaras-resolved-color-info-text)]" },
-      tip: { root: "border-s-[var(--selaras-resolved-color-success-border)]", icon: "text-[var(--selaras-resolved-color-success-text)]" },
-      warning: { root: "border-s-[var(--selaras-resolved-color-warning-border)]", icon: "text-[var(--selaras-resolved-color-warning-text)]" },
-      danger: { root: "border-s-[var(--selaras-resolved-color-danger-border)]", icon: "text-[var(--selaras-resolved-color-danger-text)]" }
+      note: { icon: "text-[var(--_selaras-color-text)]" },
+      tip: { icon: "text-[var(--_selaras-color-text)]" },
+      warning: { icon: "text-[var(--_selaras-color-text)]" },
+      danger: { icon: "text-[var(--_selaras-color-text)]" }
     }
   },
   defaultVariants: {

package/dist/runtime/theme/code-tree.js

@@ -5,7 +5,7 @@ export const codeTreeTheme = tv({
     // FileTree's own root box (border/bg/padding) is stripped via its :ui
     // override below - this wrapper provides that framing instead, so the
     // two panels read as one split view rather than a box inside a box.
-    tree: "w-56 shrink-0 overflow-auto border-e border-[var(--selaras-resolved-border-default)] p-2",
+    tree: "w-56 shrink-0 overflow-auto border-e border-[var(--selaras-resolved-border-default)] bg-[var(--selaras-resolved-surface-elevated)] p-2",
     content: "min-w-0 flex-1 overflow-auto p-4",
     pre: "whitespace-pre font-mono text-sm text-[var(--selaras-resolved-text-default)]",
     empty: "flex flex-1 items-center justify-center p-4 text-center text-sm text-[var(--selaras-resolved-text-muted)]"

package/dist/runtime/theme/command-palette.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const commandPaletteTheme = tv({
   slots: {
-    overlay: "fixed inset-0 z-[var(--selaras-resolved-z-modal-overlay)] bg-[var(--selaras-resolved-scrim)] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
+    overlay: "fixed inset-0 z-[var(--selaras-resolved-z-modal-overlay)] bg-[var(--selaras-resolved-scrim)] backdrop-blur-[2px] data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0",
     // Top-anchored (not vertically centered like Modal) - the conventional
     // command-palette position, and it means the dialog doesn't visibly
     // jump up and down as the result list grows/shrinks while typing.

package/dist/runtime/theme/content-navigation.d.ts

@@ -20,6 +20,7 @@ export declare const contentNavigationTheme: import("tailwind-variants").TVRetur
     linkActive: string;
     trigger: string;
     icon: string;
+    badge: string;
     chevron: string;
     content: string;
 }, undefined, {
@@ -44,6 +45,7 @@ export declare const contentNavigationTheme: import("tailwind-variants").TVRetur
     linkActive: string;
     trigger: string;
     icon: string;
+    badge: string;
     chevron: string;
     content: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
@@ -68,6 +70,7 @@ export declare const contentNavigationTheme: import("tailwind-variants").TVRetur
     linkActive: string;
     trigger: string;
     icon: string;
+    badge: string;
     chevron: string;
     content: string;
 }>>;

package/dist/runtime/theme/content-navigation.js

@@ -12,6 +12,7 @@ export const contentNavigationTheme = tv({
     // A separate slot from label - this styles the icon a link/group-header
     // shows before its title, not the title text itself.
     icon: "size-4 shrink-0 text-[var(--selaras-resolved-text-muted)]",
+    badge: "ms-auto inline-flex shrink-0 items-center rounded-full bg-[var(--selaras-resolved-surface-elevated)] px-2 py-0.5 text-xs font-medium text-[var(--selaras-resolved-text-muted)]",
     chevron: "size-4 shrink-0 text-[var(--selaras-resolved-text-muted)] transition-transform group-data-[state=open]:rotate-180",
     // `ps-4` (16px) reserves the gutter each child's own trunk segment
     // and elbow (on the `item` slot above) reach back into - the trunk

package/dist/runtime/theme/drawer.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const drawerTheme = tv({
   slots: {
-    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 z-[var(--selaras-resolved-z-modal)] flex flex-col bg-[var(--selaras-resolved-surface-default)] shadow-[var(--selaras-resolved-shadow-lg)] focus:outline-none",
     // A small rounded grip bar - purely visual, signals "draggable" the
     // same way a real bottom sheet's handle does. Centered via the

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

@@ -5,12 +5,19 @@ export declare const dropdownTheme: import("tailwind-variants").TVReturnType<{
             icon: string;
         };
     };
+    mobile: {
+        true: {
+            item: string;
+        };
+    };
 }, {
     content: string;
     item: string;
     icon: string;
     separator: string;
     arrow: string;
+    mobileList: string;
+    mobileGroup: string;
 }, undefined, {
     destructive: {
         true: {
@@ -18,12 +25,19 @@ export declare const dropdownTheme: import("tailwind-variants").TVReturnType<{
             icon: string;
         };
     };
+    mobile: {
+        true: {
+            item: string;
+        };
+    };
 }, {
     content: string;
     item: string;
     icon: string;
     separator: string;
     arrow: string;
+    mobileList: string;
+    mobileGroup: string;
 }, import("tailwind-variants").TVReturnTypeLike<{
     destructive: {
         true: {
@@ -31,11 +45,18 @@ export declare const dropdownTheme: import("tailwind-variants").TVReturnType<{
             icon: string;
         };
     };
+    mobile: {
+        true: {
+            item: string;
+        };
+    };
 }, {
     content: string;
     item: string;
     icon: string;
     separator: string;
     arrow: string;
+    mobileList: string;
+    mobileGroup: string;
 }>>;
 export type DropdownThemeSlots = keyof (typeof dropdownTheme)['slots'];