kemet-ui 1.4.0 → 2.0.0

package/dist/src/components/kemet-tracker/kemet-tracker-step.d.ts

@@ -0,0 +1,63 @@
+import { LitElement } from 'lit';
+import { KemetTrackerInterface } from './types';
+/**
+ *
+ * @since 1.2.0
+ * @status stable
+ *
+ * @tagname kemet-tracker-step
+ * @summary A step in the Tracker
+ *
+ * @prop {number} step - The current step number
+ * @prop {boolean} completed - Determines whether or not a step renders as complete
+ * @prop {boolean} current - Determines whether or not a step renders as the current step
+ * @prop {boolean} last - Is automatically added to the last step
+ * @prop {boolean} mobile - Determines if a step should render as mobile
+ * @prop {boolean} hideDotContent - Hides the label inside of a dot
+ * @prop {number} completedSize - The icon size for the completed check mark
+ *
+ * @cssproperty --kemet-tracker-step-dot-font-size - The font size. Default: 90%
+ * @cssproperty --kemet-tracker-step-dot-color - The text color. Default: var(--kemet-color-primary)
+ * @cssproperty --kemet-tracker-step-dot-border - Border around a dot. Default: 1px solid var(--kemet-color-primary)
+ * @cssproperty --kemet-tracker-step-dot-size - Width and height of a dot. Default: 50px
+ * @cssproperty --kemet-tracker-step-dot-size-mobile - Mobile width and height of a dot. Default: 25px
+ * @cssproperty --kemet-tracker-step-dot-gap - Space between a dot and connector line. Default: 4px
+ * @cssproperty --kemet-tracker-step-dot-transition - Transition of a dot. Default: all 300ms ease-in-out
+ * @cssproperty --kemet-tracker-step-dot-fill-color - Fill color of a dot. Default: transparent
+ * @cssproperty --kemet-tracker-step-dot-background-color - Color of the background a dot is on. Default: var(--kemet-color-white)
+ * @cssproperty --kemet-tracker-step-current-color - Current dot text color. Default: var(--kemet-color-white)
+ * @cssproperty --kemet-tracker-step-current-fill-color - Current dot fill color. Default: var(--kemet-color-primary)
+ * @cssproperty --kemet-tracker-step-completed-color - Text color of a completed dot. Default: var(--kemet-color-white)
+ * @cssproperty --kemet-tracker-step-completed-fill-color - Background color of a completed dot. Default: var(--kemet-color-success)
+ * @cssproperty --kemet-tracker-step-completed-line-color - Completed connector line color. Default: var(--kemet-color-primary)
+ * @cssproperty --kemet-tracker-step-completed-line-weight - Completed line weight. Default: 3px
+ * @cssproperty --kemet-tracker-step-standard-line-weight - Standard line weight. Default: 1px
+ *
+ * @csspart dot - The container for the dot.
+ * @csspart line - A connector line from dot to dot.
+ * @csspart completed-line - A completed connector line.
+ *
+ */
+export default class KemetTrackerStep extends LitElement {
+    static styles: import("lit").CSSResult[];
+    step: number;
+    completed: boolean;
+    current: boolean;
+    last: boolean;
+    mobile: boolean;
+    hideDotContent: boolean;
+    completedSize: number;
+    tracker: KemetTrackerInterface;
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    makeLine(): import("lit-html").TemplateResult<1>;
+    makeCompletedLine(): import("lit-html").TemplateResult<1>;
+    makeDotContent(): import("lit-html").TemplateResult<1>;
+    makeSlotContent(): import("lit-html").TemplateResult<1>;
+    handleCompletedLineEnd(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-tracker-step': KemetTrackerStep;
+    }
+}

package/dist/src/components/kemet-tracker/kemet-tracker-step.js

