m3-svelte 4.5.4 → 4.5.6

package/package/buttons/TogglePrimitive.svelte

@@ -13,7 +13,7 @@
     round?: boolean;
     children: Snippet;
   } = $props();
-  const id = crypto.randomUUID();
+  const id = $props.id();
 </script>
 
 <input type="checkbox" {id} bind:checked={toggle} />

package/package/containers/Dialog.svelte

@@ -36,6 +36,7 @@
 </script>
 
 <dialog
+  class="m3-container"
   oncancel={(e) => {
     if (closeOnEsc) {
       onEsc?.();
@@ -54,9 +55,9 @@
   bind:this={dialog}
   {...extra}
 >
-  <div class="m3-container">
+  <div class="d">
     {#if icon}
-      <Icon {icon} />
+      <Icon {icon} width="1.5rem" height="1.5rem" />
     {/if}
     <p class="headline m3-font-headline-small" class:center={icon}>{headline}</p>
     <div class="content m3-font-body-medium">
@@ -74,6 +75,7 @@
   }
   dialog {
     display: flex;
+    flex-direction: column;
     background-color: rgb(var(--m3-scheme-surface-container-high));
     border: none;
     border-radius: var(--m3-dialog-shape);
@@ -82,17 +84,13 @@
     padding: 0;
     overflow: auto;
   }
-  .m3-container {
+  .d {
     display: flex;
     flex-direction: column;
     padding: 1.5rem;
-    width: 100%;
   }
-
-  .m3-container > :global(svg) {
+  .d > :global(svg) {
     color: rgb(var(--m3-scheme-secondary));
-    width: 1.5rem;
-    height: 1.5rem;
 
     flex-shrink: 0;
     align-self: center;

package/package/forms/TextField.svelte

@@ -34,7 +34,7 @@
     enter?: () => void;
   } & TrailingProps &
     HTMLInputAttributes = $props();
-  const id = crypto.randomUUID();
+  const id = $props.id();
 
   let label = $derived(_label || extra.name); // TODO: next breaking version, drop name backsupport
 </script>

package/package/forms/TextFieldMultiline.svelte

@@ -19,7 +19,7 @@
     error?: boolean;
     value?: string;
   } & HTMLTextareaAttributes = $props();
-  const id = crypto.randomUUID();
+  const id = $props.id();
   const resize = (node: HTMLElement) => {
     const update = () => {
       const textarea = node.firstElementChild as HTMLTextAreaElement;

package/package/forms/TextFieldOutlined.svelte

@@ -34,7 +34,7 @@
     enter?: () => void;
   } & TrailingProps &
     HTMLInputAttributes = $props();
-  const id = crypto.randomUUID();
+  const id = $props.id();
 
   let label = $derived(_label || extra.name); // TODO: next breaking version, drop name backsupport
 </script>

package/package/forms/TextFieldOutlinedMultiline.svelte

@@ -19,7 +19,7 @@
     error?: boolean;
     value?: string;
   } & HTMLTextareaAttributes = $props();
-  const id = crypto.randomUUID();
+  const id = $props.id();
   const resize = (node: HTMLElement) => {
     const update = () => {
       const textarea = node.firstElementChild as HTMLTextAreaElement;

package/package/misc/styles.css

@@ -302,3 +302,7 @@ or for very small text in the content body, such as captions. */
 a.m3-container {
   text-decoration: none;
 }
+.m3-container dialog,
+dialog.m3-container {
+  margin: auto;
+}

package/package/nav/Tabs.svelte

@@ -18,7 +18,7 @@
       value: string;
     }[];
   } & HTMLInputAttributes = $props();
-  const name = crypto.randomUUID();
+  const name = $props.id();
 </script>
 
 <div class="m3-container" class:primary={!secondary} style:--items={items.length}>

package/package/nav/VariableTabs.svelte

@@ -19,7 +19,7 @@
     }[];
   } & HTMLInputAttributes = $props();
 
-  const name = crypto.randomUUID();
+  const name = $props.id();
   let wrapper: HTMLDivElement | undefined = $state();
   const handleInput = (e: Event & { currentTarget: EventTarget & HTMLInputElement }) => {
     const before = tab;

package/package/utils/DateField.svelte

@@ -22,7 +22,7 @@
     disabled?: boolean;
   } & HTMLInputAttributes = $props();
 
-  const id = crypto.randomUUID();
+  const id = $props.id();
   let hasJs = $state(false);
   onMount(() => {
     hasJs = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "4.5.4",
+  "version": "4.5.6",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {