@openpen/module-api 1.2.0 → 1.4.0

package/dist/uikit/index.js

@@ -1,13 +1,13 @@
-import { defineComponent, onMounted, inject, computed, watch, useTemplateRef, ref, openBlock, createBlock, unref, withCtx, createVNode, renderSlot, normalizeStyle, normalizeClass, createElementBlock, Fragment, renderList, createElementVNode, createCommentVNode, toDisplayString, createTextVNode } from "vue";
-import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent, PopoverArrow, SliderRoot, SliderTrack, SliderRange, SliderThumb, SwitchRoot, SwitchThumb, RadioGroupRoot, RadioGroupItem, SelectRoot, SelectTrigger, SelectValue, SelectIcon, SelectPortal, SelectContent, SelectViewport, SelectItem, SelectItemIndicator, SelectItemText, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, TabsRoot, TabsList, TabsTrigger, TabsContent } from "reka-ui";
-import { ComboboxAnchor, ComboboxArrow, ComboboxCancel, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, PopoverAnchor, PopoverArrow as PopoverArrow2, PopoverClose, PopoverContent as PopoverContent2, PopoverPortal as PopoverPortal2, PopoverRoot as PopoverRoot2, PopoverTrigger as PopoverTrigger2, RadioGroupIndicator, RadioGroupItem as RadioGroupItem2, RadioGroupRoot as RadioGroupRoot2, SelectArrow, SelectContent as SelectContent2, SelectGroup, SelectIcon as SelectIcon2, SelectItem as SelectItem2, SelectItemIndicator as SelectItemIndicator2, SelectItemText as SelectItemText2, SelectLabel, SelectPortal as SelectPortal2, SelectRoot as SelectRoot2, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger as SelectTrigger2, SelectValue as SelectValue2, SelectViewport as SelectViewport2, SliderRange as SliderRange2, SliderRoot as SliderRoot2, SliderThumb as SliderThumb2, SliderTrack as SliderTrack2, SwitchRoot as SwitchRoot2, SwitchThumb as SwitchThumb2, TabsContent as TabsContent2, TabsList as TabsList2, TabsRoot as TabsRoot2, TabsTrigger as TabsTrigger2, TagsInputClear, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputRoot, TooltipArrow as TooltipArrow2, TooltipContent as TooltipContent2, TooltipPortal as TooltipPortal2, TooltipProvider as TooltipProvider2, TooltipRoot as TooltipRoot2, TooltipTrigger as TooltipTrigger2 } from "reka-ui";
+import { defineComponent, onMounted, inject, computed, watch, useTemplateRef, ref, openBlock, createBlock, unref, withCtx, createVNode, renderSlot, createElementBlock, toDisplayString, createCommentVNode, normalizeClass, onBeforeUnmount, normalizeStyle, createTextVNode, Fragment, renderList, createElementVNode } from "vue";
+import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent, PopoverArrow, SliderRoot, SliderTrack, SliderRange, SliderThumb, SwitchRoot, SwitchThumb, TooltipProvider, TooltipRoot, TooltipTrigger, TooltipPortal, TooltipContent, TooltipArrow, RadioGroupRoot, RadioGroupItem, Toggle, SelectRoot, SelectTrigger, SelectValue, SelectIcon, SelectPortal, SelectContent, SelectViewport, SelectItem, SelectItemIndicator, SelectItemText, TabsRoot, TabsList, TabsTrigger, TabsContent } from "reka-ui";
+import { ComboboxAnchor, ComboboxArrow, ComboboxCancel, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxSeparator, ComboboxTrigger, ComboboxViewport, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, DialogTrigger, NumberFieldDecrement, NumberFieldIncrement, NumberFieldInput, NumberFieldRoot, PopoverAnchor, PopoverArrow as PopoverArrow2, PopoverClose, PopoverContent as PopoverContent2, PopoverPortal as PopoverPortal2, PopoverRoot as PopoverRoot2, PopoverTrigger as PopoverTrigger2, RadioGroupIndicator, RadioGroupItem as RadioGroupItem2, RadioGroupRoot as RadioGroupRoot2, SelectArrow, SelectContent as SelectContent2, SelectGroup, SelectIcon as SelectIcon2, SelectItem as SelectItem2, SelectItemIndicator as SelectItemIndicator2, SelectItemText as SelectItemText2, SelectLabel, SelectPortal as SelectPortal2, SelectRoot as SelectRoot2, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger as SelectTrigger2, SelectValue as SelectValue2, SelectViewport as SelectViewport2, SliderRange as SliderRange2, SliderRoot as SliderRoot2, SliderThumb as SliderThumb2, SliderTrack as SliderTrack2, SwitchRoot as SwitchRoot2, SwitchThumb as SwitchThumb2, TabsContent as TabsContent2, TabsList as TabsList2, TabsRoot as TabsRoot2, TabsTrigger as TabsTrigger2, TagsInputClear, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText, TagsInputRoot, Toggle as Toggle2, TooltipArrow as TooltipArrow2, TooltipContent as TooltipContent2, TooltipPortal as TooltipPortal2, TooltipProvider as TooltipProvider2, TooltipRoot as TooltipRoot2, TooltipTrigger as TooltipTrigger2 } from "reka-ui";
 import { W as WRAPPER_EL_KEY, M as MODAL_MANAGER_KEY, c as CONTROL_BAR_ANIMATING_KEY, P as POPOVER_PLACEMENT_HINT_KEY, I as IS_VERTICAL_KEY, S as SNAP_EDGE_KEY, T as TOOLTIP_FLIP_DOWN_KEY } from "../_chunks/inject-keys-CRXCpN-M.js";
 import "dompurify";
 import "zod";
 import { u as usePassthroughGuard } from "../_chunks/passthrough-DKU7JYuQ.js";
