@getflip/swirl-components 0.0.0-new-shell-20231128124118

package/dist/components/swirl-button2.js

@@ -0,0 +1,141 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { g as getDesktopMediaQuery } from './utils.js';
+
+const swirlButtonCss = ".sc-swirl-button-h{display:inline-block;max-width:100%;flex-shrink:0}.sc-swirl-button-h *.sc-swirl-button{box-sizing:border-box}.button.sc-swirl-button{display:inline-flex;width:100%;padding:var(--s-space-8) var(--s-space-16);justify-content:center;align-items:center;border:none;border-top-left-radius:var(--swirl-button-border-top-left-radius);border-top-right-radius:var(--swirl-button-border-top-right-radius);border-bottom-right-radius:var(--swirl-button-border-bottom-right-radius);border-bottom-left-radius:var(--swirl-button-border-bottom-left-radius);color:var(--s-text-subdued);background-color:var(--swirl-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-swirl-button:hover{background-color:var(--swirl-ghost-button-background-hovered)}.button.sc-swirl-button:active{background-color:var(--swirl-ghost-button-background-pressed)}.button.sc-swirl-button:disabled{color:var(--s-text-disabled);background-color:var(--swirl-ghost-button-background-disabled);cursor:default}.button.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-icon-disabled)}.button.sc-swirl-button:focus:not(:focus-visible){outline:none}.button.sc-swirl-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button.sc-swirl-button{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);gap:var(--s-space-4)}}.button--text-align-start.sc-swirl-button{justify-content:flex-start}.button--text-align-center.sc-swirl-button{justify-content:center}.button--text-align-end.sc-swirl-button{justify-content:flex-end}.button--variant-ghost.button--intent-strong.sc-swirl-button:not(:disabled){color:var(--s-text-default)}.button--variant-ghost.button--intent-strong.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-ghost.button--intent-primary.sc-swirl-button:not(:disabled){color:var(--s-text-highlight)}.button--variant-ghost.button--intent-primary.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--intent-critical.sc-swirl-button:not(:disabled){color:var(--s-text-critical)}.button--variant-ghost.button--intent-critical.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-ghost.button--pressed.sc-swirl-button{color:var(--s-text-highlight)}.button--variant-ghost.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-ghost.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-ghost.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-flat.sc-swirl-button{color:var(--s-text-default);background-color:var(--swirl-flat-button-background-default)}.button--variant-flat.sc-swirl-button:hover{background-color:var(--swirl-flat-button-background-hovered)}.button--variant-flat.sc-swirl-button:active{background-color:var(--swirl-flat-button-background-pressed)}.button--variant-flat.sc-swirl-button:disabled{background-color:var(--swirl-flat-button-background-disabled)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled){color:var(--s-text-on-action-primary);background-color:var(--s-action-primary-default)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled):hover{background-color:var(--s-action-primary-hovered)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled):active{background-color:var(--s-action-primary-pressed)}.button--variant-flat.button--intent-primary.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-flat.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-outline.sc-swirl-button{color:var(--s-text-default);box-shadow:inset 0 0 0 var(--s-border-width-default) var(--s-border-strong)}.button--variant-outline.sc-swirl-button:disabled{box-shadow:inset 0 0 0 var(--s-border-width-default)\n      var(--s-border-default)}.button--variant-outline.button--intent-critical.sc-swirl-button:not(:disabled){color:var(--s-text-critical);box-shadow:inset 0 0 0 var(--s-border-width-default)\n      var(--s-border-critical)}.button--variant-outline.button--intent-critical.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-critical)}.button--variant-outline.button--pressed.sc-swirl-button{box-shadow:inset 0 0 0 var(--s-border-width-default)\n      var(--s-border-highlight);color:var(--s-text-highlight)}.button--variant-outline.button--pressed.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-highlight)}.button--variant-outline.button--size-l.sc-swirl-button{padding:var(--s-space-12) var(--s-space-20)}.button--variant-outline.button--size-l.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-outline.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.sc-swirl-button{padding:0;border-radius:0;color:var(--s-interactive-neutral-default);background-color:transparent}.button--variant-plain.sc-swirl-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-swirl-button:hover:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-interactive-neutral-default)}.button--variant-plain.sc-swirl-button:active:not(:disabled){color:var(--s-interactive-neutral-hovered);background-color:transparent}.button--variant-plain.sc-swirl-button:active:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-interactive-neutral-hovered)}.button--variant-plain.sc-swirl-button:disabled{color:var(--s-interactive-neutral-disabled);background-color:transparent}.button--variant-plain.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-interactive-neutral-disabled)}.button--variant-plain.button--icon-only.sc-swirl-button{padding:0}.button--variant-plain.button--intent-strong.sc-swirl-button:not(:disabled){color:var(--s-text-default)}.button--variant-plain.button--intent-strong.sc-swirl-button:not(:disabled) .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--variant-plain.button--intent-primary.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:hover .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.button--intent-primary.sc-swirl-button:active{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:active .button__icon.sc-swirl-button{color:var(--s-interactive-primary-hovered)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-interactive-primary-disabled)}.button--variant-plain.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-interactive-primary-default)}.button--variant-plain.sc-swirl-button .button__icon.sc-swirl-button{margin-left:0;color:var(--s-interactive-neutral-default)}.button--variant-on-image.sc-swirl-button{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.6)}.button--variant-on-image.sc-swirl-button:hover{background:rgba(0, 0, 0, 0.5)}.button--variant-on-image.sc-swirl-button:active{background:rgba(0, 0, 0, 0.4)}.button--variant-on-image.sc-swirl-button:disabled{color:var(--s-text-on-image);background:rgba(0, 0, 0, 0.3)}.button--variant-on-image.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-on-image.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-image)}.button--variant-floating.sc-swirl-button{color:var(--s-text-default);background-color:var(--s-surface-overlay-default);box-shadow:var(--s-shadow-level-1)}.button--variant-floating.sc-swirl-button:hover{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-hovered)}.button--variant-floating.sc-swirl-button:active{color:var(--s-text-on-action-primary);background-color:var(--s-surface-overlay-pressed)}.button--variant-floating.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-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-swirl-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-swirl-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-swirl-button:disabled{color:var(--s-text-on-action-primary)}.button--variant-floating.button--intent-primary.sc-swirl-button:disabled .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.button--intent-primary.button--icon-only.sc-swirl-button{padding:var(--s-space-12)}.button--variant-floating.button--intent-primary.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-on-action-primary)}.button--variant-floating.sc-swirl-button .button__icon.sc-swirl-button{color:var(--s-icon-strong)}.button--icon-position-end.sc-swirl-button .button__icon.sc-swirl-button{margin-right:calc(-1 * var(--s-space-4));margin-left:0;order:2}.button--pill.sc-swirl-button{border-radius:1.25rem}.button--pill.button--size-l.sc-swirl-button{border-radius:1.5rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.button--size-l.sc-swirl-button{border-radius:1.375rem}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.button--pill.sc-swirl-button{border-radius:1.125rem}}.button--icon-only.sc-swirl-button{padding:var(--s-space-8)}.button--icon-only.button--pill.sc-swirl-button{border-top-left-radius:var(--swirl-icon-button-border-top-left-radius);border-top-right-radius:var(--swirl-icon-button-border-top-right-radius);border-bottom-right-radius:var(\n      --swirl-icon-button-border-bottom-right-radius\n    );border-bottom-left-radius:var(\n      --swirl-icon-button-border-bottom-left-radius\n    )}.button--icon-only.sc-swirl-button .button__icon.sc-swirl-button{margin-right:0;margin-left:0}.button--has-icon.sc-swirl-button .button__icon.sc-swirl-button{display:inline-flex}.button__icon.sc-swirl-button{display:none;margin-left:calc(-1 * var(--s-space-4));color:var(--s-icon-default);order:0}.button__label.sc-swirl-button{overflow:hidden;max-width:100%;white-space:nowrap;text-overflow:ellipsis;order:1}";
+
+const SwirlButton = /*@__PURE__*/ proxyCustomElement(class SwirlButton extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.desktopMediaQuery = getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.forceIconProps(event.matches);
+    };
+    this.disabled = undefined;
+    this.download = undefined;
+    this.swirlAriaControls = undefined;
+    this.swirlAriaCurrent = undefined;
+    this.swirlAriaDescribedby = undefined;
+    this.swirlAriaExpanded = undefined;
+    this.swirlAriaHaspopup = undefined;
+    this.swirlAriaLabel = undefined;
+    this.form = undefined;
+    this.hideLabel = undefined;
+    this.href = undefined;
+    this.icon = undefined;
+    this.iconPosition = "start";
+    this.intent = "default";
+    this.label = undefined;
+    this.name = undefined;
+    this.pill = undefined;
+    this.pressed = undefined;
+    this.size = "m";
+    this.target = undefined;
+    this.textAlign = "center";
+    this.type = "button";
+    this.value = undefined;
+    this.variant = "ghost";
+  }
+  componentDidLoad() {
+    this.forceIconProps(this.desktopMediaQuery.matches);
+    this.updateFormAttribute();
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+  }
+  componentDidRender() {
+    this.forceIconProps(this.desktopMediaQuery.matches);
+    this.updateFormAttribute();
+  }
+  disconnectedCallback() {
+    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+  }
+  forceIconProps(smallIcon) {
+    if (!Boolean(this.iconEl)) {
+      return;
+    }
+    const icon = this.iconEl.children[0];
+    if (icon?.tagName.startsWith("SWIRL-ICON") ||
+      icon?.tagName.startsWith("SWIRL-EMOJI") ||
+      icon?.tagName.startsWith("SWIRL-SYMBOL")) {
+      icon?.setAttribute("size", smallIcon ? "20" : "24");
+    }
+  }
+  getAriaLabel(hideLabel) {
+    if (Boolean(this.swirlAriaLabel)) {
+      return this.swirlAriaLabel;
+    }
+    else if (hideLabel) {
+      return this.label;
+    }
+    return undefined;
+  }
+  updateFormAttribute() {
+    // Workaround: form attribute cannot be set via Stencil JSX
+    // https://github.com/ionic-team/stencil/issues/2703
+    const isLink = Boolean(this.href);
+    if (isLink || !Boolean(this.form)) {
+      this.buttonEl?.removeAttribute("form");
+    }
+    else {
+      this.buttonEl?.setAttribute("form", this.form);
+    }
+  }
+  render() {
+    const hideLabel = (this.hideLabel && Boolean(this.icon)) ||
+      (this.variant === "floating" && this.intent === "default");
+    const isLink = Boolean(this.href);
+    const ariaLabel = this.getAriaLabel(hideLabel);
+    const hasIcon = this.icon || Boolean(this.el.querySelector("[slot='icon']"));
+    const className = classnames("button", `button--icon-position-${this.iconPosition}`, `button--intent-${this.intent}`, `button--size-${this.size}`, `button--text-align-${this.textAlign}`, `button--variant-${this.variant}`, {
+      "button--has-icon": hasIcon,
+      "button--icon-only": hideLabel,
+      "button--pill": this.pill,
+      "button--pressed": this.pressed,
+    });
+    const Tag = isLink ? "a" : "button";
+    return (h(Host, { style: { pointerEvents: this.disabled ? "none" : "" } }, h(Tag, { "aria-controls": this.swirlAriaControls, "aria-current": this.swirlAriaCurrent, "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled && !isLink ? "true" : undefined, "aria-expanded": this.swirlAriaExpanded, "aria-haspopup": this.swirlAriaHaspopup, "aria-label": ariaLabel, "aria-pressed": this.pressed ? "true" : 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, ref: (el) => (this.buttonEl = el), target: isLink ? this.target : undefined, type: isLink ? undefined : this.type, value: isLink ? undefined : this.value }, Boolean(this.icon) && (h("span", { class: "button__icon", innerHTML: this.icon, ref: (el) => (this.iconEl = el) })), !Boolean(this.icon) && (h("span", { class: "button__icon", ref: (el) => (this.iconEl = el) }, h("slot", { name: "icon" }))), !hideLabel && h("span", { class: "button__label" }, this.label))));
+  }
+  get el() { return this; }
+  static get style() { return swirlButtonCss; }
+}, [6, "swirl-button", {
+    "disabled": [4],
+    "download": [1],
+    "swirlAriaControls": [1, "swirl-aria-controls"],
+    "swirlAriaCurrent": [1, "swirl-aria-current"],
+    "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
+    "swirlAriaExpanded": [1, "swirl-aria-expanded"],
+    "swirlAriaHaspopup": [1, "swirl-aria-haspopup"],
+    "swirlAriaLabel": [1, "swirl-aria-label"],
+    "form": [1],
+    "hideLabel": [4, "hide-label"],
+    "href": [1],
+    "icon": [1],
+    "iconPosition": [1, "icon-position"],
+    "intent": [1],
+    "label": [1],
+    "name": [1],
+    "pill": [4],
+    "pressed": [4],
+    "size": [1],
+    "target": [1],
+    "textAlign": [1, "text-align"],
+    "type": [1],
+    "value": [1],
+    "variant": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlButton);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SwirlButton as S, defineCustomElement as d };

package/dist/components/swirl-card.d.ts

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

package/dist/components/swirl-card.js

@@ -0,0 +1,113 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const swirlCardCss = ":host{display:contents}:host *{box-sizing:border-box}.card{--swirl-ghost-button-background-default:var(--s-surface-default);--swirl-ghost-button-background-hovered:var(--s-surface-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-pressed);--swirl-resource-list-item-background-default:var(--s-surface-default);--swirl-resource-list-item-background-hovered:var(--s-surface-hovered);--swirl-resource-list-item-background-pressed:var(--s-surface-pressed);display:flex;overflow:hidden;width:100%;margin:0;padding:0;border:var(--s-border-width-default) solid var(--s-border-default);border-radius:var(--s-border-radius-base);color:var(--s-text-default);background-color:var(--swirl-card-background-default);font:inherit;text-decoration:none;flex-direction:column}a.card,button.card,.card--interactive{cursor:pointer}a.card:hover,button.card:hover,.card--interactive:hover{background-color:var(--swirl-card-background-hovered)}a.card:active,button.card:active,.card--interactive:active{background-color:var(--swirl-card-background-pressed)}a.card:focus:not(:focus-visible),button.card:focus:not(:focus-visible),.card--interactive:focus:not(:focus-visible){outline:none}a.card:focus-visible,button.card:focus-visible,.card--interactive:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-4)}.card--is--borderless{border:0}.card--elevated{border-color:transparent;box-shadow:0 0.75rem 1rem rgba(25, 26, 28, 0.12),\n    0 0.25rem 0.75rem rgba(25, 26, 28, 0.08)}.card--highlighted{border-width:0.1875rem;border-color:var(--s-border-highlight)}.card--justify-content-start .card__body{justify-content:flex-start}.card--justify-content-center .card__body{justify-content:center}.card--justify-content-end .card__body{justify-content:flex-end}:not(.card--has-image) .card__image{overflow:hidden;height:0}.card--intent-critical-subdued{background-color:var(--s-surface-critical-subdued)}.card--intent-default-subdued{--swirl-resource-list-item-background-default:var(\n    --s-surface-raised-default\n  );--swirl-resource-list-item-background-hovered:var(\n    --s-surface-raised-hovered\n  );--swirl-resource-list-item-background-pressed:var(\n    --s-surface-raised-pressed\n  );--swirl-ghost-button-background-default:var(--s-surface-raised-default);--swirl-ghost-button-background-hovered:var(--s-surface-raised-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-raised-pressed);background-color:var(--s-surface-raised-default)}.card--intent-info-subdued{background-color:var(--s-surface-info-subdued)}.card--intent-success-subdued{background-color:var(--s-surface-success-subdued)}.card--intent-warning-subdued{background-color:var(--s-surface-warning-subdued)}.content-section{padding:0 var(--s-space-16)}.card__image{overflow:hidden;min-height:0}.card__image ::slotted(img){display:inline-flex;width:100%;max-height:100%;-o-object-fit:cover;object-fit:cover}.card__body{display:flex;min-height:0;padding:var(--s-space-12) var(--s-space-16) var(--s-space-16);flex-grow:1;flex-direction:column;gap:var(--s-space-16)}";
+
+const swirlCardBorderRadiusTokens = ["xs", "sm", "base", "l", "xl"];
+const SwirlCard$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCard extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.as = "div";
+    this.borderRadius = "base";
+    this.elevated = undefined;
+    this.height = undefined;
+    this.highlighted = undefined;
+    this.href = undefined;
+    this.imageAspectRatio = undefined;
+    this.intent = "default";
+    this.isBorderless = undefined;
+    this.interactive = undefined;
+    this.justifyContent = "start";
+    this.linkTarget = undefined;
+    this.overflow = undefined;
+    this.padding = undefined;
+    this.paddingBlockEnd = undefined;
+    this.paddingBlockStart = undefined;
+    this.paddingInlineEnd = undefined;
+    this.paddingInlineStart = undefined;
+    this.swirlAriaLabel = undefined;
+    this.swirlAriaLabelledby = undefined;
+  }
+  render() {
+    const Tag = Boolean(this.href) ? "a" : this.as;
+    const hasImage = Boolean(this.el.querySelector('[slot="image"]'));
+    const styles = {
+      borderRadius: swirlCardBorderRadiusTokens.includes(this.borderRadius)
+        ? `var(--s-border-radius-${this.borderRadius})`
+        : this.borderRadius,
+      height: this.height,
+      overflow: this.overflow,
+    };
+    const bodyStyles = {
+      padding: Boolean(this.padding)
+        ? `var(--s-space-${this.padding})`
+        : undefined,
+      paddingBlockEnd: Boolean(this.paddingBlockEnd)
+        ? `var(--s-space-${this.paddingBlockEnd})`
+        : undefined,
+      paddingBlockStart: Boolean(this.paddingBlockStart)
+        ? `var(--s-space-${this.paddingBlockStart})`
+        : undefined,
+      paddingInlineEnd: Boolean(this.paddingInlineEnd)
+        ? `var(--s-space-${this.paddingInlineEnd})`
+        : undefined,
+      paddingInlineStart: Boolean(this.paddingInlineStart)
+        ? `var(--s-space-${this.paddingInlineStart})`
+        : undefined,
+    };
+    const className = classnames("card", `card--intent-${this.intent}`, `card--justify-content-${this.justifyContent}`, {
+      "card--elevated": this.elevated,
+      "card--has-image": hasImage,
+      "card--highlighted": this.highlighted,
+      "card--interactive": this.interactive || this.href,
+      "card--is--borderless": this.isBorderless,
+    });
+    return (h(Host, { styles: { height: this.height } }, h(Tag, { "aria-label": this.swirlAriaLabel, "aria-labelledby": this.swirlAriaLabelledby, class: className, href: this.href, rel: Boolean(this.href) && this.linkTarget === "_blank"
+        ? "noreferrer"
+        : undefined, style: styles, target: this.linkTarget }, h("div", { class: "card__image", style: { aspectRatio: this.imageAspectRatio } }, h("slot", { name: "image" })), h("div", { class: "card__body", style: bodyStyles }, h("div", { class: "card__content" }, h("slot", { name: "content" }))))));
+  }
+  get el() { return this; }
+  static get style() { return swirlCardCss; }
+}, [1, "swirl-card", {
+    "as": [1],
+    "borderRadius": [1, "border-radius"],
+    "elevated": [4],
+    "height": [1],
+    "highlighted": [4],
+    "href": [1],
+    "imageAspectRatio": [1, "image-aspect-ratio"],
+    "intent": [1],
+    "isBorderless": [4, "is-borderless"],
+    "interactive": [4],
+    "justifyContent": [1, "justify-content"],
+    "linkTarget": [1, "link-target"],
+    "overflow": [1],
+    "padding": [1],
+    "paddingBlockEnd": [1, "padding-block-end"],
+    "paddingBlockStart": [1, "padding-block-start"],
+    "paddingInlineEnd": [1, "padding-inline-end"],
+    "paddingInlineStart": [1, "padding-inline-start"],
+    "swirlAriaLabel": [1, "swirl-aria-label"],
+    "swirlAriaLabelledby": [1, "swirl-aria-labelledby"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlCard$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlCard = SwirlCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlCard, defineCustomElement };

package/dist/components/swirl-carousel-slide.d.ts

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

package/dist/components/swirl-carousel-slide.js

@@ -0,0 +1,45 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const swirlCarouselSlideCss = ":host{display:block;min-width:0}:host(.carousel-slide--has-min-height) ::slotted(*){height:100%}:host *{box-sizing:border-box}:host ::slotted(*){width:100%;min-height:100%}";
+
+const SwirlCarouselSlide$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarouselSlide extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.label = undefined;
+    this.minHeight = undefined;
+    this.width = "15.5rem";
+  }
+  render() {
+    const className = classnames("carousel-slide", {
+      "carousel-slide--has-min-height": Boolean(this.minHeight),
+    });
+    return (h(Host, { "aria-roledescription": "slide", "aria-label": this.label, class: className, role: "group", style: { flexBasis: this.width, minHeight: this.minHeight }, tabIndex: 0 }, h("slot", null)));
+  }
+  static get style() { return swirlCarouselSlideCss; }
+}, [1, "swirl-carousel-slide", {
+    "label": [1],
+    "minHeight": [1, "min-height"],
+    "width": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-carousel-slide"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-carousel-slide":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlCarouselSlide$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlCarouselSlide = SwirlCarouselSlide$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlCarouselSlide, defineCustomElement };

package/dist/components/swirl-carousel.d.ts

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

package/dist/components/swirl-carousel.js

@@ -0,0 +1,149 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as debounce } from './utils.js';
+import { d as defineCustomElement$2 } from './swirl-button2.js';
+
+const swirlCarouselCss = ":host{position:relative;display:block;overflow:hidden;width:100%;margin-top:calc(-1 * var(--s-space-24));margin-bottom:calc(-1 * var(--s-space-24))}:host(:hover) .carousel__previous-slide-button{pointer-events:auto;opacity:1}:host(:hover) .carousel__next-slide-button{pointer-events:auto;opacity:1}:host *{box-sizing:border-box}.carousel{position:relative;overflow:hidden;width:100%}.carousel__slides{position:relative;display:flex;overflow-x:auto;overflow-y:hidden;width:100%;padding:var(--s-space-24) var(--s-space-16) var(--s-space-24)\n    var(--s-space-16);scroll-padding:var(--s-space-16);scrollbar-width:none;scroll-snap-type:x mandatory;scroll-behavior:smooth}.carousel__slides::-webkit-scrollbar{display:none}.carousel__slides ::slotted(*){margin-left:var(--s-space-16);flex-grow:0;flex-shrink:0;scroll-snap-align:start}@media (min-width: 768px){.carousel__slides ::slotted(*){margin-left:var(--s-space-24)}}@media (min-width: 768px){.carousel__slides{padding-right:var(--s-space-24);padding-left:var(--s-space-24);scroll-padding:var(--s-space-24)}}.carousel__previous-slide-button{position:absolute;z-index:1;top:calc(50% - var(--s-space-12));left:var(--s-space-4);visibility:hidden;transition:opacity 0.2s;transform:translateY(-50%) scale(0.72);pointer-events:none;opacity:0}@media (min-width: 768px){.carousel__previous-slide-button{visibility:visible}}.carousel__next-slide-button{position:absolute;z-index:1;top:calc(50% - var(--s-space-12));right:var(--s-space-4);visibility:hidden;transition:opacity 0.2s;transform:translateY(-50%) scale(0.72);pointer-events:none;opacity:0}@media (min-width: 768px){.carousel__next-slide-button{visibility:visible}}";
+
+const SwirlCarousel$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCarousel extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.activeSlidesChange = createEvent(this, "activeSlidesChange", 7);
+    this.activeSlides = [];
+    this.updateActiveSlideReferences = debounce(() => {
+      const activeSlides = this.getActiveSlides();
+      const activeSlidesChanged = activeSlides.some((slide, index) => this.activeSlides[index] !== slide);
+      if (activeSlidesChanged) {
+        this.activeSlides = activeSlides;
+        this.activeSlidesChange.emit(this.activeSlides);
+      }
+    }, 100);
+    this.onPreviousSlideButtonClick = () => {
+      this.previousSlide();
+    };
+    this.onNextSlideButtonClick = () => {
+      this.nextSlide();
+    };
+    this.onSlotChange = () => {
+      // restore scroll position to active slide when slides are removed or added after first render
+      this.activeSlides[0]?.scrollIntoView({ block: "nearest", inline: "start" });
+    };
+    this.onScroll = () => {
+      this.updateActiveSlideReferences();
+      this.checkScrollPosition();
+    };
+    this.label = undefined;
+    this.nextSlideButtonLabel = "Next slide";
+    this.previousSlideButtonLabel = "Previous slide";
+    this.loopAround = false;
+    this.isAtEnd = undefined;
+    this.isAtStart = undefined;
+    this.isScrollable = undefined;
+  }
+  onWindowResize() {
+    this.checkScrollStatus();
+  }
+  componentDidLoad() {
+    queueMicrotask(() => {
+      this.checkScrollStatus();
+      this.checkScrollPosition();
+    });
+  }
+  /**
+   * Scroll to slide with id.
+   */
+  async scrollToSlide(id) {
+    const slides = this.getSlides();
+    const slide = slides.find((slide) => slide.id === id);
+    if (!Boolean(slide)) {
+      return;
+    }
+    slide.scrollIntoView({ block: "nearest", inline: "start" });
+  }
+  previousSlide() {
+    const slides = this.getSlides();
+    const activeSlides = this.getActiveSlides();
+    const previouSlide = activeSlides[0].previousElementSibling ||
+      (this.loopAround ? slides[slides.length - 1] : activeSlides[0]);
+    previouSlide?.scrollIntoView({ block: "nearest", inline: "start" });
+  }
+  nextSlide() {
+    const slides = this.getSlides();
+    const activeSlides = this.getActiveSlides();
+    const isAtEnd = !Boolean(activeSlides[activeSlides.length - 1].nextElementSibling);
+    const nextSlide = isAtEnd && this.loopAround
+      ? slides[0]
+      : activeSlides[0].nextElementSibling;
+    nextSlide?.scrollIntoView({ block: "nearest", inline: "start" });
+  }
+  getSlides() {
+    return Array.from(this.el.querySelectorAll("swirl-carousel-slide"));
+  }
+  getActiveSlides() {
+    const slides = this.getSlides();
+    return slides.filter((slide) => this.checkInView(slide));
+  }
+  checkScrollStatus() {
+    this.isScrollable =
+      this.slidesContainer.scrollWidth > this.slidesContainer.offsetWidth;
+  }
+  checkScrollPosition() {
+    const slides = this.getSlides();
+    const activeSlides = this.getActiveSlides();
+    const isAtStart = activeSlides[0] === slides[0];
+    const isAtEnd = activeSlides[activeSlides.length - 1] === slides[slides.length - 1];
+    if (isAtStart !== this.isAtStart) {
+      this.isAtStart = isAtStart;
+    }
+    if (isAtEnd !== this.isAtEnd) {
+      this.isAtEnd = isAtEnd;
+    }
+  }
+  checkInView(element) {
+    let containerLeft = this.slidesContainer.scrollLeft;
+    let containerRight = containerLeft + this.slidesContainer.clientWidth;
+    let elementLeft = element.offsetLeft;
+    let elementRight = elementLeft + element.clientWidth;
+    let inInView = elementLeft >= containerLeft && elementRight <= containerRight;
+    return inInView;
+  }
+  render() {
+    return (h(Host, { "aria-label": this.label, "aria-roledescription": "carousel", role: "group" }, h("div", { class: "carousel" }, this.isScrollable && !this.isAtStart && (h("swirl-button", { class: "carousel__previous-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.previousSlideButtonLabel, onClick: this.onPreviousSlideButtonClick, pill: true, variant: "floating" })), this.isScrollable && !this.isAtEnd && (h("swirl-button", { class: "carousel__next-slide-button", hideLabel: true, icon: "<swirl-icon-arrow-forward></swirl-icon-arrow-forward>", label: this.nextSlideButtonLabel, onClick: this.onNextSlideButtonClick, pill: true, variant: "floating" })), h("div", { "aria-live": "polite", class: "carousel__slides", onScroll: this.onScroll, ref: (el) => (this.slidesContainer = el) }, h("slot", { onSlotchange: this.onSlotChange })))));
+  }
+  get el() { return this; }
+  static get style() { return swirlCarouselCss; }
+}, [1, "swirl-carousel", {
+    "label": [1],
+    "nextSlideButtonLabel": [1, "next-slide-button-label"],
+    "previousSlideButtonLabel": [1, "previous-slide-button-label"],
+    "loopAround": [4, "loop-around"],
+    "isAtEnd": [32],
+    "isAtStart": [32],
+    "isScrollable": [32],
+    "scrollToSlide": [64]
+  }, [[9, "resize", "onWindowResize"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-carousel", "swirl-button"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-carousel":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlCarousel$1);
+      }
+      break;
+    case "swirl-button":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlCarousel = SwirlCarousel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlCarousel, defineCustomElement };

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

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

package/dist/components/swirl-checkbox.js

@@ -0,0 +1,101 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { d as defineCustomElement$3 } from './swirl-icon-check-strong2.js';
+import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
+
+const swirlCheckboxCss = ".sc-swirl-checkbox-h{display:inline-flex}.sc-swirl-checkbox-h *.sc-swirl-checkbox{box-sizing:border-box}.checkbox.sc-swirl-checkbox{display:inline-flex;line-height:var(--s-line-height-base);cursor:pointer}.checkbox.sc-swirl-checkbox:focus-within .checkbox__box.sc-swirl-checkbox{box-shadow:0 0 0 0.0625rem var(--s-background-default),\n      0 0 0 0.1875rem var(--s-focus-default)}.checkbox--variant-card.sc-swirl-checkbox{width:100%;padding:var(--s-space-16);border:0.0625rem solid var(--s-border-default);border-radius:var(--s-border-radius-sm);background-color:var(--s-surface)}.checkbox--variant-card.sc-swirl-checkbox:focus-within{box-shadow:0 0 0 0.125rem var(--s-background-default),\n      0 0 0 0.25rem var(--s-focus-default)}.checkbox--variant-card.sc-swirl-checkbox:focus-within .checkbox__box.sc-swirl-checkbox{box-shadow:none}.checkbox--variant-card.sc-swirl-checkbox:hover:not(.checkbox--disabled){background-color:var(--s-surface-hovered)}.checkbox--variant-card.sc-swirl-checkbox:active:not(.checkbox--disabled){background-color:var(--s-surface-pressed)}.checkbox--variant-card.checkbox--checked.sc-swirl-checkbox:not(.checkbox--disabled){border-color:var(--s-border-highlight)}.checkbox--variant-card.checkbox--invalid.sc-swirl-checkbox:not(.checkbox--disabled){border-color:var(--s-border-critical)}.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-interactive-primary-hovered);background-color:var(--s-interactive-primary-hovered)}.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-highlight);color:var(--s-text-on-status);background-color:var(--s-icon-highlight)}.checkbox--invalid.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--invalid.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-critical)}.checkbox--invalid.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-critical)}.checkbox--disabled.sc-swirl-checkbox{cursor:default}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled);background-color:var(--s-icon-disabled)}.checkbox--disabled.checkbox--checked.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox,.checkbox--disabled.checkbox--indeterminate.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{background-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:transparent}.checkbox--disabled.sc-swirl-checkbox .checkbox__box.sc-swirl-checkbox{border-color:var(--s-icon-disabled)}.checkbox--disabled.sc-swirl-checkbox .checkbox__label.sc-swirl-checkbox,.checkbox--disabled.sc-swirl-checkbox .checkbox__description.sc-swirl-checkbox{color:var(--s-text-disabled)}.checkbox--label-weight-regular.sc-swirl-checkbox .checkbox__label.sc-swirl-checkbox{font-weight:var(--s-font-weight-regular)}.checkbox__control.sc-swirl-checkbox{position:relative;width:1.5rem;height:1.5rem;padding:var(--s-space-2);flex-shrink:0}.checkbox__control.sc-swirl-checkbox:hover .checkbox__box.sc-swirl-checkbox{background-color:var(--s-action-neutral-hovered)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__control.sc-swirl-checkbox{width:1.375rem;height:1.375rem}}.checkbox__box.sc-swirl-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-swirl-checkbox{display:inline-flex;width:1.0625rem;height:1.0625rem}.checkbox__icon.sc-swirl-checkbox>*.sc-swirl-checkbox::part(icon){width:1.0625rem;height:1.0625rem}.checkbox__indeterminate-icon.sc-swirl-checkbox{position:relative;width:100%;height:100%}.checkbox__indeterminate-icon.sc-swirl-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-swirl-checkbox{display:inline-flex;margin-left:var(--s-space-8);padding-top:var(--s-space-2);align-items:flex-start;flex-direction:column}.checkbox__label.sc-swirl-checkbox{font-weight:var(--s-font-weight-medium)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__label.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.checkbox__description.sc-swirl-checkbox{color:var(--s-text-subdued)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.checkbox__description.sc-swirl-checkbox{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+
+const SwirlCheckbox$1 = /*@__PURE__*/ proxyCustomElement(class SwirlCheckbox extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.onChange = () => {
+      this.checked =
+        this.checked === true || this.checked === "true" ? false : true;
+      this.valueChange.emit(this.checked);
+    };
+    this.checked = false;
+    this.description = undefined;
+    this.disabled = false;
+    this.swirlAriaDescribedby = undefined;
+    this.swirlAriaLabel = undefined;
+    this.inputId = undefined;
+    this.inputName = undefined;
+    this.invalid = undefined;
+    this.label = undefined;
+    this.labelWeight = "medium";
+    this.value = undefined;
+    this.variant = "default";
+  }
+  getAriaCheckedLabel(checked, unchecked) {
+    if (checked) {
+      return "true";
+    }
+    else if (unchecked) {
+      return "false";
+    }
+    return "mixed";
+  }
+  render() {
+    const unchecked = this.checked === false || this.checked === "false";
+    const checked = this.checked === true || this.checked === "true";
+    const indeterminate = this.checked === "indeterminate";
+    const showLabelContainer = Boolean(this.label) || Boolean(this.description);
+    const ariaCheckedLabel = this.getAriaCheckedLabel(checked, unchecked);
+    const ariaInvalid = this.invalid === true || this.invalid === false
+      ? String(this.invalid)
+      : undefined;
+    const className = classnames("checkbox", `checkbox--label-weight-${this.labelWeight}`, `checkbox--variant-${this.variant}`, {
+      "checkbox--checked": checked,
+      "checkbox--disabled": this.disabled,
+      "checkbox--indeterminate": indeterminate,
+      "checkbox--invalid": this.invalid,
+      "checkbox--unchecked": unchecked,
+    });
+    return (h(Host, { style: { width: this.variant === "card" ? "100%" : undefined } }, h("label", { class: className, htmlFor: this.inputId }, h("span", { class: "checkbox__control" }, h("swirl-visually-hidden", null, h("input", { "aria-checked": ariaCheckedLabel, "aria-describedby": this.swirlAriaDescribedby, "aria-invalid": ariaInvalid, "aria-label": this.swirlAriaLabel, 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("swirl-icon-check-strong", null), indeterminate && (h("span", { class: "checkbox__indeterminate-icon" }))))), showLabelContainer && (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 swirlCheckboxCss; }
+}, [2, "swirl-checkbox", {
+    "checked": [1032],
+    "description": [1],
+    "disabled": [4],
+    "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
+    "swirlAriaLabel": [1, "swirl-aria-label"],
+    "inputId": [1, "input-id"],
+    "inputName": [1, "input-name"],
+    "invalid": [4],
+    "label": [1],
+    "labelWeight": [1, "label-weight"],
+    "value": [1],
+    "variant": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-checkbox", "swirl-icon-check-strong", "swirl-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-checkbox":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlCheckbox$1);
+      }
+      break;
+    case "swirl-icon-check-strong":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlCheckbox = SwirlCheckbox$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlCheckbox, defineCustomElement };

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

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