@zanichelli/albe-web-components 16.3.6 → 16.4.0-rc-2

package/dist/collection/components/z-offcanvas/index.stories.js

@@ -7,6 +7,26 @@ const StoryMeta = {
     component: "z-offcanvas",
     parameters: {
         layout: "fullscreen",
+        openOffcanvas: () => {
+            const offcanvas = document.querySelector("z-offcanvas");
+            if (!offcanvas) {
+                return;
+            }
+            offcanvas.open = true;
+        },
+        closeOffcanvas: () => {
+            const offcanvas = document.querySelector("z-offcanvas");
+            if (!offcanvas) {
+                return;
+            }
+            offcanvas.open = false;
+        },
+        docs: {
+            story: {
+                inline: false,
+                iframeHeight: "600px",
+            },
+        },
     },
     argTypes: {
         variant: {
@@ -23,174 +43,124 @@ const StoryMeta = {
         },
     },
     args: {
-        variant: OffCanvasVariant.PUSHCONTENT,
-        open: true,
+        "open": true,
+        "--z-offcanvas--top-space": "0px",
+        "--z-offcanvas--container-width": "375px",
     },
 };
 export default StoryMeta;
-export const EnterRight = {
-    args: {
-        transitiondirection: TransitionDirection.RIGHT,
-    },
-    render: (args) => html `<div id="offcanvas-story-container">
+const DEMO_TEXT = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus. Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros. Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique. Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex. Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo. Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus, purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor, ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.";
+export const OverlayTransitionDirectionRight = {
+    render: (args, context) => html `<div id="offcanvas-story-container">
       <z-offcanvas
-        .variant=${args.variant}
+        .variant=${OffCanvasVariant.OVERLAY}
         .open=${args.open}
-        .transitiondirection=${args.transitiondirection}
-        =""
+        .transitiondirection=${TransitionDirection.RIGHT}
+        style="--z-offcanvas--top-space: ${args["--z-offcanvas--top-space"]}; --z-offcanvas--container-width: ${args["--z-offcanvas--container-width"]}"
       >
         <div slot="canvasContent">
-          <span>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac
-            augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus.
-            Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis
-            magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget
-            velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum
-            magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis
-            rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros.
-            Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non
-            ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique.
-            Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora
-            torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis
-            tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu
-            sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac
-            habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit
-            dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex.
-            Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut
-            iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo.
-            Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam
-            convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et
-            malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam
-            venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu
-            turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna
-            tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet
-            aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus,
-            purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor,
-            ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae
-            sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.
-          </span>
+          <button
+            class="offcanvas-close"
+            .onclick=${context.parameters.closeOffcanvas}
+          >
+            <z-icon name="close" />
+          </button>
+          <p>${DEMO_TEXT}</p>
         </div>
       </z-offcanvas>
-      <div id="offcanvas-boxes-container">
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
+      <div class="offcanvas-story-content">
+        <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>
       </div>
     </div>`,
 };
-export const EnterLeft = {
+export const OverlayTransitionDirectionLeft = {
+    render: (args, context) => html `<div id="offcanvas-story-container">
+      <div class="offcanvas-story-content">
+        <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>
+      </div>
+      <z-offcanvas
+        .variant=${OffCanvasVariant.OVERLAY}
+        .open=${args.open}
+        .transitiondirection=${TransitionDirection.LEFT}
+        style="--z-offcanvas--top-space: ${args["--z-offcanvas--top-space"]}; --z-offcanvas--container-width: ${args["--z-offcanvas--container-width"]}"
+      >
+        <div slot="canvasContent">
+          <button
+            class="offcanvas-close"
+            .onclick=${context.parameters.closeOffcanvas}
+          >
+            <z-icon name="close" />
+          </button>
+          <p>${DEMO_TEXT}</p>
+        </div>
+      </z-offcanvas>
+      ${args.transitiondirection === "right" ? html `<div class="offcanvas-story-content"></div>` : ""}
+    </div>`,
+};
+export const TransitionDirectionUp = {
+    parameters: {
+        controls: {
+            exclude: ["variant", "transitiondirection", "--z-offcanvas--top-space", "--z-offcanvas--container-width"],
+        },
+    },
     args: {
-        transitiondirection: TransitionDirection.LEFT,
+        "--z-offcanvas--container-height": "90%",
     },
-    render: (args) => html `<div
-      id="offcanvas-story-container"
-      class="offcanvas-left"
-    >
-      <div id="offcanvas-boxes-container">
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
+    render: (args, context) => html `<div id="offcanvas-story-container">
+      <div class="offcanvas-story-content">
+        <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>
       </div>
       <z-offcanvas
-        .variant=${args.variant}
         .open=${args.open}
-        .skipLoadAnimation=${args.skipLoadAnimation}
-        .transitiondirection=${args.transitiondirection}
-        =""
+        .variant=${OffCanvasVariant.OVERLAY}
+        .transitiondirection=${TransitionDirection.UP}
+        style="--z-offcanvas--container-height: ${args["--z-offcanvas--container-height"]}"
       >
         <div slot="canvasContent">
-          <span>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac
-            augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus.
-            Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis
-            magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget
-            velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum
-            magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis
-            rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros.
-            Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non
-            ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique.
-            Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora
-            torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis
-            tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu
-            sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac
-            habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit
-            dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex.
-            Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut
-            iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo.
-            Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam
-            convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et
-            malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam
-            venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu
-            turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna
-            tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet
-            aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus,
-            purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor,
-            ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae
-            sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.
-          </span>
+          <button
+            class="offcanvas-close"
+            .onclick=${context.parameters.closeOffcanvas}
+          >
+            <z-icon name="close" />
+          </button>
+          <p>${DEMO_TEXT}</p>
         </div>
       </z-offcanvas>
     </div>`,
 };
-export const SkipLoadAnimation = {
+export const PushContent = {
+    parameters: {
+        controls: {
+            exclude: ["variant", "--z-offcanvas--top-space"],
+        },
+    },
     args: {
-        transitiondirection: TransitionDirection.LEFT,
-        skipLoadAnimation: true,
+        transitiondirection: TransitionDirection.RIGHT,
     },
-    render: (args) => html `<div
+    render: (args, context) => html `<div
+      class="pushcontent-story ${args.transitiondirection}"
       id="offcanvas-story-container"
-      class="offcanvas-left"
     >
-      <div id="offcanvas-boxes-container">
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-        <div></div>
-      </div>
       <z-offcanvas
-        .variant=${args.variant}
         .open=${args.open}
-        .skipLoadAnimation=${args.skipLoadAnimation}
+        .variant=${OffCanvasVariant.PUSHCONTENT}
         .transitiondirection=${args.transitiondirection}
-        =""
+        style="--z-offcanvas--container-width: ${args["--z-offcanvas--container-width"]}"
       >
         <div slot="canvasContent">
-          <span>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac
-            augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus.
-            Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis
-            magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget
-            velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum
-            magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis
-            rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros.
-            Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non
-            ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique.
-            Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora
-            torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis
-            tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu
-            sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac
-            habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit
-            dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex.
-            Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut
-            iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo.
-            Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam
-            convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et
-            malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam
-            venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu
-            turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna
-            tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet
-            aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus,
-            purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor,
-            ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae
-            sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.
-          </span>
+          <button
+            class="offcanvas-close"
+            .onclick=${context.parameters.closeOffcanvas}
+          >
+            <z-icon name="close" />
+          </button>
+          <p>Offcanvas content</p>
         </div>
       </z-offcanvas>
+
+      <div class="offcanvas-story-content">
+        <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>
+      </div>
     </div>`,
 };
 //# sourceMappingURL=index.stories.js.map

package/dist/collection/components/z-offcanvas/index.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-offcanvas/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAEzB,OAAO,EAAC,gBAAgB,EAAE,mBAAmB,EAAC,MAAM,aAAa,CAAC;AAClE,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAE7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,aAAa;IACxB,UAAU,EAAE;QACV,MAAM,EAAE,YAAY;KACrB;IACD,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,gBAAgB,CAAC;SACzC;QACD,mBAAmB,EAAE;YACnB,OAAO,EAAE;gBACP,IAAI,EAAE,cAAc;aACrB;YACD,OAAO,EAAE,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC;SAC5C;KACF;IACD,IAAI,EAAE;QACJ,OAAO,EAAE,gBAAgB,CAAC,WAAW;QACrC,IAAI,EAAE,IAAI;KACX;CACyB,CAAC;AAC7B,eAAe,SAAS,CAAC;AAGzB,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE;QACJ,mBAAmB,EAAE,mBAAmB,CAAC,KAAK;KAC/C;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;mBAEW,IAAI,CAAC,OAAO;gBACf,IAAI,CAAC,IAAI;+BACM,IAAI,CAAC,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA0C5C;CACM,CAAC;AAElB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,mBAAmB,EAAE,mBAAmB,CAAC,IAAI;KAC9C;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;;;;;;;mBAYW,IAAI,CAAC,OAAO;gBACf,IAAI,CAAC,IAAI;6BACI,IAAI,CAAC,iBAAiB;+BACpB,IAAI,CAAC,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAmC5C;CACM,CAAC;AAElB,MAAM,CAAC,MAAM,iBAAiB,GAAG;IAC/B,IAAI,EAAE;QACJ,mBAAmB,EAAE,mBAAmB,CAAC,IAAI;QAC7C,iBAAiB,EAAE,IAAI;KACxB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CACf,IAAI,CAAA;;;;;;;;;;;;mBAYW,IAAI,CAAC,OAAO;gBACf,IAAI,CAAC,IAAI;6BACI,IAAI,CAAC,iBAAiB;+BACpB,IAAI,CAAC,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAmC5C;CACM,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZOffcanvas} from \".\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\nconst StoryMeta = {\n  title: \"ZOffcanvas\",\n  component: \"z-offcanvas\",\n  parameters: {\n    layout: \"fullscreen\",\n  },\n  argTypes: {\n    variant: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(OffCanvasVariant),\n    },\n    transitiondirection: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(TransitionDirection),\n    },\n  },\n  args: {\n    variant: OffCanvasVariant.PUSHCONTENT,\n    open: true,\n  },\n} satisfies Meta<ZOffcanvas>;\nexport default StoryMeta;\n\ntype Story = StoryObj<ZOffcanvas>;\nexport const EnterRight = {\n  args: {\n    transitiondirection: TransitionDirection.RIGHT,\n  },\n  render: (args) =>\n    html`<div id=\"offcanvas-story-container\">\n      <z-offcanvas\n        .variant=${args.variant}\n        .open=${args.open}\n        .transitiondirection=${args.transitiondirection}\n        =\"\"\n      >\n        <div slot=\"canvasContent\">\n          <span>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac\n            augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus.\n            Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis\n            magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget\n            velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum\n            magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis\n            rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros.\n            Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non\n            ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique.\n            Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora\n            torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis\n            tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu\n            sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac\n            habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit\n            dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex.\n            Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut\n            iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo.\n            Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam\n            convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et\n            malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam\n            venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu\n            turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna\n            tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet\n            aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus,\n            purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor,\n            ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae\n            sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.\n          </span>\n        </div>\n      </z-offcanvas>\n      <div id=\"offcanvas-boxes-container\">\n        <div></div>\n        <div></div>\n        <div></div>\n        <div></div>\n        <div></div>\n      </div>\n    </div>`,\n} satisfies Story;\n\nexport const EnterLeft = {\n  args: {\n    transitiondirection: TransitionDirection.LEFT,\n  },\n  render: (args) =>\n    html`<div\n      id=\"offcanvas-story-container\"\n      class=\"offcanvas-left\"\n    >\n      <div id=\"offcanvas-boxes-container\">\n        <div></div>\n        <div></div>\n        <div></div>\n        <div></div>\n        <div></div>\n      </div>\n      <z-offcanvas\n        .variant=${args.variant}\n        .open=${args.open}\n        .skipLoadAnimation=${args.skipLoadAnimation}\n        .transitiondirection=${args.transitiondirection}\n        =\"\"\n      >\n        <div slot=\"canvasContent\">\n          <span>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac\n            augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus.\n            Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis\n            magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget\n            velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum\n            magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis\n            rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros.\n            Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non\n            ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique.\n            Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora\n            torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis\n            tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu\n            sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac\n            habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit\n            dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex.\n            Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut\n            iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo.\n            Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam\n            convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et\n            malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam\n            venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu\n            turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna\n            tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet\n            aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus,\n            purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor,\n            ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae\n            sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.\n          </span>\n        </div>\n      </z-offcanvas>\n    </div>`,\n} satisfies Story;\n\nexport const SkipLoadAnimation = {\n  args: {\n    transitiondirection: TransitionDirection.LEFT,\n    skipLoadAnimation: true,\n  },\n  render: (args) =>\n    html`<div\n      id=\"offcanvas-story-container\"\n      class=\"offcanvas-left\"\n    >\n      <div id=\"offcanvas-boxes-container\">\n        <div></div>\n        <div></div>\n        <div></div>\n        <div></div>\n        <div></div>\n      </div>\n      <z-offcanvas\n        .variant=${args.variant}\n        .open=${args.open}\n        .skipLoadAnimation=${args.skipLoadAnimation}\n        .transitiondirection=${args.transitiondirection}\n        =\"\"\n      >\n        <div slot=\"canvasContent\">\n          <span>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac\n            augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus.\n            Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis\n            magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget\n            velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum\n            magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis\n            rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros.\n            Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non\n            ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique.\n            Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora\n            torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis\n            tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu\n            sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac\n            habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit\n            dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex.\n            Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut\n            iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo.\n            Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam\n            convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et\n            malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam\n            venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu\n            turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna\n            tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet\n            aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus,\n            purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor,\n            ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae\n            sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.\n          </span>\n        </div>\n      </z-offcanvas>\n    </div>`,\n} satisfies Story;\n"]}
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/z-offcanvas/index.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {ZOffcanvas} from \".\";\nimport {OffCanvasVariant, TransitionDirection} from \"../../beans\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZOffcanvasStoriesArgs = ZOffcanvas &\n  CSSVarsArguments<\"z-offcanvas--top-space\" | \"--z-offcanvas--container-width\" | \"--z-offcanvas--container-height\">;\n\nconst StoryMeta = {\n  title: \"ZOffcanvas\",\n  component: \"z-offcanvas\",\n  parameters: {\n    layout: \"fullscreen\",\n    openOffcanvas: (): void => {\n      const offcanvas = document.querySelector(\"z-offcanvas\") as HTMLZOffcanvasElement;\n      if (!offcanvas) {\n        return;\n      }\n\n      offcanvas.open = true;\n    },\n    closeOffcanvas: (): void => {\n      const offcanvas = document.querySelector(\"z-offcanvas\") as HTMLZOffcanvasElement;\n      if (!offcanvas) {\n        return;\n      }\n\n      offcanvas.open = false;\n    },\n    docs: {\n      story: {\n        inline: false,\n        iframeHeight: \"600px\",\n      },\n    },\n  },\n  argTypes: {\n    variant: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(OffCanvasVariant),\n    },\n    transitiondirection: {\n      control: {\n        type: \"inline-radio\",\n      },\n      options: Object.values(TransitionDirection),\n    },\n  },\n  args: {\n    \"open\": true,\n    \"--z-offcanvas--top-space\": \"0px\",\n    \"--z-offcanvas--container-width\": \"375px\",\n  },\n} satisfies Meta<ZOffcanvasStoriesArgs>;\nexport default StoryMeta;\n\ntype Story = StoryObj<ZOffcanvasStoriesArgs>;\n\nconst DEMO_TEXT =\n  \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus. Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros. Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique. Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex. Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo. Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet aliquet nibh.mybutton Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus, purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor, ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt.\";\n\nexport const OverlayTransitionDirectionRight = {\n  render: (args, context) =>\n    html`<div id=\"offcanvas-story-container\">\n      <z-offcanvas\n        .variant=${OffCanvasVariant.OVERLAY}\n        .open=${args.open}\n        .transitiondirection=${TransitionDirection.RIGHT}\n        style=\"--z-offcanvas--top-space: ${args[\"--z-offcanvas--top-space\"]}; --z-offcanvas--container-width: ${args[\n          \"--z-offcanvas--container-width\"\n        ]}\"\n      >\n        <div slot=\"canvasContent\">\n          <button\n            class=\"offcanvas-close\"\n            .onclick=${context.parameters.closeOffcanvas}\n          >\n            <z-icon name=\"close\" />\n          </button>\n          <p>${DEMO_TEXT}</p>\n        </div>\n      </z-offcanvas>\n      <div class=\"offcanvas-story-content\">\n        <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>\n      </div>\n    </div>`,\n} satisfies Story;\n\nexport const OverlayTransitionDirectionLeft = {\n  render: (args, context) =>\n    html`<div id=\"offcanvas-story-container\">\n      <div class=\"offcanvas-story-content\">\n        <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>\n      </div>\n      <z-offcanvas\n        .variant=${OffCanvasVariant.OVERLAY}\n        .open=${args.open}\n        .transitiondirection=${TransitionDirection.LEFT}\n        style=\"--z-offcanvas--top-space: ${args[\"--z-offcanvas--top-space\"]}; --z-offcanvas--container-width: ${args[\n          \"--z-offcanvas--container-width\"\n        ]}\"\n      >\n        <div slot=\"canvasContent\">\n          <button\n            class=\"offcanvas-close\"\n            .onclick=${context.parameters.closeOffcanvas}\n          >\n            <z-icon name=\"close\" />\n          </button>\n          <p>${DEMO_TEXT}</p>\n        </div>\n      </z-offcanvas>\n      ${args.transitiondirection === \"right\" ? html`<div class=\"offcanvas-story-content\"></div>` : \"\"}\n    </div>`,\n} satisfies Story;\n\nexport const TransitionDirectionUp = {\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"transitiondirection\", \"--z-offcanvas--top-space\", \"--z-offcanvas--container-width\"],\n    },\n  },\n  args: {\n    \"--z-offcanvas--container-height\": \"90%\",\n  },\n  render: (args, context) =>\n    html`<div id=\"offcanvas-story-container\">\n      <div class=\"offcanvas-story-content\">\n        <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>\n      </div>\n      <z-offcanvas\n        .open=${args.open}\n        .variant=${OffCanvasVariant.OVERLAY}\n        .transitiondirection=${TransitionDirection.UP}\n        style=\"--z-offcanvas--container-height: ${args[\"--z-offcanvas--container-height\"]}\"\n      >\n        <div slot=\"canvasContent\">\n          <button\n            class=\"offcanvas-close\"\n            .onclick=${context.parameters.closeOffcanvas}\n          >\n            <z-icon name=\"close\" />\n          </button>\n          <p>${DEMO_TEXT}</p>\n        </div>\n      </z-offcanvas>\n    </div>`,\n} satisfies Story;\n\nexport const PushContent = {\n  parameters: {\n    controls: {\n      exclude: [\"variant\", \"--z-offcanvas--top-space\"],\n    },\n  },\n  args: {\n    transitiondirection: TransitionDirection.RIGHT,\n  },\n  render: (args, context) =>\n    html`<div\n      class=\"pushcontent-story ${args.transitiondirection}\"\n      id=\"offcanvas-story-container\"\n    >\n      <z-offcanvas\n        .open=${args.open}\n        .variant=${OffCanvasVariant.PUSHCONTENT}\n        .transitiondirection=${args.transitiondirection}\n        style=\"--z-offcanvas--container-width: ${args[\"--z-offcanvas--container-width\"]}\"\n      >\n        <div slot=\"canvasContent\">\n          <button\n            class=\"offcanvas-close\"\n            .onclick=${context.parameters.closeOffcanvas}\n          >\n            <z-icon name=\"close\" />\n          </button>\n          <p>Offcanvas content</p>\n        </div>\n      </z-offcanvas>\n\n      <div class=\"offcanvas-story-content\">\n        <z-button .onclick=${context.parameters.openOffcanvas}>Apri offcanvas</z-button>\n      </div>\n    </div>`,\n} satisfies Story;\n"]}

