@vonage/vivid 5.8.0 → 5.10.0

package/combobox/index.js

@@ -1,44 +1,44 @@
 import { i as y } from "../bundled/definition2.js";
-import { P as k, p as $ } from "../bundled/definition9.js";
-import { l as I } from "../bundled/definition12.js";
+import { P as k, p as I } from "../bundled/definition9.js";
+import { l as $ } from "../bundled/definition12.js";
 import { s as C } from "../bundled/text-field.js";
-import { U as O, O as S, a as l, o as v, h as u, c as A, d as V } from "../bundled/vivid-element.js";
-import { W as H, f as D } from "../bundled/mixins.js";
+import { O as S, a as l, o as v, h as u, c as O, d as A } from "../bundled/vivid-element.js";
+import { W as V, f as H } from "../bundled/mixins.js";
 import { L as b } from "../bundled/listbox.js";
-import { F as T } from "../bundled/form-associated.js";
-import { W as F } from "../bundled/with-contextual-help.js";
-import { W as B } from "../bundled/with-error-text.js";
-import { W as L } from "../bundled/with-success-text.js";
-import { F as E } from "../bundled/form-element.js";
-import { b as W, a as R, I as P } from "../bundled/affix.js";
-import { u as z } from "../bundled/strings.js";
-import { l as q } from "../bundled/numbers.js";
-import { h as K } from "../bundled/index.js";
-import { c as M } from "../bundled/definition3.js";
+import { F as D } from "../bundled/form-associated.js";
+import { W as T } from "../bundled/with-contextual-help.js";
+import { W as F } from "../bundled/with-error-text.js";
+import { W as B } from "../bundled/with-success-text.js";
+import { F as L } from "../bundled/form-element.js";
+import { b as E, a as W, I as R } from "../bundled/affix.js";
+import { u as P } from "../bundled/strings.js";
+import { l as z } from "../bundled/numbers.js";
+import { h as q } from "../bundled/index.js";
+import { c as N } from "../bundled/definition3.js";
 import { r as d } from "../bundled/ref.js";
 import { s as h } from "../bundled/slotted.js";
-import { w as U } from "../bundled/when.js";
-import { c as N } from "../bundled/class-names.js";
+import { w as K } from "../bundled/when.js";
+import { c as M } from "../bundled/class-names.js";
 const j = '.label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}', p = {
   inline: "inline",
   list: "list",
   both: "both",
   none: "none"
 };
