kemet-ui 4.0.0 → 4.0.2

package/dist/elements/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/tooltip.ts","../../src/styles/elements/tooltip.ts","../../src/styles/elements/popper.ts","../../src/elements/popper.ts","../../src/utilities/events.ts"],"sourcesContent":["import { html } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport { stylesTooltip } from '../styles/elements/tooltip';\nimport { stylesPopper } from '../styles/elements/popper';\nimport {\n  stylesPopperFade,\n  stylesPopperScale,\n  stylesPopperSlide,\n  stylesPopperFall,\n  stylesPopperFlipHorizontal,\n  stylesPopperFlipVertical,\n  stylesPopperSign,\n  stylesPopperSuperScaled,\n} from '../styles/elements/popper';\nimport KemetPopper from '../elements/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    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","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","import { css } from 'lit';\n\nexport const stylesPopper = css`\n  :host {\n    --kemet-popper-width: auto;\n    --kemet-popper-height: auto;\n    --kemet-popper-padding: 1rem;\n    --kemet-popper-border-color: rgb(var(--kemet-color-foreground));\n    --kemet-popper-background-color: rgb(var(--kemet-color-background));\n\n    display: inline-block;\n  }\n\n  #content {\n    visibility: hidden;\n    pointer-events: none;\n    width: var(--kemet-popper-width);\n    height: var(--kemet-popper-height);\n    position: absolute;\n    z-index: -1;\n    opacity: 0;\n    transition: all var(--kemet-popover-transition-speed, 0.3s);\n  }\n\n  :host([opened]) #content {\n    visibility: visible;\n    z-index: 9;\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  ::slotted([slot=\"content\"]) {\n    padding: var(--kemet-popper-padding);\n    border: 1px solid var(--kemet-popper-border-color);\n    background-color: var(--kemet-popper-background-color);\n  }\n`;\n\nexport const stylesPopperFade = css`\n  :host([effect=\"fade\"]) #content {\n    opacity: 0;\n    transition: all var(--kemet-popover-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"fade\"][opened]) #content {\n    opacity: 1;\n  }\n`;\n\nexport const stylesPopperScale = css`\n  :host([effect=\"scale\"]) #content {\n    opacity: 0;\n    transition: all var(--kemet-popover-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"scale\"][opened]) #content {\n    opacity: 1;\n  }\n\n  :host([effect=\"scale\"][position=\"top\"]) #content,\n  :host([effect=\"scale\"][position=\"bottom\"]) #content {\n    transform: translateX(-50%) scale(0.7);\n  }\n\n  :host([effect=\"scale\"][position=\"top\"][opened]) #content,\n  :host([effect=\"scale\"][position=\"bottom\"][opened]) #content {\n    transform: translateX(-50%) scale(1);\n  }\n\n  :host([effect=\"scale\"][position=\"left\"]) #content,\n  :host([effect=\"scale\"][position=\"right\"]) #content {\n    transform: translateY(-50%) scale(0.7);\n  }\n\n  :host([effect=\"scale\"][position=\"left\"][opened]) #content,\n  :host([effect=\"scale\"][position=\"right\"][opened]) #content {\n    transform: translateY(-50%) scale(1);\n  }\n`;\n\nexport const stylesPopperSlide = css`\n  :host([effect=\"slide\"]) #content {\n    opacity: 0;\n    transition: all var(--kemet-popover-transition-speed, 0.3s) cubic-bezier(0.25, 0.5, 0.5, 0.9);\n  }\n\n  :host([effect=\"slide\"][opened]) #content {\n    opacity: 1;\n  }\n\n  :host([effect=\"slide\"][position=\"top\"]) #content {\n    transform: translateX(-50%) translateY(20%);\n  }\n\n  :host([effect=\"slide\"][position=\"top\"][opened]) #content {\n    transform: translateX(-50%) translateY(0);\n  }\n\n  :host([effect=\"slide\"][position=\"bottom\"]) #content {\n    transform: translateX(-50%) translateY(-20%);\n  }\n\n  :host([effect=\"slide\"][position=\"bottom\"][opened]) #content {\n    transform: translateX(-50%) translateY(0);\n  }\n\n  :host([effect=\"slide\"][position=\"right\"]) #content {\n    transform: translateY(-50%) translateX(-20%);\n  }\n\n  :host([effect=\"slide\"][position=\"right\"][opened]) #content {\n    transform: translateY(-50%) translateX(0);\n  }\n\n  :host([effect=\"slide\"][position=\"left\"]) #content {\n    transform: translateY(-50%) translateX(20%);\n  }\n\n  :host([effect=\"slide\"][position=\"left\"][opened]) #content {\n    transform: translateY(-50%) translateX(0);\n  }\n`;\n\nexport const stylesPopperFall = css`\n  :host([effect=\"fall\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"fall\"]) #content {\n    transform-style: preserve-3d;\n    opacity: 0;\n  }\n\n  :host([effect=\"fall\"][opened]) #content {\n    transition: all var(--kemet-popover-transition-speed, 0.3s) ease-in;\n    opacity: 1;\n  }\n\n  :host([effect=\"fall\"][position=\"top\"]) #content {\n    transform: translateX(-50%) translateZ(600px) rotateX(20deg);\n  }\n\n  :host([effect=\"fall\"][position=\"top\"][opened]) #content {\n    transform: translateX(-50%) translateZ(0px) rotateX(0deg);\n  }\n\n  :host([effect=\"fall\"][position=\"bottom\"]) #content {\n    transform: translateX(-50%) translateZ(600px) rotateX(20deg);\n  }\n\n  :host([effect=\"fall\"][position=\"bottom\"][opened]) #content {\n    transform: translateX(-50%) translateZ(0px) rotateX(0deg);\n  }\n\n  :host([effect=\"fall\"][position=\"right\"]) #content {\n    transform: translateY(-50%) translateZ(600px) rotateX(20deg);\n  }\n\n  :host([effect=\"fall\"][position=\"right\"][opened]) #content {\n    transform: translateY(-50%) translateZ(0px) rotateX(0deg);\n  }\n\n  :host([effect=\"fall\"][position=\"left\"]) #content {\n    transform: translateY(-50%) translateZ(600px) rotateX(20deg);\n  }\n\n  :host([effect=\"fall\"][position=\"left\"][opened]) #content {\n    transform: translateY(-50%) translateZ(0px) rotateX(0deg);\n  }\n`;\n\nexport const stylesPopperFlipHorizontal = css`\n  :host([effect=\"flip-horizontal\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-horizontal\"]) #content {\n    transform-style: preserve-3d;\n    transition: all var(--kemet-popover-transition-speed, 0.3s);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-horizontal\"][opened]) #content {\n    opacity: 1;\n  }\n\n  :host([effect=\"flip-horizontal\"][position=\"top\"]) #content {\n    transform: translateX(-50%) rotateY(-70deg);\n  }\n\n  :host([effect=\"flip-horizontal\"][position=\"top\"][opened]) #content {\n    transform: translateX(-50%) rotateY(0deg);\n  }\n\n  :host([effect=\"flip-horizontal\"][position=\"bottom\"]) #content {\n    transform: translateX(-50%) rotateY(-70deg);\n  }\n\n  :host([effect=\"flip-horizontal\"][position=\"bottom\"][opened]) #content {\n    transform: translateX(-50%) rotateY(0deg);\n  }\n\n  :host([effect=\"flip-horizontal\"][position=\"right\"]) #content {\n    transform: translateY(-50%) rotateY(-70deg);\n  }\n\n  :host([effect=\"flip-horizontal\"][position=\"right\"][opened]) #content {\n    transform: translateY(-50%) rotateY(0deg);\n  }\n\n  :host([effect=\"flip-horizontal\"][position=\"left\"]) #content {\n    transform: translateY(-50%) rotateY(-70deg);\n  }\n\n  :host([effect=\"flip-horizontal\"][position=\"left\"][opened]) #content {\n    transform: translateY(-50%) rotateY(0deg);\n  }\n`;\n\nexport const stylesPopperFlipVertical = css`\n  :host([effect=\"flip-vertical\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"flip-vertical\"]) #content {\n    transform-style: preserve-3d;\n    transition: all var(--kemet-popover-transition-speed, 0.3s);\n    opacity: 0;\n  }\n\n  :host([effect=\"flip-vertical\"][opened]) #content {\n    opacity: 1;\n  }\n\n  :host([effect=\"flip-vertical\"][position=\"top\"]) #content {\n    transform: translateX(-50%) rotateX(-70deg);\n  }\n\n  :host([effect=\"flip-vertical\"][position=\"top\"][opened]) #content {\n    transform: translateX(-50%) rotateX(0deg);\n  }\n\n  :host([effect=\"flip-vertical\"][position=\"bottom\"]) #content {\n    transform: translateX(-50%) rotateX(-70deg);\n  }\n\n  :host([effect=\"flip-vertical\"][position=\"bottom\"][opened]) #content {\n    transform: translateX(-50%) rotateX(0deg);\n  }\n\n  :host([effect=\"flip-vertical\"][position=\"right\"]) #content {\n    transform: translateY(-50%) rotateX(-70deg);\n  }\n\n  :host([effect=\"flip-vertical\"][position=\"right\"][opened]) #content {\n    transform: translateY(-50%) rotateX(0deg);\n  }\n\n  :host([effect=\"flip-vertical\"][position=\"left\"]) #content {\n    transform: translateY(-50%) rotateX(-70deg);\n  }\n\n  :host([effect=\"flip-vertical\"][position=\"left\"][opened]) #content {\n    transform: translateY(-50%) rotateX(0deg);\n  }\n`;\n\nexport const stylesPopperSign = css`\n  :host([effect=\"sign\"]) {\n    perspective: 1300px;\n  }\n\n  :host([effect=\"sign\"]) #content {\n    transform-style: preserve-3d;\n    transition: all var(--kemet-popover-transition-speed, 0.3s);\n    opacity: 0;\n  }\n\n  :host([effect=\"sign\"][opened]) #content {\n    opacity: 1;\n  }\n\n  :host([effect=\"sign\"][position=\"top\"]) #content {\n    transform-origin: 0 100%;\n    transform: translateX(-50%) rotateX(90deg);\n  }\n\n  :host([effect=\"sign\"][position=\"top\"][opened]) #content {\n    transform: translateX(-50%) rotateX(0deg);\n  }\n\n  :host([effect=\"sign\"][position=\"bottom\"]) #content {\n    transform-origin: 100% 0;\n    transform: translateX(-50%) rotateX(90deg);\n  }\n\n  :host([effect=\"sign\"][position=\"bottom\"][opened]) #content {\n    transform: translateX(-50%) rotateX(0deg);\n  }\n\n  :host([effect=\"sign\"][position=\"right\"]) #content {\n    transform-origin: 0 100%;\n    transform: translateY(-50%) rotateY(90deg);\n  }\n\n  :host([effect=\"sign\"][position=\"right\"][opened]) #content {\n    transform: translateY(-50%) rotateY(0deg);\n  }\n\n  :host([effect=\"sign\"][position=\"left\"]) #content {\n    transform-origin: 100% 0;\n    transform: translateY(-50%) rotateY(90deg);\n  }\n\n  :host([effect=\"sign\"][position=\"left\"][opened]) #content {\n    transform: translateY(-50%) rotateY(0deg);\n  }\n`;\n\nexport const stylesPopperSuperScaled = css`\n  :host([effect=\"super-scaled\"]) #content {\n    opacity: 0;\n    transition: all var(--kemet-popover-transition-speed, 0.3s);\n  }\n\n  :host([effect=\"super-scaled\"][opened]) #content {\n    opacity: 1;\n  }\n\n  :host([effect=\"super-scaled\"][position=\"top\"]) #content,\n  :host([effect=\"super-scaled\"][position=\"bottom\"]) #content {\n    transform: translateX(-50%) scale(2);\n  }\n\n  :host([effect=\"super-scaled\"][position=\"top\"][opened]) #content,\n  :host([effect=\"super-scaled\"][position=\"bottom\"][opened]) #content {\n    transform: translateX(-50%) scale(1);\n  }\n\n  :host([effect=\"super-scaled\"][position=\"left\"]) #content,\n  :host([effect=\"super-scaled\"][position=\"right\"]) #content {\n    transform: translateY(-50%) scale(2);\n  }\n\n  :host([effect=\"super-scaled\"][position=\"left\"][opened]) #content,\n  :host([effect=\"super-scaled\"][position=\"right\"][opened]) #content {\n    transform: translateY(-50%) scale(1);\n  }\n`;\n","import { html, LitElement } from 'lit';\nimport {\n  customElement, property, query, queryAll, state,\n} from 'lit/decorators.js';\nimport { createPopper } from '@popperjs/core/dist/esm';\nimport { emitEvent } from '../utilities/events';\nimport { stylesPopper } from '../styles/elements/popper';\n// import { stylesPopperFade, stylesPopperScale, stylesPopperSlide, stylesPopperFall, stylesPopperFlipHorizontal, stylesPopperFlipVertical, stylesPopperSign, stylesPopperSuperScaled } from './styles.effects';\n\nexport const placement = ['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'] as const;\nexport enum EnumPlacement {\n  AUTO = 'auto',\n  AUTO_START = 'auto-start',\n  AUTO_END = 'auto-end',\n  TOP = 'top',\n  TOP_START = 'top-start',\n  TOP_END = 'top-end',\n  BOTTOM = 'bottom',\n  BOTTOM_START = 'bottom-start',\n  BOTTOM_END = 'bottom-end',\n  RIGHT = 'right',\n  RIGHT_START = 'right-start',\n  RIGHT_END = 'right-end',\n  LEFT = 'left',\n  LEFT_START = 'left-start',\n  LEFT_END = 'left-end',\n}\nexport type TypePlacement = typeof placement[number];\n\n\nexport const fireEvents = ['click', 'hover'] as const;\nexport enum EnumFireEvents {\n  CLICK = \"click\",\n  HOVER = \"hover\",\n}\nexport type TypeFireEvents = typeof fireEvents[number];\n\n\nexport const effects = ['none', 'fade', 'scale', 'slide', 'fall', 'flip-horizontal', 'flip-vertical', 'sign', 'super-scaled'] as const;\nexport enum EnumEffects {\n  NONE = \"none\",\n  FADE = \"fade\",\n  SCALE = \"scale\",\n  SLIDE = \"slide\",\n  FALL = \"fall\",\n  FLIP_HORIZONTAL = \"flip-horizontal\",\n  FLIP_VERTICAL = \"flip-vertical\",\n  SIGN = \"sign\",\n  SUPER_SCALED = \"super-scaled\",\n}\nexport type TypeEffects = typeof effects[number];\n\nexport const strategy = ['fixed', 'absolute'] as const;\nexport enum EnumStrategy {\n  FIXED = \"fixed\",\n  ABSOLUTE = \"absolute\",\n}\nexport type TypeStrategy = typeof strategy[number];\n\n\n/**\n * @since 2.0.0\n * @status stable\n *\n * @tagname kemet-popper\n * @summary A wrapper component for the popper.js lib.\n *\n * @event kemet-opened - Fires when the popper opens\n * @event kemet-closed - Fires when the popper closes\n *\n * @slot trigger - Controls opening and closing the popover.\n * @slot content - The contents of the popover.\n *\n * @csspart trigger - Contains the trigger for the popover.\n * @csspart content - Contains the content for the popover.\n *\n * @cssproperty --kemet-popper-padding - The padding in the content slot.\n * @cssproperty --kemet-popper-border-color - The border color of the content.\n * @cssproperty --kemet-popper-background-color - The background color of the content.\n *\n * @prop {TypePlacement} placement - The position of the popper over the trigger.\n * @prop {boolean} opened - Determines if the Popper is opened or closed\n * @prop {TypeFireOn} fireOn - Activate the Popper on Click or Hover\n * @prop {TypeStrategy} strategy - Sets the strategy option in Popper's api\n * @prop {number} skidding - Sets an offset to the Popper from the trigger\n * @prop {number} distance - Sets spacing between the Popper and the trigger\n *\n */\n\n@customElement('kemet-popper')\nexport default class KemetPopper extends LitElement {\n  static styles = [stylesPopper];\n\n  @property({ type: String, reflect: true })\n  placement: TypePlacement = EnumPlacement.TOP;\n\n  @property({ type: Boolean, reflect: true })\n  opened: boolean;\n\n  @property({ type: String, attribute: 'fire-on' })\n  fireOn: TypeFireEvents = EnumFireEvents.HOVER;\n\n  @property({ type: String })\n  strategy: TypeStrategy = EnumStrategy.FIXED;\n\n  @property({ type: Number })\n  skidding: number = 0;\n\n  @property({ type: Number })\n  distance: number = 0;\n\n  /** @internal */\n  @state()\n  popperInstance: { setOptions: (arg0: { placement: TypePlacement; strategy: TypeStrategy; modifiers: { name: string; options: { offset: number[]; }; }[]; }) => void; };\n\n  /** @internal */\n  @query('#trigger')\n  triggerElement: HTMLElement;\n\n  /** @internal */\n  @query('#content')\n  contentElement: HTMLElement;\n\n  /** @internal */\n  @queryAll('body, a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable], kemet-popper-close')\n  focusableElements: NodeListOf<Element>;\n\n  constructor() {\n    super();\n    this.addEventListener('kemet-closed-pressed', () => { this.opened = false; });\n  }\n\n  firstUpdated() {\n    if (this.fireOn === 'click') {\n      this.focusableElements.forEach((element) => {\n        element.addEventListener('keydown', (event: KeyboardEvent) => this.handleFocusableDown(event));\n      });\n    }\n  }\n\n  updated(prevProps: Map<string, never>) {\n    this.refresh();\n\n    if (!prevProps.get('opened') && this.opened === true) {\n      emitEvent(this, 'kemet-opened', this);\n    }\n\n    if (prevProps.get('opened') && this.opened === false) {\n      emitEvent(this, 'kemet-closed', this);\n    }\n  }\n\n  render() {\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()}></slot>\n      </div>\n    `;\n  }\n\n  refresh() {\n    this.popperInstance?.setOptions({\n      placement: this.placement,\n      strategy: this.strategy,\n      modifiers: [\n        { name: 'offset', options: { offset: [this.skidding, this.distance] } },\n      ],\n    });\n  }\n\n  makePopper() {\n    this.popperInstance = createPopper(this.triggerElement, this.contentElement, {\n      placement: this.placement,\n      strategy: this.strategy,\n      modifiers: [\n        { name: 'offset', options: { offset: [this.skidding, this.distance] } },\n      ],\n    });\n  }\n\n  toggle(event: MouseEvent | KeyboardEvent) {\n    const target = event.target as HTMLElement;\n    const isSlotTrigger = target.getAttribute('slot') === 'trigger';\n    const isPartTrigger = target.getAttribute('part') === 'trigger';\n\n    if (isSlotTrigger || isPartTrigger) {\n      this.opened = !this.opened;\n    }\n  }\n\n  handleKeyUp(event: KeyboardEvent) {\n    event.preventDefault();\n\n    if (event.key === 'Escape') {\n      this.opened = false;\n    }\n\n    if (event.key === 'Enter' || event.code === 'Space') {\n      this.toggle(event);\n    }\n  }\n\n  handleFocusableDown(event: KeyboardEvent) {\n    const firstFocusable = this.focusableElements[0] as HTMLElement;\n    const lastFocusable = this.focusableElements[this.focusableElements.length - 1] as HTMLElement;\n\n    if (event.key === 'Tab') {\n      if (event.shiftKey && document.activeElement === firstFocusable) {\n        event.preventDefault();\n        lastFocusable.focus();\n      } else if (!event.shiftKey && document.activeElement === lastFocusable) {\n        event.preventDefault();\n        firstFocusable.focus();\n      }\n    }\n  }\n }\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kemet-popper': KemetPopper\n  }\n}\n","export const emitEvent = (element, name, detail, bubbles = true, composed = true) => {\n  element.dispatchEvent(\n    new CustomEvent(name, { bubbles, composed, detail }),\n  );\n};\n"],"mappings":"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","names":["import_lit","import_decorators","import_lit","import_lit"]}

package/dist/elements/tooltip.mjs

@@ -0,0 +1,10 @@
+import {
+  KemetTooltip
+} from "../chunk-HEJAQQFO.mjs";
+import "../chunk-LKIDBCVS.mjs";
+import "../chunk-LHEY3UOF.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetTooltip as default
+};
+//# sourceMappingURL=tooltip.mjs.map

package/dist/elements/tooltip.mjs.map

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

package/dist/elements/tracker-step.d.mts

@@ -0,0 +1,3 @@
+import 'lit-html';
+import 'lit';
+export { a as default } from '../tracker-step-DkA-T98W.mjs';

package/dist/elements/tracker-step.d.ts

@@ -0,0 +1,3 @@
+import 'lit-html';
+import 'lit';
+export { a as default } from '../tracker-step-DkA-T98W.js';

package/dist/elements/tracker-step.js

@@ -0,0 +1,366 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/tracker-step.ts
+var tracker_step_exports = {};
+__export(tracker_step_exports, {
+  default: () => KemetTrackerStep
+});
+module.exports = __toCommonJS(tracker_step_exports);
+var import_lit3 = require("lit");
+var import_decorators2 = require("lit/decorators.js");
+
+// src/styles/elements/tracker.ts
+var import_lit = require("lit");
+var stylesStep = import_lit.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/icon-bootstrap.ts
+var import_lit2 = require("lit");
+var import_decorators = require("lit/decorators.js");
+var KemetIconBootstrap = class extends import_lit2.LitElement {
+  constructor() {
+    super(...arguments);
+    this.icon = "code";
+    this.version = "1.11.3";
+    this.size = 24;
+    this.stylesLoaded = false;
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    await this._loadBootstrapStyles();
+  }
+  async _resolveVersion(version) {
+    if (version !== "latest" && /^\d+\.\d+\.\d+/.test(version)) {
+      return version;
+    }
+    if (KemetIconBootstrap.resolvedVersions.has(version)) {
+      return KemetIconBootstrap.resolvedVersions.get(version);
+    }
+    try {
+      const response = await fetch("https://unpkg.com/bootstrap-icons/package.json");
+      if (!response.ok) throw new Error("Failed to resolve version");
+      const pkg = await response.json();
+      const resolvedVersion = pkg.version;
+      KemetIconBootstrap.resolvedVersions.set(version, resolvedVersion);
+      return resolvedVersion;
+    } catch (error) {
+      console.warn("Failed to resolve Bootstrap Icons version, using 1.11.3:", error);
+      return "1.11.3";
+    }
+  }
+  async _loadBootstrapStyles() {
+    if (this.stylesLoaded) return;
+    try {
+      const resolvedVersion = await this._resolveVersion(this.version);
+      const cacheKey = resolvedVersion;
+      if (!KemetIconBootstrap.fontFaceLoaded.get(cacheKey)) {
+        await this._loadFontFaceInDocument(resolvedVersion);
+        KemetIconBootstrap.fontFaceLoaded.set(cacheKey, true);
+      }
+      let iconSheet = KemetIconBootstrap.iconStylesCache.get(cacheKey);
+      if (!iconSheet) {
+        const response = await fetch(
+          `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/bootstrap-icons.min.css`
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        let cssText = await response.text();
+        cssText = cssText.replace(/@font-face\s*{[^}]*}/g, "");
+        iconSheet = new CSSStyleSheet();
+        await iconSheet.replace(cssText);
+        KemetIconBootstrap.iconStylesCache.set(cacheKey, iconSheet);
+      }
+      this.shadowRoot.adoptedStyleSheets = [
+        ...this.shadowRoot.adoptedStyleSheets,
+        iconSheet
+      ];
+      this.stylesLoaded = true;
+      this.requestUpdate();
+    } catch (error) {
+      console.error("Failed to load Bootstrap Icons:", error);
+      this.requestUpdate();
+    }
+  }
+  async _loadFontFaceInDocument(resolvedVersion) {
+    try {
+      const response = await fetch(
+        `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/bootstrap-icons.min.css`
+      );
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`);
+      }
+      const cssText = await response.text();
+      const fontFaceMatches = cssText.match(/@font-face\s*{[^}]*}/g);
+      if (!fontFaceMatches) return;
+      const baseUrl = `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/`;
+      let fontFaceCss = fontFaceMatches.join("\n");
+      fontFaceCss = fontFaceCss.replace(/url\(["']?\.\/fonts\//g, `url("${baseUrl}fonts/`);
+      fontFaceCss = fontFaceCss.replace(/url\(["']?fonts\//g, `url("${baseUrl}fonts/`);
+      const styleId = `bootstrap-icons-fonts-${resolvedVersion}`;
+      if (!document.getElementById(styleId)) {
+        const style = document.createElement("style");
+        style.id = styleId;
+        style.textContent = fontFaceCss;
+        document.head.appendChild(style);
+      }
+    } catch (error) {
+      console.error("Failed to load Bootstrap Icons fonts:", error);
+      throw error;
+    }
+  }
+  render() {
+    return import_lit2.html`
+      <i class="bi bi-${this.icon}" style="font-size: ${this.size}px;"></i>
+    `;
+  }
+};
+KemetIconBootstrap.fontFaceLoaded = /* @__PURE__ */ new Map();
+KemetIconBootstrap.iconStylesCache = /* @__PURE__ */ new Map();
+KemetIconBootstrap.resolvedVersions = /* @__PURE__ */ new Map();
+KemetIconBootstrap.styles = import_lit2.css`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+  `;
+__decorateClass([
+  (0, import_decorators.property)()
+], KemetIconBootstrap.prototype, "icon", 2);
+__decorateClass([
+  (0, import_decorators.property)()
+], KemetIconBootstrap.prototype, "version", 2);
+__decorateClass([
+  (0, import_decorators.property)()
+], KemetIconBootstrap.prototype, "size", 2);
+KemetIconBootstrap = __decorateClass([
+  (0, import_decorators.customElement)("kemet-icon-bootstrap")
+], KemetIconBootstrap);
+
+// src/elements/tracker-step.ts
+var KemetTrackerStep = class extends import_lit3.LitElement {
+  constructor() {
+    super(...arguments);
+    this.completedSize = 16;
+  }
+  firstUpdated() {
+    this.tracker = this.closest("kemet-tracker");
+  }
+  render() {
+    return import_lit3.html`
+      ${this.makeLine()}
+      ${this.makeCompletedLine()}
+      <div class="dot" part="dot">${this.makeDotContent()}</div>
+      ${this.makeSlotContent()}
+    `;
+  }
+  makeLine() {
+    if (!this.last) {
+      return import_lit3.html`<div class="line" part="line"></div>`;
+    }
+    return null;
+  }
+  makeCompletedLine() {
+    if (this.completed && !this.last) {
+      return import_lit3.html`<div class="line completed" part="completed-line" @animationend=${() => this.handleCompletedLineEnd()}></div>`;
+    }
+    return null;
+  }
+  makeDotContent() {
+    if (this.completed && !this.mobile && !this.hideDotContent) {
+      return import_lit3.html`
+        <kemet-icon-bootstrap icon="check2" size=${this.completedSize}></kemet-icon-bootstrap>
+      `;
+    }
+    if (!this.mobile && !this.hideDotContent) {
+      return import_lit3.html`
+        <span>${this.step}/${this.tracker?.total}</span>
+      `;
+    }
+    return null;
+  }
+  makeSlotContent() {
+    if (!this.mobile) {
+      return import_lit3.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([
+  (0, import_decorators2.property)({ type: Number })
+], KemetTrackerStep.prototype, "step", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Boolean, reflect: true })
+], KemetTrackerStep.prototype, "completed", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Boolean, reflect: true })
+], KemetTrackerStep.prototype, "current", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Boolean, reflect: true })
+], KemetTrackerStep.prototype, "last", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Boolean, reflect: true })
+], KemetTrackerStep.prototype, "mobile", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Boolean, reflect: true, attribute: "hide-dot-content" })
+], KemetTrackerStep.prototype, "hideDotContent", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Number })
+], KemetTrackerStep.prototype, "completedSize", 2);
+__decorateClass([
+  (0, import_decorators2.state)()
+], KemetTrackerStep.prototype, "tracker", 2);
+KemetTrackerStep = __decorateClass([
+  (0, import_decorators2.customElement)("kemet-tracker-step")
+], KemetTrackerStep);
+//# sourceMappingURL=tracker-step.js.map

