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

package/dist/components/swirl-file-viewer-text.d.ts

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

package/dist/components/swirl-file-viewer-text.js

@@ -0,0 +1,6 @@
+import { S as SwirlFileViewerText$1, d as defineCustomElement$1 } from './swirl-file-viewer-text2.js';
+
+const SwirlFileViewerText = SwirlFileViewerText$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlFileViewerText, defineCustomElement };

package/dist/components/swirl-file-viewer-text2.js

@@ -0,0 +1,90 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$4 } from './swirl-icon-error2.js';
+import { d as defineCustomElement$3 } from './swirl-inline-error2.js';
+import { d as defineCustomElement$2 } from './swirl-spinner2.js';
+import { d as defineCustomElement$1 } from './swirl-visually-hidden2.js';
+
+const swirlFileViewerTextCss = ":host{position:relative;display:inline-flex;width:100%;max-height:100%}:host *{box-sizing:border-box}.file-viewer-text__text{overflow:auto;width:100%;max-height:100%;margin:0;padding:0;padding:var(--s-space-16);background-color:var(--s-background-default);font-family:var(--s-font-family-code)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.file-viewer-text__text{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.file-viewer-text__spinner{position:absolute;display:flex;justify-content:center;align-items:center;background-color:rgba(0, 0, 0, 0.2);inset:0}.file-viewer-text__error{position:absolute;top:50%;left:50%;transform:translate3d(-50%, -50%, 0)}";
+
+const SwirlFileViewerText = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewerText extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.activate = createEvent(this, "activate", 7);
+    this.errorMessage = "File could not be loaded.";
+    this.file = undefined;
+    this.error = undefined;
+    this.loading = undefined;
+    this.text = undefined;
+  }
+  componentWillLoad() {
+    this.updateText();
+  }
+  componentDidLoad() {
+    this.activate.emit(this.el);
+  }
+  async updateText() {
+    this.error = false;
+    this.loading = true;
+    try {
+      const response = await fetch(this.file);
+      this.text = await response.text();
+      this.loading = false;
+    }
+    catch (e) {
+      this.loading = false;
+      this.error = true;
+    }
+  }
+  render() {
+    return (h(Host, { class: "file-viewer-text", exportparts: "file-viewer-text__text" }, this.error && (h("swirl-inline-error", { class: "file-viewer-text__error", message: this.errorMessage })), h("pre", { class: "file-viewer-text__text", part: "file-viewer-text__text", tabIndex: 0 }, this.text), this.loading && (h("div", { class: "file-viewer-text__spinner" }, h("swirl-spinner", null)))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "file": ["updateText"]
+  }; }
+  static get style() { return swirlFileViewerTextCss; }
+}, [1, "swirl-file-viewer-text", {
+    "errorMessage": [1, "error-message"],
+    "file": [1],
+    "error": [32],
+    "loading": [32],
+    "text": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-file-viewer-text", "swirl-icon-error", "swirl-inline-error", "swirl-spinner", "swirl-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-file-viewer-text":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlFileViewerText);
+      }
+      break;
+    case "swirl-icon-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "swirl-inline-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "swirl-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SwirlFileViewerText as S, defineCustomElement as d };

package/dist/components/swirl-file-viewer-video.d.ts

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

package/dist/components/swirl-file-viewer-video.js

@@ -0,0 +1,6 @@
+import { S as SwirlFileViewerVideo$1, d as defineCustomElement$1 } from './swirl-file-viewer-video2.js';
+
+const SwirlFileViewerVideo = SwirlFileViewerVideo$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlFileViewerVideo, defineCustomElement };

package/dist/components/swirl-file-viewer-video2.js

@@ -0,0 +1,43 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+
+const swirlFileViewerVideoCss = ":host{display:inline-flex;width:100%;max-height:100%}:host *{box-sizing:border-box}.file-viewer-video__video{width:100%;background-color:rgba(0, 0, 0, 1)}";
+
+const SwirlFileViewerVideo = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewerVideo extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.activate = createEvent(this, "activate", 7);
+    this.autoplay = undefined;
+    this.file = undefined;
+    this.type = undefined;
+  }
+  componentDidLoad() {
+    this.activate.emit(this.el);
+  }
+  render() {
+    return (h(Host, { class: "file-viewer-video" }, h("video", { autoplay: this.autoplay, class: "file-viewer-video__video", controls: true }, h("source", { src: this.file, type: this.type }))));
+  }
+  get el() { return this; }
+  static get style() { return swirlFileViewerVideoCss; }
+}, [1, "swirl-file-viewer-video", {
+    "autoplay": [4],
+    "file": [1],
+    "type": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-file-viewer-video"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-file-viewer-video":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlFileViewerVideo);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SwirlFileViewerVideo as S, defineCustomElement as d };

