vira 32.0.0 → 32.1.1

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

@@ -12,6 +12,8 @@ import { ViraThemeColorName } from '../styles/vira-color-theme-object.js';
 export declare const ViraButton: import("element-vir").DeclarativeElementDefinition<"vira-button", PartialWithUndefined<{
     text: string;
     icon: Readonly<ViraIconSvg>;
+    /** An optional icon rendered after the button text. */
+    rightSideIcon: Readonly<ViraIconSvg>;
     /** @default false */
     isDisabled: boolean;
     /**
@@ -35,10 +37,4 @@ export declare const ViraButton: import("element-vir").DeclarativeElementDefinit
      * @default ViraColorVariant.Plain
      */
     color: ViraColorVariant | ViraThemeColorName;
-    /**
-     * Set to `true` to render `icon` after `text` instead of before it.
-     *
-     * @default false
-     */
-    showIconOnRight: boolean;
 }>, {}, {}, "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-size-large" | "vira-button-size-medium" | "vira-button-size-small" | "vira-button-emphasis-standard" | "vira-button-emphasis-subtle", "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

@@ -166,7 +166,7 @@ export const ViraButton = defineViraElement()({
             return !!inputs.isDisabled;
         },
         'vira-button-icon-only'({ inputs }) {
-            return !inputs.text && !!inputs.icon;
+            return !inputs.text && (!!inputs.icon || !!inputs.rightSideIcon);
         },
     },
     cssVars: {
@@ -368,13 +368,6 @@ export const ViraButton = defineViraElement()({
         `;
     },
     render({ inputs }) {
-        const iconTemplate = inputs.icon
-            ? html `
-                  <${ViraIcon.assign({
-                icon: inputs.icon,
-            })}></${ViraIcon}>
-              `
-            : nothing;
         const textTemplate = inputs.text
             ? html `
                   <span class="text-template">${inputs.text}</span>
@@ -383,15 +376,23 @@ export const ViraButton = defineViraElement()({
                   <span class="empty-text">&nbsp;</span>
               `;
         /* Both templates are interpolated with no whitespace between them so `+` selectors match. */
-        const templates = inputs.showIconOnRight
-            ? [
-                textTemplate,
-                iconTemplate,
-            ]
-            : [
-                iconTemplate,
-                textTemplate,
-            ];
+        const templates = [
+            inputs.icon
+                ? html `
+                      <${ViraIcon.assign({
+                    icon: inputs.icon,
+                })}></${ViraIcon}>
+                  `
+                : nothing,
+            textTemplate,
+            inputs.rightSideIcon
+                ? html `
+                      <${ViraIcon.assign({
+                    icon: inputs.rightSideIcon,
+                })}></${ViraIcon}>
+                  `
+                : nothing,
+        ];
         return html `
             <button ?disabled=${inputs.isDisabled}>${templates}</button>
         `;

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

@@ -373,7 +373,6 @@ export const ViraInput = defineViraElement()({
                 <input
                     id=${ifDefined(inputs.label ? state.randomId : undefined)}
                     aria-label=${ifDefined(inputs.label || undefined)}
-                    autofocus=${false}
                     type=${calculateEffectiveInputType(inputs.type, state.showPassword)}
                     style=${forcedInputWidthStyles}
                     autocomplete=${ifDefined(shouldBlockBrowserHelps ? 'off' : undefined)}

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

@@ -5,6 +5,7 @@ import { classMap, css, defineElementEvent, html, listen, nothing, onDomCreated,
 import { routeHasPaths, } from 'spa-router-vir';
 import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
 import { ChevronDown16Icon } from '../icons/icon-svgs/16/chevron-down-16.icon.js';
+import { Check24Icon } from '../icons/icon-svgs/24/check-24.icon.js';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFontCssVars } from '../styles/font.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
@@ -757,13 +758,13 @@ export const ViraTabs = defineViraElement()({
         /**
          * Hidden copies of the "more" button in each of its possible shapes, rendered inside the
          * measurement mirror so their true widths can be measured before choosing which one fits:
-         * the default overflow label, and the collapsed selected tab's own label, with a caret.
+         * the default overflow label, and the collapsed selected tab's own label (with a checkmark
+         * and caret).
          */
         const measureMoreButtons = html `
             <${ViraButton.assign({
             text: overflowLabel,
-            icon: ChevronDown16Icon,
-            showIconOnRight: true,
+            rightSideIcon: ChevronDown16Icon,
             color: ViraColorVariant.Neutral,
         })}
                 class="measure-more-default"
@@ -772,8 +773,8 @@ export const ViraTabs = defineViraElement()({
             ? html `
                       <${ViraButton.assign({
                 text: selectedTab.label,
-                icon: ChevronDown16Icon,
-                showIconOnRight: true,
+                icon: Check24Icon,
+                rightSideIcon: ChevronDown16Icon,
                 color: ViraColorVariant.Neutral,
             })}
                           class="measure-more-labeled"
@@ -792,8 +793,8 @@ export const ViraTabs = defineViraElement()({
             })}>
                           <${ViraButton.assign({
                 text: selectedIsCollapsed ? selectedTab?.label : overflowLabel,
-                icon: ChevronDown16Icon,
-                showIconOnRight: true,
+                icon: selectedIsCollapsed ? Check24Icon : undefined,
+                rightSideIcon: ChevronDown16Icon,
                 color: ViraColorVariant.Neutral,
             })}
                               slot=${ViraMenuTrigger.slotNames['vira-menu-trigger-trigger']}

package/package.json

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