@aceshooting/lyra-ui 9.1.1 → 11.0.0

package/dist/components/media/zoomable-frame/zoomable-frame.styles.js

@@ -21,11 +21,8 @@ import{css}from"lit";const styles=css`
   [part='iframe'] {
     position: absolute;
     top: 0;
-    /* policy-allow(physical-css): the scaled iframe is a physical pixel canvas, so its origin
-       must stay at physical top-left under both text directions. */
     right: auto;
     bottom: auto;
-    /* policy-allow(physical-css): paired physical edge of the fixed transform canvas origin. */
     left: 0;
     display: block;
     inline-size: calc(100% / var(--lr-zoomable-frame-zoom, 1));
@@ -33,8 +30,6 @@ import{css}from"lit";const styles=css`
     border: 0;
     background: var(--lr-color-surface);
     transform: scale(var(--lr-zoomable-frame-zoom, 1));
-    /* Iframe pixels are a physical canvas; scaling must stay pinned to its physical top-left
-       corner under both LTR and RTL rather than mirroring the embedded document. */
     transform-origin: top left;
   }
 

package/dist/components/overlays/alert/alert.styles.js

@@ -11,8 +11,6 @@ import{css}from"lit";const styles=css`
     display: block;
   }
 
-  /* Shoelace calls its brand/default tone "primary". Re-point the shared semantic slots instead
-     of introducing a second colour vocabulary for this compatibility component. */
   :host([variant='primary']) {
     --lr-color-fill-quiet: var(--lr-color-brand-fill-quiet);
     --lr-color-fill-normal: var(--lr-color-brand-fill-normal);
@@ -49,6 +47,10 @@ import{css}from"lit";const styles=css`
       transform var(--lr-duration-fast) var(--lr-easing-standard);
   }
 
+  [part='base'][hidden] {
+    display: none;
+  }
+
   :host([data-alert-showing]) [part='base'],
   :host([data-alert-hiding]) [part='base'] {
     opacity: 0;

package/dist/components/overlays/badge/badge.styles.js

@@ -2,48 +2,22 @@ import{css}from"lit";const styles=css`
   :host {
     display: inline-block;
     max-inline-size: 100%;
-    /* The 'm' defaults exactly reproduce the original fixed badge treatment -- mirrors
-       <lr-chip>'s identical --lr-chip-font-size/-padding-inline/-min-height trio so a consumer
-       moving between the two sibling components finds the same size vocabulary. */
     --_lr-badge-font-size: var(--lr-font-size-sm);
     --_lr-badge-padding-inline: var(--lr-space-s);
     --_lr-badge-min-height: var(--lr-size-1-25rem);
-    /* Space between the start slot, the label and the end slot. Collapses to nothing on its own
-       when a wrapper is empty, because the empty wrapper is display:none rather than zero-width. */
     --_lr-badge-gap: var(--lr-space-2xs);
-    /* Rounded rectangle by default; the pill treatment is opt-in through the 'pill' attribute
-       below, matching the badge/tag shape vocabulary. Doesn't vary by size tier, so it's declared
-       once here rather than re-assigned per effective-size block -- mirrors lr-button's
-       identical --lr-button-radius. */
     --_lr-badge-radius: var(--lr-radius);
 
-    /* --- Palette: what the 'variant' axis chooses. -------------------------------------------
-       Five semantic slots per variant, so the 'appearance' axis below can route them onto the
-       surface without every (variant, appearance) pair needing its own rule. Neutral is the
-       default set declared here: it is the only variant whose border color and text color differ
-       (a plain bordered surface reading as "no signal"), which is why -edge and -ink are separate
-       slots rather than one loud color.
-       -solid and -on-solid read the shared variants sheet's generic slots unconditionally, because
-       neutral's own values there already ARE the grid's neutral row; only -tint, -edge and -ink
-       need the non-neutral rule below. */
     --_lr-badge-tint: var(--lr-color-surface);
     --_lr-badge-solid: var(--lr-color-fill-loud);
     --_lr-badge-edge: var(--lr-color-border);
     --_lr-badge-ink: var(--lr-color-text);
     --_lr-badge-on-solid: var(--lr-color-on-loud);
 
-    /* --- Surface: what the 'appearance' axis chooses from that palette. ----------------------
-       Kept separate from the public --lr-badge-background/-border/-color trio so those three stay
-       *undeclared* and therefore still inherit from a consumer's ancestor rule; they are consumed
-       as the first arm of the var() fallbacks on [part~='base'] below. The values here are the
-       'filled-outlined' default, restated per appearance further down. */
     --_lr-badge-fill: var(--lr-badge-tint, var(--_lr-badge-tint));
     --_lr-badge-stroke: var(--lr-badge-edge, var(--_lr-badge-edge));
     --_lr-badge-text: var(--lr-badge-ink, var(--_lr-badge-ink));
 
-    /* --- Attention: the opt-in attention-seeking animation. ----------------------------------
-       Duration and easing are separate custom properties (not one compound transition token) so
-       the 'animation' shorthand below expands to exactly one timing function. */
     --_lr-badge-attention-duration: var(--lr-duration-ambient, 1.8s);
     --_lr-badge-attention-easing: var(--lr-easing-emphasized, ease-in-out);
     --_lr-badge-pulse-color: var(
@@ -84,8 +58,6 @@ import{css}from"lit";const styles=css`
     overflow: hidden;
     align-items: center;
   }
-  /* Defeats the display:inline-flex above -- the native [hidden] UA rule alone would lose to it at
-     equal specificity. Same fix <lr-chip>'s identical [part='icon'][hidden] override applies. */
   [part='start'][hidden],
   [part='end'][hidden] {
     display: none;
@@ -96,9 +68,11 @@ import{css}from"lit";const styles=css`
     min-inline-size: 0;
     max-inline-size: 100%;
   }
+  [part='start'] ::slotted([hidden]:not([hidden='until-found' i])),
+  [part='end'] ::slotted([hidden]:not([hidden='until-found' i])) {
+    display: none;
+  }
 
-  /* The label truncates, not the whole surface: keeping overflow off [part~='base'] lets the
-     removable tag's oversized hit target overhang the compact pill without being clipped. */
   [part='content'] {
     flex: 0 1 auto;
     min-inline-size: 0;
@@ -107,23 +81,12 @@ import{css}from"lit";const styles=css`
     white-space: nowrap;
   }
 
-  /* --- variant: the palette ----------------------------------------------------------------
-     One rule for all four non-neutral variants, in place of the four near-identical blocks that
-     stood here: the shared variants sheet has already re-pointed --lr-color-fill-* at the active
-     variant's row of the semantic grid, so the badge reads generic slots and never names a
-     variant. Neutral is excluded rather than mapped, because it keeps the ambient
-     surface/border/text "no signal" treatment declared on :host above instead of the grid's grey
-     neutral row. Matching [variant] as well as :not([variant='neutral']) keeps a host that has not
-     yet reflected its default attribute on the same neutral values. */
   :host([data-effective-variant]:not([data-effective-variant='neutral'])) {
     --_lr-badge-tint: var(--lr-color-fill-quiet);
     --_lr-badge-edge: var(--lr-color-fill-loud);
     --_lr-badge-ink: var(--lr-color-fill-loud);
   }
 
-  /* --- appearance: palette to surface ------------------------------------------------------
-     'transparent' rather than 'none' for the border-less appearances, so switching appearance
-     never changes the badge's own layout box. */
   :host([appearance='filled-outlined']) {
     --_lr-badge-fill: var(--lr-badge-tint, var(--_lr-badge-tint));
     --_lr-badge-stroke: var(--lr-badge-edge, var(--_lr-badge-edge));
@@ -150,7 +113,6 @@ import{css}from"lit";const styles=css`
     --_lr-badge-text: var(--lr-badge-ink, var(--_lr-badge-ink));
   }
 
-  /* --- size --------------------------------------------------------------------------------- */
   :host([data-effective-size='2xs']) {
     --_lr-badge-font-size: var(--lr-font-size-2xs);
     --_lr-badge-padding-inline: var(--lr-space-2xs);
@@ -177,7 +139,6 @@ import{css}from"lit";const styles=css`
     --_lr-badge-min-height: var(--lr-size-1-75rem);
   }
 
