kemet-ui 1.4.0 → 2.0.0

package/dist/src/components/kemet-scroll-nav/docs/stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../kemet-scroll-nav';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+declare const meta: Meta;
+export default meta;
+declare type Story = StoryObj;
+export declare const Resize: Story;
+export declare const Sticky: Story;

package/dist/src/components/kemet-scroll-nav/docs/stories.js

@@ -0,0 +1,162 @@
+import { html } from 'lit';
+import '../kemet-scroll-nav';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+const meta = {
+    title: 'Components / Scroll Nav',
+    component: 'kemet-scroll-nav',
+};
+export default meta;
+const TemplateResize = () => html `
+  <style>
+    article {
+      color: #fafafa;
+      padding: 2rem;
+      line-height: 1.5;
+      background-color: var(--kemet-color-primary);
+      padding-top: 400px; /* should be the height of kemet-scroll-nav */
+    }
+
+    kemet-scroll-nav {
+      display: grid;
+      gap: 1rem;
+      grid-template-columns: 1fr auto;
+      align-items: flex-end;
+    }
+
+    kemet-scroll-nav a {
+      text-decoration: none;
+      color: var(--kemet-color-primary);
+    }
+
+    kemet-scroll-nav .links {
+      display: flex;
+      gap: 1rem;
+      list-style: none;
+      padding: 0;
+    }
+
+    #docs-root .kemet-scroll-nav-demo {
+      display: none;
+    }
+  </style>
+  <section class="kemet-scroll-nav-demo resize">
+    <kemet-scroll-nav effect="resize" offset="-250">
+      <div class="logo">
+        <img src="https://kemet.dev/assets/images/storybook.png" alt="Kemet UI" />
+      </div>
+      <ul class="links">
+        <li><a href="#" title="Link 1">Link 1</a></li>
+        <li><a href="#" title="Link 2">Link 2</a></li>
+        <li><a href="#" title="Link 3">Link 3</a></li>
+      </ul>
+    </kemet-scroll-nav>
+
+    <article>
+      <h2>Heading 1</h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>
+      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>
+      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>
+      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>
+      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>
+
+      <h2>Heading 2</h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>
+      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>
+      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>
+      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>
+      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>
+
+      <h2>Heading 3</h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>
+      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>
+      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>
+      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>
+      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>
+    </article>
+  </section>
+`;
+const TemplateSticky = () => html `
+  <style>
+    header,
+    article {
+      color: #fafafa;
+      padding: 2rem;
+      line-height: 1.5;
+      background-color: var(--kemet-color-primary);
+    }
+
+    kemet-scroll-nav {
+      display: grid;
+      gap: 1rem;
+      grid-template-columns: 1fr auto;
+      align-items: flex-end;
+    }
+
+    kemet-scroll-nav a {
+      text-decoration: none;
+      color: var(--kemet-color-primary);
+    }
+
+    kemet-scroll-nav .links {
+      display: flex;
+      gap: 1rem;
+      list-style: none;
+      padding: 0;
+    }
+
+    #docs-root .kemet-scroll-nav-demo {
+      display: none;
+    }
+  </style>
+  <section class="kemet-scroll-nav-demo sticky">
+    <header>
+      <h1 kemet-type-size="plus-6">Kemet Scroll Nav</h1>
+      <aside>
+        <p>Scroll down to see this nav stick to the top! This is the default behavior.</p>
+      </aside>
+    </header>
+
+    <kemet-scroll-nav>
+      <div class="logo">
+        <img src="https://kemet.dev/assets/images/storybook.png" alt="Kemet UI" />
+      </div>
+      <ul class="links">
+        <li><a href="#" title="Link 1">Link 1</a></li>
+        <li><a href="#" title="Link 2">Link 2</a></li>
+        <li><a href="#" title="Link 3">Link 3</a></li>
+      </ul>
+    </kemet-scroll-nav>
+
+    <article>
+      <h2>Heading 1</h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>
+      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>
+      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>
+      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>
+      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>
+
+      <h2>Heading 2</h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>
+      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>
+      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>
+      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>
+      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>
+
+      <h2>Heading 3</h2>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>
+      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>
+      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>
+      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>
+      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>
+    </article>
+  </section>
+`;
+export const Resize = {
+    render: () => TemplateResize(),
+};
+export const Sticky = {
+    render: () => TemplateSticky(),
+};
+//# sourceMappingURL=stories.js.map

