vira 28.9.1 → 28.11.0

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

@@ -18,6 +18,7 @@ export type ViraCheckboxInputs = PartialWithUndefined<{
     disabled: boolean;
     label: string;
     hasError: boolean;
+    horizontal: boolean;
 }> & {
     value: boolean;
 };
@@ -30,4 +31,4 @@ export type ViraCheckboxInputs = PartialWithUndefined<{
  */
 export declare const ViraCheckbox: import("element-vir").DeclarativeElementDefinition<"vira-checkbox", Readonly<ViraCheckboxInputs>, {}, {
     valueChange: import("element-vir").DefineEvent<boolean>;
-}, "vira-checkbox-", "vira-checkbox-", readonly [], readonly []>;
+}, "vira-checkbox-horizontal", "vira-checkbox-", readonly [], readonly []>;

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

@@ -15,7 +15,10 @@ import { ViraIcon } from './vira-icon.element.js';
  */
 export const ViraCheckbox = defineViraElement()({
     tagName: 'vira-checkbox',
-    styles: css `
+    hostClasses: {
+        'vira-checkbox-horizontal': ({ inputs }) => !!inputs.horizontal,
+    },
+    styles: ({ hostClasses }) => css `
         :host {
             display: inline-flex;
         }
@@ -46,6 +49,11 @@ export const ViraCheckbox = defineViraElement()({
                 cursor: pointer;
                 font-weight: ${viraFormCssVars['vira-form-label-font-weight'].value};
             }
+
+            &:hover .custom-checkbox {
+                background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
+        .value};
+            }
         }
 
         ${ViraIcon} {
@@ -75,11 +83,6 @@ export const ViraCheckbox = defineViraElement()({
                 border-color: ${viraFormCssVars['vira-form-error-foreground-color'].value};
             }
 
-            &:hover {
-                background-color: ${viraFormCssVars['vira-form-selection-hover-background-color']
-        .value};
-            }
-
             &:active {
                 background-color: ${viraFormCssVars['vira-form-selection-active-background-color']
         .value};
@@ -89,6 +92,12 @@ export const ViraCheckbox = defineViraElement()({
                 ${viraDisabledStyles};
             }
         }
+
+        ${hostClasses['vira-checkbox-horizontal'].selector} label {
+            flex-direction: row-reverse;
+            align-items: center;
+            gap: 8px;
+        }
     `,
     events: {
         valueChange: defineElementEvent(),

package/dist/icons/icon-svgs/chevron-down-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A chevron that points upwards. See ChevronUp24Icon or one pointing upwards.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/chevrondown24icon
+ */
+export declare const ChevronDown24Icon: import("../icon-svg.js").ViraIconSvg;

package/dist/icons/icon-svgs/chevron-down-24.icon.js

@@ -0,0 +1,30 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * A chevron that points upwards. See ChevronUp24Icon or one pointing upwards.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/chevrondown24icon
+ */
+export const ChevronDown24Icon = defineIcon({
+    name: 'ChevronDown24Icon',
+    svgTemplate: html `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+            fill="none"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+        >
+            <path
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                d="M6 8 L12 15 18 8"
+            />
+        </svg>
+    `,
+});

package/dist/icons/icon-svgs/chevron-up-24.icon.d.ts

@@ -1,5 +1,5 @@
 /**
- * A chevron that points upwards. For an icon that points downwards, rotate this icon.
+ * A chevron that points upwards. See ChevronDown24Icon for one pointing downloads.
  *
  * @category Icon
  * @category SVG

package/dist/icons/icon-svgs/chevron-up-24.icon.js

@@ -2,7 +2,7 @@ import { html } from 'element-vir';
 import { viraIconCssVars } from '../icon-css-vars.js';
 import { defineIcon } from '../icon-svg.js';
 /**
- * A chevron that points upwards. For an icon that points downwards, rotate this icon.
+ * A chevron that points upwards. See ChevronDown24Icon for one pointing downloads.
  *
  * @category Icon
  * @category SVG

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

@@ -0,0 +1,8 @@
+/**
+ * An icon that represents searching on a document or searching for a document.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/documentsearch24icon
+ */
+export declare const DocumentSearch24Icon: import("../icon-svg.js").ViraIconSvg;

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

@@ -0,0 +1,48 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * An icon that represents searching on a document or searching for a document.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/documentsearch24icon
+ */
+export const DocumentSearch24Icon = defineIcon({
+    name: 'DocumentSearch24Icon',
+    svgTemplate: html `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xml:space="preserve"
+            style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-miterlimit:100"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+            fill-rule="nonzero"
+            stroke-linecap="butt"
+            stroke-linejoin="round"
+            stroke-miterlimit="2"
+        >
+            <path
+                d="m19 9-6-6H5v18h14z"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
+            />
+            <circle
+                cx="11.7"
+                cy="12.5"
+                r="3.5"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
+            />
+            <path
+                d="m14.2 15 2.5 2.5"
+                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/double-chevron-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A icon with two opposing chevrons.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/doublechevron24icon
+ */
+export declare const DoubleChevron24Icon: import("../icon-svg.js").ViraIconSvg;

package/dist/icons/icon-svgs/double-chevron-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';
+/**
+ * A icon with two opposing chevrons.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/doublechevron24icon
+ */
+export const DoubleChevron24Icon = defineIcon({
+    name: 'DoubleChevron24Icon',
+    svgTemplate: html `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xml:space="preserve"
+            style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:miter;stroke-miterlimit:2"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+        >
+            <path
+                d="M16.5 8.5 12 4 7.5 8.5v7L12 20l4.5-4.5z"
+                fill-rule="nonzero"
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
+                stroke-width="none"
+                stroke="none"
+            />
+            <path
+                d="m7 15 5 5 5-5M7 9l5-5 5 5"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                fill="none"
+            />
+        </svg>
+    `,
+});

package/dist/icons/icon-svgs/eye-closed-24.icon.js

@@ -18,6 +18,7 @@ export const EyeClosed24Icon = defineIcon({
             width="24"
             height="24"
             viewBox="0 0 24 24"
+            stroke-linejoin="miter"
         >
             <path
                 stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}

package/dist/icons/icon-svgs/eye-open-24.icon.js

@@ -18,6 +18,7 @@ export const EyeOpen24Icon = defineIcon({
             width="24"
             height="24"
             viewBox="0 0 24 24"
+            stroke-linejoin="miter"
         >
             <path
                 stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}

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

@@ -0,0 +1,8 @@
+/**
+ * An icon symbol that represents filtering.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/filter24icon
+ */
+export declare const Filter24Icon: import("../icon-svg.js").ViraIconSvg;

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

@@ -0,0 +1,38 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * An icon symbol that represents filtering.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/filter24icon
+ */
+export const Filter24Icon = defineIcon({
+    name: 'Filter24Icon',
+    svgTemplate: html `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xml:space="preserve"
+            style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+        >
+            <path
+                d="M4 6h16l-6 12h-4z"
+                fill-rule="nonzero"
+                stroke="none"
+                stroke-width="0"
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
+            />
+            <path
+                d="M3 6h18M6 12h12M9 18h6"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                fill="none"
+                fill-rule="nonzero"
+            />
+        </svg>
+    `,
+});

package/dist/icons/icon-svgs/sort-ascending-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A icon indicating ascending sorting.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/sortascending24icon
+ */
+export declare const SortAscending24Icon: import("../icon-svg.js").ViraIconSvg;

package/dist/icons/icon-svgs/sort-ascending-24.icon.js

@@ -0,0 +1,51 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * A icon indicating ascending sorting.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/sortascending24icon
+ */
+export const SortAscending24Icon = defineIcon({
+    name: 'SortAscending24Icon',
+    svgTemplate: html `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xml:space="preserve"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+        >
+            <path
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
+                fill-rule="nonzero"
+                d="M17.5 4C18.9 4 20 5.1 20 6.5V20H7V4z"
+            />
+            <path
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                d="m3 8 4-4 4 4M7 4v16"
+            />
+            <path
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                stroke-linecap="square"
+                stroke-linejoin="round"
+                d="M20 8h-5m0 2V6.5C15 5.1 16.1 4 17.5 4S20 5.1 20 6.5V10"
+            />
+            <path
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                stroke-linecap="square"
+                d="M15 14h5l-5 6h5"
+            />
+        </svg>
+    `,
+});

package/dist/icons/icon-svgs/sort-descending-24.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A icon indicating descending sorting.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/sortdescending24icon
+ */
+export declare const SortDescending24Icon: import("../icon-svg.js").ViraIconSvg;

package/dist/icons/icon-svgs/sort-descending-24.icon.js

@@ -0,0 +1,51 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * A icon indicating descending sorting.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/sortdescending24icon
+ */
+export const SortDescending24Icon = defineIcon({
+    name: 'SortDescending24Icon',
+    svgTemplate: html `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xml:space="preserve"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+        >
+            <path
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
+                fill-rule="nonzero"
+                d="M17.5 4C18.9 4 20 5.1 20 6.5V20H7V4z"
+            />
+            <path
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                d="m3 16 4 4 4-4m-4 4V4"
+            />
+            <path
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                stroke-linecap="square"
+                stroke-linejoin="round"
+                d="M20 8h-5m0 2V6.5C15 5.1 16.1 4 17.5 4S20 5.1 20 6.5V10"
+            />
+            <path
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                stroke-linecap="square"
+                d="M15 14h5l-5 6h5"
+            />
+        </svg>
+    `,
+});

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

@@ -11,19 +11,13 @@ import { defineIcon } from '../icon-svg.js';
 export const X24Icon = defineIcon({
     name: 'X24Icon',
     svgTemplate: html `
-        <svg
-            xmlns="http://www.w3.org/2000/svg"
-            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}
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            aria-hidden="true"
-        >
-            <path d="M18 6L6 18M6 6l12 12" />
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <path
+                d="M18 6L6 18M6 6l12 12"
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+            />
         </svg>
     `,
 });

package/dist/icons/index.d.ts

@@ -4,15 +4,19 @@ export * from './icon-svg.js';
 export * from './icon-svgs/bell-24.icon.js';
 export * from './icon-svgs/chat-24.icon.js';
 export * from './icon-svgs/check-24.icon.js';
+export * from './icon-svgs/chevron-down-24.icon.js';
 export * from './icon-svgs/chevron-up-24.icon.js';
 export * from './icon-svgs/close-x-24.icon.js';
 export * from './icon-svgs/commit-24.icon.js';
 export * from './icon-svgs/document-24.icon.js';
+export * from './icon-svgs/document-search-24.icon.js';
+export * from './icon-svgs/double-chevron-24.icon.js';
 export * from './icon-svgs/element-16.icon.js';
 export * from './icon-svgs/element-24.icon.js';
 export * from './icon-svgs/external-link-24.icon.js';
 export * from './icon-svgs/eye-closed-24.icon.js';
 export * from './icon-svgs/eye-open-24.icon.js';
+export * from './icon-svgs/filter-24.icon.js';
 export * from './icon-svgs/link-24.icon.js';
 export * from './icon-svgs/loader-24.icon.js';
 export * from './icon-svgs/loader-animated-24.icon.js';
@@ -20,6 +24,8 @@ export * from './icon-svgs/lock-24.icon.js';
 export * from './icon-svgs/options-24.icon.js';
 export * from './icon-svgs/pencil-24.icon.js';
 export * from './icon-svgs/shield-24.icon.js';
+export * from './icon-svgs/sort-ascending-24.icon.js';
+export * from './icon-svgs/sort-descending-24.icon.js';
 export * from './icon-svgs/speaker-loud-24.icon.js';
 export * from './icon-svgs/speaker-medium-24.icon.js';
 export * from './icon-svgs/speaker-muted-24.icon.js';
@@ -41,15 +47,19 @@ export declare const allIconsByName: {
     readonly Bell24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Chat24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Check24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly ChevronDown24Icon: 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 DocumentSearch24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly DoubleChevron24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Element16Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Element24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly ExternalLink24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly EyeClosed24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly EyeOpen24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Filter24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Link24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Loader24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly LoaderAnimated24Icon: import("./icon-svg.js").ViraIconSvg;
@@ -57,6 +67,8 @@ export declare const allIconsByName: {
     readonly Options24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Pencil24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Shield24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly SortAscending24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly SortDescending24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly SpeakerLoud24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly SpeakerMedium24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly SpeakerMuted24Icon: import("./icon-svg.js").ViraIconSvg;

package/dist/icons/index.js

@@ -2,15 +2,19 @@
 import { Bell24Icon } from './icon-svgs/bell-24.icon.js';
 import { Chat24Icon } from './icon-svgs/chat-24.icon.js';
 import { Check24Icon } from './icon-svgs/check-24.icon.js';
+import { ChevronDown24Icon } from './icon-svgs/chevron-down-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 { DocumentSearch24Icon } from './icon-svgs/document-search-24.icon.js';
+import { DoubleChevron24Icon } from './icon-svgs/double-chevron-24.icon.js';
 import { Element16Icon } from './icon-svgs/element-16.icon.js';
 import { Element24Icon } from './icon-svgs/element-24.icon.js';
 import { ExternalLink24Icon } from './icon-svgs/external-link-24.icon.js';
 import { EyeClosed24Icon } from './icon-svgs/eye-closed-24.icon.js';
 import { EyeOpen24Icon } from './icon-svgs/eye-open-24.icon.js';
+import { Filter24Icon } from './icon-svgs/filter-24.icon.js';
 import { Link24Icon } from './icon-svgs/link-24.icon.js';
 import { Loader24Icon } from './icon-svgs/loader-24.icon.js';
 import { LoaderAnimated24Icon } from './icon-svgs/loader-animated-24.icon.js';
@@ -18,6 +22,8 @@ import { Lock24Icon } from './icon-svgs/lock-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 { SortAscending24Icon } from './icon-svgs/sort-ascending-24.icon.js';
+import { SortDescending24Icon } from './icon-svgs/sort-descending-24.icon.js';
 import { SpeakerLoud24Icon } from './icon-svgs/speaker-loud-24.icon.js';
 import { SpeakerMedium24Icon } from './icon-svgs/speaker-medium-24.icon.js';
 import { SpeakerMuted24Icon } from './icon-svgs/speaker-muted-24.icon.js';
@@ -35,15 +41,19 @@ export * from './icon-svg.js';
 export * from './icon-svgs/bell-24.icon.js';
 export * from './icon-svgs/chat-24.icon.js';
 export * from './icon-svgs/check-24.icon.js';
+export * from './icon-svgs/chevron-down-24.icon.js';
 export * from './icon-svgs/chevron-up-24.icon.js';
 export * from './icon-svgs/close-x-24.icon.js';
 export * from './icon-svgs/commit-24.icon.js';
 export * from './icon-svgs/document-24.icon.js';
+export * from './icon-svgs/document-search-24.icon.js';
+export * from './icon-svgs/double-chevron-24.icon.js';
 export * from './icon-svgs/element-16.icon.js';
 export * from './icon-svgs/element-24.icon.js';
 export * from './icon-svgs/external-link-24.icon.js';
 export * from './icon-svgs/eye-closed-24.icon.js';
 export * from './icon-svgs/eye-open-24.icon.js';
+export * from './icon-svgs/filter-24.icon.js';
 export * from './icon-svgs/link-24.icon.js';
 export * from './icon-svgs/loader-24.icon.js';
 export * from './icon-svgs/loader-animated-24.icon.js';
@@ -51,6 +61,8 @@ export * from './icon-svgs/lock-24.icon.js';
 export * from './icon-svgs/options-24.icon.js';
 export * from './icon-svgs/pencil-24.icon.js';
 export * from './icon-svgs/shield-24.icon.js';
+export * from './icon-svgs/sort-ascending-24.icon.js';
+export * from './icon-svgs/sort-descending-24.icon.js';
 export * from './icon-svgs/speaker-loud-24.icon.js';
 export * from './icon-svgs/speaker-medium-24.icon.js';
 export * from './icon-svgs/speaker-muted-24.icon.js';
@@ -72,15 +84,19 @@ export const allIconsByName = {
     Bell24Icon,
     Chat24Icon,
     Check24Icon,
+    ChevronDown24Icon,
     ChevronUp24Icon,
     CloseX24Icon,
     Commit24Icon,
     Document24Icon,
+    DocumentSearch24Icon,
+    DoubleChevron24Icon,
     Element16Icon,
     Element24Icon,
     ExternalLink24Icon,
     EyeClosed24Icon,
     EyeOpen24Icon,
+    Filter24Icon,
     Link24Icon,
     Loader24Icon,
     LoaderAnimated24Icon,
@@ -88,6 +104,8 @@ export const allIconsByName = {
     Options24Icon,
     Pencil24Icon,
     Shield24Icon,
+    SortAscending24Icon,
+    SortDescending24Icon,
     SpeakerLoud24Icon,
     SpeakerMedium24Icon,
     SpeakerMuted24Icon,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "vira",
-    "version": "28.9.1",
+    "version": "28.11.0",
     "description": "A simple and highly versatile design system using element-vir.",
     "keywords": [
         "design",
@@ -38,30 +38,30 @@
         "test:docs": "virmator docs check"
     },
     "dependencies": {
-        "@augment-vir/assert": "^31.47.0",
-        "@augment-vir/common": "^31.47.0",
-        "@augment-vir/web": "^31.47.0",
+        "@augment-vir/assert": "^31.54.3",
+        "@augment-vir/common": "^31.54.3",
+        "@augment-vir/web": "^31.54.3",
         "colorjs.io": "^0.5.2",
         "date-vir": "^8.0.0",
         "device-navigation": "^4.5.5",
         "lit-css-vars": "^3.0.11",
-        "observavir": "^2.1.2",
+        "observavir": "^2.2.0",
         "page-active": "^1.0.3",
         "spa-router-vir": "^6.3.1",
-        "type-fest": "^5.1.0",
+        "type-fest": "^5.2.0",
         "typed-event-target": "^4.1.0"
     },
     "devDependencies": {
-        "@augment-vir/test": "^31.47.0",
+        "@augment-vir/test": "^31.54.3",
         "@web/dev-server-esbuild": "^1.0.4",
         "@web/test-runner": "^0.20.2",
         "@web/test-runner-commands": "^0.9.0",
         "@web/test-runner-playwright": "^0.11.1",
         "@web/test-runner-visual-regression": "^0.10.0",
-        "esbuild": "^0.25.11",
+        "esbuild": "^0.27.0",
         "istanbul-smart-text-reporter": "^1.1.5",
         "markdown-code-example-inserter": "^3.0.3",
-        "typedoc": "^0.28.14",
+        "typedoc": "^0.28.15",
         "typescript": "5.9.3",
         "vite": "^7.1.12",
         "vite-tsconfig-paths": "^5.1.4"