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

package/dist/cjs/swirl-console-layout.cjs.entry.js

@@ -0,0 +1,137 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+const utils = require('./utils-2b6367e4.js');
+
+const swirlConsoleLayoutCss = ":host{display:block;width:100%;height:100vh}:host *{box-sizing:border-box}.console-layout{display:grid;width:100%;height:100%;grid-template-columns:1fr;grid-template-areas:\"main\"}@media (min-width: 768px){.console-layout{grid-template-columns:20rem 1fr;grid-template-areas:\"sidebar main\"}}@media (max-width: 767px){.console-layout--sidebar-active .console-layout__sidebar{transform:translate3d(0, 0, 0);box-shadow:0 0 1rem rgba(0, 0, 0, 0.06)}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__main{grid-template-areas:\"content\";grid-template-rows:1fr}}@media (min-width: 768px){.console-layout--empty-app-bar .console-layout__app-bar{display:none}}.console-layout__sidebar{position:fixed;z-index:var(--s-z-30);top:4rem;bottom:0;left:0;display:grid;overflow-x:hidden;overflow-y:auto;width:100%;max-width:20rem;border-right:var(--s-border-width-default) solid var(--s-border-default);transition:transform 0.15s, box-shadow 0.15s;transform:translate3d(-100%, 0, 0);grid-template-rows:auto 1fr auto;grid-template-areas:\"header\"\n    \"navigation\"\n    \"user\"}@media (prefers-reduced-motion){.console-layout__sidebar{transition:none}}@media (min-width: 768px){.console-layout__sidebar{position:static;top:auto;left:auto;max-width:none;height:100%;transform:none;box-shadow:none;grid-area:sidebar}}.console-layout__header{overflow:hidden;min-width:0;padding:var(--s-space-20) var(--s-space-24);background-color:var(--s-background-default);grid-area:header}.console-layout__navigation{overflow-x:hidden;overflow-y:auto;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-background-default);grid-area:navigation}.console-layout__user{overflow:hidden;margin-top:var(--s-border-width-default);padding:var(--s-space-16) var(--s-space-24) var(--s-space-24);border-top:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);grid-area:user}.console-layout__main{display:grid;overflow-x:hidden;overflow-y:auto;width:100%;height:100%;grid-area:main;gap:var(--s-border-width-default);grid-template-rows:4rem 1fr;grid-template-areas:\"app-bar\"\n    \"content\"}.console-layout__app-bar{position:sticky;z-index:var(--s-z-30);top:0;display:flex;min-width:0;padding-right:var(--s-space-16);padding-left:var(--s-space-16);align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);background-color:var(--s-background-default);gap:var(--s-space-12);grid-area:app-bar}@media (min-width: 768px){.console-layout__app-bar{padding-right:2.5rem;padding-left:2.5rem}}@media (min-width: 768px){.console-layout__mobile-navigation-button{display:none}}.console-layout__app-name{min-width:0;flex-grow:1}.console-layout__app-name .heading{overflow:hidden;font-weight:var(--s-font-weight-regular);white-space:nowrap;text-overflow:ellipsis}.console-layout__help-button{flex-shrink:0}.console-layout__content{display:flex;min-width:0;padding:var(--s-space-16);background-color:var(--s-background-default);flex-direction:column;grid-area:content}@media (min-width: 768px){.console-layout__content{padding:2.5rem}}.console-layout__integration{flex-grow:1}.console-layout__logo{display:flex;min-width:0;align-items:center;gap:var(--s-space-12)}.console-layout__logo-mark{flex-shrink:0}.console-layout__logo-text{min-width:0}.console-layout__logo-text::part(text){overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.console-layout__content-header{display:flex;margin-bottom:var(--s-space-24);flex-shrink:0;gap:var(--s-space-16)}.console-layout__back-button{position:relative;top:calc(-1 * var(--s-space-2));flex-shrink:0}.console-layout__heading-container{flex-grow:1}.console-layout__subheading{margin-top:var(--s-space-8)}.console-layout__content-header-tools{display:flex;flex-shrink:0}";
+
+const SwirlConsoleLayout = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.backButtonClick = index.createEvent(this, "backButtonClick", 7);
+    this.helpButtonClick = index.createEvent(this, "helpButtonClick", 7);
+    this.onBackButtonClick = (event) => {
+      this.backButtonClick.emit(event);
+    };
+    this.onHelpButtonClick = (event) => {
+      this.helpButtonClick.emit(event);
+    };
+    this.onMobileNavigationToggleClick = () => {
+      this.toggleSidebar();
+    };
+    this.onClick = (event) => {
+      const target = event.target;
+      const clickOnToggle = Boolean(target.closest(".console-layout__mobile-navigation-button"));
+      const clickOnOverlay = target.closest("[slot]")?.slot === "overlays";
+      const clickInsideSidebar = event.composedPath().includes(this.sidebarEl);
+      if (!clickInsideSidebar &&
+        !clickOnToggle &&
+        !clickOnOverlay &&
+        this.sidebarActive) {
+        this.deactivateSidebar();
+      }
+    };
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape" && this.sidebarActive) {
+        this.deactivateSidebar();
+      }
+    };
+    this.appName = undefined;
+    this.backButonLabel = "Back";
+    this.heading = undefined;
+    this.helpButonLabel = "Help";
+    this.hideNavigationButtonLabel = "Hide main navigation";
+    this.logoText = "Admin";
+    this.navigationLabel = "Main";
+    this.maxContentWidth = undefined;
+    this.showBackButton = undefined;
+    this.showHelpButton = undefined;
+    this.showNavigationButtonLabel = "Show main navigation";
+    this.subheading = undefined;
+    this.sidebarActive = undefined;
+  }
+  componentDidLoad() {
+    queueMicrotask(() => {
+      if (!utils.isMobileViewport()) {
+        this.activateSidebar();
+      }
+      else {
+        this.deactivateSidebar();
+      }
+    });
+  }
+  onWindowResize() {
+    const mobileViewport = utils.isMobileViewport();
+    if (!mobileViewport && !this.sidebarActive) {
+      this.activateSidebar();
+    }
+    else if (mobileViewport) {
+      this.deactivateSidebar();
+    }
+  }
+  /**
+   * Toggle the mobile navigation visibility.
+   */
+  async toggleSidebar() {
+    if (this.sidebarActive) {
+      this.deactivateSidebar();
+    }
+    else {
+      this.activateSidebar();
+    }
+  }
+  /**
+   * Show the mobile navigation.
+   */
+  async showSidebar() {
+    if (!this.sidebarActive) {
+      this.activateSidebar();
+    }
+  }
+  /**
+   * Hide the mobile navigation.
+   */
+  async hideSidebar() {
+    if (this.sidebarActive) {
+      this.deactivateSidebar();
+    }
+  }
+  activateSidebar() {
+    this.sidebarActive = true;
+    this.sidebarEl.removeAttribute("inert");
+    if (utils.isMobileViewport()) {
+      this.el.querySelector("swirl-tree-navigation-item")?.focus();
+    }
+  }
+  deactivateSidebar() {
+    this.sidebarActive = false;
+    if (utils.isMobileViewport()) {
+      this.sidebarEl.setAttribute("inert", "");
+    }
+  }
+  render() {
+    const contentStyles = Boolean(this.maxContentWidth)
+      ? {
+        maxWidth: this.maxContentWidth,
+        justifySelf: "center",
+        width: "100%",
+      }
+      : undefined;
+    const className = index$1.classnames("console-layout", {
+      "console-layout--sidebar-active": this.sidebarActive,
+      "console-layout--empty-app-bar": !Boolean(this.appName) && !this.showHelpButton,
+    });
+    return (index.h(index.Host, null, index.h("div", { class: className, onClick: this.onClick, onKeyDown: this.onKeyDown }, index.h("header", { "aria-hidden": String(!this.sidebarActive), class: "console-layout__sidebar", ref: (el) => (this.sidebarEl = el) }, index.h("div", { class: "console-layout__header" }, index.h("div", { class: "console-layout__logo" }, index.h("svg", { class: "console-layout__logo-mark", fill: "none", height: "26", viewBox: "0 0 16 26", width: "16", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { d: "M0.624238 14.0705C0.326496 13.5353 0.118077 12.9406 0.0287543 12.3161C-0.0307941 11.662 -0.0010199 11.0375 0.147851 10.4428C0.296722 9.84813 0.594464 9.25343 0.951754 8.77767C1.33882 8.27217 1.78543 7.85588 2.35114 7.55853L14.6181 0.362671C14.9159 0.8979 15.1243 1.4926 15.2136 2.11703C15.3029 2.74147 15.2434 3.3659 15.0945 3.99034C14.9456 4.58504 14.6479 5.17974 14.2906 5.6555C13.9035 6.16099 13.4569 6.57728 12.8912 6.87463L0.624238 14.0705Z", fill: "#145AF5" }), index.h("path", { d: "M3.69214 21.4743C3.3944 20.9391 3.18598 20.3444 3.09666 19.72C3.00733 19.0956 3.06688 18.4711 3.21575 17.8467C3.36462 17.252 3.66237 16.6573 4.01966 16.1815C4.40672 15.676 4.85333 15.2597 5.41904 14.9624L12.2076 10.9779C12.5053 11.5131 12.7137 12.1078 12.803 12.7323C12.8924 13.3567 12.8328 13.9811 12.6839 14.6056C12.5351 15.2003 12.2373 15.795 11.88 16.2707C11.493 16.7762 11.0464 17.1925 10.4807 17.4899L3.69214 21.4743Z", fill: "#145AF5" }), index.h("path", { d: "M3.69141 21.4739L7.77047 19.0951C8.39573 20.1953 8.5446 21.5036 8.24686 22.7228C7.91934 23.9419 7.14521 24.9826 6.04357 25.6368L3.69141 21.4739Z", fill: "#80A8F4" }), index.h("path", { d: "M12.2072 10.9785L7.32419 10.1459L0.625 14.0709L5.38887 14.9629L12.2072 10.9785Z", fill: "#80A8F4" })), index.h("swirl-text", { class: "console-layout__logo-text", weight: "medium" }, this.logoText))), index.h("nav", { "aria-label": this.navigationLabel, class: "console-layout__navigation" }, index.h("slot", { name: "navigation" })), index.h("div", { class: "console-layout__user" }, index.h("slot", { name: "user" }))), index.h("main", { "aria-labelledby": Boolean(this.appName) ? "app-name" : undefined, class: "console-layout__main" }, index.h("header", { class: "console-layout__app-bar" }, index.h("span", { class: "console-layout__mobile-navigation-button" }, index.h("swirl-button", { swirlAriaExpanded: String(this.sidebarActive), hideLabel: true, icon: this.sidebarActive
+        ? "<swirl-icon-close></swirl-icon-close>"
+        : "<swirl-icon-menu></swirl-icon-menu>", label: this.sidebarActive
+        ? this.hideNavigationButtonLabel
+        : this.showNavigationButtonLabel, onClick: this.onMobileNavigationToggleClick })), index.h("div", { class: "console-layout__app-name" }, this.appName && (index.h("swirl-heading", { as: "h1", headingId: "app-name", level: 4, text: this.appName }))), this.showHelpButton && (index.h("swirl-button", { class: "console-layout__help-button", hideLabel: true, icon: "<swirl-icon-help></swirl-icon-help>", label: this.helpButonLabel, onClick: this.onHelpButtonClick }))), index.h("section", { "aria-labelledby": "heading", class: "console-layout__content", style: contentStyles }, index.h("header", { class: "console-layout__content-header" }, this.showBackButton && (index.h("swirl-button", { class: "console-layout__back-button", hideLabel: true, icon: "<swirl-icon-arrow-back></swirl-icon-arrow-back>", label: this.backButonLabel, onClick: this.onBackButtonClick })), Boolean(this.heading) && (index.h("div", { class: "console-layout__heading-container" }, index.h("swirl-heading", { as: Boolean(this.appName) ? "h2" : "h1", class: "console-layout__heading", headingId: "heading", level: 1, text: this.heading }), this.subheading && (index.h("swirl-text", { class: "console-layout__subheading", color: "subdued" }, this.subheading)))), !Boolean(this.heading) && (index.h("div", { class: "console-layout__heading-container" }, index.h("slot", { name: "heading" }))), index.h("div", { class: "console-layout__content-header-tools" }, index.h("slot", { name: "content-header-tools" }))), index.h("div", { class: "console-layout__integration" }, index.h("slot", { name: "content" }))), index.h("div", { class: "console-layout__overlays" }, index.h("slot", { name: "overlays" }))))));
+  }
+  get el() { return index.getElement(this); }
+};
+SwirlConsoleLayout.style = swirlConsoleLayoutCss;
+
+exports.swirl_console_layout = SwirlConsoleLayout;