package/dist/src/components/kemet-scroll-nav/docs/stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/components/kemet-scroll-nav/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,qBAAqB,CAAC;AAE7B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,yBAAyB;IAChC,SAAS,EAAE,kBAAkB;CAC9B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoEhC,CAAC;AAEF,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,IAAI,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2EhC,CAAC;AAGF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,EAAE;CAC/B,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-scroll-nav';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Scroll Nav',\n  component: 'kemet-scroll-nav',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst TemplateResize = () => html`\n  <style>\n    article {\n      color: #fafafa;\n      padding: 2rem;\n      line-height: 1.5;\n      background-color: var(--kemet-color-primary);\n      padding-top: 400px; /* should be the height of kemet-scroll-nav */\n    }\n\n    kemet-scroll-nav {\n      display: grid;\n      gap: 1rem;\n      grid-template-columns: 1fr auto;\n      align-items: flex-end;\n    }\n\n    kemet-scroll-nav a {\n      text-decoration: none;\n      color: var(--kemet-color-primary);\n    }\n\n    kemet-scroll-nav .links {\n      display: flex;\n      gap: 1rem;\n      list-style: none;\n      padding: 0;\n    }\n\n    #docs-root .kemet-scroll-nav-demo {\n      display: none;\n    }\n  </style>\n  <section class=\"kemet-scroll-nav-demo resize\">\n    <kemet-scroll-nav effect=\"resize\" offset=\"-250\">\n      <div class=\"logo\">\n        <img src=\"https://kemet.dev/assets/images/storybook.png\" alt=\"Kemet UI\" />\n      </div>\n      <ul class=\"links\">\n        <li><a href=\"#\" title=\"Link 1\">Link 1</a></li>\n        <li><a href=\"#\" title=\"Link 2\">Link 2</a></li>\n        <li><a href=\"#\" title=\"Link 3\">Link 3</a></li>\n      </ul>\n    </kemet-scroll-nav>\n\n    <article>\n      <h2>Heading 1</h2>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>\n      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>\n      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>\n      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>\n      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>\n\n      <h2>Heading 2</h2>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>\n      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>\n      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>\n      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>\n      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>\n\n      <h2>Heading 3</h2>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>\n      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>\n      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>\n      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>\n      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>\n    </article>\n  </section>\n`;\n\nconst TemplateSticky = () => html`\n  <style>\n    header,\n    article {\n      color: #fafafa;\n      padding: 2rem;\n      line-height: 1.5;\n      background-color: var(--kemet-color-primary);\n    }\n\n    kemet-scroll-nav {\n      display: grid;\n      gap: 1rem;\n      grid-template-columns: 1fr auto;\n      align-items: flex-end;\n    }\n\n    kemet-scroll-nav a {\n      text-decoration: none;\n      color: var(--kemet-color-primary);\n    }\n\n    kemet-scroll-nav .links {\n      display: flex;\n      gap: 1rem;\n      list-style: none;\n      padding: 0;\n    }\n\n    #docs-root .kemet-scroll-nav-demo {\n      display: none;\n    }\n  </style>\n  <section class=\"kemet-scroll-nav-demo sticky\">\n    <header>\n      <h1 kemet-type-size=\"plus-6\">Kemet Scroll Nav</h1>\n      <aside>\n        <p>Scroll down to see this nav stick to the top! This is the default behavior.</p>\n      </aside>\n    </header>\n\n    <kemet-scroll-nav>\n      <div class=\"logo\">\n        <img src=\"https://kemet.dev/assets/images/storybook.png\" alt=\"Kemet UI\" />\n      </div>\n      <ul class=\"links\">\n        <li><a href=\"#\" title=\"Link 1\">Link 1</a></li>\n        <li><a href=\"#\" title=\"Link 2\">Link 2</a></li>\n        <li><a href=\"#\" title=\"Link 3\">Link 3</a></li>\n      </ul>\n    </kemet-scroll-nav>\n\n    <article>\n      <h2>Heading 1</h2>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>\n      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>\n      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>\n      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>\n      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>\n\n      <h2>Heading 2</h2>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>\n      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>\n      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>\n      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>\n      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>\n\n      <h2>Heading 3</h2>\n      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ornare porta nulla. Nulla ipsum felis, aliquet nec nisl sit amet, suscipit facilisis massa. Suspendisse consectetur lorem id odio fringilla pretium. Curabitur finibus nulla augue. Fusce vitae ornare lorem. Vivamus quis lacus ullamcorper, vehicula felis pretium, iaculis leo. Duis eget condimentum enim. Praesent vel est ut nisl pulvinar suscipit sit amet in sapien. Donec euismod odio ornare nisi luctus dignissim. Pellentesque vehicula, elit vitae maximus dapibus, erat nunc ultrices leo, nec pretium felis odio ut ex. Phasellus sapien felis, lobortis eu aliquam quis, semper quis neque. Aliquam vestibulum arcu ut nisl lacinia, in placerat dolor congue. Vivamus varius tincidunt odio, at pellentesque eros cursus nec. Donec viverra nec tellus vitae placerat. Cras id gravida mauris. Quisque sit amet imperdiet nisi.</p>\n      <p>Sed eros ligula, blandit et iaculis et, faucibus in libero. Nunc augue dui, laoreet at porta ut, ultrices ac est. Duis at viverra metus. Phasellus pulvinar ligula sed aliquet pretium. Vestibulum erat risus, elementum ac imperdiet sed, semper eu sapien. Proin lobortis mauris ut ante tempor mattis. Donec dapibus interdum risus, eget malesuada arcu. Nulla facilisi. Maecenas aliquet ullamcorper tortor quis dapibus. Nunc facilisis augue vitae dictum semper. Etiam vehicula nec tortor non lobortis. Morbi hendrerit in nibh nec maximus. Nam convallis erat metus. In fermentum efficitur condimentum.</p>\n      <p>Vestibulum accumsan vulputate consectetur. Quisque ut malesuada arcu. Mauris ligula odio, commodo nec eros ultricies, semper varius dui. Donec facilisis a odio nec imperdiet. Pellentesque molestie leo in mi maximus feugiat. Sed quis arcu a velit laoreet viverra. Etiam suscipit lacus lacus, a pretium justo tincidunt in. Fusce eget mi turpis.</p>\n      <p>Ut molestie augue in eros eleifend hendrerit. Donec et laoreet lorem, sed porta arcu. Duis pharetra rhoncus ipsum eu pellentesque. Praesent bibendum bibendum risus maximus convallis. Curabitur nec libero eu velit cursus aliquam. Integer dapibus in eros pretium dignissim. Sed tortor justo, semper in pellentesque in, aliquet pellentesque sapien. Aliquam sem quam, pellentesque a erat ac, aliquet sagittis turpis. Suspendisse dignissim ante ante. Proin ac urna porta, auctor odio convallis, mollis orci. Donec scelerisque mauris non varius dapibus. Proin sollicitudin placerat consectetur.</p>\n      <p>Etiam egestas vulputate sem a dictum. Curabitur mattis ex ut turpis vehicula, nec auctor eros facilisis. Duis nisl augue, varius feugiat sem et, iaculis gravida enim. Nam luctus purus et dapibus mattis. Curabitur hendrerit risus non velit aliquet hendrerit. Nullam faucibus, sapien vitae egestas congue, metus lacus rhoncus leo, non malesuada justo ipsum eu felis. Aenean venenatis metus non tincidunt sollicitudin.</p>\n    </article>\n  </section>\n`;\n\n\nexport const Resize: Story = {\n  render: () => TemplateResize(),\n};\n\nexport const Sticky: Story = {\n  render: () => TemplateSticky(),\n};\n"]}

