diff --git a/.changeset/tasty-lobsters-obey.md b/.changeset/tasty-lobsters-obey.md new file mode 100644 index 000000000..d41d8f7b2 --- /dev/null +++ b/.changeset/tasty-lobsters-obey.md @@ -0,0 +1,5 @@ +--- +"bits-ui": patch +--- + +fix: id synchronization diff --git a/package.json b/package.json index e0f862669..510508d1d 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,7 @@ "types": "./dist/index.d.ts", "type": "module", "dependencies": { - "@melt-ui/svelte": "0.60.1", + "@melt-ui/svelte": "0.61.1", "nanoid": "^5.0.3" }, "peerDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ecd0039d1..8258aca57 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -6,8 +6,8 @@ settings: dependencies: '@melt-ui/svelte': - specifier: 0.60.1 - version: 0.60.1(svelte@4.2.2) + specifier: 0.61.1 + version: 0.61.1(svelte@4.2.2) nanoid: specifier: ^5.0.3 version: 5.0.3 @@ -21,7 +21,7 @@ devDependencies: version: 0.16.5(svelte@4.2.2) '@melt-ui/pp': specifier: ^0.1.2 - version: 0.1.2(@melt-ui/svelte@0.60.1)(svelte@4.2.2) + version: 0.1.2(@melt-ui/svelte@0.61.1)(svelte@4.2.2) '@playwright/test': specifier: ^1.28.1 version: 1.36.2 @@ -923,6 +923,11 @@ packages: vfile-message: 2.0.4 dev: true + /@internationalized/date@3.5.0: + resolution: {integrity: sha512-nw0Q+oRkizBWMioseI8+2TeUPEyopJVz5YxoYVzR0W1v+2YytiYah7s/ot35F149q/xAg4F1gT/6eTd+tsUpFQ==} + dependencies: + '@swc/helpers': 0.5.3 + /@jest/expect-utils@29.7.0: resolution: {integrity: sha512-GlsNBWiFQFCVi9QVSx7f5AgMeLxe9YCCs5PuP2O2LdjDAA8Jh9eX7lA1Jq/xdXw3Wb3hyvlFNfZIfcRetSzYcA==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} @@ -1060,24 +1065,25 @@ packages: - supports-color dev: true - /@melt-ui/pp@0.1.2(@melt-ui/svelte@0.60.1)(svelte@4.2.2): + /@melt-ui/pp@0.1.2(@melt-ui/svelte@0.61.1)(svelte@4.2.2): resolution: {integrity: sha512-GZeqp7UWLNZUC2dJpREnZrWMR88vy27WO7C3cIBz4KW3/CFD19FjNkd3VbSRfcRryrMkdnEs9nu2VUa8/0u58w==} engines: {pnpm: '>=8.6.3'} peerDependencies: '@melt-ui/svelte': '>= 0.29.0' svelte: ^3.55.0 || ^4.0.0 dependencies: - '@melt-ui/svelte': 0.60.1(svelte@4.2.2) + '@melt-ui/svelte': 0.61.1(svelte@4.2.2) svelte: 4.2.2 dev: true - /@melt-ui/svelte@0.60.1(svelte@4.2.2): - resolution: {integrity: sha512-mjQEHhXkM5TbgNYVenVNXLXUnV1Ttx2fBTgugflNIhddWP+dEArBrpfsb4AVsSoGfiql5nSFf/zmrGRLKjZGBg==} + /@melt-ui/svelte@0.61.1(svelte@4.2.2): + resolution: {integrity: sha512-xG/rRK77yfzAWm0/KrB+NrJ3qzBALv7B3OoHGyLSfFXIGum+CzklxtDH8gNSuCA6ENfuPnY7pwy390+LNqvdig==} peerDependencies: svelte: '>=3 <5' dependencies: '@floating-ui/core': 1.4.1 '@floating-ui/dom': 1.5.1 + '@internationalized/date': 3.5.0 dequal: 2.0.3 focus-trap: 7.5.2 nanoid: 4.0.2 @@ -1497,6 +1503,11 @@ packages: - encoding dev: true + /@swc/helpers@0.5.3: + resolution: {integrity: sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==} + dependencies: + tslib: 2.6.2 + /@tailwindcss/typography@0.5.10(tailwindcss@3.3.5): resolution: {integrity: sha512-Pe8BuPJQJd3FfRnm6H0ulKIGoMEQS+Vq01R6M5aCrFB/ccR/shT+0kXLjouGC1gFLm9hopTFN+DMP0pfwRWzPw==} peerDependencies: @@ -7058,7 +7069,6 @@ packages: /tslib@2.6.2: resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} - dev: true /tty-table@4.2.1: resolution: {integrity: sha512-xz0uKo+KakCQ+Dxj1D/tKn2FSyreSYWzdkL/BYhgN6oMW808g8QRMuh1atAV9fjTPbWBjfbkKQpI/5rEcnAc7g==} diff --git a/src/lib/bits/accordion/components/Accordion.svelte b/src/lib/bits/accordion/components/Accordion.svelte index d8a198c59..9d56c0e43 100644 --- a/src/lib/bits/accordion/components/Accordion.svelte +++ b/src/lib/bits/accordion/components/Accordion.svelte @@ -9,14 +9,13 @@ export let multiple: $$Props["multiple"] = false as Multiple; export let value: $$Props["value"] = undefined; export let onValueChange: $$Props["onValueChange"] = undefined; - export let disabled = false; - export let asChild = false; + export let disabled: $$Props["disabled"] = false; + export let asChild: $$Props["asChild"] = false; const { elements: { root }, states: { value: localValue }, - updateOption, - ids + updateOption } = setCtx({ multiple, disabled, @@ -43,9 +42,9 @@ {#if asChild} - + {:else}
- +
{/if} diff --git a/src/lib/bits/accordion/components/AccordionContent.svelte b/src/lib/bits/accordion/components/AccordionContent.svelte index faffaefaf..b54ecd674 100644 --- a/src/lib/bits/accordion/components/AccordionContent.svelte +++ b/src/lib/bits/accordion/components/AccordionContent.svelte @@ -19,7 +19,7 @@ export let outTransition: $$Props["outTransition"] = undefined; export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { content, isSelected, props } = getContent(); diff --git a/src/lib/bits/accordion/components/AccordionHeader.svelte b/src/lib/bits/accordion/components/AccordionHeader.svelte index 7ce243e45..b753af2a8 100644 --- a/src/lib/bits/accordion/components/AccordionHeader.svelte +++ b/src/lib/bits/accordion/components/AccordionHeader.svelte @@ -5,7 +5,7 @@ type $$Props = HeaderProps; export let level = 3; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { heading: header } } = getCtx(); diff --git a/src/lib/bits/accordion/components/AccordionItem.svelte b/src/lib/bits/accordion/components/AccordionItem.svelte index fb8feab02..9effc373f 100644 --- a/src/lib/bits/accordion/components/AccordionItem.svelte +++ b/src/lib/bits/accordion/components/AccordionItem.svelte @@ -6,7 +6,7 @@ export let value: $$Props["value"]; export let disabled: $$Props["disabled"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { item, props } = setItem({ value, disabled }); $: builder = $item(props); diff --git a/src/lib/bits/alert-dialog/components/AlertDialogAction.svelte b/src/lib/bits/alert-dialog/components/AlertDialogAction.svelte index f455240ef..e29cf7111 100644 --- a/src/lib/bits/alert-dialog/components/AlertDialogAction.svelte +++ b/src/lib/bits/alert-dialog/components/AlertDialogAction.svelte @@ -6,7 +6,7 @@ type $$Props = ActionProps; type $$Events = ActionEvents; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { close } } = getCtx(); diff --git a/src/lib/bits/alert-dialog/components/AlertDialogCancel.svelte b/src/lib/bits/alert-dialog/components/AlertDialogCancel.svelte index 2e38c15bf..afcad3542 100644 --- a/src/lib/bits/alert-dialog/components/AlertDialogCancel.svelte +++ b/src/lib/bits/alert-dialog/components/AlertDialogCancel.svelte @@ -6,7 +6,7 @@ type $$Props = CancelProps; type $$Events = CancelEvents; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { close } } = getCtx(); diff --git a/src/lib/bits/alert-dialog/components/AlertDialogContent.svelte b/src/lib/bits/alert-dialog/components/AlertDialogContent.svelte index 860b8d525..310ad9f70 100644 --- a/src/lib/bits/alert-dialog/components/AlertDialogContent.svelte +++ b/src/lib/bits/alert-dialog/components/AlertDialogContent.svelte @@ -16,14 +16,19 @@ export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined; export let outTransition: $$Props["outTransition"] = undefined; export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined; - - export let asChild = false; + export let id: $$Props["id"] = undefined; + export let asChild: $$Props["asChild"] = false; const { elements: { content }, - states: { open } + states: { open }, + ids } = getCtx(); + $: if (id) { + ids.content.set(id); + } + $: builder = $content; const attrs = getAttrs("content"); diff --git a/src/lib/bits/alert-dialog/components/AlertDialogDescription.svelte b/src/lib/bits/alert-dialog/components/AlertDialogDescription.svelte index 468492ab5..8d1e2b7f4 100644 --- a/src/lib/bits/alert-dialog/components/AlertDialogDescription.svelte +++ b/src/lib/bits/alert-dialog/components/AlertDialogDescription.svelte @@ -4,11 +4,18 @@ import type { DescriptionProps } from "../types.js"; type $$Props = DescriptionProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; + const { - elements: { description } + elements: { description }, + ids } = getCtx(); + $: if (id) { + ids.description.set(id); + } + $: builder = $description; const attrs = getAttrs("description"); diff --git a/src/lib/bits/alert-dialog/components/AlertDialogOverlay.svelte b/src/lib/bits/alert-dialog/components/AlertDialogOverlay.svelte index 94eeb8073..3a04cfb17 100644 --- a/src/lib/bits/alert-dialog/components/AlertDialogOverlay.svelte +++ b/src/lib/bits/alert-dialog/components/AlertDialogOverlay.svelte @@ -17,7 +17,7 @@ export let outTransition: $$Props["outTransition"] = undefined; export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { overlay }, states: { open } diff --git a/src/lib/bits/alert-dialog/components/AlertDialogPortal.svelte b/src/lib/bits/alert-dialog/components/AlertDialogPortal.svelte index 2e3072e58..b71ae17a3 100644 --- a/src/lib/bits/alert-dialog/components/AlertDialogPortal.svelte +++ b/src/lib/bits/alert-dialog/components/AlertDialogPortal.svelte @@ -4,7 +4,7 @@ import type { PortalProps } from "../types.js"; type $$Props = PortalProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { portalled } } = getCtx(); diff --git a/src/lib/bits/alert-dialog/components/AlertDialogTitle.svelte b/src/lib/bits/alert-dialog/components/AlertDialogTitle.svelte index 1314cd3cd..126bf04c8 100644 --- a/src/lib/bits/alert-dialog/components/AlertDialogTitle.svelte +++ b/src/lib/bits/alert-dialog/components/AlertDialogTitle.svelte @@ -4,12 +4,19 @@ import type { TitleProps } from "../types.js"; type $$Props = TitleProps; - export let level: TitleProps["level"] = "h2"; - export let asChild = false; + export let level: $$Props["level"] = "h2"; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; + const { - elements: { title } + elements: { title }, + ids } = getCtx(); + $: if (id) { + ids.title.set(id); + } + $: builder = $title; const attrs = getAttrs("title"); diff --git a/src/lib/bits/alert-dialog/components/AlertDialogTrigger.svelte b/src/lib/bits/alert-dialog/components/AlertDialogTrigger.svelte index 45fc259b2..07ef7385c 100644 --- a/src/lib/bits/alert-dialog/components/AlertDialogTrigger.svelte +++ b/src/lib/bits/alert-dialog/components/AlertDialogTrigger.svelte @@ -6,7 +6,7 @@ type $$Props = TriggerProps; type $$Events = TriggerEvents; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { trigger } } = getCtx(); diff --git a/src/lib/bits/avatar/components/Avatar.svelte b/src/lib/bits/avatar/components/Avatar.svelte index b79897276..07b9be1dc 100644 --- a/src/lib/bits/avatar/components/Avatar.svelte +++ b/src/lib/bits/avatar/components/Avatar.svelte @@ -6,7 +6,7 @@ export let delayMs: $$Props["delayMs"] = undefined; export let loadingStatus: $$Props["loadingStatus"] = undefined; export let onLoadingStatusChange: $$Props["onLoadingStatusChange"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { states: { loadingStatus: localLoadingStatus }, diff --git a/src/lib/bits/avatar/components/AvatarFallback.svelte b/src/lib/bits/avatar/components/AvatarFallback.svelte index 5106da998..595dff354 100644 --- a/src/lib/bits/avatar/components/AvatarFallback.svelte +++ b/src/lib/bits/avatar/components/AvatarFallback.svelte @@ -4,7 +4,7 @@ import type { FallbackProps } from "../types.js"; type $$Props = FallbackProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { fallback } } = getCtx(); diff --git a/src/lib/bits/avatar/components/AvatarImage.svelte b/src/lib/bits/avatar/components/AvatarImage.svelte index c10e00e80..5e1f9b6c7 100644 --- a/src/lib/bits/avatar/components/AvatarImage.svelte +++ b/src/lib/bits/avatar/components/AvatarImage.svelte @@ -6,7 +6,7 @@ type $$Props = ImageProps; export let src: $$Props["src"] = undefined; export let alt: $$Props["alt"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; $: image = getImage(src).elements.image; $: builder = $image; diff --git a/src/lib/bits/checkbox/components/Checkbox.svelte b/src/lib/bits/checkbox/components/Checkbox.svelte index 9286f5ec5..e652ec9f4 100644 --- a/src/lib/bits/checkbox/components/Checkbox.svelte +++ b/src/lib/bits/checkbox/components/Checkbox.svelte @@ -12,7 +12,7 @@ export let required: $$Props["required"] = undefined; export let value: $$Props["value"] = undefined; export let onCheckedChange: $$Props["onCheckedChange"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { root }, diff --git a/src/lib/bits/collapsible/components/Collapsible.svelte b/src/lib/bits/collapsible/components/Collapsible.svelte index 9fc13f52b..eecfd934f 100644 --- a/src/lib/bits/collapsible/components/Collapsible.svelte +++ b/src/lib/bits/collapsible/components/Collapsible.svelte @@ -8,7 +8,7 @@ export let disabled: $$Props["disabled"] = undefined; export let open: $$Props["open"] = undefined; export let onOpenChange: $$Props["onOpenChange"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { root }, diff --git a/src/lib/bits/collapsible/components/CollapsibleContent.svelte b/src/lib/bits/collapsible/components/CollapsibleContent.svelte index a50d864d5..1e30a6e3b 100644 --- a/src/lib/bits/collapsible/components/CollapsibleContent.svelte +++ b/src/lib/bits/collapsible/components/CollapsibleContent.svelte @@ -15,7 +15,7 @@ export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined; export let outTransition: $$Props["outTransition"] = undefined; export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { content }, diff --git a/src/lib/bits/collapsible/components/CollapsibleTrigger.svelte b/src/lib/bits/collapsible/components/CollapsibleTrigger.svelte index b3bb8b2d9..e2b75d0c7 100644 --- a/src/lib/bits/collapsible/components/CollapsibleTrigger.svelte +++ b/src/lib/bits/collapsible/components/CollapsibleTrigger.svelte @@ -7,7 +7,7 @@ type $$Props = TriggerProps; type $$Events = TriggerEvents; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { trigger } } = getCtx(); diff --git a/src/lib/bits/context-menu/components/ContextMenuArrow.svelte b/src/lib/bits/context-menu/components/ContextMenuArrow.svelte index fb5ce0806..8a38882a9 100644 --- a/src/lib/bits/context-menu/components/ContextMenuArrow.svelte +++ b/src/lib/bits/context-menu/components/ContextMenuArrow.svelte @@ -6,7 +6,7 @@ type $$Props = ArrowProps; export let size = 8; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { arrow } diff --git a/src/lib/bits/context-menu/components/ContextMenuCheckboxItem.svelte b/src/lib/bits/context-menu/components/ContextMenuCheckboxItem.svelte index 160566c11..2d6c1359a 100644 --- a/src/lib/bits/context-menu/components/ContextMenuCheckboxItem.svelte +++ b/src/lib/bits/context-menu/components/ContextMenuCheckboxItem.svelte @@ -9,7 +9,7 @@ export let checked: $$Props["checked"] = undefined; export let disabled: $$Props["disabled"] = undefined; export let onCheckedChange: $$Props["onCheckedChange"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { checkboxItem }, states: { checked: localChecked }, diff --git a/src/lib/bits/context-menu/components/ContextMenuContent.svelte b/src/lib/bits/context-menu/components/ContextMenuContent.svelte index 1b970dbb8..175d00d8c 100644 --- a/src/lib/bits/context-menu/components/ContextMenuContent.svelte +++ b/src/lib/bits/context-menu/components/ContextMenuContent.svelte @@ -19,14 +19,21 @@ export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined; export let outTransition: $$Props["outTransition"] = undefined; export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; - export let asChild = false; const { elements: { menu }, - states: { open } + states: { open }, + ids } = getContent(sideOffset); const dispatch = createDispatcher(); + + $: if (id) { + ids.menu.set(id); + } + $: builder = $menu; const attrs = getAttrs("content"); diff --git a/src/lib/bits/context-menu/components/ContextMenuGroup.svelte b/src/lib/bits/context-menu/components/ContextMenuGroup.svelte index 0df895a3a..8a2bb3e82 100644 --- a/src/lib/bits/context-menu/components/ContextMenuGroup.svelte +++ b/src/lib/bits/context-menu/components/ContextMenuGroup.svelte @@ -3,7 +3,7 @@ import { setGroup, getAttrs } from "../ctx.js"; import type { GroupProps } from "../types.js"; type $$Props = GroupProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { group, id } = setGroup(); $: builder = $group(id); const attrs = getAttrs("group"); diff --git a/src/lib/bits/context-menu/components/ContextMenuLabel.svelte b/src/lib/bits/context-menu/components/ContextMenuLabel.svelte index 15d1572c3..569f4c957 100644 --- a/src/lib/bits/context-menu/components/ContextMenuLabel.svelte +++ b/src/lib/bits/context-menu/components/ContextMenuLabel.svelte @@ -3,7 +3,7 @@ import { getGroupLabel, getAttrs } from "../ctx.js"; import type { LabelProps } from "../types.js"; type $$Props = LabelProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { groupLabel, id } = getGroupLabel(); $: builder = $groupLabel(id); const attrs = getAttrs("label"); diff --git a/src/lib/bits/context-menu/components/ContextMenuRadioGroup.svelte b/src/lib/bits/context-menu/components/ContextMenuRadioGroup.svelte index c8872441c..ff5dbc3cc 100644 --- a/src/lib/bits/context-menu/components/ContextMenuRadioGroup.svelte +++ b/src/lib/bits/context-menu/components/ContextMenuRadioGroup.svelte @@ -6,7 +6,7 @@ type $$Props = RadioGroupProps; export let value: $$Props["value"] = undefined; export let onValueChange: $$Props["onValueChange"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { radioGroup }, diff --git a/src/lib/bits/context-menu/components/ContextMenuRadioItem.svelte b/src/lib/bits/context-menu/components/ContextMenuRadioItem.svelte index aec0cdf99..d63b16554 100644 --- a/src/lib/bits/context-menu/components/ContextMenuRadioItem.svelte +++ b/src/lib/bits/context-menu/components/ContextMenuRadioItem.svelte @@ -8,7 +8,7 @@ type $$Events = RadioItemEvents; export let value: $$Props["value"]; export let disabled = false; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { radioItem } } = setRadioItem(value); diff --git a/src/lib/bits/context-menu/components/ContextMenuSeparator.svelte b/src/lib/bits/context-menu/components/ContextMenuSeparator.svelte index de67d2631..69513af84 100644 --- a/src/lib/bits/context-menu/components/ContextMenuSeparator.svelte +++ b/src/lib/bits/context-menu/components/ContextMenuSeparator.svelte @@ -4,7 +4,7 @@ import type { SeparatorProps } from "../types.js"; type $$Props = SeparatorProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { separator } } = getCtx(); diff --git a/src/lib/bits/context-menu/components/ContextMenuSubContent.svelte b/src/lib/bits/context-menu/components/ContextMenuSubContent.svelte index f1e314a7a..d6204ed67 100644 --- a/src/lib/bits/context-menu/components/ContextMenuSubContent.svelte +++ b/src/lib/bits/context-menu/components/ContextMenuSubContent.svelte @@ -16,15 +16,21 @@ export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined; export let outTransition: $$Props["outTransition"] = undefined; export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; const { elements: { subMenu }, - states: { subOpen } + states: { subOpen }, + ids } = getSubContent(); $: builder = $subMenu; + $: if (id) { + ids.menu.set(id); + } + const dispatch = createDispatcher(); const attrs = getAttrs("sub-content"); diff --git a/src/lib/bits/context-menu/components/ContextMenuSubTrigger.svelte b/src/lib/bits/context-menu/components/ContextMenuSubTrigger.svelte index 163e49dd3..a3f262ba3 100644 --- a/src/lib/bits/context-menu/components/ContextMenuSubTrigger.svelte +++ b/src/lib/bits/context-menu/components/ContextMenuSubTrigger.svelte @@ -9,13 +9,20 @@ disabled?: boolean; }; type $$Events = SubTriggerEvents; - export let disabled = false; - export let asChild = false; + export let disabled: $$Props["disabled"] = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; const { - elements: { subTrigger } + elements: { subTrigger }, + ids } = getSubMenuCtx(); const dispatch = createDispatcher(); + + $: if (id) { + ids.trigger.set(id); + } + $: builder = $subTrigger; $: attrs = { ...getAttrs("sub-trigger"), ...disabledAttrs(disabled) }; diff --git a/src/lib/bits/context-menu/components/ContextMenuTrigger.svelte b/src/lib/bits/context-menu/components/ContextMenuTrigger.svelte index 03eeb6ceb..3adc89863 100644 --- a/src/lib/bits/context-menu/components/ContextMenuTrigger.svelte +++ b/src/lib/bits/context-menu/components/ContextMenuTrigger.svelte @@ -6,11 +6,18 @@ type $$Props = TriggerProps; type $$Events = TriggerEvents; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; const { - elements: { trigger } + elements: { trigger }, + ids } = getCtx(); + const dispatch = createDispatcher(); + + $: if (id) { + ids.trigger.set(id); + } $: builder = $trigger; const attrs = getAttrs("trigger"); diff --git a/src/lib/bits/dialog/components/DialogClose.svelte b/src/lib/bits/dialog/components/DialogClose.svelte index 3f7d43421..69a5c7b0d 100644 --- a/src/lib/bits/dialog/components/DialogClose.svelte +++ b/src/lib/bits/dialog/components/DialogClose.svelte @@ -6,7 +6,7 @@ type $$Props = CloseProps; type $$Events = CloseEvents; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { close } } = getCtx(); diff --git a/src/lib/bits/dialog/components/DialogContent.svelte b/src/lib/bits/dialog/components/DialogContent.svelte index 860b8d525..fa5f347fc 100644 --- a/src/lib/bits/dialog/components/DialogContent.svelte +++ b/src/lib/bits/dialog/components/DialogContent.svelte @@ -16,14 +16,19 @@ export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined; export let outTransition: $$Props["outTransition"] = undefined; export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined; - - export let asChild = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; const { elements: { content }, - states: { open } + states: { open }, + ids } = getCtx(); + $: if (id) { + ids.content.set(id); + } + $: builder = $content; const attrs = getAttrs("content"); diff --git a/src/lib/bits/dialog/components/DialogDescription.svelte b/src/lib/bits/dialog/components/DialogDescription.svelte index ad60ef865..e514090d3 100644 --- a/src/lib/bits/dialog/components/DialogDescription.svelte +++ b/src/lib/bits/dialog/components/DialogDescription.svelte @@ -4,10 +4,17 @@ import type { DescriptionProps } from "../types.js"; type $$Props = DescriptionProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; + const { - elements: { description } + elements: { description }, + ids } = getCtx(); + + $: if (id) { + ids.description.set(id); + } $: builder = $description; const attrs = getAttrs("description"); diff --git a/src/lib/bits/dialog/components/DialogOverlay.svelte b/src/lib/bits/dialog/components/DialogOverlay.svelte index b6108573b..6ba25c89a 100644 --- a/src/lib/bits/dialog/components/DialogOverlay.svelte +++ b/src/lib/bits/dialog/components/DialogOverlay.svelte @@ -17,7 +17,7 @@ export let outTransition: $$Props["outTransition"] = undefined; export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { overlay }, states: { open } diff --git a/src/lib/bits/dialog/components/DialogPortal.svelte b/src/lib/bits/dialog/components/DialogPortal.svelte index 2e3072e58..b71ae17a3 100644 --- a/src/lib/bits/dialog/components/DialogPortal.svelte +++ b/src/lib/bits/dialog/components/DialogPortal.svelte @@ -4,7 +4,7 @@ import type { PortalProps } from "../types.js"; type $$Props = PortalProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { portalled } } = getCtx(); diff --git a/src/lib/bits/dialog/components/DialogTitle.svelte b/src/lib/bits/dialog/components/DialogTitle.svelte index cafdc387e..a5f8fce3d 100644 --- a/src/lib/bits/dialog/components/DialogTitle.svelte +++ b/src/lib/bits/dialog/components/DialogTitle.svelte @@ -4,11 +4,17 @@ import type { TitleProps } from "../types.js"; type $$Props = TitleProps; - export let level: TitleProps["level"] = "h2"; - export let asChild = false; + export let level: $$Props["level"] = "h2"; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; const { - elements: { title } + elements: { title }, + ids } = getCtx(); + + $: if (id) { + ids.title.set(id); + } $: builder = $title; const attrs = getAttrs("title"); diff --git a/src/lib/bits/dialog/components/DialogTrigger.svelte b/src/lib/bits/dialog/components/DialogTrigger.svelte index f7e532188..edb0e7f0a 100644 --- a/src/lib/bits/dialog/components/DialogTrigger.svelte +++ b/src/lib/bits/dialog/components/DialogTrigger.svelte @@ -6,7 +6,7 @@ type $$Props = TriggerProps; type $$Events = TriggerEvents; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { trigger } } = getCtx(); diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuArrow.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuArrow.svelte index d3200315e..e5ca75862 100644 --- a/src/lib/bits/dropdown-menu/components/DropdownMenuArrow.svelte +++ b/src/lib/bits/dropdown-menu/components/DropdownMenuArrow.svelte @@ -6,7 +6,7 @@ type $$Props = ArrowProps; export let size = 8; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { arrow } diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuContent.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuContent.svelte index 1dc35fc94..7339898bd 100644 --- a/src/lib/bits/dropdown-menu/components/DropdownMenuContent.svelte +++ b/src/lib/bits/dropdown-menu/components/DropdownMenuContent.svelte @@ -22,16 +22,20 @@ export let outTransition: $$Props["outTransition"] = undefined; export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; const { elements: { menu }, - states: { open } + states: { open }, + ids } = getContent(sideOffset); + $: if (id) { + ids.menu.set(id); + } $: builder = $menu; const attrs = getAttrs("content"); - const dispatch = createDispatcher(); diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuGroup.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuGroup.svelte index 8d6f2dc57..2bb692d94 100644 --- a/src/lib/bits/dropdown-menu/components/DropdownMenuGroup.svelte +++ b/src/lib/bits/dropdown-menu/components/DropdownMenuGroup.svelte @@ -3,7 +3,7 @@ import { setGroupCtx, getAttrs } from "../ctx.js"; import type { GroupProps } from "../types.js"; type $$Props = GroupProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { group, id } = setGroupCtx(); $: builder = $group(id); diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuItem.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuItem.svelte index d344088aa..6fc217238 100644 --- a/src/lib/bits/dropdown-menu/components/DropdownMenuItem.svelte +++ b/src/lib/bits/dropdown-menu/components/DropdownMenuItem.svelte @@ -7,7 +7,7 @@ type $$Props = ItemProps; type $$Events = ItemEvents; export let href: $$Props["href"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; export let disabled = false; const { diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuLabel.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuLabel.svelte index d8513d57c..11d29e4fb 100644 --- a/src/lib/bits/dropdown-menu/components/DropdownMenuLabel.svelte +++ b/src/lib/bits/dropdown-menu/components/DropdownMenuLabel.svelte @@ -3,7 +3,7 @@ import { getGroupLabel, getAttrs } from "../ctx.js"; import type { LabelProps } from "../types.js"; type $$Props = LabelProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { groupLabel, id } = getGroupLabel(); $: builder = $groupLabel(id); diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuRadioGroup.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuRadioGroup.svelte index c8872441c..ff5dbc3cc 100644 --- a/src/lib/bits/dropdown-menu/components/DropdownMenuRadioGroup.svelte +++ b/src/lib/bits/dropdown-menu/components/DropdownMenuRadioGroup.svelte @@ -6,7 +6,7 @@ type $$Props = RadioGroupProps; export let value: $$Props["value"] = undefined; export let onValueChange: $$Props["onValueChange"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { radioGroup }, diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuRadioItem.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuRadioItem.svelte index ea073e52d..28fc95cdd 100644 --- a/src/lib/bits/dropdown-menu/components/DropdownMenuRadioItem.svelte +++ b/src/lib/bits/dropdown-menu/components/DropdownMenuRadioItem.svelte @@ -8,7 +8,7 @@ type $$Events = RadioItemEvents; export let value: $$Props["value"]; export let disabled = false; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { radioItem } diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuSeparator.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuSeparator.svelte index de67d2631..69513af84 100644 --- a/src/lib/bits/dropdown-menu/components/DropdownMenuSeparator.svelte +++ b/src/lib/bits/dropdown-menu/components/DropdownMenuSeparator.svelte @@ -4,7 +4,7 @@ import type { SeparatorProps } from "../types.js"; type $$Props = SeparatorProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { separator } } = getCtx(); diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuSubContent.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuSubContent.svelte index ece488e14..d0a7360d7 100644 --- a/src/lib/bits/dropdown-menu/components/DropdownMenuSubContent.svelte +++ b/src/lib/bits/dropdown-menu/components/DropdownMenuSubContent.svelte @@ -18,15 +18,20 @@ export let outTransition: $$Props["outTransition"] = undefined; export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; const { elements: { subMenu }, - states: { subOpen } + states: { subOpen }, + ids } = getSubContent(); const dispatch = createDispatcher(); + $: if (id) { + ids.menu.set(id); + } $: builder = $subMenu; const attrs = getAttrs("sub-content"); diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuSubTrigger.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuSubTrigger.svelte index ec2037a53..20faf4aab 100644 --- a/src/lib/bits/dropdown-menu/components/DropdownMenuSubTrigger.svelte +++ b/src/lib/bits/dropdown-menu/components/DropdownMenuSubTrigger.svelte @@ -9,12 +9,20 @@ disabled?: boolean; }; type $$Events = SubTriggerEvents; - export let disabled = false; - export let asChild = false; + export let disabled: $$Props["disabled"] = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; + const { - elements: { subTrigger } + elements: { subTrigger }, + ids } = getSubTrigger(); const dispatch = createDispatcher(); + + $: if (id) { + ids.trigger.set(id); + } + $: builder = $subTrigger; $: attrs = { ...getAttrs("sub-trigger"), ...disabledAttrs(disabled) }; diff --git a/src/lib/bits/dropdown-menu/components/DropdownMenuTrigger.svelte b/src/lib/bits/dropdown-menu/components/DropdownMenuTrigger.svelte index 2c368fdcc..fe920fda2 100644 --- a/src/lib/bits/dropdown-menu/components/DropdownMenuTrigger.svelte +++ b/src/lib/bits/dropdown-menu/components/DropdownMenuTrigger.svelte @@ -6,12 +6,17 @@ type $$Props = TriggerProps; type $$Events = TriggerEvents; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; const { - elements: { trigger } + elements: { trigger }, + ids } = getCtx(); const dispatch = createDispatcher(); + $: if (id) { + ids.trigger.set(id); + } $: builder = $trigger; const attrs = getAttrs("trigger"); diff --git a/src/lib/bits/label/components/Label.svelte b/src/lib/bits/label/components/Label.svelte index cfac8ed37..e84a02e83 100644 --- a/src/lib/bits/label/components/Label.svelte +++ b/src/lib/bits/label/components/Label.svelte @@ -6,7 +6,7 @@ type $$Props = Props; type $$Events = Events; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { root } } = createLabel(); diff --git a/src/lib/bits/link-preview/components/LinkPreviewArrow.svelte b/src/lib/bits/link-preview/components/LinkPreviewArrow.svelte index 189dd6f6a..74f60ae43 100644 --- a/src/lib/bits/link-preview/components/LinkPreviewArrow.svelte +++ b/src/lib/bits/link-preview/components/LinkPreviewArrow.svelte @@ -5,7 +5,7 @@ type $$Props = ArrowProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; export let size = 8; const { elements: { arrow } diff --git a/src/lib/bits/link-preview/components/LinkPreviewContent.svelte b/src/lib/bits/link-preview/components/LinkPreviewContent.svelte index f052fdfee..96b3e9339 100644 --- a/src/lib/bits/link-preview/components/LinkPreviewContent.svelte +++ b/src/lib/bits/link-preview/components/LinkPreviewContent.svelte @@ -18,13 +18,19 @@ export let outTransition: $$Props["outTransition"] = undefined; export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; const { elements: { content }, - states: { open } + states: { open }, + ids } = getCtx(); + $: if (id) { + ids.content.set(id); + } + $: builder = $content; const attrs = getAttrs("content"); diff --git a/src/lib/bits/link-preview/components/LinkPreviewTrigger.svelte b/src/lib/bits/link-preview/components/LinkPreviewTrigger.svelte index 4353a2580..009ba262d 100644 --- a/src/lib/bits/link-preview/components/LinkPreviewTrigger.svelte +++ b/src/lib/bits/link-preview/components/LinkPreviewTrigger.svelte @@ -6,12 +6,20 @@ type $$Props = TriggerProps; type $$Events = TriggerEvents; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; + const { - elements: { trigger } + elements: { trigger }, + ids } = getCtx(); + const dispatch = createDispatcher(); + $: if (id) { + ids.trigger.set(id); + } + $: builder = $trigger; const attrs = getAttrs("trigger"); diff --git a/src/lib/bits/menubar/components/Menubar.svelte b/src/lib/bits/menubar/components/Menubar.svelte index 850cb8cac..59d7ae9ef 100644 --- a/src/lib/bits/menubar/components/Menubar.svelte +++ b/src/lib/bits/menubar/components/Menubar.svelte @@ -6,9 +6,10 @@ type $$Props = Props; - export let loop = true; - export let closeOnEscape = true; - export let asChild = false; + export let loop: $$Props["loop"] = true; + export let closeOnEscape: $$Props["closeOnEscape"] = true; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; const { elements: { menubar }, @@ -20,6 +21,10 @@ menubar: $menubarId })); + $: if (id) { + ids.menubar.set(id); + } + $: updateOption("loop", loop); $: updateOption("closeOnEscape", closeOnEscape); $: builder = $menubar; diff --git a/src/lib/bits/menubar/components/MenubarArrow.svelte b/src/lib/bits/menubar/components/MenubarArrow.svelte index 516edc569..63c68e78e 100644 --- a/src/lib/bits/menubar/components/MenubarArrow.svelte +++ b/src/lib/bits/menubar/components/MenubarArrow.svelte @@ -6,7 +6,7 @@ type $$Props = ArrowProps; export let size = 8; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { arrow } } = setArrow(size); diff --git a/src/lib/bits/menubar/components/MenubarCheckboxItem.svelte b/src/lib/bits/menubar/components/MenubarCheckboxItem.svelte index e6f4f3d7f..8f11b69d3 100644 --- a/src/lib/bits/menubar/components/MenubarCheckboxItem.svelte +++ b/src/lib/bits/menubar/components/MenubarCheckboxItem.svelte @@ -9,7 +9,7 @@ export let checked: $$Props["checked"] = undefined; export let onCheckedChange: $$Props["onCheckedChange"] = undefined; export let disabled: $$Props["disabled"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { checkboxItem }, diff --git a/src/lib/bits/menubar/components/MenubarContent.svelte b/src/lib/bits/menubar/components/MenubarContent.svelte index e75f9b962..112425b8c 100644 --- a/src/lib/bits/menubar/components/MenubarContent.svelte +++ b/src/lib/bits/menubar/components/MenubarContent.svelte @@ -20,14 +20,18 @@ export let outTransition: $$Props["outTransition"] = undefined; export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; const { elements: { menu }, - states: { open } + states: { open }, + ids } = getContent(sideOffset); const dispatch = createDispatcher(); - + $: if (id) { + ids.menu.set(id); + } $: builder = $menu; const attrs = getAttrs("content"); diff --git a/src/lib/bits/menubar/components/MenubarGroup.svelte b/src/lib/bits/menubar/components/MenubarGroup.svelte index 646742b75..bbc47f875 100644 --- a/src/lib/bits/menubar/components/MenubarGroup.svelte +++ b/src/lib/bits/menubar/components/MenubarGroup.svelte @@ -4,7 +4,7 @@ import type { GroupProps } from "../types.js"; type $$Props = GroupProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { group, id } = setGroupCtx(); $: builder = $group(id); const attrs = getAttrs("group"); diff --git a/src/lib/bits/menubar/components/MenubarItem.svelte b/src/lib/bits/menubar/components/MenubarItem.svelte index a01e9b987..148a2a731 100644 --- a/src/lib/bits/menubar/components/MenubarItem.svelte +++ b/src/lib/bits/menubar/components/MenubarItem.svelte @@ -7,7 +7,7 @@ type $$Props = ItemProps; type $$Events = ItemEvents; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; export let disabled = false; const { elements: { item } diff --git a/src/lib/bits/menubar/components/MenubarLabel.svelte b/src/lib/bits/menubar/components/MenubarLabel.svelte index 14468403f..aa9d97d39 100644 --- a/src/lib/bits/menubar/components/MenubarLabel.svelte +++ b/src/lib/bits/menubar/components/MenubarLabel.svelte @@ -3,7 +3,7 @@ import { getGroupLabel, getAttrs } from "../ctx.js"; import type { LabelProps } from "../types.js"; type $$Props = LabelProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { groupLabel, id } = getGroupLabel(); $: builder = $groupLabel(id); diff --git a/src/lib/bits/menubar/components/MenubarRadioGroup.svelte b/src/lib/bits/menubar/components/MenubarRadioGroup.svelte index cc988836b..9787b406b 100644 --- a/src/lib/bits/menubar/components/MenubarRadioGroup.svelte +++ b/src/lib/bits/menubar/components/MenubarRadioGroup.svelte @@ -6,7 +6,7 @@ type $$Props = RadioGroupProps; export let value: $$Props["value"] = undefined; export let onValueChange: $$Props["onValueChange"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { radioGroup }, diff --git a/src/lib/bits/menubar/components/MenubarRadioItem.svelte b/src/lib/bits/menubar/components/MenubarRadioItem.svelte index 1ea756358..3bcb4512d 100644 --- a/src/lib/bits/menubar/components/MenubarRadioItem.svelte +++ b/src/lib/bits/menubar/components/MenubarRadioItem.svelte @@ -8,7 +8,7 @@ type $$Events = RadioItemEvents; export let value: $$Props["value"]; export let disabled = false; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { radioItem } } = setRadioItemCtx(value); diff --git a/src/lib/bits/menubar/components/MenubarSeparator.svelte b/src/lib/bits/menubar/components/MenubarSeparator.svelte index b2b640fd5..47e0a105c 100644 --- a/src/lib/bits/menubar/components/MenubarSeparator.svelte +++ b/src/lib/bits/menubar/components/MenubarSeparator.svelte @@ -4,7 +4,7 @@ import type { SeparatorProps } from "../types.js"; type $$Props = SeparatorProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { separator } } = getMenuCtx(); diff --git a/src/lib/bits/menubar/components/MenubarSubContent.svelte b/src/lib/bits/menubar/components/MenubarSubContent.svelte index 33f375e78..947f66331 100644 --- a/src/lib/bits/menubar/components/MenubarSubContent.svelte +++ b/src/lib/bits/menubar/components/MenubarSubContent.svelte @@ -12,22 +12,26 @@ export let transition: $$Props["transition"] = undefined; export let transitionConfig: $$Props["transitionConfig"] = undefined; - export let inTransition: $$Props["inTransition"] = undefined; export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined; - export let outTransition: $$Props["outTransition"] = undefined; export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined; - - export let asChild = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; const { elements: { subMenu }, - states: { subOpen } + states: { subOpen }, + ids } = getSubMenuCtx(); const dispatch = createDispatcher(); + + $: if (id) { + ids.menu.set(id); + } $: builder = $subMenu; + const attrs = getAttrs("sub-content"); diff --git a/src/lib/bits/menubar/components/MenubarSubTrigger.svelte b/src/lib/bits/menubar/components/MenubarSubTrigger.svelte index a45f6afbc..6a9057f77 100644 --- a/src/lib/bits/menubar/components/MenubarSubTrigger.svelte +++ b/src/lib/bits/menubar/components/MenubarSubTrigger.svelte @@ -7,12 +7,20 @@ type $$Props = SubTriggerProps; type $$Events = SubTriggerEvents; - export let disabled = false; - export let asChild = false; + export let disabled: $$Props["disabled"] = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; + const { - elements: { subTrigger } + elements: { subTrigger }, + ids } = getSubMenuCtx(); + const dispatch = createDispatcher(); + + $: if (id) { + ids.trigger.set(id); + } $: builder = $subTrigger; $: attrs = { ...getAttrs("sub-trigger"), ...disabledAttrs(disabled) }; diff --git a/src/lib/bits/menubar/components/MenubarTrigger.svelte b/src/lib/bits/menubar/components/MenubarTrigger.svelte index fa60b014f..f1a37c1fb 100644 --- a/src/lib/bits/menubar/components/MenubarTrigger.svelte +++ b/src/lib/bits/menubar/components/MenubarTrigger.svelte @@ -6,11 +6,18 @@ type $$Props = TriggerProps; type $$Events = TriggerEvents; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; + const { - elements: { trigger } + elements: { trigger }, + ids } = getMenuCtx(); + const dispatch = createDispatcher(); + $: if (id) { + ids.trigger.set(id); + } $: builder = $trigger; const attrs = getAttrs("trigger"); diff --git a/src/lib/bits/popover/components/PopoverArrow.svelte b/src/lib/bits/popover/components/PopoverArrow.svelte index 8037a0b58..b9337689d 100644 --- a/src/lib/bits/popover/components/PopoverArrow.svelte +++ b/src/lib/bits/popover/components/PopoverArrow.svelte @@ -5,7 +5,7 @@ type $$Props = ArrowProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; export let size = 8; const { elements: { arrow } diff --git a/src/lib/bits/popover/components/PopoverClose.svelte b/src/lib/bits/popover/components/PopoverClose.svelte index ade7a4d7a..3c0f8c89e 100644 --- a/src/lib/bits/popover/components/PopoverClose.svelte +++ b/src/lib/bits/popover/components/PopoverClose.svelte @@ -6,7 +6,7 @@ type $$Props = CloseProps; type $$Events = CloseEvents; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { close } } = getCtx(); diff --git a/src/lib/bits/popover/components/PopoverContent.svelte b/src/lib/bits/popover/components/PopoverContent.svelte index 860b8d525..fa5f347fc 100644 --- a/src/lib/bits/popover/components/PopoverContent.svelte +++ b/src/lib/bits/popover/components/PopoverContent.svelte @@ -16,14 +16,19 @@ export let inTransitionConfig: $$Props["inTransitionConfig"] = undefined; export let outTransition: $$Props["outTransition"] = undefined; export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined; - - export let asChild = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; const { elements: { content }, - states: { open } + states: { open }, + ids } = getCtx(); + $: if (id) { + ids.content.set(id); + } + $: builder = $content; const attrs = getAttrs("content"); diff --git a/src/lib/bits/popover/components/PopoverTrigger.svelte b/src/lib/bits/popover/components/PopoverTrigger.svelte index 5c774672d..e25c46633 100644 --- a/src/lib/bits/popover/components/PopoverTrigger.svelte +++ b/src/lib/bits/popover/components/PopoverTrigger.svelte @@ -6,11 +6,18 @@ type $$Props = TriggerProps; type $$Events = TriggerEvents; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; const { - elements: { trigger } + elements: { trigger }, + ids } = getCtx(); const dispatch = createDispatcher(); + + $: if (id) { + ids.trigger.set(id); + } + $: builder = $trigger; const attrs = getAttrs("trigger"); diff --git a/src/lib/bits/progress/components/Progress.svelte b/src/lib/bits/progress/components/Progress.svelte index 396bd0885..fab5bcffd 100644 --- a/src/lib/bits/progress/components/Progress.svelte +++ b/src/lib/bits/progress/components/Progress.svelte @@ -8,7 +8,7 @@ export let max: $$Props["max"] = undefined; export let value: $$Props["value"] = undefined; export let onValueChange: $$Props["onValueChange"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { root }, diff --git a/src/lib/bits/radio-group/components/RadioGroup.svelte b/src/lib/bits/radio-group/components/RadioGroup.svelte index 4bb2b1ef5..2d6f9cc75 100644 --- a/src/lib/bits/radio-group/components/RadioGroup.svelte +++ b/src/lib/bits/radio-group/components/RadioGroup.svelte @@ -10,7 +10,7 @@ export let onValueChange: $$Props["onValueChange"] = undefined; export let loop: $$Props["loop"] = undefined; export let orientation: $$Props["orientation"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { root }, diff --git a/src/lib/bits/radio-group/components/RadioGroupInput.svelte b/src/lib/bits/radio-group/components/RadioGroupInput.svelte index 7c1e96218..9d215a404 100644 --- a/src/lib/bits/radio-group/components/RadioGroupInput.svelte +++ b/src/lib/bits/radio-group/components/RadioGroupInput.svelte @@ -4,7 +4,7 @@ import { getCtx, getAttrs } from "../ctx.js"; type $$Props = InputProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { hiddenInput } } = getCtx(); diff --git a/src/lib/bits/radio-group/components/RadioGroupItem.svelte b/src/lib/bits/radio-group/components/RadioGroupItem.svelte index 375353cdf..c3349e05f 100644 --- a/src/lib/bits/radio-group/components/RadioGroupItem.svelte +++ b/src/lib/bits/radio-group/components/RadioGroupItem.svelte @@ -8,7 +8,7 @@ type $$Events = ItemEvents; export let value: $$Props["value"]; export let disabled = false; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { item } } = setItemCtx(value); diff --git a/src/lib/bits/select/components/SelectArrow.svelte b/src/lib/bits/select/components/SelectArrow.svelte index cdd9e0483..7de0db22e 100644 --- a/src/lib/bits/select/components/SelectArrow.svelte +++ b/src/lib/bits/select/components/SelectArrow.svelte @@ -5,7 +5,7 @@ type $$Props = ArrowProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; export let size = 8; const { diff --git a/src/lib/bits/select/components/SelectContent.svelte b/src/lib/bits/select/components/SelectContent.svelte index d4747843a..2dcb13d7d 100644 --- a/src/lib/bits/select/components/SelectContent.svelte +++ b/src/lib/bits/select/components/SelectContent.svelte @@ -19,13 +19,20 @@ export let outTransition: $$Props["outTransition"] = undefined; export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; const { elements: { menu }, - states: { open } + states: { open }, + ids } = getCtx(); const dispatch = createDispatcher(); $: builder = $menu; + + $: if (id) { + ids.menu.set(id); + } + const attrs = getAttrs("content"); diff --git a/src/lib/bits/select/components/SelectGroup.svelte b/src/lib/bits/select/components/SelectGroup.svelte index 7fb4c7e06..2b113ae81 100644 --- a/src/lib/bits/select/components/SelectGroup.svelte +++ b/src/lib/bits/select/components/SelectGroup.svelte @@ -4,7 +4,7 @@ import type { GroupProps } from "../types.js"; type $$Props = GroupProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { group, id } = setGroupCtx(); $: builder = $group(id); const attrs = getAttrs("group"); diff --git a/src/lib/bits/select/components/SelectInput.svelte b/src/lib/bits/select/components/SelectInput.svelte index ad6845008..7cfbaa6bc 100644 --- a/src/lib/bits/select/components/SelectInput.svelte +++ b/src/lib/bits/select/components/SelectInput.svelte @@ -4,7 +4,7 @@ import type { InputProps } from "../types.js"; type $$Props = InputProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { hiddenInput }, options: { disabled } diff --git a/src/lib/bits/select/components/SelectItem.svelte b/src/lib/bits/select/components/SelectItem.svelte index e9a1a60b6..f457e19f0 100644 --- a/src/lib/bits/select/components/SelectItem.svelte +++ b/src/lib/bits/select/components/SelectItem.svelte @@ -10,7 +10,7 @@ export let value: $$Props["value"]; export let disabled: $$Props["disabled"] = undefined; export let label: $$Props["label"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { option: item } } = setItemCtx(value); diff --git a/src/lib/bits/select/components/SelectLabel.svelte b/src/lib/bits/select/components/SelectLabel.svelte index f1ed291c9..83e05dd17 100644 --- a/src/lib/bits/select/components/SelectLabel.svelte +++ b/src/lib/bits/select/components/SelectLabel.svelte @@ -1,13 +1,21 @@ diff --git a/src/lib/bits/select/components/SelectTrigger.svelte b/src/lib/bits/select/components/SelectTrigger.svelte index 5c774672d..e27ac3cf5 100644 --- a/src/lib/bits/select/components/SelectTrigger.svelte +++ b/src/lib/bits/select/components/SelectTrigger.svelte @@ -6,10 +6,18 @@ type $$Props = TriggerProps; type $$Events = TriggerEvents; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { - elements: { trigger } + elements: { trigger }, + ids } = getCtx(); + + export let id: $$Props["id"] = undefined; + + $: if (id) { + ids.trigger.set(id); + } + const dispatch = createDispatcher(); $: builder = $trigger; const attrs = getAttrs("trigger"); diff --git a/src/lib/bits/select/components/SelectValue.svelte b/src/lib/bits/select/components/SelectValue.svelte index 75a5ee922..9371261c3 100644 --- a/src/lib/bits/select/components/SelectValue.svelte +++ b/src/lib/bits/select/components/SelectValue.svelte @@ -4,7 +4,7 @@ type $$Props = ValueProps; export let placeholder = ""; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { states: { selectedLabel } } = getCtx(); diff --git a/src/lib/bits/separator/components/Separator.svelte b/src/lib/bits/separator/components/Separator.svelte index 68050cf17..72ebf21ff 100644 --- a/src/lib/bits/separator/components/Separator.svelte +++ b/src/lib/bits/separator/components/Separator.svelte @@ -6,7 +6,7 @@ type $$Props = Props; export let orientation: $$Props["orientation"] = "horizontal"; export let decorative = true; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { root }, diff --git a/src/lib/bits/slider/components/Slider.svelte b/src/lib/bits/slider/components/Slider.svelte index 3682ab683..037fd3f22 100644 --- a/src/lib/bits/slider/components/Slider.svelte +++ b/src/lib/bits/slider/components/Slider.svelte @@ -12,13 +12,12 @@ export let orientation: $$Props["orientation"] = undefined; export let value: $$Props["value"] = undefined; export let onValueChange: $$Props["onValueChange"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { root }, states: { value: localValue, ticks }, - updateOption, - ids + updateOption } = setCtx({ disabled, min, @@ -47,9 +46,9 @@ {#if asChild} - + {:else} - + {/if} diff --git a/src/lib/bits/slider/components/SliderRange.svelte b/src/lib/bits/slider/components/SliderRange.svelte index 1a921b1fd..040df681f 100644 --- a/src/lib/bits/slider/components/SliderRange.svelte +++ b/src/lib/bits/slider/components/SliderRange.svelte @@ -4,7 +4,7 @@ import type { RangeProps } from "../types.js"; type $$Props = RangeProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { range } } = getCtx(); diff --git a/src/lib/bits/slider/components/SliderThumb.svelte b/src/lib/bits/slider/components/SliderThumb.svelte index 44d6a21a8..60e93e5f5 100644 --- a/src/lib/bits/slider/components/SliderThumb.svelte +++ b/src/lib/bits/slider/components/SliderThumb.svelte @@ -6,7 +6,7 @@ type $$Props = ThumbProps; type $$Events = ThumbEvents; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { thumb } } = getCtx(); @@ -16,7 +16,7 @@ {#if asChild} - + {:else} {/if} diff --git a/src/lib/bits/slider/components/SliderTick.svelte b/src/lib/bits/slider/components/SliderTick.svelte index 6a343fed5..d0d68e3e4 100644 --- a/src/lib/bits/slider/components/SliderTick.svelte +++ b/src/lib/bits/slider/components/SliderTick.svelte @@ -4,7 +4,7 @@ import type { TickProps } from "../types.js"; type $$Props = TickProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { tick } } = getCtx(); diff --git a/src/lib/bits/switch/components/Switch.svelte b/src/lib/bits/switch/components/Switch.svelte index 02d05395d..a2ff8e5d9 100644 --- a/src/lib/bits/switch/components/Switch.svelte +++ b/src/lib/bits/switch/components/Switch.svelte @@ -14,7 +14,7 @@ export let value: $$Props["value"] = undefined; export let includeInput: $$Props["includeInput"] = true; export let required: $$Props["required"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; export let inputAttrs: $$Props["inputAttrs"] = undefined; const { diff --git a/src/lib/bits/switch/components/SwitchThumb.svelte b/src/lib/bits/switch/components/SwitchThumb.svelte index 3f946b659..476c12e0d 100644 --- a/src/lib/bits/switch/components/SwitchThumb.svelte +++ b/src/lib/bits/switch/components/SwitchThumb.svelte @@ -3,7 +3,7 @@ import type { ThumbProps } from "../types.js"; type $$Props = ThumbProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { states: { checked } } = getCtx(); diff --git a/src/lib/bits/tabs/components/Tabs.svelte b/src/lib/bits/tabs/components/Tabs.svelte index 1a164a8cd..a8941ef1c 100644 --- a/src/lib/bits/tabs/components/Tabs.svelte +++ b/src/lib/bits/tabs/components/Tabs.svelte @@ -10,7 +10,7 @@ export let autoSet: $$Props["autoSet"] = undefined; export let value: $$Props["value"] = undefined; export let onValueChange: $$Props["onValueChange"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { root }, diff --git a/src/lib/bits/tabs/components/TabsContent.svelte b/src/lib/bits/tabs/components/TabsContent.svelte index 3b95f4fe9..40dcd1d0c 100644 --- a/src/lib/bits/tabs/components/TabsContent.svelte +++ b/src/lib/bits/tabs/components/TabsContent.svelte @@ -5,7 +5,7 @@ type $$Props = ContentProps; export let value: $$Props["value"]; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { content } } = getCtx(); diff --git a/src/lib/bits/tabs/components/TabsList.svelte b/src/lib/bits/tabs/components/TabsList.svelte index 7665fb61a..2147c01e4 100644 --- a/src/lib/bits/tabs/components/TabsList.svelte +++ b/src/lib/bits/tabs/components/TabsList.svelte @@ -4,7 +4,7 @@ import type { ListProps } from "../types.js"; type $$Props = ListProps; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { list } } = getCtx(); diff --git a/src/lib/bits/tabs/components/TabsTrigger.svelte b/src/lib/bits/tabs/components/TabsTrigger.svelte index 878a14e5f..0084b944d 100644 --- a/src/lib/bits/tabs/components/TabsTrigger.svelte +++ b/src/lib/bits/tabs/components/TabsTrigger.svelte @@ -8,7 +8,7 @@ export let value: $$Props["value"]; export let disabled: $$Props["disabled"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { trigger } diff --git a/src/lib/bits/toggle-group/components/ToggleGroup.svelte b/src/lib/bits/toggle-group/components/ToggleGroup.svelte index 7bb680d5e..c5faad286 100644 --- a/src/lib/bits/toggle-group/components/ToggleGroup.svelte +++ b/src/lib/bits/toggle-group/components/ToggleGroup.svelte @@ -13,7 +13,7 @@ export let value: $$Props["value"] = undefined; export let orientation: $$Props["orientation"] = undefined; export let onValueChange: $$Props["onValueChange"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { root }, diff --git a/src/lib/bits/toggle/components/Toggle.svelte b/src/lib/bits/toggle/components/Toggle.svelte index bbc6bc8ec..34a0a2589 100644 --- a/src/lib/bits/toggle/components/Toggle.svelte +++ b/src/lib/bits/toggle/components/Toggle.svelte @@ -9,7 +9,7 @@ export let disabled: $$Props["disabled"] = undefined; export let pressed: $$Props["pressed"] = undefined; export let onPressedChange: $$Props["onPressedChange"] = undefined; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { root }, states: { pressed: localPressed }, diff --git a/src/lib/bits/tooltip/components/TooltipArrow.svelte b/src/lib/bits/tooltip/components/TooltipArrow.svelte index 5e5d689ed..0c9b38b7a 100644 --- a/src/lib/bits/tooltip/components/TooltipArrow.svelte +++ b/src/lib/bits/tooltip/components/TooltipArrow.svelte @@ -5,7 +5,7 @@ type $$Props = ArrowProps; export let size = 8; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; const { elements: { arrow } diff --git a/src/lib/bits/tooltip/components/TooltipContent.svelte b/src/lib/bits/tooltip/components/TooltipContent.svelte index 1a59c6471..d109fb49e 100644 --- a/src/lib/bits/tooltip/components/TooltipContent.svelte +++ b/src/lib/bits/tooltip/components/TooltipContent.svelte @@ -18,16 +18,20 @@ export let outTransition: $$Props["outTransition"] = undefined; export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined; - export let asChild = false; - export let sideOffset = 4; + export let asChild: $$Props["asChild"] = false; + export let sideOffset: $$Props["sideOffset"] = 4; + export let id: $$Props["id"] = undefined; const { elements: { content }, - states: { open } + states: { open }, + ids } = getCtx(sideOffset); const dispatch = createDispatcher(); - + $: if (id) { + ids.content.set(id); + } $: builder = $content; const attrs = getAttrs("content"); diff --git a/src/lib/bits/tooltip/components/TooltipTrigger.svelte b/src/lib/bits/tooltip/components/TooltipTrigger.svelte index 4c09f334d..cf040f6e2 100644 --- a/src/lib/bits/tooltip/components/TooltipTrigger.svelte +++ b/src/lib/bits/tooltip/components/TooltipTrigger.svelte @@ -6,13 +6,21 @@ type $$Props = TriggerProps; type $$Events = TriggerEvents; - export let asChild = false; + export let asChild: $$Props["asChild"] = false; + export let id: $$Props["id"] = undefined; + const { - elements: { trigger } + elements: { trigger }, + ids } = getCtx(); + const dispatch = createDispatcher(); + $: if (id) { + ids.trigger.set(id); + } $: builder = $trigger; + const attrs = getAttrs("trigger"); diff --git a/src/lib/internal/attrs.ts b/src/lib/internal/attrs.ts index 5b94afe4b..a40e7b949 100644 --- a/src/lib/internal/attrs.ts +++ b/src/lib/internal/attrs.ts @@ -11,6 +11,6 @@ export function createBitAttrs(bit: Bit, parts: T) return (part: T[number]) => attrs[part]; } -export function disabledAttrs(disabled: boolean) { +export function disabledAttrs(disabled: boolean | undefined | null) { return disabled ? { "aria-disabled": true, "data-disabled": "" } : {}; }