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

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

@@ -225,7 +225,7 @@ export class PamiSwitch {
         const showSelectedIcon = this.icons || this.showOnlySelectedIcon;
         const showUnselectedIcon = this.icons;
         const showIcon = this.selected ? showSelectedIcon : showUnselectedIcon;
-        return (h(Host, { key: '84acc05fc66300956d3e0039b8eec1e201ae59de', role: "switch", "aria-invalid": this.validationMessage ? 'true' : undefined, "aria-checked": String(this.selected), "aria-disabled": this.isDisabled ? 'true' : null, "aria-required": this.required ? 'true' : null, tabindex: this.disabled ? '-1' : '0', class: {
+        return (h(Host, { key: 'feb785b1aa86eb4305bd1a2b06edb253a8eb0e9a', role: "switch", "aria-invalid": this.validationMessage ? 'true' : undefined, "aria-checked": String(this.selected), "aria-disabled": this.isDisabled ? 'true' : null, "aria-required": this.required ? 'true' : null, tabindex: this.disabled ? '-1' : '0', class: {
                 'pami-switch': true,
                 'pami-switch--selected': this.selected,
                 'pami-switch--disabled': this.disabled || this.softDisabled,
@@ -233,7 +233,7 @@ export class PamiSwitch {
                 'pami-switch--with-icon': showIcon,
                 'pami-switch--focus-ring': this.programmaticFocus,
                 'pami-switch--has-support': !!this.validationMessage,
-            }, onClick: this.toggle, onKeyDown: this.handleKeyDown, onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, onPointerLeave: this.handlePointerUp, onPointerCancel: this.handlePointerUp, onBlur: this.handleBlur }, h("span", { key: 'be2bc1c8792d514760abf417eee14b8031a64d1b', class: "pami-switch__target" }, h("div", { key: '60a54d4f827f81e2e82b3bf8a5293f035c2e681e', class: "pami-switch__track", part: "track" }, this.selected && !this.isDisabled && (h("span", { key: '31d0f03b01333e6377f499a1e43aaf34611210d7', class: "pami-switch__surface", "data-surface": "crust:control", "aria-hidden": "true" }, h(PamiDots, { key: '781d2cfd376340d708852e5658c41c0419e71d45' }))), h("div", { key: '3d7dfb9ef770e6d602cbfc4ca24adbadec1b9a2e', class: "pami-switch__handle-container" }, h("span", { key: '112eee3597faede68c3fdf84e434cb7d85547b59', class: "pami-switch__state-layer", part: "state-layer", "aria-hidden": "true" }), h("span", { key: '0ab38fe09d572b3d316f8383a2f8dd71a6f586db', class: "pami-switch__handle", part: "handle" }, showIcon && (this.selected ? (h("slot", { name: "selected-icon" }, h("pami-icon", { class: "pami-switch__icon", part: "icon", "aria-hidden": "true", name: this.selectedIcon }))) : (h("slot", { name: "unselected-icon" }, h("pami-icon", { class: "pami-switch__icon", part: "icon", "aria-hidden": "true", name: this.unselectedIcon })))))))), this.validationMessage && (h("span", { key: '40de62c4d739722e1d094c7bb2898fa53a25a999', id: `${this.uid}-support`, ref: (el) => { this.supportEl = el; }, class: "pami-switch__support", role: "alert" }, this.validationMessage))));
+            }, onClick: this.toggle, onKeyDown: this.handleKeyDown, onPointerDown: this.handlePointerDown, onPointerUp: this.handlePointerUp, onPointerLeave: this.handlePointerUp, onPointerCancel: this.handlePointerUp, onBlur: this.handleBlur }, h("span", { key: '870d1ffa081d09e6b1159810b335277a7cb3c52a', class: "pami-switch__target" }, h("div", { key: 'ef89b6b733784b15c08808f8c0dc464c03ae97cb', class: "pami-switch__track", part: "track" }, this.selected && !this.isDisabled && (h("span", { key: 'dc184b0c9baf29ae8ce9669580a556359e01edef', class: "pami-switch__surface", "data-surface": "crust:control", "aria-hidden": "true" }, h(PamiDots, { key: 'b05e699b810373fbeb637a640793a11471f92965' }))), h("div", { key: '2123ed2a858053624a9519d94bcb483b2c9b21e3', class: "pami-switch__handle-container" }, h("span", { key: '780d57c167a64cf85d94d4f1e4d479be19c501f8', class: "pami-switch__state-layer", part: "state-layer", "aria-hidden": "true" }), h("span", { key: '2ee25255ab0cd20b0ec4e1f920dbd704723cbb5d', class: "pami-switch__handle", part: "handle" }, showIcon && (this.selected ? (h("slot", { name: "selected-icon" }, h("pami-icon", { class: "pami-switch__icon", part: "icon", "aria-hidden": "true", name: this.selectedIcon }))) : (h("slot", { name: "unselected-icon" }, h("pami-icon", { class: "pami-switch__icon", part: "icon", "aria-hidden": "true", name: this.unselectedIcon })))))))), this.validationMessage && (h("span", { key: '4d4ea5976821750a3820368c357737e498d07747', id: `${this.uid}-support`, ref: (el) => { this.supportEl = el; }, class: "pami-switch__support", role: "alert" }, this.validationMessage))));
     }
     static get is() { return "pami-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -128,7 +128,7 @@ export class PamiTab {
         const hasBadge = this.badge !== undefined;
         const isInline = this.inlineIcon && hasIcon && hasLabel;
         const isStacked = hasIcon && hasLabel && !isInline;
-        return (h(Host, { key: 'afd4c370cacc7759aac1afe614a122580507e63f', class: {
+        return (h(Host, { key: 'ac813275d35a49320b2263270322bcc61a72d046', class: {
                 'pami-tab': true,
                 [`pami-tab--${this.variant}`]: true,
                 'pami-tab--active': this.active,
@@ -136,16 +136,16 @@ export class PamiTab {
                 'pami-tab--inline-icon': isInline,
                 'pami-tab--stacked': isStacked,
                 'pami-tab--icon-only': hasIcon && !hasLabel,
-            }, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "aria-controls": this.controls || null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("pami-ripple", { key: 'eb20185737788273088aa676683486a3126361d2', disabled: this.disabled }), h("span", { key: '837a8231026e53d8162d03d6a2ce6a7f979a7489', class: "pami-tab__state-layer", part: "state-layer", "aria-hidden": "true" }), h("span", { key: 'ce261555fed3fed6b87337b106e5f315a3ba3936', class: "pami-tab__inner" }, h("span", { key: '47d1087e9ce4733ba5ebd13cac97c2dc0c33f420', class: {
+            }, role: "tab", "aria-selected": this.active ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, "aria-controls": this.controls || null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("pami-ripple", { key: '542c063c5b229c571265bafe08cb6e5eb8ad8fff', disabled: this.disabled }), h("span", { key: '77ffd0fa74d3eb65d9a90abe6abeb0887cb9d0d3', class: "pami-tab__state-layer", part: "state-layer", "aria-hidden": "true" }), h("span", { key: 'a9e1a56e568b1524e20bc94cfcae2aa4e80d8a8d', class: "pami-tab__inner" }, h("span", { key: 'aea0cf7a42c904e102e76ed45985ecc96c331033', class: {
                 'pami-tab__content': true,
                 'pami-tab__content--inline': isInline,
-            }, part: "content" }, hasIcon && (h("span", { key: '7041e7facfdbddfe6f3f2c98c2c23b53ad173a25', class: "pami-tab__icon-wrapper" }, h("slot", { key: '9bc0a231a59dfd418a785626a501071e7821b355', name: "icon" }, h("pami-icon", { key: '58f2b2454b2d954ab6f4e7f271dabd8c6ff1e5c3', class: "pami-tab__icon", part: "icon", "aria-hidden": "true", name: this.icon })), h("slot", { key: '31413cbe33efa3742f6f288d3d8b6ff5c7475a31', name: "badge" }, hasBadge && (h("span", { key: 'd2d361e5fc5809e244bcc957bfe5777f000d3255', class: "pami-tab__badge", "aria-label": this.badge || 'notification' }, this.badge))))), hasLabel && (h("span", { key: '872c7333c37928416a0c39cc9cf97add20b9b92d', class: "pami-tab__label", part: "label" }, h("span", { key: 'a79c06a3090ec148df26f2dfdf2cafde6cd05c56', class: "pami-tab__label-text" }, this.label), !hasIcon && (h("slot", { key: '91b85f30a5ff744cbf086a93a27292aa21df1a50', name: "badge" }, hasBadge && (h("span", { key: '1ed8f39a51222daa6ea1df450466b4a4033faa3b', class: "pami-tab__badge pami-tab__badge--inline", "aria-label": this.badge || 'notification' }, this.badge))))))), this.variant === 'primary' ? (h("span", { class: {
+            }, part: "content" }, hasIcon && (h("span", { key: '7ad06cdf0d714b47dc4227159b4a765961813d6d', class: "pami-tab__icon-wrapper" }, h("slot", { key: 'ac42ea6a82618fdd04b93713a35d45af99067c4d', name: "icon" }, h("pami-icon", { key: '26e97c31c64a303ae04273196030fb57d14455fd', class: "pami-tab__icon", part: "icon", "aria-hidden": "true", name: this.icon })), h("slot", { key: '28250ce6ace6f9291b73316c20c12b6650b74b51', name: "badge" }, hasBadge && (h("span", { key: '62a800f2c24b0e608b3f3ccad509f0a68e285c9f', class: "pami-tab__badge", "aria-label": this.badge || 'notification' }, this.badge))))), hasLabel && (h("span", { key: 'da0241f2952aeb738fa5ac240aa51d899fac0254', class: "pami-tab__label", part: "label" }, h("span", { key: 'd24ef0a7d5734b3e72f7bee323728d39074a78cf', class: "pami-tab__label-text" }, this.label), !hasIcon && (h("slot", { key: '379c966f0aab100c52e6a48a213405cd8df789a5', name: "badge" }, hasBadge && (h("span", { key: '68c1af2aa6dd6dedafa6fa1d2145e0690a28e3e5', class: "pami-tab__badge pami-tab__badge--inline", "aria-label": this.badge || 'notification' }, this.badge))))))), this.variant === 'primary' ? (h("span", { class: {
                 'pami-tab__indicator': true,
                 'pami-tab__indicator--active': this.active,
             }, part: "indicator", "aria-hidden": "true" })) : null), this.variant === 'secondary' ? (h("span", { class: {
                 'pami-tab__indicator': true,
                 'pami-tab__indicator--active': this.active,
-            }, part: "indicator", "aria-hidden": "true" })) : null, h("span", { key: '3538bc1a4767128c0e216a4933460e3b42860ba8', class: "pami-tab__divider", part: "divider", "aria-hidden": "true" })));
+            }, part: "indicator", "aria-hidden": "true" })) : null, h("span", { key: 'df0f3644497c0b59659a23d57a25167563a4220f', class: "pami-tab__divider", part: "divider", "aria-hidden": "true" })));
     }
     static get is() { return "pami-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pami-tab-panel/pami-tab-panel.js

@@ -13,7 +13,7 @@ export class PamiTabPanel {
         this.active = false;
     }
     render() {
-        return (h(Host, { key: 'f527809492deb793bf5f0947adffc586792d8f64', role: "tabpanel", tabindex: this.active ? '0' : '-1' }, h("div", { key: '25a0c8ffae33108c6a4d7e1e3d0d189d1e97e7b6', class: "pami-tab-panel__body" }, h("slot", { key: 'fbf53cc67dc28e67b404e0929539ee0112f3440a' }))));
+        return (h(Host, { key: 'bd9eb1d09c5d86eca38e5510c2961c88970c5cb1', role: "tabpanel", tabindex: this.active ? '0' : '-1' }, h("div", { key: 'd87d0382c415041244225e369f767d57543e0871', class: "pami-tab-panel__body" }, h("slot", { key: 'a56976f83c4d83e4beb413a097a2bba372547bf7' }))));
     }
     static get is() { return "pami-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pami-tab-panels/pami-tab-panels.js

@@ -129,7 +129,7 @@ export class PamiTabPanels {
         this.el.setAttribute('data-active-resolved', '');
     }
     render() {
-        return (h(Host, { key: 'fa62d4af35000ee55d5e830550d8b6fd559184bc' }, h("slot", { key: '94bc8b0f19cf54235e936037311de0873585f7c8' })));
+        return (h(Host, { key: '61dbb47c5f51f23a121eb2399b889ad215d77fe7' }, h("slot", { key: '6b4de0202c2215e46a4d18c17988de0af8b42fb6' })));
     }
     static get is() { return "pami-tab-panels"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pami-table-body/pami-table-body.js

@@ -20,7 +20,7 @@ export class PamiTableBody {
         this.presentational = false;
     }
     render() {
-        return (h(Host, { key: 'f5f6d2fa7305dfb24d71105051d06ea40f73971b', class: "pami-table-body", role: this.presentational ? 'presentation' : 'rowgroup', "data-pami-rowgroup": "body" }, h("slot", { key: '09ad00c4501da236ccce7532740598e55bd01ab7', onSlotchange: () => 
+        return (h(Host, { key: '8e109aab2a3d6d5c6a3cb4b606089420ece1efa1', class: "pami-table-body", role: this.presentational ? 'presentation' : 'rowgroup', "data-pami-rowgroup": "body" }, h("slot", { key: 'e802db1003b4f3c63062edcd93b5c7bfab28a109', onSlotchange: () => 
             // Row mutations happen inside THIS shadow slot — slotchange is not
             // composed, so pami-table would never see reorders (a sorted row
             // kept its stale data-last stamp, losing its divider). Relay as a

package/dist/collection/components/pami-table-cell/pami-table-cell.js

@@ -82,14 +82,14 @@ export class PamiTableCell {
             style.gridColumn = `span ${this.colSpan}`;
         if (this.rowSpan > 1)
             style.gridRow = `span ${this.rowSpan}`;
-        return (h(Host, { key: '6d4e60557ecdd6df7f4cf3e1cf159f58f70dd371', class: {
+        return (h(Host, { key: '788dd5d0d37bfa675d1d67b2c476ca3f0d2178fa', class: {
                 'pami-table-cell': true,
                 'pami-table-cell--head': this.head,
                 'pami-table-cell--pinned': this.showPin,
                 [`pami-table-cell--align-${this.align}`]: true,
                 [`pami-table-cell--padding-${this.padding}`]: true,
                 [`pami-table-cell--variant-${this.variant}`]: true,
-            }, role: this.role, scope: this.head && this.scope ? this.scope : undefined, "aria-colspan": this.colSpan > 1 ? String(this.colSpan) : null, "aria-rowspan": this.rowSpan > 1 ? String(this.rowSpan) : null, style: style }, this.showPin && (h("span", { key: '3e82a29d06e3e8090f55fb0a560c409214b808b2', class: "pami-table-cell__pin", part: "pin", "aria-hidden": "true", title: this.sticky === 'end' ? 'Pinned right' : 'Pinned left' }, this.pinIcon ? (h("pami-icon", { class: "pami-table-cell__pin-glyph", name: this.pinIcon })) : (h("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" }))))), h("span", { key: '540323dfdb76002823c492667791cbbbf89cf381', class: "pami-table-cell__content", part: "content" }, h("slot", { key: '1e839cf66f6b47140bc77c3228ddf7f4d3d022ac' }))));
+            }, role: this.role, scope: this.head && this.scope ? this.scope : undefined, "aria-colspan": this.colSpan > 1 ? String(this.colSpan) : null, "aria-rowspan": this.rowSpan > 1 ? String(this.rowSpan) : null, style: style }, this.showPin && (h("span", { key: 'adabf251c9df755c8af63a52ae7659e8be16a8e0', class: "pami-table-cell__pin", part: "pin", "aria-hidden": "true", title: this.sticky === 'end' ? 'Pinned right' : 'Pinned left' }, this.pinIcon ? (h("pami-icon", { class: "pami-table-cell__pin-glyph", name: this.pinIcon })) : (h("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" }))))), h("span", { key: 'd0e4cb1747e6d93e828ecc77c3d815565dd6b9a1', class: "pami-table-cell__content", part: "content" }, h("slot", { key: 'a3215762325c47014d878340f2a7c352f61b9ebf' }))));
     }
     static get is() { return "pami-table-cell"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pami-table-container/pami-table-container.js

@@ -102,14 +102,14 @@ export class PamiTableContainer {
         // would nest two scrollbars. max-height only controls the SIZE of the
         // frozen body; the architecture is opt-in on the table.
         const frozen = !!this.el.querySelector('pami-table[frozen-header]');
-        return (h(Host, { key: '00395c7af337a56b73bbfe905eaa1189a1adbb2f', class: {
+        return (h(Host, { key: '13064a37707d43d6533fde30dd875cf1f374566c', class: {
                 'pami-table-container': true,
                 [`pami-table-container--${this.variant}`]: true,
                 [`pami-table-container--shape-${this.shape}`]: true,
                 'pami-table-container--scrollable': !!this.maxHeight,
                 'pami-table-container--frozen-header': frozen,
                 'pami-table-container--vibrant': this.vibrant,
-            }, style: style }, h("div", { key: 'c6fecf3e677f888684459b1016ccb1b16c06d2e5', class: "pami-table-container__top", part: "top" }, h("slot", { key: '0bea9040edbab4f49ad5cee6bc24309be3bb0d50', name: "top" })), h("div", { key: 'b2ace7cf49d4e63cbbacf09ee3f8842fda778d7c', class: "pami-table-container__scroll", part: "scroll" }, h("slot", { key: '48effed87240b5264f73ce2129dac3422f516d25' })), h("div", { key: '5d3bf92a2eb39a3f93442ca3d34831b148507b0a', class: "pami-table-container__bottom", part: "bottom" }, h("slot", { key: '89d489d60db112a94b3b1d3d48550fdf620e4387', name: "bottom" }))));
+            }, style: style }, h("div", { key: 'bf1e68f85aabb4cc7393553e2453245f312f34c2', class: "pami-table-container__top", part: "top" }, h("slot", { key: 'c3a7f6f83392273f9f27015c561077bd27964299', name: "top" })), h("div", { key: '2e505fbc0a82b07cd0ca2f4104e06e9b2eecc564', class: "pami-table-container__scroll", part: "scroll" }, h("slot", { key: 'cef4969f275566ebeb8513af344827df71a8cf9a' })), h("div", { key: '568284ed52ffe25d7778dde38b8c702fd57b45e7', class: "pami-table-container__bottom", part: "bottom" }, h("slot", { key: 'de3000e5a7435a1eab6588d244901289b991a3e0', name: "bottom" }))));
     }
     static get is() { return "pami-table-container"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pami-table-expand-toggle/pami-table-expand-toggle.js

@@ -59,10 +59,10 @@ export class PamiTableExpandToggle {
         this.row = null;
     }
     render() {
-        return (h(Host, { key: '4efdc6795a7068d3085836665f7899269082fa54', class: {
+        return (h(Host, { key: '15ef797f03e55b1942d0e7c6ad22833879934944', class: {
                 'pami-table-expand-toggle': true,
                 'pami-table-expand-toggle--expanded': this.expanded,
-            } }, h("pami-icon-button", { key: '65f2ae45b049ed2c5d6ce1a719f24d4c73483181', size: "xs", icon: this.icon, "aria-label": this.buttonLabel, "aria-expanded": this.expanded ? 'true' : 'false', onClick: this.onClick })));
+            } }, h("pami-icon-button", { key: 'eabfe022482a57def8a2a5a9be9632c6d4ca2e00', size: "xs", icon: this.icon, "aria-label": this.buttonLabel, "aria-expanded": this.expanded ? 'true' : 'false', onClick: this.onClick })));
     }
     static get is() { return "pami-table-expand-toggle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pami-table-foot/pami-table-foot.js

@@ -18,7 +18,7 @@ export class PamiTableFoot {
         this.presentational = false;
     }
     render() {
-        return (h(Host, { key: '5b67df43224eef12def1bd9012acff016d9b336a', class: "pami-table-foot", role: this.presentational ? 'presentation' : 'rowgroup', "data-pami-rowgroup": "foot" }, h("slot", { key: 'f80918fcce4fd747cd95c3d60237413b53c8dcf8', onSlotchange: () => 
+        return (h(Host, { key: 'fd57283af58f1dd4786b17f8de780ebe98964e81', class: "pami-table-foot", role: this.presentational ? 'presentation' : 'rowgroup', "data-pami-rowgroup": "foot" }, h("slot", { key: 'b41d7ca211802aa1ebdbe8456902de7c263a50e6', onSlotchange: () => 
             // Row mutations happen inside THIS shadow slot — slotchange is not
             // composed, so pami-table would never see reorders (a sorted row
             // kept its stale data-last stamp, losing its divider). Relay as a

package/dist/collection/components/pami-table-head/pami-table-head.js

@@ -8,7 +8,7 @@ import { Host, h } from "@stencil/core";
  */
 export class PamiTableHead {
     render() {
-        return (h(Host, { key: '772733beb2fe92840d89213695b552ca2d5c3e26', class: "pami-table-head", role: "rowgroup", "data-pami-rowgroup": "head" }, h("slot", { key: '61d53d7d09e6dae1da804d14ff38cf072ec32276', onSlotchange: () => 
+        return (h(Host, { key: 'b2e0c614e9090843f49939d6eb6f6c9772d715d3', class: "pami-table-head", role: "rowgroup", "data-pami-rowgroup": "head" }, h("slot", { key: '2edb38bace2f9b65b3f74c26ef17f8f3f2db6474', onSlotchange: () => 
             // Row mutations happen inside THIS shadow slot — slotchange is not
             // composed, so pami-table would never see reorders (a sorted row
             // kept its stale data-last stamp, losing its divider). Relay as a

package/dist/collection/components/pami-table-pagination/pami-table-pagination.js

@@ -150,11 +150,11 @@ export class PamiTablePagination {
         const isLast = this.page >= this.lastPage;
         const opts = this.options;
         const selectOptions = opts.map((o) => ({ value: String(o.value), label: o.label }));
-        return (h(Host, { key: 'b9cf933bfcf037f7da0f778e3cb33a48b49eb64b', class: {
+        return (h(Host, { key: 'b3880798a475ddca208c02ccd5eb489c8ccafa0b', class: {
                 'pami-table-pagination': true,
                 'pami-table-pagination--compact': this.compact,
                 'pami-table-pagination--disabled': this.disabled,
-            }, role: "navigation", "aria-label": "Pagination" }, h("div", { key: 'cfab59bbcb3ddf11d5fbddeca5727ba25d9955bb', class: "pami-table-pagination__display", part: "display", "aria-live": "polite" }, this.displayLabel), h("div", { key: '500d3fc85bebd324936915b23e578d2d645c3984', class: "pami-table-pagination__rpp", part: "rpp" }, h("span", { key: '73359ef793dbd6fd1ff99b74f22e247667675ed0', class: "pami-table-pagination__rpp-label", id: "rpp-label" }, this.labelRowsPerPage), h("pami-select", { key: 'b81f56526eb9d19ac2a52dcef0f4c345bdcbcd25', class: "pami-table-pagination__rpp-select", part: "rpp-select", "aria-label": this.labelRowsPerPage, density: this.selectDensity, options: selectOptions, value: String(this.rowsPerPage), disabled: this.disabled, placement: "top-start", onPamiChange: this.handleRppChange })), h("div", { key: '3dc63f7bdc2a204af724b70656d473cede6a4e97', class: "pami-table-pagination__nav", part: "nav" }, this.showFirstLast && (h("pami-icon-button", { key: '5c9d55aa808ae6dab5324946081e4543ad48d517', part: "first-button", icon: "first_page", size: "sm", "aria-label": this.labelFirstPage, disabled: isFirst || this.disabled, onClick: this.handleFirst })), h("pami-icon-button", { key: 'f827a541154f31159f1143fdb0350e575c469ee0', part: "prev-button", icon: "chevron_left", size: "sm", "aria-label": this.labelPreviousPage, disabled: isFirst || this.disabled, onClick: this.handlePrev }), h("pami-icon-button", { key: '1312e56a34d68ddb63e89f4ed53806db90f13e72', part: "next-button", icon: "chevron_right", size: "sm", "aria-label": this.labelNextPage, disabled: isLast || this.disabled, onClick: this.handleNext }), this.showFirstLast && (h("pami-icon-button", { key: '20448b0662ad648ee716d45c4f2989828692dc0f', part: "last-button", icon: "last_page", size: "sm", "aria-label": this.labelLastPage, disabled: isLast || this.disabled, onClick: this.handleLast })), h("slot", { key: 'adf51209a366b3b4b435e9933391c83e61770740', name: "actions" }))));
+            }, role: "navigation", "aria-label": "Pagination" }, h("div", { key: 'a7507b6798f371b06a777e8b55748d7985cd2e31', class: "pami-table-pagination__display", part: "display", "aria-live": "polite" }, this.displayLabel), h("div", { key: 'd2f5d502930617963eb62e4e116411a1b0ee7fc1', class: "pami-table-pagination__rpp", part: "rpp" }, h("span", { key: 'afb394a313fcbeff312c95c6078123e5881be7f6', class: "pami-table-pagination__rpp-label", id: "rpp-label" }, this.labelRowsPerPage), h("pami-select", { key: '1a9257a446885fe35ecc4797ae70d04e29dc2b96', class: "pami-table-pagination__rpp-select", part: "rpp-select", "aria-label": this.labelRowsPerPage, density: this.selectDensity, options: selectOptions, value: String(this.rowsPerPage), disabled: this.disabled, placement: "top-start", onPamiChange: this.handleRppChange })), h("div", { key: '9d119a49f91a791108752952fcb86047b063d1de', class: "pami-table-pagination__nav", part: "nav" }, this.showFirstLast && (h("pami-icon-button", { key: '9eb7b353a949dbbe9a376655200e1286d4514397', part: "first-button", icon: "first_page", size: "sm", "aria-label": this.labelFirstPage, disabled: isFirst || this.disabled, onClick: this.handleFirst })), h("pami-icon-button", { key: '0a24dfea93818b893f32d1e0ef5a39bcb9d1bd50', part: "prev-button", icon: "chevron_left", size: "sm", "aria-label": this.labelPreviousPage, disabled: isFirst || this.disabled, onClick: this.handlePrev }), h("pami-icon-button", { key: 'feadae82eff51046610466588ba79e4f5a1f58eb', part: "next-button", icon: "chevron_right", size: "sm", "aria-label": this.labelNextPage, disabled: isLast || this.disabled, onClick: this.handleNext }), this.showFirstLast && (h("pami-icon-button", { key: '78529952dc158666f3ad880e89fc312d0d4be4ca', part: "last-button", icon: "last_page", size: "sm", "aria-label": this.labelLastPage, disabled: isLast || this.disabled, onClick: this.handleLast })), h("slot", { key: 'eda704788a4747c569999aaa0fc520f4ad4050fc', name: "actions" }))));
     }
     static get is() { return "pami-table-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pami-table-row/pami-table-row.js

@@ -95,7 +95,7 @@ export class PamiTableRow {
         this.expanded = !this.expanded;
     }
     render() {
-        return (h(Host, { key: '6f6acc0ca5cc0964a0296eee5b0c1076992d4ba0', class: {
+        return (h(Host, { key: 'de4e609c86c7de5a3264a3f85a3abbccb6eb0263', class: {
                 'pami-table-row': true,
                 [`pami-table-row--${this.rowgroup}`]: true,
                 'pami-table-row--selected': this.selected,
@@ -104,12 +104,12 @@ export class PamiTableRow {
                 'pami-table-row--highlight': this.highlight,
                 'pami-table-row--expandable': this.expandable,
                 'pami-table-row--expanded': this.expanded,
-            }, role: "row", "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expandable ? (this.expanded ? 'true' : 'false') : null, tabindex: this.clickable && !this.disabled ? '0' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: '09b748d28417708278fbb369e00ccb9766859ed5', onSlotchange: () => 
+            }, role: "row", "aria-disabled": this.disabled ? 'true' : null, "aria-expanded": this.expandable ? (this.expanded ? 'true' : 'false') : null, tabindex: this.clickable && !this.disabled ? '0' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, h("slot", { key: '92092e128b3ae93cca9e2260e9ebd7c5ca917e99', onSlotchange: () => 
             // Cells slot into the ROW's shadow — cell additions/removals (e.g.
             // a checkbox column appearing when selection turns on) are
             // invisible to pami-table without this relay (same non-composed
             // slotchange rule as the rowgroups).
-            this.el.dispatchEvent(new CustomEvent('pamiRowgroupSlotChange', { bubbles: true })) }), this.expandable && (h("div", { key: 'eba9aa14aa7975510efeba7ea5727fe0d8db4497', class: {
+            this.el.dispatchEvent(new CustomEvent('pamiRowgroupSlotChange', { bubbles: true })) }), this.expandable && (h("div", { key: '626249444d15f60a43b8665ae5d17b3521f1b6a3', class: {
                 'pami-table-row__expanded': true,
                 'pami-table-row__expanded--open': this.expanded,
             }, part: "expanded",
@@ -120,7 +120,7 @@ export class PamiTableRow {
             // inert while collapsed: the height animation only clips the
             // panel visually — without inert, focusable content inside stays
             // tab-reachable while invisible.
-            inert: !this.expanded }, h("div", { key: 'dee4533a9907bd40453257e7b4691929fdf0292f', class: "pami-table-row__expanded-sizer" }, h("div", { key: '97359047cda1d6dc40e7d4e33a609658dd818538', class: "pami-table-row__expanded-inner" }, h("slot", { key: '4464634f18f9c50c8c7c787d4b5dbdf496128c01', name: "expanded" })))))));
+            inert: !this.expanded }, h("div", { key: '4dda37577225047d1db0d7ae6c4cf02658bbb499', class: "pami-table-row__expanded-sizer" }, h("div", { key: '212bc30ca858740204f1a1091b21d2ef5138760f', class: "pami-table-row__expanded-inner" }, h("slot", { key: '02d3045da7b9a0b9b20876e2a5807387b1143d15', name: "expanded" })))))));
     }
     static get is() { return "pami-table-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pami-table-sort-label/pami-table-sort-label.js

@@ -108,11 +108,11 @@ export class PamiTableSortLabel {
         // aria-sort actually belongs on the parent columnheader cell (pami-table-cell head),
         // but we surface it on the host as well so it's present regardless of how the
         // header is composed.
-        return (h(Host, { key: 'b5e0695ddbc554ccaf0990b820d061922d68a5e5', class: {
+        return (h(Host, { key: 'd1c62978275edd0fa1f0b830e5e51d7c70c5c1c4', class: {
                 'pami-table-sort-label': true,
                 'pami-table-sort-label--active': this.active,
                 'pami-table-sort-label--disabled': this.disabled,
-            }, role: "button", tabindex: this.disabled ? '-1' : '0', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, this.iconPosition === 'start' && this.renderArrow(), h("span", { key: 'dc0f1ede017e9617ec30bc7e1d606476e4db84a1', class: "pami-table-sort-label__text", part: "label" }, h("slot", { key: '23cf9a503f3019e651aa7ee7b4a89ce2ba0c8682' })), this.iconPosition === 'end' && this.renderArrow(), h("span", { key: '3085ac0e07f23b4065475c15b1b80ca1413d7837', class: "pami-table-sort-label__sr", "aria-live": "polite" }, this.active ? (this.order === 'desc' ? this.sortedDescendingLabel : this.sortedAscendingLabel) : '')));
+            }, role: "button", tabindex: this.disabled ? '-1' : '0', "aria-disabled": this.disabled ? 'true' : null, onClick: this.handleClick, onKeyDown: this.handleKeyDown }, this.iconPosition === 'start' && this.renderArrow(), h("span", { key: '37c61ad226d0939f3c426d0e50179c01b3e55c96', class: "pami-table-sort-label__text", part: "label" }, h("slot", { key: 'b530c5333f0c40f89018faf727831942b8cd7506' })), this.iconPosition === 'end' && this.renderArrow(), h("span", { key: '3d16e6ae0d1e2944359d02e62215bd63809577aa', class: "pami-table-sort-label__sr", "aria-live": "polite" }, this.active ? (this.order === 'desc' ? this.sortedDescendingLabel : this.sortedAscendingLabel) : '')));
     }
     static get is() { return "pami-table-sort-label"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pami-table-toolbar/pami-table-toolbar.js

@@ -97,11 +97,11 @@ export class PamiTableToolbar {
         return this.labelSelected.replace('%count%', this.numSelected.toLocaleString());
     }
     render() {
-        return (h(Host, { key: '3aa0b591bc60b4adb6e95ace481ff547029ba4b9', class: {
+        return (h(Host, { key: '900af327e4fa23dc8c7e2ad3cb0da53c74efbf84', class: {
                 'pami-table-toolbar': true,
                 'pami-table-toolbar--compact': this.compact,
                 'pami-table-toolbar--selection-mode': this.inSelectionMode,
-            }, role: "toolbar", "aria-label": this.headline || 'Table toolbar' }, h("div", { key: '1978e2019f150892b68f241f941f25dcf9cbd5be', class: "pami-table-toolbar__leading", part: "leading", hidden: !this.hasLeading && !this.inSelectionMode }, !this.inSelectionMode && h("slot", { key: '54415cdd89856b95673cf9550be0e05eb1b7295e', name: "leading" })), h("div", { key: '792c57bcaea948e222cd6625e15cd52441c0ac27', class: "pami-table-toolbar__main", part: "main" }, this.inSelectionMode ? (h("span", { class: "pami-table-toolbar__selection-caption", part: "selection-caption", "aria-live": "polite" }, this.selectionLabel)) : (h("div", { class: "pami-table-toolbar__titles" }, this.headline && (h("h2", { class: "pami-table-toolbar__headline", part: "headline" }, h("slot", { name: "headline" }, this.headline))), this.supportingText && (h("p", { class: "pami-table-toolbar__supporting", part: "supporting-text" }, h("slot", { name: "supporting-text" }, this.supportingText))), !this.headline && !this.supportingText && (h("slot", { name: "title-area" }))))), h("div", { key: '1ed47cff9ce9450f6ecc044aa639cb33b8a1d860', class: "pami-table-toolbar__actions", part: "actions" }, this.inSelectionMode ? (h("slot", { name: "selection-actions" })) : (h("slot", { name: "actions" })))));
+            }, role: "toolbar", "aria-label": this.headline || 'Table toolbar' }, h("div", { key: 'b000133693a5f7522a5e318c0297876bb4b155df', class: "pami-table-toolbar__leading", part: "leading", hidden: !this.hasLeading && !this.inSelectionMode }, !this.inSelectionMode && h("slot", { key: '83a1764ff31f37b85a29d98575bee653da742136', name: "leading" })), h("div", { key: 'd8ea46bf5bed861f3278fc4bf02d6641e7ad7c6d', class: "pami-table-toolbar__main", part: "main" }, this.inSelectionMode ? (h("span", { class: "pami-table-toolbar__selection-caption", part: "selection-caption", "aria-live": "polite" }, this.selectionLabel)) : (h("div", { class: "pami-table-toolbar__titles" }, this.headline && (h("h2", { class: "pami-table-toolbar__headline", part: "headline" }, h("slot", { name: "headline" }, this.headline))), this.supportingText && (h("p", { class: "pami-table-toolbar__supporting", part: "supporting-text" }, h("slot", { name: "supporting-text" }, this.supportingText))), !this.headline && !this.supportingText && (h("slot", { name: "title-area" }))))), h("div", { key: 'c166326d320a57c1a94911a4cbfdd9591913bd45', class: "pami-table-toolbar__actions", part: "actions" }, this.inSelectionMode ? (h("slot", { name: "selection-actions" })) : (h("slot", { name: "actions" })))));
     }
     static get is() { return "pami-table-toolbar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -517,7 +517,7 @@ export class PamiTabs {
     }
     // ─── Render ──────────────────────────────────────────────
     render() {
-        return (h(Host, { key: '4410fc8b385ce49a8d51ec3b59ba76e60834a4cb', class: {
+        return (h(Host, { key: '2fb03c9f35a701105977e6c99763478330ea6449', class: {
                 'pami-tabs': true,
                 [`pami-tabs--${this.variant}`]: true,
                 'pami-tabs--tw-auto': this.tabWidthMode === 'auto',
@@ -525,7 +525,7 @@ export class PamiTabs {
             }, style: {
                 ...(this.tabWidthMode === 'fixed' ? { '--_tab-width': this.tabWidth } : {}),
                 ...(this.width ? { 'inline-size': this.width } : {}),
-            }, role: "tablist", "aria-label": this.ariaLabelProp || 'tabs', "aria-orientation": "horizontal" }, h("div", { key: '4918edbb4fdde80bd5bb3977c7739415173f595a', class: "pami-tabs__container", part: "container", ref: el => (this.containerEl = el), onWheel: this.handleWheel, onScroll: this.updateOverflow }, h("slot", { key: 'ad620eed4cea298776a313c287f0773caaa5726a' }))));
+            }, role: "tablist", "aria-label": this.ariaLabelProp || 'tabs', "aria-orientation": "horizontal" }, h("div", { key: 'df7a7671b582bf9db967b07ad457a49bd53d9d72', class: "pami-tabs__container", part: "container", ref: el => (this.containerEl = el), onWheel: this.handleWheel, onScroll: this.updateOverflow }, h("slot", { key: '96a902722b498a0127a16d2c94e7c72d94d50dc2' }))));
     }
     static get is() { return "pami-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,298 @@
+/* Generated from scripts/templates/pami-surface.css and pami.tokens.json. Do not edit. */
+/*
+ * Pami surface partial: material plate, glass edge and dot layer.
+ *
+ * Include it at the top of a component stylesheet:
+ *   @import '../../global/pami-surface.css';
+ * then mark an element in the shadow tree with data-surface="material[:kind]"
+ * (crust, crust-soft, crumb, olive, olive-soft, bronze, bronze-soft, or a system
+ * colour hue such as red / brown; kind = surface | control | button | field),
+ * render <PamiDots /> inside it and call paintSurfaces() from componentDidRender.
+ *
+ * Plate and edges are CSS only, so SSR and pre-hydration output already look
+ * Pami; the dots fade in after the painter runs.
+ *
+ * Contract (custom properties on the [data-surface] element itself):
+ *   --pami-surface-bg-start / --pami-surface-bg-end   plate gradient
+ *   --pami-surface-text                               material text colour
+ *   --pami-surface-edge-top / -side / -bottom         glass edge
+ *   --pami-surface-dot-start / -dot-end / -blur       dot colours (read by the painter)
+ * A component may override them on its own surface element with a more specific
+ * selector, e.g. to keep an md-sys role:
+ *   .container[data-surface] { --pami-surface-bg-start: var(--md-sys-color-primary); }
+ * Never set them on :host, or they leak into nested surfaces.
+ *
+ * Every token read has a literal fallback (light theme) so the partial works
+ * without the token sheet. Per-material edge tokens (--pami-material-<m>-edge-*)
+ * come from WP1; until then the shared glass tokens apply.
+ */
+
+[data-surface] {
+  position: relative;
+  isolation: isolate;
+  overflow: hidden;
+  box-sizing: border-box;
+  border: var(--md-sys-edge-width, var(--pami-edge-width, 1px)) solid;
+  border-color: var(--pami-surface-edge-top) var(--pami-surface-edge-side) var(--pami-surface-edge-bottom);
+  background: linear-gradient(calc(var(--pami-texture-angle, 43) * 1deg), var(--pami-surface-bg-start), var(--pami-surface-bg-end));
+  color: var(--pami-surface-text);
+}
+
+: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
+ * the light one and the painter publishes the theme-correct plate and text.
+ */
+:is([data-surface="red"], [data-surface^="red:"]) {
+  --pami-surface-bg-start: var(--pami-system-colors-red-light, #fcaeac);
+}
+:is([data-surface="orange"], [data-surface^="orange:"]) {
+  --pami-surface-bg-start: var(--pami-system-colors-orange-light, #fccfa5);
+}
+:is([data-surface="yellow"], [data-surface^="yellow:"]) {
+  --pami-surface-bg-start: var(--pami-system-colors-yellow-light, #fce795);
+}
+:is([data-surface="green"], [data-surface^="green:"]) {
+  --pami-surface-bg-start: var(--pami-system-colors-green-light, #afe5b7);
+}
+:is([data-surface="mint"], [data-surface^="mint:"]) {
+  --pami-surface-bg-start: var(--pami-system-colors-mint-light, #9be5d9);
+}
+:is([data-surface="teal"], [data-surface^="teal:"]) {
+  --pami-surface-bg-start: var(--pami-system-colors-teal-light, #9be3e4);
+}
+:is([data-surface="cyan"], [data-surface^="cyan:"]) {
+  --pami-surface-bg-start: var(--pami-system-colors-cyan-light, #9be3f0);
+}
+:is([data-surface="blue"], [data-surface^="blue:"]) {
+  --pami-surface-bg-start: var(--pami-system-colors-blue-light, #9bcdf6);
+}
+:is([data-surface="indigo"], [data-surface^="indigo:"]) {
+  --pami-surface-bg-start: var(--pami-system-colors-indigo-light, #c0b9f3);
+}
+:is([data-surface="purple"], [data-surface^="purple:"]) {
+  --pami-surface-bg-start: var(--pami-system-colors-purple-light, #e8abeb);
+}
+:is([data-surface="pink"], [data-surface^="pink:"]) {
+  --pami-surface-bg-start: var(--pami-system-colors-pink-light, #fcaab6);
+}
+:is([data-surface="brown"], [data-surface^="brown:"]) {
+  --pami-surface-bg-start: var(--pami-system-colors-brown-light, #dcc9b9);
+}
+:is(
+  [data-surface="red"], [data-surface^="red:"],
+  [data-surface="orange"], [data-surface^="orange:"],
+  [data-surface="yellow"], [data-surface^="yellow:"],
+  [data-surface="green"], [data-surface^="green:"],
+  [data-surface="mint"], [data-surface^="mint:"],
+  [data-surface="teal"], [data-surface^="teal:"],
+  [data-surface="cyan"], [data-surface^="cyan:"],
+  [data-surface="blue"], [data-surface^="blue:"],
+  [data-surface="indigo"], [data-surface^="indigo:"],
+  [data-surface="purple"], [data-surface^="purple:"],
+  [data-surface="pink"], [data-surface^="pink:"],
+  [data-surface="brown"], [data-surface^="brown:"]
+) {
+  --pami-surface-bg-end: var(--pami-surface-bg-start);
+  --pami-surface-text: #000;
+  --pami-surface-edge-top: var(--pami-component-glass-light-top, rgba(255, 255, 255, 0.4));
+  --pami-surface-edge-side: var(--pami-component-glass-light-side, rgba(80, 69, 54, 0.1));
+  --pami-surface-edge-bottom: var(--pami-component-glass-light-bottom, rgba(80, 69, 54, 0.16));
+}
+
+/* ---- Dot layer ------------------------------------------------------------ */
+
+[data-surface] > canvas.pami-dots {
+  position: absolute;
+  z-index: -1;
+  display: block;
+  pointer-events: none;
+  inset: calc(var(--pami-dots-bleed, 0px) * -1);
+  width: calc(100% + 2 * var(--pami-dots-bleed, 0px));
+  height: calc(100% + 2 * var(--pami-dots-bleed, 0px));
+  /* Page-level resets (Starlight, normalize) cap canvases at max-width: 100%, which squeezes the layer
+     and leaves a strip without dots. The dot layer always spans the plate plus its bleed. */
+  max-width: none;
+  max-height: none;
+  filter: blur(var(--pami-dots-blur, 0px));
+  opacity: 0;
+  transition: opacity var(--md-sys-motion-duration-short4, 200ms) linear;
+}
+
+[data-surface] > canvas.pami-dots[data-painted] {
+  opacity: 1;
+}
+
+/* The plate clips its dot layer (overflow: hidden + its own border-radius), so the dots follow any radius
+   change, such as a button morphing while pressed. Fields keep overflow visible for their rim, so they clip
+   the layer themselves. */
+[data-surface$=":field"] > canvas.pami-dots {
+  clip-path: inset(var(--pami-dots-bleed, 0px) round var(--pami-dots-radius, 0px));
+}
+
+/* ---- Field glass 43° -------------------------------------------------------- */
+
+[data-surface$=":field"] {
+  --pami-surface-edge-43: linear-gradient(
+    calc(var(--pami-texture-angle, 43) * 1deg),
+    color-mix(in srgb, var(--pami-material-crust-background-start, #ef8625) 48%, var(--pami-surface-text)) 0%,
+    color-mix(in srgb, var(--pami-surface-text) 58%, transparent) 55%,
+    color-mix(in srgb, var(--pami-surface-text) 72%, transparent) 100%
+  );
+  overflow: visible;
+  border-color: transparent;
+  background:
+    linear-gradient(calc(var(--pami-texture-angle, 43) * 1deg), var(--pami-surface-bg-start), var(--pami-surface-bg-end)) padding-box,
+    var(--pami-surface-edge-43) border-box;
+}
+
+[data-surface$=":field"][data-invalid] {
+  --pami-surface-edge-43: linear-gradient(var(--md-sys-color-error, #b3261e), var(--md-sys-color-error, #b3261e));
+}
+
+[data-surface$=":field"][data-disabled] {
+  --pami-surface-edge-43: linear-gradient(
+    color-mix(in srgb, var(--pami-surface-text) 30%, transparent),
+    color-mix(in srgb, var(--pami-surface-text) 30%, transparent)
+  );
+  opacity: 0.6;
+}
+
+/* Read-only: no plate, a dotted rim, so it never looks editable. */
+[data-surface$=":field"][data-readonly] {
+  background: none;
+  border: var(--md-sys-edge-width, var(--pami-edge-width, 1px)) dotted color-mix(in srgb, var(--pami-surface-text, currentColor) 62%, transparent);
+}
+
+[data-surface$=":field"][data-readonly] > canvas.pami-dots {
+  display: none;
+}
+
+/* ---- Fallbacks ------------------------------------------------------------- */
+
+@media (prefers-reduced-motion: reduce) {
+  [data-surface] > canvas.pami-dots {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  [data-surface] > canvas.pami-dots {
+    display: none;
+  }
+  [data-surface],
+  [data-surface$=":field"] {
+    background: Canvas;
+    color: CanvasText;
+    border-color: CanvasText;
+    border-style: solid;
+  }
+  [data-surface$=":field"][data-readonly] {
+    border-style: dotted;
+  }
+}
+
+
+:host { display: inline-flex; max-inline-size: 100%; vertical-align: middle; }
+:host([hidden]) { display: none; }
+[part="container"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--md-sys-spacing-gap-xs, 4px);
+  padding: var(--md-sys-spacing-inset-xs, 4px) var(--md-sys-spacing-inset-sm, 8px);
+  border-radius: var(--md-sys-shape-corner-full, 9999px);
+  font: var(--md-sys-typescale-label-medium-font);
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  box-sizing: border-box;
+}
+[part="content"] { min-inline-size: 0; overflow-wrap: anywhere; }
+.icon { display: inline-flex; align-items: center; flex-shrink: 0; }
+::slotted([slot="icon"]) {
+  inline-size: var(--md-sys-typescale-label-medium-line-height);
+  block-size: var(--md-sys-typescale-label-medium-line-height);
+}