@dynatrace/strato-components 3.10.4 → 3.11.0

package/esm/layouts/page-layout/sidebar-layout/SidebarLayout.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/sidebar-layout/SidebarLayout.tsx"],
-  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  forwardRef,\n  memo,\n  useCallback,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type RefObject,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronSmallLeftDoubleIcon, XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { SidebarHint } from './CollapsedSidebarRail.js';\nimport * as styles from './SidebarLayout.sty.js';\nimport {\n  type ExtractedContentSlot,\n  type ExtractedSidebarSlot,\n} from './slots.js';\nimport { useButtonFocusHandover } from './useFocusHandover.js';\nimport { useLayoutState } from './useLayoutState.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useVisualRefreshEnabled } from '../../../core/hooks/useVisualRefreshEnabled.js';\nimport { Drawer } from '../../../overlays/drawer/Drawer.js';\nimport { Tooltip } from '../../../overlays/tooltip/Tooltip.js';\nimport { clampPanelWidth } from '../../split-layout/split-sizing-utils.js';\nimport { SplitLayout } from '../../split-layout/SplitLayout.js';\nimport { convertToPx } from '../../split-layout/width-utils.js';\nimport { useTeleport } from '../shared/useTeleport.js';\n\ntype TeleportPair = ReturnType<typeof useTeleport>;\n\n// = Spacings.Size16; SplitLayout.Panel needs a plain number, not a CSS var\nconst COLLAPSED_RAIL_WIDTH = 16;\n// visual refresh adds a 1px border-right (content-box, so it adds to the width)\nconst COLLAPSED_RAIL_BORDER_WIDTH = 1;\n\n// mirrors SplitLayout's own resize-handle width (useSplitSizing)\nconst SPLIT_HANDLE_WIDTH = 8;\n\nfunction SidebarLayoutInner({\n  sidebar,\n  content,\n  containerRef,\n  panelId,\n  contentTeleport,\n  panelTeleport,\n}: {\n  sidebar: ExtractedSidebarSlot;\n  content: ExtractedContentSlot;\n  containerRef: RefObject<HTMLDivElement | null>;\n  panelId: string;\n  contentTeleport: TeleportPair;\n  panelTeleport: TeleportPair;\n}) {\n  const layout = useLayoutState({ sidebar, containerRef });\n  const intl = useIntl();\n  const focusHandover = useButtonFocusHandover();\n  const isVisualRefreshEnabled = useVisualRefreshEnabled();\n\n  const collapsedRailWidth = isVisualRefreshEnabled\n    ? COLLAPSED_RAIL_WIDTH + COLLAPSED_RAIL_BORDER_WIDTH\n    : COLLAPSED_RAIL_WIDTH;\n\n  const [intendedWidth, setIntendedWidth] = useState<number>();\n  const containerWidth = layout.containerWidth;\n\n  const baseWidth =\n    containerWidth === 0\n      ? undefined\n      : intendedWidth ??\n        convertToPx(sidebar.config.defaultWidth, containerWidth);\n  const panelWidth =\n    baseWidth === undefined\n      ? undefined\n      : clampPanelWidth(baseWidth, containerWidth, {\n          panelMin: sidebar.config.minWidth,\n          panelMax: sidebar.config.maxWidth,\n          contentMin: content.config.minWidth,\n          handleWidth: sidebar.config.resizable ? SPLIT_HANDLE_WIDTH : 0,\n        });\n\n  const commitWidth = useCallback(\n    (value: number) => {\n      setIntendedWidth(value);\n      sidebar.config.onResize?.(value);\n    },\n    [sidebar.config],\n  );\n\n  const expandSidebarLabel = intl.formatMessage({\n    defaultMessage: 'Expand sidebar',\n    id: 'NF0tLfJTokD/xw5B',\n    description: 'Label for the button that expands the sidebar.',\n  });\n\n  const collapseSidebarLabel = intl.formatMessage({\n    defaultMessage: 'Collapse sidebar',\n    id: 'LJ0fyD2++VZgZ5g0',\n    description: 'Label for the button that collapses the sidebar.',\n  });\n\n  const sidebarLabel = intl.formatMessage({\n    defaultMessage: 'Sidebar',\n    id: 'BYUJpW8TBonAxnYd',\n    description: 'Accessible label for the sidebar panel.',\n  });\n\n  const setCollapsedWithFocusHandover = (value: boolean) => {\n    layout.setCollapsed(value);\n    focusHandover.setTarget(value ? 'expand' : 'collapse');\n  };\n\n  const contentNode = (\n    <div\n      ref={content.ref}\n      {...content.domProps}\n      className={clsx(styles.content, content.domProps.className)}\n    >\n      <contentTeleport.Target />\n    </div>\n  );\n\n  // must stay in one SplitLayout, not per-mode, or it remounts and resets scroll (APPDEV-18829)\n  const isSplit = layout.mode === 'split';\n  const isDrawer = layout.mode === 'drawer';\n\n  return (\n    <>\n      <SplitLayout>\n        <SplitLayout.Panel\n          {...(isSplit ? sidebar.domProps : {})}\n          ref={isSplit ? sidebar.ref : undefined}\n          minWidth={isSplit ? sidebar.config.minWidth : collapsedRailWidth}\n          maxWidth={isSplit ? sidebar.config.maxWidth : collapsedRailWidth}\n          defaultWidth={sidebar.config.defaultWidth}\n          width={isSplit ? panelWidth : collapsedRailWidth}\n          resizable={isSplit && sidebar.config.resizable}\n          position=\"start\"\n          onResize={commitWidth}\n          className={clsx(\n            isSplit && styles.panel,\n            isSplit && sidebar.domProps.className,\n          )}\n          // rail's expand button intentionally overflows the 16px column\n          style={isSplit ? undefined : { overflow: 'visible' }}\n          aria-label={isSplit ? sidebarLabel : undefined}\n          id={isSplit ? panelId : undefined}\n        >\n          {isSplit ? (\n            <panelTeleport.Target />\n          ) : (\n            <SidebarHint\n              panelId={panelId}\n              expandSidebarLabel={expandSidebarLabel}\n              expandButtonRef={focusHandover.expandButtonRef}\n              isCollapsed={isDrawer ? layout.collapsed : true}\n              onCollapsedChange={setCollapsedWithFocusHandover}\n            />\n          )}\n        </SplitLayout.Panel>\n        <SplitLayout.ResizeHandle className={styles.resizeHandle}>\n          <div className={styles.collapseButtonContainer}>\n            <Tooltip text={collapseSidebarLabel}>\n              <Button\n                className={styles.collapseButton}\n                aria-expanded=\"true\"\n                ref={focusHandover.collapseButtonRef}\n                aria-controls={panelId}\n                aria-label={collapseSidebarLabel}\n                size=\"condensed\"\n                data-dt-children-name=\"ExpandCollapse\"\n                data-dt-properties=\"state:collapse\"\n                onClick={() => {\n                  setCollapsedWithFocusHandover(true);\n                }}\n              >\n                <Button.Prefix>\n                  <ChevronSmallLeftDoubleIcon />\n                </Button.Prefix>\n              </Button>\n            </Tooltip>\n          </div>\n        </SplitLayout.ResizeHandle>\n        <SplitLayout.Content minWidth={content.config.minWidth}>\n          {contentNode}\n        </SplitLayout.Content>\n      </SplitLayout>\n      {isDrawer && (\n        <Drawer\n          {...sidebar.domProps}\n          ref={sidebar.ref}\n          className={clsx(styles.drawer, sidebar.domProps.className)}\n          aria-label={sidebarLabel}\n          isDismissed={layout.collapsed}\n          onDismiss={(state, _reason) => {\n            setCollapsedWithFocusHandover(state);\n          }}\n          placement=\"left\"\n          width=\"wide\"\n        >\n          <div className={styles.drawerContentContainer}>\n            <div className={styles.drawerHeader}>\n              <Button\n                style={{ marginLeft: 'auto' }}\n                ref={focusHandover.collapseButtonRef}\n                aria-label={collapseSidebarLabel}\n                data-dt-children-name=\"CloseX\"\n                onClick={() => {\n                  setCollapsedWithFocusHandover(true);\n                }}\n              >\n                <Button.Prefix>\n                  <XmarkIcon />\n                </Button.Prefix>\n              </Button>\n            </div>\n            <div className={styles.drawerContent}>\n              <panelTeleport.Target />\n            </div>\n          </div>\n        </Drawer>\n      )}\n    </>\n  );\n}\n\n/** @internal */\nexport type LayoutRootProps = {\n  sidebar: ExtractedSidebarSlot | null;\n  content: ExtractedContentSlot;\n} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'content'>;\n\n/** @internal */\nexport const SidebarLayout = memo(\n  forwardRef<HTMLDivElement, LayoutRootProps>((props, ref) => {\n    const { className: rootClassName, sidebar, content, ...rootProps } = props;\n\n    const panelId = useId();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const rootRef = useMergeRefs([ref, containerRef]);\n\n    const contentTeleport = useTeleport();\n    const panelTeleport = useTeleport();\n\n    return (\n      <>\n        <contentTeleport.Source>{content.children}</contentTeleport.Source>\n        {sidebar && (\n          <panelTeleport.Source>{sidebar.children}</panelTeleport.Source>\n        )}\n        <div\n          {...rootProps}\n          ref={rootRef}\n          className={clsx(styles.layoutRoot, rootClassName)}\n        >\n          {sidebar ? (\n            <SidebarLayoutInner\n              sidebar={sidebar}\n              content={content}\n              containerRef={containerRef}\n              panelId={panelId}\n              contentTeleport={contentTeleport}\n              panelTeleport={panelTeleport}\n            />\n          ) : (\n            <div\n              ref={content.ref}\n              {...content.domProps}\n              className={clsx(styles.content, content.domProps.className)}\n            >\n              <contentTeleport.Target />\n            </div>\n          )}\n        </div>\n      </>\n    );\n  }),\n);\nSidebarLayout.displayName = 'SidebarLayout (forwardRef)';\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { clsx } from 'clsx';\nimport {\n  forwardRef,\n  memo,\n  useCallback,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type Ref,\n  type RefObject,\n} from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { ChevronSmallLeftDoubleIcon, XmarkIcon } from '@dynatrace/strato-icons';\n\nimport { SidebarHint } from './CollapsedSidebarRail.js';\nimport * as styles from './SidebarLayout.sty.js';\nimport {\n  type ExtractedContentSlot,\n  type ExtractedSidebarSlot,\n} from './slots.js';\nimport { useButtonFocusHandover } from './useFocusHandover.js';\nimport { useLayoutState } from './useLayoutState.js';\nimport { Button } from '../../../buttons/button/Button.js';\nimport { useId } from '../../../core/hooks/useId.js';\nimport { useMergeRefs } from '../../../core/hooks/useMergeRefs.js';\nimport { useVisualRefreshEnabled } from '../../../core/hooks/useVisualRefreshEnabled.js';\nimport { Drawer } from '../../../overlays/drawer/Drawer.js';\nimport { Tooltip } from '../../../overlays/tooltip/Tooltip.js';\nimport { clampPanelWidth } from '../../split-layout/split-sizing-utils.js';\nimport { SplitLayout } from '../../split-layout/SplitLayout.js';\nimport { convertToPx } from '../../split-layout/width-utils.js';\nimport { useTeleport } from '../shared/useTeleport.js';\n\ntype TeleportPair = ReturnType<typeof useTeleport>;\n\n// = Spacings.Size16; SplitLayout.Panel needs a plain number, not a CSS var\nconst COLLAPSED_RAIL_WIDTH = 16;\n// visual refresh adds a 1px border-right (content-box, so it adds to the width)\nconst COLLAPSED_RAIL_BORDER_WIDTH = 1;\n\n// mirrors SplitLayout's own resize-handle width (useSplitSizing)\nconst SPLIT_HANDLE_WIDTH = 8;\n\nfunction SidebarLayoutInner({\n  sidebar,\n  content,\n  containerRef,\n  panelId,\n  contentTeleport,\n  panelTeleport,\n}: {\n  sidebar: ExtractedSidebarSlot;\n  content: ExtractedContentSlot;\n  containerRef: RefObject<HTMLDivElement | null>;\n  panelId: string;\n  contentTeleport: TeleportPair;\n  panelTeleport: TeleportPair;\n}) {\n  const layout = useLayoutState({ sidebar, containerRef });\n  const intl = useIntl();\n  const focusHandover = useButtonFocusHandover();\n  const isVisualRefreshEnabled = useVisualRefreshEnabled();\n\n  const collapsedRailWidth = isVisualRefreshEnabled\n    ? COLLAPSED_RAIL_WIDTH + COLLAPSED_RAIL_BORDER_WIDTH\n    : COLLAPSED_RAIL_WIDTH;\n\n  const [intendedWidth, setIntendedWidth] = useState<number>();\n  const containerWidth = layout.containerWidth;\n\n  const baseWidth =\n    containerWidth === 0\n      ? undefined\n      : intendedWidth ??\n        convertToPx(sidebar.config.defaultWidth, containerWidth);\n  const panelWidth =\n    baseWidth === undefined\n      ? undefined\n      : clampPanelWidth(baseWidth, containerWidth, {\n          panelMin: sidebar.config.minWidth,\n          panelMax: sidebar.config.maxWidth,\n          contentMin: content.config.minWidth,\n          handleWidth: sidebar.config.resizable ? SPLIT_HANDLE_WIDTH : 0,\n        });\n\n  const commitWidth = useCallback(\n    (value: number) => {\n      setIntendedWidth(value);\n      sidebar.config.onResize?.(value);\n    },\n    [sidebar.config],\n  );\n\n  const expandSidebarLabel = intl.formatMessage({\n    defaultMessage: 'Expand sidebar',\n    id: 'NF0tLfJTokD/xw5B',\n    description: 'Label for the button that expands the sidebar.',\n  });\n\n  const collapseSidebarLabel = intl.formatMessage({\n    defaultMessage: 'Collapse sidebar',\n    id: 'LJ0fyD2++VZgZ5g0',\n    description: 'Label for the button that collapses the sidebar.',\n  });\n\n  const sidebarLabel = intl.formatMessage({\n    defaultMessage: 'Sidebar',\n    id: 'BYUJpW8TBonAxnYd',\n    description: 'Accessible label for the sidebar panel.',\n  });\n\n  const setCollapsedWithFocusHandover = (value: boolean) => {\n    layout.setCollapsed(value);\n    focusHandover.setTarget(value ? 'expand' : 'collapse');\n  };\n\n  const contentNode = (\n    <div\n      ref={content.ref}\n      {...content.domProps}\n      className={clsx(styles.content, content.domProps.className)}\n    >\n      <contentTeleport.Target />\n    </div>\n  );\n\n  // must stay in one SplitLayout, not per-mode, or it remounts and resets scroll (APPDEV-18829)\n  const isSplit = layout.mode === 'split';\n  const isDrawer = layout.mode === 'drawer';\n\n  return (\n    <>\n      <SplitLayout>\n        <SplitLayout.Panel\n          {...(isSplit ? sidebar.domProps : {})}\n          ref={isSplit ? (sidebar.ref as Ref<HTMLDivElement>) : undefined}\n          minWidth={isSplit ? sidebar.config.minWidth : collapsedRailWidth}\n          maxWidth={isSplit ? sidebar.config.maxWidth : collapsedRailWidth}\n          defaultWidth={sidebar.config.defaultWidth}\n          width={isSplit ? panelWidth : collapsedRailWidth}\n          resizable={isSplit && sidebar.config.resizable}\n          position=\"start\"\n          onResize={commitWidth}\n          className={clsx(\n            isSplit && styles.panel,\n            isSplit && sidebar.domProps.className,\n          )}\n          // rail's expand button intentionally overflows the 16px column\n          style={isSplit ? undefined : { overflow: 'visible' }}\n          aria-label={isSplit ? sidebarLabel : undefined}\n          id={isSplit ? panelId : undefined}\n        >\n          {isSplit ? (\n            <panelTeleport.Target />\n          ) : (\n            <SidebarHint\n              panelId={panelId}\n              expandSidebarLabel={expandSidebarLabel}\n              expandButtonRef={focusHandover.expandButtonRef}\n              isCollapsed={isDrawer ? layout.collapsed : true}\n              onCollapsedChange={setCollapsedWithFocusHandover}\n            />\n          )}\n        </SplitLayout.Panel>\n        <SplitLayout.ResizeHandle className={styles.resizeHandle}>\n          <div className={styles.collapseButtonContainer}>\n            <Tooltip text={collapseSidebarLabel}>\n              <Button\n                className={styles.collapseButton}\n                aria-expanded=\"true\"\n                ref={focusHandover.collapseButtonRef}\n                aria-controls={panelId}\n                aria-label={collapseSidebarLabel}\n                size=\"condensed\"\n                data-dt-children-name=\"ExpandCollapse\"\n                data-dt-properties=\"state:collapse\"\n                onClick={() => {\n                  setCollapsedWithFocusHandover(true);\n                }}\n              >\n                <Button.Prefix>\n                  <ChevronSmallLeftDoubleIcon />\n                </Button.Prefix>\n              </Button>\n            </Tooltip>\n          </div>\n        </SplitLayout.ResizeHandle>\n        <SplitLayout.Content minWidth={content.config.minWidth}>\n          {contentNode}\n        </SplitLayout.Content>\n      </SplitLayout>\n      {isDrawer && (\n        <Drawer\n          {...sidebar.domProps}\n          ref={sidebar.ref as Ref<HTMLDialogElement>}\n          className={clsx(styles.drawer, sidebar.domProps.className)}\n          aria-label={sidebarLabel}\n          isDismissed={layout.collapsed}\n          onDismiss={(state, _reason) => {\n            setCollapsedWithFocusHandover(state);\n          }}\n          placement=\"left\"\n          width=\"wide\"\n        >\n          <div className={styles.drawerContentContainer}>\n            <div className={styles.drawerHeader}>\n              <Button\n                style={{ marginLeft: 'auto' }}\n                ref={focusHandover.collapseButtonRef}\n                aria-label={collapseSidebarLabel}\n                data-dt-children-name=\"CloseX\"\n                onClick={() => {\n                  setCollapsedWithFocusHandover(true);\n                }}\n              >\n                <Button.Prefix>\n                  <XmarkIcon />\n                </Button.Prefix>\n              </Button>\n            </div>\n            <div className={styles.drawerContent}>\n              <panelTeleport.Target />\n            </div>\n          </div>\n        </Drawer>\n      )}\n    </>\n  );\n}\n\n/** @internal */\nexport type LayoutRootProps = {\n  sidebar: ExtractedSidebarSlot | null;\n  content: ExtractedContentSlot;\n} & Omit<ComponentPropsWithoutRef<'div'>, 'children' | 'content'>;\n\n/** @internal */\nexport const SidebarLayout = memo(\n  forwardRef<HTMLDivElement, LayoutRootProps>((props, ref) => {\n    const { className: rootClassName, sidebar, content, ...rootProps } = props;\n\n    const panelId = useId();\n    const containerRef = useRef<HTMLDivElement>(null);\n    const rootRef = useMergeRefs([ref, containerRef]);\n\n    const contentTeleport = useTeleport();\n    const panelTeleport = useTeleport();\n\n    return (\n      <>\n        <contentTeleport.Source>{content.children}</contentTeleport.Source>\n        {sidebar && (\n          <panelTeleport.Source>{sidebar.children}</panelTeleport.Source>\n        )}\n        <div\n          {...rootProps}\n          ref={rootRef}\n          className={clsx(styles.layoutRoot, rootClassName)}\n        >\n          {sidebar ? (\n            <SidebarLayoutInner\n              sidebar={sidebar}\n              content={content}\n              containerRef={containerRef}\n              panelId={panelId}\n              contentTeleport={contentTeleport}\n              panelTeleport={panelTeleport}\n            />\n          ) : (\n            <div\n              ref={content.ref}\n              {...content.domProps}\n              className={clsx(styles.content, content.domProps.className)}\n            >\n              <contentTeleport.Target />\n            </div>\n          )}\n        </div>\n      </>\n    );\n  }),\n);\nSidebarLayout.displayName = 'SidebarLayout (forwardRef)';\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,20 +1,20 @@
 import "../../../core/components/app-root/AppRoot.css";
 import "../../../core/styles/focusRingStatic.css";
 import "./SidebarLayout.css";
-var collapseButton = "_1mr4xg7e-3-10-4 _1mr4xg7d-3-10-4";
-var collapseButtonContainer = "_1mr4xg7b-3-10-4";
-var collapsedSidebar = "_1mr4xg74-3-10-4";
-var content = "_1mr4xg72-3-10-4";
-var drawer = "_1mr4xg76-3-10-4";
-var drawerContent = "_1mr4xg78-3-10-4";
-var drawerContentContainer = "_1mr4xg77-3-10-4";
-var drawerHeader = "_1mr4xg79-3-10-4";
-var expandButton = "_1mr4xg7f-3-10-4 _1mr4xg7d-3-10-4";
-var expandButtonContainer = "_1mr4xg7c-3-10-4";
-var hint = "_1mr4xg75-3-10-4 _z0fq9b4-3-10-4 _z0fq9bd-3-10-4 _z0fq9b6-3-10-4 _z0fq9bc-3-10-4";
-var layoutRoot = "_1mr4xg70-3-10-4";
-var panel = "_1mr4xg71-3-10-4";
-var resizeHandle = "_1mr4xg73-3-10-4";
+var collapseButton = "_1mr4xg7e-3-11-0 _1mr4xg7d-3-11-0";
+var collapseButtonContainer = "_1mr4xg7b-3-11-0";
+var collapsedSidebar = "_1mr4xg74-3-11-0";
+var content = "_1mr4xg72-3-11-0";
+var drawer = "_1mr4xg76-3-11-0";
+var drawerContent = "_1mr4xg78-3-11-0";
+var drawerContentContainer = "_1mr4xg77-3-11-0";
+var drawerHeader = "_1mr4xg79-3-11-0";
+var expandButton = "_1mr4xg7f-3-11-0 _1mr4xg7d-3-11-0";
+var expandButtonContainer = "_1mr4xg7c-3-11-0";
+var hint = "_1mr4xg75-3-11-0 _z0fq9b4-3-11-0 _z0fq9bd-3-11-0 _z0fq9b6-3-11-0 _z0fq9bc-3-11-0";
+var layoutRoot = "_1mr4xg70-3-11-0";
+var panel = "_1mr4xg71-3-11-0";
+var resizeHandle = "_1mr4xg73-3-11-0";
 export {
   collapseButton,
   collapseButtonContainer,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/layouts/page-layout/sidebar-layout/SidebarLayout.css.ts"],
-  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport '../../../core/styles/focusRingStatic.css';\nimport './SidebarLayout.css';\nexport var collapseButton = '_1mr4xg7e-3-10-4 _1mr4xg7d-3-10-4';\nexport var collapseButtonContainer = '_1mr4xg7b-3-10-4';\nexport var collapsedSidebar = '_1mr4xg74-3-10-4';\nexport var content = '_1mr4xg72-3-10-4';\nexport var drawer = '_1mr4xg76-3-10-4';\nexport var drawerContent = '_1mr4xg78-3-10-4';\nexport var drawerContentContainer = '_1mr4xg77-3-10-4';\nexport var drawerHeader = '_1mr4xg79-3-10-4';\nexport var expandButton = '_1mr4xg7f-3-10-4 _1mr4xg7d-3-10-4';\nexport var expandButtonContainer = '_1mr4xg7c-3-10-4';\nexport var hint = '_1mr4xg75-3-10-4 _z0fq9b4-3-10-4 _z0fq9bd-3-10-4 _z0fq9b6-3-10-4 _z0fq9bc-3-10-4';\nexport var layoutRoot = '_1mr4xg70-3-10-4';\nexport var panel = '_1mr4xg71-3-10-4';\nexport var resizeHandle = '_1mr4xg73-3-10-4';"],
+  "sourcesContent": ["import '../../../core/components/app-root/AppRoot.css';\nimport '../../../core/styles/focusRingStatic.css';\nimport './SidebarLayout.css';\nexport var collapseButton = '_1mr4xg7e-3-11-0 _1mr4xg7d-3-11-0';\nexport var collapseButtonContainer = '_1mr4xg7b-3-11-0';\nexport var collapsedSidebar = '_1mr4xg74-3-11-0';\nexport var content = '_1mr4xg72-3-11-0';\nexport var drawer = '_1mr4xg76-3-11-0';\nexport var drawerContent = '_1mr4xg78-3-11-0';\nexport var drawerContentContainer = '_1mr4xg77-3-11-0';\nexport var drawerHeader = '_1mr4xg79-3-11-0';\nexport var expandButton = '_1mr4xg7f-3-11-0 _1mr4xg7d-3-11-0';\nexport var expandButtonContainer = '_1mr4xg7c-3-11-0';\nexport var hint = '_1mr4xg75-3-11-0 _z0fq9b4-3-11-0 _z0fq9bd-3-11-0 _z0fq9b6-3-11-0 _z0fq9bc-3-11-0';\nexport var layoutRoot = '_1mr4xg70-3-11-0';\nexport var panel = '_1mr4xg71-3-11-0';\nexport var resizeHandle = '_1mr4xg73-3-11-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,iBAAiB;AACrB,IAAI,0BAA0B;AAC9B,IAAI,mBAAmB;AACvB,IAAI,UAAU;AACd,IAAI,SAAS;AACb,IAAI,gBAAgB;AACpB,IAAI,yBAAyB;AAC7B,IAAI,eAAe;AACnB,IAAI,eAAe;AACnB,IAAI,wBAAwB;AAC5B,IAAI,OAAO;AACX,IAAI,aAAa;AACjB,IAAI,QAAQ;AACZ,IAAI,eAAe;",
   "names": []
 }

package/esm/layouts/split-layout/SplitLayout.css

@@ -1,11 +1,11 @@
-._6q8dk20-3-10-4 {
+._6q8dk20-3-11-0 {
   height: 100%;
   overflow-y: hidden;
   overflow-x: auto;
   display: flex;
   position: relative;
 }
-._6q8dk21-3-10-4 {
+._6q8dk21-3-11-0 {
   box-sizing: border-box;
   height: 100%;
   top: 0;
@@ -13,21 +13,21 @@
   flex-shrink: 0;
   overflow-y: auto;
 }
-._6q8dk22-3-10-4 {
+._6q8dk22-3-11-0 {
   flex: 0 0 auto;
 }
-._6q8dk23-3-10-4 {
+._6q8dk23-3-11-0 {
   flex: 1 1 0;
   contain: layout paint;
 }
-._6q8dk24-3-10-4 {
+._6q8dk24-3-11-0 {
   width: var(--dt-spacings-size-8, 8px);
   align-items: center;
   display: flex;
   justify-content: center;
   overflow-y: visible;
 }
-._1jgl8s50-3-10-4 ._6q8dk24-3-10-4 {
+._1jgl8s50-3-11-0 ._6q8dk24-3-11-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-10-4 ._6q8dk24-3-10-4::before {
+._1jgl8s50-3-11-0 ._6q8dk24-3-11-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-10-4 ._6q8dk24-3-10-4:hover::before {
+._1jgl8s50-3-11-0 ._6q8dk24-3-11-0:hover::before {
   background-color: var(--dt-colors-border-neutral-subdued-hover, #d0d1dc);
 }
-._1jgl8s50-3-10-4 ._6q8dk24-3-10-4:active::before {
+._1jgl8s50-3-11-0 ._6q8dk24-3-11-0:active::before {
   background-color: var(--dt-colors-border-neutral-subdued-active, #c6c7d5);
 }
-._6q8dk25-3-10-4 {
+._6q8dk25-3-11-0 {
   inset: 0;
   overflow: visible;
   pointer-events: none;
   position: absolute;
   z-index: 1;
 }
-._6q8dk25-3-10-4 > * {
+._6q8dk25-3-11-0 > * {
   pointer-events: auto;
 }
-._6q8dk26-3-10-4 {
+._6q8dk26-3-11-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-10-4:focus-visible {
+._6q8dk26-3-11-0:focus-visible {
   width: 100%;
 }
-._6q8dk26-3-10-4:hover._6q8dk26-3-10-4:focus-visible {
+._6q8dk26-3-11-0:hover._6q8dk26-3-11-0:focus-visible {
   width: 2px;
 }
-._6q8dk26-3-10-4:focus-visible, ._6q8dk26-3-10-4:hover {
+._6q8dk26-3-11-0:focus-visible, ._6q8dk26-3-11-0:hover {
   height: var(--dt-spacings-size-48, 48px);
   background-color: var(--dt-colors-border-neutral-accent-hover, #434465);
 }
-._6q8dk26-3-10-4:after {
+._6q8dk26-3-11-0:after {
   content: "";
   display: block;
   height: 100%;
@@ -98,14 +98,14 @@
   user-select: none;
   width: 100%;
 }
-._1jgl8s50-3-10-4 ._6q8dk26-3-10-4 {
+._1jgl8s50-3-11-0 ._6q8dk26-3-11-0 {
   width: 0;
   cursor: ew-resize;
 }
-._1jgl8s50-3-10-4 ._6q8dk24-3-10-4:has(._6q8dk26-3-10-4:focus-visible)::before {
+._1jgl8s50-3-11-0 ._6q8dk24-3-11-0:has(._6q8dk26-3-11-0:focus-visible)::before {
   background-color: var(--dt-colors-border-neutral-accent, #595a7d);
   width: var(--dt-borders-width-emphasized, 2px);
 }
-:root._1jgl8s50-3-10-4 {
+:root._1jgl8s50-3-11-0 {
   --_dt-split-handle-ew: 0;
 }

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

@@ -1,12 +1,12 @@
 import "../../core/components/app-root/AppRoot.css";
 import "./SplitLayout.css";
-var column = "_6q8dk21-3-10-4";
-var contentShellContainer = "_6q8dk23-3-10-4 _6q8dk21-3-10-4";
-var handleColumn = "_6q8dk24-3-10-4 _6q8dk21-3-10-4";
-var handleDecorations = "_6q8dk25-3-10-4";
-var layout = "_6q8dk20-3-10-4";
-var panelShellContainer = "_6q8dk22-3-10-4 _6q8dk21-3-10-4";
-var resizeHandle = "_6q8dk26-3-10-4";
+var column = "_6q8dk21-3-11-0";
+var contentShellContainer = "_6q8dk23-3-11-0 _6q8dk21-3-11-0";
+var handleColumn = "_6q8dk24-3-11-0 _6q8dk21-3-11-0";
+var handleDecorations = "_6q8dk25-3-11-0";
+var layout = "_6q8dk20-3-11-0";
+var panelShellContainer = "_6q8dk22-3-11-0 _6q8dk21-3-11-0";
+var resizeHandle = "_6q8dk26-3-11-0";
 export {
   column,
   contentShellContainer,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/split-layout/SplitLayout.css.ts"],
-  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './SplitLayout.css';\nexport var column = '_6q8dk21-3-10-4';\nexport var contentShellContainer = '_6q8dk23-3-10-4 _6q8dk21-3-10-4';\nexport var handleColumn = '_6q8dk24-3-10-4 _6q8dk21-3-10-4';\nexport var handleDecorations = '_6q8dk25-3-10-4';\nexport var layout = '_6q8dk20-3-10-4';\nexport var panelShellContainer = '_6q8dk22-3-10-4 _6q8dk21-3-10-4';\nexport var resizeHandle = '_6q8dk26-3-10-4';"],
+  "sourcesContent": ["import '../../core/components/app-root/AppRoot.css';\nimport './SplitLayout.css';\nexport var column = '_6q8dk21-3-11-0';\nexport var contentShellContainer = '_6q8dk23-3-11-0 _6q8dk21-3-11-0';\nexport var handleColumn = '_6q8dk24-3-11-0 _6q8dk21-3-11-0';\nexport var handleDecorations = '_6q8dk25-3-11-0';\nexport var layout = '_6q8dk20-3-11-0';\nexport var panelShellContainer = '_6q8dk22-3-11-0 _6q8dk21-3-11-0';\nexport var resizeHandle = '_6q8dk26-3-11-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,SAAS;AACb,IAAI,wBAAwB;AAC5B,IAAI,eAAe;AACnB,IAAI,oBAAoB;AACxB,IAAI,SAAS;AACb,IAAI,sBAAsB;AAC1B,IAAI,eAAe;",
   "names": []
 }

package/esm/layouts/surface/Surface.css

@@ -1,86 +1,86 @@
-._1qto6jt6-3-10-4 {
-  --_1igzksy0-3-10-4: var(--dt-borders-radius-surface-default, 12px);
+._1qto6jt6-3-11-0 {
+  --_1igzksy0-3-11-0: var(--dt-borders-radius-surface-default, 12px);
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   text-align: left;
   border: none;
   outline: none;
   position: relative;
   background-color: var(--dt-colors-background-surface-default, #fff);
-  border-radius: var(--_1igzksy0-3-10-4);
+  border-radius: var(--_1igzksy0-3-11-0);
 }
-._1qto6jt6-3-10-4::before, ._1qto6jt6-3-10-4::after {
+._1qto6jt6-3-11-0::before, ._1qto6jt6-3-11-0::after {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
-  border-radius: var(--_1igzksy0-3-10-4);
+  border-radius: var(--_1igzksy0-3-11-0);
   pointer-events: none;
 }
-._1qto6jt6-3-10-4::after {
+._1qto6jt6-3-11-0::after {
   outline-offset: 2px;
-  outline: 2px solid var(--_17bwkb02-3-10-4);
-  opacity: var(--_1qto6jt4-3-10-4);
-  transition: var(--_1qto6jt5-3-10-4);
+  outline: 2px solid var(--_17bwkb02-3-11-0);
+  opacity: var(--_1qto6jt4-3-11-0);
+  transition: var(--_1qto6jt5-3-11-0);
 }
-._1qto6jt7-3-10-4 {
-  --_1qto6jt4-3-10-4: 1;
-  --_1qto6jt5-3-10-4: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1)) var(--dt-animations-fade-in-duration-fast, 150ms);
+._1qto6jt7-3-11-0 {
+  --_1qto6jt4-3-11-0: 1;
+  --_1qto6jt5-3-11-0: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1)) var(--dt-animations-fade-in-duration-fast, 150ms);
 }
-._1qto6jt8-3-10-4 {
-  --_1qto6jt4-3-10-4: 0;
-  --_1qto6jt5-3-10-4: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1)) var(--dt-animations-fade-out-duration-fast, 150ms);
+._1qto6jt8-3-11-0 {
+  --_1qto6jt4-3-11-0: 0;
+  --_1qto6jt5-3-11-0: var(--dt-animations-fade-out-easing, cubic-bezier(0, 0, 0.2, 1)) var(--dt-animations-fade-out-duration-fast, 150ms);
 }
-._1qto6jt9-3-10-4 {
-  --_1qto6jt1-3-10-4: 0;
-  --_1qto6jt2-3-10-4: pointer;
-  --_1qto6jt3-3-10-4: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
+._1qto6jt9-3-11-0 {
+  --_1qto6jt1-3-11-0: 0;
+  --_1qto6jt2-3-11-0: pointer;
+  --_1qto6jt3-3-11-0: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
-  border-radius: var(--_1igzksy0-3-10-4);
+  border-radius: var(--_1igzksy0-3-11-0);
   pointer-events: none;
 }
-._1qto6jt9-3-10-4::after,._1qto6jt9-3-10-4::before {
+._1qto6jt9-3-11-0::after,._1qto6jt9-3-11-0::before {
   content: "";
   width: 100%;
   height: 100%;
   position: absolute;
   left: 0;
   top: 0;
-  border-radius: var(--_1igzksy0-3-10-4);
+  border-radius: var(--_1igzksy0-3-11-0);
   pointer-events: none;
   transition: var(--dt-animations-fade-in-easing, cubic-bezier(0.5, 0, 1, 1)) var(--dt-animations-fade-in-duration-fast, 150ms);
 }
-._1qto6jt9-3-10-4::after {
-  box-shadow: var(--_1qto6jt0-3-10-4);
-  opacity: var(--_1qto6jt1-3-10-4);
+._1qto6jt9-3-11-0::after {
+  box-shadow: var(--_1qto6jt0-3-11-0);
+  opacity: var(--_1qto6jt1-3-11-0);
 }
-._1qto6jt9-3-10-4::before {
-  box-shadow: var(--_1qto6jt3-3-10-4);
+._1qto6jt9-3-11-0::before {
+  box-shadow: var(--_1qto6jt3-3-11-0);
   opacity: 0;
 }
-._1qto6jta-3-10-4 {
-  --_1qto6jt0-3-10-4: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
-  --_1qto6jt3-3-10-4: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
+._1qto6jta-3-11-0 {
+  --_1qto6jt0-3-11-0: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+  --_1qto6jt3-3-11-0: var(--dt-box-shadows-surface-flat-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
   box-shadow: var(--dt-box-shadows-surface-flat-rest, 0px 0px 0px 1px #2d2e4e0d);
 }
-._1qto6jtb-3-10-4 {
-  --_1qto6jt0-3-10-4: var(--dt-box-shadows-surface-raised-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
-  --_1qto6jt3-3-10-4: var(--dt-box-shadows-surface-raised-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
+._1qto6jtb-3-11-0 {
+  --_1qto6jt0-3-11-0: var(--dt-box-shadows-surface-raised-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+  --_1qto6jt3-3-11-0: var(--dt-box-shadows-surface-raised-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
   box-shadow: var(--dt-box-shadows-surface-raised-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 4px 8px -2px #2d2e4e12);
 }
-._1qto6jtc-3-10-4 {
-  --_1qto6jt0-3-10-4: var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
-  --_1qto6jt3-3-10-4: var(--dt-box-shadows-surface-floating-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d);
+._1qto6jtc-3-11-0 {
+  --_1qto6jt0-3-11-0: var(--dt-box-shadows-surface-floating-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
+  --_1qto6jt3-3-11-0: var(--dt-box-shadows-surface-floating-hover, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 6px 14px -2px #2d2e4e3d);
   box-shadow: var(--dt-box-shadows-surface-floating-rest, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 5px 11px -2px #2d2e4e29);
 }
-._1qto6jtd-3-10-4 {
-  --_1qto6jt1-3-10-4: 1;
-  --_1qto6jt2-3-10-4: grab;
+._1qto6jtd-3-11-0 {
+  --_1qto6jt1-3-11-0: 1;
+  --_1qto6jt2-3-11-0: grab;
 }
 button.strato-surface:not(:disabled), a.strato-surface:not(:disabled) {
   cursor: pointer;

package/esm/layouts/surface/Surface.sty.js

@@ -1,8 +1,8 @@
 import "../../styles/colorUtils.css";
 import "./Surface.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var pseudoElement = _7a468({ defaultClassName: "_1qto6jt9-3-10-4", variantClassNames: { elevation: { flat: "_1qto6jta-3-10-4", raised: "_1qto6jtb-3-10-4", floating: "_1qto6jtc-3-10-4" }, dragged: { true: "_1qto6jtd-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
-var surface = _7a468({ defaultClassName: "_1qto6jt6-3-10-4", variantClassNames: { selected: { true: "_1qto6jt7-3-10-4", false: "_1qto6jt8-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var pseudoElement = _7a468({ defaultClassName: "_1qto6jt9-3-11-0", variantClassNames: { elevation: { flat: "_1qto6jta-3-11-0", raised: "_1qto6jtb-3-11-0", floating: "_1qto6jtc-3-11-0" }, dragged: { true: "_1qto6jtd-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
+var surface = _7a468({ defaultClassName: "_1qto6jt6-3-11-0", variantClassNames: { selected: { true: "_1qto6jt7-3-11-0", false: "_1qto6jt8-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   pseudoElement,
   surface

package/esm/layouts/surface/Surface.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/surface/Surface.css.ts"],
-  "sourcesContent": ["import '../../styles/colorUtils.css';\nimport './Surface.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var pseudoElement = _7a468({defaultClassName:'_1qto6jt9-3-10-4',variantClassNames:{elevation:{flat:'_1qto6jta-3-10-4',raised:'_1qto6jtb-3-10-4',floating:'_1qto6jtc-3-10-4'},dragged:{true:'_1qto6jtd-3-10-4'}},defaultVariants:{},compoundVariants:[]});\nexport var surface = _7a468({defaultClassName:'_1qto6jt6-3-10-4',variantClassNames:{selected:{true:'_1qto6jt7-3-10-4',false:'_1qto6jt8-3-10-4'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../styles/colorUtils.css';\nimport './Surface.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var pseudoElement = _7a468({defaultClassName:'_1qto6jt9-3-11-0',variantClassNames:{elevation:{flat:'_1qto6jta-3-11-0',raised:'_1qto6jtb-3-11-0',floating:'_1qto6jtc-3-11-0'},dragged:{true:'_1qto6jtd-3-11-0'}},defaultVariants:{},compoundVariants:[]});\nexport var surface = _7a468({defaultClassName:'_1qto6jt6-3-11-0',variantClassNames:{selected:{true:'_1qto6jt7-3-11-0',false:'_1qto6jt8-3-11-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,gBAAgB,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,WAAU,EAAC,MAAK,oBAAmB,QAAO,oBAAmB,UAAS,mBAAkB,GAAE,SAAQ,EAAC,MAAK,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvP,IAAI,UAAU,OAAO,EAAC,kBAAiB,oBAAmB,mBAAkB,EAAC,UAAS,EAAC,MAAK,oBAAmB,OAAM,mBAAkB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/layouts/surface/variables.sty.js

@@ -1,4 +1,4 @@
-var surfaceBorderRadius = "var(--_1igzksy0-3-10-4)";
+var surfaceBorderRadius = "var(--_1igzksy0-3-11-0)";
 export {
   surfaceBorderRadius
 };

package/esm/layouts/surface/variables.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/surface/variables.css.ts"],
-  "sourcesContent": ["export var surfaceBorderRadius = 'var(--_1igzksy0-3-10-4)';"],
+  "sourcesContent": ["export var surfaceBorderRadius = 'var(--_1igzksy0-3-11-0)';"],
   "mappings": "AAAO,IAAI,sBAAsB;",
   "names": []
 }

package/esm/layouts/title-bar/TitleBar.css

@@ -1,21 +1,21 @@
-._wcwjv20-3-10-4 {
+._wcwjv20-3-11-0 {
   flex-grow: 1;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   gap: var(--dt-spacings-size-4, 4px);
 }
-._wcwjv21-3-10-4 {
+._wcwjv21-3-11-0 {
   width: clamp(400px, 400px, 100%);
 }
-._wcwjv22-3-10-4 {
+._wcwjv22-3-11-0 {
   flex-grow: 1;
   align-self: center;
   min-width: 0;
 }
-._wcwjv23-3-10-4 {
+._wcwjv23-3-11-0 {
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
 }
-._wcwjv24-3-10-4 {
+._wcwjv24-3-11-0 {
   max-width: 100%;
 }

package/esm/layouts/title-bar/TitleBar.sty.js

@@ -1,10 +1,10 @@
 import "../../styles/textStyle.css";
 import "./TitleBar.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var navigationWrapperCSS = "_wcwjv22-3-10-4";
-var subtitleCSS = "_wcwjv23-3-10-4 _da9a8v0-3-10-4 _da9a8v2-3-10-4 _da9a8v3-3-10-4 _da9a8vb-3-10-4";
-var suffixWrapperCSS = "_wcwjv24-3-10-4";
-var titleSubtitleWrapperCSS = _7a468({ defaultClassName: "_wcwjv20-3-10-4", variantClassNames: { childrenAreText: { true: "_wcwjv21-3-10-4" } }, defaultVariants: {}, compoundVariants: [] });
+var navigationWrapperCSS = "_wcwjv22-3-11-0";
+var subtitleCSS = "_wcwjv23-3-11-0 _da9a8v0-3-11-0 _da9a8v2-3-11-0 _da9a8v3-3-11-0 _da9a8vb-3-11-0";
+var suffixWrapperCSS = "_wcwjv24-3-11-0";
+var titleSubtitleWrapperCSS = _7a468({ defaultClassName: "_wcwjv20-3-11-0", variantClassNames: { childrenAreText: { true: "_wcwjv21-3-11-0" } }, defaultVariants: {}, compoundVariants: [] });
 export {
   navigationWrapperCSS,
   subtitleCSS,

package/esm/layouts/title-bar/TitleBar.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/layouts/title-bar/TitleBar.css.ts"],
-  "sourcesContent": ["import '../../styles/textStyle.css';\nimport './TitleBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var navigationWrapperCSS = '_wcwjv22-3-10-4';\nexport var subtitleCSS = '_wcwjv23-3-10-4 _da9a8v0-3-10-4 _da9a8v2-3-10-4 _da9a8v3-3-10-4 _da9a8vb-3-10-4';\nexport var suffixWrapperCSS = '_wcwjv24-3-10-4';\nexport var titleSubtitleWrapperCSS = _7a468({defaultClassName:'_wcwjv20-3-10-4',variantClassNames:{childrenAreText:{true:'_wcwjv21-3-10-4'}},defaultVariants:{},compoundVariants:[]});"],
+  "sourcesContent": ["import '../../styles/textStyle.css';\nimport './TitleBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var navigationWrapperCSS = '_wcwjv22-3-11-0';\nexport var subtitleCSS = '_wcwjv23-3-11-0 _da9a8v0-3-11-0 _da9a8v2-3-11-0 _da9a8v3-3-11-0 _da9a8vb-3-11-0';\nexport var suffixWrapperCSS = '_wcwjv24-3-11-0';\nexport var titleSubtitleWrapperCSS = _7a468({defaultClassName:'_wcwjv20-3-11-0',variantClassNames:{childrenAreText:{true:'_wcwjv21-3-11-0'}},defaultVariants:{},compoundVariants:[]});"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,uBAAuB;AAC3B,IAAI,cAAc;AAClB,IAAI,mBAAmB;AACvB,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,iBAAgB,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
   "names": []
 }

package/esm/navigation/breadcrumbs/Breadcrumbs.css

@@ -1,27 +1,27 @@
-._hw98ku0-3-10-4 {
+._hw98ku0-3-11-0 {
   display: flex;
   min-width: 0;
   margin: 0;
   padding: 0;
 }
-._hw98ku1-3-10-4 {
+._hw98ku1-3-11-0 {
   display: flex;
   gap: var(--dt-spacings-size-2, 2px);
   padding-right: var(--dt-spacings-size-2, 2px);
   white-space: nowrap;
 }
-._hw98ku2-3-10-4 {
+._hw98ku2-3-11-0 {
   overflow: hidden;
 }
-._hw98ku3-3-10-4 {
+._hw98ku3-3-11-0 {
   overflow: visible;
 }
-._hw98ku4-3-10-4 {
+._hw98ku4-3-11-0 {
   position: absolute;
   visibility: hidden;
   z-index: -1;
 }
-._hw98ku5-3-10-4 {
+._hw98ku5-3-11-0 {
   cursor: pointer;
   padding: 0;
   background: none;
@@ -32,18 +32,18 @@
   line-height: var(--dt-typography-text-base-emphasized-line-height, 1.4285714286);
   text-decoration: underline;
 }
-._hw98ku6-3-10-4 {
+._hw98ku6-3-11-0 {
   cursor: default;
   color: var(--dt-colors-text-neutral-default, #2f2f4f);
   text-decoration: none;
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   pointer-events: none;
 }
-._hw98ku7-3-10-4 {
+._hw98ku7-3-11-0 {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-._hw98ku8-3-10-4 {
+._hw98ku8-3-11-0 {
   min-width: var(--dt-spacings-size-20, 20px);
   min-height: var(--dt-spacings-size-20, 20px);
   color: var(--dt-colors-icon-neutral-subdued, #595a7d);

package/esm/navigation/breadcrumbs/Breadcrumbs.sty.js

@@ -1,10 +1,10 @@
 import "./Breadcrumbs.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var breadcrumbsContainerCSS = "_hw98ku0-3-10-4";
-var breadcrumbsItemCSS = _7a468({ defaultClassName: "_hw98ku5-3-10-4", variantClassNames: { disabled: { true: "_hw98ku6-3-10-4" }, isLastItem: { true: "_hw98ku7-3-10-4" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
-var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-10-4";
-var breadcrumbsListItemCSS = _7a468({ defaultClassName: "_hw98ku1-3-10-4", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-10-4", false: "_hw98ku3-3-10-4" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
-var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-10-4";
+var breadcrumbsContainerCSS = "_hw98ku0-3-11-0";
+var breadcrumbsItemCSS = _7a468({ defaultClassName: "_hw98ku5-3-11-0", variantClassNames: { disabled: { true: "_hw98ku6-3-11-0" }, isLastItem: { true: "_hw98ku7-3-11-0" } }, defaultVariants: { disabled: false, isLastItem: false }, compoundVariants: [] });
+var breadcrumbsItemInvisibleCSS = "_hw98ku4-3-11-0";
+var breadcrumbsListItemCSS = _7a468({ defaultClassName: "_hw98ku1-3-11-0", variantClassNames: { isLastVisible: { true: "_hw98ku2-3-11-0", false: "_hw98ku3-3-11-0" } }, defaultVariants: { isLastVisible: false }, compoundVariants: [] });
+var breadcrumbsSeperatorIconCSS = "_hw98ku8-3-11-0";
 export {
   breadcrumbsContainerCSS,
   breadcrumbsItemCSS,

package/esm/navigation/breadcrumbs/Breadcrumbs.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/navigation/breadcrumbs/Breadcrumbs.css.ts"],
-  "sourcesContent": ["import './Breadcrumbs.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var breadcrumbsContainerCSS = '_hw98ku0-3-10-4';\nexport var breadcrumbsItemCSS = _7a468({defaultClassName:'_hw98ku5-3-10-4',variantClassNames:{disabled:{true:'_hw98ku6-3-10-4'},isLastItem:{true:'_hw98ku7-3-10-4'}},defaultVariants:{disabled:false,isLastItem:false},compoundVariants:[]});\nexport var breadcrumbsItemInvisibleCSS = '_hw98ku4-3-10-4';\nexport var breadcrumbsListItemCSS = _7a468({defaultClassName:'_hw98ku1-3-10-4',variantClassNames:{isLastVisible:{true:'_hw98ku2-3-10-4',false:'_hw98ku3-3-10-4'}},defaultVariants:{isLastVisible:false},compoundVariants:[]});\nexport var breadcrumbsSeperatorIconCSS = '_hw98ku8-3-10-4';"],
+  "sourcesContent": ["import './Breadcrumbs.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var breadcrumbsContainerCSS = '_hw98ku0-3-11-0';\nexport var breadcrumbsItemCSS = _7a468({defaultClassName:'_hw98ku5-3-11-0',variantClassNames:{disabled:{true:'_hw98ku6-3-11-0'},isLastItem:{true:'_hw98ku7-3-11-0'}},defaultVariants:{disabled:false,isLastItem:false},compoundVariants:[]});\nexport var breadcrumbsItemInvisibleCSS = '_hw98ku4-3-11-0';\nexport var breadcrumbsListItemCSS = _7a468({defaultClassName:'_hw98ku1-3-11-0',variantClassNames:{isLastVisible:{true:'_hw98ku2-3-11-0',false:'_hw98ku3-3-11-0'}},defaultVariants:{isLastVisible:false},compoundVariants:[]});\nexport var breadcrumbsSeperatorIconCSS = '_hw98ku8-3-11-0';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,0BAA0B;AAC9B,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,UAAS,EAAC,MAAK,kBAAiB,GAAE,YAAW,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,UAAS,OAAM,YAAW,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACpO,IAAI,8BAA8B;AAClC,IAAI,yBAAyB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,eAAc,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,EAAC,eAAc,MAAK,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACrN,IAAI,8BAA8B;",
   "names": []
 }

package/esm/navigation/menu/Item.js

@@ -26,6 +26,7 @@ const Item = /* @__PURE__ */ forwardRef(
     children,
     disabled = false,
     onSelect,
+    textValue,
     as = "div",
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
@@ -137,6 +138,7 @@ const Item = /* @__PURE__ */ forwardRef(
         RadixItem,
         {
           "data-testid": dataTestId,
+          textValue,
           ref: forwardedRef,
           ..._mergeProps(focusProps, hoverProps, {
             onClick: (event) => {