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

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

@@ -0,0 +1,68 @@
+import { Host, h } from "@stencil/core";
+import { PamiDots } from "../../utils/pami-dots";
+import { paintSurfaces, unpaintSurfaces } from "../../utils/pami-painter";
+import { statusSurface } from "../../utils/status-surface";
+/**
+ * A static status label. Text supplies the meaning; colour reinforces it.
+ * @tag pami-tag
+ * @slot - Visible status text
+ * @slot icon - Optional supporting icon
+ * @csspart container - Label surface
+ * @csspart content - Status text
+ */
+export class PamiTag {
+    constructor() {
+        /** Semantic colour; applications own the status vocabulary. */
+        this.tone = 'neutral';
+    }
+    componentDidRender() { paintSurfaces(this.el); }
+    disconnectedCallback() { unpaintSurfaces(this.el); }
+    render() {
+        return h(Host, { key: '5c6764a76dfa50afbf92c62286686b1fd11be8d4' }, h("span", { key: '5c2b50ad765e20539b5550182ab2741e45e621ad', part: "container", "data-surface": `${statusSurface(this.tone)}:control` }, h(PamiDots, { key: 'cb003bb9fbf303b1641b2f7545a378aecd8ea197' }), h("span", { key: 'e8110936acb5db85d78143286ad980237622cfdc', class: "icon", "aria-hidden": "true" }, h("slot", { key: '9d08d50f14e90b73843508761387b263864ea39a', name: "icon" })), h("span", { key: 'fed7f6b2480bcf623028208af08cbe8a06d55a4b', part: "content" }, h("slot", { key: 'ad91462805c49fa2bcde646fb66e93b29c00b369' }))));
+    }
+    static get is() { return "pami-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pami-tag.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pami-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "tone": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PamiStatusTone",
+                    "resolved": "\"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
+                    "references": {
+                        "PamiStatusTone": {
+                            "location": "import",
+                            "path": "../../utils/status-surface",
+                            "id": "src/utils/status-surface.ts::PamiStatusTone",
+                            "referenceLocation": "PamiStatusTone"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Semantic colour; applications own the status vocabulary."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tone",
+                "defaultValue": "'neutral'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pami-tag.js.map

package/dist/collection/components/pami-tag/pami-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pami-tag.js","sources":["../../../sources/0278a6f5523ac1971fe0eadaee435bb3fd1dab609b7ec764bb3ba27e6aa8fb9f/pami-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE1E,OAAO,EAAkB,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3E;;;;;;;GAOG;AAEH,MAAM,OAAO,OAAO;IADpB;QAGE,+DAA+D;QACtC,SAAI,GAAmB,SAAS,CAAC;KAW3D;IATC,kBAAkB,KAAK,aAAa,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAChD,oBAAoB,KAAK,eAAe,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IAEpD,MAAM;QACJ,OAAO,EAAC,IAAI;YAAC,6DAAM,IAAI,EAAC,WAAW,kBAAe,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU;gBACrF,EAAC,QAAQ,sDAAG;gBAAA,6DAAM,KAAK,EAAC,MAAM,iBAAa,MAAM;oBAAC,6DAAM,IAAI,EAAC,MAAM,GAAG,CAAO;gBAC7E,6DAAM,IAAI,EAAC,SAAS;oBAAC,8DAAQ,CAAO,CAC/B,CAAO,CAAC;IACjB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF"}

package/dist/collection/components/pami-text-field/pami-text-field.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
@@ -548,8 +547,8 @@
   font-family: inherit;
   font-size: max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));
   line-height: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));
-  font-weight: var(--md-sys-typescale-body-large-weight, 400);
-  letter-spacing: var(--md-sys-typescale-body-large-tracking, 0.5px);
+  font-weight: var(--md-sys-typescale-body-large-font-weight, 400);
+  letter-spacing: var(--md-sys-typescale-body-large-letter-spacing, 0.5px);
   color: var(--_input-color);
   caret-color: var(--_active-indicator-color);
   cursor: var(--pami-text-field-cursor, text);

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

