kemet-ui 3.1.0 → 4.0.1

package/dist/elements/card.d.ts

@@ -0,0 +1,52 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ * @since 1.4.0
+ * @status stable
+ *
+ * @tagname kemet-card
+ * @summary A highly configurable panel design to display media and information.
+ *
+ * @prop {boolean} center - Centers the elements in the card.
+ *
+ * @slot default - The contents of the alert.
+ * @slot header - The card's header.
+ * @slot media - A slot for images, videos, or embeds.
+ * @slot caption - Text for the media slot.
+ * @slot footer - The card's footer.
+ *
+ *
+ * @csspart media - The media area of the card.
+ * @csspart body - The main contents of the card.
+ *
+ * @cssproperty --kemet-card-padding - The space around elements.
+ * @cssproperty --kemet-card-border-color - The color of the borders.
+ * @cssproperty --kemet-card-color - The color of the text. Default:
+ * @cssproperty --kemet-card-max-width - The max width of the card.
+ * @cssproperty --kemet-card-border - The border around the card.
+ * @cssproperty --kemet-card-border-radius - The border radius of the card.
+ * @cssproperty --kemet-card-background-color - The background color.
+ * @cssproperty --kemet-card-body-padding - The body spacing.
+ * @cssproperty --kemet-card-header-padding - The header spacing.
+ * @cssproperty --kemet-card-header-border-bottom - The header border.
+ * @cssproperty --kemet-card-caption-color - The caption text color.
+ * @cssproperty --kemet-card-caption-padding - The caption spacing.
+ * @cssproperty --kemet-card-caption-background-color - The caption background color.
+ * @cssproperty --kemet-card-footer-padding - The footer spacing.
+ * @cssproperty --kemet-card-footer-border-top - The footer border.
+ *
+ */
+declare class KemetCard extends LitElement {
+    static styles: lit.CSSResult[];
+    center: boolean;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-card': KemetCard;
+    }
+}
+
+export { KemetCard as default };

package/dist/elements/card.js

@@ -0,0 +1,139 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/card.ts
+var card_exports = {};
+__export(card_exports, {
+  default: () => KemetCard
+});
+module.exports = __toCommonJS(card_exports);
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+
+// src/styles/elements/card.ts
+var import_lit = require("lit");
+var stylesBase = import_lit.css`
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+
+  :host {
+    --kemet-card-padding: 1rem;
+    --kemet-card-border-color: rgb(var(--kemet-color-gray-300));
+    --kemet-card-color: rgb(var(--kemet-color-text));
+    --kemet-card-max-width: 600px;
+    --kemet-card-border: 1px solid var(--kemet-card-border-color);
+    --kemet-card-border-radius: 0;
+    --kemet-card-background-color: rgb(var(--kemet-color-background));
+    --kemet-card-body-padding: var(--kemet-card-padding);
+    --kemet-card-header-padding: var(--kemet-card-padding);
+    --kemet-card-header-border-bottom: 1px solid var(--kemet-card-border-color);
+    --kemet-card-caption-color: rgb(var(--kemet-color-white));
+    --kemet-card-caption-padding: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding);
+    --kemet-card-caption-background-color: rgb(var(--kemet-color-black) / 35%);
+    --kemet-card-footer-padding: var(--kemet-card-padding);
+    --kemet-card-footer-border-top: 1px solid var(--kemet-card-border-color);
+
+    color: var(--kemet-card-color);
+    display: inline-flex;
+    flex-direction: column;
+    max-width: var(--kemet-card-max-width);
+    border: var(--kemet-card-border);
+    border-radius: var(--kemet-card-border-radius);
+    background-color: var(--kemet-card-background-color);
+  }
+
+  :host([center]) {
+    align-items: center;
+    text-align: center;
+  }
+
+  .body {
+    padding: var(--kemet-card-body-padding);
+  }
+
+  .media {
+    position: relative;
+  }
+
+  ::slotted(*) {
+    max-width: 100%;
+  }
+
+  ::slotted(img) {
+    display: flex;
+    max-width: 100%;
+  }
+
+  ::slotted([slot="header"]) {
+    width: 100%;
+    padding: var(--kemet-card-header-padding);
+    border-bottom: var(--kemet-card-header-border-bottom);
+  }
+
+  ::slotted([slot="caption"]) {
+    color: var(--kemet-card-caption-color);
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    padding: var(--kemet-card-caption-padding);
+    background-color: var(--kemet-card-caption-background-color);
+  }
+
+  ::slotted([slot="footer"]) {
+    width: 100%;
+    padding: var(--kemet-card-footer-padding);
+    border-top: var(--kemet-card-footer-border-top);
+  }
+`;
+
+// src/elements/card.ts
+var KemetCard = class extends import_lit2.LitElement {
+  render() {
+    return import_lit2.html`
+      <slot name="header"></slot>
+      <div class="media" part="media">
+        <slot name="media"></slot>
+        <slot name="caption"></slot>
+      </div>
+      <div class="body" part="body">
+        <slot></slot>
+      </div>
+      </div>
+      <slot name="footer"></slot>
+    `;
+  }
+};
+KemetCard.styles = [stylesBase];
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetCard.prototype, "center", 2);
+KemetCard = __decorateClass([
+  (0, import_decorators.customElement)("kemet-card")
+], KemetCard);
+//# sourceMappingURL=card.js.map

