@aceshooting/lyra-ui 9.1.1 → 11.0.0

package/dist/components/data/timeline/timeline-item.styles.js

@@ -2,9 +2,6 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     min-inline-size: 0;
-    /* The public marker/rail hooks stay undeclared here so a theme wrapper can supply them. This
-       private marker default is swapped per variant and consumed only when no public value
-       inherits from an ancestor or is set directly on the item. */
     --_lr-timeline-marker-color-default: var(--lr-color-text-quiet);
   }
   :host([variant='brand']) {
@@ -23,19 +20,12 @@ import{css}from"lit";const styles=css`
   [part='base'] {
     display: flex;
     min-inline-size: 0;
-    /* Driven by the private orientation property inherited from <lr-timeline>'s
-       :host across the slot boundary -- row (marker beside content) in vertical-timeline mode,
-       column (marker above content) in horizontal-timeline mode. This component has no orientation
-       attribute of its own; see <lr-timeline>'s styles for the source of truth. */
     flex-direction: var(--_lr-timeline-item-direction, row);
     gap: var(--lr-space-s);
   }
 
   [part='track'] {
     display: flex;
-    /* Always the *opposite* axis from [part='base'] -- see the class doc's rail-mechanism note.
-       Paired with the base-direction property at the same <lr-timeline> source, since CSS has
-       no way to derive "the other one of row/column" from a single custom property's value. */
     flex-direction: var(--_lr-timeline-item-track-direction, column);
     align-items: center;
     flex: 0 0 auto;
@@ -47,23 +37,16 @@ import{css}from"lit";const styles=css`
     border-radius: 50%;
     flex: 0 0 auto;
     background: var(--lr-timeline-marker-color, var(--_lr-timeline-marker-color-default));
-    /* A slotted <lr-icon> (or any currentColor-stroked glyph) automatically inherits the correct
-       variant tint with no extra wiring. */
     color: var(--lr-timeline-marker-color, var(--_lr-timeline-marker-color-default));
     display: inline-flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
   }
-  /* The icon slot overrides the fallback dot outright (see the class doc's icon slot
-     description) -- only the fill is suppressed, not color, so a slotted <lr-icon> still
-     inherits the variant tint. */
   [part='marker'][data-has-icon] {
     background: transparent;
   }
 