@@ -485,7 +485,7 @@ export class PamiToolbar {
         const ariaLabel = label.length > 0 ? this.ariaLabelProp : undefined;
         const ariaLabelledbyOut = labelledby.length > 0 ? this.ariaLabelledby : undefined;
         const ariaOrientation = isToolbar ? (isVertical ? 'vertical' : 'horizontal') : undefined;
-        return (h(Host, { key: '2353cb2148ede2ed4647219fd54490ed0f0fc403', class: {
+        return (h(Host, { key: '08374bb0d421d70143c09eadb7e5082733ef8621', class: {
                 'pami-toolbar': true,
                 [`pami-toolbar--${this.variant}`]: true,
                 [`pami-toolbar--${this.color}`]: true,
@@ -493,11 +493,11 @@ export class PamiToolbar {
                 [`pami-toolbar--align-${this.alignment}`]: true,
                 'pami-toolbar--vertical': isVertical,
                 'pami-toolbar--generic': !isToolbar,
-            }, role: isToolbar ? 'toolbar' : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledbyOut, "aria-orientation": ariaOrientation }, h("div", { key: 'd415d0c41c43dbe63f26d45eb03708624c269f01', class: "pami-toolbar__container", part: "container" }, h("slot", { key: '8b7c29f1e4dfbab76185c74cee5614f3d53b3b6f', name: "leading" }), h("slot", { key: 'f859a0f3ac511a561ddcdc2b87d358c940e55619' }), h("slot", { key: '744834754d7d124bcd43430543153119f81dacf2', name: "trailing" })), h("div", { key: 'a6a3b5166ef3105c82838ece7b7db9795ce27f7b', class: {
+            }, role: isToolbar ? 'toolbar' : undefined, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledbyOut, "aria-orientation": ariaOrientation }, h("div", { key: '75225de5f045892a51876e9b4a686fe8a0df6fe3', class: "pami-toolbar__container", part: "container" }, h("slot", { key: '081cd6952abb04aa63bb0c1b137fcd720714c5b8', name: "leading" }), h("slot", { key: '3d57323c517efa5604828afcf24248091bee13b1' }), h("slot", { key: '598d2d1438ed4cd0983c4c27f9ef52e16f0b9857', name: "trailing" })), h("div", { key: 'd649ba5a6507809464cf7dbd8d0efd34d26a6550', class: {
                 'pami-toolbar__fab-container': true,
                 'pami-toolbar__fab-container--floating': isFloating,
                 'pami-toolbar__fab-container--hidden': !this.hasFab,
-            }, part: "fab-container" }, h("slot", { key: 'e14c8492cfe5b65a1d5a42125a5e353c6b943106', name: "fab" }))));
+            }, part: "fab-container" }, h("slot", { key: '208891c26a1c8c2b84152dad23c03ddadc6f157a', name: "fab" }))));
     }
     static get is() { return "pami-toolbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pami-tooltip/pami-tooltip.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
@@ -364,7 +363,7 @@
 
 .pami-tooltip__popup--plain {
   --_container-color: var(--pami-tooltip-plain-container-color, var(--md-sys-color-inverse-surface, #313033));
-  --_text-color: var(--pami-tooltip-plain-text-color, var(--md-sys-color-inverse-on-surface, #F4EFF4));
+  --_text-color: var(--pami-tooltip-plain-text-color, var(--pami-material-bronze-text, #FFF2EB));
   --_shape: var(--pami-tooltip-container-shape, var(--md-sys-shape-corner-extra-small, 4px));
 
   background-color: var(--_container-color);
@@ -381,9 +380,9 @@
   max-inline-size: min(var(--pami-tooltip-plain-max-inline-size, 280px), calc(100vw - 16px));
 
   font-family: var(--md-sys-typescale-body-small-font-family, Roboto, sans-serif);
-  font-size: max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));
+  font-size: max(10px, calc(var(--md-sys-typescale-body-small-font-size, 12px) + var(--md-sys-density-scale, 0) * 0.5px));
   font-weight: var(--md-sys-typescale-body-small-font-weight, 400);
-  line-height: max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));
+  line-height: max(14px, calc(var(--md-sys-typescale-body-small-line-height, 16px) + var(--md-sys-density-scale, 0) * 0.5px));
   letter-spacing: var(--md-sys-typescale-body-small-letter-spacing, 0.4px);
 
   /* Wrap long content over multiple lines instead of clipping it. The plain
@@ -434,9 +433,9 @@
 /* Subhead */
 .pami-tooltip__subhead {
   font-family: var(--md-sys-typescale-title-small-font-family, Roboto, sans-serif);
-  font-size: max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));
+  font-size: max(11px, calc(var(--md-sys-typescale-title-small-font-size, 14px) + var(--md-sys-density-scale, 0) * 0.5px));
   font-weight: var(--md-sys-typescale-title-small-font-weight, 500);
-  line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));
+  line-height: max(16px, calc(var(--md-sys-typescale-title-small-line-height, 20px) + var(--md-sys-density-scale, 0) * 1px));
   letter-spacing: var(--md-sys-typescale-title-small-letter-spacing, 0.1px);
   color: var(--_subhead-color);
   margin-block-end: var(--md-sys-spacing-gap-xs, 4px);
@@ -445,9 +444,9 @@
 /* Supporting text */
 .pami-tooltip__supporting-text {
   font-family: var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);
-  font-size: max(11px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));
+  font-size: max(11px, calc(var(--md-sys-typescale-body-medium-font-size, 14px) + var(--md-sys-density-scale, 0) * 0.5px));
   font-weight: var(--md-sys-typescale-body-medium-font-weight, 400);
-  line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));
+  line-height: max(16px, calc(var(--md-sys-typescale-body-medium-line-height, 20px) + var(--md-sys-density-scale, 0) * 1px));
   letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing, 0.25px);
   color: var(--_text-color);
 }

