@getflip/swirl-components 0.1.0

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

@@ -0,0 +1,74 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-36517fab.js';
+import { c as classnames } from './index-3c78bcaf.js';
+
+const flipAvatarCss = ":host{display:inline-flex;align-items:center;flex-direction:column}:host *{box-sizing:border-box}.avatar{position:relative;display:inline-flex;justify-content:center;align-items:center;border-radius:50%}.avatar--has-icon{color:var(--s-icon-default);background-color:var(--s-surface-raised-default)}.avatar--has-initials{padding-right:0;padding-left:0;color:#fff}.avatar--interactive{cursor:pointer}.avatar--interactive:focus{outline-color:var(--s-focus-default)}.avatar--size-xs{width:1.75rem;height:1.75rem;font-size:0.75rem}.avatar--size-xs.avatar--has-icon{padding-right:0.4375rem;padding-left:0.4375rem}.avatar--size-xs.avatar--variant-square,.avatar--size-xs.avatar--variant-square .avatar__image,.avatar--size-xs.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-s{width:2rem;height:2rem;font-size:0.75rem}.avatar--size-s.avatar--has-icon{padding-right:var(--s-space-8);padding-left:var(--s-space-8)}.avatar--size-s.avatar--variant-square,.avatar--size-s.avatar--variant-square .avatar__image,.avatar--size-s.avatar--variant-square .avatar__initials{border-radius:0.5rem}.avatar--size-m{width:2.5rem;height:2.5rem;font-size:var(--s-font-size-base)}.avatar--size-m.avatar--has-icon{padding-right:0.625rem;padding-left:0.625rem}.avatar--size-m.avatar--variant-square,.avatar--size-m.avatar--variant-square .avatar__image,.avatar--size-m.avatar--variant-square .avatar__initials{border-radius:0.625rem}.avatar--size-l{width:3rem;height:3rem;font-size:var(--s-font-size-lg)}.avatar--size-l.avatar--has-icon{padding-right:var(--s-space-12);padding-left:var(--s-space-12)}.avatar--size-l.avatar--variant-square,.avatar--size-l.avatar--variant-square .avatar__image,.avatar--size-l.avatar--variant-square .avatar__initials{border-radius:0.75rem}.avatar--size-xl{width:4rem;height:4rem;font-size:var(--s-font-size-xl)}.avatar--size-xl.avatar--has-icon{padding-right:var(--s-space-16);padding-left:var(--s-space-16)}.avatar--size-xl.avatar--variant-square,.avatar--size-xl.avatar--variant-square .avatar__image,.avatar--size-xl.avatar--variant-square .avatar__initials{border-radius:1rem}.avatar--size-2xl{width:9rem;height:9rem;font-size:3.375rem}.avatar--size-2xl.avatar--has-icon{padding-right:var(--s-space-32);padding-left:var(--s-space-32)}.avatar--size-2xl.avatar--variant-square,.avatar--size-2xl.avatar--variant-square .avatar__image,.avatar--size-2xl.avatar--variant-square .avatar__initials{border-radius:2.25rem}.avatar__image{overflow:hidden;width:100%;height:100%;border-radius:50%}.avatar__image>img{width:100%;height:100%}.avatar__icon{display:inline-flex;width:100%;height:100%}.avatar__icon>*{width:100%;height:100%}.avatar__icon>*::part(icon){width:100%;height:100%}.avatar__initials{display:inline-flex;width:100%;min-width:0;height:100%;padding-right:0.0625rem;padding-left:0.0625rem;justify-content:center;align-items:center;border-radius:50%;background-color:var(--s-decorative-6-default)}.avatar__initials>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.avatar__badge{position:absolute;bottom:0;left:55%;display:inline-flex;min-width:1.5rem;height:1.5rem;transform:translate3d(0, 25%, 0)}.avatar__badge--position-top{top:0;bottom:auto;transform:translate3d(0, -25%, 0)}.avatar__label{margin-top:var(--s-space-4);color:var(--s-icon-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-sm);text-align:center}";
+
+const flipAvatarSizeMappings = {
+  xs: 28,
+  s: 32,
+  m: 40,
+  l: 48,
+  xl: 64,
+  "2xl": 144,
+};
+const FlipAvatar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.badgePosition = "bottom";
+    this.interactive = false;
+    this.showLabel = false;
+    this.size = "m";
+    this.variant = "round";
+    this.setImageAvailable = () => {
+      this.imageAvailable = true;
+    };
+    this.setImageUnavailable = () => {
+      this.imageAvailable = false;
+    };
+    this.onKeydown = (event) => {
+      // The interactive avatar is activated by the space key on the keyup event,
+      // but the default action for space is already triggered on keydown. It
+      // needs to be prevented to stop scrolling the page before activating the
+      // avatar.
+      if (event.code === "Space") {
+        event.preventDefault();
+      }
+      else if (event.code === "Enter") {
+        event.preventDefault();
+        this.element.click();
+      }
+    };
+    this.onKeyup = (event) => {
+      if (event.code === "Space") {
+        event.preventDefault();
+        this.element.click();
+      }
+    };
+  }
+  watchSrcProp() {
+    this.imageAvailable = undefined;
+  }
+  render() {
+    const showImage = Boolean(this.src) &&
+      (this.imageAvailable || this.imageAvailable === undefined);
+    const showInitials = !showImage && Boolean(this.initials);
+    const showIcon = !showImage && !showInitials && Boolean(this.icon);
+    const showFallbackIcon = !showImage && !showInitials && !showIcon;
+    const showBadge = Boolean(this.badge) && this.size === "m";
+    const role = this.interactive ? "button" : "img";
+    const className = classnames("avatar", `avatar--size-${this.size}`, `avatar--variant-${this.variant}`, {
+      "avatar--has-icon": showIcon || showFallbackIcon,
+      "avatar--has-initials": showInitials,
+      "avatar--interactive": this.interactive,
+    });
+    const badgeClassName = classnames("avatar__badge", `avatar__badge--position-${this.badgePosition}`);
+    return (h(Host, { "aria-label": this.label, onKeydown: this.interactive ? this.onKeydown : undefined, onKeyup: this.interactive ? this.onKeyup : undefined, role: role, tabIndex: this.interactive ? 0 : undefined }, h("span", { class: className, part: "avatar" }, showImage && (h("span", { class: "avatar__image" }, h("img", { alt: "", height: flipAvatarSizeMappings[this.size], onError: this.setImageUnavailable, onLoad: this.setImageAvailable, src: this.src, width: flipAvatarSizeMappings[this.size] }))), showInitials && (h("span", { class: "avatar__initials" }, h("span", null, this.initials))), showIcon && h("span", { class: "avatar__icon", innerHTML: this.icon }), showFallbackIcon && (h("span", { class: "avatar__icon" }, h("flip-icon-person", null))), showBadge && (h("span", { class: badgeClassName, innerHTML: this.badge }))), this.showLabel && (h("span", { "aria-hidden": true, class: "avatar__label" }, this.label))));
+  }
+  get element() { return getElement(this); }
+  static get watchers() { return {
+    "src": ["watchSrcProp"]
+  }; }
+};
+FlipAvatar.style = flipAvatarCss;
+
+export { FlipAvatar as flip_avatar };

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