-  /* The pulsing "in-progress" treatment -- same token/guard shape as lr-stream-status's
-     streaming-phase dot pulse. */
   :host([active]) [part='marker'] {
     outline: var(--lr-border-width-medium) solid
       var(
@@ -92,17 +75,9 @@ import{css}from"lit";const styles=css`
 
   [part='rail'] {
     flex: 1 1 auto;
-    /* Both dimensions set to the same fixed thickness: whichever one ends up being [part='track']'s
-       cross axis (see above) is the one that visually matters as the rail's width -- the main-axis
-       dimension is just flex-basis's starting point, immediately overridden by flex-grow filling
-       whatever length [part='content']'s own padding/height creates (see the class doc's rail
-       mechanism). One declaration handles both orientations with no extra conditional. */
     inline-size: var(--lr-timeline-rail-width, var(--lr-border-width-medium));
     block-size: var(--lr-timeline-rail-width, var(--lr-border-width-medium));
     background: var(--lr-timeline-rail-color, var(--lr-color-border));
-    /* Suppressed for the last item in a <lr-timeline> via this custom property, set by
-       <lr-timeline>'s own ::slotted(:last-child) rule -- visibility (not display) keeps the same
-       layout box every other item's track has, so marker alignment stays consistent down the list. */
     visibility: var(--_lr-timeline-item-rail-visibility, visible);
   }
 
@@ -112,11 +87,6 @@ import{css}from"lit";const styles=css`
     flex: 1 1 auto;
     min-inline-size: 0;
     gap: var(--lr-space-2xs);
-    /* Reaches into the gap before the next item so the rail (which stretches to match this
-       element's own size -- see [part='track']) visually meets the next item's marker with no seam.
-       Exactly one of these two is non-zero at a time, set together by <lr-timeline>'s
-       :host / :host([orientation='horizontal']) rules; both default to 0 when this item is used
-       standalone (no <lr-timeline> ancestor). */
     padding-block-end: var(--_lr-timeline-item-gap-block-end, 0);
     padding-inline-end: var(--_lr-timeline-item-gap-inline-end, 0);
   }

package/dist/components/data/timeline/timeline.class.d.ts

@@ -1,6 +1,10 @@
 import { type PropertyValues, type TemplateResult } from 'lit';
 import { LyraElement } from '../../../internal/lyra-element.js';
 import type { LyraOrientation } from '../../../internal/shared-unions.js';
+/** How a timeline distributes its items along the main axis. */
+export type LyraTimelineScale = 'flow' | 'time';
+/** How `scale="time"` handles items that land on (nearly) the same position. */
+export type LyraTimelineCollision = 'overlap' | 'stack';
 /**
  * `<lr-timeline>` — an ordered, connected sequence of past-event rows (an audit trail, an agent
  * action history, a changelog) composed from `<lr-timeline-item>` light-DOM children, joined by a
@@ -30,6 +34,14 @@ import type { LyraOrientation } from '../../../internal/shared-unions.js';
  *   timeline's main axis; also the length each item's own rail visually bridges to reach the next
  *   item's marker. Declared here but actually consumed inside each `<lr-timeline-item>`'s own
  *   stylesheet, via ordinary CSS custom-property inheritance across the slot boundary.
+ * @cssprop [--lr-timeline-collision-offset=var(--lr-space-l)] - Cross-axis step between items
+ *   stacked by `collision="stack"`. Each collision lane is indented one step further, so a wider
+ *   marker can claim more room without the lanes overlapping again. Ignored unless both
+ *   `scale="time"` and `collision="stack"` are set.
+ * @cssprop [--lr-timeline-time-extent=var(--lr-size-20rem)] - Distance the `scale="time"` axis
+ *   distributes items along: `block-size` when vertical, `inline-size` when horizontal. Time-scaled
+ *   items are absolutely positioned, and a percentage offset against an auto-sized track resolves
+ *   to zero, so the axis needs a definite extent. Ignored in the default `scale="flow"`.
  * @cssprop [--lr-scroll-fade-size=2rem] - Inline size of each edge fade while a
  *   horizontal timeline overflows. Forced-colors mode disables the masks while retaining native
  *   scrolling.
@@ -45,6 +57,49 @@ export declare class LyraTimeline extends LyraElement {
     private _orientation;
     get orientation(): LyraOrientation;
     set orientation(value: LyraOrientation);
+    /**
+     * How items are distributed along the main axis.
+     *
+     * `'flow'` (the default) is today's behavior exactly: an evenly-spaced sequence, where
+     * `timestamp` is rendered as text but carries no positional meaning. `'time'` positions each item
+     * at its true proportion of the time range, so a gap of weeks and a gap of decades no longer look
+     * identical — the shape of the history becomes visible.
+     *
+     * `'time'` needs a definite extent to distribute along, which comes from
+     * `--lr-timeline-time-extent` (default `20rem` block-size when vertical, inline-size when
+     * horizontal). Items are absolutely positioned within it, so two events sharing a date overlap
+     * rather than being fanned into lanes; a dense dataset needing lane assignment, brushing, or
+     * per-event selection is a different component than this deliberately passive one.
+     *
+     * An item with no `timestamp` this component can parse (including one whose timestamp comes only
+     * from the `timestamp` slot, which carries no machine-readable instant) keeps document order and
+     * is distributed evenly, so a partially-timestamped list degrades rather than collapsing.
+     */
+    private _scale;
+    get scale(): LyraTimelineScale;
+    set scale(value: LyraTimelineScale);
+    /**
+     * What `scale="time"` does with items that land on (nearly) the same position.
+     *
+     * `'overlap'` (the default, and the only previous behavior) leaves them stacked on top of one
+     * another. `'stack'` offsets each colliding item along the **cross** axis instead, so a dense
+     * chronology stays readable — with ~1,800 events over ~330 years, same-period collisions are the
+     * common case rather than the exception. Ignored unless `scale="time"`.
+     *
+     * There is deliberately no `'cluster'` mode. Collapsing coincident items into one marker with a
+     * count that expands on interaction needs a selection model and click events, and this component
+     * is documented as passive with neither; adding them here would change what `lr-timeline` is
+     * rather than extend it.
+     */
+    private _collision;
+    get collision(): LyraTimelineCollision;
+    set collision(value: LyraTimelineCollision);
+    /** Pins the axis start instead of deriving it from the earliest item. Ignored unless
+     *  `scale="time"`; a non-finite or reversed pair falls back to the derived range. */
+    rangeStart?: Date | string | number;
+    /** Pins the axis end instead of deriving it from the latest item. Ignored unless
+     *  `scale="time"`; a non-finite or reversed pair falls back to the derived range. */
+    rangeEnd?: Date | string | number;
     /** Host-level `aria-label` override for the list's accessible name — wins over the localized
      *  default `"Timeline"`. Needed because the `role="list"` element lives in the shadow root and
      *  never inherits a host attribute automatically — same reasoning as `<lr-breadcrumb>`'s
@@ -52,7 +107,14 @@ export declare class LyraTimeline extends LyraElement {
      *  `aria-label` stays empty. */
     accessibleLabel?: string;
     private slottedCount;
-    constructor();
+    /** Gates the horizontal [part='base'] edge fade on the strip genuinely overflowing, with
+     *  one-sided/RTL-aware logical-edge state -- see --lr-scroll-fade-size and timeline.styles.ts.
+     *  Harmless in the vertical default, where the strip never scrolls inline and the attribute
+     *  simply stays off. Stored (rather than a bare statement-expression call) so `updated()` can
+     *  register each timeline item on the controller's own `ResizeObserver` via `observeExtra()`
+     *  below -- an item's own intrinsic content (a longer title, an icon loading in) can grow
+     *  scrollWidth without [part='base']'s own border box changing at all. */
+    private scrollOverflow;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
     private countTimelineItems;
@@ -61,6 +123,32 @@ export declare class LyraTimeline extends LyraElement {
      *  for building a `"{count} events"` header without hand-counting DOM children. */
     get itemCount(): number;
     private onSlotChange;
+    /** The slotted `<lr-timeline-item>` children, in document order. */
+    private timelineItems;
+    /** The axis bounds: an explicitly pinned pair when both ends are finite and ordered, otherwise
+     *  the earliest and latest parseable item timestamps. `null` when fewer than two distinct
+     *  instants exist, since a zero-width range cannot be divided. */
+    private timeRange;
+    /**
+     * Writes each item's position as a percentage into `--_lr-timeline-item-offset`, consumed by
+     * timeline.styles.ts's `scale="time"` rules.
+     *
+     * Deliberately a style write on the light-DOM child rather than a wrapper element per item: the
+     * component's whole contract is that it never mutates its children's content or structure, and a
+     * custom property is the one mutation that stays invisible to the consumer's own DOM shape. The
+     * property is removed again in `'flow'`, so toggling back leaves no residue.
+     */
+    private applyTimeScale;
+    /**
+     * Assigns each time-scaled item a cross-axis lane so coincident items stop covering each other.
+     *
+     * Walks items in ascending offset order and gives each the lowest lane not already taken by a
+     * still-colliding earlier item, so a run of three same-year events occupies lanes 0/1/2 while an
+     * isolated event later on returns to lane 0 rather than inheriting the run's depth. Lane 0 is
+     * written as well as the others, so switching back to `'overlap'` (or leaving `'stack'` unset)
+     * clears every lane rather than leaving stale offsets on some children.
+     */
+    private applyCollisionLanes;
     render(): TemplateResult;
 }
 declare global {

package/dist/components/data/timeline/timeline.class.js

@@ -1,5 +1,5 @@
-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}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{tag}from"../../../internal/prefix.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{styles}from"./timeline.styles.js";import{LYRA_DEFAULT_timeline}from"../../../internal/default-strings.generated.js";const normalizeTimelineOrientation=value=>value==="horizontal"?"horizontal":"vertical";class LyraTimeline extends LyraElement{static{this.defaultStrings={...super.defaultStrings,timeline:LYRA_DEFAULT_timeline}}static{this.styles=[LyraElement.styles,styles]}get orientation(){return this._orientation}set orientation(value){const normalized=normalizeTimelineOrientation(value),previous=this._orientation;if(previous===normalized){value!==normalized&&this.requestUpdate("orientation",previous);return}this._orientation=normalized,this.requestUpdate("orientation",previous)}constructor(){super(),this._orientation="vertical",this.slottedCount=0,this.onSlotChange=e=>{this.slottedCount=this.countTimelineItems(e.target)},observeScrollOverflow(this,()=>this.renderRoot.querySelector("[part='base']"))}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.slottedCount=Array.from(this.children).filter(element=>!element.getAttribute("slot")&&element.localName===tag("timeline-item")).length)}updated(changed){super.updated(changed),changed.has("orientation")&&this.getAttribute("orientation")!==this.orientation&&this.setAttribute("orientation",this.orientation)}countTimelineItems(slot){return slot.assignedElements({flatten:!0}).filter(element=>element.localName===tag("timeline-item")).length}firstUpdated(changed){super.firstUpdated(changed);const slot=this.shadowRoot.querySelector("slot");this.slottedCount=this.countTimelineItems(slot)}get itemCount(){return this.slottedCount}render(){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}from"lit";import{property,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{tag}from"../../../internal/prefix.js";import{observeScrollOverflow}from"../../../internal/scroll-overflow.js";import{styles}from"./timeline.styles.js";import{LYRA_DEFAULT_timeline}from"../../../internal/default-strings.generated.js";const normalizeTimelineOrientation=value=>value==="horizontal"?"horizontal":"vertical",normalizeTimelineScale=value=>value==="time"?"time":"flow",normalizeTimelineCollision=value=>value==="stack"?"stack":"overlap",TIMELINE_COLLISION_THRESHOLD=.015;function itemEpochMs(element){const raw=element.timestamp;if(raw==null)return null;const ms=(raw instanceof Date?raw:typeof raw=="number"?new Date(raw):new Date(String(raw))).getTime();return Number.isFinite(ms)?ms:null}class LyraTimeline extends LyraElement{constructor(){super(...arguments),this._orientation="vertical",this._scale="flow",this._collision="overlap",this.slottedCount=0,this.scrollOverflow=observeScrollOverflow(this,()=>this.renderRoot.querySelector("[part='base']")),this.onSlotChange=e=>{this.slottedCount=this.countTimelineItems(e.target),this.applyTimeScale()}}static{this.defaultStrings={...super.defaultStrings,timeline:LYRA_DEFAULT_timeline}}static{this.styles=[LyraElement.styles,styles]}get orientation(){return this._orientation}set orientation(value){const normalized=normalizeTimelineOrientation(value),previous=this._orientation;if(previous===normalized){value!==normalized&&this.requestUpdate("orientation",previous);return}this._orientation=normalized,this.requestUpdate("orientation",previous)}get scale(){return this._scale}set scale(value){const normalized=normalizeTimelineScale(value),previous=this._scale;if(previous===normalized){value!==normalized&&this.requestUpdate("scale",previous);return}this._scale=normalized,this.requestUpdate("scale",previous)}get collision(){return this._collision}set collision(value){const normalized=normalizeTimelineCollision(value),previous=this._collision;if(previous===normalized){value!==normalized&&this.requestUpdate("collision",previous);return}this._collision=normalized,this.requestUpdate("collision",previous)}willUpdate(changed){super.willUpdate(changed),this.hasUpdated||(this.slottedCount=Array.from(this.children).filter(element=>!element.getAttribute("slot")&&element.localName===tag("timeline-item")).length)}updated(changed){super.updated(changed),this.scrollOverflow.observeExtra(this.timelineItems()),changed.has("orientation")&&this.getAttribute("orientation")!==this.orientation&&this.setAttribute("orientation",this.orientation),(changed.has("scale")||changed.has("collision")||changed.has("rangeStart")||changed.has("rangeEnd"))&&this.applyTimeScale()}countTimelineItems(slot){return slot.assignedElements({flatten:!0}).filter(element=>element.localName===tag("timeline-item")).length}firstUpdated(changed){super.firstUpdated(changed);const slot=this.shadowRoot.querySelector("slot");this.slottedCount=this.countTimelineItems(slot),this.applyTimeScale()}get itemCount(){return this.slottedCount}timelineItems(){const slot=this.shadowRoot?.querySelector("slot");return slot?slot.assignedElements({flatten:!0}).filter(element=>element.localName===tag("timeline-item")):[]}timeRange(stamps){const pinnedStart=this.rangeStart==null?null:itemEpochMs({timestamp:this.rangeStart}),pinnedEnd=this.rangeEnd==null?null:itemEpochMs({timestamp:this.rangeEnd});if(pinnedStart!==null&&pinnedEnd!==null&&pinnedEnd>pinnedStart)return[pinnedStart,pinnedEnd];const finite=stamps.filter(value=>value!==null);if(finite.length<2)return null;const lo=Math.min(...finite),hi=Math.max(...finite);return hi>lo?[lo,hi]:null}applyTimeScale(){const items=this.timelineItems();if(this.scale!=="time"){for(const item of items)item.style.removeProperty("--_lr-timeline-item-offset"),item.style.removeProperty("--_lr-timeline-item-lane");return}const stamps=items.map(item=>itemEpochMs(item)),range=this.timeRange(stamps),lastIndex=Math.max(1,items.length-1),offsets=new Array(items.length).fill(0);items.forEach((item,index)=>{const stamp=stamps[index]??null,ratio=range&&stamp!==null?(stamp-range[0])/(range[1]-range[0]):index/lastIndex,clamped=Math.min(1,Math.max(0,ratio));offsets[index]=clamped,item.style.setProperty("--_lr-timeline-item-offset",`${clamped*100}%`)}),this.applyCollisionLanes(items,offsets)}applyCollisionLanes(items,offsets){if(this.collision!=="stack"){for(const item of items)item.style.removeProperty("--_lr-timeline-item-lane");return}const order=items.map((_,index)=>index).sort((a,b)=>(offsets[a]??0)-(offsets[b]??0)),laneTails=[],lanes=new Array(items.length).fill(0);for(const index of order){const offset=offsets[index]??0;let lane=laneTails.findIndex(tail=>offset-tail>=TIMELINE_COLLISION_THRESHOLD);lane===-1&&(lane=laneTails.length),laneTails[lane]=offset,lanes[index]=lane}items.forEach((item,index)=>{item.style.setProperty("--_lr-timeline-item-lane",String(lanes[index]??0))})}render(){return html`
       <div part="base" role="list" aria-label=${this.accessibleLabel==null?this.localize("timeline"):this.accessibleLabel}>
         <slot @slotchange=${this.onSlotChange}></slot>
       </div>
-    `}}__decorate([property({reflect:!0})],LyraTimeline.prototype,"orientation",null),__decorate([property({attribute:"aria-label"})],LyraTimeline.prototype,"accessibleLabel",void 0),__decorate([state()],LyraTimeline.prototype,"slottedCount",void 0);export{LyraTimeline};
+    `}}__decorate([property({reflect:!0})],LyraTimeline.prototype,"orientation",null),__decorate([property({reflect:!0})],LyraTimeline.prototype,"scale",null),__decorate([property({reflect:!0})],LyraTimeline.prototype,"collision",null),__decorate([property({attribute:!1})],LyraTimeline.prototype,"rangeStart",void 0),__decorate([property({attribute:!1})],LyraTimeline.prototype,"rangeEnd",void 0),__decorate([property({attribute:"aria-label"})],LyraTimeline.prototype,"accessibleLabel",void 0),__decorate([state()],LyraTimeline.prototype,"slottedCount",void 0);export{LyraTimeline};

package/dist/components/data/timeline/timeline.styles.js

@@ -2,25 +2,13 @@ import{css}from"lit";const styles=css`
   :host {
     display: block;
     min-inline-size: 0;
-    /* Private implementation properties propagate orientation into every
-       slotted <lr-timeline-item>'s own
-       stylesheet, via ordinary CSS custom-property inheritance across the slot boundary -- no JS
-       coordination between the two components is needed for orientation to propagate.
-       --_lr-timeline-item-direction drives an item's own [part='base'] flex-direction; the
-       remaining three are its paired companions so an item's [part='track'] (always the *opposite*
-       axis from its [part='base']) and [part='content'] (which single logical padding side reaches
-       into the inter-item gap) can react to the same orientation switch with no conditional logic of
-       their own -- see timeline-item.styles.ts for the consuming side. flex-direction: row is
-       inherently the CSS *inline* axis and column the *block* axis, which is also why none of this
-       needs an RTL-specific override: a row flex container already reverses its visual child order
-       under dir="rtl" for free. */
-    --_lr-timeline-item-direction: row; /* vertical (default): marker beside content */
-    --_lr-timeline-item-track-direction: column; /* opposite axis, for [part='track'] */
+    --_lr-timeline-item-direction: row; 
+    --_lr-timeline-item-track-direction: column; 
     --_lr-timeline-item-gap-block-end: var(--lr-timeline-gap, var(--lr-space-l));
     --_lr-timeline-item-gap-inline-end: 0;
   }
   :host([orientation='horizontal']) {
-    --_lr-timeline-item-direction: column; /* marker above content */
+    --_lr-timeline-item-direction: column; 
     --_lr-timeline-item-track-direction: row;
     --_lr-timeline-item-gap-block-end: 0;
     --_lr-timeline-item-gap-inline-end: var(--lr-timeline-gap, var(--lr-space-l));
@@ -33,21 +21,48 @@ import{css}from"lit";const styles=css`
     margin: 0;
     padding: 0;
   }