package/dist/elements/tracker-step.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/tracker-step.ts","../../src/styles/elements/tracker.ts","../../src/elements/icon-bootstrap.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","import { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\n@customElement('kemet-icon-bootstrap')\nexport default class KemetIconBootstrap extends LitElement {\n  @property() icon: string = 'code';\n  @property() version: string = '1.11.3'; // Default to stable version\n  @property() size: number = 24;\n\n  private static fontFaceLoaded = new Map<string, boolean>();\n  private static iconStylesCache = new Map<string, CSSStyleSheet>();\n  private static resolvedVersions = new Map<string, string>();\n  private stylesLoaded = false;\n\n  async connectedCallback() {\n    super.connectedCallback();\n    await this._loadBootstrapStyles();\n  }\n\n  private async _resolveVersion(version: string): Promise<string> {\n    // If it's already a specific version, return it\n    if (version !== 'latest' && /^\\d+\\.\\d+\\.\\d+/.test(version)) {\n      return version;\n    }\n\n    // Check cache\n    if (KemetIconBootstrap.resolvedVersions.has(version)) {\n      return KemetIconBootstrap.resolvedVersions.get(version)!;\n    }\n\n    try {\n      // Fetch without version to get redirected to latest\n      const response = await fetch('https://unpkg.com/bootstrap-icons/package.json');\n      if (!response.ok) throw new Error('Failed to resolve version');\n\n      const pkg = await response.json();\n      const resolvedVersion = pkg.version;\n\n      KemetIconBootstrap.resolvedVersions.set(version, resolvedVersion);\n      return resolvedVersion;\n    } catch (error) {\n      console.warn('Failed to resolve Bootstrap Icons version, using 1.11.3:', error);\n      return '1.11.3'; // Fallback to known stable version\n    }\n  }\n\n  private async _loadBootstrapStyles() {\n    if (this.stylesLoaded) return;\n\n    try {\n      // Resolve version if needed\n      const resolvedVersion = await this._resolveVersion(this.version);\n      const cacheKey = resolvedVersion;\n\n      // Load font-face in light DOM (only once per version)\n      if (!KemetIconBootstrap.fontFaceLoaded.get(cacheKey)) {\n        await this._loadFontFaceInDocument(resolvedVersion);\n        KemetIconBootstrap.fontFaceLoaded.set(cacheKey, true);\n      }\n\n      // Load icon classes in shadow DOM\n      let iconSheet = KemetIconBootstrap.iconStylesCache.get(cacheKey);\n\n      if (!iconSheet) {\n        const response = await fetch(\n          `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/bootstrap-icons.min.css`\n        );\n\n        if (!response.ok) {\n          throw new Error(`HTTP error! status: ${response.status}`);\n        }\n\n        let cssText = await response.text();\n\n        // Remove @font-face rules (already in light DOM)\n        cssText = cssText.replace(/@font-face\\s*{[^}]*}/g, '');\n\n        iconSheet = new CSSStyleSheet();\n        await iconSheet.replace(cssText);\n        KemetIconBootstrap.iconStylesCache.set(cacheKey, iconSheet);\n      }\n\n      this.shadowRoot!.adoptedStyleSheets = [\n        ...this.shadowRoot!.adoptedStyleSheets,\n        iconSheet\n      ];\n\n      this.stylesLoaded = true;\n      this.requestUpdate();\n    } catch (error) {\n      console.error('Failed to load Bootstrap Icons:', error);\n      this.requestUpdate();\n    }\n  }\n\n  private async _loadFontFaceInDocument(resolvedVersion: string) {\n    try {\n      const response = await fetch(\n        `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/bootstrap-icons.min.css`\n      );\n\n      if (!response.ok) {\n        throw new Error(`HTTP error! status: ${response.status}`);\n      }\n\n      const cssText = await response.text();\n\n      // Extract ONLY @font-face rules\n      const fontFaceMatches = cssText.match(/@font-face\\s*{[^}]*}/g);\n      if (!fontFaceMatches) return;\n\n      // Fix relative URLs to absolute\n      const baseUrl = `https://unpkg.com/bootstrap-icons@${resolvedVersion}/font/`;\n      let fontFaceCss = fontFaceMatches.join('\\n');\n      fontFaceCss = fontFaceCss.replace(/url\\([\"']?\\.\\/fonts\\//g, `url(\"${baseUrl}fonts/`);\n      fontFaceCss = fontFaceCss.replace(/url\\([\"']?fonts\\//g, `url(\"${baseUrl}fonts/`);\n\n      // Add to document head\n      const styleId = `bootstrap-icons-fonts-${resolvedVersion}`;\n      if (!document.getElementById(styleId)) {\n        const style = document.createElement('style');\n        style.id = styleId;\n        style.textContent = fontFaceCss;\n        document.head.appendChild(style);\n      }\n    } catch (error) {\n      console.error('Failed to load Bootstrap Icons fonts:', error);\n      throw error;\n    }\n  }\n\n  static styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n    }\n  `;\n\n  render() {\n    return html`\n      <i class=\"bi bi-${this.icon}\" style=\"font-size: ${this.size}px;\"></i>\n    `;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAAA,cAAiC;AACjC,IAAAC,qBAA+C;;;ACD/C,iBAAoB;AAEb,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACF1B,IAAAC,cAAsC;AACtC,wBAAwC;AAGxC,IAAqB,qBAArB,cAAgD,uBAAW;AAAA,EAA3D;AAAA;AACc,gBAAe;AACf,mBAAkB;AAClB,gBAAe;AAK3B,SAAQ,eAAe;AAAA;AAAA,EAEvB,MAAM,oBAAoB;AACxB,UAAM,kBAAkB;AACxB,UAAM,KAAK,qBAAqB;AAAA,EAClC;AAAA,EAEA,MAAc,gBAAgB,SAAkC;AAE9D,QAAI,YAAY,YAAY,iBAAiB,KAAK,OAAO,GAAG;AAC1D,aAAO;AAAA,IACT;AAGA,QAAI,mBAAmB,iBAAiB,IAAI,OAAO,GAAG;AACpD,aAAO,mBAAmB,iBAAiB,IAAI,OAAO;AAAA,IACxD;AAEA,QAAI;AAEF,YAAM,WAAW,MAAM,MAAM,gDAAgD;AAC7E,UAAI,CAAC,SAAS,GAAI,OAAM,IAAI,MAAM,2BAA2B;AAE7D,YAAM,MAAM,MAAM,SAAS,KAAK;AAChC,YAAM,kBAAkB,IAAI;AAE5B,yBAAmB,iBAAiB,IAAI,SAAS,eAAe;AAChE,aAAO;AAAA,IACT,SAAS,OAAO;AACd,cAAQ,KAAK,4DAA4D,KAAK;AAC9E,aAAO;AAAA,IACT;AAAA,EACF;AAAA,EAEA,MAAc,uBAAuB;AACnC,QAAI,KAAK,aAAc;AAEvB,QAAI;AAEF,YAAM,kBAAkB,MAAM,KAAK,gBAAgB,KAAK,OAAO;AAC/D,YAAM,WAAW;AAGjB,UAAI,CAAC,mBAAmB,eAAe,IAAI,QAAQ,GAAG;AACpD,cAAM,KAAK,wBAAwB,eAAe;AAClD,2BAAmB,eAAe,IAAI,UAAU,IAAI;AAAA,MACtD;AAGA,UAAI,YAAY,mBAAmB,gBAAgB,IAAI,QAAQ;AAE/D,UAAI,CAAC,WAAW;AACd,cAAM,WAAW,MAAM;AAAA,UACrB,qCAAqC,eAAe;AAAA,QACtD;AAEA,YAAI,CAAC,SAAS,IAAI;AAChB,gBAAM,IAAI,MAAM,uBAAuB,SAAS,MAAM,EAAE;AAAA,QAC1D;AAEA,YAAI,UAAU,MAAM,SAAS,KAAK;AAGlC,kBAAU,QAAQ,QAAQ,yBAAyB,EAAE;AAErD,oBAAY,IAAI,cAAc;AAC9B,cAAM,UAAU,QAAQ,OAAO;AAC/B,2BAAmB,gBAAgB,IAAI,UAAU,SAAS;AAAA,MAC5D;AAEA,WAAK,WAAY,qBAAqB;AAAA,QACpC,GAAG,KAAK,WAAY;AAAA,QACpB;AAAA,MACF;AAEA,WAAK,eAAe;AACpB,WAAK,cAAc;AAAA,IACrB,SAAS,OAAO;AACd,cAAQ,MAAM,mCAAmC,KAAK;AACtD,WAAK,cAAc;AAAA,IACrB;AAAA,EACF;AAAA,EAEA,MAAc,wBAAwB,iBAAyB;AAC7D,QAAI;AACF,YAAM,WAAW,MAAM;AAAA,QACrB,qCAAqC,eAAe;AAAA,MACtD;AAEA,UAAI,CAAC,SAAS,IAAI;AAChB,cAAM,IAAI,MAAM,uBAAuB,SAAS,MAAM,EAAE;AAAA,MAC1D;AAEA,YAAM,UAAU,MAAM,SAAS,KAAK;AAGpC,YAAM,kBAAkB,QAAQ,MAAM,uBAAuB;AAC7D,UAAI,CAAC,gBAAiB;AAGtB,YAAM,UAAU,qCAAqC,eAAe;AACpE,UAAI,cAAc,gBAAgB,KAAK,IAAI;AAC3C,oBAAc,YAAY,QAAQ,0BAA0B,QAAQ,OAAO,QAAQ;AACnF,oBAAc,YAAY,QAAQ,sBAAsB,QAAQ,OAAO,QAAQ;AAG/E,YAAM,UAAU,yBAAyB,eAAe;AACxD,UAAI,CAAC,SAAS,eAAe,OAAO,GAAG;AACrC,cAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,cAAM,KAAK;AACX,cAAM,cAAc;AACpB,iBAAS,KAAK,YAAY,KAAK;AAAA,MACjC;AAAA,IACF,SAAS,OAAO;AACd,cAAQ,MAAM,yCAAyC,KAAK;AAC5D,YAAM;AAAA,IACR;AAAA,EACF;AAAA,EAUA,SAAS;AACP,WAAO;AAAA,wBACa,KAAK,IAAI,uBAAuB,KAAK,IAAI;AAAA;AAAA,EAE/D;AACF;AA5IqB,mBAKJ,iBAAiB,oBAAI,IAAqB;AALtC,mBAMJ,kBAAkB,oBAAI,IAA2B;AAN7C,mBAOJ,mBAAmB,oBAAI,IAAoB;AAPvC,mBA+HZ,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA9HJ;AAAA,MAAX,4BAAS;AAAA,GADS,mBACP;AACA;AAAA,MAAX,4BAAS;AAAA,GAFS,mBAEP;AACA;AAAA,MAAX,4BAAS;AAAA,GAHS,mBAGP;AAHO,qBAArB;AAAA,MADC,iCAAc,sBAAsB;AAAA,GAChB;;;AF0CrB,IAAqB,mBAArB,cAA8C,uBAAW;AAAA,EAAzD;AAAA;AAsBE,yBAAwB;AAAA;AAAA,EAKxB,eAAe;AACb,SAAK,UAAU,KAAK,QAAQ,eAAe;AAAA,EAC7C;AAAA,EAEA,SAAS;AACP,WAAO;AAAA,QACH,KAAK,SAAS,CAAC;AAAA,QACf,KAAK,kBAAkB,CAAC;AAAA,oCACI,KAAK,eAAe,CAAC;AAAA,QACjD,KAAK,gBAAgB,CAAC;AAAA;AAAA,EAE5B;AAAA,EAEA,WAAW;AACT,QAAI,CAAC,KAAK,MAAM;AACd,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,oBAAoB;AAClB,QAAI,KAAK,aAAa,CAAC,KAAK,MAAM;AAChC,aAAO,mFAAuE,MAAM,KAAK,uBAAuB,CAAC;AAAA,IACnH;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,iBAAiB;AACf,QAAI,KAAK,aAAa,CAAC,KAAK,UAAU,CAAC,KAAK,gBAAgB;AAC1D,aAAO;AAAA,mDACsC,KAAK,aAAa;AAAA;AAAA,IAEjE;AAEA,QAAI,CAAC,KAAK,UAAU,CAAC,KAAK,gBAAgB;AACxC,aAAO;AAAA,gBACG,KAAK,IAAI,IAAI,KAAK,SAAS,KAAK;AAAA;AAAA,IAE5C;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,kBAAkB;AAChB,QAAI,CAAC,KAAK,QAAQ;AAChB,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AAAA,EAEA,yBAAyB;AACvB,UAAM,aAAa,KAAK,QAAQ,cAAc,WAAW,EAAE,WAAW,cAAc,MAAM;AAE1F,QAAI,YAAY;AACd,iBAAW,UAAU,IAAI,SAAS;AAAA,IACpC;AAAA,EACF;AACF;AAvFqB,iBACZ,SAAS,CAAC,UAAU;AAG3B;AAAA,MADC,6BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAHP,iBAInB;AAGA;AAAA,MADC,6BAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GANvB,iBAOnB;AAGA;AAAA,MADC,6BAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GATvB,iBAUnB;AAGA;AAAA,MADC,6BAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAZvB,iBAanB;AAGA;AAAA,MADC,6BAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAfvB,iBAgBnB;AAGA;AAAA,MADC,6BAAS,EAAE,MAAM,SAAS,SAAS,MAAM,WAAW,mBAAmB,CAAC;AAAA,GAlBtD,iBAmBnB;AAGA;AAAA,MADC,6BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GArBP,iBAsBnB;AAGA;AAAA,MADC,0BAAM;AAAA,GAxBY,iBAyBnB;AAzBmB,mBAArB;AAAA,MADC,kCAAc,oBAAoB;AAAA,GACd;","names":["import_lit","import_decorators","import_lit"]}

package/dist/elements/tracker-step.mjs

@@ -0,0 +1,9 @@
+import {
+  KemetTrackerStep
+} from "../chunk-AEMR7XYR.mjs";
+import "../chunk-7DJKARFX.mjs";
+import "../chunk-SAWN7RJP.mjs";
+export {
+  KemetTrackerStep as default
+};
+//# sourceMappingURL=tracker-step.mjs.map

package/dist/elements/tracker-step.mjs.map

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

package/dist/elements/tracker.d.mts

@@ -0,0 +1,3 @@
+import 'lit-html';
+import 'lit';
+export { K as default } from '../tracker-step-DkA-T98W.mjs';

package/dist/elements/tracker.d.ts

@@ -0,0 +1,3 @@
+import 'lit-html';
+import 'lit';
+export { K as default } from '../tracker-step-DkA-T98W.js';

package/dist/elements/tracker.js

@@ -0,0 +1,88 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/elements/tracker.ts
+var tracker_exports = {};
+__export(tracker_exports, {
+  default: () => KemetTracker
+});
+module.exports = __toCommonJS(tracker_exports);
+var import_lit = require("lit");
+var import_decorators = require("lit/decorators.js");
+var KemetTracker = class extends import_lit.LitElement {
+  constructor() {
+    super();
+    this.breakpoint = "767px";
+  }
+  firstUpdated() {
+    this.steps = this.querySelectorAll("kemet-tracker-step");
+    this.isMobile();
+    window.addEventListener("resize", () => {
+      this.isMobile();
+    });
+  }
+  render() {
+    return import_lit.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 = [
+  import_lit.css`
+      :host {
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        width: 100%;
+      }
+    `
+];
+__decorateClass([
+  (0, import_decorators.property)({ type: Number })
+], KemetTracker.prototype, "total", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], KemetTracker.prototype, "breakpoint", 2);
+__decorateClass([
+  (0, import_decorators.state)()
+], KemetTracker.prototype, "steps", 2);
+KemetTracker = __decorateClass([
+  (0, import_decorators.customElement)("kemet-tracker")
+], KemetTracker);
+//# sourceMappingURL=tracker.js.map

package/dist/elements/tracker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/elements/tracker.ts"],"sourcesContent":["import { html, css, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport type KemetTrackerStep from './tracker-step';\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: NodeListOf<KemetTrackerStep>;\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAsC;AACtC,wBAA+C;AAc/C,IAAqB,eAArB,cAA0C,sBAAW;AAAA,EAqBnD,cAAc;AACZ,UAAM;AACN,SAAK,aAAa;AAAA,EACpB;AAAA,EAEA,eAAe;AAEb,SAAK,QAAQ,KAAK,iBAAiB,oBAAoB;AAGvD,SAAK,SAAS;AAGd,WAAO,iBAAiB,UAAU,MAAM;AACtC,WAAK,SAAS;AAAA,IAChB,CAAC;AAAA,EACH;AAAA,EAEA,SAAS;AACP,WAAO,oCAAyB,MAAM,KAAK,iBAAiB,CAAC;AAAA,EAC/D;AAAA,EAEA,mBAAmB;AACjB,SAAK,QAAQ,KAAK,MAAM;AAExB,SAAK,MAAM,QAAQ,CAAC,MAAM,UAAU;AAClC,WAAK,OAAO,QAAQ;AACpB,UAAI,KAAK,SAAS,KAAK,OAAO;AAC5B,aAAK,OAAO;AAAA,MACd;AAAA,IACF,CAAC;AAAA,EACH;AAAA,EAEA,WAAW;AACT,UAAM,aAAa,OAAO,WAAW,eAAe,KAAK,UAAU,GAAG;AAEtE,SAAK,MAAM,QAAQ,CAAC,SAAS;AAC3B,WAAK,SAAS,WAAW;AAAA,IAC3B,CAAC;AAAA,EACH;AACF;AA7DqB,aACZ,SAAS;AAAA,EACd;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQF;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZP,aAanB;AAGA;AAAA,MADC,4BAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAfP,aAgBnB;AAGA;AAAA,MADC,yBAAM;AAAA,GAlBY,aAmBnB;AAnBmB,eAArB;AAAA,MADC,iCAAc,eAAe;AAAA,GACT;","names":[]}

package/dist/elements/tracker.mjs

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

package/dist/elements/tracker.mjs.map

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