@orangelogic/design-system 3.28.0 → 3.30.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.BqhrUjS6.js";
+import { C as xe } from "../chunks/document-viewer.Bqh3JppM.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.DAbpXfEy.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";
@@ -75,7 +75,7 @@ import { default as Xo } from "./step.js";
 import { default as Zo } from "./stepper.js";
 import { default as et } from "./switch.js";
 import { default as tt } from "./tab.js";
-import { C as at } from "../chunks/tab-group.D-nBq01A.js";
+import { C as at } from "../chunks/tab-group.Ct15ygJ3.js";
 import { default as ft } from "./tab-panel.js";
 import { default as st } from "./tag.js";
 import { default as pt } from "./textarea.js";

package/library/components/audio.js

@@ -1,4 +1,4 @@
-import { r as f, R as y } from "../chunks/resizable-component.styles.kMFDlGgv.js";
+import { r as f, R as y } from "../chunks/resizable-component.styles.CxjaYhiB.js";
 import { c as v } from "../chunks/component.styles.CAS3c9pM.js";
 import { U as m, g as w, f as g, D as x } from "../chunks/time.DYWuX2id.js";
 import { c as P } from "../chunks/custom-element.L4WJXn1j.js";

package/library/components/color-picker.js

@@ -27,7 +27,7 @@ import { C as st } from "../chunks/option.D3Xzrd7-.js";
 import lt from "./select.js";
 import nt from "./spinner.js";
 import ct from "./tab.js";
-import { C as pt } from "../chunks/tab-group.D-nBq01A.js";
+import { C as pt } from "../chunks/tab-group.Ct15ygJ3.js";
 import dt from "./tab-panel.js";
 import ht from "./visually-hidden.js";
 import { C as ut } from "../chunks/icon-button.BXs29IQE.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.CF0h4nhA.js";
+import { C as w } from "../chunks/color-swatch-group.lBTDUt_i.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

@@ -8,17 +8,17 @@ import { c as S } from "../chunks/component.styles.CAS3c9pM.js";
 import { C as m, a as C, b as z, c as O, d as h, e as l, H as A, l as W, f as R, g as x } from "../chunks/color.CIHdfM_a.js";
 import { c as U } from "../chunks/custom-element.L4WJXn1j.js";
 import { d as V } from "../chunks/debounce.DaHuiSGU.js";
-import { L as E } from "../chunks/i18n.D5L6xAYT.js";
+import { L as j } from "../chunks/i18n.D5L6xAYT.js";
 import { w as s } from "../chunks/watch.DJF5K-8U.js";
-import { i as G, x as g } from "../chunks/lit-element.jLBm65_O.js";
+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 H } from "../chunks/query.BBf1UFkC.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 { c as j } from "../chunks/repeat.CFjcER6_.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 = G`: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__content,.color-swatch--oval>.color-swatch__content{align-self:stretch;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: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}`;
 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);
