m3-svelte 3.6.0 → 4.0.0-beta.0

package/package/buttons/Button.svelte

@@ -1,50 +1,169 @@
 <script lang="ts">
-  import type { HTMLButtonAttributes } from "svelte/elements";
+  import type {
+    HTMLButtonAttributes,
+    HTMLAnchorAttributes,
+    HTMLLabelAttributes,
+  } from "svelte/elements";
+  import type { Snippet } from "svelte";
   import Layer from "../misc/Layer.svelte";
-  export let display = "inline-flex";
-  export let extraOptions: HTMLButtonAttributes = {};
-  export let iconType: "none" | "left" | "full" = "none";
-  export let type: "elevated" | "filled" | "tonal" | "outlined" | "text";
-  export let disabled = false;
+
+  // If you want a toggle button, use `for` with an `<input>`.
+  type ActionProps =
+    | ({ click: () => void; disabled?: boolean } & HTMLButtonAttributes)
+    | ({ href: string } & HTMLAnchorAttributes)
+    | ({ for: string } & HTMLLabelAttributes);
+  type Props = {
+    variant: "elevated" | "filled" | "tonal" | "outlined" | "text";
+    square?: boolean;
+    iconType?: "none" | "left" | "full";
+    children: Snippet;
+  } & ActionProps;
+
+  let props: Props = $props();
 </script>
 
