vira 32.0.0-beta.0 → 32.0.0

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

@@ -0,0 +1,44 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type ViraIconSvg } from '../icons/index.js';
+import { ViraColorVariant, ViraEmphasis, ViraSize } from '../styles/index.js';
+import { ViraThemeColorName } from '../styles/vira-color-theme-object.js';
+/**
+ * A custom button with default styling.
+ *
+ * @category Button
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-button
+ */
+export declare const ViraButton: import("element-vir").DeclarativeElementDefinition<"vira-button", PartialWithUndefined<{
+    text: string;
+    icon: Readonly<ViraIconSvg>;
+    /** @default false */
+    isDisabled: boolean;
+    /**
+     * Set a predefined emphasis variant. Set to `ViraEmphasis.None` for maximum customization.
+     *
+     * @default ViraEmphasis.Standard
+     */
+    buttonEmphasis: ViraEmphasis;
+    /**
+     * Set a predefined size variant. Set to `ViraSize.None` for maximum customization. In that
+     * case, you will need to set a `height`.
+     *
+     * @default ViraSize.Medium
+     */
+    buttonSize: ViraSize;
+    /**
+     * Set a predefined color variant or a raw {@link ViraThemeColorName} (e.g.,
+     * `ViraThemeColorName.blue`). Set to `ViraColorVariant.Custom` for maximum customization.
+     * In that case, you will need to use this element's CSS vars to customize the colors.
+     *
+     * @default ViraColorVariant.Plain
+     */
+    color: ViraColorVariant | ViraThemeColorName;
+    /**
+     * Set to `true` to render `icon` after `text` instead of before it.
+     *
+     * @default false
+     */
+    showIconOnRight: boolean;
+}>, {}, {}, "vira-button-color-red" | "vira-button-color-yellow" | "vira-button-color-green" | "vira-button-color-blue" | "vira-button-color-brand" | "vira-button-color-purple" | "vira-button-color-plain" | "vira-button-color-neutral" | "vira-button-color-teal" | "vira-button-color-pink" | "vira-button-color-grey" | "vira-button-disabled" | "vira-button-icon-only" | "vira-button-size-large" | "vira-button-size-medium" | "vira-button-size-small" | "vira-button-emphasis-standard" | "vira-button-emphasis-subtle", "vira-button-text-color" | "vira-button-background-color" | "vira-button-border-color" | "vira-button-hover-text-color" | "vira-button-hover-background-color" | "vira-button-hover-border-color" | "vira-button-active-text-color" | "vira-button-active-background-color" | "vira-button-active-border-color" | "vira-button-disabled-text-color" | "vira-button-disabled-background-color" | "vira-button-disabled-border-color" | "vira-button-border-width" | "vira-button-border-radius", readonly [], readonly []>;

package/{src/elements/vira-button.element.ts → dist/elements/vira-button.element.js}

