vira 28.16.0 → 28.18.0

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

@@ -1,4 +1,5 @@
-import { type PopUpManager, type ShowPopUpResult } from '../../util/pop-up-manager.js';
+import { type PartialWithUndefined } from '@augment-vir/common';
+import { type PopUpManager, type PopUpManagerOptions, type ShowPopUpResult } from '../../util/pop-up-manager.js';
 import { type MenuItem } from './pop-up-menu-item.js';
 /**
  * Verifies that all items have unique ids.
@@ -22,9 +23,11 @@ newItem: Readonly<MenuItem>, currentSelection?: ReadonlyArray<PropertyKey>, isMu
  *
  * @category Internal
  */
-export declare function triggerPopUpState({ open, callback, popUpManager, host, }: {
+export declare function triggerPopUpState({ open, callback, popUpManager, host, options, }: Readonly<{
     open: boolean;
     popUpManager: PopUpManager;
     host: HTMLElement;
+} & PartialWithUndefined<{
     callback?: ((showPopUpResult: ShowPopUpResult | undefined) => void) | undefined;
-}): void;
+    options?: Partial<PopUpManagerOptions> | undefined;
+}>>): void;

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

@@ -46,9 +46,9 @@ newItem, currentSelection = [], isMultiSelect = false) {
  *
  * @category Internal
  */
-export function triggerPopUpState({ open, callback, popUpManager, host, }) {
+export function triggerPopUpState({ open, callback, popUpManager, host, options, }) {
     if (open) {
-        const showPopUpResult = popUpManager.showPopUp(host);
+        const showPopUpResult = popUpManager.showPopUp(host, options);
         callback?.(showPopUpResult);
     }
     else {

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

@@ -44,6 +44,14 @@ export declare const ViraMenuTrigger: import("element-vir").DeclarativeElementDe
      * @default HorizontalAnchor.Left
      */
     horizontalAnchor: HorizontalAnchor;
+    /**
+     * When `true`, the pop-up will not have its maximum height/width constrained to fit within
+     * the overflow container. The positioning logic (up/down, left/right) will still be
+     * applied.
+     *
+     * @default false
+     */
+    ignoreMaxDimensions: boolean;
 }>, {
     navController: undefined | NavController;
     popUpManager: undefined | PopUpManager;

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

@@ -56,6 +56,7 @@ export const ViraMenuTrigger = defineViraElement()({
             z_debug_forceOpenState: inputs.z_debug_forceOpenState,
             popUpOffset: inputs.popUpOffset,
             horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Left,
+            ignoreMaxDimensions: inputs.ignoreMaxDimensions,
         })}
                 class=${classMap({
             open: !!state.showPopUpResult,

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

@@ -27,12 +27,15 @@ export declare enum HorizontalAnchor {
      * pop-up to grow on the left side of the trigger.
      */
     Right = "right",
+    /** Restrict the pop-up on both sides. */
+    Both = "both",
     /**
-     * Restrict the pop-up on both sides.
+     * Automatically choose left or right based on available space, defaulting to anchoring on the
+     * left side.
      *
      * This is the default anchor for {@link ViraPopUpTrigger}.
      */
-    Both = "both"
+    Auto = "auto"
 }
 /**
  * An element with slots for a pop-up trigger and pop-up contents.
@@ -48,21 +51,31 @@ export declare const ViraPopUpTrigger: import("element-vir").DeclarativeElementD
     /** Set to `true` to keep the pop-up open if it is interacted with. */
     keepOpenAfterInteraction: boolean;
     /** All values in px. */
-    popUpOffset?: PopUpOffset;
+    popUpOffset: PopUpOffset;
     /**
      * - `HorizontalAnchor.Left`: pop-up is anchored to the left side of the trigger and the
      *   pop-up can grow to the right.
      * - `HorizontalAnchor.Right`: pop-up is anchored to the right side of the trigger and the
      *   pop-up can grow to the left.
      * - `HorizontalAnchor.Both`: pop-up is anchored on both sides of the trigger and cannot grow
-     *   beyond it. (This is the default experience.)
+     *   beyond it.
+     * - `HorizontalAnchor.Auto`: automatically choose left or right anchor based on available
+     *   space, defaulting to left anchor. (This is the default experience.)
      *
      * Note that when `HorizontalAnchor.Both` is _not_ used, this anchor will cancel out any
      * `popUpOffset` for the direction _opposite_ of the chosen anchor.
      *
-     * @default HorizontalAnchor.Both
+     * @default HorizontalAnchor.Auto
      */
-    horizontalAnchor?: HorizontalAnchor;
+    horizontalAnchor: HorizontalAnchor;
+    /**
+     * When `true`, the pop-up will not have its maximum height/width constrained to fit within
+     * the overflow container. The positioning logic (up/down, left/right) will still be
+     * applied.
+     *
+     * @default false
+     */
+    ignoreMaxDimensions: boolean;
 }>, {
     /** `undefined` means the pop up is not currently showing. */
     showPopUpResult: ShowPopUpResult | undefined;

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

@@ -23,12 +23,15 @@ export var HorizontalAnchor;
      * pop-up to grow on the left side of the trigger.
      */
     HorizontalAnchor["Right"] = "right";
+    /** Restrict the pop-up on both sides. */
+    HorizontalAnchor["Both"] = "both";
     /**
-     * Restrict the pop-up on both sides.
+     * Automatically choose left or right based on available space, defaulting to anchoring on the
+     * left side.
      *
      * This is the default anchor for {@link ViraPopUpTrigger}.
      */
-    HorizontalAnchor["Both"] = "both";
+    HorizontalAnchor["Auto"] = "auto";
 })(HorizontalAnchor || (HorizontalAnchor = {}));
 /**
  * An element with slots for a pop-up trigger and pop-up contents.
@@ -193,17 +196,35 @@ export const ViraPopUpTrigger = defineViraElement()({
                 triggerPopUp({ emitEvent: false, open: true }, undefined);
             }
         }
-        const leftCss = inputs.horizontalAnchor === HorizontalAnchor.Right && state.showPopUpResult
-            ? css `
-                      left: -${state.showPopUpResult.positions.diff.left}px;
-                  `
+        /**
+         * Resolve the effective horizontal anchor. For Auto, use the popRight calculation from
+         * showPopUpResult to determine whether to anchor left or right.
+         */
+        const effectiveHorizontalAnchor = inputs.horizontalAnchor === HorizontalAnchor.Auto ||
+            inputs.horizontalAnchor === undefined
+            ? state.showPopUpResult?.popRight
+                ? HorizontalAnchor.Left
+                : HorizontalAnchor.Right
+            : inputs.horizontalAnchor;
+        const leftCss = effectiveHorizontalAnchor === HorizontalAnchor.Right && state.showPopUpResult
+            ? inputs.ignoreMaxDimensions
+                ? css `
+                          left: unset;
+                      `
+                : css `
+                          left: -${state.showPopUpResult.positions.diff.left}px;
+                      `
             : css `
                       left: ${inputs.popUpOffset?.left || 0}px;
                   `;
-        const rightCss = state.showPopUpResult && inputs.horizontalAnchor === HorizontalAnchor.Left
-            ? css `
-                      right: -${state.showPopUpResult.positions.diff.right}px;
-                  `
+        const rightCss = state.showPopUpResult && effectiveHorizontalAnchor === HorizontalAnchor.Left
+            ? inputs.ignoreMaxDimensions
+                ? css `
+                          right: unset;
+                      `
+                : css `
+                          right: -${state.showPopUpResult.positions.diff.right}px;
+                      `
             : css `
                       right: ${inputs.popUpOffset?.right || 0}px;
                   `;
@@ -220,17 +241,29 @@ export const ViraPopUpTrigger = defineViraElement()({
         const positionerStyles = state.showPopUpResult
             ? state.showPopUpResult.popDown
                 ? /** Dropdown going down position. */
-                    css `
-                      bottom: -${state.showPopUpResult.positions.diff.bottom}px;
-                      top: calc(100% + ${inputs.popUpOffset?.vertical || 0}px);
-                      ${horizontalPositionStyle}
-                  `
+                    inputs.ignoreMaxDimensions
+                        ? css `
+                          bottom: unset;
+                          top: calc(100% + ${inputs.popUpOffset?.vertical || 0}px);
+                          ${horizontalPositionStyle}
+                      `
+                        : css `
+                          bottom: -${state.showPopUpResult.positions.diff.bottom}px;
+                          top: calc(100% + ${inputs.popUpOffset?.vertical || 0}px);
+                          ${horizontalPositionStyle}
+                      `
                 : /** Dropdown going up position. */
-                    css `
-                      top: -${state.showPopUpResult.positions.diff.top}px;
-                      bottom: calc(100% + ${inputs.popUpOffset?.vertical || 0}px);
-                      ${horizontalPositionStyle}
-                  `
+                    inputs.ignoreMaxDimensions
+                        ? css `
+                        top: unset;
+                        bottom: calc(100% + ${inputs.popUpOffset?.vertical || 0}px);
+                        ${horizontalPositionStyle}
+                    `
+                        : css `
+                        top: -${state.showPopUpResult.positions.diff.top}px;
+                        bottom: calc(100% + ${inputs.popUpOffset?.vertical || 0}px);
+                        ${horizontalPositionStyle}
+                    `
             : undefined;
         function respondToClick(event) {
             triggerPopUp({ emitEvent: true, open: !state.showPopUpResult }, event);
@@ -268,7 +301,7 @@ export const ViraPopUpTrigger = defineViraElement()({
 
                 <div
                     class="pop-up-positioner ${classMap({
-            'right-aligned': inputs.horizontalAnchor === HorizontalAnchor.Right,
+            'right-aligned': effectiveHorizontalAnchor === HorizontalAnchor.Right,
         })}"
                     style=${positionerStyles}
                 >

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

@@ -48,6 +48,14 @@ export declare const ViraDropdown: import("element-vir").DeclarativeElementDefin
      * @default HorizontalAnchor.Both
      */
     horizontalAnchor: HorizontalAnchor;
+    /**
+     * When `true`, the dropdown will not have its maximum height/width constrained to fit
+     * within the overflow container. The positioning logic (up/down, left/right) will still be
+     * applied.
+     *
+     * @default false
+     */
+    ignoreMaxDimensions: boolean;
 }>, {
     /** `undefined` means the pop up is not currently showing. */
     showPopUpResult: ShowPopUpResult | undefined;

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

@@ -142,6 +142,7 @@ export const ViraDropdown = defineViraElement()({
                 right: 24,
             },
             horizontalAnchor: inputs.horizontalAnchor || HorizontalAnchor.Both,
+            ignoreMaxDimensions: inputs.ignoreMaxDimensions,
         })}
                 ${listen(ViraMenuTrigger.events.openChange, (event) => {
             updateState({ showPopUpResult: event.detail });

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

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

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

@@ -0,0 +1,41 @@
+import { html } from 'element-vir';
+import { viraIconCssVars } from '../icon-css-vars.js';
+import { defineIcon } from '../icon-svg.js';
+/**
+ * An icon that represents copying something.
+ *
+ * @category Icon
+ * @category SVG
+ * @see https://electrovir.github.io/vira/book/icons/copy24icon
+ */
+export const Copy24Icon = defineIcon({
+    name: 'Copy24Icon',
+    svgTemplate: html `
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            xml:space="preserve"
+            style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round"
+            viewBox="0 0 24 24"
+            width="24"
+            height="24"
+        >
+            <path
+                d="M16 6v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6q.2-1.8 2-2h8a2 2 0 0 1 2 2"
+                stroke="none"
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
+            />
+            <path
+                d="M21 11v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8q.2-1.8 2-2h8a2 2 0 0 1 2 2"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                fill=${viraIconCssVars['vira-icon-fill-color'].value}
+            />
+            <path
+                d="M7 16H6a2 2 0 0 1-2-2V6q.2-1.8 2-2h8a2 2 0 0 1 2 2v1"
+                stroke=${viraIconCssVars['vira-icon-stroke-color'].value}
+                stroke-width=${viraIconCssVars['vira-icon-stroke-width'].value}
+                fill="none"
+            />
+        </svg>
+    `,
+});

package/dist/icons/index.d.ts

@@ -8,6 +8,7 @@ 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/copy-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';
@@ -51,6 +52,7 @@ export declare const allIconsByName: {
     readonly ChevronUp24Icon: 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 Document24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly DocumentSearch24Icon: import("./icon-svg.js").ViraIconSvg;
     readonly DoubleChevron24Icon: import("./icon-svg.js").ViraIconSvg;

package/dist/icons/index.js

@@ -6,6 +6,7 @@ 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 { Copy24Icon } from './icon-svgs/copy-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';
@@ -45,6 +46,7 @@ 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/copy-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';
@@ -88,6 +90,7 @@ export const allIconsByName = {
     ChevronUp24Icon,
     CloseX24Icon,
     Commit24Icon,
+    Copy24Icon,
     Document24Icon,
     DocumentSearch24Icon,
     DoubleChevron24Icon,

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

@@ -38,6 +38,21 @@ export type PopUpManagerOptions = {
      * @default 200
      */
     minDownSpace: number;
+    /**
+     * The minimum number of pixels for allowing the pop-up to go rightwards. If the rightward
+     * available space is less than this, and if the leftwards available space is
+     * `horizontalDiffThreshold` more than the rightwards space, the pop-up will be directed
+     * leftwards.
+     *
+     * Equation:
+     *
+     *     const directLeftwards =
+     *         rightwardsSpace < minRightSpace &&
+     *         leftwardsSpace > rightwardsSpace + horizontalDiffThreshold;
+     *
+     * @default 400
+     */
+    minRightSpace: number;
     /**
      * The number of pixels required for the upwards available space to be bigger than the downwards
      * available space before directing the pop-up upwards.
@@ -51,6 +66,19 @@ export type PopUpManagerOptions = {
      * @default 20
      */
     verticalDiffThreshold: number;
+    /**
+     * The number of pixels required for the leftwards available space to be bigger than the
+     * rightwards available space before directing the pop-up leftwards.
+     *
+     * Equation:
+     *
+     *     const directLeftwards =
+     *         rightwardsSpace < minRightSpace &&
+     *         leftwardsSpace > rightwardsSpace + horizontalDiffThreshold;
+     *
+     * @default 100
+     */
+    horizontalDiffThreshold: number;
     /**
      * Supports navigation of the pop up via the `device-navigation` package.
      *
@@ -70,6 +98,12 @@ export type ShowPopUpResult = {
      * the root element.
      */
     popDown: boolean;
+    /**
+     * Indicates if the "pop up" should pop in the rightwards direction or not. If not, it should
+     * pop in the leftwards direction. This is determined by how much space is available on either
+     * side of the root element.
+     */
+    popRight: boolean;
     positions: Record<'root' | 'container' | 'diff', PositionRect>;
 };
 declare const HidePopUpEvent_base: (new (eventInitDict?: EventInit) => import("typed-event-target").TypedEvent<"hide-pop-up">) & Pick<{

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

@@ -40,7 +40,9 @@ export class PopUpManager {
     listenTarget = new ListenTarget();
     options = {
         minDownSpace: 200,
+        minRightSpace: 400,
         verticalDiffThreshold: 20,
+        horizontalDiffThreshold: 100,
         supportNavigation: true,
     };
     cleanupCallbacks = [];
@@ -174,9 +176,12 @@ export class PopUpManager {
         });
         const useUp = diff.top > diff.bottom + currentOptions.verticalDiffThreshold &&
             diff.bottom < currentOptions.minDownSpace;
+        const useLeft = diff.left > diff.right + currentOptions.horizontalDiffThreshold &&
+            diff.right < currentOptions.minRightSpace;
         this.attachGlobalListeners(container);
         return {
             popDown: !useUp,
+            popRight: !useLeft,
             positions: {
                 container: containerPosition,
                 root: rootPosition,

package/package.json

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