@getflip/swirl-components 0.1.0 → 0.3.0

package/dist/esm/flip-resource-list.entry.js

@@ -0,0 +1,65 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-5a3b2828.js';
+
+const flipResourceListCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}";
+
+const FlipResourceList = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.focusedIndex = 0;
+    this.onFocus = () => {
+      this.focusItemAtIndex(this.focusedIndex);
+    };
+    this.onKeyDown = (event) => {
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);
+      }
+      else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        const prevIndex = this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;
+        this.focusItemAtIndex(prevIndex);
+      }
+      else if (event.key === "Home") {
+        event.preventDefault();
+        this.focusItemAtIndex(0);
+      }
+      else if (event.key === "End") {
+        event.preventDefault();
+        this.focusItemAtIndex(this.items.length - 1);
+      }
+    };
+  }
+  componentDidLoad() {
+    this.collectItems();
+    this.removeItemsFromTabOrder();
+  }
+  collectItems() {
+    this.items = Array.from(this.el.querySelectorAll("flip-resource-list-item, flip-resource-list-file-item"));
+  }
+  removeItemsFromTabOrder() {
+    this.items.forEach((item) => {
+      var _a, _b;
+      return (_b = (_a = item.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".resource-list-item__content, .resource-list-file-item")) === null || _b === void 0 ? void 0 : _b.setAttribute("tabIndex", "-1");
+    });
+  }
+  focusItemAtIndex(index) {
+    this.removeItemsFromTabOrder();
+    const item = this.items[index];
+    if (!Boolean(item)) {
+      return;
+    }
+    const interactiveElement = item.shadowRoot.querySelector(".resource-list-item__content, .resource-list-file-item");
+    interactiveElement.setAttribute("tabIndex", "0");
+    interactiveElement.focus();
+    this.focusedIndex = index;
+  }
+  render() {
+    return (h(Host, { onKeyDown: this.onKeyDown }, h("flip-stack", { "aria-label": this.label, onFocus: this.onFocus, role: "grid", tabIndex: 0 }, h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+FlipResourceList.style = flipResourceListCss;
+
+export { FlipResourceList as flip_resource_list };
+
+//# sourceMappingURL=flip-resource-list.entry.js.map

package/dist/esm/flip-resource-list.entry.js.map

@@ -0,0 +1 @@
+{"file":"flip-resource-list.entry.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,+DAA+D;;MCO9E,gBAAgB;EAL7B;;IAUU,iBAAY,GAAG,CAAC,CAAC;IA6CjB,YAAO,GAAG;MAChB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC1C,CAAC;IAEM,cAAS,GAAG,CAAC,KAAoB;MACvC,IAAI,KAAK,CAAC,GAAG,KAAK,WAAW,EAAE;QAC7B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,gBAAgB,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;OACpE;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,SAAS,EAAE;QAClC,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,MAAM,SAAS,GACb,IAAI,CAAC,YAAY,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;QAE1E,IAAI,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC;OAClC;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,MAAM,EAAE;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;OAC1B;WAAM,IAAI,KAAK,CAAC,GAAG,KAAK,KAAK,EAAE;QAC9B,KAAK,CAAC,cAAc,EAAE,CAAC;QAEvB,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;OAC9C;KACF,CAAC;GAgBH;EAlFC,gBAAgB;IACd,IAAI,CAAC,YAAY,EAAE,CAAC;IACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;GAChC;EAEO,YAAY;IAClB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CACrB,IAAI,CAAC,EAAE,CAAC,gBAAgB,CACtB,uDAAuD,CACxD,CACF,CAAC;GACH;EAEO,uBAAuB;IAC7B,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;;MACtB,OAAA,MAAA,MAAA,IAAI,CAAC,UAAU,0CACX,aAAa,CACb,wDAAwD,CACzD,0CACC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAA;KAAA,CACnC,CAAC;GACH;EAEO,gBAAgB,CAAC,KAAa;IACpC,IAAI,CAAC,uBAAuB,EAAE,CAAC;IAE/B,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAE/B,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;MAClB,OAAO;KACR;IAED,MAAM,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CACtD,wDAAwD,CACzD,CAAC;IAEF,kBAAkB,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACjD,kBAAkB,CAAC,KAAK,EAAE,CAAC;IAE3B,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;GAC3B;EA4BD,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,SAAS,EAAE,IAAI,CAAC,SAAS,IAC7B,gCACc,IAAI,CAAC,KAAK,EACtB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,CAAC,IAEX,eAAa,CACF,CACR,EACP;GACH;;;;;;;","names":[],"sources":["./src/components/flip-resource-list/flip-resource-list.css?tag=flip-resource-list&encapsulation=shadow","./src/components/flip-resource-list/flip-resource-list.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-resource-list.css\",\n  tag: \"flip-resource-list\",\n})\nexport class FlipResourceList {\n  @Element() el: HTMLElement;\n\n  @Prop() label?: string;\n\n  private focusedIndex = 0;\n  private items: HTMLFlipResourceListItemElement[];\n\n  componentDidLoad() {\n    this.collectItems();\n    this.removeItemsFromTabOrder();\n  }\n\n  private collectItems() {\n    this.items = Array.from(\n      this.el.querySelectorAll(\n        \"flip-resource-list-item, flip-resource-list-file-item\"\n      )\n    );\n  }\n\n  private removeItemsFromTabOrder() {\n    this.items.forEach((item) =>\n      item.shadowRoot\n        ?.querySelector(\n          \".resource-list-item__content, .resource-list-file-item\"\n        )\n        ?.setAttribute(\"tabIndex\", \"-1\")\n    );\n  }\n\n  private focusItemAtIndex(index: number) {\n    this.removeItemsFromTabOrder();\n\n    const item = this.items[index];\n\n    if (!Boolean(item)) {\n      return;\n    }\n\n    const interactiveElement = item.shadowRoot.querySelector<HTMLElement>(\n      \".resource-list-item__content, .resource-list-file-item\"\n    );\n\n    interactiveElement.setAttribute(\"tabIndex\", \"0\");\n    interactiveElement.focus();\n\n    this.focusedIndex = index;\n  }\n\n  private onFocus = () => {\n    this.focusItemAtIndex(this.focusedIndex);\n  };\n\n  private onKeyDown = (event: KeyboardEvent) => {\n    if (event.key === \"ArrowDown\") {\n      event.preventDefault();\n      this.focusItemAtIndex((this.focusedIndex + 1) % this.items.length);\n    } else if (event.key === \"ArrowUp\") {\n      event.preventDefault();\n\n      const prevIndex =\n        this.focusedIndex === 0 ? this.items.length - 1 : this.focusedIndex - 1;\n\n      this.focusItemAtIndex(prevIndex);\n    } else if (event.key === \"Home\") {\n      event.preventDefault();\n\n      this.focusItemAtIndex(0);\n    } else if (event.key === \"End\") {\n      event.preventDefault();\n\n      this.focusItemAtIndex(this.items.length - 1);\n    }\n  };\n\n  render() {\n    return (\n      <Host onKeyDown={this.onKeyDown}>\n        <flip-stack\n          aria-label={this.label}\n          onFocus={this.onFocus}\n          role=\"grid\"\n          tabIndex={0}\n        >\n          <slot></slot>\n        </flip-stack>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,5 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-36517fab.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 flipSearchCss = ".sc-flip-search-h{display:flex;width:100%}.sc-flip-search-h *.sc-flip-search{box-sizing:border-box}.search.sc-flip-search{position:relative;display:flex;width:100%}.search--disabled.sc-flip-search .search__icon.sc-flip-search{color:var(--s-icon-disabled)}.search--disabled.sc-flip-search .search__input.sc-flip-search{color:var(--s-text-disabled)}.search--disabled.sc-flip-search .search__input.sc-flip-search::-moz-placeholder{color:var(--s-text-disabled)}.search--disabled.sc-flip-search .search__input.sc-flip-search::placeholder{color:var(--s-text-disabled)}.search__icon.sc-flip-search{position:absolute;top:50%;left:var(--s-space-12);display:inline-flex;color:var(--s-icon-default);transform:translateY(-50%)}.search__input.sc-flip-search{width:100%;height:2.5rem;padding-top:var(--s-space-8);padding-right:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));padding-bottom:var(--s-space-8);padding-left:calc(var(--s-space-12) + 1.5rem + var(--s-space-8));border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--s-surface-raised-default);font:inherit;line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}.search__input.sc-flip-search:focus{outline-color:var(--s-focus-default)}.search__input.sc-flip-search::-moz-placeholder{color:var(--s-text-subdued)}.search__input.sc-flip-search::placeholder{color:var(--s-text-subdued)}.search__input.sc-flip-search::-webkit-search-decoration,.search__input.sc-flip-search::-webkit-search-cancel-button,.search__input.sc-flip-search::-webkit-search-results-button,.search__input.sc-flip-search::-webkit-search-results-decoration{-webkit-appearance:none;appearance:none}.search__input.sc-flip-search:not(:-moz-placeholder-shown)+.search__clear-button.sc-flip-search{display:inline-flex}.search__input.sc-flip-search:not(:placeholder-shown)+.search__clear-button.sc-flip-search{display:inline-flex}.search__clear-button.sc-flip-search{position:absolute;top:50%;right:var(--s-space-12);display:none;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer;transform:translateY(-50%)}";
 
@@ -41,3 +42,5 @@ const FlipSearch = class {
 FlipSearch.style = flipSearchCss;
 
 export { FlipSearch as flip_search };
+
+//# sourceMappingURL=flip-search.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"flip-search.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,ulEAAulE;;MCuBhmE,UAAU;EAZvB;;;;;IAcU,qBAAgB,GAAY,mBAAmB,CAAC;IAKhD,gBAAW,GAAY,UAAU,CAAC;IAmBlC,UAAK,GAAG;MACd,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC;MACtB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB,CAAC;IAEM,WAAM,GAAG,CAAC,KAAiB;MACjC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC5B,CAAC;IAEM,aAAQ,GAAG,CAAC,KAAY;MAC9B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;KACjE,CAAC;IAEM,YAAO,GAAG,CAAC,KAAiB;MAClC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KAC7B,CAAC;GA2CH;EAnEC,SAAS,CAAC,KAAoB;IAC5B,IACE,CAAC,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO;OAC/C,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO,CAAC,EAChC;MACA,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;KACpB;GACF;EAmBD,MAAM;IACJ,MAAM,SAAS,GAAG,UAAU,CAAC,QAAQ,EAAE;MACrC,kBAAkB,EAAE,IAAI,CAAC,QAAQ;KAClC,CAAC,CAAC;IAEH,QACE,EAAC,IAAI,QACH,YAAM,KAAK,EAAE,SAAS,IACpB,wBAAkB,KAAK,EAAC,cAAc,GAAoB,EAC1D,8BACiB,IAAI,CAAC,QAAQ,GAAG,MAAM,GAAG,SAAS,gBACrC,IAAI,CAAC,KAAK,EACtB,YAAY,EAAC,KAAK,EAClB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,KAAK,EAAC,eAAe,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,SAAS,EAAC,QAAQ,EAClB,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,EAC9B,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,GACjB,EACD,CAAC,IAAI,CAAC,QAAQ,KACb,4BACc,IAAI,CAAC,gBAAgB,EACjC,KAAK,EAAC,sBAAsB,EAC5B,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,IAAI,EAAC,QAAQ,IAEb,2BAAqC,CAC9B,CACV,CACI,CACF,EACP;GACH;;;;;;","names":[],"sources":["./src/components/flip-search/flip-search.css?tag=flip-search&encapsulation=scoped","./src/components/flip-search/flip-search.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.search {\n  position: relative;\n  display: flex;\n  width: 100%;\n}\n\n.search--disabled {\n  & .search__icon {\n    color: var(--s-icon-disabled);\n  }\n\n  & .search__input {\n    color: var(--s-text-disabled);\n\n    &::placeholder {\n      color: var(--s-text-disabled);\n    }\n  }\n}\n\n.search__icon {\n  position: absolute;\n  top: 50%;\n  left: var(--s-space-12);\n  display: inline-flex;\n  color: var(--s-icon-default);\n  transform: translateY(-50%);\n}\n\n.search__input {\n  width: 100%;\n  height: 2.5rem;\n  padding-top: var(--s-space-8);\n  padding-right: calc(var(--s-space-12) + 1.5rem + var(--s-space-8));\n  padding-bottom: var(--s-space-8);\n  padding-left: calc(var(--s-space-12) + 1.5rem + var(--s-space-8));\n  border: none;\n  border-radius: var(--s-border-radius-base);\n  color: var(--s-text-default);\n  background-color: var(--s-surface-raised-default);\n  font: inherit;\n  line-height: var(--s-line-height-base);\n  caret-color: var(--s-border-highlight);\n\n  &:focus {\n    outline-color: var(--s-focus-default);\n  }\n\n  &::placeholder {\n    color: var(--s-text-subdued);\n  }\n\n  &::-webkit-search-decoration,\n  &::-webkit-search-cancel-button,\n  &::-webkit-search-results-button,\n  &::-webkit-search-results-decoration {\n    appearance: none;\n  }\n\n  &:not(:placeholder-shown) {\n    & + .search__clear-button {\n      display: inline-flex;\n    }\n  }\n}\n\n.search__clear-button {\n  position: absolute;\n  top: 50%;\n  right: var(--s-space-12);\n  display: none;\n  padding: 0;\n  border: none;\n  color: var(--s-icon-default);\n  background-color: transparent;\n  cursor: pointer;\n  transform: translateY(-50%);\n}\n","import {\n  Component,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Listen,\n  Prop,\n} from \"@stencil/core\";\nimport classnames from \"classnames\";\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-search.css\",\n  tag: \"flip-search\",\n})\nexport class FlipSearch {\n  @Prop() autoFocus?: boolean;\n  @Prop() clearButtonLabel?: string = \"Clear search term\";\n  @Prop() disabled?: boolean;\n  @Prop() inputName?: string;\n  @Prop() inputId?: string;\n  @Prop() label?: string;\n  @Prop() placeholder?: string = \"Search …\";\n  @Prop({ mutable: true }) value?: string;\n\n  @Event() inputBlur: EventEmitter<FocusEvent>;\n  @Event() inputFocus: EventEmitter<FocusEvent>;\n  @Event() valueChange: EventEmitter<string>;\n\n  private input: HTMLInputElement;\n\n  @Listen(\"keydown\", { target: \"window\" })\n  onKeyDown(event: KeyboardEvent) {\n    if (\n      (event.code === \"KeyK\" || event.code === \"Slash\") &&\n      (event.ctrlKey || event.metaKey)\n    ) {\n      this.input.focus();\n    }\n  }\n\n  private clear = () => {\n    this.input.value = \"\";\n    this.input.focus();\n  };\n\n  private onBlur = (event: FocusEvent) => {\n    this.inputBlur.emit(event);\n  };\n\n  private onChange = (event: Event) => {\n    this.valueChange.emit((event.target as HTMLInputElement).value);\n  };\n\n  private onFocus = (event: FocusEvent) => {\n    this.inputFocus.emit(event);\n  };\n\n  render() {\n    const className = classnames(\"search\", {\n      \"search--disabled\": this.disabled,\n    });\n\n    return (\n      <Host>\n        <span class={className}>\n          <flip-icon-search class=\"search__icon\"></flip-icon-search>\n          <input\n            aria-disabled={this.disabled ? \"true\" : undefined}\n            aria-label={this.label}\n            autoComplete=\"off\"\n            autoFocus={this.autoFocus}\n            class=\"search__input\"\n            disabled={this.disabled}\n            id={this.inputId}\n            inputMode=\"search\"\n            name={this.inputName}\n            onBlur={this.onBlur}\n            onChange={this.onChange}\n            onFocus={this.onFocus}\n            placeholder={this.placeholder}\n            ref={(el) => (this.input = el)}\n            type=\"search\"\n            value={this.value}\n          />\n          {!this.disabled && (\n            <button\n              aria-label={this.clearButtonLabel}\n              class=\"search__clear-button\"\n              onClick={this.clear}\n              type=\"button\"\n            >\n              <flip-icon-cancel></flip-icon-cancel>\n            </button>\n          )}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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

@@ -1,5 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-36517fab.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 flipStackCss = ":host{display:block;width:100%}:host *{box-sizing:border-box}.stack{display:flex;width:100%;max-width:100%}.stack ::slotted(*){min-width:0;max-width:100%;flex-basis:auto;flex-grow:0;flex-shrink:0}.stack--align-start{align-items:flex-start}.stack--align-center{align-items:center}.stack--align-end{align-items:flex-end}.stack--align-stretch{align-items:stretch}.stack--justify-start{justify-content:flex-start}.stack--justify-center{justify-content:center}.stack--justify-end{justify-content:flex-end}.stack--justify-space-between{justify-content:space-between}.stack--justify-space-around{justify-content:space-around}.stack--justify-space-evenly{justify-content:space-evenly}.stack--justify-stretch{justify-content:stretch}.stack--justify-stretch ::slotted(*){flex-grow:1}.stack--orientation-vertical{flex-direction:column}.stack--orientation-horizontal{flex-direction:row}.stack--wrap{flex-wrap:wrap}";
 
@@ -22,3 +23,5 @@ const FlipStack = class {
 FlipStack.style = flipStackCss;
 
 export { FlipStack as flip_stack };
+
+//# sourceMappingURL=flip-stack.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"flip-stack.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,w4BAAw4B;;MC+Bh5B,SAAS;EALtB;;IAMU,UAAK,GAAoB,OAAO,CAAC;IACjC,OAAE,GAAY,KAAK,CAAC;IACpB,YAAO,GAAsB,OAAO,CAAC;IACrC,gBAAW,GAA0B,UAAU,CAAC;IAChD,YAAO,GAAsB,GAAG,CAAC;IACjC,SAAI,GAAa,KAAK,CAAC;GAwBhC;EAtBC,MAAM;IACJ,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,CAAC;IAEpB,MAAM,SAAS,GAAG,UAAU,CAC1B,OAAO,EACP,gBAAgB,IAAI,CAAC,KAAK,EAAE,EAC5B,kBAAkB,IAAI,CAAC,OAAO,EAAE,EAChC,sBAAsB,IAAI,CAAC,WAAW,EAAE,EACxC,EAAE,aAAa,EAAE,IAAI,CAAC,IAAI,EAAE,CAC7B,CAAC;IAEF,QACE,EAAC,IAAI,QACH,EAAC,GAAG,IACF,KAAK,EAAE,SAAS,EAChB,KAAK,EAAE,EAAE,GAAG,EAAE,iBAAiB,IAAI,CAAC,OAAO,GAAG,EAAE,IAEhD,eAAa,CACT,CACD,EACP;GACH;;;;;;","names":[],"sources":["./src/components/flip-stack/flip-stack.css?tag=flip-stack&encapsulation=shadow","./src/components/flip-stack/flip-stack.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n\n  & * {\n    box-sizing: border-box;\n  }\n}\n\n.stack {\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n\n  & ::slotted(*) {\n    min-width: 0;\n    max-width: 100%;\n    flex-basis: auto;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n}\n\n.stack--align-start {\n  align-items: flex-start;\n}\n\n.stack--align-center {\n  align-items: center;\n}\n\n.stack--align-end {\n  align-items: flex-end;\n}\n\n.stack--align-stretch {\n  align-items: stretch;\n}\n\n.stack--justify-start {\n  justify-content: flex-start;\n}\n\n.stack--justify-center {\n  justify-content: center;\n}\n\n.stack--justify-end {\n  justify-content: flex-end;\n}\n\n.stack--justify-space-between {\n  justify-content: space-between;\n}\n\n.stack--justify-space-around {\n  justify-content: space-around;\n}\n\n.stack--justify-space-evenly {\n  justify-content: space-evenly;\n}\n\n.stack--justify-stretch {\n  justify-content: stretch;\n\n  & ::slotted(*) {\n    flex-grow: 1;\n  }\n}\n\n.stack--orientation-vertical {\n  flex-direction: column;\n}\n\n.stack--orientation-horizontal {\n  flex-direction: row;\n}\n\n.stack--wrap {\n  flex-wrap: wrap;\n}\n","import { Component, h, Host, Prop } from \"@stencil/core\";\nimport classnames from \"classnames\";\n\nexport type FlipStackAlign = \"start\" | \"center\" | \"end\" | \"stretch\";\n\nexport type FlipStackJustify =\n  | \"start\"\n  | \"center\"\n  | \"end\"\n  | \"space-between\"\n  | \"space-around\"\n  | \"space-evenly\"\n  | \"stretch\";\n\nexport type FlipStackOrientation = \"horizontal\" | \"vertical\";\n\nexport type FlipStackSpacing =\n  | \"0\"\n  | \"2\"\n  | \"4\"\n  | \"8\"\n  | \"12\"\n  | \"16\"\n  | \"24\"\n  | \"32\";\n\n@Component({\n  shadow: true,\n  styleUrl: \"flip-stack.css\",\n  tag: \"flip-stack\",\n})\nexport class FlipStack {\n  @Prop() align?: FlipStackAlign = \"start\";\n  @Prop() as?: string = \"div\";\n  @Prop() justify?: FlipStackJustify = \"start\";\n  @Prop() orientation?: FlipStackOrientation = \"vertical\";\n  @Prop() spacing?: FlipStackSpacing = \"0\";\n  @Prop() wrap?: boolean = false;\n\n  render() {\n    const Tag = this.as;\n\n    const className = classnames(\n      \"stack\",\n      `stack--align-${this.align}`,\n      `stack--justify-${this.justify}`,\n      `stack--orientation-${this.orientation}`,\n      { \"stack--wrap\": this.wrap }\n    );\n\n    return (\n      <Host>\n        <Tag\n          class={className}\n          style={{ gap: `var(--s-space-${this.spacing})` }}\n        >\n          <slot></slot>\n        </Tag>\n      </Host>\n    );\n  }\n}\n"],"version":3}

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-36517fab.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

@@ -0,0 +1,20 @@
+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}";
+
+const FlipTab = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    const className = classnames("tab", { "tab--active": this.active });
+    return (h(Host, { "aria-labelledby": `tab-${this.tabId}`, id: this.tabId, role: "tabpanel", tabIndex: this.active ? 0 : -1 }, h("div", { class: className }, h("slot", null))));
+  }
+};
+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

@@ -0,0 +1,123 @@
+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}}";
+
+const FlipTabs = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.tabActivated = createEvent(this, "tabActivated", 7);
+    this.tabs = [];
+    this.onKeyDown = (event) => {
+      if (event.code === "ArrowLeft") {
+        event.preventDefault();
+        this.activatePreviousTab();
+      }
+      else if (event.code === "ArrowRight") {
+        event.preventDefault();
+        this.activateNextTab();
+      }
+    };
+    this.onMouseEnter = (event, tab) => {
+      if (tab.tabId === this.activeTab) {
+        this.highlightedTab = undefined;
+        return;
+      }
+      this.highlightedTab =
+        event.target.closest(".tabs__tab") || undefined;
+    };
+    this.onMouseLeave = () => {
+      this.highlightedTab = undefined;
+    };
+  }
+  componentWillLoad() {
+    this.collectTabs();
+  }
+  componentDidRender() {
+    this.updateIndicatorPosition();
+  }
+  onWindowResize() {
+    this.updateIndicatorPosition();
+  }
+  /**
+   * Activate a tab.
+   * @param tabId
+   */
+  async activateTab(tabId) {
+    if (this.activeTab === tabId) {
+      return;
+    }
+    this.activeTab = tabId;
+    this.tabs.forEach((tab) => (tab.active = false));
+    const tab = this.tabs.find((tab) => tab.tabId === tabId);
+    if (!Boolean(tab)) {
+      return;
+    }
+    this.highlightedTab = undefined;
+    tab.active = true;
+    this.tabActivated.emit(tab);
+  }
+  activateNextTab() {
+    const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
+    const nextIndex = Math.min(this.tabs.length - 1, currentIndex + 1);
+    this.activateTab(this.tabs[nextIndex].tabId);
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = this.el.querySelector(".tabs__tab--active")) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+  }
+  activatePreviousTab() {
+    const currentIndex = this.tabs.findIndex((tab) => tab.tabId === this.activeTab);
+    const previousIndex = Math.max(0, currentIndex - 1);
+    this.activateTab(this.tabs[previousIndex].tabId);
+    requestAnimationFrame(() => {
+      var _a;
+      (_a = this.el.querySelector(".tabs__tab--active")) === null || _a === void 0 ? void 0 : _a.focus();
+    });
+  }
+  collectTabs() {
+    this.tabs = Array.from(this.el.querySelectorAll("flip-tab"));
+    if (this.tabs.length === 0) {
+      return;
+    }
+    const initialTab = this.tabs.find((tab) => tab.tabId === this.initialTab);
+    this.activateTab(Boolean(initialTab) ? initialTab.tabId : this.tabs[0].tabId);
+  }
+  updateIndicatorPosition() {
+    const activeTab = this.tabs.find((tab) => tab.tabId === this.activeTab);
+    if (!Boolean(activeTab) && !Boolean(this.highlightedTab)) {
+      this.indicatorEl.style.width = "";
+      this.indicatorEl.style.transform = "";
+      this.indicatorEl.style.backgroundColor = "";
+      return;
+    }
+    const activeTabEl = this.highlightedTab ||
+      this.el.querySelector(`#tab-${activeTab.tabId}`);
+    const activeTabLabelEl = activeTabEl.querySelector(".tabs__tab-label");
+    this.indicatorEl.style.width = `${activeTabLabelEl.getBoundingClientRect().width / 16}rem`;
+    this.indicatorEl.style.transform = `translate3d(${activeTabLabelEl.offsetLeft / 16}rem, 0, 0)`;
+    this.indicatorEl.style.backgroundColor = Boolean(this.highlightedTab)
+      ? "var(--s-border-default)"
+      : "";
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "tabs" }, h("div", { "aria-label": this.label, class: "tabs__tab-bar", onKeyDown: this.onKeyDown, role: "tablist" }, this.tabs.map((tab) => {
+      const isActive = tab.tabId === this.activeTab;
+      const className = classnames("tabs__tab", {
+        "tabs__tab--active": isActive,
+      });
+      return (h("button", { "aria-controls": tab.tabId, "aria-selected": isActive ? "true" : "false", class: className, id: `tab-${tab.tabId}`, key: tab.tabId,
+        // eslint-disable-next-line react/jsx-no-bind
+        onClick: () => this.activateTab(tab.tabId),
+        // eslint-disable-next-line react/jsx-no-bind
+        onMouseEnter: (event) => this.onMouseEnter(event, tab), onMouseLeave: this.onMouseLeave, role: "tab", tabIndex: isActive ? 0 : -1, type: "button" }, h("span", { class: "tabs__tab-label" }, tab.label)));
+    }), h("span", { class: "tabs__indicator", ref: (el) => (this.indicatorEl = el) })), h("slot", null))));
+  }
+  get el() { return getElement(this); }
+};
+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-36517fab.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}