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

package/dist/sources/{ad8dae24c0940d3d78e73c208a2174be0f44c17ad88d5c14bc2a8b63fc919a17 → 24aa796cdc2df026b1d4e1a916907dd4e7c027698a43fa800d853d6f21b753cb}/pami-organization-chart.css_tag_pami-organization-chart_encapsulation_shadow

@@ -504,7 +504,7 @@
   padding: 32px 16px;
   text-align: center;
   color: var(--md-sys-color-on-surface-variant, #49454f);
-  font-size: var(--md-sys-typescale-body-medium-size, 14px);
+  font-size: var(--md-sys-typescale-body-medium-font-size, 14px);
 }
 
 /* ── Horizontal orientation ───────────────────────────────────────

package/dist/sources/282c6204b17cf224fa1c29c70b7eeca1f5026f4ca7d81056eef97db0249e4415/pami-callout.css_tag_pami-callout_encapsulation_shadow

@@ -0,0 +1,21 @@
+@import '../../global/pami-surface.css';
+: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/sources/31bcc0fc5bd4de92e30b1fd5d74fa98dc0049dfc15c6a020e71906684f155025/pami-callout.tsx

@@ -0,0 +1,42 @@
+import { Component, Element, Host, Prop, h } from '@stencil/core';
+import { PamiDots } from '../../utils/pami-dots';
+import { paintSurfaces, unpaintSurfaces } from '../../utils/pami-painter';
+import { PamiStatusTone, 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
+ */
+@Component({ tag: 'pami-callout', styleUrl: 'pami-callout.css', shadow: true })
+export class PamiCallout {
+  @Element() el!: HTMLElement;
+  /** Semantic colour; does not determine announcement urgency. */
+  @Prop({ reflect: true }) tone: PamiStatusTone = 'neutral';
+  /** Announce message updates. Use assertive only for urgent interruptions. */
+  @Prop() announcement: 'off' | 'polite' | 'assertive' = 'off';
+
+  componentDidRender() { paintSurfaces(this.el); }
+  disconnectedCallback() { unpaintSurfaces(this.el); }
+
+  render() {
+    const live = this.announcement === 'polite' || this.announcement === 'assertive';
+    return <Host><div part="container" data-surface={`${statusSurface(this.tone)}:surface`}>
+      <PamiDots />
+      <span class="icon" aria-hidden="true"><slot name="icon" /></span>
+      <div class="body">
+        <div part="content" role={live ? (this.announcement === 'assertive' ? 'alert' : 'status') : undefined}
+          aria-live={live ? this.announcement : undefined} aria-atomic={live ? 'true' : undefined}>
+          <div class="headline"><slot name="headline" /></div><slot />
+        </div>
+        <div part="actions"><slot name="actions" /></div>
+      </div>
+    </div></Host>;
+  }
+}

package/dist/sources/35e1ffdb7ade27d0dcc5f5a0b602351b4356ad348211a54bf9cdfb7ebef83787/pami-navigation-group.css_tag_pami-navigation-group_encapsulation_shadow

@@ -0,0 +1,30 @@
+:host {
+  display: block;
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-inline-size: 0;
+  padding-block: var(--md-sys-spacing-gap-sm, 8px);
+  border-block-start: 1px solid var(--md-sys-color-outline-variant);
+}
+
+:host([hidden]) { display: none; }
+
+[part="label"] {
+  display: block;
+  padding: var(--md-sys-spacing-inset-sm, 8px) var(--md-sys-spacing-inset-lg, 16px);
+  font: var(--md-sys-typescale-label-medium-font);
+  color: var(--md-sys-color-on-surface-variant);
+  overflow-wrap: anywhere;
+}
+
+:host(:not([expanded])) [part="label"] { display: none; }
+
+[part="items"] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--md-sys-spacing-gap-xs, 4px);
+}
+
+@media (forced-colors: active) {
+  :host { border-color: CanvasText; }
+}

package/dist/sources/3a78d70fc3ef5cd9c2b84b578e8aa4375e3512fe678f067f38b2eeec94cfade4/status-surface.ts

