vira 29.5.6 → 29.6.1

package/dist/elements/index.d.ts

@@ -23,3 +23,4 @@ export * from './vira-modal.element.js';
 export * from './vira-overflow-switch.element.js';
 export * from './vira-progress.element.js';
 export * from './vira-select.element.js';
+export * from './vira-tag.element.js';

package/dist/elements/index.js

@@ -23,3 +23,4 @@ export * from './vira-modal.element.js';
 export * from './vira-overflow-switch.element.js';
 export * from './vira-progress.element.js';
 export * from './vira-select.element.js';
+export * from './vira-tag.element.js';

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

@@ -0,0 +1,35 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type Primitive, type RequireExactlyOne } from 'type-fest';
+import { ViraColorVariant, ViraEmphasis, ViraSize } from '../styles/form-variants.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", Readonly<{
+    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;
+    /** @default ViraColor.Accent */
+    color: ViraColorVariant;
+    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-accent" | "vira-tag-color-plain" | "vira-tag-color-neutral" | "vira-tag-color-danger" | "vira-tag-color-warning" | "vira-tag-color-positive", "vira-tag-text-color" | "vira-tag-background-color" | "vira-tag-border-radius" | "vira-tag-gap" | "vira-tag-horizontal-padding" | "vira-tag-border-width", readonly [], readonly []>;

package/dist/elements/vira-tag.element.js

