@sewadah/selaras 0.2.0 → 0.3.1

package/dist/runtime/components/Timeline.vue

@@ -0,0 +1,99 @@
+<script setup>
+import { computed } from "vue";
+import { timelineTheme } from "../theme/timeline";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { applyClassPrefix, resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import Icon from "./Icon.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  items: { type: Array, required: true },
+  orientation: { type: String, required: false, default: "vertical" },
+  align: { type: String, required: false, default: "start" },
+  size: { type: String, required: false, default: "md" },
+  color: { type: null, required: false, default: "primary" },
+  ui: { type: Object, required: false }
+});
+defineSlots();
+const theme = useComponentTheme("timeline", timelineTheme);
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color, "primary"));
+const ui = computed(() => theme.value({
+  orientation: props.orientation,
+  align: props.align,
+  size: props.size,
+  color: effectiveColor.value
+}));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
+const isHorizontal = computed(() => props.orientation === "horizontal");
+const slotProps = (item, index) => ({ item, index });
+function itemUi(item, slot) {
+  return resolveSlot(ui.value[slot], item.ui?.[slot] ?? props.ui?.[slot]);
+}
+function contentPlacement(index) {
+  if (props.align !== "alternate")
+    return void 0;
+  if (isHorizontal.value)
+    return applyClassPrefix(index % 2 === 0 ? "row-start-1" : "row-start-3");
+  return applyClassPrefix(index % 2 === 0 ? "col-start-3 text-start" : "col-start-1 text-end");
+}
+</script>
+
+<template>
+  <ol
+    :data-selaras-color="effectiveColor"
+    :data-orientation="orientation"
+    :data-align="align"
+    v-bind="rootProps"
+  >
+    <li
+      v-for="(item, index) in items"
+      :key="item.id ?? index"
+      :data-selaras-color="resolveRegisteredColorRole(item.color ?? color, 'primary')"
+      :class="item.class"
+      v-bind="itemUi(item, 'item')"
+    >
+      <div v-bind="itemUi(item, 'track')">
+        <span
+          aria-hidden="true"
+          :data-marker-type="item.icon ? 'icon' : $slots.marker ? 'custom' : 'dot'"
+          v-bind="itemUi(item, 'marker')"
+        >
+          <slot name="marker" v-bind="slotProps(item, index)">
+            <Icon v-if="item.icon" :name="item.icon" v-bind="itemUi(item, 'icon')" />
+          </slot>
+        </span>
+        <template v-if="index < items.length - 1">
+          <span aria-hidden="true" v-bind="itemUi(item, 'connector')">
+            <slot name="connector" v-bind="slotProps(item, index)" />
+          </span>
+        </template>
+      </div>
+
+      <div v-if="item.slot && $slots[item.slot]" :class="contentPlacement(index)" v-bind="itemUi(item, 'content')">
+        <slot :name="item.slot" v-bind="slotProps(item, index)" />
+      </div>
+      <slot v-else-if="$slots.item" name="item" v-bind="slotProps(item, index)" />
+      <div v-else :class="contentPlacement(index)" v-bind="itemUi(item, 'content')">
+        <slot name="content" v-bind="slotProps(item, index)">
+          <div v-if="item.date || $slots.date" v-bind="itemUi(item, 'date')">
+            <slot name="date" v-bind="slotProps(item, index)">
+              <time v-if="item.datetime" :datetime="item.datetime">{{ item.date }}</time>
+              <template v-else>
+                {{ item.date }}
+              </template>
+            </slot>
+          </div>
+          <div v-if="item.title || $slots.title" v-bind="itemUi(item, 'title')">
+            <slot name="title" v-bind="slotProps(item, index)">
+              {{ item.title }}
+            </slot>
+          </div>
+          <div v-if="item.description || $slots.description" v-bind="itemUi(item, 'description')">
+            <slot name="description" v-bind="slotProps(item, index)">
+              {{ item.description }}
+            </slot>
+          </div>
+        </slot>
+      </div>
+    </li>
+  </ol>
+</template>

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

@@ -0,0 +1,19 @@
+import type { TimelineItem, TimelineProps, TimelineSlots } from '../utils/timeline-contracts.js';
+declare const __VLS_export: <Item extends TimelineItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<TimelineProps<Item>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: TimelineSlots<Item>;
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -1,6 +1,15 @@
-import type { ToastThemeSlots } from '../theme/toast.js';
+import type { ToastPosition as ToastPositionType, ToastThemeSlots } from '../theme/toast.js';
 import type { UiProp } from '../utils/ui.js';
+export type ToastPosition = ToastPositionType;
 export interface ToastProps {
+    /** Where the toast viewport is pinned. @default 'bottom-right' */
+    position?: ToastPositionType;
+    /** Shows every toast separately instead of layering them into a stack that fans open on hover. @default false */
+    expand?: boolean;
+    /** Default visibility time in milliseconds; a toast's own duration takes precedence. @default 5000 */
+    duration?: number;
+    /** Maximum number of toasts shown at once; older toasts are removed when the limit is reached. @default 5 */
+    max?: number;
     ui?: UiProp<ToastThemeSlots>;
 }
 declare const __VLS_export: import("vue").DefineComponent<ToastProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToastProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/Toast.vue

