@noxlovette/material 0.7.0 → 0.7.1

package/dist/components/buttons/ButtonIcon.svelte

@@ -2,7 +2,7 @@
 @component
 Icon buttons help people take minor actions with one tap.
 
-- Filled: high emphasis (default)
+- Filled: high emphasis (default, except inside an `AppBar`, where it's standard)
 - Tonal: medium-high emphasis
 - Outlined: medium emphasis
 - Standard: low emphasis, no container at rest; for app bars, fields and dense layouts
@@ -17,12 +17,16 @@ Icon buttons help people take minor actions with one tap.
   import { buttonColor, buttonIcon } from './theme.js';
   import clsx from 'clsx';
   import { buttonCorners, shapeMorph } from './shapeMorph.js';
+  import { getButtonIconVariant } from './context.js';
   import Tooltip from '../forms/tooltip/Tooltip.svelte';
   import { Button, Toggle, type ButtonRootProps, type ToggleRootProps } from 'bits-ui';
 
+  // A container like AppBar can lower the default emphasis; an explicit `variant` still wins.
+  const inheritedVariant = getButtonIconVariant();
+
   let {
     iconProps,
-    variant = 'filled',
+    variant = inheritedVariant ?? 'filled',
     size = 'sm',
     shape = 'round',
     width = 'default',

package/dist/components/buttons/ButtonIcon.svelte.d.ts

@@ -2,7 +2,7 @@ import type { ButtonIconProps } from './types.js';
 /**
  * Icon buttons help people take minor actions with one tap.
  *
- * - Filled: high emphasis (default)
+ * - Filled: high emphasis (default, except inside an `AppBar`, where it's standard)
  * - Tonal: medium-high emphasis
  * - Outlined: medium emphasis
  * - Standard: low emphasis, no container at rest; for app bars, fields and dense layouts

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

@@ -0,0 +1,10 @@
+import type { ButtonIconProps } from './types.js';
+type ButtonIconVariant = NonNullable<ButtonIconProps['variant']>;
+/**
+ * Sets the variant a `ButtonIcon` below this component takes when it's given none, e.g. an
+ * app bar's `standard` (M3: icon buttons in app bars have no container). An explicit
+ * `variant` on the button always wins.
+ */
+export declare const setButtonIconVariant: (variant: ButtonIconVariant) => ButtonIconVariant;
+export declare const getButtonIconVariant: () => ButtonIconVariant | undefined;
+export {};

package/dist/components/buttons/context.js

@@ -0,0 +1,9 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('buttonIconVariant');
+/**
+ * Sets the variant a `ButtonIcon` below this component takes when it's given none, e.g. an
+ * app bar's `standard` (M3: icon buttons in app bars have no container). An explicit
+ * `variant` on the button always wins.
+ */
+export const setButtonIconVariant = (variant) => setContext(KEY, variant);
+export const getButtonIconVariant = () => getContext(KEY);

package/dist/components/nav/appbar/AppBar.svelte

@@ -17,6 +17,9 @@ Publishes its measured height as `--appbar-height` on the document root, so any
 that amount with no props or wiring on either side — see Pane.svelte's doc
 comment.
 
+A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
+`variant` to override.
+
 @see https://m3.material.io/components/app-bars/specs
 -->
 <script lang="ts">
@@ -24,6 +27,7 @@ comment.
   import type { AppBarProps } from './types.js';
   import clsx from 'clsx';
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
+  import { setButtonIconVariant } from '../../buttons/context.js';
 
   let {
     children,
@@ -48,6 +52,10 @@ comment.
     ...rest
   }: AppBarProps = $props();
 
+  // M3 app bar icon buttons are standard (no container); a filled one over-emphasizes a back or
+  // action button. Applies to buttons passed in `leading`/`trailing`/`children` too.
+  setButtonIconVariant('standard');
+
   let scrolled = $state(false);
   let barHeight = $state(64);
 

package/dist/components/nav/appbar/AppBar.svelte.d.ts

@@ -17,6 +17,9 @@ import type { AppBarProps } from './types.js';
  * that amount with no props or wiring on either side — see Pane.svelte's doc
  * comment.
  *
+ * A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
+ * `variant` to override.
+ *
  * @see https://m3.material.io/components/app-bars/specs
  */
 declare const AppBar: import("svelte").Component<AppBarProps, {}, "query">;

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

@@ -141,12 +141,23 @@ export const appbar = tv({
             // 1fr side columns centre a small bar's title on the bar, not between uneven button groups.
             center: { row: 'grid-cols-[1fr_auto_1fr]', textContainer: 'items-center text-center' }
         },
+        /*
+          From medium up, a Pane rounds its top corners (md:rounded-t-*) and sits as a surface card
+          on the App's surface-container, beside a surface-container Rail. The bar is part of that
+          chrome there, so it stays surface-container whether scrolled or not: a surface bar
+          would read as a strip glued over the card, with the App's colour showing through the
+          pane's corners beneath it. Below medium the pane is flat and full-bleed, so the bar keeps
+          M3's surface → surface-container on-scroll change.
+        */
         scrolled: {
             true: {
                 base: 'bg-md-sys-color-surface-container',
                 search: 'bg-md-sys-color-surface-container-highest'
             },
-            false: { base: 'bg-md-sys-color-surface', search: 'bg-md-sys-color-surface-container' }
+            false: {
+                base: 'bg-md-sys-color-surface md:bg-md-sys-color-surface-container',
+                search: 'bg-md-sys-color-surface-container md:bg-md-sys-color-surface-container-highest'
+            }
         },
         // Search app bar: the search container fills the text column, 8dp from the buttons.
         searchContainer: {

package/package.json

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