@getflip/swirl-components 0.1.0

package/dist/collection/components/flip-tooltip/flip-tooltip.stories.js

@@ -0,0 +1,33 @@
+import { generateStoryElement } from "../../utils";
+// @ts-ignore
+import Docs from "./flip-tooltip.mdx";
+export default {
+  component: "flip-tooltip",
+  decorators: [
+    (story) => {
+      const container = document.createElement("div");
+      container.style.display = "flex";
+      container.style.alignItems = "center";
+      container.style.justifyContent = "center";
+      container.style.padding = "140px";
+      container.append(story());
+      return container;
+    },
+  ],
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipTooltip",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-tooltip", args);
+  element.innerHTML = "Hover or focus me";
+  return element;
+};
+export const FlipTooltip = Template.bind({});
+FlipTooltip.args = {
+  content: `Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid officia, enim reiciendis esse minus impedit earum veniam, sunt eveniet.`,
+  position: "top",
+};

package/dist/collection/components/flip-visually-hidden/flip-visually-hidden.css

@@ -0,0 +1,13 @@
+:host {
+  position: absolute;
+  display: inline;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  border: 0;
+  white-space: nowrap;
+  word-wrap: normal;
+  clip: rect(0, 0, 0, 0);
+}

package/dist/collection/components/flip-visually-hidden/flip-visually-hidden.js

@@ -0,0 +1,15 @@
+import { Component, h, Host } from "@stencil/core";
+export class FlipVisuallyHidden {
+  render() {
+    return (h(Host, null,
+      h("slot", null)));
+  }
+  static get is() { return "flip-visually-hidden"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["flip-visually-hidden.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["flip-visually-hidden.css"]
+  }; }
+}

package/dist/collection/components/flip-visually-hidden/flip-visually-hidden.stories.js

@@ -0,0 +1,17 @@
+import { generateStoryElement } from "../../utils";
+import Docs from "./flip-visually-hidden.mdx";
+export default {
+  component: "flip-visually-hidden",
+  parameters: {
+    docs: {
+      page: Docs,
+    },
+  },
+  title: "Components/FlipVisuallyHidden",
+};
+const Template = (args) => {
+  const element = generateStoryElement("flip-visually-hidden", args, "Content");
+  return element;
+};
+export const FlipVisuallyHidden = Template.bind({});
+FlipVisuallyHidden.args = {};

package/dist/collection/index.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils.js

@@ -0,0 +1,39 @@
+export function generateStoryElement(tag, args, content) {
+  const element = document.createElement(tag);
+  Object.entries(args)
+    .filter((arg) => arg[1] !== undefined && arg[1] !== null && arg[1] !== "")
+    .forEach(([attr, value]) => {
+    if (typeof value === "object") {
+      return (element[attr] = value);
+    }
+    return element.setAttribute(attr.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? "-" : "") + $.toLowerCase()), String(value));
+  });
+  if (Boolean(content)) {
+    element.innerHTML = content;
+  }
+  return element;
+}
+export function querySelectorAllDeep(root, selector) {
+  function collectAllElementsDeep(selector, root) {
+    if (!Boolean(root)) {
+      return [];
+    }
+    const lightDomMatches = Array.from(root.querySelectorAll(selector));
+    const slottedChildren = Boolean(window.HTMLSlotElement) && root instanceof HTMLSlotElement
+      ? root.assignedElements()
+      : [];
+    const children = [...Array.from(root.children), ...slottedChildren];
+    const shadowRoot = root.shadowRoot;
+    const shadowRootElements = collectAllElementsDeep(selector, shadowRoot);
+    const matches = [
+      ...lightDomMatches,
+      ...children
+        .map((match) => collectAllElementsDeep(selector, match))
+        .flat(),
+      ...shadowRootElements,
+    ];
+    return matches;
+  }
+  const matches = collectAllElementsDeep(selector, root).filter((match, index, matches) => !matches.some((m, i) => m.isSameNode(match) && i > index));
+  return matches;
+}

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

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

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

