@elastic/eui 110.0.0 → 111.1.0

package/optimize/es/components/overlay_mask/overlay_mask.styles.js

@@ -1,3 +1,4 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -12,8 +13,16 @@ export var euiOverlayMaskStyles = function euiOverlayMaskStyles(_ref) {
   var euiTheme = _ref.euiTheme,
     highContrastMode = _ref.highContrastMode;
   return {
-    euiOverlayMask: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('left', 0), " ", logicalCSS('right', 0), " ", logicalCSS('bottom', 0), " display:flex;align-items:center;justify-content:center;animation:", euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", highContrastMode ? euiTheme.components.overlayMaskBackgroundHighContrast : euiTheme.components.overlayMaskBackground, ";;label:euiOverlayMask;"),
+    euiOverlayMask: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('left', 0), " ", logicalCSS('right', 0), " ", logicalCSS('bottom', 0), " display:flex;align-items:center;justify-content:center;animation:", euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in forwards;animation-iteration-count:1;background:", highContrastMode ? euiTheme.components.overlayMaskBackgroundHighContrast : euiTheme.components.overlayMaskBackground, ";;label:euiOverlayMask;"),
     aboveHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.mask, ";;label:aboveHeader;"),
-    belowHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.maskBelowHeader, ";", logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)'), ";;label:belowHeader;")
+    belowHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.maskBelowHeader, ";", logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)'), ";;label:belowHeader;"),
+    noAnimation: /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+      name: "lqr4xc-noAnimation",
+      styles: "animation:none;label:noAnimation;"
+    } : {
+      name: "lqr4xc-noAnimation",
+      styles: "animation:none;label:noAnimation;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    })
   };
 };

package/optimize/es/components/page/page_header/page_header_content.js

@@ -140,7 +140,7 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
     })) === null || _tabs$find === void 0 ? void 0 : _tabs$find.label));
     tabsNode = ___EmotionJSX(React.Fragment, null, pageTitleNode && ___EmotionJSX(EuiSpacer, null), screenReaderPageTitle, ___EmotionJSX(EuiTabs, _extends({}, tabsProps, {
       bottomBorder: false,
-      size: "l"
+      size: "m"
     }), renderTabs()));
   }
   var childrenNode = children && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSpacer, null), children);

package/optimize/es/components/provider/provider.js

@@ -17,6 +17,7 @@ import { EuiCacheProvider } from './cache';
 import { EuiSystemDefaultsProvider } from './system_defaults';
 import { EuiProviderNestedCheck, useIsNestedEuiProvider } from './nested';
 import { EuiComponentDefaultsProvider } from './component_defaults';
+import { EuiFlyoutManager } from '../flyout/manager';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var isEmotionCacheObject = function isEmotionCacheObject(obj) {
   return obj.hasOwnProperty('key');
@@ -79,5 +80,5 @@ export var EuiProvider = function EuiProvider(_ref) {
     children: Utilities && ___EmotionJSX(Utilities, null)
   })), ___EmotionJSX(EuiComponentDefaultsProvider, {
     componentDefaults: componentDefaults
-  }, children)))));
+  }, ___EmotionJSX(EuiFlyoutManager, null, children))))));
 };

package/optimize/es/components/search_bar/search_bar.js