-import { D as DIALOG_PLUGIN_HANDLE_KEY } from "../_chunks/AppButtonDropdown.vue_vue_type_style_index_0_lang-DBVFUpxc.js";
-import { _, a, b, u } from "../_chunks/AppButtonDropdown.vue_vue_type_style_index_0_lang-DBVFUpxc.js";
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+import { D as DIALOG_PLUGIN_HANDLE_KEY } from "../_chunks/AppButtonDropdown.vue_vue_type_style_index_0_lang-B9dHU-LE.js";
+import { _, a, b, u } from "../_chunks/AppButtonDropdown.vue_vue_type_style_index_0_lang-B9dHU-LE.js";
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "AppPopover",
   props: {
     popoverId: {},
@@ -97,7 +97,8 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
                 side: rekaSide.value,
                 "avoid-collisions": true,
                 "side-offset": props.gap,
-                class: "openpen-popover-content openpen-interactive"
+                class: "openpen-popover-content openpen-interactive",
+                "data-testid": "controlbar-popover"
               }, {
                 default: withCtx(() => [
                   renderSlot(_ctx.$slots, "content"),
@@ -118,7 +119,66 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$7 = {
+  class: "openpen-popover-panel",
+  "data-testid": "app-popover-panel"
+};
+const _hoisted_2$2 = {
+  key: 0,
+  class: "openpen-popover-title",
+  "data-testid": "app-popover-panel-title"
+};
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
+  __name: "AppPopoverPanel",
+  props: {
+    title: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$7, [
+        __props.title ? (openBlock(), createElementBlock("div", _hoisted_2$2, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ]);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const AppPopoverPanel = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-ffa56c48"]]);
+const _hoisted_1$6 = {
+  key: 0,
+  class: "openpen-popover-row-label"
+};
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
+  __name: "AppPopoverRow",
+  props: {
+    label: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["openpen-popover-row", { "openpen-popover-row--bare": !__props.label }]),
+        "data-testid": "app-popover-row"
+      }, [
+        __props.label ? (openBlock(), createElementBlock("span", _hoisted_1$6, toDisplayString(__props.label), 1)) : createCommentVNode("", true),
+        renderSlot(_ctx.$slots, "default", {}, void 0, true)
+      ], 2);
+    };
+  }
+});
+const AppPopoverRow = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-6d95e79e"]]);
+const _hoisted_1$5 = {
+  key: 0,
+  class: "app-slider-bubble",
+  "data-testid": "app-slider-bubble",
+  "aria-hidden": "true"
+};
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "AppSlider",
   props: {
     modelValue: {},
@@ -126,19 +186,36 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     max: { default: 100 },
     step: { default: 1 },
     width: { default: "100%" },
+    ariaLabel: { default: void 0 },
     orientation: { default: "horizontal" },
     trackHeight: { default: "4px" },
     trackRadius: { default: "2px" },
     thumbWidth: { default: "14px" },
     thumbHeight: { default: "14px" },
     thumbRadius: { default: "50%" },
-    inverted: { type: Boolean, default: false }
+    inverted: { type: Boolean, default: false },
+    valueLabel: { default: void 0 }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
     const isVertical = computed(() => props.orientation === "vertical");
+    const dragging = ref(false);
+    const showBubble = computed(
+      () => dragging.value && !!props.valueLabel && !isVertical.value
+    );
+    function endDrag() {
+      dragging.value = false;
+      document.removeEventListener("pointerup", endDrag);
+      document.removeEventListener("pointercancel", endDrag);
+    }
+    function onPointerDown() {
+      dragging.value = true;
+      document.addEventListener("pointerup", endDrag);
+      document.addEventListener("pointercancel", endDrag);
+    }
+    onBeforeUnmount(endDrag);
     const rootStyle = computed(() => {
       if (isVertical.value) {
         return {
@@ -168,6 +245,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(SliderRoot), {
         class: normalizeClass(["app-slider-root", { "app-slider-root--vertical": isVertical.value, "app-slider-root--inverted": __props.inverted }]),
+        "data-testid": "app-slider-root",
         style: normalizeStyle(rootStyle.value),
         "model-value": [__props.modelValue],
         min: __props.min,
@@ -175,35 +253,46 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
         step: __props.step,
         orientation: __props.orientation,
         inverted: __props.inverted,
-        "onUpdate:modelValue": onValueChange
+        "onUpdate:modelValue": onValueChange,
+        onPointerdown: onPointerDown
       }, {
         default: withCtx(() => [
-          createVNode(unref(SliderTrack), { class: "app-slider-track" }, {
+          createVNode(unref(SliderTrack), {
+            class: "app-slider-track",
+            "data-testid": "app-slider-track"
+          }, {
             default: withCtx(() => [
-              createVNode(unref(SliderRange), { class: "app-slider-range" })
+              createVNode(unref(SliderRange), {
+                class: "app-slider-range",
+                "data-testid": "app-slider-range"
+              })
             ]),
             _: 1
           }),
-          createVNode(unref(SliderThumb), { class: "app-slider-thumb" })
+          createVNode(unref(SliderThumb), {
+            class: "app-slider-thumb",
+            "data-testid": "app-slider-thumb",
+            "aria-label": __props.ariaLabel,
+            "aria-valuetext": __props.valueLabel
+          }, {
+            default: withCtx(() => [
+              showBubble.value ? (openBlock(), createElementBlock("span", _hoisted_1$5, toDisplayString(__props.valueLabel), 1)) : createCommentVNode("", true)
+            ]),
+            _: 1
+          }, 8, ["aria-label", "aria-valuetext"])
         ]),
         _: 1
       }, 8, ["class", "style", "model-value", "min", "max", "step", "orientation", "inverted"]);
     };
   }
 });
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const AppSlider = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-946ec6af"]]);
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const AppSlider = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-49f1dd0d"]]);
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "AppToggle",
   props: {
     modelValue: { type: Boolean },
-    ariaLabel: { default: "" }
+    ariaLabel: { default: "" },
+    testid: { default: void 0 }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -216,26 +305,83 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
         class: normalizeClass(["app-toggle", { on: __props.modelValue }]),
         "model-value": __props.modelValue,
         "aria-label": __props.ariaLabel,
-        "aria-pressed": __props.modelValue,
+        "data-testid": __props.testid,
         "onUpdate:modelValue": onCheckedChange
       }, {
         default: withCtx(() => [
           createVNode(unref(SwitchThumb), { class: "app-toggle-thumb" })
         ]),
         _: 1
-      }, 8, ["class", "model-value", "aria-label", "aria-pressed"]);
+      }, 8, ["class", "model-value", "aria-label", "data-testid"]);
+    };
+  }
+});
+const AppToggle = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-a8ed9b2b"]]);
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "AppTooltip",
+  props: {
+    content: {},
+    side: { default: "top" },
+    delay: { default: 200 }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(TooltipProvider), {
+        "delay-duration": props.delay
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(TooltipRoot), null, {
+            default: withCtx(() => [
+              createVNode(unref(TooltipTrigger), { "as-child": "" }, {
+                default: withCtx(() => [
+                  renderSlot(_ctx.$slots, "default")
+                ]),
+                _: 3
+              }),
+              createVNode(unref(TooltipPortal), null, {
+                default: withCtx(() => [
+                  createVNode(unref(TooltipContent), {
+                    side: props.side,
+                    "side-offset": 6,
+                    "avoid-collisions": true,
+                    "collision-padding": 8,
+                    class: "openpen-tooltip-content"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(props.content) + " ", 1),
+                      createVNode(unref(TooltipArrow), {
+                        class: "openpen-tooltip-arrow",
+                        width: 10,
+                        height: 5
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["side"])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      }, 8, ["delay-duration"]);
     };
   }
 });
-const AppToggle = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-3bad8ac7"]]);
-const _hoisted_1$3 = ["data-testid"];
+const _hoisted_1$4 = ["aria-label", "data-testid"];
 const _hoisted_2$1 = ["innerHTML"];
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _hoisted_3$1 = { key: 1 };
+const _hoisted_4$1 = ["data-testid"];
+const _hoisted_5$1 = ["innerHTML"];
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "AppSegmented",
   props: {
     modelValue: {},
     options: {},
-    disabled: { type: Boolean }
+    disabled: { type: Boolean },
+    ariaLabel: {}
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -245,45 +391,174 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         emit("update:modelValue", val);
       }
     }
+    const tipOf = (o) => o.tooltip ?? (o.iconOnly ? o.label : void 0);
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(RadioGroupRoot), {
         class: normalizeClass(["app-seg", { "app-seg--disabled": __props.disabled }]),
+        "data-testid": "app-seg",
         "model-value": __props.modelValue,
         disabled: __props.disabled,
+        "aria-label": __props.ariaLabel,
         orientation: "horizontal",
         "onUpdate:modelValue": onValueChange
       }, {
         default: withCtx(() => [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.options, (opt) => {
+            return openBlock(), createElementBlock(Fragment, {
+              key: opt.value
+            }, [
+              tipOf(opt) ? (openBlock(), createBlock(_sfc_main$8, {
+                key: 0,
+                content: tipOf(opt)
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(RadioGroupItem), {
+                    value: opt.value,
+                    "as-child": ""
+                  }, {
+                    default: withCtx(() => [
+                      createElementVNode("button", {
+                        class: normalizeClass(["app-seg-btn", { active: __props.modelValue === opt.value, "app-seg-btn--icon": opt.iconOnly }]),
+                        "aria-label": opt.iconOnly ? opt.label : void 0,
+                        "data-testid": opt.testid
+                      }, [
+                        opt.icon ? (openBlock(), createElementBlock("span", {
+                          key: 0,
+                          class: "app-seg-icon",
+                          "aria-hidden": "true",
+                          innerHTML: opt.icon
+                        }, null, 8, _hoisted_2$1)) : createCommentVNode("", true),
+                        !opt.iconOnly ? (openBlock(), createElementBlock("span", _hoisted_3$1, toDisplayString(opt.label), 1)) : createCommentVNode("", true)
+                      ], 10, _hoisted_1$4)
+                    ]),
+                    _: 2
+                  }, 1032, ["value"])
+                ]),
+                _: 2
+              }, 1032, ["content"])) : (openBlock(), createBlock(unref(RadioGroupItem), {
+                key: 1,
+                value: opt.value,
+                "as-child": ""
+              }, {
+                default: withCtx(() => [
+                  createElementVNode("button", {
+                    class: normalizeClass(["app-seg-btn", { active: __props.modelValue === opt.value }]),
+                    "data-testid": opt.testid
+                  }, [
+                    opt.icon ? (openBlock(), createElementBlock("span", {
+                      key: 0,
+                      class: "app-seg-icon",
+                      "aria-hidden": "true",
+                      innerHTML: opt.icon
+                    }, null, 8, _hoisted_5$1)) : createCommentVNode("", true),
+                    createElementVNode("span", null, toDisplayString(opt.label), 1)
+                  ], 10, _hoisted_4$1)
+                ]),
+                _: 2
+              }, 1032, ["value"]))
+            ], 64);
+          }), 128))
+        ]),
+        _: 1
+      }, 8, ["class", "model-value", "disabled", "aria-label"]);
+    };
+  }
+});
+const AppSegmented = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-a90b77a6"]]);
+const _hoisted_1$3 = ["aria-label", "title", "data-testid"];
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "AppSwatchPicker",
+  props: {
+    modelValue: {},
+    colors: {},
+    ariaLabel: {},
+    shape: { default: "circular" },
+    size: { default: "medium" },
+    spacing: { default: "medium" },
+    background: { type: Function, default: void 0 },
+    disabled: { type: Boolean, default: false },
+    testid: { default: "app-swatch-picker" }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const isSelected = (value) => value.toLowerCase() === props.modelValue.toLowerCase();
+    const selectedValue = () => {
+      var _a;
+      return ((_a = props.colors.find((c) => isSelected(c.value))) == null ? void 0 : _a.value) ?? "";
+    };
+    function onValueChange(val) {
+      if (typeof val === "string") emit("update:modelValue", val);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(RadioGroupRoot), {
+        class: normalizeClass(["app-swatch-picker", [`app-swatch-picker--${__props.shape}`, `app-swatch-picker--${__props.size}`, `app-swatch-picker--spacing-${__props.spacing}`]]),
+        "data-testid": __props.testid,
+        "model-value": selectedValue(),
+        "aria-label": __props.ariaLabel,
+        disabled: __props.disabled,
+        "onUpdate:modelValue": onValueChange
+      }, {
+        default: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.colors, (c) => {
             return openBlock(), createBlock(unref(RadioGroupItem), {
-              key: opt.value,
-              value: opt.value,
+              key: c.value,
+              value: c.value,
               "as-child": ""
             }, {
               default: withCtx(() => [
                 createElementVNode("button", {
-                  class: normalizeClass(["app-seg-btn", { active: __props.modelValue === opt.value }]),
-                  "data-testid": opt.testid
-                }, [
-                  opt.icon ? (openBlock(), createElementBlock("span", {
-                    key: 0,
-                    class: "app-seg-icon",
-                    "aria-hidden": "true",
-                    innerHTML: opt.icon
-                  }, null, 8, _hoisted_2$1)) : createCommentVNode("", true),
-                  createElementVNode("span", null, toDisplayString(opt.label), 1)
-                ], 10, _hoisted_1$3)
+                  type: "button",
+                  class: normalizeClass(["app-swatch", { selected: isSelected(c.value) }]),
+                  style: normalizeStyle({ background: __props.background ? __props.background(c) : c.value }),
+                  "aria-label": c.label,
+                  title: c.label,
+                  "data-testid": c.testid
+                }, null, 14, _hoisted_1$3)
               ]),
               _: 2
             }, 1032, ["value"]);
           }), 128))
         ]),
         _: 1
