@elliemae/ds-left-navigation-tree 3.80.0-next.67 → 3.80.0-next.69

package/dist/cjs/parts/RailItem.js

@@ -34,7 +34,6 @@ module.exports = __toCommonJS(RailItem_exports);
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
-var import_treeModel = require("../config/treeModel.js");
 var import_useTreeModel = require("../config/useTreeModel.js");
 var import_TreeContext = require("./TreeContext.js");
 var import_styled = require("./styled.js");
@@ -77,7 +76,8 @@ const RailItem = import_react.default.memo(({ id }) => {
         import_styled.StyledItemRow,
         {
           "data-row": true,
-          rowPadding: import_treeModel.ROW_PADDING,
+          rowPadding: 0,
+          isRailRow: true,
           isTall: true,
           isSticky: false,
           isCurrent,

package/dist/cjs/parts/RailItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/RailItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import React, { useCallback, useContext } from 'react';\nimport { ROW_PADDING } from '../config/treeModel.js';\nimport { useItemFocusState } from '../config/useTreeModel.js';\nimport { TreeContext } from './TreeContext.js';\nimport { StyledCollapsedContainer, StyledItem, StyledItemLabel, StyledItemRow } from './styled.js';\n\nconst HIDDEN_LABEL_STYLE = { display: 'none' };\n\n/**\n * Collapsed-rail node: an icon-only end treeitem. The label stays in the DOM with display: none\n * because it is the aria-labelledby target (hidden targets still name the element, and are not read twice).\n */\nexport const RailItem = React.memo(({ id }: { id: string }) => {\n  const { model, handlers, getOwnerProps, labelOverflow, getElementId } = useContext(TreeContext);\n  const info = model.index.get(id);\n  const isCurrent = model.currentLeafId === id;\n  const isSelectedParent = model.selectedParentIds.has(id);\n  const focusState = useItemFocusState(model, id);\n  const item = info?.item;\n\n  const focusRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (node && focusState === 'focus-target') node.focus();\n    },\n    [focusState],\n  );\n  const handleClick = useCallback((e: React.MouseEvent<HTMLElement>) => handlers.activate(id, e), [handlers, id]);\n  const getOwnerPropsArguments = useCallback(() => ({ item, level: 1, isOpen: false, isCurrent }), [item, isCurrent]);\n\n  if (!info || !item?.CollapsedComponent) return null;\n  const { CollapsedComponent } = item;\n  const labelId = getElementId('label', id);\n\n  return (\n    <StyledItem\n      isOpenSection={false}\n      role=\"treeitem\"\n      aria-level={1}\n      aria-current={isCurrent ? 'page' : undefined}\n      aria-labelledby={labelId}\n      tabIndex={focusState === 'none' ? -1 : 0}\n      data-dsid={id}\n      data-type={item.type}\n      data-selected={isCurrent}\n      data-selectedparent={isSelectedParent}\n      innerRef={focusRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledItemRow\n        data-row\n        rowPadding={ROW_PADDING}\n        isTall\n        isSticky={false}\n        isCurrent={isCurrent}\n        isSelectedParent={isSelectedParent}\n        onClick={handleClick}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledCollapsedContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          <CollapsedComponent item={item} />\n        </StyledCollapsedContainer>\n        <StyledItemLabel\n          id={labelId}\n          isTall\n          labelOverflow={labelOverflow}\n          style={HIDDEN_LABEL_STYLE}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {item.itemOpts?.label}\n        </StyledItemLabel>\n      </StyledItemRow>\n    </StyledItem>\n  );\n});\n\nRailItem.displayName = 'DSLeftNavigationTree.RailItem';\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADiDjB;AAjDN,mBAA+C;AAC/C,uBAA4B;AAC5B,0BAAkC;AAClC,yBAA4B;AAC5B,oBAAqF;AAErF,MAAM,qBAAqB,EAAE,SAAS,OAAO;AAMtC,MAAM,WAAW,aAAAA,QAAM,KAAK,CAAC,EAAE,GAAG,MAAsB;AAC7D,QAAM,EAAE,OAAO,UAAU,eAAe,eAAe,aAAa,QAAI,yBAAW,8BAAW;AAC9F,QAAM,OAAO,MAAM,MAAM,IAAI,EAAE;AAC/B,QAAM,YAAY,MAAM,kBAAkB;AAC1C,QAAM,mBAAmB,MAAM,kBAAkB,IAAI,EAAE;AACvD,QAAM,iBAAa,uCAAkB,OAAO,EAAE;AAC9C,QAAM,OAAO,MAAM;AAEnB,QAAM,eAAW;AAAA,IACf,CAAC,SAA6B;AAC5B,UAAI,QAAQ,eAAe,eAAgB,MAAK,MAAM;AAAA,IACxD;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,QAAM,kBAAc,0BAAY,CAAC,MAAqC,SAAS,SAAS,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC;AAC9G,QAAM,6BAAyB,0BAAY,OAAO,EAAE,MAAM,OAAO,GAAG,QAAQ,OAAO,UAAU,IAAI,CAAC,MAAM,SAAS,CAAC;AAElH,MAAI,CAAC,QAAQ,CAAC,MAAM,mBAAoB,QAAO;AAC/C,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,UAAU,aAAa,SAAS,EAAE;AAExC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe;AAAA,MACf,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,gBAAc,YAAY,SAAS;AAAA,MACnC,mBAAiB;AAAA,MACjB,UAAU,eAAe,SAAS,KAAK;AAAA,MACvC,aAAW;AAAA,MACX,aAAW,KAAK;AAAA,MAChB,iBAAe;AAAA,MACf,uBAAqB;AAAA,MACrB,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,YAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAM;AAAA,UACN,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,0CAAyB,eAA8B,wBACtD,sDAAC,sBAAmB,MAAY,GAClC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAI;AAAA,gBACJ,QAAM;AAAA,gBACN;AAAA,gBACA,OAAO;AAAA,gBACP;AAAA,gBACA;AAAA,gBAEC,eAAK,UAAU;AAAA;AAAA,YAClB;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,cAAc;",
+  "sourcesContent": ["import React, { useCallback, useContext } from 'react';\nimport { useItemFocusState } from '../config/useTreeModel.js';\nimport { TreeContext } from './TreeContext.js';\nimport { StyledCollapsedContainer, StyledItem, StyledItemLabel, StyledItemRow } from './styled.js';\n\nconst HIDDEN_LABEL_STYLE = { display: 'none' };\n\n/**\n * Collapsed-rail node: an icon-only end treeitem. The label stays in the DOM with display: none\n * because it is the aria-labelledby target (hidden targets still name the element, and are not read twice).\n */\nexport const RailItem = React.memo(({ id }: { id: string }) => {\n  const { model, handlers, getOwnerProps, labelOverflow, getElementId } = useContext(TreeContext);\n  const info = model.index.get(id);\n  const isCurrent = model.currentLeafId === id;\n  const isSelectedParent = model.selectedParentIds.has(id);\n  const focusState = useItemFocusState(model, id);\n  const item = info?.item;\n\n  const focusRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (node && focusState === 'focus-target') node.focus();\n    },\n    [focusState],\n  );\n  const handleClick = useCallback((e: React.MouseEvent<HTMLElement>) => handlers.activate(id, e), [handlers, id]);\n  const getOwnerPropsArguments = useCallback(() => ({ item, level: 1, isOpen: false, isCurrent }), [item, isCurrent]);\n\n  if (!info || !item?.CollapsedComponent) return null;\n  const { CollapsedComponent } = item;\n  const labelId = getElementId('label', id);\n\n  return (\n    <StyledItem\n      isOpenSection={false}\n      role=\"treeitem\"\n      aria-level={1}\n      aria-current={isCurrent ? 'page' : undefined}\n      aria-labelledby={labelId}\n      tabIndex={focusState === 'none' ? -1 : 0}\n      data-dsid={id}\n      data-type={item.type}\n      data-selected={isCurrent}\n      data-selectedparent={isSelectedParent}\n      innerRef={focusRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledItemRow\n        data-row\n        rowPadding={0}\n        isRailRow\n        isTall\n        isSticky={false}\n        isCurrent={isCurrent}\n        isSelectedParent={isSelectedParent}\n        onClick={handleClick}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledCollapsedContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          <CollapsedComponent item={item} />\n        </StyledCollapsedContainer>\n        <StyledItemLabel\n          id={labelId}\n          isTall\n          labelOverflow={labelOverflow}\n          style={HIDDEN_LABEL_STYLE}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {item.itemOpts?.label}\n        </StyledItemLabel>\n      </StyledItemRow>\n    </StyledItem>\n  );\n});\n\nRailItem.displayName = 'DSLeftNavigationTree.RailItem';\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgDjB;AAhDN,mBAA+C;AAC/C,0BAAkC;AAClC,yBAA4B;AAC5B,oBAAqF;AAErF,MAAM,qBAAqB,EAAE,SAAS,OAAO;AAMtC,MAAM,WAAW,aAAAA,QAAM,KAAK,CAAC,EAAE,GAAG,MAAsB;AAC7D,QAAM,EAAE,OAAO,UAAU,eAAe,eAAe,aAAa,QAAI,yBAAW,8BAAW;AAC9F,QAAM,OAAO,MAAM,MAAM,IAAI,EAAE;AAC/B,QAAM,YAAY,MAAM,kBAAkB;AAC1C,QAAM,mBAAmB,MAAM,kBAAkB,IAAI,EAAE;AACvD,QAAM,iBAAa,uCAAkB,OAAO,EAAE;AAC9C,QAAM,OAAO,MAAM;AAEnB,QAAM,eAAW;AAAA,IACf,CAAC,SAA6B;AAC5B,UAAI,QAAQ,eAAe,eAAgB,MAAK,MAAM;AAAA,IACxD;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,QAAM,kBAAc,0BAAY,CAAC,MAAqC,SAAS,SAAS,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC;AAC9G,QAAM,6BAAyB,0BAAY,OAAO,EAAE,MAAM,OAAO,GAAG,QAAQ,OAAO,UAAU,IAAI,CAAC,MAAM,SAAS,CAAC;AAElH,MAAI,CAAC,QAAQ,CAAC,MAAM,mBAAoB,QAAO;AAC/C,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,UAAU,aAAa,SAAS,EAAE;AAExC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe;AAAA,MACf,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,gBAAc,YAAY,SAAS;AAAA,MACnC,mBAAiB;AAAA,MACjB,UAAU,eAAe,SAAS,KAAK;AAAA,MACvC,aAAW;AAAA,MACX,aAAW,KAAK;AAAA,MAChB,iBAAe;AAAA,MACf,uBAAqB;AAAA,MACrB,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,YAAQ;AAAA,UACR,YAAY;AAAA,UACZ,WAAS;AAAA,UACT,QAAM;AAAA,UACN,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UAEA;AAAA,wDAAC,0CAAyB,eAA8B,wBACtD,sDAAC,sBAAmB,MAAY,GAClC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAI;AAAA,gBACJ,QAAM;AAAA,gBACN;AAAA,gBACA,OAAO;AAAA,gBACP;AAAA,gBACA;AAAA,gBAEC,eAAK,UAAU;AAAA;AAAA,YAClB;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,cAAc;",
   "names": ["React"]
 }

package/dist/cjs/parts/styled.js

@@ -53,14 +53,26 @@ var import_ds_system = require("@elliemae/ds-system");
 var import_constants = require("../constants/index.js");
 const SLOTS = import_constants.LEFT_NAVIGATION_TREE_SLOTS;
 const name = import_constants.DSLeftNavigationTreeName;
+const ABSOLUTE_LENGTH = /^\s*(\d+|\d*\.\d+)(px|rem|vw|vh|vmin|vmax)\s*$/;
+const ROOT_BORDER = 1;
+const ROOT_BORDER_TOTAL = `${ROOT_BORDER * 2}px`;
+const getContentWidth = (expanded, expandedWidth) => {
+  if (!expanded) return `calc(48px - ${ROOT_BORDER_TOTAL})`;
+  return ABSOLUTE_LENGTH.test(expandedWidth) ? `calc(${expandedWidth} - ${ROOT_BORDER_TOTAL})` : "100%";
+};
 const StyledRoot = (0, import_ds_system.styled)("nav", { name, slot: SLOTS.ROOT })`
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
   width: ${({ expanded, expandedWidth }) => expanded ? expandedWidth : "48px"};
+  && > * {
+    box-sizing: border-box;
+    width: ${({ expanded, expandedWidth }) => getContentWidth(expanded, expandedWidth)};
+  }
   transition: width ${({ expanded }) => expanded ? "ease-out" : "ease-in"} 350ms;
   height: 100%;
   overflow: hidden;
-  border: 1px solid ${({ theme }) => theme.colors.neutral[100]};
+  border: ${ROOT_BORDER}px solid ${({ theme }) => theme.colors.neutral[100]};
   box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[100]};
   background: ${({ theme }) => theme.colors.neutral["000"]};
 `;
@@ -69,7 +81,13 @@ const StyledTree = (0, import_ds_system.styled)("ul", { name, slot: SLOTS.TREE }
   margin: 0;
   padding: 0;
   overflow-y: auto;
-  ${({ isHeaderContent, theme }) => isHeaderContent ? `& [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }` : ""}
+  /**
+   * While the header is open the bar runs the full height of the list, like in LeftNavigation. The rows draw it on
+   * themselves, but the section labels and the separators are not rows: the list paints it behind them, so the bar has
+   * no gaps. The rows keep their own bar because their background covers the one of the list.
+   */
+  ${({ isHeaderContent, theme }) => isHeaderContent ? `box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]};
+  & [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }` : ""}
 `;
 const StyledGroup = (0, import_ds_system.styled)("ul", { name, slot: SLOTS.GROUP })`
   list-style: none;
@@ -87,6 +105,9 @@ const StyledSectionLabel = (0, import_ds_system.styled)("span", { name, slot: SL
   font-size: 1rem;
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
   color: ${({ theme }) => theme.colors.neutral[700]};
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: 0.8125rem;
+  }
 `;
 const StyledItemSeparator = (0, import_ds_system.styled)("div", { name, slot: SLOTS.ITEM_SEPARATOR })`
   height: 1px;
@@ -104,8 +125,12 @@ const StyledItem = (0, import_ds_system.styled)("li", { name, slot: SLOTS.ITEM }
 `;
 const StyledItemRow = (0, import_ds_system.styled)("div", { name, slot: SLOTS.ITEM_ROW })`
   /** Labels wrap: side content aligns to the first line (spec "date is pinned on the right side of the first line"). */
-  --row-first-line: ${({ isTall }) => isTall ? "24px" : "16px"};
+  --row-first-line: ${({ isTall }) => isTall ? "1.8462rem" : "1.2308rem"};
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    --row-first-line: ${({ isTall }) => isTall ? "1.5rem" : "1rem"};
+  }
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-start;
   column-gap: 8px;
   min-height: ${({ isTall }) => isTall ? "48px" : "32px"};
@@ -114,6 +139,7 @@ const StyledItemRow = (0, import_ds_system.styled)("div", { name, slot: SLOTS.IT
   padding-left: ${({ rowPadding }) => `${rowPadding}px`};
   ${({ isSticky }) => isSticky ? "position: sticky; top: 0; z-index: 1;" : ""}
   padding-right: 8px;
+  ${({ isRailRow }) => isRailRow ? "padding-inline: 0; justify-content: center;" : ""}
   cursor: pointer;
   background: ${({ isCurrent, theme }) => isCurrent ? theme.colors.brand[200] : theme.colors.neutral["000"]};
   box-shadow: inset 4px 0 0 0
@@ -127,13 +153,19 @@ const StyledItemRow = (0, import_ds_system.styled)("div", { name, slot: SLOTS.IT
 `;
 const StyledItemLabel = (0, import_ds_system.styled)("span", { name, slot: SLOTS.ITEM_LABEL })`
   font-size: ${({ isTall }) => isTall ? "1.0769rem" : "1rem"};
-  line-height: ${({ isTall }) => isTall ? "17px" : "16px"};
-  padding-block: ${({ isTall }) => isTall ? "3.5px" : "0"};
+  line-height: ${({ isTall }) => isTall ? "1.3077rem" : "1.2308rem"};
+  padding-block: ${({ isTall }) => isTall ? "0.2692rem" : "0"};
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: ${({ isTall }) => isTall ? "0.875rem" : "0.8125rem"};
+    line-height: ${({ isTall }) => isTall ? "1.0625rem" : "1rem"};
+    padding-block: ${({ isTall }) => isTall ? "0.21875rem" : "0"};
+  }
   color: ${({ theme }) => theme.colors.neutral[800]};
   word-break: ${({ labelOverflow }) => labelOverflow === "wrapAll" ? "break-all" : "normal"};
-  overflow-wrap: anywhere;
-  flex: 1;
-  min-width: 0;
+  overflow-wrap: break-word;
+  flex: 1 1 0;
+  min-width: min(min-content, 100%);
+  max-width: 100%;
 `;
 const StyledLeftContainer = (0, import_ds_system.styled)("span", { name, slot: SLOTS.LEFT_CONTAINER })`
   display: inline-flex;
@@ -149,6 +181,7 @@ const StyledCollapsedContainer = (0, import_ds_system.styled)("span", { name, sl
 const StyledRightContainer = (0, import_ds_system.styled)("span", { name, slot: SLOTS.RIGHT_CONTAINER })`
   display: inline-flex;
   align-items: center;
+  margin-left: auto;
   min-height: var(--row-first-line, auto);
 `;
 const StyledArrowContainer = (0, import_ds_system.styled)("span", { name, slot: SLOTS.ARROW_CONTAINER })`
@@ -157,22 +190,32 @@ const StyledArrowContainer = (0, import_ds_system.styled)("span", { name, slot:
   justify-content: center;
   flex: none;
   min-height: var(--row-first-line, auto);
-  ${({ isLeading }) => isLeading ? "width: 16px; margin-inline-end: -8px;" : ""}
+  ${({ isLeading }) => isLeading ? "width: 1.2308rem; margin-inline-end: -8px;" : ""}
+  ${({ isLeading, theme }) => isLeading ? `@media (max-width: ${theme.breakpoints.small}) { width: 1rem; }` : ""}
 `;
 const StyledHeaderDisclosure = (0, import_ds_system.styled)("button", { name, slot: SLOTS.HEADER_DISCLOSURE })`
-  --row-first-line: 24px;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  --row-first-line: 1.8462rem;
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    --row-first-line: 1.5rem;
+  }
   display: flex;
   align-items: center;
   column-gap: 8px;
   width: 100%;
   min-height: 48px;
   padding: 0 8px 0 12px;
+  ${({ isRail }) => isRail ? "padding: 0; justify-content: center;" : ""}
   border: none;
   border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[100]};
   background: ${({ theme }) => theme.colors.neutral["000"]};
   box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => isOpen ? theme.colors.brand[500] : "transparent"};
   text-align: left;
   font-size: 1.0769rem;
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: 0.875rem;
+  }
   color: ${({ theme }) => theme.colors.neutral[800]};
   cursor: pointer;
   &:hover {
@@ -185,31 +228,46 @@ const StyledHeaderDisclosure = (0, import_ds_system.styled)("button", { name, sl
   }
 `;
 const StyledFooterMenu = (0, import_ds_system.styled)("div", { name, slot: SLOTS.FOOTER_MENU })`
+  flex-shrink: 0;
   display: grid;
-  grid-template-columns: ${({ expanded }) => expanded ? "1fr auto auto" : "1fr"};
+  grid-template-columns: ${({ expanded }) => expanded ? "1fr auto auto" : "minmax(0, 1fr)"};
   align-items: center;
   column-gap: 8px;
   margin-top: auto;
   min-height: 48px;
   padding: 0 4px 0 12px;
+  ${({ expanded }) => expanded ? `& > [data-dimsum-slot='dsLeftnavigationtreeFooterMenuCollapse'] { grid-column: 3; }` : "padding: 0; justify-items: center;"}
   border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};
 `;
 const StyledFooterLabel = (0, import_ds_system.styled)("span", { name, slot: SLOTS.FOOTER_LABEL })`
-  font-size: 11px;
-  line-height: 14px;
+  min-width: 0;
+  overflow-wrap: break-word;
+  font-size: 0.8462rem;
+  line-height: 1.0769rem;
   color: ${({ theme }) => theme.colors.neutral[500]};
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: 0.6875rem;
+    line-height: 0.875rem;
+  }
 `;
 const StyledFooterSeparator = (0, import_ds_system.styled)("span", { name, slot: SLOTS.FOOTER_SEPARATOR })`
   width: 1px;
-  height: 16px;
+  height: 1.2308rem;
   background: ${({ theme }) => theme.colors.neutral[100]};
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    height: 1rem;
+  }
 `;
 const StyledFooterButton = (0, import_ds_system.styled)("button", { name, slot: SLOTS.FOOTER_MENU_COLLAPSE })`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 2.4615rem;
+  height: 2.4615rem;
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    width: 2rem;
+    height: 2rem;
+  }
   padding: 0;
   border: none;
   background: transparent;

package/dist/cjs/parts/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/styled.ts", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationTreeName, LEFT_NAVIGATION_TREE_SLOTS } from '../constants/index.js';\nimport type { DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\n\nconst SLOTS = LEFT_NAVIGATION_TREE_SLOTS;\nconst name = DSLeftNavigationTreeName;\n\nexport const StyledRoot = styled('nav', { name, slot: SLOTS.ROOT })<{ expanded: boolean; expandedWidth: string }>`\n  display: flex;\n  flex-direction: column;\n  width: ${({ expanded, expandedWidth }) => (expanded ? expandedWidth : '48px')};\n  transition: width ${({ expanded }) => (expanded ? 'ease-out' : 'ease-in')} 350ms;\n  height: 100%;\n  overflow: hidden;\n  border: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n  box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[100]};\n  background: ${({ theme }) => theme.colors.neutral['000']};\n`;\n\nexport const StyledTree = styled('ul', { name, slot: SLOTS.TREE })<{ isHeaderContent: boolean }>`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  ${({ isHeaderContent, theme }) =>\n    isHeaderContent\n      ? `& [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }`\n      : ''}\n`;\n\nexport const StyledGroup = styled('ul', { name, slot: SLOTS.GROUP })`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nexport const StyledSectionContainer = styled('ul', { name, slot: SLOTS.SECTION_CONTAINER })`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nexport const StyledSectionLabel = styled('span', { name, slot: SLOTS.SECTION_LABEL })`\n  display: block;\n  padding: 8px 12px 4px;\n  font-size: 1rem;\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  color: ${({ theme }) => theme.colors.neutral[700]};\n`;\n\nexport const StyledItemSeparator = styled('div', { name, slot: SLOTS.ITEM_SEPARATOR })`\n  height: 1px;\n  margin: 4px 12px;\n  background: ${({ theme }) => theme.colors.neutral[100]};\n`;\n\n/**\n * The focus ring is drawn on the row of the focused treeitem only: the `li` holds the whole\n * expanded subtree, so an outline on it would surround every descendant row.\n */\nexport const StyledItem = styled('li', { name, slot: SLOTS.ITEM })<{ isOpenSection: boolean }>`\n  list-style: none;\n  outline: none;\n  ${({ isOpenSection, theme }) =>\n    isOpenSection ? `& [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }` : ''}\n  &:focus-visible > [data-row] {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    outline-offset: -2px;\n  }\n`;\n\nexport const StyledItemRow = styled('div', { name, slot: SLOTS.ITEM_ROW })<{\n  rowPadding: number;\n  isTall: boolean;\n  isSticky: boolean;\n  isCurrent: boolean;\n  isSelectedParent: boolean;\n}>`\n  /** Labels wrap: side content aligns to the first line (spec \"date is pinned on the right side of the first line\"). */\n  --row-first-line: ${({ isTall }) => (isTall ? '24px' : '16px')};\n  display: flex;\n  align-items: flex-start;\n  column-gap: 8px;\n  min-height: ${({ isTall }) => (isTall ? '48px' : '32px')};\n  padding-block: ${({ isTall }) => (isTall ? '12px' : '8px')};\n  box-sizing: border-box;\n  padding-left: ${({ rowPadding }) => `${rowPadding}px`};\n  ${({ isSticky }) => (isSticky ? 'position: sticky; top: 0; z-index: 1;' : '')}\n  padding-right: 8px;\n  cursor: pointer;\n  background: ${({ isCurrent, theme }) => (isCurrent ? theme.colors.brand[200] : theme.colors.neutral['000'])};\n  box-shadow: inset 4px 0 0 0\n    ${({ isCurrent, isSelectedParent, theme }) =>\n      isCurrent || isSelectedParent ? theme.colors.brand[500] : 'transparent'};\n  ${({ isCurrent, theme }) => (isCurrent ? `outline: 1px solid ${theme.colors.brand[500]}; outline-offset: -1px;` : '')}\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: inset 4px 0 0 0\n      ${({ isCurrent, isSelectedParent, theme }) =>\n        isCurrent || isSelectedParent ? theme.colors.brand[500] : theme.colors.brand[300]};\n  }\n`;\n\nexport const StyledItemLabel = styled('span', { name, slot: SLOTS.ITEM_LABEL })<{\n  isTall: boolean;\n  labelOverflow: DSLeftNavigationTreeT.LabelOverflowT;\n}>`\n  font-size: ${({ isTall }) => (isTall ? '1.0769rem' : '1rem')};\n  line-height: ${({ isTall }) => (isTall ? '17px' : '16px')};\n  padding-block: ${({ isTall }) => (isTall ? '3.5px' : '0')};\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  word-break: ${({ labelOverflow }) => (labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n  overflow-wrap: anywhere;\n  flex: 1;\n  min-width: 0;\n`;\n\nexport const StyledLeftContainer = styled('span', { name, slot: SLOTS.LEFT_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--row-first-line, auto);\n`;\n\nexport const StyledCollapsedContainer = styled('span', { name, slot: SLOTS.COLLAPSED_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--row-first-line, auto);\n`;\n\nexport const StyledRightContainer = styled('span', { name, slot: SLOTS.RIGHT_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--row-first-line, auto);\n`;\n\nexport const StyledArrowContainer = styled('span', { name, slot: SLOTS.ARROW_CONTAINER })<{ isLeading: boolean }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  min-height: var(--row-first-line, auto);\n  ${({ isLeading }) => (isLeading ? 'width: 16px; margin-inline-end: -8px;' : '')}\n`;\n\nexport const StyledHeaderDisclosure = styled('button', { name, slot: SLOTS.HEADER_DISCLOSURE })<{\n  isRail: boolean;\n  isOpen: boolean;\n}>`\n  --row-first-line: 24px;\n  display: flex;\n  align-items: center;\n  column-gap: 8px;\n  width: 100%;\n  min-height: 48px;\n  padding: 0 8px 0 12px;\n  border: none;\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => (isOpen ? theme.colors.brand[500] : 'transparent')};\n  text-align: left;\n  font-size: 1.0769rem;\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  cursor: pointer;\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => (isOpen ? theme.colors.brand[500] : theme.colors.brand[300])};\n  }\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    outline-offset: -2px;\n  }\n`;\nexport const StyledFooterMenu = styled('div', { name, slot: SLOTS.FOOTER_MENU })<{ expanded: boolean }>`\n  display: grid;\n  grid-template-columns: ${({ expanded }) => (expanded ? '1fr auto auto' : '1fr')};\n  align-items: center;\n  column-gap: 8px;\n  margin-top: auto;\n  min-height: 48px;\n  padding: 0 4px 0 12px;\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n`;\n\nexport const StyledFooterLabel = styled('span', { name, slot: SLOTS.FOOTER_LABEL })`\n  font-size: 11px;\n  line-height: 14px;\n  color: ${({ theme }) => theme.colors.neutral[500]};\n`;\n\nexport const StyledFooterSeparator = styled('span', { name, slot: SLOTS.FOOTER_SEPARATOR })`\n  width: 1px;\n  height: 16px;\n  background: ${({ theme }) => theme.colors.neutral[100]};\n`;\n\nexport const StyledFooterButton = styled('button', { name, slot: SLOTS.FOOTER_MENU_COLLAPSE })`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationTreeName, LEFT_NAVIGATION_TREE_SLOTS } from '../constants/index.js';\nimport type { DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\n\nconst SLOTS = LEFT_NAVIGATION_TREE_SLOTS;\nconst name = DSLeftNavigationTreeName;\n\n/** A plain length that means the same in every element: the children can reuse it as it is. */\nconst ABSOLUTE_LENGTH = /^\\s*(\\d+|\\d*\\.\\d+)(px|rem|vw|vh|vmin|vmax)\\s*$/;\n\n/** Border of the root, in px. The root clips its content, so the children take the width that is inside the border. */\nconst ROOT_BORDER = 1;\nconst ROOT_BORDER_TOTAL = `${ROOT_BORDER * 2}px`;\n\nconst getContentWidth = (expanded: boolean, expandedWidth: string) => {\n  if (!expanded) return `calc(48px - ${ROOT_BORDER_TOTAL})`;\n  return ABSOLUTE_LENGTH.test(expandedWidth) ? `calc(${expandedWidth} - ${ROOT_BORDER_TOTAL})` : '100%';\n};\n\n/**\n * While the panel expands or collapses only its own width animates, and it clips what it holds. The header, the tree\n * and the footer have the final width (the rail is 48px) from the first frame: the labels are not squeezed (one\n * character per line) when it grows, and the icons of the rail are already where they stay when it shrinks. The\n * selector is doubled to win over the `width: 100%` that the header declares for itself.\n *\n * Only a plain length that means the same in every element (`px`, `rem`, viewport units) is reused by the children.\n * Any other width is relative to something that is not the same for them: a percentage (`50%`, `calc(100% - 80px)`)\n * to the host of the panel, `em` to the font size of each element, `var()` to whatever it resolves to there. The\n * children would not get the width of the panel, so they follow it (`100%`) and, for those widths only, the content\n * is squeezed while the panel animates. The width of the root includes its border (`border-box`, whatever the page\n * says), so the children are narrower than it by the border: if they had the width of the root, the right edge of the\n * focus ring of a row, which is drawn inside the row, would be cut by the root.\n */\nexport const StyledRoot = styled('nav', { name, slot: SLOTS.ROOT })<{ expanded: boolean; expandedWidth: string }>`\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: ${({ expanded, expandedWidth }) => (expanded ? expandedWidth : '48px')};\n  && > * {\n    box-sizing: border-box;\n    width: ${({ expanded, expandedWidth }) => getContentWidth(expanded, expandedWidth)};\n  }\n  transition: width ${({ expanded }) => (expanded ? 'ease-out' : 'ease-in')} 350ms;\n  height: 100%;\n  overflow: hidden;\n  border: ${ROOT_BORDER}px solid ${({ theme }) => theme.colors.neutral[100]};\n  box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[100]};\n  background: ${({ theme }) => theme.colors.neutral['000']};\n`;\n\nexport const StyledTree = styled('ul', { name, slot: SLOTS.TREE })<{ isHeaderContent: boolean }>`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  /**\n   * While the header is open the bar runs the full height of the list, like in LeftNavigation. The rows draw it on\n   * themselves, but the section labels and the separators are not rows: the list paints it behind them, so the bar has\n   * no gaps. The rows keep their own bar because their background covers the one of the list.\n   */\n  ${({ isHeaderContent, theme }) =>\n    isHeaderContent\n      ? `box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]};\n  & [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }`\n      : ''}\n`;\n\nexport const StyledGroup = styled('ul', { name, slot: SLOTS.GROUP })`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nexport const StyledSectionContainer = styled('ul', { name, slot: SLOTS.SECTION_CONTAINER })`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nexport const StyledSectionLabel = styled('span', { name, slot: SLOTS.SECTION_LABEL })`\n  display: block;\n  padding: 8px 12px 4px;\n  font-size: 1rem;\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.8125rem;\n  }\n`;\n\nexport const StyledItemSeparator = styled('div', { name, slot: SLOTS.ITEM_SEPARATOR })`\n  height: 1px;\n  margin: 4px 12px;\n  background: ${({ theme }) => theme.colors.neutral[100]};\n`;\n\n/**\n * The focus ring is drawn on the row of the focused treeitem only: the `li` holds the whole\n * expanded subtree, so an outline on it would surround every descendant row.\n */\nexport const StyledItem = styled('li', { name, slot: SLOTS.ITEM })<{ isOpenSection: boolean }>`\n  list-style: none;\n  outline: none;\n  ${({ isOpenSection, theme }) =>\n    isOpenSection ? `& [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }` : ''}\n  &:focus-visible > [data-row] {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    outline-offset: -2px;\n  }\n`;\n\nexport const StyledItemRow = styled('div', { name, slot: SLOTS.ITEM_ROW })<{\n  rowPadding: number;\n  isTall: boolean;\n  isSticky: boolean;\n  isCurrent: boolean;\n  isSelectedParent: boolean;\n  isRailRow?: boolean;\n}>`\n  /** Labels wrap: side content aligns to the first line (spec \"date is pinned on the right side of the first line\"). */\n  --row-first-line: ${({ isTall }) => (isTall ? '1.8462rem' : '1.2308rem')};\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    --row-first-line: ${({ isTall }) => (isTall ? '1.5rem' : '1rem')};\n  }\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  column-gap: 8px;\n  min-height: ${({ isTall }) => (isTall ? '48px' : '32px')};\n  padding-block: ${({ isTall }) => (isTall ? '12px' : '8px')};\n  box-sizing: border-box;\n  padding-left: ${({ rowPadding }) => `${rowPadding}px`};\n  ${({ isSticky }) => (isSticky ? 'position: sticky; top: 0; z-index: 1;' : '')}\n  padding-right: 8px;\n  ${({ isRailRow }) => (isRailRow ? 'padding-inline: 0; justify-content: center;' : '')}\n  cursor: pointer;\n  background: ${({ isCurrent, theme }) => (isCurrent ? theme.colors.brand[200] : theme.colors.neutral['000'])};\n  box-shadow: inset 4px 0 0 0\n    ${({ isCurrent, isSelectedParent, theme }) =>\n      isCurrent || isSelectedParent ? theme.colors.brand[500] : 'transparent'};\n  ${({ isCurrent, theme }) => (isCurrent ? `outline: 1px solid ${theme.colors.brand[500]}; outline-offset: -1px;` : '')}\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: inset 4px 0 0 0\n      ${({ isCurrent, isSelectedParent, theme }) =>\n        isCurrent || isSelectedParent ? theme.colors.brand[500] : theme.colors.brand[300]};\n  }\n`;\n\n/**\n * The rows wrap by content: the label never goes narrower than its longest word, so what does not fit beside it (the\n * icons, the right content) goes down to the next row instead of breaking the word. A word longer than the whole row\n * (a URL, an identifier) is the exception: the minimum is capped to the row, `min(min-content, 100%)`, and\n * `overflow-wrap` breaks that word. `labelOverflow=\"wrapAll\"` keeps breaking anywhere.\n */\nexport const StyledItemLabel = styled('span', { name, slot: SLOTS.ITEM_LABEL })<{\n  isTall: boolean;\n  labelOverflow: DSLeftNavigationTreeT.LabelOverflowT;\n}>`\n  font-size: ${({ isTall }) => (isTall ? '1.0769rem' : '1rem')};\n  line-height: ${({ isTall }) => (isTall ? '1.3077rem' : '1.2308rem')};\n  padding-block: ${({ isTall }) => (isTall ? '0.2692rem' : '0')};\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: ${({ isTall }) => (isTall ? '0.875rem' : '0.8125rem')};\n    line-height: ${({ isTall }) => (isTall ? '1.0625rem' : '1rem')};\n    padding-block: ${({ isTall }) => (isTall ? '0.21875rem' : '0')};\n  }\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  word-break: ${({ labelOverflow }) => (labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n  overflow-wrap: break-word;\n  flex: 1 1 0;\n  min-width: min(min-content, 100%);\n  max-width: 100%;\n`;\n\nexport const StyledLeftContainer = styled('span', { name, slot: SLOTS.LEFT_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--row-first-line, auto);\n`;\n\nexport const StyledCollapsedContainer = styled('span', { name, slot: SLOTS.COLLAPSED_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--row-first-line, auto);\n`;\n\nexport const StyledRightContainer = styled('span', { name, slot: SLOTS.RIGHT_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  margin-left: auto;\n  min-height: var(--row-first-line, auto);\n`;\n\n/**\n * The leading arrow is 16px at the 13px root (1.2308rem), so it grows with the icon. Its negative margin cancels the\n * row column-gap, which is a fixed 8px, so the label always starts at the arrow's right edge: do not scale the margin.\n */\nexport const StyledArrowContainer = styled('span', { name, slot: SLOTS.ARROW_CONTAINER })<{ isLeading: boolean }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  min-height: var(--row-first-line, auto);\n  ${({ isLeading }) => (isLeading ? 'width: 1.2308rem; margin-inline-end: -8px;' : '')}\n  ${({ isLeading, theme }) => (isLeading ? `@media (max-width: ${theme.breakpoints.small}) { width: 1rem; }` : '')}\n`;\n\nexport const StyledHeaderDisclosure = styled('button', { name, slot: SLOTS.HEADER_DISCLOSURE })<{\n  isRail: boolean;\n  isOpen: boolean;\n}>`\n  flex-shrink: 0;\n  flex-wrap: wrap;\n  --row-first-line: 1.8462rem;\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    --row-first-line: 1.5rem;\n  }\n  display: flex;\n  align-items: center;\n  column-gap: 8px;\n  width: 100%;\n  min-height: 48px;\n  padding: 0 8px 0 12px;\n  ${({ isRail }) => (isRail ? 'padding: 0; justify-content: center;' : '')}\n  border: none;\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => (isOpen ? theme.colors.brand[500] : 'transparent')};\n  text-align: left;\n  font-size: 1.0769rem;\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.875rem;\n  }\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  cursor: pointer;\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => (isOpen ? theme.colors.brand[500] : theme.colors.brand[300])};\n  }\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    outline-offset: -2px;\n  }\n`;\n/**\n * The footer text is optional and flexible: without it the collapse button is the only child and the grid would put it\n * in the first column, on the left. The button is always in the last column, at the right end of the expanded footer.\n */\nexport const StyledFooterMenu = styled('div', { name, slot: SLOTS.FOOTER_MENU })<{ expanded: boolean }>`\n  flex-shrink: 0;\n  display: grid;\n  grid-template-columns: ${({ expanded }) => (expanded ? '1fr auto auto' : 'minmax(0, 1fr)')};\n  align-items: center;\n  column-gap: 8px;\n  margin-top: auto;\n  min-height: 48px;\n  padding: 0 4px 0 12px;\n  ${({ expanded }) =>\n    expanded\n      ? `& > [data-dimsum-slot='dsLeftnavigationtreeFooterMenuCollapse'] { grid-column: 3; }`\n      : 'padding: 0; justify-items: center;'}\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n`;\n\n/**\n * The label can shrink below its longest word: a footer text without spaces (an account name, an identifier) is\n * broken inside the label, so the collapse button never leaves the panel. Ordinary text still wraps at the spaces.\n */\nexport const StyledFooterLabel = styled('span', { name, slot: SLOTS.FOOTER_LABEL })`\n  min-width: 0;\n  overflow-wrap: break-word;\n  font-size: 0.8462rem;\n  line-height: 1.0769rem;\n  color: ${({ theme }) => theme.colors.neutral[500]};\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.6875rem;\n    line-height: 0.875rem;\n  }\n`;\n\nexport const StyledFooterSeparator = styled('span', { name, slot: SLOTS.FOOTER_SEPARATOR })`\n  width: 1px;\n  height: 1.2308rem;\n  background: ${({ theme }) => theme.colors.neutral[100]};\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    height: 1rem;\n  }\n`;\n\n/** The box follows the icon it holds, so it grows with it when the text is enlarged. */\nexport const StyledFooterButton = styled('button', { name, slot: SLOTS.FOOTER_MENU_COLLAPSE })`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.4615rem;\n  height: 2.4615rem;\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    width: 2rem;\n    height: 2rem;\n  }\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  }\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAAuB;AACvB,uBAAqE;AAGrE,MAAM,QAAQ;AACd,MAAM,OAAO;AAGb,MAAM,kBAAkB;AAGxB,MAAM,cAAc;AACpB,MAAM,oBAAoB,GAAG,cAAc,CAAC;AAE5C,MAAM,kBAAkB,CAAC,UAAmB,kBAA0B;AACpE,MAAI,CAAC,SAAU,QAAO,eAAe,iBAAiB;AACtD,SAAO,gBAAgB,KAAK,aAAa,IAAI,QAAQ,aAAa,MAAM,iBAAiB,MAAM;AACjG;AAgBO,MAAM,iBAAa,yBAAO,OAAO,EAAE,MAAM,MAAM,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA,WAIvD,CAAC,EAAE,UAAU,cAAc,MAAO,WAAW,gBAAgB,MAAO;AAAA;AAAA;AAAA,aAGlE,CAAC,EAAE,UAAU,cAAc,MAAM,gBAAgB,UAAU,aAAa,CAAC;AAAA;AAAA,sBAEhE,CAAC,EAAE,SAAS,MAAO,WAAW,aAAa,SAAU;AAAA;AAAA;AAAA,YAG/D,WAAW,YAAY,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,2BAChD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,gBACnD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAGnD,MAAM,iBAAa,yBAAO,MAAM,EAAE,MAAM,MAAM,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAU7D,CAAC,EAAE,iBAAiB,MAAM,MAC1B,kBACI,+BAA+B,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,mEACK,MAAM,OAAO,MAAM,GAAG,CAAC,QAClF,EAAE;AAAA;AAGH,MAAM,kBAAc,yBAAO,MAAM,EAAE,MAAM,MAAM,MAAM,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAM5D,MAAM,6BAAyB,yBAAO,MAAM,EAAE,MAAM,MAAM,MAAM,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAMnF,MAAM,yBAAqB,yBAAO,QAAQ,EAAE,MAAM,MAAM,MAAM,cAAc,CAAC;AAAA;AAAA;AAAA;AAAA,iBAInE,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,QAAQ;AAAA,WAC/C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,uBAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAKtD,MAAM,0BAAsB,yBAAO,OAAO,EAAE,MAAM,MAAM,MAAM,eAAe,CAAC;AAAA;AAAA;AAAA,gBAGrE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAOjD,MAAM,iBAAa,yBAAO,MAAM,EAAE,MAAM,MAAM,MAAM,KAAK,CAAC;AAAA;AAAA;AAAA,IAG7D,CAAC,EAAE,eAAe,MAAM,MACxB,gBAAgB,kEAAkE,MAAM,OAAO,MAAM,GAAG,CAAC,QAAQ,EAAE;AAAA;AAAA,yBAE9F,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAKxD,MAAM,oBAAgB,yBAAO,OAAO,EAAE,MAAM,MAAM,MAAM,SAAS,CAAC;AAAA;AAAA,sBASnD,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc,WAAY;AAAA,uBACnD,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,wBACrC,CAAC,EAAE,OAAO,MAAO,SAAS,WAAW,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMpD,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS,MAAO;AAAA,mBACvC,CAAC,EAAE,OAAO,MAAO,SAAS,SAAS,KAAM;AAAA;AAAA,kBAE1C,CAAC,EAAE,WAAW,MAAM,GAAG,UAAU,IAAI;AAAA,IACnD,CAAC,EAAE,SAAS,MAAO,WAAW,0CAA0C,EAAG;AAAA;AAAA,IAE3E,CAAC,EAAE,UAAU,MAAO,YAAY,gDAAgD,EAAG;AAAA;AAAA,gBAEvE,CAAC,EAAE,WAAW,MAAM,MAAO,YAAY,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,QAAQ,KAAK,CAAE;AAAA;AAAA,MAEvG,CAAC,EAAE,WAAW,kBAAkB,MAAM,MACtC,aAAa,mBAAmB,MAAM,OAAO,MAAM,GAAG,IAAI,aAAa;AAAA,IACzE,CAAC,EAAE,WAAW,MAAM,MAAO,YAAY,sBAAsB,MAAM,OAAO,MAAM,GAAG,CAAC,4BAA4B,EAAG;AAAA;AAAA,kBAErG,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA,QAEhD,CAAC,EAAE,WAAW,kBAAkB,MAAM,MACtC,aAAa,mBAAmB,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAUlF,MAAM,sBAAkB,yBAAO,QAAQ,EAAE,MAAM,MAAM,MAAM,WAAW,CAAC;AAAA,eAI/D,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc,MAAO;AAAA,iBAC7C,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc,WAAY;AAAA,mBAClD,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc,GAAI;AAAA,uBACxC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,iBAC5C,CAAC,EAAE,OAAO,MAAO,SAAS,aAAa,WAAY;AAAA,mBACjD,CAAC,EAAE,OAAO,MAAO,SAAS,cAAc,MAAO;AAAA,qBAC7C,CAAC,EAAE,OAAO,MAAO,SAAS,eAAe,GAAI;AAAA;AAAA,WAEvD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,gBACnC,CAAC,EAAE,cAAc,MAAO,kBAAkB,YAAY,cAAc,QAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtF,MAAM,0BAAsB,yBAAO,QAAQ,EAAE,MAAM,MAAM,MAAM,eAAe,CAAC;AAAA;AAAA;AAAA;AAAA;AAM/E,MAAM,+BAA2B,yBAAO,QAAQ,EAAE,MAAM,MAAM,MAAM,oBAAoB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzF,MAAM,2BAAuB,yBAAO,QAAQ,EAAE,MAAM,MAAM,MAAM,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAWjF,MAAM,2BAAuB,yBAAO,QAAQ,EAAE,MAAM,MAAM,MAAM,gBAAgB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMpF,CAAC,EAAE,UAAU,MAAO,YAAY,+CAA+C,EAAG;AAAA,IAClF,CAAC,EAAE,WAAW,MAAM,MAAO,YAAY,sBAAsB,MAAM,YAAY,KAAK,uBAAuB,EAAG;AAAA;AAG3G,MAAM,6BAAyB,yBAAO,UAAU,EAAE,MAAM,MAAM,MAAM,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA,uBAOvE,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASzD,CAAC,EAAE,OAAO,MAAO,SAAS,yCAAyC,EAAG;AAAA;AAAA,6BAE7C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,gBACrD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA,gCAC1B,CAAC,EAAE,QAAQ,MAAM,MAAO,SAAS,MAAM,OAAO,MAAM,GAAG,IAAI,aAAc;AAAA;AAAA;AAAA,uBAGlF,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA,WAGlD,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA,kBAGjC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA,kCACtB,CAAC,EAAE,QAAQ,MAAM,MAAO,SAAS,MAAM,OAAO,MAAM,GAAG,IAAI,MAAM,OAAO,MAAM,GAAG,CAAE;AAAA;AAAA;AAAA,yBAG5F,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAQxD,MAAM,uBAAmB,yBAAO,OAAO,EAAE,MAAM,MAAM,MAAM,YAAY,CAAC;AAAA;AAAA;AAAA,2BAGpD,CAAC,EAAE,SAAS,MAAO,WAAW,kBAAkB,gBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMxF,CAAC,EAAE,SAAS,MACZ,WACI,wFACA,oCAAoC;AAAA,0BAClB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAO3D,MAAM,wBAAoB,yBAAO,QAAQ,EAAE,MAAM,MAAM,MAAM,aAAa,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,WAKvE,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,uBAC5B,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAMtD,MAAM,4BAAwB,yBAAO,QAAQ,EAAE,MAAM,MAAM,MAAM,iBAAiB,CAAC;AAAA;AAAA;AAAA,gBAG1E,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA,uBACjC,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAMtD,MAAM,yBAAqB,yBAAO,UAAU,EAAE,MAAM,MAAM,MAAM,qBAAqB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAMtE,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yBASpC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;",
   "names": []
 }

package/dist/cjs/react-desc-prop-types.js

@@ -64,7 +64,9 @@ const DSLeftNavigationTreePropTypes = {
     "The navigation tree with its full hierarchy: parents and sections hold their children in itemOpts.items. Children that are not in the data cannot be reached"
   ).defaultValue([]),
   expanded: import_ds_props_helpers.PropTypes.bool.description("Whether the panel is expanded or collapsed to the icon-only rail").defaultValue(false),
-  expandedWidth: import_ds_props_helpers.PropTypes.string.description("Width of the panel when expanded").defaultValue("240px"),
+  expandedWidth: import_ds_props_helpers.PropTypes.string.description(
+    "Width of the panel when expanded. A plain length in px, rem or viewport units is applied to the content from the first frame of the transition. Any other width (a percentage, em, var(), calc()) is relative to its context, so the content follows the panel while it animates and its labels are squeezed during the transition."
+  ).defaultValue("240px"),
   labelOverflow: import_ds_props_helpers.PropTypes.oneOf(["wrap", "wrapAll"]).description("How labels wrap").defaultValue("wrap"),
   footerLabel: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.node, import_ds_props_helpers.PropTypes.string]).description("Text shown in the footer next to the collapse button").defaultValue(""),
   selectedItem: import_ds_props_helpers.PropTypes.oneOfType([import_ds_props_helpers.PropTypes.string, import_ds_props_helpers.PropTypes.oneOf([null])]).description(

package/dist/cjs/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/react-desc-prop-types.ts", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  describe,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport {\n  DSLeftNavigationTreeName,\n  LEFT_NAVIGATION_TREE_ITEM_TYPES,\n  LEFT_NAVIGATION_TREE_SLOTS,\n} from './constants/index.js';\nimport type { LEFT_NAVIGATION_TREE_REGION_FOCUSES } from './constants/index.js';\nimport type { useAutoCalculated } from './config/useAutoCalculated.js';\n\nexport declare namespace DSLeftNavigationTreeT {\n  export type ItemType = (typeof LEFT_NAVIGATION_TREE_ITEM_TYPES)[keyof typeof LEFT_NAVIGATION_TREE_ITEM_TYPES];\n\n  export type LabelOverflowT = 'wrap' | 'wrapAll';\n\n  export type InteractionEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;\n\n  export interface ItemComponentProps {\n    item: Item;\n  }\n\n  export interface ItemOpts {\n    label?: string | JSX.Element;\n    items?: readonly Item[];\n    isOpened?: boolean;\n    startOpened?: boolean;\n    selectable?: boolean;\n    labelOverflow?: LabelOverflowT;\n    RightComponent?: React.ComponentType<ItemComponentProps>;\n  }\n\n  export interface Item {\n    dsId: string;\n    type: ItemType;\n    CollapsedComponent?: React.ComponentType<ItemComponentProps> | null;\n    itemOpts?: ItemOpts;\n  }\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    items: readonly Item[];\n    expanded: boolean;\n    expandedWidth: string;\n    labelOverflow: LabelOverflowT;\n    footerLabel: React.ReactNode;\n    disableDefaultSelection: boolean;\n    openedItem: string | null;\n    onItemClick: (item: Item, e: InteractionEvent) => void;\n    onItemOpenedChange: (item: Item, nextIsOpened: boolean, e: InteractionEvent) => void;\n    onSelectedChange: (id: string) => void;\n    onFocusChange: (id: string) => void;\n    onFooterExpand: (e: InteractionEvent) => void;\n    onFooterClose: (e: InteractionEvent) => void;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSLeftNavigationTreeName,\n    typeof LEFT_NAVIGATION_TREE_SLOTS\n  > {\n    selectedItem?: string | null;\n    selectedParent?: string;\n    HeaderComponent?: Item;\n  }\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface ItemSlotArguments {\n    item: Item;\n    level: number;\n    isOpen: boolean;\n    isCurrent: boolean;\n  }\n\n  export type SlotFunctionArguments = {\n    dsLeftnavigationtreeRoot: () => object;\n    dsLeftnavigationtreeTree: () => object;\n    dsLeftnavigationtreeItem: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeItemRow: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeItemLabel: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeLeftContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeCollapsedContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeRightContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeArrowContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeGroup: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeSectionContainer: () => object;\n    dsLeftnavigationtreeSectionLabel: () => object;\n    dsLeftnavigationtreeItemSeparator: () => object;\n    dsLeftnavigationtreeHeaderDisclosure: () => object;\n    dsLeftnavigationtreeFooterMenu: () => object;\n    dsLeftnavigationtreeFooterLabel: () => object;\n    dsLeftnavigationtreeFooterSeparator: () => object;\n    dsLeftnavigationtreeFooterMenuCollapse: () => object;\n  };\n\n  export type FocusRegion =\n    (typeof LEFT_NAVIGATION_TREE_REGION_FOCUSES)[keyof typeof LEFT_NAVIGATION_TREE_REGION_FOCUSES];\n\n  export type InternalAtoms = {\n    focusRegion: FocusRegion;\n    focusedItemId: string | null;\n    toggles: Record<string, boolean>;\n    internalSelectedItem: string | null;\n  };\n\n  export type UseAutoCalculatedT = ReturnType<typeof useAutoCalculated>;\n\n  export type Selectors = Record<string, never>;\n  export type Reducers = Record<string, never>;\n  export type InternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n}\n\nconst noop = () => null;\n\nexport const defaultProps: DSLeftNavigationTreeT.DefaultProps = {\n  items: [],\n  expanded: false,\n  expandedWidth: '240px',\n  labelOverflow: 'wrap',\n  footerLabel: '',\n  disableDefaultSelection: false,\n  openedItem: null,\n  onItemClick: noop,\n  onItemOpenedChange: noop,\n  onSelectedChange: noop,\n  onFocusChange: noop,\n  onFooterExpand: noop,\n  onFooterClose: noop,\n};\n\nexport const DSLeftNavigationTreePropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.Props> = {\n  ...getPropsPerSlotPropTypes(DSLeftNavigationTreeName, LEFT_NAVIGATION_TREE_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  items: PropTypes.arrayOf(PropTypes.object)\n    .description(\n      'The navigation tree with its full hierarchy: parents and sections hold their children in itemOpts.items. Children that are not in the data cannot be reached',\n    )\n    .defaultValue([]),\n  expanded: PropTypes.bool\n    .description('Whether the panel is expanded or collapsed to the icon-only rail')\n    .defaultValue(false),\n  expandedWidth: PropTypes.string.description('Width of the panel when expanded').defaultValue('240px'),\n  labelOverflow: PropTypes.oneOf(['wrap', 'wrapAll']).description('How labels wrap').defaultValue('wrap'),\n  footerLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string])\n    .description('Text shown in the footer next to the collapse button')\n    .defaultValue(''),\n  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([null])]).description(\n    'Id of the current page, exposed as aria-current=\"page\" (aria-selected is never set). null means no current page; undefined lets the component track it',\n  ),\n  selectedParent: PropTypes.string.description(\n    'Id of the item that shows the selected-parent indicator. When undefined, every ancestor of the current page shows it',\n  ),\n  disableDefaultSelection: PropTypes.bool\n    .description('Whether opening a parent should only expand it, without making its first page the current page')\n    .defaultValue(false),\n  HeaderComponent: PropTypes.object.description(\n    'Item rendered as the header disclosure button above the tree. While it is open, pass its content as items (selecting its first item is up to you), and clear openedItem when the panel collapses so the rail shows your root items. Only dsId, label, CollapsedComponent, RightComponent and labelOverflow are used',\n  ),\n  openedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([null])])\n    .description('Id of the header item when the header is open. Other ids are ignored')\n    .defaultValue(null),\n  onItemClick: PropTypes.func\n    .description(\n      'Called when an item or the header is activated with click, Enter or Space. In the collapsed rail, expand the panel from here when the item is a parent. After a page activation, move focus to your content if needed; after a parent activation, leave focus on the parent',\n    )\n    .signature('((item: DSLeftNavigationTreeT.Item, e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n  onItemOpenedChange: PropTypes.func\n    .description('Called when a parent requests to open or close')\n    .signature(\n      '((item: DSLeftNavigationTreeT.Item, nextIsOpened: boolean, e: React.MouseEvent | React.KeyboardEvent) => void)',\n    )\n    .defaultValue(() => null),\n  onSelectedChange: PropTypes.func\n    .description('Called with the id of the item that becomes the current page')\n    .signature('((id: string) => void)')\n    .defaultValue(() => null),\n  onFocusChange: PropTypes.func\n    .description('Called with the id of the item that receives focus')\n    .signature('((id: string) => void)')\n    .defaultValue(() => null),\n  onFooterExpand: PropTypes.func\n    .description('Called when the footer button expands the panel')\n    .signature('((e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n  onFooterClose: PropTypes.func\n    .description('Called when the footer button collapses the panel. Clear openedItem here if the header is open')\n    .signature('((e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n};\n\nexport const DSLeftNavigationTreePropTypesSchema =\n  DSLeftNavigationTreePropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.Props>;\n\nconst itemTypes = Object.values(LEFT_NAVIGATION_TREE_ITEM_TYPES);\n\nexport const DSLeftNavigationTreeItemPropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.Item> = {\n  dsId: PropTypes.string.description('Unique identifier of the item').isRequired,\n  type: PropTypes.oneOf(itemTypes).description('Item type: leaf, parent, section or separator').isRequired,\n  CollapsedComponent: PropTypes.func\n    .description(\n      'Icon rendered next to the label and alone in the collapsed rail; root items without it do not appear in the rail. Receives { item }',\n    )\n    .signature('React.ComponentType<{ item: DSLeftNavigationTreeT.Item }>'),\n  itemOpts: PropTypes.object.description('Item options'),\n};\n\nexport const DSLeftNavigationTreeItemOptsPropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.ItemOpts> = {\n  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description(\n    'Visible label and accessible name of the item. Type-ahead only matches labels passed as strings',\n  ),\n  items: PropTypes.arrayOf(PropTypes.object).description('Children of a parent or a section'),\n  isOpened: PropTypes.bool.description(\n    'Controlled open state of a parent. When defined, the component only requests changes through onItemOpenedChange. Keep it defined (or undefined) for the whole life of the item',\n  ),\n  startOpened: PropTypes.bool.description('Open state of an uncontrolled parent until the user opens or closes it'),\n  selectable: PropTypes.bool.description('Whether the leaf can become the current page').defaultValue(true),\n  labelOverflow: PropTypes.oneOf(['wrap', 'wrapAll']).description('Overrides the component labelOverflow'),\n  RightComponent: PropTypes.func\n    .description(\n      'Non-interactive content after the label, exposed as the item description, so it must contain text (give an icon-only badge a visually hidden text). Receives { item }',\n    )\n    .signature('React.ComponentType<{ item: DSLeftNavigationTreeT.Item }>'),\n};\n\nconst LeftNavigationTreeItem = () => null;\nLeftNavigationTreeItem.displayName = 'LeftNavigationTreeItem';\nexport const DSLeftNavigationTreeItemSchema = describe(LeftNavigationTreeItem);\nDSLeftNavigationTreeItemSchema.propTypes =\n  DSLeftNavigationTreeItemPropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.Item>;\n\nconst LeftNavigationTreeItemOpts = () => null;\nLeftNavigationTreeItemOpts.displayName = 'LeftNavigationTreeItemOpts';\nexport const DSLeftNavigationTreeItemOptsSchema = describe(LeftNavigationTreeItemOpts);\nDSLeftNavigationTreeItemOptsSchema.propTypes =\n  DSLeftNavigationTreeItemOptsPropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.ItemOpts>;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  describe,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport {\n  DSLeftNavigationTreeName,\n  LEFT_NAVIGATION_TREE_ITEM_TYPES,\n  LEFT_NAVIGATION_TREE_SLOTS,\n} from './constants/index.js';\nimport type { LEFT_NAVIGATION_TREE_REGION_FOCUSES } from './constants/index.js';\nimport type { useAutoCalculated } from './config/useAutoCalculated.js';\n\nexport declare namespace DSLeftNavigationTreeT {\n  export type ItemType = (typeof LEFT_NAVIGATION_TREE_ITEM_TYPES)[keyof typeof LEFT_NAVIGATION_TREE_ITEM_TYPES];\n\n  export type LabelOverflowT = 'wrap' | 'wrapAll';\n\n  export type InteractionEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;\n\n  export interface ItemComponentProps {\n    item: Item;\n  }\n\n  export interface ItemOpts {\n    label?: string | JSX.Element;\n    items?: readonly Item[];\n    isOpened?: boolean;\n    startOpened?: boolean;\n    selectable?: boolean;\n    labelOverflow?: LabelOverflowT;\n    RightComponent?: React.ComponentType<ItemComponentProps>;\n  }\n\n  export interface Item {\n    dsId: string;\n    type: ItemType;\n    CollapsedComponent?: React.ComponentType<ItemComponentProps> | null;\n    itemOpts?: ItemOpts;\n  }\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    items: readonly Item[];\n    expanded: boolean;\n    expandedWidth: string;\n    labelOverflow: LabelOverflowT;\n    footerLabel: React.ReactNode;\n    disableDefaultSelection: boolean;\n    openedItem: string | null;\n    onItemClick: (item: Item, e: InteractionEvent) => void;\n    onItemOpenedChange: (item: Item, nextIsOpened: boolean, e: InteractionEvent) => void;\n    onSelectedChange: (id: string) => void;\n    onFocusChange: (id: string) => void;\n    onFooterExpand: (e: InteractionEvent) => void;\n    onFooterClose: (e: InteractionEvent) => void;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSLeftNavigationTreeName,\n    typeof LEFT_NAVIGATION_TREE_SLOTS\n  > {\n    selectedItem?: string | null;\n    selectedParent?: string;\n    HeaderComponent?: Item;\n  }\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface ItemSlotArguments {\n    item: Item;\n    level: number;\n    isOpen: boolean;\n    isCurrent: boolean;\n  }\n\n  export type SlotFunctionArguments = {\n    dsLeftnavigationtreeRoot: () => object;\n    dsLeftnavigationtreeTree: () => object;\n    dsLeftnavigationtreeItem: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeItemRow: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeItemLabel: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeLeftContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeCollapsedContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeRightContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeArrowContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeGroup: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeSectionContainer: () => object;\n    dsLeftnavigationtreeSectionLabel: () => object;\n    dsLeftnavigationtreeItemSeparator: () => object;\n    dsLeftnavigationtreeHeaderDisclosure: () => object;\n    dsLeftnavigationtreeFooterMenu: () => object;\n    dsLeftnavigationtreeFooterLabel: () => object;\n    dsLeftnavigationtreeFooterSeparator: () => object;\n    dsLeftnavigationtreeFooterMenuCollapse: () => object;\n  };\n\n  export type FocusRegion =\n    (typeof LEFT_NAVIGATION_TREE_REGION_FOCUSES)[keyof typeof LEFT_NAVIGATION_TREE_REGION_FOCUSES];\n\n  export type InternalAtoms = {\n    focusRegion: FocusRegion;\n    focusedItemId: string | null;\n    toggles: Record<string, boolean>;\n    internalSelectedItem: string | null;\n  };\n\n  export type UseAutoCalculatedT = ReturnType<typeof useAutoCalculated>;\n\n  export type Selectors = Record<string, never>;\n  export type Reducers = Record<string, never>;\n  export type InternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n}\n\nconst noop = () => null;\n\nexport const defaultProps: DSLeftNavigationTreeT.DefaultProps = {\n  items: [],\n  expanded: false,\n  expandedWidth: '240px',\n  labelOverflow: 'wrap',\n  footerLabel: '',\n  disableDefaultSelection: false,\n  openedItem: null,\n  onItemClick: noop,\n  onItemOpenedChange: noop,\n  onSelectedChange: noop,\n  onFocusChange: noop,\n  onFooterExpand: noop,\n  onFooterClose: noop,\n};\n\nexport const DSLeftNavigationTreePropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.Props> = {\n  ...getPropsPerSlotPropTypes(DSLeftNavigationTreeName, LEFT_NAVIGATION_TREE_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  items: PropTypes.arrayOf(PropTypes.object)\n    .description(\n      'The navigation tree with its full hierarchy: parents and sections hold their children in itemOpts.items. Children that are not in the data cannot be reached',\n    )\n    .defaultValue([]),\n  expanded: PropTypes.bool\n    .description('Whether the panel is expanded or collapsed to the icon-only rail')\n    .defaultValue(false),\n  expandedWidth: PropTypes.string\n    .description(\n      'Width of the panel when expanded. A plain length in px, rem or viewport units is applied to the content from the first frame of the transition. Any other width (a percentage, em, var(), calc()) is relative to its context, so the content follows the panel while it animates and its labels are squeezed during the transition.',\n    )\n    .defaultValue('240px'),\n  labelOverflow: PropTypes.oneOf(['wrap', 'wrapAll']).description('How labels wrap').defaultValue('wrap'),\n  footerLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string])\n    .description('Text shown in the footer next to the collapse button')\n    .defaultValue(''),\n  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([null])]).description(\n    'Id of the current page, exposed as aria-current=\"page\" (aria-selected is never set). null means no current page; undefined lets the component track it',\n  ),\n  selectedParent: PropTypes.string.description(\n    'Id of the item that shows the selected-parent indicator. When undefined, every ancestor of the current page shows it',\n  ),\n  disableDefaultSelection: PropTypes.bool\n    .description('Whether opening a parent should only expand it, without making its first page the current page')\n    .defaultValue(false),\n  HeaderComponent: PropTypes.object.description(\n    'Item rendered as the header disclosure button above the tree. While it is open, pass its content as items (selecting its first item is up to you), and clear openedItem when the panel collapses so the rail shows your root items. Only dsId, label, CollapsedComponent, RightComponent and labelOverflow are used',\n  ),\n  openedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([null])])\n    .description('Id of the header item when the header is open. Other ids are ignored')\n    .defaultValue(null),\n  onItemClick: PropTypes.func\n    .description(\n      'Called when an item or the header is activated with click, Enter or Space. In the collapsed rail, expand the panel from here when the item is a parent. After a page activation, move focus to your content if needed; after a parent activation, leave focus on the parent',\n    )\n    .signature('((item: DSLeftNavigationTreeT.Item, e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n  onItemOpenedChange: PropTypes.func\n    .description('Called when a parent requests to open or close')\n    .signature(\n      '((item: DSLeftNavigationTreeT.Item, nextIsOpened: boolean, e: React.MouseEvent | React.KeyboardEvent) => void)',\n    )\n    .defaultValue(() => null),\n  onSelectedChange: PropTypes.func\n    .description('Called with the id of the item that becomes the current page')\n    .signature('((id: string) => void)')\n    .defaultValue(() => null),\n  onFocusChange: PropTypes.func\n    .description('Called with the id of the item that receives focus')\n    .signature('((id: string) => void)')\n    .defaultValue(() => null),\n  onFooterExpand: PropTypes.func\n    .description('Called when the footer button expands the panel')\n    .signature('((e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n  onFooterClose: PropTypes.func\n    .description('Called when the footer button collapses the panel. Clear openedItem here if the header is open')\n    .signature('((e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n};\n\nexport const DSLeftNavigationTreePropTypesSchema =\n  DSLeftNavigationTreePropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.Props>;\n\nconst itemTypes = Object.values(LEFT_NAVIGATION_TREE_ITEM_TYPES);\n\nexport const DSLeftNavigationTreeItemPropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.Item> = {\n  dsId: PropTypes.string.description('Unique identifier of the item').isRequired,\n  type: PropTypes.oneOf(itemTypes).description('Item type: leaf, parent, section or separator').isRequired,\n  CollapsedComponent: PropTypes.func\n    .description(\n      'Icon rendered next to the label and alone in the collapsed rail; root items without it do not appear in the rail. Receives { item }',\n    )\n    .signature('React.ComponentType<{ item: DSLeftNavigationTreeT.Item }>'),\n  itemOpts: PropTypes.object.description('Item options'),\n};\n\nexport const DSLeftNavigationTreeItemOptsPropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.ItemOpts> = {\n  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description(\n    'Visible label and accessible name of the item. Type-ahead only matches labels passed as strings',\n  ),\n  items: PropTypes.arrayOf(PropTypes.object).description('Children of a parent or a section'),\n  isOpened: PropTypes.bool.description(\n    'Controlled open state of a parent. When defined, the component only requests changes through onItemOpenedChange. Keep it defined (or undefined) for the whole life of the item',\n  ),\n  startOpened: PropTypes.bool.description('Open state of an uncontrolled parent until the user opens or closes it'),\n  selectable: PropTypes.bool.description('Whether the leaf can become the current page').defaultValue(true),\n  labelOverflow: PropTypes.oneOf(['wrap', 'wrapAll']).description('Overrides the component labelOverflow'),\n  RightComponent: PropTypes.func\n    .description(\n      'Non-interactive content after the label, exposed as the item description, so it must contain text (give an icon-only badge a visually hidden text). Receives { item }',\n    )\n    .signature('React.ComponentType<{ item: DSLeftNavigationTreeT.Item }>'),\n};\n\nconst LeftNavigationTreeItem = () => null;\nLeftNavigationTreeItem.displayName = 'LeftNavigationTreeItem';\nexport const DSLeftNavigationTreeItemSchema = describe(LeftNavigationTreeItem);\nDSLeftNavigationTreeItemSchema.propTypes =\n  DSLeftNavigationTreeItemPropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.Item>;\n\nconst LeftNavigationTreeItemOpts = () => null;\nLeftNavigationTreeItemOpts.displayName = 'LeftNavigationTreeItemOpts';\nexport const DSLeftNavigationTreeItemOptsSchema = describe(LeftNavigationTreeItemOpts);\nDSLeftNavigationTreeItemOptsSchema.propTypes =\n  DSLeftNavigationTreeItemOptsPropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.ItemOpts>;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/parts/RailItem.js

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import React2, { useCallback, useContext } from "react";
-import { ROW_PADDING } from "../config/treeModel.js";
 import { useItemFocusState } from "../config/useTreeModel.js";
 import { TreeContext } from "./TreeContext.js";
 import { StyledCollapsedContainer, StyledItem, StyledItemLabel, StyledItemRow } from "./styled.js";
@@ -44,7 +43,8 @@ const RailItem = React2.memo(({ id }) => {
         StyledItemRow,
         {
           "data-row": true,
-          rowPadding: ROW_PADDING,
+          rowPadding: 0,
+          isRailRow: true,
           isTall: true,
           isSticky: false,
           isCurrent,

package/dist/esm/parts/RailItem.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/RailItem.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext } from 'react';\nimport { ROW_PADDING } from '../config/treeModel.js';\nimport { useItemFocusState } from '../config/useTreeModel.js';\nimport { TreeContext } from './TreeContext.js';\nimport { StyledCollapsedContainer, StyledItem, StyledItemLabel, StyledItemRow } from './styled.js';\n\nconst HIDDEN_LABEL_STYLE = { display: 'none' };\n\n/**\n * Collapsed-rail node: an icon-only end treeitem. The label stays in the DOM with display: none\n * because it is the aria-labelledby target (hidden targets still name the element, and are not read twice).\n */\nexport const RailItem = React.memo(({ id }: { id: string }) => {\n  const { model, handlers, getOwnerProps, labelOverflow, getElementId } = useContext(TreeContext);\n  const info = model.index.get(id);\n  const isCurrent = model.currentLeafId === id;\n  const isSelectedParent = model.selectedParentIds.has(id);\n  const focusState = useItemFocusState(model, id);\n  const item = info?.item;\n\n  const focusRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (node && focusState === 'focus-target') node.focus();\n    },\n    [focusState],\n  );\n  const handleClick = useCallback((e: React.MouseEvent<HTMLElement>) => handlers.activate(id, e), [handlers, id]);\n  const getOwnerPropsArguments = useCallback(() => ({ item, level: 1, isOpen: false, isCurrent }), [item, isCurrent]);\n\n  if (!info || !item?.CollapsedComponent) return null;\n  const { CollapsedComponent } = item;\n  const labelId = getElementId('label', id);\n\n  return (\n    <StyledItem\n      isOpenSection={false}\n      role=\"treeitem\"\n      aria-level={1}\n      aria-current={isCurrent ? 'page' : undefined}\n      aria-labelledby={labelId}\n      tabIndex={focusState === 'none' ? -1 : 0}\n      data-dsid={id}\n      data-type={item.type}\n      data-selected={isCurrent}\n      data-selectedparent={isSelectedParent}\n      innerRef={focusRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledItemRow\n        data-row\n        rowPadding={ROW_PADDING}\n        isTall\n        isSticky={false}\n        isCurrent={isCurrent}\n        isSelectedParent={isSelectedParent}\n        onClick={handleClick}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledCollapsedContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          <CollapsedComponent item={item} />\n        </StyledCollapsedContainer>\n        <StyledItemLabel\n          id={labelId}\n          isTall\n          labelOverflow={labelOverflow}\n          style={HIDDEN_LABEL_STYLE}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {item.itemOpts?.label}\n        </StyledItemLabel>\n      </StyledItemRow>\n    </StyledItem>\n  );\n});\n\nRailItem.displayName = 'DSLeftNavigationTree.RailItem';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACiDjB,SAYI,KAZJ;AAjDN,OAAOA,UAAS,aAAa,kBAAkB;AAC/C,SAAS,mBAAmB;AAC5B,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B,YAAY,iBAAiB,qBAAqB;AAErF,MAAM,qBAAqB,EAAE,SAAS,OAAO;AAMtC,MAAM,WAAWA,OAAM,KAAK,CAAC,EAAE,GAAG,MAAsB;AAC7D,QAAM,EAAE,OAAO,UAAU,eAAe,eAAe,aAAa,IAAI,WAAW,WAAW;AAC9F,QAAM,OAAO,MAAM,MAAM,IAAI,EAAE;AAC/B,QAAM,YAAY,MAAM,kBAAkB;AAC1C,QAAM,mBAAmB,MAAM,kBAAkB,IAAI,EAAE;AACvD,QAAM,aAAa,kBAAkB,OAAO,EAAE;AAC9C,QAAM,OAAO,MAAM;AAEnB,QAAM,WAAW;AAAA,IACf,CAAC,SAA6B;AAC5B,UAAI,QAAQ,eAAe,eAAgB,MAAK,MAAM;AAAA,IACxD;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,QAAM,cAAc,YAAY,CAAC,MAAqC,SAAS,SAAS,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC;AAC9G,QAAM,yBAAyB,YAAY,OAAO,EAAE,MAAM,OAAO,GAAG,QAAQ,OAAO,UAAU,IAAI,CAAC,MAAM,SAAS,CAAC;AAElH,MAAI,CAAC,QAAQ,CAAC,MAAM,mBAAoB,QAAO;AAC/C,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,UAAU,aAAa,SAAS,EAAE;AAExC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe;AAAA,MACf,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,gBAAc,YAAY,SAAS;AAAA,MACnC,mBAAiB;AAAA,MACjB,UAAU,eAAe,SAAS,KAAK;AAAA,MACvC,aAAW;AAAA,MACX,aAAW,KAAK;AAAA,MAChB,iBAAe;AAAA,MACf,uBAAqB;AAAA,MACrB,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,YAAQ;AAAA,UACR,YAAY;AAAA,UACZ,QAAM;AAAA,UACN,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,4BAAyB,eAA8B,wBACtD,8BAAC,sBAAmB,MAAY,GAClC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAI;AAAA,gBACJ,QAAM;AAAA,gBACN;AAAA,gBACA,OAAO;AAAA,gBACP;AAAA,gBACA;AAAA,gBAEC,eAAK,UAAU;AAAA;AAAA,YAClB;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,cAAc;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext } from 'react';\nimport { useItemFocusState } from '../config/useTreeModel.js';\nimport { TreeContext } from './TreeContext.js';\nimport { StyledCollapsedContainer, StyledItem, StyledItemLabel, StyledItemRow } from './styled.js';\n\nconst HIDDEN_LABEL_STYLE = { display: 'none' };\n\n/**\n * Collapsed-rail node: an icon-only end treeitem. The label stays in the DOM with display: none\n * because it is the aria-labelledby target (hidden targets still name the element, and are not read twice).\n */\nexport const RailItem = React.memo(({ id }: { id: string }) => {\n  const { model, handlers, getOwnerProps, labelOverflow, getElementId } = useContext(TreeContext);\n  const info = model.index.get(id);\n  const isCurrent = model.currentLeafId === id;\n  const isSelectedParent = model.selectedParentIds.has(id);\n  const focusState = useItemFocusState(model, id);\n  const item = info?.item;\n\n  const focusRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (node && focusState === 'focus-target') node.focus();\n    },\n    [focusState],\n  );\n  const handleClick = useCallback((e: React.MouseEvent<HTMLElement>) => handlers.activate(id, e), [handlers, id]);\n  const getOwnerPropsArguments = useCallback(() => ({ item, level: 1, isOpen: false, isCurrent }), [item, isCurrent]);\n\n  if (!info || !item?.CollapsedComponent) return null;\n  const { CollapsedComponent } = item;\n  const labelId = getElementId('label', id);\n\n  return (\n    <StyledItem\n      isOpenSection={false}\n      role=\"treeitem\"\n      aria-level={1}\n      aria-current={isCurrent ? 'page' : undefined}\n      aria-labelledby={labelId}\n      tabIndex={focusState === 'none' ? -1 : 0}\n      data-dsid={id}\n      data-type={item.type}\n      data-selected={isCurrent}\n      data-selectedparent={isSelectedParent}\n      innerRef={focusRef}\n      getOwnerProps={getOwnerProps}\n      getOwnerPropsArguments={getOwnerPropsArguments}\n    >\n      <StyledItemRow\n        data-row\n        rowPadding={0}\n        isRailRow\n        isTall\n        isSticky={false}\n        isCurrent={isCurrent}\n        isSelectedParent={isSelectedParent}\n        onClick={handleClick}\n        getOwnerProps={getOwnerProps}\n        getOwnerPropsArguments={getOwnerPropsArguments}\n      >\n        <StyledCollapsedContainer getOwnerProps={getOwnerProps} getOwnerPropsArguments={getOwnerPropsArguments}>\n          <CollapsedComponent item={item} />\n        </StyledCollapsedContainer>\n        <StyledItemLabel\n          id={labelId}\n          isTall\n          labelOverflow={labelOverflow}\n          style={HIDDEN_LABEL_STYLE}\n          getOwnerProps={getOwnerProps}\n          getOwnerPropsArguments={getOwnerPropsArguments}\n        >\n          {item.itemOpts?.label}\n        </StyledItemLabel>\n      </StyledItemRow>\n    </StyledItem>\n  );\n});\n\nRailItem.displayName = 'DSLeftNavigationTree.RailItem';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgDjB,SAaI,KAbJ;AAhDN,OAAOA,UAAS,aAAa,kBAAkB;AAC/C,SAAS,yBAAyB;AAClC,SAAS,mBAAmB;AAC5B,SAAS,0BAA0B,YAAY,iBAAiB,qBAAqB;AAErF,MAAM,qBAAqB,EAAE,SAAS,OAAO;AAMtC,MAAM,WAAWA,OAAM,KAAK,CAAC,EAAE,GAAG,MAAsB;AAC7D,QAAM,EAAE,OAAO,UAAU,eAAe,eAAe,aAAa,IAAI,WAAW,WAAW;AAC9F,QAAM,OAAO,MAAM,MAAM,IAAI,EAAE;AAC/B,QAAM,YAAY,MAAM,kBAAkB;AAC1C,QAAM,mBAAmB,MAAM,kBAAkB,IAAI,EAAE;AACvD,QAAM,aAAa,kBAAkB,OAAO,EAAE;AAC9C,QAAM,OAAO,MAAM;AAEnB,QAAM,WAAW;AAAA,IACf,CAAC,SAA6B;AAC5B,UAAI,QAAQ,eAAe,eAAgB,MAAK,MAAM;AAAA,IACxD;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AACA,QAAM,cAAc,YAAY,CAAC,MAAqC,SAAS,SAAS,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC;AAC9G,QAAM,yBAAyB,YAAY,OAAO,EAAE,MAAM,OAAO,GAAG,QAAQ,OAAO,UAAU,IAAI,CAAC,MAAM,SAAS,CAAC;AAElH,MAAI,CAAC,QAAQ,CAAC,MAAM,mBAAoB,QAAO;AAC/C,QAAM,EAAE,mBAAmB,IAAI;AAC/B,QAAM,UAAU,aAAa,SAAS,EAAE;AAExC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAe;AAAA,MACf,MAAK;AAAA,MACL,cAAY;AAAA,MACZ,gBAAc,YAAY,SAAS;AAAA,MACnC,mBAAiB;AAAA,MACjB,UAAU,eAAe,SAAS,KAAK;AAAA,MACvC,aAAW;AAAA,MACX,aAAW,KAAK;AAAA,MAChB,iBAAe;AAAA,MACf,uBAAqB;AAAA,MACrB,UAAU;AAAA,MACV;AAAA,MACA;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC,YAAQ;AAAA,UACR,YAAY;AAAA,UACZ,WAAS;AAAA,UACT,QAAM;AAAA,UACN,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT;AAAA,UACA;AAAA,UAEA;AAAA,gCAAC,4BAAyB,eAA8B,wBACtD,8BAAC,sBAAmB,MAAY,GAClC;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,IAAI;AAAA,gBACJ,QAAM;AAAA,gBACN;AAAA,gBACA,OAAO;AAAA,gBACP;AAAA,gBACA;AAAA,gBAEC,eAAK,UAAU;AAAA;AAAA,YAClB;AAAA;AAAA;AAAA,MACF;AAAA;AAAA,EACF;AAEJ,CAAC;AAED,SAAS,cAAc;",
   "names": ["React"]
 }

package/dist/esm/parts/styled.js

@@ -3,14 +3,26 @@ import { styled } from "@elliemae/ds-system";
 import { DSLeftNavigationTreeName, LEFT_NAVIGATION_TREE_SLOTS } from "../constants/index.js";
 const SLOTS = LEFT_NAVIGATION_TREE_SLOTS;
 const name = DSLeftNavigationTreeName;
+const ABSOLUTE_LENGTH = /^\s*(\d+|\d*\.\d+)(px|rem|vw|vh|vmin|vmax)\s*$/;
+const ROOT_BORDER = 1;
+const ROOT_BORDER_TOTAL = `${ROOT_BORDER * 2}px`;
+const getContentWidth = (expanded, expandedWidth) => {
+  if (!expanded) return `calc(48px - ${ROOT_BORDER_TOTAL})`;
+  return ABSOLUTE_LENGTH.test(expandedWidth) ? `calc(${expandedWidth} - ${ROOT_BORDER_TOTAL})` : "100%";
+};
 const StyledRoot = styled("nav", { name, slot: SLOTS.ROOT })`
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
   width: ${({ expanded, expandedWidth }) => expanded ? expandedWidth : "48px"};
+  && > * {
+    box-sizing: border-box;
+    width: ${({ expanded, expandedWidth }) => getContentWidth(expanded, expandedWidth)};
+  }
   transition: width ${({ expanded }) => expanded ? "ease-out" : "ease-in"} 350ms;
   height: 100%;
   overflow: hidden;
-  border: 1px solid ${({ theme }) => theme.colors.neutral[100]};
+  border: ${ROOT_BORDER}px solid ${({ theme }) => theme.colors.neutral[100]};
   box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[100]};
   background: ${({ theme }) => theme.colors.neutral["000"]};
 `;
@@ -19,7 +31,13 @@ const StyledTree = styled("ul", { name, slot: SLOTS.TREE })`
   margin: 0;
   padding: 0;
   overflow-y: auto;
-  ${({ isHeaderContent, theme }) => isHeaderContent ? `& [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }` : ""}
+  /**
+   * While the header is open the bar runs the full height of the list, like in LeftNavigation. The rows draw it on
+   * themselves, but the section labels and the separators are not rows: the list paints it behind them, so the bar has
+   * no gaps. The rows keep their own bar because their background covers the one of the list.
+   */
+  ${({ isHeaderContent, theme }) => isHeaderContent ? `box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]};
+  & [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }` : ""}
 `;
 const StyledGroup = styled("ul", { name, slot: SLOTS.GROUP })`
   list-style: none;
@@ -37,6 +55,9 @@ const StyledSectionLabel = styled("span", { name, slot: SLOTS.SECTION_LABEL })`
   font-size: 1rem;
   font-weight: ${({ theme }) => theme.fontWeights.semibold};
   color: ${({ theme }) => theme.colors.neutral[700]};
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: 0.8125rem;
+  }
 `;
 const StyledItemSeparator = styled("div", { name, slot: SLOTS.ITEM_SEPARATOR })`
   height: 1px;
@@ -54,8 +75,12 @@ const StyledItem = styled("li", { name, slot: SLOTS.ITEM })`
 `;
 const StyledItemRow = styled("div", { name, slot: SLOTS.ITEM_ROW })`
   /** Labels wrap: side content aligns to the first line (spec "date is pinned on the right side of the first line"). */
-  --row-first-line: ${({ isTall }) => isTall ? "24px" : "16px"};
+  --row-first-line: ${({ isTall }) => isTall ? "1.8462rem" : "1.2308rem"};
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    --row-first-line: ${({ isTall }) => isTall ? "1.5rem" : "1rem"};
+  }
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-start;
   column-gap: 8px;
   min-height: ${({ isTall }) => isTall ? "48px" : "32px"};
@@ -64,6 +89,7 @@ const StyledItemRow = styled("div", { name, slot: SLOTS.ITEM_ROW })`
   padding-left: ${({ rowPadding }) => `${rowPadding}px`};
   ${({ isSticky }) => isSticky ? "position: sticky; top: 0; z-index: 1;" : ""}
   padding-right: 8px;
+  ${({ isRailRow }) => isRailRow ? "padding-inline: 0; justify-content: center;" : ""}
   cursor: pointer;
   background: ${({ isCurrent, theme }) => isCurrent ? theme.colors.brand[200] : theme.colors.neutral["000"]};
   box-shadow: inset 4px 0 0 0
@@ -77,13 +103,19 @@ const StyledItemRow = styled("div", { name, slot: SLOTS.ITEM_ROW })`
 `;
 const StyledItemLabel = styled("span", { name, slot: SLOTS.ITEM_LABEL })`
   font-size: ${({ isTall }) => isTall ? "1.0769rem" : "1rem"};
-  line-height: ${({ isTall }) => isTall ? "17px" : "16px"};
-  padding-block: ${({ isTall }) => isTall ? "3.5px" : "0"};
+  line-height: ${({ isTall }) => isTall ? "1.3077rem" : "1.2308rem"};
+  padding-block: ${({ isTall }) => isTall ? "0.2692rem" : "0"};
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: ${({ isTall }) => isTall ? "0.875rem" : "0.8125rem"};
+    line-height: ${({ isTall }) => isTall ? "1.0625rem" : "1rem"};
+    padding-block: ${({ isTall }) => isTall ? "0.21875rem" : "0"};
+  }
   color: ${({ theme }) => theme.colors.neutral[800]};
   word-break: ${({ labelOverflow }) => labelOverflow === "wrapAll" ? "break-all" : "normal"};
-  overflow-wrap: anywhere;
-  flex: 1;
-  min-width: 0;
+  overflow-wrap: break-word;
+  flex: 1 1 0;
+  min-width: min(min-content, 100%);
+  max-width: 100%;
 `;
 const StyledLeftContainer = styled("span", { name, slot: SLOTS.LEFT_CONTAINER })`
   display: inline-flex;
@@ -99,6 +131,7 @@ const StyledCollapsedContainer = styled("span", { name, slot: SLOTS.COLLAPSED_CO
 const StyledRightContainer = styled("span", { name, slot: SLOTS.RIGHT_CONTAINER })`
   display: inline-flex;
   align-items: center;
+  margin-left: auto;
   min-height: var(--row-first-line, auto);
 `;
 const StyledArrowContainer = styled("span", { name, slot: SLOTS.ARROW_CONTAINER })`
@@ -107,22 +140,32 @@ const StyledArrowContainer = styled("span", { name, slot: SLOTS.ARROW_CONTAINER
   justify-content: center;
   flex: none;
   min-height: var(--row-first-line, auto);
-  ${({ isLeading }) => isLeading ? "width: 16px; margin-inline-end: -8px;" : ""}
+  ${({ isLeading }) => isLeading ? "width: 1.2308rem; margin-inline-end: -8px;" : ""}
+  ${({ isLeading, theme }) => isLeading ? `@media (max-width: ${theme.breakpoints.small}) { width: 1rem; }` : ""}
 `;
 const StyledHeaderDisclosure = styled("button", { name, slot: SLOTS.HEADER_DISCLOSURE })`
-  --row-first-line: 24px;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  --row-first-line: 1.8462rem;
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    --row-first-line: 1.5rem;
+  }
   display: flex;
   align-items: center;
   column-gap: 8px;
   width: 100%;
   min-height: 48px;
   padding: 0 8px 0 12px;
+  ${({ isRail }) => isRail ? "padding: 0; justify-content: center;" : ""}
   border: none;
   border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[100]};
   background: ${({ theme }) => theme.colors.neutral["000"]};
   box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => isOpen ? theme.colors.brand[500] : "transparent"};
   text-align: left;
   font-size: 1.0769rem;
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: 0.875rem;
+  }
   color: ${({ theme }) => theme.colors.neutral[800]};
   cursor: pointer;
   &:hover {
@@ -135,31 +178,46 @@ const StyledHeaderDisclosure = styled("button", { name, slot: SLOTS.HEADER_DISCL
   }
 `;
 const StyledFooterMenu = styled("div", { name, slot: SLOTS.FOOTER_MENU })`
+  flex-shrink: 0;
   display: grid;
-  grid-template-columns: ${({ expanded }) => expanded ? "1fr auto auto" : "1fr"};
+  grid-template-columns: ${({ expanded }) => expanded ? "1fr auto auto" : "minmax(0, 1fr)"};
   align-items: center;
   column-gap: 8px;
   margin-top: auto;
   min-height: 48px;
   padding: 0 4px 0 12px;
+  ${({ expanded }) => expanded ? `& > [data-dimsum-slot='dsLeftnavigationtreeFooterMenuCollapse'] { grid-column: 3; }` : "padding: 0; justify-items: center;"}
   border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};
 `;
 const StyledFooterLabel = styled("span", { name, slot: SLOTS.FOOTER_LABEL })`
-  font-size: 11px;
-  line-height: 14px;
+  min-width: 0;
+  overflow-wrap: break-word;
+  font-size: 0.8462rem;
+  line-height: 1.0769rem;
   color: ${({ theme }) => theme.colors.neutral[500]};
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    font-size: 0.6875rem;
+    line-height: 0.875rem;
+  }
 `;
 const StyledFooterSeparator = styled("span", { name, slot: SLOTS.FOOTER_SEPARATOR })`
   width: 1px;
-  height: 16px;
+  height: 1.2308rem;
   background: ${({ theme }) => theme.colors.neutral[100]};
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    height: 1rem;
+  }
 `;
 const StyledFooterButton = styled("button", { name, slot: SLOTS.FOOTER_MENU_COLLAPSE })`
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 2.4615rem;
+  height: 2.4615rem;
+  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {
+    width: 2rem;
+    height: 2rem;
+  }
   padding: 0;
   border: none;
   background: transparent;

package/dist/esm/parts/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/styled.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationTreeName, LEFT_NAVIGATION_TREE_SLOTS } from '../constants/index.js';\nimport type { DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\n\nconst SLOTS = LEFT_NAVIGATION_TREE_SLOTS;\nconst name = DSLeftNavigationTreeName;\n\nexport const StyledRoot = styled('nav', { name, slot: SLOTS.ROOT })<{ expanded: boolean; expandedWidth: string }>`\n  display: flex;\n  flex-direction: column;\n  width: ${({ expanded, expandedWidth }) => (expanded ? expandedWidth : '48px')};\n  transition: width ${({ expanded }) => (expanded ? 'ease-out' : 'ease-in')} 350ms;\n  height: 100%;\n  overflow: hidden;\n  border: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n  box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[100]};\n  background: ${({ theme }) => theme.colors.neutral['000']};\n`;\n\nexport const StyledTree = styled('ul', { name, slot: SLOTS.TREE })<{ isHeaderContent: boolean }>`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  ${({ isHeaderContent, theme }) =>\n    isHeaderContent\n      ? `& [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }`\n      : ''}\n`;\n\nexport const StyledGroup = styled('ul', { name, slot: SLOTS.GROUP })`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nexport const StyledSectionContainer = styled('ul', { name, slot: SLOTS.SECTION_CONTAINER })`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nexport const StyledSectionLabel = styled('span', { name, slot: SLOTS.SECTION_LABEL })`\n  display: block;\n  padding: 8px 12px 4px;\n  font-size: 1rem;\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  color: ${({ theme }) => theme.colors.neutral[700]};\n`;\n\nexport const StyledItemSeparator = styled('div', { name, slot: SLOTS.ITEM_SEPARATOR })`\n  height: 1px;\n  margin: 4px 12px;\n  background: ${({ theme }) => theme.colors.neutral[100]};\n`;\n\n/**\n * The focus ring is drawn on the row of the focused treeitem only: the `li` holds the whole\n * expanded subtree, so an outline on it would surround every descendant row.\n */\nexport const StyledItem = styled('li', { name, slot: SLOTS.ITEM })<{ isOpenSection: boolean }>`\n  list-style: none;\n  outline: none;\n  ${({ isOpenSection, theme }) =>\n    isOpenSection ? `& [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }` : ''}\n  &:focus-visible > [data-row] {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    outline-offset: -2px;\n  }\n`;\n\nexport const StyledItemRow = styled('div', { name, slot: SLOTS.ITEM_ROW })<{\n  rowPadding: number;\n  isTall: boolean;\n  isSticky: boolean;\n  isCurrent: boolean;\n  isSelectedParent: boolean;\n}>`\n  /** Labels wrap: side content aligns to the first line (spec \"date is pinned on the right side of the first line\"). */\n  --row-first-line: ${({ isTall }) => (isTall ? '24px' : '16px')};\n  display: flex;\n  align-items: flex-start;\n  column-gap: 8px;\n  min-height: ${({ isTall }) => (isTall ? '48px' : '32px')};\n  padding-block: ${({ isTall }) => (isTall ? '12px' : '8px')};\n  box-sizing: border-box;\n  padding-left: ${({ rowPadding }) => `${rowPadding}px`};\n  ${({ isSticky }) => (isSticky ? 'position: sticky; top: 0; z-index: 1;' : '')}\n  padding-right: 8px;\n  cursor: pointer;\n  background: ${({ isCurrent, theme }) => (isCurrent ? theme.colors.brand[200] : theme.colors.neutral['000'])};\n  box-shadow: inset 4px 0 0 0\n    ${({ isCurrent, isSelectedParent, theme }) =>\n      isCurrent || isSelectedParent ? theme.colors.brand[500] : 'transparent'};\n  ${({ isCurrent, theme }) => (isCurrent ? `outline: 1px solid ${theme.colors.brand[500]}; outline-offset: -1px;` : '')}\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: inset 4px 0 0 0\n      ${({ isCurrent, isSelectedParent, theme }) =>\n        isCurrent || isSelectedParent ? theme.colors.brand[500] : theme.colors.brand[300]};\n  }\n`;\n\nexport const StyledItemLabel = styled('span', { name, slot: SLOTS.ITEM_LABEL })<{\n  isTall: boolean;\n  labelOverflow: DSLeftNavigationTreeT.LabelOverflowT;\n}>`\n  font-size: ${({ isTall }) => (isTall ? '1.0769rem' : '1rem')};\n  line-height: ${({ isTall }) => (isTall ? '17px' : '16px')};\n  padding-block: ${({ isTall }) => (isTall ? '3.5px' : '0')};\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  word-break: ${({ labelOverflow }) => (labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n  overflow-wrap: anywhere;\n  flex: 1;\n  min-width: 0;\n`;\n\nexport const StyledLeftContainer = styled('span', { name, slot: SLOTS.LEFT_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--row-first-line, auto);\n`;\n\nexport const StyledCollapsedContainer = styled('span', { name, slot: SLOTS.COLLAPSED_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--row-first-line, auto);\n`;\n\nexport const StyledRightContainer = styled('span', { name, slot: SLOTS.RIGHT_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--row-first-line, auto);\n`;\n\nexport const StyledArrowContainer = styled('span', { name, slot: SLOTS.ARROW_CONTAINER })<{ isLeading: boolean }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  min-height: var(--row-first-line, auto);\n  ${({ isLeading }) => (isLeading ? 'width: 16px; margin-inline-end: -8px;' : '')}\n`;\n\nexport const StyledHeaderDisclosure = styled('button', { name, slot: SLOTS.HEADER_DISCLOSURE })<{\n  isRail: boolean;\n  isOpen: boolean;\n}>`\n  --row-first-line: 24px;\n  display: flex;\n  align-items: center;\n  column-gap: 8px;\n  width: 100%;\n  min-height: 48px;\n  padding: 0 8px 0 12px;\n  border: none;\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => (isOpen ? theme.colors.brand[500] : 'transparent')};\n  text-align: left;\n  font-size: 1.0769rem;\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  cursor: pointer;\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => (isOpen ? theme.colors.brand[500] : theme.colors.brand[300])};\n  }\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    outline-offset: -2px;\n  }\n`;\nexport const StyledFooterMenu = styled('div', { name, slot: SLOTS.FOOTER_MENU })<{ expanded: boolean }>`\n  display: grid;\n  grid-template-columns: ${({ expanded }) => (expanded ? '1fr auto auto' : '1fr')};\n  align-items: center;\n  column-gap: 8px;\n  margin-top: auto;\n  min-height: 48px;\n  padding: 0 4px 0 12px;\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n`;\n\nexport const StyledFooterLabel = styled('span', { name, slot: SLOTS.FOOTER_LABEL })`\n  font-size: 11px;\n  line-height: 14px;\n  color: ${({ theme }) => theme.colors.neutral[500]};\n`;\n\nexport const StyledFooterSeparator = styled('span', { name, slot: SLOTS.FOOTER_SEPARATOR })`\n  width: 1px;\n  height: 16px;\n  background: ${({ theme }) => theme.colors.neutral[100]};\n`;\n\nexport const StyledFooterButton = styled('button', { name, slot: SLOTS.FOOTER_MENU_COLLAPSE })`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  }\n`;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { DSLeftNavigationTreeName, LEFT_NAVIGATION_TREE_SLOTS } from '../constants/index.js';\nimport type { DSLeftNavigationTreeT } from '../react-desc-prop-types.js';\n\nconst SLOTS = LEFT_NAVIGATION_TREE_SLOTS;\nconst name = DSLeftNavigationTreeName;\n\n/** A plain length that means the same in every element: the children can reuse it as it is. */\nconst ABSOLUTE_LENGTH = /^\\s*(\\d+|\\d*\\.\\d+)(px|rem|vw|vh|vmin|vmax)\\s*$/;\n\n/** Border of the root, in px. The root clips its content, so the children take the width that is inside the border. */\nconst ROOT_BORDER = 1;\nconst ROOT_BORDER_TOTAL = `${ROOT_BORDER * 2}px`;\n\nconst getContentWidth = (expanded: boolean, expandedWidth: string) => {\n  if (!expanded) return `calc(48px - ${ROOT_BORDER_TOTAL})`;\n  return ABSOLUTE_LENGTH.test(expandedWidth) ? `calc(${expandedWidth} - ${ROOT_BORDER_TOTAL})` : '100%';\n};\n\n/**\n * While the panel expands or collapses only its own width animates, and it clips what it holds. The header, the tree\n * and the footer have the final width (the rail is 48px) from the first frame: the labels are not squeezed (one\n * character per line) when it grows, and the icons of the rail are already where they stay when it shrinks. The\n * selector is doubled to win over the `width: 100%` that the header declares for itself.\n *\n * Only a plain length that means the same in every element (`px`, `rem`, viewport units) is reused by the children.\n * Any other width is relative to something that is not the same for them: a percentage (`50%`, `calc(100% - 80px)`)\n * to the host of the panel, `em` to the font size of each element, `var()` to whatever it resolves to there. The\n * children would not get the width of the panel, so they follow it (`100%`) and, for those widths only, the content\n * is squeezed while the panel animates. The width of the root includes its border (`border-box`, whatever the page\n * says), so the children are narrower than it by the border: if they had the width of the root, the right edge of the\n * focus ring of a row, which is drawn inside the row, would be cut by the root.\n */\nexport const StyledRoot = styled('nav', { name, slot: SLOTS.ROOT })<{ expanded: boolean; expandedWidth: string }>`\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: ${({ expanded, expandedWidth }) => (expanded ? expandedWidth : '48px')};\n  && > * {\n    box-sizing: border-box;\n    width: ${({ expanded, expandedWidth }) => getContentWidth(expanded, expandedWidth)};\n  }\n  transition: width ${({ expanded }) => (expanded ? 'ease-out' : 'ease-in')} 350ms;\n  height: 100%;\n  overflow: hidden;\n  border: ${ROOT_BORDER}px solid ${({ theme }) => theme.colors.neutral[100]};\n  box-shadow: -1px 0 0 0 ${({ theme }) => theme.colors.neutral[100]};\n  background: ${({ theme }) => theme.colors.neutral['000']};\n`;\n\nexport const StyledTree = styled('ul', { name, slot: SLOTS.TREE })<{ isHeaderContent: boolean }>`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  overflow-y: auto;\n  /**\n   * While the header is open the bar runs the full height of the list, like in LeftNavigation. The rows draw it on\n   * themselves, but the section labels and the separators are not rows: the list paints it behind them, so the bar has\n   * no gaps. The rows keep their own bar because their background covers the one of the list.\n   */\n  ${({ isHeaderContent, theme }) =>\n    isHeaderContent\n      ? `box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]};\n  & [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }`\n      : ''}\n`;\n\nexport const StyledGroup = styled('ul', { name, slot: SLOTS.GROUP })`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nexport const StyledSectionContainer = styled('ul', { name, slot: SLOTS.SECTION_CONTAINER })`\n  list-style: none;\n  margin: 0;\n  padding: 0;\n`;\n\nexport const StyledSectionLabel = styled('span', { name, slot: SLOTS.SECTION_LABEL })`\n  display: block;\n  padding: 8px 12px 4px;\n  font-size: 1rem;\n  font-weight: ${({ theme }) => theme.fontWeights.semibold};\n  color: ${({ theme }) => theme.colors.neutral[700]};\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.8125rem;\n  }\n`;\n\nexport const StyledItemSeparator = styled('div', { name, slot: SLOTS.ITEM_SEPARATOR })`\n  height: 1px;\n  margin: 4px 12px;\n  background: ${({ theme }) => theme.colors.neutral[100]};\n`;\n\n/**\n * The focus ring is drawn on the row of the focused treeitem only: the `li` holds the whole\n * expanded subtree, so an outline on it would surround every descendant row.\n */\nexport const StyledItem = styled('li', { name, slot: SLOTS.ITEM })<{ isOpenSection: boolean }>`\n  list-style: none;\n  outline: none;\n  ${({ isOpenSection, theme }) =>\n    isOpenSection ? `& [data-row], & [data-row]:hover { box-shadow: inset 4px 0 0 0 ${theme.colors.brand[500]}; }` : ''}\n  &:focus-visible > [data-row] {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    outline-offset: -2px;\n  }\n`;\n\nexport const StyledItemRow = styled('div', { name, slot: SLOTS.ITEM_ROW })<{\n  rowPadding: number;\n  isTall: boolean;\n  isSticky: boolean;\n  isCurrent: boolean;\n  isSelectedParent: boolean;\n  isRailRow?: boolean;\n}>`\n  /** Labels wrap: side content aligns to the first line (spec \"date is pinned on the right side of the first line\"). */\n  --row-first-line: ${({ isTall }) => (isTall ? '1.8462rem' : '1.2308rem')};\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    --row-first-line: ${({ isTall }) => (isTall ? '1.5rem' : '1rem')};\n  }\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  column-gap: 8px;\n  min-height: ${({ isTall }) => (isTall ? '48px' : '32px')};\n  padding-block: ${({ isTall }) => (isTall ? '12px' : '8px')};\n  box-sizing: border-box;\n  padding-left: ${({ rowPadding }) => `${rowPadding}px`};\n  ${({ isSticky }) => (isSticky ? 'position: sticky; top: 0; z-index: 1;' : '')}\n  padding-right: 8px;\n  ${({ isRailRow }) => (isRailRow ? 'padding-inline: 0; justify-content: center;' : '')}\n  cursor: pointer;\n  background: ${({ isCurrent, theme }) => (isCurrent ? theme.colors.brand[200] : theme.colors.neutral['000'])};\n  box-shadow: inset 4px 0 0 0\n    ${({ isCurrent, isSelectedParent, theme }) =>\n      isCurrent || isSelectedParent ? theme.colors.brand[500] : 'transparent'};\n  ${({ isCurrent, theme }) => (isCurrent ? `outline: 1px solid ${theme.colors.brand[500]}; outline-offset: -1px;` : '')}\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: inset 4px 0 0 0\n      ${({ isCurrent, isSelectedParent, theme }) =>\n        isCurrent || isSelectedParent ? theme.colors.brand[500] : theme.colors.brand[300]};\n  }\n`;\n\n/**\n * The rows wrap by content: the label never goes narrower than its longest word, so what does not fit beside it (the\n * icons, the right content) goes down to the next row instead of breaking the word. A word longer than the whole row\n * (a URL, an identifier) is the exception: the minimum is capped to the row, `min(min-content, 100%)`, and\n * `overflow-wrap` breaks that word. `labelOverflow=\"wrapAll\"` keeps breaking anywhere.\n */\nexport const StyledItemLabel = styled('span', { name, slot: SLOTS.ITEM_LABEL })<{\n  isTall: boolean;\n  labelOverflow: DSLeftNavigationTreeT.LabelOverflowT;\n}>`\n  font-size: ${({ isTall }) => (isTall ? '1.0769rem' : '1rem')};\n  line-height: ${({ isTall }) => (isTall ? '1.3077rem' : '1.2308rem')};\n  padding-block: ${({ isTall }) => (isTall ? '0.2692rem' : '0')};\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: ${({ isTall }) => (isTall ? '0.875rem' : '0.8125rem')};\n    line-height: ${({ isTall }) => (isTall ? '1.0625rem' : '1rem')};\n    padding-block: ${({ isTall }) => (isTall ? '0.21875rem' : '0')};\n  }\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  word-break: ${({ labelOverflow }) => (labelOverflow === 'wrapAll' ? 'break-all' : 'normal')};\n  overflow-wrap: break-word;\n  flex: 1 1 0;\n  min-width: min(min-content, 100%);\n  max-width: 100%;\n`;\n\nexport const StyledLeftContainer = styled('span', { name, slot: SLOTS.LEFT_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  min-height: var(--row-first-line, auto);\n`;\n\nexport const StyledCollapsedContainer = styled('span', { name, slot: SLOTS.COLLAPSED_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--row-first-line, auto);\n`;\n\nexport const StyledRightContainer = styled('span', { name, slot: SLOTS.RIGHT_CONTAINER })`\n  display: inline-flex;\n  align-items: center;\n  margin-left: auto;\n  min-height: var(--row-first-line, auto);\n`;\n\n/**\n * The leading arrow is 16px at the 13px root (1.2308rem), so it grows with the icon. Its negative margin cancels the\n * row column-gap, which is a fixed 8px, so the label always starts at the arrow's right edge: do not scale the margin.\n */\nexport const StyledArrowContainer = styled('span', { name, slot: SLOTS.ARROW_CONTAINER })<{ isLeading: boolean }>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex: none;\n  min-height: var(--row-first-line, auto);\n  ${({ isLeading }) => (isLeading ? 'width: 1.2308rem; margin-inline-end: -8px;' : '')}\n  ${({ isLeading, theme }) => (isLeading ? `@media (max-width: ${theme.breakpoints.small}) { width: 1rem; }` : '')}\n`;\n\nexport const StyledHeaderDisclosure = styled('button', { name, slot: SLOTS.HEADER_DISCLOSURE })<{\n  isRail: boolean;\n  isOpen: boolean;\n}>`\n  flex-shrink: 0;\n  flex-wrap: wrap;\n  --row-first-line: 1.8462rem;\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    --row-first-line: 1.5rem;\n  }\n  display: flex;\n  align-items: center;\n  column-gap: 8px;\n  width: 100%;\n  min-height: 48px;\n  padding: 0 8px 0 12px;\n  ${({ isRail }) => (isRail ? 'padding: 0; justify-content: center;' : '')}\n  border: none;\n  border-bottom: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n  background: ${({ theme }) => theme.colors.neutral['000']};\n  box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => (isOpen ? theme.colors.brand[500] : 'transparent')};\n  text-align: left;\n  font-size: 1.0769rem;\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.875rem;\n  }\n  color: ${({ theme }) => theme.colors.neutral[800]};\n  cursor: pointer;\n  &:hover {\n    background: ${({ theme }) => theme.colors.brand[200]};\n    box-shadow: inset 4px 0 0 0 ${({ isOpen, theme }) => (isOpen ? theme.colors.brand[500] : theme.colors.brand[300])};\n  }\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    outline-offset: -2px;\n  }\n`;\n/**\n * The footer text is optional and flexible: without it the collapse button is the only child and the grid would put it\n * in the first column, on the left. The button is always in the last column, at the right end of the expanded footer.\n */\nexport const StyledFooterMenu = styled('div', { name, slot: SLOTS.FOOTER_MENU })<{ expanded: boolean }>`\n  flex-shrink: 0;\n  display: grid;\n  grid-template-columns: ${({ expanded }) => (expanded ? '1fr auto auto' : 'minmax(0, 1fr)')};\n  align-items: center;\n  column-gap: 8px;\n  margin-top: auto;\n  min-height: 48px;\n  padding: 0 4px 0 12px;\n  ${({ expanded }) =>\n    expanded\n      ? `& > [data-dimsum-slot='dsLeftnavigationtreeFooterMenuCollapse'] { grid-column: 3; }`\n      : 'padding: 0; justify-items: center;'}\n  border-top: 1px solid ${({ theme }) => theme.colors.neutral[100]};\n`;\n\n/**\n * The label can shrink below its longest word: a footer text without spaces (an account name, an identifier) is\n * broken inside the label, so the collapse button never leaves the panel. Ordinary text still wraps at the spaces.\n */\nexport const StyledFooterLabel = styled('span', { name, slot: SLOTS.FOOTER_LABEL })`\n  min-width: 0;\n  overflow-wrap: break-word;\n  font-size: 0.8462rem;\n  line-height: 1.0769rem;\n  color: ${({ theme }) => theme.colors.neutral[500]};\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: 0.6875rem;\n    line-height: 0.875rem;\n  }\n`;\n\nexport const StyledFooterSeparator = styled('span', { name, slot: SLOTS.FOOTER_SEPARATOR })`\n  width: 1px;\n  height: 1.2308rem;\n  background: ${({ theme }) => theme.colors.neutral[100]};\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    height: 1rem;\n  }\n`;\n\n/** The box follows the icon it holds, so it grows with it when the text is enlarged. */\nexport const StyledFooterButton = styled('button', { name, slot: SLOTS.FOOTER_MENU_COLLAPSE })`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.4615rem;\n  height: 2.4615rem;\n  @media (max-width: ${({ theme }) => theme.breakpoints.small}) {\n    width: 2rem;\n    height: 2rem;\n  }\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  &:focus-visible {\n    outline: 2px solid ${({ theme }) => theme.colors.brand[700]};\n  }\n`;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/esm/react-desc-prop-types.js

@@ -35,7 +35,9 @@ const DSLeftNavigationTreePropTypes = {
     "The navigation tree with its full hierarchy: parents and sections hold their children in itemOpts.items. Children that are not in the data cannot be reached"
   ).defaultValue([]),
   expanded: PropTypes.bool.description("Whether the panel is expanded or collapsed to the icon-only rail").defaultValue(false),
-  expandedWidth: PropTypes.string.description("Width of the panel when expanded").defaultValue("240px"),
+  expandedWidth: PropTypes.string.description(
+    "Width of the panel when expanded. A plain length in px, rem or viewport units is applied to the content from the first frame of the transition. Any other width (a percentage, em, var(), calc()) is relative to its context, so the content follows the panel while it animates and its labels are squeezed during the transition."
+  ).defaultValue("240px"),
   labelOverflow: PropTypes.oneOf(["wrap", "wrapAll"]).description("How labels wrap").defaultValue("wrap"),
   footerLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).description("Text shown in the footer next to the collapse button").defaultValue(""),
   selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([null])]).description(

package/dist/esm/react-desc-prop-types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  describe,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport {\n  DSLeftNavigationTreeName,\n  LEFT_NAVIGATION_TREE_ITEM_TYPES,\n  LEFT_NAVIGATION_TREE_SLOTS,\n} from './constants/index.js';\nimport type { LEFT_NAVIGATION_TREE_REGION_FOCUSES } from './constants/index.js';\nimport type { useAutoCalculated } from './config/useAutoCalculated.js';\n\nexport declare namespace DSLeftNavigationTreeT {\n  export type ItemType = (typeof LEFT_NAVIGATION_TREE_ITEM_TYPES)[keyof typeof LEFT_NAVIGATION_TREE_ITEM_TYPES];\n\n  export type LabelOverflowT = 'wrap' | 'wrapAll';\n\n  export type InteractionEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;\n\n  export interface ItemComponentProps {\n    item: Item;\n  }\n\n  export interface ItemOpts {\n    label?: string | JSX.Element;\n    items?: readonly Item[];\n    isOpened?: boolean;\n    startOpened?: boolean;\n    selectable?: boolean;\n    labelOverflow?: LabelOverflowT;\n    RightComponent?: React.ComponentType<ItemComponentProps>;\n  }\n\n  export interface Item {\n    dsId: string;\n    type: ItemType;\n    CollapsedComponent?: React.ComponentType<ItemComponentProps> | null;\n    itemOpts?: ItemOpts;\n  }\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    items: readonly Item[];\n    expanded: boolean;\n    expandedWidth: string;\n    labelOverflow: LabelOverflowT;\n    footerLabel: React.ReactNode;\n    disableDefaultSelection: boolean;\n    openedItem: string | null;\n    onItemClick: (item: Item, e: InteractionEvent) => void;\n    onItemOpenedChange: (item: Item, nextIsOpened: boolean, e: InteractionEvent) => void;\n    onSelectedChange: (id: string) => void;\n    onFocusChange: (id: string) => void;\n    onFooterExpand: (e: InteractionEvent) => void;\n    onFooterClose: (e: InteractionEvent) => void;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSLeftNavigationTreeName,\n    typeof LEFT_NAVIGATION_TREE_SLOTS\n  > {\n    selectedItem?: string | null;\n    selectedParent?: string;\n    HeaderComponent?: Item;\n  }\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface ItemSlotArguments {\n    item: Item;\n    level: number;\n    isOpen: boolean;\n    isCurrent: boolean;\n  }\n\n  export type SlotFunctionArguments = {\n    dsLeftnavigationtreeRoot: () => object;\n    dsLeftnavigationtreeTree: () => object;\n    dsLeftnavigationtreeItem: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeItemRow: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeItemLabel: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeLeftContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeCollapsedContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeRightContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeArrowContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeGroup: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeSectionContainer: () => object;\n    dsLeftnavigationtreeSectionLabel: () => object;\n    dsLeftnavigationtreeItemSeparator: () => object;\n    dsLeftnavigationtreeHeaderDisclosure: () => object;\n    dsLeftnavigationtreeFooterMenu: () => object;\n    dsLeftnavigationtreeFooterLabel: () => object;\n    dsLeftnavigationtreeFooterSeparator: () => object;\n    dsLeftnavigationtreeFooterMenuCollapse: () => object;\n  };\n\n  export type FocusRegion =\n    (typeof LEFT_NAVIGATION_TREE_REGION_FOCUSES)[keyof typeof LEFT_NAVIGATION_TREE_REGION_FOCUSES];\n\n  export type InternalAtoms = {\n    focusRegion: FocusRegion;\n    focusedItemId: string | null;\n    toggles: Record<string, boolean>;\n    internalSelectedItem: string | null;\n  };\n\n  export type UseAutoCalculatedT = ReturnType<typeof useAutoCalculated>;\n\n  export type Selectors = Record<string, never>;\n  export type Reducers = Record<string, never>;\n  export type InternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n}\n\nconst noop = () => null;\n\nexport const defaultProps: DSLeftNavigationTreeT.DefaultProps = {\n  items: [],\n  expanded: false,\n  expandedWidth: '240px',\n  labelOverflow: 'wrap',\n  footerLabel: '',\n  disableDefaultSelection: false,\n  openedItem: null,\n  onItemClick: noop,\n  onItemOpenedChange: noop,\n  onSelectedChange: noop,\n  onFocusChange: noop,\n  onFooterExpand: noop,\n  onFooterClose: noop,\n};\n\nexport const DSLeftNavigationTreePropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.Props> = {\n  ...getPropsPerSlotPropTypes(DSLeftNavigationTreeName, LEFT_NAVIGATION_TREE_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  items: PropTypes.arrayOf(PropTypes.object)\n    .description(\n      'The navigation tree with its full hierarchy: parents and sections hold their children in itemOpts.items. Children that are not in the data cannot be reached',\n    )\n    .defaultValue([]),\n  expanded: PropTypes.bool\n    .description('Whether the panel is expanded or collapsed to the icon-only rail')\n    .defaultValue(false),\n  expandedWidth: PropTypes.string.description('Width of the panel when expanded').defaultValue('240px'),\n  labelOverflow: PropTypes.oneOf(['wrap', 'wrapAll']).description('How labels wrap').defaultValue('wrap'),\n  footerLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string])\n    .description('Text shown in the footer next to the collapse button')\n    .defaultValue(''),\n  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([null])]).description(\n    'Id of the current page, exposed as aria-current=\"page\" (aria-selected is never set). null means no current page; undefined lets the component track it',\n  ),\n  selectedParent: PropTypes.string.description(\n    'Id of the item that shows the selected-parent indicator. When undefined, every ancestor of the current page shows it',\n  ),\n  disableDefaultSelection: PropTypes.bool\n    .description('Whether opening a parent should only expand it, without making its first page the current page')\n    .defaultValue(false),\n  HeaderComponent: PropTypes.object.description(\n    'Item rendered as the header disclosure button above the tree. While it is open, pass its content as items (selecting its first item is up to you), and clear openedItem when the panel collapses so the rail shows your root items. Only dsId, label, CollapsedComponent, RightComponent and labelOverflow are used',\n  ),\n  openedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([null])])\n    .description('Id of the header item when the header is open. Other ids are ignored')\n    .defaultValue(null),\n  onItemClick: PropTypes.func\n    .description(\n      'Called when an item or the header is activated with click, Enter or Space. In the collapsed rail, expand the panel from here when the item is a parent. After a page activation, move focus to your content if needed; after a parent activation, leave focus on the parent',\n    )\n    .signature('((item: DSLeftNavigationTreeT.Item, e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n  onItemOpenedChange: PropTypes.func\n    .description('Called when a parent requests to open or close')\n    .signature(\n      '((item: DSLeftNavigationTreeT.Item, nextIsOpened: boolean, e: React.MouseEvent | React.KeyboardEvent) => void)',\n    )\n    .defaultValue(() => null),\n  onSelectedChange: PropTypes.func\n    .description('Called with the id of the item that becomes the current page')\n    .signature('((id: string) => void)')\n    .defaultValue(() => null),\n  onFocusChange: PropTypes.func\n    .description('Called with the id of the item that receives focus')\n    .signature('((id: string) => void)')\n    .defaultValue(() => null),\n  onFooterExpand: PropTypes.func\n    .description('Called when the footer button expands the panel')\n    .signature('((e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n  onFooterClose: PropTypes.func\n    .description('Called when the footer button collapses the panel. Clear openedItem here if the header is open')\n    .signature('((e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n};\n\nexport const DSLeftNavigationTreePropTypesSchema =\n  DSLeftNavigationTreePropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.Props>;\n\nconst itemTypes = Object.values(LEFT_NAVIGATION_TREE_ITEM_TYPES);\n\nexport const DSLeftNavigationTreeItemPropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.Item> = {\n  dsId: PropTypes.string.description('Unique identifier of the item').isRequired,\n  type: PropTypes.oneOf(itemTypes).description('Item type: leaf, parent, section or separator').isRequired,\n  CollapsedComponent: PropTypes.func\n    .description(\n      'Icon rendered next to the label and alone in the collapsed rail; root items without it do not appear in the rail. Receives { item }',\n    )\n    .signature('React.ComponentType<{ item: DSLeftNavigationTreeT.Item }>'),\n  itemOpts: PropTypes.object.description('Item options'),\n};\n\nexport const DSLeftNavigationTreeItemOptsPropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.ItemOpts> = {\n  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description(\n    'Visible label and accessible name of the item. Type-ahead only matches labels passed as strings',\n  ),\n  items: PropTypes.arrayOf(PropTypes.object).description('Children of a parent or a section'),\n  isOpened: PropTypes.bool.description(\n    'Controlled open state of a parent. When defined, the component only requests changes through onItemOpenedChange. Keep it defined (or undefined) for the whole life of the item',\n  ),\n  startOpened: PropTypes.bool.description('Open state of an uncontrolled parent until the user opens or closes it'),\n  selectable: PropTypes.bool.description('Whether the leaf can become the current page').defaultValue(true),\n  labelOverflow: PropTypes.oneOf(['wrap', 'wrapAll']).description('Overrides the component labelOverflow'),\n  RightComponent: PropTypes.func\n    .description(\n      'Non-interactive content after the label, exposed as the item description, so it must contain text (give an icon-only badge a visually hidden text). Receives { item }',\n    )\n    .signature('React.ComponentType<{ item: DSLeftNavigationTreeT.Item }>'),\n};\n\nconst LeftNavigationTreeItem = () => null;\nLeftNavigationTreeItem.displayName = 'LeftNavigationTreeItem';\nexport const DSLeftNavigationTreeItemSchema = describe(LeftNavigationTreeItem);\nDSLeftNavigationTreeItemSchema.propTypes =\n  DSLeftNavigationTreeItemPropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.Item>;\n\nconst LeftNavigationTreeItemOpts = () => null;\nLeftNavigationTreeItemOpts.displayName = 'LeftNavigationTreeItemOpts';\nexport const DSLeftNavigationTreeItemOptsSchema = describe(LeftNavigationTreeItemOpts);\nDSLeftNavigationTreeItemOptsSchema.propTypes =\n  DSLeftNavigationTreeItemOptsPropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.ItemOpts>;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\n/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { GlobalAttributesT, XstyledProps, DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  describe,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport type { ZustandT } from '@elliemae/ds-zustand-helpers';\nimport {\n  DSLeftNavigationTreeName,\n  LEFT_NAVIGATION_TREE_ITEM_TYPES,\n  LEFT_NAVIGATION_TREE_SLOTS,\n} from './constants/index.js';\nimport type { LEFT_NAVIGATION_TREE_REGION_FOCUSES } from './constants/index.js';\nimport type { useAutoCalculated } from './config/useAutoCalculated.js';\n\nexport declare namespace DSLeftNavigationTreeT {\n  export type ItemType = (typeof LEFT_NAVIGATION_TREE_ITEM_TYPES)[keyof typeof LEFT_NAVIGATION_TREE_ITEM_TYPES];\n\n  export type LabelOverflowT = 'wrap' | 'wrapAll';\n\n  export type InteractionEvent = React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>;\n\n  export interface ItemComponentProps {\n    item: Item;\n  }\n\n  export interface ItemOpts {\n    label?: string | JSX.Element;\n    items?: readonly Item[];\n    isOpened?: boolean;\n    startOpened?: boolean;\n    selectable?: boolean;\n    labelOverflow?: LabelOverflowT;\n    RightComponent?: React.ComponentType<ItemComponentProps>;\n  }\n\n  export interface Item {\n    dsId: string;\n    type: ItemType;\n    CollapsedComponent?: React.ComponentType<ItemComponentProps> | null;\n    itemOpts?: ItemOpts;\n  }\n\n  export interface RequiredProps {}\n\n  export interface DefaultProps {\n    items: readonly Item[];\n    expanded: boolean;\n    expandedWidth: string;\n    labelOverflow: LabelOverflowT;\n    footerLabel: React.ReactNode;\n    disableDefaultSelection: boolean;\n    openedItem: string | null;\n    onItemClick: (item: Item, e: InteractionEvent) => void;\n    onItemOpenedChange: (item: Item, nextIsOpened: boolean, e: InteractionEvent) => void;\n    onSelectedChange: (id: string) => void;\n    onFocusChange: (id: string) => void;\n    onFooterExpand: (e: InteractionEvent) => void;\n    onFooterClose: (e: InteractionEvent) => void;\n  }\n\n  export interface OptionalProps extends TypescriptHelpersT.PropsForGlobalOnSlots<\n    typeof DSLeftNavigationTreeName,\n    typeof LEFT_NAVIGATION_TREE_SLOTS\n  > {\n    selectedItem?: string | null;\n    selectedParent?: string;\n    HeaderComponent?: Item;\n  }\n\n  export interface Props\n    extends\n      Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends\n      DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLElement>, keyof DefaultProps | keyof XstyledProps>,\n      XstyledProps,\n      RequiredProps {}\n\n  export interface ItemSlotArguments {\n    item: Item;\n    level: number;\n    isOpen: boolean;\n    isCurrent: boolean;\n  }\n\n  export type SlotFunctionArguments = {\n    dsLeftnavigationtreeRoot: () => object;\n    dsLeftnavigationtreeTree: () => object;\n    dsLeftnavigationtreeItem: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeItemRow: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeItemLabel: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeLeftContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeCollapsedContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeRightContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeArrowContainer: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeGroup: (args: ItemSlotArguments) => object;\n    dsLeftnavigationtreeSectionContainer: () => object;\n    dsLeftnavigationtreeSectionLabel: () => object;\n    dsLeftnavigationtreeItemSeparator: () => object;\n    dsLeftnavigationtreeHeaderDisclosure: () => object;\n    dsLeftnavigationtreeFooterMenu: () => object;\n    dsLeftnavigationtreeFooterLabel: () => object;\n    dsLeftnavigationtreeFooterSeparator: () => object;\n    dsLeftnavigationtreeFooterMenuCollapse: () => object;\n  };\n\n  export type FocusRegion =\n    (typeof LEFT_NAVIGATION_TREE_REGION_FOCUSES)[keyof typeof LEFT_NAVIGATION_TREE_REGION_FOCUSES];\n\n  export type InternalAtoms = {\n    focusRegion: FocusRegion;\n    focusedItemId: string | null;\n    toggles: Record<string, boolean>;\n    internalSelectedItem: string | null;\n  };\n\n  export type UseAutoCalculatedT = ReturnType<typeof useAutoCalculated>;\n\n  export type Selectors = Record<string, never>;\n  export type Reducers = Record<string, never>;\n  export type InternalStore = ZustandT.InternalStore<InternalAtoms, Selectors, Reducers>;\n}\n\nconst noop = () => null;\n\nexport const defaultProps: DSLeftNavigationTreeT.DefaultProps = {\n  items: [],\n  expanded: false,\n  expandedWidth: '240px',\n  labelOverflow: 'wrap',\n  footerLabel: '',\n  disableDefaultSelection: false,\n  openedItem: null,\n  onItemClick: noop,\n  onItemOpenedChange: noop,\n  onSelectedChange: noop,\n  onFocusChange: noop,\n  onFooterExpand: noop,\n  onFooterClose: noop,\n};\n\nexport const DSLeftNavigationTreePropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.Props> = {\n  ...getPropsPerSlotPropTypes(DSLeftNavigationTreeName, LEFT_NAVIGATION_TREE_SLOTS),\n  ...globalAttributesPropTypes,\n  ...xstyledPropTypes,\n  items: PropTypes.arrayOf(PropTypes.object)\n    .description(\n      'The navigation tree with its full hierarchy: parents and sections hold their children in itemOpts.items. Children that are not in the data cannot be reached',\n    )\n    .defaultValue([]),\n  expanded: PropTypes.bool\n    .description('Whether the panel is expanded or collapsed to the icon-only rail')\n    .defaultValue(false),\n  expandedWidth: PropTypes.string\n    .description(\n      'Width of the panel when expanded. A plain length in px, rem or viewport units is applied to the content from the first frame of the transition. Any other width (a percentage, em, var(), calc()) is relative to its context, so the content follows the panel while it animates and its labels are squeezed during the transition.',\n    )\n    .defaultValue('240px'),\n  labelOverflow: PropTypes.oneOf(['wrap', 'wrapAll']).description('How labels wrap').defaultValue('wrap'),\n  footerLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.string])\n    .description('Text shown in the footer next to the collapse button')\n    .defaultValue(''),\n  selectedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([null])]).description(\n    'Id of the current page, exposed as aria-current=\"page\" (aria-selected is never set). null means no current page; undefined lets the component track it',\n  ),\n  selectedParent: PropTypes.string.description(\n    'Id of the item that shows the selected-parent indicator. When undefined, every ancestor of the current page shows it',\n  ),\n  disableDefaultSelection: PropTypes.bool\n    .description('Whether opening a parent should only expand it, without making its first page the current page')\n    .defaultValue(false),\n  HeaderComponent: PropTypes.object.description(\n    'Item rendered as the header disclosure button above the tree. While it is open, pass its content as items (selecting its first item is up to you), and clear openedItem when the panel collapses so the rail shows your root items. Only dsId, label, CollapsedComponent, RightComponent and labelOverflow are used',\n  ),\n  openedItem: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([null])])\n    .description('Id of the header item when the header is open. Other ids are ignored')\n    .defaultValue(null),\n  onItemClick: PropTypes.func\n    .description(\n      'Called when an item or the header is activated with click, Enter or Space. In the collapsed rail, expand the panel from here when the item is a parent. After a page activation, move focus to your content if needed; after a parent activation, leave focus on the parent',\n    )\n    .signature('((item: DSLeftNavigationTreeT.Item, e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n  onItemOpenedChange: PropTypes.func\n    .description('Called when a parent requests to open or close')\n    .signature(\n      '((item: DSLeftNavigationTreeT.Item, nextIsOpened: boolean, e: React.MouseEvent | React.KeyboardEvent) => void)',\n    )\n    .defaultValue(() => null),\n  onSelectedChange: PropTypes.func\n    .description('Called with the id of the item that becomes the current page')\n    .signature('((id: string) => void)')\n    .defaultValue(() => null),\n  onFocusChange: PropTypes.func\n    .description('Called with the id of the item that receives focus')\n    .signature('((id: string) => void)')\n    .defaultValue(() => null),\n  onFooterExpand: PropTypes.func\n    .description('Called when the footer button expands the panel')\n    .signature('((e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n  onFooterClose: PropTypes.func\n    .description('Called when the footer button collapses the panel. Clear openedItem here if the header is open')\n    .signature('((e: React.MouseEvent | React.KeyboardEvent) => void)')\n    .defaultValue(() => null),\n};\n\nexport const DSLeftNavigationTreePropTypesSchema =\n  DSLeftNavigationTreePropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.Props>;\n\nconst itemTypes = Object.values(LEFT_NAVIGATION_TREE_ITEM_TYPES);\n\nexport const DSLeftNavigationTreeItemPropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.Item> = {\n  dsId: PropTypes.string.description('Unique identifier of the item').isRequired,\n  type: PropTypes.oneOf(itemTypes).description('Item type: leaf, parent, section or separator').isRequired,\n  CollapsedComponent: PropTypes.func\n    .description(\n      'Icon rendered next to the label and alone in the collapsed rail; root items without it do not appear in the rail. Receives { item }',\n    )\n    .signature('React.ComponentType<{ item: DSLeftNavigationTreeT.Item }>'),\n  itemOpts: PropTypes.object.description('Item options'),\n};\n\nexport const DSLeftNavigationTreeItemOptsPropTypes: DSPropTypesSchema<DSLeftNavigationTreeT.ItemOpts> = {\n  label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).description(\n    'Visible label and accessible name of the item. Type-ahead only matches labels passed as strings',\n  ),\n  items: PropTypes.arrayOf(PropTypes.object).description('Children of a parent or a section'),\n  isOpened: PropTypes.bool.description(\n    'Controlled open state of a parent. When defined, the component only requests changes through onItemOpenedChange. Keep it defined (or undefined) for the whole life of the item',\n  ),\n  startOpened: PropTypes.bool.description('Open state of an uncontrolled parent until the user opens or closes it'),\n  selectable: PropTypes.bool.description('Whether the leaf can become the current page').defaultValue(true),\n  labelOverflow: PropTypes.oneOf(['wrap', 'wrapAll']).description('Overrides the component labelOverflow'),\n  RightComponent: PropTypes.func\n    .description(\n      'Non-interactive content after the label, exposed as the item description, so it must contain text (give an icon-only badge a visually hidden text). Receives { item }',\n    )\n    .signature('React.ComponentType<{ item: DSLeftNavigationTreeT.Item }>'),\n};\n\nconst LeftNavigationTreeItem = () => null;\nLeftNavigationTreeItem.displayName = 'LeftNavigationTreeItem';\nexport const DSLeftNavigationTreeItemSchema = describe(LeftNavigationTreeItem);\nDSLeftNavigationTreeItemSchema.propTypes =\n  DSLeftNavigationTreeItemPropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.Item>;\n\nconst LeftNavigationTreeItemOpts = () => null;\nLeftNavigationTreeItemOpts.displayName = 'LeftNavigationTreeItemOpts';\nexport const DSLeftNavigationTreeItemOptsSchema = describe(LeftNavigationTreeItemOpts);\nDSLeftNavigationTreeItemOptsSchema.propTypes =\n  DSLeftNavigationTreeItemOptsPropTypes as unknown as ValidationMap<DSLeftNavigationTreeT.ItemOpts>;\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/types/parts/styled.d.ts

@@ -1,4 +1,18 @@
 import type { DSLeftNavigationTreeT } from '../react-desc-prop-types.js';
+/**
+ * While the panel expands or collapses only its own width animates, and it clips what it holds. The header, the tree
+ * and the footer have the final width (the rail is 48px) from the first frame: the labels are not squeezed (one
+ * character per line) when it grows, and the icons of the rail are already where they stay when it shrinks. The
+ * selector is doubled to win over the `width: 100%` that the header declares for itself.
+ *
+ * Only a plain length that means the same in every element (`px`, `rem`, viewport units) is reused by the children.
+ * Any other width is relative to something that is not the same for them: a percentage (`50%`, `calc(100% - 80px)`)
+ * to the host of the panel, `em` to the font size of each element, `var()` to whatever it resolves to there. The
+ * children would not get the width of the panel, so they follow it (`100%`) and, for those widths only, the content
+ * is squeezed while the panel animates. The width of the root includes its border (`border-box`, whatever the page
+ * says), so the children are narrower than it by the border: if they had the width of the root, the right edge of the
+ * focus ring of a row, which is drawn inside the row, would be cut by the root.
+ */
 export declare const StyledRoot: import("styled-components").StyledComponent<"nav", import("@elliemae/ds-system").Theme, {
     expanded: boolean;
     expandedWidth: string;
@@ -23,7 +37,14 @@ export declare const StyledItemRow: import("styled-components").StyledComponent<
     isSticky: boolean;
     isCurrent: boolean;
     isSelectedParent: boolean;
+    isRailRow?: boolean;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+/**
+ * The rows wrap by content: the label never goes narrower than its longest word, so what does not fit beside it (the
+ * icons, the right content) goes down to the next row instead of breaking the word. A word longer than the whole row
+ * (a URL, an identifier) is the exception: the minimum is capped to the row, `min(min-content, 100%)`, and
+ * `overflow-wrap` breaks that word. `labelOverflow="wrapAll"` keeps breaking anywhere.
+ */
 export declare const StyledItemLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, {
     isTall: boolean;
     labelOverflow: DSLeftNavigationTreeT.LabelOverflowT;
@@ -31,6 +52,10 @@ export declare const StyledItemLabel: import("styled-components").StyledComponen
 export declare const StyledLeftContainer: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
 export declare const StyledCollapsedContainer: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
 export declare const StyledRightContainer: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
+/**
+ * The leading arrow is 16px at the 13px root (1.2308rem), so it grows with the icon. Its negative margin cancels the
+ * row column-gap, which is a fixed 8px, so the label always starts at the arrow's right edge: do not scale the margin.
+ */
 export declare const StyledArrowContainer: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, {
     isLeading: boolean;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
@@ -38,9 +63,18 @@ export declare const StyledHeaderDisclosure: import("styled-components").StyledC
     isRail: boolean;
     isOpen: boolean;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>;
+/**
+ * The footer text is optional and flexible: without it the collapse button is the only child and the grid would put it
+ * in the first column, on the left. The button is always in the last column, at the right end of the expanded footer.
+ */
 export declare const StyledFooterMenu: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, {
     expanded: boolean;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
+/**
+ * The label can shrink below its longest word: a footer text without spaces (an account name, an identifier) is
+ * broken inside the label, so the collapse button never leaves the panel. Ordinary text still wraps at the spaces.
+ */
 export declare const StyledFooterLabel: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
 export declare const StyledFooterSeparator: import("styled-components").StyledComponent<"span", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"span">, never>;
+/** The box follows the icon it holds, so it grows with it when the text is enlarged. */
 export declare const StyledFooterButton: import("styled-components").StyledComponent<"button", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"button">, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-left-navigation-tree",
-  "version": "3.80.0-next.67",
+  "version": "3.80.0-next.69",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Left Navigation Tree",
   "files": [
@@ -36,16 +36,16 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-icons": "3.80.0-next.67",
-    "@elliemae/ds-props-helpers": "3.80.0-next.67",
-    "@elliemae/ds-system": "3.80.0-next.67",
-    "@elliemae/ds-zustand-helpers": "3.80.0-next.67",
+    "@elliemae/ds-icons": "3.80.0-next.69",
+    "@elliemae/ds-props-helpers": "3.80.0-next.69",
+    "@elliemae/ds-system": "3.80.0-next.69",
+    "@elliemae/ds-zustand-helpers": "3.80.0-next.69",
     "@xstyled/styled-components": "~3.8.1"
   },
   "devDependencies": {
-    "@elliemae/ds-monorepo-devops": "3.80.0-next.67",
-    "@elliemae/ds-test-utils": "3.80.0-next.67",
-    "@elliemae/ds-typescript-helpers": "3.80.0-next.67",
+    "@elliemae/ds-monorepo-devops": "3.80.0-next.69",
+    "@elliemae/ds-test-utils": "3.80.0-next.69",
+    "@elliemae/ds-typescript-helpers": "3.80.0-next.69",
     "@playwright/experimental-ct-react": "1.61.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",