kemet-ui 4.0.0 → 4.0.2

package/dist/chunk-Q3TV6JZX.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/badge.ts","../src/styles/elements/badge.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/badge';\nimport { EnumRoundedSizes, EnumStatuses, TypeRoundedSizes, TypeStatus } from '../utilities/constants';\n\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-badge\n * @summary Badges display the status of information.\n *\n * @prop {TypeStatus} status - The status of the badge\n * @prop {number} circlePadding - Padding on the badge as a circle\n * @prop {TypeRoundedSizes} rounded - Rounds the corners on the badge\n * @prop {boolean} outlined - Outlines the badge\n *\n * @cssproperty --kemet-badge-padding - The padding of the badge. Default: 10px.\n *\n */\n\n@customElement('kemet-badge')\nexport default class KemetBadge extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ reflect: true })\n  status: TypeStatus = EnumStatuses.Primary;\n\n  @property({ type: Number, attribute: 'circle-padding' })\n  circlePadding: number = 0;\n\n  @property({ type: String, reflect: true })\n  rounded: TypeRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  outlined: boolean = false;\n\n  @state()\n  iconLeft: boolean = false;\n\n  @state()\n  iconRight: boolean = false;\n\n  render() {\n    return html`\n      <slot name=\"left\" @slotchange=${() => this.handleLeftChange()}></slot>\n      ${this.iconLeft ? html`&nbsp;` : ''}\n      <slot @slotchange=${() => this.handleSlotChange()}></slot>\n      ${this.iconRight ? html`&nbsp;` : ''}\n      <slot name=\"right\" @slotchange=${() => this.handleRightChange()}></slot>\n    `;\n  }\n\n  handleSlotChange() {\n    if (this.rounded === EnumRoundedSizes.CIRCLE) {\n      this.style.height = `${this.offsetWidth + this.circlePadding}px`;\n      this.style.width = `${this.offsetWidth + this.circlePadding}px`;\n    }\n  }\n\n  handleLeftChange() {\n    const left = this.querySelector('[slot=\"left\"]');\n    if (left) this.iconLeft = true;\n  }\n\n  handleRightChange() {\n    const right = this.querySelector('[slot=\"right\"]');\n    if (right) this.iconRight = true;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-badge': KemetBadge\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-badge-padding: 10px;\n    --kemet-badge-color: rgb(var(--kemet-color-white));\n    --kemet-badge-background-color: rgb(var(--kemet-color-primary));\n    --kemet-badge-border: 0;\n    --kemet-badge-border-width: 1px;\n    --kemet-badge-border-style: solid;\n    --kemet-badge-border-color: rgb(var(--kemet-color-primary));\n\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: var(--kemet-badge-padding);\n    line-height: 1;\n    color: var(--kemet-badge-color);\n    background-color: var(--kemet-badge-background-color);\n    border: var(--kemet-badge-border);\n  }\n\n  :host([status='primary']) {\n    --kemet-badge-background-color: rgb(var(--kemet-color-primary));\n  }\n\n  :host([status='success']) {\n    --kemet-badge-background-color: rgb(var(--kemet-color-success));\n  }\n\n  :host([status='standard']) {\n    --kemet-badge-background-color: rgb(var(--kemet-color-gray-500));\n  }\n\n  :host([status='warning']) {\n    --kemet-badge-background-color: rgb(var(--kemet-color-warning));\n  }\n\n  :host([status='error']) {\n    --kemet-badge-background-color: rgb(var(--kemet-color-error));\n  }\n\n  :host([rounded]) {\n    border-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=sm]) {\n    border-radius: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=md]) {\n    border-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=lg]) {\n    border-radius: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=xl]) {\n    border-radius: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=circle]) {\n    border-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=pill]) {\n    border-radius: var(--kemet-border-radius-pill);\n  }\n\n  :host([outlined]) {\n    --kemet-badge-color: rgb(var(--kemet-color-foreground));\n    --kemet-badge-background-color: transparent;\n    --kemet-badge-border: var(--kemet-badge-border-width) var(--kemet-badge-border-style) var(--kemet-badge-border-color);\n  }\n\n  :host([outlined][status=primary]) {\n    --kemet-badge-border-color: rgb(var(--kemet-color-primary));\n  }\n\n  :host([outlined][status=success]) {\n    --kemet-badge-border-color: rgb(var(--kemet-color-success));\n  }\n\n  :host([outlined][status=warning]) {\n    --kemet-badge-border-color: rgb(var(--kemet-color-warning));\n  }\n\n  :host([outlined][status=error]) {\n    --kemet-badge-border-color: rgb(var(--kemet-color-error));\n  }\n`;\n"],"mappings":";;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,UAAU,aAAa;;;ACD/C,SAAS,WAAW;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADqB1B,IAAqB,aAArB,cAAwC,WAAW;AAAA,EAAnD;AAAA;AAIE;AAGA,yBAAwB;AAMxB,oBAAoB;AAGpB,oBAAoB;AAGpB,qBAAqB;AAAA;AAAA,EAErB,SAAS;AACP,WAAO;AAAA,sCAC2B,MAAM,KAAK,iBAAiB,CAAC;AAAA,QAC3D,KAAK,WAAW,eAAe,EAAE;AAAA,0BACf,MAAM,KAAK,iBAAiB,CAAC;AAAA,QAC/C,KAAK,YAAY,eAAe,EAAE;AAAA,uCACH,MAAM,KAAK,kBAAkB,CAAC;AAAA;AAAA,EAEnE;AAAA,EAEA,mBAAmB;AACjB,QAAI,KAAK,mCAAqC;AAC5C,WAAK,MAAM,SAAS,GAAG,KAAK,cAAc,KAAK,aAAa;AAC5D,WAAK,MAAM,QAAQ,GAAG,KAAK,cAAc,KAAK,aAAa;AAAA,IAC7D;AAAA,EACF;AAAA,EAEA,mBAAmB;AACjB,UAAM,OAAO,KAAK,cAAc,eAAe;AAC/C,QAAI,KAAM,MAAK,WAAW;AAAA,EAC5B;AAAA,EAEA,oBAAoB;AAClB,UAAM,QAAQ,KAAK,cAAc,gBAAgB;AACjD,QAAI,MAAO,MAAK,YAAY;AAAA,EAC9B;AACF;AA/CqB,WACZ,SAAS,CAAC,UAAU;AAG3B;AAAA,EADC,SAAS,EAAE,SAAS,KAAK,CAAC;AAAA,GAHR,WAInB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,WAAW,iBAAiB,CAAC;AAAA,GANpC,WAOnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GATtB,WAUnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAZvB,WAanB;AAGA;AAAA,EADC,MAAM;AAAA,GAfY,WAgBnB;AAGA;AAAA,EADC,MAAM;AAAA,GAlBY,WAmBnB;AAnBmB,aAArB;AAAA,EADC,cAAc,aAAa;AAAA,GACP;","names":[]}