package/dist/src/components/kemet-scroll-nav/kemet-scroll-nav.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+import { TypeEffect } from './types';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-scroll-nav
+ * @summary An element that transforms at a scroll point.
+ *
+ * @prop {string} effect - Determines where the transform point is activated. Values include: (sticky | resize)
+ * @prop {boolean} transform - Whether or not the nav has shifted into a new state.
+ * @prop {number} offset - Allows for an arbitrary adjustment of the transform point in pixels. Works with negative values.
+ *
+ * @cssproperty --kemet-scroll-nav-padding - The padding of the nav. Default: 1rem 2rem.
+ * @cssproperty --kemet-scroll-nav-background - The background color of the nav. Default: #fafafa.
+ * @cssproperty --kemet-scroll-nav-transition - The transition speed of the transformation. Default: 300ms.
+ * @cssproperty --kemet-scroll-nav-resize-height - The height of the pre-transformed nav. Default: 400px.
+ * @cssproperty --kemet-scroll-nav-resize-height-transformed - The height of the transformed nav. Default: 100px.
+ *
+ */
+export default class KemetScrollNav extends LitElement {
+    static styles: import("lit").CSSResult[];
+    effect: TypeEffect;
+    transform: boolean;
+    offset: number;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    handleScroll(stickPoint: any, elementHeight: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-scroll-nav': KemetScrollNav;
+    }
+}

package/dist/src/components/kemet-scroll-nav/kemet-scroll-nav.js

