vira 31.15.2 → 31.16.1

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

@@ -1,6 +1,7 @@
 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.
  *
@@ -27,16 +28,17 @@ export declare const ViraButton: import("element-vir").DeclarativeElementDefinit
      */
     buttonSize: ViraSize;
     /**
-     * Set a predefined color variant. Set to `ViraColorVariant.None` for maximum customization.
+     * 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.Info,
+     * @default ViraColorVariant.Plain
      */
-    colorVariant: ViraColorVariant;
+    color: ViraColorVariant | ViraThemeColorName;
     /**
      * Set to `true`
      *
      * @default false
      */
     showMenuCaret: boolean;
-}>, {}, {}, "vira-button-with-menu-caret" | "vira-button-size-large" | "vira-button-size-medium" | "vira-button-size-small" | "vira-button-emphasis-standard" | "vira-button-emphasis-subtle" | "vira-button-color-info" | "vira-button-color-plain" | "vira-button-color-neutral" | "vira-button-color-danger" | "vira-button-color-warning" | "vira-button-color-positive" | "vira-button-color-brand" | "vira-button-color-special" | "vira-button-disabled" | "vira-button-icon-only", "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 []>;
+}>, {}, {}, "vira-button-with-menu-caret" | "vira-button-size-large" | "vira-button-size-medium" | "vira-button-size-small" | "vira-button-emphasis-standard" | "vira-button-emphasis-subtle" | "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-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/dist/elements/vira-button.element.js