package/dist/chunk-QCMF4CCI.mjs

@@ -0,0 +1,197 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  FormSubmitController
+} from "./chunk-VDX3OED3.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/toggle.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+// src/styles/elements/toggle.ts
+import { css } from "lit";
+var stylesToggle = css`
+  :host {
+    --kemet-toggle-width: 3.5rem;
+    --kemet-toggle-height: 2rem;
+    --kemet-toggle-handle-diameter: 1.6rem;
+    --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);
+    --kemet-toggle-track-border: none;
+    --kemet-toggle-track-color: rgb(var(--kemet-color-white));
+    --kemet-toggle-track-shadow: inset 0 0.4rem 0.7rem 0 rgb(var(--kemet-color-gray-800) / 35%), inset 0 -0.2rem 0.4rem 0 rgb(var(--kemet-color-gray-50));
+    --kemet-toggle-handle-border: none;
+    --kemet-toggle-handle-color: rgb(var(--kemet-color-primary));
+    --kemet-toggle-handle-shadow: 0 0.5rem 0.5rem 0 rgb(var(--kemet-color-black) / 10%), 0 0.5rem 0.5rem 0 rgb(var(--kemet-color-black) / 20%);
+
+    display: flex;
+    align-items: center;
+  }
+
+  :host([disabled]) {
+    opacity: 0.5;
+  }
+
+  label {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    font-size: inherit;
+    color: inherit;
+  }
+
+  :host([disabled]) label {
+    cursor: not-allowed;
+  }
+
+  input {
+    display: none;
+  }
+
+  [part='control'] {
+    position: relative;
+    display: inline-flex;
+    margin: 0;
+    width: var(--kemet-toggle-width);
+    height: var(--kemet-toggle-height);
+  }
+
+  [part='control'] > span {
+    transition: 300ms ease-in-out;
+  }
+
+  [part='track'] {
+    width: var(--kemet-toggle-width);
+    height: var(--kemet-toggle-height);
+    border: var(--kemet-toggle-track-border);
+    border-radius: var(--kemet-toggle-height);
+    background-color: var(--kemet-toggle-track-color);
+    box-shadow: var(--kemet-toggle-track-shadow);
+  }
+
+  :host([squared]) [part='track'] {
+    border-radius: 0;
+  }
+
+  [part='handle'] {
+    position: absolute;
+    top: var(--kemet-toggle-handle-margin);
+    left: var(--kemet-toggle-handle-margin);
+    width: var(--kemet-toggle-handle-diameter);
+    height: var(--kemet-toggle-handle-diameter);
+    transform: translateX(0);
+    border: var(--kemet-toggle-handle-border);
+    border-radius: var(--kemet-toggle-handle-diameter);
+    background-color: var(--kemet-toggle-handle-color);
+    box-shadow: var(--kemet-toggle-handle-shadow);
+  }
+
+  :host([squared]) [part='handle'] {
+    border-radius: 0;
+  }
+
+  :host([checked]) [part='handle'] {
+    transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));
+  }
+
+  .option {
+    font-size: 90%;
+  }
+`;
+
+// src/elements/toggle.ts
+var KemetToggle = class extends LitElement {
+  constructor() {
+    super();
+    this.name = "toggle-switch";
+    this.checked = false;
+    this.disabled = false;
+    this.label = "";
+    this.show = false;
+    this.squared = false;
+    this.optionChecked = "on";
+    this.optionUnchecked = "off";
+    this.value = this.checked ? this.optionChecked : this.optionUnchecked;
+    this.formSubmitController = new FormSubmitController(this);
+  }
+  render() {
+    return html`
+      <label part="label">
+        ${this.makeUncheckedOption()}
+        <span part="control">
+          <span part="track"></span>
+          <span part="handle"></span>
+        </span>
+        <input
+          role="switch"
+          type="checkbox"
+          name="${this.name}"
+          aria-label="${this.label}"
+          aria-checked=${this.checked ? "true" : "false"}
+          ?disabled=${this.disabled}
+          ?checked=${this.checked}
+          @change=${this.handleChange}
+        />
+        ${this.makeCheckedOption()}
+        <span part="text">${this.label}</span>
+      </label>
+    `;
+  }
+  handleChange() {
+    this.checked = !this.checked;
+    this.value = this.checked ? this.optionChecked : this.optionUnchecked;
+    emitEvent(this, "kemet-change", this);
+  }
+  makeUncheckedOption() {
+    if (this.show) {
+      return html`<span class="option" part="unchecked">${this.optionUnchecked}</span>`;
+    }
+    return null;
+  }
+  makeCheckedOption() {
+    if (this.show) {
+      return html`<span class="option" part="checked">${this.optionChecked}</span>`;
+    }
+    return null;
+  }
+};
+KemetToggle.styles = [stylesToggle];
+__decorateClass([
+  property({ type: String })
+], KemetToggle.prototype, "name", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetToggle.prototype, "checked", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetToggle.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: String })
+], KemetToggle.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetToggle.prototype, "show", 2);
+__decorateClass([
+  property({ type: Boolean })
+], KemetToggle.prototype, "squared", 2);
+__decorateClass([
+  property({ type: String, attribute: "option-checked" })
+], KemetToggle.prototype, "optionChecked", 2);
+__decorateClass([
+  property({ type: String, attribute: "option-unchecked" })
+], KemetToggle.prototype, "optionUnchecked", 2);
+__decorateClass([
+  state()
+], KemetToggle.prototype, "value", 2);
+KemetToggle = __decorateClass([
+  customElement("kemet-toggle")
+], KemetToggle);
+
+export {
+  KemetToggle
+};
+//# sourceMappingURL=chunk-QCMF4CCI.mjs.map