-var Y = Object.defineProperty, i = (a, t, e, o) => {
-  for (var r = void 0, n = a.length - 1, c; n >= 0; n--)
-    (c = a[n]) && (r = c(t, e, r) || r);
-  return r && Y(t, e, r), r;
+var U = Object.defineProperty, n = (a, t, e, o) => {
+  for (var r = void 0, s = a.length - 1, c; s >= 0; s--)
+    (c = a[s]) && (r = c(t, e, r) || r);
+  return r && U(t, e, r), r;
 };
-class s extends F(
-  H(
-    B(
-      L(E(W(T(b))))
+class i extends T(
+  V(
+    F(
+      B(L(E(D(b))))
     )
   )
 ) {
   constructor() {
-    super(...arguments), this.filteredOptions = [], this.filter = "", this.fixedDropdown = !1, this.listboxId = z("listbox-"), this.maxHeight = 0, this.open = !1, this.proxy = document.createElement("input");
+    super(...arguments), this.filteredOptions = [], this.filter = "", this.fixedDropdown = !1, this.listboxId = P("listbox-"), this.maxHeight = 0, this.open = !1, this.proxy = document.createElement("input");
   }
   /**
    * @internal
@@ -60,18 +60,10 @@ class s extends F(
     return this.autocomplete === p.both;
   }
   /**
-   * Sets focus when the open property changes.
-   *
-   * @param prev - the previous open value
-   * @param next - the current open value
-   *
    * @internal
    */
   openChanged() {
-    if (this.open) {
-      this.focusAndScrollOptionIntoView(), O.enqueue(() => this.control.focus());
-      return;
-    }
+    this.open && this.enqueueScrollSelectedOptionIntoViewIfNeeded();
   }
   /**
    * The list of options.
@@ -101,8 +93,8 @@ class s extends F(
     if (this.$fastController.isConnected && this.options) {
       const o = this.options.findIndex(
         (c) => c.text.toLowerCase() === e.toLowerCase()
-      ), r = this.options[this.selectedIndex]?.text, n = this.options[o]?.text;
-      this.selectedIndex = r !== n ? o : this.selectedIndex;
+      ), r = this.options[this.selectedIndex]?.text, s = this.options[o]?.text;
+      this.selectedIndex = r !== s ? o : this.selectedIndex;
     }
     super.valueChanged(t, e);
   }
@@ -157,14 +149,17 @@ class s extends F(
    * Overrides: `Listbox.focusAndScrollOptionIntoView`
    */
   focusAndScrollOptionIntoView() {
-    if (this.contains(document.activeElement)) {
-      this.control.focus();
-      const t = this.firstSelectedOption;
-      /* v8 ignore else -- @preserve */
-      t && requestAnimationFrame(() => {
-        t.scrollIntoView({ block: "nearest" });
-      });
-    }
+    this.contains(document.activeElement) && (this.control.focus(), this.enqueueScrollSelectedOptionIntoViewIfNeeded());
+  }
+  /**
+   * @internal
+   */
+  enqueueScrollSelectedOptionIntoViewIfNeeded() {
+    const t = this.firstSelectedOption;
+    /* v8 ignore else -- @preserve */
+    t && requestAnimationFrame(() => {
+      t.scrollIntoView({ block: "nearest" });
+    });
   }
   /**
    * Handle focus state when the element or its children lose focus.
@@ -249,7 +244,7 @@ class s extends F(
    */
   selectedIndexChanged(t, e) {
     if (this.$fastController.isConnected) {
-      if (e = q(-1, this.options.length - 1, e), e !== this.selectedIndex) {
+      if (e = z(-1, this.options.length - 1, e), e !== this.selectedIndex) {
         this.selectedIndex = e;
         return;
       }
@@ -347,43 +342,43 @@ class s extends F(
     this.control.setSelectionRange(t, t);
   }
 }
-i([
+n([
   l({ attribute: "autocomplete", mode: "fromView" })
-], s.prototype, "autocomplete");
-i([
+], i.prototype, "autocomplete");
+n([
   l
-], s.prototype, "appearance");
-i([
+], i.prototype, "appearance");
+n([
   l
-], s.prototype, "shape");
-i([
+], i.prototype, "shape");
+n([
   l()
-], s.prototype, "scale");
-i([
+], i.prototype, "scale");
+n([
   l
-], s.prototype, "placement");
-i([
+], i.prototype, "placement");
+n([
   l({ mode: "boolean", attribute: "fixed-dropdown" })
-], s.prototype, "fixedDropdown");
-i([
+], i.prototype, "fixedDropdown");
+n([
   v
-], s.prototype, "metaSlottedContent");
-i([
+], i.prototype, "metaSlottedContent");
+n([
   v
-], s.prototype, "maxHeight");
-i([
+], i.prototype, "maxHeight");
+n([
   l({ attribute: "open", mode: "boolean" })
-], s.prototype, "open");
-i([
+], i.prototype, "open");
+n([
   l
-], s.prototype, "placeholder");
-const G = ({
+], i.prototype, "placeholder");
+const Y = ({
   icon: a,
   iconSlottedContent: t,
   metaSlottedContent: e,
   errorValidationMessage: o,
   successText: r,
-  shape: n,
+  shape: s,
   scale: c,
   disabled: x,
   placeholder: m,
@@ -391,10 +386,10 @@ const G = ({
   appearance: f,
   open: g,
   _activeDescendant: w
-}) => N(
+}) => M(
   "base",
   ["disabled", x],
-  [`shape-${n}`, !!n],
+  [`shape-${s}`, !!s],
   [`size-${c}`, !!c],
   ["placeholder", !!m],
   [`appearance-${f}`, !!f],
@@ -405,31 +400,31 @@ const G = ({
   ["error", !!o],
   ["success", !!r]
 );
-function J() {
+function G() {
   return u` <label for="control" class="label">
 		${(a) => a.label}
 	</label>`;
 }
-function Q(a) {
+function J(a) {
   return a.open && a.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(
     a.getBoundingClientRect().width
   )}px` : null;
 }
-function X(a) {
-  const t = R(a), e = M(a);
-  return u` <div class="${G}" ${d("_anchor")}>
+function Q(a) {
+  const t = W(a), e = N(a);
+  return u` <div class="${Y}" ${d("_anchor")}>
 		<div
 			class="label-wrapper"
 			?hidden=${(o) => !o.label && !o._hasContextualHelp}
 		>
-			${U((o) => o.label, J())}
+			${K((o) => o.label, G())}
 			<slot
 				name="contextual-help"
 				${h("_contextualHelpSlottedContent")}
 			></slot>
 		</div>
 		<div class="fieldset">
-			${(o) => t(o.icon, P.Slot)}
+			${(o) => t(o.icon, R.Slot)}
 			<div class="wrapper">
 				<input
 					id="control"
@@ -461,19 +456,19 @@ function X(a) {
 		</div>
 	</div>`;
 }
-const Z = (a) => {
+const X = (a) => {
   const t = a.tagFor(k);
   return u`
 		<template
 			tabindex="${(e) => e.disabled ? null : "0"}"
 			@click="${(e, o) => e.clickHandler(o.event)}"
 			@focusout="${(e, o) => e.focusoutHandler(o.event)}"
-			@keydown="${(e, { event: o }) => (e.open && K(o), e.keydownHandler(o))}"
+			@keydown="${(e, { event: o }) => (e.open && q(o), e.keydownHandler(o))}"
 		>
 			<div class="control-wrapper">
-				${() => X(a)}
+				${() => Q(a)}
 				<${t} class="popup"
-					style="${Q}"
+					style="${J}"
 					?open="${(e) => e.open}"
 					placement="${(e) => e.placement ?? "bottom-start"}"
 					strategy="${(e) => e.fixedDropdown ? "fixed" : "absolute"}"
@@ -497,15 +492,15 @@ const Z = (a) => {
 			</div>
     </template>
 	`;
-}, ee = V(
+}, Z = A(
   "combobox",
-  s,
-  Z,
+  i,
+  X,
   [
     y,
-    $,
     I,
-    D
+    $,
+    H
   ],
   {
     styles: [C, j],
@@ -513,5 +508,5 @@ const Z = (a) => {
       delegatesFocus: !0
     }
   }
-), te = A(ee);
-te();
+), ee = O(Z);
+ee();

package/country/definition.cjs

@@ -0,0 +1,340 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vividElement = require('../unbundled/vivid-element.cjs');
+const icon_definition = require('../icon/definition.cjs');
+const fastElement = require('@microsoft/fast-element');
+
+const styles = ":host{display:inline-flex}.base{display:inline-flex;align-items:center;column-gap:8px}.icon{display:inline-flex;align-items:center}.icon vwc-icon{flex-shrink:0;block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:auto}.icon ::slotted(*){display:block;border-radius:2px;block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:auto;object-fit:contain}.text{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}";
+
+const countries = [
+  { code: "AF", countryCode: "+93", iconFlagName: "flag-afghanistan" },
+  { code: "AL", countryCode: "+355", iconFlagName: "flag-albania" },
+  { code: "DZ", countryCode: "+213", iconFlagName: "flag-algeria" },
+  { code: "AS", countryCode: "+1", iconFlagName: "" },
+  { code: "AD", countryCode: "+376", iconFlagName: "" },
+  { code: "AO", countryCode: "+244", iconFlagName: "" },
+  { code: "AI", countryCode: "+43", iconFlagName: "" },
+  { code: "AG", countryCode: "+1", iconFlagName: "" },
+  { code: "AR", countryCode: "+54", iconFlagName: "flag-argentina" },
+  { code: "AM", countryCode: "+374", iconFlagName: "flag-armenia" },
+  { code: "AW", countryCode: "+297", iconFlagName: "flag-aruba" },
+  { code: "AU", countryCode: "+61", iconFlagName: "flag-australia" },
+  { code: "AT", countryCode: "+43", iconFlagName: "flag-austria" },
+  { code: "AZ", countryCode: "+994", iconFlagName: "" },
+  { code: "BS", countryCode: "+1", iconFlagName: "flag-bahamas" },
+  { code: "BH", countryCode: "+973", iconFlagName: "flag-bahrain" },
+  { code: "BD", countryCode: "+880", iconFlagName: "flag-bangladesh" },
+  { code: "BB", countryCode: "+1", iconFlagName: "" },
+  { code: "BY", countryCode: "+375", iconFlagName: "flag-belarus" },
+  { code: "BE", countryCode: "+32", iconFlagName: "flag-belgium" },
+  { code: "BZ", countryCode: "+501", iconFlagName: "" },
+  { code: "BJ", countryCode: "+229", iconFlagName: "flag-benin" },
+  { code: "BM", countryCode: "+1", iconFlagName: "" },
+  { code: "BT", countryCode: "+975", iconFlagName: "" },
+  { code: "BO", countryCode: "+591", iconFlagName: "flag-bolivia" },
+  { code: "BA", countryCode: "+387", iconFlagName: "" },
+  { code: "BW", countryCode: "+267", iconFlagName: "flag-botswana" },
+  { code: "BR", countryCode: "+55", iconFlagName: "flag-brazil" },
+  { code: "IO", countryCode: "+246", iconFlagName: "" },
+  { code: "VG", countryCode: "+1", iconFlagName: "" },
+  { code: "VI", countryCode: "+1", iconFlagName: "" },
+  { code: "BN", countryCode: "+673", iconFlagName: "" },
+  { code: "BG", countryCode: "+359", iconFlagName: "flag-bulgaria" },
+  { code: "BF", countryCode: "+226", iconFlagName: "flag-burkina-faso" },
+  { code: "BI", countryCode: "+257", iconFlagName: "" },
+  { code: "KH", countryCode: "+855", iconFlagName: "flag-cambodia" },
+  { code: "CM", countryCode: "+237", iconFlagName: "" },
+  { code: "CA", countryCode: "+1", iconFlagName: "flag-canada" },
+  { code: "CV", countryCode: "+238", iconFlagName: "" },
+  { code: "KY", countryCode: "+1", iconFlagName: "flag-cayman-islands" },
+  {
+    code: "CF",
+    countryCode: "+236",
+    iconFlagName: "flag-central-african-republic"
+  },
+  {
+    code: "CF",
+    countryCode: "+236",
+    iconFlagName: "flag-central-african-republic"
+  },
+  { code: "CL", countryCode: "+56", iconFlagName: "flag-chile" },
+  { code: "CN", countryCode: "+86", iconFlagName: "flag-china" },
+  { code: "CO", countryCode: "+57", iconFlagName: "flag-colombia" },
+  { code: "KM", countryCode: "+269", iconFlagName: "" },
+  { code: "CG", countryCode: "+242", iconFlagName: "" },
+  { code: "CD", countryCode: "+243", iconFlagName: "" },
+  { code: "CK", countryCode: "+682", iconFlagName: "" },
+  { code: "CR", countryCode: "+506", iconFlagName: "flag-costa-rica" },
+  { code: "HR", countryCode: "+385", iconFlagName: "flag-croatia" },
+  { code: "CU", countryCode: "+53", iconFlagName: "" },
+  { code: "CU", countryCode: "+53", iconFlagName: "" },
+  { code: "CY", countryCode: "+357", iconFlagName: "flag-cyprus" },
+  { code: "CZ", countryCode: "+420", iconFlagName: "flag-czech-republic" },
+  { code: "DK", countryCode: "+45", iconFlagName: "flag-denmark" },
+  { code: "DJ", countryCode: "+253", iconFlagName: "" },
+  { code: "DM", countryCode: "+1", iconFlagName: "" },
+  { code: "DO", countryCode: "+1", iconFlagName: "flag-dominican-republic" },
+  { code: "EC", countryCode: "+593", iconFlagName: "" },
+  { code: "EG", countryCode: "+20", iconFlagName: "flag-egypt" },
+  { code: "SV", countryCode: "+503", iconFlagName: "flag-el-salvador" },
+  { code: "GQ", countryCode: "+240", iconFlagName: "" },
+  { code: "ER", countryCode: "+291", iconFlagName: "" },
+  { code: "EE", countryCode: "+372", iconFlagName: "flag-estonia" },
+  { code: "ET", countryCode: "+251", iconFlagName: "" },
+  { code: "FK", countryCode: "+500", iconFlagName: "" },
+  { code: "FO", countryCode: "+298", iconFlagName: "" },
+  { code: "FJ", countryCode: "+679", iconFlagName: "" },
+  { code: "FI", countryCode: "+358", iconFlagName: "flag-finland" },
+  { code: "FR", countryCode: "+33", iconFlagName: "flag-france" },
+  { code: "GF", countryCode: "+594", iconFlagName: "" },
+  { code: "PF", countryCode: "+689", iconFlagName: "" },
+  { code: "GA", countryCode: "+241", iconFlagName: "" },
+  { code: "GM", countryCode: "+220", iconFlagName: "" },
+  { code: "GE", countryCode: "+995", iconFlagName: "flag-georgia" },
+  { code: "DE", countryCode: "+49", iconFlagName: "flag-germany" },
+  { code: "GH", countryCode: "+233", iconFlagName: "flag-ghana" },
+  { code: "GI", countryCode: "+350", iconFlagName: "" },
+  { code: "GR", countryCode: "+30", iconFlagName: "flag-greece" },
+  { code: "GL", countryCode: "+299", iconFlagName: "" },
+  { code: "GD", countryCode: "+1", iconFlagName: "flag-grenada" },
+  { code: "GP", countryCode: "+590", iconFlagName: "" },
+  { code: "GU", countryCode: "+1", iconFlagName: "" },
+  { code: "GT", countryCode: "+502", iconFlagName: "flag-guatemala" },
+  { code: "GN", countryCode: "+224", iconFlagName: "" },
+  { code: "GW", countryCode: "+245", iconFlagName: "" },
+  { code: "GY", countryCode: "+592", iconFlagName: "" },
+  { code: "HT", countryCode: "+509", iconFlagName: "" },
+  { code: "VA", countryCode: "+39", iconFlagName: "" },
+  { code: "HN", countryCode: "+504", iconFlagName: "flag-honduras" },
+  { code: "HK", countryCode: "+852", iconFlagName: "flag-hong-kong" },
+  { code: "HU", countryCode: "+36", iconFlagName: "flag-hungary" },
+  { code: "IS", countryCode: "+354", iconFlagName: "flag-iceland" },
+  { code: "IN", countryCode: "+91", iconFlagName: "flag-india" },
+  { code: "ID", countryCode: "+62", iconFlagName: "flag-indonesia" },
+  { code: "CI", countryCode: "+225", iconFlagName: "" },
+  { code: "IR", countryCode: "+98", iconFlagName: "" },
+  { code: "IQ", countryCode: "+964", iconFlagName: "" },
+  { code: "IE", countryCode: "+353", iconFlagName: "flag-ireland" },
+  { code: "IL", countryCode: "+972", iconFlagName: "flag-israel" },
+  { code: "IT", countryCode: "+39", iconFlagName: "flag-italy" },
+  { code: "JM", countryCode: "+1", iconFlagName: "flag-jamaica" },
+  { code: "JP", countryCode: "+81", iconFlagName: "flag-japan" },
+  { code: "JO", countryCode: "+962", iconFlagName: "" },
+  { code: "KZ", countryCode: "+7", iconFlagName: "" },
+  { code: "KE", countryCode: "+254", iconFlagName: "" },
+  { code: "KI", countryCode: "+686", iconFlagName: "" },
+  { code: "KW", countryCode: "+965", iconFlagName: "" },
+  { code: "KG", countryCode: "+996", iconFlagName: "" },
+  { code: "LA", countryCode: "+856", iconFlagName: "" },
+  { code: "LV", countryCode: "+371", iconFlagName: "flag-latvia" },
+  { code: "LB", countryCode: "+961", iconFlagName: "" },
+  { code: "LS", countryCode: "+266", iconFlagName: "" },
+  { code: "LR", countryCode: "+231", iconFlagName: "" },
+  { code: "LY", countryCode: "+218", iconFlagName: "" },
+  { code: "LI", countryCode: "+423", iconFlagName: "flag-liechtenstein" },
+  { code: "LT", countryCode: "+370", iconFlagName: "flag-lithuania" },
+  { code: "LU", countryCode: "+352", iconFlagName: "flag-luxembourg" },
+  { code: "MO", countryCode: "+853", iconFlagName: "flag-macao" },
+  { code: "MK", countryCode: "+389", iconFlagName: "" },
+  { code: "MG", countryCode: "+261", iconFlagName: "" },
+  { code: "MW", countryCode: "+265", iconFlagName: "" },
+  { code: "MY", countryCode: "+60", iconFlagName: "flag-malaysia" },
+  { code: "MV", countryCode: "+960", iconFlagName: "" },
+  { code: "ML", countryCode: "+223", iconFlagName: "" },
+  { code: "MT", countryCode: "+356", iconFlagName: "flag-malta" },
+  { code: "MH", countryCode: "+692", iconFlagName: "" },
+  { code: "MQ", countryCode: "+596", iconFlagName: "" },
+  { code: "MR", countryCode: "+222", iconFlagName: "" },
+  { code: "MU", countryCode: "+230", iconFlagName: "flag-mauritius" },
+  { code: "YT", countryCode: "+262", iconFlagName: "" },
+  { code: "MX", countryCode: "+52", iconFlagName: "flag-mexico" },
+  { code: "FM", countryCode: "+691", iconFlagName: "" },
+  { code: "MD", countryCode: "+373", iconFlagName: "flag-moldova" },
+  { code: "MC", countryCode: "+377", iconFlagName: "" },
+  { code: "MN", countryCode: "+976", iconFlagName: "" },
+  { code: "ME", countryCode: "+382", iconFlagName: "" },
+  { code: "MS", countryCode: "+1", iconFlagName: "" },
+  { code: "MA", countryCode: "+212", iconFlagName: "" },
+  { code: "MZ", countryCode: "+258", iconFlagName: "" },
+  { code: "MM", countryCode: "+95", iconFlagName: "" },
+  { code: "NA", countryCode: "+264", iconFlagName: "" },
+  { code: "NR", countryCode: "+674", iconFlagName: "" },
+  { code: "NP", countryCode: "+977", iconFlagName: "" },
+  { code: "NL", countryCode: "+31", iconFlagName: "flag-netherlands" },
+  { code: "NC", countryCode: "+687", iconFlagName: "" },
+  { code: "NZ", countryCode: "+64", iconFlagName: "flag-new-zealand" },
+  { code: "NI", countryCode: "+505", iconFlagName: "" },
+  { code: "NE", countryCode: "+227", iconFlagName: "" },
+  { code: "NG", countryCode: "+234", iconFlagName: "flag-nigeria" },
+  { code: "NU", countryCode: "+683", iconFlagName: "" },
+  { code: "NF", countryCode: "+672", iconFlagName: "" },
+  { code: "KP", countryCode: "+850", iconFlagName: "" },
+  { code: "MP", countryCode: "+1", iconFlagName: "" },
+  { code: "NO", countryCode: "+47", iconFlagName: "flag-norway" },
+  { code: "OM", countryCode: "+968", iconFlagName: "" },
+  { code: "PK", countryCode: "+92", iconFlagName: "flag-pakistan" },
+  { code: "PW", countryCode: "+680", iconFlagName: "" },
+  { code: "PS", countryCode: "+970", iconFlagName: "" },
+  { code: "PA", countryCode: "+507", iconFlagName: "flag-panama" },
+  { code: "PG", countryCode: "+675", iconFlagName: "" },
+  { code: "PY", countryCode: "+595", iconFlagName: "" },
+  { code: "PE", countryCode: "+51", iconFlagName: "flag-peru" },
+  { code: "PH", countryCode: "+63", iconFlagName: "flag-philippines" },
+  { code: "PL", countryCode: "+48", iconFlagName: "flag-poland" },
+  { code: "PT", countryCode: "+351", iconFlagName: "flag-portugal" },
+  { code: "PR", countryCode: "+1", iconFlagName: "flag-puertorico" },
+  { code: "QA", countryCode: "+974", iconFlagName: "" },
+  { code: "XK", countryCode: "+381", iconFlagName: "" },
+  { code: "RE", countryCode: "+262", iconFlagName: "" },
+  { code: "RO", countryCode: "+40", iconFlagName: "flag-romania" },
+  { code: "RU", countryCode: "+7", iconFlagName: "flag-russia" },
+  { code: "RW", countryCode: "+250", iconFlagName: "flag-rwanda" },
+  { code: "BL", countryCode: "+590", iconFlagName: "" },
+  { code: "SH", countryCode: "+290", iconFlagName: "" },
+  { code: "KN", countryCode: "+1", iconFlagName: "" },
+  { code: "LC", countryCode: "+1", iconFlagName: "" },
+  { code: "MF", countryCode: "+590", iconFlagName: "" },
+  { code: "PM", countryCode: "+508", iconFlagName: "" },
+  { code: "VC", countryCode: "+1", iconFlagName: "" },
+  { code: "WS", countryCode: "+685", iconFlagName: "" },
+  { code: "SM", countryCode: "+378", iconFlagName: "" },
+  { code: "ST", countryCode: "+239", iconFlagName: "" },
+  { code: "SA", countryCode: "+966", iconFlagName: "flag-saudi-arabia" },
+  { code: "SN", countryCode: "+221", iconFlagName: "" },
+  { code: "RS", countryCode: "+381", iconFlagName: "flag-serbia" },
+  { code: "SC", countryCode: "+248", iconFlagName: "" },
+  { code: "SL", countryCode: "+232", iconFlagName: "" },
+  { code: "SG", countryCode: "+65", iconFlagName: "flag-singapore" },
+  { code: "SG", countryCode: "+65", iconFlagName: "flag-singapore" },
+  { code: "SK", countryCode: "+421", iconFlagName: "flag-slovakia" },
+  { code: "SI", countryCode: "+386", iconFlagName: "flag-slovenia" },
+  { code: "SB", countryCode: "+677", iconFlagName: "" },
+  { code: "SO", countryCode: "+252", iconFlagName: "" },
+  { code: "ZA", countryCode: "+27", iconFlagName: "flag-south-africa" },
+  { code: "KR", countryCode: "+82", iconFlagName: "flag-south-korea" },
+  { code: "ES", countryCode: "+34", iconFlagName: "flag-spain" },
+  { code: "LK", countryCode: "+94", iconFlagName: "flag-sri-lanka" },
+  { code: "SD", countryCode: "+249", iconFlagName: "" },
+  { code: "SR", countryCode: "+597", iconFlagName: "" },
+  { code: "SZ", countryCode: "+268", iconFlagName: "" },
+  { code: "SE", countryCode: "+46", iconFlagName: "flag-sweden" },
+  { code: "CH", countryCode: "+41", iconFlagName: "flag-switzerland" },
+  { code: "SY", countryCode: "+963", iconFlagName: "" },
+  { code: "TW", countryCode: "+886", iconFlagName: "flag-taiwan" },
+  { code: "TJ", countryCode: "+992", iconFlagName: "flag-tajikistan" },
+  { code: "TZ", countryCode: "+255", iconFlagName: "flag-tanzania" },
+  { code: "TH", countryCode: "+66", iconFlagName: "flag-thailand" },
+  { code: "TL", countryCode: "+670", iconFlagName: "" },
+  { code: "TG", countryCode: "+228", iconFlagName: "" },
+  { code: "TK", countryCode: "+690", iconFlagName: "" },
+  { code: "TO", countryCode: "+676", iconFlagName: "" },
+  { code: "TT", countryCode: "+1", iconFlagName: "flag-trinidad-and-tobago" },
+  { code: "TN", countryCode: "+216", iconFlagName: "" },
+  { code: "TR", countryCode: "+90", iconFlagName: "flag-turkey" },
+  { code: "TM", countryCode: "+993", iconFlagName: "" },
+  { code: "TC", countryCode: "+1", iconFlagName: "" },
+  { code: "TV", countryCode: "+688", iconFlagName: "" },
+  { code: "UG", countryCode: "+256", iconFlagName: "" },
+  { code: "UA", countryCode: "+380", iconFlagName: "flag-ukraine" },
+  {
+    code: "AE",
+    countryCode: "+971",
+    iconFlagName: "flag-united-arab-emirates"
+  },
+  { code: "GB", countryCode: "+44", iconFlagName: "flag-united-kingdom" },
+  { code: "UK", countryCode: "+44", iconFlagName: "flag-united-kingdom" },
+  { code: "US", countryCode: "+1", iconFlagName: "flag-united-states" },
+  { code: "UY", countryCode: "+598", iconFlagName: "flag-uruguay" },
+  { code: "UZ", countryCode: "+998", iconFlagName: "flag-uzbekistan" },
+  { code: "VU", countryCode: "+678", iconFlagName: "" },
+  { code: "VE", countryCode: "+58", iconFlagName: "flag-venezuela" },
+  { code: "VN", countryCode: "+84", iconFlagName: "flag-vietnam" },
+  { code: "WF", countryCode: "+681", iconFlagName: "" },
+  { code: "WF", countryCode: "+681", iconFlagName: "" },
+  { code: "YE", countryCode: "+967", iconFlagName: "" },
+  { code: "ZM", countryCode: "+260", iconFlagName: "flag-zambia" },
+  { code: "ZW", countryCode: "+263", iconFlagName: "" }
+];
+
+const CODE_TO_COUNTRY = new Map(
+  countries.map((c) => [c.code, c])
+);
+function getFlagIconName(countryCode) {
+  if (!countryCode || typeof countryCode !== "string") {
+    return void 0;
+  }
+  const icon = CODE_TO_COUNTRY.get(
+    countryCode.trim().toUpperCase()
+  )?.iconFlagName;
+  return icon && icon.length > 0 ? icon : void 0;
+}
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class Country extends vividElement.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;
+  }
+}
+__decorateClass([
+  fastElement.attr
+], Country.prototype, "code");
+__decorateClass([
+  fastElement.attr
+], Country.prototype, "label");
+
+const CountryTemplate = (context) => {
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
+  return fastElement.html`
+		<div class="base">
+			<slot name="icon" class="icon">
+				${fastElement.when(
+    (x) => x.flagIconName,
+    fastElement.html`<${iconTag}
+						size="-4"
+						name="${(x) => x.flagIconName}"
+						aria-hidden="true"
+					></${iconTag}>`
+  )}
+			</slot>
+			${fastElement.when(
+    (x) => x.displayText,
+    fastElement.html`<span class="text">${(x) => x.displayText}</span>`
+  )}
+		</div>
+	`;
+};
+
+const countryDefinition = vividElement.defineVividComponent(
+  "country",
+  Country,
+  CountryTemplate,
+  [icon_definition.iconDefinition],
+  {
+    styles
+  }
+);
+const registerCountry = vividElement.createRegisterFunction(countryDefinition);
+
+exports.VwcCountryElement = Country;
+exports.countryDefinition = countryDefinition;
+exports.registerCountry = registerCountry;