@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/unbundled/definition32.cjs

@@ -1,287 +1,76 @@
 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_delegates_aria = require("./delegates-aria.cjs");
-const require_localized = require("./localized.cjs");
-const require_definition = require("./definition10.cjs");
-const require_definition$1 = require("./definition16.cjs");
-const require_definition$2 = require("./definition31.cjs");
 const require_utils = require("./utils.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
-//#region src/lib/country-group/country-group.scss?inline
-var country_group_default = ":host{flex-direction:column;block-size:100%;inline-size:100%;display:flex;overflow:hidden}.container{flex-wrap:wrap;flex:auto;align-content:flex-start;align-items:center;gap:8px;min-block-size:0;display:flex;position:relative}.container slot{display:contents}.overflow-wrap{align-self:center;line-height:0}.overflow-grid{font:var(--vvd-typography-base);grid-template-columns:repeat(3,auto);gap:8px;padding:8px;display:grid}";
+//#region src/lib/country/country.scss?inline
+var country_default = ":host{display:inline-flex}.base{align-items:center;column-gap:8px;display:inline-flex}.icon{align-items:center;display:inline-flex}.icon [data-vvd-component=icon]{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));flex-shrink:0;inline-size:auto}.icon ::slotted(*){block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));object-fit:contain;border-radius:2px;inline-size:auto;display:block}.text{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
 //#endregion
-//#region src/lib/country-group/country-group.ts
-var FULLY_VISIBLE_INTERSECTION_RATIO = .99;
+//#region src/lib/country/country.ts
 /**
 * @public
-* @component country-group
-* @slot default - One or more `vwc-country` elements (Country only).
+* @component country
+* @slot icon - Optional custom flag or graphic. When `code` is set and no content is slotted, a default flag icon (Vivid/Vonage icon set) is shown.
 */
-var CountryGroup = class extends require_localized.Localized(require_delegates_aria.DelegatesAria(require_vivid_element.VividElement)) {
-	constructor(..._args) {
-		super(..._args);
-		this.items = [];
-		this.lastVisibleIndex = 0;
-		this.computedAriaLabel = null;
-		this.popupOpen = false;
-		this.#observer = null;
-		this.#visibleMap = /* @__PURE__ */ new Map();
-		this.#candidateVisible = -1;
-		this.#candidateStreak = 0;
-		this.#onSlotChange = () => {
-			this.#syncFromSlot();
-			this.#updateAriaLabel();
-			this.#requestFit();
-		};
-		this.#handleIntersection = (entries) => {
-			for (const entry of entries) this.#visibleMap.set(entry.target, (entry.intersectionRatio ?? 0) >= FULLY_VISIBLE_INTERSECTION_RATIO);
-			this.#requestFit();
-			let firstHidden = -1;
-			for (let i = 0; i < this.items.length; i++) if (!(this.#visibleMap.get(this.items[i]) ?? true)) {
-				firstHidden = i;
-				break;
-			}
-			let nextVisible = firstHidden === -1 ? this.items.length : firstHidden;
-			if (firstHidden === this.items.length - 1 && this.badgeEl && (this.#visibleMap.get(this.badgeEl) ?? false)) nextVisible = this.items.length;
-			if (nextVisible < this.items.length && this.badgeEl && this.#visibleMap.has(this.badgeEl) && this.#visibleMap.get(this.badgeEl) === false) nextVisible = Math.max(1, nextVisible - 1);
-			this.#proposeVisibleCount(nextVisible);
-		};
-	}
-	get overflowCount() {
-		return Math.max(0, this.items.length - this.lastVisibleIndex);
-	}
-	#observer;
-	#visibleMap;
-	#candidateVisible;
-	#candidateStreak;
-	#countryNameForCode(code) {
-		if (!code) return "";
-		return require_utils.countries.find((c) => c.code.toUpperCase() === code.toUpperCase())?.label ?? "";
-	}
-	#applyLayout(visibleCount, mode) {
-		for (let i = 0; i < this.items.length; i++) {
-			const el = this.items[i];
-			el.style.order = `${i < visibleCount ? i : i + 1}`;
-			if (i < visibleCount) {
-				el.setAttribute("data-visible", "true");
-				el.style.display = "";
-				el.style.position = "";
-				el.style.inset = "";
-				el.style.visibility = "";
-				el.style.pointerEvents = "";
-				continue;
-			}
-			el.setAttribute("data-visible", "false");
-			el.style.display = "";
-			el.style.pointerEvents = "none";
-			if (mode === "final") {
-				el.style.position = "absolute";
-				el.style.inset = "0 auto auto 0";
-				el.style.visibility = "hidden";
-			} else {
-				el.style.position = "";
-				el.style.inset = "";
-				el.style.visibility = "hidden";
-			}
-		}
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.#syncFromSlot();
-		this.#updateAriaLabel();
-		this.slotEl?.addEventListener("slotchange", this.#onSlotChange);
-		this.#ensureObserver();
-		this.#requestFit();
-	}
-	disconnectedCallback() {
-		this.slotEl?.removeEventListener("slotchange", this.#onSlotChange);
-		this.#observer?.disconnect();
-		this.#observer = null;
-		this.#visibleMap.clear();
-		this.#candidateVisible = -1;
-		this.#candidateStreak = 0;
-		super.disconnectedCallback();
-	}
-	#onSlotChange;
-	#ensureObserver() {
-		if (this.#observer) return;
-		this.#observer = new IntersectionObserver(this.#handleIntersection, {
-			root: this,
-			threshold: [FULLY_VISIBLE_INTERSECTION_RATIO]
-		});
-	}
-	#requestFit() {
-		this.#prepareForFit();
-		this.#observeAll();
-	}
-	#observeAll() {
-		const observer = this.#observer;
-		observer.disconnect();
-		for (const el of this.items) observer.observe(el);
-		if (this.badgeEl && this.overflowCount > 0) observer.observe(this.badgeEl);
-	}
-	#syncFromSlot() {
-		const assigned = this.slotEl.assignedElements({ flatten: true });
-		this.items = assigned.filter((n) => n instanceof require_definition$2.Country);
-		this.#visibleMap.clear();
-		for (const el of this.items) this.#visibleMap.set(el, true);
-		this.lastVisibleIndex = this.items.length;
-		this.#applyLayout(this.lastVisibleIndex, "final");
-	}
-	#updateAriaLabel() {
-		const prefix = this.locale.countryGroup.ariaLabelPrefix;
-		const names = [];
-		for (const el of this.items) {
-			const label = (el.getAttribute("label") ?? "").trim();
-			const code = (el.getAttribute("code") ?? "").trim();
-			const fullName = this.#countryNameForCode(code);
-			const value = label || fullName || code;
-			if (value) names.push(value);
-		}
-		const joined = names.join(", ");
-		this.computedAriaLabel = joined ? `${prefix} ${joined}` : prefix;
-	}
-	#handleIntersection;
-	#proposeVisibleCount(nextVisible) {
-		if (this.#candidateVisible === nextVisible) this.#candidateStreak++;
-		else {
-			this.#candidateVisible = nextVisible;
-			this.#candidateStreak = 1;
-		}
-		if (this.#candidateStreak < 2) return;
-		if (this.lastVisibleIndex === nextVisible) return;
-		this.lastVisibleIndex = this.#candidateVisible;
-		this.#applyLayout(this.lastVisibleIndex, "final");
-		if (this.overflowCount === 0) this.popupOpen = false;
-		this.fillOverflowGrid();
-	}
-	#prepareForFit() {
-		this.#applyLayout(this.lastVisibleIndex, "fit");
-	}
-	/**
-	* @internal
-	*/
-	handleMouseEnter() {
-		this.popupOpen = true;
-	}
-	/**
-	* @internal
-	*/
-	handleMouseLeave() {
-		this.popupOpen = false;
-	}
-	/**
-	* @internal
-	*/
-	popupOpenChanged(oldValue) {
-		if (oldValue === void 0) return;
-		if (this.popupOpen) this.fillOverflowGrid();
-	}
-	/**
-	* @internal
-	*/
-	fillOverflowGrid() {
-		if (!this.overflowGridEl) return;
-		if (this.overflowCount === 0) return;
-		this.overflowGridEl.replaceChildren();
-		const overflowed = this.items.slice(this.lastVisibleIndex);
-		for (const it of overflowed) {
-			const clone = it.cloneNode(true);
-			clone.setAttribute("aria-hidden", "true");
-			clone.removeAttribute("style");
-			this.overflowGridEl.appendChild(clone);
-		}
+var Country = class extends require_vivid_element.VividElement {
+	/** @internal */
+	get flagIconName() {
+		return require_utils.getFlagIconName(this.code);
+	}
+	/** @internal */
+	get displayText() {
+		const customLabel = this.label?.trim();
+		if (customLabel) return customLabel;
+		const codeValue = this.code?.trim();
+		return codeValue ? codeValue.toUpperCase() : void 0;
 	}
 };
-require_decorate.__decorate([_microsoft_fast_element.observable], CountryGroup.prototype, "items", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], CountryGroup.prototype, "lastVisibleIndex", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], CountryGroup.prototype, "computedAriaLabel", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], CountryGroup.prototype, "popupOpen", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Country.prototype, "code", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], Country.prototype, "label", void 0);
 //#endregion
