diff --git a/package.json b/package.json index 074da0b83..34d4abc43 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "prettier": "^3.2.5", "prettier-plugin-svelte": "^3.2.2", "prettier-plugin-tailwindcss": "0.5.13", - "svelte": "5.0.0-next.107", + "svelte": "5.0.0-next.108", "svelte-eslint-parser": "^0.34.1", "wrangler": "^3.44.0" }, diff --git a/packages/bits-ui/package.json b/packages/bits-ui/package.json index 55443750d..d3c216f40 100644 --- a/packages/bits-ui/package.json +++ b/packages/bits-ui/package.json @@ -43,7 +43,7 @@ "jsdom": "^24.0.0", "publint": "^0.2.7", "resize-observer-polyfill": "^1.5.1", - "svelte": "5.0.0-next.107", + "svelte": "5.0.0-next.108", "svelte-check": "^3.6.9", "tslib": "^2.6.2", "typescript": "^5.3.3", diff --git a/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts b/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts index 27b0abea5..c7385fe9c 100644 --- a/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts +++ b/packages/bits-ui/src/lib/bits/accordion/accordion.svelte.ts @@ -5,7 +5,6 @@ import { type EventCallback, type ReadonlyBox, type ReadonlyBoxedValues, - boxedState, composeHandlers, getAriaDisabled, getAriaExpanded, @@ -28,9 +27,13 @@ type AccordionBaseStateProps = ReadonlyBoxedValues<{ }>; class AccordionBaseState { - id: ReadonlyBox; + id = undefined as unknown as ReadonlyBox; node: Box; disabled: ReadonlyBox; + props = $derived({ + id: this.id.value, + "data-accordion-root": "", + } as const); constructor(props: AccordionBaseStateProps) { this.id = props.id; @@ -45,13 +48,6 @@ class AccordionBaseState { this.node.value.querySelectorAll("[data-accordion-trigger]") ).filter((el) => !el.dataset.disabled); } - - get props() { - return { - id: this.id.value, - "data-accordion-root": "", - } as const; - } } /** @@ -118,38 +114,25 @@ type AccordionItemStateProps = ReadonlyBoxedValues<{ }; export class AccordionItemState { - #value: ReadonlyBox; - disabled: ReadonlyBox; - root: AccordionState; + value = undefined as unknown as ReadonlyBox; + disabled = undefined as unknown as ReadonlyBox; + root = undefined as unknown as AccordionState; + isSelected = $derived(this.root.includesItem(this.value.value)); + isDisabled = $derived(this.disabled.value || this.root.disabled.value); + props = $derived({ + "data-accordion-item": "", + "data-state": getDataOpenClosed(this.isSelected), + "data-disabled": getDataDisabled(this.isDisabled), + } as const); constructor(props: AccordionItemStateProps) { - this.#value = props.value; + this.value = props.value; this.disabled = props.disabled; this.root = props.rootState; } - get value() { - return this.#value.value; - } - - get isSelected() { - return this.root.includesItem(this.value); - } - - get isDisabled() { - return this.disabled.value || this.root.disabled.value; - } - updateValue() { - this.root.toggleItem(this.value); - } - - get props() { - return { - "data-accordion-item": "", - "data-state": getDataOpenClosed(this.isSelected), - "data-disabled": getDataDisabled(this.isDisabled), - } as const; + this.root.toggleItem(this.value.value); } createTrigger(props: AccordionTriggerStateProps) { @@ -173,13 +156,29 @@ type AccordionTriggerStateProps = ReadonlyBoxedValues<{ }>; class AccordionTriggerState { - #disabled: ReadonlyBox; - #id: ReadonlyBox; + #disabled = undefined as unknown as ReadonlyBox; + #id = undefined as unknown as ReadonlyBox; #node: Box; - #root: AccordionState; - #itemState: AccordionItemState; - #composedClick: EventCallback; - #composedKeydown: EventCallback; + #root = undefined as unknown as AccordionState; + #itemState = undefined as unknown as AccordionItemState; + #composedClick = undefined as unknown as EventCallback; + #composedKeydown = undefined as unknown as EventCallback; + #isDisabled = $derived( + this.#disabled.value || this.#itemState.disabled.value || this.#root.disabled.value + ); + props = $derived({ + id: this.#id.value, + disabled: this.#isDisabled, + "aria-expanded": getAriaExpanded(this.#itemState.isSelected), + "aria-disabled": getAriaDisabled(this.#isDisabled), + "data-disabled": getDataDisabled(this.#isDisabled), + "data-value": this.#itemState.value, + "data-state": getDataOpenClosed(this.#itemState.isSelected), + "data-accordion-trigger": "", + // + onclick: this.#composedClick, + onkeydown: this.#composedKeydown, + } as const); constructor(props: AccordionTriggerStateProps, itemState: AccordionItemState) { this.#disabled = props.disabled; @@ -192,10 +191,6 @@ class AccordionTriggerState { this.#node = useNodeById(this.#id); } - get #isDisabled() { - return this.#disabled.value || this.#itemState.disabled.value || this.#root.disabled.value; - } - #onclick = () => { if (this.#isDisabled) return; this.#itemState.updateValue(); @@ -228,22 +223,6 @@ class AccordionTriggerState { candidateItems[keyToIndex[e.key]!]?.focus(); }; - - get props() { - return { - id: this.#id.value, - disabled: this.#isDisabled, - "aria-expanded": getAriaExpanded(this.#itemState.isSelected), - "aria-disabled": getAriaDisabled(this.#isDisabled), - "data-disabled": getDataDisabled(this.#isDisabled), - "data-value": this.#itemState.value, - "data-state": getDataOpenClosed(this.#itemState.isSelected), - "data-accordion-trigger": "", - // - onclick: this.#composedClick, - onkeydown: this.#composedKeydown, - } as const; - } } /** @@ -257,15 +236,28 @@ type AccordionContentStateProps = ReadonlyBoxedValues<{ }>; class AccordionContentState { - item: AccordionItemState; + item = undefined as unknown as AccordionItemState; node: Box; - #id: ReadonlyBox; + #id = undefined as unknown as ReadonlyBox; #originalStyles: { transitionDuration: string; animationName: string } | undefined = undefined; #isMountAnimationPrevented = false; #width = $state(0); #height = $state(0); - #forceMount: ReadonlyBox; - #styleProp: ReadonlyBox; + #forceMount = undefined as unknown as ReadonlyBox; + #styleProp = undefined as unknown as ReadonlyBox; + props = $derived({ + id: this.#id.value, + "data-state": getDataOpenClosed(this.item.isSelected), + "data-disabled": getDataDisabled(this.item.isDisabled), + "data-value": this.item.value, + "data-accordion-content": "", + style: styleToString({ + ...this.#styleProp.value, + "--bits-accordion-content-height": `${this.#height}px`, + "--bits-accordion-content-width": `${this.#width}px`, + }), + } as const); + present = $derived(this.#forceMount.value || this.item.isSelected); constructor(props: AccordionContentStateProps, item: AccordionItemState) { this.item = item; @@ -317,25 +309,6 @@ class AccordionContentState { }); }); } - - get present() { - return this.#forceMount.value || this.item.isSelected; - } - - get props() { - return { - id: this.#id.value, - "data-state": getDataOpenClosed(this.item.isSelected), - "data-disabled": getDataDisabled(this.item.isDisabled), - "data-value": this.item.value, - "data-accordion-content": "", - style: styleToString({ - ...this.#styleProp.value, - "--bits-accordion-content-height": `${this.#height}px`, - "--bits-accordion-content-width": `${this.#width}px`, - }), - } as const; - } } // diff --git a/packages/bits-ui/src/lib/bits/checkbox/checkbox.svelte.ts b/packages/bits-ui/src/lib/bits/checkbox/checkbox.svelte.ts index cb6413b2c..1504e1eb4 100644 --- a/packages/bits-ui/src/lib/bits/checkbox/checkbox.svelte.ts +++ b/packages/bits-ui/src/lib/bits/checkbox/checkbox.svelte.ts @@ -35,13 +35,31 @@ function getCheckboxDataState(checked: boolean | "indeterminate") { } class CheckboxRootState { - checked: Box; - disabled: ReadonlyBox; - required: ReadonlyBox; + checked = undefined as unknown as Box; + disabled = undefined as unknown as ReadonlyBox; + required = undefined as unknown as ReadonlyBox; name: ReadonlyBox; value: ReadonlyBox; - #composedClick: EventCallback; - #composedKeydown: EventCallback; + #composedClick = undefined as unknown as EventCallback; + #composedKeydown = undefined as unknown as EventCallback; + props = $derived({ + "data-disabled": getDataDisabled(this.disabled.value), + "data-state": getCheckboxDataState(this.checked.value), + role: "checkbox", + type: "button", + "aria-checked": getAriaChecked(this.checked.value), + "aria-required": getAriaRequired(this.required.value), + "data-checkbox-root": "", + disabled: this.disabled.value, + // + onclick: this.#composedClick, + onkeydown: this.#composedKeydown, + } as const); + indicatorprops = $derived({ + "data-disabled": getDataDisabled(this.disabled.value), + "data-state": getCheckboxDataState(this.checked.value), + "data-checkbox-indicator": "", + } as const); constructor(props: CheckboxRootStateProps) { this.checked = props.checked; @@ -69,30 +87,6 @@ class CheckboxRootState { createInput() { return new CheckboxInputState(this); } - - get indicatorProps() { - return { - "data-disabled": getDataDisabled(this.disabled.value), - "data-state": getCheckboxDataState(this.checked.value), - "data-checkbox-indicator": "", - } as const; - } - - get props() { - return { - "data-disabled": getDataDisabled(this.disabled.value), - "data-state": getCheckboxDataState(this.checked.value), - role: "checkbox", - type: "button", - "aria-checked": getAriaChecked(this.checked.value), - "aria-required": getAriaRequired(this.required.value), - "data-checkbox-root": "", - disabled: this.disabled.value, - // - onclick: this.#composedClick, - onkeydown: this.#composedKeydown, - } as const; - } } /** @@ -100,27 +94,21 @@ class CheckboxRootState { */ class CheckboxInputState { - root: CheckboxRootState; + root = undefined as unknown as CheckboxRootState; + props = $derived({ + type: "checkbox", + checked: this.root.checked.value === true, + disabled: this.root.disabled.value, + required: this.root.required.value, + name: this.root.name.value, + value: this.root.value.value, + "data-checkbox-input": "", + } as const); + shouldRender = $derived(this.root.name.value !== undefined); constructor(root: CheckboxRootState) { this.root = root; } - - get shouldRender() { - return this.root.name.value !== undefined; - } - - get props() { - return { - type: "checkbox", - checked: this.root.checked.value === true, - disabled: this.root.disabled.value, - required: this.root.required.value, - name: this.root.name.value, - value: this.root.value.value, - "data-checkbox-input": "", - } as const; - } } /** diff --git a/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts b/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts index fcc5d62b0..1bb27b76b 100644 --- a/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts +++ b/packages/bits-ui/src/lib/bits/collapsible/collapsible.svelte.ts @@ -25,23 +25,20 @@ type CollapsibleRootStateProps = BoxedValues<{ }>; class CollapsibleRootState { - open: Box; - disabled: ReadonlyBox; + open = undefined as unknown as Box; + disabled = undefined as unknown as ReadonlyBox; contentId = readonlyBoxedState(generateId()); + props = $derived({ + "data-state": getDataOpenClosed(this.open.value), + "data-disabled": getDataDisabled(this.disabled.value), + "data-collapsible-root": "", + } as const); constructor(props: CollapsibleRootStateProps) { this.open = props.open; this.disabled = props.disabled; } - get props() { - return { - "data-state": getDataOpenClosed(this.open.value), - "data-disabled": getDataDisabled(this.disabled.value), - "data-collapsible-root": "", - } as const; - } - toggleOpen() { this.open.value = !this.open.value; } @@ -62,14 +59,26 @@ type CollapsibleContentStateProps = ReadonlyBoxedValues<{ }>; class CollapsibleContentState { - root: CollapsibleRootState; + root = undefined as unknown as CollapsibleRootState; #originalStyles: { transitionDuration: string; animationName: string } | undefined; - #styleProp: ReadonlyBox; + #styleProp = undefined as unknown as ReadonlyBox; node = boxedState(null); #isMountAnimationPrevented = $state(false); #width = $state(0); #height = $state(0); - #forceMount: ReadonlyBox; + #forceMount = undefined as unknown as ReadonlyBox; + props = $derived({ + id: this.root.contentId.value, + "data-state": getDataOpenClosed(this.root.open.value), + "data-disabled": getDataDisabled(this.root.disabled.value), + "data-collapsible-content": "", + style: styleToString({ + ...this.#styleProp.value, + "--bits-collapsible-content-height": this.#height ? `${this.#height}px` : undefined, + "--bits-collapsible-content-width": this.#width ? `${this.#width}px` : undefined, + }), + } as const); + present = $derived(this.#forceMount.value || this.root.open.value); constructor(props: CollapsibleContentStateProps, root: CollapsibleRootState) { this.root = root; @@ -121,24 +130,6 @@ class CollapsibleContentState { }); }); } - - get present() { - return this.#forceMount.value || this.root.open.value; - } - - get props() { - return { - id: this.root.contentId.value, - "data-state": getDataOpenClosed(this.root.open.value), - "data-disabled": getDataDisabled(this.root.disabled.value), - "data-collapsible-content": "", - style: styleToString({ - ...this.#styleProp.value, - "--bits-collapsible-content-height": this.#height ? `${this.#height}px` : undefined, - "--bits-collapsible-content-width": this.#width ? `${this.#width}px` : undefined, - }), - } as const; - } } type CollapsibleTriggerStateProps = ReadonlyBoxedValues<{ @@ -146,8 +137,19 @@ type CollapsibleTriggerStateProps = ReadonlyBoxedValues<{ }>; class CollapsibleTriggerState { - #root: CollapsibleRootState; - #composedClick: EventCallback; + #root = undefined as unknown as CollapsibleRootState; + #composedClick = undefined as unknown as EventCallback; + props = $derived({ + type: "button", + "aria-controls": this.#root.contentId.value, + "aria-expanded": getAriaExpanded(this.#root.open.value), + "data-state": getDataOpenClosed(this.#root.open.value), + "data-disabled": getDataDisabled(this.#root.disabled.value), + disabled: this.#root.disabled.value, + "data-collapsible-trigger": "", + // + onclick: this.#composedClick, + } as const); constructor(props: CollapsibleTriggerStateProps, root: CollapsibleRootState) { this.#root = root; @@ -157,20 +159,6 @@ class CollapsibleTriggerState { #onclick = () => { this.#root.toggleOpen(); }; - - get props() { - return { - type: "button", - "aria-controls": this.#root.contentId.value, - "aria-expanded": getAriaExpanded(this.#root.open.value), - "data-state": getDataOpenClosed(this.#root.open.value), - "data-disabled": getDataDisabled(this.#root.disabled.value), - disabled: this.#root.disabled.value, - "data-collapsible-trigger": "", - // - onclick: this.#composedClick, - } as const; - } } export const COLLAPSIBLE_ROOT_KEY = Symbol("Collapsible.Root"); diff --git a/packages/bits-ui/src/lib/bits/label/label.svelte.ts b/packages/bits-ui/src/lib/bits/label/label.svelte.ts index 409bf5482..0b4d9c385 100644 --- a/packages/bits-ui/src/lib/bits/label/label.svelte.ts +++ b/packages/bits-ui/src/lib/bits/label/label.svelte.ts @@ -6,7 +6,11 @@ type LabelRootStateProps = ReadonlyBoxedValues<{ }>; class LabelRootState { - #composedMousedown: EventCallback; + #composedMousedown = undefined as unknown as EventCallback; + props = $derived({ + "data-label-root": "", + onmousedown: this.#composedMousedown, + }); constructor(props: LabelRootStateProps) { this.#composedMousedown = composeHandlers(props.onmousedown, this.#onmousedown); @@ -15,13 +19,6 @@ class LabelRootState { #onmousedown = (e: MouseEvent) => { if (e.detail > 1) e.preventDefault(); }; - - get props() { - return { - "data-label-root": "", - onmousedown: this.#composedMousedown, - }; - } } export function setLabelRootState(props: LabelRootStateProps) { diff --git a/packages/bits-ui/src/lib/bits/progress/progress.svelte.ts b/packages/bits-ui/src/lib/bits/progress/progress.svelte.ts index 1b5f61754..68a0f102e 100644 --- a/packages/bits-ui/src/lib/bits/progress/progress.svelte.ts +++ b/packages/bits-ui/src/lib/bits/progress/progress.svelte.ts @@ -6,28 +6,25 @@ type ProgressRootStateProps = ReadonlyBoxedValues<{ }>; class ProgressRootState { - #value: ProgressRootStateProps["value"]; - #max: ProgressRootStateProps["max"]; + #value = undefined as unknown as ProgressRootStateProps["value"]; + #max = undefined as unknown as ProgressRootStateProps["max"]; + props = $derived({ + role: "meter", + value: this.#value.value, + max: this.#max.value, + "aria-valuemin": 0, + "aria-valuemax": this.#max.value, + "aria-valuenow": this.#value.value, + "data-value": this.#value.value, + "data-state": getProgressDataState(this.#value.value, this.#max.value), + "data-max": this.#max.value, + "data-progress-root": "", + } as const); constructor(props: ProgressRootStateProps) { this.#value = props.value; this.#max = props.max; } - - get props() { - return { - role: "meter", - value: this.#value.value, - max: this.#max.value, - "aria-valuemin": 0, - "aria-valuemax": this.#max.value, - "aria-valuenow": this.#value.value, - "data-value": this.#value.value, - "data-state": getProgressDataState(this.#value.value, this.#max.value), - "data-max": this.#max.value, - "data-progress-root": "", - } as const; - } } // diff --git a/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts b/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts index f6de2a3f5..7ce9f27dc 100644 --- a/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts +++ b/packages/bits-ui/src/lib/bits/radio-group/radio-group.svelte.ts @@ -25,15 +25,23 @@ type RadioGroupRootStateProps = ReadonlyBoxedValues<{ BoxedValues<{ value: string }>; class RadioGroupRootState { - id: RadioGroupRootStateProps["id"]; + id = undefined as unknown as RadioGroupRootStateProps["id"]; node: Box; - disabled: RadioGroupRootStateProps["disabled"]; - required: RadioGroupRootStateProps["required"]; + disabled = undefined as unknown as RadioGroupRootStateProps["disabled"]; + required = undefined as unknown as RadioGroupRootStateProps["required"]; loop: RadioGroupRootStateProps["loop"]; - orientation: RadioGroupRootStateProps["orientation"]; + orientation = undefined as unknown as RadioGroupRootStateProps["orientation"]; name: RadioGroupRootStateProps["name"]; value: RadioGroupRootStateProps["value"]; activeTabIndexNode = boxedState(null); + props = $derived({ + id: this.id.value, + role: "radiogroup", + "aria-required": getAriaRequired(this.required.value), + "data-disabled": getDataDisabled(this.disabled.value), + "data-orientation": this.orientation.value, + "data-radio-group": "", + } as const); constructor(props: RadioGroupRootStateProps) { this.id = props.id; @@ -69,17 +77,6 @@ class RadioGroupRootState { createInput() { return new RadioGroupInputState(this); } - - get props() { - return { - id: this.id.value, - role: "radiogroup", - "aria-required": getAriaRequired(this.required.value), - "data-disabled": getDataDisabled(this.disabled.value), - "data-orientation": this.orientation.value, - "data-radio-group": "", - } as const; - } } // @@ -95,14 +92,38 @@ type RadioGroupItemStateProps = ReadonlyBoxedValues<{ }>; class RadioGroupItemState { - #id: RadioGroupItemStateProps["id"]; - #node: Box; + #id = undefined as unknown as RadioGroupItemStateProps["id"]; + #node = undefined as unknown as Box; #root = undefined as unknown as RadioGroupRootState; - #disabled: RadioGroupItemStateProps["disabled"]; + #disabled = undefined as unknown as RadioGroupItemStateProps["disabled"]; #value = undefined as unknown as RadioGroupItemStateProps["value"]; - #composedClick: EventCallback; - #composedKeydown: EventCallback; + #composedClick = undefined as unknown as EventCallback; + #composedKeydown = undefined as unknown as EventCallback; checked = $derived(this.#root.value.value === this.#value.value); + #isDisabled = $derived(this.#disabled.value || this.#root.disabled.value); + #isChecked = $derived(this.#root.isChecked(this.#value.value)); + props = $derived({ + id: this.#id.value, + disabled: this.#isDisabled ? true : undefined, + "data-value": this.#value.value, + "data-orientation": this.#root.orientation.value, + "data-disabled": getDataDisabled(this.#isDisabled), + "data-state": this.#isChecked ? "checked" : "unchecked", + "aria-checked": getAriaChecked(this.#isChecked), + "data-radio-group-item": "", + type: "button", + role: "radio", + tabIndex: this.#root.activeTabIndexNode.value === this.#node.value ? 0 : -1, + // + onclick: this.#composedClick, + onkeydown: this.#composedKeydown, + } as const); + + indicatorProps = $derived({ + "data-disabled": getDataDisabled(this.#isDisabled), + "data-state": this.#isChecked ? "checked" : "unchecked", + "data-radio-group-item-indicator": "", + } as const); constructor(props: RadioGroupItemStateProps, root: RadioGroupRootState) { this.#disabled = props.disabled; @@ -156,41 +177,6 @@ class RadioGroupItemState { itemToFocus.focus(); this.#root.selectValue(itemToFocus.dataset.value as string); }; - - get #isDisabled() { - return this.#disabled.value || this.#root.disabled.value; - } - - get #isChecked() { - return this.#root.isChecked(this.#value.value); - } - - get indicatorProps() { - return { - "data-disabled": getDataDisabled(this.#isDisabled), - "data-state": this.#isChecked ? "checked" : "unchecked", - "data-radio-group-item-indicator": "", - } as const; - } - - get props() { - return { - id: this.#id.value, - disabled: this.#isDisabled ? true : undefined, - "data-value": this.#value.value, - "data-orientation": this.#root.orientation.value, - "data-disabled": getDataDisabled(this.#isDisabled), - "data-state": this.#isChecked ? "checked" : "unchecked", - "aria-checked": getAriaChecked(this.#isChecked), - "data-radio-group-item": "", - type: "button", - role: "radio", - tabIndex: this.#root.activeTabIndexNode.value === this.#node.value ? 0 : -1, - // - onclick: this.#composedClick, - onkeydown: this.#composedKeydown, - } as const; - } } // @@ -200,23 +186,20 @@ class RadioGroupItemState { class RadioGroupInputState { #root = undefined as unknown as RadioGroupRootState; shouldRender = $derived(this.#root.name.value !== undefined); + props = $derived({ + name: this.#root.name.value, + value: this.#root.value.value, + required: this.#root.required.value, + disabled: this.#root.disabled.value, + "aria-hidden": "true", + hidden: true, + style: styleToString(srOnlyStyles), + tabIndex: -1, + } as const); constructor(root: RadioGroupRootState) { this.#root = root; } - - get props() { - return { - name: this.#root.name.value, - value: this.#root.value.value, - required: this.#root.required.value, - disabled: this.#root.disabled.value, - "aria-hidden": "true", - hidden: true, - style: styleToString(srOnlyStyles), - tabIndex: -1, - } as const; - } } // diff --git a/packages/bits-ui/src/lib/bits/separator/separator.svelte.ts b/packages/bits-ui/src/lib/bits/separator/separator.svelte.ts index effc5f7c6..b0bbb07ca 100644 --- a/packages/bits-ui/src/lib/bits/separator/separator.svelte.ts +++ b/packages/bits-ui/src/lib/bits/separator/separator.svelte.ts @@ -8,23 +8,20 @@ type SeparatorRootStateProps = ReadonlyBoxedValues<{ }>; class SeparatorRootState { - #orientation: ReadonlyBox; - #decorative: ReadonlyBox; + #orientation = undefined as unknown as ReadonlyBox; + #decorative = undefined as unknown as ReadonlyBox; + props = $derived({ + role: this.#decorative.value ? "none" : "separator", + "aria-orientation": getAriaOrientation(this.#orientation.value), + "aria-hidden": getAriaHidden(this.#decorative.value), + "data-orientation": getDataOrientation(this.#orientation.value), + "data-bits-separator-root": "", + } as const); constructor(props: SeparatorRootStateProps) { this.#orientation = props.orientation; this.#decorative = props.decorative; } - - get props() { - return { - role: this.#decorative.value ? "none" : "separator", - "aria-orientation": getAriaOrientation(this.#orientation.value), - "aria-hidden": getAriaHidden(this.#decorative.value), - "data-orientation": getDataOrientation(this.#orientation.value), - "data-bits-separator-root": "", - }; - } } export function setSeparatorRootState(props: SeparatorRootStateProps) { diff --git a/packages/bits-ui/src/lib/bits/switch/switch.svelte.ts b/packages/bits-ui/src/lib/bits/switch/switch.svelte.ts index f903de46a..a7fce0f52 100644 --- a/packages/bits-ui/src/lib/bits/switch/switch.svelte.ts +++ b/packages/bits-ui/src/lib/bits/switch/switch.svelte.ts @@ -23,13 +23,26 @@ type SwitchRootStateProps = ReadonlyBoxedValues<{ }>; class SwitchRootState { - checked: SwitchRootStateProps["checked"]; - disabled: SwitchRootStateProps["disabled"]; - required: SwitchRootStateProps["required"]; + checked = undefined as unknown as SwitchRootStateProps["checked"]; + disabled = undefined as unknown as SwitchRootStateProps["disabled"]; + required = undefined as unknown as SwitchRootStateProps["required"]; name: SwitchRootStateProps["name"]; value: SwitchRootStateProps["value"]; - #composedClick: EventCallback; - #composedKeydown: EventCallback; + #composedClick = undefined as unknown as EventCallback; + #composedKeydown = undefined as unknown as EventCallback; + props = $derived({ + "data-disabled": getDataDisabled(this.disabled.value), + "data-state": getDataChecked(this.checked.value), + "data-required": getDataRequired(this.required.value), + type: "button", + role: "switch", + "aria-checked": getAriaChecked(this.checked.value), + "aria-required": getAriaRequired(this.required.value), + "data-switch-root": "", + // + onclick: this.#composedClick, + onkeydown: this.#composedKeydown, + } as const); constructor(props: SwitchRootStateProps) { this.checked = props.checked; @@ -56,22 +69,6 @@ class SwitchRootState { this.#toggle(); }; - get props() { - return { - "data-disabled": getDataDisabled(this.disabled.value), - "data-state": getDataChecked(this.checked.value), - "data-required": getDataRequired(this.required.value), - type: "button", - role: "switch", - "aria-checked": getAriaChecked(this.checked.value), - "aria-required": getAriaRequired(this.required.value), - "data-switch-root": "", - // - onclick: this.#composedClick, - onkeydown: this.#composedKeydown, - } as const; - } - createInput() { return new SwitchInputState(this); } @@ -82,43 +79,34 @@ class SwitchRootState { } class SwitchInputState { - #root: SwitchRootState; + #root = undefined as unknown as SwitchRootState; + props = $derived({ + type: "checkbox", + name: this.#root.name.value, + value: this.#root.value.value, + checked: this.#root.checked.value, + disabled: this.#root.disabled.value, + required: this.#root.required.value, + } as const); + shouldRender = $derived(this.#root.name.value !== undefined); constructor(root: SwitchRootState) { this.#root = root; } - - get shouldRender() { - return this.#root.name.value !== undefined; - } - - get props() { - return { - type: "checkbox", - name: this.#root.name.value, - value: this.#root.value.value, - checked: this.#root.checked.value, - disabled: this.#root.disabled.value, - required: this.#root.required.value, - } as const; - } } class SwitchThumbState { - root: SwitchRootState; + root = undefined as unknown as SwitchRootState; + props = $derived({ + "data-disabled": getDataDisabled(this.root.disabled.value), + "data-state": getDataChecked(this.root.checked.value), + "data-required": getDataRequired(this.root.required.value), + "data-switch-thumb": "", + } as const); constructor(root: SwitchRootState) { this.root = root; } - - get props() { - return { - "data-disabled": getDataDisabled(this.root.disabled.value), - "data-state": getDataChecked(this.root.checked.value), - "data-required": getDataRequired(this.root.required.value), - "data-switch-thumb": "", - } as const; - } } // diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bb5965e8b..09601e2d6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -13,7 +13,7 @@ importers: version: 2.27.1 '@huntabyte/eslint-config': specifier: ^0.3.1 - version: 0.3.1(@vue/compiler-sfc@3.4.21)(eslint-plugin-svelte@2.37.0)(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.107)(typescript@5.4.3) + version: 0.3.1(@vue/compiler-sfc@3.4.21)(eslint-plugin-svelte@2.37.0)(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.108)(typescript@5.4.3) '@huntabyte/eslint-plugin': specifier: ^0.1.0 version: 0.1.0(eslint@9.0.0) @@ -25,22 +25,22 @@ importers: version: 9.0.0 eslint-plugin-svelte: specifier: ^2.37.0 - version: 2.37.0(eslint@9.0.0)(svelte@5.0.0-next.107) + version: 2.37.0(eslint@9.0.0)(svelte@5.0.0-next.108) prettier: specifier: ^3.2.5 version: 3.2.5 prettier-plugin-svelte: specifier: ^3.2.2 - version: 3.2.2(prettier@3.2.5)(svelte@5.0.0-next.107) + version: 3.2.2(prettier@3.2.5)(svelte@5.0.0-next.108) prettier-plugin-tailwindcss: specifier: 0.5.13 version: 0.5.13(prettier-plugin-svelte@3.2.2)(prettier@3.2.5) svelte: - specifier: 5.0.0-next.107 - version: 5.0.0-next.107 + specifier: 5.0.0-next.108 + version: 5.0.0-next.108 svelte-eslint-parser: specifier: ^0.34.1 - version: 0.34.1(svelte@5.0.0-next.107) + version: 0.34.1(svelte@5.0.0-next.108) wrangler: specifier: ^3.44.0 version: 3.44.0 @@ -52,7 +52,7 @@ importers: version: 3.5.2 '@melt-ui/svelte': specifier: 0.76.2 - version: 0.76.2(svelte@5.0.0-next.107) + version: 0.76.2(svelte@5.0.0-next.108) esm-env: specifier: ^1.0.0 version: 1.0.0 @@ -65,16 +65,16 @@ importers: devDependencies: '@melt-ui/pp': specifier: ^0.3.0 - version: 0.3.0(@melt-ui/svelte@0.76.2)(svelte@5.0.0-next.107) + version: 0.3.0(@melt-ui/svelte@0.76.2)(svelte@5.0.0-next.108) '@sveltejs/kit': specifier: ^2.5.0 - version: 2.5.5(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.107)(vite@5.2.8) + version: 2.5.5(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.108)(vite@5.2.8) '@sveltejs/package': specifier: ^2.2.7 - version: 2.3.0(svelte@5.0.0-next.107)(typescript@5.4.3) + version: 2.3.0(svelte@5.0.0-next.108)(typescript@5.4.3) '@sveltejs/vite-plugin-svelte': specifier: ^3.1.0 - version: 3.1.0(svelte@5.0.0-next.107)(vite@5.2.8) + version: 3.1.0(svelte@5.0.0-next.108)(vite@5.2.8) '@testing-library/dom': specifier: ^10.0.0 version: 10.0.0 @@ -83,7 +83,7 @@ importers: version: 6.4.2(vitest@1.5.0) '@testing-library/svelte': specifier: ^4.2.2 - version: 4.2.2(svelte@5.0.0-next.107) + version: 4.2.2(svelte@5.0.0-next.108) '@testing-library/user-event': specifier: ^14.5.2 version: 14.5.2(@testing-library/dom@10.0.0) @@ -112,11 +112,11 @@ importers: specifier: ^1.5.1 version: 1.5.1 svelte: - specifier: 5.0.0-next.107 - version: 5.0.0-next.107 + specifier: 5.0.0-next.108 + version: 5.0.0-next.108 svelte-check: specifier: ^3.6.9 - version: 3.6.9(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.107) + version: 3.6.9(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.108) tslib: specifier: ^2.6.2 version: 2.6.2 @@ -137,14 +137,14 @@ importers: version: 3.5.2 '@melt-ui/svelte': specifier: 0.76.2 - version: 0.76.2(svelte@5.0.0-next.107) + version: 0.76.2(svelte@5.0.0-next.108) bits-ui: specifier: workspace:* version: link:../../packages/bits-ui devDependencies: '@melt-ui/pp': specifier: ^0.3.0 - version: 0.3.0(@melt-ui/svelte@0.76.2)(svelte@5.0.0-next.107) + version: 0.3.0(@melt-ui/svelte@0.76.2)(svelte@5.0.0-next.108) '@prettier/sync': specifier: 0.3.0 version: 0.3.0(prettier@3.2.5) @@ -153,10 +153,10 @@ importers: version: 4.2.0(@sveltejs/kit@2.5.5)(wrangler@3.44.0) '@sveltejs/kit': specifier: ^2.5.0 - version: 2.5.5(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.107)(vite@5.2.8) + version: 2.5.5(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.108)(vite@5.2.8) '@sveltejs/vite-plugin-svelte': specifier: ^3.1.0 - version: 3.1.0(svelte@5.0.0-next.107)(vite@5.2.8) + version: 3.1.0(svelte@5.0.0-next.108)(vite@5.2.8) '@tailwindcss/typography': specifier: ^0.5.10 version: 0.5.12(tailwindcss@3.4.3) @@ -186,13 +186,13 @@ importers: version: 0.3.4(esbuild@0.20.2) mdsx: specifier: ^0.0.5 - version: 0.0.5(svelte@5.0.0-next.107) + version: 0.0.5(svelte@5.0.0-next.108) mode-watcher: specifier: ^0.2.0 - version: 0.2.2(svelte@5.0.0-next.107) + version: 0.2.2(svelte@5.0.0-next.108) phosphor-svelte: specifier: ^1.4.2 - version: 1.4.2(svelte@5.0.0-next.107) + version: 1.4.2(svelte@5.0.0-next.108) postcss: specifier: ^8.4.33 version: 8.4.38 @@ -212,11 +212,11 @@ importers: specifier: ^1.1.1 version: 1.2.2 svelte: - specifier: 5.0.0-next.107 - version: 5.0.0-next.107 + specifier: 5.0.0-next.108 + version: 5.0.0-next.108 svelte-check: specifier: ^3.6.9 - version: 3.6.9(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.107) + version: 3.6.9(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.108) tailwind-merge: specifier: ^2.2.1 version: 2.2.2 @@ -271,7 +271,7 @@ packages: '@jridgewell/gen-mapping': 0.3.5 '@jridgewell/trace-mapping': 0.3.25 - /@antfu/eslint-config@2.13.3(@vue/compiler-sfc@3.4.21)(eslint-plugin-svelte@2.37.0)(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.107)(typescript@5.4.3): + /@antfu/eslint-config@2.13.3(@vue/compiler-sfc@3.4.21)(eslint-plugin-svelte@2.37.0)(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.108)(typescript@5.4.3): resolution: {integrity: sha512-DCyrnFgWtIc0mUTn8HeVB15Z/t9oEQZk8ce6S14Kq6z42LbMfZxPu6hs4SmPFYWLJoEzYq87dxsRv3glOX+aGw==} hasBin: true peerDependencies: @@ -331,8 +331,8 @@ packages: eslint-plugin-markdown: 4.0.1(eslint@9.0.0) eslint-plugin-n: 17.2.0(eslint@9.0.0) eslint-plugin-no-only-tests: 3.1.0 - eslint-plugin-perfectionist: 2.8.0(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.107)(typescript@5.4.3)(vue-eslint-parser@9.4.2) - eslint-plugin-svelte: 2.37.0(eslint@9.0.0)(svelte@5.0.0-next.107) + eslint-plugin-perfectionist: 2.8.0(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.108)(typescript@5.4.3)(vue-eslint-parser@9.4.2) + eslint-plugin-svelte: 2.37.0(eslint@9.0.0)(svelte@5.0.0-next.108) eslint-plugin-toml: 0.11.0(eslint@9.0.0) eslint-plugin-unicorn: 52.0.0(eslint@9.0.0) eslint-plugin-unused-imports: 3.1.0(@typescript-eslint/eslint-plugin@7.6.0)(eslint@9.0.0) @@ -345,7 +345,7 @@ packages: local-pkg: 0.5.0 parse-gitignore: 2.0.0 picocolors: 1.0.0 - svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.107) + svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.108) toml-eslint-parser: 0.9.3 vue-eslint-parser: 9.4.2(eslint@9.0.0) yaml-eslint-parser: 1.2.2 @@ -1631,7 +1631,7 @@ packages: resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==} dev: true - /@huntabyte/eslint-config@0.3.1(@vue/compiler-sfc@3.4.21)(eslint-plugin-svelte@2.37.0)(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.107)(typescript@5.4.3): + /@huntabyte/eslint-config@0.3.1(@vue/compiler-sfc@3.4.21)(eslint-plugin-svelte@2.37.0)(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.108)(typescript@5.4.3): resolution: {integrity: sha512-aLnVtA+n556gtv+NfCfIi1OoM0j0tsHP9ERlVaaJ3p+AHoZyT6FYefEInX6Snxwt4U5WzmL/gJ8w0QbyZdyH4w==} hasBin: true peerDependencies: @@ -1639,7 +1639,7 @@ packages: eslint-plugin-svelte: ^2.37.0 svelte-eslint-parser: ^0.34.1 dependencies: - '@antfu/eslint-config': 2.13.3(@vue/compiler-sfc@3.4.21)(eslint-plugin-svelte@2.37.0)(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.107)(typescript@5.4.3) + '@antfu/eslint-config': 2.13.3(@vue/compiler-sfc@3.4.21)(eslint-plugin-svelte@2.37.0)(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.108)(typescript@5.4.3) '@antfu/install-pkg': 0.3.2 '@clack/prompts': 0.7.0 '@huntabyte/eslint-plugin': 0.1.0(eslint@9.0.0) @@ -1648,10 +1648,10 @@ packages: chalk: 5.3.0 eslint: 9.0.0 eslint-flat-config-utils: 0.2.2 - eslint-plugin-svelte: 2.37.0(eslint@9.0.0)(svelte@5.0.0-next.107) + eslint-plugin-svelte: 2.37.0(eslint@9.0.0)(svelte@5.0.0-next.108) local-pkg: 0.5.0 parse-gitignore: 2.0.0 - svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.107) + svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.108) yargs: 17.7.2 transitivePeerDependencies: - '@unocss/eslint-plugin' @@ -1823,20 +1823,20 @@ packages: - supports-color dev: true - /@melt-ui/pp@0.3.0(@melt-ui/svelte@0.76.2)(svelte@5.0.0-next.107): + /@melt-ui/pp@0.3.0(@melt-ui/svelte@0.76.2)(svelte@5.0.0-next.108): resolution: {integrity: sha512-b07Bdh8l2KcwKVCXOY+SoBw1dk9eWvQfMSi6SoacpRVyVmmfpi0kV4oGt3HYF0tUCB3sEmVicxse50ZzZxEzEA==} engines: {pnpm: '>=8.6.3'} peerDependencies: '@melt-ui/svelte': '>= 0.29.0' svelte: ^3.55.0 || ^4.0.0 || ^5.0.0-next.1 dependencies: - '@melt-ui/svelte': 0.76.2(svelte@5.0.0-next.107) + '@melt-ui/svelte': 0.76.2(svelte@5.0.0-next.108) estree-walker: 3.0.3 magic-string: 0.30.9 - svelte: 5.0.0-next.107 + svelte: 5.0.0-next.108 dev: true - /@melt-ui/svelte@0.76.2(svelte@5.0.0-next.107): + /@melt-ui/svelte@0.76.2(svelte@5.0.0-next.108): resolution: {integrity: sha512-7SbOa11tXUS95T3fReL+dwDs5FyJtCEqrqG3inRziDws346SYLsxOQ6HmX+4BkIsQh1R8U3XNa+EMmdMt38lMA==} peerDependencies: svelte: '>=3 <5' @@ -1847,7 +1847,7 @@ packages: dequal: 2.0.3 focus-trap: 7.5.4 nanoid: 5.0.6 - svelte: 5.0.0-next.107 + svelte: 5.0.0-next.108 /@nodelib/fs.scandir@2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} @@ -2349,13 +2349,13 @@ packages: wrangler: ^3.28.4 dependencies: '@cloudflare/workers-types': 4.20240329.0 - '@sveltejs/kit': 2.5.5(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.107)(vite@5.2.8) + '@sveltejs/kit': 2.5.5(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.108)(vite@5.2.8) esbuild: 0.19.12 worktop: 0.8.0-next.18 wrangler: 3.44.0 dev: true - /@sveltejs/kit@2.5.5(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.107)(vite@5.2.8): + /@sveltejs/kit@2.5.5(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.108)(vite@5.2.8): resolution: {integrity: sha512-ULe3PB00q4+wYRL+IS5FDPsCEVnhEITofm7b9Yz8malcH3r1SAnW/JJ6T13hIMeu8QNRIuVQWo+P4+2VklbnLQ==} engines: {node: '>=18.13'} hasBin: true @@ -2365,7 +2365,7 @@ packages: svelte: ^4.0.0 || ^5.0.0-next.0 vite: ^5.0.3 dependencies: - '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@5.0.0-next.107)(vite@5.2.8) + '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@5.0.0-next.108)(vite@5.2.8) '@types/cookie': 0.6.0 cookie: 0.6.0 devalue: 4.3.2 @@ -2377,12 +2377,12 @@ packages: sade: 1.8.1 set-cookie-parser: 2.6.0 sirv: 2.0.4 - svelte: 5.0.0-next.107 + svelte: 5.0.0-next.108 tiny-glob: 0.2.9 vite: 5.2.8(@types/node@20.12.2) dev: true - /@sveltejs/package@2.3.0(svelte@5.0.0-next.107)(typescript@5.4.3): + /@sveltejs/package@2.3.0(svelte@5.0.0-next.108)(typescript@5.4.3): resolution: {integrity: sha512-wmtwEfi3gQnmtotAjygRHR6cmLfpblQl1dU764f3N2I5DPe34llFs44bHOYcuk91Bp2sSq6bWUmNwxGlYCchOA==} engines: {node: ^16.14 || >=18} hasBin: true @@ -2393,13 +2393,13 @@ packages: kleur: 4.1.5 sade: 1.8.1 semver: 7.6.0 - svelte: 5.0.0-next.107 - svelte2tsx: 0.7.5(svelte@5.0.0-next.107)(typescript@5.4.3) + svelte: 5.0.0-next.108 + svelte2tsx: 0.7.5(svelte@5.0.0-next.108)(typescript@5.4.3) transitivePeerDependencies: - typescript dev: true - /@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.107)(vite@5.2.8): + /@sveltejs/vite-plugin-svelte-inspector@2.0.0(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.108)(vite@5.2.8): resolution: {integrity: sha512-gjr9ZFg1BSlIpfZ4PRewigrvYmHWbDrq2uvvPB1AmTWKuM+dI1JXQSUu2pIrYLb/QncyiIGkFDFKTwJ0XqQZZg==} engines: {node: ^18.0.0 || >=20} peerDependencies: @@ -2407,28 +2407,28 @@ packages: svelte: ^4.0.0 || ^5.0.0-next.0 vite: ^5.0.0 dependencies: - '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@5.0.0-next.107)(vite@5.2.8) + '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@5.0.0-next.108)(vite@5.2.8) debug: 4.3.4 - svelte: 5.0.0-next.107 + svelte: 5.0.0-next.108 vite: 5.2.8(@types/node@20.12.2) transitivePeerDependencies: - supports-color dev: true - /@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.107)(vite@5.2.8): + /@sveltejs/vite-plugin-svelte@3.1.0(svelte@5.0.0-next.108)(vite@5.2.8): resolution: {integrity: sha512-sY6ncCvg+O3njnzbZexcVtUqOBE3iYmQPJ9y+yXSkOwG576QI/xJrBnQSRXFLGwJNBa0T78JEKg5cIR0WOAuUw==} engines: {node: ^18.0.0 || >=20} peerDependencies: svelte: ^4.0.0 || ^5.0.0-next.0 vite: ^5.0.0 dependencies: - '@sveltejs/vite-plugin-svelte-inspector': 2.0.0(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.107)(vite@5.2.8) + '@sveltejs/vite-plugin-svelte-inspector': 2.0.0(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@5.0.0-next.108)(vite@5.2.8) debug: 4.3.4 deepmerge: 4.3.1 kleur: 4.1.5 magic-string: 0.30.9 - svelte: 5.0.0-next.107 - svelte-hmr: 0.16.0(svelte@5.0.0-next.107) + svelte: 5.0.0-next.108 + svelte-hmr: 0.16.0(svelte@5.0.0-next.108) vite: 5.2.8(@types/node@20.12.2) vitefu: 0.2.5(vite@5.2.8) transitivePeerDependencies: @@ -2522,14 +2522,14 @@ packages: vitest: 1.5.0(@types/node@20.12.2)(jsdom@24.0.0) dev: true - /@testing-library/svelte@4.2.2(svelte@5.0.0-next.107): + /@testing-library/svelte@4.2.2(svelte@5.0.0-next.108): resolution: {integrity: sha512-zl2V/39V/uIRe+FjXfeB7Nvg/2DBqAFlKbpqtbAogtyoYtdQ0Z/d8Was8ZdtXl3QCa8NBNd3J0QUKSTDaEQYCA==} engines: {node: '>= 10'} peerDependencies: svelte: ^3 || ^4 || ^5 dependencies: '@testing-library/dom': 9.3.4 - svelte: 5.0.0-next.107 + svelte: 5.0.0-next.108 dev: true /@testing-library/user-event@14.5.2(@testing-library/dom@10.0.0): @@ -4353,7 +4353,7 @@ packages: engines: {node: '>=5.0.0'} dev: true - /eslint-plugin-perfectionist@2.8.0(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.107)(typescript@5.4.3)(vue-eslint-parser@9.4.2): + /eslint-plugin-perfectionist@2.8.0(eslint@9.0.0)(svelte-eslint-parser@0.34.1)(svelte@5.0.0-next.108)(typescript@5.4.3)(vue-eslint-parser@9.4.2): resolution: {integrity: sha512-XBjQ4ctU1rOzQ4bFJoUowe8XdsIIz42JqNrouFlae1TO78HjoyYBaRP8+gAHDDQCSdHY10pbChyzlJeBA6D51w==} peerDependencies: astro-eslint-parser: ^0.16.0 @@ -4375,15 +4375,15 @@ packages: eslint: 9.0.0 minimatch: 9.0.4 natural-compare-lite: 1.4.0 - svelte: 5.0.0-next.107 - svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.107) + svelte: 5.0.0-next.108 + svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.108) vue-eslint-parser: 9.4.2(eslint@9.0.0) transitivePeerDependencies: - supports-color - typescript dev: true - /eslint-plugin-svelte@2.37.0(eslint@9.0.0)(svelte@5.0.0-next.107): + /eslint-plugin-svelte@2.37.0(eslint@9.0.0)(svelte@5.0.0-next.108): resolution: {integrity: sha512-H/2Gz7agYHEMEEzRuLYuCmAIdjuBnbhFG9hOK0yCdSBvvJGJMkjo+lR6j67OIvLOavgp4L7zA5LnDKi8WqdPhQ==} engines: {node: ^14.17.0 || >=16.0.0} peerDependencies: @@ -4405,8 +4405,8 @@ packages: postcss-safe-parser: 6.0.0(postcss@8.4.38) postcss-selector-parser: 6.0.16 semver: 7.6.0 - svelte: 5.0.0-next.107 - svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.107) + svelte: 5.0.0-next.108 + svelte-eslint-parser: 0.34.1(svelte@5.0.0-next.108) transitivePeerDependencies: - supports-color - ts-node @@ -6481,7 +6481,7 @@ packages: '@types/mdast': 4.0.3 dev: true - /mdsx@0.0.5(svelte@5.0.0-next.107): + /mdsx@0.0.5(svelte@5.0.0-next.108): resolution: {integrity: sha512-crYbZC0L5kQjaRABvHIXj9H2O1qikIw9KKqS3bo2En4XVgvHH7TO5bJ2X86PxJK7H6QEBAubjUma9+qpbsPC5A==} peerDependencies: svelte: ^4.0.0 @@ -6493,7 +6493,7 @@ packages: rehype-stringify: 10.0.0 remark-parse: 11.0.0 remark-rehype: 11.1.0 - svelte: 5.0.0-next.107 + svelte: 5.0.0-next.108 unified: 11.0.4 unist-util-visit: 5.0.0 vfile: 6.0.1 @@ -7208,12 +7208,12 @@ packages: ufo: 1.5.3 dev: true - /mode-watcher@0.2.2(svelte@5.0.0-next.107): + /mode-watcher@0.2.2(svelte@5.0.0-next.108): resolution: {integrity: sha512-QjkHQL9pXrr7Vb0P3WbOWAF8mv1Q6jEwUZ5GUyCnI9eEoXH234zuaOGChUF7ZQtjxwtmXDzKFSW/36TvLDg1/A==} peerDependencies: svelte: ^4.0.0 dependencies: - svelte: 5.0.0-next.107 + svelte: 5.0.0-next.108 dev: true /mri@1.2.0: @@ -7634,12 +7634,12 @@ packages: is-reference: 3.0.2 dev: true - /phosphor-svelte@1.4.2(svelte@5.0.0-next.107): + /phosphor-svelte@1.4.2(svelte@5.0.0-next.108): resolution: {integrity: sha512-wdHKlZbE5D3ad1dd4K9bqWxpOb6gIwe+/ZeXGI9YpdKqECxqd+g3/NsLYE1+/hjlXixTWhQ7VMVIxTtBRXegCg==} peerDependencies: svelte: '>=3' dependencies: - svelte: 5.0.0-next.107 + svelte: 5.0.0-next.108 dev: true /picocolors@1.0.0: @@ -7841,14 +7841,14 @@ packages: engines: {node: '>= 0.8.0'} dev: true - /prettier-plugin-svelte@3.2.2(prettier@3.2.5)(svelte@5.0.0-next.107): + /prettier-plugin-svelte@3.2.2(prettier@3.2.5)(svelte@5.0.0-next.108): resolution: {integrity: sha512-ZzzE/wMuf48/1+Lf2Ffko0uDa6pyCfgHV6+uAhtg2U0AAXGrhCSW88vEJNAkAxW5qyrFY1y1zZ4J8TgHrjW++Q==} peerDependencies: prettier: ^3.0.0 svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0 dependencies: prettier: 3.2.5 - svelte: 5.0.0-next.107 + svelte: 5.0.0-next.108 dev: true /prettier-plugin-tailwindcss@0.5.13(prettier-plugin-svelte@3.2.2)(prettier@3.2.5): @@ -7904,7 +7904,7 @@ packages: optional: true dependencies: prettier: 3.2.5 - prettier-plugin-svelte: 3.2.2(prettier@3.2.5)(svelte@5.0.0-next.107) + prettier-plugin-svelte: 3.2.2(prettier@3.2.5)(svelte@5.0.0-next.108) dev: true /prettier@2.8.8: @@ -8818,7 +8818,7 @@ packages: engines: {node: '>= 0.4'} dev: true - /svelte-check@3.6.9(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.107): + /svelte-check@3.6.9(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.108): resolution: {integrity: sha512-hDQrk3L0osX07djQyMiXocKysTLfusqi8AriNcCiQxhQR49/LonYolcUGMtZ0fbUR8HTR198Prrgf52WWU9wEg==} hasBin: true peerDependencies: @@ -8830,8 +8830,8 @@ packages: import-fresh: 3.3.0 picocolors: 1.0.0 sade: 1.8.1 - svelte: 5.0.0-next.107 - svelte-preprocess: 5.1.3(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.107)(typescript@5.4.3) + svelte: 5.0.0-next.108 + svelte-preprocess: 5.1.3(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.108)(typescript@5.4.3) typescript: 5.4.3 transitivePeerDependencies: - '@babel/core' @@ -8845,7 +8845,7 @@ packages: - sugarss dev: true - /svelte-eslint-parser@0.34.1(svelte@5.0.0-next.107): + /svelte-eslint-parser@0.34.1(svelte@5.0.0-next.108): resolution: {integrity: sha512-9+uLA1pqI9AZioKVGJzYYmlOZWxfoCXSbAM9iaNm7H01XlYlzRTtJfZgl9o3StQGN41PfGJIbkKkfk3e/pHFfA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: @@ -8859,19 +8859,19 @@ packages: espree: 9.6.1 postcss: 8.4.38 postcss-scss: 4.0.9(postcss@8.4.38) - svelte: 5.0.0-next.107 + svelte: 5.0.0-next.108 dev: true - /svelte-hmr@0.16.0(svelte@5.0.0-next.107): + /svelte-hmr@0.16.0(svelte@5.0.0-next.108): resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==} engines: {node: ^12.20 || ^14.13.1 || >= 16} peerDependencies: svelte: ^3.19.0 || ^4.0.0 dependencies: - svelte: 5.0.0-next.107 + svelte: 5.0.0-next.108 dev: true - /svelte-preprocess@5.1.3(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.107)(typescript@5.4.3): + /svelte-preprocess@5.1.3(postcss-load-config@5.0.3)(postcss@8.4.38)(svelte@5.0.0-next.108)(typescript@5.4.3): resolution: {integrity: sha512-xxAkmxGHT+J/GourS5mVJeOXZzne1FR5ljeOUAMXUkfEhkLEllRreXpbl3dIYJlcJRfL1LO1uIAPpBpBfiqGPw==} engines: {node: '>= 16.0.0', pnpm: ^8.0.0} requiresBuild: true @@ -8916,11 +8916,11 @@ packages: postcss-load-config: 5.0.3(postcss@8.4.38) sorcery: 0.11.0 strip-indent: 3.0.0 - svelte: 5.0.0-next.107 + svelte: 5.0.0-next.108 typescript: 5.4.3 dev: true - /svelte2tsx@0.7.5(svelte@5.0.0-next.107)(typescript@5.4.3): + /svelte2tsx@0.7.5(svelte@5.0.0-next.108)(typescript@5.4.3): resolution: {integrity: sha512-+y8z4YLGsCYN8yjkqPXrqg6yKa73IZfU2WC3MVxiM0YU2/HbGZ1Tiq1ceKCOhMQVBFWjOgC/C465wN/ux6FsDQ==} peerDependencies: svelte: ^3.55 || ^4.0.0-next.0 || ^4.0 || ^5.0.0-next.0 @@ -8928,12 +8928,12 @@ packages: dependencies: dedent-js: 1.0.1 pascal-case: 3.1.2 - svelte: 5.0.0-next.107 + svelte: 5.0.0-next.108 typescript: 5.4.3 dev: true - /svelte@5.0.0-next.107: - resolution: {integrity: sha512-D1IiUIXv0j7yE1blfxnIeAgbWl041BgMC0rZb3zbpZ5hrDjgLWkP56BFIEKqXXUL9HMDAHeJOa+4t/R9iIqvlA==} + /svelte@5.0.0-next.108: + resolution: {integrity: sha512-4COuyOm+U2Iflb2VqxDev2iFeh214YHE6yOkKOKoDCGrd6IuEOaoopf+BpWgsF5v2PLqcF4HNkLYSbdwNc8AAA==} engines: {node: '>=18'} dependencies: '@ampproject/remapping': 2.3.0 diff --git a/sites/docs/package.json b/sites/docs/package.json index bade92903..263f55efb 100644 --- a/sites/docs/package.json +++ b/sites/docs/package.json @@ -38,7 +38,7 @@ "rehype-slug": "^6.0.0", "remark-gfm": "^4.0.0", "shiki": "^1.1.1", - "svelte": "5.0.0-next.107", + "svelte": "5.0.0-next.108", "svelte-check": "^3.6.9", "tailwind-merge": "^2.2.1", "tailwind-variants": "^0.1.20",