@@ -0,0 +1,70 @@
+import { __decorate } from "tslib";
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { stylesScrollNav } from './styles';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-scroll-nav
+ * @summary An element that transforms at a scroll point.
+ *
+ * @prop {string} effect - Determines where the transform point is activated. Values include: (sticky | resize)
+ * @prop {boolean} transform - Whether or not the nav has shifted into a new state.
+ * @prop {number} offset - Allows for an arbitrary adjustment of the transform point in pixels. Works with negative values.
+ *
+ * @cssproperty --kemet-scroll-nav-padding - The padding of the nav. Default: 1rem 2rem.
+ * @cssproperty --kemet-scroll-nav-background - The background color of the nav. Default: #fafafa.
+ * @cssproperty --kemet-scroll-nav-transition - The transition speed of the transformation. Default: 300ms.
+ * @cssproperty --kemet-scroll-nav-resize-height - The height of the pre-transformed nav. Default: 400px.
+ * @cssproperty --kemet-scroll-nav-resize-height-transformed - The height of the transformed nav. Default: 100px.
+ *
+ */
+let KemetScrollNav = class KemetScrollNav extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.effect = 'sticky';
+        this.transform = false;
+        this.offset = 0;
+    }
+    render() {
+        return html `
+      <slot></slot>
+    `;
+    }
+    firstUpdated() {
+        const stickPoint = this.offsetTop;
+        const elementHeight = this.offsetHeight;
+        window.addEventListener('scroll', () => {
+            // we pass stickPoint and elementHeight as recorded constants
+            // so that it does not update for each call to handleScroll
+            this.handleScroll(stickPoint, elementHeight);
+        });
+    }
+    handleScroll(stickPoint, elementHeight) {
+        const transformPoint = (this.effect === 'sticky')
+            ? stickPoint + this.offset
+            : elementHeight + this.offset;
+        if (window.pageYOffset >= transformPoint) {
+            this.transform = true;
+        }
+        else {
+            this.transform = false;
+        }
+    }
+};
+KemetScrollNav.styles = [stylesScrollNav];
+__decorate([
+    property({ type: String, reflect: true })
+], KemetScrollNav.prototype, "effect", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetScrollNav.prototype, "transform", void 0);
+__decorate([
+    property({ type: Number })
+], KemetScrollNav.prototype, "offset", void 0);
+KemetScrollNav = __decorate([
+    customElement('kemet-scroll-nav')
+], KemetScrollNav);
+export default KemetScrollNav;
+//# sourceMappingURL=kemet-scroll-nav.js.map

package/dist/src/components/kemet-scroll-nav/kemet-scroll-nav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-scroll-nav.js","sourceRoot":"","sources":["../../../../src/components/kemet-scroll-nav/kemet-scroll-nav.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG3C;;;;;;;;;;;;;;;;;GAiBG;AAGH,IAAqB,cAAc,GAAnC,MAAqB,cAAe,SAAQ,UAAU;IAAtD;;QAIE,WAAM,GAAe,QAAQ,CAAC;QAG9B,cAAS,GAAY,KAAK,CAAC;QAG3B,WAAM,GAAW,CAAC,CAAC;IA+BrB,CAAC;IA5BC,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,YAAY;QACV,MAAM,UAAU,GAAG,IAAI,CAAC,SAAS,CAAC;QAClC,MAAM,aAAa,GAAG,IAAI,CAAC,YAAY,CAAC;QAExC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACrC,6DAA6D;YAC7D,2DAA2D;YAC3D,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC;QAC/C,CAAC,CAAC,CAAC;IACL,CAAC;IAED,YAAY,CAAC,UAAU,EAAE,aAAa;QACpC,MAAM,cAAc,GAAG,CAAC,IAAI,CAAC,MAAM,KAAK,QAAQ,CAAC;YAC/C,CAAC,CAAC,UAAU,GAAG,IAAI,CAAC,MAAM;YAC1B,CAAC,CAAC,aAAa,GAAG,IAAI,CAAC,MAAM,CAAC;QAEhC,IAAI,MAAM,CAAC,WAAW,IAAI,cAAc,EAAE;YACxC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;SACvB;aAAM;YACL,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;SACxB;IACH,CAAC;CACF,CAAA;AAxCQ,qBAAM,GAAG,CAAC,eAAe,CAAC,CAAC;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CACZ;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDAChB;AAG3B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CACR;AAVA,cAAc;IADlC,aAAa,CAAC,kBAAkB,CAAC;GACb,cAAc,CAyClC;eAzCoB,cAAc","sourcesContent":["import { LitElement, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesScrollNav } from './styles';\nimport { TypeEffect } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-nav\n * @summary An element that transforms at a scroll point.\n *\n * @prop {string} effect - Determines where the transform point is activated. Values include: (sticky | resize)\n * @prop {boolean} transform - Whether or not the nav has shifted into a new state.\n * @prop {number} offset - Allows for an arbitrary adjustment of the transform point in pixels. Works with negative values.\n *\n * @cssproperty --kemet-scroll-nav-padding - The padding of the nav. Default: 1rem 2rem.\n * @cssproperty --kemet-scroll-nav-background - The background color of the nav. Default: #fafafa.\n * @cssproperty --kemet-scroll-nav-transition - The transition speed of the transformation. Default: 300ms.\n * @cssproperty --kemet-scroll-nav-resize-height - The height of the pre-transformed nav. Default: 400px.\n * @cssproperty --kemet-scroll-nav-resize-height-transformed - The height of the transformed nav. Default: 100px.\n *\n */\n\n@customElement('kemet-scroll-nav')\nexport default class KemetScrollNav extends LitElement {\n  static styles = [stylesScrollNav];\n\n  @property({ type: String, reflect: true })\n  effect: TypeEffect = 'sticky';\n\n  @property({ type: Boolean, reflect: true })\n  transform: boolean = false;\n\n  @property({ type: Number })\n  offset: number = 0;\n\n\n  render() {\n    return html`\n      <slot></slot>\n    `;\n  }\n\n  firstUpdated() {\n    const stickPoint = this.offsetTop;\n    const elementHeight = this.offsetHeight;\n\n    window.addEventListener('scroll', () => {\n      // we pass stickPoint and elementHeight as recorded constants\n      // so that it does not update for each call to handleScroll\n      this.handleScroll(stickPoint, elementHeight);\n    });\n  }\n\n  handleScroll(stickPoint, elementHeight) {\n    const transformPoint = (this.effect === 'sticky')\n      ? stickPoint + this.offset\n      : elementHeight + this.offset;\n\n    if (window.pageYOffset >= transformPoint) {\n      this.transform = true;\n    } else {\n      this.transform = false;\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-nav': KemetScrollNav\n  }\n}\n\n"]}

