@getflip/swirl-components 0.65.0 → 0.66.0

package/dist/components/swirl-icon-time-outlined.js

@@ -1,38 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-
-const swirlIconCss = ":host{display:inline-flex}";
-
-const SwirlIconTimeOutlined$1 = /*@__PURE__*/ proxyCustomElement(class SwirlIconTimeOutlined extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.size = 24;
-  }
-  render() {
-    const viewBoxSize = this.size === 20 ? 24 : this.size;
-    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
-    return (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 && (h(Fragment, null, h("path", { d: "M9.65001 10.6667C9.78335 10.8 9.94735 10.8667 10.142 10.8667C10.3362 10.8667 10.5056 10.7945 10.65 10.65C10.7833 10.5167 10.85 10.3471 10.85 10.1413C10.85 9.93601 10.7833 9.76668 10.65 9.63335L8.73335 7.70001V5.40001C8.73335 5.1889 8.66401 5.01668 8.52535 4.88335C8.38623 4.75001 8.21112 4.68335 8.00001 4.68335C7.7889 4.68335 7.61401 4.75268 7.47535 4.89135C7.33623 5.03046 7.26668 5.20557 7.26668 5.41668V7.96668C7.26668 8.06668 7.28623 8.16379 7.32535 8.25801C7.36401 8.35268 7.42223 8.4389 7.50001 8.51668L9.65001 10.6667ZM8.00001 14.8C7.05557 14.8 6.16935 14.6222 5.34135 14.2667C4.51379 13.9111 3.79446 13.4278 3.18335 12.8167C2.57223 12.2056 2.0889 11.4862 1.73335 10.6587C1.37779 9.83068 1.20001 8.94446 1.20001 8.00001C1.20001 7.05557 1.37779 6.16935 1.73335 5.34135C2.0889 4.51379 2.57223 3.79446 3.18335 3.18335C3.79446 2.57223 4.51379 2.0889 5.34135 1.73335C6.16935 1.37779 7.05557 1.20001 8.00001 1.20001C8.94446 1.20001 9.83068 1.37779 10.6587 1.73335C11.4862 2.0889 12.2056 2.57223 12.8167 3.18335C13.4278 3.79446 13.9111 4.51379 14.2667 5.34135C14.6222 6.16935 14.8 7.05557 14.8 8.00001C14.8 8.94446 14.6222 9.83068 14.2667 10.6587C13.9111 11.4862 13.4278 12.2056 12.8167 12.8167C12.2056 13.4278 11.4862 13.9111 10.6587 14.2667C9.83068 14.6222 8.94446 14.8 8.00001 14.8ZM8.00001 13.2833C9.46668 13.2833 10.714 12.7696 11.742 11.742C12.7696 10.714 13.2833 9.46668 13.2833 8.00001C13.2833 6.53335 12.7696 5.28601 11.742 4.25801C10.714 3.23046 9.46668 2.71668 8.00001 2.71668C6.53335 2.71668 5.28623 3.23046 4.25868 4.25801C3.23068 5.28601 2.71668 6.53335 2.71668 8.00001C2.71668 9.46668 3.23068 10.714 4.25868 11.742C5.28623 12.7696 6.53335 13.2833 8.00001 13.2833Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M14.475 16C14.675 16.2 14.921 16.3 15.213 16.3C15.5043 16.3 15.7583 16.1917 15.975 15.975C16.175 15.775 16.275 15.5207 16.275 15.212C16.275 14.904 16.175 14.65 15.975 14.45L13.1 11.55V8.09999C13.1 7.78332 12.996 7.52499 12.788 7.32499C12.5793 7.12499 12.3167 7.02499 12 7.02499C11.6833 7.02499 11.421 7.12899 11.213 7.33699C11.0043 7.54565 10.9 7.80832 10.9 8.12499V11.95C10.9 12.1 10.9293 12.2457 10.988 12.387C11.046 12.529 11.1333 12.6583 11.25 12.775L14.475 16ZM12 22.2C10.5833 22.2 9.25399 21.9333 8.01199 21.4C6.77065 20.8667 5.69165 20.1417 4.77499 19.225C3.85832 18.3083 3.13332 17.2293 2.59999 15.988C2.06665 14.746 1.79999 13.4167 1.79999 12C1.79999 10.5833 2.06665 9.25399 2.59999 8.01199C3.13332 6.77065 3.85832 5.69165 4.77499 4.77499C5.69165 3.85832 6.77065 3.13332 8.01199 2.59999C9.25399 2.06665 10.5833 1.79999 12 1.79999C13.4167 1.79999 14.746 2.06665 15.988 2.59999C17.2293 3.13332 18.3083 3.85832 19.225 4.77499C20.1417 5.69165 20.8667 6.77065 21.4 8.01199C21.9333 9.25399 22.2 10.5833 22.2 12C22.2 13.4167 21.9333 14.746 21.4 15.988C20.8667 17.2293 20.1417 18.3083 19.225 19.225C18.3083 20.1417 17.2293 20.8667 15.988 21.4C14.746 21.9333 13.4167 22.2 12 22.2ZM12 19.925C14.2 19.925 16.071 19.1543 17.613 17.613C19.1543 16.071 19.925 14.2 19.925 12C19.925 9.79999 19.1543 7.92899 17.613 6.38699C16.071 4.84565 14.2 4.07499 12 4.07499C9.79999 4.07499 7.92932 4.84565 6.38799 6.38699C4.84599 7.92899 4.07499 9.79999 4.07499 12C4.07499 14.2 4.84599 16.071 6.38799 17.613C7.92932 19.1543 9.79999 19.925 12 19.925Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M16.8875 18.6667C17.1208 18.9 17.4078 19.0167 17.7485 19.0167C18.0884 19.0167 18.3847 18.8903 18.6375 18.6375C18.8708 18.4042 18.9875 18.1074 18.9875 17.7473C18.9875 17.388 18.8708 17.0917 18.6375 16.8583L15.2833 13.475V9.45001C15.2833 9.08056 15.162 8.77917 14.9193 8.54584C14.6759 8.31251 14.3694 8.19584 14 8.19584C13.6306 8.19584 13.3245 8.31717 13.0818 8.55984C12.8384 8.80328 12.7167 9.10973 12.7167 9.47917V13.9417C12.7167 14.1167 12.7509 14.2866 12.8193 14.4515C12.887 14.6172 12.9889 14.7681 13.125 14.9042L16.8875 18.6667ZM14 25.9C12.3472 25.9 10.7963 25.5889 9.34734 24.9667C7.89912 24.3445 6.64028 23.4986 5.57084 22.4292C4.5014 21.3597 3.65556 20.1009 3.03334 18.6527C2.41112 17.2037 2.10001 15.6528 2.10001 14C2.10001 12.3472 2.41112 10.7963 3.03334 9.34734C3.65556 7.89912 4.5014 6.64028 5.57084 5.57084C6.64028 4.5014 7.89912 3.65556 9.34734 3.03334C10.7963 2.41112 12.3472 2.10001 14 2.10001C15.6528 2.10001 17.2037 2.41112 18.6527 3.03334C20.1009 3.65556 21.3597 4.5014 22.4292 5.57084C23.4986 6.64028 24.3445 7.89912 24.9667 9.34734C25.5889 10.7963 25.9 12.3472 25.9 14C25.9 15.6528 25.5889 17.2037 24.9667 18.6527C24.3445 20.1009 23.4986 21.3597 22.4292 22.4292C21.3597 23.4986 20.1009 24.3445 18.6527 24.9667C17.2037 25.5889 15.6528 25.9 14 25.9ZM14 23.2458C16.5667 23.2458 18.7495 22.3467 20.5485 20.5485C22.3467 18.7495 23.2458 16.5667 23.2458 14C23.2458 11.4333 22.3467 9.25051 20.5485 7.45151C18.7495 5.65328 16.5667 4.75417 14 4.75417C11.4333 4.75417 9.2509 5.65328 7.45267 7.45151C5.65367 9.25051 4.75417 11.4333 4.75417 14C4.75417 16.5667 5.65367 18.7495 7.45267 20.5485C9.2509 22.3467 11.4333 23.2458 14 23.2458Z", fill: "currentColor" })))));
-  }
-  static get style() { return swirlIconCss; }
-}, [1, "swirl-icon-time-outlined", {
-    "size": [2]
-  }]);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["swirl-icon-time-outlined"];
-  components.forEach(tagName => { switch (tagName) {
-    case "swirl-icon-time-outlined":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, SwirlIconTimeOutlined$1);
-      }
-      break;
-  } });
-}
-defineCustomElement$1();
+import { S as SwirlIconTimeOutlined$1, d as defineCustomElement$1 } from './swirl-icon-time-outlined2.js';
 
 const SwirlIconTimeOutlined = SwirlIconTimeOutlined$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/swirl-icon-time-outlined2.js

