@orangelogic/design-system 3.0.0 → 3.1.0

package/library/package.json

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

package/library/packages/atoms/src/components/icon-button/icon-button.d.ts

@@ -84,6 +84,17 @@ export default class CxIconButton extends CortexElement {
      * Draws a circular icon button.
      */
     circle: boolean;
+    /**
+     * Marks this button as a toggle control and reflects its state via `aria-pressed`.
+     * Leave unset for buttons that are not toggles (the default `role="button"` stays unchanged either way).
+     */
+    pressed?: boolean;
+    /**
+     * Overrides the button's tabindex (e.g. for a roving-tabindex toolbar). Leave unset to keep the
+     * default behavior: `0` when enabled, `-1` when `disabled` or `loading`.
+     * Attribute is `tab-index` (not the derived `tab-index-value`) to mirror the native `tabindex` attribute.
+     */
+    tabIndexValue?: number;
     private styleObserver?;
     connectedUpdatedCallback(): void;
     disconnectedCallback(): void;

package/library/packages/atoms/src/components/menu-item/submenu-controller.d.ts

@@ -33,6 +33,7 @@ export declare class SubmenuController implements ReactiveController {
     hostConnected(): void;
     hostDisconnected(): void;
     hostUpdated(): void;
+    private syncAriaExpanded;
     private addListeners;
     private removeListeners;
     private syncIsHorizontalMenu;

package/library/packages/hybrid/table-core/src/table/styles/table-frozen.styles.d.ts

@@ -1,8 +1,8 @@
 /**
- * Sticky can't pin frozen cells here — every wrapper up to the real horizontal scroller (the
- * OverlayScrollbars viewport on `.tabulator`) is `width: max-content` and never scrolls — so
- * `syncFrozenOffset` mirrors the viewport's scrollLeft into these vars instead. If horizontal
- * scrolling ever moves back onto `.tabulator-tableholder`, delete this sheet.
+ * Frozen columns are pinned by `position: sticky` written from `FrozenColumns.layoutElement`, and
+ * their resize handles by matching insets from `ResizeColumns.reinitializeColumn`. Both resolve
+ * against `.tabulator-tableholder`, the table's single scroll container — keep it that way. This
+ * sheet only owns what sticky cannot express: the freeze divider and the stacking order around it.
  */
 declare const _default: import('lit').CSSResult;
 export default _default;

package/library/packages/hybrid/table-core/src/table/styles/table-overlay-scrollbar.styles.d.ts

@@ -1,9 +1,12 @@
 /**
- * use-overlay-scrollbar: table-scoped OverlayScrollbars rules — structure of
- * the generated horizontal viewport, positioning of the scrollbars slotted
- * into `.table` (see initVerticalScrollbar), and the mapping of the `:host`
- * scrollbar css vars (declared below) onto the OverlayScrollbars theme so
- * tables with and without use-overlay-scrollbar look the same.
+ * use-overlay-scrollbar: table-scoped OverlayScrollbars rules — positioning of
+ * the scrollbars slotted into `.table` (see initScrollbars) and the mapping of
+ * the `:host` scrollbar css vars (declared below) onto the OverlayScrollbars
+ * theme so tables with and without use-overlay-scrollbar look the same.
+ *
+ * There are deliberately no rules for a generated viewport element: the single
+ * instance runs in `viewportIsTarget` mode so `.tabulator-tableholder` stays
+ * the scroll container that frozen columns pin against.
  */
 declare const _default: import('lit').CSSResult;
 export default _default;

package/library/packages/hybrid/table-core/src/table/table.d.ts

@@ -102,10 +102,7 @@ export default class CxTable extends CortexElement {
         'cx-table-toolbar': typeof CxTableToolbar;
         'cx-tooltip': typeof CxTooltip;
     };
-    private verticalOsInstance;
-    private horizontalOsInstance;
-    /** Removes the horizontal scrollbar's scroll listener (see syncFrozenOffset). */
-    private frozenScrollOff;
+    private osInstance;
     private resizeObserver;
     private overflowObserver;
     private readonly ajaxFacetsController;
@@ -926,14 +923,7 @@ export default class CxTable extends CortexElement {
     private repositionValidationTooltipNow;
     private handleValidationMouseOut;
     disconnectedCallback(): void;
-    private initVerticalScrollbar;
-    private initHorizontalScrollbar;
-    /**
-     * Mirrors the horizontal scroller's offset into `--frozen-offset-start/end` so
-     * `table-frozen.styles.ts` can pin frozen columns. Deliberately not debounced: the offset must
-     * land in the same frame as the scroll, and it is only two custom-property writes.
-     */
-    private syncFrozenOffset;
+    private initScrollbars;
     private readonly checkHorizontalOverflow;
     private initOverflowObserver;
     private registerEventListeners;

package/library/packages/hybrid/table-core/src/tabulator-tables/core/RowManager.d.ts

@@ -62,6 +62,7 @@ export default class RowManager extends CoreFeature implements IRowManager {
     getElement(): HTMLElement;
     getTableElement(): HTMLElement;
     initialize(): void;
+    private initializeWheelWatcher;
     /**
      * IRow Manipulation
      */

package/library/packages/hybrid/table-core/src/tabulator-tables/modules/ResizeColumns/ResizeColumns.d.ts

@@ -28,6 +28,8 @@ export default class ResizeColumns extends Module {
      * walks `columns` because `columnsByIndex` is still empty when `column-rendered` creates handles.
      */
     private isPinnedEnd;
+    private pinHandle;
+    private repinFrozenHandles;
     /**
      * The in-flow handle goes right after the element it resizes — except for an end-pinned column,
      * whose right edge is the table edge: its handle goes before the element, onto the freeze
@@ -35,9 +37,9 @@ export default class ResizeColumns extends Module {
      */
     private attachHandle;
     /**
-     * Re-inserts handles next to the element they resize. Upstream wrote `left`/`right` insets here
-     * for frozen columns, which added to the flow position and pushed handles a column width off;
-     * frozen handles travel via `table-frozen.styles.ts` instead (which also owns their z-index).
+     * Re-inserts handles next to the element they resize and re-pins the frozen ones. Runs off
+     * `column-width`, which `FrozenColumns` subscribes to first (in `initialize()`, whereas this
+     * module subscribes lazily from `column-rendered`), so the margins read here are already current.
      */
     reinitializeColumn(column: Column): void;
     initializeColumn(type: string, component: any, column: Column, element: HTMLElement): void;

package/library/packages/organisms/src/comment/components/comment-menu/comment-menu.d.ts

@@ -29,6 +29,7 @@ export default class CxCommentMenu extends CortexElement {
     popup: CxPopup;
     linkTextInput: HTMLInputElement;
     linkUrlInput: HTMLInputElement;
+    private formatButtons;
     editor: Editor;
     fullscreen: boolean;
     canUpload: boolean;
@@ -49,6 +50,8 @@ export default class CxCommentMenu extends CortexElement {
      */
     hideTimeBasedIcon: boolean;
     private showTextFormats;
+    /** Index (within `formatButtons`) of the toolbar control that currently has `tabindex="0"`. */
+    private rovingIndex;
     private showLinkPopup;
     private linkTextValue;
     private linkUrlValue;
@@ -70,6 +73,10 @@ export default class CxCommentMenu extends CortexElement {
     private handleBulletListClick;
     private handleOrderedListClick;
     private handleLinkClick;
+    /** Roving-tabindex arrow-key navigation for the formatting toolbar (APG toolbar pattern). */
+    private handleToolbarKeyDown;
+    /** Keeps the roving tabindex in sync when a toolbar button is focused directly (click, or Tab back in). */
+    private handleToolbarFocusIn;
     private handleLinkPopupOpen;
     private handleLinkPopupSave;
     private handleLinkTextInputChange;
@@ -84,6 +91,9 @@ export default class CxCommentMenu extends CortexElement {
     handleEditorChange(): void;
     runConnectedCallback(): void;
     disconnectedCallback(): void;
+    /** Config for the toolbar's mark-toggle buttons (the Link button is rendered separately; it needs the popup wrapper). */
+    private get markFormatButtons();
+    private renderMarkFormatButton;
     renderTextFormatMenu(): import('lit').TemplateResult<1>;
     protected renderLeftMenu(): import('lit').TemplateResult<1>;
     protected renderRightActions(): import('lit').TemplateResult<1>;

package/library/packages/organisms/src/downloader/downloader.d.ts

@@ -168,7 +168,7 @@ export default class CxDownloader extends CortexElement {
     handleDrag(event: PointerEvent): void;
     hide(): void;
     show(): void;
-    updateTabIndex(): void;
+    updateVisibilityAttributes(): void;
     getDownloadingFilesFromLocalStorage(): void;
     onFilter(key: keyof DownloadItem, value: any): void;
     updateFilteredFiles(): void;

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

@@ -213,6 +213,14 @@
           * Draws a circular icon button.
         */
         circle?: boolean;
+        /**
+          * Marks this button as a toggle control and reflects its state via `aria-pressed`. Leave unset for buttons that are not toggles (the default `role="button"` stays unchanged either way).
+        */
+        pressed?: boolean;
+        /**
+          * Overrides the button's tabindex (e.g. for a roving-tabindex toolbar). Leave unset to keep the default behavior: `0` when enabled, `-1` when `disabled` or `loading`. Attribute is `tab-index` (not the derived `tab-index-value`) to mirror the native `tabindex` attribute.
+        */
+        tabIndexValue?: number;
         /**
           * 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.0.0",
+  "version": "3.1.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {