m3-svelte 5.15.4 → 6.0.0

package/package/forms/_picker/Item.svelte

@@ -18,7 +18,7 @@
 
 <button
   type="button"
-  class="item m3-font-body-small"
+  class="item"
   {disabled}
   class:today
   class:selected
@@ -30,6 +30,13 @@
 
 <style>
   .item {
+    
+  font-family: var(--m3-font);
+  font-size: 0.75rem;
+  line-height: 1.333;
+  letter-spacing: 0.025rem;
+  font-weight: 400;
+
     display: inline-flex;
     width: 2.5rem;
     height: 2.5rem;
@@ -38,22 +45,22 @@
     justify-content: center;
 
     background-color: transparent;
-    color: rgb(var(--m3-scheme-on-surface));
+    color: var(--m3c-on-surface);
     border: none;
     cursor: pointer;
-    transition: var(--m3-util-easing-fast);
+    transition: var(--m3-easing-fast);
     position: relative;
   }
   button:disabled {
     cursor: auto;
-    color: rgb(var(--m3-scheme-on-surface-variant) / 0.38);
+    color: oklab(from var(--m3c-on-surface-variant) l a b / 0.38);
   }
   .today {
-    border: solid 1px rgb(var(--m3-scheme-primary));
-    color: rgb(var(--m3-scheme-primary));
+    border: solid 1px var(--m3c-primary);
+    color: var(--m3c-primary);
   }
   .selected {
-    background-color: rgb(var(--m3-scheme-primary)) !important;
-    color: rgb(var(--m3-scheme-on-primary));
+    background-color: var(--m3c-primary) !important;
+    color: var(--m3c-on-primary);
   }
 </style>

package/package/index.d.ts

@@ -1,3 +1,5 @@
+export { default as ChipChooser } from "./misc/ChipChooser.svelte";
+export { default as Divider } from "./misc/Divider.svelte";
 export { default as Icon } from "./misc/Icon.svelte";
 export { default as Layer } from "./misc/Layer.svelte";
 export * from "./misc/animation.js";
@@ -6,6 +8,7 @@ export * from "./misc/shapes.js";
 export * from "./misc/shapesAnimatable.js";
 export * from "./misc/utils.js";
 export * from "./misc/easing.js";
+export * from "./misc/badge.js";
 export { default as Button } from "./buttons/Button.svelte";
 export { default as ConnectedButtons } from "./buttons/ConnectedButtons.svelte";
 export { default as FAB } from "./buttons/FAB.svelte";
@@ -17,21 +20,17 @@ export { default as Dialog } from "./containers/Dialog.svelte";
 export { default as ListItem } from "./containers/ListItem.svelte";
 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 type { SnackbarIn } from "./containers/Snackbar.svelte";
+export { default as Snackbar, snackbar } from "./containers/Snackbar.svelte";
 export { default as SnackbarItem } from "./containers/SnackbarItem.svelte";
-export { default as NewSnackbar, snackbar } from "./containers/NewSnackbar.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 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";
@@ -52,6 +51,3 @@ export { default as Tabs } from "./nav/Tabs.svelte";
 export { default as TabsLink } from "./nav/TabsLink.svelte";
 export { default as VariableTabs } from "./nav/VariableTabs.svelte";
 export { default as VariableTabsLink } from "./nav/VariableTabsLink.svelte";
-export * from "./utils/badge.js";
-export { default as ChipChooser } from "./utils/ChipChooser.svelte";
-export { default as Divider } from "./utils/Divider.svelte";

package/package/index.js

@@ -1,3 +1,5 @@
+export { default as ChipChooser } from "./misc/ChipChooser.svelte";
+export { default as Divider } from "./misc/Divider.svelte";
 export { default as Icon } from "./misc/Icon.svelte";
 export { default as Layer } from "./misc/Layer.svelte";
 export * from "./misc/animation.js";
@@ -6,6 +8,7 @@ export * from "./misc/shapes.js";
 export * from "./misc/shapesAnimatable.js";
 export * from "./misc/utils.js";
 export * from "./misc/easing.js";
+export * from "./misc/badge.js";
 export { default as Button } from "./buttons/Button.svelte";
 export { default as ConnectedButtons } from "./buttons/ConnectedButtons.svelte";
 export { default as FAB } from "./buttons/FAB.svelte";
@@ -17,20 +20,17 @@ export { default as Dialog } from "./containers/Dialog.svelte";
 export { default as ListItem } from "./containers/ListItem.svelte";
 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 Snackbar, snackbar } from "./containers/Snackbar.svelte";
 export { default as SnackbarItem } from "./containers/SnackbarItem.svelte";
