@noxlovette/material 0.1.30 → 0.1.32

package/dist/components/buttons/button-group/ButtonGroup.svelte

@@ -28,7 +28,11 @@ Replaces the deprecated ToggleGroup / segmented-buttons pattern.
 
   const cls = $derived(buttonGroup({ orientation, shape, size }));
 
-  const buttonGroupCtx = { get orientation() { return orientation; } };
+  const buttonGroupCtx = {
+    get orientation() {
+      return orientation;
+    }
+  };
   setContext('buttonGroup', buttonGroupCtx);
 </script>
 

package/dist/components/buttons/button-group/ButtonGroupItem.svelte

@@ -11,10 +11,17 @@ Displays a leading check icon when selected, per M3 spec.
   import { buttonGroupItem } from './theme.js';
   import type { ButtonGroupItemProps } from './types.js';
 
-  let { value, label, iconProps, disabled = false, class: className }: ButtonGroupItemProps =
-    $props();
+  let {
+    value,
+    label,
+    iconProps,
+    disabled = false,
+    class: className
+  }: ButtonGroupItemProps = $props();
 
-  const buttonGroupCtx = getContext<{ orientation: 'horizontal' | 'vertical' } | undefined>('buttonGroup');
+  const buttonGroupCtx = getContext<{ orientation: 'horizontal' | 'vertical' } | undefined>(
+    'buttonGroup'
+  );
   const orientation = $derived(buttonGroupCtx?.orientation ?? 'horizontal');
   const { base, checkIcon, icon } = $derived(buttonGroupItem({ orientation }));
 </script>

package/dist/components/nav/navbar/NavbarItem.svelte

@@ -18,12 +18,14 @@ A single destination within a navigation bar.
     label,
     badge = 0,
     class: className,
+    selected,
     iconProps,
     ...rest
   }: NavItemProps = $props();
 
   const isActive = $derived(
-    page.url.pathname === href ||
+    selected ||
+      page.url.pathname === href ||
       (href !== '/' && page.url.href.startsWith(href)) ||
       page.url.href == href
   );

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

@@ -17,6 +17,8 @@ export type NavItemProps = NavItemVariants & HTMLAttributes<HTMLAnchorElement> &
     href: string;
     /** Props passed to the Icon component. */
     iconProps: IconProps;
+    /** Whether the item is manually forced into a selected state. */
+    selected?: boolean;
 };
 /**
  * Props for the Navbar component.

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

@@ -28,7 +28,11 @@ Navigation rails provide access to primary destinations in apps when using table
   }: RailProps = $props();
 
   const expanded = $derived(!collapsed);
-  const railCtx = { get collapsed() { return collapsed; } };
+  const railCtx = {
+    get collapsed() {
+      return collapsed;
+    }
+  };
   setContext('rail', railCtx);
   const { base, items, ghost, scrim } = $derived(rail({ expanded, anchor, rounded }));
   const railBaseClass = $derived(`${base({ class: clsx(className) })} rail-base`);

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

@@ -15,7 +15,7 @@ A single destination within a navigation rail.
 
   let {
     href = '/',
-    name,
+    label,
     external = false,
     badge = 0,
     class: className,
@@ -99,7 +99,7 @@ A single destination within a navigation rail.
             {/if}
           </div>
           <p class={labelClass()}>
-            {name}
+            {label}
           </p>
         </div>
       </a>

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

@@ -17,7 +17,7 @@ export interface RailItemProps extends RailItemVariants, HTMLAttributes<HTMLAnch
     /** Whether the item is manually forced into a selected state. */
     selected?: boolean;
     /** The text label for the item. */
-    name: string;
+    label: string;
     /** Whether the rail is collapsed, affecting label visibility. */
     collapsed?: boolean;
     /** Whether the item is disabled. */

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

@@ -7,6 +7,10 @@ export declare const pill: import("tailwind-variants").TVReturnType<{
         tertiary: string;
         error: string;
         container: string;
+        'primary-container': string;
+        'secondary-container': string;
+        'tertiary-container': string;
+        'error-container': string;
         yellow: string;
         green: string;
     };
@@ -17,6 +21,10 @@ export declare const pill: import("tailwind-variants").TVReturnType<{
         tertiary: string;
         error: string;
         container: string;
+        'primary-container': string;
+        'secondary-container': string;
+        'tertiary-container': string;
+        'error-container': string;
         yellow: string;
         green: string;
     };
@@ -27,6 +35,10 @@ export declare const pill: import("tailwind-variants").TVReturnType<{
         tertiary: string;
         error: string;
         container: string;
+        'primary-container': string;
+        'secondary-container': string;
+        'tertiary-container': string;
+        'error-container': string;
         yellow: string;
         green: string;
     };

package/dist/components/pill/theme.js

@@ -8,6 +8,10 @@ export const pill = tv({
             tertiary: 'md-component-button-filled-tertiary',
             error: 'md-component-button-filled-error',
             container: 'bg-md-sys-color-surface-container text-md-sys-color-on-surface',
+            'primary-container': 'bg-md-sys-color-primary-container text-md-sys-color-on-primary-container',
+            'secondary-container': 'bg-md-sys-color-secondary-container text-md-sys-color-on-secondary-container',
+            'tertiary-container': 'bg-md-sys-color-tertiary-container text-md-sys-color-on-tertiary-container',
+            'error-container': 'bg-md-sys-color-error-container text-md-sys-color-on-error-container',
             yellow: 'bg-yellow-400 text-yellow-950 dark:bg-yellow-300 dark:text-yellow-950',
             green: 'bg-green-600 text-white dark:bg-green-500 dark:text-green-950'
         }

package/dist/components/toolbar/ToolbarButton.svelte

@@ -19,7 +19,9 @@ Color is inherited from the parent Toolbar via context.
     ...restProps
   }: ToolbarButtonProps = $props();
 
-  const toolbarCtx = getContext<{ color: ToolbarColor; orientation: string } | undefined>('toolbar');
+  const toolbarCtx = getContext<{ color: ToolbarColor; orientation: string } | undefined>(
+    'toolbar'
+  );
   const color = $derived(toolbarCtx?.color ?? 'standard');
   const { base, icon } = $derived(toolbarButton({ color }));
 </script>

package/dist/components/toolbar/ToolbarDivider.svelte

@@ -2,7 +2,9 @@
   import { getContext } from 'svelte';
   import { toolbar } from './theme.js';
 
-  const toolbarCtx = getContext<{ color: string; orientation: 'horizontal' | 'vertical' } | undefined>('toolbar');
+  const toolbarCtx = getContext<
+    { color: string; orientation: 'horizontal' | 'vertical' } | undefined
+  >('toolbar');
   const orientation = $derived(toolbarCtx?.orientation ?? 'horizontal');
   const cls = $derived(toolbar({ orientation }));
 

package/dist/components/toolbar/ToolbarGroupItem.svelte

@@ -21,7 +21,9 @@ Color is inherited from the parent Toolbar via context.
     ...restProps
   }: ToolbarGroupItemProps = $props();
 
-  const toolbarCtx = getContext<{ color: ToolbarColor; orientation: string } | undefined>('toolbar');
+  const toolbarCtx = getContext<{ color: ToolbarColor; orientation: string } | undefined>(
+    'toolbar'
+  );
   const color = $derived(toolbarCtx?.color ?? 'standard');
   const { base, icon } = $derived(toolbarGroupItem({ color }));
 </script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.1.30",
+  "version": "0.1.32",
   "type": "module",
   "license": "MIT",
   "repository": {