@@ -1,52 +1,22 @@
-import {arrayToObject, getObjectTypedKeys, type PartialWithUndefined} from '@augment-vir/common';
-import {ContrastLevelName} from '@electrovir/color/dist/data/contrast/contrast.js';
-import {css, html, nothing, unsafeCSS, type CSSResult, type HtmlInterpolation} from 'element-vir';
-import {type SingleCssVarDefinition} from 'lit-css-vars';
-import {themeDefaultKey} from 'theme-vir/dist/color-theme/color-theme.js';
-import {ChevronDown16Icon, type ViraIconSvg} from '../icons/index.js';
-import {createFocusStyles} from '../styles/focus.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {
-    standaloneThemeColorNames,
-    viraColorVariantToHostClassKey,
-    viraEmphasisVariants,
-    viraSizeHeights,
-    viraSizeVariants,
-} from '../styles/form-variants.js';
-import {
-    noUserSelect,
-    ViraColorVariant,
-    ViraEmphasis,
-    ViraSize,
-    viraTheme,
-} from '../styles/index.js';
-import {noNativeFormStyles} from '../styles/native-styles.js';
-import {viraThemeByKeys, ViraThemeColorName} from '../styles/vira-color-theme-object.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-import {ViraIcon} from './vira-icon.element.js';
-
-type ButtonColorValue = Pick<SingleCssVarDefinition, 'value'>;
-
-const transparentColor: ButtonColorValue = {
-    value: css`transparent`,
+import { arrayToObject, getObjectTypedKeys } from '@augment-vir/common';
+import { ContrastLevelName } from '@electrovir/color/dist/data/contrast/contrast.js';
+import { css, html, nothing, unsafeCSS } from 'element-vir';
+import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
+import { createFocusStyles } from '../styles/focus.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { standaloneThemeColorNames, viraColorVariantToHostClassKey, viraEmphasisVariants, viraSizeHeights, viraSizeVariants, } from '../styles/form-variants.js';
+import { noUserSelect, ViraColorVariant, ViraEmphasis, ViraSize, viraTheme, } from '../styles/index.js';
+import { noNativeFormStyles } from '../styles/native-styles.js';
+import { viraThemeByKeys, ViraThemeColorName } from '../styles/vira-color-theme-object.js';
+import { defineViraElement } from '../util/define-vira-element.js';
+import { ViraIcon } from './vira-icon.element.js';
+const transparentColor = {
+    value: css `transparent`,
 };
-
-type ButtonColorStateColors = Record<
-    'idle' | 'hover' | 'active',
-    {
-        textColor: ButtonColorValue;
-        borderColor: ButtonColorValue;
-        backgroundColor: ButtonColorValue;
-    }
->;
-
-function buildThemedButtonColors(
-    colorName: ViraThemeColorName,
-): Record<Exclude<ViraEmphasis, ViraEmphasis.None>, ButtonColorStateColors> {
+function buildThemedButtonColors(colorName) {
     const behindBg = viraThemeByKeys[colorName]['behind-bg'];
     const foreground = viraThemeByKeys[colorName].foreground;
     const onSelf = viraThemeByKeys[colorName]['on-self'];
-
     return {
         [ViraEmphasis.Standard]: {
             idle: {
@@ -84,11 +54,7 @@ function buildThemedButtonColors(
         },
     };
 }
-
-const plainButtonColors: Record<
-    Exclude<ViraEmphasis, ViraEmphasis.None>,
-    ButtonColorStateColors
-> = {
+const plainButtonColors = {
     [ViraEmphasis.Standard]: {
         idle: {
             backgroundColor: viraTheme.colors[themeDefaultKey].foreground,
@@ -124,11 +90,7 @@ const plainButtonColors: Record<
         },
     },
 };
-
-const neutralButtonColors: Record<
-    Exclude<ViraEmphasis, ViraEmphasis.None>,
-    ButtonColorStateColors
-> = {
+const neutralButtonColors = {
     [ViraEmphasis.Standard]: {
         idle: {
             backgroundColor: viraTheme.colors[themeDefaultKey].background,
@@ -148,7 +110,6 @@ const neutralButtonColors: Record<
     },
     [ViraEmphasis.Subtle]: buildThemedButtonColors(ViraThemeColorName.grey)[ViraEmphasis.Subtle],
 };
-
 /**
  * A custom button with default styling.
  *
@@ -156,192 +117,112 @@ const neutralButtonColors: Record<
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-button
  */
-export const ViraButton = defineViraElement<
-    PartialWithUndefined<{
-        text: string;
-        icon: Readonly<ViraIconSvg>;
-        /** @default false */
-        isDisabled: boolean;
-        /**
-         * Set a predefined emphasis variant. Set to `ViraEmphasis.None` for maximum customization.
-         *
-         * @default ViraEmphasis.Standard
-         */
-        buttonEmphasis: ViraEmphasis;
-        /**
-         * Set a predefined size variant. Set to `ViraSize.None` for maximum customization. In that
-         * case, you will need to set a `height`.
-         *
-         * @default ViraSize.Medium
-         */
-        buttonSize: ViraSize;
-        /**
-         * Set a predefined color variant or a raw {@link ViraThemeColorName} (e.g.,
-         * `ViraThemeColorName.blue`). Set to `ViraColorVariant.Custom` for maximum customization.
-         * In that case, you will need to use this element's CSS vars to customize the colors.
-         *
-         * @default ViraColorVariant.Plain
-         */
-        color: ViraColorVariant | ViraThemeColorName;
-        /**
-         * Set to `true` to render `icon` after `text` instead of before it.
-         *
-         * @default false
-         */
-        showIconOnRight: boolean;
-        /**
-         * Set to `true` to append a downwards chevron after the button's text.
-         *
-         * @deprecated Set `icon` to `ChevronDown16Icon` and `showIconOnRight` to `true` instead.
-         * @default false
-         */
-        showMenuCaret: boolean;
-    }>
->()({
+export const ViraButton = defineViraElement()({
     tagName: 'vira-button',
     hostClasses: {
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        'vira-button-with-menu-caret': ({inputs}) => !!inputs.showMenuCaret,
-
-        'vira-button-size-large': ({inputs}) => inputs.buttonSize === ViraSize.Large,
-        'vira-button-size-medium': ({inputs}) => {
+        'vira-button-size-large'({ inputs }) {
+            return inputs.buttonSize === ViraSize.Large;
+        },
+        'vira-button-size-medium'({ inputs }) {
             return !inputs.buttonSize || inputs.buttonSize === ViraSize.Medium;
         },
-        'vira-button-size-small': ({inputs}) => inputs.buttonSize === ViraSize.Small,
-
-        'vira-button-emphasis-standard': ({inputs}) => {
+        'vira-button-size-small'({ inputs }) {
+            return inputs.buttonSize === ViraSize.Small;
+        },
+        'vira-button-emphasis-standard'({ inputs }) {
             return !inputs.buttonEmphasis || inputs.buttonEmphasis === ViraEmphasis.Standard;
         },
-        'vira-button-emphasis-subtle': ({inputs}) => inputs.buttonEmphasis === ViraEmphasis.Subtle,
-
-        ...arrayToObject(
-            getObjectTypedKeys(viraColorVariantToHostClassKey),
-            (colorVariant) => {
-                const colorKey = viraColorVariantToHostClassKey[colorVariant];
-                return {
-                    key: `vira-button-color-${colorKey}` as const,
-                    value: ({
-                        inputs,
-                    }: {
-                        inputs: Readonly<
-                            PartialWithUndefined<{color: ViraColorVariant | ViraThemeColorName}>
-                        >;
-                    }) => {
-                        return inputs.color === colorVariant || inputs.color === colorKey;
-                    },
-                };
-            },
-            {
-                useRequired: true,
-            },
-        ),
-        'vira-button-color-plain': ({
-            inputs,
-        }: {
-            inputs: Readonly<PartialWithUndefined<{color: ViraColorVariant | ViraThemeColorName}>>;
-        }) => !inputs.color || inputs.color === ViraColorVariant.Plain,
-        'vira-button-color-neutral': ({
-            inputs,
-        }: {
-            inputs: Readonly<PartialWithUndefined<{color: ViraColorVariant | ViraThemeColorName}>>;
-        }) => inputs.color === ViraColorVariant.Neutral,
-        ...arrayToObject(
-            standaloneThemeColorNames,
-            (colorName) => {
-                return {
-                    key: `vira-button-color-${colorName}` as const,
-                    value: ({
-                        inputs,
-                    }: {
-                        inputs: Readonly<
-                            PartialWithUndefined<{color: ViraColorVariant | ViraThemeColorName}>
-                        >;
-                    }) => {
-                        return inputs.color === colorName;
-                    },
-                };
-            },
-            {
-                useRequired: true,
-            },
-        ),
-
-        'vira-button-disabled': ({inputs}) => !!inputs.isDisabled,
-        'vira-button-icon-only': ({inputs}) => !inputs.text && !!inputs.icon,
+        'vira-button-emphasis-subtle'({ inputs }) {
+            return inputs.buttonEmphasis === ViraEmphasis.Subtle;
+        },
+        ...arrayToObject(getObjectTypedKeys(viraColorVariantToHostClassKey), (colorVariant) => {
+            const colorKey = viraColorVariantToHostClassKey[colorVariant];
+            return {
+                key: `vira-button-color-${colorKey}`,
+                value({ inputs, }) {
+                    return inputs.color === colorVariant || inputs.color === colorKey;
+                },
+            };
+        }, {
+            useRequired: true,
+        }),
+        'vira-button-color-plain'({ inputs, }) {
+            return !inputs.color || inputs.color === ViraColorVariant.Plain;
+        },
+        'vira-button-color-neutral'({ inputs, }) {
+            return inputs.color === ViraColorVariant.Neutral;
+        },
+        ...arrayToObject(standaloneThemeColorNames, (colorName) => {
+            return {
+                key: `vira-button-color-${colorName}`,
+                value({ inputs, }) {
+                    return inputs.color === colorName;
+                },
+            };
+        }, {
+            useRequired: true,
+        }),
+        'vira-button-disabled'({ inputs }) {
+            return !!inputs.isDisabled;
+        },
+        'vira-button-icon-only'({ inputs }) {
+            return !inputs.text && !!inputs.icon;
+        },
     },
     cssVars: {
         'vira-button-text-color': 'transparent',
         'vira-button-background-color': 'transparent',
         'vira-button-border-color': 'transparent',
-
         'vira-button-hover-text-color': 'transparent',
         'vira-button-hover-background-color': 'transparent',
         'vira-button-hover-border-color': 'transparent',
-
         'vira-button-active-text-color': 'transparent',
         'vira-button-active-background-color': 'transparent',
         'vira-button-active-border-color': 'transparent',
-
-        'vira-button-disabled-text-color':
-            viraTheme.colors['vira-grey-behind-bg-decoration'].foreground.value,
-        'vira-button-disabled-background-color':
-            viraTheme.colors['vira-grey-behind-bg-decoration'].background.value,
-        'vira-button-disabled-border-color':
-            viraTheme.colors['vira-grey-behind-bg-decoration'].background.value,
-
+        'vira-button-disabled-text-color': viraTheme.colors['vira-grey-behind-bg-decoration'].foreground.value,
+        'vira-button-disabled-background-color': viraTheme.colors['vira-grey-behind-bg-decoration'].background.value,
+        'vira-button-disabled-border-color': viraTheme.colors['vira-grey-behind-bg-decoration'].background.value,
         'vira-button-border-width': '1px',
         'vira-button-border-radius': viraFormCssVars['vira-form-radius'].value,
     },
-    styles: ({hostClasses, cssVars}) => {
-        function buildVariantCssRule({
-            variantSelector,
-            emphasisSelector,
-            colors,
-        }: Readonly<{
-            variantSelector: CSSResult;
-            emphasisSelector: CSSResult;
-            colors: ButtonColorStateColors;
-        }>): CSSResult {
-            return css`
+    styles({ hostClasses, cssVars }) {
+        function buildVariantCssRule({ variantSelector, emphasisSelector, colors, }) {
+            return css `
                 ${variantSelector}${emphasisSelector} {
                     ${cssVars['vira-button-background-color'].name}: ${colors.idle.backgroundColor
-                        .value};
+                .value};
                     ${cssVars['vira-button-text-color'].name}: ${colors.idle.textColor.value};
                     ${cssVars['vira-button-border-color'].name}: ${colors.idle.borderColor.value};
 
                     ${cssVars['vira-button-hover-background-color'].name}: ${colors.hover
-                        .backgroundColor.value};
+                .backgroundColor.value};
                     ${cssVars['vira-button-hover-text-color'].name}: ${colors.hover.textColor
-                        .value};
+                .value};
                     ${cssVars['vira-button-hover-border-color'].name}: ${colors.hover.borderColor
-                        .value};
+                .value};
 
                     ${cssVars['vira-button-active-background-color'].name}: ${colors.active
-                        .backgroundColor.value};
+                .backgroundColor.value};
                     ${cssVars['vira-button-active-text-color'].name}: ${colors.active.textColor
-                        .value};
+                .value};
                     ${cssVars['vira-button-active-border-color'].name}: ${colors.active.borderColor
-                        .value};
+                .value};
                 }
             `;
         }
-
-        function generateVariantCss(): CSSResult {
+        function generateVariantCss() {
             const allStyles = viraEmphasisVariants.flatMap((emphasis) => {
                 const emphasisSelector = hostClasses[`vira-button-emphasis-${emphasis}`].selector;
-                const themedStyles = getObjectTypedKeys(viraColorVariantToHostClassKey).map(
-                    (colorVariant) => {
-                        const colorKey = viraColorVariantToHostClassKey[colorVariant];
-                        const colors = buildThemedButtonColors(colorKey)[emphasis];
-                        const variantSelector =
-                            hostClasses[`vira-button-color-${colorKey}`].selector;
-                        return buildVariantCssRule({
-                            variantSelector,
-                            emphasisSelector,
-                            colors,
-                        });
-                    },
-                );
+                const themedStyles = getObjectTypedKeys(viraColorVariantToHostClassKey).map((colorVariant) => {
+                    const colorKey = viraColorVariantToHostClassKey[colorVariant];
+                    const colors = buildThemedButtonColors(colorKey)[emphasis];
+                    const variantSelector = hostClasses[`vira-button-color-${colorKey}`].selector;
+                    return buildVariantCssRule({
+                        variantSelector,
+                        emphasisSelector,
+                        colors,
+                    });
+                });
                 const plainStyle = buildVariantCssRule({
                     variantSelector: hostClasses['vira-button-color-plain'].selector,
                     emphasisSelector,
@@ -368,13 +249,11 @@ export const ViraButton = defineViraElement<
                     ...standaloneStyles,
                 ];
             });
-
             return unsafeCSS(allStyles.join('\n'));
         }
-
-        function generateSizeVariantCss(): CSSResult {
+        function generateSizeVariantCss() {
             const styles = viraSizeVariants.map((sizeVariant) => {
-                return css`
+                return css `
                     ${hostClasses[`vira-button-size-${sizeVariant}`].selector} {
                         font-size: ${viraFormCssVars[`vira-form-${sizeVariant}-text-size`].value};
 
@@ -390,11 +269,9 @@ export const ViraButton = defineViraElement<
                     }
                 `;
             });
-
             return unsafeCSS(styles.join('\n'));
         }
-
-        return css`
+        return css `
             :host {
                 cursor: pointer;
                 display: inline-flex;
@@ -403,9 +280,7 @@ export const ViraButton = defineViraElement<
                 align-items: center;
                 box-sizing: border-box;
                 ${noUserSelect};
-                ${viraFormCssVars['vira-form-focus-outline-color'].name}: ${viraFormCssVars[
-                    'vira-form-accent-primary-hover-color'
-                ].value}
+                ${viraFormCssVars['vira-form-focus-outline-color'].name}: ${viraFormCssVars['vira-form-accent-primary-hover-color'].value}
             }
 
             ${generateSizeVariantCss()}
@@ -435,8 +310,8 @@ export const ViraButton = defineViraElement<
                 color: ${cssVars['vira-button-text-color'].value};
 
                 ${createFocusStyles({
-                    elementBorderSize: cssVars['vira-button-border-width'],
-                })}
+            elementBorderSize: cssVars['vira-button-border-width'],
+        })}
             }
 
             :host(:hover) button,
@@ -468,16 +343,6 @@ export const ViraButton = defineViraElement<
                 align-items: center;
             }
 
