@orangelogic/design-system 4.8.0 → 4.9.0

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

@@ -1,9 +1,9 @@
 import "./cropper.js";
-import "../chunks/button.CUeXJXcO.js";
+import "../chunks/button.rJFwhUxT.js";
 import "./space.js";
 import "../chunks/typography.BLYdTF0n.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { C as h } from "../chunks/asset-link-format.Bi9J8xCQ.js";
+import { C as h } from "../chunks/asset-link-format.CbmsLfvm.js";
 import "../chunks/component.styles.CAS3c9pM.js";
 import "../chunks/asset-link-format.ClaYu_v8.js";
 import "../chunks/position-picker.qkbJlboF.js";

package/library/components/atoms.js

@@ -10,7 +10,7 @@ import { default as P } from "./badge.js";
 import { default as M } from "./box.js";
 import { default as F } from "./breadcrumb.js";
 import { default as O } from "./breadcrumb-item.js";
-import { C as E } from "../chunks/button.CUeXJXcO.js";
+import { C as E } from "../chunks/button.rJFwhUxT.js";
 import { default as L } from "./button-group.js";
 import { default as j } from "./card.js";
 import { default as Q } from "./checkbox.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.ZqrNpAA_.js";
+import { C as xe } from "../chunks/document-viewer.iu_c5JvE.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";
@@ -53,7 +53,7 @@ import { default as xo } from "./menu-label.js";
 import { default as mo } from "./menu-section.js";
 import { default as Co } from "./mutation-observer.js";
 import { C as uo } from "../chunks/option.CwbFof9H.js";
-import { C as no } from "../chunks/pagination.DCSLKv1u.js";
+import { C as no } from "../chunks/pagination.DiIIZpeU.js";
 import { default as co } from "./popup.js";
 import { default as bo } from "./progress-bar.js";
 import { default as Io } from "./progress-ring.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.Dy2fEfC-.js";
+import { C as at } from "../chunks/tab-group.BAZBrIdM.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/button.js

@@ -1,6 +1,6 @@
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CAS3c9pM.js";
-import { C as h } from "../chunks/button.CUeXJXcO.js";
+import { C as h } from "../chunks/button.rJFwhUxT.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/form.LpappO1d.js";
 import "../chunks/i18n.D5L6xAYT.js";
@@ -14,7 +14,7 @@ import "../chunks/when.Dr1es41R.js";
 import "../chunks/static.UA3G1Deq.js";
 import "../chunks/icon.BLXWp6CU.js";
 import "./spinner.js";
-import "../chunks/button.styles.D3GdfF7I.js";
+import "../chunks/button.styles.DoD2bkKL.js";
 export {
   h as default
 };

package/library/components/color-picker.js

@@ -18,7 +18,7 @@ import { o as I } from "../chunks/if-defined.BRoBj_Rp.js";
 import { c as H } from "../chunks/repeat.CFjcER6_.js";
 import { o as m } from "../chunks/style-map.llVFPd__.js";
 import { n as u } from "../chunks/when.Dr1es41R.js";
-import { C as U } from "../chunks/button.CUeXJXcO.js";
+import { C as U } from "../chunks/button.rJFwhUxT.js";
 import ot from "./button-group.js";
 import W from "./dropdown.js";
 import { C as X } from "../chunks/icon.BLXWp6CU.js";
@@ -27,7 +27,7 @@ import { C as st } from "../chunks/option.CwbFof9H.js";
 import lt from "./select.js";
 import nt from "./spinner.js";
 import ct from "./tab.js";
-import { C as pt } from "../chunks/tab-group.Dy2fEfC-.js";
+import { C as pt } from "../chunks/tab-group.BAZBrIdM.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.CecCeVOC.js";
+import { C as w } from "../chunks/color-swatch-group.NkrEGUbN.js";
 import "../chunks/color.CIHdfM_a.js";
 import "../chunks/content-builder.CBBdfVOl.js";
 import "../chunks/custom-element.L4WJXn1j.js";

package/library/components/confirm-popover.js

@@ -1,10 +1,10 @@
-import "../chunks/button.CUeXJXcO.js";
+import "../chunks/button.rJFwhUxT.js";
 import "../chunks/dialog.C2q9XwLW.js";
 import "./dropdown.js";
 import "../chunks/typography.BLYdTF0n.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/component.styles.CAS3c9pM.js";
-import { C as x } from "../chunks/confirm-popover.CeKZ8dF1.js";
+import { C as x } from "../chunks/confirm-popover.B287gNRq.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.D5L6xAYT.js";
 import "../chunks/lit-element.jLBm65_O.js";

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.ZqrNpAA_.js";
+import { C as b } from "../chunks/document-viewer.iu_c5JvE.js";
 import "../chunks/component.styles.CAS3c9pM.js";
 import "../chunks/index.Cpamj0jB.js";
 import "../chunks/custom-element.L4WJXn1j.js";

