@noxlovette/material 0.1.31 → 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/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/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.31",
+  "version": "0.1.32",
   "type": "module",
   "license": "MIT",
   "repository": {