kemet-ui 2.0.2 → 3.0.0

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

@@ -1,25 +1,40 @@
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 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';
+import '../../kemet-icon/kemet-icon';
 const meta = {
     title: 'Components / Scroll Snap',
     component: 'kemet-scroll-snap',
+    args: {
+        numberOfSlides: 5,
+    },
+    argTypes: {
+        axis: {
+            control: { type: 'select' },
+            options: ['horizontal', 'vertical'],
+        },
+        pagination: {
+            control: { type: 'select' },
+            options: ['top', 'right', 'bottom', 'left'],
+        },
+    }
 };
 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 Template = (args) => {
     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>
+        <kemet-scroll-snap-slide label="Heading ${i + 1}" kemet-margin-top="2xl" style=${ifDefined(args.slideWidth ? `--kemet-scroll-snap-slide-width: ${args.slideWidth};` : undefined)}>
+          <h3 kemet-type-size="3xl">Heading ${i + 1}</h3>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-          <img src="https://via.placeholder.com/1920x1080" alt="A placeholder" />
+          <img src="https://via.placeholder.com/1920x1080" alt="A placeholder" style="max-width:100%" />
         </kemet-scroll-snap-slide>
       `);
         }
@@ -30,8 +45,8 @@ const Template = ({ showPagination = true, numberOfSlides = 5, gap = '1.5rem', a
             return html `
         <kemet-scroll-snap-paginator
           slot="pagination"
-          icon="${icon}"
-          size="${size}"
+          icon="${ifDefined(icon)}"
+          size="${ifDefined(size)}"
           ?use-number-pages=${useNumbers}
           ?use-label-pages=${useLabels}
           ?center=${center}>
@@ -41,91 +56,66 @@ const Template = ({ showPagination = true, numberOfSlides = 5, gap = '1.5rem', a
         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}">
+    <kemet-scroll-snap axis="${ifDefined(args.axis)}" pagination="${ifDefined(args.pagination)}">
       <div slot="slides">
-        ${makeSlides(numberOfSlides)}
+        ${makeSlides(args.numberOfSlides)}
       </div>
-      ${makePagination(showPagination, paginationIcon, paginationSize, paginationUseNumbers, paginationUseLabels, paginationCenter)}
+      ${makePagination(args.showPagination, args.paginationIcon, args.paginationSize, args.paginationUseNumbers, args.paginationUseLabels, args.paginationCenter)}
     </kemet-scroll-snap>
   `;
 };
+// export const Standard: Story = {
+//   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%',
+//   },
+// };
 export const Standard = {
     render: args => Template(args),
+};
+export const Vertical = {
+    render: args => Template(args),
+    args: {
+        axis: 'vertical',
+    },
+};
+export const Pagination = {
+    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' },
-        },
-    }
+};
+export const PaginationLabels = {
+    render: args => Template(args),
+    args: {
+        showPagination: true,
+        paginationUseLabels: true,
+    },
+};
+export const PaginationNumbers = {
+    render: args => Template(args),
+    args: {
+        showPagination: true,
+        paginationUseNumbers: true,
+    },
+};
+export const MultipleSlides = {
+    render: args => Template(args),
+    args: {
+        showPagination: true,
+        slideWidth: '33vw',
+    },
 };
 //# sourceMappingURL=stories.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-scroll-snap/docs/stories.ts"],"names":[],"mappings":"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","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"]}
+{"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;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,sBAAsB,CAAC;AAC9B,OAAO,4BAA4B,CAAC;AACpC,OAAO,gCAAgC,CAAC;AAExC,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,6BAA6B,CAAC;AAErC,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,0BAA0B;IACjC,SAAS,EAAE,mBAAmB;IAC9B,IAAI,EAAE;QACJ,cAAc,EAAE,CAAC;KAClB;IACD,QAAQ,EAAE;QACR,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;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,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,kCAAkC,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,oCAAoC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;8CAC1I,CAAC,GAAG,CAAC;;;;OAI5C,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,SAAS,CAAC,IAAI,CAAC;kBACf,SAAS,CAAC,IAAI,CAAC;8BACH,UAAU;6BACX,SAAS;oBAClB,MAAM;;OAEnB,CAAC;SACH;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,IAAI,CAAA;+BACkB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,iBAAiB,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;;UAEpF,UAAU,CAAC,IAAI,CAAC,cAAc,CAAC;;QAEjC,cAAc,CAAC,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,oBAAoB,EAAE,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,gBAAgB,CAAC;;GAE9J,CAAC;AACJ,CAAC,CAAA;AAGD,mCAAmC;AACnC,oCAAoC;AACpC,YAAY;AACZ,4BAA4B;AAC5B,yBAAyB;AACzB,qBAAqB;AACrB,0BAA0B;AAC1B,4BAA4B;AAC5B,qCAAqC;AACrC,0BAA0B;AAC1B,mCAAmC;AACnC,kCAAkC;AAClC,8BAA8B;AAC9B,+BAA+B;AAC/B,0BAA0B;AAC1B,iCAAiC;AACjC,OAAO;AACP,KAAK;AAEL,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,IAAI,EAAE,UAAU;KACjB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,cAAc,EAAE,IAAI;KACrB;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACrC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,cAAc,EAAE,IAAI;QACpB,mBAAmB,EAAE,IAAI;KAC1B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,cAAc,EAAE,IAAI;QACpB,oBAAoB,EAAE,IAAI;KAC3B;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,cAAc,EAAE,IAAI;QACpB,UAAU,EAAE,MAAM;KACnB;CACF,CAAA","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\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';\nimport '../../kemet-icon/kemet-icon';\n\nconst meta: Meta = {\n  title: 'Components / Scroll Snap',\n  component: 'kemet-scroll-snap',\n  args: {\n    numberOfSlides: 5,\n  },\n  argTypes: {\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  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\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=\"2xl\" style=${ifDefined(args.slideWidth ? `--kemet-scroll-snap-slide-width: ${args.slideWidth};` : undefined)}>\n          <h3 kemet-type-size=\"3xl\">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\" style=\"max-width:100%\" />\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=\"${ifDefined(icon)}\"\n          size=\"${ifDefined(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    <kemet-scroll-snap axis=\"${ifDefined(args.axis)}\" pagination=\"${ifDefined(args.pagination)}\">\n      <div slot=\"slides\">\n        ${makeSlides(args.numberOfSlides)}\n      </div>\n      ${makePagination(args.showPagination, args.paginationIcon, args.paginationSize, args.paginationUseNumbers, args.paginationUseLabels, args.paginationCenter)}\n    </kemet-scroll-snap>\n  `;\n}\n\n\n// export 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// };\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const Vertical: Story = {\n  render: args => Template(args),\n  args: {\n    axis: 'vertical',\n  },\n};\n\nexport const Pagination: Story = {\n  render: args => Template(args),\n  args: {\n    showPagination: true,\n  },\n};\n\nexport const PaginationLabels: Story = {\n  render: args => Template(args),\n  args: {\n    showPagination: true,\n    paginationUseLabels: true,\n  },\n};\n\nexport const PaginationNumbers: Story = {\n  render: args => Template(args),\n  args: {\n    showPagination: true,\n    paginationUseNumbers: true,\n  },\n};\n\nexport const MultipleSlides: Story = {\n  render: args => Template(args),\n  args: {\n    showPagination: true,\n    slideWidth: '33vw',\n  },\n}\n"]}

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

@@ -14,9 +14,9 @@ import { LitElement } from 'lit';
  * @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).
