@orangelogic/design-system 2.187.0 → 2.188.0

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.CRO4Odto.js";
-import { C as A } from "../chunks/tab-group.CjISeeMB.js";
+import { C as A } from "../chunks/tab-group.uSHlsFu8.js";
 import "../chunks/custom-element.L4WJXn1j.js";
 import "../chunks/i18n.DbXTTLXx.js";
 import "../chunks/scroll.xtO5yojm.js";

package/library/components/tab.js

@@ -1,6 +1,6 @@
 import { n as a, C as v } from "../chunks/lib-cortex-element.CVMmyPMC.js";
-import { c as u } from "../chunks/component.styles.CRO4Odto.js";
-import { c as h } from "../chunks/custom-element.L4WJXn1j.js";
+import { c as h } from "../chunks/component.styles.CRO4Odto.js";
+import { c as u } from "../chunks/custom-element.L4WJXn1j.js";
 import { L as f } from "../chunks/i18n.DbXTTLXx.js";
 import { H as x } from "../chunks/slot.j5oheLJC.js";
 import { w as p } from "../chunks/watch.DJF5K-8U.js";
@@ -30,6 +30,12 @@ const w = b`.tab{border-radius:var(--cx-border-radius-small);padding:var(--tab-p
     );
   }
 
+
+  :host([data-cx-tab-group__tab--hidden]) {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
   ${w}
 
   ${k}
@@ -90,7 +96,7 @@ let I = 0, t = class extends v {
     }
   }
 };
-t.styles = [u, C];
+t.styles = [h, C];
 t.dependencies = {
   "cx-icon-button": g,
   "cx-line-clamp": y
@@ -129,7 +135,7 @@ e([
   p("disabled")
 ], t.prototype, "handleDisabledChange", 1);
 t = e([
-  h("cx-tab")
+  u("cx-tab")
 ], t);
 export {
   t as default

package/library/components/types.js

@@ -75,7 +75,7 @@ import { default as FJt } from "./step.js";
 import { default as jJt } from "./stepper.js";
 import db from "./switch.js";
 import a3 from "./tab.js";
-import { C as s3, T as MF, a as PF, b as NF, g as r8 } from "../chunks/tab-group.CjISeeMB.js";
+import { C as s3, T as MF, a as PF, b as NF, g as r8 } from "../chunks/tab-group.uSHlsFu8.js";
 import s6 from "./tab-panel.js";
 import { default as VJt } from "./tag.js";
 import l6 from "./textarea.js";
@@ -138326,6 +138326,9 @@ const xzt = IFt.extend({
         },
         onUpdate() {
           u && u.requestUpdate();
+        },
+        parseOptions: {
+          preserveWhitespace: !0
         }
       }), c = k, k;
     },

package/library/package.json

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

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

@@ -1,5 +1,6 @@
 import { HideOptions, Rect } from '@floating-ui/dom';
 import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { PopupToggle } from '../../../../types/src/popup';
 import { CSSResultGroup } from 'lit';
 
 export interface VirtualElement {
@@ -66,6 +67,13 @@ export default class CxPopup extends CortexElement {
      * clipped, using a `fixed` position strategy can often workaround it.
      */
     strategy: 'absolute' | 'fixed' | 'overlay';
+    /**
+     * Determines how the popup hides its panel while closed. `display` takes the panel out of layout,
+     * so nothing inside a closed popup is measured or can grow its surroundings. `visibility` keeps
+     * the panel laid out and only hides it visually, which lets it be measured before opening and
+     * avoids a flash on first open, at the cost of a closed panel that still occupies layout.
+     */
+    toggle: PopupToggle;
     /** The distance in pixels from which to offset the panel away from its anchor. */
     distance: number;
     /** The distance in pixels from which to offset the panel along its anchor. */

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

@@ -57,7 +57,7 @@ export default class CxTabGroup extends CortexElement {
      * repeatedly in quick succession (resize, slotchange, alignment/label changes), and each call creates its own
      * observer that only disconnects itself once its callback fires. Without tracking and disconnecting the previous
      * instance up front, a stale observer can fire after a newer one already recomputed tab visibility, overwriting
-     * dropdownOffset/data-hidden with outdated results.
+     * dropdownOffset and the tabs' hidden marker with outdated results.
      */
     private overflowObserver?;
     private tabs;
@@ -118,6 +118,7 @@ export default class CxTabGroup extends CortexElement {
     minTabWidth: number;
     /** 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;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**

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

@@ -0,0 +1,4 @@
+export declare enum PopupToggle {
+    Display = "display",
+    Visibility = "visibility"
+}

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

@@ -431,6 +431,10 @@
           * Determines how the popup is positioned. The `absolute` strategy works well in most cases, but if overflow is clipped, using a `fixed` position strategy can often workaround it.
         */
         strategy?: 'absolute' | 'fixed' | 'overlay';
+        /**
+          * Determines how the popup hides its panel while closed. `display` takes the panel out of layout, so nothing inside a closed popup is measured or can grow its surroundings. `visibility` keeps the panel laid out and only hides it visually, which lets it be measured before opening and avoids a flash on first open, at the cost of a closed panel that still occupies layout.
+        */
+        toggle?: 'display' | 'visibility';
         /**
           * The distance in pixels from which to offset the panel away from its anchor.
         */

package/package.json

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