npm - kemet-ui - Versions diffs - 2.0.3 → 3.0.1 - Mend

kemet-ui 2.0.3 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (336) hide show

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import KemetScrollSnapSlide from './kemet-scroll-snap-slide';
 /**
  * @since 1.0.0
  * @status stable
@@ -14,16 +15,16 @@ 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.
  *
  */
 export default class KemetScrollSnapPaginator extends LitElement {
     static styles: import("lit").CSSResult[];
-    slides: any[];
+    slides: KemetScrollSnapSlide[];
     icon: string;
     size: number;
     center: boolean;
@@ -33,9 +34,9 @@ export default class KemetScrollSnapPaginator extends LitElement {
     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;
+    pageDisplay(slide: KemetScrollSnapSlide, visibleIndex: number): string | number | import("lit-html").TemplateResult<1>;
+    slideLink(index: string): void;
+    handleKeyboardInput(event: KeyboardEvent, id: string): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

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

@@ -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.
  *
@@ -63,7 +63,7 @@ let KemetScrollSnapPaginator = class KemetScrollSnapPaginator extends LitElement
             class="link"
             tabindex="0"
             role="button"
-            @keyup="${event => this.handleKeyboardInput(event, slide.id)}"
+            @keyup="${(event) => this.handleKeyboardInput(event, slide.id)}"
             @click=${() => this.slideLink(slide.id)}
             aria-label="${slide.label}">
             ${this.pageDisplay(slide, counter)}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kemet-scroll-snap-paginator.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/kemet-scroll-snap-paginator.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,yBAAyB,EAAE,MAAM,UAAU,CAAC;~~AAErD~~;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGH,IAAqB,wBAAwB,GAA7C,MAAqB,wBAAyB,SAAQ,UAAU;IAAhE;;QAIE,WAAM,~~GAAU~~,EAAE,CAAC;~~QAGnB~~,SAAI,GAAW,aAAa,CAAC;QAG7B,SAAI,GAAW,EAAE,CAAC;QAMlB,qBAAgB,GAAY,KAAK,CAAC;QAGlC,mBAAc,GAAY,KAAK,CAAC;QAGhC,kBAAa,GAAY,KAAK,CAAC;~~IAsEjC~~,CAAC;IAnEC,OAAO;QACL,MAAM,iBAAiB,GAAG,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,CAAC;QAE5D,IAAI,iBAAiB,EAAE;YACrB,iBAAiB,CAAC,gBAAgB,CAAC,+BAA+B,EAAE,CAAC,KAAkB,EAAE,EAAE;gBACzF,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;YAC7B,CAAC,CAAC,CAAC;SACJ;IACH,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;wBACS,IAAI,CAAC,cAAc,EAAE;KACxC,CAAC;IACJ,CAAC;IAED,cAAc;QACZ,IAAI,OAAO,GAAG,CAAC,CAAC;QAEhB,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,OAAO,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE;gBAC/B,OAAO,GAAG,OAAO,IAAI,CAAC,CAAC;gBAEvB,IAAI,KAAK,CAAC,OAAO,EAAE;oBACjB,OAAO,IAAI,CAAA;gCACW,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC;WACrD,CAAC;iBACH;gBAED,OAAO,IAAI,CAAA;;;;;sBAKG,~~KAAK,~~CAAC,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC;~~qBACnD~~,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;0BACzB,KAAK,CAAC,KAAK;cACvB,IAAI,CAAC,WAAW,CAAC,KAAK,EAAE,OAAO,CAAC;;SAErC,CAAC;YACJ,CAAC,CAAC,CAAC;SACJ;QAED,OAAO,IAAI,CAAC;IACd,CAAC;IAED,WAAW,CAAC,~~KAAK~~,EAAE,~~YAAY~~;~~QAC7B~~,IAAI,IAAI,CAAC,cAAc,EAAE;YACvB,OAAO,YAAY,CAAC;SACrB;QAED,IAAI,IAAI,CAAC,aAAa,EAAE;YACtB,OAAO,KAAK,CAAC,KAAK,CAAC;SACpB;QAED,OAAO,IAAI,CAAA,oBAAoB,IAAI,CAAC,IAAI,SAAS,IAAI,CAAC,IAAI,gBAAgB,CAAC;IAC7E,CAAC;IAED,SAAS,CAAC,~~KAAK~~;~~QACb~~,SAAS,CAAC,IAAI,EAAE,yBAAyB,EAAE,KAAK,CAAC,CAAC;IACpD,CAAC;IAED,mBAAmB,CAAC,~~KAAK~~,EAAE,~~EAAE~~;~~QAC3B~~,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE;YACpD,IAAI,CAAC,SAAS,CAAC,EAAE,CAAC,CAAC;SACpB;IACH,CAAC;CACF,CAAA;~~AA3FQ~~,+BAAM,GAAG,CAAC,yBAAyB,CAAC,CAAC;AAG5C;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;~~wDACP~~;~~AAGnB~~;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACE;AAG7B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sDACT;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wDAC3B;AAGhB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,oBAAoB,EAAE,CAAC;kEAC3B;AAGlC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;gEAC1C;AAGhC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;+DAC1C;AAtBZ,wBAAwB;IAD5C,aAAa,CAAC,6BAA6B,CAAC;GACxB,wBAAwB,~~CA4F5C~~;~~eA5FoB~~,wBAAwB","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"]}
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';\nimport KemetScrollSnapSlide from './kemet-scroll-snap-slide';\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: KemetScrollSnapSlide[] = [];\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 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: KeyboardEvent) => 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: KemetScrollSnapSlide, visibleIndex: number) {\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: string) {\n emitEvent(this, 'kemet-scroll-snap-focus', index);\n }\n\n handleKeyboardInput(event: KeyboardEvent, id: string) {\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-slide.d.ts CHANGED Viewed

@@ -6,7 +6,7 @@ import { LitElement } from 'lit';
  * @tagname kemet-scroll-snap-slide
  * @summary A slide in a scroll snap component.
  *
- * @prop {boolean} focused - Is true when the slide is fully visible in it's container.
+ * @prop {boolean} focused - Is true when the slide is fully visible in its container.
  * @prop {number} index - Identifies the slide.
  * @prop {string} label - Labels the slide.
  *

package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.js CHANGED Viewed

@@ -8,7 +8,7 @@ import { customElement, property } from 'lit/decorators.js';
  * @tagname kemet-scroll-snap-slide
  * @summary A slide in a scroll snap component.
  *
- * @prop {boolean} focused - Is true when the slide is fully visible in it's container.
+ * @prop {boolean} focused - Is true when the slide is fully visible in its container.
  * @prop {number} index - Identifies the slide.
  * @prop {string} label - Labels the slide.
  *

package/dist/components/kemet-scroll-snap/kemet-scroll-snap-slide.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kemet-scroll-snap-slide.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/kemet-scroll-snap-slide.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;;GAcG;AAGH,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,UAAU;IAmB1D,OAAO;QACL,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,WAAW;QACT,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACrC,CAAC;CACF,CAAA;AA/BQ,2BAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;GAOnB,CAAC,CAAC;AAGH;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC5B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC5B;AAjBK,oBAAoB;IADxC,aAAa,CAAC,yBAAyB,CAAC;GACpB,oBAAoB,CAgCxC;eAhCoB,oBAAoB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-scroll-snap-slide\n * @summary A slide in a scroll snap component.\n \n @prop {boolean} focused - Is true when the slide is fully visible in ~~it's~~ container.\n * @prop {number} index - Identifies the slide.\n * @prop {string} label - Labels the slide.\n \n @cssproperty --kemet-scroll-snap-slide-width - The width of the slide. Default: 100%.\n * @cssproperty --kemet-scroll-snap-slide-align - The slide alignment. Default: center.\n \n /\n\n@customElement('kemet-scroll-snap-slide')\nexport default class KemetScrollSnapSlide extends LitElement {\n static styles = [css`\n :host {\n display: block;\n flex: 0 0 auto;\n width: var(--kemet-scroll-snap-slide-width, 100%);\n scroll-snap-align: var(--kemet-scroll-snap-slide-align, center);\n }\n `];\n\n @property({ type: Boolean, reflect: true })\n focused: boolean;\n\n @property({ type: Number, reflect: true })\n index: number;\n\n @property({ type: String, reflect: true })\n label: string;\n\n updated() {\n this.addTabIndex();\n }\n\n render() {\n return html`\n <slot></slot>\n `;\n }\n\n addTabIndex() {\n this.setAttribute('tabindex', '0');\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-scroll-snap-slide': KemetScrollSnapSlide\n }\n}\n"]}
1	+ {"version":3,"file":"kemet-scroll-snap-slide.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/kemet-scroll-snap-slide.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;;GAcG;AAGH,IAAqB,oBAAoB,GAAzC,MAAqB,oBAAqB,SAAQ,UAAU;IAmB1D,OAAO;QACL,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;KAEV,CAAC;IACJ,CAAC;IAED,WAAW;QACT,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACrC,CAAC;CACF,CAAA;AA/BQ,2BAAM,GAAG,CAAC,GAAG,CAAA;;;;;;;GAOnB,CAAC,CAAC;AAGH;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC5B;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAC5B;AAjBK,oBAAoB;IADxC,aAAa,CAAC,yBAAyB,CAAC;GACpB,oBAAoB,CAgCxC;eAhCoB,oBAAoB","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-scroll-snap-slide\n * @summary A slide in a scroll snap component.\n \n @prop {boolean} focused - Is true when the slide is fully visible in its container.\n * @prop {number} index - Identifies the slide.\n * @prop {string} label - Labels the slide.\n \n @cssproperty --kemet-scroll-snap-slide-width - The width of the slide. Default: 100%.\n * @cssproperty --kemet-scroll-snap-slide-align - The slide alignment. Default: center.\n \n /\n\n@customElement('kemet-scroll-snap-slide')\nexport default class KemetScrollSnapSlide extends LitElement {\n static styles = [css`\n :host {\n display: block;\n flex: 0 0 auto;\n width: var(--kemet-scroll-snap-slide-width, 100%);\n scroll-snap-align: var(--kemet-scroll-snap-slide-align, center);\n }\n `];\n\n @property({ type: Boolean, reflect: true })\n focused: boolean;\n\n @property({ type: Number, reflect: true })\n index: number;\n\n @property({ type: String, reflect: true })\n label: string;\n\n updated() {\n this.addTabIndex();\n }\n\n render() {\n return html`\n <slot></slot>\n `;\n }\n\n addTabIndex() {\n this.setAttribute('tabindex', '0');\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-scroll-snap-slide': KemetScrollSnapSlide\n }\n}\n"]}

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

