vira 32.0.0-beta.0 → 32.0.0

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

@@ -0,0 +1,40 @@
+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").DefineElementEvent<boolean>;
+    cancel: import("element-vir").DefineElementEvent<void>;
+}, "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-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-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 []>;

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

@@ -1,56 +1,24 @@
-import {check} from '@augment-vir/assert';
-import {
-    arrayToObject,
-    getObjectTypedKeys,
-    type PartialWithUndefined,
-    type Primitive,
-    type RequireExactlyOne,
-} from '@augment-vir/common';
-import {ContrastLevelName} from '@electrovir/color/dist/data/contrast/contrast.js';
-import {css, type CSSResult, defineElementEvent, html, listen, unsafeCSS} from 'element-vir';
-import {type SingleCssVarDefinition} from 'lit-css-vars';
-import {themeDefaultKey} from 'theme-vir/dist/color-theme/color-theme.js';
-import {Check16Icon} from '../icons/icon-svgs/16/check-16.icon.js';
-import {X16Icon} from '../icons/icon-svgs/16/x-16.icon.js';
-import {viraFormCssVars} from '../styles/form-styles.js';
-import {
-    standaloneThemeColorNames,
-    ViraColorVariant,
-    viraColorVariantToHostClassKey,
-    ViraEmphasis,
-    viraEmphasisVariants,
-    ViraSize,
-    viraSizeHeights,
-    viraSizeVariants,
-} from '../styles/form-variants.js';
-import {noNativeFormStyles} from '../styles/native-styles.js';
-import {noUserSelect} from '../styles/user-select.js';
-import {viraThemeByKeys, ViraThemeColorName} from '../styles/vira-color-theme-object.js';
-import {viraTheme} from '../styles/vira-color-theme.js';
-import {defineViraElement} from '../util/define-vira-element.js';
-import {ViraIcon} from './vira-icon.element.js';
-
-type TagColorValue = Pick<SingleCssVarDefinition, 'value'>;
-
-const transparentColor: TagColorValue = {
-    value: css`transparent`,
+import { check } from '@augment-vir/assert';
+import { arrayToObject, getObjectTypedKeys, } from '@augment-vir/common';
+import { ContrastLevelName } from '@electrovir/color/dist/data/contrast/contrast.js';
+import { css, defineElementEvent, html, listen, unsafeCSS } from 'element-vir';
+import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
+import { Check16Icon } from '../icons/icon-svgs/16/check-16.icon.js';
+import { X16Icon } from '../icons/icon-svgs/16/x-16.icon.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { standaloneThemeColorNames, ViraColorVariant, viraColorVariantToHostClassKey, ViraEmphasis, viraEmphasisVariants, ViraSize, viraSizeHeights, viraSizeVariants, } from '../styles/form-variants.js';
+import { noNativeFormStyles } from '../styles/native-styles.js';
+import { noUserSelect } from '../styles/user-select.js';
+import { viraThemeByKeys, ViraThemeColorName } from '../styles/vira-color-theme-object.js';
+import { viraTheme } from '../styles/vira-color-theme.js';
+import { defineViraElement } from '../util/define-vira-element.js';
+import { ViraIcon } from './vira-icon.element.js';
+const transparentColor = {
+    value: css `transparent`,
 };
-
-type TagColorStateColors = Record<
-    'idle' | 'hover' | 'active',
-    {
-        textColor: TagColorValue;
-        backgroundColor: TagColorValue;
-        borderColor: TagColorValue;
-    }
->;
-
-function buildThemedTagColors(
-    colorName: ViraThemeColorName,
-): Record<Exclude<ViraEmphasis, ViraEmphasis.None>, TagColorStateColors> {
+function buildThemedTagColors(colorName) {
     const behindBg = viraThemeByKeys[colorName]['behind-bg'];
     const onSelf = viraThemeByKeys[colorName]['on-self'];
-
     return {
         [ViraEmphasis.Standard]: {
             idle: {
@@ -88,10 +56,8 @@ function buildThemedTagColors(
         },
     };
 }
-
-function buildThemedNotCheckedColors(colorName: ViraThemeColorName): TagColorStateColors {
+function buildThemedNotCheckedColors(colorName) {
     const onSelfBodyText = viraThemeByKeys[colorName]['on-self'][ContrastLevelName.BodyText];
-
     return {
         idle: {
             textColor: onSelfBodyText.foreground,
@@ -100,20 +66,17 @@ function buildThemedNotCheckedColors(colorName: ViraThemeColorName): TagColorSta
         },
         hover: {
             textColor: onSelfBodyText.foreground,
-            backgroundColor:
-                viraThemeByKeys[colorName]['behind-bg'][ContrastLevelName.Invisible].background,
+            backgroundColor: viraThemeByKeys[colorName]['behind-bg'][ContrastLevelName.Invisible].background,
             borderColor: onSelfBodyText.background,
         },
         active: {
             textColor: onSelfBodyText.foreground,
-            backgroundColor:
-                viraThemeByKeys[colorName]['behind-bg'][ContrastLevelName.Decoration].background,
+            backgroundColor: viraThemeByKeys[colorName]['behind-bg'][ContrastLevelName.Decoration].background,
             borderColor: onSelfBodyText.background,
         },
     };
 }
-
-const plainTagColors: Record<Exclude<ViraEmphasis, ViraEmphasis.None>, TagColorStateColors> = {
+const plainTagColors = {
     [ViraEmphasis.Standard]: {
         idle: {
             backgroundColor: viraTheme.colors[themeDefaultKey].foreground,
@@ -149,8 +112,7 @@ const plainTagColors: Record<Exclude<ViraEmphasis, ViraEmphasis.None>, TagColorS
         },
     },
 };
-
-const plainNotCheckedColors: TagColorStateColors = {
+const plainNotCheckedColors = {
     idle: {
         textColor: viraTheme.colors[themeDefaultKey].foreground,
         backgroundColor: transparentColor,
@@ -167,7 +129,6 @@ const plainNotCheckedColors: TagColorStateColors = {
         borderColor: viraTheme.colors['vira-grey-on-self-body'].background,
     },
 };
-
 /**
  * A "tag" or "label" or "pill" element. Supports many variations including non-clickable,
  * selectable, and cancellable variations.
@@ -175,181 +136,128 @@ const plainNotCheckedColors: TagColorStateColors = {
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-tag
  */
-export const ViraTag = defineViraElement<
-    {
-        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;
-    }>
->()({
+export const ViraTag = defineViraElement()({
     tagName: 'vira-tag',
     cssVars: {
         'vira-tag-text-color': 'transparent',
         'vira-tag-background-color': 'transparent',
         'vira-tag-border-color': 'transparent',
-
         'vira-tag-hover-text-color': 'transparent',
         'vira-tag-hover-background-color': 'transparent',
         'vira-tag-hover-border-color': 'transparent',
-
         'vira-tag-active-text-color': 'transparent',
         'vira-tag-active-background-color': 'transparent',
         'vira-tag-active-border-color': 'transparent',
-
-        'vira-tag-disabled-text-color':
-            viraTheme.colors['vira-grey-behind-bg-decoration'].foreground.value,
-        'vira-tag-disabled-background-color':
-            viraTheme.colors['vira-grey-behind-bg-decoration'].background.value,
-        'vira-tag-disabled-border-color':
-            viraTheme.colors['vira-grey-behind-bg-decoration'].background.value,
-
+        'vira-tag-disabled-text-color': viraTheme.colors['vira-grey-behind-bg-decoration'].foreground.value,
+        'vira-tag-disabled-background-color': viraTheme.colors['vira-grey-behind-bg-decoration'].background.value,
+        'vira-tag-disabled-border-color': viraTheme.colors['vira-grey-behind-bg-decoration'].background.value,
         'vira-tag-border-radius': '1000px',
         'vira-tag-gap': '6px',
         'vira-tag-horizontal-padding': '12px',
         'vira-tag-border-width': '1px',
     },
     events: {
-        toggle: defineElementEvent<boolean>(),
-        cancel: defineElementEvent<void>(),
+        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}) => {
+        'vira-tag-selectable'({ inputs }) {
+            return check.isBoolean(inputs.isClickable?.selected);
+        },
+        'vira-tag-checked'({ inputs }) {
+            return !!inputs.isClickable?.selected;
+        },
+        'vira-tag-not-checked'({ inputs }) {
+            return inputs.isClickable?.selected === false;
+        },
+        'vira-tag-cancellable'({ inputs }) {
+            return !!inputs.isClickable?.cancellable;
+        },
+        'vira-tag-not-clickable'({ inputs }) {
+            return !inputs.isClickable;
+        },
+        'vira-tag-disabled'({ inputs }) {
+            return !!inputs.disabled;
+        },
+        'vira-tag-size-large'({ inputs }) {
+            return inputs.size === ViraSize.Large;
+        },
+        'vira-tag-size-medium'({ inputs }) {
+            return !inputs.size || inputs.size === ViraSize.Medium;
+        },
+        'vira-tag-size-small'({ inputs }) {
+            return inputs.size === ViraSize.Small;
+        },
+        'vira-tag-emphasis-standard'({ inputs }) {
             return !inputs.emphasis || inputs.emphasis === ViraEmphasis.Standard;
         },
-        'vira-tag-emphasis-subtle': ({inputs}) => inputs.emphasis === ViraEmphasis.Subtle,
-
-        ...arrayToObject(
-            getObjectTypedKeys(viraColorVariantToHostClassKey),
-            (colorVariant) => {
-                const colorKey = viraColorVariantToHostClassKey[colorVariant];
-                return {
-                    key: `vira-tag-color-${colorKey}` as const,
-                    value: ({
-                        inputs,
-                    }: {
-                        inputs: Readonly<
-                            PartialWithUndefined<{color: ViraColorVariant | ViraThemeColorName}>
-                        >;
-                    }) => {
-                        return inputs.color === colorVariant || inputs.color === colorKey;
-                    },
-                };
-            },
-            {
-                useRequired: true,
-            },
-        ),
-        'vira-tag-color-plain': ({
-            inputs,
-        }: {
-            inputs: Readonly<PartialWithUndefined<{color: ViraColorVariant | ViraThemeColorName}>>;
-        }) => !inputs.color || inputs.color === ViraColorVariant.Plain,
-        'vira-tag-color-neutral': ({
-            inputs,
-        }: {
-            inputs: Readonly<PartialWithUndefined<{color: ViraColorVariant | ViraThemeColorName}>>;
-        }) => inputs.color === ViraColorVariant.Neutral,
-        ...arrayToObject(
-            standaloneThemeColorNames,
-            (colorName) => {
-                return {
-                    key: `vira-tag-color-${colorName}` as const,
-                    value: ({
-                        inputs,
-                    }: {
-                        inputs: Readonly<
-                            PartialWithUndefined<{color: ViraColorVariant | ViraThemeColorName}>
-                        >;
-                    }) => {
-                        return inputs.color === colorName;
-                    },
-                };
-            },
-            {
-                useRequired: true,
-            },
-        ),
+        'vira-tag-emphasis-subtle'({ inputs }) {
+            return inputs.emphasis === ViraEmphasis.Subtle;
+        },
+        ...arrayToObject(getObjectTypedKeys(viraColorVariantToHostClassKey), (colorVariant) => {
+            const colorKey = viraColorVariantToHostClassKey[colorVariant];
+            return {
+                key: `vira-tag-color-${colorKey}`,
+                value({ inputs, }) {
+                    return inputs.color === colorVariant || inputs.color === colorKey;
+                },
+            };
+        }, {
+            useRequired: true,
+        }),
+        'vira-tag-color-plain'({ inputs, }) {
+            return !inputs.color || inputs.color === ViraColorVariant.Plain;
+        },
+        'vira-tag-color-neutral'({ inputs, }) {
+            return inputs.color === ViraColorVariant.Neutral;
+        },
+        ...arrayToObject(standaloneThemeColorNames, (colorName) => {
+            return {
+                key: `vira-tag-color-${colorName}`,
+                value({ inputs, }) {
+                    return inputs.color === colorName;
+                },
+            };
+        }, {
+            useRequired: true,
+        }),
     },
-    styles: ({cssVars, hostClasses}) => {
-        function buildVariantCssRule({
-            variantSelector,
-            emphasisSelector,
-            colors,
-        }: Readonly<{
-            variantSelector: CSSResult;
-            emphasisSelector: CSSResult;
-            colors: TagColorStateColors;
-        }>): CSSResult {
-            return css`
+    styles({ cssVars, hostClasses }) {
+        function buildVariantCssRule({ variantSelector, emphasisSelector, colors, }) {
+            return css `
                 ${variantSelector}${emphasisSelector} {
                     ${cssVars['vira-tag-background-color'].name}: ${colors.idle.backgroundColor
-                        .value};
+                .value};
                     ${cssVars['vira-tag-text-color'].name}: ${colors.idle.textColor.value};
                     ${cssVars['vira-tag-border-color'].name}: ${colors.idle.borderColor.value};
 
                     ${cssVars['vira-tag-hover-background-color'].name}: ${colors.hover
-                        .backgroundColor.value};
+                .backgroundColor.value};
                     ${cssVars['vira-tag-hover-text-color'].name}: ${colors.hover.textColor.value};
                     ${cssVars['vira-tag-hover-border-color'].name}: ${colors.hover.borderColor
-                        .value};
+                .value};
 
                     ${cssVars['vira-tag-active-background-color'].name}: ${colors.active
-                        .backgroundColor.value};
+                .backgroundColor.value};
                     ${cssVars['vira-tag-active-text-color'].name}: ${colors.active.textColor.value};
                     ${cssVars['vira-tag-active-border-color'].name}: ${colors.active.borderColor
-                        .value};
+                .value};
                 }
             `;
         }
-
-        function generateVariantCss(): CSSResult {
+        function generateVariantCss() {
             const allStyles = viraEmphasisVariants.flatMap((emphasis) => {
                 const emphasisSelector = hostClasses[`vira-tag-emphasis-${emphasis}`].selector;
-                const themedStyles = getObjectTypedKeys(viraColorVariantToHostClassKey).map(
-                    (colorVariant) => {
-                        const colorKey = viraColorVariantToHostClassKey[colorVariant];
-                        const colors = buildThemedTagColors(colorKey)[emphasis];
-                        const variantSelector = hostClasses[`vira-tag-color-${colorKey}`].selector;
-                        return buildVariantCssRule({
-                            variantSelector,
-                            emphasisSelector,
-                            colors,
-                        });
-                    },
-                );
+                const themedStyles = getObjectTypedKeys(viraColorVariantToHostClassKey).map((colorVariant) => {
+                    const colorKey = viraColorVariantToHostClassKey[colorVariant];
+                    const colors = buildThemedTagColors(colorKey)[emphasis];
+                    const variantSelector = hostClasses[`vira-tag-color-${colorKey}`].selector;
+                    return buildVariantCssRule({
+                        variantSelector,
+                        emphasisSelector,
+                        colors,
+                    });
+                });
                 const plainStyle = buildVariantCssRule({
                     variantSelector: hostClasses['vira-tag-color-plain'].selector,
                     emphasisSelector,
@@ -376,84 +284,64 @@ export const ViraTag = defineViraElement<
                     ...standaloneStyles,
                 ];
             });
-
             return unsafeCSS(allStyles.join('\n'));
         }
-
-        function buildNotCheckedCssRule(
-            variantSelector: CSSResult,
-            colors: TagColorStateColors,
-        ): CSSResult {
+        function buildNotCheckedCssRule(variantSelector, colors) {
             const notCheckedSelector = hostClasses['vira-tag-not-checked'].selector;
-            return css`
+            return css `
                 ${variantSelector}${notCheckedSelector}${notCheckedSelector}${notCheckedSelector} {
                     ${cssVars['vira-tag-background-color'].name}: ${colors.idle.backgroundColor
-                        .value};
+                .value};
                     ${cssVars['vira-tag-text-color'].name}: ${colors.idle.textColor.value};
                     ${cssVars['vira-tag-border-color'].name}: ${colors.idle.borderColor.value};
 
                     ${cssVars['vira-tag-hover-background-color'].name}: ${colors.hover
-                        .backgroundColor.value};
+                .backgroundColor.value};
                     ${cssVars['vira-tag-hover-text-color'].name}: ${colors.hover.textColor.value};
                     ${cssVars['vira-tag-hover-border-color'].name}: ${colors.hover.borderColor
-                        .value};
+                .value};
 
                     ${cssVars['vira-tag-active-background-color'].name}: ${colors.active
-                        .backgroundColor.value};
+                .backgroundColor.value};
                     ${cssVars['vira-tag-active-text-color'].name}: ${colors.active.textColor.value};
                     ${cssVars['vira-tag-active-border-color'].name}: ${colors.active.borderColor
-                        .value};
+                .value};
                 }
             `;
         }
-
-        function generateNotCheckedCss(): CSSResult {
-            const themedStyles = getObjectTypedKeys(viraColorVariantToHostClassKey).map(
-                (colorVariant) => {
-                    const colorKey = viraColorVariantToHostClassKey[colorVariant];
-                    const colors = buildThemedNotCheckedColors(colorKey);
-                    const variantSelector = hostClasses[`vira-tag-color-${colorKey}`].selector;
-                    return buildNotCheckedCssRule(variantSelector, colors);
-                },
-            );
-            const plainStyle = buildNotCheckedCssRule(
-                hostClasses['vira-tag-color-plain'].selector,
-                plainNotCheckedColors,
-            );
-            const neutralStyle = buildNotCheckedCssRule(
-                hostClasses['vira-tag-color-neutral'].selector,
-                buildThemedNotCheckedColors(ViraThemeColorName.grey),
-            );
+        function generateNotCheckedCss() {
+            const themedStyles = getObjectTypedKeys(viraColorVariantToHostClassKey).map((colorVariant) => {
+                const colorKey = viraColorVariantToHostClassKey[colorVariant];
+                const colors = buildThemedNotCheckedColors(colorKey);
+                const variantSelector = hostClasses[`vira-tag-color-${colorKey}`].selector;
+                return buildNotCheckedCssRule(variantSelector, colors);
+            });
+            const plainStyle = buildNotCheckedCssRule(hostClasses['vira-tag-color-plain'].selector, plainNotCheckedColors);
+            const neutralStyle = buildNotCheckedCssRule(hostClasses['vira-tag-color-neutral'].selector, buildThemedNotCheckedColors(ViraThemeColorName.grey));
             const standaloneStyles = standaloneThemeColorNames.map((colorName) => {
                 const colors = buildThemedNotCheckedColors(colorName);
                 const variantSelector = hostClasses[`vira-tag-color-${colorName}`].selector;
                 return buildNotCheckedCssRule(variantSelector, colors);
             });
-
-            return unsafeCSS(
-                [
-                    ...themedStyles,
-                    plainStyle,
-                    neutralStyle,
-                    ...standaloneStyles,
-                ].join('\n'),
-            );
+            return unsafeCSS([
+                ...themedStyles,
+                plainStyle,
+                neutralStyle,
+                ...standaloneStyles,
+            ].join('\n'));
         }
-
-        function generateSizeVariantCss(): CSSResult {
+        function generateSizeVariantCss() {
             const styles = viraSizeVariants.map((sizeVariant) => {
-                return css`
+                return css `
                     ${hostClasses[`vira-tag-size-${sizeVariant}`].selector} button {
                         height: ${viraSizeHeights[sizeVariant]}px;
                         font-size: ${viraFormCssVars[`vira-form-${sizeVariant}-text-size`].value};
                     }
                 `;
             });
-
             return unsafeCSS(styles.join('\n'));
         }
-
-        return css`
+        return css `
             :host {
                 display: inline-flex;
             }
@@ -558,38 +446,36 @@ export const ViraTag = defineViraElement<
             }
         `;
     },
-    render({inputs, dispatch, events}) {
-        const disabled: boolean = !inputs.isClickable || !!inputs.disabled;
-        return html`
+    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({
-                                detail: !inputs.isClickable.selected,
-                            }),
-                        );
-                    } else if (inputs.isClickable?.cancellable) {
-                        dispatch(
-                            new events.cancel({
-                                detail: undefined,
-                            }),
-                        );
-                    }
-                })}
+            if (disabled) {
+                return;
+            }
+            else if (inputs.isClickable?.selected != undefined) {
+                dispatch(new events.toggle({
+                    detail: !inputs.isClickable.selected,
+                }));
+            }
+            else if (inputs.isClickable?.cancellable) {
+                dispatch(new events.cancel({
+                    detail: undefined,
+                }));
+            }
+        })}
             >
                 <${ViraIcon.assign({
-                    icon: Check16Icon,
-                })}
+            icon: Check16Icon,
+        })}
                     class="selected-check"
                 ></${ViraIcon}>
                 <span class="text">${String(inputs.text)}</span>
                 <${ViraIcon.assign({
-                    icon: X16Icon,
-                })}
+            icon: X16Icon,
+        })}
                     class="cancel-x"
                 ></${ViraIcon}>
             </button>

package/dist/elements/vira-text-area.element.d.ts

@@ -0,0 +1,48 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+/**
+ * A multi-line text area element with all listeners properly attached. Mirrors the look and feel of
+ * {@link ViraInput} but for multi-line text input.
+ *
+ * @category Input
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-text-area
+ */
+export declare const ViraTextArea: import("element-vir").DeclarativeElementDefinition<"vira-text-area", PartialWithUndefined<{
+    /** A label that is shown above the text area, if provided. */
+    label: string;
+    /** If true, applies error styling. */
+    hasError: boolean;
+    /** Number of visible text rows. Defaults to 4. */
+    rows: number;
+    /** If true, blocks the user's ability to resize the text area. */
+    preventResize: boolean;
+}> & {
+    value: string;
+} & PartialWithUndefined<{
+    placeholder: string;
+    disabled: boolean;
+    isReadonly: boolean;
+    allowedInputs: string | RegExp;
+    blockedInputs: string | RegExp;
+    disableBrowserHelps: boolean;
+    fitText: boolean;
+    attributePassthrough: import("element-vir").AttributeValues;
+}>, {
+    /**
+     * Used to couple the label and text area together. This is not applied if no label is
+     * provided.
+     */
+    randomId: string;
+}, {
+    /**
+     * Fires whenever a user input created a new value. Does not fire if all input letters are
+     * filtered out due to input restrictions.
+     */
+    valueChange: import("element-vir").DefineElementEvent<string>;
+    /**
+     * Fires when inputs are blocked. Useful for showing warnings or error messages to inform
+     * the user why their input did not propagate if it was blocked. This does not fire for text
+     * that was blocked out of programmatic "value" property assignments.
+     */
+    inputBlocked: import("element-vir").DefineElementEvent<string>;
+}, "vira-text-area-disabled" | "vira-text-area-error" | "vira-text-area-prevent-resize", "vira-text-area-padding-horizontal" | "vira-text-area-padding-vertical", readonly [], readonly []>;