@@ -188,7 +188,7 @@ export var EuiSearchBar = /*#__PURE__*/function (_Component) {
       var isHintVisible = (_hint$popoverProps$is = hint === null || hint === void 0 || (_hint$popoverProps = hint.popoverProps) === null || _hint$popoverProps === void 0 ? void 0 : _hint$popoverProps.isOpen) !== null && _hint$popoverProps$is !== void 0 ? _hint$popoverProps$is : isHintVisibleState;
       return ___EmotionJSX(RenderWithEuiTheme, null, function (euiTheme) {
         return ___EmotionJSX(EuiFlexGroup, {
-          gutterSize: "m",
+          gutterSize: "s",
           alignItems: "center",
           wrap: true
         }, toolsLeftEl, ___EmotionJSX(EuiFlexItem, {

package/optimize/es/components/spacer/spacer.js

@@ -19,7 +19,7 @@ export var SIZES = ['xs', 's', 'm', 'l', 'xl', 'xxl'];
 export var EuiSpacer = function EuiSpacer(_ref) {
   var className = _ref.className,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'l' : _ref$size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
     rest = _objectWithoutProperties(_ref, _excluded);
   var styles = useEuiMemoizedStyles(euiSpacerStyles);
   var classes = classNames('euiSpacer', _defineProperty({}, "euiSpacer--".concat(size), size), className);

package/optimize/es/components/tour/tour_step_indicator.js

@@ -13,6 +13,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import React from 'react';
 import classNames from 'classnames';
 import { css } from '@emotion/react';
+import { useEuiTheme } from '../../services';
 import { EuiIcon } from '../icon';
 import { EuiI18n } from '../i18n';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -29,7 +30,11 @@ export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
     number = _ref2.number,
     status = _ref2.status,
     rest = _objectWithoutProperties(_ref2, _excluded);
+  var _useEuiTheme = useEuiTheme(),
+    euiTheme = _useEuiTheme.euiTheme;
   var classes = classNames('euiTourStepIndicator', className);
+  var inactiveColor = euiTheme.components.tourStepIndicatorInactiveColor;
+  var activeColor = euiTheme.components.tourStepIndicatorActiveColor;
   var indicatorIcon;
   if (status === 'active') {
     indicatorIcon = ___EmotionJSX(EuiI18n, {
@@ -39,7 +44,7 @@ export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
       return ___EmotionJSX(EuiIcon, {
         type: "dot",
         "aria-label": isActive,
-        color: "success",
+        color: activeColor,
         "aria-current": "step"
       });
     });
@@ -51,7 +56,7 @@ export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
       return ___EmotionJSX(EuiIcon, {
         type: "dot",
         "aria-label": isComplete,
-        color: "subdued"
+        color: inactiveColor
       });
     });
   } else if (status === 'incomplete') {
@@ -62,7 +67,7 @@ export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
       return ___EmotionJSX(EuiIcon, {
         type: "dot",
         "aria-label": isIncomplete,
-        color: "subdued"
+        color: inactiveColor
       });
     });
   }

package/optimize/es/global_styling/mixins/_button.js

@@ -36,7 +36,18 @@ var getButtonVariantTokenValues = function getButtonVariantTokenValues(_ref, col
     color: foreground,
     background: euiTheme.components.buttons[backgroundTokenName],
     backgroundHover: euiTheme.components.buttons[backgroundHoverTokenName],
-    backgroundActive: euiTheme.components.buttons[backgroundActiveTokenName]
+    backgroundActive: euiTheme.components.buttons[backgroundActiveTokenName],
+    borderColor: highContrastMode ? foreground : color === 'text' ? euiTheme.colors.borderBasePlain : 'transparent'
+  };
+};
+export var getEuiButtonColors = function getEuiButtonColors(euiThemeContext, color) {
+  var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'base');
+  var foreground = buttonColors.color;
+  var background = buttonColors.background;
+  return {
+    color: background === 'transparent' || color === 'disabled' ? foreground : makeHighContrastColor(foreground)(background),
+    backgroundColor: background,
+    borderColor: buttonColors.borderColor
   };
 };
 
@@ -47,13 +58,21 @@ var getButtonVariantTokenValues = function getButtonVariantTokenValues(_ref, col
  * @returns Style object `{ backgroundColor, color }`
  */
 export var euiButtonColor = function euiButtonColor(euiThemeContext, color) {
-  var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'base');
+  var buttonColors = getEuiButtonColors(euiThemeContext, color);
+  return _objectSpread({
+    color: buttonColors.color,
+    backgroundColor: buttonColors.backgroundColor
+  }, _highContrastBorder(euiThemeContext, buttonColors.borderColor));
+};
+export var getEuiFilledButtonColors = function getEuiFilledButtonColors(euiThemeContext, color) {
+  var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'filled');
   var foreground = buttonColors.color;
   var background = buttonColors.background;
-  return _objectSpread({
-    color: background === 'transparent' || color === 'disabled' ? foreground : makeHighContrastColor(foreground)(background),
-    backgroundColor: background
-  }, _highContrastBorder(euiThemeContext, foreground));
+  return {
+    color: foreground,
+    backgroundColor: background,
+    borderColor: color === 'disabled' ? foreground : background
+  };
 };
 
 /**
@@ -63,13 +82,13 @@ export var euiButtonColor = function euiButtonColor(euiThemeContext, color) {
  * @returns Style object `{ backgroundColor, color }`
  */
 export var euiButtonFillColor = function euiButtonFillColor(euiThemeContext, color) {
-  var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'filled');
+  var buttonColors = getEuiFilledButtonColors(euiThemeContext, color);
   var foreground = buttonColors.color;
