@nanoporetech-digital/components 7.9.1 → 8.0.0-alpha.0

package/dist/components/nano-datalist.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { D as DataList, d as defineCustomElement$1 } from './datalist.js';
 
@@ -7,5 +7,3 @@ const NanoDatalist = DataList;
 const defineCustomElement = defineCustomElement$1;
 
 export { NanoDatalist, defineCustomElement };
-
-//# sourceMappingURL=nano-datalist.js.map

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

@@ -1,16 +1,17 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { h } from './renderer.js';
-import { p as parseISODate, a as printISODate, c as createDate, d as defineCustomElement$5 } from './date-picker.js';
+import { p as parseISODate, a as printISODate, d as defineCustomElement$7, c as createDate } from './date-picker.js';
 import { c as createColorClasses } from './theme.js';
-import { d as defineCustomElement$4 } from './dropdown.js';
-import { d as defineCustomElement$3 } from './icon.js';
-import { d as defineCustomElement$2 } from './input.js';
+import { d as defineCustomElement$6 } from './dropdown.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './icon-button.js';
+import { d as defineCustomElement$3 } from './input.js';
+import { d as defineCustomElement$2 } from './tooltip.js';
 
-const dateInputCss = ".sc-nano-date-input-h{box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{box-sizing:border-box}*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}.sc-nano-date-input-h{display:inline-block;inline-size:100%;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--open-btn-color:var(--nano-button-color, #f0efed);--open-btn-border:none;--close-btn-color:var(--nano-button-color, #f0efed);--picker-base-size:16px}.nano-color.sc-nano-date-input-h{--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}.nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:flex;flex-direction:column;position:relative}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;padding:0 !important;inline-size:0 !important;inline-size:100%;z-index:var(--nano-layer-index-dropdown, 300) !important}.date-field__close-bar.sc-nano-date-input{align-items:center;display:flex;justify-content:space-between;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto;z-index:1}.date-field__open.sc-nano-date-input{background:var(--open-btn-color);border:var(--open-btn-border);margin:0;appearance:none}.date-field__open.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{align-items:center;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:flex;block-size:24px;justify-content:center;padding:0;inline-size:24px}@media (width >= 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}@media (width >= 36em){.date-field__close.sc-nano-date-input:focus{opacity:1}}.date-field__close.sc-nano-date-input .nano-icon.sc-nano-date-input{margin-block:0;margin-inline:auto}.date-field.sc-nano-date-input .nano-date-picker.sc-nano-date-input{font-size:var(--picker-base-size)}.vhidden.sc-nano-date-input{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";
-const NanoDateInputStyle0 = dateInputCss;
+const dateInputCss = ".sc-nano-date-input-h,*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-date-input-h,*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-date-input-h,*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{box-sizing:border-box}[hidden].sc-nano-date-input{display:none !important}@media (prefers-reduced-motion: reduce){.sc-nano-date-input-h,*.sc-nano-date-input,*.sc-nano-date-input::before,*.sc-nano-date-input::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}.sc-nano-date-input-h{display:inline-block;inline-size:100%;--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--open-btn-color:var(--nano-button-color, #f0efed);--open-btn-border:none;--close-btn-color:var(--nano-button-color, #f0efed);--picker-base-size:16px}.nano-color.sc-nano-date-input-h{--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}.nano-icon.sc-nano-date-input{pointer-events:none}.date-field.sc-nano-date-input{display:flex;flex-direction:column;position:relative}.date-field__dropdown.sc-nano-date-input{--padding:0;--overflow:visible;padding:0 !important;inline-size:0 !important;inline-size:100%;z-index:var(--nano-layer-index-dropdown, 300) !important}.date-field__close-bar.sc-nano-date-input{align-items:center;display:flex;justify-content:space-between;text-overflow:ellipsis;white-space:nowrap;border:0;margin:0;overflow:visible;padding:0;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;inline-size:auto;z-index:1}.date-field__open.sc-nano-date-input{background:var(--open-btn-color);border:var(--open-btn-border);margin:0;appearance:none}.date-field__open.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}.date-field__close.sc-nano-date-input{align-items:center;appearance:none;background:var(--close-btn-color);border:0;border-radius:50%;cursor:pointer;display:flex;block-size:24px;justify-content:center;padding:0;inline-size:24px}@media (width >= 36em){.date-field__close.sc-nano-date-input{opacity:0}}.date-field__close.sc-nano-date-input:focus{box-shadow:var(--focus-shadow);outline:none}@media (width >= 36em){.date-field__close.sc-nano-date-input:focus{opacity:1}}.date-field__close.sc-nano-date-input .nano-icon.sc-nano-date-input{margin-block:0;margin-inline:auto}.date-field.sc-nano-date-input .nano-date-picker.sc-nano-date-input{font-size:var(--picker-base-size)}.vhidden.sc-nano-date-input{clip-path:inset(50%);block-size:1px;overflow:hidden;position:absolute;white-space:nowrap;inline-size:1px}";
 
 const DateRegxps = {
     d: '(\\d{1,2})',
@@ -30,7 +31,6 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
     pickerCloseBtn;
     dropdown;
     input;
-    pickerOpenSource;
     directInput = false;
     dateOrderIndeces = { d: 0, m: 1, y: 3 };
     inputId = `nano-input-${inputIds++}`;
@@ -115,7 +115,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
     /**
      * If `true`, a clear icon will appear in the input when there is a value. Clicking it clears the input.
      */
-    clearInput = false;
+    clearable = false;
     /**
      * String to place within a label element. Alternatively you may use a label slot.
      */
@@ -211,7 +211,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
      */
     picker = true;
     /**
-     * Initial picker date. Will be to `value` if set. Will be today's date if nothing set.
+     * Initial picker date. Defaults to `value` if set and today's date if not.
      * Must be in IS0-8601 format: YYYY-MM-DD.
      */
     initialPickerDate;
@@ -313,23 +313,15 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         setTimeout((_) => (this.pickerOpen = false), 200);
         setTimeout((_) => this.trigger.focus(), 50);
     };