+ * @cssproperty --kemet-scroll-snap-paginator-padding - The padding on the container.
+ * @cssproperty --kemet-scroll-snap-paginator-gap - The space between pagination items.
+ * @cssproperty --kemet-scroll-snap-paginator-link-color - The color of a linkable pagination item.
  *
  * @event kemet-scroll-snap-focus - Fires when a set of slides are focused on.
  *

package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js

@@ -18,9 +18,9 @@ import { stylesScrollSnapPaginator } from './styles';
  * @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).
+ * @cssproperty --kemet-scroll-snap-paginator-padding - The padding on the container.
+ * @cssproperty --kemet-scroll-snap-paginator-gap - The space between pagination items.
+ * @cssproperty --kemet-scroll-snap-paginator-link-color - The color of a linkable pagination item.
  *
  * @event kemet-scroll-snap-focus - Fires when a set of slides are focused on.
  *

package/dist/components/kemet-scroll-snap/kemet-scroll-snap-paginator.js.map

@@ -1 +1 @@
-{"version":3,"file":"kemet-scroll-snap-paginator.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/kemet-scroll-snap-paginator.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesScrollSnapPaginator } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-snap-paginator\n * @summary The scroll snap's pagination.\n *\n * @prop {array} slides - Information about each slide.\n * @prop {string} icon - A string representing which icon to use for pagination. Supports icons used in kemet-icon.\n * @prop {number} size - The size in pixels of the icons.\n * @prop {boolean} center - Determines whether to center the pagination items.\n * @prop {boolean} hideFocusedLinks - Will hide inactive pagination items if set to true.\n * @prop {boolean} useNumberPages - If set to true, the pages in the pagination iterator will appear as a set of numbers.\n * @prop {boolean} useLabelPages - If set to true, the pages in the pagination iterator will appear as the label set on the slide.\n *\n * @cssproperty --kemet-scroll-snap-paginator-padding - The padding on the container. Default: 1rem 0.\n * @cssproperty --kemet-scroll-snap-paginator-gap - The space between pagination items. Default: 0.5rem.\n * @cssproperty --kemet-scroll-snap-paginator-link-color - The color of a linkable pagination item. Default: var(--kemet-color-primary).\n *\n * @event kemet-scroll-snap-focus - Fires when a set of slides are focused on.\n *\n */\n\n@customElement('kemet-scroll-snap-paginator')\nexport default class KemetScrollSnapPaginator extends LitElement {\n  static styles = [stylesScrollSnapPaginator];\n\n  @property({ type: Array })\n  slides: any[] = [];\n\n  @property({ type: String })\n  icon: string = 'circle-fill';\n\n  @property({ type: Number })\n  size: number = 16;\n\n  @property({ type: Boolean, reflect: true })\n  center: boolean;\n\n  @property({ type: Boolean, attribute: 'hide-focused-links' })\n  hideFocusedLinks: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'use-number-pages' })\n  useNumberPages: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'use-label-pages' })\n  useLabelPages: boolean = false;\n\n\n  updated() {\n    const scrollSnapElement = this.closest('kemet-scroll-snap');\n\n    if (scrollSnapElement) {\n      scrollSnapElement.addEventListener('kemet-scroll-snap-make-slides', (event: CustomEvent) => {\n        this.slides = event.detail;\n      });\n    }\n  }\n\n  render() {\n    return html`\n      <nav part=\"nav\">${this.makePagination()}</nav>\n    `;\n  }\n\n  makePagination() {\n    let counter = 0;\n\n    if (this.slides) {\n      return this.slides.map((slide) => {\n        counter = counter += 1;\n\n        if (slide.focused) {\n          return html`\n            <span part=\"span\">${this.pageDisplay(slide, counter)}</span>\n          `;\n        }\n\n        return html`\n          <span\n            class=\"link\"\n            tabindex=\"0\"\n            role=\"button\"\n            @keyup=\"${event => this.handleKeyboardInput(event, slide.id)}\"\n            @click=${() => this.slideLink(slide.id)}\n            aria-label=\"${slide.label}\">\n            ${this.pageDisplay(slide, counter)}\n          </span>\n        `;\n      });\n    }\n\n    return null;\n  }\n\n  pageDisplay(slide, visibleIndex) {\n    if (this.useNumberPages) {\n      return visibleIndex;\n    }\n\n    if (this.useLabelPages) {\n      return slide.label;\n    }\n\n    return html`<kemet-icon icon=${this.icon} size=${this.size}></kemet-icon>`;\n  }\n\n  slideLink(index) {\n    emitEvent(this, 'kemet-scroll-snap-focus', index);\n  }\n\n  handleKeyboardInput(event, id) {\n    if (event.code === 'Enter' || event.code === 'Space') {\n      this.slideLink(id);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-snap-paginator': KemetScrollSnapPaginator\n  }\n}\n"]}
+{"version":3,"file":"kemet-scroll-snap-paginator.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/kemet-scroll-snap-paginator.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesScrollSnapPaginator } from './styles';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-snap-paginator\n * @summary The scroll snap's pagination.\n *\n * @prop {array} slides - Information about each slide.\n * @prop {string} icon - A string representing which icon to use for pagination. Supports icons used in kemet-icon.\n * @prop {number} size - The size in pixels of the icons.\n * @prop {boolean} center - Determines whether to center the pagination items.\n * @prop {boolean} hideFocusedLinks - Will hide inactive pagination items if set to true.\n * @prop {boolean} useNumberPages - If set to true, the pages in the pagination iterator will appear as a set of numbers.\n * @prop {boolean} useLabelPages - If set to true, the pages in the pagination iterator will appear as the label set on the slide.\n *\n * @cssproperty --kemet-scroll-snap-paginator-padding - The padding on the container.\n * @cssproperty --kemet-scroll-snap-paginator-gap - The space between pagination items.\n * @cssproperty --kemet-scroll-snap-paginator-link-color - The color of a linkable pagination item.\n *\n * @event kemet-scroll-snap-focus - Fires when a set of slides are focused on.\n *\n */\n\n@customElement('kemet-scroll-snap-paginator')\nexport default class KemetScrollSnapPaginator extends LitElement {\n  static styles = [stylesScrollSnapPaginator];\n\n  @property({ type: Array })\n  slides: any[] = [];\n\n  @property({ type: String })\n  icon: string = 'circle-fill';\n\n  @property({ type: Number })\n  size: number = 16;\n\n  @property({ type: Boolean, reflect: true })\n  center: boolean;\n\n  @property({ type: Boolean, attribute: 'hide-focused-links' })\n  hideFocusedLinks: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'use-number-pages' })\n  useNumberPages: boolean = false;\n\n  @property({ type: Boolean, reflect: true, attribute: 'use-label-pages' })\n  useLabelPages: boolean = false;\n\n\n  updated() {\n    const scrollSnapElement = this.closest('kemet-scroll-snap');\n\n    if (scrollSnapElement) {\n      scrollSnapElement.addEventListener('kemet-scroll-snap-make-slides', (event: CustomEvent) => {\n        this.slides = event.detail;\n      });\n    }\n  }\n\n  render() {\n    return html`\n      <nav part=\"nav\">${this.makePagination()}</nav>\n    `;\n  }\n\n  makePagination() {\n    let counter = 0;\n\n    if (this.slides) {\n      return this.slides.map((slide) => {\n        counter = counter += 1;\n\n        if (slide.focused) {\n          return html`\n            <span part=\"span\">${this.pageDisplay(slide, counter)}</span>\n          `;\n        }\n\n        return html`\n          <span\n            class=\"link\"\n            tabindex=\"0\"\n            role=\"button\"\n            @keyup=\"${event => this.handleKeyboardInput(event, slide.id)}\"\n            @click=${() => this.slideLink(slide.id)}\n            aria-label=\"${slide.label}\">\n            ${this.pageDisplay(slide, counter)}\n          </span>\n        `;\n      });\n    }\n\n    return null;\n  }\n\n  pageDisplay(slide, visibleIndex) {\n    if (this.useNumberPages) {\n      return visibleIndex;\n    }\n\n    if (this.useLabelPages) {\n      return slide.label;\n    }\n\n    return html`<kemet-icon icon=${this.icon} size=${this.size}></kemet-icon>`;\n  }\n\n  slideLink(index) {\n    emitEvent(this, 'kemet-scroll-snap-focus', index);\n  }\n\n  handleKeyboardInput(event, id) {\n    if (event.code === 'Enter' || event.code === 'Space') {\n      this.slideLink(id);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-snap-paginator': KemetScrollSnapPaginator\n  }\n}\n"]}

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