@@ -0,0 +1,7 @@
+export type PamiStatusTone = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+const surfaces: Record<PamiStatusTone, string> = {
+  neutral: 'crumb', info: 'blue', success: 'green', warning: 'yellow', error: 'red',
+};
+export function statusSurface(tone: PamiStatusTone): string {
+  return surfaces[tone] || surfaces.neutral;
+}

package/dist/sources/{6c163582408b4d7bc04a9c1a1f80b01e5861719f85f7e9f35667a619e50f9a0d → 4e65fa3e48826997c92b075221b722d889fbb59033628dc409191a69bb0ef1e0}/pami-menu.css_tag_pami-menu_encapsulation_shadow

@@ -459,7 +459,7 @@
   display: none;
   padding: var(--md-sys-spacing-inset-md, 12px) var(--md-sys-spacing-inset-lg, 16px);
   font-family: var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);
-  font-size: var(--md-sys-typescale-body-medium-size, 14px);
+  font-size: var(--md-sys-typescale-body-medium-font-size, 14px);
   line-height: var(--md-sys-typescale-body-medium-line-height, 20px);
   color: var(--md-sys-color-on-surface-variant, #49454F);
   text-align: center;

package/dist/sources/527cfd468257c872834df7758243d5de17f075578964fb4b2d854046eebf0b2e/pami-motion-defaults.ts

@@ -0,0 +1,8 @@
+// Generated from foundations/tokens/pami.tokens.json. Do not edit.
+export const PARI_DURATION_MS = 320;
+export const PARI_OPACITY = 0.24;
+export const PARI_EASING = "cubic-bezier(0.16, 1, 0.3, 1)";
+export const PRESS_SCALE = 1;
+export const PRESS_DURATION_MS = 100;
+export const PRESS_EASING = "cubic-bezier(0.2, 0, 0.2, 1)";
+export const EASING_STANDARD = "cubic-bezier(0.2, 0, 0, 1)";

package/dist/sources/{f057ec9cc9b2bc271fc6cafb5a9e886c1f2f88b76678d917b60de199571abccd → 541eb7b972849c16a3b860f7ea1c30751a98f8fc521a6ca03791ce5d0fe9426e}/pami-menu-item-group.css_tag_pami-menu-item-group_encapsulation_shadow

@@ -10,8 +10,8 @@
 
 .pami-menu-item-group__label {
   font-family: var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif);
-  font-size: var(--md-sys-typescale-label-medium-size, 12px);
-  font-weight: var(--md-sys-typescale-label-medium-weight, 500);
+  font-size: var(--md-sys-typescale-label-medium-font-size, 12px);
+  font-weight: var(--md-sys-typescale-label-medium-font-weight, 500);
   line-height: var(--md-sys-typescale-label-medium-line-height, 16px);
   color: var(--md-sys-color-on-surface-variant, #49454F);
   /* Global density: on-grid label padding tracks --md-sys-spacing-* tokens

package/dist/sources/{ae8a116d7a4ea11a820767e5165db1e532a538eb8ba9ed5f4dc5a47e806ae4e6 → 59e0809dd478584dd6e8662e903cd5a0186609577db7b77a0479bd247f0d0735}/pami-side-sheet.tsx

@@ -2,7 +2,8 @@ import { createId } from '../../utils/id';
 import { paintSurfaces, unpaintSurfaces } from '../../utils/pami-painter';
 import { PamiDots } from '../../utils/pami-dots';
 import { Component, Host, h, Prop, Event, EventEmitter, Method, Watch, State, Element } from '@stencil/core';
-import { OverlayLifecycle } from '../../utils/overlay-lifecycle';
+import { OverlayLifecycle } from '../../utils/overlay-lifecycle';
+import { flatFocusableElements } from '../../utils/focusable';
 
 /**
  * MD3 Side sheet — anchored panel for secondary content and actions.
@@ -253,8 +254,12 @@ export class PamiSideSheet {
 
   // ── Focus trap via focusin ──────────────────────────────
 
-  private handleDocFocusIn = () => {
-    if (!this.open || this.variant !== 'modal') return;
+  private handleDocFocusIn = (event: FocusEvent) => {
+    if (!this.open || this.variant !== 'modal') return;
+
+    // In an enclosing shadow root, document.activeElement is that outer host.
+    // The composed focus path still identifies this sheet and its slots.
+    if (event.composedPath().includes(this.el)) return;
 
     const active = document.activeElement;
     if (!active) return;
@@ -316,28 +321,9 @@ export class PamiSideSheet {
     }
   }
 
-  private getFocusableElements(): HTMLElement[] {
-    const selector = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]), pami-icon-button:not([disabled]), pami-button:not([disabled]), pami-text-field:not([disabled]), pami-checkbox:not([disabled]), pami-switch:not([disabled]), pami-radio:not([disabled]), pami-slider:not([disabled])';
-
-    const shadowEls = Array.from(
-      this.containerEl?.querySelectorAll(selector) ?? [],
-    ) as HTMLElement[];
-
-    const slots = this.containerEl?.querySelectorAll('slot') ?? [];
-    const slottedEls: HTMLElement[] = [];
-    slots.forEach((slot) => {
-      const assigned = (slot as HTMLSlotElement).assignedElements({ flatten: true });
-      assigned.forEach((el) => {
-        if ((el as HTMLElement).matches?.(selector)) {
-          slottedEls.push(el as HTMLElement);
-        }
-        const nested = (el as HTMLElement).querySelectorAll?.(selector);
-        if (nested) slottedEls.push(...(Array.from(nested) as HTMLElement[]));
-      });
-    });
-
-    return [...shadowEls, ...slottedEls];
-  }
+  private getFocusableElements(): HTMLElement[] {
+    return this.containerEl ? flatFocusableElements(this.containerEl) : [];
+  }
 
   // ── Render ──────────────────────────────────────────────
 
@@ -393,7 +379,7 @@ export class PamiSideSheet {
               class="pami-side-sheet__focus-guard"
               tabindex={0}
               aria-hidden="true"
-              onFocus={this.handleEndGuardFocus}
+              onFocus={this.handleStartGuardFocus}
             ></span>
           )}
 
@@ -456,7 +442,7 @@ export class PamiSideSheet {
               class="pami-side-sheet__focus-guard"
               tabindex={0}
               aria-hidden="true"
-              onFocus={this.handleStartGuardFocus}
+              onFocus={this.handleEndGuardFocus}
             ></span>
           )}
         </div>

package/dist/sources/{23e3c0a6f1c4ed86fe96ca5d8788e5cf6464e2be07031fd644120ea4efc313bf → 655cbc888435fe150257bfbd2fe21a572779617ba76cd567ac7d78e06a1ae431}/ripple.ts

@@ -41,8 +41,12 @@ export function triggerRipple(host: HTMLElement, selector: string = 'pami-ripple
 export async function waitForHostRipple(
   host: HTMLElement,
   selector: string = 'pami-ripple',
-): Promise<void> {
-  const started =
+): Promise<void> {
+  // Keyboard and application actions must not wait for decorative feedback
+  // when the user has requested reduced motion.
+  if (typeof window !== 'undefined' &&
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return;
+  const started =
     typeof performance !== 'undefined' ? performance.now() : Date.now();
   const ripple = host.shadowRoot?.querySelector(selector) as RippleElement | null;
   if (typeof ripple?.whenSettled === 'function') {

package/dist/sources/{fc66575830503cd73ba7d3bedde73217b0f304d317ca851afd9e791ddad97fb5 → 6562889930d75426b2d8c57a2a68e8cb5a1540c9cc7fc5ae289092574ae223d0}/pami-navigation-rail-tab.tsx

@@ -15,7 +15,9 @@ import { PamiDots } from '../../utils/pami-dots';
 import { paintSurfaces, unpaintSurfaces } from '../../utils/pami-painter';
 import { triggerRipple } from '../../utils/ripple';
 import { getRailTransitionTiming, parseRailMotionDuration, registerRailTabTransition, synchronizeRailAnimation } from '../../utils/navigation-rail-motion';
-import { sanitizeHref, SAFE_LINK_REL } from '../../utils/url';
+import { sanitizeHref, SAFE_LINK_REL } from '../../utils/url';
+import { fixedContainingBlockOrigin } from '../../utils/fixed-position';
+import { releaseIsolatingAncestors } from '../../utils/isolation-escape';
 
 /**
  * Material Design 3 — Navigation Rail Destination (Tab)
@@ -23,7 +25,16 @@ import { sanitizeHref, SAFE_LINK_REL } from '../../utils/url';
  * A single destination within a `<pami-navigation-rail>`. Renders the MD3
  * active-indicator pill (56×32) around the icon, with an optional label
  * underneath (or inline when the parent rail is expanded). Supports badges,
- * disabled state, link mode (`href`) and slotted custom icons.
+ * disabled state, link mode (`href`) and slotted custom icons.
+ * @tag pami-navigation-rail-tab
+ * @slot icon - Destination icon
+ * @slot children - Nested navigation destinations or labelled groups
+ * @slot submenu - Legacy command menu
+ * @fires pamiChildrenToggle - Disclosure changes independently of routing
+ * @csspart destination - Branch destination button or link
+ * @csspart disclosure - Branch disclosure button
+ * @csspart children - Inline or popup children region
+ * @csspart row - Parent destination and disclosure row
  *
  * Spec:
  *   - https://m3.material.io/components/navigation-rail/specs
@@ -76,7 +87,32 @@ export class PamiNavigationRailTab {
   labelVisibility: 'all' | 'selected' | 'none' = 'all';
 
   /** True when the parent rail is expanded; managed by the parent. */
-  @Prop({ reflect: true }) expanded: boolean = false;
+  @Prop({ reflect: true }) expanded: boolean = false;
+
+  /** Managed by the rail: destination semantics for grouped navigation. */
+  @Prop() navigation: boolean = false;
+
+  /** Whether the destinations in the children slot are disclosed. */
+  @Prop({ mutable: true, reflect: true, attribute: 'children-open' }) childrenOpen: boolean = false;
+
+  /** Accessible disclosure name; defaults to the destination label. */
+  @Prop({ attribute: 'children-label' }) childrenLabel?: string;
+
+  /** Fired when the user opens or closes the children disclosure. */
+  @Event() pamiChildrenToggle: EventEmitter<{ value: string; open: boolean }>;
+
+  @State() private hasChildren = false;
+  private childrenId = createId('pami-navigation-children');
+  private childrenObserver?: MutationObserver;
+  private popupWasOpen = false;
+  private restoreIsolation?: () => void;
+  private pendingChildrenFocus = false;
+
+  private syncChildren = () => {
+    this.hasChildren = Array.from(this.el.children).some(child => child.getAttribute('slot') === 'children');
+  };
+
+  componentWillLoad() { this.syncChildren(); }
 
   /**
    * Local density rung. Drives the same `--md-sys-density-scale` signal that a
@@ -126,14 +162,33 @@ export class PamiNavigationRailTab {
   private labelAnimation?: Animation;
   private unregisterTransition?: () => void;
 
-  connectedCallback() {
+  connectedCallback() {
+    this.syncChildren();
+    if (typeof MutationObserver !== 'undefined') {
+      this.childrenObserver = new MutationObserver(this.syncChildren);
+      this.childrenObserver.observe(this.el, { childList: true, attributes: true, subtree: true, attributeFilter: ['slot'] });
+    }
+    this.el.ownerDocument.addEventListener('pointerdown', this.onOutsidePointer);
+    this.el.ownerDocument.addEventListener('keydown', this.onPopupKeyDown);
+    this.el.ownerDocument.addEventListener('focusin', this.onOutsideFocus);
+    this.el.ownerDocument.defaultView?.addEventListener('resize', this.positionChildren);
+    this.el.ownerDocument.addEventListener('scroll', this.positionChildren, true);
     this.unregisterTransition = registerRailTabTransition(this.el, () => {
       this.captureTransition();
       this.transitionPrepared = true;
     });
   }
 
-  disconnectedCallback() {
+  disconnectedCallback() {
+    this.childrenObserver?.disconnect();
+    this.el.ownerDocument.removeEventListener('pointerdown', this.onOutsidePointer);
+    this.el.ownerDocument.removeEventListener('keydown', this.onPopupKeyDown);
+    this.el.ownerDocument.removeEventListener('focusin', this.onOutsideFocus);
+    this.el.ownerDocument.defaultView?.removeEventListener('resize', this.positionChildren);
+    this.el.ownerDocument.removeEventListener('scroll', this.positionChildren, true);
+    this.restoreIsolation?.();
+    this.restoreIsolation = undefined;
+    this.popupWasOpen = false;
     unpaintSurfaces(this.el);
     this.unregisterTransition?.();
     this.cancelAnimations();
@@ -182,7 +237,8 @@ export class PamiNavigationRailTab {
   /** The rail prepares before its own padding changes. Direct prop changes
    * still capture here, so a destination also behaves correctly in isolation. */
   @Watch('expanded')
-  onExpandedChange() {
+  onExpandedChange() {
+    if (!this.expanded && this.hasChildren && this.childrenOpen) this.setChildrenOpen(false);
     if (!this.transitionPrepared) this.captureTransition();
     this.transitionPrepared = false;
   }
@@ -270,7 +326,8 @@ export class PamiNavigationRailTab {
     this.labelOverlay = { element: label, styles };
   }
 
-  componentDidRender() {
+  componentDidRender() {
+    this.syncChildrenPopup();
     if (!this.pendingTransition) return;
     this.pendingTransition = false;
     this.playTransition();
@@ -491,7 +548,7 @@ export class PamiNavigationRailTab {
     else void menu.show();
   }
 
-  private handleClick = (e: MouseEvent) => {
+  private handleClick = (e: MouseEvent) => {
     if (this.disabled) {
       e.preventDefault();
       e.stopImmediatePropagation();
@@ -505,7 +562,134 @@ export class PamiNavigationRailTab {
       return;
     }
     this.pamiTabClick.emit({ value: this.value });
-  };
+  };
+
+  /** Focus this destination, including the native control used by a branch. */
+  @Method()
+  async focusDestination(): Promise<void> {
+    const target = this.hasChildren ? this.el.shadowRoot?.querySelector<HTMLElement>('[part="destination"]') : this.el;
+    target?.focus({ preventScroll: true });
+  }
+
+  /** Change the disclosure without activating the parent route. */
+  @Method()
+  async setChildrenOpen(open: boolean): Promise<void> {
+    if (this.disabled || !this.hasChildren || open === this.childrenOpen) return;
+    if (!open && this.popupWasOpen && this.el.contains(this.el.ownerDocument.activeElement)) {
+      this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part="disclosure"]')?.focus({ preventScroll: true });
+    }
+    this.childrenOpen = open;
+    this.pamiChildrenToggle.emit({ value: this.value, open });
+  }
+
+  private disclosure = () => {
+    this.pendingChildrenFocus = !this.expanded && !this.childrenOpen;
+    void this.setChildrenOpen(!this.childrenOpen);
+  };
+
+  private onOutsidePointer = (event: PointerEvent) => {
+    if (this.popupWasOpen && !event.composedPath().includes(this.el)) void this.setChildrenOpen(false);
+  };
+
+  private onOutsideFocus = (event: FocusEvent) => {
+    if (this.popupWasOpen && !event.composedPath().includes(this.el)) void this.setChildrenOpen(false);
+  };
+
+  private onPopupKeyDown = (event: KeyboardEvent) => {
+    if (!this.popupWasOpen || event.key !== 'Escape' || event.defaultPrevented) return;
+    event.preventDefault();
+    void this.setChildrenOpen(false);
+    this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part="disclosure"]')?.focus({ preventScroll: true });
+  };
+
+  private positionChildren = () => {
+    if (!this.popupWasOpen) return;
+    const region = this.el.shadowRoot?.querySelector<HTMLElement>('[part="children"]');
+    const trigger = this.el.shadowRoot?.querySelector<HTMLElement>('[part="row"]');
+    if (!region || !trigger) return;
+    const viewport = this.el.ownerDocument.defaultView;
+    if (!viewport) return;
+    const margin = parseFloat(getComputedStyle(this.el).getPropertyValue('--md-sys-spacing-inset-sm')) || 8;
+    const rect = trigger.getBoundingClientRect();
+    const rtl = getComputedStyle(this.el).direction === 'rtl';
+    const width = Math.min(region.getBoundingClientRect().width, viewport.innerWidth - 2 * margin);
+    let left = rtl ? rect.left - width - margin : rect.right + margin;
+    if (left < margin || left + width > viewport.innerWidth - margin) left = rtl ? rect.right + margin : rect.left - width - margin;
+    left = Math.max(margin, Math.min(left, viewport.innerWidth - width - margin));
+    const height = region.getBoundingClientRect().height;
+    const top = Math.max(margin, Math.min(rect.top, viewport.innerHeight - height - margin));
+    const origin = fixedContainingBlockOrigin(region);
+    region.style.left = `${left - origin.x}px`;
+    region.style.top = `${top - origin.y}px`;
+  };
+
+  private syncChildrenPopup() {
+    const region = this.el.shadowRoot?.querySelector<HTMLElement>('[part="children"]');
+    if (!region) return;
+    const open = this.hasChildren && this.childrenOpen && !this.expanded;
+    if (open) {
+      region.setAttribute('popover', 'manual');
+      if (!this.popupWasOpen) {
+        this.restoreIsolation = releaseIsolatingAncestors(region);
+        region.showPopover?.();
+      }
+      this.popupWasOpen = true;
+      this.positionChildren();
+      if (this.pendingChildrenFocus) {
+        this.pendingChildrenFocus = false;
+        const child = Array.from(this.el.querySelectorAll<HTMLPamiNavigationRailTabElement & { focusDestination?(): Promise<void> }>('pami-navigation-rail-tab'))
+          .find(tab => !tab.disabled && !tab.hidden);
+        if (child?.focusDestination) void child.focusDestination();
+        else child?.focus();
+      }
+    } else {
+      if (this.popupWasOpen) {
+        if (this.el.ownerDocument.activeElement !== this.el && this.el.contains(this.el.ownerDocument.activeElement)) {
+          this.el.shadowRoot?.querySelector<HTMLButtonElement>('[part="disclosure"]')?.focus({ preventScroll: true });
+        }
+        region.hidePopover?.();
+      }
+      region.removeAttribute('popover');
+      region.style.removeProperty('left');
+      region.style.removeProperty('top');
+      this.restoreIsolation?.();
+      this.restoreIsolation = undefined;
+      this.popupWasOpen = false;
+    }
+  }
+
+  private renderBranch(href: string | undefined) {
+    const destination = [
+      this.active && <span class="pami-navigation-branch__surface" data-surface={this.expanded ? 'crust-soft:control' : 'crust:control'} aria-hidden="true"><PamiDots /></span>,
+      <pami-ripple disabled={this.disabled} />,
+      <span class="pami-navigation-branch__icon">{this.renderIcon()}{this.renderBadge()}</span>,
+      <span class="pami-navigation-branch__label" part="label">{this.label}</span>,
+    ];
+    return (
+      <Host class={{ 'pami-navigation-rail-tab': true, 'pami-navigation-rail-tab--branch': true,
+        'pami-navigation-rail-tab--expanded': this.expanded, 'pami-navigation-rail-tab--active': this.active }}
+        role="group" aria-label={this.label} tabindex="-1">
+        <div class="pami-navigation-branch__row" part="row">
+          {href && !this.disabled
+            ? <a class="pami-navigation-branch__destination" part="destination" href={href}
+              target={this.target || undefined} rel={this.target ? SAFE_LINK_REL : undefined}
+              aria-current={this.active ? 'page' : undefined} onClick={this.handleClick}>{destination}</a>
+            : <button class="pami-navigation-branch__destination" part="destination" type="button" disabled={this.disabled}
+              aria-current={this.active ? 'page' : undefined} onClick={this.handleClick}>{destination}</button>}
+          <button type="button" class="pami-navigation-branch__disclosure" part="disclosure" disabled={this.disabled}
+            aria-label={this.childrenLabel || this.label} aria-controls={this.childrenId}
+            aria-expanded={String(this.childrenOpen)} onClick={this.disclosure}>
+            <pami-icon name={this.childrenOpen ? 'expand_less' : 'expand_more'} aria-hidden="true" />
+          </button>
+        </div>
+        <div id={this.childrenId} part="children" role="group" aria-label={this.label}
+          class={{ 'pami-navigation-branch__children': true, 'pami-navigation-branch__popup': !this.expanded }}
+          hidden={!this.childrenOpen} inert={!this.childrenOpen || this.disabled}>
+          <slot name="children" onSlotchange={this.syncChildren} />
+        </div>
+      </Host>
+    );
+  }
 
   private handleKeyDown = (e: KeyboardEvent) => {
     if (this.disabled) return;
@@ -577,7 +761,7 @@ export class PamiNavigationRailTab {
     return [
       <span class="pami-navigation-rail-tab__indicator" part="indicator" aria-hidden="true">
         {this.active && (
-          <span class="pami-navigation-rail-tab__surface" data-surface="crust:control" aria-hidden="true">
+          <span class="pami-navigation-rail-tab__surface" data-surface={this.expanded ? 'crust-soft:control' : 'crust:control'} aria-hidden="true">
             <PamiDots />
           </span>
         )}
@@ -620,12 +804,13 @@ export class PamiNavigationRailTab {
     /* `isLink` drives role, aria-current and aria-selected, so it is derived
        from the sanitized URL: a rejected `href` renders no anchor, and the
        tab must not still announce itself as a link. */
-    const href = sanitizeHref(this.href);
+    const href = sanitizeHref(this.href);
+    if (this.hasChildren) return this.renderBranch(href);
     const isLink = !!href && !this.disabled;
     const ariaDisabled = this.disabled ? 'true' : null;
-    const ariaCurrent = this.active && isLink ? 'page' : null;
-    const ariaSelected = isLink ? null : this.active ? 'true' : 'false';
-    const role = isLink ? 'link' : 'tab';
+    const ariaCurrent = this.active && (isLink || this.navigation) ? 'page' : null;
+    const ariaSelected = isLink || this.navigation ? null : this.active ? 'true' : 'false';
+    const role = isLink ? 'link' : this.navigation ? 'button' : 'tab';
     // Accessible name resolution.
     //  - tab mode: the role=tab host is named by its rendered label contents;
     //    aria-label is only needed for icon-only tabs (author supplies it).
@@ -656,7 +841,7 @@ export class PamiNavigationRailTab {
         aria-current={ariaCurrent}
         aria-disabled={ariaDisabled}
         aria-label={hostAriaLabel}
-        tabindex={this.disabled ? '-1' : this.active ? '0' : '-1'}
+        tabindex={this.disabled ? '-1' : this.navigation || this.active ? '0' : '-1'}
         aria-haspopup={this.submenu ? 'menu' : undefined}
         aria-expanded={this.submenu ? (this.submenuOpen ? 'true' : 'false') : undefined}
         onClick={this.handleClick}

package/dist/sources/{dd8e7de0b6aeaafd88a8d13123e5d07588ab74d8773cd80f70de293e28041436 → 6bab0e0b67c3b4abbb85cf631ad2af114271f98b795e2f2644810bffe75d1522}/pami-sub-menu-item.css_tag_pami-sub-menu-item_encapsulation_shadow

@@ -138,7 +138,7 @@
 .pami-sub-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;
@@ -169,10 +169,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;
 }