vira 31.3.0 → 31.4.0

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

@@ -309,11 +309,11 @@ export const ViraButton = defineViraElement()({
             const styles = viraSizeVariants.map((sizeVariant) => {
                 return css `
                     ${hostClasses[`vira-button-size-${sizeVariant}`].selector} {
-                        height: ${viraSizeHeights[sizeVariant]}px;
                         font-size: ${viraFormCssVars[`vira-form-${sizeVariant}-text-size`].value};
 
                         button {
-                            padding: 0
+                            min-height: ${viraSizeHeights[sizeVariant]}px;
+                            padding: 2px
                                 ${viraFormCssVars[`vira-form-${sizeVariant}-text-size`].value};
                         }
                     }

package/dist/icons/feather-icons.d.ts

@@ -0,0 +1,24 @@
+import type * as featherIconsImportType from 'feather-icons';
+import { type FeatherAttributes } from 'feather-icons';
+import { type ViraIconSvg } from './icon-svg.js';
+declare const featherIconsImported: typeof featherIconsImportType;
+/**
+ * All supported feather icon names.
+ *
+ * @category Internal
+ */
+export type FeatherIconKey = keyof typeof featherIconsImported.icons;
+/**
+ * An entry in {@link featherIcons}.
+ *
+ * @category Internal
+ */
+export type FeatherIconEntry = ViraIconSvg & ((options: Readonly<FeatherAttributes>) => ViraIconSvg);
+/**
+ * All [Feather icons](https://feathericons.com) in a format compatible with `ViraIcon`. Each icon
+ * entry can be accessed directly or customized by calling it as a function.
+ *
+ * @category Icon
+ */
+export declare const featherIcons: Readonly<Record<FeatherIconKey, FeatherIconEntry>>;
+export {};

package/dist/icons/feather-icons.js

@@ -0,0 +1,89 @@
+import { check } from '@augment-vir/assert';
+import { html, unsafeHTML } from 'element-vir';
+import { viraIconCssVars } from './icon-css-vars.js';
+/** Feather's export format is all messed up so we have to do this to catch all its possible cases. */
+async function importFeatherIcons() {
+    const imported = (await import('feather-icons'));
+    function recurseImport(imported) {
+        if (check.isObject(imported)) {
+            if (check.hasKey(imported, 'default')) {
+                return recurseImport(imported.default);
+            }
+            else if (check.hasKey(imported, 'icons')) {
+                return imported;
+            }
+        }
+        return undefined;
+    }
+    return (recurseImport(imported) ||
+        /** Unfortunately, Feather will attach itself to the global state sometimes. */
+        globalThis.feather);
+}
+const featherIconsImported = await importFeatherIcons();
+const defaultFeatherOptions = {
+    fill: String(viraIconCssVars['vira-icon-fill-color'].value),
+    stroke: String(viraIconCssVars['vira-icon-stroke-color'].value),
+    'stroke-width': String(viraIconCssVars['vira-icon-stroke-width'].value),
+};
+function createFeatherIconEntry(iconKey) {
+    const featherIcon = featherIconsImported.icons[iconKey];
+    const configureIconCallback = (options) => {
+        return {
+            name: featherIcon.name,
+            svgTemplate: html `
+                ${unsafeHTML(featherIcon.toSvg({
+                ...defaultFeatherOptions,
+                ...options,
+            }))}
+            `,
+        };
+    };
+    Object.defineProperty(configureIconCallback, 'name', {
+        value: featherIcon.name,
+        writable: false,
+        configurable: true,
+    });
+    return Object.assign(configureIconCallback, {
+        svgTemplate: html `
+            ${unsafeHTML(featherIcon.toSvg(defaultFeatherOptions))}
+        `,
+    });
+}
+const featherIconCache = new Map();
+/**
+ * All [Feather icons](https://feathericons.com) in a format compatible with `ViraIcon`. Each icon
+ * entry can be accessed directly or customized by calling it as a function.
+ *
+ * @category Icon
+ */
+export const featherIcons = new Proxy({}, {
+    get(_target, property) {
+        const iconKey = property;
+        if (!(iconKey in featherIconsImported.icons)) {
+            return undefined;
+        }
+        const cached = featherIconCache.get(iconKey);
+        if (cached) {
+            return cached;
+        }
+        const entry = createFeatherIconEntry(iconKey);
+        featherIconCache.set(iconKey, entry);
+        return entry;
+    },
+    has(_target, property) {
+        return property in featherIconsImported.icons;
+    },
+    ownKeys() {
+        return Object.keys(featherIconsImported.icons);
+    },
+    getOwnPropertyDescriptor(_target, property) {
+        if (property in featherIconsImported.icons) {
+            return {
+                configurable: true,
+                enumerable: true,
+                writable: false,
+            };
+        }
+        return undefined;
+    },
+});

package/dist/icons/index.d.ts

@@ -1,4 +1,5 @@
 export * from './colored-icon.js';
+export * from './feather-icons.js';
 export * from './icon-css-vars.js';
 export * from './icon-svg.js';
 export * from './sized-icon.js';

package/dist/icons/index.js

@@ -55,6 +55,7 @@ import { Sun24Icon } from './icon-svgs/24/sun-24.icon.js';
 import { Upload24Icon } from './icon-svgs/24/upload-24.icon.js';
 import { X24Icon } from './icon-svgs/24/x-24.icon.js';
 export * from './colored-icon.js';
+export * from './feather-icons.js';
 export * from './icon-css-vars.js';
 export * from './icon-svg.js';
 export * from './sized-icon.js';

package/dist/util/shared-text-input-logic.js

@@ -4,13 +4,13 @@ function doesMatch({ input, matcher }) {
     if (!input || !matcher) {
         return true;
     }
-    if (input.length > 1) {
+    else if (input.length > 1) {
         return input.split('').every((singleInput) => doesMatch({
             input: singleInput,
             matcher,
         }));
     }
-    if (matcher instanceof RegExp) {
+    else if (matcher instanceof RegExp) {
         return !!input.match(matcher);
     }
     else {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "31.3.0",
+    "version": "31.4.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,27 +38,29 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.67.0",
-        "@augment-vir/common": "^31.67.0",
-        "@augment-vir/web": "^31.67.0",
+        "@augment-vir/assert": "^31.68.1",
+        "@augment-vir/common": "^31.68.1",
+        "@augment-vir/web": "^31.68.1",
         "@electrovir/color": "^1.7.8",
         "date-vir": "^8.2.0",
         "device-navigation": "^4.5.5",
-        "lit-css-vars": "^3.5.0",
+        "lit-css-vars": "^3.6.2",
         "observavir": "^2.3.2",
         "page-active": "^1.0.3",
         "spa-router-vir": "^6.4.1",
         "type-fest": "^5.4.4",
-        "typed-event-target": "^4.1.0"
+        "typed-event-target": "^4.3.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.67.0",
+        "@augment-vir/test": "^31.68.1",
+        "@types/feather-icons": "^4.29.4",
         "@web/dev-server-esbuild": "^1.0.5",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.1",
         "@web/test-runner-visual-regression": "^0.10.0",
         "esbuild": "^0.27.3",
+        "feather-icons": "^4.29.2",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
         "theme-vir": "^28.22.0",
@@ -68,7 +70,9 @@
         "vite-tsconfig-paths": "^6.1.1"
     },
     "peerDependencies": {
+        "@types/feather-icons": ">=4",
         "element-vir": ">=26",
+        "feather-icons": ">=4",
         "theme-vir": ">=28"
     },
     "engines": {