m3-svelte 5.3.6 → 5.6.0

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

@@ -14,7 +14,7 @@
     size = "xs",
     leadingIcon,
     trailingIcon,
-    ticks = false,
+    stops: _stops = false,
     endStops = true,
     format = (n: number) => {
       return n.toFixed(0);
@@ -30,10 +30,12 @@
     size?: "xs" | "s" | "m" | "l" | "xl";
     leadingIcon?: IconifyIcon;
     trailingIcon?: IconifyIcon;
-    ticks?: boolean;
+    stops?: boolean;
     endStops?: boolean;
     format?: (n: number) => string;
   } & Omit<HTMLInputAttributes, "size"> = $props();
+  // @ts-expect-error deprecated backwards compatibility with ticks
+  let stops = $derived(extra.ticks ? true : _stops);
   let containerWidth = $state(600);
 
   const valueDisplayed = new Spring(value, { stiffness: 0.3, damping: 1 });
@@ -45,23 +47,27 @@
   };
 
   const range = $derived(max - min);
-  const percent = $derived((valueDisplayed.current - min) / range);
-  const tickList = $derived.by(() => {
-    if (typeof step != "number") return [];
-
-    const ticksList = [];
-
-    for (let i = 0; i <= range; i += step) ticksList.push(i / range);
+  const handle = $derived((valueDisplayed.current - min) / range);
+  const stopList = $derived.by(() => {
+    const output: number[] = [];
+    const add = (stop: number) => {
+      if (leadingIcon && stop == 0) return;
+      if (trailingIcon && stop == 1) return;
+      output.push(stop);
+    };
+
+    if (stops && typeof step == "number") {
+      for (let i = 0; i <= range; i += step) add(i / range);
+    }
+    if (endStops && !output.includes(1)) {
+      add(1);
+    }
 
-    return ticksList;
+    return output;
   });
 </script>
 
-<div
-  class="m3-container {size}"
-  style:--percent="{percent * 100}%"
-  bind:offsetWidth={containerWidth}
->
+<div class="m3-container {size}" style:--handle={handle - 0.5} bind:offsetWidth={containerWidth}>
   <input
     type="range"
     oninput={updateValue}
@@ -72,33 +78,28 @@
     {disabled}
     {...extra}
   />
-
-  <div class="track"></div>
+  <div class="track-1">
+    {#each stopList as stop}
+      <div class="stop" style:--x={stop - 0.5}></div>
+    {/each}
+  </div>
+  <div class="track-2">
+    {#each stopList as stop}
+      <div class="stop" style:--x={stop - 0.5}></div>
+    {/each}
+  </div>
   {#if leadingIcon}
     <Icon
       icon={leadingIcon}
-      class={"leading" + (containerWidth * percent < (size == "xl" ? 48 : 40) ? " pop" : "")}
+      class={"leading" + (containerWidth * handle < (size == "xl" ? 48 : 40) ? " pop" : "")}
     />
   {/if}
   {#if trailingIcon}
     <Icon
       icon={trailingIcon}
-      class={"trailing" + (containerWidth * (1 - percent) < (size == "xl" ? 48 : 40) ? " pop" : "")}
+      class={"trailing" + (containerWidth * (1 - handle) < (size == "xl" ? 48 : 40) ? " pop" : "")}
     />
   {/if}
-  {#if ticks}
-    {#each tickList as tick}
-      <div
-        class="tick"
-        class:hidden={Math.abs(tick - percent) < 0.01}
-        class:inactive={tick > percent}
-        style:--x={tick - 0.5}
-      ></div>
-    {/each}
-  {/if}
-  {#if endStops && !ticks && !trailingIcon}
-    <div class="endstop" class:hidden={containerWidth * (1 - percent) < 14}></div>
-  {/if}
   <div class="handle"></div>
   {#if showValue}
     <div class="value m3-font-label-large">{format(value)}</div>
@@ -118,6 +119,11 @@
     min-width: 10rem;
     print-color-adjust: exact;
     -webkit-print-color-adjust: exact;
+
+    --functional-width: calc(100% - 2 * (0.25rem + 0.125rem));
+    --handle-left: calc(50% + var(--functional-width) * var(--handle) - 0.125rem - 0.375rem);
+    --handle-center: calc(50% + var(--functional-width) * var(--handle));
+    --handle-right: calc(50% + var(--functional-width) * var(--handle) + 0.125rem + 0.375rem);
   }
 
   .m3-container.xs {
@@ -160,15 +166,15 @@
     width: var(--icon-size);
     height: var(--icon-size);
     top: 50%;
-    inset-inline-start: 0.25rem;
+    inset-inline-start: 0;
+    margin-inline-start: 0.25rem;
     translate: 0 -50%;
     pointer-events: none;
     color: rgb(var(--m3-scheme-secondary-container));
   }
 
   .m3-container :global(.leading.pop) {
-    inset-inline-start: var(--percent);
-    margin-inline-start: 0.625rem;
+    inset-inline-start: var(--handle-right);
     color: rgb(var(--m3-scheme-primary));
   }
 
@@ -177,114 +183,118 @@
     width: var(--icon-size);
     height: var(--icon-size);
     top: 50%;
-    inset-inline-end: 0.25rem;
+    inset-inline-end: 0;
+    margin-inline-end: 0.25rem;
     translate: 0 -50%;
     pointer-events: none;
     color: rgb(var(--m3-scheme-primary));
   }
 
   .m3-container :global(.trailing.pop) {
-    inset-inline-end: abs(100% - var(--percent));
-    margin-inline-end: 0.625rem;
+    inset-inline-end: calc(100% - var(--handle-left));
     color: rgb(var(--m3-scheme-secondary-container));
   }
 
-  .endstop {
-    position: absolute;
-    width: 4px;
-    height: 4px;
-    border-radius: var(--m3-util-rounding-full);
-    top: 50%;
-    inset-inline-end: 4px;
-    translate: 0 -50%;
-    background-color: rgb(var(--m3-scheme-primary));
-    pointer-events: none;
-    &.hidden {
-      display: none;
-    }
-  }
-
   input {
     position: absolute;
-    inset-inline: -0.5rem;
-    width: calc(100% + 1rem);
+    width: calc(var(--functional-width) + 1rem);
+    left: 50%;
+    translate: -50% 0;
     height: 100%;
 
     opacity: 0;
     appearance: none;
     margin: 0;
-    -webkit-tap-highlight-color: transparent;
-    cursor: pointer;
-  }
-
-  .track::before {
-    position: absolute;
-    content: " ";
-    inset-inline-start: 0;
-    top: 50%;
-    translate: 0 -50%;
-    width: calc(var(--percent) - 0.375rem);
-    height: var(--track-height);
-    pointer-events: none;
 
-    background-color: rgb(var(--m3-scheme-primary));
-    border-start-start-radius: var(--track-radius);
-    border-end-start-radius: var(--track-radius);
-    border-start-end-radius: var(--m3-slider-track-in-shape);
-    border-end-end-radius: var(--m3-slider-track-in-shape);
+    &:enabled {
+      cursor: pointer;
+    }
   }
 
-  .track::after {
+  .track-1,
+  .track-2 {
     position: absolute;
-    content: " ";
-    inset-inline-end: 0;
+    inset-inline: 0;
     top: 50%;
     translate: 0 -50%;
-    width: calc(100% - var(--percent) - 0.375rem);
     height: var(--track-height);
     pointer-events: none;
+  }
+  .track-1 {
+    background-color: rgb(var(--m3-scheme-primary));
+    clip-path: inset(
+      0 calc(100% - var(--handle-left)) 0 0 round var(--track-radius)
+        var(--m3-slider-track-in-shape) var(--m3-slider-track-in-shape) var(--track-radius)
+    );
+    &:dir(rtl) {
+      clip-path: inset(
+        0 0 0 calc(100% - var(--handle-left)) round var(--m3-slider-track-in-shape)
+          var(--track-radius) var(--track-radius) var(--m3-slider-track-in-shape)
+      );
+    }
 
-    background-color: rgb(var(--m3-scheme-secondary-container));
-    border-start-start-radius: var(--m3-slider-track-in-shape);
-    border-end-start-radius: var(--m3-slider-track-in-shape);
-    border-start-end-radius: var(--track-radius);
-    border-end-end-radius: var(--track-radius);
+    @media screen and (forced-colors: active) {
+      background-color: selecteditem;
+    }
+    &:is(input:disabled ~ .track-1) {
+      background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      @media screen and (forced-colors: active) {
+        background-color: canvastext;
+      }
+    }
   }
+  .track-2 {
+    background-color: rgb(var(--m3-scheme-secondary-container));
+    clip-path: inset(
+      0 0 0 var(--handle-right) round var(--m3-slider-track-in-shape) var(--track-radius)
+        var(--track-radius) var(--m3-slider-track-in-shape)
+    );
+    &:dir(rtl) {
+      clip-path: inset(
+        0 var(--handle-right) 0 0 round var(--track-radius) var(--m3-slider-track-in-shape)
+          var(--m3-slider-track-in-shape) var(--track-radius)
+      );
+    }
 
-  .tick {
+    @media screen and (forced-colors: active) {
+      background-color: canvastext;
+    }
+    &:is(input:disabled ~ .track-2) {
+      background-color: rgb(var(--m3-scheme-on-surface) / 0.12);
+      @media screen and (forced-colors: active) {
+        background-color: graytext;
+      }
+    }
+  }
+  .stop {
     position: absolute;
     width: 4px;
     height: 4px;
     border-radius: var(--m3-util-rounding-full);
     top: 50%;
-    inset-inline-start: calc(50% + (100% - 0.75rem) * var(--x));
+    inset-inline-start: calc(50% + (100% - 0.5rem - 0.25rem) * var(--x));
     translate: -50% -50%;
     &:dir(rtl) {
       translate: 50% -50%;
     }
-    background-color: rgb(var(--m3-scheme-secondary-container));
+    &:is(.track-1 > .stop) {
+      background-color: rgb(var(--m3-scheme-on-primary));
+      &:is(input:disabled ~ .track-1 > .stop) {
+        background-color: rgb(var(--m3-scheme-inverse-on-surface));
+      }
+    }
+    &:is(.track-2 > .stop) {
+      background-color: rgb(var(--m3-scheme-primary));
+      &:is(input:disabled ~ .track-2 > .stop) {
+        background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      }
+    }
     pointer-events: none;
   }
 
-  .tick.hidden {
-    display: none;
-  }
-
-  .tick.inactive {
-    background-color: rgb(var(--m3-scheme-primary));
-  }
-
-  :global(.leading) ~ .tick:nth-child(1 of div.tick) {
-    display: none;
-  }
-
-  :global(.trailing) ~ .tick:nth-last-child(1 of div.tick) {
-    display: none;
-  }
-
   .handle {
     position: absolute;
-    inset-inline-start: var(--percent);
+    inset-inline-start: var(--handle-center);
     translate: -50% 0;
     &:dir(rtl) {
       translate: 50% 0;
@@ -296,6 +306,16 @@
 
     pointer-events: none;
     transition: width var(--m3-util-easing);
+
+    @media screen and (forced-colors: active) {
+      background-color: selecteditem;
+    }
+    &:is(input:disabled ~ .handle) {
+      background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      @media screen and (forced-colors: active) {
+        background-color: graytext;
+      }
+    }
   }
 
   .value {
@@ -310,7 +330,7 @@
     padding: 0.75rem 1rem;
     border-radius: var(--m3-slider-handle-shape);
 
-    inset-inline-start: var(--percent);
+    inset-inline-start: var(--handle-center);
     bottom: calc(var(--handle-height) + 4px);
     translate: -50% 0;
     &:dir(rtl) {
@@ -321,6 +341,10 @@
     pointer-events: none;
     transition: opacity var(--m3-util-easing);
     z-index: 1;
+    @media screen and (forced-colors: active) {
+      border: 2px solid selecteditem;
+      overflow: hidden;
+    }
   }
 
   input:focus-visible ~ .handle {
@@ -339,49 +363,4 @@
   input:enabled:active ~ .value {
     opacity: 1;
   }
-
-  input:disabled {
-    cursor: auto;
-  }
-  input:disabled ~ .track::before {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
-  }
-  input:disabled ~ .track::after {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.12);
-  }
-  input:disabled ~ .handle {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
-  }
-  input:disabled ~ .tick {
-    background-color: rgb(var(--m3-scheme-inverse-on-surface) / 0.66);
-  }
-  input:disabled ~ .tick.inactive,
-  input:disabled ~ .endstop {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.38);
-  }
-
-  @media screen and (forced-colors: active) {
-    .track::before {
-      background-color: selecteditem;
-    }
-    .track::after {
-      background-color: canvastext;
-    }
-    .handle {
-      background-color: selecteditem;
-    }
-    .value {
-      border: 2px solid selecteditem;
-      overflow: hidden;
-    }
-    input:disabled + .track::before {
-      background-color: canvastext;
-    }
-    input:disabled + .track::after {
-      background-color: graytext;
-    }
-    input:disabled ~ .handle {
-      background-color: graytext;
-    }
-  }
 </style>

package/package/forms/Slider.svelte.d.ts

@@ -10,7 +10,7 @@ type $$ComponentProps = {
     size?: "xs" | "s" | "m" | "l" | "xl";
     leadingIcon?: IconifyIcon;
     trailingIcon?: IconifyIcon;
-    ticks?: boolean;
+    stops?: boolean;
     endStops?: boolean;
     format?: (n: number) => string;
 } & Omit<HTMLInputAttributes, "size">;

package/package/forms/SliderTicks.svelte

@@ -6,7 +6,7 @@
   import type { ComponentProps } from "svelte";
   import Slider from "./Slider.svelte";
 
-  let props: Omit<ComponentProps<typeof Slider>, "ticks"> = $props();
+  let props: Omit<ComponentProps<typeof Slider>, "stops"> = $props();
 </script>
 
-<Slider {...props} ticks={true}></Slider>
+<Slider {...props} stops={true}></Slider>

package/package/forms/SliderTicks.svelte.d.ts

@@ -9,9 +9,9 @@ declare const SliderTicks: import("svelte").Component<Omit<{
     size?: "xs" | "s" | "m" | "l" | "xl";
     leadingIcon?: import("@iconify/types").IconifyIcon;
     trailingIcon?: import("@iconify/types").IconifyIcon;
-    ticks?: boolean;
+    stops?: boolean;
     endStops?: boolean;
     format?: (n: number) => string;
-} & Omit<import("svelte/elements").HTMLInputAttributes, "size">, "ticks">, {}, "">;
+} & Omit<import("svelte/elements").HTMLInputAttributes, "size">, "stops">, {}, "">;
 type SliderTicks = ReturnType<typeof SliderTicks>;
 export default SliderTicks;