@noxlovette/material 0.7.1 → 0.8.1

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

@@ -8,7 +8,8 @@ They’re used for branding, screen titles, navigation, and actions.
 Sizes: `small` (64dp, one line) and the Expressive `medium`/`large` flexible bars, whose
 headline block wraps and grows. `size` also takes one value per breakpoint
 (`{ small: 'small', large: 'large' }`), switched in CSS so server rendering needs no JS.
-`align="center"` centres the title. Setting `search` makes it a search app bar.
+`align="center"` centres the title. Setting `search` makes it a search app bar; add
+`searchResults` and selecting the field opens the search view, as with `Search`.
 
 The bar takes its on-scroll color once `scrollContainer` (default: the page) scrolls.
 
@@ -28,6 +29,7 @@ A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
   import clsx from 'clsx';
   import ButtonIcon from '../../buttons/ButtonIcon.svelte';
   import { setButtonIconVariant } from '../../buttons/context.js';
+  import SearchView from '../../forms/search/SearchView.svelte';
 
   let {
     children,
@@ -47,6 +49,9 @@ A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
     query = $bindable(''),
     searchProps,
     searchTrailing,
+    searchResults,
+    searchOpen = $bindable(false),
+    searchLayout,
     scrollContainer,
     ghost = false,
     ...rest
@@ -69,6 +74,33 @@ A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
   });
 
   const isSearch = $derived(search !== undefined);
