@itwin/appui-react 5.13.1 → 5.14.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Change Log - @itwin/appui-react
 
+## 5.14.0
+
+### Minor Changes
+
+- bdd16f3: Register `QuantityEditor` from `@itwin/imodel-components-react` to be available in all AppUI applications working with editing quantity properties.
+- db9d620: Update colors of widget panel grip displayed when stage panel is collapsed to match the correct semantical iTwinUI CSS variables.
+- 9489407: Remove default background color from status bar dialog popovers
+
+### Patch Changes
+
+- c8dedca: Explicitly declare `itwinui` layer before `appui` layer in stylesheets.
+- Updated dependencies [bdd16f3]
+- Updated dependencies [bdd16f3]
+  - @itwin/imodel-components-react@5.14.0
+  - @itwin/components-react@5.14.0
+  - @itwin/core-react@5.14.0
+
 ## 5.13.1
 
 ### Patch Changes

package/lib/appui-react/configurableui/ConfigurableUiContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurableUiContent.d.ts","sourceRoot":"","sources":["../../../src/appui-react/configurableui/ConfigurableUiContent.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA2BrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAI/E,gBAAgB;AAChB,eAAO,MAAM,qBAAqB;wBAGV,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;oBAChC,mBAAmB,CAAC,eAAe,CAAC;mBACrC,mBAAmB,CAAC,cAAc,CAAC;EAEjD,CAAC;AAEN;;;GAGG;AAEH,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,kCAAkC;IAClC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oHAAoH;IACpH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4GAA4G;IAC5G,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8HAA8H;IAC9H,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6GAA6G;IAC7G,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sIAAsI;IACtI,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,sHAAsH;IACtH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gHAAgH;IAChH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAElC,gBAAgB;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,4BAAkD,CAAC;AAE9E;;GAEG;AAEH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,qBAWtE;AAED,UAAU,oBAAoB;IAC5B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,UAAU,mBAAmB;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE;QACb;;;;WAIG;QACH,eAAe,CAAC,EAAE,oBAAoB,CAAC;KACxC,CAAC;CACH;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBAsFxD"}
+{"version":3,"file":"ConfigurableUiContent.d.ts","sourceRoot":"","sources":["../../../src/appui-react/configurableui/ConfigurableUiContent.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,8BAA8B,CAAC;AACtC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA+BrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,sCAAsC,CAAC;AAM/E,gBAAgB;AAChB,eAAO,MAAM,qBAAqB;wBAGV,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;oBAChC,mBAAmB,CAAC,eAAe,CAAC;mBACrC,mBAAmB,CAAC,cAAc,CAAC;EAEjD,CAAC;AAEN;;;GAGG;AAEH,MAAM,WAAW,0BAA2B,SAAQ,WAAW;IAC7D,kCAAkC;IAClC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oHAAoH;IACpH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,4GAA4G;IAC5G,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8HAA8H;IAC9H,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6GAA6G;IAC7G,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,sIAAsI;IACtI,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,sHAAsH;IACtH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gHAAgH;IAChH,WAAW,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAElC,gBAAgB;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,4BAAkD,CAAC;AAE9E;;GAEG;AAEH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,qBAWtE;AAED,UAAU,oBAAoB;IAC5B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,QAAQ,EAAE,kBAAkB,CAAC;CAC9B;AAED,UAAU,mBAAmB;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,YAAY,CAAC,EAAE;QACb;;;;WAIG;QACH,eAAe,CAAC,EAAE,oBAAoB,CAAC;KACxC,CAAC;CACH;AAED;;GAEG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,qBA0FxD"}

package/lib/appui-react/configurableui/ConfigurableUiContent.js

@@ -8,6 +8,7 @@
 import "./ConfigurableUiContent.scss";
 import * as React from "react";
 import { Point } from "@itwin/core-react/internal";
+import { IModelConnectionProvider, QuantityEditorSpec, } from "@itwin/imodel-components-react";
 import { ThemeProvider } from "@itwin/itwinui-react";
 import { CursorInformation } from "../cursor/CursorInformation.js";
 import { CursorPopupMenu } from "../cursor/cursormenu/CursorMenu.js";
@@ -28,6 +29,8 @@ import { TOOLBAR_OPACITY_DEFAULT, WIDGET_OPACITY_DEFAULT, } from "../theme/Theme
 import { useReduxFrameworkState } from "../uistate/useReduxFrameworkState.js";
 import { ChildWindowRenderer } from "../childwindow/ChildWindowRenderer.js";
 import { useActiveFrontstageDef } from "../frontstage/FrontstageDef.js";
+import { useActiveIModelConnection } from "../hooks/useActiveIModelConnection.js";
+import { EditorsRegistryProvider } from "@itwin/components-react";
 /** @internal */
 export const ConfigurableUiContext = React.createContext({});
 /**
@@ -85,22 +88,25 @@ export function StandardLayout(props) {
             }, ref: (el) => setMainElement(el ?? undefined) },
             React.createElement(WrapperContext.Provider, { value: mainElement ?? document.body },
                 React.createElement(ThemeProvider, { style: { height: "100%" }, portalContainer: portalContainer },
-                    appBackstage,
-                    React.createElement(WidgetPanelsFrontstage, null),
-                    React.createElement(PointerMessage, null),
-                    React.createElement(KeyboardShortcutMenu, null),
-                    React.createElement(InputFieldMessage, null),
-                    React.createElement(CursorPopupMenu, null),
-                    React.createElement(CursorPopupRenderer, null),
-                    React.createElement(PopupRenderer, null),
-                    React.createElement(ElementTooltip, null),
-                    React.createElement(MessageRenderer, null),
-                    React.createElement(ChildWindowRenderer, { windowManager: appUi.windowManager }),
-                    React.createElement("div", { className: "uifw-configurableui-portalContainer", ref: (instance) => setPortalContainer(instance ?? undefined) },
-                        React.createElement(ContentDialogRenderer, null),
-                        React.createElement(ModelessDialogRenderer, null),
-                        React.createElement(ModalDialogRenderer, null)))))));
+                    React.createElement(IModelProvider, null,
+                        React.createElement(EditorsRegistryProvider, { editors: defaultEditors },
+                            appBackstage,
+                            React.createElement(WidgetPanelsFrontstage, null),
+                            React.createElement(PointerMessage, null),
+                            React.createElement(KeyboardShortcutMenu, null),
+                            React.createElement(InputFieldMessage, null),
+                            React.createElement(CursorPopupMenu, null),
+                            React.createElement(CursorPopupRenderer, null),
+                            React.createElement(PopupRenderer, null),
+                            React.createElement(ElementTooltip, null),
+                            React.createElement(MessageRenderer, null),
+                            React.createElement(ChildWindowRenderer, { windowManager: appUi.windowManager }),
+                            React.createElement("div", { className: "uifw-configurableui-portalContainer", ref: (instance) => setPortalContainer(instance ?? undefined) },
+                                React.createElement(ContentDialogRenderer, null),
+                                React.createElement(ModelessDialogRenderer, null),
+                                React.createElement(ModalDialogRenderer, null)))))))));
 }
+const defaultEditors = [QuantityEditorSpec];
 function useWidgetOpacity(
 /* eslint-disable-next-line @typescript-eslint/no-deprecated */
 widgetOpacity) {
@@ -150,4 +156,8 @@ function useVisibleToolSettings(enabled) {
         });
     }, [enabled]);
 }
