@noxlovette/material 0.6.0 → 0.6.1

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

@@ -1,7 +1,7 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const tooltip = tv({
     slots: {
-        base: 'min-w-60 py-spacing-150 px-spacing-200  shadow-elevation-2 rounded-md relative z-[100] pointer-events-auto',
+        base: 'min-w-60 py-spacing-150 px-spacing-200  shadow-elevation-2 rounded-md relative z-layer-popup pointer-events-auto',
         subhead: '',
         supportingText: '',
         textContainer: '',

package/dist/components/misc/ThemeSwitcher.svelte

@@ -6,7 +6,7 @@
   let open = $state(false);
 </script>
 
-<div class="right-spacing-200 bottom-spacing-200 fixed z-50 hidden md:block">
+<div class="right-spacing-200 bottom-spacing-200 z-layer-fab fixed hidden md:block">
   <Popover bind:open title="Theme Settings" side="top" align="end" sideOffset={16}>
     {#snippet trigger(triggerProps)}
       <FAB iconProps={{ name: 'palette' }} {...triggerProps} />

package/dist/components/misc/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
 export const avatar = tv({
     slots: {
         root: 'relative flex aspect-square shrink-0 items-center justify-center overflow-hidden rounded-full',

package/dist/components/nav/appbar/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 AppbarVariants = VariantProps<typeof appbar>;
 export type AppBarSize = 'small' | 'medium' | 'large';

package/dist/components/nav/appbar/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 /*
   M3 Expressive app bar (https://m3.material.io/components/app-bars/specs), laid out on one
   3-column grid (leading · text · trailing) so the size can change per breakpoint in CSS alone:
@@ -121,7 +121,7 @@ export function appbarSize(size, hasSubtitle) {
 }
 export const appbar = tv({
     slots: {
-        base: 'fixed top-spacing-0 left-spacing-0 w-full flex flex-col z-30 transition-colors md-sys-motion-effects',
+        base: 'fixed top-spacing-0 left-spacing-0 w-full flex flex-col z-layer-bar transition-colors md-sys-motion-effects',
         row: 'grid w-full items-center px-spacing-50',
         childrenRow: 'w-full px-spacing-100 pb-spacing-100',
         ghost: 'w-full shrink-0 pointer-events-none',

package/dist/components/nav/breadcrumb/theme.d.ts

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

package/dist/components/nav/breadcrumb/theme.js

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

package/dist/components/nav/navbar/theme.d.ts

@@ -1,19 +1,19 @@
 export declare const navbar: import("tailwind-variants").TVReturnType<{
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            fab?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             items?: import("tailwind-variants").ClassValue;
             ghost?: import("tailwind-variants").ClassValue;
-            fab?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
+            fab?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             items?: import("tailwind-variants").ClassValue;
             ghost?: import("tailwind-variants").ClassValue;
-            fab?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
@@ -24,10 +24,10 @@ export declare const navbar: import("tailwind-variants").TVReturnType<{
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
+            fab?: import("tailwind-variants").ClassValue;
             base?: import("tailwind-variants").ClassValue;
             items?: import("tailwind-variants").ClassValue;
             ghost?: import("tailwind-variants").ClassValue;
-            fab?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {

package/dist/components/nav/navbar/theme.js

@@ -1,7 +1,7 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const navbar = tv({
     slots: {
-        base: 'shadow-elevation-2 bg-md-sys-color-surface-container relative z-20 flex h-20 fixed bottom-spacing-0 w-full left-spacing-0 justify-around py-spacing-150 md:hidden',
+        base: 'shadow-elevation-2 bg-md-sys-color-surface-container z-layer-bar flex h-20 fixed bottom-spacing-0 w-full left-spacing-0 justify-around py-spacing-150 md:hidden',
         items: 'flex justify-around w-full',
         fab: 'bottom-24 right-spacing-200 absolute',
         ghost: 'h-20 w-full shrink-0 md:hidden pointer-events-none'

package/dist/components/nav/rail/Rail.svelte

@@ -25,6 +25,8 @@ On mobile (< md) it automatically renders as a bottom navigation bar.
     collapsed = $bindable(true),
     anchor = 'viewport',
     railTop = 0,
+    expandLabel = 'Expand navigation',
+    collapseLabel = 'Collapse navigation',
     class: className
   }: RailProps = $props();
 
@@ -68,7 +70,7 @@ On mobile (< md) it automatically renders as a bottom navigation bar.
     <ButtonIcon
       variant="standard"
       type="button"
-      tooltipContent={collapsed ? 'Открыть' : 'Закрыть'}
+      tooltipContent={collapsed ? expandLabel : collapseLabel}
       iconProps={{ name: `${collapsed ? 'menu' : 'menu_open'}` }}
       class={toggleClass}
       onclick={() => (collapsed = !collapsed)}
@@ -98,6 +100,6 @@ On mobile (< md) it automatically renders as a bottom navigation bar.
     opacity: 1;
     pointer-events: auto;
     background-color: rgb(0 0 0 / 0.4);
-    z-index: 30;
+    z-index: var(--z-layer-rail);
   }
 </style>

package/dist/components/nav/rail/theme.d.ts

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

package/dist/components/nav/rail/theme.js

@@ -1,7 +1,7 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const rail = tv({
     slots: {
-        base: 'py-spacing-600 hidden bg-md-sys-color-surface-container z-40 flex-col md:flex gap-spacing-300 transition-[width,padding,background-color] md-sys-motion-spatial',
+        base: 'py-spacing-600 hidden bg-md-sys-color-surface-container z-layer-rail flex-col md:flex gap-spacing-300 transition-[width,padding,background-color] md-sys-motion-spatial',
         items: 'flex flex-col gap-spacing-150 pt-spacing-300 scrollbar-none w-full overflow-x-hidden',
         ghost: 'hidden md:block shrink-0 transition-[width] md-sys-motion-spatial',
         scrim: 'hidden md:block lg:hidden inset-spacing-0'

package/dist/components/nav/rail/types.d.ts

@@ -41,6 +41,10 @@ export type RailProps = RailVariants & HTMLAttributes<HTMLDivElement> & {
     anchor?: RailVariants['anchor'];
     /** Top offset in px for viewport/parent anchor (e.g. height of a top bar). Default 0. */
     railTop?: number;
+    /** Tooltip and accessible name of the toggle while collapsed. Default 'Expand navigation'. */
+    expandLabel?: string;
+    /** Tooltip and accessible name of the toggle while expanded. Default 'Collapse navigation'. */
+    collapseLabel?: string;
     /**
      * @deprecated No effect: Rail no longer renders a navigation bar below `md`. Mount a `Navbar`
      * next to it for small windows.

package/dist/components/nav/tabs/theme.d.ts

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

package/dist/components/nav/tabs/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const tabHolder = tv({
     slots: {
         base: 'relative flex w-full bg-md-sys-color-surface',

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

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

package/dist/components/pill/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
 export const pill = tv({
     base: 'relative inline-flex items-center justify-center px-spacing-200 py-spacing-75 md-sys-typescale-label-large select-none rounded-full whitespace-nowrap',
     variants: {

package/dist/components/progress/LinearProgress.svelte

@@ -11,7 +11,7 @@ The track always keeps a gap either side of the bar.
 -->
 <script lang="ts">
   import clsx from 'clsx';
-  import { tv } from 'tailwind-variants';
+  import { tv } from '../../utils/tv.js';
   import { Progress } from 'bits-ui';
   import { animate, type AnimationPlaybackControls } from 'motion';
   import { springTokens, springTransition } from '../../animation/spring.js';

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

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

package/dist/components/snackbar/theme.js

@@ -1,7 +1,7 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
 export const snackbar = tv({
     slots: {
-        base: 'rounded-xs relative min-h-spacing-600 md:max-h-17 flex z-[100] items-center bg-md-sys-color-inverse-surface shadow-elevation-3 pr-spacing-100 pl-spacing-200 justify-between h-max py-spacing-150',
+        base: 'rounded-xs relative min-h-spacing-600 md:max-h-17 flex z-layer-snackbar items-center bg-md-sys-color-inverse-surface shadow-elevation-3 pr-spacing-100 pl-spacing-200 justify-between h-max py-spacing-150',
         label: 'text-md-sys-color-inverse-primary md-sys-typescale-label-large px-spacing-150 cursor-pointer ',
         actionWrapper: 'flex items-center z-40',
         supportingText: 'text-md-sys-color-inverse-on-surface md-sys-typescale-body-medium max-w-[60ch] ',

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

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

package/dist/components/table/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
 export const table = tv({
     slots: {
         root: 'w-full border-collapse text-left md-sys-typescale-body-medium text-md-sys-color-on-surface',

package/dist/components/time/TimeField.svelte

@@ -92,7 +92,7 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
       align="start"
       sideOffset={12}
       collisionPadding={8}
-      class="z-100"
+      class="z-layer-popup"
     >
       {#snippet child({ wrapperProps, props, open })}
         <div {...wrapperProps}>

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

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

package/dist/components/time/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
 export const timepicker = tv({
     slots: {
         base: 'bg-md-sys-color-surface-container-high shadow-elevation-3 rounded-xl max-w-fit p-spacing-300 group relative',

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

@@ -1,4 +1,4 @@
-import { type VariantProps } from 'tailwind-variants';
+import { type VariantProps } from '../../utils/tv.js';
 export type ToolbarVariants = VariantProps<typeof toolbar>;
 export type ToolbarButtonVariants = VariantProps<typeof toolbarButton>;
 export type ToolbarGroupItemVariants = VariantProps<typeof toolbarGroupItem>;

package/dist/components/toolbar/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../utils/tv.js';
 export const toolbar = tv({
     slots: {
         // Layout/position only — no paint. Holds one implicit `segment` by default, or,
@@ -33,7 +33,7 @@ export const toolbar = tv({
         },
         variant: {
             floating: { root: 'inline-flex', segment: 'rounded-full shadow-elevation-1' },
-            docked: { root: 'fixed left-spacing-0 z-10 w-full', segment: 'w-full rounded-none' }
+            docked: { root: 'fixed left-spacing-0 z-layer-bar w-full', segment: 'w-full rounded-none' }
         },
         color: {
             standard: { segment: 'bg-md-sys-color-surface-container' },

package/dist/components/typography/body/theme.d.ts

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

package/dist/components/typography/body/theme.js

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

package/dist/components/typography/display/theme.d.ts

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

package/dist/components/typography/display/theme.js

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

package/dist/components/typography/headline/theme.d.ts

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

package/dist/components/typography/headline/theme.js

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

package/dist/components/typography/kbd/theme.d.ts

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

package/dist/components/typography/kbd/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../../../utils/tv.js';
 export const kbd = tv({
     base: 'md-sys-typescale-emphasized-label-small text-md-sys-color-on-surface-variant',
     variants: {

package/dist/components/typography/label/theme.js

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

package/dist/components/typography/title/theme.d.ts

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

package/dist/components/typography/title/theme.js

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

package/dist/index.css

@@ -3,5 +3,6 @@
 @import './styles/motion.css';
 @import './styles/rounding.css';
 @import './styles/elevation.css';
+@import './styles/layers.css';
 @import './styles/prose.css';
 @import './styles/component.css';

package/dist/styles/layers.css

@@ -0,0 +1,33 @@
+/*
+ * Stacking layers for surfaces that float over the page. M3 defines no z-index tokens, so the
+ * library names its own: every fixed, sticky or portaled component takes one of these instead
+ * of a number, so their relative order is set here and nowhere else. Apply with
+ * `z-layer-<name>` (z-layer-modal); override the value on :root with `--z-layer-<name>`.
+ * Stacking inside one component (a slider thumb over its track) keeps plain z-10/z-20.
+ *
+ * Order, lowest first:
+ *   bar       Navbar, AppBar, ActionRail, docked Toolbar
+ *   rail      Rail and its tablet scrim (the expanded rail covers the bars)
+ *   sheet     standard (non-modal) BottomSheet
+ *   fab       fixed FABs such as ThemeSwitcher
+ *   pane      DraggablePane and its minimised pill, floating windows over app chrome
+ *   modal     Dialogue scrim and content, a FAB's container-transform surface
+ *   snackbar  stays readable while a dialog is open
+ *   popup     menus, selects, tooltips, popovers, date/time pickers, opened from any layer
+ *             beneath, including a dialog or a pane
+ * Modal sheets are native <dialog>s in the top layer and sit above all of these.
+ */
+@theme static {
+  --z-layer-bar: 30;
+  --z-layer-rail: 40;
+  --z-layer-sheet: 40;
+  --z-layer-fab: 50;
+  --z-layer-pane: 60;
+  --z-layer-modal: 70;
+  --z-layer-snackbar: 80;
+  --z-layer-popup: 90;
+}
+
+@utility z-layer-* {
+  z-index: --value(--z-layer-*);
+}

package/dist/utils/icon/theme.d.ts

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

package/dist/utils/icon/theme.js

@@ -1,4 +1,4 @@
-import { tv } from 'tailwind-variants';
+import { tv } from '../tv.js';
 export const loadingIndicator = tv({
     base: 'rounded-full',
     variants: {

package/dist/utils/tv.d.ts

@@ -0,0 +1,6 @@
+export type { VariantProps } from 'tailwind-variants';
+/**
+ * The library's `tv`. It teaches tailwind-merge that `z-layer-*` sets z-index, so a consumer's
+ * `class="z-40"` replaces a component's layer instead of fighting it in CSS order.
+ */
+export declare const tv: import("tailwind-variants").TV;

package/dist/utils/tv.js

@@ -0,0 +1,12 @@
+import { createTV } from 'tailwind-variants';
+/** The layer names from `styles/layers.css`. Keep the two in sync. */
+const LAYERS = ['bar', 'rail', 'sheet', 'fab', 'pane', 'modal', 'snackbar', 'popup'];
+/**
+ * The library's `tv`. It teaches tailwind-merge that `z-layer-*` sets z-index, so a consumer's
+ * `class="z-40"` replaces a component's layer instead of fighting it in CSS order.
+ */
+export const tv = createTV({
+    twMergeConfig: {
+        extend: { classGroups: { z: [{ 'z-layer': LAYERS }] } }
+    }
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "type": "module",
   "description": "A Material Design 3 component library for Svelte, built on Bits UI.",
   "keywords": [