@orangelogic/design-system 3.49.0 → 3.51.0

package/library/package.json

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

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

@@ -99,6 +99,11 @@ export default class CxSelect extends CortexElement implements CortexFormControl
      * The original unmatched value is preserved for form submission.
      */
     fallbackOptionValue: string;
+    /**
+     * Lets an empty value select the option whose value is an empty string, such as a "None" option.
+     * Off by default because an option without a declared value also has an empty value.
+     */
+    matchEmptyValue: boolean;
     /**
      * The default value of the form control. Primarily used for resetting the form control.
      */

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

@@ -8,20 +8,30 @@ import { default as CxIconButton } from '../icon-button/icon-button';
 import { default as CxMenu } from '../menu/menu';
 import { default as CxMenuItem } from '../menu-item/menu-item';
 import { default as CxTab } from '../tab/tab';
+import { default as CxTabPanel } from '../tab-panel/tab-panel';
 /**
  * @summary Tab groups organize content into a container that shows one section at a time.
  *
  * @description Tab groups make use of [tabs](?s=atoms&id=/tab) and [tab panels](?s=atoms&id=/tab-panel).
  * Each tab must be slotted into the `nav` slot and its `panel` must refer to a tab panel of the same name.
  *
+ * When tabs overflow the available width, `overflow-variant` controls how the rest are reached: `scroll`
+ * (default) adds scroll buttons, `dropdown` collapses the overflow into a trigger and menu, and `pagination`
+ * splits the tabs into fixed-size pages. With `overflow-variant="dropdown"`, `promote-active-overflow-tab`
+ * keeps a selected hidden tab visible next to the trigger by swapping it with the tab it displaces, without
+ * reordering either tab in the light DOM. The dropdown trigger sits outside the tablist as its own tab stop and
+ * follows the menu button pattern; arrow keys, Home and End in the tablist only move between the visible tabs.
+ *
  * @slot (default) - Used for grouping tab panels in the tab group. Must be `<cx-tab-panel>` elements.
  * @slot nav - Used for grouping tabs in the tab group. Must be `<cx-tab>` elements.
  *
- * @event {{ name: String }} cx-tab-show - Emitted when a tab is shown.
+ * @event {{ name: String }} cx-tab-show - Emitted when a tab is shown. With `force-on-change`, also emitted when
+ *   the user selects the active tab again.
  * @event {{ name: String }} cx-tab-hide - Emitted when a tab is hidden.
  *
  * @csspart base - The component's base wrapper.
  * @csspart nav - The tab group's navigation container where tabs are slotted in.
+ * @csspart tab-group - The row holding the active-tab indicator, the tabs, and the overflow dropdown trigger.
  * @csspart tabs - The container that wraps the tabs.
  * @csspart active-tab-indicator - The line that highlights the currently selected tab.
  * @csspart body - The tab group's body where tab panels are slotted in.
@@ -29,12 +39,18 @@ import { default as CxTab } from '../tab/tab';
  * @csspart scroll-button--start - The starting scroll button.
  * @csspart scroll-button--end - The ending scroll button.
  * @csspart scroll-button__base - The scroll button's exported `base` part.
+ * @csspart dot - A pagination dot, shown when `overflow-variant="pagination"` overflows more than one page.
+ * @csspart dot--active - The pagination dot for the currently active page.
  *
  * @cssproperty --indicator-color - The color of the active tab indicator.
+ * @cssproperty [--indicator-width=2px] - The thickness of the active tab indicator.
  * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
  * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
  * @cssproperty [--tab-dropdown-trigger-max-width=150px] - The maximum width of the dropdown button.
+ * @cssproperty [--tab-dropdown-menu-max-width=300px] - The maximum width of each item in the dropdown menu, which the
+ *   menu shrinks to. Longer tab labels are truncated with an ellipsis.
  * @cssproperty [--tab-group-nav-padding=0] - The padding around the tab group's navigation container.
+ * @cssproperty [--tab-group-tabs-gap=normal] - The horizontal gap between tabs.
  * @cssproperty [--tab-group-tabs-padding=var(--cx-spacing-2x-small)] - The padding around the tabs in the button variant.
  * @cssproperty [--tab-group-top-gap=var(--cx-spacing-small)] - The gap between the nav and body when placement is top.
  */
