vira 31.8.0 → 31.9.0

package/dist/elements/pop-up/vira-menu-item.element.js

@@ -30,6 +30,7 @@ export const ViraMenuItem = defineViraElement()({
     styles: ({ hostClasses }) => css `
         :host {
             display: flex;
+            flex-shrink: 0;
             ${noUserSelect};
             box-sizing: border-box;
             max-width: 100%;

package/dist/icons/index.d.ts

@@ -1,7 +1,7 @@
 export * from './colored-icon.js';
-export * from './feather-icons.js';
 export * from './icon-css-vars.js';
 export * from './icon-svg.js';
+export * from './lucide-icons.js';
 export * from './sized-icon.js';
 export * from './icon-svgs/16/check-16.icon.js';
 export * from './icon-svgs/16/chevron-down-16.icon.js';

package/dist/icons/index.js

@@ -55,9 +55,9 @@ 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 './lucide-icons.js';
 export * from './sized-icon.js';
 export * from './icon-svgs/16/check-16.icon.js';
 export * from './icon-svgs/16/chevron-down-16.icon.js';

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

@@ -0,0 +1,21 @@
+import * as lucideStaticImport from 'lucide-static';
+import { type ViraIconSvg } from './icon-svg.js';
+/**
+ * All supported Lucide icon names.
+ *
+ * @category Internal
+ */
+export type LucideIconKey = keyof typeof lucideStaticImport;
+/**
+ * An entry in {@link lucideIcons}.
+ *
+ * @category Internal
+ */
+export type LucideIconEntry = ViraIconSvg & ((options: Readonly<Record<string, string | number>>) => ViraIconSvg);
+/**
+ * All [Lucide icons](https://lucide.dev) 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 lucideIcons: Readonly<Record<LucideIconKey, LucideIconEntry>>;

package/dist/icons/lucide-icons.js

@@ -0,0 +1,89 @@
+import { html, unsafeHTML } from 'element-vir';
+import * as lucideStaticImport from 'lucide-static';
+import { viraIconCssVars } from './icon-css-vars.js';
+const defaultLucideAttributes = {
+    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 setSvgAttribute(svgString, attributeName, value) {
+    const escapedName = attributeName.replace(/[.*+?^${}()|[\]\\]/g, String.raw `\$&`);
+    const regex = new RegExp(String.raw `(\s)${escapedName}="[^"]*"`);
+    return regex.test(svgString)
+        ? svgString.replace(regex, `$1${attributeName}="${value}"`)
+        : svgString.replace(/<svg\b/, `<svg ${attributeName}="${value}"`);
+}
+function applySvgAttributes(svgString, attributes) {
+    return Object.entries(attributes).reduce((result, [key, value,]) => setSvgAttribute(result, key, String(value)), svgString);
+}
+function isLucideIconKey(key) {
+    return key in lucideStaticImport;
+}
+function getLucideIconSvg(key) {
+    const svg = lucideStaticImport[key];
+    if (typeof svg !== 'string') {
+        throw new TypeError(`Lucide icon "${key}" is not a valid SVG string.`);
+    }
+    return svg;
+}
+function createLucideIconEntry(iconKey) {
+    const svgString = getLucideIconSvg(iconKey);
+    const configureIconCallback = (options) => {
+        return {
+            name: iconKey,
+            svgTemplate: html `
+                ${unsafeHTML(applySvgAttributes(svgString, {
+                ...defaultLucideAttributes,
+                ...options,
+            }))}
+            `,
+        };
+    };
+    Object.defineProperty(configureIconCallback, 'name', {
+        value: iconKey,
+        writable: false,
+        configurable: true,
+    });
+    return Object.assign(configureIconCallback, {
+        svgTemplate: html `
+            ${unsafeHTML(applySvgAttributes(svgString, defaultLucideAttributes))}
+        `,
+    });
+}
+const lucideIconCache = new Map();
+/**
+ * All [Lucide icons](https://lucide.dev) 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 lucideIcons = new Proxy({}, {
+    get(_target, property) {
+        if (!isLucideIconKey(property)) {
+            return undefined;
+        }
+        const cached = lucideIconCache.get(property);
+        if (cached) {
+            return cached;
+        }
+        const entry = createLucideIconEntry(property);
+        lucideIconCache.set(property, entry);
+        return entry;
+    },
+    has(_target, property) {
+        return isLucideIconKey(property);
+    },
+    ownKeys() {
+        return Object.keys(lucideStaticImport);
+    },
+    getOwnPropertyDescriptor(_target, property) {
+        if (isLucideIconKey(property)) {
+            return {
+                configurable: true,
+                enumerable: true,
+                writable: false,
+            };
+        }
+        return undefined;
+    },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "31.8.0",
+    "version": "31.9.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -53,15 +53,14 @@
     },
     "devDependencies": {
         "@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",
+        "lucide-static": "^0.577.0",
         "markdown-code-example-inserter": "^3.0.3",
         "theme-vir": "^28.23.1",
         "typedoc": "^0.28.17",
@@ -70,9 +69,8 @@
         "vite-tsconfig-paths": "^6.1.1"
     },
     "peerDependencies": {
-        "@types/feather-icons": ">=4",
         "element-vir": ">=26",
-        "feather-icons": ">=4",
+        "lucide-static": ">=0.460",
         "theme-vir": ">=28"
     },
     "engines": {

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

@@ -1,24 +0,0 @@
-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<Partial<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

@@ -1,89 +0,0 @@
-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;
-    },
-});