package/library/components/dynamic-select.js

@@ -1,4 +1,4 @@
-import { C as g } from "../chunks/button.CUeXJXcO.js";
+import { C as g } from "../chunks/button.rJFwhUxT.js";
 import { C as O } from "../chunks/icon-button.BXs29IQE.js";
 import { C as h, a as C } from "../chunks/option.CwbFof9H.js";
 import $ from "./select.js";

package/library/components/element-clamp.js

@@ -9,7 +9,7 @@ import { r as k } from "../chunks/state.CSDxrqLd.js";
 import { e as E } from "../chunks/query.BBf1UFkC.js";
 import { e as H } from "../chunks/class-map.BiVq-cVR.js";
 import { a as p, g } from "../chunks/animation-registry.HmpwNuGH.js";
-import { C as B } from "../chunks/button.CUeXJXcO.js";
+import { C as B } from "../chunks/button.rJFwhUxT.js";
 const T = C`:host{--toggler-color:var(--cx-color-primary);display:block;overflow:hidden}.element-clamp{overflow-anchor:none}.element-clamp--disabled{opacity:.5}.element-clamp-icon{transition:var(--cx-transition-medium) rotate ease;flex:none;align-items:center;display:flex}.details--open .element-clamp-icon{rotate:90deg}.details--open.details--rtl .element-clamp-icon{rotate:-90deg}.element-clamp--open slot[name=expand-icon],.element-clamp:not(.element-clamp--open) slot[name=collapse-icon]{display:none}.element-clamp__content{display:block;overflow:hidden}.toggler{margin-top:var(--cx-spacing-2x-small);display:block}.toggler::part(base){color:var(--toggler-color);font-weight:var(--cx-font-weight-medium);text-transform:none;width:auto}.toggler::part(label){padding-left:0}`;
 var z = Object.defineProperty, O = Object.getOwnPropertyDescriptor, n = (e, t, i, r) => {
   for (var s = r > 1 ? void 0 : r ? O(t, i) : t, h = e.length - 1, l; h >= 0; h--)

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

@@ -16,7 +16,7 @@ import { n as p } from "../chunks/when.Dr1es41R.js";
 import { b as At } from "../chunks/_baseEach.DQk0As2f.js";
 import { b as Dt } from "../chunks/_baseIteratee.sC2wLi2m.js";
 import Tt from "./avatar.js";
-import { C as zt } from "../chunks/button.CUeXJXcO.js";
+import { C as zt } from "../chunks/button.rJFwhUxT.js";
 import { C as Pt } from "../chunks/dialog.C2q9XwLW.js";
 import Et from "./divider.js";
 import nt from "./format-bytes.js";
@@ -27,11 +27,11 @@ 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.Dy2fEfC-.js";
+import { C as Ot } from "../chunks/tab-group.BAZBrIdM.js";
 import Nt from "./tab-panel.js";
 import bt from "./tooltip.js";
 import { C as rt } from "../chunks/typography.BLYdTF0n.js";
-import { C as jt } from "../chunks/confirm-popover.CeKZ8dF1.js";
+import { C as jt } from "../chunks/confirm-popover.B287gNRq.js";
 import { d as Bt } from "../chunks/debounce.DaHuiSGU.js";
 import { c as Z } from "../chunks/number.Cx2ncfJJ.js";
 import { i as X, b as pt } from "../chunks/url.CGdWC06g.js";

package/library/components/folder-select.js

@@ -5,7 +5,7 @@ import "./select.js";
 import "./tag.js";
 import "../chunks/tree.MCwWhFAm.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { C as j } from "../chunks/folder-select.lF4v6bbN.js";
+import { C as j } from "../chunks/folder-select.CdCc7oLi.js";
 import "../chunks/component.styles.CAS3c9pM.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.D5L6xAYT.js";

package/library/components/line-clamp.js

@@ -1,4 +1,4 @@
-import "../chunks/button.CUeXJXcO.js";
+import "../chunks/button.rJFwhUxT.js";
 import "./tooltip.js";
 import "./resize-observer.js";
 import { n as s, C as b } from "../chunks/lib-cortex-element.CVMmyPMC.js";

package/library/components/molecules.js

@@ -1,11 +1,11 @@
 import { default as e } from "./bicolor-picker.js";
 import { default as a } from "./border-input-group.js";
 import { default as p } from "./color-swatch.js";
-import { C as u } from "../chunks/confirm-popover.CeKZ8dF1.js";
+import { C as u } from "../chunks/confirm-popover.B287gNRq.js";
 import { default as d } from "./corner-position-input-group.js";
 import { default as l } from "./cropper.js";
 import { default as i } from "./dynamic-select.js";
-import { C as c } from "../chunks/folder-select.lF4v6bbN.js";
+import { C as c } from "../chunks/folder-select.CdCc7oLi.js";
 import { default as P } from "./masonry.js";
 import { default as I } from "./padding-input-group.js";
 import { default as y } from "./position-picker.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.CecCeVOC.js";
+import { C as a } from "../chunks/asset-link-format.CbmsLfvm.js";
+import { C as t } from "../chunks/color-swatch-group.NkrEGUbN.js";
 import { default as C } from "./file-on-demand.js";
 export {
   a as CxAssetLinkFormat,

package/library/components/pagination.js

@@ -1,7 +1,7 @@
 import "./space.js";
 import "../chunks/lib-cortex-element.CVMmyPMC.js";
 import "../chunks/icon-button.BXs29IQE.js";
-import { C as k } from "../chunks/pagination.DCSLKv1u.js";
+import { C as k } from "../chunks/pagination.DiIIZpeU.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.D5L6xAYT.js";
 import "../chunks/math.DuKzLacZ.js";
@@ -11,7 +11,7 @@ import "../chunks/state.CSDxrqLd.js";
 import "../chunks/class-map.BiVq-cVR.js";
 import "../chunks/repeat.CFjcER6_.js";
 import "../chunks/when.Dr1es41R.js";
-import "../chunks/button.CUeXJXcO.js";
+import "../chunks/button.rJFwhUxT.js";
 import "../chunks/input.zRoRq5mq.js";
 import "../chunks/option.CwbFof9H.js";
 import "./select.js";

package/library/components/radio-button.js

@@ -9,7 +9,7 @@ import { e as y } from "../chunks/class-map.BiVq-cVR.js";
 import { o as h } from "../chunks/if-defined.BRoBj_Rp.js";
 import { u as _ } from "../chunks/static.UA3G1Deq.js";
 import { i as v } from "../chunks/lit-element.jLBm65_O.js";
-import { b as w } from "../chunks/button.styles.D3GdfF7I.js";
+import { b as w } from "../chunks/button.styles.DoD2bkKL.js";
 const C = v`
   ${w}
 

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.Dy2fEfC-.js";
+import { C as A } from "../chunks/tab-group.BAZBrIdM.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.D5L6xAYT.js";
 import "../chunks/scroll.xtO5yojm.js";
@@ -18,7 +18,7 @@ import "../chunks/guard.D4axKaMo.js";
 import "../chunks/map.D8heArFD.js";
 import "../chunks/style-map.llVFPd__.js";
 import "../chunks/when.Dr1es41R.js";
-import "../chunks/button.CUeXJXcO.js";
+import "../chunks/button.rJFwhUxT.js";
 import "./dropdown.js";
 import "../chunks/icon-button.BXs29IQE.js";
 import "./menu.js";

package/library/components/tab.js

@@ -31,9 +31,9 @@ const w = b`.tab{border-radius:var(--cx-border-radius-small);border-top:var(--ta
   }
 
 
+  /* display: none, not visibility: hidden, so a hidden tab takes no layout space. */
   :host([data-cx-tab-group__tab--hidden]) {
-    visibility: hidden;
-    pointer-events: none;
+    display: none;
   }
 
   ${w}

package/library/components/types.js

@@ -9,7 +9,7 @@ import { default as c } from "./badge.js";
 import { default as T } from "./box.js";
 import { default as S } from "./breadcrumb.js";
 import { default as D } from "./breadcrumb-item.js";
-import { C as F } from "../chunks/button.CUeXJXcO.js";
+import { C as F } from "../chunks/button.rJFwhUxT.js";
 import { default as P } from "./button-group.js";
 import { default as h } from "./card.js";
 import { default as O } from "./checkbox.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.ZqrNpAA_.js";
+import { C as K } from "../chunks/document-viewer.iu_c5JvE.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";
@@ -51,7 +51,7 @@ import { default as Ka } from "./menu-label.js";
 import { default as qa } from "./menu-section.js";
 import { default as Ja } from "./mutation-observer.js";
 import { C as Za } from "../chunks/option.CwbFof9H.js";
-import { C as ae } from "../chunks/pagination.DCSLKv1u.js";
+import { C as ae } from "../chunks/pagination.DiIIZpeU.js";
 import { default as te } from "./popup.js";
 import { default as re } from "./progress-bar.js";
 import { default as xe } from "./progress-ring.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.Dy2fEfC-.js";
+import { C as Xe } from "../chunks/tab-group.BAZBrIdM.js";
 import { default as Ke } from "./tab-panel.js";
 import { default as qe } from "./tag.js";
 import { default as Je } from "./textarea.js";
@@ -86,16 +86,16 @@ 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.D6xffHzq.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.CNqFN3XH.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";
-import { C as Ro } from "../chunks/confirm-popover.CeKZ8dF1.js";
+import { C as Ro } from "../chunks/confirm-popover.B287gNRq.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.CecCeVOC.js";
-import { C as Ho } from "../chunks/folder-select.lF4v6bbN.js";
+import { C as Go, i as ko, j as wo } from "../chunks/color-swatch-group.NkrEGUbN.js";
+import { C as Ho } from "../chunks/folder-select.CdCc7oLi.js";
 import { default as zo } from "./masonry.js";
 import { default as Wo } from "./padding-input-group.js";
 import { default as jo } from "./position-picker.js";
@@ -105,7 +105,7 @@ import { default as $o } from "./sidebar.js";
 import { default as er } from "./size-input-group.js";
 import { default as or } from "./stepper-wizard.js";
 import { default as sr } from "./typeface.js";
-import { C as ir } from "../chunks/asset-link-format.Bi9J8xCQ.js";
+import { C as ir } from "../chunks/asset-link-format.CbmsLfvm.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 Fr, downloadAsset as yr, extractFrames as Pr, findFrameByColAndRow as Er, getBrowserFontVariants as hr, getFontFamilyOptionValue as Rr, getFontFamilyVariants as Or, getFormControls as Lr, 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";

package/library/package.json

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

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

@@ -61,6 +61,8 @@ export default class CxTabGroup extends CortexElement {
      * dropdownOffset and the tabs' hidden marker with outdated results.
      */
     private overflowObserver?;
+    /** Tab kept visible next to the dropdown trigger by promote-active-overflow-tab. */
+    private promotedTab?;
     private tabs;
     private focusableTabs;
     private panels;
@@ -79,6 +81,9 @@ export default class CxTabGroup extends CortexElement {
     private shouldHideScrollStartButton;
     private shouldHideScrollEndButton;
     private dropdownOffset;
+    private tabButtonsLeadingPadding;
+    private tabButtonsPaddingTop;
+    private tabButtonsPaddingBottom;
     private tabPanelHeight;
     private tabAlignmentIndent;
     shouldIgnoreAlignment: boolean;
@@ -117,6 +122,8 @@ export default class CxTabGroup extends CortexElement {
     tabsPerPage: number;
     /** The minimum width of the tab. */
     minTabWidth: number;
+    /** When overflow-variant is "dropdown", keeps a selected hidden tab visible next to the trigger. */
+    promoteActiveOverflowTab: boolean;
     /** Minimum clamp width - The minimum width of the tab not to be clamped */
     private static readonly MIN_CLAMP_WIDTH;
     private static readonly HIDDEN_TAB_ATTRIBUTE;
@@ -143,6 +150,12 @@ export default class CxTabGroup extends CortexElement {
      * If dropdown overflow but placement is start and end, count as scroll overflow
      */
     private get allowDropdownOverflow();
+    /**
+     * The promoted tab, but only while promotion is actually in effect. promotedTab is left untouched when
+     * placement or overflow-variant stops allowing a dropdown, so the selection resumes if they flip back;
+     * this getter is what the fit loop reads so a stale reservation can never keep the feature switched on.
+     */
+    private get activePromotedTab();
     /**
      * Get the height of the body
      */
@@ -156,9 +169,16 @@ export default class CxTabGroup extends CortexElement {
     private handleScrollToStart;
     private handleScrollToEnd;
     private handleDropdownAfterShow;
+    /** Marks tab as promoted (see promotedTab) without moving it in the DOM. */
+    private promoteHiddenActiveTab;
     private setActiveTab;
     private setAriaLabels;
     private repositionIndicator;
+    /**
+     * Returns this.tabs with promotedTab (if any) moved right after the first two entries, for the
+     * fit loop to walk — this.tabs itself is never reordered.
+     */
+    private buildPriorityOrder;
     /**
      * This stores tabs and panels so we can refer to a cache instead of calling querySelectorAll() multiple times.
      */
@@ -173,6 +193,7 @@ export default class CxTabGroup extends CortexElement {
      * overflow variant is dropdown and the direction is rtl
      */
     private syncScrollPosition;
+    /** Finds the next non-disabled, non-hidden tab, falling back to the first hidden one crossed. */
     private findNextFocusableTab;
     /**
      * The reality of the browser means that we can't expect the scroll position to be exactly what we want it to be, so
@@ -188,6 +209,7 @@ export default class CxTabGroup extends CortexElement {
     handleVariantChange(): Promise<void>;
     handleOverflowVariantChange(): void;
     handleDropdownLabelChange(): void;
+    handlePromoteActiveOverflowTabChange(): void;
     handleAbsoluteHeightChange(): void;
     handleTabAlignmentChange(): void;
     handleTabsPerPageChange(): Promise<void>;

package/library/packages/molecules/src/data-tab-group/data-tab-group.d.ts

@@ -56,6 +56,8 @@ export default class CxDataTabGroup extends CortexElement {
      */
     tabBorderSides: string;
     multiLanguage: boolean;
+    /** Forwarded to cx-tab-group. */
+    promoteActiveOverflowTab: boolean;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

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

@@ -2268,6 +2268,10 @@
           * The minimum width of the tab.
         */
         minTabWidth?: number;
+        /**
+          * When overflow-variant is "dropdown", keeps a selected hidden tab visible next to the trigger.
+        */
+        promoteActiveOverflowTab?: boolean;
         /**
           * Make localization attributes reactive eslint-disable-next-line lit/no-native-attributes
         */
@@ -5890,6 +5894,10 @@
           * 
         */
         multiLanguage?: boolean;
+        /**
+          * Forwarded to cx-tab-group.
+        */
+        promoteActiveOverflowTab?: boolean;
         /**
           * Make localization attributes reactive eslint-disable-next-line lit/no-native-attributes
         */

package/package.json

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

package/library/chunks/button.styles.D3GdfF7I.js

@@ -1,5 +0,0 @@
-import { i as o } from "./lit-element.jLBm65_O.js";
-const r = o`:host{--background-color:var(--cx-color-primary);--color:light-dark(var(--cx-color-neutral-0),var(--cx-color-neutral-1000));--font-size:var(--cx-font-size-medium);--font-weight:var(--cx-font-weight-medium);--height:var(--cx-input-height-medium);--justify-content:center;--gap:0;--min-height:auto;--padding:0;--label-line-height:1.15;--button-custom-height:32px;--button-custom-padding:4px 8px 4px 8px;--button-custom-font-size:var(--cx-font-size-medium);--button-custom-border:light-dark(#0000,#0000) 0px;--button-custom-hover-shift:.06;--button-custom-active-shift:.12;cursor:pointer;width:auto;max-width:100%;line-height:normal;display:inline-block;position:relative}:host([width-type=fill]),:host([width-type=adaptive][device-type=tablet]),:host([width-type=adaptive][device-type=mobile]){width:100%}.button{align-items:center;justify-content:var(--justify-content,center);gap:var(--gap,0);border-style:solid;border-width:var(--cx-input-border-width);width:100%;font-family:var(--font-family,var(--cx-input-font-family)), var(--cx-font-sans);font-style:var(--font-style,normal);font-weight:var(--font-weight,var(--cx-font-weight-regular));font-size:var(--font-size,var(--cx-font-size-medium));height:var(--height,var(--cx-input-height-medium));min-height:var(--min-height,auto);padding:var(--padding,0);text-transform:var(--cx-button-text-transform,none);-webkit-user-select:none;user-select:none;white-space:nowrap;vertical-align:middle;transition:var(--cx-transition-x-fast) background-color, var(--cx-transition-x-fast) color, var(--cx-transition-x-fast) border, var(--cx-transition-x-fast) box-shadow;cursor:inherit;text-decoration:none;display:inline-flex}.button::-moz-focus-inner{border:0}.button:focus{outline:none}.button:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}.button--disabled{opacity:.5;cursor:default}.button--disabled *{pointer-events:none}.button__prefix,.button__suffix{pointer-events:none;flex:none;align-items:center;display:flex}.button__label{line-height:var(--label-line-height);white-space:nowrap;text-overflow:ellipsis;display:none;overflow:hidden}.button__label::slotted(cx-icon){vertical-align:-2px}.button__label--has-label{display:inline-block}.button--standard.button--default{background-color:var(--cx-color-neutral-100);border-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral-700)}.button--standard.button--default:hover:not(.button--disabled){background-color:var(--cx-color-neutral-200);border-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral-700)}.button--standard.button--default.button--focused:not(.button--disabled):not(:hover),.button--standard.button--default:focus-visible:not(.button--disabled):not(:hover){background-color:var(--cx-color-neutral-100);border-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral-700)}.button--standard.button--default:active:not(.button--disabled){background-color:var(--cx-color-neutral-300);border-color:var(--cx-color-neutral-300);color:var(--cx-color-neutral-700)}.button--standard.button--primary{background-color:var(--cx-color-primary);border-color:var(--cx-color-primary);color:var(--cx-color-neutral-0)}.button--standard.button--primary:hover:not(.button--disabled){background-color:var(--cx-color-primary-500);border-color:var(--cx-color-primary-500);color:var(--cx-color-neutral-0)}.button--standard.button--primary.button--focused:not(.button--disabled):not(:hover),.button--standard.button--primary:focus-visible:not(.button--disabled):not(:hover){background-color:var(--cx-color-primary);border-color:var(--cx-color-primary);color:var(--cx-color-neutral-0)}.button--standard.button--primary:active:not(.button--disabled){background-color:var(--cx-color-primary-700);border-color:var(--cx-color-primary-700);color:var(--cx-color-neutral-0)}.button--standard.button--success{background-color:var(--cx-color-success);border-color:var(--cx-color-success);color:var(--cx-color-neutral-0)}.button--standard.button--success:hover:not(.button--disabled){background-color:var(--cx-color-success-500);border-color:var(--cx-color-success-500);color:var(--cx-color-neutral-0)}.button--standard.button--success.button--focused:not(.button--disabled):not(:hover),.button--standard.button--success:focus-visible:not(.button--disabled):not(:hover){background-color:var(--cx-color-success);border-color:var(--cx-color-success);color:var(--cx-color-neutral-0)}.button--standard.button--success:active:not(.button--disabled){background-color:var(--cx-color-success-700);border-color:var(--cx-color-success-700);color:var(--cx-color-neutral-0)}.button--standard.button--warning{background-color:var(--cx-color-warning);border-color:var(--cx-color-warning);color:var(--cx-color-neutral-0)}.button--standard.button--warning:hover:not(.button--disabled){background-color:var(--cx-color-warning-500);border-color:var(--cx-color-warning-500);color:var(--cx-color-neutral-0)}.button--standard.button--warning.button--focused:not(.button--disabled):not(:hover),.button--standard.button--warning:focus-visible:not(.button--disabled):not(:hover){background-color:var(--cx-color-warning);border-color:var(--cx-color-warning);color:var(--cx-color-neutral-0)}.button--standard.button--warning:active:not(.button--disabled){background-color:var(--cx-color-warning-700);border-color:var(--cx-color-warning-700);color:var(--cx-color-neutral-0)}.button--standard.button--danger{background-color:var(--cx-color-danger);border-color:var(--cx-color-danger);color:var(--cx-color-neutral-0)}.button--standard.button--danger:hover:not(.button--disabled){background-color:var(--cx-color-danger-500);border-color:var(--cx-color-danger-500);color:var(--cx-color-neutral-0)}.button--standard.button--danger.button--focused:not(.button--disabled):not(:hover),.button--standard.button--danger:focus-visible:not(.button--disabled):not(:hover){background-color:var(--cx-color-danger);border-color:var(--cx-color-danger);color:var(--cx-color-neutral-0)}.button--standard.button--danger:active:not(.button--disabled){background-color:var(--cx-color-danger-700);border-color:var(--cx-color-danger-700);color:var(--cx-color-neutral-0)}.button--standard.button--custom{background-color:var(--background-color);border:var(--button-custom-border);color:var(--color);border-style:solid}.button--standard.button--custom:hover:not(.button--disabled){background-color:var(--background-color-focus,oklch(from var(--background-color) max(calc(l - var(--button-custom-hover-shift)), calc(var(--button-custom-hover-shift) - l)) c h));color:var(--color-focus,var(--color))}.button--standard.button--custom.button--focused:not(.button--disabled):not(:hover),.button--standard.button--custom:focus-visible:not(.button--disabled):not(:hover){background-color:var(--background-color);color:var(--color)}.button--standard.button--custom:active:not(.button--disabled){background-color:var(--background-color-active,oklch(from var(--background-color) max(calc(l - var(--button-custom-active-shift)), calc(var(--button-custom-active-shift) - l)) c h));color:var(--color-active,var(--color))}.button--outline{border:solid var(--cx-input-border-width);background:0 0}.button--outline.button--default{border-color:var(--cx-input-border-color);color:var(--cx-color-neutral)}.button--outline.button--default:hover:not(.button--disabled),.button--outline.button--default.button--checked:not(.button--disabled){border-color:var(--cx-color-neutral-300);background-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral)}.button--outline.button--default.button--focused:not(.button--disabled):not(:hover):not(.button--checked),.button--outline.button--default:focus-visible:not(.button--disabled):not(:hover):not(.button--checked){border-color:var(--cx-input-border-color);color:var(--cx-color-neutral);background-color:#0000}.button--outline.button--default:active:not(.button--disabled){border-color:var(--cx-color-neutral-300);background-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral)}.button--outline.button--primary{border-color:var(--cx-color-primary);color:var(--cx-color-primary)}.button--outline.button--primary:hover:not(.button--disabled),.button--outline.button--primary.button--checked:not(.button--disabled){background-color:var(--cx-color-primary-500);color:var(--cx-color-neutral-0)}.button--outline.button--primary.button--focused:not(.button--disabled):not(:hover):not(.button--checked),.button--outline.button--primary:focus-visible:not(.button--disabled):not(:hover):not(.button--checked){border-color:var(--cx-color-primary);color:var(--cx-color-primary);background-color:#0000}.button--outline.button--primary:active:not(.button--disabled){border-color:var(--cx-color-primary-700);background-color:var(--cx-color-primary-700);color:var(--cx-color-neutral-0)}.button--outline.button--success{border-color:var(--cx-color-success);color:var(--cx-color-success)}.button--outline.button--success:hover:not(.button--disabled),.button--outline.button--success.button--checked:not(.button--disabled){background-color:var(--cx-color-success-500);color:var(--cx-color-neutral-0)}.button--outline.button--success.button--focused:not(.button--disabled):not(:hover):not(.button--checked),.button--outline.button--success:focus-visible:not(.button--disabled):not(:hover):not(.button--checked){border-color:var(--cx-color-success);color:var(--cx-color-success);background-color:#0000}.button--outline.button--success:active:not(.button--disabled){border-color:var(--cx-color-success);background-color:var(--cx-color-success);color:var(--cx-color-neutral-0)}.button--outline.button--warning{border-color:var(--cx-color-warning);color:var(--cx-color-warning)}.button--outline.button--warning:hover:not(.button--disabled),.button--outline.button--warning.button--checked:not(.button--disabled){background-color:var(--cx-color-warning-500);color:var(--cx-color-neutral-0)}.button--outline.button--warning.button--focused:not(.button--disabled):not(:hover):not(.button--checked),.button--outline.button--warning:focus-visible:not(.button--disabled):not(:hover):not(.button--checked){border-color:var(--cx-color-warning);color:var(--cx-color-warning);background-color:#0000}.button--outline.button--warning:active:not(.button--disabled){border-color:var(--cx-color-warning-700);background-color:var(--cx-color-warning-700);color:var(--cx-color-neutral-0)}.button--outline.button--danger{border-color:var(--cx-color-danger);color:var(--cx-color-danger)}.button--outline.button--danger:hover:not(.button--disabled),.button--outline.button--danger.button--checked:not(.button--disabled){background-color:var(--cx-color-danger-500);color:var(--cx-color-neutral-0)}.button--outline.button--danger.button--focused:not(.button--disabled):not(:hover):not(.button--checked),.button--outline.button--danger:focus-visible:not(.button--disabled):not(:hover):not(.button--checked){border-color:var(--cx-color-danger);color:var(--cx-color-danger);background-color:#0000}.button--outline.button--danger:active:not(.button--disabled){border-color:var(--cx-color-danger-700);background-color:var(--cx-color-danger-700);color:var(--cx-color-neutral-0)}@media (forced-colors:active){.button.button--outline.button--checked:not(.button--disabled){outline:2px solid #0000}}.button--text{color:var(--cx-color-neutral);background-color:#0000;border-color:#0000}.button--text:hover:not(.button--disabled){background-color:var(--cx-color-neutral-100);border-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral)}.button--text.button--focused:not(.button--disabled):not(:hover),.button--text:focus-visible:not(.button--disabled):not(:hover){color:var(--cx-color-neutral);background-color:#0000;border-color:#0000}.button--text:active:not(.button--disabled){background-color:var(--cx-color-neutral-200);border-color:var(--cx-color-neutral-200);color:var(--cx-color-neutral)}.button--tertiary{color:var(--cx-color-neutral);background-color:#0000;border-color:#0000}.button--tertiary:hover:not(.button--disabled){background-color:var(--cx-color-neutral-100);color:var(--cx-color-neutral);border-color:#0000}.button--tertiary.button--focused:not(.button--disabled):not(:hover),.button--tertiary:focus-visible:not(.button--disabled):not(:hover){color:var(--cx-color-neutral);background-color:#0000;border-color:#0000}.button--tertiary:active:not(.button--disabled){background-color:var(--cx-color-neutral-300);color:var(--cx-color-neutral);border-color:#0000}.button--small{height:auto;min-height:var(--cx-input-height-small);font-size:var(--cx-button-font-size-medium);border-radius:var(--cx-button-border-radius-small)}.button--small ::slotted(cx-icon){--font-size:var(--cx-font-size-medium)}.button--medium{height:auto;min-height:var(--cx-input-height-medium);font-size:var(--cx-button-font-size-medium);border-radius:var(--cx-button-border-radius-medium)}.button--large{height:auto;min-height:var(--cx-input-height-large);font-size:var(--cx-button-font-size-medium);border-radius:var(--cx-button-border-radius-large)}.button--x-large{height:auto;min-height:var(--cx-input-height-x-large);font-size:var(--cx-button-font-size-medium);border-radius:var(--cx-button-border-radius-large)}.button--custom-size{--height:var(--button-custom-height);--padding:var(--button-custom-padding);--font-size:var(--button-custom-font-size);--font-family:var(--button-custom-font-family), var(--cx-font-sans);--font-style:var(--button-custom-font-style);--font-weight:var(--button-custom-font-weight);border-radius:var(--cx-button-border-radius-medium)}.button--pill.button--small{border-radius:var(--cx-input-height-small)}.button--pill.button--medium{border-radius:var(--cx-input-height-medium)}.button--pill.button--large{border-radius:var(--cx-input-height-large)}.button--pill.button--x-large{border-radius:var(--cx-input-height-x-large)}.button--circle{padding-left:0;padding-right:0}.button--circle.button--small{width:var(--cx-input-height-small);border-radius:50%}.button--circle.button--medium{width:var(--cx-input-height-medium);border-radius:50%}.button--circle.button--large{width:var(--cx-input-height-large);border-radius:50%}.button--circle.button--x-large{width:var(--cx-input-height-x-large);border-radius:50%}.button--circle .button__prefix,.button--circle .button__suffix,.button--circle .button__caret{display:none}.button--circle .button__label{justify-content:center;align-items:center;line-height:1;display:inline-flex}.button--caret .button__caret{--font-size:var(--caret-font-size,var(--cx-font-size-large));margin-block:auto}.button--caret.button--small .button__caret{--font-size:var(--caret-font-size,var(--cx-font-size-medium))}.button--caret .button__suffix{display:none}.button--loading{cursor:wait;position:relative}.button--loading .button__prefix,.button--loading .button__label,.button--loading .button__suffix,.button--loading .button__caret{visibility:hidden}.button--loading cx-spinner{--indicator-color:currentColor;width:1em;height:1em;font-size:1em;position:absolute;top:calc(50% - .5em);left:calc(50% - .5em)}.button ::slotted(cx-badge){pointer-events:none;position:absolute;top:0;right:0;translate:50% -50%}.button--rtl ::slotted(cx-badge){left:0;right:auto;translate:-50% -50%}.button--has-label.button--small .button__label{padding:0 var(--cx-spacing-x-small)}.button--has-label.button--medium .button__label{padding:0 var(--cx-spacing-small)}.button--has-label.button--large .button__label{padding:0 var(--cx-spacing-medium)}.button--has-label.button--x-large .button__label{padding:0 var(--cx-spacing-large)}.button--has-prefix.button--small,.button--has-prefix.button--small .button__label,.button--has-prefix.button--medium,.button--has-prefix.button--medium .button__label{padding-inline-start:var(--cx-spacing-x-small)}.button--has-prefix.button--large{padding-inline-start:var(--cx-spacing-small)}.button--has-prefix.button--large .button__label{padding-inline-start:var(--cx-spacing-x-small)}.button--has-prefix.button--x-large,.button--has-prefix.button--x-large .button__label{padding-inline-start:var(--cx-spacing-medium)}.button--has-suffix.button--small,.button--caret.button--small,.button--has-suffix.button--small .button__label,.button--caret.button--small .button__label,.button--has-suffix.button--medium,.button--caret.button--medium,.button--has-suffix.button--medium .button__label,.button--caret.button--medium .button__label{padding-inline-end:var(--cx-spacing-x-small)}.button--has-suffix.button--large,.button--caret.button--large{padding-inline-end:var(--cx-spacing-small)}.button--has-suffix.button--large .button__label,.button--caret.button--large .button__label{padding-inline-end:var(--cx-spacing-x-small)}.button--has-suffix.button--x-large,.button--caret.button--x-large,.button--has-suffix.button--x-large .button__label,.button--caret.button--x-large .button__label{padding-inline-end:var(--cx-spacing-medium)}.button--caret:not(.button--has-prefix):not(.button--has-label).button--small,.button--has-suffix:not(.button--has-prefix):not(.button--has-label).button--small,.button--caret:not(.button--has-prefix):not(.button--has-label).button--medium,.button--has-suffix:not(.button--has-prefix):not(.button--has-label).button--medium{padding-inline-start:var(--cx-spacing-x-small)}.button--caret:not(.button--has-prefix):not(.button--has-label).button--large,.button--has-suffix:not(.button--has-prefix):not(.button--has-label).button--large{padding-inline-start:var(--cx-spacing-small)}.button--caret:not(.button--has-prefix):not(.button--has-label).button--x-large,.button--has-suffix:not(.button--has-prefix):not(.button--has-label).button--x-large{padding-inline-start:var(--cx-spacing-medium)}.button--has-prefix:not(.button--has-label).button--small,.button--has-prefix:not(.button--has-label).button--medium{gap:var(--cx-spacing-x-small)}.button--has-prefix:not(.button--has-label).button--large{gap:var(--cx-spacing-small)}.button--has-prefix:not(.button--has-label).button--x-large{gap:var(--cx-spacing-medium)}.button--caret cx-icon::part(span){height:auto}:host([data-cx-button-group__button--first]:not([data-cx-button-group__button--last])) .button{border-start-end-radius:0;border-end-end-radius:0}:host([data-cx-button-group__button--inner]) .button{border-radius:0}:host([data-cx-button-group__button--last]:not([data-cx-button-group__button--first])) .button{border-start-start-radius:0;border-end-start-radius:0}:host([data-cx-button-group__button]:not([data-cx-button-group__button--first])){margin-inline-start:calc(-1 * var(--cx-input-border-width))}:host([data-cx-button-group__button]:not([data-cx-button-group__button--first],[data-cx-button-group__button--radio],[variant=default]):not(:hover)) .button:after{content:"";top:0;inset-inline-start:0;mix-blend-mode:multiply;border-left:1px solid #80808054;position:absolute;bottom:0}:host([data-cx-button-group__button--hover]){z-index:1}:host([data-cx-button-group__button--focus]),:host([data-cx-button-group__button][checked]){z-index:2}`;
-export {
-  r as b
-};