@ember-eui/core 14.1.4 → 16.0.0

package/dist/components/eui-header-section-item-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-header-section-item-button.js","sources":["../../src/components/eui-header-section-item-button.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';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\nimport { eq } from 'ember-truth-helpers';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport EuiButtonEmpty from './eui-button-empty.gts';\nimport EuiHideFor from './eui-hide-for.gts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiNotificationBadge from './eui-notification-badge.gts';\nimport EuiShowFor from './eui-show-for.gts';\n\nimport type { colorMapping } from '../utils/css-mappings/eui-notification-badge.ts';\nimport type { EuiHideForBreakpoints } from './eui-hide-for';\n\nconst keyframes: Keyframe[] = [\n  { transform: 'rotate(0)', offset: 0, easing: 'ease-in-out' },\n  {\n    transform: 'rotate(30deg)',\n    offset: 0.01,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-28deg)',\n    offset: 0.03,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(34deg)',\n    offset: 0.05,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-32deg)',\n    offset: 0.07,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(30deg)',\n    offset: 0.09,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-28deg)',\n    offset: 0.11,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(26deg)',\n    offset: 0.13,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-24deg)',\n    offset: 0.15,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(22deg)',\n    offset: 0.17,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-20deg)',\n    offset: 0.19,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(18deg)',\n    offset: 0.21,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-16deg)',\n    offset: 0.23,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(14deg)',\n    offset: 0.25,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-12deg)',\n    offset: 0.27,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(10deg)',\n    offset: 0.29,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-8deg)',\n    offset: 0.31,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(6deg)',\n    offset: 0.33,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-4deg)',\n    offset: 0.35,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(2deg)',\n    offset: 0.37,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-1deg)',\n    offset: 0.39,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(1deg)',\n    offset: 0.41,\n    easing: 'ease-in-out'\n  },\n  { transform: 'rotate(0)', offset: 0.43, easing: 'ease-in-out' },\n  { transform: 'rotate(0)', offset: 1, easing: 'ease-in-out' }\n];\n\n/**\n * An icon button for the header (e.g. help, notifications, user menu),\n * with an optional notification dot or count. Give it an `aria-label`.\n */\nexport interface EuiHeaderSectionItemButtonSignature {\n  Element: HTMLButtonElement | HTMLAnchorElement;\n  Args: {\n    /**\n     * Called with `{ euiAnimate }`; call `euiAnimate()` to wiggle the\n     * button, e.g. when a new notification arrives.\n     */\n    ref?: (api: { euiAnimate: () => void }) => void;\n    /** Disables the button. */\n    disabled?: boolean;\n    /** Renders a link instead of a button. */\n    href?: string;\n    /** Called on click. */\n    onClick?: (event: MouseEvent) => void;\n    /**\n     * `true` shows a dot; a number shows a count badge (a dot on small\n     * screens).\n     */\n    notification?: boolean | number;\n    /** `'accent'` or `'subdued'`. Defaults to `'accent'`. */\n    notificationColor?: keyof typeof colorMapping;\n  };\n  Blocks: {\n    /** The button's content, usually an `EuiIcon` or `EuiAvatar`. */\n    default: [];\n  };\n}\n\nconst sizes: EuiHideForBreakpoints[] = ['xs'];\n\nexport default class EuiHeaderSectionItemButtonComponent extends Component<EuiHeaderSectionItemButtonSignature> {\n  @tracked buttonRef: HTMLButtonElement | HTMLAnchorElement | undefined;\n  @tracked animationTargetRef: HTMLSpanElement | undefined;\n\n  setAnimationTargetRef = (ele: HTMLSpanElement) => {\n    this.animationTargetRef = ele;\n    this.args.ref?.({ euiAnimate: this.animate });\n  };\n\n  animate = () => {\n    this.animationTargetRef?.animate(keyframes, { duration: 5000 });\n  };\n\n  setButtonRef = (ele: HTMLButtonElement | HTMLAnchorElement) => {\n    this.buttonRef = ele;\n  };\n\n  willDestroy(): void {\n    super.willDestroy();\n    \n    this.buttonRef = undefined;\n    this.animationTargetRef = undefined;\n  }\n\n  <template>\n    <EuiButtonEmpty\n      class=\"euiHeaderSectionItemButton\"\n      @isDisabled={{@disabled}}\n      @href={{@href}}\n      @color=\"text\"\n      {{didInsert this.setButtonRef}}\n      {{on \"click\" (optional @onClick)}}\n      ...attributes\n    >\n      <span\n        {{didInsert this.setAnimationTargetRef}}\n        class=\"euiHeaderSectionItemButton__content\"\n      >\n        {{yield}}\n      </span>\n      {{#if @notification}}\n        {{#if (eq @notification true)}}\n          <EuiIcon\n            @iconClasses=\"euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot\"\n            @color={{argOrDefault @notificationColor \"accent\"}}\n            @type=\"dot\"\n            @size=\"l\"\n          />\n        {{else if @notification}}\n          <EuiHideFor @sizes={{sizes}}>\n            <EuiNotificationBadge\n              class=\"euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge\"\n              @color={{argOrDefault @notificationColor \"accent\"}}\n            >\n              {{@notification}}\n            </EuiNotificationBadge>\n          </EuiHideFor>\n          <EuiShowFor @sizes={{sizes}}>\n            <EuiIcon\n              @iconClasses=\"euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot\"\n              @color={{argOrDefault @notificationColor \"accent\"}}\n              @type=\"dot\"\n              @size=\"l\"\n            />\n          </EuiShowFor>\n        {{/if}}\n      {{/if}}\n    </EuiButtonEmpty>\n  </template>\n}\n"],"names":["keyframes","transform","offset","easing","sizes","EuiHeaderSectionItemButtonComponent","Component","g","prototype","tracked","i","setAnimationTargetRef","ele","animationTargetRef","args","ref","euiAnimate","animate","duration","setButtonRef","buttonRef","willDestroy","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","EuiButtonEmpty","didInsert","on","optional","eq","EuiIcon","argOrDefault","EuiHideFor","EuiNotificationBadge","EuiShowFor"],"mappings":"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"}
+{"version":3,"file":"eui-header-section-item-button.js","sources":["../../src/components/eui-header-section-item-button.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached, tracked } from '@glimmer/tracking';\nimport { on } from '@ember/modifier';\nimport didInsert from '@ember/render-modifiers/modifiers/did-insert';\n\nimport optional from '@nullvoxpopuli/ember-composable-helpers/helpers/optional';\nimport { eq } from 'ember-truth-helpers';\n\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport {\n  euiBreakpointsMedia,\n  euiOutsideBreakpointsMedia\n} from '../utils/eui/page-layout.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport {\n  euiHeaderSectionItemButtonStyles,\n  euiMaxBreakpoint\n} from '../utils/eui/styles.generated.ts';\nimport EuiButtonEmpty from './eui-button-empty.gts';\nimport EuiIcon from './eui-icon.gts';\nimport EuiNotificationBadge from './eui-notification-badge.gts';\n\nimport type { EuiNotificationBadgeSignature } from './eui-notification-badge';\nimport type { EuiButtonEmptySignature } from './eui-button-empty';\nimport type { EuiCss } from '../utils/eui/styles.ts';\n\nconst keyframes: Keyframe[] = [\n  { transform: 'rotate(0)', offset: 0, easing: 'ease-in-out' },\n  {\n    transform: 'rotate(30deg)',\n    offset: 0.01,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-28deg)',\n    offset: 0.03,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(34deg)',\n    offset: 0.05,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-32deg)',\n    offset: 0.07,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(30deg)',\n    offset: 0.09,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-28deg)',\n    offset: 0.11,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(26deg)',\n    offset: 0.13,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-24deg)',\n    offset: 0.15,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(22deg)',\n    offset: 0.17,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-20deg)',\n    offset: 0.19,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(18deg)',\n    offset: 0.21,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-16deg)',\n    offset: 0.23,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(14deg)',\n    offset: 0.25,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-12deg)',\n    offset: 0.27,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(10deg)',\n    offset: 0.29,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-8deg)',\n    offset: 0.31,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(6deg)',\n    offset: 0.33,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-4deg)',\n    offset: 0.35,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(2deg)',\n    offset: 0.37,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(-1deg)',\n    offset: 0.39,\n    easing: 'ease-in-out'\n  },\n  {\n    transform: 'rotate(1deg)',\n    offset: 0.41,\n    easing: 'ease-in-out'\n  },\n  { transform: 'rotate(0)', offset: 0.43, easing: 'ease-in-out' },\n  { transform: 'rotate(0)', offset: 1, easing: 'ease-in-out' }\n];\n\n/**\n * An icon button for the header (e.g. help, notifications, user menu),\n * with an optional notification dot or count. Give it an `aria-label`.\n */\nexport interface EuiHeaderSectionItemButtonSignature {\n  Element: HTMLButtonElement | HTMLAnchorElement;\n  Args: {\n    /**\n     * Called with `{ euiAnimate }`; call `euiAnimate()` to wiggle the\n     * button, e.g. when a new notification arrives.\n     */\n    ref?: (api: { euiAnimate: () => void }) => void;\n    /** Disables the button. */\n    disabled?: boolean;\n    /** Same as `@disabled` (upstream's name, from EuiButtonEmpty). */\n    isDisabled?: boolean;\n    /** EuiButtonEmpty color. Defaults to `'text'`. */\n    color?: EuiButtonEmptySignature['Args']['color'];\n    /** EuiButtonEmpty `contentProps`: class, css and attributes of the content element. */\n    contentProps?: EuiButtonEmptySignature['Args']['contentProps'];\n    /** EuiButtonEmpty `textProps`: class, css and attributes of the text element. */\n    textProps?: EuiButtonEmptySignature['Args']['textProps'];\n    /** Pulls the button to an edge, see `EuiButtonEmpty`. */\n    flush?: EuiButtonEmptySignature['Args']['flush'];\n    /** Beta: `aria-disabled` instead of `disabled`, see `EuiButtonEmpty`. */\n    hasAriaDisabled?: boolean;\n    /** Side of the icon, see `EuiButtonEmpty`. */\n    iconSide?: EuiButtonEmptySignature['Args']['iconSide'];\n    /** Size of the icon, see `EuiButtonEmpty`. */\n    iconSize?: EuiButtonEmptySignature['Args']['iconSize'];\n    /** Icon next to the content, see `EuiButtonEmpty`. */\n    iconType?: EuiButtonEmptySignature['Args']['iconType'];\n    /** Shows a spinner and disables the button. */\n    isLoading?: boolean;\n    /** Sets `aria-pressed` for toggle buttons. */\n    isSelected?: boolean;\n    /** `'xs'`, `'s'` or `'m'`, see `EuiButtonEmpty`. */\n    size?: EuiButtonEmptySignature['Args']['size'];\n    /** Extra styles composed last into the button's class. */\n    css?: EuiCss;\n    /** Renders a link instead of a button. */\n    href?: string;\n    /** Called on click. */\n    onClick?: (event: MouseEvent) => void;\n    /**\n     * `true` shows a dot; a number shows a count badge, which becomes a dot\n     * below the theme's `m` breakpoint (as upstream; formerly only `xs`).\n     */\n    notification?: boolean | number | string;\n    /** `'accent'`, `'subdued'` or `'success'`. Defaults to `'accent'`. */\n    notificationColor?: EuiNotificationBadgeSignature['Args']['color'];\n  };\n  Blocks: {\n    /** The button's content, usually an `EuiIcon` or `EuiAvatar`. */\n    default: [];\n  };\n}\n\n/** Upstream small-screen check (`useIsWithinMaxBreakpoint('s')`), as CSS. */\nconst SMALL_SCREENS = ['xs', 's'] as const;\n\n/**\n * Upstream `EuiHeaderSectionItemButton` (`euiHeaderSectionItemButtonStyles`\n * composed over EuiButtonEmpty). Upstream swaps a count badge for a dot on\n * small screens in JS; here both are rendered and media queries pick one.\n */\nexport default class EuiHeaderSectionItemButtonComponent extends Component<EuiHeaderSectionItemButtonSignature> {\n  @tracked buttonRef: HTMLButtonElement | HTMLAnchorElement | undefined;\n  @tracked animationTargetRef: HTMLSpanElement | undefined;\n\n  setAnimationTargetRef = (ele: HTMLSpanElement) => {\n    this.animationTargetRef = ele;\n    this.args.ref?.({ euiAnimate: this.animate });\n  };\n\n  animate = () => {\n    this.animationTargetRef?.animate(keyframes, { duration: 5000 });\n  };\n\n  setButtonRef = (ele: HTMLButtonElement | HTMLAnchorElement) => {\n    this.buttonRef = ele;\n  };\n\n  willDestroy(): void {\n    super.willDestroy();\n    this.buttonRef = undefined;\n    this.animationTargetRef = undefined;\n  }\n\n  get notificationColor() {\n    return this.args.notificationColor ?? 'accent';\n  }\n\n  /**\n   * Upstream's `css` for the notification dot (EuiIcon) and badge\n   * (EuiNotificationBadge), composed last into their own classes through\n   * `@css`.\n   */\n  @cached\n  get notificationCss() {\n    const context = getEuiThemeContext(this);\n    const { notification } = useEuiBorealisStyles(\n      context,\n      euiHeaderSectionItemButtonStyles\n    );\n    const small = euiBreakpointsMedia(context.upstream, SMALL_SCREENS);\n    const large = euiOutsideBreakpointsMedia(context.upstream, SMALL_SCREENS);\n    const { size } = context.upstream.euiTheme;\n    // Upstream's `dot` shrinks the icon below `s`.\n    const dotSize = {\n      [euiMaxBreakpoint(context.upstream, 's')]: {\n        inlineSize: size.base,\n        blockSize: size.base\n      }\n    };\n    const hidden = (media: string | undefined) =>\n      media ? { [media]: { display: 'none' } } : undefined;\n    const dot = [\n      notification.euiHeaderSectionItemButton__notification,\n      notification.dot,\n      dotSize\n    ];\n    return {\n      dot,\n      // A count: badge on larger screens, dot on small ones.\n      badge: [\n        notification.euiHeaderSectionItemButton__notification,\n        notification.badge,\n        hidden(small)\n      ],\n      smallDot: [...dot, hidden(large)]\n    };\n  }\n\n  @cached\n  get styles() {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(\n      context,\n      euiHeaderSectionItemButtonStyles\n    );\n    return {\n      // Upstream's `css` on EuiButtonEmpty.\n      button: [styles.euiHeaderSectionItemButton, this.args.css],\n      content: euiClass(context, styles.euiHeaderSectionItemButton__content)\n    };\n  }\n\n  <template>\n    <EuiButtonEmpty\n      class=\"euiHeaderSectionItemButton\"\n      @css={{this.styles.button}}\n      @isDisabled={{if @isDisabled @isDisabled @disabled}}\n      @href={{@href}}\n      @color={{if @color @color \"text\"}}\n      @contentProps={{@contentProps}}\n      @textProps={{@textProps}}\n      @flush={{@flush}}\n      @hasAriaDisabled={{@hasAriaDisabled}}\n      @iconSide={{@iconSide}}\n      @iconSize={{@iconSize}}\n      @iconType={{@iconType}}\n      @isLoading={{@isLoading}}\n      @isSelected={{@isSelected}}\n      @size={{@size}}\n      {{didInsert this.setButtonRef}}\n      {{on \"click\" (optional @onClick)}}\n      ...attributes\n    >\n      <span\n        {{didInsert this.setAnimationTargetRef}}\n        class=\"euiHeaderSectionItemButton__content {{this.styles.content}}\"\n      >\n        {{yield}}\n      </span>\n      {{#if @notification}}\n        {{#if (eq @notification true)}}\n          <EuiIcon\n            @iconClasses=\"euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot\"\n            @css={{this.notificationCss.dot}}\n            @color={{this.notificationColor}}\n            @type=\"dot\"\n            @size=\"l\"\n          />\n        {{else}}\n          <EuiNotificationBadge\n            class=\"euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge\"\n            @css={{this.notificationCss.badge}}\n            @color={{this.notificationColor}}\n          >\n            {{@notification}}\n          </EuiNotificationBadge>\n          <EuiIcon\n            @iconClasses=\"euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot\"\n            @css={{this.notificationCss.smallDot}}\n            @color={{this.notificationColor}}\n            @type=\"dot\"\n            @size=\"l\"\n          />\n        {{/if}}\n      {{/if}}\n    </EuiButtonEmpty>\n  </template>\n}\n"],"names":["keyframes","transform","offset","easing","SMALL_SCREENS","EuiHeaderSectionItemButtonComponent","Component","g","prototype","tracked","i","setAnimationTargetRef","ele","animationTargetRef","args","ref","euiAnimate","animate","duration","setButtonRef","buttonRef","willDestroy","undefined","notificationColor","notificationCss","context","getEuiThemeContext","notification","useEuiBorealisStyles","euiHeaderSectionItemButtonStyles","small","euiBreakpointsMedia","upstream","large","euiOutsideBreakpointsMedia","size","euiTheme","dotSize","euiMaxBreakpoint","inlineSize","base","blockSize","hidden","media","display","dot","euiHeaderSectionItemButton__notification","badge","smallDot","n","cached","styles","button","euiHeaderSectionItemButton","css","content","euiClass","euiHeaderSectionItemButton__content","setComponentTemplate","precompileTemplate","strictMode","scope","EuiButtonEmpty","didInsert","on","optional","eq","EuiIcon","EuiNotificationBadge"],"mappings":"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"}