@@ -1,21 +1,20 @@
-import { arrayToObject, mapEnumToObject } from '@augment-vir/common';
+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 { ChevronDown16Icon } from '../icons/index.js';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
-import { viraColorVariants, viraColorVariantToColorName, viraEmphasisVariants, viraSizeHeights, viraSizeVariants, } from '../styles/form-variants.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 } from '../styles/vira-color-theme-object.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`,
 };
-function buildThemedButtonColors(colorVariant) {
-    const colorName = viraColorVariantToColorName[colorVariant];
+function buildThemedButtonColors(colorName) {
     const behindBg = viraThemeByKeys[colorName]['behind-bg'];
     const foreground = viraThemeByKeys[colorName].foreground;
     const onSelf = viraThemeByKeys[colorName]['on-self'];
@@ -56,66 +55,61 @@ function buildThemedButtonColors(colorVariant) {
         },
     };
 }
-const colorVariantColors = {
-    ...mapEnumToObject(ViraColorVariant, (colorVariant) => {
-        return buildThemedButtonColors(colorVariant);
-    }),
-    [ViraColorVariant.Plain]: {
-        [ViraEmphasis.Standard]: {
-            idle: {
-                backgroundColor: viraTheme.inverse[themeDefaultKey].background,
-                textColor: viraTheme.inverse[themeDefaultKey].foreground,
-                borderColor: viraTheme.inverse[themeDefaultKey].background,
-            },
-            hover: {
-                backgroundColor: viraTheme.colors['vira-grey-behind-bg-non-body'].background,
-                textColor: viraTheme.colors['vira-grey-behind-bg-non-body'].foreground,
-                borderColor: viraTheme.inverse[themeDefaultKey].background,
-            },
-            active: {
-                backgroundColor: viraTheme.colors['vira-grey-behind-bg-body'].background,
-                textColor: viraTheme.colors['vira-grey-behind-bg-body'].foreground,
-                borderColor: viraTheme.inverse[themeDefaultKey].background,
-            },
+const plainButtonColors = {
+    [ViraEmphasis.Standard]: {
+        idle: {
+            backgroundColor: viraTheme.inverse[themeDefaultKey].background,
+            textColor: viraTheme.inverse[themeDefaultKey].foreground,
+            borderColor: viraTheme.inverse[themeDefaultKey].background,
         },
-        [ViraEmphasis.Subtle]: {
-            idle: {
-                backgroundColor: transparentColor,
-                textColor: viraTheme.colors[themeDefaultKey].foreground,
-                borderColor: transparentColor,
-            },
-            hover: {
-                backgroundColor: viraTheme.colors['vira-grey-on-self-body'].background,
-                textColor: viraTheme.colors['vira-grey-on-self-body'].foreground,
-                borderColor: viraTheme.colors['vira-grey-on-self-body'].foreground,
-            },
-            active: {
-                backgroundColor: viraTheme.colors['vira-grey-on-self-non-body'].background,
-                textColor: viraTheme.colors['vira-grey-on-self-non-body'].foreground,
-                borderColor: viraTheme.colors['vira-grey-on-self-non-body'].foreground,
-            },
+        hover: {
+            backgroundColor: viraTheme.colors['vira-grey-behind-bg-non-body'].background,
+            textColor: viraTheme.colors['vira-grey-behind-bg-non-body'].foreground,
+            borderColor: viraTheme.inverse[themeDefaultKey].background,
+        },
+        active: {
+            backgroundColor: viraTheme.colors['vira-grey-behind-bg-body'].background,
+            textColor: viraTheme.colors['vira-grey-behind-bg-body'].foreground,
+            borderColor: viraTheme.inverse[themeDefaultKey].background,
         },
     },
-    [ViraColorVariant.Neutral]: {
-        [ViraEmphasis.Standard]: {
-            idle: {
-                backgroundColor: viraTheme.colors[themeDefaultKey].background,
-                textColor: viraTheme.colors[themeDefaultKey].foreground,
-                borderColor: viraFormCssVars['vira-form-border-color'],
-            },
-            hover: {
-                backgroundColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
-                textColor: viraTheme.colors['vira-grey-behind-fg-small-body'].foreground,
-                borderColor: viraFormCssVars['vira-form-border-color'],
-            },
-            active: {
-                backgroundColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
-                textColor: viraTheme.colors['vira-grey-behind-fg-body'].foreground,
-                borderColor: viraFormCssVars['vira-form-border-color'],
-            },
+    [ViraEmphasis.Subtle]: {
+        idle: {
+            backgroundColor: transparentColor,
+            textColor: viraTheme.colors[themeDefaultKey].foreground,
+            borderColor: transparentColor,
+        },
+        hover: {
+            backgroundColor: viraTheme.colors['vira-grey-on-self-body'].background,
+            textColor: viraTheme.colors['vira-grey-on-self-body'].foreground,
+            borderColor: viraTheme.colors['vira-grey-on-self-body'].foreground,
+        },
+        active: {
+            backgroundColor: viraTheme.colors['vira-grey-on-self-non-body'].background,
+            textColor: viraTheme.colors['vira-grey-on-self-non-body'].foreground,
+            borderColor: viraTheme.colors['vira-grey-on-self-non-body'].foreground,
+        },
+    },
+};
+const neutralButtonColors = {
+    [ViraEmphasis.Standard]: {
+        idle: {
+            backgroundColor: viraTheme.colors[themeDefaultKey].background,
+            textColor: viraTheme.colors[themeDefaultKey].foreground,
+            borderColor: viraFormCssVars['vira-form-border-color'],
+        },
+        hover: {
+            backgroundColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
+            textColor: viraTheme.colors['vira-grey-behind-fg-small-body'].foreground,
+            borderColor: viraFormCssVars['vira-form-border-color'],
+        },
+        active: {
+            backgroundColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
+            textColor: viraTheme.colors['vira-grey-behind-fg-body'].foreground,
+            borderColor: viraFormCssVars['vira-form-border-color'],
         },
-        [ViraEmphasis.Subtle]: buildThemedButtonColors(ViraColorVariant.Neutral)[ViraEmphasis.Subtle],
     },
+    [ViraEmphasis.Subtle]: buildThemedButtonColors(ViraThemeColorName.grey)[ViraEmphasis.Subtle],
 };
 /**
  * A custom button with default styling.
@@ -133,13 +127,24 @@ export const ViraButton = defineViraElement()({
         'vira-button-size-small': ({ inputs }) => inputs.buttonSize === ViraSize.Small,
         'vira-button-emphasis-standard': ({ inputs }) => !inputs.buttonEmphasis || inputs.buttonEmphasis === ViraEmphasis.Standard,
         'vira-button-emphasis-subtle': ({ inputs }) => inputs.buttonEmphasis === ViraEmphasis.Subtle,
-        ...arrayToObject(viraColorVariants, (colorVariant) => {
+        ...arrayToObject(getObjectTypedKeys(viraColorVariantToHostClassKey), (colorVariant) => {
+            const colorKey = viraColorVariantToHostClassKey[colorVariant];
             return {
-                key: `vira-button-color-${colorVariant}`,
+                key: `vira-button-color-${colorKey}`,
                 value: ({ inputs, }) => {
-                    return colorVariant === ViraColorVariant.Plain
-                        ? !inputs.colorVariant || inputs.colorVariant === colorVariant
-                        : inputs.colorVariant === colorVariant;
+                    return inputs.color === colorVariant || inputs.color === colorKey;
+                },
+            };
+        }, {
+            useRequired: true,
+        }),
+        'vira-button-color-plain': ({ inputs, }) => !inputs.color || inputs.color === ViraColorVariant.Plain,
+        'vira-button-color-neutral': ({ inputs, }) => inputs.color === ViraColorVariant.Neutral,
+        ...arrayToObject(standaloneThemeColorNames, (colorName) => {
+            return {
+                key: `vira-button-color-${colorName}`,
+                value: ({ inputs, }) => {
+                    return inputs.color === colorName;
                 },
             };
         }, {
@@ -165,37 +170,52 @@ export const ViraButton = defineViraElement()({
         'vira-button-border-radius': viraFormCssVars['vira-form-radius'].value,
     },
     styles: ({ hostClasses, cssVars }) => {
-        function generateVariantCss() {
-            const allStyles = viraEmphasisVariants.flatMap((emphasis) => {
-                return viraColorVariants.map((colorVariant) => {
-                    const colors = colorVariantColors[colorVariant][emphasis];
-                    const variantSelector = hostClasses[`vira-button-color-${colorVariant}`].selector;
-                    const emphasisSelector = hostClasses[`vira-button-emphasis-${emphasis}`].selector;
-                    return css `
-                        ${variantSelector}${emphasisSelector} {
-                            ${cssVars['vira-button-background-color'].name}: ${colors.idle
-                        .backgroundColor.value};
-                            ${cssVars['vira-button-text-color'].name}: ${colors.idle.textColor
-                        .value};
-                            ${cssVars['vira-button-border-color'].name}: ${colors.idle.borderColor
-                        .value};
+        function buildVariantCssRule(variantSelector, emphasisSelector, colors) {
+            return css `
+                ${variantSelector}${emphasisSelector} {
+                    ${cssVars['vira-button-background-color'].name}: ${colors.idle.backgroundColor
+                .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};
-                            ${cssVars['vira-button-hover-text-color'].name}: ${colors.hover
-                        .textColor.value};
-                            ${cssVars['vira-button-hover-border-color'].name}: ${colors.hover
-                        .borderColor.value};
+                    ${cssVars['vira-button-hover-background-color'].name}: ${colors.hover
+                .backgroundColor.value};
+                    ${cssVars['vira-button-hover-text-color'].name}: ${colors.hover.textColor
+                .value};
+                    ${cssVars['vira-button-hover-border-color'].name}: ${colors.hover.borderColor
+                .value};
 
-                            ${cssVars['vira-button-active-background-color'].name}: ${colors.active
-                        .backgroundColor.value};
-                            ${cssVars['vira-button-active-text-color'].name}: ${colors.active
-                        .textColor.value};
-                            ${cssVars['vira-button-active-border-color'].name}: ${colors.active
-                        .borderColor.value};
-                        }
-                    `;
+                    ${cssVars['vira-button-active-background-color'].name}: ${colors.active
+                .backgroundColor.value};
+                    ${cssVars['vira-button-active-text-color'].name}: ${colors.active.textColor
+                .value};
+                    ${cssVars['vira-button-active-border-color'].name}: ${colors.active.borderColor
+                .value};
+                }
+            `;
+        }
+        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 plainStyle = buildVariantCssRule(hostClasses['vira-button-color-plain'].selector, emphasisSelector, plainButtonColors[emphasis]);
+                const neutralStyle = buildVariantCssRule(hostClasses['vira-button-color-neutral'].selector, emphasisSelector, neutralButtonColors[emphasis]);
+                const standaloneStyles = standaloneThemeColorNames.map((colorName) => {
+                    const colors = buildThemedButtonColors(colorName)[emphasis];
+                    const variantSelector = hostClasses[`vira-button-color-${colorName}`].selector;
+                    return buildVariantCssRule(variantSelector, emphasisSelector, colors);
                 });
+                return [
+                    ...themedStyles,
+                    plainStyle,
+                    neutralStyle,
+                    ...standaloneStyles,
+                ];
             });
             return unsafeCSS(allStyles.join('\n'));
         }

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

@@ -2,7 +2,7 @@ import { type PartialWithUndefined } from '@augment-vir/common';
 import { type FullSpaRoute, type GenericTreePaths, type SpaRouter } from 'spa-router-vir';
 import { type ViraIconSvg } from '../icons/icon-svg.js';
 import { ViraColorVariant } from '../styles/form-variants.js';
-import { type HorizontalAnchor, type PopUpOffset } from './pop-up/vira-pop-up-trigger.element.js';
+import { ViraThemeColorName } from '../styles/vira-color-theme-object.js';
 /**
  * Controls which edge of the tab the selection indicator bar appears on.
  *
@@ -45,7 +45,7 @@ export type ViraTab = {
  */
 export declare const ViraTabs: import("element-vir").DeclarativeElementDefinition<"vira-tabs", {
     tabs: ReadonlyArray<Readonly<ViraTab>>;
-    router: Pick<SpaRouter<any, any, any>, "createRouteUrl" | "setRouteOnDirectNavigation">;
+    router: Pick<SpaRouter<any, any, any>, "createRouteUrl" | "setRouteOnDirectNavigation" | "setRoute">;
     currentRoute: Readonly<FullSpaRoute>;
 } & PartialWithUndefined<{
     /**
@@ -55,34 +55,32 @@ export declare const ViraTabs: import("element-vir").DeclarativeElementDefinitio
      */
     barDirection: ViraTabsBarDirection;
     /**
-     * Color variant for the tab selection indicator and active tab text.
+     * Color variant for the tab selection indicator and active tab text. Accepts any
+     * {@link ViraColorVariant} or a {@link ViraThemeColorName} (e.g.,
+     * `ViraThemeColorName.blue`).
      *
-     * @default ViraColorVariant.Info
+     * @default ViraColorVariant.Plain
      */
-    colorVariant: ViraColorVariant;
+    color: ViraColorVariant | ViraThemeColorName;
     /**
      * Layout direction for icons relative to their label text.
      *
      * @default ViraTabsIconLayout.Vertical
      */
     iconLayout: ViraTabsIconLayout;
-    /**
-     * Horizontal anchor for the dropdown menu. Only used when tabs overflow into a dropdown.
-     *
-     * @default HorizontalAnchor.Left
-     */
-    menuHorizontalAnchor: HorizontalAnchor;
-    /** Whether the dropdown trigger is disabled. Only used when tabs overflow into a dropdown. */
-    menuIsDisabled: boolean;
-    /** Offset for the dropdown pop-up. Only used when tabs overflow into a dropdown. */
-    menuPopUpOffset: Readonly<PopUpOffset>;
     /** When true, tabs and their container expand to fill all available horizontal space. */
     shouldFillWidth: boolean;
 }>, {
     isOverflowing: boolean;
     /** A callback to remove all internal observers. */
     cleanupObserver: undefined | (() => void);
+    /**
+     * Captured at the moment the overflow select is opened (mousedown or keydown on the
+     * select). Once the native picker opens, the OS owns keyboard input, so modifier state
+     * must be captured before that.
+     */
+    modifierKeyHeld: boolean;
 }, {
     /** Fires when a tab is clicked with the corresponding tab entry. */
     tabSelect: import("element-vir").DefineEvent<Readonly<ViraTab>>;
-}, "vira-tabs-bar-top" | "vira-tabs-bar-bottom" | "vira-tabs-bar-left" | "vira-tabs-bar-right" | "vira-tabs-color-info" | "vira-tabs-color-plain" | "vira-tabs-color-neutral" | "vira-tabs-color-danger" | "vira-tabs-color-warning" | "vira-tabs-color-positive" | "vira-tabs-color-brand" | "vira-tabs-color-special" | "vira-tabs-icon-layout-vertical" | "vira-tabs-icon-layout-horizontal" | "vira-tabs-overflowing" | "vira-tabs-fill-width", "vira-tabs-active-color" | "vira-tabs-active-hover-color" | "vira-tabs-inactive-color" | "vira-tabs-inactive-hover-color" | "vira-tabs-bar-thickness", readonly [], readonly []>;
+}, "vira-tabs-bar-top" | "vira-tabs-bar-bottom" | "vira-tabs-bar-left" | "vira-tabs-bar-right" | "vira-tabs-color-red" | "vira-tabs-color-yellow" | "vira-tabs-color-green" | "vira-tabs-color-blue" | "vira-tabs-color-brand" | "vira-tabs-color-purple" | "vira-tabs-color-plain" | "vira-tabs-color-neutral" | "vira-tabs-color-teal" | "vira-tabs-color-pink" | "vira-tabs-color-grey" | "vira-tabs-icon-layout-vertical" | "vira-tabs-icon-layout-horizontal" | "vira-tabs-overflowing" | "vira-tabs-fill-width", "vira-tabs-active-color" | "vira-tabs-active-hover-color" | "vira-tabs-inactive-color" | "vira-tabs-inactive-hover-color" | "vira-tabs-bar-thickness", readonly [], readonly []>;

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

@@ -1,21 +1,18 @@
 import { check } from '@augment-vir/assert';
-import { arrayToObject, filterMap } from '@augment-vir/common';
+import { arrayToObject, filterMap, getObjectTypedKeys, } from '@augment-vir/common';
 import { ContrastLevelName } from '@electrovir/color/dist/data/contrast/contrast.js';
 import { classMap, css, defineElementEvent, html, listen, nothing, onDomCreated, unsafeCSS, } from 'element-vir';
 import { routeHasPaths, } from 'spa-router-vir';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
-import { ViraColorVariant, viraColorVariantToColorName, viraColorVariants, } from '../styles/form-variants.js';
+import { standaloneThemeColorNames, ViraColorVariant, viraColorVariantToHostClassKey, } from '../styles/form-variants.js';
 import { noNativeFormStyles, noUserSelect, viraDisabledStyles, viraTheme } from '../styles/index.js';
-import { viraThemeByKeys } from '../styles/vira-color-theme-object.js';
+import { viraThemeByKeys, ViraThemeColorName } from '../styles/vira-color-theme-object.js';
 import { defineViraElement } from '../util/define-vira-element.js';
 import { createOverflowObserver } from '../util/overflow-observer.js';
-import { renderMenuItemEntries } from '../util/pop-up-helpers.js';
-import { ViraMenuTrigger } from './pop-up/vira-menu-trigger.element.js';
-import { ViraMenuCornerStyle } from './pop-up/vira-menu.element.js';
-import { ViraButton } from './vira-button.element.js';
 import { ViraIcon } from './vira-icon.element.js';
 import { ViraLink } from './vira-link.element.js';
+import { ViraSelect } from './vira-select.element.js';
 /**
  * Controls which edge of the tab the selection indicator bar appears on.
  *
@@ -56,6 +53,12 @@ export const ViraTabs = defineViraElement()({
             isOverflowing: false,
             /** A callback to remove all internal observers. */
             cleanupObserver: undefined,
+            /**
+             * Captured at the moment the overflow select is opened (mousedown or keydown on the
+             * select). Once the native picker opens, the OS owns keyboard input, so modifier state
+             * must be captured before that.
+             */
+            modifierKeyHeld: false,
         };
     },
     hostClasses: {
@@ -63,13 +66,24 @@ export const ViraTabs = defineViraElement()({
         'vira-tabs-bar-bottom': ({ inputs }) => !inputs.barDirection || inputs.barDirection === ViraTabsBarDirection.Bottom,
         'vira-tabs-bar-left': ({ inputs }) => inputs.barDirection === ViraTabsBarDirection.Left,
         'vira-tabs-bar-right': ({ inputs }) => inputs.barDirection === ViraTabsBarDirection.Right,
-        ...arrayToObject(viraColorVariants, (colorVariant) => {
+        ...arrayToObject(getObjectTypedKeys(viraColorVariantToHostClassKey), (colorVariant) => {
+            const colorKey = viraColorVariantToHostClassKey[colorVariant];
             return {
-                key: `vira-tabs-color-${colorVariant}`,
+                key: `vira-tabs-color-${colorKey}`,
                 value: ({ inputs, }) => {
-                    return colorVariant === ViraColorVariant.Plain
-                        ? !inputs.colorVariant || inputs.colorVariant === colorVariant
-                        : inputs.colorVariant === colorVariant;
+                    return inputs.color === colorVariant || inputs.color === colorKey;
+                },
+            };
+        }, {
+            useRequired: true,
+        }),
+        'vira-tabs-color-plain': ({ inputs, }) => !inputs.color || inputs.color === ViraColorVariant.Plain,
+        'vira-tabs-color-neutral': ({ inputs, }) => inputs.color === ViraColorVariant.Neutral,
+        ...arrayToObject(standaloneThemeColorNames, (colorName) => {
+            return {
+                key: `vira-tabs-color-${colorName}`,
+                value: ({ inputs, }) => {
+                    return inputs.color === colorName;
                 },
             };
         }, {
@@ -81,40 +95,57 @@ export const ViraTabs = defineViraElement()({
         'vira-tabs-fill-width': ({ inputs }) => !!inputs.shouldFillWidth,
     },
     cssVars: {
-        'vira-tabs-active-color': viraThemeByKeys[viraColorVariantToColorName[ViraColorVariant.Info]]['behind-bg'][ContrastLevelName.NonBodyText].background.value,
-        'vira-tabs-active-hover-color': viraThemeByKeys[viraColorVariantToColorName[ViraColorVariant.Info]]['behind-bg'][ContrastLevelName.Header].background.value,
+        'vira-tabs-active-color': viraThemeByKeys[viraColorVariantToHostClassKey[ViraColorVariant.Info]]['behind-bg'][ContrastLevelName.NonBodyText].background.value,
+        'vira-tabs-active-hover-color': viraThemeByKeys[viraColorVariantToHostClassKey[ViraColorVariant.Info]]['behind-bg'][ContrastLevelName.Header].background.value,
         'vira-tabs-inactive-color': viraTheme.colors['vira-grey-foreground-header'].foreground.value,
         'vira-tabs-inactive-hover-color': viraTheme.colors['vira-grey-foreground-non-body'].foreground.value,
         'vira-tabs-bar-thickness': '3px',
     },
     styles: ({ hostClasses, cssVars }) => {
+        function buildThemedTabsColors(colorName) {
+            return {
+                active: viraThemeByKeys[colorName]['behind-bg'][ContrastLevelName.NonBodyText]
+                    .background,
+                hover: viraThemeByKeys[colorName]['behind-bg'][ContrastLevelName.Header].background,
+            };
+        }
+        function buildVariantCssRule(variantSelector, colors) {
+            return css `
+                ${variantSelector} {
+                    ${cssVars['vira-tabs-active-color'].name}: ${colors.active.value};
+                    ${cssVars['vira-tabs-active-hover-color'].name}: ${colors.hover.value};
+                }
+            `;
+        }
         function generateVariantCss() {
             const plainColors = {
                 active: viraTheme.colors['vira-grey-foreground-small-body'].foreground,
                 hover: viraTheme.colors['vira-grey-foreground-body'].foreground,
             };
-            const allStyles = viraColorVariants
-                .map((colorVariant) => {
-                const variantSelector = hostClasses[`vira-tabs-color-${colorVariant}`].selector;
-                const colors = colorVariant === ViraColorVariant.Plain
-                    ? plainColors
-                    : {
-                        active: viraThemeByKeys[viraColorVariantToColorName[colorVariant]]['behind-bg'][ContrastLevelName.NonBodyText].background,
-                        hover: viraThemeByKeys[viraColorVariantToColorName[colorVariant]]['behind-bg'][ContrastLevelName.Header].background,
-                    };
-                return css `
-                        ${variantSelector} {
-                            ${cssVars['vira-tabs-active-color'].name}: ${colors.active.value};
-                            ${cssVars['vira-tabs-active-hover-color'].name}: ${colors.hover.value};
-                        }
-                    `;
-            })
-                .join('\n');
-            return unsafeCSS(allStyles);
+            const themedStyles = getObjectTypedKeys(viraColorVariantToHostClassKey).map((colorVariant) => {
+                const colorKey = viraColorVariantToHostClassKey[colorVariant];
+                const variantSelector = hostClasses[`vira-tabs-color-${colorKey}`].selector;
+                const colors = buildThemedTabsColors(colorKey);
+                return buildVariantCssRule(variantSelector, colors);
+            });
+            const plainStyle = buildVariantCssRule(hostClasses['vira-tabs-color-plain'].selector, plainColors);
+            const neutralStyle = buildVariantCssRule(hostClasses['vira-tabs-color-neutral'].selector, buildThemedTabsColors(ViraThemeColorName.grey));
+            const standaloneStyles = standaloneThemeColorNames.map((colorName) => {
+                const variantSelector = hostClasses[`vira-tabs-color-${colorName}`].selector;
+                const colors = buildThemedTabsColors(colorName);
+                return buildVariantCssRule(variantSelector, colors);
+            });
+            return unsafeCSS([
+                ...themedStyles,
+                plainStyle,
+                neutralStyle,
+                ...standaloneStyles,
+            ].join('\n'));
         }
         return css `
             :host {
                 display: flex;
+                position: relative;
                 box-sizing: border-box;
                 ${noUserSelect};
                 width: 100%;
@@ -265,18 +296,19 @@ export const ViraTabs = defineViraElement()({
 
             ${hostClasses['vira-tabs-overflowing'].selector} .tabs-container {
                 visibility: hidden;
+                position: absolute;
                 height: 0;
             }
 
-            .overflow-menu {
+            ${ViraSelect} {
                 display: none;
             }
 
-            ${hostClasses['vira-tabs-overflowing'].selector} .overflow-menu {
-                display: flex;
+            ${hostClasses['vira-tabs-overflowing'].selector} ${ViraSelect} {
+                display: inline-flex;
                 align-items: center;
                 width: fit-content;
-                padding-left: 8px;
+                max-width: 100%;
             }
 
             ${hostClasses['vira-tabs-fill-width'].selector} {
@@ -302,10 +334,6 @@ export const ViraTabs = defineViraElement()({
                 display: flex;
                 padding: 8px 16px;
             }
-
-            ${ViraMenuTrigger} {
-                margin: 3px 0;
-            }
         `;
     },
     cleanup({ state }) {
@@ -365,53 +393,53 @@ export const ViraTabs = defineViraElement()({
                 `;
         }, check.isTruthy);
         const selectedTab = inputs.tabs.find((tab) => routeHasPaths(inputs.currentRoute, tab.paths));
-        const menuItems = renderMenuItemEntries(filterMap(inputs.tabs, (tab) => {
+        const selectOptions = filterMap(inputs.tabs, (tab) => {
             if (tab.isHidden) {
                 return undefined;
             }
-            const isSelected = routeHasPaths(inputs.currentRoute, tab.paths);
             return {
-                content: html `
-                            <${ViraLink.assign({
-                    route: {
-                        router: inputs.router,
-                        route: {
-                            paths: tab.paths.fullPaths,
-                        },
-                        scrollToTop: true,
-                    },
-                    disableLinkStyles: true,
-                })}>
-                                ${tab.label}
-                            </${ViraLink}>
-                        `,
-                selected: isSelected,
+                value: tab.paths.fullPaths.join('/'),
+                label: tab.label,
                 disabled: tab.isDisabled,
-                onClick() {
-                    if (!tab.isDisabled) {
-                        dispatch(new events.tabSelect(tab));
-                    }
-                },
             };
-        }, check.isTruthy));
+        }, check.isTruthy);
+        function captureModifierState(event) {
+            updateState({
+                modifierKeyHeld: event.ctrlKey || event.metaKey || event.shiftKey,
+            });
+        }
         return html `
-            <${ViraMenuTrigger.assign({
-            horizontalAnchor: inputs.menuHorizontalAnchor,
-            isDisabled: inputs.menuIsDisabled,
-            popUpOffset: inputs.menuPopUpOffset,
-            menuCornerStyle: ViraMenuCornerStyle.AllRounded,
+            <${ViraSelect.assign({
+            options: selectOptions,
+            value: selectedTab?.paths.fullPaths.join('/'),
         })}
-                class="overflow-menu"
-            >
-                <${ViraButton.assign({
-            text: selectedTab?.label || '',
-            showMenuCaret: true,
-            colorVariant: ViraColorVariant.Neutral,
+                ${listen('mousedown', captureModifierState)}
+                ${listen('keydown', captureModifierState)}
+                ${listen(ViraSelect.events.valueChange, (event) => {
+            try {
+                const selectedValue = event.detail;
+                const tab = inputs.tabs.find((tab) => tab.paths.fullPaths.join('/') === selectedValue);
+                if (!tab || tab.isDisabled) {
+                    return;
+                }
+                dispatch(new events.tabSelect(tab));
+                const route = {
+                    paths: tab.paths.fullPaths,
+                };
+                if (state.modifierKeyHeld) {
+                    globalThis.open(inputs.router.createRouteUrl(route), '_blank', 'noopener,noreferrer');
+                }
+                else {
+                    inputs.router.setRoute(route);
+                }
+            }
+            finally {
+                updateState({
+                    modifierKeyHeld: false,
+                });
+            }
         })}
-                    slot=${ViraMenuTrigger.slotNames.trigger}
-                ></${ViraButton}>
-                ${menuItems}
-            </${ViraMenuTrigger}>
+            ></${ViraSelect}>
             <ul
                 class="tabs-container"
                 role="tablist"

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

@@ -1,6 +1,7 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { type Primitive, type RequireExactlyOne } from 'type-fest';
 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.
@@ -26,10 +27,15 @@ export declare const ViraTag: import("element-vir").DeclarativeElementDefinition
     size: ViraSize;
     /** @default ViraEmphasis.Standard */
     emphasis: ViraEmphasis;
-    /** @default ViraColorVariant.Info */
-    colorVariant: ViraColorVariant;
+    /**
+     * 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-info" | "vira-tag-color-plain" | "vira-tag-color-neutral" | "vira-tag-color-danger" | "vira-tag-color-warning" | "vira-tag-color-positive" | "vira-tag-color-brand" | "vira-tag-color-special", "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 []>;
+}, "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 []>;

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

@@ -1,23 +1,22 @@
 import { check } from '@augment-vir/assert';
-import { arrayToObject, mapEnumToObject } from '@augment-vir/common';
+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 { ViraColorVariant, viraColorVariants, viraColorVariantToColorName, ViraEmphasis, viraEmphasisVariants, ViraSize, viraSizeHeights, viraSizeVariants, } from '../styles/form-variants.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 } from '../styles/vira-color-theme-object.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`,
 };
-function buildThemedTagColors(colorVariant) {
-    const colorName = viraColorVariantToColorName[colorVariant];
+function buildThemedTagColors(colorName) {
     const behindBg = viraThemeByKeys[colorName]['behind-bg'];
     const onSelf = viraThemeByKeys[colorName]['on-self'];
     return {
@@ -57,8 +56,7 @@ function buildThemedTagColors(colorVariant) {
         },
     };
 }
-function buildThemedNotCheckedColors(colorVariant) {
-    const colorName = viraColorVariantToColorName[colorVariant];
+function buildThemedNotCheckedColors(colorName) {
     const onSelfBodyText = viraThemeByKeys[colorName]['on-self'][ContrastLevelName.BodyText];
     return {
         idle: {
@@ -78,69 +76,59 @@ function buildThemedNotCheckedColors(colorVariant) {
         },
     };
 }
-const tagColorVariantColors = {
-    ...mapEnumToObject(ViraColorVariant, (colorVariant) => {
-        return buildThemedTagColors(colorVariant);
-    }),
-    [ViraColorVariant.Plain]: {
-        [ViraEmphasis.Standard]: {
-            idle: {
-                backgroundColor: viraTheme.colors[themeDefaultKey].foreground,
-                textColor: viraTheme.colors[themeDefaultKey].background,
-                borderColor: viraTheme.colors[themeDefaultKey].foreground,
-            },
-            hover: {
-                backgroundColor: viraTheme.colors['vira-grey-behind-bg-body'].background,
-                textColor: viraTheme.colors['vira-grey-behind-bg-body'].foreground,
-                borderColor: viraTheme.colors['vira-grey-behind-bg-body'].background,
-            },
-            active: {
-                backgroundColor: viraTheme.colors[themeDefaultKey].foreground,
-                textColor: viraTheme.colors[themeDefaultKey].background,
-                borderColor: viraTheme.colors[themeDefaultKey].foreground,
-            },
+const plainTagColors = {
+    [ViraEmphasis.Standard]: {
+        idle: {
+            backgroundColor: viraTheme.colors[themeDefaultKey].foreground,
+            textColor: viraTheme.colors[themeDefaultKey].background,
+            borderColor: viraTheme.colors[themeDefaultKey].foreground,
         },
-        [ViraEmphasis.Subtle]: {
-            idle: {
-                backgroundColor: transparentColor,
-                textColor: viraTheme.colors[themeDefaultKey].foreground,
-                borderColor: transparentColor,
-            },
-            hover: {
-                backgroundColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
-                textColor: viraTheme.colors['vira-grey-behind-fg-small-body'].foreground,
-                borderColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
-            },
-            active: {
-                backgroundColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
-                textColor: viraTheme.colors['vira-grey-behind-fg-body'].foreground,
-                borderColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
-            },
+        hover: {
+            backgroundColor: viraTheme.colors['vira-grey-behind-bg-body'].background,
+            textColor: viraTheme.colors['vira-grey-behind-bg-body'].foreground,
+            borderColor: viraTheme.colors['vira-grey-behind-bg-body'].background,
+        },
+        active: {
+            backgroundColor: viraTheme.colors[themeDefaultKey].foreground,
+            textColor: viraTheme.colors[themeDefaultKey].background,
+            borderColor: viraTheme.colors[themeDefaultKey].foreground,
         },
     },
-};
-const tagNotCheckedColors = {
-    ...mapEnumToObject(ViraColorVariant, (colorVariant) => {
-        return buildThemedNotCheckedColors(colorVariant);
-    }),
-    [ViraColorVariant.Plain]: {
+    [ViraEmphasis.Subtle]: {
         idle: {
-            textColor: viraTheme.colors[themeDefaultKey].foreground,
             backgroundColor: transparentColor,
-            borderColor: viraTheme.colors['vira-grey-on-self-body'].background,
+            textColor: viraTheme.colors[themeDefaultKey].foreground,
+            borderColor: transparentColor,
         },
         hover: {
             backgroundColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
             textColor: viraTheme.colors['vira-grey-behind-fg-small-body'].foreground,
-            borderColor: viraTheme.colors['vira-grey-on-self-body'].background,
+            borderColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
         },
         active: {
             backgroundColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
             textColor: viraTheme.colors['vira-grey-behind-fg-body'].foreground,
-            borderColor: viraTheme.colors['vira-grey-on-self-body'].background,
+            borderColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
         },
     },
 };
+const plainNotCheckedColors = {
+    idle: {
+        textColor: viraTheme.colors[themeDefaultKey].foreground,
+        backgroundColor: transparentColor,
+        borderColor: viraTheme.colors['vira-grey-on-self-body'].background,
+    },
+    hover: {
+        backgroundColor: viraTheme.colors['vira-grey-behind-fg-small-body'].background,
+        textColor: viraTheme.colors['vira-grey-behind-fg-small-body'].foreground,
+        borderColor: viraTheme.colors['vira-grey-on-self-body'].background,
+    },
+    active: {
+        backgroundColor: viraTheme.colors['vira-grey-behind-fg-body'].background,
+        textColor: viraTheme.colors['vira-grey-behind-fg-body'].foreground,
+        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.
@@ -184,13 +172,24 @@ export const ViraTag = defineViraElement()({
         '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,
-        ...arrayToObject(viraColorVariants, (colorVariant) => {
+        ...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, }) => !inputs.color || inputs.color === ViraColorVariant.Plain,
+        'vira-tag-color-neutral': ({ inputs, }) => inputs.color === ViraColorVariant.Neutral,
+        ...arrayToObject(standaloneThemeColorNames, (colorName) => {
             return {
-                key: `vira-tag-color-${colorVariant}`,
+                key: `vira-tag-color-${colorName}`,
                 value: ({ inputs, }) => {
-                    return colorVariant === ViraColorVariant.Plain
-                        ? !inputs.colorVariant || inputs.colorVariant === colorVariant
-                        : inputs.colorVariant === colorVariant;
+                    return inputs.color === colorName;
                 },
             };
         }, {
@@ -198,68 +197,96 @@ export const ViraTag = defineViraElement()({
         }),
     },
     styles: ({ cssVars, hostClasses }) => {
-        function generateVariantCss() {
-            const allStyles = viraEmphasisVariants.flatMap((emphasis) => {
-                return viraColorVariants.map((colorVariant) => {
-                    const colors = tagColorVariantColors[colorVariant][emphasis];
-                    const variantSelector = hostClasses[`vira-tag-color-${colorVariant}`].selector;
-                    const emphasisSelector = hostClasses[`vira-tag-emphasis-${emphasis}`].selector;
-                    return css `
-                        ${variantSelector}${emphasisSelector} {
-                            ${cssVars['vira-tag-background-color'].name}: ${colors.idle
-                        .backgroundColor.value};
-                            ${cssVars['vira-tag-text-color'].name}: ${colors.idle.textColor.value};
-                            ${cssVars['vira-tag-border-color'].name}: ${colors.idle.borderColor
-                        .value};
+        function buildVariantCssRule(variantSelector, emphasisSelector, colors) {
+            return css `
+                ${variantSelector}${emphasisSelector} {
+                    ${cssVars['vira-tag-background-color'].name}: ${colors.idle.backgroundColor
+                .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};
-                            ${cssVars['vira-tag-hover-text-color'].name}: ${colors.hover.textColor
-                        .value};
-                            ${cssVars['vira-tag-hover-border-color'].name}: ${colors.hover
-                        .borderColor.value};
+                    ${cssVars['vira-tag-hover-background-color'].name}: ${colors.hover
+                .backgroundColor.value};
+                    ${cssVars['vira-tag-hover-text-color'].name}: ${colors.hover.textColor.value};
+                    ${cssVars['vira-tag-hover-border-color'].name}: ${colors.hover.borderColor
+                .value};
 
-                            ${cssVars['vira-tag-active-background-color'].name}: ${colors.active
-                        .backgroundColor.value};
-                            ${cssVars['vira-tag-active-text-color'].name}: ${colors.active.textColor
-                        .value};
-                            ${cssVars['vira-tag-active-border-color'].name}: ${colors.active
-                        .borderColor.value};
-                        }
-                    `;
+                    ${cssVars['vira-tag-active-background-color'].name}: ${colors.active
+                .backgroundColor.value};
+                    ${cssVars['vira-tag-active-text-color'].name}: ${colors.active.textColor.value};
+                    ${cssVars['vira-tag-active-border-color'].name}: ${colors.active.borderColor
+                .value};
+                }
+            `;
+        }
+        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 plainStyle = buildVariantCssRule(hostClasses['vira-tag-color-plain'].selector, emphasisSelector, plainTagColors[emphasis]);
+                const neutralStyle = buildVariantCssRule(hostClasses['vira-tag-color-neutral'].selector, emphasisSelector, buildThemedTagColors(ViraThemeColorName.grey)[emphasis]);
+                const standaloneStyles = standaloneThemeColorNames.map((colorName) => {
+                    const colors = buildThemedTagColors(colorName)[emphasis];
+                    const variantSelector = hostClasses[`vira-tag-color-${colorName}`].selector;
+                    return buildVariantCssRule(variantSelector, emphasisSelector, colors);
                 });
+                return [
+                    ...themedStyles,
+                    plainStyle,
+                    neutralStyle,
+                    ...standaloneStyles,
+                ];
             });
             return unsafeCSS(allStyles.join('\n'));
         }
-        function generateNotCheckedCss() {
-            const allStyles = viraColorVariants.map((colorVariant) => {
-                const colors = tagNotCheckedColors[colorVariant];
-                const variantSelector = hostClasses[`vira-tag-color-${colorVariant}`].selector;
-                const notCheckedSelector = hostClasses['vira-tag-not-checked'].selector;
-                return css `
-                    ${variantSelector}${notCheckedSelector}${notCheckedSelector}${notCheckedSelector} {
-                        ${cssVars['vira-tag-background-color'].name}: ${colors.idle.backgroundColor
-                    .value};
-                        ${cssVars['vira-tag-text-color'].name}: ${colors.idle.textColor.value};
-                        ${cssVars['vira-tag-border-color'].name}: ${colors.idle.borderColor.value};
+        function buildNotCheckedCssRule(variantSelector, colors) {
+            const notCheckedSelector = hostClasses['vira-tag-not-checked'].selector;
+            return css `
+                ${variantSelector}${notCheckedSelector}${notCheckedSelector}${notCheckedSelector} {
+                    ${cssVars['vira-tag-background-color'].name}: ${colors.idle.backgroundColor
+                .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};
-                        ${cssVars['vira-tag-hover-text-color'].name}: ${colors.hover.textColor
-                    .value};
-                        ${cssVars['vira-tag-hover-border-color'].name}: ${colors.hover.borderColor
-                    .value};
+                    ${cssVars['vira-tag-hover-background-color'].name}: ${colors.hover
+                .backgroundColor.value};
+                    ${cssVars['vira-tag-hover-text-color'].name}: ${colors.hover.textColor.value};
+                    ${cssVars['vira-tag-hover-border-color'].name}: ${colors.hover.borderColor
+                .value};
 
-                        ${cssVars['vira-tag-active-background-color'].name}: ${colors.active
-                    .backgroundColor.value};
-                        ${cssVars['vira-tag-active-text-color'].name}: ${colors.active.textColor
-                    .value};
-                        ${cssVars['vira-tag-active-border-color'].name}: ${colors.active.borderColor
-                    .value};
-                    }
-                `;
+                    ${cssVars['vira-tag-active-background-color'].name}: ${colors.active
+                .backgroundColor.value};
+                    ${cssVars['vira-tag-active-text-color'].name}: ${colors.active.textColor.value};
+                    ${cssVars['vira-tag-active-border-color'].name}: ${colors.active.borderColor
+                .value};
+                }
+            `;
+        }
+        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);
             });
-            return unsafeCSS(allStyles.join('\n'));
+            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'));
         }
         function generateSizeVariantCss() {
             const styles = viraSizeVariants.map((sizeVariant) => {

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

@@ -1,17 +1,16 @@
-import { ViraThemeColorName } from './vira-color-theme-object.js';
 /**
  * All available variants for controlling vira form colors.
  *
  * @category Internal
  */
 export declare enum ViraColorVariant {
+    /** @default blue colored */
+    Info = "info",
     /**
-     * This is the default.
+     * Applied when no `color` input is set on a color-aware element.
      *
-     * @default blue colored
+     * @default black colored
      */
-    Info = "info",
-    /** @default black colored */
     Plain = "plain",
     /** @default grey colored */
     Neutral = "neutral",
@@ -26,24 +25,41 @@ export declare enum ViraColorVariant {
     /** @default purple colored */
     Special = "special",
     /**
-     * No color variant styles will be applied at all. All related CSS vars are free to customize to
-     * your wishes.
+     * No color variant styles will be applied at all, allowing the element's colors to be fully
+     * customized via its CSS vars.
      */
-    None = "none"
+    Custom = "custom"
 }
 /**
- * Maps {@link ViraColorVariant} values that support colors to their respective vira theme color
- * keys.
+ * All defined color variants starting with the default.
+ *
+ * @category Internal
+ */
+export declare const viraColorVariants: readonly [ViraColorVariant.Info, ViraColorVariant.Plain, ViraColorVariant.Neutral, ViraColorVariant.Danger, ViraColorVariant.Warning, ViraColorVariant.Positive, ViraColorVariant.Brand, ViraColorVariant.Special];
+/**
+ * Maps themed {@link ViraColorVariant} members to the {@link ViraThemeColorName} used as their host
+ * class suffix on color-aware elements (`vira-*-color-${themeColor}`). `Plain` and `Neutral` are
+ * intentionally omitted: they are always special-cased by each element so their host classes stay
+ * distinct from any theme color class (including `grey`).
  *
  * @category Internal
  */
-export declare const viraColorVariantToColorName: Record<ViraColorVariant, ViraThemeColorName>;
+export declare const viraColorVariantToHostClassKey: {
+    readonly info: "blue";
+    readonly danger: "red";
+    readonly warning: "yellow";
+    readonly positive: "green";
+    readonly brand: "brand";
+    readonly special: "purple";
+};
 /**
- * All defined color variants starting with the default.
+ * {@link ViraThemeColorName} values that have no corresponding themed {@link ViraColorVariant} in
+ * {@link viraColorVariantToHostClassKey}. Color-aware elements generate a standalone host class for
+ * each so every {@link ViraThemeColorName} (including `grey`) can be passed as a `color` input.
  *
  * @category Internal
  */
-export declare const viraColorVariants: readonly [ViraColorVariant.Info, ViraColorVariant.Plain, ViraColorVariant.Neutral, ViraColorVariant.Danger, ViraColorVariant.Warning, ViraColorVariant.Positive, ViraColorVariant.Brand, ViraColorVariant.Special];
+export declare const standaloneThemeColorNames: ("red" | "yellow" | "green" | "teal" | "blue" | "brand" | "purple" | "pink" | "grey")[];
 /**
  * All available variants for controlling vira form sizes.
  *

package/dist/styles/form-variants.js

@@ -1,3 +1,5 @@
+import { check } from '@augment-vir/assert';
+import { getObjectTypedValues } from '@augment-vir/common';
 import { ViraThemeColorName } from './vira-color-theme-object.js';
 /**
  * All available variants for controlling vira form colors.
@@ -6,13 +8,13 @@ import { ViraThemeColorName } from './vira-color-theme-object.js';
  */
 export var ViraColorVariant;
 (function (ViraColorVariant) {
+    /** @default blue colored */
+    ViraColorVariant["Info"] = "info";
     /**
-     * This is the default.
+     * Applied when no `color` input is set on a color-aware element.
      *
-     * @default blue colored
+     * @default black colored
      */
-    ViraColorVariant["Info"] = "info";
-    /** @default black colored */
     ViraColorVariant["Plain"] = "plain";
     /** @default grey colored */
     ViraColorVariant["Neutral"] = "neutral";
@@ -27,28 +29,11 @@ export var ViraColorVariant;
     /** @default purple colored */
     ViraColorVariant["Special"] = "special";
     /**
-     * No color variant styles will be applied at all. All related CSS vars are free to customize to
-     * your wishes.
+     * No color variant styles will be applied at all, allowing the element's colors to be fully
+     * customized via its CSS vars.
      */
-    ViraColorVariant["None"] = "none";
+    ViraColorVariant["Custom"] = "custom";
 })(ViraColorVariant || (ViraColorVariant = {}));
-/**
- * Maps {@link ViraColorVariant} values that support colors to their respective vira theme color
- * keys.
- *
- * @category Internal
- */
-export const viraColorVariantToColorName = {
-    [ViraColorVariant.Info]: ViraThemeColorName.blue,
-    [ViraColorVariant.Neutral]: ViraThemeColorName.grey,
-    [ViraColorVariant.Danger]: ViraThemeColorName.red,
-    [ViraColorVariant.Warning]: ViraThemeColorName.yellow,
-    [ViraColorVariant.Positive]: ViraThemeColorName.green,
-    [ViraColorVariant.Brand]: ViraThemeColorName.brand,
-    [ViraColorVariant.Special]: ViraThemeColorName.purple,
-    [ViraColorVariant.Plain]: ViraThemeColorName.grey,
-    [ViraColorVariant.None]: ViraThemeColorName.grey,
-};
 /**
  * All defined color variants starting with the default.
  *
@@ -64,6 +49,30 @@ export const viraColorVariants = [
     ViraColorVariant.Brand,
     ViraColorVariant.Special,
 ];
+/**
+ * Maps themed {@link ViraColorVariant} members to the {@link ViraThemeColorName} used as their host
+ * class suffix on color-aware elements (`vira-*-color-${themeColor}`). `Plain` and `Neutral` are
+ * intentionally omitted: they are always special-cased by each element so their host classes stay
+ * distinct from any theme color class (including `grey`).
+ *
+ * @category Internal
+ */
+export const viraColorVariantToHostClassKey = {
+    [ViraColorVariant.Info]: ViraThemeColorName.blue,
+    [ViraColorVariant.Danger]: ViraThemeColorName.red,
+    [ViraColorVariant.Warning]: ViraThemeColorName.yellow,
+    [ViraColorVariant.Positive]: ViraThemeColorName.green,
+    [ViraColorVariant.Brand]: ViraThemeColorName.brand,
+    [ViraColorVariant.Special]: ViraThemeColorName.purple,
+};
+/**
+ * {@link ViraThemeColorName} values that have no corresponding themed {@link ViraColorVariant} in
+ * {@link viraColorVariantToHostClassKey}. Color-aware elements generate a standalone host class for
+ * each so every {@link ViraThemeColorName} (including `grey`) can be passed as a `color` input.
+ *
+ * @category Internal
+ */
+export const standaloneThemeColorNames = getObjectTypedValues(ViraThemeColorName).filter((colorName) => !check.hasValue(getObjectTypedValues(viraColorVariantToHostClassKey), colorName));
 /**
  * All available variants for controlling vira form sizes.
  *

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "31.15.2",
+    "version": "31.16.1",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",