@orangelogic/design-system 4.7.0 → 4.8.0

package/library/components/atoms.js

@@ -21,7 +21,7 @@ import { default as Y } from "./details.js";
 import { default as _ } from "./diff.js";
 import { C as oe } from "../chunks/dialog.C2q9XwLW.js";
 import { default as re } from "./divider.js";
-import { C as xe } from "../chunks/document-viewer.BmO1igBN.js";
+import { C as xe } from "../chunks/document-viewer.ZqrNpAA_.js";
 import { C as me } from "../chunks/dot-pagination.BclVUAf7.js";
 import { default as Ce } from "./dot-status.js";
 import { default as ue } from "./drawer.js";
@@ -40,7 +40,7 @@ import { f } from "../chunks/icon.BLXWp6CU.js";
 import { C as Oe } from "../chunks/icon.BLXWp6CU.js";
 import { C as Ee } from "../chunks/icon-button.BXs29IQE.js";
 import { C as Le } from "../chunks/iframe.e5XdCox5.js";
-import { C as je } from "../chunks/image.CjdSn_IT.js";
+import { C as je } from "../chunks/image.2ZXc5UiB.js";
 import { default as Qe } from "./image-comparer.js";
 import { default as qe } from "./include.js";
 import { C as Ke } from "../chunks/input.zRoRq5mq.js";

package/library/components/color-swatch-group.js

@@ -3,7 +3,7 @@ import "../chunks/typography.BLYdTF0n.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "./color-swatch.js";
 import "../chunks/component.styles.CAS3c9pM.js";
-import { C as w } from "../chunks/color-swatch-group.DMza5xD7.js";
+import { C as w } from "../chunks/color-swatch-group.CecCeVOC.js";
 import "../chunks/color.CIHdfM_a.js";
 import "../chunks/content-builder.CBBdfVOl.js";
 import "../chunks/custom-element.L4WJXn1j.js";

package/library/components/color-swatch.js

@@ -1,4 +1,4 @@
-import v from "./copy-button.js";
+import f from "./copy-button.js";
 import b from "./line-clamp.js";
 import _ from "./resize-observer.js";
 import k from "./space.js";
@@ -14,11 +14,11 @@ import { i as E, x as g } from "../chunks/lit-element.jLBm65_O.js";
 import { r as n } from "../chunks/state.CSDxrqLd.js";
 import { e as G } from "../chunks/query.BBf1UFkC.js";
 import { e as w } from "../chunks/class-map.BiVq-cVR.js";
-import { o as f } from "../chunks/if-defined.BRoBj_Rp.js";
+import { o as v } from "../chunks/if-defined.BRoBj_Rp.js";
 import { c as H } from "../chunks/repeat.CFjcER6_.js";
 import { o as p } from "../chunks/style-map.llVFPd__.js";
 import { n as I } from "../chunks/when.Dr1es41R.js";
