@skewedaspect/sleekspace-ui 0.5.1 → 0.6.0

package/dist/sleekspace-ui.umd.js

@@ -781,6 +781,44 @@
   function cloneFnJSON(source) {
     return JSON.parse(JSON.stringify(source));
   }
+  function useResizeObserver(target, callback, options = {}) {
+    const { window: window2 = defaultWindow, ...observerOptions } = options;
+    let observer;
+    const isSupported = useSupported(() => window2 && "ResizeObserver" in window2);
+    const cleanup = () => {
+      if (observer) {
+        observer.disconnect();
+        observer = void 0;
+      }
+    };
+    const targets = vue.computed(() => {
+      const _targets = vue.toValue(target);
+      return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
+    });
+    const stopWatch = vue.watch(
+      targets,
+      (els) => {
+        cleanup();
+        if (isSupported.value && window2) {
+          observer = new ResizeObserver(callback);
+          for (const _el of els) {
+            if (_el)
+              observer.observe(_el, observerOptions);
+          }
+        }
+      },
+      { immediate: true, flush: "post" }
+    );
+    const stop = () => {
+      cleanup();
+      stopWatch();
+    };
+    tryOnScopeDispose(stop);
+    return {
+      isSupported,
+      stop
+    };
+  }
   const EVENT_FOCUS_IN = "focusin";
   const EVENT_FOCUS_OUT = "focusout";
   const PSEUDO_CLASS_FOCUS_WITHIN = ":focus-within";
@@ -2925,7 +2963,7 @@
   });
   var FocusScope_default = FocusScope_vue_vue_type_script_setup_true_lang_default;
   const ITEM_SELECT = "menu.itemSelect";
-  const SELECTION_KEYS = ["Enter", " "];
+  const SELECTION_KEYS$1 = ["Enter", " "];
   const FIRST_KEYS = [
     "ArrowDown",
     "PageUp",
@@ -2938,8 +2976,8 @@
   ];
   const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS];
   const SUB_OPEN_KEYS = {
-    ltr: [...SELECTION_KEYS, "ArrowRight"],
-    rtl: [...SELECTION_KEYS, "ArrowLeft"]
+    ltr: [...SELECTION_KEYS$1, "ArrowRight"],
+    rtl: [...SELECTION_KEYS$1, "ArrowLeft"]
   };
   const SUB_CLOSE_KEYS = {
     ltr: ["ArrowLeft"],
@@ -4265,7 +4303,7 @@ For more information, see https://www.reka-ui.com/docs/components/${componentLin
     }
   });
   var PopperAnchor_default = PopperAnchor_vue_vue_type_script_setup_true_lang_default;
-  const _hoisted_1$y = {
+  const _hoisted_1$C = {
     key: 0,
     d: "M0 0L6 6L12 0"
   };
@@ -4310,7 +4348,7 @@ For more information, see https://www.reka-ui.com/docs/components/${componentLin
           viewBox: _ctx.asChild ? void 0 : "0 0 12 6",
           preserveAspectRatio: _ctx.asChild ? void 0 : "none"
         }), {
-          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default", {}, () => [!_ctx.rounded ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$y)) : (vue.openBlock(), vue.createElementBlock("path", _hoisted_2$i))])]),
+          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default", {}, () => [!_ctx.rounded ? (vue.openBlock(), vue.createElementBlock("path", _hoisted_1$C)) : (vue.openBlock(), vue.createElementBlock("path", _hoisted_2$i))])]),
           _: 3
         }, 16, [
           "width",
@@ -6494,12 +6532,12 @@ For more information, see https://www.reka-ui.com/docs/components/${componentLin
     }
   });
   var ComboboxAnchor_default = ComboboxAnchor_vue_vue_type_script_setup_true_lang_default;
