kemet-ui 3.1.0 → 4.0.0

package/dist/components/kemet-toggle/spec.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"spec.js","sourceRoot":"","sources":["../../../src/components/kemet-toggle/spec.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,KAAK,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAErE,OAAO,gBAAgB,CAAC;AAExB,MAAM,SAAS,GAAG;IAChB,OAAO,EAAE,IAAI,CAAA,6CAA6C;IAC1D,OAAO,EAAE,IAAI,CAAA,qDAAqD;IAClE,WAAW,EAAE,IAAI,CAAA,6FAA6F;CAC/G,CAAC;AAEF,QAAQ,CAAC,QAAQ,EAAE,GAAG,EAAE;IACtB,EAAE,CAAC,uCAAuC,EAAE,KAAK,IAAI,EAAE;QACrD,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAEtD,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,MAAM,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC7B,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAClC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6DAA6D,EAAE,KAAK,IAAI,EAAE;QAC3E,MAAM,CAAC,SAAS,CAAC,OAAO,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAEtD,MAAM,OAAO,CAAC,KAAK,IAAI,EAAE;YACvB,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACvD,MAAM,SAAS,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAC7B,MAAM,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACnC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACxB,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,2BAA2B,EAAE,KAAK,IAAI,EAAE;QACzC,MAAM,CAAC,SAAS,CAAC,WAAW,EAAE,QAAQ,CAAC,IAAI,CAAC,CAAC;QAC7C,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;QAE3D,MAAM,OAAO,CAAC,GAAG,EAAE;YACjB,MAAM,KAAK,GAAG,WAAW,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YAC5D,MAAM,WAAW,GAAG,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;YAC5C,MAAM,aAAa,GAAG,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;YAC7C,MAAM,CAAC,WAAW,CAAC,CAAC,UAAU,EAAE,CAAC;YACjC,MAAM,CAAC,aAAa,CAAC,CAAC,UAAU,EAAE,CAAC;QACrC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { html, render } from 'lit';\nimport { expect } from '@wdio/globals';\nimport { userEvent } from '@testing-library/user-event';\nimport { fireEvent, getByText, waitFor } from '@testing-library/dom';\n\nimport './kemet-toggle';\n\nconst templates = {\n  default: html`<kemet-toggle label=\"Label\"></kemet-toggle>`,\n  checked: html`<kemet-toggle checked label=\"Label\"></kemet-toggle>`,\n  showOptions: html`<kemet-toggle label=\"Label\" show option-unchecked=\"No\" option-checked=\"Yes\"></kemet-toggle>`,\n};\n\ndescribe('Toggle', () => {\n  it('should toggle the switch when clicked', async () => {\n    render(templates.default, document.body);\n    const toggle = document.querySelector('kemet-toggle');\n\n    await waitFor(async () => {\n      const label = toggle.shadowRoot.querySelector('label');\n      const input = toggle.shadowRoot.querySelector('input');\n      await userEvent.click(label);\n      expect(toggle.checked).toBe(true);\n      fireEvent.blur(input);\n    });\n  });\n\n  it('should toggle the switch when clicked and initially checked', async () => {\n    render(templates.checked, document.body);\n    const toggle = document.querySelector('kemet-toggle');\n\n    await waitFor(async () => {\n      const label = toggle.shadowRoot.querySelector('label');\n      const input = toggle.shadowRoot.querySelector('input');\n      await userEvent.click(label);\n      expect(toggle.checked).toBe(false);\n      fireEvent.blur(input);\n    });\n  });\n\n  it('should show option labels', async () => {\n    render(templates.showOptions, document.body);\n    const kemetToggle = document.querySelector('kemet-toggle');\n\n    await waitFor(() => {\n      const label = kemetToggle.shadowRoot.querySelector('label');\n      const checkedText = getByText(label, 'Yes');\n      const uncheckedText = getByText(label, 'No');\n      expect(checkedText).toBeTruthy();\n      expect(uncheckedText).toBeTruthy();\n    });\n  });\n});\n"]}