@@ -0,0 +1,294 @@
+import { check } from '@augment-vir/assert';
+import { colorCss, ContrastLevelName } from '@electrovir/color';
+import { css, defineElementEvent, html, listen, unsafeCSS } from 'element-vir';
+import { themeDefaultKey } from 'theme-vir';
+import { Check16Icon } from '../icons/icon-svgs/check-16.icon.js';
+import { CloseX16Icon } from '../icons/icon-svgs/close-x-16.icon.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { ViraColorVariant, viraColorVariantToColorName, ViraEmphasis, ViraSize, viraSizeHeights, } from '../styles/form-variants.js';
+import { noNativeFormStyles } from '../styles/native-styles.js';
+import { noUserSelect } from '../styles/user-select.js';
+import { viraThemeByKeys } from '../styles/vira-color-theme-object.js';
+import { viraTheme } from '../styles/vira-color-theme.js';
+import { defineViraElement } from './define-vira-element.js';
+import { ViraIcon } from './vira-icon.element.js';
+// need to add hover colors to unchecked tags
+function generateThemeCss(colorVariant) {
+    if (!check.hasKey(viraColorVariantToColorName, colorVariant)) {
+        throw new Error(`No ViraTag color for variant '${colorVariant}'`);
+    }
+    const viraThemeColorKey = viraColorVariantToColorName[colorVariant];
+    return css `
+        :host(
+                .vira-tag-color-${unsafeCSS(colorVariant)}.vira-tag-emphasis-${unsafeCSS(ViraEmphasis.Standard)}
+            )
+            button {
+            ${colorCss(viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.NonBodyText])}
+            border-color: ${viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.NonBodyText].background.value};
+
+            &:hover {
+                ${colorCss(viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.Header])}
+                border-color: ${viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.Header].background.value};
+            }
+            &:active {
+                ${colorCss(viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.NonBodyText])}
+                border-color: ${viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.NonBodyText].background.value};
+            }
+        }
+        :host(
+                .vira-tag-color-${unsafeCSS(colorVariant)}.vira-tag-emphasis-${unsafeCSS(ViraEmphasis.Subtle)}
+            )
+            button {
+            ${colorCss(viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.BodyText])}
+            border-color: ${viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.BodyText].background.value};
+
+            &:hover {
+                ${colorCss(viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.NonBodyText])}
+                border-color: ${viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.NonBodyText].background.value};
+            }
+            &:active {
+                ${colorCss(viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.BodyText])}
+                border-color: ${viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.BodyText].background.value};
+            }
+        }
+        :host(
+                .vira-tag-color-${unsafeCSS(colorVariant)}.vira-tag-not-checked.vira-tag-not-checked.vira-tag-not-checked
+            )
+            button {
+            color: ${viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.BodyText]
+        .foreground.value};
+            background-color: transparent;
+            border-color: ${viraThemeByKeys[viraThemeColorKey]['on-self'][ContrastLevelName.BodyText].background.value};
+
+            &:hover {
+                background-color: ${viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.Invisible].background.value};
+            }
+            &:active {
+                background-color: ${viraThemeByKeys[viraThemeColorKey]['behind-bg'][ContrastLevelName.Decoration].background.value};
+            }
+        }
+    `;
+}
+function generateAutomaticViraTagThemeVariants() {
+    return unsafeCSS([
+        ViraColorVariant.Accent,
+        ViraColorVariant.Danger,
+        ViraColorVariant.Neutral,
+        ViraColorVariant.Positive,
+        ViraColorVariant.Warning,
+    ]
+        .map((variant) => generateThemeCss(variant))
+        .join(' '));
+}
+/**
+ * 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 const ViraTag = defineViraElement()({
+    tagName: 'vira-tag',
+    cssVars: {
+        'vira-tag-text-color': 'white',
+        'vira-tag-background-color': 'black',
+        'vira-tag-border-radius': '1000px',
+        'vira-tag-gap': '6px',
+        'vira-tag-horizontal-padding': '12px',
+        'vira-tag-border-width': '2px',
+    },
+    events: {
+        toggle: defineElementEvent(),
+        cancel: defineElementEvent(),
+    },
+    hostClasses: {
+        'vira-tag-selectable': ({ inputs }) => check.isBoolean(inputs.isClickable?.selected),
+        'vira-tag-checked': ({ inputs }) => !!inputs.isClickable?.selected,
+        'vira-tag-not-checked': ({ inputs }) => inputs.isClickable?.selected === false,
+        'vira-tag-cancellable': ({ inputs }) => !!inputs.isClickable?.cancellable,
+        'vira-tag-not-clickable': ({ inputs }) => !inputs.isClickable,
+        'vira-tag-disabled': ({ inputs }) => !!inputs.disabled,
+        'vira-tag-size-large': ({ inputs }) => inputs.size === ViraSize.Large,
+        'vira-tag-size-medium': ({ inputs }) => !inputs.size || inputs.size === ViraSize.Medium,
+        'vira-tag-size-small': ({ inputs }) => inputs.size === ViraSize.Small,
+        'vira-tag-emphasis-standard': ({ inputs }) => !inputs.emphasis || inputs.emphasis === ViraEmphasis.Standard,
+        'vira-tag-emphasis-subtle': ({ inputs }) => inputs.emphasis === ViraEmphasis.Subtle,
+        'vira-tag-color-accent': ({ inputs }) => !inputs.color || inputs.color === ViraColorVariant.Accent,
+        'vira-tag-color-plain': ({ inputs }) => inputs.color === ViraColorVariant.Plain,
+        'vira-tag-color-neutral': ({ inputs }) => inputs.color === ViraColorVariant.Neutral,
+        'vira-tag-color-danger': ({ inputs }) => inputs.color === ViraColorVariant.Danger,
+        'vira-tag-color-warning': ({ inputs }) => inputs.color === ViraColorVariant.Warning,
+        'vira-tag-color-positive': ({ inputs }) => inputs.color === ViraColorVariant.Positive,
+    },
+    styles: ({ cssVars, hostClasses }) => css `
+        :host {
+            display: flex;
+        }
+
+        button {
+            ${noNativeFormStyles}
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: ${cssVars['vira-tag-gap'].value};
+            border-radius: ${cssVars['vira-tag-border-radius'].value};
+            border-width: ${cssVars['vira-tag-border-width'].value};
+            border-style: solid;
+            border-color: transparent;
+            color: ${cssVars['vira-tag-text-color'].value};
+            background-color: ${cssVars['vira-tag-background-color'].value};
+            box-sizing: border-box;
+            padding: 0 ${cssVars['vira-tag-horizontal-padding'].value};
+
+            &[disabled] {
+                cursor: default;
+                pointer-events: none;
+            }
+        }
+
+        .cancel-x,
+        .selected-check,
+        .text {
+            height: 0;
+            display: flex;
+            align-items: center;
+        }
+
+        .cancel-x {
+            display: none;
+            margin-right: -2px;
+        }
+
+        .selected-check {
+            margin-left: -2px;
+            display: none;
+            visibility: hidden;
+        }
+
+        ${hostClasses['vira-tag-selectable'].selector} .selected-check {
+            display: flex;
+        }
+        ${hostClasses['vira-tag-checked'].selector} .selected-check {
+            visibility: visible;
+        }
+        ${hostClasses['vira-tag-cancellable'].selector} .cancel-x {
+            display: flex;
+        }
+        ${hostClasses['vira-tag-size-large'].selector} button {
+            height: ${viraSizeHeights[ViraSize.Large]}px;
+            font-size: ${viraFormCssVars['vira-form-large-text-size'].value};
+            padding: 0 var(${cssVars['vira-tag-horizontal-padding'].name}, 16px);
+        }
+        ${hostClasses['vira-tag-size-medium'].selector} button {
+            height: ${viraSizeHeights[ViraSize.Medium]}px;
+            font-size: ${viraFormCssVars['vira-form-medium-text-size'].value};
+        }
+        ${hostClasses['vira-tag-size-small'].selector} button {
+            height: ${viraSizeHeights[ViraSize.Small]}px;
+            font-size: ${viraFormCssVars['vira-form-small-text-size'].value};
+        }
+
+        ${generateAutomaticViraTagThemeVariants()}
+
+        :host(.${hostClasses['vira-tag-disabled'].name}.${hostClasses['vira-tag-disabled']
+        .name}.${hostClasses['vira-tag-disabled'].name}.${hostClasses['vira-tag-disabled']
+        .name}) {
+            cursor: not-allowed;
+            ${noUserSelect}
+
+            & button {
+                ${colorCss(viraTheme.colors['vira-grey-behind-bg-decoration'])}
+                border-color: ${viraTheme.colors['vira-grey-behind-bg-decoration'].background.value}
+            }
+
+            &.${hostClasses['vira-tag-emphasis-subtle'].name} button {
+                ${colorCss(viraTheme.colors['vira-grey-behind-bg-decoration'])}
+                border-color: ${viraTheme.colors['vira-grey-behind-bg-decoration'].background.value}
+            }
+        }
+
+        :host(
+                .${hostClasses['vira-tag-color-plain'].name}.vira-tag-emphasis-${unsafeCSS(ViraEmphasis.Standard)}
+            )
+            button {
+            ${colorCss(viraTheme.inverse[themeDefaultKey])};
+            border-color: ${viraTheme.inverse[themeDefaultKey].background.value};
+
+            &:hover {
+                ${colorCss(viraTheme.colors['vira-grey-behind-bg-non-body'])};
+                border-color: ${viraTheme.colors['vira-grey-behind-bg-non-body'].background.value};
+            }
+            &:active {
+                ${colorCss(viraTheme.inverse[themeDefaultKey])};
+                border-color: ${viraTheme.inverse[themeDefaultKey].background.value};
+            }
+        }
+        :host(
+                .${hostClasses['vira-tag-color-plain'].name}.vira-tag-emphasis-${unsafeCSS(ViraEmphasis.Subtle)}
+            )
+            button {
+            background-color: transparent;
+            color: ${viraTheme.colors[themeDefaultKey].foreground.value};
+            border-color: transparent;
+        }
+        :host(
+                .${hostClasses['vira-tag-color-plain'].name}.${hostClasses['vira-tag-not-checked']
+        .name}.${hostClasses['vira-tag-not-checked'].name}.${hostClasses['vira-tag-not-checked'].name}
+            )
+            button {
+            color: ${viraTheme.colors[themeDefaultKey].foreground.value};
+            background-color: transparent;
+            border-color: transparent;
+        }
+        :host(
+                .${hostClasses['vira-tag-color-plain'].name}.vira-tag-emphasis-${unsafeCSS(ViraEmphasis.Subtle)}
+            )
+            button,
+        :host(
+                .${hostClasses['vira-tag-color-plain'].name}.${hostClasses['vira-tag-not-checked']
+        .name}.${hostClasses['vira-tag-not-checked'].name}.${hostClasses['vira-tag-not-checked'].name}
+            )
+            button {
+            &:hover {
+                ${colorCss(viraTheme.colors['vira-grey-behind-fg-small-body'])}
+                border-color: ${viraTheme.colors['vira-grey-behind-fg-small-body'].background
+        .value};
+            }
+            &:active {
+                ${colorCss(viraTheme.colors['vira-grey-behind-fg-body'])}
+                border-color: ${viraTheme.colors['vira-grey-behind-fg-body'].background.value};
+            }
+        }
+    `,
+    render({ inputs, dispatch, events }) {
+        const disabled = !inputs.isClickable || !!inputs.disabled;
+        return html `
+            <button
+                ?disabled=${disabled}
+                ${listen('click', () => {
+            if (disabled) {
+                return;
+            }
+            else if (inputs.isClickable?.selected != undefined) {
+                dispatch(new events.toggle(!inputs.isClickable.selected));
+            }
+            else if (inputs.isClickable?.cancellable) {
+                dispatch(new events.cancel());
+            }
+        })}
+            >
+                <${ViraIcon.assign({
+            icon: Check16Icon,
+        })}
+                    class="selected-check"
+                ></${ViraIcon}>
+                <span class="text">${String(inputs.text)}</span>
+                <${ViraIcon.assign({
+            icon: CloseX16Icon,
+        })}
+                    class="cancel-x"
+                ></${ViraIcon}>
+            </button>
+        `;
+    },
+});

package/dist/icons/icon-svgs/check-16.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A checkmark (16px).
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/check16icon
+ */
+export declare const Check16Icon: import("../icon-svg.js").ViraIconSvg;

