m3-svelte 4.3.3 → 4.5.0

package/package/buttons/Button.svelte

@@ -94,6 +94,7 @@
     border-radius: var(--m3-button-shape);
     transition:
       border-radius var(--m3-util-easing-fast-spatial),
+      box-shadow var(--m3-util-easing-fast),
       background-color var(--m3-util-easing-fast),
       color var(--m3-util-easing-fast);
 

package/package/buttons/SplitButton.svelte

@@ -0,0 +1,178 @@
+<script lang="ts">
+  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";
+
+  let {
+    variant,
+    x = "inner",
+    y = "down",
+    children,
+    menu,
+    click,
+  }: {
+    variant: "elevated" | "filled" | "tonal" | "outlined";
+    x?: "inner" | "right";
+    y?: "down" | "up";
+    children: Snippet;
+    menu: Snippet;
+    click: () => void;
+  } = $props();
+
+  const autoclose = (node: HTMLDetailsElement) => {
+    const close = (e: Event) => {
+      if (e.target instanceof Element && e.target.closest("summary")) return;
+
+      node.open = false;
+    };
+    window.addEventListener("click", close);
+    return {
+      destroy() {
+        window.removeEventListener("click", close);
+      },
+    };
+  };
+</script>
+
+<div class="m3-container {variant}">
+  <button class="split m3-font-label-large" onclick={click}>
+    <Layer />
+    {@render children()}
+  </button>
+  <details class="align-{x} align-{y}" use:autoclose>
+    <summary class="split">
+      <Layer />
+      <Icon icon={iconExpand} width="1.375rem" height="1.375rem" />
+    </summary>
+    {@render menu()}
+  </details>
+</div>
+
+<style>
+  :root {
+    --m3-split-button-outer-shape: 1.25rem;
+    --m3-split-button-half-shape: var(--m3-util-rounding-medium);
+    --m3-split-button-inner-shape: var(--m3-util-rounding-extra-small);
+  }
+
+  .m3-container {
+    display: inline-grid;
+    grid-template-columns: 1fr auto;
+    gap: 0.125rem;
+
+    &.elevated .split {
+      background-color: rgb(var(--m3-scheme-surface-container-low));
+      color: rgb(var(--m3-scheme-primary));
+      box-shadow: var(--m3-util-elevation-1);
+      &:hover {
+        box-shadow: var(--m3-util-elevation-2);
+      }
+    }
+
+    &.filled .split {
+      background-color: rgb(var(--m3-scheme-primary));
+      color: rgb(var(--m3-scheme-on-primary));
+    }
+
+    &.tonal .split {
+      background-color: rgb(var(--m3-scheme-secondary-container));
+      color: rgb(var(--m3-scheme-on-secondary-container));
+    }
+
+    &.outlined .split {
+      outline: 1px solid rgb(var(--m3-scheme-outline-variant));
+      outline-offset: -1px;
+      color: rgb(var(--m3-scheme-on-surface-variant));
+    }
+  }
+
+  .split {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 2.5rem;
+    gap: 0.5rem;
+
+    cursor: pointer;
+    background-color: transparent;
+    border: none;
+
+    position: relative;
+    transition:
+      box-shadow var(--m3-util-easing-fast),
+      border-radius var(--m3-util-easing-fast),
+      padding var(--m3-util-easing-fast);
+  }
+
+  button {
+    padding-inline-start: 1rem;
+    padding-inline-end: 0.75rem;
+    border-start-start-radius: var(--m3-split-button-outer-shape);
+    border-end-start-radius: var(--m3-split-button-outer-shape);
+    border-start-end-radius: var(--m3-split-button-inner-shape);
+    border-end-end-radius: var(--m3-split-button-inner-shape);
+    &:hover,
+    &:active {
+      border-start-end-radius: var(--m3-split-button-half-shape);
+      border-end-end-radius: var(--m3-split-button-half-shape);
+    }
+
+    > :global(svg) {
+      width: 1.25rem;
+      height: 1.25rem;
+    }
+  }
+
+  details {
+    display: flex;
+    position: relative;
+  }
+  summary {
+    padding-inline-start: 0.75rem;
+    padding-inline-end: 0.875rem;
+    border-start-start-radius: var(--m3-split-button-inner-shape);
+    border-end-start-radius: var(--m3-split-button-inner-shape);
+    &:hover,
+    &:active {
+      border-start-start-radius: var(--m3-split-button-half-shape);
+      border-end-start-radius: var(--m3-split-button-half-shape);
+    }
+    border-start-end-radius: var(--m3-split-button-outer-shape);
+    border-end-end-radius: var(--m3-split-button-outer-shape);
+    &:is(details[open] summary) {
+      padding-inline-start: 0.8125rem;
+      padding-inline-end: 0.8125rem;
+      border-radius: var(--m3-split-button-outer-shape);
+      > :global(.tint) {
+        opacity: 0.08;
+      }
+      > :global(svg) {
+        rotate: 180deg;
+      }
+    }
+    > :global(svg) {
+      transition: rotate var(--m3-util-easing-fast);
+    }
+  }
+  details > :global(:not(summary)) :global {
+    position: absolute !important;
+    &:is(details.align-inner > *) {
+      left: 0;
+    }
+    &:is(details.align-right > *) {
+      right: 0;
+    }
+    &:is(details.align-down > *) {
+      top: 100%;
+    }
+    &:is(details.align-up > *) {
+      bottom: 100%;
+    }
+  }
+
+  .m3-container {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+  }
+</style>