+
+  let searchBar = $state<HTMLElement>();
+
+  // Same as Search: click, typing or ↓ opens the view; focus alone doesn't.
+  const opener = $derived(
+    searchResults
+      ? {
+          'aria-haspopup': 'dialog' as const,
+          'aria-expanded': searchOpen,
+          onclick: (e: MouseEvent & { currentTarget: HTMLInputElement }) => {
+            searchProps?.onclick?.(e);
+            if (!e.defaultPrevented) searchOpen = true;
+          },
+          oninput: (e: Event & { currentTarget: HTMLInputElement }) => {
+            searchProps?.oninput?.(e);
+            if (!e.defaultPrevented) searchOpen = true;
+          },
+          onkeydown: (e: KeyboardEvent & { currentTarget: HTMLInputElement }) => {
+            searchProps?.onkeydown?.(e);
+            if (!e.defaultPrevented && e.key === 'ArrowDown') {
+              e.preventDefault();
+              searchOpen = true;
+            }
+          }
+        }
+      : {}
+  );
   const noLeading = $derived(!leading && !showBack);
 
   const s = $derived(
@@ -118,10 +150,11 @@ A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
         {#if title}
           <h1 {...titleProps} class={clsx('sr-only', titleProps?.class)}>{title}</h1>
         {/if}
-        <label class={s.search()}>
+        <label class={s.search()} bind:this={searchBar}>
           <input
             type="search"
             {...searchProps}
+            {...opener}
             placeholder={search}
             aria-label={searchProps?.['aria-label'] ?? search}
             bind:value={query}
@@ -156,6 +189,18 @@ A `ButtonIcon` anywhere inside it defaults to `variant="standard"`, per M3; pass
   {/if}
 </nav>
 
+{#if isSearch && searchResults}
+  <SearchView
+    bind:open={searchOpen}
+    bind:value={query}
+    anchor={searchBar}
+    results={searchResults}
+    layout={searchLayout}
+    placeholder={search}
+    trailing={searchTrailing}
+  />
+{/if}
+
 {#if ghost}
   <div class={s.ghost()} style="height: {barHeight}px" aria-hidden="true"></div>
 {/if}

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

@@ -8,7 +8,8 @@ import type { AppBarProps } from './types.js';
  * Sizes: `small` (64dp, one line) and the Expressive `medium`/`large` flexible bars, whose
  * headline block wraps and grows. `size` also takes one value per breakpoint
  * (`{ small: 'small', large: 'large' }`), switched in CSS so server rendering needs no JS.
- * `align="center"` centres the title. Setting `search` makes it a search app bar.
+ * `align="center"` centres the title. Setting `search` makes it a search app bar; add
+ * `searchResults` and selecting the field opens the search view, as with `Search`.
  *
  * The bar takes its on-scroll color once `scrollContainer` (default: the page) scrolls.
  *
@@ -22,6 +23,6 @@ import type { AppBarProps } from './types.js';
  *
  * @see https://m3.material.io/components/app-bars/specs
  */
-declare const AppBar: import("svelte").Component<AppBarProps, {}, "query">;
+declare const AppBar: import("svelte").Component<AppBarProps, {}, "query" | "searchOpen">;
 type AppBar = ReturnType<typeof AppBar>;
 export default AppBar;

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

@@ -131,7 +131,7 @@ export const appbar = tv({
         subtitle: 'text-md-sys-color-on-surface-variant',
         leading: 'text-md-sys-color-on-surface col-start-1 row-start-1 flex shrink-0 items-center justify-self-start',
         trailing: 'text-md-sys-color-on-surface-variant col-start-3 row-start-1 flex shrink-0 items-center justify-self-end',
-        search: 'state-layer relative flex h-spacing-700 w-full min-w-spacing-0 cursor-text items-center rounded-full ps-spacing-200 pe-spacing-200 transition-colors md-sys-motion-effects before:rounded-full hover:before:bg-md-sys-color-on-surface/8 focus-within:outline-3 focus-within:outline-offset-2 focus-within:outline-md-sys-color-secondary',
+        search: 'state-layer relative flex h-spacing-700 w-full min-w-spacing-0 cursor-text items-center rounded-xl ps-spacing-200 pe-spacing-200 transition-colors md-sys-motion-effects before:rounded-xl hover:before:bg-md-sys-color-on-surface/8 focus-within:outline-3 focus-within:outline-offset-2 focus-within:outline-md-sys-color-secondary [:root:active-view-transition_&]:outline-0',
         searchInput: 'md-sys-typescale-body-large text-md-sys-color-on-surface placeholder:text-md-sys-color-on-surface-variant w-full min-w-spacing-0 bg-transparent text-start outline-none placeholder-shown:text-center [&::-webkit-search-cancel-button]:hidden',
         searchTrailing: 'text-md-sys-color-on-surface-variant flex shrink-0 items-center'
     },

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

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLAttributes, HTMLInputAttributes } from 'svelte/elements';
 import type { Responsive } from '../../containers/pane/theme.js';
+import type { SearchLayout, SearchResultsProps } from '../../forms/search/types.js';
 import type { AppBarSize, AppbarVariants } from './theme.js';
 type AppBarBaseProps = Pick<AppbarVariants, 'align'> & HTMLAttributes<HTMLElementTagNameMap['nav']> & {
     /** Extra content rendered in a full-width row below the title, e.g. a Breadcrumb trail. */
@@ -43,6 +44,9 @@ export type TitleAppBarProps = AppBarBaseProps & {
     query?: never;
     searchProps?: never;
     searchTrailing?: never;
+    searchResults?: never;
+    searchOpen?: never;
+    searchLayout?: never;
 };
 /** A search app bar: a search field in place of the title, always 64dp. */
 export type SearchAppBarProps = AppBarBaseProps & {
@@ -54,8 +58,21 @@ export type SearchAppBarProps = AppBarBaseProps & {
     title?: string;
     /** Props for the search `<input>`, e.g. `onfocus` to open a search view. */
     searchProps?: HTMLInputAttributes;
-    /** An action inside the search field, e.g. a mic icon button. */
+    /** An action inside the search field, e.g. a mic icon button. Also shown in the search view. */
     searchTrailing?: Snippet;
+    /**
+     * Suggestions and results. Setting it gives the bar a search view (`SearchView`), opened by
+     * clicking or typing in the field. Spread the snippet's argument onto a `List` of
+     * `role="option"` items.
+     */
+    searchResults?: Snippet<[SearchResultsProps]>;
+    /** Whether the search view is open. Only has an effect with `searchResults`. */
+    searchOpen?: boolean;
+    /**
+     * The search view's layout, one value or one per window tier.
+     * @default { small: 'fullScreen', medium: 'docked' }
+     */
+    searchLayout?: Responsive<SearchLayout>;
     size?: never;
 };
 /**

package/dist/components/table/theme.js

@@ -1,7 +1,9 @@
 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',
+        // `isolate` scopes the sticky head's z-10 to the table, so it only covers the rows
+        // scrolling beneath it and never app bars, menus or sheets outside the table.
+        root: 'isolate w-full border-collapse text-left md-sys-typescale-body-medium text-md-sys-color-on-surface',
         head: '',
         body: '[&_tr:last-child]:border-b-0',
         foot: 'border-t border-md-sys-color-outline-variant',

package/dist/components/time/TimeField.svelte

@@ -98,10 +98,7 @@ It combines a Material 3 Textfield with a TimepickerInput for intuitive time sel
         <div {...wrapperProps}>
           <div
             {...props}
-            class={[
-              props.class,
-              'max-h-(--bits-floating-available-height) min-w-(--bits-floating-anchor-width) overflow-auto'
-            ]}
+            class={[props.class, 'min-w-(--bits-floating-anchor-width)']}
             {@attach presence(() => open, enterExit.scale)}
           >
             <TimepickerInput

package/dist/styles/components.css

@@ -11,6 +11,12 @@
   --md-comp-nav-rail-expanded-top-space: 2.75rem; /* 44dp */
   --md-comp-nav-rail-expanded-container-width-minimum: 13.75rem; /* 220dp */
   --md-comp-nav-rail-expanded-container-width-maximum: 22.5rem; /* 360dp */
+
+  /* Search view, contained style, docked layout: https://m3.material.io/components/search/specs */
+  --md-comp-search-view-contained-docked-container-width-minimum: 22.5rem; /* 360dp */
+  --md-comp-search-view-contained-docked-container-width-maximum: 45rem; /* 720dp */
+  --md-comp-search-view-contained-docked-container-height-minimum: 15rem; /* 240dp */
+  --md-comp-search-view-contained-docked-container-height-maximum: calc(100dvh * 2 / 3);
 }
 
 /*

package/dist/styles/icon-font.css

@@ -0,0 +1,17 @@
+/*
+  Optional, for `<App iconProviderProps={{ selfHosted: true }}>`. Google's stylesheet normally
+  binds each `.material-symbols-*` class to its font family; a self-hoster imports this instead and
+  writes only the `@font-face` rules (variable, with the opsz, wght, FILL and GRAD axes).
+  The rest of the class metrics (line-height, ligatures, smoothing…) ship in `./styles`.
+*/
+.material-symbols-rounded {
+  font-family: 'Material Symbols Rounded';
+}
+
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
+}
+
+.material-symbols-sharp {
+  font-family: 'Material Symbols Sharp';
+}

package/dist/styles/motion.css

@@ -331,3 +331,38 @@
   transition-duration: var(--md-sys-motion-duration-slow-effects-spring);
   transition-timing-function: var(--md-sys-motion-timing-function-slow-effects-spring);
 }
+
+/*
+  Container transform (animation/containerTransform.ts): both snapshots keep their own width and
+  sit at the container's top, clipped by it as it grows or shrinks. Motion's crop would otherwise
+  `object-fit: cover` them, which blows a short bar's snapshot up to the height of a full view.
+  Motion injects its per-name rule at runtime, after this sheet and at the same specificity, so
+  these need `!important` to win.
+*/
+::view-transition-old(.md-container-transform),
+::view-transition-new(.md-container-transform) {
+  top: 0 !important;
+  width: 100% !important;
+  height: auto !important;
+  object-fit: fill !important;
+}
+
+/*
+  Outgoing on top, fading off the incoming snapshot underneath, which stays opaque. Normal
+  blending: the browser runs `plus-lighter` on the pair as an animation, which only
+  `!important` outranks, and adding the outgoing bar onto the opaque view flashed it white.
+  The incoming snapshot also drops the browser's default fade-in.
+*/
+::view-transition-old(.md-container-transform) {
+  z-index: 1;
+  mix-blend-mode: normal !important;
+}
+::view-transition-new(.md-container-transform) {
+  mix-blend-mode: normal !important;
+  animation-name: none !important;
+}
+
+/* Filled with the destination's own background while it morphs (set by containerTransform). */
+::view-transition-group(.md-container-transform) {
+  background-color: var(--md-container-transform-color, transparent);
+}

package/dist/utils/icon/MaterialSymbolsProvider.svelte

@@ -2,12 +2,16 @@
 @component
 A helper that handles google icons. Should not be used directly.
 Use the App.svelte component instead
+
+With `selfHosted` it renders nothing, so no request goes to fonts.googleapis.com. The consumer then
+supplies the `@font-face` rules; see `@noxlovette/material/styles/icon-font.css`.
 -->
 <script lang="ts">
   import { baseIcons } from './base-icons.js';
   import type { MaterialSymbolsProviderProps } from './types.js';
 
   const {
+    selfHosted = false,
     extraIcons = [],
     display = 'swap',
     subset = true,
@@ -41,5 +45,7 @@ Use the App.svelte component instead
 </script>
 
 <svelte:head>
-  <link rel="stylesheet" {href} />
+  {#if !selfHosted}
+    <link rel="stylesheet" {href} />
+  {/if}
 </svelte:head>

package/dist/utils/icon/MaterialSymbolsProvider.svelte.d.ts

@@ -2,6 +2,9 @@ import type { MaterialSymbolsProviderProps } from './types.js';
 /**
  * A helper that handles google icons. Should not be used directly.
  * Use the App.svelte component instead
+ *
+ * With `selfHosted` it renders nothing, so no request goes to fonts.googleapis.com. The consumer then
+ * supplies the `@font-face` rules; see `@noxlovette/material/styles/icon-font.css`.
  */
 declare const MaterialSymbolsProvider: import("svelte").Component<MaterialSymbolsProviderProps, {}, "">;
 type MaterialSymbolsProvider = ReturnType<typeof MaterialSymbolsProvider>;

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

@@ -59,6 +59,17 @@ export type LoadingIndicatorProps = HTMLAttributes<SVGAElement> & LoadingIndicat
     center?: boolean;
 };
 export type MaterialSymbolsProviderProps = {
+    /**
+     * Skip the Google Fonts `<link>` so the page makes no request to `fonts.googleapis.com`, and
+     * supply the font yourself. Define an `@font-face` for each family in use (`"Material Symbols
+     * Rounded"`, `"Material Symbols Outlined"`, `"Material Symbols Sharp"`), variable, with the
+     * `opsz`, `wght`, `FILL` and `GRAD` axes that `Icon` sets through `font-variation-settings`, and
+     * import `@noxlovette/material/styles/icon-font.css` for the `font-family` of each
+     * `.material-symbols-*` class. The remaining class metrics ship with `@noxlovette/material/styles`.
+     * With this set, `icons`, `extraIcons`, `subset`, `families` and `display` have no effect.
+     * @default false
+     */
+    selfHosted?: boolean;
     icons?: MaterialSymbolName[];
     /** Icon names to load on top of `baseIcons`. Ignored when `subset` is false. */
     extraIcons?: MaterialSymbolName[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noxlovette/material",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "type": "module",
   "description": "A Material Design 3 component library for Svelte, built on Bits UI.",
   "keywords": [
@@ -57,6 +57,7 @@
       "svelte": "./dist/index.js"
     },
     "./styles": "./dist/index.css",
+    "./styles/icon-font.css": "./dist/styles/icon-font.css",
     "./theme/*": "./dist/styles/theme/*.css"
   },
   "peerDependencies": {