@@ -16,10 +16,10 @@ import { TypeAxis, TypePagination } from './types';
  * @csspart slides - The slides container.
  * @csspart pagination - The pagination element.
  *
- * @cssproperty --kemet-scroll-snap-gap - Space between the slides. Default: 1.5rem.
- * @cssproperty --kemet-scroll-snap-horizontal-max-width - The horizontal max width of the container. Default: 1024px.
- * @cssproperty --kemet-scroll-snap-vertical-height - The vertical height of the container. Default: 100vh.
- * @cssproperty --kemet-scroll-snap-slides-vertical-padding - Padding on the vertical axis. Default: 0 2rem.
+ * @cssproperty --kemet-scroll-snap-gap - Space between the slides.
+ * @cssproperty --kemet-scroll-snap-horizontal-max-width - The horizontal max width of the container.
+ * @cssproperty --kemet-scroll-snap-vertical-height - The vertical height of the container.
+ * @cssproperty --kemet-scroll-snap-slides-vertical-padding - Padding on the vertical axis.
  *
  * @event kemet-scroll-snap-make-slides - Fires when slide data has been created.
  *

package/dist/components/kemet-scroll-snap/kemet-scroll-snap.js

@@ -19,10 +19,10 @@ import { stylesScrollSnap } from './styles';
  * @csspart slides - The slides container.
  * @csspart pagination - The pagination element.
  *