package/dist/components/kemet-toggle/styles.d.ts

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

package/dist/components/kemet-toggle/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-toggle/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuF9B,CAAC","sourcesContent":["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"]}

package/dist/components/kemet-toggle/types.d.ts

@@ -1,10 +0,0 @@
-export interface KemetToggleInterface extends HTMLElement {
-    name?: string;
-    checked?: boolean;
-    disabled?: boolean;
-    label?: string;
-    show?: boolean;
-    squared?: boolean;
-    optionChecked?: string;
-    optionUnchecked?: string;
-}

package/dist/components/kemet-toggle/types.js

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

package/dist/components/kemet-toggle/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-toggle/types.ts"],"names":[],"mappings":"","sourcesContent":["export interface KemetToggleInterface extends HTMLElement {\n  name?: string,\n  checked?: boolean,\n  disabled?: boolean,\n  label?: string,\n  show?: boolean,\n  squared?: boolean,\n  optionChecked?: string,\n  optionUnchecked?: string,\n}\n"]}

package/dist/components/kemet-tooltip/docs/stories.d.ts

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
-import '../kemet-tooltip';
-import '../../kemet-button/kemet-button';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-declare const meta: Meta;
-export default meta;
-type Story = StoryObj;
-export declare const Standard: Story;
-export declare const Right: Story;
-export declare const Bottom: Story;
-export declare const Left: Story;
-export declare const OnClick: Story;

package/dist/components/kemet-tooltip/docs/stories.js

@@ -1,97 +0,0 @@
-import { html } from 'lit';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import '../kemet-tooltip';
-import '../../kemet-button/kemet-button';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-const meta = {
-    title: 'Components / Tooltip',
-    component: 'kemet-tooltip',
-    args: {
-        triggerText: 'Trigger',
-        contentText: 'This is some content. <strong>HTML</strong> is supported.',
-        canvasPosition: 'middle',
-        distance: 24,
-    },
-    argTypes: {
-        canvasPosition: {
-            control: { type: 'select' },
-            options: ['middle', 'top-right', 'bottom-right', 'bottom-left', 'top-left'],
-        },
-        placement: {
-            control: { type: 'select' },
-            options: ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'],
-        },
-        effect: {
-            control: { type: 'select' },
-            options: ['none', 'fade', 'scale', 'slide', 'fall', 'flip-horizontal', 'flip-vertical', 'sign', 'super-scaled'],
-        },
-        fireOn: {
-            control: { type: 'radio' },
-            options: ['hover', 'click'],
-        },
-        strategy: {
-            control: { type: 'radio' },
-            options: ['fixed', 'absolute'],
-        },
-    }
-};
-export default meta;
-const Template = (args) => {
-    const tooltip = document.querySelector('kemet-tooltip');
-    if (tooltip)
-        tooltip.refresh();
-    return html `
-    <div class="storybook__canvas--${args.canvasPosition}">
-      <kemet-tooltip ?opened=${args.opened} placement=${ifDefined(args.placement)} effect=${ifDefined(args.effect)} fire-on=${ifDefined(args.fireOn)} strategy=${ifDefined(args.strategy)} skidding=${ifDefined(args.skidding)} distance=${ifDefined(args.distance)}>
-        <kemet-button type="text" slot="trigger">${args.triggerText}</kemet-button>
-        <div slot="content">${unsafeHTML(args.contentText)}</div>
-      </kemet-tooltip>
-    </div>
-  `;
-};
-// export const Standard: Story = {
-//   render: args => Template(args),
-//   args: {
-//     triggerText: 'Trigger',
-//     contentText: 'This is some content. <strong>HTML</strong> is supported.',
-//     canvasPosition: 'middle',
-//     placement: 'top',
-//     opened: false,
-//     effect: 'fade',
-//     fireOn: 'hover',
-//     strategy: 'fixed',
-//     skidding: 0,
-//     distance: 0,
-//   },
-// };
-export const Standard = {
-    render: args => Template(args),
-};
-export const Right = {
-    render: args => Template(args),
-    args: {
-        placement: 'right'
-    }
-};
-export const Bottom = {
-    render: args => Template(args),
-    args: {
-        placement: 'bottom'
-    }
-};
-export const Left = {
-    render: args => Template(args),
-    args: {
-        placement: 'left'
-    }
-};
-export const OnClick = {
-    render: args => Template(args),
-    args: {
-        fireOn: 'click'
-    }
-};
-//# sourceMappingURL=stories.js.map

