@xh/hoist 59.2.0 → 59.3.1

package/desktop/cmp/panel/Panel.ts

@@ -4,34 +4,34 @@
  *
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
+import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 import {box, frame, vbox, vframe} from '@xh/hoist/cmp/layout';
 import {
     BoxProps,
+    hoistCmp,
+    HoistModel,
     HoistProps,
     refreshContextView,
     Some,
     TaskObserver,
     useContextModel,
-    uses,
-    hoistCmp,
-    HoistModel
+    uses
 } from '@xh/hoist/core';
 import {loadingIndicator} from '@xh/hoist/desktop/cmp/loadingindicator';
 import {mask} from '@xh/hoist/desktop/cmp/mask';
 import {toolbar} from '@xh/hoist/desktop/cmp/toolbar';
 import {useContextMenu, useHotkeys} from '@xh/hoist/desktop/hooks';
 import '@xh/hoist/desktop/register';
+import {HotkeyConfig} from '@xh/hoist/kit/blueprint';
 import {splitLayoutProps} from '@xh/hoist/utils/react';
 import {castArray, omitBy} from 'lodash';
 import {Children, isValidElement, ReactElement, ReactNode, useLayoutEffect, useRef} from 'react';
+import {ContextMenuSpec} from '../contextmenu/ContextMenu';
 import {modalSupport} from '../modalsupport/ModalSupport';
 import {panelHeader} from './impl/PanelHeader';
 import {resizeContainer} from './impl/ResizeContainer';
 import './Panel.scss';
 import {PanelModel} from './PanelModel';
