@entur/layout 3.4.2 → 3.5.0

package/dist/beta/cjs/index.cjs

@@ -1,18 +1,20 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 ;/* empty css             */
-const index = require("./Grid/index.cjs");
-const index$1 = require("./Flex/index.cjs");
+const index$1 = require("./Grid/index.cjs");
+const index = require("./Flex/index.cjs");
 const index$2 = require("./templates/index.cjs");
+const FlexSpacer = require("./Flex/FlexSpacer.cjs");
 const GridItem = require("./Grid/GridItem.cjs");
 const LayoutWrapper = require("./LayoutWrapper/LayoutWrapper.cjs");
 const useLayoutValues = require("./LayoutWrapper/useLayoutValues.cjs");
-const FlexSpacer = require("./Flex/FlexSpacer.cjs");
-exports.Grid = index.GridComponent;
-exports.Flex = index$1.FlexComponent;
+const SidebarContext = require("./templates/SidebarContext.cjs");
+exports.Grid = index$1.Grid;
+exports.Flex = index.Flex;
 exports.Template = index$2.Template;
+exports.FlexSpacer = FlexSpacer.FlexSpacer;
 exports.GridItem = GridItem.GridItem;
 exports.LayoutWrapper = LayoutWrapper.LayoutWrapper;
 exports.useLayoutValues = useLayoutValues.useLayoutValues;
-exports.FlexSpacer = FlexSpacer.FlexSpacer;
+exports.useSidebarCollapsed = SidebarContext.useSidebarCollapsed;
 //# sourceMappingURL=index.cjs.map

package/dist/beta/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}

package/dist/beta/cjs/templates/Sidebar.cjs

@@ -2,10 +2,13 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
+const utils = require("@entur/utils");
 const classNames = require("classnames");
+const icons = require("@entur/icons");
 const Contrast = require("../Contrast.cjs");
 const index$1 = require("../Flex/index.cjs");
 const index = require("../Grid/index.cjs");
+const SidebarContext = require("./SidebarContext.cjs");
 ;/* empty css               */
 const defaultSidebarElement = "aside";
 const defaultSectionElement = "div";
@@ -60,35 +63,100 @@ const SidebarFooter = React.forwardRef(
     );
   }
 );
