@orangelogic/design-system 2.88.0 → 2.89.0

package/library/components/asset-link-format.js

@@ -37,26 +37,39 @@ function J({
   useSession: h = ""
 }) {
   let r = e;
-  a && a.length > 0 && (r += "/t/");
-  const m = a?.findLast(
-    (v) => v.key === c.Quality
+  const y = a?.findLast(
+    (x) => x.key === c.Quality
   );
-  m && (a = [
+  if (y && (a = [
     ...a?.filter(
-      (v) => v.key !== c.Quality
+      (x) => x.key !== c.Quality
     ) || [],
-    m
-  ]), a?.forEach(({ key: v, value: w }) => {
-    if (v === c.Resize) {
-      const x = [
+    y
+  ]), a) {
+    const x = [];
+    for (let g = 0; g < a.length; g++) {
+      const m = a[g];
+      if (m.key === c.Rotate) {
+        let n = m.value.rotation ?? 0;
+        for (; a[g + 1]?.key === c.Rotate; )
+          g++, n += a[g].value.rotation ?? 0;
+        n !== 0 && x.push({ key: c.Rotate, value: { rotation: n } });
+      } else
+        x.push(m);
+    }
+    a = x;
+  }
+  a && a.length > 0 && (r += "/t/"), a?.forEach(({ key: x, value: g }) => {
+    if (x === c.Resize) {
+      const m = [
         ...[
           {
             key: "re_w_",
-            value: Math.round(w.width ?? 0)
+            value: Math.round(g.width ?? 0)
           },
           {
             key: "re_h_",
-            value: Math.round(w.height ?? 0)
+            value: Math.round(g.height ?? 0)
           }
         ].filter((n) => n.value !== void 0).map((n) => ({
           key: n.key,
@@ -67,33 +80,33 @@ function J({
           value: "stretch"
         }
       ];
-      x.forEach(({ key: n, value: $ }, B) => {
-        r += `${n}${$}${B < x.length - 1 ? "," : ""}`;
+      m.forEach(({ key: n, value: $ }, B) => {
+        r += `${n}${$}${B < m.length - 1 ? "," : ""}`;
       }), r += "/";
     }
-    if (v === c.Crop) {
-      const x = [
+    if (x === c.Crop) {
+      const m = [
         ...[
           {
             key: "c_",
-            value: w.mode
+            value: g.mode
           },
-          ...w.disabledSize ? [] : [
+          ...g.disabledSize ? [] : [
             {
               key: "c_w_",
-              value: Math.round(w.width ?? 0)
+              value: Math.round(g.width ?? 0)
             },
             {
               key: "c_h_",
-              value: Math.round(w.height ?? 0)
+              value: Math.round(g.height ?? 0)
             },
             {
               key: "c_x_",
-              value: Math.round(w.x ?? 0)
+              value: Math.round(g.x ?? 0)
             },
             {
               key: "c_y_",
-              value: Math.round(w.y ?? 0)
+              value: Math.round(g.y ?? 0)
             }
           ]
         ].filter((n) => n.value !== void 0 && n.value !== null).map((n) => ({
@@ -105,56 +118,56 @@ function J({
           value: "pixel"
         }
       ];
-      x.forEach(({ key: n, value: $ }, B) => {
+      m.forEach(({ key: n, value: $ }, B) => {
         const ot = ["c_w_", "c_h_", "c_x_", "c_y_"].includes(n);
-        r += `${n}${ot ? Math.round(Number($)) : $}${B < x.length - 1 ? "," : ""}`;
+        r += `${n}${ot ? Math.round(Number($)) : $}${B < m.length - 1 ? "," : ""}`;
       }), r += "/";
     }
-    if (v === c.Rotate && ([
+    if (x === c.Rotate && ([
       {
         key: "r_a_",
-        value: w.rotation
+        value: g.rotation
       }
     ].filter((n) => n.value !== void 0).map((n) => ({
       key: n.key,
       value: Math.round(Number(n.value))
     })).forEach(({ key: n, value: $ }) => {
       r += `${n}${$}`;
-    }), r += "/"), v === c.Quality) {
-      const x = [
+    }), r += "/"), x === c.Quality) {
+      const m = [
         {
           key: "q_level_",
-          value: w.quality
+          value: g.quality
         }
       ].filter((n) => n.value !== void 0).map((n) => ({
         key: n.key,
         value: Math.round(Number(n.value))
       }));
-      x.forEach(({ key: n, value: $ }, B) => {
-        r += `${n}${$}${B < x.length - 1 ? "," : ""}`;
+      m.forEach(({ key: n, value: $ }, B) => {
+        r += `${n}${$}${B < m.length - 1 ? "," : ""}`;
       }), r += "/";
     }
-    if (v === c.Metadata) {
-      const x = [
+    if (x === c.Metadata) {
+      const m = [
         {
           key: "fl_keep_metadata",
-          value: w.keepMetadata
+          value: g.keepMetadata
         }
       ].filter((n) => n.value !== void 0).map((n) => ({ key: n.key, value: n.value }));
-      x.forEach(({ key: n }, $) => {
-        r += `${n}${$ < x.length - 1 ? "," : ""}`;
+      m.forEach(({ key: n }, $) => {
+        r += `${n}${$ < m.length - 1 ? "," : ""}`;
       }), r += "/";
     }
   }), i && (r += `${t?.identifier}${i}`);
-  const y = [];
-  return s && s.length > 0 && s.forEach(({ key: v, value: w }) => {
-    y.push(
-      `${encodeURIComponent(v.trim())}=${encodeURIComponent(w.trim())}`
+  const w = [];
+  return s && s.length > 0 && s.forEach(({ key: x, value: g }) => {
+    w.push(
+      `${encodeURIComponent(x.trim())}=${encodeURIComponent(g.trim())}`
     );
-  }), y.length > 0 && (r += `?${y.join("&")}`), r.endsWith("/") && (r = r.slice(0, -1)), r;
+  }), w.length > 0 && (r += `?${w.join("&")}`), r.endsWith("/") && (r = r.slice(0, -1)), r;
 }
 const gt = D`cx-details::part(base){border-bottom-width:0}cx-space{width:100%}cx-space cx-input{flex:1}.crop__unit-select{width:120px}.crop__input-group{flex:1;display:flex}`;
-var mt = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, g = (t, e, i, s) => {
+var mt = Object.defineProperty, xt = Object.getOwnPropertyDescriptor, f = (t, e, i, s) => {
   for (var a = s > 1 ? void 0 : s ? xt(e, i) : e, h = t.length - 1, r; h >= 0; h--)
     (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
   return s && a && mt(e, i, a), a;
@@ -428,82 +441,82 @@ u.dependencies = {
   "cx-space": H,
   "cx-typography": W
 };
-g([
+f([
   T(".details")
 ], u.prototype, "base", 2);
-g([
+f([
   l({ reflect: !0, type: Boolean })
 ], u.prototype, "open", 2);
-g([
+f([
   l({ reflect: !0, type: Number })
 ], u.prototype, "width", 2);
-g([
+f([
   l({ reflect: !0, type: Number })
 ], u.prototype, "height", 2);
-g([
+f([
   l({ attribute: "max-width", reflect: !0, type: Number })
 ], u.prototype, "maxWidth", 2);
-g([
+f([
   l({ attribute: "max-height", reflect: !0, type: Number })
 ], u.prototype, "maxHeight", 2);
-g([
+f([
   l({ attribute: "ratio-width", reflect: !0, type: Number })
 ], u.prototype, "ratioWidth", 2);
-g([
+f([
   l({ attribute: "ratio-height", reflect: !0, type: Number })
 ], u.prototype, "ratioHeight", 2);
-g([
+f([
   l({ attribute: "percentage-width", reflect: !0, type: Number })
 ], u.prototype, "percentageWidth", 2);
-g([
+f([
   l({ attribute: "percentage-height", reflect: !0, type: Number })
 ], u.prototype, "percentageHeight", 2);
-g([
+f([
   l({ reflect: !0, type: String })
 ], u.prototype, "unit", 2);
-g([
+f([
   l({ attribute: "disabled-apply", reflect: !0, type: Boolean })
 ], u.prototype, "disabledApply", 2);
-g([
+f([
   l({ attribute: "last-applied-setting", reflect: !1, type: Object })
 ], u.prototype, "lastAppliedSetting", 2);
-g([
+f([
   l({ reflect: !0, type: Boolean })
 ], u.prototype, "loading", 2);
-g([
+f([
   l({ attribute: "crop-modes", reflect: !1, type: Array })
 ], u.prototype, "cropModes", 2);
-g([
+f([
   l({ attribute: "focus-modes", reflect: !1, type: Object })
 ], u.prototype, "focusModes", 2);
-g([
+f([
   l({ attribute: "focus-mode", reflect: !0, type: String })
 ], u.prototype, "focusMode", 2);
-g([
+f([
   l({ attribute: "crop-mode", reflect: !0, type: String })
 ], u.prototype, "cropMode", 2);
-g([
+f([
   l({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
 ], u.prototype, "keepAspectRatio", 2);
-g([
+f([
   z()
 ], u.prototype, "invalidWidth", 2);
-g([
+f([
   z()
 ], u.prototype, "invalidHeight", 2);
-g([
+f([
   z()
 ], u.prototype, "aspectRatio", 2);
-g([
+f([
   k("cropMode", { waitUntilFirstUpdate: !0 }),
   k("maxWidth", { waitUntilFirstUpdate: !0 }),
   k("maxHeight", { waitUntilFirstUpdate: !0 }),
   k("keepAspectRatio")
 ], u.prototype, "handleCropModeChange", 1);
-g([
+f([
   k("open")
 ], u.prototype, "handleOpenChange", 1);
-u = g([
+u = f([
   N("cx-asset-link-format-crop")
 ], u);
 const ft = D`.extension{padding:var(--cx-spacing-small) var(--cx-spacing-medium);border:solid 1px var(--cx-color-neutral-200);background-color:var(--cx-color-neutral-0);& cx-select{flex:1;width:100%}}`;
@@ -738,7 +751,7 @@ var At = Object.defineProperty, Rt = Object.getOwnPropertyDescriptor, S = (t, e,
     (r = t[h]) && (a = (s ? r(e, i, a) : r(a)) || a);
   return s && a && At(e, i, a), a;
 };
-let f = class extends F {
+let v = class extends F {
   constructor() {
     super(...arguments), this.localize = new O(this), this.open = !1, this.width = 0, this.height = 0, this.maxWidth = 0, this.maxHeight = 0, this.ratioWidth = 1, this.ratioHeight = 1, this.unit = o.Pixel, this.lastAppliedSetting = {
       [o.Pixel]: { height: 0, width: 0 },
@@ -885,8 +898,8 @@ let f = class extends F {
     })} @click=${this.handleApply}>${this.localize.term("apply")}</cx-button></cx-space></cx-details>`;
   }
 };
-f.styles = [E, Ct];
-f.dependencies = {
+v.styles = [E, Ct];
+v.dependencies = {
   "cx-button": q,
   "cx-details": L,
   "cx-icon": j,
@@ -899,61 +912,61 @@ f.dependencies = {
 };
 S([
   T(".details")
-], f.prototype, "base", 2);
+], v.prototype, "base", 2);
 S([
   l({ reflect: !0, type: Boolean })
-], f.prototype, "open", 2);
+], v.prototype, "open", 2);
 S([
   l({ reflect: !0, type: Number })
-], f.prototype, "width", 2);
+], v.prototype, "width", 2);
 S([
   l({ reflect: !0, type: Number })
-], f.prototype, "height", 2);
+], v.prototype, "height", 2);
 S([
   l({ attribute: "max-width", reflect: !0, type: Number })
-], f.prototype, "maxWidth", 2);
+], v.prototype, "maxWidth", 2);
 S([
   l({ attribute: "max-height", reflect: !0, type: Number })
-], f.prototype, "maxHeight", 2);
+], v.prototype, "maxHeight", 2);
 S([
   l({ attribute: "ratio-width", reflect: !0, type: Number })
-], f.prototype, "ratioWidth", 2);
+], v.prototype, "ratioWidth", 2);
 S([
   l({ attribute: "ratio-height", reflect: !0, type: Number })
-], f.prototype, "ratioHeight", 2);
+], v.prototype, "ratioHeight", 2);
 S([
   l({ reflect: !0, type: String })
-], f.prototype, "unit", 2);
+], v.prototype, "unit", 2);
 S([
   l({ attribute: "last-applied-setting", reflect: !1, type: Object })
-], f.prototype, "lastAppliedSetting", 2);
+], v.prototype, "lastAppliedSetting", 2);
 S([
   l({ reflect: !0, type: Boolean })
-], f.prototype, "loading", 2);
+], v.prototype, "loading", 2);
 S([
   l({ attribute: "keep-aspect-ratio", reflect: !0, type: Boolean })
-], f.prototype, "keepAspectRatio", 2);
+], v.prototype, "keepAspectRatio", 2);
 S([
   z()
-], f.prototype, "invalidWidth", 2);
+], v.prototype, "invalidWidth", 2);
 S([
   z()
-], f.prototype, "invalidHeight", 2);
+], v.prototype, "invalidHeight", 2);
 S([
   z()
-], f.prototype, "aspectRatio", 2);
+], v.prototype, "aspectRatio", 2);
 S([
   k("cropMode", { waitUntilFirstUpdate: !0 }),
   k("maxWidth", { waitUntilFirstUpdate: !0 }),
   k("maxHeight", { waitUntilFirstUpdate: !0 }),
   k("keepAspectRatio")
-], f.prototype, "handleCropModeChange", 1);
+], v.prototype, "handleCropModeChange", 1);
 S([
   k("open")
-], f.prototype, "handleOpenChange", 1);
-f = S([
+], v.prototype, "handleOpenChange", 1);
+v = S([
   N("cx-asset-link-format-resize")
-], f);
+], v);
 const Mt = D`cx-details::part(base){border-bottom-width:0}`;
 var _t = Object.defineProperty, Pt = Object.getOwnPropertyDescriptor, V = (t, e, i, s) => {
   for (var a = s > 1 ? void 0 : s ? Pt(e, i) : e, h = t.length - 1, r; h >= 0; h--)
@@ -1488,14 +1501,14 @@ let p = class extends F {
     const i = this.proxies?.find((s) => s.id === t);
     i && (this.asset && i.proxyName === "TRX" && (i.formatHeight = Number(this.asset.height), i.formatWidth = Number(this.asset.width)), this.transformations = this.transformations.map((s) => {
       if (s.key === c.Crop) {
-        const a = s.value, h = a.width / i.formatWidth * e.formatWidth, r = a.height / i.formatHeight * e.formatHeight, m = a.x / i.formatWidth * e.formatWidth, y = a.y / i.formatHeight * e.formatHeight;
+        const a = s.value, h = a.width / i.formatWidth * e.formatWidth, r = a.height / i.formatHeight * e.formatHeight, y = a.x / i.formatWidth * e.formatWidth, w = a.y / i.formatHeight * e.formatHeight;
         return {
           ...s,
           value: {
             height: r,
             width: h,
-            x: m,
-            y
+            x: y,
+            y: w
           }
         };
       }
@@ -1572,31 +1585,31 @@ let p = class extends F {
     percentageHeight: a,
     percentageWidth: h,
     ratioHeight: r,
-    ratioWidth: m,
-    unit: y,
-    useCropMode: v,
-    width: w
+    ratioWidth: y,
+    unit: w,
+    useCropMode: x,
+    width: g
   }) {
     if (!this.selectedFormat?.url || e === "manual")
       return;
     this.loading = !0, this.lastAction = c.Crop;
-    const x = await this.apiGetCropFocusMode({
+    const m = await this.apiGetCropFocusMode({
       autoCropMode: e,
       cropHeight: i,
-      cropWidth: w,
+      cropWidth: g,
       imageUrl: this.selectedFormat.url
     });
-    if (x) {
+    if (m) {
       let n = a, $ = h;
-      i || (n = x.height * 100 / this.selectedFormat.height), w || ($ = x.width * 100 / this.selectedFormat.width), this.cropSize = {
+      i || (n = m.height * 100 / this.selectedFormat.height), g || ($ = m.width * 100 / this.selectedFormat.width), this.cropSize = {
         ...this.cropSize,
-        height: x.height,
+        height: m.height,
         percentageHeight: n ?? this.cropSize.percentageHeight,
         percentageWidth: $ ?? this.cropSize.percentageWidth,
-        width: x.width,
-        x: x.x * 100 / this.selectedFormat.width,
-        y: x.y * 100 / this.selectedFormat.height,
-        ...v ? {
+        width: m.width,
+        x: m.x * 100 / this.selectedFormat.width,
+        y: m.y * 100 / this.selectedFormat.height,
+        ...x ? {
           cropMode: e,
           focusMode: "manual",
           keepAspectRatio: !1
@@ -1606,8 +1619,8 @@ let p = class extends F {
         },
         keepAspectRatio: s ?? this.cropSize.keepAspectRatio,
         ratioHeight: r ?? this.cropSize.ratioHeight,
-        ratioWidth: m ?? this.cropSize.ratioWidth,
-        unit: y ?? this.cropSize.unit
+        ratioWidth: y ?? this.cropSize.ratioWidth,
+        unit: w ?? this.cropSize.unit
       };
     }
     this.loading = !1, this.lastAction = void 0;
@@ -1618,26 +1631,26 @@ let p = class extends F {
       width: s,
       x: a,
       y: h
-    } = e, r = this.cropSize.percentageWidth !== s, m = this.cropSize.percentageHeight !== i;
-    let y = this.cropSize.height, v = this.cropSize.width;
-    r && (v = Math.round(s * this.selectedFormat.width / 100)), m && (y = Math.round(
+    } = e, r = this.cropSize.percentageWidth !== s, y = this.cropSize.percentageHeight !== i;
+    let w = this.cropSize.height, x = this.cropSize.width;
+    r && (x = Math.round(s * this.selectedFormat.width / 100)), y && (w = Math.round(
       i * this.selectedFormat.height / 100
     ));
-    const w = this.cropSize.focusMode;
+    const g = this.cropSize.focusMode;
     this.focusModes.find(
-      (n) => n.value === w
+      (n) => n.value === g
     )?.auto && this.selectedFormat?.url && this.cropperElement ? await this.handleRequestAutoCropSuggestion({
-      focusMode: w,
-      height: y,
+      focusMode: g,
+      height: w,
       percentageHeight: i,
       percentageWidth: s,
-      width: v
+      width: x
     }) : this.cropSize = {
       ...this.cropSize,
-      height: y,
+      height: w,
       percentageHeight: i,
       percentageWidth: s,
-      width: v,
+      width: x,
       x: a,
       y: h
     };
@@ -1673,10 +1686,10 @@ let p = class extends F {
       });
     else {
       const s = this.focusModes.find(
-        (y) => y.value === this.cropSize.focusMode
+        (w) => w.value === this.cropSize.focusMode
       )?.auto;
-      let a = this.cropSize.keepAspectRatio, h = this.cropSize.focusMode, r = this.cropSize.x, m = this.cropSize.y;
-      e === "free" ? (a = !1, h = "manual") : this.cropSize.unit === o.Pixel && !s && (r = 0, m = 0), s ? await this.handleRequestAutoCropSuggestion({
+      let a = this.cropSize.keepAspectRatio, h = this.cropSize.focusMode, r = this.cropSize.x, y = this.cropSize.y;
+      e === "free" ? (a = !1, h = "manual") : this.cropSize.unit === o.Pixel && !s && (r = 0, y = 0), s ? await this.handleRequestAutoCropSuggestion({
         cropMode: e,
         focusMode: h,
         height: this.cropSize.height,
@@ -1688,7 +1701,7 @@ let p = class extends F {
         focusMode: h,
         keepAspectRatio: a,
         x: r,
-        y: m
+        y
       };
     }
   }
@@ -1713,14 +1726,14 @@ let p = class extends F {
         Math.max(Math.round(s / i), 0),
         this.resizeSize.height
       ), h = a * 100 / this.selectedFormat.height, r = s * 100 / this.selectedFormat.width;
-      let m = this.cropSize.x, y = this.cropSize.y;
-      m + r > 100 && (m = 100 - r), y + h > 100 && (y = 100 - h);
-      let v = this.cropSize.cropMode;
+      let y = this.cropSize.x, w = this.cropSize.y;
+      y + r > 100 && (y = 100 - r), w + h > 100 && (w = 100 - h);
+      let x = this.cropSize.cropMode;
       this.cropModes.find(
-        (x) => x.value === v
-      )?.auto && (v = "free"), t.detail.silent ? (this.cropSize.height = a, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = h, this.cropSize.percentageWidth = r, this.cropSize.ratioHeight = t.detail.height, this.cropSize.ratioWidth = t.detail.width, this.cropSize.unit = o.AspectRatio, this.cropSize.width = s) : this.cropSize = {
+        (m) => m.value === x
+      )?.auto && (x = "free"), t.detail.silent ? (this.cropSize.height = a, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = h, this.cropSize.percentageWidth = r, this.cropSize.ratioHeight = t.detail.height, this.cropSize.ratioWidth = t.detail.width, this.cropSize.unit = o.AspectRatio, this.cropSize.width = s) : this.cropSize = {
         ...this.cropSize,
-        cropMode: v,
+        cropMode: x,
         height: a,
         keepAspectRatio: t.detail.keepAspectRatio,
         percentageHeight: h,
@@ -1729,18 +1742,18 @@ let p = class extends F {
         ratioWidth: t.detail.width,
         unit: o.AspectRatio,
         width: s,
-        x: m,
-        y
+        x: y,
+        y: w
       };
     } else {
       const i = this.selectedFormat ? t.detail.height * 100 / this.selectedFormat.height : 100, s = this.selectedFormat ? t.detail.width * 100 / this.selectedFormat.width : 100;
       let a = this.cropSize.x, h = this.cropSize.y;
       a + s > 100 && (a = 100 - s), h + i > 100 && (h = 100 - i);
       let r = this.cropSize.cropMode;
-      const m = this.cropModes.find(
-        (y) => y.value === r
+      const y = this.cropModes.find(
+        (w) => w.value === r
       )?.auto;
-      (t.detail.breakAspectRatio || m) && (r = "free"), t.detail.silent ? (this.cropSize.cropMode = r, this.cropSize.height = t.detail.height, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = i, this.cropSize.percentageWidth = s, this.cropSize.unit = o.Pixel, this.cropSize.width = t.detail.width, this.cropSize.x = a, this.cropSize.y = h) : this.cropSize = {
+      (t.detail.breakAspectRatio || y) && (r = "free"), t.detail.silent ? (this.cropSize.cropMode = r, this.cropSize.height = t.detail.height, this.cropSize.keepAspectRatio = t.detail.keepAspectRatio, this.cropSize.percentageHeight = i, this.cropSize.percentageWidth = s, this.cropSize.unit = o.Pixel, this.cropSize.width = t.detail.width, this.cropSize.x = a, this.cropSize.y = h) : this.cropSize = {
         ...this.cropSize,
         cropMode: r,
         height: t.detail.height,
@@ -1785,7 +1798,7 @@ let p = class extends F {
             }
           ];
         else {
-          const m = this.cropSize.x / 100 * this.selectedFormat.width, y = this.cropSize.y / 100 * this.selectedFormat.height;
+          const y = this.cropSize.x / 100 * this.selectedFormat.width, w = this.cropSize.y / 100 * this.selectedFormat.height;
           this.transformations = [
             ...this.transformations,
             {
@@ -1794,8 +1807,8 @@ let p = class extends F {
                 height: r,
                 unit: s,
                 width: h,
-                x: m,
-                y
+                x: y,
+                y: w
               }
             }
           ];
@@ -1840,13 +1853,13 @@ let p = class extends F {
     const { height: e, unit: i, width: s } = t.detail;
     this.lastAction = c.Resize;
     const a = this.selectedFormat.width || this.defaultSize.width, h = this.selectedFormat.height || this.defaultSize.height;
-    let r = s, m = e;
-    this.resizeSize.unit !== i ? (r = a, m = h) : i === o.AspectRatio && (r = Math.round(s / e * h), m = h), this.transformations = [
+    let r = s, y = e;
+    this.resizeSize.unit !== i ? (r = a, y = h) : i === o.AspectRatio && (r = Math.round(s / e * h), y = h), this.transformations = [
       ...this.transformations,
       {
         key: c.Resize,
         value: {
-          height: m,
+          height: y,
           unit: i,
           width: r
         }
@@ -1942,7 +1955,7 @@ p.dependencies = {
   "cx-asset-link-format-metadata": P,
   "cx-asset-link-format-proxy": C,
   "cx-asset-link-format-quality": A,
-  "cx-asset-link-format-resize": f,
+  "cx-asset-link-format-resize": v,
   "cx-asset-link-format-rotation": R,
   "cx-button": q,
   "cx-space": H,

package/library/components/drawer.js

@@ -5,23 +5,23 @@ import { c as z } from "../chunks/custom-element.L4WJXn1j.js";
 import { w as v } from "../chunks/event.mFzZi4sr.js";
 import { L as O } from "../chunks/i18n.CgwQHLcP.js";
 import { M as $ } from "../chunks/modal.U1QltQKe.js";
-import { l as m, u as w } from "../chunks/scroll.xtO5yojm.js";
+import { l as m, u } from "../chunks/scroll.xtO5yojm.js";
 import { H as B } from "../chunks/slot.j5oheLJC.js";
 import { w as _ } from "../chunks/watch.BCJD77bD.js";
 import { i as P, x as y } from "../chunks/lit-element.jLBm65_O.js";
 import { r as S } from "../chunks/state.CSDxrqLd.js";
-import { e as u } from "../chunks/query.BBf1UFkC.js";
+import { e as w } from "../chunks/query.BBf1UFkC.js";
 import { e as g } from "../chunks/class-map.BiVq-cVR.js";
 import { o as b } from "../chunks/if-defined.BRoBj_Rp.js";
 import { n as A } from "../chunks/when.Dr1es41R.js";
 import { c as x } from "../chunks/capitalize.CNStXZBq.js";
-import { s as i, g as c } from "../chunks/animation-registry.HmpwNuGH.js";
+import { s as r, g as c } from "../chunks/animation-registry.HmpwNuGH.js";
 import { C as q } from "../chunks/icon-button.BpwPU4Vg.js";
 const D = P`:host{--size:25rem;--header-spacing:var(--cx-spacing-large);--body-spacing:var(--cx-spacing-large);--footer-spacing:var(--cx-spacing-large);--font-family:var(--cx-font-sans);display:contents}.drawer{top:0;pointer-events:none;width:0;height:0;inset-inline-start:0;overflow:hidden}.drawer--open{width:100%;height:100%}.drawer--persistent.drawer--open{width:var(--size);min-width:var(--size)}.drawer--contained{z-index:initial;position:absolute}.drawer--persistent{position:relative}.drawer--fixed{z-index:var(--cx-z-index-drawer);position:fixed}.drawer__panel{z-index:2;background-color:var(--cx-panel-background-color);max-width:100%;max-height:100%;box-shadow:var(--cx-shadow-large);pointer-events:all;flex-direction:column;display:flex;position:absolute;overflow:auto}.drawer__panel:focus{outline:none}.drawer--top .drawer__panel{top:0;inset-inline-end:auto;bottom:auto;width:100%;height:var(--size);inset-inline-start:0}.drawer--end .drawer__panel{top:0;inset-inline-end:0;bottom:auto;width:var(--size);height:100%;inset-inline-start:auto}.drawer--bottom .drawer__panel{top:auto;inset-inline-end:auto;bottom:0;width:100%;height:var(--size);inset-inline-start:0}.drawer--start .drawer__panel{top:0;inset-inline-end:auto;bottom:auto;width:var(--size);height:100%;inset-inline-start:0}.drawer__header{gap:var(--cx-spacing-small);padding:var(--header-spacing);border-bottom:solid 1px var(--cx-input-border-color);font-family:var(--font-family);display:flex}.drawer__title{font:inherit;font-size:var(--cx-font-size-large);font-weight:var(--cx-font-weight-semibold);line-height:var(--cx-line-height-medium);flex:auto;align-items:center;margin:0;display:flex}.drawer__header-actions{justify-content:end;gap:var(--cx-spacing-2x-small);flex-wrap:wrap;flex-shrink:0;display:flex}.drawer__header-actions cx-icon-button,.drawer__header-actions ::slotted(cx-icon-button){font-size:var(--cx-font-size-medium);flex:none;align-items:center;display:flex}.drawer__body{padding:var(--body-spacing);-webkit-overflow-scrolling:touch;font-family:var(--font-family);flex:auto;display:block;overflow:auto}.drawer__footer{text-align:right;padding:var(--footer-spacing);font-family:var(--font-family)}.drawer__footer ::slotted(cx-button:not(:last-of-type)){margin-inline-end:var(--cx-spacing-x-small)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{background-color:var(--cx-overlay-background-color);pointer-events:all;display:block;position:fixed;inset:0}.drawer--contained .drawer__overlay{opacity:0;position:absolute}.drawer__overlay--disabled{display:none}@media (forced-colors:active){.drawer__panel{border:solid 1px var(--cx-color-neutral-0)}}`;
-var L = Object.defineProperty, E = Object.getOwnPropertyDescriptor, a = (e, o, r, l) => {
-  for (var s = l > 1 ? void 0 : l ? E(o, r) : o, h = e.length - 1, f; h >= 0; h--)
-    (f = e[h]) && (s = (l ? f(o, r, s) : f(s)) || s);
-  return l && s && L(o, r, s), s;
+var E = Object.defineProperty, L = Object.getOwnPropertyDescriptor, i = (e, a, o, l) => {
+  for (var s = l > 1 ? void 0 : l ? L(a, o) : a, h = e.length - 1, f; h >= 0; h--)
+    (f = e[h]) && (s = (l ? f(a, o, s) : f(s)) || s);
+  return l && s && E(a, o, s), s;
 };
 let t = class extends C {
   constructor() {
@@ -33,7 +33,7 @@ let t = class extends C {
     this.drawer.hidden = !this.open, this.open && (this.addOpenListeners(), this.contained || (this.modal.activate(), m(this)));
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), w(this), this.removeOpenListeners();
+    super.disconnectedCallback(), u(this), this.removeOpenListeners();
   }
   willUpdate(e) {
     if (super.willUpdate(e), !e.has("open"))
@@ -45,10 +45,10 @@ let t = class extends C {
       cancelable: !0,
       detail: { source: e }
     }).defaultPrevented) {
-      const r = c(this, "drawer.denyClose", {
+      const o = c(this, "drawer.denyClose", {
         dir: this.localize.dir()
       });
-      d(this.panel, r.keyframes, r.options);
+      d(this.panel, o.keyframes, o.options);
       return;
     }
     this.hide();
@@ -59,6 +59,11 @@ let t = class extends C {
   removeOpenListeners() {
     document.removeEventListener("keydown", this.handleDocumentKeyDown), this.closeWatcher?.destroy();
   }
+  resetMultipleMenus() {
+    [...this.querySelectorAll("cx-menu")].forEach((a) => {
+      a.variant === "multiple" && a.resetActiveMenu();
+    });
+  }
   async handleOpenChange() {
     if (this.open) {
       this.emit("cx-show"), this.addOpenListeners(), this.originalTrigger = document.activeElement, this.contained || (this.modal.activate(), m(this));
@@ -73,25 +78,25 @@ let t = class extends C {
           preventScroll: !0
         }) : this.panel.focus({ preventScroll: !0 })), e && e.setAttribute("autofocus", "");
       });
-      const o = c(
+      const a = c(
         this,
         `drawer.show${x(this.placement)}`,
         {
           dir: this.localize.dir()
         }
-      ), r = c(this, "drawer.overlay.show", {
+      ), o = c(this, "drawer.overlay.show", {
         dir: this.localize.dir()
       });
       await Promise.all([
-        d(this.panel, o.keyframes, o.options),
+        d(this.panel, a.keyframes, a.options),
         this.contained ? Promise.resolve() : d(
           this.overlay,
-          r.keyframes,
-          r.options
+          o.keyframes,
+          o.options
         )
       ]), this.emit("cx-after-show");
     } else {
-      this.emit("cx-hide"), this.removeOpenListeners(), this.contained || (this.modal.deactivate(), w(this)), await Promise.all([
+      this.emit("cx-hide"), this.removeOpenListeners(), this.contained || (this.modal.deactivate(), u(this)), await Promise.all([
         p(this.drawer),
         p(this.overlay)
       ]);
@@ -101,14 +106,14 @@ let t = class extends C {
         {
           dir: this.localize.dir()
         }
-      ), o = c(this, "drawer.overlay.hide", {
+      ), a = c(this, "drawer.overlay.hide", {
         dir: this.localize.dir()
       });
       await Promise.all([
         (this.contained ? Promise.resolve() : d(
           this.overlay,
-          o.keyframes,
-          o.options
+          a.keyframes,
+          a.options
         )).then(() => {
           this.overlay.hidden = !0;
         }),
@@ -120,12 +125,12 @@ let t = class extends C {
           this.panel.hidden = !0;
         })
       ]), this.drawer.hidden = !0, this.isClosing = !1, this.overlay.hidden = !1, this.panel.hidden = !1;
-      const r = this.originalTrigger;
-      typeof r?.focus == "function" && setTimeout(() => r.focus()), this.emit("cx-after-hide");
+      const o = this.originalTrigger;
+      typeof o?.focus == "function" && setTimeout(() => o.focus()), this.resetMultipleMenus(), this.emit("cx-after-hide");
     }
   }
   handleNoModalChange() {
-    this.open && !this.contained && (this.modal.activate(), m(this)), this.open && this.contained && (this.modal.deactivate(), w(this));
+    this.open && !this.contained && (this.modal.activate(), m(this)), this.open && this.contained && (this.modal.deactivate(), u(this));
   }
   /** Shows the drawer. */
   async show() {
@@ -168,63 +173,63 @@ let t = class extends C {
 };
 t.styles = [k, D];
 t.dependencies = { "cx-icon-button": q };
-a([
-  u(".drawer")
+i([
+  w(".drawer")
 ], t.prototype, "drawer", 2);
-a([
-  u(".drawer__panel")
+i([
+  w(".drawer__panel")
 ], t.prototype, "panel", 2);
-a([
-  u(".drawer__overlay")
+i([
+  w(".drawer__overlay")
 ], t.prototype, "overlay", 2);
-a([
+i([
   S()
 ], t.prototype, "isClosing", 2);
-a([
+i([
   n({ reflect: !0, type: Boolean })
 ], t.prototype, "open", 2);
-a([
+i([
   n({ reflect: !0 })
 ], t.prototype, "label", 2);
-a([
+i([
   n({ reflect: !0 })
 ], t.prototype, "placement", 2);
-a([
+i([
   n({ reflect: !0, type: Boolean })
 ], t.prototype, "contained", 2);
-a([
+i([
   n({ attribute: "no-header", reflect: !0, type: Boolean })
 ], t.prototype, "noHeader", 2);
-a([
+i([
   n({ reflect: !0, type: String })
 ], t.prototype, "variant", 2);
-a([
+i([
   n({ attribute: "no-close-button", reflect: !0, type: Boolean })
 ], t.prototype, "noCloseButton", 2);
-a([
+i([
   _("open", { waitUntilFirstUpdate: !0 })
 ], t.prototype, "handleOpenChange", 1);
-a([
+i([
   _("contained", { waitUntilFirstUpdate: !0 })
 ], t.prototype, "handleNoModalChange", 1);
-t = a([
+t = i([
   z("cx-drawer")
 ], t);
-i("drawer.showTop", {
+r("drawer.showTop", {
   keyframes: [
     { opacity: 0, translate: "0 -100%" },
     { opacity: 1, translate: "0 0" }
   ],
   options: { duration: 250, easing: "ease" }
 });
-i("drawer.hideTop", {
+r("drawer.hideTop", {
   keyframes: [
     { opacity: 1, translate: "0 0" },
     { opacity: 0, translate: "0 -100%" }
   ],
   options: { duration: 250, easing: "ease" }
 });
-i("drawer.showEnd", {
+r("drawer.showEnd", {
   keyframes: [
     { opacity: 0, translate: "100%" },
     { opacity: 1, translate: "0" }
@@ -235,7 +240,7 @@ i("drawer.showEnd", {
     { opacity: 1, translate: "0" }
   ]
 });
-i("drawer.hideEnd", {
+r("drawer.hideEnd", {
   keyframes: [
     { opacity: 1, translate: "0" },
     { opacity: 0, translate: "100%" }
@@ -246,21 +251,21 @@ i("drawer.hideEnd", {
     { opacity: 0, translate: "-100%" }
   ]
 });
-i("drawer.showBottom", {
+r("drawer.showBottom", {
   keyframes: [
     { opacity: 0, translate: "0 100%" },
     { opacity: 1, translate: "0 0" }
   ],
   options: { duration: 250, easing: "ease" }
 });
-i("drawer.hideBottom", {
+r("drawer.hideBottom", {
   keyframes: [
     { opacity: 1, translate: "0 0" },
     { opacity: 0, translate: "0 100%" }
   ],
   options: { duration: 250, easing: "ease" }
 });
-i("drawer.showStart", {
+r("drawer.showStart", {
   keyframes: [
     { opacity: 0, translate: "-100%" },
     { opacity: 1, translate: "0" }
@@ -271,7 +276,7 @@ i("drawer.showStart", {
     { opacity: 1, translate: "0" }
   ]
 });
-i("drawer.hideStart", {
+r("drawer.hideStart", {
   keyframes: [
     { opacity: 1, translate: "0" },
     { opacity: 0, translate: "-100%" }
@@ -282,15 +287,15 @@ i("drawer.hideStart", {
     { opacity: 0, translate: "100%" }
   ]
 });
-i("drawer.denyClose", {
+r("drawer.denyClose", {
   keyframes: [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }],
   options: { duration: 250 }
 });
-i("drawer.overlay.show", {
+r("drawer.overlay.show", {
   keyframes: [{ opacity: 0 }, { opacity: 1 }],
   options: { duration: 250 }
 });
-i("drawer.overlay.hide", {
+r("drawer.overlay.hide", {
   keyframes: [{ opacity: 1 }, { opacity: 0 }],
   options: { duration: 250 }
 });

package/library/components/menu.js

@@ -1,24 +1,25 @@
-import { n as c, C as f } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as p } from "../chunks/component.styles.CRO4Odto.js";
-import { c as b } from "../chunks/custom-element.L4WJXn1j.js";
-import { L as g } from "../chunks/i18n.CgwQHLcP.js";
-import { i as v, x as d } from "../chunks/lit-element.jLBm65_O.js";
-import { r as y } from "../chunks/state.CSDxrqLd.js";
-import { e as w } from "../chunks/query.BBf1UFkC.js";
-import { n as x } from "../chunks/when.Dr1es41R.js";
-import M from "./menu-item.js";
-const k = v`:host{background:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-radius:var(--cx-border-radius-large);padding:var(--cx-spacing-x-small) 0;--divider-color:var(--cx-panel-border-color);--divider-width:var(--cx-panel-border-width);--divider-spacing:var(--cx-spacing-x-small);display:block;position:relative;overflow:auto}:host([horizontal]){padding:0 var(--cx-spacing-x-small);flex-wrap:wrap;justify-content:space-between;display:flex}::slotted(cx-divider){--color:var(--divider-color);--width:var(--divider-width);--spacing:var(--divider-spacing)}::slotted([data-alternating-grouping]):before{content:" ";background-color:var(--divider-color);margin:var(--divider-spacing) 0;height:var(--divider-width);display:block}::slotted([data-alternating-grouping=horizontal]):before{height:100%;margin:0 var(--divider-spacing);width:var(--divider-width);display:inline-block}:host([horizontal]) ::slotted(cx-menu-section){flex-wrap:wrap;justify-content:space-between;display:flex}:host([horizontal]) ::slotted(cx-menu-item){display:flex}:host([variant=multiple]){position:relative;overflow:hidden}:host([variant=multiple]) ::slotted(cx-menu[name]){opacity:0;pointer-events:none;transition:opacity var(--cx-transition-fast) ease-in-out, transform var(--cx-transition-medium) ease-in-out;border:none;position:absolute;top:0;left:0;transform:translate(-50%)}:host([variant=multiple]) ::slotted(cx-menu[active]){opacity:1;pointer-events:auto;transform:translate(0)}.back__button::part(checked-icon),.back__button::part(submenu-icon){display:none}.back__divider{--spacing:var(--cx-spacing-x-small)}`;
-var A = Object.defineProperty, I = Object.getOwnPropertyDescriptor, u = (e, t, r, i) => {
-  for (var o = i > 1 ? void 0 : i ? I(t, r) : t, h = e.length - 1, n; h >= 0; h--)
+import { n as c, C as p } from "../chunks/lib-cortex-element.CVMmyPMC.js";
+import { c as b } from "../chunks/component.styles.CRO4Odto.js";
+import { c as g } from "../chunks/custom-element.L4WJXn1j.js";
+import { L as v } from "../chunks/i18n.CgwQHLcP.js";
+import { i as y, x as f } from "../chunks/lit-element.jLBm65_O.js";
+import { r as w } from "../chunks/state.CSDxrqLd.js";
+import { e as x } from "../chunks/query.BBf1UFkC.js";
+import { n as M } from "../chunks/when.Dr1es41R.js";
+import k from "./menu-item.js";
+var d = /* @__PURE__ */ ((e) => (e.Default = "default", e.Multiple = "multiple", e))(d || {});
+const A = y`:host{background:var(--cx-panel-background-color);border:solid var(--cx-panel-border-width) var(--cx-panel-border-color);border-radius:var(--cx-border-radius-large);padding:var(--cx-spacing-x-small) 0;--divider-color:var(--cx-panel-border-color);--divider-width:var(--cx-panel-border-width);--divider-spacing:var(--cx-spacing-x-small);display:block;position:relative;overflow:auto}:host([horizontal]){padding:0 var(--cx-spacing-x-small);flex-wrap:wrap;justify-content:space-between;display:flex}::slotted(cx-divider){--color:var(--divider-color);--width:var(--divider-width);--spacing:var(--divider-spacing)}::slotted([data-alternating-grouping]):before{content:" ";background-color:var(--divider-color);margin:var(--divider-spacing) 0;height:var(--divider-width);display:block}::slotted([data-alternating-grouping=horizontal]):before{height:100%;margin:0 var(--divider-spacing);width:var(--divider-width);display:inline-block}:host([horizontal]) ::slotted(cx-menu-section){flex-wrap:wrap;justify-content:space-between;display:flex}:host([horizontal]) ::slotted(cx-menu-item){display:flex}:host([variant=multiple]){position:relative;overflow:hidden}:host([variant=multiple]) ::slotted(cx-menu[name]){opacity:0;pointer-events:none;transition:opacity var(--cx-transition-fast) ease-in-out, transform var(--cx-transition-medium) ease-in-out;border:none;top:0;left:0;transform:translate(-50%);position:absolute!important}:host([variant=multiple]) ::slotted(cx-menu[active]){opacity:1;pointer-events:auto;transform:translate(0)}.back__button::part(checked-icon),.back__button::part(submenu-icon){display:none}.back__divider{--spacing:var(--cx-spacing-x-small)}`;
+var I = Object.defineProperty, C = Object.getOwnPropertyDescriptor, u = (e, t, r, i) => {
+  for (var o = i > 1 ? void 0 : i ? C(t, r) : t, h = e.length - 1, n; h >= 0; h--)
     (n = e[h]) && (o = (i ? n(t, r, o) : n(o)) || o);
-  return i && o && A(t, r, o), o;
+  return i && o && I(t, r, o), o;
 };
 function m(e) {
   return e.tagName.toLowerCase() === "cx-menu" && e instanceof l && e.getAttribute("role") === "menu";
 }
-let l = class extends f {
+let l = class extends p {
   constructor() {
-    super(...arguments), this.localize = new g(this), this.horizontal = !1, this.variant = "default", this.active = !1, this.name = "", this.back = "", this.default = !1, this.bubbleKeyDown = !1, this.ignoredKeys = [], this.disabledTabLoop = !1, this.resizeObserver = null, this.slotMutationObserver = null;
+    super(...arguments), this.localize = new v(this), this.horizontal = !1, this.variant = d.Default, this.active = !1, this.name = "", this.back = "", this.default = !1, this.bubbleKeyDown = !1, this.ignoredKeys = [], this.disabledTabLoop = !1, this.resizeObserver = null, this.slotMutationObserver = null;
   }
   connectedCallback() {
     super.connectedCallback(), this.setAttribute("role", "menu"), this.slotMutationObserver = new MutationObserver(() => this.handleSlotChange()), this.slotMutationObserver.observe(this, {
@@ -31,7 +32,7 @@ let l = class extends f {
     super.disconnectedCallback(), this.resizeObserver && (this.resizeObserver.disconnect(), this.resizeObserver = null), this.slotMutationObserver && (this.slotMutationObserver.disconnect(), this.slotMutationObserver = null);
   }
   runFirstUpdated() {
-    if (this.variant === "multiple") {
+    if (this.variant === d.Multiple) {
       const e = this.getAllSubMenus();
       this.setActiveMenu(e[0]?.name ?? ""), this.updateComplete.then(() => {
         this.adjustMenuSize();
@@ -72,7 +73,7 @@ let l = class extends f {
       ].includes(e.key)) {
         const t = this.getAllItems(), r = this.getCurrentItem();
         let i = r ? t.indexOf(r) : 0;
-        if (["ArrowLeft", "ArrowRight"].includes(e.key) && !this.bubbleKeyDown && !(this.parentElement instanceof l) && !(this.parentElement instanceof M) && e.stopPropagation(), t.length > 0) {
+        if (["ArrowLeft", "ArrowRight"].includes(e.key) && !this.bubbleKeyDown && !(this.parentElement instanceof l) && !(this.parentElement instanceof k) && e.stopPropagation(), t.length > 0) {
           const o = this.horizontal ? e.key === "ArrowRight" || i === t.length - 1 && e.key === "ArrowDown" : e.key === "ArrowDown", h = this.horizontal ? e.key === "ArrowLeft" || i === 0 && e.key === "ArrowUp" : e.key === "ArrowUp";
           if (["ArrowRight", "ArrowDown", "ArrowLeft", "ArrowUp"].includes(
             e.key
@@ -265,16 +266,16 @@ let l = class extends f {
     });
   }
   render() {
-    const e = x(
+    const e = M(
       this.back,
-      () => d`<slot name="back-button" role="menuitem" menu=${this.back}><cx-menu-item part="back-button" class="back__button" menu=${this.back}><cx-icon slot="prefix" name="chevron_left"></cx-icon>${this.localize.term("back")}</cx-menu-item><cx-divider class="back__divider"></cx-divider></slot>`
+      () => f`<slot name="back-button" role="menuitem" menu=${this.back}><cx-menu-item part="back-button" class="back__button" menu=${this.back}><cx-icon slot="prefix" name="chevron_left"></cx-icon>${this.localize.term("back")}</cx-menu-item><cx-divider class="back__divider"></cx-divider></slot>`
     );
-    return this.variant === "multiple" ? d`${e}<slot @slotchange=${this.handleSlotChange} @click=${this.handleClick} @keydown=${this.handleKeyDown} @mousedown=${this.handleMouseDown}></slot>` : d`${e}<slot @slotchange=${this.handleSlotChange} @click=${this.handleClick} @keydown=${this.handleKeyDown} @mousedown=${this.handleMouseDown}></slot>`;
+    return this.variant === d.Multiple ? f`${e}<slot @slotchange=${this.handleSlotChange} @click=${this.handleClick} @keydown=${this.handleKeyDown} @mousedown=${this.handleMouseDown}></slot>` : f`${e}<slot @slotchange=${this.handleSlotChange} @click=${this.handleClick} @keydown=${this.handleKeyDown} @mousedown=${this.handleMouseDown}></slot>`;
   }
 };
-l.styles = [p, k];
+l.styles = [b, A];
 u([
-  w("slot")
+  x("slot")
 ], l.prototype, "defaultSlot", 2);
 u([
   c({ type: Boolean })
@@ -311,10 +312,10 @@ u([
   c({ attribute: "disabled-tab-loop", reflect: !0, type: Boolean })
 ], l.prototype, "disabledTabLoop", 2);
 u([
-  y()
+  w()
 ], l.prototype, "resizeObserver", 2);
 l = u([
-  b("cx-menu")
+  g("cx-menu")
 ], l);
 export {
   l as default

package/library/package.json

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

package/library/packages/atoms/src/components/drawer/drawer.d.ts

@@ -109,6 +109,7 @@ export default class CxDrawer extends CortexElement {
     private requestClose;
     private addOpenListeners;
     private removeOpenListeners;
+    private resetMultipleMenus;
     private handleDocumentKeyDown;
     handleOpenChange(): Promise<void>;
     handleNoModalChange(): void;

package/library/packages/atoms/src/components/menu/menu.d.ts

@@ -1,4 +1,5 @@
 import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { MenuMode } from '../../../../types/src/menu';
 import { CSSResultGroup } from 'lit';
 import { default as CxMenuItem } from '../menu-item/menu-item';
 
@@ -23,7 +24,7 @@ export default class CxMenu extends CortexElement {
     defaultSlot: HTMLSlotElement;
     horizontal: boolean;
     /** The menu's variant */
-    variant: 'default' | 'multiple';
+    variant: MenuMode.Default | MenuMode.Multiple;
     /** Whether the menu is currently active, used for 'multiple' variant */
     active: boolean;
     /** The name of the menu, used for 'multiple' variant */

package/library/packages/types/src/menu.d.ts

@@ -0,0 +1,4 @@
+export declare enum MenuMode {
+    Default = "default",
+    Multiple = "multiple"
+}

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

@@ -5004,7 +5004,7 @@
         /**
           * The selection behavior of the tree. Single selection allows only one node to be selected at a time. Multiple displays checkboxes and allows more than one node to be selected. Leaf allows only leaf nodes to be selected.
         */
-        selection?: 'multiple' | 'single' | 'leaf';
+        selection?: 'single' | 'multiple' | 'leaf';
         /**
           * Whether to automatically expand after loading finishes.
         */
@@ -6016,7 +6016,7 @@
         /**
           * 
         */
-        selection?: 'multiple' | 'single';
+        selection?: 'single' | 'multiple';
         /**
           * 
         */

package/package.json

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