-  var background = buttonColors.background;
+  var background = buttonColors.backgroundColor;
   return _objectSpread({
     color: foreground,
     backgroundColor: background
-  }, _highContrastBorder(euiThemeContext, color === 'disabled' ? foreground : background // The border is necessary for Windows high contrast themes, which ignore background-color
+  }, _highContrastBorder(euiThemeContext, buttonColors.borderColor // The border is necessary for Windows high contrast themes, which ignore background-color
   ));
 };
 

package/optimize/es/global_styling/mixins/_container_query.js

@@ -0,0 +1,106 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+var CONTAINER_TYPES = ['normal', 'size', 'inline-size'];
+
+/**
+ * Type of container context used in container queries.
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/container-type}
+ */
+
+/**
+ * Establish element as a query container.
+ * The scroll state is applied through the `scrollState` argument
+ * and not the `type` argument.
+ *
+ * @example
+ * // Export container name to use across the application
+ * export const PAGE_CONTENT_CONTAINER_NAME = 'my-app-page-content';
+ * const pageContentStyles = css`
+ *   ${euiContainer('inline-size', PAGE_CONTENT_CONTAINER_NAME)}
+ *   margin: 0 auto;
+ * `;
+ *
+ * @returns A style string to be used inside Emotion's `css` template literal
+ * @beta
+ */
+export var euiContainer = function euiContainer(type, name, scrollState) {
+  var finalType = '';
+  if (type !== 'normal') {
+    finalType += type;
+  }
+  if (scrollState) {
+    if (finalType.length) {
+      finalType += ' ';
+    }
+    finalType += 'scroll-state';
+  }
+  return [!!name && "container-name: ".concat(name), !!finalType && "container-type: ".concat(finalType)].filter(Boolean).join(';');
+};
+
+/**
+ * Establish element as a query container.
+ * The scroll state is applied through the `scrollState` argument
+ * and not the `type` argument.
+ *
+ * @example
+ * // Export container name to use across the application
+ * export const PAGE_CONTENT_CONTAINER_NAME = 'my-app-page-content';
+ * const PageContent = ({ children }: PropsWithChildren) => (
+ *   <main css={euiContainerCSS('inline-size', PAGE_CONTENT_CONTAINER_NAME)}>
+ *     {children}
+ *   </main>
+ * );
+ * @returns Emotion's `SerializedStyles` object to be passed to the `css` prop
+ *   of a React component.
+ * @beta
+ */
+export var euiContainerCSS = function euiContainerCSS(type, name, scrollState) {
+  return /*#__PURE__*/css(euiContainer(type, name, scrollState), ";label:euiContainerCSS;");
+};
+
+/**
+ * Get a @container rule for given conditions and an optional container name.
+ *
+ * Container queries can be used to apply conditional styles based on container
+ * size, its scroll state or even its styles.
+ *
+ * It's hugely useful to conditionally show or hide information based
+ * on the **container** dimensions instead of the **viewport** dimensions.
+ *
+ * When container name is provided, it will be used to target the containment
+ * context. When skipped, it will target the nearest ancestor with containment.
+ *
+ * @example
+ * const itemDetailsStyles = css`
+ *   background: red;
+ *
+ *   ${euiContainerQuery('(width > 250px)')} {
+ *     background: blue;
+ *   }
+ * `;
+ *
+ * @param conditions one or many conditions to query the container with.
+ *   Similarly to media queries, you can use
+ *   size queries (e.g., `(width > 300px)`),
+ *   scroll state queries (e.g., `(scroll-state(scrollable: top))`),
+ *   or even style queries.
+ *   You can use the `and`, `or` and `not` logical keywords to define container
+ *   conditions. Note that all conditions must be wrapped in parentheses.
+ *
+ * @param containerName When provided, it will be used to target
+ *   the containment context and run queries against it. Otherwise, the nearest
+ *   ancestor with containment will be queried instead.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@container}
+ * @beta
+ */
+export var euiContainerQuery = function euiContainerQuery(conditions, containerName) {
+  return "@container ".concat(containerName !== null && containerName !== void 0 ? containerName : '').concat(containerName ? ' ' : '').concat(conditions);
+};