@@ -0,0 +1,47 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const flipActionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-item{display:inline-flex;width:100%;min-width:15rem;margin:0;padding:var(--s-space-12) var(--s-space-16);justify-content:flex-start;align-items:center;border:none;color:var(--s-text-default);background-color:var(--s-surface-overlay-default);font:inherit;line-height:var(--s-line-height-base);text-align:left;cursor:pointer;gap:var(--s-space-12)}.action-list-item:hover{background-color:var(--s-surface-overlay-hovered)}.action-list-item:focus{background-color:var(--s-surface-overlay-hovered);outline:none}.action-list-item:active{background-color:var(--s-surface-overlay-pressed)}.action-list-item:disabled{background-color:var(--s-surface-overlay-default);cursor:default}.action-list-item:disabled .action-list-item__label,.action-list-item:disabled .action-list-item__description{color:var(--s-text-disabled)}.action-list-item:disabled .action-list-item__icon{color:var(--s-icon-disabled)}.action-list-item--size-l{padding:var(--s-space-16)}.action-list-item--intent-critical:not(:disabled) .action-list-item__label{color:var(--s-text-critical)}.action-list-item--intent-critical:not(:disabled) .action-list-item__icon{color:var(--s-icon-critical)}.action-list-item__icon{display:inline-flex;flex-shrink:0;color:var(--s-icon-default)}.action-list-item__label-container{display:inline-flex;min-width:0;flex-grow:1;align-items:flex-start;flex-direction:column}.action-list-item__label{overflow:hidden;max-width:100%;padding-top:0.0625rem;font-weight:var(--s-font-weight-medium);white-space:nowrap;text-overflow:ellipsis}.action-list-item__description{color:var(--s-text-subdued)}.action-list-item__suffix{display:inline-flex;flex-shrink:0;color:var(--s-icon-highlight)}";
+
+const FlipActionListItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.intent = "default";
+    this.size = "m";
+  }
+  render() {
+    const showSuffix = Boolean(this.suffix) && !this.disabled;
+    const className = classnames("action-list-item", `action-list-item--intent-${this.intent}`, `action-list-item--size-${this.size}`);
+    return (h(Host, null, h("button", { class: className, disabled: this.disabled, role: "menuitem", tabIndex: -1, type: "button" }, this.icon && (h("span", { class: "action-list-item__icon", innerHTML: this.icon })), h("span", { class: "action-list-item__label-container" }, h("span", { class: "action-list-item__label" }, this.label), this.description && (h("span", { class: "action-list-item__description" }, this.description))), showSuffix && (h("span", { class: "action-list-item__suffix", innerHTML: this.suffix })))));
+  }
+  static get style() { return flipActionListItemCss; }
+}, [1, "flip-action-list-item", {
+    "disabled": [4],
+    "description": [1],
+    "icon": [1],
+    "intent": [1],
+    "label": [1],
+    "size": [1],
+    "suffix": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-action-list-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-action-list-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipActionListItem$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipActionListItem = FlipActionListItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipActionListItem, defineCustomElement };

package/dist/components/flip-action-list-section.d.ts

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

package/dist/components/flip-action-list-section.js

@@ -0,0 +1,36 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const flipActionListSectionCss = ":host{display:block}:host *{box-sizing:border-box}.action-list-section{background-color:var(--s-surface-overlay-default)}.action-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}";
+
+const FlipActionListSection$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    return (h(Host, null, h("div", { "aria-labelledby": "label", class: "action-list-section", role: "group" }, h("span", { class: "action-list-section__label", id: "label" }, this.label), h("div", { class: "action-list-section__items" }, h("slot", null)))));
+  }
+  static get style() { return flipActionListSectionCss; }
+}, [1, "flip-action-list-section", {
+    "label": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-action-list-section"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-action-list-section":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipActionListSection$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipActionListSection = FlipActionListSection$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipActionListSection, defineCustomElement };

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

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

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

@@ -0,0 +1,67 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { q as querySelectorAllDeep } from './utils.js';
+
+const flipActionListCss = ":host{display:block}:host *{box-sizing:border-box}.action-list{background-color:var(--s-surface-overlay-default)}";
+
+const FlipActionList$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.onKeyDown = (event) => {
+      if (event.code === "ArrowDown" || event.code === "ArrowRight") {
+        event.preventDefault();
+        this.focusNextItem();
+      }
+      else if (event.code === "ArrowUp" || event.code === "ArrowLeft") {
+        event.preventDefault();
+        this.focusPreviousItem();
+      }
+    };
+  }
+  componentDidLoad() {
+    this.items = querySelectorAllDeep(this.el, '[role="menuitem"]');
+  }
+  focusNextItem() {
+    const activeItemIndex = this.getActiveItemIndex();
+    const newIndex = (activeItemIndex + 1) % this.items.length;
+    this.items[newIndex].focus();
+  }
+  focusPreviousItem() {
+    const activeItemIndex = this.getActiveItemIndex();
+    const newIndex = activeItemIndex === 0 ? this.items.length - 1 : activeItemIndex - 1;
+    this.items[newIndex].focus();
+  }
+  getActiveItemIndex() {
+    return this.items.findIndex((item) => {
+      var _a, _b;
+      return item === document.activeElement ||
+        item ===
+          ((_b = (_a = document.activeElement) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('[role="menuitem"]'));
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { "aria-orientation": "vertical", class: "action-list", onKeyDown: this.onKeyDown, role: "menu" }, h("slot", null))));
+  }
+  get el() { return this; }
+  static get style() { return flipActionListCss; }
+}, [1, "flip-action-list"]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-action-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-action-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipActionList$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipActionList = FlipActionList$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipActionList, defineCustomElement };

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

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

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