-export { default as NewSnackbar, snackbar } from "./containers/NewSnackbar.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 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";
@@ -51,6 +51,3 @@ export { default as Tabs } from "./nav/Tabs.svelte";
 export { default as TabsLink } from "./nav/TabsLink.svelte";
 export { default as VariableTabs } from "./nav/VariableTabs.svelte";
 export { default as VariableTabsLink } from "./nav/VariableTabsLink.svelte";
-export * from "./utils/badge.js";
-export { default as ChipChooser } from "./utils/ChipChooser.svelte";
-export { default as Divider } from "./utils/Divider.svelte";

package/package/{utils → misc}/Divider.svelte

@@ -13,7 +13,7 @@
     margin: 0;
     height: 0;
     border: none;
-    border-bottom: solid 1px rgb(var(--m3-scheme-outline-variant));
+    border-bottom: solid 1px var(--m3c-outline-variant);
   }
   .inset {
     margin-left: 1rem;

package/package/misc/Icon.svelte

@@ -16,7 +16,6 @@
   width={size || "1em"}
   height={size || "1em"}
   viewBox="0 0 {icon.width} {icon.height}"
-  data-badge={icon.body.includes("<!--badge-->") ? "" : undefined}
   {...extra}
 >
   {@html icon.body}
@@ -25,9 +24,6 @@
 <style>
   svg {
     flex-shrink: 0;
-  }
-  /* deprecated: eventually want to just do this for all icons */
-  svg[data-badge] {
     overflow: visible;
   }
 </style>

package/package/misc/Layer.svelte

@@ -189,7 +189,7 @@
 
     background-color: currentColor;
     opacity: 0;
-    transition: opacity var(--m3-util-easing-fast);
+    transition: opacity var(--m3-easing-fast);
 
     &:not(
       :global(input:disabled + label) > .tint,

package/package/{utils → misc}/badge.js

@@ -10,18 +10,21 @@ export const addBadge = (icon, n) => {
         const text = n > max ? `${max}+` : n.toString();
         badge =
             `<!--badge--><foreignObject x="${x}" y="${y}" width="40" height="16">` +
-                `<div class="m3-font-label-small" style="${[
-                    "background-color:rgb(var(--m3-scheme-error))",
-                    "color:rgb(var(--m3-scheme-on-error))",
+                `<div style="${[
+                    "font-size:0.688rem",
+                    "letter-spacing:0.031rem",
+                    "font-weight:500",
+                    "background-color:var(--m3c-error)",
+                    "color:var(--m3c-on-error)",
                     "width:max-content",
                     "padding-inline:4px",
-                    "border-radius:var(--m3-util-rounding-full)",
+                    "border-radius:var(--m3-shape-full)",
                 ].join(";")}">` +
                 text +
                 `</div>`;
     }
     else {
-        badge = `<circle cx="${width - 3}" cy="3" r="3" fill="rgb(var(--m3-scheme-error))"/>`;
+        badge = `<circle cx="${width - 3}" cy="3" r="3" fill="var(--m3c-error)"/>`;
     }
     return {
         ...icon,

package/package/misc/recommended-styles.css

@@ -1,8 +1,10 @@
-:root {
-  --m3-util-refocus: refocus-outward 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
+@layer tokens {
+  :root {
+    --m3-refocus: refocus-outward 0.6s cubic-bezier(0.14, 5.63, 0.4, 0.5) forwards;
+  }
 }
 :focus-visible:not(.focus-inset, .focus-none) {
-  animation: var(--m3-util-refocus);
+  animation: var(--m3-refocus);
   outline: none;
 }
 :focus-visible:is(.focus-inset):not(.focus-none) {
@@ -14,26 +16,26 @@
 }
 @keyframes refocus-outward {
   0% {
-    box-shadow: 0 0 0 0px rgb(var(--m3-scheme-secondary));
+    box-shadow: 0 0 0 0px var(--m3c-secondary);
   }
   100% {
-    box-shadow: 0 0 0 3px rgb(var(--m3-scheme-secondary));
+    box-shadow: 0 0 0 3px var(--m3c-secondary);
   }
 }
 @keyframes refocus-inward {
   0% {
-    box-shadow: inset 0 0 0 0px rgb(var(--m3-scheme-secondary));
+    box-shadow: inset 0 0 0 0px var(--m3c-secondary);
   }
   100% {
-    box-shadow: inset 0 0 0 3px rgb(var(--m3-scheme-secondary));
+    box-shadow: inset 0 0 0 3px var(--m3c-secondary);
   }
 }
 
 [placeholder]::placeholder {
-  color: rgb(var(--m3-scheme-on-background) / 0.5);
+  color: oklab(from var(--m3c-on-background) l a b / 0.5);
   opacity: 1;
 }
 ::selection {
-  background-color: rgb(var(--m3-scheme-tertiary-container));
-  color: rgb(var(--m3-scheme-on-tertiary-container));
+  background-color: var(--m3c-tertiary-container);
+  color: var(--m3c-on-tertiary-container);
 }