@ember-eui/core 14.1.4 → 16.0.0

package/dist/components/eui-tour-step-indicator.js

@@ -1,10 +1,20 @@
 import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
 import { service } from '@ember/service';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { euiClass } from '../utils/eui/styles.js';
 import EuiIcon from './eui-icon.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import { g, i } from 'decorator-transforms/runtime-esm';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
 
+/** Upstream's static indicator style, plus a scoped list item reset. */const INDICATOR = {
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  display: 'inline-block',
+  label: 'EuiTourStepIndicator'
+};
 class EuiTourStepIndicator extends Component {
   static {
     g(this.prototype, "euiI18n", [service]);
@@ -28,10 +38,23 @@ class EuiTourStepIndicator extends Component {
     return undefined;
   }
   get classes() {
-    return this.args.status ? `euiTourStepIndicator euiTourStepIndicator--${this.args.status}` : 'euiTourStepIndicator';
+    return `euiTourStepIndicator ${euiClass(getEuiThemeContext(this), INDICATOR)}`;
   }
+  /** Upstream: theme `tourStepIndicatorActiveColor` / `…InactiveColor`. */
   static {
-    setComponentTemplate(precompileTemplate("<li class={{this.classes}} aria-label={{this.label}} ...attributes>\n  {{#if this.iconLabel}}\n    <EuiIcon class=\"euiStepNumber__icon\" @type=\"dot\" @color={{if (isActive @status) \"success\" \"subdued\"}} aria-label={{this.iconLabel}} aria-current={{if (isActive @status) \"step\"}} />\n  {{/if}}\n</li>", {
+    n(this.prototype, "classes", [cached]);
+  }
+  get iconColor() {
+    const {
+      components
+    } = getEuiThemeContext(this).upstream.euiTheme;
+    return this.args.status === 'active' ? components.tourStepIndicatorActiveColor : components.tourStepIndicatorInactiveColor;
+  }
+  static {
+    n(this.prototype, "iconColor", [cached]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<li class={{this.classes}} aria-label={{this.label}} ...attributes>\n  {{#if this.iconLabel}}\n    <EuiIcon @type=\"dot\" @color={{this.iconColor}} aria-label={{this.iconLabel}} aria-current={{if (isActive @status) \"step\"}} />\n  {{/if}}\n</li>", {
       strictMode: true,
       scope: () => ({
         EuiIcon,

package/dist/components/eui-tour-step-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-tour-step-indicator.js","sources":["../../src/components/eui-tour-step-indicator.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { service } from '@ember/service';\n\nimport EuiIcon from './eui-icon.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\n\n/** One dot of a tour's progress: `'complete'`, `'active'` or `'incomplete'`. */\nexport interface EuiTourStepIndicatorSignature {\n  Element: HTMLLIElement;\n  Args: {\n    /** The step's number (1-based). */\n    number: number;\n    /** `'complete'`, `'active'` or `'incomplete'`. */\n    status?: 'complete' | 'active' | 'incomplete';\n  };\n}\n\nexport default class EuiTourStepIndicator extends Component<EuiTourStepIndicatorSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  get label(): string {\n    return this.euiI18n.lookupToken('euiTourStepIndicator.ariaLabel', 'Step {number} {status}', {\n      number: this.args.number,\n      status: this.args.status ?? ''\n    });\n  }\n\n  get iconLabel(): string | undefined {\n    const { status } = this.args;\n\n    if (status === 'active') return this.euiI18n.lookupToken('euiTourStepIndicator.isActive', 'active');\n    if (status === 'complete') return this.euiI18n.lookupToken('euiTourStepIndicator.isComplete', 'complete');\n    if (status === 'incomplete') {\n      return this.euiI18n.lookupToken('euiTourStepIndicator.isIncomplete', 'incomplete');\n    }\n\n    return undefined;\n  }\n\n  get classes(): string {\n    return this.args.status\n      ? `euiTourStepIndicator euiTourStepIndicator--${this.args.status}`\n      : 'euiTourStepIndicator';\n  }\n\n  <template>\n    <li class={{this.classes}} aria-label={{this.label}} ...attributes>\n      {{#if this.iconLabel}}\n        <EuiIcon\n          class=\"euiStepNumber__icon\"\n          @type=\"dot\"\n          @color={{if (isActive @status) \"success\" \"subdued\"}}\n          aria-label={{this.iconLabel}}\n          aria-current={{if (isActive @status) \"step\"}}\n        />\n      {{/if}}\n    </li>\n  </template>\n}\n\nfunction isActive(status?: string): boolean {\n  return status === 'active';\n}\n"],"names":["EuiTourStepIndicator","Component","g","prototype","service","i","label","euiI18n","lookupToken","number","args","status","iconLabel","undefined","classes","setComponentTemplate","precompileTemplate","strictMode","scope","EuiIcon","isActive"],"mappings":";;;;;;;AAkBe,MAAMA,6BAA6BC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACzDC,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;EAED,IAAIC,KAAAA,GAAgB;IAClB,OAAO,IAAI,CAACC,OAAO,CAACC,WAAW,CAAC,kCAAkC,wBAAA,EAA0B;AAC1FC,MAAAA,MAAA,EAAQ,IAAI,CAACC,IAAI,CAACD,MAAM;AACxBE,MAAAA,MAAA,EAAQ,IAAI,CAACD,IAAI,CAACC,MAAM,IAAI;AAC9B,KAAA,CAAA;AACF,EAAA;EAEA,IAAIC,SAAAA,GAAgC;IAClC,MAAM;AAAED,MAAAA;KAAQ,GAAG,IAAI,CAACD,IAAI;AAE5B,IAAA,IAAIC,MAAA,KAAW,UAAU,OAAO,IAAI,CAACJ,OAAO,CAACC,WAAW,CAAC,+BAAA,EAAiC,QAAA,CAAA;AAC1F,IAAA,IAAIG,MAAA,KAAW,YAAY,OAAO,IAAI,CAACJ,OAAO,CAACC,WAAW,CAAC,iCAAA,EAAmC,UAAA,CAAA;IAC9F,IAAIG,WAAW,YAAA,EAAc;MAC3B,OAAO,IAAI,CAACJ,OAAO,CAACC,WAAW,CAAC,mCAAA,EAAqC,YAAA,CAAA;AACvE,IAAA;AAEA,IAAA,OAAOK,SAAA;AACT,EAAA;EAEA,IAAIC,OAAAA,GAAkB;AACpB,IAAA,OAAO,IAAI,CAACJ,IAAI,CAACC,MAAM,GACnB,CAAA,2CAAA,EAA8C,IAAI,CAACD,IAAI,CAACC,MAAM,CAAA,CAAE,GAChE,sBAAA;AACN,EAAA;AAEA,EAAA;IAAAI,oBAAA,CAAAC,kBAAA,CAAA,qTAAA,EAYA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;AAEA,SAASA,QAAAA,CAAST,MAAe,EAAU;EACzC,OAAOA,MAAA,KAAW,QAAA;AACpB;;"}
+{"version":3,"file":"eui-tour-step-indicator.js","sources":["../../src/components/eui-tour-step-indicator.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\nimport { service } from '@ember/service';\n\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { euiClass } from '../utils/eui/styles.ts';\nimport EuiIcon from './eui-icon.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\n\n/** One dot of a tour's progress: `'complete'`, `'active'` or `'incomplete'`. */\nexport interface EuiTourStepIndicatorSignature {\n  Element: HTMLLIElement;\n  Args: {\n    /** The step's number (1-based). */\n    number: number;\n    /** `'complete'`, `'active'` or `'incomplete'`. */\n    status?: 'complete' | 'active' | 'incomplete';\n  };\n}\n\n/** Upstream's static indicator style, plus a scoped list item reset. */\nconst INDICATOR = {\n  boxSizing: 'border-box',\n  margin: 0,\n  padding: 0,\n  display: 'inline-block',\n  label: 'EuiTourStepIndicator'\n} as const;\n\nexport default class EuiTourStepIndicator extends Component<EuiTourStepIndicatorSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  get label(): string {\n    return this.euiI18n.lookupToken('euiTourStepIndicator.ariaLabel', 'Step {number} {status}', {\n      number: this.args.number,\n      status: this.args.status ?? ''\n    });\n  }\n\n  get iconLabel(): string | undefined {\n    const { status } = this.args;\n\n    if (status === 'active') return this.euiI18n.lookupToken('euiTourStepIndicator.isActive', 'active');\n    if (status === 'complete') return this.euiI18n.lookupToken('euiTourStepIndicator.isComplete', 'complete');\n    if (status === 'incomplete') {\n      return this.euiI18n.lookupToken('euiTourStepIndicator.isIncomplete', 'incomplete');\n    }\n\n    return undefined;\n  }\n\n  @cached\n  get classes(): string {\n    return `euiTourStepIndicator ${euiClass(getEuiThemeContext(this), INDICATOR)}`;\n  }\n\n  /** Upstream: theme `tourStepIndicatorActiveColor` / `…InactiveColor`. */\n  @cached\n  get iconColor(): string {\n    const { components } = getEuiThemeContext(this).upstream.euiTheme;\n\n    return this.args.status === 'active'\n      ? components.tourStepIndicatorActiveColor\n      : components.tourStepIndicatorInactiveColor;\n  }\n\n  <template>\n    <li class={{this.classes}} aria-label={{this.label}} ...attributes>\n      {{#if this.iconLabel}}\n        <EuiIcon\n          @type=\"dot\"\n          @color={{this.iconColor}}\n          aria-label={{this.iconLabel}}\n          aria-current={{if (isActive @status) \"step\"}}\n        />\n      {{/if}}\n    </li>\n  </template>\n}\n\nfunction isActive(status?: string): boolean {\n  return status === 'active';\n}\n"],"names":["INDICATOR","boxSizing","margin","padding","display","label","EuiTourStepIndicator","Component","g","prototype","service","i","euiI18n","lookupToken","number","args","status","iconLabel","undefined","classes","euiClass","getEuiThemeContext","n","cached","iconColor","components","upstream","euiTheme","tourStepIndicatorActiveColor","tourStepIndicatorInactiveColor","setComponentTemplate","precompileTemplate","strictMode","scope","EuiIcon","isActive"],"mappings":";;;;;;;;;;AAqBA,wEACA,MAAMA,SAAA,GAAY;AAChBC,EAAAA,SAAA,EAAW,YAAA;AACXC,EAAAA,MAAA,EAAQ,CAAA;AACRC,EAAAA,OAAA,EAAS,CAAA;AACTC,EAAAA,OAAA,EAAS,cAAA;AACTC,EAAAA,KAAA,EAAO;AACT,CAAA;AAEe,MAAMC,6BAA6BC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACzDC,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;EAED,IAAIN,KAAAA,GAAgB;IAClB,OAAO,IAAI,CAACO,OAAO,CAACC,WAAW,CAAC,kCAAkC,wBAAA,EAA0B;AAC1FC,MAAAA,MAAA,EAAQ,IAAI,CAACC,IAAI,CAACD,MAAM;AACxBE,MAAAA,MAAA,EAAQ,IAAI,CAACD,IAAI,CAACC,MAAM,IAAI;AAC9B,KAAA,CAAA;AACF,EAAA;EAEA,IAAIC,SAAAA,GAAgC;IAClC,MAAM;AAAED,MAAAA;KAAQ,GAAG,IAAI,CAACD,IAAI;AAE5B,IAAA,IAAIC,MAAA,KAAW,UAAU,OAAO,IAAI,CAACJ,OAAO,CAACC,WAAW,CAAC,+BAAA,EAAiC,QAAA,CAAA;AAC1F,IAAA,IAAIG,MAAA,KAAW,YAAY,OAAO,IAAI,CAACJ,OAAO,CAACC,WAAW,CAAC,iCAAA,EAAmC,UAAA,CAAA;IAC9F,IAAIG,WAAW,YAAA,EAAc;MAC3B,OAAO,IAAI,CAACJ,OAAO,CAACC,WAAW,CAAC,mCAAA,EAAqC,YAAA,CAAA;AACvE,IAAA;AAEA,IAAA,OAAOK,SAAA;AACT,EAAA;EAEA,IACIC,OAAAA,GAAkB;IACpB,OAAO,CAAA,qBAAA,EAAwBC,SAASC,kBAAA,CAAmB,IAAI,GAAGrB,SAAA,CAAA,CAAA,CAAY;AAChF,EAAA;AAEA;AAAA,EAAA;IAAAsB,CAAA,CAAA,IAAA,CAAAb,SAAA,EAAA,SAAA,EAAA,CALCc,MAAA,CAAA,CAAA;AAAA;EAMD,IACIC,SAAAA,GAAoB;IACtB,MAAM;AAAEC,MAAAA;KAAY,GAAGJ,mBAAmB,IAAI,CAAA,CAAEK,QAAQ,CAACC,QAAQ;AAEjE,IAAA,OAAO,IAAI,CAACZ,IAAI,CAACC,MAAM,KAAK,QAAA,GACxBS,UAAA,CAAWG,4BAA4B,GACvCH,UAAA,CAAWI,8BAA8B;AAC/C,EAAA;AAAA,EAAA;IAAAP,CAAA,CAAA,IAAA,CAAAb,SAAA,EAAA,WAAA,EAAA,CAPCc,MAAA,CAAA,CAAA;AAAA;AASD,EAAA;IAAAO,oBAAA,CAAAC,kBAAA,CAAA,wPAAA,EAWA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;AAEA,SAASA,QAAAA,CAASnB,MAAe,EAAU;EACzC,OAAOA,MAAA,KAAW,QAAA;AACpB;;"}

package/dist/components/eui-tour-step.js

@@ -1,20 +1,33 @@
 import Component from '@glimmer/component';
+import { cached, tracked } from '@glimmer/tracking';
 import { on } from '@ember/modifier';
 import { service } from '@ember/service';
+import { modifier } from 'ember-modifier';
+import cssStyle from '../-private/css-style.js';
+import { EuiTourFooter, EuiTourHeader } from '../-private/eui-tour-parts.js';
 import { randomId } from '../-private/random-id.js';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { useEuiBorealisStyles, euiClass } from '../utils/eui/styles.js';
+import { dJ as euiTourStyles, dK as euiTourBeaconStyles } from '../styles.generated-SYAxYhey.js';
 import EuiBeacon from './eui-beacon.js';
 import EuiButtonEmpty from './eui-button-empty.js';
 import EuiFlexGroup from './eui-flex-group.js';
 import EuiFlexItem from './eui-flex-item.js';
 import EuiPopoverComponent from './eui-popover.js';
-import EuiPopoverFooter from './eui-popover-footer.js';
-import EuiPopoverTitle from './eui-popover-title.js';
-import EuiTitle from './eui-title.js';
+import EuiWrappingPopover from './eui-wrapping-popover.js';
 import EuiTourStepIndicator from './eui-tour-step-indicator.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import { g, i } from 'decorator-transforms/runtime-esm';
+import templateOnly from '@ember/component/template-only';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
 
+const POSITIONS = ['top', 'right', 'bottom', 'left'];
+/** Scoped list reset for the progress dots (no React global reset). */
+const STEP_LIST_RESET = {
+  listStyle: 'none',
+  margin: 0,
+  padding: 0
+};
 class EuiTourStep extends Component {
   static {
     g(this.prototype, "euiI18n", [service]);
@@ -27,6 +40,23 @@ class EuiTourStep extends Component {
   get config() {
     return this.args.tour?.stepConfig(this.step);
   }
+  /** Upstream: the popover's own `isOpen` wins over `isStepOpen`. */
+  get popoverIsOpen() {
+    return this.args.isOpen ?? this.isOpen;
+  }
+  get hasArrow() {
+    return this.args.hasArrow ?? this.hasBeacon;
+  }
+  get offset() {
+    if (this.args.offset !== undefined) return this.args.offset;
+    return this.hasBeacon && this.args.hasArrow !== false ? 10 : undefined;
+  }
+  get ownFocus() {
+    return this.args.ownFocus ?? false;
+  }
+  get panelClassName() {
+    return ['euiTour', this.args.panelClassName].filter(Boolean).join(' ');
+  }
   get isOpen() {
     if (this.args.isStepOpen !== undefined) return this.args.isStepOpen;
     const tour = this.args.tour;
@@ -50,12 +80,44 @@ class EuiTourStep extends Component {
   get hasBeacon() {
     return (this.args.decoration ?? 'beacon') === 'beacon';
   }
-  get panelStyle() {
+  /** Upstream: `minWidth`/`maxWidth` as logical sizes on the content wrapper. */
+  get widthStyle() {
     const minWidth = this.args.minWidth ?? this.args.tour?.tourPopoverWidth ?? 300;
-    return {
-      minWidth: `${minWidth}px`,
-      maxWidth: `${this.args.maxWidth ?? 600}px`
-    };
+    return cssStyle({
+      minInlineSize: minWidth,
+      maxInlineSize: this.args.maxWidth ?? 600
+    });
+  }
+  /**
+  * Upstream `euiTourStyles` (arrow background matching the footer), the
+  * popover's `panelProps.css`.
+  */
+  get panelCss() {
+    const context = getEuiThemeContext(this);
+    return [useEuiBorealisStyles(context, euiTourStyles).euiTour, this.args.css, this.args.panelProps?.css];
+  }
+  /**
+  * Upstream `euiTourBeaconStyles`, EuiBeacon's `css`. The position slot
+  * follows the popover's actual position through the preceding arrow's
+  * `data-popover-arrow` (upstream reads it from `onPositionChange`).
+  */
+  static {
+    n(this.prototype, "panelCss", [cached]);
+  }
+  get beaconCss() {
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiTourBeaconStyles);
+    const positions = Object.fromEntries(POSITIONS.map(position => [`[data-popover-arrow='${position}'] ~ &`, styles[position]]));
+    return [styles.euiTourBeacon, this.isOpen && styles.isOpen, positions];
+  }
+  static {
+    n(this.prototype, "beaconCss", [cached]);
+  }
+  get stepListClass() {
+    return `euiTourFooter__stepList ${euiClass(getEuiThemeContext(this), STEP_LIST_RESET)}`;
+  }
+  static {
+    n(this.prototype, "stepListClass", [cached]);
   }
   get statuses() {
     return Array.from({
@@ -66,7 +128,7 @@ class EuiTourStep extends Component {
     }));
   }
   get finishLabel() {
-    const t = (token, text) => this.euiI18n.lookupToken(`euiTourStep.${token}`, text);
+    const t = (token, text) => this.euiI18n.lookupToken(`euiTourFooter.${token}`, text);
     if (this.stepsTotal > 1) {
       return this.stepsTotal === this.step ? t('endTour', 'End tour') : t('skipTour', 'Skip tour');
     }
@@ -79,24 +141,55 @@ class EuiTourStep extends Component {
     this.args.closePopover?.();
   };
   static {
-    setComponentTemplate(precompileTemplate("<EuiPopover @isOpen={{this.isOpen}} @closePopover={{this.close}} @anchorPosition={{this.anchorPosition}} @ownFocus={{false}} @panelClassName=\"euiTour\" @panelStyle={{this.panelStyle}} @offset={{if this.hasBeacon 10 0}} @ariaLabelledBy={{this.titleId}} ...attributes>\n  <:button>{{yield}}</:button>\n  <:arrowChildren>\n    {{#if this.hasBeacon}}\n      <EuiBeacon class=\"euiTour__beacon\" />\n    {{/if}}\n  </:arrowChildren>\n  <:content>\n    <EuiPopoverTitle class=\"euiTourHeader\" id={{this.titleId}}>\n      {{#if this.subtitle}}\n        <EuiTitle class=\"euiTourHeader__subtitle\" @size=\"xxxs\" @tagName=\"h2\">{{this.subtitle}}</EuiTitle>\n        <EuiTitle class=\"euiTourHeader__title\" @size=\"xxs\" @tagName=\"h3\">{{this.title}}</EuiTitle>\n      {{else}}\n        <EuiTitle class=\"euiTourHeader__title\" @size=\"xxs\" @tagName=\"h2\">{{this.title}}</EuiTitle>\n      {{/if}}\n    </EuiPopoverTitle>\n    <div class=\"euiTour__content\">\n      {{#if (has-block \"content\")}}\n        {{yield to=\"content\"}}\n      {{else}}\n        {{this.content}}\n      {{/if}}\n    </div>\n    <EuiPopoverFooter class=\"euiTourFooter\">\n      <EuiFlexGroup @responsive={{false}} @justifyContent={{if (isMany this.stepsTotal) \"spaceBetween\" \"flexEnd\"}}>\n        {{#if (isMany this.stepsTotal)}}\n          <EuiFlexItem @grow={{false}}>\n            <ul class=\"euiTourFooter__stepList\">\n              {{#each this.statuses as |indicator|}}\n                <EuiTourStepIndicator @number={{indicator.number}} @status={{indicator.status}} />\n              {{/each}}\n            </ul>\n          </EuiFlexItem>\n        {{/if}}\n        <EuiFlexItem @grow={{false}}>\n          {{#if (has-block \"footerAction\")}}\n            {{yield to=\"footerAction\"}}\n          {{else}}\n            <EuiButtonEmpty @color=\"text\" @flush=\"right\" @size=\"xs\" {{on \"click\" this.finish}}>{{this.finishLabel}}</EuiButtonEmpty>\n          {{/if}}\n        </EuiFlexItem>\n      </EuiFlexGroup>\n    </EuiPopoverFooter>\n  </:content>\n</EuiPopover>", {
+    g(this.prototype, "anchorNode", [tracked], function () {
+      return null;
+    });
+  }
+  #anchorNode = (i(this, "anchorNode"), void 0);
+  /**
+  * Upstream finds the `@anchor` on the next tick, in case it is not in the
+  * DOM yet.
+  */
+  resolveAnchor = modifier((_element, [anchor]) => {
+    const timeout = window.setTimeout(() => {
+      this.anchorNode = typeof anchor === 'string' ? document.querySelector(anchor) : typeof anchor === 'function' ? anchor() ?? null : anchor ?? null;
+    });
+    return () => window.clearTimeout(timeout);
+  });
+  /** `@footerAction` as a list of components. */
+  get footerActions() {
+    const action = this.args.footerAction;
+    if (!action) return [];
+    return Array.isArray(action) ? action : [action];
+  }
+  get hasFooterActionList() {
+    return Array.isArray(this.args.footerAction);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{#let (has-block \"content\") (has-block \"footerAction\") (has-block \"arrowChildren\") as |hasContent hasFooterAction hasArrowChildren|}}\n  {{#if @anchor}}\n    <span hidden class=\"euiTourAnchor__resolver\" {{this.resolveAnchor @anchor}}></span>\n    {{#if this.anchorNode}}\n      <EuiWrappingPopover class=\"euiTourAnchor\" @button={{this.anchorNode}} @isOpen={{this.popoverIsOpen}} @closePopover={{this.close}} @anchorPosition={{this.anchorPosition}} @ownFocus={{this.ownFocus}} @panelClassName={{this.panelClassName}} @panelCss={{this.panelCss}} @panelProps={{@panelProps}} @hasArrow={{this.hasArrow}} @offset={{this.offset}} @zIndex={{@zIndex}} @ariaLabelledBy={{this.titleId}} @attachToAnchor={{@attachToAnchor}} @buffer={{@buffer}} @container={{@container}} @display={{@display}} @focusTrapProps={{@focusTrapProps}} @initialFocus={{@initialFocus}} @onPositionChange={{@onPositionChange}} @panelPaddingSize={{@panelPaddingSize}} @panelStyle={{@panelStyle}} @popoverScreenReaderText={{@popoverScreenReaderText}} @repositionOnScroll={{@repositionOnScroll}} @repositionToCrossAxis={{@repositionToCrossAxis}} ...attributes>\n        <:arrowChildren>\n          {{#if hasArrowChildren}}\n            {{yield to=\"arrowChildren\"}}\n          {{else if this.hasBeacon}}\n            <EuiBeacon class=\"euiTour__beacon\" @css={{this.beaconCss}} />\n          {{/if}}\n        </:arrowChildren>\n        <:default>\n          <StepContent @step={{this}} @hasContent={{hasContent}} @hasFooterAction={{hasFooterAction}}>\n            <:content>{{yield to=\"content\"}}</:content>\n            <:footerAction>{{yield to=\"footerAction\"}}</:footerAction>\n          </StepContent>\n        </:default>\n      </EuiWrappingPopover>\n    {{/if}}\n  {{else}}\n    <EuiPopover class=\"euiTourAnchor\" @isOpen={{this.popoverIsOpen}} @closePopover={{this.close}} @anchorPosition={{this.anchorPosition}} @ownFocus={{this.ownFocus}} @panelClassName={{this.panelClassName}} @panelCss={{this.panelCss}} @panelProps={{@panelProps}} @hasArrow={{this.hasArrow}} @offset={{this.offset}} @zIndex={{@zIndex}} @ariaLabelledBy={{this.titleId}} @attachToAnchor={{@attachToAnchor}} @buffer={{@buffer}} @container={{@container}} @display={{@display}} @focusTrapProps={{@focusTrapProps}} @initialFocus={{@initialFocus}} @onPositionChange={{@onPositionChange}} @panelPaddingSize={{@panelPaddingSize}} @panelStyle={{@panelStyle}} @popoverScreenReaderText={{@popoverScreenReaderText}} @repositionOnScroll={{@repositionOnScroll}} @repositionToCrossAxis={{@repositionToCrossAxis}} @insert={{@insert}} ...attributes>\n      <:button>{{yield}}</:button>\n      <:arrowChildren>\n        {{#if hasArrowChildren}}\n          {{yield to=\"arrowChildren\"}}\n        {{else if this.hasBeacon}}\n          <EuiBeacon class=\"euiTour__beacon\" @css={{this.beaconCss}} />\n        {{/if}}\n      </:arrowChildren>\n      <:content>\n        <StepContent @step={{this}} @hasContent={{hasContent}} @hasFooterAction={{hasFooterAction}}>\n          <:content>{{yield to=\"content\"}}</:content>\n          <:footerAction>{{yield to=\"footerAction\"}}</:footerAction>\n        </StepContent>\n      </:content>\n    </EuiPopover>\n  {{/if}}\n{{/let}}", {
       strictMode: true,
       scope: () => ({
-        EuiPopover: EuiPopoverComponent,
+        EuiWrappingPopover,
         EuiBeacon,
-        EuiPopoverTitle,
-        EuiTitle,
-        EuiPopoverFooter,
-        EuiFlexGroup,
-        isMany,
-        EuiFlexItem,
-        EuiTourStepIndicator,
-        EuiButtonEmpty,
-        on
+        StepContent,
+        EuiPopover: EuiPopoverComponent
       })
     }), this);
   }
 }
+/** The title, content and footer of a step, shared by both popover kinds. */const StepContent = setComponentTemplate(precompileTemplate("<div style={{@step.widthStyle}}>\n  <EuiTourHeader id={{@step.titleId}} @title={{@step.title}} @subtitle={{@step.subtitle}} />\n  <div class=\"euiTour__content\">\n    {{#if @hasContent}}\n      {{yield to=\"content\"}}\n    {{else}}\n      {{@step.content}}\n    {{/if}}\n  </div>\n  <EuiTourFooter>\n    <EuiFlexGroup @responsive={{false}} @alignItems=\"center\" @justifyContent={{if (isMany @step.stepsTotal) \"spaceBetween\" \"flexEnd\"}}>\n      {{#if (isMany @step.stepsTotal)}}\n        <EuiFlexItem @grow={{false}}>\n          <ul class={{@step.stepListClass}}>\n            {{~#each @step.statuses as |indicator|~}}\n              <EuiTourStepIndicator @number={{indicator.number}} @status={{indicator.status}} />\n            {{~/each~}}\n          </ul>\n        </EuiFlexItem>\n      {{/if}}\n      {{#if @hasFooterAction}}\n        <EuiFlexItem @grow={{false}}>\n          {{yield to=\"footerAction\"}}\n        </EuiFlexItem>\n      {{else if @step.hasFooterActionList}}\n        <EuiFlexGroup @gutterSize=\"s\" @alignItems=\"center\" @justifyContent=\"flexEnd\" @responsive={{false}} @wrap={{true}}>\n          {{#each @step.footerActions as |Action|}}\n            <EuiFlexItem @grow={{false}}><Action /></EuiFlexItem>\n          {{/each}}\n        </EuiFlexGroup>\n      {{else if @step.footerActions.length}}\n        {{#each @step.footerActions as |Action|}}\n          <EuiFlexItem @grow={{false}}><Action /></EuiFlexItem>\n        {{/each}}\n      {{else}}\n        <EuiFlexItem @grow={{false}}>\n          <EuiButtonEmpty @color=\"text\" @flush=\"right\" @size=\"xs\" {{on \"click\" @step.finish}}>{{@step.finishLabel}}</EuiButtonEmpty>\n        </EuiFlexItem>\n      {{/if}}\n    </EuiFlexGroup>\n  </EuiTourFooter>\n</div>", {
+  strictMode: true,
+  scope: () => ({
+    EuiTourHeader,
+    EuiTourFooter,
+    EuiFlexGroup,
+    isMany,
+    EuiFlexItem,
+    EuiTourStepIndicator,
+    EuiButtonEmpty,
+    on
+  })
+}), templateOnly());
 function isMany(count) {
   return count > 1;
 }

package/dist/components/eui-tour-step.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-tour-step.js","sources":["../../src/components/eui-tour-step.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { on } from '@ember/modifier';\nimport { service } from '@ember/service';\n\nimport { randomId } from '../-private/random-id.ts';\nimport EuiBeacon from './eui-beacon.gts';\nimport EuiButtonEmpty from './eui-button-empty.gts';\nimport EuiFlexGroup from './eui-flex-group.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiPopover from './eui-popover.gts';\nimport EuiPopoverFooter from './eui-popover-footer.gts';\nimport EuiPopoverTitle from './eui-popover-title.gts';\nimport EuiTitle from './eui-title.gts';\nimport EuiTourStepIndicator from './eui-tour-step-indicator.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { EuiPopoverSignature } from './eui-popover';\n\n/** What a tour tells its steps (set by `EuiTour`). */\nexport interface EuiTourContext {\n  currentTourStep: number;\n  isTourActive: boolean;\n  stepsTotal: number;\n  tourPopoverWidth?: number;\n  tourSubtitle?: string;\n  finishTour: () => void;\n  stepConfig: (step: number) => EuiTourStepConfig | undefined;\n}\n\n/** The content of a step, given to `EuiTour`'s `@steps`. */\nexport interface EuiTourStepConfig {\n  /** The step's number (1-based). */\n  step: number;\n  /** Title of the step. */\n  title: string;\n  /** Text of the step. */\n  content?: string;\n  /** Where the popover opens. Defaults to `'leftUp'`. */\n  anchorPosition?: EuiPopoverSignature['Args']['anchorPosition'];\n}\n\n/**\n * One step of a guided tour: a popover with a pulsing beacon next to the\n * element it explains (the block), a title, content, the progress and a\n * button to skip or end the tour. Render it through `EuiTour`, which opens\n * the current step, or on its own with `@isStepOpen`.\n */\nexport interface EuiTourStepSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Shows the popover. Defaults to whether it is the tour's current step. */\n    isStepOpen?: boolean;\n    /** The step's number (1-based). Defaults to `1`. */\n    step?: number;\n    /** Number of steps in the tour, for the progress dots. */\n    stepsTotal?: number;\n    /** Title of the step. */\n    title?: string;\n    /** Small title above it, e.g. the tour's name. */\n    subtitle?: string;\n    /** Text of the step. Use the `<:content>` block for markup. */\n    content?: string;\n    /** Where the popover opens. Defaults to `'leftUp'`. */\n    anchorPosition?: EuiPopoverSignature['Args']['anchorPosition'];\n    /** Minimum width in px. Defaults to `300`. */\n    minWidth?: number;\n    /** Maximum width in px. Defaults to `600`. */\n    maxWidth?: number;\n    /** Called by the \"Skip / End / Close tour\" button. */\n    onFinish?: () => void;\n    /** Called when clicking outside or pressing Escape. */\n    closePopover?: () => void;\n    /** `'beacon'` (a pulsing dot on the arrow) or `'none'`. Defaults to `'beacon'`. */\n    decoration?: 'beacon' | 'none';\n    /** @private Set by `EuiTour`. */\n    tour?: EuiTourContext;\n  };\n  Blocks: {\n    /** The element the step points at. */\n    default: [];\n    /** Markup for the step's content, instead of `@content`. */\n    content: [];\n    /** Replaces the \"Skip tour\" button, e.g. with \"Next\" / \"Back\" buttons. */\n    footerAction: [];\n  };\n}\n\ntype Status = 'complete' | 'active' | 'incomplete';\n\nexport default class EuiTourStep extends Component<EuiTourStepSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  titleId = `euiTourStep_${randomId()}`;\n\n  get step(): number {\n    return this.args.step ?? 1;\n  }\n\n  get config(): EuiTourStepConfig | undefined {\n    return this.args.tour?.stepConfig(this.step);\n  }\n\n  get isOpen(): boolean {\n    if (this.args.isStepOpen !== undefined) return this.args.isStepOpen;\n\n    const tour = this.args.tour;\n\n    return Boolean(tour?.isTourActive && tour.currentTourStep === this.step);\n  }\n\n  get stepsTotal(): number {\n    return this.args.stepsTotal ?? this.args.tour?.stepsTotal ?? 1;\n  }\n\n  get title(): string | undefined {\n    return this.args.title ?? this.config?.title;\n  }\n\n  get subtitle(): string | undefined {\n    return this.args.subtitle ?? this.args.tour?.tourSubtitle;\n  }\n\n  get content(): string | undefined {\n    return this.args.content ?? this.config?.content;\n  }\n\n  get anchorPosition(): EuiPopoverSignature['Args']['anchorPosition'] {\n    return this.args.anchorPosition ?? this.config?.anchorPosition ?? 'leftUp';\n  }\n\n  get hasBeacon(): boolean {\n    return (this.args.decoration ?? 'beacon') === 'beacon';\n  }\n\n  get panelStyle(): Record<string, string> {\n    const minWidth = this.args.minWidth ?? this.args.tour?.tourPopoverWidth ?? 300;\n\n    return { minWidth: `${minWidth}px`, maxWidth: `${this.args.maxWidth ?? 600}px` };\n  }\n\n  get statuses(): { number: number; status: Status }[] {\n    return Array.from({ length: this.stepsTotal }, (_, i) => ({\n      number: i + 1,\n      status: this.step === i + 1 ? 'active' : this.step <= i ? 'incomplete' : 'complete'\n    }));\n  }\n\n  get finishLabel(): string {\n    const t = (token: string, text: string) => this.euiI18n.lookupToken(`euiTourStep.${token}`, text);\n\n    if (this.stepsTotal > 1) {\n      return this.stepsTotal === this.step ? t('endTour', 'End tour') : t('skipTour', 'Skip tour');\n    }\n\n    return t('closeTour', 'Close tour');\n  }\n\n  finish = (): void => {\n    (this.args.onFinish ?? this.args.tour?.finishTour)?.();\n  };\n\n  close = (): void => {\n    this.args.closePopover?.();\n  };\n\n  <template>\n    <EuiPopover\n      @isOpen={{this.isOpen}}\n      @closePopover={{this.close}}\n      @anchorPosition={{this.anchorPosition}}\n      @ownFocus={{false}}\n      @panelClassName=\"euiTour\"\n      @panelStyle={{this.panelStyle}}\n      @offset={{if this.hasBeacon 10 0}}\n      @ariaLabelledBy={{this.titleId}}\n      ...attributes\n    >\n      <:button>{{yield}}</:button>\n      <:arrowChildren>\n        {{#if this.hasBeacon}}\n          <EuiBeacon class=\"euiTour__beacon\" />\n        {{/if}}\n      </:arrowChildren>\n      <:content>\n        <EuiPopoverTitle class=\"euiTourHeader\" id={{this.titleId}}>\n          {{#if this.subtitle}}\n            <EuiTitle class=\"euiTourHeader__subtitle\" @size=\"xxxs\" @tagName=\"h2\">{{this.subtitle}}</EuiTitle>\n            <EuiTitle class=\"euiTourHeader__title\" @size=\"xxs\" @tagName=\"h3\">{{this.title}}</EuiTitle>\n          {{else}}\n            <EuiTitle class=\"euiTourHeader__title\" @size=\"xxs\" @tagName=\"h2\">{{this.title}}</EuiTitle>\n          {{/if}}\n        </EuiPopoverTitle>\n        <div class=\"euiTour__content\">\n          {{#if (has-block \"content\")}}\n            {{yield to=\"content\"}}\n          {{else}}\n            {{this.content}}\n          {{/if}}\n        </div>\n        <EuiPopoverFooter class=\"euiTourFooter\">\n          <EuiFlexGroup\n            @responsive={{false}}\n            @justifyContent={{if (isMany this.stepsTotal) \"spaceBetween\" \"flexEnd\"}}\n          >\n            {{#if (isMany this.stepsTotal)}}\n              <EuiFlexItem @grow={{false}}>\n                <ul class=\"euiTourFooter__stepList\">\n                  {{#each this.statuses as |indicator|}}\n                    <EuiTourStepIndicator @number={{indicator.number}} @status={{indicator.status}} />\n                  {{/each}}\n                </ul>\n              </EuiFlexItem>\n            {{/if}}\n            <EuiFlexItem @grow={{false}}>\n              {{#if (has-block \"footerAction\")}}\n                {{yield to=\"footerAction\"}}\n              {{else}}\n                <EuiButtonEmpty\n                  @color=\"text\"\n                  @flush=\"right\"\n                  @size=\"xs\"\n                  {{on \"click\" this.finish}}\n                >{{this.finishLabel}}</EuiButtonEmpty>\n              {{/if}}\n            </EuiFlexItem>\n          </EuiFlexGroup>\n        </EuiPopoverFooter>\n      </:content>\n    </EuiPopover>\n  </template>\n}\n\nfunction isMany(count: number): boolean {\n  return count > 1;\n}\n\n"],"names":["EuiTourStep","Component","g","prototype","service","i","titleId","randomId","step","args","config","tour","stepConfig","isOpen","isStepOpen","undefined","Boolean","isTourActive","currentTourStep","stepsTotal","title","subtitle","tourSubtitle","content","anchorPosition","hasBeacon","decoration","panelStyle","minWidth","tourPopoverWidth","maxWidth","statuses","Array","from","length","_","number","status","finishLabel","t","token","text","euiI18n","lookupToken","finish","onFinish","finishTour","close","closePopover","setComponentTemplate","precompileTemplate","strictMode","scope","EuiPopover","EuiBeacon","EuiPopoverTitle","EuiTitle","EuiPopoverFooter","EuiFlexGroup","isMany","EuiFlexItem","EuiTourStepIndicator","EuiButtonEmpty","on","count"],"mappings":"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"}
+{"version":3,"file":"eui-tour-step.js","sources":["../../src/components/eui-tour-step.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached, tracked } from '@glimmer/tracking';\nimport { on } from '@ember/modifier';\nimport { service } from '@ember/service';\n\nimport { modifier } from 'ember-modifier';\n\nimport cssStyle from '../-private/css-style.ts';\nimport { EuiTourFooter, EuiTourHeader } from '../-private/eui-tour-parts.gts';\nimport { randomId } from '../-private/random-id.ts';\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport type { EuiCss } from '../utils/eui/styles.ts';\nimport {\n  euiTourBeaconStyles,\n  euiTourStyles\n} from '../utils/eui/styles.generated.ts';\nimport EuiBeacon from './eui-beacon.gts';\nimport EuiButtonEmpty from './eui-button-empty.gts';\nimport EuiFlexGroup from './eui-flex-group.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiPopover from './eui-popover.gts';\nimport EuiWrappingPopover from './eui-wrapping-popover.gts';\nimport EuiTourStepIndicator from './eui-tour-step-indicator.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\nimport type { ComponentLike } from '@glint/template';\nimport type { EuiPopoverSignature } from './eui-popover';\n\n/** What a tour tells its steps (set by `EuiTour`). */\nexport interface EuiTourContext {\n  currentTourStep: number;\n  isTourActive: boolean;\n  stepsTotal: number;\n  tourPopoverWidth?: number;\n  tourSubtitle?: string;\n  finishTour: () => void;\n  stepConfig: (step: number) => EuiTourStepConfig | undefined;\n}\n\n/** The content of a step, given to `EuiTour`'s `@steps`. */\nexport interface EuiTourStepConfig {\n  /** The step's number (1-based). */\n  step: number;\n  /** Title of the step. */\n  title: string;\n  /** Text of the step. */\n  content?: string;\n  /** Where the popover opens. Defaults to `'leftUp'`. */\n  anchorPosition?: EuiPopoverSignature['Args']['anchorPosition'];\n}\n\n/**\n * The EuiPopover args a step passes on (upstream's popover props). They\n * replace the step's own values, except `panelClassName` (added to\n * `euiTour`) and `panelProps` (its `css` is composed after the tour's).\n * `hasArrow` defaults to whether there is a beacon, and `offset` to `10`\n * with a beacon and an arrow.\n */\nexport type EuiTourStepPopoverArgs = Partial<\n  Pick<\n    EuiPopoverSignature['Args'],\n    | 'attachToAnchor'\n    | 'buffer'\n    | 'container'\n    | 'display'\n    | 'focusTrapProps'\n    | 'hasArrow'\n    | 'initialFocus'\n    | 'insert'\n    | 'isOpen'\n    | 'offset'\n    | 'onPositionChange'\n    | 'ownFocus'\n    | 'panelClassName'\n    | 'panelPaddingSize'\n    | 'panelProps'\n    | 'panelStyle'\n    | 'popoverScreenReaderText'\n    | 'repositionOnScroll'\n    | 'repositionToCrossAxis'\n  >\n>;\n\n/**\n * One step of a guided tour: a popover with a pulsing beacon next to the\n * element it explains (the block), a title, content, the progress and a\n * button to skip or end the tour. Render it through `EuiTour`, which opens\n * the current step, or on its own with `@isStepOpen`.\n */\nexport interface EuiTourStepSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Shows the popover. Defaults to whether it is the tour's current step. */\n    isStepOpen?: boolean;\n    /** The step's number (1-based). Defaults to `1`. */\n    step?: number;\n    /** Number of steps in the tour, for the progress dots. */\n    stepsTotal?: number;\n    /** Title of the step. */\n    title?: string;\n    /** Small title above it, e.g. the tour's name. */\n    subtitle?: string;\n    /** Text of the step. Use the `<:content>` block for markup. */\n    content?: string;\n    /** Where the popover opens. Defaults to `'leftUp'`. */\n    anchorPosition?: EuiPopoverSignature['Args']['anchorPosition'];\n    /** Minimum width in px. Defaults to `300`. */\n    minWidth?: number;\n    /** Maximum width in px. Defaults to `600`. */\n    maxWidth?: number;\n    /** Called by the \"Skip / End / Close tour\" button. */\n    onFinish?: () => void;\n    /** Called when clicking outside or pressing Escape. */\n    closePopover?: () => void;\n    /**\n     * Attaches the popover to an element that is already in the page,\n     * given as a CSS selector, the element itself or a function returning\n     * it, instead of wrapping\n     * the default block (which is then not rendered). The popover appears\n     * once the element is found.\n     */\n    anchor?: string | HTMLElement | (() => HTMLElement | null | undefined);\n    /** `z-index` of the popover. Defaults to the popover layer. */\n    zIndex?: number;\n    /**\n     * Replaces the \"Skip tour\" button in the footer: a component (use\n     * `(component …)`), or an array of components for up to two buttons.\n     * The `<:footerAction>` block wins when both are given.\n     */\n    footerAction?: ComponentLike | ComponentLike[];\n    /** `'beacon'` (a pulsing dot on the arrow) or `'none'`. Defaults to `'beacon'`. */\n    decoration?: 'beacon' | 'none';\n    /** @private Set by `EuiTour`. */\n    tour?: EuiTourContext;\n    /**\n     * Extra styles composed into the panel's class, after the tour's own\n     * (upstream's `css`, which EuiTourStep moves to the panel).\n     */\n    css?: EuiCss;\n  } & EuiTourStepPopoverArgs;\n  Blocks: {\n    /** The element the step points at (unused with `@anchor`). */\n    default: [];\n    /** Markup for the step's content, instead of `@content`. */\n    content: [];\n    /** Replaces the \"Skip tour\" button, e.g. with \"Next\" / \"Back\" buttons. */\n    footerAction: [];\n    /**\n     * Content of the popover's arrow, instead of the beacon (upstream\n     * `arrowChildren`).\n     */\n    arrowChildren: [];\n  };\n}\n\ntype Status = 'complete' | 'active' | 'incomplete';\n\nconst POSITIONS = ['top', 'right', 'bottom', 'left'] as const;\n\n/** Scoped list reset for the progress dots (no React global reset). */\nconst STEP_LIST_RESET = {\n  listStyle: 'none',\n  margin: 0,\n  padding: 0\n} as const;\n\nexport default class EuiTourStep extends Component<EuiTourStepSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  titleId = `euiTourStep_${randomId()}`;\n\n  get step(): number {\n    return this.args.step ?? 1;\n  }\n\n  get config(): EuiTourStepConfig | undefined {\n    return this.args.tour?.stepConfig(this.step);\n  }\n\n  /** Upstream: the popover's own `isOpen` wins over `isStepOpen`. */\n  get popoverIsOpen(): boolean {\n    return this.args.isOpen ?? this.isOpen;\n  }\n\n  get hasArrow(): boolean {\n    return this.args.hasArrow ?? this.hasBeacon;\n  }\n\n  get offset(): number | undefined {\n    if (this.args.offset !== undefined) return this.args.offset;\n\n    return this.hasBeacon && this.args.hasArrow !== false ? 10 : undefined;\n  }\n\n  get ownFocus(): boolean {\n    return this.args.ownFocus ?? false;\n  }\n\n  get panelClassName(): string {\n    return ['euiTour', this.args.panelClassName].filter(Boolean).join(' ');\n  }\n\n  get isOpen(): boolean {\n    if (this.args.isStepOpen !== undefined) return this.args.isStepOpen;\n\n    const tour = this.args.tour;\n\n    return Boolean(tour?.isTourActive && tour.currentTourStep === this.step);\n  }\n\n  get stepsTotal(): number {\n    return this.args.stepsTotal ?? this.args.tour?.stepsTotal ?? 1;\n  }\n\n  get title(): string | undefined {\n    return this.args.title ?? this.config?.title;\n  }\n\n  get subtitle(): string | undefined {\n    return this.args.subtitle ?? this.args.tour?.tourSubtitle;\n  }\n\n  get content(): string | undefined {\n    return this.args.content ?? this.config?.content;\n  }\n\n  get anchorPosition(): EuiPopoverSignature['Args']['anchorPosition'] {\n    return this.args.anchorPosition ?? this.config?.anchorPosition ?? 'leftUp';\n  }\n\n  get hasBeacon(): boolean {\n    return (this.args.decoration ?? 'beacon') === 'beacon';\n  }\n\n  /** Upstream: `minWidth`/`maxWidth` as logical sizes on the content wrapper. */\n  get widthStyle() {\n    const minWidth = this.args.minWidth ?? this.args.tour?.tourPopoverWidth ?? 300;\n\n    return cssStyle({\n      minInlineSize: minWidth,\n      maxInlineSize: this.args.maxWidth ?? 600\n    });\n  }\n\n  /**\n   * Upstream `euiTourStyles` (arrow background matching the footer), the\n   * popover's `panelProps.css`.\n   */\n  @cached\n  get panelCss(): EuiCss {\n    const context = getEuiThemeContext(this);\n    return [\n      useEuiBorealisStyles(context, euiTourStyles).euiTour,\n      this.args.css,\n      this.args.panelProps?.css\n    ];\n  }\n\n  /**\n   * Upstream `euiTourBeaconStyles`, EuiBeacon's `css`. The position slot\n   * follows the popover's actual position through the preceding arrow's\n   * `data-popover-arrow` (upstream reads it from `onPositionChange`).\n   */\n  @cached\n  get beaconCss(): EuiCss {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiTourBeaconStyles);\n    const positions = Object.fromEntries(\n      POSITIONS.map((position) => [\n        `[data-popover-arrow='${position}'] ~ &`,\n        styles[position]\n      ])\n    );\n\n    return [styles.euiTourBeacon, this.isOpen && styles.isOpen, positions];\n  }\n\n  @cached\n  get stepListClass(): string {\n    return `euiTourFooter__stepList ${euiClass(\n      getEuiThemeContext(this),\n      STEP_LIST_RESET\n    )}`;\n  }\n\n  get statuses(): { number: number; status: Status }[] {\n    return Array.from({ length: this.stepsTotal }, (_, i) => ({\n      number: i + 1,\n      status: this.step === i + 1 ? 'active' : this.step <= i ? 'incomplete' : 'complete'\n    }));\n  }\n\n  get finishLabel(): string {\n    const t = (token: string, text: string) =>\n      this.euiI18n.lookupToken(`euiTourFooter.${token}`, text);\n\n    if (this.stepsTotal > 1) {\n      return this.stepsTotal === this.step ? t('endTour', 'End tour') : t('skipTour', 'Skip tour');\n    }\n\n    return t('closeTour', 'Close tour');\n  }\n\n  finish = (): void => {\n    (this.args.onFinish ?? this.args.tour?.finishTour)?.();\n  };\n\n  close = (): void => {\n    this.args.closePopover?.();\n  };\n\n  @tracked anchorNode: HTMLElement | null = null;\n\n  /**\n   * Upstream finds the `@anchor` on the next tick, in case it is not in the\n   * DOM yet.\n   */\n  resolveAnchor = modifier((_element: HTMLElement, [anchor]: [unknown]) => {\n    const timeout = window.setTimeout(() => {\n      this.anchorNode =\n        typeof anchor === 'string'\n          ? document.querySelector<HTMLElement>(anchor)\n          : typeof anchor === 'function'\n            ? ((anchor() as HTMLElement | null | undefined) ?? null)\n            : ((anchor as HTMLElement | null) ?? null);\n    });\n\n    return () => window.clearTimeout(timeout);\n  });\n\n  /** `@footerAction` as a list of components. */\n  get footerActions(): ComponentLike[] {\n    const action = this.args.footerAction;\n\n    if (!action) return [];\n\n    return Array.isArray(action) ? action : [action];\n  }\n\n  get hasFooterActionList(): boolean {\n    return Array.isArray(this.args.footerAction);\n  }\n\n  <template>\n    {{#let\n      (has-block \"content\")\n      (has-block \"footerAction\")\n      (has-block \"arrowChildren\")\n      as |hasContent hasFooterAction hasArrowChildren|\n    }}\n      {{#if @anchor}}\n        <span hidden class=\"euiTourAnchor__resolver\" {{this.resolveAnchor @anchor}}></span>\n        {{#if this.anchorNode}}\n          <EuiWrappingPopover\n            class=\"euiTourAnchor\"\n            @button={{this.anchorNode}}\n            @isOpen={{this.popoverIsOpen}}\n            @closePopover={{this.close}}\n            @anchorPosition={{this.anchorPosition}}\n            @ownFocus={{this.ownFocus}}\n            @panelClassName={{this.panelClassName}}\n            @panelCss={{this.panelCss}}\n            @panelProps={{@panelProps}}\n            @hasArrow={{this.hasArrow}}\n            @offset={{this.offset}}\n            @zIndex={{@zIndex}}\n            @ariaLabelledBy={{this.titleId}}\n            @attachToAnchor={{@attachToAnchor}}\n            @buffer={{@buffer}}\n            @container={{@container}}\n            @display={{@display}}\n            @focusTrapProps={{@focusTrapProps}}\n            @initialFocus={{@initialFocus}}\n            @onPositionChange={{@onPositionChange}}\n            @panelPaddingSize={{@panelPaddingSize}}\n            @panelStyle={{@panelStyle}}\n            @popoverScreenReaderText={{@popoverScreenReaderText}}\n            @repositionOnScroll={{@repositionOnScroll}}\n            @repositionToCrossAxis={{@repositionToCrossAxis}}\n            ...attributes\n          >\n            <:arrowChildren>\n              {{#if hasArrowChildren}}\n                {{yield to=\"arrowChildren\"}}\n              {{else if this.hasBeacon}}\n                <EuiBeacon class=\"euiTour__beacon\" @css={{this.beaconCss}} />\n              {{/if}}\n            </:arrowChildren>\n            <:default>\n              <StepContent\n                @step={{this}}\n                @hasContent={{hasContent}}\n                @hasFooterAction={{hasFooterAction}}\n              >\n                <:content>{{yield to=\"content\"}}</:content>\n                <:footerAction>{{yield to=\"footerAction\"}}</:footerAction>\n              </StepContent>\n            </:default>\n          </EuiWrappingPopover>\n        {{/if}}\n      {{else}}\n        <EuiPopover\n          class=\"euiTourAnchor\"\n          @isOpen={{this.popoverIsOpen}}\n          @closePopover={{this.close}}\n          @anchorPosition={{this.anchorPosition}}\n          @ownFocus={{this.ownFocus}}\n          @panelClassName={{this.panelClassName}}\n          @panelCss={{this.panelCss}}\n          @panelProps={{@panelProps}}\n          @hasArrow={{this.hasArrow}}\n          @offset={{this.offset}}\n          @zIndex={{@zIndex}}\n          @ariaLabelledBy={{this.titleId}}\n          @attachToAnchor={{@attachToAnchor}}\n          @buffer={{@buffer}}\n          @container={{@container}}\n          @display={{@display}}\n          @focusTrapProps={{@focusTrapProps}}\n          @initialFocus={{@initialFocus}}\n          @onPositionChange={{@onPositionChange}}\n          @panelPaddingSize={{@panelPaddingSize}}\n          @panelStyle={{@panelStyle}}\n          @popoverScreenReaderText={{@popoverScreenReaderText}}\n          @repositionOnScroll={{@repositionOnScroll}}\n          @repositionToCrossAxis={{@repositionToCrossAxis}}\n          @insert={{@insert}}\n          ...attributes\n        >\n          <:button>{{yield}}</:button>\n          <:arrowChildren>\n            {{#if hasArrowChildren}}\n              {{yield to=\"arrowChildren\"}}\n            {{else if this.hasBeacon}}\n              <EuiBeacon class=\"euiTour__beacon\" @css={{this.beaconCss}} />\n            {{/if}}\n          </:arrowChildren>\n          <:content>\n            <StepContent\n              @step={{this}}\n              @hasContent={{hasContent}}\n              @hasFooterAction={{hasFooterAction}}\n            >\n              <:content>{{yield to=\"content\"}}</:content>\n              <:footerAction>{{yield to=\"footerAction\"}}</:footerAction>\n            </StepContent>\n          </:content>\n        </EuiPopover>\n      {{/if}}\n    {{/let}}\n  </template>\n}\n\ninterface StepContentSignature {\n  Args: {\n    step: EuiTourStep;\n    hasContent: boolean;\n    hasFooterAction: boolean;\n  };\n  Blocks: { content: []; footerAction: [] };\n}\n\n/** The title, content and footer of a step, shared by both popover kinds. */\nconst StepContent: TemplateOnlyComponent<StepContentSignature> = <template>\n  <div style={{@step.widthStyle}}>\n    <EuiTourHeader\n      id={{@step.titleId}}\n      @title={{@step.title}}\n      @subtitle={{@step.subtitle}}\n    />\n    <div class=\"euiTour__content\">\n      {{#if @hasContent}}\n        {{yield to=\"content\"}}\n      {{else}}\n        {{@step.content}}\n      {{/if}}\n    </div>\n    <EuiTourFooter>\n      <EuiFlexGroup\n        @responsive={{false}}\n        @alignItems=\"center\"\n        @justifyContent={{if\n          (isMany @step.stepsTotal)\n          \"spaceBetween\"\n          \"flexEnd\"\n        }}\n      >\n        {{#if (isMany @step.stepsTotal)}}\n          <EuiFlexItem @grow={{false}}>\n            <ul class={{@step.stepListClass}}>\n              {{~#each @step.statuses as |indicator|~}}\n                <EuiTourStepIndicator\n                  @number={{indicator.number}}\n                  @status={{indicator.status}}\n                />\n              {{~/each~}}\n            </ul>\n          </EuiFlexItem>\n        {{/if}}\n        {{#if @hasFooterAction}}\n          <EuiFlexItem @grow={{false}}>\n            {{yield to=\"footerAction\"}}\n          </EuiFlexItem>\n        {{else if @step.hasFooterActionList}}\n          <EuiFlexGroup\n            @gutterSize=\"s\"\n            @alignItems=\"center\"\n            @justifyContent=\"flexEnd\"\n            @responsive={{false}}\n            @wrap={{true}}\n          >\n            {{#each @step.footerActions as |Action|}}\n              <EuiFlexItem @grow={{false}}><Action /></EuiFlexItem>\n            {{/each}}\n          </EuiFlexGroup>\n        {{else if @step.footerActions.length}}\n          {{#each @step.footerActions as |Action|}}\n            <EuiFlexItem @grow={{false}}><Action /></EuiFlexItem>\n          {{/each}}\n        {{else}}\n          <EuiFlexItem @grow={{false}}>\n            <EuiButtonEmpty\n              @color=\"text\"\n              @flush=\"right\"\n              @size=\"xs\"\n              {{on \"click\" @step.finish}}\n            >{{@step.finishLabel}}</EuiButtonEmpty>\n          </EuiFlexItem>\n        {{/if}}\n      </EuiFlexGroup>\n    </EuiTourFooter>\n  </div>\n</template>;\n\nfunction isMany(count: number): boolean {\n  return count > 1;\n}\n"],"names":["POSITIONS","STEP_LIST_RESET","listStyle","margin","padding","EuiTourStep","Component","g","prototype","service","i","titleId","randomId","step","args","config","tour","stepConfig","popoverIsOpen","isOpen","hasArrow","hasBeacon","offset","undefined","ownFocus","panelClassName","filter","Boolean","join","isStepOpen","isTourActive","currentTourStep","stepsTotal","title","subtitle","tourSubtitle","content","anchorPosition","decoration","widthStyle","minWidth","tourPopoverWidth","cssStyle","minInlineSize","maxInlineSize","maxWidth","panelCss","context","getEuiThemeContext","useEuiBorealisStyles","euiTourStyles","euiTour","css","panelProps","n","cached","beaconCss","styles","euiTourBeaconStyles","positions","Object","fromEntries","map","position","euiTourBeacon","stepListClass","euiClass","statuses","Array","from","length","_","number","status","finishLabel","t","token","text","euiI18n","lookupToken","finish","onFinish","finishTour","close","closePopover","tracked","resolveAnchor","modifier","_element","anchor","timeout","window","setTimeout","anchorNode","document","querySelector","clearTimeout","footerActions","action","footerAction","isArray","hasFooterActionList","setComponentTemplate","precompileTemplate","strictMode","scope","EuiWrappingPopover","EuiBeacon","StepContent","EuiPopover","EuiTourHeader","EuiTourFooter","EuiFlexGroup","isMany","EuiFlexItem","EuiTourStepIndicator","EuiButtonEmpty","on","templateOnly","count"],"mappings":"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"}

package/dist/components/eui-tree-view.js

@@ -1,16 +1,43 @@
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
+import { tracked, cached } from '@glimmer/tracking';
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { service } from '@ember/service';
+import EuiRenderNodeView from '../-private/eui-render-node.js';
 import { randomId } from '../-private/random-id.js';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { useEuiBorealisStyles, euiClass } from '../utils/eui/styles.js';
+import { az as euiTextTruncate, dL as euiTreeViewStyles, dM as euiTreeViewItemStyles } from '../styles.generated-SYAxYhey.js';
 import EuiIcon from './eui-icon.js';
 import EuiScreenReaderOnly from './eui-screen-reader-only.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import { g, i, n } from 'decorator-transforms/runtime-esm';
 
+/** Scoped stand-ins for React's global reset; upstream rules follow. */const LIST_RESET = {
+  boxSizing: 'border-box',
+  padding: 0
+};
+const ITEM_RESET = {
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0
+};
+const BUTTON_RESET = {
+  boxSizing: 'border-box',
+  margin: 0,
+  padding: 0,
+  border: 'none',
+  background: 'none',
+  color: 'inherit',
+  font: 'inherit',
+  borderRadius: 0,
+  textAlign: 'start',
+  cursor: 'pointer'
+};
+// upstream's `eui-textTruncate` utility class
+const LABEL_TRUNCATE = euiTextTruncate();
 function initiallyOpen(items, expandByDefault) {
   return items.filter(node => node.children && (expandByDefault || node.isExpanded)).map(node => node.id);
 }
@@ -48,16 +75,82 @@ class EuiTreeView extends Component {
   get instructions() {
     return this.euiI18n.lookupToken('euiTreeView.listNavigationInstructions', 'You can quickly navigate this list using arrow keys.');
   }
+  get display() {
+    return this.args.display === 'compressed' ? 'compressed' : 'default';
+  }
   get isCompressed() {
-    return this.args.display === 'compressed';
+    return this.display === 'compressed';
   }
+  /** Upstream `euiTreeViewStyles`: list reset, nested indent, font size. */
   get classes() {
-    return ['euiTreeView', this.isCompressed && 'euiTreeView--compressed', this.args.showExpansionArrows && 'euiTreeView--withArrows'].filter(Boolean).join(' ');
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiTreeViewStyles);
+    return `euiTreeView ${euiClass(context, LIST_RESET, styles.euiTreeView, styles[this.display])}`;
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  get nodeStyles() {
+    const context = getEuiThemeContext(this);
+    const {
+      li
+    } = useEuiBorealisStyles(context, euiTreeViewItemStyles);
+    const base = [ITEM_RESET, li.euiTreeView__node, li[this.display]];
+    return {
+      closed: euiClass(context, ...base),
+      expanded: euiClass(context, ...base, li.expanded)
+    };
+  }
+  static {
+    n(this.prototype, "nodeStyles", [cached]);
+  }
+  get buttonStyles() {
+    const context = getEuiThemeContext(this);
+    const {
+      button
+    } = useEuiBorealisStyles(context, euiTreeViewItemStyles);
+    return euiClass(context, BUTTON_RESET, button.euiTreeView__nodeInner, button[this.display]);
+  }
+  /** Icon wrapper and arrow placeholder (upstream `icon` slots). */
+  static {
+    n(this.prototype, "buttonStyles", [cached]);
+  }
+  get iconWrapperStyles() {
+    const context = getEuiThemeContext(this);
+    const {
+      icon
+    } = useEuiBorealisStyles(context, euiTreeViewItemStyles);
+    return euiClass(context, icon.euiTreeView__iconWrapper, icon[this.display]);
+  }
+  static {
+    n(this.prototype, "iconWrapperStyles", [cached]);
+  }
+  get labelStyles() {
+    const context = getEuiThemeContext(this);
+    return `euiTreeView__nodeLabel eui-textTruncate ${euiClass(context, LABEL_TRUNCATE)}`;
+  }
+  static {
+    n(this.prototype, "labelStyles", [cached]);
   }
   isOpen = node => this.openItems.includes(node.id);
-  nodeClasses = node => ['euiTreeView__node', this.isCompressed && 'euiTreeView--compressed', this.isOpen(node) && 'euiTreeView__node--expanded'].filter(Boolean).join(' ');
-  buttonClasses = node => ['euiTreeView__nodeInner', this.args.showExpansionArrows && node.children && 'euiTreeView__nodeInner--withArrows', this.activeItem === node.id && 'euiTreeView__node--active', node.className].filter(Boolean).join(' ');
+  /** `aria-expanded` only for nodes with children (upstream). */
+  ariaExpanded = node => node.children ? this.isOpen(node) ? 'true' : 'false' : undefined;
+  nodeClasses = node => {
+    const expanded = Boolean(node.children) && this.isOpen(node);
+    return expanded ? `euiTreeView__node euiTreeView__node--expanded ${this.nodeStyles.expanded}` : `euiTreeView__node ${this.nodeStyles.closed}`;
+  };
+  buttonClasses = node => ['euiTreeView__nodeInner', node.className, this.activeItem === node.id && 'euiTreeView__node--active', this.buttonStyles].filter(Boolean).join(' ');
+  hasIcon = node => Boolean(node.icon || node.iconWhenExpanded && this.isOpen(node));
   iconOf = node => this.isOpen(node) && node.iconWhenExpanded || node.icon || 'empty';
+  /** Icon types render through `EuiIcon`; components as they are. */
+  iconType = node => {
+    const icon = this.iconOf(node);
+    return typeof icon === 'string' ? icon : undefined;
+  };
+  iconNode = node => {
+    const icon = this.iconOf(node);
+    return typeof icon === 'string' ? undefined : icon;
+  };
   childrenId = node => `${this.treeId}_${node.id}_children`;
   toggle(node) {
     this.expandChildNodes = false;
@@ -121,26 +214,27 @@ class EuiTreeView extends Component {
     n(this.prototype, "onChildrenKeyDown", [action]);
   }
   static {
-    setComponentTemplate(precompileTemplate("<div class=\"euiText {{if this.isCompressed \"euiText--small\" \"euiText--medium\"}} euiTreeView__wrapper\">\n  {{#unless this.isNested}}\n    <EuiScreenReaderOnly>\n      <p id={{this.instructionsId}}>{{this.instructions}}</p>\n    </EuiScreenReaderOnly>\n  {{/unless}}\n  <ul class={{this.classes}} id={{unless this.isNested this.treeId}} aria-describedby={{unless this.isNested this.instructionsId}} ...attributes>\n    {{#each @items as |node|}}\n      <li class={{this.nodeClasses node}}>\n        <button type=\"button\" id={{node.id}} class={{this.buttonClasses node}} aria-controls={{this.childrenId node}} aria-expanded={{if (this.isOpen node) \"true\" \"false\"}} data-test-subj=\"euiTreeViewButton-{{this.treeId}}\" {{on \"click\" (fn this.onClick node)}} {{on \"keydown\" (fn this.onKeyDown node)}}>\n          {{#if (and2 @showExpansionArrows node.children)}}\n            <EuiIcon class=\"euiTreeView__expansionArrow\" @size={{if this.isCompressed \"s\" \"m\"}} @type={{if (this.isOpen node) \"arrowDown\" \"arrowRight\"}} />\n          {{/if}}\n          {{#if node.icon}}\n            <span class=\"euiTreeView__iconWrapper\">\n              <EuiIcon @type={{this.iconOf node}} />\n            </span>\n          {{else if node.useEmptyIcon}}\n            <span class=\"euiTreeView__iconPlaceholder\"></span>\n          {{/if}}\n          <span class=\"euiTreeView__nodeLabel\">\n            {{~#if (has-block \"label\")~}}\n              {{yield node to=\"label\"}}\n            {{~else~}}\n              {{node.label}}\n            {{~/if~}}\n          </span>\n        </button>\n        <div id={{this.childrenId node}} {{on \"keydown\" (fn this.onChildrenKeyDown node)}}>\n          {{#if (and2 node.children (this.isOpen node))}}\n            <EuiTreeView @items={{childrenOf node}} @display={{@display}} @showExpansionArrows={{@showExpansionArrows}} @expandByDefault={{this.expandChildNodes}} @treeId={{this.treeId}} aria-labelledby={{node.id}}>\n              <:label as |child|>\n                {{~#if (has-block \"label\")~}}\n                  {{yield child to=\"label\"}}\n                {{~else~}}\n                  {{child.label}}\n                {{~/if~}}\n              </:label>\n            </EuiTreeView>\n          {{/if}}\n        </div>\n      </li>\n    {{/each}}\n  </ul>\n</div>", {
+    setComponentTemplate(precompileTemplate("{{#unless this.isNested}}\n  <EuiScreenReaderOnly>\n    <p id={{this.instructionsId}}>{{this.instructions}}</p>\n  </EuiScreenReaderOnly>\n{{/unless}}\n{{!-- role=\"list\": VoiceOver drops the list role with list-style none (upstream) --}}\n<ul class={{this.classes}} id={{unless this.isNested this.treeId}} aria-describedby={{unless this.isNested this.instructionsId}} role=\"list\" ...attributes>\n  {{#each @items as |node|}}\n    <li class={{this.nodeClasses node}}>\n      <button type=\"button\" id={{node.id}} class={{this.buttonClasses node}} aria-controls={{if node.children (this.childrenId node)}} aria-expanded={{this.ariaExpanded node}} data-test-subj=\"euiTreeViewButton-{{this.treeId}}\" {{on \"click\" (fn this.onClick node)}} {{on \"keydown\" (fn this.onKeyDown node)}}>\n        {{#if @showExpansionArrows}}\n          {{#if node.children}}\n            <EuiIcon class=\"euiTreeView__expansionArrow\" @size={{if this.isCompressed \"s\" \"m\"}} @type={{if (this.isOpen node) \"chevronSingleDown\" \"chevronSingleRight\"}} />\n          {{else}}\n            <span class=\"euiTreeView__arrowPlaceholder {{this.iconWrapperStyles}}\"></span>\n          {{/if}}\n        {{/if}}\n        {{#if (this.hasIcon node)}}\n          <span class=\"euiTreeView__iconWrapper {{this.iconWrapperStyles}}\">\n            {{#if (if (isBoolean @hasIconBlock) @hasIconBlock (has-block \"icon\"))}}\n              {{yield node (this.isOpen node) to=\"icon\"}}\n            {{else}}\n              {{#let (this.iconType node) as |type|}}\n                {{#if type}}\n                  <EuiIcon @type={{type}} />\n                {{else}}\n                  <EuiRenderNode @value={{this.iconNode node}} />\n                {{/if}}\n              {{/let}}\n            {{/if}}\n          </span>\n        {{else if node.useEmptyIcon}}\n          <span class=\"euiTreeView__iconWrapper {{this.iconWrapperStyles}}\"></span>\n        {{/if}}\n        <span class={{this.labelStyles}}>\n          {{~#if (has-block \"label\")~}}\n            {{yield node to=\"label\"}}\n          {{~else~}}\n            {{node.label}}\n          {{~/if~}}\n        </span>\n      </button>\n      {{#if node.children}}\n        <div id={{this.childrenId node}} {{on \"keydown\" (fn this.onChildrenKeyDown node)}}>\n          {{#if (this.isOpen node)}}\n            <EuiTreeView @items={{childrenOf node}} @display={{@display}} @showExpansionArrows={{@showExpansionArrows}} @expandByDefault={{this.expandChildNodes}} @treeId={{this.treeId}} @hasIconBlock={{if (isBoolean @hasIconBlock) @hasIconBlock (has-block \"icon\")}} aria-labelledby={{node.id}}>\n              <:icon as |child isExpanded|>\n                {{yield child isExpanded to=\"icon\"}}\n              </:icon>\n              <:label as |child|>\n                {{~#if (has-block \"label\")~}}\n                  {{yield child to=\"label\"}}\n                {{~else~}}\n                  {{child.label}}\n                {{~/if~}}\n              </:label>\n            </EuiTreeView>\n          {{/if}}\n        </div>\n      {{/if}}\n    </li>\n  {{/each}}\n</ul>", {
       strictMode: true,
       scope: () => ({
         EuiScreenReaderOnly,
         on,
         fn,
-        and2,
         EuiIcon,
+        isBoolean,
+        EuiRenderNode: EuiRenderNodeView,
         EuiTreeView,
         childrenOf
       })
     }), this);
   }
 }
+function isBoolean(value) {
+  return typeof value === 'boolean';
+}
 function childrenOf(node) {
   return node.children ?? [];
 }
-function and2(a, b) {
-  return Boolean(a && b);
-}
 
 export { EuiTreeView as default };
 //# sourceMappingURL=eui-tree-view.js.map