kemet-ui 4.0.0 → 4.0.2

package/dist/chunk-7S4TQDFJ.mjs

@@ -0,0 +1,270 @@
+import {
+  emitEvent
+} from "./chunk-LHEY3UOF.mjs";
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/alert.ts
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+// src/styles/elements/alert.ts
+import { css } from "lit";
+var stylesBase = css`
+  :host {
+    --kemet-alert-padding: 1rem;
+    --kemet-alert-border-thickness: 4px;
+    --kemet-alert-status-color: inherit;
+    --kemet-alert-align-items: center;
+    --kemet-alert-border: 1px solid rgb(var(--kemet-alert-status-color));
+    --kemet-alert-radius: 0;
+    --kemet-alert-color: inherit;
+    --kemet-alert-background-color: transparent;
+
+    color: var(--kemet-alert-color);
+    display: flex;
+    grid-template-columns: auto 1fr auto;
+    gap: var(--kemet-alert-padding);
+    align-items: var(--kemet-alert-align-items);
+    opacity: 0;
+    padding: var(--kemet-alert-padding);
+    border: var(--kemet-alert-border);
+    transition: opacity 300ms ease;
+    border-radius: var(--kemet-alert-radius);
+    background-color: var(--kemet-alert-background-color);
+  }
+
+  :host([opened]) {
+    opacity: 1;
+  }
+
+  :host([filled]) {
+    --kemet-alert-border: 2px solid rgb(var(--kemet-color-white));
+    --kemet-alert-color: rgb(var(--kemet-color-white));
+    --kemet-alert-background-color: rgb(var(--kemet-alert-status-color));
+  }
+
+  :host([filled][status=standard]) {
+    --kemet-alert-color: rgb(var(--kemet-color-background));
+  }
+
+  :host([border-status="top"]) {
+    border-top: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));
+  }
+
+  :host([border-status="right"]) {
+    border-right: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));
+  }
+
+  :host([border-status="bottom"]) {
+    border-bottom: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));
+  }
+
+  :host([border-status="left"]) {
+    border-left: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));
+  }
+
+  :host([status="standard"]) {
+    --kemet-alert-status-color: var(--kemet-color-text);
+  }
+
+  :host([status="primary"]) {
+    --kemet-alert-status-color: var(--kemet-color-primary);
+  }
+
+  :host([status="success"]) {
+    --kemet-alert-status-color: var(--kemet-color-success);
+  }
+
+  :host([status="warning"]) {
+    --kemet-alert-status-color: var(--kemet-color-warning);
+  }
+
+  :host([status="error"]) {
+    --kemet-alert-status-color: var(--kemet-color-error);
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  :host([reveal]) {
+    animation: fadeIn 300ms ease forwards;
+  }
+
+  :host([overlay]) {
+    position: fixed;
+  }
+
+  :host([overlay*="full"]) {
+    width: 100%;
+  }
+
+  :host([overlay*="top"]) {
+    top: 0;
+  }
+
+  :host([overlay*="bottom"]) {
+    bottom: 0;
+  }
+
+  :host([overlay*="left"]) {
+    left: 0;
+  }
+
+  :host([overlay*="right"]) {
+    right: 0;
+  }
+
+  :host([rounded]) {
+    --kemet-alert-radius: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded="sm"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-sm);
+  }
+
+  :host([rounded="md"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-md);
+  }
+
+  :host([rounded="lg"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-lg);
+  }
+
+  :host([rounded="xl"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-xl);
+  }
+
+  :host([rounded="circle"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-circle);
+  }
+
+  :host([rounded="pill"]) {
+    --kemet-alert-radius: var(--kemet-border-radius-pill);
+  }
+
+  [part=message] {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+  }
+
+  .close {
+    cursor: pointer;
+    margin-left: auto;
+  }
+
+  :host(:not([filled])) ::slotted(kemet-icon-bootstrap) {
+    color: rgb(var(--kemet-alert-status-color));
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+`;
+
+// src/elements/alert.ts
+var overlayPositions = ["fixed", "top-full", "bottom-full", "top-right", "top-left", "bottom-right", "bottom-left"];
+var EnumOverlayPositions = /* @__PURE__ */ ((EnumOverlayPositions2) => {
+  EnumOverlayPositions2["FIXED"] = "fixed";
+  EnumOverlayPositions2["TOP_FULL"] = "top-full";
+  EnumOverlayPositions2["BOTTOM_FULL"] = "bottom-full";
+  EnumOverlayPositions2["TOP_RIGHT"] = "top-right";
+  EnumOverlayPositions2["TOP_LEFT"] = "top-left";
+  EnumOverlayPositions2["BOTTOM_RIGHT"] = "bottom-right";
+  EnumOverlayPositions2["BOTTOM_LEFT"] = "bottom-left";
+  return EnumOverlayPositions2;
+})(EnumOverlayPositions || {});
+var KemetAlert = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.status = "standard" /* Standard */;
+  }
+  shouldUpdate(prevProps) {
+    if (prevProps.has("opened") && !prevProps.get("opened")) {
+      this.hidden = false;
+      this.reveal = true;
+    }
+    return true;
+  }
+  firstUpdated() {
+    this.handleMotion();
+  }
+  updated(prevProps) {
+    if (!prevProps.get("opened") && this.opened === true) {
+      emitEvent(this, "kemet-opened", this);
+    } else {
+      emitEvent(this, "kemet-closed", this);
+    }
+  }
+  render() {
+    return html`
+      <slot name="icon"></slot>
+      <div part="message">
+        <slot></slot>
+      </div>
+      <div class="close" part="close">
+        ${this.makeCloseBtn()}
+      </div>
+    `;
+  }
+  makeCloseBtn() {
+    if (this.closable) {
+      return html`<kemet-icon-bootstrap icon="x-lg" @click=${() => {
+        this.opened = false;
+      }}></kemet-icon-bootstrap>`;
+    }
+    return null;
+  }
+  handleMotion() {
+    this.addEventListener("transitionend", () => {
+      if (!this.opened) {
+        this.hidden = true;
+      }
+    });
+    this.addEventListener("animationend", () => {
+      this.reveal = false;
+    });
+  }
+};
+KemetAlert.styles = [stylesBase];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "opened", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "reveal", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "closable", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetAlert.prototype, "status", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "border-status" })
+], KemetAlert.prototype, "borderStatus", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "hidden", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetAlert.prototype, "overlay", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetAlert.prototype, "rounded", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetAlert.prototype, "filled", 2);
+KemetAlert = __decorateClass([
+  customElement("kemet-alert")
+], KemetAlert);
+
+export {
+  overlayPositions,
+  EnumOverlayPositions,
+  KemetAlert
+};
+//# sourceMappingURL=chunk-7S4TQDFJ.mjs.map

