From 9a0d34dc7e0a05dd6e86aba21e457daf48283aab Mon Sep 17 00:00:00 2001 From: Abdoulaye NDOYE <46305144+NDOY3M4N@users.noreply.github.com> Date: Thu, 28 Dec 2023 00:06:59 +0000 Subject: [PATCH] feat: expose el prop for DOM manipulation (#244) Co-authored-by: Hunter Johnston --- .changeset/selfish-eels-promise.md | 5 ++ src/content/api-reference/accordion.ts | 14 ++--- src/content/api-reference/alert-dialog.ts | 20 +++---- src/content/api-reference/aspect-ratio.ts | 4 +- src/content/api-reference/avatar.ts | 10 ++-- src/content/api-reference/calendar.ts | 55 ++++++------------- src/content/api-reference/checkbox.ts | 8 +-- src/content/api-reference/collapsible.ts | 10 ++-- src/content/api-reference/context-menu.ts | 23 ++++---- src/content/api-reference/date-field.ts | 10 ++-- src/content/api-reference/date-picker.ts | 10 ++-- src/content/api-reference/date-range-field.ts | 10 ++-- .../api-reference/date-range-picker.ts | 9 ++- src/content/api-reference/dialog.ts | 17 +++--- src/content/api-reference/helpers.ts | 34 +++++++++++- src/content/api-reference/label.ts | 4 +- src/content/api-reference/link-preview.ts | 10 ++-- src/content/api-reference/menu.ts | 35 ++++++------ src/content/api-reference/menubar.ts | 6 +- src/content/api-reference/pagination.ts | 15 ++--- src/content/api-reference/pin-input.ts | 14 ++--- src/content/api-reference/popover.ts | 12 ++-- src/content/api-reference/progress.ts | 6 +- src/content/api-reference/radio-group.ts | 12 ++-- src/content/api-reference/range-calendar.ts | 31 +++++------ src/content/api-reference/select.ts | 21 +++---- src/content/api-reference/separator.ts | 5 +- src/content/api-reference/slider.ts | 11 ++-- src/content/api-reference/switch.ts | 8 +-- src/content/api-reference/tabs.ts | 16 ++++-- src/content/api-reference/toggle-group.ts | 12 ++-- src/content/api-reference/toggle.ts | 5 +- src/content/api-reference/toolbar.ts | 19 ++++--- src/content/api-reference/tooltip.ts | 10 ++-- src/lib/bits/accordion/_types.ts | 14 ++--- .../components/accordion-content.svelte | 13 ++++- .../components/accordion-header.svelte | 3 +- .../components/accordion-item.svelte | 3 +- .../components/accordion-trigger.svelte | 4 +- .../accordion/components/accordion.svelte | 3 +- src/lib/bits/alert-dialog/_types.ts | 14 ++--- .../components/alert-dialog-action.svelte | 2 + .../components/alert-dialog-cancel.svelte | 2 + .../components/alert-dialog-content.svelte | 13 ++++- .../alert-dialog-description.svelte | 3 +- .../components/alert-dialog-overlay.svelte | 7 ++- .../components/alert-dialog-portal.svelte | 3 +- .../components/alert-dialog-title.svelte | 8 ++- .../components/alert-dialog-trigger.svelte | 2 + src/lib/bits/aspect-ratio/_types.ts | 10 +++- .../components/aspect-ratio.svelte | 2 + src/lib/bits/avatar/_types.ts | 8 +-- .../avatar/components/avatar-fallback.svelte | 3 +- .../avatar/components/avatar-image.svelte | 3 +- src/lib/bits/avatar/components/avatar.svelte | 3 +- src/lib/bits/button/components/button.svelte | 2 + src/lib/bits/button/types.ts | 5 +- src/lib/bits/calendar/_types.ts | 48 ++++++++-------- .../calendar/components/calendar-cell.svelte | 3 +- .../calendar/components/calendar-day.svelte | 3 +- .../components/calendar-grid-body.svelte | 3 +- .../components/calendar-grid-head.svelte | 3 +- .../components/calendar-grid-row.svelte | 3 +- .../calendar/components/calendar-grid.svelte | 3 +- .../components/calendar-head-cell.svelte | 3 +- .../components/calendar-header.svelte | 4 +- .../components/calendar-heading.svelte | 3 +- .../components/calendar-next-button.svelte | 2 + .../components/calendar-prev-button.svelte | 2 + .../bits/calendar/components/calendar.svelte | 3 +- src/lib/bits/calendar/types.ts | 4 +- src/lib/bits/checkbox/_types.ts | 6 +- .../components/checkbox-indicator.svelte | 3 +- .../checkbox/components/checkbox-input.svelte | 11 +++- .../bits/checkbox/components/checkbox.svelte | 2 + src/lib/bits/checkbox/types.ts | 4 +- src/lib/bits/collapsible/_types.ts | 10 ++-- .../components/collapsible-content.svelte | 13 ++++- .../components/collapsible-trigger.svelte | 2 + .../collapsible/components/collapsible.svelte | 3 +- src/lib/bits/context-menu/_types.ts | 4 +- .../components/context-menu-content.svelte | 12 +++- .../components/context-menu-trigger.svelte | 2 + src/lib/bits/date-field/_types.ts | 10 ++-- .../components/date-field-input.svelte | 3 +- .../components/date-field-label.svelte | 3 +- .../components/date-field-segment.svelte | 2 + src/lib/bits/date-picker/_types.ts | 20 ++++--- .../components/date-picker-arrow.svelte | 3 +- .../components/date-picker-calendar.svelte | 8 ++- .../components/date-picker-cell.svelte | 3 +- .../components/date-picker-close.svelte | 2 + .../components/date-picker-content.svelte | 13 ++++- .../components/date-picker-day.svelte | 3 +- .../components/date-picker-grid.svelte | 3 +- .../components/date-picker-heading.svelte | 3 +- .../components/date-picker-input.svelte | 3 +- .../components/date-picker-label.svelte | 3 +- .../components/date-picker-next-button.svelte | 2 + .../components/date-picker-prev-button.svelte | 2 + .../components/date-picker-segment.svelte | 2 + .../components/date-picker-trigger.svelte | 2 + src/lib/bits/date-picker/types.ts | 2 +- src/lib/bits/date-range-field/_types.ts | 8 +-- .../components/date-range-field-input.svelte | 3 +- .../components/date-range-field-label.svelte | 3 +- .../date-range-field-segment.svelte | 2 + src/lib/bits/date-range-picker/_types.ts | 20 ++++--- .../components/date-range-picker-arrow.svelte | 3 +- .../date-range-picker-calendar.svelte | 3 +- .../components/date-range-picker-cell.svelte | 3 +- .../components/date-range-picker-close.svelte | 2 + .../date-range-picker-content.svelte | 13 ++++- .../components/date-range-picker-day.svelte | 3 +- .../components/date-range-picker-grid.svelte | 3 +- .../date-range-picker-heading.svelte | 3 +- .../components/date-range-picker-input.svelte | 3 +- .../components/date-range-picker-label.svelte | 3 +- .../date-range-picker-next-button.svelte | 3 +- .../date-range-picker-prev-button.svelte | 3 +- .../date-range-picker-segment.svelte | 3 +- .../date-range-picker-trigger.svelte | 2 + src/lib/bits/date-range-picker/types.ts | 2 +- src/lib/bits/dialog/_types.ts | 14 ++--- .../dialog/components/dialog-close.svelte | 2 + .../dialog/components/dialog-content.svelte | 13 ++++- .../components/dialog-description.svelte | 3 +- .../dialog/components/dialog-overlay.svelte | 7 ++- .../dialog/components/dialog-portal.svelte | 3 +- .../dialog/components/dialog-title.svelte | 8 ++- .../dialog/components/dialog-trigger.svelte | 2 + src/lib/bits/floating/_types.ts | 6 +- src/lib/bits/label/_types.ts | 4 +- src/lib/bits/label/components/label.svelte | 8 ++- src/lib/bits/label/types.ts | 2 +- src/lib/bits/link-preview/_types.ts | 4 +- .../components/link-preview-arrow.svelte | 3 +- .../components/link-preview-content.svelte | 6 ++ .../components/link-preview-trigger.svelte | 2 + src/lib/bits/menu/_types.ts | 24 ++++---- .../bits/menu/components/menu-arrow.svelte | 3 +- .../components/menu-checkbox-indicator.svelte | 3 +- .../menu/components/menu-checkbox-item.svelte | 2 + .../bits/menu/components/menu-content.svelte | 12 +++- .../bits/menu/components/menu-group.svelte | 3 +- src/lib/bits/menu/components/menu-item.svelte | 2 + .../bits/menu/components/menu-label.svelte | 3 +- .../menu/components/menu-radio-group.svelte | 3 +- .../components/menu-radio-indicator.svelte | 3 +- .../menu/components/menu-radio-item.svelte | 2 + .../menu/components/menu-separator.svelte | 3 +- .../menu/components/menu-sub-content.svelte | 6 ++ .../menu/components/menu-sub-trigger.svelte | 2 + .../bits/menu/components/menu-trigger.svelte | 2 + src/lib/bits/menu/types.ts | 14 +++-- src/lib/bits/menubar/_types.ts | 4 +- .../menubar/components/menubar-trigger.svelte | 2 + .../bits/menubar/components/menubar.svelte | 3 +- src/lib/bits/pagination/_types.ts | 10 ++-- .../components/pagination-next-button.svelte | 2 + .../components/pagination-page.svelte | 2 + .../components/pagination-prev-button.svelte | 2 + .../pagination/components/pagination.svelte | 3 +- src/lib/bits/pin-input/_types.ts | 8 +-- .../components/pin-input-hidden-input.svelte | 3 +- .../components/pin-input-input.svelte | 2 + .../pin-input/components/pin-input.svelte | 3 +- src/lib/bits/pin-input/types.ts | 4 +- src/lib/bits/popover/_types.ts | 6 +- .../popover/components/popover-arrow.svelte | 3 +- .../popover/components/popover-close.svelte | 2 + .../popover/components/popover-content.svelte | 13 ++++- .../popover/components/popover-trigger.svelte | 2 + src/lib/bits/popover/types.ts | 2 +- src/lib/bits/progress/_types.ts | 4 +- .../bits/progress/components/progress.svelte | 3 +- src/lib/bits/radio-group/_types.ts | 10 ++-- .../components/radio-group-input.svelte | 3 +- .../radio-group-item-indicator.svelte | 3 +- .../components/radio-group-item.svelte | 2 + .../radio-group/components/radio-group.svelte | 3 +- src/lib/bits/range-calendar/_types.ts | 48 ++++++++-------- .../components/range-calendar-cell.svelte | 3 +- .../components/range-calendar-day.svelte | 2 + .../range-calendar-grid-body.svelte | 3 +- .../range-calendar-grid-head.svelte | 3 +- .../components/range-calendar-grid-row.svelte | 3 +- .../components/range-calendar-grid.svelte | 3 +- .../range-calendar-head-cell.svelte | 3 +- .../components/range-calendar-header.svelte | 4 +- .../components/range-calendar-heading.svelte | 3 +- .../range-calendar-next-button.svelte | 2 + .../range-calendar-prev-button.svelte | 2 + .../components/range-calendar.svelte | 3 +- src/lib/bits/select/_types.ts | 18 +++--- .../select/components/select-arrow.svelte | 3 +- .../select/components/select-content.svelte | 6 ++ .../select/components/select-group.svelte | 3 +- .../select/components/select-input.svelte | 3 +- .../components/select-item-indicator.svelte | 3 +- .../bits/select/components/select-item.svelte | 2 + .../select/components/select-label.svelte | 3 +- .../select/components/select-trigger.svelte | 2 + .../select/components/select-value.svelte | 3 +- src/lib/bits/separator/_types.ts | 4 +- .../separator/components/separator.svelte | 3 +- src/lib/bits/slider/_types.ts | 10 ++-- .../slider/components/slider-input.svelte | 3 +- .../slider/components/slider-range.svelte | 3 +- .../slider/components/slider-thumb.svelte | 8 ++- .../bits/slider/components/slider-tick.svelte | 3 +- src/lib/bits/slider/components/slider.svelte | 3 +- src/lib/bits/slider/types.ts | 6 +- src/lib/bits/switch/_types.ts | 6 +- .../switch/components/switch-input.svelte | 2 + .../switch/components/switch-thumb.svelte | 3 +- src/lib/bits/switch/components/switch.svelte | 2 + src/lib/bits/switch/types.ts | 4 +- src/lib/bits/tabs/_types.ts | 10 ++-- .../bits/tabs/components/tabs-content.svelte | 3 +- src/lib/bits/tabs/components/tabs-list.svelte | 3 +- .../bits/tabs/components/tabs-trigger.svelte | 2 + src/lib/bits/tabs/components/tabs.svelte | 3 +- src/lib/bits/toggle-group/_types.ts | 6 +- .../components/toggle-group-item.svelte | 2 + .../components/toggle-group.svelte | 3 +- src/lib/bits/toggle/_types.ts | 4 +- src/lib/bits/toggle/components/toggle.svelte | 2 + src/lib/bits/toolbar/_types.ts | 12 ++-- .../toolbar/components/toolbar-button.svelte | 2 + .../components/toolbar-group-item.svelte | 2 + .../toolbar/components/toolbar-group.svelte | 3 +- .../toolbar/components/toolbar-link.svelte | 2 + .../bits/toolbar/components/toolbar.svelte | 3 +- src/lib/bits/tooltip/_types.ts | 4 +- .../tooltip/components/tooltip-arrow.svelte | 3 +- .../tooltip/components/tooltip-content.svelte | 6 ++ .../tooltip/components/tooltip-trigger.svelte | 2 + src/lib/internal/types.ts | 22 ++++++++ 239 files changed, 956 insertions(+), 569 deletions(-) create mode 100644 .changeset/selfish-eels-promise.md diff --git a/.changeset/selfish-eels-promise.md b/.changeset/selfish-eels-promise.md new file mode 100644 index 000000000..0cfc6ab22 --- /dev/null +++ b/.changeset/selfish-eels-promise.md @@ -0,0 +1,5 @@ +--- +"bits-ui": minor +--- + +Expose `el` prop for all components to allow binding & interacting with the underlying element diff --git a/src/content/api-reference/accordion.ts b/src/content/api-reference/accordion.ts index 2709b8773..1fb5d2998 100644 --- a/src/content/api-reference/accordion.ts +++ b/src/content/api-reference/accordion.ts @@ -1,8 +1,8 @@ import type { APISchema } from "@/types"; import * as C from "@/content/constants.js"; -import { union, enums, asChild, transitionProps } from "@/content/api-reference/helpers.js"; +import { union, enums, transitionProps } from "@/content/api-reference/helpers.js"; import type * as Accordion from "$lib/bits/accordion/_types.js"; -import { builderAndAttrsSlotProps } from "./helpers"; +import { builderAndAttrsSlotProps, domElProps } from "./helpers"; const root: APISchema> = { title: "Root", @@ -32,7 +32,7 @@ const root: APISchema> = { }, description: "A callback function called when the active accordion item value changes." }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps @@ -66,7 +66,7 @@ const item: APISchema = { type: "boolean", description: "Whether or not the accordion item is disabled." }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps @@ -93,7 +93,7 @@ const item: APISchema = { const trigger: APISchema = { title: "Trigger", description: "The accordion item trigger, which opens and closes the accordion item.", - props: { asChild }, + props: { ...domElProps("HTMLButtonElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -120,7 +120,7 @@ const trigger: APISchema = { const content: APISchema = { title: "Content", description: "The accordion item content, which is displayed when the item is open.", - props: { ...transitionProps, asChild }, + props: { ...transitionProps, ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -156,7 +156,7 @@ const header: APISchema = { description: "The heading level to use for the header. This will be set as the `aria-level` attribute." }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps diff --git a/src/content/api-reference/alert-dialog.ts b/src/content/api-reference/alert-dialog.ts index e8095c72f..360a979f1 100644 --- a/src/content/api-reference/alert-dialog.ts +++ b/src/content/api-reference/alert-dialog.ts @@ -1,15 +1,15 @@ import type { APISchema } from "@/types/api.js"; import { - asChild, + domElProps, enums, idsSlotProp, portalProp, - transitionProps + transitionProps, + builderAndAttrsSlotProps } from "@/content/api-reference/helpers.js"; import * as C from "@/content/constants.js"; import { focusProp } from "@/content/api-reference/extended-types/index.js"; import type * as AlertDialog from "$lib/bits/alert-dialog/_types.js"; -import { builderAndAttrsSlotProps } from "./helpers"; const root: APISchema = { title: "Root", @@ -60,7 +60,7 @@ const root: APISchema = { const action: APISchema = { title: "Action", description: "A button used to close the alert dialog by taking an action.", - props: { asChild }, + props: domElProps("HTMLButtonElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -73,7 +73,7 @@ const action: APISchema = { const cancel: APISchema = { title: "Cancel", description: "A button used to close the alert dialog without taking an action.", - props: { asChild }, + props: domElProps("HTMLButtonElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -86,7 +86,7 @@ const cancel: APISchema = { const content: APISchema = { title: "Content", description: "The content displayed within the alert dialog modal.", - props: { ...transitionProps, asChild }, + props: { ...transitionProps, ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -106,7 +106,7 @@ const title: APISchema = { title: "Title", description: "An accessibile title for the alert dialog.", props: { - asChild, + ...domElProps("HTMLHeadingElement"), level: { type: { type: "enum", @@ -127,7 +127,7 @@ const title: APISchema = { const description: APISchema = { title: "Description", description: "An accessibile description for the alert dialog.", - props: { asChild }, + props: domElProps("HTMLDivElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -140,7 +140,7 @@ const description: APISchema = { const trigger: APISchema = { title: "Trigger", description: "The element which opens the alert dialog on press.", - props: { asChild }, + props: domElProps("HTMLButtonElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -153,7 +153,7 @@ const trigger: APISchema = { const overlay: APISchema = { title: "Overlay", description: "An overlay which covers the body when the alert dialog is open.", - props: { ...transitionProps, asChild }, + props: { ...transitionProps, ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { diff --git a/src/content/api-reference/aspect-ratio.ts b/src/content/api-reference/aspect-ratio.ts index 06cd2a6a8..8178cd9b2 100644 --- a/src/content/api-reference/aspect-ratio.ts +++ b/src/content/api-reference/aspect-ratio.ts @@ -1,6 +1,7 @@ import type { APISchema } from "@/types"; import type * as AspectRatio from "$lib/bits/aspect-ratio/_types.js"; import * as C from "@/content/constants"; +import { domElProps } from "./helpers"; const root: APISchema = { title: "Root", @@ -10,7 +11,8 @@ const root: APISchema = { type: C.NUMBER, default: "1", description: "The desired aspect ratio." - } + }, + ...domElProps("HTMLDivElement") }, dataAttributes: [ { diff --git a/src/content/api-reference/avatar.ts b/src/content/api-reference/avatar.ts index e0ecac782..9d324e595 100644 --- a/src/content/api-reference/avatar.ts +++ b/src/content/api-reference/avatar.ts @@ -1,8 +1,8 @@ import type { APISchema } from "@/types"; -import { asChild, attrsSlotProp, enums } from "@/content/api-reference/helpers.js"; +import { attrsSlotProp, enums } from "@/content/api-reference/helpers.js"; import type * as Avatar from "$lib/bits/avatar/_types"; import * as C from "@/content/constants.js"; -import { builderAndAttrsSlotProps } from "./helpers"; +import { builderAndAttrsSlotProps, domElProps } from "./helpers"; export const root: APISchema = { title: "Root", @@ -29,7 +29,7 @@ export const root: APISchema = { }, description: "A callback function called when the loading status of the image changes." }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { attrs: attrsSlotProp @@ -45,7 +45,7 @@ export const root: APISchema = { export const image: APISchema = { title: "Image", description: "The avatar image displayed once it has loaded.", - props: { asChild }, + props: domElProps("HTMLImageElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -58,7 +58,7 @@ export const image: APISchema = { export const fallback: APISchema = { title: "Fallback", description: "The fallback displayed while the avatar image is loading or if it fails to load", - props: { asChild }, + props: domElProps("HTMLSpanElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { diff --git a/src/content/api-reference/calendar.ts b/src/content/api-reference/calendar.ts index 1ef4f6681..7de061e63 100644 --- a/src/content/api-reference/calendar.ts +++ b/src/content/api-reference/calendar.ts @@ -1,13 +1,8 @@ import type { APISchema } from "@/types"; import * as C from "@/content/constants.js"; -import { - asChild, - weekdaysSlotProp, - enums, - monthsSlotProp -} from "@/content/api-reference/helpers.js"; +import { weekdaysSlotProp, enums, monthsSlotProp } from "@/content/api-reference/helpers.js"; import type * as Calendar from "$lib/bits/calendar/_types.js"; -import { attrsSlotProp, builderAndAttrsSlotProps } from "./helpers"; +import { attrsSlotProp, builderAndAttrsSlotProps, domElProps } from "./helpers"; export const root: APISchema = { title: "Root", @@ -123,7 +118,7 @@ export const root: APISchema = { "If `true`, the calendar will focus the selected day, today, or the first day of the month in that order depending on what is visible when the calendar is mounted.", default: C.FALSE }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { months: monthsSlotProp, @@ -154,11 +149,11 @@ export const cell: APISchema = { title: "Cell", description: "A cell in the calendar grid.", props: { - asChild, date: { type: "DateValue", description: "The date for the cell." - } + }, + ...domElProps("HTMLTableCellElement") }, slotProps: { attrs: attrsSlotProp @@ -179,7 +174,6 @@ export const day: APISchema = { title: "Day", description: "A day in the calendar grid.", props: { - asChild, date: { type: "DateValue", description: "The date for the cell." @@ -187,7 +181,8 @@ export const day: APISchema = { month: { type: "DateValue", description: "The current month the date is being displayed in." - } + }, + ...domElProps("HTMLDivElement") }, slotProps: { disabled: { @@ -247,9 +242,7 @@ export const day: APISchema = { export const grid: APISchema = { title: "Grid", description: "The grid of dates in the calendar, typically representing a month.", - props: { - asChild - }, + props: domElProps("HTMLTableElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -262,9 +255,7 @@ export const grid: APISchema = { export const gridBody: APISchema = { title: "GridBody", description: "The body of the grid of dates in the calendar.", - props: { - asChild - }, + props: domElProps("HTMLTableSectionElement"), slotProps: { attrs: attrsSlotProp }, dataAttributes: [ { @@ -277,9 +268,7 @@ export const gridBody: APISchema = { export const gridHead: APISchema = { title: "GridHead", description: "The head of the grid of dates in the calendar.", - props: { - asChild - }, + props: domElProps("HTMLTableSectionElement"), slotProps: { attrs: attrsSlotProp }, @@ -294,9 +283,7 @@ export const gridHead: APISchema = { export const gridRow: APISchema = { title: "GridRow", description: "A row in the grid of dates in the calendar.", - props: { - asChild - }, + props: domElProps("HTMLTableRowElement"), slotProps: { attrs: attrsSlotProp }, @@ -311,9 +298,7 @@ export const gridRow: APISchema = { export const headCell: APISchema = { title: "HeadCell", description: "A cell in the head of the grid of dates in the calendar.", - props: { - asChild - }, + props: domElProps("HTMLTableCellElement"), slotProps: { attrs: attrsSlotProp }, @@ -328,9 +313,7 @@ export const headCell: APISchema = { export const header: APISchema = { title: "Header", description: "The header of the calendar.", - props: { - asChild - }, + props: domElProps("HTMLElement"), slotProps: { attrs: attrsSlotProp }, @@ -345,9 +328,7 @@ export const header: APISchema = { export const heading: APISchema = { title: "Heading", description: "The heading of the calendar.", - props: { - asChild - }, + props: domElProps("HTMLDivElement"), slotProps: { ...builderAndAttrsSlotProps, headingValue: { @@ -366,9 +347,7 @@ export const heading: APISchema = { export const nextButton: APISchema = { title: "NextButton", description: "The next button of the calendar.", - props: { - asChild - }, + props: domElProps("HTMLButtonElement"), slotProps: { ...builderAndAttrsSlotProps }, @@ -383,9 +362,7 @@ export const nextButton: APISchema = { export const prevButton: APISchema = { title: "PrevButton", description: "The previous button of the calendar.", - props: { - asChild - }, + props: domElProps("HTMLButtonElement"), slotProps: { ...builderAndAttrsSlotProps }, diff --git a/src/content/api-reference/checkbox.ts b/src/content/api-reference/checkbox.ts index a80f04557..996cd2870 100644 --- a/src/content/api-reference/checkbox.ts +++ b/src/content/api-reference/checkbox.ts @@ -1,8 +1,8 @@ -import { asChild, attrsSlotProp, enums, union } from "./helpers.js"; +import { attrsSlotProp, enums, union } from "./helpers.js"; import type { APISchema } from "@/types"; import type * as Checkbox from "$lib/bits/checkbox/_types"; import * as C from "@/content/constants"; -import { builderAndAttrsSlotProps } from "./helpers"; +import { builderAndAttrsSlotProps, domElProps } from "./helpers"; export const root: APISchema = { title: "Root", @@ -43,7 +43,7 @@ export const root: APISchema = { type: C.STRING, description: "The value of the checkbox. This is used for form submission." }, - asChild + ...domElProps("HTMLButtonElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ @@ -88,7 +88,7 @@ export const indicator: APISchema = { title: "Indicator", description: "A component which passes `isChecked` and `isIndeterminate` slot props to its children. This is useful for rendering the checkbox's indicator icon depending on its state.", - props: { asChild }, + props: domElProps("HTMLDivElement"), slotProps: { isChecked: { type: C.BOOLEAN, diff --git a/src/content/api-reference/collapsible.ts b/src/content/api-reference/collapsible.ts index d05bde4e8..943fa5d8f 100644 --- a/src/content/api-reference/collapsible.ts +++ b/src/content/api-reference/collapsible.ts @@ -1,8 +1,8 @@ import type { APISchema, PropObj } from "@/types"; -import { asChild, enums, transitionProps } from "@/content/api-reference/helpers.js"; +import { enums, transitionProps } from "@/content/api-reference/helpers.js"; import type * as Collapsible from "$lib/bits/collapsible/_types"; import * as C from "@/content/constants"; -import { builderAndAttrsSlotProps } from "./helpers"; +import { builderAndAttrsSlotProps, domElProps } from "./helpers"; export const root: APISchema = { title: "Root", @@ -27,7 +27,7 @@ export const root: APISchema = { }, description: "A callback that is fired when the collapsible's open state changes." }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ @@ -51,7 +51,7 @@ export const root: APISchema = { export const trigger: APISchema = { title: "Trigger", description: "The button responsible for toggling the collapsible's open state.", - props: { asChild }, + props: domElProps("HTMLButtonElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -73,7 +73,7 @@ export const trigger: APISchema = { const contentProps = { ...transitionProps, - asChild + ...domElProps("HTMLDivElement") } satisfies PropObj; export const content: APISchema = { diff --git a/src/content/api-reference/context-menu.ts b/src/content/api-reference/context-menu.ts index 24983ed6c..e2c1bb446 100644 --- a/src/content/api-reference/context-menu.ts +++ b/src/content/api-reference/context-menu.ts @@ -3,14 +3,8 @@ import { menu } from "./menu"; import type * as Menu from "$lib/bits/menu/_types"; import type * as ContextMenu from "$lib/bits/context-menu/_types"; import * as C from "@/content/constants.js"; -import { - transitionProps, - asChild, - union, - builderAndAttrsSlotProps, - enums, - seeFloating -} from "./helpers"; +import { domElProps } from "./helpers"; +import { transitionProps, union, builderAndAttrsSlotProps, enums, seeFloating } from "./helpers"; export const root: APISchema = { title: "Root", @@ -21,7 +15,14 @@ export const root: APISchema = { export const trigger: APISchema = { title: "Trigger", description: "The element which when right-clicked, opens the context menu.", - ...menu.trigger + ...menu.trigger, + props: { + ...menu.trigger.props, + el: { + type: "HTMLDivElement", + description: "You can bind to this prop to programatically interact with the element." + } + } }; export const content: APISchema = { @@ -29,7 +30,6 @@ export const content: APISchema = { description: "The content displayed when the context menu is open.", props: { ...transitionProps, - asChild, alignOffset: { type: C.NUMBER, default: "0", @@ -90,7 +90,8 @@ export const content: APISchema = { "Whether the floating element can overlap the reference element.", "https://floating-ui.com/docs/shift#options" ) - } + }, + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: menu.content.dataAttributes diff --git a/src/content/api-reference/date-field.ts b/src/content/api-reference/date-field.ts index 4bbc940a6..c041c484a 100644 --- a/src/content/api-reference/date-field.ts +++ b/src/content/api-reference/date-field.ts @@ -1,7 +1,7 @@ import * as C from "@/content/constants.js"; import type * as DateField from "$lib/bits/date-field/_types.js"; import type { APISchema } from "@/types"; -import { enums, idsSlotProp, union, asChild } from "@/content/api-reference/helpers.js"; +import { enums, idsSlotProp, union, domElProps } from "@/content/api-reference/helpers.js"; import { builderAndAttrsSlotProps } from "./helpers"; export const root: APISchema = { @@ -103,9 +103,7 @@ export const root: APISchema = { const input: APISchema = { title: "Input", description: "The container for the segments of the date field.", - props: { - asChild - }, + props: domElProps("HTMLDivElement"), slotProps: { ...builderAndAttrsSlotProps, segments: { @@ -154,7 +152,7 @@ export const segment: APISchema = { description: "The part of the date to render.", required: true }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps @@ -194,7 +192,7 @@ export const segment: APISchema = { export const label: APISchema = { title: "Label", description: "The label for the date field.", - props: { asChild }, + props: domElProps("HTMLSpanElement"), slotProps: { ...builderAndAttrsSlotProps }, diff --git a/src/content/api-reference/date-picker.ts b/src/content/api-reference/date-picker.ts index 97e285a86..8d25e6f2e 100644 --- a/src/content/api-reference/date-picker.ts +++ b/src/content/api-reference/date-picker.ts @@ -1,11 +1,11 @@ import type { APISchema } from "@/types"; import * as C from "@/content/constants.js"; import { - asChild, weekdaysSlotProp, enums, monthsSlotProp, - union + union, + domElProps } from "@/content/api-reference/helpers.js"; import type * as DatePicker from "$lib/bits/date-picker/_types.js"; import { builderAndAttrsSlotProps, portalProp } from "./helpers"; @@ -205,9 +205,7 @@ const root: APISchema = { type: focusProp, description: "Override the focus when the popover is closed." }, - portal: { ...portalProp("popover") }, - - asChild + portal: { ...portalProp("popover") } }, slotProps: { months: monthsSlotProp, @@ -265,7 +263,7 @@ const calendar: APISchema = { const input: APISchema = { title: "Input", description: "The field input component which contains the segments of the date field.", - props: { asChild }, + props: domElProps("HTMLDivElement"), slotProps: { ...builderAndAttrsSlotProps, segments: { diff --git a/src/content/api-reference/date-range-field.ts b/src/content/api-reference/date-range-field.ts index 9abc2b53a..01bd84a5e 100644 --- a/src/content/api-reference/date-range-field.ts +++ b/src/content/api-reference/date-range-field.ts @@ -1,7 +1,7 @@ import * as C from "@/content/constants.js"; import type * as DateRangeField from "$lib/bits/date-range-field/_types.js"; import type { APISchema } from "@/types"; -import { enums, idsSlotProp, union, asChild } from "@/content/api-reference/helpers.js"; +import { enums, idsSlotProp, union, domElProps } from "@/content/api-reference/helpers.js"; import { builderAndAttrsSlotProps } from "./helpers"; export const root: APISchema = { @@ -106,9 +106,7 @@ export const root: APISchema = { export const input: APISchema = { title: "Input", description: "The container for the segments of the date field.", - props: { - asChild - }, + props: domElProps("HTMLDivElement"), slotProps: { ...builderAndAttrsSlotProps, segments: { @@ -165,7 +163,7 @@ export const segment: APISchema = { description: "The type of field to render (start or end).", required: true }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps @@ -205,7 +203,7 @@ export const segment: APISchema = { export const label: APISchema = { title: "Label", description: "The label for the date field.", - props: { asChild }, + props: domElProps("HTMLSpanElement"), slotProps: { ...builderAndAttrsSlotProps }, diff --git a/src/content/api-reference/date-range-picker.ts b/src/content/api-reference/date-range-picker.ts index e2af42978..86b0220f7 100644 --- a/src/content/api-reference/date-range-picker.ts +++ b/src/content/api-reference/date-range-picker.ts @@ -1,11 +1,11 @@ import type { APISchema } from "@/types"; import * as C from "@/content/constants.js"; import { - asChild, weekdaysSlotProp, enums, monthsSlotProp, - union + union, + domElProps } from "@/content/api-reference/helpers.js"; import type * as DateRangePicker from "$lib/bits/date-range-picker/_types.js"; import { builderAndAttrsSlotProps, portalProp } from "./helpers"; @@ -211,8 +211,7 @@ const root: APISchema = { }, description: "The `start` value of the date range, which can exist prior to the true `value` being set, which is only set once a `start` and `end` value are selected. You can `bind:startValue` to a value to receive updates, but modifying this value outside the component will have no effect. To programmatically control the `start` value, use `bind:value` and update the `start` property of the `DateRange` object. This is provided as a convenience for use cases where you want to display the selected `start` value outside the component before the `value` is set." - }, - asChild + } }, slotProps: { months: monthsSlotProp, @@ -270,7 +269,7 @@ const calendar: APISchema = { const input: APISchema = { title: "Input", description: "The field input component which contains the segments of the date field.", - props: { asChild }, + props: domElProps("HTMLDivElement"), slotProps: { ...builderAndAttrsSlotProps, segments: { diff --git a/src/content/api-reference/dialog.ts b/src/content/api-reference/dialog.ts index bac6d317a..635bb737a 100644 --- a/src/content/api-reference/dialog.ts +++ b/src/content/api-reference/dialog.ts @@ -1,6 +1,5 @@ import type { APISchema } from "@/types"; import { - asChild, enums, idsSlotProp, portalProp, @@ -9,7 +8,7 @@ import { import type * as Dialog from "$lib/bits/dialog/_types"; import { focusProp } from "./extended-types"; import * as C from "@/content/constants"; -import { builderAndAttrsSlotProps } from "./helpers"; +import { builderAndAttrsSlotProps, domElProps } from "./helpers"; export const root: APISchema = { title: "Root", @@ -60,7 +59,7 @@ export const root: APISchema = { export const close: APISchema = { title: "Close", description: "A button used to close the dialog.", - props: { asChild }, + props: domElProps("HTMLButtonElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -73,7 +72,7 @@ export const close: APISchema = { export const content: APISchema = { title: "Content", description: "The content displayed within the dialog modal.", - props: { ...transitionProps, asChild }, + props: { ...transitionProps, ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -100,7 +99,7 @@ export const title: APISchema = { }, description: "The heading level of the title." }, - asChild + ...domElProps("HTMLHeadingElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ @@ -114,7 +113,7 @@ export const title: APISchema = { export const description: APISchema = { title: "Description", description: "An accessibile description for the dialog.", - props: { asChild }, + props: domElProps("HTMLDivElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -127,7 +126,7 @@ export const description: APISchema = { export const trigger: APISchema = { title: "Trigger", description: "The element which opens the dialog on press.", - props: { asChild }, + props: domElProps("HTMLButtonElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -140,7 +139,7 @@ export const trigger: APISchema = { export const overlay: APISchema = { title: "Overlay", description: "An overlay which covers the body when the dialog is open.", - props: { ...transitionProps, asChild }, + props: { ...transitionProps, ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -159,7 +158,7 @@ export const overlay: APISchema = { export const portal: APISchema = { title: "Portal", description: "A portal which renders the dialog into the body when it is open.", - props: { asChild }, + props: domElProps("HTMLDivElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { diff --git a/src/content/api-reference/helpers.ts b/src/content/api-reference/helpers.ts index abf4ea1d4..889a2b507 100644 --- a/src/content/api-reference/helpers.ts +++ b/src/content/api-reference/helpers.ts @@ -8,6 +8,36 @@ export const asChild = { description: "Whether to use [render delegation](/docs/delegation) with this component or not." }; +type ElementKind = + | "HTMLDivElement" + | "HTMLButtonElement" + | "HTMLSpanElement" + | "HTMLAnchorElement" + | "HTMLTableCellElement" + | "HTMLTableSectionElement" + | "HTMLTableRowElement" + | "HTMLTableElement" + | "HTMLLabelElement" + | "HTMLHeadingElement" + | "HTMLImageElement" + | "HTMLInputElement" + | "HTMLElement"; + +export function domElProps(elType: ElementKind) { + return { + asChild: { + type: C.BOOLEAN, + default: C.FALSE, + description: `Whether to use [render delegation](/docs/delegation) with this component or not.` + }, + el: { + type: elType, + description: + "The underlying DOM element being rendered. You can bind to this to programatically interact with the element." + } + }; +} + const builderSlotProp: PropSchema = { type: { type: C.OBJECT, @@ -51,12 +81,12 @@ export const idsSlotProp: PropSchema = { }; export const arrowProps = { - asChild, size: { type: C.NUMBER, default: "8", description: "The height and width of the arrow in pixels." - } + }, + ...domElProps("HTMLDivElement") }; const transitionProp: PropSchema = { diff --git a/src/content/api-reference/label.ts b/src/content/api-reference/label.ts index f5a67d59f..a6b7f00c5 100644 --- a/src/content/api-reference/label.ts +++ b/src/content/api-reference/label.ts @@ -1,11 +1,11 @@ import type { APISchema } from "@/types"; -import { asChild, builderAndAttrsSlotProps } from "@/content/api-reference/helpers.js"; +import { builderAndAttrsSlotProps, domElProps } from "@/content/api-reference/helpers.js"; import type * as Label from "$lib/bits/label/_types"; export const root: APISchema = { title: "Root", description: "An enhanced label component that can be used with any input.", - props: { asChild }, + props: domElProps("HTMLLabelElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { diff --git a/src/content/api-reference/link-preview.ts b/src/content/api-reference/link-preview.ts index cdaf63bed..581500dc2 100644 --- a/src/content/api-reference/link-preview.ts +++ b/src/content/api-reference/link-preview.ts @@ -1,16 +1,16 @@ import type { APISchema } from "@/types"; import { arrowProps, - asChild, + domElProps, enums, idsSlotProp, portalProp, - transitionProps + transitionProps, + builderAndAttrsSlotProps } from "@/content/api-reference/helpers.js"; import { floatingPositioning } from "./floating.js"; import type * as LinkPreview from "$lib/bits/link-preview/_types"; import * as C from "@/content/constants"; -import { builderAndAttrsSlotProps } from "./helpers"; export const root: APISchema = { title: "Root", @@ -61,7 +61,7 @@ export const trigger: APISchema = { title: "Trigger", description: "A component which triggers the opening and closing of the link preview on hover or focus.", - props: { asChild }, + props: domElProps("HTMLAnchorElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -80,7 +80,7 @@ export const trigger: APISchema = { export const content: APISchema = { title: "Content", description: "The contents of the link preview which are displayed when the preview is open.", - props: { ...transitionProps, ...floatingPositioning, asChild }, + props: { ...transitionProps, ...floatingPositioning, ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { diff --git a/src/content/api-reference/menu.ts b/src/content/api-reference/menu.ts index 14aa25a1c..639e79e1f 100644 --- a/src/content/api-reference/menu.ts +++ b/src/content/api-reference/menu.ts @@ -2,7 +2,6 @@ import type { APISchema, DataAttrSchema, PropObj } from "@/types"; import { focusProp } from "./extended-types/index.js"; import { floatingPositioning } from "./floating.js"; import { - asChild, transitionProps, portalProp, enums, @@ -12,7 +11,7 @@ import { } from "@/content/api-reference/helpers.js"; import type * as Menu from "$lib/bits/menu/_types"; import * as C from "@/content/constants"; -import { builderAndAttrsSlotProps } from "./helpers"; +import { builderAndAttrsSlotProps, domElProps } from "./helpers"; const props = { preventScroll: { @@ -99,22 +98,22 @@ const subProps = { const contentProps = { ...transitionProps, ...floatingPositioning, - asChild + ...domElProps("HTMLDivElement") } satisfies PropObj; const subContentProps = { ...transitionProps, ...floatingPositioning, - asChild + ...domElProps("HTMLDivElement") } satisfies PropObj; const arrowProps = { - asChild, size: { type: C.NUMBER, default: "8", description: "The height and width of the arrow in pixels." - } + }, + ...domElProps("HTMLDivElement") } satisfies PropObj; const checkboxItemProps = { @@ -136,7 +135,7 @@ const checkboxItemProps = { }, description: "A callback that is fired when the checkbox menu item's checked state changes." }, - asChild + ...domElProps("HTMLDivElement") } satisfies PropObj; const radioGroupProps = { @@ -151,7 +150,7 @@ const radioGroupProps = { }, description: "A callback that is fired when the radio group's value changes." }, - asChild + ...domElProps("HTMLDivElement") } satisfies PropObj; const radioItemProps = { @@ -166,15 +165,14 @@ const radioItemProps = { description: "Whether or not the radio menu item is disabled. Disabled items cannot be interacted with and are skipped when navigating with the keyboard." }, - asChild + ...domElProps("HTMLDivElement") } satisfies PropObj; const radioIndicatorProps = { - asChild + ...domElProps("HTMLDivElement") } satisfies PropObj; const itemProps = { - asChild, disabled: { type: C.BOOLEAN, default: C.FALSE, @@ -183,7 +181,8 @@ const itemProps = { href: { type: C.STRING, description: "An optional prop that when passed converts the dropdown item into an anchor tag." - } + }, + ...domElProps("HTMLDivElement") } satisfies PropObj; const subTriggerProps = { @@ -192,15 +191,15 @@ const subTriggerProps = { default: C.FALSE, description: "Whether or not the submenu trigger is disabled." }, - asChild + ...domElProps("HTMLDivElement") } satisfies PropObj; -const triggerProps = { asChild } satisfies PropObj; -const groupProps = { asChild } satisfies PropObj; -const labelProps = { asChild } satisfies PropObj; -const separatorProps = { asChild } satisfies PropObj; +const triggerProps = domElProps("HTMLButtonElement") satisfies PropObj; +const groupProps = domElProps("HTMLDivElement") satisfies PropObj; +const labelProps = domElProps("HTMLDivElement") satisfies PropObj; +const separatorProps = domElProps("HTMLDivElement") satisfies PropObj; const checkboxIndicatorProps = { - asChild + ...domElProps("HTMLDivElement") } satisfies PropObj; const STATE: DataAttrSchema = { diff --git a/src/content/api-reference/menubar.ts b/src/content/api-reference/menubar.ts index 2a6b72d27..2ccc9ee8f 100644 --- a/src/content/api-reference/menubar.ts +++ b/src/content/api-reference/menubar.ts @@ -1,10 +1,10 @@ import type { APISchema } from "@/types"; -import { asChild, idsSlotProp } from "@/content/api-reference/helpers.js"; +import { idsSlotProp } from "@/content/api-reference/helpers.js"; import { menu as m } from "./menu"; import type * as Menubar from "$lib/bits/menubar/_types"; import type * as Menu from "$lib/bits/menu/_types"; import * as C from "@/content/constants"; -import { builderAndAttrsSlotProps } from "./helpers"; +import { builderAndAttrsSlotProps, domElProps } from "./helpers"; export const root: APISchema = { title: "Root", @@ -21,7 +21,7 @@ export const root: APISchema = { description: "Whether or not to loop through the menubar menu triggers when navigating with the keyboard." }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps, ids: idsSlotProp } }; diff --git a/src/content/api-reference/pagination.ts b/src/content/api-reference/pagination.ts index e79225e9b..69fcd9926 100644 --- a/src/content/api-reference/pagination.ts +++ b/src/content/api-reference/pagination.ts @@ -1,8 +1,7 @@ import type { APISchema } from "@/types"; import type * as Pagination from "$lib/bits/pagination/_types.js"; import * as C from "@/content/constants.js"; -import { asChild } from "@/content/api-reference/helpers.js"; -import { builderAndAttrsSlotProps } from "./helpers"; +import { builderAndAttrsSlotProps, domElProps } from "./helpers"; import { pageItemProp } from "./extended-types"; export const root: APISchema = { @@ -36,7 +35,7 @@ export const root: APISchema = { }, description: "A function called when the selected page changes." }, - asChild + ...domElProps("HTMLDivElement") } }; @@ -48,7 +47,7 @@ export const page: APISchema = { type: pageItemProp, description: "The page item this component represents." }, - asChild + ...domElProps("HTMLButtonElement") }, slotProps: { ...builderAndAttrsSlotProps @@ -68,9 +67,7 @@ export const page: APISchema = { export const prevButton: APISchema = { title: "PrevButton", description: "The previous button of the pagination.", - props: { - asChild - }, + props: domElProps("HTMLButtonElement"), slotProps: { ...builderAndAttrsSlotProps }, @@ -85,9 +82,7 @@ export const prevButton: APISchema = { export const nextButton: APISchema = { title: "NextButton", description: "The next button of the pagination.", - props: { - asChild - }, + props: domElProps("HTMLButtonElement"), slotProps: { ...builderAndAttrsSlotProps }, diff --git a/src/content/api-reference/pin-input.ts b/src/content/api-reference/pin-input.ts index ba5fe6717..4c068bd1e 100644 --- a/src/content/api-reference/pin-input.ts +++ b/src/content/api-reference/pin-input.ts @@ -1,8 +1,8 @@ import type { APISchema } from "@/types"; -import { asChild, enums } from "@/content/api-reference/helpers.js"; +import { enums } from "@/content/api-reference/helpers.js"; import type * as PinInput from "$lib/bits/pin-input/_types.js"; import * as C from "@/content/constants.js"; -import { builderAndAttrsSlotProps, idsSlotProp } from "./helpers"; +import { builderAndAttrsSlotProps, idsSlotProp, domElProps } from "./helpers"; const root: APISchema = { title: "Root", @@ -38,7 +38,7 @@ const root: APISchema = { }, description: "A callback function called when the pin-input value changes." }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps, ids: idsSlotProp }, dataAttributes: [ @@ -56,9 +56,7 @@ const root: APISchema = { const input: APISchema = { title: "Input", description: "The input component which contains the pin-input.", - props: { - asChild - }, + props: domElProps("HTMLInputElement"), dataAttributes: [ { name: "pin-input-input", @@ -74,9 +72,7 @@ const input: APISchema = { const hiddenInput: APISchema = { title: "HiddenInput", description: "The hidden input component which contains the pin-input.", - props: { - asChild - }, + props: domElProps("HTMLInputElement"), dataAttributes: [ { name: "pin-input-hidden-input", diff --git a/src/content/api-reference/popover.ts b/src/content/api-reference/popover.ts index 63dbddb6e..fe9253003 100644 --- a/src/content/api-reference/popover.ts +++ b/src/content/api-reference/popover.ts @@ -6,12 +6,12 @@ import { portalProp, transitionProps, arrowProps, - asChild, enums, - idsSlotProp + idsSlotProp, + domElProps, + builderAndAttrsSlotProps } from "@/content/api-reference/helpers.js"; import * as C from "@/content/constants.js"; -import { builderAndAttrsSlotProps } from "./helpers"; export const root: APISchema = { title: "Root", @@ -66,7 +66,7 @@ export const root: APISchema = { export const trigger: APISchema = { title: "Trigger", description: "A component which toggles the opening and closing of the popover on press.", - props: { asChild }, + props: domElProps("HTMLButtonElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -85,7 +85,7 @@ export const trigger: APISchema = { export const content: APISchema = { title: "Content", description: "The contents of the popover which are displayed when the popover is open.", - props: { ...transitionProps, ...floatingPositioning, asChild }, + props: { ...transitionProps, ...floatingPositioning, ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -105,7 +105,7 @@ export const close: APISchema = { title: "Close", description: "A button which closes the popover when pressed and is typically placed in the content.", - props: { asChild }, + props: domElProps("HTMLButtonElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { diff --git a/src/content/api-reference/progress.ts b/src/content/api-reference/progress.ts index d602626b4..649ef498d 100644 --- a/src/content/api-reference/progress.ts +++ b/src/content/api-reference/progress.ts @@ -1,8 +1,8 @@ import type { APISchema } from "@/types/index.js"; -import { asChild, enums } from "@/content/api-reference/helpers.js"; +import { enums } from "@/content/api-reference/helpers.js"; import * as C from "@/content/constants.js"; import type * as Progress from "$lib/bits/progress/_types.js"; -import { builderAndAttrsSlotProps } from "./helpers"; +import { builderAndAttrsSlotProps, domElProps } from "./helpers"; export const root: APISchema = { title: "Root", @@ -26,7 +26,7 @@ export const root: APISchema = { }, description: "A callback that fires when the value changes." }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ diff --git a/src/content/api-reference/radio-group.ts b/src/content/api-reference/radio-group.ts index d20649364..a553554ef 100644 --- a/src/content/api-reference/radio-group.ts +++ b/src/content/api-reference/radio-group.ts @@ -1,8 +1,8 @@ import type { APISchema } from "@/types"; -import { asChild, attrsSlotProp, enums } from "@/content/api-reference/helpers.js"; +import { attrsSlotProp, enums } from "@/content/api-reference/helpers.js"; import type * as RadioGroup from "$lib/bits/radio-group/_types"; import * as C from "@/content/constants"; -import { builderAndAttrsSlotProps } from "./helpers"; +import { builderAndAttrsSlotProps, domElProps } from "./helpers"; export const root: APISchema = { title: "Root", @@ -46,7 +46,7 @@ export const root: APISchema = { }, description: "A callback that is fired when the radio group's value changes." }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ @@ -79,7 +79,7 @@ export const item: APISchema = { "The value of the radio item. This should be unique for each radio item in the group.", required: true }, - asChild + ...domElProps("HTMLButtonElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ @@ -114,14 +114,14 @@ export const input: APISchema = { title: "Input", description: "A hidden input that is used to submit the radio group's value with a form. It can receive all the same props/attributes as a normal HTML input.", - props: { asChild } + props: domElProps("HTMLInputElement") }; export const indicator: APISchema = { title: "ItemIndicator", description: "A component which is used to indicate the radio item's checked state. Any children of this component will only be visible when the radio item is checked.", - props: { asChild }, + props: domElProps("HTMLDivElement"), slotProps: { attrs: attrsSlotProp, checked: { diff --git a/src/content/api-reference/range-calendar.ts b/src/content/api-reference/range-calendar.ts index 5a0d37daf..4d6d9dfee 100644 --- a/src/content/api-reference/range-calendar.ts +++ b/src/content/api-reference/range-calendar.ts @@ -1,7 +1,6 @@ import type { APISchema } from "@/types"; import * as C from "@/content/constants.js"; import { - asChild, attrsSlotProp, weekdaysSlotProp, enums, @@ -9,7 +8,7 @@ import { union } from "@/content/api-reference/helpers.js"; import type * as RangeCalendar from "$lib/bits/range-calendar/_types.js"; -import { builderAndAttrsSlotProps } from "./helpers"; +import { builderAndAttrsSlotProps, domElProps } from "./helpers"; export const root: APISchema = { title: "Root", @@ -147,7 +146,7 @@ export const root: APISchema = { description: "The `start` value of the date range, which can exist prior to the true `value` being set, which is only set once a `start` and `end` value are selected. You can `bind:startValue` to a value to receive updates, but modifying this value outside the component will have no effect. To programmatically control the `start` value, use `bind:value` and update the `start` property of the `DateRange` object. This is provided as a convenience for use cases where you want to display the selected `start` value outside the component before the `value` is set." }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { months: monthsSlotProp, @@ -178,11 +177,11 @@ export const cell: APISchema = { title: "Cell", description: "A cell in the calendar grid.", props: { - asChild, date: { type: "DateValue", description: "The date for the cell." - } + }, + ...domElProps("HTMLTableCellElement") }, slotProps: { attrs: attrsSlotProp @@ -203,7 +202,6 @@ export const day: APISchema = { title: "Day", description: "A day in the calendar grid.", props: { - asChild, date: { type: "DateValue", description: "The date for the cell." @@ -211,7 +209,8 @@ export const day: APISchema = { month: { type: "DateValue", description: "The current month the date is being displayed in." - } + }, + ...domElProps("HTMLDivElement") }, slotProps: { disabled: { @@ -284,7 +283,7 @@ export const day: APISchema = { export const grid: APISchema = { title: "Grid", description: "The grid of dates in the calendar, typically representing a month.", - props: { asChild }, + props: domElProps("HTMLTableElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -297,7 +296,7 @@ export const grid: APISchema = { export const gridBody: APISchema = { title: "GridBody", description: "The body of the grid of dates in the calendar.", - props: { asChild }, + props: domElProps("HTMLTableSectionElement"), slotProps: { attrs: attrsSlotProp }, dataAttributes: [ { @@ -310,7 +309,7 @@ export const gridBody: APISchema = { export const gridHead: APISchema = { title: "GridHead", description: "The head of the grid of dates in the calendar.", - props: { asChild }, + props: domElProps("HTMLTableSectionElement"), slotProps: { attrs: attrsSlotProp }, dataAttributes: [ { @@ -323,7 +322,7 @@ export const gridHead: APISchema = { export const gridRow: APISchema = { title: "GridRow", description: "A row in the grid of dates in the calendar.", - props: { asChild }, + props: domElProps("HTMLTableRowElement"), slotProps: { attrs: attrsSlotProp }, dataAttributes: [ { @@ -336,7 +335,7 @@ export const gridRow: APISchema = { export const headCell: APISchema = { title: "HeadCell", description: "A cell in the head of the grid of dates in the calendar.", - props: { asChild }, + props: domElProps("HTMLTableCellElement"), slotProps: { attrs: attrsSlotProp }, dataAttributes: [ { @@ -349,7 +348,7 @@ export const headCell: APISchema = { export const header: APISchema = { title: "Header", description: "The header of the calendar.", - props: { asChild }, + props: domElProps("HTMLElement"), slotProps: { attrs: attrsSlotProp }, dataAttributes: [ { @@ -362,7 +361,7 @@ export const header: APISchema = { export const heading: APISchema = { title: "Heading", description: "The heading of the calendar.", - props: { asChild }, + props: domElProps("HTMLDivElement"), slotProps: { ...builderAndAttrsSlotProps, headingValue: { @@ -381,7 +380,7 @@ export const heading: APISchema = { export const nextButton: APISchema = { title: "NextButton", description: "The next button of the calendar.", - props: { asChild }, + props: domElProps("HTMLButtonElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -394,7 +393,7 @@ export const nextButton: APISchema = { export const prevButton: APISchema = { title: "PrevButton", description: "The previous button of the calendar.", - props: { asChild }, + props: domElProps("HTMLButtonElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { diff --git a/src/content/api-reference/select.ts b/src/content/api-reference/select.ts index febdfcbb0..32f804611 100644 --- a/src/content/api-reference/select.ts +++ b/src/content/api-reference/select.ts @@ -3,15 +3,16 @@ import { arrowProps, asChild, attrsSlotProp, + domElProps, enums, idsSlotProp, portalProp, - transitionProps + transitionProps, + builderAndAttrsSlotProps } from "@/content/api-reference/helpers.js"; import { floatingPositioning } from "./floating.js"; import * as C from "@/content/constants.js"; import type * as Select from "$lib/bits/select/_types.js"; -import { builderAndAttrsSlotProps } from "./helpers"; export const root: APISchema = { title: "Root", @@ -117,7 +118,7 @@ export const root: APISchema = { export const trigger: APISchema = { title: "Trigger", description: "The button element which toggles the select menu's open state.", - props: { asChild }, + props: domElProps("HTMLButtonElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -140,7 +141,7 @@ export const trigger: APISchema = { export const content: APISchema = { title: "Content", description: "The content/menu element which contains the select menu's items.", - props: { ...transitionProps, ...floatingPositioning, asChild }, + props: { ...transitionProps, ...floatingPositioning, ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -168,7 +169,7 @@ export const item: APISchema = { description: "Whether or not the select item is disabled. This will prevent interaction/selection." }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ @@ -219,14 +220,14 @@ export const input: APISchema = { title: "Input", description: "A hidden input element which is used to store the select menu's value, used for form submission. It receives the same value as the `Select.Value` component and can receive any props that a normal input element can receive.", - props: { asChild }, + props: domElProps("HTMLInputElement"), slotProps: { ...builderAndAttrsSlotProps } }; export const group: APISchema = { title: "Group", description: "An accessible group of select menu items.", - props: { asChild }, + props: domElProps("HTMLDivElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -240,7 +241,7 @@ export const label: APISchema = { title: "Label", description: "A label for the select menu which will be skipped when navigating with the keyboard. This must be a child of the `Select.Group` component to be accessible.", - props: { asChild }, + props: domElProps("HTMLLabelElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -253,7 +254,7 @@ export const label: APISchema = { export const separator: APISchema = { title: "Separator", description: "A visual separator for use between select items or groups.", - props: { asChild }, + props: domElProps("HTMLDivElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -266,7 +267,7 @@ export const separator: APISchema = { export const indicator: APISchema = { title: "Separator", description: "A visual separator for use between select items or groups.", - props: { asChild }, + props: domElProps("HTMLDivElement"), slotProps: { attrs: attrsSlotProp, isSelected: { diff --git a/src/content/api-reference/separator.ts b/src/content/api-reference/separator.ts index bf76fdfbd..b14ce2313 100644 --- a/src/content/api-reference/separator.ts +++ b/src/content/api-reference/separator.ts @@ -1,8 +1,7 @@ import type { APISchema } from "@/types"; -import { asChild, enums } from "@/content/api-reference/helpers.js"; +import { enums, builderAndAttrsSlotProps, domElProps } from "@/content/api-reference/helpers.js"; import * as C from "@/content/constants"; import type * as Separator from "$lib/bits/separator/_types"; -import { builderAndAttrsSlotProps } from "./helpers"; export const root: APISchema = { title: "Root", @@ -22,7 +21,7 @@ export const root: APISchema = { description: "Whether the separator is decorative or not, which will determine if it is announce by screen readers." }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ diff --git a/src/content/api-reference/slider.ts b/src/content/api-reference/slider.ts index a1dcd0e8e..bd3d53aaa 100644 --- a/src/content/api-reference/slider.ts +++ b/src/content/api-reference/slider.ts @@ -1,8 +1,7 @@ import type { APISchema } from "@/types"; -import { asChild, enums } from "@/content/api-reference/helpers.js"; +import { enums, builderAndAttrsSlotProps, domElProps } from "@/content/api-reference/helpers.js"; import type * as Slider from "$lib/bits/slider/_types.js"; import * as C from "@/content/constants.js"; -import { builderAndAttrsSlotProps } from "./helpers"; const root: APISchema = { title: "Root", @@ -48,7 +47,7 @@ const root: APISchema = { type: C.NUMBER, description: "The step value of the slider." }, - asChild + ...domElProps("HTMLSpanElement") }, slotProps: { ...builderAndAttrsSlotProps, @@ -74,7 +73,7 @@ const root: APISchema = { const thumb: APISchema = { title: "Thumb", description: "A thumb on the slider.", - props: { asChild }, + props: domElProps("HTMLSpanElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -87,7 +86,7 @@ const thumb: APISchema = { const range: APISchema = { title: "Range", description: "The range of the slider.", - props: { asChild }, + props: domElProps("HTMLSpanElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -100,7 +99,7 @@ const range: APISchema = { const tick: APISchema = { title: "Tick", description: "A tick mark on the slider.", - props: { asChild }, + props: domElProps("HTMLSpanElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { diff --git a/src/content/api-reference/switch.ts b/src/content/api-reference/switch.ts index 4bd31d21b..3c573cc2f 100644 --- a/src/content/api-reference/switch.ts +++ b/src/content/api-reference/switch.ts @@ -1,8 +1,8 @@ import type { APISchema } from "@/types"; -import { asChild, attrsSlotProp, enums } from "@/content/api-reference/helpers.js"; +import { attrsSlotProp, enums } from "@/content/api-reference/helpers.js"; import type * as Switch from "$lib/bits/switch/_types.js"; import * as C from "@/content/constants.js"; -import { builderAndAttrsSlotProps } from "./helpers"; +import { builderAndAttrsSlotProps, domElProps } from "./helpers"; const root: APISchema = { title: "Root", @@ -50,7 +50,7 @@ const root: APISchema = { description: "The value of the hidden input element to be used in form submissions when the switch is checked." }, - asChild + ...domElProps("HTMLButtonElement") }, slotProps: { ...builderAndAttrsSlotProps @@ -80,7 +80,7 @@ const root: APISchema = { const thumb: APISchema = { title: "Thumb", description: "The thumb on the switch used to indicate the switch's state.", - props: { asChild }, + props: domElProps("HTMLSpanElement"), slotProps: { attrs: attrsSlotProp, checked: { diff --git a/src/content/api-reference/tabs.ts b/src/content/api-reference/tabs.ts index ee035d4f3..6e703cf0c 100644 --- a/src/content/api-reference/tabs.ts +++ b/src/content/api-reference/tabs.ts @@ -1,8 +1,12 @@ import type { APISchema } from "@/types"; import * as C from "@/content/constants.js"; -import { union, enums, asChild } from "@/content/api-reference/helpers.js"; +import { + union, + enums, + builderAndAttrsSlotProps, + domElProps +} from "@/content/api-reference/helpers.js"; import type * as Tabs from "$lib/bits/tabs/_types.js"; -import { builderAndAttrsSlotProps } from "./helpers"; const root: APISchema = { title: "Root", @@ -45,7 +49,7 @@ const root: APISchema = { }, description: "The orientation of the tabs." }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps, @@ -70,7 +74,7 @@ const root: APISchema = { const list: APISchema = { title: "List", description: "The component containing the tab triggers.", - props: { asChild }, + props: domElProps("HTMLDivElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -99,7 +103,7 @@ const trigger: APISchema = { type: C.BOOLEAN, description: "Whether or not the tab is disabled." }, - asChild + ...domElProps("HTMLButtonElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ @@ -139,7 +143,7 @@ const content: APISchema = { type: "string", description: "The value of the tab this content represents." }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ diff --git a/src/content/api-reference/toggle-group.ts b/src/content/api-reference/toggle-group.ts index 8d0f607c3..bdfc580d3 100644 --- a/src/content/api-reference/toggle-group.ts +++ b/src/content/api-reference/toggle-group.ts @@ -1,8 +1,12 @@ import type { APISchema } from "@/types"; -import { asChild, enums } from "@/content/api-reference/helpers.js"; +import { + enums, + union, + builderAndAttrsSlotProps, + domElProps +} from "@/content/api-reference/helpers.js"; import type * as ToggleGroup from "$lib/bits/toggle-group/_types.js"; import * as C from "@/content/constants.js"; -import { union, builderAndAttrsSlotProps } from "./helpers"; const root: APISchema> = { title: "Root", @@ -46,7 +50,7 @@ const root: APISchema> = { description: "The type of toggle group.", type: enums("single", "multiple") }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ @@ -74,7 +78,7 @@ const item: APISchema = { type: C.BOOLEAN, description: "Whether or not the switch is disabled." }, - asChild + ...domElProps("HTMLButtonElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ diff --git a/src/content/api-reference/toggle.ts b/src/content/api-reference/toggle.ts index d5f205dc8..725d1a44a 100644 --- a/src/content/api-reference/toggle.ts +++ b/src/content/api-reference/toggle.ts @@ -1,8 +1,7 @@ import type { APISchema } from "@/types"; -import { asChild, enums } from "@/content/api-reference/helpers.js"; +import { enums, builderAndAttrsSlotProps, domElProps } from "@/content/api-reference/helpers.js"; import type * as Toggle from "$lib/bits/toggle/_types.js"; import * as C from "@/content/constants.js"; -import { builderAndAttrsSlotProps } from "./helpers"; const root: APISchema = { title: "Root", @@ -25,7 +24,7 @@ const root: APISchema = { type: C.BOOLEAN, description: "Whether or not the switch is disabled." }, - asChild + ...domElProps("HTMLButtonElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ diff --git a/src/content/api-reference/toolbar.ts b/src/content/api-reference/toolbar.ts index d1e7109a0..b25b15e4c 100644 --- a/src/content/api-reference/toolbar.ts +++ b/src/content/api-reference/toolbar.ts @@ -1,8 +1,13 @@ import type { APISchema } from "@/types"; -import { asChild, enums } from "@/content/api-reference/helpers.js"; +import { + enums, + union, + builderAndAttrsSlotProps, + domElProps +} from "@/content/api-reference/helpers.js"; import type * as Toolbar from "$lib/bits/toolbar/_types.js"; import * as C from "@/content/constants.js"; -import { union, builderAndAttrsSlotProps } from "./helpers"; +import {} from "./helpers"; const root: APISchema = { title: "Root", @@ -21,7 +26,7 @@ const root: APISchema = { }, description: "The orientation of the toolbar." }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ @@ -39,7 +44,7 @@ const root: APISchema = { const button: APISchema = { title: "Button", description: "A button in the toolbar.", - props: { asChild }, + props: domElProps("HTMLButtonElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -52,7 +57,7 @@ const button: APISchema = { const link: APISchema = { title: "Link", description: "A link in the toolbar.", - props: { asChild }, + props: domElProps("HTMLAnchorElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -91,7 +96,7 @@ const group: APISchema> = { definition: enums("single", "multiple") } }, - asChild + ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ @@ -116,7 +121,7 @@ const groupItem: APISchema = { type: C.BOOLEAN, description: "Whether or not the item is disabled." }, - asChild + ...domElProps("HTMLButtonElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ diff --git a/src/content/api-reference/tooltip.ts b/src/content/api-reference/tooltip.ts index 0c8ce473f..95950e816 100644 --- a/src/content/api-reference/tooltip.ts +++ b/src/content/api-reference/tooltip.ts @@ -1,16 +1,16 @@ import type { APISchema } from "@/types"; import { arrowProps, - asChild, enums, idsSlotProp, portalProp, - transitionProps + transitionProps, + builderAndAttrsSlotProps, + domElProps } from "@/content/api-reference/helpers.js"; import { floatingPositioning } from "./floating.js"; import type * as Tooltip from "$lib/bits/tooltip/_types"; import * as C from "@/content/constants"; -import { builderAndAttrsSlotProps } from "./helpers"; export const root: APISchema = { title: "Root", @@ -71,7 +71,7 @@ export const trigger: APISchema = { title: "Trigger", description: "A component which triggers the opening and closing of the tooltip on hover or focus.", - props: { asChild }, + props: domElProps("HTMLButtonElement"), slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { @@ -90,7 +90,7 @@ export const trigger: APISchema = { export const content: APISchema = { title: "Content", description: "The contents of the tooltip which are displayed when the tooltip is open.", - props: { ...transitionProps, ...floatingPositioning, asChild }, + props: { ...transitionProps, ...floatingPositioning, ...domElProps("HTMLDivElement") }, slotProps: { ...builderAndAttrsSlotProps }, dataAttributes: [ { diff --git a/src/lib/bits/accordion/_types.ts b/src/lib/bits/accordion/_types.ts index ecbb83d7d..d0a18f1a0 100644 --- a/src/lib/bits/accordion/_types.ts +++ b/src/lib/bits/accordion/_types.ts @@ -5,8 +5,8 @@ import type { OmitForceVisible, Expand, OnChangeFn, - AsChild, - TransitionProps + TransitionProps, + DOMElement } from "$lib/internal/index.js"; import type { CreateAccordionProps, @@ -26,10 +26,10 @@ type Props = Expand< * A callback function called when the value changes. */ onValueChange?: OnChangeFn["defaultValue"]>; - } & AsChild + } & DOMElement >; -type ItemProps = Expand & AsChild>; +type ItemProps = Expand & DOMElement>; type HeaderProps = Expand< { @@ -37,15 +37,15 @@ type HeaderProps = Expand< * The heading level of the accordion header. */ level?: ObjectVariation["level"]; - } & AsChild + } & DOMElement >; -type TriggerProps = AsChild; +type TriggerProps = DOMElement; type ContentProps< T extends Transition = Transition, In extends Transition = Transition, Out extends Transition = Transition -> = Expand & AsChild>; +> = Expand & DOMElement>; export type { Props, ItemProps, HeaderProps, TriggerProps, ContentProps }; diff --git a/src/lib/bits/accordion/components/accordion-content.svelte b/src/lib/bits/accordion/components/accordion-content.svelte index 364126852..3cfce7777 100644 --- a/src/lib/bits/accordion/components/accordion-content.svelte +++ b/src/lib/bits/accordion/components/accordion-content.svelte @@ -18,6 +18,7 @@ export let outTransition: $$Props["outTransition"] = undefined; export let outTransitionConfig: $$Props["outTransitionConfig"] = undefined; export let asChild: $$Props["asChild"] = false; + export let el: $$Props["el"] = undefined; const { content, isSelected, props } = getContent(); @@ -31,6 +32,7 @@ {:else if transition && $isSelected(props)}
{:else if inTransition && outTransition && $isSelected(props)}
{:else if inTransition && $isSelected(props)} -
+
{:else if outTransition && $isSelected(props)}
{:else if $isSelected(props)} -
+
{/if} diff --git a/src/lib/bits/accordion/components/accordion-header.svelte b/src/lib/bits/accordion/components/accordion-header.svelte index 6a3173dbb..9efe0f826 100644 --- a/src/lib/bits/accordion/components/accordion-header.svelte +++ b/src/lib/bits/accordion/components/accordion-header.svelte @@ -7,6 +7,7 @@ export let level = 3; export let asChild: $$Props["asChild"] = false; + export let el: $$Props["el"] = undefined; const { elements: { heading: header } @@ -21,7 +22,7 @@ {#if asChild} {:else} -
+
{/if} diff --git a/src/lib/bits/accordion/components/accordion-item.svelte b/src/lib/bits/accordion/components/accordion-item.svelte index 5caf10f66..180075a8d 100644 --- a/src/lib/bits/accordion/components/accordion-item.svelte +++ b/src/lib/bits/accordion/components/accordion-item.svelte @@ -7,6 +7,7 @@ export let value: $$Props["value"]; export let disabled: $$Props["disabled"] = undefined; export let asChild: $$Props["asChild"] = false; + export let el: $$Props["el"] = undefined; const { item, props } = setItem({ value, disabled }); const attrs = getAttrs("item"); @@ -18,7 +19,7 @@ {#if asChild} {:else} -
+
{/if} diff --git a/src/lib/bits/accordion/components/accordion-trigger.svelte b/src/lib/bits/accordion/components/accordion-trigger.svelte index bfb75aeae..559ce5e3e 100644 --- a/src/lib/bits/accordion/components/accordion-trigger.svelte +++ b/src/lib/bits/accordion/components/accordion-trigger.svelte @@ -7,7 +7,8 @@ type $$Props = TriggerProps; type $$Events = TriggerEvents; - export let asChild: TriggerProps["asChild"] = false; + export let asChild: $$Props["asChild"] = false; + export let el: $$Props["el"] = undefined; const { trigger, props } = getTrigger(); const dispatch = createDispatcher(); @@ -21,6 +22,7 @@ {:else} {/if} diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-prev-button.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-prev-button.svelte index 2ebb70eb8..eed8d33c2 100644 --- a/src/lib/bits/date-range-picker/components/date-range-picker-prev-button.svelte +++ b/src/lib/bits/date-range-picker/components/date-range-picker-prev-button.svelte @@ -6,6 +6,7 @@ type $$Props = PrevButtonProps; export let asChild: $$Props["asChild"] = false; + export let el: $$Props["el"] = undefined; const { elements: { prevButton } @@ -20,7 +21,7 @@ {#if asChild} {:else} - {/if} diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-segment.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-segment.svelte index 1d3679063..dbcd2733d 100644 --- a/src/lib/bits/date-range-picker/components/date-range-picker-segment.svelte +++ b/src/lib/bits/date-range-picker/components/date-range-picker-segment.svelte @@ -9,6 +9,7 @@ export let id: $$Props["id"] = undefined; export let part: $$Props["part"]; export let type: $$Props["type"]; + export let el: $$Props["el"] = undefined; const { elements: { startSegment, endSegment }, @@ -32,7 +33,7 @@ {#if asChild} {:else} -
+
{/if} diff --git a/src/lib/bits/date-range-picker/components/date-range-picker-trigger.svelte b/src/lib/bits/date-range-picker/components/date-range-picker-trigger.svelte index 2b1e724fd..f160787e0 100644 --- a/src/lib/bits/date-range-picker/components/date-range-picker-trigger.svelte +++ b/src/lib/bits/date-range-picker/components/date-range-picker-trigger.svelte @@ -9,6 +9,7 @@ export let asChild: $$Props["asChild"] = false; export let id: $$Props["id"] = undefined; + export let el: $$Props["el"] = undefined; const { elements: { trigger }, @@ -30,6 +31,7 @@ {:else}