package/dist/components/eui-header-section-item.js

@@ -1,16 +1,29 @@
-import argOrDefault from '../helpers/arg-or-default.js';
-import classNames from '../helpers/class-names.js';
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { useEuiBorealisStyles, euiClass } from '../utils/eui/styles.js';
+import { bO as euiHeaderSectionItemStyles } from '../styles.generated-SYAxYhey.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import templateOnly from '@ember/component/template-only';
+import { n } from 'decorator-transforms/runtime-esm';
 
-const EuiHeaderSectionItem = setComponentTemplate(precompileTemplate("<div class={{classNames componentName=\"EuiHeaderSectionItem\" borderSide=(argOrDefault @border \"left\")}} ...attributes>\n  {{yield}}\n</div>", {
-  strictMode: true,
-  scope: () => ({
-    classNames,
-    argOrDefault
-  })
-}), templateOnly());
+/** Upstream `EuiHeaderSectionItem` (`euiHeaderSectionItemStyles`). */class EuiHeaderSectionItem extends Component {
+  get classes() {
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiHeaderSectionItemStyles);
+    return euiClass(context, {
+      boxSizing: 'border-box'
+    }, styles.euiHeaderSectionItem);
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("{{#if (has-block)}}\n  <div class=\"euiHeaderSectionItem {{this.classes}}\" ...attributes>\n    {{yield}}\n  </div>\n{{/if}}", {
+      strictMode: true
+    }), this);
+  }
+}
 
 export { EuiHeaderSectionItem as default };
 //# sourceMappingURL=eui-header-section-item.js.map