package/optimize/es/global_styling/mixins/index.js

@@ -7,6 +7,7 @@
  */
 
 export * from './_color';
+export * from './_container_query';
 export * from './_helpers';
 export * from './_padding';
 export * from './_states';

package/optimize/es/services/container_query/container_query_hook.js

@@ -0,0 +1,59 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useEffect, useState, useRef } from 'react';
+import { matchContainer } from './match_container';
+
+/**
+ * React hook that subscribes to CSS container query changes.
+ *
+ * For this to work:
+ * - a proper container (an element with e.g. `container-type: inline-size`) is needed, and
+ * - the container MUST to be a parent of the element being observed
+ *
+ * @param containerCondition - A CSS `<container-condition>` string, e.g. `(width > 400px)` or `(min-width: 600px)`
+ * @param name - Optional container name, e.g. `sidebar`
+ * @returns An object containing:
+ *   - `ref`: A ref to attach to the container element
+ *   - `matches`: `true` if the container matches the condition, `false` otherwise
+ *
+ * @example
+ * ```tsx
+ * const { ref, matches } = useEuiContainerQuery('(width > 400px)');
+ * return <div ref={ref}>{matches ? 'Wide' : 'Narrow'}</div>;
+ * ```
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@container | MDN: @container}
+ * @beta
+ */
+export function useEuiContainerQuery(containerCondition, name) {
+  var containerQueryString = name ? "".concat(name, " ").concat(containerCondition) : containerCondition;
+  var ref = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    matches = _useState2[0],
+    setMatches = _useState2[1];
+  useEffect(function () {
+    if (!ref.current) return;
+    var queryList = matchContainer(ref.current, containerQueryString);
+    var handleChange = function handleChange() {
+      setMatches(queryList.matches);
+    };
+    setMatches(queryList.matches);
+    queryList.addEventListener('change', handleChange);
+    return function () {
+      queryList.removeEventListener('change', handleChange);
+      queryList.dispose();
+    };
+  }, [ref, containerQueryString]);
+  return {
+    ref: ref,
+    matches: matches
+  };
+}

package/optimize/es/{components/flyout/sessions → services/container_query}/index.js

@@ -6,5 +6,4 @@
  * Side Public License, v 1.
  */
 
-export { EuiFlyoutSessionProvider, useEuiFlyoutSessionContext } from './flyout_provider';
-export { useEuiFlyoutSession } from './use_eui_flyout';
+export * from './container_query_hook';

package/optimize/es/services/container_query/match_container.js