@@ -1,30 +1,116 @@
 <script setup>
 import { ToastPortal, ToastViewport } from "reka-ui";
-import { computed, onUnmounted } from "vue";
+import { computed, onUnmounted, ref, watch } from "vue";
 import { useToastService } from "../internal/programmatic-services";
 import ProgrammaticTheme from "../internal/ProgrammaticTheme.vue";
+import { FALLBACK_TOAST_HEIGHT, layoutToastStack, placeToast, TOAST_EXIT_DURATION } from "../internal/toast-stack";
 import ToastItemRenderer from "../internal/ToastItemRenderer.vue";
 import { toastTheme } from "../theme/toast";
 import { resolveSlot, useComponentTheme } from "../utils/ui";
 const props = defineProps({
+  position: { type: null, required: false },
+  expand: { type: Boolean, required: false, default: false },
+  duration: { type: Number, required: false, default: 5e3 },
+  max: { type: Number, required: false, default: 5 },
   ui: { type: Object, required: false }
 });
-const { toasts, remove, dispose } = useToastService();
+const { toasts, remove, setMax, dispose } = useToastService();
 const theme = useComponentTheme("toast", toastTheme);
-const ui = computed(() => theme.value());
-const viewportProps = computed(() => resolveSlot(ui.value.viewport, props.ui?.viewport));
-onUnmounted(dispose);
+const position = computed(() => props.position ?? "bottom-right");
+const lift = computed(() => position.value.startsWith("top") ? 1 : -1);
+const hovered = ref(false);
+const focused = ref(false);
+const expanded = computed(() => props.expand || hovered.value || focused.value);
+const ui = computed(() => theme.value({ position: position.value, expand: expanded.value }));
+const rendered = ref([]);
+const toastHeights = ref(/* @__PURE__ */ new Map());
+const leaving = ref(/* @__PURE__ */ new Set());
+const exitTimers = /* @__PURE__ */ new Map();
+watch(() => [...toasts.value], (queued) => {
+  const queuedIds = new Set(queued.map((toast) => toast.id));
+  const departing = rendered.value.filter((toast) => !queuedIds.has(toast.id));
+  if (departing.length) {
+    const next = new Set(leaving.value);
+    for (const toast of departing) {
+      next.add(toast.id);
+      if (!exitTimers.has(toast.id))
+        exitTimers.set(toast.id, setTimeout(finishExit, TOAST_EXIT_DURATION, toast.id));
+    }
+    leaving.value = next;
+  }
+  rendered.value = [...queued, ...departing].sort((a, b) => a.id - b.id);
+}, { immediate: true });
+function finishExit(id) {
+  exitTimers.delete(id);
+  rendered.value = rendered.value.filter((toast) => toast.id !== id);
+  const next = new Set(leaving.value);
+  next.delete(id);
+  leaving.value = next;
+  const heights = new Map(toastHeights.value);
+  heights.delete(id);
+  toastHeights.value = heights;
+}
+const stacked = computed(() => rendered.value.filter((toast) => !leaving.value.has(toast.id)).reverse());
+const layout = computed(() => layoutToastStack(
+  stacked.value.map((toast) => toastHeights.value.get(toast.id) ?? FALLBACK_TOAST_HEIGHT),
+  expanded.value
+));
+const placements = computed(() => {
+  const byId = /* @__PURE__ */ new Map();
+  stacked.value.forEach((toast, index) => byId.set(toast.id, placeToast(index, layout.value, expanded.value, lift.value)));
+  return byId;
+});
+const viewportProps = computed(() => {
+  const resolved = resolveSlot(ui.value.viewport, props.ui?.viewport);
+  const height = layout.value.height ? { height: `calc(${layout.value.height}px + 2rem)` } : void 0;
+  return { ...resolved, style: [height, resolved.style] };
+});
+function updateToastHeight(id, height) {
+  if (!Number.isFinite(height) || height <= 0 || toastHeights.value.get(id) === height)
+    return;
+  const next = new Map(toastHeights.value);
+  next.set(id, height);
+  toastHeights.value = next;
+}
+function onFocusOut(event) {
+  const viewport = event.currentTarget;
+  if (!viewport?.contains(event.relatedTarget))
+    focused.value = false;
+}
+watch(() => props.max, setMax, { immediate: true });
+onUnmounted(() => {
+  for (const timer of exitTimers.values())
+    clearTimeout(timer);
+  exitTimers.clear();
+  dispose();
+});
 </script>
 
 <template>
   <ProgrammaticTheme
-    v-for="toast in toasts"
+    v-for="toast in rendered"
     :key="toast.id"
     :snapshot="toast._theme"
   >
