m3-svelte 6.0.3 → 7.0.0

package/package/buttons/Button.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
-  import type { HTMLButtonAttributes, HTMLAttributes } from "svelte/elements";
+  import type { HTMLButtonAttributes, HTMLAttributes, HTMLLabelAttributes } from "svelte/elements";
   import type { Snippet } from "svelte";
-  import type { LabelAttrs, AnchorAttrs } from "../misc/typing-utils";
-  import Layer from "../misc/Layer.svelte";
+  import type { AnchorAttrs, NotLink } from "../misc/typing-utils";
+  import "../etc/layer.js";
 
   // If you want a toggle button, use `for` with a checkbox input.
-  type SummaryAttrs = HTMLAttributes<HTMLElement> & { summary: true };
-  type ActionProps = LabelAttrs | AnchorAttrs | SummaryAttrs | HTMLButtonAttributes;
+  type ActionProps =
+    | AnchorAttrs
+    | (NotLink<HTMLLabelAttributes> & { label: true })
+    | (NotLink<HTMLAttributes<HTMLElement>> & { summary: true })
+    | NotLink<HTMLButtonAttributes>;
   type Props = {
     variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;
@@ -25,30 +28,27 @@
   }: Props = $props();
 </script>
 
-{#if "for" in props}
-  <label class="m3-container {variant} {size} icon-{iconType}" class:square {...props}>
-    <Layer />
-    {@render children()}
-  </label>
-{:else if "href" in props}
-  <a class="m3-container {variant} {size} icon-{iconType}" class:square {...props}>
-    <Layer />
+{#if props.href != undefined}
+  <a class="m3-container m3-layer {variant} {size} icon-{iconType}" class:square {...props}>
     {@render children()}
   </a>
+{:else if "label" in props}
+  {@const { label: _, ...extra } = props}
+  <label class="m3-container m3-layer {variant} {size} icon-{iconType}" class:square {...extra}>
+    {@render children()}
+  </label>
 {:else if "summary" in props}
   {@const { summary: _, ...extra } = props}
-  <summary class="m3-container {variant} {size} icon-{iconType}" class:square {...extra}>
-    <Layer />
+  <summary class="m3-container m3-layer {variant} {size} icon-{iconType}" class:square {...extra}>
     {@render children()}
   </summary>
 {:else}
   <button
-    type={"onclick" in props ? "button" : "submit"}
-    class="m3-container {variant} {size} icon-{iconType}"
+    type={props.onclick ? "button" : "submit"}
+    class="m3-container m3-layer {variant} {size} icon-{iconType}"
     class:square
     {...props}
   >
-    <Layer />
     {@render children()}
   </button>
 {/if}
@@ -168,20 +168,19 @@
     background-color: transparent;
     cursor: pointer;
     user-select: none;
-    position: relative;
 
     &:disabled,
-    &:is(:global(input:disabled) + label) {
+    &:has(> :global(input:disabled)) {
       background-color: --translucent(var(--m3c-on-surface), 0.12);
       color: --translucent(var(--m3c-on-surface), 0.38);
       cursor: auto;
     }
 
-    &.elevated:not(:disabled, :global(input:disabled) + label) {
+    &.elevated:not(:disabled, :has(> :global(input:disabled))) {
       background-color: var(--m3c-surface-container-low);
       color: var(--m3c-primary);
       box-shadow: var(--m3-elevation-1);
-      &:is(:global(input:checked) + .m3-container) {
+      &:has(> :global(input:checked)) {
         background-color: var(--m3c-primary);
         color: var(--m3c-on-primary);
       }
@@ -191,18 +190,18 @@
         }
       }
     }
-    &.filled:not(:disabled, :global(input:disabled) + label) {
+    &.filled:not(:disabled, :has(> :global(input:disabled))) {
       background-color: var(--m3c-primary);
       color: var(--m3c-on-primary);
-      &:is(:global(input:is([type="checkbox"], [type="radio"]):not(:checked)) + label) {
+      &:has(> :global(input:is([type="checkbox"], [type="radio"]):not(:checked))) {
         background-color: var(--m3c-surface-container);
         color: var(--m3c-on-surface-variant);
       }
     }
-    &.tonal:not(:disabled, :global(input:disabled) + label) {
+    &.tonal:not(:disabled, :has(> :global(input:disabled))) {
       background-color: var(--m3c-secondary-container);
       color: var(--m3c-on-secondary-container);
-      &:is(:global(input:checked) + label) {
+      &:has(> :global(input:checked)) {
         background-color: var(--m3c-secondary);
         color: var(--m3c-on-secondary);
       }
@@ -219,20 +218,20 @@
       outline-width: 3px;
       outline-offset: -3px;
     }
-    &.outlined:not(:disabled, :global(input:disabled) + label) {
+    &.outlined:not(:disabled, :has(> :global(input:disabled))) {
       outline-color: var(--m3c-outline-variant);
       color: var(--m3c-on-surface-variant);
-      &:is(:global(input:checked) + label) {
+      &:has(> :global(input:checked)) {
         outline-color: var(--m3c-inverse-surface);
         background-color: var(--m3c-inverse-surface);
         color: var(--m3c-inverse-on-surface);
       }
     }
-    &.outlined:is(:disabled, :global(input:disabled) + label) {
+    &.outlined:has(> :global(input:disabled)) {
       outline-color: --translucent(var(--m3c-on-surface), 0.12);
       background-color: transparent;
     }
-    &.text:not(:disabled, :global(input:disabled) + label) {
+    &.text:not(:disabled, :has(> :global(input:disabled))) {
       color: var(--m3c-primary);
     }
     @media (hover: hover) {
@@ -241,11 +240,11 @@
       }
     }
 
-    &.square:not(:global(input:checked) + label, :global(:open) > summary),
-    &:not(.square):is(:global(input:checked) + label, :global(:open) > summary) {
+    &.square:not(:has(> :global(input:checked)), :global(:open) > summary),
+    &:not(.square):is(:has(> :global(input:checked)), :global(:open) > summary) {
       border-radius: var(--square-shape);
     }
-    &:active:not(:disabled, :global(input:disabled) + label) {
+    &:active:not(:disabled, :has(> :global(input:disabled))) {
       border-radius: var(--pressed-shape) !important;
     }
   }
@@ -257,6 +256,13 @@
     width: 1.25rem;
     height: 1.25rem;
   }
+  .m3-container > :global(input) {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+  }
 
   .m3-container {
     print-color-adjust: exact;

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

@@ -1,10 +1,12 @@
-import type { HTMLButtonAttributes, HTMLAttributes } from "svelte/elements";
+import type { HTMLButtonAttributes, HTMLAttributes, HTMLLabelAttributes } from "svelte/elements";
 import type { Snippet } from "svelte";
-import type { LabelAttrs, AnchorAttrs } from "../misc/typing-utils";
-type SummaryAttrs = HTMLAttributes<HTMLElement> & {
+import type { AnchorAttrs, NotLink } from "../misc/typing-utils";
+import "../etc/layer.js";
+type ActionProps = AnchorAttrs | (NotLink<HTMLLabelAttributes> & {
+    label: true;
+}) | (NotLink<HTMLAttributes<HTMLElement>> & {
     summary: true;
-};
-type ActionProps = LabelAttrs | AnchorAttrs | SummaryAttrs | HTMLButtonAttributes;
+}) | NotLink<HTMLButtonAttributes>;
 type Props = {
     variant?: "elevated" | "filled" | "tonal" | "outlined" | "text";
     square?: boolean;

package/package/buttons/ConnectedButtons.svelte

@@ -16,11 +16,5 @@
     gap: 0.125rem;
     border-radius: var(--m3-shape-full);
     overflow: hidden;
-
-    > :global(input) {
-      position: absolute;
-      opacity: 0;
-      pointer-events: none;
-    }
   }
 </style>

package/package/buttons/FAB.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   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";
 
   type ContentProps =
@@ -38,10 +37,9 @@
 
 <button
   type="button"
-  class="m3-container color-{color} size-{size} elevation-{elevation}"
+  class="m3-container color-{color} size-{size} elevation-{elevation} m3-layer"
   {...extra}
 >
-  <Layer />
   {#if icon}
     <Icon {icon} />
   {/if}
@@ -62,7 +60,6 @@
     @apply --m3-label-large;
     display: inline-flex;
     border: none;
-    position: relative;
     overflow: hidden;
 
     align-items: center;

package/package/buttons/SplitButton.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import iconExpand from "@ktibow/iconset-material-symbols/keyboard-arrow-down";
   import type { Snippet } from "svelte";
-  import Layer from "../misc/Layer.svelte";
   import Icon from "../misc/Icon.svelte";
   import type { ButtonAttrs } from "../misc/typing-utils";
 
@@ -36,13 +35,11 @@
 </script>
 
 <div class="m3-container {variant}">
-  <button type="button" class="split" {...extra}>
-    <Layer />
+  <button type="button" class="split m3-layer" {...extra}>
     {@render children()}
   </button>
   <details class="align-{x} align-{y}" use:autoclose>
-    <summary class="split">
-      <Layer />
+    <summary class="split m3-layer">
       <Icon icon={iconExpand} size={22} />
     </summary>
     {@render menu()}
@@ -146,7 +143,7 @@
     }
     &:is(details[open] summary) {
       --inner-shape: var(--m3-split-button-outer-shape);
-      > :global(.tint) {
+      &::after {
         opacity: 0.08;
       }
       > :global(svg) {

package/package/containers/Card.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import Layer from "../misc/Layer.svelte";
   import type { ButtonAttrs, DivAttrs } from "../misc/typing-utils";
 
   type ActionProps = ButtonAttrs | DivAttrs;
@@ -15,9 +14,8 @@
   } & ActionProps = $props();
 </script>
 
-{#if "onclick" in extra}
-  <button type="button" class="m3-container {variant}" {...extra}>
-    <Layer />
+{#if extra.onclick}
+  <button type="button" class="m3-container {variant} m3-layer" {...extra}>
     {@render children()}
   </button>
 {:else}
@@ -36,7 +34,6 @@
   .m3-container {
     display: flex;
     flex-direction: column;
-    position: relative;
     padding: 1rem; /* protip: use margin: -1rem (adjust as needed) to make images stretch to the end */
     border: none;
     border-radius: var(--m3-card-shape);
@@ -50,12 +47,13 @@
     font: inherit;
     letter-spacing: inherit;
     cursor: pointer;
+    transition: box-shadow var(--m3-easing-fast);
   }
   @media (hover: hover) {
     button:hover {
       box-shadow: var(--m3-elevation-1);
     }
-    button.type-elevated:hover {
+    button.elevated:hover {
       box-shadow: var(--m3-elevation-2);
     }
   }

package/package/containers/ListItem.svelte

@@ -1,14 +1,21 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
-  import type { HTMLAnchorAttributes, HTMLLabelAttributes } from "svelte/elements";
-  import Layer from "../misc/Layer.svelte";
-  import type { ButtonAttrs, DivAttrs, NotButton } from "../misc/typing-utils";
+  import type { HTMLLabelAttributes } from "svelte/elements";
 
+  import type {
+    ButtonAttrs,
+    AnchorAttrs,
+    DivAttrs,
+    NotButton,
+    NotLink,
+  } from "../misc/typing-utils";
+
+  type NotLabel<T> = T & { label?: false };
   type ActionProps =
-    | DivAttrs
-    | ButtonAttrs
-    | ({ label: true } & NotButton<HTMLLabelAttributes>)
-    | ({ href: string } & NotButton<HTMLAnchorAttributes>);
+    | NotLabel<ButtonAttrs>
+    | NotLabel<AnchorAttrs>
+    | (NotLink<NotButton<HTMLLabelAttributes>> & { label: true })
+    | NotLabel<DivAttrs>;
 
   let {
     leading,
@@ -54,22 +61,19 @@
 {/snippet}
 
 <li style:display="contents">
-  {#if "label" in props}
-    {@const { label: _, ...extra } = props}
-    <label class="m3-container focus-inset lines-{lines}" {...extra}>
-      <Layer />
-      {@render content()}
-    </label>
-  {:else if "onclick" in props}
-    <button type="button" class="m3-container focus-inset lines-{lines}" {...props}>
-      <Layer />
+  {#if props.onclick}
+    <button type="button" class="m3-container m3-layer lines-{lines}" {...props}>
       {@render content()}
     </button>
-  {:else if "href" in props}
-    <a class="m3-container focus-inset lines-{lines}" {...props}>
-      <Layer />
+  {:else if props.href != undefined}
+    <a class="m3-container m3-layer lines-{lines}" {...props}>
       {@render content()}
     </a>
+  {:else if props.label}
+    {@const { label: _, ...extra } = props}
+    <label class="m3-container m3-layer lines-{lines}" {...extra}>
+      {@render content()}
+    </label>
   {:else}
     <div class="m3-container lines-{lines}" {...props}>
       {@render content()}
@@ -79,6 +83,7 @@
 
 <style>
   .m3-container {
+    @apply --m3-focus-inward;
     display: flex;
     justify-self: stretch;
     padding: 0.5rem 1.5rem 0.5rem 1rem;
@@ -87,7 +92,7 @@
 
     text-align: inherit;
     border: none;
-    position: relative;
+
     background: transparent;
     color: inherit;
   }

package/package/containers/ListItem.svelte.d.ts

@@ -1,11 +1,12 @@
 import type { Snippet } from "svelte";
-import type { HTMLAnchorAttributes, HTMLLabelAttributes } from "svelte/elements";
-import type { ButtonAttrs, DivAttrs, NotButton } from "../misc/typing-utils";
-type ActionProps = DivAttrs | ButtonAttrs | ({
+import type { HTMLLabelAttributes } from "svelte/elements";
+import type { ButtonAttrs, AnchorAttrs, DivAttrs, NotButton, NotLink } from "../misc/typing-utils";
+type NotLabel<T> = T & {
+    label?: false;
+};
+type ActionProps = NotLabel<ButtonAttrs> | NotLabel<AnchorAttrs> | (NotLink<NotButton<HTMLLabelAttributes>> & {
     label: true;
-} & NotButton<HTMLLabelAttributes>) | ({
-    href: string;
-} & NotButton<HTMLAnchorAttributes>);
+}) | NotLabel<DivAttrs>;
 type $$ComponentProps = {
     leading?: Snippet;
     overline?: string;

package/package/containers/MenuItem.svelte

@@ -2,7 +2,6 @@
   import type { Snippet } from "svelte";
   import type { IconifyIcon } from "@iconify/types";
   import Icon from "../misc/Icon.svelte";
-  import Layer from "../misc/Layer.svelte";
 
   let {
     icon,
@@ -17,8 +16,7 @@
   } = $props();
 </script>
 
-<button type="button" class="item focus-inset" {disabled} {onclick}>
-  <Layer />
+<button type="button" class="item m3-layer" {disabled} {onclick}>
   {#if icon == "space"}
     <span class="icon"></span>
   {:else if icon}
@@ -32,6 +30,7 @@
 <style>
   .item {
     @apply --m3-label-large;
+    @apply --m3-focus-inward;
     display: flex;
     align-items: center;
     height: --m3-density(3rem);
@@ -40,7 +39,7 @@
     white-space: nowrap;
 
     border: none;
-    position: relative;
+
     background-color: transparent;
     color: var(--m3c-on-surface);
 

package/package/containers/Snackbar.svelte

@@ -21,7 +21,6 @@
   import iconX from "@ktibow/iconset-material-symbols/close";
   import Icon from "../misc/Icon.svelte";
   import SnackbarItem from "./SnackbarItem.svelte";
-  import Layer from "../misc/Layer.svelte";
 
   let { closeTitle = "Close" }: { closeTitle?: string } = $props();
   let shown:
@@ -61,13 +60,12 @@
         {#if shown.closable}
           <button
             type="button"
-            class="close"
+            class="close m3-layer"
             title={closeTitle}
             onclick={() => {
               shown = undefined;
             }}
           >
-            <Layer />
             <Icon icon={iconX} />
           </button>
         {/if}
@@ -80,7 +78,7 @@
   .holder {
     position: fixed;
     padding-bottom: 1rem;
-    bottom: var(--m3v-bottom-offset);
+    bottom: var(--m3v-bottom-offset, 0);
     left: 50%;
     transform: translate(-50%, 0);
     z-index: 3;
@@ -100,7 +98,6 @@
     background-color: transparent;
     color: unset;
     cursor: pointer;
-    position: relative;
   }
   button :global(svg) {
     width: 1.5rem;

package/package/etc/colors.d.ts

@@ -0,0 +1,13 @@
+import { MaterialDynamicColors, DynamicColor } from "@ktibow/material-color-utilities-nightly";
+import type { DynamicScheme } from "@ktibow/material-color-utilities-nightly";
+export declare const materialColors: MaterialDynamicColors;
+export declare const primaryContainerSubtle: DynamicColor;
+export declare const onPrimaryContainerSubtle: DynamicColor;
+export declare const secondaryContainerSubtle: DynamicColor;
+export declare const onSecondaryContainerSubtle: DynamicColor;
+export declare const tertiaryContainerSubtle: DynamicColor;
+export declare const onTertiaryContainerSubtle: DynamicColor;
+export declare const errorContainerSubtle: DynamicColor;
+export declare const onErrorContainerSubtle: DynamicColor;
+export declare const colors: DynamicColor[];
+export declare const genCSS: (light: DynamicScheme, dark: DynamicScheme, cs: DynamicColor[]) => string;

package/package/{misc → etc}/colors.js

@@ -8,60 +8,60 @@ const onOnPrimary = DynamicColor.fromPalette({
     contrastCurve: () => new ContrastCurve(6, 6, 7, 11),
 });
 // Custom colors for you to use
-const primaryContainerSubtle = DynamicColor.fromPalette({
+export const primaryContainerSubtle = DynamicColor.fromPalette({
     name: "primary_container_subtle",
     palette: (s) => s.primaryPalette,
     isBackground: true,
     background: (s) => materialColors.highestSurface(s),
     contrastCurve: () => undefined,
 });
-const onPrimaryContainerSubtle = DynamicColor.fromPalette({
+export const onPrimaryContainerSubtle = DynamicColor.fromPalette({
     name: "on_primary_container_subtle",
     palette: (s) => s.primaryPalette,
     background: () => primaryContainerSubtle,
     contrastCurve: () => new ContrastCurve(6, 6, 7, 11),
 });
-const secondaryContainerSubtle = DynamicColor.fromPalette({
+export const secondaryContainerSubtle = DynamicColor.fromPalette({
     name: "secondary_container_subtle",
     palette: (s) => s.secondaryPalette,
     isBackground: true,
     background: (s) => materialColors.highestSurface(s),
     contrastCurve: () => undefined,
 });
-const onSecondaryContainerSubtle = DynamicColor.fromPalette({
+export const onSecondaryContainerSubtle = DynamicColor.fromPalette({
     name: "on_secondary_container_subtle",
     palette: (s) => s.secondaryPalette,
     background: () => secondaryContainerSubtle,
     contrastCurve: () => new ContrastCurve(6, 6, 7, 11),
 });
-const tertiaryContainerSubtle = DynamicColor.fromPalette({
+export const tertiaryContainerSubtle = DynamicColor.fromPalette({
     name: "tertiary_container_subtle",
     palette: (s) => s.tertiaryPalette,
     isBackground: true,
     background: (s) => materialColors.highestSurface(s),
     contrastCurve: () => undefined,
 });
-const onTertiaryContainerSubtle = DynamicColor.fromPalette({
+export const onTertiaryContainerSubtle = DynamicColor.fromPalette({
     name: "on_tertiary_container_subtle",
     palette: (s) => s.tertiaryPalette,
     background: () => tertiaryContainerSubtle,
     contrastCurve: () => new ContrastCurve(6, 6, 7, 11),
 });
-const errorContainerSubtle = DynamicColor.fromPalette({
+export const errorContainerSubtle = DynamicColor.fromPalette({
     name: "error_container_subtle",
     palette: (s) => s.errorPalette,
     isBackground: true,
     background: (s) => materialColors.highestSurface(s),
     contrastCurve: () => undefined,
 });
-const onErrorContainerSubtle = DynamicColor.fromPalette({
+export const onErrorContainerSubtle = DynamicColor.fromPalette({
     name: "on_error_container_subtle",
     palette: (s) => s.errorPalette,
     background: () => errorContainerSubtle,
     contrastCurve: () => new ContrastCurve(6, 6, 7, 11),
 });
 export const colors = [
-    ...materialColors.allColors,
+    ...materialColors.allColors.filter((c) => c.name != "background" && c.name != "on_background"),
     materialColors.shadow(),
     materialColors.scrim(),
     onOnPrimary,
@@ -74,17 +74,30 @@ export const colors = [
     errorContainerSubtle,
     onErrorContainerSubtle,
 ];
-export const pairs = [
-    [materialColors.primary(), materialColors.onPrimary()],
-    [materialColors.primaryContainer(), materialColors.onPrimaryContainer()],
-    [materialColors.secondary(), materialColors.onSecondary()],
-    [materialColors.secondaryContainer(), materialColors.onSecondaryContainer()],
-    [materialColors.tertiary(), materialColors.onTertiary()],
-    [materialColors.tertiaryContainer(), materialColors.onTertiaryContainer()],
-    [materialColors.background(), materialColors.onBackground()],
-    [materialColors.surface(), materialColors.onSurface()],
-    [materialColors.inverseSurface(), materialColors.inverseOnSurface()],
-    [materialColors.surfaceVariant(), materialColors.onSurfaceVariant()],
-    [materialColors.error(), materialColors.onError()],
-    [materialColors.errorContainer(), materialColors.onErrorContainer()],
-];
+export const genCSS = (light, dark, cs) => {
+    const argbToHex = (argb) => {
+        const rgb = argb & 0xffffff;
+        const hex = rgb.toString(16).padStart(6, "0");
+        if (hex[0] == hex[1] && hex[2] == hex[3] && hex[4] == hex[5]) {
+            return `#${hex[0]}${hex[2]}${hex[4]}`;
+        }
+        return `#${hex}`;
+    };
+    const genColorVariable = (name, lightArgb, darkArgb) => {
+        const kebabCase = name.replaceAll("_", "-");
+        const lightHex = argbToHex(lightArgb);
+        const darkHex = argbToHex(darkArgb);
+        return `    --m3c-${kebabCase}: ${lightHex == darkHex ? lightHex : `light-dark(${lightHex}, ${darkHex})`};`;
+    };
+    const colors = cs
+        .map((color) => genColorVariable(color.name, color.getArgb(light), color.getArgb(dark)))
+        .join("\n");
+    return `:root {
+  color-scheme: light dark;
+}
+@layer tokens {
+  :root {
+${colors}
+  }
+}`;
+};

package/package/etc/layer.css

@@ -0,0 +1,38 @@
+:where(.m3-layer) {
+  position: relative;
+
+  /* Hitbox for rounded elements */
+  &::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+
+  /* Tint */
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+    background-color: currentColor;
+    opacity: 0;
+    transition: opacity var(--m3-easing-fast);
+  }
+}
+:disabled.m3-layer::after,
+input:disabled + .m3-layer-container.m3-layer::after,
+label:has(> input:disabled).m3-layer::after {
+  display: none;
+}
+@media (hover: hover) {
+  :hover.m3-layer::after,
+  :active.m3-layer::after {
+    opacity: 0.08;
+  }
+}
+:focus-visible.m3-layer::after,
+label:has(> input:focus-visible).m3-layer::after,
+html:not(.js) :active.m3-layer::after {
+  opacity: 0.12;
+}

package/package/etc/layer.d.ts

@@ -0,0 +1 @@
+import "./layer.css";