@nanoporetech-digital/components 7.9.2 → 8.0.0-alpha.1

package/dist/components/date-picker.js

@@ -1,10 +1,8 @@
 /*!
- * 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 { f as focusVisible } from './focus-visible.js';
-import { c as createColorClasses } from './theme.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 const ISO_DATE_FORMAT = /^(\d{4})-(\d{2})-(\d{2})/;
@@ -269,7 +267,6 @@ const localization = {
         'Dec',
     ],
 };
-const defaultLocalization = localization;
 
 const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardNavigation, focusedDayRef, inRange, disabled, isSelected, }) => {
     const isToday = isEqual(day, today);
@@ -312,14 +309,13 @@ const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, localization
     return (h("table", { class: "duet-date__table", role: "grid", "aria-labelledby": labelledById, onFocusin: onFocusIn, onMouseDown: onMouseDown },
         h("thead", null,
             h("tr", null, mapWithOffset(localization.dayNames, firstDayOfWeek, (dayName) => (h("th", { class: "duet-date__table-header", scope: "col" },
-                h("span", { "aria-hidden": "true" }, dayName.substr(0, 2)),
+                h("span", { "aria-hidden": "true" }, dayName.substring(0, 2)),
                 h("span", { class: "duet-date__vhidden" }, dayName)))))),
         h("tbody", null, chunk(days, 7).map((week) => (h("tr", { class: "duet-date__row" }, week.map((day) => (h("td", { class: "duet-date__cell", role: "gridcell", "aria-selected": isEqual(day, selectedDate) ? 'true' : undefined },
             h(DatePickerDay, { day: day, today: today, focusedDay: focusedDate, inRange: inRange(day, min, max), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, focusedDayRef: focusedDayRef, disabled: isDateDisabled(day), isSelected: isEqual(day, selectedDate) }))))))))));
 };
 
-const datePickerCss = ":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{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(\n      --nano-color-contrast,\n      var(--nano-color-primary-contrast, #fff)\n    );--focus-shadow:var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)));--inactive-color:var(--nano-button-color, #f0efed);display:block;font-size:16px}:host(.nano-color){--active-color:var(--nano-color-base, var(--nano-color-primary, #007495));--active-text-color:var(--nano-color-contrast);--focus-shadow:0 0 0 0.1875rem rgb(var(--nano-color-tint-rgb)/0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{background:var(--background);min-inline-size:290px;padding-block:16px 20px;padding-inline:16px;position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1;position:relative;text-align:center;vertical-align:middle;z-index:1;transition:0.15s ease all;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:\"\";background:var(--active-color);border-radius:50%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:16px;inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;transition:background-color 300ms ease;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus,.duet-date__next:focus{box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{box-shadow:none}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.5}.duet-date__prev .nano-icon,.duet-date__next .nano-icon{margin-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{box-shadow:var(--focus-shadow)}.duet-date__select-label{align-items:center;border-radius:4px;display:flex;font-size:1.25em;font-weight:600;line-height:1;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:1}.duet-date__select-label .nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}";
-const NanoDatePickerStyle0 = datePickerCss;
+const datePickerCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host{--active-color:var(--nano-color-primary-1000);--active-text-color:var(--nano-color-base-0);--inactive-color:var(--nano-color-neutral-300);display:block;font-size:16px;background:var(--nano-color-neutral-50)}.duet-date *,.duet-date *::before,.duet-date *::after{box-sizing:border-box;margin:0}.duet-date{box-sizing:border-box;color:currentcolor;display:block;margin:0;position:relative;text-align:start;inline-size:100%}.duet-date__dialog{display:flex;inset-block-start:100%;max-inline-size:100%;inline-size:100%}.duet-date__dialog.is-left{inset-inline:auto 0;inline-size:auto}.duet-date__dialog-content{min-inline-size:290px;padding:var(--nano-spacing-md);position:relative;transform:none;max-inline-size:100%;inline-size:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1;text-align:center;inline-size:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1;padding-block-end:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center;padding:0 0 3px}.duet-date__day{appearance:none;background:transparent;border:0;border-radius:50%;cursor:pointer;display:inline-block;font-size:0.875em;font-variant-numeric:tabular-nums;line-height:1;position:relative;text-align:center;vertical-align:middle;z-index:1;block-size:2.5em;inline-size:2.5em}.duet-date__day.is-today{box-shadow:0 0 0 1px var(--active-color);position:relative}.duet-date__day:hover::before,.duet-date__day.is-today::before{content:\"\";background:var(--active-color);border-radius:50%;opacity:0.16;position:absolute;inset:0}[aria-selected=true] .duet-date__day{background:var(--active-color) !important;color:var(--active-text-color);box-shadow:none;outline:0}.duet-date__day:not(.is-disabled):active{background:color-mix(in srgb, var(--active-color), black 20%);color:var(--active-text-color)}.duet-date__day:focus-visible{outline:var(--nano-focus-ring);outline-offset:-1px;z-index:2}.duet-date__day.is-disabled{background:transparent;box-shadow:none;cursor:default;opacity:0.5}.duet-date__day.is-disabled::before{display:none}.duet-date__day.is-outside{background:var(--inactive-color);box-shadow:none;cursor:default;opacity:0.8;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{align-items:center;display:flex;justify-content:space-between;margin-block-end:var(--nano-spacing-md);inline-size:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:inline-flex;justify-content:space-around;margin-inline-start:8px;padding:0;font-size:0.9em;block-size:2.2em;inline-size:2.2em}.duet-date__prev:focus-visible,.duet-date__next:focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.duet-date__prev:active,.duet-date__next:active{background:color-mix(in srgb, var(--inactive-color), black 20%)}.duet-date__prev:disabled,.duet-date__next:disabled{cursor:default;opacity:0.7}.duet-date__prev .nano-icon,.duet-date__next .nano-icon{margin-block:0;margin-inline:auto}.duet-date__select{display:inline-flex;margin-block-start:4px;position:relative}.duet-date__select span{margin-inline-end:4px}.duet-date__select select{cursor:pointer;font-size:1em;block-size:100%;inset-inline-start:0;opacity:0;position:absolute;inset-block-start:0;inline-size:100%;z-index:2}.duet-date__select select:focus-visible:focus+.duet-date__select-label{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.duet-date__select-label{align-items:center;display:flex;font-size:1.25em;font-weight:600;line-height:1;padding-block:0;padding-inline:8px 4px;pointer-events:none;position:relative;inline-size:100%;z-index:1}.duet-date__select-label .nano-icon{font-size:0.55em}.duet-date__vhidden{border:0;clip:rect(1px, 1px, 1px, 1px);block-size:1px;overflow:hidden;padding:0;position:absolute;inset-block-start:0;inline-size:1px}";
 
 function range(from, to) {
     const result = [];
@@ -329,7 +325,7 @@ function range(from, to) {
     return result;
 }
 let dateIds = 0;
-const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTMLElement {
+const NanoDatePicker = /*@__PURE__*/ proxyCustomElement(class NanoDatePicker extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -342,7 +338,6 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
     dialogLabelId = this.dateId + '-' + 'dialog';
     firstFocusableElement;
     monthSelectNode;
-    yearSelectNode;
     focusedDayNode;
     focusTimeoutId;
     initialTouchX = null;
@@ -351,30 +346,38 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
     activeFocus = false;
     focusedDay = new Date();
     // Public Property API
+    _selectedDate = '';
     /** Selected Date. Must be in IS0-8601 format: YYYY-MM-DD. */
-    selectedDate = '';
+    get selectedDate() {
+        return this._selectedDate;
+    }
+    set selectedDate(value) {
+        if (typeof value !== 'string') {
+            this._selectedDate = '';
+            return;
+        }
+        value = value.split('T')[0]; // remove time part if present
+        this._selectedDate = value;
+    }
     /** Minimum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
      * This setting can be used alone or together with the max property. */
     min = '';
     /** Maximum date allowed to be picked. Must be in IS0-8601 format: YYYY-MM-DD.
      * This setting can be used alone or together with the min property. */
     max = '';
-    /** Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.
+    /** Which day is considered first day of the week. `0` for Sunday, `1` for Monday, etc.
      * Default is Monday. */
     firstDayOfWeek = DaysOfWeek.Monday;
     /** Button labels, day names, month names, etc, used for localization.
      * Default is English. */
-    localization = defaultLocalization;
-    /** The color to use from the application's color palette. */
-    color;
+    localization = localization;
     /**
      * Controls which days are disabled and therefore disallowed.
      * For example, this can be used to disallow selection of weekends.
      * @returns `false` for not disabled and `true` for disabled
      */
     isDateDisabled = () => false;
-    /** Controls whether the picker is a modal or dialog,
-     * popup control and will therefore keep focus within the control */
+    /** Controls whether the picker is within a modal control and will therefore keep focus within the control */
     isModal = false;
     /** @internal First focusable element. Relevant for keeping focus within the control */
     firstFocusEle;
@@ -386,7 +389,7 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
      * @param day - focus to the current selected day
      * @param forceFocusVisible - force visible focus - required if opened via keyboad
      */
-    async setFocus(day = false, forceFocusVisible = false) {
+    async setFocus(day = false) {
         this.setFocusedDay(parseISODate(this.selectedDate) || new Date());
         if (day) {
             setTimeout((_) => this.focusedDayNode.focus(), 20);
@@ -394,8 +397,6 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         }
         clearTimeout(this.focusTimeoutId);
         this.focusTimeoutId = setTimeout(() => {
-            if (forceFocusVisible)
-                focusVisible.force(this.monthSelectNode);
             this.monthSelectNode.focus();
         }, 20);
     }
@@ -473,7 +474,10 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
         if (event.key === 'Tab' && !event.shiftKey && this.isModal) {
             event.preventDefault();
             const ele = this.firstFocusEle || this.firstFocusableElement;
-            ele.focus();
+            if (ele['setFocus'])
+                ele.setFocus();
+            else
+                ele.focus();
             return;
         }
         let handled = true;
@@ -552,22 +556,9 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             setTimeout(() => element.focus(), 0);
         }
     };
