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

package/dist/types/utils/charts/theme.d.ts

@@ -91,6 +91,8 @@ export declare function resolveAxisBands(host: HTMLElement, bands: PamiChartAxis
  * already be a family list and passed through.
  */
 export declare function fontFamilyOf(font: string): string;
+/** Resolve rem/clamp/container units in the chart's actual layout context. */
+export declare function readFontSize(host: HTMLElement, cs: CSSStyleDeclaration, name: string, fallback: number): number;
 /**
  * Build the per-render theme object by reading the host's tokens.
  * Cheap enough to call on every `componentDidLoad` and on the

package/dist/types/utils/focusable.d.ts

@@ -0,0 +1,4 @@
+/** Focus stops in rendered order, including nested shadow roots and slots.
+ * A focusable custom host is one stop; its internals must not add duplicates.
+ */
+export declare function flatFocusableElements(root: HTMLElement): HTMLElement[];

package/dist/types/utils/pami-dots.d.ts

@@ -2,7 +2,7 @@ import { FunctionalComponent } from '../stencil-public-runtime.js';
 export interface PamiDotsProps {
     /**
      * Multiplier on the dot pitch for this surface (default 1). The pitch still
-     * snaps to the Pami steps and never drops below 3px.
+     * snaps to the Pami steps and never drops below 5px.
      */
     scale?: number;
 }

package/dist/types/utils/pami-material-defaults.d.ts

@@ -0,0 +1,108 @@
+export declare const RHYTHM_DEFAULTS: {
+    pitch: number;
+    radiusMin: number;
+    radiusMax: number;
+    angle: number;
+    opacity: number;
+    rows: number;
+    minPitch: number;
+    maxPitchControl: number;
+    maxPitchSurface: number;
+    compactBoost: number;
+    fit: number;
+    blurMaxFilling: number;
+    blurMaxCrumb: number;
+    compactBreakpoint: number;
+    systemDotLift: number;
+};
+export declare const MATERIAL_DEFAULTS: {
+    light: {
+        crust: {
+            bg: string[];
+            dot: string[];
+            text: string;
+            blur: number;
+        };
+        olive: {
+            bg: string[];
+            dot: string[];
+            text: string;
+            blur: number;
+        };
+        bronze: {
+            bg: string[];
+            dot: string[];
+            text: string;
+            blur: number;
+        };
+        crumb: {
+            bg: string[];
+            dot: string[];
+            text: string;
+            blur: number;
+        };
+        "olive-soft": {
+            bg: string[];
+            dot: string[];
+            text: string;
+            blur: number;
+        };
+        "bronze-soft": {
+            bg: string[];
+            dot: string[];
+            text: string;
+            blur: number;
+        };
+        "crust-soft": {
+            bg: string[];
+            dot: string[];
+            text: string;
+            blur: number;
+        };
+    };
+    dark: {
+        crust: {
+            bg: string[];
+            dot: string[];
+            text: string;
+            blur: number;
+        };
+        olive: {
+            bg: string[];
+            dot: string[];
+            text: string;
+            blur: number;
+        };
+        bronze: {
+            bg: string[];
+            dot: string[];
+            text: string;
+            blur: number;
+        };
+        crumb: {
+            bg: string[];
+            dot: string[];
+            text: string;
+            blur: number;
+        };
+        "olive-soft": {
+            bg: string[];
+            dot: string[];
+            text: string;
+            blur: number;
+        };
+        "bronze-soft": {
+            bg: string[];
+            dot: string[];
+            text: string;
+            blur: number;
+        };
+        "crust-soft": {
+            bg: string[];
+            dot: string[];
+            text: string;
+            blur: number;
+        };
+    };
+};
+export declare const SQUARE_TRIM_DEFAULT = 1;

package/dist/types/utils/pami-material.d.ts

@@ -4,13 +4,14 @@
  * Ported from the Lit `core/material-utils.ts` (8e4f1b6). The Lit version read a
  * bundled token tree; this one reads computed CSS custom properties, so theme
  * switches, subtree dark mode and consumer overrides need no JS knowledge of the
- * token JSON. Every read carries a literal fallback equal to the current value in
+ * token JSON. Every read carries a generated fallback from
  * `foundations/tokens/pami.tokens.json`, so a page without the token sheet still
  * gets the Pami rhythm.
  *
  * Everything here is pure (no DOM writes) and safe to import during SSR.
  */
-/** Linear sRGB channels in 0..1. */
+export { RHYTHM_DEFAULTS } from './pami-material-defaults.js';
+/** Encoded sRGB channels in 0..1. */
 export type RGB = number[];
 export interface Palette {
     background: [RGB, RGB];
@@ -47,7 +48,7 @@ export interface TextureGeometry {
     max: number;
 }
 /**
- * The review rule "dots ≥ 3px": the dot grid never gets denser than 3px,
+ * The review rule "dots ≥ 5px": the dot grid never gets denser than 5px,
  * whatever a token override says, so the texture always reads as dots.
  */
 export declare const MIN_DOT_PITCH = 5;
@@ -57,8 +58,6 @@ export declare const MIN_PAINT_SIDE = 8;
 export declare const MATERIALS: readonly ["crust", "crust-soft", "crumb", "olive", "olive-soft", "bronze", "bronze-soft"];
 export type MaterialName = (typeof MATERIALS)[number];
 export declare const isMaterial: (name: string) => name is MaterialName;
-/** Literal fallbacks: the values of pami.tokens.json at the time of the port. */
-export declare const RHYTHM_DEFAULTS: TextureRhythm;
 /** Minimal style reader, satisfied by CSSStyleDeclaration. */
 export interface StyleReader {
     getPropertyValue(name: string): string;
@@ -111,10 +110,12 @@ export interface Dot {
     /** Position along the 43° ramp, 0..1. */
     t: number;
 }
-/**
- * The dot grid for a w×h box. The pitch is fitted so a whole number of dots spans each side and the grid sits
- * centred: the margin at the left equals the margin at the right (and top and bottom), so no column is ever
- * cut off-centre. The grid extends into the blur bleed, the radius ramps min→max along the texture angle, and
- * each dot is widened by the blur so the small end of the ramp survives. Pure, so tests can check it.
- */
+/** Rotate the lattice, not its shapes. The size/colour ramp stays in surface coordinates. */
 export declare function dotGrid(w: number, h: number, geom: TextureGeometry, angleDeg: number, blur: number, bleed: number): Generator<Dot>;
+export type ParticleShape = 'circle' | 'square' | 'triangle';
+/** Material identity is shared by all components; system hues keep a neutral circle. */
+export declare function particleShape(material: string): ParticleShape;
+export declare function readSquareTrim(style: StyleReader): number;
+type ParticlePath = Pick<CanvasPath, 'moveTo' | 'lineTo' | 'closePath' | 'rect' | 'arc'>;
+/** Same-area upright shapes; triangle centroid stays at the lattice point. */
+export declare function appendParticle(path: ParticlePath, { x, y, r }: Dot, shape: ParticleShape, squareTrim: number): void;

package/dist/types/utils/pami-motion-defaults.d.ts

@@ -0,0 +1,7 @@
+export declare const PARI_DURATION_MS = 320;
+export declare const PARI_OPACITY = 0.24;
+export declare const PARI_EASING = "cubic-bezier(0.16, 1, 0.3, 1)";
+export declare const PRESS_SCALE = 1;
+export declare const PRESS_DURATION_MS = 100;
+export declare const PRESS_EASING = "cubic-bezier(0.2, 0, 0.2, 1)";
+export declare const EASING_STANDARD = "cubic-bezier(0.2, 0, 0, 1)";

package/dist/types/utils/status-surface.d.ts

@@ -0,0 +1,2 @@
+export type PamiStatusTone = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+export declare function statusSurface(tone: PamiStatusTone): string;