@ember-eui/core 13.0.4 → 14.0.0

package/dist/-private/set-body-class.js

@@ -0,0 +1,90 @@
+import Helper from '@ember/component/helper';
+import { getOwner } from '@ember/owner';
+
+/**
+ * Replacement for `ember-set-body-class` (a v1 addon with no v2 release).
+ *
+ *   {{(setBodyClass "euiBody-hasOverlayMask")}}
+ *
+ * Adds the given class names to <body> while the helper is rendered and
+ * removes them when it is torn down. Class names are reference counted, so
+ * with nested usages (e.g. a modal opened from a flyout, both rendering an
+ * overlay mask) the class stays until the last one goes away.
+ *
+ * Like the original, it goes through the `-document` service so it also
+ * works in FastBoot, and it keeps the classes when the app is torn down in
+ * FastBoot so they end up in the rendered HTML.
+ */
+
+const countsByDocument = new WeakMap();
+function countsFor(doc) {
+  let counts = countsByDocument.get(doc);
+  if (!counts) {
+    counts = new Map();
+    countsByDocument.set(doc, counts);
+  }
+  return counts;
+}
+function splitClassNames(value) {
+  return value ? value.split(/\s+/).filter(Boolean) : [];
+}
+function updateBody(doc, add, remove) {
+  const classList = new Set(splitClassNames(doc.body.getAttribute('class')));
+  remove.forEach(name => classList.delete(name));
+  add.forEach(name => classList.add(name));
+  doc.body.setAttribute('class', [...classList].join(' '));
+}
+function retain(doc, names) {
+  const counts = countsFor(doc);
+  const added = [];
+  for (const name of names) {
+    const count = counts.get(name) ?? 0;
+    if (count === 0) added.push(name);
+    counts.set(name, count + 1);
+  }
+  if (added.length) updateBody(doc, added, []);
+}
+function release(doc, names) {
+  const counts = countsFor(doc);
+  const removed = [];
+  for (const name of names) {
+    const count = (counts.get(name) ?? 0) - 1;
+    if (count <= 0) {
+      counts.delete(name);
+      removed.push(name);
+    } else {
+      counts.set(name, count);
+    }
+  }
+  if (removed.length) updateBody(doc, [], removed);
+}
+class SetBodyClass extends Helper {
+  #names = [];
+  get #document() {
+    return getOwner(this)?.lookup('service:-document');
+  }
+  get #isFastBoot() {
+    const fastboot = getOwner(this)?.lookup('service:fastboot');
+    return Boolean(fastboot?.isFastBoot);
+  }
+  compute([classNames]) {
+    const doc = this.#document;
+    if (!doc) return;
+    const next = [...new Set(splitClassNames(classNames))];
+
+    // retain before releasing, so names kept across updates never flicker
+    retain(doc, next);
+    release(doc, this.#names);
+    this.#names = next;
+  }
+  willDestroy() {
+    super.willDestroy();
+    const doc = this.#document;
+    if (!doc || this.#isFastBoot) return;
+    release(doc, this.#names);
+    this.#names = [];
+  }
+}
+
+export { SetBodyClass as default };
+//# sourceMappingURL=set-body-class.js.map

package/dist/-private/set-body-class.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"set-body-class.js","sources":["../../src/-private/set-body-class.ts"],"sourcesContent":["import Helper from '@ember/component/helper';\nimport { getOwner } from '@ember/owner';\n\n/**\n * Replacement for `ember-set-body-class` (a v1 addon with no v2 release).\n *\n *   {{(setBodyClass \"euiBody-hasOverlayMask\")}}\n *\n * Adds the given class names to <body> while the helper is rendered and\n * removes them when it is torn down. Class names are reference counted, so\n * with nested usages (e.g. a modal opened from a flyout, both rendering an\n * overlay mask) the class stays until the last one goes away.\n *\n * Like the original, it goes through the `-document` service so it also\n * works in FastBoot, and it keeps the classes when the app is torn down in\n * FastBoot so they end up in the rendered HTML.\n */\n\ninterface BodyLike {\n  getAttribute(name: string): string | null;\n  setAttribute(name: string, value: string): void;\n}\n\ninterface DocumentLike {\n  body: BodyLike;\n}\n\nconst countsByDocument = new WeakMap<DocumentLike, Map<string, number>>();\n\nfunction countsFor(doc: DocumentLike) {\n  let counts = countsByDocument.get(doc);\n\n  if (!counts) {\n    counts = new Map();\n    countsByDocument.set(doc, counts);\n  }\n\n  return counts;\n}\n\nfunction splitClassNames(value: string | null | undefined): string[] {\n  return value ? value.split(/\\s+/).filter(Boolean) : [];\n}\n\nfunction updateBody(doc: DocumentLike, add: string[], remove: string[]) {\n  const classList = new Set(splitClassNames(doc.body.getAttribute('class')));\n\n  remove.forEach((name) => classList.delete(name));\n  add.forEach((name) => classList.add(name));\n\n  doc.body.setAttribute('class', [...classList].join(' '));\n}\n\nfunction retain(doc: DocumentLike, names: string[]) {\n  const counts = countsFor(doc);\n  const added: string[] = [];\n\n  for (const name of names) {\n    const count = counts.get(name) ?? 0;\n\n    if (count === 0) added.push(name);\n    counts.set(name, count + 1);\n  }\n\n  if (added.length) updateBody(doc, added, []);\n}\n\nfunction release(doc: DocumentLike, names: string[]) {\n  const counts = countsFor(doc);\n  const removed: string[] = [];\n\n  for (const name of names) {\n    const count = (counts.get(name) ?? 0) - 1;\n\n    if (count <= 0) {\n      counts.delete(name);\n      removed.push(name);\n    } else {\n      counts.set(name, count);\n    }\n  }\n\n  if (removed.length) updateBody(doc, [], removed);\n}\n\ninterface SetBodyClassSignature {\n  Args: {\n    Positional: [classNames: string | undefined];\n  };\n  Return: undefined;\n}\n\nexport default class SetBodyClass extends Helper<SetBodyClassSignature> {\n  #names: string[] = [];\n\n  get #document(): DocumentLike | undefined {\n    return getOwner(this)?.lookup('service:-document') as\n      | DocumentLike\n      | undefined;\n  }\n\n  get #isFastBoot(): boolean {\n    const fastboot = getOwner(this)?.lookup('service:fastboot') as\n      | { isFastBoot?: boolean }\n      | undefined;\n\n    return Boolean(fastboot?.isFastBoot);\n  }\n\n  compute([classNames]: [string | undefined]): undefined {\n    const doc = this.#document;\n\n    if (!doc) return;\n\n    const next = [...new Set(splitClassNames(classNames))];\n\n    // retain before releasing, so names kept across updates never flicker\n    retain(doc, next);\n    release(doc, this.#names);\n    this.#names = next;\n  }\n\n  willDestroy() {\n    super.willDestroy();\n\n    const doc = this.#document;\n\n    if (!doc || this.#isFastBoot) return;\n\n    release(doc, this.#names);\n    this.#names = [];\n  }\n}\n"],"names":["countsByDocument","WeakMap","countsFor","doc","counts","get","Map","set","splitClassNames","value","split","filter","Boolean","updateBody","add","remove","classList","Set","body","getAttribute","forEach","name","delete","setAttribute","join","retain","names","added","count","push","length","release","removed","SetBodyClass","Helper","#document","getOwner","lookup","#isFastBoot","fastboot","isFastBoot","compute","classNames","next","willDestroy"],"mappings":"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"}

package/dist/components/eui-accordion.js

@@ -16,7 +16,7 @@ import EuiButtonIcon from './eui-button-icon.js';
 import EuiLoadingSpinner from './eui-loading-spinner.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import { g, i } from 'decorator-transforms/runtime';
+import { g, i } from 'decorator-transforms/runtime-esm';
 
 class EuiAccordionComponent extends Component {
   static {
@@ -80,14 +80,16 @@ class EuiAccordionComponent extends Component {
   get buttonContentClasses() {
     return ['euiAccordion__buttonContent', this.args.buttonContentClassName].join(' ');
   }
+  // undefined (not '') when open: a plain string bound to `style` makes
+  // Ember warn about XSS
   get childContentStyle() {
-    return this._opened ? '' : htmlSafe(`height: 0px;`);
+    return this._opened ? undefined : htmlSafe(`height: 0px;`);
   }
   setChildContentHeight = () => {
-    let forceState = this.args.forceState;
+    const forceState = this.args.forceState;
     requestAnimationFrame(() => {
       const height = this.childContent && (forceState ? forceState === 'open' : this._opened) ? this.childContent.clientHeight : 0;
-      this.childWrapper && this.childWrapper.setAttribute('style', `height: ${height}px`);
+      this.childWrapper?.setAttribute('style', `height: ${height}px`);
     });
   };
   onToggle = () => {
@@ -107,7 +109,7 @@ class EuiAccordionComponent extends Component {
     this.childContent = null;
   }
   static {
-    setComponentTemplate(precompileTemplate("\n    {{#let (argOrDefault @element \"div\") as |tagName|}}\n      {{#if tagName}}\n        {{#let (element tagName) (element this.buttonElement) as |Accordion ButtonElement|}}\n          {{#if (and Accordion ButtonElement)}}\n            <Accordion class={{classNames (if this.isOpen \"euiAccordion-isOpen\") componentName=\"EuiAccordion\"}} ...attributes>\n              <div class={{classNames \"euiAccordion__triggerWrapper\" @triggerClassName}}>\n                {{#if (eq this._arrowDisplay \"left\")}}\n                  <EuiButtonIcon class={{classNames \"euiAccordion__iconButton\" (if this.isOpen \"euiAccordion__iconButton-isOpen\") (if (eq this._arrowDisplay \"right\") \"euiAccordion__iconButton--right\") (if @arrowProps.className @arrowProps.className)}} @iconType=\"arrowRight\" {{on \"click\" this.onToggle}} aria-controls={{@id}} aria-expanded={{this.isOpen}} tabindex={{if this.buttonElementIsFocusable \"-1\" \"0\"}} />\n                {{/if}}\n                <ButtonElement type=\"button\" id={{argOrDefault @buttonProps.id (randomId)}} class={{this.buttonClasses}} aria-controls={{@id}} aria-expanded={{this.isOpen}} aria-labelledby={{argOrDefault @buttonProps.id (randomId)}} {{on \"click\" this.onToggle}}>\n                  <span class={{this.buttonContentClasses}}>\n                    {{yield this.isOpen to=\"buttonContent\"}}\n                  </span>\n                </ButtonElement>\n                {{#if (and @extraAction (has-block \"extraAction\") (not this.isLoading))}}\n                  <div class=\"euiAccordion__optionalAction\">\n                    {{yield this.isOpen to=\"extraAction\"}}\n                  </div>\n                {{else if this.isLoading}}\n                  <div class=\"euiAccordion__optionalAction\">\n                    <EuiLoadingSpinner />\n                  </div>\n                {{/if}}\n                {{#if (eq this._arrowDisplay \"right\")}}\n                  <EuiButtonIcon @color=\"text\" class={{classNames \"euiAccordion__iconButton\" (if this.isOpen \"euiAccordion__iconButton-isOpen\") (if (eq this._arrowDisplay \"right\") \"euiAccordion__iconButton--right\") (if @arrowProps.className @arrowProps.className)}} @iconType=\"arrowRight\" {{on \"click\" this.onToggle}} aria-controls={{@id}} aria-expanded={{this.isOpen}} tabindex={{if this.buttonElementIsFocusable \"-1\" \"0\"}} />\n                {{/if}}\n              </div>\n              <div class=\"euiAccordion__childWrapper\" style={{this.childContentStyle}} id={{@id}} {{didInsert (set this \"childWrapper\")}} tabindex=\"-1\" role=\"region\">\n                <div class={{classNames (if this.isLoading \"euiAccordion__children-isLoading\") @childClassName}} {{didInsert (queue (set this \"childContent\") this.setChildContentHeight)}} {{resizeObserver onResize=this.setChildContentHeight}} {{didUpdate this.setChildContentHeight @forceState}}>\n                  {{#if (and this.isLoading this.isLoadingMessage)}}\n                    <EuiLoadingSpinner class=\"euiAccordion__spinner\" />\n                    <span>\n                      {{#if this.hasLoadingMessage}}\n                        {{this.isLoadingMessage}}\n                      {{else}}\n                        {{!-- <EuiI18n @token=\"euiAccordion.isLoading\" @default=\"Loading\" /> --}}\n                        Loading...\n                      {{/if}}\n                    </span>\n                  {{else}}\n                    <div class={{classNames componentName=\"EuiAccordion\" paddingSize=this.paddingSize}}>\n                      {{yield to=\"content\"}}\n                    </div>\n                  {{/if}}\n                </div>\n              </div>\n            </Accordion>\n          {{/if}}\n        {{/let}}\n      {{/if}}\n    {{/let}}\n  ", {
+    setComponentTemplate(precompileTemplate("{{#let (argOrDefault @element \"div\") as |tagName|}}\n  {{#if tagName}}\n    {{#let (element tagName) (element this.buttonElement) as |Accordion ButtonElement|}}\n      {{#if (and Accordion ButtonElement)}}\n        <Accordion class={{classNames (if this.isOpen \"euiAccordion-isOpen\") componentName=\"EuiAccordion\"}} ...attributes>\n          <div class={{classNames \"euiAccordion__triggerWrapper\" @triggerClassName}}>\n            {{#if (eq this._arrowDisplay \"left\")}}\n              <EuiButtonIcon class={{classNames \"euiAccordion__iconButton\" (if this.isOpen \"euiAccordion__iconButton-isOpen\") (if (eq this._arrowDisplay \"right\") \"euiAccordion__iconButton--right\") (if @arrowProps.className @arrowProps.className)}} @iconType=\"arrowRight\" {{on \"click\" this.onToggle}} aria-controls={{@id}} aria-expanded={{if this.isOpen \"true\" \"false\"}} tabindex={{if this.buttonElementIsFocusable \"-1\" \"0\"}} />\n            {{/if}}\n            <ButtonElement type=\"button\" id={{argOrDefault @buttonProps.id (randomId)}} class={{this.buttonClasses}} aria-controls={{@id}} aria-expanded={{if this.isOpen \"true\" \"false\"}} aria-labelledby={{argOrDefault @buttonProps.id (randomId)}} {{on \"click\" this.onToggle}}>\n              <span class={{this.buttonContentClasses}}>\n                {{yield this.isOpen to=\"buttonContent\"}}\n              </span>\n            </ButtonElement>\n            {{#if (and @extraAction (has-block \"extraAction\") (not this.isLoading))}}\n              <div class=\"euiAccordion__optionalAction\">\n                {{yield this.isOpen to=\"extraAction\"}}\n              </div>\n            {{else if this.isLoading}}\n              <div class=\"euiAccordion__optionalAction\">\n                <EuiLoadingSpinner />\n              </div>\n            {{/if}}\n            {{#if (eq this._arrowDisplay \"right\")}}\n              <EuiButtonIcon @color=\"text\" class={{classNames \"euiAccordion__iconButton\" (if this.isOpen \"euiAccordion__iconButton-isOpen\") (if (eq this._arrowDisplay \"right\") \"euiAccordion__iconButton--right\") (if @arrowProps.className @arrowProps.className)}} @iconType=\"arrowRight\" {{on \"click\" this.onToggle}} aria-controls={{@id}} aria-expanded={{if this.isOpen \"true\" \"false\"}} tabindex={{if this.buttonElementIsFocusable \"-1\" \"0\"}} />\n            {{/if}}\n          </div>\n          <div class=\"euiAccordion__childWrapper\" style={{this.childContentStyle}} id={{@id}} {{didInsert (set this \"childWrapper\")}} tabindex=\"-1\" role=\"region\">\n            <div class={{classNames (if this.isLoading \"euiAccordion__children-isLoading\") @childClassName}} {{didInsert (queue (set this \"childContent\") this.setChildContentHeight)}} {{resizeObserver onResize=this.setChildContentHeight}} {{didUpdate this.setChildContentHeight @forceState}}>\n              {{#if (and this.isLoading this.isLoadingMessage)}}\n                <EuiLoadingSpinner class=\"euiAccordion__spinner\" />\n                <span>\n                  {{#if this.hasLoadingMessage}}\n                    {{this.isLoadingMessage}}\n                  {{else}}\n                    {{!-- <EuiI18n @token=\"euiAccordion.isLoading\" @default=\"Loading\" /> --}}\n                    Loading...\n                  {{/if}}\n                </span>\n              {{else}}\n                <div class={{classNames componentName=\"EuiAccordion\" paddingSize=this.paddingSize}}>\n                  {{yield to=\"content\"}}\n                </div>\n              {{/if}}\n            </div>\n          </div>\n        </Accordion>\n      {{/if}}\n    {{/let}}\n  {{/if}}\n{{/let}}", {
       strictMode: true,
       scope: () => ({
         argOrDefault,

package/dist/components/eui-accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-accordion.js","sources":["../../src/components/eui-accordion.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { on } from '@ember/modifier';\nimport didInsert from '@ember/render-modifiers/modifiers/did-insert';\nimport didUpdate from '@ember/render-modifiers/modifiers/did-update';\nimport { htmlSafe } from '@ember/template';\nimport type Owner from '@ember/owner';\n\nimport queue from '@nullvoxpopuli/ember-composable-helpers/helpers/queue';\nimport { element } from 'ember-element-helper';\nimport set from 'ember-set-helper/helpers/set';\nimport { and, eq, not } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport argOrDefault, {\n  argOrDefaultDecorator\n} from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport resizeObserver from '../modifiers/resize-observer.ts';\nimport EuiButtonIcon from './eui-button-icon.gts';\nimport EuiLoadingSpinner from './eui-loading-spinner.gts';\n\nimport type { paddingMapping } from '../utils/css-mappings/eui-accordion.ts';\nimport type { CommonArgs } from './common.ts';\n\ntype EuiAccordionPaddingSize = keyof typeof paddingMapping;\n\ntype AccordionArgs = {\n  id?: string;\n\n  element?: 'div' | 'fieldset';\n  /**\n   * Class that will apply to the trigger for the accordion.\n   */\n  buttonClassName?: string;\n\n  buttonProps?: CommonArgs;\n\n  /**\n   * Applied to the main button receiving the `onToggle` event.\n   * Anything other than the default `button` does not support removing the arrow display (for accessibility of focus).\n   */\n  buttonElement?: 'div' | 'legend' | 'button';\n  /**\n   * Extra props to pass to the EuiButtonIcon containing the arrow.\n   */\n  arrowProps?: {\n    className?: string;\n  };\n\n  /**\n   * Class that will apply to the trigger content for the accordion.\n   */\n  buttonContentClassName?: string;\n  /**\n   * The content of the clickable trigger\n   */\n  buttonContent?: Component;\n  /**\n   * Will appear right aligned against the button. Useful for separate actions like deletions.\n   */\n  extraAction?: Component | boolean;\n  /**\n   * The accordion will start in the open state.\n   */\n  initialIsOpen?: boolean;\n  /**\n   * Optional callback method called on open and close with a single `isOpen` parameter\n   */\n  onToggle?: (isOpen: boolean) => void;\n  /**\n   * The padding around the exposed accordion content.\n   */\n  paddingSize?: EuiAccordionPaddingSize;\n  /**\n   * Placement of the arrow indicator, or 'none' to hide it.\n   */\n  arrowDisplay?: 'left' | 'right' | 'none';\n  /**\n   * Control the opening of accordion via prop\n   */\n  forceState?: 'closed' | 'open';\n  /**\n   * Change `extraAction` and children into a loading spinner\n   */\n  isLoading?: boolean;\n  /**\n   * Choose whether the loading message replaces the content. Customize the message by passing a node\n   */\n  isLoadingMessage?: boolean | Component;\n\n  isOpen?: boolean;\n\n  childClassName?: string;\n  triggerClassName?: string;\n  childContentClassName?: string;\n};\n\nexport interface EuiAccordionSignature {\n  Element: any;\n  Args: AccordionArgs;\n  Blocks: {\n    buttonContent: [boolean | undefined];\n    content: [];\n    extraAction: [boolean | undefined];\n  };\n}\n\nexport default class EuiAccordionComponent extends Component<EuiAccordionSignature> {\n  // Defaults\n  @argOrDefaultDecorator(false) isLoading!: boolean;\n  @argOrDefaultDecorator(false) isLoadingMessage!: boolean;\n  @argOrDefaultDecorator(false) initialIsOpen!: boolean;\n  @argOrDefaultDecorator('none') paddingSize!: EuiAccordionPaddingSize;\n  @argOrDefaultDecorator('left') arrowDisplay!: AccordionArgs['arrowDisplay'];\n\n  @tracked _opened;\n  @tracked childWrapper: HTMLDivElement | null = null;\n  @tracked childContent: HTMLDivElement | null = null;\n\n  constructor(owner: Owner, args: AccordionArgs) {\n    super(owner, args);\n\n    this._opened = this.args.forceState\n      ? this.args.forceState === 'open'\n      : this.args.initialIsOpen;\n  }\n\n  get buttonElement() {\n    return this.args.element === 'fieldset' ? 'legend' : 'button';\n  }\n\n  get buttonElementIsFocusable() {\n    return this.buttonElement === 'button';\n  }\n\n  get _arrowDisplay() {\n    return this.arrowDisplay === 'none' && !this.buttonElementIsFocusable\n      ? 'left'\n      : this.arrowDisplay;\n  }\n\n  get isOpen(): boolean | undefined {\n    return this.args.forceState\n      ? this.args.forceState === 'open'\n      : this._opened;\n  }\n\n  get hasLoadingMessage(): boolean {\n    return this.isLoadingMessage && this.isLoadingMessage !== true;\n  }\n\n  get buttonClasses(): string {\n    return [\n      'euiAccordion__button',\n      this.args.buttonClassName,\n      this.args.buttonProps?.className\n    ].join(' ');\n  }\n\n  get buttonContentClasses(): string {\n    return [\n      'euiAccordion__buttonContent',\n      this.args.buttonContentClassName\n    ].join(' ');\n  }\n\n  get childContentStyle(): string | ReturnType<typeof htmlSafe> {\n    return this._opened ? '' : htmlSafe(`height: 0px;`);\n  }\n\n  setChildContentHeight = () => {\n    let forceState = this.args.forceState;\n\n    requestAnimationFrame(() => {\n      const height =\n        this.childContent && (forceState ? forceState === 'open' : this._opened)\n          ? this.childContent.clientHeight\n          : 0;\n\n      this.childWrapper &&\n        this.childWrapper.setAttribute('style', `height: ${height}px`);\n    });\n  };\n\n  onToggle = (): void => {\n    if (this.args.forceState) {\n      this.args.onToggle?.(this.args.forceState === 'open' ? false : true);\n    } else {\n      this._opened = !this._opened;\n\n      if (this._opened && this.childWrapper) {\n        this.childWrapper.focus();\n      }\n\n      this.args.onToggle?.(this._opened);\n    }\n  };\n\n  willDestroy(): void {\n    super.willDestroy();\n\n    this.childWrapper = null;\n    this.childContent = null;\n  }\n\n  <template>\n    {{#let (argOrDefault @element \"div\") as |tagName|}}\n      {{#if tagName}}\n        {{#let\n          (element tagName) (element this.buttonElement)\n          as |Accordion ButtonElement|\n        }}\n          {{#if (and Accordion ButtonElement)}}\n            <Accordion\n              class={{classNames\n                (if this.isOpen \"euiAccordion-isOpen\")\n                componentName=\"EuiAccordion\"\n              }}\n              ...attributes\n            >\n              <div\n                class={{classNames\n                  \"euiAccordion__triggerWrapper\"\n                  @triggerClassName\n                }}\n              >\n                {{#if (eq this._arrowDisplay \"left\")}}\n                  <EuiButtonIcon\n                    class={{classNames\n                      \"euiAccordion__iconButton\"\n                      (if this.isOpen \"euiAccordion__iconButton-isOpen\")\n                      (if\n                        (eq this._arrowDisplay \"right\")\n                        \"euiAccordion__iconButton--right\"\n                      )\n                      (if @arrowProps.className @arrowProps.className)\n                    }}\n                    @iconType=\"arrowRight\"\n                    {{on \"click\" this.onToggle}}\n                    aria-controls={{@id}}\n                    aria-expanded={{this.isOpen}}\n                    tabindex={{if this.buttonElementIsFocusable \"-1\" \"0\"}}\n                  />\n                {{/if}}\n                <ButtonElement\n                  type=\"button\"\n                  id={{argOrDefault @buttonProps.id (randomId)}}\n                  class={{this.buttonClasses}}\n                  aria-controls={{@id}}\n                  aria-expanded={{this.isOpen}}\n                  aria-labelledby={{argOrDefault @buttonProps.id (randomId)}}\n                  {{on \"click\" this.onToggle}}\n                >\n                  <span class={{this.buttonContentClasses}}>\n                    {{yield this.isOpen to=\"buttonContent\"}}\n                  </span>\n                </ButtonElement>\n                {{#if\n                  (and\n                    @extraAction (has-block \"extraAction\") (not this.isLoading)\n                  )\n                }}\n                  <div class=\"euiAccordion__optionalAction\">\n                    {{yield this.isOpen to=\"extraAction\"}}\n                  </div>\n                {{else if this.isLoading}}\n                  <div class=\"euiAccordion__optionalAction\">\n                    <EuiLoadingSpinner />\n                  </div>\n                {{/if}}\n                {{#if (eq this._arrowDisplay \"right\")}}\n                  <EuiButtonIcon\n                    @color=\"text\"\n                    class={{classNames\n                      \"euiAccordion__iconButton\"\n                      (if this.isOpen \"euiAccordion__iconButton-isOpen\")\n                      (if\n                        (eq this._arrowDisplay \"right\")\n                        \"euiAccordion__iconButton--right\"\n                      )\n                      (if @arrowProps.className @arrowProps.className)\n                    }}\n                    @iconType=\"arrowRight\"\n                    {{on \"click\" this.onToggle}}\n                    aria-controls={{@id}}\n                    aria-expanded={{this.isOpen}}\n                    tabindex={{if this.buttonElementIsFocusable \"-1\" \"0\"}}\n                  />\n                {{/if}}\n              </div>\n              <div\n                class=\"euiAccordion__childWrapper\"\n                style={{this.childContentStyle}}\n                id={{@id}}\n                {{didInsert (set this \"childWrapper\")}}\n                tabindex=\"-1\"\n                role=\"region\"\n              >\n                <div\n                  class={{classNames\n                    (if this.isLoading \"euiAccordion__children-isLoading\")\n                    @childClassName\n                  }}\n                  {{didInsert\n                    (queue (set this \"childContent\") this.setChildContentHeight)\n                  }}\n                  {{resizeObserver onResize=this.setChildContentHeight}}\n                  {{didUpdate this.setChildContentHeight @forceState}}\n                >\n                  {{#if (and this.isLoading this.isLoadingMessage)}}\n                    <EuiLoadingSpinner class=\"euiAccordion__spinner\" />\n                    <span>\n                      {{#if this.hasLoadingMessage}}\n                        {{this.isLoadingMessage}}\n                      {{else}}\n                        {{! <EuiI18n @token=\"euiAccordion.isLoading\" @default=\"Loading\" /> }}\n                        Loading...\n                      {{/if}}\n                    </span>\n                  {{else}}\n                    <div\n                      class={{classNames\n                        componentName=\"EuiAccordion\"\n                        paddingSize=this.paddingSize\n                      }}\n                    >\n                      {{yield to=\"content\"}}\n                    </div>\n                  {{/if}}\n                </div>\n              </div>\n            </Accordion>\n          {{/if}}\n        {{/let}}\n      {{/if}}\n    {{/let}}\n  </template>\n}\n"],"names":["EuiAccordionComponent","Component","g","prototype","argOrDefaultDecorator","i","void 0","tracked","constructor","owner","args","_opened","forceState","initialIsOpen","buttonElement","element","buttonElementIsFocusable","_arrowDisplay","arrowDisplay","isOpen","hasLoadingMessage","isLoadingMessage","buttonClasses","buttonClassName","buttonProps","className","join","buttonContentClasses","buttonContentClassName","childContentStyle","htmlSafe","setChildContentHeight","requestAnimationFrame","height","childContent","clientHeight","childWrapper","setAttribute","onToggle","focus","willDestroy","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","and","classNames","eq","EuiButtonIcon","on","randomId","not","EuiLoadingSpinner","didInsert","set","queue","resizeObserver","didUpdate"],"mappings":"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"}
+{"version":3,"file":"eui-accordion.js","sources":["../../src/components/eui-accordion.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { on } from '@ember/modifier';\nimport didInsert from '@ember/render-modifiers/modifiers/did-insert';\nimport didUpdate from '@ember/render-modifiers/modifiers/did-update';\nimport { htmlSafe } from '@ember/template';\nimport type Owner from '@ember/owner';\n\nimport queue from '@nullvoxpopuli/ember-composable-helpers/helpers/queue';\nimport { element } from 'ember-element-helper';\nimport set from 'ember-set-helper/helpers/set';\nimport { and, eq, not } from 'ember-truth-helpers';\n\nimport randomId from '../-private/random-id.ts';\nimport argOrDefault, {\n  argOrDefaultDecorator\n} from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport resizeObserver from '../modifiers/resize-observer.ts';\nimport EuiButtonIcon from './eui-button-icon.gts';\nimport EuiLoadingSpinner from './eui-loading-spinner.gts';\n\nimport type { paddingMapping } from '../utils/css-mappings/eui-accordion.ts';\nimport type { CommonArgs } from './common.ts';\n\ntype EuiAccordionPaddingSize = keyof typeof paddingMapping;\n\ntype AccordionArgs = {\n  id?: string;\n\n  element?: 'div' | 'fieldset';\n  /**\n   * Class that will apply to the trigger for the accordion.\n   */\n  buttonClassName?: string;\n\n  buttonProps?: CommonArgs;\n\n  /**\n   * Applied to the main button receiving the `onToggle` event.\n   * Anything other than the default `button` does not support removing the arrow display (for accessibility of focus).\n   */\n  buttonElement?: 'div' | 'legend' | 'button';\n  /**\n   * Extra props to pass to the EuiButtonIcon containing the arrow.\n   */\n  arrowProps?: {\n    className?: string;\n  };\n\n  /**\n   * Class that will apply to the trigger content for the accordion.\n   */\n  buttonContentClassName?: string;\n  /**\n   * The content of the clickable trigger\n   */\n  buttonContent?: Component;\n  /**\n   * Will appear right aligned against the button. Useful for separate actions like deletions.\n   */\n  extraAction?: Component | boolean;\n  /**\n   * The accordion will start in the open state.\n   */\n  initialIsOpen?: boolean;\n  /**\n   * Optional callback method called on open and close with a single `isOpen` parameter\n   */\n  onToggle?: (isOpen: boolean) => void;\n  /**\n   * The padding around the exposed accordion content.\n   */\n  paddingSize?: EuiAccordionPaddingSize;\n  /**\n   * Placement of the arrow indicator, or 'none' to hide it.\n   */\n  arrowDisplay?: 'left' | 'right' | 'none';\n  /**\n   * Control the opening of accordion via prop\n   */\n  forceState?: 'closed' | 'open';\n  /**\n   * Change `extraAction` and children into a loading spinner\n   */\n  isLoading?: boolean;\n  /**\n   * Choose whether the loading message replaces the content. Customize the message by passing a node\n   */\n  isLoadingMessage?: boolean | Component;\n\n  isOpen?: boolean;\n\n  childClassName?: string;\n  triggerClassName?: string;\n  childContentClassName?: string;\n};\n\nexport interface EuiAccordionSignature {\n  Element: any;\n  Args: AccordionArgs;\n  Blocks: {\n    buttonContent: [boolean | undefined];\n    content: [];\n    extraAction: [boolean | undefined];\n  };\n}\n\nexport default class EuiAccordionComponent extends Component<EuiAccordionSignature> {\n  // Defaults\n  @argOrDefaultDecorator(false) isLoading!: boolean;\n  @argOrDefaultDecorator(false) isLoadingMessage!: boolean;\n  @argOrDefaultDecorator(false) initialIsOpen!: boolean;\n  @argOrDefaultDecorator('none') paddingSize!: EuiAccordionPaddingSize;\n  @argOrDefaultDecorator('left') arrowDisplay!: AccordionArgs['arrowDisplay'];\n\n  @tracked _opened;\n  @tracked childWrapper: HTMLDivElement | null = null;\n  @tracked childContent: HTMLDivElement | null = null;\n\n  constructor(owner: Owner, args: AccordionArgs) {\n    super(owner, args);\n\n    this._opened = this.args.forceState\n      ? this.args.forceState === 'open'\n      : this.args.initialIsOpen;\n  }\n\n  get buttonElement() {\n    return this.args.element === 'fieldset' ? 'legend' : 'button';\n  }\n\n  get buttonElementIsFocusable() {\n    return this.buttonElement === 'button';\n  }\n\n  get _arrowDisplay() {\n    return this.arrowDisplay === 'none' && !this.buttonElementIsFocusable\n      ? 'left'\n      : this.arrowDisplay;\n  }\n\n  get isOpen(): boolean | undefined {\n    return this.args.forceState\n      ? this.args.forceState === 'open'\n      : this._opened;\n  }\n\n  get hasLoadingMessage(): boolean {\n    return this.isLoadingMessage && this.isLoadingMessage !== true;\n  }\n\n  get buttonClasses(): string {\n    return [\n      'euiAccordion__button',\n      this.args.buttonClassName,\n      this.args.buttonProps?.className\n    ].join(' ');\n  }\n\n  get buttonContentClasses(): string {\n    return [\n      'euiAccordion__buttonContent',\n      this.args.buttonContentClassName\n    ].join(' ');\n  }\n\n  // undefined (not '') when open: a plain string bound to `style` makes\n  // Ember warn about XSS\n  get childContentStyle(): ReturnType<typeof htmlSafe> | undefined {\n    return this._opened ? undefined : htmlSafe(`height: 0px;`);\n  }\n\n  setChildContentHeight = () => {\n    const forceState = this.args.forceState;\n\n    requestAnimationFrame(() => {\n      const height =\n        this.childContent && (forceState ? forceState === 'open' : this._opened)\n          ? this.childContent.clientHeight\n          : 0;\n\n      this.childWrapper?.setAttribute('style', `height: ${height}px`);\n    });\n  };\n\n  onToggle = (): void => {\n    if (this.args.forceState) {\n      this.args.onToggle?.(this.args.forceState === 'open' ? false : true);\n    } else {\n      this._opened = !this._opened;\n\n      if (this._opened && this.childWrapper) {\n        this.childWrapper.focus();\n      }\n\n      this.args.onToggle?.(this._opened);\n    }\n  };\n\n  willDestroy(): void {\n    super.willDestroy();\n\n    this.childWrapper = null;\n    this.childContent = null;\n  }\n\n  <template>\n    {{#let (argOrDefault @element \"div\") as |tagName|}}\n      {{#if tagName}}\n        {{#let\n          (element tagName) (element this.buttonElement)\n          as |Accordion ButtonElement|\n        }}\n          {{#if (and Accordion ButtonElement)}}\n            <Accordion\n              class={{classNames\n                (if this.isOpen \"euiAccordion-isOpen\")\n                componentName=\"EuiAccordion\"\n              }}\n              ...attributes\n            >\n              <div\n                class={{classNames\n                  \"euiAccordion__triggerWrapper\"\n                  @triggerClassName\n                }}\n              >\n                {{#if (eq this._arrowDisplay \"left\")}}\n                  <EuiButtonIcon\n                    class={{classNames\n                      \"euiAccordion__iconButton\"\n                      (if this.isOpen \"euiAccordion__iconButton-isOpen\")\n                      (if\n                        (eq this._arrowDisplay \"right\")\n                        \"euiAccordion__iconButton--right\"\n                      )\n                      (if @arrowProps.className @arrowProps.className)\n                    }}\n                    @iconType=\"arrowRight\"\n                    {{on \"click\" this.onToggle}}\n                    aria-controls={{@id}}\n                    aria-expanded={{if this.isOpen \"true\" \"false\"}}\n                    tabindex={{if this.buttonElementIsFocusable \"-1\" \"0\"}}\n                  />\n                {{/if}}\n                <ButtonElement\n                  type=\"button\"\n                  id={{argOrDefault @buttonProps.id (randomId)}}\n                  class={{this.buttonClasses}}\n                  aria-controls={{@id}}\n                  aria-expanded={{if this.isOpen \"true\" \"false\"}}\n                  aria-labelledby={{argOrDefault @buttonProps.id (randomId)}}\n                  {{on \"click\" this.onToggle}}\n                >\n                  <span class={{this.buttonContentClasses}}>\n                    {{yield this.isOpen to=\"buttonContent\"}}\n                  </span>\n                </ButtonElement>\n                {{#if\n                  (and\n                    @extraAction (has-block \"extraAction\") (not this.isLoading)\n                  )\n                }}\n                  <div class=\"euiAccordion__optionalAction\">\n                    {{yield this.isOpen to=\"extraAction\"}}\n                  </div>\n                {{else if this.isLoading}}\n                  <div class=\"euiAccordion__optionalAction\">\n                    <EuiLoadingSpinner />\n                  </div>\n                {{/if}}\n                {{#if (eq this._arrowDisplay \"right\")}}\n                  <EuiButtonIcon\n                    @color=\"text\"\n                    class={{classNames\n                      \"euiAccordion__iconButton\"\n                      (if this.isOpen \"euiAccordion__iconButton-isOpen\")\n                      (if\n                        (eq this._arrowDisplay \"right\")\n                        \"euiAccordion__iconButton--right\"\n                      )\n                      (if @arrowProps.className @arrowProps.className)\n                    }}\n                    @iconType=\"arrowRight\"\n                    {{on \"click\" this.onToggle}}\n                    aria-controls={{@id}}\n                    aria-expanded={{if this.isOpen \"true\" \"false\"}}\n                    tabindex={{if this.buttonElementIsFocusable \"-1\" \"0\"}}\n                  />\n                {{/if}}\n              </div>\n              <div\n                class=\"euiAccordion__childWrapper\"\n                style={{this.childContentStyle}}\n                id={{@id}}\n                {{didInsert (set this \"childWrapper\")}}\n                tabindex=\"-1\"\n                role=\"region\"\n              >\n                <div\n                  class={{classNames\n                    (if this.isLoading \"euiAccordion__children-isLoading\")\n                    @childClassName\n                  }}\n                  {{didInsert\n                    (queue (set this \"childContent\") this.setChildContentHeight)\n                  }}\n                  {{resizeObserver onResize=this.setChildContentHeight}}\n                  {{didUpdate this.setChildContentHeight @forceState}}\n                >\n                  {{#if (and this.isLoading this.isLoadingMessage)}}\n                    <EuiLoadingSpinner class=\"euiAccordion__spinner\" />\n                    <span>\n                      {{#if this.hasLoadingMessage}}\n                        {{this.isLoadingMessage}}\n                      {{else}}\n                        {{! <EuiI18n @token=\"euiAccordion.isLoading\" @default=\"Loading\" /> }}\n                        Loading...\n                      {{/if}}\n                    </span>\n                  {{else}}\n                    <div\n                      class={{classNames\n                        componentName=\"EuiAccordion\"\n                        paddingSize=this.paddingSize\n                      }}\n                    >\n                      {{yield to=\"content\"}}\n                    </div>\n                  {{/if}}\n                </div>\n              </div>\n            </Accordion>\n          {{/if}}\n        {{/let}}\n      {{/if}}\n    {{/let}}\n  </template>\n}\n"],"names":["EuiAccordionComponent","Component","g","prototype","argOrDefaultDecorator","i","tracked","constructor","owner","args","_opened","forceState","initialIsOpen","buttonElement","element","buttonElementIsFocusable","_arrowDisplay","arrowDisplay","isOpen","hasLoadingMessage","isLoadingMessage","buttonClasses","buttonClassName","buttonProps","className","join","buttonContentClasses","buttonContentClassName","childContentStyle","undefined","htmlSafe","setChildContentHeight","requestAnimationFrame","height","childContent","clientHeight","childWrapper","setAttribute","onToggle","focus","willDestroy","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","and","classNames","eq","EuiButtonIcon","on","randomId","not","EuiLoadingSpinner","didInsert","set","queue","resizeObserver","didUpdate"],"mappings":"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"}

package/dist/components/eui-auto-sizer.js

@@ -5,7 +5,7 @@ import style from 'ember-style-modifier/modifiers/style';
 import createDetectElementResize from '../utils/detect-element-resize.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import { g, i } from 'decorator-transforms/runtime';
+import { g, i } from 'decorator-transforms/runtime-esm';
 
 class EuiAutoSizerComponent extends Component {
   _autoSizer;
@@ -27,7 +27,7 @@ class EuiAutoSizerComponent extends Component {
     return this.args.disableWidth ?? false;
   }
   get style() {
-    let style = {
+    const style = {
       outerStyle: {
         overflow: 'visible'
       },
@@ -108,7 +108,7 @@ class EuiAutoSizerComponent extends Component {
     this._detectElementResize = undefined;
   }
   static {
-    setComponentTemplate(precompileTemplate("\n    <div {{didInsert this.setRef}} {{style this.style.outerStyle}} ...attributes>\n      {{yield this.style.childStyle}}\n    </div>\n  ", {
+    setComponentTemplate(precompileTemplate("<div {{didInsert this.setRef}} {{style this.style.outerStyle}} ...attributes>\n  {{yield this.style.childStyle}}\n</div>", {
       strictMode: true,
       scope: () => ({
         didInsert,

package/dist/components/eui-auto-sizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-auto-sizer.js","sources":["../../src/components/eui-auto-sizer.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport didInsert from '@ember/render-modifiers/modifiers/did-insert';\n\nimport style from 'ember-style-modifier/modifiers/style';\n\nimport createDetectElementResize from '../utils/detect-element-resize';\n\ntype Size = {\n  height: number;\n  width: number;\n};\n\ninterface EuiAutoSizerComponentArgs {\n  /** Function responsible for rendering children.*/\n\n  /** Optional custom CSS class name to attach to root AutoSizer element.  */\n  className?: string;\n\n  /** Default height to use for initial render; useful for SSR */\n  defaultHeight?: number;\n\n  /** Default width to use for initial render; useful for SSR */\n  defaultWidth?: number;\n\n  /** Disable dynamic :height property */\n  disableHeight?: boolean;\n\n  /** Disable dynamic :width property */\n  disableWidth?: boolean;\n\n  /** Nonce of the inlined stylesheet for Content Security Policy */\n  nonce?: string;\n\n  /** Callback to be invoked on-resize */\n  onResize?: (size: Size) => void;\n\n  /** Optional inline style */\n  style?: Record<string, string>;\n}\n\ntype ResizeHandler = (element: HTMLElement, onResize: () => void) => void;\n\ntype DetectElementResize = {\n  addResizeListener: ResizeHandler;\n  removeResizeListener: ResizeHandler;\n};\n\ntype DynamicStyle = {\n  outerStyle: {\n    height?: number | string;\n    width?: number | string;\n    overflow?: string;\n  };\n  childStyle?: {\n    height?: number | string;\n    width?: number | string;\n  };\n};\n\nexport interface EuiAutoSizerSignature {\n  Args: EuiAutoSizerComponentArgs;\n  Element: HTMLDivElement;\n  Blocks: {\n    default: [DynamicStyle['childStyle']];\n  };\n}\n\nexport default class EuiAutoSizerComponent extends Component<EuiAutoSizerSignature> {\n  _autoSizer?: HTMLElement;\n  _parentNode?: HTMLElement;\n  _window?: any; // uses any instead of Window because Flow doesn't have window type\n  _detectElementResize?: DetectElementResize;\n\n  @tracked height: number | undefined;\n  @tracked width: number | undefined;\n\n  get disableHeight() {\n    return this.args.disableHeight ?? false;\n  }\n\n  get disableWidth() {\n    return this.args.disableWidth ?? false;\n  }\n\n  get style() {\n    let style: DynamicStyle = {\n      outerStyle: { overflow: 'visible' },\n      childStyle: {}\n    };\n\n    if (!this.disableHeight) {\n      style.outerStyle.height = `0px`;\n\n      if (style.childStyle) {\n        style.childStyle.height = `${this.height}px`;\n      }\n    }\n\n    if (!this.disableWidth) {\n      style.outerStyle.width = `0px`;\n\n      if (style.childStyle) {\n        style.childStyle.width = `${this.width}px`;\n      }\n    }\n\n    return style;\n  }\n\n  setup() {\n    const { nonce } = this.args;\n\n    if (\n      this._autoSizer &&\n      this._autoSizer.parentNode &&\n      this._autoSizer.parentNode.ownerDocument &&\n      this._autoSizer.parentNode.ownerDocument.defaultView &&\n      this._autoSizer.parentNode instanceof\n        this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement\n    ) {\n      // Delay access of parentNode until mount.\n      // This handles edge-cases where the component has already been unmounted before its ref has been set,\n      // As well as libraries like react-lite which have a slightly different lifecycle.\n      this._parentNode = this._autoSizer.parentNode;\n      this._window = this._autoSizer.parentNode.ownerDocument.defaultView;\n\n      // Defer requiring resize handler in order to support server-side rendering.\n      // See issue #41\n      this._detectElementResize = createDetectElementResize(\n        nonce,\n        this._window\n      );\n      this._detectElementResize?.addResizeListener(\n        this._parentNode,\n        this._onResize\n      );\n\n      this._onResize();\n    }\n  }\n\n  _onResize = () => {\n    const { disableHeight, disableWidth } = this;\n\n    if (this._parentNode) {\n      // Guard against AutoSizer component being removed from the DOM immediately after being added.\n      // This can result in invalid style values which can result in NaN values if we don't handle them.\n      // See issue #150 for more context.\n\n      const height = this._parentNode.offsetHeight || 0;\n      const width = this._parentNode.offsetWidth || 0;\n\n      const win = this._window || window;\n      const style = win.getComputedStyle(this._parentNode) || {};\n      const paddingLeft = parseInt(style.paddingLeft, 10) || 0;\n      const paddingRight = parseInt(style.paddingRight, 10) || 0;\n      const paddingTop = parseInt(style.paddingTop, 10) || 0;\n      const paddingBottom = parseInt(style.paddingBottom, 10) || 0;\n\n      const newHeight = height - paddingTop - paddingBottom;\n      const newWidth = width - paddingLeft - paddingRight;\n\n      if (\n        (!disableHeight && this.height !== newHeight) ||\n        (!disableWidth && this.width !== newWidth)\n      ) {\n        this.height = height - paddingTop - paddingBottom;\n        this.width = width - paddingLeft - paddingRight;\n\n        this.args.onResize?.({ height, width });\n      }\n    }\n  };\n\n  setRef = (ele: HTMLElement) => {\n    this._autoSizer = ele;\n    this.setup();\n  };\n\n  willDestroy(): void {\n    super.willDestroy();\n\n    if (this._detectElementResize && this._parentNode) {\n      this._detectElementResize.removeResizeListener(\n        this._parentNode,\n        this._onResize\n      );\n    }\n\n    this._autoSizer = undefined;\n    this._parentNode = undefined;\n    this._window = undefined;\n    this._detectElementResize = undefined;\n  }\n\n  <template>\n    <div\n      {{didInsert this.setRef}}\n      {{style this.style.outerStyle}}\n      ...attributes\n    >\n      {{yield this.style.childStyle}}\n    </div>\n  </template>\n}\n"],"names":["EuiAutoSizerComponent","Component","_autoSizer","_parentNode","_window","_detectElementResize","g","prototype","tracked","i","void 0","disableHeight","args","disableWidth","style","outerStyle","overflow","childStyle","height","width","setup","nonce","parentNode","ownerDocument","defaultView","HTMLElement","createDetectElementResize","addResizeListener","_onResize","offsetHeight","offsetWidth","win","window","getComputedStyle","paddingLeft","parseInt","paddingRight","paddingTop","paddingBottom","newHeight","newWidth","onResize","setRef","ele","willDestroy","removeResizeListener","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","didInsert"],"mappings":"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"}
+{"version":3,"file":"eui-auto-sizer.js","sources":["../../src/components/eui-auto-sizer.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport didInsert from '@ember/render-modifiers/modifiers/did-insert';\n\nimport style from 'ember-style-modifier/modifiers/style';\n\nimport createDetectElementResize from '../utils/detect-element-resize.js';\n\ntype Size = {\n  height: number;\n  width: number;\n};\n\ninterface EuiAutoSizerComponentArgs {\n  /** Function responsible for rendering children.*/\n\n  /** Optional custom CSS class name to attach to root AutoSizer element.  */\n  className?: string;\n\n  /** Default height to use for initial render; useful for SSR */\n  defaultHeight?: number;\n\n  /** Default width to use for initial render; useful for SSR */\n  defaultWidth?: number;\n\n  /** Disable dynamic :height property */\n  disableHeight?: boolean;\n\n  /** Disable dynamic :width property */\n  disableWidth?: boolean;\n\n  /** Nonce of the inlined stylesheet for Content Security Policy */\n  nonce?: string;\n\n  /** Callback to be invoked on-resize */\n  onResize?: (size: Size) => void;\n\n  /** Optional inline style */\n  style?: Record<string, string>;\n}\n\ntype ResizeHandler = (element: HTMLElement, onResize: () => void) => void;\n\ntype DetectElementResize = {\n  addResizeListener: ResizeHandler;\n  removeResizeListener: ResizeHandler;\n};\n\ntype DynamicStyle = {\n  outerStyle: {\n    height?: number | string;\n    width?: number | string;\n    overflow?: string;\n  };\n  childStyle?: {\n    height?: number | string;\n    width?: number | string;\n  };\n};\n\nexport interface EuiAutoSizerSignature {\n  Args: EuiAutoSizerComponentArgs;\n  Element: HTMLDivElement;\n  Blocks: {\n    default: [DynamicStyle['childStyle']];\n  };\n}\n\nexport default class EuiAutoSizerComponent extends Component<EuiAutoSizerSignature> {\n  _autoSizer?: HTMLElement;\n  _parentNode?: HTMLElement;\n  _window?: any; // uses any instead of Window because Flow doesn't have window type\n  _detectElementResize?: DetectElementResize;\n\n  @tracked height: number | undefined;\n  @tracked width: number | undefined;\n\n  get disableHeight() {\n    return this.args.disableHeight ?? false;\n  }\n\n  get disableWidth() {\n    return this.args.disableWidth ?? false;\n  }\n\n  get style() {\n    const style: DynamicStyle = {\n      outerStyle: { overflow: 'visible' },\n      childStyle: {}\n    };\n\n    if (!this.disableHeight) {\n      style.outerStyle.height = `0px`;\n\n      if (style.childStyle) {\n        style.childStyle.height = `${this.height}px`;\n      }\n    }\n\n    if (!this.disableWidth) {\n      style.outerStyle.width = `0px`;\n\n      if (style.childStyle) {\n        style.childStyle.width = `${this.width}px`;\n      }\n    }\n\n    return style;\n  }\n\n  setup() {\n    const { nonce } = this.args;\n\n    if (\n      this._autoSizer &&\n      this._autoSizer.parentNode &&\n      this._autoSizer.parentNode.ownerDocument &&\n      this._autoSizer.parentNode.ownerDocument.defaultView &&\n      this._autoSizer.parentNode instanceof\n        this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement\n    ) {\n      // Delay access of parentNode until mount.\n      // This handles edge-cases where the component has already been unmounted before its ref has been set,\n      // As well as libraries like react-lite which have a slightly different lifecycle.\n      this._parentNode = this._autoSizer.parentNode;\n      this._window = this._autoSizer.parentNode.ownerDocument.defaultView;\n\n      // Defer requiring resize handler in order to support server-side rendering.\n      // See issue #41\n      this._detectElementResize = createDetectElementResize(\n        nonce,\n        this._window\n      );\n      this._detectElementResize?.addResizeListener(\n        this._parentNode,\n        this._onResize\n      );\n\n      this._onResize();\n    }\n  }\n\n  _onResize = () => {\n    const { disableHeight, disableWidth } = this;\n\n    if (this._parentNode) {\n      // Guard against AutoSizer component being removed from the DOM immediately after being added.\n      // This can result in invalid style values which can result in NaN values if we don't handle them.\n      // See issue #150 for more context.\n\n      const height = this._parentNode.offsetHeight || 0;\n      const width = this._parentNode.offsetWidth || 0;\n\n      const win = this._window || window;\n      const style = win.getComputedStyle(this._parentNode) || {};\n      const paddingLeft = parseInt(style.paddingLeft, 10) || 0;\n      const paddingRight = parseInt(style.paddingRight, 10) || 0;\n      const paddingTop = parseInt(style.paddingTop, 10) || 0;\n      const paddingBottom = parseInt(style.paddingBottom, 10) || 0;\n\n      const newHeight = height - paddingTop - paddingBottom;\n      const newWidth = width - paddingLeft - paddingRight;\n\n      if (\n        (!disableHeight && this.height !== newHeight) ||\n        (!disableWidth && this.width !== newWidth)\n      ) {\n        this.height = height - paddingTop - paddingBottom;\n        this.width = width - paddingLeft - paddingRight;\n\n        this.args.onResize?.({ height, width });\n      }\n    }\n  };\n\n  setRef = (ele: HTMLElement) => {\n    this._autoSizer = ele;\n    this.setup();\n  };\n\n  willDestroy(): void {\n    super.willDestroy();\n\n    if (this._detectElementResize && this._parentNode) {\n      this._detectElementResize.removeResizeListener(\n        this._parentNode,\n        this._onResize\n      );\n    }\n\n    this._autoSizer = undefined;\n    this._parentNode = undefined;\n    this._window = undefined;\n    this._detectElementResize = undefined;\n  }\n\n  <template>\n    <div\n      {{didInsert this.setRef}}\n      {{style this.style.outerStyle}}\n      ...attributes\n    >\n      {{yield this.style.childStyle}}\n    </div>\n  </template>\n}\n"],"names":["EuiAutoSizerComponent","Component","_autoSizer","_parentNode","_window","_detectElementResize","g","prototype","tracked","i","disableHeight","args","disableWidth","style","outerStyle","overflow","childStyle","height","width","setup","nonce","parentNode","ownerDocument","defaultView","HTMLElement","createDetectElementResize","addResizeListener","_onResize","offsetHeight","offsetWidth","win","window","getComputedStyle","paddingLeft","parseInt","paddingRight","paddingTop","paddingBottom","newHeight","newWidth","onResize","setRef","ele","willDestroy","removeResizeListener","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","didInsert"],"mappings":"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"}

package/dist/components/eui-avatar.js

@@ -10,7 +10,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiAvatar = setComponentTemplate(precompileTemplate("\n  {{#let (inlineStyles componentName=\"EuiAvatar\" componentArgs=(hash name=@name color=@color iconColor=@iconColor iconSize=@iconSize iconType=@iconType imageUrl=@imageUrl initials=@initials)) as |inlineStyles|}}\n    <div class={{classNames (if @isDisabled \"euiAvatar-isDisabled\") (if (eq @color \"plain\") \"euiAvatar--plain\") componentName=\"EuiAvatar\" size=(argOrDefault @size \"m\") type=(argOrDefault @type \"user\")}} aria-label={{if @isDisabled undefined @name}} title={{@name}} role={{if @isDisabled \"presentation\" \"img\"}} ...attributes {{simpleStyle inlineStyles}}>\n      {{#if (and (not @imageUrl) (not @iconType))}}\n        <span aria-hidden=\"true\">\n          {{#if @name}}\n            {{toInitials @name @initialLength @initials}}\n          {{/if}}\n        </span>\n      {{else if @iconType}}\n        <EuiIcon @iconClasses=\"euiAvatar__icon\" @size={{or @iconSize @size}} @type={{@iconType}} aria-label={{@name}} role={{if @isDisabled \"presentation\" \"img\"}} @color={{or @iconColor (if (eq @iconColor null) @iconColor (get inlineStyles \"color\"))}} />\n      {{/if}}\n    </div>\n  {{/let}}\n", {
+const EuiAvatar = setComponentTemplate(precompileTemplate("{{#let (inlineStyles componentName=\"EuiAvatar\" componentArgs=(hash name=@name color=@color iconColor=@iconColor iconSize=@iconSize iconType=@iconType imageUrl=@imageUrl initials=@initials)) as |inlineStyles|}}\n  <div class={{classNames (if @isDisabled \"euiAvatar-isDisabled\") (if (eq @color \"plain\") \"euiAvatar--plain\") componentName=\"EuiAvatar\" size=(argOrDefault @size \"m\") type=(argOrDefault @type \"user\")}} aria-label={{if @isDisabled undefined @name}} title={{@name}} role={{if @isDisabled \"presentation\" \"img\"}} ...attributes {{simpleStyle inlineStyles}}>\n    {{#if (and (not @imageUrl) (not @iconType))}}\n      <span aria-hidden=\"true\">\n        {{#if @name}}\n          {{toInitials @name @initialLength @initials}}\n        {{/if}}\n      </span>\n    {{else if @iconType}}\n      <EuiIcon @iconClasses=\"euiAvatar__icon\" @size={{or @iconSize @size}} @type={{@iconType}} aria-label={{@name}} role={{if @isDisabled \"presentation\" \"img\"}} @color={{or @iconColor (if (eq @iconColor null) @iconColor (get inlineStyles \"color\"))}} />\n    {{/if}}\n  </div>\n{{/let}}", {
   strictMode: true,
   scope: () => ({
     inlineStyles,

package/dist/components/eui-avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-avatar.js","sources":["../../src/components/eui-avatar.gts"],"sourcesContent":["import { get,hash } from '@ember/helper';\n\nimport { and, eq,not, or } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport inlineStyles from '../helpers/inline-styles.ts';\nimport { toInitials } from '../helpers/to-initials.ts';\nimport simpleStyle from '../modifiers/simple-style.ts';\nimport EuiIcon from './eui-icon.gts';\n\nimport type { sizeMapping, typeMapping } from '../utils/css-mappings/eui-avatar.ts';\nimport type { EuiIconSignature } from './eui-icon';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiAvatarSignature {\n  Element: HTMLDivElement;\n  Args: {\n    name?: string;\n    color?: EuiIconSignature['Args']['color'];\n    iconColor?: string;\n    iconSize?: EuiIconSignature['Args']['size'];\n    iconType?: EuiIconSignature['Args']['type'];\n    imageUrl?: string;\n    initials?: string;\n    isDisabled?: boolean;\n    size?: keyof typeof sizeMapping;\n    type?: keyof typeof typeMapping;\n    initialLength?: 1 | 2;\n  };\n}\n\nconst EuiAvatar: TemplateOnlyComponent<EuiAvatarSignature> = <template>\n  {{#let\n    (inlineStyles\n      componentName=\"EuiAvatar\"\n      componentArgs=(hash\n        name=@name\n        color=@color\n        iconColor=@iconColor\n        iconSize=@iconSize\n        iconType=@iconType\n        imageUrl=@imageUrl\n        initials=@initials\n      )\n    )\n    as |inlineStyles|\n  }}\n    <div\n      class={{classNames\n        (if @isDisabled \"euiAvatar-isDisabled\")\n        (if (eq @color \"plain\") \"euiAvatar--plain\")\n        componentName=\"EuiAvatar\"\n        size=(argOrDefault @size \"m\")\n        type=(argOrDefault @type \"user\")\n      }}\n      aria-label={{if @isDisabled undefined @name}}\n      title={{@name}}\n      role={{if @isDisabled \"presentation\" \"img\"}}\n      ...attributes\n      {{simpleStyle inlineStyles}}\n    >\n      {{#if (and (not @imageUrl) (not @iconType))}}\n        <span aria-hidden=\"true\">\n          {{#if @name}}\n            {{toInitials @name @initialLength @initials}}\n          {{/if}}\n        </span>\n      {{else if @iconType}}\n        <EuiIcon\n          @iconClasses=\"euiAvatar__icon\"\n          @size={{or @iconSize @size}}\n          @type={{@iconType}}\n          aria-label={{@name}}\n          role={{if @isDisabled \"presentation\" \"img\"}}\n          @color={{or\n            @iconColor\n            (if (eq @iconColor null) @iconColor (get inlineStyles \"color\"))\n          }}\n        />\n      {{/if}}\n    </div>\n  {{/let}}\n</template>;\n\nexport default EuiAvatar;\n"],"names":["EuiAvatar","setComponentTemplate","precompileTemplate","strictMode","scope","inlineStyles","hash","classNames","eq","argOrDefault","simpleStyle","and","not","toInitials","EuiIcon","or","get","templateOnly"],"mappings":";;;;;;;;;;;;AAgCA,MAAMA,SAAuD,GAAAC,oBAAA,CAAAC,kBAAA,CAmD7D,4mCAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,YAAA;IAAAC,IAAA;IAAAC,UAAA;IAAAC,EAAA;IAAAC,YAAA;IAAAC,WAAA;IAAAC,GAAA;IAAAC,GAAA;IAAAC,UAAA;IAAAC,OAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-avatar.js","sources":["../../src/components/eui-avatar.gts"],"sourcesContent":["import { get,hash } from '@ember/helper';\n\nimport { and, eq,not, or } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport inlineStyles from '../helpers/inline-styles.ts';\nimport { toInitials } from '../helpers/to-initials.ts';\nimport simpleStyle from '../modifiers/simple-style.ts';\nimport EuiIcon from './eui-icon.gts';\n\nimport type { sizeMapping, typeMapping } from '../utils/css-mappings/eui-avatar.ts';\nimport type { EuiIconSignature } from './eui-icon';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiAvatarSignature {\n  Element: HTMLDivElement;\n  Args: {\n    name?: string;\n    color?: EuiIconSignature['Args']['color'];\n    iconColor?: string;\n    iconSize?: EuiIconSignature['Args']['size'];\n    iconType?: EuiIconSignature['Args']['type'];\n    imageUrl?: string;\n    initials?: string;\n    isDisabled?: boolean;\n    size?: keyof typeof sizeMapping;\n    type?: keyof typeof typeMapping;\n    initialLength?: 1 | 2;\n  };\n}\n\nconst EuiAvatar: TemplateOnlyComponent<EuiAvatarSignature> = <template>\n  {{#let\n    (inlineStyles\n      componentName=\"EuiAvatar\"\n      componentArgs=(hash\n        name=@name\n        color=@color\n        iconColor=@iconColor\n        iconSize=@iconSize\n        iconType=@iconType\n        imageUrl=@imageUrl\n        initials=@initials\n      )\n    )\n    as |inlineStyles|\n  }}\n    <div\n      class={{classNames\n        (if @isDisabled \"euiAvatar-isDisabled\")\n        (if (eq @color \"plain\") \"euiAvatar--plain\")\n        componentName=\"EuiAvatar\"\n        size=(argOrDefault @size \"m\")\n        type=(argOrDefault @type \"user\")\n      }}\n      aria-label={{if @isDisabled undefined @name}}\n      title={{@name}}\n      role={{if @isDisabled \"presentation\" \"img\"}}\n      ...attributes\n      {{simpleStyle inlineStyles}}\n    >\n      {{#if (and (not @imageUrl) (not @iconType))}}\n        <span aria-hidden=\"true\">\n          {{#if @name}}\n            {{toInitials @name @initialLength @initials}}\n          {{/if}}\n        </span>\n      {{else if @iconType}}\n        <EuiIcon\n          @iconClasses=\"euiAvatar__icon\"\n          @size={{or @iconSize @size}}\n          @type={{@iconType}}\n          aria-label={{@name}}\n          role={{if @isDisabled \"presentation\" \"img\"}}\n          @color={{or\n            @iconColor\n            (if (eq @iconColor null) @iconColor (get inlineStyles \"color\"))\n          }}\n        />\n      {{/if}}\n    </div>\n  {{/let}}\n</template>;\n\nexport default EuiAvatar;\n"],"names":["EuiAvatar","setComponentTemplate","precompileTemplate","strictMode","scope","inlineStyles","hash","classNames","eq","argOrDefault","simpleStyle","and","not","toInitials","EuiIcon","or","get","templateOnly"],"mappings":";;;;;;;;;;;;AAgCA,MAAMA,SAAuD,GAAAC,oBAAA,CAAAC,kBAAA,CAmD7D,8kCAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,YAAA;IAAAC,IAAA;IAAAC,UAAA;IAAAC,EAAA;IAAAC,YAAA;IAAAC,WAAA;IAAAC,GAAA;IAAAC,GAAA;IAAAC,UAAA;IAAAC,OAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}

package/dist/components/eui-badge-group.js

@@ -5,10 +5,10 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const BadgeGroupItem = setComponentTemplate(precompileTemplate("\n  <span class=\"euiBadgeGroup__item\">\n    {{yield}}\n  </span>\n", {
+const BadgeGroupItem = setComponentTemplate(precompileTemplate("<span class=\"euiBadgeGroup__item\">\n  {{yield}}\n</span>", {
   strictMode: true
 }), templateOnly());
-const EuiBadgeGroup = setComponentTemplate(precompileTemplate("\n  <div class={{classNames componentName=\"EuiBadgeGroup\" gutterSize=(argOrDefault @gutterSize \"xs\")}} ...attributes>\n    {{yield (hash item=BadgeGroupItem)}}\n  </div>\n", {
+const EuiBadgeGroup = setComponentTemplate(precompileTemplate("<div class={{classNames componentName=\"EuiBadgeGroup\" gutterSize=(argOrDefault @gutterSize \"xs\")}} ...attributes>\n  {{yield (hash item=BadgeGroupItem)}}\n</div>", {
   strictMode: true,
   scope: () => ({
     classNames,

package/dist/components/eui-badge-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-badge-group.js","sources":["../../src/components/eui-badge-group.gts"],"sourcesContent":["import { hash } from '@ember/helper';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\n\nimport type { gutterSize } from '../utils/css-mappings/eui-badge-group.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nconst BadgeGroupItem: TemplateOnlyComponent<{\n  Blocks: {\n    default: [];\n  };\n}> = <template>\n  <span class=\"euiBadgeGroup__item\">\n    {{yield}}\n  </span>\n</template>;\n\nexport interface EuiBadgeGroupSignature {\n  Element: HTMLDivElement;\n  Args: {\n    gutterSize: keyof typeof gutterSize;\n  };\n  Blocks: {\n    default: [\n      {\n        item: typeof BadgeGroupItem;\n      }\n    ];\n  };\n}\n\nconst EuiBadgeGroup: TemplateOnlyComponent<EuiBadgeGroupSignature> = <template>\n  <div\n    class={{classNames\n      componentName=\"EuiBadgeGroup\"\n      gutterSize=(argOrDefault @gutterSize \"xs\")\n    }}\n    ...attributes\n  >\n    {{yield (hash item=BadgeGroupItem)}}\n  </div>\n</template>;\n\nexport default EuiBadgeGroup;\n"],"names":["BadgeGroupItem","setComponentTemplate","precompileTemplate","strictMode","templateOnly","EuiBadgeGroup","scope","classNames","argOrDefault","hash"],"mappings":";;;;;;;AAQA,MAAMA,cAID,GAAAC,oBAAA,CAAAC,kBAAA,CAIL,sEAAA,EAAA;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA,CAAA;AAgBV,MAAMC,aAA+D,GAAAJ,oBAAA,CAAAC,kBAAA,CAUrE,iLAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAG,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,YAAA;IAAAC,IAAA;AAAAT,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAI,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-badge-group.js","sources":["../../src/components/eui-badge-group.gts"],"sourcesContent":["import { hash } from '@ember/helper';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\n\nimport type { gutterSize } from '../utils/css-mappings/eui-badge-group.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nconst BadgeGroupItem: TemplateOnlyComponent<{\n  Blocks: {\n    default: [];\n  };\n}> = <template>\n  <span class=\"euiBadgeGroup__item\">\n    {{yield}}\n  </span>\n</template>;\n\nexport interface EuiBadgeGroupSignature {\n  Element: HTMLDivElement;\n  Args: {\n    gutterSize: keyof typeof gutterSize;\n  };\n  Blocks: {\n    default: [\n      {\n        item: typeof BadgeGroupItem;\n      }\n    ];\n  };\n}\n\nconst EuiBadgeGroup: TemplateOnlyComponent<EuiBadgeGroupSignature> = <template>\n  <div\n    class={{classNames\n      componentName=\"EuiBadgeGroup\"\n      gutterSize=(argOrDefault @gutterSize \"xs\")\n    }}\n    ...attributes\n  >\n    {{yield (hash item=BadgeGroupItem)}}\n  </div>\n</template>;\n\nexport default EuiBadgeGroup;\n"],"names":["BadgeGroupItem","setComponentTemplate","precompileTemplate","strictMode","templateOnly","EuiBadgeGroup","scope","classNames","argOrDefault","hash"],"mappings":";;;;;;;AAQA,MAAMA,cAID,GAAAC,oBAAA,CAAAC,kBAAA,CAIL,4DAAA,EAAA;EAAAC,UAAA,EAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA,CAAA;AAgBV,MAAMC,aAA+D,GAAAJ,oBAAA,CAAAC,kBAAA,CAUrE,uKAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAG,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,YAAA;IAAAC,IAAA;AAAAT,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAI,YAAA,EAAA;;;;"}

package/dist/components/eui-badge.js

@@ -11,7 +11,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiBadge = setComponentTemplate(precompileTemplate("\n  {{#if (and (or @onClick @href) (not @iconType))}}\n    {{#if @onClick}}\n      <button type=\"button\" class={{classNames \"euiBadge-isClickable\" (if @isDisabled \"euiBadge-isDisabled\") componentName=\"EuiBadge\" color=(argOrDefault @color \"default\")}} aria-label={{@onClickAriaLabel}} disabled={{@isDisabled}} ...attributes {{simpleStyle (inlineStyles componentName=\"EuiBadge\" componentArgs=(hash badgeColor=(argOrDefault @color \"default\")))}} {{on \"click\" (optional @onClick)}}>\n        <span class=\"euiBadge__content\">\n          <span class=\"euiBadge__text\">\n            {{yield}}\n          </span>\n        </span>\n      </button>\n    {{else}}\n      <a class={{classNames \"euiBadge-isClickable\" (if @isDisabled \"euiBadge-isDisabled\") componentName=\"EuiBadge\" color=(argOrDefault @color \"default\")}} target={{@target}} href={{@href}} aria-label={{if @onClick @onClickAriaLabel}} disabled={{@isDisabled}} ...attributes {{simpleStyle (inlineStyles componentName=\"EuiBadge\" componentArgs=(hash badgeColor=(argOrDefault @color \"default\")))}}>\n        <span class=\"euiBadge__content\">\n          <span class=\"euiBadge__text\">\n            {{yield}}\n          </span>\n        </span>\n      </a>\n    {{/if}}\n  {{else if @iconType}}\n    <span class={{classNames (if @isDisabled \"euiBadge-isDisabled\") componentName=\"EuiBadge\" iconSide=(argOrDefault @iconSide \"left\") color=(argOrDefault @color \"default\")}} ...attributes {{simpleStyle (inlineStyles componentName=\"EuiBadge\" componentArgs=(hash badgeColor=(argOrDefault @color \"default\")))}}>\n      <span class=\"euiBadge__content\">\n        {{#if (has-block)}}\n          {{#if @onClick}}\n            <button class=\"euiBadge__childButton\" type=\"button\" disabled={{@isDisabled}} {{on \"click\" (optional @onClick)}}>\n              {{yield}}\n            </button>\n          {{else if @href}}\n            <a class=\"euiBadge__childButton\" href={{@href}} disabled={{@isDisabled}}>\n              {{yield}}\n            </a>\n          {{else}}\n            <span class=\"euiBadge__text\">\n              {{yield}}\n            </span>\n          {{/if}}\n        {{/if}}\n        {{#if @iconOnClick}}\n          {{!-- template-lint-disable --}}\n          <button type=\"button\" class=\"euiBadge__iconButton\" aria-label={{@iconOnClickAriaLabel}} disabled={{@isDisabled}} title={{@iconOnClickAriaLabel}} tabindex={{@closeButtonProps.tabIndex}} data-selected-index={{@closeButtonProps.dataSelectedIconIndex}} {{on \"click\" (optional @iconOnClick)}}>\n            <EuiIcon @color=\"inherit\" @iconClasses={{classNames \"euiBadge__icon\" @closeButtonProps.iconClasses}} @type={{@iconType}} @useSvg={{@iconUseSvg}} @size={{if (has-block) \"s\" \"m\"}} />\n          </button>\n          {{!-- tempalte-lint-enable--}}\n        {{else}}\n          <EuiIcon @color=\"inherit\" @type={{@iconType}} @useSvg={{@iconUseSvg}} @size={{if (has-block) \"s\" \"m\"}} @iconClasses=\"euiBadge__icon\" />\n        {{/if}}\n      </span>\n    </span>\n  {{else}}\n    <span class={{classNames (if @isDisabled \"euiBadge-isDisabled\") componentName=\"EuiBadge\" iconSide=(argOrDefault @iconSide \"left\") color=(argOrDefault @color \"default\")}} ...attributes {{simpleStyle (inlineStyles componentName=\"EuiBadge\" componentArgs=(hash badgeColor=(argOrDefault @color \"default\")))}}>\n      <span class=\"euiBadge__content\">\n        <span class=\"euiBadge__text\">\n          {{yield}}\n        </span>\n      </span>\n    </span>\n  {{/if}}\n", {
+const EuiBadge = setComponentTemplate(precompileTemplate("{{#if (and (or @onClick @href) (not @iconType))}}\n  {{#if @onClick}}\n    <button type=\"button\" class={{classNames \"euiBadge-isClickable\" (if @isDisabled \"euiBadge-isDisabled\") componentName=\"EuiBadge\" color=(argOrDefault @color \"default\")}} aria-label={{@onClickAriaLabel}} disabled={{@isDisabled}} ...attributes {{simpleStyle (inlineStyles componentName=\"EuiBadge\" componentArgs=(hash badgeColor=(argOrDefault @color \"default\")))}} {{on \"click\" (optional @onClick)}}>\n      <span class=\"euiBadge__content\">\n        <span class=\"euiBadge__text\">\n          {{yield}}\n        </span>\n      </span>\n    </button>\n  {{else}}\n    <a class={{classNames \"euiBadge-isClickable\" (if @isDisabled \"euiBadge-isDisabled\") componentName=\"EuiBadge\" color=(argOrDefault @color \"default\")}} target={{@target}} href={{@href}} aria-label={{if @onClick @onClickAriaLabel}} disabled={{@isDisabled}} ...attributes {{simpleStyle (inlineStyles componentName=\"EuiBadge\" componentArgs=(hash badgeColor=(argOrDefault @color \"default\")))}}>\n      <span class=\"euiBadge__content\">\n        <span class=\"euiBadge__text\">\n          {{yield}}\n        </span>\n      </span>\n    </a>\n  {{/if}}\n{{else if @iconType}}\n  <span class={{classNames (if @isDisabled \"euiBadge-isDisabled\") componentName=\"EuiBadge\" iconSide=(argOrDefault @iconSide \"left\") color=(argOrDefault @color \"default\")}} ...attributes {{simpleStyle (inlineStyles componentName=\"EuiBadge\" componentArgs=(hash badgeColor=(argOrDefault @color \"default\")))}}>\n    <span class=\"euiBadge__content\">\n      {{#if (has-block)}}\n        {{#if @onClick}}\n          <button class=\"euiBadge__childButton\" type=\"button\" disabled={{@isDisabled}} {{on \"click\" (optional @onClick)}}>\n            {{yield}}\n          </button>\n        {{else if @href}}\n          <a class=\"euiBadge__childButton\" href={{@href}} disabled={{@isDisabled}}>\n            {{yield}}\n          </a>\n        {{else}}\n          <span class=\"euiBadge__text\">\n            {{yield}}\n          </span>\n        {{/if}}\n      {{/if}}\n      {{#if @iconOnClick}}\n        {{!-- template-lint-disable --}}\n        <button type=\"button\" class=\"euiBadge__iconButton\" aria-label={{@iconOnClickAriaLabel}} disabled={{@isDisabled}} title={{@iconOnClickAriaLabel}} tabindex={{@closeButtonProps.tabIndex}} data-selected-index={{@closeButtonProps.dataSelectedIconIndex}} {{on \"click\" (optional @iconOnClick)}}>\n          <EuiIcon @color=\"inherit\" @iconClasses={{classNames \"euiBadge__icon\" @closeButtonProps.iconClasses}} @type={{@iconType}} @useSvg={{@iconUseSvg}} @size={{if (has-block) \"s\" \"m\"}} />\n        </button>\n        {{!-- tempalte-lint-enable--}}\n      {{else}}\n        <EuiIcon @color=\"inherit\" @type={{@iconType}} @useSvg={{@iconUseSvg}} @size={{if (has-block) \"s\" \"m\"}} @iconClasses=\"euiBadge__icon\" />\n      {{/if}}\n    </span>\n  </span>\n{{else}}\n  <span class={{classNames (if @isDisabled \"euiBadge-isDisabled\") componentName=\"EuiBadge\" iconSide=(argOrDefault @iconSide \"left\") color=(argOrDefault @color \"default\")}} ...attributes {{simpleStyle (inlineStyles componentName=\"EuiBadge\" componentArgs=(hash badgeColor=(argOrDefault @color \"default\")))}}>\n    <span class=\"euiBadge__content\">\n      <span class=\"euiBadge__text\">\n        {{yield}}\n      </span>\n    </span>\n  </span>\n{{/if}}", {
   strictMode: true,
   scope: () => ({
     and,

package/dist/components/eui-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-badge.js","sources":["../../src/components/eui-badge.gts"],"sourcesContent":["import { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\nimport { and, not, or } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport inlineStyles from '../helpers/inline-styles.ts';\nimport simpleStyle from '../modifiers/simple-style.ts';\nimport EuiIcon from './eui-icon.gts';\n\nimport type {\n  colorMapping,\n  EuiBadgeColorType\n} from '../utils/css-mappings/eui-badge.ts';\nimport type { EuiIconSignature } from './eui-icon';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiBadgeSignature {\n  Element: HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement;\n  Args: {\n    color?: keyof typeof colorMapping | EuiBadgeColorType | string;\n    iconType?: EuiIconSignature['Args']['type'];\n    iconSide?: 'left' | 'right';\n    iconOnClick?: () => void;\n    iconOnClickAriaLabel?: string;\n    iconUseSvg?: boolean;\n    isDisabled?: boolean;\n    onClick?: () => void;\n    onClickAriaLabel?: string;\n    href?: string;\n    target?: string;\n    closeButtonProps?: {\n      tabIndex?: number;\n      dataSelectedIconIndex?: number;\n      iconClasses?: string;\n    };\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiBadge: TemplateOnlyComponent<EuiBadgeSignature> = <template>\n  {{#if (and (or @onClick @href) (not @iconType))}}\n    {{#if @onClick}}\n      <button\n        type=\"button\"\n        class={{classNames\n          \"euiBadge-isClickable\"\n          (if @isDisabled \"euiBadge-isDisabled\")\n          componentName=\"EuiBadge\"\n          color=(argOrDefault @color \"default\")\n        }}\n        aria-label={{@onClickAriaLabel}}\n        disabled={{@isDisabled}}\n        ...attributes\n        {{simpleStyle\n          (inlineStyles\n            componentName=\"EuiBadge\"\n            componentArgs=(hash badgeColor=(argOrDefault @color \"default\"))\n          )\n        }}\n        {{on \"click\" (optional @onClick)}}\n      >\n        <span class=\"euiBadge__content\">\n          <span class=\"euiBadge__text\">\n            {{yield}}\n          </span>\n        </span>\n      </button>\n    {{else}}\n      <a\n        class={{classNames\n          \"euiBadge-isClickable\"\n          (if @isDisabled \"euiBadge-isDisabled\")\n          componentName=\"EuiBadge\"\n          color=(argOrDefault @color \"default\")\n        }}\n        target={{@target}}\n        href={{@href}}\n        aria-label={{if @onClick @onClickAriaLabel}}\n        disabled={{@isDisabled}}\n        ...attributes\n        {{simpleStyle\n          (inlineStyles\n            componentName=\"EuiBadge\"\n            componentArgs=(hash badgeColor=(argOrDefault @color \"default\"))\n          )\n        }}\n      >\n        <span class=\"euiBadge__content\">\n          <span class=\"euiBadge__text\">\n            {{yield}}\n          </span>\n        </span>\n      </a>\n    {{/if}}\n  {{else if @iconType}}\n    <span\n      class={{classNames\n        (if @isDisabled \"euiBadge-isDisabled\")\n        componentName=\"EuiBadge\"\n        iconSide=(argOrDefault @iconSide \"left\")\n        color=(argOrDefault @color \"default\")\n      }}\n      ...attributes\n      {{simpleStyle\n        (inlineStyles\n          componentName=\"EuiBadge\"\n          componentArgs=(hash badgeColor=(argOrDefault @color \"default\"))\n        )\n      }}\n    >\n      <span class=\"euiBadge__content\">\n        {{#if (has-block)}}\n          {{#if @onClick}}\n            <button\n              class=\"euiBadge__childButton\"\n              type=\"button\"\n              disabled={{@isDisabled}}\n              {{on \"click\" (optional @onClick)}}\n            >\n              {{yield}}\n            </button>\n          {{else if @href}}\n            <a\n              class=\"euiBadge__childButton\"\n              href={{@href}}\n              disabled={{@isDisabled}}\n            >\n              {{yield}}\n            </a>\n          {{else}}\n            <span class=\"euiBadge__text\">\n              {{yield}}\n            </span>\n          {{/if}}\n        {{/if}}\n        {{#if @iconOnClick}}\n          {{! template-lint-disable }}\n          <button\n            type=\"button\"\n            class=\"euiBadge__iconButton\"\n            aria-label={{@iconOnClickAriaLabel}}\n            disabled={{@isDisabled}}\n            title={{@iconOnClickAriaLabel}}\n            tabindex={{@closeButtonProps.tabIndex}}\n            data-selected-index={{@closeButtonProps.dataSelectedIconIndex}}\n            {{on \"click\" (optional @iconOnClick)}}\n          >\n            <EuiIcon\n              @color=\"inherit\"\n              @iconClasses={{classNames\n                \"euiBadge__icon\"\n                @closeButtonProps.iconClasses\n              }}\n              @type={{@iconType}}\n              @useSvg={{@iconUseSvg}}\n              @size={{if (has-block) \"s\" \"m\"}}\n            />\n          </button>\n          {{! tempalte-lint-enable}}\n        {{else}}\n          <EuiIcon\n            @color=\"inherit\"\n            @type={{@iconType}}\n            @useSvg={{@iconUseSvg}}\n            @size={{if (has-block) \"s\" \"m\"}}\n            @iconClasses=\"euiBadge__icon\"\n          />\n        {{/if}}\n      </span>\n    </span>\n  {{else}}\n    <span\n      class={{classNames\n        (if @isDisabled \"euiBadge-isDisabled\")\n        componentName=\"EuiBadge\"\n        iconSide=(argOrDefault @iconSide \"left\")\n        color=(argOrDefault @color \"default\")\n      }}\n      ...attributes\n      {{simpleStyle\n        (inlineStyles\n          componentName=\"EuiBadge\"\n          componentArgs=(hash badgeColor=(argOrDefault @color \"default\"))\n        )\n      }}\n    >\n      <span class=\"euiBadge__content\">\n        <span class=\"euiBadge__text\">\n          {{yield}}\n        </span>\n      </span>\n    </span>\n  {{/if}}\n</template>;\n\nexport default EuiBadge;\n"],"names":["EuiBadge","setComponentTemplate","precompileTemplate","strictMode","scope","and","or","not","classNames","argOrDefault","simpleStyle","inlineStyles","hash","on","optional","EuiIcon","templateOnly"],"mappings":";;;;;;;;;;;;;AA4CA,MAAMA,QAAqD,GAAAC,oBAAA,CAAAC,kBAAA,CA0J3D,w9GAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,GAAA;IAAAC,EAAA;IAAAC,GAAA;IAAAC,UAAA;IAAAC,YAAA;IAAAC,WAAA;IAAAC,YAAA;IAAAC,IAAA;IAAAC,EAAA;IAAAC,QAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-badge.js","sources":["../../src/components/eui-badge.gts"],"sourcesContent":["import { hash } from '@ember/helper';\nimport { on } from '@ember/modifier';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\nimport { and, not, or } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport inlineStyles from '../helpers/inline-styles.ts';\nimport simpleStyle from '../modifiers/simple-style.ts';\nimport EuiIcon from './eui-icon.gts';\n\nimport type {\n  colorMapping,\n  EuiBadgeColorType\n} from '../utils/css-mappings/eui-badge.ts';\nimport type { EuiIconSignature } from './eui-icon';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiBadgeSignature {\n  Element: HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement;\n  Args: {\n    color?: keyof typeof colorMapping | EuiBadgeColorType | string;\n    iconType?: EuiIconSignature['Args']['type'];\n    iconSide?: 'left' | 'right';\n    iconOnClick?: () => void;\n    iconOnClickAriaLabel?: string;\n    iconUseSvg?: boolean;\n    isDisabled?: boolean;\n    onClick?: () => void;\n    onClickAriaLabel?: string;\n    href?: string;\n    target?: string;\n    closeButtonProps?: {\n      tabIndex?: number;\n      dataSelectedIconIndex?: number;\n      iconClasses?: string;\n    };\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiBadge: TemplateOnlyComponent<EuiBadgeSignature> = <template>\n  {{#if (and (or @onClick @href) (not @iconType))}}\n    {{#if @onClick}}\n      <button\n        type=\"button\"\n        class={{classNames\n          \"euiBadge-isClickable\"\n          (if @isDisabled \"euiBadge-isDisabled\")\n          componentName=\"EuiBadge\"\n          color=(argOrDefault @color \"default\")\n        }}\n        aria-label={{@onClickAriaLabel}}\n        disabled={{@isDisabled}}\n        ...attributes\n        {{simpleStyle\n          (inlineStyles\n            componentName=\"EuiBadge\"\n            componentArgs=(hash badgeColor=(argOrDefault @color \"default\"))\n          )\n        }}\n        {{on \"click\" (optional @onClick)}}\n      >\n        <span class=\"euiBadge__content\">\n          <span class=\"euiBadge__text\">\n            {{yield}}\n          </span>\n        </span>\n      </button>\n    {{else}}\n      <a\n        class={{classNames\n          \"euiBadge-isClickable\"\n          (if @isDisabled \"euiBadge-isDisabled\")\n          componentName=\"EuiBadge\"\n          color=(argOrDefault @color \"default\")\n        }}\n        target={{@target}}\n        href={{@href}}\n        aria-label={{if @onClick @onClickAriaLabel}}\n        disabled={{@isDisabled}}\n        ...attributes\n        {{simpleStyle\n          (inlineStyles\n            componentName=\"EuiBadge\"\n            componentArgs=(hash badgeColor=(argOrDefault @color \"default\"))\n          )\n        }}\n      >\n        <span class=\"euiBadge__content\">\n          <span class=\"euiBadge__text\">\n            {{yield}}\n          </span>\n        </span>\n      </a>\n    {{/if}}\n  {{else if @iconType}}\n    <span\n      class={{classNames\n        (if @isDisabled \"euiBadge-isDisabled\")\n        componentName=\"EuiBadge\"\n        iconSide=(argOrDefault @iconSide \"left\")\n        color=(argOrDefault @color \"default\")\n      }}\n      ...attributes\n      {{simpleStyle\n        (inlineStyles\n          componentName=\"EuiBadge\"\n          componentArgs=(hash badgeColor=(argOrDefault @color \"default\"))\n        )\n      }}\n    >\n      <span class=\"euiBadge__content\">\n        {{#if (has-block)}}\n          {{#if @onClick}}\n            <button\n              class=\"euiBadge__childButton\"\n              type=\"button\"\n              disabled={{@isDisabled}}\n              {{on \"click\" (optional @onClick)}}\n            >\n              {{yield}}\n            </button>\n          {{else if @href}}\n            <a\n              class=\"euiBadge__childButton\"\n              href={{@href}}\n              disabled={{@isDisabled}}\n            >\n              {{yield}}\n            </a>\n          {{else}}\n            <span class=\"euiBadge__text\">\n              {{yield}}\n            </span>\n          {{/if}}\n        {{/if}}\n        {{#if @iconOnClick}}\n          {{! template-lint-disable }}\n          <button\n            type=\"button\"\n            class=\"euiBadge__iconButton\"\n            aria-label={{@iconOnClickAriaLabel}}\n            disabled={{@isDisabled}}\n            title={{@iconOnClickAriaLabel}}\n            tabindex={{@closeButtonProps.tabIndex}}\n            data-selected-index={{@closeButtonProps.dataSelectedIconIndex}}\n            {{on \"click\" (optional @iconOnClick)}}\n          >\n            <EuiIcon\n              @color=\"inherit\"\n              @iconClasses={{classNames\n                \"euiBadge__icon\"\n                @closeButtonProps.iconClasses\n              }}\n              @type={{@iconType}}\n              @useSvg={{@iconUseSvg}}\n              @size={{if (has-block) \"s\" \"m\"}}\n            />\n          </button>\n          {{! tempalte-lint-enable}}\n        {{else}}\n          <EuiIcon\n            @color=\"inherit\"\n            @type={{@iconType}}\n            @useSvg={{@iconUseSvg}}\n            @size={{if (has-block) \"s\" \"m\"}}\n            @iconClasses=\"euiBadge__icon\"\n          />\n        {{/if}}\n      </span>\n    </span>\n  {{else}}\n    <span\n      class={{classNames\n        (if @isDisabled \"euiBadge-isDisabled\")\n        componentName=\"EuiBadge\"\n        iconSide=(argOrDefault @iconSide \"left\")\n        color=(argOrDefault @color \"default\")\n      }}\n      ...attributes\n      {{simpleStyle\n        (inlineStyles\n          componentName=\"EuiBadge\"\n          componentArgs=(hash badgeColor=(argOrDefault @color \"default\"))\n        )\n      }}\n    >\n      <span class=\"euiBadge__content\">\n        <span class=\"euiBadge__text\">\n          {{yield}}\n        </span>\n      </span>\n    </span>\n  {{/if}}\n</template>;\n\nexport default EuiBadge;\n"],"names":["EuiBadge","setComponentTemplate","precompileTemplate","strictMode","scope","and","or","not","classNames","argOrDefault","simpleStyle","inlineStyles","hash","on","optional","EuiIcon","templateOnly"],"mappings":";;;;;;;;;;;;;AA4CA,MAAMA,QAAqD,GAAAC,oBAAA,CAAAC,kBAAA,CA0J3D,o2GAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,GAAA;IAAAC,EAAA;IAAAC,GAAA;IAAAC,UAAA;IAAAC,YAAA;IAAAC,WAAA;IAAAC,YAAA;IAAAC,IAAA;IAAAC,EAAA;IAAAC,QAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}

package/dist/components/eui-beta-badge.js

@@ -8,7 +8,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiBetaBadge = setComponentTemplate(precompileTemplate("\n  {{#let (argOrDefault @size \"m\") (eq @label.length 1) (argOrDefault @tooltipPosition \"top\") as |size singleLetter tooltipPosition|}}\n\n    {{#let (classNames (if @iconType \"euiBetaBadge--iconOnly\") (if singleLetter \"euiBetaBadge--singleLetter\") (if (or @onClick @href) \"euiBetaBadge-isClickable\") componentName=\"EuiBetaBadge\" color=(argOrDefault @color \"hollow\") size=size) as |classes|}}\n\n      {{#if (or @href @onClick)}}\n        {{#if @href}}\n          <a aria-label={{@onClickAriaLabel}} title={{if @label @label @title}} class={{classes}} href={{@href}} target={{@target}} rel={{@rel}} ...attributes>\n            {{#if (has-block)}}\n              {{yield}}\n            {{else if @iconType}}\n              <EuiIcon @iconClasses=\"euiBetaBadge__icon\" @type={{@iconType}} @size={{if (eq size \"m\") \"m\" \"s\"}} aria-hidden=\"true\" @color=\"inherit\" />\n            {{else}}\n              {{@label}}\n            {{/if}}\n          </a>\n        {{else if @onClick}}\n          <button type=\"button\" aria-label={{@onClickAriaLabel}} title={{if @label @label @title}} class={{classes}} {{on \"click\" @onClick}} ...attributes>\n            {{#if (has-block)}}\n              {{yield}}\n            {{else if @iconType}}\n              <EuiIcon @iconClasses=\"euiBetaBadge__icon\" @type={{@iconType}} @size={{if (eq size \"m\") \"m\" \"s\"}} aria-hidden=\"true\" @color=\"inherit\" />\n            {{else}}\n              {{@label}}\n            {{/if}}\n          </button>\n        {{/if}}\n\n        {{#if @tooltipContent}}\n          <EuiToolTip @position={{tooltipPosition}} @title={{or @title @label}} @content={{@tooltipContent}}>\n            {{#if @href}}\n              <a aria-label={{@onClickAriaLabel}} title={{if @label @label @title}} class={{classes}} href={{@href}} target={{@target}} rel={{@rel}} ...attributes>\n                {{#if (has-block)}}\n                  {{yield}}\n                {{else if @iconType}}\n                  <EuiIcon @iconClasses=\"euiBetaBadge__icon\" @type={{@iconType}} @size={{if (eq size \"m\") \"m\" \"s\"}} aria-hidden=\"true\" @color=\"inherit\" />\n                {{else}}\n                  {{@label}}\n                {{/if}}\n              </a>\n            {{else if @onClick}}\n              <button type=\"button\" aria-label={{@onClickAriaLabel}} title={{if @label @label @title}} class={{classes}} {{on \"click\" @onClick}} ...attributes>\n                {{#if (has-block)}}\n                  {{yield}}\n                {{else if @iconType}}\n                  <EuiIcon @iconClasses=\"euiBetaBadge__icon\" @type={{@iconType}} @size={{if (eq size \"m\") \"m\" \"s\"}} aria-hidden=\"true\" @color=\"inherit\" />\n                {{else}}\n                  {{@label}}\n                {{/if}}\n              </button>\n            {{/if}}\n          </EuiToolTip>\n        {{/if}}\n      {{else}}\n        {{#if @tooltipContent}}\n          <EuiToolTip @position={{tooltipPosition}} @title={{or @title @label}} @content={{@tooltipContent}}>\n            <span tabindex=\"0\" class={{classes}} ...attributes>\n              {{#if (has-block)}}\n                {{yield}}\n              {{else if @iconType}}\n                <EuiIcon @iconClasses=\"euiBetaBadge__icon\" @type={{@iconType}} @size={{if (eq size \"m\") \"m\" \"s\"}} aria-hidden=\"true\" @color=\"inherit\" />\n              {{else}}\n                {{@label}}\n              {{/if}}\n            </span>\n          </EuiToolTip>\n        {{else}}\n          <span class={{classes}} title={{@title}} ...attributes>\n            {{#if (has-block)}}\n              {{yield}}\n            {{else if @iconType}}\n              <EuiIcon @iconClasses=\"euiBetaBadge__icon\" @type={{@iconType}} @size={{if (eq size \"m\") \"m\" \"s\"}} aria-hidden=\"true\" @color=\"inherit\" />\n            {{else}}\n              {{@label}}\n            {{/if}}\n          </span>\n        {{/if}}\n\n      {{/if}}\n\n    {{/let}}\n\n  {{/let}}\n", {
+const EuiBetaBadge = setComponentTemplate(precompileTemplate("{{#let (argOrDefault @size \"m\") (eq @label.length 1) (argOrDefault @tooltipPosition \"top\") as |size singleLetter tooltipPosition|}}\n\n  {{#let (classNames (if @iconType \"euiBetaBadge--iconOnly\") (if singleLetter \"euiBetaBadge--singleLetter\") (if (or @onClick @href) \"euiBetaBadge-isClickable\") componentName=\"EuiBetaBadge\" color=(argOrDefault @color \"hollow\") size=size) as |classes|}}\n\n    {{#if (or @href @onClick)}}\n      {{#if @href}}\n        <a aria-label={{@onClickAriaLabel}} title={{if @label @label @title}} class={{classes}} href={{@href}} target={{@target}} rel={{@rel}} ...attributes>\n          {{#if (has-block)}}\n            {{yield}}\n          {{else if @iconType}}\n            <EuiIcon @iconClasses=\"euiBetaBadge__icon\" @type={{@iconType}} @size={{if (eq size \"m\") \"m\" \"s\"}} aria-hidden=\"true\" @color=\"inherit\" />\n          {{else}}\n            {{@label}}\n          {{/if}}\n        </a>\n      {{else if @onClick}}\n        <button type=\"button\" aria-label={{@onClickAriaLabel}} title={{if @label @label @title}} class={{classes}} {{on \"click\" @onClick}} ...attributes>\n          {{#if (has-block)}}\n            {{yield}}\n          {{else if @iconType}}\n            <EuiIcon @iconClasses=\"euiBetaBadge__icon\" @type={{@iconType}} @size={{if (eq size \"m\") \"m\" \"s\"}} aria-hidden=\"true\" @color=\"inherit\" />\n          {{else}}\n            {{@label}}\n          {{/if}}\n        </button>\n      {{/if}}\n\n      {{#if @tooltipContent}}\n        <EuiToolTip @position={{tooltipPosition}} @title={{or @title @label}} @content={{@tooltipContent}}>\n          {{#if @href}}\n            <a aria-label={{@onClickAriaLabel}} title={{if @label @label @title}} class={{classes}} href={{@href}} target={{@target}} rel={{@rel}} ...attributes>\n              {{#if (has-block)}}\n                {{yield}}\n              {{else if @iconType}}\n                <EuiIcon @iconClasses=\"euiBetaBadge__icon\" @type={{@iconType}} @size={{if (eq size \"m\") \"m\" \"s\"}} aria-hidden=\"true\" @color=\"inherit\" />\n              {{else}}\n                {{@label}}\n              {{/if}}\n            </a>\n          {{else if @onClick}}\n            <button type=\"button\" aria-label={{@onClickAriaLabel}} title={{if @label @label @title}} class={{classes}} {{on \"click\" @onClick}} ...attributes>\n              {{#if (has-block)}}\n                {{yield}}\n              {{else if @iconType}}\n                <EuiIcon @iconClasses=\"euiBetaBadge__icon\" @type={{@iconType}} @size={{if (eq size \"m\") \"m\" \"s\"}} aria-hidden=\"true\" @color=\"inherit\" />\n              {{else}}\n                {{@label}}\n              {{/if}}\n            </button>\n          {{/if}}\n        </EuiToolTip>\n      {{/if}}\n    {{else}}\n      {{#if @tooltipContent}}\n        <EuiToolTip @position={{tooltipPosition}} @title={{or @title @label}} @content={{@tooltipContent}}>\n          <span tabindex=\"0\" class={{classes}} ...attributes>\n            {{#if (has-block)}}\n              {{yield}}\n            {{else if @iconType}}\n              <EuiIcon @iconClasses=\"euiBetaBadge__icon\" @type={{@iconType}} @size={{if (eq size \"m\") \"m\" \"s\"}} aria-hidden=\"true\" @color=\"inherit\" />\n            {{else}}\n              {{@label}}\n            {{/if}}\n          </span>\n        </EuiToolTip>\n      {{else}}\n        <span class={{classes}} title={{@title}} ...attributes>\n          {{#if (has-block)}}\n            {{yield}}\n          {{else if @iconType}}\n            <EuiIcon @iconClasses=\"euiBetaBadge__icon\" @type={{@iconType}} @size={{if (eq size \"m\") \"m\" \"s\"}} aria-hidden=\"true\" @color=\"inherit\" />\n          {{else}}\n            {{@label}}\n          {{/if}}\n        </span>\n      {{/if}}\n\n    {{/if}}\n\n  {{/let}}\n\n{{/let}}", {
   strictMode: true,
   scope: () => ({
     argOrDefault,

package/dist/components/eui-beta-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-beta-badge.js","sources":["../../src/components/eui-beta-badge.gts"],"sourcesContent":["import { on } from '@ember/modifier';\n\nimport { eq, or } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiToolTip from './eui-tool-tip.gts';\n\nimport type {\n  colorMapping,\n  sizeMapping\n} from '../utils/css-mappings/eui-beta-badge.ts';\nimport type { EuiIconSignature } from './eui-icon';\nimport type { EuiToolTipSignature } from './eui-tool-tip';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiBetaBadgeSignature {\n  Element: HTMLSpanElement;\n  Args: {\n    /**\n     * The label to use for the beta badge. Usually a single letter.\n     */\n    label?: string;\n    /**\n     * The title to use for the beta badge. Usually a full word.\n     */\n    title?: string;\n    /**\n     * The icon to use for the beta badge.\n     */\n    iconType?: EuiIconSignature['Args']['type'];\n    /**\n     * The color of the beta badge.\n     */\n    color?: keyof typeof colorMapping;\n\n    /**\n     * The size of the beta badge.\n     */\n    size?: keyof typeof sizeMapping;\n    /**\n     * The position of the tooltip for the beta badge.\n     */\n    tooltipPosition?: EuiToolTipSignature['Args']['position'];\n    /**\n     * The content of the tooltip for the beta badge.\n     */\n    tooltipContent?: string;\n    /**\n     * The aria-label for the beta badge.\n     */\n    onClickAriaLabel?: string;\n    /**\n     * The href for the beta badge.\n     */\n    href?: string;\n    /**\n     * The target for the beta badge.\n     */\n    target?: string;\n    /**\n     * The rel for the beta badge.\n     */\n    rel?: string;\n    /**\n     * The action to call when the beta badge is clicked.\n     */\n    onClick?: (event: MouseEvent) => void;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiBetaBadge: TemplateOnlyComponent<EuiBetaBadgeSignature> = <template>\n  {{#let\n    (argOrDefault @size \"m\")\n    (eq @label.length 1)\n    (argOrDefault @tooltipPosition \"top\")\n    as |size singleLetter tooltipPosition|\n  }}\n\n    {{#let\n      (classNames\n        (if @iconType \"euiBetaBadge--iconOnly\")\n        (if singleLetter \"euiBetaBadge--singleLetter\")\n        (if (or @onClick @href) \"euiBetaBadge-isClickable\")\n        componentName=\"EuiBetaBadge\"\n        color=(argOrDefault @color \"hollow\")\n        size=size\n      )\n      as |classes|\n    }}\n\n      {{#if (or @href @onClick)}}\n        {{#if @href}}\n          <a\n            aria-label={{@onClickAriaLabel}}\n            title={{if @label @label @title}}\n            class={{classes}}\n            href={{@href}}\n            target={{@target}}\n            rel={{@rel}}\n            ...attributes\n          >\n            {{#if (has-block)}}\n              {{yield}}\n            {{else if @iconType}}\n              <EuiIcon\n                @iconClasses=\"euiBetaBadge__icon\"\n                @type={{@iconType}}\n                @size={{if (eq size \"m\") \"m\" \"s\"}}\n                aria-hidden=\"true\"\n                @color=\"inherit\"\n              />\n            {{else}}\n              {{@label}}\n            {{/if}}\n          </a>\n        {{else if @onClick}}\n          <button\n            type=\"button\"\n            aria-label={{@onClickAriaLabel}}\n            title={{if @label @label @title}}\n            class={{classes}}\n            {{on \"click\" @onClick}}\n            ...attributes\n          >\n            {{#if (has-block)}}\n              {{yield}}\n            {{else if @iconType}}\n              <EuiIcon\n                @iconClasses=\"euiBetaBadge__icon\"\n                @type={{@iconType}}\n                @size={{if (eq size \"m\") \"m\" \"s\"}}\n                aria-hidden=\"true\"\n                @color=\"inherit\"\n              />\n            {{else}}\n              {{@label}}\n            {{/if}}\n          </button>\n        {{/if}}\n\n        {{#if @tooltipContent}}\n          <EuiToolTip\n            @position={{tooltipPosition}}\n            @title={{or @title @label}}\n            @content={{@tooltipContent}}\n          >\n            {{#if @href}}\n              <a\n                aria-label={{@onClickAriaLabel}}\n                title={{if @label @label @title}}\n                class={{classes}}\n                href={{@href}}\n                target={{@target}}\n                rel={{@rel}}\n                ...attributes\n              >\n                {{#if (has-block)}}\n                  {{yield}}\n                {{else if @iconType}}\n                  <EuiIcon\n                    @iconClasses=\"euiBetaBadge__icon\"\n                    @type={{@iconType}}\n                    @size={{if (eq size \"m\") \"m\" \"s\"}}\n                    aria-hidden=\"true\"\n                    @color=\"inherit\"\n                  />\n                {{else}}\n                  {{@label}}\n                {{/if}}\n              </a>\n            {{else if @onClick}}\n              <button\n                type=\"button\"\n                aria-label={{@onClickAriaLabel}}\n                title={{if @label @label @title}}\n                class={{classes}}\n                {{on \"click\" @onClick}}\n                ...attributes\n              >\n                {{#if (has-block)}}\n                  {{yield}}\n                {{else if @iconType}}\n                  <EuiIcon\n                    @iconClasses=\"euiBetaBadge__icon\"\n                    @type={{@iconType}}\n                    @size={{if (eq size \"m\") \"m\" \"s\"}}\n                    aria-hidden=\"true\"\n                    @color=\"inherit\"\n                  />\n                {{else}}\n                  {{@label}}\n                {{/if}}\n              </button>\n            {{/if}}\n          </EuiToolTip>\n        {{/if}}\n      {{else}}\n        {{#if @tooltipContent}}\n          <EuiToolTip\n            @position={{tooltipPosition}}\n            @title={{or @title @label}}\n            @content={{@tooltipContent}}\n          >\n            <span tabindex=\"0\" class={{classes}} ...attributes>\n              {{#if (has-block)}}\n                {{yield}}\n              {{else if @iconType}}\n                <EuiIcon\n                  @iconClasses=\"euiBetaBadge__icon\"\n                  @type={{@iconType}}\n                  @size={{if (eq size \"m\") \"m\" \"s\"}}\n                  aria-hidden=\"true\"\n                  @color=\"inherit\"\n                />\n              {{else}}\n                {{@label}}\n              {{/if}}\n            </span>\n          </EuiToolTip>\n        {{else}}\n          <span class={{classes}} title={{@title}} ...attributes>\n            {{#if (has-block)}}\n              {{yield}}\n            {{else if @iconType}}\n              <EuiIcon\n                @iconClasses=\"euiBetaBadge__icon\"\n                @type={{@iconType}}\n                @size={{if (eq size \"m\") \"m\" \"s\"}}\n                aria-hidden=\"true\"\n                @color=\"inherit\"\n              />\n            {{else}}\n              {{@label}}\n            {{/if}}\n          </span>\n        {{/if}}\n\n      {{/if}}\n\n    {{/let}}\n\n  {{/let}}\n</template>;\n\nexport default EuiBetaBadge;\n"],"names":["EuiBetaBadge","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","eq","classNames","or","EuiIcon","on","EuiToolTip","templateOnly"],"mappings":";;;;;;;;;;AA2EA,MAAMA,YAA6D,GAAAC,oBAAA,CAAAC,kBAAA,CA4KnE,o5HAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,YAAA;IAAAC,EAAA;IAAAC,UAAA;IAAAC,EAAA;IAAAC,OAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-beta-badge.js","sources":["../../src/components/eui-beta-badge.gts"],"sourcesContent":["import { on } from '@ember/modifier';\n\nimport { eq, or } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiToolTip from './eui-tool-tip.gts';\n\nimport type {\n  colorMapping,\n  sizeMapping\n} from '../utils/css-mappings/eui-beta-badge.ts';\nimport type { EuiIconSignature } from './eui-icon';\nimport type { EuiToolTipSignature } from './eui-tool-tip';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiBetaBadgeSignature {\n  Element: HTMLSpanElement;\n  Args: {\n    /**\n     * The label to use for the beta badge. Usually a single letter.\n     */\n    label?: string;\n    /**\n     * The title to use for the beta badge. Usually a full word.\n     */\n    title?: string;\n    /**\n     * The icon to use for the beta badge.\n     */\n    iconType?: EuiIconSignature['Args']['type'];\n    /**\n     * The color of the beta badge.\n     */\n    color?: keyof typeof colorMapping;\n\n    /**\n     * The size of the beta badge.\n     */\n    size?: keyof typeof sizeMapping;\n    /**\n     * The position of the tooltip for the beta badge.\n     */\n    tooltipPosition?: EuiToolTipSignature['Args']['position'];\n    /**\n     * The content of the tooltip for the beta badge.\n     */\n    tooltipContent?: string;\n    /**\n     * The aria-label for the beta badge.\n     */\n    onClickAriaLabel?: string;\n    /**\n     * The href for the beta badge.\n     */\n    href?: string;\n    /**\n     * The target for the beta badge.\n     */\n    target?: string;\n    /**\n     * The rel for the beta badge.\n     */\n    rel?: string;\n    /**\n     * The action to call when the beta badge is clicked.\n     */\n    onClick?: (event: MouseEvent) => void;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiBetaBadge: TemplateOnlyComponent<EuiBetaBadgeSignature> = <template>\n  {{#let\n    (argOrDefault @size \"m\")\n    (eq @label.length 1)\n    (argOrDefault @tooltipPosition \"top\")\n    as |size singleLetter tooltipPosition|\n  }}\n\n    {{#let\n      (classNames\n        (if @iconType \"euiBetaBadge--iconOnly\")\n        (if singleLetter \"euiBetaBadge--singleLetter\")\n        (if (or @onClick @href) \"euiBetaBadge-isClickable\")\n        componentName=\"EuiBetaBadge\"\n        color=(argOrDefault @color \"hollow\")\n        size=size\n      )\n      as |classes|\n    }}\n\n      {{#if (or @href @onClick)}}\n        {{#if @href}}\n          <a\n            aria-label={{@onClickAriaLabel}}\n            title={{if @label @label @title}}\n            class={{classes}}\n            href={{@href}}\n            target={{@target}}\n            rel={{@rel}}\n            ...attributes\n          >\n            {{#if (has-block)}}\n              {{yield}}\n            {{else if @iconType}}\n              <EuiIcon\n                @iconClasses=\"euiBetaBadge__icon\"\n                @type={{@iconType}}\n                @size={{if (eq size \"m\") \"m\" \"s\"}}\n                aria-hidden=\"true\"\n                @color=\"inherit\"\n              />\n            {{else}}\n              {{@label}}\n            {{/if}}\n          </a>\n        {{else if @onClick}}\n          <button\n            type=\"button\"\n            aria-label={{@onClickAriaLabel}}\n            title={{if @label @label @title}}\n            class={{classes}}\n            {{on \"click\" @onClick}}\n            ...attributes\n          >\n            {{#if (has-block)}}\n              {{yield}}\n            {{else if @iconType}}\n              <EuiIcon\n                @iconClasses=\"euiBetaBadge__icon\"\n                @type={{@iconType}}\n                @size={{if (eq size \"m\") \"m\" \"s\"}}\n                aria-hidden=\"true\"\n                @color=\"inherit\"\n              />\n            {{else}}\n              {{@label}}\n            {{/if}}\n          </button>\n        {{/if}}\n\n        {{#if @tooltipContent}}\n          <EuiToolTip\n            @position={{tooltipPosition}}\n            @title={{or @title @label}}\n            @content={{@tooltipContent}}\n          >\n            {{#if @href}}\n              <a\n                aria-label={{@onClickAriaLabel}}\n                title={{if @label @label @title}}\n                class={{classes}}\n                href={{@href}}\n                target={{@target}}\n                rel={{@rel}}\n                ...attributes\n              >\n                {{#if (has-block)}}\n                  {{yield}}\n                {{else if @iconType}}\n                  <EuiIcon\n                    @iconClasses=\"euiBetaBadge__icon\"\n                    @type={{@iconType}}\n                    @size={{if (eq size \"m\") \"m\" \"s\"}}\n                    aria-hidden=\"true\"\n                    @color=\"inherit\"\n                  />\n                {{else}}\n                  {{@label}}\n                {{/if}}\n              </a>\n            {{else if @onClick}}\n              <button\n                type=\"button\"\n                aria-label={{@onClickAriaLabel}}\n                title={{if @label @label @title}}\n                class={{classes}}\n                {{on \"click\" @onClick}}\n                ...attributes\n              >\n                {{#if (has-block)}}\n                  {{yield}}\n                {{else if @iconType}}\n                  <EuiIcon\n                    @iconClasses=\"euiBetaBadge__icon\"\n                    @type={{@iconType}}\n                    @size={{if (eq size \"m\") \"m\" \"s\"}}\n                    aria-hidden=\"true\"\n                    @color=\"inherit\"\n                  />\n                {{else}}\n                  {{@label}}\n                {{/if}}\n              </button>\n            {{/if}}\n          </EuiToolTip>\n        {{/if}}\n      {{else}}\n        {{#if @tooltipContent}}\n          <EuiToolTip\n            @position={{tooltipPosition}}\n            @title={{or @title @label}}\n            @content={{@tooltipContent}}\n          >\n            <span tabindex=\"0\" class={{classes}} ...attributes>\n              {{#if (has-block)}}\n                {{yield}}\n              {{else if @iconType}}\n                <EuiIcon\n                  @iconClasses=\"euiBetaBadge__icon\"\n                  @type={{@iconType}}\n                  @size={{if (eq size \"m\") \"m\" \"s\"}}\n                  aria-hidden=\"true\"\n                  @color=\"inherit\"\n                />\n              {{else}}\n                {{@label}}\n              {{/if}}\n            </span>\n          </EuiToolTip>\n        {{else}}\n          <span class={{classes}} title={{@title}} ...attributes>\n            {{#if (has-block)}}\n              {{yield}}\n            {{else if @iconType}}\n              <EuiIcon\n                @iconClasses=\"euiBetaBadge__icon\"\n                @type={{@iconType}}\n                @size={{if (eq size \"m\") \"m\" \"s\"}}\n                aria-hidden=\"true\"\n                @color=\"inherit\"\n              />\n            {{else}}\n              {{@label}}\n            {{/if}}\n          </span>\n        {{/if}}\n\n      {{/if}}\n\n    {{/let}}\n\n  {{/let}}\n</template>;\n\nexport default EuiBetaBadge;\n"],"names":["EuiBetaBadge","setComponentTemplate","precompileTemplate","strictMode","scope","argOrDefault","eq","classNames","or","EuiIcon","on","EuiToolTip","templateOnly"],"mappings":";;;;;;;;;;AA2EA,MAAMA,YAA6D,GAAAC,oBAAA,CAAAC,kBAAA,CA4KnE,wvHAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,YAAA;IAAAC,EAAA;IAAAC,UAAA;IAAAC,EAAA;IAAAC,OAAA;IAAAC,EAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}

package/dist/components/eui-bottom-bar.js

@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
+import { htmlSafe } from '@ember/template';
 import { modifier } from 'ember-modifier';
 import set from 'ember-set-helper/helpers/set';
 import argOrDefault from '../helpers/arg-or-default.js';
@@ -9,7 +10,7 @@ import screenReaderOnly from '../modifiers/screen-reader-only.js';
 import EuiPortal from './eui-portal.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import { g, i } from 'decorator-transforms/runtime';
+import { g, i } from 'decorator-transforms/runtime-esm';
 
 const updateDisplacementModifier = modifier(function (_element, _pos, {
   affordForDisplacement,
@@ -60,13 +61,13 @@ class EuiBottomBarComponent extends Component {
   }
   get bottomBarStyles() {
     if (this.position === 'fixed') {
-      return `left:${this.left}px;right:${this.right}px;bottom:${this.bottom}px`;
+      return htmlSafe(`left:${this.left}px;right:${this.right}px;bottom:${this.bottom}px`);
     } else {
-      return `top:${this.top}px;left:${this.left}px;right:${this.right}px;bottom:${this.bottom}px`;
+      return htmlSafe(`top:${this.top}px;left:${this.left}px;right:${this.right}px;bottom:${this.bottom}px`);
     }
   }
   static {
-    setComponentTemplate(precompileTemplate("\n    {{#if this.usePortal}}\n      <EuiPortal>\n        <section style={{this.bottomBarStyles}} {{resizeObserver onResize=(set this \"dimensions\")}} class={{classNames componentName=\"EuiBottomBar\" paddingSize=(argOrDefault @paddingSize \"m\") positionType=(argOrDefault this.position \"fixed\")}} {{updateDisplacementModifier affordForDisplacement=this.affordForDisplacement usePortal=this.usePortal dimensions=this.dimensions bodyClassName=@bodyClassName}} ...attributes>\n          {{yield}}\n        </section>\n      </EuiPortal>\n    {{else}}\n      <section style={{this.bottomBarStyles}} {{resizeObserver onResize=(set this \"dimensions\")}} class={{classNames componentName=\"EuiBottomBar\" paddingSize=(argOrDefault @paddingSize \"m\") positionType=(argOrDefault this.position \"fixed\")}} aria-label={{if @landmarkHeading @landmarkHeading \"Page level controls\"}} {{updateDisplacementModifier affordForDisplacement=this.affordForDisplacement usePortal=this.usePortal dimensions=this.dimensions bodyClassName=@bodyClassName}} ...attributes>\n        <div {{screenReaderOnly}}>\n          <h2>\n            {{if @landmarkHeading @landmarkHeading \"Page level controls\"}}\n          </h2>\n        </div>\n        {{yield}}\n      </section>\n      <div {{screenReaderOnly}}>\n        <p aria-live=\"assertive\">\n          {{#if @landmarkHeading}}\n            There is a new region landmark called\n            {{@landmarkHeading}}\n            with page level controls at the end of the document.\n          {{else}}\n            There is a new region landmark with page level controls at the end\n            of the document.\n          {{/if}}\n        </p>\n      </div>\n    {{/if}}\n  ", {
+    setComponentTemplate(precompileTemplate("{{#if this.usePortal}}\n  <EuiPortal>\n    <section style={{this.bottomBarStyles}} {{resizeObserver onResize=(set this \"dimensions\")}} class={{classNames componentName=\"EuiBottomBar\" paddingSize=(argOrDefault @paddingSize \"m\") positionType=(argOrDefault this.position \"fixed\")}} {{updateDisplacementModifier affordForDisplacement=this.affordForDisplacement usePortal=this.usePortal dimensions=this.dimensions bodyClassName=@bodyClassName}} ...attributes>\n      {{yield}}\n    </section>\n  </EuiPortal>\n{{else}}\n  <section style={{this.bottomBarStyles}} {{resizeObserver onResize=(set this \"dimensions\")}} class={{classNames componentName=\"EuiBottomBar\" paddingSize=(argOrDefault @paddingSize \"m\") positionType=(argOrDefault this.position \"fixed\")}} aria-label={{if @landmarkHeading @landmarkHeading \"Page level controls\"}} {{updateDisplacementModifier affordForDisplacement=this.affordForDisplacement usePortal=this.usePortal dimensions=this.dimensions bodyClassName=@bodyClassName}} ...attributes>\n    <div {{screenReaderOnly}}>\n      <h2>\n        {{if @landmarkHeading @landmarkHeading \"Page level controls\"}}\n      </h2>\n    </div>\n    {{yield}}\n  </section>\n  <div {{screenReaderOnly}}>\n    <p aria-live=\"assertive\">\n      {{#if @landmarkHeading}}\n        There is a new region landmark called\n        {{@landmarkHeading}}\n        with page level controls at the end of the document.\n      {{else}}\n        There is a new region landmark with page level controls at the end\n        of the document.\n      {{/if}}\n    </p>\n  </div>\n{{/if}}", {
       strictMode: true,
       scope: () => ({
         EuiPortal,