vira 29.7.2 → 29.8.0

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

@@ -6,13 +6,13 @@ import { type ViraFormField, type ViraFormFields } from './vira-form-fields.js';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-form
  */
-export declare const ViraForm: import("element-vir").DeclarativeElementDefinition<"vira-form", Readonly<{
+export declare const ViraForm: import("element-vir").DeclarativeElementDefinition<"vira-form", {
     fields: Readonly<ViraFormFields>;
 } & PartialWithUndefined<{
     showClearButtons: boolean;
     /**
-     * When `true`, all fields in this form are disabled. Note that this will not (and can
-     * not) disable any child elements you've inserted via <slot>.
+     * When `true`, all fields in this form are disabled. Note that this will not (and can not)
+     * disable any child elements you've inserted via <slot>.
      *
      * @default false
      */
@@ -23,7 +23,7 @@ export declare const ViraForm: import("element-vir").DeclarativeElementDefinitio
      * @default false
      */
     hideRequiredMarkers: boolean;
-}>>, {
+}>, {
     lastIsValid: boolean;
 }, {
     valueChange: import("element-vir").DefineEvent<{

package/dist/elements/index.d.ts

@@ -12,6 +12,7 @@ export * from './vira-bold-text.element.js';
 export * from './vira-button.element.js';
 export * from './vira-card.element.js';
 export * from './vira-checkbox.element.js';
+export * from './vira-collapsible-card.element.js';
 export * from './vira-collapsible-wrapper.element.js';
 export * from './vira-dropdown.element.js';
 export * from './vira-error.element.js';

package/dist/elements/index.js

@@ -12,6 +12,7 @@ export * from './vira-bold-text.element.js';
 export * from './vira-button.element.js';
 export * from './vira-card.element.js';
 export * from './vira-checkbox.element.js';
+export * from './vira-collapsible-card.element.js';
 export * from './vira-collapsible-wrapper.element.js';
 export * from './vira-dropdown.element.js';
 export * from './vira-error.element.js';

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

@@ -6,14 +6,14 @@ import { type MenuItem } from './pop-up-menu-item.js';
  * @category PopUp
  * @category Elements
  */
-export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefinition<"vira-menu-item", Readonly<{
+export declare const ViraMenuItem: import("element-vir").DeclarativeElementDefinition<"vira-menu-item", {
     selected: boolean;
 } & PartialWithUndefined<{
     /**
-     * The text to show in the menu item. If this is not provided, it is expected that you
-     * will instead utilize this element's `<slot>`.
+     * The text to show in the menu item. If this is not provided, it is expected that you will
+     * instead utilize this element's `<slot>`.
      */
     label: MenuItem["label"];
     /** If `true`, does not render the selected check icon. */
     hideCheckIcon: boolean;
-}>>, {}, {}, "vira-menu-item-selected", "vira-menu-item-", readonly [], readonly []>;
+}>, {}, {}, "vira-menu-item-selected", "vira-menu-item-", readonly [], readonly []>;

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

@@ -17,10 +17,10 @@ export declare const viraMenuTestIds: {
  * @category PopUp
  * @category Elements
  */
-export declare const ViraMenu: import("element-vir").DeclarativeElementDefinition<"vira-menu", Readonly<{
+export declare const ViraMenu: import("element-vir").DeclarativeElementDefinition<"vira-menu", {
     /**
-     * The parent nav controller for this menu. If none is provided, an internal nav
-     * controller is created (which means it can't be hooked into by external elements).
+     * The parent nav controller for this menu. If none is provided, an internal nav controller
+     * is created (which means it can't be hooked into by external elements).
      *
      * It is recommended to not leave this `undefined`.
      */
@@ -33,6 +33,6 @@ export declare const ViraMenu: import("element-vir").DeclarativeElementDefinitio
     isMultiSelect: boolean;
     /** Hide menu item check mark icons. */
     hideCheckIcons: boolean;
-}>>, {
+}>, {
     internalNavController: NavController;
 }, {}, "vira-menu-multiselect", "vira-menu-", readonly [], readonly []>;

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

@@ -0,0 +1,36 @@
+import { type PartialWithUndefined } from '@augment-vir/common';
+/**
+ * A combination ViraCard and ViraCollapsibleWrapper with a collapse caret.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-checkbox
+ */
+export declare const ViraCollapsibleCard: import("element-vir").DeclarativeElementDefinition<"vira-collapsible-card", PartialWithUndefined<{
+    /**
+     * When set to `true`, the card styles are diminished so you can still use this element in
+     * more flexible ways.
+     *
+     * @default false
+     */
+    rawCollapsible: boolean;
+    startExpanded: boolean;
+    /**
+     * If set to true, the card will always be expanded, expansion cannot be toggled, and the
+     * expand toggle icon is hidden.
+     *
+     * @default false
+     */
+    blockExpansion: boolean;
+    /** When true, forces the content to expand when printing regardless of collapsed state. */
+    expandOnPrint: boolean;
+    /**
+     * When set to `true`, the header is hidden.
+     *
+     * @default false
+     */
+    hideHeader: boolean;
+}>, {
+    isExpanded: boolean;
+}, {
+    expandToggle: import("element-vir").DefineEvent<boolean>;
+}, "vira-collapsible-card-expanded" | "vira-collapsible-card-expansion-blocked" | "vira-collapsible-card-card-styles", "vira-collapsible-card-", readonly ["header"], readonly ["openCaret"]>;

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

@@ -0,0 +1,162 @@
+import { css, defineElementEvent, html, listen, nothing, testId } from 'element-vir';
+import { ChevronUp24Icon } from '../icons/index.js';
+import { viraFormCssVars } from '../styles/form-styles.js';
+import { defineViraElement } from './define-vira-element.js';
+import { ViraCollapsibleWrapper } from './vira-collapsible-wrapper.element.js';
+import { ViraIcon } from './vira-icon.element.js';
+/**
+ * A combination ViraCard and ViraCollapsibleWrapper with a collapse caret.
+ *
+ * @category Elements
+ * @see https://electrovir.github.io/vira/book/elements/vira-checkbox
+ */
+export const ViraCollapsibleCard = defineViraElement()({
+    tagName: 'vira-collapsible-card',
+    testIds: ['openCaret'],
+    events: {
+        expandToggle: defineElementEvent(),
+    },
+    state({ inputs }) {
+        return {
+            isExpanded: !!inputs.startExpanded,
+        };
+    },
+    hostClasses: {
+        'vira-collapsible-card-expanded': ({ state }) => state.isExpanded,
+        'vira-collapsible-card-expansion-blocked': ({ inputs }) => !!inputs.blockExpansion,
+        'vira-collapsible-card-card-styles': ({ inputs }) => !inputs.rawCollapsible,
+    },
+    styles: ({ hostClasses }) => css `
+        :host {
+            display: inline-flex;
+        }
+
+        ${hostClasses['vira-collapsible-card-expanded'].selector} .open-caret {
+            transform: rotate(180deg);
+        }
+
+        ${ViraCollapsibleWrapper} {
+            flex-grow: 1;
+            max-width: 100%;
+        }
+
+        ${hostClasses['vira-collapsible-card-card-styles'].selector} {
+            & ${ViraCollapsibleWrapper} {
+                border: 1px solid ${viraFormCssVars['vira-form-border-color'].value};
+                border-radius: ${viraFormCssVars['vira-form-wrapper-radius'].value};
+            }
+
+            & .card-header {
+                padding: 8px 16px;
+            }
+
+            & .card-content {
+                padding: 8px 16px 8px 16px;
+            }
+        }
+
+        ${hostClasses['vira-collapsible-card-expansion-blocked'].selector} {
+            & .header-wrapper {
+                cursor: default;
+            }
+        }
+
+        .card-header {
+            font-weight: bold;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 8px;
+
+            & .header-filler {
+                flex-grow: 1;
+            }
+        }
+
+        .card-content {
+            display: flex;
+            flex-direction: column;
+            align-items: stretch;
+            gap: 32px;
+            overflow-x: auto;
+            overflow-y: hidden;
+        }
+
+        @media print {
+            ${ViraCollapsibleWrapper} {
+                border: none !important;
+            }
+
+            .card-header {
+                padding: 8px 0 !important;
+            }
+
+            .card-content {
+                overflow: visible !important;
+                padding: 8px 0 16px 0 !important;
+            }
+
+            .open-caret {
+                display: none;
+            }
+        }
+    `,
+    slotNames: [
+        'header',
+    ],
+    render({ inputs, slotNames, state, updateState, testIds, dispatch, events }) {
+        if (inputs.blockExpansion) {
+            updateState({
+                isExpanded: true,
+            });
+        }
+        const wrapperContentTemplate = state.isExpanded || inputs.expandOnPrint
+            ? html `
+                      <div class="card-content">
+                          <slot></slot>
+                      </div>
+                  `
+            : nothing;
+        const wrapperHeaderTemplate = inputs.hideHeader
+            ? nothing
+            : html `
+                  <div class="card-header">
+                      <slot name=${slotNames.header}><div class="header-filler"></div></slot>
+
+                      ${inputs.blockExpansion
+                ? nothing
+                : html `
+                                <${ViraIcon.assign({
+                    icon: ChevronUp24Icon,
+                    fitContainer: true,
+                })}
+                                    ${testId(testIds.openCaret)}
+                                    class="open-caret"
+                                ></${ViraIcon}>
+                            `}
+                  </div>
+              `;
+        return html `
+            <${ViraCollapsibleWrapper.assign({
+            expanded: state.isExpanded,
+            expandOnPrint: inputs.expandOnPrint ?? false,
+        })}
+                ${listen(ViraCollapsibleWrapper.events.expandChange, (event) => {
+            event.stopImmediatePropagation();
+            if (inputs.blockExpansion) {
+                return;
+            }
+            updateState({
+                isExpanded: event.detail,
+            });
+            dispatch(new events.expandToggle(event.detail));
+        })}
+            >
+                <div class="header-wrapper" slot=${ViraCollapsibleWrapper.slotNames.header}>
+                    ${wrapperHeaderTemplate}
+                </div>
+                ${wrapperContentTemplate}
+            </${ViraCollapsibleWrapper}>
+        `;
+    },
+});

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

@@ -20,7 +20,7 @@ export declare enum ViraInputType {
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-input
  */
-export declare const ViraInput: import("element-vir").DeclarativeElementDefinition<"vira-input", Readonly<PartialWithUndefined<{
+export declare const ViraInput: import("element-vir").DeclarativeElementDefinition<"vira-input", PartialWithUndefined<{
     icon: Pick<ViraIconSvg, "svgTemplate">;
     /** A suffix that, if provided, is shown following the input field. */
     suffix: string;
@@ -40,7 +40,7 @@ export declare const ViraInput: import("element-vir").DeclarativeElementDefiniti
     disableBrowserHelps: boolean;
     fitText: boolean;
     attributePassthrough: import("element-vir").AttributeValues;
-}>>, {
+}>, {
     forcedInputWidth: number;
     showPassword: boolean;
     /**

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

@@ -5,7 +5,7 @@ import { type PartialWithUndefined } from '@augment-vir/common';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-modal
  */
-export declare const ViraModal: import("element-vir").DeclarativeElementDefinition<"vira-modal", Readonly<{
+export declare const ViraModal: import("element-vir").DeclarativeElementDefinition<"vira-modal", {
     open: boolean;
 } & PartialWithUndefined<{
     /** If this isn't set, make sure to use the modal title slot to fill it in. */
@@ -28,7 +28,7 @@ export declare const ViraModal: import("element-vir").DeclarativeElementDefiniti
     blockLightDismissal: boolean;
     modalSubtitle: string;
     isMobileSize: boolean;
-}>>, {
+}>, {
     dialogElement: HTMLDialogElement | undefined;
     contentElement: HTMLDivElement | undefined;
     previousOpenValue: undefined | boolean;

package/dist/elements/vira-overflow-switch.element.d.ts

@@ -4,7 +4,7 @@
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-overflow-switch
  */
-export declare const ViraOverflowSwitch: import("element-vir").DeclarativeElementDefinition<"vira-overflow-switch", Readonly<((Required<Pick<{
+export declare const ViraOverflowSwitch: import("element-vir").DeclarativeElementDefinition<"vira-overflow-switch", ((Required<Pick<{
     automaticallySwitch: boolean;
     useSmall: boolean;
 }, "automaticallySwitch">> & Partial<Record<"useSmall", never>>) | (Required<Pick<{
@@ -13,7 +13,7 @@ export declare const ViraOverflowSwitch: import("element-vir").DeclarativeElemen
 }, "useSmall">> & Partial<Record<"automaticallySwitch", never>>)) & Omit<{
     automaticallySwitch: boolean;
     useSmall: boolean;
-}, "automaticallySwitch" | "useSmall">>, {
+}, "automaticallySwitch" | "useSmall">, {
     isOverflowing: boolean;
     resizeObserver: undefined | ResizeObserver;
     /** Called on cleanup to clear all listeners. */

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

@@ -8,11 +8,11 @@ import { type PartialWithUndefined } from '@augment-vir/common';
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-progress
  */
-export declare const ViraProgress: import("element-vir").DeclarativeElementDefinition<"vira-progress", Readonly<{
+export declare const ViraProgress: import("element-vir").DeclarativeElementDefinition<"vira-progress", {
     value: number;
 } & PartialWithUndefined<{
     /** @default 0 */
     min: number;
     /** @default 100 */
     max: number;
-}>>, {}, {}, "vira-progress-", "vira-progress-border-radius", readonly [], readonly []>;
+}>, {}, {}, "vira-progress-", "vira-progress-border-radius", readonly [], readonly []>;

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

@@ -22,7 +22,7 @@ export type ViraSelectOption = {
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-select
  */
-export declare const ViraSelect: import("element-vir").DeclarativeElementDefinition<"vira-select", Readonly<{
+export declare const ViraSelect: import("element-vir").DeclarativeElementDefinition<"vira-select", {
     options: ReadonlyArray<Readonly<ViraSelectOption>>;
     /** The currently selected option value. */
     value: undefined | string;
@@ -39,7 +39,7 @@ export declare const ViraSelect: import("element-vir").DeclarativeElementDefinit
         option: AttributeValues;
     }>>;
     hasError: boolean;
-}>>, {
+}>, {
     /**
      * Used to couple the label and select together. This is not applied if no label is
      * provided.

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

@@ -8,7 +8,7 @@ import { ViraColorVariant, ViraEmphasis, ViraSize } from '../styles/form-variant
  * @category Elements
  * @see https://electrovir.github.io/vira/book/elements/vira-tag
  */
-export declare const ViraTag: import("element-vir").DeclarativeElementDefinition<"vira-tag", Readonly<{
+export declare const ViraTag: import("element-vir").DeclarativeElementDefinition<"vira-tag", {
     text: Primitive;
 } & PartialWithUndefined<{
     isClickable: RequireExactlyOne<{
@@ -29,7 +29,7 @@ export declare const ViraTag: import("element-vir").DeclarativeElementDefinition
     /** @default ViraColor.Accent */
     color: ViraColorVariant;
     disabled: boolean;
-}>>, {}, {
+}>, {}, {
     toggle: import("element-vir").DefineEvent<boolean>;
     cancel: import("element-vir").DefineEvent<void>;
 }, "vira-tag-selectable" | "vira-tag-checked" | "vira-tag-not-checked" | "vira-tag-cancellable" | "vira-tag-not-clickable" | "vira-tag-disabled" | "vira-tag-size-large" | "vira-tag-size-medium" | "vira-tag-size-small" | "vira-tag-emphasis-standard" | "vira-tag-emphasis-subtle" | "vira-tag-color-accent" | "vira-tag-color-plain" | "vira-tag-color-neutral" | "vira-tag-color-danger" | "vira-tag-color-warning" | "vira-tag-color-positive", "vira-tag-text-color" | "vira-tag-background-color" | "vira-tag-border-radius" | "vira-tag-gap" | "vira-tag-horizontal-padding" | "vira-tag-border-width", readonly [], readonly []>;

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

@@ -127,6 +127,7 @@ export const ViraTag = defineViraElement()({
 
         button {
             ${noNativeFormStyles}
+            flex-shrink: 0;
             cursor: pointer;
             display: flex;
             align-items: center;

package/package.json

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