UNPKG

@oddbird/css-anchor-positioning

Version:

Polyfill for the proposed CSS anchor positioning spec

68 lines (67 loc) 4.32 kB
import { type Block, type CssNode } from 'css-tree'; import { type PseudoElement } from './dom.js'; export declare const POSITION_AREA_CASCADE_PROPERTY = "--pa-cascade-property"; export declare const POSITION_AREA_WRAPPER_ATTRIBUTE = "data-anchor-position-wrapper"; type PositionAreaGridValue = 0 | 1 | 2 | 3; declare enum WritingMode { Logical = "Logical", LogicalSelf = "LogicalSelf", Physical = "Physical", PhysicalSelf = "PhysicalSelf", Irrelevant = "Irrelevant" } export declare const POSITION_AREA_PROPS: readonly ["left", "center", "right", "span-left", "span-right", "x-start", "x-end", "span-x-start", "span-x-end", "x-self-start", "x-self-end", "span-x-self-start", "span-x-self-end", "span-all", "top", "bottom", "span-top", "span-bottom", "y-start", "y-end", "span-y-start", "span-y-end", "y-self-start", "y-self-end", "span-y-self-start", "span-y-self-end", "block-start", "block-end", "span-block-start", "span-block-end", "inline-start", "inline-end", "span-inline-start", "span-inline-end", "self-block-start", "self-block-end", "span-self-block-start", "span-self-block-end", "self-inline-start", "self-inline-end", "span-self-inline-start", "span-self-inline-end", "start", "end", "span-start", "span-end", "self-start", "self-end", "span-self-start", "span-self-end"]; export type PositionAreaProperty = (typeof POSITION_AREA_PROPS)[number]; export declare function isPositionAreaProp(property: string | PositionAreaProperty): property is PositionAreaProperty; declare const POSITION_AREA_X: PositionAreaProperty[]; declare const POSITION_AREA_Y: PositionAreaProperty[]; declare const POSITION_AREA_BLOCK: PositionAreaProperty[]; declare const POSITION_AREA_INLINE: PositionAreaProperty[]; declare const POSITION_AREA_SELF_BLOCK: PositionAreaProperty[]; declare const POSITION_AREA_SELF_INLINE: PositionAreaProperty[]; declare const POSITION_AREA_SHORTHAND: PositionAreaProperty[]; declare const POSITION_AREA_SELF_SHORTHAND: PositionAreaProperty[]; export type PositionAreaX = (typeof POSITION_AREA_X)[number]; export type PositionAreaY = (typeof POSITION_AREA_Y)[number]; export type PositionAreaBlock = (typeof POSITION_AREA_BLOCK)[number]; export type PositionAreaInline = (typeof POSITION_AREA_INLINE)[number]; export type PositionAreaSelfBlock = (typeof POSITION_AREA_SELF_BLOCK)[number]; export type PositionAreaSelfInline = (typeof POSITION_AREA_SELF_INLINE)[number]; export type PositionAreaShorthand = (typeof POSITION_AREA_SHORTHAND)[number]; export type PositionAreaSelfShorthand = (typeof POSITION_AREA_SELF_SHORTHAND)[number]; export declare function axisForPositionAreaValue(value: string): 'block' | 'inline' | 'ambiguous'; export type InsetValue = 0 | 'top' | 'bottom' | 'left' | 'right'; interface AxisInfo<T> { block: T; inline: T; } export interface PositionAreaDeclaration { values: AxisInfo<string>; grid: AxisInfo<[PositionAreaGridValue, PositionAreaGridValue, WritingMode]>; selectorUUID: string; } export interface PositionAreaData { values: AxisInfo<string>; grid: AxisInfo<[PositionAreaGridValue, PositionAreaGridValue]>; insets: AxisInfo<[InsetValue, InsetValue]>; alignments: AxisInfo<'start' | 'end' | 'center'>; changed: boolean; selectorUUID: string; } export interface PositionAreaTargetData { values: AxisInfo<string>; grid: AxisInfo<[PositionAreaGridValue, PositionAreaGridValue, WritingMode]>; insets: AxisInfo<[InsetValue, InsetValue]>; alignments: AxisInfo<'start' | 'end' | 'center'>; selectorUUID: string; targetUUID: string; anchorEl: HTMLElement | PseudoElement | null; wrapperEl: HTMLElement; targetEl: HTMLElement; } export declare function getPositionAreaDeclaration(node: CssNode): PositionAreaDeclaration | undefined; export declare function addPositionAreaDeclarationBlockStyles(declaration: PositionAreaDeclaration, block: Block): void; export declare function wrapperForPositionedElement(targetEl: HTMLElement, targetUUID: string): HTMLElement; export declare function dataForPositionAreaTarget(targetEl: HTMLElement, positionAreaData: PositionAreaDeclaration, anchorEl: HTMLElement | PseudoElement | null): Promise<PositionAreaTargetData>; export declare function activeWrapperStyles(targetUUID: string, selectorUUID: string): string; export {};