@@ -0,0 +1,229 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _wrapNativeSuper from "@babel/runtime/helpers/wrapNativeSuper";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * @license MIT License
+ *
+ * Copyright (c) 2025 Martin Winkler
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ *
+ * @see {@link https://github.com/teetotum/match-container/blob/main/matchContainer.js}
+ */
+
+import { v1 as uuid } from 'uuid';
+
+/**
+ * Listen for changes on a container query.
+ * Just like `window.matchMedia`.
+ *
+ * @example
+ * ```js
+ * const cql = matchContainer(element, '(width > 42rem)');
+ * cql.addEventListener('change', ({ matches }) {
+ *   // ..
+ * })
+ * ```
+ *
+ * @param element
+ * @param containerQueryString e.g. (width > 42rem)
+ * @returns ContainerQueryList
+ */
+export function matchContainer(element, containerQueryString) {
+  return new ContainerQueryList(element, containerQueryString);
+}
+
+/**
+ * `change` event dispatched by instances of {@link ContainerQueryList}
+ * whenever the value of `matches` changes
+ */
+export var ContainerQueryListChangeEvent = /*#__PURE__*/function (_Event) {
+  function ContainerQueryListChangeEvent(matches, container) {
+    var _this;
+    _classCallCheck(this, ContainerQueryListChangeEvent);
+    _this = _callSuper(this, ContainerQueryListChangeEvent, ['change']);
+    /** Whether the container query matches */
+    _defineProperty(_this, "matches", void 0);
+    /** A string representation of the container query list e.g. "(width > 1000px)" */
+    _defineProperty(_this, "container", void 0);
+    _this.matches = matches;
+    _this.container = container;
+    return _this;
+  }
+  _inherits(ContainerQueryListChangeEvent, _Event);
+  return _createClass(ContainerQueryListChangeEvent);
+}( /*#__PURE__*/_wrapNativeSuper(Event));
+
+/**
+ * A hacky implementation of a possible native `ContainerQueryList`
+ * based on the teetotum/match-container polyfill:
+ * - based on a API proposal in W3C CSS WG {@link https://github.com/w3c/csswg-drafts/issues/6205})
+ * - mimicking MediaQueryList {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList}
+ *
+ * Not meant to be used directly, but rather call `matchContainer`.
+ *
+ * It works by listening on a `transitionrun` event on the element,
+ * that gets triggered by a container query changing a custom property.
+ * Setting `transition-behavior: allow-discrete` is what makes it possible
+ * to have a CSS `transition` for a custom property.
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/transition-behavior}
+ */
+var _matches = /*#__PURE__*/new WeakMap();
+export var ContainerQueryList = /*#__PURE__*/function (_EventTarget) {
+  function ContainerQueryList(element, containerQueryString) {
+    var _this2;
+    _classCallCheck(this, ContainerQueryList);
+    _this2 = _callSuper(this, ContainerQueryList);
+    _defineProperty(_this2, "element", null);
+    _defineProperty(_this2, "styleSheet", null);
+    _defineProperty(_this2, "markerAttributeName", '');
+    _defineProperty(_this2, "sentinelPropertyName", '');
+    _defineProperty(_this2, "computedStyle", null);
+    _defineProperty(_this2, "transitionRunListener", null);
+    _classPrivateFieldInitSpec(_this2, _matches, false);
+    /**
+     * A string representation of the container query list e.g. "(width > 1000px)"
+     * (the name is weird but it is so for consistency with mediaQueryList.media)
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/media}
+     * */
+    _defineProperty(_this2, "container", void 0);
+    _this2.container = containerQueryString;
+    _this2.element = element;
+    // we call this only once to try to avoid any impact on performance
+    _this2.computedStyle = getComputedStyle(_this2.element);
+    var uniqueName = "container-query-observer-".concat(uuid());
+    _this2.markerAttributeName = "data-".concat(uniqueName);
+    _this2.sentinelPropertyName = "--".concat(uniqueName);
+
+    // order is important (as in life)
+    _this2.applyMarkerAttribute();
+    _this2.createStyleSheet();
+    _classPrivateFieldSet(_matches, _this2, _this2.computedStyle.getPropertyValue(_this2.sentinelPropertyName) === '--true');
+    _this2.setupTransitionListener();
+    return _this2;
+  }
+
+  /**
+   * The marker attribute is `data-container-query-observer-{UUID}`,
+   * it will be used as a selector in the container query,
+   * in the global CSS that's being added below.
+   */
+  _inherits(ContainerQueryList, _EventTarget);
+  return _createClass(ContainerQueryList, [{
+    key: "matches",
+    get: /** Whether the container query matches */
+    function get() {
+      return _classPrivateFieldGet(_matches, this);
+    }
+  }, {
+    key: "applyMarkerAttribute",
+    value: function applyMarkerAttribute() {
+      this.element.setAttribute(this.markerAttributeName, '');
+    }
+
+    /**
+     * Create a CSS custom property with values either `--true` or `--false`,
+     * and add container query targetting the element.
+     * Whenever the container query matches, the custom property will be `--true`.
+     * This styles are added globaly via `document.adoptedStyleSheets`.
+     */
+  }, {
+    key: "createStyleSheet",
+    value: function createStyleSheet() {
+      var css = "\n      @property ".concat(this.sentinelPropertyName, " {\n        syntax: '<custom-ident>';\n        inherits: false;\n        initial-value: --false;\n      }\n      @container ").concat(this.container, " {\n        [").concat(this.markerAttributeName, "] {\n          ").concat(this.sentinelPropertyName, ": --true;\n        }\n      }\n    ");
+      var styleSheet = new CSSStyleSheet();
+      styleSheet.replaceSync(css);
+      document.adoptedStyleSheets = [].concat(_toConsumableArray(document.adoptedStyleSheets), [styleSheet]);
+      this.styleSheet = styleSheet;
+    }
+
+    /**
+     * This is the key to the hack:
+     * - a `transition` style is added for the custom property
+     * - the `transitionrun` event will fire whenever the custom property value changes
+     *   because of the container query
+     * - we get the value from computed styles
+     * - the `matches` value is updated and
+     * - a ContainerQueryListChangeEvent event is dispatched
+     */
+  }, {
+    key: "setupTransitionListener",
+    value: function setupTransitionListener() {
+      var _this3 = this;
+      var element = this.element,
+        computedStyle = this.computedStyle,
+        sentinelPropertyName = this.sentinelPropertyName;
+      if (!element) return;
+      var currentValue = computedStyle.getPropertyValue(sentinelPropertyName);
+      element.style.setProperty('transition', "".concat(sentinelPropertyName, " 0.001ms step-start"));
+      element.style.setProperty('transition-behavior', 'allow-discrete');
+      this.transitionRunListener = function (event) {
+        if (event.target !== element) return;
+        var nextValue = computedStyle.getPropertyValue(sentinelPropertyName);
+        if (nextValue === currentValue) return;
+        currentValue = nextValue;
+        _classPrivateFieldSet(_matches, _this3, nextValue === '--true');
+        _this3.dispatchEvent(new ContainerQueryListChangeEvent(_classPrivateFieldGet(_matches, _this3), _this3.container));
+      };
+      element.addEventListener('transitionrun', this.transitionRunListener);
+    }
+  }, {
+    key: "dispose",
+    value: function dispose() {
+      var _this4 = this;
+      // remove the stylesheet from adoptedStyleSheets
+      if (this.styleSheet) {
+        document.adoptedStyleSheets = document.adoptedStyleSheets.filter(function (sheet) {
+          return sheet !== _this4.styleSheet;
+        });
+      }
+      if (!this.element) return;
+      if (this.transitionRunListener) {
+        this.element.removeEventListener('transitionrun', this.transitionRunListener);
+      }
+      this.element.removeAttribute(this.markerAttributeName);
+      this.element.style.removeProperty('transition');
+      this.element.style.removeProperty('transition-behavior');
+      this.element = null;
+      this.styleSheet = null;
+      this.computedStyle = null;
+      this.transitionRunListener = null;
+    }
+  }]);
+}( /*#__PURE__*/_wrapNativeSuper(EventTarget));