vira 33.4.2 → 33.5.0

package/dist/elements/color/vira-color-picker.element.js

@@ -5,7 +5,7 @@ import { ColorFormatName, colorFormats, } from '@electrovir/color/dist/data/colo
 import { Color } from '@electrovir/color/dist/data/color-class/color.js';
 import { css, defineElement, defineElementEvent, html, listen, nothing } from 'element-vir';
 import { CssVarSyntaxName } from 'lit-css-vars';
-import { Copy24Icon } from '../../icons/icon-svgs/24/copy-24.icon.js';
+import { internalLucideIcons } from '../../icons/internal-lucide-icons.js';
 import { viraFontCssVars } from '../../styles/font.js';
 import { viraFormCssVars } from '../../styles/form-styles.js';
 import { noNativeFormStyles } from '../../styles/native-styles.js';
@@ -141,7 +141,6 @@ export const ViraColorPicker = defineElement()({
                     flex-grow: 1;
                     width: unset;
                     color: inherit;
-                    height: 20px;
                     border: none;
                 }
             }
@@ -180,7 +179,7 @@ export const ViraColorPicker = defineElement()({
         })}
                 >
                     <${ViraIcon.assign({
-            icon: Copy24Icon,
+            icon: internalLucideIcons.Copy16,
             fitContainer: true,
         })}></${ViraIcon}>
                 </button>
@@ -195,7 +194,7 @@ export const ViraColorPicker = defineElement()({
             >
                 <span>${color.hexString}</span>
                 <${ViraIcon.assign({
-            icon: Copy24Icon,
+            icon: internalLucideIcons.Copy16,
             fitContainer: true,
         })}></${ViraIcon}>
             </button>

package/dist/elements/popover/vira-menu.element.js

@@ -1,6 +1,6 @@
 import { assertWrap } from '@augment-vir/assert';
 import { classMap, css, html, listen, onResize } from 'element-vir';
-import { ChevronUp16Icon } from '../../icons/index.js';
+import { internalLucideIcons } from '../../icons/internal-lucide-icons.js';
 import { viraFormCssVars } from '../../styles/form-styles.js';
 import { noUserSelect } from '../../styles/index.js';
 import { viraShadows } from '../../styles/shadows.js';
@@ -227,7 +227,7 @@ export const ViraMenu = defineViraElement()({
             })}
                 >
                     <${ViraIcon.assign({
-                icon: ChevronUp16Icon,
+                icon: internalLucideIcons.ChevronUp16,
             })}></${ViraIcon}>
                 </div>
             `;

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

@@ -1,7 +1,8 @@
 import { check } from '@augment-vir/assert';
 import { extractEventTarget } from '@augment-vir/web';
 import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, listenToActivate, } from 'element-vir';
-import { Check24Icon, viraIconCssVars } from '../icons/index.js';
+import { viraIconCssVars } from '../icons/index.js';
+import { internalLucideIcons } from '../icons/internal-lucide-icons.js';
 import { viraDisabledStyles } from '../styles/disabled.js';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
@@ -216,7 +217,7 @@ export const ViraCheckbox = defineViraElement()({
                     ${listenToActivate(updateValue)}
                 >
                     <${ViraIcon.assign({
-            icon: Check24Icon,
+            icon: internalLucideIcons.Check16,
             fitContainer: true,
         })}
                         ${attributes(inputs.attributePassthrough?.[ViraIcon.tagName])}

package/dist/elements/vira-collapsible-card.element.js

@@ -1,5 +1,5 @@
 import { css, defineElementEvent, html, listen, nothing, testId } from 'element-vir';
-import { ChevronUp16Icon } from '../icons/index.js';
+import { internalLucideIcons } from '../icons/internal-lucide-icons.js';
 import { viraFontCssVars } from '../styles/font.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { defineViraElement } from '../util/define-vira-element.js';
@@ -144,7 +144,7 @@ export const ViraCollapsibleCard = defineViraElement()({
                 ? nothing
                 : html `
                                 <${ViraIcon.assign({
-                    icon: ChevronUp16Icon,
+                    icon: internalLucideIcons.ChevronUp16,
                     fitContainer: true,
                 })}
                                     ${testId(testIds.openCaret)}

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

@@ -3,7 +3,7 @@ import { colorCss } from '@electrovir/color';
 import { css, defineElementEvent, html, listen, nothing, onDomCreated } from 'element-vir';
 import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
 import { listenToGlobal } from 'typed-event-target';
-import { X24Icon } from '../icons/icon-svgs/24/x-24.icon.js';
+import { internalLucideIcons } from '../icons/internal-lucide-icons.js';
 import { viraAnimationDurations } from '../styles/durations.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { noNativeFormStyles, noNativeSpacing } from '../styles/native-styles.js';
@@ -300,7 +300,7 @@ export const ViraDrawer = defineViraElement()({
         })}
                         >
                             <${ViraIcon.assign({
-            icon: X24Icon,
+            icon: internalLucideIcons.X24,
         })}></${ViraIcon}>
                         </button>
                     </div>

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