package/dist/cjs/swirl-date-input.cjs.entry.js

@@ -0,0 +1,135 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+const maska = require('./maska-895c9954.js');
+const utils = require('./utils-2b6367e4.js');
+
+const swirlDateInputCss = ".sc-swirl-date-input-h{display:flex;width:100%}.sc-swirl-date-input-h *.sc-swirl-date-input{box-sizing:border-box}.date-input.sc-swirl-date-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input--inline.sc-swirl-date-input .date-input__date-picker-button.sc-swirl-date-input{top:0}}.date-input__input.sc-swirl-date-input{display:inline-flex;width:calc(100% - 1.25rem - var(--s-space-8));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)}.date-input__input.sc-swirl-date-input:focus{outline:none}.date-input__input.sc-swirl-date-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__input.sc-swirl-date-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-input__date-picker-button.sc-swirl-date-input{position:absolute;top:calc(-1 * var(--s-space-12));right:0;display:inline-flex;margin:0;padding:0;border:none;color:var(--s-icon-default);background-color:transparent;cursor:pointer}.date-input__date-picker-button.sc-swirl-date-input:focus:not(:focus-visible){outline:none}.date-input__date-picker-button.sc-swirl-date-input:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-input__date-picker-button.sc-swirl-date-input:disabled{color:var(--s-icon-disabled);cursor:default}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.date-input__date-picker-button.sc-swirl-date-input{top:-0.625rem}}";
+
+const internalDateFormat = "yyyy-MM-dd";
+const SwirlDateInput = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.invalidInput = index.createEvent(this, "invalidInput", 7);
+    this.valueChange = index.createEvent(this, "valueChange", 7);
+    this.desktopMediaQuery = utils.getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.updateIconSize(event.matches);
+    };
+    this.onChange = (event) => {
+      const value = event.target.value;
+      if (value === "") {
+        this.value = undefined;
+        this.valueChange.emit(undefined);
+      }
+      const newDate = maska.parse(value, this.format, new Date());
+      // First, escape any backslashes in the format string
+      const escapedFormat = this.format.replace(/\\/g, "\\\\");
+      // Then construct the RegExp using the escaped format string
+      const formatRegExp = new RegExp(`^${escapedFormat.replace(/[ydM]/g, "\\d")}$`);
+      if (!Boolean(value.match(formatRegExp))) {
+        return;
+      }
+      if (!maska.isValid(newDate)) {
+        this.invalidInput.emit(value);
+        return;
+      }
+      const newValue = maska.format(newDate, internalDateFormat);
+      this.value = newValue;
+      this.valueChange.emit(newValue);
+    };
+    this.onInput = (event) => {
+      this.onChange(event);
+    };
+    this.onClick = (event) => {
+      event.preventDefault();
+    };
+    this.onFocus = (event) => {
+      this.handleAutoSelect(event);
+    };
+    this.onPickDate = (event) => {
+      const newDateValue = event.detail;
+      const newValue = maska.format(newDateValue, internalDateFormat);
+      this.value = newValue;
+      this.valueChange.emit(newValue);
+      this.pickerPopover.close();
+    };
+    this.autoFocus = undefined;
+    this.autoSelect = undefined;
+    this.datePickerLabel = "Date picker";
+    this.datePickerTriggerLabel = "Open date picker";
+    this.disabled = undefined;
+    this.format = "yyyy-MM-dd";
+    this.inline = undefined;
+    this.invalid = undefined;
+    this.labels = undefined;
+    this.locale = "en-US";
+    this.placeholder = "yyyy-mm-dd";
+    this.required = undefined;
+    this.swirlAriaDescribedby = undefined;
+    this.value = undefined;
+    this.iconSize = 24;
+  }
+  componentWillLoad() {
+    const index = Array.from(document.querySelectorAll("swirl-date-input")).indexOf(this.el);
+    this.id = `swirl-date-input-${index}`;
+  }
+  componentDidLoad() {
+    this.setupMask();
+    this.updateIconSize(this.desktopMediaQuery.matches);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.inputEl.focus();
+      });
+    }
+  }
+  disconnectedCallback() {
+    this.mask?.destroy();
+    this.desktopMediaQuery.removeEventListener?.("change", this.desktopMediaQueryHandler);
+  }
+  watchFormat() {
+    this.setupMask();
+  }
+  updateIconSize(smallIcon) {
+    this.iconSize = smallIcon ? 20 : 24;
+  }
+  handleAutoSelect(event) {
+    if (!this.autoSelect) {
+      return;
+    }
+    event.target.select();
+  }
+  setupMask() {
+    this.mask?.destroy();
+    this.mask = maska.maska.create(`#${this.id}`, {
+      mask: this.format.replace(/[ydM]/g, "#"),
+    });
+  }
+  render() {
+    const ariaInvalid = this.invalid === true || this.invalid === false
+      ? String(this.invalid)
+      : undefined;
+    const dateValue = Boolean(this.value)
+      ? maska.parse(this.value, internalDateFormat, new Date())
+      : undefined;
+    const displayValue = maska.isValid(dateValue)
+      ? maska.format(dateValue, this.format)
+      : undefined;
+    const className = index$1.classnames("date-input", {
+      "date-input--inline": this.inline,
+    });
+    return (index.h(index.Host, null, index.h("div", { class: className }, index.h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, id: this.id, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), index.h("swirl-popover-trigger", { popover: `popover-${this.id}` }, index.h("button", { "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, index.h("swirl-icon-today", { size: this.iconSize })))), !this.disabled && (index.h("swirl-popover", { animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, index.h("swirl-date-picker", { labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
+  }
+  get el() { return index.getElement(this); }
+  static get watchers() { return {
+    "format": ["watchFormat"]
+  }; }
+};
+SwirlDateInput.style = swirlDateInputCss;
+
+exports.swirl_date_input = SwirlDateInput;

package/dist/cjs/swirl-date-picker_2.cjs.entry.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const utils = require('./utils-2b6367e4.js');
+const index$1 = require('./index-2ddd0598.js');
+
+const swirlDatePickerCss = ":host{display:block}:host *{box-sizing:border-box}.date-picker{padding:var(--s-space-8) var(--s-space-16);background-color:var(--s-surface-overlay-default);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm);letter-spacing:var(--s-letter-spacing-tighter)}@media (min-width: 768px){.date-picker{max-width:17.5rem}}.date-picker__header{display:flex;margin-bottom:var(--s-space-8);align-items:center}.date-picker__current-month{display:flex;padding:var(--s-space-8);flex-grow:1;align-items:center;order:1;gap:var(--s-space-4)}.date-picker__next-month-button,.date-picker__previous-month-button{position:relative;display:inline-flex;width:2.5rem;height:2.5rem;margin:0;padding:0;flex-shrink:0;justify-content:center;align-items:center;border:none;border-radius:50%;color:var(--s-icon-highlight);background-color:transparent;cursor:pointer}.date-picker__next-month-button:after,.date-picker__previous-month-button:after{position:absolute;background-color:currentColor;content:\"\";inset:0;-webkit-mask-position:center center;mask-position:center center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.date-picker__next-month-button:hover,.date-picker__previous-month-button:hover{background-color:var(--s-surface-overlay-hovered)}.date-picker__next-month-button:focus:not(:focus-visible),.date-picker__previous-month-button:focus:not(:focus-visible){outline:none}.date-picker__next-month-button:focus-visible,.date-picker__previous-month-button:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-picker__next-month-button>svg,.date-picker__previous-month-button>svg{display:none}.date-picker__next-month-button{order:3}.date-picker__next-month-button:after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.59999 17.4C8.38333 17.1834 8.27499 16.9167 8.27499 16.6C8.27499 16.2834 8.38333 16.0167 8.59999 15.8L12.4 12L8.59999 8.20002C8.38333 7.98336 8.27499 7.71669 8.27499 7.40002C8.27499 7.08336 8.38333 6.81669 8.59999 6.60002C8.81666 6.38336 9.08333 6.27502 9.39999 6.27502C9.71666 6.27502 9.98333 6.38336 10.2 6.60002L14.8 11.2C14.9167 11.3167 15 11.4417 15.05 11.575C15.1 11.7084 15.125 11.85 15.125 12C15.125 12.15 15.1 12.2917 15.05 12.425C15 12.5584 14.9167 12.6834 14.8 12.8L10.2 17.4C9.98333 17.6167 9.71666 17.725 9.39999 17.725C9.08333 17.725 8.81666 17.6167 8.59999 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\")}.date-picker__previous-month-button{order:2}.date-picker__previous-month-button:after{-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml,%3Csvg class='swirl-icon swirl-icon--size-24' fill='none' height='24' part='icon' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.2 17.4L8.59999 12.8C8.48333 12.6834 8.39999 12.5584 8.34999 12.425C8.29999 12.2917 8.27499 12.15 8.27499 12C8.27499 11.85 8.29999 11.7084 8.34999 11.575C8.39999 11.4417 8.48333 11.3167 8.59999 11.2L13.2 6.60002C13.4167 6.38336 13.6833 6.27502 14 6.27502C14.3167 6.27502 14.5833 6.38336 14.8 6.60002C15.0167 6.81669 15.125 7.08336 15.125 7.40002C15.125 7.71669 15.0167 7.98336 14.8 8.20002L11 12L14.8 15.8C15.0167 16.0167 15.125 16.2834 15.125 16.6C15.125 16.9167 15.0167 17.1834 14.8 17.4C14.5833 17.6167 14.3167 17.725 14 17.725C13.6833 17.725 13.4167 17.6167 13.2 17.4Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E\")}.date-picker__month-select,.date-picker__year-select{margin:0;padding:0;border:none;background-color:var(--s-surface-overlay-default);font:inherit;font-size:var(--s-font-size-base);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left;cursor:pointer}.date-picker__month-select:focus:not(:focus-visible),.date-picker__year-select:focus:not(:focus-visible){outline:none}.date-picker__month-select:focus-visible,.date-picker__year-select: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){.date-picker__month-select,.date-picker__year-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.date-picker__month-select{-webkit-appearance:none;-moz-appearance:none;appearance:none}.date-picker__year-select{max-width:4rem}.date-picker__calendar{display:block;width:100%}.date-picker__calendar tbody{display:block}.date-picker__calendar-header{display:block}.date-picker__weekday-row,.date-picker__calendar-row{display:flex}.date-picker__weekday-row{margin-bottom:var(--s-space-8)}.date-picker__weekday{display:inline-flex;min-width:2.25rem;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;color:var(--s-text-subdued);font-weight:var(--s-font-weight-regular);aspect-ratio:1}.date-picker__date{position:relative;z-index:1;display:inline-flex;min-width:2.25rem;flex-basis:calc(100 / 7 * 1%);justify-content:center;align-items:center;font-weight:var(--s-font-weight-medium);cursor:pointer;aspect-ratio:1}.date-picker__date:before{position:absolute;z-index:-1;border-radius:50%;background-color:transparent;content:\"\";inset:0}.date-picker__date:hover:before{background-color:var(--s-surface-overlay-hovered)}.date-picker__date--current:before{background-color:var(--s-surface-overlay-hovered)}.date-picker__date--current:focus:not(:focus-visible){outline:none}.date-picker__date--current:focus-visible{outline-color:var(--s-focus-default);outline-offset:var(--s-space-2)}.date-picker__date--selected{color:var(--s-text-on-action-primary)}.date-picker__date--selected:before{background-color:var(--s-action-primary-default)}.date-picker__date--selected:hover{color:var(--s-text-on-action-primary)}.date-picker__date--selected:hover:before{background-color:var(--s-action-primary-hovered)}.date-picker__date--selected>strong{font-weight:var(--s-font-weight-medium)}.date-picker__date--in-range:not(.date-picker__date--selected):after{position:absolute;border-radius:0px;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 0px}.date-picker__date--start:not(.date-picker__date--end){color:var(--s-text-on-action-primary)}.date-picker__date--start:not(.date-picker__date--end):before{background-color:var(--s-action-primary-default)}.date-picker__date--start:not(.date-picker__date--end):after{position:absolute;z-index:-1;border-radius:0;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 0 0.0625rem 50%}.date-picker__date--end:not(.date-picker__date--start){color:var(--s-text-on-action-primary)}.date-picker__date--end:not(.date-picker__date--start):before{background-color:var(--s-action-primary-default)}.date-picker__date--end:not(.date-picker__date--start):after{position:absolute;z-index:-1;border-radius:0;background-color:var(--s-action-primary-default);content:\"\";opacity:0.2;inset:0.0625rem 50% 0.0625rem 0}.date-picker__date--overflowing{color:var(--s-text-subdued)}.date-picker__date--today:before{box-shadow:inset 0 0 0 var(--s-border-width-default)\n      var(--s-border-highlight)}.date-picker__date--today>em{font-style:normal}";
+
+const SwirlDatePicker = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.valueChange = index.createEvent(this, "valueChange", 3);
+    this.onClick = (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+    };
+    this.onSelectDate = (event) => {
+      if (typeof event.detail === "string") {
+        this.valueChange.emit(utils.removeTimezoneOffset(new Date(event.detail)));
+      }
+      else {
+        this.valueChange.emit(event.detail.map((date) => utils.removeTimezoneOffset(new Date(date))));
+      }
+    };
+    this.labels = undefined;
+    this.locale = "en-US";
+    this.range = undefined;
+    this.startDate = undefined;
+    this.value = undefined;
+  }
+  render() {
+    const startDate = this.startDate instanceof Date ? this.startDate.toISOString() : undefined;
+    return (index.h(index.Host, { onClick: this.onClick }, index.h("wc-datepicker", { elementClassName: "date-picker", labels: this.labels, locale: this.locale, onSelectDate: this.onSelectDate, range: this.range, startDate: startDate, value: this.value })));
+  }
+  get el() { return index.getElement(this); }
+};
+SwirlDatePicker.style = swirlDatePickerCss;
+
+const swirlIconCss = ":host{display:inline-flex}";
+
+const SwirlIconToday = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = index$1.classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (index.h("svg", { class: className, fill: "none", height: this.size, part: "icon", viewBox: `0 0 ${viewBoxSize} ${viewBoxSize}`, width: this.size, xmlns: "http://www.w3.org/2000/svg" }, this.size === 16 && (index.h(index.Fragment, null, index.h("path", { d: "M6 11C5.53333 11 5.13889 10.8389 4.81667 10.5167C4.49444 10.1945 4.33333 9.80004 4.33333 9.33337C4.33333 8.86671 4.49444 8.47226 4.81667 8.15004C5.13889 7.82782 5.53333 7.66671 6 7.66671C6.46667 7.66671 6.86111 7.82782 7.18333 8.15004C7.50556 8.47226 7.66667 8.86671 7.66667 9.33337C7.66667 9.80004 7.50556 10.1945 7.18333 10.5167C6.86111 10.8389 6.46667 11 6 11ZM3.33333 14.6667C2.96667 14.6667 2.65267 14.5363 2.39133 14.2754C2.13044 14.014 2 13.7 2 13.3334V4.00004C2 3.63337 2.13044 3.3196 2.39133 3.05871C2.65267 2.79737 2.96667 2.66671 3.33333 2.66671H4V2.00004C4 1.81115 4.06378 1.65271 4.19133 1.52471C4.31933 1.39715 4.47778 1.33337 4.66667 1.33337C4.85556 1.33337 5.014 1.39715 5.142 1.52471C5.26956 1.65271 5.33333 1.81115 5.33333 2.00004V2.66671H10.6667V2.00004C10.6667 1.81115 10.7307 1.65271 10.8587 1.52471C10.9862 1.39715 11.1444 1.33337 11.3333 1.33337C11.5222 1.33337 11.6804 1.39715 11.808 1.52471C11.936 1.65271 12 1.81115 12 2.00004V2.66671H12.6667C13.0333 2.66671 13.3473 2.79737 13.6087 3.05871C13.8696 3.3196 14 3.63337 14 4.00004V13.3334C14 13.7 13.8696 14.014 13.6087 14.2754C13.3473 14.5363 13.0333 14.6667 12.6667 14.6667H3.33333ZM3.33333 13.3334H12.6667V6.66671H3.33333V13.3334Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (index.h(index.Fragment, null, index.h("path", { d: "M9 16.5C8.3 16.5 7.70833 16.2583 7.225 15.775C6.74167 15.2917 6.5 14.7 6.5 14C6.5 13.3 6.74167 12.7083 7.225 12.225C7.70833 11.7417 8.3 11.5 9 11.5C9.7 11.5 10.2917 11.7417 10.775 12.225C11.2583 12.7083 11.5 13.3 11.5 14C11.5 14.7 11.2583 15.2917 10.775 15.775C10.2917 16.2583 9.7 16.5 9 16.5ZM5 22C4.45 22 3.979 21.8043 3.587 21.413C3.19567 21.021 3 20.55 3 20V6C3 5.45 3.19567 4.97933 3.587 4.588C3.979 4.196 4.45 4 5 4H6V3C6 2.71667 6.09567 2.479 6.287 2.287C6.479 2.09567 6.71667 2 7 2C7.28333 2 7.521 2.09567 7.713 2.287C7.90433 2.479 8 2.71667 8 3V4H16V3C16 2.71667 16.096 2.479 16.288 2.287C16.4793 2.09567 16.7167 2 17 2C17.2833 2 17.5207 2.09567 17.712 2.287C17.904 2.479 18 2.71667 18 3V4H19C19.55 4 20.021 4.196 20.413 4.588C20.8043 4.97933 21 5.45 21 6V20C21 20.55 20.8043 21.021 20.413 21.413C20.021 21.8043 19.55 22 19 22H5ZM5 20H19V10H5V20Z", fill: "currentColor" }))), this.size === 28 && (index.h(index.Fragment, null, index.h("path", { d: "M10.5 19.25C9.68333 19.25 8.99306 18.9681 8.42917 18.4042C7.86528 17.8403 7.58333 17.15 7.58333 16.3334C7.58333 15.5167 7.86528 14.8264 8.42917 14.2625C8.99306 13.6987 9.68333 13.4167 10.5 13.4167C11.3167 13.4167 12.0069 13.6987 12.5708 14.2625C13.1347 14.8264 13.4167 15.5167 13.4167 16.3334C13.4167 17.15 13.1347 17.8403 12.5708 18.4042C12.0069 18.9681 11.3167 19.25 10.5 19.25ZM5.83333 25.6667C5.19167 25.6667 4.64217 25.4384 4.18483 24.9819C3.72828 24.5245 3.5 23.975 3.5 23.3334V7.00004C3.5 6.35837 3.72828 5.80926 4.18483 5.35271C4.64217 4.89537 5.19167 4.66671 5.83333 4.66671H7V3.50004C7 3.16949 7.11161 2.89221 7.33483 2.66821C7.55883 2.44499 7.83611 2.33337 8.16667 2.33337C8.49722 2.33337 8.7745 2.44499 8.9985 2.66821C9.22172 2.89221 9.33333 3.16949 9.33333 3.50004V4.66671H18.6667V3.50004C18.6667 3.16949 18.7787 2.89221 19.0027 2.66821C19.2259 2.44499 19.5028 2.33337 19.8333 2.33337C20.1639 2.33337 20.4408 2.44499 20.664 2.66821C20.888 2.89221 21 3.16949 21 3.50004V4.66671H22.1667C22.8083 4.66671 23.3578 4.89537 23.8152 5.35271C24.2717 5.80926 24.5 6.35837 24.5 7.00004V23.3334C24.5 23.975 24.2717 24.5245 23.8152 24.9819C23.3578 25.4384 22.8083 25.6667 22.1667 25.6667H5.83333ZM5.83333 23.3334H22.1667V11.6667H5.83333V23.3334Z", fill: "currentColor" })))));
+  }
+};
+SwirlIconToday.style = swirlIconCss;
+
+exports.swirl_date_picker = SwirlDatePicker;
+exports.swirl_icon_today = SwirlIconToday;

package/dist/cjs/swirl-description-list-item.cjs.entry.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+
+const swirlDescriptionListItemCss = ":host{display:block}:host *{box-sizing:border-box}.description-list-item{display:flex;max-width:100%;padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-base);justfiy-content:space-between;gap:var(--s-space-16)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.description-list-item--bordered{padding-top:var(--s-space-16);padding-bottom:var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.description-list-item:not(.description-list-item--has-tools) .description-list-item__tools{display:none}.description-list-item__text-container{flex-grow:1}.description-list-item__term{display:block;margin-bottom:var(--s-space-4);font-weight:var(--s-font-weight-semibold);overflow-wrap:break-word}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.description-list-item__term{margin-bottom:var(--s-space-2)}}.description-list-item__tooltip{display:inline-flex;vertical-align:middle;margin-left:var(--s-space-4)}.description-list-item__description{display:block;max-width:40rem;margin:0;overflow-wrap:break-word}.description-list-item__tools{flex-shrink:0}";
+
+const SwirlDescriptionListItem = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.bordered = true;
+    this.maxWidth = undefined;
+    this.term = undefined;
+    this.tooltip = undefined;
+  }
+  render() {
+    const hasTools = Boolean(this.el.querySelector('[slot="tools"]'));
+    const className = index$1.classnames("description-list-item", {
+      "description-list-item--bordered": this.bordered,
+      "description-list-item--has-tools": hasTools,
+    });
+    return (index.h(index.Host, { role: "listitem" }, index.h("div", { class: className, part: "description-list-item", role: "group" }, index.h("div", { class: "description-list-item__text-container" }, index.h("div", { class: "description-list-item__term", part: "description-list-item__term", role: "term" }, this.term, this.tooltip && (index.h("span", { class: "description-list-item__tooltip" }, index.h("swirl-tooltip", { content: this.tooltip, position: "right" }, index.h("swirl-icon-info", { size: 16 }))))), index.h("div", { style: { maxWidth: this.maxWidth }, class: "description-list-item__description", role: "definition" }, index.h("slot", null))), index.h("div", { class: "description-list-item__tools" }, index.h("slot", { name: "tools" })))));
+  }
+  get el() { return index.getElement(this); }
+};
+SwirlDescriptionListItem.style = swirlDescriptionListItemCss;
+
+exports.swirl_description_list_item = SwirlDescriptionListItem;

package/dist/cjs/swirl-description-list.cjs.entry.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+
+const swirlDescriptionListCss = ":host{display:block;container-type:inline-size;container-name:description-list}:host *{box-sizing:border-box}.description-list{display:block;max-width:100%;margin:0}";
+
+const SwirlDescriptionList = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "description-list", role: "list" }, index.h("slot", null))));
+  }
+};
+SwirlDescriptionList.style = swirlDescriptionListCss;
+
+exports.swirl_description_list = SwirlDescriptionList;