package/dist/components/eui-header-section-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-header-section-item.js","sources":["../../src/components/eui-header-section-item.gts"],"sourcesContent":["import argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\n\nimport type { borderSizeMappping } from '../utils/css-mappings/eui-header-section-item.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** One item of an EuiHeaderSection, e.g. a logo, links or a button. */\nexport interface EuiHeaderSectionItemSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Divider on the `'left'`, `'right'` or `'none'`. Defaults to `'left'`. */\n    border?: keyof typeof borderSizeMappping;\n  };\n  Blocks: {\n    /** The item's content. */\n    default: [];\n  };\n}\n\nconst EuiHeaderSectionItem: TemplateOnlyComponent<EuiHeaderSectionItemSignature> =\n  <template>\n    <div\n      class={{classNames\n        componentName=\"EuiHeaderSectionItem\"\n        borderSide=(argOrDefault @border \"left\")\n      }}\n      ...attributes\n    >\n      {{yield}}\n    </div>\n  </template>;\n\nexport default EuiHeaderSectionItem;\n"],"names":["EuiHeaderSectionItem","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","argOrDefault","templateOnly"],"mappings":";;;;;;AAmBA,MAAMA,oBAA4C,GAAAC,oBAAA,CAChDC,kBAAA,CAAA,iJAAA,EAUA;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-header-section-item.js","sources":["../../src/components/eui-header-section-item.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\n\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport { euiHeaderSectionItemStyles } from '../utils/eui/styles.generated.ts';\n\n/** One item of an EuiHeaderSection, e.g. a logo, links or a button. */\nexport interface EuiHeaderSectionItemSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /**\n     * @deprecated Has no effect: latest EUI removed the item dividers\n     * (`'left'`, `'right'`, `'none'`).\n     */\n    border?: 'left' | 'right' | 'none';\n  };\n  Blocks: {\n    /** The item's content. Without a block nothing is rendered, as upstream. */\n    default: [];\n  };\n}\n\n/** Upstream `EuiHeaderSectionItem` (`euiHeaderSectionItemStyles`). */\nexport default class EuiHeaderSectionItem extends Component<EuiHeaderSectionItemSignature> {\n  @cached\n  get classes(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiHeaderSectionItemStyles);\n    return euiClass(\n      context,\n      { boxSizing: 'border-box' },\n      styles.euiHeaderSectionItem\n    );\n  }\n\n  <template>\n    {{#if (has-block)}}\n      <div class=\"euiHeaderSectionItem {{this.classes}}\" ...attributes>\n        {{yield}}\n      </div>\n    {{/if}}\n  </template>\n}\n"],"names":["EuiHeaderSectionItem","Component","classes","context","getEuiThemeContext","styles","useEuiBorealisStyles","euiHeaderSectionItemStyles","euiClass","boxSizing","euiHeaderSectionItem","n","prototype","cached","setComponentTemplate","precompileTemplate","strictMode"],"mappings":";;;;;;;;;AAuBA,sEACe,MAAMA,oBAAA,SAA6BC,SAAA,CAAU;EAC1D,IACIC,OAAAA,GAAkB;AACpB,IAAA,MAAMC,OAAA,GAAUC,mBAAmB,IAAI,CAAA;AACvC,IAAA,MAAMC,MAAA,GAASC,qBAAqBH,OAAA,EAASI,0BAAA,CAAA;IAC7C,OAAOC,SACLL,OAAA,EACA;AAAEM,MAAAA,SAAA,EAAW;AAAa,KAAA,EAC1BJ,OAAOK,oBAAoB,CAAA;AAE/B,EAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CATCC,MAAA,CAAA,CAAA;AAAA;AAWD,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,8HAAA,EAMA;MAAAC,UAAA,EAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-header-section.js

@@ -1,16 +1,30 @@
-import argOrDefault from '../helpers/arg-or-default.js';
-import classNames from '../helpers/class-names.js';
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { euiClass } from '../utils/eui/styles.js';
+import { bN as euiHeaderSectionStyles } from '../styles.generated-SYAxYhey.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import templateOnly from '@ember/component/template-only';
+import { n } from 'decorator-transforms/runtime-esm';
 
-const EuiHeaderSection = setComponentTemplate(precompileTemplate("<div class={{classNames componentName=\"EuiHeaderSection\" alignItems=(argOrDefault @side \"left\") grow=(argOrDefault @grow false)}} ...attributes>\n  {{yield}}\n</div>", {
-  strictMode: true,
-  scope: () => ({
-    classNames,
-    argOrDefault
-  })
-}), templateOnly());
+// Upstream calls this factory without a theme: its styles are static.
+const styles = euiHeaderSectionStyles();
+/** Upstream `EuiHeaderSection` (`euiHeaderSectionStyles`). */
+class EuiHeaderSection extends Component {
+  get classes() {
+    return euiClass(getEuiThemeContext(this), {
+      boxSizing: 'border-box'
+    }, styles.euiHeaderSection, this.args.grow && styles.grow, styles[this.args.side ?? 'left']);
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"euiHeaderSection {{this.classes}}\" ...attributes>\n  {{yield}}\n</div>", {
+      strictMode: true
+    }), this);
+  }
+}
 
 export { EuiHeaderSection as default };
 //# sourceMappingURL=eui-header-section.js.map

package/dist/components/eui-header-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-header-section.js","sources":["../../src/components/eui-header-section.gts"],"sourcesContent":["import argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\n\nimport type { alignMapping } from '../utils/css-mappings/eui-header-section.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** A group of `EuiHeaderSectionItem`s on one side of the header. */\nexport interface EuiHeaderSectionSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** `'left'` or `'right'`. Defaults to `'left'`. */\n    side?: keyof typeof alignMapping;\n    /** Takes the remaining space, e.g. for a search bar. Defaults to `false`. */\n    grow?: boolean;\n  };\n  Blocks: {\n    /** The `EuiHeaderSectionItem`s. */\n    default: [];\n  };\n}\n\nconst EuiHeaderSection: TemplateOnlyComponent<EuiHeaderSectionSignature> =\n  <template>\n    <div\n      class={{classNames\n        componentName=\"EuiHeaderSection\"\n        alignItems=(argOrDefault @side \"left\")\n        grow=(argOrDefault @grow false)\n      }}\n      ...attributes\n    >\n      {{yield}}\n    </div>\n  </template>;\n\nexport default EuiHeaderSection;\n"],"names":["EuiHeaderSection","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","argOrDefault","templateOnly"],"mappings":";;;;;;AAqBA,MAAMA,gBAAwC,GAAAC,oBAAA,CAC5CC,kBAAA,CAAA,2KAAA,EAWA;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-header-section.js","sources":["../../src/components/eui-header-section.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\n\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { euiClass } from '../utils/eui/styles.ts';\nimport { euiHeaderSectionStyles } from '../utils/eui/styles.generated.ts';\n\n/** A group of `EuiHeaderSectionItem`s on one side of the header. */\nexport interface EuiHeaderSectionSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /**\n     * `'left'` or `'right'`. A right section is pushed to the end with\n     * `margin-inline-start: auto` (start/end in RTL). Defaults to `'left'`.\n     */\n    side?: 'left' | 'right';\n    /** Takes the remaining space, e.g. for a search bar. Defaults to `false`. */\n    grow?: boolean;\n  };\n  Blocks: {\n    /** The `EuiHeaderSectionItem`s. */\n    default: [];\n  };\n}\n\n// Upstream calls this factory without a theme: its styles are static.\nconst styles = euiHeaderSectionStyles();\n\n/** Upstream `EuiHeaderSection` (`euiHeaderSectionStyles`). */\nexport default class EuiHeaderSection extends Component<EuiHeaderSectionSignature> {\n  @cached\n  get classes(): string {\n    return euiClass(\n      getEuiThemeContext(this),\n      { boxSizing: 'border-box' },\n      styles.euiHeaderSection,\n      this.args.grow && styles.grow,\n      styles[this.args.side ?? 'left']\n    );\n  }\n\n  <template>\n    <div class=\"euiHeaderSection {{this.classes}}\" ...attributes>\n      {{yield}}\n    </div>\n  </template>\n}\n"],"names":["styles","euiHeaderSectionStyles","EuiHeaderSection","Component","classes","euiClass","getEuiThemeContext","boxSizing","euiHeaderSection","args","grow","side","n","prototype","cached","setComponentTemplate","precompileTemplate","strictMode"],"mappings":";;;;;;;;;AAyBA;AACA,MAAMA,MAAA,GAASC,sBAAA,EAAA;AAEf;AACe,MAAMC,gBAAA,SAAyBC,SAAA,CAAU;EACtD,IACIC,OAAAA,GAAkB;AACpB,IAAA,OAAOC,QAAA,CACLC,kBAAA,CAAmB,IAAI,CAAA,EACvB;AAAEC,MAAAA,SAAA,EAAW;KAAa,EAC1BP,MAAA,CAAOQ,gBAAgB,EACvB,IAAI,CAACC,IAAI,CAACC,IAAI,IAAIV,MAAA,CAAOU,IAAI,EAC7BV,MAAM,CAAC,IAAI,CAACS,IAAI,CAACE,IAAI,IAAI,MAAA,CAAO,CAAA;AAEpC,EAAA;AAAA,EAAA;IAAAC,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CATCC,MAAA,CAAA,CAAA;AAAA;AAWD,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,sFAAA,EAIA;MAAAC,UAAA,EAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-header.js

@@ -1,44 +1,108 @@
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
 import { modifier } from 'ember-modifier';
-import argOrDefault from '../helpers/arg-or-default.js';
-import classNames from '../helpers/class-names.js';
+import EuiNode from '../-private/eui-node.js';
+import spreadAttributes from '../-private/eui-spread-attributes.js';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { useEuiBorealisStyles, euiClass } from '../utils/eui/styles.js';
+import { bH as euiHeaderVariables, bI as euiHeaderStyles } from '../styles.generated-SYAxYhey.js';
 import EuiHeaderBreadcrumbs from './eui-header-breadcrumbs.js';
 import EuiHeaderSection from './eui-header-section.js';
 import EuiHeaderSectionItem from './eui-header-section-item.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
-import templateOnly from '@ember/component/template-only';
+import { n } from 'decorator-transforms/runtime-esm';
 
