npm - @awc-ui/core - Versions diffs - 1.0.0-beta.2 → 1.0.0-beta.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (698) hide show

package/dist/components-csr/md-accordion-item.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"names":["mdAccordionItemCss","_uid","nextUid","MdAccordionItem","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","headline","supportingText","icon","expanded","disabled","headingLevel","collapsible","regionRole","contentMaxHeight","density","hasSlottedHeadline","hasSlottedTrailingIcon","hasSlottedLeadingIcon","contentId","headerId","handleHeaderClick","toggleBlocked","handleHeaderKeyDown","e","altKey","key","preventDefault","mdItemRequestReorder","emit","direction","from","index","mdItemRequestFocus","handleDragHandleClick","stopPropagation","handleDragHandleKeyDown","v","el","getAttribute","Number","componentWillLoad","hasDirectSlottedChild","componentDidLoad","bindSlotListener","slotName","children","i","length","name","setter","slot","shadowRoot","querySelector","addEventListener","assignedElements","onExpandedChange","value","mdItemToggle","toggle","focusHeader","headerEl","focus","focusVisible","ariaDisabledHeader","render","hasLeading","level","Math","min","max","HeadingTag","scrollable","trim","h","Host","class","part","role","onClick","onKeyDown","id","type","String","undefined","ref","viewBox","width","height","fill","d","inert","tabindex","style","maxBlockSize"],"sources":["src/components/md-accordion-item/md-accordion-item.css?tag=md-accordion-item&encapsulation=shadow","src/components/md-accordion-item/md-accordion-item.tsx"],"sourcesContent":["/* ==========================================================\n md-accordion-item — single expansible row inside <md-accordion>\n Built around the MD3 Expressive motion vocabulary: the panel\n uses the modern `grid-template-rows: 0fr ↔ 1fr` height trick\n driven by asymmetric emphasized easing (decelerate-on-enter,\n accelerate-on-exit), the chevron rotates on a spring, and the\n leading icon swaps to Material Symbols' FILL axis when active.\n\n PUBLIC CSS CUSTOM PROPERTIES (override per-instance):\n --md-accordion-item-container-color Item background\n --md-accordion-item-container-shape Border-radius (filled variant)\n --md-accordion-item-header-color Header bg in resting state\n --md-accordion-item-header-color-expanded Header bg when expanded.\n Defaults to MD3\n `secondary-container` so the\n active trigger reads as\n \"selected\" (same token used\n by nav drawer, list, etc).\n --md-accordion-item-headline-color Headline text colour\n --md-accordion-item-headline-color-expanded Color when expanded\n --md-accordion-item-supporting-color Supporting-text colour\n --md-accordion-item-icon-color Leading & trailing icon colour\n --md-accordion-item-icon-color-expanded Icon color when expanded\n --md-accordion-item-state-layer-color Hover/focus/press overlay\n --md-accordion-item-state-layer-color-expanded\n State-layer colour while\n expanded — paired with the\n secondary-container tint\n so hover/press still reads.\n --md-accordion-item-header-padding Inline padding for header\n --md-accordion-item-content-padding Inline padding for content area\n --md-accordion-item-header-min-height Minimum block-size of header\n --md-accordion-item-expand-duration Open animation duration\n --md-accordion-item-collapse-duration Close animation duration\n --md-accordion-item-elevation Box-shadow override.\n Inherits the parent\n accordion's elevation when\n in a filled chassis.\n --md-accordion-item-elevation-expanded Shadow when the item is\n expanded (defaults to next\n M3 level).\n --md-accordion-item-chassis-handle-color Glyph colour of the small\n \"move panel\" grip on the\n first item of a floating\n accordion.\n --md-accordion-item-chassis-handle-bg-hover Tint shown behind the grip\n while it is hovered /\n pressed.\n --md-accordion-item-container-color-dragging Opaque fill applied to a\n tile while it is being\n drag-reordered. Defaults\n to surface-container-low\n so the lifted tile\n occludes siblings inside\n floating / outlined\n chassis (which otherwise\n make resting items\n transparent).\n --md-accordion-item-container-shape-dragging Border-radius applied to a\n tile while it is being\n drag-reordered. Defaults\n to shape-corner-medium so\n the lifted tile reads as\n a card even inside an\n outlined chassis that\n flattens resting tiles.\n\n CSS PARTS:\n heading The h3 that wraps the header button.\n header The clickable header button.\n state-layer Hover/focus/press overlay.\n drag-handle Drag grip shown only when the parent\n accordion is `reorderable`.\n chassis-handle Hit area for the chassis-drag affordance on the\n first item of a `floating` accordion. Centered on\n the panel's top edge. Press / drag to move the\n whole panel around the page.\n chassis-handle-bar\n The slim horizontal grip pill that lives inside\n the chassis-handle. Style this part to recolor /\n resize the visible affordance — the hit area\n stays untouched.\n leading-icon Leading icon container.\n trailing-icon Trailing chevron container.\n headline Headline text.\n supporting-text Supporting caption.\n panel The region containing the content.\n content Inner content wrapper (padding lives here).\n\n SLOTS:\n (default) Expanded content.\n headline Replace the headline text with custom markup.\n leading-icon Custom leading icon.\n trailing-icon Custom trailing icon (chevron).\n ========================================================== */\n\n:host {\n --_container-color: var(--md-accordion-item-container-color, var(--md-sys-color-surface-container-low, #F7F2FA));\n --_container-shape: var(--md-accordion-item-container-shape, var(--md-sys-shape-corner-medium, 12px));\n --_container-shape-expanded: var(--md-accordion-item-container-shape-expanded, var(--md-sys-shape-corner-large, 16px));\n\n /* Header tint — transparent at rest (so the host bg shows through),\n MD3 `secondary-container` when expanded. `secondary-container` is\n the canonical \"this surface is active/selected\" tone in MD3 — it\n is the same token used by the nav-drawer active item, list-item\n selection indicator, segmented-button selected segment, etc.\n The on-secondary-container pairing guarantees proper text /\n icon contrast in both light and dark themes. */\n --_header-color: var(--md-accordion-item-header-color, transparent);\n --_header-color-expanded: var(--md-accordion-item-header-color-expanded, var(--md-sys-color-secondary-container, #E8DEF8));\n\n --_headline-color: var(--md-accordion-item-headline-color, var(--md-sys-color-on-surface, #1C1B1F));\n --_headline-color-expanded: var(--md-accordion-item-headline-color-expanded, var(--md-sys-color-on-secondary-container, #1D192B));\n --_supporting-color: var(--md-accordion-item-supporting-color, var(--md-sys-color-on-surface-variant, #49454F));\n --_icon-color: var(--md-accordion-item-icon-color, var(--md-sys-color-on-surface-variant, #49454F));\n --_icon-color-expanded: var(--md-accordion-item-icon-color-expanded, var(--md-sys-color-on-secondary-container, #1D192B));\n --_state-layer-color: var(--md-accordion-item-state-layer-color, var(--md-sys-color-on-surface, #1C1B1F));\n --_state-layer-color-expanded: var(--md-accordion-item-state-layer-color-expanded, var(--md-sys-color-on-secondary-container, #1D192B));\n /* Follow a global `data-density` ancestor. The header height is content-\n floored by its block padding, so BOTH the min-height and the block padding\n ride density-scale (2px/rung on each padding edge); unchanged at density 0.\n The parent md-accordion `density` prop (0|-1|-2) overrides via the\n :host-context blocks below. */\n --_header-padding: var(--md-accordion-item-header-padding, max(4px, calc(16px + var(--md-sys-density-scale, 0) * 2px)) max(12px, calc(24px + var(--md-sys-density-scale, 0) * 2px)));\n --_content-padding: var(--md-accordion-item-content-padding, max(8px, calc(20px + var(--md-sys-density-scale, 0) * 2px)) max(12px, calc(24px + var(--md-sys-density-scale, 0) * 2px)));\n --_header-min-height: var(--md-accordion-item-header-min-height, max(40px, calc(64px + var(--md-sys-density-scale, 0) * 4px)));\n\n /* MD3 asymmetric motion — open with emphasized-decelerate (the\n content \"settles into place\"), close with emphasized-accelerate\n (the content gets out of the way). This is a direct mapping of\n the Material 3 Expressive Motion guidance. */\n --_expand-duration: var(--md-accordion-item-expand-duration, var(--md-sys-motion-duration-medium3, 350ms));\n --_collapse-duration: var(--md-accordion-item-collapse-duration, var(--md-sys-motion-duration-short4, 200ms));\n --_expand-easing: var(--md-sys-motion-easing-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1));\n --_collapse-easing: var(--md-sys-motion-easing-emphasized-accelerate, cubic-bezier(0.3, 0, 0.8, 0.15));\n --_state-easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n --_spring-easing: var(--md-sys-motion-spring-spatial-default-easing, cubic-bezier(0.38, 1.21, 0.22, 1.00));\n --_spring-duration: var(--md-sys-motion-spring-spatial-default-duration, 500ms);\n\n /* Elevation — default to flat. The parent accordion's elevation\n classes (.md-accordion--elevation-N) override these via\n :host-context further down, so an `md-accordion[elevation=\"3\"]`\n wrapper propagates the shadow to every filled tile without any\n extra wiring at the call-site. */\n --_elevation: var(--md-accordion-item-elevation, var(--md-sys-elevation-0, none));\n --_elevation-expanded: var(--md-accordion-item-elevation-expanded, var(--_elevation));\n\n display: block;\n /* Containing block for the absolutely-positioned chassis-drag\n handle that floats over the top-leading corner of the first item. */\n position: relative;\n background-color: var(--_container-color);\n border-radius: var(--_container-shape);\n box-sizing: border-box;\n font-family: var(--md-sys-typescale-body-large-font-family, Roboto, sans-serif);\n box-shadow: var(--_elevation);\n\n /* The container itself morphs on expand: subtle radius lift +\n elevation change → \"lifting off the page\" affordance. */\n transition:\n border-radius var(--_expand-duration) var(--_expand-easing),\n background-color var(--_expand-duration) var(--_expand-easing),\n box-shadow var(--_expand-duration) var(--_expand-easing);\n will-change: border-radius;\n}\n\n/* ── Inherit elevation from a filled parent accordion. Outlined parents\n draw the shadow on their own chassis instead. The expanded shadow is\n the next M3 elevation level for the classic \"tile lifts when active\"\n affordance. */\n:host-context(md-accordion.md-accordion--filled.md-accordion--elevation-1) {\n --_elevation: var(--md-accordion-item-elevation, var(--md-sys-elevation-1));\n --_elevation-expanded: var(--md-accordion-item-elevation-expanded, var(--md-sys-elevation-2));\n}\n:host-context(md-accordion.md-accordion--filled.md-accordion--elevation-2) {\n --_elevation: var(--md-accordion-item-elevation, var(--md-sys-elevation-2));\n --_elevation-expanded: var(--md-accordion-item-elevation-expanded, var(--md-sys-elevation-3));\n}\n:host-context(md-accordion.md-accordion--filled.md-accordion--elevation-3) {\n --_elevation: var(--md-accordion-item-elevation, var(--md-sys-elevation-3));\n --_elevation-expanded: var(--md-accordion-item-elevation-expanded, var(--md-sys-elevation-4));\n}\n:host-context(md-accordion.md-accordion--filled.md-accordion--elevation-4) {\n --_elevation: var(--md-accordion-item-elevation, var(--md-sys-elevation-4));\n --_elevation-expanded: var(--md-accordion-item-elevation-expanded, var(--md-sys-elevation-5));\n}\n:host-context(md-accordion.md-accordion--filled.md-accordion--elevation-5) {\n --_elevation: var(--md-accordion-item-elevation, var(--md-sys-elevation-5));\n --_elevation-expanded: var(--md-accordion-item-elevation-expanded, var(--md-sys-elevation-5));\n}\n\n/* Inside an outlined chassis, items are flush — strip any item-level shadow\n so we don't double up with the chassis shadow. */\n:host-context(md-accordion.md-accordion--outlined) {\n --_elevation: none;\n --_elevation-expanded: none;\n}\n\n:host(.md-accordion-item--expanded) {\n /* Blend the expanded radius back toward the resting one so\n `data-shape-morph=\"off\"` / `shape-morph=\"off\"` (§13 tokens.css) holds the\n tile at its resting corner instead of morphing on expand. Written at the\n USE site, not on --_container-shape-expanded itself, because the outlined\n variant legitimately sets both shapes to 0 and must stay square. */\n border-radius: calc(var(--_container-shape) + var(--md-sys-shape-morph-enabled, 1) * (var(--_container-shape-expanded) - var(--_container-shape)));\n background-color: var(--md-accordion-item-container-color-expanded,\n var(--md-sys-color-surface-container, #F3EDF7));\n box-shadow: var(--_elevation-expanded);\n}\n\n/* When inside an outlined accordion the parent strips the radius\n so the chassis can read as a single rounded rectangle. We override the\n internal radius custom props too so the header (and its state-layer) go\n square along with the host. */\n:host-context(md-accordion.md-accordion--outlined) {\n --_container-shape: 0;\n --_container-shape-expanded: 0;\n\n border-radius: 0;\n background-color: var(--md-accordion-item-container-color, transparent);\n}\n\n/* Density needs NO per-rung block here. The parent md-accordion maps both its\n `density` prop and any inherited global `data-density` onto\n `--md-sys-density-scale`, which crosses the shadow boundary by normal custom-\n property inheritance — so --_header-min-height / --_header-padding /\n --_content-padding (§0) already track it by calc.\n\n A `:host-context(md-accordion.md-accordion--density-N)` ladder used to sit\n here setting 56/48/44/40 against the formula's 60/56/52/48 — it disagreed at\n EVERY rung (it dropped 8px on the first step where the library standard is\n 4px), so the prop and a global ancestor rendered different heights. It also\n relied on :host-context, which Firefox does not implement, so the ladder was\n silently inert there while the formula worked everywhere. */\n\n/* ==========================================================\n 1. HEADER\n ========================================================== */\n\n.md-accordion-item__heading {\n margin: 0;\n font: inherit;\n}\n\n.md-accordion-item__header {\n position: relative;\n display: flex;\n align-items: center;\n gap: max(8px, calc(16px + var(--md-sys-density-scale, 0) * 2px));\n inline-size: 100%;\n min-block-size: var(--_header-min-height);\n padding: var(--_header-padding);\n border: none;\n background-color: var(--_header-color);\n color: var(--_headline-color);\n font-family: var(--md-sys-typescale-title-medium-font-family, Roboto, sans-serif);\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, 500);\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, 0.15px);\n text-align: start;\n cursor: pointer;\n box-sizing: border-box;\n overflow: hidden;\n\n /* `border-radius: inherit` does NOT walk up to :host through the h3 —\n `inherit` resolves to the cascade parent's computed value (the h3 has\n no border-radius set, so it resolves to 0). Use the custom-prop chain\n directly instead. */\n border-radius: var(--_container-shape);\n\n transition:\n background-color var(--_expand-duration) var(--_expand-easing),\n color var(--_spring-duration) var(--_spring-easing),\n border-radius var(--_expand-duration) var(--_expand-easing);\n}\n\n/* State layer — separate element so we can animate opacity\n independently of the content. */\n.md-accordion-item__state-layer {\n position: absolute;\n inset: 0;\n background-color: var(--_state-layer-color);\n opacity: 0;\n pointer-events: none;\n transition: opacity var(--md-sys-motion-spring-effects-default-duration, 200ms) var(--_state-easing);\n}\n\n.md-accordion-item__header:hover .md-accordion-item__state-layer {\n opacity: var(--md-sys-state-hover-state-layer-opacity, 0.08);\n}\n.md-accordion-item__header:focus-visible .md-accordion-item__state-layer {\n opacity: var(--md-sys-state-focus-state-layer-opacity, 0.12);\n}\n.md-accordion-item__header:active .md-accordion-item__state-layer {\n opacity: var(--md-sys-state-pressed-state-layer-opacity, 0.12);\n}\n\n:host(.md-accordion-item--expanded) .md-accordion-item__header {\n /* MD3 \"selected surface\" treatment — secondary-container tint\n makes the active trigger row read distinctly from both the\n collapsed siblings (surface-container-low) and the expanded\n panel body (surface-container). */\n background-color: var(--_header-color-expanded);\n color: var(--_headline-color-expanded);\n /* When expanded, only round the TOP corners — the bottom edge meets the\n panel inside the host, so curved bottom corners would leave visible\n notches showing the host's container colour. */\n border-start-start-radius: var(--_container-shape-expanded);\n border-start-end-radius: var(--_container-shape-expanded);\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n}\n\n/* Hover / focus / press state-layer must contrast with the tinted\n header surface — use on-secondary-container while expanded so the\n overlay reads correctly. */\n:host(.md-accordion-item--expanded) .md-accordion-item__state-layer {\n background-color: var(--_state-layer-color-expanded);\n}\n\n.md-accordion-item__header:focus-visible {\n outline: 3px solid var(--md-sys-color-secondary, #625B71);\n outline-offset: -3px;\n}\n\n.md-accordion-item__header:disabled,\n:host(.md-accordion-item--disabled) .md-accordion-item__header {\n cursor: not-allowed;\n color: color-mix(in srgb, var(--_headline-color) 38%, transparent);\n}\n:host(.md-accordion-item--disabled) .md-accordion-item__state-layer,\n:host(.md-accordion-item--disabled) md-ripple {\n display: none;\n}\n\n/* Disabled + expanded → fade the highlight to the MD3\n disabled-container opacity (12%) so the tint reads as\n \"non-interactive but currently open\" rather than \"active\". */\n:host(.md-accordion-item--disabled.md-accordion-item--expanded) .md-accordion-item__header {\n background-color: color-mix(\n in srgb,\n var(--_header-color-expanded) calc(var(--md-sys-state-disabled-container-opacity, 0.12) * 100%),\n transparent\n );\n}\n\n/* ==========================================================\n 1b. DRAG HANDLE — only visible when parent accordion is\n `reorderable`. Lives inside the header `<button>`, so we\n neutralise its `click` & `keydown` from bubbling (the TSX\n does this). Actual drag is managed by the parent via\n pointerdown on `[data-accordion-drag-handle]`.\n ========================================================== */\n\n.md-accordion-item__drag-handle {\n display: none;\n position: relative;\n align-items: center;\n justify-content: center;\n inline-size: 24px;\n block-size: 24px;\n flex-shrink: 0;\n margin-inline-end: -4px;\n color: var(--_icon-color);\n cursor: grab;\n /* Stops touch-drag from scrolling the page on mobile while the\n user grabs an item. */\n touch-action: none;\n opacity: 0.55;\n transition:\n opacity var(--_spring-duration) var(--_spring-easing),\n transform var(--_spring-duration) var(--_spring-easing),\n color var(--_spring-duration) var(--_spring-easing);\n}\n.md-accordion-item__drag-handle:hover {\n opacity: 1;\n color: var(--_headline-color-expanded);\n transform: scale(1.08);\n}\n.md-accordion-item__drag-handle:active {\n cursor: grabbing;\n}\n\n.md-accordion-item__drag-handle-icon {\n font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n font-size: max(16px, calc(22px + var(--md-sys-density-scale, 0) * 1px));\n line-height: 1;\n font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n -webkit-font-smoothing: antialiased;\n pointer-events: none;\n}\n\n/* Reveal only when the parent accordion has `reorderable`. The\n prop is reflected so the attribute is reliably present. */\n:host-context(md-accordion[reorderable]) .md-accordion-item__drag-handle {\n display: inline-flex;\n}\n\n/* Disabled items can't be moved, so hide the handle.\n `!important` is used to override the `:host-context(...)` rule\n above — its `[reorderable]` attribute selector raises its\n specificity above plain `:host(.class)` in some engines, so\n without `!important` the handle would still appear on disabled\n items inside reorderable accordions. */\n:host(.md-accordion-item--disabled) .md-accordion-item__drag-handle {\n display: none !important;\n}\n\n/* ----------------------------------------------------------\n Chassis-drag handle\n ----------------------------------------------------------\n A slim horizontal grip pill at the TOP-CENTER of the FIRST\n item of a `floating` accordion — the affordance iOS sheets,\n macOS Stage Manager, and Android bottom-sheets use. The\n parent reveals it by setting `data-chassis-handle` only on\n item 0, so the rest of the accordion keeps its silhouette.\n\n Two layered elements:\n - `.md-accordion-item__chassis-handle` is the (deliberately\n larger) hit area. ~52×16 by default — comfortable touch\n target without bleeding into the headline.\n - `.md-accordion-item__chassis-handle-bar` is the visible\n pill itself: 32×4 at rest, fades / widens on hover &\n drag. Always centered inside the hit area.\n\n Public CSS custom properties:\n --md-accordion-item-chassis-handle-color Pill colour\n --md-accordion-item-chassis-handle-bg-hover Tint behind\n the bar on\n hover/press.\n*/\n.md-accordion-item__chassis-handle {\n /* Hidden by default — the parent reveals it on the first\n item of a floating accordion. */\n display: none;\n position: absolute;\n inset-block-start: 4px;\n /*\n Centre the handle along the inline axis using the modern\n auto-margin pattern. Anchoring with `inset-inline: 0` and\n letting `margin-inline: auto` do the work mirrors correctly\n in RTL — unlike `inset-inline-start: 50% + translateX(-50%)`,\n where the physical transform doesn't flip with the writing\n direction and pushes the handle off-centre.\n */\n inset-inline: 0;\n margin-inline: auto;\n z-index: 3;\n inline-size: 52px;\n block-size: 16px;\n align-items: center;\n justify-content: center;\n border-radius: 999px;\n background-color: transparent;\n cursor: grab;\n touch-action: none;\n user-select: none;\n transition:\n background-color var(--_spring-duration) var(--_spring-easing);\n}\n\n:host([data-chassis-handle]) .md-accordion-item__chassis-handle {\n display: inline-flex;\n}\n\n/* Subtle hover tint behind the bar so the hit area becomes\n discoverable without ever competing with the headline. */\n.md-accordion-item__chassis-handle:hover {\n background-color: var(\n --md-accordion-item-chassis-handle-bg-hover,\n color-mix(in srgb, var(--_state-layer-color) 10%, transparent)\n );\n}\n\n.md-accordion-item__chassis-handle:active {\n cursor: grabbing;\n background-color: var(\n --md-accordion-item-chassis-handle-bg-hover,\n color-mix(in srgb, var(--_state-layer-color) 16%, transparent)\n );\n}\n\n/* The visible pill */\n.md-accordion-item__chassis-handle-bar {\n display: block;\n inline-size: 32px;\n block-size: 4px;\n border-radius: 999px;\n background-color: var(\n --md-accordion-item-chassis-handle-color,\n var(--md-sys-color-on-surface-variant, #49454F)\n );\n opacity: 0.45;\n pointer-events: none;\n transition:\n inline-size var(--_spring-duration) var(--_spring-easing),\n opacity var(--_spring-duration) var(--_spring-easing),\n background-color var(--_expand-duration) var(--_expand-easing);\n}\n\n/* Hover widens & brightens the pill for a tactile \"you can grab\n this\" hint. Active state pushes it a touch wider still. */\n.md-accordion-item__chassis-handle:hover .md-accordion-item__chassis-handle-bar {\n opacity: 0.9;\n inline-size: 38px;\n}\n\n.md-accordion-item__chassis-handle:active .md-accordion-item__chassis-handle-bar {\n opacity: 1;\n inline-size: 40px;\n}\n\n/* While the panel is actually being dragged, lock the bar to its\n fullest state so the user sees the affordance they grabbed.\n Chassis-drag state lives on the parent <md-accordion>, hence\n `:host-context`. */\n:host-context(md-accordion.md-accordion--floating-dragging)\n .md-accordion-item__chassis-handle-bar {\n opacity: 1;\n inline-size: 40px;\n background-color: var(\n --md-accordion-item-chassis-handle-color,\n var(--md-sys-color-primary, #6750A4)\n );\n}\n\n/* When the expanded header switches to secondary-container, adopt\n the on-secondary-container tone for the bar so it stays legible\n against the active surface. */\n:host(.md-accordion-item--expanded) .md-accordion-item__chassis-handle-bar {\n background-color: var(\n --md-accordion-item-chassis-handle-color,\n var(--md-sys-color-on-secondary-container, #1D192B)\n );\n}\n\n/* Forced-colors fallback so the pill remains visible against\n custom system contrast palettes. */\n@media (forced-colors: active) {\n .md-accordion-item__chassis-handle-bar {\n background-color: CanvasText;\n opacity: 1;\n }\n}\n\n/* ==========================================================\n 1c. DRAG / REORDER STATES\n ========================================================== */\n\n/* The currently-grabbed item — lifted with M3 elevation-4, slight\n tilt for that \"picked up\" feel. The parent applies a live\n `transform: translateY(...)` inline; we layer `rotate` on top by\n *not* setting transform here, instead using a child transform-\n layer would be ideal — but Stencil's shadow root gives us a\n clean canvas, so we accept that the rotate is omitted while the\n inline translate is applied. The elevation + colour shift give\n enough affordance on their own.\n\n IMPORTANT — opaque fill while dragging:\n The floating-filled and outlined chassis zero out each item's\n container-color so the panel reads as one card. That works for\n resting layout, but during a drag the lifted tile physically\n overlaps siblings, and a transparent fill lets their text bleed\n through. We restore an opaque surface fill (and a card radius)\n here so the dragged tile cleanly occludes whatever it passes\n over. Specificity (.class on :host) outranks the parent's\n ::slotted variable override on `--md-accordion-item-container-color`\n because `background-color` is set as a direct declaration — not\n via the custom property — at this level. */\n:host(.md-accordion-item--dragging) {\n z-index: 10;\n cursor: grabbing;\n background-color: var(\n --md-accordion-item-container-color-dragging,\n var(--md-sys-color-surface-container-low, #F7F2F9)\n );\n border-radius: var(\n --md-accordion-item-container-shape-dragging,\n var(--md-sys-shape-corner-medium, 12px)\n );\n /* Clip inner surfaces to the dragging radius. Without this, an\n EXPANDED item being dragged paints its secondary-container header\n tint (and the panel body underneath) as rectangles that bleed past\n the host's rounded corners — visible as a square halo behind the\n lifted card. `overflow: hidden` on the host forces the header\n state-layer, panel body, and any other shadow-tree surface to\n respect the dragging radius. The inner chassis-handle pill of a\n floating accordion's first item is clipped during the drag itself,\n which is acceptable: the user has another grip in hand and the\n pill snaps back the moment the drag ends. */\n overflow: hidden;\n box-shadow:\n var(--md-sys-elevation-4,\n 0px 6px 10px 4px rgba(0, 0, 0, 0.15),\n 0px 2px 3px rgba(0, 0, 0, 0.3)) !important;\n /* Suppress the host's normal box-shadow transition so the lift\n reads as instantaneous. */\n transition: none !important;\n}\n:host(.md-accordion-item--dragging) .md-accordion-item__header {\n /* Stop hover / press state-layer from flickering while we drag. */\n pointer-events: none;\n}\n:host(.md-accordion-item--dragging) .md-accordion-item__drag-handle {\n opacity: 1;\n color: var(--_icon-color-expanded);\n}\n\n/* Sibling items shifting to make room — smooth M3 emphasized\n easing so the items glide rather than jump. */\n:host(.md-accordion-item--shifting) {\n transition: transform var(--md-sys-motion-duration-short3, 200ms) var(--_state-easing);\n will-change: transform;\n}\n\n/* ==========================================================\n 2. LEADING & TRAILING SLOTS\n ========================================================== */\n\n.md-accordion-item__leading {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 24px;\n block-size: 24px;\n flex-shrink: 0;\n color: var(--_icon-color);\n transition:\n color var(--_spring-duration) var(--_spring-easing),\n transform var(--_spring-duration) var(--_spring-easing);\n}\n\n:host(.md-accordion-item--expanded) .md-accordion-item__leading {\n color: var(--_icon-color-expanded);\n transform: scale(1.05);\n}\n\n.md-accordion-item__icon {\n font-family: var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');\n font-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n line-height: 1;\n /* MD3 Expressive trick: when the item is expanded, fade the\n Material Symbols FILL axis from 0 to 1 — the icon literally\n \"comes alive\". */\n font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n transition: font-variation-settings var(--_spring-duration) var(--_spring-easing);\n}\n\n:host(.md-accordion-item--expanded) .md-accordion-item__icon {\n font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;\n}\n\n.md-accordion-item__text {\n flex: 1;\n display: flex;\n flex-direction: column;\n min-inline-size: 0;\n gap: 2px;\n}\n\n.md-accordion-item__headline {\n display: block;\n color: inherit;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.md-accordion-item__supporting {\n display: block;\n color: var(--_supporting-color);\n font-family: var(--md-sys-typescale-body-small-font-family, Roboto, sans-serif);\n font-size: max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));\n font-weight: var(--md-sys-typescale-body-small-font-weight, 400);\n line-height: max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));\n letter-spacing: var(--md-sys-typescale-body-small-letter-spacing, 0.4px);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.md-accordion-item__trailing {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n block-size: max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));\n flex-shrink: 0;\n color: var(--_icon-color);\n /* Spring-spatial easing gives the chevron a touch of \"overshoot\"\n when it rotates — true MD3 Expressive motion. */\n transition:\n transform var(--_spring-duration) var(--_spring-easing),\n color var(--_spring-duration) var(--_spring-easing);\n}\n\n:host(.md-accordion-item--expanded) .md-accordion-item__trailing {\n transform: rotate(180deg);\n color: var(--_icon-color-expanded);\n}\n\n/* RTL: chevron mirror so the rotated chevron still points \"down\"\n when collapsed and \"up\" when expanded. */\n:host([dir=\"rtl\"]) .md-accordion-item__trailing,\n:host-context([dir=\"rtl\"]) .md-accordion-item__trailing {\n transform: none;\n}\n:host([dir=\"rtl\"].md-accordion-item--expanded) .md-accordion-item__trailing,\n:host-context([dir=\"rtl\"]).md-accordion-item--expanded .md-accordion-item__trailing {\n transform: rotate(180deg);\n}\n\n/* ==========================================================\n 3. PANEL — grid-rows height animation\n This is the modern MD3 height-animation pattern: a grid with\n one row that animates `fr` between 0 and 1, plus an inner\n `min-height: 0` child so the grid can collapse below intrinsic\n size. The result is a smooth height transition with NO\n measurement JS — pure CSS, RTL-safe, and reduced-motion safe.\n ========================================================== */\n\n.md-accordion-item__panel {\n display: grid;\n grid-template-rows: 0fr;\n transition:\n grid-template-rows var(--_collapse-duration) var(--_collapse-easing),\n opacity var(--_collapse-duration) var(--_collapse-easing);\n opacity: 0;\n}\n\n:host(.md-accordion-item--expanded) .md-accordion-item__panel {\n grid-template-rows: 1fr;\n opacity: 1;\n transition:\n grid-template-rows var(--_expand-duration) var(--_expand-easing),\n opacity var(--_expand-duration) var(--_expand-easing);\n}\n\n.md-accordion-item__content {\n /* This is the grid item — it must have NO padding or border in the\n block axis, otherwise its intrinsic min-size dominates the `0fr`\n track and leaves a visible gap below the header when collapsed.\n All visual padding lives on the inner wrapper one level deeper. */\n min-block-size: 0;\n overflow: hidden;\n}\n\n.md-accordion-item__content-inner {\n padding: var(--_content-padding);\n color: var(--_supporting-color);\n font-family: var(--md-sys-typescale-body-medium-font-family, Roboto, sans-serif);\n font-size: max(12px, calc(14px + var(--md-sys-density-scale, 0) * 0.5px));\n font-weight: var(--md-sys-typescale-body-medium-font-weight, 400);\n line-height: max(16px, calc(20px + var(--md-sys-density-scale, 0) * 1px));\n\n /* The inner content also slides down a few pixels — child motion\n coordinated with parent motion (\"staggered choreography\" per\n M3 Motion guidance). */\n transform: translateY(-4px);\n transition: transform var(--_expand-duration) var(--_expand-easing);\n}\n\n:host(.md-accordion-item--expanded) .md-accordion-item__content-inner {\n transform: translateY(0);\n}\n\n/* Capped, keyboard-accessible scroll region. When the `content-max-height`\n prop is set, the panel body scrolls within that block-size (the\n `max-block-size` is applied inline from the prop) instead of growing to\n fit. The element also carries `tabindex=\"0\"` (set in the .tsx) so\n keyboard-only users can scroll it — WCAG 2.1.1 / axe\n `scrollable-region-focusable`. Only the BLOCK axis scrolls; the inline\n axis stays clipped so a stray wide child can't spawn a second scrollbar. */\n.md-accordion-item__content-inner--scroll {\n overflow-x: hidden;\n overflow-y: auto;\n overscroll-behavior: contain;\n}\n.md-accordion-item__content-inner--scroll:focus-visible {\n outline: 3px solid var(--md-sys-color-secondary, #625B71);\n outline-offset: -3px;\n}\n\n/* ==========================================================\n 3b. TRANSITION PRESETS\n ----------------------------------------------------------\n The parent <md-accordion> reflects a `transition` attribute\n that selects one of five motion presets:\n\n expressive (default) full MD3 expressive choreography\n standard symmetric `emphasized` easing, no spring\n fade content fades, no spatial morph\n collapse pure height collapse, no fade, no spring\n none instant snap (no transitions / animations)\n\n We implement the variants by re-binding the existing internal\n timing variables — every place in this file that animates\n already consumes `--_expand-*`, `--_collapse-*`, and\n `--_spring-*`, so the presets propagate everywhere without\n touching individual rules. A small handful of structural\n tweaks (suppress the inner translateY for `fade`, lock panel\n opacity at 1 for `collapse`, hard-disable transitions for\n `none`) finish the picture.\n ========================================================== */\n\n/* ── Standard — MD3 symmetric `emphasized`, no spring overshoot ── */\n:host-context(md-accordion[transition='standard']) {\n --_expand-easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n --_collapse-easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n --_spring-easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n --_state-easing: var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));\n --_spring-duration: var(--md-sys-motion-duration-medium2, 300ms);\n --_expand-duration: var(--md-accordion-item-expand-duration, var(--md-sys-motion-duration-medium2, 300ms));\n --_collapse-duration: var(--md-accordion-item-collapse-duration, var(--md-sys-motion-duration-medium2, 300ms));\n}\n\n/* ── Fade — opacity-led, suppress the inner translateY so the\n motion reads as a clean cross-fade. Shorter, \"standard\"\n easing keeps the height movement quiet. ── */\n:host-context(md-accordion[transition='fade']) {\n --_expand-easing: var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n --_collapse-easing: var(--md-sys-motion-easing-standard, cubic-bezier(0.4, 0, 1, 1));\n --_spring-easing: var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n --_state-easing: var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1));\n --_spring-duration: var(--md-sys-motion-duration-short3, 175ms);\n --_expand-duration: var(--md-accordion-item-expand-duration, var(--md-sys-motion-duration-medium2, 300ms));\n --_collapse-duration: var(--md-accordion-item-collapse-duration, var(--md-sys-motion-duration-short4, 200ms));\n}\n:host-context(md-accordion[transition='fade']) .md-accordion-item__content-inner {\n /* Drop the staggered translate so only opacity reads */\n transform: none;\n}\n\n/* ── Collapse — pure height collapse with neutral easing. Lock the\n panel opacity at 1 so there is no fade, only height. The\n chevron and leading icon still rotate, but with the same\n neutral easing — no spring overshoot. ── */\n:host-context(md-accordion[transition='collapse']) {\n --_expand-easing: cubic-bezier(0, 0, 0.2, 1); /* ease-out */\n --_collapse-easing: cubic-bezier(0.4, 0, 1, 1); /* ease-in */\n --_spring-easing: cubic-bezier(0, 0, 0.2, 1);\n --_state-easing: cubic-bezier(0.4, 0, 0.2, 1); /* ease-in-out */\n --_spring-duration: var(--md-sys-motion-duration-medium2, 300ms);\n --_expand-duration: var(--md-accordion-item-expand-duration, var(--md-sys-motion-duration-medium2, 300ms));\n --_collapse-duration: var(--md-accordion-item-collapse-duration, var(--md-sys-motion-duration-medium2, 300ms));\n}\n:host-context(md-accordion[transition='collapse']) .md-accordion-item__panel,\n:host-context(md-accordion[transition='collapse'].md-accordion-item--expanded)\n .md-accordion-item__panel {\n opacity: 1;\n}\n:host-context(md-accordion[transition='collapse']) .md-accordion-item__content-inner {\n transform: none;\n}\n\n/* ── None — instant. Hard-disable transitions and animations on\n both the host and every internal element. The panel still\n expands/collapses (the `grid-template-rows` value flips),\n but it flips without animation. ── */\n:host-context(md-accordion[transition='none']),\n:host-context(md-accordion[transition='none']) *,\n:host-context(md-accordion[transition='none']) *::before,\n:host-context(md-accordion[transition='none']) *::after {\n transition: none !important;\n animation-duration: 0.001ms !important;\n animation-iteration-count: 1 !important;\n}\n\n/* ==========================================================\n 4. REDUCED MOTION\n ========================================================== */\n@media (prefers-reduced-motion: reduce) {\n :host,\n .md-accordion-item__header,\n .md-accordion-item__state-layer,\n .md-accordion-item__leading,\n .md-accordion-item__icon,\n .md-accordion-item__trailing,\n .md-accordion-item__panel,\n .md-accordion-item__content {\n transition-duration: 0.01ms !important;\n animation: none !important;\n }\n :host(.md-accordion-item--expanded) .md-accordion-item__leading {\n transform: none;\n }\n}\n\n/* ==========================================================\n 5. FORCED COLORS\n ========================================================== */\n@media (forced-colors: active) {\n :host {\n border: 1px solid CanvasText;\n }\n .md-accordion-item__header:focus-visible {\n outline-color: Highlight;\n }\n .md-accordion-item__state-layer {\n display: none;\n }\n}\n\n/* ==========================================================\n DENSITY (local override)\n Maps the local `density` prop onto the same --md-sys-density-scale signal a\n global `data-density` ancestor sets. Declared on :host, so a local rung wins\n over the inherited global one. Every density-sensitive value in this file\n derives from that single signal by calc — never add a fixed per-rung ladder.\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","import {\n Component,\n Host,\n h,\n Prop,\n State,\n Element,\n Event,\n EventEmitter,\n Method,\n Watch,\n} from '@stencil/core';\n\nlet _uid = 0;\nconst nextUid = () => `md-acc-item-${++_uid}`;\n\n@Component({\n tag: 'md-accordion-item',\n styleUrl: 'md-accordion-item.css',\n shadow: true,\n})\nexport class MdAccordionItem {\n @Element() el!: HTMLElement;\n\n /** Header text (or use the `headline` slot). */\n @Prop() headline: string = '';\n\n /** Optional small caption below the headline. */\n @Prop({ attribute: 'supporting-text' }) supportingText: string = '';\n\n /** Optional leading-icon (Material Symbols shorthand). */\n @Prop() icon: string = '';\n\n /** Whether the item is expanded. Two-way bindable. */\n @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n /** Disable interaction. */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /**\n * ARIA heading level (`aria-level`) for the item's heading wrapper.\n * Renders a native `<h1>`–`<h6>` so the implicit semantics match the\n * page's information architecture. Per WAI-ARIA APG: \"an element with\n * role heading that has a value set for aria-level that is\n * appropriate for the information architecture of the page\".\n *\n * Set per-item, or let the parent `<md-accordion heading-level>`\n * propagate the same value to every item.\n */\n @Prop({ attribute: 'heading-level' }) headingLevel: 1 | 2 | 3 | 4 | 5 | 6 = 3;\n\n /**\n * Whether the item can be collapsed when it is expanded. Set to\n * `false` to implement the APG variant where the accordion does not\n * permit a panel to be collapsed — the open button then advertises\n * `aria-disabled=\"true\"`, and Enter / Space / click no longer toggle\n * it. Typically managed by the parent's `keep-one-expanded` mode.\n */\n @Prop() collapsible: boolean = true;\n\n /**\n * Role applied to the accordion panel. APG recommends `region` for\n * structural clarity, but warns against using it when more than ~6\n * panels can be open at once (landmark proliferation). The parent\n * `<md-accordion region>` orchestrates this automatically.\n *\n * - `region` (default) — full landmark semantics.\n * - `group` — semantically a group but not a landmark.\n * - `none` — drop the role entirely (still labelled via aria-labelledby).\n */\n @Prop({ mutable: true, attribute: 'region-role' }) regionRole:\n | 'region'\n | 'group'\n | 'none' = 'region';\n\n /**\n * Cap the panel body's block-size (e.g. `\"220px\"`, `\"40vh\"`). When set,\n * the content region becomes a scroll container instead of growing to\n * fit — and, crucially, it is made keyboard-focusable (`tabindex=\"0\"`)\n * so keyboard-only users can scroll it. A scrollable region whose\n * content isn't itself focusable is otherwise unreachable without a\n * pointer (WCAG 2.1.1 — axe `scrollable-region-focusable`). Its\n * accessible name comes from the enclosing labelled panel region.\n *\n * Prefer this over hand-rolling a slotted `overflow:auto` wrapper: an\n * authored scroll `<div>` lives in light DOM the component can't make\n * focusable, so it would trip the same axe rule. Leave empty (default)\n * for a panel that grows to fit its content.\n */\n @Prop({ attribute: 'content-max-height' }) contentMaxHeight: string = '';\n\n /**\n * Local density rung. Drives the same `--md-sys-density-scale` signal that a\n * global `data-density` ancestor sets, so a local value simply overrides the\n * inherited one. 0 = default, -4 = ultra-compact.\n */\n @Prop({ reflect: true }) density: 0 | -1 | -2 | -3 | -4 = 0;\n\n /**\n * Emitted whenever the item toggles. The parent `md-accordion` uses\n * this to coordinate exclusive mode.\n */\n @Event() mdItemToggle: EventEmitter<{ expanded: boolean; index: number }>;\n\n /**\n * Internal event the parent listens to for arrow-key roving focus.\n * Bubbles + composed so the parent receives it through the shadow.\n */\n @Event({ bubbles: true, composed: true })\n mdItemRequestFocus: EventEmitter<{\n direction: 'next' | 'prev' | 'first' | 'last';\n from: number;\n }>;\n\n /**\n * Internal event the parent listens to for Alt+Arrow keyboard\n * reordering. Bubbles + composed so the parent receives it\n * through the shadow.\n */\n @Event({ bubbles: true, composed: true })\n mdItemRequestReorder: EventEmitter<{\n direction: 'up' | 'down';\n from: number;\n }>;\n\n @State() private hasSlottedHeadline = false;\n @State() private hasSlottedTrailingIcon = false;\n @State() private hasSlottedLeadingIcon = false;\n\n private readonly contentId = nextUid();\n private readonly headerId = `${this.contentId}-header`;\n private headerEl?: HTMLButtonElement;\n\n private get index(): number {\n const v = this.el.getAttribute('data-index');\n return v == null ? -1 : Number(v);\n }\n\n componentWillLoad() {\n this.hasSlottedHeadline = this.hasDirectSlottedChild('headline');\n this.hasSlottedLeadingIcon = this.hasDirectSlottedChild('leading-icon');\n this.hasSlottedTrailingIcon = this.hasDirectSlottedChild('trailing-icon');\n }\n\n componentDidLoad() {\n this.bindSlotListener('headline', (v) => (this.hasSlottedHeadline = v));\n this.bindSlotListener('leading-icon', (v) => (this.hasSlottedLeadingIcon = v));\n this.bindSlotListener('trailing-icon', (v) => (this.hasSlottedTrailingIcon = v));\n }\n\n private hasDirectSlottedChild(slotName: string): boolean {\n const children = this.el.children;\n for (let i = 0; i < children.length; i += 1) {\n if (children[i].getAttribute('slot') === slotName) return true;\n }\n return false;\n }\n\n private bindSlotListener(name: string, setter: (b: boolean) => void) {\n const slot = this.el.shadowRoot?.querySelector(\n `slot[name=\"${name}\"]`,\n ) as HTMLSlotElement | null;\n if (!slot) return;\n slot.addEventListener('slotchange', () => {\n setter(slot.assignedElements().length > 0);\n });\n }\n\n @Watch('expanded')\n onExpandedChange(value: boolean) {\n this.mdItemToggle.emit({ expanded: value, index: this.index });\n }\n\n /** Programmatically toggle the item. */\n @Method()\n async toggle(): Promise<void> {\n if (this.disabled) return;\n this.expanded = !this.expanded;\n }\n\n /**\n * Move keyboard focus to the item's header.\n *\n * Uses `{ focusVisible: true }` so the focus ring is painted even when\n * the call originates from a mouse-driven action (e.g. another button\n * in the page calling `await item.focusHeader()`). Without it, browsers\n * inherit the last input modality and skip the focus-visible ring on\n * mouse-initiated programmatic focus, leaving the user wondering whether\n * the call did anything. The option is supported in evergreen Chromium\n * (137+), Firefox (134+) and Safari (17.4+); older runtimes ignore it\n * harmlessly and fall back to the prior behaviour.\n */\n @Method()\n async focusHeader(): Promise<void> {\n this.headerEl?.focus({ focusVisible: true } as FocusOptions);\n }\n\n /**\n * `true` when the button must advertise itself as un-actionable even\n * though it still receives focus (so screen readers can announce\n * state). Native `disabled` is reserved for the developer-set\n * `disabled` prop, because a natively-disabled button is unreachable\n * by keyboard — APG wants the locked-open button to still be focusable\n * so users can hear that it is the open panel.\n */\n private get ariaDisabledHeader(): boolean {\n return this.disabled || (this.expanded && !this.collapsible);\n }\n\n /**\n * Whether the next toggle attempt would be rejected. Used to guard\n * click / Enter / Space so the implementation matches the ARIA\n * advertisement of \"can't be collapsed\".\n */\n private toggleBlocked(): boolean {\n if (this.disabled) return true;\n if (this.expanded && !this.collapsible) return true;\n return false;\n }\n\n private handleHeaderClick = () => {\n if (this.toggleBlocked()) return;\n this.expanded = !this.expanded;\n };\n\n private handleHeaderKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n // Alt+ArrowUp/Down → ask the parent to reorder this item.\n // Only meaningful when the parent has `reorderable` set; the parent\n // ignores the event otherwise.\n if (e.altKey && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {\n e.preventDefault();\n this.mdItemRequestReorder.emit({\n direction: e.key === 'ArrowUp' ? 'up' : 'down',\n from: this.index,\n });\n return;\n }\n switch (e.key) {\n case 'Enter':\n case ' ':\n e.preventDefault();\n if (this.toggleBlocked()) return;\n this.expanded = !this.expanded;\n break;\n case 'ArrowDown':\n e.preventDefault();\n this.mdItemRequestFocus.emit({ direction: 'next', from: this.index });\n break;\n case 'ArrowUp':\n e.preventDefault();\n this.mdItemRequestFocus.emit({ direction: 'prev', from: this.index });\n break;\n case 'Home':\n e.preventDefault();\n this.mdItemRequestFocus.emit({ direction: 'first', from: this.index });\n break;\n case 'End':\n e.preventDefault();\n this.mdItemRequestFocus.emit({ direction: 'last', from: this.index });\n break;\n }\n };\n\n /**\n * Drag handles live INSIDE the header `<button>`, so a tap on the\n * handle would normally also fire the button click and toggle the\n * panel. We block click + keydown from bubbling out of the handle\n * — the actual drag is managed by the parent accordion via\n * pointerdown on the bubbling event path.\n */\n private handleDragHandleClick = (e: MouseEvent) => {\n e.stopPropagation();\n };\n private handleDragHandleKeyDown = (e: KeyboardEvent) => {\n e.stopPropagation();\n };\n\n render() {\n const hasLeading = !!this.icon || this.hasSlottedLeadingIcon;\n // Clamp heading-level to a valid 1..6 range; render the matching\n // native heading element so the implicit `aria-level` is correct\n // without us having to emit an explicit `aria-level` attribute.\n const level = Math.min(6, Math.max(1, this.headingLevel | 0));\n const HeadingTag = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n // A capped panel body scrolls; it must be keyboard-reachable so\n // arrow keys can scroll it (WCAG 2.1.1 / axe scrollable-region-focusable).\n const scrollable = this.contentMaxHeight.trim().length > 0;\n return (\n <Host\n class={{\n 'md-accordion-item': true,\n 'md-accordion-item--expanded': this.expanded,\n 'md-accordion-item--disabled': this.disabled,\n }}\n >\n {/*\n Chassis-drag handle — a slim horizontal grip pill, centered at the\n top edge of the first item (the parent reveals it via\n `data-chassis-handle`). Same affordance iOS / macOS / Android use\n for \"drag this sheet\". Lives OUTSIDE the heading button so pressing\n it doesn't also fire the expand toggle. `data-accordion-chassis-drag`\n is the convention the parent looks for in `composedPath`.\n\n Two parts ship: the outer span is the (intentionally larger) hit\n area, the inner span is the visible pill. Consumers can restyle\n either via `::part(chassis-handle)` / `::part(chassis-handle-bar)`.\n */}\n <span\n class=\"md-accordion-item__chassis-handle\"\n part=\"chassis-handle\"\n data-accordion-chassis-drag=\"true\"\n role=\"presentation\"\n aria-hidden=\"true\"\n onClick={this.handleDragHandleClick}\n onKeyDown={this.handleDragHandleKeyDown}\n >\n <span class=\"md-accordion-item__chassis-handle-bar\" part=\"chassis-handle-bar\"></span>\n </span>\n <HeadingTag class=\"md-accordion-item__heading\" part=\"heading\">\n <button\n id={this.headerId}\n class=\"md-accordion-item__header\"\n part=\"header\"\n type=\"button\"\n aria-expanded={String(this.expanded)}\n aria-controls={this.contentId}\n aria-disabled={this.ariaDisabledHeader ? 'true' : undefined}\n disabled={this.disabled}\n onClick={this.handleHeaderClick}\n onKeyDown={this.handleHeaderKeyDown}\n ref={(el) => (this.headerEl = el)}\n >\n <md-ripple disabled={this.disabled}></md-ripple>\n <span class=\"md-accordion-item__state-layer\" part=\"state-layer\" aria-hidden=\"true\"></span>\n <span\n class=\"md-accordion-item__drag-handle\"\n part=\"drag-handle\"\n data-accordion-drag-handle=\"true\"\n aria-hidden=\"true\"\n onClick={this.handleDragHandleClick}\n onKeyDown={this.handleDragHandleKeyDown}\n >\n <span class=\"material-symbols-outlined md-accordion-item__drag-handle-icon\">\n drag_indicator\n </span>\n </span>\n {hasLeading && (\n <span class=\"md-accordion-item__leading\" part=\"leading-icon\" aria-hidden=\"true\">\n <slot name=\"leading-icon\">\n {this.icon && (\n <span class=\"material-symbols-outlined md-accordion-item__icon\">\n {this.icon}\n </span>\n )}\n </slot>\n </span>\n )}\n <span class=\"md-accordion-item__text\">\n <span class=\"md-accordion-item__headline\" part=\"headline\">\n <slot name=\"headline\">{this.headline}</slot>\n </span>\n {(this.supportingText || this.hasSlottedHeadline) && this.supportingText && (\n <span class=\"md-accordion-item__supporting\" part=\"supporting-text\">\n {this.supportingText}\n </span>\n )}\n </span>\n <span class=\"md-accordion-item__trailing\" part=\"trailing-icon\" aria-hidden=\"true\">\n <slot name=\"trailing-icon\">\n <svg\n class=\"md-accordion-item__chevron\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n fill=\"currentColor\"\n aria-hidden=\"true\"\n >\n <path d=\"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z\" />\n </svg>\n </slot>\n </span>\n </button>\n </HeadingTag>\n <div\n id={this.contentId}\n class=\"md-accordion-item__panel\"\n part=\"panel\"\n role={this.regionRole === 'none' ? undefined : this.regionRole}\n aria-labelledby={this.headerId}\n aria-hidden={this.expanded ? 'false' : 'true'}\n inert={!this.expanded}\n >\n <div class=\"md-accordion-item__content\" part=\"content\">\n <div\n class={{\n 'md-accordion-item__content-inner': true,\n 'md-accordion-item__content-inner--scroll': scrollable,\n }}\n part=\"content-inner\"\n // When the panel body is capped it becomes a scroll\n // container; `tabindex=\"0\"` makes it keyboard-scrollable\n // (axe scrollable-region-focusable). Its accessible name is\n // provided by the enclosing labelled panel region, so no\n // extra role/label is needed here.\n tabindex={scrollable ? '0' : undefined}\n style={scrollable ? { maxBlockSize: this.contentMaxHeight } : undefined}\n >\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components-csr/md-accordion.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{p as i,t,H as e,c as o,h as s,d as n}from"./p-bSpXNc5J.js";const a=()=>`:host{--_gap:var(--md-accordion-gap, var(--md-sys-spacing-gap-sm, 8px));--_outline-color:var(--md-accordion-outline-color, var(--md-sys-color-outline-variant, #CAC4D0));--_container-shape:var(--md-accordion-container-shape, max(8px, calc(12px + var(--md-sys-density-scale, 0) * 1px)));--_elevation:var(--md-accordion-elevation, var(--md-sys-elevation-0, none));--_elevation-easing:var(--md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1));--_drop-placeholder-color:var(--md-accordion-drop-placeholder-color, color-mix(in srgb, var(--md-sys-color-primary-container, #eaddff) 45%, transparent));--_drop-placeholder-outline-color:var(--md-accordion-drop-placeholder-outline-color, color-mix(in srgb, var(--md-sys-color-primary, #6750a4) 55%, transparent));--_drop-placeholder-outline-width:var(--md-accordion-drop-placeholder-outline-width, 2px);--_drop-placeholder-shape:var(--md-accordion-drop-placeholder-shape, var(--_container-shape));--_drop-placeholder-opacity:var(--md-accordion-drop-placeholder-opacity, 1);--_elevation-duration:var(--md-sys-motion-duration-medium2, 300ms);display:block;inline-size:100%}: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{box-sizing:border-box;font-family:var(--md-sys-typescale-body-large-font, Roboto, sans-serif);color:var(--md-sys-color-on-surface, #1C1B1F);position:relative}.md-accordion__drop-placeholder{position:absolute;inset-inline:0;inset-block-start:0;z-index:0;box-sizing:border-box;pointer-events:none;border-radius:var(--_drop-placeholder-shape);background-color:var(--_drop-placeholder-color);border:var(--_drop-placeholder-outline-width) dashed var(--_drop-placeholder-outline-color);opacity:var(--_drop-placeholder-opacity);transition:transform var(--md-sys-motion-duration-short4, 200ms) var(--md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1))}@media (prefers-reduced-motion: reduce){.md-accordion__drop-placeholder{transition:none}}:host(.md-accordion--elevation-1){--_elevation:var(--md-accordion-elevation, var(--md-sys-elevation-1))}:host(.md-accordion--elevation-2){--_elevation:var(--md-accordion-elevation, var(--md-sys-elevation-2))}:host(.md-accordion--elevation-3){--_elevation:var(--md-accordion-elevation, var(--md-sys-elevation-3))}:host(.md-accordion--elevation-4){--_elevation:var(--md-accordion-elevation, var(--md-sys-elevation-4))}:host(.md-accordion--elevation-5){--_elevation:var(--md-accordion-elevation, var(--md-sys-elevation-5))}:host(.md-accordion--filled){display:flex;flex-direction:column;row-gap:var(--_gap)}:host(.md-accordion--filled) ::slotted(md-accordion-item){display:block}:host(.md-accordion--outlined){border:1px solid var(--_outline-color);border-radius:var(--_container-shape);overflow:hidden;box-shadow:var(--_elevation);transition:box-shadow var(--_elevation-duration) var(--_elevation-easing)}:host(.md-accordion--outlined) ::slotted(md-accordion-item){display:block;border-block-end:1px solid var(--_outline-color)}:host(.md-accordion--outlined) ::slotted(md-accordion-item:last-child){border-block-end:none}:host([transition='none']),:host([transition='none']) {transition:none !important;animation-duration:0.001ms !important}:host(.md-accordion--floating){--_floating-bg:var(--md-accordion-floating-bg, var(--md-sys-color-surface-container-low, #F7F2F9));--_floating-elevation: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)));--_floating-elevation-active: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)));--_floating-width:var(--md-accordion-floating-width, 360px);--_floating-radius:var(--md-accordion-floating-radius, var(--md-sys-shape-corner-large, 16px));position:fixed;top:0;left:0;z-index:1000;inline-size:var(--_floating-width);max-inline-size:calc(100vw - 16px);background-color:var(--_floating-bg);border-radius:var(--_floating-radius);box-shadow:var(--_floating-elevation);overflow:hidden;will-change:transform;transition:box-shadow var(--_elevation-duration) var(--_elevation-easing), border-radius var(--_elevation-duration) var(--_elevation-easing)}:host(.md-accordion--floating){inline-size:var(--_floating-width)}:host(.md-accordion--floating-dragging){box-shadow:var(--_floating-elevation-active);transform-origin:top left;cursor:grabbing}:host(.md-accordion--floating-dragging) ::slotted(){user-select:none}:host(.md-accordion--floating.md-accordion--filled) ::slotted(md-accordion-item){margin-block-end:0;--md-accordion-item-container-shape:0;--md-accordion-item-container-shape-expanded:0;--md-accordion-item-container-color:transparent;--md-accordion-item-elevation:none;--md-accordion-item-elevation-expanded:none}:host(.md-accordion--floating.md-accordion--outlined){border:none}@media (prefers-reduced-motion: reduce){:host(.md-accordion--floating){transition:none}}@media (forced-colors: active){:host(.md-accordion--floating){border:1px solid CanvasText}}`;let r=1e3;const d=i(class i extends e{constructor(i){super();if(i!==false){this.__registerHost()}this.__attachShadow();this.mdToggle=o(this,"mdToggle",7);this.mdReorder=o(this,"mdReorder",7);this.mdDragStart=o(this,"mdDragStart",7);this.mdDragMove=o(this,"mdDragMove",7);this.mdDragEnd=o(this,"mdDragEnd",7);this.variant="filled";this.density=0;this.elevation=0;this.reorderable=false;this.floating=false;this.initialX=24;this.initialY=24;this.bringToFront=true;this.exclusive=false;this.keepOneExpanded=false;this.headingLevel=3;this.region="auto";this.regionThreshold=6;this.transition="expressive";this.defaultExpanded="";this.chassisX=0;this.chassisY=0;this.chassisDragging=false;this.dropPlaceholder=null;this.items=[];this.originalOrder=[];this.dragState=null;this.chassisDragState=null;this.onPointerDown=i=>{if(i.button!==0)return;const t=i.composedPath();if(this.reorderable){const e=t.find((i=>i?.dataset?.accordionDragHandle==="true"));if(e){this.startItemDrag(i,t);return}}if(this.floating){const e=t.find((i=>i?.dataset?.accordionChassisDrag==="true"));if(e){this.startChassisDrag(i);return}}};this.onChassisPointerMove=i=>{const t=this.chassisDragState;if(!t)return;const e=i.clientX-t.startClientX;const o=i.clientY-t.startClientY;this.chassisX=t.startX+e;this.chassisY=t.startY+o;this.mdDragMove.emit({clientX:i.clientX,clientY:i.clientY,x:this.chassisX,y:this.chassisY,dx:e,dy:o})};this.onChassisPointerUp=i=>{const t=this.chassisDragState;if(!t)return;this.el.removeEventListener("pointermove",this.onChassisPointerMove);this.el.removeEventListener("pointerup",this.onChassisPointerUp);this.el.removeEventListener("pointercancel",this.onChassisPointerUp);try{this.el.releasePointerCapture(t.pointerId)}catch{}const e=i.clientX-t.startClientX;const o=i.clientY-t.startClientY;this.chassisDragState=null;this.chassisDragging=false;this.mdDragEnd.emit({clientX:i.clientX,clientY:i.clientY,x:this.chassisX,y:this.chassisY,dx:e,dy:o})};this.onPointerMove=i=>{const t=this.dragState;if(!t)return;const e=i.clientY-t.startY;t.item.style.transform=`translateY(${e}px)`;const o=t.startRects[t.fromIndex];const s=o.top+o.height/2+e;let n=t.fromIndex;if(e>0){for(let i=t.fromIndex+1;i<this.items.length;i++){const e=t.startRects[i];if(s>e.top+e.height/2)n=i;else break}}else if(e<0){for(let i=t.fromIndex-1;i>=0;i--){const e=t.startRects[i];if(s<e.top+e.height/2)n=i;else break}}if(n!==t.currentTarget){t.currentTarget=n;this.applySiblingShifts();this.dropPlaceholder={top:t.startRects[n].top-t.hostTop,height:t.startRects[t.fromIndex].height}}};this.onPointerUp=i=>{const t=this.dragState;if(!t)return;this.el.removeEventListener("pointermove",this.onPointerMove);this.el.removeEventListener("pointerup",this.onPointerUp);this.el.removeEventListener("pointercancel",this.onPointerUp);try{this.el.releasePointerCapture(i.pointerId)}catch{}this.items.forEach((i=>{i.style.transform="";i.classList.remove("md-accordion-item--shifting")}));t.item.classList.remove("md-accordion-item--dragging");this.dropPlaceholder=null;if(t.currentTarget!==t.fromIndex){this.moveItem(t.fromIndex,t.currentTarget);this.emitReorder(t.fromIndex,t.currentTarget)}this.dragState=null};this.onKeyboardReorder=i=>{if(!this.reorderable)return;const{direction:t,from:e}=i.detail;const o=t==="up"?e-1:e+1;if(o<0\|\|o>=this.items.length)return;this.moveItem(e,o);this.items[o]?.focusHeader();this.emitReorder(e,o)}}connectedCallback(){this.collectItems();this.el.addEventListener("pointerdown",this.onPointerDown);this.el.addEventListener("mdItemRequestReorder",this.onKeyboardReorder)}disconnectedCallback(){this.el.removeEventListener("pointerdown",this.onPointerDown);this.el.removeEventListener("mdItemRequestReorder",this.onKeyboardReorder);this.cancelDrag()}componentDidLoad(){this.collectItems();this.originalOrder=[...this.items];this.assignIndexes();this.applyInitialState();this.syncChildren();if(this.floating){this.chassisX=this.initialX;this.chassisY=this.initialY;if(this.bringToFront){this.el.style.zIndex=String(++r)}}}onFloatingChange(i){if(i){this.chassisX=this.initialX;this.chassisY=this.initialY}else{this.chassisX=0;this.chassisY=0;this.el.style.zIndex=""}this.applyChassisHandleMarker()}onExclusiveChange(i){if(!i)return;let t=false;this.items.forEach((i=>{if(i.expanded){if(t)i.expanded=false;else t=true}}))}onChildToggle(i){const{expanded:t,index:e}=i.detail;if(this.exclusive&&t){this.items.forEach(((i,t)=>{if(t!==e)i.expanded=false}))}this.syncCollapsible();const o=this.items.map(((i,t)=>i.expanded?t:-1)).filter((i=>i>=0));this.mdToggle.emit({index:e,expanded:t,expandedIndices:o})}onChildRequestFocus(i){const{direction:t,from:e}=i.detail;if(this.items.length===0)return;let o;if(t==="first")o=0;else if(t==="last")o=this.items.length-1;else if(t==="next")o=(e+1)%this.items.length;else o=(e-1+this.items.length)%this.items.length;this.items[o]?.focusHeader()}collectItems(){const i=[];const t=this.el.children;for(let e=0;e<t.length;e+=1){const o=t[e];if(o&&o.tagName==="MD-ACCORDION-ITEM"){i.push(o)}}this.items=i}assignIndexes(){this.items.forEach(((i,t)=>{i.setAttribute("data-index",String(t))}));this.applyChassisHandleMarker()}applyChassisHandleMarker(){this.items.forEach(((i,t)=>{if(this.floating&&t===0){i.setAttribute("data-chassis-handle","")}else{i.removeAttribute("data-chassis-handle")}}))}startItemDrag(i,t){const e=t.find((i=>i?.tagName==="MD-ACCORDION-ITEM"));if(!e\|\|e.hasAttribute("disabled"))return;this.collectItems();const o=this.items.indexOf(e);if(o<0\|\|this.items.length<2)return;i.preventDefault();const s=this.items.map((i=>i.getBoundingClientRect()));const n=s[o];const a=o<this.items.length-1?s[o+1]:s[o-1];const r=a&&o<this.items.length-1?a.top-n.top:n.top-(a?.top??n.top);const d=this.el.getBoundingClientRect().top;this.dragState={item:e,pointerId:i.pointerId,startY:i.clientY,startRects:s,shiftDistance:Math.abs(r)\|\|n.height,fromIndex:o,currentTarget:o,hostTop:d};this.dropPlaceholder={top:n.top-d,height:n.height};try{this.el.setPointerCapture(i.pointerId)}catch{}this.el.addEventListener("pointermove",this.onPointerMove);this.el.addEventListener("pointerup",this.onPointerUp);this.el.addEventListener("pointercancel",this.onPointerUp);e.classList.add("md-accordion-item--dragging");this.items.forEach((i=>{if(i!==e)i.classList.add("md-accordion-item--shifting")}))}startChassisDrag(i){if(this.chassisDragState)return;i.preventDefault();this.chassisDragState={pointerId:i.pointerId,startClientX:i.clientX,startClientY:i.clientY,startX:this.chassisX,startY:this.chassisY};this.chassisDragging=true;if(this.bringToFront){this.el.style.zIndex=String(++r)}try{this.el.setPointerCapture(i.pointerId)}catch{}this.el.addEventListener("pointermove",this.onChassisPointerMove);this.el.addEventListener("pointerup",this.onChassisPointerUp);this.el.addEventListener("pointercancel",this.onChassisPointerUp);this.mdDragStart.emit({clientX:i.clientX,clientY:i.clientY,x:this.chassisX,y:this.chassisY,dx:0,dy:0})}applySiblingShifts(){const i=this.dragState;if(!i)return;this.items.forEach(((t,e)=>{if(t===i.item)return;let o=0;if(i.currentTarget>i.fromIndex&&e>i.fromIndex&&e<=i.currentTarget){o=-i.shiftDistance}else if(i.currentTarget<i.fromIndex&&e<i.fromIndex&&e>=i.currentTarget){o=i.shiftDistance}t.style.transform=o?`translateY(${o}px)`:""}))}cancelDrag(){const i=this.dragState;if(!i)return;this.el.removeEventListener("pointermove",this.onPointerMove);this.el.removeEventListener("pointerup",this.onPointerUp);this.el.removeEventListener("pointercancel",this.onPointerUp);this.items.forEach((i=>{i.style.transform="";i.classList.remove("md-accordion-item--shifting")}));i.item.classList.remove("md-accordion-item--dragging");this.dropPlaceholder=null;this.dragState=null}moveItem(i,t){if(i===t)return;const e=this.items[i];if(!e)return;const o=t>i?this.items[t].nextElementSibling:this.items[t];this.el.insertBefore(e,o);this.collectItems();this.assignIndexes()}emitReorder(i,t){const e=this.items.map((i=>this.originalOrder.indexOf(i)));this.mdReorder.emit({from:i,to:t,order:e})}applyInitialState(){const i=(this.defaultExpanded\|\|"").split(",").map((i=>i.trim())).filter((i=>i.length>0)).map((i=>Number(i))).filter((i=>Number.isInteger(i)&&i>=0));const t=new Set;this.items.forEach(((e,o)=>{if(i.includes(o)\|\|e.expanded)t.add(o)}));if(this.exclusive&&t.size>1){const i=Math.min(...t);t.clear();t.add(i)}if(this.keepOneExpanded&&t.size===0){const i=this.items.findIndex((i=>!i.disabled));if(i>=0)t.add(i)}this.items.forEach(((i,e)=>{const o=t.has(e);if(i.expanded!==o)i.expanded=o}))}computeRegionRole(){if(this.region==="always")return"region";if(this.region==="never")return"group";return this.items.length<=this.regionThreshold?"region":"group"}syncChildren(){const i=this.computeRegionRole();this.items.forEach((t=>{t.headingLevel=this.headingLevel;t.regionRole=i}));this.syncCollapsible()}syncCollapsible(){if(!this.keepOneExpanded){this.items.forEach((i=>i.collapsible=true));return}const i=this.items.filter((i=>i.expanded));if(i.length===1){this.items.forEach((t=>t.collapsible=t!==i[0]))}else{this.items.forEach((i=>i.collapsible=true))}}onHeadingLevelChange(){this.syncChildren()}onRegionChange(){this.syncChildren()}onRegionThresholdChange(){this.syncChildren()}onKeepOneExpandedChange(i){if(i&&!this.items.some((i=>i.expanded))){const i=this.items.find((i=>!i.disabled));if(i)i.expanded=true}this.syncCollapsible()}render(){const i=this.floating?{transform:`translate3d(${this.chassisX}px, ${this.chassisY}px, 0)`}:{};return s(n,{key:"342097108ef3bffebeffa47367efe80636615ee3",class:{"md-accordion":true,[`md-accordion--${this.variant}`]:true,[`md-accordion--density-${Math.abs(this.density)}`]:this.density!==0,[`md-accordion--elevation-${this.elevation}`]:this.elevation>0,"md-accordion--floating":this.floating,"md-accordion--floating-dragging":this.chassisDragging},role:"presentation",style:i},this.dropPlaceholder&&s("div",{key:"65e0fb6964c0805727b9f95e41292f143ebf9dd1",class:"md-accordion__drop-placeholder",part:"drop-placeholder","aria-hidden":"true",style:{transform:`translateY(${this.dropPlaceholder.top}px)`,blockSize:`${this.dropPlaceholder.height}px`}}),s("slot",{key:"3db7cab95c7a2ea79ec38b3172d0d0f10c993e8c"}))}get el(){return this}static get watchers(){return{floating:[{onFloatingChange:0}],exclusive:[{onExclusiveChange:0}],headingLevel:[{onHeadingLevelChange:0}],region:[{onRegionChange:0}],regionThreshold:[{onRegionThresholdChange:0}],keepOneExpanded:[{onKeepOneExpandedChange:0}]}}static get style(){return a()}},[257,"md-accordion",{variant:[513],density:[514],elevation:[514],reorderable:[516],floating:[516],initialX:[2,"initial-x"],initialY:[2,"initial-y"],bringToFront:[4,"bring-to-front"],exclusive:[516],keepOneExpanded:[516,"keep-one-expanded"],headingLevel:[2,"heading-level"],region:[513],regionThreshold:[2,"region-threshold"],transition:[513],defaultExpanded:[1,"default-expanded"],chassisX:[32],chassisY:[32],chassisDragging:[32],dropPlaceholder:[32]},[[0,"mdItemToggle","onChildToggle"],[0,"mdItemRequestFocus","onChildRequestFocus"]],{floating:[{onFloatingChange:0}],exclusive:[{onExclusiveChange:0}],headingLevel:[{onHeadingLevelChange:0}],region:[{onRegionChange:0}],regionThreshold:[{onRegionThresholdChange:0}],keepOneExpanded:[{onKeepOneExpandedChange:0}]}]);function h(){if(typeof customElements==="undefined"){return}const i=["md-accordion"];i.forEach((i=>{switch(i){case"md-accordion":if(!customElements.get(t(i))){customElements.define(t(i),d)}break}}))}h();const c=d;const l=h;export{c as MdAccordion,l as defineCustomElement};
2	+ //# sourceMappingURL=md-accordion.js.map

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

@@ -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 ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ 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-IWA0yIjJ.js";import{d as l}from"./p-Hm3X1iai.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:"28769a5568a4a6be2949cefef62b2cc2a9fa3a75",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};
2	+ //# sourceMappingURL=md-app-bar.js.map

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

@@ -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":[]}