package/dist/chunk-QCMF4CCI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/toggle.ts","../src/styles/elements/toggle.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { FormSubmitController } from '../utilities/form-controller';\nimport { emitEvent } from '../utilities/events';\nimport { stylesToggle } from '../styles/elements/toggle';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-toggle\n * @summary A toggle switch for forms.\n *\n * @prop {string} name - The name on the input field\n * @prop {boolean} checked - Determines whether the toggle is checked\n * @prop {boolean} disabled - Determines whether the toggle is disabled\n * @prop {string} label - A description of the toggle's purpose\n * @prop {boolean} show - Determines whether to show text options\n * @prop {boolean} squared - Displays the toggle as squared instead of rounded\n * @prop {string} optionChecked - The checked option text\n * @prop {string} optionUnchecked - The unchecked option text\n *\n * @csspart label - The label element.\n * @csspart control - The control element.\n * @csspart text - The label text.\n * @csspart checked - The checked text.\n * @csspart unchecked - The unchecked text.\n *\n * @cssproperty --kemet-toggle-width - The width of the entire toggle.\n * @cssproperty --kemet-toggle-height - The height of the entire toggle.\n * @cssproperty --kemet-toggle-handle-diameter - The diameter of the handle.\n * @cssproperty --kemet-toggle-track-border - The border of the track.\n * @cssproperty --kemet-toggle-track-color - The color of the track.\n * @cssproperty --kemet-toggle-track-shadow - The shadow on the track.\n * @cssproperty --kemet-toggle-handle-border - The border on the handle.\n * @cssproperty --kemet-toggle-handle-color - The color of the handle.\n * @cssproperty --kemet-toggle-handle-shadow - The shadow on the handle.\n *\n * @event kemet-change - Fires when the toggle changes state\n *\n */\n\n@customElement('kemet-toggle')\nexport default class KemetToggle extends LitElement {\n  formSubmitController: FormSubmitController;\n\n  static styles = [stylesToggle];\n\n  @property({ type: String })\n  name: string = 'toggle-switch';\n\n  @property({ type: Boolean, reflect: true })\n  checked: boolean = false;\n\n  @property({ type: Boolean })\n  disabled: boolean = false;\n\n  @property({ type: String })\n  label: string = '';\n\n  @property({ type: Boolean })\n  show: boolean = false;\n\n  @property({ type: Boolean })\n  squared: boolean = false;\n\n  @property({ type: String, attribute: 'option-checked' })\n  optionChecked: string = 'on';\n\n  @property({ type: String, attribute: 'option-unchecked' })\n  optionUnchecked: string = 'off';\n\n  @state()\n  value: string | boolean = this.checked ? this.optionChecked : this.optionUnchecked;\n\n  constructor() {\n    super();\n\n    /** @internal */\n    this.formSubmitController = new FormSubmitController(this);\n  }\n\n  render() {\n    return html`\n      <label part=\"label\">\n        ${this.makeUncheckedOption()}\n        <span part=\"control\">\n          <span part=\"track\"></span>\n          <span part=\"handle\"></span>\n        </span>\n        <input\n          role=\"switch\"\n          type=\"checkbox\"\n          name=\"${this.name}\"\n          aria-label=\"${this.label}\"\n          aria-checked=${this.checked ? 'true' : 'false'}\n          ?disabled=${this.disabled}\n          ?checked=${this.checked}\n          @change=${this.handleChange}\n        />\n        ${this.makeCheckedOption()}\n        <span part=\"text\">${this.label}</span>\n      </label>\n    `;\n  }\n\n  handleChange() {\n    this.checked = !this.checked;\n    this.value = this.checked ? this.optionChecked : this.optionUnchecked;\n    emitEvent(this, 'kemet-change', this);\n  }\n\n  makeUncheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"unchecked\">${this.optionUnchecked}</span>`;\n    }\n\n    return null;\n  }\n\n  makeCheckedOption() {\n    if (this.show) {\n      return html`<span class=\"option\" part=\"checked\">${this.optionChecked}</span>`;\n    }\n\n    return null;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-toggle': KemetToggle\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesToggle = css`\n  :host {\n    --kemet-toggle-width: 3.5rem;\n    --kemet-toggle-height: 2rem;\n    --kemet-toggle-handle-diameter: 1.6rem;\n    --kemet-toggle-handle-margin: calc((var(--kemet-toggle-height) - var(--kemet-toggle-handle-diameter)) / 2);\n    --kemet-toggle-track-border: none;\n    --kemet-toggle-track-color: rgb(var(--kemet-color-white));\n    --kemet-toggle-track-shadow: inset 0 0.4rem 0.7rem 0 rgb(var(--kemet-color-gray-800) / 35%), inset 0 -0.2rem 0.4rem 0 rgb(var(--kemet-color-gray-50));\n    --kemet-toggle-handle-border: none;\n    --kemet-toggle-handle-color: rgb(var(--kemet-color-primary));\n    --kemet-toggle-handle-shadow: 0 0.5rem 0.5rem 0 rgb(var(--kemet-color-black) / 10%), 0 0.5rem 0.5rem 0 rgb(var(--kemet-color-black) / 20%);\n\n    display: flex;\n    align-items: center;\n  }\n\n  :host([disabled]) {\n    opacity: 0.5;\n  }\n\n  label {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 1rem;\n    font-size: inherit;\n    color: inherit;\n  }\n\n  :host([disabled]) label {\n    cursor: not-allowed;\n  }\n\n  input {\n    display: none;\n  }\n\n  [part='control'] {\n    position: relative;\n    display: inline-flex;\n    margin: 0;\n    width: var(--kemet-toggle-width);\n    height: var(--kemet-toggle-height);\n  }\n\n  [part='control'] > span {\n    transition: 300ms ease-in-out;\n  }\n\n  [part='track'] {\n    width: var(--kemet-toggle-width);\n    height: var(--kemet-toggle-height);\n    border: var(--kemet-toggle-track-border);\n    border-radius: var(--kemet-toggle-height);\n    background-color: var(--kemet-toggle-track-color);\n    box-shadow: var(--kemet-toggle-track-shadow);\n  }\n\n  :host([squared]) [part='track'] {\n    border-radius: 0;\n  }\n\n  [part='handle'] {\n    position: absolute;\n    top: var(--kemet-toggle-handle-margin);\n    left: var(--kemet-toggle-handle-margin);\n    width: var(--kemet-toggle-handle-diameter);\n    height: var(--kemet-toggle-handle-diameter);\n    transform: translateX(0);\n    border: var(--kemet-toggle-handle-border);\n    border-radius: var(--kemet-toggle-handle-diameter);\n    background-color: var(--kemet-toggle-handle-color);\n    box-shadow: var(--kemet-toggle-handle-shadow);\n  }\n\n  :host([squared]) [part='handle'] {\n    border-radius: 0;\n  }\n\n  :host([checked]) [part='handle'] {\n    transform: translateX(calc(var(--kemet-toggle-width) - var(--kemet-toggle-handle-diameter) - var(--kemet-toggle-handle-margin) * 2));\n  }\n\n  .option {\n    font-size: 90%;\n  }\n`;\n"],"mappings":"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","names":[]}

