@sewadah/selaras 0.2.0 → 0.3.1

package/dist/runtime/utils/messages.js

@@ -11,11 +11,14 @@ export const defaultMessages = {
   searchDescription: "Type to filter, then use arrow keys and enter to select",
   columns: "Columns",
   filterPlaceholder: "Filter...",
+  filterColumn: (column) => `Filter ${column}`,
   previous: "Previous",
   next: "Next",
   first: "First",
   last: "Last",
   pagination: "Pagination",
+  scrollTabsLeft: "Scroll tabs left",
+  scrollTabsRight: "Scroll tabs right",
   datePicker: "Date picker",
   datePickerDescription: "Use arrow keys to navigate days, enter to select",
   dateRangePicker: "Date range picker",
@@ -39,6 +42,7 @@ export const defaultMessages = {
   decrement: "Decrement",
   noOptions: "No options",
   noResultsFound: "No results found",
+  createOption: (value) => `Create "${value}"`,
   noData: "No data",
   expandRow: "Expand row",
   collapseRow: "Collapse row",
@@ -61,6 +65,8 @@ export const defaultMessages = {
   showHiddenBreadcrumbItems: "Show hidden breadcrumb items",
   commandPalette: "Command palette",
   commandPaletteDescription: "Search for a command and press enter",
+  dropdownMenu: "Actions",
+  dropdownMenuDescription: "Choose an action",
   navigate: "Navigate",
   select: "Select",
   onThisPage: "On this page",

package/dist/runtime/utils/navigation-menu.d.ts

@@ -1,13 +1,21 @@
+import type { HotkeyOptions } from '../directives/hotkey.js';
 export interface NavigationMenuItem {
     label: string;
     icon?: string;
     to?: string;
+    target?: string;
+    rel?: string;
+    ariaLabel?: string;
     disabled?: boolean;
     /** Force active state - otherwise auto-detected against the current route when `to` is set. */
     active?: boolean;
     /** One level for horizontal (Reka's own real limit for its shared-viewport flyout); arbitrary depth for vertical, which falls back to a recursive accordion instead. */
     children?: NavigationMenuItem[];
     onSelect?: (event: Event) => void;
+    /** Display a keyboard shortcut hint beside this item's label. */
+    shortcut?: string;
+    /** Bind `shortcut` page-wide, so the key activates this item from anywhere except while typing in a field. */
+    hotkey?: boolean;
     /** Targets this item's own named slots (`#{slot}`, `#{slot}-leading`, `#{slot}-label`, `#{slot}-trailing`, `#{slot}-content`) ahead of the generic `#item`/`#item-leading`/etc, when the named one is actually provided. */
     slot?: string;
     /**
@@ -30,3 +38,5 @@ export interface NavigationMenuItem {
     description?: string;
 }
 export declare function isNavigationMenuItemActive(item: NavigationMenuItem, currentPath: string): boolean;
+/** The v-hotkey binding for an item that opts in with `hotkey: true`. */
+export declare function navigationMenuHotkey(item: NavigationMenuItem): HotkeyOptions | undefined;

package/dist/runtime/utils/navigation-menu.js

@@ -3,3 +3,6 @@ export function isNavigationMenuItemActive(item, currentPath) {
     return item.active;
   return item.to !== void 0 && item.to === currentPath;
 }
+export function navigationMenuHotkey(item) {
+  return item.hotkey && item.shortcut && !item.disabled ? { keys: item.shortcut } : void 0;
+}

package/dist/runtime/utils/overlay.d.ts

@@ -0,0 +1,17 @@
+import type { ContextMenuContentProps, PopoverContentProps } from 'reka-ui';
+/** Positioning options shared by Selaras's anchored panels. Visual styling stays in `ui.content`. */
+export type OverlayPositioning = Pick<PopoverContentProps, 'side' | 'sideOffset' | 'align' | 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'arrowPadding' | 'sticky' | 'hideWhenDetached' | 'positionStrategy'>;
+/** A context menu is anchored to the pointer, so it does not accept side or alignment. */
+export type ContextMenuPositioning = Pick<ContextMenuContentProps, 'alignOffset' | 'avoidCollisions' | 'collisionBoundary' | 'collisionPadding' | 'sticky' | 'hideWhenDetached' | 'positionStrategy'>;
+/** `false` renders inline; a selector or element chooses a teleport target. */
+export type OverlayPortal = boolean | string | HTMLElement;
+export declare function overlayPortalProps(portal: OverlayPortal | undefined): {
+    disabled: boolean;
+    to?: undefined;
+} | {
+    to: string | HTMLElement;
+    disabled?: undefined;
+} | {
+    disabled?: undefined;
+    to?: undefined;
+};

package/dist/runtime/utils/overlay.js

@@ -0,0 +1,7 @@
+export function overlayPortalProps(portal) {
+  if (portal === false)
+    return { disabled: true };
+  if (typeof portal === "string" || typeof HTMLElement !== "undefined" && portal instanceof HTMLElement)
+    return { to: portal };
+  return {};
+}

package/dist/runtime/utils/seed-colors.d.ts

@@ -8,7 +8,8 @@ export interface SeedColorOptions {
     surfaces?: SeedColorSurfaces;
 }
 /**
- * Derives a complete, opaque two-mode web ColorRecipe from one opaque sRGB seed.
+ * Preserves one opaque sRGB seed as the resting fill and derives a complete,
+ * opaque two-mode web ColorRecipe around it.
  * Custom or unresolved surfaces require explicit recipes instead.
  */
 export declare function defineColorFromSeed(seed: string, options?: SeedColorOptions): ColorModePair<ColorRecipe>;

package/dist/runtime/utils/seed-colors.js

@@ -150,30 +150,38 @@ function requireSeries(mode, family, create) {
     invalid(`cannot derive the ${mode} ${family} family while preserving its contrast targets; provide an explicit defineColor() recipe.`);
   }
 }
+function deriveFillStates(seed, foreground, mode) {
+  const preferredTarget = mode === "light" ? black : white;
+  const alternateTarget = preferredTarget === black ? white : black;
+  for (const target of [preferredTarget, alternateTarget]) {
+    for (const scale of [1, 0.75, 0.5, 0.25, 0.125, 0.0625, 0.03125]) {
+      const hover = quantize(mixLab(seed, target, 0.06 * scale));
+      const pressed = quantize(mixLab(seed, target, 0.12 * scale));
+      const colors = [seed, hover, pressed];
+      if (new Set(colors.map(toHex)).size === colors.length && colors.every((color) => contrast(color, foreground) >= textMinimum))
+        return [hover, pressed];
+    }
+  }
+  invalid(`cannot derive distinct ${mode} fill states while preserving readable content; provide an explicit defineColor() recipe.`);
+}
 function deriveMode(seed, surface, mode) {
   const direction = contrast(white, surface) > contrast(black, surface) ? 1 : -1;
-  const fillCandidates = [black, white].flatMap((foreground) => {
-    try {
-      const series = findStateSeries(seed, direction, 0.045, 3, (color) => contrast(color, surface) >= nonTextGuard && contrast(color, foreground) >= textGuard);
-      return [{ ...series, foreground }];
-    } catch {
-      return [];
-    }
-  }).sort((left, right) => left.cost + Number(left.collapsed) * 0.02 - (right.cost + Number(right.collapsed) * 0.02));
-  const fill = fillCandidates[0];
-  if (!fill)
-    invalid(`cannot derive the ${mode} fill family while preserving its contrast targets; provide an explicit defineColor() recipe.`);
-  const fillColor = fill.colors[0];
+  const foreground = contrast(seed, black) >= contrast(seed, white) ? black : white;
+  if (contrast(seed, foreground) < textMinimum)
+    invalid(`cannot preserve the ${mode} fill while deriving readable content; provide an explicit defineColor() recipe.`);
+  const [fillHover, fillPressed] = deriveFillStates(seed, foreground, mode);
+  const fillColor = seed;
   const subtle = quantize(mixLab(surface, fillColor, 0.1));
   const subtleHover = quantize(mixLab(surface, fillColor, 0.14));
   const subtlePressed = quantize(mixLab(surface, fillColor, 0.18));
   const text = requireSeries(mode, "text/subtle", () => findStateSeries(seed, direction, 0.03, 3, (color) => [surface, subtle, subtleHover, subtlePressed].every((background) => contrast(color, background) >= textGuard))).colors;
   const border = requireSeries(mode, "border", () => findStateSeries(seed, direction, 0.02, 1, (color) => contrast(color, surface) >= nonTextGuard)).colors[0];
   return {
-    fill: toHex(fill.colors[0]),
-    fillHover: toHex(fill.colors[1]),
-    fillPressed: toHex(fill.colors[2]),
-    onFill: toHex(fill.foreground),
+    fill: toHex(fillColor),
+    fillHover: toHex(fillHover),
+    fillPressed: toHex(fillPressed),
+    onFill: toHex(foreground),
+    indicator: toHex(border),
     subtle: toHex(subtle),
     subtleHover: toHex(subtleHover),
     subtlePressed: toHex(subtlePressed),

package/dist/runtime/utils/select-contracts.d.ts

@@ -1,6 +1,8 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { selectTheme, SelectThemeSlots } from '../theme/select.js';
+import type { RoundedArrowConfig } from './arrow.js';
 import type { ColorRole } from './color-registry.js';
+import type { OverlayPortal, OverlayPositioning } from './overlay.js';
 import type { UiProp } from './ui.js';
 export type SelectValue = string | number;
 export interface SelectGroup<Item extends object> {
@@ -62,7 +64,11 @@ export interface SelectProps<Entry extends object = {
     searchTerm?: string;
     resetSearchTermOnBlur?: boolean;
     resetSearchTermOnSelect?: boolean;
-    arrow?: boolean;
+    arrow?: boolean | RoundedArrowConfig;
+    /** Positioning of the anchored list (the adaptive Select modal uses its own layout). */
+    positioning?: OverlayPositioning;
+    /** Teleport target for the anchored list, or `false` to render it inline. */
+    portal?: OverlayPortal;
     /**
      * Opts into the control's accessible small-screen presentation. Select uses
      * a centered modal; Autocomplete keeps its editable combobox in a wider

package/dist/runtime/utils/table-columns.js

@@ -54,7 +54,7 @@ export function convertChildrenToColumns(vnodes) {
         accessorKey: props.field,
         header: buildHeaderOrFooter(slots.header, props.header ?? props.field),
         footer: buildHeaderOrFooter(slots.footer, props.footer),
-        enableSorting: toBooleanProp(props.sortable, true),
+        enableSorting: toBooleanProp(props.sortable, false),
         sortFn: "alphanumeric",
         enableColumnFilter: toBooleanProp(props.filterable, false),
         filterFn: "includesString",

package/dist/runtime/utils/table-contracts.d.ts

@@ -1,5 +1,5 @@
 import type { RowData } from '@tanstack/vue-table';
-import type { TableColumnDef, TableColumnVisibilityState, TableExpandedState, TableGetRowId, TableRowSelectionState, TableSortingState } from '../composables/use-table.js';
+import type { TableColumnDef, TableColumnVisibilityState, TableExpandedState, TableGetRowId, TableGetSubRows, TableRowSelectionState, TableSortingState } from '../composables/use-table.js';
 import type { TableThemeSlots } from '../theme/table.js';
 import type { ColorRole } from './color-registry.js';
 import type { UiProp } from './ui.js';
@@ -7,6 +7,10 @@ export interface TableProps<TData extends RowData = RowData> {
     data: TData[];
     columns?: TableColumnDef<TData>[];
     selectable?: boolean;
+    /** Highlights body rows on hover. @default false */
+    rowHover?: boolean;
+    /** Toggles selection when a selectable body row is clicked. Interactive controls inside cells are ignored. @default false */
+    selectOnRowClick?: boolean;
     pageSize?: number;
     loading?: boolean;
     sorting?: TableSortingState;
@@ -20,6 +24,10 @@ export interface TableProps<TData extends RowData = RowData> {
     gridlines?: boolean;
     striped?: boolean;
     expandable?: boolean;
+    /** Displays hierarchical rows from `subRows` by default. Set `getSubRows` to read children from another field. @default false */
+    tree?: boolean;
+    /** Returns a row's child rows when `tree` is enabled. Defaults to `row.subRows`. */
+    getSubRows?: TableGetSubRows<TData>;
     expanded?: TableExpandedState;
     columnVisibility?: TableColumnVisibilityState;
     columnToggle?: boolean;

package/dist/runtime/utils/timeline-contracts.d.ts

@@ -0,0 +1,42 @@
+import type { TimelineThemeSlots } from '../theme/timeline.js';
+import type { ColorRole } from './color-registry.js';
+import type { UiProp } from './ui.js';
+export interface TimelineItem {
+    id?: string | number;
+    class?: string;
+    date?: string;
+    /** ISO-8601 value for the semantic `<time datetime>` attribute. */
+    datetime?: string;
+    title?: string;
+    description?: string;
+    icon?: string;
+    color?: ColorRole;
+    /** Selects a named slot for this item, replacing its default content. */
+    slot?: string;
+    /** Per-item styling overrides, resolved against the component's theme. */
+    ui?: UiProp<TimelineThemeSlots>;
+    /** Additional application data is passed unchanged to scoped slots. */
+    [key: string]: unknown;
+}
+export interface TimelineProps<TItem extends TimelineItem = TimelineItem> {
+    items: TItem[];
+    orientation?: 'vertical' | 'horizontal';
+    align?: 'start' | 'end' | 'alternate';
+    size?: 'sm' | 'md' | 'lg';
+    color?: ColorRole;
+    ui?: UiProp<TimelineThemeSlots>;
+}
+export interface TimelineSlotProps<TItem extends TimelineItem = TimelineItem> {
+    item: TItem;
+    index: number;
+}
+export interface TimelineSlots<TItem extends TimelineItem = TimelineItem> {
+    marker?: (props: TimelineSlotProps<TItem>) => any;
+    connector?: (props: TimelineSlotProps<TItem>) => any;
+    date?: (props: TimelineSlotProps<TItem>) => any;
+    title?: (props: TimelineSlotProps<TItem>) => any;
+    description?: (props: TimelineSlotProps<TItem>) => any;
+    content?: (props: TimelineSlotProps<TItem>) => any;
+    item?: (props: TimelineSlotProps<TItem>) => any;
+    [name: string]: ((props: TimelineSlotProps<TItem>) => any) | undefined;
+}