package/dist/chunk-7S4TQDFJ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/alert.ts","../src/styles/elements/alert.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { emitEvent } from '../utilities/events';\nimport { stylesBase } from '../styles/elements/alert';\nimport { EnumStatuses, TypeRoundedSizes, TypeStatus } from '../utilities/constants';\n\nexport const overlayPositions = ['fixed', 'top-full', 'bottom-full', 'top-right', 'top-left', 'bottom-right', 'bottom-left'] as const;\nexport enum EnumOverlayPositions {\n  FIXED = 'fixed',\n  TOP_FULL = 'top-full',\n  BOTTOM_FULL = 'bottom-full',\n  TOP_RIGHT = 'top-right',\n  TOP_LEFT = 'top-left',\n  BOTTOM_RIGHT = 'bottom-right',\n  BOTTOM_LEFT = 'bottom-left'\n}\nexport type TypeOverlayPositions = typeof overlayPositions[number];\n\n/**\n * @since 1.4.0\n * @status stable\n *\n * @tagname kemet-alert\n * @summary Calls out important messages and notifications.\n *\n * @prop {boolean} opened - Determines if the alert is opened or not.\n * @prop {boolean} reveal - Fades in the alert when opened.\n * @prop {boolean} closable - Adds a close button to the alert.\n * @prop {TypeDirection} borderStatus - Adds a border that indicates the status.\n * @prop {boolean} hidden - Hides the element from document flow.\n * @prop {TypeOverlayPositions} overlay - Fixes the alert over content in specified position.\n * @prop {TypeVariants} variant - The style of the alert.\n * @prop {TypeRoundedSizes} rounded - The rounded size of the alert.\n * @prop {boolean} filled - Determines if the alert uses the filled style.\n *\n * @slot icon - The icon of the alert.\n * @slot default - The contents of the alert.\n *\n * @event kemet-opened - Fires when alert is opened.\n * @event kemet-closed - Fires when alert is closed.\n *\n * @csspart close - Container for the close button.\n * @csspart message - Container for the alert message.\n *\n * @cssproperty --kemet-alert-padding - The padding on the alert.\n * @cssproperty --kemet-alert-border-thickness - The thickness of the border.\n * @cssproperty --kemet-alert-status-color - The status color. Default: inherit.\n * @cssproperty --kemet-alert-align-items - The alert's alignment.\n * @cssproperty --kemet-alert-border - The border around the alert.\n *\n */\n\n@customElement('kemet-alert')\nexport default class KemetAlert extends LitElement {\n  static styles = [stylesBase];\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  reveal: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  closable: boolean;\n\n  @property({ type: String, reflect: true })\n  status: TypeStatus = EnumStatuses.Standard;\n\n  @property({ type: String, reflect: true, attribute: 'border-status' })\n  borderStatus: string;\n\n  @property({ type: Boolean, reflect: true })\n  hidden: boolean;\n\n  @property({ type: String, reflect: true })\n  overlay: string;\n\n  @property({ type: String, reflect: true })\n  rounded: TypeRoundedSizes;\n\n  @property({ type: Boolean, reflect: true })\n  filled: boolean;\n\n  shouldUpdate(prevProps: Map<string, never>) {\n    if (prevProps.has('opened') && !prevProps.get('opened')) {\n      this.hidden = false;\n      this.reveal = true;\n    }\n\n    return true;\n  }\n\n  firstUpdated() {\n    this.handleMotion();\n  }\n\n  updated(prevProps: Map<string, never>) {\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-opened', this);\n    } else {\n      emitEvent(this, 'kemet-closed', this);\n    }\n  }\n\n  render() {\n    return html`\n      <slot name=\"icon\"></slot>\n      <div part=\"message\">\n        <slot></slot>\n      </div>\n      <div class=\"close\" part=\"close\">\n        ${this.makeCloseBtn()}\n      </div>\n    `;\n  }\n\n  makeCloseBtn() {\n    if (this.closable) {\n      return html`<kemet-icon-bootstrap icon=\"x-lg\" @click=${() => { this.opened = false; }}></kemet-icon-bootstrap>`;\n    }\n\n    return null;\n  }\n\n  handleMotion() {\n    this.addEventListener('transitionend', () => {\n      if (!this.opened) {\n        this.hidden = true;\n      }\n    });\n\n    this.addEventListener('animationend', () => {\n      this.reveal = false;\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-alert': KemetAlert\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesBase = css`\n  :host {\n    --kemet-alert-padding: 1rem;\n    --kemet-alert-border-thickness: 4px;\n    --kemet-alert-status-color: inherit;\n    --kemet-alert-align-items: center;\n    --kemet-alert-border: 1px solid rgb(var(--kemet-alert-status-color));\n    --kemet-alert-radius: 0;\n    --kemet-alert-color: inherit;\n    --kemet-alert-background-color: transparent;\n\n    color: var(--kemet-alert-color);\n    display: flex;\n    grid-template-columns: auto 1fr auto;\n    gap: var(--kemet-alert-padding);\n    align-items: var(--kemet-alert-align-items);\n    opacity: 0;\n    padding: var(--kemet-alert-padding);\n    border: var(--kemet-alert-border);\n    transition: opacity 300ms ease;\n    border-radius: var(--kemet-alert-radius);\n    background-color: var(--kemet-alert-background-color);\n  }\n\n  :host([opened]) {\n    opacity: 1;\n  }\n\n  :host([filled]) {\n    --kemet-alert-border: 2px solid rgb(var(--kemet-color-white));\n    --kemet-alert-color: rgb(var(--kemet-color-white));\n    --kemet-alert-background-color: rgb(var(--kemet-alert-status-color));\n  }\n\n  :host([filled][status=standard]) {\n    --kemet-alert-color: rgb(var(--kemet-color-background));\n  }\n\n  :host([border-status=\"top\"]) {\n    border-top: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));\n  }\n\n  :host([border-status=\"right\"]) {\n    border-right: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));\n  }\n\n  :host([border-status=\"bottom\"]) {\n    border-bottom: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));\n  }\n\n  :host([border-status=\"left\"]) {\n    border-left: var(--kemet-alert-border-thickness) solid rgb(var(--kemet-alert-status-color));\n  }\n\n  :host([status=\"standard\"]) {\n    --kemet-alert-status-color: var(--kemet-color-text);\n  }\n\n  :host([status=\"primary\"]) {\n    --kemet-alert-status-color: var(--kemet-color-primary);\n  }\n\n  :host([status=\"success\"]) {\n    --kemet-alert-status-color: var(--kemet-color-success);\n  }\n\n  :host([status=\"warning\"]) {\n    --kemet-alert-status-color: var(--kemet-color-warning);\n  }\n\n  :host([status=\"error\"]) {\n    --kemet-alert-status-color: var(--kemet-color-error);\n  }\n\n  :host([hidden]) {\n    display: none;\n  }\n\n  :host([reveal]) {\n    animation: fadeIn 300ms ease forwards;\n  }\n\n  :host([overlay]) {\n    position: fixed;\n  }\n\n  :host([overlay*=\"full\"]) {\n    width: 100%;\n  }\n\n  :host([overlay*=\"top\"]) {\n    top: 0;\n  }\n\n  :host([overlay*=\"bottom\"]) {\n    bottom: 0;\n  }\n\n  :host([overlay*=\"left\"]) {\n    left: 0;\n  }\n\n  :host([overlay*=\"right\"]) {\n    right: 0;\n  }\n\n  :host([rounded]) {\n    --kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"sm\"]) {\n    --kemet-alert-radius: var(--kemet-border-radius-sm);\n  }\n\n  :host([rounded=\"md\"]) {\n    --kemet-alert-radius: var(--kemet-border-radius-md);\n  }\n\n  :host([rounded=\"lg\"]) {\n    --kemet-alert-radius: var(--kemet-border-radius-lg);\n  }\n\n  :host([rounded=\"xl\"]) {\n    --kemet-alert-radius: var(--kemet-border-radius-xl);\n  }\n\n  :host([rounded=\"circle\"]) {\n    --kemet-alert-radius: var(--kemet-border-radius-circle);\n  }\n\n  :host([rounded=\"pill\"]) {\n    --kemet-alert-radius: var(--kemet-border-radius-pill);\n  }\n\n  [part=message] {\n    display: flex;\n    gap: 0.75rem;\n    align-items: center;\n  }\n\n  .close {\n    cursor: pointer;\n    margin-left: auto;\n  }\n\n  :host(:not([filled])) ::slotted(kemet-icon-bootstrap) {\n    color: rgb(var(--kemet-alert-status-color));\n  }\n\n  @keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n`;\n"],"mappings":"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","names":["EnumOverlayPositions"]}

package/dist/chunk-7SD6A3KE.mjs

@@ -0,0 +1,45 @@
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/scroll-snap-slide.ts
+import { html, css, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+var KemetScrollSnapSlide = class extends LitElement {
+  updated() {
+    this.addTabIndex();
+  }
+  render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+  addTabIndex() {
+    this.setAttribute("tabindex", "0");
+  }
+};
+KemetScrollSnapSlide.styles = [css`
+    :host {
+      display: block;
+      flex: 0 0 auto;
+      width: var(--kemet-scroll-snap-slide-width, 100%);
+      scroll-snap-align: var(--kemet-scroll-snap-slide-align, center);
+    }
+  `];
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetScrollSnapSlide.prototype, "focused", 2);
+__decorateClass([
+  property({ type: Number, reflect: true })
+], KemetScrollSnapSlide.prototype, "index", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], KemetScrollSnapSlide.prototype, "label", 2);
+KemetScrollSnapSlide = __decorateClass([
+  customElement("kemet-scroll-snap-slide")
+], KemetScrollSnapSlide);
+
+export {
+  KemetScrollSnapSlide
+};
+//# sourceMappingURL=chunk-7SD6A3KE.mjs.map

package/dist/chunk-7SD6A3KE.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/scroll-snap-slide.ts"],"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"],"mappings":";;;;;AAAA,SAAS,MAAM,KAAK,kBAAkB;AACtC,SAAS,eAAe,gBAAgB;AAmBxC,IAAqB,uBAArB,cAAkD,WAAW;AAAA,EAmB3D,UAAU;AACR,SAAK,YAAY;AAAA,EACnB;AAAA,EAEA,SAAS;AACP,WAAO;AAAA;AAAA;AAAA,EAGT;AAAA,EAEA,cAAc;AACZ,SAAK,aAAa,YAAY,GAAG;AAAA,EACnC;AACF;AAhCqB,qBACZ,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOhB;AAGD;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAVvB,qBAWnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAbtB,qBAcnB;AAGA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAhBtB,qBAiBnB;AAjBmB,uBAArB;AAAA,EADC,cAAc,yBAAyB;AAAA,GACnB;","names":[]}

package/dist/chunk-AEMR7XYR.mjs

@@ -0,0 +1,219 @@
+import {
+  __decorateClass
+} from "./chunk-SAWN7RJP.mjs";
+
+// src/elements/tracker-step.ts
+import { html, LitElement } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+// src/styles/elements/tracker.ts
+import { css } from "lit";
+var stylesStep = css`
+  :host {
+    --kemet-tracker-step-dot-size: 50px;
+    --kemet-tracker-step-dot-size-mobile: 25px;
+    --kemet-tracker-step-dot-gap: 4px;
+    --kemet-tracker-step-dot-transition: all 300ms ease-in-out;
+    --kemet-tracker-step-dot-font-size: 90%;
+    --kemet-tracker-step-dot-color: rgb(var(--kemet-color-primary));
+    --kemet-tracker-step-dot-background-color: rgb(var(--kemet-color-white));
+    --kemet-tracker-step-dot-border: 1px solid rgb(var(--kemet-color-primary));
+    --kemet-tracker-step-dot-fill-color: transparent;
+    --kemet-tracker-step-standard-line-weight: 1px;
+    --kemet-tracker-step-completed-line-weight: 3px;
+    --kemet-tracker-step-completed-color: rgb(var(--kemet-color-white));
+    --kemet-tracker-step-completed-fill-color: rgb(var(--kemet-color-success));
+    --kemet-tracker-step-current-color: rgb(var(--kemet-color-white));
+    --kemet-tracker-step-current-fill-color: rgb(var(--kemet-color-primary));
+    --kemet-tracker-step-line-color: rgb(var(--kemet-color-primary));
+    --kemet-tracker-step-completed-line-color: rgb(var(--kemet-color-primary));
+
+    position: relative;
+    width: 100%;
+    text-align: center;
+  }
+
+  .dot {
+    font-size: var(--kemet-tracker-step-dot-font-size);
+    color: var(--kemet-tracker-step-dot-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin: 0 auto;
+    position: relative;
+    z-index: 1;
+    width: var(--kemet-tracker-step-dot-size);
+    height: var(--kemet-tracker-step-dot-size);
+    border-radius: 100%;
+    transition: var(--kemet-tracker-step-dot-transition);
+    background-color: var(--kemet-tracker-step-dot-background-color);
+  }
+
+  .dot::after {
+    content: "";
+    width: unset;
+    height: unset;
+    position: absolute;
+    top: var(--kemet-tracker-step-dot-gap);
+    left: var(--kemet-tracker-step-dot-gap);
+    right: var(--kemet-tracker-step-dot-gap);
+    bottom: var(--kemet-tracker-step-dot-gap);
+    z-index: -1;
+    border-radius: 100%;
+    transition: var(--kemet-tracker-step-dot-transition);
+    border: var(--kemet-tracker-step-dot-border);
+    background-color: var(--kemet-tracker-step-dot-fill-color);
+  }
+
+  :host([completed]) .dot {
+    color: var(--kemet-tracker-step-completed-color);
+  }
+
+  :host([completed]) .dot::after {
+    border: 0;
+    background-color: var(--kemet-tracker-step-completed-fill-color);
+  }
+
+  :host([current]) .dot.animate {
+    color: var(--kemet-tracker-step-current-color);
+  }
+
+  :host([current]) .dot.animate::after {
+    border: 0;
+    background-color: var(--kemet-tracker-step-current-fill-color);
+  }
+
+  :host([mobile]) .dot {
+    width: var(--kemet-tracker-step-dot-size-mobile);
+    height: var(--kemet-tracker-step-dot-size-mobile);
+  }
+
+  .line {
+    display: block;
+    position: absolute;
+    left: 50%;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+
+    /* standard */
+    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-standard-line-weight)) / 2);
+    height: var(--kemet-tracker-step-standard-line-weight);
+    background-color: var(--kemet-tracker-step-line-color);
+  }
+
+  .line.completed {
+    width: 100%;
+    transform: scaleX(0);
+    transform-origin: left center;
+    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-completed-line-weight)) / 2);
+    height: var(--kemet-tracker-step-completed-line-weight);
+    background-color: var(--kemet-tracker-step-completed-line-color);
+    animation-name: grow;
+    animation-delay: 1s;
+    animation-duration: 600ms;
+    animation-fill-mode: forwards;
+  }
+
+  :host([mobile]) .line {
+    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-standard-line-weight)) / 2);
+  }
+
+  :host([mobile]) .line.completed {
+    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-completed-line-weight)) / 2);
+  }
+
+  @keyframes grow {
+    from { transform: scaleX(0); }
+    to { transform: scaleX(1); }
+  }
+`;
+
+// src/elements/tracker-step.ts
+var KemetTrackerStep = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.completedSize = 16;
+  }
+  firstUpdated() {
+    this.tracker = this.closest("kemet-tracker");
+  }
+  render() {
+    return html`
+      ${this.makeLine()}
+      ${this.makeCompletedLine()}
+      <div class="dot" part="dot">${this.makeDotContent()}</div>
+      ${this.makeSlotContent()}
+    `;
+  }
+  makeLine() {
+    if (!this.last) {
+      return html`<div class="line" part="line"></div>`;
+    }
+    return null;
+  }
+  makeCompletedLine() {
+    if (this.completed && !this.last) {
+      return html`<div class="line completed" part="completed-line" @animationend=${() => this.handleCompletedLineEnd()}></div>`;
+    }
+    return null;
+  }
+  makeDotContent() {
+    if (this.completed && !this.mobile && !this.hideDotContent) {
+      return html`
+        <kemet-icon-bootstrap icon="check2" size=${this.completedSize}></kemet-icon-bootstrap>
+      `;
+    }
+    if (!this.mobile && !this.hideDotContent) {
+      return html`
+        <span>${this.step}/${this.tracker?.total}</span>
+      `;
+    }
+    return null;
+  }
+  makeSlotContent() {
+    if (!this.mobile) {
+      return html`<slot></slot>`;
+    }
+    return null;
+  }
+  handleCompletedLineEnd() {
+    const currentDot = this.tracker.querySelector("[current]").shadowRoot.querySelector(".dot");
+    if (currentDot) {
+      currentDot.classList.add("animate");
+    }
+  }
+};
+KemetTrackerStep.styles = [stylesStep];
+__decorateClass([
+  property({ type: Number })
+], KemetTrackerStep.prototype, "step", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetTrackerStep.prototype, "completed", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetTrackerStep.prototype, "current", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetTrackerStep.prototype, "last", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], KemetTrackerStep.prototype, "mobile", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: "hide-dot-content" })
+], KemetTrackerStep.prototype, "hideDotContent", 2);
+__decorateClass([
+  property({ type: Number })
+], KemetTrackerStep.prototype, "completedSize", 2);
+__decorateClass([
+  state()
+], KemetTrackerStep.prototype, "tracker", 2);
+KemetTrackerStep = __decorateClass([
+  customElement("kemet-tracker-step")
+], KemetTrackerStep);
+
+export {
+  KemetTrackerStep
+};
+//# sourceMappingURL=chunk-AEMR7XYR.mjs.map

