@knime/kds-components 0.28.8 → 0.28.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/dist/index.css +16 -11
  2. package/dist/index.js +97 -32
  3. package/dist/index.js.map +1 -1
  4. package/dist/src/accessories/MissingValueIcon/KdsMissingValueIcon.vue.d.ts +7 -0
  5. package/dist/src/accessories/MissingValueIcon/KdsMissingValueIcon.vue.d.ts.map +1 -0
  6. package/dist/src/accessories/MissingValueIcon/index.d.ts +2 -0
  7. package/dist/src/accessories/MissingValueIcon/index.d.ts.map +1 -0
  8. package/dist/src/accessories/index.d.ts +1 -0
  9. package/dist/src/accessories/index.d.ts.map +1 -1
  10. package/dist/src/buttons/KdsMenuButton/KdsMenuButton.vue.d.ts +29 -19
  11. package/dist/src/buttons/KdsMenuButton/KdsMenuButton.vue.d.ts.map +1 -1
  12. package/dist/src/buttons/KdsSplitButton/KdsSplitButton.vue.d.ts +15 -15
  13. package/dist/src/containers/Menu/KdsMenu.vue.d.ts +30 -30
  14. package/dist/src/containers/MenuContainer/KdsMenuItem.vue.d.ts.map +1 -1
  15. package/dist/src/containers/MenuContainer/types.d.ts +5 -0
  16. package/dist/src/containers/MenuContainer/types.d.ts.map +1 -1
  17. package/dist/src/forms/_helper/InfoPopover/KdsInfoToggleButton.vue.d.ts +30 -30
  18. package/dist/src/forms/_helper/VariablePopover/KdsVariableToggleButton.vue.d.ts +30 -30
  19. package/dist/src/forms/inputs/ColorInput/KdsColorInput.vue.d.ts +15 -15
  20. package/dist/src/forms/inputs/DateInput/KdsDateInput.vue.d.ts +15 -15
  21. package/dist/src/forms/inputs/DateTimeFormatInput/KdsDateTimeFormatInput.vue.d.ts +15 -15
  22. package/dist/src/forms/inputs/IntervalInput/KdsIntervalInput.vue.d.ts +15 -15
  23. package/dist/src/forms/inputs/SearchInput/KdsSearchInput.vue.d.ts +15 -15
  24. package/dist/src/forms/inputs/TextInput/KdsTextInput.vue.d.ts +15 -15
  25. package/dist/src/forms/inputs/TimeInput/KdsTimeInput.vue.d.ts +15 -15
  26. package/dist/src/forms/selects/Dropdown/BaseDropdown.vue.d.ts +3 -1
  27. package/dist/src/forms/selects/Dropdown/BaseDropdown.vue.d.ts.map +1 -1
  28. package/dist/src/forms/selects/Dropdown/KdsDropdown.vue.d.ts +46 -16
  29. package/dist/src/forms/selects/Dropdown/KdsDropdown.vue.d.ts.map +1 -1
  30. package/dist/src/forms/selects/Dropdown/KdsMultiSelectDropdown.vue.d.ts +46 -16
  31. package/dist/src/forms/selects/Dropdown/KdsMultiSelectDropdown.vue.d.ts.map +1 -1
  32. package/dist/src/overlays/index.d.ts +2 -0
  33. package/dist/src/overlays/index.d.ts.map +1 -1
  34. package/dist/src/patterns/ResponsiveButtonGroup/KdsResponsiveButtonGroup.vue.d.ts +30 -19
  35. package/dist/src/patterns/ResponsiveButtonGroup/KdsResponsiveButtonGroup.vue.d.ts.map +1 -1
  36. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -536,6 +536,11 @@ to {
536
536
  }
537
537
  }
538
538
 
