vira 25.4.3 → 25.5.0

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

@@ -1,3 +1,4 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
 import { type ViraIconSvg } from '../icons/index.js';
 /**
  * Button styles available for {@link ViraButton}.
@@ -16,8 +17,16 @@ export declare enum ViraButtonStyle {
  * @see https://electrovir.github.io/element-vir/vira/book/elements/vira-button
  */
 export declare const ViraButton: import("element-vir").DeclarativeElementDefinition<"vira-button", {
-    text?: string;
-    icon?: undefined | Pick<ViraIconSvg, "svgTemplate">;
-    disabled?: boolean | undefined;
-    buttonStyle?: ViraButtonStyle | undefined;
-}, {}, {}, "vira-button-outline-style" | "vira-button-disabled", "vira-button-primary-color" | "vira-button-primary-hover-color" | "vira-button-primary-active-color" | "vira-button-secondary-color" | "vira-button-padding" | "vira-button-internal-foreground-color" | "vira-button-internal-background-color", readonly []>;
+    text: string;
+} & PartialWithUndefined<{
+    icon: Pick<ViraIconSvg, "svgTemplate">;
+    disabled: boolean;
+    buttonStyle: ViraButtonStyle;
+    /**
+     * When set to `true`, the given icon (if any) will take up its full dimensions, potentially
+     * increasing the button's size.
+     *
+     * @default false
+     */
+    expandToFitIcon: boolean;
+}>, {}, {}, "vira-button-outline-style" | "vira-button-disabled" | "vira-button-expand-to-fit-icon", "vira-button-primary-color" | "vira-button-primary-hover-color" | "vira-button-primary-active-color" | "vira-button-secondary-color" | "vira-button-padding" | "vira-button-internal-foreground-color" | "vira-button-internal-background-color", readonly []>;

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

@@ -29,6 +29,7 @@ export const ViraButton = defineViraElement()({
     hostClasses: {
         'vira-button-outline-style': ({ inputs }) => inputs.buttonStyle === ViraButtonStyle.Outline,
         'vira-button-disabled': ({ inputs }) => !!inputs.disabled,
+        'vira-button-expand-to-fit-icon': ({ inputs }) => !!inputs.expandToFitIcon,
     },
     cssVars: {
         /** On the default button style this is the background color. */
@@ -106,6 +107,14 @@ export const ViraButton = defineViraElement()({
         button ${ViraIcon} + .text-template {
             margin-left: 8px;
         }
+
+        :host(:not(.${hostClasses['vira-button-expand-to-fit-icon'].name})) {
+            & ${ViraIcon} {
+                height: 0;
+                display: flex;
+                align-items: center;
+            }
+        }
     `,
     render: ({ inputs }) => {
         const iconTemplate = inputs.icon

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "25.4.3",
+    "version": "25.5.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -66,7 +66,7 @@
         "vite-tsconfig-paths": "^5.1.4"
     },
     "peerDependencies": {
-        "element-vir": "^25.4.3"
+        "element-vir": "^25.5.0"
     },
     "engines": {
         "node": ">=22"