-let euiHeaderFixedCounter = 0;
-const fixedHeaderModifier = modifier(function fixedHeader(_, [position]) {
-  if (position === 'fixed') {
-    // Increment fixed header counter for each fixed header
-    euiHeaderFixedCounter++;
-    document.body.classList.add('euiBody--headerIsFixed');
-    return () => {
-      // Both decrement the fixed counter AND then check if there are none
-      if (--euiHeaderFixedCounter === 0) {
-        // If there are none, THEN remove class
-        document.body.classList.remove('euiBody--headerIsFixed');
-      }
-    };
-  }
+let euiFixedHeadersCount = 0;
+/** The body's own inline `padding-top`, restored when the last header leaves. */
+let bodyPaddingTop = '';
+const FIXED_OFFSET = '--euiFixedHeadersOffset';
+function multiply(length, times) {
+  const match = /^(-?[\d.]+)(.*)$/.exec(length);
+  return match ? `${Number(match[1]) * times}${match[2]}` : length;
+}
+/**
+ * Upstream `EuiFixedHeader`: stacks each fixed header below the previous
+ * ones, keeps `--euiFixedHeadersOffset` (on `<html>`) at the total height and
+ * adds `euiBody--headerIsFixed`. Ember additionally pads `<body>` by the
+ * offset, as the documented API always did (formerly through legacy CSS).
+ */
+const fixedHeaderModifier = modifier(function fixedHeader(element, [position, height]) {
+  // Always return a teardown: ember-modifier keeps the previous one when a
+  // run returns nothing, which would run it twice (fixed -> static -> fixed).
+  if (position !== 'fixed') return () => {};
+  const root = document.documentElement;
+  const body = document.body;
+  // Upstream sets `top` from the previous headers; a caller's `style` wins.
+  const ownTop = !element.style.top;
+  if (ownTop) element.style.top = multiply(height, euiFixedHeadersCount);
+  element.setAttribute('data-fixed-header', 'true');
+  if (euiFixedHeadersCount === 0) bodyPaddingTop = body.style.paddingTop;
+  euiFixedHeadersCount++;
+  root.style.setProperty(FIXED_OFFSET, multiply(height, euiFixedHeadersCount));
+  body.classList.add('euiBody--headerIsFixed');
+  body.style.paddingTop = `var(${FIXED_OFFSET}, 0)`;
+  return () => {
+    euiFixedHeadersCount--;
+    if (ownTop) element.style.top = '';
+    element.removeAttribute('data-fixed-header');
+    if (euiFixedHeadersCount === 0) {
+      root.style.removeProperty(FIXED_OFFSET);
+      body.classList.remove('euiBody--headerIsFixed');
+      body.style.paddingTop = bodyPaddingTop;
+    } else {
+      root.style.setProperty(FIXED_OFFSET, multiply(height, euiFixedHeadersCount));
+    }
+  };
 });
+const BREADCRUMB_ARGS = ['max', 'truncate', 'type', 'responsive', 'css', 'lastBreadcrumbIsCurrentPage'];
+
 /**
  * The app's top bar: logo, breadcrumbs, links and actions, arranged in
  * `EuiHeaderSection`s of `EuiHeaderSectionItem`s.
  */
 
-const EuiHeader = setComponentTemplate(precompileTemplate("<div {{fixedHeaderModifier @position}} class={{classNames componentName=\"EuiHeader\" theme=(argOrDefault @theme \"default\") position=(argOrDefault @position \"static\")}} ...attributes>\n  {{#if @sections}}\n    {{#each @sections as |section|}}\n      {{#each section.items as |itemSection|}}\n        <EuiHeaderSection>\n          <EuiHeaderSectionItem @border={{section.border}}>\n            {{itemSection.text}}\n          </EuiHeaderSectionItem>\n        </EuiHeaderSection>\n      {{/each}}\n      <EuiHeaderBreadcrumbs @breadcrumbs={{section.breadcrumbs}} />\n    {{/each}}\n  {{else}}\n    {{yield}}\n  {{/if}}\n</div>", {
-  strictMode: true,
-  scope: () => ({
-    classNames,
-    argOrDefault,
-    fixedHeaderModifier,
-    EuiHeaderSection,
-    EuiHeaderSectionItem,
-    EuiHeaderBreadcrumbs
-  })
-}), templateOnly());
+/** Upstream `EuiHeader` (`euiHeaderStyles`). */class EuiHeader extends Component {
+  breadcrumbArgs = BREADCRUMB_ARGS;
+  /** The content of an item: `{ text }` (as before), text or a component. */
+  content = item => item && typeof item === 'object' && 'text' in item ? item.text : item;
+  get position() {
+    return this.args.position === 'fixed' ? 'fixed' : 'static';
+  }
+  get theme() {
+    return this.args.theme === 'dark' ? 'dark' : 'default';
+  }
+  get height() {
+    const context = getEuiThemeContext(this);
+    return useEuiBorealisStyles(context, euiHeaderVariables).height;
+  }
+  static {
+    n(this.prototype, "height", [cached]);
+  }
+  get classes() {
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiHeaderStyles);
+    return euiClass(context, {
+      boxSizing: 'border-box'
+    }, styles.euiHeader, styles[this.position], styles[this.theme]);
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"euiHeader {{this.classes}}\" {{fixedHeaderModifier this.position this.height}} ...attributes>\n  {{#if @sections}}\n    {{#each @sections as |section|}}\n      {{#if section.items}}\n        <EuiHeaderSection>\n          {{#each section.items as |item index|}}\n            <EuiHeaderSectionItem>\n              {{#if (has-block \"sectionItem\")}}\n                {{yield item index to=\"sectionItem\"}}\n              {{else}}\n                <EuiNode @value={{this.content item}} />\n              {{/if}}\n            </EuiHeaderSectionItem>\n          {{/each}}\n        </EuiHeaderSection>\n      {{/if}}\n      {{#if section.breadcrumbs}}\n        <EuiHeaderBreadcrumbs @breadcrumbs={{section.breadcrumbs}} @max={{section.breadcrumbProps.max}} @truncate={{section.breadcrumbProps.truncate}} @type={{section.breadcrumbProps.type}} @responsive={{section.breadcrumbProps.responsive}} @css={{section.breadcrumbProps.css}} @lastBreadcrumbIsCurrentPage={{section.breadcrumbProps.lastBreadcrumbIsCurrentPage}} class={{section.breadcrumbProps.className}} {{spreadAttributes section.breadcrumbProps this.breadcrumbArgs}} />\n      {{/if}}\n    {{/each}}\n  {{else}}\n    {{yield}}\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        fixedHeaderModifier,
+        EuiHeaderSection,
+        EuiHeaderSectionItem,
+        EuiNode,
+        EuiHeaderBreadcrumbs,
+        spreadAttributes
+      })
+    }), this);
+  }
+}
 
 export { EuiHeader as default };
 //# sourceMappingURL=eui-header.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"eui-header.js","sources":["../../src/components/eui-header.gts"],"sourcesContent":["import { modifier } from 'ember-modifier';\n\nimport argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiHeaderBreadcrumbs from './eui-header-breadcrumbs.gts';\nimport EuiHeaderSection from './eui-header-section.gts';\nimport EuiHeaderSectionItem from './eui-header-section-item.gts';\n\nimport type { EuiHeaderBreadcrumbsSignature } from './eui-header-breadcrumbs';\nimport type { EuiHeaderSectionItemSignature } from './eui-header-section-item';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\nlet euiHeaderFixedCounter = 0;\n\nconst fixedHeaderModifier = modifier(function fixedHeader(\n  _,\n  [position]: [string | undefined]\n): void | (() => unknown) {\n  if (position === 'fixed') {\n    // Increment fixed header counter for each fixed header\n    euiHeaderFixedCounter++;\n    document.body.classList.add('euiBody--headerIsFixed');\n\n    return () => {\n      // Both decrement the fixed counter AND then check if there are none\n      if (--euiHeaderFixedCounter === 0) {\n        // If there are none, THEN remove class\n        document.body.classList.remove('euiBody--headerIsFixed');\n      }\n    };\n  }\n});\n\n/**\n * The app's top bar: logo, breadcrumbs, links and actions, arranged in\n * `EuiHeaderSection`s of `EuiHeaderSectionItem`s.\n */\nexport interface EuiHeaderSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** `'default'` (light) or `'dark'`. Defaults to `'default'`. */\n    theme?: string;\n    /**\n     * `'static'` scrolls with the page; `'fixed'` stays at the top and pads\n     * `<body>` for it (the body gets `euiBody--headerIsFixed`).\n     * Defaults to `'static'`.\n     */\n    position?: string;\n    /**\n     * Builds the header from data instead of the block: sections of text\n     * `items` and `breadcrumbs`. Most apps compose it with\n     * `EuiHeaderSection`s instead.\n     */\n    sections?: {\n      items: {\n        text: string;\n      }[];\n      breadcrumbs: EuiHeaderBreadcrumbsSignature['Args']['breadcrumbs'];\n      border: EuiHeaderSectionItemSignature['Args']['border'];\n    }[];\n  };\n  Blocks: {\n    /** `EuiHeaderSection`s (left and right), ignored with `@sections`. */\n    default: [];\n  };\n}\n\nconst EuiHeader: TemplateOnlyComponent<EuiHeaderSignature> = <template>\n  <div\n    {{fixedHeaderModifier @position}}\n    class={{classNames\n      componentName=\"EuiHeader\"\n      theme=(argOrDefault @theme \"default\")\n      position=(argOrDefault @position \"static\")\n    }}\n    ...attributes\n  >\n    {{#if @sections}}\n      {{#each @sections as |section|}}\n        {{#each section.items as |itemSection|}}\n          <EuiHeaderSection>\n            <EuiHeaderSectionItem @border={{section.border}}>\n              {{itemSection.text}}\n            </EuiHeaderSectionItem>\n          </EuiHeaderSection>\n        {{/each}}\n        <EuiHeaderBreadcrumbs @breadcrumbs={{section.breadcrumbs}} />\n      {{/each}}\n    {{else}}\n      {{yield}}\n    {{/if}}\n  </div>\n</template>;\n\nexport default EuiHeader;\n"],"names":["euiHeaderFixedCounter","fixedHeaderModifier","modifier","fixedHeader","_","position","document","body","classList","add","remove","EuiHeader","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","argOrDefault","EuiHeaderSection","EuiHeaderSectionItem","EuiHeaderBreadcrumbs","templateOnly"],"mappings":";;;;;;;;;;AAYA,IAAIA,qBAAA,GAAwB,CAAA;AAE5B,MAAMC,mBAAA,GAAsBC,QAAA,CAAS,SAASC,WAAAA,CAC5CC,CAAC,EACD,CAACC,QAAA,CAA+B,EACV;EACtB,IAAIA,aAAa,OAAA,EAAS;AACxB;AACAL,IAAAA,qBAAA,EAAA;IACAM,QAAA,CAASC,IAAI,CAACC,SAAS,CAACC,GAAG,CAAC,wBAAA,CAAA;AAE5B,IAAA,OAAO,MAAA;AACL;AACA,MAAA,IAAI,EAAET,0BAA0B,CAAA,EAAG;AACjC;QACAM,QAAA,CAASC,IAAI,CAACC,SAAS,CAACE,MAAM,CAAC,wBAAA,CAAA;AACjC,MAAA;IACF,CAAA;AACF,EAAA;AACF,CAAA,CAAA;AAEA;;;AAGC;;AA+BD,MAAMC,SAAiC,GAAAC,oBAAA,CAAsBC,kBAAA,CAAA,snBAAA,EAyB7D;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,YAAA;IAAAhB,mBAAA;IAAAiB,gBAAA;IAAAC,oBAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}