@@ -26,7 +26,7 @@ var L = Object.defineProperty, D = Object.getOwnPropertyDescriptor, e = (r, i, o
 };
 let t = class extends $ {
   constructor() {
-    super(...arguments), this.localize = new E(this), this.ignoreWatchColorChange = /* @__PURE__ */ new Set(), this.variant = m.Circle, this.name = "", this.hex = "", this.rgb = "", this.cmyk = "", this.pms = "", this.canCopy = !1, this.showCodes = ["HEX", "RGB", "CMYK", "PMS"], this.canFocusCodeOnly = !1, this.noAutoConvert = !1, this.codeAlignment = C.SameLine, this.codeSeparator = z.Comma, this.hexFormat = O.LeadingHash, this.gradientStops = "", this.textColor = "#27272A", this.textVariant = "body2", this.lineClamp = 3, this.backgroundColor = "#F9F9F9", this.canFocusContainer = !0, this.isContainerFocused = !1;
+    super(...arguments), this.localize = new j(this), this.ignoreWatchColorChange = /* @__PURE__ */ new Set(), this.variant = m.Circle, this.name = "", this.hex = "", this.rgb = "", this.cmyk = "", this.pms = "", this.canCopy = !1, this.showCodes = ["HEX", "RGB", "CMYK", "PMS"], this.canFocusCodeOnly = !1, this.noAutoConvert = !1, this.codeAlignment = C.SameLine, this.codeSeparator = z.Comma, this.hexFormat = O.LeadingHash, this.gradientStops = "", this.textColor = "#27272A", this.textVariant = "body2", this.lineClamp = 3, this.backgroundColor = "#F9F9F9", this.canFocusContainer = !0, this.isContainerFocused = !1;
   }
   runFirstUpdated() {
     this.handleColorChange();
@@ -114,7 +114,7 @@ let t = class extends $ {
       ...this.gradientImage ? { backgroundImage: this.gradientImage } : {}
     })} @focusin=${this.handleFocusIn} @focusout=${this.handleFocusOut}><cx-space part="content" direction="vertical" class="color-swatch__content"><cx-typography variant="h5" part="name" class="color-swatch__name" style=${p({
       "--color": this.textColor
-    })}>${this.name}</cx-typography><cx-space direction="vertical" spacing=${this.rowGap} part="content">${j(
+    })}>${this.name}</cx-typography><cx-space direction="vertical" spacing=${this.rowGap} part="content">${H(
       r,
       (o) => o.key,
       (o) => g`<cx-space direction=${i} align-items=${i === "vertical" ? "flex-start" : "center"} spacing=${i === "vertical" ? "3x-small" : "small"} part="item" wrap="nowrap"><cx-typography variant=${this.textVariant} class="color-swatch__key" part="key" style=${p({
@@ -146,7 +146,7 @@ t.dependencies = {
   "cx-typography": F
 };
 e([
-  H(".color-swatch")
+  G(".color-swatch")
 ], t.prototype, "containerEl", 2);
 e([
   a({ reflect: !0, type: String })

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.BqhrUjS6.js";
+import "../chunks/resizable-component.styles.CxjaYhiB.js";
+import { C as b } from "../chunks/document-viewer.Bqh3JppM.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.DAbpXfEy.js";
 import "../chunks/typography.BLYdTF0n.js";
 export {
   b as default

package/library/components/file-on-demand.js

@@ -27,7 +27,7 @@ import yt from "./relative-time.js";
 import Ft from "./select.js";
 import Rt from "./space.js";
 import kt from "./tab.js";
-import { C as Ot } from "../chunks/tab-group.D-nBq01A.js";
+import { C as Ot } from "../chunks/tab-group.Ct15ygJ3.js";
 import Nt from "./tab-panel.js";
 import bt from "./tooltip.js";
 import { C as rt } from "../chunks/typography.BLYdTF0n.js";

package/library/components/image.js

@@ -1,7 +1,7 @@
-import "../chunks/resizable-component.styles.kMFDlGgv.js";
+import "../chunks/resizable-component.styles.CxjaYhiB.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.DAbpXfEy.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.DAbpXfEy.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.CekdzXsS.js";
-import { C as t } from "../chunks/color-swatch-group.CF0h4nhA.js";
+import { C as t } from "../chunks/color-swatch-group.lBTDUt_i.js";
 import { default as C } from "./file-on-demand.js";
 export {
   a as CxAssetLinkFormat,

package/library/components/tab-group.js

@@ -1,7 +1,7 @@
 import "./resize-observer.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CAS3c9pM.js";
-import { C as A } from "../chunks/tab-group.D-nBq01A.js";
+import { C as A } from "../chunks/tab-group.Ct15ygJ3.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.D5L6xAYT.js";
 import "../chunks/scroll.xtO5yojm.js";

package/library/components/types.js

@@ -11,7 +11,7 @@ import { default as S } from "./breadcrumb.js";
 import { default as D } from "./breadcrumb-item.js";
 import { C as y } from "../chunks/button.CUeXJXcO.js";
 import { default as P } from "./button-group.js";
-import { default as E } from "./card.js";
+import { default as h } from "./card.js";
 import { default as L } from "./checkbox.js";
 import { default as v } from "./color-picker.js";
 import { default as V } from "./copy-button.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.BqhrUjS6.js";
+import { C as K } from "../chunks/document-viewer.Bqh3JppM.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 ya } from "../chunks/icon-button.BXs29IQE.js";
 import { C as Pa } from "../chunks/iframe.e5XdCox5.js";
-import { C as Ea } from "../chunks/image.CjdSn_IT.js";
+import { C as ha } from "../chunks/image.DAbpXfEy.js";
 import { default as La } from "./image-comparer.js";
 import { default as va } from "./include.js";
 import { C as Va } from "../chunks/input.zRoRq5mq.js";
@@ -65,7 +65,7 @@ import { default as Se } from "./rating.js";
 import { default as De } from "./relative-time.js";
 import { default as ye } from "./resize-observer.js";
 import { default as Pe } from "./select.js";
-import { default as Ee } from "./skeleton.js";
+import { default as he } from "./skeleton.js";
 import { default as Le } from "./space.js";
 import { default as ve } from "./spinner.js";
 import { default as Ve } from "./split-panel.js";
@@ -73,7 +73,7 @@ import { default as _e } from "./step.js";
 import { default as ke } from "./stepper.js";
 import { default as Ne } from "./switch.js";
 import { default as Ue } from "./tab.js";
-import { C as Xe } from "../chunks/tab-group.D-nBq01A.js";
+import { C as Xe } from "../chunks/tab-group.Ct15ygJ3.js";
 import { default as Ke } from "./tab-panel.js";
 import { default as qe } from "./tag.js";
 import { default as Je } from "./textarea.js";
@@ -86,15 +86,15 @@ 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 yt, o as Ft, n as Pt, m as ht, Y as Et, Z as Rt, _ as Lt, a0 as Ot, $ 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.DapQA7MU.js";
+import { u as It, v as Dt, V as bt, w as yt, o as Ft, n as Pt, m as Et, Y as ht, Z as Rt, _ as Lt, a0 as Ot, $ 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.LleN6Ydu.js";
 import { default as bo } from "./bicolor-picker.js";
 import { default as Fo } from "./border-input-group.js";
-import { default as ho } from "./color-swatch.js";
+import { default as Eo } from "./color-swatch.js";
 import { C as Ro } from "../chunks/confirm-popover.CeKZ8dF1.js";
 import { default as Oo } 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, h as ko, i as wo } from "../chunks/color-swatch-group.CF0h4nhA.js";
+import { C as Go, i as ko, j as wo } from "../chunks/color-swatch-group.lBTDUt_i.js";
 import { C as Ho } from "../chunks/folder-select.DZZTtdAO.js";
 import { default as zo } from "./masonry.js";
 import { default as Wo } from "./padding-input-group.js";
@@ -108,10 +108,10 @@ import { default as sr } from "./typeface.js";
 import { C as ir } from "../chunks/asset-link-format.CekdzXsS.js";
 import { default as mr } from "./file-on-demand.js";
 import { C as pr, E as fr, b as Cr, G as dr, a as ur, O as cr, T as gr } from "../chunks/index.Cpamj0jB.js";
-import { CortexPopupController as Ar, DateRangePresets as Sr, DragScroll as Ir, HistoryManager as Dr, KeyboardKey as br, PRECISION as yr, downloadAsset as Fr, extractFrames as Pr, findFrameByColAndRow as hr, getBrowserFontVariants as Er, getFontFamilyOptionValue as Rr, getFontFamilyVariants as Lr, getFormControls as Or, getInterval as vr, getTypefaceOptionValue as Br, insertFrameToCache as Vr, isFontFamilyAvailable as Mr, isFormInteracted as _r, isModKey as Gr, isoWeekNumber as kr, omit as wr, openAssetOverview as Nr, openFolderOverview as Hr, openLink as Ur, parseJsonString as zr, parseListString as Xr, pick as Wr, quoteFontFamily as Kr, readLocalStorageValue as jr, serialize as qr, shareAsset as Yr, sortTypefaceVariants as Jr, testFontAvailability as Qr, unquoteFontFamily as Zr, writeLocalStorageValue as $r } from "../utils.js";
+import { CortexPopupController as Ar, DateRangePresets as Sr, DragScroll as Ir, HistoryManager as Dr, KeyboardKey as br, PRECISION as yr, downloadAsset as Fr, extractFrames as Pr, findFrameByColAndRow as Er, getBrowserFontVariants as hr, getFontFamilyOptionValue as Rr, getFontFamilyVariants as Lr, getFormControls as Or, getInterval as vr, getTypefaceOptionValue as Br, insertFrameToCache as Vr, isFontFamilyAvailable as Mr, isFormInteracted as _r, isModKey as Gr, isoWeekNumber as kr, omit as wr, openAssetOverview as Nr, openFolderOverview as Hr, openLink as Ur, parseJsonString as zr, parseListString as Xr, pick as Wr, quoteFontFamily as Kr, readLocalStorageValue as jr, serialize as qr, shareAsset as Yr, sortTypefaceVariants as Jr, testFontAvailability as Qr, unquoteFontFamily as Zr, writeLocalStorageValue as $r } from "../utils.js";
 import { e as es, f as ts, g as os, c as rs, i as ss, a as xs, d as is, m as ls, b as ms, r as ns, t as ps } from "../chunks/toast.D3AW3RWv.js";
 import { e as Cs, a as ds, f as us, g as cs, d as gs, b as Ts, c as As, i as Ss, p as Is, s as Ds } from "../chunks/browser.BHOCIF_A.js";
-import { k as ys, e as Fs, m as Ps, H as hs, R as Es, d as Rs, o as Ls, g as Os, f as vs, n as Bs, h as Vs, l as Ms, i as _s, p as Gs, j as ks } from "../chunks/color.CIHdfM_a.js";
+import { k as ys, e as Fs, m as Ps, H as Es, R as hs, d as Rs, o as Ls, g as Os, f as vs, n as Bs, h as Vs, l as Ms, i as _s, p as Gs, j as ks } from "../chunks/color.CIHdfM_a.js";
 import { a as Ns, g as Hs } from "../chunks/active-elements.jTVWtBDp.js";
 import { a as zs, p as Xs, c as Ws, b as Ks, s as js, w as qs } from "../chunks/event.BeKOsirN.js";
 import { t as Js } from "../chunks/converters.DkDtLstb.js";
@@ -125,21 +125,21 @@ import { L as ux, r as cx } from "../chunks/i18n.D5L6xAYT.js";
 import { c as Tx, q as Ax } from "../chunks/math.DuKzLacZ.js";
 import { g as Ix } from "../chunks/modal.Ct0bJBSe.js";
 import { g as bx, l as yx, s as Fx, u as Px } from "../chunks/scroll.xtO5yojm.js";
-import { H as Ex, a as Rx, g as Lx } from "../chunks/slot.j5oheLJC.js";
+import { H as hx, a as Rx, g as Lx } from "../chunks/slot.j5oheLJC.js";
 import { a as vx, g as Bx } from "../chunks/tabbable.BwnZBHrm.js";
 import { i as Mx } from "../chunks/user-agent.D9aPuOyL.js";
 import { w as Gx } from "../chunks/watch.DJF5K-8U.js";
 import { C as wx } from "../chunks/calendar-grid.BWjcZL5W.js";
 import { b as Hx, c as Ux, f as zx, h as Xx, g as Wx, a as Kx, i as jx, d as qx, n as Yx, e as Jx, p as Qx, t as Zx } from "../chunks/date.iWq_pkIk.js";
 import { c as ai, d as ei, h as ti, m as oi, k as ri, a as si, g as xi, j as ii, b as li, f as mi, i as ni, e as pi, l as fi, r as Ci, s as di } from "../chunks/dom.D0lSUoEI.js";
-import { i as ci, A as gi, j as Ti, S as Ai, a as Si, g as Ii, b as Di, e as bi, d as yi, f as Fi, h as Pi, k as hi, p as Ei, r as Ri, c as Li } from "../chunks/transformation.BwQ_H-4q.js";
+import { i as ci, A as gi, j as Ti, S as Ai, a as Si, g as Ii, b as Di, e as bi, d as yi, f as Fi, h as Pi, k as Ei, p as hi, r as Ri, c as Li } from "../chunks/transformation.BwQ_H-4q.js";
 import { M as vi, c as Bi, e as Vi, i as Mi, n as _i, p as Gi, b as ki, s as wi, d as Ni } from "../chunks/gradient.CIzq8fOU.js";
 import { c as Ui, f as zi, e as Xi, b as Wi, g as Ki, d as ji, i as qi, r as Yi, a as Ji } from "../chunks/image.Y5c_hFx8.js";
 import { b as Zi, e as $i } from "../chunks/waveform.1U9U_0rd.js";
 import { c as el, b as tl, a as ol, e as rl, d as sl, f as xl, g as il, r as ll, s as ml } from "../chunks/number.Cx2ncfJJ.js";
 import { s as pl } from "../chunks/parse.Cu5nBDTb.js";
 import { D as Cl, g as dl, a as ul } from "../chunks/responsive.DqF_v1XY.js";
-import { b as gl, n as Tl, d as Al, e as Sl, f as Il, y as Dl, o as bl, g as yl, h as Fl, l as Pl, p as hl, z as El, x as Rl, a as Ll, c as Ol, s as vl, w as Bl, r as Vl, t as Ml, q as _l, v as Gl, i as kl, m as wl, u as Nl } from "../chunks/string.CfI2ejyR.js";
+import { b as gl, n as Tl, d as Al, e as Sl, f as Il, y as Dl, o as bl, g as yl, h as Fl, l as Pl, p as El, z as hl, x as Rl, a as Ll, c as Ol, s as vl, w as Bl, r as Vl, t as Ml, q as _l, v as Gl, i as kl, m as wl, u as Nl } from "../chunks/string.CfI2ejyR.js";
 import { g as Ul, a as zl } from "../chunks/template.ClovJacp.js";
 import { c as Wl, f as Kl, a as jl, g as ql } from "../chunks/time.DYWuX2id.js";
 import { R as Jl, f as Ql, g as Zl, h as $l, U as am, b as em, a as tm, d as om, c as rm, i as sm, r as xm, t as im, e as lm } from "../chunks/url.CGdWC06g.js";
@@ -167,11 +167,11 @@ export {
   Ft as CxAssetFormatPicker,
   ir as CxAssetLinkFormat,
   Pt as CxAssetPicker,
-  ht as CxAssetTransformationDialog,
+  Et as CxAssetTransformationDialog,
   f as CxAudio,
   d as CxAvatar,
   c as CxBadge,
-  Et as CxBentoGrid,
+  ht as CxBentoGrid,
   bo as CxBicolorPicker,
   Fo as CxBorderInputGroup,
   T as CxBox,
@@ -180,14 +180,14 @@ export {
   y as CxButton,
   P as CxButtonGroup,
   Rt as CxCapacityPlanner,
-  E as CxCard,
+  h as CxCard,
   Lt as CxCarousel,
   Ot as CxChartPlanBuilder,
   vt as CxChatbot,
   L as CxCheckbox,
   Bt as CxClusterManagement,
   v as CxColorPicker,
-  ho as CxColorSwatch,
+  Eo as CxColorSwatch,
   Go as CxColorSwatchGroup,
   Vt as CxComment,
   Mt as CxCommentV1,
@@ -242,7 +242,7 @@ export {
   ya as CxIconButton,
   eo as CxIconPicker,
   Pa as CxIframe,
-  Ea as CxImage,
+  ha as CxImage,
   La as CxImageComparer,
   va as CxInclude,
   Va as CxInput,
@@ -286,7 +286,7 @@ export {
   Qo as CxShareOptionList,
   $o as CxSidebar,
   er as CxSizeInputGroup,
-  Ee as CxSkeleton,
+  he as CxSkeleton,
   Le as CxSpace,
   po as CxSpaceSelector,
   fo as CxSpecialCharactersDialog,
@@ -324,8 +324,8 @@ export {
   lx as FormControlController,
   dr as GsapEasing,
   Ps as HEX_ALPHA_VALIDATION_REGEX,
-  hs as HEX_VALIDATION_REGEX,
-  Ex as HasSlotController,
+  Es as HEX_VALIDATION_REGEX,
+  hx as HasSlotController,
   Dr as HistoryManager,
   Io as IconPickerVariant,
   br as KeyboardKey,
@@ -337,7 +337,7 @@ export {
   yr as PRECISION,
   Cm as PositionPickerValue,
   Jl as RELATIVE_URL_REGEX,
-  Es as RGB_VALIDATION_REGEX,
+  hs as RGB_VALIDATION_REGEX,
   Ai as SRCSET_WIDTH_LADDER,
   gr as TransitionType,
   Ql as URL_DOMAIN_VALIDATION_REGEX,
@@ -387,7 +387,7 @@ export {
   Cs as findAncestorWithBuggyStyle,
   ds as findContainingBlock,
   us as findCuttingAncestor,
-  hr as findFrameByColAndRow,
+  Er as findFrameByColAndRow,
   ts as findIndexByProp,
   xx as focusWhenVisible,
   pt as fontAwesomeIconNames,
@@ -411,7 +411,7 @@ export {
   ti as getAttributes,
   bl as getAttributesString,
   dl as getBreakpointsFromCSS,
-  Er as getBrowserFontVariants,
+  hr as getBrowserFontVariants,
   Bs as getColorType,
   Ki as getContainedImageSize,
   oi as getCortexPopupLayer,
@@ -482,19 +482,19 @@ export {
   Nr as openAssetOverview,
   Hr as openFolderOverview,
   Ur as openLink,
-  hl as padPath,
-  El as parseBooleanString,
+  El as padPath,
+  hl as parseBooleanString,
   _s as parseBorder,
   Jx as parseDisplayToIso,
   Xs as parseDuration,
-  hi as parseFileSizeToBytes,
+  Ei as parseFileSizeToBytes,
   Gi as parseGradient,
   Qx as parseIsoDate,
   zr as parseJsonString,
   Gs as parseLightDark,
   Xr as parseListString,
   ks as parseShadow,
-  Ei as parseTransformations,
+  hi as parseTransformations,
   Wr as pick,
   Is as popoverSupported,
   Ws as prefersReducedMotion,

package/library/components/video.js

@@ -1,9 +1,9 @@
 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.DAbpXfEy.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 { r as Pb, R as Lb, b as Ip, a as Rb } from "../chunks/resizable-component.styles.CxjaYhiB.js";
 import { c as Ib } from "../chunks/component.styles.CAS3c9pM.js";
 import { a as Ui } from "../chunks/index.Cpamj0jB.js";
 import { P as Ob, O as kb } from "../chunks/position-picker.qkbJlboF.js";

package/library/package.json

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

package/library/packages/atoms/src/components/tab-group/tab-group.d.ts

@@ -51,6 +51,7 @@ export default class CxTabGroup extends CortexElement {
     private readonly localize;
     private mutationObserver;
     private resizeObserver;
+    private lastTabGap?;
     private panelResizeObserver?;
     /**
      * The IntersectionObserver from the most recent syncTabsAndPanels() call. syncTabsAndPanels() can be triggered

package/library/packages/molecules/src/icon-picker/icon-picker.d.ts

@@ -71,6 +71,7 @@ export default class CxIconPicker extends CortexElement {
      */
     private static loadIconsData;
     private readonly localize;
+    private hasReportedValidity;
     private readonly select;
     private readonly customOption;
     private readonly dropdown?;
@@ -82,6 +83,11 @@ export default class CxIconPicker extends CortexElement {
      * Adds a clear button when the select is not empty.
      */
     clearable: boolean;
+    /**
+     * Requires an uploaded image when custom is selected in select mode.
+     * @default false
+     */
+    requireCustomIcon: boolean;
     /**
      * Controls the visual variant of the icon picker.
      * In 'select' mode a cx-select is rendered inline.
@@ -152,8 +158,8 @@ export default class CxIconPicker extends CortexElement {
     onRequestAsset: ((type: AssetTypeString, multiple?: boolean) => Promise<Asset | Record<string, Asset>>) | undefined;
     searchTerm: string;
     /**
-     * Need to mount or unmount virtualizer when select is shown or hidden
-     * Since the virtualizer have a defect that not re-render when the parent is hidden once
+     * Recreate the virtualizer for each open because it does not reliably
+     * re-render after being measured inside a hidden parent.
      */
     private showVirtualizer;
     private get filteredCortexIcons();
@@ -161,7 +167,13 @@ export default class CxIconPicker extends CortexElement {
     private get virtualListItems();
     constructor();
     runFirstUpdated(): void;
+    /** Checks the custom image requirement without displaying an error. */
+    checkValidity(): boolean;
+    /** Called by the containing form when reporting errors on save. */
+    reportValidity(): boolean;
     handleVariantChange(): Promise<void>;
+    handleCustomIconValidation(): Promise<void>;
+    private updateCustomIconValidity;
     renderOption(item: IconData): import('lit').TemplateResult<1> | typeof nothing;
     private renderMenuItem;
     private handleSelectValueChange;
@@ -183,7 +195,7 @@ export default class CxIconPicker extends CortexElement {
     private ensureIconsData;
     private showVirtualizerWhenReady;
     private handleSelectShow;
-    private handleSelectHide;
+    private handleSelectBeforeShow;
     private handleDropdownShow;
     private handleDropdownHide;
     handleContentBuilderAssetSelect(event: CxAssetPickerSelectEvent): Promise<void>;

package/library/packages/organisms/src/content-builder/components/color-swatch-picker/color-swatch-picker.d.ts

@@ -75,10 +75,7 @@ export default class CxColorSwatchPicker extends CortexElement {
      * The block's custom columns, one labelled input each in the color dialog.
      */
     customColumns: ColorSwatchCustomColumn[];
-    /**
-     * Shows the Meta data section. Off by default: a metadata field is a table
-     * column, which only the Table variant renders.
-     */
+    /** Shows the Meta data section in the color dialog. */
     showMetadata: boolean;
     /**
      * The type of dialog to open since it can be either add new or edit from row selection.
@@ -223,6 +220,12 @@ export default class CxColorSwatchPicker extends CortexElement {
     private handleTableRowMoved;
     private handleTableRowDeleted;
     private renderControls;
+    /** Copies a color's metadata onto the flat `custom-<id>` keys the columns read. */
+    private flattenMetadata;
+    /** Built-in columns plus one per declared custom column. */
+    private get tableColumns();
+    /** Colors with their metadata flattened onto the custom column fields. */
+    private get tableData();
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

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

@@ -6764,6 +6764,10 @@
           * Adds a clear button when the select is not empty.
         */
         clearable?: boolean;
+        /**
+          * Requires an uploaded image when custom is selected in select mode. <br/>@default false
+        */
+        requireCustomIcon?: boolean;
         /**
           * Controls the visual variant of the icon picker. In 'select' mode a cx-select is rendered inline. In 'button' mode a cx-button trigger opens a cx-dropdown panel with a search input and icon list. <br/>@default 'select'
         */

package/package.json

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