vira 31.24.1 → 31.24.2

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

@@ -414,6 +414,13 @@ export const ViraTabs = defineViraElement()({
             const isSelected = routeHasPaths(inputs.currentRoute, tab.paths, {
                 exactMatch: tab.exactMatch,
             });
+            const iconTemplate = tab.icon
+                ? html `
+                              <${ViraIcon.assign({
+                    icon: tab.icon,
+                })}></${ViraIcon}>
+                          `
+                : nothing;
             return {
                 content: html `
                             <${ViraLink.assign({
@@ -425,8 +432,15 @@ export const ViraTabs = defineViraElement()({
                         scrollToTop: true,
                     },
                     disableLinkStyles: true,
+                    stylePassthrough: {
+                        a: css `
+                                        display: flex;
+                                        align-items: center;
+                                        gap: 8px;
+                                    `,
+                    },
                 })}>
-                                ${tab.label}
+                                ${iconTemplate} ${tab.label}
                             </${ViraLink}>
                         `,
                 selected: isSelected,

package/dist/icons/colored-icon.d.ts

@@ -4,7 +4,7 @@ import { viraIconCssVars } from './icon-css-vars.js';
 import { type ViraIconSvg } from './icon-svg.js';
 /**
  * Wraps an existing icon with a specific color and outputs another icon that can be used anywhere
- * the original icon can be used.
+ * the original icon can be used. Results are cached per source icon and color combination.
  *
  * @category Icon
  */

package/dist/icons/colored-icon.js

@@ -1,11 +1,17 @@
 import { check } from '@augment-vir/assert';
-import { getObjectTypedKeys } from '@augment-vir/common';
+import { getObjectTypedKeys, getOrSetFromMap } from '@augment-vir/common';
 import { css, html, unsafeCSS } from 'element-vir';
 import { viraIconCssVars } from './icon-css-vars.js';
 import { defineIcon } from './icon-svg.js';
+/**
+ * Caches colored icons keyed first by the source icon and then by the generated color styles. The
+ * outer `WeakMap` lets the entire cache for a given icon be garbage collected once that icon is no
+ * longer referenced, preventing a memory leak from unbounded icon definitions.
+ */
+const coloredIconCache = new WeakMap();
 /**
  * Wraps an existing icon with a specific color and outputs another icon that can be used anywhere
- * the original icon can be used.
+ * the original icon can be used. Results are cached per source icon and color combination.
  *
  * @category Icon
  */
@@ -21,15 +27,18 @@ export function createColoredIcon(icon, colors) {
     })
         .filter(check.isTruthy)
         .join(' ');
-    const styles = css `
-        ${unsafeCSS(colorStyles)}
-        display: inline-flex;
-        vertical-align: middle;
-    `;
-    return defineIcon({
-        name: icon.name,
-        svgTemplate: html `
-            <div style=${styles}>${icon.svgTemplate}</div>
-        `,
+    const iconCache = getOrSetFromMap(coloredIconCache, icon, () => new Map());
+    return getOrSetFromMap(iconCache, colorStyles, () => {
+        const styles = css `
+            ${unsafeCSS(colorStyles)}
+            display: inline-flex;
+            vertical-align: middle;
+        `;
+        return defineIcon({
+            name: icon.name,
+            svgTemplate: html `
+                <div style=${styles}>${icon.svgTemplate}</div>
+            `,
+        });
     });
 }

package/package.json

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