vira 33.6.0 → 33.8.0

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

@@ -52,6 +52,19 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
      * @default 24
      */
     menuHoverScrollSpeed: number;
+    /**
+     * When `isSearchable` is `true`, renders at most this many of the matching options (counted
+     * across groups, in their given order) followed by a hint row stating how many more exist.
+     * When omitted, all matching options are rendered.
+     */
+    maxShownOptions: number;
+    /**
+     * Creates the text of the hint row shown when `maxShownOptions` hides some matching
+     * options.
+     *
+     * @default hiddenCount => `+${hiddenCount}, type to narrow your search`
+     */
+    hiddenOptionsText: (hiddenCount: number) => string;
 }>, {
     isOpen: boolean;
     shouldSelectOnMouseUp: boolean;
@@ -69,4 +82,4 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
     selectedValuesChange: import("element-vir").DefineElementEvent<string[]>;
     /** `true` when the popover just opened, `false` when it just closed. */
     openChange: import("element-vir").DefineElementEvent<boolean>;
-}, "vira-dropdown-", "vira-dropdown-", readonly [], readonly ["leadingIcon", "prefixText", "searchInput", "trigger"]>;
+}, "vira-dropdown-", "vira-dropdown-", readonly [], readonly ["hiddenOptionsHint", "leadingIcon", "prefixText", "searchInput", "trigger"]>;

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