package/dist/elements/card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/card.ts","../../src/styles/elements/card.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/card';\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-card\n * @summary A highly configurable panel design to display media and information.\n *\n * @prop {boolean} center - Centers the elements in the card.\n *\n * @slot default - The contents of the alert.\n * @slot header - The card's header.\n * @slot media - A slot for images, videos, or embeds.\n * @slot caption - Text for the media slot.\n * @slot footer - The card's footer.\n *\n *\n * @csspart media - The media area of the card.\n * @csspart body - The main contents of the card.\n *\n * @cssproperty --kemet-card-padding - The space around elements.\n * @cssproperty --kemet-card-border-color - The color of the borders.\n * @cssproperty --kemet-card-color - The color of the text. Default:\n * @cssproperty --kemet-card-max-width - The max width of the card.\n * @cssproperty --kemet-card-border - The border around the card.\n * @cssproperty --kemet-card-border-radius - The border radius of the card.\n * @cssproperty --kemet-card-background-color - The background color.\n * @cssproperty --kemet-card-body-padding - The body spacing.\n * @cssproperty --kemet-card-header-padding - The header spacing.\n * @cssproperty --kemet-card-header-border-bottom - The header border.\n * @cssproperty --kemet-card-caption-color - The caption text color.\n * @cssproperty --kemet-card-caption-padding - The caption spacing.\n * @cssproperty --kemet-card-caption-background-color - The caption background color.\n * @cssproperty --kemet-card-footer-padding - The footer spacing.\n * @cssproperty --kemet-card-footer-border-top - The footer border.\n *\n */\n\n@customElement('kemet-card')\nexport default class KemetCard extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Boolean, reflect: true })\n  center: boolean;\n\n  render() {\n    return html`\n      <slot name=\"header\"></slot>\n      <div class=\"media\" part=\"media\">\n        <slot name=\"media\"></slot>\n        <slot name=\"caption\"></slot>\n      </div>\n      <div class=\"body\" part=\"body\">\n        <slot></slot>\n      </div>\n      </div>\n      <slot name=\"footer\"></slot>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-card': KemetCard\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n\n  :host {\n    --kemet-card-padding: 1rem;\n    --kemet-card-border-color: rgb(var(--kemet-color-gray-300));\n    --kemet-card-color: rgb(var(--kemet-color-text));\n    --kemet-card-max-width: 600px;\n    --kemet-card-border: 1px solid var(--kemet-card-border-color);\n    --kemet-card-border-radius: 0;\n    --kemet-card-background-color: rgb(var(--kemet-color-background));\n    --kemet-card-body-padding: var(--kemet-card-padding);\n    --kemet-card-header-padding: var(--kemet-card-padding);\n    --kemet-card-header-border-bottom: 1px solid var(--kemet-card-border-color);\n    --kemet-card-caption-color: rgb(var(--kemet-color-white));\n    --kemet-card-caption-padding: calc(var(--kemet-card-padding) / 2) var(--kemet-card-padding);\n    --kemet-card-caption-background-color: rgb(var(--kemet-color-black) / 35%);\n    --kemet-card-footer-padding: var(--kemet-card-padding);\n    --kemet-card-footer-border-top: 1px solid var(--kemet-card-border-color);\n\n    color: var(--kemet-card-color);\n    display: inline-flex;\n    flex-direction: column;\n    max-width: var(--kemet-card-max-width);\n    border: var(--kemet-card-border);\n    border-radius: var(--kemet-card-border-radius);\n    background-color: var(--kemet-card-background-color);\n  }\n\n  :host([center]) {\n    align-items: center;\n    text-align: center;\n  }\n\n  .body {\n    padding: var(--kemet-card-body-padding);\n  }\n\n  .media {\n    position: relative;\n  }\n\n  ::slotted(*) {\n    max-width: 100%;\n  }\n\n  ::slotted(img) {\n    display: flex;\n    max-width: 100%;\n  }\n\n  ::slotted([slot=\"header\"]) {\n    width: 100%;\n    padding: var(--kemet-card-header-padding);\n    border-bottom: var(--kemet-card-header-border-bottom);\n  }\n\n  ::slotted([slot=\"caption\"]) {\n    color: var(--kemet-card-caption-color);\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    padding: var(--kemet-card-caption-padding);\n    background-color: var(--kemet-card-caption-background-color);\n  }\n\n  ::slotted([slot=\"footer\"]) {\n    width: 100%;\n    padding: var(--kemet-card-footer-padding);\n    border-top: var(--kemet-card-footer-border-top);\n  }\n`;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,cAAiC;AACjC,wBAAwC;;;ACDxC,iBAAoB;AAEb,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADwC1B,IAAqB,YAArB,cAAuC,uBAAW;AAAA,EAMhD,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAYT;AACF;AApBqB,UACZ,SAAS,CAAC,UAAU;AAG3B;AAAA,MADC,4BAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAHvB,UAInB;AAJmB,YAArB;AAAA,MADC,iCAAc,YAAY;AAAA,GACN;","names":["import_lit"]}

package/dist/elements/card.mjs

@@ -0,0 +1,8 @@
+import {
+  KemetCard
+} from "../chunk-JXKIXKVM.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetCard as default
+};
+//# sourceMappingURL=card.mjs.map

