@soybeanjs/headless 0.18.0 → 0.20.0

package/dist/components/color-slider/types.d.ts

@@ -1,14 +1,14 @@
+import { ColorChannel, ColorFormat, ColorSpace, ColorValue, NormalizedColor } from "../../types/color.js";
 import { DataOrientation, Direction, UiClass } from "../../types/common.js";
 import { FormFieldCommonProps } from "../../types/component.js";
-import { PrimitiveProps } from "../primitive/types.js";
-import { ColorChannel, ColorFormat, ColorSpace, ColorValue, NormalizedColor } from "../../shared/color.js";
-import { ComputedRef, HTMLAttributes } from "vue";
+import { PrimitiveWithBaseProps } from "../primitive/types.js";
+import { ComputedRef } from "vue";
 
 //#region src/components/color-slider/types.d.ts
 /**
  * Properties for the ColorSliderRoot component.
  */
-interface ColorSliderRootProps extends PrimitiveProps, FormFieldCommonProps, /** @vue-ignore */HTMLAttributes {
+interface ColorSliderRootProps extends FormFieldCommonProps, Omit<PrimitiveWithBaseProps, 'onChange'> {
   /**
    * Current model value.
    */
@@ -74,11 +74,28 @@ type ColorSliderRootEmits = {
 /**
  * Properties for the ColorSliderTrack component.
  */
-interface ColorSliderTrackProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
+interface ColorSliderTrackProps extends PrimitiveWithBaseProps {}
 /**
  * Properties for the ColorSliderThumb component.
  */
-interface ColorSliderThumbProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {}
+interface ColorSliderThumbProps extends PrimitiveWithBaseProps {}
+/**
+ * Properties for the ColorSliderCompact component.
+ */
+interface ColorSliderCompactProps extends ColorSliderRootProps {
+  /**
+   * Properties forwarded to the track element.
+   */
+  trackProps?: ColorSliderTrackProps;
+  /**
+   * Properties forwarded to the thumb element.
+   */
+  thumbProps?: ColorSliderThumbProps;
+}
+/**
+ * Events for the ColorSliderCompact component.
+ */
+type ColorSliderCompactEmits = ColorSliderRootEmits;
 /**
  * Available UI slots for the ColorSlider component.
  */
@@ -88,4 +105,4 @@ type ColorSliderUiSlot = 'root' | 'track' | 'thumb';
  */
 type ColorSliderUi = UiClass<ColorSliderUiSlot>;
 //#endregion
-export { ColorSliderRootEmits, ColorSliderRootProps, ColorSliderThumbProps, ColorSliderTrackProps, ColorSliderUi, ColorSliderUiSlot };
+export { ColorSliderCompactEmits, ColorSliderCompactProps, ColorSliderRootEmits, ColorSliderRootProps, ColorSliderThumbProps, ColorSliderTrackProps, ColorSliderUi, ColorSliderUiSlot };

package/dist/components/color-swatch/color-swatch-checker.js

@@ -0,0 +1 @@
+import{useColorSwatchUi as e}from"./context.js";import{createElementBlock as t,defineComponent as n,normalizeClass as r,openBlock as i,unref as a}from"vue";const o=n({name:`ColorSwatchChecker`,__name:`color-swatch-checker`,setup(n){let o=e(`checker`);return(e,n)=>(i(),t(`span`,{"data-soybean-color-swatch-checker":``,class:r(a(o))},null,2))}});export{o as default};

package/dist/components/color-swatch/color-swatch-checker.vue.d.ts

@@ -0,0 +1,8 @@
+import { ColorSwatchCheckerProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/color-swatch/color-swatch-checker.vue.d.ts
+declare const __VLS_export: _$vue.DefineComponent<ColorSwatchCheckerProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ColorSwatchCheckerProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };

package/dist/components/color-swatch/color-swatch-compact.js

@@ -0,0 +1 @@
+import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import t from"./color-swatch-root.js";import n from"./color-swatch-checker.js";import r from"./color-swatch-fill.js";import{createBlock as i,createVNode as a,defineComponent as o,guardReactiveProps as s,normalizeProps as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=o({name:`ColorSwatchCompact`,__name:`color-swatch-compact`,props:{checkerProps:{},fillProps:{},color:{},label:{},asChild:{type:Boolean},as:{}},setup(o){let p=e(o,[`checkerProps`,`fillProps`]);return(e,m)=>(l(),i(t,c(s(d(p))),{default:f(t=>[a(n,c(s(o.checkerProps)),null,16),a(r,c(s(o.fillProps)),null,16),u(e.$slots,`default`,c(s(t)))]),_:3},16))}});export{p as default};

package/dist/components/color-swatch/color-swatch-compact.vue.d.ts

@@ -0,0 +1,15 @@
+import { ColorSwatchCompactProps, ColorSwatchCompactSlots } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/color-swatch/color-swatch-compact.vue.d.ts
+type __VLS_Slots = ColorSwatchCompactSlots;
+declare const __VLS_base: _$vue.DefineComponent<ColorSwatchCompactProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ColorSwatchCompactProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/color-swatch/color-swatch-fill.js

@@ -0,0 +1 @@
+import{useColorSwatchUi as e}from"./context.js";import{createElementBlock as t,defineComponent as n,normalizeClass as r,openBlock as i,unref as a}from"vue";const o=n({name:`ColorSwatchFill`,__name:`color-swatch-fill`,setup(n){let o=e(`fill`);return(e,n)=>(i(),t(`span`,{"data-soybean-color-swatch-fill":``,class:r(a(o))},null,2))}});export{o as default};

package/dist/components/color-swatch/color-swatch-fill.vue.d.ts

@@ -0,0 +1,8 @@
+import { ColorSwatchFillProps } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/color-swatch/color-swatch-fill.vue.d.ts
+declare const __VLS_export: _$vue.DefineComponent<ColorSwatchFillProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ColorSwatchFillProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+//#endregion
+export { _default };

package/dist/components/color-swatch/color-swatch-root.js

@@ -0,0 +1 @@
+import{formatColor as e,getColorContrast as t,getColorLabel as n,toColorObject as r}from"../../shared/color.js";import"../../shared/index.js";import{Primitive as i}from"../primitive/primitive.js";import"../primitive/index.js";import{useColorSwatchUi as a}from"./context.js";import{computed as o,createBlock as s,defineComponent as c,normalizeClass as l,normalizeStyle as u,openBlock as d,renderSlot as f,unref as p,withCtx as m}from"vue";const h=c({name:`ColorSwatchRoot`,__name:`color-swatch-root`,props:{color:{},label:{},asChild:{type:Boolean},as:{}},setup(c){let h=c,g=a(`root`),_=o(()=>h.color?e(h.color,`rgb`):`transparent`),v=o(()=>r(h.color,`rgb`)),y=o(()=>v.value.alpha),b=o(()=>!h.color||y.value<=0),x=o(()=>n(h.color,h.label)),S=o(()=>t(h.color));return(e,t)=>(d(),s(p(i),{as:c.as,"as-child":c.asChild,"data-soybean-color-swatch-root":``,class:l(p(g)),role:`img`,"aria-label":x.value,"aria-roledescription":`color swatch`,"data-color-contrast":S.value,"data-no-color":b.value?``:void 0,style:u({"--soybean-color-swatch-color":_.value,"--soybean-color-swatch-alpha":String(y.value)})},{default:m(()=>[f(e.$slots,`default`,{color:_.value,alpha:y.value})]),_:3},8,[`as`,`as-child`,`class`,`aria-label`,`data-color-contrast`,`data-no-color`,`style`]))}});export{h as default};

package/dist/components/color-swatch/color-swatch-root.vue.d.ts

@@ -0,0 +1,15 @@
+import { ColorSwatchRootProps, ColorSwatchRootSlots } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/color-swatch/color-swatch-root.vue.d.ts
+type __VLS_Slots = ColorSwatchRootSlots;
+declare const __VLS_base: _$vue.DefineComponent<ColorSwatchRootProps, {}, {}, {}, {}, _$vue.ComponentOptionsMixin, _$vue.ComponentOptionsMixin, {}, string, _$vue.PublicProps, Readonly<ColorSwatchRootProps> & Readonly<{}>, {}, {}, {}, {}, string, _$vue.ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+type __VLS_WithSlots<T, S> = T & {
+  new (): {
+    $slots: S;
+  };
+};
+//#endregion
+export { _default };

package/dist/components/color-swatch/context.d.ts

@@ -0,0 +1,9 @@
+import { UiClass } from "../../types/common.js";
+import { UseUiConsumer } from "../../composables/use-ui-context.js";
+import { ColorSwatchUiSlot } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/color-swatch/context.d.ts
+declare const provideColorSwatchUi: (ui: _$vue.ComputedRef<Partial<UiClass<ColorSwatchUiSlot>>>) => _$vue.ComputedRef<Partial<UiClass<ColorSwatchUiSlot>>>, useColorSwatchUi: UseUiConsumer<ColorSwatchUiSlot>;
+//#endregion
+export { provideColorSwatchUi };

package/dist/components/color-swatch/context.js

@@ -0,0 +1 @@
+import{useUiContext as e}from"../../composables/use-ui-context.js";import"../../composables/index.js";const[t,n]=e(`ColorSwatch`);export{t as provideColorSwatchUi,n as useColorSwatchUi};

package/dist/components/color-swatch/index.d.ts

@@ -1,3 +1,7 @@
-import { ColorSwatchProps } from "./types.js";
-import { _default } from "./color-swatch.vue.js";
-export { _default as ColorSwatch, type ColorSwatchProps };
+import { ColorSwatchCheckerProps, ColorSwatchCompactProps, ColorSwatchCompactSlots, ColorSwatchFillProps, ColorSwatchRootProps, ColorSwatchRootSlots, ColorSwatchUi, ColorSwatchUiSlot } from "./types.js";
+import { _default as _default$1 } from "./color-swatch-compact.vue.js";
+import { _default as _default$3 } from "./color-swatch-root.vue.js";
+import { _default } from "./color-swatch-checker.vue.js";
+import { _default as _default$2 } from "./color-swatch-fill.vue.js";
+import { provideColorSwatchUi } from "./context.js";
+export { _default as ColorSwatchChecker, type ColorSwatchCheckerProps, _default$1 as ColorSwatchCompact, type ColorSwatchCompactProps, type ColorSwatchCompactSlots, _default$2 as ColorSwatchFill, type ColorSwatchFillProps, _default$3 as ColorSwatchRoot, type ColorSwatchRootProps, type ColorSwatchRootSlots, type ColorSwatchUi, type ColorSwatchUiSlot, provideColorSwatchUi };

package/dist/components/color-swatch/index.js

@@ -1 +1 @@
-import e from"./color-swatch.js";export{e as ColorSwatch};
+import{provideColorSwatchUi as e}from"./context.js";import t from"./color-swatch-root.js";import n from"./color-swatch-checker.js";import r from"./color-swatch-fill.js";import i from"./color-swatch-compact.js";export{n as ColorSwatchChecker,i as ColorSwatchCompact,r as ColorSwatchFill,t as ColorSwatchRoot,e as provideColorSwatchUi};

package/dist/components/color-swatch/types.d.ts

@@ -1,12 +1,13 @@
-import { PrimitiveProps } from "../primitive/types.js";
-import { ColorValue } from "../../shared/color.js";
-import { HTMLAttributes } from "vue";
+import { ColorValue } from "../../types/color.js";
+import { UiClass } from "../../types/common.js";
+import { BaseProps } from "../../types/vue.js";
+import { PrimitiveWithBaseProps } from "../primitive/types.js";
 
 //#region src/components/color-swatch/types.d.ts
 /**
  * Properties for the ColorSwatch component.
  */
-interface ColorSwatchProps extends PrimitiveProps, /** @vue-ignore */Omit<HTMLAttributes, 'color'> {
+interface ColorSwatchRootProps extends Omit<PrimitiveWithBaseProps, 'color'> {
   /**
    * Theme color of the component.
    */
@@ -16,5 +17,57 @@ interface ColorSwatchProps extends PrimitiveProps, /** @vue-ignore */Omit<HTMLAt
    */
   label?: string;
 }
+/**
+ * Properties for the ColorSwatch component slots.
+ */
+interface ColorSwatchSlotProps {
+  /**
+   * Color value in RGB format, e.g., "rgb(255, 0, 0)".
+   */
+  color: string;
+  /**
+   * Alpha value of the color, ranging from 0 to 1.
+   */
+  alpha: number;
+}
+/**
+ * Slots for the ColorSwatch component.
+ */
+type ColorSwatchRootSlots = {
+  default?: (props: ColorSwatchSlotProps) => any;
+};
+/**
+ * Events for the ColorSwatch component.
+ */
+interface ColorSwatchCheckerProps extends BaseProps {}
+/**
+ * Events for the ColorSwatch component.
+ */
+interface ColorSwatchFillProps extends BaseProps {}
+/**
+ * Properties for the ColorSwatch component in compact mode.
+ */
+interface ColorSwatchCompactProps extends ColorSwatchRootProps {
+  /**
+   * Props for the checker element of the ColorSwatch component.
+   */
+  checkerProps?: ColorSwatchCheckerProps;
+  /**
+   * Props for the fill element of the ColorSwatch component.
+   */
+  fillProps?: ColorSwatchFillProps;
+}
+/**
+ * Slots for the ColorSwatch component in compact mode.
+ */
+type ColorSwatchCompactSlots = ColorSwatchRootSlots;
+/**
+ * Slots for the ColorSwatch component.
+ */
+type ColorSwatchUiSlot = 'root' | 'checker' | 'fill';
+/**
+ * UI classes for the ColorSwatch component.
+ */
+type ColorSwatchUi = UiClass<ColorSwatchUiSlot>;
 //#endregion
-export { ColorSwatchProps };
+export { ColorSwatchCheckerProps, ColorSwatchCompactProps, ColorSwatchCompactSlots, ColorSwatchFillProps, ColorSwatchRootProps, ColorSwatchRootSlots, ColorSwatchUi, ColorSwatchUiSlot };

package/dist/components/color-swatch-picker/color-swatch-picker-compact.js

@@ -0,0 +1 @@
+import{useForwardListeners as e}from"../../composables/use-forward-listeners.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import n from"../_icon/icon.js";import r from"./color-swatch-picker-item.js";import i from"./color-swatch-picker-item-indicator.js";import a from"./color-swatch-picker-item-swatch.js";import o from"./color-swatch-picker-root.js";import{Fragment as s,createBlock as c,createElementBlock as l,createVNode as u,defineComponent as d,mergeProps as f,normalizeProps as p,openBlock as m,renderList as h,renderSlot as g,toHandlers as _,unref as v,withCtx as y}from"vue";const b=d({name:`ColorSwatchPickerCompact`,__name:`color-swatch-picker-compact`,props:{colors:{},itemProps:{},indicatorProps:{},swatchProps:{},orientation:{},dir:{},disabled:{type:Boolean},highlightOnHover:{type:Boolean},modelValue:{},defaultValue:{},multiple:{},clearable:{type:Boolean},selectionBehavior:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`highlight`,`entryFocus`,`leave`,`select`],setup(d,{emit:b}){let x=d,S=b,C=t(x,[`colors`,`itemProps`,`indicatorProps`,`swatchProps`]),w=e(S);return(e,t)=>(m(),c(o,f(v(C),_(v(w))),{default:y(o=>[d.colors?.length?(m(!0),l(s,{key:0},h(d.colors,o=>(m(),c(r,f({key:o,value:o},{ref_for:!0},d.itemProps,{onSelect:t[0]||(t[0]=e=>S(`select`,e))}),{default:y(()=>[u(a,f({ref_for:!0},d.swatchProps),{default:y(()=>[g(e.$slots,`swatch`,{color:o})]),_:2},1040),u(i,f({ref_for:!0},d.indicatorProps),{default:y(()=>[g(e.$slots,`indicator`,{color:o},()=>[u(n,{icon:`lucide:check`})])]),_:2},1040)]),_:2},1040,[`value`]))),128)):g(e.$slots,`default`,p(f({key:1},o)))]),_:3},16))}});export{b as default};

package/dist/components/color-swatch-picker/color-swatch-picker-compact.vue.d.ts

@@ -0,0 +1,28 @@
+import { SelectEvent } from "../../types/event.js";
+import { CollectionItemData } from "../../composables/use-collection.js";
+import { ListboxCollectionItemData } from "../listbox/types.js";
+import { ColorSwatchPickerCompactProps, ColorSwatchPickerCompactSlots } from "./types.js";
+import * as _$vue from "vue";
+
+//#region src/components/color-swatch-picker/color-swatch-picker-compact.vue.d.ts
+declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+  props: _$vue.PublicProps & __VLS_PrettifyLocal<ColorSwatchPickerCompactProps<M> & {
+    onSelect?: ((event: SelectEvent<string>) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: M extends true ? string[] : string) => any) | undefined;
+    onEntryFocus?: ((event: CustomEvent<any>) => any) | undefined;
+    onHighlight?: ((payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => any) | undefined;
+    onLeave?: ((event: Event) => any) | undefined;
+  }> & (typeof globalThis extends {
+    __VLS_PROPS_FALLBACK: infer P;
+  } ? P : {});
+  expose: (exposed: {}) => void;
+  attrs: any;
+  slots: ColorSwatchPickerCompactSlots<M>;
+  emit: ((evt: "select", event: SelectEvent<string>) => void) & ((evt: "update:modelValue", value: M extends true ? string[] : string) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "highlight", payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => void) & ((evt: "leave", event: Event) => void);
+}>) => _$vue.VNode & {
+  __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+type __VLS_PrettifyLocal<T> = (T extends any ? { [K in keyof T]: T[K] } : { [K in keyof T as K]: T[K] }) & {};
+//#endregion
+export { _default };

package/dist/components/color-swatch-picker/color-swatch-picker-item-indicator.js

@@ -1 +1 @@
-import e from"../listbox/listbox-item-indicator.js";import"../listbox/index.js";import{createBlock as t,defineComponent as n,openBlock as r,renderSlot as i,unref as a,withCtx as o}from"vue";const s=n({name:`ColorSwatchPickerItemIndicator`,__name:`color-swatch-picker-item-indicator`,props:{asChild:{type:Boolean},as:{}},setup(n){return(s,c)=>(r(),t(a(e),{as:n.as,"as-child":n.asChild},{default:o(()=>[i(s.$slots,`default`)]),_:3},8,[`as`,`as-child`]))}});export{s as default};
+import e from"../listbox/listbox-item-indicator.js";import"../listbox/index.js";import{createBlock as t,defineComponent as n,openBlock as r,renderSlot as i,unref as a,withCtx as o}from"vue";const s=n({name:`ColorSwatchPickerItemIndicator`,__name:`color-swatch-picker-item-indicator`,props:{asChild:{type:Boolean},as:{}},setup(n){return(s,c)=>(r(),t(a(e),{as:n.as,"as-child":n.asChild,"data-soybean-color-swatch-picker-item-indicator":``},{default:o(()=>[i(s.$slots,`default`)]),_:3},8,[`as`,`as-child`]))}});export{s as default};

package/dist/components/color-swatch-picker/color-swatch-picker-item-swatch.js

@@ -1 +1 @@
-import e from"../color-swatch/color-swatch.js";import"../color-swatch/index.js";import{useColorSwatchPickerItemContext as t,useColorSwatchPickerUi as n}from"./context.js";import{createBlock as r,defineComponent as i,normalizeClass as a,openBlock as o,renderSlot as s,unref as c,withCtx as l}from"vue";const u=i({name:`ColorSwatchPickerItemSwatch`,__name:`color-swatch-picker-item-swatch`,props:{label:{},asChild:{type:Boolean},as:{}},setup(i){let u=n(`swatch`),{color:d}=t(`ColorSwatchPickerItemSwatch`);return(t,n)=>(o(),r(c(e),{as:i.as,"as-child":i.asChild,class:a(c(u)),color:c(d),label:i.label},{default:l(()=>[s(t.$slots,`default`)]),_:3},8,[`as`,`as-child`,`class`,`color`,`label`]))}});export{u as default};
+import e from"../color-swatch/color-swatch-compact.js";import{useColorSwatchPickerItemContext as t}from"./context.js";import{createBlock as n,defineComponent as r,mergeProps as i,openBlock as a,renderSlot as o,unref as s,withCtx as c}from"vue";const l=r({name:`ColorSwatchPickerItemSwatch`,__name:`color-swatch-picker-item-swatch`,props:{checkerProps:{},fillProps:{},color:{},label:{},asChild:{type:Boolean},as:{}},setup(r){let l=r,{color:u}=t(`ColorSwatchPickerItemSwatch`);return(t,r)=>(a(),n(e,i(l,{"data-soybean-color-swatch-picker-item-swatch":``,color:s(u)}),{default:c(()=>[o(t.$slots,`default`)]),_:3},16,[`color`]))}});export{l as default};

package/dist/components/color-swatch-picker/color-swatch-picker-item.js

@@ -1 +1 @@
-import{getColorLabel as e}from"../../shared/color.js";import"../../shared/index.js";import t from"../listbox/listbox-item.js";import"../listbox/index.js";import{provideColorSwatchPickerItemContext as n}from"./context.js";import{computed as r,createBlock as i,defineComponent as a,normalizeStyle as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";const d=a({name:`ColorSwatchPickerItem`,__name:`color-swatch-picker-item`,props:{value:{},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`select`],setup(a,{emit:d}){let f=a,p=d,m=r(()=>f.value),h=r(()=>e(m.value));return n({color:m}),(e,n)=>(s(),i(l(t),{value:a.value,"aria-label":h.value,"data-color":a.value,style:o({"--soybean-color-swatch-picker-item-color":a.value}),onSelect:n[0]||(n[0]=e=>p(`select`,e))},{default:u(()=>[c(e.$slots,`default`)]),_:3},8,[`value`,`aria-label`,`data-color`,`style`]))}});export{d as default};
+import{getColorLabel as e}from"../../shared/color.js";import"../../shared/index.js";import t from"../listbox/listbox-item.js";import"../listbox/index.js";import{provideColorSwatchPickerItemContext as n}from"./context.js";import{computed as r,createBlock as i,defineComponent as a,normalizeStyle as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";const d=a({name:`ColorSwatchPickerItem`,__name:`color-swatch-picker-item`,props:{value:{},disabled:{type:Boolean},asChild:{type:Boolean},as:{}},emits:[`select`],setup(a,{emit:d}){let f=a,p=d,m=r(()=>f.value),h=r(()=>e(m.value));return n({color:m}),(e,n)=>(s(),i(l(t),{"data-soybean-color-swatch-picker-item":``,value:a.value,"aria-label":h.value,"data-color":a.value,style:o({"--soybean-color-swatch-picker-item-color":a.value}),onSelect:n[0]||(n[0]=e=>p(`select`,e))},{default:u(()=>[c(e.$slots,`default`)]),_:3},8,[`value`,`aria-label`,`data-color`,`style`]))}});export{d as default};

package/dist/components/color-swatch-picker/color-swatch-picker-root.js

@@ -1 +1 @@
-import{useControllableState as e}from"../../composables/use-controllable-state.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import n from"../listbox/listbox-root.js";import r from"../listbox/listbox-content.js";import"../listbox/index.js";import{createBlock as i,createVNode as a,defineComponent as o,isRef as s,mergeProps as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=o({name:`ColorSwatchPickerRoot`,__name:`color-swatch-picker-root`,props:{asChild:{type:Boolean},as:{default:`div`},orientation:{default:`horizontal`},dir:{default:`ltr`},disabled:{type:Boolean,default:!1},highlightOnHover:{type:Boolean},modelValue:{},defaultValue:{default:void 0},multiple:{},clearable:{type:Boolean},selectionBehavior:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`highlight`,`entryFocus`,`leave`],setup(o,{emit:p}){let m=o,h=p,g=e(()=>m.modelValue,e=>{h(`update:modelValue`,e)},m.defaultValue??(m.multiple?[]:void 0)),_=t(m,[`modelValue`,`defaultValue`,`class`]);return(e,t)=>(l(),i(d(n),c(d(_),{modelValue:d(g),"onUpdate:modelValue":t[0]||(t[0]=e=>s(g)?g.value=e:null),onHighlight:t[1]||(t[1]=e=>h(`highlight`,e)),onEntryFocus:t[2]||(t[2]=e=>h(`entryFocus`,e)),onLeave:t[3]||(t[3]=e=>h(`leave`,e))}),{default:f(()=>[a(d(r),{as:o.as,"as-child":o.asChild},{default:f(()=>[u(e.$slots,`default`,{modelValue:d(g)})]),_:3},8,[`as`,`as-child`])]),_:3},16,[`modelValue`]))}});export{p as default};
+import{useControllableState as e}from"../../composables/use-controllable-state.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import n from"../listbox/listbox-root.js";import r from"../listbox/listbox-content.js";import"../listbox/index.js";import{createBlock as i,createVNode as a,defineComponent as o,isRef as s,mergeProps as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=o({name:`ColorSwatchPickerRoot`,__name:`color-swatch-picker-root`,props:{orientation:{default:`horizontal`},dir:{},disabled:{type:Boolean,default:!1},highlightOnHover:{type:Boolean},modelValue:{},defaultValue:{default:void 0},multiple:{},clearable:{type:Boolean},selectionBehavior:{},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`highlight`,`entryFocus`,`leave`],setup(o,{emit:p}){let m=o,h=p,g=e(()=>m.modelValue,e=>{h(`update:modelValue`,e)},m.defaultValue??(m.multiple?[]:``)),_=t(m,[`modelValue`,`defaultValue`,`class`]);return(e,t)=>(l(),i(d(n),c(d(_),{modelValue:d(g),"onUpdate:modelValue":t[0]||(t[0]=e=>s(g)?g.value=e:null),"data-soybean-color-swatch-picker-root":``,onHighlight:t[1]||(t[1]=e=>h(`highlight`,e)),onEntryFocus:t[2]||(t[2]=e=>h(`entryFocus`,e)),onLeave:t[3]||(t[3]=e=>h(`leave`,e))}),{default:f(()=>[a(d(r),null,{default:f(()=>[u(e.$slots,`default`,{modelValue:d(g)})]),_:3})]),_:3},16,[`modelValue`]))}});export{p as default};

package/dist/components/color-swatch-picker/color-swatch-picker-root.vue.d.ts

@@ -17,7 +17,7 @@ declare const __VLS_export: <M extends boolean>(__VLS_props: NonNullable<Awaited
   attrs: any;
   slots: {
     default?: (props: {
-      modelValue: ((M extends true ? string[] : string) | undefined) & (M extends true ? string[] | undefined : string | undefined);
+      modelValue: ((M extends true ? string[] : string) | undefined) & Exclude<M extends true ? string[] : string, undefined>;
     }) => any;
   };
   emit: ((evt: "update:modelValue", value: M extends true ? string[] : string) => void) & ((evt: "entryFocus", event: CustomEvent<any>) => void) & ((evt: "highlight", payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => void) & ((evt: "leave", event: Event) => void);

package/dist/components/color-swatch-picker/context.js

@@ -1 +1 @@
-import{useContext as e}from"../../composables/use-context.js";import{useUiContext as t}from"../../composables/use-ui-context.js";import"../../composables/index.js";import{provideListboxUi as n}from"../listbox/context.js";import{computed as r}from"vue";const[i,a]=e(`ColorSwatchPickerItem`),[o,s]=t(`ColorSwatchPickerUi`,e=>(n(r(()=>({content:e.value.root,item:e.value.item,itemIndicator:e.value.itemIndicator}))),e));export{i as provideColorSwatchPickerItemContext,o as provideColorSwatchPickerUi,a as useColorSwatchPickerItemContext,s as useColorSwatchPickerUi};
+import{useContext as e}from"../../composables/use-context.js";import{useUiContext as t}from"../../composables/use-ui-context.js";import"../../composables/index.js";import{provideListboxUi as n}from"../listbox/context.js";import{provideColorSwatchUi as r}from"../color-swatch/context.js";import{computed as i}from"vue";const[a,o]=e(`ColorSwatchPickerItem`),[s,c]=t(`ColorSwatchPickerUi`,e=>{let t=i(()=>({content:e.value.root,item:e.value.item,itemIndicator:e.value.itemIndicator})),a=i(()=>({root:e.value.swatchRoot,checker:e.value.swatchChecker,fill:e.value.swatchFill}));return n(t),r(a),e});export{a as provideColorSwatchPickerItemContext,s as provideColorSwatchPickerUi,o as useColorSwatchPickerItemContext};

package/dist/components/color-swatch-picker/index.d.ts

@@ -1,7 +1,8 @@
-import { ColorSwatchPickerItemEmits, ColorSwatchPickerItemIndicatorProps, ColorSwatchPickerItemProps, ColorSwatchPickerItemSwatchProps, ColorSwatchPickerRootEmits, ColorSwatchPickerRootProps, ColorSwatchPickerUi, ColorSwatchPickerUiSlot } from "./types.js";
-import { _default as _default$3 } from "./color-swatch-picker-root.vue.js";
-import { _default } from "./color-swatch-picker-item.vue.js";
-import { _default as _default$1 } from "./color-swatch-picker-item-indicator.vue.js";
-import { _default as _default$2 } from "./color-swatch-picker-item-swatch.vue.js";
+import { ColorSwatchPickerCompactColorSlotProps, ColorSwatchPickerCompactEmits, ColorSwatchPickerCompactProps, ColorSwatchPickerCompactSlotProps, ColorSwatchPickerCompactSlots, ColorSwatchPickerItemEmits, ColorSwatchPickerItemIndicatorProps, ColorSwatchPickerItemProps, ColorSwatchPickerItemSwatchProps, ColorSwatchPickerRootEmits, ColorSwatchPickerRootProps, ColorSwatchPickerUi, ColorSwatchPickerUiSlot } from "./types.js";
+import { _default } from "./color-swatch-picker-compact.vue.js";
+import { _default as _default$4 } from "./color-swatch-picker-root.vue.js";
+import { _default as _default$1 } from "./color-swatch-picker-item.vue.js";
+import { _default as _default$2 } from "./color-swatch-picker-item-indicator.vue.js";
+import { _default as _default$3 } from "./color-swatch-picker-item-swatch.vue.js";
 import { provideColorSwatchPickerUi } from "./context.js";
-export { _default as ColorSwatchPickerItem, type ColorSwatchPickerItemEmits, _default$1 as ColorSwatchPickerItemIndicator, type ColorSwatchPickerItemIndicatorProps, type ColorSwatchPickerItemProps, _default$2 as ColorSwatchPickerItemSwatch, type ColorSwatchPickerItemSwatchProps, _default$3 as ColorSwatchPickerRoot, type ColorSwatchPickerRootEmits, type ColorSwatchPickerRootProps, type ColorSwatchPickerUi, type ColorSwatchPickerUiSlot, provideColorSwatchPickerUi };
+export { _default as ColorSwatchPickerCompact, type ColorSwatchPickerCompactColorSlotProps, type ColorSwatchPickerCompactEmits, type ColorSwatchPickerCompactProps, type ColorSwatchPickerCompactSlotProps, type ColorSwatchPickerCompactSlots, _default$1 as ColorSwatchPickerItem, type ColorSwatchPickerItemEmits, _default$2 as ColorSwatchPickerItemIndicator, type ColorSwatchPickerItemIndicatorProps, type ColorSwatchPickerItemProps, _default$3 as ColorSwatchPickerItemSwatch, type ColorSwatchPickerItemSwatchProps, _default$4 as ColorSwatchPickerRoot, type ColorSwatchPickerRootEmits, type ColorSwatchPickerRootProps, type ColorSwatchPickerUi, type ColorSwatchPickerUiSlot, provideColorSwatchPickerUi };

package/dist/components/color-swatch-picker/index.js

@@ -1 +1 @@
-import e from"./color-swatch-picker-root.js";import{provideColorSwatchPickerUi as t}from"./context.js";import n from"./color-swatch-picker-item.js";import r from"./color-swatch-picker-item-indicator.js";import i from"./color-swatch-picker-item-swatch.js";export{n as ColorSwatchPickerItem,r as ColorSwatchPickerItemIndicator,i as ColorSwatchPickerItemSwatch,e as ColorSwatchPickerRoot,t as provideColorSwatchPickerUi};
+import{provideColorSwatchPickerUi as e}from"./context.js";import t from"./color-swatch-picker-item.js";import n from"./color-swatch-picker-item-indicator.js";import r from"./color-swatch-picker-item-swatch.js";import i from"./color-swatch-picker-root.js";import a from"./color-swatch-picker-compact.js";export{a as ColorSwatchPickerCompact,t as ColorSwatchPickerItem,n as ColorSwatchPickerItemIndicator,r as ColorSwatchPickerItemSwatch,i as ColorSwatchPickerRoot,e as provideColorSwatchPickerUi};

package/dist/components/color-swatch-picker/types.d.ts

@@ -1,13 +1,13 @@
 import { UiClass } from "../../types/common.js";
-import { PrimitiveProps } from "../primitive/types.js";
 import { ListboxItemEmits, ListboxItemIndicatorProps, ListboxItemProps, ListboxRootEmits, ListboxRootProps } from "../listbox/types.js";
-import { ComputedRef, HTMLAttributes } from "vue";
+import { ColorSwatchCompactProps } from "../color-swatch/types.js";
+import { ComputedRef } from "vue";
 
 //#region src/components/color-swatch-picker/types.d.ts
 /**
  * Properties for the ColorSwatchPickerRoot component.
  */
-interface ColorSwatchPickerRootProps<M extends boolean = false> extends PrimitiveProps, ListboxRootProps<M> {}
+interface ColorSwatchPickerRootProps<M extends boolean = false> extends ListboxRootProps<M> {}
 /**
  * Events for the ColorSwatchPickerRoot component.
  */
@@ -27,19 +27,74 @@ interface ColorSwatchPickerItemIndicatorProps extends ListboxItemIndicatorProps
 /**
  * Properties for the ColorSwatchPickerItemSwatch component.
  */
-interface ColorSwatchPickerItemSwatchProps extends PrimitiveProps, /** @vue-ignore */HTMLAttributes {
+interface ColorSwatchPickerItemSwatchProps extends ColorSwatchCompactProps {}
+/**
+ * Slot properties for the ColorSwatchPickerCompact component.
+ */
+interface ColorSwatchPickerCompactSlotProps<M extends boolean = false> {
+  /**
+   * Current model value.
+   */
+  modelValue: M extends true ? string[] : string;
+}
+/**
+ * Slot properties for color-specific ColorSwatchPickerCompact slots.
+ */
+interface ColorSwatchPickerCompactColorSlotProps {
+  /**
+   * Current swatch color.
+   */
+  color: string;
+}
+/**
+ * Properties for the ColorSwatchPickerCompact component.
+ */
+interface ColorSwatchPickerCompactProps<M extends boolean = false> extends ColorSwatchPickerRootProps<M> {
+  /**
+   * Colors.
+   */
+  colors?: string[];
   /**
-   * Label text rendered by the component.
+   * Properties forwarded to the item element.
    */
-  label?: string;
+  itemProps?: Omit<ColorSwatchPickerItemProps, 'value'>;
+  /**
+   * Properties forwarded to the indicator element.
+   */
+  indicatorProps?: ColorSwatchPickerItemIndicatorProps;
+  /**
+   * Properties forwarded to the swatch element.
+   */
+  swatchProps?: ColorSwatchPickerItemSwatchProps;
 }
+/**
+ * Events for the ColorSwatchPickerCompact component.
+ */
+type ColorSwatchPickerCompactEmits<M extends boolean = false> = ColorSwatchPickerRootEmits<M> & ColorSwatchPickerItemEmits;
+/**
+ * Slots for the ColorSwatchPickerCompact component.
+ */
+type ColorSwatchPickerCompactSlots<M extends boolean = false> = {
+  /**
+   * Custom content rendered when colors are not provided.
+   */
+  default?: (props: ColorSwatchPickerCompactSlotProps<M>) => any;
+  /**
+   * Custom content rendered inside each swatch.
+   */
+  swatch?: (props: ColorSwatchPickerCompactColorSlotProps) => any;
+  /**
+   * Custom content rendered inside each indicator.
+   */
+  indicator?: (props: ColorSwatchPickerCompactColorSlotProps) => any;
+};
 /**
  * Available UI slots for the ColorSwatchPicker component.
  */
-type ColorSwatchPickerUiSlot = 'root' | 'item' | 'itemIndicator' | 'swatch';
+type ColorSwatchPickerUiSlot = 'root' | 'item' | 'itemIndicator' | 'swatchRoot' | 'swatchChecker' | 'swatchFill';
 /**
  * UI class overrides for the ColorSwatchPicker component.
  */
 type ColorSwatchPickerUi = UiClass<ColorSwatchPickerUiSlot>;
 //#endregion
-export { ColorSwatchPickerItemEmits, ColorSwatchPickerItemIndicatorProps, ColorSwatchPickerItemProps, ColorSwatchPickerItemSwatchProps, ColorSwatchPickerRootEmits, ColorSwatchPickerRootProps, ColorSwatchPickerUi, ColorSwatchPickerUiSlot };
+export { ColorSwatchPickerCompactColorSlotProps, ColorSwatchPickerCompactEmits, ColorSwatchPickerCompactProps, ColorSwatchPickerCompactSlotProps, ColorSwatchPickerCompactSlots, ColorSwatchPickerItemEmits, ColorSwatchPickerItemIndicatorProps, ColorSwatchPickerItemProps, ColorSwatchPickerItemSwatchProps, ColorSwatchPickerRootEmits, ColorSwatchPickerRootProps, ColorSwatchPickerUi, ColorSwatchPickerUiSlot };

package/dist/components/combobox/combobox-arrow.js

@@ -1 +1 @@
-import{useComboboxContentContext as e,useComboboxRootContext as t,useComboboxUi as n}from"./context.js";import r from"../popper/popper-arrow.js";import"../popper/index.js";import{computed as i,createBlock as a,createCommentVNode as o,defineComponent as s,normalizeClass as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=s({name:`ComboboxArrow`,__name:`combobox-arrow`,setup(s){let p=n(`arrow`),{open:m}=t(`ComboboxArrow`),{position:h}=e(`ComboboxArrow`),g=i(()=>m.value&&h.value===`popper`);return(e,t)=>g.value?(l(),a(d(r),{key:0,class:c(d(p)),"data-slot":`arrow`},{default:f(()=>[u(e.$slots,`default`)]),_:3},8,[`class`])):o(`v-if`,!0)}});export{p as default};
+import{useComboboxContentContext as e,useComboboxRootContext as t,useComboboxUi as n}from"./context.js";import r from"../popper/popper-arrow.js";import"../popper/index.js";import{computed as i,createBlock as a,createCommentVNode as o,defineComponent as s,normalizeClass as c,openBlock as l,renderSlot as u,unref as d,withCtx as f}from"vue";const p=s({name:`ComboboxArrow`,__name:`combobox-arrow`,setup(s){let p=n(`arrow`),{open:m}=t(`ComboboxArrow`),{position:h}=e(`ComboboxArrow`),g=i(()=>m.value&&h.value===`popper`);return(e,t)=>g.value?(l(),a(d(r),{key:0,"data-soybean-combobox-arrow":``,class:c(d(p))},{default:f(()=>[u(e.$slots,`default`)]),_:3},8,[`class`])):o(`v-if`,!0)}});export{p as default};

package/dist/components/combobox/combobox-cancel.js

@@ -1 +1 @@
-import{Primitive as e}from"../primitive/primitive.js";import"../primitive/index.js";import{useComboboxRootContext as t,useComboboxUi as n}from"./context.js";import{computed as r,createBlock as i,defineComponent as a,normalizeClass as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";const d=a({name:`ComboboxCancel`,__name:`combobox-cancel`,props:{disabled:{type:Boolean},asChild:{type:Boolean},as:{default:`button`}},setup(a){let d=a,f=n(`cancel`),{disabled:p,inputElement:m,filterSearch:h,resetModelValueOnClear:g,resetModelValue:_}=t(`ComboboxCancel`),v=r(()=>d.disabled||p.value||!1),y=r(()=>d.as===`button`?`button`:void 0),b=r(()=>v.value?-1:d.as===`button`?void 0:0),x=()=>{if(v.value)return;h.value=``;let e=m.value;e&&(e.value=``,e.dispatchEvent(new Event(`input`,{bubbles:!0})),e.dispatchEvent(new Event(`change`,{bubbles:!0})),e.focus()),g.value&&_()};return(t,n)=>(s(),i(l(e),{as:a.as,"as-child":a.asChild,class:o(l(f)),type:y.value,"aria-disabled":v.value||void 0,"data-disabled":v.value?``:void 0,disabled:v.value,tabindex:b.value,"data-slot":`cancel`,onClick:x},{default:u(()=>[c(t.$slots,`default`)]),_:3},8,[`as`,`as-child`,`class`,`type`,`aria-disabled`,`data-disabled`,`disabled`,`tabindex`]))}});export{d as default};
+import{Primitive as e}from"../primitive/primitive.js";import"../primitive/index.js";import{useComboboxRootContext as t,useComboboxUi as n}from"./context.js";import{computed as r,createBlock as i,defineComponent as a,normalizeClass as o,openBlock as s,renderSlot as c,unref as l,withCtx as u}from"vue";const d=a({name:`ComboboxCancel`,__name:`combobox-cancel`,props:{disabled:{type:Boolean},asChild:{type:Boolean},as:{default:`button`}},setup(a){let d=a,f=n(`cancel`),{disabled:p,inputElement:m,filterSearch:h,resetModelValueOnClear:g,resetModelValue:_}=t(`ComboboxCancel`),v=r(()=>d.disabled||p.value||!1),y=r(()=>d.as===`button`?`button`:void 0),b=r(()=>v.value?-1:d.as===`button`?void 0:0),x=()=>{if(v.value)return;h.value=``;let e=m.value;e&&(e.value=``,e.dispatchEvent(new Event(`input`,{bubbles:!0})),e.dispatchEvent(new Event(`change`,{bubbles:!0})),e.focus()),g.value&&_()};return(t,n)=>(s(),i(l(e),{as:a.as,"as-child":a.asChild,"data-soybean-combobox-cancel":``,class:o(l(f)),type:y.value,"aria-disabled":v.value||void 0,"data-disabled":v.value?``:void 0,disabled:v.value,tabindex:b.value,onClick:x},{default:u(()=>[c(t.$slots,`default`)]),_:3},8,[`as`,`as-child`,`class`,`type`,`aria-disabled`,`data-disabled`,`disabled`,`tabindex`]))}});export{d as default};

package/dist/components/combobox/combobox-compact.js

@@ -1 +1 @@
-import{useOmitProps as e}from"../../composables/use-props.js";import"../../composables/index.js";import t from"../_icon/icon.js";import n from"../popper/popper-anchor.js";import r from"../portal/portal.js";import i from"../listbox/listbox-group-label.js";import a from"../listbox/listbox-item-indicator.js";import o from"./combobox-cancel.js";import s from"./combobox-content.js";import c from"./combobox-empty.js";import l from"./combobox-group.js";import u from"./combobox-input.js";import d from"./combobox-item.js";import f from"./combobox-root.js";import p from"./combobox-separator.js";import m from"./combobox-trigger.js";import h from"./combobox-viewport.js";import{getDisplayValue as g,getSelectedLabels as _,isGroupOption as v}from"./shared.js";import{Fragment as y,computed as b,createBlock as x,createCommentVNode as S,createElementBlock as C,createTextVNode as w,createVNode as T,defineComponent as E,guardReactiveProps as D,mergeProps as O,normalizeClass as k,normalizeProps as A,openBlock as j,renderList as M,renderSlot as N,toDisplayString as P,unref as F,withCtx as I}from"vue";const L=E({name:`ComboboxCompact`,__name:`combobox-compact`,props:{items:{},placeholder:{},searchPlaceholder:{},clearLabel:{default:`Clear input`},emptyLabel:{default:`No results found.`},anchorProps:{},triggerProps:{},cancelProps:{},portalProps:{},contentProps:{},viewportProps:{},inputProps:{},emptyProps:{},groupProps:{},groupLabelProps:{},itemProps:{},itemIndicatorProps:{},separatorProps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},resetSearchTermOnBlur:{type:Boolean},resetSearchTermOnSelect:{type:Boolean},openOnFocus:{type:Boolean},openOnClick:{type:Boolean},ignoreFilter:{type:Boolean},resetModelValueOnClear:{type:Boolean},dir:{},disabled:{type:Boolean},highlightOnHover:{type:Boolean},modelValue:{},defaultValue:{},multiple:{},clearable:{type:Boolean,default:!0},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`highlight`,`update:open`,`escapeKeyDown`,`pointerDownOutside`,`focusOutside`,`interactOutside`,`openAutoFocus`,`closeAutoFocus`,`placed`,`select`],setup(E,{emit:L}){let R=E,z=L,B=e(R,[`items`,`placeholder`,`searchPlaceholder`,`clearLabel`,`emptyLabel`,`anchorProps`,`triggerProps`,`cancelProps`,`portalProps`,`contentProps`,`viewportProps`,`inputProps`,`emptyProps`,`groupProps`,`groupLabelProps`,`itemProps`,`itemIndicatorProps`,`separatorProps`]),V=e=>R.multiple?``:g(e,R.items),H=b(()=>R.inputProps?.controlProps?.[`aria-label`]??R.searchPlaceholder??R.placeholder??`Search`),U=b(()=>({...R.inputProps,displayValue:R.inputProps?.displayValue??V,controlProps:{...R.inputProps?.controlProps,"aria-label":H.value},placeholder:R.searchPlaceholder??R.inputProps?.placeholder,autofocus:R.inputProps?.autofocus??!0})),W=b(()=>({...R.viewportProps,"aria-label":R.viewportProps?.[`aria-label`]??R.placeholder??`Options`})),G=b(()=>({...R.anchorProps,asChild:R.anchorProps?.asChild??!0})),K=(e,t)=>v(e)?`group-${e.label}-${t}`:e.value,q=e=>_(e,R.items),J=e=>{let t=q(e);return t.length?t.join(`, `):R.placeholder},Y=e=>({...R.triggerProps,"aria-label":R.triggerProps?.[`aria-label`]??J(e),"data-placeholder":q(e).length?void 0:``});return(e,g)=>(j(),x(f,O(F(B),{onHighlight:g[7]||(g[7]=e=>z(`highlight`,e)),"onUpdate:modelValue":g[8]||(g[8]=e=>z(`update:modelValue`,e)),"onUpdate:open":g[9]||(g[9]=e=>z(`update:open`,e))}),{default:I(({modelValue:f})=>[T(n,A(D(G.value)),{default:I(()=>[T(m,A(D(Y(f))),{default:I(({triggerIconClass:n})=>[N(e.$slots,`trigger-leading`),N(e.$slots,`trigger-value`,{modelValue:f,selectedLabels:q(f),slotText:J(f)},()=>[w(P(J(f)),1)]),N(e.$slots,`trigger-trailing`),N(e.$slots,`trigger-icon`,{},()=>[T(t,{icon:`lucide:chevrons-up-down`,class:k(n)},null,8,[`class`])])]),_:2},1040)]),_:2},1040),T(r,A(D(E.portalProps)),{default:I(()=>[T(s,O(E.contentProps,{onCloseAutoFocus:g[2]||(g[2]=e=>z(`closeAutoFocus`,e)),onEscapeKeyDown:g[3]||(g[3]=e=>z(`escapeKeyDown`,e)),onPointerDownOutside:g[4]||(g[4]=e=>z(`pointerDownOutside`,e)),onFocusOutside:g[5]||(g[5]=e=>z(`focusOutside`,e)),onInteractOutside:g[6]||(g[6]=e=>z(`interactOutside`,e))}),{default:I(()=>[T(u,A(D(U.value)),{leading:I(n=>[N(e.$slots,`input-leading`,A(D(n)),()=>[T(t,{icon:`lucide:search`})])]),trailing:I(n=>[E.clearable?(j(),x(o,O({key:0},E.cancelProps,{"aria-label":E.clearLabel}),{default:I(()=>[T(t,{icon:`lucide:x`})]),_:1},16,[`aria-label`])):S(`v-if`,!0),N(e.$slots,`input-trailing`,A(D(n)))]),_:3},16),T(c,A(D(E.emptyProps)),{default:I(()=>[N(e.$slots,`empty`,{},()=>[w(P(E.emptyLabel),1)])]),_:3},16),T(h,A(D(W.value)),{default:I(()=>[(j(!0),C(y,null,M(E.items,(n,r)=>(j(),C(y,{key:K(n,r)},[F(v)(n)?(j(),C(y,{key:0},[n.separator?(j(),x(p,O({key:0,ref_for:!0},E.separatorProps),null,16)):S(`v-if`,!0),T(l,O({ref_for:!0},E.groupProps),{default:I(()=>[T(i,O({ref_for:!0},E.groupLabelProps),{default:I(()=>[N(e.$slots,`group-label`,{item:n},()=>[w(P(n.label),1)])]),_:2},1040),(j(!0),C(y,null,M(n.items,n=>(j(),C(y,{key:n.value},[n.separator?(j(),x(p,O({key:0,ref_for:!0},E.separatorProps),null,16)):S(`v-if`,!0),T(d,O({ref_for:!0},E.itemProps,{value:n.value,"text-value":n.textValue??n.label,disabled:n.disabled,onSelect:g[0]||(g[0]=e=>z(`select`,e))}),{default:I(()=>[N(e.$slots,`item-leading`,{item:n},()=>[n.icon?(j(),x(t,{key:0,icon:n.icon},null,8,[`icon`])):S(`v-if`,!0)]),N(e.$slots,`item-text`,{item:n},()=>[w(P(n.label),1)]),N(e.$slots,`item-trailing`,{item:n}),T(a,O({ref_for:!0},E.itemIndicatorProps),{default:I(()=>[N(e.$slots,`item-indicator`,{item:n},()=>[T(t,{icon:`lucide:check`})])]),_:2},1040)]),_:2},1040,[`value`,`text-value`,`disabled`])],64))),128))]),_:2},1040)],64)):(j(),C(y,{key:1},[n.separator?(j(),x(p,O({key:0,ref_for:!0},E.separatorProps),null,16)):S(`v-if`,!0),T(d,O({ref_for:!0},E.itemProps,{value:n.value,"text-value":n.textValue??n.label,disabled:n.disabled,onSelect:g[1]||(g[1]=e=>z(`select`,e))}),{default:I(()=>[N(e.$slots,`item-leading`,{item:n},()=>[n.icon?(j(),x(t,{key:0,icon:n.icon},null,8,[`icon`])):S(`v-if`,!0)]),N(e.$slots,`item-text`,{item:n},()=>[w(P(n.label),1)]),N(e.$slots,`item-trailing`,{item:n}),T(a,O({ref_for:!0},E.itemIndicatorProps),{default:I(()=>[N(e.$slots,`item-indicator`,{item:n},()=>[T(t,{icon:`lucide:check`})])]),_:2},1040)]),_:2},1040,[`value`,`text-value`,`disabled`])],64))],64))),128))]),_:3},16)]),_:3},16)]),_:3},16)]),_:3},16))}});export{L as default};
+import{useLocaleMessages as e}from"../../locale/hooks.js";import"../../locale/index.js";import{useOmitProps as t}from"../../composables/use-props.js";import"../../composables/index.js";import n from"../_icon/icon.js";import r from"../popper/popper-anchor.js";import i from"../portal/portal.js";import a from"../listbox/listbox-group-label.js";import o from"../listbox/listbox-item-indicator.js";import s from"./combobox-cancel.js";import c from"./combobox-content.js";import l from"./combobox-empty.js";import u from"./combobox-group.js";import d from"./combobox-input.js";import f from"./combobox-item.js";import p from"./combobox-root.js";import m from"./combobox-separator.js";import h from"./combobox-trigger.js";import g from"./combobox-viewport.js";import{getDisplayValue as _,getSelectedLabels as v,isGroupOption as y}from"./shared.js";import{Fragment as b,computed as x,createBlock as S,createCommentVNode as C,createElementBlock as w,createTextVNode as T,createVNode as E,defineComponent as D,guardReactiveProps as O,mergeProps as k,normalizeClass as A,normalizeProps as j,openBlock as M,renderList as N,renderSlot as P,toDisplayString as F,unref as I,withCtx as L}from"vue";const R=D({name:`ComboboxCompact`,__name:`combobox-compact`,props:{items:{},placeholder:{},searchPlaceholder:{},clearLabel:{},emptyLabel:{},anchorProps:{},triggerProps:{},cancelProps:{},portalProps:{},contentProps:{},viewportProps:{},inputProps:{},emptyProps:{},groupProps:{},groupLabelProps:{},itemProps:{},itemIndicatorProps:{},separatorProps:{},open:{type:Boolean,default:void 0},defaultOpen:{type:Boolean},resetSearchTermOnBlur:{type:Boolean},resetSearchTermOnSelect:{type:Boolean},openOnFocus:{type:Boolean},openOnClick:{type:Boolean},ignoreFilter:{type:Boolean},resetModelValueOnClear:{type:Boolean},dir:{},disabled:{type:Boolean},highlightOnHover:{type:Boolean},modelValue:{},defaultValue:{},multiple:{},clearable:{type:Boolean,default:!0},name:{},required:{type:Boolean}},emits:[`update:modelValue`,`highlight`,`update:open`,`escapeKeyDown`,`pointerDownOutside`,`focusOutside`,`interactOutside`,`openAutoFocus`,`closeAutoFocus`,`placed`,`select`],setup(D,{emit:R}){let z=D,B=R,V=t(z,[`items`,`placeholder`,`searchPlaceholder`,`clearLabel`,`emptyLabel`,`anchorProps`,`triggerProps`,`cancelProps`,`portalProps`,`contentProps`,`viewportProps`,`inputProps`,`emptyProps`,`groupProps`,`groupLabelProps`,`itemProps`,`itemIndicatorProps`,`separatorProps`]),H=e=>z.multiple?``:_(e,z.items),U=e(),W=x(()=>z.inputProps?.controlProps?.[`aria-label`]??z.searchPlaceholder??z.placeholder??U.value.combobox.search),G=x(()=>({...z.inputProps,displayValue:z.inputProps?.displayValue??H,controlProps:{...z.inputProps?.controlProps,"aria-label":W.value},placeholder:z.searchPlaceholder??z.inputProps?.placeholder,autofocus:z.inputProps?.autofocus??!0})),K=x(()=>({...z.viewportProps,"aria-label":z.viewportProps?.[`aria-label`]??z.placeholder??U.value.combobox.options})),q=x(()=>({...z.anchorProps,asChild:z.anchorProps?.asChild??!0})),J=(e,t)=>y(e)?`group-${e.label}-${t}`:e.value,Y=e=>v(e,z.items),X=e=>{let t=Y(e);return t.length?t.join(`, `):z.placeholder},Z=e=>({...z.triggerProps,"aria-label":z.triggerProps?.[`aria-label`]??X(e),"data-placeholder":Y(e).length?void 0:``});return(e,t)=>(M(),S(p,k(I(V),{onHighlight:t[7]||(t[7]=e=>B(`highlight`,e)),"onUpdate:modelValue":t[8]||(t[8]=e=>B(`update:modelValue`,e)),"onUpdate:open":t[9]||(t[9]=e=>B(`update:open`,e))}),{default:L(({modelValue:p})=>[E(r,j(O(q.value)),{default:L(()=>[E(h,j(O(Z(p))),{default:L(({triggerIconClass:t})=>[P(e.$slots,`trigger-leading`),P(e.$slots,`trigger-value`,{modelValue:p,selectedLabels:Y(p),slotText:X(p)},()=>[T(F(X(p)),1)]),P(e.$slots,`trigger-trailing`),P(e.$slots,`trigger-icon`,{},()=>[E(n,{icon:`lucide:chevrons-up-down`,class:A(t)},null,8,[`class`])])]),_:2},1040)]),_:2},1040),E(i,j(O(D.portalProps)),{default:L(()=>[E(c,k(D.contentProps,{onCloseAutoFocus:t[2]||(t[2]=e=>B(`closeAutoFocus`,e)),onEscapeKeyDown:t[3]||(t[3]=e=>B(`escapeKeyDown`,e)),onPointerDownOutside:t[4]||(t[4]=e=>B(`pointerDownOutside`,e)),onFocusOutside:t[5]||(t[5]=e=>B(`focusOutside`,e)),onInteractOutside:t[6]||(t[6]=e=>B(`interactOutside`,e))}),{default:L(()=>[E(d,j(O(G.value)),{leading:L(t=>[P(e.$slots,`input-leading`,j(O(t)),()=>[E(n,{icon:`lucide:search`})])]),trailing:L(t=>[D.clearable?(M(),S(s,k({key:0},D.cancelProps,{"aria-label":z.clearLabel??I(U).combobox.clearInput}),{default:L(()=>[E(n,{icon:`lucide:x`})]),_:1},16,[`aria-label`])):C(`v-if`,!0),P(e.$slots,`input-trailing`,j(O(t)))]),_:3},16),E(l,j(O(D.emptyProps)),{default:L(()=>[P(e.$slots,`empty`,{},()=>[T(F(z.emptyLabel??I(U).combobox.noResults),1)])]),_:3},16),E(g,j(O(K.value)),{default:L(()=>[(M(!0),w(b,null,N(D.items,(r,i)=>(M(),w(b,{key:J(r,i)},[I(y)(r)?(M(),w(b,{key:0},[r.separator?(M(),S(m,k({key:0,ref_for:!0},D.separatorProps),null,16)):C(`v-if`,!0),E(u,k({ref_for:!0},D.groupProps),{default:L(()=>[E(a,k({ref_for:!0},D.groupLabelProps),{default:L(()=>[P(e.$slots,`group-label`,{item:r},()=>[T(F(r.label),1)])]),_:2},1040),(M(!0),w(b,null,N(r.items,r=>(M(),w(b,{key:r.value},[r.separator?(M(),S(m,k({key:0,ref_for:!0},D.separatorProps),null,16)):C(`v-if`,!0),E(f,k({ref_for:!0},D.itemProps,{value:r.value,"text-value":r.textValue??r.label,disabled:r.disabled,onSelect:t[0]||(t[0]=e=>B(`select`,e))}),{default:L(()=>[P(e.$slots,`item-leading`,{item:r},()=>[r.icon?(M(),S(n,{key:0,icon:r.icon},null,8,[`icon`])):C(`v-if`,!0)]),P(e.$slots,`item-text`,{item:r},()=>[T(F(r.label),1)]),P(e.$slots,`item-trailing`,{item:r}),E(o,k({ref_for:!0},D.itemIndicatorProps),{default:L(()=>[P(e.$slots,`item-indicator`,{item:r},()=>[E(n,{icon:`lucide:check`})])]),_:2},1040)]),_:2},1040,[`value`,`text-value`,`disabled`])],64))),128))]),_:2},1040)],64)):(M(),w(b,{key:1},[r.separator?(M(),S(m,k({key:0,ref_for:!0},D.separatorProps),null,16)):C(`v-if`,!0),E(f,k({ref_for:!0},D.itemProps,{value:r.value,"text-value":r.textValue??r.label,disabled:r.disabled,onSelect:t[1]||(t[1]=e=>B(`select`,e))}),{default:L(()=>[P(e.$slots,`item-leading`,{item:r},()=>[r.icon?(M(),S(n,{key:0,icon:r.icon},null,8,[`icon`])):C(`v-if`,!0)]),P(e.$slots,`item-text`,{item:r},()=>[T(F(r.label),1)]),P(e.$slots,`item-trailing`,{item:r}),E(o,k({ref_for:!0},D.itemIndicatorProps),{default:L(()=>[P(e.$slots,`item-indicator`,{item:r},()=>[E(n,{icon:`lucide:check`})])]),_:2},1040)]),_:2},1040,[`value`,`text-value`,`disabled`])],64))],64))),128))]),_:3},16)]),_:3},16)]),_:3},16)]),_:3},16))}});export{R as default};

package/dist/components/combobox/combobox-compact.vue.d.ts

@@ -8,7 +8,6 @@ import * as _$vue from "vue";
 declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
   props: _$vue.PublicProps & __VLS_PrettifyLocal<ComboboxCompactProps<M> & {
     onSelect?: ((event: SelectEvent<string>) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: M extends true ? string[] : string) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
     onPointerDownOutside?: ((event: PointerDownOutsideEvent) => any) | undefined;
@@ -16,6 +15,7 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
     onInteractOutside?: ((event: PointerDownOutsideEvent | FocusOutsideEvent) => any) | undefined;
     onOpenAutoFocus?: ((event: Event) => any) | undefined;
     onCloseAutoFocus?: ((event: Event) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: M extends true ? string[] : string) => any) | undefined;
     onHighlight?: ((payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => any) | undefined;
     onPlaced?: (() => any) | undefined;
   }> & (typeof globalThis extends {
@@ -24,7 +24,7 @@ declare const __VLS_export: <M extends boolean = false>(__VLS_props: NonNullable
   expose: (exposed: {}) => void;
   attrs: any;
   slots: ComboboxCompactSlots<M>;
-  emit: ((evt: "select", event: SelectEvent<string>) => void) & ((evt: "update:modelValue", value: M extends true ? string[] : string) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: FocusOutsideEvent) => void) & ((evt: "interactOutside", event: PointerDownOutsideEvent | FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void) & ((evt: "highlight", payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => void) & ((evt: "placed") => void);
+  emit: ((evt: "select", event: SelectEvent<string>) => void) & ((evt: "update:open", value: boolean) => void) & ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: FocusOutsideEvent) => void) & ((evt: "interactOutside", event: PointerDownOutsideEvent | FocusOutsideEvent) => void) & ((evt: "openAutoFocus", event: Event) => void) & ((evt: "closeAutoFocus", event: Event) => void) & ((evt: "update:modelValue", value: M extends true ? string[] : string) => void) & ((evt: "highlight", payload?: CollectionItemData<ListboxCollectionItemData> | undefined) => void) & ((evt: "placed") => void);
 }>) => _$vue.VNode & {
   __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/components/combobox/combobox-content-impl.js

@@ -1 +1 @@
-import{useBodyScrollLock as e}from"../../composables/use-body-scroll-lock.js";import{useDismissableLayer as t}from"../../composables/use-dismissable-layer.js";import{useExposedElement as n}from"../../composables/use-exposed-element.js";import{useFocusGuards as r}from"../../composables/use-focus-guards.js";import{useFocusScope as i}from"../../composables/use-focus-scope.js";import{useHideOthers as a}from"../../composables/use-hide-others.js";import{useOmitProps as o}from"../../composables/use-props.js";import"../../composables/index.js";import{Primitive as s}from"../primitive/primitive.js";import"../primitive/index.js";import{provideComboboxContentContext as c,useComboboxRootContext as l}from"./context.js";import{popperCssVars as u}from"../popper/shared.js";import d from"../popper/popper-positioner.js";import f from"../popper/popper-popup.js";import"../popper/index.js";import{computed as p,createBlock as m,createVNode as h,defineComponent as g,mergeProps as _,onMounted as v,onUnmounted as y,onWatcherCleanup as b,openBlock as x,ref as S,renderSlot as C,unref as w,useAttrs as T,watchEffect as E,withCtx as D}from"vue";const O=g({name:`ComboboxContentImpl`,inheritAttrs:!1,__name:`combobox-content-impl`,props:{position:{default:`popper`},bodyLock:{type:Boolean},hideWhenEmpty:{type:Boolean},popupProps:{},placement:{},side:{},sideOffset:{},sideFlip:{type:Boolean},align:{},alignOffset:{},alignFlip:{type:Boolean},avoidCollisions:{type:Boolean},collisionBoundary:{},collisionPadding:{},arrowPadding:{},hideShiftedArrow:{type:Boolean},sticky:{},hideWhenDetached:{type:Boolean},positionStrategy:{},updatePositionStrategy:{},disableUpdateOnLayoutShift:{type:Boolean},prioritizePosition:{type:Boolean},reference:{},trapFocus:{type:Boolean},disableOutsidePointerEvents:{type:Boolean},forceMount:{type:Boolean}},emits:[`escapeKeyDown`,`pointerDownOutside`,`focusOutside`,`interactOutside`,`openAutoFocus`,`closeAutoFocus`,`placed`],setup(g,{emit:O}){let k=g,A=O,j=T(),{contentId:M,open:N,ignoreFilter:P,allItems:F,filterState:I,parentElement:L,inputElement:R,triggerElement:z,onOpenChange:B,onPopupElementChange:V}=l(`ComboboxContentImpl`),[H,U]=n(V),{pointerEvents:W}=t(H,{disableOutsidePointerEvents:()=>k.disableOutsidePointerEvents,onEscapeKeyDown:e=>{A(`escapeKeyDown`,e)},onPointerDownOutside:e=>{L.value?.contains(e.target)&&e.preventDefault(),A(`pointerDownOutside`,e)},onFocusOutside:e=>{L.value?.contains(e.target)&&e.preventDefault(),A(`focusOutside`,e)},onInteractOutside:e=>{A(`interactOutside`,e)},onDismiss:()=>{B(!1)}}),{onKeydown:G}=i(H,{trapped:()=>k.trapFocus,loop:!0,onOpenAutoFocus:e=>{A(`openAutoFocus`,e),e.preventDefault()},onCloseAutoFocus:e=>{A(`closeAutoFocus`,e),e.preventDefault()}}),K=p(()=>k.position),q=o(k,[`bodyLock`,`disableOutsidePointerEvents`,`forceMount`,`hideWhenEmpty`,`popupProps`,`position`,`trapFocus`]),J=p(()=>({...j,...k.popupProps})),Y=p(()=>P.value?F.value.size===0:I.value.count===0),X=p(()=>({pointerEvents:W.value,display:k.hideWhenEmpty&&Y.value?`none`:`flex`,flexDirection:`column`,outline:`none`,...K.value===`popper`?{"--soybean-combobox-content-transform-origin":`var(${u.transformOrigin})`,"--soybean-combobox-content-available-width":`var(${u.availableWidth})`,"--soybean-combobox-content-available-height":`var(${u.availableHeight})`,"--soybean-combobox-trigger-width":`var(${u.anchorWidth})`,"--soybean-combobox-trigger-height":`var(${u.anchorHeight})`,boxSizing:`border-box`}:{}}));c({position:K}),r(),a(()=>[L.value,H.value],N),E(()=>{k.bodyLock&&b(e())});let Z=S(!1);return v(()=>{R.value&&H.value&&(Z.value=H.value.contains(R.value),Z.value&&R.value.focus())}),y(()=>{let e=document.activeElement;Z.value&&(!e||e===document.body)&&z.value?.focus()}),(e,t)=>K.value===`popper`?(x(),m(w(d),_({key:0},w(q),{onPlaced:t[0]||(t[0]=e=>A(`placed`))}),{default:D(()=>[h(w(f),_({id:w(M),ref:w(U)},J.value,{"data-slot":`popup`,"data-dismissable-layer":``,"data-state":w(N)?`open`:`closed`,"data-empty":Y.value?``:void 0,style:X.value,onKeydown:w(G)}),{default:D(()=>[C(e.$slots,`default`)]),_:3},16,[`id`,`data-state`,`data-empty`,`style`,`onKeydown`])]),_:3},16)):(x(),m(w(s),_({key:1,id:w(M),ref:w(U)},J.value,{as:`div`,"data-slot":`popup`,"data-dismissable-layer":``,"data-state":w(N)?`open`:`closed`,"data-empty":Y.value?``:void 0,style:X.value,onKeydown:w(G)}),{default:D(()=>[C(e.$slots,`default`)]),_:3},16,[`id`,`data-state`,`data-empty`,`style`,`onKeydown`]))}});export{O as default};
+import{useBodyScrollLock as e}from"../../composables/use-body-scroll-lock.js";import{useDismissableLayer as t}from"../../composables/use-dismissable-layer.js";import{useExposedElement as n}from"../../composables/use-exposed-element.js";import{useFocusGuards as r}from"../../composables/use-focus-guards.js";import{useFocusScope as i}from"../../composables/use-focus-scope.js";import{useHideOthers as a}from"../../composables/use-hide-others.js";import{useOmitProps as o}from"../../composables/use-props.js";import"../../composables/index.js";import{Primitive as s}from"../primitive/primitive.js";import"../primitive/index.js";import{provideComboboxContentContext as c,useComboboxRootContext as l}from"./context.js";import{popperCssVars as u}from"../popper/shared.js";import d from"../popper/popper-positioner.js";import f from"../popper/popper-popup.js";import"../popper/index.js";import{computed as p,createBlock as m,createVNode as h,defineComponent as g,mergeProps as _,onMounted as v,onUnmounted as y,onWatcherCleanup as b,openBlock as x,ref as S,renderSlot as C,unref as w,useAttrs as T,watchEffect as E,withCtx as D}from"vue";const O=g({name:`ComboboxContentImpl`,inheritAttrs:!1,__name:`combobox-content-impl`,props:{position:{default:`popper`},bodyLock:{type:Boolean},hideWhenEmpty:{type:Boolean},popupProps:{},placement:{},side:{},sideOffset:{},sideFlip:{type:Boolean},align:{},alignOffset:{},alignFlip:{type:Boolean},avoidCollisions:{type:Boolean},collisionBoundary:{},collisionPadding:{},arrowPadding:{},hideShiftedArrow:{type:Boolean},sticky:{},hideWhenDetached:{type:Boolean},positionStrategy:{},updatePositionStrategy:{},disableUpdateOnLayoutShift:{type:Boolean},prioritizePosition:{type:Boolean},reference:{},trapFocus:{type:Boolean},disableOutsidePointerEvents:{type:Boolean},forceMount:{type:Boolean}},emits:[`escapeKeyDown`,`pointerDownOutside`,`focusOutside`,`interactOutside`,`openAutoFocus`,`closeAutoFocus`,`placed`],setup(g,{emit:O}){let k=g,A=O,j=T(),{dir:M,contentId:N,open:P,ignoreFilter:F,allItems:I,filterState:L,parentElement:R,inputElement:z,triggerElement:B,onOpenChange:V,onPopupElementChange:H}=l(`ComboboxContentImpl`),[U,W]=n(H),{pointerEvents:G}=t(U,{disableOutsidePointerEvents:()=>k.disableOutsidePointerEvents,onEscapeKeyDown:e=>{A(`escapeKeyDown`,e)},onPointerDownOutside:e=>{R.value?.contains(e.target)&&e.preventDefault(),A(`pointerDownOutside`,e)},onFocusOutside:e=>{R.value?.contains(e.target)&&e.preventDefault(),A(`focusOutside`,e)},onInteractOutside:e=>{A(`interactOutside`,e)},onDismiss:()=>{V(!1)}}),{onKeydown:K}=i(U,{trapped:()=>k.trapFocus,loop:!0,onOpenAutoFocus:e=>{A(`openAutoFocus`,e),e.preventDefault()},onCloseAutoFocus:e=>{A(`closeAutoFocus`,e),e.preventDefault()}}),q=p(()=>k.position),J=o(k,[`bodyLock`,`disableOutsidePointerEvents`,`forceMount`,`hideWhenEmpty`,`popupProps`,`position`,`trapFocus`]),Y=p(()=>({...j,...k.popupProps})),X=p(()=>F.value?I.value.size===0:L.value.count===0),Z=p(()=>({pointerEvents:G.value,display:k.hideWhenEmpty&&X.value?`none`:`flex`,flexDirection:`column`,outline:`none`,...q.value===`popper`?{"--soybean-combobox-content-transform-origin":`var(${u.transformOrigin})`,"--soybean-combobox-content-available-width":`var(${u.availableWidth})`,"--soybean-combobox-content-available-height":`var(${u.availableHeight})`,"--soybean-combobox-trigger-width":`var(${u.anchorWidth})`,"--soybean-combobox-trigger-height":`var(${u.anchorHeight})`,boxSizing:`border-box`}:{}}));c({position:q}),r(),a(()=>[R.value,U.value],P),E(()=>{k.bodyLock&&b(e())});let Q=S(!1);return v(()=>{z.value&&U.value&&(Q.value=U.value.contains(z.value),Q.value&&z.value.focus())}),y(()=>{let e=document.activeElement;Q.value&&(!e||e===document.body)&&B.value?.focus()}),(e,t)=>q.value===`popper`?(x(),m(w(d),_({key:0},w(J),{onPlaced:t[0]||(t[0]=e=>A(`placed`))}),{default:D(()=>[h(w(f),_({id:w(N),ref:w(W)},Y.value,{"data-dismissable-layer":``,dir:w(M),"data-state":w(P)?`open`:`closed`,"data-empty":X.value?``:void 0,style:Z.value,onKeydown:w(K)}),{default:D(()=>[C(e.$slots,`default`)]),_:3},16,[`id`,`dir`,`data-state`,`data-empty`,`style`,`onKeydown`])]),_:3},16)):(x(),m(w(s),_({key:1,id:w(N),ref:w(W)},Y.value,{as:`div`,"data-dismissable-layer":``,dir:w(M),"data-state":w(P)?`open`:`closed`,"data-empty":X.value?``:void 0,style:Z.value,onKeydown:w(K)}),{default:D(()=>[C(e.$slots,`default`)]),_:3},16,[`id`,`dir`,`data-state`,`data-empty`,`style`,`onKeydown`]))}});export{O as default};

package/dist/components/combobox/combobox-content.js

@@ -1 +1 @@
-import{useForwardListeners as e}from"../../composables/use-forward-listeners.js";import{usePresence as t}from"../../composables/use-presence.js";import{useOmitProps as n}from"../../composables/use-props.js";import"../../composables/index.js";import{useComboboxRootContext as r}from"./context.js";import i from"./combobox-content-impl.js";import{createBlock as a,createCommentVNode as o,defineComponent as s,mergeProps as c,openBlock as l,renderSlot as u,shallowRef as d,toHandlers as f,unref as p,withCtx as m}from"vue";const h=s({name:`ComboboxContent`,__name:`combobox-content`,props:{position:{default:`popper`},bodyLock:{type:Boolean},hideWhenEmpty:{type:Boolean},popupProps:{},placement:{},side:{},sideOffset:{},sideFlip:{type:Boolean},align:{},alignOffset:{},alignFlip:{type:Boolean},avoidCollisions:{type:Boolean,default:!0},collisionBoundary:{},collisionPadding:{},arrowPadding:{},hideShiftedArrow:{type:Boolean},sticky:{},hideWhenDetached:{type:Boolean},positionStrategy:{},updatePositionStrategy:{},disableUpdateOnLayoutShift:{type:Boolean},prioritizePosition:{type:Boolean,default:!0},reference:{},trapFocus:{type:Boolean},disableOutsidePointerEvents:{type:Boolean},forceMount:{type:Boolean}},emits:[`escapeKeyDown`,`pointerDownOutside`,`focusOutside`,`interactOutside`,`openAutoFocus`,`closeAutoFocus`,`placed`],setup(s,{emit:h}){let g=s,_=h,v=n(g,[`forceMount`]),y=e(_),{open:b,popupElement:x,initContentId:S}=r(`ComboboxContent`),C=g.forceMount?d(!0):t(x,b);return S(),(e,t)=>p(C)?(l(),a(i,c({key:0},p(v),f(p(y))),{default:m(()=>[u(e.$slots,`default`)]),_:3},16)):o(`v-if`,!0)}});export{h as default};
+import{useForwardListeners as e}from"../../composables/use-forward-listeners.js";import{usePresence as t}from"../../composables/use-presence.js";import{useOmitProps as n}from"../../composables/use-props.js";import"../../composables/index.js";import{useComboboxRootContext as r}from"./context.js";import i from"./combobox-content-impl.js";import{createBlock as a,createCommentVNode as o,defineComponent as s,mergeProps as c,openBlock as l,renderSlot as u,shallowRef as d,toHandlers as f,unref as p,withCtx as m}from"vue";const h=s({name:`ComboboxContent`,__name:`combobox-content`,props:{position:{default:`popper`},bodyLock:{type:Boolean},hideWhenEmpty:{type:Boolean},popupProps:{},placement:{},side:{},sideOffset:{},sideFlip:{type:Boolean},align:{},alignOffset:{},alignFlip:{type:Boolean},avoidCollisions:{type:Boolean,default:!0},collisionBoundary:{},collisionPadding:{},arrowPadding:{},hideShiftedArrow:{type:Boolean},sticky:{},hideWhenDetached:{type:Boolean},positionStrategy:{},updatePositionStrategy:{},disableUpdateOnLayoutShift:{type:Boolean},prioritizePosition:{type:Boolean,default:!0},reference:{},trapFocus:{type:Boolean},disableOutsidePointerEvents:{type:Boolean},forceMount:{type:Boolean}},emits:[`escapeKeyDown`,`pointerDownOutside`,`focusOutside`,`interactOutside`,`openAutoFocus`,`closeAutoFocus`,`placed`],setup(s,{emit:h}){let g=s,_=h,v=n(g,[`forceMount`]),y=e(_),{open:b,popupElement:x,initContentId:S}=r(`ComboboxContent`),C=g.forceMount?d(!0):t(x,b);return S(),(e,t)=>p(C)?(l(),a(i,c({key:0},p(v),{"data-soybean-combobox-content":``},f(p(y))),{default:m(()=>[u(e.$slots,`default`)]),_:3},16)):o(`v-if`,!0)}});export{h as default};

package/dist/components/combobox/combobox-empty.js

@@ -1 +1 @@
-import{Primitive as e}from"../primitive/primitive.js";import"../primitive/index.js";import{useComboboxRootContext as t,useComboboxUi as n}from"./context.js";import{computed as r,createBlock as i,createCommentVNode as a,defineComponent as o,mergeProps as s,openBlock as c,renderSlot as l,unref as u,withCtx as d}from"vue";const f=o({name:`ComboboxEmpty`,__name:`combobox-empty`,props:{asChild:{type:Boolean},as:{default:`div`}},setup(o){let f=o,p=n(`empty`),{allItems:m,filterState:h,ignoreFilter:g}=t(`ComboboxEmpty`),_=r(()=>g.value?m.value.size===0:h.value.count===0);return(t,n)=>_.value?(c(),i(u(e),s({key:0},f,{class:u(p),"data-slot":`empty`}),{default:d(()=>[l(t.$slots,`default`)]),_:3},16,[`class`])):a(`v-if`,!0)}});export{f as default};
+import{Primitive as e}from"../primitive/primitive.js";import"../primitive/index.js";import{useComboboxRootContext as t,useComboboxUi as n}from"./context.js";import{computed as r,createBlock as i,createCommentVNode as a,defineComponent as o,mergeProps as s,openBlock as c,renderSlot as l,unref as u,withCtx as d}from"vue";const f=o({name:`ComboboxEmpty`,__name:`combobox-empty`,props:{asChild:{type:Boolean},as:{}},setup(o){let f=o,p=n(`empty`),{allItems:m,filterState:h,ignoreFilter:g}=t(`ComboboxEmpty`),_=r(()=>g.value?m.value.size===0:h.value.count===0);return(t,n)=>_.value?(c(),i(u(e),s({key:0},f,{"data-soybean-combobox-empty":``,class:u(p)}),{default:d(()=>[l(t.$slots,`default`)]),_:3},16,[`class`])):a(`v-if`,!0)}});export{f as default};