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

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

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

package/dist/collection/components/pami-line-chart/pami-line-chart.js

@@ -917,14 +917,14 @@ export class PamiLineChart {
         // While loading, the loader owns the box — an empty-state message under it
         // would just be the wrong answer to "where is my data?".
         const empty = this.series.length === 0 && !this.loading;
-        return (h(Host, { key: '1eab03694f3ff163a6fdf5cac1cfe725f43e34d3', class: {
+        return (h(Host, { key: '835a16c8ec3a9ae2c941bcb61d4440b1d1b0c495', class: {
                 'pami-line-chart': true,
                 'pami-line-chart--empty': empty,
                 'pami-line-chart--loading': this.loading,
                 'pami-line-chart--mounted': this.mounted,
                 'pami-line-chart--zoom-slider': this.zoomSliderOn,
                 'pami-line-chart--zoom-drag': this.zoomInside,
-            }, role: "figure", "aria-label": summary, "aria-busy": this.loading ? 'true' : null, style: this.heightProp ? { blockSize: this.heightProp } : undefined, onPointerDown: this.onPlotPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onPointerCancel: this.onPointerUp, onDblClick: this.onPlotDblClick }, h("header", { key: 'cc48cd1394bb8088a1f5aba1303501f105d627ad', class: "pami-line-chart__header", part: "header" }, h("slot", { key: '5e4cb831846ed13266fab0a317e918b4bf75aac5', name: "header" })), h("div", { key: '85e00aa851ae142c51523203c1319f614c2bbec4', class: "pami-line-chart__canvas", part: "canvas", ref: el => this.bindChartHost(el), tabindex: empty ? undefined : '0', role: empty ? undefined : 'application', "aria-label": empty ? undefined : this.labelPlot, onKeyDown: this.onPlotKeyDown, onBlur: this.onPlotBlur }), empty && (h("div", { key: 'ae47ccd983292dd27301e40811b1f2177a81e76a', class: "pami-line-chart__empty", part: "empty" }, h("slot", { key: 'c4ac604a4e2caf8558464a13db6009cab6817dac', name: "empty" }, this.labelEmpty))), this.loading && (h("div", { key: 'bd3e2961ac6600e41c9a949059e282b416ce30fd', class: "pami-line-chart__loading", part: "loading", role: "status" }, h("slot", { key: '1e1372c5568336eb76cbee5120a7e73761b06a31', name: "loader" }, h("slot", { key: 'b26065ea9b5ce5dfbdea33f546d251bc4c46d189', name: "loading" }, h("pami-progress-indicator", { key: 'ab5890c12cc646b63d11da3b6cb9ccfcc07327b7', class: "pami-line-chart__spinner", variant: "circular", indeterminate: true, label: this.loadingLabel }), h("span", { key: 'ec9621f99c4178f4aa2b3225ef1a86f01630e5c5', class: "pami-line-chart__loading-text" }, this.loadingLabel))))), this.dragBand && Math.abs(this.dragBand.x2 - this.dragBand.x1) > 1 && (h("div", { key: '6f71b0f70ede1eb3b8438b413f68f068a24aec6d', class: "pami-line-chart__zoom-band", part: "zoom-band", style: this.zoomBandStyle() })), this.zoomSliderOn && this.renderZoomSlider(), h("footer", { key: '93629c31d125a79abcc84406f5480b0f4bcabdda', class: "pami-line-chart__footer", part: "footer" }, h("slot", { key: '154007d75ac08a75911859f915b9ef7f25c6ad3e', name: "footer" })), h("div", { key: 'f5d5fb4e76a94488c7176e2024c4e38ebf2810c0', class: "pami-line-chart__a11y-table", ref: el => this.bindA11yTableHost(el) }), h("div", { key: '0c976969e24c4fac8874358a819f894090750de9', class: "pami-line-chart__live", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.announcement)));
+            }, role: "figure", "aria-label": summary, "aria-busy": this.loading ? 'true' : null, style: this.heightProp ? { blockSize: this.heightProp } : undefined, onPointerDown: this.onPlotPointerDown, onPointerMove: this.onPointerMove, onPointerUp: this.onPointerUp, onPointerCancel: this.onPointerUp, onDblClick: this.onPlotDblClick }, h("header", { key: '6690dab4f1e7c505f7c0da85b9a968e56da89193', class: "pami-line-chart__header", part: "header" }, h("slot", { key: 'f3d1af703a39b9e20a30925d026f9527c5fc2694', name: "header" })), h("div", { key: '6e10b70832b21e0c78b58ab08807009e086162bc', class: "pami-line-chart__canvas", part: "canvas", ref: el => this.bindChartHost(el), tabindex: empty ? undefined : '0', role: empty ? undefined : 'application', "aria-label": empty ? undefined : this.labelPlot, onKeyDown: this.onPlotKeyDown, onBlur: this.onPlotBlur }), empty && (h("div", { key: 'a0b8118f64a873b9011cf7f078ba2536dddbd32e', class: "pami-line-chart__empty", part: "empty" }, h("slot", { key: '2f9623c77ef42412caba334d1625975ec611c6a4', name: "empty" }, this.labelEmpty))), this.loading && (h("div", { key: 'eeafd51665cb2e23afb1b5ad7dbfd08135342c71', class: "pami-line-chart__loading", part: "loading", role: "status" }, h("slot", { key: '0b8df53c5c0fd8bc15012291271833d435caafee', name: "loader" }, h("slot", { key: 'e84895d462a60422242ca3fad16b5af6972ff659', name: "loading" }, h("pami-progress-indicator", { key: '1b580acbec3ac8fdd656320dba6a6dbe372a778c', class: "pami-line-chart__spinner", variant: "circular", indeterminate: true, label: this.loadingLabel }), h("span", { key: '58a0fd7f31b59c6bb3c2e25ec9c2e4ef01e345d6', class: "pami-line-chart__loading-text" }, this.loadingLabel))))), this.dragBand && Math.abs(this.dragBand.x2 - this.dragBand.x1) > 1 && (h("div", { key: '6efb8099b52c076469625cf2cf7aa508420f163b', class: "pami-line-chart__zoom-band", part: "zoom-band", style: this.zoomBandStyle() })), this.zoomSliderOn && this.renderZoomSlider(), h("footer", { key: '2b3f0995afb606016eb77985f484dcf55ab8e773', class: "pami-line-chart__footer", part: "footer" }, h("slot", { key: 'df0638fb603afbc3ef6bb0673de6b4864ccb5590', name: "footer" })), h("div", { key: '29950627161e0017d0815748f5f153966324fd6f', class: "pami-line-chart__a11y-table", ref: el => this.bindA11yTableHost(el) }), h("div", { key: '1d4704235ce3fa1a8d57ef85aad32efa0acc8701', class: "pami-line-chart__live", role: "status", "aria-live": "polite", "aria-atomic": "true" }, this.announcement)));
     }
     static get is() { return "pami-line-chart"; }
     static get encapsulation() { return "shadow"; }