package/dist/components/kemet-tooltip/docs/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-tooltip/docs/stories.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { unsafeHTML } from 'lit/directives/unsafe-html.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport type { Meta, StoryObj } from '@storybook/web-components';\n\nimport '../kemet-tooltip';\n\nimport '../../kemet-button/kemet-button';\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Tooltip',\n  component: 'kemet-tooltip',\n  args: {\n    triggerText: 'Trigger',\n    contentText: 'This is some content. <strong>HTML</strong> is supported.',\n    canvasPosition: 'middle',\n    distance: 24,\n  },\n  argTypes: {\n    canvasPosition: {\n      control: { type: 'select' },\n      options: ['middle', 'top-right', 'bottom-right', 'bottom-left', 'top-left'],\n    },\n    placement: {\n      control: { type: 'select' },\n      options: ['auto', 'auto-start', 'auto-end', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'],\n    },\n    effect: {\n      control: { type: 'select' },\n      options: ['none', 'fade', 'scale', 'slide', 'fall', 'flip-horizontal', 'flip-vertical', 'sign', 'super-scaled'],\n    },\n    fireOn: {\n      control: { type: 'radio' },\n      options: ['hover', 'click'],\n    },\n    strategy: {\n      control: { type: 'radio' },\n      options: ['fixed', 'absolute'],\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const tooltip = document.querySelector('kemet-tooltip');\n  if (tooltip) tooltip.refresh();\n\n  return html`\n    <div class=\"storybook__canvas--${args.canvasPosition}\">\n      <kemet-tooltip ?opened=${args.opened} placement=${ifDefined(args.placement)} effect=${ifDefined(args.effect)} fire-on=${ifDefined(args.fireOn)} strategy=${ifDefined(args.strategy)} skidding=${ifDefined(args.skidding)} distance=${ifDefined(args.distance)}>\n        <kemet-button type=\"text\" slot=\"trigger\">${args.triggerText}</kemet-button>\n        <div slot=\"content\">${unsafeHTML(args.contentText)}</div>\n      </kemet-tooltip>\n    </div>\n  `;\n};\n\n\n// export const Standard: Story = {\n//   render: args => Template(args),\n//   args: {\n//     triggerText: 'Trigger',\n//     contentText: 'This is some content. <strong>HTML</strong> is supported.',\n//     canvasPosition: 'middle',\n//     placement: 'top',\n//     opened: false,\n//     effect: 'fade',\n//     fireOn: 'hover',\n//     strategy: 'fixed',\n//     skidding: 0,\n//     distance: 0,\n//   },\n// };\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const Right: Story = {\n  render: args => Template(args),\n  args: {\n    placement: 'right'\n  }\n};\n\nexport const Bottom: Story = {\n  render: args => Template(args),\n  args: {\n    placement: 'bottom'\n  }\n};\n\nexport const Left: Story = {\n  render: args => Template(args),\n  args: {\n    placement: 'left'\n  }\n};\n\nexport const OnClick: Story = {\n  render: args => Template(args),\n  args: {\n    fireOn: 'click'\n  }\n};\n"]}

package/dist/components/kemet-tooltip/kemet-tooltip.d.ts

@@ -1,33 +0,0 @@
-import KemetPopper from '../kemet-popper/kemet-popper';
-/**
- * @since 2.0.0
- * @status stable
- *
- * @tagname kemet-tooltip
- * @summary A tooltip is a Popper component that displays a dynamic arrow pointing to the trigger.
- *
- * @slot trigger - Controls opening and closing the tooltip.
- * @slot content - The contents of the tooltip.
- *
- * @csspart trigger - Contains the trigger for the tooltip.
- * @csspart content - Contains the content for the tooltip.
- *
- * @cssproperty --kemet-tooltip-content-height - The height of the content.
- * @cssproperty --kemet-tooltip-size - The width and height of arrow's container
- * @cssproperty --kemet-tooltip-border-size - The border size of the arrow
- * @cssproperty --kemet-tooltip-rounded-tip - How much rounding the tip of the arrow should be. Zero is pointy
- * @cssproperty --kemet-tooltip-background-color - The background color of the arrow
- * @cssproperty --kemet-tooltip-border-color - The border color of the arrow
- * @cssproperty --kemet-tooltip-placement-offset - The offset of the arrow from the trigger
- *
- */
-export default class KemetTooltip extends KemetPopper {
-    static styles: import("lit").CSSResult[];
-    render(): import("lit-html").TemplateResult<1>;
-    measureContent(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-tooltip': KemetTooltip;
-    }
-}

package/dist/components/kemet-tooltip/kemet-tooltip.js

@@ -1,69 +0,0 @@
-import { __decorate } from "tslib";
-import { html } from 'lit';
-import { customElement } from 'lit/decorators.js';
-import { stylesTooltip } from './styles';
-import { stylesPopper } from '../kemet-popper/styles';
-import { stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled, } from '../kemet-popper/styles.effects';
-import KemetPopper from '../kemet-popper/kemet-popper';
-/**
- * @since 2.0.0
- * @status stable
- *
- * @tagname kemet-tooltip
- * @summary A tooltip is a Popper component that displays a dynamic arrow pointing to the trigger.
- *
- * @slot trigger - Controls opening and closing the tooltip.
- * @slot content - The contents of the tooltip.
- *
- * @csspart trigger - Contains the trigger for the tooltip.
- * @csspart content - Contains the content for the tooltip.
- *
- * @cssproperty --kemet-tooltip-content-height - The height of the content.
- * @cssproperty --kemet-tooltip-size - The width and height of arrow's container
- * @cssproperty --kemet-tooltip-border-size - The border size of the arrow
- * @cssproperty --kemet-tooltip-rounded-tip - How much rounding the tip of the arrow should be. Zero is pointy
- * @cssproperty --kemet-tooltip-background-color - The background color of the arrow
- * @cssproperty --kemet-tooltip-border-color - The border color of the arrow
- * @cssproperty --kemet-tooltip-placement-offset - The offset of the arrow from the trigger
- *
- */
-let KemetTooltip = class KemetTooltip extends KemetPopper {
-    render() {
-        // eslint-disable-next-line lit-a11y/mouse-events-have-key-events
-        return html `
-      <div
-        id="trigger"
-        part="trigger"
-        tabIndex="0"
-        @click=${this.fireOn === 'click' ? (event) => this.toggle(event) : null}
-        @keyup=${this.fireOn === 'click' ? (event) => this.handleKeyUp(event) : null}
-        @mouseover=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}
-        @focus=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}
-        @mouseout=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}
-        @blur=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}
-      >
-        <slot name="trigger"></slot>
-      </div>
-      <div
-        id="content"
-        @mouseover=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}
-        @mouseout=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}
-      >
-        <slot name="content" @slotchange=${() => { this.makePopper(); this.measureContent(); }}></slot>
-        <div id="arrow-container" part="arrow-container" data-popper-arrow>
-          <div id="arrow" part="arrow"></div>
-        </div>
-      </div>
-    `;
-    }
-    measureContent() {
-        const height = this.contentElement.offsetHeight;
-        this.contentElement.style.setProperty('--kemet-tooltip-content-height', `${height}px`);
-    }
-};
-KemetTooltip.styles = [stylesTooltip, stylesPopper, stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled];
-KemetTooltip = __decorate([
-    customElement('kemet-tooltip')
-], KemetTooltip);
-export default KemetTooltip;
-//# sourceMappingURL=kemet-tooltip.js.map

package/dist/components/kemet-tooltip/kemet-tooltip.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"kemet-tooltip.js","sourceRoot":"","sources":["../../../src/components/kemet-tooltip/kemet-tooltip.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EACL,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,gBAAgB,EAChB,0BAA0B,EAC1B,wBAAwB,EACxB,gBAAgB,EAChB,uBAAuB,GACxB,MAAM,gCAAgC,CAAC;AACxC,OAAO,WAAW,MAAM,8BAA8B,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAGY,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAGnD,MAAM;QACJ,iEAAiE;QACjE,OAAO,IAAI,CAAA;;;;;iBAKE,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,KAAiB,EAAE,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;iBAC1E,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,KAAoB,EAAE,EAAE,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI;qBAC9E,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI;iBAClE,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI;oBAC3D,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI;gBACnE,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI;;;;;;qBAM1D,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI;oBAC/D,IAAI,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI;;2CAExC,GAAG,EAAE,GAAG,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,CAAC;;;;;KAKzF,CAAC;IACJ,CAAC;IAED,cAAc;QACZ,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,YAAY,CAAC;QAChD,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,WAAW,CAAC,gCAAgC,EAAE,GAAG,MAAM,IAAI,CAAC,CAAC;IACzF,CAAC;;AAlCM,mBAAM,GAAG,CAAC,aAAa,EAAE,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,0BAA0B,EAAE,wBAAwB,EAAE,gBAAgB,EAAE,uBAAuB,CAAC,AAA3M,CAA4M;AADtM,YAAY;IADhC,aAAa,CAAC,eAAe,CAAC;GACV,YAAY,CAoChC;eApCoB,YAAY","sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { stylesTooltip } from './styles';\nimport { stylesPopper } from '../kemet-popper/styles';\nimport {\n  stylesPopperFade,\n  stylesPopperScale,\n  stylesPopperSlide,\n  stylesPopperFall,\n  stylesPopperFlipHorizontal,\n  stylesPopperFlipVertical,\n  stylesPopperSign,\n  stylesPopperSuperScaled,\n} from '../kemet-popper/styles.effects';\nimport KemetPopper from '../kemet-popper/kemet-popper';\n\n/**\n * @since 2.0.0\n * @status stable\n *\n * @tagname kemet-tooltip\n * @summary A tooltip is a Popper component that displays a dynamic arrow pointing to the trigger.\n *\n * @slot trigger - Controls opening and closing the tooltip.\n * @slot content - The contents of the tooltip.\n *\n * @csspart trigger - Contains the trigger for the tooltip.\n * @csspart content - Contains the content for the tooltip.\n *\n * @cssproperty --kemet-tooltip-content-height - The height of the content.\n * @cssproperty --kemet-tooltip-size - The width and height of arrow's container\n * @cssproperty --kemet-tooltip-border-size - The border size of the arrow\n * @cssproperty --kemet-tooltip-rounded-tip - How much rounding the tip of the arrow should be. Zero is pointy\n * @cssproperty --kemet-tooltip-background-color - The background color of the arrow\n * @cssproperty --kemet-tooltip-border-color - The border color of the arrow\n * @cssproperty --kemet-tooltip-placement-offset - The offset of the arrow from the trigger\n *\n */\n\n@customElement('kemet-tooltip')\nexport default class KemetTooltip extends KemetPopper {\n  static styles = [stylesTooltip, stylesPopper, stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled];\n\n  render() {\n    // eslint-disable-next-line lit-a11y/mouse-events-have-key-events\n    return html`\n      <div\n        id=\"trigger\"\n        part=\"trigger\"\n        tabIndex=\"0\"\n        @click=${this.fireOn === 'click' ? (event: MouseEvent) => this.toggle(event) : null}\n        @keyup=${this.fireOn === 'click' ? (event: KeyboardEvent) => this.handleKeyUp(event) : null}\n        @mouseover=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}\n        @focus=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}\n        @mouseout=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}\n        @blur=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}\n      >\n        <slot name=\"trigger\"></slot>\n      </div>\n      <div\n        id=\"content\"\n        @mouseover=${this.fireOn !== 'click' ? () => { this.opened = true; } : null}\n        @mouseout=${this.fireOn !== 'click' ? () => { this.opened = false; } : null}\n      >\n        <slot name=\"content\" @slotchange=${() => { this.makePopper(); this.measureContent(); }}></slot>\n        <div id=\"arrow-container\" part=\"arrow-container\" data-popper-arrow>\n          <div id=\"arrow\" part=\"arrow\"></div>\n        </div>\n      </div>\n    `;\n  }\n\n  measureContent() {\n    const height = this.contentElement.offsetHeight;\n    this.contentElement.style.setProperty('--kemet-tooltip-content-height', `${height}px`);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-tooltip': KemetTooltip\n  }\n}\n"]}

package/dist/components/kemet-tooltip/styles.d.ts

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

package/dist/components/kemet-tooltip/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/kemet-tooltip/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0D/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const stylesTooltip = css`\n  :host {\n    --kemet-tooltip-deg: -45deg;\n    --kemet-tooltip-size: 22px;\n    --kemet-tooltip-border-size: 1px;\n    --kemet-tooltip-rounded-tip: 4px;\n    --kemet-tooltip-background-color: rgb(var(--kemet-color-background));\n    --kemet-tooltip-border-color: rgb(var(--kemet-color-foreground));\n    --kemet-tooltip-placement-offset: calc(calc(var(--kemet-tooltip-size) / 2) * -1);\n  }\n\n  #arrow {\n    content: '';\n    width: var(--kemet-tooltip-size);\n    height: var(--kemet-tooltip-size);\n    position: relative;\n    display: inline-block;\n    background: linear-gradient(\n        var(--kemet-tooltip-deg),\n        transparent calc(var(--kemet-tooltip-size) / 1.5),\n        var(--kemet-tooltip-background-color) 0\n      )\n      no-repeat;\n    background-repeat: no-repeat;\n    transform-origin: center center;\n    border-top-left-radius: var(--kemet-tooltip-rounded-tip);\n    border-left: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);\n    border-top: var(--kemet-tooltip-border-size) solid var(--kemet-tooltip-border-color);\n  }\n\n  [data-popper-placement^=\"top\"] #arrow {\n    top: var(--kemet-tooltip-placement-offset);\n    transform: rotate(225deg);\n\n  }\n\n  [data-popper-placement^=\"bottom\"] #arrow-container {\n    top: 0px;\n  }\n\n  [data-popper-placement^=\"bottom\"] #arrow {\n    top: var(--kemet-tooltip-placement-offset);\n    transform: rotate(45deg);\n  }\n\n  [data-popper-placement^=\"right\"] #arrow {\n    left: var(--kemet-tooltip-placement-offset);\n    transform: rotate(-45deg);\n  }\n\n  [data-popper-placement^=\"left\"] #arrow-container {\n    right: 0;\n  }\n\n  [data-popper-placement^=\"left\"] #arrow {\n    right: var(--kemet-tooltip-placement-offset);\n    transform: rotate(135deg);\n  }\n`;\n"]}

package/dist/components/kemet-tooltip/types.d.ts

@@ -1,3 +0,0 @@
-export type TypePlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
-export type TypeFireOn = 'click' | 'hover';
-export type TypeEffect = 'none' | 'fade' | 'scale' | 'slide' | 'fall' | 'flip-horizontal' | 'flip-vertical' | 'sign' | 'super-scaled';

package/dist/components/kemet-tooltip/types.js

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

package/dist/components/kemet-tooltip/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/kemet-tooltip/types.ts"],"names":[],"mappings":"","sourcesContent":["export type TypePlacement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';\nexport type TypeFireOn = 'click' | 'hover';\nexport type TypeEffect = 'none' | 'fade' | 'scale' | 'slide' | 'fall' | 'flip-horizontal' | 'flip-vertical' | 'sign' | 'super-scaled';\n"]}

package/dist/components/kemet-tracker/docs/stories.d.ts

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

package/dist/components/kemet-tracker/docs/stories.js

@@ -1,42 +0,0 @@
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import '../kemet-tracker';
-import '../kemet-tracker-step';
-import '../../kemet-tabs/kemet-tabs';
-import '../../kemet-tabs/kemet-tab';
-import '../../kemet-tabs/kemet-tab-panel';
-const meta = {
-    title: 'Components / Tracker',
-    component: 'kemet-tracker',
-    args: {
-        numOfSteps: 5,
-        currentStep: 3,
-    },
-    argTypes: {
-        currentStep: {
-            control: { type: 'number', max: 5 },
-        },
-    }
-};
-export default meta;
-const Template = (args) => {
-    const steps = [];
-    for (let i = 1; i <= args.numOfSteps; i += 1) {
-        steps.push(html `<kemet-tracker-step ?completed=${i < args.currentStep || args.currentStep > args.numOfSteps} ?current=${i === args.currentStep} ?hide-dot-content=${args.hideDotContent}>Step ${i}</kemet-tracker-step>`);
-    }
-    return html `
-    <kemet-tracker breakpoint=${ifDefined(args.breakpoint)}>
-      ${steps}
-    </kemet-tracker>
-  `;
-};
-export const Standard = {
-    render: args => Template(args),
-};
-export const HideDotContent = {
-    render: args => Template(args),
-    args: {
-        hideDotContent: true,
-    }
-};
-//# sourceMappingURL=stories.js.map

package/dist/components/kemet-tracker/docs/stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../../src/components/kemet-tracker/docs/stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AAGzD,OAAO,kBAAkB,CAAC;AAC1B,OAAO,uBAAuB,CAAC;AAE/B,OAAO,6BAA6B,CAAC;AACrC,OAAO,4BAA4B,CAAC;AACpC,OAAO,kCAAkC,CAAC;AAE1C,MAAM,IAAI,GAAS;IACjB,KAAK,EAAE,sBAAsB;IAC7B,SAAS,EAAE,eAAe;IAC1B,IAAI,EAAE;QACJ,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,CAAC;KACf;IACD,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE;SACpC;KACF;CACF,CAAC;AACF,eAAe,IAAI,CAAC;AAIpB,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,KAAK,GAAG,EAAE,CAAC;IAEjB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC,EAAE,CAAC;QAC7C,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA,kCAAkC,CAAC,GAAG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,UAAU,aAAa,CAAC,KAAK,IAAI,CAAC,WAAW,sBAAsB,IAAI,CAAC,cAAc,SAAS,CAAC,uBAAuB,CAAC,CAAC;IAC5N,CAAC;IAED,OAAO,IAAI,CAAA;gCACmB,SAAS,CAAC,IAAI,CAAC,UAAU,CAAC;QAClD,KAAK;;GAEV,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC7B,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;CAC/B,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,MAAM,EAAE,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;IAC9B,IAAI,EAAE;QACJ,cAAc,EAAE,IAAI;KACrB;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-tracker';\nimport '../kemet-tracker-step';\n\nimport '../../kemet-tabs/kemet-tabs';\nimport '../../kemet-tabs/kemet-tab';\nimport '../../kemet-tabs/kemet-tab-panel';\n\nconst meta: Meta = {\n  title: 'Components / Tracker',\n  component: 'kemet-tracker',\n  args: {\n    numOfSteps: 5,\n    currentStep: 3,\n  },\n  argTypes: {\n    currentStep: {\n      control: { type: 'number', max: 5 },\n    },\n  }\n};\nexport default meta;\n\ntype Story = StoryObj;\n\nconst Template = (args) => {\n  const steps = [];\n\n  for (let i = 1; i <= args.numOfSteps; i += 1) {\n    steps.push(html`<kemet-tracker-step ?completed=${i < args.currentStep || args.currentStep > args.numOfSteps} ?current=${i === args.currentStep} ?hide-dot-content=${args.hideDotContent}>Step ${i}</kemet-tracker-step>`);\n  }\n\n  return html`\n    <kemet-tracker breakpoint=${ifDefined(args.breakpoint)}>\n      ${steps}\n    </kemet-tracker>\n  `;\n};\n\nexport const Standard: Story = {\n  render: args => Template(args),\n};\n\nexport const HideDotContent: Story = {\n  render: args => Template(args),\n  args: {\n    hideDotContent: true,\n  }\n};\n"]}

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

@@ -1,63 +0,0 @@
-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 a step renders as complete
- * @prop {boolean} current - Determines whether 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.
- * @cssproperty --kemet-tracker-step-dot-color - The text color.
- * @cssproperty --kemet-tracker-step-dot-border - Border around a dot.
- * @cssproperty --kemet-tracker-step-dot-size - Width and height of a dot.
- * @cssproperty --kemet-tracker-step-dot-size-mobile - Mobile width and height of a dot.
- * @cssproperty --kemet-tracker-step-dot-gap - Space between a dot and connector line.
- * @cssproperty --kemet-tracker-step-dot-transition - Transition of a dot.
- * @cssproperty --kemet-tracker-step-dot-fill-color - Fill color of a dot.
- * @cssproperty --kemet-tracker-step-dot-background-color - Color of the background a dot is on.
- * @cssproperty --kemet-tracker-step-current-color - Current dot text color.
- * @cssproperty --kemet-tracker-step-current-fill-color - Current dot fill color.
- * @cssproperty --kemet-tracker-step-completed-color - Text color of a completed dot.
- * @cssproperty --kemet-tracker-step-completed-fill-color - Background color of a completed dot.
- * @cssproperty --kemet-tracker-step-completed-line-color - Completed connector line color.
- * @cssproperty --kemet-tracker-step-completed-line-weight - Completed line weight.
- * @cssproperty --kemet-tracker-step-standard-line-weight - Standard line weight.
- *
- * @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/components/kemet-tracker/kemet-tracker-step.js

@@ -1,127 +0,0 @@
-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 a step renders as complete
- * @prop {boolean} current - Determines whether 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.
- * @cssproperty --kemet-tracker-step-dot-color - The text color.
- * @cssproperty --kemet-tracker-step-dot-border - Border around a dot.
- * @cssproperty --kemet-tracker-step-dot-size - Width and height of a dot.
- * @cssproperty --kemet-tracker-step-dot-size-mobile - Mobile width and height of a dot.
- * @cssproperty --kemet-tracker-step-dot-gap - Space between a dot and connector line.
- * @cssproperty --kemet-tracker-step-dot-transition - Transition of a dot.
- * @cssproperty --kemet-tracker-step-dot-fill-color - Fill color of a dot.
- * @cssproperty --kemet-tracker-step-dot-background-color - Color of the background a dot is on.
- * @cssproperty --kemet-tracker-step-current-color - Current dot text color.
- * @cssproperty --kemet-tracker-step-current-fill-color - Current dot fill color.
- * @cssproperty --kemet-tracker-step-completed-color - Text color of a completed dot.
- * @cssproperty --kemet-tracker-step-completed-fill-color - Background color of a completed dot.
- * @cssproperty --kemet-tracker-step-completed-line-color - Completed connector line color.
- * @cssproperty --kemet-tracker-step-completed-line-weight - Completed line weight.
- * @cssproperty --kemet-tracker-step-standard-line-weight - Standard line weight.
- *
- * @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/components/kemet-tracker/kemet-tracker-step.js.map

@@ -1 +0,0 @@
-{"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 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: KemetTrackerInterface;\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/components/kemet-tracker/kemet-tracker.d.ts

@@ -1,27 +0,0 @@
-import { LitElement } from 'lit';
-import type KemetTrackerStep from './kemet-tracker-step';
-/**
- *
- * @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: NodeListOf<KemetTrackerStep>;
-    constructor();
-    firstUpdated(): void;
-    render(): import("lit-html").TemplateResult<1>;
-    handleSlotChange(): void;
-    isMobile(): void;
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'kemet-tracker': KemetTracker;
-    }
-}