m3-svelte 5.3.6 → 5.4.0

package/package/buttons/Button.svelte

@@ -96,7 +96,6 @@
     user-select: none;
     position: relative;
     overflow: hidden;
-    -webkit-tap-highlight-color: transparent;
 
     &:disabled,
     &:is(:global(input:disabled) + label) {

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/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

@@ -56,7 +56,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

@@ -69,7 +69,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/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

@@ -52,7 +52,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 +63,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

@@ -52,7 +52,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 +62,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

@@ -52,7 +52,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 +62,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,227 @@
+<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-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-textfield-filled-shape) var(--m3-textfield-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;

package/package/forms/SelectOutlined.svelte

@@ -0,0 +1,226 @@
+<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>
+  <div class="layer"></div>
+  <label for={id} class="m3-font-body-small">
+    {label}
+  </label>
+</div>
+
+<style>
+  /*
+  want to customize the label's background?
+  do this: <SelectOutlined --m3-util-background="rgb(var(--m3-scheme-surface-container))" />
+  */
+  :root {
+    --m3-menu-shape: var(--m3-util-rounding-extra-small);
+    --m3-select-outlined-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));
+    --outline-color: rgb(var(--m3-scheme-outline));
+    &.enabled {
+      &:hover {
+        --secondary-color: rgb(var(--m3-scheme-on-surface));
+        --outline-color: rgb(var(--m3-scheme-on-surface));
+      }
+      &:focus-within {
+        --secondary-color: rgb(var(--m3-scheme-primary));
+        --outline-color: rgb(var(--m3-scheme-primary));
+        .layer {
+          border-width: 0.125rem;
+        }
+      }
+    }
+  }
+  .layer {
+    position: absolute;
+    inset: 0;
+    border: 1px solid var(--outline-color);
+    border-radius: var(--m3-select-outlined-shape);
+    pointer-events: none;
+    transition: all 100ms;
+  }
+  label {
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0.75rem;
+    translate: 0 -50%;
+    color: var(--secondary-color);
+    background-color: var(--m3-util-background, rgb(var(--m3-scheme-surface)));
+    padding: 0 0.25rem;
+    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-inline: 1rem;
+
+    border-radius: var(--m3-select-outlined-shape);
+    background-color: transparent;
+    color: rgb(var(--m3-scheme-on-surface));
+
+    border: none;
+    outline: none;
+    position: relative;
+
+    &:enabled {
+      cursor: pointer;
+    }
+  }
+
+  select::picker-icon {
+    scale: 1 0.6;
+    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/SelectOutlined.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 SelectOutlined: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SelectOutlined = ReturnType<typeof SelectOutlined>;
+export default SelectOutlined;

package/package/forms/Slider.svelte

@@ -197,7 +197,7 @@
     top: 50%;
     inset-inline-end: 4px;
     translate: 0 -50%;
-    background-color: rgb(var(--m3-scheme-primary));
+    background-color: rgb(var(--m3-scheme-on-secondary-container));
     pointer-events: none;
     &.hidden {
       display: none;
@@ -213,7 +213,6 @@
     opacity: 0;
     appearance: none;
     margin: 0;
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
   }
 
@@ -262,7 +261,7 @@
     &:dir(rtl) {
       translate: 50% -50%;
     }
-    background-color: rgb(var(--m3-scheme-secondary-container));
+    background-color: rgb(var(--m3-scheme-on-primary));
     pointer-events: none;
   }
 
@@ -271,7 +270,7 @@
   }
 
   .tick.inactive {
-    background-color: rgb(var(--m3-scheme-primary));
+    background-color: rgb(var(--m3-scheme-on-secondary-container));
   }
 
   :global(.leading) ~ .tick:nth-child(1 of div.tick) {
@@ -353,11 +352,11 @@
     background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
   }
   input:disabled ~ .tick {
-    background-color: rgb(var(--m3-scheme-inverse-on-surface) / 0.66);
+    background-color: rgb(var(--m3-scheme-inverse-on-surface));
   }
   input:disabled ~ .tick.inactive,
   input:disabled ~ .endstop {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+    background-color: rgb(var(--m3-scheme-on-surface));
   }
 
   @media screen and (forced-colors: active) {

package/package/forms/Switch.svelte

@@ -1,16 +1,24 @@
 <script lang="ts">
   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";
   import type { HTMLInputAttributes } from "svelte/elements";
 
   // MUST BE WRAPPED IN A <label>
   let {
     checked = $bindable(false),
     disabled = false,
+    uncheckedIcon = iconX,
+    checkedIcon = iconCheck,
+    icons = "checked",
     ...extra
   }: {
     checked?: boolean;
     disabled?: boolean;
+    uncheckedIcon?: IconifyIcon;
+    checkedIcon?: IconifyIcon;
+    icons?: "checked" | "both" | "none";
   } & HTMLInputAttributes = $props();
 
   let startX: number | undefined = $state();
@@ -49,7 +57,12 @@
     }}
   />
   <div class="handle">