- * @cssproperty --kemet-scroll-snap-gap - Space between the slides. Default: 1.5rem.
- * @cssproperty --kemet-scroll-snap-horizontal-max-width - The horizontal max width of the container. Default: 1024px.
- * @cssproperty --kemet-scroll-snap-vertical-height - The vertical height of the container. Default: 100vh.
- * @cssproperty --kemet-scroll-snap-slides-vertical-padding - Padding on the vertical axis. Default: 0 2rem.
+ * @cssproperty --kemet-scroll-snap-gap - Space between the slides.
+ * @cssproperty --kemet-scroll-snap-horizontal-max-width - The horizontal max width of the container.
+ * @cssproperty --kemet-scroll-snap-vertical-height - The vertical height of the container.
+ * @cssproperty --kemet-scroll-snap-slides-vertical-padding - Padding on the vertical axis.
  *
  * @event kemet-scroll-snap-make-slides - Fires when slide data has been created.
  *

package/dist/components/kemet-scroll-snap/kemet-scroll-snap.js.map

@@ -1 +1 @@
-{"version":3,"file":"kemet-scroll-snap.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/kemet-scroll-snap.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesScrollSnap } from './styles';\nimport { KemetScrollSnapSlideInterface, TypeAxis, TypePagination } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-snap\n * @summary A scroll-snap implementation for responsive sliders.\n *\n * @prop {string} axis - Determines the direction the component flows. Values include: (horizontal | vertical)\n * @prop {string} pagination - Determines where to display the paginator. Values include: (top | right | bottom | left)\n *\n * @slot slides - Place your slides here.\n * @slot pagination - Place the paginator component here if you want one.\n *\n * @csspart slides - The slides container.\n * @csspart pagination - The pagination element.\n *\n * @cssproperty --kemet-scroll-snap-gap - Space between the slides. Default: 1.5rem.\n * @cssproperty --kemet-scroll-snap-horizontal-max-width - The horizontal max width of the container. Default: 1024px.\n * @cssproperty --kemet-scroll-snap-vertical-height - The vertical height of the container. Default: 100vh.\n * @cssproperty --kemet-scroll-snap-slides-vertical-padding - Padding on the vertical axis. Default: 0 2rem.\n *\n * @event kemet-scroll-snap-make-slides - Fires when slide data has been created.\n *\n */\n\n@customElement('kemet-scroll-snap')\nexport default class KemetScrollSnap extends LitElement {\n  static styles = [stylesScrollSnap];\n\n  @property({ type: String, reflect: true })\n  axis: TypeAxis = 'horizontal';\n\n  @property({ type: String, reflect: true })\n  pagination: TypePagination = 'bottom';\n\n  @state()\n  isTouchDevice: boolean;\n\n  @state()\n  slides: any[];\n\n  constructor() {\n    super();\n\n    this.addEventListener('kemet-scroll-snap-focus', (event: CustomEvent) => {\n      this.focusSlide(event.detail);\n    });\n  }\n\n  firstUpdated() {\n    // standard properties\n    this.isTouchDevice = 'ontouchstart' in document.documentElement;\n    this.slides = [];\n\n    this.setFocusedSlides();\n  }\n\n  updated() {\n    this.setVerticalAttribute();\n  }\n\n  render() {\n    return html`\n      <slot name=\"slides\"></slot>\n      <slot name=\"pagination\"></slot>\n    `;\n  }\n\n  setFocusedSlides() {\n    // reference: https://24ways.org/2019/beautiful-scrolling-experiences-without-libraries/\n    // reference: https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/\n    const slides = this.querySelectorAll('kemet-scroll-snap-slide');\n    const container = this.querySelector('[slot=\"slides\"]');\n\n    const options = {\n      root: container,\n      rootMargin: '0px',\n      threshold: 0.5,\n    };\n\n    const callback = (entries) => {\n      entries.forEach((entry) => {\n        const { target } = entry;\n\n        if (entry.intersectionRatio >= 0.5) {\n          target.focused = true;\n        } else {\n          target.focused = false;\n        }\n      });\n\n      this.makeSlides();\n    };\n\n    const observer = new IntersectionObserver(callback, options);\n\n    slides.forEach((slide) => {\n      observer.observe(slide);\n    });\n  }\n\n  makeSlides() {\n    const slides = [];\n\n    this.querySelectorAll('kemet-scroll-snap-slide').forEach((element, index) => {\n      const slide = element as KemetScrollSnapSlideInterface;\n\n      slide.index = index;\n      slides.push({\n        id: index,\n        focused: slide.focused,\n        label: slide.label,\n      });\n    });\n\n    this.slides = slides;\n    emitEvent(this, 'kemet-scroll-snap-make-slides', this.slides);\n  }\n\n  focusSlide(index) {\n    const activeSlide = this.querySelector(`kemet-scroll-snap-slide[index=\"${index}\"]`);\n    activeSlide.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n  }\n\n  setVerticalAttribute() {\n    if (this.axis === 'vertical') {\n      document.querySelector('html').setAttribute('kemet-scroll-snap-axis', 'vertical');\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-snap': KemetScrollSnap\n  }\n}\n"]}
+{"version":3,"file":"kemet-scroll-snap.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/kemet-scroll-snap.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { emitEvent } from '../../utilities/misc/events';\nimport { stylesScrollSnap } from './styles';\nimport { KemetScrollSnapSlideInterface, TypeAxis, TypePagination } from './types';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-scroll-snap\n * @summary A scroll-snap implementation for responsive sliders.\n *\n * @prop {string} axis - Determines the direction the component flows. Values include: (horizontal | vertical)\n * @prop {string} pagination - Determines where to display the paginator. Values include: (top | right | bottom | left)\n *\n * @slot slides - Place your slides here.\n * @slot pagination - Place the paginator component here if you want one.\n *\n * @csspart slides - The slides container.\n * @csspart pagination - The pagination element.\n *\n * @cssproperty --kemet-scroll-snap-gap - Space between the slides.\n * @cssproperty --kemet-scroll-snap-horizontal-max-width - The horizontal max width of the container.\n * @cssproperty --kemet-scroll-snap-vertical-height - The vertical height of the container.\n * @cssproperty --kemet-scroll-snap-slides-vertical-padding - Padding on the vertical axis.\n *\n * @event kemet-scroll-snap-make-slides - Fires when slide data has been created.\n *\n */\n\n@customElement('kemet-scroll-snap')\nexport default class KemetScrollSnap extends LitElement {\n  static styles = [stylesScrollSnap];\n\n  @property({ type: String, reflect: true })\n  axis: TypeAxis = 'horizontal';\n\n  @property({ type: String, reflect: true })\n  pagination: TypePagination = 'bottom';\n\n  @state()\n  isTouchDevice: boolean;\n\n  @state()\n  slides: any[];\n\n  constructor() {\n    super();\n\n    this.addEventListener('kemet-scroll-snap-focus', (event: CustomEvent) => {\n      this.focusSlide(event.detail);\n    });\n  }\n\n  firstUpdated() {\n    // standard properties\n    this.isTouchDevice = 'ontouchstart' in document.documentElement;\n    this.slides = [];\n\n    this.setFocusedSlides();\n  }\n\n  updated() {\n    this.setVerticalAttribute();\n  }\n\n  render() {\n    return html`\n      <slot name=\"slides\"></slot>\n      <slot name=\"pagination\"></slot>\n    `;\n  }\n\n  setFocusedSlides() {\n    // reference: https://24ways.org/2019/beautiful-scrolling-experiences-without-libraries/\n    // reference: https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/\n    const slides = this.querySelectorAll('kemet-scroll-snap-slide');\n    const container = this.querySelector('[slot=\"slides\"]');\n\n    const options = {\n      root: container,\n      rootMargin: '0px',\n      threshold: 0.5,\n    };\n\n    const callback = (entries) => {\n      entries.forEach((entry) => {\n        const { target } = entry;\n\n        if (entry.intersectionRatio >= 0.5) {\n          target.focused = true;\n        } else {\n          target.focused = false;\n        }\n      });\n\n      this.makeSlides();\n    };\n\n    const observer = new IntersectionObserver(callback, options);\n\n    slides.forEach((slide) => {\n      observer.observe(slide);\n    });\n  }\n\n  makeSlides() {\n    const slides = [];\n\n    this.querySelectorAll('kemet-scroll-snap-slide').forEach((element, index) => {\n      const slide = element as KemetScrollSnapSlideInterface;\n\n      slide.index = index;\n      slides.push({\n        id: index,\n        focused: slide.focused,\n        label: slide.label,\n      });\n    });\n\n    this.slides = slides;\n    emitEvent(this, 'kemet-scroll-snap-make-slides', this.slides);\n  }\n\n  focusSlide(index) {\n    const activeSlide = this.querySelector(`kemet-scroll-snap-slide[index=\"${index}\"]`);\n    activeSlide.scrollIntoView({ behavior: 'smooth', block: 'nearest' });\n  }\n\n  setVerticalAttribute() {\n    if (this.axis === 'vertical') {\n      document.querySelector('html').setAttribute('kemet-scroll-snap-axis', 'vertical');\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-scroll-snap': KemetScrollSnap\n  }\n}\n"]}