@@ -0,0 +1,127 @@
+import { __decorate } from "tslib";
+import { html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { stylesStep } from './styles';
+/**
+ *
+ * @since 1.2.0
+ * @status stable
+ *
+ * @tagname kemet-tracker-step
+ * @summary A step in the Tracker
+ *
+ * @prop {number} step - The current step number
+ * @prop {boolean} completed - Determines whether or not a step renders as complete
+ * @prop {boolean} current - Determines whether or not a step renders as the current step
+ * @prop {boolean} last - Is automatically added to the last step
+ * @prop {boolean} mobile - Determines if a step should render as mobile
+ * @prop {boolean} hideDotContent - Hides the label inside of a dot
+ * @prop {number} completedSize - The icon size for the completed check mark
+ *
+ * @cssproperty --kemet-tracker-step-dot-font-size - The font size. Default: 90%
+ * @cssproperty --kemet-tracker-step-dot-color - The text color. Default: var(--kemet-color-primary)
+ * @cssproperty --kemet-tracker-step-dot-border - Border around a dot. Default: 1px solid var(--kemet-color-primary)
+ * @cssproperty --kemet-tracker-step-dot-size - Width and height of a dot. Default: 50px
+ * @cssproperty --kemet-tracker-step-dot-size-mobile - Mobile width and height of a dot. Default: 25px
+ * @cssproperty --kemet-tracker-step-dot-gap - Space between a dot and connector line. Default: 4px
+ * @cssproperty --kemet-tracker-step-dot-transition - Transition of a dot. Default: all 300ms ease-in-out
+ * @cssproperty --kemet-tracker-step-dot-fill-color - Fill color of a dot. Default: transparent
+ * @cssproperty --kemet-tracker-step-dot-background-color - Color of the background a dot is on. Default: var(--kemet-color-white)
+ * @cssproperty --kemet-tracker-step-current-color - Current dot text color. Default: var(--kemet-color-white)
+ * @cssproperty --kemet-tracker-step-current-fill-color - Current dot fill color. Default: var(--kemet-color-primary)
+ * @cssproperty --kemet-tracker-step-completed-color - Text color of a completed dot. Default: var(--kemet-color-white)
+ * @cssproperty --kemet-tracker-step-completed-fill-color - Background color of a completed dot. Default: var(--kemet-color-success)
+ * @cssproperty --kemet-tracker-step-completed-line-color - Completed connector line color. Default: var(--kemet-color-primary)
+ * @cssproperty --kemet-tracker-step-completed-line-weight - Completed line weight. Default: 3px
+ * @cssproperty --kemet-tracker-step-standard-line-weight - Standard line weight. Default: 1px
+ *
+ * @csspart dot - The container for the dot.
+ * @csspart line - A connector line from dot to dot.
+ * @csspart completed-line - A completed connector line.
+ *
+ */
+let KemetTrackerStep = class KemetTrackerStep 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() {
+        var _a;
+        if (this.completed && !this.mobile && !this.hideDotContent) {
+            return html `
+        <kemet-icon icon="check2" size=${this.completedSize}></kemet-icon>
+      `;
+        }
+        if (!this.mobile && !this.hideDotContent) {
+            return html `
+        <span>${this.step}/${(_a = this.tracker) === null || _a === void 0 ? void 0 : _a.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];
+__decorate([
+    property({ type: Number })
+], KemetTrackerStep.prototype, "step", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetTrackerStep.prototype, "completed", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetTrackerStep.prototype, "current", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetTrackerStep.prototype, "last", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], KemetTrackerStep.prototype, "mobile", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'hide-dot-content' })
+], KemetTrackerStep.prototype, "hideDotContent", void 0);
+__decorate([
+    property({ type: Number })
+], KemetTrackerStep.prototype, "completedSize", void 0);
+__decorate([
+    state()
+], KemetTrackerStep.prototype, "tracker", void 0);
+KemetTrackerStep = __decorate([
+    customElement('kemet-tracker-step')
+], KemetTrackerStep);
+export default KemetTrackerStep;
+//# sourceMappingURL=kemet-tracker-step.js.map

package/dist/src/components/kemet-tracker/kemet-tracker-step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-tracker-step.js","sourceRoot":"","sources":["../../../../src/components/kemet-tracker/kemet-tracker-step.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesStep } from './styles';\nimport { KemetTrackerInterface } from './types';\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 or not a step renders as complete\n * @prop {boolean} current - Determines whether or not 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. Default: 90%\n * @cssproperty --kemet-tracker-step-dot-color - The text color. Default: var(--kemet-color-primary)\n * @cssproperty --kemet-tracker-step-dot-border - Border around a dot. Default: 1px solid var(--kemet-color-primary)\n * @cssproperty --kemet-tracker-step-dot-size - Width and height of a dot. Default: 50px\n * @cssproperty --kemet-tracker-step-dot-size-mobile - Mobile width and height of a dot. Default: 25px\n * @cssproperty --kemet-tracker-step-dot-gap - Space between a dot and connector line. Default: 4px\n * @cssproperty --kemet-tracker-step-dot-transition - Transition of a dot. Default: all 300ms ease-in-out\n * @cssproperty --kemet-tracker-step-dot-fill-color - Fill color of a dot. Default: transparent\n * @cssproperty --kemet-tracker-step-dot-background-color - Color of the background a dot is on. Default: var(--kemet-color-white)\n * @cssproperty --kemet-tracker-step-current-color - Current dot text color. Default: var(--kemet-color-white)\n * @cssproperty --kemet-tracker-step-current-fill-color - Current dot fill color. Default: var(--kemet-color-primary)\n * @cssproperty --kemet-tracker-step-completed-color - Text color of a completed dot. Default: var(--kemet-color-white)\n * @cssproperty --kemet-tracker-step-completed-fill-color - Background color of a completed dot. Default: var(--kemet-color-success)\n * @cssproperty --kemet-tracker-step-completed-line-color - Completed connector line color. Default: var(--kemet-color-primary)\n * @cssproperty --kemet-tracker-step-completed-line-weight - Completed line weight. Default: 3px\n * @cssproperty --kemet-tracker-step-standard-line-weight - Standard line weight. Default: 1px\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: KemetTrackerInterface;\n\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 icon=\"check2\" size=${this.completedSize}></kemet-icon>\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"]}

package/dist/src/components/kemet-tracker/kemet-tracker.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+/**
+ *
+ * @since 1.2.0
+ * @status stable
+ *
+ * @prop {number} total - The total number of steps
+ * @prop {string} breakpoint - The point at which the tracker goes from mobile to standard
+ *
+ */
+export default class KemetTracker extends LitElement {
+    static styles: import("lit").CSSResult[];
+    total: number;
+    breakpoint: string;
+    steps: any;
+    constructor();
+    firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    handleSlotChange(): void;
+    isMobile(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-tracker': KemetTracker;
+    }
+}

package/dist/src/components/kemet-tracker/kemet-tracker.js

@@ -0,0 +1,70 @@
+import { __decorate } from "tslib";
+import { html, css, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+/**
+ *
+ * @since 1.2.0
+ * @status stable
+ *
+ * @prop {number} total - The total number of steps
+ * @prop {string} breakpoint - The point at which the tracker goes from mobile to standard
+ *
+ */
+let KemetTracker = class KemetTracker extends LitElement {
+    constructor() {
+        super();
+        this.breakpoint = '767px';
+    }
+    firstUpdated() {
+        // elements
+        this.steps = this.querySelectorAll('kemet-tracker-step');
+        // methods exe
+        this.isMobile();
+        // events
+        window.addEventListener('resize', () => {
+            this.isMobile();
+        });
+    }
+    render() {
+        return html `<slot @slotchange=${() => this.handleSlotChange()}></slot>`;
+    }
+    handleSlotChange() {
+        this.total = this.steps.length;
+        this.steps.forEach((step, index) => {
+            step.step = index + 1;
+            if (step.step === this.total) {
+                step.last = true;
+            }
+        });
+    }
+    isMobile() {
+        const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);
+        this.steps.forEach((step) => {
+            step.mobile = mediaQuery.matches;
+        });
+    }
+};
+KemetTracker.styles = [
+    css `
+      :host {
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        width: 100%;
+      }
+    `,
+];
+__decorate([
+    property({ type: Number })
+], KemetTracker.prototype, "total", void 0);
+__decorate([
+    property({ type: String })
+], KemetTracker.prototype, "breakpoint", void 0);
+__decorate([
+    state()
+], KemetTracker.prototype, "steps", void 0);
+KemetTracker = __decorate([
+    customElement('kemet-tracker')
+], KemetTracker);
+export default KemetTracker;
+//# sourceMappingURL=kemet-tracker.js.map

package/dist/src/components/kemet-tracker/kemet-tracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kemet-tracker.js","sourceRoot":"","sources":["../../../../src/components/kemet-tracker/kemet-tracker.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEnE;;;;;;;;GAQG;AAGH,IAAqB,YAAY,GAAjC,MAAqB,YAAa,SAAQ,UAAU;IAqBlD;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC;IAC5B,CAAC;IAED,YAAY;QACV,WAAW;QACX,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC;QAEzD,cAAc;QACd,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhB,SAAS;QACT,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,QAAQ,EAAE,CAAC;QAClB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAA,qBAAqB,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC;IAC1E,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;QAE/B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YACjC,IAAI,CAAC,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;YACtB,IAAI,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,KAAK,EAAE;gBAC5B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;aAClB;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,QAAQ;QACN,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,CAAC,eAAe,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC;QAExE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;YAC1B,IAAI,CAAC,MAAM,GAAG,UAAU,CAAC,OAAO,CAAC;QACnC,CAAC,CAAC,CAAC;IACL,CAAC;CACF,CAAA;AA5DQ,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;KAOF;CACF,CAAC;AAGF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CACb;AAGd;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;gDACR;AAGnB;IADC,KAAK,EAAE;2CACG;AAnBQ,YAAY;IADhC,aAAa,CAAC,eAAe,CAAC;GACV,YAAY,CA6DhC;eA7DoB,YAAY","sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\n\n/**\n *\n * @since 1.2.0\n * @status stable\n *\n * @prop {number} total - The total number of steps\n * @prop {string} breakpoint - The point at which the tracker goes from mobile to standard\n *\n */\n\n@customElement('kemet-tracker')\nexport default class KemetTracker extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        justify-content: center;\n        align-items: flex-start;\n        width: 100%;\n      }\n    `,\n  ];\n\n  @property({ type: Number })\n  total: number;\n\n  @property({ type: String })\n  breakpoint: string;\n\n  @state()\n  steps: any;\n\n  constructor() {\n    super();\n    this.breakpoint = '767px';\n  }\n\n  firstUpdated() {\n    // elements\n    this.steps = this.querySelectorAll('kemet-tracker-step');\n\n    // methods exe\n    this.isMobile();\n\n    // events\n    window.addEventListener('resize', () => {\n      this.isMobile();\n    });\n  }\n\n  render() {\n    return html`<slot @slotchange=${() => this.handleSlotChange()}></slot>`;\n  }\n\n  handleSlotChange() {\n    this.total = this.steps.length;\n\n    this.steps.forEach((step, index) => {\n      step.step = index + 1;\n      if (step.step === this.total) {\n        step.last = true;\n      }\n    });\n  }\n\n  isMobile() {\n    const mediaQuery = window.matchMedia(`(max-width: ${this.breakpoint})`);\n\n    this.steps.forEach((step) => {\n      step.mobile = mediaQuery.matches;\n    });\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tracker': KemetTracker\n  }\n}\n"]}

package/dist/src/components/kemet-tracker/styles.d.ts

@@ -0,0 +1 @@
+export declare const stylesStep: import("lit").CSSResult;

package/dist/src/components/kemet-tracker/styles.js

@@ -0,0 +1,111 @@
+import { css } from 'lit';
+export const 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-standard-line-weight: 1px;
+    --kemet-tracker-step-completed-line-weight: 3px;
+    --kemet-tracker-step-dot-transition: all 300ms ease-in-out;
+
+    position: relative;
+    width: 100%;
+    text-align: center;
+  }
+
+  .dot {
+    font-size: var(--kemet-tracker-step-dot-font-size, 90%);
+    color: var(--kemet-tracker-step-dot-color, var(--kemet-color-primary));
+    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, var(--kemet-color-white));
+  }
+
+  .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, 1px solid var(--kemet-color-primary));
+    background-color: var(--kemet-tracker-step-dot-fill-color, transparent);
+  }
+
+  :host([completed]) .dot {
+    color: var(--kemet-tracker-step-completed-color, var(--kemet-color-white));
+  }
+
+  :host([completed]) .dot::after {
+    border: 0;
+    background-color: var(--kemet-tracker-step-completed-fill-color, var(--kemet-color-success));
+  }
+
+  :host([current]) .dot.animate {
+    color: var(--kemet-tracker-step-current-color, var(--kemet-color-white));
+  }
+
+  :host([current]) .dot.animate::after {
+    border: 0;
+    background-color: var(--kemet-tracker-step-current-fill-color, var(--kemet-color-primary));
+  }
+
+  :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, var(--kemet-color-primary));
+  }
+
+  .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, var(--kemet-color-primary));
+    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); }
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/src/components/kemet-tracker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/components/kemet-tracker/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4G5B,CAAC","sourcesContent":["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-standard-line-weight: 1px;\n    --kemet-tracker-step-completed-line-weight: 3px;\n    --kemet-tracker-step-dot-transition: all 300ms ease-in-out;\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, 90%);\n    color: var(--kemet-tracker-step-dot-color, var(--kemet-color-primary));\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, var(--kemet-color-white));\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, 1px solid var(--kemet-color-primary));\n    background-color: var(--kemet-tracker-step-dot-fill-color, transparent);\n  }\n\n  :host([completed]) .dot {\n    color: var(--kemet-tracker-step-completed-color, var(--kemet-color-white));\n  }\n\n  :host([completed]) .dot::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-completed-fill-color, var(--kemet-color-success));\n  }\n\n  :host([current]) .dot.animate {\n    color: var(--kemet-tracker-step-current-color, var(--kemet-color-white));\n  }\n\n  :host([current]) .dot.animate::after {\n    border: 0;\n    background-color: var(--kemet-tracker-step-current-fill-color, var(--kemet-color-primary));\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, var(--kemet-color-primary));\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, var(--kemet-color-primary));\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"]}