package/dist/chunk-AEMR7XYR.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/elements/tracker-step.ts","../src/styles/elements/tracker.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesStep } from '../styles/elements/tracker';\nimport './icon-bootstrap';\nimport KemetTracker from './tracker';\n\n/**\n *\n * @since 1.2.0\n * @status stable\n *\n * @tagname kemet-tracker-step\n * @summary A step in the Tracker\n *\n * @prop {number} step - The current step number\n * @prop {boolean} completed - Determines whether a step renders as complete\n * @prop {boolean} current - Determines whether a step renders as the current step\n * @prop {boolean} last - Is automatically added to the last step\n * @prop {boolean} mobile - Determines if a step should render as mobile\n * @prop {boolean} hideDotContent - Hides the label inside of a dot\n * @prop {number} completedSize - The icon size for the completed check mark\n *\n * @cssproperty --kemet-tracker-step-dot-font-size - The font size.\n * @cssproperty --kemet-tracker-step-dot-color - The text color.\n * @cssproperty --kemet-tracker-step-dot-border - Border around a dot.\n * @cssproperty --kemet-tracker-step-dot-size - Width and height of a dot.\n * @cssproperty --kemet-tracker-step-dot-size-mobile - Mobile width and height of a dot.\n * @cssproperty --kemet-tracker-step-dot-gap - Space between a dot and connector line.\n * @cssproperty --kemet-tracker-step-dot-transition - Transition of a dot.\n * @cssproperty --kemet-tracker-step-dot-fill-color - Fill color of a dot.\n * @cssproperty --kemet-tracker-step-dot-background-color - Color of the background a dot is on.\n * @cssproperty --kemet-tracker-step-current-color - Current dot text color.\n * @cssproperty --kemet-tracker-step-current-fill-color - Current dot fill color.\n * @cssproperty --kemet-tracker-step-completed-color - Text color of a completed dot.\n * @cssproperty --kemet-tracker-step-completed-fill-color - Background color of a completed dot.\n * @cssproperty --kemet-tracker-step-completed-line-color - Completed connector line color.\n * @cssproperty --kemet-tracker-step-completed-line-weight - Completed line weight.\n * @cssproperty --kemet-tracker-step-standard-line-weight - Standard line weight.\n *\n * @csspart dot - The container for the dot.\n * @csspart line - A connector line from dot to dot.\n * @csspart completed-line - A completed connector line.\n *\n */\n\n@customElement('kemet-tracker-step')\nexport default class KemetTrackerStep extends LitElement {\n  static styles = [stylesStep];\n\n  @property({ type: Number })\n  step: number;\n\n  @property({ type: Boolean, reflect: true })\n  completed: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  current: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  last: boolean;\n\n  @property({ type: Boolean, reflect: true })\n  mobile: boolean;\n\n  @property({ type: Boolean, reflect: true, attribute: 'hide-dot-content' })\n  hideDotContent: boolean;\n\n  @property({ type: Number })\n  completedSize: number = 16;\n\n  @state()\n  tracker: KemetTracker;\n\n  firstUpdated() {\n    this.tracker = this.closest('kemet-tracker');\n  }\n\n  render() {\n    return html`\n      ${this.makeLine()}\n      ${this.makeCompletedLine()}\n      <div class=\"dot\" part=\"dot\">${this.makeDotContent()}</div>\n      ${this.makeSlotContent()}\n    `;\n  }\n\n  makeLine() {\n    if (!this.last) {\n      return html`<div class=\"line\" part=\"line\"></div>`;\n    }\n\n    return null;\n  }\n\n  makeCompletedLine() {\n    if (this.completed && !this.last) {\n      return html`<div class=\"line completed\" part=\"completed-line\" @animationend=${() => this.handleCompletedLineEnd()}></div>`;\n    }\n\n    return null;\n  }\n\n  makeDotContent() {\n    if (this.completed && !this.mobile && !this.hideDotContent) {\n      return html`\n        <kemet-icon-bootstrap icon=\"check2\" size=${this.completedSize}></kemet-icon-bootstrap>\n      `;\n    }\n\n    if (!this.mobile && !this.hideDotContent) {\n      return html`\n        <span>${this.step}/${this.tracker?.total}</span>\n      `;\n    }\n\n    return null;\n  }\n\n  makeSlotContent() {\n    if (!this.mobile) {\n      return html`<slot></slot>`;\n    }\n\n    return null;\n  }\n\n  handleCompletedLineEnd() {\n    const currentDot = this.tracker.querySelector('[current]').shadowRoot.querySelector('.dot');\n\n    if (currentDot) {\n      currentDot.classList.add('animate');\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tracker-step': KemetTrackerStep\n  }\n}\n","import { css } from 'lit';\n\nexport const stylesStep = css`\n  :host {\n    --kemet-tracker-step-dot-size: 50px;\n    --kemet-tracker-step-dot-size-mobile: 25px;\n    --kemet-tracker-step-dot-gap: 4px;\n    --kemet-tracker-step-dot-transition: all 300ms ease-in-out;\n    --kemet-tracker-step-dot-font-size: 90%;\n    --kemet-tracker-step-dot-color: rgb(var(--kemet-color-primary));\n    --kemet-tracker-step-dot-background-color: rgb(var(--kemet-color-white));\n    --kemet-tracker-step-dot-border: 1px solid rgb(var(--kemet-color-primary));\n    --kemet-tracker-step-dot-fill-color: transparent;\n    --kemet-tracker-step-standard-line-weight: 1px;\n    --kemet-tracker-step-completed-line-weight: 3px;\n    --kemet-tracker-step-completed-color: rgb(var(--kemet-color-white));\n    --kemet-tracker-step-completed-fill-color: rgb(var(--kemet-color-success));\n    --kemet-tracker-step-current-color: rgb(var(--kemet-color-white));\n    --kemet-tracker-step-current-fill-color: rgb(var(--kemet-color-primary));\n    --kemet-tracker-step-line-color: rgb(var(--kemet-color-primary));\n    --kemet-tracker-step-completed-line-color: rgb(var(--kemet-color-primary));\n\n    position: relative;\n    width: 100%;\n    text-align: center;\n  }\n\n  .dot {\n    font-size: var(--kemet-tracker-step-dot-font-size);\n    color: var(--kemet-tracker-step-dot-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto;\n    position: relative;\n    z-index: 1;\n    width: var(--kemet-tracker-step-dot-size);\n    height: var(--kemet-tracker-step-dot-size);\n    border-radius: 100%;\n    transition: var(--kemet-tracker-step-dot-transition);\n    background-color: var(--kemet-tracker-step-dot-background-color);\n  }\n\n  .dot::after {\n    content: \"\";\n    width: unset;\n    height: unset;\n    position: absolute;\n    top: var(--kemet-tracker-step-dot-gap);\n    left: var(--kemet-tracker-step-dot-gap);\n    right: var(--kemet-tracker-step-dot-gap);\n    bottom: var(--kemet-tracker-step-dot-gap);\n    z-index: -1;\n    border-radius: 100%;\n    transition: var(--kemet-tracker-step-dot-transition);\n    border: var(--kemet-tracker-step-dot-border);\n    background-color: var(--kemet-tracker-step-dot-fill-color);\n  }\n\n  :host([completed]) .dot {\n    color: var(--kemet-tracker-step-completed-color);\n  }\n\n  :host([completed]) .dot::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-completed-fill-color);\n  }\n\n  :host([current]) .dot.animate {\n    color: var(--kemet-tracker-step-current-color);\n  }\n\n  :host([current]) .dot.animate::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-current-fill-color);\n  }\n\n  :host([mobile]) .dot {\n    width: var(--kemet-tracker-step-dot-size-mobile);\n    height: var(--kemet-tracker-step-dot-size-mobile);\n  }\n\n  .line {\n    display: block;\n    position: absolute;\n    left: 50%;\n    right: 0;\n    bottom: 0;\n    width: 100%;\n\n    /* standard */\n    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-standard-line-weight)) / 2);\n    height: var(--kemet-tracker-step-standard-line-weight);\n    background-color: var(--kemet-tracker-step-line-color);\n  }\n\n  .line.completed {\n    width: 100%;\n    transform: scaleX(0);\n    transform-origin: left center;\n    top: calc((var(--kemet-tracker-step-dot-size) - var(--kemet-tracker-step-completed-line-weight)) / 2);\n    height: var(--kemet-tracker-step-completed-line-weight);\n    background-color: var(--kemet-tracker-step-completed-line-color);\n    animation-name: grow;\n    animation-delay: 1s;\n    animation-duration: 600ms;\n    animation-fill-mode: forwards;\n  }\n\n  :host([mobile]) .line {\n    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-standard-line-weight)) / 2);\n  }\n\n  :host([mobile]) .line.completed {\n    top: calc((var(--kemet-tracker-step-dot-size-mobile) - var(--kemet-tracker-step-completed-line-weight)) / 2);\n  }\n\n  @keyframes grow {\n    from { transform: scaleX(0); }\n    to { transform: scaleX(1); }\n  }\n`;\n"],"mappings":"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","names":[]}