@getflip/swirl-components 0.2.0 → 0.3.0

package/dist/esm/flip-switch.entry.js

@@ -1,5 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-64709274.js';
-import { c as classnames } from './index-3c78bcaf.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5a3b2828.js';
+import { c as classnames } from './index-6d2e18c6.js';
+import './_commonjsHelpers-44457d8d.js';
 
 const flipSwitchCss = ".sc-flip-switch-h{display:inline-flex}.sc-flip-switch-h *.sc-flip-switch{box-sizing:border-box}.switch.sc-flip-switch{display:inline-flex;align-items:center;touch-action:none}.switch.sc-flip-switch:focus-within .switch__control.sc-flip-switch{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.switch--size-m.sc-flip-switch .switch__control.sc-flip-switch{width:2.75rem;height:1.5rem;border-radius:calc(1.5rem / 2)}.switch--size-m.sc-flip-switch .switch__thumb.sc-flip-switch{width:1.25rem;height:1.25rem}.switch--on.switch--size-m.sc-flip-switch .switch__thumb.sc-flip-switch{left:calc(100% - 1.25rem - var(--s-space-2))}.switch--on.sc-flip-switch .switch__control.sc-flip-switch{background-color:var(--s-interactive-primary-default)}.switch--on.sc-flip-switch .switch__thumb.sc-flip-switch{left:calc(100% - 0.875rem - var(--s-space-2))}.switch--disabled.sc-flip-switch .switch__control.sc-flip-switch{background-color:var(--s-interactive-primary-disabled);cursor:default}.switch--disabled.sc-flip-switch .switch__thumb.sc-flip-switch{background-color:var(--s-interactive-neutral-default)}.switch--disabled.sc-flip-switch .switch__label.sc-flip-switch{color:var(--s-text-disabled)}.switch__control.sc-flip-switch{position:relative;width:1.875rem;height:1.125rem;flex-shrink:0;border-radius:calc(1.125rem / 2);background-color:var(--s-interactive-primary-disabled);cursor:pointer;transition:background-color 0.2s}@media (prefers-reduced-motion){.switch__control.sc-flip-switch{transition:none}}.switch__thumb.sc-flip-switch{position:absolute;top:var(--s-space-2);left:var(--s-space-2);width:0.875rem;height:0.875rem;border-radius:50%;background-color:var(--s-surface-default);transition:left 0.2s;pointer-events:none}@media (prefers-reduced-motion){.switch__thumb.sc-flip-switch{transition:none}}.switch__label.sc-flip-switch{position:relative;z-index:1;margin-left:var(--s-space-12);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base)}";
 
@@ -86,3 +87,5 @@ const FlipSwitch = class {
 FlipSwitch.style = flipSwitchCss;
 
 export { FlipSwitch as flip_switch };
+
+//# sourceMappingURL=flip-switch.entry.js.map

package/dist/esm/flip-switch.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-switch.entry.js","mappings":"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","names":[],"sources":["./src/components/flip-switch/flip-switch.css?tag=flip-switch&encapsulation=scoped","./src/components/flip-switch/flip-switch.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.switch {\n  display: inline-flex;\n  align-items: center;\n  touch-action: none;\n\n  &:focus-within .switch__control {\n    box-shadow: 0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default);\n  }\n}\n\n.switch--size-m {\n  & .switch__control {\n    width: 2.75rem;\n    height: 1.5rem;\n    border-radius: calc(1.5rem / 2);\n  }\n\n  & .switch__thumb {\n    width: 1.25rem;\n    height: 1.25rem;\n  }\n}\n\n.switch--on {\n  &.switch--size-m {\n    & .switch__thumb {\n      left: calc(100% - 1.25rem - var(--s-space-2));\n    }\n  }\n\n  & .switch__control {\n    background-color: var(--s-interactive-primary-default);\n  }\n\n  & .switch__thumb {\n    left: calc(100% - 0.875rem - var(--s-space-2));\n  }\n}\n\n.switch--disabled {\n  & .switch__control {\n    background-color: var(--s-interactive-primary-disabled);\n    cursor: default;\n  }\n\n  & .switch__thumb {\n    background-color: var(--s-interactive-neutral-default);\n  }\n\n  & .switch__label {\n    color: var(--s-text-disabled);\n  }\n}\n\n.switch__control {\n  position: relative;\n  width: 1.875rem;\n  height: 1.125rem;\n  flex-shrink: 0;\n  border-radius: calc(1.125rem / 2);\n  background-color: var(--s-interactive-primary-disabled);\n  cursor: pointer;\n  transition: background-color 0.2s;\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n  }\n}\n\n.switch__thumb {\n  position: absolute;\n  top: var(--s-space-2);\n  left: var(--s-space-2);\n  width: 0.875rem;\n  height: 0.875rem;\n  border-radius: 50%;\n  background-color: var(--s-surface-default);\n  transition: left 0.2s;\n  pointer-events: none;\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n  }\n}\n\n.switch__label {\n  position: relative;\n  z-index: 1;\n  margin-left: var(--s-space-12);\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-base);\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipSwitchSize = \"s\" | \"m\";\n\n@Component({\n  /**\n   * Form controls in shadow dom can still not be associated with labels in the\n   * light dom, cross browser. So for now we disable shadow dom for form\n   * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n   * https://caniuse.com/?search=attachInternals\n   */\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-switch.css\",\n  tag: \"flip-switch\",\n})\nexport class FlipSwitch {\n  @Element() el: HTMLElement;\n\n  @Prop({ mutable: true }) checked?: boolean = false;\n  @Prop() disabled?: boolean = false;\n  @Prop() inputId!: string;\n  @Prop() inputName!: string;\n  @Prop() label?: string;\n  @Prop() size?: FlipSwitchSize = \"m\";\n  @Prop() value?: string;\n\n  @Event() valueChange: EventEmitter<boolean>;\n\n  private control: HTMLElement;\n  private dragging = false;\n  private recentlyDragged = false;\n  private thumb: HTMLElement;\n\n  @Listen(\"pointerup\", { target: \"window\" })\n  onWindowPointerUp() {\n    this.onEndDrag();\n  }\n\n  private onChange = () => {\n    if (this.dragging) {\n      return;\n    }\n\n    if (this.recentlyDragged) {\n      this.recentlyDragged = false;\n      return;\n    }\n\n    this.checked = !this.checked;\n    this.valueChange.emit(this.checked);\n  };\n\n  private onStartDrag = () => {\n    if (this.disabled) {\n      return;\n    }\n\n    this.dragging = true;\n    this.thumb.style.transition = \"none\";\n  };\n\n  private onEndDrag = () => {\n    if (this.disabled) {\n      return;\n    }\n\n    if (this.recentlyDragged) {\n      const controlBonds = this.control.getBoundingClientRect();\n      const thumbBounds = this.thumb.getBoundingClientRect();\n\n      const on =\n        this.thumb.offsetLeft + thumbBounds.width / 2 > controlBonds.width / 2;\n\n      if (this.checked !== on) {\n        this.checked = on;\n        this.valueChange.emit(on);\n      }\n    }\n\n    this.thumb.style.left = \"\";\n    this.thumb.style.transition = \"\";\n\n    this.dragging = false;\n\n    setTimeout(() => {\n      this.recentlyDragged = false;\n    });\n  };\n\n  private onDrag = (event: PointerEvent) => {\n    if (!this.dragging) {\n      return;\n    }\n\n    this.recentlyDragged = true;\n\n    const controlBonds = this.control.getBoundingClientRect();\n    const thumbBounds = this.thumb.getBoundingClientRect();\n\n    let pos = Math.round(event.offsetX - thumbBounds.width / 2);\n\n    if (pos < 0) {\n      pos = 0;\n    }\n\n    if (pos > Math.round(controlBonds.width - thumbBounds.width)) {\n      pos = Math.round(controlBonds.width - thumbBounds.width);\n    }\n\n    this.thumb.style.left = `${pos}px`;\n  };\n\n  render() {\n    const off = !this.checked;\n    const on = this.checked;\n\n    const ariaCheckedLabel = on ? \"true\" : \"false\";\n\n    const className = classnames(\"switch\", `switch--size-${this.size}`, {\n      \"switch--off\": off,\n      \"switch--on\": on,\n      \"switch--disabled\": this.disabled,\n    });\n\n    return (\n      <Host>\n        <label class={className} htmlFor={this.inputId}>\n          <span\n            class=\"switch__control\"\n            onPointerDown={this.onStartDrag}\n            onPointerMove={this.onDrag}\n            onPointerUp={this.onEndDrag}\n            ref={(el) => (this.control = el)}\n          >\n            <flip-visually-hidden>\n              <input\n                aria-checked={ariaCheckedLabel}\n                checked={on}\n                class=\"switch__input\"\n                disabled={this.disabled}\n                id={this.inputId}\n                name={this.inputName}\n                onChange={this.onChange}\n                role=\"switch\"\n                type=\"checkbox\"\n                value={this.value}\n              />\n            </flip-visually-hidden>\n            <span\n              aria-hidden=\"true\"\n              class=\"switch__thumb\"\n              ref={(el) => (this.thumb = el)}\n            ></span>\n          </span>\n          {this.label && <span class=\"switch__label\">{this.label}</span>}\n        </label>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/flip-tab.entry.js

@@ -1,5 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-64709274.js';
-import { c as classnames } from './index-3c78bcaf.js';
+import { r as registerInstance, h, H as Host } from './index-5a3b2828.js';
+import { c as classnames } from './index-6d2e18c6.js';
+import './_commonjsHelpers-44457d8d.js';
 
 const flipTabCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.tab{display:none;width:100%;padding:var(--s-space-8)}.tab--active{display:block}";
 