package/dist/collection/components/z-offcanvas/styles.css

@@ -1,189 +1,148 @@
 :host {
   --z-offcanvas--container-width: ;
+  --z-offcanvas--container-height: ;
   --z-offcanvas--top-space: ;
 
-  min-width: 100%;
-  height: 100%;
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
 
+:host([variant="pushcontent"]:not([transitiondirection="up"])) {
+  overflow: hidden;
+  flex: none; /* Prevent unwanted width changes in flex containers */
+}
+
 .canvas-container {
   display: flex;
-  overflow: -moz-scrollbars-none;
   overflow: hidden;
   min-width: 100%;
   height: 100%;
-  flex-direction: column;
   background: var(--color-surface01);
+  transition: transform 0.4s ease-out;
 }
 
-:host([variant="pushcontent"]) {
-  display: none;
+:host > * {
+  position: fixed;
+  top: var(--z-offcanvas--top-space, 0);
+  right: 0;
+  bottom: 0;
+  left: 0;
 }
 
-:host([open]) {
-  display: flex;
-  visibility: visible;
+:host([open]) > * {
+  height: calc(100% - var(--z-offcanvas--top-space, 0px));
 }
 
-:host(:not([open])) {
-  visibility: hidden;
+:host([transitiondirection="right"]) > .canvas-container {
+  transform: translateX(-100%);
 }
 
-:host([variant="overlay"]) {
-  position: fixed;
-  z-index: 1000;
-  top: var(--z-offcanvas--top-space, 0);
-  right: 0;
+:host([transitiondirection="left"]) > .canvas-container {
+  transform: translateX(100%);
+}
+
+:host([open][transitiondirection="right"]) > .canvas-container,
+:host([open][transitiondirection="left"]) > .canvas-container {
+  transform: translateX(0);
+}
+
+:host([transitiondirection="up"]) > .canvas-container {
+  top: auto;
   bottom: 0;
-  left: 0;
-  display: flex;
-  height: calc(100% - var(--z-offcanvas--top-space, 0));
+  height: var(--z-offcanvas--container-height, 90%);
+  transform: translateY(100%);
 }
 
-:host([variant="overlay"][transitiondirection="left"]) {
-  justify-content: end;
+:host([transitiondirection="up"], [variant="overlay"]) > .canvas-container {
+  z-index: 1001;
 }
 
-:host([variant="overlay"]) > .canvas-container {
-  z-index: 1010;
+:host([open][transitiondirection="up"]) > .canvas-container {
+  transform: translateY(0);
 }
 
-:host([variant="overlay"]) .canvas-background {
-  position: absolute;
-  left: 0;
+:host([variant="pushcontent"]:not([transitiondirection="up"])) > .canvas-container {
+  position: relative;
+  height: 100%;
+}
+
+:host([variant="pushcontent"]:not([open])) > .canvas-container {
+  width: 0;
+  min-width: 0;
+  transition:
+    width 0.4s ease-out,
+    min-width 0.4s ease-out;
+}
+
+:host([variant="pushcontent"][transitiondirection="left"]) > .canvas-container {
+  /* the `width` transition is by default from right to left, which is the opposite of what we want it.
+  Setting the container to float to the right fixes it. */
+  float: right;
+}
+
+:host([skip-animation]) > .canvas-container {
+  transition: none;
+}
+
+.canvas-background {
+  z-index: 1000;
+  display: none;
   width: 100%;
   height: 100%;
   background-color: var(--gray900);
+}
+
+:host([open]) > .canvas-background {
+  display: block;
   opacity: 0.7;
 }
 
 .canvas-container > .canvas-content {
-  overflow: auto;
+  overflow: hidden auto;
   flex: 1 auto;
   padding: 0 calc(var(--space-unit) * 2);
   margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;
-  overflow-x: hidden;
-}
-
-:host([variant="overlay"]) > .canvas-container > .canvas-content {
-  padding: 0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);
-  margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0;
 }
 
 /* Webkit Scrollbar */
 .canvas-container .canvas-content::-webkit-scrollbar {
-  width: 10px;
-  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
-  border-radius: var(--border-radius);
-}
-
-.canvas-container .canvas-content::-webkit-scrollbar-track {
-  background-color: transparent;
+  width: 6px;
+  background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);
 }
 
 .canvas-container .canvas-content::-webkit-scrollbar-thumb {
-  width: 10px;
   background-color: var(--color-primary01);
-  border-radius: var(--border-radius);
 }
 
 .canvas-container .canvas-content::-webkit-scrollbar-thumb:hover {
   background-color: var(--color-hover-primary);
 }
 
-/* Firefox */
-.canvas-container .canvas-content {
-  scrollbar-color: var(--color-primary01) transparent;
-}
-
-/* Mobile */
-@media only screen and (max-width: 767px) {
-  :host([open][transitiondirection="left"]:not(.skip-animation)) > .canvas-container {
-    animation: enter-right 0.4s ease-out;
-  }
-
-  :host([open][transitiondirection="right"]:not(.skip-animation)) > .canvas-container {
-    animation: enter-left 0.4s ease-out;
+/* Firefox scrollbar */
+@supports not selector(.canvas-content::-webkit-scrollbar-track) {
+  .canvas-container .canvas-content {
+    scrollbar-color: var(--color-primary01) transparent;
   }
 }
 
 /* Tablet / Desktop */
-@media only screen and (min-width: 768px) {
-  :host {
-    min-width: auto;
-  }
-
+@media (min-width: 768px) {
   .canvas-container {
-    width: auto;
-    min-width: max(var(--z-offcanvas--container-width), 375px);
-    max-width: max(var(--z-offcanvas--container-width), 375px);
-    height: auto;
-    min-height: calc(var(--space-unit) * 40);
+    width: max(var(--z-offcanvas--container-width, 375px), 375px);
+    min-width: 375px;
   }
 
-  :host(:not([variant="overlay"])[open]:not(.skip-animation)) {
-    width: auto;
-    animation: grow 0.4s ease-out;
+  :host([transitiondirection="up"]) > .canvas-container {
+    width: 100%;
   }
-}
-
-/* ANIMATION */
 
-@keyframes grow {
-  from {
-    width: 0;
+  :host([transitiondirection="right"]) > .canvas-container {
+    right: auto;
+    left: 0;
   }
 
-  to {
-    width: max(var(--z-offcanvas--container-width), 375px);
+  :host([transitiondirection="left"]) > .canvas-container {
+    right: 0;
+    left: auto;
   }
 }
-
-@keyframes enter-left {
-  from {
-    transform: translateX(-100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes enter-right {
-  from {
-    transform: translateX(100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}
-
-:host([open][variant="overlay"][transitiondirection="left"]:not(.skip-animation)) > .canvas-container {
-  animation: enter-right 0.4s ease-out;
-}
-
-:host([open][transitiondirection="right"]:not(.skip-animation)) > .canvas-container {
-  animation: enter-left 0.4s ease-out;
-}
-
-:host(:not([open])[variant="overlay"][transitiondirection="right"]) > .canvas-container {
-  transform: translateX(-100%);
-  transition:
-    visibility 0.4s ease-out,
-    transform 0.4s ease-out;
-}
-
-:host(:not([open])[variant="overlay"][transitiondirection="left"]) > .canvas-container {
-  transform: translateX(100%);
-  transition:
-    visibility 0.4s ease-out,
-    transform 0.4s ease-out;
-}
-
-:host(:not([open])[variant="overlay"]) .canvas-background {
-  transition: visibility 0.4s ease-out;
-  visibility: hidden;
-}