vira/dist/elements/vira-tag.element.d.ts

A simple and highly versatile design system using element-vir.

import { type PartialWithUndefined, type Primitive, type RequireExactlyOne } from '@augment-vir/common';
import { ViraColorVariant, ViraEmphasis, ViraSize } from '../styles/form-variants.js';
import { ViraThemeColorName } from '../styles/vira-color-theme-object.js';
/**
 * A "tag" or "label" or "pill" element. Supports many variations including non-clickable,
 * selectable, and cancellable variations.
 *
 * @category Elements
 * @see https://electrovir.github.io/vira/book/elements/vira-tag
 */
export declare const ViraTag: import("element-vir").DeclarativeElementDefinition<"vira-tag", {
    text: Primitive;
} & PartialWithUndefined<{
    isClickable: RequireExactlyOne<{
        /**
         * If set, the tag can be toggled on and off. If toggled on, a checkmark is shown.
         *
         * - `true`: show a checkmark
         * - `false`: hide the checkmark
         */
        selected: boolean;
        /** If set, the tag shows an x. Clicks indicate removing the tag entirely. */
        cancellable: true;
    }>;
    /** @default ViraSize.Medium */
    size: ViraSize;
    /** @default ViraEmphasis.Standard */
    emphasis: ViraEmphasis;
    /**
     * Color scheme. Accepts any {@link ViraColorVariant} or a {@link ViraThemeColorName} (e.g.,
     * `ViraThemeColorName.blue`).
     *
     * @default ViraColorVariant.Plain
     */
    color: ViraColorVariant | ViraThemeColorName;
    disabled: boolean;
}>, {}, {
    toggle: import("element-vir").DefineEvent<boolean>;
    cancel: import("element-vir").DefineEvent<void>;
}, "vira-tag-selectable" | "vira-tag-checked" | "vira-tag-not-checked" | "vira-tag-cancellable" | "vira-tag-not-clickable" | "vira-tag-disabled" | "vira-tag-size-large" | "vira-tag-size-medium" | "vira-tag-size-small" | "vira-tag-emphasis-standard" | "vira-tag-emphasis-subtle" | "vira-tag-color-red" | "vira-tag-color-yellow" | "vira-tag-color-green" | "vira-tag-color-blue" | "vira-tag-color-brand" | "vira-tag-color-purple" | "vira-tag-color-plain" | "vira-tag-color-neutral" | "vira-tag-color-teal" | "vira-tag-color-pink" | "vira-tag-color-grey", "vira-tag-text-color" | "vira-tag-background-color" | "vira-tag-border-color" | "vira-tag-hover-text-color" | "vira-tag-hover-background-color" | "vira-tag-hover-border-color" | "vira-tag-active-text-color" | "vira-tag-active-background-color" | "vira-tag-active-border-color" | "vira-tag-disabled-text-color" | "vira-tag-disabled-background-color" | "vira-tag-disabled-border-color" | "vira-tag-border-radius" | "vira-tag-gap" | "vira-tag-horizontal-padding" | "vira-tag-border-width", readonly [], readonly []>;