vira 30.2.1 → 30.3.0

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

@@ -32,4 +32,10 @@ export declare const ViraButton: import("element-vir").DeclarativeElementDefinit
      * @default false
      */
     expandToFitIcon: boolean;
-}>, {}, {}, "vira-button-outline-style" | "vira-button-danger-style" | "vira-button-ghost-style" | "vira-button-disabled" | "vira-button-expand-to-fit-icon" | "vira-button-icon-only" | "vira-button-plain-style" | "vira-button-default-style", "vira-button-padding" | "vira-button-internal-foreground-color" | "vira-button-internal-background-color" | "vira-button-border-color", readonly [], readonly []>;
+    /**
+     * If `true`, a menu trigger caret (like in ViraDropdown or ViraSelect) is rendered.
+     *
+     * @default false
+     */
+    showMenuCaret: boolean;
+}>, {}, {}, "vira-button-outline-style" | "vira-button-danger-style" | "vira-button-ghost-style" | "vira-button-disabled" | "vira-button-expand-to-fit-icon" | "vira-button-icon-only" | "vira-button-plain-style" | "vira-button-default-style" | "vira-button-with-menu-caret", "vira-button-padding" | "vira-button-internal-foreground-color" | "vira-button-internal-background-color" | "vira-button-border-color", readonly [], readonly []>;

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

@@ -1,4 +1,5 @@
 import { css, html, nothing } from 'element-vir';
+import { ChevronDown24Icon } from '../icons/index.js';
 import { viraDisabledStyles } from '../styles/disabled.js';
 import { viraAnimationDurations } from '../styles/durations.js';
 import { createFocusStyles } from '../styles/focus.js';
@@ -41,6 +42,7 @@ export const ViraButton = defineViraElement()({
         'vira-button-icon-only': ({ inputs }) => !!inputs.icon && !inputs.text,
         'vira-button-plain-style': ({ inputs }) => inputs.buttonStyle === ViraButtonStyle.Plain,
         'vira-button-default-style': ({ inputs }) => !inputs.buttonStyle || inputs.buttonStyle === ViraButtonStyle.Default,
+        'vira-button-with-menu-caret': ({ inputs }) => !!inputs.showMenuCaret,
     },
     cssVars: {
         'vira-button-padding': '5px 10px',
@@ -176,6 +178,16 @@ export const ViraButton = defineViraElement()({
                 align-items: center;
             }
         }
+
+        .caret-icon {
+            padding-left: 4px;
+        }
+
+        ${hostClasses['vira-button-with-menu-caret'].selector} {
+            button {
+                padding-right: 4px;
+            }
+        }
     `,
     render: ({ inputs }) => {
         const iconTemplate = inputs.icon
@@ -192,8 +204,19 @@ export const ViraButton = defineViraElement()({
             : html `
                   <span class="empty-text">&nbsp;</span>
               `;
+        const caretIconTemplate = inputs.showMenuCaret
+            ? html `
+                  <${ViraIcon.assign({
+                icon: ChevronDown24Icon,
+            })}
+                      class="caret-icon"
+                  ></${ViraIcon}>
+              `
+            : nothing;
         return html `
-            <button ?disabled=${inputs.disabled}>${iconTemplate} ${textTemplate}</button>
+            <button ?disabled=${inputs.disabled}>
+                ${iconTemplate}${textTemplate}${caretIconTemplate}
+            </button>
         `;
     },
 });

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

@@ -12,7 +12,6 @@ import { viraThemeByKeys } 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';
-// need to add hover colors to unchecked tags
 function generateThemeCss(colorVariant) {
     if (!check.hasKey(viraColorVariantToColorName, colorVariant)) {
         throw new Error(`No ViraTag color for variant '${colorVariant}'`);

package/package.json

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