package/dist/icons/icon-svgs/check-16.icon.js

@@ -0,0 +1,23 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * A checkmark (16px).
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/check16icon
+ */
+export const Check16Icon = defineIcon({
+    name: 'Check16Icon',
+    svgTemplate: html `
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+            <path
+                d="m12 5-6 6-3-3"
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+            />
+        </svg>
+    `,
+});

package/dist/icons/icon-svgs/close-x-16.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * An x icon meant to be used as a "close" button (16px).
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/closex16icon
+ */
+export declare const CloseX16Icon: import("../icon-svg.js").ViraIconSvg;

package/dist/icons/icon-svgs/close-x-16.icon.js

@@ -0,0 +1,23 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * An x icon meant to be used as a "close" button (16px).
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/closex16icon
+ */
+export const CloseX16Icon = defineIcon({
+    name: 'CloseX16Icon',
+    svgTemplate: html `
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+            <path
+                d="M4 4l8 8M12 4l-8 8"
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+            />
+        </svg>
+    `,
+});

package/dist/icons/index.d.ts

@@ -6,9 +6,11 @@ export * from './icon-svgs/arrow-up-24.icon.js';
 export * from './icon-svgs/auto-theme-24.icon.js';
 export * from './icon-svgs/bell-24.icon.js';
 export * from './icon-svgs/chat-24.icon.js';
