vira 30.3.0 → 30.5.0

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

@@ -3,7 +3,7 @@ import { colorCss, ContrastLevelName } from '@electrovir/color';
 import { css, defineElementEvent, html, listen, unsafeCSS } from 'element-vir';
 import { themeDefaultKey } from 'theme-vir';
 import { Check16Icon } from '../icons/icon-svgs/check-16.icon.js';
-import { CloseX16Icon } from '../icons/icon-svgs/close-x-16.icon.js';
+import { X16Icon } from '../icons/icon-svgs/x-16.icon.js';
 import { viraFormCssVars } from '../styles/form-styles.js';
 import { ViraColorVariant, viraColorVariantToColorName, ViraEmphasis, ViraSize, viraSizeHeights, } from '../styles/form-variants.js';
 import { noNativeFormStyles } from '../styles/native-styles.js';
@@ -284,7 +284,7 @@ export const ViraTag = defineViraElement()({
                 ></${ViraIcon}>
                 <span class="text">${String(inputs.text)}</span>
                 <${ViraIcon.assign({
-            icon: CloseX16Icon,
+            icon: X16Icon,
         })}
                     class="cancel-x"
                 ></${ViraIcon}>

package/dist/icons/icon-svgs/dash-16.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A dash (horizontal line) icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/dash16icon
+ */
+export declare const Dash16Icon: import("../icon-svg.js").ViraIconSvg;

package/dist/icons/icon-svgs/dash-16.icon.js

@@ -0,0 +1,24 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * A dash (horizontal line) icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/dash16icon
+ */
+export const Dash16Icon = defineIcon({
+    name: 'Dash16Icon',
+    svgTemplate: html `
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+            <path
+                d="M3 8h10"
+                fill="none"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                stroke-linecap="round"
+            />
+        </svg>
+    `,
+});

package/dist/icons/icon-svgs/x-16.icon.d.ts

@@ -0,0 +1,8 @@
+/**
+ * An x icon.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/x16icon
+ */
+export declare const X16Icon: import("../icon-svg.js").ViraIconSvg;

package/dist/icons/icon-svgs/{close-x-16.icon.js → x-16.icon.js}

@@ -2,14 +2,14 @@ import { html } from 'element-vir';
 import { viraIconCssVars } from '../icon-css-vars.js';
 import { defineIcon } from '../icon-svg.js';
 /**
- * An x icon meant to be used as a "close" button (16px).
+ * An x icon.
  *
  * @category Icon
  * @category SVG
- * @see https://electrovir.github.io/vira/book/icons/closex16icon
+ * @see https://electrovir.github.io/vira/book/icons/x16icon
  */
-export const CloseX16Icon = defineIcon({
-    name: 'CloseX16Icon',
+export const X16Icon = defineIcon({
+    name: 'X16Icon',
     svgTemplate: html `
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
             <path

package/dist/icons/index.d.ts

@@ -13,10 +13,10 @@ export * from './icon-svgs/check-16.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-16.icon.js';
 export * from './icon-svgs/close-x-24.icon.js';
 export * from './icon-svgs/commit-24.icon.js';
 export * from './icon-svgs/copy-24.icon.js';
+export * from './icon-svgs/dash-16.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';
@@ -52,6 +52,7 @@ export * from './icon-svgs/status-unknown-24.icon.js';
 export * from './icon-svgs/status-warning-24.icon.js';
 export * from './icon-svgs/sun-24.icon.js';
 export * from './icon-svgs/upload-24.icon.js';
+export * from './icon-svgs/x-16.icon.js';
 export * from './icon-svgs/x-24.icon.js';
 /**
  * All icons within vira by name.
@@ -70,10 +71,10 @@ export declare const allIconsByName: {
     readonly Check24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly ChevronDown24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly ChevronUp24Icon: import("./icon-svg.js").ViraIconSvg;
-    readonly CloseX16Icon: import("./icon-svg.js").ViraIconSvg;
     readonly CloseX24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Commit24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Copy24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly Dash16Icon: 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;
@@ -109,5 +110,6 @@ export declare const allIconsByName: {
     readonly StatusWarning24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Sun24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly Upload24Icon: import("./icon-svg.js").ViraIconSvg;
+    readonly X16Icon: import("./icon-svg.js").ViraIconSvg;
     readonly X24Icon: import("./icon-svg.js").ViraIconSvg;
 };

package/dist/icons/index.js

@@ -10,10 +10,10 @@ import { Check16Icon } from './icon-svgs/check-16.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 { CloseX16Icon } from './icon-svgs/close-x-16.icon.js';
 import { CloseX24Icon } from './icon-svgs/close-x-24.icon.js';
 import { Commit24Icon } from './icon-svgs/commit-24.icon.js';
 import { Copy24Icon } from './icon-svgs/copy-24.icon.js';
+import { Dash16Icon } from './icon-svgs/dash-16.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';
@@ -49,6 +49,7 @@ import { StatusUnknown24Icon } from './icon-svgs/status-unknown-24.icon.js';
 import { StatusWarning24Icon } from './icon-svgs/status-warning-24.icon.js';
 import { Sun24Icon } from './icon-svgs/sun-24.icon.js';
 import { Upload24Icon } from './icon-svgs/upload-24.icon.js';
+import { X16Icon } from './icon-svgs/x-16.icon.js';
 import { X24Icon } from './icon-svgs/x-24.icon.js';
 export * from './colored-icon.js';
 export * from './icon-css-vars.js';
@@ -64,10 +65,10 @@ export * from './icon-svgs/check-16.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-16.icon.js';
 export * from './icon-svgs/close-x-24.icon.js';
 export * from './icon-svgs/commit-24.icon.js';
 export * from './icon-svgs/copy-24.icon.js';
+export * from './icon-svgs/dash-16.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';
@@ -103,6 +104,7 @@ export * from './icon-svgs/status-unknown-24.icon.js';
 export * from './icon-svgs/status-warning-24.icon.js';
 export * from './icon-svgs/sun-24.icon.js';
 export * from './icon-svgs/upload-24.icon.js';
+export * from './icon-svgs/x-16.icon.js';
 export * from './icon-svgs/x-24.icon.js';
 /**
  * All icons within vira by name.
@@ -121,10 +123,10 @@ export const allIconsByName = {
     Check24Icon,
     ChevronDown24Icon,
     ChevronUp24Icon,
-    CloseX16Icon,
     CloseX24Icon,
     Commit24Icon,
     Copy24Icon,
+    Dash16Icon,
     Document24Icon,
     DocumentSearch24Icon,
     DoubleChevron24Icon,
@@ -160,5 +162,6 @@ export const allIconsByName = {
     StatusWarning24Icon,
     Sun24Icon,
     Upload24Icon,
+    X16Icon,
     X24Icon,
 };

package/dist/util/pop-up-helpers.d.ts

@@ -34,6 +34,12 @@ export type ViraMenuItemEntry = {
     selected: boolean;
     /** Called when any item is activated. */
     onClick: MenuItemClickCallback;
+    /**
+     * If set to `true`, this menu item won't show up at all.
+     *
+     * @default false
+     */
+    hidden: boolean;
 }> & typeof ViraMenuItem.InputsType;
 /**
  * A callback for menu items getting activated, to be used with {@link renderMenuItemEntries}.

package/dist/util/pop-up-helpers.js

@@ -1,4 +1,4 @@
-import { joinWithFinalConjunction, } from '@augment-vir/common';
+import { filterMap, joinWithFinalConjunction, } from '@augment-vir/common';
 import { html, listen } from 'element-vir';
 import { ViraMenuItem } from '../elements/pop-up/vira-menu-item.element.js';
 /**
@@ -42,20 +42,20 @@ export function triggerPopUpState({ open, callback, popUpManager, host, options,
  * @category PopUp
  */
 export function renderMenuItemEntries(items) {
-    return items.map((item, index) => {
+    return filterMap(items, (item, index) => {
         return html `
-            <${ViraMenuItem.assign({
+                <${ViraMenuItem.assign({
             ...item,
         })}
-                ${listen('click', async (event) => {
+                    ${listen('click', async (event) => {
             await item.onClick?.({
                 event,
                 index,
             });
         })}
-            >
-                ${item.content}
-            </${ViraMenuItem}>
-        `;
-    });
+                >
+                    ${item.content}
+                </${ViraMenuItem}>
+            `;
+    }, (template, menuItem) => !menuItem.hidden);
 }

package/package.json

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

package/dist/icons/icon-svgs/close-x-16.icon.d.ts

@@ -1,8 +0,0 @@
-/**
- * An x icon meant to be used as a "close" button (16px).
- *
- * @category Icon
- * @category SVG
- * @see https://electrovir.github.io/vira/book/icons/closex16icon
- */
-export declare const CloseX16Icon: import("../icon-svg.js").ViraIconSvg;