@haiilo/catalyst 0.1.1 → 0.2.0

package/dist/{catalyst/cat-menu.entry.js → components/cat-menu.js}

@@ -1,4 +1,4 @@
-import { r as registerInstance, e as createEvent, h, f as Host, g as getElement } from './index-45406d3b.js';
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
 
 function getSide(placement) {
   return placement.split('-')[0];
@@ -96,21 +96,6 @@ const computePosition$1 = async (reference, floating, config) => {
   } = config;
   const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
 
-  if ("development" !== "production") {
-    if (platform == null) {
-      console.error(['Floating UI: `platform` property was not passed to config. If you', 'want to use Floating UI on the web, install @floating-ui/dom', 'instead of the /core package. Otherwise, you can create your own', '`platform`: https://floating-ui.com/docs/platform'].join(' '));
-    }
-
-    if (middleware.filter(_ref => {
-      let {
-        name
-      } = _ref;
-      return name === 'autoPlacement' || name === 'flip';
-    }).length > 1) {
-      throw new Error(['Floating UI: duplicate `flip` and/or `autoPlacement`', 'middleware detected. This will lead to an infinite loop. Ensure only', 'one of either has been passed to the `middleware` array.'].join(' '));
-    }
-  }
-
   let rects = await platform.getElementRects({
     reference,
     floating,
@@ -122,16 +107,8 @@ const computePosition$1 = async (reference, floating, config) => {
   } = computeCoordsFromPlacement(rects, placement, rtl);
   let statefulPlacement = placement;
   let middlewareData = {};
-  let _debug_loop_count_ = 0;
 
   for (let i = 0; i < middleware.length; i++) {
-    if ("development" !== "production") {
-      _debug_loop_count_++;
-
-      if (_debug_loop_count_ > 100) {
-        throw new Error(['Floating UI: The middleware lifecycle appears to be', 'running in an infinite loop. This is usually caused by a `reset`', 'continually being returned without a break condition.'].join(' '));
-      }
-    }
 
     const {
       name,
@@ -283,75 +260,6 @@ async function detectOverflow(middlewareArguments, options) {
   };
 }
 
-const min$1 = Math.min;
-const max$1 = Math.max;
-
-function within(min$1$1, value, max$1$1) {
-  return max$1(min$1$1, min$1(value, max$1$1));
-}
-
-/**
- * Positions an inner element of the floating element such that it is centered
- * to the reference element.
- * @see https://floating-ui.com/docs/arrow
- */
-const arrow = options => ({
-  name: 'arrow',
-  options,
-
-  async fn(middlewareArguments) {
-    // Since `element` is required, we don't Partial<> the type
-    const {
-      element,
-      padding = 0
-    } = options != null ? options : {};
-    const {
-      x,
-      y,
-      placement,
-      rects,
-      platform
-    } = middlewareArguments;
-
-    if (element == null) {
-      if ("development" !== "production") {
-        console.warn('Floating UI: No `element` was passed to the `arrow` middleware.');
-      }
-
-      return {};
-    }
-
-    const paddingObject = getSideObjectFromPadding(padding);
-    const coords = {
-      x,
-      y
-    };
-    const axis = getMainAxisFromPlacement(placement);
-    const length = getLengthFromAxis(axis);
-    const arrowDimensions = await platform.getDimensions(element);
-    const minProp = axis === 'y' ? 'top' : 'left';
-    const maxProp = axis === 'y' ? 'bottom' : 'right';
-    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
-    const startDiff = coords[axis] - rects.reference[axis];
-    const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
-    const clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
-    const centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the floating element if the center
-    // point is outside of the floating element's bounds
-
-    const min = paddingObject[minProp];
-    const max = clientSize - arrowDimensions[length] - paddingObject[maxProp];
-    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
-    const offset = within(min, center, max);
-    return {
-      data: {
-        [axis]: offset,
-        centerOffset: center - offset
-      }
-    };
-  }
-
-});
-
 const hash$1 = {
   left: 'right',
   right: 'left',
@@ -390,121 +298,6 @@ function getOppositeAlignmentPlacement(placement) {
   return placement.replace(/start|end/g, matched => hash[matched]);
 }
 
-const sides = ['top', 'right', 'bottom', 'left'];
-const allPlacements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-start", side + "-end"), []);
-
-function getPlacementList(alignment, autoAlignment, allowedPlacements) {
-  const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
-  return allowedPlacementsSortedByAlignment.filter(placement => {
-    if (alignment) {
-      return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
-    }
-
-    return true;
-  });
-}
-
-/**
- * Automatically chooses the `placement` which has the most space available.
- * @see https://floating-ui.com/docs/autoPlacement
- */
-const autoPlacement = function (options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  return {
-    name: 'autoPlacement',
-    options,
-
-    async fn(middlewareArguments) {
-      var _middlewareData$autoP, _middlewareData$autoP2, _middlewareData$autoP3, _middlewareData$autoP4, _placementsSortedByLe;
-
-      const {
-        x,
-        y,
-        rects,
-        middlewareData,
-        placement,
-        platform,
-        elements
-      } = middlewareArguments;
-      const {
-        alignment = null,
-        allowedPlacements = allPlacements,
-        autoAlignment = true,
-        ...detectOverflowOptions
-      } = options;
-      const placements = getPlacementList(alignment, autoAlignment, allowedPlacements);
-      const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
-      const currentIndex = (_middlewareData$autoP = (_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.index) != null ? _middlewareData$autoP : 0;
-      const currentPlacement = placements[currentIndex];
-
-      if (currentPlacement == null) {
-        return {};
-      }
-
-      const {
-        main,
-        cross
-      } = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))); // Make `computeCoords` start from the right place
-
-      if (placement !== currentPlacement) {
-        return {
-          x,
-          y,
-          reset: {
-            placement: placements[0]
-          }
-        };
-      }
-
-      const currentOverflows = [overflow[getSide(currentPlacement)], overflow[main], overflow[cross]];
-      const allOverflows = [...((_middlewareData$autoP3 = (_middlewareData$autoP4 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP4.overflows) != null ? _middlewareData$autoP3 : []), {
-        placement: currentPlacement,
-        overflows: currentOverflows
-      }];
-      const nextPlacement = placements[currentIndex + 1]; // There are more placements to check
-
-      if (nextPlacement) {
-        return {
-          data: {
-            index: currentIndex + 1,
-            overflows: allOverflows
-          },
-          reset: {
-            placement: nextPlacement
-          }
-        };
-      }
-
-      const placementsSortedByLeastOverflow = allOverflows.slice().sort((a, b) => a.overflows[0] - b.overflows[0]);
-      const placementThatFitsOnAllSides = (_placementsSortedByLe = placementsSortedByLeastOverflow.find(_ref => {
-        let {
-          overflows
-        } = _ref;
-        return overflows.every(overflow => overflow <= 0);
-      })) == null ? void 0 : _placementsSortedByLe.placement;
-      const resetPlacement = placementThatFitsOnAllSides != null ? placementThatFitsOnAllSides : placementsSortedByLeastOverflow[0].placement;
-
-      if (resetPlacement !== placement) {
-        return {
-          data: {
-            index: currentIndex + 1,
-            overflows: allOverflows
-          },
-          reset: {
-            placement: resetPlacement
-          }
-        };
-      }
-
-      return {};
-    }
-
-  };
-};
-
 function getExpandedPlacements(placement) {
   const oppositePlacement = getOppositePlacement(placement);
   return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
@@ -623,76 +416,6 @@ const flip = function (options) {
   };
 };
 
-function getSideOffsets(overflow, rect) {
-  return {
-    top: overflow.top - rect.height,
-    right: overflow.right - rect.width,
-    bottom: overflow.bottom - rect.height,
-    left: overflow.left - rect.width
-  };
-}
-
-function isAnySideFullyClipped(overflow) {
-  return sides.some(side => overflow[side] >= 0);
-}
-
-/**
- * Provides data to hide the floating element in applicable situations, such as
- * when it is not in the same clipping context as the reference element.
- * @see https://floating-ui.com/docs/hide
- */
-const hide = function (_temp) {
-  let {
-    strategy = 'referenceHidden',
-    ...detectOverflowOptions
-  } = _temp === void 0 ? {} : _temp;
-  return {
-    name: 'hide',
-
-    async fn(middlewareArguments) {
-      const {
-        rects
-      } = middlewareArguments;
-
-      switch (strategy) {
-        case 'referenceHidden':
-          {
-            const overflow = await detectOverflow(middlewareArguments, { ...detectOverflowOptions,
-              elementContext: 'reference'
-            });
-            const offsets = getSideOffsets(overflow, rects.reference);
-            return {
-              data: {
-                referenceHiddenOffsets: offsets,
-                referenceHidden: isAnySideFullyClipped(offsets)
-              }
-            };
-          }
-
-        case 'escaped':
-          {
-            const overflow = await detectOverflow(middlewareArguments, { ...detectOverflowOptions,
-              altBoundary: true
-            });
-            const offsets = getSideOffsets(overflow, rects.floating);
-            return {
-              data: {
-                escapedOffsets: offsets,
-                escaped: isAnySideFullyClipped(offsets)
-              }
-            };
-          }
-
-        default:
-          {
-            return {};
-          }
-      }
-    }
-
-  };
-};
-
 function convertValueToCoords(placement, rects, value, rtl) {
   if (rtl === void 0) {
     rtl = false;
@@ -769,356 +492,6 @@ const offset = function (value) {
   };
 };
 
-function getCrossAxis(axis) {
-  return axis === 'x' ? 'y' : 'x';
-}
-
-/**
- * Shifts the floating element in order to keep it in view when it will overflow
- * a clipping boundary.
- * @see https://floating-ui.com/docs/shift
- */
-const shift = function (options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  return {
-    name: 'shift',
-    options,
-
-    async fn(middlewareArguments) {
-      const {
-        x,
-        y,
-        placement
-      } = middlewareArguments;
-      const {
-        mainAxis: checkMainAxis = true,
-        crossAxis: checkCrossAxis = false,
-        limiter = {
-          fn: _ref => {
-            let {
-              x,
-              y
-            } = _ref;
-            return {
-              x,
-              y
-            };
-          }
-        },
-        ...detectOverflowOptions
-      } = options;
-      const coords = {
-        x,
-        y
-      };
-      const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
-      const mainAxis = getMainAxisFromPlacement(getSide(placement));
-      const crossAxis = getCrossAxis(mainAxis);
-      let mainAxisCoord = coords[mainAxis];
-      let crossAxisCoord = coords[crossAxis];
-
-      if (checkMainAxis) {
-        const minSide = mainAxis === 'y' ? 'top' : 'left';
-        const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
-        const min = mainAxisCoord + overflow[minSide];
-        const max = mainAxisCoord - overflow[maxSide];
-        mainAxisCoord = within(min, mainAxisCoord, max);
-      }
-
-      if (checkCrossAxis) {
-        const minSide = crossAxis === 'y' ? 'top' : 'left';
-        const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
-        const min = crossAxisCoord + overflow[minSide];
-        const max = crossAxisCoord - overflow[maxSide];
-        crossAxisCoord = within(min, crossAxisCoord, max);
-      }
-
-      const limitedCoords = limiter.fn({ ...middlewareArguments,
-        [mainAxis]: mainAxisCoord,
-        [crossAxis]: crossAxisCoord
-      });
-      return { ...limitedCoords,
-        data: {
-          x: limitedCoords.x - x,
-          y: limitedCoords.y - y
-        }
-      };
-    }
-
-  };
-};
-
-/**
- * Built-in `limiter` that will stop `shift()` at a certain point.
- */
-const limitShift = function (options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  return {
-    options,
-
-    fn(middlewareArguments) {
-      const {
-        x,
-        y,
-        placement,
-        rects,
-        middlewareData
-      } = middlewareArguments;
-      const {
-        offset = 0,
-        mainAxis: checkMainAxis = true,
-        crossAxis: checkCrossAxis = true
-      } = options;
-      const coords = {
-        x,
-        y
-      };
-      const mainAxis = getMainAxisFromPlacement(placement);
-      const crossAxis = getCrossAxis(mainAxis);
-      let mainAxisCoord = coords[mainAxis];
-      let crossAxisCoord = coords[crossAxis];
-      const rawOffset = typeof offset === 'function' ? offset({ ...rects,
-        placement
-      }) : offset;
-      const computedOffset = typeof rawOffset === 'number' ? {
-        mainAxis: rawOffset,
-        crossAxis: 0
-      } : {
-        mainAxis: 0,
-        crossAxis: 0,
-        ...rawOffset
-      };
-
-      if (checkMainAxis) {
-        const len = mainAxis === 'y' ? 'height' : 'width';
-        const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
-        const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
-
-        if (mainAxisCoord < limitMin) {
-          mainAxisCoord = limitMin;
-        } else if (mainAxisCoord > limitMax) {
-          mainAxisCoord = limitMax;
-        }
-      }
-
-      if (checkCrossAxis) {
-        var _middlewareData$offse, _middlewareData$offse2, _middlewareData$offse3, _middlewareData$offse4;
-
-        const len = mainAxis === 'y' ? 'width' : 'height';
-        const isOriginSide = ['top', 'left'].includes(getSide(placement));
-        const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? (_middlewareData$offse = (_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) != null ? _middlewareData$offse : 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
-        const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : (_middlewareData$offse3 = (_middlewareData$offse4 = middlewareData.offset) == null ? void 0 : _middlewareData$offse4[crossAxis]) != null ? _middlewareData$offse3 : 0) - (isOriginSide ? computedOffset.crossAxis : 0);
-
-        if (crossAxisCoord < limitMin) {
-          crossAxisCoord = limitMin;
-        } else if (crossAxisCoord > limitMax) {
-          crossAxisCoord = limitMax;
-        }
-      }
-
-      return {
-        [mainAxis]: mainAxisCoord,
-        [crossAxis]: crossAxisCoord
-      };
-    }
-
-  };
-};
-
-/**
- * Provides data to change the size of the floating element. For instance,
- * prevent it from overflowing its clipping boundary or match the width of the
- * reference element.
- * @see https://floating-ui.com/docs/size
- */
-const size = function (options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  return {
-    name: 'size',
-    options,
-
-    async fn(middlewareArguments) {
-      const {
-        placement,
-        rects,
-        platform,
-        elements
-      } = middlewareArguments;
-      const {
-        apply,
-        ...detectOverflowOptions
-      } = options;
-      const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
-      const side = getSide(placement);
-      const alignment = getAlignment(placement);
-      let heightSide;
-      let widthSide;
-
-      if (side === 'top' || side === 'bottom') {
-        heightSide = side;
-        widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
-      } else {
-        widthSide = side;
-        heightSide = alignment === 'end' ? 'top' : 'bottom';
-      }
-
-      const xMin = max$1(overflow.left, 0);
-      const xMax = max$1(overflow.right, 0);
-      const yMin = max$1(overflow.top, 0);
-      const yMax = max$1(overflow.bottom, 0);
-      const dimensions = {
-        height: rects.floating.height - (['left', 'right'].includes(placement) ? 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max$1(overflow.top, overflow.bottom)) : overflow[heightSide]),
-        width: rects.floating.width - (['top', 'bottom'].includes(placement) ? 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max$1(overflow.left, overflow.right)) : overflow[widthSide])
-      };
-      const prevDimensions = await platform.getDimensions(elements.floating);
-      apply == null ? void 0 : apply({ ...dimensions,
-        ...rects
-      });
-      const nextDimensions = await platform.getDimensions(elements.floating);
-
-      if (prevDimensions.width !== nextDimensions.width || prevDimensions.height !== nextDimensions.height) {
-        return {
-          reset: {
-            rects: true
-          }
-        };
-      }
-
-      return {};
-    }
-
-  };
-};
-
-/**
- * Provides improved positioning for inline reference elements that can span
- * over multiple lines, such as hyperlinks or range selections.
- * @see https://floating-ui.com/docs/inline
- */
-const inline = function (options) {
-  if (options === void 0) {
-    options = {};
-  }
-
-  return {
-    name: 'inline',
-    options,
-
-    async fn(middlewareArguments) {
-      var _await$platform$getCl;
-
-      const {
-        placement,
-        elements,
-        rects,
-        platform,
-        strategy
-      } = middlewareArguments; // A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
-      // ClientRect's bounds, despite the event listener being triggered. A
-      // padding of 2 seems to handle this issue.
-
-      const {
-        padding = 2,
-        x,
-        y
-      } = options;
-      const fallback = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
-        rect: rects.reference,
-        offsetParent: await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating)),
-        strategy
-      }) : rects.reference);
-      const clientRects = (_await$platform$getCl = await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) != null ? _await$platform$getCl : [];
-      const paddingObject = getSideObjectFromPadding(padding);
-
-      function getBoundingClientRect() {
-        // There are two rects and they are disjoined
-        if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {
-          var _clientRects$find;
-
-          // Find the first rect in which the point is fully inside
-          return (_clientRects$find = clientRects.find(rect => x > rect.left - paddingObject.left && x < rect.right + paddingObject.right && y > rect.top - paddingObject.top && y < rect.bottom + paddingObject.bottom)) != null ? _clientRects$find : fallback;
-        } // There are 2 or more connected rects
-
-
-        if (clientRects.length >= 2) {
-          if (getMainAxisFromPlacement(placement) === 'x') {
-            const firstRect = clientRects[0];
-            const lastRect = clientRects[clientRects.length - 1];
-            const isTop = getSide(placement) === 'top';
-            const top = firstRect.top;
-            const bottom = lastRect.bottom;
-            const left = isTop ? firstRect.left : lastRect.left;
-            const right = isTop ? firstRect.right : lastRect.right;
-            const width = right - left;
-            const height = bottom - top;
-            return {
-              top,
-              bottom,
-              left,
-              right,
-              width,
-              height,
-              x: left,
-              y: top
-            };
-          }
-
-          const isLeftSide = getSide(placement) === 'left';
-          const maxRight = max$1(...clientRects.map(rect => rect.right));
-          const minLeft = min$1(...clientRects.map(rect => rect.left));
-          const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
-          const top = measureRects[0].top;
-          const bottom = measureRects[measureRects.length - 1].bottom;
-          const left = minLeft;
-          const right = maxRight;
-          const width = right - left;
-          const height = bottom - top;
-          return {
-            top,
-            bottom,
-            left,
-            right,
-            width,
-            height,
-            x: left,
-            y: top
-          };
-        }
-
-        return fallback;
-      }
-
-      const resetRects = await platform.getElementRects({
-        reference: {
-          getBoundingClientRect
-        },
-        floating: elements.floating,
-        strategy
-      });
-
-      if (rects.reference.x !== resetRects.reference.x || rects.reference.y !== resetRects.reference.y || rects.reference.width !== resetRects.reference.width || rects.reference.height !== resetRects.reference.height) {
-        return {
-          reset: {
-            rects: resetRects
-          }
-        };
-      }
-
-      return {};
-    }
-
-  };
-};
-
 function isWindow(value) {
   return (value == null ? void 0 : value.toString()) === '[object Window]';
 }