@@ -0,0 +1,22 @@
+import { r as registerInstance, h, H as Host } from './index-36517fab.js';
+import { c as classnames } from './index-3c78bcaf.js';
+
+const flipBadgeCss = ":host{display:inline-flex;min-width:0;max-width:100%;justify-content:center;align-items:center}:host *{box-sizing:border-box}.badge{display:inline-flex;max-width:100%;justify-content:center;align-items:center;border:0.25rem solid var(--s-background-default);border-radius:2rem;color:var(--s-text-on-status);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium)}.badge--size-s{min-width:1.5rem;height:1.5rem;font-size:0.75rem}.badge--size-s .badge__label{padding-right:0.1875rem;padding-left:0.1875rem}.badge--size-s .badge__icon>*::part(icon){width:0.75rem;height:0.75rem}.badge--size-m{min-width:2rem;height:2rem}.badge--size-m .badge__label{padding-right:0.375rem;padding-left:0.375rem}.badge--has-icon{padding-right:0;padding-left:0}.badge--intent-critical{background-color:var(--s-surface-critical-default)}.badge--intent-decorative-1{background-color:var(--s-decorative-1-default)}.badge--intent-decorative-2{background-color:var(--s-decorative-2-default)}.badge--intent-decorative-3{color:var(--s-text-default);background-color:var(--s-decorative-3-default)}.badge--intent-decorative-4{color:var(--s-text-default);background-color:var(--s-decorative-4-default)}.badge--intent-decorative-5{background-color:var(--s-decorative-5-default)}.badge--intent-decorative-6{background-color:var(--s-decorative-6-default)}.badge--intent-decorative-7{background-color:var(--s-decorative-7-default)}.badge--variant-dot{width:1.25rem;min-width:0;height:1.25rem}.badge--variant-dot .badge__label{padding-right:0;padding-left:0}.badge--variant-dot .badge__label,.badge--variant-dot .badge__icon{display:none}.badge__icon{display:inline-flex}.badge__icon>*::part(icon){width:1rem;height:1rem}.badge__label{display:inline-flex;overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis}";
+
+const FlipBadge = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.intent = "critical";
+    this.size = "m";
+    this.variant = "default";
+  }
+  render() {
+    const className = classnames("badge", `badge--intent-${this.intent}`, `badge--size-${this.size}`, `badge--variant-${this.variant}`, {
+      "badge--has-icon": this.icon,
+    });
+    return (h(Host, { role: "status" }, h("span", { class: className }, this.icon && h("span", { class: "badge__icon", innerHTML: this.icon }), this.icon === undefined && (h("span", { class: "badge__label" }, this.label)))));
+  }
+};
+FlipBadge.style = flipBadgeCss;
+
+export { FlipBadge as flip_badge };

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