package/dist/chunk-QTA3KC7Q.mjs

@@ -0,0 +1,53 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/carousel-last.ts
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var KemetCarouselLast = class extends LitElement {
+  render() {
+    return html`
+      <button @keyup=${(event) => this.handleKeyUp(event)} @click=${() => this.activated()}>
+        <slot></slot>
+      </button>
+    `;
+  }
+  activated() {
+    if (!this.disabled) {
+      emitEvent(this, "kemet-last-activated", this);
+    }
+  }
+  handleKeyUp(event) {
+    if (event.code === "Enter") {
+      this.activated();
+    }
+  }
+};
+KemetCarouselLast.styles = [
+  css`
+      button {
+        cursor: pointer;
+        border: 0;
+        background: transparent;
+      }
+
+      :host([disabled]) button {
+        cursor: not-allowed;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCarouselLast.prototype, "disabled", 2);
+KemetCarouselLast = __decorateClass([
+  customElement("kemet-carousel-last")
+], KemetCarouselLast);
+
+export {
+  KemetCarouselLast
+};
+//# sourceMappingURL=chunk-QTA3KC7Q.mjs.map

package/dist/chunk-QTA3KC7Q.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/carousel-last.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-last\n * @summary A link to the last slide in the carousel.\n *\n * @prop {boolean} disabled - Deactivates the button.\n *\n * @event kemet-last-activated\n *\n */\n\n@customElement('kemet-carousel-last')\nexport default class KemetCarouselLast 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-last-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-last': KemetCarouselLast\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,MAAM,KAAK,kBAAkB;AACtC,SAAS,eAAe,gBAAgB;AAkBxC,IAAqB,oBAArB,cAA+C,WAAW;AAAA,EAkBxD,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,wBAAwB,IAAI;AAAA,IAC9C;AAAA,EACF;AAAA,EAEA,YAAY,OAAO;AACjB,QAAI,MAAM,SAAS,SAAS;AAC1B,WAAK,UAAU;AAAA,IACjB;AAAA,EACF;AACF;AArCqB,kBACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfvB,kBAgBnB;AAhBmB,oBAArB;AAAA,EADC,cAAc,qBAAqB;AAAA,GACf;","names":[]}

package/dist/chunk-RN4YODB5.mjs

@@ -0,0 +1,30 @@
+import {
+  stylesSortableItem
+} from "./chunk-5WUBMMWS.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/sortable-item.ts
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var KemetSortableItem = class extends LitElement {
+  firstUpdated() {
+    this.draggable = true;
+  }
+  render() {
+    return html`<slot></slot>`;
+  }
+};
+KemetSortableItem.styles = [stylesSortableItem];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetSortableItem.prototype, "ghost", 2);
+KemetSortableItem = __decorateClass([
+  customElement("kemet-sortable-item")
+], KemetSortableItem);
+
+export {
+  KemetSortableItem
+};
+//# sourceMappingURL=chunk-RN4YODB5.mjs.map

package/dist/chunk-RN4YODB5.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/sortable-item.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { stylesSortableItem } from '../styles/elements/sortable';\n\n/**\n * @since 1.3.0\n * @status stable\n *\n * @tagname kemet-sortable-item\n * @summary An item in a sortable list.\n *\n * @prop {boolean} ghost - Automatically set to true when an item is dragged to a new spot.\n */\n\n@customElement('kemet-sortable-item')\nexport default class KemetSortableItem extends LitElement {\n  static styles = [stylesSortableItem];\n\n  @property({ type: Boolean, reflect: true })\n  ghost: boolean;\n\n  firstUpdated() {\n    this.draggable = true;\n  }\n\n  render() {\n    return html`<slot></slot>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-sortable-item': KemetSortableItem\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,MAAM,kBAAkB;AACjC,SAAS,eAAe,gBAAgB;AAcxC,IAAqB,oBAArB,cAA+C,WAAW;AAAA,EAMxD,eAAe;AACb,SAAK,YAAY;AAAA,EACnB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,EACT;AACF;AAbqB,kBACZ,SAAS,CAAC,kBAAkB;AAGnC;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAHvB,kBAInB;AAJmB,oBAArB;AAAA,EADC,cAAc,qBAAqB;AAAA,GACf;","names":[]}

package/dist/chunk-SAWN7RJP.mjs

@@ -0,0 +1,15 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+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;
+};
+
+export {
+  __decorateClass
+};
+//# sourceMappingURL=chunk-SAWN7RJP.mjs.map

