@ember-eui/core 13.0.5 → 14.1.0

package/dist/components/eui-table-sort-mobile.js

@@ -0,0 +1,55 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import EuiButtonEmpty from './eui-button-empty.js';
+import EuiContextMenuPanel from './eui-context-menu-panel.js';
+import EuiPopoverComponent from './eui-popover.js';
+import EuiTableSortMobileItem from './eui-table-sort-mobile-item.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
+
+class EuiTableSortMobile extends Component {
+  static {
+    g(this.prototype, "euiI18n", [service]);
+  }
+  #euiI18n = (i(this, "euiI18n"), void 0);
+  static {
+    g(this.prototype, "isPopoverOpen", [tracked], function () {
+      return false;
+    });
+  }
+  #isPopoverOpen = (i(this, "isPopoverOpen"), void 0);
+  get label() {
+    return this.euiI18n.lookupToken('euiTableSortMobile.sorting', 'Sorting');
+  }
+  toggle() {
+    this.isPopoverOpen = !this.isPopoverOpen;
+  }
+  static {
+    n(this.prototype, "toggle", [action]);
+  }
+  close() {
+    this.isPopoverOpen = false;
+  }
+  static {
+    n(this.prototype, "close", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"euiTableSortMobile\" ...attributes>\n  <EuiPopover @isOpen={{this.isPopoverOpen}} @closePopover={{this.close}} @anchorPosition={{if @anchorPosition @anchorPosition \"downRight\"}} @panelPaddingSize=\"none\">\n    <:button>\n      <EuiButtonEmpty @iconType=\"arrowDown\" @iconSide=\"right\" @flush=\"right\" @size=\"xs\" {{on \"click\" this.toggle}}>{{this.label}}</EuiButtonEmpty>\n    </:button>\n    <:content>\n      <EuiContextMenuPanel style=\"min-width: 200px;\">\n        {{#each @items as |item|}}\n          <EuiTableSortMobileItem @onSort={{item.onSort}} @isSorted={{item.isSorted}} @isSortAscending={{item.isSortAscending}}>{{item.name}}</EuiTableSortMobileItem>\n        {{/each}}\n      </EuiContextMenuPanel>\n    </:content>\n  </EuiPopover>\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        EuiPopover: EuiPopoverComponent,
+        EuiButtonEmpty,
+        on,
+        EuiContextMenuPanel,
+        EuiTableSortMobileItem
+      })
+    }), this);
+  }
+}
+
+export { EuiTableSortMobile as default };
+//# sourceMappingURL=eui-table-sort-mobile.js.map

package/dist/components/eui-table-sort-mobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-table-sort-mobile.js","sources":["../../src/components/eui-table-sort-mobile.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { tracked } from '@glimmer/tracking';\nimport { on } from '@ember/modifier';\nimport { action } from '@ember/object';\nimport { service } from '@ember/service';\n\nimport EuiButtonEmpty from './eui-button-empty.gts';\nimport EuiContextMenuPanel from './eui-context-menu-panel.gts';\nimport EuiPopover from './eui-popover.gts';\nimport EuiTableSortMobileItem from './eui-table-sort-mobile-item.gts';\n\nimport type EuiI18n from '../services/eui-i18n';\nimport type { EuiPopoverSignature } from './eui-popover';\n\nexport interface EuiTableSortMobileItemOption {\n  /** Unique key. */\n  key?: string;\n  /** The column's name. */\n  name: string;\n  /** Sorts by this column. */\n  onSort?: (event: MouseEvent) => void;\n  /** The table is sorted by this column. */\n  isSorted?: boolean;\n  /** Ascending order. */\n  isSortAscending?: boolean;\n}\n\n/**\n * A \"Sorting\" button opening a menu of the sortable columns, for small\n * screens where a responsive `EuiTable` hides its header. Usually in an\n * `EuiTableHeaderMobile`.\n */\nexport interface EuiTableSortMobileSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** The sortable columns. */\n    items?: EuiTableSortMobileItemOption[];\n    /** Where the menu opens. Defaults to `'downRight'`. */\n    anchorPosition?: EuiPopoverSignature['Args']['anchorPosition'];\n  };\n}\n\nexport default class EuiTableSortMobile extends Component<EuiTableSortMobileSignature> {\n  @service declare euiI18n: EuiI18n;\n\n  @tracked isPopoverOpen = false;\n\n  get label(): string {\n    return this.euiI18n.lookupToken('euiTableSortMobile.sorting', 'Sorting');\n  }\n\n  @action\n  toggle(): void {\n    this.isPopoverOpen = !this.isPopoverOpen;\n  }\n\n  @action\n  close(): void {\n    this.isPopoverOpen = false;\n  }\n\n  <template>\n    <div class=\"euiTableSortMobile\" ...attributes>\n      <EuiPopover\n        @isOpen={{this.isPopoverOpen}}\n        @closePopover={{this.close}}\n        @anchorPosition={{if @anchorPosition @anchorPosition \"downRight\"}}\n        @panelPaddingSize=\"none\"\n      >\n        <:button>\n          <EuiButtonEmpty\n            @iconType=\"arrowDown\"\n            @iconSide=\"right\"\n            @flush=\"right\"\n            @size=\"xs\"\n            {{on \"click\" this.toggle}}\n          >{{this.label}}</EuiButtonEmpty>\n        </:button>\n        <:content>\n          <EuiContextMenuPanel style=\"min-width: 200px;\">\n            {{#each @items as |item|}}\n              <EuiTableSortMobileItem\n                @onSort={{item.onSort}}\n                @isSorted={{item.isSorted}}\n                @isSortAscending={{item.isSortAscending}}\n              >{{item.name}}</EuiTableSortMobileItem>\n            {{/each}}\n          </EuiContextMenuPanel>\n        </:content>\n      </EuiPopover>\n    </div>\n  </template>\n}\n"],"names":["EuiTableSortMobile","Component","g","prototype","service","i","tracked","label","euiI18n","lookupToken","toggle","isPopoverOpen","n","action","close","setComponentTemplate","precompileTemplate","strictMode","scope","EuiPopover","EuiButtonEmpty","on","EuiContextMenuPanel","EuiTableSortMobileItem"],"mappings":";;;;;;;;;;;;;AA0Ce,MAAMA,2BAA2BC,SAAA,CAAU;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CACvDC,OAAA,CAAA,CAAA;AAAA;EAAA,QAAA,IAAAC,CAAA,CAAA,IAAA,EAAA,SAAA,CAAA,EAAA,MAAA;AAAA,EAAA;IAAAH,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,eAAA,EAAA,CAEAG,OAAA,CAAA,EAAA,YAAA;AAAA,MAAA,OAAwB,KAAA;AAAA,IAAA,CAAA,CAAA;AAAA;EAAA,cAAA,IAAAD,CAAA,CAAA,IAAA,EAAA,eAAA,CAAA,EAAA,MAAA;EAEzB,IAAIE,KAAAA,GAAgB;IAClB,OAAO,IAAI,CAACC,OAAO,CAACC,WAAW,CAAC,4BAAA,EAA8B,SAAA,CAAA;AAChE,EAAA;AAGAC,EAAAA,MAAAA,GAAe;AACb,IAAA,IAAI,CAACC,aAAa,GAAG,CAAC,IAAI,CAACA,aAAa;AAC1C,EAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAT,SAAA,EAAA,QAAA,EAAA,CAHCU,MAAA,CAAA,CAAA;AAAA;AAMDC,EAAAA,KAAAA,GAAc;IACZ,IAAI,CAACH,aAAa,GAAG,KAAA;AACvB,EAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAT,SAAA,EAAA,OAAA,EAAA,CAHCU,MAAA,CAAA,CAAA;AAAA;AAKD,EAAA;IAAAE,oBAAA,CAAAC,kBAAA,CAAA,2wBAAA,EA8BA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;oBAAAC,mBAAA;QAAAC,cAAA;QAAAC,EAAA;QAAAC,mBAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-table.js

@@ -0,0 +1,22 @@
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+/**
+ * A styled `<table>`, built from `EuiTableHeader`, `EuiTableHeaderCell`,
+ * `EuiTableBody`, `EuiTableRow` and `EuiTableRowCell`. These components
+ * only render the markup: sorting, selection and pagination stay yours
+ * (or come from a headless table library).
+ */
+function classes(compressed, tableLayout, responsive) {
+  return ['euiTable', compressed && 'euiTable--compressed', responsive !== false && 'euiTable--responsive', tableLayout === 'auto' && 'euiTable--auto'].filter(Boolean).join(' ');
+}
+const EuiTable = setComponentTemplate(precompileTemplate("<table tabindex=\"-1\" class={{classes @compressed @tableLayout @responsive}} ...attributes>{{yield}}</table>", {
+  strictMode: true,
+  scope: () => ({
+    classes
+  })
+}), templateOnly());
+
+export { EuiTable as default };
+//# sourceMappingURL=eui-table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eui-table.js","sources":["../../src/components/eui-table.gts"],"sourcesContent":["import type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/**\n * A styled `<table>`, built from `EuiTableHeader`, `EuiTableHeaderCell`,\n * `EuiTableBody`, `EuiTableRow` and `EuiTableRowCell`. These components\n * only render the markup: sorting, selection and pagination stay yours\n * (or come from a headless table library).\n */\nexport interface EuiTableSignature {\n  Element: HTMLTableElement;\n  Args: {\n    /** Smaller text and padding. */\n    compressed?: boolean;\n    /**\n     * `'fixed'` (columns share the width, text wraps or truncates) or\n     * `'auto'` (columns fit their content). Defaults to `'fixed'`.\n     */\n    tableLayout?: 'fixed' | 'auto';\n    /** On small screens, rows become cards. Defaults to `true`. */\n    responsive?: boolean;\n  };\n  Blocks: {\n    /** The header, body and footer. */\n    default: [];\n  };\n}\n\nfunction classes(compressed?: boolean, tableLayout?: string, responsive?: boolean): string {\n  return [\n    'euiTable',\n    compressed && 'euiTable--compressed',\n    responsive !== false && 'euiTable--responsive',\n    tableLayout === 'auto' && 'euiTable--auto'\n  ]\n    .filter(Boolean)\n    .join(' ');\n}\n\nconst EuiTable: TemplateOnlyComponent<EuiTableSignature> = <template>\n  <table\n    tabindex=\"-1\"\n    class={{classes @compressed @tableLayout @responsive}}\n    ...attributes\n  >{{yield}}</table>\n</template>;\n\nexport default EuiTable;\n"],"names":["classes","compressed","tableLayout","responsive","filter","Boolean","join","EuiTable","setComponentTemplate","precompileTemplate","strictMode","scope","templateOnly"],"mappings":";;;;AAEA;;;;;AAKC;AAoBD,SAASA,OAAAA,CAAQC,UAAoB,EAAEC,WAAoB,EAAEC,UAAoB,EAAS;AACxF,EAAA,OAAO,CACL,UAAA,EACAF,UAAA,IAAc,sBAAA,EACdE,UAAA,KAAe,KAAA,IAAS,sBAAA,EACxBD,WAAA,KAAgB,MAAA,IAAU,gBAAA,CAC3B,CACEE,MAAM,CAACC,OAAA,CAAA,CACPC,IAAI,CAAC,GAAA,CAAA;AACV;AAEA,MAAMC,QAAgC,GAAAC,oBAAA,CAAqBC,kBAAA,CAAA,+GAAA,EAM3D;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;AAAAX,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAY,YAAA,EAAA;;"}