-    <ToastItemRenderer :toast="toast" :ui="props.ui" @remove="remove" />
+    <ToastItemRenderer
+      :toast="toast"
+      :ui="props.ui"
+      :duration="props.duration"
+      :expand="expanded"
+      :position="position"
+      :placement="placements.get(toast.id)"
+      :leaving="leaving.has(toast.id)"
+      @remove="remove"
+      @resize="updateToastHeight(toast.id, $event)"
+    />
   </ProgrammaticTheme>
   <ToastPortal>
-    <ToastViewport v-bind="viewportProps" />
+    <ToastViewport
+      v-bind="viewportProps"
+      @mouseenter="hovered = true"
+      @mouseleave="hovered = false"
+      @focusin="focused = true"
+      @focusout="onFocusOut"
+    />
   </ToastPortal>
 </template>

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

@@ -1,6 +1,15 @@
-import type { ToastThemeSlots } from '../theme/toast.js';
+import type { ToastPosition as ToastPositionType, ToastThemeSlots } from '../theme/toast.js';
 import type { UiProp } from '../utils/ui.js';
+export type ToastPosition = ToastPositionType;
 export interface ToastProps {
+    /** Where the toast viewport is pinned. @default 'bottom-right' */
+    position?: ToastPositionType;
+    /** Shows every toast separately instead of layering them into a stack that fans open on hover. @default false */
+    expand?: boolean;
+    /** Default visibility time in milliseconds; a toast's own duration takes precedence. @default 5000 */
+    duration?: number;
+    /** Maximum number of toasts shown at once; older toasts are removed when the limit is reached. @default 5 */
+    max?: number;
     ui?: UiProp<ToastThemeSlots>;
 }
 declare const __VLS_export: import("vue").DefineComponent<ToastProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToastProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -1,13 +1,19 @@
 import type { TooltipThemeSlots } from '../theme/tooltip.js';
+import type { ArrowConfig } from '../utils/arrow.js';
+import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
 import type { UiProp } from '../utils/ui.js';
 export interface TooltipProps {
     text?: string;
     side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Anchored tooltip placement. Overrides `side` when supplied. */
+    positioning?: OverlayPositioning;
+    /** Teleport target, or `false` to render inline. Defaults to `body`. */
+    portal?: OverlayPortal;
     delayDuration?: number;
     /** Keyboard shortcut hint shown alongside the text, e.g. `['⌘', 'K']` - each entry renders as its own small key badge. Takes the literal display strings, not semantic key names - there's no platform-specific symbol mapping. */
     kbds?: string[];
-    /** Set `false` to hide the little pointer triangle. */
-    arrow?: boolean;
+    /** Set `false` to hide the pointer; an object configures its size and edge clearance. */
+    arrow?: boolean | ArrowConfig;
     disabled?: boolean;
     ui?: UiProp<TooltipThemeSlots>;
 }

package/dist/runtime/components/Tooltip.vue

@@ -2,21 +2,26 @@
 import { TooltipArrow, TooltipContent, TooltipPortal, TooltipRoot, TooltipTrigger } from "reka-ui";
 import { computed } from "vue";
 import { tooltipTheme } from "../theme/tooltip";
+import { arrowContentProps, arrowElementProps } from "../utils/arrow";
+import { overlayPortalProps } from "../utils/overlay";
 import { resolveSlot, useComponentTheme, useThemeBindings } from "../utils/ui";
 const props = defineProps({
   text: { type: String, required: false },
   side: { type: String, required: false, default: "top" },
+  positioning: { type: Object, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: void 0 },
   delayDuration: { type: Number, required: false, default: 200 },
   kbds: { type: Array, required: false },
-  arrow: { type: Boolean, required: false, default: true },
+  arrow: { type: [Boolean, Object], required: false, default: true },
   disabled: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });
 const theme = useComponentTheme("tooltip", tooltipTheme);
 const themeBindings = useThemeBindings();
 const ui = computed(() => theme.value());
-const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
-const arrowProps = computed(() => resolveSlot(ui.value.arrow, props.ui?.arrow));
+const contentProps = computed(() => ({ ...resolveSlot(ui.value.content, props.ui?.content), ...arrowContentProps(props.arrow), ...props.positioning }));
+const portalProps = computed(() => overlayPortalProps(props.portal));
+const arrowProps = computed(() => ({ ...resolveSlot(ui.value.arrow, props.ui?.arrow), ...arrowElementProps(props.arrow) }));
 const kbdsProps = computed(() => resolveSlot(ui.value.kbds, props.ui?.kbds));
 const kbdProps = computed(() => resolveSlot(ui.value.kbd, props.ui?.kbd));
 </script>
@@ -26,7 +31,7 @@ const kbdProps = computed(() => resolveSlot(ui.value.kbd, props.ui?.kbd));
     <TooltipTrigger as-child>
       <slot />
     </TooltipTrigger>
-    <TooltipPortal>
+    <TooltipPortal v-bind="portalProps">
       <TooltipContent :side="side" :side-offset="6" :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" v-bind="contentProps">
         <slot name="content">
           {{ text }}

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