package/dist/components/kemet-scroll-snap/styles.js

@@ -7,6 +7,10 @@ export const stylesScrollSnap = css `
   }
 
   :host {
+    --kemet-scroll-snap-horizontal-max-width: 1024px;
+    --kemet-scroll-snap-vertical-height: 100vh;
+    --kemet-scroll-snap-slides-vertical-padding: 0 2rem;
+
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -14,7 +18,7 @@ export const stylesScrollSnap = css `
 
   :host([axis='horizontal']) {
     margin: auto;
-    max-width: var(--kemet-scroll-snap-horizontal-max-width, 1024px);
+    max-width: var(--kemet-scroll-snap-horizontal-max-width);
   }
 
   :host([pagination="left"]),
@@ -41,25 +45,29 @@ export const stylesScrollSnap = css `
 
   /* vertical */
   :host([axis="vertical"]) {
-    height: var(--kemet-scroll-snap-vertical-height, 100vh);
+    height: var(--kemet-scroll-snap-vertical-height);
   }
 
   :host([axis="vertical"]) ::slotted([slot="slides"]) {
     flex-direction: column;
     overflow-x: hidden;
     scroll-snap-type: y mandatory;
-    padding: var(--kemet-scroll-snap-slides-vertical-padding, 0 2rem);
+    padding: var(--kemet-scroll-snap-slides-vertical-padding);
   }
 `;
 export const stylesScrollSnapPaginator = css `
   :host {
+    --kemet-scroll-snap-paginator-padding: 1rem 0;
+    --kemet-scroll-snap-paginator-gap: 0.5rem;
+    --kemet-scroll-snap-paginator-link-color: rgb(var(--kemet-color-primary));
+
     margin: auto;
-    padding: var(--kemet-scroll-snap-paginator-padding, 1rem 0);
+    padding: var(--kemet-scroll-snap-paginator-padding);
   }
 
   nav {
     display: flex;
-    gap: var(--kemet-scroll-snap-paginator-gap, 0.5rem);
+    gap: var(--kemet-scroll-snap-paginator-gap);
   }
 
   :host([center]) nav {
@@ -68,7 +76,7 @@ export const stylesScrollSnapPaginator = css `
 
   .link {
     cursor: pointer;
-    color: var(--kemet-scroll-snap-paginator-link-color, var(--kemet-color-primary));
+    color: var(--kemet-scroll-snap-paginator-link-color);
   }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/components/kemet-scroll-snap/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDlC,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;CAmB3C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesScrollSnap = css`\n  *,\n  *::after,\n  *::before {\n    box-sizing: border-box;\n  }\n\n  :host {\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  :host([axis='horizontal']) {\n    margin: auto;\n    max-width: var(--kemet-scroll-snap-horizontal-max-width, 1024px);\n  }\n\n  :host([pagination=\"left\"]),\n  :host([pagination=\"right\"]) {\n    flex-direction: row;\n  }\n\n  :host([pagination=\"none\"]) ::slotted([slot=\"pagination\"]) {\n    display: none;\n  }\n\n  :host([pagination=\"top\"]) ::slotted([slot=\"pagination\"]),\n  :host([pagination=\"left\"]) ::slotted([slot=\"pagination\"]) {\n    order: -1;\n  }\n\n\n  ::slotted([slot=\"slides\"]) {\n    display: flex;\n    gap: var(--kemet-scroll-snap-gap, 1.5rem);\n    scroll-snap-type: x mandatory;\n    overflow-x: scroll;\n  }\n\n  /* vertical */\n  :host([axis=\"vertical\"]) {\n    height: var(--kemet-scroll-snap-vertical-height, 100vh);\n  }\n\n  :host([axis=\"vertical\"]) ::slotted([slot=\"slides\"]) {\n    flex-direction: column;\n    overflow-x: hidden;\n    scroll-snap-type: y mandatory;\n    padding: var(--kemet-scroll-snap-slides-vertical-padding, 0 2rem);\n  }\n`;\n\nexport const stylesScrollSnapPaginator = css`\n  :host {\n    margin: auto;\n    padding: var(--kemet-scroll-snap-paginator-padding, 1rem 0);\n  }\n\n  nav {\n    display: flex;\n    gap: var(--kemet-scroll-snap-paginator-gap, 0.5rem);\n  }\n\n  :host([center]) nav {\n    justify-content: center;\n  }\n\n  .link {\n    cursor: pointer;\n    color: var(--kemet-scroll-snap-paginator-link-color, var(--kemet-color-primary));\n  }\n`;\n"]}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDlC,CAAC;AAEF,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;CAuB3C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesScrollSnap = css`\n  *,\n  *::after,\n  *::before {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-scroll-snap-horizontal-max-width: 1024px;\n    --kemet-scroll-snap-vertical-height: 100vh;\n    --kemet-scroll-snap-slides-vertical-padding: 0 2rem;\n\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n  }\n\n  :host([axis='horizontal']) {\n    margin: auto;\n    max-width: var(--kemet-scroll-snap-horizontal-max-width);\n  }\n\n  :host([pagination=\"left\"]),\n  :host([pagination=\"right\"]) {\n    flex-direction: row;\n  }\n\n  :host([pagination=\"none\"]) ::slotted([slot=\"pagination\"]) {\n    display: none;\n  }\n\n  :host([pagination=\"top\"]) ::slotted([slot=\"pagination\"]),\n  :host([pagination=\"left\"]) ::slotted([slot=\"pagination\"]) {\n    order: -1;\n  }\n\n\n  ::slotted([slot=\"slides\"]) {\n    display: flex;\n    gap: var(--kemet-scroll-snap-gap, 1.5rem);\n    scroll-snap-type: x mandatory;\n    overflow-x: scroll;\n  }\n\n  /* vertical */\n  :host([axis=\"vertical\"]) {\n    height: var(--kemet-scroll-snap-vertical-height);\n  }\n\n  :host([axis=\"vertical\"]) ::slotted([slot=\"slides\"]) {\n    flex-direction: column;\n    overflow-x: hidden;\n    scroll-snap-type: y mandatory;\n    padding: var(--kemet-scroll-snap-slides-vertical-padding);\n  }\n`;\n\nexport const stylesScrollSnapPaginator = css`\n  :host {\n    --kemet-scroll-snap-paginator-padding: 1rem 0;\n    --kemet-scroll-snap-paginator-gap: 0.5rem;\n    --kemet-scroll-snap-paginator-link-color: rgb(var(--kemet-color-primary));\n\n    margin: auto;\n    padding: var(--kemet-scroll-snap-paginator-padding);\n  }\n\n  nav {\n    display: flex;\n    gap: var(--kemet-scroll-snap-paginator-gap);\n  }\n\n  :host([center]) nav {\n    justify-content: center;\n  }\n\n  .link {\n    cursor: pointer;\n    color: var(--kemet-scroll-snap-paginator-link-color);\n  }\n`;\n"]}

