@haiilo/catalyst 14.1.0 → 14.2.0

package/dist/cjs/cat-alert_30.cjs.entry.js

@@ -4893,6 +4893,71 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
   return coords;
 }
 
+/**
+ * Resolves with an object of overflow side offsets that determine how much the
+ * element is overflowing a given clipping boundary on each side.
+ * - positive = overflowing the boundary by that number of pixels
+ * - negative = how many pixels left before it will overflow
+ * - 0 = lies flush with the boundary
+ * @see https://floating-ui.com/docs/detectOverflow
+ */
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = 'clippingAncestors',
+    rootBoundary = 'viewport',
+    elementContext = 'floating',
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
+    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === 'floating' ? {
+    x,
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
+  } : rects.reference;
+  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
+  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
  * next to a given reference element.
@@ -4922,6 +4987,7 @@ const computePosition$1 = async (reference, floating, config) => {
   let middlewareData = {};
   let resetCount = 0;
   for (let i = 0; i < validMiddleware.length; i++) {
+    var _platform$detectOverf;
     const {
       name,
       fn
@@ -4939,7 +5005,10 @@ const computePosition$1 = async (reference, floating, config) => {
       strategy,
       middlewareData,
       rects,
-      platform,
+      platform: {
+        ...platform,
+        detectOverflow: (_platform$detectOverf = platform.detectOverflow) != null ? _platform$detectOverf : detectOverflow
+      },
       elements: {
         reference,
         floating
@@ -4984,71 +5053,6 @@ const computePosition$1 = async (reference, floating, config) => {
   };
 };
 
-/**
- * Resolves with an object of overflow side offsets that determine how much the
- * element is overflowing a given clipping boundary on each side.
- * - positive = overflowing the boundary by that number of pixels
- * - negative = how many pixels left before it will overflow
- * - 0 = lies flush with the boundary
- * @see https://floating-ui.com/docs/detectOverflow
- */
-async function detectOverflow(state, options) {
-  var _await$platform$isEle;
-  if (options === void 0) {
-    options = {};
-  }
-  const {
-    x,
-    y,
-    platform,
-    rects,
-    elements,
-    strategy
-  } = state;
-  const {
-    boundary = 'clippingAncestors',
-    rootBoundary = 'viewport',
-    elementContext = 'floating',
-    altBoundary = false,
-    padding = 0
-  } = evaluate(options, state);
-  const paddingObject = getPaddingObject(padding);
-  const altContext = elementContext === 'floating' ? 'reference' : 'floating';
-  const element = elements[altBoundary ? altContext : elementContext];
-  const clippingClientRect = rectToClientRect(await platform.getClippingRect({
-    element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
-    boundary,
-    rootBoundary,
-    strategy
-  }));
-  const rect = elementContext === 'floating' ? {
-    x,
-    y,
-    width: rects.floating.width,
-    height: rects.floating.height
-  } : rects.reference;
-  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
-  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
-    x: 1,
-    y: 1
-  } : {
-    x: 1,
-    y: 1
-  };
-  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
-    elements,
-    rect,
-    offsetParent,
-    strategy
-  }) : rect);
-  return {
-    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
-    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
-    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
-    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
-  };
-}
-
 /**
  * Optimizes the visibility of the floating element by flipping the `placement`
  * in order to keep it in view when the preferred placement(s) will overflow the
@@ -5099,7 +5103,7 @@ const flip$1 = function (options) {
         fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
       }
       const placements = [initialPlacement, ...fallbackPlacements];
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
       const overflows = [];
       let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
       if (checkMainAxis) {
@@ -5283,7 +5287,8 @@ const shift$1 = function (options) {
       const {
         x,
         y,
-        placement
+        placement,
+        platform
       } = state;
       const {
         mainAxis: checkMainAxis = true,
@@ -5306,7 +5311,7 @@ const shift$1 = function (options) {
         x,
         y
       };
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
       const crossAxis = getSideAxis(getSide(placement));
       const mainAxis = getOppositeAxis(crossAxis);
       let mainAxisCoord = coords[mainAxis];
@@ -5370,7 +5375,7 @@ const size$1 = function (options) {
         apply = () => {},
         ...detectOverflowOptions
       } = evaluate(options, state);
-      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const overflow = await platform.detectOverflow(state, detectOverflowOptions);
       const side = getSide(placement);
       const alignment = getAlignment(placement);
       const isYAxis = getSideAxis(placement) === 'y';
@@ -9373,21 +9378,27 @@ const CatSelect = class {
                 options
             });
         });
+        this.renderSubscription?.unsubscribe();
+        if (connector.renderOptions$) {
+            this.renderSubscription = connector.renderOptions$.subscribe(() => {
+                this.rerenderOptions();
+            });
+        }
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (index.h(index.Host, { key: '044a13b28c3c3d3fcb5b06efa53d489783ae9698' }, index.h("div", { key: 'b540d0b58849b8b401c611dfa08da42f45a7953c', class: {
+        return (index.h(index.Host, { key: '7489b4123c900ebefa06dcebde32b0a4ee52d4a3' }, index.h("div", { key: '9669441806e8bebc5f583957cc1a24330f06085a', class: {
                 'select-field': true,
                 'select-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false,
                 'select-multiple': this.multiple
-            } }, index.h("div", { key: '3864749c06c0aa54df1912f90636094dcdd4a229', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: 'b2e64f375a8d2e9430007b548f468055a1a83b9b', htmlFor: `select-${this.id}-input`, part: "label" }, index.h("span", { key: '1d09f458ed23045ecbd3ca3b9bb2fa5740f6c4e1', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: '7c569d0f97e2c48d6515e051dd8098003b0dc2c2', name: "label" })) || this.label, index.h("div", { key: 'f3c8709ea17c26d65e41ceb505af51dac81dda37', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: 'f2cc0d4a5fd0d815a1087b7f2b1c55c73ca36e93', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: 'beb3aaaf8261978be7895a1580a42f25f65ef5e7', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: '23a30b437dca6aea6d6f01156dc6c56faae3912f', class: "select-container" }, index.h("div", { key: '146509fd8146b3afa9c5157c7a37198c810330d7', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, index.h("div", { key: 'f9f8b2cc0914ba4a7151c580f9e9eda332aad35e', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (index.h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (index.h("span", { class: {
+            } }, index.h("div", { key: 'a94a2217157c125e34802b140843d2fffd63283f', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (index.h("label", { key: '557e2754156cb4484972dcccca103451db00a01e', htmlFor: `select-${this.id}-input`, part: "label" }, index.h("span", { key: '8d229578a218717dbe78a63e416cba36cc300c37', class: "label-wrapper" }, (this.hasSlottedLabel && index.h("slot", { key: 'f1700687e21b73edce905bc8325479bed8c31962', name: "label" })) || this.label, index.h("div", { key: '109009794bab604eca5d3f690858145ac770ea81', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (index.h("span", { key: '5868ecd309ab485a60439fd6743be56947f9d43e', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (index.h("span", { key: '8e61a17e1d1b9f3fc584c08824b243b5f0c07c0f', class: "label-optional", "aria-hidden": "true" }, "(", index$1.catI18nRegistry.t('input.required'), ")"))))))), index.h("div", { key: '9d211cd7674cda6f9bcfeebaf1252055239421ce', class: "select-container" }, index.h("div", { key: '878137436714dff589d4731ada14d11e443ab4a6', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, index.h("div", { key: '7a268001a9bc895aa5fd1157a57f89555ad9e868', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (index.h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (index.h("span", { class: {
                 pill: true,
                 'select-no-open': true,
                 'select-option-active': this.state.activeSelectionIndex === i
-            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, index.h("span", null, item.render.label), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: index$1.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (index.h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, index.h("input", { key: 'ccf158ead3c32c1376744366ccae13d32762e150', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && index.h("cat-spinner", { key: '8af750f50e620a73f9a35c66708293e758a2786e' }), this.invalid && (index.h("cat-icon", { key: '114ead7c9b473945a1fb2f5774e74d75c57819f5', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
+            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, index.h("span", null, item.render.label), !this.disabled && (index.h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: index$1.catI18nRegistry.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (index.h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, index.h("input", { key: 'dd9c6f767f5cfc9c2e3e0f37dd4bad075f1169c8', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && index.h("cat-spinner", { key: 'c3ed10971f8f29d352df71a5bb577ff3f4499ccd' }), this.invalid && (index.h("cat-icon", { key: 'c4788a44a097252f58c43769edec339c57ed74e4', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
             !this.disabled &&
             !this.state.isResolving &&
-            this.clearable ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: index$1.catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (index.h("cat-button", { key: 'ece4331f89cbb9c37d9f9693800bca1320ff7f37', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? index$1.catI18nRegistry.t('select.close') : index$1.catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (index.h(CatFormHint, { key: 'd25455be1db5404a698b35d088ba0a303215a321', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))), index.h("div", { key: 'c58c1914f90b0fb9a7b40c4c37e2fe7d92877ab8', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { key: '73a6a048ba31d8f5944d4a1aa6c8c4fb96e56df2', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.h("ul", { key: '4b86961480022fd7dd0e1641fdaed8116e320090', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
+            this.clearable ? (index.h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: index$1.catI18nRegistry.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (index.h("cat-button", { key: 'a1ae4dfc03feec1a556f818ea08ba8a53b10f132', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? index$1.catI18nRegistry.t('select.close') : index$1.catI18nRegistry.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (index.h(CatFormHint, { key: '2557e44ce584d96cc8497cee27d8e6e8f6464fd9', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && index.h("slot", { name: "hint" }), errorMap: this.errorMap })))), index.h("div", { key: '795de862359d06464591e32d3a410a8974a55028', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (index.h("cat-scrollable", { key: 'b88fc1b204533e3714b8533c10b7a817fe2d4ef1', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, index.h("ul", { key: 'f0fe6e0c398c7682363174ec6e9f04eaa8e25073', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
             ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (index.h("li", { class: "select-option-loading" }, index.h("cat-skeleton", { variant: "body", lines: 1 }), index.h("cat-skeleton", { variant: "body", lines: 1 }))))
             : !this.state.options.length &&
                 !this.tags && (index.h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : index$1.catI18nRegistry.t('select.empty')))))))));
@@ -9411,7 +9422,7 @@ const CatSelect = class {
             return (index.h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": isOptionSelected ? 'true' : 'false' }, this.multiple ? (index.h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: isOptionSelected, tabIndex: -1, labelLeft: true, onFocus: () => this.input?.focus(), onCatChange: e => {
                     !isTagOption ? this.toggle(item) : this.toggleTag(item);
                     e.stopPropagation();
-                } }, index.h("span", { slot: "label", class: "select-option-inner" }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, index.h("span", { class: "select-option-text" }, index.h("span", { class: "select-option-label" }, getLabel()), index.h("span", { class: "select-option-description" }, item.render.description))))) : (index.h("div", { class: {
+                } }, index.h("span", { slot: "label", class: "select-option-inner" }, item.render.avatar ? (index.h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, index.h("span", { class: "select-option-text", part: "option" }, index.h("span", { class: "select-option-label" }, getLabel()), index.h("span", { class: "select-option-description" }, item.render.description))))) : (index.h("div", { class: {
                     'select-option-inner': true,
                     'select-option-single': true,
                     'select-option-active': this.state.activeOptionIndex === i
@@ -9509,6 +9520,11 @@ const CatSelect = class {
             });
         }
     }
+    rerenderOptions() {
+        const optionItems = this.state.options.map(o => o.item);
+        const updatedOptions = this.toSelectItems(this.connector, optionItems);
+        this.patchState({ options: updatedOptions });
+    }
     toggle(item) {
         this.isSelected(item.item.id)
             ? this.deselect(item.item.id)
@@ -9530,6 +9546,8 @@ const CatSelect = class {
         this.connector = connector ?? this.connector;
         this.subscription?.unsubscribe();
         this.subscription = undefined;
+        this.renderSubscription?.unsubscribe();
+        this.renderSubscription = undefined;
         this.state = INIT_STATE;
     }
     onClick(event) {

package/dist/collection/components/cat-select/cat-select.js

@@ -343,21 +343,27 @@ export class CatSelect {
                 options
             });
         });
+        this.renderSubscription?.unsubscribe();
+        if (connector.renderOptions$) {
+            this.renderSubscription = connector.renderOptions$.subscribe(() => {
+                this.rerenderOptions();
+            });
+        }
     }
     render() {
         this.hostElement.tabIndex = Number(this.hostElement.getAttribute('tabindex')) || 0;
-        return (h(Host, { key: '044a13b28c3c3d3fcb5b06efa53d489783ae9698' }, h("div", { key: 'b540d0b58849b8b401c611dfa08da42f45a7953c', class: {
+        return (h(Host, { key: '7489b4123c900ebefa06dcebde32b0a4ee52d4a3' }, h("div", { key: '9669441806e8bebc5f583957cc1a24330f06085a', class: {
                 'select-field': true,
                 'select-horizontal': this.horizontal ?? this.fallbackHorizontal ?? false,
                 'select-multiple': this.multiple
-            } }, h("div", { key: '3864749c06c0aa54df1912f90636094dcdd4a229', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: 'b2e64f375a8d2e9430007b548f468055a1a83b9b', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: '1d09f458ed23045ecbd3ca3b9bb2fa5740f6c4e1', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: '7c569d0f97e2c48d6515e051dd8098003b0dc2c2', name: "label" })) || this.label, h("div", { key: 'f3c8709ea17c26d65e41ceb505af51dac81dda37', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: 'f2cc0d4a5fd0d815a1087b7f2b1c55c73ca36e93', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: 'beb3aaaf8261978be7895a1580a42f25f65ef5e7', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { key: '23a30b437dca6aea6d6f01156dc6c56faae3912f', class: "select-container" }, h("div", { key: '146509fd8146b3afa9c5157c7a37198c810330d7', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { key: 'f9f8b2cc0914ba4a7151c580f9e9eda332aad35e', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
+            } }, h("div", { key: 'a94a2217157c125e34802b140843d2fffd63283f', class: { 'label-container': true, hidden: this.labelHidden } }, (this.hasSlottedLabel || this.label) && (h("label", { key: '557e2754156cb4484972dcccca103451db00a01e', htmlFor: `select-${this.id}-input`, part: "label" }, h("span", { key: '8d229578a218717dbe78a63e416cba36cc300c37', class: "label-wrapper" }, (this.hasSlottedLabel && h("slot", { key: 'f1700687e21b73edce905bc8325479bed8c31962', name: "label" })) || this.label, h("div", { key: '109009794bab604eca5d3f690858145ac770ea81', class: "label-metadata" }, !this.required && (this.requiredMarker ?? 'optional').startsWith('optional') && (h("span", { key: '5868ecd309ab485a60439fd6743be56947f9d43e', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.optional'), ")")), this.required && this.requiredMarker?.startsWith('required') && (h("span", { key: '8e61a17e1d1b9f3fc584c08824b243b5f0c07c0f', class: "label-optional", "aria-hidden": "true" }, "(", i18n.t('input.required'), ")"))))))), h("div", { key: '9d211cd7674cda6f9bcfeebaf1252055239421ce', class: "select-container" }, h("div", { key: '878137436714dff589d4731ada14d11e443ab4a6', class: { 'select-wrapper': true, 'select-disabled': this.disabled, 'select-invalid': this.invalid }, ref: el => (this.trigger = el), id: this.id, role: "combobox", "aria-expanded": this.state.isOpen || this.isPillboxActive(), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-required": this.required ? 'true' : false, "aria-activedescendant": this.activeDescendant, onClick: e => this.onClick(e) }, h("div", { key: '7a268001a9bc895aa5fd1157a57f89555ad9e868', class: "select-wrapper-inner" }, this.multiple && this.state.selection.length ? (h("div", { id: `select-pillbox-${this.id}`, role: "listbox", "aria-orientation": "horizontal", class: "select-pills" }, this.state.selection.map((item, i) => (h("span", { class: {
                 pill: true,
                 'select-no-open': true,
                 'select-option-active': this.state.activeSelectionIndex === i
-            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: 'ccf158ead3c32c1376744366ccae13d32762e150', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", { key: '8af750f50e620a73f9a35c66708293e758a2786e' }), this.invalid && (h("cat-icon", { key: '114ead7c9b473945a1fb2f5774e74d75c57819f5', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
+            }, role: "option", "aria-selected": "true", id: `select-${this.id}-selection-${i}` }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", null, item.render.label), !this.disabled && (h("cat-button", { size: "xs", variant: "text", icon: "$cat:select-clear", iconOnly: true, a11yLabel: i18n.t('select.deselect'), onClick: () => this.deselect(item.item.id), tabIndex: -1, "data-dropdown-no-close": true }))))))) : this.state.selection.length && this.state.selection[0].render.avatar ? (h("cat-avatar", { label: this.state.selection[0].render.label, round: this.state.selection[0].render.avatar.round, src: this.state.selection[0].render.avatar.src, icon: this.state.selection[0].render.avatar.icon, initials: this.state.selection[0].render.avatar.initials ?? '' })) : null, h("input", { key: 'dd9c6f767f5cfc9c2e3e0f37dd4bad075f1169c8', "data-test": this.testId, ...this.nativeAttributes, part: "input", id: `select-${this.id}-input`, class: "select-input", role: "combobox", ref: el => (this.input = el), "aria-controls": this.isPillboxActive() ? `select-pillbox-${this.id}` : `select-listbox-${this.id}`, "aria-activedescendant": this.activeDescendant, "aria-invalid": this.invalid ? 'true' : undefined, "aria-describedby": this.hasHint ? this.id + '-hint' : undefined, "aria-autocomplete": "list", onInput: this.onInput.bind(this), value: !this.multiple ? this.state.term : undefined, placeholder: this.placeholder, disabled: this.disabled || this.state.isResolving })), this.state.isResolving && h("cat-spinner", { key: 'c3ed10971f8f29d352df71a5bb577ff3f4499ccd' }), this.invalid && (h("cat-icon", { key: 'c4788a44a097252f58c43769edec339c57ed74e4', icon: "$cat:input-error", class: "icon-suffix cat-text-danger", size: "l" })), (this.state.selection.length || this.state.term.length) &&
             !this.disabled &&
             !this.state.isResolving &&
-            this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: 'ece4331f89cbb9c37d9f9693800bca1320ff7f37', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? i18n.t('select.close') : i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { key: 'd25455be1db5404a698b35d088ba0a303215a321', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: 'c58c1914f90b0fb9a7b40c4c37e2fe7d92877ab8', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: '73a6a048ba31d8f5944d4a1aa6c8c4fb96e56df2', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: '4b86961480022fd7dd0e1641fdaed8116e320090', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
+            this.clearable ? (h("cat-button", { id: `select-clear-btn-${this.id}`, iconOnly: true, icon: "$cat:input-close", variant: "text", size: "s", a11yLabel: i18n.t('input.clear'), onCatClick: () => this.clearInput(), "data-dropdown-no-close": true })) : null, !this.state.isResolving && (h("cat-button", { key: 'a1ae4dfc03feec1a556f818ea08ba8a53b10f132', iconOnly: true, icon: "$cat:select-open", class: { 'select-btn': true, 'select-btn-open': this.state.isOpen }, variant: "text", size: "s", a11yLabel: this.state.isOpen ? i18n.t('select.close') : i18n.t('select.open'), "aria-controls": `select-listbox-${this.id}`, "aria-expanded": this.state.isOpen, tabIndex: -1, disabled: this.disabled || this.state.isResolving, "data-dropdown-no-close": true }))), this.hasHint && (h(CatFormHint, { key: '2557e44ce584d96cc8497cee27d8e6e8f6464fd9', id: this.id, hint: this.hint, slottedHint: this.hasSlottedHint && h("slot", { name: "hint" }), errorMap: this.errorMap })))), h("div", { key: '795de862359d06464591e32d3a410a8974a55028', class: "select-dropdown", ref: el => (this.dropdown = el), style: { display: this.state.isOpen ? 'block' : undefined } }, this.state.isOpen && (h("cat-scrollable", { key: 'b88fc1b204533e3714b8533c10b7a817fe2d4ef1', class: "select-options-wrapper", scrolledBuffer: 56, noOverflowX: true, noOverscroll: true, noScrolledInit: true, onScrolledBottom: () => this.more$.next() }, h("ul", { key: 'f0fe6e0c398c7682363174ec6e9f04eaa8e25073', class: "select-options", role: "listbox", "aria-multiselectable": this.multiple, "aria-setsize": this.state.totalElements, id: `select-listbox-${this.id}` }, this.optionsList, this.state.isFirstLoading
             ? Array.from(Array(CatSelect.SKELETON_COUNT)).map(() => (h("li", { class: "select-option-loading" }, h("cat-skeleton", { variant: "body", lines: 1 }), h("cat-skeleton", { variant: "body", lines: 1 }))))
             : !this.state.options.length &&
                 !this.tags && (h("li", { class: "select-option-empty" }, this.noItems ? this.noItems : i18n.t('select.empty')))))))));
@@ -381,7 +387,7 @@ export class CatSelect {
             return (h("li", { role: "option", class: "select-option", id: `select-${this.id}-option-${i}`, "aria-selected": isOptionSelected ? 'true' : 'false' }, this.multiple ? (h("cat-checkbox", { class: { 'select-option-active': this.state.activeOptionIndex === i }, checked: isOptionSelected, tabIndex: -1, labelLeft: true, onFocus: () => this.input?.focus(), onCatChange: e => {
                     !isTagOption ? this.toggle(item) : this.toggleTag(item);
                     e.stopPropagation();
-                } }, h("span", { slot: "label", class: "select-option-inner" }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", { class: "select-option-text" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))) : (h("div", { class: {
+                } }, h("span", { slot: "label", class: "select-option-inner" }, item.render.avatar ? (h("cat-avatar", { label: item.render.label, round: item.render.avatar.round, src: item.render.avatar.src, icon: item.render.avatar.icon, initials: item.render.avatar.initials ?? '' })) : null, h("span", { class: "select-option-text", part: "option" }, h("span", { class: "select-option-label" }, getLabel()), h("span", { class: "select-option-description" }, item.render.description))))) : (h("div", { class: {
                     'select-option-inner': true,
                     'select-option-single': true,
                     'select-option-active': this.state.activeOptionIndex === i
@@ -479,6 +485,11 @@ export class CatSelect {
             });
         }
     }
+    rerenderOptions() {
+        const optionItems = this.state.options.map(o => o.item);
+        const updatedOptions = this.toSelectItems(this.connector, optionItems);
+        this.patchState({ options: updatedOptions });
+    }
     toggle(item) {
         this.isSelected(item.item.id)
             ? this.deselect(item.item.id)
@@ -500,6 +511,8 @@ export class CatSelect {
         this.connector = connector ?? this.connector;
         this.subscription?.unsubscribe();
         this.subscription = undefined;
+        this.renderSubscription?.unsubscribe();
+        this.renderSubscription = undefined;
         this.state = INIT_STATE;
     }
     onClick(event) {