@cumulus-ui/components 0.5.4 → 0.5.6

package/dist/index.js

@@ -64,8 +64,8 @@ function FormAssociatedMixin(superClass) {
       this._defaultValue = this.value;
     }
     // ── Public API (thin wrappers around ElementInternals) ────────────
-    setFormValue(value, state27) {
-      this._internals.setFormValue(value, state27);
+    setFormValue(value, state28) {
+      this._internals.setFormValue(value, state28);
     }
     setValidity(flags, message, anchor) {
       if (flags && message) {
@@ -99,9 +99,9 @@ function FormAssociatedMixin(superClass) {
      * @param state  - Previously saved value or `FormData` entry.
      * @param _mode  - `'restore'` (bfcache) or `'autocomplete'`.
      */
-    formStateRestoreCallback(state27, _mode) {
-      if (typeof state27 === "string") {
-        this.value = state27;
+    formStateRestoreCallback(state28, _mode) {
+      if (typeof state28 === "string") {
+        this.value = state28;
       }
     }
   }
@@ -5934,7 +5934,8 @@ customElements.define("cs-alert", CsAlert);
 
 // src/tooltip/internal.ts
 import { css as css45, html as html19, nothing as nothing6 } from "lit";
-import { property as property18, query, state as state4 } from "lit/decorators.js";
+import { property as property18, state as state4 } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
 
 // node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
 var min = Math.min;
@@ -6119,7 +6120,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   }
   return coords;
 }
-async function detectOverflow(state27, options) {
+async function detectOverflow(state28, options) {
   var _await$platform$isEle;
   if (options === void 0) {
     options = {};
@@ -6131,14 +6132,14 @@ async function detectOverflow(state27, options) {
     rects,
     elements,
     strategy
-  } = state27;
+  } = state28;
   const {
     boundary = "clippingAncestors",
     rootBoundary = "viewport",
     elementContext = "floating",
     altBoundary = false,
     padding = 0
-  } = evaluate(options, state27);
+  } = evaluate(options, state28);
   const paddingObject = getPaddingObject(padding);
   const altContext = elementContext === "floating" ? "reference" : "floating";
   const element = elements[altBoundary ? altContext : elementContext];
@@ -6270,7 +6271,7 @@ var flip = function(options) {
   return {
     name: "flip",
     options,
-    async fn(state27) {
+    async fn(state28) {
       var _middlewareData$arrow, _middlewareData$flip;
       const {
         placement,
@@ -6279,7 +6280,7 @@ var flip = function(options) {
         initialPlacement,
         platform: platform2,
         elements
-      } = state27;
+      } = state28;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = true,
@@ -6288,7 +6289,7 @@ var flip = function(options) {
         fallbackAxisSideDirection = "none",
         flipAlignment = true,
         ...detectOverflowOptions
-      } = evaluate(options, state27);
+      } = evaluate(options, state28);
       if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -6302,7 +6303,7 @@ var flip = function(options) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements2 = [initialPlacement, ...fallbackPlacements];
-      const overflow = await platform2.detectOverflow(state27, detectOverflowOptions);
+      const overflow = await platform2.detectOverflow(state28, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
       if (checkMainAxis) {
@@ -6373,19 +6374,19 @@ var flip = function(options) {
   };
 };
 var originSides = /* @__PURE__ */ new Set(["left", "top"]);
-async function convertValueToCoords(state27, options) {
+async function convertValueToCoords(state28, options) {
   const {
     placement,
     platform: platform2,
     elements
-  } = state27;
+  } = state28;
   const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
   const side = getSide(placement);
   const alignment = getAlignment(placement);
   const isVertical = getSideAxis(placement) === "y";
   const mainAxisMulti = originSides.has(side) ? -1 : 1;
   const crossAxisMulti = rtl && isVertical ? -1 : 1;
-  const rawValue = evaluate(options, state27);
+  const rawValue = evaluate(options, state28);
   let {
     mainAxis,
     crossAxis,
@@ -6417,15 +6418,15 @@ var offset = function(options) {
   return {
     name: "offset",
     options,
-    async fn(state27) {
+    async fn(state28) {
       var _middlewareData$offse, _middlewareData$arrow;
       const {
         x,
         y,
         placement,
         middlewareData
-      } = state27;
-      const diffCoords = await convertValueToCoords(state27, options);
+      } = state28;
+      const diffCoords = await convertValueToCoords(state28, options);
       if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
         return {};
       }
@@ -6447,13 +6448,13 @@ var shift = function(options) {
   return {
     name: "shift",
     options,
-    async fn(state27) {
+    async fn(state28) {
       const {
         x,
         y,
         placement,
         platform: platform2
-      } = state27;
+      } = state28;
       const {
         mainAxis: checkMainAxis = true,
         crossAxis: checkCrossAxis = false,
@@ -6470,12 +6471,12 @@ var shift = function(options) {
           }
         },
         ...detectOverflowOptions
-      } = evaluate(options, state27);
+      } = evaluate(options, state28);
       const coords = {
         x,
         y
       };
-      const overflow = await platform2.detectOverflow(state27, detectOverflowOptions);
+      const overflow = await platform2.detectOverflow(state28, detectOverflowOptions);
       const crossAxis = getSideAxis(getSide(placement));
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
@@ -6495,7 +6496,7 @@ var shift = function(options) {
         crossAxisCoord = clamp(min2, crossAxisCoord, max2);
       }
       const limitedCoords = limiter.fn({
-        ...state27,
+        ...state28,
         [mainAxis]: mainAxisCoord,
         [crossAxis]: crossAxisCoord
       });
@@ -6586,8 +6587,8 @@ var containRe = /paint|layout|strict|content/;
 var isNotNone = (value) => !!value && value !== "none";
 var isWebKitValue;
 function isContainingBlock(elementOrCss) {
-  const css180 = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
-  return isNotNone(css180.transform) || isNotNone(css180.translate) || isNotNone(css180.scale) || isNotNone(css180.rotate) || isNotNone(css180.perspective) || !isWebKit() && (isNotNone(css180.backdropFilter) || isNotNone(css180.filter)) || willChangeRe.test(css180.willChange || "") || containRe.test(css180.contain || "");
+  const css182 = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
+  return isNotNone(css182.transform) || isNotNone(css182.translate) || isNotNone(css182.scale) || isNotNone(css182.rotate) || isNotNone(css182.perspective) || !isWebKit() && (isNotNone(css182.backdropFilter) || isNotNone(css182.filter)) || willChangeRe.test(css182.willChange || "") || containRe.test(css182.contain || "");
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -6672,9 +6673,9 @@ function getFrameElement(win) {
 
 // node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
 function getCssDimensions(element) {
-  const css180 = getComputedStyle2(element);
-  let width = parseFloat(css180.width) || 0;
-  let height = parseFloat(css180.height) || 0;
+  const css182 = getComputedStyle2(element);
+  let width = parseFloat(css182.width) || 0;
+  let height = parseFloat(css182.height) || 0;
   const hasOffset = isHTMLElement(element);
   const offsetWidth = hasOffset ? element.offsetWidth : width;
   const offsetHeight = hasOffset ? element.offsetHeight : height;
@@ -6768,9 +6769,9 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
       const iframeScale = getScale(currentIFrame);
       const iframeRect = currentIFrame.getBoundingClientRect();
-      const css180 = getComputedStyle2(currentIFrame);
-      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css180.paddingLeft)) * iframeScale.x;
-      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css180.paddingTop)) * iframeScale.y;
+      const css182 = getComputedStyle2(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css182.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css182.paddingTop)) * iframeScale.y;
       x *= iframeScale.x;
       y *= iframeScale.y;
       width *= iframeScale.x;
@@ -6847,15 +6848,15 @@ function getClientRects(element) {
   return Array.from(element.getClientRects());
 }
 function getDocumentRect(element) {
-  const html82 = getDocumentElement(element);
+  const html83 = getDocumentElement(element);
   const scroll = getNodeScroll(element);
   const body = element.ownerDocument.body;
-  const width = max(html82.scrollWidth, html82.clientWidth, body.scrollWidth, body.clientWidth);
-  const height = max(html82.scrollHeight, html82.clientHeight, body.scrollHeight, body.clientHeight);
+  const width = max(html83.scrollWidth, html83.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html83.scrollHeight, html83.clientHeight, body.scrollHeight, body.clientHeight);
   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
   const y = -scroll.scrollTop;
   if (getComputedStyle2(body).direction === "rtl") {
-    x += max(html82.clientWidth, body.clientWidth) - width;
+    x += max(html83.clientWidth, body.clientWidth) - width;
   }
   return {
     width,
@@ -6867,10 +6868,10 @@ function getDocumentRect(element) {
 var SCROLLBAR_MAX = 25;
 function getViewportRect(element, strategy) {
   const win = getWindow(element);
-  const html82 = getDocumentElement(element);
+  const html83 = getDocumentElement(element);
   const visualViewport = win.visualViewport;
-  let width = html82.clientWidth;
-  let height = html82.clientHeight;
+  let width = html83.clientWidth;
+  let height = html83.clientHeight;
   let x = 0;
   let y = 0;
   if (visualViewport) {
@@ -6882,13 +6883,13 @@ function getViewportRect(element, strategy) {
       y = visualViewport.offsetTop;
     }
   }
-  const windowScrollbarX = getWindowScrollBarX(html82);
+  const windowScrollbarX = getWindowScrollBarX(html83);
   if (windowScrollbarX <= 0) {
-    const doc = html82.ownerDocument;
+    const doc = html83.ownerDocument;
     const body = doc.body;
     const bodyStyles = getComputedStyle(body);
     const bodyMarginInline = doc.compatMode === "CSS1Compat" ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
-    const clippingStableScrollbarWidth = Math.abs(html82.clientWidth - body.clientWidth - bodyMarginInline);
+    const clippingStableScrollbarWidth = Math.abs(html83.clientWidth - body.clientWidth - bodyMarginInline);
     if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
       width -= clippingStableScrollbarWidth;
     }
@@ -7155,6 +7156,8 @@ var CsTooltipInternal = class extends CsBaseElement {
     this.position = "top";
     this.content = "";
     this._visible = false;
+    this._triggerRef = createRef();
+    this._bodyRef = createRef();
     this._tooltipId = generateUniqueId("tooltip");
     this._showTimeout = null;
     this._show = () => {
@@ -7183,22 +7186,20 @@ var CsTooltipInternal = class extends CsBaseElement {
     }
   }
   async updated() {
-    if (this._visible && this._triggerEl && this._bodyEl) {
+    if (this._visible && this._triggerRef.value && this._bodyRef.value) {
       await this._updatePosition();
     }
   }
   async _updatePosition() {
-    if (!this._triggerEl || !this._bodyEl) return;
+    const trigger = this._triggerRef.value;
+    const body = this._bodyRef.value;
+    if (!trigger || !body) return;
     const placement = this.position;
-    const { x, y } = await computePosition2(
-      this._triggerEl,
-      this._bodyEl,
-      {
-        placement,
-        middleware: [offset2(8), flip2(), shift2({ padding: 8 })]
-      }
-    );
-    Object.assign(this._bodyEl.style, {
+    const { x, y } = await computePosition2(trigger, body, {
+      placement,
+      middleware: [offset2(8), flip2(), shift2({ padding: 8 })]
+    });
+    Object.assign(body.style, {
       position: "absolute",
       left: `${x}px`,
       top: `${y}px`
@@ -7208,7 +7209,7 @@ var CsTooltipInternal = class extends CsBaseElement {
     return html19`
       <div class="tooltip--root">
         <div
-          class="tooltip-trigger"
+          ${ref(this._triggerRef)}
           aria-describedby=${this._visible ? this._tooltipId : nothing6}
           @mouseenter=${this._show}
           @mouseleave=${this._hide}
@@ -7219,9 +7220,10 @@ var CsTooltipInternal = class extends CsBaseElement {
         </div>
         ${this._visible && this.content ? html19`
             <div
-              class="tooltip-body"
+              ${ref(this._bodyRef)}
               role="tooltip"
               id=${this._tooltipId}
+              style="position: absolute"
             >
               ${this.content}
             </div>
@@ -7239,12 +7241,6 @@ __decorateClass([
 __decorateClass([
   state4()
 ], CsTooltipInternal.prototype, "_visible", 2);
-__decorateClass([
-  query(".tooltip-trigger")
-], CsTooltipInternal.prototype, "_triggerEl", 2);
-__decorateClass([
-  query(".tooltip-body")
-], CsTooltipInternal.prototype, "_bodyEl", 2);
 
 // src/tooltip/index.ts
 var CsTooltip = class extends CsTooltipInternal {
@@ -7253,7 +7249,7 @@ customElements.define("cs-tooltip", CsTooltip);
 
 // src/popover/internal.ts
 import { css as css47, html as html20, nothing as nothing7 } from "lit";
-import { property as property19, state as state5, query as query2 } from "lit/decorators.js";
+import { property as property19, state as state5, query } from "lit/decorators.js";
 import { classMap as classMap17 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined10 } from "lit/directives/if-defined.js";
 
@@ -7927,10 +7923,10 @@ __decorateClass([
   state5()
 ], CsPopoverInternal.prototype, "_open", 2);
 __decorateClass([
-  query2(".trigger")
+  query(".trigger")
 ], CsPopoverInternal.prototype, "_triggerEl", 2);
 __decorateClass([
-  query2(".container")
+  query(".container")
 ], CsPopoverInternal.prototype, "_containerEl", 2);
 
 // src/popover/index.ts
@@ -14368,9 +14364,10 @@ customElements.define("cs-expandable-section", CsExpandableSection);
 
 // src/button-dropdown/internal.ts
 import { css as css89, html as html41, nothing as nothing18 } from "lit";
-import { property as property40, state as state11, query as query3 } from "lit/decorators.js";
+import { property as property40, state as state11, query as query2 } from "lit/decorators.js";
 import { classMap as classMap36 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined21 } from "lit/directives/if-defined.js";
+import { createRef as createRef2, ref as ref2 } from "lit/directives/ref.js";
 
 // src/button-dropdown/styles.ts
 import { css as css87 } from "lit";
@@ -14700,6 +14697,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
     this.ariaLabel = null;
     this._open = false;
     this._highlightedIndex = -1;
+    this._triggerRef = createRef2();
     this._cleanupOutsideClick = null;
     this._onTriggerClick = () => {
       if (!this._isInteractive()) return;
@@ -14721,7 +14719,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
         case "Escape":
           e.stopPropagation();
           this._open = false;
-          this._triggerEl?.focus();
+          this._triggerRef.value?.focus();
           break;
         case "ArrowDown":
           e.preventDefault();
@@ -14777,7 +14775,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
     }
   }
   focus(options) {
-    this._triggerEl?.focus(options);
+    this._triggerRef.value?.focus(options);
   }
   _flatItems() {
     return this.items.filter(isActionItem);
@@ -14803,13 +14801,13 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
       });
     }
     this._open = false;
-    this._triggerEl?.focus();
+    this._triggerRef.value?.focus();
   }
   async _updatePosition() {
     await this.updateComplete;
-    if (!this._triggerEl || !this._dropdownEl) return;
+    if (!this._triggerRef.value || !this._dropdownEl) return;
     const { x, y } = await computePosition2(
-      this._triggerEl,
+      this._triggerRef.value,
       this._dropdownEl,
       {
         placement: "bottom-start",
@@ -14850,7 +14848,6 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
     const isDisabled = this.disabled || this.loading;
     const buttonClasses = {
       "button": true,
-      "trigger-btn": true,
       [`variant-${this.variant}`]: true,
       "disabled": isDisabled,
       "button-no-text": isIcon
@@ -14860,6 +14857,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
     if (isIcon) {
       return html41`
         <button
+          ${ref2(this._triggerRef)}
           class=${classMap36(buttonClasses)}
           type="button"
           aria-haspopup="true"
@@ -14879,6 +14877,7 @@ var CsButtonDropdownInternal = class extends CsBaseElement {
     };
     return html41`
       <button
+        ${ref2(this._triggerRef)}
         class=${classMap36(buttonClasses)}
         type="button"
         aria-haspopup="true"
@@ -14980,10 +14979,7 @@ __decorateClass([
   state11()
 ], CsButtonDropdownInternal.prototype, "_highlightedIndex", 2);
 __decorateClass([
-  query3(".trigger-btn")
-], CsButtonDropdownInternal.prototype, "_triggerEl", 2);
-__decorateClass([
-  query3(".dropdown")
+  query2(".dropdown")
 ], CsButtonDropdownInternal.prototype, "_dropdownEl", 2);
 
 // src/button-dropdown/index.ts
@@ -15483,9 +15479,10 @@ customElements.define("cs-breadcrumb-group", CsBreadcrumbGroup);
 
 // src/select/internal.ts
 import { css as css97, html as html44, nothing as nothing19 } from "lit";
-import { property as property43, state as state12, query as query4 } from "lit/decorators.js";
+import { property as property43, state as state12, query as query3 } from "lit/decorators.js";
 import { classMap as classMap38 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined24 } from "lit/directives/if-defined.js";
+import { createRef as createRef3, ref as ref3 } from "lit/directives/ref.js";
 
 // src/select/styles.ts
 import { css as css95 } from "lit";
@@ -15807,6 +15804,7 @@ var CsSelectInternal = class extends Base6 {
     this._open = false;
     this._filterText = "";
     this._highlightedIndex = -1;
+    this._filterInputRef = createRef3();
     this._cleanupOutsideClick = null;
     this._onTriggerClick = () => {
       if (this.disabled) return;
@@ -15893,7 +15891,7 @@ var CsSelectInternal = class extends Base6 {
         this._addOutsideClickListener();
         if (this._hasFiltering()) {
           this.updateComplete.then(() => {
-            this._filterInputEl?.focus();
+            this._filterInputRef.value?.focus();
           });
         }
       } else {
@@ -16054,6 +16052,7 @@ var CsSelectInternal = class extends Base6 {
       ${this._hasFiltering() ? html44`
         <div class="filter-container select-parts--filter">
           <input
+            ${ref3(this._filterInputRef)}
             class="filter-input"
             type="text"
             placeholder=${this.filteringPlaceholder || "Filter"}
@@ -16148,14 +16147,11 @@ __decorateClass([
   state12()
 ], CsSelectInternal.prototype, "_highlightedIndex", 2);
 __decorateClass([
-  query4(".trigger")
+  query3(".trigger")
 ], CsSelectInternal.prototype, "_triggerEl", 2);
 __decorateClass([
-  query4(".dropdown")
+  query3(".dropdown")
 ], CsSelectInternal.prototype, "_dropdownEl", 2);
-__decorateClass([
-  query4(".filter-input")
-], CsSelectInternal.prototype, "_filterInputEl", 2);
 
 // src/select/index.ts
 var CsSelect = class extends CsSelectInternal {
@@ -16164,9 +16160,10 @@ customElements.define("cs-select", CsSelect);
 
 // src/multiselect/internal.ts
 import { css as css99, html as html45, nothing as nothing20 } from "lit";
-import { property as property44, state as state13, query as query5 } from "lit/decorators.js";
+import { property as property44, state as state13, query as query4 } from "lit/decorators.js";
 import { classMap as classMap39 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined25 } from "lit/directives/if-defined.js";
+import { createRef as createRef4, ref as ref4 } from "lit/directives/ref.js";
 
 // src/multiselect/styles.ts
 import { css as css98 } from "lit";
@@ -16396,6 +16393,7 @@ var CsMultiselectInternal = class extends Base7 {
     this._open = false;
     this._filterText = "";
     this._highlightedIndex = -1;
+    this._filterInputRef = createRef4();
     this._cleanupOutsideClick = null;
     this._onTriggerClick = () => {
       if (this.disabled) return;
@@ -16498,7 +16496,7 @@ var CsMultiselectInternal = class extends Base7 {
         this._addOutsideClickListener();
         if (this._hasFiltering()) {
           this.updateComplete.then(() => {
-            this._filterInputEl?.focus();
+            this._filterInputRef.value?.focus();
           });
         }
       } else {
@@ -16676,6 +16674,7 @@ var CsMultiselectInternal = class extends Base7 {
       ${this._hasFiltering() ? html45`
         <div class="filter-container select-parts--filter">
           <input
+            ${ref4(this._filterInputRef)}
             class="filter-input"
             type="text"
             placeholder=${this.filteringPlaceholder || "Filter"}
@@ -16791,14 +16790,11 @@ __decorateClass([
   state13()
 ], CsMultiselectInternal.prototype, "_highlightedIndex", 2);
 __decorateClass([
-  query5(".trigger")
+  query4(".trigger")
 ], CsMultiselectInternal.prototype, "_triggerEl", 2);
 __decorateClass([
-  query5(".dropdown")
+  query4(".dropdown")
 ], CsMultiselectInternal.prototype, "_dropdownEl", 2);
-__decorateClass([
-  query5(".filter-input")
-], CsMultiselectInternal.prototype, "_filterInputEl", 2);
 
 // src/multiselect/index.ts
 var CsMultiselect = class extends CsMultiselectInternal {
@@ -16807,9 +16803,10 @@ customElements.define("cs-multiselect", CsMultiselect);
 
 // src/autosuggest/internal.ts
 import { css as css102, html as html46, nothing as nothing21 } from "lit";
-import { property as property45, state as state14, query as query6 } from "lit/decorators.js";
+import { property as property45, state as state14, query as query5 } from "lit/decorators.js";
 import { classMap as classMap40 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined26 } from "lit/directives/if-defined.js";
+import { createRef as createRef5, ref as ref5 } from "lit/directives/ref.js";
 
 // src/autosuggest/styles.ts
 import { css as css100 } from "lit";
@@ -17047,6 +17044,7 @@ var CsAutosuggestInternal = class extends Base8 {
     this.filteringType = "auto";
     this._open = false;
     this._highlightedIndex = -1;
+    this._inputRef = createRef5();
     this._listboxId = generateUniqueId("autosuggest-listbox");
     this._flatOptions = [];
     this._onInput = (e) => {
@@ -17138,10 +17136,10 @@ var CsAutosuggestInternal = class extends Base8 {
     this._flatOptions = result;
   }
   focus(options) {
-    this._inputEl?.focus(options);
+    this._inputRef.value?.focus(options);
   }
   select() {
-    this._inputEl?.select();
+    this._inputRef.value?.select();
   }
   _scrollHighlightedIntoView() {
     this.updateComplete.then(() => {
@@ -17167,14 +17165,14 @@ var CsAutosuggestInternal = class extends Base8 {
   }
   async updated(changed) {
     super.updated(changed);
-    if (this._open && this._inputEl && this._dropdownEl) {
+    if (this._open && this._inputRef.value && this._dropdownEl) {
       await this._updatePosition();
     }
   }
   async _updatePosition() {
-    if (!this._inputEl || !this._dropdownEl) return;
+    if (!this._inputRef.value || !this._dropdownEl) return;
     const { x, y } = await computePosition2(
-      this._inputEl,
+      this._inputRef.value,
       this._dropdownEl,
       {
         placement: "bottom-start",
@@ -17189,7 +17187,7 @@ var CsAutosuggestInternal = class extends Base8 {
     Object.assign(this._dropdownEl.style, {
       left: `${x}px`,
       top: `${y}px`,
-      inlineSize: `${this._inputEl.offsetWidth}px`
+      inlineSize: `${this._inputRef.value.offsetWidth}px`
     });
   }
   render() {
@@ -17197,7 +17195,6 @@ var CsAutosuggestInternal = class extends Base8 {
     const showDropdown = this._open && filtered.length > 0 && !this.readOnly && !this.disabled;
     const inputClasses = {
       "input": true,
-      "input-element": true,
       "input-readonly": this.readOnly,
       "input-invalid": this.invalid,
       "input-disabled": this.disabled
@@ -17206,6 +17203,7 @@ var CsAutosuggestInternal = class extends Base8 {
       <div class="root">
         <div class="layout-strut">
           <input
+            ${ref5(this._inputRef)}
             class=${classMap40(inputClasses)}
             type="text"
             .value=${this.value}
@@ -17293,10 +17291,7 @@ __decorateClass([
   state14()
 ], CsAutosuggestInternal.prototype, "_highlightedIndex", 2);
 __decorateClass([
-  query6(".input-element")
-], CsAutosuggestInternal.prototype, "_inputEl", 2);
-__decorateClass([
-  query6(".dropdown")
+  query5(".dropdown")
 ], CsAutosuggestInternal.prototype, "_dropdownEl", 2);
 
 // src/autosuggest/index.ts
@@ -19123,7 +19118,8 @@ customElements.define("cs-key-value-pairs", CsKeyValuePairs);
 
 // src/property-filter/internal.ts
 import { css as css116, html as html53, nothing as nothing27 } from "lit";
-import { property as property52, state as state17, query as queryDecorator } from "lit/decorators.js";
+import { property as property52, state as state17 } from "lit/decorators.js";
+import { createRef as createRef6, ref as ref6 } from "lit/directives/ref.js";
 
 // src/property-filter/styles.ts
 import { css as css115 } from "lit";
@@ -19391,12 +19387,13 @@ var CsPropertyFilterInternal = class extends CsBaseElement {
     this.disabled = false;
     this.filteringPlaceholder = "Filter by text";
     this._inputValue = "";
+    this._inputRef = createRef6();
   }
   static {
     this.styles = [sharedStyles, componentStyles51, componentStyles26, filterInputStyles, hostStyles52];
   }
   focus(options) {
-    this._inputEl?.focus(options);
+    this._inputRef.value?.focus(options);
   }
   _onInput(e) {
     this._inputValue = e.target.value;
@@ -19449,6 +19446,7 @@ var CsPropertyFilterInternal = class extends CsBaseElement {
         <div class="search-field">
           <div class="input-wrapper">
             <input
+              ${ref6(this._inputRef)}
               class="filter-input"
               type="text"
               .value=${this._inputValue}
@@ -19500,9 +19498,6 @@ __decorateClass([
 __decorateClass([
   state17()
 ], CsPropertyFilterInternal.prototype, "_inputValue", 2);
-__decorateClass([
-  queryDecorator(".filter-input")
-], CsPropertyFilterInternal.prototype, "_inputEl", 2);
 
 // src/property-filter/index.ts
 var CsPropertyFilter = class extends CsPropertyFilterInternal {
@@ -21714,7 +21709,7 @@ customElements.define("cs-date-input", CsDateInput);
 
 // src/date-picker/internal.ts
 import { css as css130, html as html60, nothing as nothing32 } from "lit";
-import { property as property59, state as state19, query as query7 } from "lit/decorators.js";
+import { property as property59, state as state19, query as query6 } from "lit/decorators.js";
 import { ifDefined as ifDefined32 } from "lit/directives/if-defined.js";
 import { consume as consume3 } from "@lit/context";
 
@@ -22007,10 +22002,10 @@ __decorateClass([
   state19()
 ], CsDatePickerInternal.prototype, "_open", 2);
 __decorateClass([
-  query7(".date-picker-trigger")
+  query6(".date-picker-trigger")
 ], CsDatePickerInternal.prototype, "_triggerEl", 2);
 __decorateClass([
-  query7(".dropdown")
+  query6(".dropdown")
 ], CsDatePickerInternal.prototype, "_dropdownEl", 2);
 
 // src/date-picker/index.ts
@@ -22020,7 +22015,7 @@ customElements.define("cs-date-picker", CsDatePicker);
 
 // src/date-range-picker/internal.ts
 import { css as css133, html as html61, nothing as nothing33 } from "lit";
-import { property as property60, state as state20, query as query8 } from "lit/decorators.js";
+import { property as property60, state as state20, query as query7 } from "lit/decorators.js";
 import { classMap as classMap50 } from "lit/directives/class-map.js";
 import { ifDefined as ifDefined33 } from "lit/directives/if-defined.js";
 
@@ -22849,10 +22844,10 @@ __decorateClass([
   state20()
 ], CsDateRangePickerInternal.prototype, "_selectedRelativeKey", 2);
 __decorateClass([
-  query8(".trigger-button")
+  query7(".trigger-button")
 ], CsDateRangePickerInternal.prototype, "_triggerEl", 2);
 __decorateClass([
-  query8(".dropdown")
+  query7(".dropdown")
 ], CsDateRangePickerInternal.prototype, "_dropdownEl", 2);
 
 // src/date-range-picker/index.ts
@@ -30690,6 +30685,392 @@ __decorateClass([
 var CsPanelLayout = class extends CsPanelLayoutInternal {
 };
 customElements.define("cs-panel-layout", CsPanelLayout);
+
+// src/s3-resource-selector/internal.ts
+import { css as css181, html as html82, nothing as nothing47 } from "lit";
+import { property as property81, state as state27 } from "lit/decorators.js";
+
+// src/s3-resource-selector/styles.ts
+import { css as css180 } from "lit";
+var componentStyles78 = css180`
+
+`;
+
+// src/s3-resource-selector/internal.ts
+var hostStyles80 = css181`:host { display: block; }`;
+var CsS3ResourceSelectorInternal = class extends CsBaseElement {
+  constructor() {
+    super(...arguments);
+    this.resource = { uri: "" };
+    this.invalid = false;
+    this._modalOpen = false;
+    this._uri = "";
+    this._currentLevel = "buckets";
+    this._currentPath = [];
+    this._items = [];
+    this._loading = false;
+    this._selectedItems = [];
+    this._onUriChange = (e) => {
+      e.stopPropagation();
+      const uri = e.detail.value;
+      this._uri = uri;
+      const detail = {
+        resource: { uri }
+      };
+      fireNonCancelableEvent(this, "change", detail);
+    };
+    this._openModal = () => {
+      this._modalOpen = true;
+      this._currentLevel = "buckets";
+      this._currentPath = [];
+      this._items = [];
+      this._selectedItems = [];
+      this._loadBuckets();
+    };
+    this._closeModal = () => {
+      this._modalOpen = false;
+      this._items = [];
+      this._selectedItems = [];
+    };
+    this._confirmSelection = () => {
+      if (this._selectedItems.length === 0) return;
+      const selected = this._selectedItems[0];
+      let uri = "";
+      if (this._currentLevel === "buckets") {
+        uri = `s3://${selected.Name}`;
+      } else if (this._currentLevel === "objects") {
+        const bucket = this._currentPath[0];
+        const key = selected.Key ?? "";
+        uri = `s3://${bucket}/${key}`;
+      } else if (this._currentLevel === "versions") {
+        const bucket = this._currentPath[0];
+        const prefix = this._currentPath.slice(1).join("/");
+        uri = `s3://${bucket}/${prefix}`;
+      }
+      this._uri = uri;
+      this._modalOpen = false;
+      const detail = { resource: { uri } };
+      fireNonCancelableEvent(this, "change", detail);
+    };
+    this._onSelectionChange = (e) => {
+      e.stopPropagation();
+      this._selectedItems = e.detail.selectedItems;
+    };
+    this._onRowClick = (e) => {
+      e.stopPropagation();
+      const item = e.detail.item;
+      if (this._currentLevel === "buckets") {
+        const bucketName = item.Name ?? "";
+        this._currentLevel = "objects";
+        this._currentPath = [bucketName];
+        this._selectedItems = [];
+        this._loadObjects(bucketName, "");
+      } else if (this._currentLevel === "objects") {
+        const obj = item;
+        if (obj.IsFolder) {
+          const key = obj.Key ?? "";
+          this._currentPath = [...this._currentPath.slice(0, 1), ...key.split("/").filter(Boolean)];
+          this._selectedItems = [];
+          const prefix = this._currentPath.slice(1).join("/") + "/";
+          this._loadObjects(this._currentPath[0], prefix);
+        }
+      }
+    };
+    this._onBreadcrumbFollow = (e) => {
+      e.stopPropagation();
+      const item = e.detail.item;
+      if (item.href === "/") {
+        this._currentLevel = "buckets";
+        this._currentPath = [];
+        this._selectedItems = [];
+        this._loadBuckets();
+      } else {
+        const depth = parseInt(item.href.replace("/path/", ""), 10);
+        if (!isNaN(depth)) {
+          this._currentPath = this._currentPath.slice(0, depth + 1);
+          this._currentLevel = "objects";
+          this._selectedItems = [];
+          const prefix = this._currentPath.slice(1).join("/");
+          this._loadObjects(this._currentPath[0], prefix ? prefix + "/" : "");
+        }
+      }
+    };
+  }
+  static {
+    this.styles = [sharedStyles, componentStyles78, hostStyles80];
+  }
+  willUpdate(changed) {
+    if (changed.has("resource")) {
+      this._uri = this.resource.uri;
+    }
+  }
+  focus() {
+    const input = this.shadowRoot?.querySelector("cs-input");
+    input?.focus();
+  }
+  async _loadBuckets() {
+    if (!this.fetchBuckets) {
+      this._items = [];
+      return;
+    }
+    this._loading = true;
+    try {
+      const buckets = await this.fetchBuckets();
+      this._items = buckets;
+    } catch {
+      this._items = [];
+    } finally {
+      this._loading = false;
+    }
+  }
+  async _loadObjects(bucket, prefix) {
+    if (!this.fetchObjects) {
+      this._items = [];
+      return;
+    }
+    this._loading = true;
+    try {
+      const objects = await this.fetchObjects(bucket, prefix);
+      this._items = objects;
+    } catch {
+      this._items = [];
+    } finally {
+      this._loading = false;
+    }
+  }
+  get _breadcrumbs() {
+    const root = this.i18nStrings?.modalBreadcrumbRootItem ?? "S3";
+    const items = [{ text: root, href: "/" }];
+    this._currentPath.forEach((segment, i) => {
+      items.push({ text: segment, href: `/path/${i}` });
+    });
+    return items;
+  }
+  get _columnDefinitions() {
+    const strings = this.i18nStrings;
+    if (this._currentLevel === "buckets") {
+      return [
+        {
+          id: "Name",
+          header: strings?.columnBucketName ?? "Name",
+          cell: (item) => item.Name ?? "",
+          sortingField: "Name"
+        },
+        {
+          id: "CreationDate",
+          header: strings?.columnBucketCreationDate ?? "Creation date",
+          cell: (item) => item.CreationDate ?? ""
+        }
+      ];
+    }
+    if (this._currentLevel === "objects") {
+      return [
+        {
+          id: "Key",
+          header: strings?.columnObjectKey ?? "Key",
+          cell: (item) => item.Key ?? "",
+          sortingField: "Key"
+        },
+        {
+          id: "LastModified",
+          header: strings?.columnObjectLastModified ?? "Last modified",
+          cell: (item) => item.LastModified ?? ""
+        },
+        {
+          id: "Size",
+          header: strings?.columnObjectSize ?? "Size",
+          cell: (item) => {
+            const size2 = item.Size;
+            return size2 !== void 0 ? String(size2) : "";
+          }
+        }
+      ];
+    }
+    return [
+      {
+        id: "VersionId",
+        header: strings?.columnVersionID ?? "Version ID",
+        cell: (item) => item.VersionId ?? "",
+        sortingField: "VersionId"
+      },
+      {
+        id: "LastModified",
+        header: strings?.columnVersionLastModified ?? "Last modified",
+        cell: (item) => item.LastModified ?? ""
+      },
+      {
+        id: "Size",
+        header: strings?.columnVersionSize ?? "Size",
+        cell: (item) => {
+          const size2 = item.Size;
+          return size2 !== void 0 ? String(size2) : "";
+        }
+      }
+    ];
+  }
+  get _selectionType() {
+    if (!this.selectableItemsTypes) return void 0;
+    if (this._currentLevel === "buckets" && this.selectableItemsTypes.includes("buckets")) return "single";
+    if (this._currentLevel === "objects" && this.selectableItemsTypes.includes("objects")) return "single";
+    if (this._currentLevel === "versions" && this.selectableItemsTypes.includes("versions")) return "single";
+    return void 0;
+  }
+  get _tableHeaderText() {
+    const strings = this.i18nStrings;
+    if (this._currentLevel === "buckets") return strings?.selectionBuckets ?? "Buckets";
+    if (this._currentLevel === "objects") return strings?.selectionObjects ?? "Objects";
+    return strings?.selectionVersions ?? "Versions";
+  }
+  get _loadingText() {
+    const strings = this.i18nStrings;
+    if (this._currentLevel === "buckets") return strings?.selectionBucketsLoading ?? "Loading buckets";
+    if (this._currentLevel === "objects") return strings?.selectionObjectsLoading ?? "Loading objects";
+    return strings?.selectionVersionsLoading ?? "Loading versions";
+  }
+  get _emptyText() {
+    const strings = this.i18nStrings;
+    if (this._currentLevel === "buckets") return strings?.selectionBucketsNoItems ?? "No buckets";
+    if (this._currentLevel === "objects") return strings?.selectionObjectsNoItems ?? "No objects";
+    return strings?.selectionVersionsNoItems ?? "No versions";
+  }
+  render() {
+    const strings = this.i18nStrings;
+    const browseLabel = strings?.inContextBrowseButton ?? "Browse S3";
+    const modalTitle = strings?.modalTitle ?? "Choose resource from S3";
+    const cancelLabel = strings?.modalCancelButton ?? "Cancel";
+    const submitLabel = strings?.modalSubmitButton ?? "Select";
+    const placeholder = this.inputPlaceholder ?? strings?.inContextInputPlaceholder ?? "s3://bucket/prefix/object";
+    return html82`
+      <div class="root">
+        <div class="input-row" style="display:flex;gap:8px;align-items:flex-start">
+          <cs-input
+            .value=${this._uri}
+            placeholder=${placeholder}
+            ?invalid=${this.invalid}
+            aria-describedby=${this.inputAriaDescribedby ?? nothing47}
+            @change=${this._onUriChange}
+            style="flex:1"
+          ></cs-input>
+          <cs-button @click=${this._openModal}>${browseLabel}</cs-button>
+          ${this.viewHref ? html82`<cs-button variant="normal" href=${this.viewHref}>${strings?.inContextViewButton ?? "View"}</cs-button>` : nothing47}
+        </div>
+
+        <slot name="alert"></slot>
+
+        <cs-modal
+          size="large"
+          header=${modalTitle}
+          .visible=${this._modalOpen}
+          @dismiss=${this._closeModal}
+        >
+          <cs-breadcrumb-group
+            .items=${this._breadcrumbs}
+            @follow=${this._onBreadcrumbFollow}
+          ></cs-breadcrumb-group>
+
+          <cs-table
+            .items=${this._items}
+            .columnDefinitions=${this._columnDefinitions}
+            .loading=${this._loading}
+            loading-text=${this._loadingText}
+            .selectionType=${this._selectionType}
+            .selectedItems=${this._selectedItems}
+            @selectionChange=${this._onSelectionChange}
+            @rowClick=${this._onRowClick}
+          >
+            <cs-header slot="header" counter=${`(${this._items.length})`}>
+              ${this._tableHeaderText}
+            </cs-header>
+            <div slot="empty">${this._emptyText}</div>
+          </cs-table>
+
+          <div slot="footer" style="display:flex;justify-content:flex-end;gap:8px">
+            <cs-button variant="link" @click=${this._closeModal}>${cancelLabel}</cs-button>
+            <cs-button
+              variant="primary"
+              @click=${this._confirmSelection}
+              ?disabled=${this._selectedItems.length === 0}
+            >${submitLabel}</cs-button>
+          </div>
+        </cs-modal>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property81({ attribute: false })
+], CsS3ResourceSelectorInternal.prototype, "resource", 2);
+__decorateClass([
+  property81({ type: String })
+], CsS3ResourceSelectorInternal.prototype, "inputAriaDescribedby", 2);
+__decorateClass([
+  property81({ type: String })
+], CsS3ResourceSelectorInternal.prototype, "inputPlaceholder", 2);
+__decorateClass([
+  property81({ type: Boolean })
+], CsS3ResourceSelectorInternal.prototype, "invalid", 2);
+__decorateClass([
+  property81({ type: String })
+], CsS3ResourceSelectorInternal.prototype, "viewHref", 2);
+__decorateClass([
+  property81({ attribute: false })
+], CsS3ResourceSelectorInternal.prototype, "selectableItemsTypes", 2);
+__decorateClass([
+  property81({ attribute: false })
+], CsS3ResourceSelectorInternal.prototype, "bucketsVisibleColumns", 2);
+__decorateClass([
+  property81({ attribute: false })
+], CsS3ResourceSelectorInternal.prototype, "objectsVisibleColumns", 2);
+__decorateClass([
+  property81({ attribute: false })
+], CsS3ResourceSelectorInternal.prototype, "versionsVisibleColumns", 2);
+__decorateClass([
+  property81({ attribute: false })
+], CsS3ResourceSelectorInternal.prototype, "bucketsIsItemDisabled", 2);
+__decorateClass([
+  property81({ attribute: false })
+], CsS3ResourceSelectorInternal.prototype, "objectsIsItemDisabled", 2);
+__decorateClass([
+  property81({ attribute: false })
+], CsS3ResourceSelectorInternal.prototype, "versionsIsItemDisabled", 2);
+__decorateClass([
+  property81({ attribute: false })
+], CsS3ResourceSelectorInternal.prototype, "fetchBuckets", 2);
+__decorateClass([
+  property81({ attribute: false })
+], CsS3ResourceSelectorInternal.prototype, "fetchObjects", 2);
+__decorateClass([
+  property81({ attribute: false })
+], CsS3ResourceSelectorInternal.prototype, "fetchVersions", 2);
+__decorateClass([
+  property81({ attribute: false })
+], CsS3ResourceSelectorInternal.prototype, "i18nStrings", 2);
+__decorateClass([
+  state27()
+], CsS3ResourceSelectorInternal.prototype, "_modalOpen", 2);
+__decorateClass([
+  state27()
+], CsS3ResourceSelectorInternal.prototype, "_uri", 2);
+__decorateClass([
+  state27()
+], CsS3ResourceSelectorInternal.prototype, "_currentLevel", 2);
+__decorateClass([
+  state27()
+], CsS3ResourceSelectorInternal.prototype, "_currentPath", 2);
+__decorateClass([
+  state27()
+], CsS3ResourceSelectorInternal.prototype, "_items", 2);
+__decorateClass([
+  state27()
+], CsS3ResourceSelectorInternal.prototype, "_loading", 2);
+__decorateClass([
+  state27()
+], CsS3ResourceSelectorInternal.prototype, "_selectedItems", 2);
+
+// src/s3-resource-selector/index.ts
+var CsS3ResourceSelector = class extends CsS3ResourceSelectorInternal {
+};
+customElements.define("cs-s3-resource-selector", CsS3ResourceSelector);
 export {
   CsAlert,
   CsAnchorNavigation,
@@ -30746,6 +31127,7 @@ export {
   CsPromptInput,
   CsPropertyFilter,
   CsRadioGroup,
+  CsS3ResourceSelector,
   CsSegmentedControl,
   CsSelect,
   CsSideNavigation,