@awc-ui/core 1.0.0-beta.2 → 1.0.0-beta.4

package/dist/components-csr/md-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdAccordionCss","_floatingZ","MdAccordion","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","density","elevation","reorderable","floating","initialX","initialY","bringToFront","exclusive","keepOneExpanded","headingLevel","region","regionThreshold","transition","defaultExpanded","chassisX","chassisY","chassisDragging","dropPlaceholder","items","originalOrder","dragState","chassisDragState","onPointerDown","e","button","path","composedPath","handle","find","n","dataset","accordionDragHandle","startItemDrag","accordionChassisDrag","startChassisDrag","onChassisPointerMove","s","dx","clientX","startClientX","dy","clientY","startClientY","startX","startY","mdDragMove","emit","x","y","onChassisPointerUp","el","removeEventListener","releasePointerCapture","pointerId","mdDragEnd","onPointerMove","item","style","transform","origRect","startRects","fromIndex","draggedCenter","top","height","target","i","length","r","currentTarget","applySiblingShifts","hostTop","onPointerUp","forEach","it","classList","remove","moveItem","emitReorder","onKeyboardReorder","direction","from","detail","to","focusHeader","connectedCallback","collectItems","addEventListener","disconnectedCallback","cancelDrag","componentDidLoad","assignIndexes","applyInitialState","syncChildren","zIndex","String","onFloatingChange","value","applyChassisHandleMarker","onExclusiveChange","kept","expanded","onChildToggle","index","syncCollapsible","expandedIndices","map","filter","mdToggle","onChildRequestFocus","out","children","node","tagName","push","setAttribute","removeAttribute","hasAttribute","indexOf","preventDefault","getBoundingClientRect","fromRect","refRect","shiftDistance","Math","abs","setPointerCapture","add","mdDragStart","offset","ref","nextElementSibling","insertBefore","order","mdReorder","fromAttr","split","trim","Number","isInteger","targetExpanded","Set","includes","size","first","min","clear","firstEnabled","findIndex","disabled","should","has","computeRegionRole","role","regionRole","collapsible","openItems","onHeadingLevelChange","onRegionChange","onRegionThresholdChange","onKeepOneExpandedChange","some","render","floatingStyle","h","Host","key","class","part","blockSize"],"sources":["src/components/md-accordion/md-accordion.css?tag=md-accordion&encapsulation=shadow","src/components/md-accordion/md-accordion.tsx"],"sourcesContent":["/* ==========================================================\n   md-accordion — AWC UI Accordion container\n   Not part of the MD3 spec — modeled on MD3 expressive surfaces.\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-accordion-gap                 Gap between items in filled variant\n     --md-accordion-outline-color       Outlined variant border colour\n     --md-accordion-container-shape     Border-radius of the outer chassis\n     --md-accordion-elevation           Explicit elevation shadow override.\n                                        Wins over the `elevation` attribute.\n     --md-accordion-floating-width      Width of the floating panel\n     --md-accordion-floating-bg         Surface tint of the floating panel\n     --md-accordion-floating-elevation  Resting shadow for floating panel\n     --md-accordion-floating-elevation-active\n                                        Lifted shadow while being dragged\n     --md-accordion-floating-radius     Corner radius of the floating chassis\n     --md-accordion-drop-placeholder-color\n                                        Drop-target ghost fill (default primary-container @ ~45%)\n     --md-accordion-drop-placeholder-outline-color\n                                        Drop-target ghost outline (default primary @ ~55%, dashed)\n     --md-accordion-drop-placeholder-outline-width\n                                        Drop-target ghost outline width (default 2px)\n     --md-accordion-drop-placeholder-shape\n                                        Drop-target ghost corner radius (default the chassis shape)\n     --md-accordion-drop-placeholder-opacity\n                                        Drop-target ghost opacity (default 1)\n\n   CSS PARTS:\n     drop-placeholder  Ghost slot shown in the lifted item's vacated position\n                       during a pointer reorder (tracks the live drop target)\n\n   In `floating` mode the chassis-drag affordance is a small grip on\n   the FIRST item (see `chassis-handle` part on md-accordion-item).\n   There is no dedicated drag bar — the panel keeps its accordion\n   silhouette while gaining a discrete, recognisable handle in the\n   corner. This matches the brief: \"have that handle on the first\n   accordion\" rather than a row above everything.\n\n   Transition presets are exposed via the `transition` attribute on\n   the host: `expressive` (default), `standard`, `fade`, `collapse`,\n   `none`. The attribute is reflected so child items pick it up via\n   `:host-context(md-accordion[transition=\"…\"])` and the parent\n   chassis also honours it (notably for `none`).\n\n   CSS PARTS:\n     (none)\n\n   SLOTS:\n     (default)            Accordion items\n   ========================================================== */\n\n:host {\n  --_gap: var(--md-accordion-gap, var(--md-sys-spacing-gap-sm, 8px));\n  --_outline-color: var(--md-accordion-outline-color, var(--md-sys-color-outline-variant, #CAC4D0));\n  --_container-shape: var(--md-accordion-container-shape, max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px)));\n  /* Internal elevation token resolved from the `elevation` attribute via\n     the `.md-accordion--elevation-N` classes below. Any explicit\n     `--md-accordion-elevation` override still wins. */\n  --_elevation: var(--md-accordion-elevation, var(--md-sys-elevation-0, none));\n  --_elevation-easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n\n  /* Drop-target ghost (pointer reorder). Same recipe as md-list so the two\n     reorder surfaces read as one pattern: a low-opacity tint of the dragged\n     card's colour with a dashed outline, mixed from the theme roles so it\n     tracks the dynamic seed rather than being a fixed grey. */\n  --_drop-placeholder-color: var(--md-accordion-drop-placeholder-color, color-mix(in srgb, var(--md-sys-color-primary-container, #eaddff) 45%, transparent));\n  --_drop-placeholder-outline-color: var(--md-accordion-drop-placeholder-outline-color, color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 55%, transparent));\n  --_drop-placeholder-outline-width: var(--md-accordion-drop-placeholder-outline-width, 2px);\n  --_drop-placeholder-shape: var(--md-accordion-drop-placeholder-shape, var(--_container-shape));\n  --_drop-placeholder-opacity: var(--md-accordion-drop-placeholder-opacity, 1);\n  --_elevation-duration: var(--md-sys-motion-duration-medium2, 300ms);\n\n  display: block;\n  inline-size: 100%;\n}\n\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n\n:host {\n  box-sizing: border-box;\n  font-family: var(--md-sys-typescale-body-large-font, Roboto, sans-serif);\n  color: var(--md-sys-color-on-surface, #1C1B1F);\n  /* Containing block for the absolutely-positioned drop ghost. `relative` with\n     an auto z-index creates no stacking context, so item elevation and the\n     floating panel's own `position: fixed` are unaffected. */\n  position: relative;\n}\n\n/* ── Drop-target ghost, shown while an item is dragged.\n   Sits BEHIND the slotted items (the lifted item carries its own stacking)\n   so it reads as the empty slot the item will drop into, not an overlay. */\n.md-accordion__drop-placeholder {\n  position: absolute;\n  inset-inline: 0;\n  inset-block-start: 0;\n  z-index: 0;\n  box-sizing: border-box;\n  pointer-events: none;\n  border-radius: var(--_drop-placeholder-shape);\n  background-color: var(--_drop-placeholder-color);\n  border: var(--_drop-placeholder-outline-width) dashed var(--_drop-placeholder-outline-color);\n  opacity: var(--_drop-placeholder-opacity);\n  /* Glides to the new slot in step with the sibling shift. */\n  transition: transform var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .md-accordion__drop-placeholder {\n    transition: none;\n  }\n}\n\n/* ── Elevation levels — both the host (outlined) and the child items\n   (filled, via :host-context in md-accordion-item.css) consume these. */\n:host(.md-accordion--elevation-1) { --_elevation: var(--md-accordion-elevation, var(--md-sys-elevation-1)); }\n:host(.md-accordion--elevation-2) { --_elevation: var(--md-accordion-elevation, var(--md-sys-elevation-2)); }\n:host(.md-accordion--elevation-3) { --_elevation: var(--md-accordion-elevation, var(--md-sys-elevation-3)); }\n:host(.md-accordion--elevation-4) { --_elevation: var(--md-accordion-elevation, var(--md-sys-elevation-4)); }\n:host(.md-accordion--elevation-5) { --_elevation: var(--md-accordion-elevation, var(--md-sys-elevation-5)); }\n\n/* ── Filled (default): tiles with gaps ──\n   The gap is a FLEX GAP on the host, not a margin on the items. A margin here\n   would have to be written through `::slotted()`, and document-tree rules beat\n   `::slotted()` regardless of specificity — so a consumer's `* { margin: 0 }`\n   reset (Starlight's, Tailwind's preflight, any normalise) silently collapsed\n   the tiles flush against each other. `row-gap` on the container is out of\n   reach of that reset. */\n:host(.md-accordion--filled) {\n  display: flex;\n  flex-direction: column;\n  row-gap: var(--_gap);\n}\n:host(.md-accordion--filled) ::slotted(md-accordion-item) {\n  display: block;\n}\n\n/* ── Outlined: shared chassis, items share borders ── */\n:host(.md-accordion--outlined) {\n  border: 1px solid var(--_outline-color);\n  border-radius: var(--_container-shape);\n  overflow: hidden;\n  box-shadow: var(--_elevation);\n  transition: box-shadow var(--_elevation-duration) var(--_elevation-easing);\n}\n:host(.md-accordion--outlined) ::slotted(md-accordion-item) {\n  display: block;\n  border-block-end: 1px solid var(--_outline-color);\n}\n:host(.md-accordion--outlined) ::slotted(md-accordion-item:last-child) {\n  border-block-end: none;\n}\n\n/* When an item inside an outlined chassis is expanded we don't lift the\n   chassis itself — that would shift every sibling. The \"expansion lift\"\n   only happens for filled tiles. */\n\n/* ==========================================================\n   Transition presets — `transition` attribute on the host\n   ----------------------------------------------------------\n   Mirrors the per-item presets in md-accordion-item.css. The\n   floating chassis has its own box-shadow / border-radius\n   transition; for `transition=\"none\"` we kill it so the panel\n   feels truly instant (useful for tests / screenshot harnesses\n   / \"ambient\" UI that shouldn't bring attention to itself).\n   ========================================================== */\n:host([transition='none']),\n:host([transition='none']) * {\n  transition: none !important;\n  animation-duration: 0.001ms !important;\n}\n\n/* ==========================================================\n   Floating panel mode\n   ----------------------------------------------------------\n   The accordion lifts out of normal flow and becomes a free-form\n   draggable surface. Position is driven by an inline `transform`\n   from the component; everything else is styled here.\n   ========================================================== */\n\n:host(.md-accordion--floating) {\n  /* Floating-only public tokens */\n  --_floating-bg: var(--md-accordion-floating-bg, var(--md-sys-color-surface-container-low, #F7F2F9));\n  --_floating-elevation:\n    var(--md-accordion-floating-elevation, var(--md-sys-elevation-3, 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.3)));\n  --_floating-elevation-active:\n    var(--md-accordion-floating-elevation-active, var(--md-sys-elevation-5, 0 8px 12px 6px rgba(0, 0, 0, 0.15), 0 4px 4px 0 rgba(0, 0, 0, 0.3)));\n  --_floating-width: var(--md-accordion-floating-width, 360px);\n  --_floating-radius: var(--md-accordion-floating-radius, var(--md-sys-shape-corner-large, 16px));\n\n  position: fixed;\n  /*\n    The floating panel uses PHYSICAL viewport coordinates so its\n    position stays predictable regardless of writing direction —\n    `initial-x=\"40\"` always means \"40px from the left edge of the\n    viewport\", and the drag delta (which comes from `clientX`,\n    also physical) stays in lockstep with the translate. Using\n    logical `inset-inline-start` here would flip the anchor in\n    RTL, then the positive translate would push the panel off\n    the trailing edge of the screen.\n  */\n  top: 0;\n  left: 0;\n  z-index: 1000;\n  inline-size: var(--_floating-width);\n  max-inline-size: calc(100vw - 16px);\n  background-color: var(--_floating-bg);\n  border-radius: var(--_floating-radius);\n  box-shadow: var(--_floating-elevation);\n  overflow: hidden;\n  /* GPU compositing — keeps the panel sharp while transforming. */\n  will-change: transform;\n  /* Smooth resting transitions for elevation / shape changes; the\n     drag itself is driven by an inline transform with no transition\n     so the panel tracks the pointer 1:1. */\n  transition:\n    box-shadow var(--_elevation-duration) var(--_elevation-easing),\n    border-radius var(--_elevation-duration) var(--_elevation-easing);\n}\n\n/* When the panel is the floating variant, neutralise the inline-size\n   inherited from the base `:host { inline-size: 100% }` rule. */\n:host(.md-accordion--floating) {\n  inline-size: var(--_floating-width);\n}\n\n/* Lift while being dragged */\n:host(.md-accordion--floating-dragging) {\n  box-shadow: var(--_floating-elevation-active);\n  /* Subtle scale-up to confirm the grab */\n  transform-origin: top left;\n  cursor: grabbing;\n}\n\n/* Cancel the body's text selection while a drag is active. We can't\n   reach `body` from a shadow root, but `user-select: none` on the\n   host + drag-bar prevents the panel itself from picking up text. */\n:host(.md-accordion--floating-dragging) ::slotted(*) {\n  user-select: none;\n}\n\n/* When floating, the outer chassis already provides the surface —\n   filled items go flush so the panel reads as one card. We also\n   flatten the expanded shape so the secondary-container highlight\n   doesn't poke out past the chassis's rounded corners. */\n:host(.md-accordion--floating.md-accordion--filled) ::slotted(md-accordion-item) {\n  margin-block-end: 0;\n  --md-accordion-item-container-shape: 0;\n  --md-accordion-item-container-shape-expanded: 0;\n  --md-accordion-item-container-color: transparent;\n  --md-accordion-item-elevation: none;\n  --md-accordion-item-elevation-expanded: none;\n}\n\n/* Outlined floating: the chassis already supplies the bounding\n   surface and shadow — drop the inner outline so we keep one clean\n   silhouette. */\n:host(.md-accordion--floating.md-accordion--outlined) {\n  border: none;\n}\n\n/* ── A11y: respect reduced motion ─────────────────────────── */\n@media (prefers-reduced-motion: reduce) {\n  :host(.md-accordion--floating) {\n    transition: none;\n  }\n}\n\n/* ── A11y: forced-colors mode (Windows High Contrast) ─────── */\n@media (forced-colors: active) {\n  :host(.md-accordion--floating) {\n    border: 1px solid CanvasText;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  State,\n  Element,\n  Listen,\n  Watch,\n  Event,\n  EventEmitter,\n} from '@stencil/core';\n\nexport interface MdAccordionDragDetail {\n  /** Pointer X in viewport coordinates */\n  clientX: number;\n  /** Pointer Y in viewport coordinates */\n  clientY: number;\n  /** Accordion's current X translation (px) */\n  x: number;\n  /** Accordion's current Y translation (px) */\n  y: number;\n  /** Distance dragged since drag start, X */\n  dx: number;\n  /** Distance dragged since drag start, Y */\n  dy: number;\n}\n\nlet _floatingZ = 1000;\n\n@Component({\n  tag: 'md-accordion',\n  styleUrl: 'md-accordion.css',\n  shadow: true,\n})\nexport class MdAccordion {\n  @Element() el!: HTMLElement;\n\n  /**\n   * Visual variant. Both share the same expand/collapse mechanics.\n   * - `filled` (default) — each item is a tonal surface tile.\n   * - `outlined` — items share a single rounded chassis with an outline.\n   */\n  @Prop({ reflect: true }) variant: 'filled' | 'outlined' = 'filled';\n\n  /**\n   * Density scale: `0` (default, 56 dp headers), `-1` (48 dp),\n   * `-2` (40 dp).\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  /**\n   * MD3 elevation level applied to the surface — `0` (default, flat)\n   * through `5` (highest). In the `filled` variant each item gets its\n   * own shadow; in the `outlined` variant the shadow is drawn on the\n   * shared chassis. Expanded items lift to the next elevation level\n   * for an expressive \"lift off the page\" affordance.\n   */\n  @Prop({ reflect: true }) elevation: 0 | 1 | 2 | 3 | 4 | 5 = 0;\n\n  /**\n   * Allow drag-to-reorder of items via the leading drag handles. Items\n   * can also be reordered with `Alt + ArrowUp / ArrowDown` while the\n   * header is focused. Disabled items can't be moved.\n   */\n  @Prop({ reflect: true }) reorderable: boolean = false;\n\n  /**\n   * Render the accordion as a free-floating panel that can be dragged\n   * anywhere on the screen via the top drag-bar. The panel uses\n   * `position: fixed` and translates via CSS transform, so it lifts\n   * out of normal document flow.\n   */\n  @Prop({ reflect: true }) floating: boolean = false;\n\n  /**\n   * Initial X translation (px) for floating panels — measured in\n   * PHYSICAL viewport coordinates from the top-left corner of the\n   * viewport, so a positive value always moves the panel to the\n   * right regardless of writing direction (LTR or RTL). Default: 24.\n   */\n  @Prop({ attribute: 'initial-x' }) initialX: number = 24;\n\n  /**\n   * Initial Y translation (px) for floating panels — measured in\n   * physical viewport coordinates from the top-left corner. Default: 24.\n   */\n  @Prop({ attribute: 'initial-y' }) initialY: number = 24;\n\n  /**\n   * When a floating accordion starts being dragged, bring it to the\n   * front by bumping `z-index`. Disable if you manage stacking\n   * yourself.\n   */\n  @Prop({ attribute: 'bring-to-front' }) bringToFront: boolean = true;\n\n  /**\n   * Whether only one item may be expanded at a time. When `true`,\n   * expanding an item collapses any other expanded item.\n   */\n  @Prop({ reflect: true }) exclusive: boolean = false;\n\n  /**\n   * Require at least one item to remain expanded. APG variant: the\n   * implementation does not permit the currently-open panel to be\n   * collapsed when doing so would leave zero panels open. The locked-\n   * open button advertises `aria-disabled=\"true\"`. Pairs naturally\n   * with `exclusive` to enforce \"exactly one panel is always open\".\n   */\n  @Prop({ reflect: true, attribute: 'keep-one-expanded' }) keepOneExpanded: boolean = false;\n\n  /**\n   * ARIA heading level for each item's heading wrapper (`<h1>`–`<h6>`).\n   * Pick the value matching the page's information architecture — e.g.\n   * `2` inside a top-level page section, `4` deep inside a card. APG:\n   * \"aria-level that is appropriate for the information architecture\n   * of the page\". Default `3`.\n   */\n  @Prop({ attribute: 'heading-level' }) headingLevel: 1 | 2 | 3 | 4 | 5 | 6 = 3;\n\n  /**\n   * Region-role policy for panels:\n   * - `auto` (default) — applies `role=\"region\"` only when the item\n   *   count is at or below `region-threshold`, otherwise downgrades\n   *   to `role=\"group\"` to avoid landmark proliferation (per APG\n   *   recommendation for accordions with more than ~6 panels).\n   * - `always` — every panel is a landmark region.\n   * - `never` — no panel carries a region role (still labelled via\n   *   `aria-labelledby` though).\n   */\n  @Prop({ reflect: true }) region: 'auto' | 'always' | 'never' = 'auto';\n\n  /**\n   * Threshold above which `region=\"auto\"` downgrades panel roles\n   * from `region` to `group`. APG suggests ~6.\n   */\n  @Prop({ attribute: 'region-threshold' }) regionThreshold: number = 6;\n\n  /**\n   * Motion preset applied when items expand and collapse. The prop\n   * is reflected so the item CSS can pick it up via\n   * `:host-context(md-accordion[transition=\"…\"])`.\n   *\n   * - `expressive` (default) — full MD3 Expressive choreography:\n   *    asymmetric easing (decelerate-on-open, accelerate-on-close),\n   *    spring-spatial chevron rotation, container shape & elevation\n   *    morph, leading-icon FILL-axis swap. Use for hero surfaces,\n   *    settings shells, anything that wants to feel premium.\n   * - `standard` — MD3 standard easing (symmetric `emphasized`) with\n   *    no spring overshoot. Container morph still happens. The\n   *    \"neutral\" preset — good default for dense product UI.\n   * - `fade` — content fades in/out alongside the height animation\n   *    using shorter `standard` easing. Chevron rotates without a\n   *    spring. Best for content-heavy panels (forms, long copy)\n   *    where the motion should be unobtrusive.\n   * - `collapse` — pure height collapse with simple `ease-in-out`\n   *    timing — no spring, no morph, no fade. The classic\n   *    \"browser disclosure\" look.\n   * - `none` — disables every transition (instant snap). Useful for\n   *    automated tests, screenshot harnesses, or environments where\n   *    motion is undesirable.\n   */\n  @Prop({ reflect: true }) transition: 'expressive' | 'standard' | 'fade' | 'collapse' | 'none' = 'expressive';\n\n  /**\n   * Comma-separated list of item indexes that should be expanded on\n   * first render. Items with `expanded` set in their own attribute\n   * also count.\n   */\n  @Prop({ attribute: 'default-expanded' }) defaultExpanded: string = '';\n\n  /**\n   * Emitted when an item expands or collapses. Detail carries the\n   * full set of expanded indices.\n   */\n  @Event() mdToggle: EventEmitter<{\n    index: number;\n    expanded: boolean;\n    expandedIndices: number[];\n  }>;\n\n  /**\n   * Emitted when items are reordered via drag-and-drop or keyboard\n   * (Alt+ArrowUp / Alt+ArrowDown). `order` is the new index sequence\n   * relative to the original order, e.g. moving the item that was at\n   * index 0 to index 2 yields `order: [1, 2, 0]`.\n   */\n  @Event() mdReorder: EventEmitter<{\n    from: number;\n    to: number;\n    order: number[];\n  }>;\n\n  /** Emitted once a floating panel starts being dragged. */\n  @Event() mdDragStart: EventEmitter<MdAccordionDragDetail>;\n\n  /** Emitted continuously while a floating panel is being dragged. */\n  @Event() mdDragMove: EventEmitter<MdAccordionDragDetail>;\n\n  /** Emitted when a floating panel is released. */\n  @Event() mdDragEnd: EventEmitter<MdAccordionDragDetail>;\n\n  @State() private chassisX = 0;\n  @State() private chassisY = 0;\n  @State() private chassisDragging = false;\n\n  /**\n   * Geometry of the drop-target ghost shown in the dragged item's vacated\n   * slot during a pointer reorder — the same affordance md-list renders, so\n   * the two reorder surfaces read alike. `top` is measured from the\n   * accordion's own border box; `null` when no drag is active.\n   */\n  @State() private dropPlaceholder: { top: number; height: number } | null = null;\n\n  private items: HTMLMdAccordionItemElement[] = [];\n  private originalOrder: HTMLMdAccordionItemElement[] = [];\n  private dragState: {\n    item: HTMLMdAccordionItemElement;\n    pointerId: number;\n    startY: number;\n    startRects: DOMRect[];\n    shiftDistance: number;\n    /** Accordion border-box block-start at drag start — the placeholder origin. */\n    hostTop: number;\n    fromIndex: number;\n    currentTarget: number;\n  } | null = null;\n  private chassisDragState: {\n    pointerId: number;\n    startClientX: number;\n    startClientY: number;\n    startX: number;\n    startY: number;\n  } | null = null;\n\n  connectedCallback() {\n    this.collectItems();\n    this.el.addEventListener('pointerdown', this.onPointerDown);\n    this.el.addEventListener(\n      'mdItemRequestReorder',\n      this.onKeyboardReorder as EventListener,\n    );\n  }\n\n  disconnectedCallback() {\n    this.el.removeEventListener('pointerdown', this.onPointerDown);\n    this.el.removeEventListener(\n      'mdItemRequestReorder',\n      this.onKeyboardReorder as EventListener,\n    );\n    this.cancelDrag();\n  }\n\n  componentDidLoad() {\n    this.collectItems();\n    this.originalOrder = [...this.items];\n    // IMPORTANT: assign indexes BEFORE applying initial state. The\n    // child `@Watch('expanded')` fires synchronously and emits\n    // `mdItemToggle` carrying `this.index`, which the parent's\n    // exclusive-mode listener uses to decide which other items to\n    // collapse. If indexes are still -1 at that moment, the listener\n    // collapses every item — including the one we just expanded.\n    this.assignIndexes();\n    this.applyInitialState();\n    this.syncChildren();\n    // Seed floating-mode position from the initial-x / initial-y props.\n    if (this.floating) {\n      this.chassisX = this.initialX;\n      this.chassisY = this.initialY;\n      if (this.bringToFront) {\n        this.el.style.zIndex = String(++_floatingZ);\n      }\n    }\n  }\n\n  @Watch('floating')\n  onFloatingChange(value: boolean) {\n    if (value) {\n      this.chassisX = this.initialX;\n      this.chassisY = this.initialY;\n    } else {\n      this.chassisX = 0;\n      this.chassisY = 0;\n      this.el.style.zIndex = '';\n    }\n    // Toggle the chassis-drag glyph on / off the first item.\n    this.applyChassisHandleMarker();\n  }\n\n  @Watch('exclusive')\n  onExclusiveChange(value: boolean) {\n    if (!value) return;\n    // Switching INTO exclusive mode while multiple items are open is\n    // ambiguous; we keep the first expanded item open and collapse the\n    // rest so the resulting state is internally consistent.\n    let kept = false;\n    this.items.forEach((it) => {\n      if (it.expanded) {\n        if (kept) it.expanded = false;\n        else kept = true;\n      }\n    });\n  }\n\n  @Listen('mdItemToggle')\n  onChildToggle(e: CustomEvent<{ expanded: boolean; index: number }>) {\n    const { expanded, index } = e.detail;\n    if (this.exclusive && expanded) {\n      this.items.forEach((it, i) => {\n        if (i !== index) it.expanded = false;\n      });\n    }\n    // Recompute which item is locked-open after every state change, so\n    // `aria-disabled` and the click-guard stay in sync with reality.\n    this.syncCollapsible();\n    const expandedIndices = this.items\n      .map((it, i) => (it.expanded ? i : -1))\n      .filter((i) => i >= 0);\n    this.mdToggle.emit({ index, expanded, expandedIndices });\n  }\n\n  @Listen('mdItemRequestFocus')\n  onChildRequestFocus(\n    e: CustomEvent<{ direction: 'next' | 'prev' | 'first' | 'last'; from: number }>,\n  ) {\n    const { direction, from } = e.detail;\n    if (this.items.length === 0) return;\n    let target: number;\n    if (direction === 'first') target = 0;\n    else if (direction === 'last') target = this.items.length - 1;\n    else if (direction === 'next') target = (from + 1) % this.items.length;\n    else\n      target =\n        (from - 1 + this.items.length) % this.items.length;\n    this.items[target]?.focusHeader();\n  }\n\n  private collectItems() {\n    // Iterate direct children rather than using `:scope > md-accordion-item`.\n    // The CSS `:scope` pseudo-class is fully supported by modern browsers,\n    // but Stencil's mock-doc (Sizzle-based) and a handful of older test\n    // engines don't implement it — picking children manually keeps the\n    // semantics identical and lets the component remain unit-testable.\n    const out: HTMLMdAccordionItemElement[] = [];\n    const children = this.el.children;\n    for (let i = 0; i < children.length; i += 1) {\n      const node = children[i] as HTMLElement;\n      if (node && node.tagName === 'MD-ACCORDION-ITEM') {\n        out.push(node as HTMLMdAccordionItemElement);\n      }\n    }\n    this.items = out;\n  }\n\n  private assignIndexes() {\n    this.items.forEach((it, i) => {\n      it.setAttribute('data-index', String(i));\n    });\n    this.applyChassisHandleMarker();\n  }\n\n  /**\n   * In `floating` mode the chassis-drag affordance is tucked into the\n   * FIRST item rather than living in a dedicated bar. We mark that\n   * item with `data-chassis-handle` so its CSS reveals the grip glyph\n   * and the parent's pointerdown listener (which scans `composedPath`\n   * for `data-accordion-chassis-drag`) picks it up. The attribute is\n   * re-applied after every reorder so the marker follows whichever\n   * item is currently at position 0.\n   */\n  private applyChassisHandleMarker() {\n    this.items.forEach((it, i) => {\n      if (this.floating && i === 0) {\n        it.setAttribute('data-chassis-handle', '');\n      } else {\n        it.removeAttribute('data-chassis-handle');\n      }\n    });\n  }\n\n  /* ──────────────────────────────────────────────────────────\n     Drag-to-reorder\n     - Listens for pointerdown on the host (events from children\n       bubble across the shadow boundary via composedPath()).\n     - Uses snapshotted rects to compute drop target so the live\n       transforms applied during the drag don't confuse subsequent\n       hit-testing.\n     - Reorders DOM only once on drop; siblings animate into place\n       via the .md-accordion-item--shifting class.\n     ────────────────────────────────────────────────────────── */\n\n  private onPointerDown = (e: PointerEvent) => {\n    if (e.button !== 0) return;\n\n    const path = e.composedPath() as Array<EventTarget & { dataset?: DOMStringMap }>;\n\n    // Item-reorder takes precedence — the per-item drag handle lives\n    // INSIDE an item's shadow root and is matched by a data attribute.\n    if (this.reorderable) {\n      const handle = path.find(\n        (n) => (n as HTMLElement)?.dataset?.accordionDragHandle === 'true',\n      ) as HTMLElement | undefined;\n      if (handle) {\n        this.startItemDrag(e, path);\n        return;\n      }\n    }\n\n    // Free-form chassis drag — the affordance is a small grip on the\n    // first item that carries `data-accordion-chassis-drag`. Anything\n    // else (header click, headline tap, etc.) keeps its normal behaviour.\n    if (this.floating) {\n      const handle = path.find(\n        (n) => (n as HTMLElement)?.dataset?.accordionChassisDrag === 'true',\n      ) as HTMLElement | undefined;\n      if (handle) {\n        this.startChassisDrag(e);\n        return;\n      }\n    }\n  };\n\n  private startItemDrag(\n    e: PointerEvent,\n    path: Array<EventTarget & { dataset?: DOMStringMap }>,\n  ) {\n    const item = path.find(\n      (n) => (n as HTMLElement)?.tagName === 'MD-ACCORDION-ITEM',\n    ) as HTMLMdAccordionItemElement | undefined;\n    if (!item || item.hasAttribute('disabled')) return;\n\n    this.collectItems();\n    const fromIndex = this.items.indexOf(item);\n    if (fromIndex < 0 || this.items.length < 2) return;\n\n    e.preventDefault();\n\n    const startRects = this.items.map((it) => it.getBoundingClientRect());\n    // Distance to shift other items when the dragged one passes them.\n    // Use the gap between successive items (which already includes any\n    // CSS margin/border between siblings), falling back to the item's\n    // own height when there's only one neighbour.\n    const fromRect = startRects[fromIndex];\n    const refRect =\n      fromIndex < this.items.length - 1\n        ? startRects[fromIndex + 1]\n        : startRects[fromIndex - 1];\n    const shiftDistance =\n      refRect && fromIndex < this.items.length - 1\n        ? refRect.top - fromRect.top\n        : fromRect.top - (refRect?.top ?? fromRect.top);\n\n    const hostTop = this.el.getBoundingClientRect().top;\n\n    this.dragState = {\n      item,\n      pointerId: e.pointerId,\n      startY: e.clientY,\n      startRects,\n      shiftDistance: Math.abs(shiftDistance) || fromRect.height,\n      fromIndex,\n      currentTarget: fromIndex,\n      hostTop,\n    };\n\n    // Open the ghost slot where the item was lifted from; it then tracks the\n    // insertion point as the drag crosses sibling centres.\n    this.dropPlaceholder = {\n      top: fromRect.top - hostTop,\n      height: fromRect.height,\n    };\n\n    try {\n      this.el.setPointerCapture(e.pointerId);\n    } catch {\n      /* setPointerCapture is best-effort */\n    }\n    this.el.addEventListener('pointermove', this.onPointerMove);\n    this.el.addEventListener('pointerup', this.onPointerUp);\n    this.el.addEventListener('pointercancel', this.onPointerUp);\n\n    item.classList.add('md-accordion-item--dragging');\n    this.items.forEach((it) => {\n      if (it !== item) it.classList.add('md-accordion-item--shifting');\n    });\n  }\n\n  private startChassisDrag(e: PointerEvent) {\n    if (this.chassisDragState) return;\n    e.preventDefault();\n\n    this.chassisDragState = {\n      pointerId: e.pointerId,\n      startClientX: e.clientX,\n      startClientY: e.clientY,\n      startX: this.chassisX,\n      startY: this.chassisY,\n    };\n    this.chassisDragging = true;\n\n    if (this.bringToFront) {\n      this.el.style.zIndex = String(++_floatingZ);\n    }\n\n    try {\n      this.el.setPointerCapture(e.pointerId);\n    } catch {\n      /* best-effort */\n    }\n    this.el.addEventListener('pointermove', this.onChassisPointerMove);\n    this.el.addEventListener('pointerup', this.onChassisPointerUp);\n    this.el.addEventListener('pointercancel', this.onChassisPointerUp);\n\n    this.mdDragStart.emit({\n      clientX: e.clientX,\n      clientY: e.clientY,\n      x: this.chassisX,\n      y: this.chassisY,\n      dx: 0,\n      dy: 0,\n    });\n  }\n\n  private onChassisPointerMove = (e: PointerEvent) => {\n    const s = this.chassisDragState;\n    if (!s) return;\n    const dx = e.clientX - s.startClientX;\n    const dy = e.clientY - s.startClientY;\n\n    this.chassisX = s.startX + dx;\n    this.chassisY = s.startY + dy;\n\n    this.mdDragMove.emit({\n      clientX: e.clientX,\n      clientY: e.clientY,\n      x: this.chassisX,\n      y: this.chassisY,\n      dx,\n      dy,\n    });\n  };\n\n  private onChassisPointerUp = (e: PointerEvent) => {\n    const s = this.chassisDragState;\n    if (!s) return;\n\n    this.el.removeEventListener('pointermove', this.onChassisPointerMove);\n    this.el.removeEventListener('pointerup', this.onChassisPointerUp);\n    this.el.removeEventListener('pointercancel', this.onChassisPointerUp);\n    try {\n      this.el.releasePointerCapture(s.pointerId);\n    } catch {\n      /* best-effort */\n    }\n\n    const dx = e.clientX - s.startClientX;\n    const dy = e.clientY - s.startClientY;\n\n    this.chassisDragState = null;\n    this.chassisDragging = false;\n\n    this.mdDragEnd.emit({\n      clientX: e.clientX,\n      clientY: e.clientY,\n      x: this.chassisX,\n      y: this.chassisY,\n      dx,\n      dy,\n    });\n  };\n\n  private onPointerMove = (e: PointerEvent) => {\n    const s = this.dragState;\n    if (!s) return;\n\n    const dy = e.clientY - s.startY;\n    s.item.style.transform = `translateY(${dy}px)`;\n\n    const origRect = s.startRects[s.fromIndex];\n    const draggedCenter = origRect.top + origRect.height / 2 + dy;\n\n    let target = s.fromIndex;\n    if (dy > 0) {\n      for (let i = s.fromIndex + 1; i < this.items.length; i++) {\n        const r = s.startRects[i];\n        if (draggedCenter > r.top + r.height / 2) target = i;\n        else break;\n      }\n    } else if (dy < 0) {\n      for (let i = s.fromIndex - 1; i >= 0; i--) {\n        const r = s.startRects[i];\n        if (draggedCenter < r.top + r.height / 2) target = i;\n        else break;\n      }\n    }\n\n    if (target !== s.currentTarget) {\n      s.currentTarget = target;\n      this.applySiblingShifts();\n      // The vacated slot opens at the resting top of the item currently at the\n      // target index — the siblings in between have already shifted one step.\n      this.dropPlaceholder = {\n        top: s.startRects[target].top - s.hostTop,\n        height: s.startRects[s.fromIndex].height,\n      };\n    }\n  };\n\n  private applySiblingShifts() {\n    const s = this.dragState;\n    if (!s) return;\n    this.items.forEach((it, i) => {\n      if (it === s.item) return;\n      let offset = 0;\n      if (s.currentTarget > s.fromIndex && i > s.fromIndex && i <= s.currentTarget) {\n        offset = -s.shiftDistance;\n      } else if (\n        s.currentTarget < s.fromIndex &&\n        i < s.fromIndex &&\n        i >= s.currentTarget\n      ) {\n        offset = s.shiftDistance;\n      }\n      it.style.transform = offset ? `translateY(${offset}px)` : '';\n    });\n  }\n\n  private onPointerUp = (e: PointerEvent) => {\n    const s = this.dragState;\n    if (!s) return;\n\n    this.el.removeEventListener('pointermove', this.onPointerMove);\n    this.el.removeEventListener('pointerup', this.onPointerUp);\n    this.el.removeEventListener('pointercancel', this.onPointerUp);\n    try {\n      this.el.releasePointerCapture(e.pointerId);\n    } catch {\n      /* releasePointerCapture is best-effort */\n    }\n\n    this.items.forEach((it) => {\n      it.style.transform = '';\n      it.classList.remove('md-accordion-item--shifting');\n    });\n    s.item.classList.remove('md-accordion-item--dragging');\n\n    // Drop the ghost in the same tick the item settles — this path does NOT go\n    // through cancelDrag(), so clearing it there alone left it on screen after\n    // every successful drop.\n    this.dropPlaceholder = null;\n\n    if (s.currentTarget !== s.fromIndex) {\n      this.moveItem(s.fromIndex, s.currentTarget);\n      this.emitReorder(s.fromIndex, s.currentTarget);\n    }\n\n    this.dragState = null;\n  };\n\n  private cancelDrag() {\n    const s = this.dragState;\n    if (!s) return;\n    this.el.removeEventListener('pointermove', this.onPointerMove);\n    this.el.removeEventListener('pointerup', this.onPointerUp);\n    this.el.removeEventListener('pointercancel', this.onPointerUp);\n    this.items.forEach((it) => {\n      it.style.transform = '';\n      it.classList.remove('md-accordion-item--shifting');\n    });\n    s.item.classList.remove('md-accordion-item--dragging');\n    // Dropped in the same tick the item settles, so there is no leftover ghost\n    // and no flash between the drop and the re-layout.\n    this.dropPlaceholder = null;\n    this.dragState = null;\n  }\n\n  private moveItem(from: number, to: number) {\n    if (from === to) return;\n    const item = this.items[from];\n    if (!item) return;\n    const ref =\n      to > from\n        ? this.items[to].nextElementSibling\n        : this.items[to];\n    this.el.insertBefore(item, ref);\n    this.collectItems();\n    this.assignIndexes();\n  }\n\n  private emitReorder(from: number, to: number) {\n    // Re-express the new DOM order in terms of the original indices.\n    const order = this.items.map((it) => this.originalOrder.indexOf(it));\n    this.mdReorder.emit({ from, to, order });\n  }\n\n  private onKeyboardReorder = (\n    e: CustomEvent<{ direction: 'up' | 'down'; from: number }>,\n  ) => {\n    if (!this.reorderable) return;\n    const { direction, from } = e.detail;\n    const to = direction === 'up' ? from - 1 : from + 1;\n    if (to < 0 || to >= this.items.length) return;\n    this.moveItem(from, to);\n    this.items[to]?.focusHeader();\n    this.emitReorder(from, to);\n  };\n\n  private applyInitialState() {\n    // Parse the `default-expanded` attribute. Important: an EMPTY\n    // string splits to [''], which would map to [0] (because Number('')\n    // is 0), unintentionally auto-expanding the first item. Trim and\n    // drop blanks before converting.\n    const fromAttr = (this.defaultExpanded || '')\n      .split(',')\n      .map((s) => s.trim())\n      .filter((s) => s.length > 0)\n      .map((s) => Number(s))\n      .filter((n) => Number.isInteger(n) && n >= 0);\n\n    // Compute the FINAL expanded set up front. Setting `expanded` on\n    // children fires their @Watch which bubbles `mdItemToggle` and\n    // re-enters our @Listen — in exclusive mode that would race\n    // against ourselves and leave only the LAST item open. Computing\n    // the target set first sidesteps the race entirely.\n    const targetExpanded = new Set<number>();\n    this.items.forEach((it, i) => {\n      if (fromAttr.includes(i) || it.expanded) targetExpanded.add(i);\n    });\n\n    if (this.exclusive && targetExpanded.size > 1) {\n      // \"First wins\" — the lowest index stays open, the rest collapse.\n      const first = Math.min(...targetExpanded);\n      targetExpanded.clear();\n      targetExpanded.add(first);\n    }\n\n    // keep-one-expanded: if nothing would be open, force open the\n    // first non-disabled item so we never advertise an empty accordion\n    // as \"must keep one expanded\".\n    if (this.keepOneExpanded && targetExpanded.size === 0) {\n      const firstEnabled = this.items.findIndex((it) => !it.disabled);\n      if (firstEnabled >= 0) targetExpanded.add(firstEnabled);\n    }\n\n    // Single-pass apply so any subsequent @Listen entry sees the\n    // already-settled state.\n    this.items.forEach((it, i) => {\n      const should = targetExpanded.has(i);\n      if (it.expanded !== should) it.expanded = should;\n    });\n  }\n\n  /* ──────────────────────────────────────────────────────────\n     APG coordination helpers\n     - Heading level, region role, and collapsible flag are all\n       parent-orchestrated. We push them onto child items rather\n       than asking each child to look up to its parent.\n     ────────────────────────────────────────────────────────── */\n\n  private computeRegionRole(): 'region' | 'group' | 'none' {\n    if (this.region === 'always') return 'region';\n    if (this.region === 'never') return 'group';\n    // auto: degrade to `group` past the APG-recommended threshold to\n    // avoid landmark-region proliferation.\n    return this.items.length <= this.regionThreshold ? 'region' : 'group';\n  }\n\n  /** Push heading level and region role onto every child item. */\n  private syncChildren() {\n    const role = this.computeRegionRole();\n    this.items.forEach((it) => {\n      it.headingLevel = this.headingLevel;\n      it.regionRole = role;\n    });\n    this.syncCollapsible();\n  }\n\n  /**\n   * Recompute each item's `collapsible` flag based on `keep-one-expanded`.\n   * When that mode is on and exactly one item is open, that item is\n   * advertised as not-collapsible (aria-disabled + click guard).\n   */\n  private syncCollapsible() {\n    if (!this.keepOneExpanded) {\n      this.items.forEach((it) => (it.collapsible = true));\n      return;\n    }\n    const openItems = this.items.filter((it) => it.expanded);\n    if (openItems.length === 1) {\n      this.items.forEach((it) => (it.collapsible = it !== openItems[0]));\n    } else {\n      // Either zero (transient) or several — none locked open.\n      this.items.forEach((it) => (it.collapsible = true));\n    }\n  }\n\n  @Watch('headingLevel')\n  onHeadingLevelChange() {\n    this.syncChildren();\n  }\n\n  @Watch('region')\n  onRegionChange() {\n    this.syncChildren();\n  }\n\n  @Watch('regionThreshold')\n  onRegionThresholdChange() {\n    this.syncChildren();\n  }\n\n  @Watch('keepOneExpanded')\n  onKeepOneExpandedChange(value: boolean) {\n    if (value && !this.items.some((it) => it.expanded)) {\n      const first = this.items.find((it) => !it.disabled);\n      if (first) first.expanded = true;\n    }\n    this.syncCollapsible();\n  }\n\n  render() {\n    const floatingStyle = this.floating\n      ? {\n          transform: `translate3d(${this.chassisX}px, ${this.chassisY}px, 0)`,\n        }\n      : {};\n\n    return (\n      <Host\n        class={{\n          'md-accordion': true,\n          [`md-accordion--${this.variant}`]: true,\n          [`md-accordion--density-${Math.abs(this.density)}`]: this.density !== 0,\n          [`md-accordion--elevation-${this.elevation}`]: this.elevation > 0,\n          'md-accordion--floating': this.floating,\n          'md-accordion--floating-dragging': this.chassisDragging,\n        }}\n        role=\"presentation\"\n        style={floatingStyle}\n      >\n        {this.dropPlaceholder && (\n          <div\n            class=\"md-accordion__drop-placeholder\"\n            part=\"drop-placeholder\"\n            aria-hidden=\"true\"\n            style={{\n              transform: `translateY(${this.dropPlaceholder.top}px)`,\n              blockSize: `${this.dropPlaceholder.height}px`,\n            }}\n          ></div>\n        )}\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components-csr/md-app-bar.js

@@ -0,0 +1,2 @@
+import{p as a,H as e,c as i,h as r,d as t,t as s}from"./p-bSpXNc5J.js";import{d as n}from"./p-R_guULjT.js";import{d as l}from"./p-C3vB0Hd9.js";const d=()=>`:host{--_container-color:var(--md-app-bar-container-color, var(--md-sys-color-surface));--_container-color-scrolled:var(     --md-app-bar-container-color-scrolled,     var(--md-sys-color-surface-container)   );--_container-shape:var(--md-app-bar-container-shape, var(--md-sys-shape-corner-none));--_headline-color:var(--md-app-bar-headline-color, var(--md-sys-color-on-surface));--_subtitle-color:var(--md-app-bar-subtitle-color, var(--md-sys-color-on-surface-variant));--_leading-icon-color:var(--md-app-bar-leading-icon-color, var(--md-sys-color-on-surface));--_trailing-icon-color:var(--md-app-bar-trailing-icon-color, var(--md-sys-color-on-surface-variant));--_container-elevation:var(--md-app-bar-container-elevation, var(--md-sys-elevation-0));--_padding-inline-start:var(     --md-app-bar-padding-inline-start,     var(--md-app-bar-row-padding-inline, var(--md-sys-spacing-inset-xs, 4px))   );--_padding-inline-end:var(     --md-app-bar-padding-inline-end,     var(--md-app-bar-row-padding-inline, var(--md-sys-spacing-inset-xs, 4px))   );--_icon-gap:var(--md-app-bar-icon-gap, 0px);--_row-height:var(--md-app-bar-row-height, max(48px, calc(64px + var(--md-sys-density-scale, 0) * 4px)));--_icon-button-size:var(--md-app-bar-icon-button-size, max(32px, calc(48px + var(--md-sys-density-scale, 0) * 4px)));--_trailing-icon-touch-size:var(--md-app-bar-trailing-icon-touch-size, var(--_icon-button-size));--_trailing-gap:var(--md-app-bar-trailing-gap, 2px);--_row-padding-block-start:var(--md-app-bar-row-padding-block-start, 0px);--_icon-size:var(--md-app-bar-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));--_icon-size-handoff:var(--_icon-size);--_avatar-size:var(--md-app-bar-avatar-size, max(24px, calc(32px + var(--md-sys-density-scale, 0) * 2px)));--_expanded-padding-inline:var(--md-app-bar-expanded-padding-inline, var(--md-sys-spacing-inset-lg, 16px));--_expanded-padding-block-end:var(--md-app-bar-expanded-padding-block-end, var(--md-sys-spacing-inset-xl, 24px));--_search-container-color:var(     --md-app-bar-search-container-color,     var(--md-sys-color-surface-container-highest)   );--_search-container-color-scrolled:var(     --md-app-bar-search-container-color-scrolled,     var(--md-sys-color-surface-container)   );--_search-container-shape:var(     --md-app-bar-search-container-shape,     var(--md-sys-shape-corner-full)   );--_search-container-height:var(--md-app-bar-search-container-height, max(40px, calc(56px + var(--md-sys-density-scale, 0) * 4px)));--_search-padding-inline-start:var(--md-app-bar-search-padding-inline-start, var(--md-sys-spacing-inset-xl, 24px));--_search-padding-inline-end:var(--md-app-bar-search-padding-inline-end, var(--md-sys-spacing-inset-sm, 8px));--_search-row-gap:var(--md-app-bar-search-row-gap, var(--md-sys-spacing-gap-sm, 8px));--_search-trailing-gap:var(--md-app-bar-search-trailing-gap, var(--md-sys-spacing-gap-xs, 4px));--_search-field-trailing-gap:var(--md-app-bar-search-field-trailing-gap, 6px);--_trailing-touch-size:var(--md-app-bar-trailing-touch-size, max(32px, calc(48px + var(--md-sys-density-scale, 0) * 4px)));--_search-placeholder-color:var(     --md-app-bar-search-placeholder-color,     var(--md-sys-color-on-surface-variant)   );--_search-input-color:var(     --md-app-bar-search-input-color,     var(--md-sys-color-on-surface)   );--_search-trailing-icon-color:var(     --md-app-bar-search-trailing-icon-color,     var(--md-sys-color-on-surface-variant)   );display:block;inline-size:100%;max-inline-size:100%;min-inline-size:0;box-sizing:border-box;border-radius:var(--_container-shape);background-color:var(--_container-color);color:var(--_headline-color);box-shadow:var(--_container-elevation);z-index:var(--md-sys-z-index-app-bar, 100);position:sticky;inset-block-start:0;transition:background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),     box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard)}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}:host(.md-app-bar--scrolled){background-color:var(--_container-color-scrolled)}:host(.md-app-bar--scrolled) .md-app-bar__search{background-color:var(--_search-container-color-scrolled)}:host(.md-app-bar--flexible){display:flex;flex-direction:column;min-block-size:var(--_flex-expanded-height)}:host(.md-app-bar--medium){--_flex-expanded-height:var(--md-app-bar-medium-height, calc(112px + var(--md-sys-density-scale, 0) * 4px));--_expanded-padding-block-end:var(--md-sys-spacing-inset-xl, 24px)}:host(.md-app-bar--medium.md-app-bar--with-subtitle){--_flex-expanded-height:var(--md-app-bar-medium-height-with-subtitle, calc(136px + var(--md-sys-density-scale, 0) * 4px))}:host(.md-app-bar--large){--_flex-expanded-height:var(--md-app-bar-large-height, calc(120px + var(--md-sys-density-scale, 0) * 4px));--_expanded-padding-block-end:28px}:host(.md-app-bar--large:not(.md-app-bar--search)){--_row-padding-block-start:var(--md-app-bar-row-padding-block-start, 20px)}:host(.md-app-bar--large.md-app-bar--with-subtitle){--_flex-expanded-height:var(--md-app-bar-large-height-with-subtitle, calc(152px + var(--md-sys-density-scale, 0) * 4px))}.md-app-bar__row{display:flex;align-items:center;flex-shrink:0;block-size:var(--_row-height);min-block-size:var(--_row-height);padding-inline-start:var(--_padding-inline-start);padding-inline-end:var(--_padding-inline-end);padding-block-start:var(--_row-padding-block-start);gap:var(--_icon-gap)}:host(.md-app-bar--large:not(.md-app-bar--search)) .md-app-bar__row{align-items:flex-start}:host(.md-app-bar--center:not(.md-app-bar--search)) .md-app-bar__row{display:grid;grid-template-columns:minmax(var(--_icon-button-size), 1fr) minmax(0, auto) minmax(       var(--_icon-button-size),       1fr     );align-items:center;column-gap:var(--_icon-gap)}.md-app-bar__leading,.md-app-bar__trailing{display:inline-flex;align-items:center;flex-shrink:0;gap:0;color:var(--_leading-icon-color)}:host(.md-app-bar--center:not(.md-app-bar--search)) .md-app-bar__leading{justify-self:start}.md-app-bar__trailing{color:var(--_trailing-icon-color);margin-inline-start:auto;gap:var(--_trailing-gap)}:host(.md-app-bar--center:not(.md-app-bar--search)) .md-app-bar__trailing{justify-self:end;margin-inline-start:0}.md-app-bar__headline-inline{display:flex;flex-direction:column;justify-content:center;flex:1;min-inline-size:0;padding-inline:var(--md-sys-spacing-inset-md, 12px)}:host(.md-app-bar--center) .md-app-bar__headline-inline{flex:unset;justify-self:center;align-items:center;text-align:center;padding-inline:var(--md-sys-spacing-inset-sm, 8px)}:host(.md-app-bar--flexible) .md-app-bar__headline-inline{opacity:0;pointer-events:none}.md-app-bar__title{min-inline-size:0;font-family:var(--md-sys-typescale-title-large-font-family);font-size:max(16px, calc(22px + var(--md-sys-density-scale, 0) * 1px));font-weight:var(--md-sys-typescale-title-large-font-weight);line-height:max(22px, calc(28px + var(--md-sys-density-scale, 0) * 1px));letter-spacing:var(--md-sys-typescale-title-large-letter-spacing);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--_headline-color)}.md-app-bar__expanded{flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-inline:var(--_expanded-padding-inline);padding-block-end:var(--_expanded-padding-block-end);min-block-size:0;overflow:hidden}:host(.md-app-bar--center) .md-app-bar__expanded{align-items:center;text-align:center}:host(.md-app-bar--medium) .md-app-bar__expanded-headline,:host(.md-app-bar--large) .md-app-bar__expanded-headline{font-family:var(--md-sys-typescale-headline-medium-font-family);font-size:max(22px, calc(28px + var(--md-sys-density-scale, 0) * 1px));font-weight:var(--md-sys-typescale-headline-medium-font-weight);line-height:max(28px, calc(36px + var(--md-sys-density-scale, 0) * 2px));letter-spacing:var(--md-sys-typescale-headline-medium-letter-spacing);color:var(--_headline-color)}.md-app-bar__subtitle{margin-block-start:2px;font-family:var(--md-sys-typescale-label-large-font-family);font-size:max(12px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-label-large-font-weight);line-height:max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));letter-spacing:var(--md-sys-typescale-label-large-letter-spacing);color:var(--_subtitle-color)}:host(.md-app-bar--large) .md-app-bar__expanded .md-app-bar__subtitle{font-family:var(--md-sys-typescale-title-medium-font-family);font-size:max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-title-medium-font-weight);line-height:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));letter-spacing:var(--md-sys-typescale-title-medium-letter-spacing)}:host(.md-app-bar--search){container-type:inline-size}.md-app-bar__row--search{flex-shrink:0;gap:var(--_search-row-gap)}:host(.md-app-bar--search) .md-app-bar__leading{min-inline-size:var(--_icon-button-size)}:host(.md-app-bar--search) .md-app-bar__trailing{margin-inline-start:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-inline-size:var(--_trailing-touch-size);min-block-size:var(--_trailing-touch-size)}:host(.md-app-bar--search) .md-app-bar__search-input,:host(.md-app-bar--search) .md-app-bar__search-content{text-align:start}:host(.md-app-bar--search:not(.md-app-bar--center)) .md-app-bar__search-field{padding-inline-start:max(12px, var(--_search-padding-inline-start));padding-inline-end:0}:host(.md-app-bar--search:not(.md-app-bar--center)) .md-app-bar__search-input{padding-inline-start:max(12px, var(--_search-padding-inline-start));padding-inline-end:0}:host(.md-app-bar--search:not(.md-app-bar--center)) .md-app-bar__search-field:has(.md-app-bar__search-input){padding-inline-start:0}:host(.md-app-bar--search.md-app-bar--center) .md-app-bar__search-field{padding-inline-start:0;padding-inline-end:0}:host(.md-app-bar--search.md-app-bar--center) .md-app-bar__search-input::placeholder{text-align:center}:host(.md-app-bar--search.md-app-bar--center) .md-app-bar__search-input{padding-inline-start:max(12px, var(--_search-padding-inline-start));padding-inline-end:max(12px, var(--_search-padding-inline-start))}.md-app-bar__search-host{flex:1 1 auto;min-inline-size:0;display:flex;align-items:center;align-self:stretch;justify-content:center;overflow:visible}.md-app-bar__search{position:relative;display:flex;align-items:center;box-sizing:border-box;flex:1 1 auto;inline-size:100%;min-inline-size:0;margin-inline:0;align-self:center;block-size:var(--_search-container-height);padding-inline-start:0;padding-inline-end:0;gap:var(--_icon-gap);border-radius:var(--_search-container-shape);background-color:var(--_search-container-color);color:var(--_search-input-color);cursor:text;overflow:hidden;transition:background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),     box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard)}.md-app-bar__search:focus-within{overflow:visible}.md-app-bar__search>md-ripple{position:absolute;inset:0;border-radius:inherit;pointer-events:none;--md-ripple-grow-duration:var(--md-sys-motion-duration-short2);--md-ripple-grow-easing:var(--md-sys-motion-easing-standard);--md-ripple-extend-inline:0px}.md-app-bar__search-state-layer{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-color:var(--_search-input-color);opacity:0;transition:opacity var(--md-sys-motion-duration-short1) var(--md-sys-motion-easing-standard)}.md-app-bar__search:hover .md-app-bar__search-state-layer{opacity:var(--md-sys-state-hover-state-layer-opacity)}.md-app-bar__search:active .md-app-bar__search-state-layer{opacity:var(--md-sys-state-pressed-state-layer-opacity)}.md-app-bar__search--focus-ring{outline:3px solid var(--md-sys-color-secondary);outline-offset:2px}.md-app-bar__search-field{flex:1 1 auto;min-inline-size:0;display:flex;align-items:center;box-sizing:border-box;position:relative;z-index:1;padding-inline:0}.md-app-bar__search-input{flex:1 1 auto;min-inline-size:0;inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;border:0;outline:0;background:transparent;color:var(--_search-input-color);font-family:var(--md-sys-typescale-body-large-font-family);font-size:max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-body-large-font-weight);line-height:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));letter-spacing:var(--md-sys-typescale-body-large-letter-spacing);padding-block:0;padding-inline-end:0;padding-inline-start:0;margin:0;text-indent:0;box-sizing:border-box;appearance:none}.md-app-bar__search-input::placeholder{color:var(--_search-placeholder-color);opacity:1}.md-app-bar__search-input:disabled{cursor:not-allowed}.md-app-bar__search-content{flex:1 1 auto;min-inline-size:0;inline-size:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;padding-inline:0;margin:0}::slotted([slot='search']){inline-size:100%;min-inline-size:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;padding-inline:0;margin:0}.md-app-bar__search-trailing{display:inline-flex;align-items:center;flex-shrink:0;gap:var(--_search-trailing-gap);color:var(--_search-trailing-icon-color);position:relative;z-index:2;padding-inline:0;margin-inline:0}:host(.md-app-bar--with-search-trailing) .md-app-bar__search{padding-inline-end:var(--_search-padding-inline-end)}:host(.md-app-bar--with-search-trailing) .md-app-bar__search-trailing{margin-inline-start:var(--_search-field-trailing-gap)}::slotted([slot='search-trailing']){color:var(--_search-trailing-icon-color)}:host(.md-app-bar--search) ::slotted([slot='trailing']){color:var(--_trailing-icon-color)}:host(.md-app-bar--search-disabled) .md-app-bar__search,:host(.md-app-bar--search) .md-app-bar__search:has(.md-app-bar__search-input:disabled){cursor:not-allowed;opacity:0.38}:host(.md-app-bar--search-disabled) .md-app-bar__search-state-layer,:host(.md-app-bar--search) .md-app-bar__search:has(.md-app-bar__search-input:disabled) .md-app-bar__search-state-layer{display:none}@media (prefers-reduced-motion: reduce){.md-app-bar__search{transition-duration:0.01ms !important}}@container (max-width: 599px){:host(.md-app-bar--search:not(.md-app-bar--center)){--_search-padding-inline-start:min(16px, var(--_search-padding-inline-start))}:host(.md-app-bar--search) ::slotted([slot='search-trailing']:not(:first-of-type):not([data-compact-keep])){display:none}}@container (max-width: 399px){:host(.md-app-bar--search:not(.md-app-bar--center)){--_search-padding-inline-start:min(12px, var(--_search-padding-inline-start))}}@media (max-width: 599px){:host(.md-app-bar--search:not(.md-app-bar--center)){--_search-padding-inline-start:min(16px, var(--_search-padding-inline-start))}:host(.md-app-bar--search) ::slotted([slot='search-trailing']:not(:first-of-type):not([data-compact-keep])){display:none}}@media (max-width: 399px){:host(.md-app-bar--search:not(.md-app-bar--center)){--_search-padding-inline-start:min(12px, var(--_search-padding-inline-start))}}.md-app-bar__leading-button{flex-shrink:0;--md-icon-button-icon-size:var(--_icon-size-handoff);--md-icon-button-container-width:var(--_icon-button-size);--md-icon-button-container-height:var(--_icon-button-size);--md-icon-button-icon-color:var(--_leading-icon-color);--md-icon-button-state-layer-color:var(--_leading-icon-color)}::slotted([slot='leading']),::slotted([slot='trailing']),::slotted([slot='search-trailing']){flex-shrink:0;--md-icon-button-icon-size:var(--_icon-size-handoff);--md-icon-button-container-width:var(--_icon-button-size);--md-icon-button-container-height:var(--_icon-button-size)}::slotted([slot='leading']){--md-icon-button-icon-color:var(--_leading-icon-color);--md-icon-button-state-layer-color:var(--_leading-icon-color)}::slotted([slot='trailing']){--md-icon-button-icon-color:var(--_trailing-icon-color);--md-icon-button-state-layer-color:var(--_trailing-icon-color);--md-avatar-size:var(--_avatar-size)}::slotted([slot='trailing'][hidden]){display:none !important}::slotted([slot='search-trailing']){--md-icon-button-icon-color:var(--_search-trailing-icon-color);--md-icon-button-state-layer-color:var(--_search-trailing-icon-color)}:host-context([dir='rtl']) ::slotted([slot='leading'][data-directional]),:host([dir='rtl']) ::slotted([slot='leading'][data-directional]),:host-context([dir='rtl']) .md-app-bar__leading-button[data-directional],:host([dir='rtl']) .md-app-bar__leading-button[data-directional]{transform:scaleX(-1)}`;const o=a(class a extends e{constructor(a){super();if(a!==false){this.__registerHost()}this.__attachShadow();this.mdLeadingClick=i(this,"mdLeadingClick",7);this.mdSearchActivate=i(this,"mdSearchActivate",7);this.mdSearchInput=i(this,"mdSearchInput",7);this.variant="small";this.titleAlignment="start";this.searchPlaceholder="Search";this.searchValue="";this.searchAriaLabel="";this.searchDisabled=false;this.headline="";this.subtitle="";this.scrolled=false;this.density=0;this.leadingIcon="";this.leadingIconLabel="";this.hasSlottedLeading=false;this.hasSlottedHeadline=false;this.hasSlottedSubtitle=false;this.hasSlottedSearch=false;this.hasSlottedSearchTrailing=false;this.searchFocused=false;this.searchKeyboardModality=false;this.trackSearchKeyboardModality=()=>{this.searchKeyboardModality=true};this.trackSearchPointerModality=()=>{this.searchKeyboardModality=false};this.handleSearchContainerClick=()=>{if(this.searchDisabled)return;this.searchInput?.focus()};this.handleSearchInput=a=>{const e=a.target.value;this.searchValue=e;this.mdSearchInput.emit({value:e})};this.handleSearchFocus=()=>{if(this.searchDisabled)return;this.searchFocused=true;this.emitSearchActivate()};this.handleSearchBlur=()=>{this.searchFocused=false};this.handleSearchKeyDown=a=>{if(this.searchDisabled)return;if(a.key==="Enter"||a.key===" "){a.preventDefault();this.emitSearchActivate()}}}connectedCallback(){if(typeof document==="undefined")return;document.addEventListener("keydown",this.trackSearchKeyboardModality,true);document.addEventListener("pointerdown",this.trackSearchPointerModality,true)}disconnectedCallback(){if(typeof document==="undefined")return;document.removeEventListener("keydown",this.trackSearchKeyboardModality,true);document.removeEventListener("pointerdown",this.trackSearchPointerModality,true)}componentWillLoad(){this.hasSlottedLeading=this.el.querySelector('[slot="leading"]')!==null;this.hasSlottedHeadline=this.el.querySelector('[slot="headline"]')!==null;this.hasSlottedSubtitle=this.el.querySelector('[slot="subtitle"]')!==null;this.hasSlottedSearch=this.el.querySelector('[slot="search"]')!==null;this.hasSlottedSearchTrailing=this.el.querySelector('[slot="search-trailing"]')!==null}componentDidLoad(){const a=this.el.shadowRoot;if(!a)return;const e=a.querySelector('slot[name="leading"]');const i=a.querySelector('slot[name="headline"]');const r=a.querySelector('slot[name="subtitle"]');const t=a.querySelector('slot[name="search"]');const s=a.querySelector('slot[name="search-trailing"]');const n=a.querySelector('slot[name="trailing"]');const l=()=>{this.hasSlottedLeading=this.el.querySelector('[slot="leading"]')!==null||(e?.assignedElements().length??0)>0};const d=()=>{this.hasSlottedHeadline=this.el.querySelector('[slot="headline"]')!==null||(i?.assignedElements().length??0)>0};const o=()=>{this.hasSlottedSubtitle=this.el.querySelector('[slot="subtitle"]')!==null||(r?.assignedElements().length??0)>0};const p=()=>{this.hasSlottedSearch=this.el.querySelector('[slot="search"]')!==null||(t?.assignedElements().length??0)>0};const c=()=>{this.hasSlottedSearchTrailing=this.el.querySelector('[slot="search-trailing"]')!==null||(s?.assignedElements().length??0)>0};const h=()=>this.enforceTrailingSlotLimit(n);e?.addEventListener("slotchange",l);i?.addEventListener("slotchange",d);r?.addEventListener("slotchange",o);t?.addEventListener("slotchange",p);s?.addEventListener("slotchange",c);n?.addEventListener("slotchange",h);h()}enforceTrailingSlotLimit(e){const i=e?.assignedElements({flatten:true})??[];if(i.length>a.MAX_TRAILING_ICONS){console.warn(`[md-app-bar] The trailing slot supports at most ${a.MAX_TRAILING_ICONS} action icons; `+`${i.length} were provided. Icons beyond the limit are hidden.`)}i.forEach(((e,i)=>{const r=e;if(i>=a.MAX_TRAILING_ICONS){r.hidden=true}else if(r.hidden){r.hidden=false}}))}isFlexible(){return this.variant==="medium"||this.variant==="large"}isSearchVariant(){return this.variant==="search"}hasHeadlineContent(){return Boolean(this.headline)||this.hasSlottedHeadline}effectiveSearchLabel(){return this.searchAriaLabel||this.searchPlaceholder||"Search"}emitSearchActivate(){if(this.searchDisabled)return;this.mdSearchActivate.emit({value:this.searchValue})}hasSubtitleContent(){return Boolean(this.subtitle)||this.hasSlottedSubtitle}renderLeadingFallback(){const a=Boolean(this.leadingIcon)&&!this.hasSlottedLeading;if(!a)return null;return r("md-icon-button",{class:"md-app-bar__leading-button",exportparts:"icon, state-layer",part:"leading-icon",icon:this.leadingIcon,variant:"standard",size:"md",buttonWidth:"narrow","aria-label":this.leadingIconLabel||undefined,onClick:a=>this.mdLeadingClick.emit(a)})}renderInlineHeadline(){const a=this.isFlexible();const e=this.headline?r("span",{class:"md-app-bar__title",part:"title"},this.headline):a?null:this.hasSlottedHeadline?r("span",{class:"md-app-bar__title",part:"title"},r("slot",{name:"headline"})):null;const i=!this.hasSubtitleContent()?null:this.subtitle?r("span",{class:"md-app-bar__subtitle md-app-bar__subtitle--inline",part:"subtitle"},this.subtitle):a?null:r("span",{class:"md-app-bar__subtitle md-app-bar__subtitle--inline",part:"subtitle"},r("slot",{name:"subtitle"}));if(!e&&!i)return null;return r("span",{class:"md-app-bar__headline-inline","aria-hidden":a?"true":null},e,i)}renderExpandedHeadline(){if(this.headline){return r("span",{class:"md-app-bar__expanded-headline",part:"expanded-headline"},this.headline)}return r("span",{class:"md-app-bar__expanded-headline",part:"expanded-headline"},r("slot",{name:"headline"}))}renderExpandedSubtitle(){if(this.subtitle){return r("span",{class:"md-app-bar__subtitle",part:"subtitle"},this.subtitle)}return r("span",{class:"md-app-bar__subtitle",part:"subtitle"},r("slot",{name:"subtitle"}))}renderSearchField(){return r("div",{class:"md-app-bar__search-host",part:"search-host"},r("div",{class:{"md-app-bar__search":true,"md-app-bar__search--focused":this.searchFocused,"md-app-bar__search--focus-ring":this.searchFocused&&this.searchKeyboardModality},part:"search",onClick:this.handleSearchContainerClick},!this.searchDisabled&&r("md-ripple",{disabled:this.searchDisabled}),r("span",{class:"md-app-bar__search-state-layer",part:"search-state-layer","aria-hidden":"true"}),this.hasSlottedSearch?r("span",{class:"md-app-bar__search-field",part:"search-field"},r("span",{class:"md-app-bar__search-content",part:"search-content"},r("slot",{name:"search"}))):r("span",{class:"md-app-bar__search-field",part:"search-field"},r("input",{ref:a=>this.searchInput=a,class:"md-app-bar__search-input",part:"search-input",type:"text",inputMode:"search",enterKeyHint:"search",role:"searchbox",value:this.searchValue,placeholder:this.searchPlaceholder,disabled:this.searchDisabled,"aria-label":this.effectiveSearchLabel(),autocomplete:"off",spellcheck:false,onInput:this.handleSearchInput,onFocus:this.handleSearchFocus,onBlur:this.handleSearchBlur,onKeyDown:this.handleSearchKeyDown})),r("span",{class:"md-app-bar__search-trailing",part:"search-trailing"},r("slot",{name:"search-trailing"}))))}renderSearchTop(){return r("div",{class:"md-app-bar__row md-app-bar__row--search",part:"row"},r("span",{class:"md-app-bar__leading",part:"leading"},r("slot",{name:"leading"}),this.renderLeadingFallback()),this.renderSearchField(),r("span",{class:"md-app-bar__trailing",part:"trailing"},r("slot",{name:"trailing"})))}renderTop(){if(this.isSearchVariant()){return this.renderSearchTop()}const a=this.isFlexible();return[r("div",{class:"md-app-bar__row",part:"row"},r("span",{class:"md-app-bar__leading",part:"leading"},r("slot",{name:"leading"}),this.renderLeadingFallback()),this.renderInlineHeadline(),r("span",{class:"md-app-bar__trailing",part:"trailing"},r("slot",{name:"trailing"}))),a&&r("div",{class:"md-app-bar__expanded",part:"expanded"},this.renderExpandedHeadline(),this.hasSubtitleContent()&&this.renderExpandedSubtitle())]}render(){const a=this.isFlexible();const e=this.isSearchVariant();const i=this.titleAlignment==="center";return r(t,{key:"85ee3b31e44fffe17f0553e70589b7420488c89f",class:{"md-app-bar":true,[`md-app-bar--${this.variant}`]:true,"md-app-bar--flexible":a,"md-app-bar--center":i,"md-app-bar--search":e,"md-app-bar--with-subtitle":!e&&this.hasSubtitleContent(),"md-app-bar--search-focused":e&&this.searchFocused,"md-app-bar--search-disabled":e&&this.searchDisabled,"md-app-bar--with-search-trailing":e&&this.hasSlottedSearchTrailing,"md-app-bar--scrolled":this.scrolled,[`md-app-bar--density${this.density}`]:this.density!==0},role:"banner"},this.renderTop())}get el(){return this}static get style(){return d()}},[257,"md-app-bar",{variant:[513],titleAlignment:[513,"title-alignment"],searchPlaceholder:[1,"search-placeholder"],searchValue:[1537,"search-value"],searchAriaLabel:[1,"search-aria-label"],searchDisabled:[516,"search-disabled"],headline:[513],subtitle:[513],scrolled:[516],density:[514],leadingIcon:[1,"leading-icon"],leadingIconLabel:[1,"leading-icon-label"],hasSlottedLeading:[32],hasSlottedHeadline:[32],hasSlottedSubtitle:[32],hasSlottedSearch:[32],hasSlottedSearchTrailing:[32],searchFocused:[32],searchKeyboardModality:[32]}]);o.MAX_TRAILING_ICONS=3;function p(){if(typeof customElements==="undefined"){return}const a=["md-app-bar","md-icon-button","md-ripple"];a.forEach((a=>{switch(a){case"md-app-bar":if(!customElements.get(s(a))){customElements.define(s(a),o)}break;case"md-icon-button":if(!customElements.get(s(a))){n()}break;case"md-ripple":if(!customElements.get(s(a))){l()}break}}))}p();const c=o;const h=p;export{c as MdAppBar,h as defineCustomElement};
+//# sourceMappingURL=md-app-bar.js.map

package/dist/components-csr/md-app-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mdAppBarCss","MdAppBar","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","titleAlignment","searchPlaceholder","searchValue","searchAriaLabel","searchDisabled","headline","subtitle","scrolled","density","leadingIcon","leadingIconLabel","hasSlottedLeading","hasSlottedHeadline","hasSlottedSubtitle","hasSlottedSearch","hasSlottedSearchTrailing","searchFocused","searchKeyboardModality","trackSearchKeyboardModality","trackSearchPointerModality","handleSearchContainerClick","searchInput","focus","handleSearchInput","event","next","target","value","mdSearchInput","emit","handleSearchFocus","emitSearchActivate","handleSearchBlur","handleSearchKeyDown","key","preventDefault","connectedCallback","document","addEventListener","disconnectedCallback","removeEventListener","componentWillLoad","el","querySelector","componentDidLoad","shadow","shadowRoot","leadingSlot","headlineSlot","subtitleSlot","searchSlot","searchTrailingSlot","trailingSlot","syncLeading","assignedElements","length","syncHeadline","syncSubtitle","syncSearch","syncSearchTrailing","syncTrailing","enforceTrailingSlotLimit","assigned","flatten","MAX_TRAILING_ICONS","console","warn","forEach","node","index","hidden","isFlexible","isSearchVariant","hasHeadlineContent","Boolean","effectiveSearchLabel","mdSearchActivate","hasSubtitleContent","renderLeadingFallback","showFallback","h","class","exportparts","part","icon","size","buttonWidth","undefined","onClick","mdLeadingClick","renderInlineHeadline","flexible","titleNode","name","subtitleNode","renderExpandedHeadline","renderExpandedSubtitle","renderSearchField","disabled","ref","type","inputMode","enterKeyHint","role","placeholder","autocomplete","spellcheck","onInput","onFocus","onBlur","onKeyDown","renderSearchTop","renderTop","render","search","centered","Host"],"sources":["src/components/md-app-bar/md-app-bar.css?tag=md-app-bar&encapsulation=shadow","src/components/md-app-bar/md-app-bar.tsx"],"sourcesContent":["/* ==========================================================\n   md-app-bar — Material Design 3 App Bar\n   Spec: https://m3.material.io/components/app-bars/specs\n\n   PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n     --md-app-bar-container-color              Top bar background (flat → surface)\n     --md-app-bar-container-color-scrolled     Top bar background when scrolled (surface-container)\n     --md-app-bar-container-shape              Top bar container corner radius (none)\n     --md-app-bar-headline-color               Headline / title colour (on-surface)\n     --md-app-bar-subtitle-color               Subtitle colour (on-surface-variant)\n     --md-app-bar-leading-icon-color           Leading icon colour (on-surface)\n     --md-app-bar-trailing-icon-color          Trailing icon colour (on-surface-variant)\n     --md-app-bar-container-elevation          Container shadow (elevation-0 default)\n     --md-app-bar-row-height                   Action row height (64dp)\n     --md-app-bar-padding-inline-start         Action row inline-start padding (4dp)\n     --md-app-bar-padding-inline-end           Action row inline-end padding (4dp)\n     --md-app-bar-row-padding-inline           Deprecated alias for both paddings (4dp)\n     --md-app-bar-row-padding-block-start      Action row block-start padding (20dp large expanded)\n     --md-app-bar-trailing-gap                 Gap between trailing action icons (2dp)\n     --md-app-bar-trailing-icon-touch-size     Trailing icon touch target (48dp; matches leading)\n     --md-app-bar-icon-gap                     Gap between icons and row content (0)\n     --md-app-bar-icon-size                    Icon glyph size in action row (24dp,\n                                               tapers with density; set to opt out)\n     --md-app-bar-avatar-size                  Avatar size in trailing slots (32dp)\n     --md-app-bar-expanded-padding-inline      Inline padding of expanded title block\n     --md-app-bar-expanded-padding-block-end   Block-end padding of expanded title block\n     --md-app-bar-medium-height                Medium expanded height, no subtitle (112dp)\n     --md-app-bar-medium-height-with-subtitle  Medium expanded height, with subtitle (136dp)\n     --md-app-bar-large-height                 Large expanded height, no subtitle (120dp)\n     --md-app-bar-large-height-with-subtitle   Large expanded height, with subtitle (152dp)\n     --md-app-bar-icon-button-size             Leading icon touch target (48dp)\n     --md-app-bar-search-container-color       Search pill resting fill (surface-container-highest)\n     --md-app-bar-search-container-color-scrolled\n                                               Search pill fill when scrolled (surface-container)\n     --md-app-bar-search-container-shape       Search field border-radius\n     --md-app-bar-search-container-height      Search field block-size (56dp)\n     --md-app-bar-search-padding-inline-start  Search hint inline-start padding (24dp default)\n     --md-app-bar-search-padding-inline-end    Search pill inline-end padding after in-pill icons (8dp)\n     --md-app-bar-search-row-gap               Gap between leading, pill bay, and trailing (8dp)\n     --md-app-bar-search-trailing-gap          Gap between in-pill trailing icons — mic ↔ sparkle (4dp)\n     --md-app-bar-search-field-trailing-gap    Gap between hint field and in-pill trailing cluster (6dp; fits focus ring)\n     --md-app-bar-trailing-touch-size          Outside trailing touch target — avatar area (48dp)\n     --md-app-bar-search-placeholder-color     Hint / placeholder colour (on-surface-variant)\n     --md-app-bar-search-input-color           Typed search text colour (on-surface)\n     --md-app-bar-search-trailing-icon-color   Icons inside the search field (on-surface-variant)\n\n   CSS PARTS:\n     row                 Top action row (leading | title | trailing)\n     leading             Leading slot wrapper\n     leading-icon        Prop-based leading md-icon-button\n     icon                Leading icon glyph (exported from leading-icon)\n     state-layer         Leading icon state layer (exported from leading-icon)\n     title               Inline title (small variant)\n     trailing            Trailing slot wrapper (outside search field)\n     search-host         Flex region between leading/trailing (search variant)\n     search              Search pill container (search variant)\n     search-state-layer  Hover / focus / press overlay on search field\n     search-field        Text/input flex region inside pill (hint padding)\n     search-input        Inline search `<input>` (search variant)\n     search-content      Wrapper around slotted `search` content\n     search-trailing     Trailing slot inside the search field\n     expanded            Expanded title block wrapper (medium / large)\n     expanded-headline   Expanded headline text (headline-medium)\n     subtitle            Subtitle text (inline on small, expanded on medium/large)\n\n   SLOTS:\n     leading             Leading navigation icon(s) — slot takes priority over leading-icon prop\n     headline            Custom headline content (overrides headline prop)\n     subtitle            Custom subtitle content (overrides subtitle prop)\n     trailing            Trailing action icons outside search field (max 3; excess hidden + warn)\n     search              Replace built-in search input (search configuration)\n     search-trailing     In-pill trailing icons (e.g. mic); data-compact-keep opts out of compact hide\n     Slotted directional icons may use data-directional for RTL mirroring.\n\n   RESPONSIVE (search variant, container + viewport):\n     < 600dp  — hint inset 16dp, hide 2nd+ search-trailing (data-compact-keep opts out)\n     < 400dp  — hint inset 12dp\n   ========================================================== */\n\n:host {\n  /* ── Color roles (M3 app bar common colors) ─────────────── */\n  --_container-color: var(--md-app-bar-container-color, var(--md-sys-color-surface));\n  --_container-color-scrolled: var(\n    --md-app-bar-container-color-scrolled,\n    var(--md-sys-color-surface-container)\n  );\n  --_container-shape: var(--md-app-bar-container-shape, var(--md-sys-shape-corner-none));\n  --_headline-color: var(--md-app-bar-headline-color, var(--md-sys-color-on-surface));\n  --_subtitle-color: var(--md-app-bar-subtitle-color, var(--md-sys-color-on-surface-variant));\n  --_leading-icon-color: var(--md-app-bar-leading-icon-color, var(--md-sys-color-on-surface));\n  --_trailing-icon-color: var(--md-app-bar-trailing-icon-color, var(--md-sys-color-on-surface-variant));\n  --_container-elevation: var(--md-app-bar-container-elevation, var(--md-sys-elevation-0));\n\n  /* ── Spacing (M3 app bar spacing) ───────────────────────── */\n  --_padding-inline-start: var(\n    --md-app-bar-padding-inline-start,\n    var(--md-app-bar-row-padding-inline, var(--md-sys-spacing-inset-xs, 4px))\n  );\n  --_padding-inline-end: var(\n    --md-app-bar-padding-inline-end,\n    var(--md-app-bar-row-padding-inline, var(--md-sys-spacing-inset-xs, 4px))\n  );\n  --_icon-gap: var(--md-app-bar-icon-gap, 0px);\n\n  /* ── Size (M3 app bar size) — density-aware via --md-sys-density-scale ── */\n  --_row-height: var(--md-app-bar-row-height, max(48px, calc(64px + var(--md-sys-density-scale, 0) * 4px)));\n  --_icon-button-size: var(--md-app-bar-icon-button-size, max(32px, calc(48px + var(--md-sys-density-scale, 0) * 4px)));\n  --_trailing-icon-touch-size: var(--md-app-bar-trailing-icon-touch-size, var(--_icon-button-size));\n  --_trailing-gap: var(--md-app-bar-trailing-gap, 2px);\n  --_row-padding-block-start: var(--md-app-bar-row-padding-block-start, 0px);\n  /* 1px per rung off 24dp (18px floor) — the library-wide icon taper. Feeds\n     --md-icon-button-icon-size for the leading/trailing buttons further down,\n     so the glyphs shrink with the row instead of sitting oversized in it. */\n  --_icon-size: var(--md-app-bar-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));\n  /* Hand-off alias — DO NOT inline `--_icon-size` into the md-icon-button rules\n     below. md-icon-button ALSO defines a private `--_icon-size`, as\n     `var(--md-icon-button-icon-size, …)`. A `--md-icon-button-icon-size:\n     var(--_icon-size)` declaration is resolved against the BUTTON's custom\n     properties, so it would read the button's own `--_icon-size` — the two\n     reference each other, the cycle is invalid at computed-value time, and BOTH\n     collapse to guaranteed-invalid (the glyph silently falls back to 24px at\n     every density rung). This alias is resolved here, in the app bar's own\n     context, so what crosses the boundary is a plain length. `--_icon-button-size`\n     needs no alias: md-icon-button doesn't define that name. */\n  --_icon-size-handoff: var(--_icon-size);\n  --_avatar-size: var(--md-app-bar-avatar-size, max(24px, calc(32px + var(--md-sys-density-scale, 0) * 2px)));\n\n  --_expanded-padding-inline: var(--md-app-bar-expanded-padding-inline, var(--md-sys-spacing-inset-lg, 16px));\n  --_expanded-padding-block-end: var(--md-app-bar-expanded-padding-block-end, var(--md-sys-spacing-inset-xl, 24px));\n\n  /* ── Search pill colors + spacing ───────────────────────── */\n  --_search-container-color: var(\n    --md-app-bar-search-container-color,\n    var(--md-sys-color-surface-container-highest)\n  );\n  --_search-container-color-scrolled: var(\n    --md-app-bar-search-container-color-scrolled,\n    var(--md-sys-color-surface-container)\n  );\n  --_search-container-shape: var(\n    --md-app-bar-search-container-shape,\n    var(--md-sys-shape-corner-full)\n  );\n  --_search-container-height: var(--md-app-bar-search-container-height, max(40px, calc(56px + var(--md-sys-density-scale, 0) * 4px)));\n  --_search-padding-inline-start: var(--md-app-bar-search-padding-inline-start, var(--md-sys-spacing-inset-xl, 24px));\n  --_search-padding-inline-end: var(--md-app-bar-search-padding-inline-end, var(--md-sys-spacing-inset-sm, 8px));\n  --_search-row-gap: var(--md-app-bar-search-row-gap, var(--md-sys-spacing-gap-sm, 8px));\n  --_search-trailing-gap: var(--md-app-bar-search-trailing-gap, var(--md-sys-spacing-gap-xs, 4px));\n  --_search-field-trailing-gap: var(--md-app-bar-search-field-trailing-gap, 6px);\n  --_trailing-touch-size: var(--md-app-bar-trailing-touch-size, max(32px, calc(48px + var(--md-sys-density-scale, 0) * 4px)));\n  --_search-placeholder-color: var(\n    --md-app-bar-search-placeholder-color,\n    var(--md-sys-color-on-surface-variant)\n  );\n  --_search-input-color: var(\n    --md-app-bar-search-input-color,\n    var(--md-sys-color-on-surface)\n  );\n  --_search-trailing-icon-color: var(\n    --md-app-bar-search-trailing-icon-color,\n    var(--md-sys-color-on-surface-variant)\n  );\n  display: block;\n  inline-size: 100%;\n  max-inline-size: 100%;\n  min-inline-size: 0;\n  box-sizing: border-box;\n  border-radius: var(--_container-shape);\n  background-color: var(--_container-color);\n  color: var(--_headline-color);\n  box-shadow: var(--_container-elevation);\n  z-index: var(--md-sys-z-index-app-bar, 100);\n  position: sticky;\n  inset-block-start: 0;\n  transition:\n    background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),\n    box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);\n}\n\n/* ── Density ───────────────────────────────────────────── */\n\n:host([density='-1']) { --md-sys-density-scale: -1; }\n:host([density='-2']) { --md-sys-density-scale: -2; }\n:host([density='-3']) { --md-sys-density-scale: -3; }\n:host([density='-4']) { --md-sys-density-scale: -4; }\n\n\n/* Scrolled surface — M3 app bar common-colors (surface → surface-container). */\n:host(.md-app-bar--scrolled) {\n  background-color: var(--_container-color-scrolled);\n}\n\n:host(.md-app-bar--scrolled) .md-app-bar__search {\n  background-color: var(--_search-container-color-scrolled);\n}\n\n/* ── Medium / large expanded layouts ────────────────────── */\n\n:host(.md-app-bar--flexible) {\n  display: flex;\n  flex-direction: column;\n  min-block-size: var(--_flex-expanded-height);\n}\n\n:host(.md-app-bar--medium) {\n  --_flex-expanded-height: var(--md-app-bar-medium-height, calc(112px + var(--md-sys-density-scale, 0) * 4px));\n  --_expanded-padding-block-end: var(--md-sys-spacing-inset-xl, 24px);\n}\n\n:host(.md-app-bar--medium.md-app-bar--with-subtitle) {\n  --_flex-expanded-height: var(--md-app-bar-medium-height-with-subtitle, calc(136px + var(--md-sys-density-scale, 0) * 4px));\n}\n\n:host(.md-app-bar--large) {\n  --_flex-expanded-height: var(--md-app-bar-large-height, calc(120px + var(--md-sys-density-scale, 0) * 4px));\n  --_expanded-padding-block-end: 28px;\n}\n\n:host(.md-app-bar--large:not(.md-app-bar--search)) {\n  --_row-padding-block-start: var(--md-app-bar-row-padding-block-start, 20px);\n}\n\n:host(.md-app-bar--large.md-app-bar--with-subtitle) {\n  --_flex-expanded-height: var(--md-app-bar-large-height-with-subtitle, calc(152px + var(--md-sys-density-scale, 0) * 4px));\n}\n\n.md-app-bar__row {\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n  block-size: var(--_row-height);\n  min-block-size: var(--_row-height);\n  padding-inline-start: var(--_padding-inline-start);\n  padding-inline-end: var(--_padding-inline-end);\n  padding-block-start: var(--_row-padding-block-start);\n  gap: var(--_icon-gap);\n}\n\n:host(.md-app-bar--large:not(.md-app-bar--search)) .md-app-bar__row {\n  align-items: flex-start;\n}\n\n/* Centered-title configuration (replaces the old center-aligned variant).\n   Scoped to non-search bars; search bars use start-aligned input text with an\n   optional centred placeholder when empty (see search section). */\n:host(.md-app-bar--center:not(.md-app-bar--search)) .md-app-bar__row {\n  display: grid;\n  grid-template-columns: minmax(var(--_icon-button-size), 1fr) minmax(0, auto) minmax(\n      var(--_icon-button-size),\n      1fr\n    );\n  align-items: center;\n  column-gap: var(--_icon-gap);\n}\n\n.md-app-bar__leading,\n.md-app-bar__trailing {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  gap: 0;\n  color: var(--_leading-icon-color);\n}\n\n:host(.md-app-bar--center:not(.md-app-bar--search)) .md-app-bar__leading {\n  justify-self: start;\n}\n\n.md-app-bar__trailing {\n  color: var(--_trailing-icon-color);\n  margin-inline-start: auto;\n  gap: var(--_trailing-gap);\n}\n\n:host(.md-app-bar--center:not(.md-app-bar--search)) .md-app-bar__trailing {\n  justify-self: end;\n  margin-inline-start: 0;\n}\n\n/* Inline headline block — title (+ optional subtitle) within the row. */\n.md-app-bar__headline-inline {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  flex: 1;\n  min-inline-size: 0;\n  padding-inline: var(--md-sys-spacing-inset-md, 12px);\n}\n\n:host(.md-app-bar--center) .md-app-bar__headline-inline {\n  flex: unset;\n  justify-self: center;\n  align-items: center;\n  text-align: center;\n  padding-inline: var(--md-sys-spacing-inset-sm, 8px);\n}\n\n:host(.md-app-bar--flexible) .md-app-bar__headline-inline {\n  opacity: 0;\n  pointer-events: none;\n}\n\n.md-app-bar__title {\n  min-inline-size: 0;\n  font-family: var(--md-sys-typescale-title-large-font-family);\n  /* Density taper on title-large (22/28). Same rates md-dialog uses for this\n     typescale, so an app bar headline and a dialog headline stay in step. */\n  font-size: max(16px, calc(22px + var(--md-sys-density-scale, 0) * 1px));\n  font-weight: var(--md-sys-typescale-title-large-font-weight);\n  line-height: max(22px, calc(28px + var(--md-sys-density-scale, 0) * 1px));\n  letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  color: var(--_headline-color);\n}\n\n.md-app-bar__expanded {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: flex-end;\n  padding-inline: var(--_expanded-padding-inline);\n  padding-block-end: var(--_expanded-padding-block-end);\n  min-block-size: 0;\n  overflow: hidden;\n}\n\n:host(.md-app-bar--center) .md-app-bar__expanded {\n  align-items: center;\n  text-align: center;\n}\n\n/* Medium and large share the headline-medium (28/36) expanded headline — one\n   rule instead of two identical ones, so the density taper can't drift apart.\n   Rates follow the library's large-typescale pattern: 1px/rung on the size,\n   2px/rung on the line-height (the same shape md-dialog uses for 24/32). */\n:host(.md-app-bar--medium) .md-app-bar__expanded-headline,\n:host(.md-app-bar--large) .md-app-bar__expanded-headline {\n  font-family: var(--md-sys-typescale-headline-medium-font-family);\n  font-size: max(22px, calc(28px + var(--md-sys-density-scale, 0) * 1px));\n  font-weight: var(--md-sys-typescale-headline-medium-font-weight);\n  line-height: max(28px, calc(36px + var(--md-sys-density-scale, 0) * 2px));\n  letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);\n  color: var(--_headline-color);\n}\n\n/* Subtitle: label-large by default (small + medium). */\n.md-app-bar__subtitle {\n  margin-block-start: 2px;\n  font-family: var(--md-sys-typescale-label-large-font-family);\n  /* label-large (14/20): 0.5px/rung — the library's rate for sub-22px type. */\n  font-size: max(12px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-label-large-font-weight);\n  line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);\n  color: var(--_subtitle-color);\n}\n\n:host(.md-app-bar--large) .md-app-bar__expanded .md-app-bar__subtitle {\n  font-family: var(--md-sys-typescale-title-medium-font-family);\n  /* title-medium (16/24) — same rates as the body-large text below. */\n  font-size: max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-title-medium-font-weight);\n  line-height: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n  letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);\n}\n\n/* ── Search app bar (64dp row, 56dp search field) ───────── */\n\n/* Container queries: compact when the bar is narrower than ~600dp (M3 compact). */\n:host(.md-app-bar--search) {\n  container-type: inline-size;\n}\n\n.md-app-bar__row--search {\n  flex-shrink: 0;\n  gap: var(--_search-row-gap);\n}\n\n/* Search row: leading (48dp) | 8dp | pill bay | 8dp | trailing avatar (48dp). */\n:host(.md-app-bar--search) .md-app-bar__leading {\n  min-inline-size: var(--_icon-button-size);\n}\n\n:host(.md-app-bar--search) .md-app-bar__trailing {\n  margin-inline-start: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  min-inline-size: var(--_trailing-touch-size);\n  min-block-size: var(--_trailing-touch-size);\n}\n\n/* Search hint — caret and typed text always start-aligned. Start variant keeps a\n   constant inline-start inset; center variant centres only the ::placeholder. */\n:host(.md-app-bar--search) .md-app-bar__search-input,\n:host(.md-app-bar--search) .md-app-bar__search-content {\n  text-align: start;\n}\n\n/* Start-aligned hint — constant inset on field wrapper and input (not outside menu icon). */\n:host(.md-app-bar--search:not(.md-app-bar--center)) .md-app-bar__search-field {\n  padding-inline-start: max(12px, var(--_search-padding-inline-start));\n  padding-inline-end: 0;\n}\n\n:host(.md-app-bar--search:not(.md-app-bar--center)) .md-app-bar__search-input {\n  padding-inline-start: max(12px, var(--_search-padding-inline-start));\n  padding-inline-end: 0;\n}\n\n/* Native input carries text-side inset; avoid doubling wrapper + input padding. */\n:host(.md-app-bar--search:not(.md-app-bar--center))\n  .md-app-bar__search-field:has(.md-app-bar__search-input) {\n  padding-inline-start: 0;\n}\n\n/* Centered search hint (title-alignment=\"center\") — placeholder centred via\n   ::placeholder while the input (and caret) stay start-aligned.\n\n   The hint inset is applied UNCONDITIONALLY and SYMMETRICALLY. It used to be\n   added only on :focus-within / --focused / :not(:placeholder-shown), which\n   made the centred placeholder visibly slide: `text-align: center` centres\n   within the CONTENT box, so growing padding-inline-start from 0 to 24px on\n   focus moved the hint 12px (half the added padding) toward the end edge while\n   the user was looking straight at it.\n\n   Equal start and end padding keeps the content box concentric with the input,\n   so the centred placeholder lands in exactly the same place it did with no\n   padding at all — the resting render is unchanged — while the caret and typed\n   text keep the 24px inset they always had. Nothing moves on focus, and\n   nothing moves on the first keystroke either. */\n:host(.md-app-bar--search.md-app-bar--center) .md-app-bar__search-field {\n  padding-inline-start: 0;\n  padding-inline-end: 0;\n}\n\n:host(.md-app-bar--search.md-app-bar--center) .md-app-bar__search-input::placeholder {\n  text-align: center;\n}\n\n:host(.md-app-bar--search.md-app-bar--center) .md-app-bar__search-input {\n  padding-inline-start: max(12px, var(--_search-padding-inline-start));\n  padding-inline-end: max(12px, var(--_search-padding-inline-start));\n}\n\n/* Flex bay between outside leading/trailing icons — pill always fills the bay. */\n.md-app-bar__search-host {\n  flex: 1 1 auto;\n  min-inline-size: 0;\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n  justify-content: center;\n  overflow: visible;\n}\n\n.md-app-bar__search {\n  position: relative;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  flex: 1 1 auto;\n  inline-size: 100%;\n  min-inline-size: 0;\n  margin-inline: 0;\n  align-self: center;\n  block-size: var(--_search-container-height);\n  /* Inline-start padding lives on the input (start-aligned hint). */\n  padding-inline-start: 0;\n  padding-inline-end: 0;\n  gap: var(--_icon-gap);\n  border-radius: var(--_search-container-shape);\n  background-color: var(--_search-container-color);\n  color: var(--_search-input-color);\n  cursor: text;\n  overflow: hidden;\n  transition:\n    background-color var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard),\n    box-shadow var(--md-sys-motion-duration-short2) var(--md-sys-motion-easing-standard);\n}\n\n/* Let md-icon-button focus rings (3px + 2px offset) paint outside touch targets. */\n.md-app-bar__search:focus-within {\n  overflow: visible;\n}\n\n.md-app-bar__search > md-ripple {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  --md-ripple-grow-duration: var(--md-sys-motion-duration-short2);\n  --md-ripple-grow-easing: var(--md-sys-motion-easing-standard);\n  --md-ripple-extend-inline: 0px;\n}\n\n.md-app-bar__search-state-layer {\n  position: absolute;\n  inset: 0;\n  border-radius: inherit;\n  pointer-events: none;\n  background-color: var(--_search-input-color);\n  opacity: 0;\n  transition: opacity var(--md-sys-motion-duration-short1) var(--md-sys-motion-easing-standard);\n}\n\n.md-app-bar__search:hover .md-app-bar__search-state-layer {\n  opacity: var(--md-sys-state-hover-state-layer-opacity);\n}\n\n.md-app-bar__search:active .md-app-bar__search-state-layer {\n  opacity: var(--md-sys-state-pressed-state-layer-opacity);\n}\n\n.md-app-bar__search--focus-ring {\n  outline: 3px solid var(--md-sys-color-secondary);\n  outline-offset: 2px;\n}\n\n.md-app-bar__search-field {\n  flex: 1 1 auto;\n  min-inline-size: 0;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 1;\n  padding-inline: 0;\n}\n\n.md-app-bar__search-input {\n  flex: 1 1 auto;\n  min-inline-size: 0;\n  inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  text-align: start;\n  border: 0;\n  outline: 0;\n  background: transparent;\n  color: var(--_search-input-color);\n  font-family: var(--md-sys-typescale-body-large-font-family);\n  /* body-large (16/24) — matches md-search's own input taper, so an app-bar\n     search field and a standalone md-search read the same at every rung. */\n  font-size: max(13px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n  font-weight: var(--md-sys-typescale-body-large-font-weight);\n  line-height: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n  letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);\n  padding-block: 0;\n  padding-inline-end: 0;\n  padding-inline-start: 0;\n  margin: 0;\n  text-indent: 0;\n  box-sizing: border-box;\n  appearance: none;\n}\n\n.md-app-bar__search-input::placeholder {\n  color: var(--_search-placeholder-color);\n  opacity: 1;\n}\n\n.md-app-bar__search-input:disabled {\n  cursor: not-allowed;\n}\n\n.md-app-bar__search-content {\n  flex: 1 1 auto;\n  min-inline-size: 0;\n  inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  box-sizing: border-box;\n  padding-inline: 0;\n  margin: 0;\n}\n\n::slotted([slot='search']) {\n  inline-size: 100%;\n  min-inline-size: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  box-sizing: border-box;\n  padding-inline: 0;\n  margin: 0;\n}\n\n.md-app-bar__search-trailing {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  /* mic ↔ sparkle: 4dp; row gap (8dp) separates pill edge from outside avatar. */\n  gap: var(--_search-trailing-gap);\n  color: var(--_search-trailing-icon-color);\n  position: relative;\n  /* Above search-field so md-icon-button focus rings are not covered. */\n  z-index: 2;\n  padding-inline: 0;\n  margin-inline: 0;\n}\n\n/* After in-pill icons (mic): breathing room before pill edge. */\n:host(.md-app-bar--with-search-trailing) .md-app-bar__search {\n  padding-inline-end: var(--_search-padding-inline-end);\n}\n\n/* Hint field ↔ mic: 6dp fits icon-button focus ring (3px outline + 2px offset). */\n:host(.md-app-bar--with-search-trailing) .md-app-bar__search-trailing {\n  margin-inline-start: var(--_search-field-trailing-gap);\n}\n\n::slotted([slot='search-trailing']) {\n  color: var(--_search-trailing-icon-color);\n}\n\n:host(.md-app-bar--search) ::slotted([slot='trailing']) {\n  color: var(--_trailing-icon-color);\n}\n\n:host(.md-app-bar--search-disabled) .md-app-bar__search,\n:host(.md-app-bar--search) .md-app-bar__search:has(.md-app-bar__search-input:disabled) {\n  cursor: not-allowed;\n  opacity: 0.38;\n}\n\n:host(.md-app-bar--search-disabled) .md-app-bar__search-state-layer,\n:host(.md-app-bar--search) .md-app-bar__search:has(.md-app-bar__search-input:disabled) .md-app-bar__search-state-layer {\n  display: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .md-app-bar__search {\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* Compact search row (< 600dp): tighter hint insets; hide secondary in-pill icons\n   unless marked with data-compact-keep. Row gaps (8dp) and 48dp touch targets\n   are unchanged. Custom --md-app-bar-search-padding-inline-start (e.g. 0) is preserved. */\n@container (max-width: 599px) {\n  :host(.md-app-bar--search:not(.md-app-bar--center)) {\n    --_search-padding-inline-start: min(16px, var(--_search-padding-inline-start));\n  }\n\n  :host(.md-app-bar--search)\n    ::slotted([slot='search-trailing']:not(:first-of-type):not([data-compact-keep])) {\n    display: none;\n  }\n}\n\n@container (max-width: 399px) {\n  :host(.md-app-bar--search:not(.md-app-bar--center)) {\n    --_search-padding-inline-start: min(12px, var(--_search-padding-inline-start));\n  }\n}\n\n@media (max-width: 599px) {\n  :host(.md-app-bar--search:not(.md-app-bar--center)) {\n    --_search-padding-inline-start: min(16px, var(--_search-padding-inline-start));\n  }\n\n  :host(.md-app-bar--search)\n    ::slotted([slot='search-trailing']:not(:first-of-type):not([data-compact-keep])) {\n    display: none;\n  }\n}\n\n@media (max-width: 399px) {\n  :host(.md-app-bar--search:not(.md-app-bar--center)) {\n    --_search-padding-inline-start: min(12px, var(--_search-padding-inline-start));\n  }\n}\n\n/* ── Prop-based leading icon button (md-icon-button) ────── */\n\n.md-app-bar__leading-button {\n  flex-shrink: 0;\n  --md-icon-button-icon-size: var(--_icon-size-handoff);\n  --md-icon-button-container-width: var(--_icon-button-size);\n  --md-icon-button-container-height: var(--_icon-button-size);\n  --md-icon-button-icon-color: var(--_leading-icon-color);\n  --md-icon-button-state-layer-color: var(--_leading-icon-color);\n}\n\n/* ── Slotted icon buttons / custom icons ────────────────── */\n\n::slotted([slot='leading']),\n::slotted([slot='trailing']),\n::slotted([slot='search-trailing']) {\n  flex-shrink: 0;\n  --md-icon-button-icon-size: var(--_icon-size-handoff);\n  --md-icon-button-container-width: var(--_icon-button-size);\n  --md-icon-button-container-height: var(--_icon-button-size);\n}\n\n::slotted([slot='leading']) {\n  --md-icon-button-icon-color: var(--_leading-icon-color);\n  --md-icon-button-state-layer-color: var(--_leading-icon-color);\n}\n\n::slotted([slot='trailing']) {\n  --md-icon-button-icon-color: var(--_trailing-icon-color);\n  --md-icon-button-state-layer-color: var(--_trailing-icon-color);\n  --md-avatar-size: var(--_avatar-size);\n}\n\n/* Enforced in TSX when >3 trailing children are assigned; belt-and-suspenders hide. */\n::slotted([slot='trailing'][hidden]) {\n  display: none !important;\n}\n\n::slotted([slot='search-trailing']) {\n  --md-icon-button-icon-color: var(--_search-trailing-icon-color);\n  --md-icon-button-state-layer-color: var(--_search-trailing-icon-color);\n}\n\n/* Directional icons mirror in RTL */\n:host-context([dir='rtl']) ::slotted([slot='leading'][data-directional]),\n:host([dir='rtl']) ::slotted([slot='leading'][data-directional]),\n:host-context([dir='rtl']) .md-app-bar__leading-button[data-directional],\n:host([dir='rtl']) .md-app-bar__leading-button[data-directional] {\n  transform: scaleX(-1);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  Host,\n  Prop,\n  State,\n  h,\n} from '@stencil/core';\n\n/**\n * `md-app-bar` — Material Design 3 App Bar.\n *\n * Implements the current (M3 Expressive) app-bars specification:\n *   https://m3.material.io/components/app-bars/specs\n *\n * Size variants: `small` (64dp), `medium` (112/136dp expanded), `large`\n * (120/152dp expanded), and `search` (inline search field in the 64dp row).\n * Flexible `medium` / `large` bars always render the expanded headline block.\n * Title alignment (`title-alignment`) is configuration, not a variant.\n *\n * Selecting the search field should open an `md-search` view via `mdSearchActivate`.\n *\n */\n@Component({\n  tag: 'md-app-bar',\n  styleUrl: 'md-app-bar.css',\n  shadow: true,\n})\nexport class MdAppBar {\n  /** Maximum trailing action icons per M3 app bar guidance. */\n  private static readonly MAX_TRAILING_ICONS = 3;\n\n  @Element() el!: HTMLElement;\n\n  /**\n   * App bar size variant.\n   *\n   * - `small` — 64dp action row with inline title-large headline.\n   * - `medium` — flexible 112dp (136dp with subtitle) expanded headline block.\n   * - `large` — flexible 120dp (152dp with subtitle) expanded headline block.\n   * - `search` — 64dp row with inline search field (M3 search app bar).\n   */\n  @Prop({ reflect: true })\n  variant: 'small' | 'medium' | 'large' | 'search' = 'small';\n\n  /**\n   * Title horizontal alignment — `start` (leading edge, default) or `center`.\n   * On search bars it centers the placeholder when empty and unfocused; once\n   * focused or when typing, the caret and text align to the inline-start edge.\n   */\n  @Prop({ reflect: true, attribute: 'title-alignment' })\n  titleAlignment: 'start' | 'center' = 'start';\n\n  /**\n   * Search variant only: hinted search text shown in the inline search field.\n   * Falls back to `placeholder` on the optional `search` slot when empty.\n   */\n  @Prop({ attribute: 'search-placeholder' }) searchPlaceholder: string = 'Search';\n\n  /** Search variant only: current search field value (two-way bindable). */\n  @Prop({ mutable: true, reflect: true, attribute: 'search-value' }) searchValue: string = '';\n\n  /**\n   * Search variant only: accessible name for the inline search field. Per M3\n   * labeling guidance, falls back to `search-placeholder` when unset.\n   */\n  @Prop({ attribute: 'search-aria-label' }) searchAriaLabel: string = '';\n\n  /** Search variant only: disable the inline search field. */\n  @Prop({ reflect: true, attribute: 'search-disabled' }) searchDisabled: boolean = false;\n\n  /** Inline or expanded headline text. Falls back to the `headline` slot when empty. */\n  @Prop({ reflect: true }) headline: string = '';\n\n  /**\n   * Optional subtitle. On flexible variants it sits below the expanded headline\n   * (and grows the container); on `small` it stacks under the inline title.\n   * Falls back to the `subtitle` slot when empty.\n   */\n  @Prop({ reflect: true }) subtitle: string = '';\n\n  /**\n   * When true, applies the scrolled container surface colour per M3 app bar\n   * common-colors (`surface` → `surface-container`). Wire from your scroll listener;\n   * the component does not observe scroll position itself.\n   */\n  @Prop({ reflect: true }) scrolled: boolean = false;\n\n  /**\n   * Density scale: 0 (default 64dp row), -1 (60dp), -2 (56dp), -3 (52dp), -4 (48dp).\n   * Tightens the action row, icon targets, search field, and expanded heights.\n   */\n  @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n  /** Material Symbols name for the leading navigation icon (slot takes priority). */\n  @Prop({ attribute: 'leading-icon' }) leadingIcon: string = '';\n\n  /** Accessible label for the prop-based leading icon button. Required when `leading-icon` is set. */\n  @Prop({ attribute: 'leading-icon-label' }) leadingIconLabel: string = '';\n\n  /** Emitted when the prop-based leading icon button is activated. */\n  @Event() mdLeadingClick: EventEmitter<MouseEvent>;\n\n  /**\n   * Search variant only: emitted when the inline search field is selected\n   * (click, focus, Enter, or Space). Wire this to `md-search.show()` to open\n   * the full-screen search view per the MD3 spec.\n   */\n  @Event() mdSearchActivate: EventEmitter<{ value: string }>;\n\n  /** Search variant only: emitted on every inline search field input change. */\n  @Event() mdSearchInput: EventEmitter<{ value: string }>;\n\n  @State() private hasSlottedLeading = false;\n  @State() private hasSlottedHeadline = false;\n  @State() private hasSlottedSubtitle = false;\n  @State() private hasSlottedSearch = false;\n  @State() private hasSlottedSearchTrailing = false;\n  @State() private searchFocused = false;\n  @State() private searchKeyboardModality = false;\n\n  private searchInput?: HTMLInputElement;\n\n  connectedCallback() {\n    if (typeof document === 'undefined') return;\n    document.addEventListener('keydown', this.trackSearchKeyboardModality, true);\n    document.addEventListener('pointerdown', this.trackSearchPointerModality, true);\n  }\n\n  disconnectedCallback() {\n    if (typeof document === 'undefined') return;\n    document.removeEventListener('keydown', this.trackSearchKeyboardModality, true);\n    document.removeEventListener('pointerdown', this.trackSearchPointerModality, true);\n  }\n\n  componentWillLoad() {\n    this.hasSlottedLeading = this.el.querySelector('[slot=\"leading\"]') !== null;\n    this.hasSlottedHeadline = this.el.querySelector('[slot=\"headline\"]') !== null;\n    this.hasSlottedSubtitle = this.el.querySelector('[slot=\"subtitle\"]') !== null;\n    this.hasSlottedSearch = this.el.querySelector('[slot=\"search\"]') !== null;\n    this.hasSlottedSearchTrailing =\n      this.el.querySelector('[slot=\"search-trailing\"]') !== null;\n  }\n\n  componentDidLoad() {\n    const shadow = this.el.shadowRoot;\n    if (!shadow) return;\n\n    const leadingSlot = shadow.querySelector('slot[name=\"leading\"]') as HTMLSlotElement | null;\n    const headlineSlot = shadow.querySelector('slot[name=\"headline\"]') as HTMLSlotElement | null;\n    const subtitleSlot = shadow.querySelector('slot[name=\"subtitle\"]') as HTMLSlotElement | null;\n    const searchSlot = shadow.querySelector('slot[name=\"search\"]') as HTMLSlotElement | null;\n    const searchTrailingSlot = shadow.querySelector(\n      'slot[name=\"search-trailing\"]',\n    ) as HTMLSlotElement | null;\n    const trailingSlot = shadow.querySelector('slot[name=\"trailing\"]') as HTMLSlotElement | null;\n\n    const syncLeading = () => {\n      this.hasSlottedLeading =\n        this.el.querySelector('[slot=\"leading\"]') !== null ||\n        (leadingSlot?.assignedElements().length ?? 0) > 0;\n    };\n    const syncHeadline = () => {\n      this.hasSlottedHeadline =\n        this.el.querySelector('[slot=\"headline\"]') !== null ||\n        (headlineSlot?.assignedElements().length ?? 0) > 0;\n    };\n    const syncSubtitle = () => {\n      this.hasSlottedSubtitle =\n        this.el.querySelector('[slot=\"subtitle\"]') !== null ||\n        (subtitleSlot?.assignedElements().length ?? 0) > 0;\n    };\n    const syncSearch = () => {\n      this.hasSlottedSearch =\n        this.el.querySelector('[slot=\"search\"]') !== null ||\n        (searchSlot?.assignedElements().length ?? 0) > 0;\n    };\n    const syncSearchTrailing = () => {\n      this.hasSlottedSearchTrailing =\n        this.el.querySelector('[slot=\"search-trailing\"]') !== null ||\n        (searchTrailingSlot?.assignedElements().length ?? 0) > 0;\n    };\n    const syncTrailing = () => this.enforceTrailingSlotLimit(trailingSlot);\n\n    leadingSlot?.addEventListener('slotchange', syncLeading);\n    headlineSlot?.addEventListener('slotchange', syncHeadline);\n    subtitleSlot?.addEventListener('slotchange', syncSubtitle);\n    searchSlot?.addEventListener('slotchange', syncSearch);\n    searchTrailingSlot?.addEventListener('slotchange', syncSearchTrailing);\n    trailingSlot?.addEventListener('slotchange', syncTrailing);\n    syncTrailing();\n  }\n\n  /**\n   * Hides trailing slot children beyond {@link MdAppBar.MAX_TRAILING_ICONS} and\n   * warns in development when consumers assign too many action icons.\n   */\n  private enforceTrailingSlotLimit(trailingSlot: HTMLSlotElement | null) {\n    const assigned = trailingSlot?.assignedElements({ flatten: true }) ?? [];\n    if (assigned.length > MdAppBar.MAX_TRAILING_ICONS) {\n      console.warn(\n        `[md-app-bar] The trailing slot supports at most ${MdAppBar.MAX_TRAILING_ICONS} action icons; ` +\n          `${assigned.length} were provided. Icons beyond the limit are hidden.`,\n      );\n    }\n    assigned.forEach((node, index) => {\n      const el = node as HTMLElement;\n      if (index >= MdAppBar.MAX_TRAILING_ICONS) {\n        el.hidden = true;\n      } else if (el.hidden) {\n        el.hidden = false;\n      }\n    });\n  }\n\n  private trackSearchKeyboardModality = () => {\n    this.searchKeyboardModality = true;\n  };\n\n  private trackSearchPointerModality = () => {\n    this.searchKeyboardModality = false;\n  };\n\n  private isFlexible() {\n    return this.variant === 'medium' || this.variant === 'large';\n  }\n\n  private isSearchVariant() {\n    return this.variant === 'search';\n  }\n\n  private hasHeadlineContent() {\n    return Boolean(this.headline) || this.hasSlottedHeadline;\n  }\n\n  private effectiveSearchLabel() {\n    return this.searchAriaLabel || this.searchPlaceholder || 'Search';\n  }\n\n  private emitSearchActivate() {\n    if (this.searchDisabled) return;\n    this.mdSearchActivate.emit({ value: this.searchValue });\n  }\n\n  private handleSearchContainerClick = () => {\n    if (this.searchDisabled) return;\n    this.searchInput?.focus();\n  };\n\n  private handleSearchInput = (event: Event) => {\n    const next = (event.target as HTMLInputElement).value;\n    this.searchValue = next;\n    this.mdSearchInput.emit({ value: next });\n  };\n\n  private handleSearchFocus = () => {\n    if (this.searchDisabled) return;\n    this.searchFocused = true;\n    this.emitSearchActivate();\n  };\n\n  private handleSearchBlur = () => {\n    this.searchFocused = false;\n  };\n\n  private handleSearchKeyDown = (event: KeyboardEvent) => {\n    if (this.searchDisabled) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.emitSearchActivate();\n    }\n  };\n\n  private hasSubtitleContent() {\n    return Boolean(this.subtitle) || this.hasSlottedSubtitle;\n  }\n\n  private renderLeadingFallback() {\n    const showFallback = Boolean(this.leadingIcon) && !this.hasSlottedLeading;\n    if (!showFallback) return null;\n\n    return (\n      <md-icon-button\n        class=\"md-app-bar__leading-button\"\n        exportparts=\"icon, state-layer\"\n        part=\"leading-icon\"\n        icon={this.leadingIcon}\n        variant=\"standard\"\n        size=\"md\"\n        buttonWidth=\"narrow\"\n        aria-label={this.leadingIconLabel || undefined}\n        onClick={(event: MouseEvent) => this.mdLeadingClick.emit(event)}\n      ></md-icon-button>\n    );\n  }\n\n  /**\n   * Inline title block: the only title for `small`, and a visually hidden\n   * collapsed copy on flexible bars (expanded headline is primary).\n   */\n  private renderInlineHeadline() {\n    const flexible = this.isFlexible();\n\n    const titleNode = this.headline ? (\n      <span class=\"md-app-bar__title\" part=\"title\">\n        {this.headline}\n      </span>\n    ) : flexible ? null : this.hasSlottedHeadline ? (\n      <span class=\"md-app-bar__title\" part=\"title\">\n        <slot name=\"headline\" />\n      </span>\n    ) : null;\n\n    const subtitleNode = !this.hasSubtitleContent()\n      ? null\n      : this.subtitle\n        ? (\n          <span class=\"md-app-bar__subtitle md-app-bar__subtitle--inline\" part=\"subtitle\">\n            {this.subtitle}\n          </span>\n        )\n        : flexible\n          ? null\n          : (\n            <span class=\"md-app-bar__subtitle md-app-bar__subtitle--inline\" part=\"subtitle\">\n              <slot name=\"subtitle\" />\n            </span>\n          );\n\n    if (!titleNode && !subtitleNode) return null;\n\n    return (\n      <span class=\"md-app-bar__headline-inline\" aria-hidden={flexible ? 'true' : null}>\n        {titleNode}\n        {subtitleNode}\n      </span>\n    );\n  }\n\n  private renderExpandedHeadline() {\n    if (this.headline) {\n      return (\n        <span class=\"md-app-bar__expanded-headline\" part=\"expanded-headline\">\n          {this.headline}\n        </span>\n      );\n    }\n    return (\n      <span class=\"md-app-bar__expanded-headline\" part=\"expanded-headline\">\n        <slot name=\"headline\" />\n      </span>\n    );\n  }\n\n  private renderExpandedSubtitle() {\n    if (this.subtitle) {\n      return (\n        <span class=\"md-app-bar__subtitle\" part=\"subtitle\">\n          {this.subtitle}\n        </span>\n      );\n    }\n    return (\n      <span class=\"md-app-bar__subtitle\" part=\"subtitle\">\n        <slot name=\"subtitle\" />\n      </span>\n    );\n  }\n\n  private renderSearchField() {\n    return (\n      <div class=\"md-app-bar__search-host\" part=\"search-host\">\n        <div\n          class={{\n            'md-app-bar__search': true,\n            'md-app-bar__search--focused': this.searchFocused,\n            'md-app-bar__search--focus-ring':\n              this.searchFocused && this.searchKeyboardModality,\n          }}\n          part=\"search\"\n          onClick={this.handleSearchContainerClick}\n        >\n        {!this.searchDisabled && <md-ripple disabled={this.searchDisabled}></md-ripple>}\n        <span class=\"md-app-bar__search-state-layer\" part=\"search-state-layer\" aria-hidden=\"true\"></span>\n        {this.hasSlottedSearch ? (\n          <span class=\"md-app-bar__search-field\" part=\"search-field\">\n            <span class=\"md-app-bar__search-content\" part=\"search-content\">\n              <slot name=\"search\" />\n            </span>\n          </span>\n        ) : (\n          <span class=\"md-app-bar__search-field\" part=\"search-field\">\n            <input\n              ref={(el) => (this.searchInput = el as HTMLInputElement)}\n              class=\"md-app-bar__search-input\"\n              part=\"search-input\"\n              type=\"text\"\n              inputMode=\"search\"\n              enterKeyHint=\"search\"\n              role=\"searchbox\"\n              value={this.searchValue}\n              placeholder={this.searchPlaceholder}\n              disabled={this.searchDisabled}\n              aria-label={this.effectiveSearchLabel()}\n              autocomplete=\"off\"\n              spellcheck={false}\n              onInput={this.handleSearchInput}\n              onFocus={this.handleSearchFocus}\n              onBlur={this.handleSearchBlur}\n              onKeyDown={this.handleSearchKeyDown}\n            />\n          </span>\n        )}\n        <span class=\"md-app-bar__search-trailing\" part=\"search-trailing\">\n          <slot name=\"search-trailing\" />\n        </span>\n        </div>\n      </div>\n    );\n  }\n\n  private renderSearchTop() {\n    return (\n      <div class=\"md-app-bar__row md-app-bar__row--search\" part=\"row\">\n        <span class=\"md-app-bar__leading\" part=\"leading\">\n          <slot name=\"leading\"></slot>\n          {this.renderLeadingFallback()}\n        </span>\n        {this.renderSearchField()}\n        <span class=\"md-app-bar__trailing\" part=\"trailing\">\n          <slot name=\"trailing\" />\n        </span>\n      </div>\n    );\n  }\n\n  private renderTop() {\n    if (this.isSearchVariant()) {\n      return this.renderSearchTop();\n    }\n\n    const flexible = this.isFlexible();\n\n    return [\n      <div class=\"md-app-bar__row\" part=\"row\">\n        <span class=\"md-app-bar__leading\" part=\"leading\">\n          <slot name=\"leading\"></slot>\n          {this.renderLeadingFallback()}\n        </span>\n        {this.renderInlineHeadline()}\n        <span class=\"md-app-bar__trailing\" part=\"trailing\">\n          <slot name=\"trailing\" />\n        </span>\n      </div>,\n      flexible && (\n        <div class=\"md-app-bar__expanded\" part=\"expanded\">\n          {this.renderExpandedHeadline()}\n          {this.hasSubtitleContent() && this.renderExpandedSubtitle()}\n        </div>\n      ),\n    ];\n  }\n\n  render() {\n    const flexible = this.isFlexible();\n    const search = this.isSearchVariant();\n    const centered = this.titleAlignment === 'center';\n\n    return (\n      <Host\n        class={{\n          'md-app-bar': true,\n          [`md-app-bar--${this.variant}`]: true,\n          'md-app-bar--flexible': flexible,\n          'md-app-bar--center': centered,\n          'md-app-bar--search': search,\n          'md-app-bar--with-subtitle': !search && this.hasSubtitleContent(),\n          'md-app-bar--search-focused': search && this.searchFocused,\n          'md-app-bar--search-disabled': search && this.searchDisabled,\n          'md-app-bar--with-search-trailing': search && this.hasSlottedSearchTrailing,\n          'md-app-bar--scrolled': this.scrolled,\n          [`md-app-bar--density${this.density}`]: this.density !== 0,\n        }}\n        role=\"banner\"\n      >\n        {this.renderTop()}\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components-csr/md-area-chart.js

@@ -0,0 +1,2 @@
+import{p as t,H as e,c as s,h as i,d as a,t as n}from"./p-bSpXNc5J.js";import{d as o}from"./p-DfcpeJAu.js";import{d as r}from"./p-uSMrgqAy.js";import{L as h}from"./p-RLxbNqRv.js";import{r as l,d,a as c,b as m,p}from"./p-DvOKnoqK.js";import{n as u,b as y,a as f}from"./p-C_ogF68H.js";const b=()=>`:host{--_block-size:var(--md-area-chart-block-size, auto);--_min-block-size:var(--md-area-chart-min-block-size, max(120px, calc(160px + var(--md-sys-density-scale, 0) * 8px)));--_aspect-ratio:var(--md-area-chart-aspect-ratio, 16 / 9);--_background:var(--md-area-chart-background, var(--md-sys-color-surface-container-low, #F7F2FA));--_padding:var(--md-area-chart-padding, max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px)));--_zoom-size:var(--md-area-chart-zoom-size, 28px);--_zoom-track-color:var(--md-area-chart-zoom-track-color, var(--md-sys-color-surface-container-highest, #E6E0E9));--_zoom-window-color:var(--md-area-chart-zoom-window-color, var(--md-sys-color-secondary-container, #E8DEF8));--_zoom-handle-color:var(--md-area-chart-zoom-handle-color, var(--md-sys-color-primary, #6750A4));--_zoom-band-color:var(--md-area-chart-zoom-band-color, color-mix(in srgb, var(--md-sys-color-primary, #6750A4) 16%, transparent));--_zoom-pan-inset:10px;--_shape:var(--md-area-chart-shape, max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px)));--_empty-color:var(--md-area-chart-empty-color, var(--md-sys-color-on-surface-variant, #49454F));--_empty-background:var(--md-area-chart-empty-background, var(--_background));--_empty-font:var(--md-area-chart-empty-font, var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif));--_empty-font-size:var(--md-area-chart-empty-font-size, var(--md-sys-typescale-body-medium-font-size, 14px));--_empty-icon-size:var(--md-area-chart-empty-icon-size, 40px);display:block;position:relative;inline-size:100%;block-size:var(--_block-size);min-block-size:var(--_min-block-size);background:var(--_background);padding:var(--_padding);border-radius:var(--_shape);box-sizing:border-box;aspect-ratio:var(--_aspect-ratio)}.md-area-chart__header,.md-area-chart__footer{display:contents}.md-area-chart__header>slot[name='header']::slotted(*),.md-area-chart__footer>slot[name='footer']::slotted(*){display:block;margin-block:8px}.md-area-chart__canvas{position:absolute;inset:var(--_padding);min-block-size:0;min-inline-size:0}.md-area-chart__empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;padding:24px;background:var(--_empty-background);border-radius:var(--_shape);color:var(--_empty-color);font-family:var(--_empty-font);font-size:var(--_empty-font-size);line-height:var(--md-sys-typescale-body-medium-line-height, 20px);pointer-events:none;text-align:center}.md-area-chart__empty ::slotted(.material-symbols-outlined),.md-area-chart__empty ::slotted(.material-symbols-rounded),.md-area-chart__empty ::slotted(.material-symbols-sharp),.md-area-chart__empty ::slotted(.material-icons){font-size:var(--_empty-icon-size) !important;line-height:1;opacity:0.55}.md-area-chart__a11y-table{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}@media (forced-colors: active){:host{forced-color-adjust:auto}}.md-area-chart__live{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}[part='legend'] button:focus-visible{outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:2px;border-radius:6px}.md-area-chart__canvas:focus-visible{outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:-3px;border-radius:4px}.md-area-chart__loading{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;box-sizing:border-box;padding:24px;background:var(--_empty-background);border-radius:var(--_shape);color:var(--_empty-color);font-family:var(--_empty-font);font-size:var(--_empty-font-size);text-align:center}.md-area-chart__spinner{inline-size:var(--_empty-icon-size);block-size:var(--_empty-icon-size)}:host(.md-area-chart--zoom-slider) .md-area-chart__canvas{bottom:calc(var(--_padding) + var(--_zoom-size))}:host(.md-area-chart--zoom-drag) .md-area-chart__canvas{cursor:ew-resize}.md-area-chart__zoom{position:absolute;inset-inline:var(--_padding);bottom:var(--_padding);block-size:var(--_zoom-size);display:flex;align-items:center}.md-area-chart__zoom-slider{--md-slider-active-color:var(--_zoom-window-color);--md-slider-inactive-color:var(--_zoom-track-color);--md-slider-thumb-color:var(--_zoom-handle-color);--md-slider-thumb-height:var(--_zoom-size);--md-slider-track-height:12px}.md-area-chart__zoom-pan{position:absolute;inset-block:0;z-index:1;cursor:grab;touch-action:none}.md-area-chart__zoom-pan:active{cursor:grabbing}.md-area-chart__zoom-band{position:absolute;background:var(--_zoom-band-color);border-inline:1px solid var(--_zoom-handle-color);pointer-events:none}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}`;const g=t(class t extends e{constructor(t){super();if(t!==false){this.__registerHost()}this.__attachShadow();this.mdMarkerClick=s(this,"mdMarkerClick",7);this.mdLineClick=s(this,"mdLineClick",7);this.mdAreaClick=s(this,"mdAreaClick",7);this.mdAxisClick=s(this,"mdAxisClick",7);this.mdLegendClick=s(this,"mdLegendClick",7);this.mdHover=s(this,"mdHover",7);this.mdReady=s(this,"mdReady",7);this.mdZoom=s(this,"mdZoom",7);this.label="";this.titleAlign="start";this.series=[];this.curve="smooth";this.stack="normal";this.connectNulls=false;this.showMarks=false;this.legend="top-end";this.tooltip="axis";this.zoom="none";this.locale="";this.noAnimation=false;this.animation="expressive";this.fillOpacity=.55;this.showLine=true;this.grid="horizontal";this.inverted=false;this.seriesLabels=false;this.summary="";this.labelEmpty="No data to display";this.loading=false;this.loadingLabel="Loading chart…";this.labelZoomStart="Zoom range start";this.labelZoomEnd="Zoom range end";this.axisTicks=false;this.showLabels=false;this.labelPlot="Chart data. Use the arrow keys to move between points, Home and End for the first and last, Escape to leave.";this.labelPoint="%x%: %values%";this.density=0;this.mounted=false;this.kbIndex=-1;this.announcement="";this.zoomWin=null;this.dragBand=null;this.grab=null;this.engine=null;this.ro=null;this.legendHidden=new Map;this.bindChartHost=t=>{this.chartHost=t};this.bindA11yTableHost=t=>{this.a11yTableHost=t};this.onPlotPointerDown=t=>{if(!this.zoomInside||t.button!==0||this.grab)return;if(!this.insidePlot(t))return;const e=this.hostX(t);this.grab={id:t.pointerId,kind:"band",x:e,win:this.win()};this.dragBand={x1:e,x2:e};const s=t.composedPath?.()[0]??t.target;s.setPointerCapture?.(t.pointerId)};this.onPointerMove=t=>{const e=this.grab;if(!e||e.id!==t.pointerId)return;if(e.kind==="band"){const s=this.plotRect();if(!s)return;this.dragBand={x1:e.x,x2:Math.min(Math.max(this.hostX(t),s.x),s.x+s.width)};return}const s=this.trackFrac(t.clientX);const i=this.trackFrac(e.x);if(s==null||i==null)return;const a=Math.max(1,this.dataLength()-1);const n=e.win.end-e.win.start;const o=Math.round((s-i)*a);const r=Math.min(Math.max(0,e.win.start+o),a-n);this.applyZoom(r,r+n)};this.onPointerUp=t=>{const e=this.grab;if(!e||e.id!==t.pointerId)return;this.grab=null;const s=this.dragBand;this.dragBand=null;if(e.kind!=="band"||!s)return;if(Math.abs(s.x2-s.x1)<8)return;const[i,a]=[this.indexAtX(s.x1),this.indexAtX(s.x2)].sort(((t,e)=>t-e));if(a-i>=1)this.applyZoom(i,a)};this.onPlotDblClick=t=>{if(this.zoomInside&&this.zoomWin&&this.insidePlot(t))this.resetZoom()};this.onZoomPanDown=t=>{if(t.button!==0)return;t.stopPropagation();t.preventDefault();this.grab={id:t.pointerId,kind:"pan",x:t.clientX,win:this.win()};t.target.setPointerCapture?.(t.pointerId)};this.onZoomSliderInput=t=>{t.stopPropagation();const{valueStart:e,valueEnd:s}=t.detail??{};if(e==null||s==null)return;this.applyZoom(e,s)};this.onZoomSliderEvent=t=>t.stopPropagation();this.onPlotKeyDown=t=>{const e=this.engine?.getScene();const s=Math.max(0,(e?.xPositions.length??0)-1);if(!e||s<0)return;const i=typeof getComputedStyle==="function"&&getComputedStyle(this.el).direction==="rtl";const a=i?"ArrowLeft":"ArrowRight";const n=i?"ArrowRight":"ArrowLeft";let o=this.kbIndex;switch(t.key){case a:o=this.kbIndex<0?0:Math.min(s,this.kbIndex+1);break;case n:o=this.kbIndex<0?s:Math.max(0,this.kbIndex-1);break;case"Home":o=0;break;case"End":o=s;break;case"Escape":if(this.kbIndex<0)return;o=-1;break;default:return}t.preventDefault();this.moveKeyboardCursor(o)};this.onPlotBlur=()=>{if(this.kbIndex>=0)this.moveKeyboardCursor(-1)}}seriesKeys(){const t=new Map;return this.series.map(((e,s)=>{const i=e.id!=null?`id:${e.id}`:e.label!=null?`label:${e.label}`:`pos:${s}`;const a=t.get(i)??0;t.set(i,a+1);return a===0?i:`${i}#${a}`}))}rememberLegendToggle(t,e){const s=this.seriesKeys()[t];if(s==null)return;this.legendHidden.set(s,e);if(this.legendHidden.size>256){const t=this.legendHidden.keys().next().value;this.legendHidden.delete(t)}}componentDidLoad(){this.initChart();if(typeof window!=="undefined"&&window.matchMedia){this.themeMql=window.matchMedia("(prefers-color-scheme: dark)");this.themeListener=()=>this.applyEngine();this.themeMql.addEventListener?.("change",this.themeListener)}}disconnectedCallback(){this.ro?.disconnect();this.ro=null;this.engine?.dispose();this.engine=null;if(this.themeMql&&this.themeListener){this.themeMql.removeEventListener?.("change",this.themeListener);this.themeListener=undefined;this.themeMql=undefined}}onAnyPropChange(){this.applyEngine();this.rebuildA11yTable()}async resize(){this.engine?.resize()}async replay(){this.engine?.replay()}async toDataURL(){return this.engine?.toDataURL("image/png")??""}async getInstance(){return this.engine}initChart(){this.makeEngine();this.applyEngine();this.rebuildA11yTable();this.mounted=true;this.mdReady.emit()}makeEngine(){if(!this.chartHost)return;this.ro?.disconnect();this.ro=null;this.engine?.dispose();try{this.engine=new h(this.chartHost)}catch{this.engine=null}if(this.engine&&typeof ResizeObserver!=="undefined"){this.ro=new ResizeObserver((()=>this.engine?.resize()));this.ro.observe(this.chartHost)}}buildEngineTheme(t){return{background:t.background,textColor:t.textColor,textColorMuted:t.textColorMuted,axisLineColor:t.axisLineColor,gridLineColor:t.gridColor,surface:t.surface,fontFamily:t.fontFamily,labelSize:t.labelSize,titleSize:t.titleSize}}get zoomInside(){return this.zoom==="inside"||this.zoom==="both"}get zoomSliderOn(){return this.zoom==="slider"||this.zoom==="both"}dataLength(){const t=this.series.reduce(((t,e)=>Math.max(t,e.range?.length??e.data?.length??0)),0);return Math.max(t,this.xAxis?.data?.length??0)}win(){const t=Math.max(0,this.dataLength()-1);const e=this.zoomWin;if(!e)return{start:0,end:t};const s=Math.min(Math.max(0,e.start),Math.max(0,t-1));return{start:s,end:Math.min(Math.max(s+1,e.end),t)}}applyZoom(t,e,s=false){const i=Math.max(0,this.dataLength()-1);const a=Math.min(Math.max(0,Math.round(t)),Math.max(0,i-1));const n=Math.min(Math.max(a+1,Math.round(e)),i);this.zoomWin=s?null:{start:a,end:n};this.applyEngine();this.rebuildA11yTable();this.mdZoom.emit({startIndex:s?0:a,endIndex:s?i:n,reset:s})}async setZoom(t,e){this.applyZoom(t,e)}async resetZoom(){this.applyZoom(0,0,true)}plotRect(){const t=this.engine?.getScene()?.plot;return t?{x:t.x,y:t.y,width:t.width,height:t.height}:null}zoomBandStyle(){const t=this.plotRect();if(!this.dragBand||!t)return undefined;const e=this.canvasOffset();const{x1:s,x2:i}=this.dragBand;return{left:`${e.x+Math.min(s,i)}px`,width:`${Math.abs(i-s)}px`,top:`${e.y+t.y}px`,height:`${t.height}px`}}canvasOffset(){const t=this.chartHost;if(!t)return{x:0,y:0};const e=this.el.getBoundingClientRect();const s=t.getBoundingClientRect();return{x:s.left-e.left,y:s.top-e.top}}indexAtX(t){const e=this.engine?.getScene();const s=this.win();if(!e?.xPositions?.length)return s.start;let i=0;let a=Infinity;e.xPositions.forEach(((e,s)=>{const n=Math.abs(e-t);if(n<a){a=n;i=s}}));return s.start+i}hostX(t){return t.clientX-(this.chartHost??this.el).getBoundingClientRect().left}insidePlot(t){const e=this.plotRect();if(!e)return false;const s=(this.chartHost??this.el).getBoundingClientRect();const i=t.clientX-s.left;const a=t.clientY-s.top;return i>=e.x&&i<=e.x+e.width&&a>=e.y&&a<=e.y+e.height}sliderTrackRect(){const t=this.el.shadowRoot?.querySelector(".md-area-chart__zoom-slider");if(!t)return null;const e=t.getBoundingClientRect();if(!e.width)return null;return{left:e.left,width:e.width,rtl:getComputedStyle(this.el).direction==="rtl"}}trackFrac(t){const e=this.sliderTrackRect();if(!e)return null;const s=(t-e.left)/e.width;return e.rtl?1-s:s}renderZoomSlider(){const t=Math.max(1,this.dataLength()-1);const e=this.win();const s=e=>e/t*100;const a=t=>String(this.xAxis?.data?.[t]??t);return i("div",{class:"md-area-chart__zoom",part:"zoom"},i("md-slider",{class:"md-area-chart__zoom-slider",part:"zoom-slider",exportparts:"track: zoom-track, track-active: zoom-window, thumb-knob: zoom-handle",range:true,controlled:true,min:0,max:t,step:1,valueStart:e.start,valueEnd:e.end,ariaLabelStart:this.labelZoomStart,ariaLabelEnd:this.labelZoomEnd,valueStartText:a(e.start),valueEndText:a(e.end),onMdInput:this.onZoomSliderInput,onMdChange:this.onZoomSliderEvent,onMdDragStart:this.onZoomSliderEvent,onMdDragEnd:this.onZoomSliderEvent,onMdFocus:this.onZoomSliderEvent,onMdBlur:this.onZoomSliderEvent}),i("div",{class:"md-area-chart__zoom-pan",part:"zoom-pan",style:{insetInlineStart:`calc(${s(e.start)}% + var(--_zoom-pan-inset))`,inlineSize:`max(0px, calc(${s(e.end)-s(e.start)}% - 2 * var(--_zoom-pan-inset)))`},onPointerDown:this.onZoomPanDown}))}buildSpec(t){const e=this.stack==="percentage";const s=t=>this.valueFormatter?this.valueFormatter(t):t.toLocaleString(this.locale||undefined);const i=this.zoomWin?this.win():null;const a=t=>t&&i?t.slice(i.start,i.end+1):t;const n=t=>{if(!t||!i)return t;const e={};for(const[s,a]of Object.entries(t)){const t=Number(s)-i.start;if(t>=0&&t<=i.end-i.start)e[t]=a}return e};const o=this.seriesKeys();return{series:this.series.map(((e,s)=>({label:e.label??`Series ${s+1}`,color:c(this.el,e.color,p(t.palette,s)),data:a(e.range?e.range.map((()=>null)):e.data)??[],range:a(e.range?.map(u)),fill:e.fill,stroke:e.stroke??(!this.showLine||this.stack==="wiggle"||this.stack==="silhouette"?false:undefined),curve:e.curve??this.curve,connectNulls:e.connectNulls??this.connectNulls,showMarks:e.showMarks??this.showMarks,hidden:e.hidden??this.legendHidden.get(o[s])??false,dash:e.dash,symbol:e.symbol,pointSymbols:n(e.pointSymbols),lineWidth:e.lineWidth??this.lineWidth,markSize:e.markSize??this.markSize}))),title:this.label||undefined,subtitle:this.subtitle||undefined,titleAlign:this.titleAlign,animation:this.noAnimation?"none":this.animation,animationDuration:this.animationDuration,xValues:a(this.xAxis?.data)??[],xScale:this.xAxis?.scale??"category",xFormatter:this.xAxis?.valueFormatter??(t=>d(t,this.locale)),xLabel:this.xAxis?.label,xHidden:this.xAxis?.hidden,xHideTicks:this.xAxis?.hideTicks,xDash:this.xAxis?.dash,xGridDash:this.xAxis?.gridDash,xBands:l(this.el,this.xAxis?.bands),yBands:l(this.el,this.yAxis?.bands),xBreaks:this.xAxis?.breaks,yBreaks:this.yAxis?.breaks,yScale:this.yAxis?.scale??"value",yMin:e?0:this.yAxis?.min,yMax:e?100:this.yAxis?.max,yFormatter:e?t=>`${Math.round(t)}%`:s,yTickFormatter:!e&&this.yAxis?.valueFormatter?t=>this.yAxis.valueFormatter(t):undefined,yLabel:this.yAxis?.label,yHidden:this.yAxis?.hidden,yHideTicks:this.yAxis?.hideTicks,yDash:this.yAxis?.dash,yGridDash:this.yAxis?.gridDash,stack:this.stack,inverted:this.inverted,area:true,fillOpacity:this.fillOpacity,legend:this.legend,gridY:this.grid==="horizontal"||this.grid==="both",gridX:this.grid==="vertical"||this.grid==="both",axisTicks:this.axisTicks,showLabels:this.showLabels,seriesLabels:this.seriesLabels}}applyEngine(){if(!this.engine)return;const t=m(this.el);this.engine.setSpec(this.buildSpec(t),this.buildEngineTheme(t),{onHover:t=>{if(t<0)return;const e=t+(this.zoomWin?this.win().start:0);this.mdHover.emit({dataIndex:e,axisValue:this.xAxis?.data?.[e],seriesIndices:this.visibleSeriesIndices()})},onLegendClick:t=>{this.rememberLegendToggle(t.seriesIndex,!!t.hidden);this.mdLegendClick.emit({seriesIndex:t.seriesIndex,seriesId:this.series[t.seriesIndex]?.id,selected:!t.hidden})},onPointClick:(t,e,s)=>{const i=this.clickDetail(t,e,s);if(i)this.mdMarkerClick.emit(i)},onLineClick:(t,e,s)=>{const i=this.clickDetail(t,e,s);if(i)this.mdLineClick.emit(i)},onAreaClick:(t,e,s)=>{const i=this.clickDetail(t,e,s);if(i)this.mdAreaClick.emit(i)},onAxisClick:(t,e,s)=>{const i=t+(this.zoomWin?this.win().start:0);this.mdAxisClick.emit({dataIndex:i,axisValue:this.xAxis?.data?.[i],seriesValues:e.map((t=>({seriesIndex:t.seriesIndex,seriesId:this.series[t.seriesIndex]?.id,label:t.label,dataIndex:t.value==null?-1:i,value:t.value}))),nativeEvent:s})}});this.engine.setHoverEnabled(this.tooltip!=="none");this.engine.setTooltip({render:this.tooltipRenderer,missingFormatter:this.valueFormatter,trigger:this.tooltip==="item"?"item":"axis"})}clickDetail(t,e,s){const i=this.series[t];if(!i)return null;const a=e+(this.zoomWin?this.win().start:0);return{seriesIndex:t,seriesId:i.id,dataIndex:a,value:i.data[a]??null,axisValue:this.xAxis?.data?.[a],nativeEvent:s,series:i}}visibleSeriesIndices(){const t=this.engine?.getScene()?.hoverPoints;if(t)return t.map((t=>t.seriesIndex));return this.series.map(((t,e)=>e)).filter((t=>!this.series[t].hidden))}rebuildA11yTable(){if(!this.a11yTableHost)return;this.a11yTableHost.innerHTML=y({title:this.label,xAxisLabel:this.xAxis?.label,xAxisData:this.xAxis?.data,xValueFormatter:this.xAxis?.valueFormatter??(t=>d(t,this.locale)),locale:this.locale,series:this.series,valueFormatter:this.valueFormatter,labels:this.tableLabels})}moveKeyboardCursor(t){this.kbIndex=t;this.engine?.focusIndex(t);if(t<0){this.announcement="";return}const e=this.engine?.getScene();const s=e?.xLabels?.[t]??String(t+1);const i=t=>this.valueFormatter?this.valueFormatter(t):t.toLocaleString(this.locale||undefined);const a=(e?.hoverPoints??[]).map((e=>{const s=e.byIndex[t];return s?`${e.label} ${i(s.value)}`:null})).filter(Boolean).join(", ");this.announcement=this.labelPoint.replace("%x%",s).replace("%values%",a)}render(){const t=this.xAxis?.data??[];const e=this.summary||f({title:this.label,chartType:"area",seriesCount:this.series.length,locale:this.locale,xMin:t[0],xMax:t[t.length-1]});const s=this.series.length===0&&!this.loading;return i(a,{key:"907187a03d335c1bf6d6fd9cc67fe8f35d16bd57",class:{"md-area-chart":true,"md-area-chart--empty":s,"md-area-chart--mounted":this.mounted,"md-area-chart--zoom-slider":this.zoomSliderOn,"md-area-chart--zoom-drag":this.zoomInside},role:"figure","aria-label":e,"aria-busy":this.loading?"true":null,style:this.heightProp?{blockSize:this.heightProp}:undefined,onPointerDown:this.onPlotPointerDown,onPointerMove:this.onPointerMove,onPointerUp:this.onPointerUp,onPointerCancel:this.onPointerUp,onDblClick:this.onPlotDblClick},i("header",{key:"8d5f6ad2d135e60d3a2bb34b2cae08669a63301f",class:"md-area-chart__header",part:"header"},i("slot",{key:"86eb06739b665c65313f8aaed5a66aee779fc602",name:"header"})),i("div",{key:"51d593702cb973f2fca78a14763c7147d33d4f03",class:"md-area-chart__canvas",part:"canvas",ref:t=>this.bindChartHost(t),tabindex:s?undefined:"0",role:s?undefined:"application","aria-label":s?undefined:this.labelPlot,onKeyDown:this.onPlotKeyDown,onBlur:this.onPlotBlur}),s&&i("div",{key:"dde9ed1a8008beb3a24b4c5e70a3d00b5d400346",class:"md-area-chart__empty",part:"empty"},i("slot",{key:"8a4de09ed1352811e142a88189ee7e417e5c8d5c",name:"empty"},this.labelEmpty)),this.loading&&i("div",{key:"3371d8aa20e37a61be148e05b2f003f37d93eb22",class:"md-area-chart__loading",part:"loading",role:"status"},i("slot",{key:"c733e2e476186a363825b509d7dd82c3d93960ac",name:"loader"},i("slot",{key:"ff76c6f70c80923c681112a6a9cea3fde8f60593",name:"loading"},i("md-progress-indicator",{key:"b10e9ac7de4a5390877a47adc1c685046840b439",class:"md-area-chart__spinner",variant:"circular",indeterminate:true,label:this.loadingLabel}),i("span",{key:"55f835ce64856f233cbaeb147e6461e7d6f35230",class:"md-area-chart__loading-text"},this.loadingLabel)))),this.dragBand&&this.plotRect()&&i("div",{key:"12accf53559eb1933ce83fe6e34c5462f02f0743",class:"md-area-chart__zoom-band",part:"zoom-band",style:this.zoomBandStyle()}),this.zoomSliderOn&&this.renderZoomSlider(),i("footer",{key:"8138a8696892a4df9bc83b486e4e1cc0899a3ac3",class:"md-area-chart__footer",part:"footer"},i("slot",{key:"32b2ab8bf259e49ece161c940dbf6c53603bdfd5",name:"footer"})),i("div",{key:"08efb73a3841095f3cc938370b1fe295164489b1",class:"md-area-chart__a11y-table",ref:t=>this.bindA11yTableHost(t)}),i("div",{key:"cf9f068cddfa9d48e109f51436461a5cf839b306",class:"md-area-chart__live",role:"status","aria-live":"polite","aria-atomic":"true"},this.announcement))}get el(){return this}static get watchers(){return{series:[{onAnyPropChange:0}],xAxis:[{onAnyPropChange:0}],yAxis:[{onAnyPropChange:0}],curve:[{onAnyPropChange:0}],stack:[{onAnyPropChange:0}],legend:[{onAnyPropChange:0}],tooltip:[{onAnyPropChange:0}],zoom:[{onAnyPropChange:0}],connectNulls:[{onAnyPropChange:0}],showMarks:[{onAnyPropChange:0}],lineWidth:[{onAnyPropChange:0}],markSize:[{onAnyPropChange:0}],label:[{onAnyPropChange:0}],subtitle:[{onAnyPropChange:0}],titleAlign:[{onAnyPropChange:0}],fillOpacity:[{onAnyPropChange:0}],showLine:[{onAnyPropChange:0}],grid:[{onAnyPropChange:0}],axisTicks:[{onAnyPropChange:0}],showLabels:[{onAnyPropChange:0}],inverted:[{onAnyPropChange:0}],loading:[{onAnyPropChange:0}],animation:[{onAnyPropChange:0}],animationDuration:[{onAnyPropChange:0}],tooltipRenderer:[{onAnyPropChange:0}],valueFormatter:[{onAnyPropChange:0}]}}static get style(){return b()}},[257,"md-area-chart",{label:[1],subtitle:[1],titleAlign:[1,"title-align"],series:[16],xAxis:[16],yAxis:[16],curve:[1],stack:[1],connectNulls:[4,"connect-nulls"],showMarks:[4,"show-marks"],lineWidth:[2,"line-width"],markSize:[2,"mark-size"],legend:[513],tooltip:[1],zoom:[1],locale:[1],valueFormatter:[16],tooltipRenderer:[16],heightProp:[1,"height"],noAnimation:[4,"no-animation"],animation:[1],animationDuration:[2,"animation-duration"],fillOpacity:[2,"fill-opacity"],showLine:[4,"show-line"],grid:[1],inverted:[4],seriesLabels:[4,"series-labels"],summary:[1],tableLabels:[16],labelEmpty:[1,"label-empty"],loading:[4],loadingLabel:[1,"loading-label"],labelZoomStart:[1,"label-zoom-start"],labelZoomEnd:[1,"label-zoom-end"],axisTicks:[4,"axis-ticks"],showLabels:[4,"show-labels"],labelPlot:[1,"label-plot"],labelPoint:[1,"label-point"],density:[514],mounted:[32],kbIndex:[32],announcement:[32],zoomWin:[32],dragBand:[32],resize:[64],replay:[64],toDataURL:[64],getInstance:[64],setZoom:[64],resetZoom:[64]},undefined,{series:[{onAnyPropChange:0}],xAxis:[{onAnyPropChange:0}],yAxis:[{onAnyPropChange:0}],curve:[{onAnyPropChange:0}],stack:[{onAnyPropChange:0}],legend:[{onAnyPropChange:0}],tooltip:[{onAnyPropChange:0}],zoom:[{onAnyPropChange:0}],connectNulls:[{onAnyPropChange:0}],showMarks:[{onAnyPropChange:0}],lineWidth:[{onAnyPropChange:0}],markSize:[{onAnyPropChange:0}],label:[{onAnyPropChange:0}],subtitle:[{onAnyPropChange:0}],titleAlign:[{onAnyPropChange:0}],fillOpacity:[{onAnyPropChange:0}],showLine:[{onAnyPropChange:0}],grid:[{onAnyPropChange:0}],axisTicks:[{onAnyPropChange:0}],showLabels:[{onAnyPropChange:0}],inverted:[{onAnyPropChange:0}],loading:[{onAnyPropChange:0}],animation:[{onAnyPropChange:0}],animationDuration:[{onAnyPropChange:0}],tooltipRenderer:[{onAnyPropChange:0}],valueFormatter:[{onAnyPropChange:0}]}]);function v(){if(typeof customElements==="undefined"){return}const t=["md-area-chart","md-progress-indicator","md-slider"];t.forEach((t=>{switch(t){case"md-area-chart":if(!customElements.get(n(t))){customElements.define(n(t),g)}break;case"md-progress-indicator":if(!customElements.get(n(t))){o()}break;case"md-slider":if(!customElements.get(n(t))){r()}break}}))}v();const x=g;const _=v;export{x as MdAreaChart,_ as defineCustomElement};
+//# sourceMappingURL=md-area-chart.js.map