-      }, 8, ["class", "model-value", "disabled"]);
+      }, 8, ["class", "data-testid", "model-value", "aria-label", "disabled"]);
+    };
+  }
+});
+const AppSwatchPicker = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-c62ade43"]]);
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "AppToggleButton",
+  props: {
+    modelValue: { type: Boolean },
+    ariaLabel: {},
+    disabled: { type: Boolean, default: false },
+    testid: { default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    function onPressedChange(val) {
+      if (typeof val === "boolean") emit("update:modelValue", val);
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Toggle), {
+        class: normalizeClass(["app-toggle-btn", { pressed: __props.modelValue }]),
+        "model-value": __props.modelValue,
+        "aria-label": __props.ariaLabel,
+        disabled: __props.disabled,
+        "data-testid": __props.testid,
+        "onUpdate:modelValue": onPressedChange
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, void 0, true)
+        ]),
+        _: 3
+      }, 8, ["class", "model-value", "aria-label", "disabled", "data-testid"]);
     };
   }
 });
-const AppSegmented = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-a0348ad4"]]);
+const AppToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-1d1a1150"]]);
 function useDialogPluginComponent() {
   const handle = inject(DIALOG_PLUGIN_HANDLE_KEY);
   if (!handle) {
@@ -293,13 +568,14 @@ function useDialogPluginComponent() {
   }
   return handle;
 }
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "AppSelect",
   props: {
     modelValue: {},
     options: {},
     placeholder: {},
-    disabled: { type: Boolean, default: false }
+    disabled: { type: Boolean, default: false },
+    ariaLabel: { default: void 0 }
   },
   emits: ["update:modelValue"],
   setup(__props, { emit: __emit }) {
@@ -314,7 +590,10 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         "onUpdate:modelValue": onValueChange
       }, {
         default: withCtx(() => [
-          createVNode(unref(SelectTrigger), { class: "openpen-select-trigger" }, {
+          createVNode(unref(SelectTrigger), {
+            class: "openpen-select-trigger",
+            "aria-label": __props.ariaLabel
+          }, {
             default: withCtx(() => [
               createVNode(unref(SelectValue), { placeholder: __props.placeholder }, null, 8, ["placeholder"]),
               createVNode(unref(SelectIcon), {
@@ -341,7 +620,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
               })
             ]),
             _: 1
-          }),
+          }, 8, ["aria-label"]),
           createVNode(unref(SelectPortal), null, {
             default: withCtx(() => [
               createVNode(unref(SelectContent), {
@@ -404,59 +683,6 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  __name: "AppTooltip",
-  props: {
-    content: {},
-    side: { default: "top" },
-    delay: { default: 200 }
-  },
-  setup(__props) {
-    const props = __props;
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(TooltipProvider), {
-        "delay-duration": props.delay
-      }, {
-        default: withCtx(() => [
-          createVNode(unref(TooltipRoot), null, {
-            default: withCtx(() => [
-              createVNode(unref(TooltipTrigger), { "as-child": "" }, {
-                default: withCtx(() => [
-                  renderSlot(_ctx.$slots, "default")
-                ]),
-                _: 3
-              }),
-              createVNode(unref(TooltipPortal), null, {
-                default: withCtx(() => [
-                  createVNode(unref(TooltipContent), {
-                    side: props.side,
-                    "side-offset": 6,
-                    "avoid-collisions": true,
-                    "collision-padding": 8,
-                    class: "openpen-tooltip-content"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(props.content) + " ", 1),
-                      createVNode(unref(TooltipArrow), {
-                        class: "openpen-tooltip-arrow",
-                        width: 10,
-                        height: 5
-                      })
-                    ]),
-                    _: 1
-                  }, 8, ["side"])
-                ]),
-                _: 1
-              })
-            ]),
-            _: 3
-          })
-        ]),
-        _: 3
-      }, 8, ["delay-duration"]);
-    };
-  }
-});
 const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "AppTabs",
   props: {
@@ -566,10 +792,14 @@ const _hoisted_6 = {
   "stroke-linecap": "round",
   "stroke-linejoin": "round"
 };
-const _hoisted_7 = { class: "app-banner-body" };
+const _hoisted_7 = {
+  class: "app-banner-body",
+  "data-testid": "app-banner-body"
+};
 const _hoisted_8 = {
   key: 0,
-  class: "app-banner-actions"
+  class: "app-banner-actions",
+  "data-testid": "app-banner-actions"
 };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "AppBanner",
@@ -649,7 +879,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const AppBanner = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-c68deb55"]]);
+const AppBanner = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-4f309880"]]);
 const _hoisted_1$1 = ["data-tip", "aria-label", "aria-disabled"];
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "AppButton",
@@ -734,7 +964,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
-        class: normalizeClass(["app-btn-dropdown-wrap", { "app-btn-dropdown-wrap--vertical": unref(isVertical) }])
+        class: normalizeClass(["app-btn-dropdown-wrap", { "app-btn-dropdown-wrap--vertical": unref(isVertical) }]),
+        "data-testid": "app-button-dropdown-wrap"
       }, [
         createVNode(AppButton, {
           variant: __props.variant,
@@ -750,7 +981,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ]),
           _: 3
         }, 8, ["variant", "active", "disabled", "tooltip", "aria-label", "data-testid"]),
-        createVNode(_sfc_main$9, {
+        createVNode(_sfc_main$d, {
           "popover-id": __props.popoverId,
           placement: __props.popoverPlacement
         }, {
@@ -769,6 +1000,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, [
               (openBlock(), createElementBlock("svg", {
                 class: normalizeClass(["app-btn-dropdown-caret-icon", `app-btn-dropdown-caret-icon--${caretRotation(open)}`]),
+                "data-testid": "app-button-dropdown-caret-icon",
                 width: "10",
                 height: "10",
                 viewBox: "0 0 24 24",
@@ -794,13 +1026,17 @@ export {
   AppButton,
   _sfc_main as AppButtonDropdown,
   _ as AppDialog,
-  _sfc_main$9 as AppPopover,
+  _sfc_main$d as AppPopover,
+  AppPopoverPanel,
+  AppPopoverRow,
   AppSegmented,
-  _sfc_main$5 as AppSelect,
+  _sfc_main$4 as AppSelect,
   AppSlider,
+  AppSwatchPicker,
   AppTabs,
   AppToggle,
-  _sfc_main$4 as AppTooltip,
+  AppToggleButton,
+  _sfc_main$8 as AppTooltip,
   ComboboxAnchor,
   ComboboxArrow,
   ComboboxCancel,
@@ -870,6 +1106,7 @@ export {
   TagsInputItemDelete,
   TagsInputItemText,
   TagsInputRoot,
+  Toggle2 as Toggle,
   TooltipArrow2 as TooltipArrow,
   TooltipContent2 as TooltipContent,
   TooltipPortal2 as TooltipPortal,