package/dist/src/components/kemet-tracker/types.d.ts

@@ -0,0 +1,13 @@
+export interface KemetTrackerInterface extends HTMLElement {
+    total?: number;
+    breakpoint?: string;
+}
+export interface KemetTrackerStepInterface extends HTMLElement {
+    step?: number;
+    completed?: boolean;
+    current?: boolean;
+    last?: boolean;
+    mobile?: boolean;
+    hideDotContent?: boolean;
+    completedSize?: number;
+}

package/dist/src/components/kemet-tracker/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/src/components/kemet-tracker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/kemet-tracker/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetTrackerInterface extends HTMLElement {\n  total?: number,\n  breakpoint?: string,\n}\n\nexport interface KemetTrackerStepInterface extends HTMLElement {\n  step?: number,\n  completed?: boolean,\n  current?: boolean,\n  last?: boolean,\n  mobile?: boolean,\n  hideDotContent?: boolean,\n  completedSize?: number,\n}\n"]}

package/dist/src/components/kemet-upload/docs/stories.d.ts

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from '@storybook/web-components';
+import '../kemet-upload';
+import '../kemet-upload-file';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+declare const meta: Meta;
+export default meta;
+declare type Story = StoryObj;
+export declare const Standard: Story;

package/dist/src/components/kemet-upload/docs/stories.js