package/dist/components/eui-tabs.js

@@ -5,7 +5,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiTabs = setComponentTemplate(precompileTemplate("\n  {{#let (if (eq @display \"condensed\") false (argOrDefault @bottomBorder true)) as |bottomBorder|}}\n    <div role=\"tablist\" class={{classNames (if (argOrDefault @expand false) \"euiTabs--expand\") (if bottomBorder \"euiTabs--bottomBorder\") @className componentName=\"EuiTabs\" display=(argOrDefault @display \"default\") size=(argOrDefault @size \"m\")}} ...attributes>\n      {{yield}}\n    </div>\n  {{/let}}\n", {
+const EuiTabs = setComponentTemplate(precompileTemplate("{{#let (if (eq @display \"condensed\") false (argOrDefault @bottomBorder true)) as |bottomBorder|}}\n  <div role=\"tablist\" class={{classNames (if (argOrDefault @expand false) \"euiTabs--expand\") (if bottomBorder \"euiTabs--bottomBorder\") @className componentName=\"EuiTabs\" display=(argOrDefault @display \"default\") size=(argOrDefault @size \"m\")}} ...attributes>\n    {{yield}}\n  </div>\n{{/let}}", {
   strictMode: true,
   scope: () => ({
     eq,

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

@@ -1 +1 @@
-{"version":3,"file":"eui-tabs.js","sources":["../../src/components/eui-tabs.gts"],"sourcesContent":["import { eq } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\n\nimport type { displayMapping,sizeMapping } from '../utils/css-mappings/eui-tabs.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiTabsSignature {\n  Element: HTMLDivElement;\n  Args: {\n    display?: keyof typeof displayMapping;\n    size?: keyof typeof sizeMapping;\n    expand?: boolean;\n    bottomBorder?: boolean;\n    className?: string;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiTabs: TemplateOnlyComponent<EuiTabsSignature> = <template>\n  {{#let\n    (if (eq @display \"condensed\") false (argOrDefault @bottomBorder true))\n    as |bottomBorder|\n  }}\n    <div\n      role=\"tablist\"\n      class={{classNames\n        (if (argOrDefault @expand false) \"euiTabs--expand\")\n        (if bottomBorder \"euiTabs--bottomBorder\")\n        @className\n        componentName=\"EuiTabs\"\n        display=(argOrDefault @display \"default\")\n        size=(argOrDefault @size \"m\")\n      }}\n      ...attributes\n    >\n      {{yield}}\n    </div>\n  {{/let}}\n</template>;\n\nexport default EuiTabs;\n"],"names":["EuiTabs","setComponentTemplate","precompileTemplate","strictMode","scope","eq","argOrDefault","classNames","templateOnly"],"mappings":";;;;;;;AAsBA,MAAMA,OAAmD,GAAAC,oBAAA,CAAAC,kBAAA,CAoBzD,saAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,EAAA;IAAAC,YAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-tabs.js","sources":["../../src/components/eui-tabs.gts"],"sourcesContent":["import { eq } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\n\nimport type { displayMapping,sizeMapping } from '../utils/css-mappings/eui-tabs.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** A row of `EuiTab`s; you track the selected one. See also EuiTabbedContent. */\nexport interface EuiTabsSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /**\n     * `'default'`, or `'condensed'` (tighter, no bottom border).\n     * Defaults to `'default'`.\n     */\n    display?: keyof typeof displayMapping;\n    /** `'s'`, `'m'`, `'l'` or `'xl'`. Defaults to `'m'`. */\n    size?: keyof typeof sizeMapping;\n    /** Evenly stretches the tabs to fill the width. Defaults to `false`. */\n    expand?: boolean;\n    /** Border under the tabs. Defaults to `true` (not for `'condensed'`). */\n    bottomBorder?: boolean;\n    /** Extra class(es). */\n    className?: string;\n  };\n  Blocks: {\n    /** The `EuiTab`s. */\n    default: [];\n  };\n}\n\nconst EuiTabs: TemplateOnlyComponent<EuiTabsSignature> = <template>\n  {{#let\n    (if (eq @display \"condensed\") false (argOrDefault @bottomBorder true))\n    as |bottomBorder|\n  }}\n    <div\n      role=\"tablist\"\n      class={{classNames\n        (if (argOrDefault @expand false) \"euiTabs--expand\")\n        (if bottomBorder \"euiTabs--bottomBorder\")\n        @className\n        componentName=\"EuiTabs\"\n        display=(argOrDefault @display \"default\")\n        size=(argOrDefault @size \"m\")\n      }}\n      ...attributes\n    >\n      {{yield}}\n    </div>\n  {{/let}}\n</template>;\n\nexport default EuiTabs;\n"],"names":["EuiTabs","setComponentTemplate","precompileTemplate","strictMode","scope","eq","argOrDefault","classNames","templateOnly"],"mappings":";;;;;;;AAgCA,MAAMA,OAA+B,GAAAC,oBAAA,CAAoBC,kBAAA,CAAA,wZAAA,EAoBzD;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,EAAA;IAAAC,YAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-text-align.js

@@ -4,7 +4,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiTextAlignComponent = setComponentTemplate(precompileTemplate("\n  <div class={{classNames componentName=\"EuiTextAlign\" textAlign=(argOrDefault @textAlign \"left\")}} ...attributes>\n    {{yield}}\n  </div>\n", {
+const EuiTextAlignComponent = setComponentTemplate(precompileTemplate("<div class={{classNames componentName=\"EuiTextAlign\" textAlign=(argOrDefault @textAlign \"left\")}} ...attributes>\n  {{yield}}\n</div>", {
   strictMode: true,
   scope: () => ({
     classNames,

package/dist/components/eui-text-align.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-text-align.js","sources":["../../src/components/eui-text-align.gts"],"sourcesContent":["import argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\ninterface Signature {\n  Element: HTMLDivElement;\n  Args: {\n    textAlign?: 'left' | 'center' | 'right';\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiTextAlignComponent: TemplateOnlyComponent<Signature> = <template>\n  <div\n    class={{classNames\n      componentName=\"EuiTextAlign\"\n      textAlign=(argOrDefault @textAlign \"left\")\n    }}\n    ...attributes\n  >\n    {{yield}}\n  </div>\n</template>;\n\nexport default EuiTextAlignComponent;"],"names":["EuiTextAlignComponent","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","argOrDefault","templateOnly"],"mappings":";;;;;;AAeA,MAAMA,qBAA0D,GAAAC,oBAAA,CAAAC,kBAAA,CAUhE,qJAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-text-align.js","sources":["../../src/components/eui-text-align.gts"],"sourcesContent":["import argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** Aligns its text content. */\ninterface Signature {\n  Element: HTMLDivElement;\n  Args: {\n    /** `'left'`, `'center'` or `'right'`. Defaults to `'left'`. */\n    textAlign?: 'left' | 'center' | 'right';\n  };\n  Blocks: {\n    /** The content. */\n    default: [];\n  };\n}\n\nconst EuiTextAlignComponent: TemplateOnlyComponent<Signature> = <template>\n  <div\n    class={{classNames\n      componentName=\"EuiTextAlign\"\n      textAlign=(argOrDefault @textAlign \"left\")\n    }}\n    ...attributes\n  >\n    {{yield}}\n  </div>\n</template>;\n\nexport default EuiTextAlignComponent;"],"names":["EuiTextAlignComponent","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","argOrDefault","templateOnly"],"mappings":";;;;;;AAkBA,MAAMA,qBAA6C,GAAAC,oBAAA,CAAaC,kBAAA,CAAA,2IAAA,EAUhE;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-text-area.js

@@ -8,7 +8,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiTextArea = setComponentTemplate(precompileTemplate("\n  {{#let (classNames (if @fullWidth \"euiTextArea--fullWidth\") (if @compressed \"euiTextArea--compressed\") componentName=\"EuiTextArea\" resize=(argOrDefault @resize \"vertical\")) (if @rows @rows (if @compressed 3 6)) (argOrDefault @id (randomId)) as |classes definedRows id|}}\n    <textarea id={{id}} value={{@value}} class={{classes}} rows={{definedRows}} disabled={{@disabled}} readonly={{@readOnly}} ...attributes {{validatableControl @isInvalid}} {{didInsert (optional @inputRef)}}>\n      {{yield}}\n    </textarea>\n  {{/let}}\n", {
+const EuiTextArea = setComponentTemplate(precompileTemplate("{{#let (classNames (if @fullWidth \"euiTextArea--fullWidth\") (if @compressed \"euiTextArea--compressed\") componentName=\"EuiTextArea\" resize=(argOrDefault @resize \"vertical\")) (if @rows @rows (if @compressed 3 6)) (argOrDefault @id (randomId)) as |classes definedRows id|}}\n  <textarea id={{id}} value={{@value}} class={{classes}} rows={{definedRows}} disabled={{@disabled}} readonly={{@readOnly}} ...attributes {{validatableControl @isInvalid}} {{didInsert (optional @inputRef)}}>\n    {{yield}}\n  </textarea>\n{{/let}}", {
   strictMode: true,
   scope: () => ({
     classNames,

package/dist/components/eui-text-area.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-text-area.js","sources":["../../src/components/eui-text-area.gts"],"sourcesContent":["import didInsert from '@ember/render-modifiers/modifiers/did-insert';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\n\nimport randomId from '../-private/random-id.ts';\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport validatableControl from '../modifiers/validatable-control.ts';\n\nimport type { resizeMapping } from '../utils/css-mappings/eui-text-area.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiTextAreaSignature {\n  Element: HTMLTextAreaElement;\n  Args: {\n    id?: string;\n    value?: string;\n    fullWidth?: boolean;\n    compressed?: boolean;\n    disabled?: boolean;\n    isInvalid?: boolean;\n    inputRef?: (element: HTMLTextAreaElement | null) => void;\n    rows?: number;\n    resize?: keyof typeof resizeMapping;\n    readOnly?: boolean;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiTextArea: TemplateOnlyComponent<EuiTextAreaSignature> = <template>\n  {{#let\n    (classNames\n      (if @fullWidth \"euiTextArea--fullWidth\")\n      (if @compressed \"euiTextArea--compressed\")\n      componentName=\"EuiTextArea\"\n      resize=(argOrDefault @resize \"vertical\")\n    )\n    (if @rows @rows (if @compressed 3 6))\n    (argOrDefault @id (randomId))\n    as |classes definedRows id|\n  }}\n    <textarea\n      id={{id}}\n      value={{@value}}\n      class={{classes}}\n      rows={{definedRows}}\n      disabled={{@disabled}}\n      readonly={{@readOnly}}\n      ...attributes\n      {{validatableControl @isInvalid}}\n      {{didInsert (optional @inputRef)}}\n    >\n      {{yield}}\n    </textarea>\n  {{/let}}\n</template>;\n\nexport default EuiTextArea;\n"],"names":["EuiTextArea","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","argOrDefault","randomId","validatableControl","didInsert","optional","templateOnly"],"mappings":";;;;;;;;;;AA+BA,MAAMA,WAA2D,GAAAC,oBAAA,CAAAC,kBAAA,CA0BjE,+hBAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,YAAA;IAAAC,QAAA;IAAAC,kBAAA;IAAAC,SAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-text-area.js","sources":["../../src/components/eui-text-area.gts"],"sourcesContent":["import didInsert from '@ember/render-modifiers/modifiers/did-insert';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\n\nimport randomId from '../-private/random-id.ts';\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport validatableControl from '../modifiers/validatable-control.ts';\n\nimport type { resizeMapping } from '../utils/css-mappings/eui-text-area.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** A multi-line text input. Attributes (`placeholder`, `maxlength`…) go to the `<textarea>`. */\nexport interface EuiTextAreaSignature {\n  Element: HTMLTextAreaElement;\n  Args: {\n    /** Id of the textarea. Defaults to a random id. */\n    id?: string;\n    /** The value. Update it from `{{on \"input\" …}}`. */\n    value?: string;\n    /** Stretches the textarea to its container's width. */\n    fullWidth?: boolean;\n    /** Smaller textarea, for dense forms. */\n    compressed?: boolean;\n    /** Disables the textarea. */\n    disabled?: boolean;\n    /** Shows the invalid state and marks it invalid for native form validation. */\n    isInvalid?: boolean;\n    /** Called with the `<textarea>` element once rendered. */\n    inputRef?: (element: HTMLTextAreaElement | null) => void;\n    /** Visible number of lines. */\n    rows?: number;\n    /**\n     * Which way the user can resize it: `'vertical'`, `'horizontal'`,\n     * `'both'` or `'none'`. Defaults to `'vertical'`.\n     */\n    resize?: keyof typeof resizeMapping;\n    /** Makes the textarea read-only. */\n    readOnly?: boolean;\n  };\n  Blocks: {\n    /** Unused. */\n    default: [];\n  };\n}\n\nconst EuiTextArea: TemplateOnlyComponent<EuiTextAreaSignature> = <template>\n  {{#let\n    (classNames\n      (if @fullWidth \"euiTextArea--fullWidth\")\n      (if @compressed \"euiTextArea--compressed\")\n      componentName=\"EuiTextArea\"\n      resize=(argOrDefault @resize \"vertical\")\n    )\n    (if @rows @rows (if @compressed 3 6))\n    (argOrDefault @id (randomId))\n    as |classes definedRows id|\n  }}\n    <textarea\n      id={{id}}\n      value={{@value}}\n      class={{classes}}\n      rows={{definedRows}}\n      disabled={{@disabled}}\n      readonly={{@readOnly}}\n      ...attributes\n      {{validatableControl @isInvalid}}\n      {{didInsert (optional @inputRef)}}\n    >\n      {{yield}}\n    </textarea>\n  {{/let}}\n</template>;\n\nexport default EuiTextArea;\n"],"names":["EuiTextArea","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","argOrDefault","randomId","validatableControl","didInsert","optional","templateOnly"],"mappings":";;;;;;;;;;AA8CA,MAAMA,WAAmC,GAAAC,oBAAA,CAAwBC,kBAAA,CAAA,ihBAAA,EA0BjE;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,YAAA;IAAAC,QAAA;IAAAC,kBAAA;IAAAC,SAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-text-color.js

@@ -5,7 +5,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiTextColor = setComponentTemplate(precompileTemplate("\n  {{#if (eq @tagName \"div\")}}\n    <div class={{classNames componentName=\"EuiTextColor\" color=(argOrDefault @color \"default\")}} ...attributes>\n      {{yield}}\n    </div>\n  {{else}}\n    <span class={{classNames componentName=\"EuiTextColor\" color=(argOrDefault @color \"default\")}} ...attributes>\n      {{yield}}\n    </span>\n  {{/if}}\n", {
+const EuiTextColor = setComponentTemplate(precompileTemplate("{{#if (eq @tagName \"div\")}}\n  <div class={{classNames componentName=\"EuiTextColor\" color=(argOrDefault @color \"default\")}} ...attributes>\n    {{yield}}\n  </div>\n{{else}}\n  <span class={{classNames componentName=\"EuiTextColor\" color=(argOrDefault @color \"default\")}} ...attributes>\n    {{yield}}\n  </span>\n{{/if}}", {
   strictMode: true,
   scope: () => ({
     eq,

package/dist/components/eui-text-color.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-text-color.js","sources":["../../src/components/eui-text-color.gts"],"sourcesContent":["import { eq } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\ninterface Signature {\n  Element: HTMLDivElement | HTMLSpanElement;\n  Args: {\n    color?: string;\n    tagName?: string;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiTextColor: TemplateOnlyComponent<Signature> = <template>\n  {{#if (eq @tagName \"div\")}}\n    <div\n      class={{classNames\n        componentName=\"EuiTextColor\"\n        color=(argOrDefault @color \"default\")\n      }}\n      ...attributes\n    >\n      {{yield}}\n    </div>\n  {{else}}\n    <span\n      class={{classNames\n        componentName=\"EuiTextColor\"\n        color=(argOrDefault @color \"default\")\n      }}\n      ...attributes\n    >\n      {{yield}}\n    </span>\n  {{/if}}\n</template>;\n\nexport default EuiTextColor;\n"],"names":["EuiTextColor","setComponentTemplate","precompileTemplate","strictMode","scope","eq","classNames","argOrDefault","templateOnly"],"mappings":";;;;;;;AAkBA,MAAMA,YAAiD,GAAAC,oBAAA,CAAAC,kBAAA,CAsBvD,kWAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,EAAA;IAAAC,UAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-text-color.js","sources":["../../src/components/eui-text-color.gts"],"sourcesContent":["import { eq } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** Colors its text content. */\ninterface Signature {\n  Element: HTMLDivElement | HTMLSpanElement;\n  Args: {\n    /**\n     * `'default'`, `'subdued'`, `'success'`, `'accent'`, `'danger'`,\n     * `'warning'`, `'ghost'` or `'primary'`. Defaults to `'default'`.\n     */\n    color?: string;\n    /** `'span'` (inline) or `'div'`. Defaults to `'span'`. */\n    tagName?: string;\n  };\n  Blocks: {\n    /** The content. */\n    default: [];\n  };\n}\n\nconst EuiTextColor: TemplateOnlyComponent<Signature> = <template>\n  {{#if (eq @tagName \"div\")}}\n    <div\n      class={{classNames\n        componentName=\"EuiTextColor\"\n        color=(argOrDefault @color \"default\")\n      }}\n      ...attributes\n    >\n      {{yield}}\n    </div>\n  {{else}}\n    <span\n      class={{classNames\n        componentName=\"EuiTextColor\"\n        color=(argOrDefault @color \"default\")\n      }}\n      ...attributes\n    >\n      {{yield}}\n    </span>\n  {{/if}}\n</template>;\n\nexport default EuiTextColor;\n"],"names":["EuiTextColor","setComponentTemplate","precompileTemplate","strictMode","scope","eq","classNames","argOrDefault","templateOnly"],"mappings":";;;;;;;AAyBA,MAAMA,YAAoC,GAAAC,oBAAA,CAAaC,kBAAA,CAAA,4UAAA,EAsBvD;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,EAAA;IAAAC,UAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-text-diff.js

@@ -0,0 +1,29 @@
+import { diffTokens, words } from '../-private/text-diff.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+function diff(before = '', after = '', granularity = 'words') {
+  return granularity === 'characters' ? diffTokens([...before], [...after]) : diffTokens(words(before), words(after));
+}
+function chunkText(chunk) {
+  return chunk[1];
+}
+function isAdded(chunk) {
+  return chunk[0] === 1;
+}
+function isRemoved(chunk) {
+  return chunk[0] === -1;
+}
+const EuiTextDiff = setComponentTemplate(precompileTemplate("{{#let (diff @beforeText @afterText @granularity) as |chunks|}}\n  {{#if (has-block)}}\n    {{yield chunks}}\n  {{else}}\n    <span class=\"euiTextDiff\" ...attributes>\n      {{~#each chunks as |chunk|~}}\n        {{~#if (isAdded chunk)~}}\n          <ins>{{chunkText chunk}}</ins>\n        {{~else if (isRemoved chunk)~}}\n          <del>{{chunkText chunk}}</del>\n        {{~else~}}\n          {{chunkText chunk}}\n        {{~/if~}}\n      {{~/each~}}\n    </span>\n  {{/if}}\n{{/let}}", {
+  strictMode: true,
+  scope: () => ({
+    diff,
+    isAdded,
+    chunkText,
+    isRemoved
+  })
+}), templateOnly());
+
+export { EuiTextDiff as default };
+//# sourceMappingURL=eui-text-diff.js.map

package/dist/components/eui-text-diff.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-text-diff.js","sources":["../../src/components/eui-text-diff.gts"],"sourcesContent":["import { diffTokens, words } from '../-private/text-diff.ts';\n\nimport type { DiffChunk } from '../-private/text-diff.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/**\n * Shows the changes between two texts inline: removed text in `<del>`,\n * added text in `<ins>`.\n */\nexport interface EuiTextDiffSignature {\n  Element: HTMLSpanElement;\n  Args: {\n    /** The original text. */\n    beforeText: string;\n    /** The changed text. */\n    afterText: string;\n    /**\n     * Compare whole `'words'` (easier to read) or single `'characters'`.\n     * Defaults to `'words'`.\n     */\n    granularity?: 'words' | 'characters';\n  };\n  Blocks: {\n    /**\n     * Renders the diff yourself: yields its chunks, `[operation, text]`\n     * pairs where the operation is `-1` (removed), `1` (added) or `0`.\n     */\n    default: [DiffChunk[]];\n  };\n}\n\nfunction diff(before = '', after = '', granularity = 'words'): DiffChunk[] {\n  return granularity === 'characters'\n    ? diffTokens([...before], [...after])\n    : diffTokens(words(before), words(after));\n}\n\nfunction chunkText(chunk: DiffChunk): string {\n  return chunk[1];\n}\n\nfunction isAdded(chunk: DiffChunk): boolean {\n  return chunk[0] === 1;\n}\n\nfunction isRemoved(chunk: DiffChunk): boolean {\n  return chunk[0] === -1;\n}\n\nconst EuiTextDiff: TemplateOnlyComponent<EuiTextDiffSignature> = <template>\n  {{#let (diff @beforeText @afterText @granularity) as |chunks|}}\n    {{#if (has-block)}}\n      {{yield chunks}}\n    {{else}}\n      <span class=\"euiTextDiff\" ...attributes>\n        {{~#each chunks as |chunk|~}}\n          {{~#if (isAdded chunk)~}}\n            <ins>{{chunkText chunk}}</ins>\n          {{~else if (isRemoved chunk)~}}\n            <del>{{chunkText chunk}}</del>\n          {{~else~}}\n            {{chunkText chunk}}\n          {{~/if~}}\n        {{~/each~}}\n      </span>\n    {{/if}}\n  {{/let}}\n</template>;\n\nexport default EuiTextDiff;\n"],"names":["diff","before","after","granularity","diffTokens","words","chunkText","chunk","isAdded","isRemoved","EuiTextDiff","setComponentTemplate","precompileTemplate","strictMode","scope","templateOnly"],"mappings":";;;;;AA+BA,SAASA,IAAAA,CAAKC,SAAS,EAAE,EAAEC,QAAQ,EAAE,EAAEC,WAAA,GAAc,OAAO,EAAG;AAC7D,EAAA,OAAOA,WAAA,KAAgB,eACnBC,UAAA,CAAW,CAAI,GAAAH,MAAA,CAAO,EAAE,CAAI,GAAAC,KAAA,CAAM,CAAA,GAClCE,UAAA,CAAWC,KAAA,CAAMJ,MAAA,CAAA,EAASI,KAAA,CAAMH,KAAA,CAAA,CAAA;AACtC;AAEA,SAASI,SAAAA,CAAUC,KAAgB,EAAS;EAC1C,OAAOA,KAAK,CAAC,CAAA,CAAE;AACjB;AAEA,SAASC,OAAAA,CAAQD,KAAgB,EAAU;AACzC,EAAA,OAAOA,KAAK,CAAC,CAAA,CAAE,KAAK,CAAA;AACtB;AAEA,SAASE,SAAAA,CAAUF,KAAgB,EAAU;AAC3C,EAAA,OAAOA,KAAK,CAAC,CAAA,CAAE,KAAK,EAAC;AACvB;AAEA,MAAMG,WAAmC,GAAAC,oBAAA,CAAwBC,kBAAA,CAAA,0eAAA,EAkBjE;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAd,IAAA;IAAAQ,OAAA;IAAAF,SAAA;AAAAG,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAM,YAAA,EAAA;;"}

package/dist/components/eui-text.js

@@ -7,7 +7,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiTextComponent = setComponentTemplate(precompileTemplate("\n  <div class={{classNames (unless (argOrDefault @grow true) \"euiText--constrainedWidth\") componentName=\"EuiText\" size=(argOrDefault @size \"m\")}} ...attributes>\n    {{#if (and @textAlign @color)}}\n      {{#let (component EuiTextAlign) as |Align|}}\n        {{#let (component EuiTextColor) as |Color|}}\n          <Align @textAlign={{@textAlign}}>\n            <Color @color={{@color}} @tagName=\"div\">\n              {{yield}}\n            </Color>\n          </Align>\n        {{/let}}\n      {{/let}}\n    {{else if (and @textAlign (not @color))}}\n      {{#let (component EuiTextAlign) as |Align|}}\n        <Align @textAlign={{@textAlign}}>\n          {{yield}}\n        </Align>\n      {{/let}}\n    {{else if (and (not @textAlign) @color)}}\n      {{#let (component EuiTextColor) as |Color|}}\n        <Color @color={{@color}} @tagName=\"div\">\n          {{yield}}\n        </Color>\n      {{/let}}\n    {{else}}\n      {{yield}}\n    {{/if}}\n  </div>\n", {
+const EuiTextComponent = setComponentTemplate(precompileTemplate("<div class={{classNames (unless (argOrDefault @grow true) \"euiText--constrainedWidth\") componentName=\"EuiText\" size=(argOrDefault @size \"m\")}} ...attributes>\n  {{#if (and @textAlign @color)}}\n    {{#let (component EuiTextAlign) as |Align|}}\n      {{#let (component EuiTextColor) as |Color|}}\n        <Align @textAlign={{@textAlign}}>\n          <Color @color={{@color}} @tagName=\"div\">\n            {{yield}}\n          </Color>\n        </Align>\n      {{/let}}\n    {{/let}}\n  {{else if (and @textAlign (not @color))}}\n    {{#let (component EuiTextAlign) as |Align|}}\n      <Align @textAlign={{@textAlign}}>\n        {{yield}}\n      </Align>\n    {{/let}}\n  {{else if (and (not @textAlign) @color)}}\n    {{#let (component EuiTextColor) as |Color|}}\n      <Color @color={{@color}} @tagName=\"div\">\n        {{yield}}\n      </Color>\n    {{/let}}\n  {{else}}\n    {{yield}}\n  {{/if}}\n</div>", {
   strictMode: true,
   scope: () => ({
     classNames,

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

@@ -1 +1 @@
-{"version":3,"file":"eui-text.js","sources":["../../src/components/eui-text.gts"],"sourcesContent":["import { and, not } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiTextAlign from './eui-text-align.gts';\nimport EuiTextColor from './eui-text-color.gts';\n\nimport type { sizeMapping } from '../utils/css-mappings/eui-text.ts';\nimport type { alignMapping } from '../utils/css-mappings/eui-text-align.ts';\nimport type { colorMapping } from '../utils/css-mappings/eui-text-color.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiTextSignature {\n  Element: HTMLDivElement;\n  Args: {\n    grow?: boolean;\n    size?: keyof typeof sizeMapping;\n    textAlign?: keyof typeof alignMapping;\n    color?: keyof typeof colorMapping;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiTextComponent: TemplateOnlyComponent<EuiTextSignature> = <template>\n  <div\n    class={{classNames\n      (unless (argOrDefault @grow true) \"euiText--constrainedWidth\")\n      componentName=\"EuiText\"\n      size=(argOrDefault @size \"m\")\n    }}\n    ...attributes\n  >\n    {{#if (and @textAlign @color)}}\n      {{#let (component EuiTextAlign) as |Align|}}\n        {{#let (component EuiTextColor) as |Color|}}\n          <Align @textAlign={{@textAlign}}>\n            <Color @color={{@color}} @tagName=\"div\">\n              {{yield}}\n            </Color>\n          </Align>\n        {{/let}}\n      {{/let}}\n    {{else if (and @textAlign (not @color))}}\n      {{#let (component EuiTextAlign) as |Align|}}\n        <Align @textAlign={{@textAlign}}>\n          {{yield}}\n        </Align>\n      {{/let}}\n    {{else if (and (not @textAlign) @color)}}\n      {{#let (component EuiTextColor) as |Color|}}\n        <Color @color={{@color}} @tagName=\"div\">\n          {{yield}}\n        </Color>\n      {{/let}}\n    {{else}}\n      {{yield}}\n    {{/if}}\n  </div>\n</template>;\n\nexport default EuiTextComponent;\n"],"names":["EuiTextComponent","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","argOrDefault","and","EuiTextAlign","EuiTextColor","not","templateOnly"],"mappings":";;;;;;;;;AAyBA,MAAMA,gBAA4D,GAAAC,oBAAA,CAAAC,kBAAA,CAmClE,68BAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,YAAA;IAAAC,GAAA;kBAAAC,qBAAA;IAAAC,YAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-text.js","sources":["../../src/components/eui-text.gts"],"sourcesContent":["import { and, not } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiTextAlign from './eui-text-align.gts';\nimport EuiTextColor from './eui-text-color.gts';\n\nimport type { sizeMapping } from '../utils/css-mappings/eui-text.ts';\nimport type { alignMapping } from '../utils/css-mappings/eui-text-align.ts';\nimport type { colorMapping } from '../utils/css-mappings/eui-text-color.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** Styles plain HTML content (`<p>`, `<ul>`, `<h3>`, `<code>`…) with EUI's typography. */\nexport interface EuiTextSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /**\n     * `true` lets text span the container's full width; `false` caps lines\n     * at a readable width. Defaults to `true`.\n     */\n    grow?: boolean;\n    /** `'xs'`, `'s'`, `'m'` or `'relative'` (inherits). Defaults to `'m'`. */\n    size?: keyof typeof sizeMapping;\n    /** `'left'`, `'center'` or `'right'`. */\n    textAlign?: keyof typeof alignMapping;\n    /**\n     * `'default'`, `'subdued'`, `'success'`, `'accent'`, `'danger'`,\n     * `'warning'`, `'ghost'` or `'primary'`.\n     */\n    color?: keyof typeof colorMapping;\n  };\n  Blocks: {\n    /** HTML content (paragraphs, lists, headings, code…), styled by EuiText. */\n    default: [];\n  };\n}\n\nconst EuiTextComponent: TemplateOnlyComponent<EuiTextSignature> = <template>\n  <div\n    class={{classNames\n      (unless (argOrDefault @grow true) \"euiText--constrainedWidth\")\n      componentName=\"EuiText\"\n      size=(argOrDefault @size \"m\")\n    }}\n    ...attributes\n  >\n    {{#if (and @textAlign @color)}}\n      {{#let (component EuiTextAlign) as |Align|}}\n        {{#let (component EuiTextColor) as |Color|}}\n          <Align @textAlign={{@textAlign}}>\n            <Color @color={{@color}} @tagName=\"div\">\n              {{yield}}\n            </Color>\n          </Align>\n        {{/let}}\n      {{/let}}\n    {{else if (and @textAlign (not @color))}}\n      {{#let (component EuiTextAlign) as |Align|}}\n        <Align @textAlign={{@textAlign}}>\n          {{yield}}\n        </Align>\n      {{/let}}\n    {{else if (and (not @textAlign) @color)}}\n      {{#let (component EuiTextColor) as |Color|}}\n        <Color @color={{@color}} @tagName=\"div\">\n          {{yield}}\n        </Color>\n      {{/let}}\n    {{else}}\n      {{yield}}\n    {{/if}}\n  </div>\n</template>;\n\nexport default EuiTextComponent;\n"],"names":["EuiTextComponent","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","argOrDefault","and","EuiTextAlign","EuiTextColor","not","templateOnly"],"mappings":";;;;;;;;;AAqCA,MAAMA,gBAAwC,GAAAC,oBAAA,CAAoBC,kBAAA,CAAA,m5BAAA,EAmClE;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,YAAA;IAAAC,GAAA;kBAAAC,qBAAA;IAAAC,YAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-title.js

@@ -5,7 +5,7 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiTitle = setComponentTemplate(precompileTemplate("\n  <TextBlock @tagName={{argOrDefault @tagName \"h2\"}} class={{classNames componentName=\"EuiTitle\" size=(argOrDefault @size \"m\") textTransform=@textTransform}} ...attributes>\n    {{yield}}\n  </TextBlock>\n", {
+const EuiTitle = setComponentTemplate(precompileTemplate("<TextBlock @tagName={{argOrDefault @tagName \"h2\"}} class={{classNames componentName=\"EuiTitle\" size=(argOrDefault @size \"m\") textTransform=@textTransform}} ...attributes>\n  {{yield}}\n</TextBlock>", {
   strictMode: true,
   scope: () => ({
     TextBlock,

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

@@ -1 +1 @@
-{"version":3,"file":"eui-title.js","sources":["../../src/components/eui-title.gts"],"sourcesContent":["import argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport TextBlock from './text-block.gts';\n\nimport type { sizeMapping, transformMapping } from '../utils/css-mappings/eui-title.ts';\nimport type { TextBlockSignature } from './text-block';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface EuiTitleSignature {\n  Element: HTMLHeadingElement;\n  Args: {\n    tagName?: TextBlockSignature['Args']['tagName'];\n    size?: keyof typeof sizeMapping;\n    textTransform?: keyof typeof transformMapping;\n  };\n  Blocks: {\n    default: [];\n  };\n}\n\nconst EuiTitle: TemplateOnlyComponent<EuiTitleSignature> = <template>\n  <TextBlock\n    @tagName={{argOrDefault @tagName \"h2\"}}\n    class={{classNames\n      componentName=\"EuiTitle\"\n      size=(argOrDefault @size \"m\")\n      textTransform=@textTransform\n    }}\n    ...attributes\n  >\n    {{yield}}\n  </TextBlock>\n</template>;\n\nexport default EuiTitle;\n"],"names":["EuiTitle","setComponentTemplate","precompileTemplate","strictMode","scope","TextBlock","argOrDefault","classNames","templateOnly"],"mappings":";;;;;;;AAoBA,MAAMA,QAAqD,GAAAC,oBAAA,CAAAC,kBAAA,CAY3D,uNAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,SAAA;IAAAC,YAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-title.js","sources":["../../src/components/eui-title.gts"],"sourcesContent":["import argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport TextBlock from './text-block.gts';\n\nimport type { sizeMapping, transformMapping } from '../utils/css-mappings/eui-title.ts';\nimport type { TextBlockSignature } from './text-block';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/**\n * A heading styled with EUI's type scale:\n * `<EuiTitle @size=\"s\" @tagName=\"h3\">Settings</EuiTitle>`.\n */\nexport interface EuiTitleSignature {\n  Element: HTMLHeadingElement;\n  Args: {\n    /**\n     * The heading tag EuiTitle renders: `'h1'`–`'h6'`, `'p'` or `'legend'`.\n     * Defaults to `'h2'`. Put the text directly inside EuiTitle; do not wrap\n     * it in another heading.\n     */\n    tagName?: TextBlockSignature['Args']['tagName'];\n    /**\n     * `'xxxs'`, `'xxs'`, `'xs'`, `'s'`, `'m'` or `'l'`. Defaults to `'m'`.\n     * Size is independent of the tag: pick the tag for the page outline and\n     * the size for the look.\n     */\n    size?: keyof typeof sizeMapping;\n    /** `'uppercase'` for all caps. */\n    textTransform?: keyof typeof transformMapping;\n  };\n  Blocks: {\n    /** The title's text. */\n    default: [];\n  };\n}\n\nconst EuiTitle: TemplateOnlyComponent<EuiTitleSignature> = <template>\n  <TextBlock\n    @tagName={{argOrDefault @tagName \"h2\"}}\n    class={{classNames\n      componentName=\"EuiTitle\"\n      size=(argOrDefault @size \"m\")\n      textTransform=@textTransform\n    }}\n    ...attributes\n  >\n    {{yield}}\n  </TextBlock>\n</template>;\n\nexport default EuiTitle;\n"],"names":["EuiTitle","setComponentTemplate","precompileTemplate","strictMode","scope","TextBlock","argOrDefault","classNames","templateOnly"],"mappings":";;;;;;;AAoCA,MAAMA,QAAgC,GAAAC,oBAAA,CAAqBC,kBAAA,CAAA,6MAAA,EAY3D;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,SAAA;IAAAC,YAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-toast.js

@@ -9,7 +9,11 @@ import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 import templateOnly from '@ember/component/template-only';
 
-const EuiToast = setComponentTemplate(precompileTemplate("\n  <div class={{classNames componentName=\"EuiToast\" color=(argOrDefault @color \"none\")}} ...attributes>\n    {{!-- TODO: Translate strings when EuiI18n is available --}}\n    <p {{screenReaderOnly}}>\n      A new notification appears\n    </p>\n\n    <div class={{classNames \"euiToastHeader\" (if @body \"euiToastHeader--withBody\")}} aria-label=\"Notification\" data-test-subj=\"euiToastHeader\">\n      {{#if @iconType}}\n        <EuiIcon @iconClasses=\"euiToastHeader__icon\" @type={{@iconType}} @size=\"m\" aria-hidden=\"true\" />\n      {{/if}}\n\n      <span class=\"euiToastHeader__title\">\n        {{@title}}\n      </span>\n    </div>\n\n    {{#if @onClose}}\n      <button type=\"button\" class=\"euiToast__closeButton\" aria-label=\"Dismiss toast\" data-test-subj=\"toastCloseButton\" {{on \"click\" @onClose}}>\n        <EuiIcon @type=\"cross\" @size=\"m\" aria-hidden=\"true\" />\n      </button>\n    {{/if}}\n\n    {{#if @body}}\n      {{#if @useMarkdownFormat}}\n        <EuiMarkdownFormat @value={{@body}} />\n      {{else}}\n        <EuiText @size=\"s\" class=\"euiToastBody\">\n          {{@body}}\n        </EuiText>\n      {{/if}}\n    {{/if}}\n  </div>\n", {
+/**
+ * A notification card. Usually shown through the `euiToaster` service and
+ * EuiGlobalToastList rather than rendered directly.
+ */
+const EuiToast = setComponentTemplate(precompileTemplate("<div class={{classNames componentName=\"EuiToast\" color=(argOrDefault @color \"none\")}} ...attributes>\n  {{!-- TODO: Translate strings when EuiI18n is available --}}\n  <p {{screenReaderOnly}}>\n    A new notification appears\n  </p>\n\n  <div class={{classNames \"euiToastHeader\" (if @body \"euiToastHeader--withBody\")}} aria-label=\"Notification\" data-test-subj=\"euiToastHeader\">\n    {{#if @iconType}}\n      <EuiIcon @iconClasses=\"euiToastHeader__icon\" @type={{@iconType}} @size=\"m\" aria-hidden=\"true\" />\n    {{/if}}\n\n    <span class=\"euiToastHeader__title\">\n      {{@title}}\n    </span>\n  </div>\n\n  {{#if @onClose}}\n    <button type=\"button\" class=\"euiToast__closeButton\" aria-label=\"Dismiss toast\" data-test-subj=\"toastCloseButton\" {{on \"click\" @onClose}}>\n      <EuiIcon @type=\"cross\" @size=\"m\" aria-hidden=\"true\" />\n    </button>\n  {{/if}}\n\n  {{#if @body}}\n    {{#if @useMarkdownFormat}}\n      <EuiMarkdownFormat @value={{@body}} />\n    {{else}}\n      <EuiText @size=\"s\" class=\"euiToastBody\">\n        {{@body}}\n      </EuiText>\n    {{/if}}\n  {{/if}}\n</div>", {
   strictMode: true,
   scope: () => ({
     classNames,

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

@@ -1 +1 @@
-{"version":3,"file":"eui-toast.js","sources":["../../src/components/eui-toast.gts"],"sourcesContent":["import { on } from '@ember/modifier';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport screenReaderOnly from '../modifiers/screen-reader-only.ts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiMarkdownFormat from './eui-markdown-format.gts';\nimport EuiText from './eui-text.gts';\n\nimport type { EuiIconSignature } from './eui-icon';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface IEuiToast {\n  /**\n   * The title of the toast\n   */\n  title?: string;\n  /**\n   * The body of the toast\n   */\n  body?: string;\n  /**\n   * The color of the toast\n   */\n  color?: 'primary' | 'success' | 'warning' | 'danger' | 'none';\n  /**\n   * The icon type of the toast\n   */\n  iconType?: EuiIconSignature['Args']['type'];\n  /**\n   * The callback function when the toast is closed\n   */\n  onClose?: () => void;\n  /**\n   * Whether to use markdown format for the body\n   */\n  useMarkdownFormat?: boolean;\n}\n\nexport interface EuiToastSignature {\n  Element: HTMLDivElement;\n  Args: IEuiToast;\n}\n\nconst EuiToast: TemplateOnlyComponent<EuiToastSignature> = <template>\n  <div\n    class={{classNames\n      componentName=\"EuiToast\"\n      color=(argOrDefault @color \"none\")\n    }}\n    ...attributes\n  >\n    {{! TODO: Translate strings when EuiI18n is available }}\n    <p {{screenReaderOnly}}>\n      A new notification appears\n    </p>\n\n    <div\n      class={{classNames\n        \"euiToastHeader\"\n        (if @body \"euiToastHeader--withBody\")\n      }}\n      aria-label=\"Notification\"\n      data-test-subj=\"euiToastHeader\"\n    >\n      {{#if @iconType}}\n        <EuiIcon\n          @iconClasses=\"euiToastHeader__icon\"\n          @type={{@iconType}}\n          @size=\"m\"\n          aria-hidden=\"true\"\n        />\n      {{/if}}\n\n      <span class=\"euiToastHeader__title\">\n        {{@title}}\n      </span>\n    </div>\n\n    {{#if @onClose}}\n      <button\n        type=\"button\"\n        class=\"euiToast__closeButton\"\n        aria-label=\"Dismiss toast\"\n        data-test-subj=\"toastCloseButton\"\n        {{on \"click\" @onClose}}\n      >\n        <EuiIcon @type=\"cross\" @size=\"m\" aria-hidden=\"true\" />\n      </button>\n    {{/if}}\n\n    {{#if @body}}\n      {{#if @useMarkdownFormat}}\n        <EuiMarkdownFormat @value={{@body}} />\n      {{else}}\n        <EuiText @size=\"s\" class=\"euiToastBody\">\n          {{@body}}\n        </EuiText>\n      {{/if}}\n    {{/if}}\n  </div>\n</template>;\n\nexport default EuiToast;\n"],"names":["EuiToast","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","argOrDefault","screenReaderOnly","EuiIcon","on","EuiMarkdownFormat","EuiText","templateOnly"],"mappings":";;;;;;;;;;;AA4CA,MAAMA,QAAqD,GAAAC,oBAAA,CAAAC,kBAAA,CAyD3D,iqCAAA,EAAA;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,YAAA;IAAAC,gBAAA;IAAAC,OAAA;IAAAC,EAAA;uBAAAC,iCAAA;AAAAC,aAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;;;"}
+{"version":3,"file":"eui-toast.js","sources":["../../src/components/eui-toast.gts"],"sourcesContent":["import { on } from '@ember/modifier';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport screenReaderOnly from '../modifiers/screen-reader-only.ts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiMarkdownFormat from './eui-markdown-format.gts';\nimport EuiText from './eui-text.gts';\n\nimport type { EuiIconSignature } from './eui-icon';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nexport interface IEuiToast {\n  /**\n   * The title of the toast.\n   */\n  title?: string;\n  /**\n   * The body text of the toast (markdown with `useMarkdownFormat`).\n   */\n  body?: string;\n  /**\n   * `'primary'`, `'success'`, `'warning'`, `'danger'` or `'none'`.\n   * Defaults to `'none'`.\n   */\n  color?: 'primary' | 'success' | 'warning' | 'danger' | 'none';\n  /**\n   * Icon before the title, e.g. `'check'` or `'alert'`.\n   */\n  iconType?: EuiIconSignature['Args']['type'];\n  /**\n   * Shows a close button calling this function.\n   */\n  onClose?: () => void;\n  /**\n   * Renders `body` as markdown (EuiMarkdownFormat).\n   */\n  useMarkdownFormat?: boolean;\n}\n\n/**\n * A notification card. Usually shown through the `euiToaster` service and\n * EuiGlobalToastList rather than rendered directly.\n */\nexport interface EuiToastSignature {\n  Element: HTMLDivElement;\n  Args: IEuiToast;\n}\n\nconst EuiToast: TemplateOnlyComponent<EuiToastSignature> = <template>\n  <div\n    class={{classNames\n      componentName=\"EuiToast\"\n      color=(argOrDefault @color \"none\")\n    }}\n    ...attributes\n  >\n    {{! TODO: Translate strings when EuiI18n is available }}\n    <p {{screenReaderOnly}}>\n      A new notification appears\n    </p>\n\n    <div\n      class={{classNames\n        \"euiToastHeader\"\n        (if @body \"euiToastHeader--withBody\")\n      }}\n      aria-label=\"Notification\"\n      data-test-subj=\"euiToastHeader\"\n    >\n      {{#if @iconType}}\n        <EuiIcon\n          @iconClasses=\"euiToastHeader__icon\"\n          @type={{@iconType}}\n          @size=\"m\"\n          aria-hidden=\"true\"\n        />\n      {{/if}}\n\n      <span class=\"euiToastHeader__title\">\n        {{@title}}\n      </span>\n    </div>\n\n    {{#if @onClose}}\n      <button\n        type=\"button\"\n        class=\"euiToast__closeButton\"\n        aria-label=\"Dismiss toast\"\n        data-test-subj=\"toastCloseButton\"\n        {{on \"click\" @onClose}}\n      >\n        <EuiIcon @type=\"cross\" @size=\"m\" aria-hidden=\"true\" />\n      </button>\n    {{/if}}\n\n    {{#if @body}}\n      {{#if @useMarkdownFormat}}\n        <EuiMarkdownFormat @value={{@body}} />\n      {{else}}\n        <EuiText @size=\"s\" class=\"euiToastBody\">\n          {{@body}}\n        </EuiText>\n      {{/if}}\n    {{/if}}\n  </div>\n</template>;\n\nexport default EuiToast;\n"],"names":["EuiToast","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","argOrDefault","screenReaderOnly","EuiIcon","on","EuiMarkdownFormat","EuiText","templateOnly"],"mappings":";;;;;;;;;;;AAwCA;;;AAGC;AAMD,MAAMA,QAAgC,GAAAC,oBAAA,CAAqBC,kBAAA,CAAA,qmCAAA,EAyD3D;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,YAAA;IAAAC,gBAAA;IAAAC,OAAA;IAAAC,EAAA;uBAAAC,iCAAA;AAAAC,aAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-token.js

@@ -0,0 +1,67 @@
+import cssStyle from '../-private/css-style.js';
+import { hexToRgb } from '../helpers/hex-to-rgb.js';
+import { isColorDark } from '../helpers/is-color-dark.js';
+import { TOKEN_MAP } from '../utils/token-map.js';
+import EuiIcon from './eui-icon.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+const SIZES = {
+  xs: 'euiToken--xsmall',
+  s: 'euiToken--small',
+  m: 'euiToken--medium',
+  l: 'euiToken--large'
+};
+const SHAPES = {
+  circle: 'euiToken--circle',
+  square: 'euiToken--square',
+  rectangle: 'euiToken--rectangle'
+};
+const FILLS = {
+  none: null,
+  light: 'euiToken--light',
+  dark: 'euiToken--dark'
+};
+const COLORS = ['euiColorVis0', 'euiColorVis1', 'euiColorVis2', 'euiColorVis3', 'euiColorVis4', 'euiColorVis5', 'euiColorVis6', 'euiColorVis7', 'euiColorVis8', 'euiColorVis9', 'gray'];
+
+/**
+ * A small icon in a colored shape that tells the type of a value or code
+ * symbol, e.g. a field's type (string, number, date) in a list of fields.
+ */
+
+function display(iconType, color, shape, fill, size = 's') {
+  const preset = typeof iconType === 'string' ? TOKEN_MAP[iconType] : undefined;
+  const finalColor = color ?? preset?.color ?? 'gray';
+  const finalShape = shape ?? preset?.shape ?? 'circle';
+  let finalFill = fill ?? preset?.fill ?? 'light';
+  const style = {};
+  let colorClass;
+  if (COLORS.includes(finalColor)) {
+    colorClass = `euiToken--${finalColor}`;
+  } else if (finalFill === 'none') {
+    style['color'] = finalColor;
+  } else {
+    finalFill = 'dark';
+    style['backgroundColor'] = finalColor;
+    style['color'] = isColorDark(...hexToRgb(finalColor)) ? '#FFFFFF' : '#000000';
+  }
+  // token icons look best one size up at the small size; icons have no xs
+  const isTokenIcon = typeof iconType === 'string' && iconType.startsWith('token');
+  const iconSize = size === 'xs' ? 's' : isTokenIcon && size === 's' ? 'm' : size;
+  return {
+    classes: ['euiToken', colorClass, SHAPES[finalShape], FILLS[finalFill], SIZES[size]].filter(Boolean).join(' '),
+    style: cssStyle(style),
+    iconSize
+  };
+}
+const EuiToken = setComponentTemplate(precompileTemplate("{{#let (display @iconType @color @shape @fill @size) as |token|}}\n  <span class={{token.classes}} style={{token.style}} ...attributes>\n    <EuiIcon @type={{@iconType}} @size={{token.iconSize}} @title={{@title}} />\n  </span>\n{{/let}}", {
+  strictMode: true,
+  scope: () => ({
+    display,
+    EuiIcon
+  })
+}), templateOnly());
+
+export { EuiToken as default };
+//# sourceMappingURL=eui-token.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"eui-token.js","sources":["../../src/components/eui-token.gts"],"sourcesContent":["import cssStyle from '../-private/css-style.ts';\nimport { hexToRgb } from '../helpers/hex-to-rgb.ts';\nimport { isColorDark } from '../helpers/is-color-dark.ts';\nimport { TOKEN_MAP } from '../utils/token-map.ts';\nimport EuiIcon from './eui-icon.gts';\n\nimport type { CssProperties } from '../-private/css-style.ts';\nimport type { IconType } from './eui-icon';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nconst SIZES = {\n  xs: 'euiToken--xsmall',\n  s: 'euiToken--small',\n  m: 'euiToken--medium',\n  l: 'euiToken--large'\n};\n\nconst SHAPES = {\n  circle: 'euiToken--circle',\n  square: 'euiToken--square',\n  rectangle: 'euiToken--rectangle'\n};\n\nconst FILLS = {\n  none: null,\n  light: 'euiToken--light',\n  dark: 'euiToken--dark'\n};\n\nconst COLORS = [\n  'euiColorVis0',\n  'euiColorVis1',\n  'euiColorVis2',\n  'euiColorVis3',\n  'euiColorVis4',\n  'euiColorVis5',\n  'euiColorVis6',\n  'euiColorVis7',\n  'euiColorVis8',\n  'euiColorVis9',\n  'gray'\n] as const;\n\ntype TokenSize = keyof typeof SIZES;\n\n/**\n * A small icon in a colored shape that tells the type of a value or code\n * symbol, e.g. a field's type (string, number, date) in a list of fields.\n */\nexport interface EuiTokenSignature {\n  Element: HTMLSpanElement;\n  Args: {\n    /**\n     * The icon: one of EUI's `token*` icons (`'tokenString'`,\n     * `'tokenNumber'`, `'tokenDate'`, …), which come with their own shape\n     * and color, or any other `EuiIcon` type.\n     */\n    iconType: IconType;\n    /**\n     * `'euiColorVis0'` to `'euiColorVis9'`, `'gray'`, or a hex color (which\n     * forces `@fill=\"dark\"` unless `@fill=\"none\"`). Defaults to the token\n     * icon's color, or `'gray'`.\n     */\n    color?: string;\n    /** `'circle'`, `'square'` or `'rectangle'`. Defaults to the token icon's, or `'circle'`. */\n    shape?: 'circle' | 'square' | 'rectangle';\n    /**\n     * `'light'` (tinted with a border), `'dark'` (solid) or `'none'`.\n     * Defaults to the token icon's, or `'light'`.\n     */\n    fill?: 'light' | 'dark' | 'none';\n    /** `'xs'`, `'s'`, `'m'` or `'l'`. Defaults to `'s'`. */\n    size?: 'xs' | 's' | 'm' | 'l';\n    /** Title of the icon, read by screen readers, e.g. \"String field\". */\n    title?: string;\n  };\n}\n\ninterface Display {\n  classes: string;\n  style: ReturnType<typeof cssStyle>;\n  iconSize: 's' | 'm' | 'l';\n}\n\nfunction display(\n  iconType: IconType,\n  color: string | undefined,\n  shape: keyof typeof SHAPES | undefined,\n  fill: keyof typeof FILLS | undefined,\n  size: TokenSize = 's'\n): Display {\n  const preset = typeof iconType === 'string' ? TOKEN_MAP[iconType] : undefined;\n  const finalColor = color ?? preset?.color ?? 'gray';\n  const finalShape = shape ?? preset?.shape ?? 'circle';\n  let finalFill = fill ?? preset?.fill ?? 'light';\n  const style: CssProperties = {};\n  let colorClass: string | undefined;\n\n  if ((COLORS as readonly string[]).includes(finalColor)) {\n    colorClass = `euiToken--${finalColor}`;\n  } else if (finalFill === 'none') {\n    style['color'] = finalColor;\n  } else {\n    finalFill = 'dark';\n    style['backgroundColor'] = finalColor;\n    style['color'] = isColorDark(...hexToRgb(finalColor)) ? '#FFFFFF' : '#000000';\n  }\n\n  // token icons look best one size up at the small size; icons have no xs\n  const isTokenIcon = typeof iconType === 'string' && iconType.startsWith('token');\n  const iconSize = size === 'xs' ? 's' : isTokenIcon && size === 's' ? 'm' : size;\n\n  return {\n    classes: [\n      'euiToken',\n      colorClass,\n      SHAPES[finalShape],\n      FILLS[finalFill],\n      SIZES[size]\n    ]\n      .filter(Boolean)\n      .join(' '),\n    style: cssStyle(style),\n    iconSize\n  };\n}\n\nconst EuiToken: TemplateOnlyComponent<EuiTokenSignature> = <template>\n  {{#let (display @iconType @color @shape @fill @size) as |token|}}\n    <span class={{token.classes}} style={{token.style}} ...attributes>\n      <EuiIcon @type={{@iconType}} @size={{token.iconSize}} @title={{@title}} />\n    </span>\n  {{/let}}\n</template>;\n\nexport default EuiToken;\n"],"names":["SIZES","xs","s","m","l","SHAPES","circle","square","rectangle","FILLS","none","light","dark","COLORS","display","iconType","color","shape","fill","size","preset","TOKEN_MAP","undefined","finalColor","finalShape","finalFill","style","colorClass","includes","isColorDark","hexToRgb","isTokenIcon","startsWith","iconSize","classes","filter","Boolean","join","cssStyle","EuiToken","setComponentTemplate","precompileTemplate","strictMode","scope","EuiIcon","templateOnly"],"mappings":";;;;;;;;;AAUA,MAAMA,KAAA,GAAQ;AACZC,EAAAA,EAAA,EAAI,kBAAA;AACJC,EAAAA,CAAA,EAAG,iBAAA;AACHC,EAAAA,CAAA,EAAG,kBAAA;AACHC,EAAAA,CAAA,EAAG;AACL,CAAA;AAEA,MAAMC,MAAA,GAAS;AACbC,EAAAA,MAAA,EAAQ,kBAAA;AACRC,EAAAA,MAAA,EAAQ,kBAAA;AACRC,EAAAA,SAAA,EAAW;AACb,CAAA;AAEA,MAAMC,KAAA,GAAQ;AACZC,EAAAA,IAAA,EAAM,IAAA;AACNC,EAAAA,KAAA,EAAO,iBAAA;AACPC,EAAAA,IAAA,EAAM;AACR,CAAA;AAEA,MAAMC,MAAA,GAAS,CACb,cAAA,EACA,cAAA,EACA,cAAA,EACA,cAAA,EACA,cAAA,EACA,cAAA,EACA,cAAA,EACA,cAAA,EACA,cAAA,EACA,cAAA,EACA,MAAA,CACD;;AAID;;;AAGC;;AAoCD,SAASC,OAAAA,CACPC,QAAkB,EAClBC,KAAyB,EACzBC,KAAsC,EACtCC,IAAoC,EACpCC,IAAM,GAAY,GAAG,EACpB;AACD,EAAA,MAAMC,SAAS,OAAOL,QAAA,KAAa,WAAWM,SAAS,CAACN,SAAS,GAAGO,SAAA;EACpE,MAAMC,UAAA,GAAaP,KAAA,IAASI,MAAA,EAAQJ,KAAA,IAAS,MAAA;EAC7C,MAAMQ,UAAA,GAAaP,KAAA,IAASG,MAAA,EAAQH,KAAA,IAAS,QAAA;EAC7C,IAAIQ,SAAA,GAAYP,IAAA,IAAQE,MAAA,EAAQF,IAAA,IAAQ,OAAA;EACxC,MAAMQ,QAAuB,EAAC;AAC9B,EAAA,IAAIC,UAA8B;AAElC,EAAA,IAAKd,MAAA,CAA6Be,QAAQ,CAACL,UAAA,CAAA,EAAa;IACtDI,UAAA,GAAa,CAAA,UAAA,EAAaJ,UAAA,CAAA,CAAY;AACxC,EAAA,CAAA,MAAO,IAAIE,cAAc,MAAA,EAAQ;AAC/BC,IAAAA,KAAK,CAAC,QAAQ,GAAGH,UAAA;AACnB,EAAA,CAAA,MAAO;AACLE,IAAAA,SAAA,GAAY,MAAA;AACZC,IAAAA,KAAK,CAAC,kBAAkB,GAAGH,UAAA;AAC3BG,IAAAA,KAAK,CAAC,OAAA,CAAQ,GAAGG,WAAA,CAAA,GAAeC,QAAA,CAASP,eAAe,SAAA,GAAY,SAAA;AACtE,EAAA;AAEA;AACA,EAAA,MAAMQ,cAAc,OAAOhB,QAAA,KAAa,QAAA,IAAYA,QAAA,CAASiB,UAAU,CAAC,OAAA,CAAA;AACxE,EAAA,MAAMC,WAAWd,IAAA,KAAS,IAAA,GAAO,MAAMY,WAAA,IAAeZ,IAAA,KAAS,MAAM,GAAA,GAAMA,IAAA;EAE3E,OAAO;AACLe,IAAAA,OAAA,EAAS,CACP,UAAA,EACAP,UAAA,EACAtB,MAAM,CAACmB,UAAA,CAAW,EAClBf,KAAK,CAACgB,SAAA,CAAU,EAChBzB,KAAK,CAACmB,IAAA,CAAK,CACZ,CACEgB,MAAM,CAACC,OAAA,CAAA,CACPC,IAAI,CAAC,GAAA,CAAA;AACRX,IAAAA,KAAA,EAAOY,QAAA,CAASZ,KAAA,CAAA;AAChBO,IAAAA;GACF;AACF;AAEA,MAAMM,QAAgC,GAAAC,oBAAA,CAAqBC,kBAAA,CAAA,8OAAA,EAM3D;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAA7B,OAAA;AAAA8B,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}

package/dist/components/eui-tool-tip-popover.js

@@ -5,7 +5,7 @@ import didInsert from '@ember/render-modifiers/modifiers/did-insert';
 import willDestroy from '@ember/render-modifiers/modifiers/will-destroy';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import { n } from 'decorator-transforms/runtime';
+import { n } from 'decorator-transforms/runtime-esm';
 
 class EuiTooltipPopover extends Component {
   popover = null;
@@ -43,7 +43,7 @@ class EuiTooltipPopover extends Component {
     n(this.prototype, "updateDimensions", [action]);
   }
   static {
-    setComponentTemplate(precompileTemplate("\n    <div class=\"euiToolTipPopover\" {{didInsert this.setPopoverRef}} {{willDestroy (fn this.setPopoverRef null)}} ...attributes>\n      {{#if @hasTitle}}\n        <div class=\"euiToolTip__title\">\n          {{yield to=\"title\"}}\n        </div>\n      {{/if}}\n      {{yield to=\"content\"}}\n    </div>\n  ", {
+    setComponentTemplate(precompileTemplate("<div class=\"euiToolTipPopover\" {{didInsert this.setPopoverRef}} {{willDestroy (fn this.setPopoverRef null)}} ...attributes>\n  {{#if @hasTitle}}\n    <div class=\"euiToolTip__title\">\n      {{yield to=\"title\"}}\n    </div>\n  {{/if}}\n  {{yield to=\"content\"}}\n</div>", {
       strictMode: true,
       scope: () => ({
         didInsert,

package/dist/components/eui-tool-tip-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-tool-tip-popover.js","sources":["../../src/components/eui-tool-tip-popover.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { fn } from '@ember/helper';\nimport { action } from '@ember/object';\nimport didInsert from '@ember/render-modifiers/modifiers/did-insert';\nimport willDestroy from '@ember/render-modifiers/modifiers/will-destroy';\nimport type Owner from '@ember/owner';\n\nimport type { CommonArgs } from './common.ts';\n\ntype EuiTooltipPopoverArgs = CommonArgs & {\n    positionToolTip: () => void;\n    title?: Component;\n    popoverRef?: (ref: HTMLDivElement | null) => void;\n    hasTitle?: boolean;\n  };\n\nexport interface EuiTooltipPopoverSignature {\n  Element: HTMLDivElement;\n  Args: EuiTooltipPopoverArgs;\n  Blocks: {\n    default: [];\n    title: [];\n    content: [];\n  };\n}\n\nexport default class EuiTooltipPopover extends Component<EuiTooltipPopoverSignature> {\n  popover: HTMLDivElement | null = null;\n\n  constructor(owner: Owner, args: EuiTooltipPopoverArgs) {\n    super(owner, args);\n    document.body.classList.add('euiBody-hasPortalContent');\n    window.addEventListener('resize', this.updateDimensions);\n    window.addEventListener('scroll', this.updateDimensions, true);\n  }\n\n  willDestroy(): void {\n    super.willDestroy();\n    document.body.classList.remove('euiBody-hasPortalContent');\n    window.removeEventListener('resize', this.updateDimensions);\n    window.removeEventListener('scroll', this.updateDimensions, true);\n    this.popover = null;\n  }\n\n  @action\n  setPopoverRef(popover: HTMLDivElement | null): void {\n    this.popover = popover;\n\n    if (this.args.popoverRef) {\n      this.args.popoverRef(popover);\n    }\n  }\n\n  @action\n  updateDimensions(): void {\n    requestAnimationFrame(() => {\n      // Because of this delay, sometimes `positionToolTip` becomes unavailable.\n      if (this.popover) {\n        this.args.positionToolTip();\n      }\n    });\n  }\n\n  <template>\n    <div\n      class=\"euiToolTipPopover\"\n      {{didInsert this.setPopoverRef}}\n      {{willDestroy (fn this.setPopoverRef null)}}\n      ...attributes\n    >\n      {{#if @hasTitle}}\n        <div class=\"euiToolTip__title\">\n          {{yield to=\"title\"}}\n        </div>\n      {{/if}}\n      {{yield to=\"content\"}}\n    </div>\n  </template>\n}\n"],"names":["EuiTooltipPopover","Component","popover","constructor","owner","args","document","body","classList","add","window","addEventListener","updateDimensions","willDestroy","remove","removeEventListener","setPopoverRef","popoverRef","n","prototype","action","requestAnimationFrame","positionToolTip","setComponentTemplate","precompileTemplate","strictMode","scope","didInsert","fn"],"mappings":";;;;;;;;;AA0Be,MAAMA,0BAA0BC,SAAU,CAAA;AACvDC,EAAAA,OAAS,GAAwB,IAAK;AAEtCC,EAAAA,WAAAA,CAAYC,KAAY,EAAEC,IAA2B,EAAE;AACrD,IAAA,KAAK,CAACD,KAAO,EAAAC,IAAA,CAAA;IACbC,QAAA,CAASC,IAAI,CAACC,SAAS,CAACC,GAAG,CAAC,0BAAA,CAAA;IAC5BC,MAAA,CAAOC,gBAAgB,CAAC,QAAU,EAAA,IAAI,CAACC,gBAAgB,CAAA;IACvDF,MAAA,CAAOC,gBAAgB,CAAC,QAAA,EAAU,IAAI,CAACC,gBAAgB,EAAE,IAAA,CAAA;AAC3D;AAEAC,EAAAA,WAAAA,GAAoB;IAClB,KAAK,CAACA,WAAA,EAAA;IACNP,QAAA,CAASC,IAAI,CAACC,SAAS,CAACM,MAAM,CAAC,0BAAA,CAAA;IAC/BJ,MAAA,CAAOK,mBAAmB,CAAC,QAAU,EAAA,IAAI,CAACH,gBAAgB,CAAA;IAC1DF,MAAA,CAAOK,mBAAmB,CAAC,QAAA,EAAU,IAAI,CAACH,gBAAgB,EAAE,IAAA,CAAA;IAC5D,IAAI,CAACV,OAAO,GAAG,IAAA;AACjB;EAGAc,aAAAA,CAAcd,OAA8B,EAAQ;IAClD,IAAI,CAACA,OAAO,GAAGA,OAAA;AAEf,IAAA,IAAI,IAAI,CAACG,IAAI,CAACY,UAAU,EAAE;AACxB,MAAA,IAAI,CAACZ,IAAI,CAACY,UAAU,CAACf,OAAA,CAAA;AACvB;AACF;AAAA,EAAA;IAAAgB,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,eAAA,EAAA,CAPCC,MAAA,CAAA,CAAA;AAAA;AAUDR,EAAAA,gBAAAA,GAAyB;AACvBS,IAAAA,qBAAsB,CAAA,MAAA;AACpB;MACA,IAAI,IAAI,CAACnB,OAAO,EAAE;AAChB,QAAA,IAAI,CAACG,IAAI,CAACiB,eAAe,EAAA;AAC3B;AACF,KAAA,CAAA;AACF;AAAA,EAAA;IAAAJ,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,kBAAA,EAAA,CARCC,MAAA,CAAA,CAAA;AAAA;AAUD,EAAA;IAAAG,oBAAA,CAAAC,kBAAA,CAcA,0TAAA,EAAA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,SAAA;QAAAd,WAAA;AAAAe,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"eui-tool-tip-popover.js","sources":["../../src/components/eui-tool-tip-popover.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { fn } from '@ember/helper';\nimport { action } from '@ember/object';\nimport didInsert from '@ember/render-modifiers/modifiers/did-insert';\nimport willDestroy from '@ember/render-modifiers/modifiers/will-destroy';\nimport type Owner from '@ember/owner';\n\nimport type { CommonArgs } from './common.ts';\n\ntype EuiTooltipPopoverArgs = CommonArgs & {\n  /** Repositions the tooltip (on resize and scroll). */\n  positionToolTip: () => void;\n  /** @deprecated Has no effect, use the `<:title>` block. */\n  title?: Component;\n  /** Called with the tooltip element. */\n  popoverRef?: (ref: HTMLDivElement | null) => void;\n  /** Render the title. */\n  hasTitle?: boolean;\n};\n\n/** @private The floating part of EuiToolTip. */\nexport interface EuiTooltipPopoverSignature {\n  Element: HTMLDivElement;\n  Args: EuiTooltipPopoverArgs;\n  Blocks: {\n    /** Unused. */\n    default: [];\n    /** The title. */\n    title: [];\n    /** The content. */\n    content: [];\n  };\n}\n\nexport default class EuiTooltipPopover extends Component<EuiTooltipPopoverSignature> {\n  popover: HTMLDivElement | null = null;\n\n  constructor(owner: Owner, args: EuiTooltipPopoverArgs) {\n    super(owner, args);\n    document.body.classList.add('euiBody-hasPortalContent');\n    window.addEventListener('resize', this.updateDimensions);\n    window.addEventListener('scroll', this.updateDimensions, true);\n  }\n\n  willDestroy(): void {\n    super.willDestroy();\n    document.body.classList.remove('euiBody-hasPortalContent');\n    window.removeEventListener('resize', this.updateDimensions);\n    window.removeEventListener('scroll', this.updateDimensions, true);\n    this.popover = null;\n  }\n\n  @action\n  setPopoverRef(popover: HTMLDivElement | null): void {\n    this.popover = popover;\n\n    if (this.args.popoverRef) {\n      this.args.popoverRef(popover);\n    }\n  }\n\n  @action\n  updateDimensions(): void {\n    requestAnimationFrame(() => {\n      // Because of this delay, sometimes `positionToolTip` becomes unavailable.\n      if (this.popover) {\n        this.args.positionToolTip();\n      }\n    });\n  }\n\n  <template>\n    <div\n      class=\"euiToolTipPopover\"\n      {{didInsert this.setPopoverRef}}\n      {{willDestroy (fn this.setPopoverRef null)}}\n      ...attributes\n    >\n      {{#if @hasTitle}}\n        <div class=\"euiToolTip__title\">\n          {{yield to=\"title\"}}\n        </div>\n      {{/if}}\n      {{yield to=\"content\"}}\n    </div>\n  </template>\n}\n"],"names":["EuiTooltipPopover","Component","popover","constructor","owner","args","document","body","classList","add","window","addEventListener","updateDimensions","willDestroy","remove","removeEventListener","setPopoverRef","popoverRef","n","prototype","action","requestAnimationFrame","positionToolTip","setComponentTemplate","precompileTemplate","strictMode","scope","didInsert","fn"],"mappings":";;;;;;;;;AAkCe,MAAMA,0BAA0BC,SAAA,CAAU;AACvDC,EAAAA,OAAA,GAAiC,IAAA;AAEjCC,EAAAA,WAAAA,CAAYC,KAAY,EAAEC,IAA2B,EAAE;AACrD,IAAA,KAAK,CAACD,KAAA,EAAOC,IAAA,CAAA;IACbC,QAAA,CAASC,IAAI,CAACC,SAAS,CAACC,GAAG,CAAC,0BAAA,CAAA;IAC5BC,MAAA,CAAOC,gBAAgB,CAAC,QAAA,EAAU,IAAI,CAACC,gBAAgB,CAAA;IACvDF,MAAA,CAAOC,gBAAgB,CAAC,QAAA,EAAU,IAAI,CAACC,gBAAgB,EAAE,IAAA,CAAA;AAC3D,EAAA;AAEAC,EAAAA,WAAAA,GAAoB;IAClB,KAAK,CAACA,WAAA,EAAA;IACNP,QAAA,CAASC,IAAI,CAACC,SAAS,CAACM,MAAM,CAAC,0BAAA,CAAA;IAC/BJ,MAAA,CAAOK,mBAAmB,CAAC,QAAA,EAAU,IAAI,CAACH,gBAAgB,CAAA;IAC1DF,MAAA,CAAOK,mBAAmB,CAAC,QAAA,EAAU,IAAI,CAACH,gBAAgB,EAAE,IAAA,CAAA;IAC5D,IAAI,CAACV,OAAO,GAAG,IAAA;AACjB,EAAA;EAGAc,aAAAA,CAAcd,OAA8B,EAAQ;IAClD,IAAI,CAACA,OAAO,GAAGA,OAAA;AAEf,IAAA,IAAI,IAAI,CAACG,IAAI,CAACY,UAAU,EAAE;AACxB,MAAA,IAAI,CAACZ,IAAI,CAACY,UAAU,CAACf,OAAA,CAAA;AACvB,IAAA;AACF,EAAA;AAAA,EAAA;IAAAgB,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,eAAA,EAAA,CAPCC,MAAA,CAAA,CAAA;AAAA;AAUDR,EAAAA,gBAAAA,GAAyB;AACvBS,IAAAA,qBAAA,CAAsB,MAAA;AACpB;MACA,IAAI,IAAI,CAACnB,OAAO,EAAE;AAChB,QAAA,IAAI,CAACG,IAAI,CAACiB,eAAe,EAAA;AAC3B,MAAA;AACF,IAAA,CAAA,CAAA;AACF,EAAA;AAAA,EAAA;IAAAJ,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,kBAAA,EAAA,CARCC,MAAA,CAAA,CAAA;AAAA;AAUD,EAAA;IAAAG,oBAAA,CAAAC,kBAAA,CAAA,oRAAA,EAcA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,SAAA;QAAAd,WAAA;AAAAe,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-tool-tip.js

@@ -4,6 +4,7 @@ import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
 import didInsert from '@ember/render-modifiers/modifiers/did-insert';
+import didUpdate from '@ember/render-modifiers/modifiers/did-update';
 import { next, cancel, later, scheduleOnce } from '@ember/runloop';
 import style from 'ember-style-modifier/modifiers/style';
 import { or, and, eq } from 'ember-truth-helpers';
@@ -16,7 +17,7 @@ import EuiPortal from './eui-portal.js';
 import EuiTooltipPopover from './eui-tool-tip-popover.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import { g, i, n } from 'decorator-transforms/runtime';
+import { g, i, n } from 'decorator-transforms/runtime-esm';
 
 const delayToMsMap = {
   regular: 250,
@@ -35,6 +36,12 @@ const DEFAULT_TOOLTIP_STYLES = {
   visibility: 'hidden',
   display: 'inlineBlock'
 };
+
+/**
+ * A short hint shown on hover or focus of its anchor. Keep the content
+ * short and non-essential; it is not reachable on touch screens.
+ */
+
 class EuiToolTip extends Component {
   anchor = null;
   popover = null;
@@ -319,11 +326,11 @@ class EuiToolTip extends Component {
     this._attachTo = null;
   }
   static {
-    setComponentTemplate(precompileTemplate("\n    {{#let (has-block \"content\") (has-block \"title\") (has-block \"anchor\") as |hasContentBlock hasTitleBlock hasAnchorBlock|}}\n      {{#if @attachTo}}\n        <span {{didInsert this.updateAttachTo}} {{didUpdate this.updateAttachTo @attachTo}} {{didUpdate (if (eq @isShown true) this.onFocus this.onBlur) @isShown}} {{didInsert (if (eq @isShown true) this.onFocus this.onBlur)}}></span>\n      {{else}}\n        <span role=\"tooltip\" class={{classNames \"euiToolTipAnchor\" (if (eq @display \"block\") \"euiToolTipAnchor--displayBlock\") @anchorClassName}} {{didInsert this.didInsertAnchor}} {{on \"mouseover\" this.showToolTip}} {{on \"focusin\" this.onFocus}} {{on \"focusout\" this.onBlur}} {{on \"mouseout\" this.onMouseOut}} {{didUpdate (if (eq @isShown true) this.onFocus this.onBlur) @isShown}} {{didInsert (if (eq @isShown true) this.onFocus this.onBlur)}}>\n          {{#if hasAnchorBlock}}\n            {{yield this.id to=\"anchor\"}}\n          {{else}}\n            {{yield this.id}}\n          {{/if}}\n        </span>\n      {{/if}}\n      {{#if (and this.visible (or @title @content hasContentBlock hasTitleBlock))}}\n        <EuiPortal>\n          <EuiToolTipPopover class={{classNames \"euiToolTip\" @className componentName=\"EuiToolTip\" position=this.calculatedPosition}} @positionToolTip={{this.positionToolTip}} @popoverRef={{this.setPopoverRef}} id={{this.id}} @hasTitle={{if (and (argOrDefault @hasTitle true) (or hasTitleBlock @title)) true}} role=\"tooltip\" ...attributes {{style this.toolTipStyles}}>\n            <:title>\n              {{#if hasTitleBlock}}\n                {{yield to=\"title\"}}\n              {{else}}\n                {{@title}}\n              {{/if}}\n            </:title>\n            <:content>\n              <div class=\"euiToolTip__arrow\" {{style this.arrowStyles}}></div>\n              <div {{resizeObserver onResize=this.positionToolTip}}>\n                {{#if hasContentBlock}}\n                  {{yield to=\"content\"}}\n                {{else}}\n                  {{@content}}\n                {{/if}}\n              </div>\n            </:content>\n          </EuiToolTipPopover>\n        </EuiPortal>\n      {{/if}}\n    {{/let}}\n  ", {
+    setComponentTemplate(precompileTemplate("{{#let (has-block \"content\") (has-block \"title\") (has-block \"anchor\") as |hasContentBlock hasTitleBlock hasAnchorBlock|}}\n  {{#if @attachTo}}\n    <span {{didInsert this.updateAttachTo}} {{didUpdate this.updateAttachTo @attachTo}} {{didUpdate (if (eq @isShown true) this.onFocus this.onBlur) @isShown}} {{didInsert (if (eq @isShown true) this.onFocus this.onBlur)}}></span>\n  {{else}}\n    <span role=\"tooltip\" class={{classNames \"euiToolTipAnchor\" (if (eq @display \"block\") \"euiToolTipAnchor--displayBlock\") @anchorClassName}} {{didInsert this.didInsertAnchor}} {{on \"mouseover\" this.showToolTip}} {{on \"focusin\" this.onFocus}} {{on \"focusout\" this.onBlur}} {{on \"mouseout\" this.onMouseOut}} {{didUpdate (if (eq @isShown true) this.onFocus this.onBlur) @isShown}} {{didInsert (if (eq @isShown true) this.onFocus this.onBlur)}}>\n      {{#if hasAnchorBlock}}\n        {{yield this.id to=\"anchor\"}}\n      {{else}}\n        {{yield this.id}}\n      {{/if}}\n    </span>\n  {{/if}}\n  {{#if (and this.visible (or @title @content hasContentBlock hasTitleBlock))}}\n    <EuiPortal>\n      <EuiToolTipPopover class={{classNames \"euiToolTip\" @className componentName=\"EuiToolTip\" position=this.calculatedPosition}} @positionToolTip={{this.positionToolTip}} @popoverRef={{this.setPopoverRef}} id={{this.id}} @hasTitle={{if (and (argOrDefault @hasTitle true) (or hasTitleBlock @title)) true}} role=\"tooltip\" ...attributes {{style this.toolTipStyles}}>\n        <:title>\n          {{#if hasTitleBlock}}\n            {{yield to=\"title\"}}\n          {{else}}\n            {{@title}}\n          {{/if}}\n        </:title>\n        <:content>\n          <div class=\"euiToolTip__arrow\" {{style this.arrowStyles}}></div>\n          <div {{resizeObserver onResize=this.positionToolTip}}>\n            {{#if hasContentBlock}}\n              {{yield to=\"content\"}}\n            {{else}}\n              {{@content}}\n            {{/if}}\n          </div>\n        </:content>\n      </EuiToolTipPopover>\n    </EuiPortal>\n  {{/if}}\n{{/let}}", {
       strictMode: true,
       scope: () => ({
         didInsert,
-        didUpdate: didInsert,
+        didUpdate,
         eq,
         classNames,
         on,