package/dist/src/components/kemet-scroll-nav/styles.d.ts

@@ -0,0 +1 @@
+export declare const stylesScrollNav: import("lit").CSSResult;

package/dist/src/components/kemet-scroll-nav/styles.js

@@ -0,0 +1,27 @@
+import { css } from 'lit';
+export const stylesScrollNav = css `
+  :host {
+    display: block;
+    box-sizing: border-box;
+    padding: var(--kemet-scroll-nav-padding, 1rem 2rem);
+    background-color: var(--kemet-scroll-nav-background, #fafafa);
+    transition: all var(--kemet-scroll-nav-transition, 300ms) ease;
+  }
+
+  :host([transform]),
+  :host([effect="resize"]) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+  }
+
+  :host([effect="resize"]) {
+    height: var(--kemet-scroll-nav-resize-height, 400px);
+  }
+
+  :host([transform][effect="resize"]) {
+    height: var(--kemet-scroll-nav-resize-height-transformed, 100px);
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/src/components/kemet-scroll-nav/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/kemet-scroll-nav/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;CAwBjC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesScrollNav = css`\n  :host {\n    display: block;\n    box-sizing: border-box;\n    padding: var(--kemet-scroll-nav-padding, 1rem 2rem);\n    background-color: var(--kemet-scroll-nav-background, #fafafa);\n    transition: all var(--kemet-scroll-nav-transition, 300ms) ease;\n  }\n\n  :host([transform]),\n  :host([effect=\"resize\"]) {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n  }\n\n  :host([effect=\"resize\"]) {\n    height: var(--kemet-scroll-nav-resize-height, 400px);\n  }\n\n  :host([transform][effect=\"resize\"]) {\n    height: var(--kemet-scroll-nav-resize-height-transformed, 100px);\n  }\n`;\n"]}

package/dist/src/components/kemet-scroll-nav/types.d.ts

@@ -0,0 +1,6 @@
+export declare type TypeEffect = 'sticky' | 'resize';
+export interface KemetScrollNavInterface extends HTMLElement {
+    effect?: TypeEffect;
+    transform?: boolean;
+    offset?: number;
+}

package/dist/src/components/kemet-scroll-nav/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/src/components/kemet-scroll-nav/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kemet-scroll-nav/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypeEffect = 'sticky' | 'resize';\n\nexport interface KemetScrollNavInterface extends HTMLElement {\n  effect?: TypeEffect,\n  transform?: boolean,\n  offset?: number\n}\n"]}

package/dist/src/components/kemet-scroll-snap/docs/stories.d.ts

@@ -0,0 +1,11 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../kemet-scroll-snap';
+import '../kemet-scroll-snap-slide';
+import '../kemet-scroll-snap-paginator';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+declare const meta: Meta;
+export default meta;
+declare type Story = StoryObj;
+export declare const Standard: Story;

package/dist/src/components/kemet-scroll-snap/docs/stories.js

@@ -0,0 +1,131 @@
+import { html } from 'lit';
+import '../kemet-scroll-snap';
+import '../kemet-scroll-snap-slide';
+import '../kemet-scroll-snap-paginator';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+const meta = {
+    title: 'Components / Scroll Snap',
+    component: 'kemet-scroll-snap',
+};
+export default meta;
+const Template = ({ showPagination = true, numberOfSlides = 5, gap = '1.5rem', axis = 'horizontal', pagination = 'bottom', paginationIcon = 'circle-fill', paginationSize = 16, paginationUseNumbers = false, paginationUseLabels = false, paginationCenter = true, paginationGap = '0.5rem', slideWidth = '44vw', horizontalMaxWidth = '90%', }) => {
+    const makeSlides = (numberOfSlides) => {
+        const slides = [];
+        // eslint-disable-next-line no-plusplus
+        for (let i = 0; i < numberOfSlides; i++) {
+            slides.push(html `
+        <kemet-scroll-snap-slide label="Heading ${i + 1}" kemet-margin-top="tiny:normal">
+          <h3 kemet-type-size="plus-6">Heading ${i + 1}</h3>
+          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+          <img src="https://via.placeholder.com/1920x1080" alt="A placeholder" />
+        </kemet-scroll-snap-slide>
+      `);
+        }
+        return slides;
+    };
+    const makePagination = (display, icon, size, useNumbers, useLabels, center) => {
+        if (display) {
+            return html `
+        <kemet-scroll-snap-paginator
+          slot="pagination"
+          icon="${icon}"
+          size="${size}"
+          ?use-number-pages=${useNumbers}
+          ?use-label-pages=${useLabels}
+          ?center=${center}>
+        </kemet-scroll-snap-paginator>
+      `;
+        }
+        return null;
+    };
+    return html `
+    <style>
+      img {
+        max-width: 100%;
+      }
+
+      kemet-scroll-snap {
+        --kemet-scroll-snap-gap: ${gap};
+        --kemet-scroll-snap-horizontal-max-width: ${horizontalMaxWidth};
+      }
+
+      kemet-scroll-snap-slide {
+        --kemet-scroll-snap-slide-width: ${slideWidth};
+      }
+
+      kemet-scroll-snap-paginator {
+        --kemet-scroll-snap-paginator-gap: ${paginationGap};
+      }
+    </style>
+    <kemet-scroll-snap axis="${axis}" pagination="${pagination}">
+      <div slot="slides">
+        ${makeSlides(numberOfSlides)}
+      </div>
+      ${makePagination(showPagination, paginationIcon, paginationSize, paginationUseNumbers, paginationUseLabels, paginationCenter)}
+    </kemet-scroll-snap>
+  `;
+};
+export const Standard = {
+    render: args => Template(args),
+    args: {
+        showPagination: true,
+        numberOfSlides: 5,
+        gap: '1.5rem',
+        axis: 'horizontal',
+        pagination: 'bottom',
+        paginationIcon: 'circle-fill',
+        paginationSize: 16,
+        paginationUseNumbers: false,
+        paginationUseLabels: false,
+        paginationCenter: true,
+        paginationGap: '0.5rem',
+        slideWidth: '44vw',
+        horizontalMaxWidth: '90%',
+    },
+    argTypes: {
+        showPagination: {
+            control: { type: 'boolean' },
+        },
+        numberOfSlides: {
+            control: { type: 'number' },
+        },
+        gap: {
+            control: { type: 'text' },
+        },
+        axis: {
+            control: { type: 'select' },
+            options: ['horizontal', 'vertical'],
+        },
+        pagination: {
+            control: { type: 'select' },
+            options: ['top', 'right', 'bottom', 'left'],
+        },
+        paginationIcon: {
+            control: { type: 'text' },
+        },
+        paginationSize: {
+            control: { type: 'number' },
+        },
+        paginationUseNumbers: {
+            control: { type: 'boolean' },
+        },
+        paginationUseLabels: {
+            control: { type: 'boolean' },
+        },
+        paginationCenter: {
+            control: { type: 'boolean' },
+        },
+        paginationGap: {
+            control: { type: 'text' },
+        },
+        slideWidth: {
+            control: { type: 'text' },
+        },
+        horizontalMaxWidth: {
+            control: { type: 'text' },
+        },
+    }
+};
+//# sourceMappingURL=stories.js.map

package/dist/src/components/kemet-scroll-snap/docs/stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/components/kemet-scroll-snap/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AAExC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,mBAAmB;CAC/B,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAChB,cAAc,GAAG,IAAI,EACrB,cAAc,GAAG,CAAC,EAClB,GAAG,GAAG,QAAQ,EACd,IAAI,GAAG,YAAY,EACnB,UAAU,GAAG,QAAQ,EACrB,cAAc,GAAG,aAAa,EAC9B,cAAc,GAAG,EAAE,EACnB,oBAAoB,GAAG,KAAK,EAC5B,mBAAmB,GAAG,KAAK,EAC3B,gBAAgB,GAAG,IAAI,EACvB,aAAa,GAAG,QAAQ,EACxB,UAAU,GAAG,MAAM,EACnB,kBAAkB,GAAG,KAAK,GAC3B,EAAE,EAAE;IACH,MAAM,UAAU,GAAG,CAAC,cAAc,EAAE,EAAE;QACpC,MAAM,MAAM,GAAG,EAAE,CAAC;QAElB,uCAAuC;QACvC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,cAAc,EAAE,CAAC,EAAE,EAAE;YACvC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAA;kDAC4B,CAAC,GAAG,CAAC;iDACN,CAAC,GAAG,CAAC;;;;OAI/C,CAAC,CAAC;SACJ;QAED,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE;QAC5E,IAAI,OAAO,EAAE;YACX,OAAO,IAAI,CAAA;;;kBAGC,IAAI;kBACJ,IAAI;8BACQ,UAAU;6BACX,SAAS;oBAClB,MAAM;;OAEnB,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;;;;;;;mCAOsB,GAAG;oDACc,kBAAkB;;;;2CAI3B,UAAU;;;;6CAIR,aAAa;;;+BAG3B,IAAI,iBAAiB,UAAU;;UAEpD,UAAU,CAAC,cAAc,CAAC;;QAE5B,cAAc,CAAC,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,gBAAgB,CAAC;;GAEhI,CAAC;AACJ,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,cAAc,EAAE,IAAI;QACpB,cAAc,EAAE,CAAC;QACjB,GAAG,EAAE,QAAQ;QACb,IAAI,EAAE,YAAY;QAClB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,aAAa;QAC7B,cAAc,EAAE,EAAE;QAClB,oBAAoB,EAAE,KAAK;QAC3B,mBAAmB,EAAE,KAAK;QAC1B,gBAAgB,EAAE,IAAI;QACtB,aAAa,EAAE,QAAQ;QACvB,UAAU,EAAE,MAAM;QAClB,kBAAkB,EAAE,KAAK;KAC1B;IACD,QAAQ,EAAE;QACR,cAAc,EAAE;YACd,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,cAAc,EAAE;YACd,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,GAAG,EAAE;YACH,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,YAAY,EAAE,UAAU,CAAC;SACpC;QACD,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAC;SAC5C;QACD,cAAc,EAAE;YACd,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,cAAc,EAAE;YACd,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,oBAAoB,EAAE;YACpB,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,mBAAmB,EAAE;YACnB,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,gBAAgB,EAAE;YAChB,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,aAAa,EAAE;YACb,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,UAAU,EAAE;YACV,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,kBAAkB,EAAE;YAClB,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-scroll-snap';\nimport '../kemet-scroll-snap-slide';\nimport '../kemet-scroll-snap-paginator';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Scroll Snap',\n  component: 'kemet-scroll-snap',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({\n  showPagination = true,\n  numberOfSlides = 5,\n  gap = '1.5rem',\n  axis = 'horizontal',\n  pagination = 'bottom',\n  paginationIcon = 'circle-fill',\n  paginationSize = 16,\n  paginationUseNumbers = false,\n  paginationUseLabels = false,\n  paginationCenter = true,\n  paginationGap = '0.5rem',\n  slideWidth = '44vw',\n  horizontalMaxWidth = '90%',\n}) => {\n  const makeSlides = (numberOfSlides) => {\n    const slides = [];\n\n    // eslint-disable-next-line no-plusplus\n    for (let i = 0; i < numberOfSlides; i++) {\n      slides.push(html`\n        <kemet-scroll-snap-slide label=\"Heading ${i + 1}\" kemet-margin-top=\"tiny:normal\">\n          <h3 kemet-type-size=\"plus-6\">Heading ${i + 1}</h3>\n          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>\n          <img src=\"https://via.placeholder.com/1920x1080\" alt=\"A placeholder\" />\n        </kemet-scroll-snap-slide>\n      `);\n    }\n\n    return slides;\n  };\n\n  const makePagination = (display, icon, size, useNumbers, useLabels, center) => {\n    if (display) {\n      return html`\n        <kemet-scroll-snap-paginator\n          slot=\"pagination\"\n          icon=\"${icon}\"\n          size=\"${size}\"\n          ?use-number-pages=${useNumbers}\n          ?use-label-pages=${useLabels}\n          ?center=${center}>\n        </kemet-scroll-snap-paginator>\n      `;\n    }\n\n    return null;\n  };\n\n  return html`\n    <style>\n      img {\n        max-width: 100%;\n      }\n\n      kemet-scroll-snap {\n        --kemet-scroll-snap-gap: ${gap};\n        --kemet-scroll-snap-horizontal-max-width: ${horizontalMaxWidth};\n      }\n\n      kemet-scroll-snap-slide {\n        --kemet-scroll-snap-slide-width: ${slideWidth};\n      }\n\n      kemet-scroll-snap-paginator {\n        --kemet-scroll-snap-paginator-gap: ${paginationGap};\n      }\n    </style>\n    <kemet-scroll-snap axis=\"${axis}\" pagination=\"${pagination}\">\n      <div slot=\"slides\">\n        ${makeSlides(numberOfSlides)}\n      </div>\n      ${makePagination(showPagination, paginationIcon, paginationSize, paginationUseNumbers, paginationUseLabels, paginationCenter)}\n    </kemet-scroll-snap>\n  `;\n}\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    showPagination: true,\n    numberOfSlides: 5,\n    gap: '1.5rem',\n    axis: 'horizontal',\n    pagination: 'bottom',\n    paginationIcon: 'circle-fill',\n    paginationSize: 16,\n    paginationUseNumbers: false,\n    paginationUseLabels: false,\n    paginationCenter: true,\n    paginationGap: '0.5rem',\n    slideWidth: '44vw',\n    horizontalMaxWidth: '90%',\n  },\n  argTypes: {\n    showPagination: {\n      control: { type: 'boolean' },\n    },\n    numberOfSlides: {\n      control: { type: 'number' },\n    },\n    gap: {\n      control: { type: 'text' },\n    },\n    axis: {\n      control: { type: 'select' },\n      options: ['horizontal', 'vertical'],\n    },\n    pagination: {\n      control: { type: 'select' },\n      options: ['top', 'right', 'bottom', 'left'],\n    },\n    paginationIcon: {\n      control: { type: 'text' },\n    },\n    paginationSize: {\n      control: { type: 'number' },\n    },\n    paginationUseNumbers: {\n      control: { type: 'boolean' },\n    },\n    paginationUseLabels: {\n      control: { type: 'boolean' },\n    },\n    paginationCenter: {\n      control: { type: 'boolean' },\n    },\n    paginationGap: {\n      control: { type: 'text' },\n    },\n    slideWidth: {\n      control: { type: 'text' },\n    },\n    horizontalMaxWidth: {\n      control: { type: 'text' },\n    },\n  }\n};\n"]}

package/dist/src/components/kemet-scroll-snap/kemet-scroll-snap-paginator.d.ts

@@ -0,0 +1,44 @@
+import { LitElement } from 'lit';
+/**
+ * @since 1.0.0
+ * @status stable
+ *
+ * @tagname kemet-scroll-snap-paginator
+ * @summary The scroll snap's pagination.
+ *
+ * @prop {array} slides - Information about each slide.
+ * @prop {string} icon - A string representing which icon to use for pagination. Supports icons used in kemet-icon.
+ * @prop {number} size - The size in pixels of the icons.
+ * @prop {boolean} center - Determines whether to center the pagination items.
+ * @prop {boolean} hideFocusedLinks - Will hide inactive pagination items if set to true.
+ * @prop {boolean} useNumberPages - If set to true, the pages in the pagination iterator will appear as a set of numbers.
+ * @prop {boolean} useLabelPages - If set to true, the pages in the pagination iterator will appear as the label set on the slide.
+ *
+ * @cssproperty --kemet-scroll-snap-paginator-padding - The padding on the container. Default: 1rem 0.
+ * @cssproperty --kemet-scroll-snap-paginator-gap - The space between pagination items. Default: 0.5rem.
+ * @cssproperty --kemet-scroll-snap-paginator-link-color - The color of a linkable pagination item. Default: var(--kemet-color-primary).
+ *
+ * @event kemet-scroll-snap-focus - Fires when a set of slides are focused on.
+ *
+ */
+export default class KemetScrollSnapPaginator extends LitElement {
+    static styles: import("lit").CSSResult[];
+    slides: any[];
+    icon: string;
+    size: number;
+    center: boolean;
+    hideFocusedLinks: boolean;
+    useNumberPages: boolean;
+    useLabelPages: boolean;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    makePagination(): import("lit-html").TemplateResult<1>[];
+    pageDisplay(slide: any, visibleIndex: any): any;
+    slideLink(index: any): void;
+    handleKeyboardInput(event: any, id: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-scroll-snap-paginator': KemetScrollSnapPaginator;
+    }
+}