@@ -0,0 +1,57 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '../kemet-upload';
+import '../kemet-upload-file';
+import '../../kemet-tabs/kemet-tabs';
+import '../../kemet-tabs/kemet-tab';
+import '../../kemet-tabs/kemet-tab-panel';
+const meta = {
+    title: 'Components / Upload',
+    component: 'kemet-upload',
+};
+export default meta;
+const Template = ({ files }) => {
+    const uploadFiles = [];
+    files.forEach((file) => {
+        uploadFiles.push(html `
+      <kemet-upload-file name=${file.name} size=${file.size} loaded=${file.loaded} status=${file.status} message=${ifDefined(files.message)}></kemet-upload-file>
+    `);
+    });
+    return html `
+    <kemet-upload>
+      ${uploadFiles}
+    </kemet-upload>
+  `;
+};
+export const Standard = {
+    render: (args) => Template(args),
+    args: {
+        files: [
+            {
+                name: 'image.jpg',
+                size: 2000000,
+                loaded: 2000000,
+                status: 'complete',
+            },
+            {
+                name: 'image.png',
+                size: 200000,
+                loaded: 100000,
+                status: 'uploading',
+            },
+            {
+                name: 'package.zip',
+                size: 8000000,
+                loaded: 2000000,
+                status: 'error',
+                message: 'File size is too big.',
+            },
+        ],
+    },
+    argTypes: {
+        files: {
+            control: { type: 'array' },
+        },
+    }
+};
+//# sourceMappingURL=stories.js.map

