resources/lib/codex/codex.js

   1 var __defProp = Object.defineProperty;
   2 var __defProps = Object.defineProperties;
   3 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
   4 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
   5 var __hasOwnProp = Object.prototype.hasOwnProperty;
   6 var __propIsEnum = Object.prototype.propertyIsEnumerable;
   7 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
   8 var __spreadValues = (a, b) => {
   9   for (var prop in b || (b = {}))
  10     if (__hasOwnProp.call(b, prop))
  11       __defNormalProp(a, prop, b[prop]);
  12   if (__getOwnPropSymbols)
  13     for (var prop of __getOwnPropSymbols(b)) {
  14       if (__propIsEnum.call(b, prop))
  15         __defNormalProp(a, prop, b[prop]);
  16     }
  17   return a;
  18 };
  19 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
  20 var __objRest = (source, exclude) => {
  21   var target = {};
  22   for (var prop in source)
  23     if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
  24       target[prop] = source[prop];
  25   if (source != null && __getOwnPropSymbols)
  26     for (var prop of __getOwnPropSymbols(source)) {
  27       if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
  28         target[prop] = source[prop];
  29     }
  30   return target;
  31 };
  32 var __publicField = (obj, key, value) => {
  33   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
  34   return value;
  35 };
  36 var __async = (__this, __arguments, generator) => {
  37   return new Promise((resolve, reject) => {
  38     var fulfilled = (value) => {
  39       try {
  40         step(generator.next(value));
  41       } catch (e) {
  42         reject(e);
  43       }
  44     };
  45     var rejected = (value) => {
  46       try {
  47         step(generator.throw(value));
  48       } catch (e) {
  49         reject(e);
  50       }
  51     };
  52     var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
  53     step((generator = generator.apply(__this, __arguments)).next());
  54   });
  55 };
  56 import { ref, onMounted, defineComponent, computed, openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, Comment, warn, watch, withKeys, withModifiers, renderSlot, resolveComponent, createElementVNode, createBlock, resolveDynamicComponent, withCtx, createVNode, toRef, Fragment, renderList, createTextVNode, Transition, normalizeStyle, inject, mergeProps, getCurrentInstance, withDirectives, vModelCheckbox, createSlots, nextTick, vModelDynamic, onUnmounted, toHandlers, vShow, unref, shallowRef, getCurrentScope, onScopeDispose, shallowReadonly, Teleport, toRefs, provide, vModelRadio, vModelText } from "vue";
  57 const g = '<path d="M11.53 2.3A1.85 1.85 0 0010 1.21 1.85 1.85 0 008.48 2.3L.36 16.36C-.48 17.81.21 19 1.88 19h16.24c1.67 0 2.36-1.19 1.52-2.64zM11 16H9v-2h2zm0-4H9V6h2z"/>', q = '<path d="M12.43 14.34A5 5 0 0110 15a5 5 0 113.95-2L17 16.09V3a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2h10a2 2 0 001.45-.63z"/><circle cx="10" cy="10" r="3"/>', s1 = '<path d="M7 14.17 2.83 10l-1.41 1.41L7 17 19 5l-1.41-1.42z"/>', n1 = '<path d="M10 0a10 10 0 1010 10A10 10 0 0010 0m5.66 14.24-1.41 1.41L10 11.41l-4.24 4.25-1.42-1.42L8.59 10 4.34 5.76l1.42-1.42L10 8.59l4.24-4.24 1.41 1.41L11.41 10z"/>', d1 = '<path d="m4.34 2.93 12.73 12.73-1.41 1.41L2.93 4.35z"/><path d="M17.07 4.34 4.34 17.07l-1.41-1.41L15.66 2.93z"/>', g1 = '<path d="M10 15 2 5h16z"/>', k1 = '<path d="M13.728 1H6.272L1 6.272v7.456L6.272 19h7.456L19 13.728V6.272zM11 15H9v-2h2zm0-4H9V5h2z"/>', F1 = '<path d="m17.5 4.75-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z"/>', t0 = '<path d="M19 3H1v14h18zM3 14l3.5-4.5 2.5 3L12.5 8l4.5 6z"/><path d="M19 5H1V3h18zm0 12H1v-2h18z"/>', p = '<path d="M8 19a1 1 0 001 1h2a1 1 0 001-1v-1H8zm9-12a7 7 0 10-12 4.9S7 14 7 15v1a1 1 0 001 1h4a1 1 0 001-1v-1c0-1 2-3.1 2-3.1A7 7 0 0017 7"/>', e0 = '<path d="M10 0C4.477 0 0 4.477 0 10s4.477 10 10 10 10-4.477 10-10S15.523 0 10 0M9 5h2v2H9zm0 4h2v6H9z"/>', z2 = '<path d="M3 1h2v18H3zm13.5 1.5L15 1l-9 9 9 9 1.5-1.5L9 10z"/>', i2 = '<path d="M15 1h2v18h-2zM3.5 2.5 11 10l-7.5 7.5L5 19l9-9-9-9z"/>', V2 = '<path d="M7 1 5.6 2.5 13 10l-7.4 7.5L7 19l9-9z"/>', b2 = '<path d="m4 10 9 9 1.4-1.5L7 10l7.4-7.5L13 1z"/>', Y2 = '<path d="M12.2 13.6a7 7 0 111.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1010 0A5 5 0 003 8"/>', o5 = '<path d="M10 0 3 8h14zm0 18-7-8h14z"/>', H5 = '<path d="M10 20a10 10 0 010-20 10 10 0 110 20m-2-5 9-8.5L15.5 5 8 12 4.5 8.5 3 10z"/>', K5 = '<path d="m10 5 8 10H2z"/>', H3 = g, b3 = q, J3 = s1, j3 = n1, _3 = d1, n4 = g1, p4 = k1, M4 = F1, N4 = t0, j4 = {
  58   langCodeMap: {
  59     ar: p
  60   },
  61   default: e0
  62 }, N6 = {
  63   ltr: z2,
  64   shouldFlip: true
  65 }, O6 = {
  66   ltr: i2,
  67   shouldFlip: true
  68 }, X6 = {
  69   ltr: V2,
  70   shouldFlip: true
  71 }, e7 = {
  72   ltr: b2,
  73   shouldFlip: true
  74 }, k7 = Y2, Z7 = o5, G7 = H5, u8 = K5;
  75 function Q8(c, s, h) {
  76   if (typeof c == "string" || "path" in c)
  77     return c;
  78   if ("shouldFlip" in c)
  79     return c.ltr;
  80   if ("rtl" in c)
  81     return h === "rtl" ? c.rtl : c.ltr;
  82   const n = s in c.langCodeMap ? c.langCodeMap[s] : c.default;
  83   return typeof n == "string" || "path" in n ? n : n.ltr;
  84 }
  85 function G8(c, s) {
  86   if (typeof c == "string")
  87     return false;
  88   if ("langCodeMap" in c) {
  89     const h = s in c.langCodeMap ? c.langCodeMap[s] : c.default;
  90     if (typeof h == "string")
  91       return false;
  92     c = h;
  93   }
  94   if ("shouldFlipExceptions" in c && Array.isArray(c.shouldFlipExceptions)) {
  95     const h = c.shouldFlipExceptions.indexOf(s);
  96     return h === void 0 || h === -1;
  97   }
  98   return "shouldFlip" in c ? c.shouldFlip : false;
  99 }
 100 function useComputedDirection(root) {
 101   const computedDir = ref(null);
 102   onMounted(() => {
 103     const dir = window.getComputedStyle(root.value).direction;
 104     computedDir.value = dir === "ltr" || dir === "rtl" ? dir : null;
 105   });
 106   return computedDir;
 107 }
 108 function useComputedLanguage(root) {
 109   const computedLang = ref("");
 110   onMounted(() => {
 111     let ancestor = root.value;
 112     while (ancestor && ancestor.lang === "") {
 113       ancestor = ancestor.parentElement;
 114     }
 115     computedLang.value = ancestor ? ancestor.lang : null;
 116   });
 117   return computedLang;
 118 }
 119 function makeStringTypeValidator(allowedValues) {
 120   return (s) => typeof s === "string" && allowedValues.indexOf(s) !== -1;
 121 }
 122 const LibraryPrefix = "cdx";
 123 const ButtonActions = [
 124   "default",
 125   "progressive",
 126   "destructive"
 127 ];
 128 const ButtonWeights = [
 129   "normal",
 130   "primary",
 131   "quiet"
 132 ];
 133 const ButtonSizes = [
 134   "medium",
 135   "large"
 136 ];
 137 const IconSizes = [
 138   "x-small",
 139   "small",
 140   "medium"
 141 ];
 142 const StatusTypes = [
 143   "notice",
 144   "warning",
 145   "error",
 146   "success"
 147 ];
 148 const statusTypeValidator = makeStringTypeValidator(StatusTypes);
 149 const TextInputTypes = [
 150   "text",
 151   "search",
 152   "number",
 153   "email",
 154   "month",
 155   "password",
 156   "tel",
 157   "url",
 158   "week",
 159   "date",
 160   "datetime-local",
 161   "time"
 162 ];
 163 const ValidationStatusTypes = [
 164   "default",
 165   "warning",
 166   "error",
 167   "success"
 168 ];
 169 const TableTextAlignments = [
 170   "start",
 171   "center",
 172   "end",
 173   // Numbers should be aligned to the right in all reading directionalities.
 174   "number"
 175 ];
 176 const DebounceInterval = 120;
 177 const PendingDelay = 500;
 178 const MenuFooterValue = "cdx-menu-footer-item";
 179 const TabsKey = Symbol("CdxTabs");
 180 const ActiveTabKey = Symbol("CdxActiveTab");
 181 const AllowArbitraryKey = Symbol("CdxAllowArbitrary");
 182 const FieldInputIdKey = Symbol("CdxFieldInputId");
 183 const FieldDescriptionIdKey = Symbol("CdxFieldDescriptionId");
 184 const FieldStatusKey = Symbol("CdxFieldStatus");
 185 const DisabledKey = Symbol("CdxDisabled");
 186 const NoInvertClass = "".concat(LibraryPrefix, "-no-invert");
 187 const TableRowIdentifier = Symbol("CdxTableRowIdentifier");
 188 const TablePaginationPositions = [
 189   "top",
 190   "bottom",
 191   "both"
 192 ];
 193 const iconSizeValidator = makeStringTypeValidator(IconSizes);
 194 const _sfc_main$y = defineComponent({
 195   name: "CdxIcon",
 196   props: {
 197     /** The SVG path or an object containing that path plus other data. */
 198     icon: {
 199       type: [String, Object],
 200       required: true
 201     },
 202     /**
 203      * Accessible label for the icon. If not included, the icon will be hidden from screen
 204      * readers via `aria-hidden="true"`. Browsers also display this label as a tooltip when the
 205      * user hovers over the icon. Note that this label is not rendered as visible text next
 206      * to the icon.
 207      */
 208     iconLabel: {
 209       type: String,
 210       default: ""
 211     },
 212     /**
 213      * Explicitly set the language code to use for the icon. See
 214      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/lang.
 215      * Defaults to the lang attribute of the nearest ancestor at mount time.
 216      */
 217     lang: {
 218       type: String,
 219       default: null
 220     },
 221     /**
 222      * Explicitly set the direction to use for the icon. See
 223      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dir.
 224      * Defaults to the computed direction at mount time.
 225      */
 226     dir: {
 227       type: String,
 228       default: null
 229     },
 230     /**
 231      * Specify icon size by choosing one of several pre-defined size
 232      * options. See the type documentation for supported size options.
 233      * The `medium` size is used by default if no size prop is provided.
 234      */
 235     size: {
 236       type: String,
 237       default: "medium",
 238       validator: iconSizeValidator
 239     }
 240   },
 241   setup(props) {
 242     const rootElement = ref();
 243     const computedDir = useComputedDirection(rootElement);
 244     const computedLang = useComputedLanguage(rootElement);
 245     const overriddenDir = computed(() => {
 246       var _a;
 247       return (_a = props.dir) != null ? _a : computedDir.value;
 248     });
 249     const overriddenLang = computed(() => {
 250       var _a;
 251       return (_a = props.lang) != null ? _a : computedLang.value;
 252     });
 253     const rootClasses = computed(() => ({
 254       "cdx-icon--flipped": overriddenDir.value === "rtl" && overriddenLang.value !== null && G8(props.icon, overriddenLang.value),
 255       ["cdx-icon--".concat(props.size)]: true
 256     }));
 257     const resolvedIcon = computed(
 258       () => {
 259         var _a, _b;
 260         return Q8(props.icon, (_a = overriddenLang.value) != null ? _a : "", (_b = overriddenDir.value) != null ? _b : "ltr");
 261       }
 262     );
 263     const iconSvg = computed(() => typeof resolvedIcon.value === "string" ? resolvedIcon.value : "");
 264     const iconPath = computed(() => typeof resolvedIcon.value !== "string" ? resolvedIcon.value.path : "");
 265     return {
 266       rootElement,
 267       rootClasses,
 268       iconSvg,
 269       iconPath
 270     };
 271   }
 272 });
 273 const _export_sfc = (sfc, props) => {
 274   const target = sfc.__vccOpts || sfc;
 275   for (const [key, val] of props) {
 276     target[key] = val;
 277   }
 278   return target;
 279 };
 280 const _hoisted_1$v = ["aria-hidden"];
 281 const _hoisted_2$l = { key: 0 };
 282 const _hoisted_3$e = ["innerHTML"];
 283 const _hoisted_4$a = ["d"];
 284 function _sfc_render$y(_ctx, _cache, $props, $setup, $data, $options) {
 285   return openBlock(), createElementBlock(
 286     "span",
 287     {
 288       ref: "rootElement",
 289       class: normalizeClass(["cdx-icon", _ctx.rootClasses])
 290     },
 291     [
 292       (openBlock(), createElementBlock("svg", {
 293         xmlns: "http://www.w3.org/2000/svg",
 294         "xmlns:xlink": "http://www.w3.org/1999/xlink",
 295         width: "20",
 296         height: "20",
 297         viewBox: "0 0 20 20",
 298         "aria-hidden": _ctx.iconLabel ? void 0 : true
 299       }, [
 300         _ctx.iconLabel ? (openBlock(), createElementBlock(
 301           "title",
 302           _hoisted_2$l,
 303           toDisplayString(_ctx.iconLabel),
 304           1
 305           /* TEXT */
 306         )) : createCommentVNode("v-if", true),
 307         _ctx.iconSvg ? (openBlock(), createElementBlock("g", {
 308           key: 1,
 309           innerHTML: _ctx.iconSvg
 310         }, null, 8, _hoisted_3$e)) : (openBlock(), createElementBlock("path", {
 311           key: 2,
 312           d: _ctx.iconPath
 313         }, null, 8, _hoisted_4$a))
 314       ], 8, _hoisted_1$v))
 315     ],
 316     2
 317     /* CLASS */
 318   );
 319 }
 320 const CdxIcon = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["render", _sfc_render$y]]);
 321 function flattenSlotContents(slotContents) {
 322   const flattened = [];
 323   for (const node of slotContents) {
 324     if (
 325       // HTML tag
 326       typeof node.type === "string" || // Component
 327       typeof node.type === "object"
 328     ) {
 329       flattened.push(node);
 330     } else if (node.type !== Comment) {
 331       if (typeof node.children === "string" && node.children.trim() !== "") {
 332         flattened.push(node.children);
 333       } else if (Array.isArray(node.children)) {
 334         flattened.push(...flattenSlotContents(node.children));
 335       }
 336     }
 337   }
 338   return flattened;
 339 }
 340 function isComponentVNode(node, componentName) {
 341   if (typeof node.type === "object" && "name" in node.type) {
 342     if (componentName !== void 0) {
 343       return node.type.name === componentName;
 344     }
 345     return true;
 346   }
 347   return false;
 348 }
 349 function isTagVNode(node, tagName) {
 350   if (typeof node.type === "string") {
 351     {
 352       return node.type === tagName.toLowerCase();
 353     }
 354   }
 355   return false;
 356 }
 357 function useSlotContents(slot) {
 358   const slotContents = typeof slot === "function" ? slot() : slot;
 359   return slotContents ? flattenSlotContents(slotContents) : [];
 360 }
 361 function useWarnOnce(shouldWarn, message) {
 362   if (shouldWarn()) {
 363     warn(message);
 364     return;
 365   }
 366   const stop = watch(shouldWarn, (newValue) => {
 367     if (newValue) {
 368       warn(message);
 369       stop();
 370     }
 371   });
 372 }
 373 function useIconOnlyButton(slot, attrs, componentName) {
 374   const isIconOnly = computed(() => {
 375     const slotContents = useSlotContents(slot);
 376     if (slotContents.length !== 1) {
 377       return false;
 378     }
 379     const soleNode = slotContents[0];
 380     if (typeof soleNode === "object" && (isComponentVNode(soleNode, "CdxIcon") || isTagVNode(soleNode, "svg"))) {
 381       return true;
 382     }
 383     return false;
 384   });
 385   useWarnOnce(
 386     () => isIconOnly.value && !attrs["aria-label"] && !attrs["aria-hidden"],
 387     "".concat(componentName, ": Icon-only buttons require one of the following attributes: aria-label or aria-hidden. See documentation at https://doc.wikimedia.org/codex/latest/components/demos/button.html#icon-only-button")
 388   );
 389   return isIconOnly;
 390 }
 391 const buttonActionValidator = makeStringTypeValidator(ButtonActions);
 392 const buttonWeightValidator = makeStringTypeValidator(ButtonWeights);
 393 const buttonSizeValidator = makeStringTypeValidator(ButtonSizes);
 394 const _sfc_main$x = defineComponent({
 395   name: "CdxButton",
 396   props: {
 397     /**
 398      * The kind of action that will be taken on click.
 399      *
 400      * @values 'default', 'progressive', 'destructive'
 401      */
 402     action: {
 403       type: String,
 404       default: "default",
 405       validator: buttonActionValidator
 406     },
 407     /**
 408      * Visual prominence of the button.
 409      *
 410      * @values 'normal', 'primary', 'quiet'
 411      */
 412     weight: {
 413       type: String,
 414       default: "normal",
 415       validator: buttonWeightValidator
 416     },
 417     /**
 418      * Button size.
 419      *
 420      * Most buttons should use the default medium size. In rare cases the large size should
 421      * be used, for example to make icon-only buttons larger on touchscreens.
 422      *
 423      * @values 'medium', 'large'
 424      */
 425     size: {
 426       type: String,
 427       default: "medium",
 428       validator: buttonSizeValidator
 429     }
 430   },
 431   emits: ["click"],
 432   setup(props, { emit, slots, attrs }) {
 433     const button = ref();
 434     const isIconOnly = useIconOnlyButton(slots.default, attrs, "CdxButton");
 435     const isActive = ref(false);
 436     const rootClasses = computed(() => ({
 437       ["cdx-button--action-".concat(props.action)]: true,
 438       ["cdx-button--weight-".concat(props.weight)]: true,
 439       ["cdx-button--size-".concat(props.size)]: true,
 440       "cdx-button--framed": props.weight !== "quiet",
 441       "cdx-button--icon-only": isIconOnly.value,
 442       "cdx-button--is-active": isActive.value
 443     }));
 444     const onClick = (event) => {
 445       emit("click", event);
 446     };
 447     const setActive = (active) => {
 448       isActive.value = active;
 449     };
 450     function onKeyDown() {
 451       setActive(true);
 452     }
 453     function onKeyUp() {
 454       var _a;
 455       setActive(false);
 456       (_a = button.value) == null ? void 0 : _a.click();
 457     }
 458     return {
 459       button,
 460       rootClasses,
 461       onClick,
 462       onKeyDown,
 463       onKeyUp
 464     };
 465   }
 466 });
 467 function _sfc_render$x(_ctx, _cache, $props, $setup, $data, $options) {
 468   return openBlock(), createElementBlock(
 469     "button",
 470     {
 471       ref: "button",
 472       class: normalizeClass(["cdx-button", _ctx.rootClasses]),
 473       onKeydown: _cache[0] || (_cache[0] = withKeys(withModifiers((...args) => _ctx.onKeyDown && _ctx.onKeyDown(...args), ["prevent"]), ["space", "enter"])),
 474       onKeyup: _cache[1] || (_cache[1] = withKeys((...args) => _ctx.onKeyUp && _ctx.onKeyUp(...args), ["space", "enter"])),
 475       onClick: _cache[2] || (_cache[2] = (...args) => _ctx.onClick && _ctx.onClick(...args))
 476     },
 477     [
 478       renderSlot(_ctx.$slots, "default")
 479     ],
 480     34
 481     /* CLASS, NEED_HYDRATION */
 482   );
 483 }
 484 const CdxButton = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["render", _sfc_render$x]]);
 485 const _sfc_main$w = defineComponent({
 486   name: "CdxAccordion",
 487   components: { CdxButton, CdxIcon },
 488   props: {
 489     /**
 490      * Forces the accordion to show the action icon.
 491      *
 492      * @values 'true', 'false'
 493      */
 494     actionAlwaysVisible: {
 495       type: Boolean,
 496       default: false
 497     },
 498     /**
 499      * The icon that will be displayed on the right side of the accordion header when expanded.
 500      *
 501      */
 502     actionIcon: {
 503       type: [String, Object],
 504       default: null
 505     },
 506     /**
 507      * Label for the action button. If an action icon is being used, then a label for that icon
 508      * should be provided for ARIA support.
 509      */
 510     actionButtonLabel: {
 511       type: String,
 512       default: ""
 513     },
 514     /**
 515      * The heading level of the accordion title.
 516      *
 517      * @values 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'
 518      */
 519     headingLevel: {
 520       type: String,
 521       default: "h3"
 522     }
 523   },
 524   emits: [
 525     /**
 526      * When the action button is clicked.
 527      *
 528      */
 529     "action-button-click"
 530   ],
 531   setup(props, { attrs, emit }) {
 532     const isExpanded = ref("open" in attrs);
 533     const emitActionButtonClick = () => {
 534       emit("action-button-click");
 535     };
 536     const onToggle = (e) => {
 537       isExpanded.value = e.newState === "open";
 538     };
 539     const shouldShowActionButton = computed(
 540       () => props.actionIcon && (isExpanded.value || props.actionAlwaysVisible)
 541     );
 542     const rootClasses = computed(() => ({
 543       "cdx-accordion--has-icon": shouldShowActionButton.value
 544     }));
 545     return {
 546       emitActionButtonClick,
 547       rootClasses,
 548       shouldShowActionButton,
 549       onToggle
 550     };
 551   }
 552 });
 553 const _hoisted_1$u = { class: "cdx-accordion__header__title" };
 554 const _hoisted_2$k = { class: "cdx-accordion__header__description" };
 555 function _sfc_render$w(_ctx, _cache, $props, $setup, $data, $options) {
 556   const _component_cdx_icon = resolveComponent("cdx-icon");
 557   const _component_cdx_button = resolveComponent("cdx-button");
 558   return openBlock(), createElementBlock(
 559     "details",
 560     {
 561       class: normalizeClass(["cdx-accordion", _ctx.rootClasses]),
 562       onToggle: _cache[1] || (_cache[1] = (...args) => _ctx.onToggle && _ctx.onToggle(...args))
 563     },
 564     [
 565       createElementVNode("summary", null, [
 566         (openBlock(), createBlock(resolveDynamicComponent(_ctx.headingLevel), { class: "cdx-accordion__header" }, {
 567           default: withCtx(() => [
 568             createElementVNode("span", _hoisted_1$u, [
 569               renderSlot(_ctx.$slots, "title")
 570             ]),
 571             createElementVNode("span", _hoisted_2$k, [
 572               renderSlot(_ctx.$slots, "description")
 573             ])
 574           ]),
 575           _: 3
 576           /* FORWARDED */
 577         })),
 578         _ctx.shouldShowActionButton ? (openBlock(), createBlock(_component_cdx_button, {
 579           key: 0,
 580           class: "cdx-accordion__action",
 581           "aria-label": _ctx.actionButtonLabel,
 582           type: "button",
 583           weight: "quiet",
 584           onClick: withModifiers(_ctx.emitActionButtonClick, ["stop"])
 585         }, {
 586           default: withCtx(() => [
 587             createVNode(_component_cdx_icon, {
 588               icon: _ctx.actionIcon,
 589               "icon-label": _ctx.actionButtonLabel,
 590               size: "medium"
 591             }, null, 8, ["icon", "icon-label"])
 592           ]),
 593           _: 1
 594           /* STABLE */
 595         }, 8, ["aria-label", "onClick"])) : createCommentVNode("v-if", true)
 596       ]),
 597       createElementVNode("div", {
 598         class: "cdx-accordion__content",
 599         onClick: _cache[0] || (_cache[0] = withModifiers(() => {
 600         }, ["stop"]))
 601       }, [
 602         renderSlot(_ctx.$slots, "default")
 603       ])
 604     ],
 605     34
 606     /* CLASS, NEED_HYDRATION */
 607   );
 608 }
 609 const Accordion = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["render", _sfc_render$w]]);
 610 function getButtonLabel(button) {
 611   if (button.label === void 0) {
 612     return button.value;
 613   }
 614   if (button.label === null) {
 615     return "";
 616   }
 617   return button.label;
 618 }
 619 function useButtonGroupKeyboardNav(buttonsProp) {
 620   const rootElement = ref();
 621   const focusedButtonIndex = ref();
 622   const buttonRefs = ref(/* @__PURE__ */ new Map());
 623   const currentDirection = useComputedDirection(rootElement);
 624   function assignTemplateRef(templateRef, index) {
 625     const button = templateRef;
 626     if (button) {
 627       buttonRefs.value.set(index, button);
 628     }
 629   }
 630   function onFocus(index) {
 631     focusedButtonIndex.value = index;
 632   }
 633   function onBlur() {
 634     focusedButtonIndex.value = void 0;
 635   }
 636   function focusNonDisabled(index, increment) {
 637     var _a;
 638     const newIndex = index + increment;
 639     const targetButton = buttonsProp.value[newIndex];
 640     if (targetButton) {
 641       if (targetButton.disabled) {
 642         focusNonDisabled(newIndex, increment);
 643       } else {
 644         const buttonElement = (_a = buttonRefs.value.get(newIndex)) == null ? void 0 : _a.$el;
 645         buttonElement == null ? void 0 : buttonElement.focus();
 646       }
 647     }
 648   }
 649   function next() {
 650     var _a;
 651     focusNonDisabled((_a = focusedButtonIndex.value) != null ? _a : -1, 1);
 652   }
 653   function prev() {
 654     var _a;
 655     focusNonDisabled((_a = focusedButtonIndex.value) != null ? _a : buttonsProp.value.length, -1);
 656   }
 657   function moveRight() {
 658     if (currentDirection.value === "rtl") {
 659       prev();
 660     } else {
 661       next();
 662     }
 663   }
 664   function moveLeft() {
 665     if (currentDirection.value === "rtl") {
 666       next();
 667     } else {
 668       prev();
 669     }
 670   }
 671   function onKeydown(e) {
 672     switch (e.key) {
 673       case "ArrowRight":
 674         e.preventDefault();
 675         moveRight();
 676         break;
 677       case "ArrowLeft":
 678         e.preventDefault();
 679         moveLeft();
 680         break;
 681       case "ArrowDown":
 682         e.preventDefault();
 683         next();
 684         break;
 685       case "ArrowUp":
 686         e.preventDefault();
 687         prev();
 688         break;
 689     }
 690   }
 691   return {
 692     rootElement,
 693     assignTemplateRef,
 694     onFocus,
 695     onBlur,
 696     onKeydown
 697   };
 698 }
 699 const _sfc_main$v = defineComponent({
 700   name: "CdxButtonGroup",
 701   components: {
 702     CdxButton,
 703     CdxIcon
 704   },
 705   props: {
 706     /**
 707      * Objects describing the buttons in the group. See the ButtonGroupItem type.
 708      */
 709     buttons: {
 710       type: Array,
 711       required: true,
 712       validator: (value) => Array.isArray(value) && value.length >= 1
 713     },
 714     /**
 715      * Whether the entire group is disabled.
 716      *
 717      * If this is set to true, all buttons in the group are disabled. Buttons can also be
 718      * disabled individually by setting their `disabled` property to true.
 719      */
 720     disabled: {
 721       type: Boolean,
 722       default: false
 723     }
 724   },
 725   emits: [
 726     /**
 727      * Emitted when a button is clicked
 728      *
 729      * @property {string | number} value The `value` property of the button that was clicked
 730      */
 731     "click"
 732   ],
 733   setup(props) {
 734     const {
 735       rootElement,
 736       assignTemplateRef,
 737       onFocus,
 738       onBlur,
 739       onKeydown
 740     } = useButtonGroupKeyboardNav(toRef(props, "buttons"));
 741     return {
 742       rootElement,
 743       assignTemplateRef,
 744       onFocus,
 745       onBlur,
 746       onKeydown,
 747       getButtonLabel
 748     };
 749   }
 750 });
 751 const _hoisted_1$t = {
 752   ref: "rootElement",
 753   class: "cdx-button-group"
 754 };
 755 function _sfc_render$v(_ctx, _cache, $props, $setup, $data, $options) {
 756   const _component_cdx_icon = resolveComponent("cdx-icon");
 757   const _component_cdx_button = resolveComponent("cdx-button");
 758   return openBlock(), createElementBlock(
 759     "div",
 760     _hoisted_1$t,
 761     [
 762       (openBlock(true), createElementBlock(
 763         Fragment,
 764         null,
 765         renderList(_ctx.buttons, (button, index) => {
 766           return openBlock(), createBlock(_component_cdx_button, {
 767             key: button.value,
 768             ref_for: true,
 769             ref: (ref2) => _ctx.assignTemplateRef(ref2, index),
 770             disabled: button.disabled || _ctx.disabled,
 771             "aria-label": button.ariaLabel,
 772             onClick: ($event) => _ctx.$emit("click", button.value),
 773             onFocus: ($event) => _ctx.onFocus(index),
 774             onBlur: _ctx.onBlur,
 775             onKeydown: _ctx.onKeydown
 776           }, {
 777             default: withCtx(() => [
 778               renderSlot(_ctx.$slots, "default", { button }, () => [
 779                 button.icon ? (openBlock(), createBlock(_component_cdx_icon, {
 780                   key: 0,
 781                   icon: button.icon
 782                 }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
 783                 createTextVNode(
 784                   " " + toDisplayString(_ctx.getButtonLabel(button)),
 785                   1
 786                   /* TEXT */
 787                 )
 788               ])
 789             ]),
 790             _: 2
 791             /* DYNAMIC */
 792           }, 1032, ["disabled", "aria-label", "onClick", "onFocus", "onBlur", "onKeydown"]);
 793         }),
 794         128
 795         /* KEYED_FRAGMENT */
 796       ))
 797     ],
 798     512
 799     /* NEED_PATCH */
 800   );
 801 }
 802 const ButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["render", _sfc_render$v]]);
 803 const _sfc_main$u = defineComponent({
 804   name: "CdxThumbnail",
 805   components: { CdxIcon },
 806   props: {
 807     /**
 808      * Thumbnail data.
 809      */
 810     thumbnail: {
 811       type: [Object, null],
 812       default: null
 813     },
 814     /**
 815      * Thumbnail placeholder icon.
 816      */
 817     placeholderIcon: {
 818       type: [String, Object],
 819       default: N4
 820     }
 821   },
 822   setup: (props) => {
 823     const thumbnailLoaded = ref(false);
 824     const thumbnailStyle = ref({});
 825     const preloadThumbnail = (url) => {
 826       const escapedUrl = url.replace(/([\\"\n])/g, "\\$1");
 827       const image = new Image();
 828       image.onload = () => {
 829         thumbnailStyle.value = { backgroundImage: 'url("'.concat(escapedUrl, '")') };
 830         thumbnailLoaded.value = true;
 831       };
 832       image.onerror = () => {
 833         thumbnailLoaded.value = false;
 834       };
 835       image.src = escapedUrl;
 836     };
 837     onMounted(() => {
 838       var _a;
 839       if ((_a = props.thumbnail) == null ? void 0 : _a.url) {
 840         preloadThumbnail(props.thumbnail.url);
 841       }
 842     });
 843     return {
 844       thumbnailStyle,
 845       thumbnailLoaded,
 846       NoInvertClass
 847     };
 848   }
 849 });
 850 const _hoisted_1$s = { class: "cdx-thumbnail" };
 851 const _hoisted_2$j = {
 852   key: 0,
 853   class: "cdx-thumbnail__placeholder"
 854 };
 855 function _sfc_render$u(_ctx, _cache, $props, $setup, $data, $options) {
 856   const _component_cdx_icon = resolveComponent("cdx-icon");
 857   return openBlock(), createElementBlock("span", _hoisted_1$s, [
 858     !_ctx.thumbnailLoaded ? (openBlock(), createElementBlock("span", _hoisted_2$j, [
 859       createVNode(_component_cdx_icon, {
 860         icon: _ctx.placeholderIcon,
 861         class: "cdx-thumbnail__placeholder__icon--vue"
 862       }, null, 8, ["icon"])
 863     ])) : createCommentVNode("v-if", true),
 864     createVNode(Transition, { name: "cdx-thumbnail__image" }, {
 865       default: withCtx(() => [
 866         _ctx.thumbnailLoaded ? (openBlock(), createElementBlock(
 867           "span",
 868           {
 869             key: 0,
 870             style: normalizeStyle(_ctx.thumbnailStyle),
 871             class: normalizeClass([_ctx.NoInvertClass, "cdx-thumbnail__image"])
 872           },
 873           null,
 874           6
 875           /* CLASS, STYLE */
 876         )) : createCommentVNode("v-if", true)
 877       ]),
 878       _: 1
 879       /* STABLE */
 880     })
 881   ]);
 882 }
 883 const CdxThumbnail = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["render", _sfc_render$u]]);
 884 const _sfc_main$t = defineComponent({
 885   name: "CdxCard",
 886   components: { CdxIcon, CdxThumbnail },
 887   props: {
 888     /**
 889      * If provided, the Card will be a link to this URL.
 890      */
 891     url: {
 892       type: String,
 893       default: ""
 894     },
 895     /**
 896      * Icon displayed at the start of the Card.
 897      */
 898     icon: {
 899       type: [String, Object],
 900       default: ""
 901     },
 902     /**
 903      * Thumbnail image data for the Card.
 904      */
 905     thumbnail: {
 906       type: [Object, null],
 907       default: null
 908     },
 909     /**
 910      * Option to force a thumbnail layout.
 911      *
 912      * When set to `true`, the Card will display a Thumbnail. If a `thumbnail` prop was also
 913      * provided, the thumbnail image will display. Otherwise, a placeholder icon will display.
 914      *
 915      * This is useful when displaying groups of Cards when some of the cards have thumbnail
 916      * images but some do not. `forceThumbnail` will provide a consistent layout for that group.
 917      *
 918      * Note that this prop is not needed to display a thumbnail image: if the `thumbnail` prop
 919      * is provided, it will display. This prop is only needed to enable the display of the
 920      * thumbnail placeholder icon when the `thumbnail` prop is not provided.
 921      */
 922     forceThumbnail: {
 923       type: Boolean,
 924       default: false
 925     },
 926     /**
 927      * Optional custom icon for the placeholder shown when `forceThumbnail` is true but no
 928      * thumbnail is provided.
 929      *
 930      * Defaults to the default placeholder icon set in the Thumbnail component.
 931      */
 932     customPlaceholderIcon: {
 933       type: [String, Object],
 934       default: void 0
 935     }
 936   },
 937   setup(props) {
 938     const isLink = computed(() => !!props.url);
 939     const contentTag = computed(() => isLink.value ? "a" : "span");
 940     const cardLink = computed(() => isLink.value ? props.url : void 0);
 941     return {
 942       isLink,
 943       contentTag,
 944       cardLink
 945     };
 946   }
 947 });
 948 const _hoisted_1$r = { class: "cdx-card__text" };
 949 const _hoisted_2$i = { class: "cdx-card__text__title" };
 950 const _hoisted_3$d = {
 951   key: 0,
 952   class: "cdx-card__text__description"
 953 };
 954 const _hoisted_4$9 = {
 955   key: 1,
 956   class: "cdx-card__text__supporting-text"
 957 };
 958 function _sfc_render$t(_ctx, _cache, $props, $setup, $data, $options) {
 959   const _component_cdx_thumbnail = resolveComponent("cdx-thumbnail");
 960   const _component_cdx_icon = resolveComponent("cdx-icon");
 961   return openBlock(), createBlock(resolveDynamicComponent(_ctx.contentTag), {
 962     href: _ctx.cardLink,
 963     class: normalizeClass(["cdx-card", {
 964       "cdx-card--is-link": _ctx.isLink,
 965       // Include dynamic classes in the template so that $slots is reactive.
 966       "cdx-card--title-only": !_ctx.$slots.description && !_ctx.$slots["supporting-text"]
 967     }])
 968   }, {
 969     default: withCtx(() => [
 970       _ctx.thumbnail || _ctx.forceThumbnail ? (openBlock(), createBlock(_component_cdx_thumbnail, {
 971         key: 0,
 972         thumbnail: _ctx.thumbnail,
 973         "placeholder-icon": _ctx.customPlaceholderIcon,
 974         class: "cdx-card__thumbnail"
 975       }, null, 8, ["thumbnail", "placeholder-icon"])) : _ctx.icon ? (openBlock(), createBlock(_component_cdx_icon, {
 976         key: 1,
 977         icon: _ctx.icon,
 978         class: "cdx-card__icon"
 979       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
 980       createElementVNode("span", _hoisted_1$r, [
 981         createElementVNode("span", _hoisted_2$i, [
 982           renderSlot(_ctx.$slots, "title")
 983         ]),
 984         _ctx.$slots.description ? (openBlock(), createElementBlock("span", _hoisted_3$d, [
 985           renderSlot(_ctx.$slots, "description")
 986         ])) : createCommentVNode("v-if", true),
 987         _ctx.$slots["supporting-text"] ? (openBlock(), createElementBlock("span", _hoisted_4$9, [
 988           renderSlot(_ctx.$slots, "supporting-text")
 989         ])) : createCommentVNode("v-if", true)
 990       ])
 991     ]),
 992     _: 3
 993     /* FORWARDED */
 994   }, 8, ["href", "class"]);
 995 }
 996 const Card = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["render", _sfc_render$t]]);
 997 function useComputedDisabled(disabledProp) {
 998   const providedDisabled = inject(DisabledKey, ref(false));
 999   return computed(() => providedDisabled.value || disabledProp.value);
1000 }
1001 function useFieldData(disabledProp, statusProp, idAttr) {
1002   const computedDisabled = useComputedDisabled(disabledProp);
1003   const providedStatus = inject(FieldStatusKey, ref("default"));
1004   const computedStatus = computed(() => {
1005     if ((statusProp == null ? void 0 : statusProp.value) && statusProp.value !== "default") {
1006       return statusProp.value;
1007     }
1008     return providedStatus.value;
1009   });
1010   const providedId = inject(FieldInputIdKey, void 0);
1011   const computedInputId = computed(() => {
1012     var _a;
1013     return (_a = providedId == null ? void 0 : providedId.value) != null ? _a : idAttr;
1014   });
1015   return {
1016     computedDisabled,
1017     computedStatus,
1018     computedInputId
1019   };
1020 }
1021 function useSplitAttributes(attrs, internalClasses = computed(() => ({}))) {
1022   const rootClasses = computed(() => {
1023     const classRecord = __objRest(internalClasses.value, []);
1024     if (attrs.class) {
1025       const providedClasses = attrs.class.split(" ");
1026       providedClasses.forEach((className) => {
1027         classRecord[className] = true;
1028       });
1029     }
1030     return classRecord;
1031   });
1032   const rootStyle = computed(() => {
1033     if ("style" in attrs) {
1034       return attrs.style;
1035     }
1036     return void 0;
1037   });
1038   const otherAttrs = computed(() => {
1039     const _a = attrs, { class: _ignoredClass, style: _ignoredStyle } = _a, attrsCopy = __objRest(_a, ["class", "style"]);
1040     return attrsCopy;
1041   });
1042   return {
1043     rootClasses,
1044     rootStyle,
1045     otherAttrs
1046   };
1047 }
1048 function useI18n(messageKey, defaultValue, params = []) {
1049   const providedI18nFunc = inject("CdxI18nFunction", void 0);
1050   return computed(() => {
1051     const unwrappedParams = params.map((p2) => typeof p2 === "function" ? p2() : p2.value);
1052     const fromProvidedFunc = providedI18nFunc == null ? void 0 : providedI18nFunc(messageKey, ...unwrappedParams);
1053     if (fromProvidedFunc !== void 0 && fromProvidedFunc !== null) {
1054       return fromProvidedFunc;
1055     }
1056     return typeof defaultValue === "function" ? defaultValue(...unwrappedParams) : defaultValue;
1057   });
1058 }
1059 function useI18nWithOverride(override, messageKey, defaultValue, params = []) {
1060   const translatedMessage = useI18n(messageKey, defaultValue, params);
1061   return computed(() => override.value || translatedMessage.value);
1062 }
1063 const _sfc_main$s = defineComponent({
1064   name: "CdxLabel",
1065   components: { CdxIcon },
1066   /**
1067    * We want the label or legend to inherit attributes, not the root element.
1068    */
1069   inheritAttrs: false,
1070   props: {
1071     /**
1072      * Icon before the label text.
1073      *
1074      * Do not use this if including a start icon within the input component.
1075      */
1076     icon: {
1077       type: [String, Object],
1078       default: null
1079     },
1080     /**
1081      * Whether the field is optional.
1082      *
1083      * This will add a flag next to the label indicating that the field is optional.
1084      */
1085     optional: {
1086       type: Boolean,
1087       default: false
1088     },
1089     // DEPRECATED: set default to '(optional)' (T368444).
1090     /**
1091      * Text to indicate that the field is optional.
1092      *
1093      * Omit this prop to use the default value, "(optional)".
1094      */
1095     optionalFlag: {
1096       type: String,
1097       default: ""
1098     },
1099     /**
1100      * Whether the label should be visually hidden.
1101      */
1102     visuallyHidden: {
1103       type: Boolean,
1104       default: false
1105     },
1106     /**
1107      * Whether this component should output a `<legend>` element.
1108      *
1109      * Always set this to true when this component is used inside a `<fieldset>` element. Do not
1110      * set it to true otherwise.
1111      */
1112     isLegend: {
1113       type: Boolean,
1114       default: false
1115     },
1116     /**
1117      * The ID of the input/control this label is for.
1118      *
1119      * Will be added as the `for` attribute of the `<label>`. Not needed for `<legend>`.
1120      */
1121     inputId: {
1122       type: String,
1123       default: ""
1124     },
1125     /**
1126      * The ID of the description element.
1127      *
1128      * This ID can be used for the `aria-describedby` attribute of the input.
1129      */
1130     descriptionId: {
1131       type: String,
1132       default: ""
1133     },
1134     /**
1135      * Whether this label is for a disabled field or input.
1136      */
1137     disabled: {
1138       type: Boolean,
1139       default: false
1140     }
1141   },
1142   setup(props, { attrs }) {
1143     const { computedDisabled } = useFieldData(toRef(props, "disabled"));
1144     const internalClasses = computed(() => ({
1145       "cdx-label--visually-hidden": props.visuallyHidden,
1146       "cdx-label--disabled": computedDisabled.value
1147     }));
1148     const {
1149       rootClasses,
1150       rootStyle,
1151       otherAttrs
1152     } = useSplitAttributes(attrs, internalClasses);
1153     const translatedOptionalFlag = useI18nWithOverride(
1154       toRef(props, "optionalFlag"),
1155       "cdx-label-optional-flag",
1156       "(optional)"
1157     );
1158     return {
1159       rootClasses,
1160       rootStyle,
1161       otherAttrs,
1162       translatedOptionalFlag
1163     };
1164   }
1165 });
1166 const _hoisted_1$q = ["for"];
1167 const _hoisted_2$h = { class: "cdx-label__label__text" };
1168 const _hoisted_3$c = {
1169   key: 1,
1170   class: "cdx-label__label__optional-flag"
1171 };
1172 const _hoisted_4$8 = ["id"];
1173 const _hoisted_5$8 = { class: "cdx-label__label" };
1174 const _hoisted_6$7 = { class: "cdx-label__label__text" };
1175 const _hoisted_7$3 = {
1176   key: 1,
1177   class: "cdx-label__label__optional-flag"
1178 };
1179 const _hoisted_8$2 = {
1180   key: 0,
1181   class: "cdx-label__description"
1182 };
1183 function _sfc_render$s(_ctx, _cache, $props, $setup, $data, $options) {
1184   const _component_cdx_icon = resolveComponent("cdx-icon");
1185   return !_ctx.isLegend ? (openBlock(), createElementBlock(
1186     "div",
1187     {
1188       key: 0,
1189       class: normalizeClass(["cdx-label", _ctx.rootClasses]),
1190       style: normalizeStyle(_ctx.rootStyle)
1191     },
1192     [
1193       createElementVNode("label", mergeProps({
1194         class: "cdx-label__label",
1195         for: _ctx.inputId ? _ctx.inputId : void 0
1196       }, _ctx.otherAttrs), [
1197         _ctx.icon ? (openBlock(), createBlock(_component_cdx_icon, {
1198           key: 0,
1199           icon: _ctx.icon,
1200           class: "cdx-label__label__icon"
1201         }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
1202         createElementVNode("span", _hoisted_2$h, [
1203           renderSlot(_ctx.$slots, "default")
1204         ]),
1205         _ctx.optionalFlag || _ctx.optional ? (openBlock(), createElementBlock(
1206           "span",
1207           _hoisted_3$c,
1208           toDisplayString(" ") + " " + toDisplayString(_ctx.translatedOptionalFlag),
1209           1
1210           /* TEXT */
1211         )) : createCommentVNode("v-if", true)
1212       ], 16, _hoisted_1$q),
1213       _ctx.$slots.description && _ctx.$slots.description().length > 0 ? (openBlock(), createElementBlock("span", {
1214         key: 0,
1215         id: _ctx.descriptionId || void 0,
1216         class: "cdx-label__description"
1217       }, [
1218         renderSlot(_ctx.$slots, "description")
1219       ], 8, _hoisted_4$8)) : createCommentVNode("v-if", true)
1220     ],
1221     6
1222     /* CLASS, STYLE */
1223   )) : (openBlock(), createElementBlock(
1224     "legend",
1225     mergeProps({
1226       key: 1,
1227       class: ["cdx-label", _ctx.rootClasses],
1228       style: _ctx.rootStyle
1229     }, _ctx.otherAttrs),
1230     [
1231       createElementVNode("span", _hoisted_5$8, [
1232         _ctx.icon ? (openBlock(), createBlock(_component_cdx_icon, {
1233           key: 0,
1234           icon: _ctx.icon,
1235           class: "cdx-label__label__icon"
1236         }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
1237         createElementVNode("span", _hoisted_6$7, [
1238           renderSlot(_ctx.$slots, "default")
1239         ]),
1240         _ctx.optionalFlag || _ctx.optional ? (openBlock(), createElementBlock(
1241           "span",
1242           _hoisted_7$3,
1243           toDisplayString(" ") + " " + toDisplayString(_ctx.translatedOptionalFlag),
1244           1
1245           /* TEXT */
1246         )) : createCommentVNode("v-if", true)
1247       ]),
1248       _ctx.$slots.description && _ctx.$slots.description().length > 0 ? (openBlock(), createElementBlock("span", _hoisted_8$2, [
1249         renderSlot(_ctx.$slots, "description")
1250       ])) : createCommentVNode("v-if", true)
1251     ],
1252     16
1253     /* FULL_PROPS */
1254   ));
1255 }
1256 const CdxLabel = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["render", _sfc_render$s]]);
1257 function useLabelChecker(slot, attrs, componentName) {
1258   useWarnOnce(
1259     () => useSlotContents(slot).length === 0 && !(attrs == null ? void 0 : attrs["aria-label"]) && !(attrs == null ? void 0 : attrs["aria-labelledby"]),
1260     "".concat(componentName, ": Inputs must have an associated label. Provide one of the following:\n - A label via the appropriate slot\n - An `aria-label` attribute set to the label text\n - An `aria-labelledby` attribute set to the ID of the label element")
1261   );
1262 }
1263 function useModelWrapper(modelValueRef, emit, eventName) {
1264   return computed({
1265     get: () => modelValueRef.value,
1266     // If eventName is undefined, then 'update:modelValue' must be a valid EventName,
1267     // but TypeScript's type analysis isn't clever enough to realize that
1268     set: (value) => emit(eventName || "update:modelValue", value)
1269   });
1270 }
1271 let counter = 0;
1272 function useGeneratedId(identifier) {
1273   var _a;
1274   const vm = getCurrentInstance();
1275   const externalId = (_a = vm == null ? void 0 : vm.props.id) != null ? _a : vm == null ? void 0 : vm.attrs.id;
1276   if (identifier) {
1277     return "".concat(LibraryPrefix, "-").concat(identifier, "-").concat(counter++);
1278   } else if (externalId) {
1279     return "".concat(LibraryPrefix, "-").concat(externalId, "-").concat(counter++);
1280   } else {
1281     return "".concat(LibraryPrefix, "-").concat(counter++);
1282   }
1283 }
1284 const statusValidator$a = makeStringTypeValidator(ValidationStatusTypes);
1285 const _sfc_main$r = defineComponent({
1286   name: "CdxCheckbox",
1287   components: { CdxLabel },
1288   props: {
1289     /**
1290      * Value of the checkbox or checkbox group.
1291      *
1292      * Provided by `v-model` binding in the parent component.
1293      */
1294     modelValue: {
1295       type: [Boolean, Array],
1296       default: false
1297     },
1298     /**
1299      * HTML "value" attribute to assign to the input.
1300      *
1301      * Required for input groups.
1302      */
1303     inputValue: {
1304       type: [String, Number, Boolean],
1305       default: false
1306     },
1307     /**
1308      * HTML "name" attribute to assign to the input.
1309      */
1310     name: {
1311       type: String,
1312       default: null
1313     },
1314     /**
1315      * Whether the disabled attribute should be added to the input.
1316      */
1317     disabled: {
1318       type: Boolean,
1319       default: false
1320     },
1321     /**
1322      * Whether the indeterminate visual state should be displayed.
1323      *
1324      * This is unrelated to the value provided by `v-model`, and the indeterminate visual state
1325      * will override the checked or unchecked visual state.
1326      */
1327     indeterminate: {
1328       type: Boolean,
1329       default: false
1330     },
1331     /**
1332      * Whether the component should display inline.
1333      *
1334      * By default, `display: block` is set and a margin exists between
1335      * sibling components, for a stacked layout.
1336      */
1337     inline: {
1338       type: Boolean,
1339       default: false
1340     },
1341     /**
1342      * Whether the label should be visually hidden.
1343      *
1344      * When true, the label will remain accessible to assistive technology.
1345      */
1346     hideLabel: {
1347       type: Boolean,
1348       default: false
1349     },
1350     /**
1351      * Validation status of the Checkbox.
1352      */
1353     status: {
1354       type: String,
1355       default: "default",
1356       validator: statusValidator$a
1357     }
1358   },
1359   emits: [
1360     /**
1361      * Emitted when modelValue changes.
1362      *
1363      * @property {boolean | string[] | number[]} modelValue The new model value
1364      */
1365     "update:modelValue"
1366   ],
1367   setup(props, { emit, slots, attrs }) {
1368     var _a;
1369     useLabelChecker((_a = slots.default) == null ? void 0 : _a.call(slots), attrs, "CdxCheckbox");
1370     const {
1371       computedDisabled,
1372       computedStatus
1373     } = useFieldData(
1374       toRef(props, "disabled"),
1375       toRef(props, "status")
1376     );
1377     const rootClasses = computed(() => ({
1378       "cdx-checkbox--inline": props.inline,
1379       ["cdx-checkbox--status-".concat(computedStatus.value)]: true
1380     }));
1381     const customInputClasses = computed(() => ({
1382       "cdx-checkbox__custom-input--inline": props.inline
1383     }));
1384     const input = ref();
1385     const checkboxId = useGeneratedId("checkbox");
1386     const descriptionId = useGeneratedId("description");
1387     const wrappedModel = useModelWrapper(toRef(props, "modelValue"), emit);
1388     return {
1389       rootClasses,
1390       computedDisabled,
1391       input,
1392       checkboxId,
1393       descriptionId,
1394       wrappedModel,
1395       customInputClasses
1396     };
1397   }
1398 });
1399 const _hoisted_1$p = { class: "cdx-checkbox__wrapper" };
1400 const _hoisted_2$g = ["id", "aria-describedby", "value", "name", "disabled", ".indeterminate"];
1401 const _hoisted_3$b = /* @__PURE__ */ createElementVNode(
1402   "span",
1403   { class: "cdx-checkbox__icon" },
1404   null,
1405   -1
1406   /* HOISTED */
1407 );
1408 function _sfc_render$r(_ctx, _cache, $props, $setup, $data, $options) {
1409   const _component_cdx_label = resolveComponent("cdx-label");
1410   return openBlock(), createElementBlock(
1411     "div",
1412     {
1413       class: normalizeClass(["cdx-checkbox", _ctx.rootClasses])
1414     },
1415     [
1416       createElementVNode("div", _hoisted_1$p, [
1417         withDirectives(createElementVNode("input", {
1418           id: _ctx.checkboxId,
1419           ref: "input",
1420           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.wrappedModel = $event),
1421           class: "cdx-checkbox__input",
1422           type: "checkbox",
1423           "aria-describedby": _ctx.$slots.description && _ctx.$slots.description().length > 0 ? _ctx.descriptionId : void 0,
1424           value: _ctx.inputValue,
1425           name: _ctx.name,
1426           disabled: _ctx.computedDisabled,
1427           ".indeterminate": _ctx.indeterminate
1428         }, null, 40, _hoisted_2$g), [
1429           [vModelCheckbox, _ctx.wrappedModel]
1430         ]),
1431         _hoisted_3$b,
1432         _ctx.$slots.default && _ctx.$slots.default().length ? (openBlock(), createBlock(_component_cdx_label, {
1433           key: 0,
1434           class: "cdx-checkbox__label",
1435           "input-id": _ctx.checkboxId,
1436           "description-id": _ctx.$slots.description && _ctx.$slots.description().length > 0 ? _ctx.descriptionId : void 0,
1437           disabled: _ctx.computedDisabled,
1438           "visually-hidden": _ctx.hideLabel
1439         }, createSlots({
1440           default: withCtx(() => [
1441             renderSlot(_ctx.$slots, "default")
1442           ]),
1443           _: 2
1444           /* DYNAMIC */
1445         }, [
1446           _ctx.$slots.description && _ctx.$slots.description().length > 0 ? {
1447             name: "description",
1448             fn: withCtx(() => [
1449               renderSlot(_ctx.$slots, "description")
1450             ]),
1451             key: "0"
1452           } : void 0
1453         ]), 1032, ["input-id", "description-id", "disabled", "visually-hidden"])) : createCommentVNode("v-if", true)
1454       ]),
1455       _ctx.$slots["custom-input"] ? (openBlock(), createElementBlock(
1456         "div",
1457         {
1458           key: 0,
1459           class: normalizeClass(["cdx-checkbox__custom-input", _ctx.customInputClasses])
1460         },
1461         [
1462           renderSlot(_ctx.$slots, "custom-input")
1463         ],
1464         2
1465         /* CLASS */
1466       )) : createCommentVNode("v-if", true)
1467     ],
1468     2
1469     /* CLASS */
1470   );
1471 }
1472 const CdxCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["render", _sfc_render$r]]);
1473 const _sfc_main$q = defineComponent({
1474   name: "CdxInputChip",
1475   components: {
1476     CdxButton,
1477     CdxIcon
1478   },
1479   props: {
1480     /**
1481      * Custom icon.
1482      */
1483     icon: {
1484       type: [String, Object],
1485       default: null
1486     },
1487     /**
1488      * Whether the input chip can be removed.
1489      */
1490     disabled: {
1491       type: Boolean,
1492       default: false
1493     },
1494     /**
1495      * Whether the InputChip is readonly.
1496      */
1497     readonly: {
1498       type: Boolean,
1499       default: false
1500     }
1501   },
1502   expose: [
1503     "focus"
1504   ],
1505   emits: [
1506     /**
1507      * Emitted when a chip is removed by the user.
1508      *
1509      * @property {'button'|'Backspace'|'Delete'} method How the chip was removed
1510      */
1511     "remove-chip",
1512     /**
1513      * Emitted when a chip is clicked by the user.
1514      */
1515     "click-chip",
1516     /**
1517      * Emitted when the user presses the left arrow key.
1518      */
1519     "arrow-left",
1520     /**
1521      * Emitted when the user presses the right arrow key.
1522      */
1523     "arrow-right"
1524   ],
1525   setup(props, { emit }) {
1526     const tabIndex = computed(() => props.disabled ? -1 : 0);
1527     const rootElement = ref();
1528     const rootClasses = computed(() => ({
1529       "cdx-input-chip--disabled": props.disabled,
1530       "cdx-input-chip--readonly": props.readonly
1531     }));
1532     const ariaDescription = useI18n(
1533       "cdx-input-chip-aria-description",
1534       "Press Enter to edit or Delete to remove"
1535     );
1536     function onKeydown(e) {
1537       var _a;
1538       switch (e.key) {
1539         case "Enter":
1540           emit("click-chip");
1541           e.preventDefault();
1542           e.stopPropagation();
1543           break;
1544         case "Escape":
1545           (_a = rootElement.value) == null ? void 0 : _a.blur();
1546           e.preventDefault();
1547           e.stopPropagation();
1548           break;
1549         case "Backspace":
1550         case "Delete":
1551           emit("remove-chip", e.key);
1552           e.preventDefault();
1553           e.stopPropagation();
1554           break;
1555         case "ArrowLeft":
1556           emit("arrow-left");
1557           e.preventDefault();
1558           e.stopPropagation();
1559           break;
1560         case "ArrowRight":
1561           emit("arrow-right");
1562           e.preventDefault();
1563           e.stopPropagation();
1564           break;
1565       }
1566     }
1567     return {
1568       rootElement,
1569       rootClasses,
1570       ariaDescription,
1571       onKeydown,
1572       cdxIconClose: _3,
1573       tabIndex
1574     };
1575   },
1576   methods: {
1577     /**
1578      * Focus the chip.
1579      *
1580      * @public
1581      */
1582     focus() {
1583       this.$refs.rootElement.focus();
1584     }
1585   }
1586 });
1587 const _hoisted_1$o = ["tabindex", "aria-description"];
1588 const _hoisted_2$f = { class: "cdx-input-chip__text" };
1589 function _sfc_render$q(_ctx, _cache, $props, $setup, $data, $options) {
1590   const _component_cdx_icon = resolveComponent("cdx-icon");
1591   const _component_cdx_button = resolveComponent("cdx-button");
1592   return openBlock(), createElementBlock("div", {
1593     ref: "rootElement",
1594     class: normalizeClass(["cdx-input-chip", _ctx.rootClasses]),
1595     tabindex: _ctx.tabIndex,
1596     role: "option",
1597     "aria-description": _ctx.ariaDescription,
1598     onKeydown: _cache[1] || (_cache[1] = (...args) => _ctx.onKeydown && _ctx.onKeydown(...args)),
1599     onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("click-chip"))
1600   }, [
1601     _ctx.icon ? (openBlock(), createBlock(_component_cdx_icon, {
1602       key: 0,
1603       icon: _ctx.icon,
1604       size: "small"
1605     }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
1606     createElementVNode("span", _hoisted_2$f, [
1607       renderSlot(_ctx.$slots, "default")
1608     ]),
1609     createVNode(_component_cdx_button, {
1610       class: "cdx-input-chip__button",
1611       weight: "quiet",
1612       tabindex: "-1",
1613       "aria-hidden": "true",
1614       disabled: _ctx.disabled,
1615       onClick: _cache[0] || (_cache[0] = withModifiers(($event) => _ctx.$emit("remove-chip", "button"), ["stop"]))
1616     }, {
1617       default: withCtx(() => [
1618         createVNode(_component_cdx_icon, {
1619           icon: _ctx.cdxIconClose,
1620           size: "x-small"
1621         }, null, 8, ["icon"])
1622       ]),
1623       _: 1
1624       /* STABLE */
1625     }, 8, ["disabled"])
1626   ], 42, _hoisted_1$o);
1627 }
1628 const CdxInputChip = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["render", _sfc_render$q]]);
1629 function useOptionalModelWrapper(internalValueRef, modelValueRef, emit, eventName) {
1630   return computed({
1631     get: () => {
1632       var _a;
1633       return (_a = modelValueRef.value) != null ? _a : internalValueRef.value;
1634     },
1635     set: (value) => {
1636       if (modelValueRef.value !== null) {
1637         emit(eventName || "update:modelValue", value);
1638       } else {
1639         internalValueRef.value = value;
1640       }
1641     }
1642   });
1643 }
1644 const statusValidator$9 = makeStringTypeValidator(ValidationStatusTypes);
1645 const _sfc_main$p = defineComponent({
1646   name: "CdxChipInput",
1647   components: {
1648     CdxInputChip
1649   },
1650   /**
1651    * We want the input to inherit attributes, not the root element.
1652    */
1653   inheritAttrs: false,
1654   props: {
1655     /**
1656      * Current chips present in the input.
1657      *
1658      * Provided by `v-model` binding in the parent component.
1659      */
1660     inputChips: {
1661       type: Array,
1662       required: true
1663     },
1664     /**
1665      * Current value of the text input. This prop is optional and should only be used if you
1666      * need to keep track of the text input value for some reason (e.g. for validation).
1667      *
1668      * Optionally provided by `v-model:input-value` binding in the parent component.
1669      */
1670     inputValue: {
1671       type: [String, Number],
1672       default: null
1673     },
1674     /**
1675      * Whether the text input should appear below the set of input chips.
1676      *
1677      * By default, the input chips are inline with the input.
1678      */
1679     separateInput: {
1680       type: Boolean,
1681       default: false
1682     },
1683     /**
1684      * `status` attribute of the input.
1685      */
1686     status: {
1687       type: String,
1688       default: "default",
1689       validator: statusValidator$9
1690     },
1691     /**
1692      * Validation function for chip text. If it returns false, the chip will not be added and
1693      * the error status will be set.
1694      */
1695     chipValidator: {
1696       type: Function,
1697       // eslint-disable-next-line @typescript-eslint/no-unused-vars
1698       default: (value) => true
1699     },
1700     /**
1701      * Whether the input is disabled.
1702      */
1703     disabled: {
1704       type: Boolean,
1705       default: false
1706     },
1707     /**
1708      * Whether the ChipInput is readonly.
1709      */
1710     readonly: {
1711       type: Boolean,
1712       default: false
1713     }
1714   },
1715   emits: [
1716     /**
1717      * When the input chips change.
1718      *
1719      * @property {ChipInputItem[]} inputChips The new set of inputChips
1720      */
1721     "update:input-chips",
1722     /**
1723      * When the input value changes. Only emitted if the inputValue prop is provided.
1724      *
1725      * @property {string | number} inputValue The new input value
1726      */
1727     "update:input-value"
1728   ],
1729   setup(props, { emit, attrs }) {
1730     const rootElement = ref();
1731     const chipsContainer = ref();
1732     const separateInputWrapper = ref();
1733     const statusMessageContent = ref("");
1734     const computedDirection = useComputedDirection(rootElement);
1735     const input = ref();
1736     const allowArbitrary = inject(AllowArbitraryKey, ref(true));
1737     const internalInputValue = ref("");
1738     const computedInputValue = useOptionalModelWrapper(
1739       internalInputValue,
1740       toRef(props, "inputValue"),
1741       emit,
1742       "update:input-value"
1743     );
1744     const validatedStatus = ref("default");
1745     const internalStatus = computed(() => {
1746       if (validatedStatus.value === "error" || props.status === "error") {
1747         return "error";
1748       }
1749       return "default";
1750     });
1751     const { computedDisabled, computedStatus } = useFieldData(toRef(props, "disabled"), internalStatus);
1752     const isFocused = ref(false);
1753     const internalClasses = computed(() => ({
1754       "cdx-chip-input--has-separate-input": props.separateInput,
1755       ["cdx-chip-input--status-".concat(computedStatus.value)]: true,
1756       // We need focused and disabled classes on the root element, which contains the
1757       // chips and the input, since it is styled to look like the input.
1758       "cdx-chip-input--focused": isFocused.value,
1759       "cdx-chip-input--disabled": computedDisabled.value,
1760       "cdx-chip-input--readonly": props.readonly
1761     }));
1762     const {
1763       rootClasses,
1764       rootStyle,
1765       otherAttrs
1766     } = useSplitAttributes(attrs, internalClasses);
1767     const chipRefs = [];
1768     const currentChipToRemove = ref(null);
1769     const computedChipToRemove = computed(() => currentChipToRemove.value ? currentChipToRemove.value.value : "");
1770     const chipAddedMessage = useI18n(
1771       "cdx-chip-input-chip-added",
1772       (x) => "Chip ".concat(x, " was added."),
1773       [computedInputValue]
1774     );
1775     const chipRemovedMessage = useI18n(
1776       "cdx-chip-input-chip-removed",
1777       (x) => "Chip ".concat(x, " was removed."),
1778       [computedChipToRemove]
1779     );
1780     function assignChipTemplateRef(chip, index) {
1781       if (chip !== null) {
1782         chipRefs[index] = chip;
1783       }
1784     }
1785     const focusInput = () => {
1786       input.value.focus();
1787     };
1788     function addChip() {
1789       if (
1790         // If the input value is the same as a chip's value, or...
1791         !!props.inputChips.find((chip) => chip.value === computedInputValue.value) || // ...validation fails, set status to error.
1792         !props.chipValidator(computedInputValue.value)
1793       ) {
1794         validatedStatus.value = "error";
1795       } else if (computedInputValue.value.toString().length > 0) {
1796         statusMessageContent.value = chipAddedMessage.value;
1797         emit("update:input-chips", props.inputChips.concat({ value: computedInputValue.value }));
1798         computedInputValue.value = "";
1799       }
1800     }
1801     function removeChip(chipToRemove) {
1802       if (props.readonly || computedDisabled.value) {
1803         return;
1804       }
1805       emit("update:input-chips", props.inputChips.filter(
1806         (chip) => chip.value !== chipToRemove.value
1807       ));
1808     }
1809     function moveChipFocus(direction, startIndex) {
1810       const resolvedDirection = (
1811         // -1 for prev (left in LTR, right in RTL), +1 for next (right in LTR, left in RTL)
1812         computedDirection.value === "ltr" && direction === "left" || computedDirection.value === "rtl" && direction === "right" ? -1 : 1
1813       );
1814       const newIndex = startIndex + resolvedDirection;
1815       if (newIndex < 0) {
1816         return;
1817       }
1818       if (newIndex >= props.inputChips.length) {
1819         focusInput();
1820         return;
1821       }
1822       chipRefs[newIndex].focus();
1823     }
1824     function handleChipClick(clickedChip) {
1825       return __async(this, null, function* () {
1826         var _a;
1827         if (props.readonly || computedDisabled.value) {
1828           return;
1829         }
1830         addChip();
1831         yield nextTick();
1832         removeChip(clickedChip);
1833         computedInputValue.value = (_a = clickedChip.label) != null ? _a : clickedChip.value;
1834         focusInput();
1835       });
1836     }
1837     function handleChipRemove(chipToRemove, index, method) {
1838       currentChipToRemove.value = chipToRemove;
1839       statusMessageContent.value = chipRemovedMessage.value;
1840       if (method === "button") {
1841         focusInput();
1842       } else if (method === "Backspace") {
1843         const newIndex = index === 0 ? 1 : index - 1;
1844         if (newIndex < props.inputChips.length) {
1845           chipRefs[newIndex].focus();
1846         } else {
1847           focusInput();
1848         }
1849       } else if (method === "Delete") {
1850         const newIndex = index + 1;
1851         if (newIndex < props.inputChips.length) {
1852           chipRefs[newIndex].focus();
1853         } else {
1854           focusInput();
1855         }
1856       }
1857       removeChip(chipToRemove);
1858     }
1859     function onInputKeydown(e) {
1860       var _a, _b;
1861       const prevArrow = computedDirection.value === "rtl" ? "ArrowRight" : "ArrowLeft";
1862       switch (e.key) {
1863         case "Enter":
1864           if (computedInputValue.value.toString().length > 0 && allowArbitrary.value) {
1865             addChip();
1866             e.preventDefault();
1867             e.stopPropagation();
1868             return;
1869           }
1870           break;
1871         case "Escape":
1872           (_a = input.value) == null ? void 0 : _a.blur();
1873           e.preventDefault();
1874           e.stopPropagation();
1875           return;
1876         case "Backspace":
1877         case prevArrow:
1878           if (((_b = input.value) == null ? void 0 : _b.selectionStart) === 0 && input.value.selectionEnd === 0 && props.inputChips.length > 0) {
1879             chipRefs[props.inputChips.length - 1].focus();
1880             e.preventDefault();
1881             e.stopPropagation();
1882             return;
1883           }
1884           break;
1885       }
1886     }
1887     function onInputFocus() {
1888       isFocused.value = true;
1889     }
1890     function onInputBlur() {
1891       isFocused.value = false;
1892     }
1893     function onFocusOut(e) {
1894       var _a;
1895       if (!((_a = rootElement.value) == null ? void 0 : _a.contains(e.relatedTarget)) && allowArbitrary.value) {
1896         addChip();
1897       }
1898     }
1899     watch(toRef(props, "inputChips"), (newVal) => {
1900       const matchingChip = newVal.find((chip) => chip.value === computedInputValue.value);
1901       validatedStatus.value = matchingChip ? "error" : "default";
1902     });
1903     watch(computedInputValue, () => {
1904       if (validatedStatus.value === "error") {
1905         validatedStatus.value = "default";
1906       }
1907     });
1908     return {
1909       rootElement,
1910       chipsContainer,
1911       separateInputWrapper,
1912       input,
1913       computedInputValue,
1914       rootClasses,
1915       rootStyle,
1916       otherAttrs,
1917       assignChipTemplateRef,
1918       handleChipClick,
1919       handleChipRemove,
1920       moveChipFocus,
1921       onInputKeydown,
1922       focusInput,
1923       onInputFocus,
1924       onInputBlur,
1925       onFocusOut,
1926       computedDisabled,
1927       statusMessageContent
1928     };
1929   }
1930 });
1931 const _hoisted_1$n = {
1932   ref: "chipsContainer",
1933   class: "cdx-chip-input__chips",
1934   role: "listbox",
1935   "aria-orientation": "horizontal"
1936 };
1937 const _hoisted_2$e = ["readonly", "disabled"];
1938 const _hoisted_3$a = {
1939   key: 0,
1940   ref: "separateInputWrapper",
1941   class: "cdx-chip-input__separate-input"
1942 };
1943 const _hoisted_4$7 = ["readonly", "disabled"];
1944 const _hoisted_5$7 = {
1945   class: "cdx-chip-input__aria-status",
1946   role: "status",
1947   "aria-live": "polite"
1948 };
1949 function _sfc_render$p(_ctx, _cache, $props, $setup, $data, $options) {
1950   const _component_cdx_input_chip = resolveComponent("cdx-input-chip");
1951   return openBlock(), createElementBlock(
1952     "div",
1953     {
1954       ref: "rootElement",
1955       class: normalizeClass(["cdx-chip-input", _ctx.rootClasses]),
1956       style: normalizeStyle(_ctx.rootStyle),
1957       onClick: _cache[8] || (_cache[8] = ($event) => _ctx.disabled || _ctx.readonly ? null : _ctx.focusInput),
1958       onFocusout: _cache[9] || (_cache[9] = (...args) => _ctx.onFocusOut && _ctx.onFocusOut(...args))
1959     },
1960     [
1961       createElementVNode(
1962         "div",
1963         _hoisted_1$n,
1964         [
1965           (openBlock(true), createElementBlock(
1966             Fragment,
1967             null,
1968             renderList(_ctx.inputChips, (chip, index) => {
1969               return openBlock(), createBlock(_component_cdx_input_chip, {
1970                 key: chip.value,
1971                 ref_for: true,
1972                 ref: (ref2) => _ctx.assignChipTemplateRef(ref2, index),
1973                 class: "cdx-chip-input__item",
1974                 icon: chip.icon,
1975                 readonly: _ctx.readonly,
1976                 disabled: _ctx.computedDisabled,
1977                 onClickChip: ($event) => _ctx.handleChipClick(chip),
1978                 onRemoveChip: (method) => _ctx.handleChipRemove(chip, index, method),
1979                 onArrowLeft: ($event) => _ctx.moveChipFocus("left", index),
1980                 onArrowRight: ($event) => _ctx.moveChipFocus("right", index)
1981               }, {
1982                 default: withCtx(() => {
1983                   var _a;
1984                   return [
1985                     createTextVNode(
1986                       toDisplayString((_a = chip.label) != null ? _a : chip.value),
1987                       1
1988                       /* TEXT */
1989                     )
1990                   ];
1991                 }),
1992                 _: 2
1993                 /* DYNAMIC */
1994               }, 1032, ["icon", "readonly", "disabled", "onClickChip", "onRemoveChip", "onArrowLeft", "onArrowRight"]);
1995             }),
1996             128
1997             /* KEYED_FRAGMENT */
1998           )),
1999           !_ctx.separateInput ? withDirectives((openBlock(), createElementBlock("input", mergeProps({
2000             key: 0,
2001             ref: "input",
2002             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.computedInputValue = $event),
2003             class: "cdx-chip-input__input",
2004             readonly: _ctx.readonly,
2005             disabled: _ctx.computedDisabled
2006           }, _ctx.otherAttrs, {
2007             onBlur: _cache[1] || (_cache[1] = (...args) => _ctx.onInputBlur && _ctx.onInputBlur(...args)),
2008             onFocus: _cache[2] || (_cache[2] = (...args) => _ctx.onInputFocus && _ctx.onInputFocus(...args)),
2009             onKeydown: _cache[3] || (_cache[3] = (...args) => _ctx.onInputKeydown && _ctx.onInputKeydown(...args))
2010           }), null, 16, _hoisted_2$e)), [
2011             [vModelDynamic, _ctx.computedInputValue]
2012           ]) : createCommentVNode("v-if", true)
2013         ],
2014         512
2015         /* NEED_PATCH */
2016       ),
2017       _ctx.separateInput ? (openBlock(), createElementBlock(
2018         "div",
2019         _hoisted_3$a,
2020         [
2021           withDirectives(createElementVNode("input", mergeProps({
2022             ref: "input",
2023             "onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => _ctx.computedInputValue = $event),
2024             class: "cdx-chip-input__input",
2025             readonly: _ctx.readonly,
2026             disabled: _ctx.computedDisabled
2027           }, _ctx.otherAttrs, {
2028             onBlur: _cache[5] || (_cache[5] = (...args) => _ctx.onInputBlur && _ctx.onInputBlur(...args)),
2029             onFocus: _cache[6] || (_cache[6] = (...args) => _ctx.onInputFocus && _ctx.onInputFocus(...args)),
2030             onKeydown: _cache[7] || (_cache[7] = (...args) => _ctx.onInputKeydown && _ctx.onInputKeydown(...args))
2031           }), null, 16, _hoisted_4$7), [
2032             [vModelDynamic, _ctx.computedInputValue]
2033           ])
2034         ],
2035         512
2036         /* NEED_PATCH */
2037       )) : createCommentVNode("v-if", true),
2038       createElementVNode(
2039         "div",
2040         _hoisted_5$7,
2041         toDisplayString(_ctx.statusMessageContent),
2042         1
2043         /* TEXT */
2044       )
2045     ],
2046     38
2047     /* CLASS, STYLE, NEED_HYDRATION */
2048   );
2049 }
2050 const CdxChipInput = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["render", _sfc_render$p]]);
2051 function regExpEscape(value) {
2052   return value.replace(/([\\{}()|.?*+\-^$[\]])/g, "\\$1");
2053 }
2054 const COMBINING_MARK = "[̀-ͯ҃-҉֑-ׇֽֿׁׂׅׄؐ-ًؚ-ٰٟۖ-ۜ۟-۪ۤۧۨ-ܑۭܰ-݊ަ-ް߫-߽߳ࠖ-࠙ࠛ-ࠣࠥ-ࠧࠩ-࡙࠭-࡛࣓-ࣣ࣡-ःऺ-़ा-ॏ॑-ॗॢॣঁ-ঃ়া-ৄেৈো-্ৗৢৣ৾ਁ-ਃ਼ਾ-ੂੇੈੋ-੍ੑੰੱੵઁ-ઃ઼ા-ૅે-ૉો-્ૢૣૺ-૿ଁ-ଃ଼ା-ୄେୈୋ-୍ୖୗୢୣஂா-ூெ-ைொ-்ௗఀ-ఄా-ౄె-ైొ-్ౕౖౢౣಁ-ಃ಼ಾ-ೄೆ-ೈೊ-್ೕೖೢೣഀ-ഃ഻഼ാ-ൄെ-ൈൊ-്ൗൢൣංඃ්ා-ුූෘ-ෟෲෳัิ-ฺ็-๎ັິ-ູົຼ່-ໍ༹༘༙༵༷༾༿ཱ-྄྆྇ྍ-ྗྙ-ྼ࿆ါ-ှၖ-ၙၞ-ၠၢ-ၤၧ-ၭၱ-ၴႂ-ႍႏႚ-ႝ፝-፟ᜒ-᜔ᜲ-᜴ᝒᝓᝲᝳ឴-៓៝᠋-᠍ᢅᢆᢩᤠ-ᤫᤰ-᤻ᨗ-ᨛᩕ-ᩞ᩠-᩿᩼᪰-᪾ᬀ-ᬄ᬴-᭄᭫-᭳ᮀ-ᮂᮡ-ᮭ᯦-᯳ᰤ-᰷᳐-᳔᳒-᳨᳭ᳲ-᳴᳷-᳹᷀-᷹᷻-᷿⃐-⃰⳯-⵿⳱ⷠ-〪ⷿ-゙゚〯꙯-꙲ꙴ-꙽ꚞꚟ꛰꛱ꠂ꠆ꠋꠣ-ꠧꢀꢁꢴ-ꣅ꣠-꣱ꣿꤦ-꤭ꥇ-꥓ꦀ-ꦃ꦳-꧀ꧥꨩ-ꨶꩃꩌꩍꩻ-ꩽꪰꪲ-ꪴꪷꪸꪾ꪿꫁ꫫ-ꫯꫵ꫶ꯣ-ꯪ꯬꯭ﬞ︀-️︠-︯]";
2055 function splitStringAtMatch(query, title) {
2056   if (!query) {
2057     return [title, "", ""];
2058   }
2059   const sanitizedQuery = regExpEscape(query);
2060   const match = new RegExp(
2061     // Per https://www.regular-expressions.info/unicode.html, "any code point that is not a
2062     // combining mark can be followed by any number of combining marks." See also the
2063     // discussion in https://phabricator.wikimedia.org/T35242.
2064     sanitizedQuery + COMBINING_MARK + "*",
2065     "i"
2066   ).exec(title);
2067   if (!match || match.index === void 0) {
2068     return [title, "", ""];
2069   }
2070   const matchStartIndex = match.index;
2071   const matchEndIndex = matchStartIndex + match[0].length;
2072   const highlightedTitle = title.slice(matchStartIndex, matchEndIndex);
2073   const beforeHighlight = title.slice(0, matchStartIndex);
2074   const afterHighlight = title.slice(matchEndIndex, title.length);
2075   return [beforeHighlight, highlightedTitle, afterHighlight];
2076 }
2077 const stringHelpers = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
2078   __proto__: null,
2079   regExpEscape,
2080   splitStringAtMatch
2081 }, Symbol.toStringTag, { value: "Module" }));
2082 const _sfc_main$o = defineComponent({
2083   name: "CdxSearchResultTitle",
2084   props: {
2085     /**
2086      * Title text.
2087      */
2088     title: {
2089       type: String,
2090       required: true
2091     },
2092     /**
2093      * The current search query.
2094      */
2095     searchQuery: {
2096       type: String,
2097       default: ""
2098     }
2099   },
2100   setup: (props) => {
2101     const titleChunks = computed(
2102       () => splitStringAtMatch(props.searchQuery, String(props.title))
2103     );
2104     return {
2105       titleChunks
2106     };
2107   }
2108 });
2109 const _hoisted_1$m = { class: "cdx-search-result-title" };
2110 const _hoisted_2$d = { class: "cdx-search-result-title__match" };
2111 function _sfc_render$o(_ctx, _cache, $props, $setup, $data, $options) {
2112   return openBlock(), createElementBlock("span", _hoisted_1$m, [
2113     createElementVNode("bdi", null, [
2114       createTextVNode(
2115         toDisplayString(_ctx.titleChunks[0]),
2116         1
2117         /* TEXT */
2118       ),
2119       createElementVNode(
2120         "span",
2121         _hoisted_2$d,
2122         toDisplayString(_ctx.titleChunks[1]),
2123         1
2124         /* TEXT */
2125       ),
2126       createTextVNode(
2127         toDisplayString(_ctx.titleChunks[2]),
2128         1
2129         /* TEXT */
2130       )
2131     ])
2132   ]);
2133 }
2134 const CdxSearchResultTitle = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["render", _sfc_render$o]]);
2135 const _sfc_main$n = defineComponent({
2136   name: "CdxMenuItem",
2137   components: { CdxIcon, CdxThumbnail, CdxSearchResultTitle },
2138   props: {
2139     /**
2140      * ID for HTML `id` attribute.
2141      */
2142     id: {
2143       type: String,
2144       required: true
2145     },
2146     /**
2147      * The value provided to the parent menu component when this menu item is selected.
2148      */
2149     value: {
2150       type: [String, Number],
2151       required: true
2152     },
2153     /**
2154      * Whether the menu item is disabled.
2155      */
2156     disabled: {
2157       type: Boolean,
2158       default: false
2159     },
2160     /**
2161      * Whether this menu item is selected.
2162      */
2163     selected: {
2164       type: Boolean,
2165       default: false
2166     },
2167     /**
2168      * Whether this menu item is being pressed.
2169      */
2170     active: {
2171       type: Boolean,
2172       default: false
2173     },
2174     /**
2175      * Whether this menu item is visually highlighted due to hover or keyboard navigation.
2176      */
2177     highlighted: {
2178       type: Boolean,
2179       default: false
2180     },
2181     /**
2182      * Label for the menu item. If this isn't provided, the value will be displayed instead.
2183      */
2184     label: {
2185       type: String,
2186       default: ""
2187     },
2188     /**
2189      * Text that matches current search query. Only used for search results and will be
2190      * displayed after the label.
2191      */
2192     match: {
2193       type: String,
2194       default: ""
2195     },
2196     /**
2197      * Text that supports the label. Supporting text will appear next to the label in a more
2198      * subtle color.
2199      */
2200     supportingText: {
2201       type: String,
2202       default: ""
2203     },
2204     /**
2205      * URL for the menu item. If provided, the content of the menu item will be wrapped in an
2206      * anchor tag.
2207      */
2208     url: {
2209       type: String,
2210       default: ""
2211     },
2212     /**
2213      * Icon for the menu item.
2214      */
2215     icon: {
2216       type: [String, Object],
2217       default: ""
2218     },
2219     /**
2220      * Whether a thumbnail (or a placeholder icon) should be displayed.
2221      */
2222     showThumbnail: {
2223       type: Boolean,
2224       default: false
2225     },
2226     /**
2227      * Thumbnail for the menu item.
2228      */
2229     thumbnail: {
2230       type: [Object, null],
2231       default: null
2232     },
2233     /**
2234      * Description of the menu item.
2235      */
2236     description: {
2237       type: [String, null],
2238       default: ""
2239     },
2240     /**
2241      * The search query to be highlighted within the menu item's title.
2242      */
2243     searchQuery: {
2244       type: String,
2245       default: ""
2246     },
2247     /**
2248      * Whether to bold menu item labels.
2249      */
2250     boldLabel: {
2251       type: Boolean,
2252       default: false
2253     },
2254     /**
2255      * Whether to hide description text overflow via an ellipsis.
2256      */
2257     hideDescriptionOverflow: {
2258       type: Boolean,
2259       default: false
2260     },
2261     /**
2262      * Optional language codes for label, match, supporting text, and description.
2263      *
2264      * If included, that language code will be added as a `lang` attribute to the element
2265      * wrapping that text node.
2266      *
2267      * @default {}
2268      */
2269     language: {
2270       type: Object,
2271       default: () => ({})
2272     },
2273     /**
2274      * MenuItems inside a MenuButton can also support an "action" prop
2275      */
2276     action: {
2277       type: String,
2278       default: "default"
2279     },
2280     /**
2281      * Whether this menu is in multiselect mode.
2282      */
2283     multiselect: {
2284       type: Boolean,
2285       default: false
2286     }
2287   },
2288   emits: [
2289     /**
2290      * Emitted when the menu item becomes selected, active or highlighted in response to
2291      * user interaction. Handled in the Menu component.
2292      *
2293      * @property {MenuState} menuState State to change
2294      * @property {boolean} setState Whether to set that state to this menu item
2295      */
2296     "change"
2297   ],
2298   setup: (props, { emit }) => {
2299     const onMouseMove = () => {
2300       if (!props.highlighted) {
2301         emit("change", "highlighted", true);
2302       }
2303     };
2304     const onMouseLeave = () => {
2305       emit("change", "highlighted", false);
2306     };
2307     const onMouseDown = (e) => {
2308       if (e.button === 0) {
2309         emit("change", "active", true);
2310       }
2311     };
2312     const onClick = () => {
2313       emit("change", "selected", true);
2314     };
2315     const highlightQuery = computed(() => props.searchQuery.length > 0);
2316     const rootClasses = computed(() => ({
2317       "cdx-menu-item--selected": props.selected,
2318       // Only show the active visual state when the menu item is both active and
2319       // highlighted. This means, on mousedown -> mouseleave, the menu item is still
2320       // technically tracked by the menu as active, but will not appear active to the
2321       // user. This also means in the case of mousedown -> mouseleave -> mouseenter, the
2322       // menu item will appear active again, and on click (releasing the mouse button),
2323       // the item will be selected.
2324       "cdx-menu-item--active": props.active && props.highlighted,
2325       "cdx-menu-item--highlighted": props.highlighted,
2326       "cdx-menu-item--destructive": props.action && props.action === "destructive",
2327       "cdx-menu-item--enabled": !props.disabled,
2328       "cdx-menu-item--disabled": props.disabled,
2329       "cdx-menu-item--highlight-query": highlightQuery.value,
2330       "cdx-menu-item--bold-label": props.boldLabel,
2331       "cdx-menu-item--has-description": !!props.description,
2332       "cdx-menu-item--hide-description-overflow": props.hideDescriptionOverflow
2333     }));
2334     const contentTag = computed(() => props.url ? "a" : "span");
2335     const title = computed(() => props.label || String(props.value));
2336     return {
2337       onMouseMove,
2338       onMouseLeave,
2339       onMouseDown,
2340       onClick,
2341       highlightQuery,
2342       rootClasses,
2343       contentTag,
2344       title,
2345       cdxIconCheck: J3
2346     };
2347   }
2348 });
2349 const _hoisted_1$l = ["id", "aria-disabled", "aria-selected", "aria-checked"];
2350 const _hoisted_2$c = { class: "cdx-menu-item__text" };
2351 const _hoisted_3$9 = ["lang"];
2352 const _hoisted_4$6 = ["lang"];
2353 const _hoisted_5$6 = ["lang"];
2354 const _hoisted_6$6 = ["lang"];
2355 function _sfc_render$n(_ctx, _cache, $props, $setup, $data, $options) {
2356   const _component_cdx_thumbnail = resolveComponent("cdx-thumbnail");
2357   const _component_cdx_icon = resolveComponent("cdx-icon");
2358   const _component_cdx_search_result_title = resolveComponent("cdx-search-result-title");
2359   return openBlock(), createElementBlock("li", {
2360     id: _ctx.id,
2361     role: "option",
2362     class: normalizeClass(["cdx-menu-item", _ctx.rootClasses]),
2363     "aria-disabled": _ctx.disabled,
2364     "aria-selected": _ctx.selected && !_ctx.multiselect ? true : void 0,
2365     "aria-checked": _ctx.selected && _ctx.multiselect ? true : void 0,
2366     onMousemove: _cache[0] || (_cache[0] = (...args) => _ctx.onMouseMove && _ctx.onMouseMove(...args)),
2367     onMouseleave: _cache[1] || (_cache[1] = (...args) => _ctx.onMouseLeave && _ctx.onMouseLeave(...args)),
2368     onMousedown: _cache[2] || (_cache[2] = withModifiers((...args) => _ctx.onMouseDown && _ctx.onMouseDown(...args), ["prevent"])),
2369     onClick: _cache[3] || (_cache[3] = (...args) => _ctx.onClick && _ctx.onClick(...args))
2370   }, [
2371     renderSlot(_ctx.$slots, "default", {}, () => [
2372       (openBlock(), createBlock(resolveDynamicComponent(_ctx.contentTag), {
2373         href: _ctx.url ? _ctx.url : void 0,
2374         class: "cdx-menu-item__content"
2375       }, {
2376         default: withCtx(() => {
2377           var _a, _b, _c, _d, _e, _f;
2378           return [
2379             _ctx.showThumbnail ? (openBlock(), createBlock(_component_cdx_thumbnail, {
2380               key: 0,
2381               thumbnail: _ctx.thumbnail,
2382               class: "cdx-menu-item__thumbnail"
2383             }, null, 8, ["thumbnail"])) : _ctx.icon ? (openBlock(), createBlock(_component_cdx_icon, {
2384               key: 1,
2385               icon: _ctx.icon,
2386               class: "cdx-menu-item__icon"
2387             }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
2388             createElementVNode("span", _hoisted_2$c, [
2389               _ctx.highlightQuery ? (openBlock(), createBlock(_component_cdx_search_result_title, {
2390                 key: 0,
2391                 title: _ctx.title,
2392                 "search-query": _ctx.searchQuery,
2393                 lang: (_a = _ctx.language) == null ? void 0 : _a.label
2394               }, null, 8, ["title", "search-query", "lang"])) : (openBlock(), createElementBlock("span", {
2395                 key: 1,
2396                 class: "cdx-menu-item__text__label",
2397                 lang: (_b = _ctx.language) == null ? void 0 : _b.label
2398               }, [
2399                 createElementVNode(
2400                   "bdi",
2401                   null,
2402                   toDisplayString(_ctx.title),
2403                   1
2404                   /* TEXT */
2405                 )
2406               ], 8, _hoisted_3$9)),
2407               _ctx.match ? (openBlock(), createElementBlock(
2408                 Fragment,
2409                 { key: 2 },
2410                 [
2411                   createTextVNode(toDisplayString(" ") + " "),
2412                   _ctx.highlightQuery ? (openBlock(), createBlock(_component_cdx_search_result_title, {
2413                     key: 0,
2414                     title: _ctx.match,
2415                     "search-query": _ctx.searchQuery,
2416                     lang: (_c = _ctx.language) == null ? void 0 : _c.match
2417                   }, null, 8, ["title", "search-query", "lang"])) : (openBlock(), createElementBlock("span", {
2418                     key: 1,
2419                     class: "cdx-menu-item__text__match",
2420                     lang: (_d = _ctx.language) == null ? void 0 : _d.match
2421                   }, [
2422                     createElementVNode(
2423                       "bdi",
2424                       null,
2425                       toDisplayString(_ctx.match),
2426                       1
2427                       /* TEXT */
2428                     )
2429                   ], 8, _hoisted_4$6))
2430                 ],
2431                 64
2432                 /* STABLE_FRAGMENT */
2433               )) : createCommentVNode("v-if", true),
2434               _ctx.supportingText ? (openBlock(), createElementBlock(
2435                 Fragment,
2436                 { key: 3 },
2437                 [
2438                   createTextVNode(toDisplayString(" ") + " "),
2439                   createElementVNode("span", {
2440                     class: "cdx-menu-item__text__supporting-text",
2441                     lang: (_e = _ctx.language) == null ? void 0 : _e.supportingText
2442                   }, [
2443                     createElementVNode(
2444                       "bdi",
2445                       null,
2446                       toDisplayString(_ctx.supportingText),
2447                       1
2448                       /* TEXT */
2449                     )
2450                   ], 8, _hoisted_5$6)
2451                 ],
2452                 64
2453                 /* STABLE_FRAGMENT */
2454               )) : createCommentVNode("v-if", true),
2455               _ctx.description ? (openBlock(), createElementBlock("span", {
2456                 key: 4,
2457                 class: "cdx-menu-item__text__description",
2458                 lang: (_f = _ctx.language) == null ? void 0 : _f.description
2459               }, [
2460                 createElementVNode(
2461                   "bdi",
2462                   null,
2463                   toDisplayString(_ctx.description),
2464                   1
2465                   /* TEXT */
2466                 )
2467               ], 8, _hoisted_6$6)) : createCommentVNode("v-if", true)
2468             ]),
2469             _ctx.multiselect && _ctx.selected ? (openBlock(), createBlock(_component_cdx_icon, {
2470               key: 2,
2471               icon: _ctx.cdxIconCheck,
2472               size: "small",
2473               class: "cdx-menu-item__selected-icon"
2474             }, null, 8, ["icon"])) : createCommentVNode("v-if", true)
2475           ];
2476         }),
2477         _: 1
2478         /* STABLE */
2479       }, 8, ["href"]))
2480     ])
2481   ], 42, _hoisted_1$l);
2482 }
2483 const CdxMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$n]]);
2484 const _sfc_main$m = defineComponent({
2485   name: "CdxProgressBar",
2486   props: {
2487     /**
2488      * Whether this is the smaller, inline variant.
2489      */
2490     inline: {
2491       type: Boolean,
2492       default: false
2493     },
2494     /**
2495      * Whether the progress bar is disabled.
2496      */
2497     disabled: {
2498       type: Boolean,
2499       default: false
2500     }
2501   },
2502   setup(props, { attrs }) {
2503     useWarnOnce(
2504       () => !props.inline && !attrs["aria-label"] && !attrs["aria-hidden"],
2505       "CdxProgressBar: Progress bars require one of the following attribute, aria-label or aria-hidden. See documentation on https://doc.wikimedia.org/codex/latest/components/demos/progressbar.html"
2506     );
2507     const rootClasses = computed(() => ({
2508       "cdx-progress-bar--block": !props.inline,
2509       "cdx-progress-bar--inline": props.inline,
2510       "cdx-progress-bar--enabled": !props.disabled,
2511       "cdx-progress-bar--disabled": props.disabled
2512     }));
2513     const computedAriaHidden = computed(
2514       // Set `aria-hidden` to `true` only when `inline` prop is true.
2515       // Otherwise, don't set the attribute.
2516       () => props.inline ? "true" : void 0
2517     );
2518     return {
2519       rootClasses,
2520       computedAriaHidden
2521     };
2522   }
2523 });
2524 const _hoisted_1$k = ["aria-hidden", "aria-disabled"];
2525 const _hoisted_2$b = /* @__PURE__ */ createElementVNode(
2526   "div",
2527   { class: "cdx-progress-bar__bar" },
2528   null,
2529   -1
2530   /* HOISTED */
2531 );
2532 const _hoisted_3$8 = [
2533   _hoisted_2$b
2534 ];
2535 function _sfc_render$m(_ctx, _cache, $props, $setup, $data, $options) {
2536   return openBlock(), createElementBlock("div", {
2537     class: normalizeClass(["cdx-progress-bar", _ctx.rootClasses]),
2538     role: "progressbar",
2539     "aria-hidden": _ctx.computedAriaHidden,
2540     "aria-disabled": _ctx.disabled
2541   }, _hoisted_3$8, 10, _hoisted_1$k);
2542 }
2543 const CdxProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["render", _sfc_render$m]]);
2544 function useIntersectionObserver(templateRef, observerOptions) {
2545   const intersectionRef = ref(false);
2546   let mounted = false;
2547   if (typeof window !== "object") {
2548     return intersectionRef;
2549   }
2550   if (!("IntersectionObserver" in window && "IntersectionObserverEntry" in window && "intersectionRatio" in window.IntersectionObserverEntry.prototype)) {
2551     return intersectionRef;
2552   }
2553   const observer = new window.IntersectionObserver(
2554     (entries) => {
2555       const entry = entries[0];
2556       if (entry) {
2557         intersectionRef.value = entry.isIntersecting;
2558       }
2559     },
2560     observerOptions
2561   );
2562   onMounted(() => {
2563     mounted = true;
2564     if (templateRef.value) {
2565       observer.observe(templateRef.value);
2566     }
2567   });
2568   onUnmounted(() => {
2569     mounted = false;
2570     observer.disconnect();
2571   });
2572   watch(templateRef, (newElement) => {
2573     if (!mounted) {
2574       return;
2575     }
2576     observer.disconnect();
2577     intersectionRef.value = false;
2578     if (newElement) {
2579       observer.observe(newElement);
2580     }
2581   });
2582   return intersectionRef;
2583 }
2584 function selectedIsArray(selected) {
2585   return selected !== null && Array.isArray(selected);
2586 }
2587 function isMenuGroupData(menuEntry) {
2588   return "items" in menuEntry;
2589 }
2590 const _sfc_main$l = defineComponent({
2591   name: "CdxMenu",
2592   components: {
2593     CdxMenuItem,
2594     CdxIcon,
2595     CdxProgressBar
2596   },
2597   /**
2598    * Attributes, besides class and style, will be passed to the <ul> element.
2599    */
2600   inheritAttrs: false,
2601   props: {
2602     /**
2603      * Menu items and menu group definitions.
2604      *
2605      * Menu groups and individual menu items will be output in the order they appear here.
2606      */
2607     menuItems: {
2608       type: Array,
2609       required: true
2610     },
2611     /**
2612      * Interactive footer item.
2613      *
2614      * This is a special menu item which is pinned to the bottom of the menu. When scrolling is
2615      * enabled within the menu, the footer item will always be visible at the bottom of the
2616      * menu. When scrolling is not enabled, the footer item will simply appear as the last menu
2617      * item.
2618      *
2619      * The footer item is selectable, like other menu items.
2620      */
2621     footer: {
2622       type: Object,
2623       default: null
2624     },
2625     /**
2626      * Value(s) of the selected menu item(s). A single value for single-select, or an array of
2627      * values for multi-select.
2628      *
2629      * Must be bound with `v-model:selected`.
2630      *
2631      * The property should be initialized to `null` (for single-select) or an empty array (for
2632      * multi-select) rather than using a falsy value.
2633      */
2634     selected: {
2635       // eslint-disable-next-line max-len
2636       type: [String, Number, Array, null],
2637       required: true
2638     },
2639     /**
2640      * Whether the menu is expanded. Must be bound with `v-model:expanded`.
2641      */
2642     expanded: {
2643       type: Boolean,
2644       required: true
2645     },
2646     /**
2647      * Whether to display pending state indicators. Meant to indicate that new menu items are
2648      * being fetched or computed.
2649      *
2650      * When true, the menu will expand if not already expanded, and an inline progress bar will
2651      * display. If there are no menu items yet, a message can be displayed in the `pending`
2652      * slot, e.g. "Loading results".
2653      */
2654     showPending: {
2655       type: Boolean,
2656       default: false
2657     },
2658     /**
2659      * Limit the number of menu items to display before scrolling.
2660      *
2661      * Setting this prop to anything falsy will show all menu items.
2662      *
2663      * By default, all menu items are shown.
2664      */
2665     visibleItemLimit: {
2666       type: Number,
2667       default: null
2668     },
2669     /**
2670      * Whether menu item thumbnails (or a placeholder icon) should be displayed.
2671      */
2672     showThumbnail: {
2673       type: Boolean,
2674       default: false
2675     },
2676     /**
2677      * Whether to bold menu item labels.
2678      */
2679     boldLabel: {
2680       type: Boolean,
2681       default: false
2682     },
2683     /**
2684      * Whether to hide description text overflow via an ellipsis.
2685      */
2686     hideDescriptionOverflow: {
2687       type: Boolean,
2688       default: false
2689     },
2690     /**
2691      * The search query to be highlighted within the menu items' titles.
2692      */
2693     searchQuery: {
2694       type: String,
2695       default: ""
2696     },
2697     /**
2698      * Whether to show the `no-results` slot content.
2699      *
2700      * The Menu component automatically shows this slot when there is content in the
2701      * `no-results` slot and there are zero menu items. However, some components may need to
2702      * customize this behavior, e.g. to show the slot even when there is at least one menu item.
2703      * This prop can be used to override the default Menu behavior.
2704      *
2705      * Possible values:
2706      * `null` (default): the `no-results` slot will display only if there are zero menu items.
2707      * `true`: the `no-results` slot will display, regardless of number of menu items.
2708      * `false`: the `no-results` slot will not display, regardless of number of menu items.
2709      */
2710     showNoResultsSlot: {
2711       type: Boolean,
2712       default: null
2713     }
2714   },
2715   emits: [
2716     // Don't remove the spaces in the "string | number | null" type below; removing these
2717     // spaces causes the documentation to render the type as "union" instead.
2718     // Keep property descriptions on a single line or they will get cut off.
2719     /**
2720      * When the selected menu item changes.
2721      *
2722      * Property will be a single value or `null` in single-select mode, or an array of values or
2723      * an empty array in multiselect mode.
2724      *
2725      * @property {MenuItemValue | MenuItemValue[] | null} selectedValue selected value or values
2726      */
2727     "update:selected",
2728     /**
2729      * When the menu opens or closes.
2730      *
2731      * @property {boolean} newValue The new expanded state (true for open, false for closed)
2732      */
2733     "update:expanded",
2734     /**
2735      * When a menu item is clicked.
2736      *
2737      * Typically, components with menus will respond to the selected value change, but
2738      * occasionally, a component might want to react specifically when a menu item is clicked.
2739      *
2740      * @property {MenuItemDataWithId} menuItem The menu item that was clicked
2741      */
2742     "menu-item-click",
2743     /**
2744      * When a menu item is highlighted via keyboard navigation.
2745      *
2746      * @property {MenuItemDataWithId} highlightedMenuItem The menu item
2747      * was highlighted
2748      */
2749     "menu-item-keyboard-navigation",
2750     /**
2751      * When the user scrolls towards the bottom of the menu.
2752      *
2753      * If it is possible to add or load more menu items, then now would be a good moment
2754      * so that the user can experience infinite scrolling.
2755      */
2756     "load-more"
2757   ],
2758   expose: [
2759     "isExpanded",
2760     "clearActive",
2761     "getHighlightedMenuItem",
2762     "getHighlightedViaKeyboard",
2763     "getComputedMenuItems",
2764     "delegateKeyNavigation"
2765   ],
2766   setup(props, { emit, slots, attrs }) {
2767     const computedMenuEntries = computed(() => {
2768       const menuItemsWithFooter = props.footer && props.menuItems ? [...props.menuItems, props.footer] : props.menuItems;
2769       const getMenuItemWithId = (menuItem) => __spreadProps(__spreadValues({}, menuItem), {
2770         id: useGeneratedId("menu-item")
2771       });
2772       return menuItemsWithFooter.map((menuEntry) => {
2773         if (isMenuGroupData(menuEntry)) {
2774           return __spreadProps(__spreadValues({}, menuEntry), {
2775             id: useGeneratedId("menu-group"),
2776             items: menuEntry.items.map((subItem) => getMenuItemWithId(subItem))
2777           });
2778         } else {
2779           return getMenuItemWithId(menuEntry);
2780         }
2781       });
2782     });
2783     const computedMenuItems = computed(() => {
2784       const items = [];
2785       computedMenuEntries.value.forEach((menuEntry) => {
2786         if (isMenuGroupData(menuEntry)) {
2787           items.push(...menuEntry.items);
2788         } else {
2789           items.push(menuEntry);
2790         }
2791       });
2792       return items;
2793     });
2794     const computedShowNoResultsSlot = computed(() => {
2795       if (!slots["no-results"]) {
2796         return false;
2797       }
2798       if (props.showNoResultsSlot !== null) {
2799         return props.showNoResultsSlot;
2800       }
2801       return computedMenuItems.value.length === 0;
2802     });
2803     const highlightedMenuItem = ref(null);
2804     const highlightedViaKeyboard = ref(false);
2805     const activeMenuItem = ref(null);
2806     const ariaRelevant = "additions removals";
2807     let keyBuffer = "";
2808     let keyBufferTimeout = null;
2809     function clearKeyBuffer() {
2810       keyBuffer = "";
2811       if (keyBufferTimeout !== null) {
2812         clearTimeout(keyBufferTimeout);
2813         keyBufferTimeout = null;
2814       }
2815     }
2816     function resetKeyBufferTimeout() {
2817       if (keyBufferTimeout !== null) {
2818         clearTimeout(keyBufferTimeout);
2819       }
2820       keyBufferTimeout = setTimeout(clearKeyBuffer, 1500);
2821     }
2822     function findFirstSelectedMenuItem() {
2823       var _a;
2824       return (_a = computedMenuItems.value.find(
2825         (menuItem) => selectedIsArray(props.selected) ? props.selected.indexOf(menuItem.value) !== -1 : menuItem.value === props.selected
2826       )) != null ? _a : null;
2827     }
2828     const isMultiselect = computed(() => selectedIsArray(props.selected));
2829     function isItemSelected(value) {
2830       return selectedIsArray(props.selected) ? props.selected.indexOf(value) !== -1 : value === props.selected;
2831     }
2832     function updateSelected(value) {
2833       if (selectedIsArray(props.selected)) {
2834         const newSelected = props.selected.indexOf(value) === -1 ? props.selected.concat(value) : props.selected.filter((item) => item !== value);
2835         emit("update:selected", newSelected);
2836       } else {
2837         emit("update:selected", value);
2838       }
2839     }
2840     function handleMenuItemChange(menuState, menuItem) {
2841       if (menuItem && menuItem.disabled) {
2842         return;
2843       }
2844       switch (menuState) {
2845         case "selected":
2846           if (menuItem) {
2847             updateSelected(menuItem.value);
2848           }
2849           if (!isMultiselect.value) {
2850             emit("update:expanded", false);
2851           }
2852           activeMenuItem.value = null;
2853           break;
2854         case "highlighted":
2855           highlightedMenuItem.value = menuItem != null ? menuItem : null;
2856           highlightedViaKeyboard.value = false;
2857           break;
2858         case "highlightedViaKeyboard":
2859           highlightedMenuItem.value = menuItem != null ? menuItem : null;
2860           highlightedViaKeyboard.value = true;
2861           break;
2862         case "active":
2863           activeMenuItem.value = menuItem != null ? menuItem : null;
2864           break;
2865       }
2866     }
2867     const highlightedMenuItemIndex = computed(() => {
2868       if (highlightedMenuItem.value === null) {
2869         return;
2870       }
2871       return computedMenuItems.value.findIndex(
2872         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
2873         (menuItem) => menuItem.value === highlightedMenuItem.value.value
2874       );
2875     });
2876     function handleHighlightViaKeyboard(newHighlightedMenuItem) {
2877       if (!newHighlightedMenuItem) {
2878         return;
2879       }
2880       handleMenuItemChange("highlightedViaKeyboard", newHighlightedMenuItem);
2881       emit("menu-item-keyboard-navigation", newHighlightedMenuItem);
2882     }
2883     function highlightPrev(highlightedIndex) {
2884       var _a;
2885       const findPrevEnabled = (startIndex) => {
2886         for (let index = startIndex - 1; index >= 0; index--) {
2887           if (!computedMenuItems.value[index].disabled) {
2888             return computedMenuItems.value[index];
2889           }
2890         }
2891       };
2892       highlightedIndex = highlightedIndex != null ? highlightedIndex : computedMenuItems.value.length;
2893       const prev = (_a = findPrevEnabled(highlightedIndex)) != null ? _a : findPrevEnabled(computedMenuItems.value.length);
2894       handleHighlightViaKeyboard(prev);
2895     }
2896     function highlightNext(highlightedIndex) {
2897       var _a;
2898       const findNextEnabled = (startIndex) => computedMenuItems.value.find(
2899         (item, index) => !item.disabled && index > startIndex
2900       );
2901       highlightedIndex = highlightedIndex != null ? highlightedIndex : -1;
2902       const next = (_a = findNextEnabled(highlightedIndex)) != null ? _a : findNextEnabled(-1);
2903       handleHighlightViaKeyboard(next);
2904     }
2905     function handleCharacterNavigation(e) {
2906       if (e.key === "Clear") {
2907         clearKeyBuffer();
2908         return true;
2909       }
2910       if (e.key === "Backspace") {
2911         keyBuffer = keyBuffer.slice(0, -1);
2912         resetKeyBufferTimeout();
2913         return true;
2914       }
2915       if (e.key.length === 1 && !e.metaKey && !e.ctrlKey && !e.altKey) {
2916         if (!props.expanded) {
2917           emit("update:expanded", true);
2918         }
2919         if (e.key === " " && keyBuffer.length < 1) {
2920           return false;
2921         }
2922         keyBuffer += e.key.toLowerCase();
2923         const isRepeatedCharacter = keyBuffer.length > 1 && keyBuffer.split("").every((char) => char === keyBuffer[0]);
2924         let itemsToMatch = computedMenuItems.value;
2925         let stringToMatch = keyBuffer;
2926         if (isRepeatedCharacter && highlightedMenuItemIndex.value !== void 0) {
2927           itemsToMatch = itemsToMatch.slice(highlightedMenuItemIndex.value + 1).concat(itemsToMatch.slice(0, highlightedMenuItemIndex.value));
2928           stringToMatch = keyBuffer[0];
2929         }
2930         const matchingItem = itemsToMatch.find(
2931           (item) => {
2932             var _a;
2933             return !item.disabled && String((_a = item.label) != null ? _a : item.value).toLowerCase().startsWith(stringToMatch);
2934           }
2935         );
2936         if (matchingItem) {
2937           handleMenuItemChange("highlightedViaKeyboard", matchingItem);
2938           maybeScrollIntoView();
2939         }
2940         resetKeyBufferTimeout();
2941         return true;
2942       }
2943       return false;
2944     }
2945     function handleKeyNavigation(e, { prevent = true, characterNavigation = false } = {}) {
2946       if (characterNavigation) {
2947         if (handleCharacterNavigation(e)) {
2948           e.preventDefault();
2949           return true;
2950         }
2951         clearKeyBuffer();
2952       }
2953       function maybePrevent() {
2954         if (prevent) {
2955           e.preventDefault();
2956           e.stopPropagation();
2957         }
2958       }
2959       switch (e.key) {
2960         case "Enter":
2961         case " ":
2962           maybePrevent();
2963           if (props.expanded) {
2964             if (highlightedMenuItem.value && highlightedViaKeyboard.value) {
2965               updateSelected(highlightedMenuItem.value.value);
2966             }
2967             if (!isMultiselect.value) {
2968               emit("update:expanded", false);
2969             }
2970           } else {
2971             emit("update:expanded", true);
2972           }
2973           return true;
2974         case "Tab":
2975           if (props.expanded) {
2976             if (highlightedMenuItem.value && highlightedViaKeyboard.value && !isMultiselect.value) {
2977               updateSelected(highlightedMenuItem.value.value);
2978               emit("update:expanded", false);
2979             }
2980           }
2981           return true;
2982         case "ArrowUp":
2983           maybePrevent();
2984           if (props.expanded) {
2985             if (highlightedMenuItem.value === null) {
2986               handleMenuItemChange("highlightedViaKeyboard", findFirstSelectedMenuItem());
2987             }
2988             highlightPrev(highlightedMenuItemIndex.value);
2989           } else {
2990             emit("update:expanded", true);
2991           }
2992           maybeScrollIntoView();
2993           return true;
2994         case "ArrowDown":
2995           maybePrevent();
2996           if (props.expanded) {
2997             if (highlightedMenuItem.value === null) {
2998               handleMenuItemChange("highlightedViaKeyboard", findFirstSelectedMenuItem());
2999             }
3000             highlightNext(highlightedMenuItemIndex.value);
3001           } else {
3002             emit("update:expanded", true);
3003           }
3004           maybeScrollIntoView();
3005           return true;
3006         case "Home":
3007           maybePrevent();
3008           if (props.expanded) {
3009             if (highlightedMenuItem.value === null) {
3010               handleMenuItemChange("highlightedViaKeyboard", findFirstSelectedMenuItem());
3011             }
3012             highlightNext();
3013           } else {
3014             emit("update:expanded", true);
3015           }
3016           maybeScrollIntoView();
3017           return true;
3018         case "End":
3019           maybePrevent();
3020           if (props.expanded) {
3021             if (highlightedMenuItem.value === null) {
3022               handleMenuItemChange("highlightedViaKeyboard", findFirstSelectedMenuItem());
3023             }
3024             highlightPrev();
3025           } else {
3026             emit("update:expanded", true);
3027           }
3028           maybeScrollIntoView();
3029           return true;
3030         case "Escape":
3031           maybePrevent();
3032           emit("update:expanded", false);
3033           return true;
3034         default:
3035           return false;
3036       }
3037     }
3038     function onMouseUp() {
3039       handleMenuItemChange("active", null);
3040     }
3041     const menuItemElements = [];
3042     const loadMoreTriggerElement = ref(void 0);
3043     const isTriggerVisible = useIntersectionObserver(
3044       loadMoreTriggerElement,
3045       { threshold: 0.8 }
3046     );
3047     watch(isTriggerVisible, (value) => {
3048       if (value) {
3049         emit("load-more");
3050       }
3051     });
3052     function assignTemplateRef(templateRef, index) {
3053       if (templateRef) {
3054         menuItemElements[index] = templateRef.$el;
3055         const visibleItemLimit = props.visibleItemLimit;
3056         if (!visibleItemLimit || props.menuItems.length < visibleItemLimit) {
3057           return;
3058         }
3059         const loadMoreThreshold = Math.min(
3060           visibleItemLimit,
3061           Math.max(2, Math.floor(0.2 * props.menuItems.length))
3062         );
3063         if (index === props.menuItems.length - loadMoreThreshold) {
3064           loadMoreTriggerElement.value = templateRef.$el;
3065         }
3066       }
3067     }
3068     const menuListbox = ref();
3069     function maybeScrollIntoView() {
3070       const isListboxScrollable = menuListbox.value && menuListbox.value.scrollHeight > menuListbox.value.clientHeight;
3071       if (highlightedMenuItemIndex.value === void 0 || !isListboxScrollable) {
3072         return;
3073       }
3074       const scrollIndex = highlightedMenuItemIndex.value >= 0 ? highlightedMenuItemIndex.value : 0;
3075       menuItemElements[scrollIndex].scrollIntoView({
3076         behavior: "smooth",
3077         block: "nearest"
3078       });
3079     }
3080     const maxMenuHeight = ref(null);
3081     const footerHeight = ref(null);
3082     function resizeMenu() {
3083       return __async(this, null, function* () {
3084         yield nextTick();
3085         updateFooterHeight();
3086         updateMaxMenuHeight();
3087         yield nextTick();
3088         maybeScrollIntoView();
3089       });
3090     }
3091     function updateFooterHeight() {
3092       if (props.footer) {
3093         const footerElement = menuItemElements[menuItemElements.length - 1];
3094         footerHeight.value = footerElement.scrollHeight;
3095       } else {
3096         footerHeight.value = null;
3097       }
3098     }
3099     function updateMaxMenuHeight() {
3100       if (!props.visibleItemLimit || menuItemElements.length <= props.visibleItemLimit) {
3101         maxMenuHeight.value = null;
3102         return;
3103       }
3104       const firstMenuItemTop = menuItemElements[0].getBoundingClientRect().top;
3105       const firstHiddenMenuItemTop = menuItemElements[props.visibleItemLimit].getBoundingClientRect().top;
3106       maxMenuHeight.value = firstHiddenMenuItemTop - firstMenuItemTop + 2;
3107     }
3108     function getGroupWrapperClasses(group) {
3109       return {
3110         "cdx-menu__group-wrapper--hide-label": !!group.hideLabel
3111       };
3112     }
3113     function getMenuItemIndex(menuItem) {
3114       return computedMenuItems.value.indexOf(menuItem);
3115     }
3116     function getMenuItemBindings(menuItem) {
3117       var _a, _b;
3118       return __spreadValues({
3119         selected: isItemSelected(menuItem.value),
3120         active: menuItem.value === ((_a = activeMenuItem.value) == null ? void 0 : _a.value),
3121         highlighted: menuItem.value === ((_b = highlightedMenuItem.value) == null ? void 0 : _b.value),
3122         showThumbnail: props.showThumbnail,
3123         boldLabel: props.boldLabel,
3124         hideDescriptionOverflow: props.hideDescriptionOverflow,
3125         searchQuery: props.searchQuery,
3126         multiselect: isMultiselect.value
3127       }, menuItem);
3128     }
3129     function getMenuItemHandlers(menuItem) {
3130       return {
3131         change: (menuState, setState) => handleMenuItemChange(menuState, setState ? menuItem : null),
3132         click: () => emit("menu-item-click", menuItem)
3133       };
3134     }
3135     function getSlotBindings(menuItem) {
3136       var _a, _b;
3137       return {
3138         menuItem,
3139         active: menuItem.value === ((_a = activeMenuItem.value) == null ? void 0 : _a.value) && menuItem.value === ((_b = highlightedMenuItem.value) == null ? void 0 : _b.value)
3140       };
3141     }
3142     onMounted(() => {
3143       document.addEventListener("mouseup", onMouseUp);
3144     });
3145     onUnmounted(() => {
3146       document.removeEventListener("mouseup", onMouseUp);
3147     });
3148     watch(toRef(props, "expanded"), (newVal) => __async(this, null, function* () {
3149       if (newVal) {
3150         const selectedMenuItem = findFirstSelectedMenuItem();
3151         if (selectedMenuItem && !highlightedMenuItem.value) {
3152           handleMenuItemChange("highlighted", selectedMenuItem);
3153         }
3154         yield resizeMenu();
3155       } else {
3156         handleMenuItemChange("highlighted", null);
3157       }
3158     }));
3159     watch(toRef(props, "menuItems"), (newPropMenuItems) => __async(this, null, function* () {
3160       if (newPropMenuItems.length < menuItemElements.length) {
3161         menuItemElements.length = newPropMenuItems.length;
3162       }
3163       if (props.expanded) {
3164         yield resizeMenu();
3165       }
3166     }), { deep: true });
3167     const listBoxStyle = computed(() => ({
3168       "max-height": maxMenuHeight.value ? "".concat(maxMenuHeight.value, "px") : void 0,
3169       "margin-bottom": footerHeight.value ? "".concat(footerHeight.value, "px") : void 0
3170     }));
3171     const internalClasses = computed(() => ({
3172       "cdx-menu--has-footer": !!props.footer
3173     }));
3174     const {
3175       rootClasses,
3176       rootStyle,
3177       otherAttrs
3178     } = useSplitAttributes(attrs, internalClasses);
3179     return {
3180       listBoxStyle,
3181       rootClasses,
3182       rootStyle,
3183       otherAttrs,
3184       assignTemplateRef,
3185       computedMenuEntries,
3186       computedMenuItems,
3187       computedShowNoResultsSlot,
3188       highlightedMenuItem,
3189       highlightedViaKeyboard,
3190       handleMenuItemChange,
3191       handleKeyNavigation,
3192       ariaRelevant,
3193       isMultiselect,
3194       menuListbox,
3195       getGroupWrapperClasses,
3196       getMenuItemIndex,
3197       getMenuItemBindings,
3198       getMenuItemHandlers,
3199       getSlotBindings,
3200       isMenuGroupData
3201     };
3202   },
3203   // Public methods
3204   // These must be in the methods block, not in the setup function, otherwise their documentation
3205   // won't be picked up by vue-docgen
3206   methods: {
3207     /**
3208      * Returns whether the menu is expanded.
3209      *
3210      * @return {boolean}
3211      */
3212     isExpanded() {
3213       return this.expanded;
3214     },
3215     /**
3216      * Get the highlighted menu item, if any.
3217      *
3218      * The parent component should set `aria-activedescendant` to the `.id` property of the
3219      * object returned by this method. If this method returns null, `aria-activedescendant`
3220      * should not be set.
3221      *
3222      * @public
3223      * @return {MenuItemDataWithId|null} The highlighted menu item,
3224      *   or null if no item is highlighted or if the menu is closed.
3225      */
3226     getHighlightedMenuItem() {
3227       return this.expanded ? this.highlightedMenuItem : null;
3228     },
3229     /**
3230      * Get whether the last highlighted item was highlighted via the keyboard.
3231      *
3232      * @public
3233      * @return {boolean} Whether the last highlighted menu item was highlighted via keyboard.
3234      */
3235     getHighlightedViaKeyboard() {
3236       return this.highlightedViaKeyboard;
3237     },
3238     /**
3239      * Get the computed menu items with IDs (without menu groups).
3240      *
3241      * @public
3242      * @return {MenuItemDataWithId[]} List of current menu items without menu groups.
3243      */
3244     getComputedMenuItems() {
3245       return this.computedMenuItems;
3246     },
3247     /**
3248      * Ensure no menu item is active. This unsets the active item if there is one.
3249      *
3250      * @public
3251      */
3252     clearActive() {
3253       this.handleMenuItemChange("active", null);
3254     },
3255     /**
3256      * Handles all necessary keyboard navigation.
3257      *
3258      * The parent component should listen for keydown events on its focusable element,
3259      * and pass those events to this method. Events for arrow keys, tab and enter are handled
3260      * by this method. If a different key was pressed, this method will return false to indicate
3261      * that it didn't handle the event.
3262      *
3263      * @public
3264      * @param event {KeyboardEvent} Keydown event object
3265      * @param options
3266      * @param options.prevent {boolean} If false, do not call e.preventDefault() or
3267      *   e.stopPropagation()
3268      * @param options.characterNavigation {boolean}
3269      * @return Whether the event was handled
3270      */
3271     delegateKeyNavigation(event, { prevent = true, characterNavigation = false } = {}) {
3272       return this.handleKeyNavigation(event, { prevent, characterNavigation });
3273     }
3274   }
3275 });
3276 const _hoisted_1$j = ["aria-live", "aria-relevant", "aria-multiselectable"];
3277 const _hoisted_2$a = {
3278   key: 0,
3279   class: "cdx-menu__pending cdx-menu-item"
3280 };
3281 const _hoisted_3$7 = {
3282   key: 1,
3283   class: "cdx-menu__no-results cdx-menu-item",
3284   role: "option"
3285 };
3286 const _hoisted_4$5 = ["aria-labelledby", "aria-describedby"];
3287 const _hoisted_5$5 = { class: "cdx-menu__group__meta" };
3288 const _hoisted_6$5 = { class: "cdx-menu__group__meta__text" };
3289 const _hoisted_7$2 = ["id"];
3290 const _hoisted_8$1 = ["id"];
3291 function _sfc_render$l(_ctx, _cache, $props, $setup, $data, $options) {
3292   const _component_cdx_icon = resolveComponent("cdx-icon");
3293   const _component_cdx_menu_item = resolveComponent("cdx-menu-item");
3294   const _component_cdx_progress_bar = resolveComponent("cdx-progress-bar");
3295   return withDirectives((openBlock(), createElementBlock(
3296     "div",
3297     {
3298       class: normalizeClass(["cdx-menu", _ctx.rootClasses]),
3299       style: normalizeStyle(_ctx.rootStyle)
3300     },
3301     [
3302       createElementVNode("ul", mergeProps({
3303         ref: "menuListbox",
3304         class: "cdx-menu__listbox",
3305         role: "listbox",
3306         style: _ctx.listBoxStyle,
3307         "aria-live": _ctx.showPending ? "polite" : void 0,
3308         "aria-relevant": _ctx.showPending ? _ctx.ariaRelevant : void 0,
3309         "aria-multiselectable": _ctx.isMultiselect ? true : void 0
3310       }, _ctx.otherAttrs), [
3311         _ctx.showPending && _ctx.computedMenuItems.length === 0 && _ctx.$slots.pending ? (openBlock(), createElementBlock("li", _hoisted_2$a, [
3312           renderSlot(_ctx.$slots, "pending")
3313         ])) : createCommentVNode("v-if", true),
3314         _ctx.computedShowNoResultsSlot ? (openBlock(), createElementBlock("li", _hoisted_3$7, [
3315           renderSlot(_ctx.$slots, "no-results")
3316         ])) : createCommentVNode("v-if", true),
3317         (openBlock(true), createElementBlock(
3318           Fragment,
3319           null,
3320           renderList(_ctx.computedMenuEntries, (menuEntry, index) => {
3321             return openBlock(), createElementBlock(
3322               Fragment,
3323               { key: index },
3324               [
3325                 _ctx.isMenuGroupData(menuEntry) ? (openBlock(), createElementBlock(
3326                   "li",
3327                   {
3328                     key: 0,
3329                     class: normalizeClass(["cdx-menu__group-wrapper", _ctx.getGroupWrapperClasses(menuEntry)])
3330                   },
3331                   [
3332                     createElementVNode("ul", {
3333                       class: "cdx-menu__group",
3334                       role: "group",
3335                       "aria-labelledby": menuEntry.id + "-label",
3336                       "aria-describedby": menuEntry.id + "-description"
3337                     }, [
3338                       createElementVNode("span", _hoisted_5$5, [
3339                         menuEntry.icon ? (openBlock(), createBlock(_component_cdx_icon, {
3340                           key: 0,
3341                           class: "cdx-menu__group__icon",
3342                           icon: menuEntry.icon
3343                         }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
3344                         createElementVNode("span", _hoisted_6$5, [
3345                           createElementVNode("span", {
3346                             id: menuEntry.id + "-label",
3347                             class: "cdx-menu__group__label"
3348                           }, toDisplayString(menuEntry.label), 9, _hoisted_7$2),
3349                           menuEntry.description ? (openBlock(), createElementBlock("span", {
3350                             key: 0,
3351                             id: menuEntry.id + "-description",
3352                             class: "cdx-menu__group__description"
3353                           }, toDisplayString(menuEntry.description), 9, _hoisted_8$1)) : createCommentVNode("v-if", true)
3354                         ])
3355                       ]),
3356                       (openBlock(true), createElementBlock(
3357                         Fragment,
3358                         null,
3359                         renderList(menuEntry.items, (menuItemInGroup) => {
3360                           return openBlock(), createBlock(
3361                             _component_cdx_menu_item,
3362                             mergeProps({
3363                               key: menuItemInGroup.value,
3364                               ref_for: true,
3365                               ref: (ref2) => _ctx.assignTemplateRef(ref2, _ctx.getMenuItemIndex(menuItemInGroup)),
3366                               class: "cdx-menu__group__item"
3367                             }, _ctx.getMenuItemBindings(menuItemInGroup), toHandlers(_ctx.getMenuItemHandlers(menuItemInGroup))),
3368                             {
3369                               default: withCtx(() => [
3370                                 renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, _ctx.getSlotBindings(menuItemInGroup)))
3371                               ]),
3372                               _: 2
3373                               /* DYNAMIC */
3374                             },
3375                             1040
3376                             /* FULL_PROPS, DYNAMIC_SLOTS */
3377                           );
3378                         }),
3379                         128
3380                         /* KEYED_FRAGMENT */
3381                       ))
3382                     ], 8, _hoisted_4$5)
3383                   ],
3384                   2
3385                   /* CLASS */
3386                 )) : (openBlock(), createBlock(
3387                   _component_cdx_menu_item,
3388                   mergeProps({
3389                     key: 1,
3390                     ref_for: true,
3391                     ref: (ref2) => _ctx.assignTemplateRef(ref2, _ctx.getMenuItemIndex(menuEntry))
3392                   }, _ctx.getMenuItemBindings(menuEntry), toHandlers(_ctx.getMenuItemHandlers(menuEntry))),
3393                   {
3394                     default: withCtx(() => [
3395                       renderSlot(_ctx.$slots, "default", mergeProps({ ref_for: true }, _ctx.getSlotBindings(menuEntry)))
3396                     ]),
3397                     _: 2
3398                     /* DYNAMIC */
3399                   },
3400                   1040
3401                   /* FULL_PROPS, DYNAMIC_SLOTS */
3402                 ))
3403               ],
3404               64
3405               /* STABLE_FRAGMENT */
3406             );
3407           }),
3408           128
3409           /* KEYED_FRAGMENT */
3410         )),
3411         _ctx.showPending ? (openBlock(), createBlock(_component_cdx_progress_bar, {
3412           key: 2,
3413           class: "cdx-menu__progress-bar",
3414           inline: true
3415         })) : createCommentVNode("v-if", true)
3416       ], 16, _hoisted_1$j)
3417     ],
3418     6
3419     /* CLASS, STYLE */
3420   )), [
3421     [vShow, _ctx.expanded]
3422   ]);
3423 }
3424 const CdxMenu = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["render", _sfc_render$l]]);
3425 const textInputTypeValidator = makeStringTypeValidator(TextInputTypes);
3426 const statusValidator$8 = makeStringTypeValidator(ValidationStatusTypes);
3427 const _sfc_main$k = defineComponent({
3428   name: "CdxTextInput",
3429   components: { CdxIcon },
3430   /**
3431    * We want the input to inherit attributes, not the root element.
3432    */
3433   inheritAttrs: false,
3434   expose: [
3435     "focus",
3436     "blur",
3437     "checkValidity",
3438     "reportValidity",
3439     "setCustomValidity"
3440   ],
3441   props: {
3442     /**
3443      * Current value of the input.
3444      *
3445      * Provided by `v-model` binding in the parent component.
3446      */
3447     modelValue: {
3448       type: [String, Number],
3449       default: ""
3450     },
3451     /**
3452      * `type` attribute of the input.
3453      *
3454      * @values 'text', 'search', 'number', 'email', 'password', 'tel', 'url',
3455      * 'week', 'month', 'date', 'datetime-local', 'time'
3456      */
3457     inputType: {
3458       type: String,
3459       default: "text",
3460       validator: textInputTypeValidator
3461     },
3462     /**
3463      * `status` attribute of the input.
3464      */
3465     status: {
3466       type: String,
3467       default: "default",
3468       validator: statusValidator$8
3469     },
3470     /**
3471      * Whether the input is disabled.
3472      */
3473     disabled: {
3474       type: Boolean,
3475       default: false
3476     },
3477     /**
3478      * An icon at the start of the input element. Similar to a `::before` pseudo-element.
3479      */
3480     startIcon: {
3481       type: [String, Object],
3482       default: void 0
3483     },
3484     /**
3485      * An icon at the end of the input element. Similar to an `::after` pseudo-element.
3486      */
3487     endIcon: {
3488       type: [String, Object],
3489       default: void 0
3490     },
3491     /**
3492      * Add a clear button at the end of the input element.
3493      *
3494      * When the clear button is pressed, the input's value is set to an empty string.
3495      * The clear button is displayed when input text is present.
3496      */
3497     clearable: {
3498       type: Boolean,
3499       default: false
3500     }
3501   },
3502   emits: [
3503     /**
3504      * When the input value changes
3505      *
3506      * @property {string | number} modelValue The new model value
3507      */
3508     "update:modelValue",
3509     /**
3510      * When the user presses a key.
3511      *
3512      * This event is not emitted when the user presses the Home or End key (T314728),
3513      * but is emitted for Ctrl/Cmd+Home and Ctrl/Cmd+End.
3514      *
3515      * @property {KeyboardEvent}
3516      */
3517     "keydown",
3518     /**
3519      * When the input value changes via direct use of the input
3520      *
3521      * @property {InputEvent} event
3522      */
3523     "input",
3524     /**
3525      * When an input value change is committed by the user (e.g. on blur)
3526      *
3527      * @property {Event} event
3528      */
3529     "change",
3530     /**
3531      * When the input comes into focus
3532      *
3533      * @property {FocusEvent} event
3534      */
3535     "focus",
3536     /**
3537      * When the input loses focus
3538      *
3539      * @property {FocusEvent} event
3540      */
3541     "blur",
3542     /**
3543      * When the input value is cleared through the use of the clear button
3544      *
3545      * @property {MouseEvent} event
3546      */
3547     "clear",
3548     /**
3549      * When the input value is invalid according to the input's constraint
3550      * attributes (e.g. min, max, pattern). See:
3551      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event
3552      *
3553      * @property {Event} event
3554      */
3555     "invalid"
3556   ],
3557   setup(props, { emit, attrs }) {
3558     const idAttribute = attrs.id;
3559     const {
3560       computedDisabled,
3561       computedStatus,
3562       computedInputId
3563     } = useFieldData(
3564       toRef(props, "disabled"),
3565       toRef(props, "status"),
3566       idAttribute
3567     );
3568     const descriptionId = inject(FieldDescriptionIdKey, void 0);
3569     const wrappedModel = useModelWrapper(toRef(props, "modelValue"), emit);
3570     const isClearable = computed(
3571       () => props.clearable && !!wrappedModel.value && !computedDisabled.value
3572     );
3573     const internalClasses = computed(() => ({
3574       "cdx-text-input--has-start-icon": !!props.startIcon,
3575       "cdx-text-input--has-end-icon": !!props.endIcon,
3576       "cdx-text-input--clearable": isClearable.value,
3577       ["cdx-text-input--status-".concat(computedStatus.value)]: true
3578     }));
3579     const {
3580       rootClasses,
3581       rootStyle,
3582       otherAttrs
3583     } = useSplitAttributes(attrs, internalClasses);
3584     const otherAttrsMinusId = computed(() => {
3585       const _a = otherAttrs.value, { id } = _a, everythingElse = __objRest(_a, ["id"]);
3586       return everythingElse;
3587     });
3588     const inputClasses = computed(() => ({
3589       "cdx-text-input__input--has-value": !!wrappedModel.value
3590     }));
3591     const onClear = (event) => {
3592       wrappedModel.value = "";
3593       emit("clear", event);
3594     };
3595     const onKeydown = (event) => {
3596       if ((event.key === "Home" || event.key === "End") && !event.ctrlKey && !event.metaKey) {
3597         return;
3598       }
3599       emit("keydown", event);
3600     };
3601     const onInput = (event) => {
3602       emit("input", event);
3603     };
3604     const onChange = (event) => {
3605       emit("change", event);
3606     };
3607     const onFocus = (event) => {
3608       emit("focus", event);
3609     };
3610     const onBlur = (event) => {
3611       emit("blur", event);
3612     };
3613     const shouldPreventDefault = ref(true);
3614     const onInvalid = (event, doPreventDefault) => {
3615       if (doPreventDefault) {
3616         event.preventDefault();
3617       }
3618       emit("invalid", event);
3619       shouldPreventDefault.value = true;
3620     };
3621     return {
3622       computedInputId,
3623       descriptionId,
3624       wrappedModel,
3625       isClearable,
3626       rootClasses,
3627       rootStyle,
3628       otherAttrsMinusId,
3629       inputClasses,
3630       computedDisabled,
3631       onClear,
3632       onInput,
3633       onChange,
3634       onKeydown,
3635       onFocus,
3636       onBlur,
3637       onInvalid,
3638       shouldPreventDefault,
3639       cdxIconClear: j3
3640     };
3641   },
3642   // Public methods
3643   // These must be in the methods block, not in the setup function, otherwise their documentation
3644   // won't be picked up by vue-docgen
3645   methods: {
3646     /**
3647      * Focus the component's input element.
3648      *
3649      * @public
3650      */
3651     focus() {
3652       const input = this.$refs.input;
3653       input.focus();
3654     },
3655     /**
3656      * Blur the component's input element.
3657      *
3658      * @public
3659      */
3660     blur() {
3661       const input = this.$refs.input;
3662       input.blur();
3663     },
3664     /**
3665      * Check the validity of the input element according to its constraint attributes. Emits an
3666      * 'invalid' event if the input is invalid. See:
3667      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity
3668      *
3669      * @public
3670      * @return {boolean} Whether the input is valid
3671      */
3672     checkValidity() {
3673       const input = this.$refs.input;
3674       return input.checkValidity();
3675     },
3676     /**
3677      * Check the validity of the input element and report it as a pop up on the UI. See:
3678      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity
3679      *
3680      * @public
3681      * @return {boolean} Whether the input is valid
3682      */
3683     reportValidity() {
3684       this.shouldPreventDefault = false;
3685       const input = this.$refs.input;
3686       return input.reportValidity();
3687     },
3688     /**
3689      * Set custom validity and message for the input element. See:
3690      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setCustomValidity
3691      *
3692      * @public
3693      * @param {string} message The custom validation message to set
3694      */
3695     setCustomValidity(message) {
3696       const input = this.$refs.input;
3697       input.setCustomValidity(message);
3698     }
3699   }
3700 });
3701 const _hoisted_1$i = ["id", "type", "aria-describedby", "disabled"];
3702 function _sfc_render$k(_ctx, _cache, $props, $setup, $data, $options) {
3703   const _component_cdx_icon = resolveComponent("cdx-icon");
3704   return openBlock(), createElementBlock(
3705     "div",
3706     {
3707       class: normalizeClass(["cdx-text-input", _ctx.rootClasses]),
3708       style: normalizeStyle(_ctx.rootStyle)
3709     },
3710     [
3711       withDirectives(createElementVNode("input", mergeProps({
3712         id: _ctx.computedInputId,
3713         ref: "input",
3714         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.wrappedModel = $event),
3715         class: ["cdx-text-input__input", _ctx.inputClasses]
3716       }, _ctx.otherAttrsMinusId, {
3717         type: _ctx.inputType,
3718         "aria-describedby": _ctx.descriptionId,
3719         disabled: _ctx.computedDisabled,
3720         size: "1",
3721         onInput: _cache[1] || (_cache[1] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
3722         onChange: _cache[2] || (_cache[2] = (...args) => _ctx.onChange && _ctx.onChange(...args)),
3723         onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
3724         onBlur: _cache[4] || (_cache[4] = (...args) => _ctx.onBlur && _ctx.onBlur(...args)),
3725         onKeydown: _cache[5] || (_cache[5] = (...args) => _ctx.onKeydown && _ctx.onKeydown(...args)),
3726         onInvalid: _cache[6] || (_cache[6] = (e) => _ctx.onInvalid(e, _ctx.shouldPreventDefault))
3727       }), null, 16, _hoisted_1$i), [
3728         [vModelDynamic, _ctx.wrappedModel]
3729       ]),
3730       _ctx.startIcon ? (openBlock(), createBlock(_component_cdx_icon, {
3731         key: 0,
3732         icon: _ctx.startIcon,
3733         class: "cdx-text-input__icon-vue cdx-text-input__start-icon"
3734       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
3735       _ctx.endIcon ? (openBlock(), createBlock(_component_cdx_icon, {
3736         key: 1,
3737         icon: _ctx.endIcon,
3738         class: "cdx-text-input__icon-vue cdx-text-input__end-icon"
3739       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
3740       _ctx.isClearable ? (openBlock(), createBlock(_component_cdx_icon, {
3741         key: 2,
3742         icon: _ctx.cdxIconClear,
3743         class: "cdx-text-input__icon-vue cdx-text-input__clear-icon",
3744         onMousedown: _cache[7] || (_cache[7] = withModifiers(() => {
3745         }, ["prevent"])),
3746         onClick: _ctx.onClear
3747       }, null, 8, ["icon", "onClick"])) : createCommentVNode("v-if", true)
3748     ],
3749     6
3750     /* CLASS, STYLE */
3751   );
3752 }
3753 const CdxTextInput = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["render", _sfc_render$k]]);
3754 const sides = ["top", "right", "bottom", "left"];
3755 const min = Math.min;
3756 const max = Math.max;
3757 const round = Math.round;
3758 const floor = Math.floor;
3759 const createCoords = (v) => ({
3760   x: v,
3761   y: v
3762 });
3763 const oppositeSideMap = {
3764   left: "right",
3765   right: "left",
3766   bottom: "top",
3767   top: "bottom"
3768 };
3769 const oppositeAlignmentMap = {
3770   start: "end",
3771   end: "start"
3772 };
3773 function clamp(start, value, end) {
3774   return max(start, min(value, end));
3775 }
3776 function evaluate(value, param) {
3777   return typeof value === "function" ? value(param) : value;
3778 }
3779 function getSide(placement) {
3780   return placement.split("-")[0];
3781 }
3782 function getAlignment(placement) {
3783   return placement.split("-")[1];
3784 }
3785 function getOppositeAxis(axis) {
3786   return axis === "x" ? "y" : "x";
3787 }
3788 function getAxisLength(axis) {
3789   return axis === "y" ? "height" : "width";
3790 }
3791 function getSideAxis(placement) {
3792   return ["top", "bottom"].includes(getSide(placement)) ? "y" : "x";
3793 }
3794 function getAlignmentAxis(placement) {
3795   return getOppositeAxis(getSideAxis(placement));
3796 }
3797 function getAlignmentSides(placement, rects, rtl) {
3798   if (rtl === void 0) {
3799     rtl = false;
3800   }
3801   const alignment = getAlignment(placement);
3802   const alignmentAxis = getAlignmentAxis(placement);
3803   const length = getAxisLength(alignmentAxis);
3804   let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
3805   if (rects.reference[length] > rects.floating[length]) {
3806     mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
3807   }
3808   return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
3809 }
3810 function getExpandedPlacements(placement) {
3811   const oppositePlacement = getOppositePlacement(placement);
3812   return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
3813 }
3814 function getOppositeAlignmentPlacement(placement) {
3815   return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
3816 }
3817 function getSideList(side, isStart, rtl) {
3818   const lr = ["left", "right"];
3819   const rl = ["right", "left"];
3820   const tb = ["top", "bottom"];
3821   const bt = ["bottom", "top"];
3822   switch (side) {
3823     case "top":
3824     case "bottom":
3825       if (rtl)
3826         return isStart ? rl : lr;
3827       return isStart ? lr : rl;
3828     case "left":
3829     case "right":
3830       return isStart ? tb : bt;
3831     default:
3832       return [];
3833   }
3834 }
3835 function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
3836   const alignment = getAlignment(placement);
3837   let list = getSideList(getSide(placement), direction === "start", rtl);
3838   if (alignment) {
3839     list = list.map((side) => side + "-" + alignment);
3840     if (flipAlignment) {
3841       list = list.concat(list.map(getOppositeAlignmentPlacement));
3842     }
3843   }
3844   return list;
3845 }
3846 function getOppositePlacement(placement) {
3847   return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
3848 }
3849 function expandPaddingObject(padding) {
3850   return __spreadValues({
3851     top: 0,
3852     right: 0,
3853     bottom: 0,
3854     left: 0
3855   }, padding);
3856 }
3857 function getPaddingObject(padding) {
3858   return typeof padding !== "number" ? expandPaddingObject(padding) : {
3859     top: padding,
3860     right: padding,
3861     bottom: padding,
3862     left: padding
3863   };
3864 }
3865 function rectToClientRect(rect) {
3866   const {
3867     x,
3868     y,
3869     width,
3870     height
3871   } = rect;
3872   return {
3873     width,
3874     height,
3875     top: y,
3876     left: x,
3877     right: x + width,
3878     bottom: y + height,
3879     x,
3880     y
3881   };
3882 }
3883 function computeCoordsFromPlacement(_ref, placement, rtl) {
3884   let {
3885     reference,
3886     floating
3887   } = _ref;
3888   const sideAxis = getSideAxis(placement);
3889   const alignmentAxis = getAlignmentAxis(placement);
3890   const alignLength = getAxisLength(alignmentAxis);
3891   const side = getSide(placement);
3892   const isVertical = sideAxis === "y";
3893   const commonX = reference.x + reference.width / 2 - floating.width / 2;
3894   const commonY = reference.y + reference.height / 2 - floating.height / 2;
3895   const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
3896   let coords;
3897   switch (side) {
3898     case "top":
3899       coords = {
3900         x: commonX,
3901         y: reference.y - floating.height
3902       };
3903       break;
3904     case "bottom":
3905       coords = {
3906         x: commonX,
3907         y: reference.y + reference.height
3908       };
3909       break;
3910     case "right":
3911       coords = {
3912         x: reference.x + reference.width,
3913         y: commonY
3914       };
3915       break;
3916     case "left":
3917       coords = {
3918         x: reference.x - floating.width,
3919         y: commonY
3920       };
3921       break;
3922     default:
3923       coords = {
3924         x: reference.x,
3925         y: reference.y
3926       };
3927   }
3928   switch (getAlignment(placement)) {
3929     case "start":
3930       coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
3931       break;
3932     case "end":
3933       coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
3934       break;
3935   }
3936   return coords;
3937 }
3938 const computePosition$1 = (reference, floating, config) => __async(void 0, null, function* () {
3939   const {
3940     placement = "bottom",
3941     strategy = "absolute",
3942     middleware = [],
3943     platform: platform2
3944   } = config;
3945   const validMiddleware = middleware.filter(Boolean);
3946   const rtl = yield platform2.isRTL == null ? void 0 : platform2.isRTL(floating);
3947   let rects = yield platform2.getElementRects({
3948     reference,
3949     floating,
3950     strategy
3951   });
3952   let {
3953     x,
3954     y
3955   } = computeCoordsFromPlacement(rects, placement, rtl);
3956   let statefulPlacement = placement;
3957   let middlewareData = {};
3958   let resetCount = 0;
3959   for (let i = 0; i < validMiddleware.length; i++) {
3960     const {
3961       name,
3962       fn
3963     } = validMiddleware[i];
3964     const {
3965       x: nextX,
3966       y: nextY,
3967       data,
3968       reset
3969     } = yield fn({
3970       x,
3971       y,
3972       initialPlacement: placement,
3973       placement: statefulPlacement,
3974       strategy,
3975       middlewareData,
3976       rects,
3977       platform: platform2,
3978       elements: {
3979         reference,
3980         floating
3981       }
3982     });
3983     x = nextX != null ? nextX : x;
3984     y = nextY != null ? nextY : y;
3985     middlewareData = __spreadProps(__spreadValues({}, middlewareData), {
3986       [name]: __spreadValues(__spreadValues({}, middlewareData[name]), data)
3987     });
3988     if (reset && resetCount <= 50) {
3989       resetCount++;
3990       if (typeof reset === "object") {
3991         if (reset.placement) {
3992           statefulPlacement = reset.placement;
3993         }
3994         if (reset.rects) {
3995           rects = reset.rects === true ? yield platform2.getElementRects({
3996             reference,
3997             floating,
3998             strategy
3999           }) : reset.rects;
4000         }
4001         ({
4002           x,
4003           y
4004         } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
4005       }
4006       i = -1;
4007     }
4008   }
4009   return {
4010     x,
4011     y,
4012     placement: statefulPlacement,
4013     strategy,
4014     middlewareData
4015   };
4016 });
4017 function detectOverflow(state, options) {
4018   return __async(this, null, function* () {
4019     var _await$platform$isEle;
4020     if (options === void 0) {
4021       options = {};
4022     }
4023     const {
4024       x,
4025       y,
4026       platform: platform2,
4027       rects,
4028       elements,
4029       strategy
4030     } = state;
4031     const {
4032       boundary = "clippingAncestors",
4033       rootBoundary = "viewport",
4034       elementContext = "floating",
4035       altBoundary = false,
4036       padding = 0
4037     } = evaluate(options, state);
4038     const paddingObject = getPaddingObject(padding);
4039     const altContext = elementContext === "floating" ? "reference" : "floating";
4040     const element = elements[altBoundary ? altContext : elementContext];
4041     const clippingClientRect = rectToClientRect(yield platform2.getClippingRect({
4042       element: ((_await$platform$isEle = yield platform2.isElement == null ? void 0 : platform2.isElement(element)) != null ? _await$platform$isEle : true) ? element : element.contextElement || (yield platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
4043       boundary,
4044       rootBoundary,
4045       strategy
4046     }));
4047     const rect = elementContext === "floating" ? {
4048       x,
4049       y,
4050       width: rects.floating.width,
4051       height: rects.floating.height
4052     } : rects.reference;
4053     const offsetParent = yield platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating);
4054     const offsetScale = (yield platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? (yield platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
4055       x: 1,
4056       y: 1
4057     } : {
4058       x: 1,
4059       y: 1
4060     };
4061     const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? yield platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
4062       elements,
4063       rect,
4064       offsetParent,
4065       strategy
4066     }) : rect);
4067     return {
4068       top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
4069       bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
4070       left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
4071       right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
4072     };
4073   });
4074 }
4075 const flip$1 = function(options) {
4076   if (options === void 0) {
4077     options = {};
4078   }
4079   return {
4080     name: "flip",
4081     options,
4082     fn(state) {
4083       return __async(this, null, function* () {
4084         var _middlewareData$arrow, _middlewareData$flip;
4085         const {
4086           placement,
4087           middlewareData,
4088           rects,
4089           initialPlacement,
4090           platform: platform2,
4091           elements
4092         } = state;
4093         const _a2 = evaluate(options, state), {
4094           mainAxis: checkMainAxis = true,
4095           crossAxis: checkCrossAxis = true,
4096           fallbackPlacements: specifiedFallbackPlacements,
4097           fallbackStrategy = "bestFit",
4098           fallbackAxisSideDirection = "none",
4099           flipAlignment = true
4100         } = _a2, detectOverflowOptions = __objRest(_a2, [
4101           "mainAxis",
4102           "crossAxis",
4103           "fallbackPlacements",
4104           "fallbackStrategy",
4105           "fallbackAxisSideDirection",
4106           "flipAlignment"
4107         ]);
4108         if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
4109           return {};
4110         }
4111         const side = getSide(placement);
4112         const initialSideAxis = getSideAxis(initialPlacement);
4113         const isBasePlacement = getSide(initialPlacement) === initialPlacement;
4114         const rtl = yield platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating);
4115         const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
4116         const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
4117         if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
4118           fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
4119         }
4120         const placements = [initialPlacement, ...fallbackPlacements];
4121         const overflow = yield detectOverflow(state, detectOverflowOptions);
4122         const overflows = [];
4123         let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
4124         if (checkMainAxis) {
4125           overflows.push(overflow[side]);
4126         }
4127         if (checkCrossAxis) {
4128           const sides2 = getAlignmentSides(placement, rects, rtl);
4129           overflows.push(overflow[sides2[0]], overflow[sides2[1]]);
4130         }
4131         overflowsData = [...overflowsData, {
4132           placement,
4133           overflows
4134         }];
4135         if (!overflows.every((side2) => side2 <= 0)) {
4136           var _middlewareData$flip2, _overflowsData$filter;
4137           const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
4138           const nextPlacement = placements[nextIndex];
4139           if (nextPlacement) {
4140             return {
4141               data: {
4142                 index: nextIndex,
4143                 overflows: overflowsData
4144               },
4145               reset: {
4146                 placement: nextPlacement
4147               }
4148             };
4149           }
4150           let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
4151           if (!resetPlacement) {
4152             switch (fallbackStrategy) {
4153               case "bestFit": {
4154                 var _overflowsData$filter2;
4155                 const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
4156                   if (hasFallbackAxisSideDirection) {
4157                     const currentSideAxis = getSideAxis(d.placement);
4158                     return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
4159                     // reading directions favoring greater width.
4160                     currentSideAxis === "y";
4161                   }
4162                   return true;
4163                 }).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
4164                 if (placement2) {
4165                   resetPlacement = placement2;
4166                 }
4167                 break;
4168               }
4169               case "initialPlacement":
4170                 resetPlacement = initialPlacement;
4171                 break;
4172             }
4173           }
4174           if (placement !== resetPlacement) {
4175             return {
4176               reset: {
4177                 placement: resetPlacement
4178               }
4179             };
4180           }
4181         }
4182         return {};
4183       });
4184     }
4185   };
4186 };
4187 function getSideOffsets(overflow, rect) {
4188   return {
4189     top: overflow.top - rect.height,
4190     right: overflow.right - rect.width,
4191     bottom: overflow.bottom - rect.height,
4192     left: overflow.left - rect.width
4193   };
4194 }
4195 function isAnySideFullyClipped(overflow) {
4196   return sides.some((side) => overflow[side] >= 0);
4197 }
4198 const hide$1 = function(options) {
4199   if (options === void 0) {
4200     options = {};
4201   }
4202   return {
4203     name: "hide",
4204     options,
4205     fn(state) {
4206       return __async(this, null, function* () {
4207         const {
4208           rects
4209         } = state;
4210         const _a2 = evaluate(options, state), {
4211           strategy = "referenceHidden"
4212         } = _a2, detectOverflowOptions = __objRest(_a2, [
4213           "strategy"
4214         ]);
4215         switch (strategy) {
4216           case "referenceHidden": {
4217             const overflow = yield detectOverflow(state, __spreadProps(__spreadValues({}, detectOverflowOptions), {
4218               elementContext: "reference"
4219             }));
4220             const offsets = getSideOffsets(overflow, rects.reference);
4221             return {
4222               data: {
4223                 referenceHiddenOffsets: offsets,
4224                 referenceHidden: isAnySideFullyClipped(offsets)
4225               }
4226             };
4227           }
4228           case "escaped": {
4229             const overflow = yield detectOverflow(state, __spreadProps(__spreadValues({}, detectOverflowOptions), {
4230               altBoundary: true
4231             }));
4232             const offsets = getSideOffsets(overflow, rects.floating);
4233             return {
4234               data: {
4235                 escapedOffsets: offsets,
4236                 escaped: isAnySideFullyClipped(offsets)
4237               }
4238             };
4239           }
4240           default: {
4241             return {};
4242           }
4243         }
4244       });
4245     }
4246   };
4247 };
4248 function convertValueToCoords(state, options) {
4249   return __async(this, null, function* () {
4250     const {
4251       placement,
4252       platform: platform2,
4253       elements
4254     } = state;
4255     const rtl = yield platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating);
4256     const side = getSide(placement);
4257     const alignment = getAlignment(placement);
4258     const isVertical = getSideAxis(placement) === "y";
4259     const mainAxisMulti = ["left", "top"].includes(side) ? -1 : 1;
4260     const crossAxisMulti = rtl && isVertical ? -1 : 1;
4261     const rawValue = evaluate(options, state);
4262     let {
4263       mainAxis,
4264       crossAxis,
4265       alignmentAxis
4266     } = typeof rawValue === "number" ? {
4267       mainAxis: rawValue,
4268       crossAxis: 0,
4269       alignmentAxis: null
4270     } : {
4271       mainAxis: rawValue.mainAxis || 0,
4272       crossAxis: rawValue.crossAxis || 0,
4273       alignmentAxis: rawValue.alignmentAxis
4274     };
4275     if (alignment && typeof alignmentAxis === "number") {
4276       crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
4277     }
4278     return isVertical ? {
4279       x: crossAxis * crossAxisMulti,
4280       y: mainAxis * mainAxisMulti
4281     } : {
4282       x: mainAxis * mainAxisMulti,
4283       y: crossAxis * crossAxisMulti
4284     };
4285   });
4286 }
4287 const offset$1 = function(options) {
4288   if (options === void 0) {
4289     options = 0;
4290   }
4291   return {
4292     name: "offset",
4293     options,
4294     fn(state) {
4295       return __async(this, null, function* () {
4296         var _middlewareData$offse, _middlewareData$arrow;
4297         const {
4298           x,
4299           y,
4300           placement,
4301           middlewareData
4302         } = state;
4303         const diffCoords = yield convertValueToCoords(state, options);
4304         if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
4305           return {};
4306         }
4307         return {
4308           x: x + diffCoords.x,
4309           y: y + diffCoords.y,
4310           data: __spreadProps(__spreadValues({}, diffCoords), {
4311             placement
4312           })
4313         };
4314       });
4315     }
4316   };
4317 };
4318 const shift$1 = function(options) {
4319   if (options === void 0) {
4320     options = {};
4321   }
4322   return {
4323     name: "shift",
4324     options,
4325     fn(state) {
4326       return __async(this, null, function* () {
4327         const {
4328           x,
4329           y,
4330           placement
4331         } = state;
4332         const _a2 = evaluate(options, state), {
4333           mainAxis: checkMainAxis = true,
4334           crossAxis: checkCrossAxis = false,
4335           limiter = {
4336             fn: (_ref) => {
4337               let {
4338                 x: x2,
4339                 y: y2
4340               } = _ref;
4341               return {
4342                 x: x2,
4343                 y: y2
4344               };
4345             }
4346           }
4347         } = _a2, detectOverflowOptions = __objRest(_a2, [
4348           "mainAxis",
4349           "crossAxis",
4350           "limiter"
4351         ]);
4352         const coords = {
4353           x,
4354           y
4355         };
4356         const overflow = yield detectOverflow(state, detectOverflowOptions);
4357         const crossAxis = getSideAxis(getSide(placement));
4358         const mainAxis = getOppositeAxis(crossAxis);
4359         let mainAxisCoord = coords[mainAxis];
4360         let crossAxisCoord = coords[crossAxis];
4361         if (checkMainAxis) {
4362           const minSide = mainAxis === "y" ? "top" : "left";
4363           const maxSide = mainAxis === "y" ? "bottom" : "right";
4364           const min2 = mainAxisCoord + overflow[minSide];
4365           const max2 = mainAxisCoord - overflow[maxSide];
4366           mainAxisCoord = clamp(min2, mainAxisCoord, max2);
4367         }
4368         if (checkCrossAxis) {
4369           const minSide = crossAxis === "y" ? "top" : "left";
4370           const maxSide = crossAxis === "y" ? "bottom" : "right";
4371           const min2 = crossAxisCoord + overflow[minSide];
4372           const max2 = crossAxisCoord - overflow[maxSide];
4373           crossAxisCoord = clamp(min2, crossAxisCoord, max2);
4374         }
4375         const limitedCoords = limiter.fn(__spreadProps(__spreadValues({}, state), {
4376           [mainAxis]: mainAxisCoord,
4377           [crossAxis]: crossAxisCoord
4378         }));
4379         return __spreadProps(__spreadValues({}, limitedCoords), {
4380           data: {
4381             x: limitedCoords.x - x,
4382             y: limitedCoords.y - y,
4383             enabled: {
4384               [mainAxis]: checkMainAxis,
4385               [crossAxis]: checkCrossAxis
4386             }
4387           }
4388         });
4389       });
4390     }
4391   };
4392 };
4393 const size$1 = function(options) {
4394   if (options === void 0) {
4395     options = {};
4396   }
4397   return {
4398     name: "size",
4399     options,
4400     fn(state) {
4401       return __async(this, null, function* () {
4402         var _state$middlewareData, _state$middlewareData2;
4403         const {
4404           placement,
4405           rects,
4406           platform: platform2,
4407           elements
4408         } = state;
4409         const _a2 = evaluate(options, state), {
4410           apply = () => {
4411           }
4412         } = _a2, detectOverflowOptions = __objRest(_a2, [
4413           "apply"
4414         ]);
4415         const overflow = yield detectOverflow(state, detectOverflowOptions);
4416         const side = getSide(placement);
4417         const alignment = getAlignment(placement);
4418         const isYAxis = getSideAxis(placement) === "y";
4419         const {
4420           width,
4421           height
4422         } = rects.floating;
4423         let heightSide;
4424         let widthSide;
4425         if (side === "top" || side === "bottom") {
4426           heightSide = side;
4427           widthSide = alignment === ((yield platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating)) ? "start" : "end") ? "left" : "right";
4428         } else {
4429           widthSide = side;
4430           heightSide = alignment === "end" ? "top" : "bottom";
4431         }
4432         const maximumClippingHeight = height - overflow.top - overflow.bottom;
4433         const maximumClippingWidth = width - overflow.left - overflow.right;
4434         const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
4435         const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
4436         const noShift = !state.middlewareData.shift;
4437         let availableHeight = overflowAvailableHeight;
4438         let availableWidth = overflowAvailableWidth;
4439         if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
4440           availableWidth = maximumClippingWidth;
4441         }
4442         if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
4443           availableHeight = maximumClippingHeight;
4444         }
4445         if (noShift && !alignment) {
4446           const xMin = max(overflow.left, 0);
4447           const xMax = max(overflow.right, 0);
4448           const yMin = max(overflow.top, 0);
4449           const yMax = max(overflow.bottom, 0);
4450           if (isYAxis) {
4451             availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
4452           } else {
4453             availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
4454           }
4455         }
4456         yield apply(__spreadProps(__spreadValues({}, state), {
4457           availableWidth,
4458           availableHeight
4459         }));
4460         const nextDimensions = yield platform2.getDimensions(elements.floating);
4461         if (width !== nextDimensions.width || height !== nextDimensions.height) {
4462           return {
4463             reset: {
4464               rects: true
4465             }
4466           };
4467         }
4468         return {};
4469       });
4470     }
4471   };
4472 };
4473 function hasWindow() {
4474   return typeof window !== "undefined";
4475 }
4476 function getNodeName(node) {
4477   if (isNode(node)) {
4478     return (node.nodeName || "").toLowerCase();
4479   }
4480   return "#document";
4481 }
4482 function getWindow(node) {
4483   var _node$ownerDocument;
4484   return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
4485 }
4486 function getDocumentElement(node) {
4487   var _ref;
4488   return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
4489 }
4490 function isNode(value) {
4491   if (!hasWindow()) {
4492     return false;
4493   }
4494   return value instanceof Node || value instanceof getWindow(value).Node;
4495 }
4496 function isElement(value) {
4497   if (!hasWindow()) {
4498     return false;
4499   }
4500   return value instanceof Element || value instanceof getWindow(value).Element;
4501 }
4502 function isHTMLElement(value) {
4503   if (!hasWindow()) {
4504     return false;
4505   }
4506   return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
4507 }
4508 function isShadowRoot(value) {
4509   if (!hasWindow() || typeof ShadowRoot === "undefined") {
4510     return false;
4511   }
4512   return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
4513 }
4514 function isOverflowElement(element) {
4515   const {
4516     overflow,
4517     overflowX,
4518     overflowY,
4519     display
4520   } = getComputedStyle(element);
4521   return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !["inline", "contents"].includes(display);
4522 }
4523 function isTableElement(element) {
4524   return ["table", "td", "th"].includes(getNodeName(element));
4525 }
4526 function isTopLayer(element) {
4527   return [":popover-open", ":modal"].some((selector) => {
4528     try {
4529       return element.matches(selector);
4530     } catch (e) {
4531       return false;
4532     }
4533   });
4534 }
4535 function isContainingBlock(elementOrCss) {
4536   const webkit = isWebKit();
4537   const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
4538   return css.transform !== "none" || css.perspective !== "none" || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || ["transform", "perspective", "filter"].some((value) => (css.willChange || "").includes(value)) || ["paint", "layout", "strict", "content"].some((value) => (css.contain || "").includes(value));
4539 }
4540 function getContainingBlock(element) {
4541   let currentNode = getParentNode(element);
4542   while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
4543     if (isContainingBlock(currentNode)) {
4544       return currentNode;
4545     } else if (isTopLayer(currentNode)) {
4546       return null;
4547     }
4548     currentNode = getParentNode(currentNode);
4549   }
4550   return null;
4551 }
4552 function isWebKit() {
4553   if (typeof CSS === "undefined" || !CSS.supports)
4554     return false;
4555   return CSS.supports("-webkit-backdrop-filter", "none");
4556 }
4557 function isLastTraversableNode(node) {
4558   return ["html", "body", "#document"].includes(getNodeName(node));
4559 }
4560 function getComputedStyle(element) {
4561   return getWindow(element).getComputedStyle(element);
4562 }
4563 function getNodeScroll(element) {
4564   if (isElement(element)) {
4565     return {
4566       scrollLeft: element.scrollLeft,
4567       scrollTop: element.scrollTop
4568     };
4569   }
4570   return {
4571     scrollLeft: element.scrollX,
4572     scrollTop: element.scrollY
4573   };
4574 }
4575 function getParentNode(node) {
4576   if (getNodeName(node) === "html") {
4577     return node;
4578   }
4579   const result = (
4580     // Step into the shadow DOM of the parent of a slotted node.
4581     node.assignedSlot || // DOM Element detected.
4582     node.parentNode || // ShadowRoot detected.
4583     isShadowRoot(node) && node.host || // Fallback.
4584     getDocumentElement(node)
4585   );
4586   return isShadowRoot(result) ? result.host : result;
4587 }
4588 function getNearestOverflowAncestor(node) {
4589   const parentNode = getParentNode(node);
4590   if (isLastTraversableNode(parentNode)) {
4591     return node.ownerDocument ? node.ownerDocument.body : node.body;
4592   }
4593   if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
4594     return parentNode;
4595   }
4596   return getNearestOverflowAncestor(parentNode);
4597 }
4598 function getOverflowAncestors(node, list, traverseIframes) {
4599   var _node$ownerDocument2;
4600   if (list === void 0) {
4601     list = [];
4602   }
4603   if (traverseIframes === void 0) {
4604     traverseIframes = true;
4605   }
4606   const scrollableAncestor = getNearestOverflowAncestor(node);
4607   const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
4608   const win = getWindow(scrollableAncestor);
4609   if (isBody) {
4610     const frameElement = getFrameElement(win);
4611     return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
4612   }
4613   return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
4614 }
4615 function getFrameElement(win) {
4616   return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
4617 }
4618 function getCssDimensions(element) {
4619   const css = getComputedStyle(element);
4620   let width = parseFloat(css.width) || 0;
4621   let height = parseFloat(css.height) || 0;
4622   const hasOffset = isHTMLElement(element);
4623   const offsetWidth = hasOffset ? element.offsetWidth : width;
4624   const offsetHeight = hasOffset ? element.offsetHeight : height;
4625   const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
4626   if (shouldFallback) {
4627     width = offsetWidth;
4628     height = offsetHeight;
4629   }
4630   return {
4631     width,
4632     height,
4633     $: shouldFallback
4634   };
4635 }
4636 function unwrapElement$2(element) {
4637   return !isElement(element) ? element.contextElement : element;
4638 }
4639 function getScale(element) {
4640   const domElement = unwrapElement$2(element);
4641   if (!isHTMLElement(domElement)) {
4642     return createCoords(1);
4643   }
4644   const rect = domElement.getBoundingClientRect();
4645   const {
4646     width,
4647     height,
4648     $
4649   } = getCssDimensions(domElement);
4650   let x = ($ ? round(rect.width) : rect.width) / width;
4651   let y = ($ ? round(rect.height) : rect.height) / height;
4652   if (!x || !Number.isFinite(x)) {
4653     x = 1;
4654   }
4655   if (!y || !Number.isFinite(y)) {
4656     y = 1;
4657   }
4658   return {
4659     x,
4660     y
4661   };
4662 }
4663 const noOffsets = /* @__PURE__ */ createCoords(0);
4664 function getVisualOffsets(element) {
4665   const win = getWindow(element);
4666   if (!isWebKit() || !win.visualViewport) {
4667     return noOffsets;
4668   }
4669   return {
4670     x: win.visualViewport.offsetLeft,
4671     y: win.visualViewport.offsetTop
4672   };
4673 }
4674 function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
4675   if (isFixed === void 0) {
4676     isFixed = false;
4677   }
4678   if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
4679     return false;
4680   }
4681   return isFixed;
4682 }
4683 function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
4684   if (includeScale === void 0) {
4685     includeScale = false;
4686   }
4687   if (isFixedStrategy === void 0) {
4688     isFixedStrategy = false;
4689   }
4690   const clientRect = element.getBoundingClientRect();
4691   const domElement = unwrapElement$2(element);
4692   let scale = createCoords(1);
4693   if (includeScale) {
4694     if (offsetParent) {
4695       if (isElement(offsetParent)) {
4696         scale = getScale(offsetParent);
4697       }
4698     } else {
4699       scale = getScale(element);
4700     }
4701   }
4702   const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
4703   let x = (clientRect.left + visualOffsets.x) / scale.x;
4704   let y = (clientRect.top + visualOffsets.y) / scale.y;
4705   let width = clientRect.width / scale.x;
4706   let height = clientRect.height / scale.y;
4707   if (domElement) {
4708     const win = getWindow(domElement);
4709     const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
4710     let currentWin = win;
4711     let currentIFrame = getFrameElement(currentWin);
4712     while (currentIFrame && offsetParent && offsetWin !== currentWin) {
4713       const iframeScale = getScale(currentIFrame);
4714       const iframeRect = currentIFrame.getBoundingClientRect();
4715       const css = getComputedStyle(currentIFrame);
4716       const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
4717       const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
4718       x *= iframeScale.x;
4719       y *= iframeScale.y;
4720       width *= iframeScale.x;
4721       height *= iframeScale.y;
4722       x += left;
4723       y += top;
4724       currentWin = getWindow(currentIFrame);
4725       currentIFrame = getFrameElement(currentWin);
4726     }
4727   }
4728   return rectToClientRect({
4729     width,
4730     height,
4731     x,
4732     y
4733   });
4734 }
4735 function getWindowScrollBarX(element, rect) {
4736   const leftScroll = getNodeScroll(element).scrollLeft;
4737   if (!rect) {
4738     return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
4739   }
4740   return rect.left + leftScroll;
4741 }
4742 function getHTMLOffset(documentElement, scroll, ignoreScrollbarX) {
4743   if (ignoreScrollbarX === void 0) {
4744     ignoreScrollbarX = false;
4745   }
4746   const htmlRect = documentElement.getBoundingClientRect();
4747   const x = htmlRect.left + scroll.scrollLeft - (ignoreScrollbarX ? 0 : (
4748     // RTL <body> scrollbar.
4749     getWindowScrollBarX(documentElement, htmlRect)
4750   ));
4751   const y = htmlRect.top + scroll.scrollTop;
4752   return {
4753     x,
4754     y
4755   };
4756 }
4757 function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
4758   let {
4759     elements,
4760     rect,
4761     offsetParent,
4762     strategy
4763   } = _ref;
4764   const isFixed = strategy === "fixed";
4765   const documentElement = getDocumentElement(offsetParent);
4766   const topLayer = elements ? isTopLayer(elements.floating) : false;
4767   if (offsetParent === documentElement || topLayer && isFixed) {
4768     return rect;
4769   }
4770   let scroll = {
4771     scrollLeft: 0,
4772     scrollTop: 0
4773   };
4774   let scale = createCoords(1);
4775   const offsets = createCoords(0);
4776   const isOffsetParentAnElement = isHTMLElement(offsetParent);
4777   if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
4778     if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
4779       scroll = getNodeScroll(offsetParent);
4780     }
4781     if (isHTMLElement(offsetParent)) {
4782       const offsetRect = getBoundingClientRect(offsetParent);
4783       scale = getScale(offsetParent);
4784       offsets.x = offsetRect.x + offsetParent.clientLeft;
4785       offsets.y = offsetRect.y + offsetParent.clientTop;
4786     }
4787   }
4788   const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll, true) : createCoords(0);
4789   return {
4790     width: rect.width * scale.x,
4791     height: rect.height * scale.y,
4792     x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
4793     y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
4794   };
4795 }
4796 function getClientRects(element) {
4797   return Array.from(element.getClientRects());
4798 }
4799 function getDocumentRect(element) {
4800   const html = getDocumentElement(element);
4801   const scroll = getNodeScroll(element);
4802   const body = element.ownerDocument.body;
4803   const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
4804   const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
4805   let x = -scroll.scrollLeft + getWindowScrollBarX(element);
4806   const y = -scroll.scrollTop;
4807   if (getComputedStyle(body).direction === "rtl") {
4808     x += max(html.clientWidth, body.clientWidth) - width;
4809   }
4810   return {
4811     width,
4812     height,
4813     x,
4814     y
4815   };
4816 }
4817 function getViewportRect(element, strategy) {
4818   const win = getWindow(element);
4819   const html = getDocumentElement(element);
4820   const visualViewport = win.visualViewport;
4821   let width = html.clientWidth;
4822   let height = html.clientHeight;
4823   let x = 0;
4824   let y = 0;
4825   if (visualViewport) {
4826     width = visualViewport.width;
4827     height = visualViewport.height;
4828     const visualViewportBased = isWebKit();
4829     if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
4830       x = visualViewport.offsetLeft;
4831       y = visualViewport.offsetTop;
4832     }
4833   }
4834   return {
4835     width,
4836     height,
4837     x,
4838     y
4839   };
4840 }
4841 function getInnerBoundingClientRect(element, strategy) {
4842   const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
4843   const top = clientRect.top + element.clientTop;
4844   const left = clientRect.left + element.clientLeft;
4845   const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
4846   const width = element.clientWidth * scale.x;
4847   const height = element.clientHeight * scale.y;
4848   const x = left * scale.x;
4849   const y = top * scale.y;
4850   return {
4851     width,
4852     height,
4853     x,
4854     y
4855   };
4856 }
4857 function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
4858   let rect;
4859   if (clippingAncestor === "viewport") {
4860     rect = getViewportRect(element, strategy);
4861   } else if (clippingAncestor === "document") {
4862     rect = getDocumentRect(getDocumentElement(element));
4863   } else if (isElement(clippingAncestor)) {
4864     rect = getInnerBoundingClientRect(clippingAncestor, strategy);
4865   } else {
4866     const visualOffsets = getVisualOffsets(element);
4867     rect = {
4868       x: clippingAncestor.x - visualOffsets.x,
4869       y: clippingAncestor.y - visualOffsets.y,
4870       width: clippingAncestor.width,
4871       height: clippingAncestor.height
4872     };
4873   }
4874   return rectToClientRect(rect);
4875 }
4876 function hasFixedPositionAncestor(element, stopNode) {
4877   const parentNode = getParentNode(element);
4878   if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
4879     return false;
4880   }
4881   return getComputedStyle(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
4882 }
4883 function getClippingElementAncestors(element, cache) {
4884   const cachedResult = cache.get(element);
4885   if (cachedResult) {
4886     return cachedResult;
4887   }
4888   let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
4889   let currentContainingBlockComputedStyle = null;
4890   const elementIsFixed = getComputedStyle(element).position === "fixed";
4891   let currentNode = elementIsFixed ? getParentNode(element) : element;
4892   while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
4893     const computedStyle = getComputedStyle(currentNode);
4894     const currentNodeIsContaining = isContainingBlock(currentNode);
4895     if (!currentNodeIsContaining && computedStyle.position === "fixed") {
4896       currentContainingBlockComputedStyle = null;
4897     }
4898     const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && ["absolute", "fixed"].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
4899     if (shouldDropCurrentNode) {
4900       result = result.filter((ancestor) => ancestor !== currentNode);
4901     } else {
4902       currentContainingBlockComputedStyle = computedStyle;
4903     }
4904     currentNode = getParentNode(currentNode);
4905   }
4906   cache.set(element, result);
4907   return result;
4908 }
4909 function getClippingRect(_ref) {
4910   let {
4911     element,
4912     boundary,
4913     rootBoundary,
4914     strategy
4915   } = _ref;
4916   const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
4917   const clippingAncestors = [...elementClippingAncestors, rootBoundary];
4918   const firstClippingAncestor = clippingAncestors[0];
4919   const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
4920     const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
4921     accRect.top = max(rect.top, accRect.top);
4922     accRect.right = min(rect.right, accRect.right);
4923     accRect.bottom = min(rect.bottom, accRect.bottom);
4924     accRect.left = max(rect.left, accRect.left);
4925     return accRect;
4926   }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
4927   return {
4928     width: clippingRect.right - clippingRect.left,
4929     height: clippingRect.bottom - clippingRect.top,
4930     x: clippingRect.left,
4931     y: clippingRect.top
4932   };
4933 }
4934 function getDimensions(element) {
4935   const {
4936     width,
4937     height
4938   } = getCssDimensions(element);
4939   return {
4940     width,
4941     height
4942   };
4943 }
4944 function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
4945   const isOffsetParentAnElement = isHTMLElement(offsetParent);
4946   const documentElement = getDocumentElement(offsetParent);
4947   const isFixed = strategy === "fixed";
4948   const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
4949   let scroll = {
4950     scrollLeft: 0,
4951     scrollTop: 0
4952   };
4953   const offsets = createCoords(0);
4954   if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
4955     if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
4956       scroll = getNodeScroll(offsetParent);
4957     }
4958     if (isOffsetParentAnElement) {
4959       const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
4960       offsets.x = offsetRect.x + offsetParent.clientLeft;
4961       offsets.y = offsetRect.y + offsetParent.clientTop;
4962     } else if (documentElement) {
4963       offsets.x = getWindowScrollBarX(documentElement);
4964     }
4965   }
4966   const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
4967   const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
4968   const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
4969   return {
4970     x,
4971     y,
4972     width: rect.width,
4973     height: rect.height
4974   };
4975 }
4976 function isStaticPositioned(element) {
4977   return getComputedStyle(element).position === "static";
4978 }
4979 function getTrueOffsetParent(element, polyfill) {
4980   if (!isHTMLElement(element) || getComputedStyle(element).position === "fixed") {
4981     return null;
4982   }
4983   if (polyfill) {
4984     return polyfill(element);
4985   }
4986   let rawOffsetParent = element.offsetParent;
4987   if (getDocumentElement(element) === rawOffsetParent) {
4988     rawOffsetParent = rawOffsetParent.ownerDocument.body;
4989   }
4990   return rawOffsetParent;
4991 }
4992 function getOffsetParent(element, polyfill) {
4993   const win = getWindow(element);
4994   if (isTopLayer(element)) {
4995     return win;
4996   }
4997   if (!isHTMLElement(element)) {
4998     let svgOffsetParent = getParentNode(element);
4999     while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
5000       if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
5001         return svgOffsetParent;
5002       }
5003       svgOffsetParent = getParentNode(svgOffsetParent);
5004     }
5005     return win;
5006   }
5007   let offsetParent = getTrueOffsetParent(element, polyfill);
5008   while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
5009     offsetParent = getTrueOffsetParent(offsetParent, polyfill);
5010   }
5011   if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
5012     return win;
5013   }
5014   return offsetParent || getContainingBlock(element) || win;
5015 }
5016 const getElementRects = function(data) {
5017   return __async(this, null, function* () {
5018     const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
5019     const getDimensionsFn = this.getDimensions;
5020     const floatingDimensions = yield getDimensionsFn(data.floating);
5021     return {
5022       reference: getRectRelativeToOffsetParent(data.reference, yield getOffsetParentFn(data.floating), data.strategy),
5023       floating: {
5024         x: 0,
5025         y: 0,
5026         width: floatingDimensions.width,
5027         height: floatingDimensions.height
5028       }
5029     };
5030   });
5031 };
5032 function isRTL(element) {
5033   return getComputedStyle(element).direction === "rtl";
5034 }
5035 const platform = {
5036   convertOffsetParentRelativeRectToViewportRelativeRect,
5037   getDocumentElement,
5038   getClippingRect,
5039   getOffsetParent,
5040   getElementRects,
5041   getClientRects,
5042   getDimensions,
5043   getScale,
5044   isElement,
5045   isRTL
5046 };
5047 function observeMove(element, onMove) {
5048   let io = null;
5049   let timeoutId;
5050   const root = getDocumentElement(element);
5051   function cleanup() {
5052     var _io;
5053     clearTimeout(timeoutId);
5054     (_io = io) == null || _io.disconnect();
5055     io = null;
5056   }
5057   function refresh(skip, threshold) {
5058     if (skip === void 0) {
5059       skip = false;
5060     }
5061     if (threshold === void 0) {
5062       threshold = 1;
5063     }
5064     cleanup();
5065     const {
5066       left,
5067       top,
5068       width,
5069       height
5070     } = element.getBoundingClientRect();
5071     if (!skip) {
5072       onMove();
5073     }
5074     if (!width || !height) {
5075       return;
5076     }
5077     const insetTop = floor(top);
5078     const insetRight = floor(root.clientWidth - (left + width));
5079     const insetBottom = floor(root.clientHeight - (top + height));
5080     const insetLeft = floor(left);
5081     const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
5082     const options = {
5083       rootMargin,
5084       threshold: max(0, min(1, threshold)) || 1
5085     };
5086     let isFirstUpdate = true;
5087     function handleObserve(entries) {
5088       const ratio = entries[0].intersectionRatio;
5089       if (ratio !== threshold) {
5090         if (!isFirstUpdate) {
5091           return refresh();
5092         }
5093         if (!ratio) {
5094           timeoutId = setTimeout(() => {
5095             refresh(false, 1e-7);
5096           }, 1e3);
5097         } else {
5098           refresh(false, ratio);
5099         }
5100       }
5101       isFirstUpdate = false;
5102     }
5103     try {
5104       io = new IntersectionObserver(handleObserve, __spreadProps(__spreadValues({}, options), {
5105         // Handle <iframe>s
5106         root: root.ownerDocument
5107       }));
5108     } catch (e) {
5109       io = new IntersectionObserver(handleObserve, options);
5110     }
5111     io.observe(element);
5112   }
5113   refresh(true);
5114   return cleanup;
5115 }
5116 function autoUpdate(reference, floating, update, options) {
5117   if (options === void 0) {
5118     options = {};
5119   }
5120   const {
5121     ancestorScroll = true,
5122     ancestorResize = true,
5123     elementResize = typeof ResizeObserver === "function",
5124     layoutShift = typeof IntersectionObserver === "function",
5125     animationFrame = false
5126   } = options;
5127   const referenceEl = unwrapElement$2(reference);
5128   const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
5129   ancestors.forEach((ancestor) => {
5130     ancestorScroll && ancestor.addEventListener("scroll", update, {
5131       passive: true
5132     });
5133     ancestorResize && ancestor.addEventListener("resize", update);
5134   });
5135   const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
5136   let reobserveFrame = -1;
5137   let resizeObserver = null;
5138   if (elementResize) {
5139     resizeObserver = new ResizeObserver((_ref) => {
5140       let [firstEntry] = _ref;
5141       if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
5142         resizeObserver.unobserve(floating);
5143         cancelAnimationFrame(reobserveFrame);
5144         reobserveFrame = requestAnimationFrame(() => {
5145           var _resizeObserver;
5146           (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
5147         });
5148       }
5149       update();
5150     });
5151     if (referenceEl && !animationFrame) {
5152       resizeObserver.observe(referenceEl);
5153     }
5154     resizeObserver.observe(floating);
5155   }
5156   let frameId;
5157   let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
5158   if (animationFrame) {
5159     frameLoop();
5160   }
5161   function frameLoop() {
5162     const nextRefRect = getBoundingClientRect(reference);
5163     if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
5164       update();
5165     }
5166     prevRefRect = nextRefRect;
5167     frameId = requestAnimationFrame(frameLoop);
5168   }
5169   update();
5170   return () => {
5171     var _resizeObserver2;
5172     ancestors.forEach((ancestor) => {
5173       ancestorScroll && ancestor.removeEventListener("scroll", update);
5174       ancestorResize && ancestor.removeEventListener("resize", update);
5175     });
5176     cleanupIo == null || cleanupIo();
5177     (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
5178     resizeObserver = null;
5179     if (animationFrame) {
5180       cancelAnimationFrame(frameId);
5181     }
5182   };
5183 }
5184 const offset = offset$1;
5185 const shift = shift$1;
5186 const flip = flip$1;
5187 const size = size$1;
5188 const hide = hide$1;
5189 const computePosition = (reference, floating, options) => {
5190   const cache = /* @__PURE__ */ new Map();
5191   const mergedOptions = __spreadValues({
5192     platform
5193   }, options);
5194   const platformWithCache = __spreadProps(__spreadValues({}, mergedOptions.platform), {
5195     _c: cache
5196   });
5197   return computePosition$1(reference, floating, __spreadProps(__spreadValues({}, mergedOptions), {
5198     platform: platformWithCache
5199   }));
5200 };
5201 function isComponentPublicInstance(target) {
5202   return target != null && typeof target === "object" && "$el" in target;
5203 }
5204 function unwrapElement$1(target) {
5205   if (isComponentPublicInstance(target)) {
5206     const element = target.$el;
5207     return isNode(element) && getNodeName(element) === "#comment" ? null : element;
5208   }
5209   return target;
5210 }
5211 function getDPR(element) {
5212   if (typeof window === "undefined") {
5213     return 1;
5214   }
5215   const win = element.ownerDocument.defaultView || window;
5216   return win.devicePixelRatio || 1;
5217 }
5218 function roundByDPR(element, value) {
5219   const dpr = getDPR(element);
5220   return Math.round(value * dpr) / dpr;
5221 }
5222 function useFloating(reference, floating, options) {
5223   if (options === void 0) {
5224     options = {};
5225   }
5226   const whileElementsMountedOption = options.whileElementsMounted;
5227   const openOption = computed(() => {
5228     var _unref;
5229     return (_unref = unref(options.open)) != null ? _unref : true;
5230   });
5231   const middlewareOption = computed(() => unref(options.middleware));
5232   const placementOption = computed(() => {
5233     var _unref2;
5234     return (_unref2 = unref(options.placement)) != null ? _unref2 : "bottom";
5235   });
5236   const strategyOption = computed(() => {
5237     var _unref3;
5238     return (_unref3 = unref(options.strategy)) != null ? _unref3 : "absolute";
5239   });
5240   const transformOption = computed(() => {
5241     var _unref4;
5242     return (_unref4 = unref(options.transform)) != null ? _unref4 : true;
5243   });
5244   const referenceElement = computed(() => unwrapElement$1(reference.value));
5245   const floatingElement = computed(() => unwrapElement$1(floating.value));
5246   const x = ref(0);
5247   const y = ref(0);
5248   const strategy = ref(strategyOption.value);
5249   const placement = ref(placementOption.value);
5250   const middlewareData = shallowRef({});
5251   const isPositioned = ref(false);
5252   const floatingStyles = computed(() => {
5253     const initialStyles = {
5254       position: strategy.value,
5255       left: "0",
5256       top: "0"
5257     };
5258     if (!floatingElement.value) {
5259       return initialStyles;
5260     }
5261     const xVal = roundByDPR(floatingElement.value, x.value);
5262     const yVal = roundByDPR(floatingElement.value, y.value);
5263     if (transformOption.value) {
5264       return __spreadValues(__spreadProps(__spreadValues({}, initialStyles), {
5265         transform: "translate(" + xVal + "px, " + yVal + "px)"
5266       }), getDPR(floatingElement.value) >= 1.5 && {
5267         willChange: "transform"
5268       });
5269     }
5270     return {
5271       position: strategy.value,
5272       left: xVal + "px",
5273       top: yVal + "px"
5274     };
5275   });
5276   let whileElementsMountedCleanup;
5277   function update() {
5278     if (referenceElement.value == null || floatingElement.value == null) {
5279       return;
5280     }
5281     computePosition(referenceElement.value, floatingElement.value, {
5282       middleware: middlewareOption.value,
5283       placement: placementOption.value,
5284       strategy: strategyOption.value
5285     }).then((position) => {
5286       x.value = position.x;
5287       y.value = position.y;
5288       strategy.value = position.strategy;
5289       placement.value = position.placement;
5290       middlewareData.value = position.middlewareData;
5291       isPositioned.value = true;
5292     });
5293   }
5294   function cleanup() {
5295     if (typeof whileElementsMountedCleanup === "function") {
5296       whileElementsMountedCleanup();
5297       whileElementsMountedCleanup = void 0;
5298     }
5299   }
5300   function attach() {
5301     cleanup();
5302     if (whileElementsMountedOption === void 0) {
5303       update();
5304       return;
5305     }
5306     if (referenceElement.value != null && floatingElement.value != null) {
5307       whileElementsMountedCleanup = whileElementsMountedOption(referenceElement.value, floatingElement.value, update);
5308       return;
5309     }
5310   }
5311   function reset() {
5312     if (!openOption.value) {
5313       isPositioned.value = false;
5314     }
5315   }
5316   watch([middlewareOption, placementOption, strategyOption], update, {
5317     flush: "sync"
5318   });
5319   watch([referenceElement, floatingElement], attach, {
5320     flush: "sync"
5321   });
5322   watch(openOption, reset, {
5323     flush: "sync"
5324   });
5325   if (getCurrentScope()) {
5326     onScopeDispose(cleanup);
5327   }
5328   return {
5329     x: shallowReadonly(x),
5330     y: shallowReadonly(y),
5331     strategy: shallowReadonly(strategy),
5332     placement: shallowReadonly(placement),
5333     middlewareData: shallowReadonly(middlewareData),
5334     isPositioned: shallowReadonly(isPositioned),
5335     floatingStyles,
5336     update
5337   };
5338 }
5339 function unwrapElement(element) {
5340   return element && "$el" in element ? element.$el : element;
5341 }
5342 const clipPadding = 16;
5343 const minClipHeight = 128;
5344 function useFloatingMenu(referenceElement, menu, opt) {
5345   var _a;
5346   const menuIsExpanded = () => {
5347     var _a2;
5348     return (_a2 = menu.value) == null ? void 0 : _a2.isExpanded();
5349   };
5350   const middleware = [
5351     offset(opt == null ? void 0 : opt.offset),
5352     size({
5353       // Don't size the menu to take up exactly all of the available height, because that
5354       // makes it look like it's cut off. Instead, leave 16px of free space between the bottom
5355       // of the menu and the bottom edge of the viewport / scrollable container.
5356       padding: clipPadding,
5357       apply({ rects, elements, availableHeight, availableWidth }) {
5358         Object.assign(elements.floating.style, {
5359           // Optionally use all available width
5360           // Else, set the width of the menu to match the width of the triggering element.
5361           // This is needed in Dialogs, when the menu's position is set relative to
5362           // the dialog, not the triggering element.
5363           width: "".concat((opt == null ? void 0 : opt.useAvailableWidth) ? availableWidth : rects.reference.width, "px"),
5364           // Set the max-height to the available height, to prevent the menu from
5365           // extending past the edge of the viewport or scrollable container. But don't
5366           // allow the menu to be shrunk to less than 128px; this is necessary to make
5367           // the flip() call below work.
5368           maxHeight: "".concat(Math.max(minClipHeight, availableHeight), "px")
5369         });
5370       }
5371     }),
5372     // If there is not enough space to put the menu below the triggering element, put it above
5373     // it instead. Because of the maxHeight logic above, this happens when there is less than
5374     // 128px available below the triggering element.
5375     flip({
5376       // Apply the same padding here as in size(), otherwise the gap between the bottom of
5377       // the menu and the bottom edge of the viewport is allowed to shrink to zero before the
5378       // menu flips.
5379       padding: clipPadding
5380     }),
5381     // Hide the menu when it has escaped the reference element's clipping context (e.g. the menu
5382     // is opened down and you scroll up until the reference element just starts to leave the
5383     // container).
5384     hide({
5385       strategy: "escaped"
5386     }),
5387     // Hide the menu when the reference element is fully hidden (e.g. the menu is opened down
5388     // and you scroll down until the whole reference element is gone).
5389     hide()
5390   ];
5391   const { floatingStyles, placement, middlewareData, update } = useFloating(
5392     referenceElement,
5393     menu,
5394     {
5395       middleware,
5396       placement: (_a = opt == null ? void 0 : opt.placement) != null ? _a : "bottom"
5397     }
5398   );
5399   const menuVisibility = computed(() => {
5400     var _a2, _b;
5401     const isHidden = !menuIsExpanded() || !!((_a2 = middlewareData.value.hide) == null ? void 0 : _a2.escaped) || ((_b = middlewareData.value.hide) == null ? void 0 : _b.referenceHidden);
5402     return isHidden ? "hidden" : "visible";
5403   });
5404   watch(
5405     [floatingStyles, menuVisibility, placement],
5406     ([newStyles, newVisibility, newPlacement]) => {
5407       var _a2, _b, _c, _d, _e;
5408       Object.assign((_b = (_a2 = menu.value) == null ? void 0 : _a2.$el.style) != null ? _b : {}, {
5409         visibility: newVisibility,
5410         position: newStyles.position,
5411         top: "".concat(newStyles.top, "px"),
5412         // `left: 0` is set in the Menu component, which gets transformed to `right: 0` for
5413         // RTL. For this component, we must unset `right: 0`, because the transform value
5414         // is relative to the left side of the screen regardless of reading direction.
5415         right: "unset",
5416         // Set `left` value to ensure the menu is translated relative to the left side of
5417         // the screen, which is what FloatingUI expects when it calculates the translate-x
5418         // value for both LTR and RTL.
5419         left: "".concat(newStyles.left, "px"),
5420         // If menuWidth is specified, transform shifts negative, for now ignore that
5421         transform: (_c = newStyles.transform) != null ? _c : "none",
5422         // Zero out border-radius on the corners of the menu where it touches the reference
5423         // element. Which corners these are depends on whether the menu is flipped
5424         borderTopLeftRadius: newPlacement === "bottom" && newVisibility === "visible" ? "0" : "",
5425         borderTopRightRadius: newPlacement === "bottom" && newVisibility === "visible" ? "0" : "",
5426         borderBottomLeftRadius: newPlacement === "top" && newVisibility === "visible" ? "0" : "",
5427         borderBottomRightRadius: newPlacement === "top" && newVisibility === "visible" ? "0" : ""
5428       });
5429       Object.assign((_e = (_d = unwrapElement(referenceElement.value)) == null ? void 0 : _d.style) != null ? _e : {}, {
5430         // Zero out border-radius on the corners of the reference element where it touches
5431         // the menu. Which corners these are depends on whether the menu is flipped
5432         borderTopLeftRadius: newPlacement === "top" && newVisibility === "visible" ? "0" : "",
5433         borderTopRightRadius: newPlacement === "top" && newVisibility === "visible" ? "0" : "",
5434         borderBottomLeftRadius: newPlacement === "bottom" && newVisibility === "visible" ? "0" : "",
5435         borderBottomRightRadius: newPlacement === "bottom" && newVisibility === "visible" ? "0" : ""
5436       });
5437     }
5438   );
5439   let cleanupAutoUpdate = null;
5440   watch(menuIsExpanded, (newExpanded) => {
5441     var _a2;
5442     if (newExpanded) {
5443       cleanupAutoUpdate = autoUpdate(
5444         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
5445         referenceElement.value && "$el" in referenceElement.value ? referenceElement.value.$el : referenceElement,
5446         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
5447         (_a2 = menu.value) == null ? void 0 : _a2.$el,
5448         update
5449       );
5450     } else {
5451       if (cleanupAutoUpdate) {
5452         cleanupAutoUpdate();
5453         cleanupAutoUpdate = null;
5454       }
5455     }
5456   });
5457 }
5458 const statusValidator$7 = makeStringTypeValidator(ValidationStatusTypes);
5459 const _sfc_main$j = defineComponent({
5460   name: "CdxCombobox",
5461   components: {
5462     CdxButton,
5463     CdxIcon,
5464     CdxMenu,
5465     CdxTextInput
5466   },
5467   /**
5468    * Attributes applied to this component by a parent will be applied
5469    * to the TextInput child component rather than the root element.
5470    */
5471   inheritAttrs: false,
5472   props: {
5473     /**
5474      * Menu items and/or menu group definitions.
5475      *
5476      * Menu groups and individual menu items will be output in the order they appear here.
5477      */
5478     menuItems: {
5479       type: Array,
5480       required: true
5481     },
5482     /**
5483      * Value of the current selection.
5484      *
5485      * Must be bound with `v-model:selected`.
5486      */
5487     selected: {
5488       type: [String, Number],
5489       required: true
5490     },
5491     /**
5492      * Whether the dropdown is disabled.
5493      */
5494     disabled: {
5495       type: Boolean,
5496       default: false
5497     },
5498     /**
5499      * Configuration for various menu features. All properties default to false.
5500      *
5501      * See the MenuConfig type.
5502      *
5503      * @default {}
5504      */
5505     menuConfig: {
5506       type: Object,
5507       default: () => ({})
5508     },
5509     /**
5510      * `status` property of the TextInput component
5511      */
5512     status: {
5513       type: String,
5514       default: "default",
5515       validator: statusValidator$7
5516     }
5517   },
5518   emits: [
5519     /**
5520      * When the selected value changes.
5521      *
5522      * @property {string | number} selected The new selected value
5523      */
5524     "update:selected",
5525     /**
5526      * When the user scrolls towards the bottom of the menu.
5527      *
5528      * If it is possible to add or load more menu items, then now would be a good moment
5529      * so that the user can experience infinite scrolling.
5530      */
5531     "load-more",
5532     /**
5533      * When the input value changes via direct use of the input
5534      *
5535      * @property {InputEvent} event
5536      */
5537     "input",
5538     /**
5539      * When an input value change is committed by the user (e.g. on blur)
5540      *
5541      * @property {Event} event
5542      */
5543     "change",
5544     /**
5545      * When the input comes into focus
5546      *
5547      * @property {FocusEvent} event
5548      */
5549     "focus",
5550     /**
5551      * When the input loses focus
5552      *
5553      * @property {FocusEvent} event
5554      */
5555     "blur"
5556   ],
5557   setup(props, { emit, attrs, slots }) {
5558     const input = ref();
5559     const inputWrapper = ref();
5560     const menu = ref();
5561     const menuId = useGeneratedId("combobox");
5562     const selectedProp = toRef(props, "selected");
5563     const modelWrapper = useModelWrapper(selectedProp, emit, "update:selected");
5564     const expanded = ref(false);
5565     const expanderClicked = ref(false);
5566     const highlightedId = computed(() => {
5567       var _a, _b;
5568       return (_b = (_a = menu.value) == null ? void 0 : _a.getHighlightedMenuItem()) == null ? void 0 : _b.id;
5569     });
5570     const {
5571       computedDisabled,
5572       computedStatus
5573     } = useFieldData(
5574       toRef(props, "disabled"),
5575       toRef(props, "status")
5576     );
5577     const internalClasses = computed(() => ({
5578       "cdx-combobox--expanded": expanded.value,
5579       "cdx-combobox--disabled": computedDisabled.value
5580     }));
5581     const {
5582       rootClasses,
5583       rootStyle,
5584       otherAttrs
5585     } = useSplitAttributes(attrs, internalClasses);
5586     function onInputFocus(event) {
5587       if (expanderClicked.value && expanded.value) {
5588         expanded.value = false;
5589       } else if (props.menuItems.length > 0 || slots["no-results"]) {
5590         expanded.value = true;
5591       }
5592       emit("focus", event);
5593     }
5594     function onInputBlur(event) {
5595       expanded.value = expanderClicked.value && expanded.value;
5596       emit("blur", event);
5597     }
5598     function onButtonMousedown() {
5599       if (computedDisabled.value) {
5600         return;
5601       }
5602       expanderClicked.value = true;
5603     }
5604     function onButtonClick() {
5605       var _a;
5606       if (computedDisabled.value) {
5607         return;
5608       }
5609       (_a = input.value) == null ? void 0 : _a.focus();
5610     }
5611     function onKeydown(e) {
5612       if (!menu.value || computedDisabled.value || props.menuItems.length === 0 || e.key === " ") {
5613         return;
5614       }
5615       menu.value.delegateKeyNavigation(e);
5616     }
5617     useFloatingMenu(input, menu);
5618     watch(expanded, () => {
5619       expanderClicked.value = false;
5620     });
5621     return {
5622       input,
5623       inputWrapper,
5624       menu,
5625       menuId,
5626       modelWrapper,
5627       expanded,
5628       highlightedId,
5629       computedDisabled,
5630       computedStatus,
5631       onInputFocus,
5632       onInputBlur,
5633       onKeydown,
5634       onButtonClick,
5635       onButtonMousedown,
5636       cdxIconExpand: M4,
5637       rootClasses,
5638       rootStyle,
5639       otherAttrs
5640     };
5641   }
5642 });
5643 const _hoisted_1$h = {
5644   ref: "inputWrapper",
5645   class: "cdx-combobox__input-wrapper"
5646 };
5647 function _sfc_render$j(_ctx, _cache, $props, $setup, $data, $options) {
5648   const _component_cdx_text_input = resolveComponent("cdx-text-input");
5649   const _component_cdx_icon = resolveComponent("cdx-icon");
5650   const _component_cdx_button = resolveComponent("cdx-button");
5651   const _component_cdx_menu = resolveComponent("cdx-menu");
5652   return openBlock(), createElementBlock(
5653     "div",
5654     {
5655       class: normalizeClass(["cdx-combobox", _ctx.rootClasses]),
5656       style: normalizeStyle(_ctx.rootStyle)
5657     },
5658     [
5659       createElementVNode(
5660         "div",
5661         _hoisted_1$h,
5662         [
5663           createVNode(_component_cdx_text_input, mergeProps({
5664             ref: "input",
5665             modelValue: _ctx.modelWrapper,
5666             "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.modelWrapper = $event)
5667           }, _ctx.otherAttrs, {
5668             class: "cdx-combobox__input",
5669             "aria-activedescendant": _ctx.highlightedId,
5670             "aria-expanded": _ctx.expanded,
5671             "aria-controls": _ctx.menuId,
5672             disabled: _ctx.computedDisabled,
5673             status: _ctx.computedStatus,
5674             autocomplete: "off",
5675             role: "combobox",
5676             onKeydown: _ctx.onKeydown,
5677             onInput: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("input", $event)),
5678             onChange: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("change", $event)),
5679             onFocus: _ctx.onInputFocus,
5680             onBlur: _ctx.onInputBlur
5681           }), null, 16, ["modelValue", "aria-activedescendant", "aria-expanded", "aria-controls", "disabled", "status", "onKeydown", "onFocus", "onBlur"]),
5682           createVNode(_component_cdx_button, {
5683             class: "cdx-combobox__expand-button",
5684             "aria-hidden": "true",
5685             disabled: _ctx.computedDisabled,
5686             tabindex: "-1",
5687             type: "button",
5688             onMousedown: _ctx.onButtonMousedown,
5689             onClick: _ctx.onButtonClick
5690           }, {
5691             default: withCtx(() => [
5692               createVNode(_component_cdx_icon, {
5693                 class: "cdx-combobox__expand-icon",
5694                 icon: _ctx.cdxIconExpand
5695               }, null, 8, ["icon"])
5696             ]),
5697             _: 1
5698             /* STABLE */
5699           }, 8, ["disabled", "onMousedown", "onClick"])
5700         ],
5701         512
5702         /* NEED_PATCH */
5703       ),
5704       createVNode(_component_cdx_menu, mergeProps({
5705         id: _ctx.menuId,
5706         ref: "menu",
5707         selected: _ctx.modelWrapper,
5708         "onUpdate:selected": _cache[3] || (_cache[3] = ($event) => _ctx.modelWrapper = $event),
5709         expanded: _ctx.expanded,
5710         "onUpdate:expanded": _cache[4] || (_cache[4] = ($event) => _ctx.expanded = $event),
5711         "menu-items": _ctx.menuItems
5712       }, _ctx.menuConfig, {
5713         onLoadMore: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("load-more"))
5714       }), {
5715         default: withCtx(({ menuItem }) => [
5716           renderSlot(_ctx.$slots, "menu-item", { menuItem })
5717         ]),
5718         "no-results": withCtx(() => [
5719           renderSlot(_ctx.$slots, "no-results")
5720         ]),
5721         _: 3
5722         /* FORWARDED */
5723       }, 16, ["id", "selected", "expanded", "menu-items"])
5724     ],
5725     6
5726     /* CLASS, STYLE */
5727   );
5728 }
5729 const Combobox = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["render", _sfc_render$j]]);
5730 function useResizeObserver(templateRef) {
5731   const currentDimensions = ref(
5732     { width: void 0, height: void 0 }
5733   );
5734   if (typeof window !== "object" || !("ResizeObserver" in window) || !("ResizeObserverEntry" in window)) {
5735     return currentDimensions;
5736   }
5737   const observer = new window.ResizeObserver(
5738     (entries) => {
5739       const entry = entries[0];
5740       if (entry) {
5741         currentDimensions.value = {
5742           width: entry.borderBoxSize[0].inlineSize,
5743           height: entry.borderBoxSize[0].blockSize
5744         };
5745       }
5746     }
5747   );
5748   let mounted = false;
5749   onMounted(() => {
5750     mounted = true;
5751     if (templateRef.value) {
5752       observer.observe(templateRef.value);
5753     }
5754   });
5755   onUnmounted(() => {
5756     mounted = false;
5757     observer.disconnect();
5758   });
5759   watch(templateRef, (newElement) => {
5760     if (!mounted) {
5761       return;
5762     }
5763     observer.disconnect();
5764     currentDimensions.value = {
5765       width: void 0,
5766       height: void 0
5767     };
5768     if (newElement) {
5769       observer.observe(newElement);
5770     }
5771   });
5772   return currentDimensions;
5773 }
5774 const _sfc_main$i = defineComponent({
5775   name: "CdxDialog",
5776   components: {
5777     CdxButton,
5778     CdxIcon
5779   },
5780   inheritAttrs: false,
5781   props: {
5782     /**
5783      * Whether the dialog is visible. Should be provided via a v-model:open
5784      * binding in the parent scope.
5785      */
5786     open: {
5787       type: Boolean,
5788       default: false
5789     },
5790     /**
5791      * Title for the dialog header. Used for ARIA purposes even if no
5792      * visible header element is displayed.
5793      */
5794     title: {
5795       type: String,
5796       required: true
5797     },
5798     /**
5799      * Optional subtitle for the dialog.
5800      */
5801     subtitle: {
5802       type: String,
5803       required: false,
5804       default: null
5805     },
5806     /**
5807      * Whether the dialog header should hide the title & subtitle
5808      */
5809     hideTitle: {
5810       type: Boolean,
5811       default: false
5812     },
5813     /**
5814      * Add an icon-only close button to the dialog header.
5815      */
5816     useCloseButton: {
5817       type: Boolean,
5818       default: false
5819     },
5820     // DEPRECATED: Set default to 'Close' (T368444)
5821     /**
5822      * Visually-hidden label text for the icon-only close button in the header.
5823      *
5824      * Omit this prop to use the default value, "Close".
5825      */
5826     closeButtonLabel: {
5827       type: String,
5828       default: ""
5829     },
5830     /**
5831      * Primary user action. This will display a primary button with the specified action
5832      * (progressive or destructive).
5833      */
5834     primaryAction: {
5835       type: Object,
5836       default: null
5837     },
5838     /**
5839      * Default user action. This will display a normal button.
5840      */
5841     defaultAction: {
5842       type: Object,
5843       default: null
5844     },
5845     /**
5846      * Whether action buttons should be vertically stacked and 100% width.
5847      */
5848     stackedActions: {
5849       type: Boolean,
5850       default: false
5851     },
5852     /**
5853      * Selector or DOM element identifying the container the dialog should
5854      * be rendered in. The dialog will be `<teleport>`ed to this element.
5855      * An ID selector is recommended, e.g. `#foo-bar`, but providing an
5856      * actual element is also supported.
5857      *
5858      * If this prop is not set, and the parent or one of its ancestors
5859      * provides a teleport target using `provide( 'CdxTeleportTarget',
5860      * '#foo-bar' )`, the provided target will be used. If there is no
5861      * provided target, the dialog will be teleported to the end of the
5862      * `<body>` element.
5863      */
5864     target: {
5865       type: String,
5866       default: null
5867     },
5868     /**
5869      * Whether to disable the use of teleport and render the Dialog in its
5870      * original location in the document. If this is true, the `target` prop
5871      * is ignored.
5872      */
5873     renderInPlace: {
5874       type: Boolean,
5875       default: false
5876     }
5877   },
5878   emits: [
5879     /**
5880      * When the open/close state changes, e.g. when the close button is clicked.
5881      *
5882      * @property {boolean} newValue The new open/close state (true for open, false for closed)
5883      */
5884     "update:open",
5885     /**
5886      * When the primary action button is clicked.
5887      */
5888     "primary",
5889     /**
5890      * When the default action button is clicked.
5891      */
5892     "default"
5893   ],
5894   setup(props, { emit }) {
5895     const labelId = useGeneratedId("dialog-label");
5896     const backdrop = ref();
5897     const dialogElement = ref();
5898     const dialogBody = ref();
5899     const focusHolder = ref();
5900     const focusTrapStart = ref();
5901     const focusTrapEnd = ref();
5902     let previouslyFocused = null;
5903     const useCloseButtonOrLabel = computed(
5904       () => props.useCloseButton || props.closeButtonLabel.length > 0
5905     );
5906     const translatedCloseButtonLabel = useI18nWithOverride(
5907       toRef(props, "closeButtonLabel"),
5908       "cdx-dialog-close-button-label",
5909       "Close"
5910     );
5911     const showHeader = computed(() => !props.hideTitle || useCloseButtonOrLabel.value);
5912     const showFooterActions = computed(() => !!props.primaryAction || !!props.defaultAction);
5913     const bodyDimensions = useResizeObserver(dialogBody);
5914     const currentBodyHeight = computed(() => {
5915       var _a;
5916       return (_a = bodyDimensions.value.height) != null ? _a : 0;
5917     });
5918     const showDividers = ref(false);
5919     const rootClasses = computed(() => ({
5920       "cdx-dialog--vertical-actions": props.stackedActions,
5921       "cdx-dialog--horizontal-actions": !props.stackedActions,
5922       "cdx-dialog--dividers": showDividers.value
5923     }));
5924     const providedTarget = inject("CdxTeleportTarget", void 0);
5925     const computedTarget = computed(() => {
5926       var _a, _b;
5927       return (_b = (_a = props.target) != null ? _a : providedTarget) != null ? _b : "body";
5928     });
5929     const scrollWidth = ref(0);
5930     function close() {
5931       emit("update:open", false);
5932     }
5933     function focusFirst() {
5934       focusFirstFocusableElement(dialogElement.value);
5935     }
5936     function focusLast() {
5937       focusFirstFocusableElement(dialogElement.value, true);
5938     }
5939     function focusFirstFocusableElement(container, backwards = false) {
5940       let candidates = Array.from(
5941         container.querySelectorAll('\n                                  input, select, textarea, button, object, a, area,\n                                     [contenteditable], [tabindex]:not([tabindex^="-"])\n                            ')
5942       );
5943       if (backwards) {
5944         candidates = candidates.reverse();
5945       }
5946       for (const candidate of candidates) {
5947         candidate.focus();
5948         if (document.activeElement === candidate) {
5949           return true;
5950         }
5951       }
5952       return false;
5953     }
5954     let ariaHiddenElements = [];
5955     let inertElements = [];
5956     function setAriaHiddenAndInert() {
5957       let element = backdrop.value;
5958       while (element.parentElement && element.nodeName !== "BODY") {
5959         for (const sibling of Array.from(element.parentElement.children)) {
5960           if (sibling === element || sibling.nodeName === "SCRIPT") {
5961             continue;
5962           }
5963           if (!sibling.hasAttribute("aria-hidden")) {
5964             sibling.setAttribute("aria-hidden", "true");
5965             ariaHiddenElements.push(sibling);
5966           }
5967           if (!sibling.hasAttribute("inert")) {
5968             sibling.setAttribute("inert", "");
5969             inertElements.push(sibling);
5970           }
5971         }
5972         element = element.parentElement;
5973       }
5974     }
5975     function unsetAriaHiddenAndInert() {
5976       for (const element of ariaHiddenElements) {
5977         element.removeAttribute("aria-hidden");
5978       }
5979       for (const element of inertElements) {
5980         element.removeAttribute("inert");
5981       }
5982       ariaHiddenElements = [];
5983       inertElements = [];
5984     }
5985     function onDialogOpen() {
5986       return __async(this, null, function* () {
5987         var _a;
5988         yield nextTick();
5989         scrollWidth.value = window.innerWidth - document.documentElement.clientWidth;
5990         document.documentElement.style.setProperty("margin-right", "".concat(scrollWidth.value, "px"));
5991         document.body.classList.add("cdx-dialog-open");
5992         setAriaHiddenAndInert();
5993         previouslyFocused = document.activeElement;
5994         if (!focusFirstFocusableElement(dialogBody.value)) {
5995           (_a = focusHolder.value) == null ? void 0 : _a.focus();
5996         }
5997       });
5998     }
5999     function onDialogClose() {
6000       document.body.classList.remove("cdx-dialog-open");
6001       document.documentElement.style.removeProperty("margin-right");
6002       unsetAriaHiddenAndInert();
6003       if (previouslyFocused instanceof HTMLElement && document.contains(previouslyFocused)) {
6004         previouslyFocused.focus();
6005         previouslyFocused = null;
6006       }
6007     }
6008     onMounted(() => {
6009       if (props.open) {
6010         onDialogOpen();
6011       }
6012     });
6013     onUnmounted(() => {
6014       if (props.open) {
6015         onDialogClose();
6016       }
6017     });
6018     watch(toRef(props, "open"), (opened) => {
6019       if (opened) {
6020         onDialogOpen();
6021       } else {
6022         onDialogClose();
6023       }
6024     });
6025     watch(currentBodyHeight, () => {
6026       if (dialogBody.value) {
6027         showDividers.value = dialogBody.value.clientHeight < dialogBody.value.scrollHeight;
6028       }
6029     });
6030     return {
6031       close,
6032       cdxIconClose: _3,
6033       labelId,
6034       rootClasses,
6035       backdrop,
6036       dialogElement,
6037       focusTrapStart,
6038       focusTrapEnd,
6039       focusFirst,
6040       focusLast,
6041       dialogBody,
6042       focusHolder,
6043       showHeader,
6044       showFooterActions,
6045       useCloseButtonOrLabel,
6046       translatedCloseButtonLabel,
6047       computedTarget
6048     };
6049   }
6050 });
6051 const _hoisted_1$g = ["aria-label", "aria-labelledby"];
6052 const _hoisted_2$9 = {
6053   key: 0,
6054   class: "cdx-dialog__header__title-group"
6055 };
6056 const _hoisted_3$6 = ["id"];
6057 const _hoisted_4$4 = {
6058   key: 0,
6059   class: "cdx-dialog__header__subtitle"
6060 };
6061 const _hoisted_5$4 = {
6062   ref: "focusHolder",
6063   class: "cdx-dialog-focus-trap",
6064   tabindex: "-1"
6065 };
6066 const _hoisted_6$4 = {
6067   key: 0,
6068   class: "cdx-dialog__footer__text"
6069 };
6070 const _hoisted_7$1 = {
6071   key: 1,
6072   class: "cdx-dialog__footer__actions"
6073 };
6074 function _sfc_render$i(_ctx, _cache, $props, $setup, $data, $options) {
6075   const _component_cdx_icon = resolveComponent("cdx-icon");
6076   const _component_cdx_button = resolveComponent("cdx-button");
6077   return openBlock(), createBlock(Teleport, {
6078     to: _ctx.computedTarget,
6079     disabled: _ctx.renderInPlace
6080   }, [
6081     createVNode(Transition, {
6082       name: "cdx-dialog-fade",
6083       appear: ""
6084     }, {
6085       default: withCtx(() => [
6086         _ctx.open ? (openBlock(), createElementBlock(
6087           "div",
6088           {
6089             key: 0,
6090             ref: "backdrop",
6091             class: "cdx-dialog-backdrop",
6092             onClick: _cache[5] || (_cache[5] = (...args) => _ctx.close && _ctx.close(...args)),
6093             onKeyup: _cache[6] || (_cache[6] = withKeys((...args) => _ctx.close && _ctx.close(...args), ["escape"]))
6094           },
6095           [
6096             createElementVNode(
6097               "div",
6098               {
6099                 ref: "focusTrapStart",
6100                 tabindex: "0",
6101                 onFocus: _cache[0] || (_cache[0] = (...args) => _ctx.focusLast && _ctx.focusLast(...args))
6102               },
6103               null,
6104               544
6105               /* NEED_HYDRATION, NEED_PATCH */
6106             ),
6107             createElementVNode("div", mergeProps({
6108               ref: "dialogElement",
6109               class: ["cdx-dialog", _ctx.rootClasses],
6110               role: "dialog"
6111             }, _ctx.$attrs, {
6112               "aria-label": _ctx.$slots.header || _ctx.hideTitle ? _ctx.title : void 0,
6113               "aria-labelledby": !_ctx.$slots.header && !_ctx.hideTitle ? _ctx.labelId : void 0,
6114               "aria-modal": "true",
6115               onClick: _cache[3] || (_cache[3] = withModifiers(() => {
6116               }, ["stop"]))
6117             }), [
6118               _ctx.showHeader || _ctx.$slots.header ? (openBlock(), createElementBlock(
6119                 "header",
6120                 {
6121                   key: 0,
6122                   class: normalizeClass(["cdx-dialog__header", { "cdx-dialog__header--default": !_ctx.$slots.header }])
6123                 },
6124                 [
6125                   renderSlot(_ctx.$slots, "header", {}, () => [
6126                     !_ctx.hideTitle ? (openBlock(), createElementBlock("div", _hoisted_2$9, [
6127                       createElementVNode("h2", {
6128                         id: _ctx.labelId,
6129                         class: "cdx-dialog__header__title"
6130                       }, toDisplayString(_ctx.title), 9, _hoisted_3$6),
6131                       _ctx.subtitle ? (openBlock(), createElementBlock(
6132                         "p",
6133                         _hoisted_4$4,
6134                         toDisplayString(_ctx.subtitle),
6135                         1
6136                         /* TEXT */
6137                       )) : createCommentVNode("v-if", true)
6138                     ])) : createCommentVNode("v-if", true),
6139                     _ctx.useCloseButtonOrLabel ? (openBlock(), createBlock(_component_cdx_button, {
6140                       key: 1,
6141                       class: "cdx-dialog__header__close-button",
6142                       weight: "quiet",
6143                       type: "button",
6144                       "aria-label": _ctx.translatedCloseButtonLabel,
6145                       onClick: _ctx.close
6146                     }, {
6147                       default: withCtx(() => [
6148                         createVNode(_component_cdx_icon, { icon: _ctx.cdxIconClose }, null, 8, ["icon"])
6149                       ]),
6150                       _: 1
6151                       /* STABLE */
6152                     }, 8, ["aria-label", "onClick"])) : createCommentVNode("v-if", true)
6153                   ])
6154                 ],
6155                 2
6156                 /* CLASS */
6157               )) : createCommentVNode("v-if", true),
6158               createElementVNode(
6159                 "div",
6160                 _hoisted_5$4,
6161                 null,
6162                 512
6163                 /* NEED_PATCH */
6164               ),
6165               createElementVNode(
6166                 "div",
6167                 {
6168                   ref: "dialogBody",
6169                   class: normalizeClass(["cdx-dialog__body", {
6170                     "cdx-dialog__body--no-header": !(_ctx.showHeader || _ctx.$slots.header),
6171                     "cdx-dialog__body--no-footer": !(_ctx.showFooterActions || _ctx.$slots.footer || _ctx.$slots["footer-text"])
6172                   }])
6173                 },
6174                 [
6175                   renderSlot(_ctx.$slots, "default")
6176                 ],
6177                 2
6178                 /* CLASS */
6179               ),
6180               _ctx.showFooterActions || _ctx.$slots.footer || _ctx.$slots["footer-text"] ? (openBlock(), createElementBlock(
6181                 "footer",
6182                 {
6183                   key: 1,
6184                   class: normalizeClass(["cdx-dialog__footer", { "cdx-dialog__footer--default": !_ctx.$slots.footer }])
6185                 },
6186                 [
6187                   renderSlot(_ctx.$slots, "footer", {}, () => [
6188                     _ctx.$slots["footer-text"] ? (openBlock(), createElementBlock("p", _hoisted_6$4, [
6189                       renderSlot(_ctx.$slots, "footer-text")
6190                     ])) : createCommentVNode("v-if", true),
6191                     _ctx.showFooterActions ? (openBlock(), createElementBlock("div", _hoisted_7$1, [
6192                       _ctx.primaryAction ? (openBlock(), createBlock(_component_cdx_button, {
6193                         key: 0,
6194                         class: "cdx-dialog__footer__primary-action",
6195                         weight: "primary",
6196                         action: _ctx.primaryAction.actionType,
6197                         disabled: _ctx.primaryAction.disabled,
6198                         onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("primary"))
6199                       }, {
6200                         default: withCtx(() => [
6201                           createTextVNode(
6202                             toDisplayString(_ctx.primaryAction.label),
6203                             1
6204                             /* TEXT */
6205                           )
6206                         ]),
6207                         _: 1
6208                         /* STABLE */
6209                       }, 8, ["action", "disabled"])) : createCommentVNode("v-if", true),
6210                       _ctx.defaultAction ? (openBlock(), createBlock(_component_cdx_button, {
6211                         key: 1,
6212                         class: "cdx-dialog__footer__default-action",
6213                         disabled: _ctx.defaultAction.disabled,
6214                         onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("default"))
6215                       }, {
6216                         default: withCtx(() => [
6217                           createTextVNode(
6218                             toDisplayString(_ctx.defaultAction.label),
6219                             1
6220                             /* TEXT */
6221                           )
6222                         ]),
6223                         _: 1
6224                         /* STABLE */
6225                       }, 8, ["disabled"])) : createCommentVNode("v-if", true)
6226                     ])) : createCommentVNode("v-if", true)
6227                   ])
6228                 ],
6229                 2
6230                 /* CLASS */
6231               )) : createCommentVNode("v-if", true)
6232             ], 16, _hoisted_1$g),
6233             createElementVNode(
6234               "div",
6235               {
6236                 ref: "focusTrapEnd",
6237                 tabindex: "0",
6238                 onFocus: _cache[4] || (_cache[4] = (...args) => _ctx.focusFirst && _ctx.focusFirst(...args))
6239               },
6240               null,
6241               544
6242               /* NEED_HYDRATION, NEED_PATCH */
6243             )
6244           ],
6245           544
6246           /* NEED_HYDRATION, NEED_PATCH */
6247         )) : createCommentVNode("v-if", true)
6248       ]),
6249       _: 3
6250       /* FORWARDED */
6251     })
6252   ], 8, ["to", "disabled"]);
6253 }
6254 const Dialog = /* @__PURE__ */ _export_sfc(_sfc_main$i, [["render", _sfc_render$i]]);
6255 const iconMap$2 = {
6256   notice: j4,
6257   error: p4,
6258   warning: H3,
6259   success: G7
6260 };
6261 const _sfc_main$h = defineComponent({
6262   name: "CdxMessage",
6263   components: { CdxButton, CdxIcon },
6264   props: {
6265     /**
6266      * Status type of Message.
6267      *
6268      * @values 'notice', 'warning', 'error', 'success'
6269      */
6270     type: {
6271       type: String,
6272       default: "notice",
6273       validator: statusTypeValidator
6274     },
6275     /**
6276      * Whether this message follows the inline design (no padding, background color, or border).
6277      */
6278     inline: {
6279       type: Boolean,
6280       default: false
6281     },
6282     /**
6283      * Custom message icon. Only allowed for notice messages.
6284      */
6285     icon: {
6286       type: [String, Object],
6287       default: null
6288     },
6289     /**
6290      * Whether the message should fade in. Should be used for messages that are dynamically
6291      * displayed, not present on page load.
6292      */
6293     fadeIn: {
6294       type: Boolean,
6295       default: false
6296     },
6297     /**
6298      * Allow the message to be dismissed by the user. Adds an icon-only dismiss button.
6299      */
6300     allowUserDismiss: {
6301       type: Boolean,
6302       default: false
6303     },
6304     // DEPRECATED: set default to 'Close' (T368444).
6305     /**
6306      * Visually-hidden label text for the dismiss button for user-dismissable messages.
6307      *
6308      * Omit this prop to use the default value, "Close".
6309      */
6310     dismissButtonLabel: {
6311       type: String,
6312       default: ""
6313     },
6314     /**
6315      * Enable automatic dismissal of message after a period of time.
6316      *
6317      * This prop can be set to `true` to use the default display time of 4000 milliseconds. To
6318      * customize the display time, set this prop to a number of milliseconds.
6319      *
6320      * Error messages cannot be automatically dismissed. If the `type` prop is set to `error`,
6321      * this prop will be ignored.
6322      *
6323      * TODO: consider adding a stricter validator to set limits on this. If the time is too
6324      * short, the message may not be readable. If the time is too long, the message probably
6325      * shouldn't be auto-dismissed.
6326      */
6327     autoDismiss: {
6328       type: [Boolean, Number],
6329       default: false,
6330       validator: (value) => typeof value === "boolean" || typeof value === "number" && value > 0
6331     }
6332   },
6333   emits: [
6334     /**
6335      * Emitted when the message is dismissed by the user via the dismiss button.
6336      */
6337     "user-dismissed",
6338     /**
6339      * Emitted when the message is automatically dismissed after the display time.
6340      */
6341     "auto-dismissed"
6342   ],
6343   setup(props, { emit }) {
6344     const dismissed = ref(false);
6345     const userDismissable = computed(
6346       () => props.inline === false && // DEPRECATED: require use of new prop allowUserDismiss (T368444).
6347       (props.dismissButtonLabel.length > 0 || props.allowUserDismiss)
6348     );
6349     const translatedDismissButtonLabel = useI18nWithOverride(
6350       toRef(props, "dismissButtonLabel"),
6351       "cdx-message-dismiss-button-label",
6352       "Close"
6353     );
6354     const displayTime = computed(() => {
6355       if (props.autoDismiss === false || props.type === "error") {
6356         return false;
6357       } else if (props.autoDismiss === true) {
6358         return 4e3;
6359       }
6360       return props.autoDismiss;
6361     });
6362     const rootClasses = computed(() => ({
6363       "cdx-message--inline": props.inline,
6364       "cdx-message--block": !props.inline,
6365       "cdx-message--user-dismissable": userDismissable.value,
6366       ["cdx-message--".concat(props.type)]: true
6367     }));
6368     const computedIcon = computed(
6369       () => props.icon && props.type === "notice" ? props.icon : iconMap$2[props.type]
6370     );
6371     const leaveActiveClass = ref("");
6372     function onDismiss(eventName) {
6373       if (dismissed.value) {
6374         return;
6375       }
6376       leaveActiveClass.value = eventName === "user-dismissed" ? "cdx-message-leave-active-user" : "cdx-message-leave-active-system";
6377       dismissed.value = true;
6378       emit(eventName);
6379     }
6380     onMounted(() => {
6381       if (props.type === "error" && props.autoDismiss !== false) {
6382         warn('CdxMessage: Message with type="error" cannot use auto-dismiss');
6383       } else if (displayTime.value) {
6384         setTimeout(() => onDismiss("auto-dismissed"), displayTime.value);
6385       }
6386     });
6387     return {
6388       dismissed,
6389       userDismissable,
6390       translatedDismissButtonLabel,
6391       rootClasses,
6392       leaveActiveClass,
6393       computedIcon,
6394       onDismiss,
6395       cdxIconClose: _3
6396     };
6397   }
6398 });
6399 const _hoisted_1$f = ["aria-live", "role"];
6400 const _hoisted_2$8 = { class: "cdx-message__content" };
6401 function _sfc_render$h(_ctx, _cache, $props, $setup, $data, $options) {
6402   const _component_cdx_icon = resolveComponent("cdx-icon");
6403   const _component_cdx_button = resolveComponent("cdx-button");
6404   return openBlock(), createBlock(Transition, {
6405     name: "cdx-message",
6406     appear: _ctx.fadeIn,
6407     "leave-active-class": _ctx.leaveActiveClass
6408   }, {
6409     default: withCtx(() => [
6410       !_ctx.dismissed ? (openBlock(), createElementBlock("div", {
6411         key: 0,
6412         class: normalizeClass(["cdx-message", _ctx.rootClasses]),
6413         "aria-live": _ctx.type !== "error" ? "polite" : void 0,
6414         role: _ctx.type === "error" ? "alert" : void 0
6415       }, [
6416         createVNode(_component_cdx_icon, {
6417           class: "cdx-message__icon--vue",
6418           icon: _ctx.computedIcon
6419         }, null, 8, ["icon"]),
6420         createElementVNode("div", _hoisted_2$8, [
6421           renderSlot(_ctx.$slots, "default")
6422         ]),
6423         _ctx.userDismissable ? (openBlock(), createBlock(_component_cdx_button, {
6424           key: 0,
6425           class: "cdx-message__dismiss-button",
6426           weight: "quiet",
6427           type: "button",
6428           "aria-label": _ctx.translatedDismissButtonLabel,
6429           onClick: _cache[0] || (_cache[0] = ($event) => _ctx.onDismiss("user-dismissed"))
6430         }, {
6431           default: withCtx(() => [
6432             createVNode(_component_cdx_icon, { icon: _ctx.cdxIconClose }, null, 8, ["icon"])
6433           ]),
6434           _: 1
6435           /* STABLE */
6436         }, 8, ["aria-label"])) : createCommentVNode("v-if", true)
6437       ], 10, _hoisted_1$f)) : createCommentVNode("v-if", true)
6438     ]),
6439     _: 3
6440     /* FORWARDED */
6441   }, 8, ["appear", "leave-active-class"]);
6442 }
6443 const CdxMessage = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["render", _sfc_render$h]]);
6444 const statusValidator$6 = makeStringTypeValidator(ValidationStatusTypes);
6445 const _sfc_main$g = defineComponent({
6446   name: "CdxField",
6447   components: { CdxLabel, CdxMessage },
6448   props: {
6449     /**
6450      * Icon before the label text.
6451      *
6452      * Do not use this if including a start icon within the input component.
6453      */
6454     labelIcon: {
6455       type: [String, Object],
6456       default: ""
6457     },
6458     /**
6459      * Whether the field is optional.
6460      *
6461      * This will add a flag next to the label indicating that the field is optional.
6462      */
6463     optional: {
6464       type: Boolean,
6465       default: false
6466     },
6467     // DEPRECATED: set default to '(optional)' (T368444).
6468     /**
6469      * Text to indicate that the field is optional.
6470      *
6471      * Omit this prop to use the default value, "(optional)".
6472      */
6473     optionalFlag: {
6474       type: String,
6475       default: ""
6476     },
6477     /**
6478      * Whether the label should be visually hidden.
6479      *
6480      * Note that this will also hide the description.
6481      */
6482     hideLabel: {
6483       type: Boolean,
6484       default: false
6485     },
6486     /**
6487      * Whether this field contains a group of inputs.
6488      *
6489      * When true, this outputs a `<fieldset>` element with a semantic `<legend>`. When false,
6490      * it outputs a `<div>` with a semantic `<label>`.
6491      */
6492     isFieldset: {
6493       type: Boolean,
6494       default: false
6495     },
6496     /**
6497      * Whether the entire field is disabled.
6498      */
6499     disabled: {
6500       type: Boolean,
6501       default: false
6502     },
6503     /**
6504      * `status` attribute of the input. This also determines which validation message is shown.
6505      */
6506     status: {
6507       type: String,
6508       default: "default",
6509       validator: statusValidator$6
6510     },
6511     /**
6512      * Message text keyed on validation status type.
6513      *
6514      * @default {}
6515      */
6516     messages: {
6517       type: Object,
6518       default: () => ({})
6519     }
6520   },
6521   setup(props, { slots }) {
6522     const { disabled, status, isFieldset } = toRefs(props);
6523     const computedDisabled = useComputedDisabled(disabled);
6524     const rootClasses = computed(() => ({
6525       "cdx-field--disabled": computedDisabled.value,
6526       "cdx-field--is-fieldset": isFieldset.value
6527     }));
6528     const labelId = useGeneratedId("label");
6529     const descriptionId = useGeneratedId("description");
6530     const inputId = useGeneratedId("input");
6531     const computedInputId = computed(() => !isFieldset.value ? inputId : void 0);
6532     provide(FieldInputIdKey, computedInputId);
6533     const computedDescriptionId = computed(
6534       () => !isFieldset.value && slots.description ? descriptionId : void 0
6535     );
6536     provide(FieldDescriptionIdKey, computedDescriptionId);
6537     provide(DisabledKey, computedDisabled);
6538     provide(FieldStatusKey, status);
6539     const validationMessage = computed(
6540       () => props.status !== "default" && props.status in props.messages ? props.messages[props.status] : ""
6541     );
6542     const validationMessageType = computed(() => props.status === "default" ? "notice" : props.status);
6543     return {
6544       rootClasses,
6545       computedDisabled,
6546       labelId,
6547       descriptionId,
6548       inputId,
6549       validationMessage,
6550       validationMessageType
6551     };
6552   }
6553 });
6554 const _hoisted_1$e = { class: "cdx-field__control" };
6555 const _hoisted_2$7 = { class: "cdx-field__help-text" };
6556 const _hoisted_3$5 = {
6557   key: 0,
6558   class: "cdx-field__validation-message"
6559 };
6560 function _sfc_render$g(_ctx, _cache, $props, $setup, $data, $options) {
6561   const _component_cdx_label = resolveComponent("cdx-label");
6562   const _component_cdx_message = resolveComponent("cdx-message");
6563   return openBlock(), createBlock(resolveDynamicComponent(_ctx.isFieldset ? "fieldset" : "div"), {
6564     class: normalizeClass(["cdx-field", _ctx.rootClasses]),
6565     "aria-disabled": !_ctx.isFieldset && _ctx.computedDisabled ? true : void 0,
6566     disabled: _ctx.isFieldset && _ctx.computedDisabled ? true : void 0
6567   }, {
6568     default: withCtx(() => [
6569       createVNode(_component_cdx_label, {
6570         id: _ctx.labelId,
6571         icon: _ctx.labelIcon,
6572         "visually-hidden": _ctx.hideLabel,
6573         optional: _ctx.optional,
6574         "optional-flag": _ctx.optionalFlag,
6575         "input-id": _ctx.inputId,
6576         "description-id": _ctx.descriptionId,
6577         disabled: _ctx.computedDisabled,
6578         "is-legend": _ctx.isFieldset
6579       }, createSlots({
6580         default: withCtx(() => [
6581           renderSlot(_ctx.$slots, "label")
6582         ]),
6583         _: 2
6584         /* DYNAMIC */
6585       }, [
6586         _ctx.$slots.description && _ctx.$slots.description().length > 0 ? {
6587           name: "description",
6588           fn: withCtx(() => [
6589             renderSlot(_ctx.$slots, "description")
6590           ]),
6591           key: "0"
6592         } : void 0
6593       ]), 1032, ["id", "icon", "visually-hidden", "optional", "optional-flag", "input-id", "description-id", "disabled", "is-legend"]),
6594       createElementVNode("div", _hoisted_1$e, [
6595         renderSlot(_ctx.$slots, "default")
6596       ]),
6597       createElementVNode("div", _hoisted_2$7, [
6598         renderSlot(_ctx.$slots, "help-text")
6599       ]),
6600       !_ctx.computedDisabled && _ctx.validationMessage || _ctx.$slots[_ctx.validationMessageType] ? (openBlock(), createElementBlock("div", _hoisted_3$5, [
6601         createVNode(_component_cdx_message, {
6602           type: _ctx.validationMessageType,
6603           inline: true
6604         }, {
6605           default: withCtx(() => [
6606             _ctx.status === "warning" && _ctx.$slots.warning ? renderSlot(_ctx.$slots, "warning", { key: 0 }) : _ctx.status === "error" && _ctx.$slots.error ? renderSlot(_ctx.$slots, "error", { key: 1 }) : _ctx.status === "success" && _ctx.$slots.success ? renderSlot(_ctx.$slots, "success", { key: 2 }) : (openBlock(), createElementBlock(
6607               Fragment,
6608               { key: 3 },
6609               [
6610                 createTextVNode(
6611                   toDisplayString(_ctx.validationMessage),
6612                   1
6613                   /* TEXT */
6614                 )
6615               ],
6616               64
6617               /* STABLE_FRAGMENT */
6618             ))
6619           ]),
6620           _: 3
6621           /* FORWARDED */
6622         }, 8, ["type"])
6623       ])) : createCommentVNode("v-if", true)
6624     ]),
6625     _: 3
6626     /* FORWARDED */
6627   }, 8, ["class", "aria-disabled", "disabled"]);
6628 }
6629 const Field = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["render", _sfc_render$g]]);
6630 const iconMap$1 = {
6631   notice: j4,
6632   error: p4,
6633   warning: H3,
6634   success: G7
6635 };
6636 const _sfc_main$f = defineComponent({
6637   name: "CdxInfoChip",
6638   components: { CdxIcon },
6639   props: {
6640     /**
6641      * Status type.
6642      *
6643      * @values 'notice', 'warning', 'error', 'success'
6644      */
6645     status: {
6646       type: String,
6647       default: "notice",
6648       validator: statusTypeValidator
6649     },
6650     /**
6651      * Custom icon to use for "notice" chips. Chips with other status types
6652      * (warning, etc) do not allow custom icons and will ignore this option.
6653      */
6654     icon: {
6655       type: [String, Object],
6656       default: null
6657     }
6658   },
6659   setup(props) {
6660     const rootClasses = computed(() => ({
6661       ["cdx-info-chip--".concat(props.status)]: true
6662     }));
6663     const computedIcon = computed(
6664       () => props.status === "notice" ? props.icon : iconMap$1[props.status]
6665     );
6666     return {
6667       rootClasses,
6668       computedIcon
6669     };
6670   }
6671 });
6672 const _hoisted_1$d = { class: "cdx-info-chip__text" };
6673 function _sfc_render$f(_ctx, _cache, $props, $setup, $data, $options) {
6674   const _component_cdx_icon = resolveComponent("cdx-icon");
6675   return openBlock(), createElementBlock(
6676     "div",
6677     {
6678       class: normalizeClass(["cdx-info-chip", _ctx.rootClasses])
6679     },
6680     [
6681       _ctx.computedIcon ? (openBlock(), createBlock(_component_cdx_icon, {
6682         key: 0,
6683         class: "cdx-info-chip__icon--vue",
6684         icon: _ctx.computedIcon
6685       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
6686       createElementVNode("span", _hoisted_1$d, [
6687         renderSlot(_ctx.$slots, "default")
6688       ])
6689     ],
6690     2
6691     /* CLASS */
6692   );
6693 }
6694 const InfoChip = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["render", _sfc_render$f]]);
6695 const statusValidator$5 = makeStringTypeValidator(ValidationStatusTypes);
6696 const _sfc_main$e = defineComponent({
6697   name: "CdxLookup",
6698   components: {
6699     CdxMenu,
6700     CdxTextInput
6701   },
6702   /**
6703    * We want the input to inherit attributes, not the root element.
6704    */
6705   inheritAttrs: false,
6706   props: {
6707     /**
6708      * Value of the current selection.
6709      *
6710      * Must be bound with `v-model:selected`.
6711      *
6712      * The property should be initialized to `null` rather than using a falsy value.
6713      */
6714     selected: {
6715       type: [String, Number, null],
6716       required: true
6717     },
6718     /**
6719      * Menu items and/or menu group definitions.
6720      *
6721      * Menu groups and individual menu items will be output in the order they appear here.
6722      */
6723     menuItems: {
6724       type: Array,
6725       required: true
6726     },
6727     /**
6728      * Current value of the input. This prop is optional and should only be used if you need to
6729      * keep track of the input value for some reason (e.g. to set an initial value).
6730      *
6731      * Optionally provided by `v-model:input-value` binding in the parent component.
6732      */
6733     inputValue: {
6734       type: [String, Number],
6735       default: null
6736     },
6737     // DEPRECATED: Remove (T373532).
6738     /**
6739      * Initial value of the text input. Non-reactive.
6740      *
6741      * @deprecated Use `inputValue` instead.
6742      */
6743     initialInputValue: {
6744       type: [String, Number],
6745       default: "",
6746       validator: (value) => {
6747         if (value) {
6748           console.warn(
6749             '[CdxLookup]: prop "initialInputValue" is deprecated. Use "inputValue" instead.'
6750           );
6751         }
6752         return true;
6753       }
6754     },
6755     /**
6756      * Whether the entire component is disabled.
6757      */
6758     disabled: {
6759       type: Boolean,
6760       default: false
6761     },
6762     /**
6763      * Configuration for various menu features. All properties default to false.
6764      *
6765      * See the MenuConfig type.
6766      *
6767      * @default {}
6768      */
6769     menuConfig: {
6770       type: Object,
6771       default: () => ({})
6772     },
6773     /**
6774      * `status` property of the TextInput component
6775      */
6776     status: {
6777       type: String,
6778       default: "default",
6779       validator: statusValidator$5
6780     }
6781   },
6782   emits: [
6783     /**
6784      * When the selected value changes.
6785      *
6786      * @property {string | number | null} selected The new selected value
6787      */
6788     "update:selected",
6789     /**
6790      * When the input value changes. Only emitted if the inputValue prop is provided.
6791      *
6792      * @property {string | number} inputValue The new input value
6793      */
6794     "update:input-value",
6795     /**
6796      * When the user scrolls towards the bottom of the menu.
6797      *
6798      * If it is possible to add or load more menu items, then now would be a good moment
6799      * so that the user can experience infinite scrolling.
6800      */
6801     "load-more",
6802     /**
6803      * When the text input value changes.
6804      *
6805      * @property {string | number} value The new value
6806      */
6807     "input",
6808     /**
6809      * When an input value change is committed by the user (e.g. on blur)
6810      *
6811      * @property {Event} event
6812      */
6813     "change",
6814     /**
6815      * When the input comes into focus
6816      *
6817      * @property {FocusEvent} event
6818      */
6819     "focus",
6820     /**
6821      * When the input loses focus
6822      *
6823      * @property {FocusEvent} event
6824      */
6825     "blur"
6826   ],
6827   setup: (props, { emit, attrs, slots }) => {
6828     const rootElement = ref();
6829     const textInput = ref();
6830     const menu = ref();
6831     const menuId = useGeneratedId("lookup-menu");
6832     const pending = ref(false);
6833     const expanded = ref(false);
6834     const isActive = ref(false);
6835     const initialMenuItems = ref(props.menuItems);
6836     const {
6837       computedDisabled,
6838       computedStatus
6839     } = useFieldData(
6840       toRef(props, "disabled"),
6841       toRef(props, "status")
6842     );
6843     const selectedProp = toRef(props, "selected");
6844     const selection = useModelWrapper(selectedProp, emit, "update:selected");
6845     const selectedMenuItem = computed(
6846       () => {
6847         var _a;
6848         return (_a = menu.value) == null ? void 0 : _a.getComputedMenuItems().find((item) => item.value === selection.value);
6849       }
6850     );
6851     const highlightedId = computed(() => {
6852       var _a, _b;
6853       return (_b = (_a = menu.value) == null ? void 0 : _a.getHighlightedMenuItem()) == null ? void 0 : _b.id;
6854     });
6855     const internalInputValue = ref(props.initialInputValue);
6856     const computedInputValue = useOptionalModelWrapper(
6857       internalInputValue,
6858       toRef(props, "inputValue"),
6859       emit,
6860       "update:input-value"
6861     );
6862     const internalClasses = computed(() => ({
6863       "cdx-lookup--disabled": computedDisabled.value,
6864       "cdx-lookup--pending": pending.value
6865     }));
6866     const {
6867       rootClasses,
6868       rootStyle,
6869       otherAttrs
6870     } = useSplitAttributes(attrs, internalClasses);
6871     function onUpdateInput(newVal) {
6872       if (selectedMenuItem.value) {
6873         if (selectedMenuItem.value.label !== newVal && selectedMenuItem.value.value !== newVal) {
6874           selection.value = null;
6875         }
6876       } else if (props.selected !== null && props.selected !== newVal) {
6877         selection.value = null;
6878       }
6879       if (newVal === "" && initialMenuItems.value.length === 0) {
6880         expanded.value = false;
6881         pending.value = false;
6882       } else {
6883         pending.value = true;
6884       }
6885       emit("input", newVal);
6886     }
6887     function onInputFocus(event) {
6888       isActive.value = true;
6889       const hasInput = computedInputValue.value !== null && computedInputValue.value !== "";
6890       const hasMenuItems = !!(props.menuItems.length > 0 || slots["no-results"]);
6891       if (hasMenuItems && (hasInput || initialMenuItems.value.length > 0)) {
6892         expanded.value = true;
6893       }
6894       emit("focus", event);
6895     }
6896     function onInputBlur(event) {
6897       isActive.value = false;
6898       expanded.value = false;
6899       emit("blur", event);
6900     }
6901     function onKeydown(e) {
6902       if (!menu.value || computedDisabled.value || props.menuItems.length === 0 && !slots["no-results"] || e.key === " ") {
6903         return;
6904       }
6905       menu.value.delegateKeyNavigation(e);
6906     }
6907     useFloatingMenu(textInput, menu);
6908     watch(selection, (newVal) => {
6909       var _a;
6910       if (newVal !== null) {
6911         const inputValueForSelection = selectedMenuItem.value ? (_a = selectedMenuItem.value.label) != null ? _a : selectedMenuItem.value.value : "";
6912         if (computedInputValue.value !== inputValueForSelection) {
6913           computedInputValue.value = inputValueForSelection;
6914           emit("input", inputValueForSelection);
6915         }
6916       }
6917     });
6918     watch(toRef(props, "menuItems"), (newVal) => {
6919       if (
6920         // Only show the menu if we were in the pending state (meaning this menuItems change
6921         // was in response to user input) and the menu is still focused
6922         isActive.value && pending.value && // Show the menu if there are either menu items or no-results content to show
6923         (newVal.length > 0 || slots["no-results"])
6924       ) {
6925         expanded.value = true;
6926       }
6927       if (newVal.length === 0 && !slots["no-results"]) {
6928         expanded.value = false;
6929       }
6930       pending.value = false;
6931     });
6932     return {
6933       rootElement,
6934       textInput,
6935       menu,
6936       menuId,
6937       highlightedId,
6938       computedInputValue,
6939       selection,
6940       expanded,
6941       computedDisabled,
6942       computedStatus,
6943       onInputBlur,
6944       rootClasses,
6945       rootStyle,
6946       otherAttrs,
6947       onUpdateInput,
6948       onInputFocus,
6949       onKeydown
6950     };
6951   }
6952 });
6953 function _sfc_render$e(_ctx, _cache, $props, $setup, $data, $options) {
6954   const _component_cdx_text_input = resolveComponent("cdx-text-input");
6955   const _component_cdx_menu = resolveComponent("cdx-menu");
6956   return openBlock(), createElementBlock(
6957     "div",
6958     {
6959       ref: "rootElement",
6960       class: normalizeClass(["cdx-lookup", _ctx.rootClasses]),
6961       style: normalizeStyle(_ctx.rootStyle)
6962     },
6963     [
6964       createVNode(_component_cdx_text_input, mergeProps({
6965         ref: "textInput",
6966         modelValue: _ctx.computedInputValue,
6967         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.computedInputValue = $event)
6968       }, _ctx.otherAttrs, {
6969         class: "cdx-lookup__input",
6970         role: "combobox",
6971         autocomplete: "off",
6972         "aria-autocomplete": "list",
6973         "aria-controls": _ctx.menuId,
6974         "aria-expanded": _ctx.expanded,
6975         "aria-activedescendant": _ctx.highlightedId,
6976         disabled: _ctx.computedDisabled,
6977         status: _ctx.computedStatus,
6978         "onUpdate:modelValue": _ctx.onUpdateInput,
6979         onChange: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("change", $event)),
6980         onFocus: _ctx.onInputFocus,
6981         onBlur: _ctx.onInputBlur,
6982         onKeydown: _ctx.onKeydown
6983       }), null, 16, ["modelValue", "aria-controls", "aria-expanded", "aria-activedescendant", "disabled", "status", "onUpdate:modelValue", "onFocus", "onBlur", "onKeydown"]),
6984       createVNode(_component_cdx_menu, mergeProps({
6985         id: _ctx.menuId,
6986         ref: "menu",
6987         selected: _ctx.selection,
6988         "onUpdate:selected": _cache[2] || (_cache[2] = ($event) => _ctx.selection = $event),
6989         expanded: _ctx.expanded,
6990         "onUpdate:expanded": _cache[3] || (_cache[3] = ($event) => _ctx.expanded = $event),
6991         "menu-items": _ctx.menuItems
6992       }, _ctx.menuConfig, {
6993         onLoadMore: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("load-more"))
6994       }), {
6995         default: withCtx(({ menuItem }) => [
6996           renderSlot(_ctx.$slots, "menu-item", { menuItem })
6997         ]),
6998         "no-results": withCtx(() => [
6999           renderSlot(_ctx.$slots, "no-results")
7000         ]),
7001         _: 3
7002         /* FORWARDED */
7003       }, 16, ["id", "selected", "expanded", "menu-items"])
7004     ],
7005     6
7006     /* CLASS, STYLE */
7007   );
7008 }
7009 const Lookup = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["render", _sfc_render$e]]);
7010 const _sfc_main$d = defineComponent({
7011   name: "CdxToggleButton",
7012   props: {
7013     /**
7014      * Whether the button should be set to "on" (true) or "off" (false).
7015      *
7016      * Provided by `v-model` binding in the parent component.
7017      */
7018     modelValue: {
7019       type: Boolean,
7020       default: false
7021     },
7022     /**
7023      * Whether the disabled attribute should be added to the button, which prevents
7024      * it from being clicked.
7025      */
7026     disabled: {
7027       type: Boolean,
7028       default: false
7029     },
7030     /**
7031      * Whether the toggle button should be "quiet", which renders more minimally.
7032      */
7033     quiet: {
7034       type: Boolean,
7035       default: false
7036     }
7037   },
7038   emits: [
7039     /**
7040      * Emitted when modelValue changes (i.e. when the state is toggled)
7041      *
7042      * @property {boolean} modelValue The new model value
7043      */
7044     "update:modelValue"
7045   ],
7046   setup(props, { emit, slots, attrs }) {
7047     const isIconOnly = useIconOnlyButton(slots.default, attrs, "CdxToggleButton");
7048     const isActive = ref(false);
7049     const rootClasses = computed(() => ({
7050       // Quiet means frameless among other things
7051       "cdx-toggle-button--quiet": props.quiet,
7052       "cdx-toggle-button--framed": !props.quiet,
7053       // Provide --toggled-off too so that we can simplify selectors
7054       "cdx-toggle-button--toggled-on": props.modelValue,
7055       "cdx-toggle-button--toggled-off": !props.modelValue,
7056       "cdx-toggle-button--icon-only": isIconOnly.value,
7057       "cdx-toggle-button--is-active": isActive.value
7058     }));
7059     const onClick = () => {
7060       emit("update:modelValue", !props.modelValue);
7061     };
7062     const setActive = (active) => {
7063       isActive.value = active;
7064     };
7065     function onKeyDown() {
7066       setActive(true);
7067     }
7068     function onKeyUp() {
7069       setActive(false);
7070       onClick();
7071     }
7072     return {
7073       rootClasses,
7074       onClick,
7075       onKeyDown,
7076       onKeyUp
7077     };
7078   }
7079 });
7080 const _hoisted_1$c = ["aria-pressed", "disabled"];
7081 function _sfc_render$d(_ctx, _cache, $props, $setup, $data, $options) {
7082   return openBlock(), createElementBlock("button", {
7083     class: normalizeClass(["cdx-toggle-button", _ctx.rootClasses]),
7084     "aria-pressed": _ctx.modelValue,
7085     disabled: _ctx.disabled,
7086     type: "button",
7087     onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args)),
7088     onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers((...args) => _ctx.onKeyDown && _ctx.onKeyDown(...args), ["prevent"]), ["space", "enter"])),
7089     onKeyup: _cache[2] || (_cache[2] = withKeys((...args) => _ctx.onKeyUp && _ctx.onKeyUp(...args), ["space", "enter"]))
7090   }, [
7091     renderSlot(_ctx.$slots, "default")
7092   ], 42, _hoisted_1$c);
7093 }
7094 const CdxToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["render", _sfc_render$d]]);
7095 const _sfc_main$c = defineComponent({
7096   name: "CdxMenuButton",
7097   components: {
7098     CdxToggleButton,
7099     CdxMenu
7100   },
7101   inheritAttrs: false,
7102   props: {
7103     /**
7104      * Value of the current selection.
7105      *
7106      * Must be bound with `v-model:selected`.
7107      */
7108     selected: {
7109       type: [String, Number, null],
7110       required: true
7111     },
7112     /**
7113      * Menu items and/or menu group definitions.
7114      *
7115      * Menu groups and individual menu items will be output in the order they appear here.
7116      */
7117     menuItems: {
7118       type: Array,
7119       required: true
7120     },
7121     /**
7122      * Configuration for various menu features. All properties default to false.
7123      *
7124      * See the MenuConfig type.
7125      *
7126      * @default {}
7127      */
7128     menuConfig: {
7129       type: Object,
7130       default: () => ({})
7131     },
7132     /**
7133      * Whether the dropdown is disabled.
7134      */
7135     disabled: {
7136       type: Boolean,
7137       default: false
7138     },
7139     /**
7140      * Interactive footer item.
7141      *
7142      * This is a special menu item which is pinned to the bottom of the menu. When scrolling is
7143      * enabled within the menu, the footer item will always be visible at the bottom of the
7144      * menu. When scrolling is not enabled, the footer item will simply appear as the last menu
7145      * item.
7146      *
7147      * The footer item is selectable, like other menu items.
7148      */
7149     footer: {
7150       type: Object,
7151       default: null
7152     }
7153   },
7154   emits: [
7155     /**
7156      * When the selected value changes.
7157      *
7158      * @property {string | number} selected The new selected value
7159      */
7160     "update:selected"
7161   ],
7162   setup(props, { emit, attrs }) {
7163     const menu = ref();
7164     const toggle = ref();
7165     const selectedProp = toRef(props, "selected");
7166     const modelWrapper = useModelWrapper(selectedProp, emit, "update:selected");
7167     const expanded = ref(false);
7168     const toggleId = useGeneratedId("menuToggle");
7169     const menuId = useGeneratedId("menu");
7170     const { computedDisabled } = useFieldData(toRef(props, "disabled"));
7171     const { rootClasses, rootStyle, otherAttrs } = useSplitAttributes(attrs);
7172     function onKeydown(e) {
7173       if (!menu.value || computedDisabled.value || props.menuItems.length === 0 || e.key === " ") {
7174         return;
7175       }
7176       menu.value.delegateKeyNavigation(e);
7177     }
7178     useFloatingMenu(toggle, menu, {
7179       useAvailableWidth: true,
7180       placement: "bottom-start",
7181       offset: 4
7182     });
7183     return {
7184       computedDisabled,
7185       expanded,
7186       menu,
7187       menuId,
7188       modelWrapper,
7189       onKeydown,
7190       toggle,
7191       toggleId,
7192       rootClasses,
7193       rootStyle,
7194       otherAttrs
7195     };
7196   }
7197 });
7198 const _hoisted_1$b = { class: "cdx-menu-button__menu-wrapper" };
7199 function _sfc_render$c(_ctx, _cache, $props, $setup, $data, $options) {
7200   const _component_cdx_toggle_button = resolveComponent("cdx-toggle-button");
7201   const _component_cdx_menu = resolveComponent("cdx-menu");
7202   return openBlock(), createElementBlock(
7203     "div",
7204     {
7205       class: normalizeClass(["cdx-menu-button", _ctx.rootClasses]),
7206       style: normalizeStyle(_ctx.rootStyle)
7207     },
7208     [
7209       createVNode(_component_cdx_toggle_button, mergeProps({
7210         id: _ctx.toggleId,
7211         ref: "toggle"
7212       }, _ctx.otherAttrs, {
7213         modelValue: _ctx.expanded,
7214         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.expanded = $event),
7215         disabled: _ctx.computedDisabled,
7216         quiet: "",
7217         "aria-haspopup": "menu",
7218         "aria-controls": _ctx.menuId,
7219         "aria-expanded": _ctx.expanded,
7220         onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.expanded = false),
7221         onKeydown: _ctx.onKeydown
7222       }), {
7223         default: withCtx(() => [
7224           renderSlot(_ctx.$slots, "default")
7225         ]),
7226         _: 3
7227         /* FORWARDED */
7228       }, 16, ["id", "modelValue", "disabled", "aria-controls", "aria-expanded", "onKeydown"]),
7229       createElementVNode("div", _hoisted_1$b, [
7230         createVNode(_component_cdx_menu, mergeProps({
7231           id: _ctx.menuId,
7232           ref: "menu",
7233           selected: _ctx.modelWrapper,
7234           "onUpdate:selected": _cache[2] || (_cache[2] = ($event) => _ctx.modelWrapper = $event),
7235           expanded: _ctx.expanded,
7236           "onUpdate:expanded": _cache[3] || (_cache[3] = ($event) => _ctx.expanded = $event),
7237           "menu-items": _ctx.menuItems
7238         }, _ctx.menuConfig, {
7239           role: "menu",
7240           "aria-labelledby": _ctx.toggleId,
7241           footer: _ctx.footer
7242         }), {
7243           default: withCtx(({ menuItem }) => [
7244             renderSlot(_ctx.$slots, "menu-item", { menuItem })
7245           ]),
7246           _: 3
7247           /* FORWARDED */
7248         }, 16, ["id", "selected", "expanded", "menu-items", "aria-labelledby", "footer"])
7249       ])
7250     ],
7251     6
7252     /* CLASS, STYLE */
7253   );
7254 }
7255 const MenuButton = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["render", _sfc_render$c]]);
7256 const statusValidator$4 = makeStringTypeValidator(ValidationStatusTypes);
7257 const _sfc_main$b = defineComponent({
7258   name: "CdxMultiselectLookup",
7259   components: {
7260     CdxChipInput,
7261     CdxMenu
7262   },
7263   props: {
7264     /**
7265      * Current chips present in the input.
7266      *
7267      * Must be bound with `v-model:input-chips`. Initialize to an empty array if there are no
7268      * initial selections. If there are, initialize to an array of input chips matching those
7269      * selections.
7270      */
7271     inputChips: {
7272       type: Array,
7273       required: true
7274     },
7275     /**
7276      * Value(s) of the current selection(s).
7277      *
7278      * Must be bound with `v-model:selected`. Initialize to an empty array if there are no
7279      * initial selections.
7280      */
7281     selected: {
7282       type: [Array],
7283       required: true
7284     },
7285     /**
7286      * Menu items and/or menu group definitions. Initialize to an empty array if there are no
7287      * initial menu items.
7288      *
7289      * Menu groups and individual menu items will be output in the order they appear here.
7290      */
7291     menuItems: {
7292       type: Array,
7293       required: true
7294     },
7295     /**
7296      * Current value of the text input. This prop is optional and should only be used if you
7297      * need to keep track of the text input value for some reason (e.g. for validation).
7298      *
7299      * Optionally provided by `v-model:input-value` binding in the parent component.
7300      */
7301     inputValue: {
7302       type: [String, Number],
7303       default: null
7304     },
7305     /**
7306      * Whether the text input should appear below the set of input chips.
7307      *
7308      * By default, the input chips are inline with the input.
7309      */
7310     separateInput: {
7311       type: Boolean,
7312       default: false
7313     },
7314     /**
7315      * Whether the entire component is disabled.
7316      */
7317     disabled: {
7318       type: Boolean,
7319       default: false
7320     },
7321     /**
7322      * Whether the MultiselectLookup is readonly.
7323      */
7324     readonly: {
7325       type: Boolean,
7326       default: false
7327     },
7328     /**
7329      * `status` attribute of the input.
7330      */
7331     status: {
7332       type: String,
7333       default: "default",
7334       validator: statusValidator$4
7335     },
7336     /**
7337      * Configuration for various menu features. All properties default to false.
7338      *
7339      * See the MenuConfig type.
7340      *
7341      * @default {}
7342      */
7343     menuConfig: {
7344       type: Object,
7345       default: () => ({})
7346     }
7347   },
7348   emits: [
7349     /**
7350      * When the input chips change.
7351      *
7352      * @property {ChipInputItem[]} inputChips The new set of inputChips
7353      */
7354     "update:input-chips",
7355     /**
7356      * When the selected value changes.
7357      *
7358      * @property {MenuItemValue[]} selected The new set of selected values
7359      */
7360     "update:selected",
7361     /**
7362      * When the input value changes. Only emitted if the inputValue prop is provided.
7363      *
7364      * This event is emitted both when the user changes the input and when the input is changed
7365      * or cleared automatically (e.g. on selection).
7366      *
7367      * @property {string | number} inputValue The new input value
7368      */
7369     "update:input-value",
7370     /**
7371      * When the user scrolls towards the bottom of the menu.
7372      *
7373      * If it is possible to add or load more menu items, then now would be a good moment
7374      * so that the user can experience infinite scrolling.
7375      */
7376     "load-more",
7377     /**
7378      * When the user changes the value of the input. Not emitted when the input is changed
7379      * automatically (e.g. on selection).
7380      *
7381      * @property {string | number} value The new value
7382      */
7383     "input",
7384     /**
7385      * When an input value change is committed by the user (e.g. on blur)
7386      *
7387      * @property {Event} event
7388      */
7389     "change",
7390     /**
7391      * When the input comes into focus
7392      *
7393      * @property {FocusEvent} event
7394      */
7395     "focus",
7396     /**
7397      * When the input loses focus
7398      *
7399      * @property {FocusEvent} event
7400      */
7401     "blur"
7402   ],
7403   setup: (props, { emit, attrs, slots }) => {
7404     const chipInput = ref();
7405     const menu = ref();
7406     const menuId = useGeneratedId("multiselect-lookup-menu");
7407     const highlightedId = computed(() => {
7408       var _a, _b;
7409       return (_b = (_a = menu.value) == null ? void 0 : _a.getHighlightedMenuItem()) == null ? void 0 : _b.id;
7410     });
7411     const pending = ref(false);
7412     const expanded = ref(false);
7413     const isActive = ref(false);
7414     provide(AllowArbitraryKey, ref(false));
7415     const {
7416       computedDisabled,
7417       computedStatus
7418     } = useFieldData(
7419       toRef(props, "disabled"),
7420       toRef(props, "status")
7421     );
7422     const internalClasses = computed(() => ({
7423       "cdx-multiselect-lookup--disabled": computedDisabled.value,
7424       "cdx-multiselect-lookup--pending": pending.value
7425     }));
7426     const {
7427       rootClasses,
7428       rootStyle,
7429       otherAttrs
7430     } = useSplitAttributes(attrs, internalClasses);
7431     useFloatingMenu(chipInput, menu);
7432     const selectedWrapper = useModelWrapper(toRef(props, "selected"), emit, "update:selected");
7433     const inputChipsWrapper = useModelWrapper(toRef(props, "inputChips"), emit, "update:input-chips");
7434     const internalInputValue = ref("");
7435     const computedInputValue = useOptionalModelWrapper(
7436       internalInputValue,
7437       toRef(props, "inputValue"),
7438       emit,
7439       "update:input-value"
7440     );
7441     const showNoResults = computed(() => computedInputValue.value.toString().length > 0 && slots["no-results"]);
7442     function onUpdateInputValue(newVal) {
7443       return __async(this, null, function* () {
7444         yield nextTick();
7445         pending.value = newVal !== null && newVal !== "";
7446         emit("input", newVal);
7447       });
7448     }
7449     function onInputFocus(event) {
7450       isActive.value = true;
7451       if (props.menuItems.length > 0 || showNoResults.value) {
7452         expanded.value = true;
7453       }
7454       emit("focus", event);
7455     }
7456     function onInputBlur(event) {
7457       isActive.value = false;
7458       expanded.value = false;
7459       emit("blur", event);
7460     }
7461     function onKeydown(e) {
7462       if (!menu.value || computedDisabled.value || props.menuItems.length === 0 && !showNoResults.value || e.key === " ") {
7463         return;
7464       }
7465       menu.value.delegateKeyNavigation(e);
7466     }
7467     watch(toRef(props, "selected"), (newVal) => {
7468       const newSelections = newVal.filter(
7469         (selection) => inputChipsWrapper.value.find((chip) => selection === chip.value) === void 0
7470       );
7471       if (newSelections.length > 0) {
7472         newSelections.forEach((newSelection) => {
7473           var _a;
7474           const newMenuItem = (_a = menu.value) == null ? void 0 : _a.getComputedMenuItems().find(
7475             (menuItem) => menuItem.value === newSelection
7476           );
7477           if (newMenuItem) {
7478             const _b = newMenuItem, { id } = _b, newMenuItemWithoutId = __objRest(_b, ["id"]);
7479             inputChipsWrapper.value.push(newMenuItemWithoutId);
7480           }
7481         });
7482         computedInputValue.value = "";
7483         emit("input", "");
7484       }
7485       inputChipsWrapper.value = inputChipsWrapper.value.filter(
7486         (chip) => newVal.find((selection) => chip.value === selection) !== void 0
7487       );
7488     });
7489     watch(toRef(props, "inputChips"), (newVal) => {
7490       if (newVal.length < selectedWrapper.value.length) {
7491         selectedWrapper.value = newVal.map((chip) => chip.value);
7492       }
7493     });
7494     watch(toRef(props, "menuItems"), (newVal) => {
7495       if (newVal.length === 0 && !showNoResults.value) {
7496         expanded.value = false;
7497       } else if (isActive.value && pending.value) {
7498         expanded.value = true;
7499       }
7500       pending.value = false;
7501     });
7502     return {
7503       chipInput,
7504       menu,
7505       menuId,
7506       highlightedId,
7507       expanded,
7508       computedDisabled,
7509       computedStatus,
7510       rootClasses,
7511       rootStyle,
7512       otherAttrs,
7513       selectedWrapper,
7514       inputChipsWrapper,
7515       computedInputValue,
7516       onUpdateInputValue,
7517       onInputBlur,
7518       onInputFocus,
7519       onKeydown
7520     };
7521   }
7522 });
7523 function _sfc_render$b(_ctx, _cache, $props, $setup, $data, $options) {
7524   const _component_cdx_chip_input = resolveComponent("cdx-chip-input");
7525   const _component_cdx_menu = resolveComponent("cdx-menu");
7526   return openBlock(), createElementBlock(
7527     "div",
7528     {
7529       class: normalizeClass(["cdx-multiselect-lookup", _ctx.rootClasses]),
7530       style: normalizeStyle(_ctx.rootStyle)
7531     },
7532     [
7533       createVNode(_component_cdx_chip_input, mergeProps({
7534         ref: "chipInput",
7535         "input-chips": _ctx.inputChipsWrapper,
7536         "onUpdate:inputChips": _cache[0] || (_cache[0] = ($event) => _ctx.inputChipsWrapper = $event),
7537         "input-value": _ctx.computedInputValue,
7538         "onUpdate:inputValue": _cache[1] || (_cache[1] = ($event) => _ctx.computedInputValue = $event)
7539       }, _ctx.otherAttrs, {
7540         class: "cdx-multiselect-lookup__chip-input",
7541         role: "combobox",
7542         autocomplete: "off",
7543         "aria-autocomplete": "list",
7544         "aria-controls": _ctx.menuId,
7545         "aria-expanded": _ctx.expanded,
7546         "aria-activedescendant": _ctx.highlightedId,
7547         "separate-input": _ctx.separateInput,
7548         readonly: _ctx.readonly,
7549         disabled: _ctx.computedDisabled,
7550         status: _ctx.computedStatus,
7551         "onUpdate:inputValue": _ctx.onUpdateInputValue,
7552         onFocus: _ctx.onInputFocus,
7553         onBlur: _ctx.onInputBlur,
7554         onKeydown: _ctx.onKeydown
7555       }), null, 16, ["input-chips", "input-value", "aria-controls", "aria-expanded", "aria-activedescendant", "separate-input", "readonly", "disabled", "status", "onUpdate:inputValue", "onFocus", "onBlur", "onKeydown"]),
7556       createVNode(_component_cdx_menu, mergeProps({
7557         id: _ctx.menuId,
7558         ref: "menu",
7559         selected: _ctx.selectedWrapper,
7560         "onUpdate:selected": _cache[2] || (_cache[2] = ($event) => _ctx.selectedWrapper = $event),
7561         expanded: _ctx.expanded,
7562         "onUpdate:expanded": _cache[3] || (_cache[3] = ($event) => _ctx.expanded = $event),
7563         "menu-items": _ctx.menuItems
7564       }, _ctx.menuConfig, {
7565         onLoadMore: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("load-more"))
7566       }), {
7567         default: withCtx(({ menuItem }) => [
7568           renderSlot(_ctx.$slots, "menu-item", { menuItem })
7569         ]),
7570         "no-results": withCtx(() => [
7571           renderSlot(_ctx.$slots, "no-results")
7572         ]),
7573         _: 3
7574         /* FORWARDED */
7575       }, 16, ["id", "selected", "expanded", "menu-items"])
7576     ],
7577     6
7578     /* CLASS, STYLE */
7579   );
7580 }
7581 const MultiselectLookup = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["render", _sfc_render$b]]);
7582 const statusValidator$3 = makeStringTypeValidator(ValidationStatusTypes);
7583 const _sfc_main$a = defineComponent({
7584   name: "CdxRadio",
7585   components: { CdxLabel },
7586   props: {
7587     /**
7588      * Value of the currently selected radio.
7589      *
7590      * Provided by `v-model` binding in the parent component.
7591      */
7592     modelValue: {
7593       type: [String, Number, Boolean],
7594       default: ""
7595     },
7596     /**
7597      * HTML "value" attribute to assign to the input.
7598      *
7599      * Required for input groups.
7600      */
7601     inputValue: {
7602       type: [String, Number, Boolean],
7603       default: false
7604     },
7605     /**
7606      * HTML "name" attribute to assign to the input.
7607      */
7608     name: {
7609       type: String,
7610       required: true
7611     },
7612     /**
7613      * Whether the disabled attribute should be added to the input.
7614      */
7615     disabled: {
7616       type: Boolean,
7617       default: false
7618     },
7619     /**
7620      * Whether the component should display inline.
7621      *
7622      * By default, `display: block` is set and a margin exists between
7623      * sibling components, for a stacked layout.
7624      */
7625     inline: {
7626       type: Boolean,
7627       default: false
7628     },
7629     /**
7630      * Validation status of the Radio.
7631      */
7632     status: {
7633       type: String,
7634       default: "default",
7635       validator: statusValidator$3
7636     }
7637   },
7638   emits: [
7639     /**
7640      * Emitted when modelValue changes.
7641      *
7642      * @property {string | number | boolean} modelValue The new model value
7643      */
7644     "update:modelValue"
7645   ],
7646   setup(props, { emit, slots, attrs }) {
7647     var _a;
7648     useLabelChecker((_a = slots.default) == null ? void 0 : _a.call(slots), attrs, "CdxRadio");
7649     const {
7650       computedDisabled,
7651       computedStatus
7652     } = useFieldData(
7653       toRef(props, "disabled"),
7654       toRef(props, "status")
7655     );
7656     const rootClasses = computed(() => ({
7657       "cdx-radio--inline": props.inline,
7658       ["cdx-radio--status-".concat(computedStatus.value)]: true
7659     }));
7660     const customInputClasses = computed(() => ({
7661       "cdx-radio__custom-input--inline": props.inline
7662     }));
7663     const input = ref();
7664     const radioId = useGeneratedId("radio");
7665     const descriptionId = useGeneratedId("description");
7666     const focusInput = () => {
7667       input.value.focus();
7668     };
7669     const wrappedModel = useModelWrapper(toRef(props, "modelValue"), emit);
7670     return {
7671       rootClasses,
7672       computedDisabled,
7673       input,
7674       radioId,
7675       descriptionId,
7676       focusInput,
7677       wrappedModel,
7678       customInputClasses
7679     };
7680   }
7681 });
7682 const _hoisted_1$a = { class: "cdx-radio__wrapper" };
7683 const _hoisted_2$6 = ["id", "aria-describedby", "name", "value", "disabled"];
7684 const _hoisted_3$4 = /* @__PURE__ */ createElementVNode(
7685   "span",
7686   { class: "cdx-radio__icon" },
7687   null,
7688   -1
7689   /* HOISTED */
7690 );
7691 function _sfc_render$a(_ctx, _cache, $props, $setup, $data, $options) {
7692   const _component_cdx_label = resolveComponent("cdx-label");
7693   return openBlock(), createElementBlock(
7694     "div",
7695     {
7696       class: normalizeClass(["cdx-radio", _ctx.rootClasses])
7697     },
7698     [
7699       createElementVNode("div", _hoisted_1$a, [
7700         withDirectives(createElementVNode("input", {
7701           id: _ctx.radioId,
7702           ref: "input",
7703           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.wrappedModel = $event),
7704           class: "cdx-radio__input",
7705           type: "radio",
7706           "aria-describedby": _ctx.$slots.description && _ctx.$slots.description().length > 0 ? _ctx.descriptionId : void 0,
7707           name: _ctx.name,
7708           value: _ctx.inputValue,
7709           disabled: _ctx.computedDisabled
7710         }, null, 8, _hoisted_2$6), [
7711           [vModelRadio, _ctx.wrappedModel]
7712         ]),
7713         _hoisted_3$4,
7714         _ctx.$slots.default && _ctx.$slots.default().length ? (openBlock(), createBlock(_component_cdx_label, {
7715           key: 0,
7716           class: "cdx-radio__label",
7717           "input-id": _ctx.radioId,
7718           "description-id": _ctx.$slots.description && _ctx.$slots.description().length > 0 ? _ctx.descriptionId : void 0,
7719           disabled: _ctx.computedDisabled,
7720           onClick: _ctx.focusInput
7721         }, createSlots({
7722           default: withCtx(() => [
7723             renderSlot(_ctx.$slots, "default")
7724           ]),
7725           _: 2
7726           /* DYNAMIC */
7727         }, [
7728           _ctx.$slots.description && _ctx.$slots.description().length > 0 ? {
7729             name: "description",
7730             fn: withCtx(() => [
7731               renderSlot(_ctx.$slots, "description")
7732             ]),
7733             key: "0"
7734           } : void 0
7735         ]), 1032, ["input-id", "description-id", "disabled", "onClick"])) : createCommentVNode("v-if", true)
7736       ]),
7737       _ctx.$slots["custom-input"] ? (openBlock(), createElementBlock(
7738         "div",
7739         {
7740           key: 0,
7741           class: normalizeClass(["cdx-radio__custom-input", _ctx.customInputClasses])
7742         },
7743         [
7744           renderSlot(_ctx.$slots, "custom-input")
7745         ],
7746         2
7747         /* CLASS */
7748       )) : createCommentVNode("v-if", true)
7749     ],
7750     2
7751     /* CLASS */
7752   );
7753 }
7754 const Radio = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["render", _sfc_render$a]]);
7755 const statusValidator$2 = makeStringTypeValidator(ValidationStatusTypes);
7756 const _sfc_main$9 = defineComponent({
7757   name: "CdxSearchInput",
7758   components: {
7759     CdxButton,
7760     CdxTextInput
7761   },
7762   /**
7763    * Attributes, besides class, will be passed to the TextInput's input element.
7764    */
7765   inheritAttrs: false,
7766   props: {
7767     /**
7768      * Value of the search input, provided by `v-model` binding in the parent component.
7769      */
7770     modelValue: {
7771       type: [String, Number],
7772       default: ""
7773     },
7774     /**
7775      *
7776      * Whether to display the search button.
7777      */
7778     useButton: {
7779       type: Boolean,
7780       default: false
7781     },
7782     // DEPRECATED: set default to 'Search' (T368444).
7783     /**
7784      * Search button text.
7785      *
7786      * Omit this prop to use the default value, "Search".
7787      */
7788     buttonLabel: {
7789       type: String,
7790       default: ""
7791     },
7792     /**
7793      * Whether the search input is disabled.
7794      */
7795     disabled: {
7796       type: Boolean,
7797       default: false
7798     },
7799     /**
7800      * `status` property of the TextInput component
7801      */
7802     status: {
7803       type: String,
7804       default: "default",
7805       validator: statusValidator$2
7806     }
7807   },
7808   emits: [
7809     /**
7810      * When the input value changes
7811      *
7812      * @property {string | number} value The new value
7813      */
7814     "update:modelValue",
7815     /**
7816      * When the submit button is clicked.
7817      *
7818      * @property {string | number} value The current input
7819      */
7820     "submit-click",
7821     /**
7822      * When the input value changes via direct use of the input
7823      *
7824      * @property {InputEvent} event
7825      */
7826     "input",
7827     /**
7828      * When an input value change is committed by the user (e.g. on blur)
7829      *
7830      * @property {Event} event
7831      */
7832     "change",
7833     /**
7834      * When the input comes into focus
7835      *
7836      * @property {FocusEvent} event
7837      */
7838     "focus",
7839     /**
7840      * When the input loses focus
7841      *
7842      * @property {FocusEvent} event
7843      */
7844     "blur"
7845   ],
7846   setup(props, { emit, attrs }) {
7847     const wrappedModel = useModelWrapper(toRef(props, "modelValue"), emit);
7848     const { computedDisabled } = useFieldData(toRef(props, "disabled"));
7849     const internalClasses = computed(() => ({
7850       "cdx-search-input--has-end-button": !!props.buttonLabel || props.useButton
7851     }));
7852     const {
7853       rootClasses,
7854       rootStyle,
7855       otherAttrs
7856     } = useSplitAttributes(attrs, internalClasses);
7857     const translatedSearchButtonLabel = useI18nWithOverride(
7858       toRef(props, "buttonLabel"),
7859       "cdx-search-input-search-button-label",
7860       // Allow custom button label via props or fallback to a default English string.
7861       "Search"
7862     );
7863     const useButtonOrLabel = computed(
7864       () => props.useButton || props.buttonLabel.length > 0
7865     );
7866     const handleSubmit = () => {
7867       emit("submit-click", wrappedModel.value);
7868     };
7869     return {
7870       wrappedModel,
7871       computedDisabled,
7872       rootClasses,
7873       rootStyle,
7874       otherAttrs,
7875       handleSubmit,
7876       searchIcon: k7,
7877       translatedSearchButtonLabel,
7878       useButtonOrLabel
7879     };
7880   },
7881   methods: {
7882     /**
7883      * Focus the component's input element.
7884      *
7885      * @public
7886      */
7887     focus() {
7888       const textInput = this.$refs.textInput;
7889       textInput.focus();
7890     }
7891   }
7892 });
7893 const _hoisted_1$9 = { class: "cdx-search-input__input-wrapper" };
7894 function _sfc_render$9(_ctx, _cache, $props, $setup, $data, $options) {
7895   const _component_cdx_text_input = resolveComponent("cdx-text-input");
7896   const _component_cdx_button = resolveComponent("cdx-button");
7897   return openBlock(), createElementBlock(
7898     "div",
7899     {
7900       class: normalizeClass(["cdx-search-input", _ctx.rootClasses]),
7901       style: normalizeStyle(_ctx.rootStyle)
7902     },
7903     [
7904       createElementVNode("div", _hoisted_1$9, [
7905         createVNode(_component_cdx_text_input, mergeProps({
7906           ref: "textInput",
7907           modelValue: _ctx.wrappedModel,
7908           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.wrappedModel = $event),
7909           class: "cdx-search-input__text-input",
7910           "input-type": "search",
7911           "start-icon": _ctx.searchIcon,
7912           disabled: _ctx.computedDisabled,
7913           status: _ctx.status
7914         }, _ctx.otherAttrs, {
7915           onKeydown: withKeys(_ctx.handleSubmit, ["enter"]),
7916           onInput: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("input", $event)),
7917           onChange: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("change", $event)),
7918           onFocus: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("focus", $event)),
7919           onBlur: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("blur", $event))
7920         }), null, 16, ["modelValue", "start-icon", "disabled", "status", "onKeydown"]),
7921         renderSlot(_ctx.$slots, "default")
7922       ]),
7923       _ctx.useButtonOrLabel ? (openBlock(), createBlock(_component_cdx_button, {
7924         key: 0,
7925         class: "cdx-search-input__end-button",
7926         disabled: _ctx.computedDisabled,
7927         onClick: _ctx.handleSubmit
7928       }, {
7929         default: withCtx(() => [
7930           createTextVNode(
7931             toDisplayString(_ctx.translatedSearchButtonLabel),
7932             1
7933             /* TEXT */
7934           )
7935         ]),
7936         _: 1
7937         /* STABLE */
7938       }, 8, ["disabled", "onClick"])) : createCommentVNode("v-if", true)
7939     ],
7940     6
7941     /* CLASS, STYLE */
7942   );
7943 }
7944 const CdxSearchInput = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["render", _sfc_render$9]]);
7945 const statusValidator$1 = makeStringTypeValidator(ValidationStatusTypes);
7946 const _sfc_main$8 = defineComponent({
7947   name: "CdxSelect",
7948   components: {
7949     CdxIcon,
7950     CdxMenu
7951   },
7952   /**
7953    * We want the select handle to inherit attributes, not the root element.
7954    */
7955   inheritAttrs: false,
7956   props: {
7957     /**
7958      * Menu items and/or menu group definitions.
7959      *
7960      * Menu groups and individual menu items will be output in the order they appear here.
7961      */
7962     menuItems: {
7963       type: Array,
7964       required: true
7965     },
7966     /**
7967      * Value of the current selection.
7968      *
7969      * Must be bound with `v-model:selected`.
7970      *
7971      * The property should be initialized to `null` rather than using a falsy value.
7972      */
7973     selected: {
7974       type: [String, Number, null],
7975       required: true
7976     },
7977     /**
7978      * Label to display when no selection has been made.
7979      */
7980     defaultLabel: {
7981       type: String,
7982       default: ""
7983     },
7984     /**
7985      * Whether the dropdown is disabled.
7986      */
7987     disabled: {
7988       type: Boolean,
7989       default: false
7990     },
7991     /**
7992      * Configuration for various menu features. All properties default to false.
7993      *
7994      * See the MenuConfig type.
7995      *
7996      * @default {}
7997      */
7998     menuConfig: {
7999       type: Object,
8000       default: () => ({})
8001     },
8002     /**
8003      * An icon at the start of the select element
8004      * displayed when no selection has been made.
8005      */
8006     defaultIcon: {
8007       type: [String, Object],
8008       default: void 0
8009     },
8010     /**
8011      * `status` attribute of the input.
8012      */
8013     status: {
8014       type: String,
8015       default: "default",
8016       validator: statusValidator$1
8017     }
8018   },
8019   emits: [
8020     /**
8021      * When the selection value changes.
8022      *
8023      * @property {string | number | null} modelValue The new model value
8024      */
8025     "update:selected",
8026     /**
8027      * When the user scrolls towards the bottom of the menu.
8028      *
8029      * If it is possible to add or load more menu items, then now would be a good moment
8030      * so that the user can experience infinite scrolling.
8031      */
8032     "load-more"
8033   ],
8034   setup(props, { emit, attrs }) {
8035     const handle = ref();
8036     const menu = ref();
8037     const descriptionId = inject(FieldDescriptionIdKey, void 0);
8038     const menuId = useGeneratedId("select-menu");
8039     const expanded = ref(false);
8040     const handleId = attrs.id || useGeneratedId("select-handle");
8041     const {
8042       computedDisabled,
8043       computedStatus,
8044       computedInputId: computedHandleId
8045     } = useFieldData(
8046       toRef(props, "disabled"),
8047       toRef(props, "status"),
8048       handleId
8049     );
8050     const modelWrapper = useModelWrapper(toRef(props, "selected"), emit, "update:selected");
8051     const selectedMenuItem = computed(
8052       () => {
8053         var _a;
8054         return (_a = menu.value) == null ? void 0 : _a.getComputedMenuItems().find(
8055           (menuItem) => menuItem.value === props.selected
8056         );
8057       }
8058     );
8059     const currentLabel = computed(() => {
8060       var _a;
8061       return selectedMenuItem.value ? (_a = selectedMenuItem.value.label) != null ? _a : selectedMenuItem.value.value : props.defaultLabel;
8062     });
8063     const startIcon = computed(() => {
8064       var _a;
8065       if (props.defaultIcon && !selectedMenuItem.value) {
8066         return props.defaultIcon;
8067       } else if ((_a = selectedMenuItem.value) == null ? void 0 : _a.icon) {
8068         return selectedMenuItem.value.icon;
8069       }
8070       return void 0;
8071     });
8072     const internalClasses = computed(() => ({
8073       "cdx-select-vue--enabled": !computedDisabled.value,
8074       "cdx-select-vue--disabled": computedDisabled.value,
8075       "cdx-select-vue--expanded": expanded.value,
8076       "cdx-select-vue--value-selected": !!selectedMenuItem.value,
8077       "cdx-select-vue--no-selections": !selectedMenuItem.value,
8078       "cdx-select-vue--has-start-icon": !!startIcon.value,
8079       ["cdx-select-vue--status-".concat(computedStatus.value)]: true
8080     }));
8081     const {
8082       rootClasses,
8083       rootStyle,
8084       otherAttrs
8085     } = useSplitAttributes(attrs, internalClasses);
8086     const otherAttrsMinusId = computed(() => {
8087       const _a = otherAttrs.value, { id } = _a, everythingElse = __objRest(_a, ["id"]);
8088       return everythingElse;
8089     });
8090     const highlightedId = computed(() => {
8091       var _a, _b;
8092       return (_b = (_a = menu.value) == null ? void 0 : _a.getHighlightedMenuItem()) == null ? void 0 : _b.id;
8093     });
8094     function onBlur() {
8095       expanded.value = false;
8096     }
8097     function onClick() {
8098       var _a;
8099       if (computedDisabled.value) {
8100         return;
8101       }
8102       expanded.value = !expanded.value;
8103       (_a = handle.value) == null ? void 0 : _a.focus();
8104     }
8105     function onKeydown(e) {
8106       var _a;
8107       if (computedDisabled.value) {
8108         return;
8109       }
8110       (_a = menu.value) == null ? void 0 : _a.delegateKeyNavigation(e, { characterNavigation: true });
8111     }
8112     useFloatingMenu(handle, menu);
8113     return {
8114       handle,
8115       menu,
8116       computedHandleId,
8117       descriptionId,
8118       menuId,
8119       modelWrapper,
8120       selectedMenuItem,
8121       highlightedId,
8122       expanded,
8123       computedDisabled,
8124       onBlur,
8125       currentLabel,
8126       rootClasses,
8127       rootStyle,
8128       otherAttrsMinusId,
8129       onClick,
8130       onKeydown,
8131       startIcon,
8132       cdxIconExpand: M4
8133     };
8134   }
8135 });
8136 const _hoisted_1$8 = ["aria-disabled"];
8137 const _hoisted_2$5 = ["id", "aria-controls", "aria-activedescendant", "aria-expanded", "aria-describedby"];
8138 function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
8139   const _component_cdx_icon = resolveComponent("cdx-icon");
8140   const _component_cdx_menu = resolveComponent("cdx-menu");
8141   return openBlock(), createElementBlock("div", {
8142     class: normalizeClass(["cdx-select-vue", _ctx.rootClasses]),
8143     style: normalizeStyle(_ctx.rootStyle),
8144     "aria-disabled": _ctx.computedDisabled
8145   }, [
8146     createElementVNode("div", mergeProps({
8147       id: _ctx.computedHandleId,
8148       ref: "handle",
8149       class: "cdx-select-vue__handle"
8150     }, _ctx.otherAttrsMinusId, {
8151       tabindex: "0",
8152       role: "combobox",
8153       "aria-controls": _ctx.menuId,
8154       "aria-activedescendant": _ctx.highlightedId,
8155       "aria-expanded": _ctx.expanded,
8156       "aria-describedby": _ctx.descriptionId,
8157       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args)),
8158       onBlur: _cache[1] || (_cache[1] = (...args) => _ctx.onBlur && _ctx.onBlur(...args)),
8159       onKeydown: _cache[2] || (_cache[2] = (...args) => _ctx.onKeydown && _ctx.onKeydown(...args))
8160     }), [
8161       renderSlot(_ctx.$slots, "label", {
8162         selectedMenuItem: _ctx.selectedMenuItem,
8163         defaultLabel: _ctx.defaultLabel
8164       }, () => [
8165         createTextVNode(
8166           toDisplayString(_ctx.currentLabel),
8167           1
8168           /* TEXT */
8169         )
8170       ]),
8171       _ctx.startIcon ? (openBlock(), createBlock(_component_cdx_icon, {
8172         key: 0,
8173         icon: _ctx.startIcon,
8174         class: "cdx-select-vue__start-icon"
8175       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
8176       createVNode(_component_cdx_icon, {
8177         icon: _ctx.cdxIconExpand,
8178         class: "cdx-select-vue__indicator"
8179       }, null, 8, ["icon"])
8180     ], 16, _hoisted_2$5),
8181     createVNode(_component_cdx_menu, mergeProps({
8182       id: _ctx.menuId,
8183       ref: "menu",
8184       selected: _ctx.modelWrapper,
8185       "onUpdate:selected": _cache[3] || (_cache[3] = ($event) => _ctx.modelWrapper = $event),
8186       expanded: _ctx.expanded,
8187       "onUpdate:expanded": _cache[4] || (_cache[4] = ($event) => _ctx.expanded = $event),
8188       "menu-items": _ctx.menuItems
8189     }, _ctx.menuConfig, {
8190       onLoadMore: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("load-more"))
8191     }), {
8192       default: withCtx(({ menuItem }) => [
8193         renderSlot(_ctx.$slots, "menu-item", { menuItem })
8194       ]),
8195       _: 3
8196       /* FORWARDED */
8197     }, 16, ["id", "selected", "expanded", "menu-items"])
8198   ], 14, _hoisted_1$8);
8199 }
8200 const CdxSelect = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8]]);
8201 const _sfc_main$7 = defineComponent({
8202   name: "CdxTablePager",
8203   components: { CdxButton, CdxIcon, CdxSelect },
8204   props: {
8205     paginationSizeOptions: {
8206       type: Array,
8207       required: true
8208     },
8209     itemsPerPage: {
8210       type: Number,
8211       required: true
8212     },
8213     nextDisabled: {
8214       type: Boolean,
8215       default: false
8216     },
8217     prevDisabled: {
8218       type: Boolean,
8219       default: false
8220     },
8221     lastDisabled: {
8222       type: Boolean,
8223       default: false
8224     }
8225   },
8226   emits: [
8227     /**
8228      * When the items per page option changes
8229      *
8230      * @property {number} itemsPerPage the number of items to display
8231      */
8232     "update:itemsPerPage",
8233     /**
8234      * Emitted when the user requests the first page of data
8235      */
8236     "first",
8237     /**
8238      * Emitted when the user requests the last page of data
8239      */
8240     "last",
8241     /**
8242      * Emitted when the user requests the next page of data
8243      */
8244     "next",
8245     /**
8246      * Emitted when the user requests the previous page of data
8247      */
8248     "prev"
8249   ],
8250   setup(props, { emit }) {
8251     const wrappedItemsPerPage = useModelWrapper(
8252       toRef(props, "itemsPerPage"),
8253       emit,
8254       "update:itemsPerPage"
8255     );
8256     const defaultItemsPerPageLabel = useI18n(
8257       "cdx-table-pager-items-per-page-default",
8258       "Results per page"
8259     );
8260     const currentItemsPerPageLabel = useI18n(
8261       "cdx-table-pager-items-per-page-current",
8262       (current) => "".concat(current, " rows"),
8263       [wrappedItemsPerPage]
8264     );
8265     const btnLabelFirst = useI18n(
8266       "cdx-table-pager-button-first-page",
8267       "First page"
8268     );
8269     const btnLabelNext = useI18n(
8270       "cdx-table-pager-button-next-page",
8271       "Next page"
8272     );
8273     const btnLabelPrev = useI18n(
8274       "cdx-table-pager-button-prev-page",
8275       "Previous page"
8276     );
8277     const btnLabelLast = useI18n(
8278       "cdx-table-pager-button-last-page",
8279       "Last page"
8280     );
8281     return {
8282       defaultItemsPerPageLabel,
8283       currentItemsPerPageLabel,
8284       btnLabelFirst,
8285       btnLabelNext,
8286       btnLabelPrev,
8287       btnLabelLast,
8288       wrappedItemsPerPage,
8289       cdxIconPrevious: e7,
8290       cdxIconNext: X6,
8291       cdxIconMoveFirst: N6,
8292       cdxIconMoveLast: O6
8293     };
8294   }
8295 });
8296 const _hoisted_1$7 = { class: "cdx-table-pager" };
8297 const _hoisted_2$4 = { class: "cdx-table-pager__start" };
8298 const _hoisted_3$3 = { key: 0 };
8299 const _hoisted_4$3 = { key: 1 };
8300 const _hoisted_5$3 = { class: "cdx-table-pager__center" };
8301 const _hoisted_6$3 = { class: "cdx-table-pager__end" };
8302 function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
8303   const _component_cdx_select = resolveComponent("cdx-select");
8304   const _component_cdx_icon = resolveComponent("cdx-icon");
8305   const _component_cdx_button = resolveComponent("cdx-button");
8306   return openBlock(), createElementBlock("div", _hoisted_1$7, [
8307     createElementVNode("div", _hoisted_2$4, [
8308       createVNode(_component_cdx_select, {
8309         selected: _ctx.wrappedItemsPerPage,
8310         "onUpdate:selected": _cache[0] || (_cache[0] = ($event) => _ctx.wrappedItemsPerPage = $event),
8311         "default-label": _ctx.defaultItemsPerPageLabel,
8312         "menu-items": _ctx.paginationSizeOptions
8313       }, {
8314         label: withCtx(({ selectedMenuItem, defaultLabel }) => [
8315           selectedMenuItem ? (openBlock(), createElementBlock("span", _hoisted_3$3, [
8316             createElementVNode(
8317               "span",
8318               null,
8319               toDisplayString(_ctx.currentItemsPerPageLabel),
8320               1
8321               /* TEXT */
8322             )
8323           ])) : (openBlock(), createElementBlock(
8324             "span",
8325             _hoisted_4$3,
8326             toDisplayString(defaultLabel),
8327             1
8328             /* TEXT */
8329           ))
8330         ]),
8331         _: 1
8332         /* STABLE */
8333       }, 8, ["selected", "default-label", "menu-items"])
8334     ]),
8335     createElementVNode("div", _hoisted_5$3, [
8336       renderSlot(_ctx.$slots, "default")
8337     ]),
8338     createElementVNode("div", _hoisted_6$3, [
8339       createVNode(_component_cdx_button, {
8340         disabled: _ctx.prevDisabled,
8341         class: "cdx-table-pager__button-first",
8342         weight: "quiet",
8343         "aria-label": _ctx.btnLabelFirst,
8344         onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("first"))
8345       }, {
8346         default: withCtx(() => [
8347           createVNode(_component_cdx_icon, { icon: _ctx.cdxIconMoveFirst }, null, 8, ["icon"])
8348         ]),
8349         _: 1
8350         /* STABLE */
8351       }, 8, ["disabled", "aria-label"]),
8352       createVNode(_component_cdx_button, {
8353         disabled: _ctx.prevDisabled,
8354         class: "cdx-table-pager__button-prev",
8355         weight: "quiet",
8356         "aria-label": _ctx.btnLabelPrev,
8357         onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("prev"))
8358       }, {
8359         default: withCtx(() => [
8360           createVNode(_component_cdx_icon, { icon: _ctx.cdxIconPrevious }, null, 8, ["icon"])
8361         ]),
8362         _: 1
8363         /* STABLE */
8364       }, 8, ["disabled", "aria-label"]),
8365       createVNode(_component_cdx_button, {
8366         disabled: _ctx.nextDisabled,
8367         class: "cdx-table-pager__button-next",
8368         weight: "quiet",
8369         "aria-label": _ctx.btnLabelNext,
8370         onClick: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("next"))
8371       }, {
8372         default: withCtx(() => [
8373           createVNode(_component_cdx_icon, { icon: _ctx.cdxIconNext }, null, 8, ["icon"])
8374         ]),
8375         _: 1
8376         /* STABLE */
8377       }, 8, ["disabled", "aria-label"]),
8378       createVNode(_component_cdx_button, {
8379         disabled: _ctx.nextDisabled || _ctx.lastDisabled,
8380         class: "cdx-table-pager__button-last",
8381         weight: "quiet",
8382         "aria-label": _ctx.btnLabelLast,
8383         onClick: _cache[4] || (_cache[4] = ($event) => _ctx.$emit("last"))
8384       }, {
8385         default: withCtx(() => [
8386           createVNode(_component_cdx_icon, { icon: _ctx.cdxIconMoveLast }, null, 8, ["icon"])
8387         ]),
8388         _: 1
8389         /* STABLE */
8390       }, 8, ["disabled", "aria-label"])
8391     ])
8392   ]);
8393 }
8394 const CdxTablePager = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7]]);
8395 const tableTextAlignmentsValidator = makeStringTypeValidator(TableTextAlignments);
8396 const paginationPositionValidator = makeStringTypeValidator(TablePaginationPositions);
8397 const iconMap = {
8398   none: Z7,
8399   asc: u8,
8400   desc: n4
8401 };
8402 const sortDirectionMap = {
8403   none: "none",
8404   asc: "ascending",
8405   desc: "descending"
8406 };
8407 const _sfc_main$6 = defineComponent({
8408   name: "CdxTable",
8409   components: {
8410     CdxCheckbox,
8411     CdxIcon,
8412     CdxTablePager,
8413     CdxProgressBar
8414   },
8415   props: {
8416     /**
8417      * Table caption.
8418      *
8419      * Required to support users of assistive technology, but can be visually hidden.
8420      */
8421     caption: {
8422       type: String,
8423       required: true
8424     },
8425     /**
8426      * Whether to visually hide the caption.
8427      */
8428     hideCaption: {
8429       type: Boolean,
8430       default: false
8431     },
8432     /**
8433      * Column definitions.
8434      *
8435      * @default []
8436      */
8437     columns: {
8438       type: Array,
8439       default: () => [],
8440       validator: (value) => {
8441         const ids = value.map((column) => column.id);
8442         const hasUniqueIds = new Set(ids).size === ids.length;
8443         if (!hasUniqueIds) {
8444           console.warn(
8445             '[CdxTable]: Each column in the "columns" prop must have a unique "id".'
8446           );
8447           return false;
8448         }
8449         return true;
8450       }
8451     },
8452     /**
8453      * Table data.
8454      *
8455      * An array of objects, with each object representing the data for a table row. Item keys
8456      * should align with column IDs, as defined in the `columns` prop.
8457      *
8458      * @default []
8459      */
8460     data: {
8461       type: Array,
8462       default: () => [],
8463       validator: (value, props) => {
8464         if (!Array.isArray(props.columns) || props.columns.length === 0 || value.length === 0) {
8465           return true;
8466         }
8467         const hasSort = props.columns.some((column) => "allowSort" in column);
8468         const rowsHaveIds = value.every((row) => TableRowIdentifier in row);
8469         if (hasSort && props.useRowSelection && !rowsHaveIds) {
8470           console.warn(
8471             '[CdxTable]: With sorting and row selection, each row in the "data" prop must have a "TableRowIdentifier".'
8472           );
8473           return false;
8474         }
8475         return true;
8476       }
8477     },
8478     /**
8479      * Whether to use `<th>` for the first cell in each row.
8480      */
8481     useRowHeaders: {
8482       type: Boolean,
8483       default: false
8484     },
8485     /**
8486      * Whether vertical borders separating columns should be rendered.
8487      */
8488     showVerticalBorders: {
8489       type: Boolean,
8490       default: false
8491     },
8492     /**
8493      * Whether to enable row selection.
8494      */
8495     useRowSelection: {
8496       type: Boolean,
8497       default: false
8498     },
8499     /**
8500      * An array of selected row indices. Must be bound with `v-model:selected-rows`.
8501      *
8502      * If sorting is also enabled, this will be an array of TableRowIdentifiers.
8503      *
8504      * @default []
8505      */
8506     selectedRows: {
8507       type: Array,
8508       default: () => []
8509     },
8510     /**
8511      * Definition of sort order. Column(s) can be sorted ascending, descending, or not sorted.
8512      * To display data unsorted initially, set to an empty object initially.
8513      * Must be bound with v-model:sort
8514      *
8515      * @default {}
8516      */
8517     sort: {
8518       type: Object,
8519       default: () => ({})
8520     },
8521     /**
8522      * Whether the table is waiting for data to be fetched.
8523      */
8524     pending: {
8525       type: Boolean,
8526       default: false
8527     },
8528     /**
8529      * Whether to enable pagination.
8530      */
8531     paginate: {
8532       type: Boolean,
8533       default: false
8534     },
8535     /**
8536      * Whether the table is paginating through remote data. Setting this to
8537      * "true" will cause the table to emit events indicating that more data
8538      * should be loaded when the user navigates between pages.
8539      */
8540     serverPagination: {
8541       type: Boolean,
8542       default: false
8543     },
8544     /**
8545      * The total number of rows/results available on the server that the
8546      * user can access via pagination. Providing this value will make for
8547      * a better user experience when navigating through pages of remote
8548      * data, but it is not required.
8549      */
8550     totalRows: {
8551       type: Number,
8552       default: NaN
8553     },
8554     /**
8555      * Where the pagination controls should appear relative to the table body.
8556      */
8557     paginationPosition: {
8558       type: String,
8559       default: "bottom",
8560       validator: paginationPositionValidator
8561     },
8562     /**
8563      * Pre-defined options for how may rows should be displayed per page.
8564      * The value of these menu items must be a number.
8565      *
8566      * @default [ { value: 10 }, { value: 20 }, { value: 50 } ]
8567      */
8568     paginationSizeOptions: {
8569       type: Array,
8570       default: () => [
8571         { value: 10 },
8572         { value: 20 },
8573         { value: 50 }
8574       ],
8575       validator: (value) => {
8576         const hasNumberValue = (item) => typeof item.value === "number";
8577         if (value.every(hasNumberValue)) {
8578           return true;
8579         } else {
8580           console.warn('[CdxTable]: "value" property of all menu items in PaginationOptions must be a number.');
8581           return false;
8582         }
8583       }
8584     },
8585     /**
8586      * The default number of rows to show per page. For basic pagination,
8587      * this will default to the value of the first of the pagination options
8588      * if not provided. For server-side pagination, this will default to
8589      * the initial number of rows if no default is provided.
8590      *
8591      * @default paginationSizeOptions[ 0 ].value
8592      */
8593     paginationSizeDefault: {
8594       type: Number,
8595       default: (rawProps) => {
8596         if (rawProps.paginate && rawProps.serverPagination) {
8597           return rawProps.data.length;
8598         } else {
8599           return rawProps.paginationSizeOptions[0].value;
8600         }
8601       }
8602     }
8603   },
8604   emits: [
8605     /**
8606      * When the selected row(s) changes.
8607      *
8608      * @property {string[]} selectedRows The new selected rows.
8609      */
8610     "update:selectedRows",
8611     /**
8612      * When the sort order changes emit an event to update the sort order.
8613      *
8614      * @property {Object} sort The new sort order.
8615      */
8616     "update:sort",
8617     /**
8618      * When the user requests another page of data from the server.
8619      *
8620      * @property {number} offset Index of the first visible row on the new page.
8621      * @property {number} rows Number of rows to display.
8622      */
8623     "load-more",
8624     /**
8625      * When the user requests the last page of data from the server.
8626      *
8627      * @property {number} rows Number of rows to display.
8628      */
8629     "last"
8630   ],
8631   setup(props, { emit }) {
8632     const offset2 = ref(0);
8633     const pageSize = ref(props.paginationSizeDefault);
8634     const dataForDisplay = computed(() => {
8635       if (props.serverPagination && props.paginate) {
8636         return props.data;
8637       } else if (props.paginate) {
8638         return props.data.slice(offset2.value, pageSize.value + offset2.value);
8639       } else {
8640         return props.data;
8641       }
8642     });
8643     const totalCount = computed(() => {
8644       var _a;
8645       if (props.serverPagination) {
8646         return (_a = props.totalRows) != null ? _a : NaN;
8647       } else {
8648         return props.data.length;
8649       }
8650     });
8651     const indeterminate = computed(() => isNaN(totalCount.value));
8652     const currentCount = computed(() => dataForDisplay.value.length);
8653     const firstOrdinal = computed(() => offset2.value + 1);
8654     const lastOrdinal = computed(() => offset2.value + currentCount.value);
8655     const lastDisabled = computed(() => indeterminate.value);
8656     const prevDisabled = computed(() => offset2.value <= 0);
8657     const nextDisabled = computed(() => {
8658       if (indeterminate.value) {
8659         return currentCount.value < pageSize.value;
8660       } else {
8661         return offset2.value + pageSize.value >= totalCount.value;
8662       }
8663     });
8664     const paginationStatusMessageDeterminateShort = useI18n(
8665       "cdx-table-pagination-status-message-determinate-short",
8666       (x, y, z) => "".concat(x, "–").concat(y, " of ").concat(z),
8667       [firstOrdinal, lastOrdinal, totalCount]
8668     );
8669     const paginationStatusMessageDeterminateLong = useI18n(
8670       "cdx-table-pagination-status-message-determinate-long",
8671       (x, y, z) => "Showing results ".concat(x, "–").concat(y, " of ").concat(z),
8672       [firstOrdinal, lastOrdinal, totalCount]
8673     );
8674     const paginationStatusMessageIndeterminateShort = useI18n(
8675       "cdx-table-pagination-status-message-indeterminate-short",
8676       (x, y) => "".concat(x, "–").concat(y, " of many"),
8677       [firstOrdinal, lastOrdinal]
8678     );
8679     const paginationStatusMessageIndeterminateLong = useI18n(
8680       "cdx-table-pagination-status-message-indeterminate-long",
8681       (x, y) => "Showing results ".concat(x, "–").concat(y, " of many"),
8682       [firstOrdinal, lastOrdinal]
8683     );
8684     const paginationStatusMessageIndeterminateFinal = useI18n(
8685       "cdx-table-pagination-status-message-indeterminate-final",
8686       (x) => "Showing the last ".concat(x, " results"),
8687       [currentCount]
8688     );
8689     const paginationStatusMessagePending = useI18n(
8690       "cdx-table-pagination-status-message-pending",
8691       "Loading results..."
8692     );
8693     const paginationStatusMessageShort = computed(() => {
8694       if (props.pending) {
8695         return paginationStatusMessagePending.value;
8696       } else if (indeterminate.value && nextDisabled.value) {
8697         return paginationStatusMessageIndeterminateFinal.value;
8698       } else if (indeterminate.value) {
8699         return paginationStatusMessageIndeterminateShort.value;
8700       } else {
8701         return paginationStatusMessageDeterminateShort.value;
8702       }
8703     });
8704     const paginationStatusMessageLong = computed(() => {
8705       if (props.pending) {
8706         return paginationStatusMessagePending.value;
8707       } else if (indeterminate.value && nextDisabled.value) {
8708         return paginationStatusMessageIndeterminateFinal.value;
8709       } else if (indeterminate.value) {
8710         return paginationStatusMessageIndeterminateLong.value;
8711       } else {
8712         return paginationStatusMessageDeterminateLong.value;
8713       }
8714     });
8715     function onNext() {
8716       offset2.value += pageSize.value;
8717       if (props.serverPagination) {
8718         emit("load-more", offset2.value, pageSize.value);
8719       }
8720     }
8721     function onPrev() {
8722       if (offset2.value - pageSize.value < 1) {
8723         onFirst();
8724       } else {
8725         offset2.value -= pageSize.value;
8726         if (props.serverPagination) {
8727           emit("load-more", offset2.value, pageSize.value);
8728         }
8729       }
8730     }
8731     function onFirst() {
8732       offset2.value = 0;
8733       if (props.serverPagination) {
8734         emit("load-more", offset2.value, pageSize.value);
8735       }
8736     }
8737     function onLast() {
8738       if (totalCount.value % pageSize.value === 0) {
8739         offset2.value = totalCount.value - pageSize.value;
8740         emit("load-more", offset2.value, pageSize.value);
8741       } else {
8742         offset2.value = Math.floor(totalCount.value / pageSize.value) * pageSize.value;
8743         emit("load-more", offset2.value, pageSize.value);
8744       }
8745     }
8746     watch(pageSize, (newPageSize) => {
8747       if (props.serverPagination) {
8748         emit("load-more", offset2.value, newPageSize);
8749       }
8750     });
8751     const wrappedSelectedRows = useModelWrapper(toRef(props, "selectedRows"), emit, "update:selectedRows");
8752     const selectAll = ref(totalCount.value === wrappedSelectedRows.value.length);
8753     const selectAllIndeterminate = ref(false);
8754     const activeSortColumn = computed(() => Object.keys(props.sort)[0]);
8755     const hasSortableColumns = computed(
8756       () => props.columns.some((column) => column.allowSort)
8757     );
8758     const tableClasses = computed(() => {
8759       var _a;
8760       const useFixedLayout = (_a = props.columns) == null ? void 0 : _a.some((column) => "width" in column || "minWidth" in column);
8761       return {
8762         "cdx-table__table--layout-fixed": useFixedLayout,
8763         "cdx-table__table--borders-vertical": props.showVerticalBorders
8764       };
8765     });
8766     const translatedSortCaption = useI18n(
8767       "cdx-table-sort-caption",
8768       (caption) => "".concat(caption, " (column headers with buttons are sortable)."),
8769       [toRef(props, "caption")]
8770     );
8771     const translatedSelectRowLabel = (rowIndex, totalRows) => useI18n(
8772       "cdx-table-select-row-label",
8773       (row, total) => "Select row ".concat(row, " of ").concat(total),
8774       [() => rowIndex, () => totalRows]
8775     ).value;
8776     const translatedSelectAllLabel = useI18n("cdx-table-select-all-label", "Select all rows");
8777     function getRowKey(row, index) {
8778       return TableRowIdentifier in row ? row[TableRowIdentifier] : index;
8779     }
8780     function getRowClass(row, rowIndex) {
8781       const rowKey = getRowKey(row, rowIndex);
8782       return {
8783         "cdx-table__row--selected": wrappedSelectedRows.value.indexOf(rowKey) !== -1
8784       };
8785     }
8786     function getRowHeaderScope(columnId) {
8787       const firstColumn = props.columns[0].id;
8788       if (props.useRowHeaders && columnId === firstColumn) {
8789         return "row";
8790       }
8791     }
8792     function getCellElement(columnId) {
8793       const firstColumn = props.columns[0].id;
8794       if (props.useRowHeaders && columnId === firstColumn) {
8795         return "th";
8796       }
8797       return "td";
8798     }
8799     function getCellClass(column, hasSort = false) {
8800       if ("textAlign" in column && !tableTextAlignmentsValidator(column.textAlign)) {
8801         console.warn('[CdxTable]: Invalid value for TableColumn "textAlign" property.');
8802         return void 0;
8803       }
8804       return {
8805         // Don't assign a class for the default value 'start'. Instead, we'll set
8806         // text-align: left on the td and th elements.
8807         ["cdx-table__table__cell--align-".concat(column.textAlign)]: "textAlign" in column && column.textAlign !== "start",
8808         "cdx-table__table__cell--has-sort": hasSort
8809       };
8810     }
8811     function getCellStyle(column) {
8812       const styles = {};
8813       if ("width" in column) {
8814         styles.width = column.width;
8815       }
8816       if ("minWidth" in column) {
8817         styles.minWidth = column.minWidth;
8818       }
8819       return styles;
8820     }
8821     function handleRowSelection(newSelectedRows) {
8822       if (totalCount.value === newSelectedRows.length) {
8823         selectAll.value = true;
8824         selectAllIndeterminate.value = false;
8825         return;
8826       }
8827       selectAll.value = false;
8828       if (totalCount.value > newSelectedRows.length) {
8829         selectAllIndeterminate.value = true;
8830       }
8831       if (newSelectedRows.length === 0) {
8832         selectAllIndeterminate.value = false;
8833       }
8834     }
8835     function handleSelectAll(newValue) {
8836       selectAllIndeterminate.value = false;
8837       if (newValue) {
8838         wrappedSelectedRows.value = props.data.map(
8839           (row, rowIndex) => getRowKey(row, rowIndex)
8840         );
8841       } else {
8842         wrappedSelectedRows.value = [];
8843       }
8844     }
8845     function handleSort(columnId) {
8846       var _a;
8847       const currentSortOrder = (_a = props.sort[columnId]) != null ? _a : "none";
8848       let newSortOrder = "asc";
8849       if (currentSortOrder === "asc") {
8850         newSortOrder = "desc";
8851       }
8852       if (currentSortOrder === "desc") {
8853         newSortOrder = "none";
8854       }
8855       emit("update:sort", { [columnId]: newSortOrder });
8856     }
8857     function getSortIcon(columnId) {
8858       var _a;
8859       const currentSortOrder = (_a = props.sort[columnId]) != null ? _a : "none";
8860       return iconMap[currentSortOrder];
8861     }
8862     function getSortOrder(columnId, hasSort = false) {
8863       var _a;
8864       if (hasSort) {
8865         const currentSortOrder = (_a = props.sort[columnId]) != null ? _a : "none";
8866         return currentSortOrder === "none" ? void 0 : sortDirectionMap[currentSortOrder];
8867       }
8868     }
8869     return {
8870       // pagination
8871       dataForDisplay,
8872       pageSize,
8873       onNext,
8874       onPrev,
8875       onFirst,
8876       onLast,
8877       nextDisabled,
8878       prevDisabled,
8879       lastDisabled,
8880       paginationStatusMessageShort,
8881       paginationStatusMessageLong,
8882       // Row selection constants.
8883       wrappedSelectedRows,
8884       selectAll,
8885       selectAllIndeterminate,
8886       // Sorting constants.
8887       activeSortColumn,
8888       hasSortableColumns,
8889       // Template helpers.
8890       tableClasses,
8891       getRowKey,
8892       getRowClass,
8893       getRowHeaderScope,
8894       getCellElement,
8895       getCellClass,
8896       getCellStyle,
8897       // Row selection methods.
8898       handleRowSelection,
8899       handleSelectAll,
8900       // Sorting methods.
8901       handleSort,
8902       getSortIcon,
8903       getSortOrder,
8904       // i18n
8905       translatedSortCaption,
8906       translatedSelectRowLabel,
8907       translatedSelectAllLabel
8908     };
8909   }
8910 });
8911 const _hoisted_1$6 = {
8912   class: "cdx-table",
8913   tabindex: "0"
8914 };
8915 const _hoisted_2$3 = {
8916   key: 0,
8917   class: "cdx-table__header"
8918 };
8919 const _hoisted_3$2 = ["aria-hidden"];
8920 const _hoisted_4$2 = { class: "cdx-table__header__content" };
8921 const _hoisted_5$2 = { class: "cdx-table__pagination-status--long" };
8922 const _hoisted_6$2 = { class: "cdx-table__pagination-status--short" };
8923 const _hoisted_7 = { class: "cdx-table__table-wrapper" };
8924 const _hoisted_8 = { key: 0 };
8925 const _hoisted_9 = {
8926   key: 0,
8927   class: "cdx-table__table__select-rows"
8928 };
8929 const _hoisted_10 = ["aria-sort"];
8930 const _hoisted_11 = ["aria-selected", "onClick"];
8931 const _hoisted_12 = { class: "cdx-table__table__sort-label" };
8932 const _hoisted_13 = { key: 0 };
8933 const _hoisted_14 = { key: 0 };
8934 const _hoisted_15 = { key: 1 };
8935 const _hoisted_16 = { class: "cdx-table__table__empty-state" };
8936 const _hoisted_17 = ["colspan"];
8937 const _hoisted_18 = { class: "cdx-table__pagination-status--long" };
8938 const _hoisted_19 = { class: "cdx-table__pagination-status--short" };
8939 const _hoisted_20 = {
8940   key: 3,
8941   class: "cdx-table__footer"
8942 };
8943 function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
8944   const _component_cdx_table_pager = resolveComponent("cdx-table-pager");
8945   const _component_cdx_checkbox = resolveComponent("cdx-checkbox");
8946   const _component_cdx_icon = resolveComponent("cdx-icon");
8947   const _component_cdx_progress_bar = resolveComponent("cdx-progress-bar");
8948   return openBlock(), createElementBlock("div", _hoisted_1$6, [
8949     !_ctx.hideCaption || _ctx.$slots.header && _ctx.$slots.header().length > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
8950       createElementVNode("div", {
8951         class: "cdx-table__header__caption",
8952         "aria-hidden": _ctx.$slots.header && _ctx.$slots.header().length > 0 ? void 0 : true
8953       }, [
8954         !_ctx.hideCaption ? (openBlock(), createElementBlock(
8955           Fragment,
8956           { key: 0 },
8957           [
8958             createTextVNode(
8959               toDisplayString(_ctx.caption),
8960               1
8961               /* TEXT */
8962             )
8963           ],
8964           64
8965           /* STABLE_FRAGMENT */
8966         )) : createCommentVNode("v-if", true)
8967       ], 8, _hoisted_3$2),
8968       createElementVNode("div", _hoisted_4$2, [
8969         renderSlot(_ctx.$slots, "header")
8970       ])
8971     ])) : createCommentVNode("v-if", true),
8972     _ctx.paginate && (_ctx.paginationPosition === "top" || _ctx.paginationPosition === "both") ? (openBlock(), createBlock(_component_cdx_table_pager, {
8973       key: 1,
8974       "items-per-page": _ctx.pageSize,
8975       "onUpdate:itemsPerPage": _cache[0] || (_cache[0] = ($event) => _ctx.pageSize = $event),
8976       class: "cdx-table__pagination--top",
8977       "pagination-size-options": _ctx.paginationSizeOptions,
8978       "prev-disabled": _ctx.prevDisabled,
8979       "next-disabled": _ctx.nextDisabled,
8980       "last-disabled": _ctx.lastDisabled,
8981       onNext: _ctx.onNext,
8982       onPrev: _ctx.onPrev,
8983       onFirst: _ctx.onFirst,
8984       onLast: _ctx.onLast
8985     }, {
8986       default: withCtx(() => [
8987         createElementVNode(
8988           "span",
8989           _hoisted_5$2,
8990           toDisplayString(_ctx.paginationStatusMessageLong),
8991           1
8992           /* TEXT */
8993         ),
8994         createElementVNode(
8995           "span",
8996           _hoisted_6$2,
8997           toDisplayString(_ctx.paginationStatusMessageShort),
8998           1
8999           /* TEXT */
9000         )
9001       ]),
9002       _: 1
9003       /* STABLE */
9004     }, 8, ["items-per-page", "pagination-size-options", "prev-disabled", "next-disabled", "last-disabled", "onNext", "onPrev", "onFirst", "onLast"])) : createCommentVNode("v-if", true),
9005     createElementVNode("div", _hoisted_7, [
9006       createElementVNode(
9007         "table",
9008         {
9009           class: normalizeClass(["cdx-table__table", _ctx.tableClasses])
9010         },
9011         [
9012           createElementVNode("caption", null, [
9013             !_ctx.hasSortableColumns ? (openBlock(), createElementBlock(
9014               Fragment,
9015               { key: 0 },
9016               [
9017                 createTextVNode(
9018                   toDisplayString(_ctx.caption),
9019                   1
9020                   /* TEXT */
9021                 )
9022               ],
9023               64
9024               /* STABLE_FRAGMENT */
9025             )) : (openBlock(), createElementBlock(
9026               Fragment,
9027               { key: 1 },
9028               [
9029                 createTextVNode(
9030                   toDisplayString(_ctx.translatedSortCaption),
9031                   1
9032                   /* TEXT */
9033                 )
9034               ],
9035               64
9036               /* STABLE_FRAGMENT */
9037             ))
9038           ]),
9039           renderSlot(_ctx.$slots, "thead", {}, () => [
9040             _ctx.columns.length > 0 ? (openBlock(), createElementBlock("thead", _hoisted_8, [
9041               createElementVNode("tr", null, [
9042                 _ctx.useRowSelection ? (openBlock(), createElementBlock("th", _hoisted_9, [
9043                   createVNode(_component_cdx_checkbox, {
9044                     modelValue: _ctx.selectAll,
9045                     "onUpdate:modelValue": [
9046                       _cache[1] || (_cache[1] = ($event) => _ctx.selectAll = $event),
9047                       _ctx.handleSelectAll
9048                     ],
9049                     "hide-label": true,
9050                     indeterminate: _ctx.selectAllIndeterminate
9051                   }, {
9052                     default: withCtx(() => [
9053                       createTextVNode(
9054                         toDisplayString(_ctx.translatedSelectAllLabel),
9055                         1
9056                         /* TEXT */
9057                       )
9058                     ]),
9059                     _: 1
9060                     /* STABLE */
9061                   }, 8, ["modelValue", "indeterminate", "onUpdate:modelValue"])
9062                 ])) : createCommentVNode("v-if", true),
9063                 (openBlock(true), createElementBlock(
9064                   Fragment,
9065                   null,
9066                   renderList(_ctx.columns, (column) => {
9067                     return openBlock(), createElementBlock("th", {
9068                       key: column.id,
9069                       scope: "col",
9070                       class: normalizeClass(_ctx.getCellClass(column, column.allowSort)),
9071                       "aria-sort": _ctx.getSortOrder(column.id, column.allowSort),
9072                       style: normalizeStyle(_ctx.getCellStyle(column))
9073                     }, [
9074                       column.allowSort ? (openBlock(), createElementBlock("button", {
9075                         key: 0,
9076                         "aria-selected": column.id === _ctx.activeSortColumn,
9077                         class: "cdx-table__table__sort-button",
9078                         onClick: ($event) => _ctx.handleSort(column.id)
9079                       }, [
9080                         createElementVNode(
9081                           "span",
9082                           _hoisted_12,
9083                           toDisplayString(column.label),
9084                           1
9085                           /* TEXT */
9086                         ),
9087                         createVNode(_component_cdx_icon, {
9088                           icon: _ctx.getSortIcon(column.id),
9089                           size: "small",
9090                           class: "cdx-table__table__sort-icon--vue",
9091                           "aria-hidden": "true"
9092                         }, null, 8, ["icon"])
9093                       ], 8, _hoisted_11)) : (openBlock(), createElementBlock(
9094                         Fragment,
9095                         { key: 1 },
9096                         [
9097                           createTextVNode(
9098                             toDisplayString(column.label),
9099                             1
9100                             /* TEXT */
9101                           )
9102                         ],
9103                         64
9104                         /* STABLE_FRAGMENT */
9105                       ))
9106                     ], 14, _hoisted_10);
9107                   }),
9108                   128
9109                   /* KEYED_FRAGMENT */
9110                 ))
9111               ])
9112             ])) : createCommentVNode("v-if", true)
9113           ]),
9114           _ctx.pending ? (openBlock(), createBlock(_component_cdx_progress_bar, {
9115             key: 0,
9116             inline: true,
9117             class: "cdx-table__pending-indicator"
9118           })) : createCommentVNode("v-if", true),
9119           renderSlot(_ctx.$slots, "tbody", {}, () => [
9120             _ctx.dataForDisplay.length > 0 ? (openBlock(), createElementBlock("tbody", _hoisted_13, [
9121               (openBlock(true), createElementBlock(
9122                 Fragment,
9123                 null,
9124                 renderList(_ctx.dataForDisplay, (row, rowIndex) => {
9125                   return openBlock(), createElementBlock(
9126                     "tr",
9127                     {
9128                       key: _ctx.getRowKey(row, rowIndex),
9129                       class: normalizeClass(_ctx.getRowClass(row, rowIndex))
9130                     },
9131                     [
9132                       _ctx.useRowSelection ? (openBlock(), createElementBlock("td", _hoisted_14, [
9133                         createVNode(_component_cdx_checkbox, {
9134                           modelValue: _ctx.wrappedSelectedRows,
9135                           "onUpdate:modelValue": [
9136                             _cache[2] || (_cache[2] = ($event) => _ctx.wrappedSelectedRows = $event),
9137                             _ctx.handleRowSelection
9138                           ],
9139                           "input-value": _ctx.getRowKey(row, rowIndex),
9140                           "hide-label": true
9141                         }, {
9142                           default: withCtx(() => [
9143                             createTextVNode(
9144                               toDisplayString(_ctx.translatedSelectRowLabel(
9145                                 rowIndex + 1,
9146                                 _ctx.dataForDisplay.length
9147                               )),
9148                               1
9149                               /* TEXT */
9150                             )
9151                           ]),
9152                           _: 2
9153                           /* DYNAMIC */
9154                         }, 1032, ["modelValue", "input-value", "onUpdate:modelValue"])
9155                       ])) : createCommentVNode("v-if", true),
9156                       (openBlock(true), createElementBlock(
9157                         Fragment,
9158                         null,
9159                         renderList(_ctx.columns, (column) => {
9160                           return openBlock(), createBlock(resolveDynamicComponent(_ctx.getCellElement(column.id)), {
9161                             key: column.id,
9162                             scope: _ctx.getRowHeaderScope(column.id),
9163                             class: normalizeClass(_ctx.getCellClass(column))
9164                           }, {
9165                             default: withCtx(() => [
9166                               renderSlot(_ctx.$slots, "item-" + column.id, {
9167                                 item: row[column.id],
9168                                 row
9169                               }, () => [
9170                                 createTextVNode(
9171                                   toDisplayString(row[column.id]),
9172                                   1
9173                                   /* TEXT */
9174                                 )
9175                               ])
9176                             ]),
9177                             _: 2
9178                             /* DYNAMIC */
9179                           }, 1032, ["scope", "class"]);
9180                         }),
9181                         128
9182                         /* KEYED_FRAGMENT */
9183                       ))
9184                     ],
9185                     2
9186                     /* CLASS */
9187                   );
9188                 }),
9189                 128
9190                 /* KEYED_FRAGMENT */
9191               ))
9192             ])) : _ctx.$slots["empty-state"] && _ctx.$slots["empty-state"]().length > 0 ? (openBlock(), createElementBlock("tbody", _hoisted_15, [
9193               createElementVNode("tr", _hoisted_16, [
9194                 createElementVNode("td", {
9195                   colspan: _ctx.columns.length,
9196                   class: "cdx-table__table__empty-state-content"
9197                 }, [
9198                   renderSlot(_ctx.$slots, "empty-state")
9199                 ], 8, _hoisted_17)
9200               ])
9201             ])) : createCommentVNode("v-if", true)
9202           ]),
9203           renderSlot(_ctx.$slots, "tfoot")
9204         ],
9205         2
9206         /* CLASS */
9207       )
9208     ]),
9209     _ctx.paginate && (_ctx.paginationPosition === "bottom" || _ctx.paginationPosition === "both") ? (openBlock(), createBlock(_component_cdx_table_pager, {
9210       key: 2,
9211       "items-per-page": _ctx.pageSize,
9212       "onUpdate:itemsPerPage": _cache[3] || (_cache[3] = ($event) => _ctx.pageSize = $event),
9213       class: "cdx-table__pagination--bottom",
9214       "pagination-size-options": _ctx.paginationSizeOptions,
9215       "prev-disabled": _ctx.prevDisabled,
9216       "next-disabled": _ctx.nextDisabled,
9217       "last-disabled": _ctx.lastDisabled,
9218       onNext: _ctx.onNext,
9219       onPrev: _ctx.onPrev,
9220       onFirst: _ctx.onFirst,
9221       onLast: _ctx.onLast
9222     }, {
9223       default: withCtx(() => [
9224         createElementVNode(
9225           "span",
9226           _hoisted_18,
9227           toDisplayString(_ctx.paginationStatusMessageLong),
9228           1
9229           /* TEXT */
9230         ),
9231         createElementVNode(
9232           "span",
9233           _hoisted_19,
9234           toDisplayString(_ctx.paginationStatusMessageShort),
9235           1
9236           /* TEXT */
9237         )
9238       ]),
9239       _: 1
9240       /* STABLE */
9241     }, 8, ["items-per-page", "pagination-size-options", "prev-disabled", "next-disabled", "last-disabled", "onNext", "onPrev", "onFirst", "onLast"])) : createCommentVNode("v-if", true),
9242     _ctx.$slots.footer && _ctx.$slots.footer().length > 0 ? (openBlock(), createElementBlock("div", _hoisted_20, [
9243       renderSlot(_ctx.$slots, "footer")
9244     ])) : createCommentVNode("v-if", true)
9245   ]);
9246 }
9247 const Table = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6]]);
9248 const _sfc_main$5 = defineComponent({
9249   name: "CdxTab",
9250   /**
9251    * The "label" and "disabled" props are referenced by the parent Tabs
9252    * component during the generation of a list of labels.
9253    */
9254   props: {
9255     /**
9256      * String name of the tab, used for programmatic selection. Each Tab
9257      * inside a layout must have a unique name. This prop will also be
9258      * used as the tab label if no "label" prop is provided.
9259      */
9260     name: {
9261       type: String,
9262       required: true
9263     },
9264     /**
9265      * Label that corresponds to this Tab in the Tabs component's header.
9266      * Lengthy labels will be truncated.
9267      */
9268     // eslint-disable-next-line vue/no-unused-properties
9269     label: {
9270       type: String,
9271       default: ""
9272     },
9273     /**
9274      * Whether or not the tab is disabled. Disabled tabs cannot be accessed
9275      * via label clicks or keyboard navigation.
9276      */
9277     // eslint-disable-next-line vue/no-unused-properties
9278     disabled: {
9279       type: Boolean,
9280       default: false
9281     }
9282   },
9283   setup(props) {
9284     var _a;
9285     const tabsData = inject(TabsKey);
9286     const activeTab = inject(ActiveTabKey);
9287     if (!tabsData || !activeTab) {
9288       throw new Error("Tab component must be used inside a Tabs component");
9289     }
9290     const tab = (_a = tabsData.value.get(props.name)) != null ? _a : {};
9291     const isActive = computed(() => props.name === activeTab.value);
9292     return {
9293       tab,
9294       isActive
9295     };
9296   }
9297 });
9298 const _hoisted_1$5 = ["id", "aria-hidden", "aria-labelledby"];
9299 function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
9300   return withDirectives((openBlock(), createElementBlock("section", {
9301     id: _ctx.tab.id,
9302     "aria-hidden": !_ctx.isActive ? true : void 0,
9303     "aria-labelledby": "".concat(_ctx.tab.id, "-label"),
9304     class: "cdx-tab",
9305     role: "tabpanel",
9306     tabindex: "-1"
9307   }, [
9308     renderSlot(_ctx.$slots, "default")
9309   ], 8, _hoisted_1$5)), [
9310     [vShow, _ctx.isActive]
9311   ]);
9312 }
9313 const CdxTab = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5]]);
9314 const _sfc_main$4 = defineComponent({
9315   name: "CdxTabs",
9316   components: {
9317     CdxButton,
9318     CdxIcon
9319   },
9320   props: {
9321     /**
9322      * The `name` of the currently active Tab in the layout.
9323      *
9324      * This prop is optional; if it is provided, it should be bound
9325      * using a `v-model:active` directive in the parent component.
9326      * Two-way binding the active tab is only necessary if some tab
9327      * other than the first should be active as soon as the component
9328      * renders (such as in cases where the active tab is bound to URL
9329      * params). If this prop is not provided, then the first tab will
9330      * be active by default. Regardless, the active tab can be changed
9331      * normally by user interaction (clicking on tab headings) or by
9332      * using the exposed methods "select", "next", and "prev".
9333      */
9334     active: {
9335       type: String,
9336       default: null
9337     },
9338     /**
9339      * Whether or not the component should be displayed in a framed
9340      * visual style.
9341      */
9342     framed: {
9343       type: Boolean,
9344       default: false
9345     }
9346   },
9347   emits: [
9348     /**
9349      * Emitted whenever the active tab changes, assuming that an `active`
9350      * prop has been provided in the parent.
9351      *
9352      * @property {string} active The `name` of the current active tab
9353      */
9354     "update:active"
9355   ],
9356   /**
9357    * Some methods are exposed to allow for programmatic selection of
9358    * the active tab from outside of the component.
9359    */
9360   expose: [
9361     "select",
9362     "next",
9363     "prev"
9364   ],
9365   setup(props, { slots, emit }) {
9366     const rootElement = ref();
9367     const tabListElement = ref();
9368     const prevScroller = ref();
9369     const nextScroller = ref();
9370     const currentDirection = useComputedDirection(rootElement);
9371     const childTabNodes = computed(() => {
9372       const slotContents = useSlotContents(slots.default);
9373       if (!slotContents.every(
9374         (node) => typeof node === "object" && isComponentVNode(node, CdxTab.name)
9375       )) {
9376         throw new Error("Slot content may only contain CdxTab components");
9377       }
9378       if (slotContents.length === 0) {
9379         throw new Error("Slot content cannot be empty");
9380       }
9381       return slotContents;
9382     });
9383     const tabsData = computed(() => childTabNodes.value.reduce((map, item) => {
9384       var _a;
9385       if (((_a = item.props) == null ? void 0 : _a.name) && typeof item.props.name === "string") {
9386         if (map.get(item.props.name)) {
9387           throw new Error("Tab names must be unique");
9388         }
9389         map.set(item.props.name, {
9390           name: item.props.name,
9391           id: useGeneratedId(item.props.name),
9392           label: item.props.label || item.props.name,
9393           disabled: item.props.disabled
9394         });
9395       }
9396       return map;
9397     }, /* @__PURE__ */ new Map()));
9398     const internalRefForActiveTab = ref(Array.from(tabsData.value.keys())[0]);
9399     const activeTab = useOptionalModelWrapper(internalRefForActiveTab, toRef(props, "active"), emit, "update:active");
9400     const tabNames = computed(() => Array.from(tabsData.value.keys()));
9401     const activeTabIndex = computed(() => tabNames.value.indexOf(activeTab.value));
9402     const activeTabId = computed(() => {
9403       var _a;
9404       return (_a = tabsData.value.get(activeTab.value)) == null ? void 0 : _a.id;
9405     });
9406     provide(ActiveTabKey, activeTab);
9407     provide(TabsKey, tabsData);
9408     const tabButtonRefs = ref(/* @__PURE__ */ new Map());
9409     const firstTabLabel = ref();
9410     const lastTabLabel = ref();
9411     const firstLabelVisible = useIntersectionObserver(firstTabLabel, { threshold: 0.95 });
9412     const lastLabelVisible = useIntersectionObserver(lastTabLabel, { threshold: 0.95 });
9413     function assignTemplateRefForTabButton(templateRef, index) {
9414       const el = templateRef;
9415       if (el) {
9416         tabButtonRefs.value.set(index, el);
9417         if (index === 0) {
9418           firstTabLabel.value = el;
9419         } else if (index === tabNames.value.length - 1) {
9420           lastTabLabel.value = el;
9421         }
9422       }
9423     }
9424     const rootClasses = computed(() => ({
9425       "cdx-tabs--framed": props.framed,
9426       "cdx-tabs--quiet": !props.framed
9427     }));
9428     function focusActiveTab() {
9429       var _a;
9430       (_a = tabButtonRefs.value.get(activeTabIndex.value)) == null ? void 0 : _a.focus();
9431     }
9432     function getScrollDistance(tabLabel) {
9433       if (!tabListElement.value || !prevScroller.value || !nextScroller.value) {
9434         return 0;
9435       }
9436       const leftScroller = currentDirection.value === "rtl" ? nextScroller.value : prevScroller.value;
9437       const rightScroller = currentDirection.value === "rtl" ? prevScroller.value : nextScroller.value;
9438       const labelLeft = tabLabel.offsetLeft;
9439       const labelRight = labelLeft + tabLabel.clientWidth;
9440       const visibleLeft = tabListElement.value.scrollLeft + leftScroller.clientWidth;
9441       const visibleRight = tabListElement.value.scrollLeft + tabListElement.value.clientWidth - rightScroller.clientWidth;
9442       if (labelLeft < visibleLeft) {
9443         return labelLeft - visibleLeft;
9444       }
9445       if (labelRight > visibleRight) {
9446         return labelRight - visibleRight;
9447       }
9448       return 0;
9449     }
9450     function scrollTabs(logicalDirection) {
9451       if (!tabListElement.value || !prevScroller.value || !nextScroller.value) {
9452         return;
9453       }
9454       const scrollDirection = logicalDirection === "next" && currentDirection.value === "ltr" || logicalDirection === "prev" && currentDirection.value === "rtl" ? 1 : -1;
9455       let scrollDistance = 0;
9456       let tabLabel = logicalDirection === "next" ? tabListElement.value.firstElementChild : tabListElement.value.lastElementChild;
9457       while (tabLabel) {
9458         const nextTabLabel = logicalDirection === "next" ? tabLabel.nextElementSibling : tabLabel.previousElementSibling;
9459         scrollDistance = getScrollDistance(tabLabel);
9460         if (Math.sign(scrollDistance) === scrollDirection) {
9461           if (nextTabLabel && Math.abs(scrollDistance) < 0.25 * tabListElement.value.clientWidth) {
9462             scrollDistance = getScrollDistance(nextTabLabel);
9463           }
9464           break;
9465         }
9466         tabLabel = nextTabLabel;
9467       }
9468       tabListElement.value.scrollBy({
9469         left: scrollDistance,
9470         behavior: "smooth"
9471       });
9472       focusActiveTab();
9473     }
9474     watch(activeTab, () => {
9475       if (activeTabId.value === void 0 || !tabListElement.value || !prevScroller.value || !nextScroller.value) {
9476         return;
9477       }
9478       const activeTabLabel = document.getElementById("".concat(activeTabId.value, "-label"));
9479       if (!activeTabLabel) {
9480         return;
9481       }
9482       tabListElement.value.scrollBy({
9483         left: getScrollDistance(activeTabLabel),
9484         behavior: "smooth"
9485       });
9486     });
9487     return {
9488       activeTab,
9489       activeTabIndex,
9490       activeTabId,
9491       currentDirection,
9492       rootElement,
9493       tabListElement,
9494       prevScroller,
9495       nextScroller,
9496       rootClasses,
9497       tabNames,
9498       tabsData,
9499       firstLabelVisible,
9500       lastLabelVisible,
9501       assignTemplateRefForTabButton,
9502       scrollTabs,
9503       focusActiveTab,
9504       cdxIconPrevious: e7,
9505       cdxIconNext: X6
9506     };
9507   },
9508   /**
9509    * Some non-public methods are defined here rather than in setup because
9510    * they support public methods (which *must* be defined using the Options
9511    * API in order to show up in documentation), or are thematically related
9512    * (such as key handlers).
9513    */
9514   methods: {
9515     /**
9516      * Programmatically select a tab based on its "name" prop
9517      *
9518      * @param {string} tabName The name of the tab to select
9519      * @param {boolean} setFocus Whether or not to also set focus to the new tab
9520      * @public
9521      */
9522     select(tabName, setFocus) {
9523       const target = this.tabsData.get(tabName);
9524       if (target && !(target == null ? void 0 : target.disabled)) {
9525         this.activeTab = tabName;
9526         if (setFocus) {
9527           nextTick(() => {
9528             this.focusActiveTab();
9529           });
9530         }
9531       }
9532     },
9533     /**
9534      * Used to select next or previous tab in the sequence, skipping
9535      * over any tabs that are disabled. The provided increment should
9536      * be either 1 (to move forward) or -1 (to move backwards)
9537      *
9538      * @param index
9539      * @param increment
9540      * @param setFocus
9541      */
9542     selectNonDisabled(index, increment, setFocus) {
9543       const target = this.tabsData.get(this.tabNames[index + increment]);
9544       if (target) {
9545         if (target.disabled) {
9546           this.selectNonDisabled(index + increment, increment, setFocus);
9547         } else {
9548           this.select(target.name, setFocus);
9549         }
9550       }
9551     },
9552     /**
9553      * Set the next tab to active, if one exists
9554      *
9555      * @param {boolean} setFocus
9556      * @public
9557      */
9558     next(setFocus) {
9559       this.selectNonDisabled(this.activeTabIndex, 1, setFocus);
9560     },
9561     /**
9562      * Set the previous tab to active, if one exists
9563      *
9564      * @param {boolean} setFocus
9565      * @public
9566      */
9567     prev(setFocus) {
9568       this.selectNonDisabled(this.activeTabIndex, -1, setFocus);
9569     },
9570     /**
9571      * Handle left arrow key navigation (based on LTR/RTL direction)
9572      */
9573     onLeftArrowKeypress() {
9574       if (this.currentDirection === "rtl") {
9575         this.next(true);
9576       } else {
9577         this.prev(true);
9578       }
9579     },
9580     /**
9581      * Handle right arrow key navigation (based on LTR/RTL direction)
9582      */
9583     onRightArrowKeypress() {
9584       if (this.currentDirection === "rtl") {
9585         this.prev(true);
9586       } else {
9587         this.next(true);
9588       }
9589     },
9590     /**
9591      * Handle down arrow key navigation by moving focus to the contents
9592      * of the currently active tab
9593      */
9594     onDownArrowKeypress() {
9595       var _a;
9596       if (this.activeTabId) {
9597         (_a = document.getElementById(this.activeTabId)) == null ? void 0 : _a.focus();
9598       }
9599     }
9600   }
9601 });
9602 const _hoisted_1$4 = { class: "cdx-tabs__header" };
9603 const _hoisted_2$2 = {
9604   ref: "prevScroller",
9605   class: "cdx-tabs__prev-scroller"
9606 };
9607 const _hoisted_3$1 = {
9608   ref: "tabListElement",
9609   class: "cdx-tabs__list",
9610   role: "tablist"
9611 };
9612 const _hoisted_4$1 = ["id", "disabled", "aria-controls", "aria-selected", "tabindex", "onClick", "onKeyup"];
9613 const _hoisted_5$1 = {
9614   ref: "nextScroller",
9615   class: "cdx-tabs__next-scroller"
9616 };
9617 const _hoisted_6$1 = { class: "cdx-tabs__content" };
9618 function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
9619   const _component_cdx_icon = resolveComponent("cdx-icon");
9620   const _component_cdx_button = resolveComponent("cdx-button");
9621   return openBlock(), createElementBlock(
9622     "div",
9623     {
9624       ref: "rootElement",
9625       class: normalizeClass(["cdx-tabs", _ctx.rootClasses])
9626     },
9627     [
9628       createElementVNode("div", _hoisted_1$4, [
9629         withDirectives(createElementVNode(
9630           "div",
9631           _hoisted_2$2,
9632           [
9633             createVNode(_component_cdx_button, {
9634               class: "cdx-tabs__scroll-button",
9635               weight: "quiet",
9636               type: "button",
9637               tabindex: "-1",
9638               "aria-hidden": true,
9639               onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
9640               }, ["prevent"])),
9641               onClick: _cache[1] || (_cache[1] = ($event) => _ctx.scrollTabs("prev"))
9642             }, {
9643               default: withCtx(() => [
9644                 createVNode(_component_cdx_icon, { icon: _ctx.cdxIconPrevious }, null, 8, ["icon"])
9645               ]),
9646               _: 1
9647               /* STABLE */
9648             })
9649           ],
9650           512
9651           /* NEED_PATCH */
9652         ), [
9653           [vShow, !_ctx.firstLabelVisible]
9654         ]),
9655         createElementVNode(
9656           "div",
9657           _hoisted_3$1,
9658           [
9659             (openBlock(true), createElementBlock(
9660               Fragment,
9661               null,
9662               renderList(_ctx.tabsData.values(), (tab, index) => {
9663                 return openBlock(), createElementBlock("button", {
9664                   id: "".concat(tab.id, "-label"),
9665                   key: index,
9666                   ref_for: true,
9667                   ref: (ref2) => _ctx.assignTemplateRefForTabButton(ref2, index),
9668                   disabled: tab.disabled ? true : void 0,
9669                   "aria-controls": tab.id,
9670                   "aria-selected": tab.name === _ctx.activeTab,
9671                   tabindex: tab.name === _ctx.activeTab ? void 0 : -1,
9672                   class: "cdx-tabs__list__item",
9673                   role: "tab",
9674                   onClick: withModifiers(($event) => _ctx.select(tab.name), ["prevent"]),
9675                   onKeyup: withKeys(($event) => _ctx.select(tab.name), ["enter"]),
9676                   onKeydown: [
9677                     _cache[2] || (_cache[2] = withKeys(withModifiers((...args) => _ctx.onRightArrowKeypress && _ctx.onRightArrowKeypress(...args), ["prevent"]), ["right"])),
9678                     _cache[3] || (_cache[3] = withKeys(withModifiers((...args) => _ctx.onDownArrowKeypress && _ctx.onDownArrowKeypress(...args), ["prevent"]), ["down"])),
9679                     _cache[4] || (_cache[4] = withKeys(withModifiers((...args) => _ctx.onLeftArrowKeypress && _ctx.onLeftArrowKeypress(...args), ["prevent"]), ["left"]))
9680                   ]
9681                 }, [
9682                   createElementVNode(
9683                     "span",
9684                     null,
9685                     toDisplayString(tab.label),
9686                     1
9687                     /* TEXT */
9688                   )
9689                 ], 40, _hoisted_4$1);
9690               }),
9691               128
9692               /* KEYED_FRAGMENT */
9693             ))
9694           ],
9695           512
9696           /* NEED_PATCH */
9697         ),
9698         withDirectives(createElementVNode(
9699           "div",
9700           _hoisted_5$1,
9701           [
9702             createVNode(_component_cdx_button, {
9703               class: "cdx-tabs__scroll-button",
9704               weight: "quiet",
9705               type: "button",
9706               tabindex: "-1",
9707               "aria-hidden": true,
9708               onMousedown: _cache[5] || (_cache[5] = withModifiers(() => {
9709               }, ["prevent"])),
9710               onClick: _cache[6] || (_cache[6] = ($event) => _ctx.scrollTabs("next"))
9711             }, {
9712               default: withCtx(() => [
9713                 createVNode(_component_cdx_icon, { icon: _ctx.cdxIconNext }, null, 8, ["icon"])
9714               ]),
9715               _: 1
9716               /* STABLE */
9717             })
9718           ],
9719           512
9720           /* NEED_PATCH */
9721         ), [
9722           [vShow, !_ctx.lastLabelVisible]
9723         ])
9724       ]),
9725       createElementVNode("div", _hoisted_6$1, [
9726         renderSlot(_ctx.$slots, "default")
9727       ])
9728     ],
9729     2
9730     /* CLASS */
9731   );
9732 }
9733 const Tabs = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4]]);
9734 const statusValidator = makeStringTypeValidator(ValidationStatusTypes);
9735 const _sfc_main$3 = defineComponent({
9736   name: "CdxTextArea",
9737   components: { CdxIcon },
9738   inheritAttrs: false,
9739   expose: [
9740     "focus",
9741     "blur",
9742     "checkValidity",
9743     "reportValidity",
9744     "setCustomValidity"
9745   ],
9746   props: {
9747     /**
9748      * Current value of the textarea.
9749      *
9750      * Provided by `v-model` binding in the parent component.
9751      */
9752     modelValue: {
9753       type: String,
9754       default: ""
9755     },
9756     /**
9757      * `status` attribute of the textarea.
9758      */
9759     status: {
9760       type: String,
9761       default: "default",
9762       validator: statusValidator
9763     },
9764     /**
9765      * Whether the textarea is disabled.
9766      */
9767     disabled: {
9768       type: Boolean,
9769       default: false
9770     },
9771     /**
9772      * Describes whether the textarea grows vertically to show all text.
9773      *
9774      * When autosize is true, the textarea automatically grows in height (vertically).
9775      * The height of the textarea expands while the user types in the textarea.
9776      * The content inside the textarea is visible and there's no scroll.
9777      *
9778      * @values true, false
9779      */
9780     autosize: {
9781       type: Boolean,
9782       default: false
9783     },
9784     /**
9785      * An icon at the start of the textarea element. Similar to a `::before` pseudo-element.
9786      */
9787     startIcon: {
9788       type: [String, Object],
9789       default: void 0
9790     },
9791     /**
9792      * An icon at the end of the textarea element. Similar to an `::after` pseudo-element.
9793      */
9794     endIcon: {
9795       type: [String, Object],
9796       default: void 0
9797     }
9798   },
9799   emits: [
9800     /**
9801      * When the textarea value changes.
9802      *
9803      * @property {string} modelValue The new model value
9804      */
9805     "update:modelValue",
9806     /**
9807      * When the input value changes via direct use of the input
9808      *
9809      * @property {InputEvent} event
9810      */
9811     "input",
9812     /**
9813      * When an input value change is committed by the user (e.g. on blur)
9814      *
9815      * @property {Event} event
9816      */
9817     "change",
9818     /**
9819      * When the input comes into focus
9820      *
9821      * @property {FocusEvent} event
9822      */
9823     "focus",
9824     /**
9825      * When the input loses focus
9826      *
9827      * @property {FocusEvent} event
9828      */
9829     "blur",
9830     /**
9831      * When the textarea value is invalid according to the textarea's constraint
9832      * attributes (e.g. minlength, maxlength, or required). See:
9833      * https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation#validation-related_attributes
9834      *
9835      * @property {Event} event
9836      */
9837     "invalid"
9838   ],
9839   setup(props, { attrs, emit }) {
9840     const textarea = ref();
9841     const wrappedModel = useModelWrapper(toRef(props, "modelValue"), emit);
9842     const idAttribute = attrs.id;
9843     const {
9844       computedDisabled,
9845       computedStatus,
9846       computedInputId
9847     } = useFieldData(
9848       toRef(props, "disabled"),
9849       toRef(props, "status"),
9850       idAttribute
9851     );
9852     const descriptionId = inject(FieldDescriptionIdKey, void 0);
9853     const textareaClasses = computed(() => ({
9854       "cdx-text-area__textarea--has-value": !!wrappedModel.value,
9855       "cdx-text-area__textarea--is-autosize": props.autosize
9856     }));
9857     const internalClasses = computed(() => ({
9858       "cdx-text-area--status-default": computedStatus.value === "default",
9859       "cdx-text-area--status-error": computedStatus.value === "error",
9860       "cdx-text-area--has-start-icon": !!props.startIcon,
9861       "cdx-text-area--has-end-icon": !!props.endIcon
9862     }));
9863     const {
9864       rootClasses,
9865       rootStyle,
9866       otherAttrs
9867     } = useSplitAttributes(attrs, internalClasses);
9868     const otherAttrsMinusId = computed(() => {
9869       const _a = otherAttrs.value, { id } = _a, everythingElse = __objRest(_a, ["id"]);
9870       return everythingElse;
9871     });
9872     function onInput(event) {
9873       if (textarea.value && props.autosize) {
9874         textarea.value.style.height = "auto";
9875         textarea.value.style.height = "".concat(textarea.value.scrollHeight, "px");
9876       }
9877       emit("input", event);
9878     }
9879     const onChange = (event) => {
9880       emit("change", event);
9881     };
9882     const onFocus = (event) => {
9883       emit("focus", event);
9884     };
9885     const onBlur = (event) => {
9886       emit("blur", event);
9887     };
9888     const shouldPreventDefault = ref(true);
9889     const onInvalid = (event, doPreventDefault) => {
9890       if (doPreventDefault) {
9891         event.preventDefault();
9892       }
9893       emit("invalid", event);
9894       shouldPreventDefault.value = true;
9895     };
9896     return {
9897       textarea,
9898       rootClasses,
9899       rootStyle,
9900       wrappedModel,
9901       computedDisabled,
9902       computedInputId,
9903       descriptionId,
9904       textareaClasses,
9905       otherAttrsMinusId,
9906       onInput,
9907       onChange,
9908       onFocus,
9909       onBlur,
9910       onInvalid,
9911       shouldPreventDefault
9912     };
9913   },
9914   // Public methods
9915   // These must be in the methods block, not in the setup function, otherwise their documentation
9916   // won't be picked up by vue-docgen
9917   methods: {
9918     /**
9919      * Focus the component's textarea element.
9920      *
9921      * @public
9922      */
9923     focus() {
9924       const textarea = this.$refs.textarea;
9925       textarea.focus();
9926     },
9927     /**
9928      * Blur the component's textarea element.
9929      *
9930      * @public
9931      */
9932     blur() {
9933       const textarea = this.$refs.textarea;
9934       textarea.blur();
9935     },
9936     /**
9937      * Check the validity of the textarea element according to its constraint attributes. Emits
9938      * an 'invalid' event if the textarea is invalid. See:
9939      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/checkValidity
9940      *
9941      * @public
9942      * @return {boolean} Whether the textarea is valid
9943      */
9944     checkValidity() {
9945       const textarea = this.$refs.textarea;
9946       return textarea.checkValidity();
9947     },
9948     /**
9949      * Check the validity of the textarea element and report it as a pop up on the UI. See:
9950      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/reportValidity
9951      *
9952      * @public
9953      * @return {boolean} Whether the textarea is valid
9954      */
9955     reportValidity() {
9956       this.shouldPreventDefault = false;
9957       const textarea = this.$refs.textarea;
9958       return textarea.reportValidity();
9959     },
9960     /**
9961      * Set custom validity and message for the textarea element. See:
9962      * https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/setCustomValidity
9963      *
9964      * @public
9965      * @param {string} message The custom validation message to set
9966      */
9967     setCustomValidity(message) {
9968       const textarea = this.$refs.textarea;
9969       textarea.setCustomValidity(message);
9970     }
9971   }
9972 });
9973 const _hoisted_1$3 = ["id", "aria-describedby", "disabled"];
9974 function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
9975   const _component_cdx_icon = resolveComponent("cdx-icon");
9976   return openBlock(), createElementBlock(
9977     "div",
9978     {
9979       class: normalizeClass(["cdx-text-area", _ctx.rootClasses]),
9980       style: normalizeStyle(_ctx.rootStyle)
9981     },
9982     [
9983       withDirectives(createElementVNode("textarea", mergeProps({
9984         id: _ctx.computedInputId,
9985         ref: "textarea"
9986       }, _ctx.otherAttrsMinusId, {
9987         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.wrappedModel = $event),
9988         class: [_ctx.textareaClasses, "cdx-text-area__textarea"],
9989         "aria-describedby": _ctx.descriptionId,
9990         disabled: _ctx.computedDisabled,
9991         onInput: _cache[1] || (_cache[1] = (...args) => _ctx.onInput && _ctx.onInput(...args)),
9992         onChange: _cache[2] || (_cache[2] = (...args) => _ctx.onChange && _ctx.onChange(...args)),
9993         onFocus: _cache[3] || (_cache[3] = (...args) => _ctx.onFocus && _ctx.onFocus(...args)),
9994         onBlur: _cache[4] || (_cache[4] = (...args) => _ctx.onBlur && _ctx.onBlur(...args)),
9995         onInvalid: _cache[5] || (_cache[5] = (e) => _ctx.onInvalid(e, _ctx.shouldPreventDefault))
9996       }), null, 16, _hoisted_1$3), [
9997         [vModelText, _ctx.wrappedModel]
9998       ]),
9999       _ctx.startIcon ? (openBlock(), createBlock(_component_cdx_icon, {
10000         key: 0,
10001         icon: _ctx.startIcon,
10002         class: "cdx-text-area__icon-vue cdx-text-area__start-icon"
10003       }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
10004       _ctx.endIcon ? (openBlock(), createBlock(_component_cdx_icon, {
10005         key: 1,
10006         icon: _ctx.endIcon,
10007         class: "cdx-text-area__icon-vue cdx-text-area__end-icon"
10008       }, null, 8, ["icon"])) : createCommentVNode("v-if", true)
10009     ],
10010     6
10011     /* CLASS, STYLE */
10012   );
10013 }
10014 const TextArea = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3]]);
10015 const _sfc_main$2 = defineComponent({
10016   name: "CdxToggleButtonGroup",
10017   components: {
10018     CdxIcon,
10019     CdxToggleButton
10020   },
10021   props: {
10022     /**
10023      * Buttons to display. See the ButtonGroupItem type.
10024      */
10025     buttons: {
10026       type: Array,
10027       required: true,
10028       validator: (value) => Array.isArray(value) && value.length >= 1
10029     },
10030     /**
10031      * Selected value, or array of selected values.
10032      *
10033      * If this is a string or number, the button whose value equals that string or number is
10034      * selected, and only a single selection is allowed. If this is an array, the buttons whose
10035      * values equal any of the values in the array are selected, and multiple selections are
10036      * allowed. To select none of the buttons initially, set this to `null`
10037      * (for single-selection groups) or to `[]` (for multi-selection groups).
10038      *
10039      * Must be bound with `v-model`.
10040      */
10041     modelValue: {
10042       type: [String, Number, null, Array],
10043       required: true
10044     },
10045     /**
10046      * Whether the entire group is disabled.
10047      *
10048      * If this is set to true, all buttons in the group are disabled. Buttons can also be
10049      * disabled individually by setting their `disabled` property to true.
10050      */
10051     disabled: {
10052       type: Boolean,
10053       default: false
10054     }
10055   },
10056   emits: [
10057     /**
10058      * Emitted when modelValue changes.
10059      *
10060      * @property {string | number | ( string | number )[]} modelValue The new model value
10061      */
10062     "update:modelValue"
10063   ],
10064   setup(props, { emit }) {
10065     const {
10066       rootElement,
10067       assignTemplateRef,
10068       onFocus,
10069       onBlur,
10070       onKeydown
10071     } = useButtonGroupKeyboardNav(toRef(props, "buttons"));
10072     function isSelected(button) {
10073       if (Array.isArray(props.modelValue)) {
10074         return props.modelValue.indexOf(button.value) !== -1;
10075       } else if (props.modelValue !== null) {
10076         return props.modelValue === button.value;
10077       }
10078       return false;
10079     }
10080     function onUpdate(button, nowSelected) {
10081       if (Array.isArray(props.modelValue)) {
10082         const wasSelected = props.modelValue.indexOf(button.value) !== -1;
10083         if (nowSelected && !wasSelected) {
10084           emit("update:modelValue", props.modelValue.concat(button.value));
10085         } else if (!nowSelected && wasSelected) {
10086           emit("update:modelValue", props.modelValue.filter((v) => v !== button.value));
10087         }
10088       } else {
10089         if (nowSelected && props.modelValue !== button.value) {
10090           emit("update:modelValue", button.value);
10091         }
10092       }
10093     }
10094     return {
10095       rootElement,
10096       assignTemplateRef,
10097       onFocus,
10098       onBlur,
10099       onKeydown,
10100       getButtonLabel,
10101       isSelected,
10102       onUpdate
10103     };
10104   }
10105 });
10106 const _hoisted_1$2 = {
10107   ref: "rootElement",
10108   class: "cdx-toggle-button-group"
10109 };
10110 function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
10111   const _component_cdx_icon = resolveComponent("cdx-icon");
10112   const _component_cdx_toggle_button = resolveComponent("cdx-toggle-button");
10113   return openBlock(), createElementBlock(
10114     "div",
10115     _hoisted_1$2,
10116     [
10117       (openBlock(true), createElementBlock(
10118         Fragment,
10119         null,
10120         renderList(_ctx.buttons, (button, index) => {
10121           return openBlock(), createBlock(_component_cdx_toggle_button, {
10122             key: button.value,
10123             ref_for: true,
10124             ref: (ref2) => _ctx.assignTemplateRef(ref2, index),
10125             "model-value": _ctx.isSelected(button),
10126             disabled: button.disabled || _ctx.disabled,
10127             "aria-label": button.ariaLabel,
10128             "onUpdate:modelValue": ($event) => _ctx.onUpdate(button, $event),
10129             onFocus: ($event) => _ctx.onFocus(index),
10130             onBlur: _ctx.onBlur,
10131             onKeydown: _ctx.onKeydown
10132           }, {
10133             default: withCtx(() => [
10134               renderSlot(_ctx.$slots, "default", {
10135                 button,
10136                 selected: _ctx.isSelected(button)
10137               }, () => [
10138                 button.icon ? (openBlock(), createBlock(_component_cdx_icon, {
10139                   key: 0,
10140                   icon: button.icon
10141                 }, null, 8, ["icon"])) : createCommentVNode("v-if", true),
10142                 createTextVNode(
10143                   " " + toDisplayString(_ctx.getButtonLabel(button)),
10144                   1
10145                   /* TEXT */
10146                 )
10147               ])
10148             ]),
10149             _: 2
10150             /* DYNAMIC */
10151           }, 1032, ["model-value", "disabled", "aria-label", "onUpdate:modelValue", "onFocus", "onBlur", "onKeydown"]);
10152         }),
10153         128
10154         /* KEYED_FRAGMENT */
10155       ))
10156     ],
10157     512
10158     /* NEED_PATCH */
10159   );
10160 }
10161 const ToggleButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
10162 const _sfc_main$1 = defineComponent({
10163   name: "CdxToggleSwitch",
10164   components: { CdxLabel },
10165   /**
10166    * The input element will inherit attributes, not the root element.
10167    */
10168   inheritAttrs: false,
10169   props: {
10170     /**
10171      * Current value of the toggle switch or toggle switch group.
10172      *
10173      * Provided by `v-model` binding in the parent component.
10174      */
10175     modelValue: {
10176       type: [Boolean, Array],
10177       default: false
10178     },
10179     /**
10180      * HTML "value" attribute to assign to the input element.
10181      *
10182      * Required for groups of ToggleSwitches. Can be omitted for single true/false switches.
10183      */
10184     inputValue: {
10185       type: [String, Number, Boolean],
10186       default: false
10187     },
10188     /**
10189      * Whether to align the switch to the end of the container.
10190      *
10191      * Useful for ToggleSwitch groups, where each switch should be aligned regardless of
10192      * label length.
10193      */
10194     alignSwitch: {
10195       type: Boolean,
10196       default: false
10197     },
10198     /**
10199      * Whether the label should be visually hidden.
10200      *
10201      * Note that this will also hide the description.
10202      */
10203     hideLabel: {
10204       type: Boolean,
10205       default: false
10206     },
10207     /**
10208      * Whether the disabled attribute should be added to the input.
10209      */
10210     disabled: {
10211       type: Boolean,
10212       default: false
10213     }
10214   },
10215   emits: [
10216     /**
10217      * Emitted when modelValue changes.
10218      *
10219      * @property {boolean} modelValue The new model value
10220      */
10221     "update:modelValue"
10222   ],
10223   setup(props, { emit, slots, attrs }) {
10224     var _a;
10225     useLabelChecker((_a = slots.default) == null ? void 0 : _a.call(slots), attrs, "CdxToggleSwitch");
10226     const input = ref();
10227     const inputId = useGeneratedId("toggle-switch");
10228     const descriptionId = useGeneratedId("description");
10229     const internalClasses = computed(() => ({
10230       "cdx-toggle-switch--align-switch": props.alignSwitch
10231     }));
10232     const {
10233       rootClasses,
10234       rootStyle,
10235       otherAttrs
10236     } = useSplitAttributes(attrs, internalClasses);
10237     const { computedDisabled } = useFieldData(toRef(props, "disabled"));
10238     const wrappedModel = useModelWrapper(toRef(props, "modelValue"), emit);
10239     const clickInput = () => {
10240       input.value.click();
10241     };
10242     return {
10243       input,
10244       inputId,
10245       descriptionId,
10246       rootClasses,
10247       rootStyle,
10248       otherAttrs,
10249       computedDisabled,
10250       wrappedModel,
10251       clickInput
10252     };
10253   }
10254 });
10255 const _hoisted_1$1 = ["id", "aria-describedby", "value", "disabled"];
10256 const _hoisted_2$1 = /* @__PURE__ */ createElementVNode(
10257   "span",
10258   { class: "cdx-toggle-switch__switch" },
10259   [
10260     /* @__PURE__ */ createElementVNode("span", { class: "cdx-toggle-switch__switch__grip" })
10261   ],
10262   -1
10263   /* HOISTED */
10264 );
10265 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
10266   const _component_cdx_label = resolveComponent("cdx-label");
10267   return openBlock(), createElementBlock(
10268     "span",
10269     {
10270       class: normalizeClass(["cdx-toggle-switch", _ctx.rootClasses]),
10271       style: normalizeStyle(_ctx.rootStyle)
10272     },
10273     [
10274       withDirectives(createElementVNode("input", mergeProps({
10275         id: _ctx.inputId,
10276         ref: "input",
10277         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.wrappedModel = $event),
10278         class: "cdx-toggle-switch__input",
10279         type: "checkbox",
10280         role: "switch",
10281         "aria-describedby": _ctx.$slots.description && _ctx.$slots.description().length > 0 ? _ctx.descriptionId : void 0,
10282         value: _ctx.inputValue,
10283         disabled: _ctx.computedDisabled
10284       }, _ctx.otherAttrs, {
10285         onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers((...args) => _ctx.clickInput && _ctx.clickInput(...args), ["prevent"]), ["enter"]))
10286       }), null, 16, _hoisted_1$1), [
10287         [vModelCheckbox, _ctx.wrappedModel]
10288       ]),
10289       _hoisted_2$1,
10290       _ctx.$slots.default && _ctx.$slots.default().length ? (openBlock(), createBlock(_component_cdx_label, {
10291         key: 0,
10292         class: "cdx-toggle-switch__label",
10293         "input-id": _ctx.inputId,
10294         "description-id": _ctx.$slots.description && _ctx.$slots.description().length > 0 ? _ctx.descriptionId : void 0,
10295         "visually-hidden": _ctx.hideLabel,
10296         disabled: _ctx.computedDisabled
10297       }, createSlots({
10298         default: withCtx(() => [
10299           renderSlot(_ctx.$slots, "default")
10300         ]),
10301         _: 2
10302         /* DYNAMIC */
10303       }, [
10304         _ctx.$slots.description && _ctx.$slots.description().length > 0 ? {
10305           name: "description",
10306           fn: withCtx(() => [
10307             renderSlot(_ctx.$slots, "description")
10308           ]),
10309           key: "0"
10310         } : void 0
10311       ]), 1032, ["input-id", "description-id", "visually-hidden", "disabled"])) : createCommentVNode("v-if", true)
10312     ],
10313     6
10314     /* CLASS, STYLE */
10315   );
10316 }
10317 const ToggleSwitch = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
10318 class Tooltip {
10319   constructor(referenceElement, options) {
10320     __publicField(this, "referenceElement");
10321     __publicField(this, "tooltipElement");
10322     __publicField(this, "textContent");
10323     __publicField(this, "placement");
10324     __publicField(this, "autoUpdateCleanup");
10325     __publicField(this, "referenceElementHandlers");
10326     __publicField(this, "tooltipElementHandlers");
10327     __publicField(this, "escapeHandler");
10328     __publicField(this, "timeoutId");
10329     var _a, _b;
10330     const doc = referenceElement.ownerDocument;
10331     const tooltipId = useGeneratedId("tooltip");
10332     this.referenceElement = referenceElement;
10333     this.textContent = options.textContent;
10334     this.placement = (_a = options.placement) != null ? _a : "bottom";
10335     this.timeoutId = null;
10336     this.tooltipElement = doc.createElement("div");
10337     this.tooltipElement.classList.add("cdx-tooltip");
10338     this.tooltipElement.role = "tooltip";
10339     this.tooltipElement.id = tooltipId;
10340     this.referenceElement.setAttribute("aria-describedby", tooltipId);
10341     this.tooltipElement.textContent = this.textContent;
10342     (_b = this.referenceElement.parentElement) == null ? void 0 : _b.appendChild(this.tooltipElement);
10343     this.referenceElementHandlers = {};
10344     this.referenceElementHandlers.mouseenter = this.show.bind(this);
10345     this.referenceElementHandlers.mouseleave = this.hideAfterDelay.bind(this);
10346     this.referenceElementHandlers.focus = this.show.bind(this);
10347     this.referenceElementHandlers.blur = this.hide.bind(this);
10348     this.tooltipElementHandlers = {};
10349     this.tooltipElementHandlers.mouseenter = this.show.bind(this);
10350     this.tooltipElementHandlers.mouseleave = this.hideAfterDelay.bind(this);
10351     this.escapeHandler = this.onKeyup.bind(this);
10352     this.addEventListeners();
10353     this.autoUpdateCleanup = autoUpdate(
10354       this.referenceElement,
10355       this.tooltipElement,
10356       () => this.update()
10357     );
10358   }
10359   isVisible() {
10360     return this.tooltipElement.style.display === "block";
10361   }
10362   show() {
10363     if (this.timeoutId) {
10364       clearTimeout(this.timeoutId);
10365     }
10366     this.tooltipElement.style.display = "block";
10367     this.tooltipElement.ownerDocument.addEventListener("keyup", this.escapeHandler);
10368   }
10369   hide() {
10370     this.tooltipElement.style.display = "none";
10371     this.tooltipElement.ownerDocument.removeEventListener("keyup", this.escapeHandler);
10372   }
10373   hideAfterDelay() {
10374     this.timeoutId = setTimeout(this.hide.bind(this), 250);
10375   }
10376   onKeyup(event) {
10377     if (event.key === "Escape" && this.isVisible()) {
10378       this.hide();
10379     }
10380   }
10381   addEventListeners() {
10382     Object.keys(this.referenceElementHandlers).forEach((k) => {
10383       this.referenceElement.addEventListener(k, this.referenceElementHandlers[k]);
10384     });
10385     Object.keys(this.tooltipElementHandlers).forEach((k) => {
10386       this.tooltipElement.addEventListener(k, this.tooltipElementHandlers[k]);
10387     });
10388   }
10389   removeEventListeners() {
10390     Object.keys(this.referenceElementHandlers).forEach((k) => {
10391       this.referenceElement.removeEventListener(k, this.referenceElementHandlers[k]);
10392     });
10393     Object.keys(this.tooltipElementHandlers).forEach((k) => {
10394       this.tooltipElement.removeEventListener(k, this.tooltipElementHandlers[k]);
10395     });
10396   }
10397   update() {
10398     computePosition(this.referenceElement, this.tooltipElement, {
10399       placement: this.placement,
10400       middleware: [
10401         offset(4),
10402         flip(),
10403         shift(),
10404         hide()
10405       ]
10406     }).then(({ x, y, middlewareData }) => {
10407       var _a, _b, _c;
10408       const finalPlacement = (_b = (_a = middlewareData.offset) == null ? void 0 : _a.placement) != null ? _b : this.placement;
10409       const opposites = {
10410         left: "right",
10411         "left-start": "right",
10412         "left-end": "right",
10413         top: "bottom",
10414         "top-start": "bottom",
10415         "top-end": "bottom",
10416         bottom: "top",
10417         "bottom-start": "top",
10418         "bottom-end": "top",
10419         right: "left",
10420         "right-start": "left",
10421         "right-end": "left"
10422       };
10423       Object.assign(this.tooltipElement.style, {
10424         left: "".concat(x, "px"),
10425         top: "".concat(y, "px"),
10426         visibility: ((_c = middlewareData.hide) == null ? void 0 : _c.referenceHidden) ? "hidden" : "visible",
10427         transformOrigin: opposites[finalPlacement]
10428       });
10429     });
10430   }
10431   remove() {
10432     this.tooltipElement.remove();
10433     this.autoUpdateCleanup();
10434     this.removeEventListeners();
10435   }
10436 }
10437 const CdxTooltip = {
10438   mounted(el, { value, arg }) {
10439     if (!value) {
10440       return;
10441     }
10442     if (typeof value === "string" && value.trim() === "") {
10443       return;
10444     }
10445     el.tooltip = new Tooltip(el, {
10446       textContent: String(value),
10447       placement: arg
10448     });
10449   },
10450   beforeUnmount(el) {
10451     if (el.tooltip) {
10452       el.tooltip.remove();
10453     }
10454   }
10455 };
10456 const _sfc_main = defineComponent({
10457   name: "CdxTypeaheadSearch",
10458   components: {
10459     CdxIcon,
10460     CdxMenu,
10461     CdxSearchInput
10462   },
10463   /**
10464    * Attributes, besides class, will be passed to the TextInput's input element.
10465    */
10466   inheritAttrs: false,
10467   props: {
10468     /**
10469      * ID attribute for the form.
10470      */
10471     id: {
10472       type: String,
10473       required: true
10474     },
10475     /**
10476      * Action attribute for form.
10477      */
10478     formAction: {
10479       type: String,
10480       required: true
10481     },
10482     /**
10483      * List of search results. See the SearchResult type.
10484      */
10485     searchResults: {
10486       type: Array,
10487       required: true
10488     },
10489     /**
10490      *
10491      * Whether to display a submit button.
10492      */
10493     useButton: {
10494       type: Boolean,
10495       default: false
10496     },
10497     // DEPRECATED: set default to 'Search' (T368444).
10498     /**
10499      * Custom label for the submit button.
10500      *
10501      * Omit this prop to use the default value, "Search".
10502      */
10503     buttonLabel: {
10504       type: String,
10505       default: ""
10506     },
10507     /**
10508      * Initial value for the text input.
10509      *
10510      * Triggers an initial `input` event on mount.
10511      */
10512     initialInputValue: {
10513       type: String,
10514       default: ""
10515     },
10516     /**
10517      * Link for the final menu item.
10518      *
10519      * This will typically be a link to the search page for the current search query.
10520      */
10521     searchFooterUrl: {
10522       type: String,
10523       default: ""
10524     },
10525     /**
10526      * Time interval for debouncing input events, in ms.
10527      */
10528     debounceInterval: {
10529       type: Number,
10530       default: DebounceInterval
10531     },
10532     /**
10533      * Whether the search query should be highlighted within a search result's title.
10534      */
10535     highlightQuery: {
10536       type: Boolean,
10537       default: false
10538     },
10539     /**
10540      * Whether to show search results' thumbnails (or a placeholder icon).
10541      */
10542     showThumbnail: {
10543       type: Boolean,
10544       default: false
10545     },
10546     /**
10547      * Contract the width of the input when unfocused and expand the width of
10548      * the input when focused to accommodate the extra width of the thumbnails.
10549      *
10550      * This prop is ignored if showThumbnail is false.
10551      */
10552     autoExpandWidth: {
10553       type: Boolean,
10554       default: false
10555     },
10556     /**
10557      * Limit the number of menu items to display before scrolling.
10558      *
10559      * Setting this prop to anything falsy will show all menu items.
10560      *
10561      * By default, all menu items are shown.
10562      */
10563     visibleItemLimit: {
10564       type: Number,
10565       default: null
10566     }
10567   },
10568   emits: [
10569     /**
10570      * When the text input value changes. Debounced by default.
10571      *
10572      * @property {string} value The new input value
10573      */
10574     "input",
10575     /**
10576      * When a search result is selected.
10577      *
10578      * @property {SearchResultClickEvent} event Data for the selected result
10579      */
10580     "search-result-click",
10581     /**
10582      * When the form is submitted.
10583      *
10584      * @property {SearchResultClickEvent} event Data for the selected result
10585      */
10586     "submit",
10587     /**
10588      * When the user scrolls towards the bottom of the menu.
10589      *
10590      * If it is possible to add or load more menu items, then now would be a good moment
10591      * so that the user can experience infinite scrolling.
10592      */
10593     "load-more"
10594   ],
10595   setup(props, { attrs, emit, slots }) {
10596     const form = ref();
10597     const menu = ref();
10598     const menuId = useGeneratedId("typeahead-search-menu");
10599     const translatedSearchResultsLabel = useI18n("cdx-typeahead-search-search-results-label", "Search results");
10600     const expanded = ref(false);
10601     const pending = ref(false);
10602     const showPending = ref(false);
10603     const isActive = ref(false);
10604     const inputValue = ref(props.initialInputValue);
10605     const searchQuery = ref("");
10606     const highlightedId = computed(() => {
10607       var _a, _b;
10608       return (_b = (_a = menu.value) == null ? void 0 : _a.getHighlightedMenuItem()) == null ? void 0 : _b.id;
10609     });
10610     const selection = ref(null);
10611     const menuMessageClass = computed(() => ({
10612       "cdx-typeahead-search__menu-message--has-thumbnail": props.showThumbnail
10613     }));
10614     const selectedResult = computed(
10615       () => props.searchResults.find(
10616         (searchResult) => searchResult.value === selection.value
10617       )
10618     );
10619     const footer = computed(
10620       () => props.searchFooterUrl ? { value: MenuFooterValue, url: props.searchFooterUrl } : void 0
10621     );
10622     const internalClasses = computed(() => ({
10623       "cdx-typeahead-search--show-thumbnail": props.showThumbnail,
10624       "cdx-typeahead-search--expanded": expanded.value,
10625       "cdx-typeahead-search--auto-expand-width": props.showThumbnail && props.autoExpandWidth
10626     }));
10627     const {
10628       rootClasses,
10629       rootStyle,
10630       otherAttrs
10631     } = useSplitAttributes(attrs, internalClasses);
10632     function asSearchResult(menuItem) {
10633       return menuItem;
10634     }
10635     const menuConfig = computed(() => ({
10636       visibleItemLimit: props.visibleItemLimit,
10637       showThumbnail: props.showThumbnail,
10638       // In case search queries aren't highlighted, default to a bold label.
10639       boldLabel: true,
10640       hideDescriptionOverflow: true
10641     }));
10642     let debounceId;
10643     let pendingDelayId;
10644     function onUpdateInputValue(newVal, immediate = false) {
10645       if (selectedResult.value && selectedResult.value.label !== newVal && selectedResult.value.value !== newVal) {
10646         selection.value = null;
10647       }
10648       if (pendingDelayId !== void 0) {
10649         clearTimeout(pendingDelayId);
10650         pendingDelayId = void 0;
10651       }
10652       if (newVal === "") {
10653         expanded.value = false;
10654       } else {
10655         pending.value = true;
10656         if (slots["search-results-pending"]) {
10657           pendingDelayId = setTimeout(() => {
10658             if (isActive.value) {
10659               expanded.value = true;
10660             }
10661             showPending.value = true;
10662           }, PendingDelay);
10663         }
10664       }
10665       if (debounceId !== void 0) {
10666         clearTimeout(debounceId);
10667         debounceId = void 0;
10668       }
10669       const handleUpdateInputValue = () => {
10670         emit("input", newVal);
10671       };
10672       if (immediate) {
10673         handleUpdateInputValue();
10674       } else {
10675         debounceId = setTimeout(() => {
10676           handleUpdateInputValue();
10677         }, props.debounceInterval);
10678       }
10679     }
10680     function onUpdateMenuSelection(newVal) {
10681       var _a;
10682       if (newVal === MenuFooterValue) {
10683         selection.value = null;
10684         inputValue.value = searchQuery.value;
10685         return;
10686       }
10687       selection.value = newVal;
10688       if (newVal !== null) {
10689         inputValue.value = selectedResult.value ? (_a = selectedResult.value.label) != null ? _a : String(selectedResult.value.value) : "";
10690       }
10691     }
10692     function onFocus() {
10693       isActive.value = true;
10694       if (searchQuery.value || showPending.value) {
10695         expanded.value = true;
10696       }
10697     }
10698     function onBlur() {
10699       isActive.value = false;
10700       expanded.value = false;
10701     }
10702     function onSearchResultClick(searchResult) {
10703       const _a = searchResult, { id } = _a, resultWithoutId = __objRest(_a, ["id"]);
10704       if (resultWithoutId.value === MenuFooterValue) {
10705         emit("search-result-click", {
10706           searchResult: null,
10707           index: props.searchResults.length,
10708           numberOfResults: props.searchResults.length
10709         });
10710         return;
10711       }
10712       emitSearchResultClick(resultWithoutId);
10713     }
10714     function emitSearchResultClick(searchResult) {
10715       const searchResultClickEvent = {
10716         searchResult,
10717         index: props.searchResults.findIndex(
10718           (r) => r.value === searchResult.value
10719         ),
10720         numberOfResults: props.searchResults.length
10721       };
10722       emit("search-result-click", searchResultClickEvent);
10723     }
10724     function onSearchResultKeyboardNavigation(searchResult) {
10725       var _a;
10726       if (searchResult.value === MenuFooterValue) {
10727         inputValue.value = searchQuery.value;
10728         return;
10729       }
10730       inputValue.value = searchResult.value ? (_a = searchResult.label) != null ? _a : String(searchResult.value) : "";
10731     }
10732     function onSearchFooterClick(footerMenuItem) {
10733       var _a;
10734       expanded.value = false;
10735       (_a = menu.value) == null ? void 0 : _a.clearActive();
10736       onSearchResultClick(footerMenuItem);
10737     }
10738     function onSubmit(e) {
10739       if (selectedResult.value) {
10740         emitSearchResultClick(selectedResult.value);
10741         e.stopPropagation();
10742         window.location.assign(selectedResult.value.url);
10743         e.preventDefault();
10744       } else {
10745         const submitEvent = {
10746           searchResult: null,
10747           index: -1,
10748           numberOfResults: props.searchResults.length
10749         };
10750         emit("submit", submitEvent);
10751       }
10752     }
10753     function onKeydown(e) {
10754       if (!menu.value || !searchQuery.value || e.key === " ") {
10755         return;
10756       }
10757       const highlightedResult = menu.value.getHighlightedMenuItem();
10758       const resultHighlightedViaKeyboard = menu.value.getHighlightedViaKeyboard();
10759       switch (e.key) {
10760         case "Enter":
10761           if (highlightedResult) {
10762             if (highlightedResult.value === MenuFooterValue && resultHighlightedViaKeyboard) {
10763               window.location.assign(props.searchFooterUrl);
10764             } else {
10765               menu.value.delegateKeyNavigation(e, { prevent: false });
10766             }
10767           }
10768           expanded.value = false;
10769           break;
10770         case "Tab":
10771           expanded.value = false;
10772           break;
10773         default:
10774           menu.value.delegateKeyNavigation(e);
10775           break;
10776       }
10777     }
10778     onMounted(() => {
10779       if (props.initialInputValue) {
10780         onUpdateInputValue(props.initialInputValue, true);
10781       }
10782     });
10783     watch(toRef(props, "searchResults"), () => {
10784       searchQuery.value = inputValue.value.trim();
10785       if (isActive.value && pending.value && searchQuery.value.length > 0) {
10786         expanded.value = true;
10787       }
10788       if (pendingDelayId !== void 0) {
10789         clearTimeout(pendingDelayId);
10790         pendingDelayId = void 0;
10791       }
10792       pending.value = false;
10793       showPending.value = false;
10794     });
10795     return {
10796       form,
10797       menu,
10798       menuId,
10799       highlightedId,
10800       selection,
10801       menuMessageClass,
10802       footer,
10803       asSearchResult,
10804       inputValue,
10805       searchQuery,
10806       expanded,
10807       showPending,
10808       rootClasses,
10809       rootStyle,
10810       otherAttrs,
10811       menuConfig,
10812       onUpdateInputValue,
10813       onUpdateMenuSelection,
10814       onFocus,
10815       onBlur,
10816       onSearchResultClick,
10817       onSearchResultKeyboardNavigation,
10818       onSearchFooterClick,
10819       onSubmit,
10820       onKeydown,
10821       MenuFooterValue,
10822       articleIcon: b3,
10823       translatedSearchResultsLabel
10824     };
10825   },
10826   methods: {
10827     /**
10828      * Focus the component's input element.
10829      *
10830      * @public
10831      */
10832     focus() {
10833       const searchInput = this.$refs.searchInput;
10834       searchInput.focus();
10835     }
10836   }
10837 });
10838 const _hoisted_1 = ["id", "action"];
10839 const _hoisted_2 = { class: "cdx-typeahead-search__menu-message__text" };
10840 const _hoisted_3 = { class: "cdx-typeahead-search__menu-message__text" };
10841 const _hoisted_4 = ["href", "onClickCapture"];
10842 const _hoisted_5 = { class: "cdx-menu-item__text cdx-typeahead-search__search-footer__text" };
10843 const _hoisted_6 = { class: "cdx-typeahead-search__search-footer__query" };
10844 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
10845   const _component_cdx_icon = resolveComponent("cdx-icon");
10846   const _component_cdx_menu = resolveComponent("cdx-menu");
10847   const _component_cdx_search_input = resolveComponent("cdx-search-input");
10848   return openBlock(), createElementBlock(
10849     "div",
10850     {
10851       class: normalizeClass(["cdx-typeahead-search", _ctx.rootClasses]),
10852       style: normalizeStyle(_ctx.rootStyle)
10853     },
10854     [
10855       createElementVNode("form", {
10856         id: _ctx.id,
10857         ref: "form",
10858         class: "cdx-typeahead-search__form",
10859         action: _ctx.formAction,
10860         onSubmit: _cache[4] || (_cache[4] = (...args) => _ctx.onSubmit && _ctx.onSubmit(...args))
10861       }, [
10862         createVNode(_component_cdx_search_input, mergeProps({
10863           ref: "searchInput",
10864           modelValue: _ctx.inputValue,
10865           "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => _ctx.inputValue = $event),
10866           "button-label": _ctx.buttonLabel,
10867           "use-button": _ctx.useButton
10868         }, _ctx.otherAttrs, {
10869           class: "cdx-typeahead-search__input",
10870           name: "search",
10871           role: "combobox",
10872           autocomplete: "off",
10873           "aria-autocomplete": "list",
10874           "aria-controls": _ctx.menuId,
10875           "aria-expanded": _ctx.expanded,
10876           "aria-activedescendant": _ctx.highlightedId,
10877           "onUpdate:modelValue": _ctx.onUpdateInputValue,
10878           onFocus: _ctx.onFocus,
10879           onBlur: _ctx.onBlur,
10880           onKeydown: _ctx.onKeydown
10881         }), {
10882           default: withCtx(() => [
10883             createVNode(_component_cdx_menu, mergeProps({
10884               id: _ctx.menuId,
10885               ref: "menu",
10886               expanded: _ctx.expanded,
10887               "onUpdate:expanded": _cache[0] || (_cache[0] = ($event) => _ctx.expanded = $event),
10888               class: "cdx-typeahead-search__menu",
10889               "show-pending": _ctx.showPending,
10890               selected: _ctx.selection,
10891               "menu-items": _ctx.searchResults,
10892               footer: _ctx.footer,
10893               "search-query": _ctx.highlightQuery ? _ctx.searchQuery : "",
10894               "show-no-results-slot": _ctx.searchQuery.length > 0 && _ctx.searchResults.length === 0 && _ctx.$slots["search-no-results-text"] && _ctx.$slots["search-no-results-text"]().length > 0
10895             }, _ctx.menuConfig, {
10896               "aria-label": _ctx.translatedSearchResultsLabel,
10897               "onUpdate:selected": _ctx.onUpdateMenuSelection,
10898               onMenuItemClick: _cache[1] || (_cache[1] = (menuItem) => _ctx.onSearchResultClick(_ctx.asSearchResult(menuItem))),
10899               onMenuItemKeyboardNavigation: _ctx.onSearchResultKeyboardNavigation,
10900               onLoadMore: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("load-more"))
10901             }), {
10902               pending: withCtx(() => [
10903                 createElementVNode(
10904                   "div",
10905                   {
10906                     class: normalizeClass(["cdx-menu-item__content cdx-typeahead-search__menu-message", _ctx.menuMessageClass])
10907                   },
10908                   [
10909                     createElementVNode("span", _hoisted_2, [
10910                       renderSlot(_ctx.$slots, "search-results-pending")
10911                     ])
10912                   ],
10913                   2
10914                   /* CLASS */
10915                 )
10916               ]),
10917               "no-results": withCtx(() => [
10918                 createElementVNode(
10919                   "div",
10920                   {
10921                     class: normalizeClass(["cdx-menu-item__content cdx-typeahead-search__menu-message", _ctx.menuMessageClass])
10922                   },
10923                   [
10924                     createElementVNode("span", _hoisted_3, [
10925                       renderSlot(_ctx.$slots, "search-no-results-text")
10926                     ])
10927                   ],
10928                   2
10929                   /* CLASS */
10930                 )
10931               ]),
10932               default: withCtx(({ menuItem, active }) => [
10933                 menuItem.value === _ctx.MenuFooterValue ? (openBlock(), createElementBlock("a", {
10934                   key: 0,
10935                   class: normalizeClass(["cdx-menu-item__content cdx-typeahead-search__search-footer", {
10936                     "cdx-typeahead-search__search-footer__active": active
10937                   }]),
10938                   href: _ctx.asSearchResult(menuItem).url,
10939                   onClickCapture: withModifiers(($event) => _ctx.onSearchFooterClick(_ctx.asSearchResult(menuItem)), ["stop"])
10940                 }, [
10941                   createVNode(_component_cdx_icon, {
10942                     class: "cdx-menu-item__thumbnail cdx-typeahead-search__search-footer__icon",
10943                     icon: _ctx.articleIcon
10944                   }, null, 8, ["icon"]),
10945                   createElementVNode("span", _hoisted_5, [
10946                     renderSlot(_ctx.$slots, "search-footer-text", { searchQuery: _ctx.searchQuery }, () => [
10947                       createElementVNode(
10948                         "strong",
10949                         _hoisted_6,
10950                         toDisplayString(_ctx.searchQuery),
10951                         1
10952                         /* TEXT */
10953                       )
10954                     ])
10955                   ])
10956                 ], 42, _hoisted_4)) : createCommentVNode("v-if", true)
10957               ]),
10958               _: 3
10959               /* FORWARDED */
10960             }, 16, ["id", "expanded", "show-pending", "selected", "menu-items", "footer", "search-query", "show-no-results-slot", "aria-label", "onUpdate:selected", "onMenuItemKeyboardNavigation"])
10961           ]),
10962           _: 3
10963           /* FORWARDED */
10964         }, 16, ["modelValue", "button-label", "use-button", "aria-controls", "aria-expanded", "aria-activedescendant", "onUpdate:modelValue", "onFocus", "onBlur", "onKeydown"]),
10965         renderSlot(_ctx.$slots, "default")
10966       ], 40, _hoisted_1)
10967     ],
10968     6
10969     /* CLASS, STYLE */
10970   );
10971 }
10972 const TypeaheadSearch = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
10973 export {
10974   Accordion as CdxAccordion,
10975   CdxButton,
10976   ButtonGroup as CdxButtonGroup,
10977   Card as CdxCard,
10978   CdxCheckbox,
10979   CdxChipInput,
10980   Combobox as CdxCombobox,
10981   Dialog as CdxDialog,
10982   Field as CdxField,
10983   CdxIcon,
10984   InfoChip as CdxInfoChip,
10985   CdxLabel,
10986   Lookup as CdxLookup,
10987   CdxMenu,
10988   MenuButton as CdxMenuButton,
10989   CdxMenuItem,
10990   CdxMessage,
10991   MultiselectLookup as CdxMultiselectLookup,
10992   CdxProgressBar,
10993   Radio as CdxRadio,
10994   CdxSearchInput,
10995   CdxSearchResultTitle,
10996   CdxSelect,
10997   CdxTab,
10998   Table as CdxTable,
10999   Tabs as CdxTabs,
11000   TextArea as CdxTextArea,
11001   CdxTextInput,
11002   CdxThumbnail,
11003   CdxToggleButton,
11004   ToggleButtonGroup as CdxToggleButtonGroup,
11005   ToggleSwitch as CdxToggleSwitch,
11006   CdxTooltip,
11007   TypeaheadSearch as CdxTypeaheadSearch,
11008   TableRowIdentifier,
11009   stringHelpers,
11010   useComputedDirection,
11011   useComputedDisabled,
11012   useComputedLanguage,
11013   useFieldData,
11014   useFloatingMenu,
11015   useGeneratedId,
11016   useI18n,
11017   useIntersectionObserver,
11018   useModelWrapper,
11019   useResizeObserver,
11020   useSlotContents,
11021   useSplitAttributes,
11022   useWarnOnce
11023 };