m3-svelte 5.3.6 → 5.6.0

package/package/buttons/Button.svelte

@@ -1,17 +1,11 @@
 <script lang="ts">
-  import type {
-    HTMLButtonAttributes,
-    HTMLAnchorAttributes,
-    HTMLLabelAttributes,
-  } from "svelte/elements";
+  import type { HTMLButtonAttributes } from "svelte/elements";
   import type { Snippet } from "svelte";
+  import type { LabelAttrs, AnchorAttrs } from "../misc/typing-utils";
   import Layer from "../misc/Layer.svelte";
 
   // If you want a toggle button, use `for` with a checkbox input.
-  type ActionProps =
-    | ({ for: string } & HTMLLabelAttributes)
-    | ({ href: string } & HTMLAnchorAttributes)
-    | HTMLButtonAttributes;
+  type ActionProps = LabelAttrs | AnchorAttrs | HTMLButtonAttributes;
   type Props = {
     variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;
@@ -61,7 +55,7 @@
 {:else}
   {@const { variant = "filled", square = false, iconType = "none", children, ...extra } = props}
   <button
-    type={"onclick" in extra ? "button" : undefined}
+    type={"onclick" in extra ? "button" : "submit"}
     class="m3-container m3-font-label-large {variant} icon-{iconType}"
     class:square
     {...extra}
@@ -96,7 +90,6 @@
     user-select: none;
     position: relative;
     overflow: hidden;
-    -webkit-tap-highlight-color: transparent;
 
     &:disabled,
     &:is(:global(input:disabled) + label) {

package/package/buttons/Button.svelte.d.ts

@@ -1,10 +1,7 @@
-import type { HTMLButtonAttributes, HTMLAnchorAttributes, HTMLLabelAttributes } from "svelte/elements";
+import type { HTMLButtonAttributes } from "svelte/elements";
 import type { Snippet } from "svelte";
-type ActionProps = ({
-    for: string;
-} & HTMLLabelAttributes) | ({
-    href: string;
-} & HTMLAnchorAttributes) | HTMLButtonAttributes;
+import type { LabelAttrs, AnchorAttrs } from "../misc/typing-utils";
+type ActionProps = LabelAttrs | AnchorAttrs | HTMLButtonAttributes;
 type Props = {
     variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;

package/package/buttons/FAB.svelte

@@ -127,9 +127,6 @@
     color: rgb(var(--m3-scheme-on-tertiary-container));
   }
 
-  button {
-    -webkit-tap-highlight-color: transparent;
-  }
   @media (hover: hover) {
     .elevation-normal:hover {
       box-shadow: var(--m3-util-elevation-4);

package/package/containers/Card.svelte

@@ -47,7 +47,6 @@
     font: inherit;
     letter-spacing: inherit;
     cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
   }
   @media (hover: hover) {
     button:hover {

package/package/containers/Dialog.svelte

@@ -10,10 +10,7 @@
     buttons,
     children,
     open = $bindable(),
-    closeOnEsc = true,
-    closeOnClick = true,
-    onEsc,
-    onClick,
+    closedby = "any",
     ...extra
   }: {
     icon?: IconifyIcon | undefined;
@@ -21,9 +18,13 @@
     buttons: Snippet;
     children: Snippet;
     open: boolean;
+    /** @deprecated use closedby instead */
     closeOnEsc?: boolean;
+    /** @deprecated use closedby instead */
     closeOnClick?: boolean;
+    /** @deprecated listen to `open` state changes instead of onEsc */
     onEsc?: () => void;
+    /** @deprecated listen to `open` state changes instead of onClick */
     onClick?: () => void;
   } & HTMLDialogAttributes = $props();
 
@@ -37,39 +38,41 @@
 
 <dialog
   class="m3-container"
+  ontoggle={(e) => {
+    open = e.newState == "open";
+  }}
   oncancel={(e) => {
     if (e.target != e.currentTarget) return;
-
-    if (!closeOnEsc) {
-      e.preventDefault();
-      return;
+    if (extra.closeOnEsc && extra.onEsc) {
+      extra.onEsc();
     }
-
-    onEsc?.();
-    open = false;
   }}
   onclick={(e) => {
     if (e.target != e.currentTarget) return;
-    if (closeOnClick) {
-      onClick?.();
-      open = false;
+    if (extra.closeOnClick && extra.onClick) {
+      extra.onClick();
     }
   }}
   bind:this={dialog}
+  closedby={closedby ||
+    (extra.closeOnClick == false && extra.closeOnEsc == false
+      ? "none"
+      : extra.closeOnClick == false
+        ? "closerequest"
+        : "any")}
+  role="alertdialog"
   {...extra}
 >
-  <div class="d">
-    {#if 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">
-      {@render children()}
-    </div>
-    <div class="buttons">
-      {@render buttons()}
-    </div>
+  {#if 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">
+    {@render children()}
   </div>
+  <form method="dialog" class="buttons">
+    {@render buttons()}
+  </form>
 </dialog>
 
 <style>
@@ -85,20 +88,15 @@
     border-radius: var(--m3-dialog-shape);
     min-width: 17.5rem;
     max-width: 35rem;
-    padding: 0;
-    overflow: auto;
-  }
-  .d {
-    display: flex;
-    flex-direction: column;
     padding: 1.5rem;
-  }
-  .d > :global(svg) {
-    color: rgb(var(--m3-scheme-secondary));
+    overflow: auto;
+    > :global(svg) {
+      color: rgb(var(--m3-scheme-secondary));
 
-    flex-shrink: 0;
-    align-self: center;
-    margin-bottom: 1rem;
+      flex-shrink: 0;
+      align-self: center;
+      margin-bottom: 1rem;
+    }
   }
   .headline {
     color: rgb(var(--m3-scheme-on-surface));

package/package/containers/Dialog.svelte.d.ts

@@ -7,9 +7,13 @@ type $$ComponentProps = {
     buttons: Snippet;
     children: Snippet;
     open: boolean;
+    /** @deprecated use closedby instead */
     closeOnEsc?: boolean;
+    /** @deprecated use closedby instead */
     closeOnClick?: boolean;
+    /** @deprecated listen to `open` state changes instead of onEsc */
     onEsc?: () => void;
+    /** @deprecated listen to `open` state changes instead of onClick */
     onClick?: () => void;
 } & HTMLDialogAttributes;
 declare const Dialog: import("svelte").Component<$$ComponentProps, {}, "open">;

package/package/containers/ListItem.svelte

@@ -98,7 +98,6 @@
     position: relative;
     background: transparent;
     color: inherit;
-    -webkit-tap-highlight-color: transparent;
   }
   button.m3-container,
   label.m3-container {

package/package/containers/MenuItem.svelte

@@ -43,7 +43,6 @@
     background-color: transparent;
     color: rgb(var(--m3-scheme-on-surface));
 
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
   }
   .icon {

package/package/containers/Snackbar.svelte

@@ -103,7 +103,6 @@
     border: none;
 
     background-color: transparent;
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     position: relative;
   }

package/package/forms/Checkbox.svelte

@@ -38,6 +38,7 @@
   .m3-container :global(input) {
     position: absolute;
     opacity: 0;
+    pointer-events: none;
   }
 
   .layer-container {
@@ -56,7 +57,6 @@
     border-radius: 0.125rem;
     border: solid 0.125rem currentColor;
     transition: var(--m3-util-easing-fast);
-    -webkit-tap-highlight-color: transparent;
   }
 
   svg {

package/package/forms/Chip.svelte

@@ -3,14 +3,15 @@
   import type { IconifyIcon } from "@iconify/types";
   import Icon from "../misc/_icon.svelte";
   import Layer from "../misc/Layer.svelte";
-  import type { ButtonAttrs } from "../misc/typing-utils";
+  import type { LabelAttrs, AnchorAttrs, ButtonAttrs } from "../misc/typing-utils";
+
+  type ActionProps = LabelAttrs | AnchorAttrs | ButtonAttrs;
 
   let {
     variant,
     icon,
     trailingIcon,
     elevated = false,
-    disabled = false,
     selected = false,
     children,
     ...extra
@@ -28,20 +29,12 @@
     icon?: IconifyIcon | undefined;
     trailingIcon?: IconifyIcon | undefined;
     elevated?: boolean;
-    disabled?: boolean;
     selected?: boolean;
     children: Snippet;
-  } & ButtonAttrs = $props();
+  } & ActionProps = $props();
 </script>
 
-<button
-  type="button"
-  class="m3-container {variant}"
-  class:elevated
-  class:selected
-  {disabled}
-  {...extra}
->
+{#snippet content()}
   <Layer />
   {#if icon}
     <Icon {icon} class="leading" />
@@ -50,7 +43,21 @@
   {#if trailingIcon}
     <Icon icon={trailingIcon} class="trailing" />
   {/if}
-</button>
+{/snippet}
+
+{#if "for" in extra}
+  <label class="m3-container {variant}" class:elevated class:selected {...extra}>
+    {@render content()}
+  </label>
+{:else if "href" in extra}
+  <a class="m3-container {variant}" class:elevated class:selected {...extra}>
+    {@render content()}
+  </a>
+{:else}
+  <button class="m3-container {variant}" class:elevated class:selected {...extra} type="button">
+    {@render content()}
+  </button>
+{/if}
 
 <style>
   :root {
@@ -69,7 +76,6 @@
     border: solid 1px rgb(var(--m3-scheme-outline));
     position: relative;
     cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
     transition: var(--m3-util-easing-fast);
   }
 

package/package/forms/Chip.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { Snippet } from "svelte";
 import type { IconifyIcon } from "@iconify/types";
-import type { ButtonAttrs } from "../misc/typing-utils";
+import type { LabelAttrs, AnchorAttrs, ButtonAttrs } from "../misc/typing-utils";
+type ActionProps = LabelAttrs | AnchorAttrs | ButtonAttrs;
 type $$ComponentProps = {
     /**
      * general is filter/suggestion since they're the same.
@@ -15,10 +16,9 @@ type $$ComponentProps = {
     icon?: IconifyIcon | undefined;
     trailingIcon?: IconifyIcon | undefined;
     elevated?: boolean;
-    disabled?: boolean;
     selected?: boolean;
     children: Snippet;
-} & ButtonAttrs;
+} & ActionProps;
 declare const Chip: import("svelte").Component<$$ComponentProps, {}, "">;
 type Chip = ReturnType<typeof Chip>;
 export default Chip;

package/package/forms/DateField.svelte

@@ -143,7 +143,6 @@ opacity: ${Math.min(t * 3, 1)};`,
     color: rgb(var(--m3-scheme-on-surface-variant));
     border-top-right-radius: var(--m3-datefield-shape);
 
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
   }
 

package/package/forms/DateFieldOutlined.svelte

@@ -178,7 +178,6 @@ opacity: ${Math.min(t * 3, 1)};`,
     color: rgb(var(--m3-scheme-on-surface-variant));
     border-top-right-radius: var(--m3-datefield-outlined-shape);
 
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
   }
 

package/package/forms/RadioAnim1.svelte

@@ -32,6 +32,7 @@
   .m3-container :global(input) {
     position: absolute;
     opacity: 0;
+    pointer-events: none;
   }
 
   .layer-container {
@@ -52,7 +53,6 @@
     border-radius: var(--m3-util-rounding-full);
     border: solid 0.125rem currentColor;
     transition: border var(--m3-util-easing-fast);
-    -webkit-tap-highlight-color: transparent;
   }
 
   .radio-dot {
@@ -64,7 +64,6 @@
     border-radius: var(--m3-util-rounding-full);
     background-color: currentColor;
     transition: scale var(--m3-util-easing-fast-spatial);
-    -webkit-tap-highlight-color: transparent;
   }
 
   :global(input:focus-visible) + .layer-container {

package/package/forms/RadioAnim2.svelte

@@ -32,6 +32,7 @@
   .m3-container :global(input) {
     position: absolute;
     opacity: 0;
+    pointer-events: none;
   }
 
   .layer-container {
@@ -52,7 +53,6 @@
     border-radius: var(--m3-util-rounding-full);
     border: solid 0.125rem currentColor;
     transition: border var(--m3-util-easing-fast);
-    -webkit-tap-highlight-color: transparent;
   }
 
   .radio-dot {
@@ -63,7 +63,6 @@
     scale: 0;
     border-radius: var(--m3-util-rounding-full);
     background-color: currentColor;
-    -webkit-tap-highlight-color: transparent;
   }
 
   :global(input:focus-visible) + .layer-container {

package/package/forms/RadioAnim3.svelte

@@ -32,6 +32,7 @@
   .m3-container :global(input) {
     position: absolute;
     opacity: 0;
+    pointer-events: none;
   }
 
   .layer-container {
@@ -52,7 +53,6 @@
     border-radius: var(--m3-util-rounding-full);
     border: solid 0.125rem currentColor;
     transition: border var(--m3-util-easing-fast);
-    -webkit-tap-highlight-color: transparent;
   }
 
   .radio-dot {
@@ -63,7 +63,6 @@
     border-radius: var(--m3-util-rounding-full);
     outline: solid 0 currentColor;
     transition: var(--m3-util-easing);
-    -webkit-tap-highlight-color: transparent;
   }
 
   :global(input:focus-visible) + .layer-container {

package/package/forms/Select.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+  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";
+
+  type Option = { icon?: IconifyIcon; text: string; value: string } & HTMLOptionAttributes;
+  let {
+    label,
+    options,
+    width = "auto",
+    value = $bindable(),
+    ...extra
+  }: {
+    label: string;
+    options: Option[];
+    width?: string;
+    value: string;
+  } & HTMLSelectAttributes = $props();
+  const id = $props.id();
+</script>
+
+{#snippet render(text: string)}
+  <span>{text}</span>
+{/snippet}
+<div
+  class="m3-container"
+  class:enabled={!extra.disabled}
+  style:align-self={width == "auto" ? "start" : undefined}
+>
+  <select class="m3-font-body-large" style:--width={width} bind:value {id} {...extra}>
+    {#each options as { icon, text, ...extra }, i (i)}
+      <option class="focus-inset" {...extra}>
+        <Layer />
+        {#if icon}
+          <Icon {icon} width="1.5rem" height="1.5rem" />
+        {/if}
+        {@render render(text)}
+      </option>
+    {/each}
+  </select>
+  <label for={id} class="m3-font-body-small">
+    {label}
+  </label>
+</div>
+
+<style>
+  :root {
+    --m3-menu-shape: var(--m3-util-rounding-extra-small);
+    --m3-field-filled-shape: var(--m3-util-rounding-extra-small);
+  }
+
+  .m3-container {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    --secondary-color: rgb(var(--m3-scheme-on-surface-variant));
+    &.enabled {
+      &:hover {
+        --secondary-color: rgb(var(--m3-scheme-on-surface));
+      }
+      &:focus-within {
+        --secondary-color: rgb(var(--m3-scheme-primary));
+        select {
+          box-shadow: inset 0px -2px var(--secondary-color);
+        }
+      }
+    }
+  }
+  label {
+    position: absolute;
+    top: 0.5rem;
+    inset-inline: 1rem;
+    color: var(--secondary-color);
+    pointer-events: none;
+    transition: color var(--m3-util-easing-fast);
+  }
+
+  select {
+    appearance: none;
+  }
+  select,
+  ::picker(select) {
+    appearance: base-select;
+  }
+
+  select {
+    display: flex;
+    align-items: center;
+    height: calc(3.5rem + var(--m3-util-density-term));
+    padding-top: calc(
+      var(--m3-font-body-small-size, 0.75rem) * var(--m3-font-body-small-height, 1.333)
+    );
+    padding-inline: 1rem;
+
+    border-radius: var(--m3-field-filled-shape) var(--m3-field-filled-shape) 0 0;
+    background-color: rgb(var(--m3-scheme-surface-container-highest));
+    transition:
+      background-color var(--m3-util-easing-fast),
+      box-shadow var(--m3-util-easing-fast);
+
+    border: none;
+    position: relative;
+
+    &:enabled {
+      cursor: pointer;
+      &:hover,
+      &:open {
+        background-color: color-mix(
+          in oklab,
+          rgb(var(--m3-scheme-surface-container-highest)),
+          currentColor 8%
+        );
+      }
+      &:active {
+        background-color: color-mix(
+          in oklab,
+          rgb(var(--m3-scheme-surface-container-highest)),
+          currentColor 12%
+        );
+      }
+    }
+
+    box-shadow: inset 0px -1px var(--secondary-color);
+  }
+
+  select::picker-icon {
+    scale: 1 0.6; /* yes we are squashing the arrow, surely you don't have a problem with that */
+    color: var(--secondary-color);
+    transition:
+      color var(--m3-util-easing-fast),
+      rotate var(--m3-util-easing-fast);
+  }
+  select:open::picker-icon {
+    rotate: 180deg;
+  }
+
+  ::picker(select) {
+    background-color: rgb(var(--m3-scheme-surface-container));
+    box-shadow: var(--m3-util-elevation-2);
+    border-radius: var(--m3-menu-shape);
+
+    box-sizing: border-box;
+    height: 0;
+    min-height: 0;
+    interpolate-size: allow-keywords;
+    overflow: hidden;
+    transition:
+      width var(--m3-util-easing-fast),
+      height var(--m3-util-easing-fast),
+      display var(--m3-util-duration-fast) allow-discrete,
+      overlay var(--m3-util-duration-fast) allow-discrete;
+
+    border: none;
+    cursor: auto;
+  }
+  select:open::picker(select) {
+    width: var(--width);
+    height: auto;
+    transition:
+      width 500ms linear,
+      height 500ms var(--m3-util-timing-function-emphasized-decel),
+      display 500ms allow-discrete,
+      overlay 500ms allow-discrete;
+  }
+  @starting-style {
+    select:open::picker(select) {
+      width: calc-size(var(--width), size - 0.001px);
+      height: 0;
+    }
+  }
+
+  option {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    padding-inline: 1rem;
+    padding-block: calc(
+      (
+          3rem + var(--m3-util-density-term) -
+            (var(--m3-font-body-large-size, 1rem) * var(--m3-font-body-large-height, 1.5))
+        ) /
+        2
+    );
+    &:first-child {
+      margin-top: 0.5rem;
+    }
+    &:last-child {
+      margin-bottom: 0.5rem;
+    }
+
+    background-color: transparent;
+    &:checked {
+      background-color: rgb(var(--m3-scheme-primary-container));
+      color: rgb(var(--m3-scheme-on-primary-container));
+    }
+
+    > *,
+    > :global(svg) {
+      grid-row: 1;
+    }
+    &::checkmark {
+      opacity: 0;
+      grid-column: 2;
+    }
+    &:has(> :global(svg)) {
+      grid-template-columns: auto auto 1fr;
+      > :global(svg) {
+        margin-right: 0.5rem;
+      }
+      &:not(:checked) > :global(svg) {
+        color: rgb(var(--m3-scheme-on-surface-variant));
+      }
+      &:checked > :global(svg) {
+        opacity: 0.8;
+      }
+      &::checkmark {
+        grid-column: 3;
+      }
+    }
+
+    transition:
+      background-color var(--m3-util-easing-fast),
+      color var(--m3-util-easing-fast);
+
+    position: relative;
+    cursor: pointer;
+  }
+</style>

package/package/forms/Select.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { IconifyIcon } from "@iconify/types";
+import type { HTMLOptionAttributes, HTMLSelectAttributes } from "svelte/elements";
+type Option = {
+    icon?: IconifyIcon;
+    text: string;
+    value: string;
+} & HTMLOptionAttributes;
+type $$ComponentProps = {
+    label: string;
+    options: Option[];
+    width?: string;
+    value: string;
+} & HTMLSelectAttributes;
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;