vira 31.28.3 → 31.30.0

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-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-form.element.js

@@ -270,6 +270,8 @@ export const ViraForm = defineViraElement()({
                         min: field.min,
                         max: field.max,
                         timezone: field.timezone,
+                        showDateOnly: field.showDateOnly,
+                        showTimeOnly: field.showTimeOnly,
                         isDisabled,
                         hasError: field.hasError,
                         isReadonly: inputs.isReadonly,

package/dist/util/vira-form-fields.d.ts

@@ -116,6 +116,10 @@ export type ViraFormField = ({
     max: FullDate;
     /** Timezone used to interpret the selected date. Defaults to the user's timezone. */
     timezone: string;
+    /** Only show the date part of the selected date when in readonly mode. */
+    showDateOnly: boolean;
+    /** Only show the time part of the selected date when in readonly mode. */
+    showTimeOnly: boolean;
 }> & CommonViraFormFields);
 /**
  * A collection of form fields for `ViraForm`.

package/package.json

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