@@ -48,6 +64,7 @@ export default class CxTabGroup extends CortexElement {
         'cx-menu-item': typeof CxMenuItem;
         'cx-resize-observer': typeof CxResizeObserver;
         'cx-tab': typeof CxTab;
+        'cx-tab-panel': typeof CxTabPanel;
     };
     private readonly localize;
     private mutationObserver;
@@ -62,6 +79,15 @@ export default class CxTabGroup extends CortexElement {
      * dropdownOffset and the tabs' hidden marker with outdated results.
      */
     private overflowObserver?;
+    /**
+     * Waits for the group to become visible to apply the initial active tab. Tracked so disconnectedCallback() can
+     * release it when the group is removed before it was ever shown.
+     */
+    private initialTabObserver?;
+    /** Tab kept visible next to the dropdown trigger by promote-active-overflow-tab. */
+    private promotedTab?;
+    /** Tab to refocus once its promotion's fit-loop pass clears the hidden attribute (see restorePromotedTabFocus). */
+    private promotedTabPendingFocus?;
     private tabs;
     private focusableTabs;
     private panels;
@@ -118,6 +144,13 @@ 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;
+    /**
+     * When set to true, the `cx-tab-show` event will be emitted when the user selects the active tab again,
+     * even if the active tab is not changed.
+     */
+    forceOnChange: 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;
@@ -140,10 +173,22 @@ export default class CxTabGroup extends CortexElement {
     private getAllTabs;
     private getAllPanels;
     private getActiveTab;
+    /**
+     * The column gap between tabs (--tab-group-tabs-gap) in pixels; `normal` reads as 0.
+     */
+    private getTabGap;
     /**
      * 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();
+    /** Whether promote-active-overflow-tab currently applies (it needs the dropdown overflow to be in effect). */
+    private get isPromotionEnabled();
     /**
      * Get the height of the body
      */
@@ -154,12 +199,54 @@ export default class CxTabGroup extends CortexElement {
     private get caretDirection();
     private handleClick;
     private handleKeyDown;
+    /**
+     * The tab that an arrow key, Home or End moves focus to: the first, last, previous or next enabled tab that is in
+     * the tablist, wrapping at both ends. Tabs hidden in the dropdown are menu items, not tabs, so they are skipped.
+     */
+    private getKeyboardTargetTab;
     private handleScrollToStart;
     private handleScrollToEnd;
-    private handleDropdownAfterShow;
+    /**
+     * Promotes a tab that is already active when the group first renders (e.g. server-rendered after a round trip),
+     * so the first overflow pass never hides it. A display:none tab can't hold focus, so a host focusing it right
+     * after mount would otherwise lose focus. This can't wait for the first-load callback in connectedCallback():
+     * that callback runs a frame later, after the first overflow pass has already hidden the tab.
+     * Sets promotedTab only; the caller's syncTabsAndPanels() applies it.
+     */
+    private promoteInitialActiveTab;
+    /**
+     * The tab to select on first load: the first enabled `active` tab, else the first enabled tab. When a tab is
+     * explicitly active it matches what promoteInitialActiveTab() promoted.
+     * Skipping disabled tabs matters because setActiveTab() refuses them, which would leave nothing selected.
+     */
+    private findInitialTab;
+    /** Marks tab as promoted (see promotedTab) without moving it in the DOM. */
+    private promoteHiddenActiveTab;
+    /** Queues tab to be refocused in syncTabAndPanels() once promoteHiddenActiveTab()'s fit-loop pass makes it visible again. */
+    private restorePromotedTabFocus;
+    /**
+     * Single entry point for user and API activation, so every path keeps the promoted active tab visible.
+     * promoteHiddenActiveTab() only schedules the overflow pass, which runs later in an IntersectionObserver callback,
+     * so setActiveTab() still sees the tab hidden. restorePromotedTabFocus() must come first: promoteHiddenActiveTab()
+     * drops the refocus it queues when no pass is needed.
+     * Pass restoreFocus only when focus is on the tab itself (click, Enter/Space), not when it moves elsewhere.
+     * Pass isUserSelection only for an explicit pick (click, Enter/Space): with force-on-change it re-emits
+     * cx-tab-show for the active tab, which programmatic and arrow-key paths must not do.
+     */
+    private activateTab;
+    /**
+     * Roving tabindex: the active tab is the tablist's only tab stop. While the active tab is hidden in the dropdown,
+     * the first visible enabled tab takes its place so Tab can still reach the tablist.
+     */
+    private syncTabStop;
     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.
      */
@@ -174,6 +261,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. Forward returns null on overflow instead of guessing a hidden tab — promotion breaks the contiguous-hidden-suffix assumption. */
     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
@@ -189,6 +277,7 @@ export default class CxTabGroup extends CortexElement {
     handleVariantChange(): Promise<void>;
     handleOverflowVariantChange(): void;
     handleDropdownLabelChange(): void;
+    handlePromoteActiveOverflowTabChange(): void;
     handleAbsoluteHeightChange(): void;
     handleTabAlignmentChange(): void;
     handleTabsPerPageChange(): Promise<void>;
@@ -210,6 +299,12 @@ export default class CxTabGroup extends CortexElement {
     private handlePaginationDotClick;
     private handlePaginationDotKeyDown;
     private renderPaginationDot;
+    /**
+     * The overflow trigger and its menu follow the menu button pattern and sit outside the tablist, which may only own
+     * tabs. cx-dropdown and cx-menu provide the keyboard behavior (arrow keys wrap, Home/End, Escape returns focus to
+     * the trigger).
+     */
+    private renderDropdown;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/library/packages/hybrid/rich-text/src/rich-text.d.ts

@@ -19,6 +19,13 @@ import { RichTextMenuBarSpec, RichTextStyleFormat, RichTextToolbarSpec } from '.
  * @cssproperty --width - The width of the rich text editor
  * @cssproperty --rich-text-background-color - The background color of the rich text editor
  * @cssproperty --rich-text-font-family - The font family applied to the editor content area. Inherits from the page font when not set.
+ * @cssproperty --rich-text-border - The border around the rich text editor
+ * @cssproperty --rich-text-border-radius - The border radius of the rich text editor
+ * @cssproperty --rich-text-toolbar-background-color - The background color of the toolbar
+ * @cssproperty --rich-text-toolbar-border-color - The color of the line between the toolbar and the content
+ * @cssproperty --rich-text-table-resize-handle-color - The color of the table column and row resize handles
+ * @cssproperty --rich-text-inline-code-color - The text color of inline code
+ * @cssproperty --rich-text-inline-code-background-color - The background color of inline code
  *
  * @description When `editable` is true, a `cx-rich-text-toolbar` is rendered above the editor using the same `Editor`
  * instance for formatting commands. Set **`show-toolbar`** to false to hide only the formatting **icon row** (menu bar is unchanged).
@@ -99,6 +106,8 @@ export default class CxRichText extends CortexElement {
      * skipped when `getHTML()` is unchanged.
      */
     private lastContent;
+    /** False until this component's onCreate ran; updates before it are the editor normalising its own content. */
+    private editorCreated;
     content: string;
     editable: boolean;
     /**

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

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

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

@@ -1986,6 +1986,10 @@
           * The fallback option value used when the select value does not match any explicitly declared option. The original unmatched value is preserved for form submission.
         */
         fallbackOptionValue?: string;
+        /**
+          * Lets an empty value select the option whose value is an empty string, such as a "None" option. Off by default because an option without a declared value also has an empty value.
+        */
+        matchEmptyValue?: boolean;
         /**
           * The default value of the form control. Primarily used for resetting the form control.
         */
@@ -2264,6 +2268,14 @@
           * 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;
+        /**
+          * When set to true, the `cx-tab-show` event will be emitted when the user selects the active tab again, even if the active tab is not changed.
+        */
+        forceOnChange?: boolean;
         /**
           * Make localization attributes reactive eslint-disable-next-line lit/no-native-attributes
         */
@@ -5886,6 +5898,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": "3.49.0",
+  "version": "3.51.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {