@skewedaspect/sleekspace-ui 0.5.1 → 0.6.0

package/dist/sleekspace-ui.es.js

@@ -1,5 +1,5 @@
 import * as vue from "vue";
-import { inject, provide, Fragment, toValue as toValue$2, shallowRef, readonly, watch, getCurrentScope, onScopeDispose, effectScope, computed, customRef, onBeforeUnmount, watchEffect, isRef, reactive, unref, toRefs, getCurrentInstance, ref, nextTick, onMounted, toHandlerKey, camelize, toRef, onUnmounted, defineComponent, h, Comment, mergeProps, cloneVNode, createBlock, openBlock, withCtx, renderSlot, createVNode, createCommentVNode, withKeys, normalizeStyle, Teleport, normalizeProps, guardReactiveProps, markRaw, createElementBlock, renderList, resolveDynamicComponent, withModifiers, watchPostEffect, shallowReadonly, mergeDefaults, watchSyncEffect, withMemo, createTextVNode, toDisplayString, toRaw, useSlots, toHandlers, normalizeClass, createElementVNode, useCssVars, mergeModels, useModel, withDirectives, vModelDynamic, Transition, vModelText } from "vue";
+import { inject, provide, Fragment, toValue as toValue$2, shallowRef, readonly, watch, getCurrentScope, onScopeDispose, effectScope, computed, customRef, onBeforeUnmount, watchEffect, isRef, reactive, unref, toRefs, getCurrentInstance, ref, nextTick, onMounted, toHandlerKey, camelize, toRef, onUnmounted, defineComponent, h, Comment, mergeProps, cloneVNode, createBlock, openBlock, withCtx, renderSlot, createVNode, createCommentVNode, withKeys, normalizeStyle, Teleport, normalizeProps, guardReactiveProps, markRaw, createElementBlock, renderList, resolveDynamicComponent, withModifiers, watchPostEffect, shallowReadonly, mergeDefaults, watchSyncEffect, withMemo, createTextVNode, toDisplayString, createElementVNode, toRaw, useSlots, toHandlers, normalizeClass, useCssVars, mergeModels, useModel, withDirectives, vModelDynamic, useTemplateRef, Transition, vModelText } from "vue";
 function serialize(o) {
   return typeof o == "string" ? `'${o}'` : new c().serialize(o);
 }
@@ -762,6 +762,44 @@ function useRafFn(fn, options = {}) {
 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 = computed(() => {
+    const _targets = toValue$2(target);
+    return Array.isArray(_targets) ? _targets.map((el) => unrefElement(el)) : [unrefElement(_targets)];
+  });
+  const stopWatch = 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";
@@ -2906,7 +2944,7 @@ var FocusScope_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ def
 });
 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",
@@ -2919,8 +2957,8 @@ const LAST_KEYS = [
 ];
 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"],
@@ -4246,7 +4284,7 @@ var PopperAnchor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ d
   }
 });
 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"
 };
@@ -4291,7 +4329,7 @@ var Arrow_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineCo
         viewBox: _ctx.asChild ? void 0 : "0 0 12 6",
         preserveAspectRatio: _ctx.asChild ? void 0 : "none"
       }), {
-        default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [!_ctx.rounded ? (openBlock(), createElementBlock("path", _hoisted_1$y)) : (openBlock(), createElementBlock("path", _hoisted_2$i))])]),
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [!_ctx.rounded ? (openBlock(), createElementBlock("path", _hoisted_1$C)) : (openBlock(), createElementBlock("path", _hoisted_2$i))])]),
         _: 3
       }, 16, [
         "width",
@@ -6475,12 +6513,12 @@ var ComboboxAnchor_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */
   }
 });
 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);
@@ -6574,7 +6612,7 @@ var ListboxRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
       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;
