ranui/dist/components/glass/index.d.ts

A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.

import { RanElement } from '@/utils/index';
/**
 * `r-glass` — a liquid / frosted glass surface.
 *
 * Frosts and refracts whatever is behind it: `backdrop-filter` blur + saturate
 * for the frost, an SVG `feDisplacementMap` (strength = `displace`) for the
 * liquid light-bending, plus a specular rim/highlight. All visual knobs are
 * exposed as attributes and `--ran-glass-*` tokens; content goes in the default
 * slot. Parts: `glass` (the pane), `specular` (the highlight layer).
 *
 * Backdrop note: this samples the DOM behind the host — the portable technique.
 * A WebGPU shader path (for refracting a canvas/3D scene) is documented
 * separately and not bundled here, to keep the element lean.
 */
export declare class Glass extends RanElement {
    _shadowDom: ShadowRoot;
    private _glass;
    private _turb;
    private _disp;
    private _uid;
    static get observedAttributes(): string[];
    constructor();
    /** Backdrop saturation, as a percentage number (e.g. `180`). */
    get saturate(): string;
    set saturate(v: string);
    /** Liquid refraction strength — the SVG displacement scale. `0` is a flat pane. */
    get displace(): string;
    set displace(v: string);
    /** Turbulence base frequency — smaller = larger, smoother liquid ripples. */
    get frequency(): string;
    set frequency(v: string);
    /** Corner radius, in px. */
    get radius(): string;
    set radius(v: string);
    /** Glass fill tint (any CSS background value). */
    get tint(): string;
    set tint(v: string);
    /** Animated specular sweep across the surface. */
    get sheen(): boolean;
    set sheen(v: boolean);
    /** Hover lift + press-scale feedback (for clickable glass). */
    get interactive(): boolean;
    set interactive(v: boolean);
    /** Inject the per-instance SVG displacement filter (client only, once). */
    private _ensureFilter;
    private _apply;
    /** Set a host custom property, appending a unit only when the value is bare-numeric. */
    private _setVar;
    connectedCallback(): void;
    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
}
export default Glass;