vira 23.0.0 → 23.1.0

package/dist/elements/dropdown/dropdown-helpers.js

@@ -48,7 +48,6 @@ export function assertUniqueIdProps(options) {
 export function createNewSelection(
 /** The id of the option that should be newly selected. */
 id, currentSelection, isMultiSelect) {
-    // eslint-disable-next-line sonarjs/no-selector-parameter
     if (isMultiSelect) {
         return currentSelection.includes(id)
             ? currentSelection.filter((entry) => entry !== id)

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

@@ -44,9 +44,9 @@ export const ViraInput = defineViraElement()({
         'vira-input-action-button-color': '#aaaaaa',
         'vira-input-clear-button-hover-color': '#ff0000',
         'vira-input-clear-button-active-color': '#b30000',
-        // eslint-disable-next-line sonarjs/no-hardcoded-credentials
+        // eslint-disable-next-line sonarjs/no-hardcoded-passwords
         'vira-input-show-password-button-hover-color': '#0a89ff',
-        // eslint-disable-next-line sonarjs/no-hardcoded-credentials
+        // eslint-disable-next-line sonarjs/no-hardcoded-passwords
         'vira-input-show-password-button-active-color': '#0261ba',
         'vira-input-padding-horizontal': '10px',
         'vira-input-padding-vertical': '6px',

package/dist/icons/icon-svgs/chat-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A chat bubble icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/chat24icon
+ */
+export declare const Chat24Icon: import("../icon-svg.js").ViraIconSvg;

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

@@ -0,0 +1,23 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * A chat bubble icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/chat24icon
+ */
+export const Chat24Icon = defineIcon({
+    name: 'Chat24Icon',
+    svgTemplate: html `
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+            <path
+                d="M5 15.4c-1.6-1.2-2.6-2.7-2.6-4.4 0-3.5 4.3-6.3 9.6-6.3s9.6 2.8 9.6 6.3-4.3 6.4-9.6 6.4L9 17l-5 3.8 1-5.5Z"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
+            />
+        </svg>
+    `,
+});

package/dist/icons/icon-svgs/commit-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * An icon that represents a single commit in git.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/commit24icon
+ */
+export declare const Commit24Icon: import("../icon-svg.js").ViraIconSvg;

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

@@ -0,0 +1,37 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * An icon that represents a single commit in git.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/commit24icon
+ */
+export const Commit24Icon = defineIcon({
+    name: 'Commit24Icon',
+    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-miterlimit:1.5"
+        >
+            <circle
+                cx="12"
+                cy="12"
+                r="4"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
+            />
+            <path
+                d="M12 2v6m0 8v6"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                fill="none"
+            />
+        </svg>
+    `,
+});

package/dist/icons/icon-svgs/document-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * An icon that represents a single document file on a computer file system.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/document24icon
+ */
+export declare const Document24Icon: import("../icon-svg.js").ViraIconSvg;

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

@@ -0,0 +1,29 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * An icon that represents a single document file on a computer file system.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/document24icon
+ */
+export const Document24Icon = defineIcon({
+    name: 'Document24Icon',
+    svgTemplate: html `
+        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24" height="24">
+            <path
+                d="m19 9-6-6H5v18h14V9Z"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
+            />
+            <path
+                d="M13 3v6h6"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                fill="none"
+            />
+        </svg>
+    `,
+});

package/dist/icons/icon-svgs/pencil-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A pencil icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/pencil24icon
+ */
+export declare const Pencil24Icon: import("../icon-svg.js").ViraIconSvg;

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

@@ -0,0 +1,29 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * A pencil icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/pencil24icon
+ */
+export const Pencil24Icon = defineIcon({
+    name: 'Pencil24Icon',
+    svgTemplate: html `
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
+            <path
+                d="M20.041 4.966c.303-.418.097-1.085-.459-1.489l-1.771-1.285c-.557-.404-1.255-.393-1.558.025L5.12 17.561l-.167 4.215 3.955-1.467S19.965 5.071 20.041 4.966"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
+            />
+            <path
+                d="m5.384 17.197 3.788 2.749m5.97-16.198 3.788 2.749"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                fill="none"
+            />
+        </svg>
+    `,
+});

package/dist/icons/icon-svgs/shield-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A shield icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/shield24icon
+ */
+export declare const Shield24Icon: import("../icon-svg.js").ViraIconSvg;

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

@@ -0,0 +1,23 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * A shield icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/shield24icon
+ */
+export const Shield24Icon = defineIcon({
+    name: 'Shield24Icon',
+    svgTemplate: html `
+        <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="24" height="24">
+            <path
+                d="M12 21s-8-3.5-8-10V6s4.8-.1 8-3c3.2 2.9 8 3 8 3v5c0 6.5-8 10-8 10Z"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
+            />
+        </svg>
+    `,
+});

package/dist/icons/icon-svgs/star-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A star icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/star24icon
+ */
+export declare const Star24Icon: import("../icon-svg.js").ViraIconSvg;

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

@@ -0,0 +1,23 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * A star icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/element-vir/vira/book/icons/star24icon
+ */
+export const Star24Icon = defineIcon({
+    name: 'Star24Icon',
+    svgTemplate: html `
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" stroke-miterlimit="2">
+            <path
+                d="m12 2 2.25 6.91h7.26l-5.88 4.27 2.25 6.91L12 15.82l-5.88 4.27 2.25-6.91-5.88-4.27h7.27L12 2Z"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
+            />
+        </svg>
+    `,
+});

package/dist/icons/index.d.ts

@@ -20,9 +20,12 @@ export * from './icon-svgs/status-success-24.icon.js';
  * @category Icon
  */
 export declare const allIconsByName: {
+    readonly Chat24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Check24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly ChevronUp24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly CloseX24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Commit24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Document24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Element16Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Element24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly EyeClosed24Icon: import("./icon-svg.js").ViraIconSvg;
@@ -30,6 +33,9 @@ export declare const allIconsByName: {
     readonly Loader24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly LoaderAnimated24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Options24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Pencil24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Shield24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Star24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly StatusFailure24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly StatusInProgress24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly StatusSuccess24Icon: import("./icon-svg.js").ViraIconSvg;

package/dist/icons/index.js

@@ -1,7 +1,10 @@
 /** This file is automatically updated by update-icon-exports.ts */
+import { Chat24Icon } from './icon-svgs/chat-24.icon.js';
 import { Check24Icon } from './icon-svgs/check-24.icon.js';
 import { ChevronUp24Icon } from './icon-svgs/chevron-up-24.icon.js';
 import { CloseX24Icon } from './icon-svgs/close-x-24.icon.js';
+import { Commit24Icon } from './icon-svgs/commit-24.icon.js';
+import { Document24Icon } from './icon-svgs/document-24.icon.js';
 import { Element16Icon } from './icon-svgs/element-16.icon.js';
 import { Element24Icon } from './icon-svgs/element-24.icon.js';
 import { EyeClosed24Icon } from './icon-svgs/eye-closed-24.icon.js';
@@ -9,6 +12,9 @@ import { EyeOpen24Icon } from './icon-svgs/eye-open-24.icon.js';
 import { Loader24Icon } from './icon-svgs/loader-24.icon.js';
 import { LoaderAnimated24Icon } from './icon-svgs/loader-animated-24.icon.js';
 import { Options24Icon } from './icon-svgs/options-24.icon.js';
+import { Pencil24Icon } from './icon-svgs/pencil-24.icon.js';
+import { Shield24Icon } from './icon-svgs/shield-24.icon.js';
+import { Star24Icon } from './icon-svgs/star-24.icon.js';
 import { StatusFailure24Icon } from './icon-svgs/status-failure-24.icon.js';
 import { StatusInProgress24Icon } from './icon-svgs/status-in-progress-24.icon.js';
 import { StatusSuccess24Icon } from './icon-svgs/status-success-24.icon.js';
@@ -33,9 +39,12 @@ export * from './icon-svgs/status-success-24.icon.js';
  * @category Icon
  */
 export const allIconsByName = {
+    Chat24Icon,
     Check24Icon,
     ChevronUp24Icon,
     CloseX24Icon,
+    Commit24Icon,
+    Document24Icon,
     Element16Icon,
     Element24Icon,
     EyeClosed24Icon,
@@ -43,6 +52,9 @@ export const allIconsByName = {
     Loader24Icon,
     LoaderAnimated24Icon,
     Options24Icon,
+    Pencil24Icon,
+    Shield24Icon,
+    Star24Icon,
     StatusFailure24Icon,
     StatusInProgress24Icon,
     StatusSuccess24Icon,

package/dist/re-exports/colorjs-io.js

@@ -5,5 +5,4 @@ import ColorImport from 'colorjs.io';
  *
  * @category Internal
  */
-// eslint-disable-next-line sonarjs/no-redeclare
 export const Color = ColorImport;

package/dist/styles/color.js

@@ -1,4 +1,4 @@
-import { wrapInTry } from '@augment-vir/common';
+import { stringify } from '@augment-vir/common';
 import { Color } from '../re-exports/colorjs-io.js';
 /**
  * Asserts that the given color type is valid.
@@ -13,11 +13,7 @@ export function getAssertedValidColor(input) {
         return new Color(input);
     }
     catch {
-        const stringInput = String(input);
-        const inputForMessage = stringInput.toLowerCase().match(/\[\s*object\s+object\s*\]/)
-            ? wrapInTry(() => JSON.stringify(input), { fallbackValue: stringInput })
-            : stringInput;
-        throw new Error(`Invalid color: ${inputForMessage}`);
+        throw new Error(`Invalid color: ${stringify(input)}`);
     }
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "23.0.0",
+    "version": "23.1.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -37,36 +37,36 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^30.3.0",
-        "@augment-vir/common": "^30.3.0",
-        "@augment-vir/web": "^30.3.0",
+        "@augment-vir/assert": "^31.0.1",
+        "@augment-vir/common": "^31.0.1",
+        "@augment-vir/web": "^31.0.1",
         "colorjs.io": "^0.5.2",
-        "date-vir": "^6.0.1",
-        "device-navigation": "^3.0.1",
-        "lit-css-vars": "^3.0.10",
-        "observavir": "^2.0.3",
+        "date-vir": "^7.0.3",
+        "device-navigation": "^3.0.2",
+        "lit-css-vars": "^3.0.11",
+        "observavir": "^2.0.4",
         "page-active": "^1.0.0",
         "spa-router-vir": "^4.0.4",
-        "type-fest": "^4.26.1",
-        "typed-event-target": "^4.0.0"
+        "type-fest": "^4.30.0",
+        "typed-event-target": "^4.0.2"
     },
     "devDependencies": {
-        "@augment-vir/test": "^30.3.0",
-        "@web/dev-server-esbuild": "^1.0.2",
+        "@augment-vir/test": "^31.0.1",
+        "@web/dev-server-esbuild": "^1.0.3",
         "@web/test-runner": "^0.19.0",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.0",
         "@web/test-runner-visual-regression": "^0.10.0",
         "esbuild": "^0.24.0",
         "istanbul-smart-text-reporter": "^1.1.5",
-        "markdown-code-example-inserter": "^3.0.0",
-        "typedoc": "^0.26.10",
-        "typescript": "5.6.3",
-        "vite": "^5.4.10",
-        "vite-tsconfig-paths": "^5.0.1"
+        "markdown-code-example-inserter": "^3.0.3",
+        "typedoc": "^0.27.4",
+        "typescript": "5.7.2",
+        "vite": "^6.0.3",
+        "vite-tsconfig-paths": "^5.1.4"
     },
     "peerDependencies": {
-        "element-vir": "^23.0.0"
+        "element-vir": "^23.1.0"
     },
     "engines": {
         "node": ">=22"