+{"version":3,"file":"eui-header.js","sources":["../../src/components/eui-header.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\n\nimport { modifier } from 'ember-modifier';\n\nimport EuiNode from '../-private/eui-node.gts';\nimport spreadAttributes from '../-private/eui-spread-attributes.ts';\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport {\n  euiHeaderStyles,\n  euiHeaderVariables\n} from '../utils/eui/styles.generated.ts';\nimport EuiHeaderBreadcrumbs from './eui-header-breadcrumbs.gts';\nimport EuiHeaderSection from './eui-header-section.gts';\nimport EuiHeaderSectionItem from './eui-header-section-item.gts';\n\nimport type { EuiNodeValue } from '../-private/eui-node.gts';\nimport type { EuiHeaderBreadcrumbsSignature } from './eui-header-breadcrumbs';\nimport type { EuiHeaderSectionItemSignature } from './eui-header-section-item';\n\n/** Upstream `euiFixedHeadersCount`: fixed headers currently rendered. */\nlet euiFixedHeadersCount = 0;\n/** The body's own inline `padding-top`, restored when the last header leaves. */\nlet bodyPaddingTop = '';\n\nconst FIXED_OFFSET = '--euiFixedHeadersOffset';\n\nfunction multiply(length: string, times: number): string {\n  const match = /^(-?[\\d.]+)(.*)$/.exec(length);\n  return match ? `${Number(match[1]) * times}${match[2]}` : length;\n}\n\n/**\n * Upstream `EuiFixedHeader`: stacks each fixed header below the previous\n * ones, keeps `--euiFixedHeadersOffset` (on `<html>`) at the total height and\n * adds `euiBody--headerIsFixed`. Ember additionally pads `<body>` by the\n * offset, as the documented API always did (formerly through legacy CSS).\n */\nconst fixedHeaderModifier = modifier(function fixedHeader(\n  element: HTMLElement,\n  [position, height]: [string | undefined, string]\n): () => void {\n  // Always return a teardown: ember-modifier keeps the previous one when a\n  // run returns nothing, which would run it twice (fixed -> static -> fixed).\n  if (position !== 'fixed') return () => {};\n  const root = document.documentElement;\n  const body = document.body;\n\n  // Upstream sets `top` from the previous headers; a caller's `style` wins.\n  const ownTop = !element.style.top;\n  if (ownTop) element.style.top = multiply(height, euiFixedHeadersCount);\n  element.setAttribute('data-fixed-header', 'true');\n\n  if (euiFixedHeadersCount === 0) bodyPaddingTop = body.style.paddingTop;\n  euiFixedHeadersCount++;\n  root.style.setProperty(FIXED_OFFSET, multiply(height, euiFixedHeadersCount));\n  body.classList.add('euiBody--headerIsFixed');\n  body.style.paddingTop = `var(${FIXED_OFFSET}, 0)`;\n\n  return () => {\n    euiFixedHeadersCount--;\n    if (ownTop) element.style.top = '';\n    element.removeAttribute('data-fixed-header');\n    if (euiFixedHeadersCount === 0) {\n      root.style.removeProperty(FIXED_OFFSET);\n      body.classList.remove('euiBody--headerIsFixed');\n      body.style.paddingTop = bodyPaddingTop;\n    } else {\n      root.style.setProperty(\n        FIXED_OFFSET,\n        multiply(height, euiFixedHeadersCount)\n      );\n    }\n  };\n});\n\nconst BREADCRUMB_ARGS = [\n  'max',\n  'truncate',\n  'type',\n  'responsive',\n  'css',\n  'lastBreadcrumbIsCurrentPage'\n] as const;\n\nexport type EuiHeaderSections = {\n  /**\n   * Wrapped in one `EuiHeaderSection`, each in an `EuiHeaderSectionItem`.\n   * An item is text, a component (e.g. `EuiHeaderLogo` curried with its\n   * args) or, as before, `{ text }`. For markup, render the items with the\n   * `<:sectionItem>` block instead.\n   */\n  items?: (EuiNodeValue | { text: string })[];\n  /** Rendered as `EuiHeaderBreadcrumbs` after the section. */\n  breadcrumbs?: EuiHeaderBreadcrumbsSignature['Args']['breadcrumbs'];\n  /**\n   * Other props for the `EuiHeaderBreadcrumbs` of this section: `className`,\n   * its args (`max`, `truncate`, `type`, `responsive`, `css`,\n   * `lastBreadcrumbIsCurrentPage`) and any other key as an attribute.\n   */\n  breadcrumbProps?: Partial<\n    Omit<EuiHeaderBreadcrumbsSignature['Args'], 'breadcrumbs'>\n  > & { className?: string; [attribute: string]: unknown };\n  /** @deprecated Has no effect: latest EUI removed section item borders. */\n  border?: EuiHeaderSectionItemSignature['Args']['border'];\n}[];\n\n/**\n * The app's top bar: logo, breadcrumbs, links and actions, arranged in\n * `EuiHeaderSection`s of `EuiHeaderSectionItem`s.\n */\nexport interface EuiHeaderSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /**\n     * `'default'` follows the light/dark theme; `'dark'` always renders a\n     * dark header (upstream's pseudo dark theme for logo, links and\n     * buttons). Defaults to `'default'`.\n     */\n    theme?: 'default' | 'dark' | (string & {});\n    /**\n     * `'static'` scrolls with the page; `'fixed'` stays at the top. Fixed\n     * headers stack below each other, set the `--euiFixedHeadersOffset` CSS\n     * variable on `<html>` to their total height, give `<body>` the\n     * `euiBody--headerIsFixed` class and pad `<body>` by that offset.\n     * Defaults to `'static'`.\n     */\n    position?: 'static' | 'fixed' | (string & {});\n    /**\n     * Builds the header from data instead of the block: per section, one\n     * `EuiHeaderSection` of text `items`, then optional `breadcrumbs`.\n     * Most apps compose it with `EuiHeaderSection`s instead.\n     */\n    sections?: EuiHeaderSections;\n  };\n  Blocks: {\n    /** `EuiHeaderSection`s (left and right), ignored with `@sections`. */\n    default: [];\n    /**\n     * With `@sections`: renders each item of a section's `items` (yielded as\n     * given) instead of the text or component, e.g. for markup.\n     */\n    sectionItem: [item: unknown, index: number];\n  };\n}\n\n/** Upstream `EuiHeader` (`euiHeaderStyles`). */\nexport default class EuiHeader extends Component<EuiHeaderSignature> {\n  breadcrumbArgs = BREADCRUMB_ARGS;\n\n  /** The content of an item: `{ text }` (as before), text or a component. */\n  content = (item: unknown): EuiNodeValue =>\n    item && typeof item === 'object' && 'text' in item\n      ? (item as { text: string }).text\n      : (item as EuiNodeValue);\n\n  get position(): 'static' | 'fixed' {\n    return this.args.position === 'fixed' ? 'fixed' : 'static';\n  }\n\n  get theme(): 'default' | 'dark' {\n    return this.args.theme === 'dark' ? 'dark' : 'default';\n  }\n\n  @cached\n  get height(): string {\n    const context = getEuiThemeContext(this);\n    return useEuiBorealisStyles(context, euiHeaderVariables).height;\n  }\n\n  @cached\n  get classes(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(context, euiHeaderStyles);\n    return euiClass(\n      context,\n      { boxSizing: 'border-box' },\n      styles.euiHeader,\n      styles[this.position],\n      styles[this.theme]\n    );\n  }\n\n  <template>\n    <div\n      class=\"euiHeader {{this.classes}}\"\n      {{fixedHeaderModifier this.position this.height}}\n      ...attributes\n    >\n      {{#if @sections}}\n        {{#each @sections as |section|}}\n          {{#if section.items}}\n            <EuiHeaderSection>\n              {{#each section.items as |item index|}}\n                <EuiHeaderSectionItem>\n                  {{#if (has-block \"sectionItem\")}}\n                    {{yield item index to=\"sectionItem\"}}\n                  {{else}}\n                    <EuiNode @value={{this.content item}} />\n                  {{/if}}\n                </EuiHeaderSectionItem>\n              {{/each}}\n            </EuiHeaderSection>\n          {{/if}}\n          {{#if section.breadcrumbs}}\n            <EuiHeaderBreadcrumbs\n              @breadcrumbs={{section.breadcrumbs}}\n              @max={{section.breadcrumbProps.max}}\n              @truncate={{section.breadcrumbProps.truncate}}\n              @type={{section.breadcrumbProps.type}}\n              @responsive={{section.breadcrumbProps.responsive}}\n              @css={{section.breadcrumbProps.css}}\n              @lastBreadcrumbIsCurrentPage={{section.breadcrumbProps.lastBreadcrumbIsCurrentPage}}\n              class={{section.breadcrumbProps.className}}\n              {{spreadAttributes section.breadcrumbProps this.breadcrumbArgs}}\n            />\n          {{/if}}\n        {{/each}}\n      {{else}}\n        {{yield}}\n      {{/if}}\n    </div>\n  </template>\n}\n"],"names":["euiFixedHeadersCount","bodyPaddingTop","FIXED_OFFSET","multiply","length","times","match","exec","Number","fixedHeaderModifier","modifier","fixedHeader","element","position","height","root","document","documentElement","body","ownTop","style","top","setAttribute","paddingTop","setProperty","classList","add","removeAttribute","removeProperty","remove","BREADCRUMB_ARGS","EuiHeader","Component","breadcrumbArgs","content","item","text","args","theme","context","getEuiThemeContext","useEuiBorealisStyles","euiHeaderVariables","n","prototype","cached","classes","styles","euiHeaderStyles","euiClass","boxSizing","euiHeader","setComponentTemplate","precompileTemplate","strictMode","scope","EuiHeaderSection","EuiHeaderSectionItem","EuiNode","EuiHeaderBreadcrumbs","spreadAttributes"],"mappings":"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"}