package/dist/cjs/swirl-dialog.cjs.entry.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const a11yDialog_esm = require('./a11y-dialog.esm-4a3287ed.js');
+const index$1 = require('./index-2ddd0598.js');
+
+const swirlDialogCss = ":host{display:block}:host *{box-sizing:border-box}.dialog{--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed);position:fixed;z-index:var(--s-z-40);display:flex;justify-content:center;align-items:center;inset:0}.dialog[aria-hidden=\"true\"]{display:none}.dialog:not(.dialog--closing) .dialog__backdrop{animation:0.15s dialog-backdrop-fade-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__backdrop{animation:none}}.dialog:not(.dialog--closing) .dialog__body{animation:0.15s dialog-scale-in}@media (prefers-reduced-motion){.dialog:not(.dialog--closing) .dialog__body{animation:none}}.dialog--closing{animation:0.15s dialog-fade-out;animation-fill-mode:forwards}@media (prefers-reduced-motion){.dialog--closing{animation:none}}.dialog__backdrop{position:fixed;background-color:rgba(0, 0, 0, 0.2);inset:0}.dialog__body{z-index:var(--s-z-40);overflow-x:hidden;overflow-y:auto;width:18.5rem;max-height:90vh;padding-top:var(--s-space-24);padding-right:var(--s-space-16);padding-bottom:var(--s-space-16);padding-left:var(--s-space-16);border-radius:var(--s-border-radius-l);background-color:var(--s-surface-overlay-default);text-align:center;box-shadow:var(--s-shadow-level-3)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__body{width:25rem;border-radius:var(--s-border-radius-base)}}@media (min-width: 992px){.dialog__body{text-align:start}}.dialog__heading{margin:0;margin-bottom:var(--s-space-8);padding-right:var(--s-space-8);padding-left:var(--s-space-8);font-size:var(--s-font-size-lg);font-weight:var(--s-font-weight-semibold);line-height:var(--s-line-height-lg)}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__heading{line-height:var(--s-line-height-base)}}.dialog__content{margin-bottom:var(--s-space-20);padding-right:var(--s-space-8);padding-left:var(--s-space-8);line-height:var(--s-line-height-base)}.dialog__content ::slotted(*){margin:0}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.dialog__content{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}@media (min-width: 992px){.dialog__content{margin-bottom:var(--s-space-24)}}.dialog__controls{display:flex;flex-wrap:wrap;justify-content:stretch;gap:var(--s-space-8)}.dialog__controls>*{flex-grow:1}@media (min-width: 992px){.dialog__controls>*{flex-grow:0}}@media (min-width: 992px){.dialog__controls{justify-content:flex-end}}@keyframes dialog-scale-in{from{transform:scale(0)}to{transform:scale(1)}}@keyframes dialog-backdrop-fade-in{from{opacity:0}to{opacity:1}}@keyframes dialog-fade-out{from{opacity:1}to{opacity:0}}";
+
+const SwirlDialog = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.primaryAction = index.createEvent(this, "primaryAction", 7);
+    this.secondaryAction = index.createEvent(this, "secondaryAction", 7);
+    this.onKeyDown = (event) => {
+      if (event.code === "Escape") {
+        this.close();
+      }
+    };
+    this.onBackdropClick = () => {
+      this.close();
+    };
+    this.onPrimaryAction = (event) => {
+      this.primaryAction.emit(event);
+      this.close();
+    };
+    this.onSecondaryAction = (event) => {
+      this.secondaryAction.emit(event);
+      this.close();
+    };
+    this.hideLabel = undefined;
+    this.intent = "primary";
+    this.label = undefined;
+    this.primaryActionLabel = undefined;
+    this.secondaryActionLabel = undefined;
+    this.closing = false;
+  }
+  componentDidLoad() {
+    this.dialog = new a11yDialog_esm.A11yDialog(this.dialogEl);
+    this.dialog.on("show", () => {
+      this.controlsContainerEl
+        .querySelector("swirl-button button")
+        ?.focus();
+    });
+  }
+  disconnectedCallback() {
+    this.dialog?.destroy();
+  }
+  /**
+   * Open the dialog.
+   */
+  async open() {
+    this.dialog.show();
+  }
+  /**
+   * Close the dialog.
+   */
+  async close() {
+    if (this.closing) {
+      return;
+    }
+    this.closing = true;
+    setTimeout(() => {
+      this.dialog.hide();
+      this.closing = false;
+    }, 150);
+  }
+  render() {
+    const className = index$1.classnames("dialog", { "dialog--closing": this.closing });
+    return (index.h(index.Host, null, index.h("div", { "aria-describedby": "content", "aria-hidden": "true", "aria-labelledby": this.hideLabel ? undefined : "label", "aria-label": this.hideLabel ? this.label : undefined, "aria-modal": "true", class: className, onKeyDown: this.onKeyDown, ref: (el) => (this.dialogEl = el), role: "alertdialog" }, index.h("div", { class: "dialog__backdrop", onClick: this.onBackdropClick }), index.h("div", { class: "dialog__body", part: "dialog__body", role: "document" }, !this.hideLabel && (index.h("h2", { class: "dialog__heading", part: "dialog__heading", id: "label" }, this.label)), index.h("div", { class: "dialog__content", part: "dialog__content", id: "content" }, index.h("slot", null)), index.h("div", { class: "dialog__controls", ref: (el) => (this.controlsContainerEl = el) }, this.secondaryActionLabel && (index.h("swirl-button", { label: this.secondaryActionLabel, onClick: this.onSecondaryAction })), this.primaryActionLabel && (index.h("swirl-button", { intent: this.intent, label: this.primaryActionLabel, onClick: this.onPrimaryAction, variant: this.intent === "critical" ? "ghost" : "flat" })))))));
+  }
+};
+SwirlDialog.style = swirlDialogCss;
+
+exports.swirl_dialog = SwirlDialog;

