@sewadah/selaras 0.3.0 → 0.3.1

package/dist/runtime/theme/dropdown.js

@@ -5,7 +5,10 @@ export const dropdownTheme = tv({
     item: "flex items-center gap-2 rounded-[var(--selaras-resolved-radius-sm)] px-2 py-1.5 text-sm text-[var(--selaras-resolved-text-default)] cursor-pointer select-none outline-none data-[highlighted]:bg-[var(--selaras-resolved-surface-elevated)] data-[disabled]:opacity-50 data-[disabled]:pointer-events-none",
     icon: "size-4 shrink-0 text-[var(--selaras-resolved-text-muted)]",
     separator: "-mx-1 my-1 h-px bg-[var(--selaras-resolved-border-default)]",
-    arrow: "fill-[var(--selaras-resolved-surface-default)] stroke-[var(--selaras-resolved-border-default)] stroke-1"
+    arrow: "fill-[var(--selaras-resolved-surface-default)] stroke-[var(--selaras-resolved-border-default)] stroke-1",
+    // The adaptive small-screen dialog's scrolling list and each item group in it.
+    mobileList: "max-h-[calc(100dvh-8rem)] overflow-y-auto p-2",
+    mobileGroup: "flex flex-col gap-1"
   },
   variants: {
     // For a delete/remove-style action - deliberately just this one flag
@@ -16,6 +19,16 @@ export const dropdownTheme = tv({
         item: "text-[var(--selaras-resolved-color-danger-text)] data-[highlighted]:bg-[var(--selaras-resolved-color-danger-subtle-hover)] data-[highlighted]:text-[var(--selaras-resolved-color-danger-on-subtle)]",
         icon: "text-current"
       }
+    },
+    // Items in the adaptive dialog: larger touch targets, and real hover/focus
+    // states, since they aren't menu items with a highlighted state.
+    mobile: {
+      true: {
+        item: "min-h-11 w-full gap-3 px-3 py-2 text-start text-base transition-colors hover:bg-[var(--selaras-resolved-surface-elevated)] focus-visible:bg-[var(--selaras-resolved-surface-elevated)] focus-visible:ring-2 focus-visible:ring-[var(--selaras-resolved-color-primary-fill)] disabled:pointer-events-none disabled:opacity-50"
+      }
     }
-  }
+  },
+  compoundVariants: [
+    { mobile: true, destructive: true, class: { item: "hover:bg-[var(--selaras-resolved-color-danger-subtle-hover)] hover:text-[var(--selaras-resolved-color-danger-on-subtle)]" } }
+  ]
 });

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

@@ -18,7 +18,7 @@ export const fileTreeTheme = tv({
   },
   variants: {
     selected: {
-      true: { row: "bg-[var(--_selaras-color-subtle)] text-[var(--_selaras-color-text)] hover:bg-[var(--_selaras-color-subtle)] hover:text-[var(--_selaras-color-text)]" }
+      true: { row: "bg-[var(--_selaras-color-subtle)] font-medium text-[var(--_selaras-color-text)] hover:bg-[var(--_selaras-color-subtle)] hover:text-[var(--_selaras-color-text)]" }
     },
     color: {
       primary: "",

package/dist/runtime/theme/form-field.d.ts

@@ -19,6 +19,12 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
             container: string;
         };
     };
+    labelMode: {
+        static: {};
+        floating: {
+            container: string;
+        };
+    };
 }, {
     root: string;
     body: string;
@@ -50,6 +56,12 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
             container: string;
         };
     };
+    labelMode: {
+        static: {};
+        floating: {
+            container: string;
+        };
+    };
 }, {
     root: string;
     body: string;
@@ -81,6 +93,12 @@ export declare const formFieldTheme: import("tailwind-variants").TVReturnType<{
             container: string;
         };
     };
+    labelMode: {
+        static: {};
+        floating: {
+            container: string;
+        };
+    };
 }, {
     root: string;
     body: string;

package/dist/runtime/theme/form-field.js

@@ -28,10 +28,15 @@ export const formFieldTheme = tv({
     orientation: {
       vertical: {},
       horizontal: { body: "flex-row items-start gap-3", header: "shrink-0", container: "flex-1 min-w-0" }
+    },
+    labelMode: {
+      static: {},
+      floating: { container: "relative" }
     }
   },
   defaultVariants: {
     size: "md",
-    orientation: "vertical"
+    orientation: "vertical",
+    labelMode: "static"
   }
 });

package/dist/runtime/theme/modal.js

@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";
 export const modalTheme = 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]",
     // flex flex-col + the header/footer's own shrink-0 (native to a flex
     // child, no extra class needed) let a tall body scroll internally via
     // its own overflow-y-auto below, capped to the viewport height so a

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/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
   }
 });