@@ -0,0 +1,37 @@
+import { proxyCustomElement, HTMLElement, h, Fragment } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+
+const swirlIconCss = ":host{display:inline-flex}";
+
+const SwirlIconTimeOutlined = /*@__PURE__*/ proxyCustomElement(class SwirlIconTimeOutlined extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.size = 24;
+  }
+  render() {
+    const viewBoxSize = this.size === 20 ? 24 : this.size;
+    const className = classnames("swirl-icon", `swirl-icon--size-${this.size}`);
+    return (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 && (h(Fragment, null, h("path", { d: "M9.65001 10.6667C9.78335 10.8 9.94735 10.8667 10.142 10.8667C10.3362 10.8667 10.5056 10.7945 10.65 10.65C10.7833 10.5167 10.85 10.3471 10.85 10.1413C10.85 9.93601 10.7833 9.76668 10.65 9.63335L8.73335 7.70001V5.40001C8.73335 5.1889 8.66401 5.01668 8.52535 4.88335C8.38623 4.75001 8.21112 4.68335 8.00001 4.68335C7.7889 4.68335 7.61401 4.75268 7.47535 4.89135C7.33623 5.03046 7.26668 5.20557 7.26668 5.41668V7.96668C7.26668 8.06668 7.28623 8.16379 7.32535 8.25801C7.36401 8.35268 7.42223 8.4389 7.50001 8.51668L9.65001 10.6667ZM8.00001 14.8C7.05557 14.8 6.16935 14.6222 5.34135 14.2667C4.51379 13.9111 3.79446 13.4278 3.18335 12.8167C2.57223 12.2056 2.0889 11.4862 1.73335 10.6587C1.37779 9.83068 1.20001 8.94446 1.20001 8.00001C1.20001 7.05557 1.37779 6.16935 1.73335 5.34135C2.0889 4.51379 2.57223 3.79446 3.18335 3.18335C3.79446 2.57223 4.51379 2.0889 5.34135 1.73335C6.16935 1.37779 7.05557 1.20001 8.00001 1.20001C8.94446 1.20001 9.83068 1.37779 10.6587 1.73335C11.4862 2.0889 12.2056 2.57223 12.8167 3.18335C13.4278 3.79446 13.9111 4.51379 14.2667 5.34135C14.6222 6.16935 14.8 7.05557 14.8 8.00001C14.8 8.94446 14.6222 9.83068 14.2667 10.6587C13.9111 11.4862 13.4278 12.2056 12.8167 12.8167C12.2056 13.4278 11.4862 13.9111 10.6587 14.2667C9.83068 14.6222 8.94446 14.8 8.00001 14.8ZM8.00001 13.2833C9.46668 13.2833 10.714 12.7696 11.742 11.742C12.7696 10.714 13.2833 9.46668 13.2833 8.00001C13.2833 6.53335 12.7696 5.28601 11.742 4.25801C10.714 3.23046 9.46668 2.71668 8.00001 2.71668C6.53335 2.71668 5.28623 3.23046 4.25868 4.25801C3.23068 5.28601 2.71668 6.53335 2.71668 8.00001C2.71668 9.46668 3.23068 10.714 4.25868 11.742C5.28623 12.7696 6.53335 13.2833 8.00001 13.2833Z", fill: "currentColor" }))), (this.size === 20 || this.size === 24) && (h(Fragment, null, h("path", { d: "M14.475 16C14.675 16.2 14.921 16.3 15.213 16.3C15.5043 16.3 15.7583 16.1917 15.975 15.975C16.175 15.775 16.275 15.5207 16.275 15.212C16.275 14.904 16.175 14.65 15.975 14.45L13.1 11.55V8.09999C13.1 7.78332 12.996 7.52499 12.788 7.32499C12.5793 7.12499 12.3167 7.02499 12 7.02499C11.6833 7.02499 11.421 7.12899 11.213 7.33699C11.0043 7.54565 10.9 7.80832 10.9 8.12499V11.95C10.9 12.1 10.9293 12.2457 10.988 12.387C11.046 12.529 11.1333 12.6583 11.25 12.775L14.475 16ZM12 22.2C10.5833 22.2 9.25399 21.9333 8.01199 21.4C6.77065 20.8667 5.69165 20.1417 4.77499 19.225C3.85832 18.3083 3.13332 17.2293 2.59999 15.988C2.06665 14.746 1.79999 13.4167 1.79999 12C1.79999 10.5833 2.06665 9.25399 2.59999 8.01199C3.13332 6.77065 3.85832 5.69165 4.77499 4.77499C5.69165 3.85832 6.77065 3.13332 8.01199 2.59999C9.25399 2.06665 10.5833 1.79999 12 1.79999C13.4167 1.79999 14.746 2.06665 15.988 2.59999C17.2293 3.13332 18.3083 3.85832 19.225 4.77499C20.1417 5.69165 20.8667 6.77065 21.4 8.01199C21.9333 9.25399 22.2 10.5833 22.2 12C22.2 13.4167 21.9333 14.746 21.4 15.988C20.8667 17.2293 20.1417 18.3083 19.225 19.225C18.3083 20.1417 17.2293 20.8667 15.988 21.4C14.746 21.9333 13.4167 22.2 12 22.2ZM12 19.925C14.2 19.925 16.071 19.1543 17.613 17.613C19.1543 16.071 19.925 14.2 19.925 12C19.925 9.79999 19.1543 7.92899 17.613 6.38699C16.071 4.84565 14.2 4.07499 12 4.07499C9.79999 4.07499 7.92932 4.84565 6.38799 6.38699C4.84599 7.92899 4.07499 9.79999 4.07499 12C4.07499 14.2 4.84599 16.071 6.38799 17.613C7.92932 19.1543 9.79999 19.925 12 19.925Z", fill: "currentColor" }))), this.size === 28 && (h(Fragment, null, h("path", { d: "M16.8875 18.6667C17.1208 18.9 17.4078 19.0167 17.7485 19.0167C18.0884 19.0167 18.3847 18.8903 18.6375 18.6375C18.8708 18.4042 18.9875 18.1074 18.9875 17.7473C18.9875 17.388 18.8708 17.0917 18.6375 16.8583L15.2833 13.475V9.45001C15.2833 9.08056 15.162 8.77917 14.9193 8.54584C14.6759 8.31251 14.3694 8.19584 14 8.19584C13.6306 8.19584 13.3245 8.31717 13.0818 8.55984C12.8384 8.80328 12.7167 9.10973 12.7167 9.47917V13.9417C12.7167 14.1167 12.7509 14.2866 12.8193 14.4515C12.887 14.6172 12.9889 14.7681 13.125 14.9042L16.8875 18.6667ZM14 25.9C12.3472 25.9 10.7963 25.5889 9.34734 24.9667C7.89912 24.3445 6.64028 23.4986 5.57084 22.4292C4.5014 21.3597 3.65556 20.1009 3.03334 18.6527C2.41112 17.2037 2.10001 15.6528 2.10001 14C2.10001 12.3472 2.41112 10.7963 3.03334 9.34734C3.65556 7.89912 4.5014 6.64028 5.57084 5.57084C6.64028 4.5014 7.89912 3.65556 9.34734 3.03334C10.7963 2.41112 12.3472 2.10001 14 2.10001C15.6528 2.10001 17.2037 2.41112 18.6527 3.03334C20.1009 3.65556 21.3597 4.5014 22.4292 5.57084C23.4986 6.64028 24.3445 7.89912 24.9667 9.34734C25.5889 10.7963 25.9 12.3472 25.9 14C25.9 15.6528 25.5889 17.2037 24.9667 18.6527C24.3445 20.1009 23.4986 21.3597 22.4292 22.4292C21.3597 23.4986 20.1009 24.3445 18.6527 24.9667C17.2037 25.5889 15.6528 25.9 14 25.9ZM14 23.2458C16.5667 23.2458 18.7495 22.3467 20.5485 20.5485C22.3467 18.7495 23.2458 16.5667 23.2458 14C23.2458 11.4333 22.3467 9.25051 20.5485 7.45151C18.7495 5.65328 16.5667 4.75417 14 4.75417C11.4333 4.75417 9.2509 5.65328 7.45267 7.45151C5.65367 9.25051 4.75417 11.4333 4.75417 14C4.75417 16.5667 5.65367 18.7495 7.45267 20.5485C9.2509 22.3467 11.4333 23.2458 14 23.2458Z", fill: "currentColor" })))));
+  }
+  static get style() { return swirlIconCss; }
+}, [1, "swirl-icon-time-outlined", {
+    "size": [2]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-icon-time-outlined"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-icon-time-outlined":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlIconTimeOutlined);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { SwirlIconTimeOutlined as S, defineCustomElement as d };

package/dist/components/swirl-inline-error2.js

@@ -18,9 +18,8 @@ const SwirlInlineError = /*@__PURE__*/ proxyCustomElement(class SwirlInlineError
     this.size = "m";
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/components/swirl-inline-status.js

@@ -20,9 +20,8 @@ const SwirlInlineStatus$1 = /*@__PURE__*/ proxyCustomElement(class SwirlInlineSt
     this.iconSize = 20;
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/components/swirl-menu.js

@@ -111,8 +111,7 @@ const SwirlMenu$1 = /*@__PURE__*/ proxyCustomElement(class SwirlMenu extends HTM
     this.observeSlotChanges();
   }
   componentDidLoad() {
-    var _a, _b;
-    (_b = (_a = this.mobileMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.mediaQueryHandler);
+    this.mobileMediaQuery.onchange = this.mediaQueryHandler;
     this.parentMenu = closestPassShadow(this.el.parentElement, "swirl-menu");
     this.popover = closestPassShadow(this.el, "swirl-popover");
     this.rootMenu = parentsPassShadow(this.el, "swirl-menu").pop();

package/dist/components/swirl-option-list-item2.js

@@ -37,10 +37,9 @@ const SwirlOptionListItem = /*@__PURE__*/ proxyCustomElement(class SwirlOptionLi
     this.iconSize = 24;
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
     this.updateIconSize(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/components/swirl-resource-list-file-item.js

@@ -28,9 +28,8 @@ const SwirlResourceListFileItem$1 = /*@__PURE__*/ proxyCustomElement(class Swirl
     this.removeButtonLabel = "Remove file";
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/components/swirl-search.js

@@ -46,9 +46,8 @@ const SwirlSearch$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSearch extends
     this.variant = "filled";
   }
   componentDidLoad() {
-    var _a, _b;
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/components/swirl-shell-layout.js

@@ -70,11 +70,10 @@ const SwirlShellLayout$1 = /*@__PURE__*/ proxyCustomElement(class SwirlShellLayo
     this.sidebarHovered = undefined;
   }
   componentWillLoad() {
-    var _a, _b;
     if (!this.desktopMediaQuery.matches) {
       this.collapseLeftSidebar();
     }
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   /**
    * Collapse the left sidebar.

package/dist/components/swirl-tab-bar2.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 
-const swirlTabBarCss = ".sc-swirl-tab-bar-h{display:block}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--s-border-width-default) solid var(--s-border-default)}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);border:none;color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tab-bar__tab.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:\"\";transform:translateX(-50%);pointer-events:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-label.sc-swirl-tab-bar{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:\"\";transform:translateX(-50%);pointer-events:none}";
+const swirlTabBarCss = ".sc-swirl-tab-bar-h{display:flex;height:var(--swirl-tab-bar-height)}.sc-swirl-tab-bar-h *.sc-swirl-tab-bar{box-sizing:border-box}.tab-bar.sc-swirl-tab-bar{position:relative;display:flex;width:100%;justify-content:flex-start;border-bottom:var(--swirl-tab-bar-border-width) solid var(--s-border-default)}.tab-bar__tab.sc-swirl-tab-bar{position:relative;display:block;min-width:0;margin:0;padding:var(--s-space-4) var(--s-space-8);border:none;color:var(--s-interactive-neutral-default);background-color:transparent;font:inherit;font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);cursor:pointer}.tab-bar__tab.sc-swirl-tab-bar:focus{outline:none}.tab-bar__tab.sc-swirl-tab-bar:focus-visible .tab-bar__tab-label.sc-swirl-tab-bar{border-radius:var(--s-border-radius-s);box-shadow:inset 0 0 0 0.125rem var(--s-focus-default)}.tab-bar__tab.sc-swirl-tab-bar:not(.tab-bar__tab--active):hover:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-default);content:\"\";transform:translateX(-50%);pointer-events:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.tab-bar__tab.sc-swirl-tab-bar{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.tab-bar__tab-label.sc-swirl-tab-bar{display:block;overflow:hidden;width:100%;padding:var(--s-space-8) var(--s-space-8);text-align:center;white-space:nowrap;text-overflow:ellipsis}.tab-bar__tab--active.sc-swirl-tab-bar{color:var(--s-text-highlight)}.tab-bar__tab--active.sc-swirl-tab-bar:after{position:absolute;bottom:0;left:50%;width:calc(100% - var(--s-space-8));height:0.1875rem;border-radius:0.125rem;background-color:var(--s-border-highlight);content:\"\";transform:translateX(-50%);pointer-events:none}";
 
 const SwirlTabBar = /*@__PURE__*/ proxyCustomElement(class SwirlTabBar extends HTMLElement {
   constructor() {

package/dist/components/swirl-text-input2.js

@@ -113,9 +113,8 @@ const SwirlTextInput = /*@__PURE__*/ proxyCustomElement(class SwirlTextInput ext
     this.showPassword = false;
   }
   componentDidLoad() {
-    var _a, _b;
     this.updateIconSize(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   componentDidRender() {
     this.adjustInputSize();

package/dist/components/swirl-time-input.d.ts

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

package/dist/components/swirl-time-input.js

@@ -0,0 +1,163 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { c as classnames } from './index2.js';
+import { p as parse, i as isValid, f as format, m as maska } from './maska.js';
+import { g as getDesktopMediaQuery } from './utils.js';
+import { d as defineCustomElement$2 } from './swirl-icon-time-outlined2.js';
+
+const swirlTimeInputCss = ".sc-swirl-time-input-h{display:flex;width:100%}.sc-swirl-time-input-h *.sc-swirl-time-input{box-sizing:border-box}.time-input.sc-swirl-time-input{position:relative;display:flex;width:100%;align-items:center;color:var(--s-text-default);line-height:var(--s-line-height-sm)}.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:-0.0625rem}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input--inline.sc-swirl-time-input .time-input__icon.sc-swirl-time-input{top:0}}.time-input__input.sc-swirl-time-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)}.time-input__input.sc-swirl-time-input:focus{outline:none}.time-input__input.sc-swirl-time-input:disabled{color:var(--s-text-disabled);background-color:transparent}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__input.sc-swirl-time-input{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.time-input__icon.sc-swirl-time-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}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.time-input__icon.sc-swirl-time-input{top:-0.625rem}}";
+
+const internalTimeFormat = "HH:mm:ss";
+const SwirlTimeInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTimeInput extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.valueChange = createEvent(this, "valueChange", 7);
+    this.desktopMediaQuery = getDesktopMediaQuery();
+    this.desktopMediaQueryHandler = (event) => {
+      this.updateIconSize(event.matches);
+    };
+    this.onChange = (event) => {
+      const value = event.target.value;
+      let newValue;
+      if (value === "") {
+        this.value = undefined;
+        this.valueChange.emit(undefined);
+      }
+      const newDate = parse(value, this.format, new Date());
+      const formatRegExp = new RegExp(`^${this.format.replace(/[Hhms]/g, "\\d")}$`);
+      if (!Boolean(value.match(formatRegExp))) {
+        return;
+      }
+      if (!isValid(newDate)) {
+        newValue = format(new Date(), internalTimeFormat);
+      }
+      else {
+        newValue = format(newDate, internalTimeFormat);
+      }
+      this.value = newValue;
+      this.valueChange.emit(newValue);
+    };
+    this.onBlur = (event) => {
+      const input = event.target;
+      const dateValue = parse(input.value, this.format, new Date());
+      if (!isValid(dateValue) && Boolean(this.value)) {
+        const currentDateValue = Boolean(this.value)
+          ? parse(this.value, internalTimeFormat, new Date())
+          : undefined;
+        if (!Boolean(currentDateValue) || !isValid(currentDateValue)) {
+          this.value = "";
+        }
+        input.value = format(currentDateValue, this.format);
+      }
+    };
+    this.onInput = (event) => {
+      this.onChange(event);
+    };
+    this.onClick = (event) => {
+      event.preventDefault();
+    };
+    this.onFocus = (event) => {
+      this.handleAutoSelect(event);
+    };
+    this.autoFocus = undefined;
+    this.autoSelect = undefined;
+    this.disabled = undefined;
+    this.format = "HH:mm";
+    this.inline = undefined;
+    this.invalid = undefined;
+    this.placeholder = "hh:mm";
+    this.required = undefined;
+    this.swirlAriaDescribedby = undefined;
+    this.value = undefined;
+    this.iconSize = 24;
+  }
+  componentWillLoad() {
+    const index = Array.from(document.querySelectorAll("swirl-time-input")).indexOf(this.el);
+    this.id = `swirl-time-input-${index}`;
+  }
+  componentDidLoad() {
+    this.setupMask();
+    this.updateIconSize(this.desktopMediaQuery.matches);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+  }
+  disconnectedCallback() {
+    var _a, _b, _c;
+    (_a = this.mask) === null || _a === void 0 ? void 0 : _a.destroy();
+    (_c = (_b = this.desktopMediaQuery).removeEventListener) === null || _c === void 0 ? void 0 : _c.call(_b, "change", this.desktopMediaQueryHandler);
+  }
+  watchFormat() {
+    this.setupMask();
+  }
+  updateIconSize(smallIcon) {
+    this.iconSize = smallIcon ? 20 : 24;
+  }
+  handleAutoSelect(event) {
+    if (!this.autoSelect) {
+      return;
+    }
+    event.target.select();
+  }
+  setupMask() {
+    var _a;
+    (_a = this.mask) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.mask = maska.create(`#${this.id}`, {
+      mask: this.format.replace(/[Hhms]/g, "#"),
+    });
+  }
+  render() {
+    const ariaInvalid = this.invalid === true || this.invalid === false
+      ? String(this.invalid)
+      : undefined;
+    const dateValue = Boolean(this.value)
+      ? parse(this.value, internalTimeFormat, new Date())
+      : undefined;
+    const displayValue = isValid(dateValue)
+      ? format(dateValue, this.format)
+      : undefined;
+    const className = classnames("time-input", {
+      "time-input--inline": this.inline,
+    });
+    return (h(Host, null, h("div", { class: className }, h("input", { "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "time-input__input", disabled: this.disabled, id: this.id, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, required: this.required, type: "text", value: displayValue }), h("span", { class: "time-input__icon" }, h("swirl-icon-time-outlined", { size: this.iconSize })))));
+  }
+  get el() { return this; }
+  static get watchers() { return {
+    "format": ["watchFormat"]
+  }; }
+  static get style() { return swirlTimeInputCss; }
+}, [2, "swirl-time-input", {
+    "autoFocus": [4, "auto-focus"],
+    "autoSelect": [4, "auto-select"],
+    "disabled": [4],
+    "format": [1],
+    "inline": [4],
+    "invalid": [4],
+    "placeholder": [1],
+    "required": [4],
+    "swirlAriaDescribedby": [1, "swirl-aria-describedby"],
+    "value": [1537],
+    "iconSize": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["swirl-time-input", "swirl-icon-time-outlined"];
+  components.forEach(tagName => { switch (tagName) {
+    case "swirl-time-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, SwirlTimeInput$1);
+      }
+      break;
+    case "swirl-icon-time-outlined":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const SwirlTimeInput = SwirlTimeInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SwirlTimeInput, defineCustomElement };

package/dist/components/swirl-toast2.js

@@ -30,10 +30,9 @@ const SwirlToast = /*@__PURE__*/ proxyCustomElement(class SwirlToast extends HTM
     this.startTimer();
   }
   componentDidLoad() {
-    var _a, _b;
     this.startTimer();
     this.forceIconProps(this.desktopMediaQuery.matches);
-    (_b = (_a = this.desktopMediaQuery).addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, "change", this.desktopMediaQueryHandler);
+    this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/esm/index-99d0060d.js

@@ -2515,10 +2515,6 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './swirl-icon-time-filled.entry.js').then(processMod, consoleError);
-        case 'swirl-icon-time-outlined':
-          return import(
-            /* webpackMode: "lazy" */
-            './swirl-icon-time-outlined.entry.js').then(processMod, consoleError);
         case 'swirl-icon-undo':
           return import(
             /* webpackMode: "lazy" */
@@ -2671,6 +2667,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './swirl-theme-provider.entry.js').then(processMod, consoleError);
+        case 'swirl-time-input':
+          return import(
+            /* webpackMode: "lazy" */
+            './swirl-time-input.entry.js').then(processMod, consoleError);
         case 'swirl-toast-provider':
           return import(
             /* webpackMode: "lazy" */
@@ -2727,6 +2727,10 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           return import(
             /* webpackMode: "lazy" */
             './swirl-icon-search.entry.js').then(processMod, consoleError);
+        case 'swirl-icon-time-outlined':
+          return import(
+            /* webpackMode: "lazy" */
+            './swirl-icon-time-outlined.entry.js').then(processMod, consoleError);
         case 'swirl-tab-bar':
           return import(
             /* webpackMode: "lazy" */