-    onDropdownShow = () => {
-        setTimeout((_) => {
-            this.pickerEle.setFocus(false, this.pickerOpenSource === 'key');
-            this.pickerOpenSource = null;
-        }, 200);
-    };
     onTriggerClick = () => {
         if (!this.pickerOpen) {
             this.pickerOpen = true;
-            this.pickerOpenSource = 'mouse';
         }
     };
     onTriggerKey = (e) => {
         if ([' ', 'Enter'].includes(e.key)) {
             if (!this.pickerOpen) {
                 this.pickerOpen = true;
-                this.pickerOpenSource = 'key';
             }
         }
     };
@@ -398,6 +390,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         return dateStr;
     }
     connectedCallback() {
+        console.warn('nano-date-input is deprecated and will be removed in a future version. Use nano-input with type="date" instead.');
         this.setDatePattern();
         this.handleValueChange();
     }
@@ -420,10 +413,10 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
             this.dropDownConfig.tetherTo = this.trigger;
         const valueDate = parseISODate(this.value);
         const hasHelperSlot = !!this.host.querySelector('[slot="helper"]');
-        return (h(Host, { key: '10cc3a473bcaabed644824018630e99a1dc97285', class: { ...createColorClasses(this.color), 'date-input': true } }, h("div", { key: '16632dc366bed7fff25941bb12ba022b126397e6', class: "date-field" }, h("nano-input", { key: '3e6909fd765bd1ed73231fa8be5a061a8a1e032f', class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearInput: this.clearInput || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric', part: "input" }, h("slot", { key: '14bb7aa556675be2c7b94d1e1dd3ec4a1d9c1b2d', name: "start", slot: "start" }), h("slot", { key: '115fc589b717c7ab2e374d03dc6f4015907b44dd', name: "label", slot: "label" }), h("slot", { key: '2d86afd1e8e25ef60568cdb8b3b9e41793ae0a66', name: "end", slot: "end" }), this.picker && [
-            h("button", { key: '741cf88ae3c4deebb58d815c053e90de4bc53d9d', slot: "end", class: "date-field__open", type: "button", onKeyDown: this.onTriggerKey, onClick: this.onTriggerClick, ref: (trigger) => (this.trigger = trigger), disabled: this.disabled || this.readonly }, h("nano-icon", { key: '1706c0202aacb50e29bd77d6a21896bb0b0b18a6', name: "light/calendar-days" })),
-            h("nano-dropdown", { key: '0a9acac249c9056d89ee07df62059e04fbc5195f', slot: "end", onNanoHide: this.onDropdownHide, onNanoShow: this.onDropdownShow, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown), ...this.dropDownConfig, part: "dropdown" }, h("div", { key: '41d05ebd55994d7cf036ed9ed03e914a53f61142' }, h("div", { key: '86175e0f4ce2278ef73cb203d1ff98a9debaf2fa', class: "date-field__close-bar" }, h("button", { key: '4a2fcac03a395e0debe269477c6af1d070dc17a3', class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, h("nano-icon", { key: 'ff0cdb92aaa76e6a1fb73707034a24266ea63fdf', name: "light/xmark" }), h("span", { key: '63a11831d86b83d38e598d148900da95fc1ef9f6', class: "vhidden" }, "Close window"))), h("nano-date-picker", { key: '870ab0597d916e7a75903cf5e41b3654bc6fa578', isDateDisabled: this.isDateDisabled, onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined, part: "date-picker" }))),
-        ], (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { key: 'bb51d81e5b6a1bba76687a463b43466584ccde09', slot: "helper" }, h("span", { key: '1b9ba5f2b56bb3fab5cbbda97657395eb01668df', class: { vhidden: !!this.value.length } }, h("slot", { key: 'f2cdaf86b02a54d5ef47185802df2787b0ad3fc0', name: "helper" })), this.helperText && !!valueDate && (h("span", { key: 'c90b4d9d6e687f492feeeef14f3a556ccaec2d62' }, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), h("input", { key: '70cf184aa59cb0893ad4acc55554a63a7fa45bcf', type: "hidden", value: this.value, name: this.name }))));
+        return (h(Host, { key: 'e5387f4d921d8ec1dd46a2e80bb68b98c6d050e0', class: { ...createColorClasses(this.color), 'date-input': true } }, h("div", { key: 'ee8bbe0b2c0923cc229e639179d0c7f4819cc665', class: "date-field" }, h("nano-input", { key: '0c2062d026b56c893adba3ecc4ad545408083cd6', class: "date-field__input", slot: "trigger", required: this.required || undefined, showInlineError: this.showInlineError, validateOn: this.validateOn, placeholder: this.placeholder !== 'false' ? this.placeholder : undefined, pattern: this.pattern, label: this.label, disabled: this.disabled || undefined, color: this.color || undefined, autofocus: this.autofocus || undefined, clearable: this.clearable || undefined, onNanoChange: this.onInputChange, onNanoInput: this.onInputKey, onNanoValidate: this.onInputValidate, name: "", form: this.form || undefined, size: this.size || undefined, readonly: this.readonly, value: this.inputValue, ref: (input) => (this.input = input), floatLabel: this.floatLabel, hideLabel: this.hideLabel, inputmode: 'numeric', part: "input" }, h("slot", { key: '2faabea02873035c747b023251aa8ecd38b5eec8', name: "start", slot: "start" }), h("slot", { key: '7459e5f0c001018166fc25b40f0ebf8377d50269', name: "label", slot: "label" }), h("slot", { key: '2657702bbe0bbe221f092631c2f41e7cc296e301', name: "end", slot: "end" }), this.picker && [
+            h("button", { key: 'fa62df397158bb262bf47ae9d3607424f2b65729', slot: "end", class: "date-field__open", type: "button", onKeyDown: this.onTriggerKey, onClick: this.onTriggerClick, ref: (trigger) => (this.trigger = trigger), disabled: this.disabled || this.readonly }, h("nano-icon", { key: '9cb9ea18875aabffda4ffc384a5bee81a5337420', name: "light/calendar-days" })),
+            h("nano-dropdown", { key: 'c813474e3ab6b19d53cb090e72c47ff6e850f739', slot: "end", onNanoHide: this.onDropdownHide, dialogTitle: "Choose a date", class: "date-field__dropdown", ref: (dropdown) => (this.dropdown = dropdown), ...this.dropDownConfig, part: "dropdown" }, h("div", { key: 'ebc1a186d359f6d3b33a94ebf20494cfa2d90bda' }, h("div", { key: '59d1112f354d77f14240ca956ddf09a89940bb45', class: "date-field__close-bar" }, h("button", { key: 'd18615f69c49954bce85c962e99fee6c16e67451', class: "date-field__close", type: "button", onMouseDown: this.onCloseClick, onKeyDown: this.onCloseKeyDown, ref: (pickerClose) => (this.pickerCloseBtn = pickerClose) }, h("nano-icon", { key: 'ece83cc846678beed11e322c9b52afc56b46356f', name: "light/xmark" }), h("span", { key: '60a6b3c6e95972f8307dd7d0f51bfe3d48e4da00', class: "vhidden" }, "Close window"))), h("nano-date-picker", { key: 'c5efd935b37738d00def7234e7bee1a60710ea75', isDateDisabled: this.isDateDisabled, onNanoDatePicked: this.onDatePicked, min: this.min || undefined, max: this.max || undefined, "is-modal": true, ref: (picker) => (this.pickerEle = picker), localization: this.localization, selectedDate: this.value || this.initialPickerDate, firstDayOfWeek: this.firstDayOfWeek, color: this.color || undefined, part: "date-picker" }))),
+        ], (hasHelperSlot || this.helperText || this.showInlineError) && (h("span", { key: 'c2aff5297c406107f98f07d6f3fd65fcbacbefc3', slot: "helper" }, h("span", { key: 'e429219f14b8b68e63682f83864ff8ba694c0ec1', class: { vhidden: !!this.value.length } }, h("slot", { key: '2a2f1fab799e5826dfd41070959a48962d3bc754', name: "helper" })), this.helperText && !!valueDate && (h("span", { key: 'd09144b4ef71b33dcecef9d50cb635e4d336c45d' }, valueDate.toLocaleDateString(this.locale, this.helperTextFormat)))))), h("input", { key: '4d7826a5502e8574fca54bd09192be3980b0a95f', type: "hidden", value: this.value, name: this.name }))));
     }
     static get watchers() { return {
         "value": ["handleValueChange", "testDateValidity"],
@@ -432,12 +425,12 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         "max": ["testDateValidity"],
         "pickerOpen": ["handlePickerOpenChange"]
     }; }
-    static get style() { return NanoDateInputStyle0; }
+    static get style() { return dateInputCss; }
 }, [6, "nano-date-input", {
         "invalid": [2564],
         "validityMessage": [2049, "validity-message"],
         "helperText": [4, "helper-text"],
-        "helperTextFormat": [16],
+        "helperTextFormat": [16, "helper-text-format"],
         "floatLabel": [4, "float-label"],
         "name": [1],
         "readonly": [4],
@@ -448,7 +441,7 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         "disabled": [4],
         "color": [1],
         "autofocus": [4],
-        "clearInput": [4, "clear-input"],
+        "clearable": [4],
         "label": [1],
         "placeholder": [1025],
         "value": [1537],
@@ -463,9 +456,9 @@ const DateInput = /*@__PURE__*/ proxyCustomElement(class DateInput extends HTMLE
         "initialPickerDate": [1, "initial-picker-date"],
         "pickerOpen": [1540, "picker-open"],
         "closeAfterPicked": [4, "close-after-picked"],
-        "dropDownConfig": [6160],
-        "dateValue": [2064],
-        "isDateDisabled": [16],
+        "dropDownConfig": [6160, "drop-down-config"],
+        "dateValue": [2064, "date-value"],
+        "isDateDisabled": [16, "is-date-disabled"],
         "pattern": [32],
         "inputValue": [32],
         "_invalid": [32],
@@ -484,7 +477,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["nano-date-input", "nano-date-picker", "nano-dropdown", "nano-icon", "nano-input"];
+    const components = ["nano-date-input", "nano-date-picker", "nano-dropdown", "nano-icon", "nano-icon-button", "nano-input", "nano-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "nano-date-input":
             if (!customElements.get(tagName)) {
@@ -493,20 +486,30 @@ function defineCustomElement$1() {
             break;
         case "nano-date-picker":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$7();
             }
             break;
         case "nano-dropdown":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$6();
             }
             break;
         case "nano-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$5();
+            }
+            break;
+        case "nano-icon-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
             }
             break;
         case "nano-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "nano-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }
@@ -518,5 +521,3 @@ const NanoDateInput = DateInput;
 const defineCustomElement = defineCustomElement$1;
 
 export { NanoDateInput, defineCustomElement };
-
-//# sourceMappingURL=nano-date-input.js.map

package/dist/components/nano-date-picker.js

@@ -1,11 +1,9 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { D as DatePicker, d as defineCustomElement$1 } from './date-picker.js';
+import { N as NanoDatePicker$1, d as defineCustomElement$1 } from './date-picker.js';
 
-const NanoDatePicker = DatePicker;
+const NanoDatePicker = NanoDatePicker$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { NanoDatePicker, defineCustomElement };
-
-//# sourceMappingURL=nano-date-picker.js.map

package/dist/components/nano-details.js

@@ -1,215 +1,9 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
-import { proxyCustomElement, HTMLElement, createEvent, Build, Host } from '@stencil/core/internal/client';
-import { d as displayTransition } from './transitions.js';
-import { h } from './renderer.js';
+import { N as NanoDetails$1, d as defineCustomElement$1 } from './details.js';
 
-const detailsCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}:host{font-family:inherit;font-size:inherit;font-stretch:inherit;font-style:inherit;font-weight:inherit;letter-spacing:inherit;text-decoration:inherit;text-overflow:inherit;text-transform:inherit;text-align:inherit;white-space:inherit;color:inherit;--padding:1em;--btn-padding:var(--padding);--content-padding:var(--padding);--btn-bg-color:var(--nano-color-contrast, #dad6d3);--btn-bg-color--open:var(--nano-color-base, #dad6d3);--btn-bg-color--hover:var(--nano-color-tint, #f9f9fb);--btn-text-color:var(--nano-color-base, #455556);--btn-text-color--open:var(--nano-color-contrast, var(--btn-text-color));--btn-text-color--hover:var(--nano-color-contrast, var(--btn-text-color));--transition-duration:0.2s;--border-width:none;--border-color:none;--border-style:none;--border-radius:none;--box-shadow:none;--focus-style:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));display:block;border-style:var(--border-style);border-width:var(--border-width-dims);border-color:var(--border-color);border-radius:var(--border-radius-dims);box-shadow:var(--box-shadow)}:host([disabled]){opacity:0.5}:host(:last-of-type){--border-width-dims:0 var(--border-width) var(--border-width);--border-radius-dims:0 0 var(--border-radius) var(--border-radius)}:host(:last-of-type) .open .content{border-radius:0 0 var(--border-radius) var(--border-radius)}:host(:first-of-type){--border-radius-dims:var(--border-radius) var(--border-radius) 0 0;--border-width-dims:var(--border-width)}:host(:first-of-type:last-of-type){--border-radius-dims:var(--border-radius);--border-width-dims:var(--border-width)}:host(:not(:last-of-type):not(:first-of-type)){--border-width-dims:0 var(--border-width) var(--border-width)}.header{block-size:auto;padding:var(--btn-padding);text-align:inherit;position:relative;font-size:1em;line-height:1;margin:0;transition:0.3s ease background, 0.3s ease color, 0.15s ease box-shadow;display:flex;align-items:center;background:var(--btn-bg-color);color:var(--btn-text-color);border-radius:var(--border-radius-dims);cursor:pointer}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:focus-visible{box-shadow:var(--focus-style);outline:none;position:relative;z-index:1}.header:hover{background:var(--btn-bg-color--hover);color:var(--btn-text-color--hover)}.open .header{background:var(--btn-bg-color--open);color:var(--btn-text-color--open);border-end-end-radius:0;border-end-start-radius:0}.disabled .header{cursor:not-allowed}.header .label{inline-size:100%;max-inline-size:100%;max-block-size:100%;flex:1;display:inline-block}.header .icon{line-height:0;flex-direction:column;justify-content:center;display:inline-block;color:currentcolor;transition:0.3s ease transform;transform-origin:center}.header .icon--start{margin-inline:0 var(--btn-padding);margin-block:0}.header .icon--end{margin-inline:var(--btn-padding) 0;margin-block:0}.header .icon ::slotted(.nano-icon){--color:currentcolor}.body{overflow:hidden;transition:height var(--transition-duration, 0.3s) ease-out, 0.2s ease border-radius;outline:none}.is-hidden .body>*{animation:fade 0.1s ease reverse}.open .body>*{animation:fade var(--transition-duration, 0.3s) ease forwards}.content{padding:var(--content-padding)}@keyframes fade{from{opacity:0}to{opacity:1}}";
-const NanoDetailsStyle0 = detailsCss;
-
-const Details = /*@__PURE__*/ proxyCustomElement(class Details extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.nanoOpened = createEvent(this, "nanoOpened", 7);
-        this.nanoClosed = createEvent(this, "nanoClosed", 7);
-        this.nanoAfterOpened = createEvent(this, "nanoAfterOpened", 7);
-        this.nanoAfterClosed = createEvent(this, "nanoAfterClosed", 7);
-    }
-    hasStartSlot;
-    hasEndSlot;
-    mo;
-    stateChanging = false;
-    bodyEl;
-    detailsEl;
-    headerEl;
-    contentEl;
-    cacheHeight;
-    get host() { return this; }
-    /** Summary / handle text. Use the `label` slot for HTML markup */
-    label = '';
-    /** Should item be open on load */
-    open = false;
-    /** Disables the details so it can't be toggled. */
-    disabled = false;
-    /** Hide the handle. (You will need to control the hiding / showing of content with script) */
-    noHandle = false;
-    /** Icon slot rotation amount (degrees) on open */
-    iconRotation = 90;
-    /**
-     * Sometimes, nested content will resize within the details component which results in choppy show/hide animations.
-     * Set `useCacheHeight` to `true` try to keep animations smooth. */
-    useCacheHeight = false;
-    /**
-     * Emitted when the component opens.
-     * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.
-     */
-    nanoOpened;
-    /**
-     * Emitted when the component closes.
-     * Note: when wrapped in an accordion this event will not propogate. Use nanoToggle events instead.
-     */
-    nanoClosed;
-    /** Emitted after the details opens and all transitions are complete. */
-    nanoAfterOpened;
-    /** Emitted after the details closes and all transitions are complete. */
-    nanoAfterClosed;
-    toggleClick() {
-        this.stateChanging = true;
-        if (this.open)
-            this.show();
-        else
-            this.hide();
-    }
-    onKeyDown = (e) => {
-        if (this.stateChanging || this.disabled)
-            return;
-        switch (e.key) {
-            case 'Enter':
-            case ' ':
-                e.preventDefault();
-                this.open = !this.open;
-                break;
-            case 'ArrowUp':
-                e.preventDefault();
-                this.open = false;
-                break;
-            case 'ArrowDown':
-                e.preventDefault();
-                this.open = true;
-                break;
-        }
-    };
-    onMouseDown = (e) => {
-        e.preventDefault();
-        this.headerEl.focus();
-        if (this.stateChanging || this.disabled)
-            return;
-        this.open = !this.open;
-    };
-    hide() {
-        const nanoClose = this.nanoClosed.emit(this.open);
-        if (nanoClose.defaultPrevented) {
-            this.open = true;
-            this.detailsEl.open = true;
-            return;
-        }
-        this.cacheHeight = this.contentEl.scrollHeight;
-        this.bodyEl.style.height = this.cacheHeight + 'px';
-        displayTransition(this.bodyEl, {
-            className: 'is-shown',
-            show: false,
-            transitionProp: ['height'],
-        }).then(() => {
-            this.stateChanging = false;
-            this.detailsEl.open = false;
-            this.bodyEl.classList.add('is-hidden');
-            this.nanoAfterClosed.emit();
-        });
-        // requestAnimationFrame doesn't trigger transitionend event for firefox :/
-        setTimeout(() => {
-            this.bodyEl.style.height = '0px';
-        });
-    }
-    show() {
-        const nanoOpen = this.nanoOpened.emit();
-        this.detailsEl.open = true;
-        if (nanoOpen.defaultPrevented) {
-            this.open = false;
-            this.detailsEl.open = false;
-            return;
-        }
-        displayTransition(this.bodyEl, {
-            className: 'is-shown',
-            show: true,
-            transitionProp: ['height'],
-        }).then(() => {
-            this.stateChanging = false;
-            this.bodyEl.style.height = 'auto';
-            this.nanoAfterOpened.emit();
-        });
-        this.bodyEl.style.height =
-            (this.useCacheHeight && this.cacheHeight
-                ? this.cacheHeight
-                : this.contentEl.scrollHeight) + 'px';
-    }
-    attachMo() {
-        if (this.mo || !this.detailsEl || !Build.isBrowser)
-            return;
-        this.mo = new MutationObserver((changes) => {
-            if (this.stateChanging)
-                return;
-            for (const change of changes) {
-                if (change.type === 'attributes' && change.attributeName === 'open') {
-                    this.open = this.detailsEl.open;
-                }
-            }
-        });
-        this.mo.observe(this.detailsEl, { attributes: true });
-    }
-    componentWillLoad() {
-        this.hasStartSlot = !!this.host.querySelector('[slot="icon-start"]');
-        this.hasEndSlot = !!this.host.querySelector('[slot="icon-end"]');
-    }
-    componentDidLoad() {
-        this.bodyEl.style.height = this.open ? 'auto' : '0';
-        if (this.open)
-            this.detailsEl.setAttribute('open', 'true');
-        this.attachMo();
-    }
-    connectedCallback() {
-        this.attachMo();
-    }
-    disconnectedCallback() {
-        if (this.mo) {
-            this.mo.disconnect();
-            this.mo = undefined;
-        }
-    }
-    render() {
-        return (h(Host, { key: 'ee6fb3abfaf15e07a18d399514e8447d63512ce4', class: "nano-details" }, h("details", { key: '9478907ce6d6e8363c66df27e45e05a22705d38c', part: "base", ref: (d) => (this.detailsEl = d), class: {
-                details: true,
-                open: this.open,
-                disabled: this.disabled,
-            } }, h("summary", { key: '717ed7a624692dfce885436025e45cd011d9af5a', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', style: { display: this.noHandle ? 'none' : '' }, id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.hasStartSlot ? (h("span", { part: "icon--start", class: "icon icon--start", style: {
-                transform: this.open ? `rotate(${this.iconRotation}deg)` : '',
-            } }, h("slot", { name: "icon-start" }))) : (''), h("div", { key: '9ec2fcc2cf8aa386603cf7de1c4f30318df1e4ad', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), this.hasEndSlot ? (h("span", { part: "icon--end", class: "icon icon--end", style: {
-                transform: this.open ? `rotate(${this.iconRotation}deg)` : '',
-            } }, h("slot", { name: "icon-end" }))) : ('')), h("div", { key: '89311fc1194ca178843b5b751c48740b26689eaa', part: "body", class: "body", ref: (div) => (this.bodyEl = div), tabindex: "-1", role: "region", "aria-labelledby": "header" }, h("div", { key: 'b16633bd50819421d9bd6ab4b7e4cd4b2bdfcd61', part: "content", ref: (div) => (this.contentEl = div), class: "content", id: "content" }, h("slot", { key: '4735f3166e91d58152564a4f1b423e77900fd84f' }))))));
-    }
-    static get watchers() { return {
-        "open": ["toggleClick"]
-    }; }
-    static get style() { return NanoDetailsStyle0; }
-}, [1, "nano-details", {
-        "label": [1],
-        "open": [1540],
-        "disabled": [516],
-        "noHandle": [4, "no-handle"],
-        "iconRotation": [2, "icon-rotation"],
-        "useCacheHeight": [4, "use-cache-height"]
-    }, undefined, {
-        "open": ["toggleClick"]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["nano-details"];
-    components.forEach(tagName => { switch (tagName) {
-        case "nano-details":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Details);
-            }
-            break;
-    } });
-}
-
-const NanoDetails = Details;
+const NanoDetails = NanoDetails$1;
 const defineCustomElement = defineCustomElement$1;
 
 export { NanoDetails, defineCustomElement };
-
-//# sourceMappingURL=nano-details.js.map