package/dist/components/kemet-select/docs/stories.d.ts

@@ -8,3 +8,6 @@ declare const meta: Meta;
 export default meta;
 declare type Story = StoryObj;
 export declare const Standard: Story;
+export declare const Disabled: Story;
+export declare const Filled: Story;
+export declare const Rounded: Story;

package/dist/components/kemet-select/docs/stories.js

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../kemet-select';
 import '../kemet-option';
 import '../../kemet-tabs/kemet-tabs';
@@ -7,10 +8,16 @@ import '../../kemet-tabs/kemet-tab-panel';
 const meta = {
     title: 'Components / Select',
     component: 'kemet-select',
+    argTypes: {
+        status: {
+            control: { type: 'radio' },
+            options: ['standard', 'error', 'success', 'warning'],
+        },
+    }
 };
 export default meta;
-const Template = ({ status = 'standard', required = true, disabled = false, icon = 'chevron-down', iconSize = 16, filled = false, rounded = false, }) => html `
-<kemet-select status="${status}" ?required=${required} ?disabled=${disabled} icon=${icon} icon-size=${iconSize} ?filled=${filled} ?rounded=${rounded}>
+const Template = (args) => html `
+<kemet-select status="${ifDefined(args.status)}" ?required=${args.required} ?disabled=${args.disabled} icon=${ifDefined(args.icon)} icon-size=${ifDefined(args.iconSize)} ?filled=${args.filled} ?rounded=${args.rounded}>
   <kemet-option label="Choose an Item" value=""></kemet-option>
   <kemet-option label="Item 1" value="1"></kemet-option>
   <kemet-option label="Item 2" value="2" selected></kemet-option>