package/package/buttons/SplitButton.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    variant: "elevated" | "filled" | "tonal" | "outlined";
+    x?: "inner" | "right";
+    y?: "down" | "up";
+    children: Snippet;
+    menu: Snippet;
+    click: () => void;
+};
+declare const SplitButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type SplitButton = ReturnType<typeof SplitButton>;
+export default SplitButton;

package/package/forms/TextField.svelte

@@ -14,7 +14,7 @@
       };
 
   let {
-    name,
+    label: _label,
     leadingIcon,
     trailingIcon,
     trailingClick,
@@ -25,7 +25,7 @@
     enter,
     ...extra
   }: {
-    name: string;
+    label: string;
     leadingIcon?: IconifyIcon;
     disabled?: boolean;
     required?: boolean;
@@ -35,6 +35,8 @@
   } & TrailingProps &
     HTMLInputAttributes = $props();
   const id = crypto.randomUUID();
+
+  let label = $derived(_label || extra.name); // TODO: next breaking version, drop name backsupport
 </script>
 
 <div
@@ -53,7 +55,7 @@
     {required}
     {...extra}
   />
-  <label class="m3-font-body-large" for={id}>{name}</label>
+  <label class="m3-font-body-large" for={id}>{label}</label>
   <div class="layer"></div>
   {#if leadingIcon}
     <Icon icon={leadingIcon} class="leading" />

package/package/forms/TextField.svelte.d.ts

@@ -8,7 +8,7 @@ type TrailingProps = {
     trailingClick?: undefined;
 };
 type $$ComponentProps = {
-    name: string;
+    label: string;
     leadingIcon?: IconifyIcon;
     disabled?: boolean;
     required?: boolean;

package/package/forms/TextFieldMultiline.svelte

@@ -4,7 +4,7 @@
   import type { HTMLTextareaAttributes } from "svelte/elements";
 
   let {
-    name,
+    label: _label,
     leadingIcon,
     disabled = false,
     required = false,
@@ -12,7 +12,7 @@
     value = $bindable(""),
     ...extra
   }: {
-    name: string;
+    label: string;
     leadingIcon?: IconifyIcon;
     disabled?: boolean;
     required?: boolean;
@@ -34,6 +34,8 @@
       },
     };
   };
