vira 31.29.0 → 31.31.0

package/dist/elements/pop-up/vira-menu-item.element.d.ts

@@ -35,4 +35,4 @@ export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefin
      * gated by `keepOpenAfterInteraction`.
      */
     activate: import("element-vir").DefineEvent<undefined>;
-}, "vira-menu-item-selected" | "vira-menu-item-disabled" | "vira-menu-item-enabled" | "vira-menu-item-default-icon" | "vira-menu-item-default-styles", "vira-menu-item-icon-gap", readonly [], readonly []>;
+}, "vira-menu-item-selected" | "vira-menu-item-disabled" | "vira-menu-item-enabled" | "vira-menu-item-default-icon" | "vira-menu-item-default-styles", "vira-menu-item-icon-gap" | "vira-menu-item-padding" | "vira-menu-item-border-radius", readonly [], readonly []>;

package/dist/elements/pop-up/vira-menu-item.element.js

@@ -37,7 +37,9 @@ export const ViraMenuItem = defineViraElement()({
     },
     cssVars: {
         /** Horizontal gap between a menu item's icon and its label. */
-        'vira-menu-item-icon-gap': '3px',
+        'vira-menu-item-icon-gap': '8px',
+        'vira-menu-item-padding': '6px 8px',
+        'vira-menu-item-border-radius': '4px',
     },
     styles: ({ hostClasses, cssVars }) => css `
         :host {
@@ -48,8 +50,8 @@ export const ViraMenuItem = defineViraElement()({
             max-width: 100%;
             gap: ${cssVars['vira-menu-item-icon-gap'].value};
             overflow: hidden;
-            padding: 8px 3px;
-            padding-right: 16px;
+            padding: ${cssVars['vira-menu-item-padding'].value};
+            border-radius: ${cssVars['vira-menu-item-border-radius'].value};
             align-items: center;
             text-align: left;
         }

package/dist/elements/pop-up/vira-menu.element.d.ts

@@ -33,4 +33,4 @@ export declare const ViraMenu: import("element-vir").DeclarativeElementDefinitio
     direction: ViraMenuPopUpDirection;
     /** @default PopUpMenuCornerStyle.Directional */
     cornerStyle: ViraMenuCornerStyle;
-}>, {}, {}, "vira-menu-open-upwards" | "vira-menu-rounded" | "vira-menu-square", "vira-menu-", readonly [], readonly []>;
+}>, {}, {}, "vira-menu-open-upwards" | "vira-menu-rounded" | "vira-menu-square", "vira-menu-padding", readonly [], readonly []>;

package/dist/elements/pop-up/vira-menu.element.js

@@ -40,10 +40,14 @@ export const ViraMenu = defineViraElement()({
         'vira-menu-rounded': ({ inputs }) => inputs.cornerStyle === ViraMenuCornerStyle.AllRounded,
         'vira-menu-square': ({ inputs }) => inputs.cornerStyle === ViraMenuCornerStyle.AllSquare,
     },
-    styles: ({ hostClasses }) => css `
+    cssVars: {
+        'vira-menu-padding': '4px',
+    },
+    styles: ({ hostClasses, cssVars }) => css `
         :host {
             display: flex;
             flex-direction: column;
+            padding: ${cssVars['vira-menu-padding'].value};
             max-width: 100%;
             max-height: 100%;
             overflow-y: auto;

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

@@ -36,9 +36,16 @@ export declare const ViraButton: import("element-vir").DeclarativeElementDefinit
      */
     color: ViraColorVariant | ViraThemeColorName;
     /**
-     * Set to `true`
+     * Set to `true` to render `icon` after `text` instead of before it.
      *
      * @default false
      */
+    showIconOnRight: boolean;
+    /**
+     * Set to `true` to append a downwards chevron after the button's text.
+     *
+     * @deprecated Set `icon` to `ChevronDown16Icon` and `showIconOnRight` to `true` instead.
+     * @default false
+     */
     showMenuCaret: boolean;
 }>, {}, {}, "vira-button-with-menu-caret" | "vira-button-size-large" | "vira-button-size-medium" | "vira-button-size-small" | "vira-button-emphasis-standard" | "vira-button-emphasis-subtle" | "vira-button-color-red" | "vira-button-color-yellow" | "vira-button-color-green" | "vira-button-color-blue" | "vira-button-color-brand" | "vira-button-color-purple" | "vira-button-color-plain" | "vira-button-color-neutral" | "vira-button-color-teal" | "vira-button-color-pink" | "vira-button-color-grey" | "vira-button-disabled" | "vira-button-icon-only", "vira-button-text-color" | "vira-button-background-color" | "vira-button-border-color" | "vira-button-hover-text-color" | "vira-button-hover-background-color" | "vira-button-hover-border-color" | "vira-button-active-text-color" | "vira-button-active-background-color" | "vira-button-active-border-color" | "vira-button-disabled-text-color" | "vira-button-disabled-background-color" | "vira-button-disabled-border-color" | "vira-button-border-width" | "vira-button-border-radius", readonly [], readonly []>;

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

@@ -121,6 +121,7 @@ const neutralButtonColors = {
 export const ViraButton = defineViraElement()({
     tagName: 'vira-button',
     hostClasses: {
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         'vira-button-with-menu-caret': ({ inputs }) => !!inputs.showMenuCaret,
         'vira-button-size-large': ({ inputs }) => inputs.buttonSize === ViraSize.Large,
         'vira-button-size-medium': ({ inputs }) => !inputs.buttonSize || inputs.buttonSize === ViraSize.Medium,
@@ -316,7 +317,8 @@ export const ViraButton = defineViraElement()({
                 width: 0;
             }
 
-            button ${ViraIcon} + .text-template {
+            button ${ViraIcon} + .text-template,
+            button .text-template + ${ViraIcon} {
                 margin-left: 8px;
             }
 
@@ -375,6 +377,7 @@ export const ViraButton = defineViraElement()({
             : html `
                   <span class="empty-text">&nbsp;</span>
               `;
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
         const caretIconTemplate = inputs.showMenuCaret
             ? html `
                   <${ViraIcon.assign({
@@ -384,10 +387,18 @@ export const ViraButton = defineViraElement()({
                   ></${ViraIcon}>
               `
             : nothing;
+        /* Both templates are interpolated with no whitespace between them so `+` selectors match. */
+        const templates = inputs.showIconOnRight
+            ? [
+                textTemplate,
+                iconTemplate,
+            ]
+            : [
+                iconTemplate,
+                textTemplate,
+            ];
         return html `
-            <button ?disabled=${inputs.isDisabled}>
-                ${iconTemplate}${textTemplate}${caretIconTemplate}
-            </button>
+            <button ?disabled=${inputs.isDisabled}>${templates}${caretIconTemplate}</button>
         `;
     },
 });

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

@@ -25,7 +25,7 @@ export const ViraCard = defineViraElement()({
     },
     cssVars: {
         'vira-card-border': css `1px solid ${viraFormCssVars['vira-form-border-color'].value}`,
-        'vira-card-padding': viraFormCssVars['vira-form-wrapper-radius'].value,
+        'vira-card-padding': '24px',
     },
     styles: ({ hostClasses, cssVars }) => css `
         :host {

package/dist/elements/vira-collapsible-wrapper.element.d.ts

@@ -11,6 +11,20 @@ export declare const ViraCollapsibleWrapper: import("element-vir").DeclarativeEl
     expandOnPrint?: boolean;
 }, {
     contentHeight: number;
+    contentWidth: number;
+    /**
+     * Collapsed content that is merely `height: 0` is still rendered, so the browser emits
+     * a line break for it when serializing a selection to plain text. Copying a region that
+     * spans collapsed wrappers then pastes with runs of blank lines. Taking the content out
+     * of layout entirely is what drops those breaks; `visibility: hidden` and `user-select:
+     * none` both leave them behind.
+     *
+     * This starts `false` even when collapsed because the wrapper takes both its width and
+     * its animation target height from the content, so the content has to be laid out once
+     * before it can be hidden.
+     */
+    isContentHidden: boolean;
+    collapsingElement: HTMLDivElement | undefined;
 }, {
     expandChange: import("element-vir").DefineEvent<boolean>;
 }, "vira-collapsible-wrapper-expand-on-print", `vira-${string}-`, readonly ["vira-collapsible-wrapper-header"], readonly []>;

package/dist/elements/vira-collapsible-wrapper.element.js

@@ -1,4 +1,5 @@
-import { classMap, css, defineElementEvent, html, listen, onResize } from 'element-vir';
+import { assertWrap } from '@augment-vir/assert';
+import { classMap, css, defineElementEvent, html, listen, onDomCreated, onResize } from 'element-vir';
 import { noNativeFormStyles, noUserSelect, viraAnimationDurations } from '../styles/index.js';
 import { defineViraElement } from '../util/define-vira-element.js';
 /**
@@ -13,6 +14,20 @@ export const ViraCollapsibleWrapper = defineViraElement()({
     state() {
         return {
             contentHeight: 0,
+            contentWidth: 0,
+            /**
+             * Collapsed content that is merely `height: 0` is still rendered, so the browser emits
+             * a line break for it when serializing a selection to plain text. Copying a region that
+             * spans collapsed wrappers then pastes with runs of blank lines. Taking the content out
+             * of layout entirely is what drops those breaks; `visibility: hidden` and `user-select:
+             * none` both leave them behind.
+             *
+             * This starts `false` even when collapsed because the wrapper takes both its width and
+             * its animation target height from the content, so the content has to be laid out once
+             * before it can be hidden.
+             */
+            isContentHidden: false,
+            collapsingElement: undefined,
         };
     },
     hostClasses: {
@@ -48,12 +63,20 @@ export const ViraCollapsibleWrapper = defineViraElement()({
             }
         }
 
+        .content-wrapper.hidden-content {
+            display: none;
+        }
+
         @media print {
             :host(.${hostClasses['vira-collapsible-wrapper-expand-on-print'].name})
                 .collapsing-element {
                 height: auto !important;
                 overflow: visible !important;
                 transition: none !important;
+
+                & .content-wrapper.hidden-content {
+                    display: flex !important;
+                }
             }
         }
     `,
@@ -61,12 +84,71 @@ export const ViraCollapsibleWrapper = defineViraElement()({
         expandChange: defineElementEvent(),
     },
     render({ state, slotNames, updateState, dispatch, events, inputs }) {
+        if (inputs.expanded && state.isContentHidden) {
+            updateState({
+                isContentHidden: false,
+            });
+        }
+        else if (!inputs.expanded &&
+            !state.isContentHidden &&
+            state.contentHeight &&
+            !state.collapsingElement?.clientHeight) {
+            /**
+             * Already at zero height, so no collapse animation will run and `transitionend` will
+             * never fire. Covers a wrapper that mounts collapsed and one that gets collapsed before
+             * its expanded height has been painted.
+             *
+             * Hiding here rather than straight from the resize callback: changing the size of the
+             * observed element from inside its own callback trips the browser's resize observer
+             * loop detection.
+             */
+            updateState({
+                isContentHidden: true,
+            });
+        }
+        /**
+         * Hidden content contributes no width, so the wrapper would shrink to its header without
+         * the width measured while the content was last laid out. `max-width` keeps that from
+         * blocking a later shrink to a narrower container.
+         */
+        const hiddenContentStyles = state.isContentHidden
+            ? css `
+                  width: ${state.contentWidth}px;
+                  max-width: 100%;
+              `
+            : css ``;
+        /**
+         * Hidden content is rendered without the resize observer rather than with a callback that
+         * ignores it. An attached observer still fires when the content is hidden, and the browser
+         * reports that as a resize observer loop.
+         */
+        const contentWrapperTemplate = state.isContentHidden
+            ? html `
+                  <div class="content-wrapper hidden-content">
+                      <slot></slot>
+                  </div>
+              `
+            : html `
+                  <div
+                      ${onResize(({ contentRect }) => {
+                updateState({
+                    contentHeight: contentRect.height,
+                    contentWidth: contentRect.width,
+                });
+            })}
+                      class="content-wrapper"
+                  >
+                      <slot></slot>
+                  </div>
+              `;
         const collapsingStyles = inputs.expanded
             ? css `
                   height: ${state.contentHeight}px;
+                  ${hiddenContentStyles}
               `
             : css `
                   height: 0;
+                  ${hiddenContentStyles}
               `;
         return html `
             <button
@@ -84,17 +166,22 @@ export const ViraCollapsibleWrapper = defineViraElement()({
         })}"
                 style=${collapsingStyles}
                 disabled="disabled"
-            >
-                <div
-                    ${onResize(({ contentRect }) => {
+                ${onDomCreated((element) => {
             updateState({
-                contentHeight: contentRect.height,
+                collapsingElement: assertWrap.instanceOf(element, HTMLDivElement),
             });
         })}
-                    class="content-wrapper"
-                >
-                    <slot></slot>
-                </div>
+                ${listen('transitionend', (event) => {
+            if (event.propertyName === 'height' &&
+                event.target === event.currentTarget &&
+                !inputs.expanded) {
+                updateState({
+                    isContentHidden: true,
+                });
+            }
+        })}
+            >
+                ${contentWrapperTemplate}
             </div>
         `;
     },

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

@@ -37,8 +37,8 @@ export var ViraInputType;
 export const ViraInput = defineViraElement()({
     tagName: 'vira-input',
     cssVars: {
-        'vira-input-padding-horizontal': '10px',
-        'vira-input-padding-vertical': '5px',
+        'vira-input-padding-horizontal': '12px',
+        'vira-input-padding-vertical': '4px',
     },
     styles: ({ hostClasses, cssVars }) => {
         return css `

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

@@ -37,4 +37,4 @@ export declare const ViraModal: import("element-vir").DeclarativeElementDefiniti
     cleanupListeners: undefined | (() => void);
 }, {
     modalClose: import("element-vir").DefineEvent<void>;
-}, "vira-modal-phone-size" | "vira-modal-no-content-padding", "vira-modal-backdrop-filter", readonly ["vira-modal-modal-title"], readonly []>;
+}, "vira-modal-phone-size" | "vira-modal-no-content-padding", "vira-modal-backdrop-filter" | "vira-modal-border-radius", readonly ["vira-modal-modal-title"], readonly []>;

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

@@ -45,12 +45,13 @@ export const ViraModal = defineViraElement()({
     slotNames: ['vira-modal-modal-title'],
     cssVars: {
         'vira-modal-backdrop-filter': 'blur(3px)',
+        'vira-modal-border-radius': '8px',
     },
     styles: ({ hostClasses, cssVars }) => css `
         :host {
             display: contents;
             min-width: 280px;
-            border-radius: 16px;
+            border-radius: ${cssVars['vira-modal-border-radius'].value};
         }
 
         h1 {

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

@@ -15,4 +15,4 @@ export declare const ViraProgress: import("element-vir").DeclarativeElementDefin
     min: number;
     /** @default 100 */
     max: number;
-}>, {}, {}, "vira-progress-", "vira-progress-border-radius", readonly [], readonly []>;
+}>, {}, {}, "vira-progress-", "vira-progress-border-radius" | "vira-progress-height", readonly [], readonly []>;

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

@@ -20,13 +20,13 @@ export const ViraProgress = defineViraElement()({
          * dimension which creates a perfect pill border radius.
          */
         'vira-progress-border-radius': '99999999px',
+        'vira-progress-height': '8px',
     },
     styles: ({ cssVars }) => css `
         :host {
             /* Default width that can easily be overridden because it's applied on the host. */
             width: 100px;
-            /* Default height that can easily be overridden because it's applied on the host. */
-            height: 10px;
+            height: ${cssVars['vira-progress-height'].value};
             display: inline-flex;
             align-items: center;
             border-radius: ${cssVars['vira-progress-border-radius'].value};

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

@@ -48,8 +48,8 @@ export const ViraSelect = defineViraElement()({
         valueChange: defineElementEvent(),
     },
     cssVars: {
-        'vira-select-padding-horizontal': '10px',
-        'vira-select-padding-vertical': '6px',
+        'vira-select-padding-horizontal': '12px',
+        'vira-select-padding-vertical': '8px',
         'vira-select-icon-padding': '44px',
     },
     hostClasses: {

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

@@ -17,8 +17,8 @@ import { filterTextInputValue, textInputListener, } from '../util/shared-text-in
 export const ViraTextArea = defineViraElement()({
     tagName: 'vira-text-area',
     cssVars: {
-        'vira-text-area-padding-horizontal': '10px',
-        'vira-text-area-padding-vertical': '6px',
+        'vira-text-area-padding-horizontal': '12px',
+        'vira-text-area-padding-vertical': '8px',
     },
     styles: ({ hostClasses, cssVars }) => css `
         :host {

package/dist/styles/font.d.ts

@@ -8,5 +8,5 @@ export declare const viraFontCssVars: import("lit-css-vars").CssVarDefinitions<{
     readonly 'vira-monospace': "monospace";
     readonly 'vira-font-weight-normal': "normal";
     readonly 'vira-font-weight-medium': "500";
-    readonly 'vira-font-weight-bold': "bold";
+    readonly 'vira-font-weight-bold': "600";
 }>;

package/dist/styles/font.js

@@ -9,5 +9,5 @@ export const viraFontCssVars = defineCssVars({
     'vira-monospace': 'monospace',
     'vira-font-weight-normal': 'normal',
     'vira-font-weight-medium': '500',
-    'vira-font-weight-bold': 'bold',
+    'vira-font-weight-bold': '600',
 });

package/dist/styles/form-styles.d.ts

@@ -26,10 +26,10 @@ export declare const viraFormCssVars: import("lit-css-vars").CssVarDefinitions<{
     readonly 'vira-form-success-color': import("element-vir").CSSResult;
     readonly 'vira-form-label-font-weight': import("element-vir").CSSResult;
     readonly 'vira-form-small-text-size': "14px";
-    readonly 'vira-form-medium-text-size': "16px";
+    readonly 'vira-form-medium-text-size': "14px";
     readonly 'vira-form-large-text-size': "22px";
-    readonly 'vira-form-radius': "8px";
-    readonly 'vira-form-wrapper-radius': "16px";
+    readonly 'vira-form-radius': "6px";
+    readonly 'vira-form-wrapper-radius': "12px";
     readonly 'vira-form-focus-outline-color': import("element-vir").CSSResult;
     readonly 'vira-form-focus-outline-border-radius': import("element-vir").CSSResult;
     readonly 'vira-form-plain-color': import("element-vir").CSSResult;

package/dist/styles/form-styles.js

@@ -4,7 +4,7 @@ import { themeDefaultKey } from 'theme-vir/dist/color-theme/color-theme.js';
 import { viraFontCssVars } from './font.js';
 import { viraColorPalette } from './vira-color-palette.js';
 import { viraTheme } from './vira-color-theme.js';
-const defaultViraFormRadius = '8px';
+const defaultViraFormRadius = '6px';
 /**
  * CSS vars for vira form elements.
  *
@@ -33,10 +33,10 @@ export const viraFormCssVars = defineCssVars({
     'vira-form-success-color': viraTheme.colors['vira-green-behind-bg-non-body'].background.value,
     'vira-form-label-font-weight': viraFontCssVars['vira-font-weight-bold'].value,
     'vira-form-small-text-size': '14px',
-    'vira-form-medium-text-size': '16px',
+    'vira-form-medium-text-size': '14px',
     'vira-form-large-text-size': '22px',
     'vira-form-radius': defaultViraFormRadius,
-    'vira-form-wrapper-radius': '16px',
+    'vira-form-wrapper-radius': '12px',
     'vira-form-focus-outline-color': viraTheme.colors['vira-brand-foreground-header'].foreground.value,
     'vira-form-focus-outline-border-radius': css `calc(var(--vira-form-radius, ${unsafeCSS(defaultViraFormRadius)}) + 2px)`,
     'vira-form-plain-color': viraColorPalette['vira-grey-100'].value,

package/package.json

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