package/dist/elements/card.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/carousel-current.d.mts

@@ -0,0 +1,33 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import KemetCarousel from './carousel.mjs';
+import './carousel-link.mjs';
+import './carousel-slide.mjs';
+
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel-current
+ * @summary Displays the active slide number.
+ *
+ * @prop {number} current - The current slide number.
+ *
+ */
+declare class KemetCarouselCurrent extends LitElement {
+    static styles: lit.CSSResult[];
+    current: number;
+    carousel: KemetCarousel | null;
+    firstUpdated(): void;
+    updated(): void;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-carousel-current': KemetCarouselCurrent;
+    }
+}
+
+export { KemetCarouselCurrent as default };

package/dist/elements/carousel-current.d.ts

@@ -0,0 +1,33 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+import KemetCarousel from './carousel.js';
+import './carousel-link.js';
+import './carousel-slide.js';
+
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel-current
+ * @summary Displays the active slide number.
+ *
+ * @prop {number} current - The current slide number.
+ *
+ */
+declare class KemetCarouselCurrent extends LitElement {
+    static styles: lit.CSSResult[];
+    current: number;
+    carousel: KemetCarousel | null;
+    firstUpdated(): void;
+    updated(): void;
+    render(): lit_html.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-carousel-current': KemetCarouselCurrent;
+    }
+}
+
+export { KemetCarouselCurrent as default };

package/dist/elements/carousel-current.js

@@ -0,0 +1,62 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/carousel-current.ts
+var carousel_current_exports = {};
+__export(carousel_current_exports, {
+  default: () => KemetCarouselCurrent
+});
+module.exports = __toCommonJS(carousel_current_exports);
+var import_lit = require("lit");
+var import_decorators = require("lit/decorators.js");
+var KemetCarouselCurrent = class extends import_lit.LitElement {
+  firstUpdated() {
+    this.carousel = this.closest("kemet-carousel");
+  }
+  updated() {
+    this.current = this.carousel?.index + 1;
+  }
+  render() {
+    return import_lit.html`${this.current}`;
+  }
+};
+KemetCarouselCurrent.styles = [
+  import_lit.css`
+      :host {
+        display: inline-block;
+      }
+    `
+];
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetCarouselCurrent.prototype, "current", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetCarouselCurrent.prototype, "carousel", 2);
+KemetCarouselCurrent = __decorateClass([
+  (0, import_decorators.customElement)("kemet-carousel-current")
+], KemetCarouselCurrent);
+//# sourceMappingURL=carousel-current.js.map