@@ -1,13 +1,19 @@
 import type { TooltipThemeSlots } from '../theme/tooltip.js';
+import type { ArrowConfig } from '../utils/arrow.js';
+import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
 import type { UiProp } from '../utils/ui.js';
 export interface TooltipProps {
     text?: string;
     side?: 'top' | 'right' | 'bottom' | 'left';
+    /** Anchored tooltip placement. Overrides `side` when supplied. */
+    positioning?: OverlayPositioning;
+    /** Teleport target, or `false` to render inline. Defaults to `body`. */
+    portal?: OverlayPortal;
     delayDuration?: number;
     /** Keyboard shortcut hint shown alongside the text, e.g. `['⌘', 'K']` - each entry renders as its own small key badge. Takes the literal display strings, not semantic key names - there's no platform-specific symbol mapping. */
     kbds?: string[];
-    /** Set `false` to hide the little pointer triangle. */
-    arrow?: boolean;
+    /** Set `false` to hide the pointer; an object configures its size and edge clearance. */
+    arrow?: boolean | ArrowConfig;
     disabled?: boolean;
     ui?: UiProp<TooltipThemeSlots>;
 }

package/dist/runtime/composables/use-form-field.d.ts

@@ -4,6 +4,7 @@ export interface FormFieldContext {
     labelId?: string;
     name?: string;
     size?: 'sm' | 'md' | 'lg';
+    floatingLabel: ComputedRef<boolean>;
     invalid: ComputedRef<boolean>;
     describedBy: ComputedRef<string | undefined>;
 }

package/dist/runtime/composables/use-table.d.ts

@@ -34,6 +34,7 @@ export type TableRowSelectionState = RowSelectionState;
 export type TableExpandedState = ExpandedState;
 export type TableColumnVisibilityState = ColumnVisibilityState;
 export type TableGetRowId<TData extends RowData = RowData> = (row: TData, index: number) => string;