+
+  :host([scale='time']) [part='base'] {
+    position: relative;
+    display: block;
+    block-size: var(--lr-timeline-time-extent, var(--lr-size-20rem));
+  }
+  :host([scale='time'][orientation='horizontal']) [part='base'] {
+    block-size: auto;
+    inline-size: var(--lr-timeline-time-extent, var(--lr-size-20rem));
+  }
+  :host([scale='time']) ::slotted(*) {
+    position: absolute;
+    inset-block-start: var(--_lr-timeline-item-offset, 0%);
+    inset-inline-start: 0;
+    inline-size: 100%;
+  }
+  :host([scale='time'][collision='stack']) ::slotted(*) {
+    --_lr-timeline-lane-indent: calc(
+      var(--_lr-timeline-item-lane, 0) * var(--lr-timeline-collision-offset, var(--lr-space-l))
+    );
+    inset-inline-start: var(--_lr-timeline-lane-indent);
+    inline-size: calc(100% - var(--_lr-timeline-lane-indent));
+  }
+  :host([scale='time'][collision='stack'][orientation='horizontal']) ::slotted(*) {
+    inset-inline-start: var(--_lr-timeline-item-offset, 0%);
+    inset-block-start: var(--_lr-timeline-lane-indent);
+    inline-size: auto;
+  }
+  :host([scale='time'][orientation='horizontal']) ::slotted(*) {
+    inset-block-start: 0;
+    inset-inline-start: var(--_lr-timeline-item-offset, 0%);
+    inline-size: auto;
+  }
   :host([orientation='horizontal']) [part='base'] {
     flex-direction: row;
-    /* Mirrors <lr-tab-group>'s identical horizontal-overflow handling -- a horizontal timeline
-       becomes a horizontally-scrollable strip rather than breaking layout. overflow-y is pinned
-       explicitly alongside overflow-x: per the CSS overflow spec, leaving one axis unset once the
-       other is non-'visible' forces its used value to 'auto' too, which can show a phantom/empty
-       scrollbar from sub-pixel rounding even when the content never actually overflows block-wise. */
     overflow-x: auto;
     overflow-y: hidden;
   }