-const B = E`:host{isolation:isolate;display:block}.color-swatch{border:1px solid var(--cx-color-neutral-200);justify-content:center;align-items:center;display:flex}.color-swatch:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-swatch--circle{aspect-ratio:1;height:auto;width:var(--swatch-circle-size,var(--swatch-size,350px));min-width:var(--swatch-size,230px);border-radius:var(--swatch-circle-border-radius,var(--cx-border-radius-circle));max-width:100%;overflow:hidden}.color-swatch--oval{height:var(--swatch-circle-size,var(--swatch-size,350px));border-radius:var(--swatch-circle-border-radius,calc(var(--swatch-circle-size,var(--swatch-size,350px)) / 2));width:100%}.color-swatch--grid{width:100%;height:100%;min-width:var(--swatch-grid-min-width,165px);min-height:max(var(--swatch-size,300px), var(--swatch-min-height,50px));border:var(--swatch-border,0px solid transparent);box-shadow:var(--swatch-box-shadow,none);border-radius:var(--swatch-border-radius,var(--cx-border-radius-x-large));border-style:solid;align-items:stretch}.color-swatch__content{max-height:100%;padding:var(--swatch-content-padding,0);justify-content:space-between;gap:var(--cx-spacing-medium)}.color-swatch--circle>.color-swatch__content{min-width:50%;max-width:75%}.color-swatch--oval>.color-swatch__content{max-width:85%}.color-swatch--circle,.color-swatch--oval{justify-content:var(--swatch-circle-content-align,center);align-items:var(--swatch-circle-content-justify,center)}.color-swatch--circle>.color-swatch__content,.color-swatch--oval>.color-swatch__content{align-items:var(--swatch-circle-content-align,center);justify-content:var(--swatch-circle-content-justify,center);margin:var(--swatch-circle-content-margin,0)}.color-swatch--grid>.color-swatch__content{justify-content:var(--swatch-content-justify,space-between);width:100%;max-height:none;padding:var(--swatch-content-margin,var(--cx-spacing-medium))}.color-swatch__key::part(base){vertical-align:middle;min-width:50px;height:100%}.color-swatch__key[variant=small]::part(base){display:inline-block}.color-swatch__copy-button::part(button){height:fit-content;min-height:fit-content;padding:0;background:0 0!important;border-width:0!important}.color-swatch__copy-button::part(label){height:fit-content;padding:0}.color-swatch__value{text-transform:none}.color-swatch__value::part(base){word-break:break-word}.color-swatch__value-wrapper{text-align:left}.color-swatch__name,.color-swatch__key,.color-swatch__value{--font-family:var(--swatch-font-family), var(--cx-font-sans);--font-style:var(--swatch-font-style,normal);--font-weight:var(--swatch-font-weight);--font-size:var(--swatch-font-size);--line-height:1.2}`;
+const B = E`:host{isolation:isolate;display:block}.color-swatch{border:1px solid var(--cx-color-neutral-200);justify-content:center;align-items:center;display:flex}.color-swatch:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.color-swatch--circle{aspect-ratio:1;height:auto;width:var(--swatch-circle-size,var(--swatch-size,350px));min-width:min(var(--swatch-circle-size,var(--swatch-size,350px)), 230px, 100%);border-radius:var(--swatch-circle-border-radius,var(--cx-border-radius-circle));max-width:100%;overflow:hidden}.color-swatch--oval{height:var(--swatch-circle-size,var(--swatch-size,350px));border-radius:var(--swatch-circle-border-radius,calc(var(--swatch-circle-size,var(--swatch-size,350px)) / 2));width:100%}.color-swatch--grid{width:100%;height:100%;min-width:var(--swatch-grid-min-width,165px);min-height:max(var(--swatch-size,300px), var(--swatch-min-height,50px));border:var(--swatch-border,0px solid transparent);box-shadow:var(--swatch-box-shadow,none);border-radius:var(--swatch-border-radius,var(--cx-border-radius-x-large));border-style:solid;align-items:stretch}.color-swatch__content{max-height:100%;padding:var(--swatch-content-padding,0);justify-content:space-between;gap:var(--cx-spacing-medium)}.color-swatch--circle>.color-swatch__content{min-width:50%;max-width:75%}.color-swatch--oval>.color-swatch__content{max-width:85%}.color-swatch--circle,.color-swatch--oval{justify-content:var(--swatch-circle-content-align,center);align-items:var(--swatch-circle-content-justify,center)}.color-swatch--circle>.color-swatch__content,.color-swatch--oval>.color-swatch__content{align-items:var(--swatch-circle-content-align,center);justify-content:var(--swatch-circle-content-justify,center);margin:var(--swatch-circle-content-margin,0)}.color-swatch--grid>.color-swatch__content{justify-content:var(--swatch-content-justify,space-between);width:100%;max-height:none;padding:var(--swatch-content-margin,var(--cx-spacing-medium))}.color-swatch__key::part(base){vertical-align:middle;min-width:50px;height:100%}.color-swatch__key[variant=small]::part(base){display:inline-block}.color-swatch__copy-button::part(button){height:fit-content;min-height:fit-content;padding:0;background:0 0!important;border-width:0!important}.color-swatch__copy-button::part(label){height:fit-content;padding:0}.color-swatch__value{text-transform:none}.color-swatch__value::part(base){word-break:break-word}.color-swatch__value-wrapper{text-align:left}.color-swatch__name,.color-swatch__key,.color-swatch__value{--font-family:var(--swatch-font-family), var(--cx-font-sans);--font-style:var(--swatch-font-style,normal);--font-weight:var(--swatch-font-weight);--font-size:var(--swatch-font-size);--line-height:1.2}`;
 var L = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (r, i, o, d) => {
   for (var c = d > 1 ? void 0 : d ? D(i, o) : i, u = r.length - 1, y; u >= 0; u--)
     (y = r[u]) && (c = (d ? y(i, o, c) : y(c)) || c);
@@ -104,7 +104,7 @@ let t = class extends $ {
       },
       { key: "PMS", value: this.pms }
     ].filter((o) => this.showCodes.includes(o.key)), i = this.codeAlignment === C.SeparateLine ? "vertical" : "horizontal";