+export type TableGetSubRows<TData extends RowData = RowData> = (row: TData, index: number) => readonly TData[] | undefined;
 /** Creates TanStack v9 column definitions bound to STable's fixed feature set. */
 export declare const createTableColumnHelper: <TData extends RowData>() => import("@tanstack/vue-table").AppColumnHelper<{
     rowSortingFeature: import("@tanstack/vue-table").TableFeature;
@@ -68,6 +69,8 @@ interface UseTableProps<TData extends RowData> {
     expanded?: TableExpandedState;
     columnVisibility?: TableColumnVisibilityState;
     getRowId?: TableGetRowId<TData>;
+    tree?: boolean;
+    getSubRows?: TableGetSubRows<TData>;
     manualSorting?: boolean;
     manualFiltering?: boolean;
     manualPagination?: boolean;

package/dist/runtime/composables/use-table.js

@@ -89,12 +89,18 @@ export function useTable(props, emit, columns, columnPinning) {
   const table = useAppTable({
     data: computed(() => props.data),
     columns,
+    // TanStack enables sorting by default for accessor columns. Selaras opts
+    // columns into sorting explicitly, matching the declarative SColumn API.
+    defaultColumn: { enableSorting: false },
     enableRowSelection: computed(() => !!props.selectable),
     getRowId: props.getRowId,
-    // Row expansion otherwise only allows expanding rows that already have
-    // real hierarchical subRows - this table's own expansion is manual
-    // (detail content via the `expanded` slot), not a subRow tree.
-    getRowCanExpand: () => true,
+    getSubRows: props.tree ? props.getSubRows ?? ((row) => row.subRows) : () => void 0,
+    // Tree rows expand when they have children; detail expansion remains
+    // available on every row when tree mode is off.
+    getRowCanExpand: (row) => props.tree ? !!row.subRows?.length : true,
+    // Paginate tree roots as a unit so expanding one root does not hide later
+    // roots simply because its children consume the page-size row count.
+    paginateExpandedRows: false,
     // Opts out of the local sorted/filtered/paginated row models - state
     // still lives here (sorting/globalFilter/pageIndex above, still
     // emitting their own update:* events the normal way), only the row

package/dist/runtime/composables/use-toast.js

@@ -5,9 +5,13 @@ export function useToast() {
   const snapshotTheme = useProgrammaticThemeSnapshot();
   function add(toast) {
     if (import.meta.server)
-      throw new Error("[useToast] add() is client-only. Render server-visible status content declaratively.");
+      return -1;
     const id = service.nextId();
+    if (service.max.value <= 0)
+      return id;
     service.toasts.value.push({ ...toast, id, _theme: snapshotTheme() });
+    if (service.toasts.value.length > service.max.value)
+      service.toasts.value.splice(0, service.toasts.value.length - service.max.value);
     return id;
   }
   return { add, remove: service.remove };

package/dist/runtime/default-colors.css

@@ -1 +1 @@
-@theme static{--color-selaras-amber-50:oklch(0.985 0.022 88);--color-selaras-amber-100:oklch(0.96 0.055 88);--color-selaras-amber-200:oklch(0.915 0.105 88);--color-selaras-amber-300:oklch(0.86 0.145 88);--color-selaras-amber-400:oklch(0.81 0.165 88);--color-selaras-amber-500:oklch(0.755 0.165 88);--color-selaras-amber-600:oklch(0.665 0.155 88);--color-selaras-amber-700:oklch(0.565 0.135 88);--color-selaras-amber-800:oklch(0.465 0.11 88);--color-selaras-amber-900:oklch(0.375 0.085 88);--color-selaras-amber-950:oklch(0.255 0.055 88);--color-selaras-blue-50:oklch(0.975 0.018 245);--color-selaras-blue-100:oklch(0.945 0.04 245);--color-selaras-blue-200:oklch(0.895 0.075 245);--color-selaras-blue-300:oklch(0.82 0.115 245);--color-selaras-blue-400:oklch(0.715 0.155 245);--color-selaras-blue-500:oklch(0.62 0.175 245);--color-selaras-blue-600:oklch(0.535 0.165 245);--color-selaras-blue-700:oklch(0.455 0.145 245);--color-selaras-blue-800:oklch(0.375 0.115 245);--color-selaras-blue-900:oklch(0.3 0.085 245);--color-selaras-blue-950:oklch(0.215 0.055 245);--color-selaras-emerald-50:oklch(0.98 0.02 148);--color-selaras-emerald-100:oklch(0.95 0.045 148);--color-selaras-emerald-200:oklch(0.895 0.08 148);--color-selaras-emerald-300:oklch(0.82 0.12 148);--color-selaras-emerald-400:oklch(0.735 0.155 148);--color-selaras-emerald-500:oklch(0.64 0.175 148);--color-selaras-emerald-600:oklch(0.555 0.16 148);--color-selaras-emerald-700:oklch(0.47 0.14 148);--color-selaras-emerald-800:oklch(0.39 0.115 148);--color-selaras-emerald-900:oklch(0.315 0.085 148);--color-selaras-emerald-950:oklch(0.225 0.055 148);--color-selaras-gray-25:oklch(0.995 0.0015 280);--color-selaras-gray-50:oklch(0.98 0.003 280);--color-selaras-gray-100:oklch(0.945 0.0065 280);--color-selaras-gray-200:oklch(0.9 0.01 280);--color-selaras-gray-300:oklch(0.84 0.014 280);--color-selaras-gray-400:oklch(0.7 0.018 280);--color-selaras-gray-500:oklch(0.555 0.02 280);--color-selaras-gray-600:oklch(0.445 0.019 280);--color-selaras-gray-700:oklch(0.365 0.017 280);--color-selaras-gray-800:oklch(0.275 0.014 280);--color-selaras-gray-900:oklch(0.205 0.011 280);--color-selaras-gray-950:oklch(0.145 0.008 280);--color-selaras-indigo-50:oklch(0.97 0.012 279.99);--color-selaras-indigo-100:oklch(0.93 0.028 279.99);--color-selaras-indigo-200:oklch(0.86 0.055 279.99);--color-selaras-indigo-300:oklch(0.78 0.1 279.99);--color-selaras-indigo-400:oklch(0.64 0.165 279.99);--color-selaras-indigo-500:oklch(0.4755 0.2026 279.99);--color-selaras-indigo-600:oklch(0.415 0.185 279.99);--color-selaras-indigo-700:oklch(0.355 0.158 279.99);--color-selaras-indigo-800:oklch(0.295 0.128 279.99);--color-selaras-indigo-900:oklch(0.235 0.095 279.99);--color-selaras-indigo-950:oklch(0.17 0.06 279.99);--color-selaras-plum-50:oklch(0.975 0.012 325);--color-selaras-plum-100:oklch(0.945 0.03 325);--color-selaras-plum-200:oklch(0.89 0.06 325);--color-selaras-plum-300:oklch(0.81 0.1 325);--color-selaras-plum-400:oklch(0.69 0.145 325);--color-selaras-plum-500:oklch(0.565 0.175 325);--color-selaras-plum-600:oklch(0.495 0.165 325);--color-selaras-plum-700:oklch(0.42 0.145 325);--color-selaras-plum-800:oklch(0.345 0.115 325);--color-selaras-plum-900:oklch(0.275 0.085 325);--color-selaras-plum-950:oklch(0.19 0.055 325);--color-selaras-red-50:oklch(0.975 0.015 28);--color-selaras-red-100:oklch(0.945 0.035 28);--color-selaras-red-200:oklch(0.89 0.07 28);--color-selaras-red-300:oklch(0.805 0.12 28);--color-selaras-red-400:oklch(0.7 0.175 28);--color-selaras-red-500:oklch(0.6 0.205 28);--color-selaras-red-600:oklch(0.525 0.195 28);--color-selaras-red-700:oklch(0.445 0.17 28);--color-selaras-red-800:oklch(0.365 0.135 28);--color-selaras-red-900:oklch(0.295 0.1 28);--color-selaras-red-950:oklch(0.205 0.065 28)}@layer theme{:root,[data-selaras-theme]{--_selaras-default-surface-default:--theme(--color-selaras-gray-25);--_selaras-default-surface-elevated:--theme(--color-selaras-gray-50);--_selaras-default-surface-inverted:--theme(--color-selaras-gray-950);--_selaras-default-text-default:--theme(--color-selaras-gray-950);--_selaras-default-text-muted:--theme(--color-selaras-gray-600);--_selaras-default-text-inverted:--theme(--color-selaras-gray-50);--_selaras-default-border-default:--theme(--color-selaras-gray-200);--_selaras-default-border-muted:--theme(--color-selaras-gray-100);--_selaras-default-border-hover:--theme(--color-selaras-gray-300)}: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-default-surface-default:--theme(--color-selaras-gray-950);--_selaras-default-surface-elevated:--theme(--color-selaras-gray-900);--_selaras-default-surface-inverted:--theme(--color-selaras-gray-50);--_selaras-default-text-default:--theme(--color-selaras-gray-50);--_selaras-default-text-muted:--theme(--color-selaras-gray-400);--_selaras-default-text-inverted:--theme(--color-selaras-gray-950);--_selaras-default-border-default:--theme(--color-selaras-gray-800);--_selaras-default-border-muted:--theme(--color-selaras-gray-900);--_selaras-default-border-hover:--theme(--color-selaras-gray-700)}}
+@theme static{--color-selaras-blue-50:oklch(0.975 0.018 245);--color-selaras-blue-100:oklch(0.945 0.04 245);--color-selaras-blue-200:oklch(0.895 0.075 245);--color-selaras-blue-300:oklch(0.82 0.115 245);--color-selaras-blue-400:oklch(0.715 0.155 245);--color-selaras-blue-500:oklch(0.62 0.175 245);--color-selaras-blue-600:oklch(0.535 0.165 245);--color-selaras-blue-700:oklch(0.455 0.145 245);--color-selaras-blue-800:oklch(0.375 0.115 245);--color-selaras-blue-900:oklch(0.3 0.085 245);--color-selaras-blue-950:oklch(0.215 0.055 245);--color-selaras-gray-25:oklch(0.995 0.0015 280);--color-selaras-gray-50:oklch(0.98 0.003 280);--color-selaras-gray-100:oklch(0.945 0.0065 280);--color-selaras-gray-200:oklch(0.9 0.01 280);--color-selaras-gray-300:oklch(0.84 0.014 280);--color-selaras-gray-400:oklch(0.7 0.018 280);--color-selaras-gray-500:oklch(0.555 0.02 280);--color-selaras-gray-600:oklch(0.445 0.019 280);--color-selaras-gray-700:oklch(0.365 0.017 280);--color-selaras-gray-800:oklch(0.275 0.014 280);--color-selaras-gray-900:oklch(0.205 0.011 280);--color-selaras-gray-950:oklch(0.145 0.008 280);--color-selaras-green-50:oklch(0.982 0.018 155.826);--color-selaras-green-100:oklch(0.962 0.044 156.743);--color-selaras-green-200:oklch(0.925 0.084 155.995);--color-selaras-green-300:oklch(0.871 0.15 154.449);--color-selaras-green-400:oklch(0.792 0.209 151.711);--color-selaras-green-500:oklch(0.723 0.219 149.579);--color-selaras-green-600:oklch(0.627 0.194 149.214);--color-selaras-green-700:oklch(0.527 0.154 150.069);--color-selaras-green-800:oklch(0.448 0.119 151.328);--color-selaras-green-900:oklch(0.393 0.095 152.535);--color-selaras-green-950:oklch(0.266 0.065 152.934);--color-selaras-indigo-50:oklch(0.97 0.012 279.99);--color-selaras-indigo-100:oklch(0.93 0.028 279.99);--color-selaras-indigo-200:oklch(0.86 0.055 279.99);--color-selaras-indigo-300:oklch(0.78 0.1 279.99);--color-selaras-indigo-400:oklch(0.64 0.165 279.99);--color-selaras-indigo-500:oklch(0.4755 0.2026 279.99);--color-selaras-indigo-600:oklch(0.415 0.185 279.99);--color-selaras-indigo-700:oklch(0.355 0.158 279.99);--color-selaras-indigo-800:oklch(0.295 0.128 279.99);--color-selaras-indigo-900:oklch(0.235 0.095 279.99);--color-selaras-indigo-950:oklch(0.17 0.06 279.99);--color-selaras-plum-50:oklch(0.975 0.012 325);--color-selaras-plum-100:oklch(0.945 0.03 325);--color-selaras-plum-200:oklch(0.89 0.06 325);--color-selaras-plum-300:oklch(0.81 0.1 325);--color-selaras-plum-400:oklch(0.69 0.145 325);--color-selaras-plum-500:oklch(0.565 0.175 325);--color-selaras-plum-600:oklch(0.495 0.165 325);--color-selaras-plum-700:oklch(0.42 0.145 325);--color-selaras-plum-800:oklch(0.345 0.115 325);--color-selaras-plum-900:oklch(0.275 0.085 325);--color-selaras-plum-950:oklch(0.19 0.055 325);--color-selaras-red-50:oklch(0.971 0.013 17.38);--color-selaras-red-100:oklch(0.936 0.032 17.717);--color-selaras-red-200:oklch(0.885 0.062 18.334);--color-selaras-red-300:oklch(0.808 0.114 19.571);--color-selaras-red-400:oklch(0.704 0.191 22.216);--color-selaras-red-500:oklch(0.637 0.237 25.331);--color-selaras-red-600:oklch(0.577 0.245 27.325);--color-selaras-red-700:oklch(0.505 0.213 27.518);--color-selaras-red-800:oklch(0.444 0.177 26.899);--color-selaras-red-900:oklch(0.396 0.141 25.723);--color-selaras-red-950:oklch(0.258 0.092 26.042);--color-selaras-yellow-50:oklch(0.987 0.026 102.212);--color-selaras-yellow-100:oklch(0.973 0.071 103.193);--color-selaras-yellow-200:oklch(0.945 0.129 101.54);--color-selaras-yellow-300:oklch(0.905 0.182 98.111);--color-selaras-yellow-400:oklch(0.852 0.199 91.936);--color-selaras-yellow-500:oklch(0.795 0.184 86.047);--color-selaras-yellow-600:oklch(0.681 0.162 75.834);--color-selaras-yellow-700:oklch(0.554 0.135 66.442);--color-selaras-yellow-800:oklch(0.476 0.114 61.907);--color-selaras-yellow-900:oklch(0.421 0.095 57.708);--color-selaras-yellow-950:oklch(0.286 0.066 53.813)}@layer theme{:root,[data-selaras-theme]{--_selaras-default-surface-canvas:#fff;--_selaras-default-surface-default:--theme(--color-selaras-gray-25);--_selaras-default-surface-elevated:--theme(--color-selaras-gray-50);--_selaras-default-surface-inverted:--theme(--color-selaras-gray-950);--_selaras-default-text-default:--theme(--color-selaras-gray-950);--_selaras-default-text-muted:--theme(--color-selaras-gray-600);--_selaras-default-text-inverted:--theme(--color-selaras-gray-50);--_selaras-default-border-default:--theme(--color-selaras-gray-200);--_selaras-default-border-muted:--theme(--color-selaras-gray-100);--_selaras-default-border-hover:--theme(--color-selaras-gray-300)}: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-default-surface-canvas:#0c0c0d;--_selaras-default-surface-default:--theme(--color-selaras-gray-950);--_selaras-default-surface-elevated:--theme(--color-selaras-gray-900);--_selaras-default-surface-inverted:--theme(--color-selaras-gray-50);--_selaras-default-text-default:--theme(--color-selaras-gray-50);--_selaras-default-text-muted:--theme(--color-selaras-gray-400);--_selaras-default-text-inverted:--theme(--color-selaras-gray-950);--_selaras-default-border-default:--theme(--color-selaras-gray-800);--_selaras-default-border-muted:--theme(--color-selaras-gray-900);--_selaras-default-border-hover:--theme(--color-selaras-gray-700)}}

package/dist/runtime/directives/hotkey.d.ts

@@ -0,0 +1,13 @@
+import type { Directive } from 'vue';
+export interface HotkeyOptions<T extends HTMLElement = HTMLElement> {
+    /** A key chord such as `mod+k`, `ctrl+shift+p`, or `escape`. */
+    keys: string;
+    /** Runs instead of clicking the bound element. */
+    handler?: (event: KeyboardEvent) => void;
+    /** Gate activation on current application state. */
+    when?: boolean | ((element: T, event: KeyboardEvent) => boolean);
+    /** Allow shortcuts while focus is in an editable control. Defaults to false. */
+    allowInEditable?: boolean;
+}
+export type HotkeyValue<T extends HTMLElement = HTMLElement> = string | HotkeyOptions<T> | false | null | undefined;
+export declare const vHotkey: Directive<HTMLElement, HotkeyValue>;

package/dist/runtime/directives/hotkey.js

@@ -0,0 +1,107 @@
+const aliases = {
+  esc: "escape",
+  return: "enter",
+  spacebar: " ",
+  space: " ",
+  up: "arrowup",
+  down: "arrowdown",
+  left: "arrowleft",
+  right: "arrowright",
+  del: "delete",
+  ctrl: "control",
+  cmd: "meta",
+  command: "meta",
+  option: "alt"
+};
+function isMacPlatform() {
+  if (typeof navigator === "undefined")
+    return false;
+  const platform = navigator.platform ?? "";
+  return /mac|iphone|ipad|ipod/i.test(platform);
+}
+function canonicalKey(key) {
+  const normalized = key.trim().toLowerCase();
+  return aliases[normalized] ?? normalized;
+}
+function parseHotkey(keys) {
+  const parts = keys.split("+").map(canonicalKey).filter(Boolean);
+  const key = parts.find((part) => !["control", "meta", "alt", "shift", "mod"].includes(part));
+  if (!key)
+    return void 0;
+  const hasMod = parts.includes("mod");
+  const mac = isMacPlatform();
+  return {
+    key,
+    ctrl: parts.includes("control") || hasMod && !mac,
+    meta: parts.includes("meta") || hasMod && mac,
+    alt: parts.includes("alt"),
+    shift: parts.includes("shift"),
+    focusScoped: key.length === 1 && !parts.some((part) => ["control", "meta", "alt", "shift", "mod"].includes(part))
+  };
+}
+function isEditable(target) {
+  if (!(target instanceof Element))
+    return false;
+  return Boolean(target.closest('input, textarea, select, [contenteditable]:not([contenteditable="false"])'));
+}
+function physicalKey(code) {
+  return /^Key([A-Z])$/.exec(code)?.[1]?.toLowerCase() ?? /^Digit(\d)$/.exec(code)?.[1];
+}
+function matches(event, hotkey) {
+  const keyMatches = canonicalKey(event.key) === hotkey.key || event.altKey && physicalKey(event.code) === hotkey.key;
+  const symbol = hotkey.key.length === 1 && hotkey.key !== " " && !/[a-z0-9]/.test(hotkey.key);
+  return keyMatches && event.ctrlKey === hotkey.ctrl && event.metaKey === hotkey.meta && event.altKey === hotkey.alt && (symbol && !hotkey.shift ? true : event.shiftKey === hotkey.shift);
+}
+function normalizeBinding(value) {
+  if (value === false || value == null)
+    return void 0;
+  return typeof value === "string" ? { keys: value } : value;
+}
+function install(element, value) {
+  const options = normalizeBinding(value);
+  const parsed = options && parseHotkey(options.keys);
+  if (!options || !parsed)
+    return void 0;
+  const listener = (event) => {
+    if (event.defaultPrevented || !matches(event, parsed))
+      return;
+    if (typeof options.when === "boolean" && !options.when)
+      return;
+    if (typeof options.when === "function" && !options.when(element, event))
+      return;
+    const activeElement = element.ownerDocument.activeElement;
+    const eventTarget = event.target;
+    if (parsed.focusScoped && !element.contains(activeElement) && !(eventTarget && (eventTarget === element || element.contains(eventTarget)))) {
+      return;
+    }
+    if (!options.allowInEditable && isEditable(event.target))
+      return;
+    event.preventDefault();
+    if (options.handler)
+      options.handler(event);
+    else
+      element.click();
+  };
+  document.addEventListener("keydown", listener);
+  return () => document.removeEventListener("keydown", listener);
+}
+export const vHotkey = {
+  mounted(element, binding) {
+    const cleanup = install(element, binding.value);
+    if (cleanup)
+      element.__selarasHotkeyCleanup = cleanup;
+  },
+  updated(element, binding) {
+    const host = element;
+    host.__selarasHotkeyCleanup?.();
+    delete host.__selarasHotkeyCleanup;
+    const cleanup = install(element, binding.value);
+    if (cleanup)
+      host.__selarasHotkeyCleanup = cleanup;
+  },
+  unmounted(element) {
+    const host = element;
+    host.__selarasHotkeyCleanup?.();
+    delete host.__selarasHotkeyCleanup;
+  }
+};

package/dist/runtime/directives/index.d.ts

@@ -1 +1,3 @@
+export * from './hotkey.js';
+export * from './mask.js';
 export * from './ripple.js';

package/dist/runtime/directives/index.js

@@ -1 +1,3 @@
+export * from "./hotkey.js";
+export * from "./mask.js";
 export * from "./ripple.js";

package/dist/runtime/directives/mask.d.ts

@@ -0,0 +1,30 @@
+import type { Directive } from 'vue';
+/** A mask placeholder character and the input characters it accepts. */
+export interface MaskToken {
+    pattern: RegExp;
+    /** Rewrites an accepted character, e.g. to uppercase it. */
+    transform?: (char: string) => string;
+}
+/** Values reported by `v-mask` after each mask update. */
+export interface MaskDetail {
+    /** The value without mask literals. This is also the value `v-model` receives. */
+    value: string;
+    /** The formatted value shown in the input. */
+    maskedValue: string;
+    /** Whether every placeholder in the mask has been filled. */
+    completed: boolean;
+}
+export interface MaskOptions {
+    mask: string;
+    /** Extra or overriding placeholder tokens, merged over the defaults (`#`, `@`, `*`). */
+    tokens?: Record<string, MaskToken>;
+    onMask?: (detail: MaskDetail) => void;
+}
+/** A mask pattern string, or options for custom tokens and the `onMask` callback. */
+export type MaskValue = string | MaskOptions | null | undefined;
+/**
+ * Formats a native input or the input inside a single-input component.
+ * `v-model` receives the raw value; the field shows the formatted one. Use
+ * `onMask` (or the bubbling `mask` event) to also read the formatted value.
+ */
+export declare const vMask: Directive<HTMLElement, MaskValue>;