vira 31.31.7 → 32.0.0

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

@@ -4,7 +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 { Check24Icon } from '../icons/icon-svgs/24/check-24.icon.js';
+import { ChevronDown16Icon } from '../icons/icon-svgs/16/chevron-down-16.icon.js';
 import { createFocusStyles } from '../styles/focus.js';
 import { viraFontCssVars } from '../styles/font.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
@@ -126,42 +126,54 @@ export const ViraTabs = defineViraElement()({
         };
     },
     hostClasses: {
-        'vira-tabs-bar-top': ({ inputs }) => inputs.barDirection === ViraTabsBarDirection.Top,
-        'vira-tabs-bar-bottom': ({ inputs }) => {
+        'vira-tabs-bar-top'({ inputs }) {
+            return inputs.barDirection === ViraTabsBarDirection.Top;
+        },
+        'vira-tabs-bar-bottom'({ inputs }) {
             return !inputs.barDirection || inputs.barDirection === ViraTabsBarDirection.Bottom;
         },
-        'vira-tabs-bar-left': ({ inputs }) => inputs.barDirection === ViraTabsBarDirection.Left,
-        'vira-tabs-bar-right': ({ inputs }) => inputs.barDirection === ViraTabsBarDirection.Right,
+        'vira-tabs-bar-left'({ inputs }) {
+            return inputs.barDirection === ViraTabsBarDirection.Left;
+        },
+        'vira-tabs-bar-right'({ inputs }) {
+            return inputs.barDirection === ViraTabsBarDirection.Right;
+        },
         ...arrayToObject(getObjectTypedKeys(viraColorVariantToHostClassKey), (colorVariant) => {
             const colorKey = viraColorVariantToHostClassKey[colorVariant];
             return {
                 key: `vira-tabs-color-${colorKey}`,
-                value: ({ inputs, }) => {
+                value({ inputs, }) {
                     return inputs.color === colorVariant || inputs.color === colorKey;
                 },
             };
         }, {
             useRequired: true,
         }),
-        'vira-tabs-color-plain': ({ inputs, }) => !inputs.color || inputs.color === ViraColorVariant.Plain,
-        'vira-tabs-color-neutral': ({ inputs, }) => inputs.color === ViraColorVariant.Neutral,
+        'vira-tabs-color-plain'({ inputs, }) {
+            return !inputs.color || inputs.color === ViraColorVariant.Plain;
+        },
+        'vira-tabs-color-neutral'({ inputs, }) {
+            return inputs.color === ViraColorVariant.Neutral;
+        },
         ...arrayToObject(standaloneThemeColorNames, (colorName) => {
             return {
                 key: `vira-tabs-color-${colorName}`,
-                value: ({ inputs, }) => {
+                value({ inputs, }) {
                     return inputs.color === colorName;
                 },
             };
         }, {
             useRequired: true,
         }),
-        'vira-tabs-icon-layout-vertical': ({ inputs }) => {
+        'vira-tabs-icon-layout-vertical'({ inputs }) {
             return !inputs.iconLayout || inputs.iconLayout === ViraTabsIconLayout.Vertical;
         },
-        'vira-tabs-icon-layout-horizontal': ({ inputs }) => {
+        'vira-tabs-icon-layout-horizontal'({ inputs }) {
             return inputs.iconLayout === ViraTabsIconLayout.Horizontal;
         },
-        'vira-tabs-fill-width': ({ inputs }) => !!inputs.shouldFillWidth,
+        'vira-tabs-fill-width'({ inputs }) {
+            return !!inputs.shouldFillWidth;
+        },
     },
     cssVars: {
         'vira-tabs-active-color': viraThemeByKeys[viraColorVariantToHostClassKey[ViraColorVariant.Info]]['behind-bg'][ContrastLevelName.NonBodyText].background.value,
@@ -170,7 +182,7 @@ export const ViraTabs = defineViraElement()({
         'vira-tabs-inactive-hover-color': viraTheme.colors[themeDefaultKey].foreground.value,
         'vira-tabs-bar-thickness': '2px',
     },
-    styles: ({ hostClasses, cssVars }) => {
+    styles({ hostClasses, cssVars }) {
         function buildThemedTabsColors(colorName) {
             return {
                 active: viraThemeByKeys[colorName]['behind-bg'][ContrastLevelName.NonBodyText]
@@ -496,7 +508,9 @@ export const ViraTabs = defineViraElement()({
         }
         function handleTabClick(tab) {
             if (!tab.isDisabled) {
-                dispatch(new events.tabSelect(tab));
+                dispatch(new events.tabSelect({
+                    detail: tab,
+                }));
             }
         }
         function renderTabItem(tab) {
@@ -743,13 +757,13 @@ export const ViraTabs = defineViraElement()({
         /**
          * Hidden copies of the "more" button in each of its possible shapes, rendered inside the
          * measurement mirror so their true widths can be measured before choosing which one fits:
-         * the default overflow label, and the collapsed selected tab's own label (with a
-         * checkmark).
+         * the default overflow label, and the collapsed selected tab's own label, with a caret.
          */
         const measureMoreButtons = html `
             <${ViraButton.assign({
             text: overflowLabel,
-            showMenuCaret: true,
+            icon: ChevronDown16Icon,
+            showIconOnRight: true,
             color: ViraColorVariant.Neutral,
         })}
                 class="measure-more-default"
@@ -758,8 +772,8 @@ export const ViraTabs = defineViraElement()({
             ? html `
                       <${ViraButton.assign({
                 text: selectedTab.label,
-                icon: Check24Icon,
-                showMenuCaret: true,
+                icon: ChevronDown16Icon,
+                showIconOnRight: true,
                 color: ViraColorVariant.Neutral,
             })}
                           class="measure-more-labeled"
@@ -778,8 +792,8 @@ export const ViraTabs = defineViraElement()({
             })}>
                           <${ViraButton.assign({
                 text: selectedIsCollapsed ? selectedTab?.label : overflowLabel,
-                icon: selectedIsCollapsed ? Check24Icon : undefined,
-                showMenuCaret: true,
+                icon: ChevronDown16Icon,
+                showIconOnRight: true,
                 color: ViraColorVariant.Neutral,
             })}
                               slot=${ViraMenuTrigger.slotNames['vira-menu-trigger-trigger']}

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

@@ -35,6 +35,6 @@ export declare const ViraTag: import("element-vir").DeclarativeElementDefinition
     color: ViraColorVariant | ViraThemeColorName;
     disabled: boolean;
 }>, {}, {
-    toggle: import("element-vir").DefineEvent<boolean>;
-    cancel: import("element-vir").DefineEvent<void>;
-}, "vira-tag-selectable" | "vira-tag-checked" | "vira-tag-not-checked" | "vira-tag-cancellable" | "vira-tag-not-clickable" | "vira-tag-disabled" | "vira-tag-size-large" | "vira-tag-size-medium" | "vira-tag-size-small" | "vira-tag-emphasis-standard" | "vira-tag-emphasis-subtle" | "vira-tag-color-red" | "vira-tag-color-yellow" | "vira-tag-color-green" | "vira-tag-color-blue" | "vira-tag-color-brand" | "vira-tag-color-purple" | "vira-tag-color-plain" | "vira-tag-color-neutral" | "vira-tag-color-teal" | "vira-tag-color-pink" | "vira-tag-color-grey", "vira-tag-text-color" | "vira-tag-background-color" | "vira-tag-border-color" | "vira-tag-hover-text-color" | "vira-tag-hover-background-color" | "vira-tag-hover-border-color" | "vira-tag-active-text-color" | "vira-tag-active-background-color" | "vira-tag-active-border-color" | "vira-tag-disabled-text-color" | "vira-tag-disabled-background-color" | "vira-tag-disabled-border-color" | "vira-tag-border-radius" | "vira-tag-gap" | "vira-tag-horizontal-padding" | "vira-tag-border-width", readonly [], readonly []>;
+    toggle: import("element-vir").DefineElementEvent<boolean>;
+    cancel: import("element-vir").DefineElementEvent<void>;
+}, "vira-tag-color-red" | "vira-tag-color-yellow" | "vira-tag-color-green" | "vira-tag-color-blue" | "vira-tag-color-brand" | "vira-tag-color-purple" | "vira-tag-color-plain" | "vira-tag-color-neutral" | "vira-tag-color-teal" | "vira-tag-color-pink" | "vira-tag-color-grey" | "vira-tag-selectable" | "vira-tag-checked" | "vira-tag-not-checked" | "vira-tag-cancellable" | "vira-tag-not-clickable" | "vira-tag-disabled" | "vira-tag-size-large" | "vira-tag-size-medium" | "vira-tag-size-small" | "vira-tag-emphasis-standard" | "vira-tag-emphasis-subtle", "vira-tag-text-color" | "vira-tag-background-color" | "vira-tag-border-color" | "vira-tag-hover-text-color" | "vira-tag-hover-background-color" | "vira-tag-hover-border-color" | "vira-tag-active-text-color" | "vira-tag-active-background-color" | "vira-tag-active-border-color" | "vira-tag-disabled-text-color" | "vira-tag-disabled-background-color" | "vira-tag-disabled-border-color" | "vira-tag-border-radius" | "vira-tag-gap" | "vira-tag-horizontal-padding" | "vira-tag-border-width", readonly [], readonly []>;

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

@@ -161,36 +161,60 @@ export const ViraTag = defineViraElement()({
         cancel: defineElementEvent(),
     },
     hostClasses: {
-        'vira-tag-selectable': ({ inputs }) => check.isBoolean(inputs.isClickable?.selected),
-        'vira-tag-checked': ({ inputs }) => !!inputs.isClickable?.selected,
-        'vira-tag-not-checked': ({ inputs }) => inputs.isClickable?.selected === false,
-        'vira-tag-cancellable': ({ inputs }) => !!inputs.isClickable?.cancellable,
-        'vira-tag-not-clickable': ({ inputs }) => !inputs.isClickable,
-        'vira-tag-disabled': ({ inputs }) => !!inputs.disabled,
-        'vira-tag-size-large': ({ inputs }) => inputs.size === ViraSize.Large,
-        'vira-tag-size-medium': ({ inputs }) => !inputs.size || inputs.size === ViraSize.Medium,
-        'vira-tag-size-small': ({ inputs }) => inputs.size === ViraSize.Small,
-        'vira-tag-emphasis-standard': ({ inputs }) => {
+        'vira-tag-selectable'({ inputs }) {
+            return check.isBoolean(inputs.isClickable?.selected);
+        },
+        'vira-tag-checked'({ inputs }) {
+            return !!inputs.isClickable?.selected;
+        },
+        'vira-tag-not-checked'({ inputs }) {
+            return inputs.isClickable?.selected === false;
+        },
+        'vira-tag-cancellable'({ inputs }) {
+            return !!inputs.isClickable?.cancellable;
+        },
+        'vira-tag-not-clickable'({ inputs }) {
+            return !inputs.isClickable;
+        },
+        'vira-tag-disabled'({ inputs }) {
+            return !!inputs.disabled;
+        },
+        'vira-tag-size-large'({ inputs }) {
+            return inputs.size === ViraSize.Large;
+        },
+        'vira-tag-size-medium'({ inputs }) {
+            return !inputs.size || inputs.size === ViraSize.Medium;
+        },
+        'vira-tag-size-small'({ inputs }) {
+            return inputs.size === ViraSize.Small;
+        },
+        'vira-tag-emphasis-standard'({ inputs }) {
             return !inputs.emphasis || inputs.emphasis === ViraEmphasis.Standard;
         },
-        'vira-tag-emphasis-subtle': ({ inputs }) => inputs.emphasis === ViraEmphasis.Subtle,
+        'vira-tag-emphasis-subtle'({ inputs }) {
+            return inputs.emphasis === ViraEmphasis.Subtle;
+        },
         ...arrayToObject(getObjectTypedKeys(viraColorVariantToHostClassKey), (colorVariant) => {
             const colorKey = viraColorVariantToHostClassKey[colorVariant];
             return {
                 key: `vira-tag-color-${colorKey}`,
-                value: ({ inputs, }) => {
+                value({ inputs, }) {
                     return inputs.color === colorVariant || inputs.color === colorKey;
                 },
             };
         }, {
             useRequired: true,
         }),
-        'vira-tag-color-plain': ({ inputs, }) => !inputs.color || inputs.color === ViraColorVariant.Plain,
-        'vira-tag-color-neutral': ({ inputs, }) => inputs.color === ViraColorVariant.Neutral,
+        'vira-tag-color-plain'({ inputs, }) {
+            return !inputs.color || inputs.color === ViraColorVariant.Plain;
+        },
+        'vira-tag-color-neutral'({ inputs, }) {
+            return inputs.color === ViraColorVariant.Neutral;
+        },
         ...arrayToObject(standaloneThemeColorNames, (colorName) => {
             return {
                 key: `vira-tag-color-${colorName}`,
-                value: ({ inputs, }) => {
+                value({ inputs, }) {
                     return inputs.color === colorName;
                 },
             };
@@ -198,7 +222,7 @@ export const ViraTag = defineViraElement()({
             useRequired: true,
         }),
     },
-    styles: ({ cssVars, hostClasses }) => {
+    styles({ cssVars, hostClasses }) {
         function buildVariantCssRule({ variantSelector, emphasisSelector, colors, }) {
             return css `
                 ${variantSelector}${emphasisSelector} {
@@ -432,10 +456,14 @@ export const ViraTag = defineViraElement()({
                 return;
             }
             else if (inputs.isClickable?.selected != undefined) {
-                dispatch(new events.toggle(!inputs.isClickable.selected));
+                dispatch(new events.toggle({
+                    detail: !inputs.isClickable.selected,
+                }));
             }
             else if (inputs.isClickable?.cancellable) {
-                dispatch(new events.cancel());
+                dispatch(new events.cancel({
+                    detail: undefined,
+                }));
             }
         })}
             >

package/dist/elements/vira-text-area.element.d.ts

@@ -38,11 +38,11 @@ export declare const ViraTextArea: import("element-vir").DeclarativeElementDefin
      * Fires whenever a user input created a new value. Does not fire if all input letters are
      * filtered out due to input restrictions.
      */
-    valueChange: import("element-vir").DefineEvent<string>;
+    valueChange: import("element-vir").DefineElementEvent<string>;
     /**
      * Fires when inputs are blocked. Useful for showing warnings or error messages to inform
      * the user why their input did not propagate if it was blocked. This does not fire for text
      * that was blocked out of programmatic "value" property assignments.
      */
-    inputBlocked: import("element-vir").DefineEvent<string>;
+    inputBlocked: import("element-vir").DefineElementEvent<string>;
 }, "vira-text-area-disabled" | "vira-text-area-error" | "vira-text-area-prevent-resize", "vira-text-area-padding-horizontal" | "vira-text-area-padding-vertical", readonly [], readonly []>;

package/dist/elements/vira-text-area.element.js

@@ -20,7 +20,7 @@ export const ViraTextArea = defineViraElement()({
         'vira-text-area-padding-horizontal': '12px',
         'vira-text-area-padding-vertical': '8px',
     },
-    styles: ({ hostClasses, cssVars }) => {
+    styles({ hostClasses, cssVars }) {
         return css `
             :host {
                 position: relative;
@@ -151,9 +151,15 @@ export const ViraTextArea = defineViraElement()({
         };
     },
     hostClasses: {
-        'vira-text-area-disabled': ({ inputs }) => !!inputs.disabled,
-        'vira-text-area-error': ({ inputs }) => !!inputs.hasError,
-        'vira-text-area-prevent-resize': ({ inputs }) => !!inputs.preventResize || !!inputs.disabled,
+        'vira-text-area-disabled'({ inputs }) {
+            return !!inputs.disabled;
+        },
+        'vira-text-area-error'({ inputs }) {
+            return !!inputs.hasError;
+        },
+        'vira-text-area-prevent-resize'({ inputs }) {
+            return !!inputs.preventResize || !!inputs.disabled;
+        },
     },
     render({ inputs, dispatch, state, events }) {
         const { filtered: filteredValue } = filterTextInputValue({
@@ -197,10 +203,14 @@ export const ViraTextArea = defineViraElement()({
                 event,
                 elementConstructor: HTMLTextAreaElement,
                 inputBlockedCallback(blockedInput) {
-                    dispatch(new events.inputBlocked(blockedInput));
+                    dispatch(new events.inputBlocked({
+                        detail: blockedInput,
+                    }));
                 },
                 newValueCallback(newValue) {
-                    dispatch(new events.valueChange(newValue));
+                    dispatch(new events.valueChange({
+                        detail: newValue,
+                    }));
                 },
             });
         })}

package/dist/util/color-local-storage.client.d.ts

@@ -0,0 +1,4 @@
+import { LocalStorageClient } from '@electrovir/local-storage-client';
+export declare const colorLocalStorageClient: LocalStorageClient<{
+    lastFormat: import("object-shape-tester").Shape<import("@sinclair/typebox").TUnion<(import("@sinclair/typebox").TLiteral<"rgb"> | import("@sinclair/typebox").TLiteral<"hex"> | import("@sinclair/typebox").TLiteral<"hsl"> | import("@sinclair/typebox").TLiteral<"hwb"> | import("@sinclair/typebox").TLiteral<"lab"> | import("@sinclair/typebox").TLiteral<"lch"> | import("@sinclair/typebox").TLiteral<"oklab"> | import("@sinclair/typebox").TLiteral<"oklch">)[]>>;
+}>;

package/dist/util/color-local-storage.client.js

@@ -0,0 +1,6 @@
+import { ColorFormatName } from '@electrovir/color/dist/data/color-class/color-formats.js';
+import { LocalStorageClient } from '@electrovir/local-storage-client';
+import { enumShape } from 'object-shape-tester';
+export const colorLocalStorageClient = new LocalStorageClient({
+    lastFormat: enumShape(ColorFormatName),
+});

package/dist/util/define-vira-element.js

@@ -11,7 +11,7 @@ export const ViraTagNamePrefix = 'vira-';
  * @category Internal
  */
 export const defineViraElement = wrapDefineElement({
-    assertInputs: (inputs) => {
+    assertInputs(inputs) {
         if (!inputs.tagName.startsWith(ViraTagNamePrefix)) {
             throw new Error(`Tag name should start with '${ViraTagNamePrefix}' but got '${inputs.tagName}'`);
         }

package/dist/util/vira-json-schema.js

@@ -72,7 +72,7 @@ export function getJsonType(value) {
  * @category Internal
  */
 export function normalizeSchema(schema) {
-    if (schema === undefined || schema === false) {
+    if (schema == undefined || schema === false) {
         return undefined;
     }
     else if (schema === true) {
@@ -276,7 +276,7 @@ export function getPropertySchema(parentSchema, key, context) {
         return undefined;
     }
     const propertySchema = branch.properties?.[key];
-    if (propertySchema !== undefined) {
+    if (propertySchema != undefined) {
         return propertySchema;
     }
     const patternProperties = branch.patternProperties;
@@ -330,7 +330,7 @@ export function getNewItemSchema(parentSchema, currentLength, context) {
  * @category Internal
  */
 export function getAdditionalPropertiesSchema(parentSchema, context) {
-    if (parentSchema === undefined) {
+    if (parentSchema == undefined) {
         return {
             allowed: true,
             schema: undefined,
@@ -344,7 +344,7 @@ export function getAdditionalPropertiesSchema(parentSchema, context) {
         };
     }
     const additional = branch.additionalProperties;
-    if (additional === undefined || additional === false) {
+    if (additional == undefined || additional === false) {
         return {
             allowed: false,
             schema: undefined,
@@ -477,7 +477,7 @@ function isJsonValueMatchingType(value, type) {
  * @category Internal
  */
 export function validateAgainstSchema(value, schema) {
-    if (schema === undefined) {
+    if (schema == undefined) {
         return [];
     }
     const context = createResolveContext(schema);
@@ -566,7 +566,7 @@ function validateBranch({ value, branch, path, context, errors, }) {
                 propKey,
             ];
             const propSchema = branch.properties?.[propKey];
-            if (propSchema !== undefined) {
+            if (propSchema != undefined) {
                 validateRecursive({
                     value: propValue,
                     schema: propSchema,
@@ -587,7 +587,7 @@ function validateBranch({ value, branch, path, context, errors, }) {
                     errors,
                 });
             }
-            else if (additional === undefined && definedKeys.size > 0) {
+            else if (additional == undefined && definedKeys.size > 0) {
                 continue;
             }
         }
@@ -601,7 +601,7 @@ function validateBranch({ value, branch, path, context, errors, }) {
             ];
             if (check.isArray(items)) {
                 const tupleSchema = items[index] ?? branch.additionalItems;
-                if (tupleSchema !== undefined) {
+                if (tupleSchema != undefined) {
                     validateRecursive({
                         value: item,
                         schema: tupleSchema,
@@ -611,7 +611,7 @@ function validateBranch({ value, branch, path, context, errors, }) {
                     });
                 }
             }
-            else if (items !== undefined) {
+            else if (items != undefined) {
                 validateRecursive({
                     value: item,
                     schema: items,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "31.31.7",
+    "version": "32.0.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,13 +38,13 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^32.2.4",
-        "@augment-vir/common": "^32.2.4",
-        "@augment-vir/web": "^32.2.4",
-        "@electrovir/color": "^1.7.12",
+        "@augment-vir/assert": "^32.3.0",
+        "@augment-vir/common": "^32.3.0",
+        "@augment-vir/web": "^32.3.0",
+        "@electrovir/color": "^2.0.0",
         "@electrovir/local-storage-client": "^0.1.1",
         "date-vir": "^9.1.1",
-        "device-navigation": "^4.9.1",
+        "device-navigation": "^5.0.0",
         "json-schema-to-ts": "^3.1.1",
         "lit-css-vars": "^3.6.3",
         "object-shape-tester": "^6.15.0",
@@ -54,7 +54,7 @@
         "typed-event-target": "^4.3.3"
     },
     "devDependencies": {
-        "@augment-vir/test": "^32.2.4",
+        "@augment-vir/test": "^32.3.0",
         "@web/dev-server-esbuild": "^2.0.0",
         "@web/test-runner": "^1.0.0",
         "@web/test-runner-commands": "^1.0.1",
@@ -62,18 +62,18 @@
         "@web/test-runner-visual-regression": "^1.0.1",
         "esbuild": "^0.28.2",
         "istanbul-smart-text-reporter": "^1.1.5",
-        "lucide-static": "^1.37.0",
+        "lucide-static": "^1.42.0",
         "markdown-code-example-inserter": "^3.0.6",
-        "theme-vir": "^28.25.2",
+        "theme-vir": "^29.0.0",
         "typedoc": "^0.28.20",
         "typescript": "^6.0.3",
         "vite": "^8.2.2",
         "vite-tsconfig-paths": "^6.1.1"
     },
     "peerDependencies": {
-        "element-vir": "^26",
+        "element-vir": "^27.0.0",
         "lucide-static": ">=0.460",
-        "theme-vir": ">=28"
+        "theme-vir": "^29.0.0"
     },
     "engines": {
         "node": ">=22"

package/dist/icons/icon-color.test-helper.d.ts

@@ -1,6 +0,0 @@
-export declare enum ColorType {
-    Color = "color",
-    Fill = "fill",
-    Stroke = "stroke"
-}
-export declare function extractIconColor(element: Element, colorType: ColorType): string;

package/dist/icons/icon-color.test-helper.js

@@ -1,9 +0,0 @@
-export var ColorType;
-(function (ColorType) {
-    ColorType["Color"] = "color";
-    ColorType["Fill"] = "fill";
-    ColorType["Stroke"] = "stroke";
-})(ColorType || (ColorType = {}));
-export function extractIconColor(element, colorType) {
-    return window.getComputedStyle(element).getPropertyValue(colorType);
-}