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

package/dist/sources/7a4b29a22f5e14ab4f0918effe1b91ad9ae6076553b826cc90edf6e43879cba0/pami-material-defaults.ts

@@ -0,0 +1,193 @@
+// Generated from foundations/tokens/pami.tokens.json. Do not edit.
+export const RHYTHM_DEFAULTS = {
+  "pitch": 10,
+  "radiusMin": 0,
+  "radiusMax": 8,
+  "angle": 43,
+  "opacity": 1,
+  "rows": 4.5,
+  "minPitch": 5,
+  "maxPitchControl": 12,
+  "maxPitchSurface": 12,
+  "compactBoost": 1.12,
+  "fit": 0.42,
+  "blurMaxFilling": 0.08,
+  "blurMaxCrumb": 0.18,
+  "compactBreakpoint": 600,
+  "systemDotLift": 0.5
+};
+export const MATERIAL_DEFAULTS = {
+  "light": {
+    "crust": {
+      "bg": [
+        "#E69234",
+        "#EB9942"
+      ],
+      "dot": [
+        "#F0A964",
+        "#FAB573"
+      ],
+      "text": "#2B1C0D",
+      "blur": 0
+    },
+    "olive": {
+      "bg": [
+        "#465F1F",
+        "#3F561A"
+      ],
+      "dot": [
+        "#547129",
+        "#506B27"
+      ],
+      "text": "#F2F8EB",
+      "blur": 2
+    },
+    "bronze": {
+      "bg": [
+        "#75431F",
+        "#683A19"
+      ],
+      "dot": [
+        "#91572E",
+        "#865029"
+      ],
+      "text": "#FFF2EB",
+      "blur": 2
+    },
+    "crumb": {
+      "bg": [
+        "#FCFCFC",
+        "#FFFBF5"
+      ],
+      "dot": [
+        "#F9F1E7",
+        "#FEF9EF"
+      ],
+      "text": "#342004",
+      "blur": 4
+    },
+    "olive-soft": {
+      "bg": [
+        "#EDF5E3",
+        "#E3F1D5"
+      ],
+      "dot": [
+        "#D0E2BC",
+        "#C4DAA9"
+      ],
+      "text": "#1E2812",
+      "blur": 2
+    },
+    "bronze-soft": {
+      "bg": [
+        "#FFEEE4",
+        "#FFE6D6"
+      ],
+      "dot": [
+        "#F9D2B9",
+        "#F6C5A6"
+      ],
+      "text": "#331E11",
+      "blur": 2
+    },
+    "crust-soft": {
+      "bg": [
+        "#FFEFE0",
+        "#FFE6D1"
+      ],
+      "dot": [
+        "#F5D4B6",
+        "#F2C8A1"
+      ],
+      "text": "#32200E",
+      "blur": 0
+    }
+  },
+  "dark": {
+    "crust": {
+      "bg": [
+        "#FF9847",
+        "#FFA354"
+      ],
+      "dot": [
+        "#FFB36B",
+        "#FFC984"
+      ],
+      "text": "#221509",
+      "blur": 0
+    },
+    "olive": {
+      "bg": [
+        "#4A7323",
+        "#416720"
+      ],
+      "dot": [
+        "#517128",
+        "#507229"
+      ],
+      "text": "#F0F6E9",
+      "blur": 2
+    },
+    "bronze": {
+      "bg": [
+        "#89452A",
+        "#773A21"
+      ],
+      "dot": [
+        "#995635",
+        "#9B5433"
+      ],
+      "text": "#FEF1E8",
+      "blur": 2
+    },
+    "crumb": {
+      "bg": [
+        "#100F0F",
+        "#242119"
+      ],
+      "dot": [
+        "#2F291E",
+        "#271D11"
+      ],
+      "text": "#FFFFFF",
+      "blur": 4
+    },
+    "olive-soft": {
+      "bg": [
+        "#253A16",
+        "#1D3011"
+      ],
+      "dot": [
+        "#48692A",
+        "#4B6C2A"
+      ],
+      "text": "#E6EFDD",
+      "blur": 2
+    },
+    "bronze-soft": {
+      "bg": [
+        "#402419",
+        "#341D14"
+      ],
+      "dot": [
+        "#71432B",
+        "#824A2E"
+      ],
+      "text": "#F9E7DC",
+      "blur": 2
+    },
+    "crust-soft": {
+      "bg": [
+        "#48260F",
+        "#381C0B"
+      ],
+      "dot": [
+        "#93481E",
+        "#9B4C1F"
+      ],
+      "text": "#F8E8DA",
+      "blur": 0
+    }
+  }
+};
+export const SQUARE_TRIM_DEFAULT = 1;

