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

package/dist/collection/components/pami-button/pami-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-callout/pami-callout.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: block; min-inline-size: 0; }
+:host([hidden]) { display: none; }
+[part="container"] {
+  display: flex; align-items: flex-start;
+  gap: var(--md-sys-spacing-gap-sm, 8px);
+  padding: var(--md-sys-spacing-inset-lg, 16px);
+  border-radius: var(--md-sys-shape-corner-medium, 12px);
+  font: var(--md-sys-typescale-body-medium-font);
+  box-sizing: border-box;
+}
+.body { flex: 1; min-inline-size: 0; overflow-wrap: anywhere; }
+.headline { font: var(--md-sys-typescale-title-small-font); }
+::slotted([slot="headline"]) { margin: 0; font: inherit; }
+[part="actions"] { display: flex; flex-wrap: wrap; gap: var(--md-sys-spacing-gap-sm, 8px); }
+::slotted([slot="actions"]) { margin-block-start: var(--md-sys-spacing-gap-sm, 8px); }
+.icon { display: inline-flex; flex-shrink: 0; }
+::slotted([slot="icon"]) {
+  inline-size: var(--md-sys-typescale-body-medium-line-height);
+  block-size: var(--md-sys-typescale-body-medium-line-height);
+}

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

@@ -0,0 +1,94 @@
+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";
+/**
+ * An explanation or notification in the content flow.
+ * @tag pami-callout
+ * @slot - Message content
+ * @slot headline - Optional heading with an application-chosen heading level
+ * @slot icon - Optional decorative icon
+ * @slot actions - Application-owned controls
+ * @csspart container - Message surface
+ * @csspart content - Heading and message
+ * @csspart actions - Action region
+ */
+export class PamiCallout {
+    constructor() {
+        /** Semantic colour; does not determine announcement urgency. */
+        this.tone = 'neutral';
+        /** Announce message updates. Use assertive only for urgent interruptions. */
+        this.announcement = 'off';
+    }
+    componentDidRender() { paintSurfaces(this.el); }
+    disconnectedCallback() { unpaintSurfaces(this.el); }
+    render() {
+        const live = this.announcement === 'polite' || this.announcement === 'assertive';
+        return h(Host, { key: '019e1ec47a8ae372aff199f7bcf261c59902af1d' }, h("div", { key: 'a0facb2c268a3ebc01622e42434e54a32c411ee4', part: "container", "data-surface": `${statusSurface(this.tone)}:surface` }, h(PamiDots, { key: 'e3892570f91ea052d497644a749554ebcc3bc0b4' }), h("span", { key: 'ad5244d3c6b733bd9b6f7042a36274ade5b5a308', class: "icon", "aria-hidden": "true" }, h("slot", { key: '760bd24b0e29a4bc67e094172103b419dc874670', name: "icon" })), h("div", { key: 'ad18187d1a7b141a4fcbccf167a87f948bf4731f', class: "body" }, h("div", { key: '390868ac9e81957765f860e135930a6a25a4bc83', part: "content", role: live ? (this.announcement === 'assertive' ? 'alert' : 'status') : undefined, "aria-live": live ? this.announcement : undefined, "aria-atomic": live ? 'true' : undefined }, h("div", { key: 'ad385e9f67fc56ddb73158188eca6e32bb601382', class: "headline" }, h("slot", { key: '6bd4a4e1d867df7fee3b564a87fe7d5c6dd2a539', name: "headline" })), h("slot", { key: 'd9cf95466c3a6aaadf1933abb9bb492474a4c45f' })), h("div", { key: '0e223b0b115af4bb60d93d22f83242c18d339192', part: "actions" }, h("slot", { key: '712410fdd0313b5c330c59ebf9178202b17eed25', name: "actions" })))));
+    }
+    static get is() { return "pami-callout"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pami-callout.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pami-callout.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; does not determine announcement urgency."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "tone",
+                "defaultValue": "'neutral'"
+            },
+            "announcement": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'off' | 'polite' | 'assertive'",
+                    "resolved": "\"assertive\" | \"off\" | \"polite\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Announce message updates. Use assertive only for urgent interruptions."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "announcement",
+                "defaultValue": "'off'"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=pami-callout.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pami-callout.js","sources":["../../../sources/31bcc0fc5bd4de92e30b1fd5d74fa98dc0049dfc15c6a020e71906684f155025/pami-callout.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;AAC1E,OAAO,EAAkB,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAE3E;;;;;;;;;;GAUG;AAEH,MAAM,OAAO,WAAW;IADxB;QAGE,gEAAgE;QACvC,SAAI,GAAmB,SAAS,CAAC;QAC1D,6EAA6E;QACrE,iBAAY,GAAmC,KAAK,CAAC;KAmB9D;IAjBC,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,MAAM,IAAI,GAAG,IAAI,CAAC,YAAY,KAAK,QAAQ,IAAI,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC;QACjF,OAAO,EAAC,IAAI;YAAC,4DAAK,IAAI,EAAC,WAAW,kBAAe,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU;gBACpF,EAAC,QAAQ,sDAAG;gBACZ,6DAAM,KAAK,EAAC,MAAM,iBAAa,MAAM;oBAAC,6DAAM,IAAI,EAAC,MAAM,GAAG,CAAO;gBACjE,4DAAK,KAAK,EAAC,MAAM;oBACf,4DAAK,IAAI,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,eACxF,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,SAAS,iBAAe,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;wBACvF,4DAAK,KAAK,EAAC,UAAU;4BAAC,6DAAM,IAAI,EAAC,UAAU,GAAG,CAAM;wBAAA,8DAAQ,CACxD;oBACN,4DAAK,IAAI,EAAC,SAAS;wBAAC,6DAAM,IAAI,EAAC,SAAS,GAAG,CAAM,CAC7C,CACF,CAAO,CAAC;IAChB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF"}