-import {HotkeyConfig} from '@xh/hoist/kit/blueprint';
-import {ContextMenuSpec} from '../contextmenu/ContextMenu';
-import {errorBoundary} from '@xh/hoist/cmp/error/ErrorBoundary';
 
 export interface PanelProps extends HoistProps<PanelModel>, Omit<BoxProps, 'title'> {
     /** True to style panel header (if displayed) with reduced padding and font-size. */
@@ -113,7 +113,7 @@ export const [Panel, panel] = hoistCmp.withFactory<PanelProps>({
     }),
     className: 'xh-panel',
 
-    render({model, className, ...props}, ref) {
+    render({model, className, testId, ...props}, ref) {
         const contextModel = useContextModel('*');
 
         let wasDisplayed = useRef(false),
@@ -224,24 +224,28 @@ export const [Panel, panel] = hoistCmp.withFactory<PanelProps>({
             item = refreshContextView({model: refreshContextModel, item});
         }
 
+        // 5) Return wrapped in resizable + modal affordances if needed, or equivalent layout box
+
+        const useResizeContainer = resizable || collapsible || showSplitter;
+
+        // For modalSupport, create additional frame that will follow content to portal and apply
+        // className and testId accordingly
         if (modalSupportModel) {
             item = modalSupport({
                 model: modalSupportModel,
                 item: frame({
-                    // Frame ensures className is still present when rendered in Dialog
                     item,
-                    className: model.isModal ? className : undefined
+                    className: model.isModal ? className : undefined,
+                    testId: model.isModal ? testId : undefined
                 })
             });
         }
 
-        // 5) Return wrapped in resizable affordances if needed, or equivalent layout box
-        item =
-            resizable || collapsible || showSplitter
-                ? resizeContainer({ref, item, className})
-                : box({ref, item, className, ...layoutProps});
+        testId = model.isModal ? undefined : testId; // Only apply testId once
 
-        return item;
+        return useResizeContainer
+            ? resizeContainer({ref, item, className, testId})
+            : box({ref, item, className, testId, ...layoutProps});
     }
 });
 

package/desktop/cmp/panel/impl/ResizeContainer.ts

@@ -7,8 +7,8 @@
 import composeRefs from '@seznam/compose-react-refs';
 import {box, hbox, vbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp, useContextModel} from '@xh/hoist/core';
-import {Children} from 'react';
 import {isString} from 'lodash';
+import {Children} from 'react';
 import {PanelModel} from '../PanelModel';
 import {dragger} from './dragger/Dragger';
 import {splitter} from './Splitter';
@@ -18,7 +18,7 @@ export const resizeContainer = hoistCmp.factory({
     model: false,
     className: 'xh-resizable',
 
-    render({className, children}, ref) {
+    render({className, children, testId}, ref) {
         const panelModel = useContextModel(PanelModel),
             {size, resizable, collapsed, vertical, contentFirst, showSplitter} = panelModel,
             dim = vertical ? 'height' : 'width',
@@ -54,6 +54,7 @@ export const resizeContainer = hoistCmp.factory({
             [dim]: cmpSize,
             [maxDim]: '100%',
             [minDim]: dragBarWidth,
+            testId,
             items
         });
     }

package/desktop/cmp/pinpad/impl/PinPad.ts

@@ -6,6 +6,7 @@
  */
 import composeRefs from '@seznam/compose-react-refs';
 import {div, frame, h1, hbox, p, span, vbox, vframe} from '@xh/hoist/cmp/layout';
+import {PinPadModel} from '@xh/hoist/cmp/pinpad';
 import {hoistCmp} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
@@ -13,19 +14,19 @@ import {Icon} from '@xh/hoist/icon/Icon';
 import {isNumber} from 'lodash';
 
 import './PinPad.scss';
-import {PinPadModel} from '@xh/hoist/cmp/pinpad';
 
 /**
  * Desktop Implementation of PinPad.
  *
  * @internal
  */
-export function pinPadImpl({model}, ref) {
+export function pinPadImpl({model, testId}, ref) {
     return frame({
         ref: composeRefs(model.ref, ref),
         item: vframe({
             className: 'xh-pinpad__frame',
-            items: [header(), display(), errorDisplay(), keypad()]
+            items: [header(), display(), errorDisplay(), keypad()],
+            testId
         })
     });
 }

package/desktop/cmp/record/RecordActionBar.ts

@@ -7,7 +7,7 @@
 
 import {Column, GridModel} from '@xh/hoist/cmp/grid';
 import {hoistCmp} from '@xh/hoist/core';
-import {RecordActionSpec, RecordAction, StoreRecord, StoreSelectionModel} from '@xh/hoist/data';
+import {RecordAction, RecordActionSpec, StoreRecord, StoreSelectionModel} from '@xh/hoist/data';
 import {buttonGroup, ButtonGroupProps} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
 import {throwIf} from '@xh/hoist/utils/js';
@@ -52,8 +52,17 @@ export const [RecordActionBar, recordActionBar] = hoistCmp.withFactory<RecordAct
     className: 'xh-record-action-bar',
 
     render(props) {
-        const {actions, record, selModel, gridModel, column, buttonProps, vertical, ...rest} =
-            props;
+        const {
+            actions,
+            record,
+            selModel,
+            gridModel,
+            column,
+            buttonProps,
+            vertical,
+            testId,
+            ...rest
+        } = props;
 
         throwIf(
             !record && !selModel,

package/desktop/cmp/record/impl/RecordActionButton.ts

@@ -74,6 +74,7 @@ export const [RecordActionButton, recordActionButton] =
                 intent,
                 title,
                 disabled,
+                testId: action.testId,
                 onClick: () => action.call({record, selectedRecords, gridModel, column}),
                 ...rest
             });

package/desktop/cmp/rest/Actions.ts

@@ -14,7 +14,8 @@ export const addAction: RecordActionSpec = {
     icon: Icon.add(),
     intent: 'success',
     actionFn: ({gridModel}) => gridModel.appData.restGridModel.addRecord(),
-    displayFn: ({gridModel}) => ({hidden: gridModel.appData.restGridModel.readonly})
+    displayFn: ({gridModel}) => ({hidden: gridModel.appData.restGridModel.readonly}),
+    testId: 'add-action-button'
 };
 
 export const editAction: RecordActionSpec = {
@@ -23,14 +24,16 @@ export const editAction: RecordActionSpec = {
     intent: 'primary',
     recordsRequired: 1,
     actionFn: ({record, gridModel}) => gridModel.appData.restGridModel.editRecord(record),
-    displayFn: ({gridModel}) => ({hidden: gridModel.appData.restGridModel.readonly})
+    displayFn: ({gridModel}) => ({hidden: gridModel.appData.restGridModel.readonly}),
+    testId: 'edit-action-button'
 };
 
 export const viewAction: RecordActionSpec = {
     text: 'View',
     icon: Icon.search(),
     recordsRequired: 1,
-    actionFn: ({record, gridModel}) => gridModel.appData.restGridModel.viewRecord(record)
+    actionFn: ({record, gridModel}) => gridModel.appData.restGridModel.viewRecord(record),
+    testId: 'view-action-button'
 };
 
 export const cloneAction: RecordActionSpec = {
@@ -38,7 +41,8 @@ export const cloneAction: RecordActionSpec = {
     icon: Icon.copy(),
     recordsRequired: 1,
     actionFn: ({record, gridModel}) => gridModel.appData.restGridModel.cloneRecord(record),
-    displayFn: ({gridModel}) => ({hidden: gridModel.appData.restGridModel.readonly})
+    displayFn: ({gridModel}) => ({hidden: gridModel.appData.restGridModel.readonly}),
+    testId: 'clone-action-button'
 };
 
 export const deleteAction: RecordActionSpec = {
@@ -49,5 +53,6 @@ export const deleteAction: RecordActionSpec = {
     displayFn: ({gridModel, record}) => ({
         hidden: (record && record.id === null) || gridModel.appData.restGridModel.readonly // Hide this action if we are acting on a "new" record
     }),
-    actionFn: ({gridModel}) => gridModel.appData.restGridModel.confirmDeleteRecords()
+    actionFn: ({gridModel}) => gridModel.appData.restGridModel.confirmDeleteRecords(),
+    testId: 'delete-action-button'
 };

package/desktop/cmp/rest/RestGrid.ts

@@ -11,6 +11,7 @@ import {hoistCmp, HoistProps, PlainObject, Some, uses} from '@xh/hoist/core';
 import {MaskProps} from '@xh/hoist/desktop/cmp/mask';
 import {panel, PanelProps} from '@xh/hoist/desktop/cmp/panel';
 import '@xh/hoist/desktop/register';
+import {getTestId} from '@xh/hoist/utils/js';
 import {cloneElement, isValidElement, ReactElement, ReactNode} from 'react';
 
 import {restForm} from './impl/RestForm';
@@ -46,18 +47,31 @@ export const [RestGrid, restGrid] = hoistCmp.withFactory<RestGridProps>({
     model: uses(RestGridModel, {publishMode: 'limited'}),
     className: 'xh-rest-grid',
 
-    render({model, extraToolbarItems, mask = true, agOptions, formClassName, ...props}, ref) {
-        const {formModel, gridModel} = model;
+    render(props, ref) {
+        const {
+                model,
+                extraToolbarItems,
+                mask = true,
+                agOptions,
+                formClassName,
+                testId,
+                ...restProps
+            } = props,
+            {formModel, gridModel} = model;
 
         return fragment(
             panel({
                 ref,
-                ...props,
-                tbar: restGridToolbar({model, extraToolbarItems}),
-                item: grid({model: gridModel, agOptions}),
+                ...restProps,
+                tbar: restGridToolbar({model, extraToolbarItems, testId}),
+                item: grid({model: gridModel, agOptions, testId: getTestId(testId, 'grid')}),
                 mask: getMaskFromProp(model, mask)
             }),
-            restForm({model: formModel, className: formClassName})
+            restForm({
+                model: formModel,
+                className: formClassName,
+                testId: getTestId(testId, 'form')
+            })
         );
     }
 });

package/desktop/cmp/rest/impl/RestForm.ts

@@ -25,7 +25,7 @@ export const restForm = hoistCmp.factory({
     model: uses(RestFormModel),
     className: 'xh-rest-form',
 
-    render({model, className}) {
+    render({model, className, testId}) {
         const {isAdd, readonly, isOpen, dialogRef} = model;
         if (!isOpen) return null;
 
@@ -36,7 +36,7 @@ export const restForm = hoistCmp.factory({
             isOpen: true,
             isCloseButtonShown: false,
             item: panel({
-                item: formDisplay(),
+                item: formDisplay({testId}),
                 bbar: tbar(),
                 ref: dialogRef,
                 mask: 'onLoad'
@@ -45,7 +45,7 @@ export const restForm = hoistCmp.factory({
     }
 });
 
-const formDisplay = hoistCmp.factory<RestFormModel>(({model}) => {
+const formDisplay = hoistCmp.factory<RestFormModel>(({model, testId}) => {
     const formFields = model.editors.map(editor => restFormField({editor}));
 
     return form({
@@ -59,7 +59,8 @@ const formDisplay = hoistCmp.factory<RestFormModel>(({model}) => {
         item: div({
             className: 'xh-rest-form__body',
             items: formFields
-        })
+        }),
+        testId
     });
 });
 

package/desktop/cmp/rest/impl/RestGridToolbar.ts

@@ -20,7 +20,7 @@ import {RestGridModel} from '../RestGridModel';
 export const restGridToolbar = hoistCmp.factory({
     model: uses(RestGridModel, {publishMode: 'limited'}),
 
-    render({model, extraToolbarItems}) {
+    render({model, extraToolbarItems, testId}) {
         const {unit, toolbarActions: actions, gridModel, readonly} = model;
 
         let extraItems = extraToolbarItems;
@@ -31,7 +31,8 @@ export const restGridToolbar = hoistCmp.factory({
             recordActionBar({
                 actions,
                 gridModel,
-                selModel: gridModel.selModel
+                selModel: gridModel.selModel,
+                testId
             }),
             toolbarSep({
                 omit: isEmpty(extraItems) || readonly

package/desktop/cmp/tab/TabSwitcher.ts

@@ -19,8 +19,8 @@ import {
     tabs as bpTabs,
     tooltip as bpTooltip
 } from '@xh/hoist/kit/blueprint';
-import {makeObservable, bindable} from '@xh/hoist/mobx';
-import {consumeEvent, debounced, isDisplayed, throwIf} from '@xh/hoist/utils/js';
+import {bindable, makeObservable} from '@xh/hoist/mobx';
+import {consumeEvent, debounced, getTestId, isDisplayed, throwIf} from '@xh/hoist/utils/js';
 import {
     createObservableRef,
     getLayoutProps,
@@ -90,7 +90,9 @@ export const [TabSwitcher, tabSwitcher] = hoistCmp.withFactory<TabSwitcherProps>
         if (!vertical && isFinite(tabMaxWidth)) tabStyle.maxWidth = tabMaxWidth + 'px';
 
         const items = tabs.map(tab => {
-            const {id, title, icon, disabled, tooltip, showRemoveAction, excludeFromSwitcher} = tab;
+            const {id, title, icon, disabled, tooltip, showRemoveAction, excludeFromSwitcher} = tab,
+                testId = getTestId(props, id);
+
             if (excludeFromSwitcher) return null;
             return bpTab({
                 id,
@@ -105,10 +107,12 @@ export const [TabSwitcher, tabSwitcher] = hoistCmp.withFactory<TabSwitcherProps>
                     item: hframe({
                         className: 'xh-tab-switcher__tab',
                         tabIndex: -1,
+                        testId,
                         items: [
                             icon,
                             span(title),
                             button({
+                                testId: getTestId(testId, 'remove-btn'),
                                 omit: !showRemoveAction,
                                 tabIndex: -1,
                                 icon: Icon.x(),
@@ -122,6 +126,7 @@ export const [TabSwitcher, tabSwitcher] = hoistCmp.withFactory<TabSwitcherProps>
 
         return box({
             ...layoutProps,
+            testId: props.testId,
             className: classNames(
                 className,
                 `xh-tab-switcher--${orientation}`,

package/desktop/cmp/tab/impl/Tab.ts

@@ -26,7 +26,7 @@ export const tab = hoistCmp.factory({
     className: 'xh-tab',
     model: uses(TabModel, {publishMode: 'limited'}),
 
-    render({model, className}) {
+    render({model, className, testId}) {
         let {content, isActive, renderMode, refreshContextModel} = model,
             wasActivated = useRef(false);
 
@@ -42,6 +42,7 @@ export const tab = hoistCmp.factory({
         return frame({
             display: isActive ? 'flex' : 'none',
             className,
+            testId,
             item: refreshContextView({
                 model: refreshContextModel,
                 item: errorBoundary(elementFromContent(content, {flex: 1}))

package/desktop/cmp/tab/impl/TabContainer.ts

@@ -5,18 +5,19 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {div, hbox, placeholder, vbox} from '@xh/hoist/cmp/layout';
+import {TabContainerModel, TabContainerProps} from '@xh/hoist/cmp/tab';
+import {getTestId} from '@xh/hoist/utils/js';
 import {getLayoutProps} from '@xh/hoist/utils/react';
 import {isEmpty} from 'lodash';
 import '../Tabs.scss';
 import {tabSwitcher} from '../TabSwitcher';
 import {tab} from './Tab';
-import {TabContainerModel, TabContainerProps} from '@xh/hoist/cmp/tab';
 
 /**
  * Desktop implementation of TabContainer.
  * @internal
  */
-export function tabContainerImpl({model, className, ...props}: TabContainerProps) {
+export function tabContainerImpl({model, className, testId, ...props}: TabContainerProps) {
     const layoutProps = getLayoutProps(props),
         vertical = ['left', 'right'].includes(model.switcher?.orientation),
         container = vertical ? hbox : vbox;
@@ -29,24 +30,26 @@ export function tabContainerImpl({model, className, ...props}: TabContainerProps
     return container({
         ...layoutProps,
         className,
-        item: getChildren(model)
+        testId,
+        item: getChildren(model, testId)
     });
 }
 
-function getChildren(model: TabContainerModel) {
-    const {tabs, activeTabId, switcher} = model,
-        switcherBefore = ['left', 'top'].includes(switcher?.orientation),
-        switcherAfter = ['right', 'bottom'].includes(switcher?.orientation);
-
+function getChildren(model: TabContainerModel, testId: string) {
+    const {tabs} = model;
     if (isEmpty(tabs)) {
-        return div({
-            className: 'xh-tab-wrapper',
-            item: placeholder(model.emptyText)
-        });
+        return div({className: 'xh-tab-wrapper', item: placeholder(model.emptyText)});
     }
 
+    const {activeTabId, switcher} = model,
+        switcherBefore = ['left', 'top'].includes(switcher?.orientation),
+        switcherAfter = ['right', 'bottom'].includes(switcher?.orientation),
+        switcherCmp = switcher
+            ? tabSwitcher({key: 'switcher', testId: getTestId(testId, 'switcher'), ...switcher})
+            : null;
+
     return [
-        switcherBefore ? tabSwitcher({key: 'switcher', ...switcher}) : null,
+        switcherBefore ? switcherCmp : null,
         ...tabs.map(tabModel => {
             const tabId = tabModel.id,
                 style = activeTabId !== tabId ? hideStyle : undefined;
@@ -55,10 +58,10 @@ function getChildren(model: TabContainerModel) {
                 className: 'xh-tab-wrapper',
                 style,
                 key: tabId,
-                item: tab({model: tabModel})
+                item: tab({model: tabModel, testId: getTestId(testId, tabId)})
             });
         }),
-        switcherAfter ? tabSwitcher({key: 'switcher', ...switcher}) : null
+        switcherAfter ? switcherCmp : null
     ];
 }
 

package/desktop/cmp/toolbar/Toolbar.ts

@@ -5,7 +5,7 @@
  * Copyright © 2023 Extremely Heavy Industries Inc.
  */
 import {filler, fragment, hbox, vbox} from '@xh/hoist/cmp/layout';
-import {hoistCmp, BoxProps, HoistProps} from '@xh/hoist/core';
+import {BoxProps, hoistCmp, HoistProps} from '@xh/hoist/core';
 import {button} from '@xh/hoist/desktop/cmp/button';
 import '@xh/hoist/desktop/register';
 import {Icon} from '@xh/hoist/icon';
@@ -65,6 +65,7 @@ export const [Toolbar, toolbar] = hoistCmp.withFactory<ToolbarProps>({
             enableOverflowMenu = false,
             collapseFrom = 'end',
             minVisibleItems,
+            testId,
             ...rest
         },
         ref
@@ -83,6 +84,7 @@ export const [Toolbar, toolbar] = hoistCmp.withFactory<ToolbarProps>({
 
         return container({
             ref,
+            testId,
             ...rest,
             className: classNames(
                 className,

package/desktop/cmp/treemap/SplitTreeMap.ts

@@ -28,12 +28,13 @@ export const [SplitTreeMap, splitTreeMap] = hoistCmp.withFactory<SplitTreeMapPro
     model: uses(SplitTreeMapModel),
     className: 'xh-split-treemap',
 
-    render({model, className, ...props}, ref) {
+    render({model, className, testId, ...props}, ref) {
         const {primaryMapModel, secondaryMapModel, orientation} = model,
             errors = uniq(compact([primaryMapModel.error, secondaryMapModel.error])),
             container = orientation === 'horizontal' ? hframe : vframe;
 
         return container({
+            testId,
             ref,
             className,
             items: errors.length ? errorPanel({errors}) : childMaps(),

package/desktop/cmp/treemap/TreeMap.ts

@@ -9,9 +9,10 @@ import {box, div, placeholder} from '@xh/hoist/cmp/layout';
 import {
     hoistCmp,
     HoistModel,
-    LayoutProps,
     HoistProps,
+    LayoutProps,
     lookup,
+    TestSupportProps,
     useLocalModel,
     uses,
     XH
@@ -35,7 +36,7 @@ import {assign, cloneDeep, debounce, isFunction, merge, omit} from 'lodash';
 import './TreeMap.scss';
 import {TreeMapModel} from './TreeMapModel';
 
-export interface TreeMapProps extends HoistProps<TreeMapModel>, LayoutProps {}
+export interface TreeMapProps extends HoistProps<TreeMapModel>, LayoutProps, TestSupportProps {}
 
 /**
  * Component for rendering a TreeMap.
@@ -50,7 +51,7 @@ export const [TreeMap, treeMap] = hoistCmp.withFactory<TreeMapProps>({
     model: uses(TreeMapModel),
     className: 'xh-treemap',
 
-    render({model, className, ...props}, ref) {
+    render({model, className, testId, ...props}, ref) {
         if (!Highcharts) {
             console.error(
                 'Highcharts has not been imported in to this application. Please import and ' +
@@ -99,6 +100,7 @@ export const [TreeMap, treeMap] = hoistCmp.withFactory<TreeMapProps>({
             ...layoutProps,
             className: classNames(className, `xh-treemap--${impl.theme}`),
             ref,
+            testId,
             items
         });
     }

package/desktop/cmp/zoneGrid/impl/ZoneMapper.scss

@@ -0,0 +1,71 @@
+.xh-zone-mapper {
+  width: 350px;
+  height: 500px;
+
+  &__zone-picker {
+    padding: var(--xh-pad-px);
+    background: var(--xh-bg-alt);
+    border-bottom: var(--xh-border-solid);
+
+    &__zone-cell {
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      flex: 1;
+      min-height: 30px;
+      white-space: nowrap;
+      padding: var(--xh-pad-half-px);
+      background: var(--xh-bg);
+      border: var(--xh-border-solid);
+      cursor: pointer;
+
+      & > span:not(:last-child) {
+        margin-right: 3px;
+      }
+
+      &--selected {
+        box-shadow: var(--xh-form-field-focused-box-shadow);
+        background: var(--xh-grid-tree-group-bg);
+      }
+
+      &.tl {
+        font-size: var(--xh-grid-multifield-top-font-size-px);
+        border-radius: var(--xh-border-radius-px) 0 0 0;
+      }
+
+      &.tr {
+        justify-content: flex-end;
+        margin: 0 0 0 -1px;
+        font-size: var(--xh-grid-multifield-top-font-size-px);
+        border-radius: 0 var(--xh-border-radius-px) 0 0;
+      }
+
+      &.bl {
+        margin: -1px 0 0 0;
+        font-size: var(--xh-grid-multifield-bottom-font-size-px);
+        border-radius: 0 0 0 var(--xh-border-radius-px);
+      }
+
+      &.br {
+        justify-content: flex-end;
+        margin: -1px 0 0 -1px;
+        font-size: var(--xh-grid-multifield-bottom-font-size-px);
+        border-radius: 0 0 var(--xh-border-radius-px);
+      }
+    }
+  }
+
+  &__sort-picker {
+    flex: none !important;
+    border-top: var(--xh-border-solid);
+
+    .xh-panel__content .xh-hframe {
+      padding: var(--xh-pad-px);
+      align-items: center;
+
+      & > *:not(:last-child) {
+        margin-right: var(--xh-pad-px);
+      }
+    }
+  }
+}