@noxlovette/material 0.8.0 → 0.8.2

package/dist/components/misc/materialAvatarPalette.js

@@ -15,8 +15,24 @@ const CONTAINER_TOKENS = [
 ];
 /** Used server-side, or if a token hasn't been painted yet (styles not loaded). */
 const FALLBACK_PALETTE = ['e9ddff', 'e8def8', 'ffd9e3', 'ffdad6', 'e6e0e9'];
-/** Converts the `rgb(r g b)` (or `rgb(r, g, b)`) format these tokens are always defined in to hex. */
-function rgbStringToHex(value) {
+/**
+ * Converts a token's resolved value to a 6-digit hex. Dev serves the tokens as written in the
+ * theme CSS, `rgb(r g b)` (or `rgb(r, g, b)`), but a production build's CSS minifier rewrites
+ * them to hex (`#d1e5f3`, or the short `#fff`): pulling the numbers out of a hex string reads
+ * its digit runs as channels and yields a near-black colour, so hex is handled on its own.
+ */
+function colorToHex(value) {
+    const hex = value.match(/^#([0-9a-f]{3,8})$/i)?.[1];
+    if (hex) {
+        if (hex.length === 3 || hex.length === 4) {
+            return [...hex.slice(0, 3)]
+                .map((c) => c + c)
+                .join('')
+                .toLowerCase();
+        }
+        // 6 digits, or 8 with alpha (dropped: DiceBear takes opaque backgrounds).
+        return hex.length === 6 || hex.length === 8 ? hex.slice(0, 6).toLowerCase() : undefined;
+    }
     const channels = value.match(/\d+(?:\.\d+)?/g);
     if (!channels || channels.length < 3)
         return undefined;
@@ -38,7 +54,7 @@ export function getMaterialAvatarPalette() {
     const styles = getComputedStyle(document.documentElement);
     const palette = CONTAINER_TOKENS.map((token) => {
         const raw = styles.getPropertyValue(token).trim();
-        return raw ? rgbStringToHex(raw) : undefined;
+        return raw ? colorToHex(raw) : undefined;
     }).filter((hex) => Boolean(hex));
     return palette.length > 0 ? palette : FALLBACK_PALETTE;
 }

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.2",
   "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": {