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

package/dist/sources/{401e8c4f1d9d32aa7fb3d874c070d5e22bec9ef7a8300826a07b4df525e3e8a8 → c519dd6bf9591ea0961eb52e22d71ceabf68824f19be3bc1320cd3b7d0d06a78}/engine-abi.ts

@@ -60,7 +60,7 @@ export interface EngineExports {
   reset(): void;
 }
 
-function decodeBase64(b64: string): Uint8Array {
+function decodeBase64(b64: string) {
   if (typeof atob === 'function') {
     const bin = atob(b64);
     const out = new Uint8Array(bin.length);

package/dist/sources/{9230de3e79e81a5d82c53463873054c838e407aaaa6b4d83adba3e6420e1b668 → cafd0118f482317824eba435efde10692a0127e2c8104a754ac33b2e7607ef96}/pami-snackbar.css_tag_pami-snackbar_encapsulation_shadow

@@ -30,9 +30,9 @@
 
 :host {
   --_container-color: var(--pami-snackbar-container-color, var(--md-sys-color-inverse-surface, #313033));
-  --_message-color: var(--pami-snackbar-message-color, var(--md-sys-color-inverse-on-surface, #F4EFF4));
-  --_action-color: var(--pami-snackbar-action-color, var(--md-sys-color-inverse-primary, #D0BCFF));
-  --_close-color: var(--pami-snackbar-close-color, var(--md-sys-color-inverse-on-surface, #F4EFF4));
+  --_message-color: var(--pami-snackbar-message-color, var(--pami-material-bronze-text, #FFF2EB));
+  --_action-color: var(--pami-snackbar-action-color, var(--pami-material-bronze-text, #FFF2EB));
+  --_close-color: var(--pami-snackbar-close-color, var(--pami-material-bronze-text, #FFF2EB));
   --_container-shape: var(--pami-snackbar-container-shape, var(--md-sys-shape-corner-extra-small, 4px));
   --_min-width: var(--pami-snackbar-min-width, 288px);
   --_max-width: var(--pami-snackbar-max-width, 568px);
@@ -145,7 +145,9 @@
    2. SURFACE — container
    ========================================================== */
 
-.pami-snackbar__surface {
+.pami-snackbar__surface {
+  /* Child controls focus against the Bronze plate, not the page canvas. */
+  --md-sys-color-focus-ring: var(--_message-color);
   display: flex;
   align-items: center;
   min-inline-size: var(--_min-width);
@@ -191,9 +193,9 @@
   flex: 1;
   padding-block: max(6px, calc(14px + var(--md-sys-density-scale, 0) * 2px));
   font-family: var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);
-  font-size: max(12px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));
+  font-size: max(12px, 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: inherit;
 }

package/dist/sources/{8889443144c58e5dc85b288bf6f749a4142b4193f110787d5c2daddd1bd83700 → d72b349c2c336f88909a4c9e1f34cfaa824d2ccecad96b73da0ab6749bc810dd}/pami-ripple.tsx

@@ -19,14 +19,7 @@ import { RIPPLE_RELEASE_FADE_MS } from '../../utils/ripple';
  * light but does not animate it.
  */
 
-/* Literal fallbacks: the token sheet may not be loaded, or may predate these tokens. */
-const PARI_DURATION_MS = 640;
-const PARI_OPACITY = 0.6;
-const PARI_EASING = 'cubic-bezier(0.16, 1, 0.3, 1)';
-const PRESS_SCALE = 1;
-const PRESS_DURATION_MS = 150;
-const PRESS_EASING = 'cubic-bezier(0.34, 1.56, 0.64, 1)';
-const EASING_STANDARD = 'cubic-bezier(0.2, 0, 0, 1)';
+import { PARI_DURATION_MS, PARI_OPACITY, PARI_EASING, PRESS_SCALE, PRESS_DURATION_MS, PRESS_EASING, EASING_STANDARD } from '../../utils/pami-motion-defaults';
 
 const GROW_DURATION_PROP = '--pami-ripple-grow-duration';
 const GROW_EASING_PROP = '--pami-ripple-grow-easing';

package/dist/sources/{11e2d73298037a1e448521a045b253837dc5dfbb94e72a1c8afdb506a4759743 → dafd4f816d3de4b66b9eb2595187284bdb6a77e48afdc32d7a5166a2616d38bd}/pami-painter.ts

@@ -19,12 +19,15 @@
  */
 import {
   MIN_PAINT_SIDE,
-  asCSS,
+  asCSS,
+  appendParticle,
   dotGrid,
   isMaterial,
   mix,
   readPalette,
-  readRhythm,
+  readRhythm,
+  readSquareTrim,
+  particleShape,
   textureBlur,
   textureGeometry,
   type Palette,
@@ -49,7 +52,8 @@ interface Job {
   radius: string;
   palette: Palette;
   rhythm: ReturnType<typeof readRhythm>;
-  stamp: string;
+  stamp: string;
+  squareTrim: number;
 }
 
 /** Steps along the colour ramp: dots sharing a step are filled as one path. */
@@ -129,9 +133,10 @@ function flush() {
       .map(r => r || '0px')
       .join(' ');
     const palette = readPalette(cs, entry.material, normalizeColor);
-    const rhythm = readRhythm(cs);
-    const stamp = JSON.stringify([w, h, dpr(), radius, entry.material, entry.kind, entry.scale, palette, rhythm, compactViewport(rhythm.compactBreakpoint)]);
-    jobs.push({ el, entry, w, h, radius, palette, rhythm, stamp });
+    const rhythm = readRhythm(cs);
+    const squareTrim = readSquareTrim(cs);
+    const stamp = JSON.stringify([w, h, dpr(), radius, entry.material, entry.kind, entry.scale, palette, rhythm, squareTrim, compactViewport(rhythm.compactBreakpoint)]);
+    jobs.push({ el, entry, w, h, radius, palette, rhythm, squareTrim, stamp });
   }
   // Write phase.
   for (const job of jobs) draw(job);
@@ -139,7 +144,7 @@ function flush() {
 
 const compactViewport = (breakpoint: number) => hasDom() && window.innerWidth < breakpoint;
 
-function draw({ el, entry, w, h, radius, palette, rhythm, stamp }: Job) {
+function draw({ el, entry, w, h, radius, palette, rhythm, squareTrim, stamp }: Job) {
   if (!isMaterial(entry.material)) {
     // System colour hues: the CSS partial can only assume the light variant, so
     // the painter publishes the theme-correct plate and text on the surface.
@@ -174,17 +179,18 @@ function draw({ el, entry, w, h, radius, palette, rhythm, stamp }: Job) {
   ctx.setTransform(ratio, 0, 0, ratio, bleed * ratio, bleed * ratio);
   ctx.globalAlpha = rhythm.opacity;
   // Group dots by colour step: one path and one fill per step instead of per dot.
-  const paths: Path2D[] | null = typeof Path2D === 'function' ? [] : null;
+  const paths: Path2D[] | null = typeof Path2D === 'function' ? [] : null;
+  const shape = particleShape(entry.material);
+  canvas.setAttribute('data-particle-shape', shape);
   for (const dot of dotGrid(w, h, geom, rhythm.angle, blur, bleed)) {
     const step = Math.round(dot.t * COLOR_STEPS);
     if (paths) {
       const path = (paths[step] ??= new Path2D());
-      path.moveTo(dot.x + dot.r, dot.y);
-      path.arc(dot.x, dot.y, dot.r, 0, Math.PI * 2);
+      appendParticle(path, dot, shape, squareTrim);
     } else {
       ctx.fillStyle = asCSS(mix(palette.dot[0], palette.dot[1], step / COLOR_STEPS));
       ctx.beginPath();
-      ctx.arc(dot.x, dot.y, dot.r, 0, Math.PI * 2);
+      appendParticle(ctx, dot, shape, squareTrim);
       ctx.fill();
     }
   }

package/dist/sources/{3f7b937a1eddf96604fddc1dc0d30b4772f761c6f8fbacf7fa7a8532d8b2481e → de0d8bdaad31567edd750b4698e1eb5fd8122dc20b6ace6785570a380c2423d4}/pami-date-picker.tsx

@@ -1662,20 +1662,19 @@ export class PamiDatePicker {
   }
 
   /**
-   * Docked month/year menu: wait for the activated item's ripple to finish,
-   * then apply the selection and return to the day grid.
+   * Commit immediately; feedback may finish before returning to the day grid.
    */
   private async pickDockedSelection(
     kind: 'month' | 'year',
     apply: () => void,
     item?: EventTarget | null,
-  ) {
-    const host = item instanceof HTMLElement ? item : null;
+  ) {
+    apply();
+    const host = item instanceof HTMLElement ? item : null;
     if (host) {
       await waitForHostRipple(host);
     }
-    apply();
-    await this.closeDockedSelectionMenu(kind, { bloomCalendar: true, restoreFocus: false });
+    await this.closeDockedSelectionMenu(kind, { bloomCalendar: true, restoreFocus: false });
   }
 
   private pickMonth(month: number, item?: EventTarget | null) {

package/dist/sources/{7e5e96f6428bb444fa618169230fcdc578c80766ecab3eba809e4c32ba9a17f7 → ded76ce1309e48970e51b17c73d2644d34ea22e45bc1b28b88a1ad20868e6cb9}/pami-rating.css_tag_pami-rating_encapsulation_shadow

@@ -35,7 +35,7 @@
   --_gap: var(--pami-rating-item-gap, var(--md-sys-spacing-gap-xs, 4px));
   --_active-color: var(--pami-rating-active-color, var(--md-sys-color-secondary, #FFB400));
   --_inactive-color: var(--pami-rating-inactive-color, color-mix(in srgb, var(--md-sys-color-on-surface-variant) 30%, transparent));
-  --_focus-ring-color: var(--pami-rating-focus-ring-color, var(--md-sys-color-secondary));
+  --_focus-ring-color: var(--pami-rating-focus-ring-color, var(--md-sys-color-focus-ring, #513018));
   --_focus-ring-width: var(--pami-rating-focus-ring-width, var(--md-sys-state-focus-ring-width, 2px));
   --_focus-ring-offset: var(--pami-rating-focus-ring-offset, var(--md-sys-state-focus-ring-offset, 2px));
   --_state-layer-color: var(--pami-rating-state-layer-color, var(--md-sys-color-on-surface));
@@ -205,8 +205,8 @@
   display: inline-grid;
   place-items: center start;
   font: var(--_label-font);
-  font-size: var(--md-sys-typescale-label-large-size, 14px);
-  font-weight: var(--md-sys-typescale-label-large-weight, 500);
+  font-size: var(--md-sys-typescale-label-large-font-size, 14px);
+  font-weight: var(--md-sys-typescale-label-large-font-weight, 500);
   color: var(--_label-color);
   white-space: nowrap;
   font-variant-numeric: tabular-nums;

package/dist/sources/{c274c1a827c9a70c44cfd4799d9d6254dfc6c5bcc0ba7f6d8e1ddd8d353271e0 → e73037cc274dab6b17d817adbfa3e69990da7d34758566725e634d080a8f1b53}/pami-ripple.css_tag_pami-ripple_encapsulation_shadow

@@ -1,3 +1,4 @@
+/* Generated from scripts/templates/pami-ripple.css and pami.tokens.json. Do not edit. */
 /* ==========================================================
    pami-ripple — Pari (Pami press light)
    Keeps the M3 ripple's tag and API. One bloom of warm light grows from the
@@ -7,16 +8,16 @@
 
    SYSTEM TOKENS (set in the token sheet; literal fallbacks below):
      --md-sys-color-pari           The light (warm peach on light, gold on dark)
-     --md-sys-pari-opacity         Peak opacity of the bloom (default: 0.6)
+     --md-sys-pari-opacity         Peak opacity of the bloom (default: 0.24)
      --md-sys-pari-blur            Blur radius (default: 6px)
-     --md-sys-pari-duration        Growth duration (default: 640ms)
+     --md-sys-pari-duration        Growth duration (default: 320ms)
      --md-sys-pari-easing          Growth easing
                                    (default: cubic-bezier(0.16, 1, 0.3, 1))
      --md-sys-motion-press-scale   Host scale while pressed; 1 = off
                                    (default: 1; controls opt in with 0.98)
      --md-sys-motion-press-duration / --md-sys-motion-press-easing
-                                   (default: 150ms,
-                                   cubic-bezier(0.34, 1.56, 0.64, 1))
+                                   (default: 100ms,
+                                   cubic-bezier(0.2, 0, 0.2, 1))
      --md-sys-ripple-enabled       0 suppresses all press feedback
 
    PUBLIC CSS CUSTOM PROPERTIES (override per instance):
@@ -45,7 +46,7 @@
      container's shape even when the embedding host does not clip. */
   border-radius: inherit;
 
-  --_color: var(--pami-ripple-color, var(--md-sys-color-pari, #ffc98e));
+  --_color: var(--pami-ripple-color, var(--md-sys-color-pari, rgba(255, 201, 142, 0.16)));
 }
 
 .pami-ripple {