ui-ingredients 0.31.2 → 1.0.0

package/dist/breadcrumbs/breadcrumbs-separator.svelte

@@ -22,6 +22,11 @@
   );
 </script>
 
+<!-- 
+  @component
+  @deprecated
+ -->
+
 {#if asChild}
   {@render asChild(mergedProps)}
 {:else}

package/dist/breadcrumbs/breadcrumbs-separator.svelte.d.ts

@@ -1,6 +1,7 @@
 import type { HtmlIngredientProps } from '../types.js';
 export interface BreadcrumbsSeparatorProps extends HtmlIngredientProps<'span', HTMLSpanElement> {
 }
+/** @deprecated */
 declare const BreadcrumbsSeparator: import("svelte").Component<BreadcrumbsSeparatorProps, {}, "ref">;
 type BreadcrumbsSeparator = ReturnType<typeof BreadcrumbsSeparator>;
 export default BreadcrumbsSeparator;

package/dist/breadcrumbs/create-breadcrumbs.d.ts

@@ -3,6 +3,9 @@ export interface LinkProps {
     href: string;
     current?: boolean;
 }
+/**
+ * @deprecated
+ */
 export interface CreateBreadcrumbsReturn {
     getRootProps(): HTMLAttributes<HTMLElement>;
     getListProps(): HTMLOlAttributes;
@@ -10,4 +13,7 @@ export interface CreateBreadcrumbsReturn {
     getLinkProps(props: LinkProps): HTMLAnchorAttributes;
     getSeparatorProps(): HTMLAttributes<HTMLElement>;
 }
+/**
+ * @deprecated
+ */
 export declare function createBreadcrumbs(): CreateBreadcrumbsReturn;

package/dist/breadcrumbs/create-breadcrumbs.js

@@ -1,5 +1,8 @@
 import { ariaAttr, dataAttr } from '@zag-js/dom-query';
 import { parts } from './breadcrumbs-anatomy.js';
+/**
+ * @deprecated
+ */
 export function createBreadcrumbs() {
     function getRootProps() {
         return {

package/dist/carousel/carousel-root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateCarouselProps,
     CreateCarouselReturn,
@@ -8,7 +8,7 @@
   export interface CarouselProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateCarouselReturn>,
-      CreateCarouselProps
+      Optional<CreateCarouselProps, 'id'>
     > {}
 </script>
 
@@ -20,17 +20,20 @@
   import {createCarousel} from './create-carousel.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: CarouselProps = $props();
 
+  let uid = $props.id();
+
   let [createCarouselProps, localProps] = $derived(
-    createSplitProps<CreateCarouselProps>([
+    createSplitProps<Omit<CreateCarouselProps, 'id'>>([
       'allowMouseDrag',
       'autoplay',
-      'id',
+      'defaultPage',
       'ids',
       'inViewThreshold',
       'loop',
@@ -49,7 +52,10 @@
     ])(props),
   );
 
-  let carousel = createCarousel(reflect(() => createCarouselProps));
+  let carousel = createCarousel(
+    reflect(() => ({...createCarouselProps, id: id ?? uid})),
+  );
+
   let mergedProps = $derived(mergeProps(carousel.getRootProps(), localProps));
 
   setCarouselContext(carousel);

package/dist/carousel/carousel-root.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateCarouselProps, CreateCarouselReturn } from './create-carousel.svelte.js';
-export interface CarouselProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateCarouselReturn>, CreateCarouselProps> {
+export interface CarouselProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateCarouselReturn>, Optional<CreateCarouselProps, 'id'>> {
 }
 declare const CarouselRoot: import("svelte").Component<CarouselProps, {}, "ref">;
 type CarouselRoot = ReturnType<typeof CarouselRoot>;

package/dist/carousel/create-carousel.svelte.d.ts

@@ -1,6 +1,5 @@
 import * as carousel from '@zag-js/carousel';
-export interface CreateCarouselProps extends Omit<carousel.Context, 'id' | 'dir' | 'getRootNode'> {
-    id?: string;
+export interface CreateCarouselProps extends Omit<carousel.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateCarouselReturn extends carousel.Api {
 }

package/dist/carousel/create-carousel.svelte.js

@@ -1,18 +1,14 @@
 import * as carousel from '@zag-js/carousel';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createCarousel(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(carousel.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(carousel.machine(context), { context });
-    return reflect(() => carousel.connect(state, send, normalizeProps));
+    return reflect(() => carousel.connect(service, normalizeProps));
 }

package/dist/checkbox/checkbox-root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateCheckboxProps,
     CreateCheckboxReturn,
@@ -8,7 +8,7 @@
   export interface CheckboxProps
     extends Assign<
       HtmlIngredientProps<'label', HTMLLabelElement, CreateCheckboxReturn>,
-      CreateCheckboxProps
+      Optional<CreateCheckboxProps, 'id'>
     > {}
 </script>
 
@@ -20,18 +20,21 @@
   import {createCheckbox} from './create-checkbox.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: CheckboxProps = $props();
 
+  let uid = $props.id();
+
   let [createCheckboxProps, localProps] = $derived(
-    createSplitProps<CreateCheckboxProps>([
+    createSplitProps<Omit<CreateCheckboxProps, 'id'>>([
       'checked',
+      'defaultChecked',
       'disabled',
       'form',
-      'id',
       'ids',
       'invalid',
       'name',
@@ -42,7 +45,9 @@
     ])(props),
   );
 
-  let checkbox = createCheckbox(reflect(() => createCheckboxProps));
+  let checkbox = createCheckbox(
+    reflect(() => ({...createCheckboxProps, id: id ?? uid})),
+  );
 
   let mergedProps = $derived(mergeProps(checkbox.getRootProps(), localProps));
 

package/dist/checkbox/checkbox-root.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateCheckboxProps, CreateCheckboxReturn } from './create-checkbox.svelte.js';
-export interface CheckboxProps extends Assign<HtmlIngredientProps<'label', HTMLLabelElement, CreateCheckboxReturn>, CreateCheckboxProps> {
+export interface CheckboxProps extends Assign<HtmlIngredientProps<'label', HTMLLabelElement, CreateCheckboxReturn>, Optional<CreateCheckboxProps, 'id'>> {
 }
 declare const CheckboxRoot: import("svelte").Component<CheckboxProps, {}, "ref">;
 type CheckboxRoot = ReturnType<typeof CheckboxRoot>;

package/dist/checkbox/create-checkbox.svelte.d.ts

@@ -1,6 +1,5 @@
 import * as checkbox from '@zag-js/checkbox';
-export interface CreateCheckboxProps extends Omit<checkbox.Context, 'id' | 'dir' | 'getRootNode'> {
-    id?: string;
+export interface CreateCheckboxProps extends Omit<checkbox.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateCheckboxReturn extends checkbox.Api {
 }

package/dist/checkbox/create-checkbox.svelte.js

@@ -1,16 +1,13 @@
 import * as checkbox from '@zag-js/checkbox';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
 import { getFieldContext } from '../field/field-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createCheckbox(props) {
     const field = getFieldContext();
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(checkbox.machine, () => ({
         dir: locale?.dir,
         ids: {
             label: field?.ids.label,
@@ -23,15 +20,14 @@ export function createCheckbox(props) {
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(checkbox.machine(context), { context });
     return reflect(() => {
-        const o = checkbox.connect(state, send, normalizeProps);
+        const api = checkbox.connect(service, normalizeProps);
         return {
-            ...o,
+            ...api,
             getHiddenInputProps() {
                 return {
                     'aria-describedby': field?.['aria-describedby'],
-                    ...o.getHiddenInputProps(),
+                    ...api.getHiddenInputProps(),
                 };
             },
         };

package/dist/clipboard/clipboard-root.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" module>
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateClipboardProps,
     CreateClipboardReturn,
@@ -8,7 +8,7 @@
   export interface ClipboardProps
     extends Assign<
       HtmlIngredientProps<'div', HTMLDivElement, CreateClipboardReturn>,
-      CreateClipboardProps
+      Optional<CreateClipboardProps, 'id'>
     > {}
 </script>
 
@@ -20,23 +20,29 @@
   import {createClipboard} from './create-clipboard.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: ClipboardProps = $props();
 
+  let uid = $props.id();
+
   let [createClipboardProps, localProps] = $derived(
-    createSplitProps<CreateClipboardProps>([
-      'id',
+    createSplitProps<Omit<CreateClipboardProps, 'id'>>([
+      'defaultValue',
       'ids',
       'onStatusChange',
+      'onValueChange',
       'timeout',
       'value',
     ])(props),
   );
 
-  let clipboard = createClipboard(reflect(() => createClipboardProps));
+  let clipboard = createClipboard(
+    reflect(() => ({...createClipboardProps, id: id ?? uid})),
+  );
 
   let mergedProps = $derived(mergeProps(clipboard.getRootProps(), localProps));
 

package/dist/clipboard/clipboard-root.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateClipboardProps, CreateClipboardReturn } from './create-clipboard.svelte.js';
-export interface ClipboardProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateClipboardReturn>, CreateClipboardProps> {
+export interface ClipboardProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateClipboardReturn>, Optional<CreateClipboardProps, 'id'>> {
 }
 declare const ClipboardRoot: import("svelte").Component<ClipboardProps, {}, "ref">;
 type ClipboardRoot = ReturnType<typeof ClipboardRoot>;

package/dist/clipboard/create-clipboard.svelte.d.ts

@@ -1,6 +1,5 @@
 import * as clipboard from '@zag-js/clipboard';
-export interface CreateClipboardProps extends Omit<clipboard.Context, 'id' | 'getRootNode'> {
-    id?: string;
+export interface CreateClipboardProps extends Omit<clipboard.Props, 'getRootNode'> {
 }
 export interface CreateClipboardReturn extends clipboard.Api {
 }

package/dist/clipboard/create-clipboard.svelte.js

@@ -1,15 +1,11 @@
 import * as clipboard from '@zag-js/clipboard';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
 export function createClipboard(props) {
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(clipboard.machine, () => ({
         getRootNode: environment?.getRootNode,
         ...props,
     }));
-    const [state, send] = useMachine(clipboard.machine(context), { context });
-    return reflect(() => clipboard.connect(state, send, normalizeProps));
+    return reflect(() => clipboard.connect(service, normalizeProps));
 }

package/dist/collapsible/collapsible-root.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateCollapsibleProps,
     CreateCollapsibleReturn,
@@ -9,7 +9,7 @@
   export interface CollapsibleProps
     extends Assign<
         HtmlIngredientProps<'div', HTMLDivElement, CreateCollapsibleReturn>,
-        CreateCollapsibleProps
+        Optional<CreateCollapsibleProps, 'id'>
       >,
       PresenceStrategyProps {}
 </script>
@@ -24,31 +24,36 @@
   import {createCollapsible} from './create-collapsible.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: CollapsibleProps = $props();
 
-  let [presenceStrategyProps, rest] = $derived(
+  let uid = $props.id();
+
+  let [presenceStrategyProps, collapsibleProps] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
       props,
     ),
   );
 
   let [createCollapsibleProps, localProps] = $derived(
-    createSplitProps<CreateCollapsibleProps>([
+    createSplitProps<Omit<CreateCollapsibleProps, 'id'>>([
+      'defaultOpen',
       'disabled',
-      'id',
       'ids',
       'onExitComplete',
       'onOpenChange',
       'open',
-      'openControlled',
-    ])(rest),
+    ])(collapsibleProps),
+  );
+
+  let collapsible = createCollapsible(
+    reflect(() => ({...createCollapsibleProps, id: id ?? uid})),
   );
 
-  let collapsible = createCollapsible(reflect(() => createCollapsibleProps));
   let presence = createPresence(
     reflect(() => ({
       present: collapsible.open,

package/dist/collapsible/collapsible-root.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateCollapsibleProps, CreateCollapsibleReturn } from './create-collapsible.svelte.js';
-export interface CollapsibleProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateCollapsibleReturn>, CreateCollapsibleProps>, PresenceStrategyProps {
+export interface CollapsibleProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateCollapsibleReturn>, Optional<CreateCollapsibleProps, 'id'>>, PresenceStrategyProps {
 }
 declare const CollapsibleRoot: import("svelte").Component<CollapsibleProps, {}, "ref">;
 type CollapsibleRoot = ReturnType<typeof CollapsibleRoot>;

package/dist/collapsible/create-collapsible.svelte.d.ts

@@ -1,7 +1,5 @@
 import * as collapsible from '@zag-js/collapsible';
-export interface CreateCollapsibleProps extends Omit<collapsible.Context, 'id' | 'dir' | 'getRootNode' | 'open.controlled'> {
-    id?: string;
-    openControlled?: boolean;
+export interface CreateCollapsibleProps extends Omit<collapsible.Props, 'dir' | 'getRootNode'> {
 }
 export interface CreateCollapsibleReturn extends collapsible.Api {
 }

package/dist/collapsible/create-collapsible.svelte.js

@@ -1,19 +1,14 @@
 import * as collapsible from '@zag-js/collapsible';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 export function createCollapsible(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = reflect(() => ({
-        id,
+    const service = useMachine(collapsible.machine, () => ({
         dir: locale?.dir,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.openControlled,
         ...props,
     }));
-    const [state, send] = useMachine(collapsible.machine(context), { context });
-    return reflect(() => collapsible.connect(state, send, normalizeProps));
+    return reflect(() => collapsible.connect(service, normalizeProps));
 }

package/dist/color-picker/color-picker-channel-slider-value-text.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <script lang="ts">
-  import {getLocaleContext} from '../locale-provider/local-provider-context.svelte.js';
+  import {getLocaleContext} from '../locale-provider/locale-provider-context.svelte.js';
   import {mergeProps} from '../merge-props.js';
   import {
     getColorPickerChannelPropsContext,

package/dist/color-picker/color-picker-root.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type {PresenceStrategyProps} from '../presence/create-presence.svelte.js';
-  import type {Assign, HtmlIngredientProps} from '../types.js';
+  import type {Assign, HtmlIngredientProps, Optional} from '../types.js';
   import type {
     CreateColorPickerProps,
     CreateColorPickerReturn,
@@ -9,7 +9,7 @@
   export interface ColorPickerProps
     extends Assign<
         HtmlIngredientProps<'div', HTMLDivElement, CreateColorPickerReturn>,
-        CreateColorPickerProps
+        Optional<CreateColorPickerProps, 'id'>
       >,
       PresenceStrategyProps {}
 </script>
@@ -24,24 +24,29 @@
   import {createColorPicker} from './create-color-picker.svelte.js';
 
   let {
+    id,
     ref = $bindable(null),
     asChild,
     children,
     ...props
   }: ColorPickerProps = $props();
 
-  let [presenceProps, etc] = $derived(
+  let uid = $props.id();
+
+  let [presenceProps, colorPickerProps] = $derived(
     createSplitProps<PresenceStrategyProps>(['lazyMount', 'keepMounted'])(
       props,
     ),
   );
 
   let [createColorPickerProps, localProps] = $derived(
-    createSplitProps<CreateColorPickerProps>([
+    createSplitProps<Omit<CreateColorPickerProps, 'id'>>([
       'closeOnSelect',
+      'defaultFormat',
+      'defaultOpen',
+      'defaultValue',
       'disabled',
       'format',
-      'id',
       'ids',
       'initialFocusEl',
       'invalid',
@@ -55,15 +60,17 @@
       'onValueChangeEnd',
       'open',
       'openAutoFocus',
-      'openControlled',
       'positioning',
       'readOnly',
       'required',
       'value',
-    ])(etc),
+    ])(colorPickerProps),
+  );
+
+  let colorPicker = createColorPicker(
+    reflect(() => ({...createColorPickerProps, id: id ?? uid})),
   );
 
-  let colorPicker = createColorPicker(reflect(() => createColorPickerProps));
   let presence = createPresence(
     reflect(() => ({
       present: colorPicker.open,

package/dist/color-picker/color-picker-root.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { PresenceStrategyProps } from '../presence/create-presence.svelte.js';
-import type { Assign, HtmlIngredientProps } from '../types.js';
+import type { Assign, HtmlIngredientProps, Optional } from '../types.js';
 import type { CreateColorPickerProps, CreateColorPickerReturn } from './create-color-picker.svelte.js';
-export interface ColorPickerProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateColorPickerReturn>, CreateColorPickerProps>, PresenceStrategyProps {
+export interface ColorPickerProps extends Assign<HtmlIngredientProps<'div', HTMLDivElement, CreateColorPickerReturn>, Optional<CreateColorPickerProps, 'id'>>, PresenceStrategyProps {
 }
 declare const ColorPickerRoot: import("svelte").Component<ColorPickerProps, {}, "ref">;
 type ColorPickerRoot = ReturnType<typeof ColorPickerRoot>;

package/dist/color-picker/create-color-picker.svelte.d.ts

@@ -1,9 +1,10 @@
 import * as colorPicker from '@zag-js/color-picker';
 import type { GenericObject } from '../types.js';
-type Omitted = 'id' | 'dir' | 'getRootNode' | 'open.controlled';
-export interface CreateColorPickerProps extends Omit<colorPicker.Context, Omitted> {
-    id?: string;
-    openControlled?: boolean;
+export interface ElementIds extends colorPicker.ElementIds {
+    view?: string;
+}
+export interface CreateColorPickerProps extends Omit<colorPicker.Props, 'ids' | 'dir' | 'getRootNode'> {
+    ids?: ElementIds;
 }
 export interface CreateColorPickerReturn extends colorPicker.Api {
     getViewProps(props: {
@@ -15,4 +16,3 @@ export interface CreateColorPickerReturn extends colorPicker.Api {
     }[];
 }
 export declare function createColorPicker(props: CreateColorPickerProps): CreateColorPickerReturn;
-export {};

package/dist/color-picker/create-color-picker.svelte.js

@@ -1,29 +1,25 @@
 import * as colorPicker from '@zag-js/color-picker';
 import { normalizeProps, reflect, useMachine } from '@zag-js/svelte';
-import { createUniqueId } from '../create-unique-id.js';
 import { getEnvironmentContext } from '../environment-provider/enviroment-provider-context.svelte.js';
-import { getLocaleContext } from '../locale-provider/local-provider-context.svelte.js';
+import { getLocaleContext } from '../locale-provider/locale-provider-context.svelte.js';
 import { parts } from './color-picker-anatomy.js';
 export function createColorPicker(props) {
     const locale = getLocaleContext();
     const environment = getEnvironmentContext();
-    const id = createUniqueId();
-    const context = $derived.by(() => ({
-        id,
+    const service = useMachine(colorPicker.machine, () => ({
         dir: locale?.dir,
-        ...props,
         getRootNode: environment?.getRootNode,
-        'open.controlled': props.openControlled,
+        ...props,
     }));
-    const [state, send] = useMachine(colorPicker.machine(context), { context });
     return reflect(() => {
-        const o = colorPicker.connect(state, send, normalizeProps);
+        const api = colorPicker.connect(service, normalizeProps);
         return {
-            ...o,
-            getViewProps(props) {
+            ...api,
+            getViewProps(viewProps) {
                 return {
-                    hidden: props.format !== o.format,
-                    'data-format': o.format,
+                    id: `colorPicker:${props.id}:view`,
+                    hidden: viewProps.format !== api.format,
+                    'data-format': api.format,
                     ...parts.view.attrs,
                 };
             },

package/dist/combobox/combobox-item-group.svelte

@@ -6,7 +6,6 @@
 </script>
 
 <script lang="ts">
-  import {createUniqueId} from '../create-unique-id.js';
   import {mergeProps} from '../merge-props.js';
   import {
     getComboboxContext,
@@ -21,8 +20,9 @@
     ...props
   }: ComboboxItemGroupProps = $props();
 
+  let uid = $props.id();
+
   let combobox = getComboboxContext();
-  let uid = createUniqueId();
   let comboboxItemGroupProps = $derived({id: id ?? uid});
   let mergedProps = $derived(
     mergeProps(combobox.getItemGroupProps(comboboxItemGroupProps), props),