package/dist/cjs/swirl-emoji-clap.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+
+const swirlEmojiCss = ":host{display:inline-flex}";
+
+const SwirlEmojiClap = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.label = "";
+    this.size = 24;
+  }
+  render() {
+    const className = index$1.classnames("emoji", `emoji--size-${this.size}`);
+    return (index.h(index.Fragment, null, this.size === 16 && (index.h("img", { alt: this.label, class: className, height: "16", src: "emojis/Clap16.png", width: "16" })), this.size === 20 && (index.h("img", { alt: this.label, class: className, height: "20", src: "emojis/Clap20.png", width: "20" })), this.size === 24 && (index.h("img", { alt: this.label, class: className, height: "24", src: "emojis/Clap24.png", width: "24" })), this.size === 32 && (index.h("img", { alt: this.label, class: className, height: "32", src: "emojis/Clap32.png", width: "32" }))));
+  }
+};
+SwirlEmojiClap.style = swirlEmojiCss;
+
+exports.swirl_emoji_clap = SwirlEmojiClap;

package/dist/cjs/swirl-emoji-happy.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+
+const swirlEmojiCss = ":host{display:inline-flex}";
+
+const SwirlEmojiHappy = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.label = "";
+    this.size = 24;
+  }
+  render() {
+    const className = index$1.classnames("emoji", `emoji--size-${this.size}`);
+    return (index.h(index.Fragment, null, this.size === 16 && (index.h("img", { alt: this.label, class: className, height: "16", src: "emojis/Happy16.png", width: "16" })), this.size === 20 && (index.h("img", { alt: this.label, class: className, height: "20", src: "emojis/Happy20.png", width: "20" })), this.size === 24 && (index.h("img", { alt: this.label, class: className, height: "24", src: "emojis/Happy24.png", width: "24" })), this.size === 32 && (index.h("img", { alt: this.label, class: className, height: "32", src: "emojis/Happy32.png", width: "32" }))));
+  }
+};
+SwirlEmojiHappy.style = swirlEmojiCss;
+
+exports.swirl_emoji_happy = SwirlEmojiHappy;