package/dist/chunk-SAWN7RJP.mjs.map

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

package/dist/chunk-SG6N234R.mjs

@@ -0,0 +1,53 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/carousel-next.ts
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var KemetCarouselNext = class extends LitElement {
+  render() {
+    return html`
+      <button @keyup=${(event) => this.handleKeyUp(event)} @click=${() => this.activated()}>
+        <slot></slot>
+      </button>
+    `;
+  }
+  activated() {
+    if (!this.disabled) {
+      emitEvent(this, "kemet-next-activated", this);
+    }
+  }
+  handleKeyUp(event) {
+    if (event.code === "Enter") {
+      this.activated();
+    }
+  }
+};
+KemetCarouselNext.styles = [
+  css`
+      button {
+        cursor: pointer;
+        border: 0;
+        background: none;
+      }
+
+      :host([disabled]) button {
+        cursor: not-allowed;
+      }
+    `
+];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetCarouselNext.prototype, "disabled", 2);
+KemetCarouselNext = __decorateClass([
+  customElement("kemet-carousel-next")
+], KemetCarouselNext);
+
+export {
+  KemetCarouselNext
+};
+//# sourceMappingURL=chunk-SG6N234R.mjs.map

package/dist/chunk-SG6N234R.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/carousel-next.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-next\n * @summary A link to the next slide in the carousel.\n *\n * @prop {boolean} disabled - Deactivates the button.\n *\n * @event kemet-next-activated\n *\n */\n\n@customElement('kemet-carousel-next')\nexport default class KemetCarouselNext extends LitElement {\n  static styles = [\n    css`\n      button {\n        cursor: pointer;\n        border: 0;\n        background: none;\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-next-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-next': KemetCarouselNext\n  }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,MAAM,KAAK,kBAAkB;AACtC,SAAS,eAAe,gBAAgB;AAkBxC,IAAqB,oBAArB,cAA+C,WAAW;AAAA,EAkBxD,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,wBAAwB,IAAI;AAAA,IAC9C;AAAA,EACF;AAAA,EAEA,YAAY,OAAO;AACjB,QAAI,MAAM,SAAS,SAAS;AAC1B,WAAK,UAAU;AAAA,IACjB;AAAA,EACF;AACF;AArCqB,kBACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAWF;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfvB,kBAgBnB;AAhBmB,oBAArB;AAAA,EADC,cAAc,qBAAqB;AAAA,GACf;","names":[]}