+function IModelProvider({ children }) {
+    const imodel = useActiveIModelConnection();
+    return (React.createElement(IModelConnectionProvider, { iModelConnection: imodel }, children));
+}
 //# sourceMappingURL=ConfigurableUiContent.js.map

package/lib/appui-react/configurableui/ConfigurableUiContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConfigurableUiContent.js","sourceRoot":"","sources":["../../../src/appui-react/configurableui/ConfigurableUiContent.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ConfigurableUi\n */\n\nimport \"./ConfigurableUiContent.scss\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Point } from \"@itwin/core-react/internal\";\nimport { ThemeProvider } from \"@itwin/itwinui-react\";\nimport { CursorInformation } from \"../cursor/CursorInformation.js\";\nimport { CursorPopupMenu } from \"../cursor/cursormenu/CursorMenu.js\";\nimport { CursorPopupRenderer } from \"../cursor/cursorpopup/CursorPopupManager.js\";\nimport { ModalDialogRenderer } from \"../dialog/ModalDialogManager.js\";\nimport { ModelessDialogRenderer } from \"../dialog/ModelessDialogManager.js\";\nimport { ElementTooltip } from \"../feedback/ElementTooltip.js\";\nimport { KeyboardShortcutMenu } from \"../keyboardshortcut/KeyboardShortcutMenu.js\";\nimport { InputFieldMessage } from \"../messages/InputField.js\";\nimport { PointerMessage } from \"../messages/Pointer.js\";\nimport { PopupRenderer } from \"../popup/PopupManager.js\";\nimport { WidgetPanelsFrontstage } from \"../widget-panels/Frontstage.js\";\nimport { ContentDialogRenderer } from \"../dialog/ContentDialogManager.js\";\nimport { appUi, UiFramework } from \"../UiFramework.js\";\nimport { InternalConfigurableUiManager } from \"./InternalConfigurableUiManager.js\";\nimport { MessageRenderer } from \"../messages/MessageRenderer.js\";\nimport {\n  TOOLBAR_OPACITY_DEFAULT,\n  WIDGET_OPACITY_DEFAULT,\n} from \"../theme/ThemeId.js\";\nimport { useReduxFrameworkState } from \"../uistate/useReduxFrameworkState.js\";\nimport type { ContentProps } from \"../content/ContentGroup.js\";\nimport { ChildWindowRenderer } from \"../childwindow/ChildWindowRenderer.js\";\nimport { useActiveFrontstageDef } from \"../frontstage/FrontstageDef.js\";\nimport type { WidgetActions } from \"../layout/widget/WidgetActions.js\";\nimport type { StagePanelSection } from \"../stagepanels/StagePanelSection.js\";\nimport type { StagePanelLocation } from \"../stagepanels/StagePanelLocation.js\";\nimport type { Widget } from \"../widgets/Widget.js\";\nimport type { WidgetState } from \"../widgets/WidgetState.js\";\n\n/** @internal */\nexport const ConfigurableUiContext = React.createContext<\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  ConfigurableUiContentProps & {\n    contentElementRef?: React.RefObject<HTMLElement>;\n    widgetActions?: StandardLayoutProps[\"widgetActions\"];\n    toolSettings?: StandardLayoutProps[\"toolSettings\"];\n  }\n>({});\n\n/** Properties for [[ConfigurableUiContent]]\n * @public\n * @deprecated in 4.17.0. Use `React.ComponentProps<typeof ConfigurableUiContent>`\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface ConfigurableUiContentProps extends CommonProps {\n  /** React node of the Backstage */\n  appBackstage?: React.ReactNode;\n  /** Controls if the view overlay should be displayed. Uses redux store as a fallback. Defaults to `true`.\n   * @note Only used by configurable control APIs. See {@link ContentProps.classId}.\n   * @deprecated in 4.16.0. View overlay visibility should be controlled by the components used in {@link ContentProps.content}.\n   */\n  viewOverlay?: boolean;\n  /** Describes the opacity of widgets. Uses redux store as a fallback. Defaults to {@link WIDGET_OPACITY_DEFAULT}. */\n  widgetOpacity?: number;\n  /** Controls if the widget icons should be displayed. Uses redux store as a fallback. Defaults to `true`. */\n  widgetIcon?: boolean;\n  /** Controls if the unpinned panels should be collapsed automatically. Uses redux store as a fallback. Defaults to `false`. */\n  collapsePanels?: boolean;\n  /** Controls if the tool settings should be animated. Uses redux store as a fallback. Defaults to `false`. */\n  animateToolSettings?: boolean;\n  /** Controls if the tool settings label should be set based on activated tool. Uses redux store as a fallback. Defaults to `false`. */\n  toolAsToolSettingsLabel?: boolean;\n  /** Describes the opacity of toolbars. Uses redux store as a fallback. Defaults to {@link TOOLBAR_OPACITY_DEFAULT}. */\n  toolbarOpacity?: number;\n  /** Component to wrap all popout widgets and other child windows opened via {@link UiFramework.childWindows}. */\n  childWindow?: React.ComponentType;\n\n  /** @internal */\n  idleTimeout?: number;\n  /** @internal */\n  intervalTimeout?: number;\n}\n\n/**\n * Allows children to get the bounds or other properties of the wrapper element.\n * @internal\n */\nexport const WrapperContext = React.createContext<HTMLElement>(document.body);\n\n/** The main component of `AppUI` that sets up the configurable UI.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport function ConfigurableUiContent(props: ConfigurableUiContentProps) {\n  const frontstageDef = useActiveFrontstageDef();\n  const layout = frontstageDef?.initialConfig?.layout;\n  return (\n    <ConfigurableUiContext.Provider\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      value={React.useMemo(() => props, [...Object.values(props)])}\n    >\n      {layout ?? <StandardLayout />}\n    </ConfigurableUiContext.Provider>\n  );\n}\n\ninterface ToolSettingsLocation {\n  section: StagePanelSection;\n  location: StagePanelLocation;\n}\n\ninterface StandardLayoutProps {\n  /** Overrides widget specific actions displayed in the title bar area.\n   * Use {@link WidgetActions} component to customize widget actions.\n   * @alpha\n   */\n  widgetActions?: React.ReactNode;\n  /** When enabled keeps the tool settings visible to the end user.\n   * This is especially useful when the tool settings is undocked as a regular widget.\n   * @alpha\n   */\n  visibleToolSettings?: boolean;\n  /** Tool settings related configuration.\n   * @alpha\n   */\n  toolSettings?: {\n    /** The default location of the tool settings. Only used when initializing the layout and ignored when restoring a saved layout.\n     * When this is specified, the tool settings will be initialized as a widget, instead of the default docked state.\n     * @note Use {@link Widget} for further configuration. I.e. set {@link Widget.defaultState} to {@link WidgetState.Floating} to initialize the tool settings as a floating widget.\n     * @alpha\n     */\n    defaultLocation?: ToolSettingsLocation;\n  };\n}\n\n/** The standard widget based layout used as a default layout for all frontstages.\n * @alpha\n */\nexport function StandardLayout(props: StandardLayoutProps) {\n  const { widgetActions, visibleToolSettings = false, toolSettings } = props;\n  const context = React.useContext(ConfigurableUiContext);\n  const {\n    appBackstage,\n    widgetOpacity,\n    toolbarOpacity,\n    idleTimeout,\n    intervalTimeout,\n  } = context;\n\n  const contentElementRef = React.useRef<HTMLElement>(null);\n  useWidgetOpacity(widgetOpacity);\n  useToolbarOpacity(toolbarOpacity);\n  const [mainElement, setMainElement] = React.useState<HTMLElement>();\n  const [portalContainer, setPortalContainer] = React.useState<HTMLElement>();\n  React.useEffect(() => {\n    UiFramework.keyboardShortcuts.setFocusToHome();\n  }, []);\n\n  React.useEffect(() => {\n    InternalConfigurableUiManager.activityTracker.initialize({\n      idleTimeout,\n      intervalTimeout,\n    });\n    return () => {\n      InternalConfigurableUiManager.activityTracker.terminate();\n    };\n  }, [idleTimeout, intervalTimeout]);\n  useVisibleToolSettings(visibleToolSettings);\n\n  return (\n    <ConfigurableUiContext.Provider\n      value={React.useMemo(\n        () => ({\n          ...context,\n          contentElementRef,\n          widgetActions,\n          toolSettings,\n        }),\n        [context, widgetActions, toolSettings]\n      )}\n    >\n      <main\n        role=\"main\"\n        id=\"uifw-configurableui-wrapper\"\n        className={context.className}\n        style={context.style}\n        onMouseMove={(e) => {\n          const point = new Point(e.pageX, e.pageY);\n          CursorInformation.handleMouseMove(point, e.view.document);\n        }}\n        ref={(el) => setMainElement(el ?? undefined)}\n      >\n        <WrapperContext.Provider value={mainElement ?? document.body}>\n          <ThemeProvider\n            style={{ height: \"100%\" }}\n            portalContainer={portalContainer}\n          >\n            {appBackstage}\n            <WidgetPanelsFrontstage />\n\n            <PointerMessage />\n            {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n            <KeyboardShortcutMenu />\n            {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n            <InputFieldMessage />\n            <CursorPopupMenu />\n            <CursorPopupRenderer />\n            <PopupRenderer />\n            <ElementTooltip />\n            <MessageRenderer />\n            <ChildWindowRenderer windowManager={appUi.windowManager} />\n            <div\n              className=\"uifw-configurableui-portalContainer\"\n              ref={(instance) => setPortalContainer(instance ?? undefined)}\n            >\n              <ContentDialogRenderer />\n              <ModelessDialogRenderer />\n              <ModalDialogRenderer />\n            </div>\n          </ThemeProvider>\n        </WrapperContext.Provider>\n      </main>\n    </ConfigurableUiContext.Provider>\n  );\n}\n\nfunction useWidgetOpacity(\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  widgetOpacity: ConfigurableUiContentProps[\"widgetOpacity\"]\n) {\n  const reduxWidgetOpacity = useReduxFrameworkState((state) => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    return state?.configurableUiState.widgetOpacity;\n  });\n  const opacity = widgetOpacity ?? reduxWidgetOpacity ?? WIDGET_OPACITY_DEFAULT;\n\n  React.useEffect(() => {\n    const currentWidgetOpacity =\n      document.documentElement.style.getPropertyValue(\"--buic-widget-opacity\");\n    if (currentWidgetOpacity === opacity.toString()) return;\n    document.documentElement.style.setProperty(\n      \"--buic-widget-opacity\",\n      opacity.toString()\n    );\n    return () => {\n      document.documentElement.style.removeProperty(\"--buic-widget-opacity\");\n    };\n  }, [opacity]);\n}\n\nfunction useToolbarOpacity(\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  toolbarOpacity: ConfigurableUiContentProps[\"toolbarOpacity\"]\n) {\n  const reduxToolbarOpacity = useReduxFrameworkState((state) => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    return state?.configurableUiState.toolbarOpacity;\n  });\n\n  const opacity =\n    toolbarOpacity ?? reduxToolbarOpacity ?? TOOLBAR_OPACITY_DEFAULT;\n\n  React.useEffect(() => {\n    const currentToolbarOpacity =\n      document.documentElement.style.getPropertyValue(\"--buic-toolbar-opacity\");\n    if (currentToolbarOpacity === opacity.toString()) return;\n    document.documentElement.style.setProperty(\n      \"--buic-toolbar-opacity\",\n      opacity.toString()\n    );\n    return () => {\n      document.documentElement.style.removeProperty(\"--buic-toolbar-opacity\");\n    };\n  }, [opacity]);\n}\n\nfunction useVisibleToolSettings(enabled: boolean) {\n  React.useEffect(() => {\n    if (!enabled) return;\n    return UiFramework.frontstages.onToolSettingsReloadEvent.addListener(() => {\n      const frontstage = UiFramework.frontstages.activeFrontstageDef;\n      const toolSettings = frontstage?.toolSettings;\n      if (!toolSettings) return;\n      toolSettings.show();\n    });\n  }, [enabled]);\n}\n"]}
+{"version":3,"file":"ConfigurableUiContent.js","sourceRoot":"","sources":["../../../src/appui-react/configurableui/ConfigurableUiContent.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ConfigurableUi\n */\n\nimport \"./ConfigurableUiContent.scss\";\nimport * as React from \"react\";\nimport type { CommonProps } from \"@itwin/core-react\";\nimport { Point } from \"@itwin/core-react/internal\";\nimport {\n  IModelConnectionProvider,\n  QuantityEditorSpec,\n} from \"@itwin/imodel-components-react\";\nimport { ThemeProvider } from \"@itwin/itwinui-react\";\nimport { CursorInformation } from \"../cursor/CursorInformation.js\";\nimport { CursorPopupMenu } from \"../cursor/cursormenu/CursorMenu.js\";\nimport { CursorPopupRenderer } from \"../cursor/cursorpopup/CursorPopupManager.js\";\nimport { ModalDialogRenderer } from \"../dialog/ModalDialogManager.js\";\nimport { ModelessDialogRenderer } from \"../dialog/ModelessDialogManager.js\";\nimport { ElementTooltip } from \"../feedback/ElementTooltip.js\";\nimport { KeyboardShortcutMenu } from \"../keyboardshortcut/KeyboardShortcutMenu.js\";\nimport { InputFieldMessage } from \"../messages/InputField.js\";\nimport { PointerMessage } from \"../messages/Pointer.js\";\nimport { PopupRenderer } from \"../popup/PopupManager.js\";\nimport { WidgetPanelsFrontstage } from \"../widget-panels/Frontstage.js\";\nimport { ContentDialogRenderer } from \"../dialog/ContentDialogManager.js\";\nimport { appUi, UiFramework } from \"../UiFramework.js\";\nimport { InternalConfigurableUiManager } from \"./InternalConfigurableUiManager.js\";\nimport { MessageRenderer } from \"../messages/MessageRenderer.js\";\nimport {\n  TOOLBAR_OPACITY_DEFAULT,\n  WIDGET_OPACITY_DEFAULT,\n} from \"../theme/ThemeId.js\";\nimport { useReduxFrameworkState } from \"../uistate/useReduxFrameworkState.js\";\nimport type { ContentProps } from \"../content/ContentGroup.js\";\nimport { ChildWindowRenderer } from \"../childwindow/ChildWindowRenderer.js\";\nimport { useActiveFrontstageDef } from \"../frontstage/FrontstageDef.js\";\nimport type { WidgetActions } from \"../layout/widget/WidgetActions.js\";\nimport type { StagePanelSection } from \"../stagepanels/StagePanelSection.js\";\nimport type { StagePanelLocation } from \"../stagepanels/StagePanelLocation.js\";\nimport type { Widget } from \"../widgets/Widget.js\";\nimport type { WidgetState } from \"../widgets/WidgetState.js\";\nimport { useActiveIModelConnection } from \"../hooks/useActiveIModelConnection.js\";\nimport { EditorsRegistryProvider } from \"@itwin/components-react\";\n\n/** @internal */\nexport const ConfigurableUiContext = React.createContext<\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  ConfigurableUiContentProps & {\n    contentElementRef?: React.RefObject<HTMLElement>;\n    widgetActions?: StandardLayoutProps[\"widgetActions\"];\n    toolSettings?: StandardLayoutProps[\"toolSettings\"];\n  }\n>({});\n\n/** Properties for [[ConfigurableUiContent]]\n * @public\n * @deprecated in 4.17.0. Use `React.ComponentProps<typeof ConfigurableUiContent>`\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport interface ConfigurableUiContentProps extends CommonProps {\n  /** React node of the Backstage */\n  appBackstage?: React.ReactNode;\n  /** Controls if the view overlay should be displayed. Uses redux store as a fallback. Defaults to `true`.\n   * @note Only used by configurable control APIs. See {@link ContentProps.classId}.\n   * @deprecated in 4.16.0. View overlay visibility should be controlled by the components used in {@link ContentProps.content}.\n   */\n  viewOverlay?: boolean;\n  /** Describes the opacity of widgets. Uses redux store as a fallback. Defaults to {@link WIDGET_OPACITY_DEFAULT}. */\n  widgetOpacity?: number;\n  /** Controls if the widget icons should be displayed. Uses redux store as a fallback. Defaults to `true`. */\n  widgetIcon?: boolean;\n  /** Controls if the unpinned panels should be collapsed automatically. Uses redux store as a fallback. Defaults to `false`. */\n  collapsePanels?: boolean;\n  /** Controls if the tool settings should be animated. Uses redux store as a fallback. Defaults to `false`. */\n  animateToolSettings?: boolean;\n  /** Controls if the tool settings label should be set based on activated tool. Uses redux store as a fallback. Defaults to `false`. */\n  toolAsToolSettingsLabel?: boolean;\n  /** Describes the opacity of toolbars. Uses redux store as a fallback. Defaults to {@link TOOLBAR_OPACITY_DEFAULT}. */\n  toolbarOpacity?: number;\n  /** Component to wrap all popout widgets and other child windows opened via {@link UiFramework.childWindows}. */\n  childWindow?: React.ComponentType;\n\n  /** @internal */\n  idleTimeout?: number;\n  /** @internal */\n  intervalTimeout?: number;\n}\n\n/**\n * Allows children to get the bounds or other properties of the wrapper element.\n * @internal\n */\nexport const WrapperContext = React.createContext<HTMLElement>(document.body);\n\n/** The main component of `AppUI` that sets up the configurable UI.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-deprecated\nexport function ConfigurableUiContent(props: ConfigurableUiContentProps) {\n  const frontstageDef = useActiveFrontstageDef();\n  const layout = frontstageDef?.initialConfig?.layout;\n  return (\n    <ConfigurableUiContext.Provider\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      value={React.useMemo(() => props, [...Object.values(props)])}\n    >\n      {layout ?? <StandardLayout />}\n    </ConfigurableUiContext.Provider>\n  );\n}\n\ninterface ToolSettingsLocation {\n  section: StagePanelSection;\n  location: StagePanelLocation;\n}\n\ninterface StandardLayoutProps {\n  /** Overrides widget specific actions displayed in the title bar area.\n   * Use {@link WidgetActions} component to customize widget actions.\n   * @alpha\n   */\n  widgetActions?: React.ReactNode;\n  /** When enabled keeps the tool settings visible to the end user.\n   * This is especially useful when the tool settings is undocked as a regular widget.\n   * @alpha\n   */\n  visibleToolSettings?: boolean;\n  /** Tool settings related configuration.\n   * @alpha\n   */\n  toolSettings?: {\n    /** The default location of the tool settings. Only used when initializing the layout and ignored when restoring a saved layout.\n     * When this is specified, the tool settings will be initialized as a widget, instead of the default docked state.\n     * @note Use {@link Widget} for further configuration. I.e. set {@link Widget.defaultState} to {@link WidgetState.Floating} to initialize the tool settings as a floating widget.\n     * @alpha\n     */\n    defaultLocation?: ToolSettingsLocation;\n  };\n}\n\n/** The standard widget based layout used as a default layout for all frontstages.\n * @alpha\n */\nexport function StandardLayout(props: StandardLayoutProps) {\n  const { widgetActions, visibleToolSettings = false, toolSettings } = props;\n  const context = React.useContext(ConfigurableUiContext);\n  const {\n    appBackstage,\n    widgetOpacity,\n    toolbarOpacity,\n    idleTimeout,\n    intervalTimeout,\n  } = context;\n\n  const contentElementRef = React.useRef<HTMLElement>(null);\n  useWidgetOpacity(widgetOpacity);\n  useToolbarOpacity(toolbarOpacity);\n  const [mainElement, setMainElement] = React.useState<HTMLElement>();\n  const [portalContainer, setPortalContainer] = React.useState<HTMLElement>();\n  React.useEffect(() => {\n    UiFramework.keyboardShortcuts.setFocusToHome();\n  }, []);\n\n  React.useEffect(() => {\n    InternalConfigurableUiManager.activityTracker.initialize({\n      idleTimeout,\n      intervalTimeout,\n    });\n    return () => {\n      InternalConfigurableUiManager.activityTracker.terminate();\n    };\n  }, [idleTimeout, intervalTimeout]);\n  useVisibleToolSettings(visibleToolSettings);\n\n  return (\n    <ConfigurableUiContext.Provider\n      value={React.useMemo(\n        () => ({\n          ...context,\n          contentElementRef,\n          widgetActions,\n          toolSettings,\n        }),\n        [context, widgetActions, toolSettings]\n      )}\n    >\n      <main\n        role=\"main\"\n        id=\"uifw-configurableui-wrapper\"\n        className={context.className}\n        style={context.style}\n        onMouseMove={(e) => {\n          const point = new Point(e.pageX, e.pageY);\n          CursorInformation.handleMouseMove(point, e.view.document);\n        }}\n        ref={(el) => setMainElement(el ?? undefined)}\n      >\n        <WrapperContext.Provider value={mainElement ?? document.body}>\n          <ThemeProvider\n            style={{ height: \"100%\" }}\n            portalContainer={portalContainer}\n          >\n            <IModelProvider>\n              <EditorsRegistryProvider editors={defaultEditors}>\n                {appBackstage}\n                <WidgetPanelsFrontstage />\n\n                <PointerMessage />\n                {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n                <KeyboardShortcutMenu />\n                {/* eslint-disable-next-line @typescript-eslint/no-deprecated */}\n                <InputFieldMessage />\n                <CursorPopupMenu />\n                <CursorPopupRenderer />\n                <PopupRenderer />\n                <ElementTooltip />\n                <MessageRenderer />\n                <ChildWindowRenderer windowManager={appUi.windowManager} />\n                <div\n                  className=\"uifw-configurableui-portalContainer\"\n                  ref={(instance) => setPortalContainer(instance ?? undefined)}\n                >\n                  <ContentDialogRenderer />\n                  <ModelessDialogRenderer />\n                  <ModalDialogRenderer />\n                </div>\n              </EditorsRegistryProvider>\n            </IModelProvider>\n          </ThemeProvider>\n        </WrapperContext.Provider>\n      </main>\n    </ConfigurableUiContext.Provider>\n  );\n}\n\nconst defaultEditors = [QuantityEditorSpec];\n\nfunction useWidgetOpacity(\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  widgetOpacity: ConfigurableUiContentProps[\"widgetOpacity\"]\n) {\n  const reduxWidgetOpacity = useReduxFrameworkState((state) => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    return state?.configurableUiState.widgetOpacity;\n  });\n  const opacity = widgetOpacity ?? reduxWidgetOpacity ?? WIDGET_OPACITY_DEFAULT;\n\n  React.useEffect(() => {\n    const currentWidgetOpacity =\n      document.documentElement.style.getPropertyValue(\"--buic-widget-opacity\");\n    if (currentWidgetOpacity === opacity.toString()) return;\n    document.documentElement.style.setProperty(\n      \"--buic-widget-opacity\",\n      opacity.toString()\n    );\n    return () => {\n      document.documentElement.style.removeProperty(\"--buic-widget-opacity\");\n    };\n  }, [opacity]);\n}\n\nfunction useToolbarOpacity(\n  /* eslint-disable-next-line @typescript-eslint/no-deprecated */\n  toolbarOpacity: ConfigurableUiContentProps[\"toolbarOpacity\"]\n) {\n  const reduxToolbarOpacity = useReduxFrameworkState((state) => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    return state?.configurableUiState.toolbarOpacity;\n  });\n\n  const opacity =\n    toolbarOpacity ?? reduxToolbarOpacity ?? TOOLBAR_OPACITY_DEFAULT;\n\n  React.useEffect(() => {\n    const currentToolbarOpacity =\n      document.documentElement.style.getPropertyValue(\"--buic-toolbar-opacity\");\n    if (currentToolbarOpacity === opacity.toString()) return;\n    document.documentElement.style.setProperty(\n      \"--buic-toolbar-opacity\",\n      opacity.toString()\n    );\n    return () => {\n      document.documentElement.style.removeProperty(\"--buic-toolbar-opacity\");\n    };\n  }, [opacity]);\n}\n\nfunction useVisibleToolSettings(enabled: boolean) {\n  React.useEffect(() => {\n    if (!enabled) return;\n    return UiFramework.frontstages.onToolSettingsReloadEvent.addListener(() => {\n      const frontstage = UiFramework.frontstages.activeFrontstageDef;\n      const toolSettings = frontstage?.toolSettings;\n      if (!toolSettings) return;\n      toolSettings.show();\n    });\n  }, [enabled]);\n}\n\nfunction IModelProvider({ children }: React.PropsWithChildren<object>) {\n  const imodel = useActiveIModelConnection();\n\n  return (\n    <IModelConnectionProvider iModelConnection={imodel}>\n      {children}\n    </IModelConnectionProvider>\n  );\n}\n"]}

