@tempots/dom/renderable/attribute.d.ts

Fully-typed frontend framework alternative to React and Angular

import { Renderable, SplitNValue } from '../types/domain';
import { Signal, Value } from '@tempots/core';
/**
 * Creates a renderable for an HTML attribute with the specified name and value.
 *
 * This is the functional equivalent of using `attr[name](value)` with a dynamic attribute name.
 *
 * The `class` attribute is special and can be used multiple times on the same element.
 * Multiple class values will be merged together.
 *
 * @param name - The name of the attribute.
 * @param value - The value of the attribute (can be a literal or Signal).
 * @returns A renderable that sets the attribute.
 * @example
 * ```ts
 * const button = html.button(
 *   Attr('type', 'button'),
 *   Attr('disabled', disabledSignal),
 *   // Multiple class attributes
 *   Attr('class', 'btn btn-primary'),
 *   Attr('class', 'active'),  // Both classes will be applied
 *   // ...
 * )
 * ```
 * @public
 */
export declare const Attr: (name: string, value: unknown) => Renderable;
/**
 * The `attr` object allows to create any HTML attribute. Either a literal value
 * or `Signal<?>` can be passed as a value. The type of the value is inferred
 * from the attribute name.
 *
 * @example
 * ```ts
 * const button = html.button(
 *   attr.type('button'),
 *   attr.disabled(disabled), // where disabled is a `Signal<boolean>`
 *   // ...
 * )
 * ```
 * @public
 */