+const CollapseToggle = ({ isCollapsed, onToggle, openLabel, closeLabel }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    type: "button",
+    className: "eds-layout-template-sidebar__collapse-toggle",
+    onClick: onToggle,
+    "aria-expanded": !isCollapsed,
+    "aria-label": isCollapsed ? openLabel : closeLabel,
+    children: isCollapsed ? /* @__PURE__ */ jsxRuntime.jsx(icons.RightArrowIcon, { size: 16 }) : /* @__PURE__ */ jsxRuntime.jsx(icons.LeftArrowIcon, { size: 16 })
+  }
+);
 const SidebarRoot = React.forwardRef(
   ({
     children,
     className,
     style,
     contrast = true,
+    collapsible = false,
+    collapsed,
+    onCollapseToggle,
+    openSidebarAriaLabel = "Åpne sidemeny",
+    closeSidebarAriaLabel = "Lukk sidemeny",
     as,
     ...rest
   }, ref) => {
+    const handleCollapseToggle = (value) => {
+      if (value === void 0 || !onCollapseToggle) {
+        return;
+      }
+      onCollapseToggle(value);
+    };
+    const [isCollapsed, setIsCollapsed] = utils.useControllableProp({
+      prop: collapsible ? collapsed : void 0,
+      defaultValue: false,
+      updater: handleCollapseToggle
+    });
     const WrapperElement = contrast ? Contrast.Contrast : "div";
-    return /* @__PURE__ */ jsxRuntime.jsx(index.GridComponent.Item, { as: WrapperElement, colSpan: "1 / 2", children: /* @__PURE__ */ jsxRuntime.jsx(
-      index$1.FlexComponent,
+    const sidebarClassNames = classNames(
+      "eds-layout-template-sidebar",
       {
-        ref,
-        as: as || defaultSidebarElement,
-        direction: "column",
-        gap: "m",
-        className: classNames(
-          "eds-layout-template-sidebar",
-          {
-            "eds-layout-template-sidebar--plain": !contrast
-          },
-          className
-        ),
-        style,
-        ...rest,
-        children
+        "eds-layout-template-sidebar--plain": !contrast,
+        "eds-layout-template-sidebar--collapsible": collapsible,
+        "eds-layout-template-sidebar--collapsed": collapsible && isCollapsed
+      },
+      className
+    );
+    if (!collapsible) {
+      return /* @__PURE__ */ jsxRuntime.jsx(index.Grid.Item, { as: WrapperElement, colSpan: "1 / 2", children: /* @__PURE__ */ jsxRuntime.jsx(
+        index$1.Flex,
+        {
+          ref,
+          as: as || defaultSidebarElement,
+          direction: "column",
+          gap: "m",
+          className: sidebarClassNames,
+          style,
+          ...rest,
+          children
+        }
+      ) });
+    }
+    const collapsedStyle = isCollapsed ? { ...style, "--eds-sidebar-width": "2rem" } : style;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      index.Grid.Item,
+      {
+        as: WrapperElement,
+        colSpan: "1 / 2",
+        className: "eds-layout-template-sidebar-wrapper",
+        children: /* @__PURE__ */ jsxRuntime.jsxs(SidebarContext.SidebarContext.Provider, { value: { isCollapsed }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            index$1.Flex,
+            {
+              ref,
+              as: as || defaultSidebarElement,
+              direction: "column",
+              gap: "m",
+              className: sidebarClassNames,
+              style: collapsedStyle,
+              ...rest,
+              children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "eds-layout-template-sidebar__content", children })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            CollapseToggle,
+            {
+              isCollapsed,
+              onToggle: () => setIsCollapsed(!isCollapsed),
+              openLabel: openSidebarAriaLabel,
+              closeLabel: closeSidebarAriaLabel
+            }
+          )
+        ] })
       }
-    ) });
+    );
   }
 );
 const Sidebar = Object.assign(SidebarRoot, {

package/dist/beta/cjs/templates/Sidebar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.cjs","sources":["../../../../src/beta/templates/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Contrast } from '../../Contrast';\nimport { Flex } from '../Flex';\nimport { Grid } from '../Grid';\nimport './Sidebar.scss';\n\ntype SidebarOwnProps = {\n  /** Toggle contrast styling for the sidebar */\n  contrast?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype SidebarSectionOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nconst defaultSidebarElement = 'aside';\nconst defaultSectionElement = 'div';\nconst defaultNavigationElement = 'nav';\nconst defaultFooterElement = 'footer';\n\nexport type SidebarProps<\n  T extends React.ElementType = typeof defaultSidebarElement,\n> = PolymorphicComponentProps<T, SidebarOwnProps>;\n\nexport type SidebarSectionProps<\n  T extends React.ElementType = typeof defaultSectionElement,\n> = PolymorphicComponentProps<T, SidebarSectionOwnProps>;\n\nconst SidebarLogo = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarUser = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarData = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarNavigation = React.forwardRef(\n  <E extends React.ElementType = typeof defaultNavigationElement>(\n    { children, className, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultNavigationElement;\n    return (\n      <Element\n        ref={ref}\n        className={classNames(\n          'eds-layout-template-sidebar__navigation',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarFooter = React.forwardRef(\n  <E extends React.ElementType = typeof defaultFooterElement>(\n    { children, className, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultFooterElement;\n    return (\n      <Element\n        ref={ref}\n        className={classNames('eds-layout-template-sidebar__footer', className)}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarRoot = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSidebarElement>(\n    {\n      children,\n      className,\n      style,\n      contrast = true,\n      as,\n      ...rest\n    }: SidebarProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const WrapperElement = contrast ? Contrast : 'div';\n    return (\n      <Grid.Item as={WrapperElement} colSpan=\"1 / 2\">\n        <Flex\n          ref={ref}\n          as={as || defaultSidebarElement}\n          direction=\"column\"\n          gap=\"m\"\n          className={classNames(\n            'eds-layout-template-sidebar',\n            {\n              'eds-layout-template-sidebar--plain': !contrast,\n            },\n            className,\n          )}\n          style={style}\n          {...rest}\n        >\n          {children}\n        </Flex>\n      </Grid.Item>\n    );\n  },\n);\n\nexport type SidebarComponent = typeof SidebarRoot & {\n  Logo: typeof SidebarLogo;\n  User: typeof SidebarUser;\n  Data: typeof SidebarData;\n  Navigation: typeof SidebarNavigation;\n  Footer: typeof SidebarFooter;\n};\n\nexport const Sidebar: SidebarComponent = Object.assign(SidebarRoot, {\n  Logo: SidebarLogo,\n  User: SidebarUser,\n  Data: SidebarData,\n  Navigation: SidebarNavigation,\n  Footer: SidebarFooter,\n});\n\nSidebar.displayName = 'Template.Portal.Sidebar';\nSidebar.Logo.displayName = 'Template.Portal.Sidebar.Logo';\nSidebar.User.displayName = 'Template.Portal.Sidebar.User';\nSidebar.Data.displayName = 'Template.Portal.Sidebar.Data';\nSidebar.Navigation.displayName = 'Template.Portal.Sidebar.Navigation';\nSidebar.Footer.displayName = 'Template.Portal.Sidebar.Footer';\n"],"names":["jsx","Contrast","Grid","Flex"],"mappings":";;;;;;;;;AAsBA,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAC9B,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAU7B,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACEA,2BAAAA,IAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACEA,2BAAAA,IAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACEA,2BAAAA,IAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACEA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACEA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,WAAW,uCAAuC,SAAS;AAAA,QACrE,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,iBAAiB,WAAWC,SAAAA,WAAW;AAC7C,0CACGC,oBAAK,MAAL,EAAU,IAAI,gBAAgB,SAAQ,SACrC,UAAAF,2BAAAA;AAAAA,MAACG,QAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,WAAU;AAAA,QACV,KAAI;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,sCAAsC,CAAC;AAAA,UAAA;AAAA,UAEzC;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAUO,MAAM,UAA4B,OAAO,OAAO,aAAa;AAAA,EAClE,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AACV,CAAC;AAED,QAAQ,cAAc;AACtB,QAAQ,KAAK,cAAc;AAC3B,QAAQ,KAAK,cAAc;AAC3B,QAAQ,KAAK,cAAc;AAC3B,QAAQ,WAAW,cAAc;AACjC,QAAQ,OAAO,cAAc;;"}
+{"version":3,"file":"Sidebar.cjs","sources":["../../../../src/beta/templates/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport { useControllableProp } from '@entur/utils';\nimport classNames from 'classnames';\nimport { LeftArrowIcon, RightArrowIcon } from '@entur/icons';\nimport { Contrast } from '../../Contrast';\nimport { Flex } from '../Flex';\nimport { Grid } from '../Grid';\nimport { SidebarContext } from './SidebarContext';\nimport './Sidebar.scss';\n\ntype SidebarOwnProps = {\n  /** Toggle contrast styling for the sidebar */\n  contrast?: boolean;\n  /** Enable collapse functionality */\n  collapsible?: boolean;\n  /** Controlled collapsed state */\n  collapsed?: boolean;\n  /** Callback when the sidebar is toggled */\n  onCollapseToggle?: (collapsed: boolean) => void;\n  /** aria-label for the toggle button when the sidebar is collapsed\n   * @default 'Åpne sidemeny'\n   */\n  openSidebarAriaLabel?: string;\n  /** aria-label for the toggle button when the sidebar is expanded\n   * @default 'Lukk sidemeny'\n   */\n  closeSidebarAriaLabel?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype SidebarSectionOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nconst defaultSidebarElement = 'aside';\nconst defaultSectionElement = 'div';\nconst defaultNavigationElement = 'nav';\nconst defaultFooterElement = 'footer';\n\nexport type SidebarProps<\n  T extends React.ElementType = typeof defaultSidebarElement,\n> = PolymorphicComponentProps<T, SidebarOwnProps>;\n\nexport type SidebarSectionProps<\n  T extends React.ElementType = typeof defaultSectionElement,\n> = PolymorphicComponentProps<T, SidebarSectionOwnProps>;\n\nconst SidebarLogo = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarUser = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarData = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarNavigation = React.forwardRef(\n  <E extends React.ElementType = typeof defaultNavigationElement>(\n    { children, className, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultNavigationElement;\n    return (\n      <Element\n        ref={ref}\n        className={classNames(\n          'eds-layout-template-sidebar__navigation',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarFooter = React.forwardRef(\n  <E extends React.ElementType = typeof defaultFooterElement>(\n    { children, className, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultFooterElement;\n    return (\n      <Element\n        ref={ref}\n        className={classNames('eds-layout-template-sidebar__footer', className)}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst CollapseToggle: React.FC<{\n  isCollapsed: boolean;\n  onToggle: () => void;\n  openLabel: string;\n  closeLabel: string;\n}> = ({ isCollapsed, onToggle, openLabel, closeLabel }) => (\n  <button\n    type=\"button\"\n    className=\"eds-layout-template-sidebar__collapse-toggle\"\n    onClick={onToggle}\n    aria-expanded={!isCollapsed}\n    aria-label={isCollapsed ? openLabel : closeLabel}\n  >\n    {isCollapsed ? <RightArrowIcon size={16} /> : <LeftArrowIcon size={16} />}\n  </button>\n);\n\nconst SidebarRoot = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSidebarElement>(\n    {\n      children,\n      className,\n      style,\n      contrast = true,\n      collapsible = false,\n      collapsed,\n      onCollapseToggle,\n      openSidebarAriaLabel = 'Åpne sidemeny',\n      closeSidebarAriaLabel = 'Lukk sidemeny',\n      as,\n      ...rest\n    }: SidebarProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const handleCollapseToggle: (value?: boolean) => void = value => {\n      if (value === undefined || !onCollapseToggle) {\n        return;\n      }\n      onCollapseToggle(value);\n    };\n\n    const [isCollapsed, setIsCollapsed] = useControllableProp({\n      prop: collapsible ? collapsed : undefined,\n      defaultValue: false,\n      updater: handleCollapseToggle,\n    });\n\n    const WrapperElement = contrast ? Contrast : 'div';\n\n    const sidebarClassNames = classNames(\n      'eds-layout-template-sidebar',\n      {\n        'eds-layout-template-sidebar--plain': !contrast,\n        'eds-layout-template-sidebar--collapsible': collapsible,\n        'eds-layout-template-sidebar--collapsed': collapsible && isCollapsed,\n      },\n      className,\n    );\n\n    if (!collapsible) {\n      return (\n        <Grid.Item as={WrapperElement} colSpan=\"1 / 2\">\n          <Flex\n            ref={ref}\n            as={as || defaultSidebarElement}\n            direction=\"column\"\n            gap=\"m\"\n            className={sidebarClassNames}\n            style={style}\n            {...rest}\n          >\n            {children}\n          </Flex>\n        </Grid.Item>\n      );\n    }\n\n    const collapsedStyle = isCollapsed\n      ? ({ ...style, '--eds-sidebar-width': '2rem' } as React.CSSProperties)\n      : style;\n\n    return (\n      <Grid.Item\n        as={WrapperElement}\n        colSpan=\"1 / 2\"\n        className=\"eds-layout-template-sidebar-wrapper\"\n      >\n        <SidebarContext.Provider value={{ isCollapsed }}>\n          <Flex\n            ref={ref}\n            as={as || defaultSidebarElement}\n            direction=\"column\"\n            gap=\"m\"\n            className={sidebarClassNames}\n            style={collapsedStyle}\n            {...rest}\n          >\n            <div className=\"eds-layout-template-sidebar__content\">\n              {children}\n            </div>\n          </Flex>\n          <CollapseToggle\n            isCollapsed={isCollapsed}\n            onToggle={() => setIsCollapsed(!isCollapsed)}\n            openLabel={openSidebarAriaLabel}\n            closeLabel={closeSidebarAriaLabel}\n          />\n        </SidebarContext.Provider>\n      </Grid.Item>\n    );\n  },\n);\n\nexport type SidebarComponent = typeof SidebarRoot & {\n  Logo: typeof SidebarLogo;\n  User: typeof SidebarUser;\n  Data: typeof SidebarData;\n  Navigation: typeof SidebarNavigation;\n  Footer: typeof SidebarFooter;\n};\n\nexport const Sidebar: SidebarComponent = Object.assign(SidebarRoot, {\n  Logo: SidebarLogo,\n  User: SidebarUser,\n  Data: SidebarData,\n  Navigation: SidebarNavigation,\n  Footer: SidebarFooter,\n});\n\nSidebar.displayName = 'Template.Portal.Sidebar';\nSidebar.Logo.displayName = 'Template.Portal.Sidebar.Logo';\nSidebar.User.displayName = 'Template.Portal.Sidebar.User';\nSidebar.Data.displayName = 'Template.Portal.Sidebar.Data';\nSidebar.Navigation.displayName = 'Template.Portal.Sidebar.Navigation';\nSidebar.Footer.displayName = 'Template.Portal.Sidebar.Footer';\n"],"names":["jsx","RightArrowIcon","LeftArrowIcon","useControllableProp","Contrast","Grid","Flex","SidebarContext"],"mappings":"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"}

package/dist/beta/cjs/templates/SidebarContext.cjs

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const SidebarContext = React.createContext({
+  isCollapsed: false
+});
+const useSidebarCollapsed = () => React.useContext(SidebarContext);
+exports.SidebarContext = SidebarContext;
+exports.useSidebarCollapsed = useSidebarCollapsed;
+//# sourceMappingURL=SidebarContext.cjs.map

package/dist/beta/cjs/templates/SidebarContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarContext.cjs","sources":["../../../../src/beta/templates/SidebarContext.tsx"],"sourcesContent":["import React from 'react';\n\nexport const SidebarContext = React.createContext<{\n  isCollapsed: boolean;\n}>({\n  isCollapsed: false,\n});\n\n/** Hook to read the collapsed state of the nearest `Template.Portal.Sidebar`.\n *  Returns `{ isCollapsed: false }` when used outside a collapsible sidebar. */\nexport const useSidebarCollapsed: () => { isCollapsed: boolean } = () =>\n  React.useContext(SidebarContext);\n"],"names":[],"mappings":";;;AAEO,MAAM,iBAAiB,MAAM,cAEjC;AAAA,EACD,aAAa;AACf,CAAC;AAIM,MAAM,sBAAsD,MACjE,MAAM,WAAW,cAAc;;;"}

package/dist/beta/cjs/templates/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/beta/templates/index.ts"],"sourcesContent":["import { Portal } from './portal';\nimport type {\n  PortalComponent,\n  PortalMainProps,\n  PortalProps,\n  PortalStatusBarProps,\n} from './portal';\nimport type {\n  SidebarComponent,\n  SidebarProps,\n  SidebarSectionProps,\n} from './Sidebar';\n\nexport type TemplateComponent = {\n  Portal: PortalComponent;\n};\n\nexport const Template: TemplateComponent = {\n  Portal,\n};\n\nexport type {\n  PortalComponent,\n  PortalMainProps,\n  PortalProps,\n  PortalStatusBarProps,\n  SidebarComponent,\n  SidebarProps,\n  SidebarSectionProps,\n};\n"],"names":["Portal"],"mappings":";;;AAiBO,MAAM,WAA8B;AAAA,EAAA,QACzCA,OAAAA;AACF;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/beta/templates/index.ts"],"sourcesContent":["import { Portal } from './portal';\nimport type {\n  PortalComponent,\n  PortalMainProps,\n  PortalProps,\n  PortalStatusBarProps,\n} from './portal';\nimport type {\n  SidebarComponent,\n  SidebarProps,\n  SidebarSectionProps,\n} from './Sidebar';\n\nexport { useSidebarCollapsed } from './SidebarContext';\n\nexport type TemplateComponent = {\n  Portal: PortalComponent;\n};\n\nexport const Template: TemplateComponent = {\n  Portal,\n};\n\nexport type {\n  PortalComponent,\n  PortalMainProps,\n  PortalProps,\n  PortalStatusBarProps,\n  SidebarComponent,\n  SidebarProps,\n  SidebarSectionProps,\n};\n"],"names":["Portal"],"mappings":";;;AAmBO,MAAM,WAA8B;AAAA,EAAA,QACzCA,OAAAA;AACF;;"}

package/dist/beta/cjs/templates/portal/Portal.cjs

@@ -11,7 +11,7 @@ const defaultPortalMainElement = "main";
 const PortalRoot = React.forwardRef(
   ({ children, className, style, as, ...rest }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      index.GridComponent,
+      index.Grid,
       {
         ref,
         as,
@@ -29,7 +29,7 @@ const PortalRoot = React.forwardRef(
 const PortalStatusBar = React.forwardRef(
   ({ children, className, as, ...rest }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      index.GridComponent.Item,
+      index.Grid.Item,
       {
         ref,
         as: as || defaultStatusBarElement,
@@ -46,7 +46,7 @@ const PortalStatusBar = React.forwardRef(
 const PortalMain = React.forwardRef(
   ({ children, className, style, as, ...rest }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
-      index.GridComponent.Item,
+      index.Grid.Item,
       {
         ref,
         as: as || defaultPortalMainElement,

package/dist/beta/cjs/templates/portal/Portal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Portal.cjs","sources":["../../../../../src/beta/templates/portal/Portal.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Grid } from '../../Grid';\nimport { Sidebar, SidebarComponent } from '../Sidebar';\nimport './Portal.scss';\n\ntype PortalOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype PortalStatusBarOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype PortalMainOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nconst defaultStatusBarElement = 'div';\nconst defaultPortalMainElement = 'main';\n\nexport type PortalProps<T extends React.ElementType = typeof Grid> =\n  PolymorphicComponentProps<T, PortalOwnProps>;\n\nexport type PortalStatusBarProps<\n  T extends React.ElementType = typeof defaultStatusBarElement,\n> = PolymorphicComponentProps<T, PortalStatusBarOwnProps>;\n\nexport type PortalMainProps<\n  T extends React.ElementType = typeof defaultPortalMainElement,\n> = PolymorphicComponentProps<T, PortalMainOwnProps>;\n\nconst PortalRoot = React.forwardRef(\n  <E extends React.ElementType = typeof Grid>(\n    { children, className, style, as, ...rest }: PortalProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid\n        ref={ref}\n        as={as}\n        templateColumns=\"var(--eds-sidebar-width, min-content) minmax(0, 1fr)\"\n        gap=\"none\"\n        columnGap=\"m\"\n        className={classNames('eds-layout-template-portal', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid>\n    );\n  },\n);\n\nconst PortalStatusBar = React.forwardRef(\n  <E extends React.ElementType = typeof defaultStatusBarElement>(\n    { children, className, as, ...rest }: PortalStatusBarProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid.Item\n        ref={ref}\n        as={as || defaultStatusBarElement}\n        className={classNames(\n          'eds-layout-template-portal__status-bar',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Grid.Item>\n    );\n  },\n);\n\nconst PortalMain = React.forwardRef(\n  <E extends React.ElementType = typeof defaultPortalMainElement>(\n    { children, className, style, as, ...rest }: PortalMainProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid.Item\n        ref={ref}\n        as={as || defaultPortalMainElement}\n        colSpan=\"2 / -1\"\n        className={classNames('eds-layout-template-portal__main', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid.Item>\n    );\n  },\n);\n\nexport type PortalComponent = typeof PortalRoot & {\n  StatusBar: typeof PortalStatusBar;\n  Sidebar: SidebarComponent;\n  Main: typeof PortalMain;\n};\n\nexport const Portal: PortalComponent = Object.assign(PortalRoot, {\n  StatusBar: PortalStatusBar,\n  Sidebar,\n  Main: PortalMain,\n});\n\nPortal.displayName = 'Template.Portal';\nPortal.StatusBar.displayName = 'Template.Portal.StatusBar';\nPortal.Main.displayName = 'Template.Portal.Main';\n"],"names":["jsx","Grid","Sidebar"],"mappings":";;;;;;;;AAyBA,MAAM,0BAA0B;AAChC,MAAM,2BAA2B;AAajC,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACEA,2BAAAA;AAAAA,MAACC,MAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,iBAAgB;AAAA,QAChB,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,WAAW,WAAW,8BAA8B,SAAS;AAAA,QAC7D;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,WACED,2BAAAA;AAAAA,MAACC,MAAAA,cAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACED,2BAAAA;AAAAA,MAACC,MAAAA,cAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,WAAW,WAAW,oCAAoC,SAAS;AAAA,QACnE;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAQO,MAAM,SAA0B,OAAO,OAAO,YAAY;AAAA,EAC/D,WAAW;AAAA,EAAA,SACXC,QAAAA;AAAAA,EACA,MAAM;AACR,CAAC;AAED,OAAO,cAAc;AACrB,OAAO,UAAU,cAAc;AAC/B,OAAO,KAAK,cAAc;;"}
+{"version":3,"file":"Portal.cjs","sources":["../../../../../src/beta/templates/portal/Portal.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Grid } from '../../Grid';\nimport { Sidebar, SidebarComponent } from '../Sidebar';\nimport './Portal.scss';\n\ntype PortalOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype PortalStatusBarOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype PortalMainOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nconst defaultStatusBarElement = 'div';\nconst defaultPortalMainElement = 'main';\n\nexport type PortalProps<T extends React.ElementType = typeof Grid> =\n  PolymorphicComponentProps<T, PortalOwnProps>;\n\nexport type PortalStatusBarProps<\n  T extends React.ElementType = typeof defaultStatusBarElement,\n> = PolymorphicComponentProps<T, PortalStatusBarOwnProps>;\n\nexport type PortalMainProps<\n  T extends React.ElementType = typeof defaultPortalMainElement,\n> = PolymorphicComponentProps<T, PortalMainOwnProps>;\n\nconst PortalRoot = React.forwardRef(\n  <E extends React.ElementType = typeof Grid>(\n    { children, className, style, as, ...rest }: PortalProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid\n        ref={ref}\n        as={as}\n        templateColumns=\"var(--eds-sidebar-width, min-content) minmax(0, 1fr)\"\n        gap=\"none\"\n        columnGap=\"m\"\n        className={classNames('eds-layout-template-portal', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid>\n    );\n  },\n);\n\nconst PortalStatusBar = React.forwardRef(\n  <E extends React.ElementType = typeof defaultStatusBarElement>(\n    { children, className, as, ...rest }: PortalStatusBarProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid.Item\n        ref={ref}\n        as={as || defaultStatusBarElement}\n        className={classNames(\n          'eds-layout-template-portal__status-bar',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Grid.Item>\n    );\n  },\n);\n\nconst PortalMain = React.forwardRef(\n  <E extends React.ElementType = typeof defaultPortalMainElement>(\n    { children, className, style, as, ...rest }: PortalMainProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    return (\n      <Grid.Item\n        ref={ref}\n        as={as || defaultPortalMainElement}\n        colSpan=\"2 / -1\"\n        className={classNames('eds-layout-template-portal__main', className)}\n        style={style}\n        {...rest}\n      >\n        {children}\n      </Grid.Item>\n    );\n  },\n);\n\nexport type PortalComponent = typeof PortalRoot & {\n  StatusBar: typeof PortalStatusBar;\n  Sidebar: SidebarComponent;\n  Main: typeof PortalMain;\n};\n\nexport const Portal: PortalComponent = Object.assign(PortalRoot, {\n  StatusBar: PortalStatusBar,\n  Sidebar,\n  Main: PortalMain,\n});\n\nPortal.displayName = 'Template.Portal';\nPortal.StatusBar.displayName = 'Template.Portal.StatusBar';\nPortal.Main.displayName = 'Template.Portal.Main';\n"],"names":["jsx","Grid","Sidebar"],"mappings":";;;;;;;;AAyBA,MAAM,0BAA0B;AAChC,MAAM,2BAA2B;AAajC,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACEA,2BAAAA;AAAAA,MAACC,MAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,iBAAgB;AAAA,QAChB,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,WAAW,WAAW,8BAA8B,SAAS;AAAA,QAC7D;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,WACED,2BAAAA;AAAAA,MAACC,MAAAA,KAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACED,2BAAAA;AAAAA,MAACC,MAAAA,KAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,WAAW,WAAW,oCAAoC,SAAS;AAAA,QACnE;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAQO,MAAM,SAA0B,OAAO,OAAO,YAAY;AAAA,EAC/D,WAAW;AAAA,EAAA,SACXC,QAAAA;AAAAA,EACA,MAAM;AACR,CAAC;AAED,OAAO,cAAc;AACrB,OAAO,UAAU,cAAc;AAC/B,OAAO,KAAK,cAAc;;"}

package/dist/beta/esm/index.mjs

@@ -1,18 +1,20 @@
 /* empty css            */
-import { GridComponent } from "./Grid/index.mjs";
-import { FlexComponent } from "./Flex/index.mjs";
+import { Grid } from "./Grid/index.mjs";
+import { Flex } from "./Flex/index.mjs";
 import { Template } from "./templates/index.mjs";
+import { FlexSpacer } from "./Flex/FlexSpacer.mjs";
 import { GridItem } from "./Grid/GridItem.mjs";
 import { LayoutWrapper } from "./LayoutWrapper/LayoutWrapper.mjs";
 import { useLayoutValues } from "./LayoutWrapper/useLayoutValues.mjs";
-import { FlexSpacer } from "./Flex/FlexSpacer.mjs";
+import { useSidebarCollapsed } from "./templates/SidebarContext.mjs";
 export {
-  FlexComponent as Flex,
+  Flex,
   FlexSpacer,
-  GridComponent as Grid,
+  Grid,
   GridItem,
   LayoutWrapper,
   Template,
-  useLayoutValues
+  useLayoutValues,
+  useSidebarCollapsed
 };
 //# sourceMappingURL=index.mjs.map

package/dist/beta/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist/beta/esm/templates/Sidebar.mjs

@@ -1,9 +1,12 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
+import { useControllableProp } from "@entur/utils";
 import classNames from "classnames";
+import { RightArrowIcon, LeftArrowIcon } from "@entur/icons";
 import { Contrast } from "../Contrast.mjs";
-import { FlexComponent } from "../Flex/index.mjs";
-import { GridComponent } from "../Grid/index.mjs";
+import { Flex as FlexComponent } from "../Flex/index.mjs";
+import { Grid as GridComponent } from "../Grid/index.mjs";
+import { SidebarContext } from "./SidebarContext.mjs";
 /* empty css              */
 const defaultSidebarElement = "aside";
 const defaultSectionElement = "div";
@@ -58,35 +61,100 @@ const SidebarFooter = React.forwardRef(
     );
   }
 );
+const CollapseToggle = ({ isCollapsed, onToggle, openLabel, closeLabel }) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    className: "eds-layout-template-sidebar__collapse-toggle",
+    onClick: onToggle,
+    "aria-expanded": !isCollapsed,
+    "aria-label": isCollapsed ? openLabel : closeLabel,
+    children: isCollapsed ? /* @__PURE__ */ jsx(RightArrowIcon, { size: 16 }) : /* @__PURE__ */ jsx(LeftArrowIcon, { size: 16 })
+  }
+);
 const SidebarRoot = React.forwardRef(
   ({
     children,
     className,
     style,
     contrast = true,
+    collapsible = false,
+    collapsed,
+    onCollapseToggle,
+    openSidebarAriaLabel = "Åpne sidemeny",
+    closeSidebarAriaLabel = "Lukk sidemeny",
     as,
     ...rest
   }, ref) => {
+    const handleCollapseToggle = (value) => {
+      if (value === void 0 || !onCollapseToggle) {
+        return;
+      }
+      onCollapseToggle(value);
+    };
+    const [isCollapsed, setIsCollapsed] = useControllableProp({
+      prop: collapsible ? collapsed : void 0,
+      defaultValue: false,
+      updater: handleCollapseToggle
+    });
     const WrapperElement = contrast ? Contrast : "div";
-    return /* @__PURE__ */ jsx(GridComponent.Item, { as: WrapperElement, colSpan: "1 / 2", children: /* @__PURE__ */ jsx(
-      FlexComponent,
+    const sidebarClassNames = classNames(
+      "eds-layout-template-sidebar",
       {
-        ref,
-        as: as || defaultSidebarElement,
-        direction: "column",
-        gap: "m",
-        className: classNames(
-          "eds-layout-template-sidebar",
-          {
-            "eds-layout-template-sidebar--plain": !contrast
-          },
-          className
-        ),
-        style,
-        ...rest,
-        children
+        "eds-layout-template-sidebar--plain": !contrast,
+        "eds-layout-template-sidebar--collapsible": collapsible,
+        "eds-layout-template-sidebar--collapsed": collapsible && isCollapsed
+      },
+      className
+    );
+    if (!collapsible) {
+      return /* @__PURE__ */ jsx(GridComponent.Item, { as: WrapperElement, colSpan: "1 / 2", children: /* @__PURE__ */ jsx(
+        FlexComponent,
+        {
+          ref,
+          as: as || defaultSidebarElement,
+          direction: "column",
+          gap: "m",
+          className: sidebarClassNames,
+          style,
+          ...rest,
+          children
+        }
+      ) });
+    }
+    const collapsedStyle = isCollapsed ? { ...style, "--eds-sidebar-width": "2rem" } : style;
+    return /* @__PURE__ */ jsx(
+      GridComponent.Item,
+      {
+        as: WrapperElement,
+        colSpan: "1 / 2",
+        className: "eds-layout-template-sidebar-wrapper",
+        children: /* @__PURE__ */ jsxs(SidebarContext.Provider, { value: { isCollapsed }, children: [
+          /* @__PURE__ */ jsx(
+            FlexComponent,
+            {
+              ref,
+              as: as || defaultSidebarElement,
+              direction: "column",
+              gap: "m",
+              className: sidebarClassNames,
+              style: collapsedStyle,
+              ...rest,
+              children: /* @__PURE__ */ jsx("div", { className: "eds-layout-template-sidebar__content", children })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CollapseToggle,
+            {
+              isCollapsed,
+              onToggle: () => setIsCollapsed(!isCollapsed),
+              openLabel: openSidebarAriaLabel,
+              closeLabel: closeSidebarAriaLabel
+            }
+          )
+        ] })
       }
-    ) });
+    );
   }
 );
 const Sidebar = Object.assign(SidebarRoot, {

package/dist/beta/esm/templates/Sidebar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Sidebar.mjs","sources":["../../../../src/beta/templates/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Contrast } from '../../Contrast';\nimport { Flex } from '../Flex';\nimport { Grid } from '../Grid';\nimport './Sidebar.scss';\n\ntype SidebarOwnProps = {\n  /** Toggle contrast styling for the sidebar */\n  contrast?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype SidebarSectionOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nconst defaultSidebarElement = 'aside';\nconst defaultSectionElement = 'div';\nconst defaultNavigationElement = 'nav';\nconst defaultFooterElement = 'footer';\n\nexport type SidebarProps<\n  T extends React.ElementType = typeof defaultSidebarElement,\n> = PolymorphicComponentProps<T, SidebarOwnProps>;\n\nexport type SidebarSectionProps<\n  T extends React.ElementType = typeof defaultSectionElement,\n> = PolymorphicComponentProps<T, SidebarSectionOwnProps>;\n\nconst SidebarLogo = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarUser = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarData = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarNavigation = React.forwardRef(\n  <E extends React.ElementType = typeof defaultNavigationElement>(\n    { children, className, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultNavigationElement;\n    return (\n      <Element\n        ref={ref}\n        className={classNames(\n          'eds-layout-template-sidebar__navigation',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarFooter = React.forwardRef(\n  <E extends React.ElementType = typeof defaultFooterElement>(\n    { children, className, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultFooterElement;\n    return (\n      <Element\n        ref={ref}\n        className={classNames('eds-layout-template-sidebar__footer', className)}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarRoot = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSidebarElement>(\n    {\n      children,\n      className,\n      style,\n      contrast = true,\n      as,\n      ...rest\n    }: SidebarProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const WrapperElement = contrast ? Contrast : 'div';\n    return (\n      <Grid.Item as={WrapperElement} colSpan=\"1 / 2\">\n        <Flex\n          ref={ref}\n          as={as || defaultSidebarElement}\n          direction=\"column\"\n          gap=\"m\"\n          className={classNames(\n            'eds-layout-template-sidebar',\n            {\n              'eds-layout-template-sidebar--plain': !contrast,\n            },\n            className,\n          )}\n          style={style}\n          {...rest}\n        >\n          {children}\n        </Flex>\n      </Grid.Item>\n    );\n  },\n);\n\nexport type SidebarComponent = typeof SidebarRoot & {\n  Logo: typeof SidebarLogo;\n  User: typeof SidebarUser;\n  Data: typeof SidebarData;\n  Navigation: typeof SidebarNavigation;\n  Footer: typeof SidebarFooter;\n};\n\nexport const Sidebar: SidebarComponent = Object.assign(SidebarRoot, {\n  Logo: SidebarLogo,\n  User: SidebarUser,\n  Data: SidebarData,\n  Navigation: SidebarNavigation,\n  Footer: SidebarFooter,\n});\n\nSidebar.displayName = 'Template.Portal.Sidebar';\nSidebar.Logo.displayName = 'Template.Portal.Sidebar.Logo';\nSidebar.User.displayName = 'Template.Portal.Sidebar.User';\nSidebar.Data.displayName = 'Template.Portal.Sidebar.Data';\nSidebar.Navigation.displayName = 'Template.Portal.Sidebar.Navigation';\nSidebar.Footer.displayName = 'Template.Portal.Sidebar.Footer';\n"],"names":["Grid","Flex"],"mappings":";;;;;;;AAsBA,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAC9B,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAU7B,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACE,oBAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACE,oBAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACE,oBAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,WAAW,uCAAuC,SAAS;AAAA,QACrE,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,iBAAiB,WAAW,WAAW;AAC7C,+BACGA,cAAK,MAAL,EAAU,IAAI,gBAAgB,SAAQ,SACrC,UAAA;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,WAAU;AAAA,QACV,KAAI;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,sCAAsC,CAAC;AAAA,UAAA;AAAA,UAEzC;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAUO,MAAM,UAA4B,OAAO,OAAO,aAAa;AAAA,EAClE,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AACV,CAAC;AAED,QAAQ,cAAc;AACtB,QAAQ,KAAK,cAAc;AAC3B,QAAQ,KAAK,cAAc;AAC3B,QAAQ,KAAK,cAAc;AAC3B,QAAQ,WAAW,cAAc;AACjC,QAAQ,OAAO,cAAc;"}
+{"version":3,"file":"Sidebar.mjs","sources":["../../../../src/beta/templates/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport { useControllableProp } from '@entur/utils';\nimport classNames from 'classnames';\nimport { LeftArrowIcon, RightArrowIcon } from '@entur/icons';\nimport { Contrast } from '../../Contrast';\nimport { Flex } from '../Flex';\nimport { Grid } from '../Grid';\nimport { SidebarContext } from './SidebarContext';\nimport './Sidebar.scss';\n\ntype SidebarOwnProps = {\n  /** Toggle contrast styling for the sidebar */\n  contrast?: boolean;\n  /** Enable collapse functionality */\n  collapsible?: boolean;\n  /** Controlled collapsed state */\n  collapsed?: boolean;\n  /** Callback when the sidebar is toggled */\n  onCollapseToggle?: (collapsed: boolean) => void;\n  /** aria-label for the toggle button when the sidebar is collapsed\n   * @default 'Åpne sidemeny'\n   */\n  openSidebarAriaLabel?: string;\n  /** aria-label for the toggle button when the sidebar is expanded\n   * @default 'Lukk sidemeny'\n   */\n  closeSidebarAriaLabel?: string;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\ntype SidebarSectionOwnProps = {\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n};\n\nconst defaultSidebarElement = 'aside';\nconst defaultSectionElement = 'div';\nconst defaultNavigationElement = 'nav';\nconst defaultFooterElement = 'footer';\n\nexport type SidebarProps<\n  T extends React.ElementType = typeof defaultSidebarElement,\n> = PolymorphicComponentProps<T, SidebarOwnProps>;\n\nexport type SidebarSectionProps<\n  T extends React.ElementType = typeof defaultSectionElement,\n> = PolymorphicComponentProps<T, SidebarSectionOwnProps>;\n\nconst SidebarLogo = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarUser = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarData = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSectionElement>(\n    { children, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultSectionElement;\n    return (\n      <Element ref={ref} {...rest}>\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarNavigation = React.forwardRef(\n  <E extends React.ElementType = typeof defaultNavigationElement>(\n    { children, className, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultNavigationElement;\n    return (\n      <Element\n        ref={ref}\n        className={classNames(\n          'eds-layout-template-sidebar__navigation',\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst SidebarFooter = React.forwardRef(\n  <E extends React.ElementType = typeof defaultFooterElement>(\n    { children, className, as, ...rest }: SidebarSectionProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const Element: React.ElementType = as || defaultFooterElement;\n    return (\n      <Element\n        ref={ref}\n        className={classNames('eds-layout-template-sidebar__footer', className)}\n        {...rest}\n      >\n        {children}\n      </Element>\n    );\n  },\n);\n\nconst CollapseToggle: React.FC<{\n  isCollapsed: boolean;\n  onToggle: () => void;\n  openLabel: string;\n  closeLabel: string;\n}> = ({ isCollapsed, onToggle, openLabel, closeLabel }) => (\n  <button\n    type=\"button\"\n    className=\"eds-layout-template-sidebar__collapse-toggle\"\n    onClick={onToggle}\n    aria-expanded={!isCollapsed}\n    aria-label={isCollapsed ? openLabel : closeLabel}\n  >\n    {isCollapsed ? <RightArrowIcon size={16} /> : <LeftArrowIcon size={16} />}\n  </button>\n);\n\nconst SidebarRoot = React.forwardRef(\n  <E extends React.ElementType = typeof defaultSidebarElement>(\n    {\n      children,\n      className,\n      style,\n      contrast = true,\n      collapsible = false,\n      collapsed,\n      onCollapseToggle,\n      openSidebarAriaLabel = 'Åpne sidemeny',\n      closeSidebarAriaLabel = 'Lukk sidemeny',\n      as,\n      ...rest\n    }: SidebarProps<E>,\n    ref?: React.Ref<Element>,\n  ) => {\n    const handleCollapseToggle: (value?: boolean) => void = value => {\n      if (value === undefined || !onCollapseToggle) {\n        return;\n      }\n      onCollapseToggle(value);\n    };\n\n    const [isCollapsed, setIsCollapsed] = useControllableProp({\n      prop: collapsible ? collapsed : undefined,\n      defaultValue: false,\n      updater: handleCollapseToggle,\n    });\n\n    const WrapperElement = contrast ? Contrast : 'div';\n\n    const sidebarClassNames = classNames(\n      'eds-layout-template-sidebar',\n      {\n        'eds-layout-template-sidebar--plain': !contrast,\n        'eds-layout-template-sidebar--collapsible': collapsible,\n        'eds-layout-template-sidebar--collapsed': collapsible && isCollapsed,\n      },\n      className,\n    );\n\n    if (!collapsible) {\n      return (\n        <Grid.Item as={WrapperElement} colSpan=\"1 / 2\">\n          <Flex\n            ref={ref}\n            as={as || defaultSidebarElement}\n            direction=\"column\"\n            gap=\"m\"\n            className={sidebarClassNames}\n            style={style}\n            {...rest}\n          >\n            {children}\n          </Flex>\n        </Grid.Item>\n      );\n    }\n\n    const collapsedStyle = isCollapsed\n      ? ({ ...style, '--eds-sidebar-width': '2rem' } as React.CSSProperties)\n      : style;\n\n    return (\n      <Grid.Item\n        as={WrapperElement}\n        colSpan=\"1 / 2\"\n        className=\"eds-layout-template-sidebar-wrapper\"\n      >\n        <SidebarContext.Provider value={{ isCollapsed }}>\n          <Flex\n            ref={ref}\n            as={as || defaultSidebarElement}\n            direction=\"column\"\n            gap=\"m\"\n            className={sidebarClassNames}\n            style={collapsedStyle}\n            {...rest}\n          >\n            <div className=\"eds-layout-template-sidebar__content\">\n              {children}\n            </div>\n          </Flex>\n          <CollapseToggle\n            isCollapsed={isCollapsed}\n            onToggle={() => setIsCollapsed(!isCollapsed)}\n            openLabel={openSidebarAriaLabel}\n            closeLabel={closeSidebarAriaLabel}\n          />\n        </SidebarContext.Provider>\n      </Grid.Item>\n    );\n  },\n);\n\nexport type SidebarComponent = typeof SidebarRoot & {\n  Logo: typeof SidebarLogo;\n  User: typeof SidebarUser;\n  Data: typeof SidebarData;\n  Navigation: typeof SidebarNavigation;\n  Footer: typeof SidebarFooter;\n};\n\nexport const Sidebar: SidebarComponent = Object.assign(SidebarRoot, {\n  Logo: SidebarLogo,\n  User: SidebarUser,\n  Data: SidebarData,\n  Navigation: SidebarNavigation,\n  Footer: SidebarFooter,\n});\n\nSidebar.displayName = 'Template.Portal.Sidebar';\nSidebar.Logo.displayName = 'Template.Portal.Sidebar.Logo';\nSidebar.User.displayName = 'Template.Portal.Sidebar.User';\nSidebar.Data.displayName = 'Template.Portal.Sidebar.Data';\nSidebar.Navigation.displayName = 'Template.Portal.Sidebar.Navigation';\nSidebar.Footer.displayName = 'Template.Portal.Sidebar.Footer';\n"],"names":["Grid","Flex"],"mappings":"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"}

package/dist/beta/esm/templates/SidebarContext.mjs

@@ -0,0 +1,10 @@
+import React from "react";
+const SidebarContext = React.createContext({
+  isCollapsed: false
+});
+const useSidebarCollapsed = () => React.useContext(SidebarContext);
+export {
+  SidebarContext,
+  useSidebarCollapsed
+};
+//# sourceMappingURL=SidebarContext.mjs.map

package/dist/beta/esm/templates/SidebarContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarContext.mjs","sources":["../../../../src/beta/templates/SidebarContext.tsx"],"sourcesContent":["import React from 'react';\n\nexport const SidebarContext = React.createContext<{\n  isCollapsed: boolean;\n}>({\n  isCollapsed: false,\n});\n\n/** Hook to read the collapsed state of the nearest `Template.Portal.Sidebar`.\n *  Returns `{ isCollapsed: false }` when used outside a collapsible sidebar. */\nexport const useSidebarCollapsed: () => { isCollapsed: boolean } = () =>\n  React.useContext(SidebarContext);\n"],"names":[],"mappings":";AAEO,MAAM,iBAAiB,MAAM,cAEjC;AAAA,EACD,aAAa;AACf,CAAC;AAIM,MAAM,sBAAsD,MACjE,MAAM,WAAW,cAAc;"}

package/dist/beta/esm/templates/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../../../src/beta/templates/index.ts"],"sourcesContent":["import { Portal } from './portal';\nimport type {\n  PortalComponent,\n  PortalMainProps,\n  PortalProps,\n  PortalStatusBarProps,\n} from './portal';\nimport type {\n  SidebarComponent,\n  SidebarProps,\n  SidebarSectionProps,\n} from './Sidebar';\n\nexport type TemplateComponent = {\n  Portal: PortalComponent;\n};\n\nexport const Template: TemplateComponent = {\n  Portal,\n};\n\nexport type {\n  PortalComponent,\n  PortalMainProps,\n  PortalProps,\n  PortalStatusBarProps,\n  SidebarComponent,\n  SidebarProps,\n  SidebarSectionProps,\n};\n"],"names":[],"mappings":";AAiBO,MAAM,WAA8B;AAAA,EACzC;AACF;"}
+{"version":3,"file":"index.mjs","sources":["../../../../src/beta/templates/index.ts"],"sourcesContent":["import { Portal } from './portal';\nimport type {\n  PortalComponent,\n  PortalMainProps,\n  PortalProps,\n  PortalStatusBarProps,\n} from './portal';\nimport type {\n  SidebarComponent,\n  SidebarProps,\n  SidebarSectionProps,\n} from './Sidebar';\n\nexport { useSidebarCollapsed } from './SidebarContext';\n\nexport type TemplateComponent = {\n  Portal: PortalComponent;\n};\n\nexport const Template: TemplateComponent = {\n  Portal,\n};\n\nexport type {\n  PortalComponent,\n  PortalMainProps,\n  PortalProps,\n  PortalStatusBarProps,\n  SidebarComponent,\n  SidebarProps,\n  SidebarSectionProps,\n};\n"],"names":[],"mappings":";AAmBO,MAAM,WAA8B;AAAA,EACzC;AACF;"}

package/dist/beta/esm/templates/portal/Portal.mjs

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React from "react";
 import classNames from "classnames";
-import { GridComponent } from "../../Grid/index.mjs";
+import { Grid as GridComponent } from "../../Grid/index.mjs";
 import { Sidebar } from "../Sidebar.mjs";
 /* empty css             */
 const defaultStatusBarElement = "div";

package/dist/beta/styles/index.css

@@ -164,12 +164,24 @@
      -moz-box-flex:1;
           flex:1 1 0%;
 }.eds-layout-template-sidebar{
-  padding:1rem;
-  padding:var(--eds-sidebar-padding, 1rem);
+  padding:2rem;
+  padding:var(--eds-sidebar-padding, 2rem);
   height:100%;
   width:20rem;
   width:var(--eds-sidebar-width, 20rem);
 }
+.eds-layout-template-sidebar--collapsible{
+  overflow:hidden;
+  contain:inline-size;
+  -webkit-transition:width ease-in-out 0.2s;
+  -o-transition:width ease-in-out 0.2s;
+  -moz-transition:width ease-in-out 0.2s;
+  transition:width ease-in-out 0.2s;
+}
+.eds-layout-template-sidebar--collapsed{
+  padding:2rem 0;
+  padding:var(--eds-sidebar-padding, 2rem) 0;
+}
 
 .eds-layout-template-sidebar--plain{
   background-color:var(--components-menu-sidenavigation-standard-background);
@@ -180,26 +192,124 @@
   -webkit-flex:1 1 auto;
      -moz-box-flex:1;
           flex:1 1 auto;
-  margin-left:-webkit-calc(-1 * 1rem);
-  margin-left:-moz-calc(-1 * 1rem);
-  margin-left:calc(-1 * 1rem);
-  margin-left:-webkit-calc(-1 * var(--eds-sidebar-padding, 1rem));
-  margin-left:-moz-calc(-1 * var(--eds-sidebar-padding, 1rem));
-  margin-left:calc(-1 * var(--eds-sidebar-padding, 1rem));
-  margin-right:-webkit-calc(-1 * 1rem);
-  margin-right:-moz-calc(-1 * 1rem);
-  margin-right:calc(-1 * 1rem);
-  margin-right:-webkit-calc(-1 * var(--eds-sidebar-padding, 1rem));
-  margin-right:-moz-calc(-1 * var(--eds-sidebar-padding, 1rem));
-  margin-right:calc(-1 * var(--eds-sidebar-padding, 1rem));
+  margin-left:-webkit-calc(-1 * 2rem);
+  margin-left:-moz-calc(-1 * 2rem);
+  margin-left:calc(-1 * 2rem);
+  margin-left:-webkit-calc(-1 * var(--eds-sidebar-padding, 2rem));
+  margin-left:-moz-calc(-1 * var(--eds-sidebar-padding, 2rem));
+  margin-left:calc(-1 * var(--eds-sidebar-padding, 2rem));
+  margin-right:-webkit-calc(-1 * 2rem);
+  margin-right:-moz-calc(-1 * 2rem);
+  margin-right:calc(-1 * 2rem);
+  margin-right:-webkit-calc(-1 * var(--eds-sidebar-padding, 2rem));
+  margin-right:-moz-calc(-1 * var(--eds-sidebar-padding, 2rem));
+  margin-right:calc(-1 * var(--eds-sidebar-padding, 2rem));
 }
 
 .eds-layout-template-sidebar__footer{
   margin-top:auto;
+}
+
+.eds-layout-template-sidebar__content{
+  display:-webkit-box;
+  display:-webkit-flex;
+  display:-moz-box;
+  display:flex;
+  -webkit-box-orient:vertical;
+  -webkit-box-direction:normal;
+  -webkit-flex-direction:column;
+     -moz-box-orient:vertical;
+     -moz-box-direction:normal;
+          flex-direction:column;
+  gap:var(--m);
+  -webkit-box-flex:1;
+  -webkit-flex:1 0 auto;
+     -moz-box-flex:1;
+          flex:1 0 auto;
+  min-width:-webkit-calc(20rem - 2 * 2rem);
+  min-width:-moz-calc(20rem - 2 * 2rem);
+  min-width:calc(20rem - 2 * 2rem);
+  min-width:-webkit-calc(var(--eds-sidebar-width, 20rem) - 2 * var(--eds-sidebar-padding, 2rem));
+  min-width:-moz-calc(var(--eds-sidebar-width, 20rem) - 2 * var(--eds-sidebar-padding, 2rem));
+  min-width:calc(var(--eds-sidebar-width, 20rem) - 2 * var(--eds-sidebar-padding, 2rem));
+  opacity:1;
+  -webkit-transition:opacity ease-in 0.1s 0.2s;
+  -o-transition:opacity ease-in 0.1s 0.2s;
+  -moz-transition:opacity ease-in 0.1s 0.2s;
+  transition:opacity ease-in 0.1s 0.2s;
+}
+.eds-layout-template-sidebar--collapsed .eds-layout-template-sidebar__content{
+  opacity:0;
+  visibility:hidden;
+  -webkit-transition:opacity ease-out 0.1s, visibility 0s 0.1s;
+  -o-transition:opacity ease-out 0.1s, visibility 0s 0.1s;
+  -moz-transition:opacity ease-out 0.1s, visibility 0s 0.1s;
+  transition:opacity ease-out 0.1s, visibility 0s 0.1s;
+}
+
+.eds-layout-template-sidebar-wrapper{
+  position:relative;
+}
+
+.eds-layout-template-sidebar__collapse-toggle{
+  position:absolute;
+  right:-1rem;
+  bottom:2rem;
+  height:2rem;
+  width:2rem;
+  -webkit-border-radius:50%;
+     -moz-border-radius:50%;
+          border-radius:50%;
+  border:none;
+  cursor:pointer;
+  background-color:var(--basecolors-frame-default);
+  color:var(--text-dark);
+  -webkit-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
+     -moz-box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
+          box-shadow:0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.25);
+  display:-webkit-box;
+  display:-webkit-flex;
+  display:-moz-box;
+  display:flex;
+  -webkit-box-align:center;
+  -webkit-align-items:center;
+     -moz-box-align:center;
+          align-items:center;
+  -webkit-box-pack:center;
+  -webkit-justify-content:center;
+     -moz-box-pack:center;
+          justify-content:center;
+  z-index:10;
+  padding:0;
+}
+.eds-contrast .eds-layout-template-sidebar__collapse-toggle{
+  background-color:var(--basecolors-frame-contrastalt);
+  color:var(--basecolors-text-light);
+}
+.eds-layout-template-sidebar__collapse-toggle svg{
+  margin:0;
+}
+.eds-layout-template-sidebar__collapse-toggle:focus-visible{
+  outline:2px solid #181c56;
+  outline-color:var(--basecolors-stroke-focus-standard);
+  outline-offset:0.125rem;
+}
+.eds-contrast .eds-layout-template-sidebar__collapse-toggle:focus-visible{
+  outline-color:var(--basecolors-stroke-focus-contrast);
 }.eds-layout-template-portal{
   min-height:100vh;
   width:100%;
 }
+.eds-layout-template-portal:has(.eds-layout-template-sidebar--collapsible){
+  -webkit-transition:grid-template-columns ease-in-out 0.2s;
+  -o-transition:grid-template-columns ease-in-out 0.2s;
+  -moz-transition:grid-template-columns ease-in-out 0.2s;
+  transition:grid-template-columns ease-in-out 0.2s;
+  transition:grid-template-columns ease-in-out 0.2s, -ms-grid-columns ease-in-out 0.2s;
+}
+.eds-layout-template-portal:has(.eds-layout-template-sidebar--collapsed){
+  grid-template-columns:2rem minmax(0, 1fr);
+}
 .eds-layout-template-portal:has(> .eds-layout-template-portal__status-bar){
   --grid-template-rows:auto 1fr;
 }

package/dist/beta/types/index.d.ts

@@ -1,7 +1,7 @@
 export { Grid, GridItem } from './Grid';
 export { LayoutWrapper, useLayoutValues } from './LayoutWrapper';
 export { Flex, FlexSpacer } from './Flex';
-export { Template } from './templates';
+export { Template, useSidebarCollapsed } from './templates';
 export type { GridProps, GridOwnProps, GridItemProps, GridItemOwnProps, GridSpacingValue, ResponsiveValue, } from './Grid';
 export type { FlexProps, FlexOwnProps, FlexSpacingValue, FlexSpacerProps, FlexSpacerOwnProps, } from './Flex';
 export type { PortalComponent, PortalMainProps, PortalProps, PortalStatusBarProps, SidebarComponent, SidebarProps, SidebarSectionProps, TemplateComponent, } from './templates';

package/dist/beta/types/templates/Sidebar.d.ts

@@ -3,6 +3,20 @@ import { PolymorphicComponentProps } from '@entur/utils';
 type SidebarOwnProps = {
     /** Toggle contrast styling for the sidebar */
     contrast?: boolean;
+    /** Enable collapse functionality */
+    collapsible?: boolean;
+    /** Controlled collapsed state */
+    collapsed?: boolean;
+    /** Callback when the sidebar is toggled */
+    onCollapseToggle?: (collapsed: boolean) => void;
+    /** aria-label for the toggle button when the sidebar is collapsed
+     * @default 'Åpne sidemeny'
+     */
+    openSidebarAriaLabel?: string;
+    /** aria-label for the toggle button when the sidebar is expanded
+     * @default 'Lukk sidemeny'
+     */
+    closeSidebarAriaLabel?: string;
     className?: string;
     style?: React.CSSProperties;
     children?: React.ReactNode;

package/dist/beta/types/templates/SidebarContext.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export declare const SidebarContext: React.Context<{
+    isCollapsed: boolean;
+}>;
+/** Hook to read the collapsed state of the nearest `Template.Portal.Sidebar`.
+ *  Returns `{ isCollapsed: false }` when used outside a collapsible sidebar. */
+export declare const useSidebarCollapsed: () => {
+    isCollapsed: boolean;
+};

package/dist/beta/types/templates/index.d.ts

@@ -1,5 +1,6 @@
 import { PortalComponent, PortalMainProps, PortalProps, PortalStatusBarProps } from './portal';
 import { SidebarComponent, SidebarProps, SidebarSectionProps } from './Sidebar';
+export { useSidebarCollapsed } from './SidebarContext';
 export type TemplateComponent = {
     Portal: PortalComponent;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@entur/layout",
-  "version": "3.4.2",
+  "version": "3.5.0",
   "license": "EUPL-1.2",
   "main": "dist/layout.cjs.js",
   "module": "dist/layout.esm.js",
@@ -51,10 +51,10 @@
     "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@entur/icons": "^8.4.3",
-    "@entur/tokens": "^3.22.2",
-    "@entur/typography": "^2.1.4",
-    "@entur/utils": "^0.13.1",
+    "@entur/icons": "^8.4.4",
+    "@entur/tokens": "^3.22.3",
+    "@entur/typography": "^2.1.5",
+    "@entur/utils": "^0.13.2",
     "classnames": "^2.5.1"
   },
   "devDependencies": {
@@ -70,5 +70,5 @@
     "vite": "^7.1.3",
     "vite-plugin-dts": "^4.5.4"
   },
-  "gitHead": "ee1f35746ed0ce1e2ab24377ec9d1bb78f6fabac"
+  "gitHead": "9ac8be0952badd4043470e47e50992369ada2c11"
 }