@getflip/swirl-components 0.81.2 → 0.81.4

package/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-08-03T12:00:32",
+  "timestamp": "2023-08-04T09:48:36",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.3.1",
@@ -23686,7 +23686,12 @@
       "listeners": [],
       "styles": [],
       "slots": [],
-      "parts": [],
+      "parts": [
+        {
+          "name": "tag",
+          "docs": ""
+        }
+      ],
       "dependents": [
         "swirl-select"
       ],

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

@@ -73,6 +73,12 @@ const SwirlDateInput = class {
     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() {
     var _a, _b, _c;
@@ -111,7 +117,7 @@ const SwirlDateInput = class {
     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, 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 })))));
+    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 {

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

@@ -1236,6 +1236,7 @@ const SwirlModal = class {
       // wait for animation
       setTimeout(() => {
         this.focusTrap.activate();
+        this.handleAutoFocus();
       }, 200);
     }
     else {
@@ -1275,6 +1276,10 @@ const SwirlModal = class {
   updateHeaderToolsStatus() {
     this.hasHeaderTools = Boolean(this.el.querySelector('[slot="header-tools"]'));
   }
+  handleAutoFocus() {
+    var _a;
+    (_a = this.modalEl.querySelector("input[autofocus]")) === null || _a === void 0 ? void 0 : _a.focus();
+  }
   lockBodyScroll() {
     bodyScrollLock_esm.disableBodyScroll(this.scrollContainer);
   }

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

@@ -49,6 +49,12 @@ const SwirlSearch = class {
   componentDidLoad() {
     this.forceIconProps(this.desktopMediaQuery.matches);
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.input.focus();
+      });
+    }
   }
   disconnectedCallback() {
     var _a, _b;

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

@@ -6,7 +6,7 @@ const index = require('./index-506fe4ea.js');
 const index$1 = require('./index-2ddd0598.js');
 const utils = require('./utils-c00c09b9.js');
 
-const swirlSelectCss = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;visibility:hidden;width:100%;height:100%}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.375rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.375rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;gap:var(--s-space-8)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}";
+const swirlSelectCss = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;visibility:hidden;width:100%;height:100%}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag){height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}";
 
 const SwirlSelect = class {
   constructor(hostRef) {

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

@@ -22,7 +22,7 @@ const SwirlTag = class {
   }
   render() {
     const className = index$1.classnames("tag", `tag--intent-${this.intent}`);
-    return (index.h(index.Host, null, index.h("span", { class: className }, this.label, this.removable && (index.h("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, index.h("swirl-icon-close", { size: 16 }))))));
+    return (index.h(index.Host, null, index.h("span", { class: className, part: "tag" }, this.label, this.removable && (index.h("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, index.h("swirl-icon-close", { size: 16 }))))));
   }
   get el() { return index.getElement(this); }
 };

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

@@ -113,6 +113,12 @@ const SwirlTextInput = class {
   componentDidLoad() {
     this.updateIconSize(this.desktopMediaQuery.matches);
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.inputEl.focus();
+      });
+    }
   }
   componentDidRender() {
     this.adjustInputSize();

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

@@ -81,6 +81,12 @@ const SwirlTimeInput = class {
     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() {
     var _a, _b, _c;
@@ -119,7 +125,7 @@ const SwirlTimeInput = class {
     const className = index$1.classnames("time-input", {
       "time-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: "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 }), index.h("span", { class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { size: this.iconSize })))));
+    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: "time-input__input", disabled: this.disabled, id: this.id, onBlur: this.onBlur, 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("span", { class: "time-input__icon" }, index.h("swirl-icon-time-outlined", { size: this.iconSize })))));
   }
   get el() { return index.getElement(this); }
   static get watchers() { return {

package/dist/collection/components/swirl-date-input/swirl-date-input.js

@@ -65,6 +65,12 @@ export class SwirlDateInput {
     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() {
     var _a, _b, _c;
@@ -103,7 +109,7 @@ export class SwirlDateInput {
     const className = classnames("date-input", {
       "date-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: "date-input__input", disabled: this.disabled, id: this.id, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { popover: `popover-${this.id}` }, h("button", { "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { size: this.iconSize })))), !this.disabled && (h("swirl-popover", { animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
+    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: "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 }), h("swirl-popover-trigger", { popover: `popover-${this.id}` }, h("button", { "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { size: this.iconSize })))), !this.disabled && (h("swirl-popover", { animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
   }
   static get is() { return "swirl-date-input"; }
   static get encapsulation() { return "scoped"; }

package/dist/collection/components/swirl-modal/swirl-modal.js

@@ -89,6 +89,7 @@ export class SwirlModal {
       // wait for animation
       setTimeout(() => {
         this.focusTrap.activate();
+        this.handleAutoFocus();
       }, 200);
     }
     else {
@@ -128,6 +129,10 @@ export class SwirlModal {
   updateHeaderToolsStatus() {
     this.hasHeaderTools = Boolean(this.el.querySelector('[slot="header-tools"]'));
   }
+  handleAutoFocus() {
+    var _a;
+    (_a = this.modalEl.querySelector("input[autofocus]")) === null || _a === void 0 ? void 0 : _a.focus();
+  }
   lockBodyScroll() {
     disableBodyScroll(this.scrollContainer);
   }

package/dist/collection/components/swirl-modal/swirl-modal.stories.js

@@ -50,7 +50,7 @@ const Template = (args) => {
     </swirl-text>
 
     <swirl-box padding-block-start="0" padding-block-end="16" slot="header-tools">
-      <swirl-search label="Search"></swirl-search>
+      <swirl-search auto-focus label="Search"></swirl-search>
     </div>
   `;
   container.append(trigger, element);

package/dist/collection/components/swirl-search/swirl-search.js

@@ -37,6 +37,12 @@ export class SwirlSearch {
   componentDidLoad() {
     this.forceIconProps(this.desktopMediaQuery.matches);
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.input.focus();
+      });
+    }
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/collection/components/swirl-select/swirl-select.css

@@ -48,7 +48,7 @@
   display: block;
   overflow: hidden;
   width: 100%;
-  height: 1.375rem;
+  height: 1.25rem;
   margin: 0;
   padding: 0;
   padding-right: calc(1.5rem + var(--s-space-8));
@@ -78,12 +78,17 @@
   display: none;
   overflow: hidden;
   width: 100%;
-  min-height: 1.375rem;
+  min-height: 1.25rem;
   padding-right: calc(1.5rem + var(--s-space-8));
   flex-wrap: wrap;
   gap: var(--s-space-8);
 }
 
+.select__multi-select-values ::part(tag) {
+    height: 1.25rem;
+    padding: 0 var(--s-space-4);
+  }
+
 .select__indicator {
   position: absolute;
   top: 50%;

package/dist/collection/components/swirl-tag/swirl-tag.js

@@ -13,7 +13,7 @@ export class SwirlTag {
   }
   render() {
     const className = classnames("tag", `tag--intent-${this.intent}`);
-    return (h(Host, null, h("span", { class: className }, this.label, this.removable && (h("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { size: 16 }))))));
+    return (h(Host, null, h("span", { class: className, part: "tag" }, this.label, this.removable && (h("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { size: 16 }))))));
   }
   static get is() { return "swirl-tag"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/swirl-tag/swirl-tag.spec.js

@@ -9,7 +9,7 @@ describe("swirl-tag", () => {
     expect(page.root).toEqualHtml(`
       <swirl-tag intent="info" label="Label">
         <mock:shadow-root>
-          <span class="tag tag--intent-info">
+          <span class="tag tag--intent-info" part="tag">
             Label
           </span>
         </mock:shadow-root>

package/dist/collection/components/swirl-text-input/swirl-text-input.js

@@ -102,6 +102,12 @@ export class SwirlTextInput {
   componentDidLoad() {
     this.updateIconSize(this.desktopMediaQuery.matches);
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.inputEl.focus();
+      });
+    }
   }
   componentDidRender() {
     this.adjustInputSize();

package/dist/collection/components/swirl-text-input/swirl-text-input.spec.js

@@ -5,7 +5,6 @@ describe("swirl-text-input", () => {
     const page = await newSpecPage({
       components: [SwirlTextInput],
       html: `<swirl-text-input
-              auto-focus="true"
               disabled="true"
               swirl-aria-describedby="id"
               invalid="true"
@@ -17,8 +16,7 @@ describe("swirl-text-input", () => {
             </swirl-text-input>`,
     });
     expect(page.root).toEqualHtml(`
-      <swirl-text-input auto-focus="true"
-                      disabled="true"
+      <swirl-text-input disabled="true"
                       swirl-aria-describedby="id"
                       invalid="true"
                       mode="decimal"
@@ -31,7 +29,6 @@ describe("swirl-text-input", () => {
                  aria-disabled="true"
                  aria-invalid="true"
                  autocomplete="on"
-                 autofocus=""
                  class="text-input__input"
                  disabled=""
                  inputmode="decimal"

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

@@ -73,6 +73,12 @@ export class SwirlTimeInput {
     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() {
     var _a, _b, _c;
@@ -111,7 +117,7 @@ export class SwirlTimeInput {
     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 })))));
+    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, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("span", { class: "time-input__icon" }, h("swirl-icon-time-outlined", { size: this.iconSize })))));
   }
   static get is() { return "swirl-time-input"; }
   static get encapsulation() { return "scoped"; }

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

@@ -75,6 +75,12 @@ const SwirlDateInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDateInput e
     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() {
     var _a, _b, _c;
@@ -113,7 +119,7 @@ const SwirlDateInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlDateInput e
     const className = classnames("date-input", {
       "date-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: "date-input__input", disabled: this.disabled, id: this.id, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { popover: `popover-${this.id}` }, h("button", { "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { size: this.iconSize })))), !this.disabled && (h("swirl-popover", { animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
+    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: "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 }), h("swirl-popover-trigger", { popover: `popover-${this.id}` }, h("button", { "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { size: this.iconSize })))), !this.disabled && (h("swirl-popover", { animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
   }
   get el() { return this; }
   static get watchers() { return {

package/dist/components/swirl-modal.js

@@ -1237,6 +1237,7 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
       // wait for animation
       setTimeout(() => {
         this.focusTrap.activate();
+        this.handleAutoFocus();
       }, 200);
     }
     else {
@@ -1276,6 +1277,10 @@ const SwirlModal$1 = /*@__PURE__*/ proxyCustomElement(class SwirlModal extends H
   updateHeaderToolsStatus() {
     this.hasHeaderTools = Boolean(this.el.querySelector('[slot="header-tools"]'));
   }
+  handleAutoFocus() {
+    var _a;
+    (_a = this.modalEl.querySelector("input[autofocus]")) === null || _a === void 0 ? void 0 : _a.focus();
+  }
   lockBodyScroll() {
     disableBodyScroll(this.scrollContainer);
   }

package/dist/components/swirl-search.js

@@ -48,6 +48,12 @@ const SwirlSearch$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSearch extends
   componentDidLoad() {
     this.forceIconProps(this.desktopMediaQuery.matches);
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.input.focus();
+      });
+    }
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/components/swirl-select.js

@@ -10,7 +10,7 @@ import { d as defineCustomElement$4 } from './swirl-popover-trigger2.js';
 import { d as defineCustomElement$3 } from './swirl-tag2.js';
 import { d as defineCustomElement$2 } from './swirl-visually-hidden2.js';
 
-const swirlSelectCss = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;visibility:hidden;width:100%;height:100%}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.375rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.375rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;gap:var(--s-space-8)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}";
+const swirlSelectCss = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;visibility:hidden;width:100%;height:100%}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag){height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}";
 
 const SwirlSelect$1 = /*@__PURE__*/ proxyCustomElement(class SwirlSelect extends HTMLElement {
   constructor() {

package/dist/components/swirl-tag2.js

@@ -21,7 +21,7 @@ const SwirlTag = /*@__PURE__*/ proxyCustomElement(class SwirlTag extends HTMLEle
   }
   render() {
     const className = classnames("tag", `tag--intent-${this.intent}`);
-    return (h(Host, null, h("span", { class: className }, this.label, this.removable && (h("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { size: 16 }))))));
+    return (h(Host, null, h("span", { class: className, part: "tag" }, this.label, this.removable && (h("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { size: 16 }))))));
   }
   get el() { return this; }
   static get style() { return swirlTagCss; }

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

@@ -115,6 +115,12 @@ const SwirlTextInput = /*@__PURE__*/ proxyCustomElement(class SwirlTextInput ext
   componentDidLoad() {
     this.updateIconSize(this.desktopMediaQuery.matches);
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.inputEl.focus();
+      });
+    }
   }
   componentDidRender() {
     this.adjustInputSize();

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

@@ -79,6 +79,12 @@ const SwirlTimeInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTimeInput e
     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() {
     var _a, _b, _c;
@@ -117,7 +123,7 @@ const SwirlTimeInput$1 = /*@__PURE__*/ proxyCustomElement(class SwirlTimeInput e
     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 })))));
+    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, ref: (el) => (this.inputEl = el), 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 {

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

@@ -69,6 +69,12 @@ const SwirlDateInput = class {
     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() {
     var _a, _b, _c;
@@ -107,7 +113,7 @@ const SwirlDateInput = class {
     const className = classnames("date-input", {
       "date-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: "date-input__input", disabled: this.disabled, id: this.id, onClick: this.onClick, onFocus: this.onFocus, onInput: this.onInput, placeholder: this.placeholder, required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { popover: `popover-${this.id}` }, h("button", { "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { size: this.iconSize })))), !this.disabled && (h("swirl-popover", { animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
+    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: "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 }), h("swirl-popover-trigger", { popover: `popover-${this.id}` }, h("button", { "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { size: this.iconSize })))), !this.disabled && (h("swirl-popover", { animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue })))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {

package/dist/esm/swirl-modal.entry.js

@@ -1232,6 +1232,7 @@ const SwirlModal = class {
       // wait for animation
       setTimeout(() => {
         this.focusTrap.activate();
+        this.handleAutoFocus();
       }, 200);
     }
     else {
@@ -1271,6 +1272,10 @@ const SwirlModal = class {
   updateHeaderToolsStatus() {
     this.hasHeaderTools = Boolean(this.el.querySelector('[slot="header-tools"]'));
   }
+  handleAutoFocus() {
+    var _a;
+    (_a = this.modalEl.querySelector("input[autofocus]")) === null || _a === void 0 ? void 0 : _a.focus();
+  }
   lockBodyScroll() {
     disableBodyScroll(this.scrollContainer);
   }

package/dist/esm/swirl-search.entry.js

@@ -45,6 +45,12 @@ const SwirlSearch = class {
   componentDidLoad() {
     this.forceIconProps(this.desktopMediaQuery.matches);
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.input.focus();
+      });
+    }
   }
   disconnectedCallback() {
     var _a, _b;

package/dist/esm/swirl-select.entry.js

@@ -2,7 +2,7 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { c as classnames } from './index-d280dafb.js';
 import { q as querySelectorAllDeep } from './utils-bc84f36e.js';
 
-const swirlSelectCss = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;visibility:hidden;width:100%;height:100%}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.375rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.375rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;gap:var(--s-space-8)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}";
+const swirlSelectCss = ".sc-swirl-select-h{display:block;width:100%}.sc-swirl-select-h *.sc-swirl-select{box-sizing:border-box}.select.sc-swirl-select{position:relative;display:flex;width:100%}.select.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:var(--s-space-16)}.select--placement-top-start.sc-swirl-select .sc-swirl-select::part(popover__content){margin-top:-2.25rem}.select--multi.sc-swirl-select .select__input.sc-swirl-select{position:absolute;visibility:hidden;width:100%;height:100%}.select--multi.sc-swirl-select .select__multi-select-values.sc-swirl-select{display:flex}.select--disabled.sc-swirl-select .select__input.sc-swirl-select{color:var(--s-text-disabled)}.select--disabled.sc-swirl-select .select__indicator.sc-swirl-select{color:var(--s-icon-disabled)}.select--inline.sc-swirl-select .select__indicator.sc-swirl-select{transform:translateY(-50%)}.select__input.sc-swirl-select{display:block;overflow:hidden;width:100%;height:1.25rem;margin:0;padding:0;padding-right:calc(1.5rem + var(--s-space-8));border:none;background-color:transparent;font:inherit;line-height:var(--s-line-height-base);text-align:left;white-space:nowrap;text-overflow:ellipsis;cursor:default}.select__input.sc-swirl-select:focus{outline:none}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.select__input.sc-swirl-select{font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}.select__multi-select-values.sc-swirl-select{display:none;overflow:hidden;width:100%;min-height:1.25rem;padding-right:calc(1.5rem + var(--s-space-8));flex-wrap:wrap;gap:var(--s-space-8)}.select__multi-select-values.sc-swirl-select .sc-swirl-select::part(tag){height:1.25rem;padding:0 var(--s-space-4)}.select__indicator.sc-swirl-select{position:absolute;top:50%;right:0;display:inline-flex;color:var(--s-icon-default);transform:translateY(calc(-50% - var(--s-space-8)))}";
 
 const SwirlSelect = class {
   constructor(hostRef) {

package/dist/esm/swirl-tag.entry.js

@@ -18,7 +18,7 @@ const SwirlTag = class {
   }
   render() {
     const className = classnames("tag", `tag--intent-${this.intent}`);
-    return (h(Host, null, h("span", { class: className }, this.label, this.removable && (h("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { size: 16 }))))));
+    return (h(Host, null, h("span", { class: className, part: "tag" }, this.label, this.removable && (h("button", { "aria-label": this.removalButtonLabel, class: "tag__removal-button", onClick: this.onRemove, tabIndex: this.el.ariaHidden === "true" ? -1 : undefined, type: "button" }, h("swirl-icon-close", { size: 16 }))))));
   }
   get el() { return getElement(this); }
 };

package/dist/esm/swirl-text-input.entry.js

@@ -109,6 +109,12 @@ const SwirlTextInput = class {
   componentDidLoad() {
     this.updateIconSize(this.desktopMediaQuery.matches);
     this.desktopMediaQuery.onchange = this.desktopMediaQueryHandler;
+    // see https://stackoverflow.com/a/27314017
+    if (this.autoFocus) {
+      setTimeout(() => {
+        this.inputEl.focus();
+      });
+    }
   }
   componentDidRender() {
     this.adjustInputSize();

package/dist/esm/swirl-time-input.entry.js

@@ -77,6 +77,12 @@ const SwirlTimeInput = class {
     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() {
     var _a, _b, _c;
@@ -115,7 +121,7 @@ const SwirlTimeInput = class {
     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 })))));
+    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, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("span", { class: "time-input__icon" }, h("swirl-icon-time-outlined", { size: this.iconSize })))));
   }
   get el() { return getElement(this); }
   static get watchers() { return {