@bmxc/pami-elements 0.1.0-beta.1 → 0.1.0-beta.2

package/dist/collection/components/pami-snackbar/pami-snackbar.js

@@ -192,14 +192,14 @@ export class PamiSnackbar {
     render() {
         const hasAction = !!this.action || this.hasSlottedAction;
         const hasClose = this.closeable || this.hasSlottedClose;
-        return (h(Host, { key: '11eb5a15f7c03ad22aacefcdf10a4864b161af72', class: {
+        return (h(Host, { key: '377ff71f936a954c16486d3892713f3b63ed053b', class: {
                 'pami-snackbar': true,
                 'pami-snackbar--open': this.open,
                 'pami-snackbar--stacked': this.stacked,
                 [`pami-snackbar--${this.position}`]: true,
                 'pami-snackbar--with-action': hasAction,
                 'pami-snackbar--with-close': hasClose,
-            }, role: this.politeness === 'assertive' ? 'alert' : 'status', "aria-live": this.politeness, "aria-atomic": "true" }, h("div", { key: '03464894f052ce7b2f9fc33228fb689d1fa1ecd9', class: "pami-snackbar__surface", part: "surface", "data-surface": "bronze:surface", onMouseEnter: this.pauseAutoHide, onMouseLeave: this.resumeAutoHide, onFocusin: this.pauseAutoHide, onFocusout: this.handleSurfaceFocusOut }, h(PamiDots, { key: '10bd21f504252c47f5eab1cc432acb549562edac' }), h("span", { key: 'ff6980f3947b5336dfd9ba0574f7651cbfdfc6b1', class: "pami-snackbar__message", part: "message" }, h("slot", { key: '599b417a95f6869af8798d8d1e5c84a5861546a6' }, this.message)), hasAction && (h("div", { key: 'a299869a52f2c8f9b05530e18ef771be7e44fa81', class: "pami-snackbar__actions", part: "actions" }, h("slot", { key: 'c24c3fc527d716cf9e9301e58e3c51c98f955504', name: "action" }, this.action && (h("pami-button", { key: 'ebf8ccad87f4b44b38ff9836cc0dab44b69e5357', variant: "text", size: "sm", class: "pami-snackbar__action-btn", onClick: this.handleActionClick }, this.action))))), hasClose && (h("div", { key: '115eb6ff70a006b7970a6139655c6f929059badd', class: "pami-snackbar__close", part: "close" }, h("slot", { key: '5430b92dd191375f988286b32b67cd7d05b96e38', name: "close" }, this.closeable && (h("pami-icon-button", { key: '5ad5475326253bb43e2b36e937159fd6474d53bb', variant: "standard", icon: "close", "aria-label": this.dismissLabel, onClick: this.handleCloseClick, exportparts: "icon:close-icon" }))))))));
+            }, role: this.politeness === 'assertive' ? 'alert' : 'status', "aria-live": this.politeness, "aria-atomic": "true" }, h("div", { key: 'b75fece79a585924b56acbdf71c1213f9a6dd18c', class: "pami-snackbar__surface", part: "surface", "data-surface": "bronze:surface", onMouseEnter: this.pauseAutoHide, onMouseLeave: this.resumeAutoHide, onFocusin: this.pauseAutoHide, onFocusout: this.handleSurfaceFocusOut }, h(PamiDots, { key: 'f32362a71d752e82ddee9ea54cbdf9f9f18f9e48' }), h("span", { key: 'f842d629c94df4b8c859131276eb7cd4c7a30406', class: "pami-snackbar__message", part: "message" }, h("slot", { key: '581c707d06713befe48524c213ccbeae97b94d30' }, this.message)), hasAction && (h("div", { key: '1b242197970e3f0768c507bb22d7e1d9e39296fc', class: "pami-snackbar__actions", part: "actions" }, h("slot", { key: 'cbe6e241a36c39a2c645dd44d50c5ef2ff1df738', name: "action" }, this.action && (h("pami-button", { key: 'a769f9a12d7b2c13c4c36acc249306c1dd03ff8d', variant: "text", size: "sm", class: "pami-snackbar__action-btn", onClick: this.handleActionClick }, this.action))))), hasClose && (h("div", { key: 'cd96fad5b428ea2c5b1ea91b81a021a0354ea90d', class: "pami-snackbar__close", part: "close" }, h("slot", { key: 'a79e79992489bbf754d763b64ffb6b6ee0bf1d89', name: "close" }, this.closeable && (h("pami-icon-button", { key: '58ae83ff12933856615d9705321965dc938eb00d', variant: "standard", icon: "close", "aria-label": this.dismissLabel, onClick: this.handleCloseClick, exportparts: "icon:close-icon" }))))))));
     }
     static get is() { return "pami-snackbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pami-split-button/pami-split-button.css

@@ -1,3 +1,4 @@
+/* Generated from scripts/templates/pami-surface.css and pami.tokens.json. Do not edit. */
 /*
  * Pami surface partial: material plate, glass edge and dot layer.
  *
@@ -37,92 +38,90 @@
   color: var(--pami-surface-text);
 }
 
-/* ---- Materials ---------------------------------------------------------- */
-
-:is([data-surface="crust"], [data-surface^="crust:"]) {
-  --pami-surface-bg-start: var(--pami-material-crust-background-start, #ef8625);
-  --pami-surface-bg-end: var(--pami-material-crust-background-end, #fb8e28);
-  --pami-surface-dot-start: var(--pami-material-crust-dot-start, #f09f42);
-  --pami-surface-dot-end: var(--pami-material-crust-dot-end, #ffad1f);
-  --pami-surface-blur: var(--pami-material-crust-blur, 0px);
-  --pami-surface-text: var(--pami-material-crust-text, #331505);
-  --pami-surface-edge-top: var(--pami-material-crust-edge-top, var(--pami-component-glass-dark-top, rgba(255, 255, 255, 0.2)));
-  --pami-surface-edge-side: var(--pami-material-crust-edge-side, var(--pami-component-glass-dark-side, rgba(255, 255, 255, 0.08)));
-  --pami-surface-edge-bottom: var(--pami-material-crust-edge-bottom, var(--pami-component-glass-dark-bottom, rgba(0, 0, 0, 0.18)));
-}
-
-:is([data-surface="crust-soft"], [data-surface^="crust-soft:"]) {
-  --pami-surface-bg-start: var(--pami-material-crust-soft-background-start, #ffe9d1);
-  --pami-surface-bg-end: var(--pami-material-crust-soft-background-end, #ffddb8);
-  --pami-surface-dot-start: var(--pami-material-crust-soft-dot-start, #ffc98e);
-  --pami-surface-dot-end: var(--pami-material-crust-soft-dot-end, #ffb866);
-  --pami-surface-blur: var(--pami-material-crust-soft-blur, 0px);
-  --pami-surface-text: var(--pami-material-crust-soft-text, #331505);
-  --pami-surface-edge-top: var(--pami-material-crust-soft-edge-top, var(--pami-component-glass-light-top, rgba(255, 255, 255, 0.4)));
-  --pami-surface-edge-side: var(--pami-material-crust-soft-edge-side, var(--pami-component-glass-light-side, rgba(80, 69, 54, 0.1)));
-  --pami-surface-edge-bottom: var(--pami-material-crust-soft-edge-bottom, var(--pami-component-glass-light-bottom, rgba(80, 69, 54, 0.16)));
-}
-
-:is([data-surface="crumb"], [data-surface^="crumb:"]) {
-  --pami-surface-bg-start: var(--pami-material-crumb-background-start, #fcfcfc);
-  --pami-surface-bg-end: var(--pami-material-crumb-background-end, #fffbf5);
-  --pami-surface-dot-start: var(--pami-material-crumb-dot-start, #f9f1e7);
-  --pami-surface-dot-end: var(--pami-material-crumb-dot-end, #fef9ef);
-  --pami-surface-blur: var(--pami-material-crumb-blur, 4px);
-  --pami-surface-text: var(--pami-material-crumb-text, #342004);
-  --pami-surface-edge-top: var(--pami-material-crumb-edge-top, var(--pami-component-glass-light-top, rgba(255, 255, 255, 0.4)));
-  --pami-surface-edge-side: var(--pami-material-crumb-edge-side, var(--pami-component-glass-light-side, rgba(80, 69, 54, 0.1)));
-  --pami-surface-edge-bottom: var(--pami-material-crumb-edge-bottom, var(--pami-component-glass-light-bottom, rgba(80, 69, 54, 0.16)));
-}
-
-:is([data-surface="olive"], [data-surface^="olive:"]) {
-  --pami-surface-bg-start: var(--pami-material-olive-background-start, #3b4f1a);
-  --pami-surface-bg-end: var(--pami-material-olive-background-end, #2a3813);
-  --pami-surface-dot-start: var(--pami-material-olive-dot-start, #607f1f);
-  --pami-surface-dot-end: var(--pami-material-olive-dot-end, #556b2f);
-  --pami-surface-blur: var(--pami-material-olive-blur, 2px);
-  --pami-surface-text: var(--pami-material-olive-text, #fcffeb);
-  --pami-surface-edge-top: var(--pami-material-olive-edge-top, var(--pami-component-glass-dark-top, rgba(255, 255, 255, 0.2)));
-  --pami-surface-edge-side: var(--pami-material-olive-edge-side, var(--pami-component-glass-dark-side, rgba(255, 255, 255, 0.08)));
-  --pami-surface-edge-bottom: var(--pami-material-olive-edge-bottom, var(--pami-component-glass-dark-bottom, rgba(0, 0, 0, 0.18)));
-}
-
-:is([data-surface="olive-soft"], [data-surface^="olive-soft:"]) {
-  --pami-surface-bg-start: var(--pami-material-olive-soft-background-start, #f4f7ea);
-  --pami-surface-bg-end: var(--pami-material-olive-soft-background-end, #eaf0d9);
-  --pami-surface-dot-start: var(--pami-material-olive-soft-dot-start, #d8e2b6);
-  --pami-surface-dot-end: var(--pami-material-olive-soft-dot-end, #c9d79e);
-  --pami-surface-blur: var(--pami-material-olive-soft-blur, 2px);
-  --pami-surface-text: var(--pami-material-olive-soft-text, #2a3813);
-  --pami-surface-edge-top: var(--pami-material-olive-soft-edge-top, var(--pami-component-glass-light-top, rgba(255, 255, 255, 0.4)));
-  --pami-surface-edge-side: var(--pami-material-olive-soft-edge-side, var(--pami-component-glass-light-side, rgba(80, 69, 54, 0.1)));
-  --pami-surface-edge-bottom: var(--pami-material-olive-soft-edge-bottom, var(--pami-component-glass-light-bottom, rgba(80, 69, 54, 0.16)));
-}
-
-:is([data-surface="bronze"], [data-surface^="bronze:"]) {
-  --pami-surface-bg-start: var(--pami-material-bronze-background-start, #513018);
-  --pami-surface-bg-end: var(--pami-material-bronze-background-end, #351c0a);
-  --pami-surface-dot-start: var(--pami-material-bronze-dot-start, #996437);
-  --pami-surface-dot-end: var(--pami-material-bronze-dot-end, #7d4d28);
-  --pami-surface-blur: var(--pami-material-bronze-blur, 2px);
-  --pami-surface-text: var(--pami-material-bronze-text, #fef7ec);
-  --pami-surface-edge-top: var(--pami-material-bronze-edge-top, var(--pami-component-glass-dark-top, rgba(255, 255, 255, 0.2)));
-  --pami-surface-edge-side: var(--pami-material-bronze-edge-side, var(--pami-component-glass-dark-side, rgba(255, 255, 255, 0.08)));
-  --pami-surface-edge-bottom: var(--pami-material-bronze-edge-bottom, var(--pami-component-glass-dark-bottom, rgba(0, 0, 0, 0.18)));
-}
-
-:is([data-surface="bronze-soft"], [data-surface^="bronze-soft:"]) {
-  --pami-surface-bg-start: var(--pami-material-bronze-soft-background-start, #faf3ec);
-  --pami-surface-bg-end: var(--pami-material-bronze-soft-background-end, #f3e7da);
-  --pami-surface-dot-start: var(--pami-material-bronze-soft-dot-start, #e6d2bd);
-  --pami-surface-dot-end: var(--pami-material-bronze-soft-dot-end, #dcc2a6);
-  --pami-surface-blur: var(--pami-material-bronze-soft-blur, 2px);
-  --pami-surface-text: var(--pami-material-bronze-soft-text, #351c0a);
-  --pami-surface-edge-top: var(--pami-material-bronze-soft-edge-top, var(--pami-component-glass-light-top, rgba(255, 255, 255, 0.4)));
-  --pami-surface-edge-side: var(--pami-material-bronze-soft-edge-side, var(--pami-component-glass-light-side, rgba(80, 69, 54, 0.1)));
-  --pami-surface-edge-bottom: var(--pami-material-bronze-soft-edge-bottom, var(--pami-component-glass-light-bottom, rgba(80, 69, 54, 0.16)));
-}
-
+:is([data-surface="crust"], [data-surface^="crust:"]) {
+  --pami-surface-bg-start: var(--pami-material-crust-background-start, rgba(230, 146, 52, 1));
+  --pami-surface-bg-end: var(--pami-material-crust-background-end, rgba(235, 153, 66, 1));
+  --pami-surface-dot-start: var(--pami-material-crust-dot-start, rgba(240, 169, 100, 1));
+  --pami-surface-dot-end: var(--pami-material-crust-dot-end, rgba(250, 181, 115, 1));
+  --pami-surface-blur: var(--pami-material-crust-blur, 0px);
+  --pami-surface-text: var(--pami-material-crust-text, rgba(43, 28, 13, 1));
+  --pami-surface-edge-top: var(--pami-material-crust-edge-top, var(--pami-component-glass-dark-top, rgba(255, 255, 255, 0.2)));
+  --pami-surface-edge-side: var(--pami-material-crust-edge-side, var(--pami-component-glass-dark-side, rgba(255, 255, 255, 0.08)));
+  --pami-surface-edge-bottom: var(--pami-material-crust-edge-bottom, var(--pami-component-glass-dark-bottom, rgba(0, 0, 0, 0.18)));
+}
+
+:is([data-surface="olive"], [data-surface^="olive:"]) {
+  --pami-surface-bg-start: var(--pami-material-olive-background-start, rgba(70, 95, 31, 1));
+  --pami-surface-bg-end: var(--pami-material-olive-background-end, rgba(63, 86, 26, 1));
+  --pami-surface-dot-start: var(--pami-material-olive-dot-start, rgba(84, 113, 41, 1));
+  --pami-surface-dot-end: var(--pami-material-olive-dot-end, rgba(80, 107, 39, 1));
+  --pami-surface-blur: var(--pami-material-olive-blur, 2px);
+  --pami-surface-text: var(--pami-material-olive-text, rgba(242, 248, 235, 1));
+  --pami-surface-edge-top: var(--pami-material-olive-edge-top, var(--pami-component-glass-dark-top, rgba(255, 255, 255, 0.2)));
+  --pami-surface-edge-side: var(--pami-material-olive-edge-side, var(--pami-component-glass-dark-side, rgba(255, 255, 255, 0.08)));
+  --pami-surface-edge-bottom: var(--pami-material-olive-edge-bottom, var(--pami-component-glass-dark-bottom, rgba(0, 0, 0, 0.18)));
+}
+
+:is([data-surface="bronze"], [data-surface^="bronze:"]) {
+  --pami-surface-bg-start: var(--pami-material-bronze-background-start, rgba(117, 67, 31, 1));
+  --pami-surface-bg-end: var(--pami-material-bronze-background-end, rgba(104, 58, 25, 1));
+  --pami-surface-dot-start: var(--pami-material-bronze-dot-start, rgba(145, 87, 46, 1));
+  --pami-surface-dot-end: var(--pami-material-bronze-dot-end, rgba(134, 80, 41, 1));
+  --pami-surface-blur: var(--pami-material-bronze-blur, 2px);
+  --pami-surface-text: var(--pami-material-bronze-text, rgba(255, 242, 235, 1));
+  --pami-surface-edge-top: var(--pami-material-bronze-edge-top, var(--pami-component-glass-dark-top, rgba(255, 255, 255, 0.2)));
+  --pami-surface-edge-side: var(--pami-material-bronze-edge-side, var(--pami-component-glass-dark-side, rgba(255, 255, 255, 0.08)));
+  --pami-surface-edge-bottom: var(--pami-material-bronze-edge-bottom, var(--pami-component-glass-dark-bottom, rgba(0, 0, 0, 0.18)));
+}
+
+:is([data-surface="crumb"], [data-surface^="crumb:"]) {
+  --pami-surface-bg-start: var(--pami-material-crumb-background-start, rgba(252, 252, 252, 1));
+  --pami-surface-bg-end: var(--pami-material-crumb-background-end, rgba(255, 251, 245, 1));
+  --pami-surface-dot-start: var(--pami-material-crumb-dot-start, rgba(249, 241, 231, 1));
+  --pami-surface-dot-end: var(--pami-material-crumb-dot-end, rgba(254, 249, 239, 1));
+  --pami-surface-blur: var(--pami-material-crumb-blur, 4px);
+  --pami-surface-text: var(--pami-material-crumb-text, rgba(52, 32, 4, 1));
+  --pami-surface-edge-top: var(--pami-material-crumb-edge-top, var(--pami-component-glass-light-top, rgba(255, 255, 255, 0.4)));
+  --pami-surface-edge-side: var(--pami-material-crumb-edge-side, var(--pami-component-glass-light-side, rgba(80, 69, 54, 0.1)));
+  --pami-surface-edge-bottom: var(--pami-material-crumb-edge-bottom, var(--pami-component-glass-light-bottom, rgba(80, 69, 54, 0.16)));
+}
+
+:is([data-surface="olive-soft"], [data-surface^="olive-soft:"]) {
+  --pami-surface-bg-start: var(--pami-material-olive-soft-background-start, rgba(237, 245, 227, 1));
+  --pami-surface-bg-end: var(--pami-material-olive-soft-background-end, rgba(227, 241, 213, 1));
+  --pami-surface-dot-start: var(--pami-material-olive-soft-dot-start, rgba(208, 226, 188, 1));
+  --pami-surface-dot-end: var(--pami-material-olive-soft-dot-end, rgba(196, 218, 169, 1));
+  --pami-surface-blur: var(--pami-material-olive-soft-blur, 2px);
+  --pami-surface-text: var(--pami-material-olive-soft-text, rgba(30, 40, 18, 1));
+  --pami-surface-edge-top: var(--pami-material-olive-soft-edge-top, var(--pami-component-glass-light-top, rgba(255, 255, 255, 0.4)));
+  --pami-surface-edge-side: var(--pami-material-olive-soft-edge-side, var(--pami-component-glass-light-side, rgba(80, 69, 54, 0.1)));
+  --pami-surface-edge-bottom: var(--pami-material-olive-soft-edge-bottom, var(--pami-component-glass-light-bottom, rgba(80, 69, 54, 0.16)));
+}
+
+:is([data-surface="bronze-soft"], [data-surface^="bronze-soft:"]) {
+  --pami-surface-bg-start: var(--pami-material-bronze-soft-background-start, rgba(255, 238, 228, 1));
+  --pami-surface-bg-end: var(--pami-material-bronze-soft-background-end, rgba(255, 230, 214, 1));
+  --pami-surface-dot-start: var(--pami-material-bronze-soft-dot-start, rgba(249, 210, 185, 1));
+  --pami-surface-dot-end: var(--pami-material-bronze-soft-dot-end, rgba(246, 197, 166, 1));
+  --pami-surface-blur: var(--pami-material-bronze-soft-blur, 2px);
+  --pami-surface-text: var(--pami-material-bronze-soft-text, rgba(51, 30, 17, 1));
+  --pami-surface-edge-top: var(--pami-material-bronze-soft-edge-top, var(--pami-component-glass-light-top, rgba(255, 255, 255, 0.4)));
+  --pami-surface-edge-side: var(--pami-material-bronze-soft-edge-side, var(--pami-component-glass-light-side, rgba(80, 69, 54, 0.1)));
+  --pami-surface-edge-bottom: var(--pami-material-bronze-soft-edge-bottom, var(--pami-component-glass-light-bottom, rgba(80, 69, 54, 0.16)));
+}
+
+:is([data-surface="crust-soft"], [data-surface^="crust-soft:"]) {
+  --pami-surface-bg-start: var(--pami-material-crust-soft-background-start, rgba(255, 239, 224, 1));
+  --pami-surface-bg-end: var(--pami-material-crust-soft-background-end, rgba(255, 230, 209, 1));
+  --pami-surface-dot-start: var(--pami-material-crust-soft-dot-start, rgba(245, 212, 182, 1));
+  --pami-surface-dot-end: var(--pami-material-crust-soft-dot-end, rgba(242, 200, 161, 1));
+  --pami-surface-blur: var(--pami-material-crust-soft-blur, 0px);
+  --pami-surface-text: var(--pami-material-crust-soft-text, rgba(50, 32, 14, 1));
+  --pami-surface-edge-top: var(--pami-material-crust-soft-edge-top, var(--pami-component-glass-light-top, rgba(255, 255, 255, 0.4)));
+  --pami-surface-edge-side: var(--pami-material-crust-soft-edge-side, var(--pami-component-glass-light-side, rgba(80, 69, 54, 0.1)));
+  --pami-surface-edge-bottom: var(--pami-material-crust-soft-edge-bottom, var(--pami-component-glass-light-bottom, rgba(80, 69, 54, 0.16)));
+}
+
 /*
  * System colour hues (spice): flat plate, black text, light glass. The token
  * sheet only has -light/-dark variants without a theme rebinding, so CSS uses

package/dist/collection/components/pami-split-button/pami-split-button.js

@@ -119,7 +119,7 @@ export class PamiSplitButton {
     }
     render() {
         const hasIcon = !!this.icon;
-        return (h(Host, { key: 'aa81d370a8857fab8bf34287da43e92d85c6bc94', class: {
+        return (h(Host, { key: '41053f9ba9ca8e78ff0595efc749fe9754b256d1', class: {
                 'pami-split-button': true,
                 [`pami-split-button--${this.variant}`]: true,
                 [`pami-split-button--${this.size}`]: true,
@@ -127,10 +127,10 @@ export class PamiSplitButton {
                 'pami-split-button--trailing-checked': this.trailingChecked,
                 'pami-split-button--with-icon': hasIcon,
                 'pami-split-button--full-width': this.fullWidth,
-            } }, h("button", { key: 'ba6d14730e439cb4e63fe0fefb41b0e98c053e66', class: "pami-split-button__leading", part: "leading", disabled: this.disabled, "aria-disabled": this.isDisabled ? 'true' : undefined, "aria-label": !this.label ? this.el.getAttribute('aria-label') ?? undefined : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleLeadingClick, onKeyDown: this.handleLeadingKeyDown }, this.surfaceMaterial && (h("span", { key: 'cdc593d35b29fff1cc66b03d33ced52153c83996', class: "pami-split-button__surface", "data-surface": `${this.surfaceMaterial}:button`, "aria-hidden": "true" }, h(PamiDots, { key: '37760375bf1114d700105a6318054cc53df6ed18' }))), this.ripple && h("pami-ripple", { key: '4f3d02f84112f33a94e944eea97d59164c690b13', disabled: this.isDisabled }), h("span", { key: '60ce5aa9e31e3b9e83e63df3c123b6e0176a64b5', class: "pami-split-button__leading-state-layer", part: "leading-state-layer", "aria-hidden": "true" }), hasIcon && (h("pami-icon", { key: '82ac0c7c30fcdb53e86d16e16aadc7dc8e0e2332', class: "pami-split-button__icon", part: "icon", "aria-hidden": "true", name: this.icon })), this.label && h("span", { key: 'be3000ebac6423bc4ec77c58cffa16bd855538b1', class: "pami-split-button__label", part: "label" }, this.label), h("slot", { key: 'fb37b32c05047bea42201c7b1128c5b6d06412f0' })), h("button", { key: 'efb38dcef9a79c17ff6792df4e3fd2dabc042d9b', class: {
+            } }, h("button", { key: '6b1429af1405644b22f88d4e88c8cb890b1c3d90', class: "pami-split-button__leading", part: "leading", disabled: this.disabled, "aria-disabled": this.isDisabled ? 'true' : undefined, "aria-label": !this.label ? this.el.getAttribute('aria-label') ?? undefined : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleLeadingClick, onKeyDown: this.handleLeadingKeyDown }, this.surfaceMaterial && (h("span", { key: '8ea7cfc309aee53a237526b95eb0ae0318e0f6c1', class: "pami-split-button__surface", "data-surface": `${this.surfaceMaterial}:button`, "aria-hidden": "true" }, h(PamiDots, { key: '2c32511b778dae1c15dc85f7afd2a2ea810bc780' }))), this.ripple && h("pami-ripple", { key: '4da4c2163c0c25d785d7c6929f3c3305fb826745', disabled: this.isDisabled }), h("span", { key: 'fb514cd84c1db0351cb74926a010f36534807179', class: "pami-split-button__leading-state-layer", part: "leading-state-layer", "aria-hidden": "true" }), hasIcon && (h("pami-icon", { key: '5bc82801344fa9fdf35e863ed433819e9d7087c9', class: "pami-split-button__icon", part: "icon", "aria-hidden": "true", name: this.icon })), this.label && h("span", { key: '7eeaf095f36ea3d7c5c44009a1e9f736b7f10477', class: "pami-split-button__label", part: "label" }, this.label), h("slot", { key: 'b50fcdace87c1b2b13f2a150e8e465492c9b66d9' })), h("button", { key: '9a145680a5e5a0d5473d408a40c9824bd6c74ca4', class: {
                 'pami-split-button__trailing': true,
                 'pami-split-button__trailing--checked': this.trailingChecked,
-            }, part: "trailing", disabled: this.disabled, "aria-disabled": this.isDisabled ? 'true' : undefined, "aria-haspopup": this.haspopup === 'false' ? undefined : this.haspopup, "aria-expanded": String(this.trailingChecked), "aria-controls": this.controls || undefined, "aria-label": this.menuLabel, tabindex: this.disabled ? -1 : 0, onClick: this.handleTrailingClick, onKeyDown: this.handleTrailingKeyDown }, this.surfaceMaterial && (h("span", { key: '78a2741fed194ef20395c3a11b48d216b0902ec8', class: "pami-split-button__surface", "data-surface": `${this.surfaceMaterial}:button`, "aria-hidden": "true" }, h(PamiDots, { key: 'ca65a042ef0f1b16cd44b59344ee60553b84beaa' }))), this.ripple && h("pami-ripple", { key: '8e9a60bf6794b893d1bfa68f769a6ad884641f36', disabled: this.isDisabled }), h("span", { key: 'c981bbb796b3279999f3e28660b4ac0400020165', class: "pami-split-button__trailing-state-layer", part: "trailing-state-layer", "aria-hidden": "true" }), h("pami-icon", { key: '58779b98e1701d3fd8e805f6da606491ab4d140d', class: "pami-split-button__trailing-icon", part: "trailing-icon", "aria-hidden": "true", name: this.trailingIcon }))));
+            }, part: "trailing", disabled: this.disabled, "aria-disabled": this.isDisabled ? 'true' : undefined, "aria-haspopup": this.haspopup === 'false' ? undefined : this.haspopup, "aria-expanded": String(this.trailingChecked), "aria-controls": this.controls || undefined, "aria-label": this.menuLabel, tabindex: this.disabled ? -1 : 0, onClick: this.handleTrailingClick, onKeyDown: this.handleTrailingKeyDown }, this.surfaceMaterial && (h("span", { key: '929250d6dd9c72f71641b79242707940a71befb2', class: "pami-split-button__surface", "data-surface": `${this.surfaceMaterial}:button`, "aria-hidden": "true" }, h(PamiDots, { key: 'c3cf5c227e440ddffbc3b8434cb52dedc71e3100' }))), this.ripple && h("pami-ripple", { key: 'ae6cf89e00e2960f0ec1c6be670f21f28a407e09', disabled: this.isDisabled }), h("span", { key: '333d92fc498064871718db8fced792175ee15c9c', class: "pami-split-button__trailing-state-layer", part: "trailing-state-layer", "aria-hidden": "true" }), h("pami-icon", { key: '1bb8673a0397da266263c9ab8813866d628d03f2', class: "pami-split-button__trailing-icon", part: "trailing-icon", "aria-hidden": "true", name: this.trailingIcon }))));
     }
     static get is() { return "pami-split-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pami-step/pami-step.js

@@ -250,7 +250,7 @@ export class PamiStep {
         // inherits the flex properties the host used to carry). Every other mode
         // renders them bare, exactly as before — no extra box, no layout change.
         const headerNodes = [
-            !isFirst && isVertical && (h("span", { key: '189028616d8df85d8f45fefe14b8e03c3325d493', class: {
+            !isFirst && isVertical && (h("span", { key: 'ed3b0acb1095b5027f2ebd235bdbd6b5187d030d', class: {
                     'pami-step__connector': true,
                     'pami-step__connector--leading': true,
                     'pami-step__connector--filled': this.index <= this.activeIndex,
@@ -268,15 +268,15 @@ export class PamiStep {
              * `aria-current` STAYS. "Which one is it on" is the entire point of a
              * status trail, and it is the one thing the visible text does not carry.
              */
-            h("div", { key: '50df0138d8d83559471e2ae8865cf3a624d423ea', class: "pami-step__inner", part: "inner", tabindex: readonly ? undefined : disabled ? -1 : 0, role: readonly ? undefined : 'button', "aria-label": readonly ? undefined : this.composeA11yLabel(), "aria-disabled": !readonly && disabled ? 'true' : undefined, "aria-current": this.active ? 'step' : undefined, "aria-expanded": hasPanel ? (this.active ? 'true' : 'false') : undefined, "aria-controls": renderPanel ? 'pami-step-panel' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'e44fbf5e0c41dda1b883d5c636b63aa193fac1a5', class: "pami-step__indicator", part: "indicator" }, !readonly && h("pami-ripple", { key: '8dc2bcfaafd1ed08046192426d2e85dbc8193bf7', disabled: disabled }), h("span", { key: '955bcd41cad71f156350f7006695300bd4d0a2be', class: "pami-step__state-layer", part: "state-layer", "aria-hidden": "true" }), this.renderIndicator()), (this.label || supporting || optionalCaption) && (h("span", { key: 'd8544a1f80cacb9bf41e45583d23c78c981e9834', class: "pami-step__text", part: "text" }, this.label && h("span", { key: 'd018cf70b8b4b6b16f833f10a356b469c9176b65', class: "pami-step__label", part: "label" }, this.label), optionalCaption && (h("span", { key: '460b45276dbfb565ff19a82890b6e53380b25626', class: "pami-step__optional", part: "optional" }, optionalCaption)), supporting && (h("span", { key: '5d9fded7e016d346e51164777e17e0880d92e709', class: "pami-step__description", part: "description" }, supporting))))),
-            !isLast && (h("span", { key: 'ce47c5e1b4b80103b62f4c1b6e542891ac3353b4', class: {
+            h("div", { key: '3e377e02a6a76280f04656bccac005ec8c585947', class: "pami-step__inner", part: "inner", tabindex: readonly ? undefined : disabled ? -1 : 0, role: readonly ? undefined : 'button', "aria-label": readonly ? undefined : this.composeA11yLabel(), "aria-disabled": !readonly && disabled ? 'true' : undefined, "aria-current": this.active ? 'step' : undefined, "aria-expanded": hasPanel ? (this.active ? 'true' : 'false') : undefined, "aria-controls": renderPanel ? 'pami-step-panel' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("span", { key: 'a73c93f0a5f2ad4d2a5ccec5a320c5e0fa3ac4f6', class: "pami-step__indicator", part: "indicator" }, !readonly && h("pami-ripple", { key: 'f49667a10bc0a87b657dcbb61260c27cc5926d4d', disabled: disabled }), h("span", { key: '541f3135c44be2c91d94e8326be1ed20880c1602', class: "pami-step__state-layer", part: "state-layer", "aria-hidden": "true" }), this.renderIndicator()), (this.label || supporting || optionalCaption) && (h("span", { key: 'e4a442a9e300cb6ff8b10dc75b55c281742c9bc5', class: "pami-step__text", part: "text" }, this.label && h("span", { key: '53815bbedfd2f9304fdc2ea9d1d7678f728c9167', class: "pami-step__label", part: "label" }, this.label), optionalCaption && (h("span", { key: '912e27ebfe74db2640656fe3ff549664240782ed', class: "pami-step__optional", part: "optional" }, optionalCaption)), supporting && (h("span", { key: 'a4e86bff963ca3b79a2cfe69fc0e686a13b45f9b', class: "pami-step__description", part: "description" }, supporting))))),
+            !isLast && (h("span", { key: 'fe330fddfc05c0d69036f9d30e48ca9bfd7d4935', class: {
                     'pami-step__connector': true,
                     'pami-step__connector--trailing': true,
                     'pami-step__connector--filled': this.index < this.activeIndex,
                 }, part: "connector connector-trailing", "aria-hidden": "true" })),
         ];
         const panelStep = !isVertical && hasPanel;
-        return (h(Host, { key: '6eaf0e06d33708c06d603f4bb51e30e7b802cdf4', class: {
+        return (h(Host, { key: '72f3bb2ee1b7a9e571ea896890ee1c1657703243', class: {
                 'pami-step': true,
                 [`pami-step--${this.orientation}`]: true,
                 [`pami-step--indicator-${this.indicatorKind}`]: true,
@@ -290,11 +290,11 @@ export class PamiStep {
                 'pami-step--first': isFirst,
                 'pami-step--last': isLast,
                 'pami-step--panel-step': !isVertical && hasPanel,
-            }, role: "listitem", "aria-current": this.active ? 'step' : undefined, "aria-disabled": disabled ? 'true' : undefined }, panelStep ? h("div", { class: "pami-step__header" }, headerNodes) : headerNodes, renderPanel && (h("div", { key: 'ea712cb742a7999e35b666ff5705fb4fda999639', id: "pami-step-panel", class: {
+            }, role: "listitem", "aria-current": this.active ? 'step' : undefined, "aria-disabled": disabled ? 'true' : undefined }, panelStep ? h("div", { class: "pami-step__header" }, headerNodes) : headerNodes, renderPanel && (h("div", { key: 'e0f0410eaee10c6f927976bd250bf0b21cfb63eb', id: "pami-step-panel", class: {
                 'pami-step__content': true,
                 'pami-step__content--open': this.active,
                 'pami-step__content--lazy': lazy,
-            }, part: "content", role: "region", "aria-label": this.label || this.composeA11yLabel() }, h("div", { key: '17811b71ca2a08b9be88763c09aafadfe2871081', class: "pami-step__content-sizer" }, h("div", { key: '41631e64e4ff4044713ddbe9ee5614fd4ba41bc9', class: "pami-step__content-inner" }, h("slot", { key: '56359e9556354b595080ad3e59fa4f34271ad9a1' }), navActions && isVertical && (h("div", { key: '74cfdfdf61b98831f77a3056bec145332d254bd8', class: "pami-step__actions", part: "actions" }, h("pami-button", { key: '62cc1e283be37293c7caba7913c5f7b65d4db96d', variant: "text", size: "sm", disabled: isFirst || loading, onClick: this.emitBack }, this.attr('data-back-label', 'Back')), h("pami-button", { key: '01c2580a0d364dd7ee0e4446ea99b16b2888c1d1', variant: "filled", size: "sm", loading: loading, disabled: nextDisabled || loading, onClick: this.emitNext }, isLast ? this.attr('data-finish-label', 'Finish') : this.attr('data-next-label', 'Continue'))))))))));
+            }, part: "content", role: "region", "aria-label": this.label || this.composeA11yLabel() }, h("div", { key: '0548cb67222351b334dfbfe2745f9ccfd8e53a91', class: "pami-step__content-sizer" }, h("div", { key: 'f62048f82688bf352ff403da2e7607d4d61055bc', class: "pami-step__content-inner" }, h("slot", { key: '2c043faa0cd5cf71a37f845982a12281e9aac709' }), navActions && isVertical && (h("div", { key: '4c501cfe1a9b18f854b11d55b9712baef2b24508', class: "pami-step__actions", part: "actions" }, h("pami-button", { key: 'd84ee9d0bc20ee46faf5a46fb4e6c3fb466f79ea', variant: "text", size: "sm", disabled: isFirst || loading, onClick: this.emitBack }, this.attr('data-back-label', 'Back')), h("pami-button", { key: '6237af8e30963fa9c34bd3844beb04b2a8e8dad1', variant: "filled", size: "sm", loading: loading, disabled: nextDisabled || loading, onClick: this.emitNext }, isLast ? this.attr('data-finish-label', 'Finish') : this.attr('data-next-label', 'Continue'))))))))));
     }
     static get is() { return "pami-step"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pami-stepper/pami-stepper.js

@@ -498,19 +498,19 @@ export class PamiStepper {
     }
     render() {
         const mobile = this.variant === 'mobile';
-        return (h(Host, { key: '0aca5d79119f4e1b4dd05e3a248fddf330a1834d', class: {
+        return (h(Host, { key: '23a8f24d9a7201203dd02e87bfa44f3038193232', class: {
                 'pami-stepper': true,
                 [`pami-stepper--${this.orientation}`]: true,
                 [`pami-stepper--indicator-${this.indicator}`]: true,
                 [`pami-stepper--mode-${this.mode}`]: true,
                 'pami-stepper--mobile': mobile,
-            }, role: "navigation", "aria-label": this.label }, h("div", { key: '707be9181104630df5fbe28da0baa6a58966cd2b', class: "pami-stepper__live", "aria-live": "polite", role: "status" }, this.liveMessage), h("div", { key: '3e9ae530f86d9987743ff17a286eee9e8dc740fb', class: "pami-stepper__live", "aria-live": "assertive", role: "alert" }, this.errorMessage), h("ol", { key: '791009068dd1760d1c70f6371a5a16f47df1ae02', class: "pami-stepper__list", part: "list" }, h("slot", { key: '985f047dbb33c53e38246d57148f417bd7f3efdd', onSlotchange: this.handleSlotChange })), h("div", { key: '74414efa1e3d373e8ded8f32339987b0a634ac79', class: "pami-stepper__content", part: "content" }, h("slot", { key: '33f1f8997658471ba205495988427fdcefcc5e67', name: "content" })), this.nav && !mobile && this.orientation === 'horizontal' && this.stepCount > 0 && (h("div", { key: 'ab9968f39369a5a26eeb39dcea34bfcab808ea01', class: "pami-stepper__nav", part: "nav" }, h("pami-button", { key: '5de56accb98a56872ba12a306e6bf09d0eaae46c', variant: "text", size: "sm", disabled: this.active <= 0 || this.loading, onClick: this.handleFooterBack }, this.backLabel), h("pami-button", { key: 'c25128a353a55adb1b85ca49c078f63dc92ffad4', variant: "filled", size: "sm", loading: this.loading, disabled: this.nextDisabled || this.loading, onClick: () => this.next() }, this.active >= this.stepCount - 1 ? this.finishLabel : this.nextLabel))), this.nav && mobile && this.stepCount > 0 && (h("div", { key: 'f78f19247b6a76e6b06090b786c7b5eb8cf0f3ba', class: "pami-stepper__mobile", part: "mobile-nav" }, h("pami-button", { key: '83a38108524b7203d77662679e4e5cbc87ddd36c', variant: "text", size: "sm", disabled: this.active <= 0 || this.loading, onClick: this.handleFooterBack }, this.backLabel), h("div", { key: '1c594de90a84c5bcd5461f9171028382f1046137', class: "pami-stepper__mobile-progress", part: "mobile-progress", "aria-hidden": this.indicator === 'dot' ? 'true' : undefined }, this.indicator === 'dot'
+            }, role: "navigation", "aria-label": this.label }, h("div", { key: '78244b4895fc9e161efd9c2228ea9c4059005261', class: "pami-stepper__live", "aria-live": "polite", role: "status" }, this.liveMessage), h("div", { key: '3a9f3ec87420a2d5d226a6234bb0549c2fb0b986', class: "pami-stepper__live", "aria-live": "assertive", role: "alert" }, this.errorMessage), h("ol", { key: '4442fe44d9b328588fc249efb041d7c2598abbc2', class: "pami-stepper__list", part: "list" }, h("slot", { key: '50e735772477b081549027a03c4460970e0e8f1a', onSlotchange: this.handleSlotChange })), h("div", { key: '4fa23b3341fe07cebb06ba040f61901ac4d4090a', class: "pami-stepper__content", part: "content" }, h("slot", { key: '12da50bdb664b50fb23a887f4b3a1db3d0648a17', name: "content" })), this.nav && !mobile && this.orientation === 'horizontal' && this.stepCount > 0 && (h("div", { key: '88065c37b3f6577d80c905739ca5a753d900330e', class: "pami-stepper__nav", part: "nav" }, h("pami-button", { key: '4018c26a2dc382c9bbffc3b30f2e5d2507385a58', variant: "text", size: "sm", disabled: this.active <= 0 || this.loading, onClick: this.handleFooterBack }, this.backLabel), h("pami-button", { key: '3baf3dd54999adafbe06fefbbc6660b24e6c6476', variant: "filled", size: "sm", loading: this.loading, disabled: this.nextDisabled || this.loading, onClick: () => this.next() }, this.active >= this.stepCount - 1 ? this.finishLabel : this.nextLabel))), this.nav && mobile && this.stepCount > 0 && (h("div", { key: 'b11a59e9280ff23afe088a3e4dd99ad06ef5a49a', class: "pami-stepper__mobile", part: "mobile-nav" }, h("pami-button", { key: '6e41f5f95dd100dc4838c43bf162e88e40b39679', variant: "text", size: "sm", disabled: this.active <= 0 || this.loading, onClick: this.handleFooterBack }, this.backLabel), h("div", { key: '24118e353d8f28e21d2290a9fcf3a50e8c4330f1', class: "pami-stepper__mobile-progress", part: "mobile-progress", "aria-hidden": this.indicator === 'dot' ? 'true' : undefined }, this.indicator === 'dot'
             ? this.steps.map((s, i) => (h("span", { class: {
                     'pami-stepper__mobile-dot': true,
                     'is-active': i === this.active,
                     'is-done': i < this.active || !!s.completed,
                 } })))
-            : h("span", { class: "pami-stepper__mobile-text" }, `${this.stepWord} ${this.active + 1} ${this.ofWord} ${this.stepCount}`)), h("pami-button", { key: '4269317fef1f1f521993ea7b6b8e19aef08251cc', variant: "filled", size: "sm", loading: this.loading, disabled: this.nextDisabled || this.loading, onClick: () => this.next() }, this.active >= this.stepCount - 1 ? this.finishLabel : this.nextLabel)))));
+            : h("span", { class: "pami-stepper__mobile-text" }, `${this.stepWord} ${this.active + 1} ${this.ofWord} ${this.stepCount}`)), h("pami-button", { key: 'ae8904ffbe9b49f4f85759b2d2a182705a6bcc9f', variant: "filled", size: "sm", loading: this.loading, disabled: this.nextDisabled || this.loading, onClick: () => this.next() }, this.active >= this.stepCount - 1 ? this.finishLabel : this.nextLabel)))));
     }
     static get is() { return "pami-stepper"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pami-sub-menu-item/pami-sub-menu-item.css

@@ -138,7 +138,7 @@
 .pami-sub-menu-item__headline {
   font-family: var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);
   font-size: max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));
-  font-weight: var(--md-sys-typescale-body-large-weight, 400);
+  font-weight: var(--md-sys-typescale-body-large-font-weight, 400);
   line-height: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));
   white-space: nowrap;
   overflow: hidden;
@@ -169,10 +169,10 @@
   background-color: var(--md-sys-color-tertiary-container, #FFD8E4);
   color: var(--md-sys-color-on-tertiary-container, #31111D);
   font-family: var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);
-  font-size: var(--md-sys-typescale-label-small-size, 11px);
-  font-weight: var(--md-sys-typescale-label-small-weight, 500);
+  font-size: var(--md-sys-typescale-label-small-font-size, 11px);
+  font-weight: var(--md-sys-typescale-label-small-font-weight, 500);
   line-height: var(--md-sys-typescale-label-small-line-height, 16px);
-  letter-spacing: var(--md-sys-typescale-label-small-tracking, 0.5px);
+  letter-spacing: var(--md-sys-typescale-label-small-letter-spacing, 0.5px);
   white-space: nowrap;
 }
 

package/dist/collection/components/pami-sub-menu-item/pami-sub-menu-item.js

@@ -671,13 +671,13 @@ export class PamiSubMenuItem {
         this.stopCorridorWatch();
     }
     render() {
-        return (h(Host, { key: 'ed1814ca2bed86ca0c5ce33011e5890bf1874f64', class: {
+        return (h(Host, { key: 'c2d1bd84ff2cdef7ac709eb0885e35cb277ef22d', class: {
                 'pami-sub-menu-item': true,
                 'pami-sub-menu-item--disabled': this.disabled,
                 'pami-sub-menu-item--open': this.submenuOpen,
                 'pami-sub-menu-item--divider': this.divider,
                 'pami-sub-menu-item--gap': this.gap,
-            }, role: "menuitem", "aria-haspopup": "menu", "aria-expanded": String(this.submenuOpen), "aria-disabled": this.disabled ? 'true' : 'false', tabindex: "-1", onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onKeyDown: this.handleKeyDown }, h("pami-ripple", { key: '2487cea56ba26aa25097f9c0bbdaac94ed9e4663', disabled: this.disabled }), h("span", { key: 'eeb3b2b93b278babee692d591e323645d79f2a27', class: "pami-sub-menu-item__state-layer", part: "state-layer", "aria-hidden": "true" }), this.hasLeadingIcon && (h("span", { key: 'a48678bd1f98c5815a59f4925e573fe8f87d4853', class: "pami-sub-menu-item__leading", part: "leading-icon", "aria-hidden": "true" }, h("slot", { key: '8f322ba9bde0886d38949432bcb5d6800667b804', name: "leading-icon" }))), h("span", { key: '16a6c3484d79fb6d60979218cc917a6c1cbbacb8', class: "pami-sub-menu-item__content", part: "content" }, h("span", { key: '70410b2ed871755041cb862cc33b351c326dff1d', class: "pami-sub-menu-item__headline", part: "headline" }, this.headline), this.supportingText && (h("span", { key: 'd5a1ee022d5f0f1d5caa321d47aabbe3153aa024', class: "pami-sub-menu-item__supporting", part: "supporting-text" }, this.supportingText))), this.badge && (h("span", { key: '0206f8d6246744ca4571b41731ebca581fbca21c', class: "pami-sub-menu-item__badge", part: "badge" }, this.badge)), h("pami-icon", { key: 'f05bb8dce0dba2221bfea51487513ce9175a20a2', class: "pami-sub-menu-item__arrow", "aria-hidden": "true", name: "arrow_right" }), h("div", { key: '8f26a4798f4b6a98250d4c7b6d866be0750e2e27', class: "pami-sub-menu-item__submenu", onMouseEnter: this.handleFlyoutEnter, onMouseLeave: this.handleFlyoutLeave }, h("slot", { key: '9c59b16c26efa11040fe38c848655baa377a60c2', name: "submenu" }))));
+            }, role: "menuitem", "aria-haspopup": "menu", "aria-expanded": String(this.submenuOpen), "aria-disabled": this.disabled ? 'true' : 'false', tabindex: "-1", onClick: this.handleClick, onMouseEnter: this.handleMouseEnter, onMouseLeave: this.handleMouseLeave, onKeyDown: this.handleKeyDown }, h("pami-ripple", { key: '04027aa5ca87458bf1c2717a3c3baa90e80452af', disabled: this.disabled }), h("span", { key: '874d5dc4659852ce3d26b63a62a4abf147502f86', class: "pami-sub-menu-item__state-layer", part: "state-layer", "aria-hidden": "true" }), this.hasLeadingIcon && (h("span", { key: '2f293029ec9a5a63172fa953f366fc080e99aa27', class: "pami-sub-menu-item__leading", part: "leading-icon", "aria-hidden": "true" }, h("slot", { key: '76b5a23486c1e9db6a3b6cfa8994160f2c5dea9e', name: "leading-icon" }))), h("span", { key: '186ac5d6c96d65af7732b700b84ff1e261e60b13', class: "pami-sub-menu-item__content", part: "content" }, h("span", { key: 'eb8578d4cc70b86f54728a126bfdf0c254fd186f', class: "pami-sub-menu-item__headline", part: "headline" }, this.headline), this.supportingText && (h("span", { key: '5439f0bc7d682d88264c7c51e7b93f2ec34a7648', class: "pami-sub-menu-item__supporting", part: "supporting-text" }, this.supportingText))), this.badge && (h("span", { key: 'de0262a2f6dcfa6b362cc5888b7832cc259e4b6e', class: "pami-sub-menu-item__badge", part: "badge" }, this.badge)), h("pami-icon", { key: 'f736da523ed6588a33704382b2fb32e2daa10606', class: "pami-sub-menu-item__arrow", "aria-hidden": "true", name: "arrow_right" }), h("div", { key: 'a95011dd4a4e698e385ba07c57b1fe2b6059cdab', class: "pami-sub-menu-item__submenu", onMouseEnter: this.handleFlyoutEnter, onMouseLeave: this.handleFlyoutLeave }, h("slot", { key: '70e2b87d9f4c8c9f9017f6f5429666b4d3464387', name: "submenu" }))));
     }
     static get is() { return "pami-sub-menu-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pami-switch/pami-switch.css

@@ -1,3 +1,4 @@
+/* Generated from scripts/templates/pami-surface.css and pami.tokens.json. Do not edit. */
 /*
  * Pami surface partial: material plate, glass edge and dot layer.
  *
@@ -37,92 +38,90 @@
   color: var(--pami-surface-text);
 }
 
-/* ---- Materials ---------------------------------------------------------- */
-
-:is([data-surface="crust"], [data-surface^="crust:"]) {
-  --pami-surface-bg-start: var(--pami-material-crust-background-start, #ef8625);
-  --pami-surface-bg-end: var(--pami-material-crust-background-end, #fb8e28);
-  --pami-surface-dot-start: var(--pami-material-crust-dot-start, #f09f42);
-  --pami-surface-dot-end: var(--pami-material-crust-dot-end, #ffad1f);
-  --pami-surface-blur: var(--pami-material-crust-blur, 0px);
-  --pami-surface-text: var(--pami-material-crust-text, #331505);
-  --pami-surface-edge-top: var(--pami-material-crust-edge-top, var(--pami-component-glass-dark-top, rgba(255, 255, 255, 0.2)));
-  --pami-surface-edge-side: var(--pami-material-crust-edge-side, var(--pami-component-glass-dark-side, rgba(255, 255, 255, 0.08)));
-  --pami-surface-edge-bottom: var(--pami-material-crust-edge-bottom, var(--pami-component-glass-dark-bottom, rgba(0, 0, 0, 0.18)));
-}
-
-:is([data-surface="crust-soft"], [data-surface^="crust-soft:"]) {
-  --pami-surface-bg-start: var(--pami-material-crust-soft-background-start, #ffe9d1);
-  --pami-surface-bg-end: var(--pami-material-crust-soft-background-end, #ffddb8);
-  --pami-surface-dot-start: var(--pami-material-crust-soft-dot-start, #ffc98e);
-  --pami-surface-dot-end: var(--pami-material-crust-soft-dot-end, #ffb866);
-  --pami-surface-blur: var(--pami-material-crust-soft-blur, 0px);
-  --pami-surface-text: var(--pami-material-crust-soft-text, #331505);
-  --pami-surface-edge-top: var(--pami-material-crust-soft-edge-top, var(--pami-component-glass-light-top, rgba(255, 255, 255, 0.4)));
-  --pami-surface-edge-side: var(--pami-material-crust-soft-edge-side, var(--pami-component-glass-light-side, rgba(80, 69, 54, 0.1)));
-  --pami-surface-edge-bottom: var(--pami-material-crust-soft-edge-bottom, var(--pami-component-glass-light-bottom, rgba(80, 69, 54, 0.16)));
-}
-
-:is([data-surface="crumb"], [data-surface^="crumb:"]) {
-  --pami-surface-bg-start: var(--pami-material-crumb-background-start, #fcfcfc);
-  --pami-surface-bg-end: var(--pami-material-crumb-background-end, #fffbf5);
-  --pami-surface-dot-start: var(--pami-material-crumb-dot-start, #f9f1e7);
-  --pami-surface-dot-end: var(--pami-material-crumb-dot-end, #fef9ef);
-  --pami-surface-blur: var(--pami-material-crumb-blur, 4px);
-  --pami-surface-text: var(--pami-material-crumb-text, #342004);
-  --pami-surface-edge-top: var(--pami-material-crumb-edge-top, var(--pami-component-glass-light-top, rgba(255, 255, 255, 0.4)));
-  --pami-surface-edge-side: var(--pami-material-crumb-edge-side, var(--pami-component-glass-light-side, rgba(80, 69, 54, 0.1)));
-  --pami-surface-edge-bottom: var(--pami-material-crumb-edge-bottom, var(--pami-component-glass-light-bottom, rgba(80, 69, 54, 0.16)));
-}
-
-:is([data-surface="olive"], [data-surface^="olive:"]) {
-  --pami-surface-bg-start: var(--pami-material-olive-background-start, #3b4f1a);
-  --pami-surface-bg-end: var(--pami-material-olive-background-end, #2a3813);
-  --pami-surface-dot-start: var(--pami-material-olive-dot-start, #607f1f);
-  --pami-surface-dot-end: var(--pami-material-olive-dot-end, #556b2f);
-  --pami-surface-blur: var(--pami-material-olive-blur, 2px);
-  --pami-surface-text: var(--pami-material-olive-text, #fcffeb);
-  --pami-surface-edge-top: var(--pami-material-olive-edge-top, var(--pami-component-glass-dark-top, rgba(255, 255, 255, 0.2)));
-  --pami-surface-edge-side: var(--pami-material-olive-edge-side, var(--pami-component-glass-dark-side, rgba(255, 255, 255, 0.08)));
-  --pami-surface-edge-bottom: var(--pami-material-olive-edge-bottom, var(--pami-component-glass-dark-bottom, rgba(0, 0, 0, 0.18)));
-}
-
-:is([data-surface="olive-soft"], [data-surface^="olive-soft:"]) {
-  --pami-surface-bg-start: var(--pami-material-olive-soft-background-start, #f4f7ea);
-  --pami-surface-bg-end: var(--pami-material-olive-soft-background-end, #eaf0d9);
-  --pami-surface-dot-start: var(--pami-material-olive-soft-dot-start, #d8e2b6);
-  --pami-surface-dot-end: var(--pami-material-olive-soft-dot-end, #c9d79e);
-  --pami-surface-blur: var(--pami-material-olive-soft-blur, 2px);
-  --pami-surface-text: var(--pami-material-olive-soft-text, #2a3813);
-  --pami-surface-edge-top: var(--pami-material-olive-soft-edge-top, var(--pami-component-glass-light-top, rgba(255, 255, 255, 0.4)));
-  --pami-surface-edge-side: var(--pami-material-olive-soft-edge-side, var(--pami-component-glass-light-side, rgba(80, 69, 54, 0.1)));
-  --pami-surface-edge-bottom: var(--pami-material-olive-soft-edge-bottom, var(--pami-component-glass-light-bottom, rgba(80, 69, 54, 0.16)));
-}
-
-:is([data-surface="bronze"], [data-surface^="bronze:"]) {
-  --pami-surface-bg-start: var(--pami-material-bronze-background-start, #513018);
-  --pami-surface-bg-end: var(--pami-material-bronze-background-end, #351c0a);
-  --pami-surface-dot-start: var(--pami-material-bronze-dot-start, #996437);
-  --pami-surface-dot-end: var(--pami-material-bronze-dot-end, #7d4d28);
-  --pami-surface-blur: var(--pami-material-bronze-blur, 2px);
-  --pami-surface-text: var(--pami-material-bronze-text, #fef7ec);
-  --pami-surface-edge-top: var(--pami-material-bronze-edge-top, var(--pami-component-glass-dark-top, rgba(255, 255, 255, 0.2)));
-  --pami-surface-edge-side: var(--pami-material-bronze-edge-side, var(--pami-component-glass-dark-side, rgba(255, 255, 255, 0.08)));
-  --pami-surface-edge-bottom: var(--pami-material-bronze-edge-bottom, var(--pami-component-glass-dark-bottom, rgba(0, 0, 0, 0.18)));
-}
-
-:is([data-surface="bronze-soft"], [data-surface^="bronze-soft:"]) {
-  --pami-surface-bg-start: var(--pami-material-bronze-soft-background-start, #faf3ec);
-  --pami-surface-bg-end: var(--pami-material-bronze-soft-background-end, #f3e7da);
-  --pami-surface-dot-start: var(--pami-material-bronze-soft-dot-start, #e6d2bd);
-  --pami-surface-dot-end: var(--pami-material-bronze-soft-dot-end, #dcc2a6);
-  --pami-surface-blur: var(--pami-material-bronze-soft-blur, 2px);
-  --pami-surface-text: var(--pami-material-bronze-soft-text, #351c0a);
-  --pami-surface-edge-top: var(--pami-material-bronze-soft-edge-top, var(--pami-component-glass-light-top, rgba(255, 255, 255, 0.4)));
-  --pami-surface-edge-side: var(--pami-material-bronze-soft-edge-side, var(--pami-component-glass-light-side, rgba(80, 69, 54, 0.1)));
-  --pami-surface-edge-bottom: var(--pami-material-bronze-soft-edge-bottom, var(--pami-component-glass-light-bottom, rgba(80, 69, 54, 0.16)));
-}
-
+:is([data-surface="crust"], [data-surface^="crust:"]) {
+  --pami-surface-bg-start: var(--pami-material-crust-background-start, rgba(230, 146, 52, 1));
+  --pami-surface-bg-end: var(--pami-material-crust-background-end, rgba(235, 153, 66, 1));
+  --pami-surface-dot-start: var(--pami-material-crust-dot-start, rgba(240, 169, 100, 1));
+  --pami-surface-dot-end: var(--pami-material-crust-dot-end, rgba(250, 181, 115, 1));
+  --pami-surface-blur: var(--pami-material-crust-blur, 0px);
+  --pami-surface-text: var(--pami-material-crust-text, rgba(43, 28, 13, 1));
+  --pami-surface-edge-top: var(--pami-material-crust-edge-top, var(--pami-component-glass-dark-top, rgba(255, 255, 255, 0.2)));
+  --pami-surface-edge-side: var(--pami-material-crust-edge-side, var(--pami-component-glass-dark-side, rgba(255, 255, 255, 0.08)));
+  --pami-surface-edge-bottom: var(--pami-material-crust-edge-bottom, var(--pami-component-glass-dark-bottom, rgba(0, 0, 0, 0.18)));
+}
+
+:is([data-surface="olive"], [data-surface^="olive:"]) {
+  --pami-surface-bg-start: var(--pami-material-olive-background-start, rgba(70, 95, 31, 1));
+  --pami-surface-bg-end: var(--pami-material-olive-background-end, rgba(63, 86, 26, 1));
+  --pami-surface-dot-start: var(--pami-material-olive-dot-start, rgba(84, 113, 41, 1));
+  --pami-surface-dot-end: var(--pami-material-olive-dot-end, rgba(80, 107, 39, 1));
+  --pami-surface-blur: var(--pami-material-olive-blur, 2px);
+  --pami-surface-text: var(--pami-material-olive-text, rgba(242, 248, 235, 1));
+  --pami-surface-edge-top: var(--pami-material-olive-edge-top, var(--pami-component-glass-dark-top, rgba(255, 255, 255, 0.2)));
+  --pami-surface-edge-side: var(--pami-material-olive-edge-side, var(--pami-component-glass-dark-side, rgba(255, 255, 255, 0.08)));
+  --pami-surface-edge-bottom: var(--pami-material-olive-edge-bottom, var(--pami-component-glass-dark-bottom, rgba(0, 0, 0, 0.18)));
+}
+
+:is([data-surface="bronze"], [data-surface^="bronze:"]) {
+  --pami-surface-bg-start: var(--pami-material-bronze-background-start, rgba(117, 67, 31, 1));
+  --pami-surface-bg-end: var(--pami-material-bronze-background-end, rgba(104, 58, 25, 1));
+  --pami-surface-dot-start: var(--pami-material-bronze-dot-start, rgba(145, 87, 46, 1));
+  --pami-surface-dot-end: var(--pami-material-bronze-dot-end, rgba(134, 80, 41, 1));
+  --pami-surface-blur: var(--pami-material-bronze-blur, 2px);
+  --pami-surface-text: var(--pami-material-bronze-text, rgba(255, 242, 235, 1));
+  --pami-surface-edge-top: var(--pami-material-bronze-edge-top, var(--pami-component-glass-dark-top, rgba(255, 255, 255, 0.2)));
+  --pami-surface-edge-side: var(--pami-material-bronze-edge-side, var(--pami-component-glass-dark-side, rgba(255, 255, 255, 0.08)));
+  --pami-surface-edge-bottom: var(--pami-material-bronze-edge-bottom, var(--pami-component-glass-dark-bottom, rgba(0, 0, 0, 0.18)));
+}
+
+:is([data-surface="crumb"], [data-surface^="crumb:"]) {
+  --pami-surface-bg-start: var(--pami-material-crumb-background-start, rgba(252, 252, 252, 1));
+  --pami-surface-bg-end: var(--pami-material-crumb-background-end, rgba(255, 251, 245, 1));
+  --pami-surface-dot-start: var(--pami-material-crumb-dot-start, rgba(249, 241, 231, 1));
+  --pami-surface-dot-end: var(--pami-material-crumb-dot-end, rgba(254, 249, 239, 1));
+  --pami-surface-blur: var(--pami-material-crumb-blur, 4px);
+  --pami-surface-text: var(--pami-material-crumb-text, rgba(52, 32, 4, 1));
+  --pami-surface-edge-top: var(--pami-material-crumb-edge-top, var(--pami-component-glass-light-top, rgba(255, 255, 255, 0.4)));
+  --pami-surface-edge-side: var(--pami-material-crumb-edge-side, var(--pami-component-glass-light-side, rgba(80, 69, 54, 0.1)));
+  --pami-surface-edge-bottom: var(--pami-material-crumb-edge-bottom, var(--pami-component-glass-light-bottom, rgba(80, 69, 54, 0.16)));
+}
+
+:is([data-surface="olive-soft"], [data-surface^="olive-soft:"]) {
+  --pami-surface-bg-start: var(--pami-material-olive-soft-background-start, rgba(237, 245, 227, 1));
+  --pami-surface-bg-end: var(--pami-material-olive-soft-background-end, rgba(227, 241, 213, 1));
+  --pami-surface-dot-start: var(--pami-material-olive-soft-dot-start, rgba(208, 226, 188, 1));
+  --pami-surface-dot-end: var(--pami-material-olive-soft-dot-end, rgba(196, 218, 169, 1));
+  --pami-surface-blur: var(--pami-material-olive-soft-blur, 2px);
+  --pami-surface-text: var(--pami-material-olive-soft-text, rgba(30, 40, 18, 1));
+  --pami-surface-edge-top: var(--pami-material-olive-soft-edge-top, var(--pami-component-glass-light-top, rgba(255, 255, 255, 0.4)));
+  --pami-surface-edge-side: var(--pami-material-olive-soft-edge-side, var(--pami-component-glass-light-side, rgba(80, 69, 54, 0.1)));
+  --pami-surface-edge-bottom: var(--pami-material-olive-soft-edge-bottom, var(--pami-component-glass-light-bottom, rgba(80, 69, 54, 0.16)));
+}
+
+:is([data-surface="bronze-soft"], [data-surface^="bronze-soft:"]) {
+  --pami-surface-bg-start: var(--pami-material-bronze-soft-background-start, rgba(255, 238, 228, 1));
+  --pami-surface-bg-end: var(--pami-material-bronze-soft-background-end, rgba(255, 230, 214, 1));
+  --pami-surface-dot-start: var(--pami-material-bronze-soft-dot-start, rgba(249, 210, 185, 1));
+  --pami-surface-dot-end: var(--pami-material-bronze-soft-dot-end, rgba(246, 197, 166, 1));
+  --pami-surface-blur: var(--pami-material-bronze-soft-blur, 2px);
+  --pami-surface-text: var(--pami-material-bronze-soft-text, rgba(51, 30, 17, 1));
+  --pami-surface-edge-top: var(--pami-material-bronze-soft-edge-top, var(--pami-component-glass-light-top, rgba(255, 255, 255, 0.4)));
+  --pami-surface-edge-side: var(--pami-material-bronze-soft-edge-side, var(--pami-component-glass-light-side, rgba(80, 69, 54, 0.1)));
+  --pami-surface-edge-bottom: var(--pami-material-bronze-soft-edge-bottom, var(--pami-component-glass-light-bottom, rgba(80, 69, 54, 0.16)));
+}
+
+:is([data-surface="crust-soft"], [data-surface^="crust-soft:"]) {
+  --pami-surface-bg-start: var(--pami-material-crust-soft-background-start, rgba(255, 239, 224, 1));
+  --pami-surface-bg-end: var(--pami-material-crust-soft-background-end, rgba(255, 230, 209, 1));
+  --pami-surface-dot-start: var(--pami-material-crust-soft-dot-start, rgba(245, 212, 182, 1));
+  --pami-surface-dot-end: var(--pami-material-crust-soft-dot-end, rgba(242, 200, 161, 1));
+  --pami-surface-blur: var(--pami-material-crust-soft-blur, 0px);
+  --pami-surface-text: var(--pami-material-crust-soft-text, rgba(50, 32, 14, 1));
+  --pami-surface-edge-top: var(--pami-material-crust-soft-edge-top, var(--pami-component-glass-light-top, rgba(255, 255, 255, 0.4)));
+  --pami-surface-edge-side: var(--pami-material-crust-soft-edge-side, var(--pami-component-glass-light-side, rgba(80, 69, 54, 0.1)));
+  --pami-surface-edge-bottom: var(--pami-material-crust-soft-edge-bottom, var(--pami-component-glass-light-bottom, rgba(80, 69, 54, 0.16)));
+}
+
 /*
  * System colour hues (spice): flat plate, black text, light glass. The token
  * sheet only has -light/-dark variants without a theme rebinding, so CSS uses