package/dist/cjs/swirl-emoji-idea.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+
+const swirlEmojiCss = ":host{display:inline-flex}";
+
+const SwirlEmojiIdea = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.label = "";
+    this.size = 24;
+  }
+  render() {
+    const className = index$1.classnames("emoji", `emoji--size-${this.size}`);
+    return (index.h(index.Fragment, null, this.size === 16 && (index.h("img", { alt: this.label, class: className, height: "16", src: "emojis/Idea16.png", width: "16" })), this.size === 20 && (index.h("img", { alt: this.label, class: className, height: "20", src: "emojis/Idea20.png", width: "20" })), this.size === 24 && (index.h("img", { alt: this.label, class: className, height: "24", src: "emojis/Idea24.png", width: "24" })), this.size === 32 && (index.h("img", { alt: this.label, class: className, height: "32", src: "emojis/Idea32.png", width: "32" }))));
+  }
+};
+SwirlEmojiIdea.style = swirlEmojiCss;
+
+exports.swirl_emoji_idea = SwirlEmojiIdea;

package/dist/cjs/swirl-emoji-love.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+
+const swirlEmojiCss = ":host{display:inline-flex}";
+
+const SwirlEmojiLove = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.label = "";
+    this.size = 24;
+  }
+  render() {
+    const className = index$1.classnames("emoji", `emoji--size-${this.size}`);
+    return (index.h(index.Fragment, null, this.size === 16 && (index.h("img", { alt: this.label, class: className, height: "16", src: "emojis/Love16.png", width: "16" })), this.size === 20 && (index.h("img", { alt: this.label, class: className, height: "20", src: "emojis/Love20.png", width: "20" })), this.size === 24 && (index.h("img", { alt: this.label, class: className, height: "24", src: "emojis/Love24.png", width: "24" })), this.size === 32 && (index.h("img", { alt: this.label, class: className, height: "32", src: "emojis/Love32.png", width: "32" }))));
+  }
+};
+SwirlEmojiLove.style = swirlEmojiCss;
+
+exports.swirl_emoji_love = SwirlEmojiLove;

package/dist/cjs/swirl-emoji-sad.cjs.entry.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-506fe4ea.js');
+const index$1 = require('./index-2ddd0598.js');
+
+const swirlEmojiCss = ":host{display:inline-flex}";
+
+const SwirlEmojiSad = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.label = "";
+    this.size = 24;
+  }
+  render() {
+    const className = index$1.classnames("emoji", `emoji--size-${this.size}`);
+    return (index.h(index.Fragment, null, this.size === 16 && (index.h("img", { alt: this.label, class: className, height: "16", src: "emojis/Sad16.png", width: "16" })), this.size === 20 && (index.h("img", { alt: this.label, class: className, height: "20", src: "emojis/Sad20.png", width: "20" })), this.size === 24 && (index.h("img", { alt: this.label, class: className, height: "24", src: "emojis/Sad24.png", width: "24" })), this.size === 32 && (index.h("img", { alt: this.label, class: className, height: "32", src: "emojis/Sad32.png", width: "32" }))));
+  }
+};
+SwirlEmojiSad.style = swirlEmojiCss;
+
+exports.swirl_emoji_sad = SwirlEmojiSad;