This commit is contained in:
eewing
2026-02-17 14:10:16 -06:00
parent 2bca5834c5
commit cf73cd3b4c
11246 changed files with 1690552 additions and 0 deletions
@@ -0,0 +1,19 @@
<script lang="ts">
import { boxWith } from "svelte-toolbelt";
import { FloatingAnchorState } from "../use-floating-layer.svelte.js";
import type { AnchorProps } from "./index.js";
import type { Measurable } from "../../../../internal/floating-svelte/types.js";
let { id, children, virtualEl, ref, tooltip = false }: AnchorProps = $props();
FloatingAnchorState.create(
{
id: boxWith(() => id),
virtualEl: boxWith(() => virtualEl as unknown as Measurable | null),
ref,
},
tooltip
);
</script>
{@render children?.()}
@@ -0,0 +1,4 @@
import type { AnchorProps } from "./index.js";
declare const FloatingLayerAnchor: import("svelte").Component<AnchorProps, {}, "">;
type FloatingLayerAnchor = ReturnType<typeof FloatingLayerAnchor>;
export default FloatingLayerAnchor;
@@ -0,0 +1,20 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import { FloatingArrowState } from "../use-floating-layer.svelte.js";
import { Arrow, type ArrowProps } from "../../arrow/index.js";
import { useId } from "../../../../internal/use-id.js";
let { id = useId(), ref = $bindable(null), ...restProps }: ArrowProps = $props();
const arrowState = FloatingArrowState.create({
id: boxWith(() => id),
ref: boxWith(
() => ref,
(v) => (ref = v)
),
});
const mergedProps = $derived(mergeProps(restProps, arrowState.props));
</script>
<Arrow {...mergedProps} />
@@ -0,0 +1,4 @@
import { type ArrowProps } from "../../arrow/index.js";
declare const FloatingLayerArrow: import("svelte").Component<ArrowProps, {}, "ref">;
type FloatingLayerArrow = ReturnType<typeof FloatingLayerArrow>;
export default FloatingLayerArrow;
@@ -0,0 +1,19 @@
<script lang="ts">
import { type Snippet, onMount } from "svelte";
let {
content,
onPlaced,
}: {
content?: Snippet<
[{ props: Record<string, unknown>; wrapperProps: Record<string, unknown> }]
>;
onPlaced?: () => void;
} = $props();
onMount(() => {
onPlaced?.();
});
</script>
{@render content?.({ props: {}, wrapperProps: {} })}
@@ -0,0 +1,13 @@
import { type Snippet } from "svelte";
type $$ComponentProps = {
content?: Snippet<[
{
props: Record<string, unknown>;
wrapperProps: Record<string, unknown>;
}
]>;
onPlaced?: () => void;
};
declare const FloatingLayerContentStatic: import("svelte").Component<$$ComponentProps, {}, "">;
type FloatingLayerContentStatic = ReturnType<typeof FloatingLayerContentStatic>;
export default FloatingLayerContentStatic;
@@ -0,0 +1,65 @@
<script lang="ts">
import { boxWith, mergeProps } from "svelte-toolbelt";
import { FloatingContentState } from "../use-floating-layer.svelte.js";
import type { ContentImplProps } from "./index.js";
import { useId } from "../../../../internal/use-id.js";
let {
content,
side = "bottom",
sideOffset = 0,
align = "center",
alignOffset = 0,
id,
arrowPadding = 0,
avoidCollisions = true,
collisionBoundary = [],
collisionPadding = 0,
hideWhenDetached = false,
onPlaced = () => {},
sticky = "partial",
updatePositionStrategy = "optimized",
strategy = "fixed",
dir = "ltr",
style = {},
wrapperId = useId(),
customAnchor = null,
enabled,
tooltip = false,
}: ContentImplProps = $props();
const contentState = FloatingContentState.create(
{
side: boxWith(() => side),
sideOffset: boxWith(() => sideOffset),
align: boxWith(() => align),
alignOffset: boxWith(() => alignOffset),
id: boxWith(() => id),
arrowPadding: boxWith(() => arrowPadding),
avoidCollisions: boxWith(() => avoidCollisions),
collisionBoundary: boxWith(() => collisionBoundary),
collisionPadding: boxWith(() => collisionPadding),
hideWhenDetached: boxWith(() => hideWhenDetached),
onPlaced: boxWith(() => onPlaced),
sticky: boxWith(() => sticky),
updatePositionStrategy: boxWith(() => updatePositionStrategy),
strategy: boxWith(() => strategy),
dir: boxWith(() => dir),
style: boxWith(() => style),
enabled: boxWith(() => enabled),
wrapperId: boxWith(() => wrapperId),
customAnchor: boxWith(() => customAnchor),
},
tooltip
);
const mergedProps = $derived(
mergeProps(contentState.wrapperProps, {
style: {
pointerEvents: "auto",
},
})
);
</script>
{@render content?.({ props: contentState.props, wrapperProps: mergedProps })}
@@ -0,0 +1,4 @@
import type { ContentImplProps } from "./index.js";
declare const FloatingLayerContent: import("svelte").Component<ContentImplProps, {}, "">;
type FloatingLayerContent = ReturnType<typeof FloatingLayerContent>;
export default FloatingLayerContent;
@@ -0,0 +1,10 @@
<script lang="ts">
import type { Snippet } from "svelte";
import { FloatingRootState } from "../use-floating-layer.svelte.js";
let { children, tooltip = false }: { children?: Snippet; tooltip?: boolean } = $props();
FloatingRootState.create(tooltip);
</script>
{@render children?.()}
@@ -0,0 +1,8 @@
import type { Snippet } from "svelte";
type $$ComponentProps = {
children?: Snippet;
tooltip?: boolean;
};
declare const FloatingLayer: import("svelte").Component<$$ComponentProps, {}, "">;
type FloatingLayer = ReturnType<typeof FloatingLayer>;
export default FloatingLayer;
@@ -0,0 +1,6 @@
export { default as Anchor } from "./floating-layer-anchor.svelte";
export { default as Arrow } from "./floating-layer-arrow.svelte";
export { default as Content } from "./floating-layer-content.svelte";
export { default as ContentStatic } from "./floating-layer-content-static.svelte";
export { default as Root } from "./floating-layer.svelte";
export type { FloatingLayerContentImplProps as ContentImplProps, FloatingLayerContentProps as ContentProps, FloatingLayerAnchorProps as AnchorProps, } from "../types.js";
@@ -0,0 +1,5 @@
export { default as Anchor } from "./floating-layer-anchor.svelte";
export { default as Arrow } from "./floating-layer-arrow.svelte";
export { default as Content } from "./floating-layer-content.svelte";
export { default as ContentStatic } from "./floating-layer-content-static.svelte";
export { default as Root } from "./floating-layer.svelte";
+1
View File
@@ -0,0 +1 @@
export * as FloatingLayer from "./components/index.js";
+1
View File
@@ -0,0 +1 @@
export * as FloatingLayer from "./components/index.js";
+134
View File
@@ -0,0 +1,134 @@
import type { Snippet } from "svelte";
import type { ReadableBox } from "svelte-toolbelt";
import type { Align, Boundary, Side } from "./use-floating-layer.svelte.js";
import type { Arrayable } from "../../../internal/types.js";
import type { Direction, StyleProperties } from "../../../shared/index.js";
import type { Measurable } from "../../../internal/floating-svelte/types.js";
export type FloatingLayerContentProps = {
/**
* The preferred side of the anchor to render against when open.
* Will be reversed when collisions occur.
*
* @see https://floating-ui.com/docs/computePosition#placement
*/
side?: Side;
/**
* The distance in pixels from the anchor to the floating element.
* @see https://floating-ui.com/docs/offset#options
*/
sideOffset?: number;
/**
* The preferred alignment of the anchor to render against when open.
* This may change when collisions occur.
*
* @see https://floating-ui.com/docs/computePosition#placement
*/
align?: Align;
/**
* An offset in pixels from the "start" or "end" alignment options.
* @see https://floating-ui.com/docs/offset#options
*/
alignOffset?: number | undefined;
/**
* This describes the padding between the arrow and the edges of the floating element.
* If your floating element has border-radius, this will prevent it from overflowing
* the corners.
*/
arrowPadding?: number;
/**
* When `true`, overrides the `side` and `align` options to prevent collisions
* with the boundary edges.
*
* @default true
* @see https://floating-ui.com/docs/flip
*/
avoidCollisions?: boolean | undefined;
/**
* A boundary element or array of elements to check for collisions against.
*
* @see https://floating-ui.com/docs/detectoverflow#boundary
*/
collisionBoundary?: Arrayable<Boundary>;
/**
* The amount in pixels of virtual padding around the viewport edges to check
* for overflow which will cause a collision.
*
* @default 8
* @see https://floating-ui.com/docs/detectOverflow#padding
*/
collisionPadding?: number | Partial<Record<Side, number>>;
sticky?: "partial" | "always";
hideWhenDetached?: boolean;
/**
* "optimized" will only update the position when necessary, while "always"
* will update the position on each animation frame, which is useful if the floating
* content is following something like a mouse cursor.
*
* @defaultValue "optimized"
*/
updatePositionStrategy?: "optimized" | "always";
content?: Snippet<[{
props: Record<string, unknown>;
wrapperProps: Record<string, unknown>;
}]>;
/**
* The positioning strategy to use for the floating element.
* @see https://floating-ui.com/docs/computeposition#strategy
*/
strategy?: "absolute" | "fixed" | undefined;
/**
* The text direction of the content.
*/
dir?: Direction;
/**
* Whether to prevent scrolling the body when the content is open.
*/
preventScroll?: boolean;
/**
* Use an element other than the trigger to anchor the content to. If provided,
* the content will be anchored to the provided element instead of the trigger.
*
* You can pass a selector string or an HTMLElement.
*/
customAnchor?: string | HTMLElement | Measurable | null;
};
export type FloatingLayerContentImplProps = {
id: string;
/**
* The ID of the content wrapper element.
*/
wrapperId?: string;
/**
* The style properties to apply to the content.
*/
style?: StyleProperties | string | null;
/**
* Callback that is called when the floating element is placed.
*/
onPlaced?: () => void;
enabled: boolean;
/**
* Tooltips are special in that they are commonly composed
* with other floating components, where the same trigger is
* used for both the tooltip and the popover.
*
* For situations like this, we need to use a different context
* symbol so that conflicts don't occur.
*/
tooltip?: boolean;
} & FloatingLayerContentProps;
export type FloatingLayerAnchorProps = {
id: string;
children?: Snippet;
virtualEl?: ReadableBox<Measurable | null>;
ref: ReadableBox<HTMLElement | null>;
/**
* Tooltips are special in that they are commonly composed
* with other floating components, where the same trigger is
* used for both the tooltip and the popover.
*
* For situations like this, we need to use a different context
* symbol so that conflicts don't occur.
*/
tooltip?: boolean;
};
+1
View File
@@ -0,0 +1 @@
export {};
@@ -0,0 +1,962 @@
import { type Middleware, type Placement } from "@floating-ui/dom";
import { type ReadableBoxedValues, type ReadableBox, type Box } from "svelte-toolbelt";
import type { Arrayable, WithRefOpts } from "../../../internal/types.js";
import type { Measurable, UseFloatingReturn } from "../../../internal/floating-svelte/types.js";
import type { Direction, StyleProperties } from "../../../shared/index.js";
export declare const SIDE_OPTIONS: readonly ["top", "right", "bottom", "left"];
export declare const ALIGN_OPTIONS: readonly ["start", "center", "end"];
export type Side = (typeof SIDE_OPTIONS)[number];
export type Align = (typeof ALIGN_OPTIONS)[number];
export type Boundary = Element | null;
export declare class FloatingRootState {
static create(tooltip?: boolean): FloatingRootState;
anchorNode: import("svelte-toolbelt").WritableBox<HTMLElement | Measurable | null>;
customAnchorNode: import("svelte-toolbelt").WritableBox<string | HTMLElement | Measurable | null>;
triggerNode: ReadableBox<Measurable | HTMLElement | null>;
constructor();
}
export interface FloatingContentStateOpts extends ReadableBoxedValues<{
id: string;
wrapperId: string;
side: Side;
sideOffset: number;
align: Align;
alignOffset: number;
arrowPadding: number;
avoidCollisions: boolean;
collisionBoundary: Arrayable<Boundary>;
collisionPadding: number | Partial<Record<Side, number>>;
sticky: "partial" | "always";
hideWhenDetached: boolean;
updatePositionStrategy: "optimized" | "always";
strategy: "fixed" | "absolute";
onPlaced: () => void;
dir: Direction;
style: StyleProperties | null | undefined | string;
enabled: boolean;
customAnchor: string | HTMLElement | null | Measurable;
}> {
}
export declare class FloatingContentState {
#private;
static create(opts: FloatingContentStateOpts, tooltip?: boolean): FloatingContentState;
readonly opts: FloatingContentStateOpts;
readonly root: FloatingRootState;
contentRef: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
wrapperRef: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
arrowRef: import("svelte-toolbelt").WritableBox<HTMLElement | null>;
readonly contentAttachment: {
[x: symbol]: (node: HTMLElement) => () => void;
};
readonly wrapperAttachment: {
[x: symbol]: (node: HTMLElement) => () => void;
};
readonly arrowAttachment: {
[x: symbol]: (node: HTMLElement) => () => void;
};
arrowId: Box<string>;
hasExplicitBoundaries: boolean;
detectOverflowOptions: {
padding: number | Partial<Record<"left" | "right" | "top" | "bottom", number>>;
boundary: Element[];
altBoundary: boolean;
};
middleware: Middleware[];
floating: UseFloatingReturn;
placedSide: "left" | "right" | "top" | "bottom";
placedAlign: "center" | "end" | "start";
arrowX: number;
arrowY: number;
cannotCenterArrow: boolean;
contentZIndex: string | undefined;
arrowBaseSide: "left" | "right" | "top" | "bottom";
wrapperProps: {
readonly id: string;
readonly "data-bits-floating-content-wrapper": "";
readonly style: {
readonly accentColor?: import("csstype").Property.AccentColor | undefined;
readonly alignContent?: import("csstype").Property.AlignContent | undefined;
readonly alignItems?: import("csstype").Property.AlignItems | undefined;
readonly alignSelf?: import("csstype").Property.AlignSelf | undefined;
readonly alignTracks?: import("csstype").Property.AlignTracks | undefined;
readonly animationComposition?: import("csstype").Property.AnimationComposition | undefined;
readonly animationDelay?: import("csstype").Property.AnimationDelay<string & {}> | undefined;
readonly animationDirection?: import("csstype").Property.AnimationDirection | undefined;
readonly animationDuration?: import("csstype").Property.AnimationDuration<string & {}> | undefined;
readonly animationFillMode?: import("csstype").Property.AnimationFillMode | undefined;
readonly animationIterationCount?: import("csstype").Property.AnimationIterationCount | undefined;
readonly animationName?: import("csstype").Property.AnimationName | undefined;
readonly animationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
readonly animationRangeEnd?: import("csstype").Property.AnimationRangeEnd<0 | (string & {})> | undefined;
readonly animationRangeStart?: import("csstype").Property.AnimationRangeStart<0 | (string & {})> | undefined;
readonly animationTimeline?: import("csstype").Property.AnimationTimeline | undefined;
readonly animationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
readonly appearance?: import("csstype").Property.Appearance | undefined;
readonly aspectRatio?: import("csstype").Property.AspectRatio | undefined;
readonly backdropFilter?: import("csstype").Property.BackdropFilter | undefined;
readonly backfaceVisibility?: import("csstype").Property.BackfaceVisibility | undefined;
readonly backgroundAttachment?: import("csstype").Property.BackgroundAttachment | undefined;
readonly backgroundBlendMode?: import("csstype").Property.BackgroundBlendMode | undefined;
readonly backgroundClip?: import("csstype").Property.BackgroundClip | undefined;
readonly backgroundColor?: import("csstype").Property.BackgroundColor | undefined;
readonly backgroundImage?: import("csstype").Property.BackgroundImage | undefined;
readonly backgroundOrigin?: import("csstype").Property.BackgroundOrigin | undefined;
readonly backgroundPositionX?: import("csstype").Property.BackgroundPositionX<0 | (string & {})> | undefined;
readonly backgroundPositionY?: import("csstype").Property.BackgroundPositionY<0 | (string & {})> | undefined;
readonly backgroundRepeat?: import("csstype").Property.BackgroundRepeat | undefined;
readonly backgroundSize?: import("csstype").Property.BackgroundSize<0 | (string & {})> | undefined;
readonly blockOverflow?: import("csstype").Property.BlockOverflow | undefined;
readonly blockSize?: import("csstype").Property.BlockSize<0 | (string & {})> | undefined;
readonly borderBlockColor?: import("csstype").Property.BorderBlockColor | undefined;
readonly borderBlockEndColor?: import("csstype").Property.BorderBlockEndColor | undefined;
readonly borderBlockEndStyle?: import("csstype").Property.BorderBlockEndStyle | undefined;
readonly borderBlockEndWidth?: import("csstype").Property.BorderBlockEndWidth<0 | (string & {})> | undefined;
readonly borderBlockStartColor?: import("csstype").Property.BorderBlockStartColor | undefined;
readonly borderBlockStartStyle?: import("csstype").Property.BorderBlockStartStyle | undefined;
readonly borderBlockStartWidth?: import("csstype").Property.BorderBlockStartWidth<0 | (string & {})> | undefined;
readonly borderBlockStyle?: import("csstype").Property.BorderBlockStyle | undefined;
readonly borderBlockWidth?: import("csstype").Property.BorderBlockWidth<0 | (string & {})> | undefined;
readonly borderBottomColor?: import("csstype").Property.BorderBottomColor | undefined;
readonly borderBottomLeftRadius?: import("csstype").Property.BorderBottomLeftRadius<0 | (string & {})> | undefined;
readonly borderBottomRightRadius?: import("csstype").Property.BorderBottomRightRadius<0 | (string & {})> | undefined;
readonly borderBottomStyle?: import("csstype").Property.BorderBottomStyle | undefined;
readonly borderBottomWidth?: import("csstype").Property.BorderBottomWidth<0 | (string & {})> | undefined;
readonly borderCollapse?: import("csstype").Property.BorderCollapse | undefined;
readonly borderEndEndRadius?: import("csstype").Property.BorderEndEndRadius<0 | (string & {})> | undefined;
readonly borderEndStartRadius?: import("csstype").Property.BorderEndStartRadius<0 | (string & {})> | undefined;
readonly borderImageOutset?: import("csstype").Property.BorderImageOutset<0 | (string & {})> | undefined;
readonly borderImageRepeat?: import("csstype").Property.BorderImageRepeat | undefined;
readonly borderImageSlice?: import("csstype").Property.BorderImageSlice | undefined;
readonly borderImageSource?: import("csstype").Property.BorderImageSource | undefined;
readonly borderImageWidth?: import("csstype").Property.BorderImageWidth<0 | (string & {})> | undefined;
readonly borderInlineColor?: import("csstype").Property.BorderInlineColor | undefined;
readonly borderInlineEndColor?: import("csstype").Property.BorderInlineEndColor | undefined;
readonly borderInlineEndStyle?: import("csstype").Property.BorderInlineEndStyle | undefined;
readonly borderInlineEndWidth?: import("csstype").Property.BorderInlineEndWidth<0 | (string & {})> | undefined;
readonly borderInlineStartColor?: import("csstype").Property.BorderInlineStartColor | undefined;
readonly borderInlineStartStyle?: import("csstype").Property.BorderInlineStartStyle | undefined;
readonly borderInlineStartWidth?: import("csstype").Property.BorderInlineStartWidth<0 | (string & {})> | undefined;
readonly borderInlineStyle?: import("csstype").Property.BorderInlineStyle | undefined;
readonly borderInlineWidth?: import("csstype").Property.BorderInlineWidth<0 | (string & {})> | undefined;
readonly borderLeftColor?: import("csstype").Property.BorderLeftColor | undefined;
readonly borderLeftStyle?: import("csstype").Property.BorderLeftStyle | undefined;
readonly borderLeftWidth?: import("csstype").Property.BorderLeftWidth<0 | (string & {})> | undefined;
readonly borderRightColor?: import("csstype").Property.BorderRightColor | undefined;
readonly borderRightStyle?: import("csstype").Property.BorderRightStyle | undefined;
readonly borderRightWidth?: import("csstype").Property.BorderRightWidth<0 | (string & {})> | undefined;
readonly borderSpacing?: import("csstype").Property.BorderSpacing<0 | (string & {})> | undefined;
readonly borderStartEndRadius?: import("csstype").Property.BorderStartEndRadius<0 | (string & {})> | undefined;
readonly borderStartStartRadius?: import("csstype").Property.BorderStartStartRadius<0 | (string & {})> | undefined;
readonly borderTopColor?: import("csstype").Property.BorderTopColor | undefined;
readonly borderTopLeftRadius?: import("csstype").Property.BorderTopLeftRadius<0 | (string & {})> | undefined;
readonly borderTopRightRadius?: import("csstype").Property.BorderTopRightRadius<0 | (string & {})> | undefined;
readonly borderTopStyle?: import("csstype").Property.BorderTopStyle | undefined;
readonly borderTopWidth?: import("csstype").Property.BorderTopWidth<0 | (string & {})> | undefined;
readonly bottom?: import("csstype").Property.Bottom<0 | (string & {})> | undefined;
readonly boxDecorationBreak?: import("csstype").Property.BoxDecorationBreak | undefined;
readonly boxShadow?: import("csstype").Property.BoxShadow | undefined;
readonly boxSizing?: import("csstype").Property.BoxSizing | undefined;
readonly breakAfter?: import("csstype").Property.BreakAfter | undefined;
readonly breakBefore?: import("csstype").Property.BreakBefore | undefined;
readonly breakInside?: import("csstype").Property.BreakInside | undefined;
readonly captionSide?: import("csstype").Property.CaptionSide | undefined;
readonly caretColor?: import("csstype").Property.CaretColor | undefined;
readonly caretShape?: import("csstype").Property.CaretShape | undefined;
readonly clear?: import("csstype").Property.Clear | undefined;
readonly clipPath?: import("csstype").Property.ClipPath | undefined;
readonly color?: import("csstype").Property.Color | undefined;
readonly colorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
readonly colorScheme?: import("csstype").Property.ColorScheme | undefined;
readonly columnCount?: import("csstype").Property.ColumnCount | undefined;
readonly columnFill?: import("csstype").Property.ColumnFill | undefined;
readonly columnGap?: import("csstype").Property.ColumnGap<0 | (string & {})> | undefined;
readonly columnRuleColor?: import("csstype").Property.ColumnRuleColor | undefined;
readonly columnRuleStyle?: import("csstype").Property.ColumnRuleStyle | undefined;
readonly columnRuleWidth?: import("csstype").Property.ColumnRuleWidth<0 | (string & {})> | undefined;
readonly columnSpan?: import("csstype").Property.ColumnSpan | undefined;
readonly columnWidth?: import("csstype").Property.ColumnWidth<0 | (string & {})> | undefined;
readonly contain?: import("csstype").Property.Contain | undefined;
readonly containIntrinsicBlockSize?: import("csstype").Property.ContainIntrinsicBlockSize<0 | (string & {})> | undefined;
readonly containIntrinsicHeight?: import("csstype").Property.ContainIntrinsicHeight<0 | (string & {})> | undefined;
readonly containIntrinsicInlineSize?: import("csstype").Property.ContainIntrinsicInlineSize<0 | (string & {})> | undefined;
readonly containIntrinsicWidth?: import("csstype").Property.ContainIntrinsicWidth<0 | (string & {})> | undefined;
readonly containerName?: import("csstype").Property.ContainerName | undefined;
readonly containerType?: import("csstype").Property.ContainerType | undefined;
readonly content?: import("csstype").Property.Content | undefined;
readonly contentVisibility?: import("csstype").Property.ContentVisibility | undefined;
readonly counterIncrement?: import("csstype").Property.CounterIncrement | undefined;
readonly counterReset?: import("csstype").Property.CounterReset | undefined;
readonly counterSet?: import("csstype").Property.CounterSet | undefined;
readonly cursor?: import("csstype").Property.Cursor | undefined;
readonly direction?: import("csstype").Property.Direction | undefined;
readonly display?: import("csstype").Property.Display | undefined;
readonly emptyCells?: import("csstype").Property.EmptyCells | undefined;
readonly filter?: import("csstype").Property.Filter | undefined;
readonly flexBasis?: import("csstype").Property.FlexBasis<0 | (string & {})> | undefined;
readonly flexDirection?: import("csstype").Property.FlexDirection | undefined;
readonly flexGrow?: import("csstype").Property.FlexGrow | undefined;
readonly flexShrink?: import("csstype").Property.FlexShrink | undefined;
readonly flexWrap?: import("csstype").Property.FlexWrap | undefined;
readonly float?: import("csstype").Property.Float | undefined;
readonly fontFamily?: import("csstype").Property.FontFamily | undefined;
readonly fontFeatureSettings?: import("csstype").Property.FontFeatureSettings | undefined;
readonly fontKerning?: import("csstype").Property.FontKerning | undefined;
readonly fontLanguageOverride?: import("csstype").Property.FontLanguageOverride | undefined;
readonly fontOpticalSizing?: import("csstype").Property.FontOpticalSizing | undefined;
readonly fontPalette?: import("csstype").Property.FontPalette | undefined;
readonly fontSize?: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
readonly fontSizeAdjust?: import("csstype").Property.FontSizeAdjust | undefined;
readonly fontSmooth?: import("csstype").Property.FontSmooth<0 | (string & {})> | undefined;
readonly fontStretch?: import("csstype").Property.FontStretch | undefined;
readonly fontStyle?: import("csstype").Property.FontStyle | undefined;
readonly fontSynthesis?: import("csstype").Property.FontSynthesis | undefined;
readonly fontSynthesisPosition?: import("csstype").Property.FontSynthesisPosition | undefined;
readonly fontSynthesisSmallCaps?: import("csstype").Property.FontSynthesisSmallCaps | undefined;
readonly fontSynthesisStyle?: import("csstype").Property.FontSynthesisStyle | undefined;
readonly fontSynthesisWeight?: import("csstype").Property.FontSynthesisWeight | undefined;
readonly fontVariant?: import("csstype").Property.FontVariant | undefined;
readonly fontVariantAlternates?: import("csstype").Property.FontVariantAlternates | undefined;
readonly fontVariantCaps?: import("csstype").Property.FontVariantCaps | undefined;
readonly fontVariantEastAsian?: import("csstype").Property.FontVariantEastAsian | undefined;
readonly fontVariantEmoji?: import("csstype").Property.FontVariantEmoji | undefined;
readonly fontVariantLigatures?: import("csstype").Property.FontVariantLigatures | undefined;
readonly fontVariantNumeric?: import("csstype").Property.FontVariantNumeric | undefined;
readonly fontVariantPosition?: import("csstype").Property.FontVariantPosition | undefined;
readonly fontVariationSettings?: import("csstype").Property.FontVariationSettings | undefined;
readonly fontWeight?: import("csstype").Property.FontWeight | undefined;
readonly forcedColorAdjust?: import("csstype").Property.ForcedColorAdjust | undefined;
readonly gridAutoColumns?: import("csstype").Property.GridAutoColumns<0 | (string & {})> | undefined;
readonly gridAutoFlow?: import("csstype").Property.GridAutoFlow | undefined;
readonly gridAutoRows?: import("csstype").Property.GridAutoRows<0 | (string & {})> | undefined;
readonly gridColumnEnd?: import("csstype").Property.GridColumnEnd | undefined;
readonly gridColumnStart?: import("csstype").Property.GridColumnStart | undefined;
readonly gridRowEnd?: import("csstype").Property.GridRowEnd | undefined;
readonly gridRowStart?: import("csstype").Property.GridRowStart | undefined;
readonly gridTemplateAreas?: import("csstype").Property.GridTemplateAreas | undefined;
readonly gridTemplateColumns?: import("csstype").Property.GridTemplateColumns<0 | (string & {})> | undefined;
readonly gridTemplateRows?: import("csstype").Property.GridTemplateRows<0 | (string & {})> | undefined;
readonly hangingPunctuation?: import("csstype").Property.HangingPunctuation | undefined;
readonly height?: import("csstype").Property.Height<0 | (string & {})> | undefined;
readonly hyphenateCharacter?: import("csstype").Property.HyphenateCharacter | undefined;
readonly hyphenateLimitChars?: import("csstype").Property.HyphenateLimitChars | undefined;
readonly hyphens?: import("csstype").Property.Hyphens | undefined;
readonly imageOrientation?: import("csstype").Property.ImageOrientation | undefined;
readonly imageRendering?: import("csstype").Property.ImageRendering | undefined;
readonly imageResolution?: import("csstype").Property.ImageResolution | undefined;
readonly initialLetter?: import("csstype").Property.InitialLetter | undefined;
readonly inlineSize?: import("csstype").Property.InlineSize<0 | (string & {})> | undefined;
readonly inputSecurity?: import("csstype").Property.InputSecurity | undefined;
readonly insetBlockEnd?: import("csstype").Property.InsetBlockEnd<0 | (string & {})> | undefined;
readonly insetBlockStart?: import("csstype").Property.InsetBlockStart<0 | (string & {})> | undefined;
readonly insetInlineEnd?: import("csstype").Property.InsetInlineEnd<0 | (string & {})> | undefined;
readonly insetInlineStart?: import("csstype").Property.InsetInlineStart<0 | (string & {})> | undefined;
readonly isolation?: import("csstype").Property.Isolation | undefined;
readonly justifyContent?: import("csstype").Property.JustifyContent | undefined;
readonly justifyItems?: import("csstype").Property.JustifyItems | undefined;
readonly justifySelf?: import("csstype").Property.JustifySelf | undefined;
readonly justifyTracks?: import("csstype").Property.JustifyTracks | undefined;
left: string | 0;
readonly letterSpacing?: import("csstype").Property.LetterSpacing<0 | (string & {})> | undefined;
readonly lineBreak?: import("csstype").Property.LineBreak | undefined;
readonly lineHeight?: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
readonly lineHeightStep?: import("csstype").Property.LineHeightStep<0 | (string & {})> | undefined;
readonly listStyleImage?: import("csstype").Property.ListStyleImage | undefined;
readonly listStylePosition?: import("csstype").Property.ListStylePosition | undefined;
readonly listStyleType?: import("csstype").Property.ListStyleType | undefined;
readonly marginBlockEnd?: import("csstype").Property.MarginBlockEnd<0 | (string & {})> | undefined;
readonly marginBlockStart?: import("csstype").Property.MarginBlockStart<0 | (string & {})> | undefined;
readonly marginBottom?: import("csstype").Property.MarginBottom<0 | (string & {})> | undefined;
readonly marginInlineEnd?: import("csstype").Property.MarginInlineEnd<0 | (string & {})> | undefined;
readonly marginInlineStart?: import("csstype").Property.MarginInlineStart<0 | (string & {})> | undefined;
readonly marginLeft?: import("csstype").Property.MarginLeft<0 | (string & {})> | undefined;
readonly marginRight?: import("csstype").Property.MarginRight<0 | (string & {})> | undefined;
readonly marginTop?: import("csstype").Property.MarginTop<0 | (string & {})> | undefined;
readonly marginTrim?: import("csstype").Property.MarginTrim | undefined;
readonly maskBorderMode?: import("csstype").Property.MaskBorderMode | undefined;
readonly maskBorderOutset?: import("csstype").Property.MaskBorderOutset<0 | (string & {})> | undefined;
readonly maskBorderRepeat?: import("csstype").Property.MaskBorderRepeat | undefined;
readonly maskBorderSlice?: import("csstype").Property.MaskBorderSlice | undefined;
readonly maskBorderSource?: import("csstype").Property.MaskBorderSource | undefined;
readonly maskBorderWidth?: import("csstype").Property.MaskBorderWidth<0 | (string & {})> | undefined;
readonly maskClip?: import("csstype").Property.MaskClip | undefined;
readonly maskComposite?: import("csstype").Property.MaskComposite | undefined;
readonly maskImage?: import("csstype").Property.MaskImage | undefined;
readonly maskMode?: import("csstype").Property.MaskMode | undefined;
readonly maskOrigin?: import("csstype").Property.MaskOrigin | undefined;
readonly maskPosition?: import("csstype").Property.MaskPosition<0 | (string & {})> | undefined;
readonly maskRepeat?: import("csstype").Property.MaskRepeat | undefined;
readonly maskSize?: import("csstype").Property.MaskSize<0 | (string & {})> | undefined;
readonly maskType?: import("csstype").Property.MaskType | undefined;
readonly masonryAutoFlow?: import("csstype").Property.MasonryAutoFlow | undefined;
readonly mathDepth?: import("csstype").Property.MathDepth | undefined;
readonly mathShift?: import("csstype").Property.MathShift | undefined;
readonly mathStyle?: import("csstype").Property.MathStyle | undefined;
readonly maxBlockSize?: import("csstype").Property.MaxBlockSize<0 | (string & {})> | undefined;
readonly maxHeight?: import("csstype").Property.MaxHeight<0 | (string & {})> | undefined;
readonly maxInlineSize?: import("csstype").Property.MaxInlineSize<0 | (string & {})> | undefined;
readonly maxLines?: import("csstype").Property.MaxLines | undefined;
readonly maxWidth?: import("csstype").Property.MaxWidth<0 | (string & {})> | undefined;
readonly minBlockSize?: import("csstype").Property.MinBlockSize<0 | (string & {})> | undefined;
readonly minHeight?: import("csstype").Property.MinHeight<0 | (string & {})> | undefined;
readonly minInlineSize?: import("csstype").Property.MinInlineSize<0 | (string & {})> | undefined;
minWidth: import("csstype").Property.MinWidth<0 | (string & {})>;
readonly mixBlendMode?: import("csstype").Property.MixBlendMode | undefined;
readonly motionDistance?: import("csstype").Property.OffsetDistance<0 | (string & {})> | undefined;
readonly motionPath?: import("csstype").Property.OffsetPath | undefined;
readonly motionRotation?: import("csstype").Property.OffsetRotate | undefined;
readonly objectFit?: import("csstype").Property.ObjectFit | undefined;
readonly objectPosition?: import("csstype").Property.ObjectPosition<0 | (string & {})> | undefined;
readonly offsetAnchor?: import("csstype").Property.OffsetAnchor<0 | (string & {})> | undefined;
readonly offsetDistance?: import("csstype").Property.OffsetDistance<0 | (string & {})> | undefined;
readonly offsetPath?: import("csstype").Property.OffsetPath | undefined;
readonly offsetPosition?: import("csstype").Property.OffsetPosition<0 | (string & {})> | undefined;
readonly offsetRotate?: import("csstype").Property.OffsetRotate | undefined;
readonly offsetRotation?: import("csstype").Property.OffsetRotate | undefined;
readonly opacity?: import("csstype").Property.Opacity | undefined;
readonly order?: import("csstype").Property.Order | undefined;
readonly orphans?: import("csstype").Property.Orphans | undefined;
readonly outlineColor?: import("csstype").Property.OutlineColor | undefined;
readonly outlineOffset?: import("csstype").Property.OutlineOffset<0 | (string & {})> | undefined;
readonly outlineStyle?: import("csstype").Property.OutlineStyle | undefined;
readonly outlineWidth?: import("csstype").Property.OutlineWidth<0 | (string & {})> | undefined;
readonly overflowAnchor?: import("csstype").Property.OverflowAnchor | undefined;
readonly overflowBlock?: import("csstype").Property.OverflowBlock | undefined;
readonly overflowClipBox?: import("csstype").Property.OverflowClipBox | undefined;
readonly overflowClipMargin?: import("csstype").Property.OverflowClipMargin<0 | (string & {})> | undefined;
readonly overflowInline?: import("csstype").Property.OverflowInline | undefined;
readonly overflowWrap?: import("csstype").Property.OverflowWrap | undefined;
readonly overflowX?: import("csstype").Property.OverflowX | undefined;
readonly overflowY?: import("csstype").Property.OverflowY | undefined;
readonly overlay?: import("csstype").Property.Overlay | undefined;
readonly overscrollBehaviorBlock?: import("csstype").Property.OverscrollBehaviorBlock | undefined;
readonly overscrollBehaviorInline?: import("csstype").Property.OverscrollBehaviorInline | undefined;
readonly overscrollBehaviorX?: import("csstype").Property.OverscrollBehaviorX | undefined;
readonly overscrollBehaviorY?: import("csstype").Property.OverscrollBehaviorY | undefined;
readonly paddingBlockEnd?: import("csstype").Property.PaddingBlockEnd<0 | (string & {})> | undefined;
readonly paddingBlockStart?: import("csstype").Property.PaddingBlockStart<0 | (string & {})> | undefined;
readonly paddingBottom?: import("csstype").Property.PaddingBottom<0 | (string & {})> | undefined;
readonly paddingInlineEnd?: import("csstype").Property.PaddingInlineEnd<0 | (string & {})> | undefined;
readonly paddingInlineStart?: import("csstype").Property.PaddingInlineStart<0 | (string & {})> | undefined;
readonly paddingLeft?: import("csstype").Property.PaddingLeft<0 | (string & {})> | undefined;
readonly paddingRight?: import("csstype").Property.PaddingRight<0 | (string & {})> | undefined;
readonly paddingTop?: import("csstype").Property.PaddingTop<0 | (string & {})> | undefined;
readonly page?: import("csstype").Property.Page | undefined;
readonly pageBreakAfter?: import("csstype").Property.PageBreakAfter | undefined;
readonly pageBreakBefore?: import("csstype").Property.PageBreakBefore | undefined;
readonly pageBreakInside?: import("csstype").Property.PageBreakInside | undefined;
readonly paintOrder?: import("csstype").Property.PaintOrder | undefined;
readonly perspective?: import("csstype").Property.Perspective<0 | (string & {})> | undefined;
readonly perspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<0 | (string & {})> | undefined;
readonly pointerEvents?: import("csstype").Property.PointerEvents | undefined;
position: "relative" | "absolute" | "fixed" | "sticky" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-webkit-sticky" | "static";
readonly printColorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
readonly quotes?: import("csstype").Property.Quotes | undefined;
readonly resize?: import("csstype").Property.Resize | undefined;
readonly right?: import("csstype").Property.Right<0 | (string & {})> | undefined;
readonly rotate?: import("csstype").Property.Rotate | undefined;
readonly rowGap?: import("csstype").Property.RowGap<0 | (string & {})> | undefined;
readonly rubyAlign?: import("csstype").Property.RubyAlign | undefined;
readonly rubyMerge?: import("csstype").Property.RubyMerge | undefined;
readonly rubyPosition?: import("csstype").Property.RubyPosition | undefined;
readonly scale?: import("csstype").Property.Scale | undefined;
readonly scrollBehavior?: import("csstype").Property.ScrollBehavior | undefined;
readonly scrollMarginBlockEnd?: import("csstype").Property.ScrollMarginBlockEnd<0 | (string & {})> | undefined;
readonly scrollMarginBlockStart?: import("csstype").Property.ScrollMarginBlockStart<0 | (string & {})> | undefined;
readonly scrollMarginBottom?: import("csstype").Property.ScrollMarginBottom<0 | (string & {})> | undefined;
readonly scrollMarginInlineEnd?: import("csstype").Property.ScrollMarginInlineEnd<0 | (string & {})> | undefined;
readonly scrollMarginInlineStart?: import("csstype").Property.ScrollMarginInlineStart<0 | (string & {})> | undefined;
readonly scrollMarginLeft?: import("csstype").Property.ScrollMarginLeft<0 | (string & {})> | undefined;
readonly scrollMarginRight?: import("csstype").Property.ScrollMarginRight<0 | (string & {})> | undefined;
readonly scrollMarginTop?: import("csstype").Property.ScrollMarginTop<0 | (string & {})> | undefined;
readonly scrollPaddingBlockEnd?: import("csstype").Property.ScrollPaddingBlockEnd<0 | (string & {})> | undefined;
readonly scrollPaddingBlockStart?: import("csstype").Property.ScrollPaddingBlockStart<0 | (string & {})> | undefined;
readonly scrollPaddingBottom?: import("csstype").Property.ScrollPaddingBottom<0 | (string & {})> | undefined;
readonly scrollPaddingInlineEnd?: import("csstype").Property.ScrollPaddingInlineEnd<0 | (string & {})> | undefined;
readonly scrollPaddingInlineStart?: import("csstype").Property.ScrollPaddingInlineStart<0 | (string & {})> | undefined;
readonly scrollPaddingLeft?: import("csstype").Property.ScrollPaddingLeft<0 | (string & {})> | undefined;
readonly scrollPaddingRight?: import("csstype").Property.ScrollPaddingRight<0 | (string & {})> | undefined;
readonly scrollPaddingTop?: import("csstype").Property.ScrollPaddingTop<0 | (string & {})> | undefined;
readonly scrollSnapAlign?: import("csstype").Property.ScrollSnapAlign | undefined;
readonly scrollSnapMarginBottom?: import("csstype").Property.ScrollMarginBottom<0 | (string & {})> | undefined;
readonly scrollSnapMarginLeft?: import("csstype").Property.ScrollMarginLeft<0 | (string & {})> | undefined;
readonly scrollSnapMarginRight?: import("csstype").Property.ScrollMarginRight<0 | (string & {})> | undefined;
readonly scrollSnapMarginTop?: import("csstype").Property.ScrollMarginTop<0 | (string & {})> | undefined;
readonly scrollSnapStop?: import("csstype").Property.ScrollSnapStop | undefined;
readonly scrollSnapType?: import("csstype").Property.ScrollSnapType | undefined;
readonly scrollTimelineAxis?: import("csstype").Property.ScrollTimelineAxis | undefined;
readonly scrollTimelineName?: import("csstype").Property.ScrollTimelineName | undefined;
readonly scrollbarColor?: import("csstype").Property.ScrollbarColor | undefined;
readonly scrollbarGutter?: import("csstype").Property.ScrollbarGutter | undefined;
readonly scrollbarWidth?: import("csstype").Property.ScrollbarWidth | undefined;
readonly shapeImageThreshold?: import("csstype").Property.ShapeImageThreshold | undefined;
readonly shapeMargin?: import("csstype").Property.ShapeMargin<0 | (string & {})> | undefined;
readonly shapeOutside?: import("csstype").Property.ShapeOutside | undefined;
readonly tabSize?: import("csstype").Property.TabSize<0 | (string & {})> | undefined;
readonly tableLayout?: import("csstype").Property.TableLayout | undefined;
readonly textAlign?: import("csstype").Property.TextAlign | undefined;
readonly textAlignLast?: import("csstype").Property.TextAlignLast | undefined;
readonly textCombineUpright?: import("csstype").Property.TextCombineUpright | undefined;
readonly textDecorationColor?: import("csstype").Property.TextDecorationColor | undefined;
readonly textDecorationLine?: import("csstype").Property.TextDecorationLine | undefined;
readonly textDecorationSkip?: import("csstype").Property.TextDecorationSkip | undefined;
readonly textDecorationSkipInk?: import("csstype").Property.TextDecorationSkipInk | undefined;
readonly textDecorationStyle?: import("csstype").Property.TextDecorationStyle | undefined;
readonly textDecorationThickness?: import("csstype").Property.TextDecorationThickness<0 | (string & {})> | undefined;
readonly textEmphasisColor?: import("csstype").Property.TextEmphasisColor | undefined;
readonly textEmphasisPosition?: import("csstype").Property.TextEmphasisPosition | undefined;
readonly textEmphasisStyle?: import("csstype").Property.TextEmphasisStyle | undefined;
readonly textIndent?: import("csstype").Property.TextIndent<0 | (string & {})> | undefined;
readonly textJustify?: import("csstype").Property.TextJustify | undefined;
readonly textOrientation?: import("csstype").Property.TextOrientation | undefined;
readonly textOverflow?: import("csstype").Property.TextOverflow | undefined;
readonly textRendering?: import("csstype").Property.TextRendering | undefined;
readonly textShadow?: import("csstype").Property.TextShadow | undefined;
readonly textSizeAdjust?: import("csstype").Property.TextSizeAdjust | undefined;
readonly textTransform?: import("csstype").Property.TextTransform | undefined;
readonly textUnderlineOffset?: import("csstype").Property.TextUnderlineOffset<0 | (string & {})> | undefined;
readonly textUnderlinePosition?: import("csstype").Property.TextUnderlinePosition | undefined;
readonly textWrap?: import("csstype").Property.TextWrap | undefined;
readonly timelineScope?: import("csstype").Property.TimelineScope | undefined;
top: string | 0;
readonly touchAction?: import("csstype").Property.TouchAction | undefined;
transform: string | undefined;
readonly transformBox?: import("csstype").Property.TransformBox | undefined;
readonly transformOrigin?: import("csstype").Property.TransformOrigin<0 | (string & {})> | undefined;
readonly transformStyle?: import("csstype").Property.TransformStyle | undefined;
readonly transitionBehavior?: import("csstype").Property.TransitionBehavior | undefined;
readonly transitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
readonly transitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
readonly transitionProperty?: import("csstype").Property.TransitionProperty | undefined;
readonly transitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
readonly translate?: import("csstype").Property.Translate<0 | (string & {})> | undefined;
readonly unicodeBidi?: import("csstype").Property.UnicodeBidi | undefined;
readonly userSelect?: import("csstype").Property.UserSelect | undefined;
readonly verticalAlign?: import("csstype").Property.VerticalAlign<0 | (string & {})> | undefined;
readonly viewTimelineAxis?: import("csstype").Property.ViewTimelineAxis | undefined;
readonly viewTimelineInset?: import("csstype").Property.ViewTimelineInset<0 | (string & {})> | undefined;
readonly viewTimelineName?: import("csstype").Property.ViewTimelineName | undefined;
readonly viewTransitionName?: import("csstype").Property.ViewTransitionName | undefined;
visibility?: string | undefined;
readonly whiteSpace?: import("csstype").Property.WhiteSpace | undefined;
readonly whiteSpaceCollapse?: import("csstype").Property.WhiteSpaceCollapse | undefined;
readonly whiteSpaceTrim?: import("csstype").Property.WhiteSpaceTrim | undefined;
readonly widows?: import("csstype").Property.Widows | undefined;
readonly width?: import("csstype").Property.Width<0 | (string & {})> | undefined;
willChange?: string;
readonly wordBreak?: import("csstype").Property.WordBreak | undefined;
readonly wordSpacing?: import("csstype").Property.WordSpacing<0 | (string & {})> | undefined;
readonly wordWrap?: import("csstype").Property.WordWrap | undefined;
readonly writingMode?: import("csstype").Property.WritingMode | undefined;
zIndex: string | (number & {}) | undefined;
readonly zoom?: import("csstype").Property.Zoom | undefined;
readonly all?: import("csstype").Property.All | undefined;
readonly animation?: import("csstype").Property.Animation<string & {}> | undefined;
readonly animationRange?: import("csstype").Property.AnimationRange<0 | (string & {})> | undefined;
readonly background?: import("csstype").Property.Background<0 | (string & {})> | undefined;
readonly backgroundPosition?: import("csstype").Property.BackgroundPosition<0 | (string & {})> | undefined;
readonly border?: import("csstype").Property.Border<0 | (string & {})> | undefined;
readonly borderBlock?: import("csstype").Property.BorderBlock<0 | (string & {})> | undefined;
readonly borderBlockEnd?: import("csstype").Property.BorderBlockEnd<0 | (string & {})> | undefined;
readonly borderBlockStart?: import("csstype").Property.BorderBlockStart<0 | (string & {})> | undefined;
readonly borderBottom?: import("csstype").Property.BorderBottom<0 | (string & {})> | undefined;
readonly borderColor?: import("csstype").Property.BorderColor | undefined;
readonly borderImage?: import("csstype").Property.BorderImage | undefined;
readonly borderInline?: import("csstype").Property.BorderInline<0 | (string & {})> | undefined;
readonly borderInlineEnd?: import("csstype").Property.BorderInlineEnd<0 | (string & {})> | undefined;
readonly borderInlineStart?: import("csstype").Property.BorderInlineStart<0 | (string & {})> | undefined;
readonly borderLeft?: import("csstype").Property.BorderLeft<0 | (string & {})> | undefined;
readonly borderRadius?: import("csstype").Property.BorderRadius<0 | (string & {})> | undefined;
readonly borderRight?: import("csstype").Property.BorderRight<0 | (string & {})> | undefined;
readonly borderStyle?: import("csstype").Property.BorderStyle | undefined;
readonly borderTop?: import("csstype").Property.BorderTop<0 | (string & {})> | undefined;
readonly borderWidth?: import("csstype").Property.BorderWidth<0 | (string & {})> | undefined;
readonly caret?: import("csstype").Property.Caret | undefined;
readonly columnRule?: import("csstype").Property.ColumnRule<0 | (string & {})> | undefined;
readonly columns?: import("csstype").Property.Columns<0 | (string & {})> | undefined;
readonly containIntrinsicSize?: import("csstype").Property.ContainIntrinsicSize<0 | (string & {})> | undefined;
readonly container?: import("csstype").Property.Container | undefined;
readonly flex?: import("csstype").Property.Flex<0 | (string & {})> | undefined;
readonly flexFlow?: import("csstype").Property.FlexFlow | undefined;
readonly font?: import("csstype").Property.Font | undefined;
readonly gap?: import("csstype").Property.Gap<0 | (string & {})> | undefined;
readonly grid?: import("csstype").Property.Grid | undefined;
readonly gridArea?: import("csstype").Property.GridArea | undefined;
readonly gridColumn?: import("csstype").Property.GridColumn | undefined;
readonly gridRow?: import("csstype").Property.GridRow | undefined;
readonly gridTemplate?: import("csstype").Property.GridTemplate | undefined;
readonly inset?: import("csstype").Property.Inset<0 | (string & {})> | undefined;
readonly insetBlock?: import("csstype").Property.InsetBlock<0 | (string & {})> | undefined;
readonly insetInline?: import("csstype").Property.InsetInline<0 | (string & {})> | undefined;
readonly lineClamp?: import("csstype").Property.LineClamp | undefined;
readonly listStyle?: import("csstype").Property.ListStyle | undefined;
readonly margin?: import("csstype").Property.Margin<0 | (string & {})> | undefined;
readonly marginBlock?: import("csstype").Property.MarginBlock<0 | (string & {})> | undefined;
readonly marginInline?: import("csstype").Property.MarginInline<0 | (string & {})> | undefined;
readonly mask?: import("csstype").Property.Mask<0 | (string & {})> | undefined;
readonly maskBorder?: import("csstype").Property.MaskBorder | undefined;
readonly motion?: import("csstype").Property.Offset<0 | (string & {})> | undefined;
readonly offset?: import("csstype").Property.Offset<0 | (string & {})> | undefined;
readonly outline?: import("csstype").Property.Outline<0 | (string & {})> | undefined;
readonly overflow?: import("csstype").Property.Overflow | undefined;
readonly overscrollBehavior?: import("csstype").Property.OverscrollBehavior | undefined;
readonly padding?: import("csstype").Property.Padding<0 | (string & {})> | undefined;
readonly paddingBlock?: import("csstype").Property.PaddingBlock<0 | (string & {})> | undefined;
readonly paddingInline?: import("csstype").Property.PaddingInline<0 | (string & {})> | undefined;
readonly placeContent?: import("csstype").Property.PlaceContent | undefined;
readonly placeItems?: import("csstype").Property.PlaceItems | undefined;
readonly placeSelf?: import("csstype").Property.PlaceSelf | undefined;
readonly scrollMargin?: import("csstype").Property.ScrollMargin<0 | (string & {})> | undefined;
readonly scrollMarginBlock?: import("csstype").Property.ScrollMarginBlock<0 | (string & {})> | undefined;
readonly scrollMarginInline?: import("csstype").Property.ScrollMarginInline<0 | (string & {})> | undefined;
readonly scrollPadding?: import("csstype").Property.ScrollPadding<0 | (string & {})> | undefined;
readonly scrollPaddingBlock?: import("csstype").Property.ScrollPaddingBlock<0 | (string & {})> | undefined;
readonly scrollPaddingInline?: import("csstype").Property.ScrollPaddingInline<0 | (string & {})> | undefined;
readonly scrollSnapMargin?: import("csstype").Property.ScrollMargin<0 | (string & {})> | undefined;
readonly scrollTimeline?: import("csstype").Property.ScrollTimeline | undefined;
readonly textDecoration?: import("csstype").Property.TextDecoration<0 | (string & {})> | undefined;
readonly textEmphasis?: import("csstype").Property.TextEmphasis | undefined;
readonly transition?: import("csstype").Property.Transition<string & {}> | undefined;
readonly viewTimeline?: import("csstype").Property.ViewTimeline | undefined;
readonly MozAnimationDelay?: import("csstype").Property.AnimationDelay<string & {}> | undefined;
readonly MozAnimationDirection?: import("csstype").Property.AnimationDirection | undefined;
readonly MozAnimationDuration?: import("csstype").Property.AnimationDuration<string & {}> | undefined;
readonly MozAnimationFillMode?: import("csstype").Property.AnimationFillMode | undefined;
readonly MozAnimationIterationCount?: import("csstype").Property.AnimationIterationCount | undefined;
readonly MozAnimationName?: import("csstype").Property.AnimationName | undefined;
readonly MozAnimationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
readonly MozAnimationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
readonly MozAppearance?: import("csstype").Property.MozAppearance | undefined;
readonly MozBinding?: import("csstype").Property.MozBinding | undefined;
readonly MozBorderBottomColors?: import("csstype").Property.MozBorderBottomColors | undefined;
readonly MozBorderEndColor?: import("csstype").Property.BorderInlineEndColor | undefined;
readonly MozBorderEndStyle?: import("csstype").Property.BorderInlineEndStyle | undefined;
readonly MozBorderEndWidth?: import("csstype").Property.BorderInlineEndWidth<0 | (string & {})> | undefined;
readonly MozBorderLeftColors?: import("csstype").Property.MozBorderLeftColors | undefined;
readonly MozBorderRightColors?: import("csstype").Property.MozBorderRightColors | undefined;
readonly MozBorderStartColor?: import("csstype").Property.BorderInlineStartColor | undefined;
readonly MozBorderStartStyle?: import("csstype").Property.BorderInlineStartStyle | undefined;
readonly MozBorderTopColors?: import("csstype").Property.MozBorderTopColors | undefined;
readonly MozBoxSizing?: import("csstype").Property.BoxSizing | undefined;
readonly MozColumnCount?: import("csstype").Property.ColumnCount | undefined;
readonly MozColumnFill?: import("csstype").Property.ColumnFill | undefined;
readonly MozColumnRuleColor?: import("csstype").Property.ColumnRuleColor | undefined;
readonly MozColumnRuleStyle?: import("csstype").Property.ColumnRuleStyle | undefined;
readonly MozColumnRuleWidth?: import("csstype").Property.ColumnRuleWidth<0 | (string & {})> | undefined;
readonly MozColumnWidth?: import("csstype").Property.ColumnWidth<0 | (string & {})> | undefined;
readonly MozContextProperties?: import("csstype").Property.MozContextProperties | undefined;
readonly MozFontFeatureSettings?: import("csstype").Property.FontFeatureSettings | undefined;
readonly MozFontLanguageOverride?: import("csstype").Property.FontLanguageOverride | undefined;
readonly MozHyphens?: import("csstype").Property.Hyphens | undefined;
readonly MozImageRegion?: import("csstype").Property.MozImageRegion | undefined;
readonly MozMarginEnd?: import("csstype").Property.MarginInlineEnd<0 | (string & {})> | undefined;
readonly MozMarginStart?: import("csstype").Property.MarginInlineStart<0 | (string & {})> | undefined;
readonly MozOrient?: import("csstype").Property.MozOrient | undefined;
readonly MozOsxFontSmoothing?: import("csstype").Property.FontSmooth<0 | (string & {})> | undefined;
readonly MozOutlineRadiusBottomleft?: import("csstype").Property.MozOutlineRadiusBottomleft<0 | (string & {})> | undefined;
readonly MozOutlineRadiusBottomright?: import("csstype").Property.MozOutlineRadiusBottomright<0 | (string & {})> | undefined;
readonly MozOutlineRadiusTopleft?: import("csstype").Property.MozOutlineRadiusTopleft<0 | (string & {})> | undefined;
readonly MozOutlineRadiusTopright?: import("csstype").Property.MozOutlineRadiusTopright<0 | (string & {})> | undefined;
readonly MozPaddingEnd?: import("csstype").Property.PaddingInlineEnd<0 | (string & {})> | undefined;
readonly MozPaddingStart?: import("csstype").Property.PaddingInlineStart<0 | (string & {})> | undefined;
readonly MozStackSizing?: import("csstype").Property.MozStackSizing | undefined;
readonly MozTabSize?: import("csstype").Property.TabSize<0 | (string & {})> | undefined;
readonly MozTextBlink?: import("csstype").Property.MozTextBlink | undefined;
readonly MozTextSizeAdjust?: import("csstype").Property.TextSizeAdjust | undefined;
readonly MozUserFocus?: import("csstype").Property.MozUserFocus | undefined;
readonly MozUserModify?: import("csstype").Property.MozUserModify | undefined;
readonly MozUserSelect?: import("csstype").Property.UserSelect | undefined;
readonly MozWindowDragging?: import("csstype").Property.MozWindowDragging | undefined;
readonly MozWindowShadow?: import("csstype").Property.MozWindowShadow | undefined;
readonly msAccelerator?: import("csstype").Property.MsAccelerator | undefined;
readonly msBlockProgression?: import("csstype").Property.MsBlockProgression | undefined;
readonly msContentZoomChaining?: import("csstype").Property.MsContentZoomChaining | undefined;
readonly msContentZoomLimitMax?: import("csstype").Property.MsContentZoomLimitMax | undefined;
readonly msContentZoomLimitMin?: import("csstype").Property.MsContentZoomLimitMin | undefined;
readonly msContentZoomSnapPoints?: import("csstype").Property.MsContentZoomSnapPoints | undefined;
readonly msContentZoomSnapType?: import("csstype").Property.MsContentZoomSnapType | undefined;
readonly msContentZooming?: import("csstype").Property.MsContentZooming | undefined;
readonly msFilter?: import("csstype").Property.MsFilter | undefined;
readonly msFlexDirection?: import("csstype").Property.FlexDirection | undefined;
readonly msFlexPositive?: import("csstype").Property.FlexGrow | undefined;
readonly msFlowFrom?: import("csstype").Property.MsFlowFrom | undefined;
readonly msFlowInto?: import("csstype").Property.MsFlowInto | undefined;
readonly msGridColumns?: import("csstype").Property.MsGridColumns<0 | (string & {})> | undefined;
readonly msGridRows?: import("csstype").Property.MsGridRows<0 | (string & {})> | undefined;
readonly msHighContrastAdjust?: import("csstype").Property.MsHighContrastAdjust | undefined;
readonly msHyphenateLimitChars?: import("csstype").Property.MsHyphenateLimitChars | undefined;
readonly msHyphenateLimitLines?: import("csstype").Property.MsHyphenateLimitLines | undefined;
readonly msHyphenateLimitZone?: import("csstype").Property.MsHyphenateLimitZone<0 | (string & {})> | undefined;
readonly msHyphens?: import("csstype").Property.Hyphens | undefined;
readonly msImeAlign?: import("csstype").Property.MsImeAlign | undefined;
readonly msLineBreak?: import("csstype").Property.LineBreak | undefined;
readonly msOrder?: import("csstype").Property.Order | undefined;
readonly msOverflowStyle?: import("csstype").Property.MsOverflowStyle | undefined;
readonly msOverflowX?: import("csstype").Property.OverflowX | undefined;
readonly msOverflowY?: import("csstype").Property.OverflowY | undefined;
readonly msScrollChaining?: import("csstype").Property.MsScrollChaining | undefined;
readonly msScrollLimitXMax?: import("csstype").Property.MsScrollLimitXMax<0 | (string & {})> | undefined;
readonly msScrollLimitXMin?: import("csstype").Property.MsScrollLimitXMin<0 | (string & {})> | undefined;
readonly msScrollLimitYMax?: import("csstype").Property.MsScrollLimitYMax<0 | (string & {})> | undefined;
readonly msScrollLimitYMin?: import("csstype").Property.MsScrollLimitYMin<0 | (string & {})> | undefined;
readonly msScrollRails?: import("csstype").Property.MsScrollRails | undefined;
readonly msScrollSnapPointsX?: import("csstype").Property.MsScrollSnapPointsX | undefined;
readonly msScrollSnapPointsY?: import("csstype").Property.MsScrollSnapPointsY | undefined;
readonly msScrollSnapType?: import("csstype").Property.MsScrollSnapType | undefined;
readonly msScrollTranslation?: import("csstype").Property.MsScrollTranslation | undefined;
readonly msScrollbar3dlightColor?: import("csstype").Property.MsScrollbar3dlightColor | undefined;
readonly msScrollbarArrowColor?: import("csstype").Property.MsScrollbarArrowColor | undefined;
readonly msScrollbarBaseColor?: import("csstype").Property.MsScrollbarBaseColor | undefined;
readonly msScrollbarDarkshadowColor?: import("csstype").Property.MsScrollbarDarkshadowColor | undefined;
readonly msScrollbarFaceColor?: import("csstype").Property.MsScrollbarFaceColor | undefined;
readonly msScrollbarHighlightColor?: import("csstype").Property.MsScrollbarHighlightColor | undefined;
readonly msScrollbarShadowColor?: import("csstype").Property.MsScrollbarShadowColor | undefined;
readonly msScrollbarTrackColor?: import("csstype").Property.MsScrollbarTrackColor | undefined;
readonly msTextAutospace?: import("csstype").Property.MsTextAutospace | undefined;
readonly msTextCombineHorizontal?: import("csstype").Property.TextCombineUpright | undefined;
readonly msTextOverflow?: import("csstype").Property.TextOverflow | undefined;
readonly msTouchAction?: import("csstype").Property.TouchAction | undefined;
readonly msTouchSelect?: import("csstype").Property.MsTouchSelect | undefined;
readonly msTransform?: import("csstype").Property.Transform | undefined;
readonly msTransformOrigin?: import("csstype").Property.TransformOrigin<0 | (string & {})> | undefined;
readonly msTransitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
readonly msTransitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
readonly msTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
readonly msTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
readonly msUserSelect?: import("csstype").Property.MsUserSelect | undefined;
readonly msWordBreak?: import("csstype").Property.WordBreak | undefined;
readonly msWrapFlow?: import("csstype").Property.MsWrapFlow | undefined;
readonly msWrapMargin?: import("csstype").Property.MsWrapMargin<0 | (string & {})> | undefined;
readonly msWrapThrough?: import("csstype").Property.MsWrapThrough | undefined;
readonly msWritingMode?: import("csstype").Property.WritingMode | undefined;
readonly WebkitAlignContent?: import("csstype").Property.AlignContent | undefined;
readonly WebkitAlignItems?: import("csstype").Property.AlignItems | undefined;
readonly WebkitAlignSelf?: import("csstype").Property.AlignSelf | undefined;
readonly WebkitAnimationDelay?: import("csstype").Property.AnimationDelay<string & {}> | undefined;
readonly WebkitAnimationDirection?: import("csstype").Property.AnimationDirection | undefined;
readonly WebkitAnimationDuration?: import("csstype").Property.AnimationDuration<string & {}> | undefined;
readonly WebkitAnimationFillMode?: import("csstype").Property.AnimationFillMode | undefined;
readonly WebkitAnimationIterationCount?: import("csstype").Property.AnimationIterationCount | undefined;
readonly WebkitAnimationName?: import("csstype").Property.AnimationName | undefined;
readonly WebkitAnimationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
readonly WebkitAnimationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
readonly WebkitAppearance?: import("csstype").Property.WebkitAppearance | undefined;
readonly WebkitBackdropFilter?: import("csstype").Property.BackdropFilter | undefined;
readonly WebkitBackfaceVisibility?: import("csstype").Property.BackfaceVisibility | undefined;
readonly WebkitBackgroundClip?: import("csstype").Property.BackgroundClip | undefined;
readonly WebkitBackgroundOrigin?: import("csstype").Property.BackgroundOrigin | undefined;
readonly WebkitBackgroundSize?: import("csstype").Property.BackgroundSize<0 | (string & {})> | undefined;
readonly WebkitBorderBeforeColor?: import("csstype").Property.WebkitBorderBeforeColor | undefined;
readonly WebkitBorderBeforeStyle?: import("csstype").Property.WebkitBorderBeforeStyle | undefined;
readonly WebkitBorderBeforeWidth?: import("csstype").Property.WebkitBorderBeforeWidth<0 | (string & {})> | undefined;
readonly WebkitBorderBottomLeftRadius?: import("csstype").Property.BorderBottomLeftRadius<0 | (string & {})> | undefined;
readonly WebkitBorderBottomRightRadius?: import("csstype").Property.BorderBottomRightRadius<0 | (string & {})> | undefined;
readonly WebkitBorderImageSlice?: import("csstype").Property.BorderImageSlice | undefined;
readonly WebkitBorderTopLeftRadius?: import("csstype").Property.BorderTopLeftRadius<0 | (string & {})> | undefined;
readonly WebkitBorderTopRightRadius?: import("csstype").Property.BorderTopRightRadius<0 | (string & {})> | undefined;
readonly WebkitBoxDecorationBreak?: import("csstype").Property.BoxDecorationBreak | undefined;
readonly WebkitBoxReflect?: import("csstype").Property.WebkitBoxReflect<0 | (string & {})> | undefined;
readonly WebkitBoxShadow?: import("csstype").Property.BoxShadow | undefined;
readonly WebkitBoxSizing?: import("csstype").Property.BoxSizing | undefined;
readonly WebkitClipPath?: import("csstype").Property.ClipPath | undefined;
readonly WebkitColumnCount?: import("csstype").Property.ColumnCount | undefined;
readonly WebkitColumnFill?: import("csstype").Property.ColumnFill | undefined;
readonly WebkitColumnRuleColor?: import("csstype").Property.ColumnRuleColor | undefined;
readonly WebkitColumnRuleStyle?: import("csstype").Property.ColumnRuleStyle | undefined;
readonly WebkitColumnRuleWidth?: import("csstype").Property.ColumnRuleWidth<0 | (string & {})> | undefined;
readonly WebkitColumnSpan?: import("csstype").Property.ColumnSpan | undefined;
readonly WebkitColumnWidth?: import("csstype").Property.ColumnWidth<0 | (string & {})> | undefined;
readonly WebkitFilter?: import("csstype").Property.Filter | undefined;
readonly WebkitFlexBasis?: import("csstype").Property.FlexBasis<0 | (string & {})> | undefined;
readonly WebkitFlexDirection?: import("csstype").Property.FlexDirection | undefined;
readonly WebkitFlexGrow?: import("csstype").Property.FlexGrow | undefined;
readonly WebkitFlexShrink?: import("csstype").Property.FlexShrink | undefined;
readonly WebkitFlexWrap?: import("csstype").Property.FlexWrap | undefined;
readonly WebkitFontFeatureSettings?: import("csstype").Property.FontFeatureSettings | undefined;
readonly WebkitFontKerning?: import("csstype").Property.FontKerning | undefined;
readonly WebkitFontSmoothing?: import("csstype").Property.FontSmooth<0 | (string & {})> | undefined;
readonly WebkitFontVariantLigatures?: import("csstype").Property.FontVariantLigatures | undefined;
readonly WebkitHyphenateCharacter?: import("csstype").Property.HyphenateCharacter | undefined;
readonly WebkitHyphens?: import("csstype").Property.Hyphens | undefined;
readonly WebkitInitialLetter?: import("csstype").Property.InitialLetter | undefined;
readonly WebkitJustifyContent?: import("csstype").Property.JustifyContent | undefined;
readonly WebkitLineBreak?: import("csstype").Property.LineBreak | undefined;
readonly WebkitLineClamp?: import("csstype").Property.WebkitLineClamp | undefined;
readonly WebkitMarginEnd?: import("csstype").Property.MarginInlineEnd<0 | (string & {})> | undefined;
readonly WebkitMarginStart?: import("csstype").Property.MarginInlineStart<0 | (string & {})> | undefined;
readonly WebkitMaskAttachment?: import("csstype").Property.WebkitMaskAttachment | undefined;
readonly WebkitMaskBoxImageOutset?: import("csstype").Property.MaskBorderOutset<0 | (string & {})> | undefined;
readonly WebkitMaskBoxImageRepeat?: import("csstype").Property.MaskBorderRepeat | undefined;
readonly WebkitMaskBoxImageSlice?: import("csstype").Property.MaskBorderSlice | undefined;
readonly WebkitMaskBoxImageSource?: import("csstype").Property.MaskBorderSource | undefined;
readonly WebkitMaskBoxImageWidth?: import("csstype").Property.MaskBorderWidth<0 | (string & {})> | undefined;
readonly WebkitMaskClip?: import("csstype").Property.WebkitMaskClip | undefined;
readonly WebkitMaskComposite?: import("csstype").Property.WebkitMaskComposite | undefined;
readonly WebkitMaskImage?: import("csstype").Property.WebkitMaskImage | undefined;
readonly WebkitMaskOrigin?: import("csstype").Property.WebkitMaskOrigin | undefined;
readonly WebkitMaskPosition?: import("csstype").Property.WebkitMaskPosition<0 | (string & {})> | undefined;
readonly WebkitMaskPositionX?: import("csstype").Property.WebkitMaskPositionX<0 | (string & {})> | undefined;
readonly WebkitMaskPositionY?: import("csstype").Property.WebkitMaskPositionY<0 | (string & {})> | undefined;
readonly WebkitMaskRepeat?: import("csstype").Property.WebkitMaskRepeat | undefined;
readonly WebkitMaskRepeatX?: import("csstype").Property.WebkitMaskRepeatX | undefined;
readonly WebkitMaskRepeatY?: import("csstype").Property.WebkitMaskRepeatY | undefined;
readonly WebkitMaskSize?: import("csstype").Property.WebkitMaskSize<0 | (string & {})> | undefined;
readonly WebkitMaxInlineSize?: import("csstype").Property.MaxInlineSize<0 | (string & {})> | undefined;
readonly WebkitOrder?: import("csstype").Property.Order | undefined;
readonly WebkitOverflowScrolling?: import("csstype").Property.WebkitOverflowScrolling | undefined;
readonly WebkitPaddingEnd?: import("csstype").Property.PaddingInlineEnd<0 | (string & {})> | undefined;
readonly WebkitPaddingStart?: import("csstype").Property.PaddingInlineStart<0 | (string & {})> | undefined;
readonly WebkitPerspective?: import("csstype").Property.Perspective<0 | (string & {})> | undefined;
readonly WebkitPerspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<0 | (string & {})> | undefined;
readonly WebkitPrintColorAdjust?: import("csstype").Property.PrintColorAdjust | undefined;
readonly WebkitRubyPosition?: import("csstype").Property.RubyPosition | undefined;
readonly WebkitScrollSnapType?: import("csstype").Property.ScrollSnapType | undefined;
readonly WebkitShapeMargin?: import("csstype").Property.ShapeMargin<0 | (string & {})> | undefined;
readonly WebkitTapHighlightColor?: import("csstype").Property.WebkitTapHighlightColor | undefined;
readonly WebkitTextCombine?: import("csstype").Property.TextCombineUpright | undefined;
readonly WebkitTextDecorationColor?: import("csstype").Property.TextDecorationColor | undefined;
readonly WebkitTextDecorationLine?: import("csstype").Property.TextDecorationLine | undefined;
readonly WebkitTextDecorationSkip?: import("csstype").Property.TextDecorationSkip | undefined;
readonly WebkitTextDecorationStyle?: import("csstype").Property.TextDecorationStyle | undefined;
readonly WebkitTextEmphasisColor?: import("csstype").Property.TextEmphasisColor | undefined;
readonly WebkitTextEmphasisPosition?: import("csstype").Property.TextEmphasisPosition | undefined;
readonly WebkitTextEmphasisStyle?: import("csstype").Property.TextEmphasisStyle | undefined;
readonly WebkitTextFillColor?: import("csstype").Property.WebkitTextFillColor | undefined;
readonly WebkitTextOrientation?: import("csstype").Property.TextOrientation | undefined;
readonly WebkitTextSizeAdjust?: import("csstype").Property.TextSizeAdjust | undefined;
readonly WebkitTextStrokeColor?: import("csstype").Property.WebkitTextStrokeColor | undefined;
readonly WebkitTextStrokeWidth?: import("csstype").Property.WebkitTextStrokeWidth<0 | (string & {})> | undefined;
readonly WebkitTextUnderlinePosition?: import("csstype").Property.TextUnderlinePosition | undefined;
readonly WebkitTouchCallout?: import("csstype").Property.WebkitTouchCallout | undefined;
readonly WebkitTransform?: import("csstype").Property.Transform | undefined;
readonly WebkitTransformOrigin?: import("csstype").Property.TransformOrigin<0 | (string & {})> | undefined;
readonly WebkitTransformStyle?: import("csstype").Property.TransformStyle | undefined;
readonly WebkitTransitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
readonly WebkitTransitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
readonly WebkitTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
readonly WebkitTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
readonly WebkitUserModify?: import("csstype").Property.WebkitUserModify | undefined;
readonly WebkitUserSelect?: import("csstype").Property.UserSelect | undefined;
readonly WebkitWritingMode?: import("csstype").Property.WritingMode | undefined;
readonly MozAnimation?: import("csstype").Property.Animation<string & {}> | undefined;
readonly MozBorderImage?: import("csstype").Property.BorderImage | undefined;
readonly MozColumnRule?: import("csstype").Property.ColumnRule<0 | (string & {})> | undefined;
readonly MozColumns?: import("csstype").Property.Columns<0 | (string & {})> | undefined;
readonly MozOutlineRadius?: import("csstype").Property.MozOutlineRadius<0 | (string & {})> | undefined;
readonly msContentZoomLimit?: import("csstype").Property.MsContentZoomLimit | undefined;
readonly msContentZoomSnap?: import("csstype").Property.MsContentZoomSnap | undefined;
readonly msFlex?: import("csstype").Property.Flex<0 | (string & {})> | undefined;
readonly msScrollLimit?: import("csstype").Property.MsScrollLimit | undefined;
readonly msScrollSnapX?: import("csstype").Property.MsScrollSnapX | undefined;
readonly msScrollSnapY?: import("csstype").Property.MsScrollSnapY | undefined;
readonly msTransition?: import("csstype").Property.Transition<string & {}> | undefined;
readonly WebkitAnimation?: import("csstype").Property.Animation<string & {}> | undefined;
readonly WebkitBorderBefore?: import("csstype").Property.WebkitBorderBefore<0 | (string & {})> | undefined;
readonly WebkitBorderImage?: import("csstype").Property.BorderImage | undefined;
readonly WebkitBorderRadius?: import("csstype").Property.BorderRadius<0 | (string & {})> | undefined;
readonly WebkitColumnRule?: import("csstype").Property.ColumnRule<0 | (string & {})> | undefined;
readonly WebkitColumns?: import("csstype").Property.Columns<0 | (string & {})> | undefined;
readonly WebkitFlex?: import("csstype").Property.Flex<0 | (string & {})> | undefined;
readonly WebkitFlexFlow?: import("csstype").Property.FlexFlow | undefined;
readonly WebkitMask?: import("csstype").Property.WebkitMask<0 | (string & {})> | undefined;
readonly WebkitMaskBoxImage?: import("csstype").Property.MaskBorder | undefined;
readonly WebkitTextEmphasis?: import("csstype").Property.TextEmphasis | undefined;
readonly WebkitTextStroke?: import("csstype").Property.WebkitTextStroke<0 | (string & {})> | undefined;
readonly WebkitTransition?: import("csstype").Property.Transition<string & {}> | undefined;
readonly azimuth?: import("csstype").Property.Azimuth | undefined;
readonly boxAlign?: import("csstype").Property.BoxAlign | undefined;
readonly boxDirection?: import("csstype").Property.BoxDirection | undefined;
readonly boxFlex?: import("csstype").Property.BoxFlex | undefined;
readonly boxFlexGroup?: import("csstype").Property.BoxFlexGroup | undefined;
readonly boxLines?: import("csstype").Property.BoxLines | undefined;
readonly boxOrdinalGroup?: import("csstype").Property.BoxOrdinalGroup | undefined;
readonly boxOrient?: import("csstype").Property.BoxOrient | undefined;
readonly boxPack?: import("csstype").Property.BoxPack | undefined;
readonly clip?: import("csstype").Property.Clip | undefined;
readonly gridColumnGap?: import("csstype").Property.GridColumnGap<0 | (string & {})> | undefined;
readonly gridGap?: import("csstype").Property.GridGap<0 | (string & {})> | undefined;
readonly gridRowGap?: import("csstype").Property.GridRowGap<0 | (string & {})> | undefined;
readonly imeMode?: import("csstype").Property.ImeMode | undefined;
readonly offsetBlock?: import("csstype").Property.InsetBlock<0 | (string & {})> | undefined;
readonly offsetBlockEnd?: import("csstype").Property.InsetBlockEnd<0 | (string & {})> | undefined;
readonly offsetBlockStart?: import("csstype").Property.InsetBlockStart<0 | (string & {})> | undefined;
readonly offsetInline?: import("csstype").Property.InsetInline<0 | (string & {})> | undefined;
readonly offsetInlineEnd?: import("csstype").Property.InsetInlineEnd<0 | (string & {})> | undefined;
readonly offsetInlineStart?: import("csstype").Property.InsetInlineStart<0 | (string & {})> | undefined;
readonly scrollSnapCoordinate?: import("csstype").Property.ScrollSnapCoordinate<0 | (string & {})> | undefined;
readonly scrollSnapDestination?: import("csstype").Property.ScrollSnapDestination<0 | (string & {})> | undefined;
readonly scrollSnapPointsX?: import("csstype").Property.ScrollSnapPointsX | undefined;
readonly scrollSnapPointsY?: import("csstype").Property.ScrollSnapPointsY | undefined;
readonly scrollSnapTypeX?: import("csstype").Property.ScrollSnapTypeX | undefined;
readonly scrollSnapTypeY?: import("csstype").Property.ScrollSnapTypeY | undefined;
readonly KhtmlBoxAlign?: import("csstype").Property.BoxAlign | undefined;
readonly KhtmlBoxDirection?: import("csstype").Property.BoxDirection | undefined;
readonly KhtmlBoxFlex?: import("csstype").Property.BoxFlex | undefined;
readonly KhtmlBoxFlexGroup?: import("csstype").Property.BoxFlexGroup | undefined;
readonly KhtmlBoxLines?: import("csstype").Property.BoxLines | undefined;
readonly KhtmlBoxOrdinalGroup?: import("csstype").Property.BoxOrdinalGroup | undefined;
readonly KhtmlBoxOrient?: import("csstype").Property.BoxOrient | undefined;
readonly KhtmlBoxPack?: import("csstype").Property.BoxPack | undefined;
readonly KhtmlLineBreak?: import("csstype").Property.LineBreak | undefined;
readonly KhtmlOpacity?: import("csstype").Property.Opacity | undefined;
readonly KhtmlUserSelect?: import("csstype").Property.UserSelect | undefined;
readonly MozBackfaceVisibility?: import("csstype").Property.BackfaceVisibility | undefined;
readonly MozBackgroundClip?: import("csstype").Property.BackgroundClip | undefined;
readonly MozBackgroundInlinePolicy?: import("csstype").Property.BoxDecorationBreak | undefined;
readonly MozBackgroundOrigin?: import("csstype").Property.BackgroundOrigin | undefined;
readonly MozBackgroundSize?: import("csstype").Property.BackgroundSize<0 | (string & {})> | undefined;
readonly MozBorderRadius?: import("csstype").Property.BorderRadius<0 | (string & {})> | undefined;
readonly MozBorderRadiusBottomleft?: import("csstype").Property.BorderBottomLeftRadius<0 | (string & {})> | undefined;
readonly MozBorderRadiusBottomright?: import("csstype").Property.BorderBottomRightRadius<0 | (string & {})> | undefined;
readonly MozBorderRadiusTopleft?: import("csstype").Property.BorderTopLeftRadius<0 | (string & {})> | undefined;
readonly MozBorderRadiusTopright?: import("csstype").Property.BorderTopRightRadius<0 | (string & {})> | undefined;
readonly MozBoxAlign?: import("csstype").Property.BoxAlign | undefined;
readonly MozBoxDirection?: import("csstype").Property.BoxDirection | undefined;
readonly MozBoxFlex?: import("csstype").Property.BoxFlex | undefined;
readonly MozBoxOrdinalGroup?: import("csstype").Property.BoxOrdinalGroup | undefined;
readonly MozBoxOrient?: import("csstype").Property.BoxOrient | undefined;
readonly MozBoxPack?: import("csstype").Property.BoxPack | undefined;
readonly MozBoxShadow?: import("csstype").Property.BoxShadow | undefined;
readonly MozFloatEdge?: import("csstype").Property.MozFloatEdge | undefined;
readonly MozForceBrokenImageIcon?: import("csstype").Property.MozForceBrokenImageIcon | undefined;
readonly MozOpacity?: import("csstype").Property.Opacity | undefined;
readonly MozOutline?: import("csstype").Property.Outline<0 | (string & {})> | undefined;
readonly MozOutlineColor?: import("csstype").Property.OutlineColor | undefined;
readonly MozOutlineStyle?: import("csstype").Property.OutlineStyle | undefined;
readonly MozOutlineWidth?: import("csstype").Property.OutlineWidth<0 | (string & {})> | undefined;
readonly MozPerspective?: import("csstype").Property.Perspective<0 | (string & {})> | undefined;
readonly MozPerspectiveOrigin?: import("csstype").Property.PerspectiveOrigin<0 | (string & {})> | undefined;
readonly MozTextAlignLast?: import("csstype").Property.TextAlignLast | undefined;
readonly MozTextDecorationColor?: import("csstype").Property.TextDecorationColor | undefined;
readonly MozTextDecorationLine?: import("csstype").Property.TextDecorationLine | undefined;
readonly MozTextDecorationStyle?: import("csstype").Property.TextDecorationStyle | undefined;
readonly MozTransform?: import("csstype").Property.Transform | undefined;
readonly MozTransformOrigin?: import("csstype").Property.TransformOrigin<0 | (string & {})> | undefined;
readonly MozTransformStyle?: import("csstype").Property.TransformStyle | undefined;
readonly MozTransition?: import("csstype").Property.Transition<string & {}> | undefined;
readonly MozTransitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
readonly MozTransitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
readonly MozTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
readonly MozTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
readonly MozUserInput?: import("csstype").Property.MozUserInput | undefined;
readonly msImeMode?: import("csstype").Property.ImeMode | undefined;
readonly OAnimation?: import("csstype").Property.Animation<string & {}> | undefined;
readonly OAnimationDelay?: import("csstype").Property.AnimationDelay<string & {}> | undefined;
readonly OAnimationDirection?: import("csstype").Property.AnimationDirection | undefined;
readonly OAnimationDuration?: import("csstype").Property.AnimationDuration<string & {}> | undefined;
readonly OAnimationFillMode?: import("csstype").Property.AnimationFillMode | undefined;
readonly OAnimationIterationCount?: import("csstype").Property.AnimationIterationCount | undefined;
readonly OAnimationName?: import("csstype").Property.AnimationName | undefined;
readonly OAnimationPlayState?: import("csstype").Property.AnimationPlayState | undefined;
readonly OAnimationTimingFunction?: import("csstype").Property.AnimationTimingFunction | undefined;
readonly OBackgroundSize?: import("csstype").Property.BackgroundSize<0 | (string & {})> | undefined;
readonly OBorderImage?: import("csstype").Property.BorderImage | undefined;
readonly OObjectFit?: import("csstype").Property.ObjectFit | undefined;
readonly OObjectPosition?: import("csstype").Property.ObjectPosition<0 | (string & {})> | undefined;
readonly OTabSize?: import("csstype").Property.TabSize<0 | (string & {})> | undefined;
readonly OTextOverflow?: import("csstype").Property.TextOverflow | undefined;
readonly OTransform?: import("csstype").Property.Transform | undefined;
readonly OTransformOrigin?: import("csstype").Property.TransformOrigin<0 | (string & {})> | undefined;
readonly OTransition?: import("csstype").Property.Transition<string & {}> | undefined;
readonly OTransitionDelay?: import("csstype").Property.TransitionDelay<string & {}> | undefined;
readonly OTransitionDuration?: import("csstype").Property.TransitionDuration<string & {}> | undefined;
readonly OTransitionProperty?: import("csstype").Property.TransitionProperty | undefined;
readonly OTransitionTimingFunction?: import("csstype").Property.TransitionTimingFunction | undefined;
readonly WebkitBoxAlign?: import("csstype").Property.BoxAlign | undefined;
readonly WebkitBoxDirection?: import("csstype").Property.BoxDirection | undefined;
readonly WebkitBoxFlex?: import("csstype").Property.BoxFlex | undefined;
readonly WebkitBoxFlexGroup?: import("csstype").Property.BoxFlexGroup | undefined;
readonly WebkitBoxLines?: import("csstype").Property.BoxLines | undefined;
readonly WebkitBoxOrdinalGroup?: import("csstype").Property.BoxOrdinalGroup | undefined;
readonly WebkitBoxOrient?: import("csstype").Property.BoxOrient | undefined;
readonly WebkitBoxPack?: import("csstype").Property.BoxPack | undefined;
readonly alignmentBaseline?: import("csstype").Property.AlignmentBaseline | undefined;
readonly baselineShift?: import("csstype").Property.BaselineShift<0 | (string & {})> | undefined;
readonly clipRule?: import("csstype").Property.ClipRule | undefined;
readonly colorInterpolation?: import("csstype").Property.ColorInterpolation | undefined;
readonly colorRendering?: import("csstype").Property.ColorRendering | undefined;
readonly dominantBaseline?: import("csstype").Property.DominantBaseline | undefined;
readonly fill?: import("csstype").Property.Fill | undefined;
readonly fillOpacity?: import("csstype").Property.FillOpacity | undefined;
readonly fillRule?: import("csstype").Property.FillRule | undefined;
readonly floodColor?: import("csstype").Property.FloodColor | undefined;
readonly floodOpacity?: import("csstype").Property.FloodOpacity | undefined;
readonly glyphOrientationVertical?: import("csstype").Property.GlyphOrientationVertical | undefined;
readonly lightingColor?: import("csstype").Property.LightingColor | undefined;
readonly marker?: import("csstype").Property.Marker | undefined;
readonly markerEnd?: import("csstype").Property.MarkerEnd | undefined;
readonly markerMid?: import("csstype").Property.MarkerMid | undefined;
readonly markerStart?: import("csstype").Property.MarkerStart | undefined;
readonly shapeRendering?: import("csstype").Property.ShapeRendering | undefined;
readonly stopColor?: import("csstype").Property.StopColor | undefined;
readonly stopOpacity?: import("csstype").Property.StopOpacity | undefined;
readonly stroke?: import("csstype").Property.Stroke | undefined;
readonly strokeDasharray?: import("csstype").Property.StrokeDasharray<0 | (string & {})> | undefined;
readonly strokeDashoffset?: import("csstype").Property.StrokeDashoffset<0 | (string & {})> | undefined;
readonly strokeLinecap?: import("csstype").Property.StrokeLinecap | undefined;
readonly strokeLinejoin?: import("csstype").Property.StrokeLinejoin | undefined;
readonly strokeMiterlimit?: import("csstype").Property.StrokeMiterlimit | undefined;
readonly strokeOpacity?: import("csstype").Property.StrokeOpacity | undefined;
readonly strokeWidth?: import("csstype").Property.StrokeWidth<0 | (string & {})> | undefined;
readonly textAnchor?: import("csstype").Property.TextAnchor | undefined;
readonly vectorEffect?: import("csstype").Property.VectorEffect | undefined;
readonly "pointer-events"?: string | undefined;
readonly "--bits-floating-transform-origin": `${any} ${any}`;
readonly "--bits-floating-available-width": "undefinedpx" | `${number}px`;
readonly "--bits-floating-available-height": "undefinedpx" | `${number}px`;
readonly "--bits-floating-anchor-width": "undefinedpx" | `${number}px`;
readonly "--bits-floating-anchor-height": "undefinedpx" | `${number}px`;
};
readonly dir: Direction;
};
props: {
readonly "data-side": "left" | "right" | "top" | "bottom";
readonly "data-align": "center" | "end" | "start";
readonly style: string;
};
arrowStyle: {
[x: string]: string | number | undefined;
position: string;
left: string | undefined;
top: string | undefined;
"transform-origin": string;
transform: string;
visibility: string | undefined;
};
constructor(opts: FloatingContentStateOpts, root: FloatingRootState);
}
interface FloatingArrowStateOpts extends WithRefOpts {
}
export declare class FloatingArrowState {
static create(opts: FloatingArrowStateOpts): FloatingArrowState;
readonly opts: FloatingArrowStateOpts;
readonly content: FloatingContentState;
constructor(opts: FloatingArrowStateOpts, content: FloatingContentState);
readonly props: {
readonly id: string;
readonly style: {
[x: string]: string | number | undefined;
position: string;
left: string | undefined;
top: string | undefined;
"transform-origin": string;
transform: string;
visibility: string | undefined;
};
readonly "data-side": "left" | "right" | "top" | "bottom";
};
}
interface FloatingAnchorStateOpts extends ReadableBoxedValues<{
id: string;
virtualEl?: Measurable | null;
ref: Measurable | HTMLElement | null;
}> {
}
export declare class FloatingAnchorState {
static create(opts: FloatingAnchorStateOpts, tooltip?: boolean): FloatingAnchorState;
readonly opts: FloatingAnchorStateOpts;
readonly root: FloatingRootState;
constructor(opts: FloatingAnchorStateOpts, root: FloatingRootState);
}
export declare function getSideFromPlacement(placement: Placement): "left" | "right" | "top" | "bottom";
export declare function getAlignFromPlacement(placement: Placement): "center" | "end" | "start";
export {};
@@ -0,0 +1,305 @@
import { arrow, autoUpdate, flip, hide, limitShift, offset, shift, size, } from "@floating-ui/dom";
import { attachRef, cssToStyleObj, getWindow, styleToString, simpleBox, boxFrom, } from "svelte-toolbelt";
import { Context, ElementSize, watch } from "runed";
import { isNotNull } from "../../../internal/is.js";
import { useId } from "../../../internal/use-id.js";
import { useFloating } from "../../../internal/floating-svelte/use-floating.svelte.js";
export const SIDE_OPTIONS = ["top", "right", "bottom", "left"];
export const ALIGN_OPTIONS = ["start", "center", "end"];
const OPPOSITE_SIDE = {
top: "bottom",
right: "left",
bottom: "top",
left: "right",
};
const FloatingRootContext = new Context("Floating.Root");
const FloatingContentContext = new Context("Floating.Content");
const FloatingTooltipRootContext = new Context("Floating.Root");
export class FloatingRootState {
static create(tooltip = false) {
return tooltip
? FloatingTooltipRootContext.set(new FloatingRootState())
: FloatingRootContext.set(new FloatingRootState());
}
anchorNode = simpleBox(null);
customAnchorNode = simpleBox(null);
triggerNode = simpleBox(null);
constructor() {
$effect(() => {
if (this.customAnchorNode.current) {
if (typeof this.customAnchorNode.current === "string") {
this.anchorNode.current = document.querySelector(this.customAnchorNode.current);
}
else {
this.anchorNode.current = this.customAnchorNode.current;
}
}
else {
this.anchorNode.current = this.triggerNode.current;
}
});
}
}
export class FloatingContentState {
static create(opts, tooltip = false) {
return tooltip
? FloatingContentContext.set(new FloatingContentState(opts, FloatingTooltipRootContext.get()))
: FloatingContentContext.set(new FloatingContentState(opts, FloatingRootContext.get()));
}
opts;
root;
// nodes
contentRef = simpleBox(null);
wrapperRef = simpleBox(null);
arrowRef = simpleBox(null);
contentAttachment = attachRef(this.contentRef);
wrapperAttachment = attachRef(this.wrapperRef);
arrowAttachment = attachRef(this.arrowRef);
// ids
arrowId = simpleBox(useId());
#transformedStyle = $derived.by(() => {
if (typeof this.opts.style === "string")
return cssToStyleObj(this.opts.style);
if (!this.opts.style)
return {};
});
#updatePositionStrategy = undefined;
#arrowSize = new ElementSize(() => this.arrowRef.current ?? undefined);
#arrowWidth = $derived(this.#arrowSize?.width ?? 0);
#arrowHeight = $derived(this.#arrowSize?.height ?? 0);
#desiredPlacement = $derived.by(() => (this.opts.side?.current +
(this.opts.align.current !== "center"
? `-${this.opts.align.current}`
: "")));
#boundary = $derived.by(() => Array.isArray(this.opts.collisionBoundary.current)
? this.opts.collisionBoundary.current
: [this.opts.collisionBoundary.current]);
hasExplicitBoundaries = $derived(this.#boundary.length > 0);
detectOverflowOptions = $derived.by(() => ({
padding: this.opts.collisionPadding.current,
boundary: this.#boundary.filter(isNotNull),
altBoundary: this.hasExplicitBoundaries,
}));
#availableWidth = $state(undefined);
#availableHeight = $state(undefined);
#anchorWidth = $state(undefined);
#anchorHeight = $state(undefined);
middleware = $derived.by(() => [
offset({
mainAxis: this.opts.sideOffset.current + this.#arrowHeight,
alignmentAxis: this.opts.alignOffset.current,
}),
this.opts.avoidCollisions.current &&
shift({
mainAxis: true,
crossAxis: false,
limiter: this.opts.sticky.current === "partial" ? limitShift() : undefined,
...this.detectOverflowOptions,
}),
this.opts.avoidCollisions.current && flip({ ...this.detectOverflowOptions }),
size({
...this.detectOverflowOptions,
apply: ({ rects, availableWidth, availableHeight }) => {
const { width: anchorWidth, height: anchorHeight } = rects.reference;
this.#availableWidth = availableWidth;
this.#availableHeight = availableHeight;
this.#anchorWidth = anchorWidth;
this.#anchorHeight = anchorHeight;
},
}),
this.arrowRef.current &&
arrow({
element: this.arrowRef.current,
padding: this.opts.arrowPadding.current,
}),
transformOrigin({ arrowWidth: this.#arrowWidth, arrowHeight: this.#arrowHeight }),
this.opts.hideWhenDetached.current &&
hide({ strategy: "referenceHidden", ...this.detectOverflowOptions }),
].filter(Boolean));
floating;
placedSide = $derived.by(() => getSideFromPlacement(this.floating.placement));
placedAlign = $derived.by(() => getAlignFromPlacement(this.floating.placement));
arrowX = $derived.by(() => this.floating.middlewareData.arrow?.x ?? 0);
arrowY = $derived.by(() => this.floating.middlewareData.arrow?.y ?? 0);
cannotCenterArrow = $derived.by(() => this.floating.middlewareData.arrow?.centerOffset !== 0);
contentZIndex = $state();
arrowBaseSide = $derived(OPPOSITE_SIDE[this.placedSide]);
wrapperProps = $derived.by(() => ({
id: this.opts.wrapperId.current,
"data-bits-floating-content-wrapper": "",
style: {
...this.floating.floatingStyles,
// keep off page when measuring
transform: this.floating.isPositioned
? this.floating.floatingStyles.transform
: "translate(0, -200%)",
minWidth: "max-content",
zIndex: this.contentZIndex,
"--bits-floating-transform-origin": `${this.floating.middlewareData.transformOrigin?.x} ${this.floating.middlewareData.transformOrigin?.y}`,
"--bits-floating-available-width": `${this.#availableWidth}px`,
"--bits-floating-available-height": `${this.#availableHeight}px`,
"--bits-floating-anchor-width": `${this.#anchorWidth}px`,
"--bits-floating-anchor-height": `${this.#anchorHeight}px`,
// hide the content if using the hide middleware and should be hidden
...(this.floating.middlewareData.hide?.referenceHidden && {
visibility: "hidden",
"pointer-events": "none",
}),
...this.#transformedStyle,
},
// Floating UI calculates logical alignment based the `dir` attribute
dir: this.opts.dir.current,
...this.wrapperAttachment,
}));
props = $derived.by(() => ({
"data-side": this.placedSide,
"data-align": this.placedAlign,
style: styleToString({
...this.#transformedStyle,
}),
...this.contentAttachment,
}));
arrowStyle = $derived({
position: "absolute",
left: this.arrowX ? `${this.arrowX}px` : undefined,
top: this.arrowY ? `${this.arrowY}px` : undefined,
[this.arrowBaseSide]: 0,
"transform-origin": {
top: "",
right: "0 0",
bottom: "center 0",
left: "100% 0",
}[this.placedSide],
transform: {
top: "translateY(100%)",
right: "translateY(50%) rotate(90deg) translateX(-50%)",
bottom: "rotate(180deg)",
left: "translateY(50%) rotate(-90deg) translateX(50%)",
}[this.placedSide],
visibility: this.cannotCenterArrow ? "hidden" : undefined,
});
constructor(opts, root) {
this.opts = opts;
this.root = root;
if (opts.customAnchor) {
this.root.customAnchorNode.current = opts.customAnchor.current;
}
watch(() => opts.customAnchor.current, (customAnchor) => {
this.root.customAnchorNode.current = customAnchor;
});
this.floating = useFloating({
strategy: () => this.opts.strategy.current,
placement: () => this.#desiredPlacement,
middleware: () => this.middleware,
reference: this.root.anchorNode,
whileElementsMounted: (...args) => {
const cleanup = autoUpdate(...args, {
animationFrame: this.#updatePositionStrategy?.current === "always",
});
return cleanup;
},
open: () => this.opts.enabled.current,
sideOffset: () => this.opts.sideOffset.current,
alignOffset: () => this.opts.alignOffset.current,
});
$effect(() => {
if (!this.floating.isPositioned)
return;
this.opts.onPlaced?.current();
});
watch(() => this.contentRef.current, (contentNode) => {
if (!contentNode)
return;
const win = getWindow(contentNode);
this.contentZIndex = win.getComputedStyle(contentNode).zIndex;
});
$effect(() => {
this.floating.floating.current = this.wrapperRef.current;
});
}
}
export class FloatingArrowState {
static create(opts) {
return new FloatingArrowState(opts, FloatingContentContext.get());
}
opts;
content;
constructor(opts, content) {
this.opts = opts;
this.content = content;
}
props = $derived.by(() => ({
id: this.opts.id.current,
style: this.content.arrowStyle,
"data-side": this.content.placedSide,
...this.content.arrowAttachment,
}));
}
export class FloatingAnchorState {
static create(opts, tooltip = false) {
return tooltip
? new FloatingAnchorState(opts, FloatingTooltipRootContext.get())
: new FloatingAnchorState(opts, FloatingRootContext.get());
}
opts;
root;
constructor(opts, root) {
this.opts = opts;
this.root = root;
if (opts.virtualEl && opts.virtualEl.current) {
root.triggerNode = boxFrom(opts.virtualEl.current);
}
else {
root.triggerNode = opts.ref;
}
}
}
//
// HELPERS
//
function transformOrigin(options) {
return {
name: "transformOrigin",
options,
fn(data) {
const { placement, rects, middlewareData } = data;
const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
const isArrowHidden = cannotCenterArrow;
const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
let x = "";
let y = "";
if (placedSide === "bottom") {
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
y = `${-arrowHeight}px`;
}
else if (placedSide === "top") {
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
y = `${rects.floating.height + arrowHeight}px`;
}
else if (placedSide === "right") {
x = `${-arrowHeight}px`;
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
}
else if (placedSide === "left") {
x = `${rects.floating.width + arrowHeight}px`;
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
}
return { data: { x, y } };
},
};
}
function getSideAndAlignFromPlacement(placement) {
const [side, align = "center"] = placement.split("-");
return [side, align];
}
export function getSideFromPlacement(placement) {
return getSideAndAlignFromPlacement(placement)[0];
}
export function getAlignFromPlacement(placement) {
return getSideAndAlignFromPlacement(placement)[1];
}