@getflip/swirl-components 0.1.0

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

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

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

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

package/dist/components/flip-button-group2.js

@@ -0,0 +1,46 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$1 } from './flip-stack2.js';
+
+const flipButtonGroupCss = ":host{display:block}:host *{box-sizing:border-box}";
+
+const FlipButtonGroup = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.orientation = "horizontal";
+  }
+  render() {
+    return (h(Host, null, h("flip-stack", { align: this.orientation === "vertical" && this.stretch
+        ? "stretch"
+        : "start", class: "button-group", justify: this.orientation === "horizontal" && this.stretch
+        ? "stretch"
+        : "start", orientation: this.orientation, role: "group", spacing: "8", wrap: this.wrap }, h("slot", null))));
+  }
+  static get style() { return flipButtonGroupCss; }
+}, [1, "flip-button-group", {
+    "orientation": [1],
+    "stretch": [4],
+    "wrap": [4]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-button-group", "flip-stack"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-button-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipButtonGroup);
+      }
+      break;
+    case "flip-stack":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { FlipButtonGroup as F, defineCustomElement as d };

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

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

package/dist/components/flip-button.js

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

package/dist/components/flip-button2.js

@@ -0,0 +1,67 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const flipButtonCss = ".sc-flip-button-h{display:inline-block;max-width:100%}.sc-flip-button-h *.sc-flip-button{box-sizing:border-box}.button.sc-flip-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-radius:var(--s-border-radius-base);color:var(--s-text-subdued);background-color:var(--flip-ghost-button-background-default);font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-lg);text-decoration:none;cursor:pointer;gap:var(--s-space-8)}.button.sc-flip-button:hover{background-color:var(--flip-ghost-button-background-hovered)}.button.sc-flip-button:active{background-color:var(--flip-ghost-button-background-pressed)}.button.sc-flip-button:disabled{color:var(--s-text-disabled);background-color:var(--flip-ghost-button-background-default);cursor:default}.button.sc-flip-button:disabled .button__left-icon.sc-flip-button{color:var(--s-icon-disabled)}.button.sc-flip-button:focus{outline-color:var(--s-focus-default)}.button--variant-ghost.button--intent-primary.sc-flip-button:not(:disabled){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-flip-button:not(:disabled) .button__left-icon.sc-flip-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-flip-button:not(:disabled){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-flip-button:not(:disabled) .button__left-icon.sc-flip-button{color:var(--s-icon-critical)}.button--variant-ghost.button--size-l.sc-flip-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-flip-button{padding:var(--s-space-12)}.button--variant-flat.sc-flip-button{color:var(--s-text-default);background-color:var(--s-action-neutral-default)}.button--variant-flat.sc-flip-button:hover{background-color:var(--s-action-neutral-hovered)}.button--variant-flat.sc-flip-button:active{background-color:var(--s-action-neutral-pressed)}.button--variant-flat.sc-flip-button:disabled{background-color:var(--s-action-neutral-disabled)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-flip-button:not(:disabled) .button__left-icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.sc-flip-button .button__left-icon.sc-flip-button{color:var(--s-icon-strong)}.button--variant-plain.sc-flip-button{padding:0;border-radius:0;color:var(--s-interactive-neutral-default);background-color:transparent}.button--variant-plain.sc-flip-button:hover:not(:disabled){color:var(--s-interactive-neutral-default);background-color:transparent;text-decoration:underline;text-underline-offset:var(--s-space-4)}.button--variant-plain.sc-flip-button:hover:not(:disabled) .button__left-icon.sc-flip-button{color:var(--s-interactive-neutral-default)}.button--variant-plain.sc-flip-button:active:not(:disabled){color:var(--s-interactive-neutral-hovered);background-color:transparent}.button--variant-plain.sc-flip-button:active:not(:disabled) .button__left-icon.sc-flip-button{color:var(--s-interactive-neutral-hovered)}.button--variant-plain.sc-flip-button:disabled{color:var(--s-interactive-neutral-disabled);background-color:transparent}.button--variant-plain.sc-flip-button:disabled .button__left-icon.sc-flip-button{color:var(--s-interactive-neutral-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:hover{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:hover .button__left-icon.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-flip-button:active{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-flip-button:active .button__left-icon.sc-flip-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-flip-button:disabled{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button:disabled .button__left-icon.sc-flip-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-flip-button .button__left-icon.sc-flip-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-flip-button .button__left-icon.sc-flip-button{color:var(--s-interactive-neutral-default)}.button--variant-on-image.sc-flip-button{color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n    rgba(255, 255, 255, 0.3)}.button--variant-on-image.sc-flip-button:hover{background:linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),\n      rgba(255, 255, 255, 0.4)}.button--variant-on-image.sc-flip-button:active{background:linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),\n      rgba(255, 255, 255, 0.5)}.button--variant-on-image.sc-flip-button:disabled{color:var(--s-text-on-image);background:linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),\n      rgba(255, 255, 255, 0.3)}.button--variant-on-image.sc-flip-button:disabled .button__left-icon.sc-flip-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-flip-button .button__left-icon.sc-flip-button{color:var(--s-icon-on-image)}.button--variant-floating.sc-flip-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default);box-shadow:0.125rem 0.25rem 2.5rem rgba(0, 0, 0, 0.14)}.button--variant-floating.sc-flip-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-hovered)}.button--variant-floating.sc-flip-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-pressed)}.button--variant-floating.button--icon-only.sc-flip-button{padding:var(--s-space-4)}.button--variant-floating.button--intent-primary.sc-flip-button{padding:var(--s-space-12) var(--s-space-20);border-radius:1.5rem;color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-floating.button--intent-primary.sc-flip-button:hover:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-hovered)}.button--variant-floating.button--intent-primary.sc-flip-button:active:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-pressed)}.button--variant-floating.button--intent-primary.sc-flip-button:disabled{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-flip-button:disabled .button__left-icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.sc-flip-button .button__left-icon.sc-flip-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-flip-button .button__left-icon.sc-flip-button{color:var(--s-icon-strong)}.button--icon-only.sc-flip-button{padding:var(--s-space-8);border-radius:50%}.button--icon-only.sc-flip-button .button__left-icon.sc-flip-button{margin-left:0}.button__left-icon.sc-flip-button{display:inline-flex;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default)}.button__label.sc-flip-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}";
+
+const FlipButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.intent = "default";
+    this.size = "m";
+    this.type = "button";
+    this.variant = "ghost";
+  }
+  componentDidLoad() {
+    this.forceIconProps();
+  }
+  forceIconProps() {
+    if (!Boolean(this.iconEl)) {
+      return;
+    }
+    const icon = this.iconEl.children[0];
+    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", "24");
+  }
+  render() {
+    const hideLabel = (this.hideLabel && Boolean(this.icon)) ||
+      (this.variant === "floating" && this.intent === "default");
+    const isLink = Boolean(this.href);
+    const className = classnames("button", `button--intent-${this.intent}`, `button--size-${this.size}`, `button--variant-${this.variant}`, {
+      "button--icon-only": hideLabel,
+    });
+    const Tag = isLink ? "a" : "button";
+    return (h(Host, null, h(Tag, { "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-label": hideLabel ? this.label : undefined, class: className, disabled: isLink ? undefined : this.disabled, download: isLink ? undefined : this.download, form: isLink ? undefined : this.form, href: this.href, name: isLink ? undefined : this.name, target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value }, this.icon && (h("span", { class: "button__left-icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !hideLabel && h("span", { class: "button__label" }, this.label))));
+  }
+  static get style() { return flipButtonCss; }
+}, [2, "flip-button", {
+    "disabled": [4],
+    "download": [1],
+    "form": [1],
+    "hideLabel": [4, "hide-label"],
+    "href": [1],
+    "icon": [1],
+    "intent": [1],
+    "label": [1],
+    "name": [1],
+    "size": [1],
+    "target": [1],
+    "type": [1],
+    "value": [1],
+    "variant": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipButton);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { FlipButton as F, defineCustomElement as d };

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

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

package/dist/components/flip-checkbox.js

@@ -0,0 +1,79 @@
+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-check-strong2.js';
+import { d as defineCustomElement$2 } from './flip-visually-hidden2.js';
+
+const flipCheckboxCss = ".sc-flip-checkbox-h{display:inline-flex}.sc-flip-checkbox-h *.sc-flip-checkbox{box-sizing:border-box}.checkbox.sc-flip-checkbox{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer}.checkbox.sc-flip-checkbox:focus-within .checkbox__box.sc-flip-checkbox{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.checkbox--checked.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox,.checkbox--indeterminate.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.checkbox--checked.sc-flip-checkbox .checkbox__box.sc-flip-checkbox,.checkbox--indeterminate.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.checkbox--invalid.checkbox--checked.sc-flip-checkbox .checkbox__box.sc-flip-checkbox,.checkbox--invalid.checkbox--indeterminate.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{background-color:var(--s-icon-critical)}.checkbox--invalid.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-critical)}.checkbox--disabled.sc-flip-checkbox{cursor:default}.checkbox--disabled.checkbox--checked.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.checkbox--disabled.checkbox--checked.sc-flip-checkbox .checkbox__box.sc-flip-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{background-color:var(--s-icon-disabled)}.checkbox--disabled.sc-flip-checkbox .checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{background-color:transparent}.checkbox--disabled.sc-flip-checkbox .checkbox__box.sc-flip-checkbox{border-color:var(--s-icon-disabled)}.checkbox--disabled.sc-flip-checkbox .checkbox__label.sc-flip-checkbox,.checkbox--disabled.sc-flip-checkbox .checkbox__description.sc-flip-checkbox{color:var(--s-text-disabled)}.checkbox__control.sc-flip-checkbox{position:relative;top:0.125rem;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.checkbox__control.sc-flip-checkbox:hover .checkbox__box.sc-flip-checkbox{background-color:var(--s-action-neutral-hovered)}.checkbox__box.sc-flip-checkbox{position:relative;z-index:1;display:flex;width:100%;height:100%;justify-content:center;align-items:center;border:0.125rem solid var(--s-icon-default);border-radius:var(--s-border-radius-s)}.checkbox__icon.sc-flip-checkbox{display:inline-flex;width:1.0625rem;height:1.0625rem}.checkbox__icon.sc-flip-checkbox>*.sc-flip-checkbox::part(icon){width:1.0625rem;height:1.0625rem}.checkbox__indeterminate-icon.sc-flip-checkbox{position:relative;width:100%;height:100%}.checkbox__indeterminate-icon.sc-flip-checkbox:after{position:absolute;top:50%;left:50%;width:0.625rem;height:0.125rem;border-radius:0.0625rem;background-color:currentColor;content:\"\";transform:translate3d(-50%, -50%, 0)}.checkbox__label-container.sc-flip-checkbox{display:inline-flex;margin-left:var(--s-space-12);padding-top:var(--s-space-4);align-items:flex-start;flex-direction:column}.checkbox__label.sc-flip-checkbox{font-weight:var(--s-font-weight-medium)}.checkbox__description.sc-flip-checkbox{color:var(--s-text-subdued)}";
+
+const FlipCheckbox$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 =
+        this.checked === true || this.checked === "true" ? false : true;
+      this.valueChange.emit(this.checked);
+    };
+  }
+  render() {
+    const unchecked = this.checked === false || this.checked === "false";
+    const checked = this.checked === true || this.checked === "true";
+    const indeterminate = this.checked === "indeterminate";
+    const ariaCheckedLabel = checked ? "true" : unchecked ? "false" : "mixed";
+    const ariaInvalid = this.invalid === true
+      ? "true"
+      : this.invalid === false
+        ? "false"
+        : undefined;
+    const className = classnames("checkbox", {
+      "checkbox--checked": checked,
+      "checkbox--disabled": this.disabled,
+      "checkbox--indeterminate": indeterminate,
+      "checkbox--invalid": this.invalid,
+      "checkbox--unchecked": unchecked,
+    });
+    return (h(Host, null, h("label", { class: className, htmlFor: this.inputId }, h("span", { class: "checkbox__control" }, h("flip-visually-hidden", null, h("input", { "aria-checked": ariaCheckedLabel, "aria-invalid": ariaInvalid, checked: checked, class: "checkbox__input", disabled: this.disabled, id: this.inputId, indeterminate: indeterminate, name: this.inputName, onChange: this.onChange, type: "checkbox", value: this.value })), h("span", { "aria-hidden": "true", class: "checkbox__box" }, h("span", { class: "checkbox__icon" }, checked && h("flip-icon-check-strong", null), indeterminate && (h("span", { class: "checkbox__indeterminate-icon" }))))), h("span", { class: "checkbox__label-container" }, this.label && h("span", { class: "checkbox__label" }, this.label), this.description && (h("span", { class: "checkbox__description" }, this.description))))));
+  }
+  static get style() { return flipCheckboxCss; }
+}, [2, "flip-checkbox", {
+    "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-checkbox", "flip-icon-check-strong", "flip-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipCheckbox$1);
+      }
+      break;
+    case "flip-icon-check-strong":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "flip-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipCheckbox = FlipCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipCheckbox, defineCustomElement };

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

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

package/dist/components/flip-chip.js

@@ -0,0 +1,71 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const flipChipCss = ":host{display:inline-flex;max-width:100%}:host *{box-sizing:border-box}.chip{display:inline-flex;max-width:100%;height:2.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border:0.0625rem solid var(--s-border-default);border-radius:1.25rem;color:var(--s-text-subdued);background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm)}.chip--interactive{cursor:pointer}.chip--interactive:hover{background-color:var(--s-surface-overlay-hovered)}.chip--interactive:hover ::part(avatar){background-color:var(--s-surface-raised-hovered)}.chip--interactive:active{background-color:var(--s-surface-overlay-pressed)}.chip--interactive:active ::part(avatar){background-color:var(--s-surface-raised-pressed)}.chip--intent-critical{border-color:var(--s-border-critical);color:var(--s-text-critical)}.chip--intent-critical .chip__icon{color:var(--s-icon-critical)}.chip--intent-success{border-color:var(--s-border-success);color:var(--s-text-success)}.chip--intent-success .chip__icon{color:var(--s-icon-success)}.chip__avatar,.chip__icon{display:inline-flex;margin-right:var(--s-space-8);flex-shrink:0}.chip__avatar{overflow:hidden;width:1.75rem;height:1.75rem;margin-left:-0.625rem}.chip__icon{margin-left:-0.25rem;color:var(--s-icon-default)}.chip__label{overflow:hidden;flex-grow:1;white-space:nowrap;text-overflow:ellipsis}";
+
+const FlipChip$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.intent = "default";
+    this.interactive = false;
+  }
+  componentDidLoad() {
+    this.forceAvatarProps();
+    this.forceIconProps();
+  }
+  forceAvatarProps() {
+    if (!Boolean(this.avatarEl)) {
+      return;
+    }
+    const avatar = this.avatarEl.querySelector("flip-avatar");
+    avatar === null || avatar === void 0 ? void 0 : avatar.removeAttribute("badge");
+    avatar === null || avatar === void 0 ? void 0 : avatar.removeAttribute("interactive");
+    avatar === null || avatar === void 0 ? void 0 : avatar.removeAttribute("show-label");
+    avatar === null || avatar === void 0 ? void 0 : avatar.removeAttribute("variant");
+    avatar === null || avatar === void 0 ? void 0 : avatar.setAttribute("size", "xs");
+  }
+  forceIconProps() {
+    if (!Boolean(this.iconEl)) {
+      return;
+    }
+    const icon = this.iconEl.children[0];
+    icon === null || icon === void 0 ? void 0 : icon.setAttribute("size", "24");
+  }
+  render() {
+    const Tag = this.interactive ? "button" : "span";
+    const showAvatar = Boolean(this.avatar);
+    const showIcon = !showAvatar && Boolean(this.icon);
+    const className = classnames("chip", `chip--intent-${this.intent}`, {
+      "chip--interactive": this.interactive,
+    });
+    return (h(Host, null, h(Tag, { class: className, type: this.interactive ? "button" : undefined }, showAvatar && (h("span", { class: "chip__avatar", innerHTML: this.avatar, ref: (el) => (this.avatarEl = el) })), showIcon && (h("span", { class: "chip__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), h("span", { class: "chip__label" }, this.label))));
+  }
+  static get style() { return flipChipCss; }
+}, [1, "flip-chip", {
+    "avatar": [1],
+    "icon": [1],
+    "intent": [1],
+    "interactive": [4],
+    "label": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-chip"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-chip":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipChip$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipChip = FlipChip$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipChip, defineCustomElement };

package/dist/components/flip-description-list-item.d.ts

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

package/dist/components/flip-description-list-item.js

@@ -0,0 +1,36 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const flipDescriptionListItemCss = ":host {\n  display: block;\n}\n\n  :host * {\n    box-sizing: border-box;\n  }\n\n.description-list-item {\n  display: block;\n  max-width: 100%;\n  color: var(--s-text-default);\n  line-height: var(--s-line-height-base);\n}\n\n.description-list-item__term {\n  display: block;\n  margin-bottom: var(--s-space-4);\n  font-weight: var(--s-font-weight-semibold);\n}\n\n.description-list-item__description {\n  display: block;\n  max-width: 40rem;\n  margin: 0;\n}\n\n@container description-list (min-width: 480px) {\n  .description-list-item {\n    display: flex;\n  }\n\n  .description-list-item__term {\n    margin-right: var(--s-space-16);\n    margin-bottom: 0;\n    flex-basis: 12rem;\n    flex-grow: 0;\n    flex-shrink: 0;\n  }\n\n  .description-list-item__description {\n    flex-grow: 1;\n  }\n}\n\n/* Fallback styles for browsers without container query support */\n@supports not (container-type: inline-size) {\n  @media (min-width: 768px) {\n    .description-list-item {\n      display: flex;\n    }\n\n    .description-list-item__term {\n      margin-right: var(--s-space-16);\n      margin-bottom: 0;\n      flex-basis: 12rem;\n      flex-grow: 0;\n      flex-shrink: 0;\n    }\n\n    .description-list-item__description {\n      flex-grow: 1;\n    }\n  }\n}\n";
+
+const FlipDescriptionListItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "description-list-item" }, h("dt", { class: "description-list-item__term" }, this.term), h("dd", { class: "description-list-item__description" }, h("slot", null)))));
+  }
+  static get style() { return flipDescriptionListItemCss; }
+}, [1, "flip-description-list-item", {
+    "term": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-description-list-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-description-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipDescriptionListItem$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipDescriptionListItem = FlipDescriptionListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipDescriptionListItem, defineCustomElement };

package/dist/components/flip-description-list.d.ts

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

package/dist/components/flip-description-list.js

@@ -0,0 +1,34 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const flipDescriptionListCss = ":host{display:block;container-type:inline-size;container-name:description-list}:host *{box-sizing:border-box}.description-list{display:block;max-width:100%;margin:0}.description-list ::slotted(*){padding-bottom:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.description-list ::slotted(*:not(:last-child)){margin-bottom:var(--s-space-16)}";
+
+const FlipDescriptionList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("dl", { class: "description-list" }, h("slot", null))));
+  }
+  static get style() { return flipDescriptionListCss; }
+}, [1, "flip-description-list"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-description-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-description-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipDescriptionList$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipDescriptionList = FlipDescriptionList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipDescriptionList, defineCustomElement };

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

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