539
+ .kds-missing-value-icon[data-v-df682150] {
540
+ color: var(--kds-color-text-and-icon-danger);
541
+ stroke-width: var(--kds-border-width-icon-stroke-s);
542
+ }
543
+
539
544
  .donut-container {
540
545
  &[data-v-f5faf61c] {
541
546
  display: flex;
@@ -1127,7 +1132,7 @@ html.kds-legacy {
1127
1132
  }
1128
1133
  }
1129
1134
 
1130
- .kds-menu-item-link[data-v-00c46d78] {
1135
+ .kds-menu-item-link[data-v-677d6ca6] {
1131
1136
  display: block;
1132
1137
  color: inherit;
1133
1138
  text-decoration: none;
@@ -2492,7 +2497,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
2492
2497
  }
2493
2498
 
2494
2499
  .kds-dropdown-trigger-button {
2495
- &[data-v-0f4de8fb] {
2500
+ &[data-v-1bb2d375] {
2496
2501
  display: flex;
2497
2502
  align-items: center;
2498
2503
  width: 100%;
@@ -2506,24 +2511,24 @@ textarea[data-v-36211819]::-webkit-scrollbar {
2506
2511
  border: var(--kds-border-action-input);
2507
2512
  border-radius: var(--kds-border-radius-container-0-37x);
2508
2513
  }
2509
- &[data-v-0f4de8fb]:focus-visible {
2514
+ &[data-v-1bb2d375]:focus-visible {
2510
2515
  outline: var(--kds-border-action-focused);
2511
2516
  outline-offset: var(--kds-spacing-offset-focus);
2512
2517
  }
2513
- &.error[data-v-0f4de8fb] {
2518
+ &.error[data-v-1bb2d375] {
2514
2519
  border: var(--kds-border-action-error);
2515
2520
  }
2516
- &[data-v-0f4de8fb]:disabled {
2521
+ &[data-v-1bb2d375]:disabled {
2517
2522
  color: var(--kds-color-text-and-icon-disabled);
2518
2523
  cursor: default;
2519
2524
  border: var(--kds-border-action-disabled);
2520
2525
  border-color: var(--kds-color-border-disabled);
2521
2526
  }
2522
- &[data-v-0f4de8fb]:not(:disabled, :focus):hover {
2527
+ &[data-v-1bb2d375]:not(:disabled, :focus):hover {
2523
2528
  background: var(--kds-color-background-input-hover);
2524
2529
  }
2525
2530
  }
2526
- .leading[data-v-0f4de8fb] {
2531
+ .leading[data-v-1bb2d375] {
2527
2532
  display: flex;
2528
2533
  flex-shrink: 0;
2529
2534
  align-items: center;
@@ -2532,7 +2537,7 @@ textarea[data-v-36211819]::-webkit-scrollbar {
2532
2537
  margin-left: var(--kds-spacing-container-0-12x);
2533
2538
  }
2534
2539
  .text {
2535
- &[data-v-0f4de8fb] {
2540
+ &[data-v-1bb2d375] {
2536
2541
  flex: 1 0 0;
2537
2542
  min-width: 0;
2538
2543
  padding: var(--kds-spacing-container-0-25x);
@@ -2541,14 +2546,14 @@ textarea[data-v-36211819]::-webkit-scrollbar {
2541
2546
  text-align: left;
2542
2547
  white-space: nowrap;
2543
2548
  }
2544
- &.placeholder[data-v-0f4de8fb] {
2549
+ &.placeholder[data-v-1bb2d375] {
2545
2550
  color: var(--kds-color-text-and-icon-subtle);
2546
2551
  }
2547
- &.missing[data-v-0f4de8fb] {
2552
+ &.missing[data-v-1bb2d375] {
2548
2553
  color: var(--kds-color-text-and-icon-danger);
2549
2554
  }
2550
2555
  }
2551
- .trailing[data-v-0f4de8fb] {
2556
+ .trailing[data-v-1bb2d375] {
2552
2557
  display: flex;
2553
2558
  flex-shrink: 0;
2554
2559
  align-items: center;
package/dist/index.js CHANGED
@@ -16,7 +16,7 @@ const _hoisted_3$t = {
16
16
  class: "kds-avatar-initials",
17
17
  "aria-hidden": "true"
18
18
  };
19
- const _sfc_main$1z = /* @__PURE__ */ defineComponent({
19
+ const _sfc_main$1A = /* @__PURE__ */ defineComponent({
20
20
  __name: "KdsAvatar",
21
21
  props: {
22
22
  initials: {},
@@ -96,7 +96,7 @@ const _export_sfc = (sfc, props) => {
96
96
  return target;
97
97
  };
98
98
 
99
- const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["__scopeId", "data-v-9e1a5abe"]]);
99
+ const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1A, [["__scopeId", "data-v-9e1a5abe"]]);
100
100
 
101
101
  const _hoisted_1$$ = ["aria-label"];
102
102
  const _hoisted_2$B = { class: "avatars" };
@@ -105,7 +105,7 @@ const _hoisted_3$s = {
105
105
  class: "more-count",
106
106
  "aria-hidden": "true"
107
107
  };
108
- const _sfc_main$1y = /* @__PURE__ */ defineComponent({
108
+ const _sfc_main$1z = /* @__PURE__ */ defineComponent({
109
109
  __name: "KdsAvatarCounter",
110
110
  props: {
111
111
  moreCount: { default: 0 },
@@ -145,7 +145,7 @@ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
145
145
  }
146
146
  });
147
147
 
148
- const KdsAvatarCounter = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["__scopeId", "data-v-1aef516d"]]);
148
+ const KdsAvatarCounter = /* @__PURE__ */ _export_sfc(_sfc_main$1z, [["__scopeId", "data-v-1aef516d"]]);
149
149
 
150
150
  const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
151
151
  const v = glob$1[path$13];
@@ -202,7 +202,7 @@ function useIcon({
202
202
  };
203
203
  }
204
204
 
205
- const _sfc_main$1x = /* @__PURE__ */ defineComponent({
205
+ const _sfc_main$1y = /* @__PURE__ */ defineComponent({
206
206
  __name: "KdsIcon",
207
207
  props: {
208
208
  name: {},
@@ -232,7 +232,7 @@ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
232
232
  }
233
233
  });
234
234
 
235
- const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["__scopeId", "data-v-bff4f419"]]);
235
+ const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1y, [["__scopeId", "data-v-bff4f419"]]);
236
236
 
237
237
  const ID_TO_ICON_MAP = {
238
238
  // Flow Variables
@@ -576,7 +576,7 @@ const kdsDataTypeSize = {
576
576
  const kdsDataTypeSizes = Object.values(kdsDataTypeSize);
577
577
 
578
578
  const _hoisted_1$_ = ["title"];
579
- const _sfc_main$1w = /* @__PURE__ */ defineComponent({
579
+ const _sfc_main$1x = /* @__PURE__ */ defineComponent({
580
580
  __name: "KdsDataType",
581
581
  props: {
582
582
  iconName: { default: "unknown-datatype" },
@@ -622,7 +622,7 @@ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
622
622
  }
623
623
  });
624
624
 
625
- const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-38e9537f"]]);
625
+ const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$1x, [["__scopeId", "data-v-38e9537f"]]);
626
626
 
627
627
  const kdsBadgeVariant = {
628
628
  NEUTRAL: "neutral",
@@ -640,7 +640,7 @@ const kdsBadgeSize = {
640
640
  const kdsBadgeSizes = Object.values(kdsBadgeSize);
641
641
 
642
642
  const _hoisted_1$Z = { class: "label-wrapper" };
643
- const _sfc_main$1v = /* @__PURE__ */ defineComponent({
643
+ const _sfc_main$1w = /* @__PURE__ */ defineComponent({
644
644
  __name: "KdsBadge",
645
645
  props: {
646
646
  label: {},
@@ -668,7 +668,7 @@ const _sfc_main$1v = /* @__PURE__ */ defineComponent({
668
668
  }
669
669
  });
670
670
 
671
- const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["__scopeId", "data-v-df64f7cf"]]);
671
+ const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1w, [["__scopeId", "data-v-df64f7cf"]]);
672
672
 
673
673
  const kdsColorSwatchType = {
674
674
  LEARNER: "learner",
@@ -694,7 +694,7 @@ const ALPHA_NIBBLE_INDEX = 3;
694
694
  const ALPHA_BYTE_START = 6;
695
695
  const RGB_SHORT_HEX_LENGTH = 3;
696
696
  const RGB_LONG_HEX_LENGTH = 6;
697
- const _sfc_main$1u = /* @__PURE__ */ defineComponent({
697
+ const _sfc_main$1v = /* @__PURE__ */ defineComponent({
698
698
  __name: "KdsColorSwatch",
699
699
  props: {
700
700
  color: {},
@@ -774,7 +774,7 @@ const _sfc_main$1u = /* @__PURE__ */ defineComponent({
774
774
  }
775
775
  });
776
776
 
777
- const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["__scopeId", "data-v-91e0130d"]]);
777
+ const KdsColorSwatch = /* @__PURE__ */ _export_sfc(_sfc_main$1v, [["__scopeId", "data-v-91e0130d"]]);
778
778
 
779
779
  const kdsDarkModeType = {
780
780
  LIGHT: "light",
@@ -896,7 +896,7 @@ function useKdsIsTruncated(elementRef) {
896
896
 
897
897
  const _hoisted_1$X = ["title", "aria-label"];
898
898
  const _hoisted_2$A = ["title"];
899
- const _sfc_main$1t = /* @__PURE__ */ defineComponent({
899
+ const _sfc_main$1u = /* @__PURE__ */ defineComponent({
900
900
  __name: "KdsLiveStatus",
901
901
  props: {
902
902
  status: { default: "red" },
@@ -931,7 +931,7 @@ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
931
931
  }
932
932
  });
933
933
 
934
- const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["__scopeId", "data-v-01555495"]]);
934
+ const KdsLiveStatus = /* @__PURE__ */ _export_sfc(_sfc_main$1u, [["__scopeId", "data-v-01555495"]]);
935
935
 
936
936
  const kdsLiveStatusStatus = {
937
937
  RED: "red",
@@ -948,7 +948,7 @@ const kdsLiveStatusSize = {
948
948
  const kdsLiveStatusSizes = Object.values(kdsLiveStatusSize);
949
949
 
950
950
  const _hoisted_1$W = ["data-style"];
951
- const _sfc_main$1s = /* @__PURE__ */ defineComponent({
951
+ const _sfc_main$1t = /* @__PURE__ */ defineComponent({
952
952
  __name: "KdsLoadingSpinner",
953
953
  props: {
954
954
  size: { default: "medium" },
@@ -978,7 +978,7 @@ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
978
978
  }
979
979
  });
980
980
 
981
- const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["__scopeId", "data-v-54835dc0"]]);
981
+ const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$1t, [["__scopeId", "data-v-54835dc0"]]);
982
982
 
983
983
  const kdsLoadingSpinnerVariant = {
984
984
  ON_PRIMARY: "onPrimary",
@@ -995,7 +995,7 @@ const _hoisted_4$n = {
995
995
  key: 0,
996
996
  class: "body"
997
997
  };
998
- const _sfc_main$1r = /* @__PURE__ */ defineComponent({
998
+ const _sfc_main$1s = /* @__PURE__ */ defineComponent({
999
999
  __name: "KdsInlineMessage",
1000
1000
  props: {
1001
1001
  headline: {},
@@ -1040,7 +1040,7 @@ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
1040
1040
  }
1041
1041
  });
1042
1042
 
1043
- const KdsInlineMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["__scopeId", "data-v-af14056f"]]);
1043
+ const KdsInlineMessage = /* @__PURE__ */ _export_sfc(_sfc_main$1s, [["__scopeId", "data-v-af14056f"]]);
1044
1044
 
1045
1045
  const kdsInlineMessageVariant = {
1046
1046
  ERROR: "error",
@@ -1050,6 +1050,24 @@ const kdsInlineMessageVariant = {
1050
1050
  };
1051
1051
  const kdsInlineMessageVariants = Object.values(kdsInlineMessageVariant);
1052
1052
 
1053
+ const _sfc_main$1r = /* @__PURE__ */ defineComponent({
1054
+ __name: "KdsMissingValueIcon",
1055
+ props: {
1056
+ size: {}
1057
+ },
1058
+ setup(__props) {
1059
+ return (_ctx, _cache) => {
1060
+ return openBlock(), createBlock(KdsIcon, {
1061
+ name: "circle-question",
1062
+ size: __props.size,
1063
+ class: "kds-missing-value-icon"
1064
+ }, null, 8, ["size"]);
1065
+ };
1066
+ }
1067
+ });
1068
+
1069
+ const KdsMissingValueIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1r, [["__scopeId", "data-v-df682150"]]);
1070
+
1053
1071
  const _hoisted_1$U = { class: "donut-container" };
1054
1072
  const _hoisted_2$y = ["height", "width", "viewBox"];
1055
1073
  const _hoisted_3$q = ["r", "stroke-width"];
@@ -2337,11 +2355,12 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
2337
2355
  active: __props.activeId === __props.item.id,
2338
2356
  variant: __props.variant,
2339
2357
  badge: __props.item.badge,
2358
+ "trailing-icon": __props.item.trailingIcon,
2340
2359
  shortcut: __props.item.shortcut,
2341
2360
  role: "menuitem"
2342
2361
  }, _ctx.$attrs, {
2343
2362
  onClick: _cache[2] || (_cache[2] = ($event) => !__props.item.disabled && _ctx.$emit("click", $event))
2344
- }), null, 16, ["id", "accessory", "text", "sub-text", "disabled", "active", "variant", "badge", "shortcut"])),
2363
+ }), null, 16, ["id", "accessory", "text", "sub-text", "disabled", "active", "variant", "badge", "trailing-icon", "shortcut"])),
2345
2364
  __props.item.separator && !__props.isLast ? (openBlock(), createBlock(unref(KdsDivider), {
2346
2365
  key: 3,
2347
2366
  class: "kds-list-item-divider",
@@ -2353,7 +2372,7 @@ const _sfc_main$1f = /* @__PURE__ */ defineComponent({
2353
2372
  }
2354
2373
  });
2355
2374
 
2356
- const KdsMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["__scopeId", "data-v-00c46d78"]]);
2375
+ const KdsMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$1f, [["__scopeId", "data-v-677d6ca6"]]);
2357
2376
 
2358
2377
  const _hoisted_1$N = ["id", "aria-label", "aria-activedescendant"];
2359
2378
  const _sfc_main$1e = /* @__PURE__ */ defineComponent({
@@ -2467,10 +2486,24 @@ const _sfc_main$1e = /* @__PURE__ */ defineComponent({
2467
2486
  const KdsMenuContainer = /* @__PURE__ */ _export_sfc(_sfc_main$1e, [["__scopeId", "data-v-cce3fc40"]]);
2468
2487
 
2469
2488
  const kdsPopoverPlacement = {
2489
+ TOP_LEFT: "top-left",
2490
+ TOP_RIGHT: "top-right",
2491
+ BOTTOM_LEFT: "bottom-left",
2492
+ BOTTOM_RIGHT: "bottom-right",
2470
2493
  CUSTOM: "custom"
2471
2494
  };
2495
+ const kdsPopoverPlacements = Object.values(kdsPopoverPlacement);
2496
+ const kdsPopoverRole = {
2497
+ DIALOG: "dialog",
2498
+ MENU: "menu",
2499
+ LISTBOX: "listbox"
2500
+ };
2501
+ const kdsPopoverRoles = Object.values(kdsPopoverRole);
2472
2502
  const kdsPopoverType = {
2473
- AUTO: "auto"};
2503
+ AUTO: "auto",
2504
+ MANUAL: "manual"
2505
+ };
2506
+ const kdsPopoverTypes = Object.values(kdsPopoverType);
2474
2507
 
2475
2508
  const _hoisted_1$M = ["id", "popover", "role"];
2476
2509
  const _hoisted_2$t = {
@@ -2554,7 +2587,7 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
2554
2587
  inheritAttrs: false
2555
2588
  },
2556
2589
  __name: "KdsMenuButton",
2557
- props: {
2590
+ props: /* @__PURE__ */ mergeModels({
2558
2591
  dataTestId: {},
2559
2592
  size: {},
2560
2593
  disabled: { type: Boolean },
@@ -2566,8 +2599,11 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
2566
2599
  ariaLabel: {},
2567
2600
  items: {},
2568
2601
  menuMaxHeight: {}
2569
- },
2570
- emits: ["itemClick"],
2602
+ }, {
2603
+ "modelValue": { type: Boolean, ...{ default: false } },
2604
+ "modelModifiers": {}
2605
+ }),
2606
+ emits: /* @__PURE__ */ mergeModels(["itemClick"], ["update:modelValue"]),
2571
2607
  setup(__props, { expose: __expose, emit: __emit }) {
2572
2608
  const props = createPropsRestProxy(__props, ["variant", "menuMaxHeight"]);
2573
2609
  const attrs = useAttrs();
@@ -2581,7 +2617,7 @@ const _sfc_main$1c = /* @__PURE__ */ defineComponent({
2581
2617
  } = attrs;
2582
2618
  return { ...safeAttrs, ...rest, variant: __props.variant };
2583
2619
  });
2584
- const isMenuOpen = ref(false);
2620
+ const isMenuOpen = useModel(__props, "modelValue");
2585
2621
  const popoverEl = useTemplateRef("popover");
2586
2622
  const menuContainerEl = useTemplateRef("menuContainer");
2587
2623
  const menuButtonEl = useTemplateRef("menuButton");
@@ -13547,6 +13583,7 @@ const _hoisted_4$a = {
13547
13583
  class: "trailing",
13548
13584
  "aria-hidden": "true"
13549
13585
  };
13586
+ const TRIGGER_REF = "triggerEl";
13550
13587
  const _sfc_main$A = /* @__PURE__ */ defineComponent({
13551
13588
  __name: "BaseDropdown",
13552
13589
  props: /* @__PURE__ */ mergeModels({
@@ -13567,10 +13604,17 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
13567
13604
  "openModifiers": {}
13568
13605
  }),
13569
13606
  emits: /* @__PURE__ */ mergeModels(["click", "keydown"], ["update:open"]),
13570
- setup(__props, { emit: __emit }) {
13607
+ setup(__props, { expose: __expose, emit: __emit }) {
13571
13608
  const props = createPropsRestProxy(__props, ["disabled", "error", "missing", "ariaInvalid"]);
13572
13609
  const open = useModel(__props, "open");
13573
13610
  const valueTextId = useId();
13611
+ const triggerEl = useTemplateRef(TRIGGER_REF);
13612
+ __expose({
13613
+ /**
13614
+ * Focuses the trigger button
13615
+ */
13616
+ focus: () => triggerEl.value?.focus()
13617
+ });
13574
13618
  const ariaLabelledby = computed(() => {
13575
13619
  if (props.ariaLabel) {
13576
13620
  return void 0;
@@ -13606,6 +13650,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
13606
13650
  return (_ctx, _cache) => {
13607
13651
  return openBlock(), createElementBlock("button", {
13608
13652
  id: props.id,
13653
+ ref: TRIGGER_REF,
13609
13654
  class: normalizeClass(["kds-dropdown-trigger-button", { error: __props.error }]),
13610
13655
  type: "button",
13611
13656
  "aria-expanded": open.value,
@@ -13643,7 +13688,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
13643
13688
  }
13644
13689
  });
13645
13690
 
13646
- const BaseDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-0f4de8fb"]]);
13691
+ const BaseDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-1bb2d375"]]);
13647
13692
 
13648
13693
  const DROPDOWN_SEARCH_THRESHOLD = 12;
13649
13694
 
@@ -13791,12 +13836,13 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
13791
13836
  "modelModifiers": {}
13792
13837
  }),
13793
13838
  emits: ["update:modelValue"],
13794
- setup(__props) {
13839
+ setup(__props, { expose: __expose }) {
13795
13840
  const props = createPropsRestProxy(__props, ["placeholder", "disabled", "loading", "error", "validating", "preserveSubTextSpace"]);
13796
13841
  const modelValue = useModel(__props, "modelValue");
13797
13842
  const open = ref(false);
13798
13843
  const popoverEl = useTemplateRef("popoverEl");
13799
13844
  const dropdownContainerEl = useTemplateRef("dropdownContainerEl");
13845
+ const baseDropdownEl = useTemplateRef("baseDropdownEl");
13800
13846
  const selectedOption = computed(
13801
13847
  () => props.possibleValues.find((o) => o.id === modelValue.value)
13802
13848
  );
@@ -13808,6 +13854,12 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
13808
13854
  const closeDropdown = () => {
13809
13855
  open.value = false;
13810
13856
  };
13857
+ __expose({
13858
+ /**
13859
+ * Focuses the trigger button
13860
+ */
13861
+ focus: () => baseDropdownEl.value?.focus()
13862
+ });
13811
13863
  return (_ctx, _cache) => {
13812
13864
  return openBlock(), createBlock(BaseFormFieldWrapper, {
13813
13865
  id: props.id,
@@ -13820,7 +13872,10 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
13820
13872
  "preserve-sub-text-space": __props.preserveSubTextSpace
13821
13873
  }, {
13822
13874
  default: withCtx((slotProps) => [
13823
- createVNode(BaseDropdown, mergeProps(slotProps, {
13875
+ createVNode(BaseDropdown, mergeProps({
13876
+ ref_key: "baseDropdownEl",
13877
+ ref: baseDropdownEl
13878
+ }, slotProps, {
13824
13879
  open: open.value,
13825
13880
  "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
13826
13881
  text: modelValue.value && !selectedOption.value ? `(Missing) ${modelValue.value}` : selectedOption.value?.text,
@@ -14102,12 +14157,13 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
14102
14157
  "modelModifiers": {}
14103
14158
  }),
14104
14159
  emits: ["update:modelValue"],
14105
- setup(__props) {
14160
+ setup(__props, { expose: __expose }) {
14106
14161
  const props = createPropsRestProxy(__props, ["placeholder", "disabled", "loading", "allowNewValues", "error", "validating", "preserveSubTextSpace"]);
14107
14162
  const modelValue = useModel(__props, "modelValue");
14108
14163
  const open = ref(false);
14109
14164
  const dropdownContainerEl = useTemplateRef("dropdownContainerEl");
14110
14165
  const popoverEl = useTemplateRef("popoverEl");
14166
+ const baseDropdownEl = useTemplateRef("baseDropdownEl");
14111
14167
  watchEffect(() => {
14112
14168
  if (open.value) {
14113
14169
  nextTick(() => dropdownContainerEl.value?.focus());
@@ -14146,6 +14202,12 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
14146
14202
  addedOptions.value = [...addedOptions.value, { id: text, text }];
14147
14203
  modelValue.value = [...modelValue.value, text];
14148
14204
  };
14205
+ __expose({
14206
+ /**
14207
+ * Focuses the trigger button
14208
+ */
14209
+ focus: () => baseDropdownEl.value?.focus()
14210
+ });
14149
14211
  return (_ctx, _cache) => {
14150
14212
  return openBlock(), createBlock(BaseFormFieldWrapper, {
14151
14213
  id: props.id,
@@ -14158,7 +14220,10 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
14158
14220
  "preserve-sub-text-space": __props.preserveSubTextSpace
14159
14221
  }, {
14160
14222
  default: withCtx((slotProps) => [
14161
- createVNode(BaseDropdown, mergeProps(slotProps, {
14223
+ createVNode(BaseDropdown, mergeProps({
14224
+ ref_key: "baseDropdownEl",
14225
+ ref: baseDropdownEl
14226
+ }, slotProps, {
14162
14227
  open: open.value,
14163
14228
  "onUpdate:open": _cache[0] || (_cache[0] = ($event) => open.value = $event),
14164
14229
  text: summary.value,
@@ -18001,5 +18066,5 @@ const kdsResponsiveButtonGroupAlignments = Object.values(
18001
18066
  kdsResponsiveButtonGroupAlignment
18002
18067
  );
18003
18068
 
18004
- export { KdsAccordion, KdsAvatar, KdsAvatarCounter, KdsBadge, KdsBreadcrumb, _sfc_main$1n as KdsButton, _sfc_main$g as KdsCard, _sfc_main$12 as KdsCheckbox, KdsCheckboxGroup, KdsClickableCard, _sfc_main$R as KdsColorInput, KdsColorSwatch, _sfc_main$17 as KdsContextMenu, KdsDataType, _sfc_main$K as KdsDateInput, _sfc_main$I as KdsDateTimeFormatInput, KdsDivider, KdsDonutChart, _sfc_main$y as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, _sfc_main$B as KdsIntervalInput, KdsLabel, KdsLink, _sfc_main$1m as KdsLinkButton, KdsLinkCard, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$18 as KdsMenu, _sfc_main$1c as KdsMenuButton, KdsModal, KdsModalLayout, _sfc_main$v as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$V as KdsNumberInput, KdsPanel, _sfc_main$Q as KdsPasswordInput, _sfc_main$H as KdsPatternInput, KdsPreviewList, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSelectableCard, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$D as KdsTimeInput, _sfc_main$1k as KdsToggleButton, KdsTwinList, _sfc_main$P as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsIntervalDirectionalities, kdsIntervalDirectionality, kdsIntervalInputFormat, kdsIntervalInputFormats, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPanelBodyOverflow, kdsPanelBodyOverflows, kdsPanelBodyVariant, kdsPanelBodyVariants, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsTimeInputGranularities, kdsTimeInputGranularity, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
18069
+ export { KdsAccordion, KdsAvatar, KdsAvatarCounter, KdsBadge, KdsBreadcrumb, _sfc_main$1n as KdsButton, _sfc_main$g as KdsCard, _sfc_main$12 as KdsCheckbox, KdsCheckboxGroup, KdsClickableCard, _sfc_main$R as KdsColorInput, KdsColorSwatch, _sfc_main$17 as KdsContextMenu, KdsDataType, _sfc_main$K as KdsDateInput, _sfc_main$I as KdsDateTimeFormatInput, KdsDivider, KdsDonutChart, _sfc_main$y as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, _sfc_main$B as KdsIntervalInput, KdsLabel, KdsLink, _sfc_main$1m as KdsLinkButton, KdsLinkCard, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$18 as KdsMenu, _sfc_main$1c as KdsMenuButton, KdsMissingValueIcon, KdsModal, KdsModalLayout, _sfc_main$v as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$V as KdsNumberInput, KdsPanel, _sfc_main$Q as KdsPasswordInput, _sfc_main$H as KdsPatternInput, KdsPopover, KdsPreviewList, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSelectableCard, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$D as KdsTimeInput, _sfc_main$1k as KdsToggleButton, KdsTwinList, _sfc_main$P as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsIntervalDirectionalities, kdsIntervalDirectionality, kdsIntervalInputFormat, kdsIntervalInputFormats, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPanelBodyOverflow, kdsPanelBodyOverflows, kdsPanelBodyVariant, kdsPanelBodyVariants, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsPopoverPlacement, kdsPopoverPlacements, kdsPopoverRole, kdsPopoverRoles, kdsPopoverType, kdsPopoverTypes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsTimeInputGranularities, kdsTimeInputGranularity, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
18005
18070
  //# sourceMappingURL=index.js.map