@noxlovette/material 0.6.0 → 0.6.1

package/dist/components/badge/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
 /**
  * M3 badge (https://m3.material.io/components/badges/specs).
  *

package/dist/components/buttons/button-group/theme.d.ts

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

package/dist/components/buttons/button-group/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 /*
  * Standard button group, per https://m3.material.io/components/button-groups/specs: an invisible
  * container that spaces its buttons so each keeps a 48dp target (18/12/8/8/8dp for XS–XL).

package/dist/components/buttons/connected/theme.d.ts

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

package/dist/components/buttons/connected/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 import { buttonBase, buttonSizes } from '../theme.js';
 /*
  * Connected button group, per https://m3.material.io/components/button-groups/specs: toggle

package/dist/components/buttons/split-button/SplitButton.svelte

@@ -95,7 +95,7 @@ only opens a menu, use `Menu`; for selectable options, `ConnectedButtonGroup`.
       {/snippet}
     </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}>
             <!-- Menu's own panel, so MenuItem rows look the same here. -->

package/dist/components/buttons/split-button/theme.d.ts

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

package/dist/components/buttons/split-button/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 import { buttonBase, buttonSizes } from '../theme.js';
 /*
  * Split button, per https://m3.material.io/components/split-button/specs. Both halves take the

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../utils/tv.js';
 import type { Breakpoint } from '../containers/pane/theme.js';
 export type ButtonVariants = VariantProps<typeof button>;
 export type ButtonIconVariants = VariantProps<typeof buttonIcon>;

package/dist/components/buttons/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
 /** Container, border and content colours for one button colour style in one state. */
 export const buttonColor = tv({
     base: '',
@@ -351,13 +351,13 @@ export const fabExpandedClasses = {
 export const fabSurface = tv({
     slots: {
         anchor: 'relative inline-grid',
-        wrapper: 'drop-shadow-elevation-3 absolute end-spacing-0 bottom-spacing-0 z-50',
+        wrapper: 'drop-shadow-elevation-3 absolute end-spacing-0 bottom-spacing-0 z-layer-modal',
         surface: 'bg-md-sys-color-surface text-md-sys-color-on-surface max-h-[min(36rem,calc(100dvh-2rem))] w-max max-w-[calc(100vw-2rem)] min-w-60 overflow-y-auto rounded-3xl py-spacing-100 outline-none'
     }
 });
 export const fabMenu = tv({
     slots: {
-        base: '-me-[5px] flex flex-col items-end gap-spacing-50 overflow-y-auto p-[5px]'
+        base: 'z-layer-popup -me-[5px] flex flex-col items-end gap-spacing-50 overflow-y-auto p-[5px]'
     }
 });
 /** FAB menu items share the medium button's measurements, fully round, without elevation. */

package/dist/components/cards/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
 export const card = tv({
     slots: {
         base: 'relative flex flex-col rounded-lg disabled:opacity-[0.38] disabled:bg-md-sys-color-surface-variant state-layer before:rounded-lg transition-shadow md-sys-motion-effects',

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

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

package/dist/components/chips/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
 export const chip = tv({
     slots: {
         base: 'md-component-button-base group inline-flex h-spacing-400 max-w-max items-center justify-center gap-spacing-100 rounded-sm before:rounded-sm px-spacing-200 md-sys-typescale-label-large',

package/dist/components/containers/action-rail/theme.d.ts

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

package/dist/components/containers/action-rail/theme.js

@@ -1,7 +1,7 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const actionRail = tv({
     slots: {
-        base: 'z-30 flex flex-col items-center justify-center right-spacing-0'
+        base: 'z-layer-bar flex flex-col items-center justify-center right-spacing-0'
     },
     variants: {
         anchor: {

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

@@ -1,3 +1,3 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type AppVariants = VariantProps<typeof app>;
 export declare const app: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "bg-md-sys-color-surface-container text-md-sys-color-on-background min-h-dvh caret-md-sys-color-primary selection:bg-md-sys-color-primary-container selection:text-md-sys-color-on-primary-container relative min-h-dvh pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] antialiased", {} | {}, undefined, import("tailwind-variants").TVReturnTypeLike<unknown, undefined>>;

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

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const app = tv({
     base: 'bg-md-sys-color-surface-container text-md-sys-color-on-background min-h-dvh caret-md-sys-color-primary selection:bg-md-sys-color-primary-container selection:text-md-sys-color-on-primary-container relative min-h-dvh pt-[env(safe-area-inset-top)] pr-[env(safe-area-inset-right)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] antialiased'
 });

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

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

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

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 /*
   M3 bottom sheet (https://m3.material.io/components/bottom-sheets/specs): `surface-container-low`
   at elevation 1, 28dp top corners. Full window width up to 640dp; past 640dp it keeps 56dp side
@@ -11,7 +11,7 @@ import { tv } from 'tailwind-variants';
 export const bottomSheet = tv({
     slots: {
         base: [
-            'fixed inset-x-spacing-0 top-auto bottom-spacing-0 z-40 mx-auto mt-auto mb-spacing-0 p-spacing-0',
+            'fixed inset-x-spacing-0 top-auto bottom-spacing-0 z-layer-sheet mx-auto mt-auto mb-spacing-0 p-spacing-0',
             'w-full max-w-160 sm:w-[calc(100%-7rem)]',
             'max-h-[calc(100dvh-4.5rem)] sm:max-h-[calc(100dvh-3.5rem)]',
             'overflow-visible bg-transparent outline-none'

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

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

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

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 /*
   M3 carousel (https://m3.material.io/components/carousel/specs): 28dp items on `surface`, 8dp
   apart. Multi-browse and hero layouts pad 16dp on both sides and 8dp top/bottom; uncontained

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

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

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

@@ -1,8 +1,8 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const contextMenu = tv({
     slots: {
         content: `
-      z-[100] min-w-48 max-w-sm gap-spacing-50 overflow-y-auto rounded-lg
+      z-layer-popup min-w-48 max-w-sm gap-spacing-50 overflow-y-auto rounded-lg
       bg-md-sys-color-surface-container-high px-spacing-100 py-spacing-50
       shadow-elevation-3 ring-md-sys-color-outline/10
     `,

package/dist/components/containers/dialogue/Dialogue.svelte

@@ -22,7 +22,7 @@ on screen until confirmed, dismissed, or a required action has been taken.
     headline,
     supportingText,
     confirmText,
-    cancelText = 'Отмена',
+    cancelText = 'Cancel',
     confirmAction,
     loading = false,
     portalDisabled = false,

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type DialogueVariants = VariantProps<typeof dialogue>;
 export declare const dialogue: import("tailwind-variants").TVReturnType<{
     [key: string]: {

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

@@ -1,8 +1,8 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const dialogue = tv({
     slots: {
-        base: 'fixed inset-spacing-0 z-40 bg-md-sys-color-scrim/32',
-        inner: 'fixed inset-spacing-0 z-50 m-auto h-max w-full outline-none bg-md-sys-color-surface-container-high shadow-elevation-3 flex flex-col rounded-[28px] p-spacing-300 gap-spacing-200',
+        base: 'fixed inset-spacing-0 z-layer-modal bg-md-sys-color-scrim/32',
+        inner: 'fixed inset-spacing-0 z-layer-modal m-auto h-max w-full outline-none bg-md-sys-color-surface-container-high shadow-elevation-3 flex flex-col rounded-[28px] p-spacing-300 gap-spacing-200',
         headlineContainer: 'md-sys-typescale-headline-small text-md-sys-color-on-surface',
         supportingTextContainer: 'md-sys-typescale-body-medium text-md-sys-color-on-surface-variant',
         buttonContainer: 'mt-spacing-100 flex items-center justify-end gap-spacing-100'

package/dist/components/containers/dialogue/types.d.ts

@@ -18,7 +18,7 @@ export type DialogueProps = DialogueVariants & Dialog.RootProps & {
     headline?: string;
     /** The label for the confirmation button. */
     confirmText: string;
-    /** The label for the cancel button. Defaults to 'Отмена'. */
+    /** The label for the cancel button. Defaults to 'Cancel'. */
     cancelText?: string;
     /**
      * Optional additional content to be rendered between the supporting text

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

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

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

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const hr = tv({
     base: 'bg-md-sys-color-outline-variant',
     variants: {

package/dist/components/containers/link-preview/theme.d.ts

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../../utils/tv.js';
 export type LinkPreviewVariants = VariantProps<typeof linkPreview>;
 export declare const linkPreview: import("tailwind-variants").TVReturnType<{
     [key: string]: {

package/dist/components/containers/link-preview/theme.js

@@ -1,7 +1,7 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const linkPreview = 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 overflow-hidden',
+        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 overflow-hidden',
         content: 'flex flex-col gap-spacing-100'
     }
 });

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

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

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).
 

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/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).
@@ -211,14 +211,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,4 +1,4 @@
-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]: {

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<{

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,4 +1,4 @@
-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',

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

@@ -1,4 +1,4 @@
-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]: {

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<{

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

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const toggleGroup = tv({
     slots: {
         root: 'inline-flex h-spacing-500 overflow-hidden rounded-full border border-md-sys-color-outline'

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

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