-    <Icon icon={iconCheck} />
+    {#if icons != "none"}
+      <Icon icon={checkedIcon} />
+      {#if icons == "both"}
+        <Icon icon={uncheckedIcon} />
+      {/if}
+    {/if}
   </div>
   <div class="hover"></div>
 </div>
@@ -75,7 +88,6 @@
     background-color: rgb(var(--m3-scheme-surface-container-highest));
     border: solid 0.125rem rgb(var(--m3-scheme-outline));
     cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
     transition: var(--m3-util-easing);
   }
   .handle {
@@ -88,7 +100,6 @@
     /* Fallback for those without on on primary */
     color: rgb(var(--m3-scheme-on-on-primary, var(--m3-scheme-on-primary-container)));
     cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
     transition: var(--m3-util-easing-fast-spatial);
 
     left: 0.5rem;
@@ -106,6 +117,20 @@
       opacity var(--m3-util-easing-fast-spatial),
       scale var(--m3-util-easing-fast-spatial);
   }
+  input:not(:checked) + :global(.handle:has(:nth-child(2))) {
+    scale: 1.5;
+    > :global(svg) {
+      color: rgb(var(--m3-scheme-surface-container-highest));
+      scale: 0.667;
+      opacity: 1;
+    }
+  }
+
+  input:checked + :global(.handle) > :global(svg:nth-child(2)),
+  input:not(:checked) + :global(.handle) > :global(svg:first-child) {
+    display: none;
+  }
+
   .hover {
     position: absolute;
     width: 3rem;
@@ -113,7 +138,6 @@
     border-radius: var(--m3-util-rounding-full);
 
     cursor: pointer;
-    -webkit-tap-highlight-color: transparent;
     transition: var(--m3-util-easing-fast);
 
     left: 1rem;
@@ -124,8 +148,8 @@
     justify-content: center;
   }
 
-  .m3-container:hover > input:enabled + .handle,
-  .m3-container > input:enabled:is(:global(:active, :focus-visible)) + .handle {
+  .m3-container:hover > input:not(:checked):not(:disabled) + .handle,
+  .m3-container:active > input:not(:checked):not(:disabled) + .handle {
     background-color: rgb(var(--m3-scheme-on-surface-variant));
   }
   .m3-container:hover > input:enabled:checked + .handle,

package/package/forms/Switch.svelte.d.ts

@@ -1,7 +1,11 @@
+import type { IconifyIcon } from "@iconify/types";
 import type { HTMLInputAttributes } from "svelte/elements";
 type $$ComponentProps = {
     checked?: boolean;
     disabled?: boolean;
+    uncheckedIcon?: IconifyIcon;
+    checkedIcon?: IconifyIcon;
+    icons?: "checked" | "both" | "none";
 } & HTMLInputAttributes;
 declare const Switch: import("svelte").Component<$$ComponentProps, {}, "checked">;
 type Switch = ReturnType<typeof Switch>;

package/package/forms/TextField.svelte

@@ -160,7 +160,6 @@
     border-start-end-radius: 0.25rem;
     border-end-end-radius: 0.25rem;
 
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
   }
 

package/package/forms/TextFieldOutlined.svelte

@@ -157,7 +157,6 @@
     border-start-end-radius: 0.25rem;
     border-end-end-radius: 0.25rem;
 
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
   }
 

package/package/forms/_picker/FocusPicker.svelte

@@ -49,7 +49,6 @@
     background-color: transparent;
     color: rgb(var(--m3-scheme-on-surface));
     border: none;
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     position: relative;
   }

package/package/forms/_picker/Header.svelte