-  /* --- attention ---------------------------------------------------------------------------- */
   :host([pulse]:not([attention])) [part~='base'],
   :host([attention='pulse']) [part~='base'] {
     animation: lr-badge-pulse var(--lr-badge-attention-duration, var(--_lr-badge-attention-duration)) var(--lr-badge-attention-easing, var(--_lr-badge-attention-easing))
@@ -200,8 +161,6 @@ import{css}from"lit";const styles=css`
     }
   }
 
-  /* Vertical, so it needs no logical-property mirroring: block-direction motion means the same
-     thing under dir="rtl". */
   @keyframes lr-badge-bounce {
     0%,
     25%,
@@ -214,9 +173,6 @@ import{css}from"lit";const styles=css`
     }
   }
 
-  /* The attention animations are decorative and infinite, so they stop outright rather than
-     merely shortening. The shared token layer already clamps every animation's duration and
-     iteration count under this query; naming animation itself keeps the badge provably still. */
   @media (prefers-reduced-motion: reduce) {
     [part~='base'] {
       animation: none !important;

package/dist/components/overlays/badge/tag.styles.js

@@ -1,7 +1,5 @@
 import{css}from"lit";const styles=css`
   :host {
-    /* Matched to the pill's own corner so retuning one retunes both -- mirrors <lr-chip>'s
-       identical --lr-chip-radius reuse on its remove button. */
     --_lr-tag-remove-radius: var(--lr-badge-radius, var(--_lr-badge-radius));
     --_lr-tag-remove-hover-background: color-mix(in srgb, currentColor 16%, transparent);
   }
@@ -10,15 +8,12 @@ import{css}from"lit";const styles=css`
     min-block-size: max(var(--lr-badge-min-height, var(--_lr-badge-min-height)), var(--lr-icon-button-size));
   }
 
-  /* Shoelace's variant="text" is a surface treatment rather than a semantic palette. The public
-     token remains verbatim while the badge base derives neutral as its private tone. */
   :host([variant='text']) {
     --_lr-badge-fill: transparent;
     --_lr-badge-stroke: transparent;
     --_lr-badge-text: var(--lr-badge-ink, var(--_lr-badge-ink));
   }
 
-  /* The full hit target participates in layout so compact tags cannot overlap an adjacent target. */
   [part~='remove-button'] {
     flex: 0 0 auto;
     display: inline-flex;
@@ -40,15 +35,6 @@ import{css}from"lit";const styles=css`
   [part~='remove-button']:hover {
     background: var(--lr-tag-remove-hover-background, var(--_lr-tag-remove-hover-background));
   }
-  /* Pressed deepens the hover's own scrim -- currentColor mixed in again at the shared
-     --lr-color-mix-active share, landing the button at roughly double the hover's tint so the
-     press reads as a step past the hover rather than a repeat of it. Mixed toward currentColor
-     rather than --lr-color-mix-partner deliberately: this button sits INSIDE the badge, whose
-     variant may have painted a loud fill beneath it, and currentColor is then the pill's own ink,
-     the one colour guaranteed to contrast with that fill. --lr-color-mix-partner follows the PAGE
-     text, which on a solid-appearance badge (light ink on a loud fill) points the opposite way
-     from the hover -- hovering would lighten while pressing darkened. Layering on top of the hover
-     custom property also means a consumer who retints the hover gets a matching press for free. */
   [part~='remove-button']:active {
     background: color-mix(in srgb, currentColor var(--lr-color-mix-active), var(--lr-tag-remove-hover-background, var(--_lr-tag-remove-hover-background)));
   }

package/dist/components/overlays/callout/callout.styles.js

@@ -3,18 +3,12 @@ import{css}from"lit";const styles=css`
     display: block;
     box-sizing: border-box;
     max-inline-size: 100%;
-    /* The close hover is independently themeable so retinting it never changes the host surface. */
     --_lr-callout-close-hover-bg: var(--lr-color-brand-quiet);
-    /* Unset nested callouts inherit the generic semantic and size slots. The second arms are the
-       standalone brand/m defaults; explicit attributes re-point the generic slots in the
-       contextual vocabulary sheets. */
     --_lr-callout-background: var(--lr-color-fill-quiet, var(--lr-color-brand-fill-quiet));
     --_lr-callout-border: var(--lr-color-fill-loud, var(--lr-color-brand-fill-loud));
     --_lr-callout-color: var(--lr-color-fill-loud, var(--lr-color-brand-fill-loud));
     --_lr-callout-font-size: var(--lr-form-control-font-size, var(--lr-font-size-m));
     --_lr-callout-padding: var(--lr-form-control-padding-inline, var(--lr-space-m));
-    /* Separates three adjacent boxes rather than setting the panel's density, so it deliberately
-       does not vary by tier -- shrinking it at 2xs only crowds the close control. */
     --_lr-callout-gap: var(--lr-space-s);
 
     padding: var(--lr-callout-padding, var(--_lr-callout-padding));
@@ -69,11 +63,6 @@ import{css}from"lit";const styles=css`
   [part='heading'] { margin-block-end: var(--lr-space-xs); font-weight: var(--lr-font-weight-semibold); }
   [part='content'] { grid-column: 2; min-inline-size: 0; overflow-wrap: break-word; }
   [part='message'] { min-inline-size: 0; overflow-wrap: break-word; }
-  /* The interactive hit target meets the shared minimum tappable size (--lr-icon-button-size)
-     in both the default panel and the compact [inline] variant below -- the *visible* "×" glyph
-     is what shrinks for [inline] instead, rendered on the separate [part='close-icon'] child and
-     centered via this button's own flex layout, not by resizing the button itself. Mirrors
-     lr-swatch-picker's [part='swatch']/[part='swatch-fill'] split. */
   [part='close-button'] { display: inline-flex; grid-column: 3; align-items: center; justify-content: center; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); border: 0; border-radius: var(--lr-radius-pill); background: transparent; color: inherit; cursor: pointer; }
   [part='close-button']:where(:hover) { background: var(--lr-callout-close-hover-bg, var(--_lr-callout-close-hover-bg)); }
   [part='close-button']:where(:active) { background: color-mix(in oklab, var(--lr-callout-close-hover-bg, var(--_lr-callout-close-hover-bg)), var(--lr-color-mix-partner) var(--lr-color-mix-active)); }

package/dist/components/overlays/chip/chip-group.styles.js

@@ -8,11 +8,6 @@ import{css}from"lit";const styles=css`
     align-items: center;
     gap: var(--lr-space-xs);
   }
-  /* Deliberately its own local pill styling rather than instantiating a
-     real <lr-chip> in the shadow DOM for this -- keeps the group's
-     rendering self-contained instead of depending on chip.ts's internal
-     shape, the same way this family's overlay-shaped components duplicate
-     rather than nest one another. */
   [part='overflow-indicator'] {
     display: inline-flex;
     align-items: center;
@@ -36,18 +31,10 @@ import{css}from"lit";const styles=css`
       border-color var(--lr-transition-fast),
       color var(--lr-transition-fast);
   }
-  /* Dashed border marks it as a structural "more" affordance, distinct at a
-     glance from the solid-bordered real chips it sits alongside. */
   [part='overflow-indicator']:hover {
     border-color: var(--lr-color-brand);
     color: var(--lr-color-text);
   }
-  /* Pressed adds what the hover deliberately leaves alone -- a fill -- so the press is a visible
-     step further in, not a restatement. The surface is mixed toward --lr-color-mix-partner (which
-     follows the text colour), so the tint darkens on a light theme and lightens on a dark one
-     without this rule knowing which is in force. The border and text treatments are restated
-     rather than inherited from the hover rule because keyboard activation (Space/Enter on the
-     focused indicator) raises :active with no :hover at all. */
   [part='overflow-indicator']:active {
     border-color: var(--lr-color-brand);
     color: var(--lr-color-text);
@@ -57,11 +44,6 @@ import{css}from"lit";const styles=css`
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-  /* :where() zeroes the [aria-expanded='true'] qualifier's specificity contribution -- otherwise
-     this (0,2,0) rule would beat a consumer's own ::part(overflow-indicator) color override
-     whenever the picker is open. Color and border style route through scoped cssprops (mirroring
-     lr-widget's [aria-pressed='true'] treatment) so a consumer can retint or reshape just the
-     expanded state without hijacking the shared tokens used everywhere else. */
   [part='overflow-indicator']:where([aria-expanded='true']) {
     border-style: var(--lr-chip-group-overflow-expanded-border-style, solid);
     color: var(--lr-chip-group-overflow-expanded-color, var(--lr-color-text));

package/dist/components/overlays/chip/chip.styles.js

@@ -3,38 +3,16 @@ import{css}from"lit";const styles=css`
     display: inline-flex;
     max-inline-size: 100%;
     vertical-align: middle;
-    /* One custom-property trio swapped by the single non-neutral rule below,
-       rather than repeating background/color/border per part per variant —
-       mirrors lr-tool-call-chip's/lr-attachment-chip's identical
-       -accent/-bg/-border trio so a chip's colour vocabulary reads the same
-       everywhere in the library. These are the 'neutral' values: neutral
-       deliberately opts out of the semantic grid's own neutral row (see the
-       class doc) and reads as a plain bordered surface instead. */
     --_lr-chip-accent: var(--lr-color-text);
     --_lr-chip-bg: var(--lr-color-surface);
     --_lr-chip-border: var(--lr-color-border);
-    /* The medium defaults exactly reproduce the original fixed chip treatment. */
     --_lr-chip-font-size: var(--lr-font-size-sm);
     --_lr-chip-padding-block: var(--lr-size-0-25rem);
     --_lr-chip-padding-inline: var(--lr-space-s);
     --_lr-chip-gap: var(--lr-space-xs);
     --_lr-chip-icon-size: var(--lr-font-size-sm);
-    /* Doesn't vary by size tier, so it's declared once here rather than re-assigned per
-       :host([size='…']) block -- same precedent as lr-button's --lr-button-radius. Consumed on
-       both [part='base'] and [part='remove-button'] below so a consumer retuning the chip's
-       corner shape gets a consistent remove-button corner too, not a mismatched one.
-       The rounded rectangle is the default and the pill is opt-in via [pill] below, matching
-       lr-badge/lr-tag: while this was unconditionally --lr-radius-pill, a 'pill' attribute would
-       have been indistinguishable from its own absence. */
     --_lr-chip-radius: var(--lr-radius);
-    /* Component density floor. Interactive controls also enforce the shared
-       --lr-icon-button-size hit target; non-interactive display chips get no floor. */
     --_lr-chip-min-height: var(--lr-size-1-5rem);
-    /* --lr-chip-height is intentionally NOT declared here. It is a consumer-facing exact-height
-       escape hatch consumed only through the var() fallbacks on [part='base'] below; declaring
-       any value for it (even 'auto') would make those fallback arms unreachable and turn
-       --lr-chip-min-height into dead code. Left undeclared, both arms stay live: the per-tier
-       floor falls out of the fallback, and setting the property pins an exact height. */
   }
 
   :host([pill]) {
@@ -48,9 +26,6 @@ import{css}from"lit";const styles=css`
   :host([size='3xs']) {
     --_lr-chip-font-size: var(--lr-font-size-3xs);
     --_lr-chip-padding-block: 0;
-    /* Below --lr-space-2xs (the space scale's own floor, still used by the 2xs tier) --
-       same precedent as 2xs's own padding-block above, which already bottoms out below
-       the space scale via a raw --lr-size-* token rather than reusing --lr-space-2xs. */
     --_lr-chip-padding-inline: var(--lr-size-0-0625rem);
     --_lr-chip-gap: var(--lr-space-2xs);
     --_lr-chip-icon-size: var(--lr-font-size-3xs);
@@ -69,10 +44,6 @@ import{css}from"lit";const styles=css`
     --_lr-chip-gap: var(--lr-space-2xs);
     --_lr-chip-icon-size: var(--lr-font-size-xs);
   }
-  /* 'small'/'large' are the Web Awesome/Shoelace spellings of these same two tiers -- accepted
-     verbatim by CHIP_SIZE (chip.class.ts) rather than normalised away, same precedent as
-     sizes.styles.ts/contextual-vocabulary.styles.ts. 'medium' needs no rule of its own: it is
-     the default tier already declared on :host above, exactly like the unaliased 'm'. */
   :host([size='s']),
   :host([size='small']) {
     --_lr-chip-font-size: var(--lr-font-size-xs);
@@ -99,13 +70,6 @@ import{css}from"lit";const styles=css`
     --_lr-chip-min-height: var(--lr-size-2rem);
   }
 
-  /* One rule for all four non-neutral variants, in place of the four near-identical blocks that
-     stood here: the shared variants sheet has already re-pointed --lr-color-fill-* at the active
-     variant's row of the semantic grid, so the chip reads generic slots and never names a variant.
-     Neutral is excluded rather than mapped, because it keeps the plain bordered-surface "no
-     signal" treatment declared on :host above instead of the grid's grey neutral row. Matching
-     [variant] as well as :not([variant='neutral']) keeps a host that has not yet reflected its
-     default attribute on the same neutral values. */
   :host([variant]:not([variant='neutral'])) {
     --_lr-chip-accent: var(--lr-color-fill-loud);
     --_lr-chip-bg: var(--lr-color-fill-quiet);
@@ -128,9 +92,6 @@ import{css}from"lit";const styles=css`
     font-size: var(--lr-chip-font-size, var(--_lr-chip-font-size));
     font-weight: var(--lr-font-weight-medium);
     line-height: var(--lr-line-height-snug);
-    /* Pinned only when --lr-chip-height is set; 'auto' otherwise, so a display chip keeps growing
-       to fit its own content. Applies to interactive and non-interactive chips alike -- the
-       interactive floor lives on the toggleable-host rule below. */
     block-size: var(--lr-chip-height, auto);
   }
 
@@ -145,13 +106,6 @@ import{css}from"lit";const styles=css`
   :host([toggleable]:not([removable]):not([disabled])) [part='base']:hover {
     background: color-mix(in srgb, var(--lr-chip-accent, var(--_lr-chip-accent)) 8%, var(--lr-chip-bg, var(--_lr-chip-bg)));
   }
-  /* Pressed deepens the hover's own accent wash to the shared --lr-color-mix-active share --
-     roughly triple the hover's 8%, so the press is unmistakably a step past it. The accent, not
-     --lr-color-mix-partner, is the partner here: on every non-neutral variant the chip is a loud
-     accent on a quiet fill, so the accent already IS this surface's contrast partner, while the
-     shared partner follows the page text and would wash the variant's hue out at the exact moment
-     of the click. :active matches here even though the actual button is [part='toggle-button']
-     stretched over the base, because :active applies to the activated element's ancestors too. */
   :host([toggleable]:not([removable]):not([disabled])) [part='base']:active {
     background: color-mix(in srgb, var(--lr-chip-accent, var(--_lr-chip-accent)) var(--lr-color-mix-active), var(--lr-chip-bg, var(--_lr-chip-bg)));
   }
@@ -160,15 +114,7 @@ import{css}from"lit";const styles=css`
     outline-offset: var(--lr-focus-ring-offset);
   }
   :host([toggleable][selected]:not([removable])) [part='base'] {
-    /* Falls back to --lr-chip-bg (today's exact value) so every existing consumer renders
-       byte-identical when unset. A consumer wanting a distinct "active" tint independent of the
-       resting background sets --lr-chip-pressed-bg directly. */
     background: var(--lr-chip-pressed-bg, var(--lr-chip-bg, var(--_lr-chip-bg)));
-    /* Falls back to --lr-chip-accent (today's exact value) so every
-       existing consumer, including all four non-neutral variants, renders
-       byte-identical when unset. A consumer with a per-item arbitrary
-       color sets --lr-chip-pressed-border directly, leaving
-       --lr-chip-accent (and therefore the label text color) untouched. */
     border-color: var(--lr-chip-pressed-border, var(--lr-chip-accent, var(--_lr-chip-accent)));
   }
 
@@ -187,9 +133,9 @@ import{css}from"lit";const styles=css`
     min-inline-size: 0;
     max-inline-size: 100%;
   }
-  /* Defeats [part='start']'s own 'display: inline-flex' above -- the native
-     [hidden] UA rule alone would lose to it at equal specificity. Same fix
-     lr-stat's identical slotted-adornment hidden override already applies. */
+  [part='start'] ::slotted([hidden]:not([hidden='until-found' i])) {
+    display: none;
+  }
   [part='start'][hidden] {
     display: none;
   }
@@ -217,8 +163,9 @@ import{css}from"lit";const styles=css`
     min-inline-size: 0;
     max-inline-size: 100%;
   }
-  /* Defeats [part='end']'s own 'display: inline-flex' above -- the native [hidden] UA rule alone
-     would lose to it at equal specificity. Same fix [part='start'][hidden] above already applies. */
+  [part='end'] ::slotted([hidden]:not([hidden='until-found' i])) {
+    display: none;
+  }
   [part='end'][hidden] {
     display: none;
   }
@@ -240,8 +187,6 @@ import{css}from"lit";const styles=css`
     cursor: not-allowed;
   }
 
-  /* Keep the full target inside the chip's layout box. Negative margins made compact/custom-height
-     chips overlap adjacent controls and could let the target escape its painted owner. */
   [part='remove-button'] {
     flex: 0 0 auto;
     display: inline-flex;
@@ -263,14 +208,6 @@ import{css}from"lit";const styles=css`
   [part='remove-button']:not(:disabled):hover {
     background: color-mix(in srgb, currentColor 16%, transparent);
   }
-  /* Pressed lays the shared --lr-color-mix-active share of currentColor over the hover's own
-     scrim, which more than doubles the tint the hover produced -- a step past it, not a repeat.
-     currentColor rather than --lr-color-mix-partner: this button sits INSIDE the pill, whose
-     variant may have painted a loud fill beneath it, so the pill's own ink is the only colour
-     guaranteed to contrast there, while --lr-color-mix-partner follows the PAGE text and would
-     point the opposite way from the hover on a non-neutral chip. The hover value is restated
-     rather than referenced because it is a literal here, not a public custom property (unlike
-     <lr-tag>'s --lr-tag-remove-hover-background). */
   [part='remove-button']:not(:disabled):active {
     background: color-mix(in srgb, currentColor var(--lr-color-mix-active), color-mix(in srgb, currentColor 16%, transparent));
   }

package/dist/components/overlays/dialog/confirm.d.ts

@@ -9,9 +9,6 @@ export interface ConfirmOptions {
     cancelLabel?: string;
     /** `'danger'` fills the confirm button with `--lr-color-danger` instead of `--lr-color-brand` -- for destructive actions. */
     variant?: 'neutral' | 'danger';
-    /** @deprecated Use `variant` instead. Kept as a one-major back-compat alias; `variant` wins when
-     *  both are set. */
-    tone?: 'neutral' | 'danger';
 }
 /**
  * Show a confirmation modal, resolving `true` only when the confirm button
@@ -25,7 +22,7 @@ export interface ConfirmOptions {
  * mounted after that request settles.
  *
  * Every dismissal path (confirm button, cancel button, Escape, backdrop
- * click) funnels through `<lr-dialog>`'s own `close()`/`lr-dialog-close`
+ * click) funnels through `<lr-dialog>`'s own `close()`/`lr-close`
  * event, so there is exactly one place that resolves the promise and tears
  * the dialog down. Because that event is cancelable, a veto leaves this
  * promise pending and the transient dialog mounted until a later accepted

package/dist/components/overlays/dialog/confirm.js

@@ -9,4 +9,4 @@ import{LyraDialog}from"./dialog.class.js";import{defineElement,tag}from"../../..
     outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color);
     outline-offset: var(--lr-focus-ring-offset);
   }
-`;function createButton(label,style,onClick){const button=document.createElement("button");return button.type="button",button.textContent=label,button.setAttribute(CONFIRM_BUTTON_ATTRIBUTE,""),button.style.cssText=`${BUTTON_BASE_STYLE} ${style}`,button.addEventListener("click",onClick),button}function confirm(options){defineElement("dialog",LyraDialog);const{title,description,confirmLabel,cancelLabel,variant,tone}=options,resolvedVariant=variant??tone??"neutral";return new Promise(resolve=>{const dialog=document.createElement(tag("dialog"));dialog.lightDismiss=!0;let settled=!1;const buttonStates=document.createElement("style");buttonStates.textContent=BUTTON_STATE_STYLE,dialog.appendChild(buttonStates);const heading=document.createElement("h2");if(heading.textContent=title,heading.style.cssText="margin: 0 0 var(--lr-space-s) 0; font-size: var(--lr-size-1-0625rem); font-weight: var(--lr-font-weight-semibold);",dialog.appendChild(heading),description){const desc=document.createElement("p");desc.textContent=description,desc.style.cssText="margin: var(--lr-space-xs) 0 0 0; color: var(--lr-color-text-quiet);",dialog.appendChild(desc)}dialog.addEventListener("lr-dialog-close",event=>{queueMicrotask(()=>{if(settled||event.defaultPrevented)return;settled=!0;const reason=event.detail;resolve(reason==="confirm"),dialog.remove()})});const cancelButton=createButton(resolveLyraString(dialog,"cancel",void 0,cancelLabel,void 0,CONFIRM_DEFAULT_STRINGS),CANCEL_STYLE,()=>dialog.close("cancel"));cancelButton.slot="footer";const confirmButton=createButton(resolveLyraString(dialog,"confirm",void 0,confirmLabel,void 0,CONFIRM_DEFAULT_STRINGS),CONFIRM_VARIANT_STYLE[resolvedVariant],()=>dialog.close("confirm"));confirmButton.slot="footer",dialog.appendChild(cancelButton),dialog.appendChild(confirmButton),dialog.open=!0,document.body.appendChild(dialog)})}export{confirm};
+`;function createButton(label,style,onClick){const button=document.createElement("button");return button.type="button",button.textContent=label,button.setAttribute(CONFIRM_BUTTON_ATTRIBUTE,""),button.style.cssText=`${BUTTON_BASE_STYLE} ${style}`,button.addEventListener("click",onClick),button}function confirm(options){defineElement("dialog",LyraDialog);const{title,description,confirmLabel,cancelLabel,variant}=options,resolvedVariant=variant??"neutral";return new Promise(resolve=>{const dialog=document.createElement(tag("dialog"));dialog.lightDismiss=!0;let settled=!1;const buttonStates=document.createElement("style");buttonStates.textContent=BUTTON_STATE_STYLE,dialog.appendChild(buttonStates);const heading=document.createElement("h2");if(heading.textContent=title,heading.style.cssText="margin: 0 0 var(--lr-space-s) 0; font-size: var(--lr-size-1-0625rem); font-weight: var(--lr-font-weight-semibold);",dialog.appendChild(heading),description){const desc=document.createElement("p");desc.textContent=description,desc.style.cssText="margin: var(--lr-space-xs) 0 0 0; color: var(--lr-color-text-quiet);",dialog.appendChild(desc)}dialog.addEventListener("lr-close",event=>{queueMicrotask(()=>{if(settled||event.defaultPrevented)return;settled=!0;const reason=event.detail;resolve(reason==="confirm"),dialog.remove()})});const cancelButton=createButton(resolveLyraString(dialog,"cancel",void 0,cancelLabel,void 0,CONFIRM_DEFAULT_STRINGS),CANCEL_STYLE,()=>dialog.close("cancel"));cancelButton.slot="footer";const confirmButton=createButton(resolveLyraString(dialog,"confirm",void 0,confirmLabel,void 0,CONFIRM_DEFAULT_STRINGS),CONFIRM_VARIANT_STYLE[resolvedVariant],()=>dialog.close("confirm"));confirmButton.slot="footer",dialog.appendChild(cancelButton),dialog.appendChild(confirmButton),dialog.open=!0,document.body.appendChild(dialog)})}export{confirm};

package/dist/components/overlays/dialog/dialog.class.d.ts

@@ -4,7 +4,7 @@ import { type LyraHeadingLevel } from '../../../internal/heading-level.js';
 import { type OverlayDeactivateOptions } from '../../../internal/overlay-manager.js';
 import { type RegisteredAnimationSpec } from '../../../internal/registered-animation.js';
 /**
- * Reason a dialog was dismissed, forwarded as the `lr-dialog-close` event
+ * Reason a dialog was dismissed, forwarded as the `lr-close` event
  * detail. `'escape'` and `'backdrop'` are emitted by the dialog's own built-in
  * dismiss triggers; `'close-button'` by the built-in header close button
  * (rendered when `closable` is set); `'unmount'` is emitted when the dialog is
@@ -36,7 +36,7 @@ export interface LyraDialogEventMap {
     'lr-after-hide': CustomEvent<null>;
     'lr-initial-focus': CustomEvent<null>;
     'lr-request-close': CustomEvent<LyraDialogRequestCloseDetail>;
-    'lr-dialog-close': CustomEvent<DialogCloseReason>;
+    'lr-close': CustomEvent<DialogCloseReason>;
 }
 /**
  * `<lr-dialog>` — a general-purpose modal/overlay. `role="dialog"`,
@@ -50,7 +50,7 @@ export interface LyraDialogEventMap {
  *
  * Lifecycle: `show()` emits `lr-show` (cancelable) and then, once the enter animation has
  * finished, `lr-after-show`. `hide()`/`close()` emit `lr-hide` (cancelable), then
- * `lr-dialog-close` (cancelable, carrying the dismissal reason), then — once the exit animation
+ * `lr-close` (cancelable, carrying the dismissal reason), then — once the exit animation
  * has finished — `lr-after-hide`. Assigning `open` runs the same lifecycle, so the property, the
  * reflected attribute, and the two method calls can never disagree. Markup that renders open
  * from the start emits nothing, matching `<lr-menu>`.
@@ -102,7 +102,7 @@ export interface LyraDialogEventMap {
  * @event lr-show - The dialog is about to open. Cancelable — `preventDefault()` keeps it closed.
  * @event lr-after-show - The dialog is open and its enter animation has finished.
  * @event lr-hide - The dialog is about to close, for every dismissal path. Cancelable —
- *   `preventDefault()` keeps it open and stops `lr-dialog-close` from firing at all. Detail is
+ *   `preventDefault()` keeps it open and stops `lr-close` from firing at all. Detail is
  *   `{ source: Element }`, the affordance or host that requested the transition. The single
  *   exception is an open dialog being removed from the document: the close has already happened
  *   and cannot be undone, so that one is announced non-cancelable.
@@ -112,12 +112,35 @@ export interface LyraDialogEventMap {
  *   dialogs defer it until rendered, and reconnecting the same open dialog does not repeat it.
  * @event lr-request-close - A built-in affordance requested dismissal. Cancelable; detail is
  *   `{ source: 'close-button' | 'keyboard' | 'overlay' }`.
- * @event lr-dialog-close - `detail: DialogCloseReason`. Cancelable — a listener calling
+ * @event lr-close - `detail: DialogCloseReason`. Cancelable — a listener calling
  *   `preventDefault()` stops the dialog from closing, for every dismissal path (Escape, backdrop,
  *   the built-in close button, `hide()`, `open = false`, or a consumer's own `close()` call).
  *   Fires after `lr-hide` and carries the one thing `lr-hide` does not: which affordance asked
- *   for the close. Also fired (with reason `'unmount'`, non-cancelable there since the element is
- *   already being removed) when the dialog is removed from the DOM while still open.
+ *   for the close. The plain `lr-close` spelling matches `<lr-tool-select-dialog>`,
+ *   `<lr-tool-result-dialog>`, and `<lr-tool-approval-dialog>`, whose own docs already describe
+ *   their close-reason detail as mirroring this shape. Also fired (with reason `'unmount'`,
+ *   non-cancelable there since the element is already being removed) when the dialog is removed
+ *   from the DOM while still open.
+ *
+ *   **The name is not dialog-scoped, so filter by target.** `lr-close` is emitted by nine
+ *   components in this library, several of which are commonly nested *inside* a dialog:
+ *   `<lr-callout>` (an inline notice above a form), `<lr-tab>`/`<lr-tab-group>`,
+ *   `<lr-command-palette>`, `<lr-document-viewer>`, `<lr-responsive-panel>`, and the three
+ *   tool dialogs. Library events bubble and are composed, so a listener bound directly on
+ *   `<lr-dialog>` also receives a descendant's close — and a closable callout inside a dialog would
+ *   otherwise dismiss the whole dialog. Their details differ too (`<lr-callout>` and `<lr-tab>`
+ *   carry none, where this event carries a `DialogCloseReason`), so a handler reading
+ *   `event.detail.reason` would throw on a foreign one. This is latent rather than
+ *   broken-on-arrival, because a callout or tab only emits once given a close affordance — which
+ *   is what makes it a bad failure mode: it appears later and presents as the dialog dismissing
+ *   itself. Guard on the target, the way `<lr-document-viewer>` already does internally:
+ *
+ *   ```js
+ *   dialog.addEventListener('lr-close', (event) => {
+ *     if (event.target !== event.currentTarget) return; // a descendant's close, not this dialog's
+ *     // ...
+ *   });
+ *   ```
  * @csspart base - Shoelace wrapper alias.
  * @csspart backdrop - The full-viewport scrim behind the panel; also carries `overlay`.
  * @csspart overlay - Shoelace alias on the backdrop.
@@ -275,13 +298,13 @@ export declare class LyraDialog extends LyraElement<LyraDialogEventMap> {
     hide(): Promise<void>;
     /**
      * Close the dialog and return focus to whatever had it before the dialog
-     * opened. `reason` is forwarded as the `lr-dialog-close` detail --
+     * opened. `reason` is forwarded as the `lr-close` detail --
      * built-in triggers pass `'escape'`/`'backdrop'`/`'close-button'`; a
      * consumer's own close affordance (e.g. a footer Cancel button) should
      * call this directly with its own reason string, so every dismissal path
      * funnels through the same event instead of the consumer having to also
      * toggle `open` itself. `lr-hide` is emitted first and vetoing it stops
-     * `lr-dialog-close` from being emitted at all.
+     * `lr-close` from being emitted at all.
      */
     close(reason?: DialogCloseReason): Promise<void>;
     private closeFrom;

package/dist/components/overlays/dialog/dialog.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{resolveHeadingLevel}from"../../../internal/heading-level.js";import{activateOverlay,collectFocusableElements}from"../../../internal/overlay-manager.js";import{nextId}from"../../../internal/a11y.js";import{closeIcon}from"../../../internal/icons.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{animateRegistered}from"../../../internal/registered-animation.js";import{styles}from"./dialog.styles.js";import{LYRA_DEFAULT_close}from"../../../internal/default-strings.generated.js";const HEADING_SELECTOR='h1, h2, h3, h4, h5, h6, [role="heading"]';class LyraDialog extends LyraElement{constructor(){super(...arguments),this._open=!1,this.label="",this.headingLevel="3",this.closable=!0,this.withoutHeader=!1,this.noHeader=!1,this.withFooter=!1,this.accessibleLabel="",this.hostAriaLabel=null,this.lightDismiss=!1,this.hasFooterSlot=!1,this.hasLabelSlot=!1,this.hasHeaderActionsSlot=!1,this.headingObserverGeneration=0,this.transitionToken=0,this.transitionAnimations=[],this.headingId=nextId("dialog-heading"),this.externalModalDepth=0,this.modal={activateExternal:()=>{this.externalModalDepth++,this.externalModalDepth===1&&this.overlay?.suspend()},deactivateExternal:()=>{this.externalModalDepth!==0&&(this.externalModalDepth--,this.externalModalDepth===0&&this.open&&this.modalSurface&&(this.overlay?.resume(),queueMicrotask(()=>this.focusInitial())))}},this.onDefaultSlotChange=()=>{this.detectLightDomChrome()},this.onFooterSlotChange=e=>{this.hasFooterSlot=e.target.assignedElements({flatten:!0}).length>0},this.onBackdropClick=()=>{this.lightDismiss&&this.overlay?.dismissBackdrop()},this.onCloseButtonClick=()=>{const button=this.renderRoot.querySelector('[part~="close-button"]')??this;this.requestClose("close-button","close-button",button)}}static{this.defaultStrings={...super.defaultStrings,close:LYRA_DEFAULT_close}}static{this.styles=[LyraElement.styles,styles]}get open(){return this._open}set open(next){const normalized=!!next;if(!this.coalesceOpenRequest(normalized)&&normalized!==this._open){if(!this.hasUpdated){this.applyOpenState(normalized);return}normalized?this.show():this.close("api")}}get modalSurface(){return!0}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer"),this.detectLightDomChrome()),changed.has("open")&&(this.flushPendingScrollLockRelease(),this.open?this.isConnected&&this.modalSurface&&this.activateOverlay():this.pendingScrollLockRelease=this.deactivateOverlay({deferScrollLockRelease:!0}))}flushPendingScrollLockRelease(){const release=this.pendingScrollLockRelease;this.pendingScrollLockRelease=void 0,release?.()}updated(changed){super.updated(changed),changed.has("open")&&this.open&&this.isConnected&&this.modalSurface&&(this.enterTopLayer(),this.focusInitial())}connectedCallback(){super.connectedCallback(),this.armHeadingObserver(),this.hasUpdated&&this.open&&this.modalSurface&&(this.overlay?.isActive()?this.overlay.resume():this.activateOverlay(),this.enterTopLayer(),queueMicrotask(()=>this.focusInitial()))}disconnectedCallback(){this.resetHeadingObserver(),super.disconnectedCallback(),this.overlay?.suspend(),this.transitionToken++,this.flushPendingScrollLockRelease(),this.cancelTransitionAnimations(),this.removeAttribute("data-closing"),this.open&&queueMicrotask(()=>{if(!this.isConnected&&this.open){if(this.emit("lr-hide",{source:this},{cancelable:this.disconnectHideCancelable}).defaultPrevented){this.syncOpenAttribute();return}this.applyOpenState(!1),this.emit("lr-dialog-close","unmount"),this.emit("lr-after-hide")}})}adoptedCallback(){super.adoptedCallback(),this.resetHeadingObserver()}armHeadingObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.headingObserver&&this.headingObserverDocument===ownerDocument)return;this.resetHeadingObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.headingObserverGeneration,observer=new MutationObserverCtor(()=>{this.headingObserver!==observer||this.headingObserverDocument!==ownerDocument||this.headingObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.detectLightDomChrome()});this.headingObserver=observer,this.headingObserverDocument=ownerDocument,observer.observe(this,{childList:!0,characterData:!0,subtree:!0})}resetHeadingObserver(){this.headingObserverGeneration+=1,this.headingObserver?.disconnect(),this.headingObserver=void 0,this.headingObserverDocument=void 0}get disconnectHideCancelable(){return!1}detectLightDomChrome(){const children=Array.from(this.children),heading=children.find(el=>el.getAttribute("slot")===null&&el.matches(HEADING_SELECTOR));this.headingText=heading?.textContent?.trim()||void 0,this.hasLabelSlot=children.some(el=>el.getAttribute("slot")==="label"),this.hasHeaderActionsSlot=children.some(el=>el.getAttribute("slot")==="header-actions")}show(){if(this.coalesceOpenRequest(!0)||this._open)return Promise.resolve();this.beginOpenRequest(!0);const prevented=this.emit("lr-show",null,{cancelable:!0}).defaultPrevented,superseded=this.openRequestWasSuperseded(!0);return this.finishOpenRequest(),prevented||superseded?(this.syncOpenAttribute(),Promise.resolve()):(this.cancelTransitionAnimations(),this.removeAttribute("data-closing"),this.applyOpenState(!0),this.settleTransition("lr-after-show"))}hide(){return this.close("api")}close(reason="api"){return this.closeFrom(reason,this)}closeFrom(reason,source){return this.coalesceOpenRequest(!1)||!this._open?Promise.resolve():(this.beginOpenRequest(!1),this.emit("lr-hide",{source},{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1)?(this.finishOpenRequest(),this.syncOpenAttribute(),Promise.resolve()):this.emit("lr-dialog-close",reason,{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1)?(this.finishOpenRequest(),this.syncOpenAttribute(),Promise.resolve()):(this.finishOpenRequest(),this.cancelTransitionAnimations(),this.isConnected&&this.setAttribute("data-closing",""),this.applyOpenState(!1),this.settleTransition("lr-after-hide")))}coalesceOpenRequest(next){return this.openRequestTarget===void 0?!1:(this.openRequestDuringPreflight=next,!0)}beginOpenRequest(next){this.openRequestTarget=next,this.openRequestDuringPreflight=void 0}openRequestWasSuperseded(next){return this.openRequestDuringPreflight!==void 0&&this.openRequestDuringPreflight!==next}finishOpenRequest(){this.openRequestTarget=void 0,this.openRequestDuringPreflight=void 0}applyOpenState(next){const old=this._open;this._open=next,next&&(this.initialFocusDecision=void 0),this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}panelAnimationName(showing){return showing?"dialog.show":"dialog.hide"}overlayAnimationName(showing){return showing?"dialog.overlay.show":"dialog.overlay.hide"}panelAnimationSpec(showing){const offset="translateY(calc(-1 * var(--lr-size-0-5rem)))";return{keyframes:showing?[{opacity:0,transform:offset},{opacity:1,transform:"translateY(0)"}]:[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:offset}],durationProperties:[showing?"--show-duration":"--hide-duration","--lr-dialog-panel-duration","--lr-duration-base"],easingProperties:["--lr-easing-standard"]}}overlayAnimationSpec(showing){return{keyframes:showing?[{opacity:0},{opacity:1}]:[{opacity:1},{opacity:0}],durationProperties:[showing?"--show-duration":"--hide-duration","--lr-dialog-backdrop-duration","--lr-duration-fast"],easingProperties:["--lr-easing-standard"]}}cancelTransitionAnimations(){for(const animation of this.transitionAnimations)animation.cancel();this.transitionAnimations=[]}async settleTransition(event){const token=++this.transitionToken;if(await this.updateComplete,this.transitionToken===token){if(this.isConnected){const root=this.renderRoot,panel=root.querySelector('[part~="panel"]'),backdrop=root.querySelector('[part~="backdrop"]'),showing=event==="lr-after-show",animations=[panel?animateRegistered(this,panel,this.panelAnimationName(showing),this.effectiveDirection,this.panelAnimationSpec(showing)):void 0,this.modalSurface&&backdrop?animateRegistered(this,backdrop,this.overlayAnimationName(showing),this.effectiveDirection,this.overlayAnimationSpec(showing)):void 0].filter(animation=>animation!==void 0);if(this.transitionAnimations=animations,await Promise.all(animations.map(animation=>animation.finished.catch(()=>{}))),this.transitionToken!==token)return;this.cancelTransitionAnimations()}event==="lr-after-hide"&&(this.removeAttribute("data-closing"),this.leaveTopLayer(),this.flushPendingScrollLockRelease()),this.emit(event)}}enterTopLayer(){if(!(!this.isConnected||typeof this.showPopover!="function")){this.getAttribute("popover")!=="manual"&&this.setAttribute("popover","manual");try{this.isTopLayer()||this.showPopover()}catch{}}}leaveTopLayer(){if(typeof this.hidePopover=="function")try{this.isTopLayer()&&this.hidePopover()}catch{}}isTopLayer(){try{return this.matches(":popover-open")}catch{return!1}}requestClose(source,reason,sourceElement){this.emit("lr-request-close",{source},{cancelable:!0}).defaultPrevented||this.closeFrom(reason,sourceElement)}focusInitial(){this.overlay?.focusInitial()}activateOverlay(){!this.isConnected||this.overlay?.isActive()||(this.overlay=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part~="panel"]')??null,onEscape:()=>{const panel=this.renderRoot.querySelector('[part~="panel"]')??this;this.requestClose("keyboard","escape",panel)},onBackdrop:()=>{const backdrop=this.renderRoot.querySelector('[part~="backdrop"]')??this;this.requestClose("overlay","backdrop",backdrop)},preferredInitialFocus:()=>{const panel=this.renderRoot.querySelector('[part~="panel"]'),body=this.renderRoot.querySelector('[part="body"]'),stops=body?collectFocusableElements(body):[];return stops.find(stop=>stop!==body)??stops[0]??panel},beforeInitialFocus:()=>(this.initialFocusDecision===void 0&&(this.initialFocusDecision=!this.emit("lr-initial-focus",null,{cancelable:!0}).defaultPrevented),this.initialFocusDecision),lockScroll:!0,suspendWhenUnrendered:!0}),this.externalModalDepth>0&&this.overlay.suspend())}deactivateOverlay(options){const overlay=this.overlay;return this.overlay=void 0,overlay?.deactivate(options)}render(){const suppressHeader=this.withoutHeader||this.noHeader,renderHeading=!suppressHeader&&!this.headingText&&(this.hasLabelSlot||this.label.length>0||!!this.heading),hasHostName=this.hostAriaLabel!==null,explicitName=hasHostName?this.hostAriaLabel:this.accessibleLabel||this.headingText,hasExplicitName=hasHostName||!!explicitName,useHeadingForName=!hasExplicitName&&renderHeading,showHeader=!suppressHeader&&(renderHeading||this.hasHeaderActionsSlot||this.closable),headingLevel=resolveHeadingLevel(this.headingLevel);return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{resolveHeadingLevel}from"../../../internal/heading-level.js";import{activateOverlay,collectFocusableElements}from"../../../internal/overlay-manager.js";import{nextId}from"../../../internal/a11y.js";import{closeIcon}from"../../../internal/icons.js";import{trueDefaultBooleanConverter}from"../../../internal/converters.js";import{animateRegistered}from"../../../internal/registered-animation.js";import{styles}from"./dialog.styles.js";import{LYRA_DEFAULT_close}from"../../../internal/default-strings.generated.js";const HEADING_SELECTOR='h1, h2, h3, h4, h5, h6, [role="heading"]';class LyraDialog extends LyraElement{constructor(){super(...arguments),this._open=!1,this.label="",this.headingLevel="3",this.closable=!0,this.withoutHeader=!1,this.noHeader=!1,this.withFooter=!1,this.accessibleLabel="",this.hostAriaLabel=null,this.lightDismiss=!1,this.hasFooterSlot=!1,this.hasLabelSlot=!1,this.hasHeaderActionsSlot=!1,this.headingObserverGeneration=0,this.transitionToken=0,this.transitionAnimations=[],this.headingId=nextId("dialog-heading"),this.externalModalDepth=0,this.modal={activateExternal:()=>{this.externalModalDepth++,this.externalModalDepth===1&&this.overlay?.suspend()},deactivateExternal:()=>{this.externalModalDepth!==0&&(this.externalModalDepth--,this.externalModalDepth===0&&this.open&&this.modalSurface&&(this.overlay?.resume(),queueMicrotask(()=>this.focusInitial())))}},this.onDefaultSlotChange=()=>{this.detectLightDomChrome()},this.onFooterSlotChange=e=>{this.hasFooterSlot=e.target.assignedElements({flatten:!0}).length>0},this.onBackdropClick=()=>{this.lightDismiss&&this.overlay?.dismissBackdrop()},this.onCloseButtonClick=()=>{const button=this.renderRoot.querySelector('[part~="close-button"]')??this;this.requestClose("close-button","close-button",button)}}static{this.defaultStrings={...super.defaultStrings,close:LYRA_DEFAULT_close}}static{this.styles=[LyraElement.styles,styles]}get open(){return this._open}set open(next){const normalized=!!next;if(!this.coalesceOpenRequest(normalized)&&normalized!==this._open){if(!this.hasUpdated){this.applyOpenState(normalized);return}normalized?this.show():this.close("api")}}get modalSurface(){return!0}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.hasFooterSlot=Array.from(this.children).some(el=>el.getAttribute("slot")==="footer"),this.detectLightDomChrome()),changed.has("open")&&(this.flushPendingScrollLockRelease(),this.open?this.isConnected&&this.modalSurface&&this.activateOverlay():this.pendingScrollLockRelease=this.deactivateOverlay({deferScrollLockRelease:!0}))}flushPendingScrollLockRelease(){const release=this.pendingScrollLockRelease;this.pendingScrollLockRelease=void 0,release?.()}updated(changed){super.updated(changed),changed.has("open")&&this.open&&this.isConnected&&this.modalSurface&&(this.enterTopLayer(),this.focusInitial())}connectedCallback(){super.connectedCallback(),this.armHeadingObserver(),this.hasUpdated&&this.open&&this.modalSurface&&(this.overlay?.isActive()?this.overlay.resume():this.activateOverlay(),this.enterTopLayer(),queueMicrotask(()=>this.focusInitial()))}disconnectedCallback(){this.resetHeadingObserver(),super.disconnectedCallback(),this.overlay?.suspend(),this.transitionToken++,this.flushPendingScrollLockRelease(),this.cancelTransitionAnimations(),this.removeAttribute("data-closing"),this.open&&queueMicrotask(()=>{if(!this.isConnected&&this.open){if(this.emit("lr-hide",{source:this},{cancelable:this.disconnectHideCancelable}).defaultPrevented){this.syncOpenAttribute();return}this.applyOpenState(!1),this.emit("lr-close","unmount"),this.emit("lr-after-hide")}})}adoptedCallback(){super.adoptedCallback(),this.resetHeadingObserver()}armHeadingObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.headingObserver&&this.headingObserverDocument===ownerDocument)return;this.resetHeadingObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.headingObserverGeneration,observer=new MutationObserverCtor(()=>{this.headingObserver!==observer||this.headingObserverDocument!==ownerDocument||this.headingObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.detectLightDomChrome()});this.headingObserver=observer,this.headingObserverDocument=ownerDocument,observer.observe(this,{childList:!0,characterData:!0,subtree:!0})}resetHeadingObserver(){this.headingObserverGeneration+=1,this.headingObserver?.disconnect(),this.headingObserver=void 0,this.headingObserverDocument=void 0}get disconnectHideCancelable(){return!1}detectLightDomChrome(){const children=Array.from(this.children),heading=children.find(el=>el.getAttribute("slot")===null&&el.matches(HEADING_SELECTOR));this.headingText=heading?.textContent?.trim()||void 0,this.hasLabelSlot=children.some(el=>el.getAttribute("slot")==="label"),this.hasHeaderActionsSlot=children.some(el=>el.getAttribute("slot")==="header-actions")}show(){if(this.coalesceOpenRequest(!0)||this._open)return Promise.resolve();this.beginOpenRequest(!0);const prevented=this.emit("lr-show",null,{cancelable:!0}).defaultPrevented,superseded=this.openRequestWasSuperseded(!0);return this.finishOpenRequest(),prevented||superseded?(this.syncOpenAttribute(),Promise.resolve()):(this.cancelTransitionAnimations(),this.removeAttribute("data-closing"),this.applyOpenState(!0),this.settleTransition("lr-after-show"))}hide(){return this.close("api")}close(reason="api"){return this.closeFrom(reason,this)}closeFrom(reason,source){return this.coalesceOpenRequest(!1)||!this._open?Promise.resolve():(this.beginOpenRequest(!1),this.emit("lr-hide",{source},{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1)?(this.finishOpenRequest(),this.syncOpenAttribute(),Promise.resolve()):this.emit("lr-close",reason,{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1)?(this.finishOpenRequest(),this.syncOpenAttribute(),Promise.resolve()):(this.finishOpenRequest(),this.cancelTransitionAnimations(),this.isConnected&&this.setAttribute("data-closing",""),this.applyOpenState(!1),this.settleTransition("lr-after-hide")))}coalesceOpenRequest(next){return this.openRequestTarget===void 0?!1:(this.openRequestDuringPreflight=next,!0)}beginOpenRequest(next){this.openRequestTarget=next,this.openRequestDuringPreflight=void 0}openRequestWasSuperseded(next){return this.openRequestDuringPreflight!==void 0&&this.openRequestDuringPreflight!==next}finishOpenRequest(){this.openRequestTarget=void 0,this.openRequestDuringPreflight=void 0}applyOpenState(next){const old=this._open;this._open=next,next&&(this.initialFocusDecision=void 0),this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}panelAnimationName(showing){return showing?"dialog.show":"dialog.hide"}overlayAnimationName(showing){return showing?"dialog.overlay.show":"dialog.overlay.hide"}panelAnimationSpec(showing){const offset="translateY(calc(-1 * var(--lr-size-0-5rem)))";return{keyframes:showing?[{opacity:0,transform:offset},{opacity:1,transform:"translateY(0)"}]:[{opacity:1,transform:"translateY(0)"},{opacity:0,transform:offset}],durationProperties:[showing?"--show-duration":"--hide-duration","--lr-dialog-panel-duration","--lr-duration-base"],easingProperties:["--lr-easing-standard"]}}overlayAnimationSpec(showing){return{keyframes:showing?[{opacity:0},{opacity:1}]:[{opacity:1},{opacity:0}],durationProperties:[showing?"--show-duration":"--hide-duration","--lr-dialog-backdrop-duration","--lr-duration-fast"],easingProperties:["--lr-easing-standard"]}}cancelTransitionAnimations(){for(const animation of this.transitionAnimations)animation.cancel();this.transitionAnimations=[]}async settleTransition(event){const token=++this.transitionToken;if(await this.updateComplete,this.transitionToken===token){if(this.isConnected){const root=this.renderRoot,panel=root.querySelector('[part~="panel"]'),backdrop=root.querySelector('[part~="backdrop"]'),showing=event==="lr-after-show",animations=[panel?animateRegistered(this,panel,this.panelAnimationName(showing),this.effectiveDirection,this.panelAnimationSpec(showing)):void 0,this.modalSurface&&backdrop?animateRegistered(this,backdrop,this.overlayAnimationName(showing),this.effectiveDirection,this.overlayAnimationSpec(showing)):void 0].filter(animation=>animation!==void 0);if(this.transitionAnimations=animations,await Promise.all(animations.map(animation=>animation.finished.catch(()=>{}))),this.transitionToken!==token)return;this.cancelTransitionAnimations()}event==="lr-after-hide"&&(this.removeAttribute("data-closing"),this.leaveTopLayer(),this.flushPendingScrollLockRelease()),this.emit(event)}}enterTopLayer(){if(!(!this.isConnected||typeof this.showPopover!="function")){this.getAttribute("popover")!=="manual"&&this.setAttribute("popover","manual");try{this.isTopLayer()||this.showPopover()}catch{}}}leaveTopLayer(){if(typeof this.hidePopover=="function")try{this.isTopLayer()&&this.hidePopover()}catch{}}isTopLayer(){try{return this.matches(":popover-open")}catch{return!1}}requestClose(source,reason,sourceElement){this.emit("lr-request-close",{source},{cancelable:!0}).defaultPrevented||this.closeFrom(reason,sourceElement)}focusInitial(){this.overlay?.focusInitial()}activateOverlay(){!this.isConnected||this.overlay?.isActive()||(this.overlay=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part~="panel"]')??null,onEscape:()=>{const panel=this.renderRoot.querySelector('[part~="panel"]')??this;this.requestClose("keyboard","escape",panel)},onBackdrop:()=>{const backdrop=this.renderRoot.querySelector('[part~="backdrop"]')??this;this.requestClose("overlay","backdrop",backdrop)},preferredInitialFocus:()=>{const panel=this.renderRoot.querySelector('[part~="panel"]'),body=this.renderRoot.querySelector('[part="body"]'),stops=body?collectFocusableElements(body):[];return stops.find(stop=>stop!==body)??stops[0]??panel},beforeInitialFocus:()=>(this.initialFocusDecision===void 0&&(this.initialFocusDecision=!this.emit("lr-initial-focus",null,{cancelable:!0}).defaultPrevented),this.initialFocusDecision),lockScroll:!0,suspendWhenUnrendered:!0}),this.externalModalDepth>0&&this.overlay.suspend())}deactivateOverlay(options){const overlay=this.overlay;return this.overlay=void 0,overlay?.deactivate(options)}render(){const suppressHeader=this.withoutHeader||this.noHeader,renderHeading=!suppressHeader&&!this.headingText&&(this.hasLabelSlot||this.label.length>0||!!this.heading),hasHostName=this.hostAriaLabel!==null,explicitName=hasHostName?this.hostAriaLabel:this.accessibleLabel||this.headingText,hasExplicitName=hasHostName||!!explicitName,useHeadingForName=!hasExplicitName&&renderHeading,showHeader=!suppressHeader&&(renderHeading||this.hasHeaderActionsSlot||this.closable),headingLevel=resolveHeadingLevel(this.headingLevel);return html`
       <div part="base">
         <div part="backdrop overlay" @click=${this.onBackdropClick}></div>
         <div