@sewadah/selaras 0.2.0 → 0.3.1

package/dist/runtime/theme/separator.js

@@ -10,7 +10,7 @@ export const separatorTheme = tv({
     // plain bar; with a label, a second one of these renders after it
     // (see Separator.vue), splitting the available space evenly on both
     // sides of the text.
-    line: "shrink-0 border-[var(--_selaras-color-fill)]",
+    line: "shrink-0 border-[var(--_selaras-color-indicator)]",
     // Always muted, independent of `color` - a colored line with
     // matching bright label text reads as garish rather than
     // informative; the label stays legible/neutral regardless of how

package/dist/runtime/theme/slideover.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const slideoverTheme = 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",
     header: "flex items-start justify-between gap-4 p-4 sm:px-6",
     title: "text-base font-semibold text-[var(--selaras-resolved-text-default)]",

package/dist/runtime/theme/slider.js

@@ -10,8 +10,8 @@ export const sliderTheme = tv({
     // positioned element with no top/bottom of its own collapses to 0
     // height. inset-y-0/inset-x-0 below (in the orientation variant)
     // supply that missing cross-axis size.
-    range: "absolute rounded-full bg-[var(--_selaras-color-fill)]",
-    thumb: "block shrink-0 rounded-full bg-[var(--selaras-resolved-surface-default)] shadow-[var(--selaras-resolved-shadow-sm)] ring-2 ring-[var(--_selaras-color-fill)] transition-shadow focus-visible:outline-none focus-visible:ring-4",
+    range: "absolute rounded-full bg-[var(--_selaras-color-indicator)]",
+    thumb: "block shrink-0 rounded-full bg-[var(--selaras-resolved-surface-default)] shadow-[var(--selaras-resolved-shadow-sm)] ring-2 ring-[var(--_selaras-color-indicator)] transition-shadow focus-visible:outline-none focus-visible:ring-4",
     // Own addition - Reka's Slider has no tick/mark concept of its own.
     // Positioned via an inline style (percent along the track), not a
     // variant - see Slider.vue's own `ticks` computed.

package/dist/runtime/theme/splitter-resize-handle.js

@@ -4,7 +4,7 @@ export const splitterResizeHandleTheme = tv({
     // A slim hit area with a thinner visible line inside it - the visible
     // line alone would be too narrow a target to reliably grab.
     root: "group relative shrink-0 bg-transparent outline-none",
-    line: "absolute bg-[var(--selaras-resolved-border-default)] transition-colors group-hover:bg-[var(--_selaras-color-fill)] group-data-[state=drag]:bg-[var(--_selaras-color-fill)]"
+    line: "absolute bg-[var(--selaras-resolved-border-default)] transition-colors group-hover:bg-[var(--_selaras-color-indicator)] group-data-[state=drag]:bg-[var(--_selaras-color-indicator)]"
   },
   variants: {
     color: {

package/dist/runtime/theme/switch.js

@@ -74,7 +74,7 @@ export const switchTheme = tv({
       // its own to recolor (unlike Radio/Checkbox's ring-inset), but an
       // offset outline left a visible gap between it and the pill, unlike
       // every other invalid state in this library, which sits flush.
-      true: { track: "ring-2 ring-[var(--_selaras-color-fill)]", thumb: "data-[state=checked]:before:bg-[var(--_selaras-color-fill-hover)]" }
+      true: { track: "ring-2 ring-[var(--_selaras-color-border)]", thumb: "data-[state=checked]:before:bg-[var(--_selaras-color-fill-hover)]" }
     }
   },
   defaultVariants: {

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

@@ -34,6 +34,11 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
             table: string;
         };
     };
+    rowHover: {
+        true: {
+            table: string;
+        };
+    };
     scrollable: {
         true: {
             wrapper: string;
@@ -52,6 +57,9 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
     td: string;
     tfoot: string;
     emptyState: string;
+    filterButton: string;
+    filterIcon: string;
+    filterPopover: string;
     filterInput: string;
     paginationWrapper: string;
     paginationInfo: string;
@@ -60,6 +68,7 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
     loadingIcon: string;
     expandButton: string;
     expandChevron: string;
+    treeCell: string;
     expandedRow: string;
     expandedCell: string;
     columnToggle: string;
@@ -101,6 +110,11 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
             table: string;
         };
     };
+    rowHover: {
+        true: {
+            table: string;
+        };
+    };
     scrollable: {
         true: {
             wrapper: string;
@@ -119,6 +133,9 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
     td: string;
     tfoot: string;
     emptyState: string;
+    filterButton: string;
+    filterIcon: string;
+    filterPopover: string;
     filterInput: string;
     paginationWrapper: string;
     paginationInfo: string;
@@ -127,6 +144,7 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
     loadingIcon: string;
     expandButton: string;
     expandChevron: string;
+    treeCell: string;
     expandedRow: string;
     expandedCell: string;
     columnToggle: string;
@@ -168,6 +186,11 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
             table: string;
         };
     };
+    rowHover: {
+        true: {
+            table: string;
+        };
+    };
     scrollable: {
         true: {
             wrapper: string;
@@ -186,6 +209,9 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
     td: string;
     tfoot: string;
     emptyState: string;
+    filterButton: string;
+    filterIcon: string;
+    filterPopover: string;
     filterInput: string;
     paginationWrapper: string;
     paginationInfo: string;
@@ -194,6 +220,7 @@ export declare const tableTheme: import("tailwind-variants").TVReturnType<{
     loadingIcon: string;
     expandButton: string;
     expandChevron: string;
+    treeCell: string;
     expandedRow: string;
     expandedCell: string;
     columnToggle: string;

package/dist/runtime/theme/table.js

@@ -8,11 +8,14 @@ export const tableTheme = tv({
     tr: "border-b border-[var(--selaras-resolved-border-default)] last:border-b-0",
     th: "text-start font-medium text-[var(--selaras-resolved-text-muted)] whitespace-nowrap data-[pinned]:sticky data-[pinned]:z-[1] data-[pinned]:bg-[var(--selaras-resolved-surface-elevated)]",
     thSortable: "cursor-pointer select-none hover:text-[var(--selaras-resolved-text-default)] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--_selaras-color-focus)]",
-    sortIcon: "ms-1 inline-block size-3.5 align-text-bottom text-[var(--selaras-resolved-text-muted)]",
+    sortIcon: "ms-1 inline-block size-3.5 align-text-bottom text-[var(--selaras-resolved-text-muted)] data-[sort-state=none]:opacity-50",
     td: "text-[var(--selaras-resolved-text-default)] data-[pinned]:sticky data-[pinned]:z-[1] data-[pinned]:bg-[var(--selaras-resolved-surface-default)]",
     tfoot: "bg-[var(--selaras-resolved-surface-elevated)] font-medium",
     emptyState: "px-3 py-8 text-center text-sm text-[var(--selaras-resolved-text-muted)]",
-    filterInput: "mt-1",
+    filterButton: "shrink-0",
+    filterIcon: "size-4",
+    filterPopover: "w-64 p-3",
+    filterInput: "",
     paginationWrapper: "flex items-center justify-between gap-3 px-3 py-2",
     paginationInfo: "text-sm text-[var(--selaras-resolved-text-muted)]",
     paginationButtons: "flex items-center gap-2",
@@ -27,6 +30,7 @@ export const tableTheme = tv({
     // for the one case where both conditions hold at once, rather than
     // leaving the outcome to rely on Tailwind's variant cascade order.
     expandChevron: "size-4 transition-transform rtl:rotate-180 data-[expanded]:rotate-90 rtl:data-[expanded]:rotate-90",
+    treeCell: "flex items-center gap-1",
     expandedRow: "border-b border-[var(--selaras-resolved-border-default)] last:border-b-0",
     expandedCell: "bg-[var(--selaras-resolved-surface-elevated)] px-3 py-3 text-[var(--selaras-resolved-text-default)]",
     columnToggle: "relative",
@@ -58,6 +62,11 @@ export const tableTheme = tv({
     striped: {
       true: { table: "[&>tbody>tr:nth-child(even)]:bg-[var(--selaras-resolved-surface-elevated)]" }
     },
+    rowHover: {
+      // Body rows only, like `striped` - header and footer rows share the `tr`
+      // slot but aren't selectable. Cells repaint too, for pinned columns.
+      true: { table: "[&>tbody>tr]:transition-colors [&>tbody>tr:hover]:bg-[var(--selaras-resolved-surface-elevated)] [&>tbody>tr:hover>td]:bg-[var(--selaras-resolved-surface-elevated)]" }
+    },
     scrollable: {
       true: { wrapper: "overflow-y-auto", thead: "sticky top-0 z-[1]" }
     }

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

@@ -1,7 +1,7 @@
 export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
     variant: {
         underline: {
-            list: string;
+            trigger: string;
             indicator: string;
         };
         pill: {
@@ -10,6 +10,18 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
             indicator: string;
         };
     };
+    orientation: {
+        horizontal: {
+            indicator: string;
+        };
+        vertical: {
+            root: string;
+            list: string;
+            trigger: string;
+            indicator: string;
+            content: string;
+        };
+    };
     color: {
         primary: "";
         neutral: "";
@@ -19,8 +31,24 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
         info: "";
         warning: "";
     };
+    scrollable: {
+        false: {
+            scrollRoot: string;
+            scrollViewport: string;
+        };
+        true: {
+            scrollRoot: string;
+            scrollViewport: string;
+            list: string;
+            trigger: string;
+        };
+    };
 }, {
     root: string;
+    scrollRoot: string;
+    scrollViewport: string;
+    scrollButton: string;
+    scrollIcon: string;
     list: string;
     trigger: string;
     icon: string;
@@ -29,7 +57,7 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     variant: {
         underline: {
-            list: string;
+            trigger: string;
             indicator: string;
         };
         pill: {
@@ -38,6 +66,18 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
             indicator: string;
         };
     };
+    orientation: {
+        horizontal: {
+            indicator: string;
+        };
+        vertical: {
+            root: string;
+            list: string;
+            trigger: string;
+            indicator: string;
+            content: string;
+        };
+    };
     color: {
         primary: "";
         neutral: "";
@@ -47,8 +87,24 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
         info: "";
         warning: "";
     };
+    scrollable: {
+        false: {
+            scrollRoot: string;
+            scrollViewport: string;
+        };
+        true: {
+            scrollRoot: string;
+            scrollViewport: string;
+            list: string;
+            trigger: string;
+        };
+    };
 }, {
     root: string;
+    scrollRoot: string;
+    scrollViewport: string;
+    scrollButton: string;
+    scrollIcon: string;
     list: string;
     trigger: string;
     icon: string;
@@ -57,7 +113,7 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
 }, import("tailwind-variants").TVReturnTypeLike<{
     variant: {
         underline: {
-            list: string;
+            trigger: string;
             indicator: string;
         };
         pill: {
@@ -66,6 +122,18 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
             indicator: string;
         };
     };
+    orientation: {
+        horizontal: {
+            indicator: string;
+        };
+        vertical: {
+            root: string;
+            list: string;
+            trigger: string;
+            indicator: string;
+            content: string;
+        };
+    };
     color: {
         primary: "";
         neutral: "";
@@ -75,8 +143,24 @@ export declare const tabsTheme: import("tailwind-variants").TVReturnType<{
         info: "";
         warning: "";
     };
+    scrollable: {
+        false: {
+            scrollRoot: string;
+            scrollViewport: string;
+        };
+        true: {
+            scrollRoot: string;
+            scrollViewport: string;
+            list: string;
+            trigger: string;
+        };
+    };
 }, {
     root: string;
+    scrollRoot: string;
+    scrollViewport: string;
+    scrollButton: string;
+    scrollIcon: string;
     list: string;
     trigger: string;
     icon: string;

package/dist/runtime/theme/tabs.js

@@ -2,39 +2,46 @@ import { tv } from "tailwind-variants";
 export const tabsTheme = tv({
   slots: {
     root: "w-full",
-    // relative - the positioned ancestor both the triggers' own offsetLeft
-    // and the sliding indicator's absolute positioning resolve against.
+    scrollRoot: "",
+    scrollViewport: "",
+    // Button supplies the neutral ghost styling and sm icon size. These slots
+    // let Tabs authors adjust either control without duplicating Button CSS.
+    scrollButton: "",
+    scrollIcon: "",
+    // Relative positioning anchors Reka's measured indicator in either axis.
     list: "relative flex items-center border-b border-[var(--selaras-resolved-border-default)]",
     // z-10 unconditionally (not just for `pill`) - harmless for `underline`
     // (its indicator never overlaps the trigger's own text anyway) and
     // keeps this one class instead of a compound variant.
-    trigger: "relative z-10 inline-flex items-center gap-1.5 px-1 py-2 text-sm font-medium text-[var(--selaras-resolved-text-muted)] transition-colors hover:text-[var(--selaras-resolved-text-default)] disabled:opacity-50 disabled:pointer-events-none data-[state=active]:text-[var(--_selaras-color-text)]",
+    trigger: "relative z-10 inline-flex items-center gap-1.5 px-1 py-2 text-sm font-medium text-[var(--selaras-resolved-text-muted)] transition-colors hover:text-[var(--selaras-resolved-text-default)] disabled:opacity-50 disabled:pointer-events-none",
     icon: "size-4 shrink-0",
-    // Positioned via Reka's own TabsIndicator - it measures the active
-    // trigger's offsetLeft/offsetWidth itself (ResizeObserver-driven, and
-    // re-runs on every active-tab change whether Tabs is controlled or
-    // uncontrolled) and exposes the result as these two CSS custom
-    // properties, the same `var(...)` arbitrary-value pattern
-    // theme/select.ts's own `content` slot already uses for
-    // --reka-combobox-trigger-width. The transition is the only thing
-    // actually driving the slide - JS never animates it directly.
-    // `translate-x-*` compiles to the standalone CSS `translate` property
-    // (not `transform`) in this version of Tailwind, so the transition
-    // list has to say `translate`, not `transform` - watching the wrong
-    // property meant this never animated at all, just snapped instantly.
-    indicator: "absolute translate-x-[var(--reka-tabs-indicator-position)] w-[var(--reka-tabs-indicator-size)] transition-[translate,width] duration-200 ease-out",
+    // Reka measures width/left horizontally and height/top vertically.
+    // Tailwind's translate utilities use the CSS `translate` property.
+    indicator: "absolute transition-[translate,width,height] duration-200 ease-out",
     content: "pt-4 focus-visible:outline-none data-[state=active]:animate-in data-[state=active]:fade-in-0"
   },
   variants: {
     variant: {
       underline: {
-        list: "gap-4",
-        indicator: "inset-x-0 bottom-0 h-0.5 rounded-full bg-[var(--_selaras-color-fill)]"
+        trigger: "data-[state=active]:text-[var(--_selaras-color-text)]",
+        indicator: "rounded-full bg-[var(--_selaras-color-fill)]"
       },
       pill: {
-        list: "gap-1 rounded-[var(--selaras-resolved-radius-md)] border-0 bg-[var(--selaras-resolved-surface-elevated)] p-1",
-        trigger: "rounded-[var(--selaras-resolved-radius-sm)] px-3",
-        indicator: "inset-y-1 rounded-[var(--selaras-resolved-radius-sm)] bg-[var(--selaras-resolved-surface-default)] shadow-[var(--selaras-resolved-shadow-sm)]"
+        list: "gap-1 rounded-[var(--selaras-resolved-radius-md)] border-0 bg-[color-mix(in_oklab,var(--selaras-resolved-surface-elevated)_96%,var(--selaras-resolved-surface-inverted))] p-1",
+        trigger: "justify-center text-center rounded-[var(--selaras-resolved-radius-sm)] px-3 data-[state=active]:text-[var(--_selaras-color-on-fill)]",
+        indicator: "rounded-[var(--selaras-resolved-radius-sm)] bg-[var(--_selaras-color-fill)] shadow-[var(--selaras-resolved-shadow-sm)]"
+      }
+    },
+    orientation: {
+      horizontal: {
+        indicator: "left-0 w-[var(--reka-tabs-indicator-size)] translate-x-[var(--reka-tabs-indicator-position)]"
+      },
+      vertical: {
+        root: "flex items-start gap-4",
+        list: "shrink-0 flex-col items-stretch border-b-0 border-e",
+        trigger: "w-full justify-start text-start px-3",
+        indicator: "top-0 h-[var(--reka-tabs-indicator-size)] translate-y-[var(--reka-tabs-indicator-position)]",
+        content: "min-w-0 flex-1 pt-0"
       }
     },
     color: {
@@ -45,10 +52,27 @@ export const tabsTheme = tv({
       danger: "",
       info: "",
       warning: ""
+    },
+    scrollable: {
+      false: { scrollRoot: "contents", scrollViewport: "contents" },
+      true: {
+        scrollRoot: "flex w-full min-w-0 items-center gap-1",
+        scrollViewport: "min-w-0 flex-1 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+        list: "w-max min-w-full flex-nowrap",
+        trigger: "shrink-0 whitespace-nowrap"
+      }
     }
   },
+  compoundVariants: [
+    { variant: "underline", orientation: "horizontal", class: { list: "gap-4", indicator: "bottom-0 h-0.5" } },
+    { variant: "underline", orientation: "vertical", class: { list: "gap-1", indicator: "end-0 w-0.5" } },
+    { variant: "pill", orientation: "horizontal", class: { indicator: "inset-y-1" } },
+    { variant: "pill", orientation: "vertical", class: { list: "border-0", indicator: "inset-x-1" } }
+  ],
   defaultVariants: {
     variant: "underline",
-    color: "primary"
+    orientation: "horizontal",
+    color: "primary",
+    scrollable: false
   }
 });

package/dist/runtime/theme/textarea.js

@@ -46,7 +46,7 @@ export const textareaTheme = tv({
     // override win over color's - see input.ts for why declaration order
     // (not runtime call order) is what decides this.
     invalid: {
-      true: { base: "ring-[var(--_selaras-color-fill)] hover:ring-[var(--_selaras-color-fill)] focus:ring-[var(--_selaras-color-fill)]" }
+      true: { base: "ring-[var(--_selaras-color-border)] hover:ring-[var(--_selaras-color-border)] focus:ring-[var(--_selaras-color-focus)]" }
     }
   },
   defaultVariants: {

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

@@ -0,0 +1,251 @@
+export declare const timelineTheme: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        vertical: {
+            root: string;
+            item: string;
+            track: string;
+            connector: string;
+            content: string;
+        };
+        horizontal: {
+            root: string;
+            item: string;
+            track: string;
+            marker: string;
+            connector: string;
+            content: string;
+        };
+    };
+    align: {
+        start: {
+            item: string;
+            track: string;
+            content: string;
+        };
+        end: {
+            item: string;
+            track: string;
+            content: string;
+        };
+        alternate: {
+            item: string;
+            track: string;
+            content: string;
+        };
+    };
+    size: {
+        sm: {
+            marker: string;
+            title: string;
+        };
+        md: {
+            marker: string;
+            title: string;
+        };
+        lg: {
+            marker: string;
+            title: string;
+        };
+    };
+    color: {
+        primary: {
+            marker: string;
+        };
+        neutral: {
+            marker: string;
+        };
+        secondary: {
+            marker: string;
+        };
+        success: {
+            marker: string;
+        };
+        danger: {
+            marker: string;
+        };
+        info: {
+            marker: string;
+        };
+        warning: {
+            marker: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    track: string;
+    marker: string;
+    icon: string;
+    connector: string;
+    content: string;
+    date: string;
+    title: string;
+    description: string;
+}, undefined, {
+    orientation: {
+        vertical: {
+            root: string;
+            item: string;
+            track: string;
+            connector: string;
+            content: string;
+        };
+        horizontal: {
+            root: string;
+            item: string;
+            track: string;
+            marker: string;
+            connector: string;
+            content: string;
+        };
+    };
+    align: {
+        start: {
+            item: string;
+            track: string;
+            content: string;
+        };
+        end: {
+            item: string;
+            track: string;
+            content: string;
+        };
+        alternate: {
+            item: string;
+            track: string;
+            content: string;
+        };
+    };
+    size: {
+        sm: {
+            marker: string;
+            title: string;
+        };
+        md: {
+            marker: string;
+            title: string;
+        };
+        lg: {
+            marker: string;
+            title: string;
+        };
+    };
+    color: {
+        primary: {
+            marker: string;
+        };
+        neutral: {
+            marker: string;
+        };
+        secondary: {
+            marker: string;
+        };
+        success: {
+            marker: string;
+        };
+        danger: {
+            marker: string;
+        };
+        info: {
+            marker: string;
+        };
+        warning: {
+            marker: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    track: string;
+    marker: string;
+    icon: string;
+    connector: string;
+    content: string;
+    date: string;
+    title: string;
+    description: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+    orientation: {
+        vertical: {
+            root: string;
+            item: string;
+            track: string;
+            connector: string;
+            content: string;
+        };
+        horizontal: {
+            root: string;
+            item: string;
+            track: string;
+            marker: string;
+            connector: string;
+            content: string;
+        };
+    };
+    align: {
+        start: {
+            item: string;
+            track: string;
+            content: string;
+        };
+        end: {
+            item: string;
+            track: string;
+            content: string;
+        };
+        alternate: {
+            item: string;
+            track: string;
+            content: string;
+        };
+    };
+    size: {
+        sm: {
+            marker: string;
+            title: string;
+        };
+        md: {
+            marker: string;
+            title: string;
+        };
+        lg: {
+            marker: string;
+            title: string;
+        };
+    };
+    color: {
+        primary: {
+            marker: string;
+        };
+        neutral: {
+            marker: string;
+        };
+        secondary: {
+            marker: string;
+        };
+        success: {
+            marker: string;
+        };
+        danger: {
+            marker: string;
+        };
+        info: {
+            marker: string;
+        };
+        warning: {
+            marker: string;
+        };
+    };
+}, {
+    root: string;
+    item: string;
+    track: string;
+    marker: string;
+    icon: string;
+    connector: string;
+    content: string;
+    date: string;
+    title: string;
+    description: string;
+}>>;
+export type TimelineThemeSlots = keyof (typeof timelineTheme)['slots'];