vira 29.0.0 → 29.1.1

package/dist/elements/form/vira-form-fields.d.ts

@@ -15,6 +15,7 @@ export declare enum ViraFormFieldType {
     /** Uses a password input without any attributes applied for auto complete hints. */
     PlainPassword = "plain-password",
     Email = "email",
+    Number = "number",
     Select = "select",
     Checkbox = "checkbox"
 }
@@ -75,7 +76,16 @@ export type ViraFormField = ({
 }> & CommonViraFormFields) | ({
     type: ViraFormFieldType.Checkbox;
     value: boolean | undefined;
-} & CommonViraFormFields);
+} & CommonViraFormFields) | ({
+    type: ViraFormFieldType.Number;
+    value: number | undefined;
+} & PartialWithUndefined<{
+    placeholder: string;
+    icon: ViraIconSvg;
+    min: number;
+    max: number;
+    step: number;
+}> & CommonViraFormFields);
 /**
  * A collection of form fields for `ViraForm`.
  *

package/dist/elements/form/vira-form-fields.js

@@ -15,6 +15,7 @@ export var ViraFormFieldType;
     /** Uses a password input without any attributes applied for auto complete hints. */
     ViraFormFieldType["PlainPassword"] = "plain-password";
     ViraFormFieldType["Email"] = "email";
+    ViraFormFieldType["Number"] = "number";
     ViraFormFieldType["Select"] = "select";
     ViraFormFieldType["Checkbox"] = "checkbox";
 })(ViraFormFieldType || (ViraFormFieldType = {}));

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

@@ -92,6 +92,48 @@ export const ViraForm = defineViraElement()({
                         ></${ViraSelect}>
                     `;
             }
+            else if (field.type === ViraFormFieldType.Number) {
+                return html `
+                        <${ViraInput.assign({
+                    value: field.value?.toString() || '',
+                    disabled: inputs.isDisabled || field.isDisabled,
+                    allowedInputs: /\d/,
+                    hasError: field.hasError,
+                    icon: field.icon,
+                    label: applyRequiredLabel(field.label, !!field.isRequired && !inputs.hideRequiredMarkers),
+                    placeholder: field.placeholder,
+                    showClearButton: inputs.showClearButtons,
+                    type: ViraInputType.Number,
+                    attributePassthrough: {
+                        ...(field.min === undefined
+                            ? {}
+                            : {
+                                min: String(field.min),
+                            }),
+                        ...(field.max === undefined
+                            ? {}
+                            : {
+                                max: String(field.max),
+                            }),
+                        ...(field.step === undefined
+                            ? {}
+                            : {
+                                step: String(field.step),
+                            }),
+                    },
+                })}
+                            ${field.testId ? testId(field.testId) : nothing}
+                            ${listen(ViraInput.events.valueChange, (event) => {
+                    const numericValue = event.detail === '' ? undefined : Number(event.detail);
+                    dispatch(new events.valueChange({
+                        key,
+                        ...field,
+                        value: numericValue,
+                    }));
+                })}
+                        ></${ViraInput}>
+                    `;
+            }
             else {
                 return html `
                         <${ViraInput.assign({

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

@@ -59,6 +59,10 @@ export const ViraButton = defineViraElement()({
             ${viraFormCssVars['vira-form-focus-outline-color'].name}: ${viraFormCssVars['vira-form-accent-primary-hover-color'].value}
         }
 
+        ${hostClasses['vira-button-icon-only'].selector} {
+            ${cssVars['vira-button-padding'].name}: 5px;
+        }
+
         ${hostClasses['vira-button-disabled'].selector} {
             ${viraDisabledStyles};
         }

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

@@ -9,7 +9,8 @@ export * from './shared-text-input-logic.js';
 export declare enum ViraInputType {
     Default = "text",
     Password = "password",
-    Email = "email"
+    Email = "email",
+    Number = "number"
 }
 /**
  * A single line input element with all listeners properly attached. Multiple types are allowed with

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

@@ -22,6 +22,7 @@ export var ViraInputType;
     ViraInputType["Default"] = "text";
     ViraInputType["Password"] = "password";
     ViraInputType["Email"] = "email";
+    ViraInputType["Number"] = "number";
 })(ViraInputType || (ViraInputType = {}));
 /**
  * A single line input element with all listeners properly attached. Multiple types are allowed with

package/package.json

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