-  function valueComparator(value, currentValue, comparator) {
+  function valueComparator$1(value, currentValue, comparator) {
     if (value === void 0) return false;
-    else if (Array.isArray(value)) return value.some((val) => compare(val, currentValue, comparator));
-    else return compare(value, currentValue, comparator);
+    else if (Array.isArray(value)) return value.some((val) => compare$1(val, currentValue, comparator));
+    else return compare$1(value, currentValue, comparator);
   }
-  function compare(value, currentValue, comparator) {
+  function compare$1(value, currentValue, comparator) {
     if (value === void 0 || currentValue === void 0) return false;
     if (typeof value === "string") return value === currentValue;
     if (typeof comparator === "function") return comparator(value, currentValue);
@@ -6593,7 +6631,7 @@ For more information, see https://www.reka-ui.com/docs/components/${componentLin
         isUserAction.value = true;
         if (props.multiple) {
           const modelArray = Array.isArray(modelValue.value) ? [...modelValue.value] : [];
-          const index = modelArray.findIndex((i) => compare(i, val, props.by));
+          const index = modelArray.findIndex((i) => compare$1(i, val, props.by));
           if (props.selectionBehavior === "toggle") {
             index === -1 ? modelArray.push(val) : modelArray.splice(index, 1);
             modelValue.value = modelArray;
@@ -6601,7 +6639,7 @@ For more information, see https://www.reka-ui.com/docs/components/${componentLin
             modelValue.value = [val];
             firstValue.value = val;
           }
-        } else if (props.selectionBehavior === "toggle") if (compare(modelValue.value, val, props.by)) modelValue.value = void 0;
+        } else if (props.selectionBehavior === "toggle") if (compare$1(modelValue.value, val, props.by)) modelValue.value = void 0;
         else modelValue.value = val;
         else modelValue.value = val;
         setTimeout(() => {
@@ -6629,7 +6667,7 @@ For more information, see https://www.reka-ui.com/docs/components/${componentLin
       function highlightItem(value) {
         if (isVirtual.value) virtualHighlightHook.trigger(value);
         else {
-          const item = getItems().find((i) => compare(i.value, value, props.by));
+          const item = getItems().find((i) => compare$1(i.value, value, props.by));
           if (item) {
             highlightedElement.value = item.ref;
             changeHighlight(item.ref);
@@ -7008,7 +7046,7 @@ For more information, see https://www.reka-ui.com/docs/components/${componentLin
       const { forwardRef, currentElement } = useForwardExpose();
       const rootContext = injectListboxRootContext();
       const isHighlighted = vue.computed(() => currentElement.value === rootContext.highlightedElement.value);
-      const isSelected = vue.computed(() => valueComparator(rootContext.modelValue.value, props.value, rootContext.by));
+      const isSelected = vue.computed(() => valueComparator$1(rootContext.modelValue.value, props.value, rootContext.by));
       const disabled = vue.computed(() => rootContext.disabled.value || props.disabled);
       async function handleSelect2(ev) {
         emits("select", ev);
@@ -8558,7 +8596,7 @@ For more information, see https://www.reka-ui.com/docs/components/${componentLin
           onKeydown: _cache[2] || (_cache[2] = async (event) => {
             const isTypingAhead = vue.unref(contentContext).searchRef.value !== "";
             if (_ctx.disabled || isTypingAhead && event.key === " ") return;
-            if (vue.unref(SELECTION_KEYS).includes(event.key)) {
+            if (vue.unref(SELECTION_KEYS$1).includes(event.key)) {
               event.currentTarget.click();
               event.preventDefault();
             }
@@ -11971,167 +12009,1626 @@ Defaulting to \`null\`.`);
     }
   });
   var RadioGroupIndicator_default = RadioGroupIndicator_vue_vue_type_script_setup_true_lang_default;
-  function getNextSortedValues(prevValues = [], nextValue, atIndex) {
-    const nextValues = [...prevValues];
-    nextValues[atIndex] = nextValue;
-    return nextValues.sort((a, b) => a - b);
-  }
-  function convertValueToPercentage(value, min2, max2) {
-    const maxSteps = max2 - min2;
-    const percentPerStep = 100 / maxSteps;
-    const percentage = percentPerStep * (value - min2);
-    return clamp$1(percentage, 0, 100);
-  }
-  function getLabel(index, totalValues) {
-    if (totalValues > 2) return `Value ${index + 1} of ${totalValues}`;
-    else if (totalValues === 2) return ["Minimum", "Maximum"][index];
-    else return void 0;
-  }
-  function getClosestValueIndex(values, nextValue) {
-    if (values.length === 1) return 0;
-    const distances = values.map((value) => Math.abs(value - nextValue));
-    const closestDistance = Math.min(...distances);
-    return distances.indexOf(closestDistance);
-  }
-  function getThumbInBoundsOffset(width, left, direction) {
-    const halfWidth = width / 2;
-    const halfPercent = 50;
-    const offset2 = linearScale([0, halfPercent], [0, halfWidth]);
-    return (halfWidth - offset2(left) * direction) * direction;
-  }
-  function getStepsBetweenValues(values) {
-    return values.slice(0, -1).map((value, index) => values[index + 1] - value);
-  }
-  function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
-    if (minStepsBetweenValues > 0) {
-      const stepsBetweenValues = getStepsBetweenValues(values);
-      const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
-      return actualMinStepsBetweenValues >= minStepsBetweenValues;
-    }
-    return true;
-  }
-  function linearScale(input, output) {
-    return (value) => {
-      if (input[0] === input[1] || output[0] === output[1]) return output[0];
-      const ratio = (output[1] - output[0]) / (input[1] - input[0]);
-      return output[0] + ratio * (value - input[0]);
-    };
+  const OPEN_KEYS = [
+    " ",
+    "Enter",
+    "ArrowUp",
+    "ArrowDown"
+  ];
+  const SELECTION_KEYS = [" ", "Enter"];
+  const CONTENT_MARGIN = 10;
+  function valueComparator(value, currentValue, comparator) {
+    if (value === void 0) return false;
+    else if (Array.isArray(value)) return value.some((val) => compare(val, currentValue, comparator));
+    else return compare(value, currentValue, comparator);
   }
-  function getDecimalCount(value) {
-    return (String(value).split(".")[1] || "").length;
+  function compare(value, currentValue, comparator) {
+    if (value === void 0 || currentValue === void 0) return false;
+    if (typeof value === "string") return value === currentValue;
+    if (typeof comparator === "function") return comparator(value, currentValue);
+    if (typeof comparator === "string") return value?.[comparator] === currentValue?.[comparator];
+    return isEqual(value, currentValue);
   }
-  function roundValue(value, decimalCount) {
-    const rounder = 10 ** decimalCount;
-    return Math.round(value * rounder) / rounder;
+  function shouldShowPlaceholder(value) {
+    return value === void 0 || value === null || value === "" || Array.isArray(value) && value.length === 0;
   }
-  const PAGE_KEYS = ["PageUp", "PageDown"];
-  const ARROW_KEYS = [
-    "ArrowUp",
-    "ArrowDown",
-    "ArrowLeft",
-    "ArrowRight"
-  ];
-  const BACK_KEYS = {
-    "from-left": [
-      "Home",
-      "PageDown",
-      "ArrowDown",
-      "ArrowLeft"
-    ],
-    "from-right": [
-      "Home",
-      "PageDown",
-      "ArrowDown",
-      "ArrowRight"
-    ],
-    "from-bottom": [
-      "Home",
-      "PageDown",
-      "ArrowDown",
-      "ArrowLeft"
-    ],
-    "from-top": [
-      "Home",
-      "PageUp",
-      "ArrowUp",
-      "ArrowLeft"
-    ]
+  const _hoisted_1$B = {
+    key: 0,
+    value: ""
   };
-  const [injectSliderOrientationContext, provideSliderOrientationContext] = createContext(["SliderVertical", "SliderHorizontal"]);
-  var SliderHorizontal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
-    __name: "SliderHorizontal",
+  const [injectSelectRootContext, provideSelectRootContext] = createContext("SelectRoot");
+  var SelectRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+    inheritAttrs: false,
+    __name: "SelectRoot",
     props: {
+      open: {
+        type: Boolean,
+        required: false,
+        default: void 0
+      },
+      defaultOpen: {
+        type: Boolean,
+        required: false
+      },
+      defaultValue: {
+        type: null,
+        required: false
+      },
+      modelValue: {
+        type: null,
+        required: false,
+        default: void 0
+      },
+      by: {
+        type: [String, Function],
+        required: false
+      },
       dir: {
         type: String,
         required: false
       },
-      min: {
-        type: Number,
-        required: true
+      multiple: {
+        type: Boolean,
+        required: false
       },
-      max: {
-        type: Number,
-        required: true
+      autocomplete: {
+        type: String,
+        required: false
       },
-      inverted: {
+      disabled: {
         type: Boolean,
-        required: true
+        required: false
+      },
+      name: {
+        type: String,
+        required: false
+      },
+      required: {
+        type: Boolean,
+        required: false
       }
     },
-    emits: [
-      "slideEnd",
-      "slideStart",
-      "slideMove",
-      "homeKeyDown",
-      "endKeyDown",
-      "stepKeyDown"
-    ],
+    emits: ["update:modelValue", "update:open"],
     setup(__props, { emit: __emit }) {
       const props = __props;
       const emits = __emit;
-      const { max: max2, min: min2, dir, inverted } = vue.toRefs(props);
-      const { forwardRef, currentElement: sliderElement } = useForwardExpose();
-      const rootContext = injectSliderRootContext();
-      const offsetPosition = vue.ref();
-      const rectRef = vue.ref();
-      const isSlidingFromLeft = vue.computed(() => dir?.value !== "rtl" && !inverted.value || dir?.value !== "ltr" && inverted.value);
-      function getValueFromPointerEvent(event, slideStart) {
-        const rect = rectRef.value || sliderElement.value.getBoundingClientRect();
-        const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value];
-        const thumbWidth = rootContext.thumbAlignment.value === "contain" ? thumb.clientWidth : 0;
-        if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === "contain") offsetPosition.value = event.clientX - thumb.getBoundingClientRect().left;
-        const input = [0, rect.width - thumbWidth];
-        const output = isSlidingFromLeft.value ? [min2.value, max2.value] : [max2.value, min2.value];
-        const value = linearScale(input, output);
-        rectRef.value = rect;
-        const position = slideStart ? event.clientX - rect.left - thumbWidth / 2 : event.clientX - rect.left - (offsetPosition.value ?? 0);
-        return value(position);
-      }
-      const startEdge = vue.computed(() => isSlidingFromLeft.value ? "left" : "right");
-      const endEdge = vue.computed(() => isSlidingFromLeft.value ? "right" : "left");
-      const direction = vue.computed(() => isSlidingFromLeft.value ? 1 : -1);
-      provideSliderOrientationContext({
-        startEdge,
-        endEdge,
-        direction,
-        size: "width"
+      const { required, disabled, multiple, dir: propDir } = vue.toRefs(props);
+      const modelValue = useVModel(props, "modelValue", emits, {
+        defaultValue: props.defaultValue ?? (multiple.value ? [] : void 0),
+        passive: props.modelValue === void 0,
+        deep: true
+      });
+      const open = useVModel(props, "open", emits, {
+        defaultValue: props.defaultOpen,
+        passive: props.open === void 0
+      });
+      const triggerElement = vue.ref();
+      const valueElement = vue.ref();
+      const triggerPointerDownPosRef = vue.ref({
+        x: 0,
+        y: 0
+      });
+      const isEmptyModelValue = vue.computed(() => {
+        if (multiple.value && Array.isArray(modelValue.value)) return modelValue.value?.length === 0;
+        else return isNullish(modelValue.value);
+      });
+      useCollection({ isProvider: true });
+      const dir = useDirection(propDir);
+      const isFormControl = useFormControl(triggerElement);
+      const optionsSet = vue.ref(/* @__PURE__ */ new Set());
+      const nativeSelectKey = vue.computed(() => {
+        return Array.from(optionsSet.value).map((option) => option.value).join(";");
+      });
+      function handleValueChange(value) {
+        if (multiple.value) {
+          const array = Array.isArray(modelValue.value) ? [...modelValue.value] : [];
+          const index = array.findIndex((i) => compare(i, value, props.by));
+          index === -1 ? array.push(value) : array.splice(index, 1);
+          modelValue.value = [...array];
+        } else modelValue.value = value;
+      }
+      function getOption(value) {
+        return Array.from(optionsSet.value).find((option) => valueComparator(value, option.value, props.by));
+      }
+      provideSelectRootContext({
+        triggerElement,
+        onTriggerChange: (node) => {
+          triggerElement.value = node;
+        },
+        valueElement,
+        onValueElementChange: (node) => {
+          valueElement.value = node;
+        },
+        contentId: "",
+        modelValue,
+        onValueChange: handleValueChange,
+        by: props.by,
+        open,
+        multiple,
+        required,
+        onOpenChange: (value) => {
+          open.value = value;
+        },
+        dir,
+        triggerPointerDownPosRef,
+        disabled,
+        isEmptyModelValue,
+        optionsSet,
+        onOptionAdd: (option) => {
+          const existingOption = getOption(option.value);
+          if (existingOption) optionsSet.value.delete(existingOption);
+          optionsSet.value.add(option);
+        },
+        onOptionRemove: (option) => {
+          const existingOption = getOption(option.value);
+          if (existingOption) optionsSet.value.delete(existingOption);
+        }
       });
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createBlock(SliderImpl_default, {
-          ref: vue.unref(forwardRef),
-          dir: vue.unref(dir),
-          "data-orientation": "horizontal",
-          style: vue.normalizeStyle({ ["--reka-slider-thumb-transform"]: !isSlidingFromLeft.value && vue.unref(rootContext).thumbAlignment.value === "overflow" ? "translateX(50%)" : "translateX(-50%)" }),
-          onSlideStart: _cache[0] || (_cache[0] = (event) => {
-            const value = getValueFromPointerEvent(event, true);
-            emits("slideStart", value);
-          }),
-          onSlideMove: _cache[1] || (_cache[1] = (event) => {
-            const value = getValueFromPointerEvent(event);
-            emits("slideMove", value);
-          }),
-          onSlideEnd: _cache[2] || (_cache[2] = () => {
-            rectRef.value = void 0;
+        return vue.openBlock(), vue.createBlock(vue.unref(PopperRoot_default), null, {
+          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default", {
+            modelValue: vue.unref(modelValue),
+            open: vue.unref(open)
+          }), vue.unref(isFormControl) ? (vue.openBlock(), vue.createBlock(BubbleSelect_default, {
+            key: nativeSelectKey.value,
+            "aria-hidden": "true",
+            tabindex: "-1",
+            multiple: vue.unref(multiple),
+            required: vue.unref(required),
+            name: _ctx.name,
+            autocomplete: _ctx.autocomplete,
+            disabled: vue.unref(disabled),
+            value: vue.unref(modelValue)
+          }, {
+            default: vue.withCtx(() => [vue.unref(isNullish)(vue.unref(modelValue)) ? (vue.openBlock(), vue.createElementBlock("option", _hoisted_1$B)) : vue.createCommentVNode("v-if", true), (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(Array.from(optionsSet.value), (option) => {
+              return vue.openBlock(), vue.createElementBlock("option", vue.mergeProps({ key: option.value ?? "" }, { ref_for: true }, option), null, 16);
+            }), 128))]),
+            _: 1
+          }, 8, [
+            "multiple",
+            "required",
+            "name",
+            "autocomplete",
+            "disabled",
+            "value"
+          ])) : vue.createCommentVNode("v-if", true)]),
+          _: 3
+        });
+      };
+    }
+  });
+  var SelectRoot_default = SelectRoot_vue_vue_type_script_setup_true_lang_default;
+  var BubbleSelect_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+    __name: "BubbleSelect",
+    props: {
+      autocomplete: {
+        type: String,
+        required: false
+      },
+      autofocus: {
+        type: Boolean,
+        required: false
+      },
+      disabled: {
+        type: Boolean,
+        required: false
+      },
+      form: {
+        type: String,
+        required: false
+      },
+      multiple: {
+        type: Boolean,
+        required: false
+      },
+      name: {
+        type: String,
+        required: false
+      },
+      required: {
+        type: Boolean,
+        required: false
+      },
+      size: {
+        type: Number,
+        required: false
+      },
+      value: {
+        type: null,
+        required: false
+      }
+    },
+    setup(__props) {
+      const props = __props;
+      const selectElement = vue.ref();
+      const rootContext = injectSelectRootContext();
+      vue.watch(() => props.value, (cur, prev) => {
+        const selectProto = window.HTMLSelectElement.prototype;
+        const descriptor = Object.getOwnPropertyDescriptor(selectProto, "value");
+        const setValue = descriptor.set;
+        if (cur !== prev && setValue && selectElement.value) {
+          const event = new Event("change", { bubbles: true });
+          setValue.call(selectElement.value, cur);
+          selectElement.value.dispatchEvent(event);
+        }
+      });
+      function handleInput(event) {
+        rootContext.onValueChange(event.target.value);
+      }
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(VisuallyHidden_default), { "as-child": "" }, {
+          default: vue.withCtx(() => [vue.createElementVNode("select", vue.mergeProps({
+            ref_key: "selectElement",
+            ref: selectElement
+          }, props, { onInput: handleInput }), [vue.renderSlot(_ctx.$slots, "default")], 16)]),
+          _: 3
+        });
+      };
+    }
+  });
+  var BubbleSelect_default = BubbleSelect_vue_vue_type_script_setup_true_lang_default;
+  var SelectPopperPosition_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+    __name: "SelectPopperPosition",
+    props: {
+      side: {
+        type: null,
+        required: false
+      },
+      sideOffset: {
+        type: Number,
+        required: false
+      },
+      sideFlip: {
+        type: Boolean,
+        required: false
+      },
+      align: {
+        type: null,
+        required: false,
+        default: "start"
+      },
+      alignOffset: {
+        type: Number,
+        required: false
+      },
+      alignFlip: {
+        type: Boolean,
+        required: false
+      },
+      avoidCollisions: {
+        type: Boolean,
+        required: false
+      },
+      collisionBoundary: {
+        type: null,
+        required: false
+      },
+      collisionPadding: {
+        type: [Number, Object],
+        required: false,
+        default: CONTENT_MARGIN
+      },
+      arrowPadding: {
+        type: Number,
+        required: false
+      },
+      sticky: {
+        type: String,
+        required: false
+      },
+      hideWhenDetached: {
+        type: Boolean,
+        required: false
+      },
+      positionStrategy: {
+        type: String,
+        required: false
+      },
+      updatePositionStrategy: {
+        type: String,
+        required: false
+      },
+      disableUpdateOnLayoutShift: {
+        type: Boolean,
+        required: false
+      },
+      prioritizePosition: {
+        type: Boolean,
+        required: false
+      },
+      reference: {
+        type: null,
+        required: false
+      },
+      asChild: {
+        type: Boolean,
+        required: false
+      },
+      as: {
+        type: null,
+        required: false
+      }
+    },
+    setup(__props) {
+      const props = __props;
+      const forwarded = useForwardProps(props);
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(PopperContent_default), vue.mergeProps(vue.unref(forwarded), { style: {
+          "boxSizing": "border-box",
+          "--reka-select-content-transform-origin": "var(--reka-popper-transform-origin)",
+          "--reka-select-content-available-width": "var(--reka-popper-available-width)",
+          "--reka-select-content-available-height": "var(--reka-popper-available-height)",
+          "--reka-select-trigger-width": "var(--reka-popper-anchor-width)",
+          "--reka-select-trigger-height": "var(--reka-popper-anchor-height)"
+        } }), {
+          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16);
+      };
+    }
+  });
+  var SelectPopperPosition_default = SelectPopperPosition_vue_vue_type_script_setup_true_lang_default;
+  const SelectContentDefaultContextValue = {
+    onViewportChange: () => {
+    },
+    itemTextRefCallback: () => {
+    },
+    itemRefCallback: () => {
+    }
+  };
+  const [injectSelectContentContext, provideSelectContentContext] = createContext("SelectContent");
+  var SelectContentImpl_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+    __name: "SelectContentImpl",
+    props: {
+      position: {
+        type: String,
+        required: false,
+        default: "item-aligned"
+      },
+      bodyLock: {
+        type: Boolean,
+        required: false,
+        default: true
+      },
+      side: {
+        type: null,
+        required: false
+      },
+      sideOffset: {
+        type: Number,
+        required: false
+      },
+      sideFlip: {
+        type: Boolean,
+        required: false
+      },
+      align: {
+        type: null,
+        required: false,
+        default: "start"
+      },
+      alignOffset: {
+        type: Number,
+        required: false
+      },
+      alignFlip: {
+        type: Boolean,
+        required: false
+      },
+      avoidCollisions: {
+        type: Boolean,
+        required: false
+      },
+      collisionBoundary: {
+        type: null,
+        required: false
+      },
+      collisionPadding: {
+        type: [Number, Object],
+        required: false
+      },
+      arrowPadding: {
+        type: Number,
+        required: false
+      },
+      sticky: {
+        type: String,
+        required: false
+      },
+      hideWhenDetached: {
+        type: Boolean,
+        required: false
+      },
+      positionStrategy: {
+        type: String,
+        required: false
+      },
+      updatePositionStrategy: {
+        type: String,
+        required: false
+      },
+      disableUpdateOnLayoutShift: {
+        type: Boolean,
+        required: false
+      },
+      prioritizePosition: {
+        type: Boolean,
+        required: false
+      },
+      reference: {
+        type: null,
+        required: false
+      },
+      asChild: {
+        type: Boolean,
+        required: false
+      },
+      as: {
+        type: null,
+        required: false
+      }
+    },
+    emits: [
+      "closeAutoFocus",
+      "escapeKeyDown",
+      "pointerDownOutside"
+    ],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emits = __emit;
+      const rootContext = injectSelectRootContext();
+      useFocusGuards();
+      useBodyScrollLock(props.bodyLock);
+      const { CollectionSlot, getItems } = useCollection();
+      const content = vue.ref();
+      useHideOthers(content);
+      const { search, handleTypeaheadSearch } = useTypeahead();
+      const viewport = vue.ref();
+      const selectedItem = vue.ref();
+      const selectedItemText = vue.ref();
+      const isPositioned = vue.ref(false);
+      const firstValidItemFoundRef = vue.ref(false);
+      const firstSelectedItemInArrayFoundRef = vue.ref(false);
+      function focusSelectedItem() {
+        if (selectedItem.value && content.value) focusFirst$1([selectedItem.value, content.value]);
+      }
+      vue.watch(isPositioned, () => {
+        focusSelectedItem();
+      });
+      const { onOpenChange, triggerPointerDownPosRef } = rootContext;
+      vue.watchEffect((cleanupFn) => {
+        if (!content.value) return;
+        let pointerMoveDelta = {
+          x: 0,
+          y: 0
+        };
+        const handlePointerMove = (event) => {
+          pointerMoveDelta = {
+            x: Math.abs(Math.round(event.pageX) - (triggerPointerDownPosRef.value?.x ?? 0)),
+            y: Math.abs(Math.round(event.pageY) - (triggerPointerDownPosRef.value?.y ?? 0))
+          };
+        };
+        const handlePointerUp = (event) => {
+          if (event.pointerType === "touch") return;
+          if (pointerMoveDelta.x <= 10 && pointerMoveDelta.y <= 10) event.preventDefault();
+          else if (!content.value?.contains(event.target)) onOpenChange(false);
+          document.removeEventListener("pointermove", handlePointerMove);
+          triggerPointerDownPosRef.value = null;
+        };
+        if (triggerPointerDownPosRef.value !== null) {
+          document.addEventListener("pointermove", handlePointerMove);
+          document.addEventListener("pointerup", handlePointerUp, {
+            capture: true,
+            once: true
+          });
+        }
+        cleanupFn(() => {
+          document.removeEventListener("pointermove", handlePointerMove);
+          document.removeEventListener("pointerup", handlePointerUp, { capture: true });
+        });
+      });
+      function handleKeyDown(event) {
+        const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+        if (event.key === "Tab") event.preventDefault();
+        if (!isModifierKey && event.key.length === 1) handleTypeaheadSearch(event.key, getItems());
+        if ([
+          "ArrowUp",
+          "ArrowDown",
+          "Home",
+          "End"
+        ].includes(event.key)) {
+          const collectionItems = getItems().map((i) => i.ref);
+          let candidateNodes = [...collectionItems];
+          if (["ArrowUp", "End"].includes(event.key)) candidateNodes = candidateNodes.slice().reverse();
+          if (["ArrowUp", "ArrowDown"].includes(event.key)) {
+            const currentElement = event.target;
+            const currentIndex = candidateNodes.indexOf(currentElement);
+            candidateNodes = candidateNodes.slice(currentIndex + 1);
+          }
+          setTimeout(() => focusFirst$1(candidateNodes));
+          event.preventDefault();
+        }
+      }
+      const pickedProps = vue.computed(() => {
+        if (props.position === "popper") return props;
+        else return {};
+      });
+      const forwardedProps = useForwardProps(pickedProps.value);
+      provideSelectContentContext({
+        content,
+        viewport,
+        onViewportChange: (node) => {
+          viewport.value = node;
+        },
+        itemRefCallback: (node, value, disabled) => {
+          const isFirstValidItem = !firstValidItemFoundRef.value && !disabled;
+          const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by);
+          if (rootContext.multiple.value) {
+            if (firstSelectedItemInArrayFoundRef.value) return;
+            if (isSelectedItem || isFirstValidItem) {
+              selectedItem.value = node;
+              if (isSelectedItem) firstSelectedItemInArrayFoundRef.value = true;
+            }
+          } else if (isSelectedItem || isFirstValidItem) selectedItem.value = node;
+          if (isFirstValidItem) firstValidItemFoundRef.value = true;
+        },
+        selectedItem,
+        selectedItemText,
+        onItemLeave: () => {
+          content.value?.focus();
+        },
+        itemTextRefCallback: (node, value, disabled) => {
+          const isFirstValidItem = !firstValidItemFoundRef.value && !disabled;
+          const isSelectedItem = valueComparator(rootContext.modelValue.value, value, rootContext.by);
+          if (isSelectedItem || isFirstValidItem) selectedItemText.value = node;
+        },
+        focusSelectedItem,
+        position: props.position,
+        isPositioned,
+        searchRef: search
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(CollectionSlot), null, {
+          default: vue.withCtx(() => [vue.createVNode(vue.unref(FocusScope_default), {
+            "as-child": "",
+            onMountAutoFocus: _cache[6] || (_cache[6] = vue.withModifiers(() => {
+            }, ["prevent"])),
+            onUnmountAutoFocus: _cache[7] || (_cache[7] = (event) => {
+              emits("closeAutoFocus", event);
+              if (event.defaultPrevented) return;
+              vue.unref(rootContext).triggerElement.value?.focus({ preventScroll: true });
+              event.preventDefault();
+            })
+          }, {
+            default: vue.withCtx(() => [vue.createVNode(vue.unref(DismissableLayer_default), {
+              "as-child": "",
+              "disable-outside-pointer-events": "",
+              onFocusOutside: _cache[2] || (_cache[2] = vue.withModifiers(() => {
+              }, ["prevent"])),
+              onDismiss: _cache[3] || (_cache[3] = ($event) => vue.unref(rootContext).onOpenChange(false)),
+              onEscapeKeyDown: _cache[4] || (_cache[4] = ($event) => emits("escapeKeyDown", $event)),
+              onPointerDownOutside: _cache[5] || (_cache[5] = ($event) => emits("pointerDownOutside", $event))
+            }, {
+              default: vue.withCtx(() => [(vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.position === "popper" ? SelectPopperPosition_default : SelectItemAlignedPosition_default), vue.mergeProps({
+                ..._ctx.$attrs,
+                ...vue.unref(forwardedProps)
+              }, {
+                id: vue.unref(rootContext).contentId,
+                ref: (vnode) => {
+                  const el = vue.unref(unrefElement)(vnode);
+                  if (el?.hasAttribute("data-reka-popper-content-wrapper")) content.value = el.firstElementChild;
+                  else content.value = el;
+                  return void 0;
+                },
+                role: "listbox",
+                "data-state": vue.unref(rootContext).open.value ? "open" : "closed",
+                dir: vue.unref(rootContext).dir.value,
+                style: {
+                  display: "flex",
+                  flexDirection: "column",
+                  outline: "none"
+                },
+                onContextmenu: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+                }, ["prevent"])),
+                onPlaced: _cache[1] || (_cache[1] = ($event) => isPositioned.value = true),
+                onKeydown: handleKeyDown
+              }), {
+                default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+                _: 3
+              }, 16, [
+                "id",
+                "data-state",
+                "dir",
+                "onKeydown"
+              ]))]),
+              _: 3
+            })]),
+            _: 3
+          })]),
+          _: 3
+        });
+      };
+    }
+  });
+  var SelectContentImpl_default = SelectContentImpl_vue_vue_type_script_setup_true_lang_default;
+  const [injectSelectItemAlignedPositionContext, provideSelectItemAlignedPositionContext] = createContext("SelectItemAlignedPosition");
+  var SelectItemAlignedPosition_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+    inheritAttrs: false,
+    __name: "SelectItemAlignedPosition",
+    props: {
+      asChild: {
+        type: Boolean,
+        required: false
+      },
+      as: {
+        type: null,
+        required: false
+      }
+    },
+    emits: ["placed"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emits = __emit;
+      const { getItems } = useCollection();
+      const rootContext = injectSelectRootContext();
+      const contentContext = injectSelectContentContext();
+      const shouldExpandOnScrollRef = vue.ref(false);
+      const shouldRepositionRef = vue.ref(true);
+      const contentWrapperElement = vue.ref();
+      const { forwardRef, currentElement: contentElement } = useForwardExpose();
+      const { viewport, selectedItem, selectedItemText, focusSelectedItem } = contentContext;
+      function position() {
+        if (rootContext.triggerElement.value && rootContext.valueElement.value && contentWrapperElement.value && contentElement.value && viewport?.value && selectedItem?.value && selectedItemText?.value) {
+          const triggerRect = rootContext.triggerElement.value.getBoundingClientRect();
+          const contentRect = contentElement.value.getBoundingClientRect();
+          const valueNodeRect = rootContext.valueElement.value.getBoundingClientRect();
+          const itemTextRect = selectedItemText.value.getBoundingClientRect();
+          if (rootContext.dir.value !== "rtl") {
+            const itemTextOffset = itemTextRect.left - contentRect.left;
+            const left = valueNodeRect.left - itemTextOffset;
+            const leftDelta = triggerRect.left - left;
+            const minContentWidth = triggerRect.width + leftDelta;
+            const contentWidth = Math.max(minContentWidth, contentRect.width);
+            const rightEdge = window.innerWidth - CONTENT_MARGIN;
+            const clampedLeft = clamp$1(left, CONTENT_MARGIN, Math.max(CONTENT_MARGIN, rightEdge - contentWidth));
+            contentWrapperElement.value.style.minWidth = `${minContentWidth}px`;
+            contentWrapperElement.value.style.left = `${clampedLeft}px`;
+          } else {
+            const itemTextOffset = contentRect.right - itemTextRect.right;
+            const right = window.innerWidth - valueNodeRect.right - itemTextOffset;
+            const rightDelta = window.innerWidth - triggerRect.right - right;
+            const minContentWidth = triggerRect.width + rightDelta;
+            const contentWidth = Math.max(minContentWidth, contentRect.width);
+            const leftEdge = window.innerWidth - CONTENT_MARGIN;
+            const clampedRight = clamp$1(right, CONTENT_MARGIN, Math.max(CONTENT_MARGIN, leftEdge - contentWidth));
+            contentWrapperElement.value.style.minWidth = `${minContentWidth}px`;
+            contentWrapperElement.value.style.right = `${clampedRight}px`;
+          }
+          const items = getItems().map((i) => i.ref);
+          const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;
+          const itemsHeight = viewport.value.scrollHeight;
+          const contentStyles = window.getComputedStyle(contentElement.value);
+          const contentBorderTopWidth = Number.parseInt(contentStyles.borderTopWidth, 10);
+          const contentPaddingTop = Number.parseInt(contentStyles.paddingTop, 10);
+          const contentBorderBottomWidth = Number.parseInt(contentStyles.borderBottomWidth, 10);
+          const contentPaddingBottom = Number.parseInt(contentStyles.paddingBottom, 10);
+          const fullContentHeight = contentBorderTopWidth + contentPaddingTop + itemsHeight + contentPaddingBottom + contentBorderBottomWidth;
+          const minContentHeight = Math.min(selectedItem.value.offsetHeight * 5, fullContentHeight);
+          const viewportStyles = window.getComputedStyle(viewport.value);
+          const viewportPaddingTop = Number.parseInt(viewportStyles.paddingTop, 10);
+          const viewportPaddingBottom = Number.parseInt(viewportStyles.paddingBottom, 10);
+          const topEdgeToTriggerMiddle = triggerRect.top + triggerRect.height / 2 - CONTENT_MARGIN;
+          const triggerMiddleToBottomEdge = availableHeight - topEdgeToTriggerMiddle;
+          const selectedItemHalfHeight = selectedItem.value.offsetHeight / 2;
+          const itemOffsetMiddle = selectedItem.value.offsetTop + selectedItemHalfHeight;
+          const contentTopToItemMiddle = contentBorderTopWidth + contentPaddingTop + itemOffsetMiddle;
+          const itemMiddleToContentBottom = fullContentHeight - contentTopToItemMiddle;
+          const willAlignWithoutTopOverflow = contentTopToItemMiddle <= topEdgeToTriggerMiddle;
+          if (willAlignWithoutTopOverflow) {
+            const isLastItem = selectedItem.value === items[items.length - 1];
+            contentWrapperElement.value.style.bottom = `0px`;
+            const viewportOffsetBottom = contentElement.value.clientHeight - viewport.value.offsetTop - viewport.value.offsetHeight;
+            const clampedTriggerMiddleToBottomEdge = Math.max(triggerMiddleToBottomEdge, selectedItemHalfHeight + (isLastItem ? viewportPaddingBottom : 0) + viewportOffsetBottom + contentBorderBottomWidth);
+            const height = contentTopToItemMiddle + clampedTriggerMiddleToBottomEdge;
+            contentWrapperElement.value.style.height = `${height}px`;
+          } else {
+            const isFirstItem = selectedItem.value === items[0];
+            contentWrapperElement.value.style.top = `0px`;
+            const clampedTopEdgeToTriggerMiddle = Math.max(topEdgeToTriggerMiddle, contentBorderTopWidth + viewport.value.offsetTop + (isFirstItem ? viewportPaddingTop : 0) + selectedItemHalfHeight);
+            const height = clampedTopEdgeToTriggerMiddle + itemMiddleToContentBottom;
+            contentWrapperElement.value.style.height = `${height}px`;
+            viewport.value.scrollTop = contentTopToItemMiddle - topEdgeToTriggerMiddle + viewport.value.offsetTop;
+          }
+          contentWrapperElement.value.style.margin = `${CONTENT_MARGIN}px 0`;
+          contentWrapperElement.value.style.minHeight = `${minContentHeight}px`;
+          contentWrapperElement.value.style.maxHeight = `${availableHeight}px`;
+          emits("placed");
+          requestAnimationFrame(() => shouldExpandOnScrollRef.value = true);
+        }
+      }
+      const contentZIndex = vue.ref("");
+      vue.onMounted(async () => {
+        await vue.nextTick();
+        position();
+        if (contentElement.value) contentZIndex.value = window.getComputedStyle(contentElement.value).zIndex;
+      });
+      function handleScrollButtonChange(node) {
+        if (node && shouldRepositionRef.value === true) {
+          position();
+          focusSelectedItem?.();
+          shouldRepositionRef.value = false;
+        }
+      }
+      useResizeObserver(rootContext.triggerElement, () => {
+        position();
+      });
+      provideSelectItemAlignedPositionContext({
+        contentWrapper: contentWrapperElement,
+        shouldExpandOnScrollRef,
+        onScrollButtonChange: handleScrollButtonChange
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          ref_key: "contentWrapperElement",
+          ref: contentWrapperElement,
+          style: vue.normalizeStyle({
+            display: "flex",
+            flexDirection: "column",
+            position: "fixed",
+            zIndex: contentZIndex.value
+          })
+        }, [vue.createVNode(vue.unref(Primitive), vue.mergeProps({
+          ref: vue.unref(forwardRef),
+          style: {
+            boxSizing: "border-box",
+            maxHeight: "100%"
+          }
+        }, {
+          ..._ctx.$attrs,
+          ...props
+        }), {
+          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16)], 4);
+      };
+    }
+  });
+  var SelectItemAlignedPosition_default = SelectItemAlignedPosition_vue_vue_type_script_setup_true_lang_default;
+  var SelectProvider_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+    inheritAttrs: false,
+    __name: "SelectProvider",
+    props: { context: {
+      type: Object,
+      required: true
+    } },
+    setup(__props) {
+      const props = __props;
+      provideSelectRootContext(props.context);
+      provideSelectContentContext(SelectContentDefaultContextValue);
+      return (_ctx, _cache) => {
+        return vue.renderSlot(_ctx.$slots, "default");
+      };
+    }
+  });
+  var SelectProvider_default = SelectProvider_vue_vue_type_script_setup_true_lang_default;
+  const _hoisted_1$A = { key: 1 };
+  var SelectContent_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+    inheritAttrs: false,
+    __name: "SelectContent",
+    props: {
+      forceMount: {
+        type: Boolean,
+        required: false
+      },
+      position: {
+        type: String,
+        required: false
+      },
+      bodyLock: {
+        type: Boolean,
+        required: false
+      },
+      side: {
+        type: null,
+        required: false
+      },
+      sideOffset: {
+        type: Number,
+        required: false
+      },
+      sideFlip: {
+        type: Boolean,
+        required: false
+      },
+      align: {
+        type: null,
+        required: false
+      },
+      alignOffset: {
+        type: Number,
+        required: false
+      },
+      alignFlip: {
+        type: Boolean,
+        required: false
+      },
+      avoidCollisions: {
+        type: Boolean,
+        required: false
+      },
+      collisionBoundary: {
+        type: null,
+        required: false
+      },
+      collisionPadding: {
+        type: [Number, Object],
+        required: false
+      },
+      arrowPadding: {
+        type: Number,
+        required: false
+      },
+      sticky: {
+        type: String,
+        required: false
+      },
+      hideWhenDetached: {
+        type: Boolean,
+        required: false
+      },
+      positionStrategy: {
+        type: String,
+        required: false
+      },
+      updatePositionStrategy: {
+        type: String,
+        required: false
+      },
+      disableUpdateOnLayoutShift: {
+        type: Boolean,
+        required: false
+      },
+      prioritizePosition: {
+        type: Boolean,
+        required: false
+      },
+      reference: {
+        type: null,
+        required: false
+      },
+      asChild: {
+        type: Boolean,
+        required: false
+      },
+      as: {
+        type: null,
+        required: false
+      }
+    },
+    emits: [
+      "closeAutoFocus",
+      "escapeKeyDown",
+      "pointerDownOutside"
+    ],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emits = __emit;
+      const forwarded = useForwardPropsEmits(props, emits);
+      const rootContext = injectSelectRootContext();
+      const fragment = vue.ref();
+      vue.onMounted(() => {
+        fragment.value = new DocumentFragment();
+      });
+      const presenceRef = vue.ref();
+      const present = vue.computed(() => props.forceMount || rootContext.open.value);
+      const renderPresence = vue.ref(present.value);
+      vue.watch(present, () => {
+        setTimeout(() => renderPresence.value = present.value);
+      });
+      return (_ctx, _cache) => {
+        return present.value || renderPresence.value || presenceRef.value?.present ? (vue.openBlock(), vue.createBlock(vue.unref(Presence_default), {
+          key: 0,
+          ref_key: "presenceRef",
+          ref: presenceRef,
+          present: present.value
+        }, {
+          default: vue.withCtx(() => [vue.createVNode(SelectContentImpl_default, vue.normalizeProps(vue.guardReactiveProps({
+            ...vue.unref(forwarded),
+            ..._ctx.$attrs
+          })), {
+            default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+            _: 3
+          }, 16)]),
+          _: 3
+        }, 8, ["present"])) : fragment.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$A, [(vue.openBlock(), vue.createBlock(vue.Teleport, { to: fragment.value }, [vue.createVNode(SelectProvider_default, { context: vue.unref(rootContext) }, {
+          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 8, ["context"])], 8, ["to"]))])) : vue.createCommentVNode("v-if", true);
+      };
+    }
+  });
+  var SelectContent_default = SelectContent_vue_vue_type_script_setup_true_lang_default;
+  const [injectSelectItemContext, provideSelectItemContext] = createContext("SelectItem");
+  var SelectItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+    __name: "SelectItem",
+    props: {
+      value: {
+        type: null,
+        required: true
+      },
+      disabled: {
+        type: Boolean,
+        required: false
+      },
+      textValue: {
+        type: String,
+        required: false
+      },
+      asChild: {
+        type: Boolean,
+        required: false
+      },
+      as: {
+        type: null,
+        required: false
+      }
+    },
+    emits: ["select"],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emits = __emit;
+      const { disabled } = vue.toRefs(props);
+      const rootContext = injectSelectRootContext();
+      const contentContext = injectSelectContentContext();
+      const { forwardRef, currentElement } = useForwardExpose();
+      const { CollectionItem } = useCollection();
+      const isSelected = vue.computed(() => valueComparator(rootContext.modelValue?.value, props.value, rootContext.by));
+      const isFocused = vue.ref(false);
+      const textValue = vue.ref(props.textValue ?? "");
+      const textId = useId(void 0, "reka-select-item-text");
+      const SELECT_SELECT = "select.select";
+      async function handleSelectCustomEvent(ev) {
+        if (ev.defaultPrevented) return;
+        const eventDetail = {
+          originalEvent: ev,
+          value: props.value
+        };
+        handleAndDispatchCustomEvent$1(SELECT_SELECT, handleSelect2, eventDetail);
+      }
+      async function handleSelect2(ev) {
+        await vue.nextTick();
+        emits("select", ev);
+        if (ev.defaultPrevented) return;
+        if (!disabled.value) {
+          rootContext.onValueChange(props.value);
+          if (!rootContext.multiple.value) rootContext.onOpenChange(false);
+        }
+      }
+      async function handlePointerMove(event) {
+        await vue.nextTick();
+        if (event.defaultPrevented) return;
+        if (disabled.value) contentContext.onItemLeave?.();
+        else event.currentTarget?.focus({ preventScroll: true });
+      }
+      async function handlePointerLeave(event) {
+        await vue.nextTick();
+        if (event.defaultPrevented) return;
+        if (event.currentTarget === getActiveElement()) contentContext.onItemLeave?.();
+      }
+      async function handleKeyDown(event) {
+        await vue.nextTick();
+        if (event.defaultPrevented) return;
+        const isTypingAhead = contentContext.searchRef?.value !== "";
+        if (isTypingAhead && event.key === " ") return;
+        if (SELECTION_KEYS.includes(event.key)) handleSelectCustomEvent(event);
+        if (event.key === " ") event.preventDefault();
+      }
+      if (props.value === "") throw new Error("A <SelectItem /> must have a value prop that is not an empty string. This is because the Select value can be set to an empty string to clear the selection and show the placeholder.");
+      vue.onMounted(() => {
+        if (!currentElement.value) return;
+        contentContext.itemRefCallback(currentElement.value, props.value, props.disabled);
+      });
+      provideSelectItemContext({
+        value: props.value,
+        disabled,
+        textId,
+        isSelected,
+        onItemTextChange: (node) => {
+          textValue.value = ((textValue.value || node?.textContent) ?? "").trim();
+        }
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(CollectionItem), { value: { textValue: textValue.value } }, {
+          default: vue.withCtx(() => [vue.createVNode(vue.unref(Primitive), {
+            ref: vue.unref(forwardRef),
+            role: "option",
+            "aria-labelledby": vue.unref(textId),
+            "data-highlighted": isFocused.value ? "" : void 0,
+            "aria-selected": isSelected.value,
+            "data-state": isSelected.value ? "checked" : "unchecked",
+            "aria-disabled": vue.unref(disabled) || void 0,
+            "data-disabled": vue.unref(disabled) ? "" : void 0,
+            tabindex: vue.unref(disabled) ? void 0 : -1,
+            as: _ctx.as,
+            "as-child": _ctx.asChild,
+            onFocus: _cache[0] || (_cache[0] = ($event) => isFocused.value = true),
+            onBlur: _cache[1] || (_cache[1] = ($event) => isFocused.value = false),
+            onPointerup: handleSelectCustomEvent,
+            onPointerdown: _cache[2] || (_cache[2] = (event) => {
+              event.currentTarget.focus({ preventScroll: true });
+            }),
+            onTouchend: _cache[3] || (_cache[3] = vue.withModifiers(() => {
+            }, ["prevent", "stop"])),
+            onPointermove: handlePointerMove,
+            onPointerleave: handlePointerLeave,
+            onKeydown: handleKeyDown
+          }, {
+            default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+            _: 3
+          }, 8, [
+            "aria-labelledby",
+            "data-highlighted",
+            "aria-selected",
+            "data-state",
+            "aria-disabled",
+            "data-disabled",
+            "tabindex",
+            "as",
+            "as-child"
+          ])]),
+          _: 3
+        }, 8, ["value"]);
+      };
+    }
+  });
+  var SelectItem_default = SelectItem_vue_vue_type_script_setup_true_lang_default;
+  var SelectItemIndicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+    __name: "SelectItemIndicator",
+    props: {
+      asChild: {
+        type: Boolean,
+        required: false
+      },
+      as: {
+        type: null,
+        required: false,
+        default: "span"
+      }
+    },
+    setup(__props) {
+      const props = __props;
+      const itemContext = injectSelectItemContext();
+      return (_ctx, _cache) => {
+        return vue.unref(itemContext).isSelected.value ? (vue.openBlock(), vue.createBlock(vue.unref(Primitive), vue.mergeProps({
+          key: 0,
+          "aria-hidden": "true"
+        }, props), {
+          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16)) : vue.createCommentVNode("v-if", true);
+      };
+    }
+  });
+  var SelectItemIndicator_default = SelectItemIndicator_vue_vue_type_script_setup_true_lang_default;
+  var SelectItemText_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+    inheritAttrs: false,
+    __name: "SelectItemText",
+    props: {
+      asChild: {
+        type: Boolean,
+        required: false
+      },
+      as: {
+        type: null,
+        required: false,
+        default: "span"
+      }
+    },
+    setup(__props) {
+      const props = __props;
+      const rootContext = injectSelectRootContext();
+      const contentContext = injectSelectContentContext();
+      const itemContext = injectSelectItemContext();
+      const { forwardRef, currentElement: itemTextElement } = useForwardExpose();
+      const optionProps = vue.computed(() => {
+        return {
+          value: itemContext.value,
+          disabled: itemContext.disabled.value,
+          textContent: itemTextElement.value?.textContent ?? itemContext.value?.toString() ?? ""
+        };
+      });
+      vue.onMounted(() => {
+        if (!itemTextElement.value) return;
+        itemContext.onItemTextChange(itemTextElement.value);
+        contentContext.itemTextRefCallback(itemTextElement.value, itemContext.value, itemContext.disabled.value);
+        rootContext.onOptionAdd(optionProps.value);
+      });
+      vue.onUnmounted(() => {
+        rootContext.onOptionRemove(optionProps.value);
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(Primitive), vue.mergeProps({
+          id: vue.unref(itemContext).textId,
+          ref: vue.unref(forwardRef)
+        }, {
+          ...props,
+          ..._ctx.$attrs
+        }), {
+          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16, ["id"]);
+      };
+    }
+  });
+  var SelectItemText_default = SelectItemText_vue_vue_type_script_setup_true_lang_default;
+  var SelectPortal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+    __name: "SelectPortal",
+    props: {
+      to: {
+        type: null,
+        required: false
+      },
+      disabled: {
+        type: Boolean,
+        required: false
+      },
+      defer: {
+        type: Boolean,
+        required: false
+      },
+      forceMount: {
+        type: Boolean,
+        required: false
+      }
+    },
+    setup(__props) {
+      const props = __props;
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(Teleport_default), vue.normalizeProps(vue.guardReactiveProps(props)), {
+          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16);
+      };
+    }
+  });
+  var SelectPortal_default = SelectPortal_vue_vue_type_script_setup_true_lang_default;
+  var SelectSeparator_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+    __name: "SelectSeparator",
+    props: {
+      asChild: {
+        type: Boolean,
+        required: false
+      },
+      as: {
+        type: null,
+        required: false
+      }
+    },
+    setup(__props) {
+      const props = __props;
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(Primitive), vue.mergeProps({ "aria-hidden": "true" }, props), {
+          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16);
+      };
+    }
+  });
+  var SelectSeparator_default = SelectSeparator_vue_vue_type_script_setup_true_lang_default;
+  var SelectTrigger_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+    __name: "SelectTrigger",
+    props: {
+      disabled: {
+        type: Boolean,
+        required: false
+      },
+      reference: {
+        type: null,
+        required: false
+      },
+      asChild: {
+        type: Boolean,
+        required: false
+      },
+      as: {
+        type: null,
+        required: false,
+        default: "button"
+      }
+    },
+    setup(__props) {
+      const props = __props;
+      const rootContext = injectSelectRootContext();
+      const { forwardRef, currentElement: triggerElement } = useForwardExpose();
+      const isDisabled = vue.computed(() => rootContext.disabled?.value || props.disabled);
+      rootContext.contentId ||= useId(void 0, "reka-select-content");
+      vue.onMounted(() => {
+        rootContext.onTriggerChange(triggerElement.value);
+      });
+      const { getItems } = useCollection();
+      const { search, handleTypeaheadSearch, resetTypeahead } = useTypeahead();
+      function handleOpen() {
+        if (!isDisabled.value) {
+          rootContext.onOpenChange(true);
+          resetTypeahead();
+        }
+      }
+      function handlePointerOpen(event) {
+        handleOpen();
+        rootContext.triggerPointerDownPosRef.value = {
+          x: Math.round(event.pageX),
+          y: Math.round(event.pageY)
+        };
+      }
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(PopperAnchor_default), {
+          "as-child": "",
+          reference: _ctx.reference
+        }, {
+          default: vue.withCtx(() => [vue.createVNode(vue.unref(Primitive), {
+            ref: vue.unref(forwardRef),
+            role: "combobox",
+            type: _ctx.as === "button" ? "button" : void 0,
+            "aria-controls": vue.unref(rootContext).contentId,
+            "aria-expanded": vue.unref(rootContext).open.value || false,
+            "aria-required": vue.unref(rootContext).required?.value,
+            "aria-autocomplete": "none",
+            disabled: isDisabled.value,
+            dir: vue.unref(rootContext)?.dir.value,
+            "data-state": vue.unref(rootContext)?.open.value ? "open" : "closed",
+            "data-disabled": isDisabled.value ? "" : void 0,
+            "data-placeholder": vue.unref(shouldShowPlaceholder)(vue.unref(rootContext).modelValue?.value) ? "" : void 0,
+            "as-child": _ctx.asChild,
+            as: _ctx.as,
+            onClick: _cache[0] || (_cache[0] = (event) => {
+              event?.currentTarget?.focus();
+            }),
+            onPointerdown: _cache[1] || (_cache[1] = (event) => {
+              if (event.pointerType === "touch") return event.preventDefault();
+              const target = event.target;
+              if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
+              if (event.button === 0 && event.ctrlKey === false) {
+                handlePointerOpen(event);
+                event.preventDefault();
+              }
+            }),
+            onPointerup: _cache[2] || (_cache[2] = vue.withModifiers((event) => {
+              if (event.pointerType === "touch") handlePointerOpen(event);
+            }, ["prevent"])),
+            onKeydown: _cache[3] || (_cache[3] = (event) => {
+              const isTypingAhead = vue.unref(search) !== "";
+              const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+              if (!isModifierKey && event.key.length === 1) {
+                if (isTypingAhead && event.key === " ") return;
+              }
+              vue.unref(handleTypeaheadSearch)(event.key, vue.unref(getItems)());
+              if (vue.unref(OPEN_KEYS).includes(event.key)) {
+                handleOpen();
+                event.preventDefault();
+              }
+            })
+          }, {
+            default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+            _: 3
+          }, 8, [
+            "type",
+            "aria-controls",
+            "aria-expanded",
+            "aria-required",
+            "disabled",
+            "dir",
+            "data-state",
+            "data-disabled",
+            "data-placeholder",
+            "as-child",
+            "as"
+          ])]),
+          _: 3
+        }, 8, ["reference"]);
+      };
+    }
+  });
+  var SelectTrigger_default = SelectTrigger_vue_vue_type_script_setup_true_lang_default;
+  var SelectValue_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+    __name: "SelectValue",
+    props: {
+      placeholder: {
+        type: String,
+        required: false,
+        default: ""
+      },
+      asChild: {
+        type: Boolean,
+        required: false
+      },
+      as: {
+        type: null,
+        required: false,
+        default: "span"
+      }
+    },
+    setup(__props) {
+      const props = __props;
+      const { forwardRef, currentElement } = useForwardExpose();
+      const rootContext = injectSelectRootContext();
+      vue.onMounted(() => {
+        rootContext.valueElement = currentElement;
+      });
+      const selectedLabel = vue.computed(() => {
+        let list = [];
+        const options = Array.from(rootContext.optionsSet.value);
+        const getOption = (value) => options.find((option) => valueComparator(value, option.value, rootContext.by));
+        if (Array.isArray(rootContext.modelValue.value)) list = rootContext.modelValue.value.map((value) => getOption(value)?.textContent ?? "");
+        else list = [getOption(rootContext.modelValue.value)?.textContent ?? ""];
+        return list.filter(Boolean);
+      });
+      const slotText = vue.computed(() => {
+        return selectedLabel.value.length ? selectedLabel.value.join(", ") : props.placeholder;
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(Primitive), {
+          ref: vue.unref(forwardRef),
+          as: _ctx.as,
+          "as-child": _ctx.asChild,
+          style: { pointerEvents: "none" },
+          "data-placeholder": selectedLabel.value.length ? void 0 : props.placeholder
+        }, {
+          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default", {
+            selectedLabel: selectedLabel.value,
+            modelValue: vue.unref(rootContext).modelValue.value
+          }, () => [vue.createTextVNode(vue.toDisplayString(slotText.value), 1)])]),
+          _: 3
+        }, 8, [
+          "as",
+          "as-child",
+          "data-placeholder"
+        ]);
+      };
+    }
+  });
+  var SelectValue_default = SelectValue_vue_vue_type_script_setup_true_lang_default;
+  var SelectViewport_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+    __name: "SelectViewport",
+    props: {
+      nonce: {
+        type: String,
+        required: false
+      },
+      asChild: {
+        type: Boolean,
+        required: false
+      },
+      as: {
+        type: null,
+        required: false
+      }
+    },
+    setup(__props) {
+      const props = __props;
+      const { nonce: propNonce } = vue.toRefs(props);
+      const nonce = useNonce(propNonce);
+      const contentContext = injectSelectContentContext();
+      const alignedPositionContext = contentContext.position === "item-aligned" ? injectSelectItemAlignedPositionContext() : void 0;
+      const { forwardRef, currentElement } = useForwardExpose();
+      vue.onMounted(() => {
+        contentContext?.onViewportChange(currentElement.value);
+      });
+      const prevScrollTopRef = vue.ref(0);
+      function handleScroll(event) {
+        const viewport = event.currentTarget;
+        const { shouldExpandOnScrollRef, contentWrapper } = alignedPositionContext ?? {};
+        if (shouldExpandOnScrollRef?.value && contentWrapper?.value) {
+          const scrolledBy = Math.abs(prevScrollTopRef.value - viewport.scrollTop);
+          if (scrolledBy > 0) {
+            const availableHeight = window.innerHeight - CONTENT_MARGIN * 2;
+            const cssMinHeight = Number.parseFloat(contentWrapper.value.style.minHeight);
+            const cssHeight = Number.parseFloat(contentWrapper.value.style.height);
+            const prevHeight = Math.max(cssMinHeight, cssHeight);
+            if (prevHeight < availableHeight) {
+              const nextHeight = prevHeight + scrolledBy;
+              const clampedNextHeight = Math.min(availableHeight, nextHeight);
+              const heightDiff = nextHeight - clampedNextHeight;
+              contentWrapper.value.style.height = `${clampedNextHeight}px`;
+              if (contentWrapper.value.style.bottom === "0px") {
+                viewport.scrollTop = heightDiff > 0 ? heightDiff : 0;
+                contentWrapper.value.style.justifyContent = "flex-end";
+              }
+            }
+          }
+        }
+        prevScrollTopRef.value = viewport.scrollTop;
+      }
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [vue.createVNode(vue.unref(Primitive), vue.mergeProps({
+          ref: vue.unref(forwardRef),
+          "data-reka-select-viewport": "",
+          role: "presentation"
+        }, {
+          ..._ctx.$attrs,
+          ...props
+        }, {
+          style: {
+            position: "relative",
+            flex: 1,
+            overflow: "hidden auto"
+          },
+          onScroll: handleScroll
+        }), {
+          default: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16), vue.createVNode(vue.unref(Primitive), {
+          as: "style",
+          nonce: vue.unref(nonce)
+        }, {
+          default: vue.withCtx(() => _cache[0] || (_cache[0] = [vue.createTextVNode(" /* Hide scrollbars cross-browser and enable momentum scroll for touch devices */ [data-reka-select-viewport] { scrollbar-width:none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } [data-reka-select-viewport]::-webkit-scrollbar { display: none; } ")])),
+          _: 1,
+          __: [0]
+        }, 8, ["nonce"])], 64);
+      };
+    }
+  });
+  var SelectViewport_default = SelectViewport_vue_vue_type_script_setup_true_lang_default;
+  function getNextSortedValues(prevValues = [], nextValue, atIndex) {
+    const nextValues = [...prevValues];
+    nextValues[atIndex] = nextValue;
+    return nextValues.sort((a, b) => a - b);
+  }
+  function convertValueToPercentage(value, min2, max2) {
+    const maxSteps = max2 - min2;
+    const percentPerStep = 100 / maxSteps;
+    const percentage = percentPerStep * (value - min2);
+    return clamp$1(percentage, 0, 100);
+  }
+  function getLabel(index, totalValues) {
+    if (totalValues > 2) return `Value ${index + 1} of ${totalValues}`;
+    else if (totalValues === 2) return ["Minimum", "Maximum"][index];
+    else return void 0;
+  }
+  function getClosestValueIndex(values, nextValue) {
+    if (values.length === 1) return 0;
+    const distances = values.map((value) => Math.abs(value - nextValue));
+    const closestDistance = Math.min(...distances);
+    return distances.indexOf(closestDistance);
+  }
+  function getThumbInBoundsOffset(width, left, direction) {
+    const halfWidth = width / 2;
+    const halfPercent = 50;
+    const offset2 = linearScale([0, halfPercent], [0, halfWidth]);
+    return (halfWidth - offset2(left) * direction) * direction;
+  }
+  function getStepsBetweenValues(values) {
+    return values.slice(0, -1).map((value, index) => values[index + 1] - value);
+  }
+  function hasMinStepsBetweenValues(values, minStepsBetweenValues) {
+    if (minStepsBetweenValues > 0) {
+      const stepsBetweenValues = getStepsBetweenValues(values);
+      const actualMinStepsBetweenValues = Math.min(...stepsBetweenValues);
+      return actualMinStepsBetweenValues >= minStepsBetweenValues;
+    }
+    return true;
+  }
+  function linearScale(input, output) {
+    return (value) => {
+      if (input[0] === input[1] || output[0] === output[1]) return output[0];
+      const ratio = (output[1] - output[0]) / (input[1] - input[0]);
+      return output[0] + ratio * (value - input[0]);
+    };
+  }
+  function getDecimalCount(value) {
+    return (String(value).split(".")[1] || "").length;
+  }
+  function roundValue(value, decimalCount) {
+    const rounder = 10 ** decimalCount;
+    return Math.round(value * rounder) / rounder;
+  }
+  const PAGE_KEYS = ["PageUp", "PageDown"];
+  const ARROW_KEYS = [
+    "ArrowUp",
+    "ArrowDown",
+    "ArrowLeft",
+    "ArrowRight"
+  ];
+  const BACK_KEYS = {
+    "from-left": [
+      "Home",
+      "PageDown",
+      "ArrowDown",
+      "ArrowLeft"
+    ],
+    "from-right": [
+      "Home",
+      "PageDown",
+      "ArrowDown",
+      "ArrowRight"
+    ],
+    "from-bottom": [
+      "Home",
+      "PageDown",
+      "ArrowDown",
+      "ArrowLeft"
+    ],
+    "from-top": [
+      "Home",
+      "PageUp",
+      "ArrowUp",
+      "ArrowLeft"
+    ]
+  };
+  const [injectSliderOrientationContext, provideSliderOrientationContext] = createContext(["SliderVertical", "SliderHorizontal"]);
+  var SliderHorizontal_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ vue.defineComponent({
+    __name: "SliderHorizontal",
+    props: {
+      dir: {
+        type: String,
+        required: false
+      },
+      min: {
+        type: Number,
+        required: true
+      },
+      max: {
+        type: Number,
+        required: true
+      },
+      inverted: {
+        type: Boolean,
+        required: true
+      }
+    },
+    emits: [
+      "slideEnd",
+      "slideStart",
+      "slideMove",
+      "homeKeyDown",
+      "endKeyDown",
+      "stepKeyDown"
+    ],
+    setup(__props, { emit: __emit }) {
+      const props = __props;
+      const emits = __emit;
+      const { max: max2, min: min2, dir, inverted } = vue.toRefs(props);
+      const { forwardRef, currentElement: sliderElement } = useForwardExpose();
+      const rootContext = injectSliderRootContext();
+      const offsetPosition = vue.ref();
+      const rectRef = vue.ref();
+      const isSlidingFromLeft = vue.computed(() => dir?.value !== "rtl" && !inverted.value || dir?.value !== "ltr" && inverted.value);
+      function getValueFromPointerEvent(event, slideStart) {
+        const rect = rectRef.value || sliderElement.value.getBoundingClientRect();
+        const thumb = [...rootContext.thumbElements.value][rootContext.valueIndexToChangeRef.value];
+        const thumbWidth = rootContext.thumbAlignment.value === "contain" ? thumb.clientWidth : 0;
+        if (!offsetPosition.value && !slideStart && rootContext.thumbAlignment.value === "contain") offsetPosition.value = event.clientX - thumb.getBoundingClientRect().left;
+        const input = [0, rect.width - thumbWidth];
+        const output = isSlidingFromLeft.value ? [min2.value, max2.value] : [max2.value, min2.value];
+        const value = linearScale(input, output);
+        rectRef.value = rect;
+        const position = slideStart ? event.clientX - rect.left - thumbWidth / 2 : event.clientX - rect.left - (offsetPosition.value ?? 0);
+        return value(position);
+      }
+      const startEdge = vue.computed(() => isSlidingFromLeft.value ? "left" : "right");
+      const endEdge = vue.computed(() => isSlidingFromLeft.value ? "right" : "left");
+      const direction = vue.computed(() => isSlidingFromLeft.value ? 1 : -1);
+      provideSliderOrientationContext({
+        startEdge,
+        endEdge,
+        direction,
+        size: "width"
+      });
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(SliderImpl_default, {
+          ref: vue.unref(forwardRef),
+          dir: vue.unref(dir),
+          "data-orientation": "horizontal",
+          style: vue.normalizeStyle({ ["--reka-slider-thumb-transform"]: !isSlidingFromLeft.value && vue.unref(rootContext).thumbAlignment.value === "overflow" ? "translateX(50%)" : "translateX(-50%)" }),
+          onSlideStart: _cache[0] || (_cache[0] = (event) => {
+            const value = getValueFromPointerEvent(event, true);
+            emits("slideStart", value);
+          }),
+          onSlideMove: _cache[1] || (_cache[1] = (event) => {
+            const value = getValueFromPointerEvent(event);
+            emits("slideMove", value);
+          }),
+          onSlideEnd: _cache[2] || (_cache[2] = () => {
+            rectRef.value = void 0;
             offsetPosition.value = void 0;
             emits("slideEnd");
           }),
@@ -15090,7 +16587,7 @@ Defaulting to \`null\`.`);
       return styles;
     });
   }
-  const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$U = /* @__PURE__ */ vue.defineComponent({
     __name: "SkAccordion",
     props: {
       type: { default: "single" },
@@ -15146,9 +16643,9 @@ Defaulting to \`null\`.`);
     }
     return target;
   };
-  const SkAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-85c35809"]]);
-  const _hoisted_1$x = { class: "sk-accordion-content-inner" };
-  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
+  const SkAccordion = /* @__PURE__ */ _export_sfc(_sfc_main$U, [["__scopeId", "data-v-85c35809"]]);
+  const _hoisted_1$z = { class: "sk-accordion-content-inner" };
+  const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
     __name: "SkAccordionItem",
     props: {
       value: {},
@@ -15211,7 +16708,7 @@ Defaulting to \`null\`.`);
             }),
             vue.createVNode(vue.unref(AccordionContent_default), { class: "sk-accordion-content" }, {
               default: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_1$x, [
+                vue.createElementVNode("div", _hoisted_1$z, [
                   vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
                 ])
               ]),
@@ -15223,8 +16720,8 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-5e73d91f"]]);
-  const _hoisted_1$w = {
+  const SkAccordionItem = /* @__PURE__ */ _export_sfc(_sfc_main$T, [["__scopeId", "data-v-5e73d91f"]]);
+  const _hoisted_1$y = {
     key: 0,
     class: "sk-alert-icon"
   };
@@ -15257,7 +16754,7 @@ Defaulting to \`null\`.`);
     "stroke-width": "2"
   };
   const _hoisted_6$4 = { class: "sk-alert-content" };
