@vonage/vivid 5.24.0 → 5.27.0

package/unbundled/icon.cjs

@@ -0,0 +1,66 @@
+const require_vivid_element = require("./vivid-element.cjs");
+const require_numberConverter = require("./numberConverter.cjs");
+const require_decorate = require("./decorate.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+//#region src/lib/icon/icon.ts
+var PLACEHOLDER_DELAY = 500;
+var PLACEHOLDER_TIMEOUT = 2e3;
+/**
+* @public
+* @component icon
+* @slot - Default slot.
+* @testQuery name name
+*/
+var Icon = class extends require_vivid_element.VividElement {
+	constructor(..._args) {
+		super(..._args);
+		this.iconLoaded = false;
+		this.#currentRequestId = 0;
+		this.#abortController = null;
+	}
+	#currentRequestId;
+	#abortController;
+	/** @internal */
+	async nameChanged() {
+		const requestId = ++this.#currentRequestId;
+		if (this.#abortController) this.#abortController.abort();
+		this.#abortController = new AbortController();
+		this._svg = void 0;
+		this.iconLoaded = false;
+		let timeout = setTimeout(() => {
+			/* v8 ignore else -- @preserve */
+			if (this.#currentRequestId === requestId) {
+				this._svg = require_numberConverter.PLACEHOLDER_ICON;
+				timeout = setTimeout(() => {
+					/* v8 ignore else -- @preserve */
+					if (this.#currentRequestId === requestId && this._svg === require_numberConverter.PLACEHOLDER_ICON) this._svg = void 0;
+				}, PLACEHOLDER_TIMEOUT);
+			}
+		}, PLACEHOLDER_DELAY);
+		try {
+			const svg = await require_numberConverter.resolveIcon(this.name, this.#abortController.signal);
+			/* v8 ignore else -- @preserve */
+			if (this.#currentRequestId === requestId) this._svg = svg;
+		} catch {
+			if (this.#currentRequestId === requestId) this._svg = void 0;
+		} finally {
+			if (this.#currentRequestId === requestId) {
+				clearTimeout(timeout);
+				this.iconLoaded = true;
+			}
+		}
+	}
+};
+require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "connotation", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ converter: require_numberConverter.numberConverter })], Icon.prototype, "size", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Icon.prototype, "_svg", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Icon.prototype, "iconLoaded", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "label", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Icon.prototype, "name", void 0);
+//#endregion
+Object.defineProperty(exports, "Icon", {
+	enumerable: true,
+	get: function() {
+		return Icon;
+	}
+});

package/unbundled/icon.js

@@ -0,0 +1,61 @@
+import { t as VividElement } from "./vivid-element.js";
+import { n as resolveIcon, r as PLACEHOLDER_ICON, t as numberConverter } from "./numberConverter.js";
+import { t as __decorate } from "./decorate.js";
+import { attr, observable } from "@microsoft/fast-element";
+//#region src/lib/icon/icon.ts
+var PLACEHOLDER_DELAY = 500;
+var PLACEHOLDER_TIMEOUT = 2e3;
+/**
+* @public
+* @component icon
+* @slot - Default slot.
+* @testQuery name name
+*/
+var Icon = class extends VividElement {
+	constructor(..._args) {
+		super(..._args);
+		this.iconLoaded = false;
+		this.#currentRequestId = 0;
+		this.#abortController = null;
+	}
+	#currentRequestId;
+	#abortController;
+	/** @internal */
+	async nameChanged() {
+		const requestId = ++this.#currentRequestId;
+		if (this.#abortController) this.#abortController.abort();
+		this.#abortController = new AbortController();
+		this._svg = void 0;
+		this.iconLoaded = false;
+		let timeout = setTimeout(() => {
+			/* v8 ignore else -- @preserve */
+			if (this.#currentRequestId === requestId) {
+				this._svg = PLACEHOLDER_ICON;
+				timeout = setTimeout(() => {
+					/* v8 ignore else -- @preserve */
+					if (this.#currentRequestId === requestId && this._svg === PLACEHOLDER_ICON) this._svg = void 0;
+				}, PLACEHOLDER_TIMEOUT);
+			}
+		}, PLACEHOLDER_DELAY);
+		try {
+			const svg = await resolveIcon(this.name, this.#abortController.signal);
+			/* v8 ignore else -- @preserve */
+			if (this.#currentRequestId === requestId) this._svg = svg;
+		} catch {
+			if (this.#currentRequestId === requestId) this._svg = void 0;
+		} finally {
+			if (this.#currentRequestId === requestId) {
+				clearTimeout(timeout);
+				this.iconLoaded = true;
+			}
+		}
+	}
+};
+__decorate([attr], Icon.prototype, "connotation", void 0);
+__decorate([attr({ converter: numberConverter })], Icon.prototype, "size", void 0);
+__decorate([observable], Icon.prototype, "_svg", void 0);
+__decorate([observable], Icon.prototype, "iconLoaded", void 0);
+__decorate([attr], Icon.prototype, "label", void 0);
+__decorate([attr], Icon.prototype, "name", void 0);
+//#endregion
+export { Icon as t };

package/unbundled/kbd-shortcut.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_decorate = require("./decorate.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/shared/patterns/kbd-shortcut.ts

package/unbundled/linkable.cjs

@@ -1,9 +1,8 @@
-require("./chunk.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_delegates_aria = require("./delegates-aria.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 //#region src/shared/patterns/linkable.ts
-/** Mixin for components that can be links, inherits attributes from {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }. */
+/** Mixin for components that can be links, inherits attributes from [`<a>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). */
 var Linkable = (Base) => {
 	class LinkableElement extends require_delegates_aria.DelegatesAria(Base) {
 		constructor(..._args) {

package/unbundled/linkable.js

@@ -2,7 +2,7 @@ import { t as __decorate } from "./decorate.js";
 import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
 import { attr, html, ref } from "@microsoft/fast-element";
 //#region src/shared/patterns/linkable.ts
-/** Mixin for components that can be links, inherits attributes from {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }. */
+/** Mixin for components that can be links, inherits attributes from [`<a>` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). */
 var Linkable = (Base) => {
 	class LinkableElement extends DelegatesAria(Base) {
 		constructor(..._args) {

package/unbundled/listbox.cjs

@@ -1,8 +1,7 @@
-require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_definition = require("./definition29.cjs");
-const require_definition$1 = require("./definition30.cjs");
+const require_option = require("./option.cjs");
+const require_optgroup = require("./optgroup.cjs");
 const require_extractOptions = require("./extractOptions.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
@@ -49,7 +48,7 @@ var Listbox = class Listbox extends require_vivid_element.VividElement {
 		}
 	}
 	static {
-		this.slottedOptionFilter = (n) => require_definition.isListboxOption(n) && !n.hidden || require_definition$1.isOptgroup(n);
+		this.slottedOptionFilter = (n) => require_option.isListboxOption(n) && !n.hidden || require_optgroup.isOptgroup(n);
 	}
 	static {
 		this.TYPE_AHEAD_TIMEOUT_MS = 1e3;
@@ -140,7 +139,6 @@ var Listbox = class Listbox extends require_vivid_element.VividElement {
 				/* v8 ignore else -- @preserve */
 				if (Listbox.slottedOptionFilter(source)) this.selectedIndex = this.options.indexOf(source);
 				this.setSelectedOptions();
-				break;
 		}
 	}
 	/**
@@ -298,6 +296,11 @@ var Listbox = class Listbox extends require_vivid_element.VividElement {
 	_isDefaultSelected(option) {
 		return option.defaultSelected;
 	}
+	/** @internal */
+	_activeDescendantChanged(_prev, next) {
+		if (!this.$fastController?.isConnected) return;
+		for (const option of this.options) option._highlighted = Boolean(next && option.id === next);
+	}
 	/** Sets an option as selected and gives it focus. */
 	setSelectedOptions() {
 		this.selectedOptions = this.selectedIndex !== -1 ? [this.options[this.selectedIndex]] : [];

package/unbundled/listbox.js

@@ -1,7 +1,7 @@
 import { t as VividElement } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { i as isListboxOption } from "./definition29.js";
-import { i as isOptgroup } from "./definition30.js";
+import { n as isListboxOption } from "./option.js";
+import { n as isOptgroup } from "./optgroup.js";
 import { t as extractOptions } from "./extractOptions.js";
 import { Observable, attr, observable } from "@microsoft/fast-element";
 import { findLastIndex, keyArrowDown, keyArrowUp, keyEnd, keyEnter, keyEscape, keyHome, keySpace, keyTab, uniqueId } from "@microsoft/fast-web-utilities";
@@ -139,7 +139,6 @@ var Listbox = class Listbox extends VividElement {
 				/* v8 ignore else -- @preserve */
 				if (Listbox.slottedOptionFilter(source)) this.selectedIndex = this.options.indexOf(source);
 				this.setSelectedOptions();
-				break;
 		}
 	}
 	/**
@@ -297,6 +296,11 @@ var Listbox = class Listbox extends VividElement {
 	_isDefaultSelected(option) {
 		return option.defaultSelected;
 	}
+	/** @internal */
+	_activeDescendantChanged(_prev, next) {
+		if (!this.$fastController?.isConnected) return;
+		for (const option of this.options) option._highlighted = Boolean(next && option.id === next);
+	}
 	/** Sets an option as selected and gives it focus. */
 	setSelectedOptions() {
 		this.selectedOptions = this.selectedIndex !== -1 ? [this.options[this.selectedIndex]] : [];

package/unbundled/localized.cjs

@@ -1,4 +1,3 @@
-require("./chunk.cjs");
 const require_decorate = require("./decorate.cjs");
 const require_en_US = require("./en-US.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");

package/unbundled/mixins.cjs

@@ -1,51 +1,7 @@
-require("./chunk.cjs");
-const require_vivid_element = require("./vivid-element.cjs");
-const require_definition = require("./definition.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_localized = require("./localized.cjs");
-const require_definition$1 = require("./definition22.cjs");
+const require_feedback_message = require("./feedback-message.cjs");
 const require_randomId = require("./randomId.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
-let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/shared/feedback/feedback-message.scss?inline
-var feedback_message_default = ":host{display:contents}.message{contain:inline-size;font:var(--vvd-typography-base-condensed);grid-column:1/-1;gap:4px;display:flex}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}";
-//#endregion
-//#region src/shared/feedback/feedback-message.ts
-/** Renders a feedback message of the given type. When type='none', nothing is rendered. */
-var FeedbackMessage = class extends require_localized.Localized(require_vivid_element.VividElement) {
-	constructor(..._args) {
-		super(..._args);
-		this.type = "none";
-	}
-};
-require_decorate.__decorate([_microsoft_fast_element.attr], FeedbackMessage.prototype, "type", void 0);
-function iconTemplate(context, icon, textI18nKey) {
-	const iconTag = context.tagFor(require_definition.Icon);
-	return _microsoft_fast_element.html`<${iconTag} class="icon" name="${icon}" label="${(x) => x.locale.feedbackMessage[textI18nKey]}"></${iconTag}>`;
-}
-function iconForType(context) {
-	const iconTemplateForType = {
-		none: "",
-		helper: "",
-		error: iconTemplate(context, "info-line", "errorIconText"),
-		success: iconTemplate(context, "check-circle-line", "successIconText")
-	};
-	return _microsoft_fast_element.html`${(x) => iconTemplateForType[x.type]}`;
-}
-var shouldAnnounce = (type) => type === "error";
-var FeedbackMessageTemplate = (ctx) => {
-	const message = _microsoft_fast_element.html`<div
-		class="${(x) => (0, _microsoft_fast_web_utilities.classNames)("message", `${x.type}-message`)}"
-	>
-		${iconForType(ctx)}<slot></slot>
-	</div>`;
-	return _microsoft_fast_element.html`${(0, _microsoft_fast_element.when)((x) => !shouldAnnounce(x.type), message)}
-		<span class="announcement" role="status" aria-live="polite">
-			${(0, _microsoft_fast_element.when)((x) => shouldAnnounce(x.type), message)}
-		</span>`;
-};
-var feedbackMessageDefinition = require_vivid_element.defineVividComponent("feedback-message", FeedbackMessage, FeedbackMessageTemplate, [require_definition.iconDefinition, require_definition$1.visuallyHiddenDefinition], { styles: feedback_message_default });
-//#endregion
 //#region src/shared/feedback/mixins.ts
 /** Mixin for elements that display a feedback message. */
 var WithFeedback = (Base) => {
@@ -86,7 +42,7 @@ var WithFeedback = (Base) => {
 		}
 		/** @internal */
 		_getFeedbackTemplate(ctx) {
-			const feedbackTag = ctx.tagFor(FeedbackMessage);
+			const feedbackTag = ctx.tagFor(require_feedback_message.FeedbackMessage);
 			return _microsoft_fast_element.html`
 				<${feedbackTag} id="feedback" :type="${(x) => x._internalFeedback().type}">
 					${(x) => x._internalFeedback().message}
@@ -130,7 +86,7 @@ var WithLightDOMFeedback = (Base) => {
 		}
 		/** @internal */
 		_getFeedbackTemplate(ctx) {
-			const feedbackTag = ctx.tagFor(FeedbackMessage);
+			const feedbackTag = ctx.tagFor(require_feedback_message.FeedbackMessage);
 			return _microsoft_fast_element.html`
 				<slot name="_feedback"></slot>
 				${require_randomId.renderInLightDOM(_microsoft_fast_element.html`<${feedbackTag}
@@ -165,9 +121,3 @@ Object.defineProperty(exports, "WithLightDOMFeedback", {
 		return WithLightDOMFeedback;
 	}
 });
-Object.defineProperty(exports, "feedbackMessageDefinition", {
-	enumerable: true,
-	get: function() {
-		return feedbackMessageDefinition;
-	}
-});

package/unbundled/mixins.js

@@ -1,50 +1,7 @@
-import { t as VividElement, u as defineVividComponent } from "./vivid-element.js";
-import { r as Icon, t as iconDefinition } from "./definition.js";
 import { t as __decorate } from "./decorate.js";
-import { t as Localized } from "./localized.js";
-import { n as visuallyHiddenDefinition } from "./definition22.js";
+import { t as FeedbackMessage } from "./feedback-message.js";
 import { n as renderInLightDOM, t as generateRandomId } from "./randomId.js";
-import { attr, html, observable, slotted, when } from "@microsoft/fast-element";
-import { classNames } from "@microsoft/fast-web-utilities";
-//#region src/shared/feedback/feedback-message.scss?inline
-var feedback_message_default = ":host{display:contents}.message{contain:inline-size;font:var(--vvd-typography-base-condensed);grid-column:1/-1;gap:4px;display:flex}.message.none-message{display:none}.message.helper-message{color:var(--_low-ink-color)}.message.error-message,.message.success-message{color:var(--vvd-color-canvas-text)}slot{display:inline}.icon{font-size:16px}.error-message .icon{color:var(--vvd-color-alert-500)}.success-message .icon{color:var(--vvd-color-success-500)}.announcement{display:contents}";
-//#endregion
-//#region src/shared/feedback/feedback-message.ts
-/** Renders a feedback message of the given type. When type='none', nothing is rendered. */
-var FeedbackMessage = class extends Localized(VividElement) {
-	constructor(..._args) {
-		super(..._args);
-		this.type = "none";
-	}
-};
-__decorate([attr], FeedbackMessage.prototype, "type", void 0);
-function iconTemplate(context, icon, textI18nKey) {
-	const iconTag = context.tagFor(Icon);
-	return html`<${iconTag} class="icon" name="${icon}" label="${(x) => x.locale.feedbackMessage[textI18nKey]}"></${iconTag}>`;
-}
-function iconForType(context) {
-	const iconTemplateForType = {
-		none: "",
-		helper: "",
-		error: iconTemplate(context, "info-line", "errorIconText"),
-		success: iconTemplate(context, "check-circle-line", "successIconText")
-	};
-	return html`${(x) => iconTemplateForType[x.type]}`;
-}
-var shouldAnnounce = (type) => type === "error";
-var FeedbackMessageTemplate = (ctx) => {
-	const message = html`<div
-		class="${(x) => classNames("message", `${x.type}-message`)}"
-	>
-		${iconForType(ctx)}<slot></slot>
-	</div>`;
-	return html`${when((x) => !shouldAnnounce(x.type), message)}
-		<span class="announcement" role="status" aria-live="polite">
-			${when((x) => shouldAnnounce(x.type), message)}
-		</span>`;
-};
-var feedbackMessageDefinition = defineVividComponent("feedback-message", FeedbackMessage, FeedbackMessageTemplate, [iconDefinition, visuallyHiddenDefinition], { styles: feedback_message_default });
-//#endregion
+import { attr, html, observable, slotted } from "@microsoft/fast-element";
 //#region src/shared/feedback/mixins.ts
 /** Mixin for elements that display a feedback message. */
 var WithFeedback = (Base) => {
@@ -152,4 +109,4 @@ var WithLightDOMFeedback = (Base) => {
 	return ElementWithLightDOMFeedback;
 };
 //#endregion
-export { WithLightDOMFeedback as n, feedbackMessageDefinition as r, WithFeedback as t };
+export { WithLightDOMFeedback as n, WithFeedback as t };

package/unbundled/numberConverter.cjs

@@ -10,9 +10,12 @@ var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
             </animateTransform>
         </g>
     </g>
-</svg>`, e = {
+</svg>`;
+//#endregion
+//#region ../icons/dist/index.mjs
+var e = {
 	name: "@vonage/vivid-icons",
-	version: "4.11.0",
+	version: "4.12.0",
 	type: "module",
 	exports: {
 		".": {
@@ -45,7 +48,9 @@ var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
 		vite: "catalog:",
 		"vite-plugin-dts": "catalog:"
 	}
-}, t = "https://icon.resources.vonage.com", n = e.version;
+};
+var t = "https://icon.resources.vonage.com";
+var n = e.version;
 `${t}${n}`;
 //#endregion
 //#region src/shared/icon/utils.ts

package/unbundled/numberConverter.js

@@ -10,9 +10,12 @@ var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
             </animateTransform>
         </g>
     </g>
-</svg>`, e = {
+</svg>`;
+//#endregion
+//#region ../icons/dist/index.mjs
+var e = {
 	name: "@vonage/vivid-icons",
-	version: "4.11.0",
+	version: "4.12.0",
 	type: "module",
 	exports: {
 		".": {
@@ -45,7 +48,9 @@ var PLACEHOLDER_ICON = `<svg width="80%" height="80%" viewBox="0 0 64 64">
 		vite: "catalog:",
 		"vite-plugin-dts": "catalog:"
 	}
-}, t = "https://icon.resources.vonage.com", n = e.version;
+};
+var t = "https://icon.resources.vonage.com";
+var n = e.version;
 `${t}${n}`;
 //#endregion
 //#region src/shared/icon/utils.ts

package/unbundled/optgroup.cjs

@@ -0,0 +1,65 @@
+const require_vivid_element = require("./vivid-element.cjs");
+const require_decorate = require("./decorate.cjs");
+const require_host_semantics = require("./host-semantics.cjs");
+let _microsoft_fast_element = require("@microsoft/fast-element");
+let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
+//#region src/lib/optgroup/optgroup.ts
+/**
+* Determines if the element is an {@link Optgroup}
+*
+* @param element - the element to test.
+*/
+function isOptgroup(el) {
+	return el instanceof Optgroup;
+}
+/**
+* Groups options within Select, Searchable Select, or Combobox components
+*
+* @public
+* @component optgroup
+* @slot - Use the default slot to add Option elements to the group.
+* @slot label - Use the label slot to provide a label for the Optgroup.
+*/
+var Optgroup = class extends require_host_semantics.HostSemantics(require_vivid_element.VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this._computedLabelledBy = null;
+	}
+	/** @internal */
+	_labelSlottedContentChanged() {
+		const elements = this._labelSlottedContent.filter((node) => node instanceof Element);
+		const ids = [];
+		for (const el of elements) {
+			if (!el.id) el.id = (0, _microsoft_fast_web_utilities.uniqueId)("vvd-optgroup-label-");
+			ids.push(el.id);
+		}
+		this._computedLabelledBy = ids.join(" ");
+	}
+	/**
+	* Handles changes to the default slot.
+	* Dispatches a bubbling, composed event so that parent components
+	* (Select, Combobox, Searchable Select) can re-process their options.
+	* @internal
+	*/
+	_onSlotChange() {
+		this.$emit("optgroup-change", void 0, {
+			bubbles: true,
+			composed: true
+		});
+	}
+};
+require_decorate.__decorate([_microsoft_fast_element.observable], Optgroup.prototype, "_labelSlottedContent", void 0);
+require_decorate.__decorate([_microsoft_fast_element.observable], Optgroup.prototype, "_computedLabelledBy", void 0);
+//#endregion
+Object.defineProperty(exports, "Optgroup", {
+	enumerable: true,
+	get: function() {
+		return Optgroup;
+	}
+});
+Object.defineProperty(exports, "isOptgroup", {
+	enumerable: true,
+	get: function() {
+		return isOptgroup;
+	}
+});

package/unbundled/optgroup.js

@@ -0,0 +1,54 @@
+import { t as VividElement } from "./vivid-element.js";
+import { t as __decorate } from "./decorate.js";
+import { t as HostSemantics } from "./host-semantics.js";
+import { observable } from "@microsoft/fast-element";
+import { uniqueId } from "@microsoft/fast-web-utilities";
+//#region src/lib/optgroup/optgroup.ts
+/**
+* Determines if the element is an {@link Optgroup}
+*
+* @param element - the element to test.
+*/
+function isOptgroup(el) {
+	return el instanceof Optgroup;
+}
+/**
+* Groups options within Select, Searchable Select, or Combobox components
+*
+* @public
+* @component optgroup
+* @slot - Use the default slot to add Option elements to the group.
+* @slot label - Use the label slot to provide a label for the Optgroup.
+*/
+var Optgroup = class extends HostSemantics(VividElement) {
+	constructor(..._args) {
+		super(..._args);
+		this._computedLabelledBy = null;
+	}
+	/** @internal */
+	_labelSlottedContentChanged() {
+		const elements = this._labelSlottedContent.filter((node) => node instanceof Element);
+		const ids = [];
+		for (const el of elements) {
+			if (!el.id) el.id = uniqueId("vvd-optgroup-label-");
+			ids.push(el.id);
+		}
+		this._computedLabelledBy = ids.join(" ");
+	}
+	/**
+	* Handles changes to the default slot.
+	* Dispatches a bubbling, composed event so that parent components
+	* (Select, Combobox, Searchable Select) can re-process their options.
+	* @internal
+	*/
+	_onSlotChange() {
+		this.$emit("optgroup-change", void 0, {
+			bubbles: true,
+			composed: true
+		});
+	}
+};
+__decorate([observable], Optgroup.prototype, "_labelSlottedContent", void 0);
+__decorate([observable], Optgroup.prototype, "_computedLabelledBy", void 0);
+//#endregion
+export { isOptgroup as n, Optgroup as t };