@noxlovette/material 0.8.0 → 0.8.1

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/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/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.8.0",
+  "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": {