@@ -0,0 +1,43 @@
+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';
+
+const flipBannerCss = ":host{display:block}:host *{box-sizing:border-box}.banner{display:flex;max-width:100%;padding:var(--s-space-12);align-items:flex-start}.banner:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner{padding:var(--s-space-16)}}.banner--intent-default .banner__icon,.banner--intent-default .banner__content,.banner--intent-default .banner__action-button,.banner--intent-default .banner__dismiss-button,.banner--intent-critical .banner__icon,.banner--intent-critical .banner__content,.banner--intent-critical .banner__action-button,.banner--intent-critical .banner__dismiss-button,.banner--intent-success .banner__icon,.banner--intent-success .banner__content,.banner--intent-success .banner__action-button,.banner--intent-success .banner__dismiss-button,.banner--intent-info .banner__icon,.banner--intent-info .banner__content,.banner--intent-info .banner__action-button,.banner--intent-info .banner__dismiss-button{color:var(--s-text-on-status)}.banner--intent-default{background-color:var(--s-surface-neutral-default)}.banner--intent-critical{background-color:var(--s-surface-critical-default)}.banner--intent-success{background-color:var(--s-surface-success-default)}.banner--intent-info{background-color:var(--s-surface-info-default)}.banner--intent-warning{background-color:var(--s-surface-warning-default)}.banner--intent-warning .banner__icon{color:var(--s-icon-strong)}.banner--intent-warning .banner__content,.banner--intent-warning .banner__action-button,.banner--intent-warning .banner__dismiss-button{color:var(--s-text-default)}@media (min-width: 375px){.banner--has-icon .banner__content{padding-top:var(--s-space-2)}}.banner__icon{display:none;margin-right:var(--s-space-8);color:var(--s-icon-on-status)}@media (min-width: 375px){.banner__icon{display:inline-flex}}.banner__content{min-height:1.5rem;margin-right:var(--s-space-12);flex-grow:1;line-height:var(--s-line-height-base)}.banner__controls{display:inline-flex;margin-left:var(--s-space-16);align-items:center;gap:var(--s-space-16);line-height:var(--s-line-height-base)}@media (min-width: 768px){.banner__controls{gap:var(--s-space-24)}}.banner__action-button,.banner__dismiss-button{display:inline-flex;overflow:hidden;max-width:7rem;height:1.5rem;padding:0;flex-shrink:0;align-items:center;border:none;background-color:transparent;font:inherit;font-weight:var(--s-font-weight-semibold);white-space:nowrap;text-overflow:ellipsis;cursor:pointer}.banner__action-button:focus,.banner__dismiss-button:focus{outline-color:var(--s-focus-default)}@media (min-width: 768px){.banner__action-button,.banner__dismiss-button{max-width:12rem}}";
+
+const flipBannerIconMapping = {
+  default: undefined,
+  critical: "<flip-icon-error></flip-icon-error>",
+  success: "<flip-icon-check-circle></flip-icon-check-circle>",
+  warning: "<flip-icon-warning></flip-icon-warning>",
+  info: "<flip-icon-info></flip-icon-info>",
+};
+const FlipBanner = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.action = createEvent(this, "action", 7);
+    this.dismiss = createEvent(this, "dismiss", 7);
+    this.dismissable = false;
+    this.dismissLabel = "Dismiss";
+    this.importance = "status";
+    this.intent = "default";
+    this.showIcon = false;
+    this.onAction = (event) => {
+      this.action.emit(event);
+    };
+    this.onDismiss = (event) => {
+      this.dismiss.emit(event);
+    };
+  }
+  render() {
+    const icon = flipBannerIconMapping[this.intent];
+    const showControls = Boolean(this.actionLabel) || this.dismissable;
+    const showIcon = this.showIcon && Boolean(icon);
+    const className = classnames("banner", `banner--intent-${this.intent}`, {
+      "banner--has-icon": showIcon,
+    });
+    return (h(Host, null, h("div", { "aria-describedby": "content", class: className, role: this.importance, tabIndex: 0 }, showIcon && (h("span", { "aria-hidden": "true", class: "banner__icon", innerHTML: icon })), h("span", { class: "banner__content", id: "content" }, this.content), showControls && (h("span", { class: "banner__controls" }, this.actionLabel && (h("button", { class: "banner__action-button", onClick: this.onAction, type: "button" }, this.actionLabel)), this.dismissable && (h("button", { "aria-label": this.dismissLabel, class: "banner__dismiss-button", onClick: this.onDismiss, type: "button" }, h("flip-icon-close", null))))))));
+  }
+  get element() { return getElement(this); }
+};
+FlipBanner.style = flipBannerCss;
+
+export { FlipBanner as flip_banner };

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

