bits-ui 2.8.0 → 2.8.2

package/dist/bits/calendar/calendar.svelte.js

@@ -19,10 +19,12 @@ export class CalendarRootState {
     formatter;
     accessibleHeadingId = useId();
     domContext;
+    attachment;
     months = $state([]);
     announcer;
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
         this.domContext = new DOMContext(opts.ref);
         this.announcer = getAnnouncer(null);
         this.formatter = createFormatter({
@@ -416,7 +418,7 @@ export class CalendarRootState {
         [this.getBitsAttr("root")]: "",
         //
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarHeadingState {
@@ -425,9 +427,11 @@ export class CalendarHeadingState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -435,7 +439,7 @@ export class CalendarHeadingState {
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("heading")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 const CalendarCellContext = new Context("Calendar.Cell | RangeCalendar.Cell");
@@ -459,9 +463,11 @@ export class CalendarCellState {
         day: "numeric",
         year: "numeric",
     }));
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     snippetProps = $derived.by(() => ({
         disabled: this.isDisabled,
@@ -492,7 +498,7 @@ export class CalendarCellState {
         "aria-disabled": getAriaDisabled(this.ariaDisabled),
         ...this.sharedDataAttrs,
         [this.root.getBitsAttr("cell")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarDayState {
@@ -501,10 +507,12 @@ export class CalendarDayState {
     }
     opts;
     cell;
+    attachment;
     constructor(opts, cell) {
         this.opts = opts;
         this.cell = cell;
         this.onclick = this.onclick.bind(this);
+        this.attachment = attachRef(this.opts.ref);
     }
     #tabindex = $derived.by(() => (this.cell.isOutsideMonth && this.cell.root.opts.disableDaysOutsideMonth.current) ||
         this.cell.isDisabled
@@ -535,7 +543,7 @@ export class CalendarDayState {
         "data-bits-day": "",
         //
         onclick: this.onclick,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarNextButtonState {
@@ -545,10 +553,12 @@ export class CalendarNextButtonState {
     opts;
     root;
     isDisabled = $derived.by(() => this.root.isNextButtonDisabled);
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
         this.onclick = this.onclick.bind(this);
+        this.attachment = attachRef(this.opts.ref);
     }
     onclick(_) {
         if (this.isDisabled)
@@ -566,7 +576,7 @@ export class CalendarNextButtonState {
         [this.root.getBitsAttr("next-button")]: "",
         //
         onclick: this.onclick,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarPrevButtonState {
@@ -576,10 +586,12 @@ export class CalendarPrevButtonState {
     opts;
     root;
     isDisabled = $derived.by(() => this.root.isPrevButtonDisabled);
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
         this.onclick = this.onclick.bind(this);
+        this.attachment = attachRef(this.opts.ref);
     }
     onclick(_) {
         if (this.isDisabled)
@@ -597,7 +609,7 @@ export class CalendarPrevButtonState {
         [this.root.getBitsAttr("prev-button")]: "",
         //
         onclick: this.onclick,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarGridState {
@@ -606,9 +618,11 @@ export class CalendarGridState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -619,7 +633,7 @@ export class CalendarGridState {
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         [this.root.getBitsAttr("grid")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarGridBodyState {
@@ -628,16 +642,18 @@ export class CalendarGridBodyState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("grid-body")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarGridHeadState {
@@ -646,16 +662,18 @@ export class CalendarGridHeadState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("grid-head")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarGridRowState {
@@ -664,16 +682,18 @@ export class CalendarGridRowState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("grid-row")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarHeadCellState {
@@ -682,16 +702,18 @@ export class CalendarHeadCellState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("head-cell")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarHeaderState {
@@ -700,16 +722,18 @@ export class CalendarHeaderState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         "data-readonly": getDataReadonly(this.root.opts.readonly.current),
         [this.root.getBitsAttr("header")]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarMonthSelectState {
@@ -718,10 +742,12 @@ export class CalendarMonthSelectState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
         this.onchange = this.onchange.bind(this);
+        this.attachment = attachRef(this.opts.ref);
     }
     monthItems = $derived.by(() => {
         this.root.opts.locale.current;
@@ -770,7 +796,7 @@ export class CalendarMonthSelectState {
         [this.root.getBitsAttr("month-select")]: "",
         //
         onchange: this.onchange,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CalendarYearSelectState {
@@ -779,10 +805,12 @@ export class CalendarYearSelectState {
     }
     opts;
     root;
+    attachment;
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
         this.onchange = this.onchange.bind(this);
+        this.attachment = attachRef(this.opts.ref);
     }
     years = $derived.by(() => {
         if (this.opts.years.current && this.opts.years.current.length)
@@ -835,6 +863,6 @@ export class CalendarYearSelectState {
         [this.root.getBitsAttr("year-select")]: "",
         //
         onchange: this.onchange,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }

package/dist/bits/calendar/components/calendar-next-button.svelte

@@ -11,6 +11,8 @@
 		child,
 		id = createId(uid),
 		ref = $bindable(null),
+		// for safari
+		tabindex = 0,
 		...restProps
 	}: CalendarNextButtonProps = $props();
 
@@ -22,7 +24,7 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, nextButtonState.props));
+	const mergedProps = $derived(mergeProps(restProps, nextButtonState.props, { tabindex }));
 </script>
 
 {#if child}

package/dist/bits/calendar/components/calendar-prev-button.svelte

@@ -11,6 +11,8 @@
 		child,
 		id = createId(uid),
 		ref = $bindable(null),
+		// for safari
+		tabindex = 0,
 		...restProps
 	}: CalendarPrevButtonProps = $props();
 
@@ -22,7 +24,7 @@
 		),
 	});
 
-	const mergedProps = $derived(mergeProps(restProps, prevButtonState.props));
+	const mergedProps = $derived(mergeProps(restProps, prevButtonState.props, { tabindex }));
 </script>
 
 {#if child}

package/dist/bits/checkbox/checkbox.svelte.d.ts

@@ -1,7 +1,7 @@
 import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
 import type { HTMLButtonAttributes } from "svelte/elements";
 import { Context } from "runed";
-import type { BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
 interface CheckboxGroupStateOpts extends WithRefOpts, ReadableBoxedValues<{
     name: string | undefined;
     disabled: boolean;
@@ -15,6 +15,7 @@ export declare const CheckboxGroupContext: Context<CheckboxGroupState>;
 export declare class CheckboxGroupState {
     static create(opts: CheckboxGroupStateOpts): CheckboxGroupState;
     readonly opts: CheckboxGroupStateOpts;
+    readonly attachment: RefAttachment;
     labelId: string | undefined;
     constructor(opts: CheckboxGroupStateOpts);
     addValue(checkboxValue: string | undefined): void;
@@ -32,6 +33,7 @@ export declare class CheckboxGroupLabelState {
     static create(opts: CheckboxGroupLabelStateOpts): CheckboxGroupLabelState;
     readonly opts: CheckboxGroupLabelStateOpts;
     readonly group: CheckboxGroupState;
+    readonly attachment: RefAttachment;
     constructor(opts: CheckboxGroupLabelStateOpts, group: CheckboxGroupState);
     readonly props: {
         readonly id: string;
@@ -57,6 +59,7 @@ export declare class CheckboxRootState {
     readonly trueName: string | undefined;
     readonly trueRequired: boolean;
     readonly trueDisabled: boolean;
+    readonly attachment: RefAttachment;
     constructor(opts: CheckboxRootStateOpts, group: CheckboxGroupState | null);
     onkeydown(e: BitsKeyboardEvent): void;
     onclick(_: BitsMouseEvent): void;

package/dist/bits/checkbox/checkbox.svelte.js

@@ -12,9 +12,11 @@ export class CheckboxGroupState {
         return CheckboxGroupContext.set(new CheckboxGroupState(opts));
     }
     opts;
+    attachment;
     labelId = $state(undefined);
     constructor(opts) {
         this.opts = opts;
+        this.attachment = attachRef(this.opts.ref);
     }
     addValue(checkboxValue) {
         if (!checkboxValue)
@@ -41,7 +43,7 @@ export class CheckboxGroupState {
         "aria-labelledby": this.labelId,
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         [checkboxAttrs.group]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CheckboxGroupLabelState {
@@ -50,15 +52,17 @@ export class CheckboxGroupLabelState {
     }
     opts;
     group;
+    attachment;
     constructor(opts, group) {
         this.opts = opts;
         this.group = group;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.group.labelId = v?.id));
     }
     props = $derived.by(() => ({
         id: this.opts.id.current,
         "data-disabled": getDataDisabled(this.group.opts.disabled.current),
         [checkboxAttrs["group-label"]]: "",
-        ...attachRef(this.opts.ref, (v) => (this.group.labelId = v?.id)),
+        ...this.attachment,
     }));
 }
 const CheckboxRootContext = new Context("Checkbox.Root");
@@ -88,9 +92,11 @@ export class CheckboxRootState {
         }
         return this.opts.disabled.current;
     });
+    attachment;
     constructor(opts, group) {
         this.opts = opts;
         this.group = group;
+        this.attachment = attachRef(this.opts.ref);
         this.onkeydown = this.onkeydown.bind(this);
         this.onclick = this.onclick.bind(this);
         watch.pre([() => $state.snapshot(this.group?.opts.value.current), () => this.opts.value.current], ([groupValue, value]) => {
@@ -150,7 +156,7 @@ export class CheckboxRootState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CheckboxInputState {

package/dist/bits/collapsible/collapsible.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
-import type { BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, OnChangeFn, RefAttachment, WithRefOpts } from "../../internal/types.js";
 interface CollapsibleRootStateOpts extends WithRefOpts, WritableBoxedValues<{
     open: boolean;
 }>, ReadableBoxedValues<{
@@ -10,6 +10,7 @@ interface CollapsibleRootStateOpts extends WithRefOpts, WritableBoxedValues<{
 export declare class CollapsibleRootState {
     static create(opts: CollapsibleRootStateOpts): CollapsibleRootState;
     readonly opts: CollapsibleRootStateOpts;
+    readonly attachment: RefAttachment;
     contentNode: HTMLElement | null;
     constructor(opts: CollapsibleRootStateOpts);
     toggleOpen(): void;
@@ -28,6 +29,7 @@ export declare class CollapsibleContentState {
     static create(opts: CollapsibleContentStateOpts): CollapsibleContentState;
     readonly opts: CollapsibleContentStateOpts;
     readonly root: CollapsibleRootState;
+    readonly attachment: RefAttachment;
     readonly present: boolean;
     constructor(opts: CollapsibleContentStateOpts, root: CollapsibleRootState);
     readonly snippetProps: {
@@ -52,6 +54,7 @@ export declare class CollapsibleTriggerState {
     static create(opts: CollapsibleTriggerStateOpts): CollapsibleTriggerState;
     readonly opts: CollapsibleTriggerStateOpts;
     readonly root: CollapsibleRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CollapsibleTriggerStateOpts, root: CollapsibleRootState);
     onclick(e: BitsMouseEvent): void;
     onkeydown(e: BitsKeyboardEvent): void;

package/dist/bits/collapsible/collapsible.svelte.js

@@ -13,10 +13,12 @@ export class CollapsibleRootState {
         return CollapsibleRootContext.set(new CollapsibleRootState(opts));
     }
     opts;
+    attachment;
     contentNode = $state(null);
     constructor(opts) {
         this.opts = opts;
         this.toggleOpen = this.toggleOpen.bind(this);
+        this.attachment = attachRef(this.opts.ref);
         new OpenChangeComplete({
             ref: box.with(() => this.contentNode),
             open: this.opts.open,
@@ -33,7 +35,7 @@ export class CollapsibleRootState {
         "data-state": getDataOpenClosed(this.opts.open.current),
         "data-disabled": getDataDisabled(this.opts.disabled.current),
         [collapsibleAttrs.root]: "",
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }
 export class CollapsibleContentState {
@@ -42,6 +44,7 @@ export class CollapsibleContentState {
     }
     opts;
     root;
+    attachment;
     present = $derived.by(() => this.opts.forceMount.current || this.root.opts.open.current);
     #originalStyles;
     #isMountAnimationPrevented = $state(false);
@@ -51,6 +54,7 @@ export class CollapsibleContentState {
         this.opts = opts;
         this.root = root;
         this.#isMountAnimationPrevented = root.opts.open.current;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
         $effect.pre(() => {
             const rAF = requestAnimationFrame(() => {
                 this.#isMountAnimationPrevented = false;
@@ -101,7 +105,7 @@ export class CollapsibleContentState {
         "data-state": getDataOpenClosed(this.root.opts.open.current),
         "data-disabled": getDataDisabled(this.root.opts.disabled.current),
         [collapsibleAttrs.content]: "",
-        ...attachRef(this.opts.ref, (v) => (this.root.contentNode = v)),
+        ...this.attachment,
     }));
 }
 export class CollapsibleTriggerState {
@@ -110,10 +114,12 @@ export class CollapsibleTriggerState {
     }
     opts;
     root;
+    attachment;
     #isDisabled = $derived.by(() => this.opts.disabled.current || this.root.opts.disabled.current);
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.attachment = attachRef(this.opts.ref);
         this.onclick = this.onclick.bind(this);
         this.onkeydown = this.onkeydown.bind(this);
     }
@@ -144,6 +150,6 @@ export class CollapsibleTriggerState {
         //
         onclick: this.onclick,
         onkeydown: this.onkeydown,
-        ...attachRef(this.opts.ref),
+        ...this.attachment,
     }));
 }

package/dist/bits/command/command.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type WritableBoxedValues, type ReadableBoxedValues } from "svelte-toolbelt";
 import type { CommandState } from "./types.js";
-import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, WithRefOpts } from "../../internal/types.js";
+import type { BitsKeyboardEvent, BitsMouseEvent, BitsPointerEvent, RefAttachment, WithRefOpts } from "../../internal/types.js";
 interface GridItem {
     index: number;
     firstRowOfGroup: boolean;
@@ -24,6 +24,7 @@ export declare class CommandRootState {
     #private;
     static create(opts: CommandRootStateOpts): CommandRootState;
     readonly opts: CommandRootStateOpts;
+    readonly attachment: RefAttachment;
     sortAfterTick: boolean;
     sortAndFilterAfterTick: boolean;
     allItems: Set<string>;
@@ -162,6 +163,7 @@ export declare class CommandEmptyState {
     static create(opts: CommandEmptyStateOpts): CommandEmptyState;
     readonly opts: CommandEmptyStateOpts;
     readonly root: CommandRootState;
+    readonly attachment: RefAttachment;
     readonly shouldRender: boolean;
     constructor(opts: CommandEmptyStateOpts, root: CommandRootState);
     readonly props: {
@@ -178,6 +180,7 @@ export declare class CommandGroupContainerState {
     static create(opts: CommandGroupContainerStateOpts): CommandGroupContainerState;
     readonly opts: CommandGroupContainerStateOpts;
     readonly root: CommandRootState;
+    readonly attachment: RefAttachment;
     readonly shouldRender: boolean;
     headingNode: HTMLElement | null;
     trueValue: string;
@@ -195,6 +198,7 @@ export declare class CommandGroupHeadingState {
     static create(opts: CommandGroupHeadingStateOpts): CommandGroupHeadingState;
     readonly opts: CommandGroupHeadingStateOpts;
     readonly group: CommandGroupContainerState;
+    readonly attachment: RefAttachment;
     constructor(opts: CommandGroupHeadingStateOpts, group: CommandGroupContainerState);
     readonly props: {
         readonly id: string;
@@ -206,6 +210,7 @@ export declare class CommandGroupItemsState {
     static create(opts: CommandGroupItemsStateOpts): CommandGroupItemsState;
     readonly opts: CommandGroupItemsStateOpts;
     readonly group: CommandGroupContainerState;
+    readonly attachment: RefAttachment;
     constructor(opts: CommandGroupItemsStateOpts, group: CommandGroupContainerState);
     readonly props: {
         readonly id: string;
@@ -224,6 +229,7 @@ export declare class CommandInputState {
     static create(opts: CommandInputStateOpts): CommandInputState;
     readonly opts: CommandInputStateOpts;
     readonly root: CommandRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CommandInputStateOpts, root: CommandRootState);
     readonly props: {
         readonly id: string;
@@ -253,6 +259,7 @@ export declare class CommandItemState {
     static create(opts: Omit<CommandItemStateOpts, "group">): CommandItemState;
     readonly opts: CommandItemStateOpts;
     readonly root: CommandRootState;
+    readonly attachment: RefAttachment;
     readonly shouldRender: boolean;
     readonly isSelected: boolean;
     trueValue: string;
@@ -279,6 +286,7 @@ interface CommandLoadingStateOpts extends WithRefOpts, ReadableBoxedValues<{
 export declare class CommandLoadingState {
     static create(opts: CommandLoadingStateOpts): CommandLoadingState;
     readonly opts: CommandLoadingStateOpts;
+    readonly attachment: RefAttachment;
     constructor(opts: CommandLoadingStateOpts);
     readonly props: {
         readonly id: string;
@@ -297,6 +305,7 @@ export declare class CommandSeparatorState {
     static create(opts: CommandSeparatorStateOpts): CommandSeparatorState;
     readonly opts: CommandSeparatorStateOpts;
     readonly root: CommandRootState;
+    readonly attachment: RefAttachment;
     readonly shouldRender: boolean;
     constructor(opts: CommandSeparatorStateOpts, root: CommandRootState);
     readonly props: {
@@ -312,6 +321,7 @@ export declare class CommandListState {
     static create(opts: CommandListStateOpts): CommandListState;
     readonly opts: CommandListStateOpts;
     readonly root: CommandRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CommandListStateOpts, root: CommandRootState);
     readonly props: {
         readonly id: string;
@@ -327,6 +337,7 @@ export declare class CommandLabelState {
     static create(opts: CommandLabelStateOpts): CommandLabelState;
     readonly opts: CommandLabelStateOpts;
     readonly root: CommandRootState;
+    readonly attachment: RefAttachment;
     constructor(opts: CommandLabelStateOpts, root: CommandRootState);
     readonly props: {
         readonly id: string;
@@ -340,6 +351,7 @@ export declare class CommandViewportState {
     static create(opts: CommandViewportStateOpts): CommandViewportState;
     readonly opts: CommandViewportStateOpts;
     readonly list: CommandListState;
+    readonly attachment: RefAttachment;
     constructor(opts: CommandViewportStateOpts, list: CommandListState);
     readonly props: {
         readonly id: string;