@@ -15,3 +16,5 @@ const FlipTab = class {
 FlipTab.style = flipTabCss;
 
 export { FlipTab as flip_tab };
+
+//# sourceMappingURL=flip-tab.entry.js.map

package/dist/esm/flip-tab.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-tab.entry.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,gJAAgJ;;MCQtJ,OAAO;;;;EAKlB,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAEpE,QACE,EAAC,IAAI,uBACc,OAAO,IAAI,CAAC,KAAK,EAAE,EACpC,EAAE,EAAE,IAAI,CAAC,KAAK,EACd,IAAI,EAAC,UAAU,EACf,QAAQ,EAAE,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,CAAC,CAAC,IAE9B,WAAK,KAAK,EAAE,SAAS,IACnB,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/flip-tab/flip-tab.css?tag=flip-tab&encapsulation=shadow","./src/components/flip-tab/flip-tab.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.tab {\n  display: none;\n  width: 100%;\n  padding: var(--s-space-8);\n}\n\n.tab--active {\n  display: block;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-tab.css\",\n  tag: \"flip-tab\",\n})\nexport class FlipTab {\n  @Prop() active?: boolean;\n  @Prop() label!: string;\n  @Prop() tabId!: string;\n\n  render() {\n    const className = classnames(\"tab\", { \"tab--active\": this.active });\n\n    return (\n      <Host\n        aria-labelledby={`tab-${this.tabId}`}\n        id={this.tabId}\n        role=\"tabpanel\"\n        tabIndex={this.active ? 0 : -1}\n      >\n        <div class={className}>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/flip-tabs.entry.js

@@ -1,5 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-64709274.js';
-import { c as classnames } from './index-3c78bcaf.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-5a3b2828.js';
+import { c as classnames } from './index-6d2e18c6.js';
+import './_commonjsHelpers-44457d8d.js';
 
 const flipTabsCss = ".sc-flip-tabs-h{display:block;width:100%}.sc-flip-tabs-h *.sc-flip-tabs{box-sizing:border-box}.tabs.sc-flip-tabs{width:100%}.tabs__tab-bar.sc-flip-tabs{position:relative;display:flex;width:100%;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}@media (--from-tablet){.tabs__tab-bar.sc-flip-tabs{padding-right:0;padding-left:0}}.tabs__tab.sc-flip-tabs{display:block;min-width:0;margin:0;padding:var(--s-space-4) 0;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tabs__tab.sc-flip-tabs:focus-visible{outline:none}.tabs__tab.sc-flip-tabs:focus-visible .tabs__tab-label.sc-flip-tabs{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tabs__tab.sc-flip-tabs:not(:first-of-type){padding-left:var(--s-space-8)}.tabs__tab.sc-flip-tabs:not(:last-of-type){padding-right:var(--s-space-8)}.tabs__tab-label.sc-flip-tabs{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tabs__tab--active.sc-flip-tabs{color:var(--s-text-highlight)}.tabs__indicator.sc-flip-tabs{position:absolute;bottom:0;left:0;width:0;height:0.125rem;border-radius:0.0625rem;background-color:var(--s-border-highlight);transition:background-color 0.15s, transform 0.15s, width 0.15s;transform:translate3d(0, 0, 0);pointer-events:none}@media (prefers-reduced-motion){.tabs__indicator.sc-flip-tabs{transition:none}}";
 
@@ -118,3 +119,5 @@ const FlipTabs = class {
 FlipTabs.style = flipTabsCss;
 
 export { FlipTabs as flip_tabs };
+
+//# sourceMappingURL=flip-tabs.entry.js.map

package/dist/esm/flip-tabs.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-tabs.entry.js","mappings":"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","names":[],"sources":["./src/components/flip-tabs/flip-tabs.css?tag=flip-tabs&encapsulation=scoped","./src/components/flip-tabs/flip-tabs.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.tabs {\n  width: 100%;\n}\n\n.tabs__tab-bar {\n  position: relative;\n  display: flex;\n  width: 100%;\n  padding-right: var(--s-space-16);\n  padding-left: var(--s-space-16);\n  justify-content: flex-start;\n  border-bottom: var(--s-border-width-default) solid var(--s-border-default);\n\n  @media (--from-tablet) {\n    padding-right: 0;\n    padding-left: 0;\n  }\n}\n\n.tabs__tab {\n  display: block;\n  min-width: 0;\n  margin: 0;\n  padding: var(--s-space-4) 0;\n  border: none;\n  background-color: transparent;\n  font: inherit;\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-base);\n  cursor: pointer;\n\n  &:focus-visible {\n    outline: none;\n\n    & .tabs__tab-label {\n      border-radius: var(--s-border-radius-s);\n      box-shadow: inset 0 0 0 0.125rem var(--s-focus-default);\n    }\n  }\n\n  &:not(:first-of-type) {\n    padding-left: var(--s-space-8);\n  }\n\n  &:not(:last-of-type) {\n    padding-right: var(--s-space-8);\n  }\n}\n\n.tabs__tab-label {\n  display: block;\n  overflow: hidden;\n  width: 100%;\n  padding: var(--s-space-8) var(--s-space-8);\n  text-align: center;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.tabs__tab--active {\n  color: var(--s-text-highlight);\n}\n\n.tabs__indicator {\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: 0;\n  height: 0.125rem;\n  border-radius: 0.0625rem;\n  background-color: var(--s-border-highlight);\n  transition: background-color 0.15s, transform 0.15s, width 0.15s;\n  transform: translate3d(0, 0, 0);\n  pointer-events: none;\n\n  @media (prefers-reduced-motion) {\n    transition: none;\n  }\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Method,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\n@Component({\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-tabs.css\",\n  tag: \"flip-tabs\",\n})\nexport class FlipTabs {\n  @Element() el: HTMLElement;\n\n  @Prop() initialTab?: string;\n  @Prop() label!: string;\n\n  @State() activeTab?: string;\n  @State() highlightedTab: HTMLElement | undefined;\n\n  @Event() tabActivated: EventEmitter<HTMLFlipTabElement>;\n\n  private indicatorEl: HTMLElement;\n  private tabs: HTMLFlipTabElement[] = [];\n\n  componentWillLoad() {\n    this.collectTabs();\n  }\n\n  componentDidRender() {\n    this.updateIndicatorPosition();\n  }\n\n  @Listen(\"resize\", { target: \"window\" })\n  onWindowResize() {\n    this.updateIndicatorPosition();\n  }\n\n  /**\n   * Activate a tab.\n   * @param tabId\n   */\n  @Method()\n  public async activateTab(tabId: string) {\n    if (this.activeTab === tabId) {\n      return;\n    }\n\n    this.activeTab = tabId;\n    this.tabs.forEach((tab) => (tab.active = false));\n\n    const tab = this.tabs.find((tab) => tab.tabId === tabId);\n\n    if (!Boolean(tab)) {\n      return;\n    }\n\n    this.highlightedTab = undefined;\n\n    tab.active = true;\n    this.tabActivated.emit(tab);\n  }\n\n  private activateNextTab() {\n    const currentIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.activeTab\n    );\n\n    const nextIndex = Math.min(this.tabs.length - 1, currentIndex + 1);\n\n    this.activateTab(this.tabs[nextIndex].tabId);\n\n    requestAnimationFrame(() => {\n      this.el.querySelector<HTMLButtonElement>(\".tabs__tab--active\")?.focus();\n    });\n  }\n\n  private activatePreviousTab() {\n    const currentIndex = this.tabs.findIndex(\n      (tab) => tab.tabId === this.activeTab\n    );\n\n    const previousIndex = Math.max(0, currentIndex - 1);\n\n    this.activateTab(this.tabs[previousIndex].tabId);\n\n    requestAnimationFrame(() => {\n      this.el.querySelector<HTMLButtonElement>(\".tabs__tab--active\")?.focus();\n    });\n  }\n\n  private collectTabs() {\n    this.tabs = Array.from(this.el.querySelectorAll(\"flip-tab\"));\n\n    if (this.tabs.length === 0) {\n      return;\n    }\n\n    const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);\n\n    this.activateTab(\n      Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId\n    );\n  }\n\n  private updateIndicatorPosition() {\n    const activeTab = this.tabs.find((tab) => tab.tabId === this.activeTab);\n\n    if (!Boolean(activeTab) && !Boolean(this.highlightedTab)) {\n      this.indicatorEl.style.width = \"\";\n      this.indicatorEl.style.transform = \"\";\n      this.indicatorEl.style.backgroundColor = \"\";\n      return;\n    }\n\n    const activeTabEl =\n      this.highlightedTab ||\n      this.el.querySelector<HTMLButtonElement>(`#tab-${activeTab.tabId}`);\n\n    const activeTabLabelEl =\n      activeTabEl.querySelector<HTMLSpanElement>(\".tabs__tab-label\");\n\n    this.indicatorEl.style.width = `${\n      activeTabLabelEl.getBoundingClientRect().width / 16\n    }rem`;\n\n    this.indicatorEl.style.transform = `translate3d(${\n      activeTabLabelEl.offsetLeft / 16\n    }rem, 0, 0)`;\n\n    this.indicatorEl.style.backgroundColor = Boolean(this.highlightedTab)\n      ? \"var(--s-border-default)\"\n      : \"\";\n  }\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (event.code === \"ArrowLeft\") {\n      event.preventDefault();\n      this.activatePreviousTab();\n    } else if (event.code === \"ArrowRight\") {\n      event.preventDefault();\n      this.activateNextTab();\n    }\n  };\n\n  private onMouseEnter = (event: MouseEvent, tab: HTMLFlipTabElement) => {\n    if (tab.tabId === this.activeTab) {\n      this.highlightedTab = undefined;\n      return;\n    }\n\n    this.highlightedTab =\n      (event.target as HTMLElement).closest(\".tabs__tab\") || undefined;\n  };\n\n  private onMouseLeave = () => {\n    this.highlightedTab = undefined;\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"tabs\">\n          <div\n            aria-label={this.label}\n            class=\"tabs__tab-bar\"\n            onKeyDown={this.onKeyDown}\n            role=\"tablist\"\n          >\n            {this.tabs.map((tab) => {\n              const isActive = tab.tabId === this.activeTab;\n              const className = classnames(\"tabs__tab\", {\n                \"tabs__tab--active\": isActive,\n              });\n\n              return (\n                <button\n                  aria-controls={tab.tabId}\n                  aria-selected={isActive ? \"true\" : \"false\"}\n                  class={className}\n                  id={`tab-${tab.tabId}`}\n                  key={tab.tabId}\n                  // eslint-disable-next-line react/jsx-no-bind\n                  onClick={() => this.activateTab(tab.tabId)}\n                  // eslint-disable-next-line react/jsx-no-bind\n                  onMouseEnter={(event) => this.onMouseEnter(event, tab)}\n                  onMouseLeave={this.onMouseLeave}\n                  role=\"tab\"\n                  tabIndex={isActive ? 0 : -1}\n                  type=\"button\"\n                >\n                  <span class=\"tabs__tab-label\">{tab.label}</span>\n                </button>\n              );\n            })}\n\n            <span\n              class=\"tabs__indicator\"\n              ref={(el) => (this.indicatorEl = el)}\n            ></span>\n          </div>\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/flip-tag.entry.js

@@ -1,5 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-64709274.js';
-import { c as classnames } from './index-3c78bcaf.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-5a3b2828.js';
+import { c as classnames } from './index-6d2e18c6.js';
+import './_commonjsHelpers-44457d8d.js';
 
 const flipTagCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.tag{display:inline-flex;padding:var(--s-space-2) var(--s-space-8);align-items:center;border-radius:var(--s-border-radius-s);color:var(--s-text-default);background-color:var(--s-surface-neutral-subdued);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}.tag--intent-info{color:var(--s-text-info);background-color:var(--s-surface-info-subdued)}.tag--intent-info .tag__removal-button{color:var(--icon-info)}.tag--intent-critical{color:var(--s-text-critical);background-color:var(--s-surface-critical-subdued)}.tag--intent-critical .tag__removal-button{color:var(--icon-critical)}.tag--intent-warning{color:var(--s-text-warning);background-color:var(--s-surface-warning-subdued)}.tag--intent-warning .tag__removal-button{color:var(--icon-warning)}.tag--intent-success{color:var(--s-text-success);background-color:var(--s-surface-success-subdued)}.tag--intent-success .tag__removal-button{color:var(--icon-success)}.tag__removal-button{display:inline-flex;margin-right:calc(-1 * var(--s-space-4));padding:0;border:none;color:var(--s-icon-strong);background-color:transparent;cursor:pointer}.tag__removal-button:focus{outline-color:var(--s-focus-default)}";
 
@@ -22,3 +23,5 @@ const FlipTag = class {
 FlipTag.style = flipTagCss;
 
 export { FlipTag as flip_tag };
+
+//# sourceMappingURL=flip-tag.entry.js.map

package/dist/esm/flip-tag.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-tag.entry.js","mappings":";;;;AAAA,MAAM,UAAU,GAAG,uwCAAuwC;;MCe7wC,OAAO;EALpB;;;IAMU,WAAM,GAAmB,SAAS,CAAC;IAGnC,uBAAkB,GAAY,QAAQ,CAAC;IAIvC,aAAQ,GAAG,CAAC,KAAiB;;MACnC,MAAA,IAAI,CAAC,MAAM,0CAAE,IAAI,CAAC,KAAK,CAAC,CAAC;KAC1B,CAAC;GAuBH;EArBC,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,EAAE,eAAe,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAElE,QACE,EAAC,IAAI,QACH,YAAM,KAAK,EAAE,SAAS,IACnB,IAAI,CAAC,KAAK,EACV,IAAI,CAAC,SAAS,KACb,4BACc,IAAI,CAAC,kBAAkB,EACnC,KAAK,EAAC,qBAAqB,EAC3B,OAAO,EAAE,IAAI,CAAC,QAAQ,EACtB,IAAI,EAAC,QAAQ,IAEb,uBAAiB,IAAI,EAAE,EAAE,GAAoB,CACtC,CACV,CACI,CACF,EACP;GACH;;;;;;","names":[],"sources":["./src/components/flip-tag/flip-tag.css?tag=flip-tag&encapsulation=shadow","./src/components/flip-tag/flip-tag.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.tag {\n  display: inline-flex;\n  padding: var(--s-space-2) var(--s-space-8);\n  align-items: center;\n  border-radius: var(--s-border-radius-s);\n  color: var(--s-text-default);\n  background-color: var(--s-surface-neutral-subdued);\n  font-size: var(--s-font-size-sm);\n  font-weight: var(--s-font-weight-medium);\n  line-height: var(--s-line-height-sm);\n  gap: var(--s-space-4);\n}\n\n.tag--intent-info {\n  color: var(--s-text-info);\n  background-color: var(--s-surface-info-subdued);\n\n  & .tag__removal-button {\n    color: var(--icon-info);\n  }\n}\n\n.tag--intent-critical {\n  color: var(--s-text-critical);\n  background-color: var(--s-surface-critical-subdued);\n\n  & .tag__removal-button {\n    color: var(--icon-critical);\n  }\n}\n\n.tag--intent-warning {\n  color: var(--s-text-warning);\n  background-color: var(--s-surface-warning-subdued);\n\n  & .tag__removal-button {\n    color: var(--icon-warning);\n  }\n}\n\n.tag--intent-success {\n  color: var(--s-text-success);\n  background-color: var(--s-surface-success-subdued);\n\n  & .tag__removal-button {\n    color: var(--icon-success);\n  }\n}\n\n.tag__removal-button {\n  display: inline-flex;\n  margin-right: calc(-1 * var(--s-space-4));\n  padding: 0;\n  border: none;\n  color: var(--s-icon-strong);\n  background-color: transparent;\n  cursor: pointer;\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n}\n","import { Component, Event, EventEmitter, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipTagIntent =\n  | \"default\"\n  | \"critical\"\n  | \"warning\"\n  | \"success\"\n  | \"info\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-tag.css\",\n  tag: \"flip-tag\",\n})\nexport class FlipTag {\n  @Prop() intent?: FlipTagIntent = \"default\";\n  @Prop() label!: string;\n  @Prop() removable?: boolean;\n  @Prop() removalButtonLabel?: string = \"Remove\";\n\n  @Event() remove?: EventEmitter<MouseEvent>;\n\n  private onRemove = (event: MouseEvent) => {\n    this.remove?.emit(event);\n  };\n\n  render() {\n    const className = classnames(\"tag\", `tag--intent-${this.intent}`);\n\n    return (\n      <Host>\n        <span class={className}>\n          {this.label}\n          {this.removable && (\n            <button\n              aria-label={this.removalButtonLabel}\n              class=\"tag__removal-button\"\n              onClick={this.onRemove}\n              type=\"button\"\n            >\n              <flip-icon-close size={16}></flip-icon-close>\n            </button>\n          )}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/flip-text-input.entry.js

@@ -0,0 +1,127 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-5a3b2828.js';
+import { c as classnames } from './index-6d2e18c6.js';
+import './_commonjsHelpers-44457d8d.js';
+
+const flipTextInputCss = ".sc-flip-text-input-h{display:block;width:100%}.sc-flip-text-input-h *.sc-flip-text-input{box-sizing:border-box}.text-input.sc-flip-text-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);font:inherit;line-height:var(--s-line-height-sm)}.text-input--clearable.sc-flip-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--type-number.sc-flip-text-input{padding-right:calc(1.5rem + var(--s-space-8))}.text-input--show-password.sc-flip-text-input .text-input__input.sc-flip-text-input{width:100%}.text-input--disabled.sc-flip-text-input .text-input__character-counter.sc-flip-text-input{color:var(--s-text-disabled)}.text-input__input.sc-flip-text-input{display:inline-flex;width:100%;max-height:13.75rem;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);resize:none;caret-color:var(--s-border-highlight)}.text-input__input.sc-flip-text-input:focus{outline:none}.text-input__input.sc-flip-text-input:disabled{color:var(--s-text-disabled);background-color:transparent}.text-input__input.sc-flip-text-input::-webkit-outer-spin-button,.text-input__input.sc-flip-text-input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.text-input__input[type=\"number\"].sc-flip-text-input{-moz-appearance:textfield}input.text-input__input.sc-flip-text-input:not([type=\"password\"]){width:0.25rem;min-width:0.25rem}.text-input__clear-button.sc-flip-text-input,.text-input__password-toggle.sc-flip-text-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__clear-button.sc-flip-text-input:focus,.text-input__password-toggle.sc-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__stepper.sc-flip-text-input{position:absolute;top:-1.4375rem;right:0;display:flex;flex-direction:column}.text-input__step-button.sc-flip-text-input{display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.text-input__step-button.sc-flip-text-input:focus{outline-color:var(--s-focus-default)}.text-input__character-counter.sc-flip-text-input{position:absolute;top:-1.375rem;right:0;display:flex;color:var(--s-text-subdued);line-height:var(--s-line-height-sm);flex-direction:column}.text-input__prefix.sc-flip-text-input{padding-right:var(--s-space-4);font-size:var(--s-font-size-base)}.text-input__suffix.sc-flip-text-input{padding-left:var(--s-space-4);font-size:var(--s-font-size-base)}";
+
+const FlipTextInput = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.autoComplete = "on";
+    this.clearButtonLabel = "Clear input";
+    this.rows = 1;
+    this.passwordToggleLabel = "Toggle password display";
+    this.type = "text";
+    this.showPassword = false;
+    this.clear = () => {
+      this.inputEl.value = "";
+      this.value = "";
+      this.valueChange.emit("");
+      this.inputEl.focus();
+    };
+    this.onChange = (event) => {
+      const el = event.target;
+      this.value = el.value;
+      this.valueChange.emit(el.value);
+    };
+    this.onFocus = (event) => {
+      this.handleAutoSelect(event);
+    };
+    this.onInput = (event) => {
+      this.onChange(event);
+    };
+    this.onKeyPress = (event) => {
+      if (this.type !== "number") {
+        return;
+      }
+      if (["+", "-", "e"].includes(event.key)) {
+        event.preventDefault();
+      }
+    };
+    this.decreaseValue = () => {
+      if (this.type !== "number") {
+        return;
+      }
+      const step = this.step || 1;
+      const currentValue = isNaN(this.inputEl.valueAsNumber)
+        ? this.min !== undefined
+          ? this.min + 1
+          : 1
+        : this.inputEl.valueAsNumber;
+      this.value = String(Math.max(this.min || -Infinity, currentValue - step));
+      this.valueChange.emit(this.value);
+    };
+    this.increaseValue = () => {
+      if (this.type !== "number") {
+        return;
+      }
+      const step = this.step || 1;
+      const currentValue = isNaN(this.inputEl.valueAsNumber)
+        ? this.min !== undefined
+          ? this.min - 1
+          : -1
+        : this.inputEl.valueAsNumber;
+      this.value = String(Math.min(this.max || Infinity, currentValue + step));
+      this.valueChange.emit(this.value);
+    };
+    this.togglePassword = () => {
+      if (this.type !== "password") {
+        return;
+      }
+      this.showPassword = !this.showPassword;
+    };
+  }
+  componentDidRender() {
+    this.adjustInputSize();
+  }
+  adjustInputSize() {
+    if (this.rows > 1) {
+      this.inputEl.style.width = "";
+      this.inputEl.style.height = "";
+      this.inputEl.style.height = this.inputEl.scrollHeight / 16 + "rem";
+    }
+    if (this.rows === 1) {
+      this.inputEl.style.height = "";
+      this.inputEl.style.width = "";
+      if (this.type !== "password") {
+        this.inputEl.style.width = this.inputEl.scrollWidth / 16 + "rem";
+      }
+    }
+  }
+  handleAutoSelect(event) {
+    if (!this.autoSelect) {
+      return;
+    }
+    event.target.select();
+  }
+  render() {
+    var _a;
+    const Tag = this.rows === 1 ? "input" : "textarea";
+    const ariaInvalid = this.invalid === true
+      ? "true"
+      : this.invalid === false
+        ? "false"
+        : undefined;
+    const showStepper = this.type === "number" && !this.disabled;
+    const showPasswordToggle = this.type === "password" && !this.disabled;
+    const showClearButton = this.clearable &&
+      !this.disabled &&
+      Boolean(this.value) &&
+      !showPasswordToggle &&
+      !showStepper &&
+      !this.showCharacterCounter;
+    const type = this.type === "password" && this.showPassword ? "text" : this.type;
+    const className = classnames("text-input", `text-input--type-${this.type}`, {
+      "text-input--clearable": this.clearable,
+      "text-input--disabled": this.disabled,
+      "text-input--show-password": this.type === "password" && this.showPassword,
+    });
+    return (h(Host, null, h("div", { class: className }, this.prefixLabel && (h("span", { class: "text-input__prefix" }, this.prefixLabel)), h(Tag, { "aria-describedby": this.flipAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoComplete: this.autoComplete, autoFocus: this.autoFocus, class: "text-input__input", disabled: this.disabled, inputMode: this.mode, maxLength: this.maxLength, max: this.type === "number" ? this.max : undefined, min: this.type === "number" ? this.min : undefined, onFocus: this.onFocus, onInput: this.onInput, onKeyPress: this.onKeyPress, ref: (el) => (this.inputEl = el), required: this.required, rows: this.rows > 1 ? this.rows : undefined, spellcheck: this.spellCheck, step: this.type === "number" ? this.step : undefined, type: type, value: this.rows === 1 ? this.value : undefined }, this.rows > 1 && this.value), this.suffixLabel && (h("span", { class: "text-input__suffix" }, this.suffixLabel)), showClearButton && (h("button", { "aria-label": this.clearButtonLabel, class: "text-input__clear-button", onClick: this.clear, type: "button" }, h("flip-icon-cancel", null))), showPasswordToggle && (h("button", { "aria-label": this.passwordToggleLabel, class: "text-input__password-toggle", onClick: this.togglePassword, type: "button" }, this.showPassword ? (h("flip-icon-visibility-off", null)) : (h("flip-icon-visibility", null)))), showStepper && (h("span", { class: "text-input__stepper" }, h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.increaseValue, tabIndex: -1, type: "button" }, h("flip-icon-expand-less", null)), h("button", { "aria-hidden": "true", class: "text-input__step-button", onClick: this.decreaseValue, tabIndex: -1, type: "button" }, h("flip-icon-expand-more", null)))), this.showCharacterCounter && (h("span", { class: "text-input__character-counter" }, ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0, " ", Boolean(this.maxLength) ? `/ ${this.maxLength}` : "")))));
+  }
+};
+FlipTextInput.style = flipTextInputCss;
+
+export { FlipTextInput as flip_text_input };
+
+//# sourceMappingURL=flip-text-input.entry.js.map

package/dist/esm/flip-text-input.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-text-input.entry.js","mappings":"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","names":[],"sources":["./src/components/flip-text-input/flip-text-input.css?tag=flip-text-input&encapsulation=scoped","./src/components/flip-text-input/flip-text-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.text-input {\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  color: var(--s-text-default);\n  font: inherit;\n  line-height: var(--s-line-height-sm);\n}\n\n.text-input--clearable {\n  padding-right: calc(1.5rem + var(--s-space-8));\n}\n\n.text-input--type-number {\n  padding-right: calc(1.5rem + var(--s-space-8));\n}\n\n.text-input--show-password {\n  & .text-input__input {\n    width: 100%;\n  }\n}\n\n.text-input--disabled {\n  & .text-input__character-counter {\n    color: var(--s-text-disabled);\n  }\n}\n\n.text-input__input {\n  display: inline-flex;\n  width: 100%;\n  max-height: 13.75rem;\n  margin: 0;\n  padding: 0;\n  border: none;\n  color: var(--s-text-default);\n  background-color: transparent;\n  font: inherit;\n  font-size: var(--s-font-size-base);\n  line-height: var(--s-line-height-base);\n  resize: none;\n  caret-color: var(--s-border-highlight);\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    color: var(--s-text-disabled);\n    background-color: transparent;\n  }\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    margin: 0;\n    -webkit-appearance: none;\n  }\n\n  &[type=\"number\"] {\n    -moz-appearance: textfield;\n  }\n}\n\ninput.text-input__input:not([type=\"password\"]) {\n  width: 0.25rem;\n  min-width: 0.25rem;\n}\n\n.text-input__clear-button,\n.text-input__password-toggle {\n  position: absolute;\n  top: calc(-1 * var(--s-space-12));\n  right: 0;\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n  border: none;\n  color: var(--s-icon-default);\n  background-color: transparent;\n  cursor: pointer;\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n}\n\n.text-input__stepper {\n  position: absolute;\n  top: -1.4375rem;\n  right: 0;\n  display: flex;\n  flex-direction: column;\n}\n\n.text-input__step-button {\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n  border: none;\n  color: var(--s-icon-default);\n  background-color: transparent;\n  cursor: pointer;\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n}\n\n.text-input__character-counter {\n  position: absolute;\n  top: -1.375rem;\n  right: 0;\n  display: flex;\n  color: var(--s-text-subdued);\n  line-height: var(--s-line-height-sm);\n  flex-direction: column;\n}\n\n.text-input__prefix {\n  padding-right: var(--s-space-4);\n  font-size: var(--s-font-size-base);\n}\n\n.text-input__suffix {\n  padding-left: var(--s-space-4);\n  font-size: var(--s-font-size-base);\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  State,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\nimport { FlipFormInput } from \"../../utils\";\n\nexport type FlipTextInputType =\n  | \"date\"\n  | \"datetime-local\"\n  | \"email\"\n  | \"number\"\n  | \"password\"\n  | \"reset\"\n  | \"tel\"\n  | \"text\"\n  | \"url\";\n\nexport type FlipTextInputMode =\n  | \"decimal\"\n  | \"email\"\n  | \"numeric\"\n  | \"search\"\n  | \"tel\"\n  | \"text\"\n  | \"url\";\n\n@Component({\n  /**\n   * Form controls in shadow dom can still not be associated with labels in the\n   * light dom, cross browser. So for now we disable shadow dom for form\n   * controls (inputs, buttons, selects, etc.). Instead we use Stencil's scoping.\n   * https://caniuse.com/?search=attachInternals\n   */\n  scoped: true,\n  shadow: false,\n  styleUrl: \"flip-text-input.css\",\n  tag: \"flip-text-input\",\n})\nexport class FlipTextInput implements FlipFormInput {\n  @Prop() autoComplete?: string = \"on\";\n  @Prop() autoFocus?: boolean;\n  @Prop() autoSelect?: boolean;\n  @Prop() clearable?: boolean;\n  @Prop() clearButtonLabel?: string = \"Clear input\";\n  @Prop() disabled?: boolean;\n  @Prop() flipAriaDescribedby?: string;\n  @Prop() invalid?: boolean;\n  @Prop() maxLength?: number;\n  @Prop() max?: number;\n  @Prop() min?: number;\n  @Prop() mode?: FlipTextInputMode;\n  @Prop() prefixLabel?: string;\n  @Prop() required?: boolean;\n  @Prop() rows?: number = 1;\n  @Prop() showCharacterCounter?: boolean;\n  @Prop() spellCheck?: boolean;\n  @Prop() suffixLabel?: string;\n  @Prop() step?: number;\n  @Prop() passwordToggleLabel?: string = \"Toggle password display\";\n  @Prop() type?: FlipTextInputType = \"text\";\n  @Prop({ mutable: true, reflect: true }) value?: string;\n\n  @State() showPassword = false;\n\n  @Event() valueChange: EventEmitter<string>;\n\n  private inputEl: HTMLInputElement;\n\n  componentDidRender() {\n    this.adjustInputSize();\n  }\n\n  private adjustInputSize() {\n    if (this.rows > 1) {\n      this.inputEl.style.width = \"\";\n      this.inputEl.style.height = \"\";\n      this.inputEl.style.height = this.inputEl.scrollHeight / 16 + \"rem\";\n    }\n\n    if (this.rows === 1) {\n      this.inputEl.style.height = \"\";\n      this.inputEl.style.width = \"\";\n\n      if (this.type !== \"password\") {\n        this.inputEl.style.width = this.inputEl.scrollWidth / 16 + \"rem\";\n      }\n    }\n  }\n\n  private clear = () => {\n    this.inputEl.value = \"\";\n    this.value = \"\";\n    this.valueChange.emit(\"\");\n    this.inputEl.focus();\n  };\n\n  private onChange = (event: Event) => {\n    const el = event.target as HTMLInputElement;\n\n    this.value = el.value;\n    this.valueChange.emit(el.value);\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.handleAutoSelect(event);\n  };\n\n  private onInput = (event: InputEvent) => {\n    this.onChange(event);\n  };\n\n  private onKeyPress = (event: KeyboardEvent) => {\n    if (this.type !== \"number\") {\n      return;\n    }\n\n    if ([\"+\", \"-\", \"e\"].includes(event.key)) {\n      event.preventDefault();\n    }\n  };\n\n  private decreaseValue = () => {\n    if (this.type !== \"number\") {\n      return;\n    }\n    const step = this.step || 1;\n    const currentValue = isNaN(this.inputEl.valueAsNumber)\n      ? this.min !== undefined\n        ? this.min + 1\n        : 1\n      : this.inputEl.valueAsNumber;\n\n    this.value = String(Math.max(this.min || -Infinity, currentValue - step));\n    this.valueChange.emit(this.value);\n  };\n\n  private increaseValue = () => {\n    if (this.type !== \"number\") {\n      return;\n    }\n\n    const step = this.step || 1;\n    const currentValue = isNaN(this.inputEl.valueAsNumber)\n      ? this.min !== undefined\n        ? this.min - 1\n        : -1\n      : this.inputEl.valueAsNumber;\n\n    this.value = String(Math.min(this.max || Infinity, currentValue + step));\n    this.valueChange.emit(this.value);\n  };\n\n  private handleAutoSelect(event: FocusEvent) {\n    if (!this.autoSelect) {\n      return;\n    }\n\n    (event.target as HTMLInputElement).select();\n  }\n\n  private togglePassword = () => {\n    if (this.type !== \"password\") {\n      return;\n    }\n\n    this.showPassword = !this.showPassword;\n  };\n\n  render() {\n    const Tag = this.rows === 1 ? \"input\" : \"textarea\";\n\n    const ariaInvalid =\n      this.invalid === true\n        ? \"true\"\n        : this.invalid === false\n        ? \"false\"\n        : undefined;\n\n    const showStepper = this.type === \"number\" && !this.disabled;\n    const showPasswordToggle = this.type === \"password\" && !this.disabled;\n\n    const showClearButton =\n      this.clearable &&\n      !this.disabled &&\n      Boolean(this.value) &&\n      !showPasswordToggle &&\n      !showStepper &&\n      !this.showCharacterCounter;\n\n    const type =\n      this.type === \"password\" && this.showPassword ? \"text\" : this.type;\n\n    const className = classnames(\n      \"text-input\",\n      `text-input--type-${this.type}`,\n      {\n        \"text-input--clearable\": this.clearable,\n        \"text-input--disabled\": this.disabled,\n        \"text-input--show-password\":\n          this.type === \"password\" && this.showPassword,\n      }\n    );\n\n    return (\n      <Host>\n        <div class={className}>\n          {this.prefixLabel && (\n            <span class=\"text-input__prefix\">{this.prefixLabel}</span>\n          )}\n          <Tag\n            aria-describedby={this.flipAriaDescribedby}\n            aria-disabled={this.disabled ? \"true\" : undefined}\n            aria-invalid={ariaInvalid}\n            autoComplete={this.autoComplete}\n            autoFocus={this.autoFocus}\n            class=\"text-input__input\"\n            disabled={this.disabled}\n            inputMode={this.mode}\n            maxLength={this.maxLength}\n            max={this.type === \"number\" ? this.max : undefined}\n            min={this.type === \"number\" ? this.min : undefined}\n            onFocus={this.onFocus}\n            onInput={this.onInput}\n            onKeyPress={this.onKeyPress}\n            ref={(el) => (this.inputEl = el)}\n            required={this.required}\n            rows={this.rows > 1 ? this.rows : undefined}\n            spellcheck={this.spellCheck}\n            step={this.type === \"number\" ? this.step : undefined}\n            type={type}\n            value={this.rows === 1 ? this.value : undefined}\n          >\n            {this.rows > 1 && this.value}\n          </Tag>\n          {this.suffixLabel && (\n            <span class=\"text-input__suffix\">{this.suffixLabel}</span>\n          )}\n          {showClearButton && (\n            <button\n              aria-label={this.clearButtonLabel}\n              class=\"text-input__clear-button\"\n              onClick={this.clear}\n              type=\"button\"\n            >\n              <flip-icon-cancel></flip-icon-cancel>\n            </button>\n          )}\n          {showPasswordToggle && (\n            <button\n              aria-label={this.passwordToggleLabel}\n              class=\"text-input__password-toggle\"\n              onClick={this.togglePassword}\n              type=\"button\"\n            >\n              {this.showPassword ? (\n                <flip-icon-visibility-off></flip-icon-visibility-off>\n              ) : (\n                <flip-icon-visibility></flip-icon-visibility>\n              )}\n            </button>\n          )}\n          {showStepper && (\n            <span class=\"text-input__stepper\">\n              <button\n                aria-hidden=\"true\"\n                class=\"text-input__step-button\"\n                onClick={this.increaseValue}\n                tabIndex={-1}\n                type=\"button\"\n              >\n                <flip-icon-expand-less></flip-icon-expand-less>\n              </button>\n              <button\n                aria-hidden=\"true\"\n                class=\"text-input__step-button\"\n                onClick={this.decreaseValue}\n                tabIndex={-1}\n                type=\"button\"\n              >\n                <flip-icon-expand-more></flip-icon-expand-more>\n              </button>\n            </span>\n          )}\n          {this.showCharacterCounter && (\n            <span class=\"text-input__character-counter\">\n              {this.value?.length || 0}{\" \"}\n              {Boolean(this.maxLength) ? `/ ${this.maxLength}` : \"\"}\n            </span>\n          )}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/flip-text.entry.js

@@ -0,0 +1,27 @@
+import { r as registerInstance, h, H as Host } from './index-5a3b2828.js';
+import { c as classnames } from './index-6d2e18c6.js';
+import './_commonjsHelpers-44457d8d.js';
+
+const flipTextCss = ":host{display:block}:host *{box-sizing:border-box}.text{margin:0;padding:0}.text--align-start{text-align:start}.text--align-center{text-align:center}.text--align-end{text-align:end}.text--color-default{color:var(--s-text-default)}.text--color-subdued{color:var(--s-text-subdued)}.text--color-critical{color:var(--s-text-critical)}.text--color-success{color:var(--s-text-success)}.text--color-warning{color:var(--s-text-warning)}.text--size-sm{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}.text--size-base{font-size:var(--s-font-size-base);line-height:var(--s-line-height-base)}.text--size-lg{font-size:var(--s-font-size-lg);line-height:var(--s-line-height-lg)}.text--weight-normal{font-weight:var(--s-font-weight-normal)}.text--weight-medium{font-weight:var(--s-font-weight-medium)}.text--weight-semibold{font-weight:var(--s-font-weight-semibold)}.text--weight-bold{font-weight:var(--s-font-weight-bold)}.text--font-style-normal{font-style:normal}.text--font-style-italic{font-style:italic}";
+
+const FlipText = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.align = "start";
+    this.as = "p";
+    this.color = "default";
+    this.fontStyle = "normal";
+    this.size = "base";
+    this.weight = "normal";
+  }
+  render() {
+    const Tag = this.as;
+    const className = classnames("text", `text--align-${this.align}`, `text--color-${this.color}`, `text--font-style-${this.fontStyle}`, `text--size-${this.size}`, `text--weight-${this.weight}`);
+    return (h(Host, null, h(Tag, { class: className }, h("slot", null))));
+  }
+};
+FlipText.style = flipTextCss;
+
+export { FlipText as flip_text };
+
+//# sourceMappingURL=flip-text.entry.js.map

package/dist/esm/flip-text.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-text.entry.js","mappings":";;;;AAAA,MAAM,WAAW,GAAG,u/BAAu/B;;MCuB9/B,QAAQ;EALrB;;IAMU,UAAK,GAAmB,OAAO,CAAC;IAChC,OAAE,GAAY,GAAG,CAAC;IAClB,UAAK,GAAmB,SAAS,CAAC;IAClC,cAAS,GAAuB,QAAQ,CAAC;IACzC,SAAI,GAAkB,MAAM,CAAC;IAC7B,WAAM,GAAoB,QAAQ,CAAC;GAsB5C;EApBC,MAAM;IACJ,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,UAAU,CAC1B,MAAM,EACN,eAAe,IAAI,CAAC,KAAK,EAAE,EAC3B,eAAe,IAAI,CAAC,KAAK,EAAE,EAC3B,oBAAoB,IAAI,CAAC,SAAS,EAAE,EACpC,cAAc,IAAI,CAAC,IAAI,EAAE,EACzB,gBAAgB,IAAI,CAAC,MAAM,EAAE,CAC9B,CAAC;IAEF,QACE,EAAC,IAAI,QACH,EAAC,GAAG,IAAC,KAAK,EAAE,SAAS,IACnB,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/flip-text/flip-text.css?tag=flip-text&encapsulation=shadow","./src/components/flip-text/flip-text.tsx"],"sourcesContent":[":host {\n  display: block;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.text {\n  margin: 0;\n  padding: 0;\n}\n\n.text--align-start {\n  text-align: start;\n}\n\n.text--align-center {\n  text-align: center;\n}\n\n.text--align-end {\n  text-align: end;\n}\n\n.text--color-default {\n  color: var(--s-text-default);\n}\n\n.text--color-subdued {\n  color: var(--s-text-subdued);\n}\n\n.text--color-critical {\n  color: var(--s-text-critical);\n}\n\n.text--color-success {\n  color: var(--s-text-success);\n}\n\n.text--color-warning {\n  color: var(--s-text-warning);\n}\n\n.text--size-sm {\n  font-size: var(--s-font-size-sm);\n  line-height: var(--s-line-height-sm);\n}\n\n.text--size-base {\n  font-size: var(--s-font-size-base);\n  line-height: var(--s-line-height-base);\n}\n\n.text--size-lg {\n  font-size: var(--s-font-size-lg);\n  line-height: var(--s-line-height-lg);\n}\n\n.text--weight-normal {\n  font-weight: var(--s-font-weight-normal);\n}\n\n.text--weight-medium {\n  font-weight: var(--s-font-weight-medium);\n}\n\n.text--weight-semibold {\n  font-weight: var(--s-font-weight-semibold);\n}\n\n.text--weight-bold {\n  font-weight: var(--s-font-weight-bold);\n}\n\n.text--font-style-normal {\n  font-style: normal;\n}\n\n.text--font-style-italic {\n  font-style: italic;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipTextAlign = \"start\" | \"center\" | \"end\";\n\nexport type FlipTextColor =\n  | \"default\"\n  | \"subdued\"\n  | \"critical\"\n  | \"success\"\n  | \"warning\";\n\nexport type FlipTextFontStyle = \"normal\" | \"italic\";\n\nexport type FlipTextSize = \"sm\" | \"base\" | \"lg\";\n\nexport type FlipTextWeight = \"normal\" | \"medium\" | \"semibold\" | \"bold\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-text.css\",\n  tag: \"flip-text\",\n})\nexport class FlipText {\n  @Prop() align?: FlipTextAlign = \"start\";\n  @Prop() as?: string = \"p\";\n  @Prop() color?: FlipTextColor = \"default\";\n  @Prop() fontStyle?: FlipTextFontStyle = \"normal\";\n  @Prop() size?: FlipTextSize = \"base\";\n  @Prop() weight?: FlipTextWeight = \"normal\";\n\n  render() {\n    const Tag = this.as;\n\n    const className = classnames(\n      \"text\",\n      `text--align-${this.align}`,\n      `text--color-${this.color}`,\n      `text--font-style-${this.fontStyle}`,\n      `text--size-${this.size}`,\n      `text--weight-${this.weight}`\n    );\n\n    return (\n      <Host>\n        <Tag class={className}>\n          <slot></slot>\n        </Tag>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/flip-theme-provider.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-64709274.js';
+import { r as registerInstance, h, H as Host } from './index-5a3b2828.js';
 
 /**
  * A simple guard function:
@@ -361,3 +361,5 @@ const FlipThemeProvider = class {
 FlipThemeProvider.style = flipThemeProviderCss;
 
 export { FlipThemeProvider as flip_theme_provider };
+
+//# sourceMappingURL=flip-theme-provider.entry.js.map

package/dist/esm/flip-theme-provider.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-theme-provider.entry.js","mappings":"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","names":[],"sources":["../../node_modules/color2k/dist/index.module.es.js","./src/components/flip-theme-provider/flip-theme-provider.css?tag=flip-theme-provider&encapsulation=scoped","./src/components/flip-theme-provider/flip-theme-provider.tsx"],"sourcesContent":["/**\n * A simple guard function:\n *\n * ```js\n * Math.min(Math.max(low, value), high)\n * ```\n */\nfunction guard(low, high, value) {\n  return Math.min(Math.max(low, value), high);\n}\n\nclass ColorError extends Error {\n  constructor(color) {\n    super(`Failed to parse color: \"${color}\"`);\n  }\n\n}\n\nvar ColorError$1 = ColorError;\n\n/**\n * Parses a color into red, gree, blue, alpha parts\n *\n * @param color the input color. Can be a RGB, RBGA, HSL, HSLA, or named color\n */\n\nfunction parseToRgba(color) {\n  if (typeof color !== 'string') throw new ColorError$1(color);\n  if (color.trim().toLowerCase() === 'transparent') return [0, 0, 0, 0];\n  let normalizedColor = color.trim();\n  normalizedColor = namedColorRegex.test(color) ? nameToHex(color) : color;\n  const reducedHexMatch = reducedHexRegex.exec(normalizedColor);\n\n  if (reducedHexMatch) {\n    const arr = Array.from(reducedHexMatch).slice(1);\n    return [...arr.slice(0, 3).map(x => parseInt(r(x, 2), 16)), parseInt(r(arr[3] || 'f', 2), 16) / 255];\n  }\n\n  const hexMatch = hexRegex.exec(normalizedColor);\n\n  if (hexMatch) {\n    const arr = Array.from(hexMatch).slice(1);\n    return [...arr.slice(0, 3).map(x => parseInt(x, 16)), parseInt(arr[3] || 'ff', 16) / 255];\n  }\n\n  const rgbaMatch = rgbaRegex.exec(normalizedColor);\n\n  if (rgbaMatch) {\n    const arr = Array.from(rgbaMatch).slice(1);\n    return [...arr.slice(0, 3).map(x => parseInt(x, 10)), parseFloat(arr[3] || '1')];\n  }\n\n  const hslaMatch = hslaRegex.exec(normalizedColor);\n\n  if (hslaMatch) {\n    const [h, s, l, a] = Array.from(hslaMatch).slice(1).map(parseFloat);\n    if (guard(0, 100, s) !== s) throw new ColorError$1(color);\n    if (guard(0, 100, l) !== l) throw new ColorError$1(color);\n    return [...hslToRgb(h, s, l), a || 1];\n  }\n\n  throw new ColorError$1(color);\n}\n\nfunction hash(str) {\n  let hash = 5381;\n  let i = str.length;\n\n  while (i) {\n    hash = hash * 33 ^ str.charCodeAt(--i);\n  }\n  /* JavaScript does bitwise operations (like XOR, above) on 32-bit signed\n   * integers. Since we want the results to be always positive, convert the\n   * signed int to an unsigned by doing an unsigned bitshift. */\n\n\n  return (hash >>> 0) % 2341;\n}\n\nconst colorToInt = x => parseInt(x.replace(/_/g, ''), 36);\n\nconst compressedColorMap = '1q29ehhb 1n09sgk7 1kl1ekf_ _yl4zsno 16z9eiv3 1p29lhp8 _bd9zg04 17u0____ _iw9zhe5 _to73___ _r45e31e _7l6g016 _jh8ouiv _zn3qba8 1jy4zshs 11u87k0u 1ro9yvyo 1aj3xael 1gz9zjz0 _3w8l4xo 1bf1ekf_ _ke3v___ _4rrkb__ 13j776yz _646mbhl _nrjr4__ _le6mbhl 1n37ehkb _m75f91n _qj3bzfz 1939yygw 11i5z6x8 _1k5f8xs 1509441m 15t5lwgf _ae2th1n _tg1ugcv 1lp1ugcv 16e14up_ _h55rw7n _ny9yavn _7a11xb_ 1ih442g9 _pv442g9 1mv16xof 14e6y7tu 1oo9zkds 17d1cisi _4v9y70f _y98m8kc 1019pq0v 12o9zda8 _348j4f4 1et50i2o _8epa8__ _ts6senj 1o350i2o 1mi9eiuo 1259yrp0 1ln80gnw _632xcoy 1cn9zldc _f29edu4 1n490c8q _9f9ziet 1b94vk74 _m49zkct 1kz6s73a 1eu9dtog _q58s1rz 1dy9sjiq __u89jo3 _aj5nkwg _ld89jo3 13h9z6wx _qa9z2ii _l119xgq _bs5arju 1hj4nwk9 1qt4nwk9 1ge6wau6 14j9zlcw 11p1edc_ _ms1zcxe _439shk6 _jt9y70f _754zsow 1la40eju _oq5p___ _x279qkz 1fa5r3rv _yd2d9ip _424tcku _8y1di2_ _zi2uabw _yy7rn9h 12yz980_ __39ljp6 1b59zg0x _n39zfzp 1fy9zest _b33k___ _hp9wq92 1il50hz4 _io472ub _lj9z3eo 19z9ykg0 _8t8iu3a 12b9bl4a 1ak5yw0o _896v4ku _tb8k8lv _s59zi6t _c09ze0p 1lg80oqn 1id9z8wb _238nba5 1kq6wgdi _154zssg _tn3zk49 _da9y6tc 1sg7cv4f _r12jvtt 1gq5fmkz 1cs9rvci _lp9jn1c _xw1tdnb 13f9zje6 16f6973h _vo7ir40 _bt5arjf _rc45e4t _hr4e100 10v4e100 _hc9zke2 _w91egv_ _sj2r1kk 13c87yx8 _vqpds__ _ni8ggk8 _tj9yqfb 1ia2j4r4 _7x9b10u 1fc9ld4j 1eq9zldr _5j9lhpx _ez9zl6o _md61fzm'.split(' ').reduce((acc, next) => {\n  const key = colorToInt(next.substring(0, 3));\n  const hex = colorToInt(next.substring(3)).toString(16); // NOTE: padStart could be used here but it breaks Node 6 compat\n  // https://github.com/ricokahler/color2k/issues/351\n\n  let prefix = '';\n\n  for (let i = 0; i < 6 - hex.length; i++) {\n    prefix += '0';\n  }\n\n  acc[key] = `${prefix}${hex}`;\n  return acc;\n}, {});\n/**\n * Checks if a string is a CSS named color and returns its equivalent hex value, otherwise returns the original color.\n */\n\nfunction nameToHex(color) {\n  const normalizedColorName = color.toLowerCase().trim();\n  const result = compressedColorMap[hash(normalizedColorName)];\n  if (!result) throw new ColorError$1(color);\n  return `#${result}`;\n}\n\nconst r = (str, amount) => Array.from(Array(amount)).map(() => str).join('');\n\nconst reducedHexRegex = new RegExp(`^#${r('([a-f0-9])', 3)}([a-f0-9])?$`, 'i');\nconst hexRegex = new RegExp(`^#${r('([a-f0-9]{2})', 3)}([a-f0-9]{2})?$`, 'i');\nconst rgbaRegex = new RegExp(`^rgba?\\\\(\\\\s*(\\\\d+)\\\\s*${r(',\\\\s*(\\\\d+)\\\\s*', 2)}(?:,\\\\s*([\\\\d.]+))?\\\\s*\\\\)$`, 'i');\nconst hslaRegex = /^hsla?\\(\\s*([\\d.]+)\\s*,\\s*([\\d.]+)%\\s*,\\s*([\\d.]+)%(?:\\s*,\\s*([\\d.]+))?\\s*\\)$/i;\nconst namedColorRegex = /^[a-z]+$/i;\n\nconst roundColor = color => {\n  return Math.round(color * 255);\n};\n\nconst hslToRgb = (hue, saturation, lightness) => {\n  let l = lightness / 100;\n\n  if (saturation === 0) {\n    // achromatic\n    return [l, l, l].map(roundColor);\n  } // formulae from https://en.wikipedia.org/wiki/HSL_and_HSV\n\n\n  const huePrime = (hue % 360 + 360) % 360 / 60;\n  const chroma = (1 - Math.abs(2 * l - 1)) * (saturation / 100);\n  const secondComponent = chroma * (1 - Math.abs(huePrime % 2 - 1));\n  let red = 0;\n  let green = 0;\n  let blue = 0;\n\n  if (huePrime >= 0 && huePrime < 1) {\n    red = chroma;\n    green = secondComponent;\n  } else if (huePrime >= 1 && huePrime < 2) {\n    red = secondComponent;\n    green = chroma;\n  } else if (huePrime >= 2 && huePrime < 3) {\n    green = chroma;\n    blue = secondComponent;\n  } else if (huePrime >= 3 && huePrime < 4) {\n    green = secondComponent;\n    blue = chroma;\n  } else if (huePrime >= 4 && huePrime < 5) {\n    red = secondComponent;\n    blue = chroma;\n  } else if (huePrime >= 5 && huePrime < 6) {\n    red = chroma;\n    blue = secondComponent;\n  }\n\n  const lightnessModification = l - chroma / 2;\n  const finalRed = red + lightnessModification;\n  const finalGreen = green + lightnessModification;\n  const finalBlue = blue + lightnessModification;\n  return [finalRed, finalGreen, finalBlue].map(roundColor);\n};\n\n// taken from:\n/**\n * Parses a color in hue, saturation, lightness, and the alpha channel.\n *\n * Hue is a number between 0 and 360, saturation, lightness, and alpha are\n * decimal percentages between 0 and 1\n */\n\nfunction parseToHsla(color) {\n  const [red, green, blue, alpha] = parseToRgba(color).map((value, index) => // 3rd index is alpha channel which is already normalized\n  index === 3 ? value : value / 255);\n  const max = Math.max(red, green, blue);\n  const min = Math.min(red, green, blue);\n  const lightness = (max + min) / 2; // achromatic\n\n  if (max === min) return [0, 0, lightness, alpha];\n  const delta = max - min;\n  const saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);\n  const hue = 60 * (red === max ? (green - blue) / delta + (green < blue ? 6 : 0) : green === max ? (blue - red) / delta + 2 : (red - green) / delta + 4);\n  return [hue, saturation, lightness, alpha];\n}\n\n/**\n * Takes in hsla parts and constructs an hsla string\n *\n * @param hue The color circle (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue\n * @param saturation Percentage of saturation, given as a decimal between 0 and 1\n * @param lightness Percentage of lightness, given as a decimal between 0 and 1\n * @param alpha Percentage of opacity, given as a decimal between 0 and 1\n */\n\nfunction hsla(hue, saturation, lightness, alpha) {\n  return `hsla(${(hue % 360).toFixed()}, ${guard(0, 100, saturation * 100).toFixed()}%, ${guard(0, 100, lightness * 100).toFixed()}%, ${parseFloat(guard(0, 1, alpha).toFixed(3))})`;\n}\n\n/**\n * Adjusts the current hue of the color by the given degrees. Wraps around when\n * over 360.\n *\n * @param color input color\n * @param degrees degrees to adjust the input color, accepts degree integers\n * (0 - 360) and wraps around on overflow\n */\n\nfunction adjustHue(color, degrees) {\n  const [h, s, l, a] = parseToHsla(color);\n  return hsla(h + degrees, s, l, a);\n}\n\n/**\n * Darkens using lightness. This is equivalent to subtracting the lightness\n * from the L in HSL.\n *\n * @param amount The amount to darken, given as a decimal between 0 and 1\n */\n\nfunction darken(color, amount) {\n  const [hue, saturation, lightness, alpha] = parseToHsla(color);\n  return hsla(hue, saturation, lightness - amount, alpha);\n}\n\n/**\n * Desaturates the input color by the given amount via subtracting from the `s`\n * in `hsla`.\n *\n * @param amount The amount to desaturate, given as a decimal between 0 and 1\n */\n\nfunction desaturate(color, amount) {\n  const [h, s, l, a] = parseToHsla(color);\n  return hsla(h, s - amount, l, a);\n}\n\n// https://github.com/styled-components/polished/blob/0764c982551b487469043acb56281b0358b3107b/src/color/getLuminance.js\n\n/**\n * Returns a number (float) representing the luminance of a color.\n */\n\nfunction getLuminance(color) {\n  if (color === 'transparent') return 0;\n\n  function f(x) {\n    const channel = x / 255;\n    return channel <= 0.03928 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);\n  }\n\n  const [r, g, b] = parseToRgba(color);\n  return 0.2126 * f(r) + 0.7152 * f(g) + 0.0722 * f(b);\n}\n\n// taken from:\n/**\n * Returns the contrast ratio between two colors based on\n * [W3's recommended equation for calculating contrast](http://www.w3.org/TR/WCAG20/#contrast-ratiodef).\n */\n\nfunction getContrast(color1, color2) {\n  const luminance1 = getLuminance(color1);\n  const luminance2 = getLuminance(color2);\n  return luminance1 > luminance2 ? (luminance1 + 0.05) / (luminance2 + 0.05) : (luminance2 + 0.05) / (luminance1 + 0.05);\n}\n\n/**\n * Takes in rgba parts and returns an rgba string\n *\n * @param red The amount of red in the red channel, given in a number between 0 and 255 inclusive\n * @param green The amount of green in the red channel, given in a number between 0 and 255 inclusive\n * @param blue The amount of blue in the red channel, given in a number between 0 and 255 inclusive\n * @param alpha Percentage of opacity, given as a decimal between 0 and 1\n */\n\nfunction rgba(red, green, blue, alpha) {\n  return `rgba(${guard(0, 255, red).toFixed()}, ${guard(0, 255, green).toFixed()}, ${guard(0, 255, blue).toFixed()}, ${parseFloat(guard(0, 1, alpha).toFixed(3))})`;\n}\n\n/**\n * Mixes two colors together. Taken from sass's implementation.\n */\n\nfunction mix(color1, color2, weight) {\n  const normalize = (n, index) => // 3rd index is alpha channel which is already normalized\n  index === 3 ? n : n / 255;\n\n  const [r1, g1, b1, a1] = parseToRgba(color1).map(normalize);\n  const [r2, g2, b2, a2] = parseToRgba(color2).map(normalize); // The formula is copied from the original Sass implementation:\n  // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method\n\n  const alphaDelta = a2 - a1;\n  const normalizedWeight = weight * 2 - 1;\n  const combinedWeight = normalizedWeight * alphaDelta === -1 ? normalizedWeight : normalizedWeight + alphaDelta / (1 + normalizedWeight * alphaDelta);\n  const weight2 = (combinedWeight + 1) / 2;\n  const weight1 = 1 - weight2;\n  const r = (r1 * weight1 + r2 * weight2) * 255;\n  const g = (g1 * weight1 + g2 * weight2) * 255;\n  const b = (b1 * weight1 + b2 * weight2) * 255;\n  const a = a2 * weight + a1 * (1 - weight);\n  return rgba(r, g, b, a);\n}\n\n/**\n * Given a series colors, this function will return a `scale(x)` function that\n * accepts a percentage as a decimal between 0 and 1 and returns the color at\n * that percentage in the scale.\n *\n * ```js\n * const scale = getScale('red', 'yellow', 'green');\n * console.log(scale(0)); // rgba(255, 0, 0, 1)\n * console.log(scale(0.5)); // rgba(255, 255, 0, 1)\n * console.log(scale(1)); // rgba(0, 128, 0, 1)\n * ```\n *\n * If you'd like to limit the domain and range like chroma-js, we recommend\n * wrapping scale again.\n *\n * ```js\n * const _scale = getScale('red', 'yellow', 'green');\n * const scale = x => _scale(x / 100);\n *\n * console.log(scale(0)); // rgba(255, 0, 0, 1)\n * console.log(scale(50)); // rgba(255, 255, 0, 1)\n * console.log(scale(100)); // rgba(0, 128, 0, 1)\n * ```\n */\n\nfunction getScale(...colors) {\n  return n => {\n    const lastIndex = colors.length - 1;\n    const lowIndex = guard(0, lastIndex, Math.floor(n * lastIndex));\n    const highIndex = guard(0, lastIndex, Math.ceil(n * lastIndex));\n    const color1 = colors[lowIndex];\n    const color2 = colors[highIndex];\n    const unit = 1 / lastIndex;\n    const weight = (n - unit * lowIndex) / unit;\n    return mix(color1, color2, weight);\n  };\n}\n\nconst guidelines = {\n  decorative: 1.5,\n  readable: 3,\n  aa: 4.5,\n  aaa: 7\n};\n/**\n * Returns whether or not a color has bad contrast against a background\n * according to a given standard.\n */\n\nfunction hasBadContrast(color, standard = 'aa', background = '#fff') {\n  return getContrast(color, background) < guidelines[standard];\n}\n\n/**\n * Lightens a color by a given amount. This is equivalent to\n * `darken(color, -amount)`\n *\n * @param amount The amount to darken, given as a decimal between 0 and 1\n */\n\nfunction lighten(color, amount) {\n  return darken(color, -amount);\n}\n\n/**\n * Takes in a color and makes it more transparent by convert to `rgba` and\n * decreasing the amount in the alpha channel.\n *\n * @param amount The amount to increase the transparency by, given as a decimal between 0 and 1\n */\n\nfunction transparentize(color, amount) {\n  const [r, g, b, a] = parseToRgba(color);\n  return rgba(r, g, b, a - amount);\n}\n\n/**\n * Takes a color and un-transparentizes it. Equivalent to\n * `transparentize(color, -amount)`\n *\n * @param amount The amount to increase the opacity by, given as a decimal between 0 and 1\n */\n\nfunction opacify(color, amount) {\n  return transparentize(color, -amount);\n}\n\n/**\n * An alternative function to `readableColor`. Returns whether or not the \n * readable color (i.e. the color to be place on top the input color) should be\n * black.\n */\n\nfunction readableColorIsBlack(color) {\n  return getLuminance(color) > 0.179;\n}\n\n/**\n * Returns black or white for best contrast depending on the luminosity of the\n * given color.\n */\n\nfunction readableColor(color) {\n  return readableColorIsBlack(color) ? '#000' : '#fff';\n}\n\n/**\n * Saturates a color by converting it to `hsl` and increasing the saturation\n * amount. Equivalent to `desaturate(color, -amount)`\n * \n * @param color Input color\n * @param amount The amount to darken, given as a decimal between 0 and 1\n */\n\nfunction saturate(color, amount) {\n  return desaturate(color, -amount);\n}\n\n/**\n * Takes in any color and returns it as a hex code.\n */\n\nfunction toHex(color) {\n  const [r, g, b, a] = parseToRgba(color);\n\n  let hex = x => {\n    const h = guard(0, 255, x).toString(16); // NOTE: padStart could be used here but it breaks Node 6 compat\n    // https://github.com/ricokahler/color2k/issues/351\n\n    return h.length === 1 ? `0${h}` : h;\n  };\n\n  return `#${hex(r)}${hex(g)}${hex(b)}${a < 1 ? hex(Math.round(a * 255)) : ''}`;\n}\n\n/**\n * Takes in any color and returns it as an rgba string.\n */\n\nfunction toRgba(color) {\n  return rgba(...parseToRgba(color));\n}\n\n/**\n * Takes in any color and returns it as an hsla string.\n */\n\nfunction toHsla(color) {\n  return hsla(...parseToHsla(color));\n}\n\nexport { ColorError$1 as ColorError, adjustHue, darken, desaturate, getContrast, getLuminance, getScale, guard, hasBadContrast, hsla, lighten, mix, opacify, parseToHsla, parseToRgba, readableColor, readableColorIsBlack, rgba, saturate, toHex, toHsla, toRgba, transparentize };\n//# sourceMappingURL=index.module.es.js.map\n",":host {\n  display: block;\n}\n","import { Component, h, Host, Method, Prop, Watch } from \"@stencil/core\";\nimport { hsla, parseToHsla, toRgba } from \"color2k\";\nexport type FlipTheme = \"light\" | \"dark\";\n\nexport type FlipThemeProviderStorage = {\n  getItem: (key: string) => string;\n  removeItem: (key: string) => void;\n  setItem: (key: string, value: string) => void;\n};\n\nexport type FlipThemeProviderTenantColors = {\n  primary?: string;\n  primaryContrast?: string;\n  secondary?: string;\n  secondaryContrast?: string;\n  text?: string;\n};\n\nexport type FlipThemeProviderConfig = {\n  rootElement?: HTMLElement;\n  storage?: FlipThemeProviderStorage;\n  tenantColors?: FlipThemeProviderTenantColors;\n};\n\nconst preferredThemeStorageKey = \"flip-preferred-theme\";\n\nconst tenantColorMapping = {\n  \"--s-action-primary-default\": \"primary\",\n  \"--s-action-primary-hovered\": \"primaryHovered\",\n  \"--s-action-primary-pressed\": \"primaryPressed\",\n  \"--s-text-on-action-primary\": \"primaryContrast\",\n  \"--s-icon-on-action-primary\": \"primaryContrast\",\n  \"--s-surface-highlight-default\": \"secondary\",\n  \"--s-surface-highlight-hovered\": \"secondaryHovered\",\n  \"--s-surface-highlight-pressed\": \"secondaryPressed\",\n  \"--s-on-surface-highlight-default\": \"secondaryHovered\",\n  \"--s-text-on-surface-highlight\": \"secondaryContrast\",\n  \"--s-icon-on-surface-highlight\": \"secondaryContrast\",\n  \"--s-text-highlight\": \"text\",\n  \"--s-interactive-primary-default\": \"text\",\n  \"--s-interactive-primary-hovered\": \"textHovered\",\n  \"--s-interactive-primary-pressed\": \"textPressed\",\n};\n\n@Component({\n  scoped: true,\n  styleUrl: \"flip-theme-provider.css\",\n  tag: \"flip-theme-provider\",\n})\nexport class FlipThemeProvider {\n  @Prop() config: FlipThemeProviderConfig;\n\n  private appTheme: FlipTheme;\n  private osTheme: FlipTheme;\n  private resolvedConfig: FlipThemeProviderConfig;\n\n  componentWillLoad() {\n    this.resolveConfig();\n    this.determineOSTheme();\n    this.updateAppTheme();\n  }\n\n  @Watch(\"config\")\n  watchConfig() {\n    this.resolveConfig();\n    this.determineOSTheme();\n    this.updateAppTheme();\n  }\n\n  /**\n   * Returns the active app theme.\n   * @returns FlipTheme\n   */\n  @Method()\n  async getActiveTheme() {\n    return this.appTheme;\n  }\n\n  /**\n   * Returns the user's preferred theme stored in local storage.\n   * @returns FlipTheme\n   */\n  @Method()\n  async getPreferredTheme() {\n    if (!Boolean(this.resolvedConfig.storage)) {\n      return;\n    }\n\n    return this.resolvedConfig.storage.getItem(\n      preferredThemeStorageKey\n    ) as FlipTheme | null;\n  }\n\n  /**\n   * Sets the user's preferred theme and stores it in local storage. Overrides\n   * the OS theme.\n   */\n  @Method()\n  async setPreferredTheme(theme: FlipTheme) {\n    if (!Boolean(this.resolvedConfig.storage)) {\n      return;\n    }\n\n    this.resolvedConfig.storage.setItem(preferredThemeStorageKey, theme);\n\n    this.updateAppTheme();\n  }\n\n  /**\n   * Resets the user's preferred theme, using the OS theme instead.\n   */\n  @Method()\n  async resetPreferredTheme() {\n    if (!Boolean(this.resolvedConfig.storage)) {\n      return;\n    }\n\n    this.resolvedConfig.storage.removeItem(preferredThemeStorageKey);\n\n    this.updateAppTheme();\n  }\n\n  private resolveConfig() {\n    this.resolvedConfig = {\n      ...(this.config || {}),\n      rootElement: this.config?.rootElement || document.documentElement,\n      storage: this.config?.storage || window?.localStorage,\n    };\n  }\n\n  private determineOSTheme() {\n    if (!Boolean(window.matchMedia)) {\n      this.osTheme = \"light\";\n      return;\n    }\n\n    const darkThemeMediaQuery = window.matchMedia(\n      \"(prefers-color-scheme: dark)\"\n    );\n\n    this.osTheme = darkThemeMediaQuery.matches ? \"dark\" : \"light\";\n\n    darkThemeMediaQuery.addEventListener(\"change\", (e) => {\n      this.osTheme = e.matches ? \"dark\" : \"light\";\n\n      this.updateAppTheme();\n    });\n  }\n\n  private async updateAppTheme() {\n    this.appTheme = (await this.getPreferredTheme()) || this.osTheme;\n\n    if (this.appTheme === \"dark\") {\n      document.documentElement.classList.remove(\"theme-light\");\n      document.documentElement.classList.add(\"theme-dark\");\n    } else {\n      document.documentElement.classList.remove(\"theme-dark\");\n      document.documentElement.classList.add(\"theme-light\");\n    }\n\n    this.updateTenantVariables();\n  }\n\n  private updateTenantVariables() {\n    const tenantTheme = this.resolvedConfig?.tenantColors;\n\n    if (!Boolean(tenantTheme)) {\n      this.resetTenantVariables();\n      return;\n    }\n\n    const rootElement = this.resolvedConfig.rootElement;\n\n    // generate state colors (hovered, pressed) from base colors\n    const primaryHsla = parseToHsla(tenantTheme.primary);\n    const secondaryHsla = parseToHsla(tenantTheme.secondary);\n    const textHsla = parseToHsla(tenantTheme.text);\n\n    const primaryHovered = toRgba(\n      hsla(primaryHsla[0], primaryHsla[1] - 0.21, primaryHsla[2] + 0.09, 1)\n    );\n    const primaryPressed = toRgba(\n      hsla(primaryHsla[0], primaryHsla[1] - 0.2, primaryHsla[2] + 0.17, 1)\n    );\n\n    const secondaryHovered = toRgba(\n      hsla(secondaryHsla[0], secondaryHsla[1], secondaryHsla[2] + 0.07, 1)\n    );\n    const secondaryPressed = toRgba(\n      hsla(secondaryHsla[0], secondaryHsla[1], secondaryHsla[2] + 0.15, 1)\n    );\n\n    const textHovered = toRgba(\n      hsla(textHsla[0], textHsla[1] - 0.34, textHsla[2] + 0.1, 1)\n    );\n    const textPressed = toRgba(\n      hsla(textHsla[0], textHsla[1] - 0.48, textHsla[2] + 0.2, 1)\n    );\n\n    const tenantThemeWithGeneratedStateColors: FlipThemeProviderTenantColors & {\n      [key: string]: string;\n    } = {\n      ...tenantTheme,\n      primaryHovered: primaryHovered,\n      primaryPressed: primaryPressed,\n      secondaryHovered: secondaryHovered,\n      secondaryPressed: secondaryPressed,\n      textHovered: textHovered,\n      textPressed: textPressed,\n    };\n\n    // set custom properties for tenant theme colors\n    Object.entries(tenantColorMapping).forEach(([key, value]) =>\n      rootElement.style.setProperty(\n        key,\n        tenantThemeWithGeneratedStateColors[value]\n      )\n    );\n  }\n\n  private resetTenantVariables() {\n    const rootElement = this.resolvedConfig.rootElement;\n\n    [\n      ...Object.keys(tenantColorMapping),\n      \"primaryHovered\",\n      \"primaryPressed\",\n      \"secondaryHovered\",\n      \"secondaryPressed\",\n      \"textHovered\",\n      \"textPressed\",\n    ].forEach((key) => rootElement.style.removeProperty(key));\n  }\n\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/flip-thumbnail.entry.js

@@ -1,5 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-64709274.js';
-import { c as classnames } from './index-3c78bcaf.js';
+import { r as registerInstance, h, H as Host } from './index-5a3b2828.js';
+import { c as classnames } from './index-6d2e18c6.js';
+import './_commonjsHelpers-44457d8d.js';
 
 const flipThumbnailCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.thumbnail{position:relative;display:inline-flex;overflow:hidden;border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1)}.thumbnail--size-s{--flip-thumbnail-size:2.5rem}.thumbnail--size-m{--flip-thumbnail-size:3rem}.thumbnail--size-l{--flip-thumbnail-size:4rem}.thumbnail--format-landscape{width:var(--flip-thumbnail-size);aspect-ratio:4 / 3}.thumbnail--format-landscape .thumbnail__image{width:100%}.thumbnail--format-portrait{height:var(--flip-thumbnail-size);aspect-ratio:3 / 4}.thumbnail--format-portrait .thumbnail__image{height:100%}.thumbnail--format-square{width:var(--flip-thumbnail-size);height:var(--flip-thumbnail-size)}.thumbnail--format-square .thumbnail__image{width:100%}.thumbnail__image{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}";
 
@@ -17,3 +18,5 @@ const FlipThumbnail = class {
 FlipThumbnail.style = flipThumbnailCss;
 
 export { FlipThumbnail as flip_thumbnail };
+
+//# sourceMappingURL=flip-thumbnail.entry.js.map

package/dist/esm/flip-thumbnail.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-thumbnail.entry.js","mappings":";;;;AAAA,MAAM,gBAAgB,GAAG,u2BAAu2B;;MCYn3B,aAAa;EAL1B;;IAOU,WAAM,GAAyB,WAAW,CAAC;IAC3C,SAAI,GAAsB,GAAG,CAAC;GAuBvC;EApBC,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAC1B,WAAW,EACX,qBAAqB,IAAI,CAAC,MAAM,EAAE,EAClC,mBAAmB,IAAI,CAAC,IAAI,EAAE,CAC/B,CAAC;IAEF,QACE,EAAC,IAAI,QACH,YAAM,KAAK,EAAE,SAAS,IACpB,WACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAC,kBAAkB,EACxB,OAAO,EAAC,MAAM,EACd,GAAG,EAAE,IAAI,CAAC,GAAG,GACb,CACG,CACF,EACP;GACH;;;;;;","names":[],"sources":["./src/components/flip-thumbnail/flip-thumbnail.css?tag=flip-thumbnail&encapsulation=shadow","./src/components/flip-thumbnail/flip-thumbnail.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.thumbnail {\n  position: relative;\n  display: inline-flex;\n  overflow: hidden;\n  border-radius: var(--s-border-radius-s);\n  box-shadow: inset 0 0 0 0.03125rem rgba(0, 0, 0, 0.1);\n}\n\n.thumbnail--size-s {\n  --flip-thumbnail-size: 2.5rem;\n}\n\n.thumbnail--size-m {\n  --flip-thumbnail-size: 3rem;\n}\n\n.thumbnail--size-l {\n  --flip-thumbnail-size: 4rem;\n}\n\n.thumbnail--format-landscape {\n  width: var(--flip-thumbnail-size);\n  aspect-ratio: 4 / 3;\n\n  & .thumbnail__image {\n    width: 100%;\n  }\n}\n\n.thumbnail--format-portrait {\n  height: var(--flip-thumbnail-size);\n  aspect-ratio: 3 / 4;\n\n  & .thumbnail__image {\n    height: 100%;\n  }\n}\n\n.thumbnail--format-square {\n  width: var(--flip-thumbnail-size);\n  height: var(--flip-thumbnail-size);\n\n  & .thumbnail__image {\n    width: 100%;\n  }\n}\n\n.thumbnail__image {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate3d(-50%, -50%, 0);\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipThumbnailFormat = \"portrait\" | \"landscape\" | \"square\";\n\nexport type FlipThumbnailSize = \"s\" | \"m\" | \"l\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-thumbnail.css\",\n  tag: \"flip-thumbnail\",\n})\nexport class FlipThumbnail {\n  @Prop() alt!: string;\n  @Prop() format?: FlipThumbnailFormat = \"landscape\";\n  @Prop() size: FlipThumbnailSize = \"m\";\n  @Prop() src!: string;\n\n  render() {\n    const className = classnames(\n      \"thumbnail\",\n      `thumbnail--format-${this.format}`,\n      `thumbnail--size-${this.size}`\n    );\n\n    return (\n      <Host>\n        <span class={className}>\n          <img\n            alt={this.alt}\n            class=\"thumbnail__image\"\n            loading=\"lazy\"\n            src={this.src}\n          />\n        </span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/flip-toast-provider.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-64709274.js';
+import { r as registerInstance, h, H as Host } from './index-5a3b2828.js';
 
 const FlipToastProvider = class {
   constructor(hostRef) {
@@ -48,3 +48,5 @@ const FlipToastProvider = class {
 };
 
 export { FlipToastProvider as flip_toast_provider };
+
+//# sourceMappingURL=flip-toast-provider.entry.js.map

package/dist/esm/flip-toast-provider.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-toast-provider.entry.js","mappings":";;MAuBa,iBAAiB;EAJ9B;;IAWmB,WAAM,GAAuB,EAAE,CAAC;IAoDjD,cAAS,GAAG,CAAC,KAAmC;MAC9C,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CACnC,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,KAAK,KAAK,CAAC,MAAM,CAC1C,CAAC;KACH,CAAC;GAiBH;;;;;;EAjEC,MAAM,QAAQ;IACZ,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;GAClB;;;;;;EAQD,MAAM,OAAO,CAAC,OAAe;IAC3B,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,CAAC;GAC7E;;;;;;EAQD,MAAM,KAAK,CAAC,QAAyB;IACnC,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC,OAAO,CAAC,EAAE;MACnE,OAAO;KACR;IAED,MAAM,QAAQ,GACZ,IAAI,CAAC,cAAc,KAAK,SAAS;QAC7B,QAAQ,CAAC,QAAQ;QACjB,IAAI,CAAC,cAAc,KAAK,CAAC;UACzB,SAAS;UACT,IAAI,CAAC,cAAc,CAAC;IAE1B,MAAM,cAAc,mCACf,QAAQ,KACX,SAAS,EAAE,IAAI,IAAI,EAAE,EACrB,QAAQ,EACR,OAAO,EAAE,QAAQ,CAAC,OAAO,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,CAAC,GACvE,CAAC;IAEF,IAAI,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAE/C,OAAO,cAAc,CAAC;GACvB;EAQD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,IACjB,kBAAY,OAAO,EAAC,IAAI,IACrB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,KAAK,MACrB,gCACE,GAAG,EAAE,KAAK,CAAC,OAAO,EAClB,SAAS,EAAE,IAAI,CAAC,SAAS,IACrB,KAAK,EACG,CACf,CAAC,CACS,CACR,EACP;GACH;;;;;","names":[],"sources":["./src/components/flip-toast-provider/flip-toast-provider.tsx"],"sourcesContent":["import { Component, h, Host, Method, Prop, State } from \"@stencil/core\";\nimport { FlipToastCustomEvent } from \"../../components\";\nimport { FlipToastIntent } from \"../flip-toast/flip-toast\";\n\nexport type FlipToastConfig = {\n  accessibleDismissLabel?: string;\n  content: string;\n  dismissLabel?: string;\n  duration?: number;\n  icon?: string;\n  intent?: FlipToastIntent;\n  toastId?: string;\n};\n\nexport type FlipToastMessage = FlipToastConfig & {\n  createdAt: Date;\n  toastId: string;\n};\n\n@Component({\n  shadow: true,\n  tag: \"flip-toast-provider\",\n})\nexport class FlipToastProvider {\n  /**\n   * Optional global duration for all toasts. Overrides any durations set via\n   * the `toast` method. Set to 0 to disable automatic closing of toasts.\n   */\n  @Prop() globalDuration?: number;\n\n  @State() private toasts: FlipToastMessage[] = [];\n\n  /**\n   * Clear all toasts\n   * @param newToast\n   * @returns\n   */\n  @Method()\n  async clearAll() {\n    this.toasts = [];\n  }\n\n  /**\n   * Dismiss a toast\n   * @param toastId\n   * @returns\n   */\n  @Method()\n  async dismiss(toastId: string) {\n    this.toasts = [...this.toasts].filter((toast) => toast.toastId !== toastId);\n  }\n\n  /**\n   * Create a new toast\n   * @param newToast\n   * @returns\n   */\n  @Method()\n  async toast(newToast: FlipToastConfig): Promise<FlipToastMessage> {\n    if (this.toasts.some((toast) => toast.toastId === newToast.toastId)) {\n      return;\n    }\n\n    const duration =\n      this.globalDuration === undefined\n        ? newToast.duration\n        : this.globalDuration === 0\n        ? undefined\n        : this.globalDuration;\n\n    const newToastWithId: FlipToastMessage = {\n      ...newToast,\n      createdAt: new Date(),\n      duration,\n      toastId: newToast.toastId || String(Math.round(Math.random() * 10000)),\n    };\n\n    this.toasts = [...this.toasts, newToastWithId];\n\n    return newToastWithId;\n  }\n\n  onDismiss = (event: FlipToastCustomEvent<string>) => {\n    this.toasts = [...this.toasts].filter(\n      (toast) => toast.toastId !== event.detail\n    );\n  };\n\n  render() {\n    return (\n      <Host role=\"status\">\n        <flip-stack spacing=\"12\">\n          {this.toasts.map((toast) => (\n            <flip-toast\n              key={toast.toastId}\n              onDismiss={this.onDismiss}\n              {...toast}\n            ></flip-toast>\n          ))}\n        </flip-stack>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/flip-toast.entry.js

@@ -1,5 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-64709274.js';
-import { c as classnames } from './index-3c78bcaf.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-5a3b2828.js';
+import { c as classnames } from './index-6d2e18c6.js';
+import './_commonjsHelpers-44457d8d.js';
 
 const flipToastCss = ":host{display:flex}:host *{box-sizing:border-box}.toast{display:flex;width:100%;max-width:28rem;padding:var(--s-space-16);border-radius:0.75rem;color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default)}.toast--intent-critical{background-color:var(--s-surface-critical-default)}.toast--intent-success{background-color:var(--s-surface-success-default)}.toast__icon{display:inline-flex;margin-top:calc(-1 * var(--s-space-2));margin-right:0.625rem;flex-shrink:0}.toast__icon ::part(icon){color:var(--s-icon-on-status)}.toast__content{flex-grow:1;line-height:var(--s-line-height-base);text-align:left}.toast__dismiss-button{display:inline-flex;min-width:1.5rem;height:1.5rem;margin-top:calc(-1 * var(--s-space-2));margin-left:var(--s-space-16);padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;color:var(--s-text-on-status);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);cursor:pointer}.toast__dismiss-button ::part(icon){color:var(--s-icon-on-status)}";
 
@@ -46,3 +47,5 @@ const FlipToast = class {
 FlipToast.style = flipToastCss;
 
 export { FlipToast as flip_toast };
+
+//# sourceMappingURL=flip-toast.entry.js.map

package/dist/esm/flip-toast.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-toast.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,4gCAA4gC;;MCkBphC,SAAS;EALtB;;;IAMU,2BAAsB,GAAY,SAAS,CAAC;IAK5C,WAAM,GAAqB,SAAS,CAAC;IAqCrC,cAAS,GAAG;MAClB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACjC,CAAC;GAuBH;EAtDC,aAAa;IACX,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAED,gBAAgB;IACd,IAAI,CAAC,UAAU,EAAE,CAAC;GACnB;EAEO,UAAU;IAChB,IAAI,CAAC,UAAU,EAAE,CAAC;IAElB,IAAI,IAAI,CAAC,QAAQ,KAAK,SAAS,EAAE;MAC/B,OAAO;KACR;IAED,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC;MACxB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACjC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;GACnB;EAEO,UAAU;IAChB,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE;MAC1B,OAAO;KACR;IAED,YAAY,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IAC3B,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;GAC1B;EAMD,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,EAAE,iBAAiB,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IAEtE,QACE,EAAC,IAAI,QACH,WAAK,KAAK,EAAE,SAAS,IAClB,IAAI,CAAC,IAAI,IAAI,YAAM,KAAK,EAAC,aAAa,EAAC,SAAS,EAAE,IAAI,CAAC,IAAI,GAAS,EACrE,YAAM,KAAK,EAAC,gBAAgB,IAAE,IAAI,CAAC,OAAO,CAAQ,EAClD,4BACc,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,sBAAsB,EAC5D,KAAK,EAAC,uBAAuB,EAC7B,OAAO,EAAE,IAAI,CAAC,SAAS,EACvB,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,YAAY,EACjB,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,0BAAmC,CAC5D,CACL,CACD,EACP;GACH;;;;;;;;;","names":[],"sources":["./src/components/flip-toast/flip-toast.css?tag=flip-toast&encapsulation=shadow","./src/components/flip-toast/flip-toast.tsx"],"sourcesContent":[":host {\n  display: flex;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.toast {\n  display: flex;\n  width: 100%;\n  max-width: 28rem;\n  padding: var(--s-space-16);\n  border-radius: 0.75rem;\n  color: var(--s-text-on-status);\n  background-color: var(--s-surface-neutral-default);\n}\n\n.toast--intent-critical {\n  background-color: var(--s-surface-critical-default);\n}\n\n.toast--intent-success {\n  background-color: var(--s-surface-success-default);\n}\n\n.toast__icon {\n  display: inline-flex;\n  margin-top: calc(-1 * var(--s-space-2));\n  margin-right: 0.625rem;\n  flex-shrink: 0;\n\n  & ::part(icon) {\n    color: var(--s-icon-on-status);\n  }\n}\n\n.toast__content {\n  flex-grow: 1;\n  line-height: var(--s-line-height-base);\n  text-align: left;\n}\n\n.toast__dismiss-button {\n  display: inline-flex;\n  min-width: 1.5rem;\n  height: 1.5rem;\n  margin-top: calc(-1 * var(--s-space-2));\n  margin-left: var(--s-space-16);\n  padding: 0;\n  flex-shrink: 0;\n  justify-content: center;\n  align-items: center;\n  border: none;\n  color: var(--s-text-on-status);\n  background-color: transparent;\n  font: inherit;\n  font-weight: var(--s-font-weight-semibold);\n  cursor: pointer;\n\n  & ::part(icon) {\n    color: var(--s-icon-on-status);\n  }\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Prop,\n  Watch,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipToastIntent = \"default\" | \"critical\" | \"success\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-toast.css\",\n  tag: \"flip-toast\",\n})\nexport class FlipToast {\n  @Prop() accessibleDismissLabel?: string = \"Dismiss\";\n  @Prop() content!: string;\n  @Prop() dismissLabel?: string;\n  @Prop() duration?: number;\n  @Prop() icon?: string;\n  @Prop() intent?: FlipToastIntent = \"default\";\n  @Prop() toastId!: string;\n\n  @Event() dismiss: EventEmitter<string>;\n\n  private timeout: NodeJS.Timeout;\n\n  @Watch(\"duration\")\n  watchDuration() {\n    this.startTimer();\n  }\n\n  componentDidLoad() {\n    this.startTimer();\n  }\n\n  private startTimer() {\n    this.clearTimer();\n\n    if (this.duration === undefined) {\n      return;\n    }\n\n    this.timeout = setTimeout(() => {\n      this.dismiss.emit(this.toastId);\n    }, this.duration);\n  }\n\n  private clearTimer() {\n    if (!Boolean(this.timeout)) {\n      return;\n    }\n\n    clearTimeout(this.timeout);\n    this.timeout = undefined;\n  }\n\n  private onDismiss = () => {\n    this.dismiss.emit(this.toastId);\n  };\n\n  render() {\n    const className = classnames(\"toast\", `toast--intent-${this.intent}`);\n\n    return (\n      <Host>\n        <div class={className}>\n          {this.icon && <span class=\"toast__icon\" innerHTML={this.icon}></span>}\n          <span class=\"toast__content\">{this.content}</span>\n          <button\n            aria-label={this.dismissLabel || this.accessibleDismissLabel}\n            class=\"toast__dismiss-button\"\n            onClick={this.onDismiss}\n            type=\"button\"\n          >\n            {this.dismissLabel}\n            {!Boolean(this.dismissLabel) && <flip-icon-close></flip-icon-close>}\n          </button>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/flip-tooltip.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-64709274.js';
+import { r as registerInstance, h, H as Host } from './index-5a3b2828.js';
 import { c as computePosition, o as offset, s as shift, f as flip } from './floating-ui.dom.esm-1a4e8b8a.js';
 
 const flipTooltipCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.tooltip{display:inline-flex}.tooltip .tooltip__reference{display:inline-flex}.tooltip__popper{position:fixed;z-index:var(--s-z-40);max-width:17.5rem}.tooltip__bubble{position:relative;display:block;padding-top:var(--s-space-8);padding-right:var(--s-space-12);padding-bottom:var(--s-space-8);padding-left:var(--s-space-12);border-radius:var(--s-border-radius-sm);color:var(--s-text-on-status);background-color:var(--s-surface-neutral-default);line-height:var(--s-line-height-base);-webkit-animation:tooltip-fade-in 0.1s;animation:tooltip-fade-in 0.1s;backgrund-color:red}.tooltip__arrow{position:absolute;width:0.5rem;height:0.5rem;background-color:var(--s-surface-neutral-default)}@-webkit-keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}@keyframes tooltip-fade-in{from{opacity:0}to{opacity:1}}";
@@ -124,3 +124,5 @@ const FlipTooltip = class {
 FlipTooltip.style = flipTooltipCss;
 
 export { FlipTooltip as flip_tooltip };
+
+//# sourceMappingURL=flip-tooltip.entry.js.map

package/dist/esm/flip-tooltip.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-tooltip.entry.js","mappings":"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","names":[],"sources":["./src/components/flip-tooltip/flip-tooltip.css?tag=flip-tooltip&encapsulation=shadow","./src/components/flip-tooltip/flip-tooltip.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.tooltip {\n  display: inline-flex;\n}\n\n.tooltip .tooltip__reference {\n  display: inline-flex;\n}\n\n.tooltip__popper {\n  position: fixed;\n  z-index: var(--s-z-40);\n  max-width: 17.5rem;\n}\n\n.tooltip__bubble {\n  position: relative;\n  display: block;\n  padding-top: var(--s-space-8);\n  padding-right: var(--s-space-12);\n  padding-bottom: var(--s-space-8);\n  padding-left: var(--s-space-12);\n  border-radius: var(--s-border-radius-sm);\n  color: var(--s-text-on-status);\n  background-color: var(--s-surface-neutral-default);\n  line-height: var(--s-line-height-base);\n  animation: tooltip-fade-in 0.1s;\n  backgrund-color: red;\n}\n\n.tooltip__arrow {\n  position: absolute;\n  width: 0.5rem;\n  height: 0.5rem;\n  background-color: var(--s-surface-neutral-default);\n}\n\n@keyframes tooltip-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n","import {\n  computePosition,\n  ComputePositionConfig,\n  ComputePositionReturn,\n  flip,\n  offset,\n  shift,\n} from \"@floating-ui/dom\";\nimport { Component, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\n\nexport type FlipTooltipPosition = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-tooltip.css\",\n  tag: \"flip-tooltip\",\n})\nexport class FlipTooltip {\n  @Prop() content!: string;\n  @Prop() delay?: number = 300;\n  @Prop() position?: FlipTooltipPosition = \"top\";\n\n  @State() actualPosition: ComputePositionReturn;\n  @State() visible = false;\n\n  private showTimeout: NodeJS.Timeout;\n  private options: Partial<ComputePositionConfig>;\n  private popperEl: HTMLSpanElement;\n  private referenceEl: HTMLSpanElement;\n\n  @Watch(\"position\")\n  watchPosition() {\n    this.updateOptions();\n  }\n\n  @Listen(\"mouseenter\")\n  onMouseEnter() {\n    this.showWithDelay();\n  }\n\n  @Listen(\"mouseleave\")\n  onMouseLeave() {\n    this.hide();\n  }\n\n  @Listen(\"resize\", { target: \"window\" })\n  onWindowResize() {\n    this.reposition();\n  }\n\n  @Listen(\"scroll\", { target: \"window\" })\n  onWindowScroll() {\n    this.reposition();\n  }\n\n  componentWillLoad() {\n    this.reposition();\n  }\n\n  componentDidLoad() {\n    this.updateOptions();\n  }\n\n  private onKeydown = (event: KeyboardEvent) => {\n    if (event.code === \"Escape\") {\n      this.hide();\n    }\n  };\n\n  private reposition = async () => {\n    if (!Boolean(this.referenceEl) || !Boolean(this.popperEl)) {\n      return;\n    }\n\n    this.actualPosition = await computePosition(\n      this.referenceEl,\n      this.popperEl,\n      this.options\n    );\n  };\n\n  private show = () => {\n    this.visible = true;\n\n    requestAnimationFrame(() => {\n      this.reposition();\n    });\n  };\n\n  private showWithDelay = () => {\n    if (Boolean(this.showTimeout)) {\n      clearTimeout(this.showTimeout);\n      this.showTimeout = undefined;\n    }\n\n    this.showTimeout = setTimeout(() => {\n      this.show();\n    }, this.delay);\n  };\n\n  private hide = () => {\n    if (Boolean(this.showTimeout)) {\n      clearTimeout(this.showTimeout);\n      this.showTimeout = undefined;\n    }\n\n    this.visible = false;\n  };\n\n  private updateOptions = () => {\n    const margin =\n      +getComputedStyle(document.documentElement)\n        .getPropertyValue(\"--s-space-12\")\n        .replace(\"rem\", \"\") * 16;\n\n    this.options = {\n      middleware: [offset(margin), shift(), flip()],\n      placement: this.position,\n      strategy: \"fixed\",\n    };\n  };\n\n  private getArrowStyles = () => {\n    if (this.actualPosition?.placement === \"top\") {\n      return {\n        top: \"100%\",\n        left: \"50%\",\n        transform: \"translate3d(-50%, -50%, 0) rotate(45deg)\",\n      };\n    }\n\n    if (this.actualPosition?.placement === \"bottom\") {\n      return {\n        bottom: \"100%\",\n        left: \"50%\",\n        transform: \"translate3d(-50%, 50%, 0) rotate(45deg)\",\n      };\n    }\n\n    if (this.actualPosition?.placement === \"right\") {\n      return {\n        top: \"50%\",\n        right: \"100%\",\n        transform: \"translate3d(50%, -50%, 0) rotate(45deg)\",\n      };\n    }\n\n    if (this.actualPosition?.placement === \"left\") {\n      return {\n        top: \"50%\",\n        left: \"100%\",\n        transform: \"translate3d(-50%, -50%, 0) rotate(45deg)\",\n      };\n    }\n  };\n\n  render() {\n    const arrowStyles = this.getArrowStyles();\n\n    return (\n      <Host onKeydown={this.onKeydown}>\n        <span class=\"tooltip\">\n          <span\n            class=\"tooltip__reference\"\n            aria-describedby=\"tooltip\"\n            onBlur={this.hide}\n            onClick={this.hide}\n            onFocus={this.show}\n            ref={(el) => (this.referenceEl = el)}\n            tabIndex={0}\n          >\n            <slot></slot>\n          </span>\n          <span\n            class=\"tooltip__popper\"\n            ref={(el) => (this.popperEl = el)}\n            style={{\n              top: Boolean(this.actualPosition)\n                ? `${this.actualPosition?.y}px`\n                : \"\",\n              left: Boolean(this.actualPosition)\n                ? `${this.actualPosition?.x}px`\n                : \"\",\n            }}\n          >\n            {this.visible && (\n              <span class=\"tooltip__bubble\" id=\"tooltip\" role=\"tooltip\">\n                <span class=\"tooltip__content\" innerHTML={this.content}></span>\n                <span class=\"tooltip__arrow\" style={arrowStyles}></span>\n              </span>\n            )}\n          </span>\n        </span>\n      </Host>\n    );\n  }\n}\n"],"version":3}