@@ -0,0 +1,54 @@
+import { r as registerInstance, h, H as Host } from './index-36517fab.js';
+import { c as classnames } from './index-3c78bcaf.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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))));
+  }
+};
+FlipButton.style = flipButtonCss;
+
+const flipButtonGroupCss = ":host{display:block}:host *{box-sizing:border-box}";
+
+const FlipButtonGroup = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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))));
+  }
+};
+FlipButtonGroup.style = flipButtonGroupCss;
+
+export { FlipButton as flip_button, FlipButtonGroup as flip_button_group };

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

@@ -0,0 +1,40 @@
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-36517fab.js';
+import { c as classnames } from './index-3c78bcaf.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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))))));
+  }
+};
+FlipCheckbox.style = flipCheckboxCss;
+
+export { FlipCheckbox as flip_checkbox };

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

@@ -0,0 +1,46 @@
+import { r as registerInstance, h, H as Host } from './index-36517fab.js';
+import { c as classnames } from './index-3c78bcaf.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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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))));
+  }
+};
+FlipChip.style = flipChipCss;
+
+export { FlipChip as flip_chip };

package/dist/esm/flip-description-list-item.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-36517fab.js';
+
+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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  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)))));
+  }
+};
+FlipDescriptionListItem.style = flipDescriptionListItemCss;
+
+export { FlipDescriptionListItem as flip_description_list_item };

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

@@ -0,0 +1,15 @@
+import { r as registerInstance, h, H as Host } from './index-36517fab.js';
+
+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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h(Host, null, h("dl", { class: "description-list" }, h("slot", null))));
+  }
+};
+FlipDescriptionList.style = flipDescriptionListCss;
+
+export { FlipDescriptionList as flip_description_list };