vira 33.4.1 → 33.4.3

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/icon-css-vars.d.ts

@@ -10,5 +10,5 @@ export declare const viraIconCssVars: import("lit-css-vars").CssVarDefinitions<{
     readonly 'vira-icon-stroke-color': "currentColor";
     /** To be used for coloring an icon's fill. */
     readonly 'vira-icon-fill-color': "none";
-    readonly 'vira-icon-stroke-width': "1px";
+    readonly 'vira-icon-stroke-width': "1.5px";
 }>;

package/dist/icons/icon-css-vars.js

@@ -11,5 +11,5 @@ export const viraIconCssVars = defineCssVars({
     'vira-icon-stroke-color': 'currentColor',
     /** To be used for coloring an icon's fill. */
     'vira-icon-fill-color': 'none',
-    'vira-icon-stroke-width': '1px',
+    'vira-icon-stroke-width': '1.5px',
 });

package/package.json

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