+
+  let label = $derived(_label || extra.name); // TODO: next breaking version, drop name backsupport
 </script>
 
 <div class="m3-container" class:leading-icon={leadingIcon} class:error use:resize>
@@ -46,7 +48,7 @@
     {required}
     {...extra}
   ></textarea>
-  <label class="m3-font-body-large" for={id}>{name}</label>
+  <label class="m3-font-body-large" for={id}>{label}</label>
   <div class="layer"></div>
   {#if leadingIcon}
     <Icon icon={leadingIcon} />

package/package/forms/TextFieldMultiline.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { IconifyIcon } from "@iconify/types";
 import type { HTMLTextareaAttributes } from "svelte/elements";
 type $$ComponentProps = {
-    name: string;
+    label: string;
     leadingIcon?: IconifyIcon;
     disabled?: boolean;
     required?: boolean;

package/package/forms/TextFieldOutlined.svelte

@@ -14,7 +14,7 @@
       };
 
   let {
-    name,
+    label: _label,
     leadingIcon,
     trailingIcon,
     trailingClick,
@@ -25,7 +25,7 @@
     enter,
     ...extra
   }: {
-    name: string;
+    label: string;
     leadingIcon?: IconifyIcon;
     disabled?: boolean;
     required?: boolean;
@@ -35,6 +35,8 @@
   } & TrailingProps &
     HTMLInputAttributes = $props();
   const id = crypto.randomUUID();
+
+  let label = $derived(_label || extra.name); // TODO: next breaking version, drop name backsupport
 </script>
 
 <div
@@ -54,7 +56,7 @@
     {...extra}
   />
   <div class="layer"></div>
-  <label class="m3-font-body-large" for={id}>{name}</label>
+  <label class="m3-font-body-large" for={id}>{label}</label>
   {#if leadingIcon}
     <Icon icon={leadingIcon} class="leading" />
   {/if}

package/package/forms/TextFieldOutlined.svelte.d.ts

@@ -8,7 +8,7 @@ type TrailingProps = {
     trailingClick?: undefined;
 };
 type $$ComponentProps = {
-    name: string;
+    label: string;
     leadingIcon?: IconifyIcon;
     disabled?: boolean;
     required?: boolean;

package/package/forms/TextFieldOutlinedMultiline.svelte

@@ -4,7 +4,7 @@
   import type { HTMLTextareaAttributes } from "svelte/elements";
 
   let {
-    name,
+    label: _label,
     leadingIcon,
     disabled = false,
     required = false,
@@ -12,7 +12,7 @@
     value = $bindable(""),
     ...extra
   }: {
-    name: string;
+    label: string;
     leadingIcon?: IconifyIcon;
     disabled?: boolean;
     required?: boolean;
@@ -34,6 +34,8 @@
       },
     };
   };
+
+  let label = $derived(_label || extra.name); // TODO: next breaking version, drop name backsupport
 </script>
 
 <div class="m3-container" class:leading-icon={leadingIcon} class:error use:resize>
@@ -47,7 +49,7 @@
     {...extra}
   ></textarea>
   <div class="layer"></div>
-  <label class="m3-font-body-large" for={id}>{name}</label>
+  <label class="m3-font-body-large" for={id}>{label}</label>
   {#if leadingIcon}
     <Icon icon={leadingIcon} />
   {/if}

package/package/forms/TextFieldOutlinedMultiline.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { IconifyIcon } from "@iconify/types";
 import type { HTMLTextareaAttributes } from "svelte/elements";
 type $$ComponentProps = {
-    name: string;
+    label: string;
     leadingIcon?: IconifyIcon;
     disabled?: boolean;
     required?: boolean;

package/package/index.d.ts

@@ -7,6 +7,7 @@ export * from "./misc/easing.js";
 export { default as Button } from "./buttons/Button.svelte";
 export { default as ConnectedButtons } from "./buttons/ConnectedButtons.svelte";
 export { default as FAB } from "./buttons/FAB.svelte";
+export { default as SplitButton } from "./buttons/SplitButton.svelte";
 export { default as TogglePrimitive } from "./buttons/TogglePrimitive.svelte";
 export { default as BottomSheet } from "./containers/BottomSheet.svelte";
 export { default as Card } from "./containers/Card.svelte";

package/package/index.js

@@ -7,6 +7,7 @@ export * from "./misc/easing.js";
 export { default as Button } from "./buttons/Button.svelte";
 export { default as ConnectedButtons } from "./buttons/ConnectedButtons.svelte";
 export { default as FAB } from "./buttons/FAB.svelte";
+export { default as SplitButton } from "./buttons/SplitButton.svelte";
 export { default as TogglePrimitive } from "./buttons/TogglePrimitive.svelte";
 export { default as BottomSheet } from "./containers/BottomSheet.svelte";
 export { default as Card } from "./containers/Card.svelte";

package/package/misc/colors.js

@@ -49,6 +49,7 @@ const onErrorContainerSubtle = DynamicColor.fromPalette({
 });
 export const colors = [
     ...materialColors.allColors,
+    materialColors.shadow(),
     onOnPrimary,
     primaryContainerSubtle,
     onPrimaryContainerSubtle,

package/package/utils/DateField.svelte

@@ -10,13 +10,13 @@
   import { easeEmphasized } from "../misc/easing";
 
   let {
-    name,
+    label: _label,
     date = $bindable(""),
     required = false,
     disabled = false,
     ...extra
   }: {
-    name: string;
+    label: string;
     date?: string;
     required?: boolean;
     disabled?: boolean;
@@ -52,6 +52,8 @@ transform: scaleY(${(t * 0.3 + 0.7) * 100}%);
 opacity: ${Math.min(t * 3, 1)};`,
     };
   };
+
+  let label = $derived(_label || extra.name); // TODO: next breaking version, drop name backsupport
 </script>
 
 <div class="m3-container" class:has-js={hasJs} class:disabled use:clickOutside>
@@ -64,7 +66,7 @@ opacity: ${Math.min(t * 3, 1)};`,
     bind:value={date}
     {...extra}
   />
-  <label class="m3-font-body-small" for={id}>{name}</label>
+  <label class="m3-font-body-small" for={id}>{label}</label>
   <button type="button" {disabled} onclick={() => (picker = !picker)}>
     <Layer />
     <Icon icon={iconCalendar} />

package/package/utils/DateField.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { HTMLInputAttributes } from "svelte/elements";
 type $$ComponentProps = {
-    name: string;
+    label: string;
     date?: string;
     required?: boolean;
     disabled?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "4.3.3",
+  "version": "4.5.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -30,29 +30,29 @@
   },
   "dependencies": {
     "@iconify/types": "^2.0.0",
-    "@ktibow/iconset-material-symbols": "^0.0.1749705809",
-    "@ktibow/material-color-utilities-nightly": "^0.3.11750037236983",
-    "svelte": "^5.34.3"
+    "@ktibow/iconset-material-symbols": "^0.0.1750223537",
+    "@ktibow/material-color-utilities-nightly": "^0.3.11750642744987",
+    "svelte": "^5.34.7"
   },
   "devDependencies": {
     "@eslint/compat": "^1.3.0",
     "@eslint/js": "^9.29.0",
     "@sveltejs/adapter-static": "^3.0.8",
-    "@sveltejs/kit": "^2.21.5",
+    "@sveltejs/kit": "^2.22.0",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.1.0",
     "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "^3.9.2",
+    "eslint-plugin-svelte": "^3.9.3",
     "fast-glob": "^3.3.3",
     "globals": "^16.2.0",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.0",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.12",
-    "svelte-check": "^4.2.1",
+    "svelte-check": "^4.2.2",
     "svelte-highlight": "^7.8.3",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.34.1",
+    "typescript-eslint": "^8.35.0",
     "vite": "^6.3.5"
   },
   "keywords": [