@@ -0,0 +1,41 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const flipAvatarGroupCss = ":host{display:inline-flex}:host *{box-sizing:border-box}.avatar-group{position:relative;display:inline-grid;grid-template-rows:repeat(8, 1fr);grid-template-columns:repeat(8, 1fr)}.avatar-group ::slotted(*:first-of-type){z-index:1;display:inline-flex;border:0.25rem solid var(--s-background-default);border-radius:50%;grid-column-start:1;grid-column-end:7;grid-row-start:3;grid-row-end:9}.avatar-group ::slotted(*:nth-of-type(2)){z-index:0;display:inline-flex;border:0.25rem solid var(--s-background-default);border-radius:50%;grid-column-start:3;grid-column-end:9;grid-row-start:1;grid-row-end:7}.avatar-group__badge{position:absolute;z-index:2;right:0;bottom:0;display:inline-flex;width:1.5rem;height:1.5rem}";
+
+const FlipAvatarGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+  }
+  render() {
+    const className = classnames("avatar-group", {
+      "avatar-group--has-badge": Boolean(this.badge),
+    });
+    const badgeClassName = classnames("avatar-group__badge");
+    return (h(Host, null, h("div", { class: className, role: "group" }, h("slot", null), this.badge && (h("span", { class: badgeClassName, innerHTML: this.badge })))));
+  }
+  static get style() { return flipAvatarGroupCss; }
+}, [1, "flip-avatar-group", {
+    "badge": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-avatar-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-avatar-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipAvatarGroup$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipAvatarGroup = FlipAvatarGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipAvatarGroup, defineCustomElement };

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

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

package/dist/components/flip-avatar.js

@@ -0,0 +1,111 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$2 } from './flip-icon-person2.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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 this; }
+  static get watchers() { return {
+    "src": ["watchSrcProp"]
+  }; }
+  static get style() { return flipAvatarCss; }
+}, [1, "flip-avatar", {
+    "badge": [1],
+    "badgePosition": [1, "badge-position"],
+    "icon": [1],
+    "initials": [1],
+    "interactive": [4],
+    "label": [1],
+    "showLabel": [4, "show-label"],
+    "size": [1],
+    "src": [1],
+    "variant": [1],
+    "imageAvailable": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-avatar", "flip-icon-person"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-avatar":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipAvatar$1);
+      }
+      break;
+    case "flip-icon-person":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipAvatar = FlipAvatar$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipAvatar, defineCustomElement };

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

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

package/dist/components/flip-badge.js

@@ -0,0 +1,47 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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)))));
+  }
+  static get style() { return flipBadgeCss; }
+}, [1, "flip-badge", {
+    "icon": [1],
+    "intent": [1],
+    "label": [1],
+    "size": [1],
+    "variant": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-badge"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-badge":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipBadge$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipBadge = FlipBadge$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipBadge, defineCustomElement };

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

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

package/dist/components/flip-banner.js

@@ -0,0 +1,76 @@
+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 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$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    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 this; }
+  static get style() { return flipBannerCss; }
+}, [1, "flip-banner", {
+    "actionLabel": [1, "action-label"],
+    "content": [1],
+    "dismissable": [4],
+    "dismissLabel": [1, "dismiss-label"],
+    "importance": [1],
+    "intent": [1],
+    "showIcon": [4, "show-icon"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["flip-banner", "flip-icon-close"];
+  components.forEach(tagName => { switch (tagName) {
+    case "flip-banner":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, FlipBanner$1);
+      }
+      break;
+    case "flip-icon-close":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const FlipBanner = FlipBanner$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { FlipBanner, defineCustomElement };