npm - @six-group/ui-library - Versions diffs - 0.0.0-insider.fe4db17 → 0.0.0-insider.fea784d - Mend

@six-group/ui-library 0.0.0-insider.fe4db17 → 0.0.0-insider.fea784d

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (404) hide show

package/dist/cjs/loader.cjs.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BKTrCUjx.js');
+var index = require('./index-C8rK7OAe.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {

package/dist/cjs/six-alert.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BKTrCUjx.js');
+var index = require('./index-C8rK7OAe.js');
 var slot = require('./slot-DBK7c7jH.js');
 const sixAlertCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:contents;margin:0}.alert{position:relative;display:flex;align-items:stretch;background-color:var(--six-color-white);border:solid 1px var(--six-color-web-rock-200);border-top-width:3px;border-radius:var(--six-border-radius-medium);box-shadow:var(--box-shadow);font-family:var(--six-font-sans);font-size:var(--six-font-size-small);font-weight:var(--six-font-weight-normal);line-height:1.6;color:var(--six-color-web-rock-700);opacity:0;transform:scale(0.9);transition:var(--six-transition-medium) opacity ease, var(--six-transition-medium) transform ease;margin:inherit}.alert:not(.alert--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.alert--shadow{box-shadow:var(--six-shadow-medium)}.alert--open{opacity:1;transform:none}.alert__icon{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large)}.alert__icon ::slotted(*){margin-left:var(--six-spacing-large)}.alert--primary{border-top-color:var(--six-color-web-rock-900)}.alert--primary .alert__icon{color:var(--six-color-web-rock-900)}.alert--success{border-top-color:var(--six-color-success-600)}.alert--success .alert__icon{color:var(--six-color-success-600)}.alert--info{border-top-color:var(--six-color-action-500)}.alert--info .alert__icon{color:var(--six-color-action-500)}.alert--warning{border-top-color:var(--six-color-warning-800)}.alert--warning .alert__icon{color:var(--six-color-warning-800)}.alert--danger{border-top-color:var(--six-color-danger-900)}.alert--danger .alert__icon{color:var(--six-color-danger-900)}.alert__message{flex:1 1 auto;padding:var(--six-spacing-large);overflow:hidden}.alert__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-large);padding-right:var(--six-spacing-medium)}";

package/dist/cjs/six-avatar.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BKTrCUjx.js');
+var index = require('./index-C8rK7OAe.js');
 const sixAvatarCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block;--size:2rem}.avatar{display:inline-flex;align-items:center;justify-content:center;position:relative;width:var(--size);height:var(--size);background-color:var(--six-avatar-background-color);font-family:var(--six-font-sans);font-size:calc(var(--size) * 0.5);font-weight:var(--six-font-weight-normal);color:var(--six-avatar-color);overflow:hidden;user-select:none;vertical-align:middle;cursor:pointer;outline:none}.avatar:hover{box-shadow:var(--six-shadow-medium)}.avatar--circle{border-radius:var(--six-border-radius-circle)}.avatar--rounded{border-radius:var(--six-border-radius-medium)}.avatar--square{border-radius:0}.avatar__icon{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0;width:100%;height:100%}.avatar__initials{line-height:1;text-transform:uppercase}.avatar__image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}";
@@ -21,12 +21,12 @@ const SixAvatar = class {
         };
     }
     render() {
-        return (index.h("div", { key: '1aaade211fdffbe4e64a03942be0f2dc045f2ba5', part: "base", class: {
+        return (index.h("div", { key: 'c18818d8ee0e4c16ecc7036dee47334eafa8d38d', part: "base", class: {
                 avatar: true,
                 'avatar--circle': this.shape === 'circle',
                 'avatar--rounded': this.shape === 'rounded',
                 'avatar--square': this.shape === 'square',
-            }, role: "image", "aria-label": this.alt, tabIndex: 0 }, this.initials === '' && (index.h("div", { key: '08f51e38d5961efe8a1edd229b19173a76773fac', part: "icon", class: "avatar__icon" }, index.h("slot", { key: '93a72971ee8e0e0cc700341520f456e8284b76e6', name: "icon" }, index.h("six-icon", { key: 'bc3fcbdde635da80270e3ea545b11113ee6512c1' }, "person")))), this.initials && (index.h("div", { key: '0531c544e1400e170161de648afeb1a27ddcbfb6', part: "initials", class: "avatar__initials" }, this.initials)), this.image && !this.hasError && (index.h("img", { key: 'aae3851a20d505d4ee266828ac777a2518bdaf6e', part: "image", class: "avatar__image", src: this.image, onError: this.handleImageError }))));
+            }, role: "image", "aria-label": this.alt, tabIndex: 0 }, this.initials === '' && (index.h("div", { key: '793124283385b4d78d269217c0f80a303ea3af01', part: "icon", class: "avatar__icon" }, index.h("slot", { key: '20046d36c15a800783c245fc9bd9f8a0c462cd00', name: "icon" }, index.h("six-icon", { key: 'e25b68320947163b737d94484d6bd5a43117f6d7' }, "person")))), this.initials && (index.h("div", { key: '7f9e5c67a482b081116c0038ff248e1fdb9662d1', part: "initials", class: "avatar__initials" }, this.initials)), this.image && !this.hasError && (index.h("img", { key: '44c10b4d2755543a5e77fc3d6b15e02ba917ef7d', part: "image", class: "avatar__image", src: this.image, onError: this.handleImageError }))));
     }
 };
 SixAvatar.style = sixAvatarCss;

package/dist/cjs/six-badge.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BKTrCUjx.js');
+var index = require('./index-C8rK7OAe.js');
 const sixBadgeCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-flex}.badge{display:inline-flex;align-items:center;justify-content:center;font-family:var(--six-font-family);font-size:var(--six-font-size-x-small);font-weight:var(--six-font-weight-semibold);letter-spacing:var(--six-letter-spacing-normal);line-height:1;border-radius:var(--six-border-radius-small);white-space:nowrap;padding:3px 6px;user-select:none;cursor:inherit}.badge--info{background-color:var(--six-color-web-rock-900);color:var(--six-color-white)}.badge--success{background-color:var(--six-color-success-500);color:var(--six-color-web-rock-900)}.badge--warning{background-color:var(--six-color-warning-700);color:var(--six-color-web-rock-900)}.badge--danger{background-color:var(--six-color-danger-800);color:var(--six-color-white)}.badge--action{background-color:var(--six-color-action-500);color:var(--six-color-white)}.badge--primary{background-color:var(--six-color-clay-50);color:var(--six-color-black)}.badge--pill{border-radius:var(--six-border-radius-pill)}.badge--pulse{animation:pulse 1.5s infinite}.badge--pulse.badge--info{--pulse-color:var(--six-color-web-rock-900)}.badge--pulse.badge--success{--pulse-color:var(--six-color-success-500)}.badge--pulse.badge--warning{--pulse-color:var(--six-color-warning-700)}.badge--pulse.badge--danger{--pulse-color:var(--six-color-danger-800)}.badge--pulse.badge--action{--pulse-color:var(--six-color-action-500)}.badge--pulse.badge--primary{--pulse-color:var(--six-color-clay-50)}@keyframes pulse{0%{box-shadow:0 0 0 0 var(--pulse-color)}70%{box-shadow:0 0 0 0.5rem transparent}100%{box-shadow:0 0 0 0 transparent}}";
@@ -15,7 +15,7 @@ const SixBadge = class {
         this.pulse = false;
     }
     render() {
-        return (index.h("span", { key: '6352c1b6f7b593982f42b4e26862f365d9aa32fa', part: "base", class: {
+        return (index.h("span", { key: '5f279e992f0f009a0a2be5128e21290c0ce9990a', part: "base", class: {
                 badge: true,
                 // Types
                 'badge--primary': this.type === 'primary',
@@ -27,7 +27,7 @@ const SixBadge = class {
                 'badge--info': this.type === 'info',
                 'badge--pill': this.pill,
                 'badge--pulse': this.pulse,
-            }, role: "status" }, index.h("slot", { key: 'df34cfd3b2ecd789592b0436948a4918616dcf9f' })));
+            }, role: "status" }, index.h("slot", { key: '08847cb32936a89c9407d36f9c94e32a35baa1fb' })));
     }
 };
 SixBadge.style = sixBadgeCss;

package/dist/cjs/six-button.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BKTrCUjx.js');
+var index = require('./index-C8rK7OAe.js');
 var slot = require('./slot-DBK7c7jH.js');
 var form = require('./form-CaXKJAMY.js');