package/dist/sources/7e8a1b22f1a1cb54b4b7cdad4bbfad9606419cf010636f6174da980089144636/pami-navigation-group.tsx

@@ -0,0 +1,26 @@
+import { Component, Host, h, Prop } from '@stencil/core';
+
+/**
+ * A labelled section of navigation destinations. The label is not interactive.
+ * @tag pami-navigation-group
+ * @slot - Navigation destinations or nested groups
+ * @csspart label - Section label
+ * @csspart items - Destination container
+ */
+@Component({ tag: 'pami-navigation-group', styleUrl: 'pami-navigation-group.css', shadow: true })
+export class PamiNavigationGroup {
+  /** Section name; kept accessible when the rail is collapsed. */
+  @Prop() label: string = '';
+
+  /** Managed by the rail: show the section label in its expanded layout. */
+  @Prop({ reflect: true }) expanded: boolean = true;
+
+  render() {
+    return (
+      <Host role="group" aria-label={this.label || undefined}>
+        {this.label && <span part="label" aria-hidden="true">{this.label}</span>}
+        <div part="items"><slot /></div>
+      </Host>
+    );
+  }
+}

package/dist/sources/{0d91fa3bea6a6c8c693b8dca19946aef1b86d6f793f181210e5863de09b4aebb → 89368cfde7ecd06ee05b5493ce0f0503fd48fd12c4d8f2cb47610eb38157fe71}/pami-material.ts

@@ -4,14 +4,17 @@
  * 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. */