-//#region src/lib/country-group/country-group.template.ts
-var CountryGroupTemplate = (context) => {
-	const badgeTag = context.tagFor(require_definition$1.Badge);
-	const popupTag = context.tagFor(require_definition.Popup);
+//#region src/lib/country/country.template.ts
+var CountryTemplate = (context) => {
+	const iconTag = context.tagFor(require_definition.Icon);
 	return _microsoft_fast_element.html`
-		<div
-			class="container"
-			${require_delegates_aria.delegateAria({
-		role: "group",
-		ariaLabel: (x) => x.ariaLabel || x.computedAriaLabel
-	})}
-		>
-			<slot ${(0, _microsoft_fast_element.ref)("slotEl")}></slot>
-			${(0, _microsoft_fast_element.when)((x) => x.overflowCount > 0, _microsoft_fast_element.html`
-					<div
-						class="overflow-wrap"
-						${(0, _microsoft_fast_element.ref)("overflowWrapEl")}
-						style="order: ${(x) => x.lastVisibleIndex};"
-						@mouseenter="${(x) => x.handleMouseEnter()}"
-						@mouseleave="${(x) => x.handleMouseLeave()}"
-					>
-						<${badgeTag}
-							${(0, _microsoft_fast_element.ref)("badgeEl")}
-							connotation="cta"
-							appearance="duotone"
-							shape="pill"
-							text="${(x) => `+${x.overflowCount}`}"
-						></${badgeTag}>
-					</div>
-				`)}
-		</div>
-
-		${(0, _microsoft_fast_element.when)((x) => x.overflowCount > 0, _microsoft_fast_element.html`
-				<${popupTag}
-					strategy="fixed"
-					placement="top"
-					alternate
-					arrow
-					:anchor="${(x) => x.overflowWrapEl}"
-					:open="${(x) => x.popupOpen}"
-					exportparts="vvd-theme-alternate"
-				>
-					<div
-						class="overflow-grid"
-						${(0, _microsoft_fast_element.ref)("overflowGridEl")}
+		<div class="base">
+			<slot name="icon" class="icon">
+				${(0, _microsoft_fast_element.when)((x) => x.flagIconName, _microsoft_fast_element.html`<${iconTag}
+						size="-4"
+						name="${(x) => x.flagIconName}"
 						aria-hidden="true"
-					></div>
-				</${popupTag}>
-			`)}
+					></${iconTag}>`)}
+			</slot>
+			${(0, _microsoft_fast_element.when)((x) => x.displayText, _microsoft_fast_element.html`<span class="text">${(x) => x.displayText}</span>`)}
+		</div>
 	`;
 };
 //#endregion
-//#region src/lib/country-group/definition.ts
-/**
-* @internal
-*/
-var countryGroupDefinition = require_vivid_element.defineVividComponent("country-group", CountryGroup, CountryGroupTemplate, [
-	require_definition$2.countryDefinition,
-	require_definition$1.badgeDefinition,
-	require_definition.popupDefinition
-], { styles: country_group_default });
+//#region src/lib/country/definition.ts
+/** @internal */
+var countryDefinition = require_vivid_element.defineVividComponent("country", Country, CountryTemplate, [require_definition.iconDefinition], { styles: country_default });
 /**
-* Registers the country-group element with the design system.
+* Registers the country element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerCountryGroup = require_vivid_element.createRegisterFunction(countryGroupDefinition);
+var registerCountry = require_vivid_element.createRegisterFunction(countryDefinition);
 //#endregion
-Object.defineProperty(exports, "CountryGroup", {
+Object.defineProperty(exports, "Country", {
 	enumerable: true,
 	get: function() {
-		return CountryGroup;
+		return Country;
 	}
 });
-Object.defineProperty(exports, "countryGroupDefinition", {
+Object.defineProperty(exports, "countryDefinition", {
 	enumerable: true,
 	get: function() {
-		return countryGroupDefinition;
+		return countryDefinition;
 	}
 });
-Object.defineProperty(exports, "registerCountryGroup", {
+Object.defineProperty(exports, "registerCountry", {
 	enumerable: true,
 	get: function() {
-		return registerCountryGroup;
+		return registerCountry;
 	}
 });

package/unbundled/definition32.js

@@ -1,269 +1,58 @@
 import { d as createRegisterFunction, 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 { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
-import { t as Localized } from "./localized.js";
-import { i as Popup, t as popupDefinition } from "./definition10.js";
-import { r as Badge, t as badgeDefinition } from "./definition16.js";
-import { r as Country, t as countryDefinition } from "./definition31.js";
-import { n as countries } from "./utils.js";
-import { html, observable, ref, when } from "@microsoft/fast-element";
-//#region src/lib/country-group/country-group.scss?inline
-var country_group_default = ":host{flex-direction:column;block-size:100%;inline-size:100%;display:flex;overflow:hidden}.container{flex-wrap:wrap;flex:auto;align-content:flex-start;align-items:center;gap:8px;min-block-size:0;display:flex;position:relative}.container slot{display:contents}.overflow-wrap{align-self:center;line-height:0}.overflow-grid{font:var(--vvd-typography-base);grid-template-columns:repeat(3,auto);gap:8px;padding:8px;display:grid}";
+import { t as getFlagIconName } from "./utils.js";
+import { attr, html, when } from "@microsoft/fast-element";
+//#region src/lib/country/country.scss?inline
+var country_default = ":host{display:inline-flex}.base{align-items:center;column-gap:8px;display:inline-flex}.icon{align-items:center;display:inline-flex}.icon [data-vvd-component=icon]{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));flex-shrink:0;inline-size:auto}.icon ::slotted(*){block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));object-fit:contain;border-radius:2px;inline-size:auto;display:block}.text{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
 //#endregion
-//#region src/lib/country-group/country-group.ts
-var FULLY_VISIBLE_INTERSECTION_RATIO = .99;
+//#region src/lib/country/country.ts
 /**
 * @public
-* @component country-group
-* @slot default - One or more `vwc-country` elements (Country only).
+* @component country
+* @slot icon - Optional custom flag or graphic. When `code` is set and no content is slotted, a default flag icon (Vivid/Vonage icon set) is shown.
 */
-var CountryGroup = class extends Localized(DelegatesAria(VividElement)) {
-	constructor(..._args) {
-		super(..._args);
-		this.items = [];
-		this.lastVisibleIndex = 0;
-		this.computedAriaLabel = null;
-		this.popupOpen = false;
-		this.#observer = null;
-		this.#visibleMap = /* @__PURE__ */ new Map();
-		this.#candidateVisible = -1;
-		this.#candidateStreak = 0;
-		this.#onSlotChange = () => {
-			this.#syncFromSlot();
-			this.#updateAriaLabel();
-			this.#requestFit();
-		};
-		this.#handleIntersection = (entries) => {
-			for (const entry of entries) this.#visibleMap.set(entry.target, (entry.intersectionRatio ?? 0) >= FULLY_VISIBLE_INTERSECTION_RATIO);
-			this.#requestFit();
-			let firstHidden = -1;
-			for (let i = 0; i < this.items.length; i++) if (!(this.#visibleMap.get(this.items[i]) ?? true)) {
-				firstHidden = i;
-				break;
-			}
-			let nextVisible = firstHidden === -1 ? this.items.length : firstHidden;
-			if (firstHidden === this.items.length - 1 && this.badgeEl && (this.#visibleMap.get(this.badgeEl) ?? false)) nextVisible = this.items.length;
-			if (nextVisible < this.items.length && this.badgeEl && this.#visibleMap.has(this.badgeEl) && this.#visibleMap.get(this.badgeEl) === false) nextVisible = Math.max(1, nextVisible - 1);
-			this.#proposeVisibleCount(nextVisible);
-		};
-	}
-	get overflowCount() {
-		return Math.max(0, this.items.length - this.lastVisibleIndex);
-	}
-	#observer;
-	#visibleMap;
-	#candidateVisible;
-	#candidateStreak;
-	#countryNameForCode(code) {
-		if (!code) return "";
-		return countries.find((c) => c.code.toUpperCase() === code.toUpperCase())?.label ?? "";
-	}
-	#applyLayout(visibleCount, mode) {
-		for (let i = 0; i < this.items.length; i++) {
-			const el = this.items[i];
-			el.style.order = `${i < visibleCount ? i : i + 1}`;
-			if (i < visibleCount) {
-				el.setAttribute("data-visible", "true");
-				el.style.display = "";
-				el.style.position = "";
-				el.style.inset = "";
-				el.style.visibility = "";
-				el.style.pointerEvents = "";
-				continue;
-			}
-			el.setAttribute("data-visible", "false");
-			el.style.display = "";
-			el.style.pointerEvents = "none";
-			if (mode === "final") {
-				el.style.position = "absolute";
-				el.style.inset = "0 auto auto 0";
-				el.style.visibility = "hidden";
-			} else {
-				el.style.position = "";
-				el.style.inset = "";
-				el.style.visibility = "hidden";
-			}
-		}
-	}
-	connectedCallback() {
-		super.connectedCallback();
-		this.#syncFromSlot();
-		this.#updateAriaLabel();
-		this.slotEl?.addEventListener("slotchange", this.#onSlotChange);
-		this.#ensureObserver();
-		this.#requestFit();
-	}
-	disconnectedCallback() {
-		this.slotEl?.removeEventListener("slotchange", this.#onSlotChange);
-		this.#observer?.disconnect();
-		this.#observer = null;
-		this.#visibleMap.clear();
-		this.#candidateVisible = -1;
-		this.#candidateStreak = 0;
-		super.disconnectedCallback();
-	}
-	#onSlotChange;
-	#ensureObserver() {
-		if (this.#observer) return;
-		this.#observer = new IntersectionObserver(this.#handleIntersection, {
-			root: this,
-			threshold: [FULLY_VISIBLE_INTERSECTION_RATIO]
-		});
-	}
-	#requestFit() {
-		this.#prepareForFit();
-		this.#observeAll();
-	}
-	#observeAll() {
-		const observer = this.#observer;
-		observer.disconnect();
-		for (const el of this.items) observer.observe(el);
-		if (this.badgeEl && this.overflowCount > 0) observer.observe(this.badgeEl);
-	}
-	#syncFromSlot() {
-		const assigned = this.slotEl.assignedElements({ flatten: true });
-		this.items = assigned.filter((n) => n instanceof Country);
-		this.#visibleMap.clear();
-		for (const el of this.items) this.#visibleMap.set(el, true);
-		this.lastVisibleIndex = this.items.length;
-		this.#applyLayout(this.lastVisibleIndex, "final");
-	}
-	#updateAriaLabel() {
-		const prefix = this.locale.countryGroup.ariaLabelPrefix;
-		const names = [];
-		for (const el of this.items) {
-			const label = (el.getAttribute("label") ?? "").trim();
-			const code = (el.getAttribute("code") ?? "").trim();
-			const fullName = this.#countryNameForCode(code);
-			const value = label || fullName || code;
-			if (value) names.push(value);
-		}
-		const joined = names.join(", ");
-		this.computedAriaLabel = joined ? `${prefix} ${joined}` : prefix;
-	}
-	#handleIntersection;
-	#proposeVisibleCount(nextVisible) {
-		if (this.#candidateVisible === nextVisible) this.#candidateStreak++;
-		else {
-			this.#candidateVisible = nextVisible;
-			this.#candidateStreak = 1;
-		}
-		if (this.#candidateStreak < 2) return;
-		if (this.lastVisibleIndex === nextVisible) return;
-		this.lastVisibleIndex = this.#candidateVisible;
-		this.#applyLayout(this.lastVisibleIndex, "final");
-		if (this.overflowCount === 0) this.popupOpen = false;
-		this.fillOverflowGrid();
-	}
-	#prepareForFit() {
-		this.#applyLayout(this.lastVisibleIndex, "fit");
-	}
-	/**
-	* @internal
-	*/
-	handleMouseEnter() {
-		this.popupOpen = true;
-	}
-	/**
-	* @internal
-	*/
-	handleMouseLeave() {
-		this.popupOpen = false;
-	}
-	/**
-	* @internal
-	*/
-	popupOpenChanged(oldValue) {
-		if (oldValue === void 0) return;
-		if (this.popupOpen) this.fillOverflowGrid();
-	}
-	/**
-	* @internal
-	*/
-	fillOverflowGrid() {
-		if (!this.overflowGridEl) return;
-		if (this.overflowCount === 0) return;
-		this.overflowGridEl.replaceChildren();
-		const overflowed = this.items.slice(this.lastVisibleIndex);
-		for (const it of overflowed) {
-			const clone = it.cloneNode(true);
-			clone.setAttribute("aria-hidden", "true");
-			clone.removeAttribute("style");
-			this.overflowGridEl.appendChild(clone);
-		}
+var Country = class extends VividElement {
+	/** @internal */
+	get flagIconName() {
+		return getFlagIconName(this.code);
+	}
+	/** @internal */
+	get displayText() {
+		const customLabel = this.label?.trim();
+		if (customLabel) return customLabel;
+		const codeValue = this.code?.trim();
+		return codeValue ? codeValue.toUpperCase() : void 0;
 	}
 };
-__decorate([observable], CountryGroup.prototype, "items", void 0);
-__decorate([observable], CountryGroup.prototype, "lastVisibleIndex", void 0);
-__decorate([observable], CountryGroup.prototype, "computedAriaLabel", void 0);
-__decorate([observable], CountryGroup.prototype, "popupOpen", void 0);
+__decorate([attr], Country.prototype, "code", void 0);
+__decorate([attr], Country.prototype, "label", void 0);
 //#endregion
-//#region src/lib/country-group/country-group.template.ts
-var CountryGroupTemplate = (context) => {
-	const badgeTag = context.tagFor(Badge);
-	const popupTag = context.tagFor(Popup);
+//#region src/lib/country/country.template.ts
+var CountryTemplate = (context) => {
+	const iconTag = context.tagFor(Icon);
 	return html`
-		<div
-			class="container"
-			${delegateAria({
-		role: "group",
-		ariaLabel: (x) => x.ariaLabel || x.computedAriaLabel
-	})}
-		>
-			<slot ${ref("slotEl")}></slot>
-			${when((x) => x.overflowCount > 0, html`
-					<div
-						class="overflow-wrap"
-						${ref("overflowWrapEl")}
-						style="order: ${(x) => x.lastVisibleIndex};"
-						@mouseenter="${(x) => x.handleMouseEnter()}"
-						@mouseleave="${(x) => x.handleMouseLeave()}"
-					>
-						<${badgeTag}
-							${ref("badgeEl")}
-							connotation="cta"
-							appearance="duotone"
-							shape="pill"
-							text="${(x) => `+${x.overflowCount}`}"
-						></${badgeTag}>
-					</div>
-				`)}
-		</div>
-
-		${when((x) => x.overflowCount > 0, html`
-				<${popupTag}
-					strategy="fixed"
-					placement="top"
-					alternate
-					arrow
-					:anchor="${(x) => x.overflowWrapEl}"
-					:open="${(x) => x.popupOpen}"
-					exportparts="vvd-theme-alternate"
-				>
-					<div
-						class="overflow-grid"
-						${ref("overflowGridEl")}
+		<div class="base">
+			<slot name="icon" class="icon">
+				${when((x) => x.flagIconName, html`<${iconTag}
+						size="-4"
+						name="${(x) => x.flagIconName}"
 						aria-hidden="true"
-					></div>
-				</${popupTag}>
-			`)}
+					></${iconTag}>`)}
+			</slot>
+			${when((x) => x.displayText, html`<span class="text">${(x) => x.displayText}</span>`)}
+		</div>
 	`;
 };
 //#endregion
-//#region src/lib/country-group/definition.ts
-/**
-* @internal
-*/
-var countryGroupDefinition = defineVividComponent("country-group", CountryGroup, CountryGroupTemplate, [
-	countryDefinition,
-	badgeDefinition,
-	popupDefinition
-], { styles: country_group_default });
+//#region src/lib/country/definition.ts
+/** @internal */
+var countryDefinition = defineVividComponent("country", Country, CountryTemplate, [iconDefinition], { styles: country_default });
 /**
-* Registers the country-group element with the design system.
+* Registers the country element with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerCountryGroup = createRegisterFunction(countryGroupDefinition);
+var registerCountry = createRegisterFunction(countryDefinition);
 //#endregion
-export { registerCountryGroup as n, CountryGroup as r, countryGroupDefinition as t };
+export { registerCountry as n, Country as r, countryDefinition as t };