+export * from './icon-svgs/check-16.icon.js';
 export * from './icon-svgs/check-24.icon.js';
 export * from './icon-svgs/chevron-down-24.icon.js';
 export * from './icon-svgs/chevron-up-24.icon.js';
+export * from './icon-svgs/close-x-16.icon.js';
 export * from './icon-svgs/close-x-24.icon.js';
 export * from './icon-svgs/commit-24.icon.js';
 export * from './icon-svgs/copy-24.icon.js';
@@ -58,9 +60,11 @@ export declare const allIconsByName: {
     readonly AutoTheme24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Bell24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Chat24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Check16Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Check24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly ChevronDown24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly ChevronUp24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly CloseX16Icon: import("./icon-svg.js").ViraIconSvg;
     readonly CloseX24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Commit24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Copy24Icon: import("./icon-svg.js").ViraIconSvg;

package/dist/icons/index.js

@@ -3,9 +3,11 @@ import { ArrowUp24Icon } from './icon-svgs/arrow-up-24.icon.js';
 import { AutoTheme24Icon } from './icon-svgs/auto-theme-24.icon.js';
 import { Bell24Icon } from './icon-svgs/bell-24.icon.js';
 import { Chat24Icon } from './icon-svgs/chat-24.icon.js';
+import { Check16Icon } from './icon-svgs/check-16.icon.js';
 import { Check24Icon } from './icon-svgs/check-24.icon.js';
 import { ChevronDown24Icon } from './icon-svgs/chevron-down-24.icon.js';
 import { ChevronUp24Icon } from './icon-svgs/chevron-up-24.icon.js';
+import { CloseX16Icon } from './icon-svgs/close-x-16.icon.js';
 import { CloseX24Icon } from './icon-svgs/close-x-24.icon.js';
 import { Commit24Icon } from './icon-svgs/commit-24.icon.js';
 import { Copy24Icon } from './icon-svgs/copy-24.icon.js';
@@ -52,9 +54,11 @@ export * from './icon-svgs/arrow-up-24.icon.js';
 export * from './icon-svgs/auto-theme-24.icon.js';
 export * from './icon-svgs/bell-24.icon.js';
 export * from './icon-svgs/chat-24.icon.js';
+export * from './icon-svgs/check-16.icon.js';
 export * from './icon-svgs/check-24.icon.js';
 export * from './icon-svgs/chevron-down-24.icon.js';
 export * from './icon-svgs/chevron-up-24.icon.js';
+export * from './icon-svgs/close-x-16.icon.js';
 export * from './icon-svgs/close-x-24.icon.js';
 export * from './icon-svgs/commit-24.icon.js';
 export * from './icon-svgs/copy-24.icon.js';
@@ -104,9 +108,11 @@ export const allIconsByName = {
     AutoTheme24Icon,
     Bell24Icon,
     Chat24Icon,
+    Check16Icon,
     Check24Icon,
     ChevronDown24Icon,
     ChevronUp24Icon,
+    CloseX16Icon,
     CloseX24Icon,
     Commit24Icon,
     Copy24Icon,

package/dist/styles/form-styles.d.ts

@@ -19,6 +19,9 @@ export declare const viraFormCssVars: import("lit-css-vars").CssVarDefinitions<{
     readonly 'vira-form-error-active-color': import("element-vir").CSSResult;
     readonly 'vira-form-success-color': import("element-vir").CSSResult;
     readonly 'vira-form-label-font-weight': "bold";
+    readonly 'vira-form-small-text-size': "12px";
+    readonly 'vira-form-medium-text-size': "16px";
+    readonly 'vira-form-large-text-size': "16px";
     readonly 'vira-form-radius': "8px";
     readonly 'vira-form-wrapper-radius': "16px";
     readonly 'vira-form-focus-outline-color': import("element-vir").CSSResult;

package/dist/styles/form-styles.js

@@ -25,6 +25,9 @@ export const viraFormCssVars = defineCssVars({
     'vira-form-error-active-color': viraTheme.colors['vira-red-behind-bg-body'].background.value,
     'vira-form-success-color': viraTheme.colors['vira-green-behind-bg-non-body'].background.value,
     'vira-form-label-font-weight': 'bold',
+    'vira-form-small-text-size': '12px',
+    'vira-form-medium-text-size': '16px',
+    'vira-form-large-text-size': '16px',
     'vira-form-radius': defaultViraFormRadius,
     'vira-form-wrapper-radius': '16px',
     'vira-form-focus-outline-color': viraTheme.colors['vira-blue-foreground-header'].foreground.value,

package/dist/styles/form-variants.d.ts

@@ -0,0 +1,93 @@
+import { ViraThemeColorName } from './vira-color-theme-object.js';
+/** All available variants for controlling vira form colors. */
+export declare enum ViraColorVariant {
+    /**
+     * This is the default.
+     *
+     * @default blue colored
+     */
+    Accent = "accent",
+    /** @default black colored */
+    Plain = "plain",
+    /** @default grey colored */
+    Neutral = "neutral",
+    /** @default red colored */
+    Danger = "danger",
+    /** @default orange colored */
+    Warning = "warning",
+    /** @default green colored */
+    Positive = "positive",
+    /**
+     * No color variant styles will be applied at all. All related CSS vars are free to customize to
+     * your wishes.
+     */
+    None = "none"
+}
+/**
+ * Maps {@link ViraColorVariant} values that support colors to their respective vira theme color
+ * keys.
+ *
+ * @category Internal
+ */
+export declare const viraColorVariantToColorName: Record<Exclude<ViraColorVariant, ViraColorVariant.None | ViraColorVariant.Plain>, ViraThemeColorName>;
+/**
+ * All defined color variants starting with the default.
+ *
+ * @category Internal
+ */
+export declare const viraColorVariants: readonly [ViraColorVariant.Accent, ViraColorVariant.Plain, ViraColorVariant.Neutral, ViraColorVariant.Danger, ViraColorVariant.Warning, ViraColorVariant.Positive];
+/**
+ * All available variants for controlling vira form sizes.
+ *
+ * @category Internal
+ */
+export declare enum ViraSize {
+    /** @default 40px tall */
+    Large = "large",
+    /**
+     * This is the default.
+     *
+     * @default 32px tall
+     */
+    Medium = "medium",
+    /** @default 24px tall */
+    Small = "small",
+    /**
+     * No size styles will be applied at all. All related CSS vars are free to customize to your
+     * wishes.
+     */
+    None = "none"
+}
+/**
+ * All defined size variants starting with the default.
+ *
+ * @category Internal
+ */
+export declare const viraSizeVariants: readonly [ViraSize.Medium, ViraSize.Small, ViraSize.Large];
+/**
+ * All available variants for controlling vira form emphasis.
+ *
+ * @category Internal
+ */
+export declare enum ViraEmphasis {
+    /** This is the default. */
+    Standard = "standard",
+    Subtle = "subtle",
+    /**
+     * No emphasis styles will be applied at all. All related CSS vars are free to customize to your
+     * wishes.
+     */
+    None = "none"
+}
+/**
+ * All defined emphasis variants starting with the default.
+ *
+ * @category Internal
+ */
+export declare const viraEmphasisVariants: readonly [ViraEmphasis.Standard, ViraEmphasis.Subtle];
+/**
+ * Default heights for {@link ViraSize} values.
+ *
+ * @category Internal
+ */
+export declare const viraSizeHeights: Record<Exclude<ViraSize, ViraSize.None>, number>;