@@ -1,5 +1,6 @@
 import { LitElement } from 'lit';
 import { TypeAxis, TypePagination } from './types';
+import KemetScrollSnapSlide from './kemet-scroll-snap-slide';
 /**
  * @since 1.0.0
  * @status stable
@@ -16,10 +17,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.
  *
@@ -29,14 +30,14 @@ export default class KemetScrollSnap extends LitElement {
     axis: TypeAxis;
     pagination: TypePagination;
     isTouchDevice: boolean;
-    slides: any[];
+    slides: KemetScrollSnapSlide[];
     constructor();
     firstUpdated(): void;
     updated(): void;
     render(): import("lit-html").TemplateResult<1>;
     setFocusedSlides(): void;
     makeSlides(): void;
-    focusSlide(index: any): void;
+    focusSlide(index: number): void;
     setVerticalAttribute(): void;
 }
 declare global {

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

@@ -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.
  *
@@ -63,13 +63,8 @@ let KemetScrollSnap = class KemetScrollSnap extends LitElement {
         };
         const callback = (entries) => {
             entries.forEach((entry) => {
-                const { target } = entry;
-                if (entry.intersectionRatio >= 0.5) {
-                    target.focused = true;
-                }
-                else {
-                    target.focused = false;
-                }
+                const target = entry.target;
+                target.focused = entry.intersectionRatio >= 0.5;
             });
             this.makeSlides();
         };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"kemet-scroll-snap.js","sourceRoot":"","sources":["../../../src/components/kemet-scroll-snap/kemet-scroll-snap.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAC;~~AAG5C~~;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAGH,IAAqB,eAAe,GAApC,MAAqB,eAAgB,SAAQ,UAAU;IAerD;QACE,KAAK,EAAE,CAAC;QAZV,SAAI,GAAa,YAAY,CAAC;QAG9B,eAAU,GAAmB,QAAQ,CAAC;QAWpC,IAAI,CAAC,gBAAgB,CAAC,yBAAyB,EAAE,CAAC,KAAkB,EAAE,EAAE;YACtE,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;IACL,CAAC;IAED,YAAY;QACV,sBAAsB;QACtB,IAAI,CAAC,aAAa,GAAG,cAAc,IAAI,QAAQ,CAAC,eAAe,CAAC;QAChE,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;QAEjB,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,OAAO;QACL,IAAI,CAAC,oBAAoB,EAAE,CAAC;IAC9B,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA;;;KAGV,CAAC;IACJ,CAAC;IAED,gBAAgB;QACd,wFAAwF;QACxF,6FAA6F;QAC7F,MAAM,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,CAAC;QAChE,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;QAExD,MAAM,OAAO,GAAG;YACd,IAAI,EAAE,SAAS;YACf,UAAU,EAAE,KAAK;YACjB,SAAS,EAAE,GAAG;SACf,CAAC;QAEF,MAAM,QAAQ,GAAG,CAAC,~~OAAO~~,EAAE,EAAE;~~YAC3B~~,OAAO,CAAC,OAAO,CAAC,CAAC,~~KAAK~~,EAAE,EAAE;~~gBACxB~~,MAAM,~~EAAE,~~MAAM,~~EAAE,~~GAAG,KAAK,CAAC~~;gBAEzB~~,~~IAAI~~,~~KAAK,~~CAAC~~,iBAAiB,IAAI,GAAG,EAAE~~;~~oBAClC~~,MAAM,CAAC,OAAO,GAAG,~~IAAI~~,CAAC~~;iBACvB;qBAAM;oBACL~~,~~MAAM~~,~~CAAC~~,~~OAAO,~~GAAG,~~KAAK,~~CAAC;~~iBACxB;YACH~~,CAAC,CAAC,CAAC;YAEH,IAAI,CAAC,UAAU,EAAE,CAAC;QACpB,CAAC,CAAC;QAEF,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;QAE7D,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YACvB,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC;IAED,UAAU;QACR,MAAM,MAAM,GAAG,EAAE,CAAC;QAElB,IAAI,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,KAAK,EAAE,EAAE;YAC1E,MAAM,KAAK,GAAG,OAAwC,CAAC;YAEvD,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;YACpB,MAAM,CAAC,IAAI,CAAC;gBACV,EAAE,EAAE,KAAK;gBACT,OAAO,EAAE,KAAK,CAAC,OAAO;gBACtB,KAAK,EAAE,KAAK,CAAC,KAAK;aACnB,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;QACrB,SAAS,CAAC,IAAI,EAAE,+BAA+B,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC;IAChE,CAAC;IAED,UAAU,CAAC,~~KAAK~~;~~QACd~~,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,CAAC,kCAAkC,KAAK,IAAI,CAAC,CAAC;QACpF,WAAW,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IACvE,CAAC;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;YAC5B,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,wBAAwB,EAAE,UAAU,CAAC,CAAC;SACnF;IACH,CAAC;CACF,CAAA;~~AAtGQ~~,sBAAM,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAGnC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACZ;AAG9B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDACJ;AAGtC;IADC,KAAK,EAAE;sDACe;AAGvB;IADC,KAAK,EAAE;+~~CACM~~;~~AAbK~~,eAAe;IADnC,aAAa,CAAC,mBAAmB,CAAC;GACd,eAAe,~~CAuGnC~~;~~eAvGoB~~,eAAe","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"]}
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';\nimport KemetScrollSnapSlide from './kemet-scroll-snap-slide';\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: KemetScrollSnapSlide[];\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: IntersectionObserverEntry[]) => {\n entries.forEach((entry: IntersectionObserverEntry) => {\n const target = entry.target as KemetScrollSnapSlide;\n target.focused = entry.intersectionRatio >= 0.5;\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: number) {\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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;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-option.d.ts CHANGED Viewed

@@ -18,7 +18,7 @@ import { LitElement } from 'lit';
 export default class KemetOption extends LitElement {
     label: string;
     value: string;
-    disable: boolean;
+    disabled: boolean;
     selected: boolean;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/components/kemet-select/kemet-option.js CHANGED Viewed

@@ -34,7 +34,7 @@ __decorate([
 ], KemetOption.prototype, "value", void 0);
 __decorate([
     property({ type: Boolean })
-], KemetOption.prototype, "disable", void 0);
+], KemetOption.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean })
 ], KemetOption.prototype, "selected", void 0);

package/dist/components/kemet-select/kemet-option.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kemet-option.js","sourceRoot":"","sources":["../../../src/components/kemet-select/kemet-option.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;;;GAeG;AAGH,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,UAAU;IAAnD;;QAKE,UAAK,GAAW,EAAE,CAAC;IAWrB,CAAC;IAHC,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAdC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;~~4CACX~~;~~AAGjB~~;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACV;AAXC,WAAW;IAD/B,aAAa,CAAC,cAAc,CAAC;GACT,WAAW,CAgB/B;eAhBoB,WAAW","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-option\n * @summary An option in a select.\n \n @prop {string} label - The label of the option\n * @prop {string} value - The value of the options\n * @prop {boolean} disabled - Determines whether to disable the option\n * @prop {boolean} selected - Selects the option if true\n \n @event kemet-input-focused - Fires when the input receives and loses focus\n * @event kemet-input-status - Fires when there's a change in status\n \n /\n\n@customElement('kemet-option')\nexport default class KemetOption extends LitElement {\n @property({ type: String })\n label: string;\n\n @property({ type: String })\n value: string = '';\n\n @property({ type: Boolean })\n ~~disable~~: boolean;\n\n @property({ type: Boolean })\n selected: boolean;\n\n render() {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-option': KemetOption\n }\n}\n"]}
1	+ {"version":3,"file":"kemet-option.js","sourceRoot":"","sources":["../../../src/components/kemet-select/kemet-option.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE5D;;;;;;;;;;;;;;;GAeG;AAGH,IAAqB,WAAW,GAAhC,MAAqB,WAAY,SAAQ,UAAU;IAAnD;;QAKE,UAAK,GAAW,EAAE,CAAC;IAWrB,CAAC;IAHC,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,CAAC;IAC7B,CAAC;CACF,CAAA;AAdC;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CACR;AAGnB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACV;AAGlB;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CACV;AAXC,WAAW;IAD/B,aAAa,CAAC,cAAc,CAAC;GACT,WAAW,CAgB/B;eAhBoB,WAAW","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n/*\n @since 1.0.0\n * @status stable\n \n @tagname kemet-option\n * @summary An option in a select.\n \n @prop {string} label - The label of the option\n * @prop {string} value - The value of the options\n * @prop {boolean} disabled - Determines whether to disable the option\n * @prop {boolean} selected - Selects the option if true\n \n @event kemet-input-focused - Fires when the input receives and loses focus\n * @event kemet-input-status - Fires when there's a change in status\n \n /\n\n@customElement('kemet-option')\nexport default class KemetOption extends LitElement {\n @property({ type: String })\n label: string;\n\n @property({ type: String })\n value: string = '';\n\n @property({ type: Boolean })\n disabled: boolean;\n\n @property({ type: Boolean })\n selected: boolean;\n\n render() {\n return html`<slot></slot>`;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-option': KemetOption\n }\n}\n"]}

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

@@ -1,6 +1,7 @@
-import { LitElement } from 'lit';
+import { LitElement, TemplateResult } from 'lit';
 import { FormSubmitController } from '../../utilities/controllers/forms';
 import { KemetFieldInterface } from '../kemet-field/types';
+import type KemetOption from './kemet-option';
 /**
  * @since 1.0.0
  * @status stable
@@ -13,8 +14,8 @@ import { KemetFieldInterface } from '../kemet-field/types';
  * @prop {string} value - The value of the select
  * @prop {array} options - The options the select contains
  * @prop {string} status - The status of the select
- * @prop {boolean} required - Determines whether or not the field is required
- * @prop {boolean} disabled - Determines whether or not the field is disabled
+ * @prop {boolean} required - Determines whether the field is required
+ * @prop {boolean} disabled - Determines whether the field is disabled
  * @prop {boolean} multiple - Support of multiple choice selections
  * @prop {string} icon - The dropdown icon
  * @prop {number} iconSize - The dropdown icon size
@@ -23,31 +24,38 @@ 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
+ * @event kemet-input-change - Fires when the select input changes
  *
  */