@@ -6582,7 +6620,7 @@ var ListboxRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
           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(() => {
@@ -6610,7 +6648,7 @@ var ListboxRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
     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);
@@ -6989,7 +7027,7 @@ var ListboxItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ de
     const { forwardRef, currentElement } = useForwardExpose();
     const rootContext = injectListboxRootContext();
     const isHighlighted = computed(() => currentElement.value === rootContext.highlightedElement.value);
-    const isSelected = computed(() => valueComparator(rootContext.modelValue.value, props.value, rootContext.by));
+    const isSelected = computed(() => valueComparator$1(rootContext.modelValue.value, props.value, rootContext.by));
     const disabled = computed(() => rootContext.disabled.value || props.disabled);
     async function handleSelect2(ev) {
       emits("select", ev);
@@ -8539,7 +8577,7 @@ var MenuItem_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defin
         onKeydown: _cache[2] || (_cache[2] = async (event) => {
           const isTypingAhead = unref(contentContext).searchRef.value !== "";
           if (_ctx.disabled || isTypingAhead && event.key === " ") return;
-          if (unref(SELECTION_KEYS).includes(event.key)) {
+          if (unref(SELECTION_KEYS$1).includes(event.key)) {
             event.currentTarget.click();
             event.preventDefault();
           }
@@ -11952,167 +11990,1626 @@ var RadioGroupIndicator_vue_vue_type_script_setup_true_lang_default = /* @__PURE
   }
 });
 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__ */ defineComponent({
-  __name: "SliderHorizontal",
+const [injectSelectRootContext, provideSelectRootContext] = createContext("SelectRoot");
+var SelectRoot_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ 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 } = toRefs(props);
-    const { forwardRef, currentElement: sliderElement } = useForwardExpose();
-    const rootContext = injectSliderRootContext();
-    const offsetPosition = ref();
-    const rectRef = ref();
-    const isSlidingFromLeft = 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 = computed(() => isSlidingFromLeft.value ? "left" : "right");
-    const endEdge = computed(() => isSlidingFromLeft.value ? "right" : "left");
-    const direction = computed(() => isSlidingFromLeft.value ? 1 : -1);
-    provideSliderOrientationContext({
-      startEdge,
-      endEdge,
-      direction,
-      size: "width"
+    const { required, disabled, multiple, dir: propDir } = 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 = ref();
+    const valueElement = ref();
+    const triggerPointerDownPosRef = ref({
+      x: 0,
+      y: 0
+    });
+    const isEmptyModelValue = 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 = ref(/* @__PURE__ */ new Set());
+    const nativeSelectKey = 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 openBlock(), createBlock(SliderImpl_default, {
-        ref: unref(forwardRef),
-        dir: unref(dir),
-        "data-orientation": "horizontal",
-        style: normalizeStyle({ ["--reka-slider-thumb-transform"]: !isSlidingFromLeft.value && 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 openBlock(), createBlock(unref(PopperRoot_default), null, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
+          modelValue: unref(modelValue),
+          open: unref(open)
+        }), unref(isFormControl) ? (openBlock(), createBlock(BubbleSelect_default, {
+          key: nativeSelectKey.value,
+          "aria-hidden": "true",
+          tabindex: "-1",
+          multiple: unref(multiple),
+          required: unref(required),
+          name: _ctx.name,
+          autocomplete: _ctx.autocomplete,
+          disabled: unref(disabled),
+          value: unref(modelValue)
+        }, {
+          default: withCtx(() => [unref(isNullish)(unref(modelValue)) ? (openBlock(), createElementBlock("option", _hoisted_1$B)) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(Fragment, null, renderList(Array.from(optionsSet.value), (option) => {
+            return openBlock(), createElementBlock("option", mergeProps({ key: option.value ?? "" }, { ref_for: true }, option), null, 16);
+          }), 128))]),
+          _: 1
+        }, 8, [
+          "multiple",
+          "required",
+          "name",
+          "autocomplete",
+          "disabled",
+          "value"
+        ])) : 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__ */ 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 = ref();
+    const rootContext = injectSelectRootContext();
+    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 openBlock(), createBlock(unref(VisuallyHidden_default), { "as-child": "" }, {
+        default: withCtx(() => [createElementVNode("select", mergeProps({
+          ref_key: "selectElement",
+          ref: selectElement
+        }, props, { onInput: handleInput }), [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__ */ 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 openBlock(), createBlock(unref(PopperContent_default), mergeProps(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: withCtx(() => [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__ */ 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 = ref();
+    useHideOthers(content);
+    const { search, handleTypeaheadSearch } = useTypeahead();
+    const viewport = ref();
+    const selectedItem = ref();
+    const selectedItemText = ref();
+    const isPositioned = ref(false);
+    const firstValidItemFoundRef = ref(false);
+    const firstSelectedItemInArrayFoundRef = ref(false);
+    function focusSelectedItem() {
+      if (selectedItem.value && content.value) focusFirst$1([selectedItem.value, content.value]);
+    }
+    watch(isPositioned, () => {
+      focusSelectedItem();
+    });
+    const { onOpenChange, triggerPointerDownPosRef } = rootContext;
+    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 = 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 openBlock(), createBlock(unref(CollectionSlot), null, {
+        default: withCtx(() => [createVNode(unref(FocusScope_default), {
+          "as-child": "",
+          onMountAutoFocus: _cache[6] || (_cache[6] = withModifiers(() => {
+          }, ["prevent"])),
+          onUnmountAutoFocus: _cache[7] || (_cache[7] = (event) => {
+            emits("closeAutoFocus", event);
+            if (event.defaultPrevented) return;
+            unref(rootContext).triggerElement.value?.focus({ preventScroll: true });
+            event.preventDefault();
+          })
+        }, {
+          default: withCtx(() => [createVNode(unref(DismissableLayer_default), {
+            "as-child": "",
+            "disable-outside-pointer-events": "",
+            onFocusOutside: _cache[2] || (_cache[2] = withModifiers(() => {
+            }, ["prevent"])),
+            onDismiss: _cache[3] || (_cache[3] = ($event) => unref(rootContext).onOpenChange(false)),
+            onEscapeKeyDown: _cache[4] || (_cache[4] = ($event) => emits("escapeKeyDown", $event)),
+            onPointerDownOutside: _cache[5] || (_cache[5] = ($event) => emits("pointerDownOutside", $event))
+          }, {
+            default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(_ctx.position === "popper" ? SelectPopperPosition_default : SelectItemAlignedPosition_default), mergeProps({
+              ..._ctx.$attrs,
+              ...unref(forwardedProps)
+            }, {
+              id: unref(rootContext).contentId,
+              ref: (vnode) => {
+                const el = 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": unref(rootContext).open.value ? "open" : "closed",
+              dir: unref(rootContext).dir.value,
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                outline: "none"
+              },
+              onContextmenu: _cache[0] || (_cache[0] = withModifiers(() => {
+              }, ["prevent"])),
+              onPlaced: _cache[1] || (_cache[1] = ($event) => isPositioned.value = true),
+              onKeydown: handleKeyDown
+            }), {
+              default: withCtx(() => [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__ */ 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 = ref(false);
+    const shouldRepositionRef = ref(true);
+    const contentWrapperElement = 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 = ref("");
+    onMounted(async () => {
+      await 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 openBlock(), createElementBlock("div", {
+        ref_key: "contentWrapperElement",
+        ref: contentWrapperElement,
+        style: normalizeStyle({
+          display: "flex",
+          flexDirection: "column",
+          position: "fixed",
+          zIndex: contentZIndex.value
+        })
+      }, [createVNode(unref(Primitive), mergeProps({
+        ref: unref(forwardRef),
+        style: {
+          boxSizing: "border-box",
+          maxHeight: "100%"
+        }
+      }, {
+        ..._ctx.$attrs,
+        ...props
+      }), {
+        default: withCtx(() => [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__ */ 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 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__ */ 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 = ref();
+    onMounted(() => {
+      fragment.value = new DocumentFragment();
+    });
+    const presenceRef = ref();
+    const present = computed(() => props.forceMount || rootContext.open.value);
+    const renderPresence = ref(present.value);
+    watch(present, () => {
+      setTimeout(() => renderPresence.value = present.value);
+    });
+    return (_ctx, _cache) => {
+      return present.value || renderPresence.value || presenceRef.value?.present ? (openBlock(), createBlock(unref(Presence_default), {
+        key: 0,
+        ref_key: "presenceRef",
+        ref: presenceRef,
+        present: present.value
+      }, {
+        default: withCtx(() => [createVNode(SelectContentImpl_default, normalizeProps(guardReactiveProps({
+          ...unref(forwarded),
+          ..._ctx.$attrs
+        })), {
+          default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+          _: 3
+        }, 16)]),
+        _: 3
+      }, 8, ["present"])) : fragment.value ? (openBlock(), createElementBlock("div", _hoisted_1$A, [(openBlock(), createBlock(Teleport, { to: fragment.value }, [createVNode(SelectProvider_default, { context: unref(rootContext) }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 8, ["context"])], 8, ["to"]))])) : 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__ */ 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 } = toRefs(props);
+    const rootContext = injectSelectRootContext();
+    const contentContext = injectSelectContentContext();
+    const { forwardRef, currentElement } = useForwardExpose();
+    const { CollectionItem } = useCollection();
+    const isSelected = computed(() => valueComparator(rootContext.modelValue?.value, props.value, rootContext.by));
+    const isFocused = ref(false);
+    const textValue = 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 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 nextTick();
+      if (event.defaultPrevented) return;
+      if (disabled.value) contentContext.onItemLeave?.();
+      else event.currentTarget?.focus({ preventScroll: true });
+    }
+    async function handlePointerLeave(event) {
+      await nextTick();
+      if (event.defaultPrevented) return;
+      if (event.currentTarget === getActiveElement()) contentContext.onItemLeave?.();
+    }
+    async function handleKeyDown(event) {
+      await 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.");
+    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 openBlock(), createBlock(unref(CollectionItem), { value: { textValue: textValue.value } }, {
+        default: withCtx(() => [createVNode(unref(Primitive), {
+          ref: unref(forwardRef),
+          role: "option",
+          "aria-labelledby": unref(textId),
+          "data-highlighted": isFocused.value ? "" : void 0,
+          "aria-selected": isSelected.value,
+          "data-state": isSelected.value ? "checked" : "unchecked",
+          "aria-disabled": unref(disabled) || void 0,
+          "data-disabled": unref(disabled) ? "" : void 0,
+          tabindex: 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] = withModifiers(() => {
+          }, ["prevent", "stop"])),
+          onPointermove: handlePointerMove,
+          onPointerleave: handlePointerLeave,
+          onKeydown: handleKeyDown
+        }, {
+          default: withCtx(() => [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__ */ 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 unref(itemContext).isSelected.value ? (openBlock(), createBlock(unref(Primitive), mergeProps({
+        key: 0,
+        "aria-hidden": "true"
+      }, props), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16)) : 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__ */ 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 = computed(() => {
+      return {
+        value: itemContext.value,
+        disabled: itemContext.disabled.value,
+        textContent: itemTextElement.value?.textContent ?? itemContext.value?.toString() ?? ""
+      };
+    });
+    onMounted(() => {
+      if (!itemTextElement.value) return;
+      itemContext.onItemTextChange(itemTextElement.value);
+      contentContext.itemTextRefCallback(itemTextElement.value, itemContext.value, itemContext.disabled.value);
+      rootContext.onOptionAdd(optionProps.value);
+    });
+    onUnmounted(() => {
+      rootContext.onOptionRemove(optionProps.value);
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), mergeProps({
+        id: unref(itemContext).textId,
+        ref: unref(forwardRef)
+      }, {
+        ...props,
+        ..._ctx.$attrs
+      }), {
+        default: withCtx(() => [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__ */ 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 openBlock(), createBlock(unref(Teleport_default), normalizeProps(guardReactiveProps(props)), {
+        default: withCtx(() => [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__ */ defineComponent({
+  __name: "SelectSeparator",
+  props: {
+    asChild: {
+      type: Boolean,
+      required: false
+    },
+    as: {
+      type: null,
+      required: false
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), mergeProps({ "aria-hidden": "true" }, props), {
+        default: withCtx(() => [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__ */ 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 = computed(() => rootContext.disabled?.value || props.disabled);
+    rootContext.contentId ||= useId(void 0, "reka-select-content");
+    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 openBlock(), createBlock(unref(PopperAnchor_default), {
+        "as-child": "",
+        reference: _ctx.reference
+      }, {
+        default: withCtx(() => [createVNode(unref(Primitive), {
+          ref: unref(forwardRef),
+          role: "combobox",
+          type: _ctx.as === "button" ? "button" : void 0,
+          "aria-controls": unref(rootContext).contentId,
+          "aria-expanded": unref(rootContext).open.value || false,
+          "aria-required": unref(rootContext).required?.value,
+          "aria-autocomplete": "none",
+          disabled: isDisabled.value,
+          dir: unref(rootContext)?.dir.value,
+          "data-state": unref(rootContext)?.open.value ? "open" : "closed",
+          "data-disabled": isDisabled.value ? "" : void 0,
+          "data-placeholder": unref(shouldShowPlaceholder)(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] = withModifiers((event) => {
+            if (event.pointerType === "touch") handlePointerOpen(event);
+          }, ["prevent"])),
+          onKeydown: _cache[3] || (_cache[3] = (event) => {
+            const isTypingAhead = unref(search) !== "";
+            const isModifierKey = event.ctrlKey || event.altKey || event.metaKey;
+            if (!isModifierKey && event.key.length === 1) {
+              if (isTypingAhead && event.key === " ") return;
+            }
+            unref(handleTypeaheadSearch)(event.key, unref(getItems)());
+            if (unref(OPEN_KEYS).includes(event.key)) {
+              handleOpen();
+              event.preventDefault();
+            }
+          })
+        }, {
+          default: withCtx(() => [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__ */ 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();
+    onMounted(() => {
+      rootContext.valueElement = currentElement;
+    });
+    const selectedLabel = 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 = computed(() => {
+      return selectedLabel.value.length ? selectedLabel.value.join(", ") : props.placeholder;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(Primitive), {
+        ref: unref(forwardRef),
+        as: _ctx.as,
+        "as-child": _ctx.asChild,
+        style: { pointerEvents: "none" },
+        "data-placeholder": selectedLabel.value.length ? void 0 : props.placeholder
+      }, {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default", {
+          selectedLabel: selectedLabel.value,
+          modelValue: unref(rootContext).modelValue.value
+        }, () => [createTextVNode(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__ */ 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 } = toRefs(props);
+    const nonce = useNonce(propNonce);
+    const contentContext = injectSelectContentContext();
+    const alignedPositionContext = contentContext.position === "item-aligned" ? injectSelectItemAlignedPositionContext() : void 0;
+    const { forwardRef, currentElement } = useForwardExpose();
+    onMounted(() => {
+      contentContext?.onViewportChange(currentElement.value);
+    });
+    const prevScrollTopRef = 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 openBlock(), createElementBlock(Fragment, null, [createVNode(unref(Primitive), mergeProps({
+        ref: unref(forwardRef),
+        "data-reka-select-viewport": "",
+        role: "presentation"
+      }, {
+        ..._ctx.$attrs,
+        ...props
+      }, {
+        style: {
+          position: "relative",
+          flex: 1,
+          overflow: "hidden auto"
+        },
+        onScroll: handleScroll
+      }), {
+        default: withCtx(() => [renderSlot(_ctx.$slots, "default")]),
+        _: 3
+      }, 16), createVNode(unref(Primitive), {
+        as: "style",
+        nonce: unref(nonce)
+      }, {
+        default: withCtx(() => _cache[0] || (_cache[0] = [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__ */ 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 } = toRefs(props);
+    const { forwardRef, currentElement: sliderElement } = useForwardExpose();
+    const rootContext = injectSliderRootContext();
+    const offsetPosition = ref();
+    const rectRef = ref();
+    const isSlidingFromLeft = 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 = computed(() => isSlidingFromLeft.value ? "left" : "right");
+    const endEdge = computed(() => isSlidingFromLeft.value ? "right" : "left");
+    const direction = computed(() => isSlidingFromLeft.value ? 1 : -1);
+    provideSliderOrientationContext({
+      startEdge,
+      endEdge,
+      direction,
+      size: "width"
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(SliderImpl_default, {
+        ref: unref(forwardRef),
+        dir: unref(dir),
+        "data-orientation": "horizontal",
+        style: normalizeStyle({ ["--reka-slider-thumb-transform"]: !isSlidingFromLeft.value && 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");
         }),
@@ -15071,7 +16568,7 @@ function useCustomColors(componentName, baseColor, textColor) {
     return styles;
   });
 }
-const _sfc_main$R = /* @__PURE__ */ defineComponent({
+const _sfc_main$U = /* @__PURE__ */ defineComponent({
   __name: "SkAccordion",
   props: {
     type: { default: "single" },
@@ -15127,9 +16624,9 @@ const _export_sfc = (sfc, props) => {
   }
   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__ */ 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__ */ defineComponent({
   __name: "SkAccordionItem",
   props: {
     value: {},
@@ -15192,7 +16689,7 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
           }),
           createVNode(unref(AccordionContent_default), { class: "sk-accordion-content" }, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$x, [
+              createElementVNode("div", _hoisted_1$z, [
                 renderSlot(_ctx.$slots, "default", {}, void 0, true)
               ])
             ]),
@@ -15204,8 +16701,8 @@ const _sfc_main$Q = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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"
 };
@@ -15238,7 +16735,7 @@ const _hoisted_5$6 = {
   "stroke-width": "2"
 };
 const _hoisted_6$4 = { class: "sk-alert-content" };
-const _sfc_main$P = /* @__PURE__ */ defineComponent({
+const _sfc_main$S = /* @__PURE__ */ defineComponent({
   __name: "SkAlert",
   props: {
     kind: { default: "info" },
@@ -15277,7 +16774,7 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(unref(customColorStyles)),
         role: "alert"
       }, [
-        shouldShowIcon.value ? (openBlock(), createElementBlock("div", _hoisted_1$w, [
+        shouldShowIcon.value ? (openBlock(), createElementBlock("div", _hoisted_1$y, [
           renderSlot(_ctx.$slots, "icon", {}, () => [
             __props.kind === "info" ? (openBlock(), createElementBlock("svg", _hoisted_2$h, [..._cache[0] || (_cache[0] = [
               createElementVNode("circle", {
@@ -15342,12 +16839,12 @@ const _sfc_main$P = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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__ */ defineComponent({
+const _sfc_main$R = /* @__PURE__ */ defineComponent({
   __name: "SkAvatar",
   props: {
     src: { default: void 0 },
@@ -15396,7 +16893,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
           alt: __props.alt,
           class: "sk-avatar-image",
           onError: handleImageError
-        }, null, 40, _hoisted_1$v)) : __props.initials ? (openBlock(), createElementBlock("span", _hoisted_2$g, toDisplayString(displayInitials.value), 1)) : renderSlot(_ctx.$slots, "icon", { key: 2 }, () => [
+        }, null, 40, _hoisted_1$x)) : __props.initials ? (openBlock(), createElementBlock("span", _hoisted_2$g, toDisplayString(displayInitials.value), 1)) : renderSlot(_ctx.$slots, "icon", { key: 2 }, () => [
           _cache[0] || (_cache[0] = createElementVNode("svg", {
             class: "sk-avatar-icon",
             viewBox: "0 0 24 24",
@@ -15409,7 +16906,7 @@ const _sfc_main$O = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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
@@ -15585,8 +17082,8 @@ function getOriginalPath(record) {
   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__ */ defineComponent({
+const _hoisted_1$w = { class: "sk-breadcrumb-item" };
+const _sfc_main$Q = /* @__PURE__ */ defineComponent({
   __name: "SkBreadcrumbItem",
   props: {
     to: { default: void 0 },
@@ -15614,7 +17111,7 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
       [`sk-${kind}`]: true
     }));
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("li", _hoisted_1$u, [
+      return openBlock(), createElementBlock("li", _hoisted_1$w, [
         (openBlock(), createBlock(resolveDynamicComponent(componentTag.value), {
           class: normalizeClass(linkClasses.value),
           to: __props.to,
@@ -15632,12 +17129,12 @@ const _sfc_main$N = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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__ */ defineComponent({
+const _sfc_main$P = /* @__PURE__ */ defineComponent({
   __name: "SkBreadcrumbSeparator",
   props: {
     separator: { default: void 0 }
@@ -15647,13 +17144,13 @@ const _sfc_main$M = /* @__PURE__ */ defineComponent({
     const parentSeparator = inject("breadcrumbs-separator", "/");
     const displaySeparator = computed(() => props.separator ?? parentSeparator);
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", _hoisted_1$t, toDisplayString(displaySeparator.value), 1);
+      return openBlock(), createElementBlock("span", _hoisted_1$v, 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__ */ 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__ */ defineComponent({
   __name: "SkBreadcrumbs",
   props: {
     kind: { default: "neutral" },
@@ -15691,7 +17188,7 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
         style: normalizeStyle(unref(customColorStyles)),
         "aria-label": "Breadcrumb"
       }, [
-        createElementVNode("ol", _hoisted_1$s, [
+        createElementVNode("ol", _hoisted_1$u, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(processedItems.value, (item, index) => {
             return openBlock(), createElementBlock(Fragment, { key: index }, [
               (openBlock(), createBlock(resolveDynamicComponent(item))),
@@ -15703,8 +17200,8 @@ const _sfc_main$L = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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"
@@ -15725,7 +17222,7 @@ const _hoisted_5$5 = {
   key: 3,
   class: "sk-button-icon sk-button-icon-trailing"
 };
-const _sfc_main$K = /* @__PURE__ */ defineComponent({
+const _sfc_main$N = /* @__PURE__ */ defineComponent({
   __name: "SkButton",
   props: {
     type: { default: "button" },
@@ -15782,7 +17279,7 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
         role: "button"
       }, {
         default: withCtx(() => [
-          __props.loading ? (openBlock(), createElementBlock("span", _hoisted_1$r)) : createCommentVNode("", true),
+          __props.loading ? (openBlock(), createElementBlock("span", _hoisted_1$t)) : createCommentVNode("", true),
           createElementVNode("span", {
             class: normalizeClass({ "sk-button-content": true, "loading": __props.loading })
           }, [
@@ -15805,20 +17302,22 @@ const _sfc_main$K = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SkButton = /* @__PURE__ */ _export_sfc(_sfc_main$K, [["__scopeId", "data-v-543676d6"]]);
-const _sfc_main$J = /* @__PURE__ */ defineComponent({
+const SkButton = /* @__PURE__ */ _export_sfc(_sfc_main$N, [["__scopeId", "data-v-543676d6"]]);
+const _sfc_main$M = /* @__PURE__ */ 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) {
     useCssVars((_ctx) => ({
-      "v29b35e9c": decorationDisplay.value
+      "v42b18398": decorationDisplay.value
     }));
     const props = __props;
     const classes = computed(() => {
@@ -15826,7 +17325,12 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
         "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(
@@ -15835,10 +17339,13 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
       toRef(() => props.textColor)
     );
     const decorationDisplay = 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 openBlock(), createElementBlock("div", {
@@ -15850,8 +17357,8 @@ const _sfc_main$J = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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"
 };
@@ -15863,7 +17370,7 @@ const _hoisted_3$b = {
   key: 3,
   class: "sk-card-footer"
 };
-const _sfc_main$I = /* @__PURE__ */ defineComponent({
+const _sfc_main$L = /* @__PURE__ */ defineComponent({
   __name: "SkCard",
   props: {
     kind: { default: "neutral" },
@@ -15874,6 +17381,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
     title: { default: void 0 },
     headerColor: { default: void 0 },
     scrollable: { type: Boolean, default: false },
+    corners: { default: () => ["bottom-right"] },
+    decorationCorner: { default: "bottom-right" },
     baseColor: {},
     textColor: {}
   },
@@ -15917,6 +17426,8 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
         "no-border": __props.noBorder,
         "base-color": __props.baseColor,
         "text-color": __props.textColor,
+        corners: __props.corners,
+        "decoration-corner": __props.decorationCorner,
         class: normalizeClass(classes.value)
       }, {
         default: withCtx(() => [
@@ -15925,7 +17436,7 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
             class: "sk-card-header",
             style: normalizeStyle(headerStyles.value)
           }, [
-            __props.title ? (openBlock(), createElementBlock("h3", _hoisted_1$q, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+            __props.title ? (openBlock(), createElementBlock("h3", _hoisted_1$s, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
             renderSlot(_ctx.$slots, "header")
           ], 4)) : createCommentVNode("", true),
           _ctx.$slots.media ? (openBlock(), createElementBlock("div", _hoisted_2$e, [
@@ -15942,11 +17453,11 @@ const _sfc_main$I = /* @__PURE__ */ defineComponent({
           ])) : 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",
@@ -15971,7 +17482,7 @@ const _hoisted_3$a = {
   key: 0,
   class: "sk-checkbox-label"
 };
-const _sfc_main$H = /* @__PURE__ */ defineComponent({
+const _sfc_main$K = /* @__PURE__ */ defineComponent({
   __name: "SkCheckbox",
   props: /* @__PURE__ */ mergeModels({
     kind: { default: "neutral" },
@@ -16020,7 +17531,7 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
           default: withCtx(() => [
             createVNode(unref(CheckboxIndicator_default), { class: "sk-checkbox-indicator" }, {
               default: withCtx(() => [
-                checked.value === true ? (openBlock(), createElementBlock("svg", _hoisted_1$p, [..._cache[1] || (_cache[1] = [
+                checked.value === true ? (openBlock(), createElementBlock("svg", _hoisted_1$r, [..._cache[1] || (_cache[1] = [
                   createElementVNode("polyline", { points: "20 6 9 17 4 12" }, null, -1)
                 ])])) : checked.value === "indeterminate" ? (openBlock(), createElementBlock("svg", _hoisted_2$d, [..._cache[2] || (_cache[2] = [
                   createElementVNode("line", {
@@ -16045,9 +17556,9 @@ const _sfc_main$H = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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__ */ 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__ */ defineComponent({
   __name: "SkCollapsible",
   props: {
     open: { type: Boolean, default: void 0 },
@@ -16125,7 +17636,7 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
           }),
           createVNode(unref(CollapsibleContent_default), { class: "sk-collapsible-content" }, {
             default: withCtx(() => [
-              createElementVNode("div", _hoisted_1$o, [
+              createElementVNode("div", _hoisted_1$q, [
                 renderSlot(_ctx.$slots, "default", {}, void 0, true)
               ])
             ]),
@@ -16137,9 +17648,9 @@ const _sfc_main$G = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SkCollapsible = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-dc60530b"]]);
-const _hoisted_1$n = ["aria-orientation"];
-const _sfc_main$F = /* @__PURE__ */ defineComponent({
+const SkCollapsible = /* @__PURE__ */ _export_sfc(_sfc_main$J, [["__scopeId", "data-v-dc60530b"]]);
+const _hoisted_1$p = ["aria-orientation"];
+const _sfc_main$I = /* @__PURE__ */ defineComponent({
   __name: "SkDivider",
   props: {
     orientation: { default: "horizontal" },
@@ -16163,7 +17674,7 @@ const _sfc_main$F = /* @__PURE__ */ defineComponent({
         class: normalizeClass(classes.value),
         role: "separator",
         "aria-orientation": __props.orientation
-      }, null, 10, _hoisted_1$n);
+      }, null, 10, _hoisted_1$p);
     };
   }
 });
@@ -16174,7 +17685,7 @@ function usePortalContext() {
     theme: currentTheme
   };
 }
-const _hoisted_1$m = {
+const _hoisted_1$o = {
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 24 24",
   fill: "none",
@@ -16185,7 +17696,7 @@ const _hoisted_1$m = {
   style: { "width": "1rem", "height": "1rem" }
 };
 const _hoisted_2$c = ["points"];
-const _sfc_main$E = /* @__PURE__ */ defineComponent({
+const _sfc_main$H = /* @__PURE__ */ defineComponent({
   __name: "SkDropdown",
   props: {
     kind: { default: "neutral" },
@@ -16233,7 +17744,7 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "trigger", {}, () => [
                 createVNode(SkButton, { kind: __props.kind }, {
                   trailing: withCtx(() => [
-                    (openBlock(), createElementBlock("svg", _hoisted_1$m, [
+                    (openBlock(), createElementBlock("svg", _hoisted_1$o, [
                       createElementVNode("polyline", { points: caretPoints.value }, null, 8, _hoisted_2$c)
                     ]))
                   ]),
@@ -16270,8 +17781,8 @@ const _sfc_main$E = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SkDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$E, [["__scopeId", "data-v-a5cb1061"]]);
-const _sfc_main$D = /* @__PURE__ */ defineComponent({
+const SkDropdown = /* @__PURE__ */ _export_sfc(_sfc_main$H, [["__scopeId", "data-v-a5cb1061"]]);
+const _sfc_main$G = /* @__PURE__ */ defineComponent({
   __name: "SkDropdownMenuItem",
   props: {
     disabled: { type: Boolean, default: false }
@@ -16295,8 +17806,8 @@ const _sfc_main$D = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SkDropdownMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-63d43580"]]);
-const _sfc_main$C = /* @__PURE__ */ defineComponent({
+const SkDropdownMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main$G, [["__scopeId", "data-v-63d43580"]]);
+const _sfc_main$F = /* @__PURE__ */ defineComponent({
   __name: "SkDropdownMenuSeparator",
   setup(__props) {
     return (_ctx, _cache) => {
@@ -16304,8 +17815,8 @@ const _sfc_main$C = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SkDropdownMenuSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$C, [["__scopeId", "data-v-8d03fb68"]]);
-const _sfc_main$B = /* @__PURE__ */ defineComponent({
+const SkDropdownMenuSeparator = /* @__PURE__ */ _export_sfc(_sfc_main$F, [["__scopeId", "data-v-8d03fb68"]]);
+const _sfc_main$E = /* @__PURE__ */ defineComponent({
   __name: "SkDropdownSubmenu",
   props: {
     triggerText: {},
@@ -16366,8 +17877,8 @@ const _sfc_main$B = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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"
@@ -16375,7 +17886,7 @@ const _hoisted_2$b = {
 const _hoisted_3$9 = { class: "sk-field-input-wrapper" };
 const _hoisted_4$7 = ["id"];
 const _hoisted_5$4 = ["id"];
-const _sfc_main$A = /* @__PURE__ */ defineComponent({
+const _sfc_main$D = /* @__PURE__ */ defineComponent({
   __name: "SkField",
   props: {
     label: { default: void 0 },
@@ -16431,7 +17942,7 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
         }, [
           createTextVNode(toDisplayString(__props.label) + " ", 1),
           __props.required ? (openBlock(), createElementBlock("span", _hoisted_2$b, "*")) : createCommentVNode("", true)
-        ], 8, _hoisted_1$l)) : createCommentVNode("", true),
+        ], 8, _hoisted_1$n)) : createCommentVNode("", true),
         createElementVNode("div", _hoisted_3$9, [
           renderSlot(_ctx.$slots, "default", {
             id: fieldId.value,
@@ -16454,8 +17965,8 @@ const _sfc_main$A = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SkField = /* @__PURE__ */ _export_sfc(_sfc_main$A, [["__scopeId", "data-v-e19bf08c"]]);
-const _sfc_main$z = /* @__PURE__ */ defineComponent({
+const SkField = /* @__PURE__ */ _export_sfc(_sfc_main$D, [["__scopeId", "data-v-e19bf08c"]]);
+const _sfc_main$C = /* @__PURE__ */ defineComponent({
   __name: "SkGroup",
   props: {
     orientation: { default: "horizontal" }
@@ -16477,8 +17988,8 @@ const _sfc_main$z = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$k = ["type", "disabled", "readonly", "placeholder", "required", "name", "autocomplete"];
-const _sfc_main$y = /* @__PURE__ */ defineComponent({
+const _hoisted_1$m = ["type", "disabled", "readonly", "placeholder", "required", "name", "autocomplete"];
+const _sfc_main$B = /* @__PURE__ */ defineComponent({
   __name: "SkInput",
   props: /* @__PURE__ */ mergeModels({
     type: { default: "text" },
@@ -16525,14 +18036,14 @@ const _sfc_main$y = /* @__PURE__ */ defineComponent({
         required: __props.required,
         name: __props.name,
         autocomplete: __props.autocomplete
-      }, _ctx.$attrs), null, 16, _hoisted_1$k)), [
+      }, _ctx.$attrs), null, 16, _hoisted_1$m)), [
         [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",
@@ -16542,7 +18053,7 @@ const _hoisted_1$j = {
   "stroke-linejoin": "miter",
   style: { "width": "1rem", "height": "1rem" }
 };
-const _sfc_main$x = /* @__PURE__ */ defineComponent({
+const _sfc_main$A = /* @__PURE__ */ defineComponent({
   __name: "SkListbox",
   props: /* @__PURE__ */ mergeModels({
     kind: { default: void 0 },
@@ -16606,7 +18117,7 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
                 class: normalizeClass(triggerClasses.value)
               }, {
                 default: withCtx(() => [
-                  (openBlock(), createElementBlock("svg", _hoisted_1$j, [..._cache[1] || (_cache[1] = [
+                  (openBlock(), createElementBlock("svg", _hoisted_1$l, [..._cache[1] || (_cache[1] = [
                     createElementVNode("polyline", { points: "6 9 12 15 18 9" }, null, -1)
                   ])]))
                 ]),
@@ -16645,8 +18156,8 @@ const _sfc_main$x = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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",
@@ -16656,7 +18167,7 @@ const _hoisted_1$i = {
   "stroke-linejoin": "miter",
   style: { "width": "1rem", "height": "1rem" }
 };
-const _sfc_main$w = /* @__PURE__ */ defineComponent({
+const _sfc_main$z = /* @__PURE__ */ defineComponent({
   __name: "SkListboxItem",
   props: {
     value: {},
@@ -16676,7 +18187,7 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
           renderSlot(_ctx.$slots, "default", {}, void 0, true),
           createVNode(unref(ComboboxItemIndicator_default), { class: "sk-listbox-item-indicator" }, {
             default: withCtx(() => [
-              (openBlock(), createElementBlock("svg", _hoisted_1$i, [..._cache[0] || (_cache[0] = [
+              (openBlock(), createElementBlock("svg", _hoisted_1$k, [..._cache[0] || (_cache[0] = [
                 createElementVNode("polyline", { points: "20 6 9 17 4 12" }, null, -1)
               ])]))
             ]),
@@ -16688,8 +18199,8 @@ const _sfc_main$w = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SkListboxItem = /* @__PURE__ */ _export_sfc(_sfc_main$w, [["__scopeId", "data-v-fcf3fe85"]]);
-const _sfc_main$v = /* @__PURE__ */ defineComponent({
+const SkListboxItem = /* @__PURE__ */ _export_sfc(_sfc_main$z, [["__scopeId", "data-v-fcf3fe85"]]);
+const _sfc_main$y = /* @__PURE__ */ defineComponent({
   __name: "SkListboxSeparator",
   setup(__props) {
     return (_ctx, _cache) => {
@@ -16697,8 +18208,8 @@ const _sfc_main$v = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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"
 };
@@ -16707,7 +18218,7 @@ const _hoisted_3$8 = {
   key: 1,
   class: "sk-modal-footer"
 };
-const _sfc_main$u = /* @__PURE__ */ defineComponent({
+const _sfc_main$x = /* @__PURE__ */ defineComponent({
   __name: "SkModal",
   props: {
     kind: { default: "neutral" },
@@ -16798,7 +18309,7 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
                 onInteractOutside: handleOverlayClick
               }, {
                 default: withCtx(() => [
-                  _ctx.$slots.title || __props.title ? (openBlock(), createElementBlock("div", _hoisted_1$h, [
+                  _ctx.$slots.title || __props.title ? (openBlock(), createElementBlock("div", _hoisted_1$j, [
                     createVNode(unref(DialogTitle_default), { class: "sk-modal-title" }, {
                       default: withCtx(() => [
                         renderSlot(_ctx.$slots, "title", { close }, () => [
@@ -16845,8 +18356,8 @@ const _sfc_main$u = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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"
@@ -16859,7 +18370,7 @@ const _hoisted_4$6 = {
   key: 2,
   class: "sk-navbar-actions"
 };
-const _sfc_main$t = /* @__PURE__ */ defineComponent({
+const _sfc_main$w = /* @__PURE__ */ defineComponent({
   __name: "SkNavBar",
   props: {
     kind: { default: "neutral" },
@@ -16887,7 +18398,7 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
         class: normalizeClass(classes.value),
         style: normalizeStyle(unref(customColorStyles))
       }, [
-        createElementVNode("div", _hoisted_1$g, [
+        createElementVNode("div", _hoisted_1$i, [
           unref(slots).brand ? (openBlock(), createElementBlock("div", _hoisted_2$9, [
             renderSlot(_ctx.$slots, "brand")
           ])) : createCommentVNode("", true),
@@ -16902,8 +18413,8 @@ const _sfc_main$t = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$f = { class: "sk-number-input-steppers" };
-const _sfc_main$s = /* @__PURE__ */ defineComponent({
+const _hoisted_1$h = { class: "sk-number-input-steppers" };
+const _sfc_main$v = /* @__PURE__ */ defineComponent({
   __name: "SkNumberInput",
   props: /* @__PURE__ */ mergeModels({
     kind: { default: void 0 },
@@ -16966,7 +18477,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
               class: normalizeClass(inputClasses.value),
               placeholder: __props.placeholder
             }, null, 8, ["class", "placeholder"]),
-            createElementVNode("div", _hoisted_1$f, [
+            createElementVNode("div", _hoisted_1$h, [
               createVNode(unref(NumberFieldIncrement_default), { class: "sk-number-input-increment" }, {
                 default: withCtx(() => [..._cache[1] || (_cache[1] = [
                   createElementVNode("svg", {
@@ -17007,7 +18518,7 @@ const _sfc_main$s = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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 = ref(initialTheme);
@@ -17028,7 +18539,7 @@ function useTheme() {
   }
   return context2;
 }
-const _hoisted_1$e = ["data-scheme"];
+const _hoisted_1$g = ["data-scheme"];
 const _hoisted_2$8 = {
   key: 0,
   class: "sk-page-header"
@@ -17043,7 +18554,7 @@ const _hoisted_6$3 = {
   key: 1,
   class: "sk-page-footer"
 };
-const _sfc_main$r = /* @__PURE__ */ defineComponent({
+const _sfc_main$u = /* @__PURE__ */ defineComponent({
   __name: "SkPage",
   props: {
     sidebarPosition: { default: "left" },
@@ -17097,19 +18608,19 @@ const _sfc_main$r = /* @__PURE__ */ defineComponent({
         _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_6$3, [
           renderSlot(_ctx.$slots, "footer", {}, void 0, true)
         ])) : 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__ */ defineComponent({
+const _sfc_main$t = /* @__PURE__ */ defineComponent({
   __name: "SkPaginationItem",
   props: {
     page: { default: void 0 },
@@ -17168,12 +18679,12 @@ const _sfc_main$q = /* @__PURE__ */ defineComponent({
         onClick: handleClick
       }, [
         __props.type === "prev" ? (openBlock(), createElementBlock("span", _hoisted_2$7, "‹")) : __props.type === "next" ? (openBlock(), createElementBlock("span", _hoisted_3$5, "›")) : __props.type === "first" ? (openBlock(), createElementBlock("span", _hoisted_4$4, "‹‹")) : __props.type === "last" ? (openBlock(), createElementBlock("span", _hoisted_5$2, "››")) : __props.type === "ellipsis" ? (openBlock(), createElementBlock("span", _hoisted_6$2, "...")) : (openBlock(), createElementBlock("span", _hoisted_7, 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__ */ defineComponent({
+const SkPaginationItem = /* @__PURE__ */ _export_sfc(_sfc_main$t, [["__scopeId", "data-v-1eea3ced"]]);
+const _sfc_main$s = /* @__PURE__ */ defineComponent({
   __name: "SkPagination",
   props: {
     total: {},
@@ -17287,8 +18798,8 @@ const _sfc_main$p = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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"
 };
@@ -17304,7 +18815,7 @@ const _hoisted_4$3 = {
   key: 2,
   class: "sk-popover-footer"
 };
-const _sfc_main$o = /* @__PURE__ */ defineComponent({
+const _sfc_main$r = /* @__PURE__ */ defineComponent({
   __name: "SkPopover",
   props: {
     kind: { default: "neutral" },
@@ -17360,7 +18871,7 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
                 "collision-padding": 8
               }, {
                 default: withCtx(() => [
-                  __props.title || _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_1$c, [
+                  __props.title || _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_1$e, [
                     __props.title ? (openBlock(), createElementBlock("h3", _hoisted_2$6, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
                     renderSlot(_ctx.$slots, "header", {}, void 0, true),
                     __props.closable ? (openBlock(), createBlock(unref(PopoverClose_default), {
@@ -17419,8 +18930,8 @@ const _sfc_main$o = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SkPopover = /* @__PURE__ */ _export_sfc(_sfc_main$o, [["__scopeId", "data-v-679c4935"]]);
-const _sfc_main$n = /* @__PURE__ */ defineComponent({
+const SkPopover = /* @__PURE__ */ _export_sfc(_sfc_main$r, [["__scopeId", "data-v-679c4935"]]);
+const _sfc_main$q = /* @__PURE__ */ defineComponent({
   __name: "SkProgress",
   props: {
     value: { default: null },
@@ -17493,12 +19004,12 @@ const _sfc_main$n = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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__ */ defineComponent({
+const _sfc_main$p = /* @__PURE__ */ defineComponent({
   __name: "SkRadio",
   props: {
     value: {},
@@ -17544,7 +19055,7 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
           ]),
           _: 1
         }, 8, ["class", "style", "value", "disabled"]),
-        __props.label || _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_1$b, [
+        __props.label || _ctx.$slots.default ? (openBlock(), createElementBlock("span", _hoisted_1$d, [
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(toDisplayString(__props.label), 1)
           ], true)
@@ -17553,8 +19064,8 @@ const _sfc_main$m = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const SkRadio = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-c88f9c3f"]]);
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const SkRadio = /* @__PURE__ */ _export_sfc(_sfc_main$p, [["__scopeId", "data-v-c88f9c3f"]]);
+const _sfc_main$o = /* @__PURE__ */ defineComponent({
   __name: "SkRadioGroup",
   props: /* @__PURE__ */ mergeModels({
     orientation: { default: "vertical" },
@@ -17596,7 +19107,203 @@ const _sfc_main$l = /* @__PURE__ */ defineComponent({
     };
   }
 });
-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__ */ defineComponent({
+  __name: "SkSelect",
+  props: /* @__PURE__ */ 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 = useModel(__props, "modelValue");
+    const { theme } = usePortalContext();
+    const fieldKind = inject("field-kind", computed(() => void 0));
+    const itemLabels = reactive(/* @__PURE__ */ new Map());
+    provide("sk-select-register", (value, label) => {
+      itemLabels.set(value, label);
+    });
+    provide("sk-select-unregister", (value) => {
+      itemLabels.delete(value);
+    });
+    const displayText = computed(() => {
+      if (!modelValue.value) {
+        return "";
+      }
+      return itemLabels.get(modelValue.value) || modelValue.value;
+    });
+    const effectiveKind = computed(() => fieldKind.value || props.kind || "neutral");
+    const wrapperClasses = computed(() => ({
+      "sk-select": true,
+      [`sk-${effectiveKind.value}`]: true,
+      [`sk-${props.size}`]: true
+    }));
+    const triggerClasses = computed(() => ({
+      "sk-select-trigger": true
+    }));
+    const contentClasses = computed(() => ({
+      "sk-select-content": true,
+      [`sk-${effectiveKind.value}`]: true
+    }));
+    const customColorStyles = useCustomColors(
+      "select",
+      toRef(() => props.baseColor),
+      toRef(() => props.textColor)
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(wrapperClasses.value),
+        style: normalizeStyle(unref(customColorStyles))
+      }, [
+        createVNode(unref(SelectRoot_default), {
+          modelValue: modelValue.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => modelValue.value = $event),
+          disabled: __props.disabled
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(SelectTrigger_default), {
+              class: normalizeClass(triggerClasses.value)
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(SelectValue_default), { placeholder: __props.placeholder }, {
+                  default: withCtx(() => [
+                    displayText.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+                      createTextVNode(toDisplayString(displayText.value), 1)
+                    ], 64)) : createCommentVNode("", true)
+                  ]),
+                  _: 1
+                }, 8, ["placeholder"]),
+                (openBlock(), createElementBlock("svg", _hoisted_1$c, [..._cache[1] || (_cache[1] = [
+                  createElementVNode("polyline", { points: "6 9 12 15 18 9" }, null, -1)
+                ])]))
+              ]),
+              _: 1
+            }, 8, ["class"]),
+            createVNode(unref(SelectPortal_default), null, {
+              default: withCtx(() => [
+                createVNode(unref(SelectContent_default), {
+                  "data-scheme": unref(theme),
+                  class: normalizeClass(contentClasses.value),
+                  style: normalizeStyle(unref(customColorStyles)),
+                  position: "popper",
+                  side: "bottom",
+                  align: "start",
+                  "side-offset": 4
+                }, {
+                  default: withCtx(() => [
+                    createVNode(unref(SelectViewport_default), null, {
+                      default: withCtx(() => [
+                        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__ */ defineComponent({
+  __name: "SkSelectItem",
+  props: {
+    value: {},
+    disabled: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const textEl = useTemplateRef("textEl");
+    const register = inject("sk-select-register", void 0);
+    const unregister = inject("sk-select-unregister", void 0);
+    onMounted(() => {
+      const el = textEl.value?.$el;
+      if (register) {
+        register(props.value, el?.textContent?.trim() || props.value);
+      }
+    });
+    onUnmounted(() => {
+      if (unregister) {
+        unregister(props.value);
+      }
+    });
+    const classes = computed(() => ({
+      "sk-select-item": true
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(SelectItem_default), {
+        class: normalizeClass(classes.value),
+        value: __props.value,
+        disabled: __props.disabled
+      }, {
+        default: withCtx(() => [
+          createVNode(unref(SelectItemText_default), {
+            ref_key: "textEl",
+            ref: textEl
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, void 0, true)
+            ]),
+            _: 3
+          }, 512),
+          createVNode(unref(SelectItemIndicator_default), { class: "sk-select-item-indicator" }, {
+            default: withCtx(() => [
+              (openBlock(), createElementBlock("svg", _hoisted_1$b, [..._cache[0] || (_cache[0] = [
+                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__ */ defineComponent({
+  __name: "SkSelectSeparator",
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(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__ */ defineComponent({
@@ -17604,25 +19311,43 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
   props: {
     kind: { default: "neutral" },
     width: { default: "180px" },
+    side: { default: "left" },
     baseColor: {},
     textColor: {}
   },
   setup(__props) {
     const props = __props;
+    const panelCorners = computed(() => {
+      return props.side === "right" ? ["bottom-left"] : ["bottom-right"];
+    });
+    const panelDecorationCorner = computed(() => {
+      return props.side === "right" ? "bottom-left" : "bottom-right";
+    });
     const classes = computed(() => {
       return {
         "sk-sidebar": true,
-        [`sk-${props.kind}`]: true
+        [`sk-${props.kind}`]: true,
+        "sk-sidebar-right": props.side === "right"
       };
     });
+    const sidebarStyles = computed(() => {
+      const styles = {};
+      if (props.baseColor) {
+        styles["--sk-sidebar-color-base"] = props.baseColor;
+      }
+      return styles;
+    });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("aside", {
-        class: normalizeClass(classes.value)
+        class: normalizeClass(classes.value),
+        style: normalizeStyle(sidebarStyles.value)
       }, [
         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: withCtx(() => [
@@ -17633,8 +19358,8 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             ])
           ]),
           _: 3
-        }, 8, ["kind", "base-color", "text-color"])
-      ], 2);
+        }, 8, ["kind", "base-color", "text-color", "corners", "decoration-corner"])
+      ], 6);
     };
   }
 });
@@ -18935,28 +20660,28 @@ const SleekSpaceUI = {
   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);
@@ -18966,6 +20691,9 @@ const SleekSpaceUI = {
     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);
@@ -18991,28 +20719,28 @@ const SleekSpaceUI = {
 export {
   SkAccordion,
   SkAccordionItem,
-  _sfc_main$P as SkAlert,
+  _sfc_main$S as SkAlert,
   SkAvatar,
   SkBreadcrumbItem,
   SkBreadcrumbSeparator,
   SkBreadcrumbs,
   SkButton,
-  _sfc_main$I as SkCard,
+  _sfc_main$L as SkCard,
   SkCheckbox,
   SkCollapsible,
-  _sfc_main$F as SkDivider,
+  _sfc_main$I as SkDivider,
   SkDropdown,
   SkDropdownMenuItem,
   SkDropdownMenuSeparator,
   SkDropdownSubmenu,
   SkField,
-  _sfc_main$z as SkGroup,
+  _sfc_main$C as SkGroup,
   SkInput,
   SkListbox,
   SkListboxItem,
   SkListboxSeparator,
   SkModal,
-  _sfc_main$t as SkNavBar,
+  _sfc_main$w as SkNavBar,
   SkNumberInput,
   SkPage,
   SkPagination,
@@ -19022,6 +20750,9 @@ export {
   SkProgress,
   SkRadio,
   SkRadioGroup,
+  SkSelect,
+  SkSelectItem,
+  SkSelectSeparator,
   _sfc_main$k as SkSidebar,
   _sfc_main$j as SkSidebarItem,
   _sfc_main$i as SkSidebarSection,