@@ -26,6 +26,7 @@ import { ViraIcon } from './vira-icon.element.js';
 export const ViraDropdown = defineViraElement()({
     tagName: 'vira-dropdown',
     testIds: [
+        'hiddenOptionsHint',
         'leadingIcon',
         'prefixText',
         'searchInput',
@@ -147,7 +148,8 @@ export const ViraDropdown = defineViraElement()({
         }
 
         .option-group-label,
-        .no-options {
+        .no-options,
+        .hidden-options-hint {
             ${noUserSelect};
             text-align: left;
         }
@@ -158,7 +160,8 @@ export const ViraDropdown = defineViraElement()({
             font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
         }
 
-        .no-options {
+        .no-options,
+        .hidden-options-hint {
             cursor: default;
             opacity: 0.6;
             /* Aligns with the label text of each ViraMenuItem, past its check icon. */
@@ -304,6 +307,29 @@ export const ViraDropdown = defineViraElement()({
         const filteredFlatOptions = filteredOptions.flatMap((entry) => {
             return isViraDropdownOptionGroup(entry) ? entry.options : [entry];
         });
+        let remainingShownCount = inputs.isSearchable
+            ? (inputs.maxShownOptions ?? Infinity)
+            : Infinity;
+        /** `filteredOptions` truncated to `maxShownOptions` options, dropping emptied groups. */
+        const shownOptions = remainingShownCount < filteredFlatOptions.length
+            ? filterMap(filteredOptions, (entry) => {
+                const options = (isViraDropdownOptionGroup(entry) ? entry.options : [entry]).slice(0, Math.max(remainingShownCount, 0));
+                remainingShownCount -= options.length;
+                if (!options.length) {
+                    return undefined;
+                }
+                return isViraDropdownOptionGroup(entry)
+                    ? {
+                        ...entry,
+                        options,
+                    }
+                    : entry;
+            }, check.isTruthy)
+            : filteredOptions;
+        const hiddenOptionsCount = filteredFlatOptions.length -
+            shownOptions.flatMap((entry) => {
+                return isViraDropdownOptionGroup(entry) ? entry.options : [entry];
+            }).length;
         function findSearchInput() {
             const searchInput = host.shadowRoot.querySelector('.search-input');
             return searchInput instanceof HTMLInputElement ? searchInput : undefined;
@@ -352,7 +378,7 @@ export const ViraDropdown = defineViraElement()({
                   `;
         }
         /** Drag-select actions in the same order as the rendered menu items. */
-        const menuItemActions = filteredOptions.flatMap((entry) => {
+        const menuItemActions = shownOptions.flatMap((entry) => {
             const options = isViraDropdownOptionGroup(entry) ? entry.options : [entry];
             const optionActions = options.map((option) => {
                 return option.disabled
@@ -404,7 +430,7 @@ export const ViraDropdown = defineViraElement()({
         })}
             >
                 ${filteredFlatOptions.length
-            ? filteredOptions.map((entry) => {
+            ? shownOptions.map((entry) => {
                 return isViraDropdownOptionGroup(entry)
                     ? html `
                                     ${renderGroupLabel(entry)} ${renderOptionEntries(entry.options)}
@@ -414,6 +440,25 @@ export const ViraDropdown = defineViraElement()({
             : html `
                           <div class="no-options">${inputs.noOptionsText}</div>
                       `}
+                ${hiddenOptionsCount
+            ? html `
+                          <div
+                              class="hidden-options-hint"
+                              ${testId(testIds.hiddenOptionsHint)}
+                              ${listen('mousedown', (event) => {
+                /** Keeps focus in the search input. */
+                event.preventDefault();
+            })}
+                              ${listen('click', (event) => {
+                /** ViraPopoverTrigger closes on any click inside its popover. */
+                event.stopPropagation();
+            })}
+                          >
+                              ${inputs.hiddenOptionsText?.(hiddenOptionsCount) ??
+                `+${hiddenOptionsCount}, type to narrow your search`}
+                          </div>
+                      `
+            : nothing}
             </${ViraMenu}>
         `;
         const triggerTemplate = html `

package/dist/icons/lucide/belarusian-ruble.icon.d.ts

@@ -0,0 +1,8 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+/**
+ * Lucide's `BelarusianRuble` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/belarusian-ruble
+ */
+export declare const LucideBelarusianRubleIcon: import("../icon-svg.js").ViraIconSvg<"BelarusianRuble">;

package/dist/icons/lucide/belarusian-ruble.icon.js

@@ -0,0 +1,13 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+import { BelarusianRuble as svg } from 'lucide-static';
+import { createLucideIcon } from '../lucide-icon.js';
+/**
+ * Lucide's `BelarusianRuble` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/belarusian-ruble
+ */
+export const LucideBelarusianRubleIcon = createLucideIcon({
+    name: 'BelarusianRuble',
+    svg,
+});

package/dist/icons/lucide/calendar-chevrons-left.icon.d.ts

@@ -0,0 +1,8 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+/**
+ * Lucide's `CalendarChevronsLeft` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/calendar-chevrons-left
+ */
+export declare const LucideCalendarChevronsLeftIcon: import("../icon-svg.js").ViraIconSvg<"CalendarChevronsLeft">;

package/dist/icons/lucide/calendar-chevrons-left.icon.js

@@ -0,0 +1,13 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+import { CalendarChevronsLeft as svg } from 'lucide-static';
+import { createLucideIcon } from '../lucide-icon.js';
+/**
+ * Lucide's `CalendarChevronsLeft` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/calendar-chevrons-left
+ */
+export const LucideCalendarChevronsLeftIcon = createLucideIcon({
+    name: 'CalendarChevronsLeft',
+    svg,
+});

package/dist/icons/lucide/circle-fading-play.icon.d.ts

@@ -0,0 +1,8 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+/**
+ * Lucide's `CircleFadingPlay` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/circle-fading-play
+ */
+export declare const LucideCircleFadingPlayIcon: import("../icon-svg.js").ViraIconSvg<"CircleFadingPlay">;

package/dist/icons/lucide/circle-fading-play.icon.js

@@ -0,0 +1,13 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+import { CircleFadingPlay as svg } from 'lucide-static';
+import { createLucideIcon } from '../lucide-icon.js';
+/**
+ * Lucide's `CircleFadingPlay` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/circle-fading-play
+ */
+export const LucideCircleFadingPlayIcon = createLucideIcon({
+    name: 'CircleFadingPlay',
+    svg,
+});

package/dist/icons/lucide/cpu-ai.icon.d.ts

@@ -0,0 +1,8 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+/**
+ * Lucide's `CpuAi` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/cpu-ai
+ */
+export declare const LucideCpuAiIcon: import("../icon-svg.js").ViraIconSvg<"CpuAi">;

package/dist/icons/lucide/cpu-ai.icon.js

@@ -0,0 +1,13 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+import { CpuAi as svg } from 'lucide-static';
+import { createLucideIcon } from '../lucide-icon.js';
+/**
+ * Lucide's `CpuAi` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/cpu-ai
+ */
+export const LucideCpuAiIcon = createLucideIcon({
+    name: 'CpuAi',
+    svg,
+});

package/dist/icons/lucide/folder-user.icon.d.ts

@@ -0,0 +1,8 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+/**
+ * Lucide's `FolderUser` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/folder-user
+ */
+export declare const LucideFolderUserIcon: import("../icon-svg.js").ViraIconSvg<"FolderUser">;

package/dist/icons/lucide/folder-user.icon.js

@@ -0,0 +1,13 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+import { FolderUser as svg } from 'lucide-static';
+import { createLucideIcon } from '../lucide-icon.js';
+/**
+ * Lucide's `FolderUser` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/folder-user
+ */
+export const LucideFolderUserIcon = createLucideIcon({
+    name: 'FolderUser',
+    svg,
+});

package/dist/icons/lucide/folder-users.icon.d.ts

@@ -0,0 +1,8 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+/**
+ * Lucide's `FolderUsers` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/folder-users
+ */
+export declare const LucideFolderUsersIcon: import("../icon-svg.js").ViraIconSvg<"FolderUsers">;

package/dist/icons/lucide/folder-users.icon.js

@@ -0,0 +1,13 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+import { FolderUsers as svg } from 'lucide-static';
+import { createLucideIcon } from '../lucide-icon.js';
+/**
+ * Lucide's `FolderUsers` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/folder-users
+ */
+export const LucideFolderUsersIcon = createLucideIcon({
+    name: 'FolderUsers',
+    svg,
+});

package/dist/icons/lucide/graph-star.icon.d.ts

@@ -0,0 +1,8 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+/**
+ * Lucide's `GraphStar` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/graph-star
+ */
+export declare const LucideGraphStarIcon: import("../icon-svg.js").ViraIconSvg<"GraphStar">;

package/dist/icons/lucide/graph-star.icon.js

@@ -0,0 +1,13 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+import { GraphStar as svg } from 'lucide-static';
+import { createLucideIcon } from '../lucide-icon.js';
+/**
+ * Lucide's `GraphStar` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/graph-star
+ */
+export const LucideGraphStarIcon = createLucideIcon({
+    name: 'GraphStar',
+    svg,
+});

package/dist/icons/lucide/guitar-electric.icon.d.ts

@@ -0,0 +1,8 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+/**
+ * Lucide's `GuitarElectric` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/guitar-electric
+ */
+export declare const LucideGuitarElectricIcon: import("../icon-svg.js").ViraIconSvg<"GuitarElectric">;

package/dist/icons/lucide/guitar-electric.icon.js

@@ -0,0 +1,13 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+import { GuitarElectric as svg } from 'lucide-static';
+import { createLucideIcon } from '../lucide-icon.js';
+/**
+ * Lucide's `GuitarElectric` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/guitar-electric
+ */
+export const LucideGuitarElectricIcon = createLucideIcon({
+    name: 'GuitarElectric',
+    svg,
+});

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

@@ -157,6 +157,7 @@ export * from './beef-off.icon.js';
 export * from './beef.icon.js';
 export * from './beer-off.icon.js';
 export * from './beer.icon.js';
+export * from './belarusian-ruble.icon.js';
 export * from './bell-check.icon.js';
 export * from './bell-dot.icon.js';
 export * from './bell-electric.icon.js';
@@ -269,6 +270,7 @@ export * from './calendar-arrow-down.icon.js';
 export * from './calendar-arrow-up.icon.js';
 export * from './calendar-check-2.icon.js';
 export * from './calendar-check.icon.js';
+export * from './calendar-chevrons-left.icon.js';
 export * from './calendar-chevrons-right.icon.js';
 export * from './calendar-clock.icon.js';
 export * from './calendar-cog.icon.js';
@@ -393,6 +395,7 @@ export * from './circle-ellipsis.icon.js';
 export * from './circle-equal.icon.js';
 export * from './circle-euro.icon.js';
 export * from './circle-fading-arrow-up.icon.js';
+export * from './circle-fading-play.icon.js';
 export * from './circle-fading-plus.icon.js';
 export * from './circle-gauge.icon.js';
 export * from './circle-minus.icon.js';
@@ -518,6 +521,7 @@ export * from './corner-right-down.icon.js';
 export * from './corner-right-up.icon.js';
 export * from './corner-up-left.icon.js';
 export * from './corner-up-right.icon.js';
+export * from './cpu-ai.icon.js';
 export * from './cpu.icon.js';
 export * from './creative-commons.icon.js';
 export * from './credit-card-check.icon.js';
@@ -744,6 +748,8 @@ export * from './folder-symlink.icon.js';
 export * from './folder-sync.icon.js';
 export * from './folder-tree.icon.js';
 export * from './folder-up.icon.js';
+export * from './folder-user.icon.js';
+export * from './folder-users.icon.js';
 export * from './folder-x.icon.js';
 export * from './folder.icon.js';
 export * from './folders.icon.js';
@@ -805,6 +811,7 @@ export * from './goal.icon.js';
 export * from './gpu.icon.js';
 export * from './graduation-cap.icon.js';
 export * from './grape.icon.js';
+export * from './graph-star.icon.js';
 export * from './grid-2x2-check.icon.js';
 export * from './grid-2x2-plus.icon.js';
 export * from './grid-2x2-x.icon.js';
@@ -816,6 +823,7 @@ export * from './grip-vertical.icon.js';
 export * from './grip.icon.js';
 export * from './groceries.icon.js';
 export * from './group.icon.js';
+export * from './guitar-electric.icon.js';
 export * from './guitar.icon.js';
 export * from './ham.icon.js';
 export * from './hamburger.icon.js';
@@ -1059,6 +1067,7 @@ export * from './message-circle-off.icon.js';
 export * from './message-circle-plus.icon.js';
 export * from './message-circle-question-mark.icon.js';
 export * from './message-circle-reply.icon.js';
+export * from './message-circle-text.icon.js';
 export * from './message-circle-warning.icon.js';
 export * from './message-circle-x.icon.js';
 export * from './message-circle.icon.js';
@@ -1234,6 +1243,7 @@ export * from './pencil-sparkles.icon.js';
 export * from './pencil.icon.js';
 export * from './pentagon.icon.js';
 export * from './percent.icon.js';
+export * from './perfume-bottle.icon.js';
 export * from './person-standing.icon.js';
 export * from './phi.icon.js';
 export * from './philippine-peso.icon.js';
@@ -1417,6 +1427,7 @@ export * from './separator-horizontal.icon.js';
 export * from './separator-vertical.icon.js';
 export * from './server-cog.icon.js';
 export * from './server-crash.icon.js';
+export * from './server-nas.icon.js';
 export * from './server-off.icon.js';
 export * from './server-plus.icon.js';
 export * from './server.icon.js';
@@ -1781,6 +1792,8 @@ export * from './user-shield.icon.js';
 export * from './user-star.icon.js';
 export * from './user-x.icon.js';
 export * from './user.icon.js';
+export * from './users-collaboration.icon.js';
+export * from './users-round-collaboration.icon.js';
 export * from './users-round.icon.js';
 export * from './users.icon.js';
 export * from './utensils-crossed.icon.js';

package/dist/icons/lucide/index.js

@@ -157,6 +157,7 @@ export * from './beef-off.icon.js';
 export * from './beef.icon.js';
 export * from './beer-off.icon.js';
 export * from './beer.icon.js';
+export * from './belarusian-ruble.icon.js';
 export * from './bell-check.icon.js';
 export * from './bell-dot.icon.js';
 export * from './bell-electric.icon.js';
@@ -269,6 +270,7 @@ export * from './calendar-arrow-down.icon.js';
 export * from './calendar-arrow-up.icon.js';
 export * from './calendar-check-2.icon.js';
 export * from './calendar-check.icon.js';
+export * from './calendar-chevrons-left.icon.js';
 export * from './calendar-chevrons-right.icon.js';
 export * from './calendar-clock.icon.js';
 export * from './calendar-cog.icon.js';
@@ -393,6 +395,7 @@ export * from './circle-ellipsis.icon.js';
 export * from './circle-equal.icon.js';
 export * from './circle-euro.icon.js';
 export * from './circle-fading-arrow-up.icon.js';
+export * from './circle-fading-play.icon.js';
 export * from './circle-fading-plus.icon.js';
 export * from './circle-gauge.icon.js';
 export * from './circle-minus.icon.js';
@@ -518,6 +521,7 @@ export * from './corner-right-down.icon.js';
 export * from './corner-right-up.icon.js';
 export * from './corner-up-left.icon.js';
 export * from './corner-up-right.icon.js';
+export * from './cpu-ai.icon.js';
 export * from './cpu.icon.js';
 export * from './creative-commons.icon.js';
 export * from './credit-card-check.icon.js';
@@ -744,6 +748,8 @@ export * from './folder-symlink.icon.js';
 export * from './folder-sync.icon.js';
 export * from './folder-tree.icon.js';
 export * from './folder-up.icon.js';
+export * from './folder-user.icon.js';
+export * from './folder-users.icon.js';
 export * from './folder-x.icon.js';
 export * from './folder.icon.js';
 export * from './folders.icon.js';
@@ -805,6 +811,7 @@ export * from './goal.icon.js';
 export * from './gpu.icon.js';
 export * from './graduation-cap.icon.js';
 export * from './grape.icon.js';
+export * from './graph-star.icon.js';
 export * from './grid-2x2-check.icon.js';
 export * from './grid-2x2-plus.icon.js';
 export * from './grid-2x2-x.icon.js';
@@ -816,6 +823,7 @@ export * from './grip-vertical.icon.js';
 export * from './grip.icon.js';
 export * from './groceries.icon.js';
 export * from './group.icon.js';
+export * from './guitar-electric.icon.js';
 export * from './guitar.icon.js';
 export * from './ham.icon.js';
 export * from './hamburger.icon.js';
@@ -1059,6 +1067,7 @@ export * from './message-circle-off.icon.js';
 export * from './message-circle-plus.icon.js';
 export * from './message-circle-question-mark.icon.js';
 export * from './message-circle-reply.icon.js';
+export * from './message-circle-text.icon.js';
 export * from './message-circle-warning.icon.js';
 export * from './message-circle-x.icon.js';
 export * from './message-circle.icon.js';
@@ -1234,6 +1243,7 @@ export * from './pencil-sparkles.icon.js';
 export * from './pencil.icon.js';
 export * from './pentagon.icon.js';
 export * from './percent.icon.js';
+export * from './perfume-bottle.icon.js';
 export * from './person-standing.icon.js';
 export * from './phi.icon.js';
 export * from './philippine-peso.icon.js';
@@ -1417,6 +1427,7 @@ export * from './separator-horizontal.icon.js';
 export * from './separator-vertical.icon.js';
 export * from './server-cog.icon.js';
 export * from './server-crash.icon.js';
+export * from './server-nas.icon.js';
 export * from './server-off.icon.js';
 export * from './server-plus.icon.js';
 export * from './server.icon.js';
@@ -1781,6 +1792,8 @@ export * from './user-shield.icon.js';
 export * from './user-star.icon.js';
 export * from './user-x.icon.js';
 export * from './user.icon.js';
+export * from './users-collaboration.icon.js';
+export * from './users-round-collaboration.icon.js';
 export * from './users-round.icon.js';
 export * from './users.icon.js';
 export * from './utensils-crossed.icon.js';

package/dist/icons/lucide/message-circle-text.icon.d.ts

@@ -0,0 +1,8 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+/**
+ * Lucide's `MessageCircleText` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/message-circle-text
+ */
+export declare const LucideMessageCircleTextIcon: import("../icon-svg.js").ViraIconSvg<"MessageCircleText">;

package/dist/icons/lucide/message-circle-text.icon.js

@@ -0,0 +1,13 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+import { MessageCircleText as svg } from 'lucide-static';
+import { createLucideIcon } from '../lucide-icon.js';
+/**
+ * Lucide's `MessageCircleText` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/message-circle-text
+ */
+export const LucideMessageCircleTextIcon = createLucideIcon({
+    name: 'MessageCircleText',
+    svg,
+});

package/dist/icons/lucide/perfume-bottle.icon.d.ts

@@ -0,0 +1,8 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+/**
+ * Lucide's `PerfumeBottle` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/perfume-bottle
+ */
+export declare const LucidePerfumeBottleIcon: import("../icon-svg.js").ViraIconSvg<"PerfumeBottle">;

package/dist/icons/lucide/perfume-bottle.icon.js

@@ -0,0 +1,13 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+import { PerfumeBottle as svg } from 'lucide-static';
+import { createLucideIcon } from '../lucide-icon.js';
+/**
+ * Lucide's `PerfumeBottle` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/perfume-bottle
+ */
+export const LucidePerfumeBottleIcon = createLucideIcon({
+    name: 'PerfumeBottle',
+    svg,
+});

package/dist/icons/lucide/server-nas.icon.d.ts

@@ -0,0 +1,8 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+/**
+ * Lucide's `ServerNas` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/server-nas
+ */
+export declare const LucideServerNasIcon: import("../icon-svg.js").ViraIconSvg<"ServerNas">;

package/dist/icons/lucide/server-nas.icon.js

@@ -0,0 +1,13 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+import { ServerNas as svg } from 'lucide-static';
+import { createLucideIcon } from '../lucide-icon.js';
+/**
+ * Lucide's `ServerNas` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/server-nas
+ */
+export const LucideServerNasIcon = createLucideIcon({
+    name: 'ServerNas',
+    svg,
+});

package/dist/icons/lucide/users-collaboration.icon.d.ts

@@ -0,0 +1,8 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+/**
+ * Lucide's `UsersCollaboration` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/users-collaboration
+ */
+export declare const LucideUsersCollaborationIcon: import("../icon-svg.js").ViraIconSvg<"UsersCollaboration">;

package/dist/icons/lucide/users-collaboration.icon.js

@@ -0,0 +1,13 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+import { UsersCollaboration as svg } from 'lucide-static';
+import { createLucideIcon } from '../lucide-icon.js';
+/**
+ * Lucide's `UsersCollaboration` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/users-collaboration
+ */
+export const LucideUsersCollaborationIcon = createLucideIcon({
+    name: 'UsersCollaboration',
+    svg,
+});

package/dist/icons/lucide/users-round-collaboration.icon.d.ts

@@ -0,0 +1,8 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+/**
+ * Lucide's `UsersRoundCollaboration` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/users-round-collaboration
+ */
+export declare const LucideUsersRoundCollaborationIcon: import("../icon-svg.js").ViraIconSvg<"UsersRoundCollaboration">;

package/dist/icons/lucide/users-round-collaboration.icon.js

@@ -0,0 +1,13 @@
+/** This file is automatically updated by generate-lucide-icons.ts */
+import { UsersRoundCollaboration as svg } from 'lucide-static';
+import { createLucideIcon } from '../lucide-icon.js';
+/**
+ * Lucide's `UsersRoundCollaboration` icon, rendered at 16px.
+ *
+ * @category Lucide Icon
+ * @see https://lucide.dev/icons/users-round-collaboration
+ */
+export const LucideUsersRoundCollaborationIcon = createLucideIcon({
+    name: 'UsersRoundCollaboration',
+    svg,
+});

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

@@ -26,12 +26,11 @@ function isAllowed({ value: rawValue, allowed, blocked }) {
             input: value,
             matcher: allowed,
         });
-    const isBlockedCharacter = blocked
-        ? doesMatch({
+    const isBlockedCharacter = !!blocked &&
+        doesMatch({
             input: value,
             matcher: blocked,
-        })
-        : false;
+        });
     return isAllowedCharacter && !isBlockedCharacter;
 }
 /**

package/dist/util/vira-theme-client.d.ts

@@ -1,5 +1,6 @@
-import { type MaybePromise, type PartialWithUndefined } from '@augment-vir/common';
+import { type MaybePromise, type PartialWithUndefined, type RequireOneOrNone } from '@augment-vir/common';
 import { LocalStorageClient } from '@electrovir/local-storage-client';
+import { ListenTarget } from 'typed-event-target';
 /**
  * A user-facing selection of which theme to display. `Auto` follows the system color scheme; the
  * other values force a specific theme regardless of system preference.
@@ -11,6 +12,39 @@ export declare enum ViraThemeSelection {
     Dark = "dark",
     Auto = "auto"
 }
+declare const ViraThemeAppliedEvent_base: (new (eventInitDict: {
+    bubbles?: boolean;
+    cancelable?: boolean;
+    composed?: boolean;
+    detail: ViraThemeSelection.Light | ViraThemeSelection.Dark;
+}) => import("typed-event-target").TypedCustomEvent<ViraThemeSelection.Light | ViraThemeSelection.Dark, "vira-theme-applied">) & Pick<{
+    new (type: string, eventInitDict?: EventInit): Event;
+    prototype: Event;
+    readonly NONE: 0;
+    readonly CAPTURING_PHASE: 1;
+    readonly AT_TARGET: 2;
+    readonly BUBBLING_PHASE: 3;
+}, "NONE" | "CAPTURING_PHASE" | "AT_TARGET" | "BUBBLING_PHASE" | "prototype"> & Pick<import("typed-event-target").TypedCustomEvent<ViraThemeSelection.Light | ViraThemeSelection.Dark, "vira-theme-applied">, "type">;
+/**
+ * Fired by {@link ViraThemeClient} whenever its applied theme changes, including when the system
+ * color scheme flips while the selection is `Auto`. Not fired when a new selection leaves the
+ * applied theme the same (such as switching from `Dark` to `Auto` on a dark system).
+ *
+ * @category Internal
+ */
+export declare class ViraThemeAppliedEvent extends ViraThemeAppliedEvent_base {
+}
+/**
+ * Persists the selection of a {@link ViraThemeClient}.
+ *
+ * @category Internal
+ */
+export type ViraThemeStorage = {
+    /** The previously saved selection. `undefined` (nothing saved yet) is treated as `Auto`. */
+    init: ViraThemeSelection | undefined;
+    /** Called after the selection has already been applied, so it can be async. */
+    save(selection: ViraThemeSelection): MaybePromise<void>;
+};
 /**
  * Used by {@link ViraThemeClient} to apply themes. By default, vira themes will be applied (via
  * {@link defaultApplyThemeCallback}).
@@ -38,6 +72,7 @@ export type ViraThemeClientParams = PartialWithUndefined<{
      * will be used.
      */
     applyTheme: ApplyThemeCallback;
+}> & RequireOneOrNone<{
     /**
      * Override the LocalStorage store name used for theme persistence. Useful if a single page
      * hosts multiple isolated theme clients.
@@ -45,6 +80,11 @@ export type ViraThemeClientParams = PartialWithUndefined<{
      * @default 'vira-theme'
      */
     storeName: string;
+    /**
+     * Where to persist the selected theme. If not provided, the selection is persisted in
+     * LocalStorage under `storeName`.
+     */
+    storage: ViraThemeStorage;
 }>;
 declare const themeStorageShapes: {
     selectedTheme: import("object-shape-tester").Shape<{
@@ -53,18 +93,25 @@ declare const themeStorageShapes: {
 };
 /**
  * Tracks the user's {@link ViraThemeSelection} and bridges it to a consumer-supplied `applyTheme`
- * callback. Persists the selection in LocalStorage via an internal `LocalStorageClient`, and
- * listens for system color-scheme changes to re-apply the theme in auto mode without persisting.
+ * callback. Persists the selection through `storage` (LocalStorage by default), and listens for
+ * system color-scheme changes to re-apply the theme in auto mode without persisting. Listen for
+ * {@link ViraThemeAppliedEvent} to react to the displayed theme changing.
  *
  * The initial theme is applied during construction.
  *
  * @category Util
  */
-export declare class ViraThemeClient {
+export declare class ViraThemeClient extends ListenTarget<ViraThemeAppliedEvent> {
     /** The callback that will be called to apply a new theme. */
     protected readonly applyThemeCallback: ApplyThemeCallback;
-    /** Contains the user's last selected theme, saving and loading it to disk for persistence. */
-    protected readonly localStorageClient: LocalStorageClient<typeof themeStorageShapes>;
+    /** The default storage, only created when no `storage` param is given. */
+    protected readonly localStorageClient: LocalStorageClient<typeof themeStorageShapes> | undefined;
+    /** Persists the user's selected theme. */
+    protected readonly storage: ViraThemeStorage;
+    /** The user's selected theme. */
+    protected selectedTheme: ViraThemeSelection;
+    /** The theme that is currently displayed. */
+    protected appliedTheme: Exclude<ViraThemeSelection, ViraThemeSelection.Auto> | undefined;
     /** A callback to remove the global theme preference listener. */
     protected readonly removeThemePreferenceListener: () => void;
     constructor(params?: Readonly<ViraThemeClientParams>);
@@ -73,11 +120,13 @@ export declare class ViraThemeClient {
      * get out of sync.
      */
     getCurrentTheme(): ViraThemeSelection;
+    /** The theme that is currently displayed, with `Auto` resolved from the system color scheme. */
+    getAppliedTheme(): Exclude<ViraThemeSelection, ViraThemeSelection.Auto>;
     /** Set the selected theme. */
     setSelectedTheme(selection: ViraThemeSelection): void;
     /** Cleanup internal state and listeners. */
     destroy(): void;
-    /** Apply the currently selected theme. */
+    /** Apply the given selection and fire {@link ViraThemeAppliedEvent} if the result changed. */
     protected applySelection(selection: ViraThemeSelection): void;
 }
 export {};

package/dist/util/vira-theme-client.js

@@ -2,7 +2,7 @@ import { assert } from '@augment-vir/assert';
 import { LocalStorageClient } from '@electrovir/local-storage-client';
 import { defineShape, enumShape } from 'object-shape-tester';
 import { applyColorThemeViaStyleElement } from 'theme-vir/dist/color-theme/apply-color-theme.js';
-import { listenTo } from 'typed-event-target';
+import { defineTypedCustomEvent, ListenTarget, listenTo } from 'typed-event-target';
 import { viraTheme, viraThemeDarkOverride } from '../styles/vira-color-theme.js';
 /**
  * A user-facing selection of which theme to display. `Auto` follows the system color scheme; the
@@ -16,6 +16,15 @@ export var ViraThemeSelection;
     ViraThemeSelection["Dark"] = "dark";
     ViraThemeSelection["Auto"] = "auto";
 })(ViraThemeSelection || (ViraThemeSelection = {}));
+/**
+ * Fired by {@link ViraThemeClient} whenever its applied theme changes, including when the system
+ * color scheme flips while the selection is `Auto`. Not fired when a new selection leaves the
+ * applied theme the same (such as switching from `Dark` to `Auto` on a dark system).
+ *
+ * @category Internal
+ */
+export class ViraThemeAppliedEvent extends defineTypedCustomEvent()('vira-theme-applied') {
+}
 /**
  * Default implementation of {@link ApplyThemeCallback}, which simply applies Vira themes.
  *
@@ -32,62 +41,94 @@ const themeStorageShapes = {
 };
 /**
  * Tracks the user's {@link ViraThemeSelection} and bridges it to a consumer-supplied `applyTheme`
- * callback. Persists the selection in LocalStorage via an internal `LocalStorageClient`, and
- * listens for system color-scheme changes to re-apply the theme in auto mode without persisting.
+ * callback. Persists the selection through `storage` (LocalStorage by default), and listens for
+ * system color-scheme changes to re-apply the theme in auto mode without persisting. Listen for
+ * {@link ViraThemeAppliedEvent} to react to the displayed theme changing.
  *
  * The initial theme is applied during construction.
  *
  * @category Util
  */
-export class ViraThemeClient {
+export class ViraThemeClient extends ListenTarget {
     /** The callback that will be called to apply a new theme. */
     applyThemeCallback = defaultApplyThemeCallback;
-    /** Contains the user's last selected theme, saving and loading it to disk for persistence. */
+    /** The default storage, only created when no `storage` param is given. */
     localStorageClient;
+    /** Persists the user's selected theme. */
+    storage;
+    /** The user's selected theme. */
+    selectedTheme;
+    /** The theme that is currently displayed. */
+    appliedTheme;
     /** A callback to remove the global theme preference listener. */
     removeThemePreferenceListener = listenTo(globalThis.matchMedia(darkSchemeMediaQuery), 'change', (event) => {
         assert.instanceOf(event, MediaQueryListEvent);
-        if (this.getCurrentTheme() === ViraThemeSelection.Auto) {
-            void this.applyThemeCallback({
-                useDarkTheme: event.matches,
-            });
+        if (this.selectedTheme === ViraThemeSelection.Auto) {
+            this.applySelection(ViraThemeSelection.Auto);
         }
     });
     constructor(params = {}) {
+        super();
         if (params.applyTheme) {
             this.applyThemeCallback = params.applyTheme;
         }
-        this.localStorageClient = new LocalStorageClient(themeStorageShapes, {
-            storeName: params.storeName || 'vira-theme',
-        });
-        this.applySelection(this.getCurrentTheme());
+        if (params.storage) {
+            this.storage = params.storage;
+        }
+        else {
+            const localStorageClient = new LocalStorageClient(themeStorageShapes, {
+                storeName: params.storeName || 'vira-theme',
+            });
+            this.localStorageClient = localStorageClient;
+            this.storage = {
+                init: localStorageClient.get.selectedTheme()?.theme,
+                save(theme) {
+                    localStorageClient.set.selectedTheme({
+                        theme,
+                    });
+                },
+            };
+        }
+        this.selectedTheme = this.storage.init || ViraThemeSelection.Auto;
+        this.applySelection(this.selectedTheme);
     }
     /**
      * The currently selected theme. If you use multiple clients to set the same theme, this might
      * get out of sync.
      */
     getCurrentTheme() {
-        return this.localStorageClient.get.selectedTheme()?.theme || ViraThemeSelection.Auto;
+        return this.selectedTheme;
+    }
+    /** The theme that is currently displayed, with `Auto` resolved from the system color scheme. */
+    getAppliedTheme() {
+        return this.appliedTheme || ViraThemeSelection.Light;
     }
     /** Set the selected theme. */
     setSelectedTheme(selection) {
+        this.selectedTheme = selection;
         this.applySelection(selection);
-        this.localStorageClient.set.selectedTheme({
-            theme: selection,
-        });
+        void this.storage.save(selection);
     }
     /** Cleanup internal state and listeners. */
     destroy() {
         this.removeThemePreferenceListener();
-        this.localStorageClient.destroy();
+        this.localStorageClient?.destroy();
+        super.destroy();
     }
-    /** Apply the currently selected theme. */
+    /** Apply the given selection and fire {@link ViraThemeAppliedEvent} if the result changed. */
     applySelection(selection) {
         const useDarkTheme = selection === ViraThemeSelection.Dark ||
             (selection === ViraThemeSelection.Auto &&
                 globalThis.matchMedia(darkSchemeMediaQuery).matches);
+        const appliedTheme = useDarkTheme ? ViraThemeSelection.Dark : ViraThemeSelection.Light;
         void this.applyThemeCallback({
             useDarkTheme,
         });
+        if (appliedTheme !== this.appliedTheme) {
+            this.appliedTheme = appliedTheme;
+            this.dispatch(new ViraThemeAppliedEvent({
+                detail: appliedTheme,
+            }));
+        }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "33.6.0",
+    "version": "33.8.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,9 +38,9 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^32.5.0",
-        "@augment-vir/common": "^32.5.0",
-        "@augment-vir/web": "^32.5.0",
+        "@augment-vir/assert": "^32.6.0",
+        "@augment-vir/common": "^32.6.0",
+        "@augment-vir/web": "^32.6.0",
         "@electrovir/color": "^2.0.0",
         "@electrovir/local-storage-client": "^0.1.1",
         "date-vir": "^9.4.0",
@@ -48,15 +48,15 @@
         "json-schema-to-ts": "^3.1.1",
         "lit": "^3.3.3",
         "lit-css-vars": "^3.6.3",
-        "lucide-static": "1.55.0",
+        "lucide-static": "1.57.0",
         "object-shape-tester": "^6.15.1",
         "observavir": "^2.4.2",
         "page-active": "^1.0.4",
-        "spa-router-vir": "^6.8.0",
+        "spa-router-vir": "^6.9.0",
         "typed-event-target": "^4.3.4"
     },
     "devDependencies": {
-        "@augment-vir/test": "^32.5.0",
+        "@augment-vir/test": "^32.6.0",
         "@web/dev-server-esbuild": "^2.0.0",
         "@web/test-runner": "^1.0.0",
         "@web/test-runner-commands": "^1.0.1",