+interface IOptions {
+    label: string;
+    value: string;
+    disabled: boolean;
+    selected: boolean;
+}
 export default class KemetSelect extends LitElement {
     formSubmitController: FormSubmitController;
     static styles: import("lit").CSSResult[];
     slug: string;
     name: string;
     value: string;
-    options: any[];
+    options: IOptions[];
     status: string;
     required: boolean;
     disabled: boolean;
@@ -60,22 +68,22 @@ export default class KemetSelect extends LitElement {
     control: KemetFieldInterface;
     select: HTMLSelectElement;
     selectedOption: HTMLOptionElement;
-    optionElements: any;
+    optionElements: NodeListOf<KemetOption>;
     hasFocus: boolean;
     constructor();
     firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
     /**
      * Generates the option elements
      * @private
      * @returns {TemplateResult} An option element
      */
-    makeOptions(): import("lit-html").TemplateResult<1>[];
+    makeOptions(): TemplateResult<1>[];
     /**
-     * Generates an dropdown icon
+     * Generates a dropdown icon
      * @private
      */
-    makeIcon(): import("lit-html").TemplateResult<1>;
+    makeIcon(): TemplateResult<1>;
     /**
      * Handles when the input receives focus
      * @private
@@ -101,10 +109,11 @@ export default class KemetSelect extends LitElement {
      * @public
      * @returns {boolean}
      */
-    checkValidity(): void;
+    checkValidity(): boolean;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'kemet-select': KemetSelect;
     }
 }
+export {};