@plumile/ui 0.1.114 → 0.1.116

package/lib/esm/components/layout/PageShell.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageShell.css.js","names":[],"sources":["../../../../src/components/layout/PageShell.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nconst MOBILE_MEDIA_QUERY = 'screen and (max-width: 1023px)';\n\nexport const shell = sprinkles({\n  display: 'flex',\n  width: 'full',\n  backgroundColor: 'background',\n  backgroundImage: 'pageShellSurface',\n});\n\nexport const page = sprinkles({\n  paddingLeft: 2,\n  paddingRight: 2,\n  paddingTop: 2,\n  paddingBottom: 2,\n  height: {\n    base: 'screen',\n    max1023: 'auto',\n  },\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const pageWithSidePanel = sprinkles({\n  display: 'flex',\n  alignItems: 'stretch',\n  gap: {\n    base: 0,\n    max1023: 3,\n  },\n  minWidth: 0,\n  flexDirection: {\n    base: 'row',\n    max1023: 'column',\n  },\n  height: {\n    base: 'full',\n    max1023: 'auto',\n  },\n});\n\nexport const sidebarColumn = sprinkles({\n  position: 'sticky',\n  top: 0,\n  height: 'screen',\n  flexShrink: 0,\n  display: 'flex',\n  overflow: 'hidden',\n});\n\nexport const sidebarColumnMobile = style({\n  '@media': {\n    [MOBILE_MEDIA_QUERY]: {\n      position: 'fixed',\n      top: 0,\n      left: 0,\n      bottom: 0,\n      width: '20rem',\n      maxWidth: '85vw',\n      transform: 'translateX(-100%)',\n      transitionProperty: 'transform',\n      transitionDuration: vars.transitionDuration[200],\n      transitionTimingFunction: vars.transitionTimingFunction.ease,\n      zIndex: vars.zIndex[30],\n      backgroundColor: vars.colors.surface,\n      borderRight: `1px solid ${vars.colors.borderSubtle}`,\n    },\n  },\n});\n\nexport const sidebarColumnMobileOpen = style({\n  '@media': {\n    [MOBILE_MEDIA_QUERY]: {\n      transform: 'translateX(0)',\n    },\n  },\n});\n\nexport const sidebarInner = style([\n  sprinkles({\n    display: 'flex',\n    height: 'full',\n  }),\n  {\n    '@media': {\n      [MOBILE_MEDIA_QUERY]: {\n        paddingTop: '3.75rem',\n      },\n    },\n  },\n]);\n\nexport const mobileSidebarBackdrop = style({\n  display: 'none',\n  '@media': {\n    [MOBILE_MEDIA_QUERY]: {\n      display: 'block',\n      position: 'fixed',\n      inset: 0,\n      backgroundColor: 'rgba(15, 23, 42, 0.32)',\n      opacity: 0,\n      pointerEvents: 'none',\n      transitionProperty: 'opacity',\n      transitionDuration: vars.transitionDuration[200],\n      transitionTimingFunction: vars.transitionTimingFunction.ease,\n      zIndex: vars.zIndex[20],\n    },\n  },\n});\n\nexport const mobileSidebarBackdropOpen = style({\n  '@media': {\n    [MOBILE_MEDIA_QUERY]: {\n      opacity: 1,\n      pointerEvents: 'auto',\n    },\n  },\n});\n\nexport const mobileSidebarToggle = sprinkles({\n  display: {\n    base: 'none',\n    max1023: 'inline-flex',\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 10,\n  height: 10,\n  borderRadius: 'lg',\n  borderStyle: 'solid',\n  borderWidth: 'default',\n  borderColor: 'border',\n  backgroundColor: 'surface',\n  color: 'text',\n  cursor: 'pointer',\n  flexShrink: 0,\n});\n\nexport const desktopSidebarToggle = style([\n  sprinkles({\n    display: {\n      base: 'inline-flex',\n      max1023: 'none',\n    },\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 10,\n    height: 10,\n    borderRadius: 'lg',\n    borderStyle: 'solid',\n    borderWidth: 'default',\n    borderColor: 'border',\n    backgroundColor: 'surface',\n    color: 'text',\n    cursor: 'pointer',\n    flexShrink: 0,\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        borderColor: vars.colors.primaryLight,\n        backgroundColor: vars.colors.surfaceMuted,\n        color: vars.colors.primary,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const mobileSidebarClose = sprinkles({\n  display: {\n    base: 'none',\n    max1023: 'inline-flex',\n  },\n  position: {\n    base: 'static',\n    max1023: 'absolute',\n  },\n  right: {\n    base: 0,\n    max1023: 3,\n  },\n  top: {\n    base: 0,\n    max1023: 3,\n  },\n  zIndex: 40,\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 10,\n  height: 10,\n  borderRadius: 'lg',\n  borderStyle: 'solid',\n  borderWidth: 'default',\n  borderColor: 'border',\n  backgroundColor: 'surface',\n  color: 'text',\n  cursor: 'pointer',\n});\n\nexport const mainColumn = sprinkles({\n  flex: 1,\n  height: 'full',\n  minWidth: 0,\n  minHeight: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  backgroundColor: 'surface',\n  overflow: 'hidden',\n  borderRadius: 'lg',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n  boxShadow: 'inkSoft',\n});\n\nexport const mainColumnWithSidePanel = sprinkles({\n  height: {\n    base: 'full',\n    max1023: 'auto',\n  },\n});\n\nexport const sidePanel = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  minHeight: 0,\n  height: {\n    base: 'full',\n    max1023: 'auto',\n  },\n});\n\nexport const sidePanelSurface = sprinkles({\n  flex: 'none',\n  backgroundColor: 'surface',\n  borderRadius: 'xl',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n});\n\nexport const sidePanelResizable = style({\n  minWidth: '360px',\n  maxWidth: '50vw',\n});\n\nexport const sidePanelResizer = style([\n  sprinkles({\n    alignSelf: 'stretch',\n    backgroundColor: 'transparent',\n    cursor: 'col-resize',\n    flex: 'none',\n    minWidth: 4,\n    position: 'relative',\n    width: 4,\n  }),\n  {\n    selectors: {\n      '&::after': {\n        content: '',\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        width: '4px',\n        height: '96px',\n        transform: 'translate(-50%, -50%)',\n        borderRadius: vars.borderRadius.full,\n        backgroundColor: vars.colors.border,\n        boxShadow: vars.boxShadow.sm,\n        transitionProperty: 'default',\n        transitionDuration: vars.transitionDuration[120],\n        transitionTimingFunction: vars.transitionTimingFunction.ease,\n      },\n      '&:hover::after, &[data-active=\"true\"]::after': {\n        backgroundColor: vars.colors.primary,\n        boxShadow: `0 0 0 1px ${vars.colors.primaryLight}`,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const sidePanelResizerHiddenOnMobile = sprinkles({\n  display: {\n    base: 'block',\n    max1023: 'none',\n  },\n});\n\nexport const header = sprinkles({\n  position: 'sticky',\n  top: 0,\n  zIndex: 10,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n  backgroundColor: 'surface',\n  borderWidth: 0,\n  borderStyle: 'solid',\n  borderBottomWidth: 'default',\n  borderBottomColor: 'borderSubtle',\n  paddingLeft: 5,\n  paddingRight: 5,\n  paddingBottom: 2,\n  paddingTop: 3,\n});\n\nexport const headerRow = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: 4,\n  width: 'full',\n});\n\nexport const headerLeading = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 3,\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const breadcrumbNav = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  minWidth: 0,\n});\n\nexport const breadcrumbList = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  columnGap: 2,\n  rowGap: 1,\n  listStyleType: 'none',\n  margin: 0,\n  padding: 0,\n  color: 'textSecondary',\n  fontSize: 'xs',\n});\n\nexport const breadcrumbItem = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 1,\n  maxWidth: '12rem',\n});\n\nexport const breadcrumbLink = style([\n  sprinkles({\n    color: 'text',\n    textDecoration: 'none',\n    fontWeight: 'medium',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        color: vars.colors['blue-600'],\n      },\n    },\n  },\n]);\n\nexport const breadcrumbCurrent = sprinkles({\n  color: 'text',\n  fontWeight: 'semibold',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n\nexport const breadcrumbSeparator = sprinkles({\n  color: 'borderLight',\n  fontSize: 'xs',\n});\n\nexport const actionGroup = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  justifyContent: 'flex-end',\n});\n\nexport const secondaryAction = sprinkles({\n  display: 'inline-flex',\n});\n\nexport const tabsRow = sprinkles({\n  width: 'full',\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n});\n\nconst tabBase = style([\n  sprinkles({\n    alignItems: 'center',\n    backgroundColor: 'surfaceMuted',\n    borderRadius: 'lg',\n    color: 'textSecondary',\n    display: 'inline-flex',\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    paddingBlock: 1.5,\n    paddingInline: 3,\n    textDecoration: 'none',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        color: vars.colors.text,\n      },\n    },\n  },\n]);\n\nexport const tabRecipe = recipe({\n  base: tabBase,\n  variants: {\n    state: {\n      default: {},\n      active: sprinkles({\n        backgroundColor: 'blue-500',\n        color: 'white',\n        boxShadow: 'sm',\n      }),\n    },\n    mode: {\n      link: {},\n      static: sprinkles({\n        cursor: 'default',\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n    mode: 'link',\n  },\n});\n\nexport const content = sprinkles({\n  flex: 1,\n  minHeight: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  overflow: 'auto',\n  padding: {\n    base: 4,\n    max1023: 3,\n  },\n});\n"],"mappings":""}
+{"version":3,"file":"PageShell.css.js","names":[],"sources":["../../../../src/components/layout/PageShell.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\nimport { recipe } from '@vanilla-extract/recipes';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nconst MOBILE_MEDIA_QUERY = 'screen and (max-width: 1023px)';\n\nexport const shell = sprinkles({\n  display: 'flex',\n  width: 'full',\n  backgroundColor: 'background',\n  backgroundImage: 'pageShellSurface',\n});\n\nexport const page = sprinkles({\n  paddingLeft: 2,\n  paddingRight: 2,\n  paddingTop: 2,\n  paddingBottom: 2,\n  height: {\n    base: 'screen',\n    max1023: 'auto',\n  },\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const pageContained = sprinkles({\n  height: 'screen',\n  minHeight: 0,\n  overflow: 'hidden',\n});\n\nexport const pageWithSidePanel = sprinkles({\n  display: 'flex',\n  alignItems: 'stretch',\n  gap: {\n    base: 0,\n    max1023: 3,\n  },\n  minWidth: 0,\n  flexDirection: {\n    base: 'row',\n    max1023: 'column',\n  },\n  height: {\n    base: 'full',\n    max1023: 'auto',\n  },\n});\n\nexport const sidebarColumn = sprinkles({\n  position: 'sticky',\n  top: 0,\n  height: 'screen',\n  flexShrink: 0,\n  display: 'flex',\n  overflow: 'hidden',\n});\n\nexport const sidebarColumnMobile = style({\n  '@media': {\n    [MOBILE_MEDIA_QUERY]: {\n      position: 'fixed',\n      top: 0,\n      left: 0,\n      bottom: 0,\n      width: '20rem',\n      maxWidth: '85vw',\n      transform: 'translateX(-100%)',\n      transitionProperty: 'transform',\n      transitionDuration: vars.transitionDuration[200],\n      transitionTimingFunction: vars.transitionTimingFunction.ease,\n      zIndex: vars.zIndex[30],\n      backgroundColor: vars.colors.surface,\n      borderRight: `1px solid ${vars.colors.borderSubtle}`,\n    },\n  },\n});\n\nexport const sidebarColumnMobileOpen = style({\n  '@media': {\n    [MOBILE_MEDIA_QUERY]: {\n      transform: 'translateX(0)',\n    },\n  },\n});\n\nexport const sidebarInner = style([\n  sprinkles({\n    display: 'flex',\n    height: 'full',\n  }),\n  {\n    '@media': {\n      [MOBILE_MEDIA_QUERY]: {\n        paddingTop: '3.75rem',\n      },\n    },\n  },\n]);\n\nexport const mobileSidebarBackdrop = style({\n  display: 'none',\n  '@media': {\n    [MOBILE_MEDIA_QUERY]: {\n      display: 'block',\n      position: 'fixed',\n      inset: 0,\n      backgroundColor: 'rgba(15, 23, 42, 0.32)',\n      opacity: 0,\n      pointerEvents: 'none',\n      transitionProperty: 'opacity',\n      transitionDuration: vars.transitionDuration[200],\n      transitionTimingFunction: vars.transitionTimingFunction.ease,\n      zIndex: vars.zIndex[20],\n    },\n  },\n});\n\nexport const mobileSidebarBackdropOpen = style({\n  '@media': {\n    [MOBILE_MEDIA_QUERY]: {\n      opacity: 1,\n      pointerEvents: 'auto',\n    },\n  },\n});\n\nexport const mobileSidebarToggle = sprinkles({\n  display: {\n    base: 'none',\n    max1023: 'inline-flex',\n  },\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 10,\n  height: 10,\n  borderRadius: 'lg',\n  borderStyle: 'solid',\n  borderWidth: 'default',\n  borderColor: 'border',\n  backgroundColor: 'surface',\n  color: 'text',\n  cursor: 'pointer',\n  flexShrink: 0,\n});\n\nexport const desktopSidebarToggle = style([\n  sprinkles({\n    display: {\n      base: 'inline-flex',\n      max1023: 'none',\n    },\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: 10,\n    height: 10,\n    borderRadius: 'lg',\n    borderStyle: 'solid',\n    borderWidth: 'default',\n    borderColor: 'border',\n    backgroundColor: 'surface',\n    color: 'text',\n    cursor: 'pointer',\n    flexShrink: 0,\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        borderColor: vars.colors.primaryLight,\n        backgroundColor: vars.colors.surfaceMuted,\n        color: vars.colors.primary,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const mobileSidebarClose = sprinkles({\n  display: {\n    base: 'none',\n    max1023: 'inline-flex',\n  },\n  position: {\n    base: 'static',\n    max1023: 'absolute',\n  },\n  right: {\n    base: 0,\n    max1023: 3,\n  },\n  top: {\n    base: 0,\n    max1023: 3,\n  },\n  zIndex: 40,\n  alignItems: 'center',\n  justifyContent: 'center',\n  width: 10,\n  height: 10,\n  borderRadius: 'lg',\n  borderStyle: 'solid',\n  borderWidth: 'default',\n  borderColor: 'border',\n  backgroundColor: 'surface',\n  color: 'text',\n  cursor: 'pointer',\n});\n\nexport const mainColumn = sprinkles({\n  flex: 1,\n  height: 'full',\n  minWidth: 0,\n  minHeight: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  backgroundColor: 'surface',\n  overflow: 'hidden',\n  borderRadius: 'lg',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n  boxShadow: 'inkSoft',\n});\n\nexport const mainColumnContained = sprinkles({\n  minHeight: 0,\n  overflow: 'hidden',\n});\n\nexport const mainColumnWithSidePanel = sprinkles({\n  height: {\n    base: 'full',\n    max1023: 'auto',\n  },\n});\n\nexport const sidePanel = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  minHeight: 0,\n  height: {\n    base: 'full',\n    max1023: 'auto',\n  },\n});\n\nexport const sidePanelSurface = sprinkles({\n  flex: 'none',\n  backgroundColor: 'surface',\n  borderRadius: 'xl',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'borderSubtle',\n});\n\nexport const sidePanelResizable = style({\n  minWidth: '360px',\n  maxWidth: '50vw',\n});\n\nexport const sidePanelResizer = style([\n  sprinkles({\n    alignSelf: 'stretch',\n    backgroundColor: 'transparent',\n    cursor: 'col-resize',\n    flex: 'none',\n    minWidth: 4,\n    position: 'relative',\n    width: 4,\n  }),\n  {\n    selectors: {\n      '&::after': {\n        content: '',\n        position: 'absolute',\n        top: '50%',\n        left: '50%',\n        width: '4px',\n        height: '96px',\n        transform: 'translate(-50%, -50%)',\n        borderRadius: vars.borderRadius.full,\n        backgroundColor: vars.colors.border,\n        boxShadow: vars.boxShadow.sm,\n        transitionProperty: 'default',\n        transitionDuration: vars.transitionDuration[120],\n        transitionTimingFunction: vars.transitionTimingFunction.ease,\n      },\n      '&:hover::after, &[data-active=\"true\"]::after': {\n        backgroundColor: vars.colors.primary,\n        boxShadow: `0 0 0 1px ${vars.colors.primaryLight}`,\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors.primary}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const sidePanelResizerHiddenOnMobile = sprinkles({\n  display: {\n    base: 'block',\n    max1023: 'none',\n  },\n});\n\nexport const header = sprinkles({\n  position: 'sticky',\n  top: 0,\n  zIndex: 10,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 3,\n  backgroundColor: 'surface',\n  borderWidth: 0,\n  borderStyle: 'solid',\n  borderBottomWidth: 'default',\n  borderBottomColor: 'borderSubtle',\n  paddingLeft: 5,\n  paddingRight: 5,\n  paddingBottom: 2,\n  paddingTop: 3,\n});\n\nexport const headerRow = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: 4,\n  width: 'full',\n});\n\nexport const headerLeading = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 3,\n  flex: 1,\n  minWidth: 0,\n});\n\nexport const breadcrumbNav = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n  minWidth: 0,\n});\n\nexport const breadcrumbList = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'center',\n  columnGap: 2,\n  rowGap: 1,\n  listStyleType: 'none',\n  margin: 0,\n  padding: 0,\n  color: 'textSecondary',\n  fontSize: 'xs',\n});\n\nexport const breadcrumbItem = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 1,\n  maxWidth: '12rem',\n});\n\nexport const breadcrumbLink = style([\n  sprinkles({\n    color: 'text',\n    textDecoration: 'none',\n    fontWeight: 'medium',\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        color: vars.colors['blue-600'],\n      },\n    },\n  },\n]);\n\nexport const breadcrumbCurrent = sprinkles({\n  color: 'text',\n  fontWeight: 'semibold',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n});\n\nexport const breadcrumbSeparator = sprinkles({\n  color: 'borderLight',\n  fontSize: 'xs',\n});\n\nexport const actionGroup = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n  justifyContent: 'flex-end',\n});\n\nexport const secondaryAction = sprinkles({\n  display: 'inline-flex',\n});\n\nexport const tabsRow = sprinkles({\n  width: 'full',\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n});\n\nconst tabBase = style([\n  sprinkles({\n    alignItems: 'center',\n    backgroundColor: 'surfaceMuted',\n    borderRadius: 'lg',\n    color: 'textSecondary',\n    display: 'inline-flex',\n    fontSize: 'sm',\n    fontWeight: 'medium',\n    paddingBlock: 1.5,\n    paddingInline: 3,\n    textDecoration: 'none',\n    transitionProperty: 'default',\n    transitionDuration: 150,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        color: vars.colors.text,\n      },\n    },\n  },\n]);\n\nexport const tabRecipe = recipe({\n  base: tabBase,\n  variants: {\n    state: {\n      default: {},\n      active: sprinkles({\n        backgroundColor: 'blue-500',\n        color: 'white',\n        boxShadow: 'sm',\n      }),\n    },\n    mode: {\n      link: {},\n      static: sprinkles({\n        cursor: 'default',\n      }),\n    },\n  },\n  defaultVariants: {\n    state: 'default',\n    mode: 'link',\n  },\n});\n\nexport const content = sprinkles({\n  flex: 1,\n  minHeight: 0,\n  display: 'flex',\n  flexDirection: 'column',\n  overflow: 'auto',\n  padding: {\n    base: 4,\n    max1023: 3,\n  },\n});\n\nexport const contentContained = sprinkles({\n  overflow: 'hidden',\n  minHeight: 0,\n});\n"],"mappings":""}

package/lib/esm/components/layout/PageShell.js

@@ -1,13 +1,13 @@
 import { cx as e } from "../../theme/tools.js";
 import { useUiTranslation as t } from "../../i18n/useUiTranslation.js";
 import { ModalCloseSvg as n } from "../../icons/ModalCloseSvg.js";
-import { actionGroup as r, breadcrumbCurrent as i, breadcrumbItem as a, breadcrumbLink as o, breadcrumbList as s, breadcrumbNav as c, breadcrumbSeparator as ee, content as te, header as ne, headerLeading as re, headerRow as ie, mainColumn as ae, mainColumnWithSidePanel as oe, mobileSidebarBackdrop as se, mobileSidebarBackdropOpen as ce, page as le, pageWithSidePanel as ue, secondaryAction as l, shell as de, sidePanel as fe, sidePanelResizable as pe, sidePanelResizer as me, sidePanelResizerHiddenOnMobile as he, sidePanelSurface as ge, tabRecipe as _e, tabsRow as ve } from "./PageShell.css.js";
+import { actionGroup as r, breadcrumbCurrent as i, breadcrumbItem as a, breadcrumbLink as o, breadcrumbList as s, breadcrumbNav as c, breadcrumbSeparator as ee, content as te, contentContained as ne, header as re, headerLeading as ie, headerRow as ae, mainColumn as oe, mainColumnContained as se, mainColumnWithSidePanel as ce, mobileSidebarBackdrop as le, mobileSidebarBackdropOpen as ue, page as de, pageContained as fe, pageWithSidePanel as pe, secondaryAction as l, shell as me, sidePanel as he, sidePanelResizable as ge, sidePanelResizer as _e, sidePanelResizerHiddenOnMobile as ve, sidePanelSurface as ye, tabRecipe as be, tabsRow as xe } from "./PageShell.css.js";
 import { MenuSvg as u } from "../../icons/MenuSvg.js";
 import { useCallback as d, useEffect as f, useRef as p, useState as m } from "react";
 import { jsx as h, jsxs as g } from "react/jsx-runtime";
 import _ from "@plumile/router/routing/Link.js";
 //#region src/components/layout/PageShell.tsx
-var ye = 520, v = 360, y = .5, b = 480, be = 1024, x = "plumile:page-shell:side-panel-width", xe = "a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", S = () => {
+var Se = 520, v = 360, y = .5, b = 480, Ce = 1024, x = "plumile:page-shell:side-panel-width", we = "a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])", S = () => {
 	if (typeof window > "u") return null;
 	try {
 		let e = window.localStorage.getItem(x);
@@ -24,28 +24,30 @@ var ye = 520, v = 360, y = .5, b = 480, be = 1024, x = "plumile:page-shell:side-
 }, w = (e) => {
 	let t = e;
 	return typeof window < "u" && (t = window.innerWidth), t * y;
-}, T = (e, t) => typeof e.isActive == "boolean" ? e.isActive : e.href != null && t != null ? t === e.href : !1, E = ({ actions: y, breadcrumb: x, breadcrumbSlot: E, children: D, contentClassName: Se, desktopSidebarOpen: O = !0, mobileSidebar: Ce, onOpenDesktopSidebar: we, openDesktopSidebarLabel: Te, sidebar: k, sidePanel: A, tabs: j }) => {
-	let { t: M } = t(), N = A != null, P = p(null), F = p(null), I = p(null), L = p(null), R = p(null), z = p(null), [B, V] = m(() => S() ?? ye), H = p(B), [Ee, U] = m(!1), [W, De] = m(!1), [G, K] = m(!1), q = d(() => {
-		K(!1);
-	}, []), Oe = d(() => {
+}, T = (e, t) => typeof e.isActive == "boolean" ? e.isActive : e.href != null && t != null ? t === e.href : !1, E = ({ actions: y, breadcrumb: x, breadcrumbSlot: E, children: D, contentClassName: Te, contentScrollMode: Ee = "page", desktopSidebarOpen: O = !0, mobileSidebar: De, onOpenDesktopSidebar: Oe, openDesktopSidebarLabel: ke, sidebar: k, sidePanel: A, tabs: j }) => {
+	let { t: M } = t(), N = A != null, P = Ee === "contained", F = null;
+	P && (F = ne);
+	let I = p(null), L = p(null), R = p(null), z = p(null), B = p(null), V = p(null), [H, U] = m(() => S() ?? Se), W = p(H), [Ae, G] = m(!1), [K, je] = m(!1), [q, J] = m(!1), Y = d(() => {
+		J(!1);
+	}, []), Me = d(() => {
 		if (typeof document < "u") {
 			let { activeElement: e } = document;
-			e instanceof HTMLElement && (R.current = e);
+			e instanceof HTMLElement && (B.current = e);
 		}
-		K(!0);
-	}, []), J = d((e) => {
-		let t = P.current;
+		J(!0);
+	}, []), X = d((e) => {
+		let t = I.current;
 		if (t == null) return;
 		let { width: n } = t.getBoundingClientRect(), r = Math.max(0, Math.min(w(n), n - b)), i = Math.min(v, r);
 		r <= 0 && (i = 0);
 		let a = Math.max(i, Math.min(e, Math.max(i, r)));
-		H.current = a, V(a);
-	}, []), Y = d((e) => {
-		if (typeof window > "u" || !N || W) return;
-		let t = P.current;
+		W.current = a, U(a);
+	}, []), Z = d((e) => {
+		if (typeof window > "u" || !N || K) return;
+		let t = I.current;
 		if (t == null) return;
-		let n = t.getBoundingClientRect(), r = B;
-		U(!0);
+		let n = t.getBoundingClientRect(), r = H;
+		G(!0);
 		let i = (t) => {
 			let i = 0;
 			if ("touches" in t) {
@@ -56,54 +58,54 @@ var ye = 520, v = 360, y = .5, b = 480, be = 1024, x = "plumile:page-shell:side-
 			let a = r + (e - i), o = Math.max(0, Math.min(w(n.width), n.width - b)), s = Math.min(v, o);
 			o <= 0 && (s = 0);
 			let c = Math.max(s, Math.min(a, Math.max(s, o)));
-			H.current = c, V(c);
+			W.current = c, U(c);
 		}, a = () => {
-			U(!1), C(H.current);
-			let e = z.current;
-			e?.move != null && (window.removeEventListener("mousemove", e.move), window.removeEventListener("touchmove", e.move)), e?.up != null && (window.removeEventListener("mouseup", e.up), window.removeEventListener("touchend", e.up), window.removeEventListener("touchcancel", e.up)), z.current = null;
+			G(!1), C(W.current);
+			let e = V.current;
+			e?.move != null && (window.removeEventListener("mousemove", e.move), window.removeEventListener("touchmove", e.move)), e?.up != null && (window.removeEventListener("mouseup", e.up), window.removeEventListener("touchend", e.up), window.removeEventListener("touchcancel", e.up)), V.current = null;
 		};
-		z.current = {
+		V.current = {
 			move: i,
 			up: a
 		}, window.addEventListener("mousemove", i), window.addEventListener("touchmove", i, { passive: !1 }), window.addEventListener("mouseup", a), window.addEventListener("touchend", a), window.addEventListener("touchcancel", a);
 	}, [
 		N,
-		W,
-		B
+		K,
+		H
 	]);
 	f(() => {
-		H.current = B;
-	}, [B]), f(() => {
+		W.current = H;
+	}, [H]), f(() => {
 		if (typeof window > "u") return () => {};
-		let e = window.matchMedia(`(max-width: ${be - 1}px)`), t = () => {
-			De(e.matches);
+		let e = window.matchMedia(`(max-width: ${Ce - 1}px)`), t = () => {
+			je(e.matches);
 		};
 		return t(), e.addEventListener("change", t), () => {
 			e.removeEventListener("change", t);
 		};
 	}, []), f(() => {
-		N && J(B);
+		N && X(H);
 	}, [
 		N,
-		B,
-		J
+		H,
+		X
 	]), f(() => {
-		!W && G && q();
+		!K && q && Y();
 	}, [
+		Y,
 		q,
-		G,
-		W
+		K
 	]), f(() => {
-		if (!G) return () => {};
+		if (!q) return () => {};
 		let e = (e) => {
 			if (e.key === "Escape") {
-				q();
+				Y();
 				return;
 			}
 			if (e.key !== "Tab") return;
-			let t = F.current;
+			let t = L.current;
 			if (t == null) return;
-			let n = Array.from(t.querySelectorAll(xe)).filter((e) => e.offsetParent != null || e === document.activeElement), r = n[0], i = n[n.length - 1];
+			let n = Array.from(t.querySelectorAll(we)).filter((e) => e.offsetParent != null || e === document.activeElement), r = n[0], i = n[n.length - 1];
 			if (r == null || i == null) {
 				e.preventDefault();
 				return;
@@ -113,19 +115,19 @@ var ye = 520, v = 360, y = .5, b = 480, be = 1024, x = "plumile:page-shell:side-
 				return;
 			}
 			!e.shiftKey && document.activeElement === i && (e.preventDefault(), r.focus());
-		}, t = I.current;
-		return L.current?.focus(), window.addEventListener("keydown", e), () => {
+		}, t = R.current;
+		return z.current?.focus(), window.addEventListener("keydown", e), () => {
 			window.removeEventListener("keydown", e);
-			let n = R.current;
-			n != null && document.contains(n) ? n.focus() : t?.focus(), R.current = null;
+			let n = B.current;
+			n != null && document.contains(n) ? n.focus() : t?.focus(), B.current = null;
 		};
-	}, [q, G]), f(() => () => {
-		let e = z.current;
+	}, [Y, q]), f(() => () => {
+		let e = V.current;
 		e?.move != null && (window.removeEventListener("mousemove", e.move), window.removeEventListener("touchmove", e.move)), e?.up != null && (window.removeEventListener("mouseup", e.up), window.removeEventListener("touchend", e.up), window.removeEventListener("touchcancel", e.up));
 	}, []);
-	let X;
-	typeof window < "u" && (X = window.location.pathname);
-	let ke = () => {
+	let Q;
+	typeof window < "u" && (Q = window.location.pathname);
+	let Ne = () => {
 		if (E != null) return /* @__PURE__ */ h("div", {
 			className: c,
 			children: E
@@ -163,7 +165,7 @@ var ye = 520, v = 360, y = .5, b = 480, be = 1024, x = "plumile:page-shell:side-
 				children: e
 			})
 		});
-	}, Ae = () => {
+	}, Pe = () => {
 		if (y == null || y.main == null && (y.secondary ?? []).length === 0) return null;
 		let e = y.secondary ?? [], t = null;
 		return y.main != null && (t = /* @__PURE__ */ h("div", {
@@ -176,14 +178,14 @@ var ye = 520, v = 360, y = .5, b = 480, be = 1024, x = "plumile:page-shell:side-
 				children: e
 			}, `secondary-${t}`)), t]
 		});
-	}, je = () => j == null || j.length === 0 ? null : /* @__PURE__ */ h("div", {
-		className: ve,
+	}, Fe = () => j == null || j.length === 0 ? null : /* @__PURE__ */ h("div", {
+		className: xe,
 		children: j.map((e) => {
-			let t = T(e, X), n = "default";
+			let t = T(e, Q), n = "default";
 			t && (n = "active");
 			let r = "link";
 			e.href ?? (r = "static");
-			let i = _e({
+			let i = be({
 				state: n,
 				mode: r
 			}), a = e.id, o;
@@ -198,75 +200,75 @@ var ye = 520, v = 360, y = .5, b = 480, be = 1024, x = "plumile:page-shell:side-
 				children: e.label
 			}, a);
 		})
-	}), Me = d((e) => {
-		if (!W && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
+	}), Ie = d((e) => {
+		if (!K && (e.key === "ArrowLeft" || e.key === "ArrowRight")) {
 			e.preventDefault();
 			let t = 16;
-			e.key === "ArrowRight" && (t = -16), J(B + t), C(H.current);
+			e.key === "ArrowRight" && (t = -16), X(H + t), C(W.current);
 		}
 	}, [
-		J,
-		W,
-		B
-	]), Z = null;
+		X,
+		K,
+		H
+	]), Le = null;
 	if (N) {
-		let t = [fe, ge], n;
-		W || (t.push(pe), n = { width: `${B}px` }), Z = /* @__PURE__ */ h("aside", {
+		let t = [he, ye], n;
+		K || (t.push(ge), n = { width: `${H}px` }), Le = /* @__PURE__ */ h("aside", {
 			className: e(...t),
 			style: n,
 			children: A
 		});
 	}
-	let Q = null;
+	let Re = null;
 	if (N) {
 		let t = "false";
-		Ee && (t = "true");
-		let n = v, r = Math.max(v, B), i = P.current;
+		Ae && (t = "true");
+		let n = v, r = Math.max(v, H), i = I.current;
 		if (i != null) {
 			let { width: e } = i.getBoundingClientRect(), t = Math.max(0, Math.min(w(e), e - b));
 			n = Math.min(v, t), t <= 0 && (n = 0), r = Math.max(n, t);
 		}
-		Q = /* @__PURE__ */ h("div", {
-			className: e(me, he),
+		Re = /* @__PURE__ */ h("div", {
+			className: e(_e, ve),
 			role: "separator",
 			"aria-orientation": "vertical",
 			"aria-label": M("layout.pageShell.resizeSidePanel"),
 			"aria-valuemin": Math.round(n),
 			"aria-valuemax": Math.round(r),
-			"aria-valuenow": Math.round(B),
+			"aria-valuenow": Math.round(H),
 			tabIndex: 0,
 			"data-active": t,
 			onMouseDown: (e) => {
-				e.preventDefault(), Y(e.clientX);
+				e.preventDefault(), Z(e.clientX);
 			},
 			onTouchStart: (e) => {
 				let t = e.touches[0];
-				t != null && Y(t.clientX);
+				t != null && Z(t.clientX);
 			},
-			onKeyDown: Me
+			onKeyDown: Ie
 		});
 	}
-	let Ne = k;
-	W && (Ne = Ce ?? k);
-	let Pe = O || W, $ = Te;
+	let ze = k;
+	K && (ze = De ?? k);
+	let Be = O || K, $ = ke;
 	return $ ??= M("navigation.pageShell.openNavigation"), /* @__PURE__ */ g("div", {
-		className: de,
+		className: me,
 		children: [
 			/* @__PURE__ */ h("div", {
-				className: e(se, { [ce]: W && G }),
+				className: e(le, { [ue]: K && q }),
 				"aria-hidden": "true",
-				onClick: q
+				onClick: Y
 			}),
-			Pe && /* @__PURE__ */ g("div", {
-				ref: F,
-				className: e("_1kley2d3 txvbqbpty txvbqbt7y txvbqbcx7 txvbqbaj7 txvbqb9ip txvbqbl7g", "_1kley2d4", { _1kley2d5: W && G }),
-				"aria-hidden": W && !G,
-				inert: W && !G,
+			Be && /* @__PURE__ */ g("div", {
+				ref: L,
+				className: e("_1kley2d4 txvbqbpty txvbqbt7y txvbqbcx7 txvbqbaj7 txvbqb9ip txvbqbl7g", "_1kley2d5", { _1kley2d6: K && q }),
+				"aria-hidden": K && !q,
+				inert: K && !q,
 				children: [/* @__PURE__ */ h("button", {
-					ref: L,
+					ref: z,
 					type: "button",
-					className: "_1kley2dd txvbqb9hy txvbqb9jn txvbqbpu7 txvbqbpte txvbqbpug txvbqbpve txvbqbt7y txvbqbt8w txvbqbuwg txvbqbcp txvbqbdoy txvbqbtyp txvbqbc7p txvbqb1rp txvbqb1qg txvbqb1cp txvbqbwg txvbqbv41 txvbqbv9z txvbqbv",
-					onClick: q,
+					className: "_1kley2de txvbqb9hy txvbqb9jn txvbqbpu7 txvbqbpte txvbqbpug txvbqbpve txvbqbt7y txvbqbt8w txvbqbuwg txvbqbcp txvbqbdoy txvbqbtyp txvbqbc7p txvbqb1rp txvbqb1qg txvbqb1cp txvbqbwg txvbqbv41 txvbqbv9z txvbqbv",
+					onClick: Y,
 					"aria-label": M("navigation.pageShell.closeNavigation"),
 					children: /* @__PURE__ */ h(n, {
 						width: 18,
@@ -274,29 +276,35 @@ var ye = 520, v = 360, y = .5, b = 480, be = 1024, x = "plumile:page-shell:side-
 						"aria-hidden": "true"
 					})
 				}), /* @__PURE__ */ h("div", {
-					className: "_1kley2d7 _1kley2d6 txvbqb9ip txvbqbcgg",
-					children: Ne
+					className: "_1kley2d8 _1kley2d7 txvbqb9ip txvbqbcgg",
+					children: ze
 				})]
 			}),
 			/* @__PURE__ */ g("div", {
-				ref: P,
-				className: e(le, { [ue]: N }),
-				"aria-hidden": W && G,
-				inert: W && G,
+				ref: I,
+				className: e(de, {
+					[pe]: N,
+					[fe]: P
+				}),
+				"aria-hidden": K && q,
+				inert: K && q,
 				children: [
 					/* @__PURE__ */ g("div", {
-						className: e(ae, { [oe]: N }),
+						className: e(oe, {
+							[ce]: N,
+							[se]: P
+						}),
 						children: [/* @__PURE__ */ g("div", {
-							className: ne,
+							className: re,
 							children: [/* @__PURE__ */ g("div", {
-								className: ie,
+								className: ae,
 								children: [/* @__PURE__ */ g("div", {
-									className: re,
+									className: ie,
 									children: [
-										!W && !O && /* @__PURE__ */ h("button", {
+										!K && !O && /* @__PURE__ */ h("button", {
 											type: "button",
-											className: "_1kley2dc _1kley2db txvbqb9jg txvbqb9i5 txvbqbcp txvbqbdoy txvbqbtyp txvbqbc7p txvbqb1rp txvbqb1qg txvbqb1cp txvbqbwg txvbqbv41 txvbqbv9z txvbqbv txvbqbaj7 txvbqb77 txvbqb6x txvbqb7k",
-											onClick: we,
+											className: "_1kley2dd _1kley2dc txvbqb9jg txvbqb9i5 txvbqbcp txvbqbdoy txvbqbtyp txvbqbc7p txvbqb1rp txvbqb1qg txvbqb1cp txvbqbwg txvbqbv41 txvbqbv9z txvbqbv txvbqbaj7 txvbqb77 txvbqb6x txvbqb7k",
+											onClick: Oe,
 											"aria-label": $,
 											title: $,
 											children: /* @__PURE__ */ h(u, {
@@ -305,12 +313,12 @@ var ye = 520, v = 360, y = .5, b = 480, be = 1024, x = "plumile:page-shell:side-
 												"aria-hidden": "true"
 											})
 										}),
-										W && /* @__PURE__ */ h("button", {
-											ref: I,
+										K && /* @__PURE__ */ h("button", {
+											ref: R,
 											type: "button",
-											className: "_1kley2da txvbqb9hy txvbqb9jn txvbqbcp txvbqbdoy txvbqbtyp txvbqbc7p txvbqb1rp txvbqb1qg txvbqb1cp txvbqbwg txvbqbv41 txvbqbv9z txvbqbv txvbqbaj7",
-											onClick: Oe,
-											"aria-expanded": G,
+											className: "_1kley2db txvbqb9hy txvbqb9jn txvbqbcp txvbqbdoy txvbqbtyp txvbqbc7p txvbqb1rp txvbqb1qg txvbqb1cp txvbqbwg txvbqbv41 txvbqbv9z txvbqbv txvbqbaj7",
+											onClick: Me,
+											"aria-expanded": q,
 											"aria-label": M("navigation.pageShell.openNavigation"),
 											children: /* @__PURE__ */ h(u, {
 												width: 18,
@@ -318,17 +326,17 @@ var ye = 520, v = 360, y = .5, b = 480, be = 1024, x = "plumile:page-shell:side-
 												"aria-hidden": "true"
 											})
 										}),
-										ke()
+										Ne()
 									]
-								}), Ae()]
-							}), je()]
+								}), Pe()]
+							}), Fe()]
 						}), /* @__PURE__ */ h("div", {
-							className: e(te, Se),
+							className: e(te, F, Te),
 							children: D
 						})]
 					}),
-					Q,
-					Z
+					Re,
+					Le
 				]
 			})
 		]

package/lib/esm/components/layout/PageShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageShell.js","names":[],"sources":["../../../../src/components/layout/PageShell.tsx"],"sourcesContent":["import Link from '@plumile/router/routing/Link.js';\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type JSX,\n  type ReactNode,\n  type KeyboardEvent,\n  type CSSProperties,\n} from 'react';\n\nimport * as styles from './PageShell.css.js';\nimport { MenuSvg } from '../../icons/MenuSvg.js';\nimport { ModalCloseSvg } from '../../icons/ModalCloseSvg.js';\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\n\nexport type BreadcrumbItem = {\n  label: ReactNode;\n  href?: string;\n};\n\nexport type PageShellTab = {\n  id: string;\n  label: ReactNode;\n  href?: string;\n  isActive?: boolean;\n};\n\nexport type PageShellActions = {\n  main?: ReactNode;\n  secondary?: ReactNode[];\n};\n\nconst DEFAULT_SIDE_PANEL_WIDTH = 520;\nconst MIN_SIDE_PANEL_WIDTH = 360;\nconst MAX_SIDE_PANEL_RATIO = 0.5;\nconst MIN_MAIN_WIDTH = 480;\nconst SPLIT_BREAKPOINT = 1024;\nconst SIDE_PANEL_WIDTH_STORAGE_KEY = 'plumile:page-shell:side-panel-width';\nconst FOCUSABLE_SELECTOR =\n  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nconst readStoredSidePanelWidth = (): number | null => {\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  try {\n    const stored = window.localStorage.getItem(SIDE_PANEL_WIDTH_STORAGE_KEY);\n    if (stored == null) {\n      return null;\n    }\n    const parsed = Number(stored);\n    if (!Number.isFinite(parsed) || parsed <= 0) {\n      return null;\n    }\n    return parsed;\n  } catch {\n    return null;\n  }\n};\n\nconst persistSidePanelWidth = (width: number): void => {\n  if (typeof window === 'undefined') {\n    return;\n  }\n\n  try {\n    window.localStorage.setItem(SIDE_PANEL_WIDTH_STORAGE_KEY, String(width));\n  } catch {\n    // ignore quota / permission errors\n  }\n};\n\nconst resolveMaxSidePanelWidth = (containerWidth: number): number => {\n  let viewWidth = containerWidth;\n  if (typeof window !== 'undefined') {\n    viewWidth = window.innerWidth;\n  }\n  return viewWidth * MAX_SIDE_PANEL_RATIO;\n};\n\ntype ResizeMoveHandler = (event: MouseEvent | TouchEvent) => void;\ntype ResizeUpHandler = () => void;\ntype ActiveResizeHandlers = {\n  move?: ResizeMoveHandler | null;\n  up?: ResizeUpHandler | null;\n};\n\ntype Props = {\n  sidebar: ReactNode;\n  mobileSidebar?: ReactNode;\n  desktopSidebarOpen?: boolean;\n  onOpenDesktopSidebar?: () => void;\n  openDesktopSidebarLabel?: string;\n  children: ReactNode;\n  breadcrumb?: BreadcrumbItem[];\n  breadcrumbSlot?: ReactNode;\n  tabs?: PageShellTab[];\n  actions?: PageShellActions;\n  sidePanel?: ReactNode;\n  contentClassName?: string;\n};\n\nconst resolveIsActive = (tab: PageShellTab, pathname?: string): boolean => {\n  if (typeof tab.isActive === 'boolean') {\n    return tab.isActive;\n  }\n\n  if (tab.href != null && pathname != null) {\n    return pathname === tab.href;\n  }\n\n  return false;\n};\n\nexport const PageShell = ({\n  actions,\n  breadcrumb,\n  breadcrumbSlot,\n  children,\n  contentClassName,\n  desktopSidebarOpen = true,\n  mobileSidebar,\n  onOpenDesktopSidebar,\n  openDesktopSidebarLabel,\n  sidebar,\n  sidePanel,\n  tabs,\n}: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  const hasSidePanel = sidePanel != null;\n  const pageRef = useRef<HTMLDivElement | null>(null);\n  const mobileSidebarRef = useRef<HTMLDivElement | null>(null);\n  const mobileSidebarToggleRef = useRef<HTMLButtonElement | null>(null);\n  const mobileSidebarCloseRef = useRef<HTMLButtonElement | null>(null);\n  const mobileSidebarPreviousFocusRef = useRef<HTMLElement | null>(null);\n  const activeResizeHandlersRef = useRef<ActiveResizeHandlers | null>(null);\n  const [sidePanelWidth, setSidePanelWidth] = useState(() => {\n    const stored = readStoredSidePanelWidth();\n    return stored ?? DEFAULT_SIDE_PANEL_WIDTH;\n  });\n  const sidePanelWidthSnapshotRef = useRef(sidePanelWidth);\n  const [isResizingPanel, setIsResizingPanel] = useState(false);\n  const [isStackedLayout, setIsStackedLayout] = useState(false);\n  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);\n\n  const closeMobileSidebar = useCallback(() => {\n    setIsMobileSidebarOpen(false);\n  }, []);\n\n  const openMobileSidebar = useCallback(() => {\n    if (typeof document !== 'undefined') {\n      const { activeElement } = document;\n      if (activeElement instanceof HTMLElement) {\n        mobileSidebarPreviousFocusRef.current = activeElement;\n      }\n    }\n    setIsMobileSidebarOpen(true);\n  }, []);\n\n  const clampSidePanelWidth = useCallback((candidateWidth: number): void => {\n    const container = pageRef.current;\n    if (container == null) {\n      return;\n    }\n\n    const { width } = container.getBoundingClientRect();\n    const maxWidth = Math.max(\n      0,\n      Math.min(resolveMaxSidePanelWidth(width), width - MIN_MAIN_WIDTH),\n    );\n    const minWidth = Math.min(MIN_SIDE_PANEL_WIDTH, maxWidth);\n    let safeMin = minWidth;\n    if (maxWidth <= 0) {\n      safeMin = 0;\n    }\n    const safeMax = Math.max(safeMin, maxWidth);\n    const clampedWidth = Math.max(safeMin, Math.min(candidateWidth, safeMax));\n    sidePanelWidthSnapshotRef.current = clampedWidth;\n    setSidePanelWidth(clampedWidth);\n  }, []);\n\n  const startResizing = useCallback(\n    (startClientX: number): void => {\n      if (typeof window === 'undefined') {\n        return;\n      }\n\n      if (!hasSidePanel || isStackedLayout) {\n        return;\n      }\n\n      const container = pageRef.current;\n      if (container == null) {\n        return;\n      }\n\n      const rect = container.getBoundingClientRect();\n      const currentWidth = sidePanelWidth;\n      setIsResizingPanel(true);\n\n      const moveHandler: ResizeMoveHandler = (event) => {\n        let clientX = 0;\n        if ('touches' in event) {\n          const touch = event.touches[0];\n          if (touch == null) {\n            return;\n          }\n          clientX = touch.clientX;\n        } else {\n          clientX = event.clientX;\n        }\n\n        const deltaX = startClientX - clientX;\n        const nextWidth = currentWidth + deltaX;\n\n        const maxWidth = Math.max(\n          0,\n          Math.min(\n            resolveMaxSidePanelWidth(rect.width),\n            rect.width - MIN_MAIN_WIDTH,\n          ),\n        );\n        const minWidth = Math.min(MIN_SIDE_PANEL_WIDTH, maxWidth);\n        let safeMin = minWidth;\n        if (maxWidth <= 0) {\n          safeMin = 0;\n        }\n        const safeMax = Math.max(safeMin, maxWidth);\n\n        const clampedWidth = Math.max(safeMin, Math.min(nextWidth, safeMax));\n        sidePanelWidthSnapshotRef.current = clampedWidth;\n        setSidePanelWidth(clampedWidth);\n      };\n\n      const upHandler: ResizeUpHandler = () => {\n        setIsResizingPanel(false);\n        persistSidePanelWidth(sidePanelWidthSnapshotRef.current);\n        const handlers = activeResizeHandlersRef.current;\n        if (handlers?.move != null) {\n          window.removeEventListener('mousemove', handlers.move);\n          window.removeEventListener('touchmove', handlers.move);\n        }\n        if (handlers?.up != null) {\n          window.removeEventListener('mouseup', handlers.up);\n          window.removeEventListener('touchend', handlers.up);\n          window.removeEventListener('touchcancel', handlers.up);\n        }\n        activeResizeHandlersRef.current = null;\n      };\n\n      activeResizeHandlersRef.current = { move: moveHandler, up: upHandler };\n\n      window.addEventListener('mousemove', moveHandler);\n      window.addEventListener('touchmove', moveHandler, { passive: false });\n      window.addEventListener('mouseup', upHandler);\n      window.addEventListener('touchend', upHandler);\n      window.addEventListener('touchcancel', upHandler);\n    },\n    [hasSidePanel, isStackedLayout, sidePanelWidth],\n  );\n\n  useEffect(() => {\n    sidePanelWidthSnapshotRef.current = sidePanelWidth;\n  }, [sidePanelWidth]);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return () => {};\n    }\n    const mediaQuery = window.matchMedia(\n      `(max-width: ${SPLIT_BREAKPOINT - 1}px)`,\n    );\n    const handleMediaChange = () => {\n      setIsStackedLayout(mediaQuery.matches);\n    };\n\n    handleMediaChange();\n    mediaQuery.addEventListener('change', handleMediaChange);\n\n    return () => {\n      mediaQuery.removeEventListener('change', handleMediaChange);\n    };\n  }, []);\n\n  useEffect(() => {\n    if (hasSidePanel) {\n      clampSidePanelWidth(sidePanelWidth);\n    }\n  }, [hasSidePanel, sidePanelWidth, clampSidePanelWidth]);\n\n  useEffect(() => {\n    if (!isStackedLayout && isMobileSidebarOpen) {\n      closeMobileSidebar();\n    }\n  }, [closeMobileSidebar, isMobileSidebarOpen, isStackedLayout]);\n\n  useEffect(() => {\n    if (!isMobileSidebarOpen) {\n      return () => {};\n    }\n\n    const handleEscape = (event: globalThis.KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        closeMobileSidebar();\n        return;\n      }\n\n      if (event.key !== 'Tab') {\n        return;\n      }\n\n      const sidebarElement = mobileSidebarRef.current;\n      if (sidebarElement == null) {\n        return;\n      }\n\n      const focusableElements = Array.from(\n        sidebarElement.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n      ).filter((element) => {\n        return (\n          element.offsetParent != null || element === document.activeElement\n        );\n      });\n\n      const firstElement = focusableElements[0];\n      const lastElement = focusableElements[focusableElements.length - 1];\n\n      if (firstElement == null || lastElement == null) {\n        event.preventDefault();\n        return;\n      }\n\n      if (event.shiftKey && document.activeElement === firstElement) {\n        event.preventDefault();\n        lastElement.focus();\n        return;\n      }\n\n      if (!event.shiftKey && document.activeElement === lastElement) {\n        event.preventDefault();\n        firstElement.focus();\n      }\n    };\n\n    const fallbackFocusElement = mobileSidebarToggleRef.current;\n    mobileSidebarCloseRef.current?.focus();\n\n    window.addEventListener('keydown', handleEscape);\n    return () => {\n      window.removeEventListener('keydown', handleEscape);\n      const previousFocus = mobileSidebarPreviousFocusRef.current;\n      if (previousFocus != null && document.contains(previousFocus)) {\n        previousFocus.focus();\n      } else {\n        fallbackFocusElement?.focus();\n      }\n      mobileSidebarPreviousFocusRef.current = null;\n    };\n  }, [closeMobileSidebar, isMobileSidebarOpen]);\n\n  useEffect(() => {\n    return () => {\n      const handlers = activeResizeHandlersRef.current;\n      if (handlers?.move != null) {\n        window.removeEventListener('mousemove', handlers.move);\n        window.removeEventListener('touchmove', handlers.move);\n      }\n      if (handlers?.up != null) {\n        window.removeEventListener('mouseup', handlers.up);\n        window.removeEventListener('touchend', handlers.up);\n        window.removeEventListener('touchcancel', handlers.up);\n      }\n    };\n  }, []);\n\n  let currentPath: string | undefined;\n  if (typeof window !== 'undefined') {\n    currentPath = window.location.pathname;\n  }\n\n  const renderBreadcrumb = (): JSX.Element | null => {\n    if (breadcrumbSlot != null) {\n      return <div className={styles.breadcrumbNav}>{breadcrumbSlot}</div>;\n    }\n\n    if (breadcrumb == null || breadcrumb.length === 0) {\n      return null;\n    }\n\n    const items = breadcrumb.flatMap((item, index) => {\n      const isLast = index === breadcrumb.length - 1;\n      const key = `${item.href ?? 'crumb'}-${index}`;\n      let content: JSX.Element;\n      if (item.href != null && !isLast) {\n        content = (\n          <Link to={item.href} className={styles.breadcrumbLink}>\n            {item.label}\n          </Link>\n        );\n      } else {\n        let breadcrumbClass = styles.breadcrumbLink;\n        if (isLast) {\n          breadcrumbClass = styles.breadcrumbCurrent;\n        }\n        content = <span className={breadcrumbClass}>{item.label}</span>;\n      }\n\n      const renderedItem = (\n        <li key={key} className={styles.breadcrumbItem}>\n          {content}\n        </li>\n      );\n\n      if (isLast) {\n        return [renderedItem];\n      }\n\n      return [\n        renderedItem,\n        <li\n          key={`${key}-sep`}\n          className={styles.breadcrumbSeparator}\n          aria-hidden=\"true\"\n        >\n          /\n        </li>,\n      ];\n    });\n\n    return (\n      <nav\n        className={styles.breadcrumbNav}\n        aria-label={t('navigation.breadcrumb')}\n      >\n        <ol className={styles.breadcrumbList}>{items}</ol>\n      </nav>\n    );\n  };\n\n  const renderActions = (): JSX.Element | null => {\n    if (\n      actions == null ||\n      (actions.main == null && (actions.secondary ?? []).length === 0)\n    ) {\n      return null;\n    }\n\n    const secondaryNodes = actions.secondary ?? [];\n\n    let mainActionNode: JSX.Element | null = null;\n    if (actions.main != null) {\n      mainActionNode = (\n        <div className={styles.secondaryAction}>{actions.main}</div>\n      );\n    }\n\n    return (\n      <div className={styles.actionGroup}>\n        {secondaryNodes.map((node, index) => {\n          return (\n            <div key={`secondary-${index}`} className={styles.secondaryAction}>\n              {node}\n            </div>\n          );\n        })}\n        {mainActionNode}\n      </div>\n    );\n  };\n\n  const renderTabs = (): JSX.Element | null => {\n    if (tabs == null || tabs.length === 0) {\n      return null;\n    }\n\n    return (\n      <div className={styles.tabsRow}>\n        {tabs.map((tab) => {\n          const isActive = resolveIsActive(tab, currentPath);\n          let tabState: 'default' | 'active' = 'default';\n          if (isActive) {\n            tabState = 'active';\n          }\n          let tabMode: 'static' | 'link' = 'link';\n          if (tab.href == null) {\n            tabMode = 'static';\n          }\n          const className = styles.tabRecipe({\n            state: tabState,\n            mode: tabMode,\n          });\n          const key = tab.id;\n          let ariaCurrent: 'page' | undefined;\n          if (isActive) {\n            ariaCurrent = 'page';\n          }\n\n          if (tab.href != null) {\n            return (\n              <Link\n                key={key}\n                to={tab.href}\n                className={className}\n                aria-current={ariaCurrent}\n              >\n                {tab.label}\n              </Link>\n            );\n          }\n\n          return (\n            <span key={key} className={className} aria-current={ariaCurrent}>\n              {tab.label}\n            </span>\n          );\n        })}\n      </div>\n    );\n  };\n\n  const handleResizerKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (isStackedLayout) {\n        return;\n      }\n      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n        event.preventDefault();\n        let delta = 16;\n        if (event.key === 'ArrowRight') {\n          delta = -16;\n        }\n        clampSidePanelWidth(sidePanelWidth + delta);\n        persistSidePanelWidth(sidePanelWidthSnapshotRef.current);\n      }\n    },\n    [clampSidePanelWidth, isStackedLayout, sidePanelWidth],\n  );\n\n  let sidePanelNode: JSX.Element | null = null;\n  if (hasSidePanel) {\n    const sidePanelClasses = [styles.sidePanel, styles.sidePanelSurface];\n    let sidePanelStyle: CSSProperties | undefined;\n    if (!isStackedLayout) {\n      sidePanelClasses.push(styles.sidePanelResizable);\n      sidePanelStyle = {\n        width: `${sidePanelWidth}px`,\n      };\n    }\n    sidePanelNode = (\n      <aside className={cx(...sidePanelClasses)} style={sidePanelStyle}>\n        {sidePanel}\n      </aside>\n    );\n  }\n\n  let resizerNode: JSX.Element | null = null;\n  if (hasSidePanel) {\n    let resizerActive = 'false';\n    if (isResizingPanel) {\n      resizerActive = 'true';\n    }\n    let resizerMin = MIN_SIDE_PANEL_WIDTH;\n    let resizerMax = Math.max(MIN_SIDE_PANEL_WIDTH, sidePanelWidth);\n    const pageElement = pageRef.current;\n    if (pageElement != null) {\n      const { width } = pageElement.getBoundingClientRect();\n      const maxWidth = Math.max(\n        0,\n        Math.min(resolveMaxSidePanelWidth(width), width - MIN_MAIN_WIDTH),\n      );\n      resizerMin = Math.min(MIN_SIDE_PANEL_WIDTH, maxWidth);\n      if (maxWidth <= 0) {\n        resizerMin = 0;\n      }\n      resizerMax = Math.max(resizerMin, maxWidth);\n    }\n    resizerNode = (\n      <div\n        className={cx(\n          styles.sidePanelResizer,\n          styles.sidePanelResizerHiddenOnMobile,\n        )}\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        aria-label={t('layout.pageShell.resizeSidePanel')}\n        aria-valuemin={Math.round(resizerMin)}\n        aria-valuemax={Math.round(resizerMax)}\n        aria-valuenow={Math.round(sidePanelWidth)}\n        tabIndex={0}\n        data-active={resizerActive}\n        onMouseDown={(event) => {\n          event.preventDefault();\n          startResizing(event.clientX);\n        }}\n        onTouchStart={(event) => {\n          const touch = event.touches[0];\n          if (touch != null) {\n            startResizing(touch.clientX);\n          }\n        }}\n        onKeyDown={handleResizerKeyDown}\n      />\n    );\n  }\n\n  let sidebarContent = sidebar;\n  if (isStackedLayout) {\n    sidebarContent = mobileSidebar ?? sidebar;\n  }\n  const shouldRenderDesktopSidebar = desktopSidebarOpen || isStackedLayout;\n  let resolvedOpenDesktopSidebarLabel = openDesktopSidebarLabel;\n  resolvedOpenDesktopSidebarLabel ??= t('navigation.pageShell.openNavigation');\n\n  return (\n    <div className={styles.shell}>\n      <div\n        className={cx(styles.mobileSidebarBackdrop, {\n          [styles.mobileSidebarBackdropOpen]:\n            isStackedLayout && isMobileSidebarOpen,\n        })}\n        aria-hidden=\"true\"\n        onClick={closeMobileSidebar}\n      />\n      {shouldRenderDesktopSidebar && (\n        <div\n          ref={mobileSidebarRef}\n          className={cx(styles.sidebarColumn, styles.sidebarColumnMobile, {\n            [styles.sidebarColumnMobileOpen]:\n              isStackedLayout && isMobileSidebarOpen,\n          })}\n          aria-hidden={isStackedLayout && !isMobileSidebarOpen}\n          inert={isStackedLayout && !isMobileSidebarOpen}\n        >\n          <button\n            ref={mobileSidebarCloseRef}\n            type=\"button\"\n            className={styles.mobileSidebarClose}\n            onClick={closeMobileSidebar}\n            aria-label={t('navigation.pageShell.closeNavigation')}\n          >\n            <ModalCloseSvg width={18} height={18} aria-hidden=\"true\" />\n          </button>\n          <div className={styles.sidebarInner}>{sidebarContent}</div>\n        </div>\n      )}\n      <div\n        ref={pageRef}\n        className={cx(styles.page, {\n          [styles.pageWithSidePanel]: hasSidePanel,\n        })}\n        aria-hidden={isStackedLayout && isMobileSidebarOpen}\n        inert={isStackedLayout && isMobileSidebarOpen}\n      >\n        <div\n          className={cx(styles.mainColumn, {\n            [styles.mainColumnWithSidePanel]: hasSidePanel,\n          })}\n        >\n          <div className={styles.header}>\n            <div className={styles.headerRow}>\n              <div className={styles.headerLeading}>\n                {!isStackedLayout && !desktopSidebarOpen && (\n                  <button\n                    type=\"button\"\n                    className={styles.desktopSidebarToggle}\n                    onClick={onOpenDesktopSidebar}\n                    aria-label={resolvedOpenDesktopSidebarLabel}\n                    title={resolvedOpenDesktopSidebarLabel}\n                  >\n                    <MenuSvg width={18} height={18} aria-hidden=\"true\" />\n                  </button>\n                )}\n                {isStackedLayout && (\n                  <button\n                    ref={mobileSidebarToggleRef}\n                    type=\"button\"\n                    className={styles.mobileSidebarToggle}\n                    onClick={openMobileSidebar}\n                    aria-expanded={isMobileSidebarOpen}\n                    aria-label={t('navigation.pageShell.openNavigation')}\n                  >\n                    <MenuSvg width={18} height={18} aria-hidden=\"true\" />\n                  </button>\n                )}\n                {renderBreadcrumb()}\n              </div>\n              {renderActions()}\n            </div>\n            {renderTabs()}\n          </div>\n          <div className={cx(styles.content, contentClassName)}>{children}</div>\n        </div>\n        {resizerNode}\n        {sidePanelNode}\n      </div>\n    </div>\n  );\n};\n\nexport const __test = {\n  readStoredSidePanelWidth,\n  resolveMaxSidePanelWidth,\n  resolveIsActive,\n} as const;\n"],"mappings":"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"}
+{"version":3,"file":"PageShell.js","names":[],"sources":["../../../../src/components/layout/PageShell.tsx"],"sourcesContent":["import Link from '@plumile/router/routing/Link.js';\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type JSX,\n  type ReactNode,\n  type KeyboardEvent,\n  type CSSProperties,\n} from 'react';\n\nimport * as styles from './PageShell.css.js';\nimport { MenuSvg } from '../../icons/MenuSvg.js';\nimport { ModalCloseSvg } from '../../icons/ModalCloseSvg.js';\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\n\nexport type BreadcrumbItem = {\n  label: ReactNode;\n  href?: string;\n};\n\nexport type PageShellTab = {\n  id: string;\n  label: ReactNode;\n  href?: string;\n  isActive?: boolean;\n};\n\nexport type PageShellActions = {\n  main?: ReactNode;\n  secondary?: ReactNode[];\n};\n\nexport type PageShellContentScrollMode = 'page' | 'contained';\n\nconst DEFAULT_SIDE_PANEL_WIDTH = 520;\nconst MIN_SIDE_PANEL_WIDTH = 360;\nconst MAX_SIDE_PANEL_RATIO = 0.5;\nconst MIN_MAIN_WIDTH = 480;\nconst SPLIT_BREAKPOINT = 1024;\nconst SIDE_PANEL_WIDTH_STORAGE_KEY = 'plumile:page-shell:side-panel-width';\nconst FOCUSABLE_SELECTOR =\n  'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n\nconst readStoredSidePanelWidth = (): number | null => {\n  if (typeof window === 'undefined') {\n    return null;\n  }\n\n  try {\n    const stored = window.localStorage.getItem(SIDE_PANEL_WIDTH_STORAGE_KEY);\n    if (stored == null) {\n      return null;\n    }\n    const parsed = Number(stored);\n    if (!Number.isFinite(parsed) || parsed <= 0) {\n      return null;\n    }\n    return parsed;\n  } catch {\n    return null;\n  }\n};\n\nconst persistSidePanelWidth = (width: number): void => {\n  if (typeof window === 'undefined') {\n    return;\n  }\n\n  try {\n    window.localStorage.setItem(SIDE_PANEL_WIDTH_STORAGE_KEY, String(width));\n  } catch {\n    // ignore quota / permission errors\n  }\n};\n\nconst resolveMaxSidePanelWidth = (containerWidth: number): number => {\n  let viewWidth = containerWidth;\n  if (typeof window !== 'undefined') {\n    viewWidth = window.innerWidth;\n  }\n  return viewWidth * MAX_SIDE_PANEL_RATIO;\n};\n\ntype ResizeMoveHandler = (event: MouseEvent | TouchEvent) => void;\ntype ResizeUpHandler = () => void;\ntype ActiveResizeHandlers = {\n  move?: ResizeMoveHandler | null;\n  up?: ResizeUpHandler | null;\n};\n\ntype Props = {\n  sidebar: ReactNode;\n  mobileSidebar?: ReactNode;\n  desktopSidebarOpen?: boolean;\n  onOpenDesktopSidebar?: () => void;\n  openDesktopSidebarLabel?: string;\n  children: ReactNode;\n  breadcrumb?: BreadcrumbItem[];\n  breadcrumbSlot?: ReactNode;\n  tabs?: PageShellTab[];\n  actions?: PageShellActions;\n  sidePanel?: ReactNode;\n  contentClassName?: string;\n  contentScrollMode?: PageShellContentScrollMode;\n};\n\nconst resolveIsActive = (tab: PageShellTab, pathname?: string): boolean => {\n  if (typeof tab.isActive === 'boolean') {\n    return tab.isActive;\n  }\n\n  if (tab.href != null && pathname != null) {\n    return pathname === tab.href;\n  }\n\n  return false;\n};\n\nexport const PageShell = ({\n  actions,\n  breadcrumb,\n  breadcrumbSlot,\n  children,\n  contentClassName,\n  contentScrollMode = 'page',\n  desktopSidebarOpen = true,\n  mobileSidebar,\n  onOpenDesktopSidebar,\n  openDesktopSidebarLabel,\n  sidebar,\n  sidePanel,\n  tabs,\n}: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  const hasSidePanel = sidePanel != null;\n  const isContainedScroll = contentScrollMode === 'contained';\n  let containedContentClassName: string | null = null;\n  if (isContainedScroll) {\n    containedContentClassName = styles.contentContained;\n  }\n  const pageRef = useRef<HTMLDivElement | null>(null);\n  const mobileSidebarRef = useRef<HTMLDivElement | null>(null);\n  const mobileSidebarToggleRef = useRef<HTMLButtonElement | null>(null);\n  const mobileSidebarCloseRef = useRef<HTMLButtonElement | null>(null);\n  const mobileSidebarPreviousFocusRef = useRef<HTMLElement | null>(null);\n  const activeResizeHandlersRef = useRef<ActiveResizeHandlers | null>(null);\n  const [sidePanelWidth, setSidePanelWidth] = useState(() => {\n    const stored = readStoredSidePanelWidth();\n    return stored ?? DEFAULT_SIDE_PANEL_WIDTH;\n  });\n  const sidePanelWidthSnapshotRef = useRef(sidePanelWidth);\n  const [isResizingPanel, setIsResizingPanel] = useState(false);\n  const [isStackedLayout, setIsStackedLayout] = useState(false);\n  const [isMobileSidebarOpen, setIsMobileSidebarOpen] = useState(false);\n\n  const closeMobileSidebar = useCallback(() => {\n    setIsMobileSidebarOpen(false);\n  }, []);\n\n  const openMobileSidebar = useCallback(() => {\n    if (typeof document !== 'undefined') {\n      const { activeElement } = document;\n      if (activeElement instanceof HTMLElement) {\n        mobileSidebarPreviousFocusRef.current = activeElement;\n      }\n    }\n    setIsMobileSidebarOpen(true);\n  }, []);\n\n  const clampSidePanelWidth = useCallback((candidateWidth: number): void => {\n    const container = pageRef.current;\n    if (container == null) {\n      return;\n    }\n\n    const { width } = container.getBoundingClientRect();\n    const maxWidth = Math.max(\n      0,\n      Math.min(resolveMaxSidePanelWidth(width), width - MIN_MAIN_WIDTH),\n    );\n    const minWidth = Math.min(MIN_SIDE_PANEL_WIDTH, maxWidth);\n    let safeMin = minWidth;\n    if (maxWidth <= 0) {\n      safeMin = 0;\n    }\n    const safeMax = Math.max(safeMin, maxWidth);\n    const clampedWidth = Math.max(safeMin, Math.min(candidateWidth, safeMax));\n    sidePanelWidthSnapshotRef.current = clampedWidth;\n    setSidePanelWidth(clampedWidth);\n  }, []);\n\n  const startResizing = useCallback(\n    (startClientX: number): void => {\n      if (typeof window === 'undefined') {\n        return;\n      }\n\n      if (!hasSidePanel || isStackedLayout) {\n        return;\n      }\n\n      const container = pageRef.current;\n      if (container == null) {\n        return;\n      }\n\n      const rect = container.getBoundingClientRect();\n      const currentWidth = sidePanelWidth;\n      setIsResizingPanel(true);\n\n      const moveHandler: ResizeMoveHandler = (event) => {\n        let clientX = 0;\n        if ('touches' in event) {\n          const touch = event.touches[0];\n          if (touch == null) {\n            return;\n          }\n          clientX = touch.clientX;\n        } else {\n          clientX = event.clientX;\n        }\n\n        const deltaX = startClientX - clientX;\n        const nextWidth = currentWidth + deltaX;\n\n        const maxWidth = Math.max(\n          0,\n          Math.min(\n            resolveMaxSidePanelWidth(rect.width),\n            rect.width - MIN_MAIN_WIDTH,\n          ),\n        );\n        const minWidth = Math.min(MIN_SIDE_PANEL_WIDTH, maxWidth);\n        let safeMin = minWidth;\n        if (maxWidth <= 0) {\n          safeMin = 0;\n        }\n        const safeMax = Math.max(safeMin, maxWidth);\n\n        const clampedWidth = Math.max(safeMin, Math.min(nextWidth, safeMax));\n        sidePanelWidthSnapshotRef.current = clampedWidth;\n        setSidePanelWidth(clampedWidth);\n      };\n\n      const upHandler: ResizeUpHandler = () => {\n        setIsResizingPanel(false);\n        persistSidePanelWidth(sidePanelWidthSnapshotRef.current);\n        const handlers = activeResizeHandlersRef.current;\n        if (handlers?.move != null) {\n          window.removeEventListener('mousemove', handlers.move);\n          window.removeEventListener('touchmove', handlers.move);\n        }\n        if (handlers?.up != null) {\n          window.removeEventListener('mouseup', handlers.up);\n          window.removeEventListener('touchend', handlers.up);\n          window.removeEventListener('touchcancel', handlers.up);\n        }\n        activeResizeHandlersRef.current = null;\n      };\n\n      activeResizeHandlersRef.current = { move: moveHandler, up: upHandler };\n\n      window.addEventListener('mousemove', moveHandler);\n      window.addEventListener('touchmove', moveHandler, { passive: false });\n      window.addEventListener('mouseup', upHandler);\n      window.addEventListener('touchend', upHandler);\n      window.addEventListener('touchcancel', upHandler);\n    },\n    [hasSidePanel, isStackedLayout, sidePanelWidth],\n  );\n\n  useEffect(() => {\n    sidePanelWidthSnapshotRef.current = sidePanelWidth;\n  }, [sidePanelWidth]);\n\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return () => {};\n    }\n    const mediaQuery = window.matchMedia(\n      `(max-width: ${SPLIT_BREAKPOINT - 1}px)`,\n    );\n    const handleMediaChange = () => {\n      setIsStackedLayout(mediaQuery.matches);\n    };\n\n    handleMediaChange();\n    mediaQuery.addEventListener('change', handleMediaChange);\n\n    return () => {\n      mediaQuery.removeEventListener('change', handleMediaChange);\n    };\n  }, []);\n\n  useEffect(() => {\n    if (hasSidePanel) {\n      clampSidePanelWidth(sidePanelWidth);\n    }\n  }, [hasSidePanel, sidePanelWidth, clampSidePanelWidth]);\n\n  useEffect(() => {\n    if (!isStackedLayout && isMobileSidebarOpen) {\n      closeMobileSidebar();\n    }\n  }, [closeMobileSidebar, isMobileSidebarOpen, isStackedLayout]);\n\n  useEffect(() => {\n    if (!isMobileSidebarOpen) {\n      return () => {};\n    }\n\n    const handleEscape = (event: globalThis.KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        closeMobileSidebar();\n        return;\n      }\n\n      if (event.key !== 'Tab') {\n        return;\n      }\n\n      const sidebarElement = mobileSidebarRef.current;\n      if (sidebarElement == null) {\n        return;\n      }\n\n      const focusableElements = Array.from(\n        sidebarElement.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n      ).filter((element) => {\n        return (\n          element.offsetParent != null || element === document.activeElement\n        );\n      });\n\n      const firstElement = focusableElements[0];\n      const lastElement = focusableElements[focusableElements.length - 1];\n\n      if (firstElement == null || lastElement == null) {\n        event.preventDefault();\n        return;\n      }\n\n      if (event.shiftKey && document.activeElement === firstElement) {\n        event.preventDefault();\n        lastElement.focus();\n        return;\n      }\n\n      if (!event.shiftKey && document.activeElement === lastElement) {\n        event.preventDefault();\n        firstElement.focus();\n      }\n    };\n\n    const fallbackFocusElement = mobileSidebarToggleRef.current;\n    mobileSidebarCloseRef.current?.focus();\n\n    window.addEventListener('keydown', handleEscape);\n    return () => {\n      window.removeEventListener('keydown', handleEscape);\n      const previousFocus = mobileSidebarPreviousFocusRef.current;\n      if (previousFocus != null && document.contains(previousFocus)) {\n        previousFocus.focus();\n      } else {\n        fallbackFocusElement?.focus();\n      }\n      mobileSidebarPreviousFocusRef.current = null;\n    };\n  }, [closeMobileSidebar, isMobileSidebarOpen]);\n\n  useEffect(() => {\n    return () => {\n      const handlers = activeResizeHandlersRef.current;\n      if (handlers?.move != null) {\n        window.removeEventListener('mousemove', handlers.move);\n        window.removeEventListener('touchmove', handlers.move);\n      }\n      if (handlers?.up != null) {\n        window.removeEventListener('mouseup', handlers.up);\n        window.removeEventListener('touchend', handlers.up);\n        window.removeEventListener('touchcancel', handlers.up);\n      }\n    };\n  }, []);\n\n  let currentPath: string | undefined;\n  if (typeof window !== 'undefined') {\n    currentPath = window.location.pathname;\n  }\n\n  const renderBreadcrumb = (): JSX.Element | null => {\n    if (breadcrumbSlot != null) {\n      return <div className={styles.breadcrumbNav}>{breadcrumbSlot}</div>;\n    }\n\n    if (breadcrumb == null || breadcrumb.length === 0) {\n      return null;\n    }\n\n    const items = breadcrumb.flatMap((item, index) => {\n      const isLast = index === breadcrumb.length - 1;\n      const key = `${item.href ?? 'crumb'}-${index}`;\n      let content: JSX.Element;\n      if (item.href != null && !isLast) {\n        content = (\n          <Link to={item.href} className={styles.breadcrumbLink}>\n            {item.label}\n          </Link>\n        );\n      } else {\n        let breadcrumbClass = styles.breadcrumbLink;\n        if (isLast) {\n          breadcrumbClass = styles.breadcrumbCurrent;\n        }\n        content = <span className={breadcrumbClass}>{item.label}</span>;\n      }\n\n      const renderedItem = (\n        <li key={key} className={styles.breadcrumbItem}>\n          {content}\n        </li>\n      );\n\n      if (isLast) {\n        return [renderedItem];\n      }\n\n      return [\n        renderedItem,\n        <li\n          key={`${key}-sep`}\n          className={styles.breadcrumbSeparator}\n          aria-hidden=\"true\"\n        >\n          /\n        </li>,\n      ];\n    });\n\n    return (\n      <nav\n        className={styles.breadcrumbNav}\n        aria-label={t('navigation.breadcrumb')}\n      >\n        <ol className={styles.breadcrumbList}>{items}</ol>\n      </nav>\n    );\n  };\n\n  const renderActions = (): JSX.Element | null => {\n    if (\n      actions == null ||\n      (actions.main == null && (actions.secondary ?? []).length === 0)\n    ) {\n      return null;\n    }\n\n    const secondaryNodes = actions.secondary ?? [];\n\n    let mainActionNode: JSX.Element | null = null;\n    if (actions.main != null) {\n      mainActionNode = (\n        <div className={styles.secondaryAction}>{actions.main}</div>\n      );\n    }\n\n    return (\n      <div className={styles.actionGroup}>\n        {secondaryNodes.map((node, index) => {\n          return (\n            <div key={`secondary-${index}`} className={styles.secondaryAction}>\n              {node}\n            </div>\n          );\n        })}\n        {mainActionNode}\n      </div>\n    );\n  };\n\n  const renderTabs = (): JSX.Element | null => {\n    if (tabs == null || tabs.length === 0) {\n      return null;\n    }\n\n    return (\n      <div className={styles.tabsRow}>\n        {tabs.map((tab) => {\n          const isActive = resolveIsActive(tab, currentPath);\n          let tabState: 'default' | 'active' = 'default';\n          if (isActive) {\n            tabState = 'active';\n          }\n          let tabMode: 'static' | 'link' = 'link';\n          if (tab.href == null) {\n            tabMode = 'static';\n          }\n          const className = styles.tabRecipe({\n            state: tabState,\n            mode: tabMode,\n          });\n          const key = tab.id;\n          let ariaCurrent: 'page' | undefined;\n          if (isActive) {\n            ariaCurrent = 'page';\n          }\n\n          if (tab.href != null) {\n            return (\n              <Link\n                key={key}\n                to={tab.href}\n                className={className}\n                aria-current={ariaCurrent}\n              >\n                {tab.label}\n              </Link>\n            );\n          }\n\n          return (\n            <span key={key} className={className} aria-current={ariaCurrent}>\n              {tab.label}\n            </span>\n          );\n        })}\n      </div>\n    );\n  };\n\n  const handleResizerKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLDivElement>) => {\n      if (isStackedLayout) {\n        return;\n      }\n      if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {\n        event.preventDefault();\n        let delta = 16;\n        if (event.key === 'ArrowRight') {\n          delta = -16;\n        }\n        clampSidePanelWidth(sidePanelWidth + delta);\n        persistSidePanelWidth(sidePanelWidthSnapshotRef.current);\n      }\n    },\n    [clampSidePanelWidth, isStackedLayout, sidePanelWidth],\n  );\n\n  let sidePanelNode: JSX.Element | null = null;\n  if (hasSidePanel) {\n    const sidePanelClasses = [styles.sidePanel, styles.sidePanelSurface];\n    let sidePanelStyle: CSSProperties | undefined;\n    if (!isStackedLayout) {\n      sidePanelClasses.push(styles.sidePanelResizable);\n      sidePanelStyle = {\n        width: `${sidePanelWidth}px`,\n      };\n    }\n    sidePanelNode = (\n      <aside className={cx(...sidePanelClasses)} style={sidePanelStyle}>\n        {sidePanel}\n      </aside>\n    );\n  }\n\n  let resizerNode: JSX.Element | null = null;\n  if (hasSidePanel) {\n    let resizerActive = 'false';\n    if (isResizingPanel) {\n      resizerActive = 'true';\n    }\n    let resizerMin = MIN_SIDE_PANEL_WIDTH;\n    let resizerMax = Math.max(MIN_SIDE_PANEL_WIDTH, sidePanelWidth);\n    const pageElement = pageRef.current;\n    if (pageElement != null) {\n      const { width } = pageElement.getBoundingClientRect();\n      const maxWidth = Math.max(\n        0,\n        Math.min(resolveMaxSidePanelWidth(width), width - MIN_MAIN_WIDTH),\n      );\n      resizerMin = Math.min(MIN_SIDE_PANEL_WIDTH, maxWidth);\n      if (maxWidth <= 0) {\n        resizerMin = 0;\n      }\n      resizerMax = Math.max(resizerMin, maxWidth);\n    }\n    resizerNode = (\n      <div\n        className={cx(\n          styles.sidePanelResizer,\n          styles.sidePanelResizerHiddenOnMobile,\n        )}\n        role=\"separator\"\n        aria-orientation=\"vertical\"\n        aria-label={t('layout.pageShell.resizeSidePanel')}\n        aria-valuemin={Math.round(resizerMin)}\n        aria-valuemax={Math.round(resizerMax)}\n        aria-valuenow={Math.round(sidePanelWidth)}\n        tabIndex={0}\n        data-active={resizerActive}\n        onMouseDown={(event) => {\n          event.preventDefault();\n          startResizing(event.clientX);\n        }}\n        onTouchStart={(event) => {\n          const touch = event.touches[0];\n          if (touch != null) {\n            startResizing(touch.clientX);\n          }\n        }}\n        onKeyDown={handleResizerKeyDown}\n      />\n    );\n  }\n\n  let sidebarContent = sidebar;\n  if (isStackedLayout) {\n    sidebarContent = mobileSidebar ?? sidebar;\n  }\n  const shouldRenderDesktopSidebar = desktopSidebarOpen || isStackedLayout;\n  let resolvedOpenDesktopSidebarLabel = openDesktopSidebarLabel;\n  resolvedOpenDesktopSidebarLabel ??= t('navigation.pageShell.openNavigation');\n\n  return (\n    <div className={styles.shell}>\n      <div\n        className={cx(styles.mobileSidebarBackdrop, {\n          [styles.mobileSidebarBackdropOpen]:\n            isStackedLayout && isMobileSidebarOpen,\n        })}\n        aria-hidden=\"true\"\n        onClick={closeMobileSidebar}\n      />\n      {shouldRenderDesktopSidebar && (\n        <div\n          ref={mobileSidebarRef}\n          className={cx(styles.sidebarColumn, styles.sidebarColumnMobile, {\n            [styles.sidebarColumnMobileOpen]:\n              isStackedLayout && isMobileSidebarOpen,\n          })}\n          aria-hidden={isStackedLayout && !isMobileSidebarOpen}\n          inert={isStackedLayout && !isMobileSidebarOpen}\n        >\n          <button\n            ref={mobileSidebarCloseRef}\n            type=\"button\"\n            className={styles.mobileSidebarClose}\n            onClick={closeMobileSidebar}\n            aria-label={t('navigation.pageShell.closeNavigation')}\n          >\n            <ModalCloseSvg width={18} height={18} aria-hidden=\"true\" />\n          </button>\n          <div className={styles.sidebarInner}>{sidebarContent}</div>\n        </div>\n      )}\n      <div\n        ref={pageRef}\n        className={cx(styles.page, {\n          [styles.pageWithSidePanel]: hasSidePanel,\n          [styles.pageContained]: isContainedScroll,\n        })}\n        aria-hidden={isStackedLayout && isMobileSidebarOpen}\n        inert={isStackedLayout && isMobileSidebarOpen}\n      >\n        <div\n          className={cx(styles.mainColumn, {\n            [styles.mainColumnWithSidePanel]: hasSidePanel,\n            [styles.mainColumnContained]: isContainedScroll,\n          })}\n        >\n          <div className={styles.header}>\n            <div className={styles.headerRow}>\n              <div className={styles.headerLeading}>\n                {!isStackedLayout && !desktopSidebarOpen && (\n                  <button\n                    type=\"button\"\n                    className={styles.desktopSidebarToggle}\n                    onClick={onOpenDesktopSidebar}\n                    aria-label={resolvedOpenDesktopSidebarLabel}\n                    title={resolvedOpenDesktopSidebarLabel}\n                  >\n                    <MenuSvg width={18} height={18} aria-hidden=\"true\" />\n                  </button>\n                )}\n                {isStackedLayout && (\n                  <button\n                    ref={mobileSidebarToggleRef}\n                    type=\"button\"\n                    className={styles.mobileSidebarToggle}\n                    onClick={openMobileSidebar}\n                    aria-expanded={isMobileSidebarOpen}\n                    aria-label={t('navigation.pageShell.openNavigation')}\n                  >\n                    <MenuSvg width={18} height={18} aria-hidden=\"true\" />\n                  </button>\n                )}\n                {renderBreadcrumb()}\n              </div>\n              {renderActions()}\n            </div>\n            {renderTabs()}\n          </div>\n          <div\n            className={cx(\n              styles.content,\n              containedContentClassName,\n              contentClassName,\n            )}\n          >\n            {children}\n          </div>\n        </div>\n        {resizerNode}\n        {sidePanelNode}\n      </div>\n    </div>\n  );\n};\n\nexport const __test = {\n  readStoredSidePanelWidth,\n  resolveMaxSidePanelWidth,\n  resolveIsActive,\n} as const;\n"],"mappings":";;;;;;;;;AAqCA,IAAM,KAA2B,KAC3B,IAAuB,KACvB,IAAuB,IACvB,IAAiB,KACjB,KAAmB,MACnB,IAA+B,uCAC/B,KACJ,+IAEI,UAAgD;CACpD,IAAI,OAAO,SAAW,KACpB,OAAO;CAGT,IAAI;EACF,IAAM,IAAS,OAAO,aAAa,QAAQ,EAA6B;EACxE,IAAI,KAAU,MACZ,OAAO;EAET,IAAM,IAAS,OAAO,EAAO;EAI7B,OAHI,CAAC,OAAO,SAAS,EAAO,IAAI,KAAU,IACjC,OAEF;SACD;EACN,OAAO;;GAIL,KAAyB,MAAwB;CACjD,aAAO,SAAW,MAItB,IAAI;EACF,OAAO,aAAa,QAAQ,GAA8B,OAAO,EAAM,CAAC;SAClE;GAKJ,KAA4B,MAAmC;CACnE,IAAI,IAAY;CAIhB,OAHI,OAAO,SAAW,QACpB,IAAY,OAAO,aAEd,IAAY;GA0Bf,KAAmB,GAAmB,MACtC,OAAO,EAAI,YAAa,YACnB,EAAI,WAGT,EAAI,QAAQ,QAAQ,KAAY,OAC3B,MAAa,EAAI,OAGnB,IAGI,KAAa,EACxB,YACA,eACA,mBACA,aACA,sBACA,wBAAoB,QACpB,wBAAqB,IACrB,mBACA,0BACA,6BACA,YACA,WAAA,GACA,cACwB;CACxB,IAAM,EAAE,SAAM,GAAkB,EAC1B,IAAe,KAAa,MAC5B,IAAoB,OAAsB,aAC5C,IAA2C;CAC/C,AAAI,MACF,IAA4B;CAE9B,IAAM,IAAU,EAA8B,KAAK,EAC7C,IAAmB,EAA8B,KAAK,EACtD,IAAyB,EAAiC,KAAK,EAC/D,IAAwB,EAAiC,KAAK,EAC9D,IAAgC,EAA2B,KAAK,EAChE,IAA0B,EAAoC,KAAK,EACnE,CAAC,GAAgB,KAAqB,QAC3B,GACR,IAAU,GACjB,EACI,IAA4B,EAAO,EAAe,EAClD,CAAC,IAAiB,KAAsB,EAAS,GAAM,EACvD,CAAC,GAAiB,MAAsB,EAAS,GAAM,EACvD,CAAC,GAAqB,KAA0B,EAAS,GAAM,EAE/D,IAAqB,QAAkB;EAC3C,EAAuB,GAAM;IAC5B,EAAE,CAAC,EAEA,KAAoB,QAAkB;EAC1C,IAAI,OAAO,WAAa,KAAa;GACnC,IAAM,EAAE,qBAAkB;GAC1B,AAAI,aAAyB,gBAC3B,EAA8B,UAAU;;EAG5C,EAAuB,GAAK;IAC3B,EAAE,CAAC,EAEA,IAAsB,GAAa,MAAiC;EACxE,IAAM,IAAY,EAAQ;EAC1B,IAAI,KAAa,MACf;EAGF,IAAM,EAAE,aAAU,EAAU,uBAAuB,EAC7C,IAAW,KAAK,IACpB,GACA,KAAK,IAAI,EAAyB,EAAM,EAAE,IAAQ,EAAe,CAClE,EAEG,IADa,KAAK,IAAI,GAAsB,EAClC;EACd,AAAI,KAAY,MACd,IAAU;EAGZ,IAAM,IAAe,KAAK,IAAI,GAAS,KAAK,IAAI,GADhC,KAAK,IAAI,GAAS,EAC8B,CAAQ,CAAC;EAEzE,AADA,EAA0B,UAAU,GACpC,EAAkB,EAAa;IAC9B,EAAE,CAAC,EAEA,IAAgB,GACnB,MAA+B;EAK9B,IAJI,OAAO,SAAW,OAIlB,CAAC,KAAgB,GACnB;EAGF,IAAM,IAAY,EAAQ;EAC1B,IAAI,KAAa,MACf;EAGF,IAAM,IAAO,EAAU,uBAAuB,EACxC,IAAe;EACrB,EAAmB,GAAK;EAExB,IAAM,KAAkC,MAAU;GAChD,IAAI,IAAU;GACd,IAAI,aAAa,GAAO;IACtB,IAAM,IAAQ,EAAM,QAAQ;IAC5B,IAAI,KAAS,MACX;IAEF,IAAU,EAAM;UAEhB,IAAU,EAAM;GAIlB,IAAM,IAAY,KADH,IAAe,IAGxB,IAAW,KAAK,IACpB,GACA,KAAK,IACH,EAAyB,EAAK,MAAM,EACpC,EAAK,QAAQ,EACd,CACF,EAEG,IADa,KAAK,IAAI,GAAsB,EAClC;GACd,AAAI,KAAY,MACd,IAAU;GAIZ,IAAM,IAAe,KAAK,IAAI,GAAS,KAAK,IAAI,GAFhC,KAAK,IAAI,GAAS,EAEyB,CAAQ,CAAC;GAEpE,AADA,EAA0B,UAAU,GACpC,EAAkB,EAAa;KAG3B,UAAmC;GAEvC,AADA,EAAmB,GAAM,EACzB,EAAsB,EAA0B,QAAQ;GACxD,IAAM,IAAW,EAAwB;GAUzC,AATI,GAAU,QAAQ,SACpB,OAAO,oBAAoB,aAAa,EAAS,KAAK,EACtD,OAAO,oBAAoB,aAAa,EAAS,KAAK,GAEpD,GAAU,MAAM,SAClB,OAAO,oBAAoB,WAAW,EAAS,GAAG,EAClD,OAAO,oBAAoB,YAAY,EAAS,GAAG,EACnD,OAAO,oBAAoB,eAAe,EAAS,GAAG,GAExD,EAAwB,UAAU;;EASpC,AANA,EAAwB,UAAU;GAAE,MAAM;GAAa,IAAI;GAAW,EAEtE,OAAO,iBAAiB,aAAa,EAAY,EACjD,OAAO,iBAAiB,aAAa,GAAa,EAAE,SAAS,IAAO,CAAC,EACrE,OAAO,iBAAiB,WAAW,EAAU,EAC7C,OAAO,iBAAiB,YAAY,EAAU,EAC9C,OAAO,iBAAiB,eAAe,EAAU;IAEnD;EAAC;EAAc;EAAiB;EAAe,CAChD;CAqGD,AAnGA,QAAgB;EACd,EAA0B,UAAU;IACnC,CAAC,EAAe,CAAC,EAEpB,QAAgB;EACd,IAAI,OAAO,SAAW,KACpB,aAAa;EAEf,IAAM,IAAa,OAAO,WACxB,eAAe,KAAmB,EAAE,KACrC,EACK,UAA0B;GAC9B,GAAmB,EAAW,QAAQ;;EAMxC,OAHA,GAAmB,EACnB,EAAW,iBAAiB,UAAU,EAAkB,QAE3C;GACX,EAAW,oBAAoB,UAAU,EAAkB;;IAE5D,EAAE,CAAC,EAEN,QAAgB;EACd,AAAI,KACF,EAAoB,EAAe;IAEpC;EAAC;EAAc;EAAgB;EAAoB,CAAC,EAEvD,QAAgB;EACd,AAAI,CAAC,KAAmB,KACtB,GAAoB;IAErB;EAAC;EAAoB;EAAqB;EAAgB,CAAC,EAE9D,QAAgB;EACd,IAAI,CAAC,GACH,aAAa;EAGf,IAAM,KAAgB,MAAoC;GACxD,IAAI,EAAM,QAAQ,UAAU;IAC1B,GAAoB;IACpB;;GAGF,IAAI,EAAM,QAAQ,OAChB;GAGF,IAAM,IAAiB,EAAiB;GACxC,IAAI,KAAkB,MACpB;GAGF,IAAM,IAAoB,MAAM,KAC9B,EAAe,iBAA8B,GAAmB,CACjE,CAAC,QAAQ,MAEN,EAAQ,gBAAgB,QAAQ,MAAY,SAAS,cAEvD,EAEI,IAAe,EAAkB,IACjC,IAAc,EAAkB,EAAkB,SAAS;GAEjE,IAAI,KAAgB,QAAQ,KAAe,MAAM;IAC/C,EAAM,gBAAgB;IACtB;;GAGF,IAAI,EAAM,YAAY,SAAS,kBAAkB,GAAc;IAE7D,AADA,EAAM,gBAAgB,EACtB,EAAY,OAAO;IACnB;;GAGF,AAAI,CAAC,EAAM,YAAY,SAAS,kBAAkB,MAChD,EAAM,gBAAgB,EACtB,EAAa,OAAO;KAIlB,IAAuB,EAAuB;EAIpD,OAHA,EAAsB,SAAS,OAAO,EAEtC,OAAO,iBAAiB,WAAW,EAAa,QACnC;GACX,OAAO,oBAAoB,WAAW,EAAa;GACnD,IAAM,IAAgB,EAA8B;GAMpD,AALI,KAAiB,QAAQ,SAAS,SAAS,EAAc,GAC3D,EAAc,OAAO,GAErB,GAAsB,OAAO,EAE/B,EAA8B,UAAU;;IAEzC,CAAC,GAAoB,EAAoB,CAAC,EAE7C,cACe;EACX,IAAM,IAAW,EAAwB;EAKzC,AAJI,GAAU,QAAQ,SACpB,OAAO,oBAAoB,aAAa,EAAS,KAAK,EACtD,OAAO,oBAAoB,aAAa,EAAS,KAAK,GAEpD,GAAU,MAAM,SAClB,OAAO,oBAAoB,WAAW,EAAS,GAAG,EAClD,OAAO,oBAAoB,YAAY,EAAS,GAAG,EACnD,OAAO,oBAAoB,eAAe,EAAS,GAAG;IAGzD,EAAE,CAAC;CAEN,IAAI;CACJ,AAAI,OAAO,SAAW,QACpB,IAAc,OAAO,SAAS;CAGhC,IAAM,WAA6C;EACjD,IAAI,KAAkB,MACpB,OAAO,kBAAC,OAAD;GAAK,WAAW;aAAuB;GAAqB,CAAA;EAGrE,IAAI,KAAc,QAAQ,EAAW,WAAW,GAC9C,OAAO;EAGT,IAAM,IAAQ,EAAW,SAAS,GAAM,MAAU;GAChD,IAAM,IAAS,MAAU,EAAW,SAAS,GACvC,IAAM,GAAG,EAAK,QAAQ,QAAQ,GAAG,KACnC;GACJ,IAAI,EAAK,QAAQ,QAAQ,CAAC,GACxB,IACE,kBAAC,GAAD;IAAM,IAAI,EAAK;IAAM,WAAW;cAC7B,EAAK;IACD,CAAA;QAEJ;IACL,IAAI,IAAkB;IAItB,AAHI,MACF,IAAkB,IAEpB,IAAU,kBAAC,QAAD;KAAM,WAAW;eAAkB,EAAK;KAAa,CAAA;;GAGjE,IAAM,IACJ,kBAAC,MAAD;IAAc,WAAW;cACtB;IACE,EAFI,EAEJ;GAOP,OAJI,IACK,CAAC,EAAa,GAGhB,CACL,GACA,kBAAC,MAAD;IAEE,WAAW;IACX,eAAY;cACb;IAEI,EALE,GAAG,EAAI,MAKT,CACN;IACD;EAEF,OACE,kBAAC,OAAD;GACE,WAAW;GACX,cAAY,EAAE,wBAAwB;aAEtC,kBAAC,MAAD;IAAI,WAAW;cAAwB;IAAW,CAAA;GAC9C,CAAA;IAIJ,WAA0C;EAC9C,IACE,KAAW,QACV,EAAQ,QAAQ,SAAS,EAAQ,aAAa,EAAE,EAAE,WAAW,GAE9D,OAAO;EAGT,IAAM,IAAiB,EAAQ,aAAa,EAAE,EAE1C,IAAqC;EAOzC,OANI,EAAQ,QAAQ,SAClB,IACE,kBAAC,OAAD;GAAK,WAAW;aAAyB,EAAQ;GAAW,CAAA,GAK9D,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACG,EAAe,KAAK,GAAM,MAEvB,kBAAC,OAAD;IAAgC,WAAW;cACxC;IACG,EAFI,aAAa,IAEjB,CAER,EACD,EACG;;IAIJ,WACA,KAAQ,QAAQ,EAAK,WAAW,IAC3B,OAIP,kBAAC,OAAD;EAAK,WAAW;YACb,EAAK,KAAK,MAAQ;GACjB,IAAM,IAAW,EAAgB,GAAK,EAAY,EAC9C,IAAiC;GACrC,AAAI,MACF,IAAW;GAEb,IAAI,IAA6B;GACjC,AAAI,EAAI,SACN,IAAU;GAEZ,IAAM,IAAY,GAAiB;IACjC,OAAO;IACP,MAAM;IACP,CAAC,EACI,IAAM,EAAI,IACZ;GAkBJ,OAjBI,MACF,IAAc,SAGZ,EAAI,QAAQ,OAcd,kBAAC,QAAD;IAA2B;IAAW,gBAAc;cACjD,EAAI;IACA,EAFI,EAEJ,GAdL,kBAAC,GAAD;IAEE,IAAI,EAAI;IACG;IACX,gBAAc;cAEb,EAAI;IACA,EANA,EAMA;IASX;EACE,CAAA,EAIJ,KAAuB,GAC1B,MAAyC;EACpC,WAGA,EAAM,QAAQ,eAAe,EAAM,QAAQ,eAAc;GAC3D,EAAM,gBAAgB;GACtB,IAAI,IAAQ;GAKZ,AAJI,EAAM,QAAQ,iBAChB,IAAQ,MAEV,EAAoB,IAAiB,EAAM,EAC3C,EAAsB,EAA0B,QAAQ;;IAG5D;EAAC;EAAqB;EAAiB;EAAe,CACvD,EAEG,KAAoC;CACxC,IAAI,GAAc;EAChB,IAAM,IAAmB,CAAC,IAAkB,GAAwB,EAChE;EAOJ,AANK,MACH,EAAiB,KAAK,GAA0B,EAChD,IAAiB,EACf,OAAO,GAAG,EAAe,KAC1B,GAEH,KACE,kBAAC,SAAD;GAAO,WAAW,EAAG,GAAG,EAAiB;GAAE,OAAO;aAC/C;GACK,CAAA;;CAIZ,IAAI,KAAkC;CACtC,IAAI,GAAc;EAChB,IAAI,IAAgB;EACpB,AAAI,OACF,IAAgB;EAElB,IAAI,IAAa,GACb,IAAa,KAAK,IAAI,GAAsB,EAAe,EACzD,IAAc,EAAQ;EAC5B,IAAI,KAAe,MAAM;GACvB,IAAM,EAAE,aAAU,EAAY,uBAAuB,EAC/C,IAAW,KAAK,IACpB,GACA,KAAK,IAAI,EAAyB,EAAM,EAAE,IAAQ,EAAe,CAClE;GAKD,AAJA,IAAa,KAAK,IAAI,GAAsB,EAAS,EACjD,KAAY,MACd,IAAa,IAEf,IAAa,KAAK,IAAI,GAAY,EAAS;;EAE7C,KACE,kBAAC,OAAD;GACE,WAAW,EACT,IACA,GACD;GACD,MAAK;GACL,oBAAiB;GACjB,cAAY,EAAE,mCAAmC;GACjD,iBAAe,KAAK,MAAM,EAAW;GACrC,iBAAe,KAAK,MAAM,EAAW;GACrC,iBAAe,KAAK,MAAM,EAAe;GACzC,UAAU;GACV,eAAa;GACb,cAAc,MAAU;IAEtB,AADA,EAAM,gBAAgB,EACtB,EAAc,EAAM,QAAQ;;GAE9B,eAAe,MAAU;IACvB,IAAM,IAAQ,EAAM,QAAQ;IAC5B,AAAI,KAAS,QACX,EAAc,EAAM,QAAQ;;GAGhC,WAAW;GACX,CAAA;;CAIN,IAAI,KAAiB;CACrB,AAAI,MACF,KAAiB,MAAiB;CAEpC,IAAM,KAA6B,KAAsB,GACrD,IAAkC;CAGtC,OAFA,MAAoC,EAAE,sCAAsC,EAG1E,kBAAC,OAAD;EAAK,WAAW;YAAhB;GACE,kBAAC,OAAD;IACE,WAAW,EAAG,IAA8B,GACzC,KACC,KAAmB,GACtB,CAAC;IACF,eAAY;IACZ,SAAS;IACT,CAAA;GACD,MACC,kBAAC,OAAD;IACE,KAAK;IACL,WAAW,EAAG,yEAAsB,aAA4B,EAC7D,WACC,KAAmB,GACtB,CAAC;IACF,eAAa,KAAmB,CAAC;IACjC,OAAO,KAAmB,CAAC;cAP7B,CASE,kBAAC,UAAD;KACE,KAAK;KACL,MAAK;KACL,WAAW;KACX,SAAS;KACT,cAAY,EAAE,uCAAuC;eAErD,kBAAC,GAAD;MAAe,OAAO;MAAI,QAAQ;MAAI,eAAY;MAAS,CAAA;KACpD,CAAA,EACT,kBAAC,OAAD;KAAK,WAAW;eAAsB;KAAqB,CAAA,CACvD;;GAER,kBAAC,OAAD;IACE,KAAK;IACL,WAAW,EAAG,IAAa;MACxB,KAA2B;MAC3B,KAAuB;KACzB,CAAC;IACF,eAAa,KAAmB;IAChC,OAAO,KAAmB;cAP5B;KASE,kBAAC,OAAD;MACE,WAAW,EAAG,IAAmB;QAC9B,KAAiC;QACjC,KAA6B;OAC/B,CAAC;gBAJJ,CAME,kBAAC,OAAD;OAAK,WAAW;iBAAhB,CACE,kBAAC,OAAD;QAAK,WAAW;kBAAhB,CACE,kBAAC,OAAD;SAAK,WAAW;mBAAhB;UACG,CAAC,KAAmB,CAAC,KACpB,kBAAC,UAAD;WACE,MAAK;WACL,WAAW;WACX,SAAS;WACT,cAAY;WACZ,OAAO;qBAEP,kBAAC,GAAD;YAAS,OAAO;YAAI,QAAQ;YAAI,eAAY;YAAS,CAAA;WAC9C,CAAA;UAEV,KACC,kBAAC,UAAD;WACE,KAAK;WACL,MAAK;WACL,WAAW;WACX,SAAS;WACT,iBAAe;WACf,cAAY,EAAE,sCAAsC;qBAEpD,kBAAC,GAAD;YAAS,OAAO;YAAI,QAAQ;YAAI,eAAY;YAAS,CAAA;WAC9C,CAAA;UAEV,IAAkB;UACf;YACL,IAAe,CACZ;WACL,IAAY,CACT;UACN,kBAAC,OAAD;OACE,WAAW,EACT,IACA,GACA,GACD;OAEA;OACG,CAAA,CACF;;KACL;KACA;KACG;;GACF;;GAIG,IAAS;CACpB;CACA;CACA;CACD"}

package/lib/esm/focus/focusable.js

@@ -1,6 +1,6 @@
 //#region src/focus/focusable.ts
 var e = "[data-initial-focus], [autofocus]", t = [
-	"input:not([type=\"hidden\"]):not([type=\"button\"]):not([type=\"submit\"]):not([type=\"reset\"]):not([type=\"file\"]):not([disabled])",
+	"input:not([type=\"hidden\"]):not([type=\"button\"]):not([type=\"submit\"]):not([type=\"reset\"]):not([type=\"file\"]):not([type=\"checkbox\"]):not([type=\"radio\"]):not([disabled])",
 	"textarea:not([disabled])",
 	"[contenteditable=\"true\"]"
 ].join(","), n = [