@@ -3,7 +3,7 @@ import { filterMap, randomString } from '@augment-vir/common';
 import { extractEventTarget } from '@augment-vir/web';
 import { nav, NavDirection } from 'device-navigation';
 import { attributes, classMap, css, defineElementEvent, html, ifDefined, listen, nothing, testId, } from 'element-vir';
-import { ChevronUp16Icon } from '../icons/index.js';
+import { internalLucideIcons } from '../icons/internal-lucide-icons.js';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { ViraSize, viraSizeHeights } from '../styles/form-variants.js';
@@ -589,7 +589,7 @@ export const ViraDropdown = defineViraElement()({
 
                     <span class="trigger-icon-wrapper">
                         <${ViraIcon.assign({
-            icon: ChevronUp16Icon,
+            icon: internalLucideIcons.ChevronUp16,
         })}
                             class="trigger-icon"
                         ></${ViraIcon}>

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

@@ -1,6 +1,7 @@
 import { wait } from '@augment-vir/common';
 import { classMap, css, defineElementEvent, html, listen, renderIf } from 'element-vir';
-import { LoaderAnimated24Icon, StatusFailure24Icon } from '../icons/index.js';
+import { LoaderAnimated24Icon } from '../icons/index.js';
+import { internalLucideIcons } from '../icons/internal-lucide-icons.js';
 import { defineViraElement } from '../util/define-vira-element.js';
 import { ViraIcon } from './vira-icon.element.js';
 /**
@@ -102,7 +103,7 @@ export const ViraImage = defineViraElement()({
             ? html `
                   <slot class="status-wrapper" name=${slotNames['vira-image-error']}>
                       <${ViraIcon.assign({
-                icon: StatusFailure24Icon,
+                icon: internalLucideIcons.CircleX24,
             })}
                           class="error"
                       ></${ViraIcon}>

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

@@ -2,8 +2,7 @@ import { assertWrap, check } from '@augment-vir/assert';
 import { randomString } from '@augment-vir/common';
 import { extractEventTarget } from '@augment-vir/web';
 import { attributes, css, defineElementEvent, html, ifDefined, listen, nothing, onResize, renderIf, } from 'element-vir';
-import { CloseX24Icon } from '../icons/icon-svgs/24/close-x-24.icon.js';
-import { EyeClosed24Icon, EyeOpen24Icon } from '../icons/index.js';
+import { internalLucideIcons } from '../icons/internal-lucide-icons.js';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFontCssVars } from '../styles/font.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
@@ -425,7 +424,7 @@ export const ViraInput = defineViraElement()({
         })}
                         >
                             <${ViraIcon.assign({
-            icon: CloseX24Icon,
+            icon: internalLucideIcons.CircleX16,
         })}></${ViraIcon}>
                         </button>
                     `)}
@@ -445,7 +444,9 @@ export const ViraInput = defineViraElement()({
         })}
                         >
                             <${ViraIcon.assign({
-            icon: state.showPassword ? EyeOpen24Icon : EyeClosed24Icon,
+            icon: state.showPassword
+                ? internalLucideIcons.Eye16
+                : internalLucideIcons.EyeOff16,
         })}></${ViraIcon}>
                         </button>
                     `)}

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

@@ -1,7 +1,7 @@
 import { assertWrap, check } from '@augment-vir/assert';
 import { omitObjectKeys, wrapInTry, } from '@augment-vir/common';
 import { css, defineElementEvent, html, listen, nothing } from 'element-vir';
-import { Plus16Icon, X16Icon } from '../icons/index.js';
+import { internalLucideIcons } from '../icons/internal-lucide-icons.js';
 import { viraFontCssVars } from '../styles/font.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { ViraColorVariant, ViraEmphasis, ViraSize } from '../styles/form-variants.js';
@@ -287,7 +287,7 @@ export const ViraJsonForm = defineViraElement()({
         function renderDeleteButton(onDelete) {
             return html `
                 <${ViraButton.assign({
-                icon: X16Icon,
+                icon: internalLucideIcons.X16,
                 buttonEmphasis: ViraEmphasis.Subtle,
                 color: ViraColorVariant.Danger,
                 buttonSize: ViraSize.Small,
@@ -429,7 +429,7 @@ export const ViraJsonForm = defineViraElement()({
         function renderPlusButton({ isAddDisabled, tooltip, onClick, }) {
             return html `
                 <${ViraButton.assign({
-                icon: Plus16Icon,
+                icon: internalLucideIcons.Plus16,
                 color: ViraColorVariant.Positive,
                 buttonSize: ViraSize.Small,
                 isDisabled: isAddDisabled,
@@ -622,7 +622,7 @@ export const ViraJsonForm = defineViraElement()({
                     return html `
                           <${ViraButton.assign({
                         text: `"${key}"`,
-                        icon: Plus16Icon,
+                        icon: internalLucideIcons.Plus16,
                         color: ViraColorVariant.Positive,
                         buttonSize: ViraSize.Small,
                     })}

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

@@ -3,14 +3,15 @@ import { colorCss } from '@electrovir/color';
 import { css, defineElementEvent, html, listen, nothing, onDomCreated } from 'element-vir';
 import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
 import { listenToGlobal } from 'typed-event-target';
-import { X24Icon } from '../icons/icon-svgs/24/x-24.icon.js';
+import { internalLucideIcons } from '../icons/internal-lucide-icons.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
-import { noNativeFormStyles, noNativeSpacing } from '../styles/native-styles.js';
+import { ViraColorVariant, ViraEmphasis } from '../styles/form-variants.js';
+import { noNativeSpacing } from '../styles/native-styles.js';
 import { viraShadows } from '../styles/shadows.js';
 import { viraTheme } from '../styles/vira-color-theme.js';
 import { defineViraElement } from '../util/define-vira-element.js';
 import { isMouseEventOnScrollbar } from '../util/popover-manager.js';
-import { ViraIcon } from './vira-icon.element.js';
+import { ViraButton } from './vira-button.element.js';
 const globalEventsToCloseModalOn = [
     'pagehide',
     'pageshow',
@@ -72,6 +73,11 @@ export const ViraModal = defineViraElement()({
                 flex-direction: column;
                 border-radius: inherit;
                 padding: 0;
+                /**
+                 * Firefox and Safari focus the dialog itself on open because they don't search the
+                 * close button's shadow root for a focus target.
+                 */
+                outline: none;
                 overflow: hidden;
                 min-width: inherit;
                 min-height: inherit;
@@ -117,20 +123,10 @@ export const ViraModal = defineViraElement()({
                             }
                         }
 
-                        & button.close {
-                            ${noNativeFormStyles};
+                        & .close {
                             flex-shrink: 0;
-                            cursor: pointer;
-                            padding: 4px;
-                            border-radius: ${viraFormCssVars['vira-form-radius'].value};
-
-                            &:hover {
-                                background-color: ${viraFormCssVars['vira-form-selection-hover-color'].value};
-                            }
-
-                            & ${ViraIcon} {
-                                display: flex;
-                            }
+                            margin-top: -8px;
+                            margin-right: -12px;
                         }
                     }
                     & .body {
@@ -244,17 +240,17 @@ export const ViraModal = defineViraElement()({
                                   `
             : nothing}
                         </div>
-                        <button
+                        <${ViraButton.assign({
+            icon: internalLucideIcons.X16,
+            buttonEmphasis: ViraEmphasis.Subtle,
+            color: ViraColorVariant.Neutral,
+        })}
                             class="close"
                             aria-label="Close"
                             ${listen('click', () => {
             state.dialogElement?.close();
         })}
-                        >
-                            <${ViraIcon.assign({
-            icon: X24Icon,
-        })}></${ViraIcon}>
-                        </button>
+                        ></${ViraButton}>
                     </div>
                     ${inputs.open
             ? html `

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

@@ -4,8 +4,7 @@ import { ContrastLevelName } from '@electrovir/color/dist/data/contrast/contrast
 import { classMap, css, defineElementEvent, html, listen, nothing, onDomCreated, unsafeCSS, } from 'element-vir';
 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 { internalLucideIcons } from '../icons/internal-lucide-icons.js';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFontCssVars } from '../styles/font.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
@@ -764,7 +763,7 @@ export const ViraTabs = defineViraElement()({
         const measureMoreButtons = html `
             <${ViraButton.assign({
             text: overflowLabel,
-            rightSideIcon: ChevronDown16Icon,
+            rightSideIcon: internalLucideIcons.ChevronDown16,
             color: ViraColorVariant.Neutral,
         })}
                 class="measure-more-default"
@@ -773,8 +772,8 @@ export const ViraTabs = defineViraElement()({
             ? html `
                       <${ViraButton.assign({
                 text: selectedTab.label,
-                icon: Check24Icon,
-                rightSideIcon: ChevronDown16Icon,
+                icon: internalLucideIcons.Check16,
+                rightSideIcon: internalLucideIcons.ChevronDown16,
                 color: ViraColorVariant.Neutral,
             })}
                           class="measure-more-labeled"
@@ -792,8 +791,8 @@ export const ViraTabs = defineViraElement()({
             })}>
                           <${ViraButton.assign({
                 text: selectedIsCollapsed ? selectedTab?.label : overflowLabel,
-                icon: selectedIsCollapsed ? Check24Icon : undefined,
-                rightSideIcon: ChevronDown16Icon,
+                icon: selectedIsCollapsed ? internalLucideIcons.Check16 : undefined,
+                rightSideIcon: internalLucideIcons.ChevronDown16,
                 color: ViraColorVariant.Neutral,
             })}
                               slot=${ViraMenuTrigger.slotNames['vira-menu-trigger-trigger']}

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

@@ -3,8 +3,7 @@ import { arrayToObject, getObjectTypedKeys, } from '@augment-vir/common';
 import { ContrastLevelName } from '@electrovir/color/dist/data/contrast/contrast.js';
 import { css, defineElementEvent, html, listen, unsafeCSS } from 'element-vir';
 import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
-import { Check16Icon } from '../icons/icon-svgs/16/check-16.icon.js';
-import { X16Icon } from '../icons/icon-svgs/16/x-16.icon.js';
+import { internalLucideIcons } from '../icons/internal-lucide-icons.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { standaloneThemeColorNames, ViraColorVariant, viraColorVariantToHostClassKey, ViraEmphasis, viraEmphasisVariants, ViraSize, viraSizeHeights, viraSizeVariants, } from '../styles/form-variants.js';
 import { noNativeFormStyles } from '../styles/native-styles.js';
@@ -468,13 +467,13 @@ export const ViraTag = defineViraElement()({
         })}
             >
                 <${ViraIcon.assign({
-            icon: Check16Icon,
+            icon: internalLucideIcons.Check16,
         })}
                     class="selected-check"
                 ></${ViraIcon}>
                 <span class="text">${String(inputs.text)}</span>
                 <${ViraIcon.assign({
-            icon: X16Icon,
+            icon: internalLucideIcons.X16,
         })}
                     class="cancel-x"
                 ></${ViraIcon}>

package/dist/elements/vira-theme-switcher.element.d.ts

@@ -1,17 +1,31 @@
 import { type PartialWithUndefined } from '@augment-vir/common';
 import { ViraThemeClient, ViraThemeSelection } from '../util/vira-theme-client.js';
 /**
- * A row of buttons for selecting a {@link ViraThemeSelection} (light, dark, or auto). Fires a
- * `themeSelect` event when the user picks an option; the consumer is responsible for applying the
- * resulting theme.
+ * The part of {@link ViraThemeClient} that {@link ViraThemeSwitcher} uses. Implement this to back the
+ * switcher with your own theme storage instead of a `ViraThemeClient`.
+ *
+ * @category Internal
+ */
+export type ViraThemeSwitcherClient = Pick<ViraThemeClient, 'getCurrentTheme' | 'setSelectedTheme'>;
+/**
+ * A row of buttons for selecting a {@link ViraThemeSelection} (light, dark, or auto). Clicking a
+ * button calls `setSelectedTheme` on the `themeClient` input (or on an internal
+ * {@link ViraThemeClient} when none is given), which applies the theme, then fires a `themeSelect`
+ * event with the selection.
  *
  * @category Elements
  */
 export declare const ViraThemeSwitcher: import("element-vir").DeclarativeElementDefinition<"vira-theme-switcher", PartialWithUndefined<{
-    themeClient: Readonly<ViraThemeClient>;
-    /** Override the default English button titles (used as `title` attributes for tooltips). */
+    themeClient: Readonly<ViraThemeSwitcherClient>;
+    /**
+     * Override the default English button labels (used as `title` attributes for tooltips and
+     * as `aria-label` attributes).
+     */
     labels: Readonly<Record<ViraThemeSelection, string>>;
 }>, {
-    internalThemeClient: undefined | Readonly<ViraThemeClient>;
+    internalThemeClient: undefined | Readonly<ViraThemeSwitcherClient>;
     currentTheme: ViraThemeSelection;
-}, {}, "vira-theme-switcher-", "vira-theme-switcher-", readonly [], readonly []>;
+}, {
+    /** Fired after the user selects a theme and it has been passed to the theme client. */
+    themeSelect: import("element-vir").DefineElementEvent<ViraThemeSelection>;
+}, "vira-theme-switcher-", "vira-theme-switcher-", readonly [], readonly []>;

package/dist/elements/vira-theme-switcher.element.js

@@ -1,5 +1,5 @@
 import { mapEnumToObject } from '@augment-vir/common';
-import { classMap, css, html, listen } from 'element-vir';
+import { classMap, css, defineElementEvent, html, listen } from 'element-vir';
 import { AutoTheme24Icon, Moon24Icon, Sun24Icon } from '../icons/index.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { noNativeFormStyles, noNativeSpacing, viraTheme } from '../styles/index.js';
@@ -20,14 +20,19 @@ const defaultThemeLabels = {
     [ViraThemeSelection.Auto]: 'Auto',
 };
 /**
- * A row of buttons for selecting a {@link ViraThemeSelection} (light, dark, or auto). Fires a
- * `themeSelect` event when the user picks an option; the consumer is responsible for applying the
- * resulting theme.
+ * A row of buttons for selecting a {@link ViraThemeSelection} (light, dark, or auto). Clicking a
+ * button calls `setSelectedTheme` on the `themeClient` input (or on an internal
+ * {@link ViraThemeClient} when none is given), which applies the theme, then fires a `themeSelect`
+ * event with the selection.
  *
  * @category Elements
  */
 export const ViraThemeSwitcher = defineViraElement()({
     tagName: 'vira-theme-switcher',
+    events: {
+        /** Fired after the user selects a theme and it has been passed to the theme client. */
+        themeSelect: defineElementEvent(),
+    },
     styles: css `
         :host {
             display: inline-flex;
@@ -71,7 +76,7 @@ export const ViraThemeSwitcher = defineViraElement()({
             currentTheme: ViraThemeSelection.Auto,
         };
     },
-    render({ inputs, state, updateState }) {
+    render({ inputs, state, updateState, dispatch, events }) {
         const themeClient = inputs.themeClient || state.internalThemeClient || new ViraThemeClient();
         updateState({
             internalThemeClient: themeClient,
@@ -85,12 +90,16 @@ export const ViraThemeSwitcher = defineViraElement()({
                 selected: themeClient.getCurrentTheme() === theme,
             })}
                     title=${labels[theme]}
+                    aria-label=${labels[theme]}
                     ${listen('click', (event) => {
                 event.stopPropagation();
                 themeClient.setSelectedTheme(theme);
                 updateState({
                     currentTheme: themeClient.getCurrentTheme(),
                 });
+                dispatch(new events.themeSelect({
+                    detail: theme,
+                }));
             })}
                 >
                     <${ViraIcon.assign({

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

@@ -4,7 +4,8 @@ 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. Results are cached per source icon and color combination.
+ * the original icon can be used. Keeps the original icon's `size`. Results are cached per source
+ * icon and color combination.
  *
  * @category Icon
  */

package/dist/icons/colored-icon.js

@@ -2,7 +2,6 @@ import { check } from '@augment-vir/assert';
 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
@@ -11,7 +10,8 @@ import { defineIcon } from './icon-svg.js';
 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. Results are cached per source icon and color combination.
+ * the original icon can be used. Keeps the original icon's `size`. Results are cached per source
+ * icon and color combination.
  *
  * @category Icon
  */
@@ -34,11 +34,11 @@ export function createColoredIcon(icon, colors) {
             display: inline-flex;
             vertical-align: middle;
         `;
-        return defineIcon({
-            name: icon.name,
+        return {
+            ...icon,
             svgTemplate: html `
                 <div style=${styles}>${icon.svgTemplate}</div>
             `,
-        });
+        };
     });
 }

package/dist/icons/icon-svgs/24/auto-theme-24.icon.js

@@ -15,21 +15,17 @@ export const AutoTheme24Icon = defineIcon({
             xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
-            xml:space="preserve"
-            style="fill-rule:evenodd;clip-rule:evenodd"
             viewBox="0 0 24 24"
+            fill=${viraIconCssVars['vira-icon-fill-color'].value}
+            stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+            stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+            stroke-linecap="round"
+            stroke-linejoin="round"
         >
+            <circle cx="12" cy="12" r="8" />
             <path
-                d="M12 4c4.39 0 8 3.61 8 8s-3.61 8-8 8z"
+                d="M12 4a8 8 0 0 1 0 16z"
                 fill=${viraIconCssVars['vira-icon-stroke-color'].value}
-                stroke="none"
-                style="fill-rule:nonzero"
-            />
-            <path
-                d="M12 4a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm0 0v16"
-                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
-                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
-                fill="none"
             />
         </svg>
     `,

package/dist/icons/icon-svgs/24/loader-animated-24.icon.d.ts

@@ -1,5 +1,5 @@
 /**
- * A variation of {@link Loader24Icon} that spins on its own.
+ * Lucide's `Loader` icon at 24px, spinning on its own.
  *
  * @category Icon
  * @category SVG

package/dist/icons/icon-svgs/24/loader-animated-24.icon.js

@@ -1,7 +1,7 @@
 import { css, html } from 'element-vir';
 import { viraAnimationDurations } from '../../../styles/durations.js';
 import { defineIcon } from '../../icon-svg.js';
-import { Loader24Icon } from './loader-24.icon.js';
+import { LucideLoaderIcon } from '../../lucide/loader.icon.js';
 const animatedLoaderStyles = css `
     @keyframes loader-animated-spin {
         from {
@@ -13,12 +13,14 @@ const animatedLoaderStyles = css `
     }
 
     svg {
+        width: 24px;
+        height: 24px;
         animation: ${viraAnimationDurations['vira-extended-animation-duration'].value} linear
             loader-animated-spin infinite;
     }
 `;
 /**
- * A variation of {@link Loader24Icon} that spins on its own.
+ * Lucide's `Loader` icon at 24px, spinning on its own.
  *
  * @category Icon
  * @category SVG
@@ -30,6 +32,6 @@ export const LoaderAnimated24Icon = defineIcon({
         <style>
             ${animatedLoaderStyles}
         </style>
-        ${Loader24Icon.svgTemplate}
+        ${LucideLoaderIcon.svgTemplate}
     `,
 });

package/dist/icons/icon-svgs/24/moon-24.icon.js

@@ -16,12 +16,13 @@ export const Moon24Icon = defineIcon({
             width="24"
             height="24"
             viewBox="0 0 24 24"
+            fill=${viraIconCssVars['vira-icon-fill-color'].value}
             stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
             stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
-            fill=${viraIconCssVars['vira-icon-fill-color'].value}
+            stroke-linecap="round"
             stroke-linejoin="round"
         >
-            <path d="M18.6 17.72A8 8 0 1 1 15 4.26a8 8 0 0 0 3.6 13.46Z" />
+            <path d="M18.6 17.72A8 8 0 1 1 15 4.26a8 8 0 0 0 3.6 13.46z" />
         </svg>
     `,
 });

package/dist/icons/icon-svgs/24/sparkle-24.icon.js

@@ -13,18 +13,18 @@ export const Sparkle24Icon = defineIcon({
     svgTemplate: html `
         <svg
             xmlns="http://www.w3.org/2000/svg"
-            xml:space="preserve"
             width="24"
             height="24"
-            style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"
             viewBox="0 0 24 24"
+            fill=${viraIconCssVars['vira-icon-fill-color'].value}
+            stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+            stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+            stroke-linecap="round"
+            stroke-linejoin="round"
         >
-            <path
-                d="m18.46 8.14-.73-1.62a.5.5 0 0 0-.23-.23l-1.6-.73 1.61-.72q.15-.08.23-.23L18.47 3l.72 1.62q.08.15.23.23l1.6.72-1.6.73a.5.5 0 0 0-.23.23zm0 7.72.73 1.62q.08.16.23.23l1.6.73-1.6.72a.5.5 0 0 0-.24.23L18.46 21l-.73-1.61a.5.5 0 0 0-.23-.24l-1.6-.72 1.6-.73q.16-.06.23-.23zm-7.3-5.97q.06.15.22.23l3.21 1.46a.46.46 0 0 1 0 .84l-3.21 1.46a.5.5 0 0 0-.23.23L9.7 17.32a.5.5 0 0 1-.42.27.5.5 0 0 1-.42-.27L7.4 14.11a.5.5 0 0 0-.23-.23l-3.21-1.46a.46.46 0 0 1 0-.84l3.21-1.46q.16-.08.23-.23l1.46-3.21a.5.5 0 0 1 .42-.27q.29 0 .42.27z"
-                fill=${viraIconCssVars['vira-icon-fill-color'].value}
-                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
-                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
-            />
+            <path d="M9 6l2 4 4 2-4 2-2 4-2-4-4-2 4-2z" />
+            <path d="M18 3l1 2 2 1-2 1-1 2-1-2-2-1 2-1z" />
+            <path d="M18 15l1 2 2 1-2 1-1 2-1-2-2-1 2-1z" />
         </svg>
     `,
 });