-  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$S = /* @__PURE__ */ vue.defineComponent({
     __name: "SkAlert",
     props: {
       kind: { default: "info" },
@@ -15296,7 +16793,7 @@ Defaulting to \`null\`.`);
           style: vue.normalizeStyle(vue.unref(customColorStyles)),
           role: "alert"
         }, [
-          shouldShowIcon.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$w, [
+          shouldShowIcon.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$y, [
             vue.renderSlot(_ctx.$slots, "icon", {}, () => [
               __props.kind === "info" ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2$h, [..._cache[0] || (_cache[0] = [
                 vue.createElementVNode("circle", {
@@ -15361,12 +16858,12 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const _hoisted_1$v = ["src", "alt"];
+  const _hoisted_1$x = ["src", "alt"];
   const _hoisted_2$g = {
     key: 1,
     class: "sk-avatar-initials"
   };
-  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$R = /* @__PURE__ */ vue.defineComponent({
     __name: "SkAvatar",
     props: {
       src: { default: void 0 },
@@ -15415,7 +16912,7 @@ Defaulting to \`null\`.`);
             alt: __props.alt,
             class: "sk-avatar-image",
             onError: handleImageError
-          }, null, 40, _hoisted_1$v)) : __props.initials ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$g, vue.toDisplayString(displayInitials.value), 1)) : vue.renderSlot(_ctx.$slots, "icon", { key: 2 }, () => [
+          }, null, 40, _hoisted_1$x)) : __props.initials ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$g, vue.toDisplayString(displayInitials.value), 1)) : vue.renderSlot(_ctx.$slots, "icon", { key: 2 }, () => [
             _cache[0] || (_cache[0] = vue.createElementVNode("svg", {
               class: "sk-avatar-icon",
               viewBox: "0 0 24 24",
@@ -15428,7 +16925,7 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-07c208b7"]]);
+  const SkAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$R, [["__scopeId", "data-v-07c208b7"]]);
   /*!
    * vue-router v4.6.3
    * (c) 2025 Eduardo San Martin Morote
@@ -15604,8 +17101,8 @@ Defaulting to \`null\`.`);
     return record ? record.aliasOf ? record.aliasOf.path : record.path : "";
   }
   const getLinkClass = (propClass, globalClass, defaultClass) => propClass != null ? propClass : globalClass != null ? globalClass : defaultClass;
-  const _hoisted_1$u = { class: "sk-breadcrumb-item" };
-  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$w = { class: "sk-breadcrumb-item" };
+  const _sfc_main$Q = /* @__PURE__ */ vue.defineComponent({
     __name: "SkBreadcrumbItem",
     props: {
       to: { default: void 0 },
@@ -15633,7 +17130,7 @@ Defaulting to \`null\`.`);
         [`sk-${kind}`]: true
       }));
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("li", _hoisted_1$u, [
+        return vue.openBlock(), vue.createElementBlock("li", _hoisted_1$w, [
           (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(componentTag.value), {
             class: vue.normalizeClass(linkClasses.value),
             to: __props.to,
@@ -15651,12 +17148,12 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkBreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-83066af5"]]);
-  const _hoisted_1$t = {
+  const SkBreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$Q, [["__scopeId", "data-v-83066af5"]]);
+  const _hoisted_1$v = {
     class: "sk-breadcrumb-separator",
     "aria-hidden": "true"
   };
-  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$P = /* @__PURE__ */ vue.defineComponent({
     __name: "SkBreadcrumbSeparator",
     props: {
       separator: { default: void 0 }
@@ -15666,13 +17163,13 @@ Defaulting to \`null\`.`);
       const parentSeparator = vue.inject("breadcrumbs-separator", "/");
       const displaySeparator = vue.computed(() => props.separator ?? parentSeparator);
       return (_ctx, _cache) => {
-        return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$t, vue.toDisplayString(displaySeparator.value), 1);
+        return vue.openBlock(), vue.createElementBlock("span", _hoisted_1$v, vue.toDisplayString(displaySeparator.value), 1);
       };
     }
   });
-  const SkBreadcrumbSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-fab30e8b"]]);
-  const _hoisted_1$s = { class: "sk-breadcrumbs-list" };
-  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
+  const SkBreadcrumbSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$P, [["__scopeId", "data-v-fab30e8b"]]);
+  const _hoisted_1$u = { class: "sk-breadcrumbs-list" };
+  const _sfc_main$O = /* @__PURE__ */ vue.defineComponent({
     __name: "SkBreadcrumbs",
     props: {
       kind: { default: "neutral" },
@@ -15710,7 +17207,7 @@ Defaulting to \`null\`.`);
           style: vue.normalizeStyle(vue.unref(customColorStyles)),
           "aria-label": "Breadcrumb"
         }, [
-          vue.createElementVNode("ol", _hoisted_1$s, [
+          vue.createElementVNode("ol", _hoisted_1$u, [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(processedItems.value, (item, index) => {
               return vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: index }, [
                 (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item))),
@@ -15722,8 +17219,8 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkBreadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main$L, [["__scopeId", "data-v-f7fec0fe"]]);
-  const _hoisted_1$r = {
+  const SkBreadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main$O, [["__scopeId", "data-v-f7fec0fe"]]);
+  const _hoisted_1$t = {
     key: 0,
     class: "sk-button-loader",
     "aria-hidden": "true"
@@ -15744,7 +17241,7 @@ Defaulting to \`null\`.`);
     key: 3,
     class: "sk-button-icon sk-button-icon-trailing"
   };
-  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$N = /* @__PURE__ */ vue.defineComponent({
     __name: "SkButton",
     props: {
       type: { default: "button" },
@@ -15801,7 +17298,7 @@ Defaulting to \`null\`.`);
           role: "button"
         }, {
           default: vue.withCtx(() => [
-            __props.loading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$r)) : vue.createCommentVNode("", true),
+            __props.loading ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$t)) : vue.createCommentVNode("", true),
             vue.createElementVNode("span", {
               class: vue.normalizeClass({ "sk-button-content": true, "loading": __props.loading })
             }, [
@@ -15824,20 +17321,22 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkButton = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-543676d6"]]);
-  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
+  const SkButton = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-543676d6"]]);
+  const _sfc_main$M = /* @__PURE__ */ vue.defineComponent({
     __name: "SkPanel",
     props: {
       kind: { default: "neutral" },
       size: { default: "md" },
       showDecoration: { type: Boolean, default: true },
       noBorder: { type: Boolean, default: false },
+      corners: { default: () => ["bottom-right"] },
+      decorationCorner: { default: "bottom-right" },
       baseColor: {},
       textColor: {}
     },
     setup(__props) {
       vue.useCssVars((_ctx) => ({
-        "v29b35e9c": decorationDisplay.value
+        "v42b18398": decorationDisplay.value
       }));
       const props = __props;
       const classes = vue.computed(() => {
@@ -15845,7 +17344,12 @@ Defaulting to \`null\`.`);
           "sk-panel": true,
           [`sk-${props.kind}`]: true,
           [`sk-${props.size}`]: true,
-          "sk-no-border": props.noBorder
+          "sk-no-border": props.noBorder,
+          "sk-cut-top-left": props.corners.includes("top-left"),
+          "sk-cut-top-right": props.corners.includes("top-right"),
+          "sk-cut-bottom-right": props.corners.includes("bottom-right"),
+          "sk-cut-bottom-left": props.corners.includes("bottom-left"),
+          [`sk-decoration-${props.decorationCorner}`]: true
         };
       });
       const customColorStyles = useCustomColors(
@@ -15854,10 +17358,13 @@ Defaulting to \`null\`.`);
         vue.toRef(() => props.textColor)
       );
       const decorationDisplay = vue.computed(() => {
-        if (props.noBorder) {
+        if (props.noBorder || !props.showDecoration) {
           return "none";
         }
-        return props.showDecoration ? "block" : "none";
+        if (!props.corners.includes(props.decorationCorner)) {
+          return "none";
+        }
+        return "block";
       });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("div", {
@@ -15869,8 +17376,8 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkPanel = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-1a397f27"]]);
-  const _hoisted_1$q = {
+  const SkPanel = /* @__PURE__ */ _export_sfc(_sfc_main$M, [["__scopeId", "data-v-07c1642c"]]);
+  const _hoisted_1$s = {
     key: 0,
     class: "sk-card-title"
   };
@@ -15882,7 +17389,7 @@ Defaulting to \`null\`.`);
     key: 3,
     class: "sk-card-footer"
   };
-  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$L = /* @__PURE__ */ vue.defineComponent({
     __name: "SkCard",
     props: {
       kind: { default: "neutral" },
@@ -15893,6 +17400,8 @@ Defaulting to \`null\`.`);
       title: { default: void 0 },
       headerColor: { default: void 0 },
       scrollable: { type: Boolean, default: false },
+      corners: { default: () => ["bottom-right"] },
+      decorationCorner: { default: "bottom-right" },
       baseColor: {},
       textColor: {}
     },
@@ -15936,6 +17445,8 @@ Defaulting to \`null\`.`);
           "no-border": __props.noBorder,
           "base-color": __props.baseColor,
           "text-color": __props.textColor,
+          corners: __props.corners,
+          "decoration-corner": __props.decorationCorner,
           class: vue.normalizeClass(classes.value)
         }, {
           default: vue.withCtx(() => [
@@ -15944,7 +17455,7 @@ Defaulting to \`null\`.`);
               class: "sk-card-header",
               style: vue.normalizeStyle(headerStyles.value)
             }, [
-              __props.title ? (vue.openBlock(), vue.createElementBlock("h3", _hoisted_1$q, vue.toDisplayString(__props.title), 1)) : vue.createCommentVNode("", true),
+              __props.title ? (vue.openBlock(), vue.createElementBlock("h3", _hoisted_1$s, vue.toDisplayString(__props.title), 1)) : vue.createCommentVNode("", true),
               vue.renderSlot(_ctx.$slots, "header")
             ], 4)) : vue.createCommentVNode("", true),
             _ctx.$slots.media ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$e, [
@@ -15961,11 +17472,11 @@ Defaulting to \`null\`.`);
             ])) : vue.createCommentVNode("", true)
           ]),
           _: 3
-        }, 8, ["kind", "size", "show-decoration", "no-border", "base-color", "text-color", "class"]);
+        }, 8, ["kind", "size", "show-decoration", "no-border", "base-color", "text-color", "corners", "decoration-corner", "class"]);
       };
     }
   });
-  const _hoisted_1$p = {
+  const _hoisted_1$r = {
     key: 0,
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
@@ -15990,7 +17501,7 @@ Defaulting to \`null\`.`);
     key: 0,
     class: "sk-checkbox-label"
   };
-  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$K = /* @__PURE__ */ vue.defineComponent({
     __name: "SkCheckbox",
     props: /* @__PURE__ */ vue.mergeModels({
       kind: { default: "neutral" },
@@ -16039,7 +17550,7 @@ Defaulting to \`null\`.`);
             default: vue.withCtx(() => [
               vue.createVNode(vue.unref(CheckboxIndicator_default), { class: "sk-checkbox-indicator" }, {
                 default: vue.withCtx(() => [
-                  checked.value === true ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$p, [..._cache[1] || (_cache[1] = [
+                  checked.value === true ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$r, [..._cache[1] || (_cache[1] = [
                     vue.createElementVNode("polyline", { points: "20 6 9 17 4 12" }, null, -1)
                   ])])) : checked.value === "indeterminate" ? (vue.openBlock(), vue.createElementBlock("svg", _hoisted_2$d, [..._cache[2] || (_cache[2] = [
                     vue.createElementVNode("line", {
@@ -16064,9 +17575,9 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-073d7038"]]);
-  const _hoisted_1$o = { class: "sk-collapsible-content-inner" };
-  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
+  const SkCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-073d7038"]]);
+  const _hoisted_1$q = { class: "sk-collapsible-content-inner" };
+  const _sfc_main$J = /* @__PURE__ */ vue.defineComponent({
     __name: "SkCollapsible",
     props: {
       open: { type: Boolean, default: void 0 },
@@ -16144,7 +17655,7 @@ Defaulting to \`null\`.`);
             }),
             vue.createVNode(vue.unref(CollapsibleContent_default), { class: "sk-collapsible-content" }, {
               default: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_1$o, [
+                vue.createElementVNode("div", _hoisted_1$q, [
                   vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
                 ])
               ]),
@@ -16156,9 +17667,9 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkCollapsible = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-dc60530b"]]);
-  const _hoisted_1$n = ["aria-orientation"];
-  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
+  const SkCollapsible = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-dc60530b"]]);
+  const _hoisted_1$p = ["aria-orientation"];
+  const _sfc_main$I = /* @__PURE__ */ vue.defineComponent({
     __name: "SkDivider",
     props: {
       orientation: { default: "horizontal" },
@@ -16182,7 +17693,7 @@ Defaulting to \`null\`.`);
           class: vue.normalizeClass(classes.value),
           role: "separator",
           "aria-orientation": __props.orientation
-        }, null, 10, _hoisted_1$n);
+        }, null, 10, _hoisted_1$p);
       };
     }
   });
@@ -16193,7 +17704,7 @@ Defaulting to \`null\`.`);
       theme: currentTheme
     };
   }
-  const _hoisted_1$m = {
+  const _hoisted_1$o = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "none",
@@ -16204,7 +17715,7 @@ Defaulting to \`null\`.`);
     style: { "width": "1rem", "height": "1rem" }
   };
   const _hoisted_2$c = ["points"];
-  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$H = /* @__PURE__ */ vue.defineComponent({
     __name: "SkDropdown",
     props: {
       kind: { default: "neutral" },
@@ -16252,7 +17763,7 @@ Defaulting to \`null\`.`);
                 vue.renderSlot(_ctx.$slots, "trigger", {}, () => [
                   vue.createVNode(SkButton, { kind: __props.kind }, {
                     trailing: vue.withCtx(() => [
-                      (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$m, [
+                      (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$o, [
                         vue.createElementVNode("polyline", { points: caretPoints.value }, null, 8, _hoisted_2$c)
                       ]))
                     ]),
@@ -16289,8 +17800,8 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-a5cb1061"]]);
-  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
+  const SkDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-a5cb1061"]]);
+  const _sfc_main$G = /* @__PURE__ */ vue.defineComponent({
     __name: "SkDropdownMenuItem",
     props: {
       disabled: { type: Boolean, default: false }
@@ -16314,8 +17825,8 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkDropdownMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-63d43580"]]);
-  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
+  const SkDropdownMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-63d43580"]]);
+  const _sfc_main$F = /* @__PURE__ */ vue.defineComponent({
     __name: "SkDropdownMenuSeparator",
     setup(__props) {
       return (_ctx, _cache) => {
@@ -16323,8 +17834,8 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkDropdownMenuSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-8d03fb68"]]);
-  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
+  const SkDropdownMenuSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-8d03fb68"]]);
+  const _sfc_main$E = /* @__PURE__ */ vue.defineComponent({
     __name: "SkDropdownSubmenu",
     props: {
       triggerText: {},
@@ -16385,8 +17896,8 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkDropdownSubmenu = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-63bf4e4d"]]);
-  const _hoisted_1$l = ["for"];
+  const SkDropdownSubmenu = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-63bf4e4d"]]);
+  const _hoisted_1$n = ["for"];
   const _hoisted_2$b = {
     key: 0,
     class: "sk-field-required"
@@ -16394,7 +17905,7 @@ Defaulting to \`null\`.`);
   const _hoisted_3$9 = { class: "sk-field-input-wrapper" };
   const _hoisted_4$7 = ["id"];
   const _hoisted_5$4 = ["id"];
-  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$D = /* @__PURE__ */ vue.defineComponent({
     __name: "SkField",
     props: {
       label: { default: void 0 },
@@ -16450,7 +17961,7 @@ Defaulting to \`null\`.`);
           }, [
             vue.createTextVNode(vue.toDisplayString(__props.label) + " ", 1),
             __props.required ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$b, "*")) : vue.createCommentVNode("", true)
-          ], 8, _hoisted_1$l)) : vue.createCommentVNode("", true),
+          ], 8, _hoisted_1$n)) : vue.createCommentVNode("", true),
           vue.createElementVNode("div", _hoisted_3$9, [
             vue.renderSlot(_ctx.$slots, "default", {
               id: fieldId.value,
@@ -16473,8 +17984,8 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkField = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-e19bf08c"]]);
-  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
+  const SkField = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-e19bf08c"]]);
+  const _sfc_main$C = /* @__PURE__ */ vue.defineComponent({
     __name: "SkGroup",
     props: {
       orientation: { default: "horizontal" }
@@ -16496,8 +18007,8 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const _hoisted_1$k = ["type", "disabled", "readonly", "placeholder", "required", "name", "autocomplete"];
-  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$m = ["type", "disabled", "readonly", "placeholder", "required", "name", "autocomplete"];
+  const _sfc_main$B = /* @__PURE__ */ vue.defineComponent({
     __name: "SkInput",
     props: /* @__PURE__ */ vue.mergeModels({
       type: { default: "text" },
@@ -16544,14 +18055,14 @@ Defaulting to \`null\`.`);
           required: __props.required,
           name: __props.name,
           autocomplete: __props.autocomplete
-        }, _ctx.$attrs), null, 16, _hoisted_1$k)), [
+        }, _ctx.$attrs), null, 16, _hoisted_1$m)), [
           [vue.vModelDynamic, modelValue.value]
         ]);
       };
     }
   });
-  const SkInput = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-c6012675"]]);
-  const _hoisted_1$j = {
+  const SkInput = /* @__PURE__ */ _export_sfc(_sfc_main$B, [["__scopeId", "data-v-c6012675"]]);
+  const _hoisted_1$l = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "none",
@@ -16561,7 +18072,7 @@ Defaulting to \`null\`.`);
     "stroke-linejoin": "miter",
     style: { "width": "1rem", "height": "1rem" }
   };
-  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$A = /* @__PURE__ */ vue.defineComponent({
     __name: "SkListbox",
     props: /* @__PURE__ */ vue.mergeModels({
       kind: { default: void 0 },
@@ -16625,7 +18136,7 @@ Defaulting to \`null\`.`);
                   class: vue.normalizeClass(triggerClasses.value)
                 }, {
                   default: vue.withCtx(() => [
-                    (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$j, [..._cache[1] || (_cache[1] = [
+                    (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$l, [..._cache[1] || (_cache[1] = [
                       vue.createElementVNode("polyline", { points: "6 9 12 15 18 9" }, null, -1)
                     ])]))
                   ]),
@@ -16664,8 +18175,8 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkListbox = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-fbc1f022"]]);
-  const _hoisted_1$i = {
+  const SkListbox = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-fbc1f022"]]);
+  const _hoisted_1$k = {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "none",
@@ -16675,7 +18186,7 @@ Defaulting to \`null\`.`);
     "stroke-linejoin": "miter",
     style: { "width": "1rem", "height": "1rem" }
   };
-  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$z = /* @__PURE__ */ vue.defineComponent({
     __name: "SkListboxItem",
     props: {
       value: {},
@@ -16695,7 +18206,7 @@ Defaulting to \`null\`.`);
             vue.renderSlot(_ctx.$slots, "default", {}, void 0, true),
             vue.createVNode(vue.unref(ComboboxItemIndicator_default), { class: "sk-listbox-item-indicator" }, {
               default: vue.withCtx(() => [
-                (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$i, [..._cache[0] || (_cache[0] = [
+                (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$k, [..._cache[0] || (_cache[0] = [
                   vue.createElementVNode("polyline", { points: "20 6 9 17 4 12" }, null, -1)
                 ])]))
               ]),
@@ -16707,8 +18218,8 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkListboxItem = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-fcf3fe85"]]);
-  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
+  const SkListboxItem = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-fcf3fe85"]]);
+  const _sfc_main$y = /* @__PURE__ */ vue.defineComponent({
     __name: "SkListboxSeparator",
     setup(__props) {
       return (_ctx, _cache) => {
@@ -16716,8 +18227,8 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkListboxSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-12046626"]]);
-  const _hoisted_1$h = {
+  const SkListboxSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$y, [["__scopeId", "data-v-12046626"]]);
+  const _hoisted_1$j = {
     key: 0,
     class: "sk-modal-header"
   };
@@ -16726,7 +18237,7 @@ Defaulting to \`null\`.`);
     key: 1,
     class: "sk-modal-footer"
   };
-  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$x = /* @__PURE__ */ vue.defineComponent({
     __name: "SkModal",
     props: {
       kind: { default: "neutral" },
@@ -16817,7 +18328,7 @@ Defaulting to \`null\`.`);
                   onInteractOutside: handleOverlayClick
                 }, {
                   default: vue.withCtx(() => [
-                    _ctx.$slots.title || __props.title ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$h, [
+                    _ctx.$slots.title || __props.title ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$j, [
                       vue.createVNode(vue.unref(DialogTitle_default), { class: "sk-modal-title" }, {
                         default: vue.withCtx(() => [
                           vue.renderSlot(_ctx.$slots, "title", { close }, () => [
@@ -16864,8 +18375,8 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkModal = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-d5c13c78"]]);
-  const _hoisted_1$g = { class: "sk-navbar-content" };
+  const SkModal = /* @__PURE__ */ _export_sfc(_sfc_main$x, [["__scopeId", "data-v-d5c13c78"]]);
+  const _hoisted_1$i = { class: "sk-navbar-content" };
   const _hoisted_2$9 = {
     key: 0,
     class: "sk-navbar-brand"
@@ -16878,7 +18389,7 @@ Defaulting to \`null\`.`);
     key: 2,
     class: "sk-navbar-actions"
   };
-  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$w = /* @__PURE__ */ vue.defineComponent({
     __name: "SkNavBar",
     props: {
       kind: { default: "neutral" },
@@ -16906,7 +18417,7 @@ Defaulting to \`null\`.`);
           class: vue.normalizeClass(classes.value),
           style: vue.normalizeStyle(vue.unref(customColorStyles))
         }, [
-          vue.createElementVNode("div", _hoisted_1$g, [
+          vue.createElementVNode("div", _hoisted_1$i, [
             vue.unref(slots).brand ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$9, [
               vue.renderSlot(_ctx.$slots, "brand")
             ])) : vue.createCommentVNode("", true),
@@ -16921,8 +18432,8 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const _hoisted_1$f = { class: "sk-number-input-steppers" };
-  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
+  const _hoisted_1$h = { class: "sk-number-input-steppers" };
+  const _sfc_main$v = /* @__PURE__ */ vue.defineComponent({
     __name: "SkNumberInput",
     props: /* @__PURE__ */ vue.mergeModels({
       kind: { default: void 0 },
@@ -16985,7 +18496,7 @@ Defaulting to \`null\`.`);
                 class: vue.normalizeClass(inputClasses.value),
                 placeholder: __props.placeholder
               }, null, 8, ["class", "placeholder"]),
-              vue.createElementVNode("div", _hoisted_1$f, [
+              vue.createElementVNode("div", _hoisted_1$h, [
                 vue.createVNode(vue.unref(NumberFieldIncrement_default), { class: "sk-number-input-increment" }, {
                   default: vue.withCtx(() => [..._cache[1] || (_cache[1] = [
                     vue.createElementVNode("svg", {
@@ -17026,7 +18537,7 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkNumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-b589687f"]]);
+  const SkNumberInput = /* @__PURE__ */ _export_sfc(_sfc_main$v, [["__scopeId", "data-v-b589687f"]]);
   const ThemeSymbol = Symbol("SkTheme");
   function provideTheme(initialTheme = "greyscale") {
     const currentTheme = vue.ref(initialTheme);
@@ -17047,7 +18558,7 @@ Defaulting to \`null\`.`);
     }
     return context2;
   }
-  const _hoisted_1$e = ["data-scheme"];
+  const _hoisted_1$g = ["data-scheme"];
   const _hoisted_2$8 = {
     key: 0,
     class: "sk-page-header"
@@ -17062,7 +18573,7 @@ Defaulting to \`null\`.`);
     key: 1,
     class: "sk-page-footer"
   };
-  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$u = /* @__PURE__ */ vue.defineComponent({
     __name: "SkPage",
     props: {
       sidebarPosition: { default: "left" },
@@ -17116,19 +18627,19 @@ Defaulting to \`null\`.`);
           _ctx.$slots.footer ? (vue.openBlock(), vue.createElementBlock("footer", _hoisted_6$3, [
             vue.renderSlot(_ctx.$slots, "footer", {}, void 0, true)
           ])) : vue.createCommentVNode("", true)
-        ], 14, _hoisted_1$e);
+        ], 14, _hoisted_1$g);
       };
     }
   });
-  const SkPage = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-ad672949"]]);
-  const _hoisted_1$d = ["disabled", "aria-label", "aria-current"];
+  const SkPage = /* @__PURE__ */ _export_sfc(_sfc_main$u, [["__scopeId", "data-v-ad672949"]]);
+  const _hoisted_1$f = ["disabled", "aria-label", "aria-current"];
   const _hoisted_2$7 = { key: 0 };
   const _hoisted_3$5 = { key: 1 };
   const _hoisted_4$4 = { key: 2 };
   const _hoisted_5$2 = { key: 3 };
   const _hoisted_6$2 = { key: 4 };
   const _hoisted_7 = { key: 5 };
-  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$t = /* @__PURE__ */ vue.defineComponent({
     __name: "SkPaginationItem",
     props: {
       page: { default: void 0 },
@@ -17187,12 +18698,12 @@ Defaulting to \`null\`.`);
           onClick: handleClick
         }, [
           __props.type === "prev" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$7, "‹")) : __props.type === "next" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3$5, "›")) : __props.type === "first" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$4, "‹‹")) : __props.type === "last" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_5$2, "››")) : __props.type === "ellipsis" ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6$2, "...")) : (vue.openBlock(), vue.createElementBlock("span", _hoisted_7, vue.toDisplayString(__props.page), 1))
-        ], 10, _hoisted_1$d);
+        ], 10, _hoisted_1$f);
       };
     }
   });
-  const SkPaginationItem = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-1eea3ced"]]);
-  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
+  const SkPaginationItem = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-1eea3ced"]]);
+  const _sfc_main$s = /* @__PURE__ */ vue.defineComponent({
     __name: "SkPagination",
     props: {
       total: {},
@@ -17306,8 +18817,8 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkPagination = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-e7fb9357"]]);
-  const _hoisted_1$c = {
+  const SkPagination = /* @__PURE__ */ _export_sfc(_sfc_main$s, [["__scopeId", "data-v-e7fb9357"]]);
+  const _hoisted_1$e = {
     key: 0,
     class: "sk-popover-header"
   };
@@ -17323,7 +18834,7 @@ Defaulting to \`null\`.`);
     key: 2,
     class: "sk-popover-footer"
   };
-  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$r = /* @__PURE__ */ vue.defineComponent({
     __name: "SkPopover",
     props: {
       kind: { default: "neutral" },
@@ -17379,7 +18890,7 @@ Defaulting to \`null\`.`);
                   "collision-padding": 8
                 }, {
                   default: vue.withCtx(() => [
-                    __props.title || _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$c, [
+                    __props.title || _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$e, [
                       __props.title ? (vue.openBlock(), vue.createElementBlock("h3", _hoisted_2$6, vue.toDisplayString(__props.title), 1)) : vue.createCommentVNode("", true),
                       vue.renderSlot(_ctx.$slots, "header", {}, void 0, true),
                       __props.closable ? (vue.openBlock(), vue.createBlock(vue.unref(PopoverClose_default), {
@@ -17438,8 +18949,8 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkPopover = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-679c4935"]]);
-  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+  const SkPopover = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-679c4935"]]);
+  const _sfc_main$q = /* @__PURE__ */ vue.defineComponent({
     __name: "SkProgress",
     props: {
       value: { default: null },
@@ -17512,12 +19023,12 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkProgress = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-4b68e83d"]]);
-  const _hoisted_1$b = {
+  const SkProgress = /* @__PURE__ */ _export_sfc(_sfc_main$q, [["__scopeId", "data-v-4b68e83d"]]);
+  const _hoisted_1$d = {
     key: 0,
     class: "sk-radio-label"
   };
-  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$p = /* @__PURE__ */ vue.defineComponent({
     __name: "SkRadio",
     props: {
       value: {},
@@ -17563,7 +19074,7 @@ Defaulting to \`null\`.`);
             ]),
             _: 1
           }, 8, ["class", "style", "value", "disabled"]),
-          __props.label || _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$b, [
+          __props.label || _ctx.$slots.default ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$d, [
             vue.renderSlot(_ctx.$slots, "default", {}, () => [
               vue.createTextVNode(vue.toDisplayString(__props.label), 1)
             ], true)
@@ -17572,8 +19083,8 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkRadio = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-c88f9c3f"]]);
-  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+  const SkRadio = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-c88f9c3f"]]);
+  const _sfc_main$o = /* @__PURE__ */ vue.defineComponent({
     __name: "SkRadioGroup",
     props: /* @__PURE__ */ vue.mergeModels({
       orientation: { default: "vertical" },
@@ -17615,7 +19126,203 @@ Defaulting to \`null\`.`);
       };
     }
   });
-  const SkRadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-7f5bc9cb"]]);
+  const SkRadioGroup = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-7f5bc9cb"]]);
+  const _hoisted_1$c = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "square",
+    "stroke-linejoin": "miter",
+    style: { "width": "1rem", "height": "1rem", "flex-shrink": "0" }
+  };
+  const _sfc_main$n = /* @__PURE__ */ vue.defineComponent({
+    __name: "SkSelect",
+    props: /* @__PURE__ */ vue.mergeModels({
+      kind: { default: void 0 },
+      size: { default: "md" },
+      placeholder: { default: "Select..." },
+      disabled: { type: Boolean, default: false },
+      baseColor: {},
+      textColor: {}
+    }, {
+      "modelValue": {},
+      "modelModifiers": {}
+    }),
+    emits: ["update:modelValue"],
+    setup(__props) {
+      const props = __props;
+      const modelValue = vue.useModel(__props, "modelValue");
+      const { theme } = usePortalContext();
+      const fieldKind = vue.inject("field-kind", vue.computed(() => void 0));
+      const itemLabels = vue.reactive(/* @__PURE__ */ new Map());
+      vue.provide("sk-select-register", (value, label) => {
+        itemLabels.set(value, label);
+      });
+      vue.provide("sk-select-unregister", (value) => {
+        itemLabels.delete(value);
+      });
+      const displayText = vue.computed(() => {
+        if (!modelValue.value) {
+          return "";
+        }
+        return itemLabels.get(modelValue.value) || modelValue.value;
+      });
+      const effectiveKind = vue.computed(() => fieldKind.value || props.kind || "neutral");
+      const wrapperClasses = vue.computed(() => ({
+        "sk-select": true,
+        [`sk-${effectiveKind.value}`]: true,
+        [`sk-${props.size}`]: true
+      }));
+      const triggerClasses = vue.computed(() => ({
+        "sk-select-trigger": true
+      }));
+      const contentClasses = vue.computed(() => ({
+        "sk-select-content": true,
+        [`sk-${effectiveKind.value}`]: true
+      }));
+      const customColorStyles = useCustomColors(
+        "select",
+        vue.toRef(() => props.baseColor),
+        vue.toRef(() => props.textColor)
+      );
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createElementBlock("div", {
+          class: vue.normalizeClass(wrapperClasses.value),
+          style: vue.normalizeStyle(vue.unref(customColorStyles))
+        }, [
+          vue.createVNode(vue.unref(SelectRoot_default), {
+            modelValue: modelValue.value,
+            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+            disabled: __props.disabled
+          }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(SelectTrigger_default), {
+                class: vue.normalizeClass(triggerClasses.value)
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(SelectValue_default), { placeholder: __props.placeholder }, {
+                    default: vue.withCtx(() => [
+                      displayText.value ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                        vue.createTextVNode(vue.toDisplayString(displayText.value), 1)
+                      ], 64)) : vue.createCommentVNode("", true)
+                    ]),
+                    _: 1
+                  }, 8, ["placeholder"]),
+                  (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$c, [..._cache[1] || (_cache[1] = [
+                    vue.createElementVNode("polyline", { points: "6 9 12 15 18 9" }, null, -1)
+                  ])]))
+                ]),
+                _: 1
+              }, 8, ["class"]),
+              vue.createVNode(vue.unref(SelectPortal_default), null, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(SelectContent_default), {
+                    "data-scheme": vue.unref(theme),
+                    class: vue.normalizeClass(contentClasses.value),
+                    style: vue.normalizeStyle(vue.unref(customColorStyles)),
+                    position: "popper",
+                    side: "bottom",
+                    align: "start",
+                    "side-offset": 4
+                  }, {
+                    default: vue.withCtx(() => [
+                      vue.createVNode(vue.unref(SelectViewport_default), null, {
+                        default: vue.withCtx(() => [
+                          vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+                        ]),
+                        _: 3
+                      })
+                    ]),
+                    _: 3
+                  }, 8, ["data-scheme", "class", "style"])
+                ]),
+                _: 3
+              })
+            ]),
+            _: 3
+          }, 8, ["modelValue", "disabled"])
+        ], 6);
+      };
+    }
+  });
+  const SkSelect = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["__scopeId", "data-v-c39367b7"]]);
+  const _hoisted_1$b = {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "3",
+    "stroke-linecap": "square",
+    "stroke-linejoin": "miter",
+    style: { "width": "1rem", "height": "1rem" }
+  };
+  const _sfc_main$m = /* @__PURE__ */ vue.defineComponent({
+    __name: "SkSelectItem",
+    props: {
+      value: {},
+      disabled: { type: Boolean, default: false }
+    },
+    setup(__props) {
+      const props = __props;
+      const textEl = vue.useTemplateRef("textEl");
+      const register = vue.inject("sk-select-register", void 0);
+      const unregister = vue.inject("sk-select-unregister", void 0);
+      vue.onMounted(() => {
+        const el = textEl.value?.$el;
+        if (register) {
+          register(props.value, el?.textContent?.trim() || props.value);
+        }
+      });
+      vue.onUnmounted(() => {
+        if (unregister) {
+          unregister(props.value);
+        }
+      });
+      const classes = vue.computed(() => ({
+        "sk-select-item": true
+      }));
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(SelectItem_default), {
+          class: vue.normalizeClass(classes.value),
+          value: __props.value,
+          disabled: __props.disabled
+        }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(vue.unref(SelectItemText_default), {
+              ref_key: "textEl",
+              ref: textEl
+            }, {
+              default: vue.withCtx(() => [
+                vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+              ]),
+              _: 3
+            }, 512),
+            vue.createVNode(vue.unref(SelectItemIndicator_default), { class: "sk-select-item-indicator" }, {
+              default: vue.withCtx(() => [
+                (vue.openBlock(), vue.createElementBlock("svg", _hoisted_1$b, [..._cache[0] || (_cache[0] = [
+                  vue.createElementVNode("polyline", { points: "20 6 9 17 4 12" }, null, -1)
+                ])]))
+              ]),
+              _: 1
+            })
+          ]),
+          _: 3
+        }, 8, ["class", "value", "disabled"]);
+      };
+    }
+  });
+  const SkSelectItem = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-7d12d89e"]]);
+  const _sfc_main$l = /* @__PURE__ */ vue.defineComponent({
+    __name: "SkSelectSeparator",
+    setup(__props) {
+      return (_ctx, _cache) => {
+        return vue.openBlock(), vue.createBlock(vue.unref(SelectSeparator_default), { class: "sk-select-separator" });
+      };
+    }
+  });
+  const SkSelectSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-4f7c0be0"]]);
   const _hoisted_1$a = { class: "sk-panel-scroll-content" };
   const _hoisted_2$5 = { class: "sk-sidebar-nav" };
   const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
@@ -17623,25 +19330,43 @@ Defaulting to \`null\`.`);
     props: {
       kind: { default: "neutral" },
       width: { default: "180px" },
+      side: { default: "left" },
       baseColor: {},
       textColor: {}
     },
     setup(__props) {
       const props = __props;
+      const panelCorners = vue.computed(() => {
+        return props.side === "right" ? ["bottom-left"] : ["bottom-right"];
+      });
+      const panelDecorationCorner = vue.computed(() => {
+        return props.side === "right" ? "bottom-left" : "bottom-right";
+      });
       const classes = vue.computed(() => {
         return {
           "sk-sidebar": true,
-          [`sk-${props.kind}`]: true
+          [`sk-${props.kind}`]: true,
+          "sk-sidebar-right": props.side === "right"
         };
       });
+      const sidebarStyles = vue.computed(() => {
+        const styles = {};
+        if (props.baseColor) {
+          styles["--sk-sidebar-color-base"] = props.baseColor;
+        }
+        return styles;
+      });
       return (_ctx, _cache) => {
         return vue.openBlock(), vue.createElementBlock("aside", {
-          class: vue.normalizeClass(classes.value)
+          class: vue.normalizeClass(classes.value),
+          style: vue.normalizeStyle(sidebarStyles.value)
         }, [
           vue.createVNode(SkPanel, {
             kind: __props.kind,
             "base-color": __props.baseColor,
             "text-color": __props.textColor,
+            corners: panelCorners.value,
+            "decoration-corner": panelDecorationCorner.value,
             class: "sk-sidebar-panel"
           }, {
             default: vue.withCtx(() => [
@@ -17652,8 +19377,8 @@ Defaulting to \`null\`.`);
               ])
             ]),
             _: 3
-          }, 8, ["kind", "base-color", "text-color"])
-        ], 2);
+          }, 8, ["kind", "base-color", "text-color", "corners", "decoration-corner"])
+        ], 6);
       };
     }
   });
@@ -18954,28 +20679,28 @@ Defaulting to \`null\`.`);
     install(app) {
       app.component("SkAccordion", SkAccordion);
       app.component("SkAccordionItem", SkAccordionItem);
-      app.component("SkAlert", _sfc_main$P);
+      app.component("SkAlert", _sfc_main$S);
       app.component("SkAvatar", SkAvatar);
       app.component("SkBreadcrumbItem", SkBreadcrumbItem);
       app.component("SkBreadcrumbs", SkBreadcrumbs);
       app.component("SkBreadcrumbSeparator", SkBreadcrumbSeparator);
       app.component("SkButton", SkButton);
-      app.component("SkCard", _sfc_main$I);
+      app.component("SkCard", _sfc_main$L);
       app.component("SkCheckbox", SkCheckbox);
       app.component("SkCollapsible", SkCollapsible);
-      app.component("SkDivider", _sfc_main$F);
+      app.component("SkDivider", _sfc_main$I);
       app.component("SkDropdown", SkDropdown);
       app.component("SkDropdownMenuItem", SkDropdownMenuItem);
       app.component("SkDropdownMenuSeparator", SkDropdownMenuSeparator);
       app.component("SkDropdownSubmenu", SkDropdownSubmenu);
       app.component("SkField", SkField);
-      app.component("SkGroup", _sfc_main$z);
+      app.component("SkGroup", _sfc_main$C);
       app.component("SkInput", SkInput);
       app.component("SkListbox", SkListbox);
       app.component("SkListboxItem", SkListboxItem);
       app.component("SkListboxSeparator", SkListboxSeparator);
       app.component("SkModal", SkModal);
-      app.component("SkNavBar", _sfc_main$t);
+      app.component("SkNavBar", _sfc_main$w);
       app.component("SkNumberInput", SkNumberInput);
       app.component("SkPage", SkPage);
       app.component("SkPagination", SkPagination);
@@ -18985,6 +20710,9 @@ Defaulting to \`null\`.`);
       app.component("SkProgress", SkProgress);
       app.component("SkRadio", SkRadio);
       app.component("SkRadioGroup", SkRadioGroup);
+      app.component("SkSelect", SkSelect);
+      app.component("SkSelectItem", SkSelectItem);
+      app.component("SkSelectSeparator", SkSelectSeparator);
       app.component("SkSidebar", _sfc_main$k);
       app.component("SkSidebarItem", _sfc_main$j);
       app.component("SkSidebarSection", _sfc_main$i);
@@ -19009,28 +20737,28 @@ Defaulting to \`null\`.`);
   };
   exports2.SkAccordion = SkAccordion;
   exports2.SkAccordionItem = SkAccordionItem;
-  exports2.SkAlert = _sfc_main$P;
+  exports2.SkAlert = _sfc_main$S;
   exports2.SkAvatar = SkAvatar;
   exports2.SkBreadcrumbItem = SkBreadcrumbItem;
   exports2.SkBreadcrumbSeparator = SkBreadcrumbSeparator;
   exports2.SkBreadcrumbs = SkBreadcrumbs;
   exports2.SkButton = SkButton;
-  exports2.SkCard = _sfc_main$I;
+  exports2.SkCard = _sfc_main$L;
   exports2.SkCheckbox = SkCheckbox;
   exports2.SkCollapsible = SkCollapsible;
-  exports2.SkDivider = _sfc_main$F;
+  exports2.SkDivider = _sfc_main$I;
   exports2.SkDropdown = SkDropdown;
   exports2.SkDropdownMenuItem = SkDropdownMenuItem;
   exports2.SkDropdownMenuSeparator = SkDropdownMenuSeparator;
   exports2.SkDropdownSubmenu = SkDropdownSubmenu;
   exports2.SkField = SkField;
-  exports2.SkGroup = _sfc_main$z;
+  exports2.SkGroup = _sfc_main$C;
   exports2.SkInput = SkInput;
   exports2.SkListbox = SkListbox;
   exports2.SkListboxItem = SkListboxItem;
   exports2.SkListboxSeparator = SkListboxSeparator;
   exports2.SkModal = SkModal;
-  exports2.SkNavBar = _sfc_main$t;
+  exports2.SkNavBar = _sfc_main$w;
   exports2.SkNumberInput = SkNumberInput;
   exports2.SkPage = SkPage;
   exports2.SkPagination = SkPagination;
@@ -19040,6 +20768,9 @@ Defaulting to \`null\`.`);
   exports2.SkProgress = SkProgress;
   exports2.SkRadio = SkRadio;
   exports2.SkRadioGroup = SkRadioGroup;
+  exports2.SkSelect = SkSelect;
+  exports2.SkSelectItem = SkSelectItem;
+  exports2.SkSelectSeparator = SkSelectSeparator;
   exports2.SkSidebar = _sfc_main$k;
   exports2.SkSidebarItem = _sfc_main$j;
   exports2.SkSidebarSection = _sfc_main$i;