-            .caret-icon {
-                margin-left: 8px;
-            }
-
-            ${hostClasses['vira-button-with-menu-caret'].selector} {
-                button {
-                    padding-right: 6px;
-                }
-            }
-
             ${hostClasses['vira-button-disabled'].selector} {
                 cursor: not-allowed;
 
@@ -502,46 +367,33 @@ export const ViraButton = defineViraElement<
             }
         `;
     },
-    render: ({inputs}) => {
+    render({ inputs }) {
         const iconTemplate = inputs.icon
-            ? html`
+            ? html `
                   <${ViraIcon.assign({
-                      icon: inputs.icon,
-                  })}></${ViraIcon}>
+                icon: inputs.icon,
+            })}></${ViraIcon}>
               `
             : nothing;
         const textTemplate = inputs.text
-            ? html`
+            ? html `
                   <span class="text-template">${inputs.text}</span>
               `
-            : html`
+            : html `
                   <span class="empty-text">&nbsp;</span>
               `;
-
-        // eslint-disable-next-line @typescript-eslint/no-deprecated
-        const caretIconTemplate = inputs.showMenuCaret
-            ? html`
-                  <${ViraIcon.assign({
-                      icon: ChevronDown16Icon,
-                  })}
-                      class="caret-icon"
-                  ></${ViraIcon}>
-              `
-            : nothing;
-
         /* Both templates are interpolated with no whitespace between them so `+` selectors match. */