-    connectedCallback() {
-        if (this.yearSelectNode)
-            focusVisible.observe(this.yearSelectNode);
-        if (this.monthSelectNode)
-            focusVisible.observe(this.monthSelectNode);
-    }
     componentWillLoad() {
         this.handleSelectedDateChange();
     }
-    componentDidLoad() {
-        this.connectedCallback();
-    }
-    disconnectedCallback() {
-        focusVisible.unobserve(this.yearSelectNode);
-        focusVisible.unobserve(this.monthSelectNode);
-    }
     render() {
         const valueAsDate = parseISODate(this.selectedDate);
         const selectedYear = (valueAsDate || this.focusedDay).getFullYear();
@@ -587,26 +578,25 @@ const DatePicker = /*@__PURE__*/ proxyCustomElement(class DatePicker extends HTM
             minYear = minDate.getFullYear();
         if (maxDate)
             maxYear = maxDate.getFullYear();
-        return (h(Host, { key: '126b01f14158329419fb42f1e54a02ce4cfb965c', class: { ...createColorClasses(this.color), 'nano-date-picker': true } }, h("div", { key: 'b1122b2aff25ff4f0f584fb8ba180d7b606e3826', class: "duet-date" }, h("div", { key: '6c7de4fe31e66fb3a87e313292a14f2f95d7ef3f', class: {
+        return (h(Host, { key: '476708135e014efc8662dcfdd6877bfa21ef6f31', class: "nano-date-picker" }, h("div", { key: '4ff36de5c9e6c86fa26638db70514f12fad96262', class: "duet-date" }, h("div", { key: '544a676f3354fc3cd0a6c0f1fd8610d47c5c586b', class: {
                 'duet-date__dialog': true,
                 'is-active': true,
-            }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: 'd0187c54b6c9ef0de0939f3fc722ffe721b862d8', class: "duet-date__dialog-content" }, h("div", { key: 'ee76a378ad52d1ac71258efc15c8723153c6c58e', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: 'a2a2a170ccf1a6ad341086fcd7443aa2626c8591', class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: 'ddd3a3a3623cf5b61dbb2d49ea4454e3ec7bd38b' }, h("h2", { key: '70c4c43daf51201a0e2a568005a79f328230d324', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { key: '8250e3839dfb6c35f9787aff667b2d141de5fdcd', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: 'd4a05e88e2df283665c016554c4adce5d26b44ef', class: "duet-date__select" }, h("select", { key: '69363c3bd0f0ccb700acc5e07d58b21626c8c567', id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
-                element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: 'bda454d4475eec3fe5ae9acc5c8469ecb3d18c05', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'd19ab3a704087c802120ccc3302936c731b7562e' }, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { key: '43a416a07564d92b336f24949e996883bf58d5ee', name: "light/chevron-down" }))), h("label", { key: '70377923f51c50f90e60f67176ff78a33d374ee0', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: '7bf07568e4a9cf4d8be23d4fc3524387a084c2fd', class: "duet-date__select" }, h("select", { key: 'd93e973816afe3104eb3e758d528710dcb75eaf5', id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect, ref: (element) => (this.yearSelectNode = element) }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'a702ec49fb3fae14fc45675cfeadf53ebb640d23', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: '245198b80ab131426457daa425f3bb29178bd5cd' }, this.focusedDay.getFullYear()), h("nano-icon", { key: '61346903f0755ced93ae4298fbf69c5045411c3d', name: "light/chevron-down" })))), h("div", { key: '58fa6c63619b08701a33b8690c6581d5109aeb48', class: "duet-date__nav" }, h("button", { key: 'c1428835b394a76fc15e7f627b0f1cf223a860d8', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { key: '59a1bfa486467fd186afe8484cb6d36f6361ca31', name: "light/chevron-left" }), h("span", { key: '79b059d58381e91fe5fb3eab5f6c0e4e1f76a481', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: '9e3bf89c8ba8660985810339f2a26972b8669c9c', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { key: '93ebf9ceb09fd374f99a4b1081d3a604a366c951', name: "light/chevron-right" }), h("span", { key: 'f9bab89b3c09bc9e53ea4d455881a4e9db64b222', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", { key: 'b0a97a8d3aca05ef9db1a69602779e34ccee7bbe' }, h(DatePickerMonth, { key: 'e2dd247425720b2032e9e7a0a951a936d87dd560', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))))));
+            }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, h("div", { key: '94665c51ab3ee801e6affb6be91076777f329665', class: "duet-date__dialog-content" }, h("div", { key: '3e014e07dd3f43808bdb99fbc79c6f81958328ac', class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), h("div", { key: '6759c71255f8ff0c05a56e118ad628afc7f1af43', class: "duet-date__header", onFocusin: this.disableActiveFocus }, h("div", { key: 'b0688e27b47a95fbb8c051d0680975741547762e' }, h("h2", { key: '1bb4b0035cc07304248c496c55077a88d43d57f5', id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), h("label", { key: 'e740c878525a794eaac04b44c4770edaa5a1d780', htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), h("div", { key: '658b004a5ae3e50070a2683f92c68b924246a4e9', class: "duet-date__select" }, h("select", { key: '3a99660e9c05ca78d5945b4a8dd581f3fcd64fff', id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
+                element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: '6c9f19bbd85e2d6bd16e06b87507599a77f3b8e0', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: '94813adbb53c491d53045106a0e97e68ecc8a257' }, this.localization.monthNamesShort[focusedMonth]), h("nano-icon", { key: 'd6d867b3732097902ac0b537d055ec0eb6dbb11f', name: "light/chevron-down" }))), h("label", { key: 'a77adf78db5d8f2ec2998526c2d5d2882fb01a24', htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), h("div", { key: 'fe5d77c1f3d5cb7bc8ba2befd232b001fcafa8da', class: "duet-date__select" }, h("select", { key: '3585692273f5bdfdb58e1e265bb6b754708cb69a', id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'ce1137c980183ccffc195f83bdc5147de3f8194b', class: "duet-date__select-label", "aria-hidden": "true" }, h("span", { key: 'a5d3e28fdbb1b4192f51da8009cce094558db3c0' }, this.focusedDay.getFullYear()), h("nano-icon", { key: '0958bff2d269607480fb9475f4a58df147885f4b', name: "light/chevron-down" })))), h("div", { key: 'd49585f3b292ba85ed013e52a5a042cb55601937', class: "duet-date__nav" }, h("button", { key: '1f3f492d1965e6416a5fac52db0ecba7864b8df7', class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, h("nano-icon", { key: 'abe59d338029675ad55a5e7faab8170ca2c2af2f', name: "light/chevron-left" }), h("span", { key: '7d59fa5d95085c6d66d93f95c953e9a2f74b8a5f', class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), h("button", { key: 'a895a7b901ca21fa32710c3a187ce263cf105908', class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, h("nano-icon", { key: 'b8737eb28e5ad5873f40523a557745a338aa5277', name: "light/chevron-right" }), h("span", { key: '2c98c7be89ce30939c647f7faea1c531fa0d38a9', class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), h("div", { key: '42284a65a7e2bb5302cd75a61f19a691ea1236bd' }, h(DatePickerMonth, { key: 'd548838275eecb1a2dff47851e9fd57c9f49f691', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, localization: this.localization, firstDayOfWeek: this.firstDayOfWeek, focusedDayRef: this.processFocusedDayNode, min: minDate, max: maxDate, isDateDisabled: this.isDateDisabled })))))));
     }
     static get watchers() { return {
         "selectedDate": ["handleSelectedDateChange"]
     }; }
-    static get style() { return NanoDatePickerStyle0; }
+    static get style() { return datePickerCss; }
 }, [1, "nano-date-picker", {
-        "selectedDate": [1025, "selected-date"],
+        "selectedDate": [7169, "selected-date"],
         "min": [1],
         "max": [1],
         "firstDayOfWeek": [2, "first-day-of-week"],
         "localization": [16],
-        "color": [1],
-        "isDateDisabled": [16],
+        "isDateDisabled": [16, "is-date-disabled"],
         "isModal": [4, "is-modal"],
-        "firstFocusEle": [16],
+        "firstFocusEle": [16, "first-focus-ele"],
         "activeFocus": [32],
         "focusedDay": [32],
         "setFocus": [64]
@@ -621,7 +611,7 @@ function defineCustomElement() {
     components.forEach(tagName => { switch (tagName) {
         case "nano-date-picker":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, DatePicker);
+                customElements.define(tagName, NanoDatePicker);
             }
             break;
         case "nano-icon":
@@ -632,6 +622,4 @@ function defineCustomElement() {
     } });
 }
 
-export { DatePicker as D, printISODate as a, createDate as c, defineCustomElement as d, parseISODate as p };
-
-//# sourceMappingURL=date-picker.js.map
+export { NanoDatePicker as N, printISODate as a, createDate as c, defineCustomElement as d, parseISODate as p };

package/dist/components/details.js

@@ -0,0 +1,201 @@
+/*!
+ * Custom elements for Nanopore-Digital Web applications
+ */
+import { proxyCustomElement, HTMLElement, createEvent, Build, Host } from '@stencil/core/internal/client';
+import { h } from './renderer.js';
+import { H as HasSlotController } from './slot.js';
+import { d as defineCustomElement$1 } from './icon.js';
+
+const detailsCss = ":host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}:host,*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@media (prefers-reduced-motion: reduce){:host,*,*::before,*::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !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:var(--nano-spacing-md);--btn-padding:var(--padding);--btn-bg-color:transparent;--btn-bg-color--hover:var(--nano-color-primary-100);--btn-bg-color--active:var(--nano-color-primary-300);--content-padding:var(--padding);display:block;border:1px solid var(--nano-color-neutral-300);color:var(--nano-color-neutral-1400)}:host([size=small]){--padding:var(--nano-spacing-sm) 0.9375rem}:host([size=large]){--padding:var(--nano-spacing-l)}:host([size=large]) .header{font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-l);line-height:var(--nano-line-height-dense)}:host([disabled]){opacity:0.5}.header{all:unset;cursor:pointer;padding:var(--btn-padding);position:relative;display:flex;flex-wrap:wrap;align-items:center;background:var(--btn-bg-color);color:inherit;font-weight:var(--nano-font-weight-normal);font-size:var(--nano-font-size-medium);line-height:var(--nano-line-height-dense)}.header::-webkit-details-marker{display:none}.header:focus{outline:none}.header:not([aria-disabled=true]):focus-visible{outline:var(--nano-focus-ring);outline-offset:var(--nano-focus-ring-offset)}.header:not([aria-disabled=true]):hover{background:var(--btn-bg-color--hover)}.header:not([aria-disabled=true]):active{background:var(--btn-bg-color--active)}.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:var(--nano-color-primary-1200)}.header .icon .default-icon{rotate:0deg;transform-origin:center;transition:var(--nano-transition-x-fast) ease rotate}:host([open]) .header .icon .default-icon{rotate:180deg}.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),.header .icon::slotted(.nano-icon){color:currentcolor;transition:var(--nano-transition-x-fast) ease rotate;transform-origin:center}.body{display:grid;grid-template-rows:0fr;transition:all var(--nano-transition-fast) ease-out;opacity:0}:host([open]) .body{grid-template-rows:1fr;opacity:1}.content-wrapper{overflow:hidden}.content{padding:var(--content-padding)}";
+
+const NanoDetails = /*@__PURE__*/ proxyCustomElement(class NanoDetails extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.nanoOpen = createEvent(this, "nanoOpen", 7);
+        this.nanoClose = createEvent(this, "nanoClose", 7);
+        this.nanoAfterOpen = createEvent(this, "nanoAfterOpen", 7);
+        this.nanoAfterClose = createEvent(this, "nanoAfterClose", 7);
+    }
+    mo;
+    stateChanging = false;
+    slotCtrl = new HasSlotController(this, 'icon-start', 'icon-end');
+    detailsEl;
+    headerEl;
+    _bodyEl;
+    get bodyEl() {
+        return this._bodyEl;
+    }
+    set bodyEl(el) {
+        if (this.bodyEl && this.bodyEl === this._bodyEl)
+            return;
+        if (this.bodyEl) {
+            this.bodyEl.removeEventListener('transitionend', this.handleTransitionEnd);
+        }
+        el.addEventListener('transitionend', this.handleTransitionEnd);
+        this._bodyEl = el;
+    }
+    /** 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;
+    /** The size of the details. Primarily controls the trigger element and overall padding. */
+    size = 'medium';
+    /**
+     * Emitted when the component opens.
+     * Note: when wrapped in an accordion this event will not propagate. Use `nanoToggle` events instead.
+     */
+    nanoOpen;
+    /**
+     * Emitted when the component closes.
+     * Note: when wrapped in an accordion this event will not propagate. Use `nanoToggle` events instead.
+     */
+    nanoClose;
+    /** Emitted after the details opens and all transitions are complete. */
+    nanoAfterOpen;
+    /** Emitted after the details closes and all transitions are complete. */
+    nanoAfterClose;
+    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':
+            case 'ArrowLeft':
+                e.preventDefault();
+                this.open = false;
+                break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+                e.preventDefault();
+                this.open = true;
+                break;
+        }
+    };
+    onMouseDown = (e) => {
+        e.preventDefault();
+        this.headerEl.focus();
+        if (this.stateChanging || this.disabled)
+            return;
+        this.open = !this.open;
+    };
+    handleTransitionEnd = (e) => {
+        if (e.propertyName !== 'opacity' ||
+            !e.composedPath().find((node) => node === this.bodyEl))
+            return;
+        if (this.open) {
+            this.nanoAfterOpen.emit();
+            requestAnimationFrame(() => (this.stateChanging = false));
+        }
+        else {
+            this.detailsEl.open = false;
+            this.nanoAfterClose.emit();
+            requestAnimationFrame(() => (this.stateChanging = false));
+        }
+    };
+    hide() {
+        const nanoClose = this.nanoClose.emit(this.open);
+        if (nanoClose.defaultPrevented) {
+            this.open = true;
+            this.detailsEl.open = true;
+            return;
+        }
+    }
+    show() {
+        const nanoOpen = this.nanoOpen.emit();
+        this.detailsEl.open = true;
+        if (nanoOpen.defaultPrevented) {
+            this.open = false;
+            this.detailsEl.open = false;
+            return;
+        }
+    }
+    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 });
+    }
+    componentDidLoad() {
+        if (this.open)
+            this.detailsEl.setAttribute('open', 'true');
+        this.attachMo();
+    }
+    connectedCallback() {
+        if (this.bodyEl) {
+            this.bodyEl.addEventListener('transitionend', this.handleTransitionEnd);
+        }
+        this.attachMo();
+    }
+    disconnectedCallback() {
+        if (this.mo) {
+            this.mo.disconnect();
+            this.mo = undefined;
+        }
+        if (this.bodyEl) {
+            this.bodyEl.removeEventListener('transitionend', this.handleTransitionEnd);
+        }
+    }
+    render() {
+        return (h(Host, { key: '6bd0b907e8036bffdc232f11520fc7e7ecbd5274', class: "nano-details" }, h("details", { key: 'a375256a375ffa1c52f7e425328add65396d79ae', part: "base", ref: (d) => (this.detailsEl = d), class: {
+                details: true,
+                disabled: this.disabled,
+            } }, h("summary", { key: '6532629e3d2258dd7b35aa9c088c290cfd586111', part: "header", "aria-controls": "content", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', tabindex: this.disabled ? '-1' : '0', id: "header", role: "button", class: "header", ref: (s) => (this.headerEl = s), onKeyDown: this.onKeyDown, onClick: this.onMouseDown }, this.slotCtrl.has('icon-start') && (h("span", { key: '2a91b1368bfb4120d3356c59a6c277a2608f1ff9', part: "icon icon--start", class: "icon icon--start" }, h("slot", { key: '6ec67523e758f1f189a9c2339e48116f19423a87', name: "icon-start" }))), h("div", { key: '83c975864586f752a86bd13b78ba7a2329f3a484', part: "label", class: "label" }, this.label ? this.label : h("slot", { name: "label" })), h("span", { key: '538494f4cd43b12143151ce1523533efb70800b7', part: "icon icon--end", class: "icon icon--end" }, this.open ? (h("slot", { name: "icon-collapse" })) : (h("slot", { name: "icon-expand" })), h("slot", { key: '9cd7a3d39754029ad70d3b8976545513a7d6f77b', name: "icon-end" }, !this.slotCtrl.has('icon-start') &&
+            !this.slotCtrl.has('icon-end') &&
+            !this.slotCtrl.has('icon-expand') &&
+            !this.slotCtrl.has('icon-collapse') && (h("nano-icon", { key: '0321927f47cbc530e8044598fec3370dfedbb325', class: "default-icon", name: "light/chevron-down" }))))), h("div", { key: 'a7366fb51de087f7c6f5d7da59e761050b2ab231', part: "body", class: "body", ref: (div) => (this.bodyEl = div), role: "region", "aria-labelledby": "header" }, h("div", { key: 'dd888954cdfba45da62a01d10f7b010a0277b7ec', class: "content-wrapper" }, h("div", { key: 'eff6dbb8d4a41d9957d135e2f1e7470e37615255', part: "content", class: "content", id: "content" }, h("slot", { key: '9b2fd79fc46ad9b9c5c7c6a39a856b20b87bca6a' })))))));
+    }
+    static get watchers() { return {
+        "open": ["toggleClick"]
+    }; }
+    static get style() { return detailsCss; }
+}, [1, "nano-details", {
+        "label": [1],
+        "open": [1540],
+        "disabled": [516],
+        "size": [513]
+    }, undefined, {
+        "open": ["toggleClick"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["nano-details", "nano-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "nano-details":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, NanoDetails);
+            }
+            break;
+        case "nano-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { NanoDetails as N, defineCustomElement as d };

package/dist/components/dom.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Build } from '@stencil/core/internal/client';
 
@@ -33,20 +33,20 @@ function getDirectChildren(el, sel, elesOnly = true) {
             return Array.from(el.querySelectorAll(sel));
         }
         catch (e) {
-            console.error(e, 'an error sad');
+            console.error(e, 'an error. sad');
         }
     }
     const ret = [];
     Array.from(el.childNodes).forEach((e) => {
-        if (!!e.matches && e.matches(sel))
+        if (!!e.matches &&
+            e.matches(sel) &&
+            (e.nodeName !== 'SLOT' || elesOnly !== 'slot')) {
             ret.push(e);
-        else if (e.nodeName.toLowerCase() === 'slot') {
-            Array.from(e.assignedNodes()).forEach((slotEl) => {
-                if (slotEl.nodeType === NODE_TYPE.ElementNode &&
-                    slotEl.matches(sel))
-                    ret.push(slotEl);
-                else if (slotEl.nodeType !== NODE_TYPE.ElementNode && !elesOnly)
-                    ret.push(slotEl);
+        }
+        else if (e.nodeName === 'SLOT') {
+            Array.from(e.assignedElements()).forEach((slottedEl) => {
+                if (slottedEl.matches(sel))
+                    ret.push(slottedEl);
             });
         }
         else if (!elesOnly)
@@ -54,15 +54,6 @@ function getDirectChildren(el, sel, elesOnly = true) {
     });
     return ret;
 }
-const getSiblings = (el, sel) => {
-    const siblings = [];
-    let firstChild = el.parentNode.firstElementChild;
-    do {
-        if (!sel || (firstChild !== el && firstChild.matches(sel)))
-            siblings.push(firstChild);
-    } while ((firstChild = firstChild.nextElementSibling));
-    return siblings;
-};
 function getOffset(element, parent) {
     if (!parent || !element)
         return { top: 0, left: 0 };
@@ -73,6 +64,4 @@ function getOffset(element, parent) {
     };
 }
 
-export { getOffset as a, getSiblings as b, closestElement as c, getDirectChildren as g };
-
-//# sourceMappingURL=dom.js.map
+export { getOffset as a, closestElement as c, getDirectChildren as g };

package/dist/components/drag.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 /** Begins listening for dragging. */
 function drag(container, options) {
@@ -68,5 +68,3 @@ function drag(container, options) {
 }
 
 export { drag as d };
-
-//# sourceMappingURL=drag.js.map