@@ -96,7 +96,7 @@ const SixButton = class {
         const isLink = this.href != null;
         const isButton = !isLink;
         const Button = isLink ? 'a' : 'button';
-        return (index.h("div", { key: '2fd3a9c4f7711290465961099b245c323139b817', onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, index.h(Button, { key: '4330f6a6cb46d3f34db0870b420efecafdc9913c', ref: (el) => (this.nativeButton = el), part: "base", class: {
+        return (index.h("div", { key: '6eba8f1f34f9dfa51d29e4349870994acf7b89fb', onClick: this.handleClick, class: { 'button-wrapper--disabled': this.disabled } }, index.h(Button, { key: '77cd544148f4ea4dcf2c6b34c4c6d62d4372372d', ref: (el) => (this.nativeButton = el), part: "base", class: {
                 button: true,
                 // Types
                 'button--secondary': this.type === 'secondary',
@@ -121,7 +121,7 @@ const SixButton = class {
                 'button--has-label': this.hasLabel,
                 'button--has-prefix': this.hasPrefix,
                 'button--has-suffix': this.hasSuffix,
-            }, disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined, name: isButton ? this.name : undefined, value: isButton ? this.value : undefined, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, "data-testid": "button" }, index.h("span", { key: 'd2cb3cd3d699da69e4f4db249d0a25fc0fc6a4cc', part: "prefix", class: "button__prefix" }, index.h("slot", { key: '537e43865e5ef8fc0a09ca66c262fdf722685037', onSlotchange: this.handleSlotChange, name: "prefix" })), index.h("span", { key: '965d7720a89a3a2af615a891454c6ba0ca890aa3', part: "label", class: "button__label" }, index.h("slot", { key: '1056dfc6a614f61187ffa2edcb7bfaba27680a3e', onSlotchange: this.handleSlotChange })), index.h("span", { key: 'cc1df5769286f43052402cee71d8a946ded3e790', part: "suffix", class: "button__suffix" }, index.h("slot", { key: 'eba52e13592610c85159892e60e343b06f6ca7c2', onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (index.h("span", { key: 'f4f51eeb17b00099c6918a8a393f10984e24f809', part: "caret", class: "button__caret" }, index.h("svg", { key: 'bbdc4a79b99c3f93dabd76033d109f2cb020b29d', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { key: '953a8016733d8d8c7a9da3144fb46fe4602ceaea', points: "6 9 12 15 18 9" })))), this.loading && index.h("six-spinner", { key: '2a195cdb2583e91316f333fbb0c74d04ee9fa0c3' }))));
+            }, disabled: isButton ? this.disabled : undefined, tabindex: this.disabled ? '-1' : undefined, type: isButton ? (this.submit ? 'submit' : this.reset ? 'reset' : 'button') : undefined, name: isButton ? this.name : undefined, value: isButton ? this.value : undefined, href: isLink ? this.href : undefined, target: isLink && this.target != null ? this.target : undefined, download: isLink && this.download != null ? this.download : undefined, rel: isLink && this.target != null ? 'noreferrer noopener' : undefined, onBlur: this.handleBlur, onFocus: this.handleFocus, "data-testid": "button" }, index.h("span", { key: '0fb19c85adc826ed6e92b306f734185e3557e30f', part: "prefix", class: "button__prefix" }, index.h("slot", { key: '8223eb8644d495ef27cd175a905ab68c3d10f14f', onSlotchange: this.handleSlotChange, name: "prefix" })), index.h("span", { key: '00d407ea8d28b9e515992a872cc91705e2906a24', part: "label", class: "button__label" }, index.h("slot", { key: '28fb5d1061bfdf0f404e2241ccf6f16b4e113ba7', onSlotchange: this.handleSlotChange })), index.h("span", { key: '65e82de3e6851445627b31212bbbeccc8ca85d35', part: "suffix", class: "button__suffix" }, index.h("slot", { key: 'd9608fad50cafb5fcc14e1eecd9e47cf99edcb14', onSlotchange: this.handleSlotChange, name: "suffix" })), this.caret && (index.h("span", { key: '4c8b4ad77d69e4a189621f53e3c20dbb7504c4cb', part: "caret", class: "button__caret" }, index.h("svg", { key: '16b2146dd6bd99677cadb4b2fe5cf67a4e32a39d', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("polyline", { key: '4cdd831978519dcb553a929fe54f6bd49b25fbc5', points: "6 9 12 15 18 9" })))), this.loading && index.h("six-spinner", { key: 'df087e05782f46995bdc6f6325b4a610f74ce971' }))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/six-card.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BKTrCUjx.js');
+var index = require('./index-C8rK7OAe.js');
 const sixCardCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{display:inline-block;box-shadow:var(--six-shadow-medium);border:1px solid var(--six-color-web-rock-100);padding:var(--six-spacing-medium)}";
@@ -9,7 +9,7 @@ const SixCard = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: 'd2459e12a9f8274f095a3d09a077c59a7f091dea' }, index.h("slot", { key: '1619a201af796250d6808a0974047644e7fb6a69' })));
+        return (index.h(index.Host, { key: '8ba5461ffe1740e8f2b7061701cf8f06e24adc25' }, index.h("slot", { key: '95fde97191f2c89fe76643450e6e9eb4dcbe9fa2' })));
     }
 };
 SixCard.style = sixCardCss;

package/dist/cjs/six-checkbox_2.cjs.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 'use strict';
-var index = require('./index-BKTrCUjx.js');
-var formControl = require('./form-control-Ditp8yHw.js');
+var index = require('./index-C8rK7OAe.js');
+var formControl = require('./form-control-CX8QRq9v.js');
 var slot = require('./slot-DBK7c7jH.js');
 var eventListeners = require('./event-listeners-BrSR7arL.js');
@@ -115,14 +115,14 @@ const SixCheckbox = class {
         this.hasErrorSlot = slot.hasSlot(this.host, 'error-text');
     }
     render() {
-        return (index.h(formControl.FormControl, { key: 'fb33e858f751205c8df374f3bcca37cec9f8203b', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, hasErrorTextSlot: this.hasErrorSlot, errorText: this.errorText, errorTextCount: this.errorTextCount, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, index.h("label", { key: '35bfda441fe651af25cb45d75d003919c7869ae2', part: "base", class: {
+        return (index.h(formControl.FormControl, { key: 'cf87dbd9fbe4063c8579a41e729f06f6ea4ad41c', inputId: this.inputId, label: this.label, labelId: this.labelId, hasLabelSlot: this.hasLabelSlot, errorTextId: this.errorTextId, hasErrorTextSlot: this.hasErrorSlot, errorText: this.errorText, errorTextCount: this.errorTextCount, size: "medium", disabled: this.disabled, required: this.required, displayError: this.invalid }, index.h("label", { key: 'c3b2be07e9c25c226cac5d2d71d76e4096af15f8', part: "base", class: {
                 checkbox: true,
                 'checkbox--checked': this.checked,
                 'checkbox--disabled': this.disabled,
                 'checkbox--focused': this.hasFocus,
                 'checkbox--invalid': this.invalid,
                 'checkbox--indeterminate': this.indeterminate,
-            }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown }, index.h("span", { key: '92d31ea45a0f1f45230def64e15bd0e81c4de140', part: "control", class: "checkbox__control" }, this.checked && (index.h("span", { key: '49501ea788463f4d39c5500349ace013c21d31c2', part: "checked-icon", class: "checkbox__icon" }, index.h("svg", { key: '8ae0e9bfe850b13a205722a5e17e90b21ad35f26', viewBox: "0 0 16 16" }, index.h("g", { key: '463b4761b130e5e9377efb7e26f57218ce5249ad', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, index.h("g", { key: '147d4348146dcace57835e436453bc834763c464', stroke: "currentColor", "stroke-width": "2" }, index.h("g", { key: '6596f4cd75b94d8ff3bef19698acc56a6eab847a', transform: "translate(3.428571, 3.428571)" }, index.h("path", { key: '453cfb8ae9d6d4e45f1b569e06ba79ac2a0d2b9c', d: "M0,5.71428571 L3.42857143,9.14285714" }), index.h("path", { key: 'b650801a5ae8fde8886b9e1fb4257eca704beabd', d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (index.h("span", { key: 'ab31b1999eae88b74c5bdeb1bbc1007b0459f8a8', part: "indeterminate-icon", class: "checkbox__icon" }, index.h("svg", { key: '8d5cf52fc16243531056ba760d9c770decd593e3', viewBox: "0 0 16 16" }, index.h("g", { key: 'fb8ee93f8ec5abc82f8d982cc2ad59c4ae77fb91', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, index.h("g", { key: '825161dbc71cfc395061b3ef485352762c8780c5', stroke: "currentColor", "stroke-width": "2" }, index.h("g", { key: 'c5541fd6e2d69a376278cd617447a8b9bfe6a0d6', transform: "translate(2.285714, 6.857143)" }, index.h("path", { key: '6c1f488d0572c2773b8497cd6214dcfdc64164ef', d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), index.h("input", { key: '2e8ac6e459e47708116702585a5155ee4385d021', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus })), index.h("span", { key: '817dae0dcffedf7de011d0fa68ce3a1ca45bbd3a', part: "text", id: this.textId, class: "checkbox__text" }, index.h("slot", { key: 'e0f9b77cf11c592efd6b312888491a3b5e84bb32' })))));
+            }, htmlFor: this.inputId, onMouseDown: this.handleMouseDown }, index.h("span", { key: '9c01a62b12b784e69e8ce7fd52f48aed3e86c278', part: "control", class: "checkbox__control" }, this.checked && (index.h("span", { key: '9d755d8a162152a268f8883abaeb15d33c3a48e7', part: "checked-icon", class: "checkbox__icon" }, index.h("svg", { key: 'ca598e4be471eb72eb0c416a2d2bf6d79fa51fe4', viewBox: "0 0 16 16" }, index.h("g", { key: 'dd4db42d3000bf096968520e15cc85f94140c7e3', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, index.h("g", { key: '8d83aa9af87622aaf724fa2ed91c18ac3df9cba6', stroke: "currentColor", "stroke-width": "2" }, index.h("g", { key: 'dd5d60bb007d3f493f7ab19b9fa8b2973a596707', transform: "translate(3.428571, 3.428571)" }, index.h("path", { key: '474b99c56df6507a6013ffbc3fcb5dab7479c79e', d: "M0,5.71428571 L3.42857143,9.14285714" }), index.h("path", { key: '2b8965fb78d5eed486589c93473d0e3ec2569a16', d: "M9.14285714,0 L3.42857143,9.14285714" }))))))), !this.checked && this.indeterminate && (index.h("span", { key: '860e7c9141f737a325bd95731fd8600e00c35db4', part: "indeterminate-icon", class: "checkbox__icon" }, index.h("svg", { key: 'ef9a9f0d090da9bb754e85a06652c00433fa90a9', viewBox: "0 0 16 16" }, index.h("g", { key: 'dc8235d73ef8b7658519f3acfb7fd56349801404', stroke: "none", "stroke-width": "1", fill: "none", "fill-rule": "evenodd", "stroke-linecap": "round" }, index.h("g", { key: '62987b29c7c3f6bbacf4feef4e4beaf31bf722ed', stroke: "currentColor", "stroke-width": "2" }, index.h("g", { key: '6be444ed0dd4cbae66f570afa0b85152b1f4da96', transform: "translate(2.285714, 6.857143)" }, index.h("path", { key: 'bcd6968d3eee416a62ad75570a0402654c2efc04', d: "M10.2857143,1.14285714 L1.14285714,1.14285714" }))))))), index.h("input", { key: '38c2532ca810970494543d5eca8927c26cf92e78', ref: (el) => (this.nativeInput = el), id: this.inputId, type: "checkbox", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, required: this.required, role: "checkbox", "aria-checked": this.checked ? 'true' : 'false', "aria-labelledby": this.labelId, onChange: this.handleChange, onBlur: this.handleBlur, onFocus: this.handleFocus })), index.h("span", { key: '1c12af81f2b724803cf2224d4ff8178774b4f7ea', part: "text", id: this.textId, class: "checkbox__text" }, index.h("slot", { key: '488fe82970614b07112449e67d4374b1cc186dfe' })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/six-date.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BKTrCUjx.js');
+var index = require('./index-C8rK7OAe.js');
 var eventListeners = require('./event-listeners-BrSR7arL.js');
 var slot = require('./slot-DBK7c7jH.js');
 var popover = require('./popover-BUVXXnz7.js');
@@ -22677,7 +22677,7 @@ const SixDate = class {
         this.popoverHelper = undefined;
     }
     render() {
-        return (index.h("div", { key: '4a0a0a6b51c92227feb7a7fc8b41c12489ae37dd', class: "container" }, index.h("six-input", { key: '2ef87d3fe93230374fd5773574f93bb4b912f150', ref: (el) => (this.inputElement = el), placeholder: this.placeholder == null ? this.dateFormat : this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, helpText: this.helpText, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onKeyDown: this.handleInputKeyDown, onInput: this.handleInputChange, onBlur: this.handleInputBlur, "onSix-input-clear": this.handleInputClearClick, size: this.size, clearable: this.clearable, "aria-describedby": "date-format" }, index.h("six-icon", { key: 'e4ce68b1456d7ccb22e124e46060207764d8594c', slot: "prefix", size: this.size === 'large' ? 'medium' : this.size }, "today"), slot.hasSlot(this.host, 'label') ? (index.h("span", { slot: "label" }, index.h("slot", { name: "label" }))) : null, slot.hasSlot(this.host, 'error-text') ? (index.h("span", { slot: "error-text" }, index.h("slot", { name: "error-text" }))) : null, slot.hasSlot(this.host, 'help-text') ? (index.h("span", { slot: "help-text" }, index.h("slot", { name: "help-text" }))) : null), index.h("span", { key: '75decf75defb00858c9a083ca59981d774e00d5e', id: "date-format", class: "sr-only" }, translateFormatHelp(this.language, this.dateFormat)), index.h("div", { key: 'f9bc0ac6b7061ff77d471c61a7b9bf421904377d', ref: (el) => (this.positioner = el), class: "positioner" }, index.h("div", { key: 'bde4bf5366e5e4313d88b572e9322a8d99ebc2f5', class: "panel", ref: (el) => (this.panel = el) }, index.h("header", { key: '5a459ff43e559120a4a6a30fb25feda2bf209d28', class: "panel__header" }, index.h("six-icon-button", { key: 'c965d4b30f8284aad842a12edc7367a54e681feb', tabindex: "-1", class: "previous", onClick: this.handlePreviousClick, name: "arrow_back_ios" }), this.selectionMode === 'day' && (index.h("div", { key: 'ebf48d64457375dc804153d9b345364ec18f242c', class: "selector", onClick: () => (this.selectionMode = 'month') }, translateMonth(this.pointerDate.month, this.language), index.h("six-icon", { key: '9481868ec393eea23ec6fb3549deee02e47400df' }, "arrow_drop_down"))), this.selectionMode !== 'year' && (index.h("div", { key: 'f2c5ab2e68e5fd88213653a2f00dbffbbae28db0', class: "selector", onClick: () => (this.selectionMode = 'year') }, this.pointerDate.year, index.h("six-icon", { key: 'd7ddf47d4760a959daec791020143dd1f21baf2b' }, "arrow_drop_down"))), this.selectionMode === 'year' && (index.h("div", { key: '6245d2be9cff0dda43be9e5cba98c9ac5a6eb722', class: "selector" }, this.pointerDate.year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2), " \u2013", ' ', this.pointerDate.year + Math.floor(NUMBER_OF_YEARS_SHOWN / 2))), index.h("six-icon-button", { key: '4cfbfafe10d4591969b55a6f4438c98361f60d5f', tabindex: "-1", class: "next", onClick: this.handleNextClick, name: "arrow_forward_ios" })), this.selectionMode === 'day' && (index.h(DaySelection, { key: '798e9e7702ccc49582d6f336e5f76f1ab4b1c8e1', language: this.language, calendarGrid: createCalendarGrid({
+        return (index.h("div", { key: '2fccfb9c005bf6ac4906be3735c3b0fc61bfad8f', class: "container" }, index.h("six-input", { key: '453bf29f4aec7bc192d1bc5191c7f74a93f0ac48', ref: (el) => (this.inputElement = el), placeholder: this.placeholder == null ? this.dateFormat : this.placeholder, readonly: this.readonly, disabled: this.disabled, name: this.name, label: this.label, required: this.required, helpText: this.helpText, errorText: this.errorText, errorTextCount: this.errorTextCount, invalid: this.invalid, onKeyDown: this.handleInputKeyDown, onInput: this.handleInputChange, onBlur: this.handleInputBlur, "onSix-input-clear": this.handleInputClearClick, size: this.size, clearable: this.clearable, "aria-describedby": "date-format" }, index.h("six-icon", { key: '93e4add573a5617e9f90e9e8060a9a3a6ec10b98', slot: "prefix", size: this.size === 'large' ? 'medium' : this.size }, "today"), slot.hasSlot(this.host, 'label') ? (index.h("span", { slot: "label" }, index.h("slot", { name: "label" }))) : null, slot.hasSlot(this.host, 'error-text') ? (index.h("span", { slot: "error-text" }, index.h("slot", { name: "error-text" }))) : null, slot.hasSlot(this.host, 'help-text') ? (index.h("span", { slot: "help-text" }, index.h("slot", { name: "help-text" }))) : null), index.h("span", { key: '5fb919b6861ed8307de1105c881350d4094bbf52', id: "date-format", class: "sr-only" }, translateFormatHelp(this.language, this.dateFormat)), index.h("div", { key: 'ccddb6c5b5c49f77d31d2d0c75742cc0ffbda2ee', ref: (el) => (this.positioner = el), class: "positioner" }, index.h("div", { key: '3eec69b5bac555fd542cab3a967700403af68750', class: "panel", ref: (el) => (this.panel = el) }, index.h("header", { key: 'a16e0c72e430580b0f0c229476b7c45ea50e194a', class: "panel__header" }, index.h("six-icon-button", { key: 'bfc02505301c5264de2934f3f4f3fcea52cacf07', tabindex: "-1", class: "previous", onClick: this.handlePreviousClick, name: "arrow_back_ios" }), this.selectionMode === 'day' && (index.h("div", { key: '2f64e3cc6f2ee9326c953f81b1ea6a3f5ab13551', class: "selector", onClick: () => (this.selectionMode = 'month') }, translateMonth(this.pointerDate.month, this.language), index.h("six-icon", { key: '9372e403d994348716322f39d7e30971c3d37842' }, "arrow_drop_down"))), this.selectionMode !== 'year' && (index.h("div", { key: '16a3de3dd5207eeb91d341a02b93b11e707f3372', class: "selector", onClick: () => (this.selectionMode = 'year') }, this.pointerDate.year, index.h("six-icon", { key: '81024acff597b548875a7500cbb5aab7ba47952e' }, "arrow_drop_down"))), this.selectionMode === 'year' && (index.h("div", { key: 'f8615b0ca8ce732a18776e3677a997fd43d9fac4', class: "selector" }, this.pointerDate.year - Math.floor(NUMBER_OF_YEARS_SHOWN / 2), " \u2013", ' ', this.pointerDate.year + Math.floor(NUMBER_OF_YEARS_SHOWN / 2))), index.h("six-icon-button", { key: '0e689a5621ae8a62415c4a19efb64a983b720115', tabindex: "-1", class: "next", onClick: this.handleNextClick, name: "arrow_forward_ios" })), this.selectionMode === 'day' && (index.h(DaySelection, { key: '6fe9920a9449418460e069eefa96adda867c2eb3', language: this.language, calendarGrid: createCalendarGrid({
                 year: this.pointerDate.year,
                 month: this.pointerDate.month,
                 selected: this.value || undefined,
@@ -22685,7 +22685,7 @@ const SixDate = class {
                 maxDate: this.max,
                 dateFormat: this.dateFormat,
                 allowedDates: this.allowedDates,
-            }), dayClicked: this.handleDayClick })), this.selectionMode === 'month' && (index.h(MonthSelection, { key: '8caff65bced9ff007d7fc3d46c1d78f135e7d0b6', language: this.language, selected: this.value, monthClicked: this.handleMonthClicked })), this.selectionMode === 'year' && (index.h(YearSelection, { key: 'f60ae8a7102bf55dbe886a103740166632d38b1f', selected: this.value, pointerYear: this.pointerDate.year, yearCount: NUMBER_OF_YEARS_SHOWN, yearClicked: this.handleYearClicked }))))));
+            }), dayClicked: this.handleDayClick })), this.selectionMode === 'month' && (index.h(MonthSelection, { key: 'ad02bb9d8b6c96abf77ccd30585490b2236fbfd0', language: this.language, selected: this.value, monthClicked: this.handleMonthClicked })), this.selectionMode === 'year' && (index.h(YearSelection, { key: 'a14118d8b9ec16182522d1de6dc12d9026ef3aa3', selected: this.value, pointerYear: this.pointerDate.year, yearCount: NUMBER_OF_YEARS_SHOWN, yearClicked: this.handleYearClicked }))))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/six-datepicker.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BKTrCUjx.js');
+var index = require('./index-C8rK7OAe.js');
 var eventListeners = require('./event-listeners-BrSR7arL.js');
 var executionControl = require('./execution-control-oU0MWBWI.js');
 var slot = require('./slot-DBK7c7jH.js');

package/dist/cjs/six-details.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-BKTrCUjx.js');
+var index = require('./index-C8rK7OAe.js');
 var focusVisible = require('./focus-visible-CMftNtQ2.js');
 const sixDetailsCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{--hide-duration:var(--six-transition-medium);--hide-timing-function:ease;--show-duration:var(--six-transition-medium);--show-timing-function:ease;--horizontal-padding:var(--six-spacing-medium);font-family:var(--six-font-family);display:block}.details{border:solid var(--six-border-width) var(--six-input-border-color);border-radius:var(--six-border-radius-medium);color:var(--six-details-color);overflow-anchor:none;font-size:var(--six-input-font-size-medium)}.details:hover:not(.details--disabled):not(.details--open){border-color:var(--six-input-border-color-hover)}.details.inline{border:none;color:var(--six-sidebar-color)}.details.inline:hover{background-color:var(--six-sidebar-hover-background-color)}.details.inline.details--open{background-color:var(--six-color-web-rock-50)}.details.inline.details--open:hover{border:none;box-shadow:none}.details.inline.details--open>.details__header{color:var(--six-sidebar-color);font-weight:var(--six-font-weight-bold);background-color:var(--six-sidebar-header-background-color)}.details--disabled{background-color:var(--six-input-background-color-disabled);border-color:var(--six-input-border-color-disabled);color:var(--six-input-color-disabled)}.details__header{display:flex;align-items:center;border-radius:inherit;padding:var(--six-spacing-medium) var(--horizontal-padding);user-select:none;cursor:pointer}.details__header:focus{outline:none}.details--disabled .details__header{cursor:not-allowed;border-width:1px}.details--disabled .details__header:focus{outline:none;box-shadow:none}.details__summary{flex:1 1 auto;display:flex;align-items:center}.details__summary-icon{flex:0 0 auto;display:flex;align-items:center;font-size:1.2em;transition:var(--six-transition-medium) transform ease}.details--open .details__summary-icon--animate{transform:rotate(-180deg)}.details__body{height:0;overflow:hidden;transition-property:height;transition-duration:var(--hide-duration);transition-timing-function:var(--hide-timing-function)}.details--open .details__body{transition-duration:var(--show-duration);transition-timing-function:var(--show-timing-function)}.details__content{padding:var(--six-spacing-medium)}";
@@ -131,15 +131,15 @@ const SixDetails = class {
     }
     render() {
         const summaryIcon = this.hasContent && (this.summaryIcon || 'expand_more');
-        return (index.h("div", { key: '9da333bcd1a3a6516672fbce89348a830bdc3af3', ref: (el) => (this.details = el), part: "base", class: {
+        return (index.h("div", { key: 'faed14eb237bca80205f5d2f3c03e0aa2be2aa8a', ref: (el) => (this.details = el), part: "base", class: {
                 details: true,
                 'details--open': this.open,
                 'details--disabled': this.disabled,
                 inline: this.inline,
-            } }, index.h("header", { key: '110254ed5654bce7be595ba48af712a388f20e21', ref: (el) => (this.header = el), part: "header", id: `${this.componentId}-header`, class: "details__header", role: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.componentId}-content`, "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleSummaryClick, onKeyDown: this.handleSummaryKeyDown }, index.h("div", { key: 'c238f0178735a5416a4a713d10932940a8120dfc', part: "summary", class: "details__summary" }, index.h("slot", { key: '7918cfa06d9d6b35d3fd870f56ed271d9c5fc2a8', name: "summary" }, this.summary)), index.h("span", { key: '9121d0b4feff38685330196e4a48910b0278741d', part: "summary-icon", class: {
+            } }, index.h("header", { key: '1be614a46a9bc877348438b591d2da153332c7ae', ref: (el) => (this.header = el), part: "header", id: `${this.componentId}-header`, class: "details__header", role: "button", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": `${this.componentId}-content`, "aria-disabled": this.disabled ? 'true' : 'false', tabIndex: this.disabled ? -1 : 0, onClick: this.handleSummaryClick, onKeyDown: this.handleSummaryKeyDown }, index.h("div", { key: '9734b67556eec1f335043935761a19a11aa831eb', part: "summary", class: "details__summary" }, index.h("slot", { key: '91c5af23a7938f1f199d3c54ddaca3e669f3b80e', name: "summary" }, this.summary)), index.h("span", { key: 'e624c2b720729d51128024eabbc5416033931f36', part: "summary-icon", class: {
                 'details__summary-icon': true,
                 'details__summary-icon--animate': this.animateSummaryIcon,
-            } }, index.h("slot", { key: '933ebb5f0b7a4a0fbf6cba6fb4009ac6305f27c5', name: "summary-icon", onSlotchange: () => (this.animateSummaryIcon = false) }, summaryIcon && index.h("six-icon", { key: '9b16a435526ca7558a323e45d6bcabf242b232b1', size: this.summaryIconSize }, summaryIcon)))), index.h("div", { key: '368f68c2078ebe9b3ae82b1c4023ad40b4b33757', ref: (el) => (this.body = el), class: "details__body", onTransitionEnd: this.handleBodyTransitionEnd }, index.h("div", { key: '278aa0b3496672fd5a4414b990ff77edd1c758f3', part: "content", id: `${this.componentId}-content`, class: "details__content", role: "region", "aria-labelledby": `${this.componentId}-header` }, index.h("slot", { key: 'e5d3ef50d1097cb7ce79ed5fafaa78901f6d1352' })))));
+            } }, index.h("slot", { key: 'cf6e43a08611306c4eee490042630b1a417df109', name: "summary-icon", onSlotchange: () => (this.animateSummaryIcon = false) }, summaryIcon && index.h("six-icon", { key: '6d28327bc4a439706ce71ad64056697f1b4c8448', size: this.summaryIconSize }, summaryIcon)))), index.h("div", { key: '21dc33a99a72f2eb639f35d48e7fa3369eb2d081', ref: (el) => (this.body = el), class: "details__body", onTransitionEnd: this.handleBodyTransitionEnd }, index.h("div", { key: 'c517d961bbc8f7ef4a21a5826b839c2eae98dd13', part: "content", id: `${this.componentId}-content`, class: "details__content", role: "region", "aria-labelledby": `${this.componentId}-header` }, index.h("slot", { key: 'e9e601dc421a3c31976f7ddf5b9bc681bbe6b8c1' })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/six-dialog.cjs.entry.js CHANGED Viewed

@@ -1,9 +1,10 @@
 'use strict';
-var index = require('./index-BKTrCUjx.js');
+var index = require('./index-C8rK7OAe.js');
 var scroll = require('./scroll-BQR9FxnJ.js');
 var slot = require('./slot-DBK7c7jH.js');
 var modal = require('./modal-BVAZIrez.js');
+var animation = require('./animation-ZgWV0fC6.js');
 const sixDialogCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{--width:31rem;display:contents}.dialog{display:flex;align-items:center;justify-content:center;position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--six-z-index-dialog);color:var(--six-color-web-rock-900)}.dialog:not(.dialog--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.dialog__panel{display:flex;flex-direction:column;z-index:2;width:var(--width);max-width:calc(100% - var(--six-spacing-xx-large));max-height:calc(100% - var(--six-spacing-xx-large));background-color:var(--six-panel-background-color);border-radius:var(--six-border-radius-medium);box-shadow:var(--six-shadow-large);opacity:0;transform:scale(0.8);transition:var(--six-transition-medium) opacity, var(--six-transition-medium) transform}.dialog__panel:focus{outline:none}@media screen and (max-width: 420px){.dialog__panel{max-height:80vh}}.dialog--open .dialog__panel{display:flex;opacity:1;transform:none}.dialog__header{flex:0 0 auto;display:flex}.dialog__title{flex:1 1 auto;font-size:var(--six-font-size-x-large);font-weight:var(--six-font-weight-bold);line-height:var(--six-line-height-dense);padding:var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small)}.dialog__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-x-large);padding:0 var(--six-spacing-x-small)}.dialog__body{flex:1 1 auto;padding:var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);overflow:auto;-webkit-overflow-scrolling:touch}.dialog__footer{flex:0 0 auto;text-align:right;padding:var(--six-spacing-large)}.dialog__footer ::slotted(six-button:not(:first-of-type)){margin-left:var(--six-spacing-xx-small)}.dialog:not(.dialog--has-footer) .dialog__footer{display:none}.dialog__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--six-overlay-background-color);opacity:0;transition:var(--six-transition-medium) opacity}.dialog--open .dialog__overlay{opacity:0.8}";
@@ -16,7 +17,7 @@ const SixDialog = class {
         this.sixHide = index.createEvent(this, "six-dialog-hide");
         this.sixAfterHide = index.createEvent(this, "six-dialog-after-hide");
         this.sixInitialFocus = index.createEvent(this, "six-dialog-initial-focus");
-        this.sixOverlayDismiss = index.createEvent(this, "six-dialog-overlay-dismiss");
+        this.sixRequestClose = index.createEvent(this, "six-dialog-request-close");
         this.componentId = `dialog-${++id}`;
         this.willShow = false;
         this.willHide = false;
@@ -35,18 +36,15 @@ const SixDialog = class {
          */
         this.noHeader = false;
         this.handleCloseClick = () => {
-            this.hide();
+            this.preventClose('close-button');
         };
         this.handleKeyDown = (event) => {
             if (event.key === 'Escape') {
-                this.hide();
+                this.preventClose('keyboard');
             }
         };
         this.handleOverlayClick = () => {
-            const sixOverlayDismiss = this.sixOverlayDismiss.emit();
-            if (!sixOverlayDismiss.defaultPrevented) {
-                this.hide();
-            }
+            this.preventClose('overlay');
         };
         this.handleSlotChange = () => {
             this.hasFooter = slot.hasSlot(this.host, 'footer');
@@ -122,13 +120,21 @@ const SixDialog = class {
         this.modal.deactivate();
         scroll.unlockBodyScrolling(this.host);
     }
+    preventClose(source) {
+        const sixRequestClose = this.sixRequestClose.emit({ source });
+        if (sixRequestClose.defaultPrevented && this.panel) {
+            animation.animateTo(this.panel, [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }], { duration: 250 });
+            return;
+        }
+        this.hide();
+    }
     render() {
-        return (index.h("div", { key: '4fb15d0b1b8cb52082d6faadd337f92c51d4a6ba', ref: (el) => (this.dialog = el), part: "base", class: {
+        return (index.h("div", { key: 'b97915d5076bb83782212b61b1f65f694fd84b63', ref: (el) => (this.dialog = el), part: "base", class: {
                 dialog: true,
                 'dialog--open': this.open,
                 'dialog--visible': this.isVisible,
                 'dialog--has-footer': this.hasFooter,
-            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, index.h("div", { key: 'f1f7f2f0c69dda4f3a9fe464aef1880a3ccc8435', part: "overlay", class: "dialog__overlay", onClick: this.handleOverlayClick }), index.h("div", { key: '988baac44c75d2299f55e4dd848155ac535679cc', ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, !this.noHeader && (index.h("header", { key: 'a167200e75358f3b7b778f7475ca437f23a58797', part: "header", class: "dialog__header" }, index.h("span", { key: '3c3edc39e39eb0bda2c745719476278b8db86037', part: "title", class: "dialog__title", id: `${this.componentId}-title` }, index.h("slot", { key: '3cd726aaebef3f72bcfda02cbd98c16c38fd6d6e', name: "label" }, this.label || String.fromCharCode(65279))), index.h("six-icon-button", { key: 'e1110789a7bdb41cef385814d53bbed678aa99e8', exportparts: "base:close-button", class: "dialog__close", name: "close", onClick: this.handleCloseClick }))), index.h("div", { key: '7c0c4a8388d2e6ff53e8dffce614314c327c311d', part: "body", class: "dialog__body" }, index.h("slot", { key: 'ed90c7246c3922ef3ee0cea389879ff52c910120' })), index.h("footer", { key: 'cbc879ecfe209e9be681bbc8d34d2defb1cc6f45', part: "footer", class: "dialog__footer" }, index.h("slot", { key: '0d86102a449cef6ebaaf1c7738fd444e249bbe86', name: "footer", onSlotchange: this.handleSlotChange })))));
+            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, index.h("div", { key: '153379e70061e86842f65f3588329dc9c6d592db', part: "overlay", class: "dialog__overlay", onClick: this.handleOverlayClick }), index.h("div", { key: 'd0b78c413a70eeb6e6cbf75be7829a7d1f2ad715', ref: (el) => (this.panel = el), part: "panel", class: "dialog__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, !this.noHeader && (index.h("header", { key: '94e7d993356ea718e1ed87d4fe9e1d3faf0574f8', part: "header", class: "dialog__header" }, index.h("span", { key: '600591c9266dda80c457f41c54c92a8134d89bb8', part: "title", class: "dialog__title", id: `${this.componentId}-title` }, index.h("slot", { key: '4ad2904648821134ce3851682768b01086a68359', name: "label" }, this.label || String.fromCharCode(65279))), index.h("six-icon-button", { key: '4d793b14b41f7d9c43d5f9949cba6bfe7c6a442c', exportparts: "base:close-button", class: "dialog__close", name: "close", onClick: this.handleCloseClick }))), index.h("div", { key: '729f6cc36802fccf46958b2c259213aa9369fb94', part: "body", class: "dialog__body" }, index.h("slot", { key: 'ba299ae12ba958c705a807639aee911167997b38' })), index.h("footer", { key: '92cb57fa4c4dc066a49dd259832e43be619cc945', part: "footer", class: "dialog__footer" }, index.h("slot", { key: '63ea68abef52d91c04608ad1bf6d508a31012ed9', name: "footer", onSlotchange: this.handleSlotChange })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/six-dialog.cjs.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"six-dialog.entry.cjs.js","mappings":"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","names":["hasSlot","Modal","unlockBodyScrolling","lockBodyScrolling","h"],"sources":["src/components/six-dialog/six-dialog.scss?tag=six-dialog&encapsulation=shadow","src/components/six-dialog/six-dialog.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/*\n @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n /\n:host {\n --width: 31rem;\n\n display: contents;\n}\n\n.dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--six-z-index-dialog);\n color: var(--six-color-web-rock-900);\n\n &:not(.dialog--visible) {\n @include hidden;\n }\n}\n\n.dialog__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - var(--six-spacing-xx-large));\n max-height: calc(100% - var(--six-spacing-xx-large));\n background-color: var(--six-panel-background-color);\n border-radius: var(--six-border-radius-medium);\n box-shadow: var(--six-shadow-large);\n opacity: 0;\n transform: scale(0.8);\n transition:\n var(--six-transition-medium) opacity,\n var(--six-transition-medium) transform;\n\n &:focus {\n outline: none;\n }\n}\n\n// Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone)\n@media screen and (max-width: 420px) {\n .dialog__panel {\n max-height: 80vh;\n }\n}\n\n.dialog--open .dialog__panel {\n display: flex;\n opacity: 1;\n transform: none;\n}\n\n.dialog__header {\n flex: 0 0 auto;\n display: flex;\n}\n\n.dialog__title {\n flex: 1 1 auto;\n font-size: var(--six-font-size-x-large);\n font-weight: var(--six-font-weight-bold);\n line-height: var(--six-line-height-dense);\n padding: var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small);\n}\n\n.dialog__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-x-large);\n padding: 0 var(--six-spacing-x-small);\n}\n\n.dialog__body {\n flex: 1 1 auto;\n padding: var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.dialog__footer {\n flex: 0 0 auto;\n text-align: right;\n padding: var(--six-spacing-large);\n\n ::slotted(six-button:not(:first-of-type)) {\n margin-left: var(--six-spacing-xx-small);\n }\n}\n\n.dialog:not(.dialog--has-footer) .dialog__footer {\n display: none;\n}\n\n.dialog__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--six-overlay-background-color);\n opacity: 0;\n transition: var(--six-transition-medium) opacity;\n}\n\n.dialog--open .dialog__overlay {\n opacity: 0.8;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n \n @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n \n /\n@Component({\n tag: 'six-dialog',\n styleUrl: 'six-dialog.scss',\n shadow: true,\n})\nexport class SixDialog {\n private componentId = `dialog-${++id}`;\n private dialog?: HTMLElement;\n private modal?: Modal;\n private panel?: HTMLElement;\n private willShow = false;\n private willHide = false;\n\n @Element() host!: HTMLSixDialogElement;\n\n @State() hasFooter = false;\n @State() isVisible = false;\n\n /** Indicates whether the dialog is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /\n The dialog's label as displayed in the header. You should always include a relevant label even when using\n * `no-header`, as it is required for proper accessibility.\n /\n @Prop() label = '';\n\n /\n Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n * easy, accessible way for users to dismiss the dialog.\n /\n @Prop() noHeader = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-dialog-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the dialog opens and all transitions are complete. /\n @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-dialog-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the dialog closes and all transitions are complete. /\n @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n * allow you to set it on a different element in the dialog, such as an input or button.\n /\n @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. /\n @Event({ eventName: 'six-dialog-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.modal = new Modal(this.host, {\n onFocusOut: () => this.panel?.focus(),\n });\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n /* Shows the dialog /\n @Method()\n async show() {\n if (this.willShow \|\| this.modal == null \|\| this.panel == null \|\| this.dialog == null) {\n return;\n }\n const panel = this.panel;\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n this.modal.activate();\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n requestAnimationFrame(() => {\n const sixInitialFocus = this.sixInitialFocus.emit();\n if (!sixInitialFocus.defaultPrevented) {\n panel.focus({ preventScroll: true });\n }\n });\n }\n }\n\n /* Hides the dialog /\n @Method()\n async hide() {\n if (this.willHide \|\| this.modal == null) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n\n unlockBodyScrolling(this.host);\n }\n\n private handleCloseClick = () => {\n this.hide();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.hide();\n }\n };\n\n private handleOverlayClick = () => {\n const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n if (!sixOverlayDismiss.defaultPrevented) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n };\n\n render() {\n return (\n <div\n ref={(el) => (this.dialog = el)}\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--visible': this.isVisible,\n 'dialog--has-footer': this.hasFooter,\n }}\n onKeyDown={this.handleKeyDown}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n tabIndex={0}\n >\n {!this.noHeader && (\n <header part=\"header\" class=\"dialog__header\">\n <span part=\"title\" class=\"dialog__title\" id={`${this.componentId}-title`}>\n <slot name=\"label\">\n {/ If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label \|\| String.fromCharCode(65279)}\n </slot>\n </span>\n <six-icon-button\n exportparts=\"base:close-button\"\n class=\"dialog__close\"\n name=\"close\"\n onClick={this.handleCloseClick}\n />\n </header>\n )}\n\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </div>\n </div>\n );\n }\n}\n"],"version":3}
1	+ {"file":"six-dialog.entry.cjs.js","mappings":"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","names":["hasSlot","Modal","unlockBodyScrolling","lockBodyScrolling","animateTo","h"],"sources":["src/components/six-dialog/six-dialog.scss?tag=six-dialog&encapsulation=shadow","src/components/six-dialog/six-dialog.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/*\n @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n /\n:host {\n --width: 31rem;\n\n display: contents;\n}\n\n.dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--six-z-index-dialog);\n color: var(--six-color-web-rock-900);\n\n &:not(.dialog--visible) {\n @include hidden;\n }\n}\n\n.dialog__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - var(--six-spacing-xx-large));\n max-height: calc(100% - var(--six-spacing-xx-large));\n background-color: var(--six-panel-background-color);\n border-radius: var(--six-border-radius-medium);\n box-shadow: var(--six-shadow-large);\n opacity: 0;\n transform: scale(0.8);\n transition:\n var(--six-transition-medium) opacity,\n var(--six-transition-medium) transform;\n\n &:focus {\n outline: none;\n }\n}\n\n// Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone)\n@media screen and (max-width: 420px) {\n .dialog__panel {\n max-height: 80vh;\n }\n}\n\n.dialog--open .dialog__panel {\n display: flex;\n opacity: 1;\n transform: none;\n}\n\n.dialog__header {\n flex: 0 0 auto;\n display: flex;\n}\n\n.dialog__title {\n flex: 1 1 auto;\n font-size: var(--six-font-size-x-large);\n font-weight: var(--six-font-weight-bold);\n line-height: var(--six-line-height-dense);\n padding: var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small);\n}\n\n.dialog__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-x-large);\n padding: 0 var(--six-spacing-x-small);\n}\n\n.dialog__body {\n flex: 1 1 auto;\n padding: var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.dialog__footer {\n flex: 0 0 auto;\n text-align: right;\n padding: var(--six-spacing-large);\n\n ::slotted(six-button:not(:first-of-type)) {\n margin-left: var(--six-spacing-xx-small);\n }\n}\n\n.dialog:not(.dialog--has-footer) .dialog__footer {\n display: none;\n}\n\n.dialog__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--six-overlay-background-color);\n opacity: 0;\n transition: var(--six-transition-medium) opacity;\n}\n\n.dialog--open .dialog__overlay {\n opacity: 0.8;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\nimport { animateTo } from '../../utils/animation';\n\nexport interface SixDialogRequestClose {\n source: 'close-button' \| 'keyboard' \| 'overlay';\n}\n\nlet id = 0;\n\n/\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n \n @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n \n /\n@Component({\n tag: 'six-dialog',\n styleUrl: 'six-dialog.scss',\n shadow: true,\n})\nexport class SixDialog {\n private componentId = `dialog-${++id}`;\n private dialog?: HTMLElement;\n private modal?: Modal;\n private panel?: HTMLElement;\n private willShow = false;\n private willHide = false;\n\n @Element() host!: HTMLSixDialogElement;\n\n @State() hasFooter = false;\n @State() isVisible = false;\n\n /** Indicates whether the dialog is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /\n The dialog's label as displayed in the header. You should always include a relevant label even when using\n * `no-header`, as it is required for proper accessibility.\n /\n @Prop() label = '';\n\n /\n Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n * easy, accessible way for users to dismiss the dialog.\n /\n @Prop() noHeader = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-dialog-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the dialog opens and all transitions are complete. /\n @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-dialog-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the dialog closes and all transitions are complete. /\n @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n * allow you to set it on a different element in the dialog, such as an input or button.\n /\n @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or\n * pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing\n * the drawer will result in destructive behavior such as data loss.\n /\n @Event({ eventName: 'six-dialog-request-close' }) sixRequestClose!: EventEmitter<SixDialogRequestClose>;\n\n connectedCallback() {\n this.modal = new Modal(this.host, {\n onFocusOut: () => this.panel?.focus(),\n });\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n /* Shows the dialog /\n @Method()\n async show() {\n if (this.willShow \|\| this.modal == null \|\| this.panel == null \|\| this.dialog == null) {\n return;\n }\n const panel = this.panel;\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n this.modal.activate();\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n requestAnimationFrame(() => {\n const sixInitialFocus = this.sixInitialFocus.emit();\n if (!sixInitialFocus.defaultPrevented) {\n panel.focus({ preventScroll: true });\n }\n });\n }\n }\n\n /* Hides the dialog /\n @Method()\n async hide() {\n if (this.willHide \|\| this.modal == null) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n\n unlockBodyScrolling(this.host);\n }\n\n private handleCloseClick = () => {\n this.preventClose('close-button');\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.preventClose('keyboard');\n }\n };\n\n private handleOverlayClick = () => {\n this.preventClose('overlay');\n };\n\n private preventClose(source: 'close-button' \| 'keyboard' \| 'overlay') {\n const sixRequestClose = this.sixRequestClose.emit({ source });\n\n if (sixRequestClose.defaultPrevented && this.panel) {\n animateTo(this.panel, [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }], { duration: 250 });\n return;\n }\n\n this.hide();\n }\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n };\n\n render() {\n return (\n <div\n ref={(el) => (this.dialog = el)}\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--visible': this.isVisible,\n 'dialog--has-footer': this.hasFooter,\n }}\n onKeyDown={this.handleKeyDown}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n tabIndex={0}\n >\n {!this.noHeader && (\n <header part=\"header\" class=\"dialog__header\">\n <span part=\"title\" class=\"dialog__title\" id={`${this.componentId}-title`}>\n <slot name=\"label\">\n {/ If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label \|\| String.fromCharCode(65279)}\n </slot>\n </span>\n <six-icon-button\n exportparts=\"base:close-button\"\n class=\"dialog__close\"\n name=\"close\"\n onClick={this.handleCloseClick}\n />\n </header>\n )}\n\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </div>\n </div>\n );\n }\n}\n"],"version":3}

package/dist/cjs/six-dialog.entry.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"six-dialog.entry.cjs.js","sources":["src/components/six-dialog/six-dialog.scss?tag=six-dialog&encapsulation=shadow","src/components/six-dialog/six-dialog.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/*\n @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n /\n:host {\n --width: 31rem;\n\n display: contents;\n}\n\n.dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--six-z-index-dialog);\n color: var(--six-color-web-rock-900);\n\n &:not(.dialog--visible) {\n @include hidden;\n }\n}\n\n.dialog__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - var(--six-spacing-xx-large));\n max-height: calc(100% - var(--six-spacing-xx-large));\n background-color: var(--six-panel-background-color);\n border-radius: var(--six-border-radius-medium);\n box-shadow: var(--six-shadow-large);\n opacity: 0;\n transform: scale(0.8);\n transition:\n var(--six-transition-medium) opacity,\n var(--six-transition-medium) transform;\n\n &:focus {\n outline: none;\n }\n}\n\n// Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone)\n@media screen and (max-width: 420px) {\n .dialog__panel {\n max-height: 80vh;\n }\n}\n\n.dialog--open .dialog__panel {\n display: flex;\n opacity: 1;\n transform: none;\n}\n\n.dialog__header {\n flex: 0 0 auto;\n display: flex;\n}\n\n.dialog__title {\n flex: 1 1 auto;\n font-size: var(--six-font-size-x-large);\n font-weight: var(--six-font-weight-bold);\n line-height: var(--six-line-height-dense);\n padding: var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small);\n}\n\n.dialog__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-x-large);\n padding: 0 var(--six-spacing-x-small);\n}\n\n.dialog__body {\n flex: 1 1 auto;\n padding: var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.dialog__footer {\n flex: 0 0 auto;\n text-align: right;\n padding: var(--six-spacing-large);\n\n ::slotted(six-button:not(:first-of-type)) {\n margin-left: var(--six-spacing-xx-small);\n }\n}\n\n.dialog:not(.dialog--has-footer) .dialog__footer {\n display: none;\n}\n\n.dialog__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--six-overlay-background-color);\n opacity: 0;\n transition: var(--six-transition-medium) opacity;\n}\n\n.dialog--open .dialog__overlay {\n opacity: 0.8;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\n\nlet id = 0;\n\n/\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n \n @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n \n /\n@Component({\n tag: 'six-dialog',\n styleUrl: 'six-dialog.scss',\n shadow: true,\n})\nexport class SixDialog {\n private componentId = `dialog-${++id}`;\n private dialog?: HTMLElement;\n private modal?: Modal;\n private panel?: HTMLElement;\n private willShow = false;\n private willHide = false;\n\n @Element() host!: HTMLSixDialogElement;\n\n @State() hasFooter = false;\n @State() isVisible = false;\n\n /** Indicates whether the dialog is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /\n The dialog's label as displayed in the header. You should always include a relevant label even when using\n * `no-header`, as it is required for proper accessibility.\n /\n @Prop() label = '';\n\n /\n Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n * easy, accessible way for users to dismiss the dialog.\n /\n @Prop() noHeader = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-dialog-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the dialog opens and all transitions are complete. /\n @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-dialog-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the dialog closes and all transitions are complete. /\n @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n * allow you to set it on a different element in the dialog, such as an input or button.\n /\n @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the overlay is clicked. Calling `event.preventDefault()` will prevent the dialog from closing. /\n @Event({ eventName: 'six-dialog-overlay-dismiss' }) sixOverlayDismiss!: EventEmitter<EmptyPayload>;\n\n connectedCallback() {\n this.modal = new Modal(this.host, {\n onFocusOut: () => this.panel?.focus(),\n });\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n /* Shows the dialog /\n @Method()\n async show() {\n if (this.willShow \|\| this.modal == null \|\| this.panel == null \|\| this.dialog == null) {\n return;\n }\n const panel = this.panel;\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n this.modal.activate();\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n requestAnimationFrame(() => {\n const sixInitialFocus = this.sixInitialFocus.emit();\n if (!sixInitialFocus.defaultPrevented) {\n panel.focus({ preventScroll: true });\n }\n });\n }\n }\n\n /* Hides the dialog /\n @Method()\n async hide() {\n if (this.willHide \|\| this.modal == null) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n\n unlockBodyScrolling(this.host);\n }\n\n private handleCloseClick = () => {\n this.hide();\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.hide();\n }\n };\n\n private handleOverlayClick = () => {\n const sixOverlayDismiss = this.sixOverlayDismiss.emit();\n\n if (!sixOverlayDismiss.defaultPrevented) {\n this.hide();\n }\n };\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n };\n\n render() {\n return (\n <div\n ref={(el) => (this.dialog = el)}\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--visible': this.isVisible,\n 'dialog--has-footer': this.hasFooter,\n }}\n onKeyDown={this.handleKeyDown}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n tabIndex={0}\n >\n {!this.noHeader && (\n <header part=\"header\" class=\"dialog__header\">\n <span part=\"title\" class=\"dialog__title\" id={`${this.componentId}-title`}>\n <slot name=\"label\">\n {/ If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label \|\| String.fromCharCode(65279)}\n </slot>\n </span>\n <six-icon-button\n exportparts=\"base:close-button\"\n class=\"dialog__close\"\n name=\"close\"\n onClick={this.handleCloseClick}\n />\n </header>\n )}\n\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </div>\n </div>\n );\n }\n}\n"],"names":["hasSlot","Modal","unlockBodyScrolling","lockBodyScrolling","h"],"mappings":"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"}
1	+ {"version":3,"file":"six-dialog.entry.cjs.js","sources":["src/components/six-dialog/six-dialog.scss?tag=six-dialog&encapsulation=shadow","src/components/six-dialog/six-dialog.tsx"],"sourcesContent":["@import 'src/global/component';\n@import 'src/global/mixins/hidden';\n\n/*\n @prop --width: The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.\n /\n:host {\n --width: 31rem;\n\n display: contents;\n}\n\n.dialog {\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n z-index: var(--six-z-index-dialog);\n color: var(--six-color-web-rock-900);\n\n &:not(.dialog--visible) {\n @include hidden;\n }\n}\n\n.dialog__panel {\n display: flex;\n flex-direction: column;\n z-index: 2;\n width: var(--width);\n max-width: calc(100% - var(--six-spacing-xx-large));\n max-height: calc(100% - var(--six-spacing-xx-large));\n background-color: var(--six-panel-background-color);\n border-radius: var(--six-border-radius-medium);\n box-shadow: var(--six-shadow-large);\n opacity: 0;\n transform: scale(0.8);\n transition:\n var(--six-transition-medium) opacity,\n var(--six-transition-medium) transform;\n\n &:focus {\n outline: none;\n }\n}\n\n// Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone)\n@media screen and (max-width: 420px) {\n .dialog__panel {\n max-height: 80vh;\n }\n}\n\n.dialog--open .dialog__panel {\n display: flex;\n opacity: 1;\n transform: none;\n}\n\n.dialog__header {\n flex: 0 0 auto;\n display: flex;\n}\n\n.dialog__title {\n flex: 1 1 auto;\n font-size: var(--six-font-size-x-large);\n font-weight: var(--six-font-weight-bold);\n line-height: var(--six-line-height-dense);\n padding: var(--six-spacing-large) var(--six-spacing-large) var(--six-spacing-small);\n}\n\n.dialog__close {\n flex: 0 0 auto;\n display: flex;\n align-items: center;\n font-size: var(--six-font-size-x-large);\n padding: 0 var(--six-spacing-x-small);\n}\n\n.dialog__body {\n flex: 1 1 auto;\n padding: var(--six-spacing-small) var(--six-spacing-large) var(--six-spacing-large);\n overflow: auto;\n -webkit-overflow-scrolling: touch;\n}\n\n.dialog__footer {\n flex: 0 0 auto;\n text-align: right;\n padding: var(--six-spacing-large);\n\n ::slotted(six-button:not(:first-of-type)) {\n margin-left: var(--six-spacing-xx-small);\n }\n}\n\n.dialog:not(.dialog--has-footer) .dialog__footer {\n display: none;\n}\n\n.dialog__overlay {\n position: fixed;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: var(--six-overlay-background-color);\n opacity: 0;\n transition: var(--six-transition-medium) opacity;\n}\n\n.dialog--open .dialog__overlay {\n opacity: 0.8;\n}\n","import { Component, Element, Event, EventEmitter, h, Method, Prop, State, Watch } from '@stencil/core';\nimport { lockBodyScrolling, unlockBodyScrolling } from '../../utils/scroll';\nimport { hasSlot } from '../../utils/slot';\nimport Modal from '../../utils/modal';\nimport { EmptyPayload } from '../../utils/types';\nimport { animateTo } from '../../utils/animation';\n\nexport interface SixDialogRequestClose {\n source: 'close-button' \| 'keyboard' \| 'overlay';\n}\n\nlet id = 0;\n\n/\n @since 1.0\n * @status stable\n \n Forked from https://github.com/shoelace-style/shoelace version v2.0.0-beta27.\n \n @slot - The dialog's content.\n * @slot label - The dialog's label. Alternatively, you can use the label prop.\n * @slot footer - The dialog's footer, usually one or more buttons representing various options.\n \n @part base - The component's base wrapper.\n * @part overlay - The overlay.\n * @part panel - The dialog panel (where the dialog and its content is rendered).\n * @part header - The dialog header.\n * @part title - The dialog title.\n * @part close-button - The close button.\n * @part body - The dialog body.\n * @part footer - The dialog footer.\n \n /\n@Component({\n tag: 'six-dialog',\n styleUrl: 'six-dialog.scss',\n shadow: true,\n})\nexport class SixDialog {\n private componentId = `dialog-${++id}`;\n private dialog?: HTMLElement;\n private modal?: Modal;\n private panel?: HTMLElement;\n private willShow = false;\n private willHide = false;\n\n @Element() host!: HTMLSixDialogElement;\n\n @State() hasFooter = false;\n @State() isVisible = false;\n\n /** Indicates whether the dialog is open. You can use this in lieu of the show/hide methods. /\n @Prop({ mutable: true, reflect: true }) open = false;\n\n /\n The dialog's label as displayed in the header. You should always include a relevant label even when using\n * `no-header`, as it is required for proper accessibility.\n /\n @Prop() label = '';\n\n /\n Set to true to disable the header. This will also remove the default close button, so please ensure you provide an\n * easy, accessible way for users to dismiss the dialog.\n /\n @Prop() noHeader = false;\n\n @Watch('open')\n handleOpenChange() {\n this.open ? this.show() : this.hide();\n }\n\n /* Emitted when the dialog opens. Calling `event.preventDefault()` will prevent it from being opened. /\n @Event({ eventName: 'six-dialog-show' }) sixShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the dialog opens and all transitions are complete. /\n @Event({ eventName: 'six-dialog-after-show' }) sixAfterShow!: EventEmitter<EmptyPayload>;\n\n /* Emitted when the dialog closes. Calling `event.preventDefault()` will prevent it from being closed. /\n @Event({ eventName: 'six-dialog-hide' }) sixHide!: EventEmitter<EmptyPayload>;\n\n /* Emitted after the dialog closes and all transitions are complete. /\n @Event({ eventName: 'six-dialog-after-hide' }) sixAfterHide!: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the dialog opens and the panel gains focus. Calling `event.preventDefault()` will prevent focus and\n * allow you to set it on a different element in the dialog, such as an input or button.\n /\n @Event({ eventName: 'six-dialog-initial-focus' }) sixInitialFocus!: EventEmitter<EmptyPayload>;\n\n /\n Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or\n * pressing escape. Calling `event.preventDefault()` will keep the drawer open. Avoid using this unless closing\n * the drawer will result in destructive behavior such as data loss.\n /\n @Event({ eventName: 'six-dialog-request-close' }) sixRequestClose!: EventEmitter<SixDialogRequestClose>;\n\n connectedCallback() {\n this.modal = new Modal(this.host, {\n onFocusOut: () => this.panel?.focus(),\n });\n }\n\n componentWillLoad() {\n this.handleSlotChange();\n }\n\n componentDidLoad() {\n // Show on init if open\n if (this.open) {\n this.show();\n }\n }\n\n disconnectedCallback() {\n unlockBodyScrolling(this.host);\n }\n\n /* Shows the dialog /\n @Method()\n async show() {\n if (this.willShow \|\| this.modal == null \|\| this.panel == null \|\| this.dialog == null) {\n return;\n }\n const panel = this.panel;\n\n const sixShow = this.sixShow.emit();\n if (sixShow.defaultPrevented) {\n this.open = false;\n return;\n }\n\n this.willShow = true;\n this.isVisible = true;\n this.open = true;\n this.modal.activate();\n\n lockBodyScrolling(this.host);\n\n if (this.open) {\n requestAnimationFrame(() => {\n const sixInitialFocus = this.sixInitialFocus.emit();\n if (!sixInitialFocus.defaultPrevented) {\n panel.focus({ preventScroll: true });\n }\n });\n }\n }\n\n /* Hides the dialog /\n @Method()\n async hide() {\n if (this.willHide \|\| this.modal == null) {\n return;\n }\n\n const sixHide = this.sixHide.emit();\n if (sixHide.defaultPrevented) {\n this.open = true;\n return;\n }\n\n this.willHide = true;\n this.open = false;\n this.modal.deactivate();\n\n unlockBodyScrolling(this.host);\n }\n\n private handleCloseClick = () => {\n this.preventClose('close-button');\n };\n\n private handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === 'Escape') {\n this.preventClose('keyboard');\n }\n };\n\n private handleOverlayClick = () => {\n this.preventClose('overlay');\n };\n\n private preventClose(source: 'close-button' \| 'keyboard' \| 'overlay') {\n const sixRequestClose = this.sixRequestClose.emit({ source });\n\n if (sixRequestClose.defaultPrevented && this.panel) {\n animateTo(this.panel, [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }], { duration: 250 });\n return;\n }\n\n this.hide();\n }\n\n private handleSlotChange = () => {\n this.hasFooter = hasSlot(this.host, 'footer');\n };\n\n private handleTransitionEnd = (event: TransitionEvent) => {\n const target = event.target as HTMLElement;\n\n // Ensure we only emit one event when the target element is no longer visible\n if (event.propertyName === 'opacity' && target.classList.contains('dialog__panel')) {\n this.isVisible = this.open;\n this.willShow = false;\n this.willHide = false;\n this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();\n }\n };\n\n render() {\n return (\n <div\n ref={(el) => (this.dialog = el)}\n part=\"base\"\n class={{\n dialog: true,\n 'dialog--open': this.open,\n 'dialog--visible': this.isVisible,\n 'dialog--has-footer': this.hasFooter,\n }}\n onKeyDown={this.handleKeyDown}\n onTransitionEnd={this.handleTransitionEnd}\n >\n <div part=\"overlay\" class=\"dialog__overlay\" onClick={this.handleOverlayClick} />\n\n <div\n ref={(el) => (this.panel = el)}\n part=\"panel\"\n class=\"dialog__panel\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-hidden={this.open ? 'false' : 'true'}\n aria-label={this.noHeader ? this.label : null}\n aria-labelledby={!this.noHeader ? `${this.componentId}-title` : null}\n tabIndex={0}\n >\n {!this.noHeader && (\n <header part=\"header\" class=\"dialog__header\">\n <span part=\"title\" class=\"dialog__title\" id={`${this.componentId}-title`}>\n <slot name=\"label\">\n {/ If there's no label, use an invisible character to prevent the heading from collapsing */}\n {this.label \|\| String.fromCharCode(65279)}\n </slot>\n </span>\n <six-icon-button\n exportparts=\"base:close-button\"\n class=\"dialog__close\"\n name=\"close\"\n onClick={this.handleCloseClick}\n />\n </header>\n )}\n\n <div part=\"body\" class=\"dialog__body\">\n <slot />\n </div>\n\n <footer part=\"footer\" class=\"dialog__footer\">\n <slot name=\"footer\" onSlotchange={this.handleSlotChange} />\n </footer>\n </div>\n </div>\n );\n }\n}\n"],"names":["hasSlot","Modal","unlockBodyScrolling","lockBodyScrolling","animateTo","h"],"mappings":"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"}

package/dist/cjs/six-drawer.cjs.entry.js CHANGED Viewed

@@ -1,9 +1,10 @@
 'use strict';
-var index = require('./index-BKTrCUjx.js');
+var index = require('./index-C8rK7OAe.js');
 var scroll = require('./scroll-BQR9FxnJ.js');
 var slot = require('./slot-DBK7c7jH.js');
 var modal = require('./modal-BVAZIrez.js');
+var animation = require('./animation-ZgWV0fC6.js');
 const sixDrawerCss = ":host{position:relative;box-sizing:border-box}:host *,:host *:before,:host *:after{box-sizing:border-box}.sr-only{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}:host{--size:25rem;display:contents}.drawer{top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.drawer:not(.drawer--visible){position:absolute;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;pointer-events:none;visibility:hidden}.drawer--contained{position:absolute;z-index:initial}.drawer--fixed{position:fixed;z-index:var(--six-z-index-drawer)}.drawer__panel{position:absolute;display:flex;flex-direction:column;z-index:2;max-width:100%;max-height:100%;background-color:var(--six-drawer-background-color);color:var(--six-drawer-color);box-shadow:var(--six-shadow-large);transition:var(--six-transition-medium) transform;overflow:auto;pointer-events:all}.drawer__panel:focus{outline:none}.drawer--top .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:100%;height:var(--size);transform:translate(0, -100%)}.drawer--right .drawer__panel{top:0;right:0;bottom:auto;left:auto;width:var(--size);height:100%;transform:translate(100%, 0)}.drawer--bottom .drawer__panel{top:auto;right:auto;bottom:0;left:0;width:100%;height:var(--size);transform:translate(0, 100%)}.drawer--left .drawer__panel{top:0;right:auto;bottom:auto;left:0;width:var(--size);height:100%;transform:translate(-100%, 0)}.drawer--open .drawer__panel{transform:none}.drawer__header{display:flex}.drawer__title{flex:1 1 auto;font-size:var(--six-font-size-large);line-height:var(--six-line-height-dense);padding:var(--six-spacing-large)}.drawer__close{flex:0 0 auto;display:flex;align-items:center;font-size:var(--six-font-size-x-large);padding:0 var(--six-spacing-large)}.drawer__body{flex:1 1 auto;padding:var(--six-spacing-large);overflow:auto;-webkit-overflow-scrolling:touch}.drawer__footer{text-align:right;padding:var(--six-spacing-large)}.drawer__footer ::slotted(six-button:not(:last-of-type)){margin-right:var(--six-spacing-x-small)}.drawer:not(.drawer--has-footer) .drawer__footer{display:none}.drawer__overlay{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background-color:var(--six-overlay-background-color);opacity:0;transition:var(--six-transition-medium) opacity;pointer-events:all}.drawer--contained .drawer__overlay{position:absolute}.drawer--open .drawer__overlay{opacity:0.4}";
@@ -16,7 +17,7 @@ const SixDrawer = class {
         this.sixHide = index.createEvent(this, "six-drawer-hide");
         this.sixAfterHide = index.createEvent(this, "six-drawer-after-hide");
         this.sixInitialFocus = index.createEvent(this, "six-drawer-initial-focus");
-        this.sixOverlayDismiss = index.createEvent(this, "six-drawer-overlay-dismiss");
+        this.sixRequestClose = index.createEvent(this, "six-drawer-request-close");
         this.componentId = `drawer-${++id}`;
         this.willShow = false;
         this.willHide = false;
@@ -42,18 +43,15 @@ const SixDrawer = class {
          */
         this.noHeader = false;
         this.handleCloseClick = () => {
-            this.hide();
+            this.preventClose('close-button');
         };
         this.handleKeyDown = (event) => {
             if (event.key === 'Escape') {
-                this.hide();
+                this.preventClose('keyboard');
             }
         };
         this.handleOverlayClick = () => {
-            const sixOverlayDismiss = this.sixOverlayDismiss.emit();
-            if (!sixOverlayDismiss.defaultPrevented) {
-                this.hide();
-            }
+            this.preventClose('overlay');
         };
         this.handleSlotChange = () => {
             this.hasFooter = slot.hasSlot(this.host, 'footer');
@@ -131,6 +129,14 @@ const SixDrawer = class {
         this.modal.deactivate();
         scroll.unlockBodyScrolling(this.host);
     }
+    preventClose(source) {
+        const sixRequestClose = this.sixRequestClose.emit({ source });
+        if (sixRequestClose.defaultPrevented && this.panel) {
+            animation.animateTo(this.panel, [{ scale: 1 }, { scale: 1.01 }, { scale: 1 }], { duration: 250 });
+            return;
+        }
+        this.hide();
+    }
     resetTransitionVariables() {
         this.isVisible = this.open;
         this.willShow = false;
@@ -138,7 +144,7 @@ const SixDrawer = class {
         this.open ? this.sixAfterShow.emit() : this.sixAfterHide.emit();
     }
     render() {
-        return (index.h("div", { key: 'f35600ecd84f97b647ab9cc98d56c360f2f03408', ref: (el) => (this.drawer = el), part: "base", class: {
+        return (index.h("div", { key: '17d045e1a06aa424bc59f7316525df73ae031227', ref: (el) => (this.drawer = el), part: "base", class: {
                 drawer: true,
                 'drawer--open': this.open,
                 'drawer--visible': this.isVisible,
@@ -149,7 +155,7 @@ const SixDrawer = class {
                 'drawer--contained': this.contained,
                 'drawer--fixed': !this.contained,
                 'drawer--has-footer': this.hasFooter,
-            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, index.h("div", { key: '178e61c83b4c635041c51c89553ed834f6424cd2', part: "overlay", class: "drawer__overlay", onClick: this.handleOverlayClick, tabIndex: -1 }), index.h("div", { key: '71374a7cae137e002760f3ff5b5ee69ad4ac4675', ref: (el) => (this.panel = el), part: "panel", class: "drawer__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, !this.noHeader && (index.h("header", { key: '3a66c231ad202b211c2df81b74a8a6e937be661b', part: "header", class: "drawer__header" }, index.h("span", { key: '80205d6fccb2510b23473dba6098462221f9d43e', part: "title", class: "drawer__title", id: `${this.componentId}-title` }, index.h("slot", { key: '13d986fb13c2cded9ce9980cf12da1b34de9ef28', name: "label" }, this.label || String.fromCharCode(65279))), index.h("six-icon-button", { key: 'd62b14dc24849d16f1dffbba0f98126fc95de336', exportparts: "base:close-button", class: "drawer__close", name: "close", onClick: this.handleCloseClick }))), index.h("div", { key: 'd0f5b6df5230e996d6b196095589a6629b271fab', part: "body", class: "drawer__body" }, index.h("slot", { key: '6eda0430f1fe27d28a85a6e689fbb9025ee773e7' })), index.h("footer", { key: '8c71f25b2bbb980a7aabee038ea4d7a58f177970', part: "footer", class: "drawer__footer" }, index.h("slot", { key: 'e7dfb09c1cd30deccfd30ce28849e32cdaebe69f', name: "footer", onSlotchange: this.handleSlotChange })))));
+            }, onKeyDown: this.handleKeyDown, onTransitionEnd: this.handleTransitionEnd }, index.h("div", { key: '804fcb75cc49156bfcb6af8958a40c33c20f8202', part: "overlay", class: "drawer__overlay", onClick: this.handleOverlayClick, tabIndex: -1 }), index.h("div", { key: 'e5095b200d370fe98163b3f0fa2bbf42ece7fa5f', ref: (el) => (this.panel = el), part: "panel", class: "drawer__panel", role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? 'false' : 'true', "aria-label": this.noHeader ? this.label : null, "aria-labelledby": !this.noHeader ? `${this.componentId}-title` : null, tabIndex: 0 }, !this.noHeader && (index.h("header", { key: 'c479cfa062277a6f1cf0f7433cff73e94139faea', part: "header", class: "drawer__header" }, index.h("span", { key: '8d60e0eb1cecc9c8f2091b5b8c9aefaa2aac3c91', part: "title", class: "drawer__title", id: `${this.componentId}-title` }, index.h("slot", { key: '26c5fb0feb42c9db7625e98f10cd5cbd0acfd742', name: "label" }, this.label || String.fromCharCode(65279))), index.h("six-icon-button", { key: '454ee7cea511b470ae224c6559ee99f10e9cf095', exportparts: "base:close-button", class: "drawer__close", name: "close", onClick: this.handleCloseClick }))), index.h("div", { key: '4f07be9128e7d2a292298b3e22ec0e5105adc3f3', part: "body", class: "drawer__body" }, index.h("slot", { key: '856a4bd2ee8dacc8b6124d87d8e501a8bd8c3f23' })), index.h("footer", { key: '721ca11e6b5470d2170d9bc929ba2d973faf9117', part: "footer", class: "drawer__footer" }, index.h("slot", { key: 'afb8d35c7fee0fa3e9833ea1b381c2d81f8cb5b0', name: "footer", onSlotchange: this.handleSlotChange })))));
     }
     get host() { return index.getElement(this); }
     static get watchers() { return {