m3-svelte 5.7.2 → 5.8.0

package/package/buttons/Button.svelte

@@ -54,7 +54,14 @@
     {@render children()}
   </a>
 {:else if "summary" in props}
-  {@const { variant = "filled", square = false, iconType = "none", children, ...extra } = props}
+  {@const {
+    variant = "filled",
+    square = false,
+    iconType = "none",
+    children,
+    summary: _,
+    ...extra
+  } = props}
   <summary
     class="m3-container m3-font-label-large {variant} icon-{iconType}"
     class:square

package/package/buttons/FAB.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import Layer from "../misc/Layer.svelte";
   import type { ButtonAttrs } from "../misc/typing-utils";
 

package/package/buttons/SplitButton.svelte

@@ -2,7 +2,7 @@
   import iconExpand from "@ktibow/iconset-material-symbols/keyboard-arrow-down";
   import type { Snippet } from "svelte";
   import Layer from "../misc/Layer.svelte";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import type { ButtonAttrs } from "../misc/typing-utils";
 
   let {
@@ -43,7 +43,7 @@
   <details class="align-{x} align-{y}" use:autoclose>
     <summary class="split">
       <Layer />
-      <Icon icon={iconExpand} width="1.375rem" height="1.375rem" />
+      <Icon icon={iconExpand} size={22} />
     </summary>
     {@render menu()}
   </details>

package/package/containers/Dialog.svelte

@@ -2,7 +2,7 @@
   import type { IconifyIcon } from "@iconify/types";
   import type { HTMLDialogAttributes } from "svelte/elements";
   import type { Snippet } from "svelte";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
 
   let {
     icon,
@@ -64,7 +64,7 @@
   {...extra}
 >
   {#if icon}
-    <Icon {icon} width="1.5rem" height="1.5rem" />
+    <Icon {icon} size={24} />
   {/if}
   <p class="headline m3-font-headline-small" class:center={icon}>{headline}</p>
   <div class="content m3-font-body-medium">

package/package/containers/MenuItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import type { IconifyIcon } from "@iconify/types";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import Layer from "../misc/Layer.svelte";
 
   let {

package/package/containers/Snackbar.svelte

@@ -16,7 +16,7 @@
   import { onDestroy, type ComponentProps } from "svelte";
   import { fade } from "svelte/transition";
   import iconX from "@ktibow/iconset-material-symbols/close";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import SnackbarItem from "./SnackbarItem.svelte";
   import Layer from "../misc/Layer.svelte";
   import type { DivAttrs } from "../misc/typing-utils";

package/package/containers/StandardSideSheet.svelte

@@ -2,7 +2,7 @@
   import type { Snippet } from "svelte";
   import iconX from "@ktibow/iconset-material-symbols/close";
   import Button from "../buttons/Button.svelte";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
 
   let {
     headline,

package/package/forms/Chip.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import type { IconifyIcon } from "@iconify/types";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import Layer from "../misc/Layer.svelte";
   import type { LabelAttrs, AnchorAttrs, ButtonAttrs } from "../misc/typing-utils";
 

package/package/forms/DateField.svelte

@@ -3,7 +3,7 @@
   import type { HTMLInputAttributes } from "svelte/elements";
   import type { TransitionConfig } from "svelte/transition";
   import iconCalendar from "@ktibow/iconset-material-symbols/calendar-today-outline";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import Layer from "../misc/Layer.svelte";
 
   import DatePickerDocked from "./DatePickerDocked.svelte";
@@ -58,7 +58,14 @@ opacity: ${Math.min(t * 3, 1)};`,
   };
 </script>
 
-<div class="m3-container" class:has-js={hasJs} class:disabled class:error use:clickOutside>
+<div
+  class="m3-container"
+  class:has-js={hasJs}
+  class:disabled
+  class:error
+  use:clickOutside
+  style:--anchor-name="--{id}"
+>
   <input
     type="date"
     class="focus-none m3-font-body-large"
@@ -73,7 +80,7 @@ opacity: ${Math.min(t * 3, 1)};`,
   <label class="m3-font-body-small" for={id}>{label}</label>
   <button type="button" {disabled} title={datePickerTitle} onclick={() => (picker = !picker)}>
     <Layer />
-    <Icon icon={iconCalendar} width="1.5rem" height="1.5rem" />
+    <Icon icon={iconCalendar} size={24} />
   </button>
   {#if picker}
     <div class="picker" transition:enterExit>
@@ -88,6 +95,22 @@ opacity: ${Math.min(t * 3, 1)};`,
 </div>
 
 <style>
+  @position-try --picker-bottom-right {
+    position-area: bottom center;
+    justify-self: end;
+    margin-block-start: 1rem;
+  }
+  @position-try --picker-top-left {
+    position-area: top center;
+    justify-self: start;
+    margin-block-end: 1rem;
+  }
+  @position-try --picker-top-right {
+    position-area: top center;
+    justify-self: end;
+    margin-block-end: 1rem;
+  }
+
   :root {
     --m3-datefield-shape: var(--m3-util-rounding-extra-small);
   }
@@ -98,6 +121,7 @@ opacity: ${Math.min(t * 3, 1)};`,
     background-color: rgb(var(--m3-scheme-surface-container-highest));
     border-radius: var(--m3-datefield-shape) var(--m3-datefield-shape) 0 0;
     border-bottom: solid 1px rgb(var(--error, var(--m3-scheme-on-surface-variant)));
+    anchor-name: var(--anchor-name);
   }
   input {
     position: absolute;
@@ -164,9 +188,21 @@ opacity: ${Math.min(t * 3, 1)};`,
   }
 
   .picker {
-    position: absolute;
-    top: calc(100% + 1rem);
-    right: 0;
+    @supports not (anchor-name: --a) {
+      position: absolute;
+      top: calc(100% + 1rem);
+      right: 0;
+    }
+    @supports (anchor-name: --a) {
+      position: fixed;
+      position-anchor: var(--anchor-name);
+      /* Default */
+      position-area: bottom center;
+      justify-self: start;
+      margin-block-start: 1rem;
+      /* Alternatives */
+      position-try-fallbacks: --picker-bottom-right, --picker-top-left, --picker-top-right;
+    }
     z-index: 1;
   }
 

package/package/forms/DateFieldOutlined.svelte

@@ -3,7 +3,7 @@
   import type { HTMLInputAttributes } from "svelte/elements";
   import type { TransitionConfig } from "svelte/transition";
   import iconCalendar from "@ktibow/iconset-material-symbols/calendar-today-outline";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import Layer from "../misc/Layer.svelte";
 
   import DatePickerDocked from "./DatePickerDocked.svelte";
@@ -58,7 +58,14 @@ opacity: ${Math.min(t * 3, 1)};`,
   };
 </script>
 
-<div class="m3-container" class:has-js={hasJs} class:disabled class:error use:clickOutside>
+<div
+  class="m3-container"
+  class:has-js={hasJs}
+  class:disabled
+  class:error
+  use:clickOutside
+  style:--anchor-name="--{id}"
+>
   <input
     type="date"
     class="focus-none m3-font-body-large"
@@ -74,7 +81,7 @@ opacity: ${Math.min(t * 3, 1)};`,
   <label class="m3-font-body-small" for={id}>{label}</label>
   <button type="button" {disabled} title={datePickerTitle} onclick={() => (picker = !picker)}>
     <Layer />
-    <Icon icon={iconCalendar} width="1.5rem" height="1.5rem" />
+    <Icon icon={iconCalendar} size={24} />
   </button>
   {#if picker}
     <div class="picker" transition:enterExit>
@@ -89,6 +96,22 @@ opacity: ${Math.min(t * 3, 1)};`,
 </div>
 
 <style>
+  @position-try --picker-bottom-right {
+    position-area: bottom center;
+    justify-self: end;
+    margin-block-start: 1rem;
+  }
+  @position-try --picker-top-left {
+    position-area: top center;
+    justify-self: start;
+    margin-block-end: 1rem;
+  }
+  @position-try --picker-top-right {
+    position-area: top center;
+    justify-self: end;
+    margin-block-end: 1rem;
+  }
+
   /*
   want to customize the label's background?
   do this: <DateFieldOutlined --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
@@ -101,6 +124,7 @@ opacity: ${Math.min(t * 3, 1)};`,
     position: relative;
     height: calc(3.5rem + var(--m3-util-density-term));
     min-width: 15rem;
+    anchor-name: var(--anchor-name);
   }
   input {
     position: absolute;
@@ -211,9 +235,21 @@ opacity: ${Math.min(t * 3, 1)};`,
   }
 
   .picker {
-    position: absolute;
-    top: calc(100% + 1rem);
-    right: 0;
+    @supports not (anchor-name: --a) {
+      position: absolute;
+      top: calc(100% + 1rem);
+      right: 0;
+    }
+    @supports (anchor-name: --a) {
+      position: fixed;
+      position-anchor: var(--anchor-name);
+      /* Default */
+      position-area: bottom center;
+      justify-self: start;
+      margin-block-start: 1rem;
+      /* Alternatives */
+      position-try-fallbacks: --picker-bottom-right, --picker-top-left, --picker-top-right;
+    }
     z-index: 1;
   }
 

package/package/forms/Select.svelte

@@ -2,7 +2,7 @@
   import type { IconifyIcon } from "@iconify/types";
   import type { HTMLOptionAttributes, HTMLSelectAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
 
   type Option = { icon?: IconifyIcon; text: string; value: string } & HTMLOptionAttributes;
   let {
@@ -33,7 +33,7 @@
       <option class="focus-inset" {...extra}>
         <Layer />
         {#if icon}
-          <Icon {icon} width="1.5rem" height="1.5rem" />
+          <Icon {icon} size={24} />
         {/if}
         {@render render(text)}
       </option>

package/package/forms/SelectOutlined.svelte

@@ -2,7 +2,7 @@
   import type { IconifyIcon } from "@iconify/types";
   import type { HTMLOptionAttributes, HTMLSelectAttributes } from "svelte/elements";
   import Layer from "../misc/Layer.svelte";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
 
   type Option = { icon?: IconifyIcon; text: string; value: string } & HTMLOptionAttributes;
   let {
@@ -33,7 +33,7 @@
       <option class="focus-inset" {...extra}>
         <Layer />
         {#if icon}
-          <Icon {icon} width="1.5rem" height="1.5rem" />
+          <Icon {icon} size={24} />
         {/if}
         {@render render(text)}
       </option>

package/package/forms/Slider.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { HTMLInputAttributes } from "svelte/elements";
   import type { IconifyIcon } from "@iconify/types";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import { Spring } from "svelte/motion";
 
   let {

package/package/forms/Switch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import type { IconifyIcon } from "@iconify/types";
   import iconCheck from "@ktibow/iconset-material-symbols/check";
   import iconX from "@ktibow/iconset-material-symbols/close";

package/package/forms/TextField.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
   import type { HTMLInputAttributes } from "svelte/elements";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import Layer from "../misc/Layer.svelte";
   import type { ButtonAttrs } from "../misc/typing-utils";
 

package/package/forms/TextFieldMultiline.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import type { HTMLTextareaAttributes } from "svelte/elements";
 
   let {

package/package/forms/TextFieldOutlined.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
   import type { HTMLInputAttributes } from "svelte/elements";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import Layer from "../misc/Layer.svelte";
   import type { ButtonAttrs } from "../misc/typing-utils";
 

package/package/forms/TextFieldOutlinedMultiline.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import type { HTMLTextareaAttributes } from "svelte/elements";
 
   let {

package/package/forms/_picker/FocusPicker.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Icon from "../../misc/_icon.svelte";
+  import Icon from "../../misc/Icon.svelte";
   import Layer from "../../misc/Layer.svelte";
   import iconCheck from "@ktibow/iconset-material-symbols/check";
 

package/package/forms/_picker/Header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import Icon from "../../misc/_icon.svelte";
+  import Icon from "../../misc/Icon.svelte";
   import iconLeft from "@ktibow/iconset-material-symbols/chevron-left";
   import iconRight from "@ktibow/iconset-material-symbols/chevron-right";
   import iconDown from "@ktibow/iconset-material-symbols/arrow-drop-down";

package/package/index.d.ts

@@ -1,4 +1,4 @@
-export { default as Icon } from "./misc/_icon.svelte";
+export { default as Icon } from "./misc/Icon.svelte";
 export { default as Layer } from "./misc/Layer.svelte";
 export * from "./misc/animation.js";
 export * from "./misc/colors.js";

package/package/index.js

@@ -1,4 +1,4 @@
-export { default as Icon } from "./misc/_icon.svelte";
+export { default as Icon } from "./misc/Icon.svelte";
 export { default as Layer } from "./misc/Layer.svelte";
 export * from "./misc/animation.js";
 export * from "./misc/colors.js";

package/package/misc/{_icon.svelte → Icon.svelte}

@@ -1,25 +1,23 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
+  import type { SVGAttributes } from "svelte/elements";
 
   let {
     icon,
-    width = "1em",
-    height = "1em",
-    class: clazz,
+    size,
+    ...extra
   }: {
     icon: IconifyIcon;
-    width?: string;
-    height?: string;
-    class?: string;
-  } = $props();
+    size?: number;
+  } & Omit<SVGAttributes<SVGElement>, "width" | "height"> = $props();
 </script>
 
 <svg
-  {width}
-  {height}
-  class={clazz}
-  data-badge={icon.body.includes("<!--badge-->") ? "" : undefined}
+  width={size || "1em"}
+  height={size || "1em"}
   viewBox="0 0 {icon.width} {icon.height}"
+  data-badge={icon.body.includes("<!--badge-->") ? "" : undefined}
+  {...extra}
 >
   {@html icon.body}
 </svg>

package/package/misc/{_icon.svelte.d.ts → Icon.svelte.d.ts}

@@ -1,10 +1,9 @@
 import type { IconifyIcon } from "@iconify/types";
+import type { SVGAttributes } from "svelte/elements";
 type $$ComponentProps = {
     icon: IconifyIcon;
-    width?: string;
-    height?: string;
-    class?: string;
-};
+    size?: number;
+} & Omit<SVGAttributes<SVGElement>, "width" | "height">;
 declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;

package/package/misc/Layer.svelte

@@ -192,7 +192,7 @@
       :global(:disabled) > .tint
     ) {
       @media (hover: hover) {
-        &:is(:global(:hover) > .tint) {
+        &:is(:global(:hover) > .tint, :global(:active) > .tint) {
           opacity: 0.08;
         }
       }

package/package/misc/colors.js

@@ -21,6 +21,19 @@ const onPrimaryContainerSubtle = DynamicColor.fromPalette({
     background: () => primaryContainerSubtle,
     contrastCurve: () => new ContrastCurve(6, 6, 7, 11),
 });
+const secondaryContainerSubtle = DynamicColor.fromPalette({
+    name: "secondary_container_subtle",
+    palette: (s) => s.secondaryPalette,
+    isBackground: true,
+    background: (s) => materialColors.highestSurface(s),
+    contrastCurve: () => undefined,
+});
+const onSecondaryContainerSubtle = DynamicColor.fromPalette({
+    name: "on_secondary_container_subtle",
+    palette: (s) => s.secondaryPalette,
+    background: () => secondaryContainerSubtle,
+    contrastCurve: () => new ContrastCurve(6, 6, 7, 11),
+});
 const tertiaryContainerSubtle = DynamicColor.fromPalette({
     name: "tertiary_container_subtle",
     palette: (s) => s.tertiaryPalette,
@@ -54,6 +67,8 @@ export const colors = [
     onOnPrimary,
     primaryContainerSubtle,
     onPrimaryContainerSubtle,
+    secondaryContainerSubtle,
+    onSecondaryContainerSubtle,
     tertiaryContainerSubtle,
     onTertiaryContainerSubtle,
     errorContainerSubtle,

package/package/nav/NavCMLXItem.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
   import type { HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import Layer from "../misc/Layer.svelte";
 
   type ActionProps =
@@ -27,7 +27,7 @@
     <div class="content" class:selected>
       <Layer />
       <div class="icon">
-        <Icon {icon} width="1.5rem" height="1.5rem" />
+        <Icon {icon} size={24} />
       </div>
       {text}
     </div>
@@ -38,7 +38,7 @@
     <div class="content" class:selected>
       <Layer />
       <div class="icon">
-        <Icon {icon} width="1.5rem" height="1.5rem" />
+        <Icon {icon} size={24} />
       </div>
       {text}
     </div>

package/package/nav/Tabs.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
   import type { HTMLInputAttributes } from "svelte/elements";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import Layer from "../misc/Layer.svelte";
 
   let {

package/package/nav/TabsLink.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
   import type { HTMLAnchorAttributes } from "svelte/elements";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import Layer from "../misc/Layer.svelte";
 
   let {

package/package/nav/VariableTabs.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
   import type { HTMLInputAttributes } from "svelte/elements";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import Layer from "../misc/Layer.svelte";
 
   let {

package/package/nav/VariableTabsLink.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { IconifyIcon } from "@iconify/types";
   import type { HTMLAnchorAttributes } from "svelte/elements";
-  import Icon from "../misc/_icon.svelte";
+  import Icon from "../misc/Icon.svelte";
   import Layer from "../misc/Layer.svelte";
 
   let {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "5.7.2",
+  "version": "5.8.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -35,30 +35,30 @@
   },
   "dependencies": {
     "@iconify/types": "^2.0.0",
-    "@ktibow/iconset-material-symbols": "^0.0.1755063979",
-    "@ktibow/material-color-utilities-nightly": "^0.3.11756690739504",
-    "svelte": "^5.38.6"
+    "@ktibow/iconset-material-symbols": "^0.0.1758086573",
+    "@ktibow/material-color-utilities-nightly": "^0.3.11758221177000",
+    "svelte": "^5.39.4"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.3.2",
-    "@eslint/js": "^9.34.0",
+    "@eslint/compat": "^1.4.0",
+    "@eslint/js": "^9.36.0",
     "@sveltejs/adapter-static": "^3.0.9",
-    "@sveltejs/kit": "^2.37.0",
-    "@sveltejs/package": "^2.5.0",
-    "@sveltejs/vite-plugin-svelte": "^6.1.3",
-    "eslint": "^9.27.0",
+    "@sveltejs/kit": "^2.42.1",
+    "@sveltejs/package": "^2.5.3",
+    "@sveltejs/vite-plugin-svelte": "^6.2.0",
+    "eslint": "^9.35.0",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-svelte": "^3.11.0",
+    "eslint-plugin-svelte": "^3.12.3",
     "fast-glob": "^3.3.3",
-    "globals": "^16.3.0",
+    "globals": "^16.4.0",
     "prettier": "^3.6.2",
     "prettier-plugin-svelte": "^3.4.0",
-    "publint": "^0.3.12",
-    "svelte-check": "^4.3.1",
+    "publint": "^0.3.13",
+    "svelte-check": "^4.3.2",
     "svelte-highlight": "^7.8.4",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.41.0",
-    "vite": "^7.1.4"
+    "typescript-eslint": "^8.44.1",
+    "vite": "^7.1.7"
   },
   "keywords": [
     "svelte",