-    return g`<cx-resize-observer @cx-resize=${this.handleResize}><div part="base" tabindex=${f(this.canFocusContainer ? "0" : void 0)} class=${w({
+    return g`<cx-resize-observer @cx-resize=${this.handleResize}><div part="base" tabindex=${v(this.canFocusContainer ? "0" : void 0)} class=${w({
       "color-swatch": !0,
       "color-swatch--circle": this.variant === m.Circle,
       "color-swatch--grid": this.variant === m.GridItem,
@@ -121,7 +121,7 @@ let t = class extends $ {
         "--color": this.textColor
       })}>${o.key}</cx-typography>${I(
         this.canCopy && o.value !== "",
-        () => g`<cx-copy-button part="copy-button" tabindex=${f(
+        () => g`<cx-copy-button part="copy-button" tabindex=${v(
           this.canFocusCodeOnly ? void 0 : "-1"
         )} class="color-swatch__copy-button" copy-label=${this.localize.term("clickToCopy")} focus-copy-label=${this.localize.term(
           "pressEnterOrCtrlCToCopy"
@@ -139,7 +139,7 @@ let t = class extends $ {
 };
 t.styles = [S, B];
 t.dependencies = {
-  "cx-copy-button": v,
+  "cx-copy-button": f,
   "cx-line-clamp": b,
   "cx-resize-observer": _,
   "cx-space": k,

package/library/components/document-viewer.js

@@ -1,5 +1,5 @@
 import "../chunks/resizable-component.styles.kMFDlGgv.js";
-import { C as b } from "../chunks/document-viewer.BmO1igBN.js";
+import { C as b } from "../chunks/document-viewer.ZqrNpAA_.js";
 import "../chunks/component.styles.CAS3c9pM.js";
 import "../chunks/index.Cpamj0jB.js";
 import "../chunks/custom-element.L4WJXn1j.js";
@@ -10,7 +10,7 @@ import "../chunks/state.CSDxrqLd.js";
 import "../chunks/class-map.BiVq-cVR.js";
 import "../chunks/when.Dr1es41R.js";
 import "../chunks/icon.BLXWp6CU.js";
-import "../chunks/image.CjdSn_IT.js";
+import "../chunks/image.2ZXc5UiB.js";
 import "../chunks/typography.BLYdTF0n.js";
 export {
   b as default

package/library/components/image.js

@@ -1,7 +1,7 @@
 import "../chunks/resizable-component.styles.kMFDlGgv.js";
 import "../chunks/component.styles.CAS3c9pM.js";
 import "../chunks/index.Cpamj0jB.js";
-import { C as y } from "../chunks/image.CjdSn_IT.js";
+import { C as y } from "../chunks/image.2ZXc5UiB.js";
 import "../chunks/position-picker.qkbJlboF.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/debounce.DaHuiSGU.js";

package/library/components/masonry.js

@@ -1,7 +1,7 @@
 import _ from "./grid.js";
 import f from "./grid-item.js";
 import { C as v } from "../chunks/icon-button.BXs29IQE.js";
-import { C as S } from "../chunks/image.CjdSn_IT.js";
+import { C as S } from "../chunks/image.2ZXc5UiB.js";
 import $ from "./space.js";
 import C from "./tooltip.js";
 import { n as s, C as w } from "../chunks/lib-cortex-element.CVMmyPMC.js";

package/library/components/organisms.js

@@ -1,5 +1,5 @@
 import { C as a } from "../chunks/asset-link-format.Bi9J8xCQ.js";
-import { C as t } from "../chunks/color-swatch-group.DMza5xD7.js";
+import { C as t } from "../chunks/color-swatch-group.CecCeVOC.js";
 import { default as C } from "./file-on-demand.js";
 export {
   a as CxAssetLinkFormat,

package/library/components/select.js

@@ -349,12 +349,10 @@ let i = class extends S {
     ) : void 0;
     let l = !1;
     return t.forEach((r) => {
-      if (r === "")
-        return;
       const c = e.find(
         (h) => this.getOptionValue(h) === r
       );
-      c ? o.push(c) : l = !0;
+      c ? o.push(c) : r !== "" && (l = !0);
     }), l && n && o.push(n), {
       options: o,
       preserveValue: l && !!n

package/library/components/types.js

@@ -20,7 +20,7 @@ import { default as k } from "./details.js";
 import { default as N } from "./diff.js";
 import { C as U } from "../chunks/dialog.C2q9XwLW.js";
 import { default as X } from "./divider.js";
-import { C as K } from "../chunks/document-viewer.BmO1igBN.js";
+import { C as K } from "../chunks/document-viewer.ZqrNpAA_.js";
 import { C as q } from "../chunks/dot-pagination.BclVUAf7.js";
 import { default as J } from "./dot-status.js";
 import { default as Z } from "./drawer.js";
@@ -38,7 +38,7 @@ import { C as Sa } from "../chunks/hub-connection.BtevPWYb.js";
 import { C as Da } from "../chunks/icon.BLXWp6CU.js";
 import { C as Fa } from "../chunks/icon-button.BXs29IQE.js";
 import { C as Pa } from "../chunks/iframe.e5XdCox5.js";
-import { C as ha } from "../chunks/image.CjdSn_IT.js";
+import { C as ha } from "../chunks/image.2ZXc5UiB.js";
 import { default as Oa } from "./image-comparer.js";
 import { default as va } from "./include.js";
 import { C as Va } from "../chunks/input.zRoRq5mq.js";
@@ -86,7 +86,7 @@ import { default as mt } from "./visually-hidden.js";
 import { fontAwesomeIconNames as pt, getAnimationNames as ft, getEasingNames as Ct } from "./atoms.js";
 import { c as ut } from "../chunks/component.styles.CAS3c9pM.js";
 import { g as gt, a as Tt, s as At } from "../chunks/animation-registry.HmpwNuGH.js";
-import { u as It, v as Dt, V as bt, w as Ft, o as yt, n as Pt, m as Et, Y as ht, Z as Rt, _ as Ot, a0 as Lt, $ as vt, a1 as Bt, a2 as Vt, a3 as Mt, a4 as _t, a5 as Gt, k as kt, W as wt, x as Nt, X as Ht, y as Ut, z as zt, A as Xt, j as Wt, a6 as Kt, B as jt, D as qt, E as Yt, G as Jt, a7 as Qt, h as Zt, H as $t, J as ao, f as eo, S as to, T as oo, a8 as ro, e as so, K as xo, L as io, M as lo, N as mo, P as no, a9 as po, aa as fo, Q as Co, R as uo, ab as co, ac as go, b as To, U as Ao, ad as So, ae as Io } from "../chunks/types.4OaADvOF.js";
+import { u as It, v as Dt, V as bt, w as Ft, o as yt, n as Pt, m as Et, Y as ht, Z as Rt, _ as Ot, a0 as Lt, $ as vt, a1 as Bt, a2 as Vt, a3 as Mt, a4 as _t, a5 as Gt, k as kt, W as wt, x as Nt, X as Ht, y as Ut, z as zt, A as Xt, j as Wt, a6 as Kt, B as jt, D as qt, E as Yt, G as Jt, a7 as Qt, h as Zt, H as $t, J as ao, f as eo, S as to, T as oo, a8 as ro, e as so, K as xo, L as io, M as lo, N as mo, P as no, a9 as po, aa as fo, Q as Co, R as uo, ab as co, ac as go, b as To, U as Ao, ad as So, ae as Io } from "../chunks/types.D6xffHzq.js";
 import { default as bo } from "./bicolor-picker.js";
 import { default as yo } from "./border-input-group.js";
 import { default as Eo } from "./color-swatch.js";
@@ -94,7 +94,7 @@ import { C as Ro } from "../chunks/confirm-popover.CeKZ8dF1.js";
 import { default as Lo } from "./corner-position-input-group.js";
 import { default as Bo } from "./cropper.js";
 import { default as Mo } from "./dynamic-select.js";
-import { C as Go, i as ko, j as wo } from "../chunks/color-swatch-group.DMza5xD7.js";
+import { C as Go, i as ko, j as wo } from "../chunks/color-swatch-group.CecCeVOC.js";
 import { C as Ho } from "../chunks/folder-select.lF4v6bbN.js";
 import { default as zo } from "./masonry.js";
 import { default as Wo } from "./padding-input-group.js";

package/library/components/video.js

@@ -1,7 +1,7 @@
 import { _ as Bd, a as Ca, b as Be, c as Je } from "../chunks/inheritsLoose.BuSn_CvZ.js";
 import { c as vs, a as Fn } from "../chunks/_commonjsHelpers.DQNKXVTB.js";
 import { r as Cb } from "../chunks/___vite-browser-external_commonjs-proxy.C2tf3HsQ.js";
-import { C as Mb } from "../chunks/image.CjdSn_IT.js";
+import { C as Mb } from "../chunks/image.2ZXc5UiB.js";
 import Db from "./resize-observer.js";
 import { r as Pb, R as Lb, b as Ip, a as Rb } from "../chunks/resizable-component.styles.kMFDlGgv.js";
 import { c as Ib } from "../chunks/component.styles.CAS3c9pM.js";

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/molecules/src/mentions/mentions.d.ts

@@ -14,6 +14,10 @@ import { TemplateResult } from 'lit';
  * @description Renders a popup menu of mention candidates, supports keyboard navigation, and notifies consumers when an item is selected.
  *
  * @csspart base - The popup base part exposed by `cx-popup`.
+ *
+ * @cssproperty [--max-list-width=40rem] - Only with `wrap-items`: width at which item text
+ *  wraps. Until then the list grows with its content — rightward, then leftward once the
+ *  popup's right edge is pinned at the viewport.
  */
 export default class CxMentions extends CortexElement {
     static readonly styles: import('lit').CSSResult;
@@ -30,12 +34,25 @@ export default class CxMentions extends CortexElement {
     anchor: CxPopup['anchor'] | undefined;
     items: AutocompleteItem[];
     searchTerm: string;
+    /**
+     * Lets the list grow with its content: rightward until it reaches the viewport edge, then
+     * leftward with the right edge pinned there (via the popup's shift), wrapping item text
+     * at `--max-list-width` (or when even the full viewport width is not enough). Off by
+     * default so mention kinds with short labels keep the popup's natural sizing.
+     */
+    wrapItems: boolean;
     noItemsMessage: string;
     onSelect: ((value: {
         id: string;
         label: string;
         type?: string;
     } | undefined, key?: 'Enter') => void) | undefined;
+    /**
+     * Gap kept between the popup and the viewport edges. Single source for the popup's
+     * flip/shift/auto-size paddings; the wrap-items max-width in the styles hardcodes
+     * 2 × this value and must stay in sync.
+     */
+    private static readonly VIEWPORT_PADDING;
     selectedIndex: number;
     private getMentionLabel;
     private handleSelect;

package/library/packages/organisms/src/lightbox/lightbox.d.ts

@@ -36,7 +36,8 @@ export default class CxLightbox extends CortexElement {
      */
     open: boolean;
     /**
-     * Array of slide items to display.
+     * Array of slide items to display. Previews always fit and center the image,
+     * ignoring each item's object fit and crop focus.
      */
     data: GalleryItem[];
     /**

package/library/react-web-component.d.ts

@@ -6970,6 +6970,10 @@
           * 
         */
         searchTerm?: string;
+        /**
+          * Lets the list grow with its content: rightward until it reaches the viewport edge, then leftward with the right edge pinned there (via the popup's shift), wrapping item text at `--max-list-width` (or when even the full viewport width is not enough). Off by default so mention kinds with short labels keep the popup's natural sizing.
+        */
+        wrapItems?: boolean;
         /**
           * 
         */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "4.7.0",
+  "version": "4.8.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {