@getflip/swirl-components 0.1.0

package/dist/components/flip-radio-group.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FlipRadioGroup extends Components.FlipRadioGroup, HTMLElement {}
+export const FlipRadioGroup: {
+  prototype: FlipRadioGroup;
+  new (): FlipRadioGroup;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/flip-radio-group.js

@@ -0,0 +1,67 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const flipRadioGroupCss = ".sc-flip-radio-group-h{display:block}.sc-flip-radio-group-h *.sc-flip-radio-group{box-sizing:border-box}.radio-group.sc-flip-radio-group{display:flex;flex-direction:column;gap:var(--s-space-4)}";
+
+const FlipRadioGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.valueChange = createEvent(this, "valueChange", 7);
+  }
+  componentDidLoad() {
+    this.radioButtons = Array.from(this.el.querySelectorAll("flip-radio"));
+    this.initValue();
+    this.handleValueChanges();
+  }
+  initValue() {
+    if (this.value === undefined) {
+      return;
+    }
+    const radioWithValue = this.radioButtons.find((radio) => radio.value === this.value);
+    if (!Boolean(radioWithValue)) {
+      return;
+    }
+    radioWithValue.checked = true;
+  }
+  handleValueChanges() {
+    for (const [key, radio] of Object.entries(this.radioButtons)) {
+      radio.addEventListener("valueChange", () => {
+        if (radio.checked === true || radio.checked === "true") {
+          this.valueChange.emit(radio.value);
+          this.radioButtons.forEach((r, k) => {
+            if (String(k) === key) {
+              return;
+            }
+            r.checked = false;
+          });
+        }
+      });
+    }
+  }
+  render() {
+    return (h(Host, { role: "radiogroup" }, h("div", { class: "radio-group" }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return flipRadioGroupCss; }
+}, [6, "flip-radio-group", {
+    "value": [1025]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-radio-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-radio-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipRadioGroup$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipRadioGroup = FlipRadioGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipRadioGroup, defineCustomElement };

package/dist/components/flip-radio.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FlipRadio extends Components.FlipRadio, HTMLElement {}
+export const FlipRadio: {
+  prototype: FlipRadio;
+  new (): FlipRadio;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/flip-radio.js

@@ -0,0 +1,66 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$2 } from './flip-visually-hidden2.js';
+
+const flipRadioCss = ".sc-flip-radio-h{display:inline-flex}.sc-flip-radio-h *.sc-flip-radio{box-sizing:border-box}.radio.sc-flip-radio{display:inline-flex;cursor:pointer;line-height:var(--s-line-height-base)}.radio.sc-flip-radio:focus-within .radio__box.sc-flip-radio{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{position:relative;border-color:var(--s-icon-highlight);background-color:var(--s-icon-highlight)}.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{position:absolute;top:50%;left:50%;width:0.5rem;height:0.5rem;border-radius:50%;background-color:var(--s-background-default);content:\"\";transform:translate3d(-50%, -50%, 0)}.radio--invalid.radio--checked.sc-flip-radio .radio__box.sc-flip-radio,.radio--invalid.radio--indeterminate.sc-flip-radio .radio__box.sc-flip-radio{background-color:var(--s-icon-critical)}.radio--invalid.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-critical)}.radio--disabled.sc-flip-radio{cursor:default}.radio--disabled.radio--checked.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:transparent}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);background-color:var(--s-background-default)}.radio--disabled.radio--checked.sc-flip-radio .radio__box.sc-flip-radio:after{background-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:transparent}.radio--disabled.sc-flip-radio .radio__box.sc-flip-radio{border-color:var(--s-icon-disabled);backround-color:var(--s-icon-disabled)}.radio--disabled.sc-flip-radio .radio__description.sc-flip-radio,.radio--disabled.sc-flip-radio .radio__label.sc-flip-radio{color:var(--s-text-disabled)}.radio__control.sc-flip-radio{position:relative;display:inline-flex;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.radio__control.sc-flip-radio:hover .radio__box.sc-flip-radio{background-color:var(--s-action-neutral-hovered)}.radio__box.sc-flip-radio{position:relative;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:50%}.radio__label-container.sc-flip-radio{display:inline-flex;margin-left:var(--s-space-12);padding-top:var(--s-space-2);flex-direction:column}.radio__label.sc-flip-radio{font-weight:var(--s-font-weight-medium)}.radio__description.sc-flip-radio{color:var(--s-text-subdued)}";
+
+const FlipRadio$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.checked = false;
+    this.disabled = false;
+    this.onChange = () => {
+      this.checked = true;
+      this.valueChange.emit(this.value);
+    };
+  }
+  render() {
+    const unchecked = this.checked === false || this.checked === "false";
+    const checked = this.checked === true || this.checked === "true";
+    const ariaCheckedLabel = checked ? "true" : unchecked ? "false" : "mixed";
+    const ariaInvalid = this.invalid;
+    const className = classnames("radio", {
+      "radio--checked": checked,
+      "radio--disabled": this.disabled,
+      "radio--invalid": this.invalid,
+      "radio--unchecked": unchecked,
+    });
+    return (h(Host, null, h("label", { class: className, htmlFor: this.inputId }, h("span", { class: "radio__control" }, h("flip-visually-hidden", null, h("input", { "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "radio__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, type: "radio", value: this.value })), h("span", { "aria-hidden": "true", class: "radio__box" })), h("span", { class: "radio__label-container" }, this.label && h("span", { class: "radio__label" }, this.label), this.description && (h("span", { class: "radio__description" }, this.description))))));
+  }
+  static get style() { return flipRadioCss; }
+}, [2, "flip-radio", {
+    "checked": [1032],
+    "description": [1],
+    "disabled": [4],
+    "inputId": [1, "input-id"],
+    "inputName": [1, "input-name"],
+    "invalid": [4],
+    "label": [1],
+    "value": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-radio", "flip-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-radio":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipRadio$1);
+      }
+      break;
+    case "flip-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipRadio = FlipRadio$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipRadio, defineCustomElement };

package/dist/components/flip-search.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FlipSearch extends Components.FlipSearch, HTMLElement {}
+export const FlipSearch: {
+  prototype: FlipSearch;
+  new (): FlipSearch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/flip-search.js

@@ -0,0 +1,82 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$3 } from './flip-icon-cancel2.js';
+import { d as defineCustomElement$2 } from './flip-icon-search2.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%)}";
+
+const FlipSearch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.inputBlur = createEvent(this, "inputBlur", 7);
+    this.inputFocus = createEvent(this, "inputFocus", 7);
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.clearButtonLabel = "Clear search term";
+    this.placeholder = "Search …";
+    this.clear = () => {
+      this.input.value = "";
+      this.input.focus();
+    };
+    this.onBlur = (event) => {
+      this.inputBlur.emit(event);
+    };
+    this.onChange = (event) => {
+      this.valueChange.emit(event.target.value);
+    };
+    this.onFocus = (event) => {
+      this.inputFocus.emit(event);
+    };
+  }
+  onKeyDown(event) {
+    if ((event.code === "KeyK" || event.code === "Slash") &&
+      (event.ctrlKey || event.metaKey)) {
+      this.input.focus();
+    }
+  }
+  render() {
+    const className = classnames("search", {
+      "search--disabled": this.disabled,
+    });
+    return (h(Host, null, h("span", { class: className }, h("flip-icon-search", { class: "search__icon" }), h("input", { "aria-disabled": this.disabled ? "true" : undefined, "aria-label": this.label, autoComplete: "off", autoFocus: this.autoFocus, class: "search__input", disabled: this.disabled, id: this.inputId, inputMode: "search", name: this.inputName, onBlur: this.onBlur, onChange: this.onChange, onFocus: this.onFocus, placeholder: this.placeholder, ref: (el) => (this.input = el), type: "search", value: this.value }), !this.disabled && (h("button", { "aria-label": this.clearButtonLabel, class: "search__clear-button", onClick: this.clear, type: "button" }, h("flip-icon-cancel", null))))));
+  }
+  static get style() { return flipSearchCss; }
+}, [2, "flip-search", {
+    "autoFocus": [4, "auto-focus"],
+    "clearButtonLabel": [1, "clear-button-label"],
+    "disabled": [4],
+    "inputName": [1, "input-name"],
+    "inputId": [1, "input-id"],
+    "label": [1],
+    "placeholder": [1],
+    "value": [1025]
+  }, [[8, "keydown", "onKeyDown"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-search", "flip-icon-cancel", "flip-icon-search"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-search":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipSearch$1);
+      }
+      break;
+    case "flip-icon-cancel":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "flip-icon-search":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipSearch = FlipSearch$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipSearch, defineCustomElement };

package/dist/components/flip-spinner.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FlipSpinner extends Components.FlipSpinner, HTMLElement {}
+export const FlipSpinner: {
+  prototype: FlipSpinner;
+  new (): FlipSpinner;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/flip-spinner.js

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$2 } from './flip-visually-hidden2.js';
+
+const flipSpinnerCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.spinner{position:relative;display:inline-flex;overflow:hidden;width:2.25rem;height:2.25rem}.spinner--size-s{width:1.5rem;height:1.5rem}.spinner--size-s .spinner__circle{stroke-width:0.1875rem}.spinner__indicator{position:absolute;inset:0;width:100%;height:100%;transform-origin:center center;-webkit-animation:spinner-rotate 2s linear infinite;animation:spinner-rotate 2s linear infinite}.spinner__background{stroke:var(--s-border-default);stroke-linecap:round}.spinner__circle{-webkit-animation:spinner-dash 1.5s ease-in-out infinite;animation:spinner-dash 1.5s ease-in-out infinite;stroke:var(--s-interactive-primary-default);stroke-dasharray:1, 200;stroke-dashoffset:0;stroke-linecap:round}@-webkit-keyframes spinner-rotate{100%{transform:rotate(360deg)}}@keyframes spinner-rotate{100%{transform:rotate(360deg)}}@-webkit-keyframes spinner-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}@keyframes spinner-dash{0%{stroke-dasharray:1, 200;stroke-dashoffset:0}50%{stroke-dasharray:89, 200;stroke-dashoffset:-35}100%{stroke-dasharray:89, 200;stroke-dashoffset:-124}}";
+
+const FlipSpinner$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.size = "m";
+  }
+  render() {
+    const className = classnames("spinner", `spinner--size-${this.size}`);
+    return (h(Host, null, h("span", { class: className, role: Boolean(this.label) ? "status" : undefined }, h("svg", { "aria-hidden": "true", class: "spinner__indicator", focusable: "false", viewBox: "0 0 50 50" }, h("circle", { class: "spinner__background", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" }), h("circle", { class: "spinner__circle", cx: "25", cy: "25", r: "20", fill: "none", "stroke-width": "4" })), this.label && (h("flip-visually-hidden", null, h("span", { class: "spinner__label" }, this.label))))));
+  }
+  static get style() { return flipSpinnerCss; }
+}, [1, "flip-spinner", {
+    "label": [1],
+    "size": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-spinner", "flip-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-spinner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipSpinner$1);
+      }
+      break;
+    case "flip-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipSpinner = FlipSpinner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipSpinner, defineCustomElement };

package/dist/components/flip-stack.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FlipStack extends Components.FlipStack, HTMLElement {}
+export const FlipStack: {
+  prototype: FlipStack;
+  new (): FlipStack;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/flip-stack.js

@@ -0,0 +1,6 @@
+import { F as FlipStack$1, d as defineCustomElement$1 } from './flip-stack2.js';
+
+const FlipStack = FlipStack$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipStack, defineCustomElement };

package/dist/components/flip-stack2.js

@@ -0,0 +1,47 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.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}";
+
+const FlipStack = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.align = "start";
+    this.as = "div";
+    this.justify = "start";
+    this.orientation = "vertical";
+    this.spacing = "0";
+    this.wrap = false;
+  }
+  render() {
+    const Tag = this.as;
+    const className = classnames("stack", `stack--align-${this.align}`, `stack--justify-${this.justify}`, `stack--orientation-${this.orientation}`, { "stack--wrap": this.wrap });
+    return (h(Host, null, h(Tag, { class: className, style: { gap: `var(--s-space-${this.spacing})` } }, h("slot", null))));
+  }
+  static get style() { return flipStackCss; }
+}, [1, "flip-stack", {
+    "align": [1],
+    "as": [1],
+    "justify": [1],
+    "orientation": [1],
+    "spacing": [1],
+    "wrap": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-stack"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-stack":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipStack);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { FlipStack as F, defineCustomElement as d };

package/dist/components/flip-switch.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FlipSwitch extends Components.FlipSwitch, HTMLElement {}
+export const FlipSwitch: {
+  prototype: FlipSwitch;
+  new (): FlipSwitch;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/flip-switch.js

@@ -0,0 +1,120 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$2 } from './flip-visually-hidden2.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)}";
+
+const FlipSwitch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.checked = false;
+    this.disabled = false;
+    this.size = "m";
+    this.dragging = false;
+    this.recentlyDragged = false;
+    this.onChange = () => {
+      if (this.dragging) {
+        return;
+      }
+      if (this.recentlyDragged) {
+        this.recentlyDragged = false;
+        return;
+      }
+      this.checked = !this.checked;
+      this.valueChange.emit(this.checked);
+    };
+    this.onStartDrag = () => {
+      if (this.disabled) {
+        return;
+      }
+      this.dragging = true;
+      this.thumb.style.transition = "none";
+    };
+    this.onEndDrag = () => {
+      if (this.disabled) {
+        return;
+      }
+      if (this.recentlyDragged) {
+        const controlBonds = this.control.getBoundingClientRect();
+        const thumbBounds = this.thumb.getBoundingClientRect();
+        const on = this.thumb.offsetLeft + thumbBounds.width / 2 > controlBonds.width / 2;
+        if (this.checked !== on) {
+          this.checked = on;
+          this.valueChange.emit(on);
+        }
+      }
+      this.thumb.style.left = "";
+      this.thumb.style.transition = "";
+      this.dragging = false;
+      setTimeout(() => {
+        this.recentlyDragged = false;
+      });
+    };
+    this.onDrag = (event) => {
+      if (!this.dragging) {
+        return;
+      }
+      this.recentlyDragged = true;
+      const controlBonds = this.control.getBoundingClientRect();
+      const thumbBounds = this.thumb.getBoundingClientRect();
+      let pos = Math.round(event.offsetX - thumbBounds.width / 2);
+      if (pos < 0) {
+        pos = 0;
+      }
+      if (pos > Math.round(controlBonds.width - thumbBounds.width)) {
+        pos = Math.round(controlBonds.width - thumbBounds.width);
+      }
+      this.thumb.style.left = `${pos}px`;
+    };
+  }
+  onWindowPointerUp() {
+    this.onEndDrag();
+  }
+  render() {
+    const off = !this.checked;
+    const on = this.checked;
+    const ariaCheckedLabel = on ? "true" : "false";
+    const className = classnames("switch", `switch--size-${this.size}`, {
+      "switch--off": off,
+      "switch--on": on,
+      "switch--disabled": this.disabled,
+    });
+    return (h(Host, null, h("label", { class: className, htmlFor: this.inputId }, h("span", { class: "switch__control", onPointerDown: this.onStartDrag, onPointerMove: this.onDrag, onPointerUp: this.onEndDrag, ref: (el) => (this.control = el) }, h("flip-visually-hidden", null, h("input", { "aria-checked": ariaCheckedLabel, checked: on, class: "switch__input", disabled: this.disabled, id: this.inputId, name: this.inputName, onChange: this.onChange, role: "switch", type: "checkbox", value: this.value })), h("span", { "aria-hidden": "true", class: "switch__thumb", ref: (el) => (this.thumb = el) })), this.label && h("span", { class: "switch__label" }, this.label))));
+  }
+  get el() { return this; }
+  static get style() { return flipSwitchCss; }
+}, [2, "flip-switch", {
+    "checked": [1028],
+    "disabled": [4],
+    "inputId": [1, "input-id"],
+    "inputName": [1, "input-name"],
+    "label": [1],
+    "size": [1],
+    "value": [1]
+  }, [[9, "pointerup", "onWindowPointerUp"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-switch", "flip-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-switch":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipSwitch$1);
+      }
+      break;
+    case "flip-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipSwitch = FlipSwitch$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipSwitch, defineCustomElement };

package/dist/components/flip-tag.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FlipTag extends Components.FlipTag, HTMLElement {}
+export const FlipTag: {
+  prototype: FlipTag;
+  new (): FlipTag;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/flip-tag.js

@@ -0,0 +1,54 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$2 } from './flip-icon-close2.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)}";
+
+const FlipTag$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.remove = createEvent(this, "remove", 7);
+    this.intent = "default";
+    this.removalButtonLabel = "Remove";
+    this.onRemove = (event) => {
+      var _a;
+      (_a = this.remove) === null || _a === void 0 ? void 0 : _a.emit(event);
+    };
+  }
+  render() {
+    const className = classnames("tag", `tag--intent-${this.intent}`);
+    return (h(Host, null, h("span", { class: className }, this.label, this.removable && (h("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, type: "button" }, h("flip-icon-close", { size: 16 }))))));
+  }
+  static get style() { return flipTagCss; }
+}, [1, "flip-tag", {
+    "intent": [1],
+    "label": [1],
+    "removable": [4],
+    "removalButtonLabel": [1, "removal-button-label"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-tag", "flip-icon-close"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-tag":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipTag$1);
+      }
+      break;
+    case "flip-icon-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipTag = FlipTag$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipTag, defineCustomElement };

package/dist/components/flip-theme-provider.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FlipThemeProvider extends Components.FlipThemeProvider, HTMLElement {}
+export const FlipThemeProvider: {
+  prototype: FlipThemeProvider;
+  new (): FlipThemeProvider;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;