@@ -20,38 +27,23 @@ const Template = ({ status = 'standard', required = true, disabled = false, icon
 `;
 export const Standard = {
     render: args => Template(args),
+};
+export const Disabled = {
+    render: args => Template(args),
     args: {
-        status: 'standard',
-        required: true,
-        disabled: false,
-        icon: 'chevron-down',
-        iconSize: 16,
-        filled: false,
-        rounded: false,
+        disabled: true,
+    },
+};
+export const Filled = {
+    render: args => Template(args),
+    args: {
+        filled: true,
+    },
+};
+export const Rounded = {
+    render: args => Template(args),
+    args: {
+        rounded: true,
     },
-    argTypes: {
-        status: {
-            control: { type: 'radio' },
-            options: ['standard', 'error', 'success', 'warning'],
-        },
-        required: {
-            control: { type: 'boolean' },
-        },
-        disabled: {
-            control: { type: 'boolean' },
-        },
-        icon: {
-            control: { type: 'text' },
-        },
-        iconSize: {
-            control: { type: 'number' },
-        },
-        filled: {
-            control: { type: 'boolean' },
-        },
-        rounded: {
-            control: { type: 'boolean' },
-        },
-    }
 };
 //# sourceMappingURL=stories.js.map

package/dist/components/kemet-select/docs/stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-select/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAG3B,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AAEzB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;CAC1B,CAAC;AACF,eAAe,IAAI,CAAC;AAKpB,MAAM,QAAQ,GAAG,CAAC,EAChB,MAAM,GAAG,UAAU,EACnB,QAAQ,GAAG,IAAI,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,GAAG,cAAc,EACrB,QAAQ,GAAG,EAAE,EACb,MAAM,GAAG,KAAK,EACd,OAAO,GAAG,KAAK,GAChB,EAAE,EAAE,CAAC,IAAI,CAAA;wBACc,MAAM,eAAe,QAAQ,cAAc,QAAQ,SAAS,IAAI,cAAc,QAAQ,YAAY,MAAM,aAAa,OAAO;;;;;;;CAOnJ,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,UAAU;QAClB,QAAQ,EAAE,IAAI;QACd,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,cAAc;QACpB,QAAQ,EAAE,EAAE;QACZ,MAAM,EAAE,KAAK;QACb,OAAO,EAAE,KAAK;KACf;IACD,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;SACrD;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SAC1B;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;SAC5B;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;QACD,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE;SAC7B;KACF;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-select';\nimport '../kemet-option';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Select',\n  component: 'kemet-select',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\n\nconst Template = ({\n  status = 'standard',\n  required = true,\n  disabled = false,\n  icon = 'chevron-down',\n  iconSize = 16,\n  filled = false,\n  rounded = false,\n}) => html`\n<kemet-select status=\"${status}\" ?required=${required} ?disabled=${disabled} icon=${icon} icon-size=${iconSize} ?filled=${filled} ?rounded=${rounded}>\n  <kemet-option label=\"Choose an Item\" value=\"\"></kemet-option>\n  <kemet-option label=\"Item 1\" value=\"1\"></kemet-option>\n  <kemet-option label=\"Item 2\" value=\"2\" selected></kemet-option>\n  <kemet-option label=\"Item 3\" value=\"3\"></kemet-option>\n  <kemet-option label=\"Item 4\" value=\"4\" disabled></kemet-option>\n</kemet-select>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n  args: {\n    status: 'standard',\n    required: true,\n    disabled: false,\n    icon: 'chevron-down',\n    iconSize: 16,\n    filled: false,\n    rounded: false,\n  },\n  argTypes: {\n    status: {\n      control: { type: 'radio' },\n      options: ['standard', 'error', 'success', 'warning'],\n    },\n    required: {\n      control: { type: 'boolean' },\n    },\n    disabled: {\n      control: { type: 'boolean' },\n    },\n    icon: {\n      control: { type: 'text' },\n    },\n    iconSize: {\n      control: { type: 'number' },\n    },\n    filled: {\n      control: { type: 'boolean' },\n    },\n    rounded: {\n      control: { type: 'boolean' },\n    },\n  }\n};\n"]}
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-select/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,iBAAiB,CAAC;AACzB,OAAO,iBAAiB,CAAC;AAEzB,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,qBAAqB;IAC5B,SAAS,EAAE,cAAc;IACzB,QAAQ,EAAE;QACR,MAAM,EAAE;YACN,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC1B,OAAO,EAAE,CAAC,UAAU,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC;SACrD;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAKpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;wBACP,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,IAAI,CAAC,QAAQ,cAAc,IAAI,CAAC,QAAQ,SAAS,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,YAAY,IAAI,CAAC,MAAM,aAAa,IAAI,CAAC,OAAO;;;;;;;CAOvN,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,QAAQ,EAAE,IAAI;KACf;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAU;IAC3B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,MAAM,EAAE,IAAI;KACb;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,OAAO,EAAE,IAAI;KACd;CACF,CAAC","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-select';\nimport '../kemet-option';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Select',\n  component: 'kemet-select',\n  argTypes: {\n    status: {\n      control: { type: 'radio' },\n      options: ['standard', 'error', 'success', 'warning'],\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\n\nconst Template = (args) => html`\n<kemet-select status=\"${ifDefined(args.status)}\" ?required=${args.required} ?disabled=${args.disabled} icon=${ifDefined(args.icon)} icon-size=${ifDefined(args.iconSize)} ?filled=${args.filled} ?rounded=${args.rounded}>\n  <kemet-option label=\"Choose an Item\" value=\"\"></kemet-option>\n  <kemet-option label=\"Item 1\" value=\"1\"></kemet-option>\n  <kemet-option label=\"Item 2\" value=\"2\" selected></kemet-option>\n  <kemet-option label=\"Item 3\" value=\"3\"></kemet-option>\n  <kemet-option label=\"Item 4\" value=\"4\" disabled></kemet-option>\n</kemet-select>\n`;\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const Disabled: Story = {\n  render: args => Template(args),\n  args: {\n    disabled: true,\n  },\n};\n\nexport const Filled: Story = {\n  render: args => Template(args),\n  args: {\n    filled: true,\n  },\n};\n\nexport const Rounded: Story = {\n  render: args => Template(args),\n  args: {\n    rounded: true,\n  },\n};\n"]}

package/dist/components/kemet-select/kemet-select.d.ts

@@ -23,19 +23,19 @@ import { KemetFieldInterface } from '../kemet-field/types';
  *
  * @csspart select
  *
- * @cssproperty --kemet-select-padding - The padding on the textarea. Default: 1rem.
- * @cssproperty --kemet-select-border - The border of the textarea. Default: 1px solid var(--kemet-color-background).
- * @cssproperty --kemet-select-border-color-error - The border of the error state. Default: 1px solid var(--kemet-color-error).
- * @cssproperty --kemet-select-border-color-success - The border of the success state. Default: 1px solid var(--kemet-color-success).
- * @cssproperty --kemet-select-border-color-warning - The border of the warning state. Default: 1px solid var(--kemet-color-warning).
- * @cssproperty --kemet-select-border-radius-rounded - The border radius on rounded. Default: var(--kemet-border-radius).
- * @cssproperty --kemet-select-border-filled - The border on filled. Default: none.
- * @cssproperty --kemet-select-color-filled - The color on filled. Default: var(--kemet-color-white).
- * @cssproperty --kemet-select-background-color-filled - The background-color on filled. Default: var(--kemet-color-primary).
- * @cssproperty --kemet-select-background-color-error - The error state background color. Default: var(--kemet-color-error).
- * @cssproperty --kemet-select-background-color-success - The success state background color. Default: var(--kemet-color-success).
- * @cssproperty --kemet-select-background-color-warning - The warning state background color. Default: var(--kemet-color-warning).
- * @cssproperty --kemet-select-icon-right - The space on the right of the icon. Default: 1rem.
+ * @cssproperty --kemet-select-padding - The padding on the textarea.
+ * @cssproperty --kemet-select-border - The border of the textarea.
+ * @cssproperty --kemet-select-border-color-error - The border of the error state.
+ * @cssproperty --kemet-select-border-color-success - The border of the success state.
+ * @cssproperty --kemet-select-border-color-warning - The border of the warning state.
+ * @cssproperty --kemet-select-border-radius-rounded - The border radius on rounded.
+ * @cssproperty --kemet-select-border-filled - The border on filled.
+ * @cssproperty --kemet-select-color-filled - The color on filled.
+ * @cssproperty --kemet-select-background-color-filled - The background-color on filled.
+ * @cssproperty --kemet-select-background-color-error - The error state background color.
+ * @cssproperty --kemet-select-background-color-success - The success state background color.
+ * @cssproperty --kemet-select-background-color-warning - The warning state background color.
+ * @cssproperty --kemet-select-icon-right - The space on the right of the icon.
  *
  * @event kemet-input-focused - Fires when the input receives and loses focus
  * @event kemet-input-status - Fires when there's a change in status