@@ -103,7 +103,6 @@
     color: rgb(var(--m3-scheme-on-surface-variant));
     border: none;
     padding: 0;
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     position: relative;
   }

package/package/forms/_picker/Item.svelte

@@ -40,7 +40,6 @@
     background-color: transparent;
     color: rgb(var(--m3-scheme-on-surface));
     border: none;
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     transition: var(--m3-util-easing-fast);
     position: relative;

package/package/index.d.ts

@@ -18,29 +18,31 @@ export { default as MenuItem } from "./containers/MenuItem.svelte";
 export { default as Snackbar } from "./containers/Snackbar.svelte";
 export type { SnackbarIn } from "./containers/Snackbar.svelte";
 export { default as SnackbarItem } from "./containers/SnackbarItem.svelte";
-export { default as LinearProgress } from "./forms/LinearProgress.svelte";
-export { default as LinearProgressEstimate } from "./forms/LinearProgressEstimate.svelte";
-export { default as LinearProgressIndeterminate } from "./forms/LinearProgressIndeterminate.svelte";
-export { default as WavyLinearProgress } from "./forms/WavyLinearProgress.svelte";
-export { default as WavyLinearProgressEstimate } from "./forms/WavyLinearProgressEstimate.svelte";
+export { default as Checkbox } from "./forms/Checkbox.svelte";
+export { default as Chip } from "./forms/Chip.svelte";
 export { default as CircularProgress } from "./forms/CircularProgress.svelte";
 export { default as CircularProgressEstimate } from "./forms/CircularProgressEstimate.svelte";
 export { default as CircularProgressIndeterminate } from "./forms/CircularProgressIndeterminate.svelte";
-export { default as LoadingIndicator } from "./forms/LoadingIndicator.svelte";
 export { default as DateField } from "./forms/DateField.svelte";
 export { default as DateFieldOutlined } from "./forms/DateFieldOutlined.svelte";
+export { default as DatePickerDocked } from "./forms/DatePickerDocked.svelte";
+export { default as LinearProgress } from "./forms/LinearProgress.svelte";
+export { default as LinearProgressEstimate } from "./forms/LinearProgressEstimate.svelte";
+export { default as LinearProgressIndeterminate } from "./forms/LinearProgressIndeterminate.svelte";
+export { default as LoadingIndicator } from "./forms/LoadingIndicator.svelte";
 export { default as RadioAnim1 } from "./forms/RadioAnim1.svelte";
 export { default as RadioAnim2 } from "./forms/RadioAnim2.svelte";
 export { default as RadioAnim3 } from "./forms/RadioAnim3.svelte";
-export { default as Checkbox } from "./forms/Checkbox.svelte";
-export { default as Switch } from "./forms/Switch.svelte";
+export { default as Select } from "./forms/Select.svelte";
+export { default as SelectOutlined } from "./forms/SelectOutlined.svelte";
 export { default as Slider } from "./forms/Slider.svelte";
+export { default as Switch } from "./forms/Switch.svelte";
 export { default as TextField } from "./forms/TextField.svelte";
 export { default as TextFieldMultiline } from "./forms/TextFieldMultiline.svelte";
 export { default as TextFieldOutlined } from "./forms/TextFieldOutlined.svelte";
 export { default as TextFieldOutlinedMultiline } from "./forms/TextFieldOutlinedMultiline.svelte";
-export { default as DatePickerDocked } from "./forms/DatePickerDocked.svelte";
-export { default as Chip } from "./forms/Chip.svelte";
+export { default as WavyLinearProgress } from "./forms/WavyLinearProgress.svelte";
+export { default as WavyLinearProgressEstimate } from "./forms/WavyLinearProgressEstimate.svelte";
 export { default as NavCMLX } from "./nav/NavCMLX.svelte";
 export { default as NavCMLXItem } from "./nav/NavCMLXItem.svelte";
 export { default as Tabs } from "./nav/Tabs.svelte";

package/package/index.js

@@ -17,29 +17,31 @@ export { default as Menu } from "./containers/Menu.svelte";
 export { default as MenuItem } from "./containers/MenuItem.svelte";
 export { default as Snackbar } from "./containers/Snackbar.svelte";
 export { default as SnackbarItem } from "./containers/SnackbarItem.svelte";