package/dist/components/eui-health.js

@@ -1,18 +1,41 @@
-import argOrDefault from '../helpers/arg-or-default.js';
-import classNames from '../helpers/class-names.js';
+import Component from '@glimmer/component';
+import { cached } from '@glimmer/tracking';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
+import { useEuiBorealisStyles, euiClass } from '../utils/eui/styles.js';
+import { bR as euiHealthStyles } from '../styles.generated-SYAxYhey.js';
+import EuiFlexGroup from './eui-flex-group.js';
+import EuiFlexItem from './eui-flex-item.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';
+import { n } from 'decorator-transforms/runtime-esm';
 
-const EuiHealth = setComponentTemplate(precompileTemplate("<div class={{classNames componentName=\"EuiHealth\" textSize=(argOrDefault @textSize \"m\")}} ...attributes>\n  <div class=\"euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow\">\n    <div class=\"euiFlexItem euiFlexItem--flexGrowZero\">\n      <EuiIcon @type=\"dot\" @color={{@color}} />\n    </div>\n    <div class=\"euiFlexItem euiFlexItem--flexGrowZero\">\n      {{yield}}\n    </div>\n  </div>\n</div>", {
-  strictMode: true,
-  scope: () => ({
-    classNames,
-    argOrDefault,
-    EuiIcon
-  })
-}), templateOnly());
+const TEXT_SIZES = ['xs', 's', 'm', 'inherit'];
 
-export { EuiHealth as default };
+/** A status: a colored dot followed by text, e.g. "Healthy" or "Down". */
+
+/** Native Ember health status using the upstream EUI 123 / Borealis styles. */class EuiHealth extends Component {
+  get classes() {
+    const context = getEuiThemeContext(this);
+    const styles = useEuiBorealisStyles(context, euiHealthStyles);
+    const size = this.args.textSize;
+    const textSize = size && TEXT_SIZES.includes(size) ? size : 's';
+    return `euiHealth ${euiClass(context, styles['euiHealth'], styles[textSize])}`;
+  }
+  static {
+    n(this.prototype, "classes", [cached]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class={{this.classes}} ...attributes>\n  <EuiFlexGroup @gutterSize=\"xs\" @alignItems=\"center\" @responsive={{false}}>\n    <EuiFlexItem @grow={{false}}>\n      <EuiIcon @type=\"dot\" @color={{@color}} />\n    </EuiFlexItem>\n    <EuiFlexItem @grow={{false}}>\n      {{yield}}\n    </EuiFlexItem>\n  </EuiFlexGroup>\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        EuiFlexGroup,
+        EuiFlexItem,
+        EuiIcon
+      })
+    }), this);
+  }
+}
+
+export { TEXT_SIZES, EuiHealth as default };
 //# sourceMappingURL=eui-health.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"eui-health.js","sources":["../../src/components/eui-health.gts"],"sourcesContent":["import argOrDefault from '../helpers/arg-or-default.ts';\nimport classNames from '../helpers/class-names.ts';\nimport EuiIcon from './eui-icon.gts';\n\nimport type { sizeToClassNameMap } from '../utils/css-mappings/eui-health.ts';\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/** A status: a colored dot followed by text, e.g. \"Healthy\" or \"Down\". */\nexport interface EuiHealthSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /**\n     * Color of the dot: `'success'`, `'warning'`, `'danger'`, `'subdued'`,\n     * any `EuiIcon` color or a CSS color.\n     */\n    color?: string;\n\n    /**\n     * Text size: `'xs'`, `'s'`, `'m'` or `'inherit'`. Defaults to `'m'`.\n     */\n    textSize?: keyof typeof sizeToClassNameMap;\n  };\n  Blocks: {\n    /** The status text. */\n    default: [];\n  };\n}\n\nconst EuiHealth: TemplateOnlyComponent<EuiHealthSignature> = <template>\n  <div\n    class={{classNames\n      componentName=\"EuiHealth\"\n      textSize=(argOrDefault @textSize \"m\")\n    }}\n    ...attributes\n  >\n    <div\n      class=\"euiFlexGroup euiFlexGroup--gutterExtraSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow\"\n    >\n      <div class=\"euiFlexItem euiFlexItem--flexGrowZero\">\n        <EuiIcon @type=\"dot\" @color={{@color}} />\n      </div>\n      <div class=\"euiFlexItem euiFlexItem--flexGrowZero\">\n        {{yield}}\n      </div>\n    </div>\n  </div>\n</template>;\n\nexport default EuiHealth;\n"],"names":["EuiHealth","setComponentTemplate","precompileTemplate","strictMode","scope","classNames","argOrDefault","EuiIcon","templateOnly"],"mappings":";;;;;;;AA4BA,MAAMA,SAAiC,GAAAC,oBAAA,CAAsBC,kBAAA,CAAA,2cAAA,EAmB7D;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAAC,UAAA;IAAAC,YAAA;AAAAC,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}