package/dist/collection/components/pami-transfer-list/pami-transfer-list.css

@@ -196,7 +196,7 @@
   /* title-small (14/20) — 0.5px/rung on the size, 1px on the line-height, the
      library's rates for sub-22px type. See packages/tokens/src/tokens.css §10-12. */
   font-size: max(12px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));
-  font-weight: var(--md-sys-typescale-title-small-weight, 500);
+  font-weight: var(--md-sys-typescale-title-small-font-weight, 500);
   line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));
   color: var(--md-sys-color-on-surface);
   white-space: nowrap;
@@ -216,7 +216,7 @@
      already the smallest text in the component, and the usual 0.5px/rung taper
      would run it to 9px at -4 — below what the count stays legible at. */
   font-size: max(10px, calc(11px + var(--md-sys-density-scale, 0) * 0.5px));
-  font-weight: var(--md-sys-typescale-label-small-weight, 500);
+  font-weight: var(--md-sys-typescale-label-small-font-weight, 500);
   line-height: max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));
   letter-spacing: 0.4px;
   white-space: nowrap;

package/dist/collection/utils/charts/theme.js

@@ -242,6 +242,28 @@ function readNumberVar(cs, name, fallback) {
     const n = parseFloat(raw);
     return Number.isFinite(n) ? n : fallback;
 }
+/** Resolve rem/clamp/container units in the chart's actual layout context. */
+export function readFontSize(host, cs, name, fallback) {
+    const raw = cs.getPropertyValue(name).trim();
+    if (!raw)
+        return fallback;
+    if (/^\d+(?:\.\d+)?px$/.test(raw))
+        return parseFloat(raw);
+    const probe = host.ownerDocument.createElement('span');
+    probe.setAttribute('aria-hidden', 'true');
+    probe.style.cssText = 'position:absolute;visibility:hidden;pointer-events:none;inline-size:0;block-size:0;overflow:hidden;';
+    probe.style.fontSize = raw;
+    if (!probe.style.fontSize)
+        return fallback;
+    (host.shadowRoot ?? host).appendChild(probe);
+    try {
+        const pixels = parseFloat(getComputedStyle(probe).fontSize);
+        return Number.isFinite(pixels) && pixels > 0 ? pixels : fallback;
+    }
+    finally {
+        probe.remove();
+    }
+}
 /**
  * Map an MD3 motion-easing token (`cubic-bezier(...)`) into an
  * ECharts easing identifier. ECharts only ships a fixed set of
@@ -321,9 +343,9 @@ export function readPamiChartTheme(host) {
         tooltipShadow: readVar(cs, '--md-sys-elevation-2', '0px 1px 2px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15)'),
         tooltipRadius: readNumberVar(cs, '--md-sys-shape-corner-small', 8),
         palette,
-        fontFamily: fontFamilyOf(readVar(cs, '--md-sys-typescale-label-medium-font', '"Roboto", system-ui, sans-serif')),
-        labelSize: Math.max(9, readNumberVar(cs, '--md-sys-typescale-label-small-size', 11) + readNumberVar(cs, '--md-sys-density-scale', 0) * 0.5),
-        titleSize: Math.max(11, readNumberVar(cs, '--md-sys-typescale-title-small-size', 14) + readNumberVar(cs, '--md-sys-density-scale', 0) * 0.5),
+        fontFamily: readVar(cs, '--md-sys-typescale-label-medium-font-family', fontFamilyOf(readVar(cs, '--md-sys-typescale-label-medium-font', 'system-ui, sans-serif'))),
+        labelSize: Math.max(9, readFontSize(host, cs, '--md-sys-typescale-label-small-font-size', 11) + readNumberVar(cs, '--md-sys-density-scale', 0) * 0.5),
+        titleSize: Math.max(11, readFontSize(host, cs, '--md-sys-typescale-title-small-font-size', 14) + readNumberVar(cs, '--md-sys-density-scale', 0) * 0.5),
         motionDuration: reducedMotion ? 0 : motionDuration,
         motionEasing: pickEasing(easingRaw),
         reducedMotion,