-export { default as LinearProgress } from "./forms/LinearProgress.svelte";
-export { default as LinearProgressEstimate } from "./forms/LinearProgressEstimate.svelte";
-export { default as LinearProgressIndeterminate } from "./forms/LinearProgressIndeterminate.svelte";
-export { default as WavyLinearProgress } from "./forms/WavyLinearProgress.svelte";
-export { default as WavyLinearProgressEstimate } from "./forms/WavyLinearProgressEstimate.svelte";
+export { default as Checkbox } from "./forms/Checkbox.svelte";
+export { default as Chip } from "./forms/Chip.svelte";
 export { default as CircularProgress } from "./forms/CircularProgress.svelte";
 export { default as CircularProgressEstimate } from "./forms/CircularProgressEstimate.svelte";
 export { default as CircularProgressIndeterminate } from "./forms/CircularProgressIndeterminate.svelte";
-export { default as LoadingIndicator } from "./forms/LoadingIndicator.svelte";
 export { default as DateField } from "./forms/DateField.svelte";
 export { default as DateFieldOutlined } from "./forms/DateFieldOutlined.svelte";
+export { default as DatePickerDocked } from "./forms/DatePickerDocked.svelte";
+export { default as LinearProgress } from "./forms/LinearProgress.svelte";
+export { default as LinearProgressEstimate } from "./forms/LinearProgressEstimate.svelte";
+export { default as LinearProgressIndeterminate } from "./forms/LinearProgressIndeterminate.svelte";
+export { default as LoadingIndicator } from "./forms/LoadingIndicator.svelte";
 export { default as RadioAnim1 } from "./forms/RadioAnim1.svelte";
 export { default as RadioAnim2 } from "./forms/RadioAnim2.svelte";
 export { default as RadioAnim3 } from "./forms/RadioAnim3.svelte";
-export { default as Checkbox } from "./forms/Checkbox.svelte";
-export { default as Switch } from "./forms/Switch.svelte";
+export { default as Select } from "./forms/Select.svelte";
+export { default as SelectOutlined } from "./forms/SelectOutlined.svelte";
 export { default as Slider } from "./forms/Slider.svelte";
+export { default as Switch } from "./forms/Switch.svelte";
 export { default as TextField } from "./forms/TextField.svelte";
 export { default as TextFieldMultiline } from "./forms/TextFieldMultiline.svelte";
 export { default as TextFieldOutlined } from "./forms/TextFieldOutlined.svelte";
 export { default as TextFieldOutlinedMultiline } from "./forms/TextFieldOutlinedMultiline.svelte";
-export { default as DatePickerDocked } from "./forms/DatePickerDocked.svelte";
-export { default as Chip } from "./forms/Chip.svelte";
+export { default as WavyLinearProgress } from "./forms/WavyLinearProgress.svelte";
+export { default as WavyLinearProgressEstimate } from "./forms/WavyLinearProgressEstimate.svelte";
 export { default as NavCMLX } from "./nav/NavCMLX.svelte";
 export { default as NavCMLXItem } from "./nav/NavCMLXItem.svelte";
 export { default as Tabs } from "./nav/Tabs.svelte";

package/package/misc/styles.css

@@ -83,7 +83,7 @@
   --m3-util-timing-function-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
   --m3-util-timing-function-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
 
-  /* deprecated / todo next release remove */
+  /* deprecated */
   --m3-util-curve: var(--m3-util-timing-function-emphasized);
   --m3-util-curve-accel: var(--m3-util-timing-function-emphasized-accel);
   --m3-util-curve-decel: var(--m3-util-timing-function-emphasized-decel);
@@ -220,6 +220,7 @@ or for very small text in the content body, such as captions. */
   }
   .m3-container {
     box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
   }
   .m3-container a,
   a.m3-container {

package/package/nav/NavCMLX.svelte

@@ -5,7 +5,7 @@
     variant,
     children,
   }: {
-    variant: "compact" | "medium" | "large" | "expanded" | "auto";
+    variant: "compact" | "medium" | "large" | "expanded" | "auto"; // next release / "deprecated": rename expanded to extra-large
     children: Snippet;
   } = $props();
 </script>

package/package/nav/NavCMLXItem.svelte