-        const templates: HtmlInterpolation[] = inputs.showIconOnRight
+        const templates = inputs.showIconOnRight
             ? [
-                  textTemplate,
-                  iconTemplate,
-              ]
+                textTemplate,
+                iconTemplate,
+            ]
             : [
-                  iconTemplate,
-                  textTemplate,
-              ];
-
-        return html`
-            <button ?disabled=${inputs.isDisabled}>${templates}${caretIconTemplate}</button>
+                iconTemplate,
+                textTemplate,
+            ];
+        return html `
+            <button ?disabled=${inputs.isDisabled}>${templates}</button>
         `;
     },
 });

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

@@ -0,0 +1,18 @@
+/**
+ * State options for {@link ViraCard}.
+ *
+ * @category Internal
+ */
+export declare enum ViraCardState {
+    Error = "error",
+    Success = "success"
+}
+/**
+ * A simple wrapper "card" element that is just a `<slot>` with some styles.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-card
+ */
+export declare const ViraCard: import("element-vir").DeclarativeElementDefinition<"vira-card", {
+    cardState?: ViraCardState | undefined;
+}, {}, {}, "vira-card-error" | "vira-card-success", "vira-card-border" | "vira-card-padding", readonly [], readonly []>;

package/{src/elements/vira-card.element.ts → dist/elements/vira-card.element.js}

@@ -1,37 +1,38 @@
-import {css, html} from 'element-vir';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-
+import { css, html } from 'element-vir';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { defineViraElement } from '../util/define-vira-element.js';
 /**
  * State options for {@link ViraCard}.
  *
  * @category Internal
  */
-export enum ViraCardState {
-    Error = 'error',
-    Success = 'success',
-}
-
+export var ViraCardState;
+(function (ViraCardState) {
+    ViraCardState["Error"] = "error";
+    ViraCardState["Success"] = "success";
+})(ViraCardState || (ViraCardState = {}));
 /**
  * A simple wrapper "card" element that is just a `<slot>` with some styles.
  *
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-card
  */
-export const ViraCard = defineViraElement<{
-    cardState?: ViraCardState | undefined;
-}>()({
+export const ViraCard = defineViraElement()({
     tagName: 'vira-card',
     hostClasses: {
-        'vira-card-error': ({inputs}) => inputs.cardState === ViraCardState.Error,
-        'vira-card-success': ({inputs}) => inputs.cardState === ViraCardState.Success,
+        'vira-card-error'({ inputs }) {
+            return inputs.cardState === ViraCardState.Error;
+        },
+        'vira-card-success'({ inputs }) {
+            return inputs.cardState === ViraCardState.Success;
+        },
     },
     cssVars: {
-        'vira-card-border': css`1px solid ${viraFormCssVars['vira-form-border-color'].value}`,
+        'vira-card-border': css `1px solid ${viraFormCssVars['vira-form-border-color'].value}`,
         'vira-card-padding': '24px',
     },
-    styles: ({hostClasses, cssVars}) => {
-        return css`
+    styles({ hostClasses, cssVars }) {
+        return css `
             :host {
                 display: block;
                 border: ${cssVars['vira-card-border'].value};
@@ -48,7 +49,7 @@ export const ViraCard = defineViraElement<{
         `;
     },
     render() {
-        return html`
+        return html `
             <slot></slot>
         `;
     },

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

@@ -0,0 +1,44 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type AttributeValues, type CSSResult } from 'element-vir';
+import { ViraIcon } from './vira-icon.element.js';
+/**
+ * All inner elements supported by {@link ViraCheckbox}.
+ *
+ * @category Internals
+ */
+export type ViraCheckboxInnerElements = 'label' | 'custom-checkbox' | 'text' | typeof ViraIcon.tagName;
+/**
+ * Inputs for {@link ViraCheckbox}.
+ *
+ * @category Internal
+ */
+export type ViraCheckboxInputs = {
+    value: boolean;
+} & PartialWithUndefined<{
+    stylePassthrough: Partial<Record<ViraCheckboxInnerElements, CSSResult>>;
+    attributePassthrough: Partial<Record<ViraCheckboxInnerElements, AttributeValues>>;
+    isDisabled: boolean;
+    /**
+     * Text label for the checkbox. Used as the fallback when the `vira-checkbox-label` slot is not
+     * filled.
+     */
+    label: string;
+    hasError: boolean;
+    useHorizontalLabel: boolean;
+    /** The checkbox will be filled with a form selection color when it is checked. */
+    fillWhenChecked: boolean;
+    /** The checkbox will be filled with a form error color when it is unchecked. */
+    fillWhenUnchecked: boolean;
+}>;
+/**
+ * A custom checkbox.
+ *
+ * @category Input
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-checkbox
+ */
+export declare const ViraCheckbox: import("element-vir").DeclarativeElementDefinition<`vira-${string}`, Readonly<ViraCheckboxInputs>, {
+    hasSlottedLabel: boolean;
+}, {
+    valueChange: import("element-vir").DefineElementEvent<boolean>;
+}, "vira-checkbox-horizontal" | "vira-checkbox-filled-checked" | "vira-checkbox-filled-unchecked", `vira-${string}-`, readonly ["vira-checkbox-label"], readonly []>;