package/lib/appui-react/layers.scss

@@ -2,6 +2,8 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+@layer itwinui;
+
 @layer appui {
   @layer layout, component, preview;
 

package/lib/appui-react/layout/footer/dialog/Dialog.scss

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 .nz-footer-dialog-dialog {
   border-radius: var(--iui-border-radius-1);
-  background-color: var(--iui-color-background);
   overflow: hidden;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);

package/lib/appui-react/layout/footer/snap-mode/Panel.scss

@@ -5,7 +5,6 @@
 @use "~@itwin/core-react/lib/core-react/typography" as *;
 
 .nz-footer-snapMode-panel {
-  background-color: var(--iui-color-background);
   border-radius: var(--iui-border-radius-1);
   overflow: hidden;
 

package/lib/appui-react/layout/widget-panels/Grip.scss

@@ -64,7 +64,7 @@ $line-grip-width: calc(#{$nz-grip-width} - 2px);
 
     &:hover,
     &.nz-resizing {
-      background-color: var(--iui-color-icon-accent);
+      background-color: var(--iui-color-background-accent);
     }
   }
 
@@ -84,8 +84,8 @@ $line-grip-width: calc(#{$nz-grip-width} - 2px);
 
     .nz-collapsed & {
       display: flex;
-      background-color: var(--iui-color-background-disabled);
-      border: 1px solid var(--iui-color-border-subtle);
+      background-color: var(--iui-color-background);
+      border: 1px solid var(--iui-color-border-foreground);
       border-radius: 999px;
       box-sizing: border-box;
       opacity: 1;
@@ -118,8 +118,8 @@ $line-grip-width: calc(#{$nz-grip-width} - 2px);
       width: $line-grip-width;
 
       .nz-line-grip-detail {
-        width: 1px;
         height: 70%;
+        border-left: 1px solid var(--iui-color-border-foreground);
       }
     }
 
@@ -130,12 +130,8 @@ $line-grip-width: calc(#{$nz-grip-width} - 2px);
 
       .nz-line-grip-detail {
         width: 70%;
-        height: 1px;
+        border-top: 1px solid var(--iui-color-border-foreground);
       }
     }
-
-    .nz-line-grip-detail {
-      background-color: var(--iui-color-border-subtle);
-    }
   }
 }

package/lib/appui-react/widgets/WidgetState.d.ts

@@ -1,14 +1,32 @@
 /** @packageDocumentation
  * @module Widget
  */
-/** Widget state enum.
+/**
+ * Describes the visibility and mounting state of a widget.
  * @public
  */
 export declare enum WidgetState {
+    /**
+     * Both the widget tab and its content are visible.
+     */
     Open = 0,
+    /**
+     * The widget tab is visible, but the widget content is not visible.
+     */
     Closed = 1,
+    /**
+     * Neither the widget tab nor its content are visible, but the widget's React node is still rendered.
+     * Useful for pre-initialization and preserving widget state while the widget is not visible.
+     */
     Hidden = 2,
+    /**
+     * Widget is in a floating state. Widget content visibility depends on internal logic, but the widget tab is visible.
+     */
     Floating = 3,
+    /**
+     * Neither the widget tab nor its content are visible, and the widget's React node is not rendered.
+     * Changing the widget state to `Unloaded` will unmount the content node if it was previously rendered.
+     */
     Unloaded = 4
 }
 //# sourceMappingURL=WidgetState.d.ts.map

package/lib/appui-react/widgets/WidgetState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetState.d.ts","sourceRoot":"","sources":["../../../src/appui-react/widgets/WidgetState.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH;;GAEG;AACH,oBAAY,WAAW;IACrB,IAAI,IAAI;IACR,MAAM,IAAI;IACV,MAAM,IAAI;IACV,QAAQ,IAAI;IACZ,QAAQ,IAAI;CACb"}
+{"version":3,"file":"WidgetState.d.ts","sourceRoot":"","sources":["../../../src/appui-react/widgets/WidgetState.ts"],"names":[],"mappings":"AAIA;;GAEG;AAEH;;;GAGG;AACH,oBAAY,WAAW;IACrB;;OAEG;IACH,IAAI,IAAI;IACR;;OAEG;IACH,MAAM,IAAI;IACV;;;OAGG;IACH,MAAM,IAAI;IACV;;OAEG;IACH,QAAQ,IAAI;IACZ;;;OAGG;IACH,QAAQ,IAAI;CACb"}

package/lib/appui-react/widgets/WidgetState.js

@@ -5,15 +5,33 @@
 /** @packageDocumentation
  * @module Widget
  */
-/** Widget state enum.
+/**
+ * Describes the visibility and mounting state of a widget.
  * @public
  */
 export var WidgetState;
 (function (WidgetState) {
+    /**
+     * Both the widget tab and its content are visible.
+     */
     WidgetState[WidgetState["Open"] = 0] = "Open";
+    /**
+     * The widget tab is visible, but the widget content is not visible.
+     */
     WidgetState[WidgetState["Closed"] = 1] = "Closed";
+    /**
+     * Neither the widget tab nor its content are visible, but the widget's React node is still rendered.
+     * Useful for pre-initialization and preserving widget state while the widget is not visible.
+     */
     WidgetState[WidgetState["Hidden"] = 2] = "Hidden";
+    /**
+     * Widget is in a floating state. Widget content visibility depends on internal logic, but the widget tab is visible.
+     */
     WidgetState[WidgetState["Floating"] = 3] = "Floating";
+    /**
+     * Neither the widget tab nor its content are visible, and the widget's React node is not rendered.
+     * Changing the widget state to `Unloaded` will unmount the content node if it was previously rendered.
+     */
     WidgetState[WidgetState["Unloaded"] = 4] = "Unloaded";
 })(WidgetState || (WidgetState = {}));
 //# sourceMappingURL=WidgetState.js.map

package/lib/appui-react/widgets/WidgetState.js.map

@@ -1 +1 @@
-{"version":3,"file":"WidgetState.js","sourceRoot":"","sources":["../../../src/appui-react/widgets/WidgetState.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH;;GAEG;AACH,MAAM,CAAN,IAAY,WAMX;AAND,WAAY,WAAW;IACrB,6CAAQ,CAAA;IACR,iDAAU,CAAA;IACV,iDAAU,CAAA;IACV,qDAAY,CAAA;IACZ,qDAAY,CAAA;AACd,CAAC,EANW,WAAW,KAAX,WAAW,QAMtB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\n/** Widget state enum.\n * @public\n */\nexport enum WidgetState {\n  Open = 0,\n  Closed = 1,\n  Hidden = 2,\n  Floating = 3,\n  Unloaded = 4,\n}\n"]}
+{"version":3,"file":"WidgetState.js","sourceRoot":"","sources":["../../../src/appui-react/widgets/WidgetState.ts"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH;;;GAGG;AACH,MAAM,CAAN,IAAY,WAuBX;AAvBD,WAAY,WAAW;IACrB;;OAEG;IACH,6CAAQ,CAAA;IACR;;OAEG;IACH,iDAAU,CAAA;IACV;;;OAGG;IACH,iDAAU,CAAA;IACV;;OAEG;IACH,qDAAY,CAAA;IACZ;;;OAGG;IACH,qDAAY,CAAA;AACd,CAAC,EAvBW,WAAW,KAAX,WAAW,QAuBtB","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Widget\n */\n\n/**\n * Describes the visibility and mounting state of a widget.\n * @public\n */\nexport enum WidgetState {\n  /**\n   * Both the widget tab and its content are visible.\n   */\n  Open = 0,\n  /**\n   * The widget tab is visible, but the widget content is not visible.\n   */\n  Closed = 1,\n  /**\n   * Neither the widget tab nor its content are visible, but the widget's React node is still rendered.\n   * Useful for pre-initialization and preserving widget state while the widget is not visible.\n   */\n  Hidden = 2,\n  /**\n   * Widget is in a floating state. Widget content visibility depends on internal logic, but the widget tab is visible.\n   */\n  Floating = 3,\n  /**\n   * Neither the widget tab nor its content are visible, and the widget's React node is not rendered.\n   * Changing the widget state to `Unloaded` will unmount the content node if it was previously rendered.\n   */\n  Unloaded = 4,\n}\n"]}

package/lib/cjs/appui-react/layers.scss

@@ -2,6 +2,8 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+@layer itwinui;
+
 @layer appui {
   @layer layout, component, preview;
 

package/lib/cjs/appui-react/layout/footer/dialog/Dialog.scss

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 .nz-footer-dialog-dialog {
   border-radius: var(--iui-border-radius-1);
-  background-color: var(--iui-color-background);
   overflow: hidden;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);

package/lib/cjs/appui-react/layout/footer/snap-mode/Panel.scss

@@ -5,7 +5,6 @@
 @use "~@itwin/core-react/lib/core-react/typography" as *;
 
 .nz-footer-snapMode-panel {
-  background-color: var(--iui-color-background);
   border-radius: var(--iui-border-radius-1);
   overflow: hidden;
 

package/lib/cjs/appui-react/layout/widget-panels/Grip.scss

@@ -64,7 +64,7 @@ $line-grip-width: calc(#{$nz-grip-width} - 2px);
 
     &:hover,
     &.nz-resizing {
-      background-color: var(--iui-color-icon-accent);
+      background-color: var(--iui-color-background-accent);
     }
   }
 
@@ -84,8 +84,8 @@ $line-grip-width: calc(#{$nz-grip-width} - 2px);
 
     .nz-collapsed & {
       display: flex;
-      background-color: var(--iui-color-background-disabled);
-      border: 1px solid var(--iui-color-border-subtle);
+      background-color: var(--iui-color-background);
+      border: 1px solid var(--iui-color-border-foreground);
       border-radius: 999px;
       box-sizing: border-box;
       opacity: 1;
@@ -118,8 +118,8 @@ $line-grip-width: calc(#{$nz-grip-width} - 2px);
       width: $line-grip-width;
 
       .nz-line-grip-detail {
-        width: 1px;
         height: 70%;
+        border-left: 1px solid var(--iui-color-border-foreground);
       }
     }
 
@@ -130,12 +130,8 @@ $line-grip-width: calc(#{$nz-grip-width} - 2px);
 
       .nz-line-grip-detail {
         width: 70%;
-        height: 1px;
+        border-top: 1px solid var(--iui-color-border-foreground);
       }
     }
-
-    .nz-line-grip-detail {
-      background-color: var(--iui-color-border-subtle);
-    }
   }
 }

package/lib/esm/appui-react/layers.scss

@@ -2,6 +2,8 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
+@layer itwinui;
+
 @layer appui {
   @layer layout, component, preview;
 

package/lib/esm/appui-react/layout/footer/dialog/Dialog.scss

@@ -4,7 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 .nz-footer-dialog-dialog {
   border-radius: var(--iui-border-radius-1);
-  background-color: var(--iui-color-background);
   overflow: hidden;
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);

package/lib/esm/appui-react/layout/footer/snap-mode/Panel.scss

@@ -5,7 +5,6 @@
 @use "~@itwin/core-react/lib/core-react/typography" as *;
 
 .nz-footer-snapMode-panel {
-  background-color: var(--iui-color-background);
   border-radius: var(--iui-border-radius-1);
   overflow: hidden;
 

package/lib/esm/appui-react/layout/widget-panels/Grip.scss

@@ -64,7 +64,7 @@ $line-grip-width: calc(#{$nz-grip-width} - 2px);
 
     &:hover,
     &.nz-resizing {
-      background-color: var(--iui-color-icon-accent);
+      background-color: var(--iui-color-background-accent);
     }
   }
 
@@ -84,8 +84,8 @@ $line-grip-width: calc(#{$nz-grip-width} - 2px);
 
     .nz-collapsed & {
       display: flex;
-      background-color: var(--iui-color-background-disabled);
-      border: 1px solid var(--iui-color-border-subtle);
+      background-color: var(--iui-color-background);
+      border: 1px solid var(--iui-color-border-foreground);
       border-radius: 999px;
       box-sizing: border-box;
       opacity: 1;
@@ -118,8 +118,8 @@ $line-grip-width: calc(#{$nz-grip-width} - 2px);
       width: $line-grip-width;
 
       .nz-line-grip-detail {
-        width: 1px;
         height: 70%;
+        border-left: 1px solid var(--iui-color-border-foreground);
       }
     }
 
@@ -130,12 +130,8 @@ $line-grip-width: calc(#{$nz-grip-width} - 2px);
 
       .nz-line-grip-detail {
         width: 70%;
-        height: 1px;
+        border-top: 1px solid var(--iui-color-border-foreground);
       }
     }
-
-    .nz-line-grip-detail {
-      background-color: var(--iui-color-border-subtle);
-    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/appui-react",
-  "version": "5.13.1",
+  "version": "5.14.0",
   "description": "A react component library for AppUI framework",
   "type": "module",
   "types": "./lib/appui-react.d.ts",
@@ -45,23 +45,23 @@
     "react-dom": "^18.0.0",
     "react-redux": "^7.2.2 || ^8.0.0 || ^9.0.0",
     "redux": "^4.1.0 || ^5.0.0",
-    "@itwin/components-react": "5.13.1",
-    "@itwin/core-react": "5.13.1",
-    "@itwin/imodel-components-react": "5.13.1"
+    "@itwin/components-react": "5.14.0",
+    "@itwin/core-react": "5.14.0",
+    "@itwin/imodel-components-react": "5.14.0"
   },
   "devDependencies": {
-    "@itwin/appui-abstract": "rc",
+    "@itwin/appui-abstract": "^5.1.0",
     "@itwin/build-tools": "4.10.2",
-    "@itwin/core-bentley": "rc",
-    "@itwin/core-common": "rc",
-    "@itwin/core-frontend": "rc",
-    "@itwin/core-geometry": "rc",
-    "@itwin/core-orbitgt": "rc",
-    "@itwin/core-quantity": "rc",
-    "@itwin/ecschema-metadata": "rc",
+    "@itwin/core-bentley": "^5.1.0",
+    "@itwin/core-common": "^5.1.0",
+    "@itwin/core-frontend": "^5.1.0",
+    "@itwin/core-geometry": "^5.1.0",
+    "@itwin/core-orbitgt": "^5.1.0",
+    "@itwin/core-quantity": "^5.1.0",
+    "@itwin/ecschema-metadata": "^5.1.0",
     "@itwin/eslint-plugin": "5.1.0",
-    "@itwin/itwinui-react": "^3.18.3",
-    "@itwin/webgl-compatibility": "rc",
+    "@itwin/itwinui-react": "^3.19.4",
+    "@itwin/webgl-compatibility": "^5.1.0",
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",
@@ -91,9 +91,9 @@
     "typescript": "~5.6.2",
     "upath": "^2.0.1",
     "vitest": "^3.0.6",
-    "@itwin/imodel-components-react": "5.13.1",
-    "@itwin/core-react": "5.13.1",
-    "@itwin/components-react": "5.13.1"
+    "@itwin/components-react": "5.14.0",
+    "@itwin/core-react": "5.14.0",
+    "@itwin/imodel-components-react": "5.14.0"
   },
   "dependencies": {
     "@itwin/itwinui-icons-react": "^2.8.0",