+{"version":3,"file":"eui-health.js","sources":["../../src/components/eui-health.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { cached } from '@glimmer/tracking';\n\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { euiClass, useEuiBorealisStyles } from '../utils/eui/styles.ts';\nimport { euiHealthStyles } from '../utils/eui/styles.generated.ts';\nimport EuiFlexGroup from './eui-flex-group.gts';\nimport EuiFlexItem from './eui-flex-item.gts';\nimport EuiIcon from './eui-icon.gts';\n\nimport type { SerializedStyles } from '@emotion/serialize';\n\nexport const TEXT_SIZES = ['xs', 's', 'm', 'inherit'] as const;\n\nexport type EuiHealthTextSize = (typeof TEXT_SIZES)[number];\n\n/** A status: a colored dot followed by text, e.g. \"Healthy\" or \"Down\". */\nexport interface EuiHealthSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /**\n     * Color of the dot: `'success'`, `'warning'`, `'danger'`, `'subdued'`,\n     * any `EuiIcon` color or a CSS color.\n     */\n    color?: string;\n\n    /**\n     * Text size: `'xs'`, `'s'`, `'m'` or `'inherit'`. Defaults to `'s'`.\n     */\n    textSize?: EuiHealthTextSize;\n  };\n  Blocks: {\n    /** The status text. */\n    default: [];\n  };\n}\n\n/** Native Ember health status using the upstream EUI 123 / Borealis styles. */\nexport default class EuiHealth extends Component<EuiHealthSignature> {\n  @cached\n  get classes(): string {\n    const context = getEuiThemeContext(this);\n    const styles = useEuiBorealisStyles(\n      context,\n      euiHealthStyles as (\n        ...args: Parameters<typeof euiHealthStyles>\n      ) => Record<string, SerializedStyles>\n    );\n    const size = this.args.textSize;\n    const textSize =\n      size && (TEXT_SIZES as readonly string[]).includes(size) ? size : 's';\n\n    return `euiHealth ${euiClass(context, styles['euiHealth'], styles[textSize])}`;\n  }\n\n  <template>\n    <div class={{this.classes}} ...attributes>\n      <EuiFlexGroup\n        @gutterSize=\"xs\"\n        @alignItems=\"center\"\n        @responsive={{false}}\n      >\n        <EuiFlexItem @grow={{false}}>\n          <EuiIcon @type=\"dot\" @color={{@color}} />\n        </EuiFlexItem>\n        <EuiFlexItem @grow={{false}}>\n          {{yield}}\n        </EuiFlexItem>\n      </EuiFlexGroup>\n    </div>\n  </template>\n}\n"],"names":["TEXT_SIZES","EuiHealth","Component","classes","context","getEuiThemeContext","styles","useEuiBorealisStyles","euiHealthStyles","size","args","textSize","includes","euiClass","n","prototype","cached","setComponentTemplate","precompileTemplate","strictMode","scope","EuiFlexGroup","EuiFlexItem","EuiIcon"],"mappings":";;;;;;;;;;;;AAYO,MAAMA,UAAA,GAAa,CAAC,IAAA,EAAM,GAAA,EAAK,GAAA,EAAK,SAAA;;AAI3C;;AAqBA,+EACe,MAAMC,SAAA,SAAkBC,SAAA,CAAU;EAC/C,IACIC,OAAAA,GAAkB;AACpB,IAAA,MAAMC,OAAA,GAAUC,mBAAmB,IAAI,CAAA;AACvC,IAAA,MAAMC,MAAA,GAASC,oBAAA,CACbH,OAAA,EACAI,eAEoB,CAAA;AAEtB,IAAA,MAAMC,IAAA,GAAO,IAAI,CAACC,IAAI,CAACC,QAAQ;AAC/B,IAAA,MAAMA,QAAA,GACJF,IAAA,IAAST,UAAA,CAAiCY,QAAQ,CAACH,IAAA,CAAA,GAAQA,IAAA,GAAO,GAAA;AAEpE,IAAA,OAAO,CAAA,UAAA,EAAaI,QAAA,CAAST,OAAA,EAASE,MAAM,CAAC,WAAA,CAAY,EAAEA,MAAM,CAACK,QAAA,CAAS,CAAA,CAAA,CAAG;AAChF,EAAA;AAAA,EAAA;IAAAG,CAAA,CAAA,IAAA,CAAAC,SAAA,EAAA,SAAA,EAAA,CAdCC,MAAA,CAAA,CAAA;AAAA;AAgBD,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,2UAAA,EAeA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,YAAA;QAAAC,WAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-hide-for.js

@@ -1,23 +1,20 @@
 import Component from '@glimmer/component';
-import { getValue } from '@glimmer/tracking/primitives/cache';
-import { invokeHelper } from '@ember/helper';
+import { getEuiThemeContext } from '../utils/emotion/consume.js';
 import { CurrentBreakPointHelper } from './eui-show-for.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
 /** Renders its content except on the given screen sizes. See EuiShowFor. */
 class EuiHideForComponent extends Component {
-  currentBreakpointHelper = invokeHelper(this, CurrentBreakPointHelper, () => {
-    return {
-      positional: [this.args.sizes]
-    };
-  });
-  get shouldShow() {
-    return !getValue(this.currentBreakpointHelper);
+  get breakpoints() {
+    return getEuiThemeContext(this).upstream.euiTheme.breakpoint;
   }
   static {
-    setComponentTemplate(precompileTemplate("{{#if this.shouldShow}}\n  {{yield}}\n{{/if}}", {
-      strictMode: true
+    setComponentTemplate(precompileTemplate("{{#unless (CurrentBreakPointHelper @sizes this.breakpoints)}}\n  {{yield}}\n{{/unless}}", {
+      strictMode: true,
+      scope: () => ({
+        CurrentBreakPointHelper
+      })
     }), this);
   }
 }

package/dist/components/eui-hide-for.js.map

@@ -1 +1 @@
-{"version":3,"file":"eui-hide-for.js","sources":["../../src/components/eui-hide-for.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { getValue } from '@glimmer/tracking/primitives/cache';\nimport { invokeHelper } from '@ember/helper';\n\nimport { CurrentBreakPointHelper } from './eui-show-for.gts';\n\nimport type { EuiBreakpointSize } from '../utils/breakpoint.ts';\n\nexport type EuiHideForBreakpoints = EuiBreakpointSize;\n\nexport interface EuiHideForArgs {\n  /**\n   * Screen sizes to hide the content on: any of `'xs'`, `'s'`, `'m'`,\n   * `'l'`, `'xl'`, or `'all'`. E.g. `(array \"xs\" \"s\")` hides it on phones.\n   */\n  sizes: EuiHideForBreakpoints[] | 'all' | 'none';\n}\n\n/** Renders its content except on the given screen sizes. See EuiShowFor. */\nexport interface EuiHideForSignature {\n  Args: EuiHideForArgs;\n  Blocks: {\n    /** The content. */\n    default: [];\n  };\n}\n\nexport default class EuiHideForComponent extends Component<EuiHideForSignature> {\n  currentBreakpointHelper: any = invokeHelper(\n    this,\n    CurrentBreakPointHelper,\n    () => {\n      return {\n        positional: [this.args.sizes]\n      };\n    }\n  );\n\n  get shouldShow() {\n    return !getValue(this.currentBreakpointHelper);\n  }\n\n  <template>\n    {{#if this.shouldShow}}\n      {{yield}}\n    {{/if}}\n  </template>\n}\n"],"names":["EuiHideForComponent","Component","currentBreakpointHelper","invokeHelper","CurrentBreakPointHelper","positional","args","sizes","shouldShow","getValue","setComponentTemplate","precompileTemplate","strictMode"],"mappings":";;;;;;;AAkBA;AASe,MAAMA,4BAA4BC,SAAA,CAAU;AACzDC,EAAAA,uBAAA,GAA+BC,YAAA,CAC7B,IAAI,EACJC,uBAAA,EACA,MAAA;IACE,OAAO;AACLC,MAAAA,UAAA,EAAY,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;KAC9B;AACF,EAAA,CAAA,CAAA;EAGF,IAAIC,UAAAA,GAAa;AACf,IAAA,OAAO,CAACC,QAAA,CAAS,IAAI,CAACP,uBAAuB,CAAA;AAC/C,EAAA;AAEA,EAAA;IAAAQ,oBAAA,CAAAC,kBAAA,CAAA,+CAAA,EAIA;MAAAC,UAAA,EAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}
+{"version":3,"file":"eui-hide-for.js","sources":["../../src/components/eui-hide-for.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport { getEuiThemeContext } from '../utils/emotion/consume.ts';\nimport { CurrentBreakPointHelper } from './eui-show-for.gts';\n\nimport type { EuiBreakpointSize, EuiBreakpoints } from '../utils/breakpoint.ts';\nimport type { EuiResponsiveSizes } from './eui-show-for.gts';\n\nexport type EuiHideForBreakpoints = EuiBreakpointSize;\n\nexport interface EuiHideForArgs {\n  /**\n   * Screen sizes to hide the content on: any of `'xs'`, `'s'`, `'m'`,\n   * `'l'`, `'xl'` (the nearest theme's `breakpoint` values), or `'all'` /\n   * `'none'`. E.g. `(array \"xs\" \"s\")` hides it on phones.\n   */\n  sizes: EuiResponsiveSizes;\n}\n\n/** Renders its content except on the given screen sizes. See EuiShowFor. */\nexport interface EuiHideForSignature {\n  Args: EuiHideForArgs;\n  Blocks: {\n    /** The content. */\n    default: [];\n  };\n}\n\nexport default class EuiHideForComponent extends Component<EuiHideForSignature> {\n  get breakpoints(): EuiBreakpoints {\n    return getEuiThemeContext(this).upstream.euiTheme\n      .breakpoint as EuiBreakpoints;\n  }\n\n  <template>\n    {{#unless (CurrentBreakPointHelper @sizes this.breakpoints)}}\n      {{yield}}\n    {{/unless}}\n  </template>\n}\n"],"names":["EuiHideForComponent","Component","breakpoints","getEuiThemeContext","upstream","euiTheme","breakpoint","setComponentTemplate","precompileTemplate","strictMode","scope","CurrentBreakPointHelper"],"mappings":";;;;;;AAmBA;AASe,MAAMA,4BAA4BC,SAAA,CAAU;EACzD,IAAIC,cAA8B;IAChC,OAAOC,kBAAA,CAAmB,IAAI,CAAA,CAAEC,QAAQ,CAACC,QAAQ,CAC9CC,UAAU;AACf,EAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,yFAAA,EAIA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;"}

package/dist/components/eui-highlight.js

@@ -8,15 +8,19 @@ function escapeRegExp(text) {
 }
 function highlightChunks(text, search, strict = false, highlightAll = false) {
   if (!text) return [];
-  if (!search) return [{
+  const terms = (Array.isArray(search) ? search : [search ?? '']).filter(term => term.length > 0);
+  if (!terms.length) return [{
     text,
     highlight: false
   }];
-  const regex = new RegExp(escapeRegExp(search), strict ? 'g' : 'gi');
+  if (terms.length > 1 && !highlightAll) throw new Error('Cannot parse multiple search strings without `highlightAll` enabled');
+  const regex = new RegExp(terms.map(escapeRegExp).join('|'), strict ? 'g' : 'gi');
   const chunks = [];
   let last = 0;
   for (const match of text.matchAll(regex)) {
     const start = match.index;
+    // an empty match cannot be highlighted
+    if (!match[0]) continue;
     if (start > last) chunks.push({
       text: text.slice(last, start),
       highlight: false
@@ -34,7 +38,7 @@ function highlightChunks(text, search, strict = false, highlightAll = false) {
   });
   return chunks;
 }
-const EuiHighlight = setComponentTemplate(precompileTemplate("<span ...attributes>\n  {{~#each (highlightChunks @text @search @strict @highlightAll) as |chunk|~}}\n    {{~#if chunk.highlight~}}\n      <EuiMark>{{chunk.text}}</EuiMark>\n    {{~else~}}\n      {{chunk.text}}\n    {{~/if~}}\n  {{~/each~}}\n</span>", {
+const EuiHighlight = setComponentTemplate(precompileTemplate("<span ...attributes>\n  {{~#each (highlightChunks @text @search @strict @highlightAll) as |chunk|~}}\n    {{~#if chunk.highlight~}}\n      <EuiMark @hasScreenReaderHelpText={{@hasScreenReaderHelpText}}>{{chunk.text}}</EuiMark>\n    {{~else~}}\n      {{chunk.text}}\n    {{~/if~}}\n  {{~/each~}}\n</span>", {
   strictMode: true,
   scope: () => ({
     highlightChunks,

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

@@ -1 +1 @@
-{"version":3,"file":"eui-highlight.js","sources":["../../src/components/eui-highlight.gts"],"sourcesContent":["import EuiMark from './eui-mark.gts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/**\n * Renders a string with the parts matching `@search` highlighted, e.g.\n * search results or the options of a filtered list.\n */\nexport interface EuiHighlightSignature {\n  Element: HTMLSpanElement;\n  Args: {\n    /** The text to show. */\n    text: string;\n    /** What to highlight in it. Nothing is highlighted when empty. */\n    search?: string;\n    /** Match case exactly (by default \"app\" also matches \"Apple\"). */\n    strict?: boolean;\n    /** Highlight every match instead of only the first one. */\n    highlightAll?: boolean;\n  };\n}\n\ninterface Chunk {\n  text: string;\n  highlight: boolean;\n}\n\nfunction escapeRegExp(text: string): string {\n  return text.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\n\nexport function highlightChunks(\n  text: string,\n  search?: string,\n  strict = false,\n  highlightAll = false\n): Chunk[] {\n  if (!text) return [];\n  if (!search) return [{ text, highlight: false }];\n\n  const regex = new RegExp(escapeRegExp(search), strict ? 'g' : 'gi');\n  const chunks: Chunk[] = [];\n  let last = 0;\n\n  for (const match of text.matchAll(regex)) {\n    const start = match.index;\n\n    if (start > last) chunks.push({ text: text.slice(last, start), highlight: false });\n    chunks.push({ text: match[0], highlight: true });\n    last = start + match[0].length;\n\n    if (!highlightAll) break;\n  }\n\n  if (last < text.length) chunks.push({ text: text.slice(last), highlight: false });\n\n  return chunks;\n}\n\nconst EuiHighlight: TemplateOnlyComponent<EuiHighlightSignature> = <template>\n  <span ...attributes>\n    {{~#each (highlightChunks @text @search @strict @highlightAll) as |chunk|~}}\n      {{~#if chunk.highlight~}}\n        <EuiMark>{{chunk.text}}</EuiMark>\n      {{~else~}}\n        {{chunk.text}}\n      {{~/if~}}\n    {{~/each~}}\n  </span>\n</template>;\n\nexport default EuiHighlight;\n"],"names":["escapeRegExp","text","replace","highlightChunks","search","strict","highlightAll","highlight","regex","RegExp","chunks","last","match","matchAll","start","index","push","slice","length","EuiHighlight","setComponentTemplate","precompileTemplate","strictMode","scope","EuiMark","templateOnly"],"mappings":";;;;;AA2BA,SAASA,YAAAA,CAAaC,IAAY,EAAS;AACzC,EAAA,OAAOA,IAAA,CAAKC,OAAO,CAAC,qBAAA,EAAuB,MAAA,CAAA;AAC7C;AAEO,SAASC,eAAAA,CACdF,IAAY,EACZG,MAAe,EACfC,MAAA,GAAS,KAAK,EACdC,YAAA,GAAe,KAAK,EACnB;AACD,EAAA,IAAI,CAACL,IAAA,EAAM,OAAO,EAAE;AACpB,EAAA,IAAI,CAACG,QAAQ,OAAO,CAAC;IAAEH,IAAA;AAAMM,IAAAA,SAAA,EAAW;AAAM,GAAA,CAAE;AAEhD,EAAA,MAAMC,QAAQ,IAAIC,MAAA,CAAOT,YAAA,CAAaI,MAAA,CAAA,EAASC,SAAS,GAAA,GAAM,IAAA,CAAA;EAC9D,MAAMK,SAAkB,EAAE;EAC1B,IAAIC,IAAA,GAAO,CAAA;EAEX,KAAK,MAAMC,KAAA,IAASX,IAAA,CAAKY,QAAQ,CAACL,KAAA,CAAA,EAAQ;AACxC,IAAA,MAAMM,KAAA,GAAQF,MAAMG,KAAK;AAEzB,IAAA,IAAID,KAAA,GAAQH,IAAA,EAAMD,MAAA,CAAOM,IAAI,CAAC;MAAEf,IAAA,EAAMA,IAAA,CAAKgB,KAAK,CAACN,IAAA,EAAMG,KAAA,CAAA;AAAQP,MAAAA,SAAA,EAAW;AAAM,KAAA,CAAA;IAChFG,MAAA,CAAOM,IAAI,CAAC;AAAEf,MAAAA,IAAA,EAAMW,KAAK,CAAC,CAAA,CAAE;AAAEL,MAAAA,SAAA,EAAW;AAAK,KAAA,CAAA;IAC9CI,IAAA,GAAOG,KAAA,GAAQF,KAAK,CAAC,CAAA,CAAE,CAACM,MAAM;IAE9B,IAAI,CAACZ,YAAA,EAAc;AACrB,EAAA;EAEA,IAAIK,OAAOV,IAAA,CAAKiB,MAAM,EAAER,MAAA,CAAOM,IAAI,CAAC;AAAEf,IAAAA,IAAA,EAAMA,IAAA,CAAKgB,KAAK,CAACN,IAAA,CAAA;AAAOJ,IAAAA,SAAA,EAAW;AAAM,GAAA,CAAA;AAE/E,EAAA,OAAOG,MAAA;AACT;AAEA,MAAMS,YAAoC,GAAAC,oBAAA,CAAyBC,kBAAA,CAAA,2PAAA,EAUnE;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAApB,eAAA;AAAAqB,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}
+{"version":3,"file":"eui-highlight.js","sources":["../../src/components/eui-highlight.gts"],"sourcesContent":["import EuiMark from './eui-mark.gts';\n\nimport type { TemplateOnlyComponent } from '@ember/component/template-only';\n\n/**\n * Renders a string with the parts matching `@search` highlighted, e.g.\n * search results or the options of a filtered list.\n */\nexport interface EuiHighlightSignature {\n  Element: HTMLSpanElement;\n  Args: {\n    /** The text to show. */\n    text: string;\n    /**\n     * What to highlight in it. Nothing is highlighted when empty. With\n     * `@highlightAll`, an array highlights every one of several words or\n     * phrases.\n     */\n    search?: string | string[];\n    /** Match case exactly (by default \"app\" also matches \"Apple\"). */\n    strict?: boolean;\n    /** Highlight every match instead of only the first one. */\n    highlightAll?: boolean;\n    /** Passed to each EuiMark; defaults to `true`. */\n    hasScreenReaderHelpText?: boolean;\n  };\n}\n\ninterface Chunk {\n  text: string;\n  highlight: boolean;\n}\n\nfunction escapeRegExp(text: string): string {\n  return text.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\$&');\n}\n\nexport function highlightChunks(\n  text: string,\n  search?: string | string[],\n  strict = false,\n  highlightAll = false\n): Chunk[] {\n  if (!text) return [];\n  const terms = (Array.isArray(search) ? search : [search ?? '']).filter(\n    (term) => term.length > 0\n  );\n  if (!terms.length) return [{ text, highlight: false }];\n  if (terms.length > 1 && !highlightAll)\n    throw new Error(\n      'Cannot parse multiple search strings without `highlightAll` enabled'\n    );\n\n  const regex = new RegExp(terms.map(escapeRegExp).join('|'), strict ? 'g' : 'gi');\n  const chunks: Chunk[] = [];\n  let last = 0;\n\n  for (const match of text.matchAll(regex)) {\n    const start = match.index;\n    // an empty match cannot be highlighted\n    if (!match[0]) continue;\n\n    if (start > last) chunks.push({ text: text.slice(last, start), highlight: false });\n    chunks.push({ text: match[0], highlight: true });\n    last = start + match[0].length;\n\n    if (!highlightAll) break;\n  }\n\n  if (last < text.length) chunks.push({ text: text.slice(last), highlight: false });\n\n  return chunks;\n}\n\nconst EuiHighlight: TemplateOnlyComponent<EuiHighlightSignature> = <template>\n  <span ...attributes>\n    {{~#each (highlightChunks @text @search @strict @highlightAll) as |chunk|~}}\n      {{~#if chunk.highlight~}}\n        <EuiMark\n          @hasScreenReaderHelpText={{@hasScreenReaderHelpText}}\n        >{{chunk.text}}</EuiMark>\n      {{~else~}}\n        {{chunk.text}}\n      {{~/if~}}\n    {{~/each~}}\n  </span>\n</template>;\n\nexport default EuiHighlight;\n"],"names":["escapeRegExp","text","replace","highlightChunks","search","strict","highlightAll","terms","Array","isArray","filter","term","length","highlight","Error","regex","RegExp","map","join","chunks","last","match","matchAll","start","index","push","slice","EuiHighlight","setComponentTemplate","precompileTemplate","strictMode","scope","EuiMark","templateOnly"],"mappings":";;;;;AAiCA,SAASA,YAAAA,CAAaC,IAAY,EAAS;AACzC,EAAA,OAAOA,IAAA,CAAKC,OAAO,CAAC,qBAAA,EAAuB,MAAA,CAAA;AAC7C;AAEO,SAASC,eAAAA,CACdF,IAAY,EACZG,MAA0B,EAC1BC,MAAA,GAAS,KAAK,EACdC,YAAA,GAAe,KAAK,EACnB;AACD,EAAA,IAAI,CAACL,IAAA,EAAM,OAAO,EAAE;EACpB,MAAMM,QAAQ,CAACC,KAAA,CAAMC,OAAO,CAACL,UAAUA,MAAA,GAAS,CAACA,MAAA,IAAU,EAAA,CAAG,EAAEM,MAAM,CACnEC,IAAA,IAASA,IAAA,CAAKC,MAAM,GAAG,CAAA,CAAA;AAE1B,EAAA,IAAI,CAACL,KAAA,CAAMK,MAAM,EAAE,OAAO,CAAC;IAAEX,IAAA;AAAMY,IAAAA,SAAA,EAAW;AAAM,GAAA,CAAE;AACtD,EAAA,IAAIN,KAAA,CAAMK,MAAM,GAAG,CAAA,IAAK,CAACN,YAAA,EACvB,MAAM,IAAIQ,KAAA,CACR,qEAAA,CAAA;EAGJ,MAAMC,KAAA,GAAQ,IAAIC,MAAA,CAAOT,KAAA,CAAMU,GAAG,CAACjB,YAAA,CAAA,CAAckB,IAAI,CAAC,GAAA,CAAA,EAAMb,MAAA,GAAS,GAAA,GAAM,IAAA,CAAA;EAC3E,MAAMc,SAAkB,EAAE;EAC1B,IAAIC,IAAA,GAAO,CAAA;EAEX,KAAK,MAAMC,KAAA,IAASpB,IAAA,CAAKqB,QAAQ,CAACP,KAAA,CAAA,EAAQ;AACxC,IAAA,MAAMQ,KAAA,GAAQF,MAAMG,KAAK;AACzB;AACA,IAAA,IAAI,CAACH,KAAK,CAAC,CAAA,CAAE,EAAE;AAEf,IAAA,IAAIE,KAAA,GAAQH,IAAA,EAAMD,MAAA,CAAOM,IAAI,CAAC;MAAExB,IAAA,EAAMA,IAAA,CAAKyB,KAAK,CAACN,IAAA,EAAMG,KAAA,CAAA;AAAQV,MAAAA,SAAA,EAAW;AAAM,KAAA,CAAA;IAChFM,MAAA,CAAOM,IAAI,CAAC;AAAExB,MAAAA,IAAA,EAAMoB,KAAK,CAAC,CAAA,CAAE;AAAER,MAAAA,SAAA,EAAW;AAAK,KAAA,CAAA;IAC9CO,IAAA,GAAOG,KAAA,GAAQF,KAAK,CAAC,CAAA,CAAE,CAACT,MAAM;IAE9B,IAAI,CAACN,YAAA,EAAc;AACrB,EAAA;EAEA,IAAIc,OAAOnB,IAAA,CAAKW,MAAM,EAAEO,MAAA,CAAOM,IAAI,CAAC;AAAExB,IAAAA,IAAA,EAAMA,IAAA,CAAKyB,KAAK,CAACN,IAAA,CAAA;AAAOP,IAAAA,SAAA,EAAW;AAAM,GAAA,CAAA;AAE/E,EAAA,OAAOM,MAAA;AACT;AAEA,MAAMQ,YAAoC,GAAAC,oBAAA,CAAyBC,kBAAA,CAAA,iTAAA,EAYnE;EAAAC,UAAA,EAAA,IAAA;AAAAC,EAAAA,KAAA,EAAAA,OAAA;IAAA5B,eAAA;AAAA6B,IAAAA;AAAA,GAAA;AAAU,CAAA,CAAA,EAAAC,YAAA,EAAA;;"}