@@ -2875,45 +2248,70 @@ var createFocusTrap = function createFocusTrap(elements, userOptions) {
   return trap;
 };
 
-const catMenuCss = ".content{position:absolute;background:white;display:none;overflow:auto;-webkit-overflow-scrolling:touch;min-width:8rem;max-width:16rem;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:0.25rem}";
+const catMenuCss = ":host{display:inline-block}:host([hidden]){display:none}.content{padding-top:0.5rem;padding-bottom:0.5rem;position:absolute;background:white;display:none;overflow:auto;-webkit-overflow-scrolling:touch;min-width:8rem;max-width:16rem;min-height:2rem;max-height:calc(100vh - 48px);box-shadow:0 1px 4px 0 rgba(16, 29, 48, 0.2);border-radius:0.25rem}";
 
-let CatMenu = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
+let nextUniqueId = 0;
+let CatMenu$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
     this.catOpen = createEvent(this, "catOpen", 7);
     this.catClose = createEvent(this, "catClose", 7);
-    this.trigger = null;
-    this.content = null;
+    this.id = nextUniqueId++;
+    /**
+     * The placement of the menu.
+     */
     this.placement = 'bottom-start';
   }
-  componentDidLoad() {
+  clickHandler(event) {
     var _a;
-    this.trigger = this.host.querySelector('[slot="trigger"]');
-    this.content = this.host.querySelector('.content');
+    // hide menu on button click
+    if (this.content && event.composedPath().includes(this.content)) {
+      (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
+      this.hide();
+    }
+  }
+  componentDidLoad() {
+    var _a, _b, _c, _d, _e;
+    this.trigger = this.firstTabbable(this.triggerSlot);
+    (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-haspopup', 'true');
+    (_b = this.trigger) === null || _b === void 0 ? void 0 : _b.setAttribute('aria-expanded', 'false');
+    (_c = this.trigger) === null || _c === void 0 ? void 0 : _c.setAttribute('aria-controls', this.contentId);
+    (_d = this.content) === null || _d === void 0 ? void 0 : _d.setAttribute('id', this.contentId);
     if (this.trigger && this.content) {
-      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.addEventListener('click', () => this.show());
+      (_e = this.trigger) === null || _e === void 0 ? void 0 : _e.addEventListener('click', () => this.show());
       autoUpdate(this.trigger, this.content, () => this.update());
     }
-    document.addEventListener('keydown', event => {
+    this.keyListener = event => {
       if (this.content && ['ArrowDown', 'ArrowUp'].includes(event.key)) {
         const targetElements = tabbable(this.content, { includeContainer: false, getShadowRoot: true });
-        const activeElement = document.activeElement
-          ? tabbable(document.activeElement, { includeContainer: true, getShadowRoot: true })
-          : [];
-        const activeIdx = activeElement.length ? targetElements.indexOf(activeElement[0]) : -1;
+        const activeElement = this.firstTabbable(document.activeElement);
+        const activeIdx = activeElement ? targetElements.indexOf(activeElement) : -1;
         const activeOff = event.key === 'ArrowDown' ? 1 : -1;
         const targetIdx = activeIdx < 0 ? 0 : (activeIdx + activeOff + targetElements.length) % targetElements.length;
         targetElements[targetIdx].focus();
         event.preventDefault();
       }
-    });
+    };
+    document.addEventListener('keydown', this.keyListener);
+  }
+  disconnectedCallback() {
+    if (this.keyListener) {
+      document.removeEventListener('keydown', this.keyListener);
+    }
   }
   render() {
-    return (h(Host, null, h("slot", { name: "trigger" }), h("div", { class: "content" }, h("slot", { name: "content" }))));
+    return (h(Host, null, h("slot", { name: "trigger", ref: el => (this.triggerSlot = el) }), h("div", { class: "content", ref: el => (this.content = el) }, h("slot", { name: "content" }))));
+  }
+  get contentId() {
+    return `cat-menu-${this.id}`;
   }
   show() {
+    var _a;
     if (this.content) {
       this.content.style.display = 'block';
+      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'true');
       this.catOpen.emit();
       this.trap = this.trap
         ? this.trap.updateContainerElements(this.content)
@@ -2929,8 +2327,10 @@ let CatMenu = class {
     }
   }
   hide() {
+    var _a;
     if (this.content) {
       this.content.style.display = '';
+      (_a = this.trigger) === null || _a === void 0 ? void 0 : _a.setAttribute('aria-expanded', 'false');
       this.catClose.emit();
     }
   }
@@ -2938,7 +2338,7 @@ let CatMenu = class {
     if (this.trigger && this.content) {
       computePosition(this.trigger, this.content, {
         placement: this.placement,
-        middleware: [offset(CatMenu.OFFSET), flip()]
+        middleware: [offset(CatMenu$1.OFFSET), flip()]
       }).then(({ x, y }) => {
         if (this.content) {
           Object.assign(this.content.style, {
@@ -2949,9 +2349,30 @@ let CatMenu = class {
       });
     }
   }
-  get host() { return getElement(this); }
+  firstTabbable(container) {
+    return (container ? tabbable(container, { includeContainer: true, getShadowRoot: true }) : []).shift();
+  }
+  static get style() { return catMenuCss; }
 };
-CatMenu.OFFSET = 4;
-CatMenu.style = catMenuCss;
+CatMenu$1.OFFSET = 4;
+CatMenu$1 = /*@__PURE__*/ proxyCustomElement(CatMenu$1, [1, "cat-menu", {
+    "placement": [1]
+  }, [[0, "catClick", "clickHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["cat-menu"];
+  components.forEach(tagName => { switch (tagName) {
+    case "cat-menu":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, CatMenu$1);
+      }
+      break;
+  } });
+}
+
+const CatMenu = CatMenu$1;
+const defineCustomElement = defineCustomElement$1;
 
-export { CatMenu as cat_menu };
+export { CatMenu, defineCustomElement };