package/dist/elements/carousel-current.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/carousel-current.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type KemetCarousel from './carousel';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel-current\n * @summary Displays the active slide number.\n *\n * @prop {number} current - The current slide number.\n *\n */\n\n@customElement('kemet-carousel-current')\nexport default class KemetCarouselCurrent extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n    `,\n  ];\n\n  @property({ type: Number })\n  current: number;\n\n  @state()\n  carousel: KemetCarousel | null;\n\n  firstUpdated() {\n    this.carousel = this.closest('kemet-carousel');\n  }\n\n  updated() {\n    this.current = this.carousel?.index as number + 1;\n  }\n\n  render() {\n    return html`${this.current}`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-current': KemetCarouselCurrent\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAsC;AACtC,wBAA+C;AAgB/C,IAAqB,uBAArB,cAAkD,sBAAW;AAAA,EAe3D,eAAe;AACb,SAAK,WAAW,KAAK,QAAQ,gBAAgB;AAAA,EAC/C;AAAA,EAEA,UAAU;AACR,SAAK,UAAU,KAAK,UAAU,QAAkB;AAAA,EAClD;AAAA,EAEA,SAAS;AACP,WAAO,kBAAO,KAAK,OAAO;AAAA,EAC5B;AACF;AA1BqB,qBACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAKF;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GATP,qBAUnB;AAGA;AAAA,MADC,yBAAM;AAAA,GAZY,qBAanB;AAbmB,uBAArB;AAAA,MADC,iCAAc,wBAAwB;AAAA,GAClB;","names":[]}

package/dist/elements/carousel-current.mjs

@@ -0,0 +1,8 @@
+import {
+  KemetCarouselCurrent
+} from "../chunk-JA5Z4MY5.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetCarouselCurrent as default
+};
+//# sourceMappingURL=carousel-current.mjs.map

package/dist/elements/carousel-current.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/carousel-first.d.mts

@@ -0,0 +1,31 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel-first
+ * @summary A link to the first slide in the carousel.
+ *
+ * @prop {boolean} disabled - Deactivates the button.
+ *
+ * @event kemet-first-activated
+ *
+ */
+declare class KemetCarouselFirst extends LitElement {
+    static styles: lit.CSSResult[];
+    disabled: boolean;
+    render(): lit_html.TemplateResult<1>;
+    activated(): void;
+    handleKeyUp(event: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-carousel-first': KemetCarouselFirst;
+    }
+}
+
+export { KemetCarouselFirst as default };

package/dist/elements/carousel-first.d.ts

@@ -0,0 +1,31 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel-first
+ * @summary A link to the first slide in the carousel.
+ *
+ * @prop {boolean} disabled - Deactivates the button.
+ *
+ * @event kemet-first-activated
+ *
+ */
+declare class KemetCarouselFirst extends LitElement {
+    static styles: lit.CSSResult[];
+    disabled: boolean;
+    render(): lit_html.TemplateResult<1>;
+    activated(): void;
+    handleKeyUp(event: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-carousel-first': KemetCarouselFirst;
+    }
+}
+
+export { KemetCarouselFirst as default };

package/dist/elements/carousel-first.js

@@ -0,0 +1,82 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/carousel-first.ts
+var carousel_first_exports = {};
+__export(carousel_first_exports, {
+  default: () => KemetCarouselFirst
+});
+module.exports = __toCommonJS(carousel_first_exports);
+var import_lit = require("lit");
+var import_decorators = require("lit/decorators.js");
+
+// src/utilities/events.ts
+var emitEvent = (element, name, detail, bubbles = true, composed = true) => {
+  element.dispatchEvent(
+    new CustomEvent(name, { bubbles, composed, detail })
+  );
+};
+
+// src/elements/carousel-first.ts
+var KemetCarouselFirst = class extends import_lit.LitElement {
+  render() {
+    return import_lit.html`
+      <button @keyup=${(event) => this.handleKeyUp(event)} @click=${() => this.activated()}>
+        <slot></slot>
+      </button>
+    `;
+  }
+  activated() {
+    if (!this.disabled) {
+      emitEvent(this, "kemet-first-activated", this);
+    }
+  }
+  handleKeyUp(event) {
+    if (event.code === "Enter") {
+      this.activated();
+    }
+  }
+};
+KemetCarouselFirst.styles = [
+  import_lit.css`
+      button {
+        cursor: pointer;
+        border: 0;
+        background: transparent;
+      }
+
+      :host([disabled]) button {
+        cursor: not-allowed;
+      }
+    `
+];
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, reflect: true })
+], KemetCarouselFirst.prototype, "disabled", 2);
+KemetCarouselFirst = __decorateClass([
+  (0, import_decorators.customElement)("kemet-carousel-first")
+], KemetCarouselFirst);
+//# sourceMappingURL=carousel-first.js.map

package/dist/elements/carousel-first.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/carousel-first.ts","../../src/utilities/events.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\n\n/**\n *\n * @since 1.1.0\n * @status stable\n *\n * @tagname kemet-carousel-first\n * @summary A link to the first slide in the carousel.\n *\n * @prop {boolean} disabled - Deactivates the button.\n *\n * @event kemet-first-activated\n *\n */\n\n@customElement('kemet-carousel-first')\nexport default class KemetCarouselFirst extends LitElement {\n  static styles = [\n    css`\n      button {\n        cursor: pointer;\n        border: 0;\n        background: transparent;\n      }\n\n      :host([disabled]) button {\n        cursor: not-allowed;\n      }\n    `,\n  ];\n\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean;\n\n  render() {\n    return html`\n      <button @keyup=${event => this.handleKeyUp(event)} @click=${() => this.activated()}>\n        <slot></slot>\n      </button>\n    `;\n  }\n\n  activated() {\n    if (!this.disabled) {\n      emitEvent(this, 'kemet-first-activated', this);\n    }\n  }\n\n  handleKeyUp(event) {\n    if (event.code === 'Enter') {\n      this.activated();\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-carousel-first': KemetCarouselFirst\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAsC;AACtC,wBAAwC;;;ACDjC,IAAM,YAAY,CAAC,SAAS,MAAM,QAAQ,UAAU,MAAM,WAAW,SAAS;AACnF,UAAQ;AAAA,IACN,IAAI,YAAY,MAAM,EAAE,SAAS,UAAU,OAAO,CAAC;AAAA,EACrD;AACF;;;ADeA,IAAqB,qBAArB,cAAgD,sBAAW;AAAA,EAkBzD,SAAS;AACP,WAAO;AAAA,uBACY,WAAS,KAAK,YAAY,KAAK,CAAC,WAAW,MAAM,KAAK,UAAU,CAAC;AAAA;AAAA;AAAA;AAAA,EAItF;AAAA,EAEA,YAAY;AACV,QAAI,CAAC,KAAK,UAAU;AAClB,gBAAU,MAAM,yBAAyB,IAAI;AAAA,IAC/C;AAAA,EACF;AAAA,EAEA,YAAY,OAAO;AACjB,QAAI,MAAM,SAAS,SAAS;AAC1B,WAAK,UAAU;AAAA,IACjB;AAAA,EACF;AACF;AArCqB,mBACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWF;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfvB,mBAgBnB;AAhBmB,qBAArB;AAAA,MADC,iCAAc,sBAAsB;AAAA,GAChB;","names":[]}

package/dist/elements/carousel-first.mjs

@@ -0,0 +1,9 @@
+import {
+  KemetCarouselFirst
+} from "../chunk-32DYCJ46.mjs";
+import "../chunk-LHEY3UOF.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetCarouselFirst as default
+};
+//# sourceMappingURL=carousel-first.mjs.map

package/dist/elements/carousel-first.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/elements/carousel-last.d.mts

@@ -0,0 +1,31 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel-last
+ * @summary A link to the last slide in the carousel.
+ *
+ * @prop {boolean} disabled - Deactivates the button.
+ *
+ * @event kemet-last-activated
+ *
+ */
+declare class KemetCarouselLast extends LitElement {
+    static styles: lit.CSSResult[];
+    disabled: boolean;
+    render(): lit_html.TemplateResult<1>;
+    activated(): void;
+    handleKeyUp(event: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-carousel-last': KemetCarouselLast;
+    }
+}
+
+export { KemetCarouselLast as default };

package/dist/elements/carousel-last.d.ts

@@ -0,0 +1,31 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { LitElement } from 'lit';
+
+/**
+ *
+ * @since 1.1.0
+ * @status stable
+ *
+ * @tagname kemet-carousel-last
+ * @summary A link to the last slide in the carousel.
+ *
+ * @prop {boolean} disabled - Deactivates the button.
+ *
+ * @event kemet-last-activated
+ *
+ */
+declare class KemetCarouselLast extends LitElement {
+    static styles: lit.CSSResult[];
+    disabled: boolean;
+    render(): lit_html.TemplateResult<1>;
+    activated(): void;
+    handleKeyUp(event: any): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-carousel-last': KemetCarouselLast;
+    }
+}
+
+export { KemetCarouselLast as default };