package/dist/components/swirl-file-viewer.d.ts

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

package/dist/components/swirl-file-viewer.js

@@ -0,0 +1,6 @@
+import { S as SwirlFileViewer$1, d as defineCustomElement$1 } from './swirl-file-viewer2.js';
+
+const SwirlFileViewer = SwirlFileViewer$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlFileViewer, defineCustomElement };

package/dist/components/swirl-file-viewer2.js

@@ -0,0 +1,152 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { a as createCommonjsModule, b as commonjsGlobal } from './index2.js';
+import { d as defineCustomElement$a } from './swirl-file-viewer-audio2.js';
+import { d as defineCustomElement$9 } from './swirl-file-viewer-csv2.js';
+import { d as defineCustomElement$8 } from './swirl-file-viewer-image2.js';
+import { d as defineCustomElement$7 } from './swirl-file-viewer-pdf2.js';
+import { d as defineCustomElement$6 } from './swirl-file-viewer-text2.js';
+import { d as defineCustomElement$5 } from './swirl-file-viewer-video2.js';
+import { d as defineCustomElement$4 } from './swirl-icon-error2.js';
+import { d as defineCustomElement$3 } from './swirl-inline-error2.js';
+import { d as defineCustomElement$2 } from './swirl-spinner2.js';
+import { d as defineCustomElement$1 } from './swirl-visually-hidden2.js';
+
+var FileSaver_min = createCommonjsModule(function (module, exports) {
+(function(a,b){b();})(commonjsGlobal,function(){function b(a,b){return "undefined"==typeof b?b={autoBom:!1}:"object"!=typeof b&&(console.warn("Deprecated: Expected third argument to be a object"),b={autoBom:!b}),b.autoBom&&/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(a.type)?new Blob(["\uFEFF",a],{type:a.type}):a}function c(a,b,c){var d=new XMLHttpRequest;d.open("GET",a),d.responseType="blob",d.onload=function(){g(d.response,b,c);},d.onerror=function(){console.error("could not download file");},d.send();}function d(a){var b=new XMLHttpRequest;b.open("HEAD",a,!1);try{b.send();}catch(a){}return 200<=b.status&&299>=b.status}function e(a){try{a.dispatchEvent(new MouseEvent("click"));}catch(c){var b=document.createEvent("MouseEvents");b.initMouseEvent("click",!0,!0,window,0,0,0,80,20,!1,!1,!1,!1,0,null),a.dispatchEvent(b);}}var f="object"==typeof window&&window.window===window?window:"object"==typeof self&&self.self===self?self:"object"==typeof commonjsGlobal&&commonjsGlobal.global===commonjsGlobal?commonjsGlobal:void 0,a=f.navigator&&/Macintosh/.test(navigator.userAgent)&&/AppleWebKit/.test(navigator.userAgent)&&!/Safari/.test(navigator.userAgent),g=f.saveAs||("object"!=typeof window||window!==f?function(){}:"download"in HTMLAnchorElement.prototype&&!a?function(b,g,h){var i=f.URL||f.webkitURL,j=document.createElement("a");g=g||b.name||"download",j.download=g,j.rel="noopener","string"==typeof b?(j.href=b,j.origin===location.origin?e(j):d(j.href)?c(b,g,h):e(j,j.target="_blank")):(j.href=i.createObjectURL(b),setTimeout(function(){i.revokeObjectURL(j.href);},4E4),setTimeout(function(){e(j);},0));}:"msSaveOrOpenBlob"in navigator?function(f,g,h){if(g=g||f.name||"download","string"!=typeof f)navigator.msSaveOrOpenBlob(b(f,h),g);else if(d(f))c(f,g,h);else {var i=document.createElement("a");i.href=f,i.target="_blank",setTimeout(function(){e(i);});}}:function(b,d,e,g){if(g=g||open("","_blank"),g&&(g.document.title=g.document.body.innerText="downloading..."),"string"==typeof b)return c(b,d,e);var h="application/octet-stream"===b.type,i=/constructor/i.test(f.HTMLElement)||f.safari,j=/CriOS\/[\d]+/.test(navigator.userAgent);if((j||h&&i||a)&&"undefined"!=typeof FileReader){var k=new FileReader;k.onloadend=function(){var a=k.result;a=j?a:a.replace(/^data:[^;]*;/,"data:attachment/file;"),g?g.location.href=a:location=a,g=null;},k.readAsDataURL(b);}else {var l=f.URL||f.webkitURL,m=l.createObjectURL(b);g?g.location=m:location.href=m,g=null,setTimeout(function(){l.revokeObjectURL(m);},4E4);}});f.saveAs=g.saveAs=g,(module.exports=g);});
+
+//# sourceMappingURL=FileSaver.min.js.map
+});
+
+const swirlFileViewerCss = ":host{display:block;width:100%;height:100%}:host *{box-sizing:border-box}.file-viewer{display:flex;width:100%;height:100%;justify-content:center;align-items:center}.file-viewer__file{display:inline-flex;width:100%;height:100%;justify-content:center;align-items:center}";
+
+const SwirlFileViewer = /*@__PURE__*/ proxyCustomElement(class SwirlFileViewer extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.activate = createEvent(this, "activate", 7);
+    this.visiblePagesChange = createEvent(this, "visiblePagesChange", 7);
+    this.onActivate = (event) => {
+      this.activate.emit(event.detail);
+    };
+    this.onVisiblePagesChange = (event) => {
+      this.visiblePagesChange.emit(event.detail);
+    };
+    this.active = true;
+    this.autoplay = undefined;
+    this.description = undefined;
+    this.errorMessage = "File could not be loaded.";
+    this.file = undefined;
+    this.thumbnailUrl = undefined;
+    this.type = undefined;
+    this.typeUnsupportedMessage = "File type is not supported.";
+    this.viewMode = "single";
+    this.zoom = 1;
+  }
+  /**
+   * Download the file.
+   */
+  async download() {
+    const fileName = this.file.split("/").pop();
+    const file = await fetch(this.file);
+    FileSaver_min.saveAs(await file.blob(), fileName);
+  }
+  /**
+   * Print the file. Applicable to PDFs only.
+   */
+  async print() {
+    if (this.type === "application/pdf") {
+      this.viewer.print();
+    }
+  }
+  render() {
+    const unsupportedType = !Boolean(this.type) ||
+      (!this.type.startsWith("image/") &&
+        !this.type.startsWith("video/") &&
+        !this.type.startsWith("audio/") &&
+        this.type !== "text/plain" &&
+        this.type !== "text/csv" &&
+        this.type !== "application/pdf");
+    return (h(Host, null, h("div", { class: "file-viewer" }, this.type && this.active && (h("div", { class: "file-viewer__file" }, this.type.startsWith("image/") && (h("swirl-file-viewer-image", { description: this.description, errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/plain" && (h("swirl-file-viewer-text", { errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "text/csv" && (h("swirl-file-viewer-csv", { errorMessage: this.errorMessage, file: this.file, ref: (el) => (this.viewer = el) })), this.type === "application/pdf" && (h("swirl-file-viewer-pdf", { errorMessage: this.errorMessage, file: this.file, onActivate: this.onActivate, onVisiblePagesChange: this.onVisiblePagesChange, ref: (el) => (this.viewer = el), viewMode: this.viewMode, zoom: this.zoom })), this.type.startsWith("video/") && (h("swirl-file-viewer-video", { autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), this.type.startsWith("audio/") && (h("swirl-file-viewer-audio", { autoplay: this.autoplay, file: this.file, ref: (el) => (this.viewer = el), type: this.type })), unsupportedType && (h("swirl-inline-error", { message: this.typeUnsupportedMessage })))))));
+  }
+  static get style() { return swirlFileViewerCss; }
+}, [1, "swirl-file-viewer", {
+    "active": [4],
+    "autoplay": [4],
+    "description": [1],
+    "errorMessage": [1, "error-message"],
+    "file": [1],
+    "thumbnailUrl": [1, "thumbnail-url"],
+    "type": [1],
+    "typeUnsupportedMessage": [1, "type-unsupported-message"],
+    "viewMode": [1, "view-mode"],
+    "zoom": [8],
+    "download": [64],
+    "print": [64]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-file-viewer", "swirl-file-viewer-audio", "swirl-file-viewer-csv", "swirl-file-viewer-image", "swirl-file-viewer-pdf", "swirl-file-viewer-text", "swirl-file-viewer-video", "swirl-icon-error", "swirl-inline-error", "swirl-spinner", "swirl-visually-hidden"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-file-viewer":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlFileViewer);
+      }
+      break;
+    case "swirl-file-viewer-audio":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$a();
+      }
+      break;
+    case "swirl-file-viewer-csv":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$9();
+      }
+      break;
+    case "swirl-file-viewer-image":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$8();
+      }
+      break;
+    case "swirl-file-viewer-pdf":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$7();
+      }
+      break;
+    case "swirl-file-viewer-text":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "swirl-file-viewer-video":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "swirl-icon-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "swirl-inline-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "swirl-visually-hidden":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SwirlFileViewer as S, defineCustomElement as d };

package/dist/components/swirl-form-control.d.ts

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

package/dist/components/swirl-form-control.js

@@ -0,0 +1,209 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { b as getActiveElement } from './utils.js';
+import { d as defineCustomElement$3 } from './swirl-icon-error2.js';
+import { d as defineCustomElement$2 } from './swirl-inline-error2.js';
+
+const swirlFormControlCss = ".sc-swirl-form-control-h{display:block;width:100%}.sc-swirl-form-control-h *.sc-swirl-form-control{box-sizing:border-box}.form-control.sc-swirl-form-control{--swirl-autocomplete-tags-margin-top:var(--s-space-4);display:block;width:100%;line-height:var(--s-line-height-sm)}.form-control.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-highlight);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__input.sc-swirl-form-control{overflow:hidden;max-height:0}.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .select__label.sc-swirl-form-control{overflow:hidden;max-height:0;pointer-events:none}.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:50%;font-size:var(--s-font-size-base);transform:translateY(50%);opacity:1}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-base);--swirl-autocomplete-tags-margin-top:0;padding-top:calc(var(--s-line-height-sm) + var(--s-space-4))}.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--is-select) .form-control__label.sc-swirl-form-control{cursor:text}.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--label-position-outside.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{bottom:calc(100% + var(--s-space-4));left:0;color:var(--s-text-default);font-size:var(--s-font-size-sm);font-weight:var(--s-font-weight-medium);transform:none;opacity:1}.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value):not(.form-control--has-focus):not(.form-control--is-select.sc-swirl-form-control).sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control,.form-control--label-position-outside.form-control--disabled.sc-swirl-form-control:not(.form-control--has-value).form-control--is-select .form-control__label-text.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--label-position-outside.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--label-position-outside.sc-swirl-form-control{--swirl-text-input-placeholder-size:var(--s-font-size-sm)}}.form-control--invalid.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--invalid.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-critical)}.form-control--disabled.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-color:var(--s-border-disabled);color:var(--s-text-disabled)}.form-control--disabled.sc-swirl-form-control .form-control__description.sc-swirl-form-control{color:var(--s-text-disabled)}.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.375rem + 2 * var(--s-border-width-default));padding:var(--s-space-8) var(--s-space-12);gap:var(--s-space-2)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control--inline.sc-swirl-form-control .form-control__label.sc-swirl-form-control{min-height:calc(2.25rem + 2 * var(--s-border-width-default))}}.form-control--inline.sc-swirl-form-control:not(.form-control--has-placeholder) .form-control__label-text.sc-swirl-form-control{right:var(--s-space-12);left:var(--s-space-12);transition:none;opacity:0}.form-control--inline.form-control--has-character-counter.sc-swirl-form-control .form-control__description.sc-swirl-form-control{max-width:calc(100% - 6rem)}.form-control--hide-label.sc-swirl-form-control .form-control__label-text.sc-swirl-form-control{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)}.form-control--has-prefix.form-control--label-position-outside.sc-swirl-form-control .form-control__label.sc-swirl-form-control{position:static}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled).form-control--invalid .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-critical);box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-critical)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__label.sc-swirl-form-control{border-left-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.form-control--has-focus.sc-swirl-form-control:not(.form-control--disabled) .form-control__prefix.sc-swirl-form-control{border-color:var(--s-border-highlight);border-right-color:transparent;box-shadow:0 0 0 var(--s-border-width-default) var(--s-border-highlight)}.form-control--has-prefix.sc-swirl-form-control .form-control__label.sc-swirl-form-control{border-top-left-radius:0;border-bottom-left-radius:0}.form-control--has-prefix.sc-swirl-form-control .form-control__prefix.sc-swirl-form-control{display:flex}.form-control__controls.sc-swirl-form-control{position:relative;display:flex;align-items:stretch}.form-control__label.sc-swirl-form-control{position:relative;display:flex;width:100%;min-height:4.375rem;padding:calc(var(--s-space-12) + 1.25rem) var(--s-space-16) var(--s-space-12);justify-content:center;border:var(--s-border-width-default) solid var(--s-border-strong);border-radius:var(--s-border-radius-sm);color:var(--s-text-subdued);flex-direction:column;gap:var(--s-space-2)}.form-control__label-text.sc-swirl-form-control{position:absolute;right:var(--s-space-16);bottom:calc(100% - 1.25rem - var(--s-space-12));left:var(--s-space-16);overflow:hidden;font-size:var(--s-font-size-sm);white-space:nowrap;text-overflow:ellipsis;transition:font-size 0.15s, transform 0.15s, top 0.15s;transform:none}.form-control__prefix.sc-swirl-form-control{z-index:1;display:none;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:center;align-items:center;border-top:var(--s-border-width-default) solid var(--s-border-strong);border-bottom:var(--s-border-width-default) solid var(--s-border-strong);border-left:var(--s-border-width-default) solid var(--s-border-strong);border-top-left-radius:var(--s-border-radius-sm);border-bottom-left-radius:var(--s-border-radius-sm);background-color:var(--s-surface-raised-default)}.form-control__prefix.sc-swirl-form-control-s>select{height:100%;margin-right:calc(-1 * var(--s-space-16));margin-left:calc(-1 * var(--s-space-16));padding-right:calc(var(--s-space-16) + 1.25rem);padding-left:var(--s-space-16);border:none;color:var(--s-text-default);background:url('data:image/svg+xml,<svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M10 12.4579C9.88889 12.4579 9.78472 12.4404 9.6875 12.4054C9.59027 12.3709 9.5 12.312 9.41666 12.2287L5.5625 8.37453C5.40972 8.22175 5.33694 8.03064 5.34416 7.8012C5.35083 7.57231 5.43055 7.38148 5.58333 7.2287C5.73611 7.07592 5.93055 6.99953 6.16666 6.99953C6.40277 6.99953 6.59722 7.07592 6.75 7.2287L10 10.4787L13.2708 7.20787C13.4236 7.05509 13.6147 6.98203 13.8442 6.9887C14.0731 6.99592 14.2639 7.07592 14.4167 7.2287C14.5694 7.38148 14.6458 7.57592 14.6458 7.81203C14.6458 8.04814 14.5694 8.24259 14.4167 8.39537L10.5833 12.2287C10.5 12.312 10.4097 12.3709 10.3125 12.4054C10.2153 12.4404 10.1111 12.4579 10 12.4579Z\" fill=\"%236E6E6E\"/></svg>');background-color:transparent;background-repeat:no-repeat;background-position:right var(--s-space-8) center;font:inherit;line-height:var(--s-line-height-base);cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.form-control__prefix.sc-swirl-form-control-s>select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__prefix.sc-swirl-form-control-s>select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.form-control__description.sc-swirl-form-control{display:block;margin-top:var(--s-space-4);padding-left:var(--s-space-4);color:var(--s-text-subdued);font-size:var(--s-font-size-sm)}.form-control__error-message.sc-swirl-form-control{display:block;margin-top:var(--s-space-4)}.form-control__input.sc-swirl-form-control-s>[contenteditable]:focus{outline:none}.form-control__input.sc-swirl-form-control-s>[contenteditable]{width:100%;margin:0;padding:0;border:none;color:var(--s-text-default);background-color:transparent;font:inherit;font-size:var(--s-font-size-base);line-height:var(--s-line-height-base);caret-color:var(--s-border-highlight)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.form-control__input.sc-swirl-form-control-s>[contenteditable]{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}";
+
+const SwirlFormControl$1 = /*@__PURE__*/ proxyCustomElement(class SwirlFormControl extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.descriptionId = `form-control-description-${Math.round(Math.random() * 100000)}`;
+    this.labelId = `form-control-label-${Math.round(Math.random() * 100000)}`;
+    this.listenToInputValueChanges = () => {
+      this.inputEl.addEventListener("valueChange", this.checkInputValue);
+    };
+    this.checkInputValue = () => {
+      this.inputValue = this.inputEl?.value;
+    };
+    this.onFocusIn = () => {
+      this.hasFocus = true;
+    };
+    this.onFocusOut = () => {
+      this.hasFocus = false;
+    };
+    this.onKeyDown = (event) => {
+      if (event.key === "Tab") {
+        setTimeout(() => {
+          if (!this.el.contains(getActiveElement())) {
+            this.hasFocus = false;
+          }
+        });
+      }
+    };
+    this.onLabelClick = () => {
+      if (Boolean(this.inputEl.getAttribute("contenteditable"))) {
+        this.inputEl.focus();
+      }
+    };
+    this.description = undefined;
+    this.disabled = undefined;
+    this.errorMessage = undefined;
+    this.hideLabel = undefined;
+    this.inline = undefined;
+    this.invalid = undefined;
+    this.label = undefined;
+    this.labelPosition = "inside";
+    this.hasFocus = undefined;
+    this.inputValue = undefined;
+  }
+  componentWillLoad() {
+    this.inputEl = this.el.children[0];
+    this.associateDescriptionWithInputElement();
+    this.associateLabelWithInputElement();
+    this.setInputElementDisabledState();
+    this.setInputElementInlineState();
+    this.setInputElementInvalidState();
+    this.setInputElementLabel();
+    this.checkInputValue();
+    this.listenToInputValueChanges();
+  }
+  componentDidRender() {
+    this.checkInputValue();
+  }
+  associateDescriptionWithInputElement() {
+    if (!Boolean(this.description) || !Boolean(this.inputEl)) {
+      return;
+    }
+    if (Boolean(this.inputEl.getAttribute("contenteditable"))) {
+      this.inputEl.setAttribute("aria-describedby", this.descriptionId);
+    }
+    else {
+      this.inputEl.setAttribute("swirl-aria-describedby", this.descriptionId);
+    }
+  }
+  setInputElementDisabledState() {
+    if (!Boolean(this.inputEl)) {
+      return;
+    }
+    if (this.disabled) {
+      this.inputEl.setAttribute("disabled", "true");
+    }
+    else {
+      this.inputEl.removeAttribute("disabled");
+    }
+  }
+  setInputElementInlineState() {
+    if (!Boolean(this.inputEl)) {
+      return;
+    }
+    if (this.inline || this.labelPosition === "outside") {
+      this.inputEl.setAttribute("inline", "true");
+    }
+    else {
+      this.inputEl.removeAttribute("inline");
+    }
+  }
+  setInputElementInvalidState() {
+    if (!Boolean(this.inputEl)) {
+      return;
+    }
+    if (this.invalid) {
+      this.inputEl.setAttribute("invalid", "true");
+    }
+    else {
+      this.inputEl.removeAttribute("invalid");
+    }
+  }
+  setInputElementLabel() {
+    if (!Boolean(this.inputEl)) {
+      return;
+    }
+    this.inputEl.setAttribute("label", this.label);
+  }
+  onWindowClick(event) {
+    if (!this.hasFocus) {
+      return;
+    }
+    const target = event.target;
+    if (this.el.contains(target)) {
+      return;
+    }
+    event.stopPropagation();
+    this.hasFocus = false;
+  }
+  associateLabelWithInputElement() {
+    if (!Boolean(this.inputEl.getAttribute("contenteditable"))) {
+      return;
+    }
+    this.inputEl.setAttribute("aria-labelledby", this.labelId);
+  }
+  render() {
+    const showErrorMessage = Boolean(this.errorMessage);
+    const showDescription = Boolean(this.description) && !showErrorMessage;
+    const hasContenteditableControl = Boolean(this.inputEl.getAttribute("contenteditable"));
+    const hasPrefix = Boolean(this.el.querySelector('[slot="prefix"]'));
+    const hasValue = Array.isArray(this.inputValue)
+      ? this.inputValue.length > 0
+      : Boolean(this.inputValue) ||
+        (hasContenteditableControl && Boolean(this.inputEl.innerHTML));
+    const hasCharacterCounter = Boolean(this.inputEl.getAttribute("show-character-counter"));
+    const hasPlaceholder = Boolean(this.inputEl.getAttribute("placeholder"));
+    const isSelect = this.inputEl.tagName === "SWIRL-SELECT";
+    const className = classnames("form-control", `form-control--label-position-${this.labelPosition}`, {
+      "form-control--disabled": this.disabled,
+      "form-control--has-character-counter": hasCharacterCounter,
+      "form-control--has-focus": this.hasFocus,
+      "form-control--has-placeholder": hasPlaceholder,
+      "form-control--has-prefix": hasPrefix,
+      "form-control--has-value": hasValue,
+      "form-control--hide-label": this.hideLabel,
+      "form-control--inline": this.inline,
+      "form-control--invalid": this.invalid,
+      "form-control--is-select": isSelect,
+    });
+    const LabelTag = hasContenteditableControl ? "div" : "label";
+    return (h(Host, { onFocusin: this.onFocusIn, onFocusout: this.onFocusOut, onKeyDown: this.onKeyDown }, h("div", { class: className, role: "group" }, h("span", { class: "form-control__controls" }, h("span", { class: "form-control__prefix" }, h("slot", { name: "prefix" })), h(LabelTag, { class: "form-control__label", onClick: this.onLabelClick }, h("span", { class: "form-control__label-text", id: this.labelId }, this.label), h("span", { class: "form-control__input" }, h("slot", null)))), showDescription && (h("span", { class: "form-control__description", id: this.descriptionId }, this.description)), showErrorMessage && (h("span", { "aria-live": "polite", class: "form-control__error-message", id: this.descriptionId }, h("swirl-inline-error", { message: this.errorMessage, size: "s" }))))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "description": ["associateDescriptionWithInputElement"],
+    "disabled": ["setInputElementDisabledState"],
+    "inline": ["setInputElementInlineState"],
+    "invalid": ["setInputElementInvalidState"],
+    "label": ["setInputElementLabel"]
+  }; }
+  static get style() { return swirlFormControlCss; }
+}, [6, "swirl-form-control", {
+    "description": [1],
+    "disabled": [4],
+    "errorMessage": [1, "error-message"],
+    "hideLabel": [4, "hide-label"],
+    "inline": [4],
+    "invalid": [4],
+    "label": [1],
+    "labelPosition": [1, "label-position"],
+    "hasFocus": [32],
+    "inputValue": [32]
+  }, [[8, "click", "onWindowClick"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-form-control", "swirl-icon-error", "swirl-inline-error"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-form-control":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlFormControl$1);
+      }
+      break;
+    case "swirl-icon-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "swirl-inline-error":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlFormControl = SwirlFormControl$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlFormControl, defineCustomElement };

package/dist/components/swirl-form-group.d.ts

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

package/dist/components/swirl-form-group.js

@@ -0,0 +1,38 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const swirlFormGroupCss = ".sc-swirl-form-group-h{display:block;width:100%}.sc-swirl-form-group-h *.sc-swirl-form-group{box-sizing:border-box}.form-group.sc-swirl-form-group{display:flex;flex-direction:column;gap:var(--s-space-16)}@media (min-width: 768px){.form-group.sc-swirl-form-group{gap:var(--s-space-24)}}.form-group--orientation-horizontal.sc-swirl-form-group{gap:var(--s-space-16)}@media (min-width: 768px){.form-group--orientation-horizontal.sc-swirl-form-group{flex-direction:row}}";
+
+const SwirlFormGroup$1 = /*@__PURE__*/ proxyCustomElement(class SwirlFormGroup extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.orientation = "vertical";
+  }
+  render() {
+    const className = classnames("form-group", `form-group--orientation-${this.orientation}`);
+    return (h(Host, null, h("div", { class: className }, h("slot", null))));
+  }
+  static get style() { return swirlFormGroupCss; }
+}, [6, "swirl-form-group", {
+    "orientation": [1]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-form-group"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-form-group":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlFormGroup$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlFormGroup = SwirlFormGroup$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlFormGroup, defineCustomElement };

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

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