@dynatrace/strato-components 3.7.1 → 3.8.0

package/layouts/page-layout/details-layout/DetailsLayout.js

@@ -86,15 +86,8 @@ function DetailsLayoutInner({
       contextValue
     );
   }, [pageLayoutPortalContext, contextValue]);
-  const contentNode = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "div",
-    {
-      ref: content.ref,
-      ...content.domProps,
-      className: (0, import_clsx.clsx)(styles.content, content.domProps.className),
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(contentTeleport.Target, {})
-    }
-  );
+  const contentClassName = (0, import_clsx.clsx)(styles.content, content.domProps.className);
+  const contentNode = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("main", { ref: content.ref, ...content.domProps, className: contentClassName, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(contentTeleport.Target, {}) });
   const layoutNode = (() => {
     switch (layout.mode) {
       case "collapsed": {
@@ -102,16 +95,15 @@ function DetailsLayoutInner({
       }
       case "split": {
         return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_SplitLayout.SplitLayout, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_SplitLayout.SplitLayout.Content,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SplitLayout.SplitLayout.Content, { minWidth: content.config.minWidth, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "main",
             {
-              ...content.domProps,
               ref: content.ref,
-              minWidth: content.config.minWidth,
+              ...content.domProps,
               className: (0, import_clsx.clsx)(styles.content, content.domProps.className),
               children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(contentTeleport.Target, {})
             }
-          ),
+          ) }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_SplitLayout.SplitLayout.Panel,
             {
@@ -216,7 +208,7 @@ const DetailsLayout = (0, import_react.memo)(
               panelTeleport
             }
           ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "div",
+            "main",
             {
               ref: content.ref,
               ...content.domProps,

package/layouts/page-layout/details-layout/DetailsLayout.sty.js

@@ -26,8 +26,8 @@ __export(DetailsLayout_css_exports, {
 module.exports = __toCommonJS(DetailsLayout_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/AppRoot.css");
 var import_DetailsLayout_css_ts_vanilla = require("./DetailsLayout.css");
-var content = "_1377n3n2-3-7-1";
-var drawer = "_1377n3n3-3-7-1";
-var drawerContent = "_1377n3n4-3-7-1";
-var layoutRoot = "_1377n3n0-3-7-1";
-var panel = "_1377n3n1-3-7-1";
+var content = "_1377n3n2-3-8-0";
+var drawer = "_1377n3n3-3-8-0";
+var drawerContent = "_1377n3n4-3-8-0";
+var layoutRoot = "_1377n3n0-3-8-0";
+var panel = "_1377n3n1-3-8-0";

package/layouts/page-layout/details-layout/Overlay.css

@@ -1,4 +1,4 @@
-._15qr1eq0-3-7-1 {
+._15qr1eq0-3-8-0 {
   position: absolute;
   z-index: 1;
   right: 0;
@@ -12,19 +12,19 @@
   box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   display: flex;
 }
-._1jgl8s50-3-7-1 ._15qr1eq0-3-7-1 {
+._1jgl8s50-3-8-0 ._15qr1eq0-3-8-0 {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._15qr1eq1-3-7-1 {
+._15qr1eq1-3-8-0 {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   padding: var(--dt-spacings-size-16, 16px);
   flex-grow: 1;
 }
-._15qr1eq2-3-7-1 {
+._15qr1eq2-3-8-0 {
   height: 100%;
   flex-shrink: 0;
   position: relative;
@@ -33,7 +33,7 @@
   display: flex;
   justify-content: center;
 }
-._1jgl8s50-3-7-1 ._15qr1eq2-3-7-1 {
+._1jgl8s50-3-8-0 ._15qr1eq2-3-8-0 {
   border-radius: 0;
   height: 100%;
   width: var(--dt-spacings-size-8, 8px);
@@ -41,7 +41,7 @@
   transition: none;
   background-color: transparent;
 }
-._1jgl8s50-3-7-1 ._15qr1eq2-3-7-1::before {
+._1jgl8s50-3-8-0 ._15qr1eq2-3-8-0::before {
   content: "";
   position: absolute;
   top: 0;
@@ -52,13 +52,13 @@
   background-color: var(--dt-colors-border-neutral-subdued, #e4e5eb);
   pointer-events: none;
 }
-._1jgl8s50-3-7-1 ._15qr1eq2-3-7-1:hover::before {
+._1jgl8s50-3-8-0 ._15qr1eq2-3-8-0:hover::before {
   background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-7-1 ._15qr1eq2-3-7-1:active::before {
+._1jgl8s50-3-8-0 ._15qr1eq2-3-8-0:active::before {
   background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._15qr1eq3-3-7-1 {
+._15qr1eq3-3-8-0 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -71,17 +71,17 @@
   transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   width: 2px;
 }
-._15qr1eq3-3-7-1:focus-visible {
+._15qr1eq3-3-8-0:focus-visible {
   width: 100%;
 }
-._15qr1eq3-3-7-1:hover._15qr1eq3-3-7-1:focus-visible {
+._15qr1eq3-3-8-0:hover._15qr1eq3-3-8-0:focus-visible {
   width: 2px;
 }
-._15qr1eq3-3-7-1:focus-visible, ._15qr1eq3-3-7-1:hover {
+._15qr1eq3-3-8-0:focus-visible, ._15qr1eq3-3-8-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._15qr1eq3-3-7-1:after {
+._15qr1eq3-3-8-0:after {
   content: "";
   display: block;
   height: 100%;
@@ -92,20 +92,20 @@
   user-select: none;
   width: 100%;
 }
-._1jgl8s50-3-7-1 ._15qr1eq3-3-7-1 {
+._1jgl8s50-3-8-0 ._15qr1eq3-3-8-0 {
   width: 0;
   cursor: ew-resize;
 }
-._1jgl8s50-3-7-1 ._15qr1eq2-3-7-1:has(._15qr1eq3-3-7-1:focus-visible)::before {
+._1jgl8s50-3-8-0 ._15qr1eq2-3-8-0:has(._15qr1eq3-3-8-0:focus-visible)::before {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   width: var(--dt-borders-width-emphasized, 2px);
 }
-._1jgl8s50-3-7-1 ._15qr1eq0-3-7-1:has(._15qr1eq3-3-7-1:hover) {
+._1jgl8s50-3-8-0 ._15qr1eq0-3-8-0:has(._15qr1eq3-3-8-0:hover) {
   box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d);
 }
-._1jgl8s50-3-7-1 ._15qr1eq0-3-7-1:has(._15qr1eq3-3-7-1:active) {
+._1jgl8s50-3-8-0 ._15qr1eq0-3-8-0:has(._15qr1eq3-3-8-0:active) {
   box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
 }
-._1jgl8s50-3-7-1 ._15qr1eq0-3-7-1:has(._15qr1eq3-3-7-1:focus-visible) {
+._1jgl8s50-3-8-0 ._15qr1eq0-3-8-0:has(._15qr1eq3-3-8-0:focus-visible) {
   box-shadow: -1px 0px 0px 0px var(--dt-colors-border-neutral-default, #dadbe4), var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
 }

package/layouts/page-layout/details-layout/Overlay.sty.js

@@ -25,7 +25,7 @@ __export(Overlay_css_exports, {
 module.exports = __toCommonJS(Overlay_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/AppRoot.css");
 var import_Overlay_css_ts_vanilla = require("./Overlay.css");
-var handleContainer = "_15qr1eq2-3-7-1";
-var overlay = "_15qr1eq0-3-7-1";
-var overlayContent = "_15qr1eq1-3-7-1";
-var resizeHandle = "_15qr1eq3-3-7-1";
+var handleContainer = "_15qr1eq2-3-8-0";
+var overlay = "_15qr1eq0-3-8-0";
+var overlayContent = "_15qr1eq1-3-8-0";
+var resizeHandle = "_15qr1eq3-3-8-0";

package/layouts/page-layout/details-layout/slots.d.ts

@@ -51,5 +51,5 @@ export interface ExtractedContentSlot {
         minWidth: PanelWidth;
     };
     domProps: ComponentPropsWithoutRef<'div'>;
-    ref?: Ref<HTMLDivElement>;
+    ref?: Ref<HTMLElement>;
 }

package/layouts/page-layout/shared/portal-slots.d.ts

@@ -25,7 +25,7 @@ export declare const PageLayoutSidebar: (props: SidebarProps & import("react").R
  * registers content config via the slot registry in a layout effect.
  * @internal
  */
-export declare const PageLayoutContent: (props: import("../../index.js").PageLayoutContentProps & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement | null;
+export declare const PageLayoutContent: (props: import("../../index.js").PageLayoutContentProps & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement | null;
 /**
  * PageLayout.Details - portals children into the details host node and
  * registers details config via the slot registry in a layout effect.

package/layouts/page-layout/shared/slot-config.d.ts

@@ -24,7 +24,7 @@ export interface ContentSlotConfig {
         minWidth: PanelWidth;
     };
     domProps: ComponentPropsWithoutRef<'div'>;
-    ref?: Ref<HTMLDivElement>;
+    ref?: Ref<HTMLElement>;
 }
 /** @internal */
 export interface DetailsSlotConfig {

package/layouts/page-layout/sidebar-layout/SidebarLayout.css

@@ -1,14 +1,14 @@
-._1mr4xg70-3-7-1 {
+._1mr4xg70-3-8-0 {
   height: 100%;
   overflow: hidden;
   position: relative;
 }
-._1mr4xg71-3-7-1 {
+._1mr4xg71-3-8-0 {
   display: flex;
   height: 100%;
   width: 100%;
 }
-._1mr4xg72-3-7-1 {
+._1mr4xg72-3-8-0 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
@@ -16,37 +16,37 @@
   padding: var(--dt-spacings-size-16, 16px);
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1jgl8s50-3-7-1 ._1mr4xg72-3-7-1 {
+._1jgl8s50-3-8-0 ._1mr4xg72-3-8-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._1mr4xg73-3-7-1 {
+._1mr4xg73-3-8-0 {
   box-sizing: border-box;
   height: 100%;
   overflow-y: auto;
   flex-grow: 1;
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
 }
-._1mr4xg74-3-7-1 {
+._1mr4xg74-3-8-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1mr4xg75-3-7-1 {
+._1mr4xg75-3-8-0 {
   position: relative;
   width: var(--dt-spacings-size-16, 16px);
   height: 100%;
   flex-shrink: 0;
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1jgl8s50-3-7-1 ._1mr4xg75-3-7-1 {
+._1jgl8s50-3-8-0 ._1mr4xg75-3-8-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   border-right: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-subdued, #e4e5eb);
 }
-._1jgl8s50-3-7-1 ._1mr4xg75-3-7-1:hover {
+._1jgl8s50-3-8-0 ._1mr4xg75-3-8-0:hover {
   border-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-7-1 ._1mr4xg75-3-7-1:active {
+._1jgl8s50-3-8-0 ._1mr4xg75-3-8-0:active {
   border-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._1mr4xg76-3-7-1 {
+._1mr4xg76-3-8-0 {
   background-color: transparent;
   border-width: 0;
   cursor: pointer;
@@ -61,54 +61,54 @@
   translate: calc(0px - var(--dt-spacings-size-16, 16px) * 2);
   border-top-right-radius: var(--dt-borders-radius-surface-default, 12px);
 }
-._1mr4xg76-3-7-1:hover, ._1mr4xg76-3-7-1:focus, ._1mr4xg75-3-7-1:hover ._1mr4xg76-3-7-1 {
+._1mr4xg76-3-8-0:hover, ._1mr4xg76-3-8-0:focus, ._1mr4xg75-3-8-0:hover ._1mr4xg76-3-8-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   translate: calc(0px - var(--dt-spacings-size-16, 16px) / 2);
 }
-._1jgl8s50-3-7-1 ._1mr4xg76-3-7-1, ._1jgl8s50-3-7-1 ._1mr4xg76-3-7-1:hover, ._1jgl8s50-3-7-1 ._1mr4xg76-3-7-1:focus, ._1jgl8s50-3-7-1 ._1mr4xg75-3-7-1:hover ._1mr4xg76-3-7-1 {
+._1jgl8s50-3-8-0 ._1mr4xg76-3-8-0, ._1jgl8s50-3-8-0 ._1mr4xg76-3-8-0:hover, ._1jgl8s50-3-8-0 ._1mr4xg76-3-8-0:focus, ._1jgl8s50-3-8-0 ._1mr4xg75-3-8-0:hover ._1mr4xg76-3-8-0 {
   border-top-right-radius: 0;
   translate: 0;
   box-shadow: none;
 }
-._1mr4xg77-3-7-1 {
+._1mr4xg77-3-8-0 {
   box-sizing: border-box;
   padding: var(--dt-spacings-size-16, 16px);
 }
-._1mr4xg78-3-7-1 {
+._1mr4xg78-3-8-0 {
   display: flex;
   flex-direction: column;
   height: 100%;
 }
-._1mr4xg79-3-7-1 {
+._1mr4xg79-3-8-0 {
   box-sizing: border-box;
   flex-grow: 1;
 }
-._1mr4xg7a-3-7-1 {
+._1mr4xg7a-3-8-0 {
   display: flex;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._1mr4xg7c-3-7-1 {
-  --_1mr4xg7b-3-7-1: 24px;
+._1mr4xg7c-3-8-0 {
+  --_1mr4xg7b-3-8-0: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
   left: -2px;
   line-height: 0;
   z-index: 1;
 }
-._1mr4xg7d-3-7-1 {
-  --_1mr4xg7b-3-7-1: 24px;
+._1mr4xg7d-3-8-0 {
+  --_1mr4xg7b-3-8-0: 24px;
   position: absolute;
   top: var(--dt-spacings-size-20, 20px);
   left: 2px;
   line-height: 0;
   z-index: 1;
 }
-._1mr4xg7e-3-7-1 {
-  width: var(--_1mr4xg7b-3-7-1);
-  height: var(--_1mr4xg7b-3-7-1);
+._1mr4xg7e-3-8-0 {
+  width: var(--_1mr4xg7b-3-8-0);
+  height: var(--_1mr4xg7b-3-8-0);
   box-sizing: border-box;
 }
-._1mr4xg7f-3-7-1 {
+._1mr4xg7f-3-8-0 {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   opacity: 0;
   box-shadow: 0 0 0 2px var(--dt-colors-background-container-neutral-default, #f2f2f5);
@@ -116,52 +116,52 @@
   transition-property: all;
   transition-timing-function: var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
 }
-._1mr4xg7f-3-7-1:hover {
+._1mr4xg7f-3-8-0:hover {
   opacity: 1;
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
 }
-._1mr4xg7f-3-7-1:focus {
+._1mr4xg7f-3-8-0:focus-visible {
   opacity: 1;
 }
-._1mr4xg72-3-7-1:hover ~ ._1mr4xg74-3-7-1 ._1mr4xg7f-3-7-1, ._1mr4xg74-3-7-1:hover ._1mr4xg7f-3-7-1 {
+._1mr4xg72-3-8-0:hover ~ ._1mr4xg74-3-8-0 ._1mr4xg7f-3-8-0, ._1mr4xg74-3-8-0:hover ._1mr4xg7f-3-8-0 {
   opacity: 1;
 }
-._1jgl8s50-3-7-1 ._1mr4xg72-3-7-1:hover ~ ._1mr4xg74-3-7-1 ._1mr4xg7f-3-7-1, ._1jgl8s50-3-7-1 ._1mr4xg74-3-7-1:hover ._1mr4xg7f-3-7-1 {
+._1jgl8s50-3-8-0 ._1mr4xg72-3-8-0:hover ~ ._1mr4xg74-3-8-0 ._1mr4xg7f-3-8-0, ._1jgl8s50-3-8-0 ._1mr4xg74-3-8-0:hover ._1mr4xg7f-3-8-0 {
   opacity: 1;
   box-shadow: none;
 }
-._1jgl8s50-3-7-1 ._1mr4xg7f-3-7-1 {
+._1jgl8s50-3-8-0 ._1mr4xg7f-3-8-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   left: calc(-1 * var(--dt-spacings-size-6, 6px));
   opacity: 0;
 }
-._1jgl8s50-3-7-1 ._1mr4xg7f-3-7-1:hover {
+._1jgl8s50-3-8-0 ._1mr4xg7f-3-8-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   opacity: 1;
 }
-._1jgl8s50-3-7-1 ._1mr4xg7f-3-7-1:active {
+._1jgl8s50-3-8-0 ._1mr4xg7f-3-8-0:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }
-._1jgl8s50-3-7-1 ._1mr4xg7f-3-7-1:focus {
+._1jgl8s50-3-8-0 ._1mr4xg7f-3-8-0:focus-visible {
   opacity: 1;
 }
-._1mr4xg7g-3-7-1 {
+._1mr4xg7g-3-8-0 {
   background-color: var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1mr4xg7g-3-7-1:hover {
+._1mr4xg7g-3-8-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   box-shadow: 0 0 0 2px var(--dt-colors-background-container-neutral-default, #f2f2f5);
 }
-._1jgl8s50-3-7-1 ._1mr4xg7g-3-7-1 {
+._1jgl8s50-3-8-0 ._1mr4xg7g-3-8-0 {
   background-color: var(--dt-colors-background-base-default, #f9f9fa);
   border: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   left: var(--dt-spacings-size-2, 2px);
 }
-._1jgl8s50-3-7-1 ._1mr4xg7g-3-7-1:hover {
+._1jgl8s50-3-8-0 ._1mr4xg7g-3-8-0:hover {
   background-color: var(--dt-colors-background-field-neutral-default-hover, #dadbe4);
   box-shadow: none;
 }
-._1jgl8s50-3-7-1 ._1mr4xg7g-3-7-1:active {
+._1jgl8s50-3-8-0 ._1mr4xg7g-3-8-0:active {
   background-color: var(--dt-colors-background-field-neutral-default-active, #d0d1dc);
 }

package/layouts/page-layout/sidebar-layout/SidebarLayout.sty.js

@@ -37,18 +37,18 @@ module.exports = __toCommonJS(SidebarLayout_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../../core/components/app-root/AppRoot.css");
 var import_focusRingStatic_css_ts_vanilla = require("../../../core/styles/focusRingStatic.css");
 var import_SidebarLayout_css_ts_vanilla = require("./SidebarLayout.css");
-var collapseButton = "_1mr4xg7f-3-7-1 _1mr4xg7e-3-7-1";
-var collapseButtonContainer = "_1mr4xg7c-3-7-1";
-var collapsedSidebar = "_1mr4xg75-3-7-1";
-var collapsedSidebarWrapper = "_1mr4xg71-3-7-1";
-var content = "_1mr4xg73-3-7-1";
-var drawer = "_1mr4xg77-3-7-1";
-var drawerContent = "_1mr4xg79-3-7-1";
-var drawerContentContainer = "_1mr4xg78-3-7-1";
-var drawerHeader = "_1mr4xg7a-3-7-1";
-var expandButton = "_1mr4xg7g-3-7-1 _1mr4xg7e-3-7-1";
-var expandButtonContainer = "_1mr4xg7d-3-7-1";
-var hint = "_1mr4xg76-3-7-1 _z0fq9b4-3-7-1 _z0fq9bd-3-7-1 _z0fq9b6-3-7-1 _z0fq9bc-3-7-1";
-var layoutRoot = "_1mr4xg70-3-7-1";
-var panel = "_1mr4xg72-3-7-1";
-var resizeHandle = "_1mr4xg74-3-7-1";
+var collapseButton = "_1mr4xg7f-3-8-0 _1mr4xg7e-3-8-0";
+var collapseButtonContainer = "_1mr4xg7c-3-8-0";
+var collapsedSidebar = "_1mr4xg75-3-8-0";
+var collapsedSidebarWrapper = "_1mr4xg71-3-8-0";
+var content = "_1mr4xg73-3-8-0";
+var drawer = "_1mr4xg77-3-8-0";
+var drawerContent = "_1mr4xg79-3-8-0";
+var drawerContentContainer = "_1mr4xg78-3-8-0";
+var drawerHeader = "_1mr4xg7a-3-8-0";
+var expandButton = "_1mr4xg7g-3-8-0 _1mr4xg7e-3-8-0";
+var expandButtonContainer = "_1mr4xg7d-3-8-0";
+var hint = "_1mr4xg76-3-8-0 _z0fq9b4-3-8-0 _z0fq9bd-3-8-0 _z0fq9b6-3-8-0 _z0fq9bc-3-8-0";
+var layoutRoot = "_1mr4xg70-3-8-0";
+var panel = "_1mr4xg72-3-8-0";
+var resizeHandle = "_1mr4xg74-3-8-0";

package/layouts/split-layout/SplitLayout.css

@@ -1,11 +1,11 @@
-._6q8dk20-3-7-1 {
+._6q8dk20-3-8-0 {
   height: 100%;
   overflow-y: hidden;
   overflow-x: auto;
   display: flex;
   position: relative;
 }
-._6q8dk21-3-7-1 {
+._6q8dk21-3-8-0 {
   box-sizing: border-box;
   height: 100%;
   top: 0;
@@ -13,21 +13,21 @@
   flex-shrink: 0;
   overflow-y: auto;
 }
-._6q8dk22-3-7-1 {
+._6q8dk22-3-8-0 {
   flex: 0 0 auto;
 }
-._6q8dk23-3-7-1 {
+._6q8dk23-3-8-0 {
   flex: 1 1 0;
   contain: layout paint;
 }
-._6q8dk24-3-7-1 {
+._6q8dk24-3-8-0 {
   width: var(--dt-spacings-size-8, 8px);
   align-items: center;
   display: flex;
   justify-content: center;
   overflow-y: visible;
 }
-._1jgl8s50-3-7-1 ._6q8dk24-3-7-1 {
+._1jgl8s50-3-8-0 ._6q8dk24-3-8-0 {
   border-radius: 0;
   height: 100%;
   width: var(--dt-spacings-size-8, 8px);
@@ -37,7 +37,7 @@
   margin-inline: calc(var(--dt-spacings-size-8, 8px) / -2);
   z-index: 1;
 }
-._1jgl8s50-3-7-1 ._6q8dk24-3-7-1::before {
+._1jgl8s50-3-8-0 ._6q8dk24-3-8-0::before {
   content: "";
   position: absolute;
   top: 0;
@@ -48,23 +48,23 @@
   background-color: var(--dt-colors-border-neutral-subdued, #e4e5eb);
   pointer-events: none;
 }
-._1jgl8s50-3-7-1 ._6q8dk24-3-7-1:hover::before {
+._1jgl8s50-3-8-0 ._6q8dk24-3-8-0:hover::before {
   background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-7-1 ._6q8dk24-3-7-1:active::before {
+._1jgl8s50-3-8-0 ._6q8dk24-3-8-0:active::before {
   background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._6q8dk25-3-7-1 {
+._6q8dk25-3-8-0 {
   inset: 0;
   overflow: visible;
   pointer-events: none;
   position: absolute;
   z-index: 1;
 }
-._6q8dk25-3-7-1 > * {
+._6q8dk25-3-8-0 > * {
   pointer-events: auto;
 }
-._6q8dk26-3-7-1 {
+._6q8dk26-3-8-0 {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   border: none;
   border-radius: var(--dt-borders-radius-field-default, 6px);
@@ -77,17 +77,17 @@
   transition: height var(--dt-timings-base-default, 300ms) var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
   width: 2px;
 }
-._6q8dk26-3-7-1:focus-visible {
+._6q8dk26-3-8-0:focus-visible {
   width: 100%;
 }
-._6q8dk26-3-7-1:hover._6q8dk26-3-7-1:focus-visible {
+._6q8dk26-3-8-0:hover._6q8dk26-3-8-0:focus-visible {
   width: 2px;
 }
-._6q8dk26-3-7-1:focus-visible, ._6q8dk26-3-7-1:hover {
+._6q8dk26-3-8-0:focus-visible, ._6q8dk26-3-8-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._6q8dk26-3-7-1:after {
+._6q8dk26-3-8-0:after {
   content: "";
   display: block;
   height: 100%;
@@ -98,11 +98,11 @@
   user-select: none;
   width: 100%;
 }
-._1jgl8s50-3-7-1 ._6q8dk26-3-7-1 {
+._1jgl8s50-3-8-0 ._6q8dk26-3-8-0 {
   width: 0;
   cursor: ew-resize;
 }
-._1jgl8s50-3-7-1 ._6q8dk24-3-7-1:has(._6q8dk26-3-7-1:focus-visible)::before {
+._1jgl8s50-3-8-0 ._6q8dk24-3-8-0:has(._6q8dk26-3-8-0:focus-visible)::before {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   width: var(--dt-borders-width-emphasized, 2px);
 }

package/layouts/split-layout/SplitLayout.sty.js

@@ -28,10 +28,10 @@ __export(SplitLayout_css_exports, {
 module.exports = __toCommonJS(SplitLayout_css_exports);
 var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppRoot.css");
 var import_SplitLayout_css_ts_vanilla = require("./SplitLayout.css");
-var column = "_6q8dk21-3-7-1";
-var contentShellContainer = "_6q8dk23-3-7-1 _6q8dk21-3-7-1";
-var handleColumn = "_6q8dk24-3-7-1 _6q8dk21-3-7-1";
-var handleDecorations = "_6q8dk25-3-7-1";
-var layout = "_6q8dk20-3-7-1";
-var panelShellContainer = "_6q8dk22-3-7-1 _6q8dk21-3-7-1";
-var resizeHandle = "_6q8dk26-3-7-1";
+var column = "_6q8dk21-3-8-0";
+var contentShellContainer = "_6q8dk23-3-8-0 _6q8dk21-3-8-0";
+var handleColumn = "_6q8dk24-3-8-0 _6q8dk21-3-8-0";
+var handleDecorations = "_6q8dk25-3-8-0";
+var layout = "_6q8dk20-3-8-0";
+var panelShellContainer = "_6q8dk22-3-8-0 _6q8dk21-3-8-0";
+var resizeHandle = "_6q8dk26-3-8-0";