@getflip/swirl-components 0.258.0 → 0.259.1

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

@@ -91,3 +91,10 @@
     top: -0.625rem
 }
   }
+
+@media (max-width: 767px) {
+
+.date-input__date-picker-popover {
+    position: fixed
+}
+  }

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

@@ -148,7 +148,7 @@ export class SwirlDateInput {
         const className = classnames("date-input", {
             "date-input--inline": this.inline,
         });
-        return (h(Host, { key: '296c03693dedf618c9f897027d1f18c37d7570cc' }, h("div", { key: '1cebccc9e07c74ba99250df57ce53385cc7422dd', class: className }, h("input", { key: 'f751cb69404907a1e203396d559db8e7b4591007', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { key: 'dcbd828da70c00ac11ae35c278a793e5225e80f4', swirlPopover: `popover-${this.id}` }, h("button", { key: 'ba359bdb631eb2c327f9660d08e9ee28e4e7db37', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '144aed4c8e6768e3b3f3e4ea73a1b45688329205', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: '76dd883b51dbc595e282019774751455fcd778d9', animation: "scale-in-y", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '80f4b71f88f43b21fb8bd54e3486ad27e485eb37', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
+        return (h(Host, { key: '296c03693dedf618c9f897027d1f18c37d7570cc' }, h("div", { key: '1cebccc9e07c74ba99250df57ce53385cc7422dd', class: className }, h("input", { key: 'f751cb69404907a1e203396d559db8e7b4591007', "aria-describedby": this.swirlAriaDescribedby, "aria-disabled": this.disabled ? "true" : undefined, "aria-invalid": ariaInvalid, autoFocus: this.autoFocus, class: "date-input__input", disabled: this.disabled, readonly: this.readonly, id: this.id, inputmode: "numeric", onClick: this.onClick, onMouseDown: this.onMouseDown, onFocus: this.onFocus, onBlur: this.onBlur, onInput: this.onInput, placeholder: this.placeholder, ref: (el) => (this.inputEl = el), required: this.required, type: "text", value: displayValue }), h("swirl-popover-trigger", { key: 'dcbd828da70c00ac11ae35c278a793e5225e80f4', swirlPopover: `popover-${this.id}` }, h("button", { key: 'ba359bdb631eb2c327f9660d08e9ee28e4e7db37', "aria-label": this.datePickerTriggerLabel, class: "date-input__date-picker-button", disabled: this.disabled, type: "button" }, h("swirl-icon-today", { key: '144aed4c8e6768e3b3f3e4ea73a1b45688329205', size: this.iconSize })))), !this.disabled && (h("swirl-popover", { key: 'e28a16501ccbd4bb6507984d55cd539689eec1bd', animation: "scale-in-y", class: "date-input__date-picker-popover", id: `popover-${this.id}`, label: this.datePickerLabel, placement: "bottom-end", ref: (el) => (this.pickerPopover = el) }, h("swirl-date-picker", { key: '0cd7207713f7dcb2b61d9a562ebab2e863af3058', disableDate: this.datePickerDisableDate, firstDayOfWeek: this.firstDayOfWeek, labels: this.labels, locale: this.locale, onValueChange: this.onPickDate, value: dateValue, startDate: dateValue })))));
     }
     static get is() { return "swirl-date-input"; }
     static get encapsulation() { return "scoped"; }

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

@@ -38,7 +38,7 @@ describe("swirl-date-input", () => {
             </button>
           </swirl-popover-trigger>
         </div>
-        <swirl-popover animation="scale-in-y" id="popover-swirl-date-input-0" label="Date picker" placement="bottom-end">
+        <swirl-popover animation="scale-in-y" class="date-input__date-picker-popover" id="popover-swirl-date-input-0" label="Date picker" placement="bottom-end">
           <swirl-date-picker firstdayofweek="0" locale="en-US"></swirl-date-picker>
         </swirl-popover>
       </swirl-date-input>

package/dist/collection/components/swirl-shell-layout/swirl-shell-layout.css

@@ -294,8 +294,8 @@
     --swirl-badge-border-color: var(--s-surface-sunken-default);
 
     position: absolute;
-    top: var(--s-space-4);
-    right: var(--s-space-4);
+    top: var(--s-space-2);
+    right: var(--s-space-2);
     padding-right: var(--s-space-2);
     transform: translate3d(0.1875rem, 0, 0);
   }