package/dist/src/components/kemet-upload/docs/stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../../src/components/kemet-upload/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,sBAAsB,CAAC;AAE9B,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;AAIpB,MAAM,QAAQ,GAAG,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7B,MAAM,WAAW,GAAG,EAAE,CAAC;IAEvB,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,EAAE;QACrB,WAAW,CAAC,IAAI,CAAC,IAAI,CAAA;gCACO,IAAI,CAAC,IAAI,SAAS,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,MAAM,WAAW,IAAI,CAAC,MAAM,YAAY,SAAS,CAAC,KAAK,CAAC,OAAO,CAAC;KACtI,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAA;;QAEL,WAAW;;GAEhB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,CAAC,IAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IACrC,IAAI,EAAE;QACJ,KAAK,EAAE;YACL;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE,OAAO;gBACf,MAAM,EAAE,UAAU;aACnB;YACD;gBACE,IAAI,EAAE,WAAW;gBACjB,IAAI,EAAE,MAAM;gBACZ,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE,WAAW;aACpB;YACD;gBACE,IAAI,EAAE,aAAa;gBACnB,IAAI,EAAE,OAAO;gBACb,MAAM,EAAE,OAAO;gBACf,MAAM,EAAE,OAAO;gBACf,OAAO,EAAE,uBAAuB;aACjC;SACF;KACF;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B;KACF;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-upload';\nimport '../kemet-upload-file';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Upload',\n  component: 'kemet-upload',\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = ({ files }) => {\n  const uploadFiles = [];\n\n  files.forEach((file) => {\n    uploadFiles.push(html`\n      <kemet-upload-file name=${file.name} size=${file.size} loaded=${file.loaded} status=${file.status} message=${ifDefined(files.message)}></kemet-upload-file>\n    `);\n  });\n\n  return html`\n    <kemet-upload>\n      ${uploadFiles}\n    </kemet-upload>\n  `;\n};\n\nexport const Standard: Story = {\n  render: (args: any) => Template(args),\n  args: {\n    files: [\n      {\n        name: 'image.jpg',\n        size: 2000000,\n        loaded: 2000000,\n        status: 'complete',\n      },\n      {\n        name: 'image.png',\n        size: 200000,\n        loaded: 100000,\n        status: 'uploading',\n      },\n      {\n        name: 'package.zip',\n        size: 8000000,\n        loaded: 2000000,\n        status: 'error',\n        message: 'File size is too big.',\n      },\n    ],\n  },\n  argTypes: {\n    files: {\n      control: { type: 'array' },\n    },\n  }\n};\n"]}