-  /* Edge affordance, gated on the strip actually overflowing -- ScrollOverflowController toggles
-     data-scroll-overflow from a real scrollWidth/clientWidth measurement; scrolling itself stays
-     native, with no scroll listener. Unconditional (as this used to be) it fades the first and
-     last item of a strip that fits. */
-  :host([orientation='horizontal']) [part='base'][data-scroll-overflow] {
+  :host([orientation='horizontal'])
+    [part='base'][data-scroll-overflow]:where(
+      [data-scroll-start][data-scroll-end]
+    ) {
     -webkit-mask-image: linear-gradient(
       to right,
       transparent,
@@ -63,18 +78,83 @@ import{css}from"lit";const styles=css`
       transparent
     );
   }
+  :host([orientation='horizontal'])
+    [part='base'][data-scroll-overflow]:where(
+      [data-scroll-end]:not([data-scroll-start])
+    ) {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      var(--lr-mask-opaque),
+      var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
+    mask-image: linear-gradient(
+      to right,
+      var(--lr-mask-opaque),
+      var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
+  }
+  :host([orientation='horizontal'])
+    [part='base'][data-scroll-overflow]:where(
+      [data-scroll-start]:not([data-scroll-end])
+    ) {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-mask-opaque) var(--lr-scroll-fade-size),
+      var(--lr-mask-opaque)
+    );
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-mask-opaque) var(--lr-scroll-fade-size),
+      var(--lr-mask-opaque)
+    );
+  }
+  :host(:dir(rtl)[orientation='horizontal'])
+    [part='base'][data-scroll-overflow]:where(
+      [data-scroll-end]:not([data-scroll-start])
+    ) {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-mask-opaque) var(--lr-scroll-fade-size),
+      var(--lr-mask-opaque)
+    );
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      var(--lr-mask-opaque) var(--lr-scroll-fade-size),
+      var(--lr-mask-opaque)
+    );
+  }
+  :host(:dir(rtl)[orientation='horizontal'])
+    [part='base'][data-scroll-overflow]:where(
+      [data-scroll-start]:not([data-scroll-end])
+    ) {
+    -webkit-mask-image: linear-gradient(
+      to right,
+      var(--lr-mask-opaque),
+      var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
+    mask-image: linear-gradient(
+      to right,
+      var(--lr-mask-opaque),
+      var(--lr-mask-opaque) calc(100% - var(--lr-scroll-fade-size)),
+      transparent
+    );
+  }
   @media (forced-colors: active) {
-    :host([orientation='horizontal']) [part='base'][data-scroll-overflow] {
+    :host([orientation='horizontal']) [part='base'][data-scroll-overflow],
+    :host(:dir(rtl)[orientation='horizontal'])
+      [part='base'][data-scroll-overflow] {
       -webkit-mask-image: none;
       mask-image: none;
     }
   }
 
-  /* Matches by role rather than tag name (<lr-timeline-item> sets role="listitem" on itself in
-     connectedCallback) so this selector keeps working regardless of the registered tag prefix --
-     mirrors <lr-breadcrumb>'s identical ::slotted structural-position technique. Suppresses the
-     last item's trailing rail (nothing left to connect to) with no JS coordination between the two
-     components -- consumed by <lr-timeline-item>'s own [part='rail'] rule. */
   ::slotted([role='listitem']:last-child) {
     --_lr-timeline-item-rail-visibility: hidden;
   }

package/dist/components/data/tree/tree-item.styles.js

@@ -1,7 +1,7 @@
 import{css}from"lit";const styles=css`
   :host {
     display: block;
-    outline: none; /* the host is the focusable treeitem; the visible ring lives on [part=row] */
+    outline: none; 
   }
   [part~='item'] {
     display: contents;
@@ -16,10 +16,6 @@ import{css}from"lit";const styles=css`
     align-items: center;
     gap: var(--lr-space-xs);
     padding: var(--lr-space-xs) var(--lr-space-s);
-    /* Depth-based indent is capped at --lr-size-8rem (8rem) so a deeply-nested
-       item can't push its content off-screen with no way back; [part=label]
-       below truncates the remaining overflow and tree.styles.ts's [part=base]
-       adds an overflow-x:auto fallback for whatever's left. */
     padding-inline-start: calc(
       var(--lr-space-s) + min(var(--lr-tree-depth, 0) * var(--indent-size, var(--lr-space-l)), var(--lr-size-8rem))
     );
@@ -30,22 +26,10 @@ import{css}from"lit";const styles=css`
     color: var(--lr-tree-selected-color, var(--lr-color-brand));
     background: var(--lr-tree-selected-bg, var(--lr-color-brand-quiet));
   }
-  /* MUST stay after the selected-row rule above, and the second arm exists so it can: a selected
-     row is matched at (0,3,0) there, which a bare [part='row']:hover ((0,2,0)) cannot reach, and the
-     already-selected item is exactly the row a user is most likely to hover next. Matching it
-     through :host() lands both arms at the same specificity as that rule, so source order decides --
-     and the :where() keeps the state qualifier itself out of the count. Also a distinct color-mix
-     step rather than the plain brand-quiet fallback used elsewhere, since the selected row's own
-     resting fill already resolves to that same token by default. */
   [part='row']:hover,
   :host(:where([aria-selected='true'])) [part='row']:hover {
     background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-hover));
   }
-  /* MUST stay after the selected-row rule above, and the second arm exists so it can: a selected
-     row is matched at (0,3,0) there, which a bare [part='row']:active ((0,2,0)) cannot reach, and
-     the already-selected item is exactly the row a user presses next. Matching it through :host()
-     lands both arms at the same specificity as that rule, so source order decides -- and the
-     :where() keeps the state qualifier itself out of the count. */
   [part='row']:active,
   :host(:where([aria-selected='true'])) [part='row']:active {
     background: color-mix(
@@ -61,19 +45,10 @@ import{css}from"lit";const styles=css`
   :host([aria-disabled='true']) [part='row']:hover {
     background: transparent;
   }
-  /* A disabled item must stay inert under the pointer for the press as well as the hover -- without
-     this it would light up on mousedown and then do nothing. */
   :host([aria-disabled='true']) [part='row']:active {
     background: transparent;
   }
   [part='toggle'] {
-    /* Keep the chevron glyph compact (the row itself stays a --lr-size-1-75rem-ish
-       visual rhythm) while giving the interactive box the shared minimum tappable
-       size -- same "small glyph, padded hit box" pattern as lr-code-block's/
-       lr-json-viewer's/lr-trace-tree's own [part='toggle']. min-inline-size/
-       min-block-size always win over a smaller explicit size, so the *visible*
-       icon stays put via its own 1em SVG sizing while the clickable box floors
-       out at 40px. */
     inline-size: var(--lr-size-1-75rem);
     block-size: var(--lr-size-1-75rem);
     min-inline-size: var(--lr-icon-button-size);
@@ -106,8 +81,6 @@ import{css}from"lit";const styles=css`
     cursor: default;
   }
   [part='toggle'][hidden] {
-    /* visibility (not display) so the placeholder keeps its layout box --
-       a leaf row still lines up with sibling rows that do have a chevron. */
     visibility: hidden;
   }
   [part='spinner'] {

package/dist/components/data/tree/tree.class.js

@@ -1,8 +1,8 @@
-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,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{tag}from"../../../internal/prefix.js";import{isRtl}from"../../../internal/rtl.js";import{styles}from"./tree.styles.js";import{cascadeUpdateComplete}from"./update-cascade.js";import{configureTreeItemOwner,setTreeItemSelection,treeItemOwnerContext}from"./tree-owner-controller.js";import"./tree-item.class.js";import{TREE_MAX_RENDER_DEPTH,TREE_MAX_RENDER_NODES}from"./tree-types.js";import{deepActiveElementIn}from"../../../internal/active-element.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_noData,LYRA_DEFAULT_treeNodeMoved}from"../../../internal/default-strings.generated.js";const TREE_SELECTIONS=new Set(["single","multiple","leaf","leaf-multiple"]),TREE_BADGE_LIMIT=100,EMPTY_TREE_DATA=Object.freeze([]);function ownValue(record,key){try{const descriptor=Object.getOwnPropertyDescriptor(record,key);return descriptor&&"value"in descriptor?descriptor.value:void 0}catch{return}}function arrayLength(value){if(!Array.isArray(value))return 0;try{return Math.max(0,Math.min(Number.MAX_SAFE_INTEGER,Math.trunc(value.length)))}catch{return 0}}function normalizeBadges(value){if(!Array.isArray(value))return{truncated:value!==void 0};const badges=[],length=arrayLength(value);for(let index=0;index<Math.min(length,TREE_BADGE_LIMIT);index++){const raw=ownValue(value,String(index));if(!raw||typeof raw!="object"||Array.isArray(raw))continue;const text=ownValue(raw,"text");if(typeof text!="string")continue;const rawTone=ownValue(raw,"tone"),tone=rawTone==="brand"||rawTone==="success"||rawTone==="warning"||rawTone==="danger"?rawTone:"neutral",rawLabel=ownValue(raw,"label");badges.push(Object.freeze({text,tone,...typeof rawLabel=="string"?{label:rawLabel}:{}}))}return{badges:Object.freeze(badges),truncated:length>TREE_BADGE_LIMIT}}function normalizeTreeData(input){if(!Array.isArray(input))return{data:EMPTY_TREE_DATA,declaredChildrenAtPath:new Map,declaredRootCount:0,truncated:input!=null};const root=[],declaredChildrenAtPath=new Map,created=[],rootLength=arrayLength(input);let truncated=!1,accepted=0;const seenIds=new Set,identityFilteredCollections=new Set,jobs=[],rootScanLength=Math.min(rootLength,TREE_MAX_RENDER_NODES);rootLength>rootScanLength&&(truncated=!0);for(let index=rootScanLength-1;index>=0;index--)jobs.push({source:ownValue(input,String(index)),target:root,parentPath:"",depth:0,ancestors:new Set});for(;jobs.length>0;){if(accepted>=TREE_MAX_RENDER_NODES){truncated=!0;break}const job=jobs.pop(),raw=job.source;if(!raw||typeof raw!="object"||Array.isArray(raw)){truncated=!0,identityFilteredCollections.add(job.target);continue}const id=ownValue(raw,"id"),label=ownValue(raw,"label");if(typeof id!="string"||id.trim()===""||seenIds.has(id)||typeof label!="string"){truncated=!0,identityFilteredCollections.add(job.target);continue}seenIds.add(id);const node={id,label},selected=ownValue(raw,"selected"),disabled=ownValue(raw,"disabled"),lazy=ownValue(raw,"lazy");typeof selected=="boolean"&&(node.selected=selected),typeof disabled=="boolean"&&(node.disabled=disabled),typeof lazy=="boolean"&&(node.lazy=lazy);const icon=ownValue(raw,"icon");icon!==void 0&&(node.icon=icon);const description=ownValue(raw,"description");typeof description=="string"&&(node.description=description);const accessibleLabel=ownValue(raw,"accessibleLabel");typeof accessibleLabel=="string"&&(node.accessibleLabel=accessibleLabel);const normalizedBadges=normalizeBadges(ownValue(raw,"badges"));normalizedBadges.badges?.length&&(node.badges=normalizedBadges.badges),truncated||=normalizedBadges.truncated;const ownIndex=job.target.length,path=job.parentPath===""?String(ownIndex):`${job.parentPath}/${ownIndex}`;job.target.push(node),created.push(node),accepted++;const rawChildren=ownValue(raw,"children"),childCount=arrayLength(rawChildren);if(childCount===0)continue;if(declaredChildrenAtPath.set(path,childCount),job.depth>=TREE_MAX_RENDER_DEPTH||job.ancestors.has(raw)){truncated=!0;continue}const children=[];node.children=children;const ancestors=new Set(job.ancestors);ancestors.add(raw);for(let index=childCount-1;index>=0;index--)jobs.push({source:ownValue(rawChildren,String(index)),target:children,parentPath:path,depth:job.depth+1,ancestors})}for(let index=created.length-1;index>=0;index--){const node=created[index];node.children&&Object.freeze(node.children),Object.freeze(node)}const normalizedJobs=root.map((node,index)=>({node,path:String(index)}));for(;normalizedJobs.length>0;){const{node,path}=normalizedJobs.pop(),children=node.children??[];identityFilteredCollections.has(children)&&declaredChildrenAtPath.set(path,children.length);for(let index=children.length-1;index>=0;index--)normalizedJobs.push({node:children[index],path:`${path}/${index}`})}return{data:Object.freeze(root),declaredChildrenAtPath,declaredRootCount:identityFilteredCollections.has(root)?root.length:rootLength,truncated}}function isInertWithin(node,root){for(let current=node;current&&current!==root;current=current.parentElement)if(current.hasAttribute("inert"))return!0;return!1}class LyraTree extends LyraElement{constructor(){super(...arguments),this._data=EMPTY_TREE_DATA,this.declaredChildrenAtPath=new Map,this.declaredRootCount=0,this._dataTruncated=!1,this.label="",this.reorderable=!1,this._selection="single",this.activeId=null,this.hasAuthoredItems=!1,this.pendingFocusId=null,this.generatedNodes=new WeakSet,this.dataIdOwnerPaths=new Map,this.dataIdCollisions=new Set,this.selectionSyncPending=!0,this.dataSyncPending=!1,this.inertMutationPending=!1,this.lastFocusedNodeId=null,this.onTreeFocusIn=e=>{const item=e.composedPath().find(target=>target.nodeType===1&&target.localName===tag("tree-item"));item&&(this.lastFocusedNodeId=item.nodeId)},this.onChildrenChanged=()=>{const wasAuthored=this.hasAuthoredItems;this.refreshAuthoredItems(),wasAuthored&&!this.hasAuthoredItems&&(this.dataSyncPending=!0),this.selectionSyncPending=!0,this.requestUpdate()},this.childObserverGeneration=0,this.onChildMutations=records=>{records.some(record=>record.attributeName==="inert")&&(this.inertMutationPending=!0),this.onChildrenChanged()},this.onNodeActivate=e=>{const id=e.detail.nodeId,node=this.allNodeElements().find(candidate=>candidate.nodeId===id);node&&!node.isDisabled&&(this.activeId=id,e.type==="lr-node-toggle"&&(this.selectionSyncPending=!0,this.requestUpdate()))},this.onNodeSelect=event=>{const id=event.detail.nodeId,node=this.allNodeElements().find(candidate=>candidate.nodeId===id);!node||node.isDisabled||(this.activeId=id,this.updateSelectionFrom(node)&&this.emit("lr-selection-change",Object.freeze({selection:this.selectedItems})))},this.onTreeKeyDown=e=>{const visible=this.visibleNodeElements();if(visible.length===0)return;const currentIndex=visible.findIndex(n=>n.nodeId===this.activeId),current=currentIndex>=0?visible[currentIndex]:visible[0];if(!current)return;if(this.reorderable&&(e.ctrlKey||e.metaKey)&&(e.key==="ArrowUp"||e.key==="ArrowDown")){e.preventDefault(),this.requestReorder(current,e.key==="ArrowDown"?1:-1);return}const rtl=isRtl(this),expandKey=rtl?"ArrowLeft":"ArrowRight",collapseKey=rtl?"ArrowRight":"ArrowLeft";switch(e.key){case"ArrowDown":e.preventDefault(),this.focusNode(visible[Math.min(visible.length-1,currentIndex+1)]);break;case"ArrowUp":e.preventDefault(),this.focusNode(visible[Math.max(0,currentIndex-1)]);break;case"Home":e.preventDefault(),this.focusNode(visible[0]);break;case"End":e.preventDefault(),this.focusNode(visible[visible.length-1]);break;case expandKey:if(e.preventDefault(),!current.hasChildren)break;if(!current.expanded)current.expand();else{const child=visible[currentIndex+1];child&&treeItemOwnerContext(child).depth>treeItemOwnerContext(current).depth&&this.focusNode(child)}break;case collapseKey:if(e.preventDefault(),current.hasChildren&&current.expanded)current.collapse();else for(let i=currentIndex-1;i>=0;i--){const sibling=visible[i];if(sibling&&treeItemOwnerContext(sibling).depth<treeItemOwnerContext(current).depth){this.focusNode(sibling);break}}break;case"Enter":case" ":e.preventDefault(),current.select();break;default:return}}}static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,noData:LYRA_DEFAULT_noData,treeNodeMoved:LYRA_DEFAULT_treeNodeMoved}}static{this.immutableEventDetails=Object.freeze(["lr-selection-change"])}static{this.identityEventDetailProperties=Object.freeze({"lr-selection-change":Object.freeze(["selection"])})}static{this.styles=[LyraElement.styles,styles]}get data(){return this._data}set data(value){const previous=this._data,normalized=normalizeTreeData(value);this._data=normalized.data,this.declaredChildrenAtPath=normalized.declaredChildrenAtPath,this.declaredRootCount=normalized.declaredRootCount,this._dataTruncated=normalized.truncated,this.requestUpdate("data",previous)}get dataTruncated(){return this._dataTruncated}get selection(){return this._selection}set selection(value){const old=this._selection,normalized=TREE_SELECTIONS.has(value)?value:"single";old!==normalized&&(this._selection=normalized,this.selectionSyncPending=!0,this.requestUpdate("selection",old))}get nodeElements(){return[...this.querySelectorAll(`:scope > ${tag("tree-item")}`)]}childrenOf(node){return node.childItems()}isNavigable(node){return!node.isDisabled&&!isInertWithin(node,this)}allNodeElements(){const result=[],seen=new Set,stack=this.nodeElements.map(node=>({node,depth:0})).reverse();for(;stack.length>0&&result.length<TREE_MAX_RENDER_NODES;){const{node,depth}=stack.pop();if(seen.has(node)||(seen.add(node),result.push(node),depth>=TREE_MAX_RENDER_DEPTH))continue;const children=this.childrenOf(node);for(let index=children.length-1;index>=0;index--)stack.push({node:children[index],depth:depth+1})}return result}get selectedItems(){return Object.freeze(this.allNodeElements().filter(node=>node.selected))}iconSource(name){return this.querySelector(`:scope > [slot="${name}"]`)}applyTreeContext(){const expandIcon=this.iconSource("expand-icon"),collapseIcon=this.iconSource("collapse-icon"),roots=this.nodeElements,rootCount=this.hasAuthoredItems?roots.length:this.declaredRootCount,stack=[];for(let index=roots.length-1;index>=0;index--)stack.push({node:roots[index],ancestry:[],depth:0,setSize:rootCount,posInSet:index+1,identity:this.hasAuthoredItems?void 0:this.treeIdentityAt(String(index))});const seen=new Set;for(;stack.length>0&&seen.size<TREE_MAX_RENDER_NODES;){const frame=stack.pop();if(seen.has(frame.node)||(seen.add(frame.node),configureTreeItemOwner(frame.node,{...treeItemOwnerContext(frame.node),activeId:this.activeId,ancestry:frame.ancestry,depth:frame.depth,setSize:frame.setSize,posInSet:frame.posInSet,selection:this.selection,ownsSelection:!0,identity:frame.identity,expandIcon,collapseIcon}),frame.depth>=TREE_MAX_RENDER_DEPTH))continue;const children=this.childrenOf(frame.node),declaredCount=frame.identity?.declaredChildrenAtPath.get(frame.identity.path)??frame.node.item?.children?.length??children.length,childAncestry=frame.node.item?[...frame.ancestry,frame.node.item]:frame.ancestry;for(let index=children.length-1;index>=0;index--){const identity=frame.identity?{path:`${frame.identity.path}/${index}`,ownerPaths:frame.identity.ownerPaths,collisionIds:frame.identity.collisionIds,declaredChildrenAtPath:frame.identity.declaredChildrenAtPath}:void 0;stack.push({node:children[index],ancestry:childAncestry,depth:frame.depth+1,setSize:declaredCount,posInSet:index+1,identity})}}}selectableInSingleMode(node){return!node.isDisabled&&(this.selection!=="leaf"||!node.hasChildren)}normalizeSingleSelection(){let kept=!1;for(const node of this.allNodeElements()){const selected=!kept&&node.selected&&this.selectableInSingleMode(node);setTreeItemSelection(node,selected,!1),selected&&(kept=!0)}}setBranchSelection(node,selected,leavesOnly){const stack=[node],seen=new Set;for(;stack.length>0&&seen.size<TREE_MAX_RENDER_NODES;){const current=stack.pop();if(seen.has(current)||current.isDisabled)continue;seen.add(current);const children=this.childrenOf(current).filter(child=>!child.isDisabled);!leavesOnly||children.length===0?setTreeItemSelection(current,leavesOnly&&current.hasChildren?!1:selected,!1):setTreeItemSelection(current,!1,!1);for(let index=children.length-1;index>=0;index--)stack.push(children[index])}}deriveMultipleSelection(node,leavesOnly){const states=new Map,stack=[{item:node,visited:!1}],queued=new Set;for(;stack.length>0;){const entry=stack.pop();if(entry.visited){const current=entry.item;if(current.isDisabled){setTreeItemSelection(current,!1,!1),states.set(current,"ignored");continue}const children2=this.childrenOf(current).filter(child=>!child.isDisabled);if(children2.length===0){leavesOnly&&current.hasChildren?(setTreeItemSelection(current,!1,!1),states.set(current,"none")):(setTreeItemSelection(current,current.selected,!1),states.set(current,current.selected?"all":"none"));continue}const childStates=children2.map(child=>states.get(child)??"ignored").filter(state2=>state2!=="ignored");if(childStates.length===0){setTreeItemSelection(current,!1,!1),states.set(current,"none");continue}const all=childStates.every(state2=>state2==="all"),none=childStates.every(state2=>state2==="none");setTreeItemSelection(current,all,!all&&!none),states.set(current,all?"all":none?"none":"some");continue}if(queued.size>=TREE_MAX_RENDER_NODES||queued.has(entry.item))continue;queued.add(entry.item),stack.push({item:entry.item,visited:!0});const children=this.childrenOf(entry.item);for(let index=children.length-1;index>=0;index--)queued.has(children[index])||stack.push({item:children[index],visited:!1})}return states.get(node)??"none"}normalizeMultipleSelection(){const leavesOnly=this.selection==="leaf-multiple";for(const node of this.allNodeElements())node.selected&&this.childrenOf(node).length>0&&this.setBranchSelection(node,!0,leavesOnly);for(const root of this.nodeElements)this.deriveMultipleSelection(root,leavesOnly)}normalizeSelection(){this.selection==="single"||this.selection==="leaf"?this.normalizeSingleSelection():this.normalizeMultipleSelection()}selectionSignature(){return this.allNodeElements().map(node=>`${node.nodeId}:${node.selected?1:0}:${node.indeterminate?1:0}`).join("|")}updateSelectionFrom(node){if(node.isDisabled)return!1;const before=this.selectionSignature();if(this.selection==="single"||this.selection==="leaf"){if(!this.selectableInSingleMode(node))return!1;for(const candidate of this.allNodeElements())setTreeItemSelection(candidate,candidate===node,!1)}else{const select=node.indeterminate||!node.selected;this.setBranchSelection(node,select,this.selection==="leaf-multiple");for(const root of this.nodeElements)this.deriveMultipleSelection(root,this.selection==="leaf-multiple")}return before!==this.selectionSignature()}refreshAuthoredItems(){const nodes=this.nodeElements;for(const node of nodes)node.hasAttribute("slot")&&node.removeAttribute("slot");const authored=nodes.some(node=>!this.generatedNodes.has(node));if(authored)for(const node of nodes)this.generatedNodes.has(node)&&node.remove();this.hasAuthoredItems=authored}visibleNodeElements(){const acc=[],seen=new Set,stack=this.nodeElements.map(node=>({node,depth:0})).reverse();for(;stack.length>0&&acc.length<TREE_MAX_RENDER_NODES;){const{node,depth}=stack.pop();if(seen.has(node)||(seen.add(node),!this.isNavigable(node))||(acc.push(node),!node.expanded||depth>=TREE_MAX_RENDER_DEPTH))continue;const children=this.childrenOf(node);for(let index=children.length-1;index>=0;index--)stack.push({node:children[index],depth:depth+1})}return acc}findItem(items,id){const stack=[...items].reverse(),seen=new Set;for(;stack.length>0;){const item=stack.pop();if(!seen.has(item)){if(seen.add(item),item.id===id)return item;if(item.children)for(let i=item.children.length-1;i>=0;i--){const child=item.children[i];child&&stack.push(child)}}}}isDuplicateDataPath(item,path){return this.dataIdCollisions.has(item.id)&&this.dataIdOwnerPaths.get(item.id)!==path}rebuildDataIdentity(){const ownerPaths=new Map,collisionIds=new Set,ancestry=new Set,stack=[{items:this.data,index:0,parentPath:"",depth:0}];for(;stack.length>0;){const frame=stack[stack.length-1];if(frame.index>=frame.items.length){frame.owner&&ancestry.delete(frame.owner),stack.pop();continue}const index=frame.index++,item=frame.items[index];if(!item)continue;const path=frame.parentPath===""?String(index):`${frame.parentPath}/${index}`;ownerPaths.has(item.id)?collisionIds.add(item.id):ownerPaths.set(item.id,path),!(frame.depth>=TREE_MAX_RENDER_DEPTH||ancestry.has(item)||!item.children?.length)&&(ancestry.add(item),stack.push({items:item.children,index:0,parentPath:path,depth:frame.depth+1,owner:item}))}this.dataIdOwnerPaths=ownerPaths,this.dataIdCollisions=collisionIds}treeIdentityAt(path){return{path,ownerPaths:this.dataIdOwnerPaths,collisionIds:this.dataIdCollisions,declaredChildrenAtPath:this.declaredChildrenAtPath}}firstEnabledId(items){for(let index=0;index<items.length;index++){const item=items[index];if(!(!item||item.disabled||this.isDuplicateDataPath(item,String(index))))return item.id}return null}isEnabledReachableId(items,id){const stack=items.map((item,index)=>({item,path:String(index)})).reverse(),seen=new Set;for(;stack.length>0;){const{item,path}=stack.pop();if(!seen.has(item)&&(seen.add(item),!(item.disabled||this.isDuplicateDataPath(item,path)))){if(item.id===id)return!0;if(item.children)for(let i=item.children.length-1;i>=0;i--){const child=item.children[i];child&&stack.push({item:child,path:`${path}/${i}`})}}}return!1}findRenderedSiblings(node){const root=node.getRootNode(),shadowHost="host"in root?root.host:null,shadowParent=shadowHost?.localName===tag("tree-item")?shadowHost:null,lightParent=node.parentElement?.localName===tag("tree-item")?node.parentElement:null,parentItem=shadowParent??lightParent,siblings=parentItem?parentItem.childItems():this.nodeElements,index=siblings.indexOf(node);if(!(index<0))return{parent:parentItem,siblings,index}}deepFocusedNode(){const active=deepActiveElementIn(this.ownerDocument);if(!active||active.localName!==tag("tree-item"))return null;const node=active;return this.visibleNodeElements().some(n=>n.nodeId===node.nodeId)?node:null}resolveActiveFromDom(){const inertMutation=this.inertMutationPending;this.inertMutationPending=!1;const visible=this.visibleNodeElements();if(visible.some(node=>node.nodeId===this.activeId))return;const displaced=this.activeId;if(this.activeId=visible[0]?.nodeId??null,!inertMutation||this.activeId==null||displaced==null||displaced!==this.lastFocusedNodeId)return;const ownerDocument=this.ownerDocument,active=deepActiveElementIn(ownerDocument),strandedOnDisplaced=active?.nodeType===1&&active.localName===tag("tree-item")&&active.nodeId===displaced;active!==null&&active!==ownerDocument.body&&!strandedOnDisplaced||(this.pendingFocusId=this.activeId)}willUpdate(changed){if(super.willUpdate(changed),this.refreshAuthoredItems(),(changed.has("data")||changed.has("selection"))&&(this.selectionSyncPending=!0),this.hasAuthoredItems){this.resolveActiveFromDom();return}if(changed.has("data")||this.dataSyncPending){this.dataSyncPending=!1;const focused=this.deepFocusedNode(),focusedId=focused?.nodeId??null;this.rebuildDataIdentity(),this.syncNodes();const activeItem=this.activeId?this.findItem(this.data,this.activeId):void 0;(!this.activeId||!activeItem||activeItem.disabled||!this.isEnabledReachableId(this.data,this.activeId))&&(this.activeId=this.firstEnabledId(this.data)),this.pendingFocusId=focused==null?null:focusedId!=null&&this.findItem(this.data,focusedId)?focusedId:this.activeId}this.inertMutationPending&&this.resolveActiveFromDom()}updated(changed){if(super.updated(changed),changed.has("activeId")||changed.has("data")||this.hasAuthoredItems){const nodes=this.nodeElements,count=this.hasAuthoredItems?nodes.length:this.declaredRootCount;nodes.forEach((node,i)=>{configureTreeItemOwner(node,{...treeItemOwnerContext(node),activeId:this.activeId,ancestry:[],depth:0,setSize:count,posInSet:i+1,selection:this.selection,ownsSelection:!0,identity:this.hasAuthoredItems?void 0:this.treeIdentityAt(String(i)),expandIcon:this.iconSource("expand-icon"),collapseIcon:this.iconSource("collapse-icon")})})}}connectedCallback(){super.connectedCallback(),this.armChildObserver()}armChildObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.childObserver&&this.childObserverDocument===ownerDocument)return;this.resetChildObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.childObserverGeneration,observer=new MutationObserverCtor(records=>{this.childObserver!==observer||this.childObserverDocument!==ownerDocument||this.childObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.onChildMutations(records)});this.childObserver=observer,this.childObserverDocument=ownerDocument,observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["selected","disabled","inert","lazy"]})}disconnectedCallback(){super.disconnectedCallback(),this.pendingReorder=void 0,this.resetChildObserver()}adoptedCallback(){super.adoptedCallback(),this.resetChildObserver()}resetChildObserver(){this.childObserverGeneration+=1,this.childObserver?.disconnect(),this.childObserver=void 0,this.childObserverDocument=void 0}syncNodes(){const existingById=new Map;for(const node of this.nodeElements){if(!node.item)continue;const matches=existingById.get(node.item.id)??[];matches.push(node),existingById.set(node.item.id,matches)}let previousSibling=null;for(let index=0;index<this.data.length;index++){const item=this.data[index];let node=existingById.get(item.id)?.shift();node||(node=this.ownerDocument.createElement(tag("tree-item")),this.generatedNodes.add(node)),node.item=item,configureTreeItemOwner(node,{...treeItemOwnerContext(node),ancestry:[],depth:0,setSize:this.declaredRootCount,posInSet:index+1,selection:this.selection,ownsSelection:!0,identity:this.treeIdentityAt(String(index)),expandIcon:this.iconSource("expand-icon"),collapseIcon:this.iconSource("collapse-icon")});const targetPosition=previousSibling?previousSibling.nextElementSibling:this.firstElementChild;targetPosition!==node&&this.insertBefore(node,targetPosition),previousSibling=node}for(const nodes of existingById.values())for(const node of nodes)node.remove()}focusNode(node){node&&(this.activeId=node.nodeId,node.focus())}async getUpdateComplete(){const result=await super.getUpdateComplete();if(await cascadeUpdateComplete(this.nodeElements),this.applyTreeContext(),this.selectionSyncPending&&(this.selectionSyncPending=!1,this.normalizeSelection()),await cascadeUpdateComplete(this.nodeElements),this.confirmPendingReorder(),this.pendingFocusId!=null){const id=this.pendingFocusId;this.pendingFocusId=null;const visible=this.visibleNodeElements();(visible.find(n=>n.nodeId===id)??visible.find(n=>n.nodeId===this.activeId))?.focus()}return result}requestReorder(node,delta){const id=node.nodeId,found=this.findRenderedSiblings(node);if(!found)return;const{parent,siblings,index}=found,total=siblings.length,toIndex=index+delta;toIndex<0||toIndex>=total||(this.pendingReorder={node,parent,originalSiblings:[...siblings],targetSibling:siblings[toIndex],fromIndex:index,toIndex},this.emit("lr-reorder",{nodeId:id,parentNodeId:parent?.nodeId??null,fromIndex:index,toIndex}))}confirmPendingReorder(){const pending=this.pendingReorder;if(!pending)return;const found=this.findRenderedSiblings(pending.node);if(!found){this.pendingReorder=void 0;return}(found.siblings.length!==pending.originalSiblings.length||found.siblings.some((node,index)=>node!==pending.originalSiblings[index]))&&(this.pendingReorder=void 0,!(found.parent!==pending.parent||found.index!==pending.toIndex||found.siblings[pending.fromIndex]!==pending.targetSibling)&&this.liveRegion?.announce(this.localize("treeNodeMoved",void 0,{label:pending.node.nodeLabel,index:this.formatCount(found.index+1),total:this.formatCount(found.siblings.length)}),{force:!0}))}async expandAll(){const queue=this.nodeElements.map(node=>({node,depth:0})),seen=new Set;for(let index=0;index<queue.length&&seen.size<TREE_MAX_RENDER_NODES;index++){const{node,depth}=queue[index];seen.has(node)||(seen.add(node),node.isDisabled?node.expanded=!1:node.hasChildren&&node.expand(),await node.updateComplete,depth<TREE_MAX_RENDER_DEPTH&&queue.push(...this.childrenOf(node).map(child=>({node:child,depth:depth+1}))))}}async collapseAll(){const focused=this.deepFocusedNode(),topLevel=this.nodeElements,nodes=this.allNodeElements();for(let index=nodes.length-1;index>=0;index--){const node=nodes[index];node.isDisabled?node.expanded=!1:node.collapse()}(this.hasAuthoredItems?topLevel.some(node=>this.isNavigable(node)&&node.nodeId===this.activeId):this.data.some(item=>!item.disabled&&item.id===this.activeId))||(this.activeId=this.hasAuthoredItems?topLevel.find(node=>this.isNavigable(node))?.nodeId??null:this.firstEnabledId(this.data)),focused&&(this.pendingFocusId=this.activeId),await cascadeUpdateComplete(topLevel)}render(){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,query,state}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{hostAriaLabel}from"../../../internal/a11y.js";import{tag}from"../../../internal/prefix.js";import{isRtl}from"../../../internal/rtl.js";import{styles}from"./tree.styles.js";import{cascadeUpdateComplete}from"./update-cascade.js";import{configureTreeItemOwner,setTreeItemSelection,treeItemOwnerContext}from"./tree-owner-controller.js";import"./tree-item.class.js";import{TREE_MAX_RENDER_DEPTH,TREE_MAX_RENDER_NODES}from"./tree-types.js";import{deepActiveElementIn}from"../../../internal/active-element.js";import{LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_noData,LYRA_DEFAULT_treeNodeMoved}from"../../../internal/default-strings.generated.js";const TREE_SELECTIONS=new Set(["single","multiple","leaf","leaf-multiple"]),TREE_BADGE_LIMIT=100,EMPTY_TREE_DATA=Object.freeze([]);function ownValue(record,key){try{const descriptor=Object.getOwnPropertyDescriptor(record,key);return descriptor&&"value"in descriptor?descriptor.value:void 0}catch{return}}function arrayLength(value){if(!Array.isArray(value))return 0;try{return Math.max(0,Math.min(Number.MAX_SAFE_INTEGER,Math.trunc(value.length)))}catch{return 0}}function normalizeBadges(value){if(!Array.isArray(value))return{truncated:value!==void 0};const badges=[],length=arrayLength(value);for(let index=0;index<Math.min(length,TREE_BADGE_LIMIT);index++){const raw=ownValue(value,String(index));if(!raw||typeof raw!="object"||Array.isArray(raw))continue;const text=ownValue(raw,"text");if(typeof text!="string")continue;const rawTone=ownValue(raw,"tone"),tone=rawTone==="brand"||rawTone==="success"||rawTone==="warning"||rawTone==="danger"?rawTone:"neutral",rawLabel=ownValue(raw,"label");badges.push(Object.freeze({text,tone,...typeof rawLabel=="string"?{label:rawLabel}:{}}))}return{badges:Object.freeze(badges),truncated:length>TREE_BADGE_LIMIT}}function normalizeTreeData(input){if(!Array.isArray(input))return{data:EMPTY_TREE_DATA,declaredChildrenAtPath:new Map,declaredRootCount:0,truncated:input!=null};const root=[],declaredChildrenAtPath=new Map,created=[],rootLength=arrayLength(input);let truncated=!1,accepted=0;const seenIds=new Set,identityFilteredCollections=new Set,jobs=[],rootScanLength=Math.min(rootLength,TREE_MAX_RENDER_NODES);rootLength>rootScanLength&&(truncated=!0);for(let index=rootScanLength-1;index>=0;index--)jobs.push({source:ownValue(input,String(index)),target:root,parentPath:"",depth:0,ancestors:new Set});for(;jobs.length>0;){if(accepted>=TREE_MAX_RENDER_NODES){truncated=!0;break}const job=jobs.pop(),raw=job.source;if(!raw||typeof raw!="object"||Array.isArray(raw)){truncated=!0,identityFilteredCollections.add(job.target);continue}const id=ownValue(raw,"id"),label=ownValue(raw,"label");if(typeof id!="string"||id.trim()===""||seenIds.has(id)||typeof label!="string"){truncated=!0,identityFilteredCollections.add(job.target);continue}seenIds.add(id);const node={id,label},selected=ownValue(raw,"selected"),disabled=ownValue(raw,"disabled"),lazy=ownValue(raw,"lazy");typeof selected=="boolean"&&(node.selected=selected),typeof disabled=="boolean"&&(node.disabled=disabled),typeof lazy=="boolean"&&(node.lazy=lazy);const icon=ownValue(raw,"icon");icon!==void 0&&(node.icon=icon);const description=ownValue(raw,"description");typeof description=="string"&&(node.description=description);const accessibleLabel=ownValue(raw,"accessibleLabel");typeof accessibleLabel=="string"&&(node.accessibleLabel=accessibleLabel);const normalizedBadges=normalizeBadges(ownValue(raw,"badges"));normalizedBadges.badges?.length&&(node.badges=normalizedBadges.badges),truncated||=normalizedBadges.truncated;const ownIndex=job.target.length,path=job.parentPath===""?String(ownIndex):`${job.parentPath}/${ownIndex}`;job.target.push(node),created.push(node),accepted++;const rawChildren=ownValue(raw,"children"),childCount=arrayLength(rawChildren);if(childCount===0)continue;if(declaredChildrenAtPath.set(path,childCount),job.depth>=TREE_MAX_RENDER_DEPTH||job.ancestors.has(raw)){truncated=!0;continue}const children=[];node.children=children;const ancestors=new Set(job.ancestors);ancestors.add(raw);for(let index=childCount-1;index>=0;index--)jobs.push({source:ownValue(rawChildren,String(index)),target:children,parentPath:path,depth:job.depth+1,ancestors})}for(let index=created.length-1;index>=0;index--){const node=created[index];node.children&&Object.freeze(node.children),Object.freeze(node)}const normalizedJobs=root.map((node,index)=>({node,path:String(index)}));for(;normalizedJobs.length>0;){const{node,path}=normalizedJobs.pop(),children=node.children??[];identityFilteredCollections.has(children)&&declaredChildrenAtPath.set(path,children.length);for(let index=children.length-1;index>=0;index--)normalizedJobs.push({node:children[index],path:`${path}/${index}`})}return{data:Object.freeze(root),declaredChildrenAtPath,declaredRootCount:identityFilteredCollections.has(root)?root.length:rootLength,truncated}}function isInertWithin(node,root){for(let current=node;current&&current!==root;current=current.parentElement)if(current.hasAttribute("inert"))return!0;return!1}class LyraTree extends LyraElement{constructor(){super(...arguments),this._data=EMPTY_TREE_DATA,this.declaredChildrenAtPath=new Map,this.declaredRootCount=0,this._dataTruncated=!1,this.label="",this.reorderable=!1,this._selection="single",this.activeId=null,this.hasAuthoredItems=!1,this.pendingFocusId=null,this.generatedNodes=new WeakSet,this.dataIdOwnerPaths=new Map,this.dataIdCollisions=new Set,this.selectionSyncPending=!0,this.dataSyncPending=!1,this.inertMutationPending=!1,this.lastFocusedNodeId=null,this.onTreeFocusIn=e=>{const item=e.composedPath().find(target=>target.nodeType===1&&target.localName===tag("tree-item"));item&&(this.lastFocusedNodeId=item.nodeId)},this.onChildrenChanged=()=>{const wasAuthored=this.hasAuthoredItems;this.refreshAuthoredItems(),wasAuthored&&!this.hasAuthoredItems&&(this.dataSyncPending=!0),this.selectionSyncPending=!0,this.requestUpdate()},this.childObserverGeneration=0,this.onChildMutations=records=>{records.some(record=>record.attributeName==="inert")&&(this.inertMutationPending=!0),this.onChildrenChanged()},this.onNodeActivate=e=>{const id=e.detail.nodeId,node=this.allNodeElements().find(candidate=>candidate.nodeId===id);node&&!node.isDisabled&&(this.activeId=id,e.type==="lr-node-toggle"&&(this.selectionSyncPending=!0,this.requestUpdate()))},this.onNodeSelect=event=>{const id=event.detail.nodeId,node=this.allNodeElements().find(candidate=>candidate.nodeId===id);!node||node.isDisabled||(this.activeId=id,this.updateSelectionFrom(node)&&this.emit("lr-selection-change",Object.freeze({selection:this.selectedItems})))},this.onTreeKeyDown=e=>{const visible=this.visibleNodeElements();if(visible.length===0)return;const currentIndex=visible.findIndex(n=>n.nodeId===this.activeId),current=currentIndex>=0?visible[currentIndex]:visible[0];if(!current)return;if(this.reorderable&&(e.ctrlKey||e.metaKey)&&(e.key==="ArrowUp"||e.key==="ArrowDown")){e.preventDefault(),this.requestReorder(current,e.key==="ArrowDown"?1:-1);return}const rtl=isRtl(this),expandKey=rtl?"ArrowLeft":"ArrowRight",collapseKey=rtl?"ArrowRight":"ArrowLeft";switch(e.key){case"ArrowDown":e.preventDefault(),this.focusNode(visible[Math.min(visible.length-1,currentIndex+1)]);break;case"ArrowUp":e.preventDefault(),this.focusNode(visible[Math.max(0,currentIndex-1)]);break;case"Home":e.preventDefault(),this.focusNode(visible[0]);break;case"End":e.preventDefault(),this.focusNode(visible[visible.length-1]);break;case expandKey:if(e.preventDefault(),!current.hasChildren)break;if(!current.expanded)current.expand();else{const child=visible[currentIndex+1];child&&treeItemOwnerContext(child).depth>treeItemOwnerContext(current).depth&&this.focusNode(child)}break;case collapseKey:if(e.preventDefault(),current.hasChildren&&current.expanded)current.collapse();else for(let i=currentIndex-1;i>=0;i--){const sibling=visible[i];if(sibling&&treeItemOwnerContext(sibling).depth<treeItemOwnerContext(current).depth){this.focusNode(sibling);break}}break;case"Enter":case" ":e.preventDefault(),current.select();break;default:return}}}static{this.defaultStrings={...super.defaultStrings,fieldRequired:LYRA_DEFAULT_fieldRequired,noData:LYRA_DEFAULT_noData,treeNodeMoved:LYRA_DEFAULT_treeNodeMoved}}static{this.immutableEventDetails=Object.freeze(["lr-selection-change"])}static{this.identityEventDetailProperties=Object.freeze({"lr-selection-change":Object.freeze(["selection"])})}static{this.styles=[LyraElement.styles,styles]}get data(){return this._data}set data(value){const previous=this._data,normalized=normalizeTreeData(value);this._data=normalized.data,this.declaredChildrenAtPath=normalized.declaredChildrenAtPath,this.declaredRootCount=normalized.declaredRootCount,this._dataTruncated=normalized.truncated,this.requestUpdate("data",previous)}get dataTruncated(){return this._dataTruncated}get selection(){return this._selection}set selection(value){const old=this._selection,normalized=TREE_SELECTIONS.has(value)?value:"single";old!==normalized&&(this._selection=normalized,this.selectionSyncPending=!0,this.requestUpdate("selection",old))}get nodeElements(){return[...this.querySelectorAll(`:scope > ${tag("tree-item")}`)]}childrenOf(node){return node.childItems()}isNavigable(node){return!node.isDisabled&&!isInertWithin(node,this)}allNodeElements(){const result=[],seen=new Set,stack=this.nodeElements.map(node=>({node,depth:0})).reverse();for(;stack.length>0&&result.length<TREE_MAX_RENDER_NODES;){const{node,depth}=stack.pop();if(seen.has(node)||(seen.add(node),result.push(node),depth>=TREE_MAX_RENDER_DEPTH))continue;const children=this.childrenOf(node);for(let index=children.length-1;index>=0;index--)stack.push({node:children[index],depth:depth+1})}return result}get selectedItems(){return Object.freeze(this.allNodeElements().filter(node=>node.selected))}iconSource(name){return this.querySelector(`:scope > [slot="${name}"]`)}applyTreeContext(){const expandIcon=this.iconSource("expand-icon"),collapseIcon=this.iconSource("collapse-icon"),roots=this.nodeElements,rootCount=this.hasAuthoredItems?roots.length:this.declaredRootCount,stack=[];for(let index=roots.length-1;index>=0;index--)stack.push({node:roots[index],ancestry:[],depth:0,setSize:rootCount,posInSet:index+1,identity:this.hasAuthoredItems?void 0:this.treeIdentityAt(String(index))});const seen=new Set;for(;stack.length>0&&seen.size<TREE_MAX_RENDER_NODES;){const frame=stack.pop();if(seen.has(frame.node)||(seen.add(frame.node),configureTreeItemOwner(frame.node,{...treeItemOwnerContext(frame.node),activeId:this.activeId,ancestry:frame.ancestry,depth:frame.depth,setSize:frame.setSize,posInSet:frame.posInSet,selection:this.selection,ownsSelection:!0,identity:frame.identity,expandIcon,collapseIcon}),frame.depth>=TREE_MAX_RENDER_DEPTH))continue;const children=this.childrenOf(frame.node),declaredCount=frame.identity?.declaredChildrenAtPath.get(frame.identity.path)??frame.node.item?.children?.length??children.length,childAncestry=frame.node.item?[...frame.ancestry,frame.node.item]:frame.ancestry;for(let index=children.length-1;index>=0;index--){const identity=frame.identity?{path:`${frame.identity.path}/${index}`,ownerPaths:frame.identity.ownerPaths,collisionIds:frame.identity.collisionIds,declaredChildrenAtPath:frame.identity.declaredChildrenAtPath}:void 0;stack.push({node:children[index],ancestry:childAncestry,depth:frame.depth+1,setSize:declaredCount,posInSet:index+1,identity})}}}selectableInSingleMode(node){return!node.isDisabled&&(this.selection!=="leaf"||!node.hasChildren)}normalizeSingleSelection(){let kept=!1;for(const node of this.allNodeElements()){const selected=!kept&&node.selected&&this.selectableInSingleMode(node);setTreeItemSelection(node,selected,!1),selected&&(kept=!0)}}setBranchSelection(node,selected,leavesOnly){const stack=[node],seen=new Set;for(;stack.length>0&&seen.size<TREE_MAX_RENDER_NODES;){const current=stack.pop();if(seen.has(current)||current.isDisabled)continue;seen.add(current);const children=this.childrenOf(current).filter(child=>!child.isDisabled);!leavesOnly||children.length===0?setTreeItemSelection(current,leavesOnly&&current.hasChildren?!1:selected,!1):setTreeItemSelection(current,!1,!1);for(let index=children.length-1;index>=0;index--)stack.push(children[index])}}deriveMultipleSelection(node,leavesOnly){const states=new Map,stack=[{item:node,visited:!1}],queued=new Set;for(;stack.length>0;){const entry=stack.pop();if(entry.visited){const current=entry.item;if(current.isDisabled){setTreeItemSelection(current,!1,!1),states.set(current,"ignored");continue}const children2=this.childrenOf(current).filter(child=>!child.isDisabled);if(children2.length===0){leavesOnly&&current.hasChildren?(setTreeItemSelection(current,!1,!1),states.set(current,"none")):(setTreeItemSelection(current,current.selected,!1),states.set(current,current.selected?"all":"none"));continue}const childStates=children2.map(child=>states.get(child)??"ignored").filter(state2=>state2!=="ignored");if(childStates.length===0){setTreeItemSelection(current,!1,!1),states.set(current,"none");continue}const all=childStates.every(state2=>state2==="all"),none=childStates.every(state2=>state2==="none");setTreeItemSelection(current,all,!all&&!none),states.set(current,all?"all":none?"none":"some");continue}if(queued.size>=TREE_MAX_RENDER_NODES||queued.has(entry.item))continue;queued.add(entry.item),stack.push({item:entry.item,visited:!0});const children=this.childrenOf(entry.item);for(let index=children.length-1;index>=0;index--)queued.has(children[index])||stack.push({item:children[index],visited:!1})}return states.get(node)??"none"}normalizeMultipleSelection(){const leavesOnly=this.selection==="leaf-multiple";for(const node of this.allNodeElements())node.selected&&this.childrenOf(node).length>0&&this.setBranchSelection(node,!0,leavesOnly);for(const root of this.nodeElements)this.deriveMultipleSelection(root,leavesOnly)}normalizeSelection(){this.selection==="single"||this.selection==="leaf"?this.normalizeSingleSelection():this.normalizeMultipleSelection()}selectionSignature(){return this.allNodeElements().map(node=>`${node.nodeId}:${node.selected?1:0}:${node.indeterminate?1:0}`).join("|")}updateSelectionFrom(node){if(node.isDisabled)return!1;const before=this.selectionSignature();if(this.selection==="single"||this.selection==="leaf"){if(!this.selectableInSingleMode(node))return!1;for(const candidate of this.allNodeElements())setTreeItemSelection(candidate,candidate===node,!1)}else{const select=node.indeterminate||!node.selected;this.setBranchSelection(node,select,this.selection==="leaf-multiple");for(const root of this.nodeElements)this.deriveMultipleSelection(root,this.selection==="leaf-multiple")}return before!==this.selectionSignature()}refreshAuthoredItems(){const nodes=this.nodeElements;for(const node of nodes)node.hasAttribute("slot")&&node.removeAttribute("slot");const authored=nodes.some(node=>!this.generatedNodes.has(node));if(authored)for(const node of nodes)this.generatedNodes.has(node)&&node.remove();this.hasAuthoredItems=authored}visibleNodeElements(){const acc=[],seen=new Set,stack=this.nodeElements.map(node=>({node,depth:0})).reverse();for(;stack.length>0&&acc.length<TREE_MAX_RENDER_NODES;){const{node,depth}=stack.pop();if(seen.has(node)||(seen.add(node),!this.isNavigable(node))||(acc.push(node),!node.expanded||depth>=TREE_MAX_RENDER_DEPTH))continue;const children=this.childrenOf(node);for(let index=children.length-1;index>=0;index--)stack.push({node:children[index],depth:depth+1})}return acc}findItem(items,id){const stack=[...items].reverse(),seen=new Set;for(;stack.length>0;){const item=stack.pop();if(!seen.has(item)){if(seen.add(item),item.id===id)return item;if(item.children)for(let i=item.children.length-1;i>=0;i--){const child=item.children[i];child&&stack.push(child)}}}}isDuplicateDataPath(item,path){return this.dataIdCollisions.has(item.id)&&this.dataIdOwnerPaths.get(item.id)!==path}rebuildDataIdentity(){const ownerPaths=new Map,collisionIds=new Set,ancestry=new Set,stack=[{items:this.data,index:0,parentPath:"",depth:0}];for(;stack.length>0;){const frame=stack[stack.length-1];if(frame.index>=frame.items.length){frame.owner&&ancestry.delete(frame.owner),stack.pop();continue}const index=frame.index++,item=frame.items[index];if(!item)continue;const path=frame.parentPath===""?String(index):`${frame.parentPath}/${index}`;ownerPaths.has(item.id)?collisionIds.add(item.id):ownerPaths.set(item.id,path),!(frame.depth>=TREE_MAX_RENDER_DEPTH||ancestry.has(item)||!item.children?.length)&&(ancestry.add(item),stack.push({items:item.children,index:0,parentPath:path,depth:frame.depth+1,owner:item}))}this.dataIdOwnerPaths=ownerPaths,this.dataIdCollisions=collisionIds}treeIdentityAt(path){return{path,ownerPaths:this.dataIdOwnerPaths,collisionIds:this.dataIdCollisions,declaredChildrenAtPath:this.declaredChildrenAtPath}}firstEnabledId(items){for(let index=0;index<items.length;index++){const item=items[index];if(!(!item||item.disabled||this.isDuplicateDataPath(item,String(index))))return item.id}return null}isEnabledReachableId(items,id){const stack=items.map((item,index)=>({item,path:String(index)})).reverse(),seen=new Set;for(;stack.length>0;){const{item,path}=stack.pop();if(!seen.has(item)&&(seen.add(item),!(item.disabled||this.isDuplicateDataPath(item,path)))){if(item.id===id)return!0;if(item.children)for(let i=item.children.length-1;i>=0;i--){const child=item.children[i];child&&stack.push({item:child,path:`${path}/${i}`})}}}return!1}findRenderedSiblings(node){const root=node.getRootNode(),shadowHost="host"in root?root.host:null,shadowParent=shadowHost?.localName===tag("tree-item")?shadowHost:null,lightParent=node.parentElement?.localName===tag("tree-item")?node.parentElement:null,parentItem=shadowParent??lightParent,siblings=parentItem?parentItem.childItems():this.nodeElements,index=siblings.indexOf(node);if(!(index<0))return{parent:parentItem,siblings,index}}deepFocusedNode(){const active=deepActiveElementIn(this.ownerDocument);if(!active||active.localName!==tag("tree-item"))return null;const node=active;return this.visibleNodeElements().some(n=>n.nodeId===node.nodeId)?node:null}resolveActiveFromDom(){const inertMutation=this.inertMutationPending;this.inertMutationPending=!1;const visible=this.visibleNodeElements();if(visible.some(node=>node.nodeId===this.activeId))return;const displaced=this.activeId;if(this.activeId=visible[0]?.nodeId??null,!inertMutation||this.activeId==null||displaced==null||displaced!==this.lastFocusedNodeId)return;const ownerDocument=this.ownerDocument,active=deepActiveElementIn(ownerDocument),strandedOnDisplaced=active?.nodeType===1&&active.localName===tag("tree-item")&&active.nodeId===displaced;active!==null&&active!==ownerDocument.body&&!strandedOnDisplaced||(this.pendingFocusId=this.activeId)}willUpdate(changed){if(super.willUpdate(changed),this.refreshAuthoredItems(),(changed.has("data")||changed.has("selection"))&&(this.selectionSyncPending=!0),this.hasAuthoredItems){this.resolveActiveFromDom();return}if(changed.has("data")||this.dataSyncPending){this.dataSyncPending=!1;const focused=this.deepFocusedNode(),focusedId=focused?.nodeId??null;this.rebuildDataIdentity(),this.syncNodes();const activeItem=this.activeId?this.findItem(this.data,this.activeId):void 0;(!this.activeId||!activeItem||activeItem.disabled||!this.isEnabledReachableId(this.data,this.activeId))&&(this.activeId=this.firstEnabledId(this.data)),this.pendingFocusId=focused==null?null:focusedId!=null&&this.findItem(this.data,focusedId)?focusedId:this.activeId}this.inertMutationPending&&this.resolveActiveFromDom()}updated(changed){if(super.updated(changed),changed.has("activeId")||changed.has("data")||this.hasAuthoredItems){const nodes=this.nodeElements,count=this.hasAuthoredItems?nodes.length:this.declaredRootCount;nodes.forEach((node,i)=>{configureTreeItemOwner(node,{...treeItemOwnerContext(node),activeId:this.activeId,ancestry:[],depth:0,setSize:count,posInSet:i+1,selection:this.selection,ownsSelection:!0,identity:this.hasAuthoredItems?void 0:this.treeIdentityAt(String(i)),expandIcon:this.iconSource("expand-icon"),collapseIcon:this.iconSource("collapse-icon")})})}}connectedCallback(){super.connectedCallback(),this.armChildObserver()}armChildObserver(){const ownerDocument=this.ownerDocument;if(!this.isConnected||this.childObserver&&this.childObserverDocument===ownerDocument)return;this.resetChildObserver();const MutationObserverCtor=ownerDocument.defaultView?.MutationObserver;if(!MutationObserverCtor)return;const generation=this.childObserverGeneration,observer=new MutationObserverCtor(records=>{this.childObserver!==observer||this.childObserverDocument!==ownerDocument||this.childObserverGeneration!==generation||!this.isConnected||this.ownerDocument!==ownerDocument||this.onChildMutations(records)});this.childObserver=observer,this.childObserverDocument=ownerDocument,observer.observe(this,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["selected","disabled","inert","lazy"]})}disconnectedCallback(){super.disconnectedCallback(),this.pendingReorder=void 0,this.resetChildObserver()}adoptedCallback(){super.adoptedCallback(),this.resetChildObserver()}resetChildObserver(){this.childObserverGeneration+=1,this.childObserver?.disconnect(),this.childObserver=void 0,this.childObserverDocument=void 0}syncNodes(){const existingById=new Map;for(const node of this.nodeElements){if(!node.item)continue;const matches=existingById.get(node.item.id)??[];matches.push(node),existingById.set(node.item.id,matches)}let previousSibling=null;for(let index=0;index<this.data.length;index++){const item=this.data[index];let node=existingById.get(item.id)?.shift();node||(node=this.ownerDocument.createElement(tag("tree-item")),this.generatedNodes.add(node)),node.item=item,configureTreeItemOwner(node,{...treeItemOwnerContext(node),ancestry:[],depth:0,setSize:this.declaredRootCount,posInSet:index+1,selection:this.selection,ownsSelection:!0,identity:this.treeIdentityAt(String(index)),expandIcon:this.iconSource("expand-icon"),collapseIcon:this.iconSource("collapse-icon")});const targetPosition=previousSibling?previousSibling.nextElementSibling:this.firstElementChild;targetPosition!==node&&this.insertBefore(node,targetPosition),previousSibling=node}for(const nodes of existingById.values())for(const node of nodes)node.remove()}focusNode(node){node&&(this.activeId=node.nodeId,node.focus())}async getUpdateComplete(){const result=await super.getUpdateComplete();if(await cascadeUpdateComplete(this.nodeElements),this.applyTreeContext(),this.selectionSyncPending&&(this.selectionSyncPending=!1,this.normalizeSelection()),await cascadeUpdateComplete(this.nodeElements),this.confirmPendingReorder(),this.pendingFocusId!=null){const id=this.pendingFocusId;this.pendingFocusId=null;const visible=this.visibleNodeElements();(visible.find(n=>n.nodeId===id)??visible.find(n=>n.nodeId===this.activeId))?.focus()}return result}requestReorder(node,delta){const id=node.nodeId,found=this.findRenderedSiblings(node);if(!found)return;const{parent,siblings,index}=found,total=siblings.length,toIndex=index+delta;toIndex<0||toIndex>=total||(this.pendingReorder={node,parent,originalSiblings:[...siblings],targetSibling:siblings[toIndex],fromIndex:index,toIndex},this.emit("lr-reorder",{nodeId:id,parentNodeId:parent?.nodeId??null,fromIndex:index,toIndex}))}confirmPendingReorder(){const pending=this.pendingReorder;if(!pending)return;const found=this.findRenderedSiblings(pending.node);if(!found){this.pendingReorder=void 0;return}(found.siblings.length!==pending.originalSiblings.length||found.siblings.some((node,index)=>node!==pending.originalSiblings[index]))&&(this.pendingReorder=void 0,!(found.parent!==pending.parent||found.index!==pending.toIndex||found.siblings[pending.fromIndex]!==pending.targetSibling)&&this.liveRegion?.announce(this.localize("treeNodeMoved",void 0,{label:pending.node.nodeLabel,index:this.formatCount(found.index+1),total:this.formatCount(found.siblings.length)}),{force:!0}))}async expandAll(){const queue=this.nodeElements.map(node=>({node,depth:0})),seen=new Set;for(let index=0;index<queue.length&&seen.size<TREE_MAX_RENDER_NODES;index++){const{node,depth}=queue[index];seen.has(node)||(seen.add(node),node.isDisabled?node.expanded=!1:node.hasChildren&&node.expand(),await node.updateComplete,depth<TREE_MAX_RENDER_DEPTH&&queue.push(...this.childrenOf(node).map(child=>({node:child,depth:depth+1}))))}}async collapseAll(){const focused=this.deepFocusedNode(),topLevel=this.nodeElements,nodes=this.allNodeElements();for(let index=nodes.length-1;index>=0;index--){const node=nodes[index];node.isDisabled?node.expanded=!1:node.collapse()}(this.hasAuthoredItems?topLevel.some(node=>this.isNavigable(node)&&node.nodeId===this.activeId):this.data.some(item=>!item.disabled&&item.id===this.activeId))||(this.activeId=this.hasAuthoredItems?topLevel.find(node=>this.isNavigable(node))?.nodeId??null:this.firstEnabledId(this.data)),focused&&(this.pendingFocusId=this.activeId),await cascadeUpdateComplete(topLevel)}render(){return html`
       <div
         part="base tree"
         role="tree"
-        aria-label=${this.label||this.getAttribute("aria-label")||nothing}
+        aria-label=${hostAriaLabel(this)??(this.label||nothing)}
         aria-multiselectable=${String(this.selection==="multiple"||this.selection==="leaf-multiple")}
         @focusin=${this.onTreeFocusIn}
         @keydown=${this.onTreeKeyDown}

package/dist/components/data/tree/tree.styles.js

@@ -5,12 +5,6 @@ import{css}from"lit";const styles=css`
   [part~='base'] {
     display: flex;
     flex-direction: column;
-    /* Fallback for a deeply-indented node whose row still overflows despite
-       the [part=label] truncation + padding-inline-start cap in tree-item.ts.
-       overflow-y is pinned explicitly alongside overflow-x: per the CSS overflow spec, leaving one
-       axis unset once the other is non-'visible' forces its used value to 'auto' too, which can show
-       a phantom/empty vertical scrollbar from sub-pixel rounding even though this tree never scrolls
-       block-wise on its own (it grows tall instead) -- mirrors <lr-tab-group>'s identical fix. */
     overflow-x: auto;
     overflow-y: hidden;
   }