+import { RHYTHM_DEFAULTS, MATERIAL_DEFAULTS, SQUARE_TRIM_DEFAULT } from './pami-material-defaults';
+export { RHYTHM_DEFAULTS } from './pami-material-defaults';
+
+/** Encoded sRGB channels in 0..1. */
 export type RGB = number[];
 
 export interface Palette {
@@ -53,7 +56,7 @@ export interface TextureGeometry {
 }
 
 /**
- * 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 const MIN_DOT_PITCH = 5;
@@ -65,25 +68,6 @@ export const MATERIALS = ['crust', 'crust-soft', 'crumb', 'olive', 'olive-soft',
 export type MaterialName = (typeof MATERIALS)[number];
 export const isMaterial = (name: string): name is MaterialName => (MATERIALS as readonly string[]).includes(name);
 
-/** Literal fallbacks: the values of pami.tokens.json at the time of the port. */
-export const RHYTHM_DEFAULTS: TextureRhythm = {
-  pitch: 10,
-  radiusMin: 0,
-  radiusMax: 8,
-  angle: 43,
-  opacity: 1,
-  rows: 8.5,
-  minPitch: 5,
-  maxPitchControl: 8,
-  maxPitchSurface: 12,
-  compactBoost: 1.12,
-  fit: 0.42,
-  blurMaxFilling: 0.12,
-  blurMaxCrumb: 0.18,
-  compactBreakpoint: 600,
-  systemDotLift: 0.5,
-};
-
 const RHYTHM_VARS: Record<keyof TextureRhythm, string> = {
   pitch: '--pami-texture-pitch',
   radiusMin: '--pami-texture-radius-min',
@@ -102,17 +86,6 @@ const RHYTHM_VARS: Record<keyof TextureRhythm, string> = {
   systemDotLift: '--pami-system-dot-lift',
 };
 
-/** Literal colour fallbacks (light theme) so dots still render without the token sheet. */
-const MATERIAL_DEFAULTS: Record<MaterialName, { bg: [string, string]; dot: [string, string]; text: string; blur: number }> = {
-  crust: { bg: ['#EF8625', '#FB8E28'], dot: ['#F09F42', '#FFAD1F'], text: '#331505', blur: 0 },
-  'crust-soft': { bg: ['#FFE9D1', '#FFDDB8'], dot: ['#FFC98E', '#FFB866'], text: '#331505', blur: 0 },
-  crumb: { bg: ['#FCFCFC', '#FFFBF5'], dot: ['#F9F1E7', '#FEF9EF'], text: '#342004', blur: 4 },
-  'olive-soft': { bg: ['#F4F7EA', '#EAF0D9'], dot: ['#D8E2B6', '#C9D79E'], text: '#2A3813', blur: 2 },
-  'bronze-soft': { bg: ['#FAF3EC', '#F3E7DA'], dot: ['#E6D2BD', '#DCC2A6'], text: '#351C0A', blur: 2 },
-  olive: { bg: ['#3B4F1A', '#2A3813'], dot: ['#607F1F', '#556B2F'], text: '#FCFFEB', blur: 2 },
-  bronze: { bg: ['#513018', '#351C0A'], dot: ['#996437', '#7D4D28'], text: '#FEF7EC', blur: 2 },
-};
-
 /** Minimal style reader, satisfied by CSSStyleDeclaration. */
 export interface StyleReader {
   getPropertyValue(name: string): string;
@@ -217,7 +190,7 @@ export function readPalette(style: StyleReader, name: string, normalize?: (v: st
     return parseColor(fallback)!;
   };
   if (isMaterial(name)) {
-    const d = MATERIAL_DEFAULTS[name],
+    const d = MATERIAL_DEFAULTS[surfaceMode(style, normalize)][name],
       m = `--pami-material-${name}`;
     const blur = parseNumber(style.getPropertyValue('--pami-surface-blur')) ?? parseNumber(style.getPropertyValue(`${m}-blur`)) ?? d.blur;
     return {
@@ -231,7 +204,10 @@ export function readPalette(style: StyleReader, name: string, normalize?: (v: st
   const base = read([`--pami-system-colors-${name}-${mode}`], mode === 'dark' ? '#584738' : '#DCC9B9');
   const text = chooseText([base]);
   const lift = parseNumber(style.getPropertyValue('--pami-system-dot-lift')) ?? RHYTHM_DEFAULTS.systemDotLift;
-  return { background: [base, base], dot: [lighterDot(base, text, lift), lighterDot(base, text, lift / 2)], text, blur: 0 };
+  // Auxiliary colours share the filling softness, with circular particles.
+  const blur = parseNumber(style.getPropertyValue('--pami-surface-blur')) ??
+    parseNumber(style.getPropertyValue('--pami-material-olive-blur')) ?? MATERIAL_DEFAULTS[mode].olive.blur;
+  return { background: [base, base], dot: [lighterDot(base, text, lift), lighterDot(base, text, lift / 2)], text, blur };
 }
 
 /** Pitch steps: 0.5px up to 5px, then whole pixels. */
@@ -276,27 +252,55 @@ export interface Dot {
   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.
- */
-export function* dotGrid(w: number, h: number, geom: TextureGeometry, angleDeg: number, blur: number, bleed: number): Generator<Dot> {
-  const { pitch, min, max } = geom;
-  const angle = (angleDeg * Math.PI) / 180,
-    dx = Math.sin(angle),
-    dy = -Math.cos(angle);
-  const span = Math.abs(w * dx) + Math.abs(h * dy) || 1;
-  const stepX = w / Math.max(1, Math.round(w / pitch)),
-    stepY = h / Math.max(1, Math.round(h / pitch));
-  const startX = stepX / 2 - Math.ceil(bleed / stepX) * stepX,
-    startY = stepY / 2 - Math.ceil(bleed / stepY) * stepY;
-  for (let y = startY; y < h + bleed; y += stepY)
-    for (let x = startX; x < w + bleed; x += stepX) {
-      const t = Math.max(0, Math.min(1, 0.5 + ((x - w / 2) * dx + (y - h / 2) * dy) / span));
-      const base = min + (max - min) * t;
-      if (base <= 0) continue;
-      yield { x, y, r: base + blur, t };
-    }
-}
+/** Rotate the lattice, not its shapes. The size/colour ramp stays in surface coordinates. */
+export function* dotGrid(w: number, h: number, geom: TextureGeometry, angleDeg: number, blur: number, bleed: number): Generator<Dot> {
+  const angle = angleDeg * Math.PI / 180;
+  const cos = Math.cos(angle), sin = Math.sin(angle);
+  // Include centres outside the canvas whose shapes or blur can still overlap it.
+  const pad = bleed + geom.max * 2 + blur;
+  const halfU = (w * Math.abs(cos) + h * Math.abs(sin)) / 2 + pad;
+  const halfV = (w * Math.abs(sin) + h * Math.abs(cos)) / 2 + pad;
+  const span = Math.abs(w * sin) + Math.abs(h * cos) || 1;
+  for (let j = Math.floor(-halfV / geom.pitch); j <= Math.ceil(halfV / geom.pitch); j++) {
+    for (let i = Math.floor(-halfU / geom.pitch); i <= Math.ceil(halfU / geom.pitch); i++) {
+      const u = (i + .5) * geom.pitch, v = (j + .5) * geom.pitch;
+      const x = w / 2 + u * cos - v * sin;
+      const y = h / 2 + u * sin + v * cos;
+      if (x < -pad || x > w + pad || y < -pad || y > h + pad) continue;
+      const t = Math.max(0, Math.min(1, .5 + ((x - w / 2) * sin - (y - h / 2) * cos) / span));
+      const r = geom.min + (geom.max - geom.min) * t;
+      if (r > 0) yield { x, y, r: r + blur, t };
+    }
+  }
+}
+
+export type ParticleShape = 'circle' | 'square' | 'triangle';
+/** Material identity is shared by all components; system hues keep a neutral circle. */
+export function particleShape(material: string): ParticleShape {
+  if (material === 'crust' || material === 'crust-soft') return 'triangle';
+  if (['olive', 'olive-soft', 'bronze', 'bronze-soft'].includes(material)) return 'square';
+  return 'circle';
+}
+
+export function readSquareTrim(style: StyleReader): number {
+  return Math.max(0, (parseNumber(style.getPropertyValue('--pami-spacing-4')) ?? SQUARE_TRIM_DEFAULT * 4) / 4);
+}
+
+type ParticlePath = Pick<CanvasPath, 'moveTo' | 'lineTo' | 'closePath' | 'rect' | 'arc'>;
+/** Same-area upright shapes; triangle centroid stays at the lattice point. */
+export function appendParticle(path: ParticlePath, { x, y, r }: Dot, shape: ParticleShape, squareTrim: number) {
+  if (shape === 'square') {
+    const side = Math.max(0, Math.sqrt(Math.PI) * r - squareTrim);
+    path.rect(x - side / 2, y - side / 2, side, side);
+  } else if (shape === 'triangle') {
+    const radius = r * Math.sqrt(4 * Math.PI / (3 * Math.sqrt(3)));
+    const halfWidth = radius * Math.sqrt(3) / 2;
+    path.moveTo(x, y - radius);
+    path.lineTo(x + halfWidth, y + radius / 2);
+    path.lineTo(x - halfWidth, y + radius / 2);
+    path.closePath();
+  } else {
+    path.moveTo(x + r, y);
+    path.arc(x, y, r, 0, Math.PI * 2);
+  }
+}

package/dist/sources/9259130eb26707816d2f73de6a6b83ded1d342166d4bee8d7c5799f47e0ce776/pami-tag.css_tag_pami-tag_encapsulation_shadow

@@ -0,0 +1,21 @@
+@import '../../global/pami-surface.css';
+
+:host { display: inline-flex; max-inline-size: 100%; vertical-align: middle; }
+:host([hidden]) { display: none; }
+[part="container"] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--md-sys-spacing-gap-xs, 4px);
+  padding: var(--md-sys-spacing-inset-xs, 4px) var(--md-sys-spacing-inset-sm, 8px);
+  border-radius: var(--md-sys-shape-corner-full, 9999px);
+  font: var(--md-sys-typescale-label-medium-font);
+  min-inline-size: 0;
+  max-inline-size: 100%;
+  box-sizing: border-box;
+}
+[part="content"] { min-inline-size: 0; overflow-wrap: anywhere; }
+.icon { display: inline-flex; align-items: center; flex-shrink: 0; }
+::slotted([slot="icon"]) {
+  inline-size: var(--md-sys-typescale-label-medium-line-height);
+  block-size: var(--md-sys-typescale-label-medium-line-height);
+}

package/dist/sources/{7b02ffe2929f3ab24d21441af70c419cc2a0ca0c729de1ab51220ae5dc096f43 → 99e17d776c986eca5093163516c22279037bdf5d42f009db8f128413ae5cdeb2}/pami-search.css_tag_pami-search_encapsulation_shadow

@@ -1392,10 +1392,10 @@
     system-ui,
     sans-serif
   );
-  font-size: var(--md-sys-typescale-body-medium-size, 14px);
-  font-weight: var(--md-sys-typescale-body-medium-weight, 400);
+  font-size: var(--md-sys-typescale-body-medium-font-size, 14px);
+  font-weight: var(--md-sys-typescale-body-medium-font-weight, 400);
   line-height: var(--md-sys-typescale-body-medium-line-height, 20px);
-  letter-spacing: var(--md-sys-typescale-body-medium-tracking, 0.25px);
+  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing, 0.25px);
 }
 
 /* Results slot stays mounted (for slotchange + consumer DOM) but is hidden

package/dist/sources/{9a58a561a902b8eb3fa212160fb365c303f6ea7d5687af2abbd199d33c031650 → a430938d1fedf6a7b604b1dc070760d52bd2733dd0ff8aed7a704d2b28374333}/pami-navigation-rail-tab.css_tag_pami-navigation-rail-tab_encapsulation_shadow

@@ -55,10 +55,10 @@
     --pami-navigation-rail-tab-label-color,
     var(--md-sys-color-on-surface-variant, #49454F)
   );
-  /* Spec (current token set): active label text = secondary. */
+  /* The current destination stays in the primary family. */
   --_active-label-color: var(
     --pami-navigation-rail-tab-active-label-color,
-    var(--md-sys-color-secondary, #625B71)
+    var(--md-sys-color-primary-ink, #91531E)
   );
   --_indicator-color: var(
     --pami-navigation-rail-tab-indicator-color,
@@ -81,8 +81,8 @@
     var(--md-sys-color-on-error, #FFFFFF)
   );
   --_focus-ring-color: var(
-    --pami-navigation-rail-tab-focus-ring-color,
-    var(--md-sys-color-secondary, #625B71)
+    --pami-navigation-rail-tab-focus-ring-color,
+    var(--md-sys-color-focus-ring, #513018)
   );
   /* Spec: all state layers (active+inactive, hover/focus/press) use
      on-secondary-container (#4A4458 in the spec's baseline palette). */
@@ -302,9 +302,9 @@ pami-ripple {
   position: relative;
   z-index: 1;
   font-family: var(--md-sys-typescale-label-medium-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-label-medium-font-size, 0.75rem) + var(--md-sys-density-scale, 0) * 0.5px));
   font-weight: var(--md-sys-typescale-label-medium-font-weight, 500);
-  line-height: max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));
+  line-height: max(14px, calc(var(--md-sys-typescale-label-medium-line-height, 1rem) + var(--md-sys-density-scale, 0) * 0.5px));
   letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing, 0.5px);
   text-align: center;
   color: var(--_label-color);
@@ -674,10 +674,11 @@ pami-ripple {
   display: none !important;
 }
 
-/* Pami: collapsed indicator is crust; the expanded drawer item is bronze-soft */
+/* Pami: the current destination stays Crust in both presentations. */
 :host(.pami-navigation-rail-tab--expanded) {
-  --_indicator-color: var(--pami-navigation-rail-tab-indicator-color, var(--md-sys-color-secondary-container, #FAF3EC));
-  --_active-icon-color: var(--pami-navigation-rail-tab-active-icon-color, var(--md-sys-color-on-secondary-container, #351C0A));
+  --_active-label-color: var(--pami-navigation-rail-tab-active-label-color, var(--md-sys-color-on-primary-container, #32200E));
+  --_indicator-color: var(--pami-navigation-rail-tab-indicator-color, var(--md-sys-color-primary-container, #FFEFE0));
+  --_active-icon-color: var(--pami-navigation-rail-tab-active-icon-color, var(--md-sys-color-on-primary-container, #32200E));
 }
 
 /* Pami skin: the plate with its dots sits behind the content. */
@@ -689,6 +690,94 @@ pami-ripple {
   pointer-events: none;
   --pami-dots-radius: inherit;
 }
-.pami-navigation-rail-tab__indicator {
-  isolation: isolate;
-}
+.pami-navigation-rail-tab__indicator {
+  isolation: isolate;
+}
+
+/* Hierarchical navigation has separate destination and disclosure controls.
+   The children slot stays mounted in both inline and popup presentations. */
+:host(.pami-navigation-rail-tab--branch) {
+  display: block;
+  cursor: default;
+  min-block-size: 0;
+  padding: 0;
+  color: var(--md-sys-color-on-surface-variant);
+}
+.pami-navigation-branch__row { display: flex; flex-direction: column; align-items: stretch; inline-size: 100%; }
+.pami-navigation-branch__destination,
+.pami-navigation-branch__disclosure {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: var(--md-sys-typescale-label-large-font);
+  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
+  cursor: pointer;
+  position: relative;
+  border-radius: var(--md-sys-shape-corner-large, 16px);
+  min-block-size: var(--md-sys-spacing-row-height, 56px);
+  box-sizing: border-box;
+  text-decoration: none;
+}
+.pami-navigation-branch__destination {
+  display: flex;
+  flex: 1;
+  min-inline-size: 0;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--md-sys-spacing-gap-xs, 4px);
+  padding: var(--md-sys-spacing-inset-sm, 8px);
+  isolation: isolate;
+  overflow: hidden;
+}
+.pami-navigation-branch__disclosure {
+  flex: 0 0 auto;
+  min-inline-size: var(--pami-component-button-height, 48px);
+  min-block-size: var(--pami-component-button-height, 48px);
+  padding: var(--md-sys-spacing-inset-sm, 8px);
+}
+.pami-navigation-branch__destination:focus-visible,
+.pami-navigation-branch__disclosure:focus-visible {
+  outline: var(--md-sys-state-focus-ring-width, 2px) solid var(--md-sys-color-focus-ring);
+  outline-offset: calc(-1 * var(--md-sys-state-focus-ring-width, 2px));
+}
+.pami-navigation-branch__destination:disabled,
+.pami-navigation-branch__disclosure:disabled {
+  cursor: default;
+  opacity: var(--md-sys-state-disabled-content-opacity, 0.38);
+}
+.pami-navigation-branch__icon { position: relative; flex-shrink: 0; }
+.pami-navigation-branch__label { position: relative; overflow-wrap: anywhere; min-inline-size: 0; }
+.pami-navigation-branch__surface { position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; }
+:host(.pami-navigation-rail-tab--expanded) .pami-navigation-branch__destination { flex-direction: row; justify-content: start; }
+:host(.pami-navigation-rail-tab--expanded) .pami-navigation-branch__row { flex-direction: row; }
+:host(.pami-navigation-rail-tab--active) .pami-navigation-branch__destination { color: var(--_active-icon-color); }
+.pami-navigation-branch__children {
+  display: flex;
+  flex-direction: column;
+  gap: var(--md-sys-spacing-gap-xs, 4px);
+  padding-inline-start: var(--md-sys-spacing-inset-lg, 16px);
+  box-sizing: border-box;
+}
+.pami-navigation-branch__children[hidden] { display: none; }
+.pami-navigation-branch__popup {
+  position: fixed;
+  inset: auto;
+  margin: 0;
+  z-index: var(--md-sys-z-index-popup, 1000);
+  inline-size: var(--pami-layout-navigation-drawer, 240px);
+  max-inline-size: calc(100vw - var(--md-sys-spacing-inset-sm, 8px) * 2);
+  max-block-size: calc(100dvh - var(--md-sys-spacing-inset-sm, 8px) * 2);
+  overflow: auto;
+  padding: var(--md-sys-spacing-inset-sm, 8px);
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-large, 16px);
+  color: var(--md-sys-color-on-surface);
+  background: var(--md-sys-color-surface);
+}
+@media (forced-colors: active) {
+  .pami-navigation-branch__popup { border-color: CanvasText; }
+  .pami-navigation-branch__destination:focus-visible,
+  .pami-navigation-branch__disclosure:focus-visible { outline-color: Highlight; }
+}

package/dist/sources/{d80b6e4787aedf6628772d776d5d57b77be707a870bb78623a294a319b40bb3e → b05e116ff2b2e46fa76f8b32a21147a5275ac6550d59caafe834aad82bb2eed0}/pami-text-field.css_tag_pami-text-field_encapsulation_shadow

@@ -270,8 +270,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/sources/{f6fe21d8ade03a04388b25dd1e4a67e8ac84e5266632336311b9baf5e3e84d69 → b9bac20e73b763e4fd71ade205acf3179f48016689659d32fc5e9f723ec85c0a}/pami-menu-item.css_tag_pami-menu-item_encapsulation_shadow

@@ -321,7 +321,7 @@
 .pami-menu-item__headline {
   font-family: var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);
   font-size: max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));
-  font-weight: var(--md-sys-typescale-body-large-weight, 400);
+  font-weight: var(--md-sys-typescale-body-large-font-weight, 400);
   line-height: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));
   white-space: nowrap;
   overflow: hidden;
@@ -353,10 +353,10 @@
   background-color: var(--md-sys-color-tertiary-container, #FFD8E4);
   color: var(--md-sys-color-on-tertiary-container, #31111D);
   font-family: var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);
-  font-size: var(--md-sys-typescale-label-small-size, 11px);
-  font-weight: var(--md-sys-typescale-label-small-weight, 500);
+  font-size: var(--md-sys-typescale-label-small-font-size, 11px);
+  font-weight: var(--md-sys-typescale-label-small-font-weight, 500);
   line-height: var(--md-sys-typescale-label-small-line-height, 16px);
-  letter-spacing: var(--md-sys-typescale-label-small-tracking, 0.5px);
+  letter-spacing: var(--md-sys-typescale-label-small-letter-spacing, 0.5px);
   white-space: nowrap;
 }
 
@@ -388,7 +388,7 @@
 
 .pami-menu-item__trailing-text {
   font-family: var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);
-  font-size: var(--md-sys-typescale-label-small-size, 11px);
+  font-size: var(--md-sys-typescale-label-small-font-size, 11px);
   color: var(--md-sys-color-on-surface-variant, #49454F);
 }
 

package/dist/sources/{5fe0a66f80f0c4e661475395d7877a25335c605cf4fb02649bd887ab73564259 → bd61b0a219bfab84d1e6663df7c8df2dcf7395ad6110036c14874aa788023c15}/pami-slider.css_tag_pami-slider_encapsulation_shadow

@@ -629,8 +629,8 @@
   color: var(--pami-slider-value-color);
   border-radius: var(--pami-slider-value-shape, var(--md-sys-shape-corner-full, 9999px));
   font-family: var(--pami-slider-value-font-family, var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif));
-  font-size: var(--pami-slider-value-font-size, var(--md-sys-typescale-label-medium-size, 12px));
-  font-weight: var(--pami-slider-value-font-weight, var(--md-sys-typescale-label-medium-weight, 500));
+  font-size: var(--pami-slider-value-font-size, var(--md-sys-typescale-label-medium-font-size, 12px));
+  font-weight: var(--pami-slider-value-font-weight, var(--md-sys-typescale-label-medium-font-weight, 500));
   line-height: var(--pami-slider-value-line-height, var(--md-sys-typescale-label-medium-line-height, 16px));
   letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing, 0.5px);
   white-space: nowrap;

package/dist/sources/{4dfc9c9d5e8fa39922a949409e66b9109463b97f0216334358921d4359cb61d6 → c176f6ce79521b5b70160c1a13b338d00bb4a90ee56911e0e043d4357dcd7e2a}/pami-multi-select.css_tag_pami-multi-select_encapsulation_shadow

@@ -311,7 +311,7 @@
   border-radius: var(--_chip-radius);
   background: transparent;
   color: var(--md-sys-color-on-surface-variant, #49454F);
-  font: 500 var(--md-sys-typescale-label-large-size, 14px) / var(--md-sys-typescale-label-large-line-height, 20px)
+  font: 500 var(--md-sys-typescale-label-large-font-size, 14px) / var(--md-sys-typescale-label-large-line-height, 20px)
     var(--md-sys-typescale-label-large-font, Roboto, sans-serif);
   white-space: nowrap;
   cursor: pointer;
@@ -350,10 +350,10 @@
 }
 
 .pami-multi-select__clear:focus-visible {
-  outline-width: var(--pami-multi-select-clear-focus-ring-width, 2px);
+  outline-width: var(--pami-multi-select-clear-focus-ring-width, var(--md-sys-state-focus-ring-width, 2px));
   outline-style: solid;
-  outline-color: var(--pami-multi-select-clear-focus-ring-color, var(--md-sys-color-primary));
-  outline-offset: var(--pami-multi-select-clear-focus-ring-offset, 1px);
+  outline-color: var(--pami-multi-select-clear-focus-ring-color, var(--md-sys-color-focus-ring, #513018));
+  outline-offset: var(--pami-multi-select-clear-focus-ring-offset, var(--md-sys-state-focus-ring-offset, 2px));
 }
 
 .pami-multi-select__clear pami-icon {