package/dist/src/components/kemet-upload/kemet-upload-file.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+/**
+ * @since 1.3.0
+ * @status stable
+ *
+ * @tagname kemet-upload-file
+ * @summary A file in the upload.
+ *
+ * @prop {string} name - The name of the file
+ * @prop {number} loaded - The number of bytes loaded
+ * @prop {number} size - The file size in bytes
+ * @prop {string} type - The file type
+ * @prop {string} status - The status of the file. Values are complete | uploading | error.
+ * @prop {number} percent - Percentage of file completion that's calculated by the loaded property.
+ * @prop {string} message - An error message to give to users
+ *
+ * @cssproperty --kemet-upload-file-color - The default text color. Default: var(--kemet-color-text).
+ * @cssproperty --kemet-upload-file-padding - The padding around the file. Default: 0.5rem 1rem.
+ * @cssproperty --kemet-upload-file-border - The border around the file. Default: 1px solid var(--kemet-color-primary).
+ *
+ * @csspart percentage - Area that displays the percentage.
+ * @csspart filename - Area that displays file name.
+ * @csspart loaded - Area that displays how much has uploaded.
+ * @csspart message - Area for the error message.
+ * @csspart indicator - Area for status icon.
+ *
+ */
+export default class KemetUploadFile extends LitElement {
+    static styles: import("lit").CSSResult[];
+    name: string;
+    loaded: number;
+    size: number;
+    type: string;
+    status: string;
+    percent: number;
+    message: string;
+    updated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    calculatePercent(): number;
+    getStatusIcon(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kemet-upload-file': KemetUploadFile;
+    }
+}