@noxlovette/material 0.6.0 → 0.7.0

package/dist/components/containers/list/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 /*
   M3 Expressive lists (https://m3.material.io/components/lists/specs).
 
@@ -7,6 +7,11 @@ import { tv } from 'tailwind-variants';
   `List` sets `--li-top`/`--li-bottom` to 16dp on its first/last child, so the list's outer
   corners stay 16dp while the inner ones morph. Custom properties inherit, so this reaches an item
   through its `<li>`; each `<ul>` resets both so nested lists start clean.
+
+  Selection: the selected fill is its own element rather than the item's background. When one
+  item loses the selection and another gains it in the same update (a nav list following the
+  route, a single-select list), the fill springs from where the old one was drawn to the new
+  item, like the tab indicator, instead of blinking out and in.
 */
 export const list = tv({
     base: 'flex w-full flex-col [--li-bottom:initial] [--li-top:initial]',
@@ -22,11 +27,14 @@ export const list = tv({
 export const listItem = tv({
     slots: {
         base: [
-            'relative flex w-full min-w-spacing-0 gap-spacing-150 ps-spacing-200 pe-spacing-200 pt-spacing-125 pb-spacing-125 text-start',
+            'relative isolate flex w-full min-w-spacing-0 gap-spacing-150 ps-spacing-200 pe-spacing-200 pt-spacing-125 pb-spacing-125 text-start',
             '[--li-shape:0.25rem] rounded-t-[var(--li-top,var(--li-shape))] rounded-b-[var(--li-bottom,var(--li-shape))]',
             'transition-[border-radius,background-color,color] md-sys-motion-fast-spatial',
             'text-md-sys-color-on-surface-variant'
         ],
+        /* The selected fill, under the item's content and state layer, in the item's shape. When the
+           selection moves within a List it springs over from the previous item (ListItem.svelte). */
+        selection: 'pointer-events-none absolute inset-spacing-0 -z-10 rounded-[inherit] bg-md-sys-color-secondary-container',
         leading: 'flex shrink-0 items-center text-md-sys-color-on-surface-variant',
         body: 'flex min-w-spacing-0 flex-1 flex-col justify-center',
         overline: 'md-sys-typescale-label-small line-clamp-1 text-md-sys-color-on-surface-variant',
@@ -71,7 +79,7 @@ export const listItem = tv({
         },
         selected: {
             true: {
-                base: 'bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container [--li-shape:1rem] hover:[--li-shape:1rem]',
+                base: 'text-md-sys-color-on-secondary-container [--li-shape:1rem] hover:[--li-shape:1rem]',
                 leading: 'text-md-sys-color-on-secondary-container',
                 overline: 'text-md-sys-color-on-secondary-container',
                 headline: 'text-md-sys-color-on-secondary-container',

package/dist/components/containers/menu/Menu.svelte

@@ -44,7 +44,7 @@ Contrast with `MenuItem` (a single interactive row inside the panel) and
   </DropdownMenu.Trigger>
 
   <DropdownMenu.Portal>
-    <DropdownMenu.Content {align} sideOffset={4} class="z-100">
+    <DropdownMenu.Content {align} sideOffset={4} class="z-layer-popup">
       {#snippet child({ wrapperProps, props, open: isOpen })}
         <div {...wrapperProps} class={wrapperProps.class as any}>
           <div

package/dist/components/containers/menu/MenuSub.svelte

@@ -67,7 +67,7 @@ trigger row (`iconProps`/`helper`/`children` label) behaves like a
   </DropdownMenu.SubTrigger>
 
   <DropdownMenu.Portal>
-    <DropdownMenu.SubContent sideOffset={4} class="z-100">
+    <DropdownMenu.SubContent sideOffset={4} class="z-layer-popup">
       {#snippet child({ wrapperProps, props, open: isOpen })}
         <div {...wrapperProps} class={wrapperProps.class as any}>
           <div

package/dist/components/containers/menu/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 /**
  * Shared styling for every row-shaped element inside a `Menu`'s floating
  * panel: `MenuItem`, `MenuCheckboxItem`, `MenuRadioItem`, and `MenuSub`'s

package/dist/components/containers/menu/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const menu = tv({
     slots: {
         content: `

package/dist/components/containers/pane/DraggablePane.svelte

@@ -31,7 +31,7 @@ the pane itself stays `position: fixed` and doesn't move with either.
   import { springTokens, springTransition } from '../../../animation/spring.js';
   import { Icon, Layer } from '../../../utils/index.js';
   import { ButtonIcon } from '../../buttons/index.js';
-  import { clickOutside } from '../../../attachments/index.js';
+  import { clickOutside, drag, resist } from '../../../attachments/index.js';
   import { draggablePane, type ResizeEdge } from './theme.js';
   import { dragPositions } from './dragStore.svelte.js';
   import type { DraggablePaneProps } from './types.js';
@@ -313,11 +313,6 @@ the pane itself stays `position: fixed` and doesn't move with either.
     the same spring. Grabbing the pane mid-spring stops it where it is.
   */
   const SETTLE_SPRING = springTransition(springTokens.fastSpatial);
-  /* Share of the overshoot still applied at the edge, shrinking the further it's pulled. The
-     UIScrollView rubber-band constant — M3 has no token for this; tune by eye. */
-  const RUBBER_BAND = 0.55;
-  /* Pointer samples older than this don't count towards the release velocity. */
-  const VELOCITY_WINDOW_MS = 100;
 
   let settleX: AnimationPlaybackControls | undefined;
   let settleY: AnimationPlaybackControls | undefined;
@@ -352,61 +347,31 @@ the pane itself stays `position: fixed` and doesn't move with either.
     if (persistKey) dragPositions.set(persistKey, { x: next.x, y: next.y, width, height });
   }
 
-  /** Resisted overshoot: the further past the edge, the less the pane follows. */
-  function rubberBand(overshoot: number, limit: number) {
-    return (1 - 1 / ((overshoot * RUBBER_BAND) / limit + 1)) * limit;
-  }
-
-  function resist(value: number, min: number, max: number, size: number) {
-    if (value < min) return min - rubberBand(min - value, size);
-    if (value > max) return max + rubberBand(value - max, size);
-    return value;
-  }
-
-  let dragStartX = 0;
-  let dragStartY = 0;
   let originX = 0;
   let originY = 0;
-  let samples: { x: number; y: number; t: number }[] = [];
-
-  function startDrag(event: PointerEvent) {
-    if (disableDrag) return;
-    stopSettle();
-    dragging = true;
-    dragStartX = event.clientX;
-    dragStartY = event.clientY;
-    originX = x ?? initialX;
-    originY = y ?? initialY;
-    samples = [{ x: event.clientX, y: event.clientY, t: event.timeStamp }];
-    (event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
-  }
 
-  function moveDrag(event: PointerEvent) {
-    if (!dragging) return;
-    const rawX = originX + (event.clientX - dragStartX);
-    const rawY = originY + (event.clientY - dragStartY);
-    const rect = boundsRect();
-    const { x: minX, y: minY } = clamp(-Infinity, -Infinity);
-    const { x: maxX, y: maxY } = clamp(Infinity, Infinity);
-    x = resist(rawX, minX, maxX, rect.right - rect.left);
-    y = resist(rawY, minY, maxY, rect.bottom - rect.top);
-    samples.push({ x: event.clientX, y: event.clientY, t: event.timeStamp });
-    samples = samples.filter((sample) => event.timeStamp - sample.t <= VELOCITY_WINDOW_MS);
-  }
-
-  function releaseVelocity() {
-    const first = samples[0];
-    const last = samples[samples.length - 1];
-    const seconds = first && last ? (last.t - first.t) / 1000 : 0;
-    if (!seconds) return { x: 0, y: 0 };
-    return { x: (last.x - first.x) / seconds, y: (last.y - first.y) / seconds };
-  }
-
-  function endDrag() {
-    if (!dragging) return;
-    dragging = false;
-    settleTo(x ?? initialX, y ?? initialY, releaseVelocity());
-  }
+  // Pointer plumbing (capture, release velocity) and the rubber-band come from the shared drag
+  // attachment; this only positions the pane.
+  const dragPane = drag(() => ({
+    disabled: disableDrag,
+    onStart: () => {
+      stopSettle();
+      dragging = true;
+      originX = x ?? initialX;
+      originY = y ?? initialY;
+    },
+    onMove: (offset) => {
+      const rect = boundsRect();
+      const { x: minX, y: minY } = clamp(-Infinity, -Infinity);
+      const { x: maxX, y: maxY } = clamp(Infinity, Infinity);
+      x = resist(originX + offset.x, minX, maxX, rect.right - rect.left);
+      y = resist(originY + offset.y, minY, maxY, rect.bottom - rect.top);
+    },
+    onEnd: (velocity) => {
+      dragging = false;
+      settleTo(x ?? initialX, y ?? initialY, velocity);
+    }
+  }));
 
   const NUDGE = 8;
 
@@ -453,7 +418,7 @@ the pane itself stays `position: fixed` and doesn't move with either.
   // every move rather than accumulated via `event.movementX`/`movementY` —
   // the latter isn't reliably populated across every input path (some
   // synthetic/automated drag sequences leave it 0), which would silently
-  // drop the resize. Matches `moveDrag`'s baseline-delta approach.
+  // drop the resize. The drag attachment works from a fixed baseline the same way.
   function moveResize(event: PointerEvent) {
     if (!resizeDir) return;
     applyResize(
@@ -534,10 +499,7 @@ the pane itself stays `position: fixed` and doesn't move with either.
       tabindex={disableDrag ? undefined : 0}
       aria-label={disableDrag ? undefined : title ? `Drag to move ${title}` : 'Drag to move'}
       aria-keyshortcuts={disableDrag ? undefined : 'ArrowUp ArrowDown ArrowLeft ArrowRight'}
-      onpointerdown={disableDrag ? undefined : startDrag}
-      onpointermove={disableDrag ? undefined : moveDrag}
-      onpointerup={disableDrag ? undefined : endDrag}
-      onpointercancel={disableDrag ? undefined : endDrag}
+      {@attach dragPane}
       onkeydown={disableDrag ? undefined : onKeydown}
     >
       {#if !disableDrag}

package/dist/components/containers/pane/Pane.svelte

@@ -76,7 +76,7 @@ the document root yourself to get the same behavior.
 
   const style = $derived(
     clsx(
-      !flexible && `width: ${shown}px; flex-basis: ${shown}px;`,
+      !flexible && `width: ${shown}px; --pane-basis: ${shown}px;`,
       sticky && `--pane-sticky-top: ${stickyTop}px;`
     )
   );

package/dist/components/containers/pane/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type PaneVariants = VariantProps<typeof pane>;
 export type PaneGridVariants = VariantProps<typeof paneGrid>;
 export type PaneHandleVariants = VariantProps<typeof paneHandle>;

package/dist/components/containers/pane/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 // Static class lookups, keyed by breakpoint then value — every string below is a
 // literal Tailwind candidate, so the JIT scanner picks it up even though it's only
 // ever read through object indexing at runtime (see PaneGrid.svelte's resolveResponsive).
@@ -92,11 +92,22 @@ const marginClasses = {
         xl: 'xl:m-spacing-400'
     }
 };
+/*
+  A pane's flex-basis is its size along the grid's axis, so it depends on the direction. Each
+  Pane publishes the basis it wants in a row as --pane-basis (0 for a flexible pane, so flexible
+  siblings share the free space; its px width for a fixed one), and each tier here applies it to
+  the children: that basis in a row, `auto` in a column, where panes stack at their content
+  height. A basis of 0 in a column made a flexible pane exactly as tall as its min-height, with
+  the rest of its content clipped. The `*:` classes beat the Pane's own `basis-*`.
+*/
 const directionClasses = {
-    small: { row: 'flex-row', column: 'flex-col' },
-    medium: { row: 'md:flex-row', column: 'md:flex-col' },
-    large: { row: 'lg:flex-row', column: 'lg:flex-col' },
-    extraLarge: { row: 'xl:flex-row', column: 'xl:flex-col' }
+    small: { row: 'flex-row *:basis-(--pane-basis)', column: 'flex-col *:basis-auto' },
+    medium: { row: 'md:flex-row md:*:basis-(--pane-basis)', column: 'md:flex-col md:*:basis-auto' },
+    large: { row: 'lg:flex-row lg:*:basis-(--pane-basis)', column: 'lg:flex-col lg:*:basis-auto' },
+    extraLarge: {
+        row: 'xl:flex-row xl:*:basis-(--pane-basis)',
+        column: 'xl:flex-col xl:*:basis-auto'
+    }
 };
 const visibleFromClasses = {
     small: '',
@@ -167,9 +178,10 @@ export const pane = tv({
             lg: { content: 'gap-spacing-200' },
             xl: { content: 'gap-spacing-300' }
         },
+        // The basis outside a PaneGrid; inside one, the grid's direction sets it from --pane-basis.
         flexible: {
-            true: { base: 'min-w-spacing-0 grow basis-spacing-0' },
-            false: { base: 'shrink-0' }
+            true: { base: 'min-w-spacing-0 grow basis-spacing-0 [--pane-basis:0px]' },
+            false: { base: 'shrink-0 basis-(--pane-basis)' }
         },
         sticky: {
             true: {
@@ -178,6 +190,20 @@ export const pane = tv({
             false: ''
         }
     },
+    compoundVariants: [
+        /*
+          A full pane is a page that scrolls with the window, so its content ends 72dp (a 56dp FAB
+          plus its 16dp margin) above the pane's bottom edge instead of on the preset's bottom
+          padding. The last line can then scroll clear of a FAB (M3: keep a FAB from covering
+          content at the end of a scroll) and doesn't finish flush against the window edge. Each
+          tier restates it, since the presets set `md:py-*`/`lg:py-*`.
+        */
+        {
+            full: true,
+            padding: ['sm', 'md', 'lg'],
+            class: { content: 'pb-spacing-900 md:pb-spacing-900 lg:pb-spacing-900' }
+        }
+    ],
     defaultVariants: {
         rounded: true,
         flexible: true
@@ -211,14 +237,14 @@ export const paneHandle = tv({
 });
 export const draggablePane = tv({
     slots: {
-        base: 'fixed z-[100] flex min-w-72 flex-col rounded-md bg-md-sys-color-surface-container-highest shadow-elevation-3 transition-shadow md-sys-motion-effects',
+        base: 'fixed z-layer-pane flex min-w-72 flex-col rounded-md bg-md-sys-color-surface-container-highest shadow-elevation-3 transition-shadow md-sys-motion-effects',
         headerBar: 'relative flex shrink-0 items-center gap-spacing-100 rounded-t-2xl px-spacing-150 py-spacing-100 touch-none select-none md-sys-state-focus-indicator',
         grip: 'shrink-0 text-md-sys-color-on-surface-variant',
         headline: 'flex-1 truncate md-sys-typescale-title-small text-md-sys-color-on-surface',
         actions: 'flex shrink-0 items-center gap-spacing-50',
         content: 'flex flex-1 flex-col min-h-spacing-0 min-w-spacing-0 overflow-auto p-spacing-200 pt-spacing-100',
         resizeHandle: 'absolute touch-none',
-        miniBase: 'fixed z-[100] flex cursor-pointer items-center gap-spacing-100 rounded-full bg-md-sys-color-surface-container-high px-spacing-200 py-spacing-100 shadow-elevation-2 md-sys-state-focus-indicator hover:shadow-elevation-3',
+        miniBase: 'fixed z-layer-pane flex cursor-pointer items-center gap-spacing-100 rounded-full bg-md-sys-color-surface-container-high px-spacing-200 py-spacing-100 shadow-elevation-2 md-sys-state-focus-indicator hover:shadow-elevation-3',
         miniIcon: 'shrink-0 text-md-sys-color-on-surface-variant',
         miniLabel: 'md-sys-typescale-label-large max-w-48 truncate text-md-sys-color-on-surface'
     },

package/dist/components/containers/popover/theme.d.ts

@@ -1,23 +1,23 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type PopoverVariants = VariantProps<typeof popover>;
 export declare const popover: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             title?: import("tailwind-variants").ClassValue;
-            close?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             body?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
+            close?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             title?: import("tailwind-variants").ClassValue;
-            close?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             body?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
+            close?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -30,10 +30,10 @@ export declare const popover: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             title?: import("tailwind-variants").ClassValue;
-            close?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             body?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
+            close?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {

package/dist/components/containers/popover/theme.js

@@ -1,7 +1,7 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const popover = tv({
     slots: {
-        base: 'relative z-[100] min-w-48 max-w-sm rounded-2xl bg-md-sys-color-surface-container-high p-spacing-200 shadow-elevation-3 ring-1 ring-md-sys-color-outline/20',
+        base: 'relative z-layer-popup min-w-48 max-w-sm rounded-2xl bg-md-sys-color-surface-container-high p-spacing-200 shadow-elevation-3 ring-1 ring-md-sys-color-outline/20',
         close: 'absolute top-spacing-150 right-spacing-150',
         header: 'mb-spacing-100 flex items-center justify-between gap-spacing-200',
         title: 'md-sys-typescale-title-small text-md-sys-color-on-surface',

package/dist/components/containers/scroll-area/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const scrollArea = tv({
     slots: {
         root: 'relative overflow-hidden',

package/dist/components/containers/side-sheet/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type SideSheetVariants = VariantProps<typeof sideSheet>;
 export declare const sideSheet: import("tailwind-variants").TVReturnType<{
     variant: {

package/dist/components/containers/side-sheet/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 /*
   M3 side sheet (https://m3.material.io/components/side-sheets/specs). Full height, 256dp wide by
   default and never wider than 400dp. 24dp start/end padding (16dp before a back button), 12dp

package/dist/components/date/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../utils/tv.js';
 export type DateFieldVariants = VariantProps<typeof dateField>;
 export type DateRangeFieldVariants = VariantProps<typeof dateRangeField>;
 export declare const dateRangeField: import("tailwind-variants").TVReturnType<{
@@ -251,10 +251,10 @@ export declare const dateCalendar: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             grid?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
-            surface?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
             nav?: import("tailwind-variants").ClassValue;
+            row?: import("tailwind-variants").ClassValue;
+            surface?: import("tailwind-variants").ClassValue;
             cell?: import("tailwind-variants").ClassValue;
             heading?: import("tailwind-variants").ClassValue;
             weekday?: import("tailwind-variants").ClassValue;
@@ -265,10 +265,10 @@ export declare const dateCalendar: import("tailwind-variants").TVReturnType<{
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             grid?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
-            surface?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
             nav?: import("tailwind-variants").ClassValue;
+            row?: import("tailwind-variants").ClassValue;
+            surface?: import("tailwind-variants").ClassValue;
             cell?: import("tailwind-variants").ClassValue;
             heading?: import("tailwind-variants").ClassValue;
             weekday?: import("tailwind-variants").ClassValue;
@@ -289,10 +289,10 @@ export declare const dateCalendar: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             grid?: import("tailwind-variants").ClassValue;
-            row?: import("tailwind-variants").ClassValue;
-            surface?: import("tailwind-variants").ClassValue;
             header?: import("tailwind-variants").ClassValue;
             nav?: import("tailwind-variants").ClassValue;
+            row?: import("tailwind-variants").ClassValue;
+            surface?: import("tailwind-variants").ClassValue;
             cell?: import("tailwind-variants").ClassValue;
             heading?: import("tailwind-variants").ClassValue;
             weekday?: import("tailwind-variants").ClassValue;

package/dist/components/date/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
 export const dateRangeField = tv({
     slots: {
         base: `

package/dist/components/forms/checkbox/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export declare const checkbox: import("tailwind-variants").TVReturnType<{
     state: {
         unchecked: {};

package/dist/components/forms/checkbox/theme.js

@@ -1,7 +1,7 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const checkbox = tv({
     slots: {
-        root: 'group inline-flex min-h-spacing-500 select-none items-start gap-spacing-150 text-md-sys-color-on-surface min-h-4.5 cursor-pointer',
+        root: 'group inline-flex min-h-spacing-500 select-none items-start gap-spacing-150 text-md-sys-color-on-surface cursor-pointer',
         container: 'relative inline-flex size-[18px] shrink-0',
         control: 'layer-container absolute -inset-[11px] rounded-full text-md-sys-color-on-surface-variant state-layer before:rounded-full group-focus-visible:outline group-focus-visible:outline-3 group-focus-visible:outline-offset-2 group-focus-visible:outline-md-sys-color-secondary transition-colors md-sys-motion-fast-effects',
         box: 'absolute inset-[11px] rounded-[4px] border-2 border-current bg-md-sys-color-surface transition-colors md-sys-motion-fast-effects',

package/dist/components/forms/command/theme.d.ts

@@ -1,11 +1,11 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type CommandVariants = VariantProps<typeof command>;
 export declare const command: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             item?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
             group?: import("tailwind-variants").ClassValue;
             list?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;
@@ -19,8 +19,8 @@ export declare const command: import("tailwind-variants").TVReturnType<{
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             item?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
             group?: import("tailwind-variants").ClassValue;
             list?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;
@@ -45,8 +45,8 @@ export declare const command: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             item?: import("tailwind-variants").ClassValue;
-            input?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
+            input?: import("tailwind-variants").ClassValue;
             group?: import("tailwind-variants").ClassValue;
             list?: import("tailwind-variants").ClassValue;
             separator?: import("tailwind-variants").ClassValue;

package/dist/components/forms/command/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const command = tv({
     slots: {
         base: 'flex h-full w-full flex-col overflow-hidden rounded-2xl bg-md-sys-color-surface-container-high text-md-sys-color-on-surface shadow-elevation-3 ring-1 ring-md-sys-color-outline/20',

package/dist/components/forms/pin/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type PinInputVariants = VariantProps<typeof pinInput>;
 export declare const pinInput: import("tailwind-variants").TVReturnType<{
     error: {

package/dist/components/forms/pin/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const pinInput = tv({
     slots: {
         root: 'flex flex-col gap-spacing-100',

package/dist/components/forms/radio-group/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export declare const radioGroup: import("tailwind-variants").TVReturnType<{
     orientation: {
         vertical: {

package/dist/components/forms/radio-group/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const radioGroup = tv({
     slots: {
         root: 'flex',

package/dist/components/forms/search/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type SearchVariants = VariantProps<typeof search>;
 /**
  * M3 Expressive contained search bar (https://m3.material.io/components/search/specs):

package/dist/components/forms/search/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 /**
  * M3 Expressive contained search bar (https://m3.material.io/components/search/specs):
  * 56dp, circular, surface-container-high, flat. 48dp leading/trailing targets at a 4dp inset,

package/dist/components/forms/select/Select.svelte

@@ -65,13 +65,13 @@ Powered by bits-ui for accessibility and behavior.
 
         <Select.Portal disabled={portalDisabled}>
           <Select.Content
-            class={cls.content({ class: clsx('z-[100]', contentProps?.class) })}
+            class={cls.content({ class: clsx('z-layer-popup', contentProps?.class) })}
             sideOffset={4}
             align="start"
             {...contentProps}
           >
             {#snippet child({ wrapperProps, props, open })}
-              <div {...wrapperProps} class={clsx('z-[100]', wrapperProps.class as any)}>
+              <div {...wrapperProps} class={clsx('z-layer-popup', wrapperProps.class as any)}>
                 <div
                   {...props}
                   class={clsx('relative flex flex-col outline-none', props.class as any)}

package/dist/components/forms/select/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type SelectVariants = VariantProps<typeof select>;
 export declare const select: import("tailwind-variants").TVReturnType<{
     variant: {

package/dist/components/forms/select/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const select = tv({
     slots: {
         root: 'relative w-full',
@@ -32,7 +32,7 @@ export const select = tv({
       group-data-[state=open]:rotate-180
     `,
         content: `
-      z-[100] min-w-[var(--bits-select-anchor-width)] max-h-96 overflow-y-auto
+      z-layer-popup min-w-[var(--bits-select-anchor-width)] max-h-96 overflow-y-auto
       rounded-lg gap-spacing-50 bg-md-sys-color-surface-container-high
       shadow-elevation-3 ring-md-sys-color-outline/10 px-spacing-100 py-spacing-50 outline-none
     `,

package/dist/components/forms/slider/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 /**
  * M3 Expressive slider: an active and an inactive track separated from a bar handle by a 6dp gap.
  * Per-size tokens (track / handle / outer corner / inset icon): XS 16/44/8/–, S 24/44/8/–,

package/dist/components/forms/slider/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 /**
  * M3 Expressive slider: an active and an inactive track separated from a bar handle by a 6dp gap.
  * Per-size tokens (track / handle / outer corner / inset icon): XS 16/44/8/–, S 24/44/8/–,

package/dist/components/forms/switch/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export declare const toggle: import("tailwind-variants").TVReturnType<{
     icons: {
         checked: {};

package/dist/components/forms/switch/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 // M3 Switch:
 // Track  — 52×32dp, 2dp border
 // Thumb  — 16dp unchecked / 24dp checked (scale 1.5×)

package/dist/components/forms/textfield/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type TextFieldVariants = VariantProps<typeof textfield>;
 export declare const textfield: import("tailwind-variants").TVReturnType<{
     variant: {

package/dist/components/forms/textfield/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const textfield = tv({
     slots: {
         base: `

package/dist/components/forms/toggle-group/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type ToggleGroupVariants = VariantProps<typeof toggleGroup>;
 export type ToggleGroupItemVariants = VariantProps<typeof toggleGroupItem>;
 export declare const toggleGroup: import("tailwind-variants").TVReturnType<{