-<button
-  on:click|stopPropagation
-  {disabled}
-  class="m3-container m3-font-label-large {type} icon-{iconType}"
-  style="display: {display};"
-  {...extraOptions}
->
-  <Layer />
-  <slot />
-</button>
+{#if "click" in props}
+  {@const {
+    variant,
+    click,
+    disabled,
+    square = false,
+    iconType = "none",
+    children,
+    ...extra
+  } = props}
+  <button
+    onclick={click}
+    {disabled}
+    class="m3-container m3-font-label-large {variant} icon-{iconType}"
+    class:square
+    {...extra}
+  >
+    <Layer morph />
+    {@render children()}
+  </button>
+{:else if "href" in props}
+  {@const { variant, href, square = false, iconType = "none", children, ...extra } = props}
+  <a
+    {href}
+    class="m3-container m3-font-label-large {variant} icon-{iconType}"
+    class:square
+    {...extra}
+  >
+    <Layer morph />
+    {@render children()}
+  </a>
+{:else}
+  {@const { variant, for: forItem, square = false, iconType = "none", children, ...extra } = props}
+  <label
+    for={forItem}
+    class="m3-container m3-font-label-large {variant} icon-{iconType}"
+    class:square
+    {...extra}
+  >
+    <Layer morph />
+    {@render children()}
+  </label>
+{/if}
 
 <style>
   :root {
-    --m3-button-shape: var(--m3-util-rounding-full);
+    --m3-button-shape: 1.25rem;
   }
 
   .m3-container {
+    display: inline-flex;
     border: none;
     height: 2.5rem;
-    padding: 0 1.5rem;
+    gap: 0.5rem;
+    padding: 0 1rem;
     border-radius: var(--m3-button-shape);
     transition: all 200ms;
 
     align-items: center;
     justify-content: center;
     cursor: pointer;
+    user-select: none;
     position: relative;
     overflow: hidden;
+    -webkit-tap-highlight-color: transparent;
+
+    &:disabled,
+    &:is(:global(input:disabled) + label) {
+      background-color: rgb(var(--m3-scheme-on-surface) / 0.12);
+      color: rgb(var(--m3-scheme-on-surface) / 0.38);
+      cursor: auto;
+    }
+
+    &.elevated:not(:disabled, :global(input:disabled) + label) {
+      background-color: rgb(var(--m3-scheme-surface-container-low));
+      color: rgb(var(--m3-scheme-primary));
+      box-shadow: var(--m3-util-elevation-1);
+      &:is(:global(input:checked) + .m3-container) {
+        background-color: rgb(var(--m3-scheme-primary));
+        color: rgb(var(--m3-scheme-on-primary));
+      }
+      @media (hover: hover) {
+        &:hover {
+          box-shadow: var(--m3-util-elevation-2);
+        }
+      }
+    }
+    &.filled:not(:disabled, :global(input:disabled) + label) {
+      background-color: rgb(var(--m3-scheme-primary));
+      color: rgb(var(--m3-scheme-on-primary));
+      &:is(:global(input:not(:checked)) + label) {
+        background-color: rgb(var(--m3-scheme-surface-container));
+        color: rgb(var(--m3-scheme-on-surface-variant));
+      }
+    }
+    &.tonal:not(:disabled, :global(input:disabled) + label) {
+      background-color: rgb(var(--m3-scheme-secondary-container));
+      color: rgb(var(--m3-scheme-on-secondary-container));
+      &:is(:global(input:checked) + label) {
+        background-color: rgb(var(--m3-scheme-secondary));
+        color: rgb(var(--m3-scheme-on-secondary));
+      }
+    }
+    &.outlined {
+      outline: 1px solid rgb(var(--m3-scheme-outline));
+      outline-offset: -1px;
+    }
+    &.outlined:not(:disabled, :global(input:disabled) + label) {
+      outline-color: rgb(var(--m3-scheme-outline));
+      color: rgb(var(--m3-scheme-primary));
+      &:is(:global(input:checked) + label) {
+        outline-color: rgb(var(--m3-scheme-inverse-surface));
+        background-color: rgb(var(--m3-scheme-inverse-surface));
+        color: rgb(var(--m3-scheme-inverse-on-surface));
+      }
+    }
+    &.outlined:is(:disabled, :global(input:disabled) + label) {
+      outline-color: rgb(var(--m3-scheme-on-surface) / 0.12);
+      background-color: transparent;
+    }
+    &.text:not(:disabled, :global(input:disabled) + label) {
+      background-color: transparent;
+      color: rgb(var(--m3-scheme-primary));
+    }
+    @media (hover: hover) {
+      &:is(.filled, .tonal):not(:disabled, label):hover {
+        box-shadow: var(--m3-util-elevation-1);
+      }
+    }
+
+    &.square:not(:global(input:checked) + label),
+    &:is(:global(input:checked) + label):not(.square) {
+      border-radius: var(--m3-util-rounding-medium);
+    }
+    &:global(.activated) {
+      border-radius: var(--m3-util-rounding-small) !important;
+    }
   }
 
   .m3-container > :global(*) {
     flex-shrink: 0;
   }
-  .icon-left {
-    padding-left: 1rem;
-    gap: 0.5rem;
-  }
   .icon-left > :global(svg) {
     width: 1.125rem;
     height: 1.125rem;
@@ -58,61 +177,6 @@
     height: 1.5rem;
   }
 
-  .m3-container:disabled {
-    background-color: rgb(var(--m3-scheme-on-surface) / 0.12);
-    color: rgb(var(--m3-scheme-on-surface) / 0.38);
-    cursor: auto;
-  }
-
-  .m3-container:enabled.elevated {
-    background-color: rgb(var(--m3-scheme-surface-container-low));
-    color: rgb(var(--m3-scheme-primary));
-    box-shadow: var(--m3-util-elevation-1);
-  }
-
-  .m3-container:enabled.filled {
-    background-color: rgb(var(--m3-scheme-primary));
-    color: rgb(var(--m3-scheme-on-primary));
-  }
-
-  .m3-container:enabled.tonal {
-    background-color: rgb(var(--m3-scheme-secondary-container));
-    color: rgb(var(--m3-scheme-on-secondary-container));
-  }
-
-  .m3-container.outlined {
-    background-color: transparent;
-    border: 0.0625rem solid rgb(var(--m3-scheme-on-surface) / 0.12);
-  }
-  .m3-container:enabled.outlined {
-    border: 0.0625rem solid rgb(var(--m3-scheme-outline));
-    color: rgb(var(--m3-scheme-primary));
-  }
-
-  .m3-container.text {
-    background-color: transparent;
-    padding: 0 0.75rem;
-    color: rgb(var(--m3-scheme-primary));
-  }
-  .m3-container.text.icon-left {
-    padding-right: 1rem;
-  }
-
-  .m3-container {
-    -webkit-tap-highlight-color: transparent;
-  }
-  @media (hover: hover) {
-    .m3-container:enabled.elevated:hover {
-      box-shadow: var(--m3-util-elevation-2);
-    }
-    .m3-container:enabled.filled:hover {
-      box-shadow: var(--m3-util-elevation-1);
-    }
-    .m3-container:enabled.tonal:hover {
-      box-shadow: var(--m3-util-elevation-1);
-    }
-  }
-
   .m3-container {
     print-color-adjust: exact;
     -webkit-print-color-adjust: exact;
@@ -120,7 +184,7 @@
   @media screen and (forced-colors: active) {
     .m3-container:is(.elevated, .filled, .tonal) {
       background-color: transparent;
-      border: 0.0625rem solid;
+      border: 1px solid;
     }
     .m3-container:disabled {
       opacity: 0.38;

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

@@ -1,36 +1,19 @@
-import type { HTMLButtonAttributes } from "svelte/elements";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
-    default: any;
-} ? Props extends Record<string, never> ? any : {
-    children?: any;
-} : {});
-declare const Button: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
-    display?: string;
-    extraOptions?: HTMLButtonAttributes;
-    iconType?: "none" | "left" | "full";
-    type: "elevated" | "filled" | "tonal" | "outlined" | "text";
+import type { HTMLButtonAttributes, HTMLAnchorAttributes, HTMLLabelAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+type ActionProps = ({
+    click: () => void;
     disabled?: boolean;
-}, {
-    default: {};
-}>, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Button = InstanceType<typeof Button>;
+} & HTMLButtonAttributes) | ({
+    href: string;
+} & HTMLAnchorAttributes) | ({
+    for: string;
+} & HTMLLabelAttributes);
+type Props = {
+    variant: "elevated" | "filled" | "tonal" | "outlined" | "text";
+    square?: boolean;
+    iconType?: "none" | "left" | "full";
+    children: Snippet;
+} & ActionProps;
+declare const Button: import("svelte").Component<Props, {}, "">;
+type Button = ReturnType<typeof Button>;
 export default Button;

package/package/buttons/ConnectedButtons.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  let { round = false, children }: { round?: boolean; children: Snippet } = $props();
+</script>
+
+<div class="m3-container" class:round>
+  {@render children()}
+</div>
+
+<style>
+  .m3-container {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 1fr;
+    gap: 0.125rem;
+    border-radius: var(--m3-util-rounding-full);
+    overflow: hidden;
+
+    > :global(input) {
+      position: absolute;
+      opacity: 0;
+      pointer-events: none;
+    }
+  }
+</style>

package/package/buttons/ConnectedButtons.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    round?: boolean;
+    children: Snippet;
+};
+declare const ConnectedButtons: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConnectedButtons = ReturnType<typeof ConnectedButtons>;
+export default ConnectedButtons;

package/package/buttons/FAB.svelte

@@ -1,27 +1,41 @@
 <script lang="ts">
   import type { HTMLButtonAttributes } from "svelte/elements";
-  import Icon from "../misc/_icon.svelte";
   import type { IconifyIcon } from "@iconify/types";
+  import Icon from "../misc/_icon.svelte";
   import Layer from "../misc/Layer.svelte";
 
-  export let display = "inline-flex";
-  export let extraOptions: HTMLButtonAttributes = {};
-  export let color: "primary" | "surface" | "secondary" | "tertiary" = "primary";
-  export let size: "small" | "normal" | "large" = "normal";
-  export let elevation: "normal" | "lowered" | "none" = "normal";
-  export let icon: IconifyIcon | undefined = undefined;
-  export let text: string | undefined = undefined;
-  $: {
-    if (!icon && !text) console.warn("you need at least something in a FAB");
-    if (size != "normal" && text) console.warn("extended fabs are supposed to use size normal");
-  }
+  type ContentProps =
+    | {
+        size?: "normal";
+        icon?: IconifyIcon;
+        text: string;
+      }
+    | {
+        size?: "small" | "normal" | "large";
+        icon: IconifyIcon;
+        text?: undefined;
+      };
+
+  let {
+    color = "primary",
+    elevation = "normal",
+    click,
+    size = "normal",
+    icon,
+    text,
+    ...extra
+  }: {
+    color?: "primary" | "surface" | "secondary" | "tertiary";
+    elevation?: "normal" | "lowered" | "none";
+    click: () => void;
+  } & ContentProps &
+    HTMLButtonAttributes = $props();
 </script>
 
 <button
-  on:click
+  onclick={click}
   class="m3-container m3-font-label-large color-{color} size-{size} elevation-{elevation}"
-  style="display: {display};"
-  {...extraOptions}
+  {...extra}
 >
   <Layer />
   {#if icon}
@@ -39,6 +53,7 @@
     --m3-fab-large-shape: var(--m3-util-rounding-extra-large);
   }
   button {
+    display: inline-flex;
     border: none;
     position: relative;
     overflow: hidden;

package/package/buttons/FAB.svelte.d.ts

@@ -1,30 +1,19 @@
 import type { HTMLButtonAttributes } from "svelte/elements";
 import type { IconifyIcon } from "@iconify/types";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Fab: $$__sveltets_2_IsomorphicComponent<{
-    display?: string;
-    extraOptions?: HTMLButtonAttributes;
-    color?: "primary" | "surface" | "secondary" | "tertiary";
+type ContentProps = {
+    size?: "normal";
+    icon?: IconifyIcon;
+    text: string;
+} | {
     size?: "small" | "normal" | "large";
+    icon: IconifyIcon;
+    text?: undefined;
+};
+type $$ComponentProps = {
+    color?: "primary" | "surface" | "secondary" | "tertiary";
     elevation?: "normal" | "lowered" | "none";
-    icon?: IconifyIcon | undefined;
-    text?: string | undefined;
-}, {
-    click: MouseEvent;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Fab = InstanceType<typeof Fab>;
+    click: () => void;
+} & ContentProps & HTMLButtonAttributes;
+declare const Fab: import("svelte").Component<$$ComponentProps, {}, "">;
+type Fab = ReturnType<typeof Fab>;
 export default Fab;

package/package/containers/BottomSheet.svelte

@@ -1,31 +1,32 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
+  import type { Snippet } from "svelte";
   import type { TransitionConfig } from "svelte/transition";
   import { easeEmphasizedAccel, easeEmphasizedDecel } from "../misc/easing";
   import { outroClass } from "../misc/animation";
 
-  let height = 480;
-  let container: HTMLDivElement;
-  let isDragging = false,
-    startY = 0;
-  $: if (height < 48) dispatch("close", "low");
+  let { children, close }: { children: Snippet; close: (reason: "esc" | "click" | "low") => void } =
+    $props();
+
+  let height = $state(480);
+  let container: HTMLDivElement | undefined = $state();
+  let isDragging = $state(false),
+    startY = $state(0);
 
-  const dispatch = createEventDispatcher();
   const open = (node: HTMLDialogElement) => node.showModal();
   const heightAnim = (
     node: HTMLDialogElement,
-    options: Record<string, unknown> = {},
+    options: { duration: number; easing: typeof easeEmphasizedDecel },
   ): TransitionConfig => {
     if (node.clientHeight < height) height = node.clientHeight;
     return {
-      duration: 400,
-      easing: easeEmphasizedDecel,
-      ...options,
+      duration: options.duration,
+      easing: options.easing,
       css: (t) => `max-height: ${t * height}px`,
     };
   };
 
   const moveWheel = (e: WheelEvent) => {
+    e.preventDefault();
     height += e.deltaY;
     if (container && container.clientHeight < height) height = container.clientHeight;
   };
@@ -36,50 +37,55 @@
       startY = e.clientY;
     }
   };
+  $effect(() => {
+    if (height < 48) close("low");
+  });
 </script>
 
 <svelte:window
-  on:mousemove={moveMouse}
-  on:mouseup={() => (isDragging = false)}
-  on:touchmove={(e) => moveMouse(e.touches[0])}
-  on:touchend={() => (isDragging = false)}
+  onmousemove={moveMouse}
+  onmouseup={() => (isDragging = false)}
+  ontouchmove={(e) => moveMouse(e.touches[0])}
+  ontouchend={() => (isDragging = false)}
 />
 
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
 <dialog
   class="m3-container"
-  style="max-height: {height}px"
+  style:max-height="{height}px"
   use:open
   use:outroClass
-  on:cancel|preventDefault={() => {
-    dispatch("close", "browser");
+  oncancel={(e) => {
+    e.preventDefault();
+    close("esc");
   }}
-  on:mousedown|self={() => {
-    dispatch("close", "click");
+  onmousedown={(e) => {
+    if (e.target != e.currentTarget) return;
+    close("click");
   }}
-  on:wheel|preventDefault={moveWheel}
-  in:heightAnim
+  onwheel={moveWheel}
+  in:heightAnim={{ easing: easeEmphasizedDecel, duration: 400 }}
   out:heightAnim={{ easing: easeEmphasizedAccel, duration: 300 }}
 >
   <div
     class="container"
     bind:this={container}
-    on:touchstart={(e) => {
+    ontouchstart={(e) => {
       isDragging = true;
       startY = e.touches[0].clientY;
     }}
   >
-    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
     <div
       class="handle-container"
-      on:mousedown|preventDefault={(e) => {
+      onmousedown={(e) => {
+        e.preventDefault();
         isDragging = true;
         startY = e.clientY;
       }}
     >
       <div class="handle"></div>
     </div>
-    <slot />
+    {@render children()}
   </div>
 </dialog>
 

package/package/containers/BottomSheet.svelte.d.ts

@@ -1,22 +1,8 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const BottomSheet: $$__sveltets_2_IsomorphicComponent<any, {
-    close: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type BottomSheet = InstanceType<typeof BottomSheet>;
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+    close: (reason: "esc" | "click" | "low") => void;
+};
+declare const BottomSheet: import("svelte").Component<$$ComponentProps, {}, "">;
+type BottomSheet = ReturnType<typeof BottomSheet>;
 export default BottomSheet;