@@ -8,7 +8,7 @@
     | ({ click: () => void } & HTMLButtonAttributes)
     | ({ href: string } & HTMLAnchorAttributes);
   let props: {
-    variant: "compact" | "medium" | "large" | "expanded" | "auto";
+    variant: "compact" | "medium" | "large" | "expanded" | "auto"; // next release / "deprecated": rename expanded to extra-large
     icon: IconifyIcon;
     text: string;
     selected: boolean;
@@ -81,13 +81,13 @@
         }
         &:hover {
           > .icon {
-            background-color: color-mix(in srgb-linear, currentColor 8%, transparent);
+            background-color: color-mix(in oklab, currentColor 8%, transparent);
           }
         }
         &:focus-visible,
         &:active {
           > .icon {
-            background-color: color-mix(in srgb-linear, currentColor 12%, transparent);
+            background-color: color-mix(in oklab, currentColor 12%, transparent);
           }
         }
         > .icon {
@@ -188,14 +188,14 @@
 
         &:hover {
           > .icon {
-            background-color: color-mix(in srgb-linear, currentColor 8%, transparent);
+            background-color: color-mix(in oklab, currentColor 8%, transparent);
           }
         }
 
         &:focus-visible,
         &:active {
           > .icon {
-            background-color: color-mix(in srgb-linear, currentColor 12%, transparent);
+            background-color: color-mix(in oklab, currentColor 12%, transparent);
           }
         }
 
@@ -251,14 +251,14 @@
 
         &:hover {
           > .icon {
-            background-color: color-mix(in srgb-linear, currentColor 8%, transparent);
+            background-color: color-mix(in oklab, currentColor 8%, transparent);
           }
         }
 
         &:focus-visible,
         &:active {
           > .icon {
-            background-color: color-mix(in srgb-linear, currentColor 12%, transparent);
+            background-color: color-mix(in oklab, currentColor 12%, transparent);
           }
         }
 

package/package/nav/Tabs.svelte

@@ -69,7 +69,6 @@
 
     color: rgb(var(--m3-scheme-on-surface-variant));
     user-select: none;
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     transition: color var(--m3-util-easing-fast);
   }

package/package/nav/TabsLink.svelte

@@ -67,7 +67,6 @@
 
     color: rgb(var(--m3-scheme-on-surface-variant));
     user-select: none;
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     transition: color var(--m3-util-easing-fast);
   }

package/package/nav/VariableTabs.svelte

@@ -130,7 +130,6 @@
 
     color: rgb(var(--m3-scheme-on-surface-variant));
     user-select: none;
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     transition: color var(--m3-util-easing-fast);
   }

package/package/nav/VariableTabsLink.svelte

@@ -128,7 +128,6 @@
 
     color: rgb(var(--m3-scheme-on-surface-variant));
     user-select: none;
-    -webkit-tap-highlight-color: transparent;
     cursor: pointer;
     transition: color var(--m3-util-easing-fast);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "m3-svelte",
-  "version": "5.3.6",
+  "version": "5.4.0",
   "license": "Apache-2.0 OR GPL-3.0-only",
   "repository": "KTibow/m3-svelte",
   "author": {
@@ -35,17 +35,17 @@
   },
   "dependencies": {
     "@iconify/types": "^2.0.0",
-    "@ktibow/iconset-material-symbols": "^0.0.1754804347",
-    "@ktibow/material-color-utilities-nightly": "^0.3.11754876552597",
-    "svelte": "^5.38.0"
+    "@ktibow/iconset-material-symbols": "^0.0.1755063979",
+    "@ktibow/material-color-utilities-nightly": "^0.3.11755481233385",
+    "svelte": "^5.38.2"
   },
   "devDependencies": {
     "@eslint/compat": "^1.3.2",
     "@eslint/js": "^9.33.0",
     "@sveltejs/adapter-static": "^3.0.9",
-    "@sveltejs/kit": "^2.27.3",
+    "@sveltejs/kit": "^2.32.0",
     "@sveltejs/package": "^2.4.1",
-    "@sveltejs/vite-plugin-svelte": "^6.1.1",
+    "@sveltejs/vite-plugin-svelte": "^6.1.2",
     "eslint": "^9.27.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.11.0",
@@ -57,8 +57,8 @@
     "svelte-check": "^4.3.1",
     "svelte-highlight": "^7.8.3",
     "typescript": "^5.9.2",
-    "typescript-eslint": "^8.39.1",
-    "vite": "^7.1.1"
+    "typescript-eslint": "^8.40.0",
+    "vite": "^7.1.2"
   },
   "keywords": [
     "svelte",