export declare const attr: {
    accept: (value: SplitNValue<string>) => Renderable;
    'accept-charset': (value: SplitNValue<string>) => Renderable;
    accesskey: (value: SplitNValue<string>) => Renderable;
    action: (value: SplitNValue<string>) => Renderable;
    align: (value: SplitNValue<string>) => Renderable;
    allow: (value: SplitNValue<string>) => Renderable;
    allowfullscreen: (value: SplitNValue<boolean>) => Renderable;
    allowpaymentrequest: (value: SplitNValue<boolean>) => Renderable;
    alt: (value: SplitNValue<string>) => Renderable;
    as: (value: SplitNValue<string>) => Renderable;
    async: (value: SplitNValue<boolean>) => Renderable;
    autocapitalize: (value: SplitNValue<"none" | "off" | "on" | "sentences" | "words" | "characters">) => Renderable;
    autocomplete: (value: SplitNValue<string>) => Renderable;
    autofocus: (value: SplitNValue<boolean>) => Renderable;
    autoplay: (value: SplitNValue<boolean>) => Renderable;
    bgcolor: (value: SplitNValue<string>) => Renderable;
    border: (value: SplitNValue<string>) => Renderable;
    capture: (value: SplitNValue<boolean | "user" | "environment">) => Renderable;
    charset: (value: SplitNValue<string>) => Renderable;
    checked: (value: SplitNValue<boolean>) => Renderable;
    cite: (value: SplitNValue<string>) => Renderable;
    class: (value: SplitNValue<string>) => Renderable;
    color: (value: SplitNValue<string>) => Renderable;
    cols: (value: SplitNValue<number>) => Renderable;
    colspan: (value: SplitNValue<number>) => Renderable;
    content: (value: SplitNValue<string>) => Renderable;
    contenteditable: (value: SplitNValue<boolean | "true" | "false" | "plaintext-only">) => Renderable;
    controls: (value: SplitNValue<string>) => Renderable;
    coords: (value: SplitNValue<string>) => Renderable;
    crossorigin: (value: SplitNValue<"" | "anonymous" | "use-credentials">) => Renderable;
    data: (value: SplitNValue<string>) => Renderable;
    datetime: (value: SplitNValue<string>) => Renderable;
    decoding: (value: SplitNValue<"sync" | "async" | "auto">) => Renderable;
    default: (value: SplitNValue<string>) => Renderable;
    defer: (value: SplitNValue<string>) => Renderable;
    dir: (value: SplitNValue<"auto" | "ltr" | "rtl">) => Renderable;
    dirname: (value: SplitNValue<string>) => Renderable;
    disabled: (value: SplitNValue<boolean>) => Renderable;
    download: (value: SplitNValue<string>) => Renderable;
    draggable: (value: SplitNValue<boolean | "true" | "false">) => Renderable;
    dropzone: (value: SplitNValue<string>) => Renderable;
    enctype: (value: SplitNValue<string>) => Renderable;
    enterkeyhint: (value: SplitNValue<"enter" | "done" | "go" | "next" | "previous" | "search" | "send">) => Renderable;
    for: (value: SplitNValue<string>) => Renderable;
    form: (value: SplitNValue<string>) => Renderable;
    formaction: (value: SplitNValue<string>) => Renderable;
    formenctype: (value: SplitNValue<string>) => Renderable;
    formmethod: (value: SplitNValue<string>) => Renderable;
    formnovalidate: (value: SplitNValue<boolean>) => Renderable;
    formtarget: (value: SplitNValue<string>) => Renderable;
    headers: (value: SplitNValue<string>) => Renderable;
    height: (value: SplitNValue<string>) => Renderable;
    hidden: (value: SplitNValue<boolean | "" | "until-found" | "hidden">) => Renderable;
    high: (value: SplitNValue<string>) => Renderable;
    href: (value: SplitNValue<string>) => Renderable;
    hreflang: (value: SplitNValue<string>) => Renderable;
    'http-equiv': (value: SplitNValue<string>) => Renderable;
    icon: (value: SplitNValue<string>) => Renderable;
    id: (value: SplitNValue<string>) => Renderable;
    imagesizes: (value: SplitNValue<string>) => Renderable;
    imagesrcset: (value: SplitNValue<string>) => Renderable;
    inputmode: (value: SplitNValue<"none" | "text" | "search" | "decimal" | "numeric" | "tel" | "email" | "url">) => Renderable;
    integrity: (value: SplitNValue<string>) => Renderable;
    is: (value: SplitNValue<string>) => Renderable;
    ismap: (value: SplitNValue<string>) => Renderable;
    itemid: (value: SplitNValue<string>) => Renderable;
    itemprop: (value: SplitNValue<string>) => Renderable;
    itemref: (value: SplitNValue<string>) => Renderable;
    itemscope: (value: SplitNValue<boolean>) => Renderable;
    itemtype: (value: SplitNValue<string>) => Renderable;
    keytype: (value: SplitNValue<string>) => Renderable;
    kind: (value: SplitNValue<string>) => Renderable;
    label: (value: SplitNValue<string>) => Renderable;
    lang: (value: SplitNValue<string>) => Renderable;
    language: (value: SplitNValue<string>) => Renderable;
    list: (value: SplitNValue<string>) => Renderable;
    loading: (value: SplitNValue<"eager" | "lazy">) => Renderable;
    loop: (value: SplitNValue<string>) => Renderable;
    low: (value: SplitNValue<string>) => Renderable;
    manifest: (value: SplitNValue<string>) => Renderable;
    max: (value: SplitNValue<number>) => Renderable;
    maxlength: (value: SplitNValue<number>) => Renderable;
    media: (value: SplitNValue<string>) => Renderable;
    method: (value: SplitNValue<string>) => Renderable;
    min: (value: SplitNValue<number>) => Renderable;
    minlength: (value: SplitNValue<number>) => Renderable;
    multiple: (value: SplitNValue<boolean>) => Renderable;
    muted: (value: SplitNValue<boolean>) => Renderable;
    name: (value: SplitNValue<string>) => Renderable;
    nonce: (value: SplitNValue<string>) => Renderable;
    novalidate: (value: SplitNValue<string>) => Renderable;
    open: (value: SplitNValue<string>) => Renderable;
    optimum: (value: SplitNValue<string>) => Renderable;
    part: (value: SplitNValue<string>) => Renderable;
    pattern: (value: SplitNValue<string>) => Renderable;
    ping: (value: SplitNValue<string>) => Renderable;
    placeholder: (value: SplitNValue<string>) => Renderable;
    playsinline: (value: SplitNValue<boolean>) => Renderable;
    popover: (value: SplitNValue<"" | "auto" | "manual">) => Renderable;
    popovertarget: (value: SplitNValue<string>) => Renderable;
    popovertargetaction: (value: SplitNValue<"hide" | "show" | "toggle">) => Renderable;
    poster: (value: SplitNValue<string>) => Renderable;
    preload: (value: SplitNValue<string>) => Renderable;
    property: (value: SplitNValue<string>) => Renderable;
    radiogroup: (value: SplitNValue<string>) => Renderable;
    readonly: (value: SplitNValue<boolean>) => Renderable;
    referrerpolicy: (value: SplitNValue<"no-referrer" | "no-referrer-when-downgrade" | "origin" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url">) => Renderable;
    rel: (value: SplitNValue<string>) => Renderable;
    required: (value: SplitNValue<string>) => Renderable;
    reversed: (value: SplitNValue<string>) => Renderable;
    role: (value: SplitNValue<string>) => Renderable;
    rows: (value: SplitNValue<number>) => Renderable;
    rowspan: (value: SplitNValue<number>) => Renderable;
    sandbox: (value: SplitNValue<string>) => Renderable;
    scope: (value: SplitNValue<string>) => Renderable;
    scoped: (value: SplitNValue<string>) => Renderable;
    seamless: (value: SplitNValue<string>) => Renderable;
    selected: (value: SplitNValue<boolean>) => Renderable;
    shape: (value: SplitNValue<string>) => Renderable;
    size: (value: SplitNValue<number>) => Renderable;
    sizes: (value: SplitNValue<string>) => Renderable;
    slot: (value: SplitNValue<string>) => Renderable;
    span: (value: SplitNValue<string>) => Renderable;
    spellcheck: (value: SplitNValue<boolean | "true" | "false">) => Renderable;
    src: (value: SplitNValue<string>) => Renderable;
    srcdoc: (value: SplitNValue<string>) => Renderable;
    srclang: (value: SplitNValue<string>) => Renderable;
    srcset: (value: SplitNValue<string>) => Renderable;
    start: (value: SplitNValue<string>) => Renderable;
    step: (value: SplitNValue<number>) => Renderable;
    style: (value: SplitNValue<string>) => Renderable;
    tabindex: (value: SplitNValue<number>) => Renderable;
    target: (value: SplitNValue<string>) => Renderable;
    title: (value: SplitNValue<string>) => Renderable;
    translate: (value: SplitNValue<"yes" | "no">) => Renderable;
    type: (value: SplitNValue<string>) => Renderable;
    usemap: (value: SplitNValue<string>) => Renderable;
    value: (value: SplitNValue<string>) => Renderable;
    valueAsNumber: (value: SplitNValue<number>) => Renderable;
    valueAsDate: (value: SplitNValue<Date>) => Renderable;
    width: (value: SplitNValue<string>) => Renderable;
    wrap: (value: SplitNValue<string>) => Renderable;
    textContent: (value: SplitNValue<string>) => Renderable;
    innerText: (value: SplitNValue<string>) => Renderable;
    innerHTML: (value: SplitNValue<string>) => Renderable;
    outerHTML: (value: SplitNValue<string>) => Renderable;
};
/**
 * Creates a renderable for a data attribute with the specified name and value.
 *
 * This is an alias for `dataAttr(name, value)` that accepts `unknown` values.
 *
 * @param name - The name of the data attribute (without the 'data-' prefix).
 * @param value - The value of the attribute (can be a literal or Signal).
 * @returns A renderable that sets the data attribute.
 * @example
 * ```ts
 * const button = html.button(
 *   DataAttr('myinfo', 'something'), // maps to the `data-myinfo` attribute
 * )
 * ```
 * @public
 */
export declare const DataAttr: (name: string, value: Value<string>) => Renderable;
/**
 * Creates a renderable for a `data-` attribute with the specified name and value.
 *
 * @param name - The name of the data attribute (without the 'data-' prefix).
 * @param value - The value of the attribute (can be a literal or Signal).
 * @returns A renderable that sets the data attribute.
 * @example
 * ```ts
 * const button = html.button(
 *   dataAttr('myinfo', 'something'), // maps to the `data-myinfo` attribute
 * )
 * ```
 * @public
 * @deprecated
 */
export declare const dataAttr: (name: string, value: Value<string>) => Renderable;
/**
 * Creates a renderable for an ARIA attribute with the specified name and value.
 *
 * This is the functional equivalent of using `aria[name](value)` with a dynamic attribute name.
 *
 * @param name - The name of the ARIA attribute (without the 'aria-' prefix).
 * @param value - The value of the attribute (can be a literal or Signal).
 * @returns A renderable that sets the ARIA attribute.
 * @example
 * ```ts
 * const button = html.button(
 *   Aria('label', 'Click me!'), // maps to the `aria-label` attribute
 *   Aria('pressed', pressedSignal), // maps to the `aria-pressed` attribute
 * )
 * ```
 * @public
 */
export declare const Aria: (name: string, value: unknown) => Renderable;
/**
 * An object that provides a convenient way to create mountable attributes for ARIA properties.
 *
 * The type of the value is inferred from the attribute name.
 *
 * @example
 * ```ts
 * const button = html.button(
 *   aria.label('Click me!'), // maps to the `aria-label` attribute
 *   // maps to the `aria-pressed` attribute where pressed is a `Signal<boolean>`
 *   aria.pressed(pressed)
 * )
 * ```
 * @public
 */
export declare const aria: {
    activedescendant: (value: SplitNValue<string>) => Renderable;
    atomic: (value: SplitNValue<boolean>) => Renderable;
    autocomplete: (value: SplitNValue<"none" | "inline" | "list" | "both">) => Renderable;
    braillelabel: (value: SplitNValue<string>) => Renderable;
    brailleroledescription: (value: SplitNValue<string>) => Renderable;
    busy: (value: SplitNValue<boolean>) => Renderable;
    checked: (value: SplitNValue<boolean | "mixed">) => Renderable;
    colcount: (value: SplitNValue<number>) => Renderable;
    colindex: (value: SplitNValue<number>) => Renderable;
    colindextext: (value: SplitNValue<string>) => Renderable;
    colspan: (value: SplitNValue<number>) => Renderable;
    controls: (value: SplitNValue<string>) => Renderable;
    current: (value: SplitNValue<string>) => Renderable;
    describedby: (value: SplitNValue<string>) => Renderable;
    description: (value: SplitNValue<string>) => Renderable;
    details: (value: SplitNValue<string>) => Renderable;
    disabled: (value: SplitNValue<boolean>) => Renderable;
    dropeffect: (value: SplitNValue<"none" | "copy" | "execute" | "link" | "move" | "popup">) => Renderable;
    errormessage: (value: SplitNValue<string>) => Renderable;
    expanded: (value: SplitNValue<boolean | "undefined">) => Renderable;
    flowto: (value: SplitNValue<string>) => Renderable;
    grabbed: (value: SplitNValue<boolean>) => Renderable;
    haspopup: (value: SplitNValue<boolean | "true" | "false" | "menu" | "listbox" | "tree" | "grid" | "dialog">) => Renderable;
    hidden: (value: SplitNValue<boolean | "undefined">) => Renderable;
    invalid: (value: SplitNValue<boolean | "true" | "false" | "grammar" | "spelling">) => Renderable;
    keyshortcuts: (value: SplitNValue<string>) => Renderable;
    label: (value: SplitNValue<string>) => Renderable;
    labelledby: (value: SplitNValue<string>) => Renderable;
    level: (value: SplitNValue<number>) => Renderable;
    live: (value: SplitNValue<"off" | "assertive" | "polite">) => Renderable;
    modal: (value: SplitNValue<boolean>) => Renderable;
    multiline: (value: SplitNValue<boolean>) => Renderable;
    multiselectable: (value: SplitNValue<boolean>) => Renderable;
    orientation: (value: SplitNValue<"undefined" | "horizontal" | "vertical">) => Renderable;
    owns: (value: SplitNValue<string>) => Renderable;
    placeholder: (value: SplitNValue<string>) => Renderable;
    posinset: (value: SplitNValue<number>) => Renderable;
    pressed: (value: SplitNValue<boolean | "undefined" | "mixed">) => Renderable;
    readonly: (value: SplitNValue<boolean>) => Renderable;
    relevant: (value: SplitNValue<string>) => Renderable;
    required: (value: SplitNValue<boolean>) => Renderable;
    roledescription: (value: SplitNValue<string>) => Renderable;
    rowcount: (value: SplitNValue<number>) => Renderable;
    rowindex: (value: SplitNValue<number>) => Renderable;
    rowindextext: (value: SplitNValue<string>) => Renderable;
    rowspan: (value: SplitNValue<number>) => Renderable;
    selected: (value: SplitNValue<boolean | "undefined">) => Renderable;
    setsize: (value: SplitNValue<number>) => Renderable;
    sort: (value: SplitNValue<"none" | "ascending" | "descending" | "other">) => Renderable;
    valuemax: (value: SplitNValue<number>) => Renderable;
    valuemin: (value: SplitNValue<number>) => Renderable;
    valuenow: (value: SplitNValue<number>) => Renderable;
    valuetext: (value: SplitNValue<string>) => Renderable;
};
/**
 * Creates a renderable for an SVG attribute with the specified name and value.
 *
 * This is the functional equivalent of using `svgAttr[name](value)` with a dynamic attribute name.
 *
 * @param name - The name of the SVG attribute.
 * @param value - The value of the attribute (can be a literal or Signal).
 * @returns A renderable that sets the SVG attribute.
 * @example
 * ```ts
 * const circle = svg.circle(
 *   SVGAttr('cx', 50),
 *   SVGAttr('cy', 50),
 *   SVGAttr('r', radiusSignal),
 * )
 * ```
 * @public
 */
export declare const SVGAttr: (name: string, value: unknown) => Renderable;
/**
 * An object that provides a convenient way to create mountable attributes for
 * SVG elements.
 *
 * @example
 * ```ts
 * const svg = html.svg(
 *  svgAttr.width(100),
 *  svgAttr.height(height), // where height is a `Signal<number>`
 * // ...
 * )
 * ```
 * @public
 */
export declare const svgAttr: {
    'accent-height': (value: SplitNValue<string | number>) => Renderable;
    accumulate: (value: SplitNValue<"none" | "sum">) => Renderable;
    additive: (value: SplitNValue<"sum" | "replace">) => Renderable;
    'alignment-baseline': (value: SplitNValue<"auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit">) => Renderable;
    'allow-reorder': (value: SplitNValue<"yes" | "no">) => Renderable;
    alphabetic: (value: SplitNValue<string | number>) => Renderable;
    amplitude: (value: SplitNValue<string | number>) => Renderable;
    'arabic-form': (value: SplitNValue<"initial" | "medial" | "terminal" | "isolated">) => Renderable;
    ascent: (value: SplitNValue<string | number>) => Renderable;
    attributeName: (value: SplitNValue<string>) => Renderable;
    attributeType: (value: SplitNValue<"auto" | "CSS" | "XML">) => Renderable;
    autoReverse: (value: SplitNValue<string | boolean>) => Renderable;
    azimuth: (value: SplitNValue<string | number>) => Renderable;
    baseFrequency: (value: SplitNValue<string | number>) => Renderable;
    baseProfile: (value: SplitNValue<string>) => Renderable;
    'baseline-shift': (value: SplitNValue<string | number>) => Renderable;
    bbox: (value: SplitNValue<string>) => Renderable;
    begin: (value: SplitNValue<string>) => Renderable;
    bias: (value: SplitNValue<string | number>) => Renderable;
    by: (value: SplitNValue<string>) => Renderable;
    calcMode: (value: SplitNValue<"discrete" | "linear" | "paced" | "spline">) => Renderable;
    'cap-height': (value: SplitNValue<string | number>) => Renderable;
    class: (value: SplitNValue<string>) => Renderable;
    clip: (value: SplitNValue<string>) => Renderable;
    'clip-path': (value: SplitNValue<string>) => Renderable;
    clipPathUnits: (value: SplitNValue<"userSpaceOnUse" | "objectBoundingBox">) => Renderable;
    clipRule: (value: SplitNValue<"inherit" | "nonzero" | "evenodd">) => Renderable;
    'color-interpolation': (value: SplitNValue<"auto" | "inherit" | "sRGB" | "linearRGB">) => Renderable;
    'color-interpolation-filters': (value: SplitNValue<"auto" | "inherit" | "sRGB" | "linearRGB">) => Renderable;
    'color-profile': (value: SplitNValue<string>) => Renderable;
    'color-rendering': (value: SplitNValue<"auto" | "inherit" | "optimizeSpeed" | "optimizeQuality">) => Renderable;
    contentScriptType: (value: SplitNValue<string>) => Renderable;
    contentStyleType: (value: SplitNValue<string>) => Renderable;
    crossorigin: (value: SplitNValue<"anonymous" | "use-credentials">) => Renderable;
    cursor: (value: SplitNValue<string>) => Renderable;
    cx: (value: SplitNValue<string | number>) => Renderable;
    cy: (value: SplitNValue<string | number>) => Renderable;
    d: (value: SplitNValue<string>) => Renderable;
    decelerate: (value: SplitNValue<string | number>) => Renderable;
    descent: (value: SplitNValue<string | number>) => Renderable;
    diffuseConstant: (value: SplitNValue<string | number>) => Renderable;
    direction: (value: SplitNValue<"ltr" | "rtl" | "inherit">) => Renderable;
    display: (value: SplitNValue<string>) => Renderable;
    divisor: (value: SplitNValue<string | number>) => Renderable;
    'dominant-baseline': (value: SplitNValue<"auto" | "middle" | "central" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit" | "text-bottom" | "text-top">) => Renderable;
    dur: (value: SplitNValue<string>) => Renderable;
    dx: (value: SplitNValue<string | number>) => Renderable;
    dy: (value: SplitNValue<string | number>) => Renderable;
    edgeMode: (value: SplitNValue<"none" | "duplicate" | "wrap">) => Renderable;
    elevation: (value: SplitNValue<string | number>) => Renderable;
    'enable-background': (value: SplitNValue<string>) => Renderable;
    end: (value: SplitNValue<string>) => Renderable;
    exponent: (value: SplitNValue<string | number>) => Renderable;
    externalResourcesRequired: (value: SplitNValue<string | boolean>) => Renderable;
    fill: (value: SplitNValue<string>) => Renderable;
    'fill-opacity': (value: SplitNValue<string | number>) => Renderable;
    'fill-rule': (value: SplitNValue<"inherit" | "nonzero" | "evenodd">) => Renderable;
    filter: (value: SplitNValue<string>) => Renderable;
    filterRes: (value: SplitNValue<string>) => Renderable;
    filterUnits: (value: SplitNValue<"userSpaceOnUse" | "objectBoundingBox">) => Renderable;
    'flood-color': (value: SplitNValue<string>) => Renderable;
    'flood-opacity': (value: SplitNValue<string | number>) => Renderable;
    focusable: (value: SplitNValue<string | boolean>) => Renderable;
    'font-family': (value: SplitNValue<string>) => Renderable;
    'font-size': (value: SplitNValue<string | number>) => Renderable;
    'font-size-adjust': (value: SplitNValue<string | number>) => Renderable;
    'font-stretch': (value: SplitNValue<string>) => Renderable;
    'font-style': (value: SplitNValue<"normal" | "italic" | "inherit" | "oblique">) => Renderable;
    'font-variant': (value: SplitNValue<string>) => Renderable;
    'font-weight': (value: SplitNValue<string>) => Renderable;
    format: (value: SplitNValue<string>) => Renderable;
    fr: (value: SplitNValue<string | number>) => Renderable;
    from: (value: SplitNValue<string>) => Renderable;
    fx: (value: SplitNValue<string | number>) => Renderable;
    fy: (value: SplitNValue<string | number>) => Renderable;
    g1: (value: SplitNValue<string>) => Renderable;
    g2: (value: SplitNValue<string>) => Renderable;
    'glyph-name': (value: SplitNValue<string>) => Renderable;
    'glyph-orientation-horizontal': (value: SplitNValue<string | number>) => Renderable;
    'glyph-orientation-vertical': (value: SplitNValue<string | number>) => Renderable;
    glyphRef: (value: SplitNValue<string>) => Renderable;
    gradientTransform: (value: SplitNValue<string>) => Renderable;
    gradientUnits: (value: SplitNValue<"userSpaceOnUse" | "objectBoundingBox">) => Renderable;
    hanging: (value: SplitNValue<string | number>) => Renderable;
    height: (value: SplitNValue<string | number>) => Renderable;
    'horiz-adv-x': (value: SplitNValue<string | number>) => Renderable;
    'horiz-origin-x': (value: SplitNValue<string | number>) => Renderable;
    'horiz-origin-y': (value: SplitNValue<string | number>) => Renderable;
    href: (value: SplitNValue<string>) => Renderable;
    id: (value: SplitNValue<string>) => Renderable;
    ideographic: (value: SplitNValue<string | number>) => Renderable;
    'image-rendering': (value: SplitNValue<"auto" | "inherit" | "optimizeSpeed" | "optimizeQuality">) => Renderable;
    in: (value: SplitNValue<string>) => Renderable;
    in2: (value: SplitNValue<string>) => Renderable;
    intercept: (value: SplitNValue<string | number>) => Renderable;
    k: (value: SplitNValue<string | number>) => Renderable;
    k1: (value: SplitNValue<string | number>) => Renderable;
    k2: (value: SplitNValue<string | number>) => Renderable;
    k3: (value: SplitNValue<string | number>) => Renderable;
    k4: (value: SplitNValue<string | number>) => Renderable;
    kernelMatrix: (value: SplitNValue<string>) => Renderable;
    kernelUnitLength: (value: SplitNValue<string | number>) => Renderable;
    kerning: (value: SplitNValue<string | number>) => Renderable;
    keyPoints: (value: SplitNValue<string>) => Renderable;
    keySplines: (value: SplitNValue<string>) => Renderable;
    keyTimes: (value: SplitNValue<string>) => Renderable;
    lang: (value: SplitNValue<string>) => Renderable;
    lengthAdjust: (value: SplitNValue<"spacing" | "spacingAndGlyphs">) => Renderable;
    'letter-spacing': (value: SplitNValue<string | number>) => Renderable;
    'lighting-color': (value: SplitNValue<string>) => Renderable;
    limitingConeAngle: (value: SplitNValue<string | number>) => Renderable;
    local: (value: SplitNValue<string>) => Renderable;
    'marker-end': (value: SplitNValue<string>) => Renderable;
    markerHeight: (value: SplitNValue<string | number>) => Renderable;
    'marker-mid': (value: SplitNValue<string>) => Renderable;
    'marker-start': (value: SplitNValue<string>) => Renderable;
    markerUnits: (value: SplitNValue<"strokeWidth" | "userSpaceOnUse">) => Renderable;
    markerWidth: (value: SplitNValue<string | number>) => Renderable;
    mask: (value: SplitNValue<string>) => Renderable;
    maskContentUnits: (value: SplitNValue<"userSpaceOnUse" | "objectBoundingBox">) => Renderable;
    maskUnits: (value: SplitNValue<"userSpaceOnUse" | "objectBoundingBox">) => Renderable;
    mathematical: (value: SplitNValue<string | number>) => Renderable;
    max: (value: SplitNValue<string>) => Renderable;
    media: (value: SplitNValue<string>) => Renderable;
    method: (value: SplitNValue<"align" | "stretch">) => Renderable;
    min: (value: SplitNValue<string>) => Renderable;
    mode: (value: SplitNValue<"normal" | "multiply" | "screen" | "darken" | "lighten">) => Renderable;
    name: (value: SplitNValue<string>) => Renderable;
    numOctaves: (value: SplitNValue<string | number>) => Renderable;
    offset: (value: SplitNValue<string | number>) => Renderable;
    opacity: (value: SplitNValue<string | number>) => Renderable;
    operator: (value: SplitNValue<"over" | "in" | "out" | "atop" | "xor" | "lighter" | "arithmetic">) => Renderable;
    order: (value: SplitNValue<string | number>) => Renderable;
    orient: (value: SplitNValue<string | number>) => Renderable;
    orientation: (value: SplitNValue<"h" | "v">) => Renderable;
    origin: (value: SplitNValue<string>) => Renderable;
    overflow: (value: SplitNValue<"auto" | "hidden" | "scroll" | "inherit" | "visible">) => Renderable;
    'overline-position': (value: SplitNValue<string | number>) => Renderable;
    'overline-thickness': (value: SplitNValue<string | number>) => Renderable;
    'paint-order': (value: SplitNValue<string>) => Renderable;
    'panose-1': (value: SplitNValue<string>) => Renderable;
    path: (value: SplitNValue<string>) => Renderable;
    pathLength: (value: SplitNValue<string | number>) => Renderable;
    patternContentUnits: (value: SplitNValue<"userSpaceOnUse" | "objectBoundingBox">) => Renderable;
    patternTransform: (value: SplitNValue<string>) => Renderable;
    patternUnits: (value: SplitNValue<"userSpaceOnUse" | "objectBoundingBox">) => Renderable;
    'pointer-events': (value: SplitNValue<"none" | "all" | "fill" | "stroke" | "inherit" | "visible" | "bounding-box" | "visiblePainted" | "visibleFill" | "visibleStroke" | "painted">) => Renderable;
    points: (value: SplitNValue<string>) => Renderable;
    pointsAtX: (value: SplitNValue<string | number>) => Renderable;
    pointsAtY: (value: SplitNValue<string | number>) => Renderable;
    pointsAtZ: (value: SplitNValue<string | number>) => Renderable;
    preserveAlpha: (value: SplitNValue<string | boolean>) => Renderable;
    preserveAspectRatio: (value: SplitNValue<string>) => Renderable;
    primitiveUnits: (value: SplitNValue<"userSpaceOnUse" | "objectBoundingBox">) => Renderable;
    r: (value: SplitNValue<string | number>) => Renderable;
    radius: (value: SplitNValue<string | number>) => Renderable;
    refX: (value: SplitNValue<string | number>) => Renderable;
    refY: (value: SplitNValue<string | number>) => Renderable;
    'rendering-intent': (value: SplitNValue<"auto" | "inherit" | "perceptual" | "relative-colorimetric" | "saturation" | "absolute-colorimetric">) => Renderable;
    repeatCount: (value: SplitNValue<string | number>) => Renderable;
    repeatDur: (value: SplitNValue<string>) => Renderable;
    requiredExtensions: (value: SplitNValue<string>) => Renderable;
    requiredFeatures: (value: SplitNValue<string>) => Renderable;
    restart: (value: SplitNValue<"always" | "whenNotActive" | "never">) => Renderable;
    result: (value: SplitNValue<string>) => Renderable;
    role: (value: SplitNValue<string>) => Renderable;
    rotate: (value: SplitNValue<string | number>) => Renderable;
    rx: (value: SplitNValue<string | number>) => Renderable;
    ry: (value: SplitNValue<string | number>) => Renderable;
    scale: (value: SplitNValue<string | number>) => Renderable;
    seed: (value: SplitNValue<string | number>) => Renderable;
    'shape-rendering': (value: SplitNValue<"auto" | "inherit" | "optimizeSpeed" | "crispEdges" | "geometricPrecision">) => Renderable;
    side: (value: SplitNValue<"left" | "right">) => Renderable;
    slope: (value: SplitNValue<string | number>) => Renderable;
    spacing: (value: SplitNValue<"auto" | "exact">) => Renderable;
    specularConstant: (value: SplitNValue<string | number>) => Renderable;
    specularExponent: (value: SplitNValue<string | number>) => Renderable;
    speed: (value: SplitNValue<string | number>) => Renderable;
    spreadMethod: (value: SplitNValue<"pad" | "reflect" | "repeat">) => Renderable;
    startOffset: (value: SplitNValue<string | number>) => Renderable;
    stdDeviation: (value: SplitNValue<string | number>) => Renderable;
    stemh: (value: SplitNValue<string | number>) => Renderable;
    stemv: (value: SplitNValue<string | number>) => Renderable;
    stitchTiles: (value: SplitNValue<"noStitch" | "stitch">) => Renderable;
    'stop-color': (value: SplitNValue<string>) => Renderable;
    'stop-opacity': (value: SplitNValue<string | number>) => Renderable;
    'strikethrough-position': (value: SplitNValue<string | number>) => Renderable;
    'strikethrough-thickness': (value: SplitNValue<string | number>) => Renderable;
    string: (value: SplitNValue<string>) => Renderable;
    stroke: (value: SplitNValue<string>) => Renderable;
    'stroke-dasharray': (value: SplitNValue<string>) => Renderable;
    'stroke-dashoffset': (value: SplitNValue<string | number>) => Renderable;
    'stroke-linecap': (value: SplitNValue<"inherit" | "butt" | "round" | "square">) => Renderable;
    'stroke-linejoin': (value: SplitNValue<"inherit" | "round" | "miter" | "bevel">) => Renderable;
    'stroke-miterlimit': (value: SplitNValue<string | number>) => Renderable;
    'stroke-opacity': (value: SplitNValue<string | number>) => Renderable;
    'stroke-width': (value: SplitNValue<string | number>) => Renderable;
    style: (value: SplitNValue<string>) => Renderable;
    surfaceScale: (value: SplitNValue<string | number>) => Renderable;
    systemLanguage: (value: SplitNValue<string>) => Renderable;
    tabindex: (value: SplitNValue<string | number>) => Renderable;
    tableValues: (value: SplitNValue<string>) => Renderable;
    target: (value: SplitNValue<string>) => Renderable;
    targetX: (value: SplitNValue<string | number>) => Renderable;
    targetY: (value: SplitNValue<string | number>) => Renderable;
    'text-anchor': (value: SplitNValue<"middle" | "inherit" | "start" | "end">) => Renderable;
    'text-decoration': (value: SplitNValue<"none" | "inherit" | "underline" | "overline" | "line-through" | "blink">) => Renderable;
    textLength: (value: SplitNValue<string | number>) => Renderable;
    'text-rendering': (value: SplitNValue<"auto" | "inherit" | "optimizeSpeed" | "geometricPrecision" | "optimizeLegibility">) => Renderable;
    title: (value: SplitNValue<string>) => Renderable;
    to: (value: SplitNValue<string>) => Renderable;
    transform: (value: SplitNValue<string>) => Renderable;
    'transform-origin': (value: SplitNValue<string>) => Renderable;
    type: (value: SplitNValue<string>) => Renderable;
    u1: (value: SplitNValue<string>) => Renderable;
    u2: (value: SplitNValue<string>) => Renderable;
    'underline-position': (value: SplitNValue<string | number>) => Renderable;
    'underline-thickness': (value: SplitNValue<string | number>) => Renderable;
    unicode: (value: SplitNValue<string>) => Renderable;
    'unicode-bidi': (value: SplitNValue<"normal" | "inherit" | "embed" | "isolate" | "bidi-override" | "isolate-override" | "plaintext">) => Renderable;
    'unicode-range': (value: SplitNValue<string>) => Renderable;
    'units-per-em': (value: SplitNValue<string | number>) => Renderable;
    'v-alphabetic': (value: SplitNValue<string | number>) => Renderable;
    values: (value: SplitNValue<string>) => Renderable;
    'vector-effect': (value: SplitNValue<"none" | "non-scaling-stroke" | "non-scaling-size" | "non-rotation" | "fixed-position">) => Renderable;
    version: (value: SplitNValue<string>) => Renderable;
    'vert-adv-y': (value: SplitNValue<string | number>) => Renderable;
    'vert-origin-x': (value: SplitNValue<string | number>) => Renderable;
    'vert-origin-y': (value: SplitNValue<string | number>) => Renderable;
    'v-hanging': (value: SplitNValue<string | number>) => Renderable;
    'v-ideographic': (value: SplitNValue<string | number>) => Renderable;
    viewBox: (value: SplitNValue<string>) => Renderable;
    viewTarget: (value: SplitNValue<string>) => Renderable;
    visibility: (value: SplitNValue<"hidden" | "inherit" | "visible" | "collapse">) => Renderable;
    'v-mathematical': (value: SplitNValue<string | number>) => Renderable;
    width: (value: SplitNValue<string | number>) => Renderable;
    widths: (value: SplitNValue<string>) => Renderable;
    'word-spacing': (value: SplitNValue<string | number>) => Renderable;
    'writing-mode': (value: SplitNValue<"inherit" | "lr-tb" | "rl-tb" | "tb-rl" | "lr" | "rl" | "tb">) => Renderable;
    x1: (value: SplitNValue<string | number>) => Renderable;
    x2: (value: SplitNValue<string | number>) => Renderable;
    x: (value: SplitNValue<string | number>) => Renderable;
    xChannelSelector: (value: SplitNValue<"R" | "G" | "B" | "A">) => Renderable;
    'x-height': (value: SplitNValue<string | number>) => Renderable;
    'xlink:actuate': (value: SplitNValue<"none" | "other" | "onLoad" | "onRequest">) => Renderable;
    'xlink:arcrole': (value: SplitNValue<string>) => Renderable;
    'xlink:href': (value: SplitNValue<string>) => Renderable;
    'xlink:role': (value: SplitNValue<string>) => Renderable;
    'xlink:show': (value: SplitNValue<"none" | "other" | "replace" | "embed" | "new">) => Renderable;
    'xlink:title': (value: SplitNValue<string>) => Renderable;
    'xlink:type': (value: SplitNValue<"none" | "simple" | "extended" | "locator" | "arc" | "resource" | "title">) => Renderable;
    xlinkActuate: (value: SplitNValue<"none" | "other" | "onLoad" | "onRequest">) => Renderable;
    xlinkArcrole: (value: SplitNValue<string>) => Renderable;
    xlinkHref: (value: SplitNValue<string>) => Renderable;
    xlinkRole: (value: SplitNValue<string>) => Renderable;
    xlinkShow: (value: SplitNValue<"none" | "other" | "replace" | "embed" | "new">) => Renderable;
    xlinkTitle: (value: SplitNValue<string>) => Renderable;
    xlinkType: (value: SplitNValue<"none" | "simple" | "extended" | "locator" | "arc" | "resource" | "title">) => Renderable;
    'xml:base': (value: SplitNValue<string>) => Renderable;
    'xml:lang': (value: SplitNValue<string>) => Renderable;
    'xml:space': (value: SplitNValue<"default" | "preserve">) => Renderable;
    xmlBase: (value: SplitNValue<string>) => Renderable;
    xmlLang: (value: SplitNValue<string>) => Renderable;
    xmlns: (value: SplitNValue<string>) => Renderable;
    'xmlns:xlink': (value: SplitNValue<string>) => Renderable;
    xmlnsXlink: (value: SplitNValue<string>) => Renderable;
    xmlSpace: (value: SplitNValue<"default" | "preserve">) => Renderable;
    y1: (value: SplitNValue<string | number>) => Renderable;
    y2: (value: SplitNValue<string | number>) => Renderable;
    y: (value: SplitNValue<string | number>) => Renderable;
    yChannelSelector: (value: SplitNValue<"R" | "G" | "B" | "A">) => Renderable;
    z: (value: SplitNValue<string | number>) => Renderable;
    zoomAndPan: (value: SplitNValue<"disable" | "magnify">) => Renderable;
};
/**
 * Creates a renderable for a MathML attribute with the specified name and value.
 *
 * This is the functional equivalent of using `mathAttr[name](value)`.
 *
 * @param name - The name of the MathML attribute.
 * @param value - The value of the attribute (can be a literal or Signal).
 * @returns A renderable that sets the MathML attribute.
 * @example
 * ```ts
 * const mi = math.mi(
 *   MathAttr('mathvariant', 'bold'),
 *   MathAttr('mathsize', sizeSignal),
 * )
 * ```
 * @public
 */
export declare const MathAttr: (name: string, value: unknown) => Renderable;
/**
 * An object that provides attribute functions for MathML tags.
 *
 * @example
 * ```ts
 * const math = html.math(
 *  mathAttr.mathvariant('bold'),
 *  mathAttr.mathsize(size), // where size is a `Signal<number>`
 * // ...
 * )
 * ```
 * @public
 */
export declare const mathAttr: {
    accent: (value: SplitNValue<string | boolean>) => Renderable;
    accentunder: (value: SplitNValue<string | boolean>) => Renderable;
    actiontype: (value: SplitNValue<"statusline" | "tooltip" | "input">) => Renderable;
    align: (value: SplitNValue<"left" | "right" | "center">) => Renderable;
    altimg: (value: SplitNValue<string>) => Renderable;
    altimgheight: (value: SplitNValue<string>) => Renderable;
    altimgvalign: (value: SplitNValue<string>) => Renderable;
    altimgwidth: (value: SplitNValue<string>) => Renderable;
    alttext: (value: SplitNValue<string>) => Renderable;
    background: (value: SplitNValue<string>) => Renderable;
    base: (value: SplitNValue<string>) => Renderable;
    bevelled: (value: SplitNValue<string | boolean>) => Renderable;
    charalign: (value: SplitNValue<"left" | "right" | "center">) => Renderable;
    class: (value: SplitNValue<string>) => Renderable;
    close: (value: SplitNValue<string>) => Renderable;
    color: (value: SplitNValue<string>) => Renderable;
    columnalign: (value: SplitNValue<string>) => Renderable;
    columnlines: (value: SplitNValue<string>) => Renderable;
    columnspacing: (value: SplitNValue<string>) => Renderable;
    columnspan: (value: SplitNValue<string | number>) => Renderable;
    columnwidth: (value: SplitNValue<string>) => Renderable;
    crossout: (value: SplitNValue<string>) => Renderable;
    decimalpoint: (value: SplitNValue<string>) => Renderable;
    definitionurl: (value: SplitNValue<string>) => Renderable;
    denomalign: (value: SplitNValue<"left" | "right" | "center">) => Renderable;
    depth: (value: SplitNValue<string>) => Renderable;
    dir: (value: SplitNValue<"ltr" | "rtl">) => Renderable;
    display: (value: SplitNValue<"inline" | "block">) => Renderable;
    displaystyle: (value: SplitNValue<string | boolean>) => Renderable;
    edge: (value: SplitNValue<"left" | "right">) => Renderable;
    encoding: (value: SplitNValue<string>) => Renderable;
    equalcolumns: (value: SplitNValue<string | boolean>) => Renderable;
    equalrows: (value: SplitNValue<string | boolean>) => Renderable;
    fence: (value: SplitNValue<string | boolean>) => Renderable;
    fontfamily: (value: SplitNValue<string>) => Renderable;
    fontsize: (value: SplitNValue<string>) => Renderable;
    fontstyle: (value: SplitNValue<"normal" | "italic">) => Renderable;
    fontweight: (value: SplitNValue<"normal" | "bold">) => Renderable;
    form: (value: SplitNValue<"prefix" | "infix" | "postfix">) => Renderable;
    frame: (value: SplitNValue<string>) => Renderable;
    groupalign: (value: SplitNValue<string>) => Renderable;
    height: (value: SplitNValue<string>) => Renderable;
    href: (value: SplitNValue<string>) => Renderable;
    id: (value: SplitNValue<string>) => Renderable;
    indentalign: (value: SplitNValue<"left" | "right" | "auto" | "center" | "id">) => Renderable;
    indentalignfirst: (value: SplitNValue<"left" | "right" | "auto" | "center" | "id" | "indentaling">) => Renderable;
    indentalignlast: (value: SplitNValue<"left" | "right" | "auto" | "center" | "id" | "indentaling">) => Renderable;
    indentshift: (value: SplitNValue<string>) => Renderable;
    indentshiftfirst: (value: SplitNValue<string>) => Renderable;
    indentshiftlast: (value: SplitNValue<string>) => Renderable;
    indenttarget: (value: SplitNValue<string>) => Renderable;
    infixlinebreakstyle: (value: SplitNValue<"before" | "after" | "duplicate">) => Renderable;
    intent: (value: SplitNValue<string>) => Renderable;
    largeop: (value: SplitNValue<string | boolean>) => Renderable;
    leftoverhang: (value: SplitNValue<string>) => Renderable;
    length: (value: SplitNValue<string>) => Renderable;
    linebreak: (value: SplitNValue<"auto" | "newline" | "nobreak" | "goodbreak" | "badbreak">) => Renderable;
    linebreakmultchar: (value: SplitNValue<string>) => Renderable;
    linebreakstyle: (value: SplitNValue<"before" | "after" | "duplicate" | "infixlinebreakstyle">) => Renderable;
    lineleading: (value: SplitNValue<string>) => Renderable;
    linethickness: (value: SplitNValue<string>) => Renderable;
    location: (value: SplitNValue<string>) => Renderable;
    longdivstyle: (value: SplitNValue<"lefttop" | "stackedrightright" | "mediumstackedrightright" | "shortstackedrightright" | "righttop">) => Renderable;
    lquote: (value: SplitNValue<string>) => Renderable;
    lspace: (value: SplitNValue<string>) => Renderable;
    mathbackground: (value: SplitNValue<string>) => Renderable;
    mathcolor: (value: SplitNValue<string>) => Renderable;
    mathdepth: (value: SplitNValue<string>) => Renderable;
    mathsize: (value: SplitNValue<string>) => Renderable;
    mathvariant: (value: SplitNValue<"normal" | "italic" | "bold" | "bold-italic" | "double-struck" | "bold-fraktur" | "script" | "bold-script" | "fraktur" | "sans-serif" | "bold-sans-serif" | "sans-serif-italic" | "sans-serif-bold-italic" | "monospace" | "initial" | "tailed" | "looped" | "stretched">) => Renderable;
    maxsize: (value: SplitNValue<string>) => Renderable;
    maxwidth: (value: SplitNValue<string>) => Renderable;
    minlabelspacing: (value: SplitNValue<string>) => Renderable;
    minsize: (value: SplitNValue<string>) => Renderable;
    movablelimits: (value: SplitNValue<string | boolean>) => Renderable;
    mslinethickness: (value: SplitNValue<string>) => Renderable;
    notation: (value: SplitNValue<string>) => Renderable;
    numalign: (value: SplitNValue<"left" | "right" | "center">) => Renderable;
    open: (value: SplitNValue<string>) => Renderable;
    other: (value: SplitNValue<string>) => Renderable;
    overflow: (value: SplitNValue<"scale" | "linebreak" | "scroll" | "elide" | "truncate">) => Renderable;
    position: (value: SplitNValue<string>) => Renderable;
    rightoverhang: (value: SplitNValue<string>) => Renderable;
    rowalign: (value: SplitNValue<string>) => Renderable;
    rowlines: (value: SplitNValue<string>) => Renderable;
    rowspacing: (value: SplitNValue<string>) => Renderable;
    rowspan: (value: SplitNValue<string | number>) => Renderable;
    rquote: (value: SplitNValue<string>) => Renderable;
    rspace: (value: SplitNValue<string>) => Renderable;
    scriptlevel: (value: SplitNValue<string>) => Renderable;
    scriptminsize: (value: SplitNValue<string>) => Renderable;
    scriptsizemultiplier: (value: SplitNValue<string>) => Renderable;
    selection: (value: SplitNValue<string>) => Renderable;
    separator: (value: SplitNValue<string | boolean>) => Renderable;
    separators: (value: SplitNValue<string>) => Renderable;
    shift: (value: SplitNValue<string>) => Renderable;
    side: (value: SplitNValue<"left" | "right" | "leftoverlap" | "rightoverlap">) => Renderable;
    stackalign: (value: SplitNValue<"left" | "right" | "center" | "decimalpoint">) => Renderable;
    stretchy: (value: SplitNValue<string | boolean>) => Renderable;
    style: (value: SplitNValue<string>) => Renderable;
    subscriptshift: (value: SplitNValue<string>) => Renderable;
    superscriptshift: (value: SplitNValue<string>) => Renderable;
    symmetric: (value: SplitNValue<string | boolean>) => Renderable;
    type: (value: SplitNValue<string>) => Renderable;
    valign: (value: SplitNValue<"bottom" | "top" | "center" | "baseline" | "axis">) => Renderable;
    voffset: (value: SplitNValue<string>) => Renderable;
    width: (value: SplitNValue<string>) => Renderable;
    xlink: (value: SplitNValue<string>) => Renderable;
    xmlns: (value: SplitNValue<string>) => Renderable;
    xref: (value: SplitNValue<string>) => Renderable;
};
/**
 * Creates a renderable that toggles a CSS class based on O(1) selection matching.
 *
 * Instead of creating a `computed` per row that re-evaluates when the source changes
 * (O(n) for n rows), this uses `createSelector` from `@tempots/core` to only update
 * the two rows that actually change (the previously selected and newly selected).
 *
 * A shared selector is automatically created per source signal and cached via WeakMap.
 *
 * @param source - The signal containing the currently selected value.
 * @param key - The static key to compare against (e.g., the row's ID).
 * @param activeClass - The CSS class(es) to toggle (space-separated). Defaults to `'danger'`.
 * @param equals - Optional equality function. Defaults to `===`.
 * @returns A renderable that adds/removes the class based on selection state.
 *
 * @example
 * ```ts
 * const selected = prop(0)
 * html.tr(
 *   selectedClass(selected, item.id, 'danger'),
 *   // ...
 * )
 * ```
 * @public
 */
export declare const selectedClass: <T>(source: Signal<T>, key: T, activeClass?: string, equals?: (a: T, b: T) => boolean) => Renderable;