@nanoporetech-digital/components 1.13.22 → 1.15.1

package/dist/cjs/nano-date-picker_2.cjs.entry.js

@@ -2,11 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-43791691.js');
+const index = require('./index-f12395b8.js');
 const dateUtils = require('./date-utils-e70699db.js');
 const theme = require('./theme-5d49fd3e.js');
-const popover = require('./popover-eccc07bd.js');
-const utils = require('./utils-e9e37c80.js');
+const focusVisible = require('./focus-visible-5675578e.js');
+const popover = require('./popover-9289f217.js');
+const index$1 = require('./index-e517a673.js');
 const tabbable = require('./tabbable-69807c03.js');
 
 var DaysOfWeek;
@@ -199,7 +200,7 @@ const localization = {
   ],
 };
 
-const datePickerCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--background:var(--nano-layer-bg, #fff);--active-color:var(--nano-color-base, var(--nano-color-primary, #0084a9));--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, #0084a9));--active-text-color:var(--nano-color-contrast);--focus-shadow:0 0 0 0.1875rem rgba(var(--nano-color-tint-rgb), 0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0}.duet-date{-webkit-box-sizing:border-box;box-sizing:border-box;color:currentColor;display:block;margin:0;position:relative;text-align:left;width:100%}.duet-date__dialog{display:-webkit-box;display:-ms-flexbox;display:flex;top:100%;max-width:100%;width:100%}.duet-date__dialog.is-left{left:auto;right:0;width:auto}.duet-date__dialog-content{background:var(--background);min-width:290px;padding:16px 16px 20px;position:relative;-webkit-transform:none;transform:none;max-width:100%;width:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1.25;text-align:center;width:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1.25;padding-bottom:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{-moz-appearance:none;-webkit-appearance:none;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.25;position:relative;text-align:center;vertical-align:middle;z-index:1;-webkit-transition:0.15s ease all;transition:0.15s ease all;height:2.5em;width:2.5em}.duet-date__day.is-today{-webkit-box-shadow:0 0 0 1px var(--active-color);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%;bottom:0;left:0;opacity:0.16;position:absolute;right:0;top:0}[aria-selected=true] .duet-date__day{background:var(--active-color);color:var(--active-text-color);-webkit-box-shadow:none;box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;-webkit-box-shadow:none;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);-webkit-box-shadow:none;box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:16px;width:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);-moz-appearance:none;-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:distribute;justify-content:space-around;margin-left:8px;padding:0;-webkit-transition:background-color 300ms ease;transition:background-color 300ms ease;font-size:0.9em;height:2.2em;width:2.2em}.duet-date__prev:focus,.duet-date__next:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{-webkit-box-shadow:none;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:0 auto}.duet-date__select{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-top:4px;position:relative}.duet-date__select span{margin-right:4px}.duet-date__select select{cursor:pointer;font-size:1em;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.duet-date__select select:focus+.duet-date__select-label{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow)}.duet-date__select-label{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.25em;font-weight:600;line-height:1.25;padding:0 4px 0 8px;pointer-events:none;position:relative;width: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);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}";
+const datePickerCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}: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 rgba(var(--nano-color-tint-rgb), 0.56)}.duet-date *,.duet-date *::before,.duet-date *::after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0}.duet-date{-webkit-box-sizing:border-box;box-sizing:border-box;color:currentColor;display:block;margin:0;position:relative;text-align:left;width:100%}.duet-date__dialog{display:-webkit-box;display:-ms-flexbox;display:flex;top:100%;max-width:100%;width:100%}.duet-date__dialog.is-left{left:auto;right:0;width:auto}.duet-date__dialog-content{background:var(--background);min-width:290px;padding:16px 16px 20px;position:relative;-webkit-transform:none;transform:none;max-width:100%;width:100%}.duet-date__table{border-collapse:collapse;border-spacing:0;font-size:1em;line-height:1.25;text-align:center;width:100%}.duet-date__table-header{font-size:0.75em;font-weight:600;letter-spacing:1px;line-height:1.25;padding-bottom:8px;text-decoration:none;text-transform:uppercase}.duet-date__cell{text-align:center}.duet-date__day{-moz-appearance:none;-webkit-appearance:none;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.25;position:relative;text-align:center;vertical-align:middle;z-index:1;-webkit-transition:0.15s ease all;transition:0.15s ease all;height:2.5em;width:2.5em}.duet-date__day.is-today{-webkit-box-shadow:0 0 0 1px var(--active-color);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%;bottom:0;left:0;opacity:0.16;position:absolute;right:0;top:0}[aria-selected=true] .duet-date__day{background:var(--active-color);color:var(--active-text-color);-webkit-box-shadow:none;box-shadow:none;outline:0}.duet-date__day:active{background:var(--active-color);-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);color:var(--active-text-color)}.duet-date__day:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:0}.duet-date__day.is-disabled{background:transparent;-webkit-box-shadow:none;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);-webkit-box-shadow:none;box-shadow:none;cursor:default;opacity:0.6;pointer-events:none}.duet-date__day.is-outside::before{display:none}.duet-date__header{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:16px;width:100%}.duet-date__nav{white-space:nowrap}.duet-date__prev,.duet-date__next{background:var(--inactive-color);-moz-appearance:none;-webkit-appearance:none;-webkit-box-align:center;-ms-flex-align:center;align-items:center;appearance:none;border:0;border-radius:50%;cursor:pointer;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:distribute;justify-content:space-around;margin-left:8px;padding:0;-webkit-transition:background-color 300ms ease;transition:background-color 300ms ease;font-size:0.9em;height:2.2em;width:2.2em}.duet-date__prev:focus,.duet-date__next:focus{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow);outline:0}.duet-date__prev:active:focus,.duet-date__next:active:focus{-webkit-box-shadow:none;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:0 auto}.duet-date__select{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;margin-top:4px;position:relative}.duet-date__select span{margin-right:4px}@supports ((-webkit-margin-start: 0) or (margin-inline-start: 0)) or (-webkit-margin-start: 0){.duet-date__select span{margin-right:unset;-webkit-margin-end:4px;margin-inline-end:4px}}.duet-date__select select{cursor:pointer;font-size:1em;height:100%;left:0;opacity:0;position:absolute;top:0;width:100%;z-index:2}.duet-date__select select.focus-visible:focus+.duet-date__select-label{-webkit-box-shadow:var(--focus-shadow);box-shadow:var(--focus-shadow)}.duet-date__select-label{-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:1.25em;font-weight:600;line-height:1.25;padding:0 4px 0 8px;pointer-events:none;position:relative;width: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);height:1px;overflow:hidden;padding:0;position:absolute;top:0;width:1px}";
 
 function range(from, to) {
   var result = [];
@@ -208,7 +209,7 @@ function range(from, to) {
   }
   return result;
 }
-let NanoDatePicker = class {
+let DatePicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.nanoDatePicked = index.createEvent(this, "nanoDatePicked", 7);
@@ -355,17 +356,22 @@ let NanoDatePicker = class {
     };
   }
   // Public methods API
-  /** Focus to the calendar. If day set, will focus to the current selected day.
-   * @param day
+  /** Focus to the calendar
+   * @param day - focus to the current selected day
+   * @param forceFocusVisible - force visible focus - required if opened via keyboad
    */
-  async setFocus(day = false) {
+  async setFocus(day = false, forceFocusVisible = false) {
     this.setFocusedDay(dateUtils.parseISODate(this.selectedDate) || new Date());
     if (day) {
       setTimeout((_) => this.focusedDayNode.focus(), 20);
       return;
     }
     clearTimeout(this.focusTimeoutId);
-    this.focusTimeoutId = setTimeout(() => this.monthSelectNode.focus(), 20);
+    this.focusTimeoutId = setTimeout(() => {
+      if (forceFocusVisible)
+        focusVisible.focusVisible.force(this.monthSelectNode);
+      this.monthSelectNode.focus();
+    }, 20);
   }
   handleSelectedDateChange() {
     this.setFocus(true);
@@ -407,9 +413,22 @@ let NanoDatePicker = class {
       valueAsDate: date,
     });
   }
+  connectedCallback() {
+    if (this.yearSelectNode)
+      focusVisible.focusVisible.observe(this.yearSelectNode);
+    if (this.monthSelectNode)
+      focusVisible.focusVisible.observe(this.monthSelectNode);
+  }
   componentWillLoad() {
     this.handleSelectedDateChange();
   }
+  componentDidLoad() {
+    this.connectedCallback();
+  }
+  disconnectedCallback() {
+    focusVisible.focusVisible.unobserve(this.yearSelectNode);
+    focusVisible.focusVisible.unobserve(this.monthSelectNode);
+  }
   render() {
     const valueAsDate = dateUtils.parseISODate(this.selectedDate);
     const selectedYear = (valueAsDate || this.focusedDay).getFullYear();
@@ -433,14 +452,14 @@ let NanoDatePicker = class {
         'duet-date__dialog': true,
         'is-active': true,
       }, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, index.h("div", { class: "duet-date__dialog-content" }, index.h("div", { class: "duet-date__vhidden duet-date__instructions", "aria-live": "polite" }, this.localization.keyboardInstruction), index.h("div", { class: "duet-date__header", onFocusin: this.disableActiveFocus }, index.h("div", null, index.h("h2", { id: this.dialogLabelId, class: "duet-date__vhidden", "aria-live": "polite" }, this.localization.monthNames[focusedMonth], ' ', this.focusedDay.getFullYear()), index.h("label", { htmlFor: this.monthSelectId, class: "duet-date__vhidden" }, this.localization.monthSelectLabel), index.h("div", { class: "duet-date__select" }, index.h("select", { id: this.monthSelectId, class: "duet-date__select--month", ref: (element) => (this.firstFocusableElement = this.monthSelectNode =
-        element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (index.h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !dateUtils.inRange(new Date(focusedYear, i, 1), minDate ? dateUtils.startOfMonth(minDate) : null, maxDate ? dateUtils.endOfMonth(maxDate) : null) }, month)))), index.h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, index.h("span", null, this.localization.monthNamesShort[focusedMonth]), index.h("nano-icon", { name: "light/chevron-down" }))), index.h("label", { htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), index.h("div", { class: "duet-date__select" }, index.h("select", { id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect }, range(minYear, maxYear).map((year) => (index.h("option", { key: year, selected: year === focusedYear }, year)))), index.h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, index.h("span", null, this.focusedDay.getFullYear()), index.h("nano-icon", { name: "light/chevron-down" })))), index.h("div", { class: "duet-date__nav" }, index.h("button", { class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, index.h("nano-icon", { name: "light/chevron-left" }), index.h("span", { class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), index.h("button", { class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, index.h("nano-icon", { name: "light/chevron-right" }), index.h("span", { class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), index.h("div", null, index.h(DatePickerMonth, { 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 })))))));
+        element), onChange: this.handleMonthSelect }, this.localization.monthNames.map((month, i) => (index.h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !dateUtils.inRange(new Date(focusedYear, i, 1), minDate ? dateUtils.startOfMonth(minDate) : null, maxDate ? dateUtils.endOfMonth(maxDate) : null) }, month)))), index.h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, index.h("span", null, this.localization.monthNamesShort[focusedMonth]), index.h("nano-icon", { name: "light/chevron-down" }))), index.h("label", { htmlFor: this.yearSelectId, class: "duet-date__vhidden" }, this.localization.yearSelectLabel), index.h("div", { class: "duet-date__select" }, index.h("select", { id: this.yearSelectId, class: "duet-date__select--year", onChange: this.handleYearSelect, ref: (element) => (this.yearSelectNode = element) }, range(minYear, maxYear).map((year) => (index.h("option", { key: year, selected: year === focusedYear }, year)))), index.h("div", { class: "duet-date__select-label", "aria-hidden": "true" }, index.h("span", null, this.focusedDay.getFullYear()), index.h("nano-icon", { name: "light/chevron-down" })))), index.h("div", { class: "duet-date__nav" }, index.h("button", { class: "duet-date__prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, type: "button" }, index.h("nano-icon", { name: "light/chevron-left" }), index.h("span", { class: "duet-date__vhidden" }, this.localization.prevMonthLabel)), index.h("button", { class: "duet-date__next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, type: "button" }, index.h("nano-icon", { name: "light/chevron-right" }), index.h("span", { class: "duet-date__vhidden" }, this.localization.nextMonthLabel)))), index.h("div", null, index.h(DatePickerMonth, { 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 })))))));
   }
   get host() { return index.getElement(this); }
   static get watchers() { return {
     "selectedDate": ["handleSelectedDateChange"]
   }; }
 };
-NanoDatePicker.style = datePickerCss;
+DatePicker.style = datePickerCss;
 
 const dropdownCss = ":host{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box}:host{--width:auto;--border:var(--nano-layer-border-style, 1px solid var(--nano-layer-border-color, rgba(0, 0, 0, 0.1)));--border-radius:var(--nano-layer-border-radius, var(--nano-border-radius-medium, 4px));--background:var(--nano-layer-bg, #fff);--padding:10px 0;--overflow:hidden;--dropdown-z-index:var(--nano-layer-index-dropdown, 300)}.dropdown{position:relative}.dropdown__trigger{display:block}.dropdown__positioner{position:absolute;z-index:var(--dropdown-z-index)}@media (max-width: 35.9375em){.dropdown__positioner{z-index:100}}.dropdown__panel{padding:var(--padding);background:var(--background);width:var(--width);border:var(--border);border-radius:var(--border-radius);color:currentColor;-webkit-box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);box-shadow:0 2px 8px rgba(0, 0, 0, 0.1);opacity:0;-webkit-transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;transition:0.2s ease opacity, 0.2s ease transform, 0.2s ease min-height;min-height:20px;overflow:var(--overflow);-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.dropdown__panel.top{-webkit-transform:translateY(-20px) translateZ(0);transform:translateY(-20px) translateZ(0)}.dropdown__panel.bottom{-webkit-transform:translateY(20px) translateZ(0);transform:translateY(20px) translateZ(0)}.dropdown__positioner.popover-visible .dropdown__panel{opacity:1;-webkit-transform:translateY(0) translateZ(0);transform:translateY(0) translateZ(0)}.dropdown__panel ::slotted(nano-menu){max-height:50vh}.dropdown__accessible-title{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}";
 
@@ -459,15 +478,20 @@ let Dropdown = class {
     this.autoOpen = true;
     /** Indicates whether or not the dropdown is open. You can use this in lieu of the show/hide methods. */
     this.open = false;
+    /**
+     * Determines whether the dropdown should hide when a menu item is selected.
+     */
+    this.closeOnSelect = true;
+    /**
+     * If you don't want to use the trigger slot, you can use this to 'tether' the dropdown to another element.
+     * And you will still need to control when the component is opened (using show() / hide() or the `open` prop)
+     */
+    this.tetherTo = null;
     /**
      * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
      * inside of the viewport.
      */
     this.placement = 'bottom-start';
-    /**
-     * Determines whether the dropdown should hide when a menu item is selected.
-     */
-    this.closeOnSelect = true;
     /**
      * The distance in pixels from which to offset the panel away from its trigger.
      */
@@ -481,10 +505,11 @@ let Dropdown = class {
      * `overflow: auto|scroll`.
      */
     this.hoist = false;
-    /**
-     * Title used to describe the dropdown content for accessibility
-     */
-    this.dialogTitle = null;
+    this.togglePanel = () => {
+      if (!this.autoOpen)
+        return;
+      this.open ? this.hide() : this.show();
+    };
     this.handleTriggerKeyDown = (event) => {
       // Open the panel when pressing down or up while focused on the trigger
       if (!this.open && ['ArrowDown', 'ArrowUp', ' '].includes(event.key)) {
@@ -496,11 +521,6 @@ let Dropdown = class {
     this.handleTriggerSlotChange = () => {
       this.updateAccessibleTrigger();
     };
-    this.togglePanel = () => {
-      if (!this.autoOpen)
-        return;
-      this.open ? this.hide() : this.show();
-    };
   }
   handleOpenChange() {
     if (!this.ignoreOpenWatcher) {
@@ -508,6 +528,10 @@ let Dropdown = class {
       this.updateAccessibleTrigger();
     }
   }
+  handleTetherToChange() {
+    this.createPopover();
+    this.updateAccessibleTrigger();
+  }
   handlePopoverOptionsChange() {
     this.popover.setOptions({
       strategy: this.hoist ? 'fixed' : 'absolute',
@@ -516,6 +540,7 @@ let Dropdown = class {
       distance: this.distance,
     });
   }
+  // Listeners
   menuFocus(ev) {
     let target = ev.target;
     if (!target ||
@@ -529,7 +554,7 @@ let Dropdown = class {
       return;
     ev.stopPropagation();
     this.panel.classList.add('loading');
-    utils.transitionDone(this.panel).then(() => this.panel.classList.remove('loading'));
+    index$1.transitionDone(this.panel).then(() => this.panel.classList.remove('loading'));
     this.panel.style.minHeight =
       ev.detail.secondaryMenu.scrollHeight + 'px';
   }
@@ -542,38 +567,13 @@ let Dropdown = class {
     this.panel.style.minHeight =
       ev.target.parentElement.scrollHeight + 'px';
   }
-  connectedCallback() {
-    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
-    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
-    this.handlePanelSelect = this.handlePanelSelect.bind(this);
-    if (!this.containingElement)
-      this.containingElement = this.host;
-  }
-  componentDidLoad() {
-    this.popover = new popover.Popover(this.trigger, this.positioner, {
-      strategy: this.hoist ? 'fixed' : 'absolute',
-      placement: this.placement,
-      distance: this.distance,
-      skidding: this.skidding,
-      transitionElement: this.panel,
-      onAfterHide: () => this.nanoAfterHide.emit(),
-      onAfterShow: () => this.nanoAfterShow.emit(),
-      onTransitionEnd: () => {
-        if (!this.open) {
-          this.panel.scrollTop = 0;
-        }
-      },
-    });
-    // Show on init if open
-    if (this.open) {
-      this.show();
-    }
-  }
-  disconnectedCallback() {
-    this.hide();
-    if (this.popover)
-      this.popover.destroy();
+  handlePanelSelect(event) {
+    const target = event.target;
+    // Hide the dropdown when a menu item is selected
+    if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')
+      this.hide();
   }
+  // Methods
   /** Shows the dropdown panel */
   async show() {
     this.ignoreOpenWatcher = true;
@@ -606,9 +606,28 @@ let Dropdown = class {
     document.removeEventListener('keydown', this.handleDocumentKeyDown);
     this.menuFocused = false;
   }
+  // Private methods
   getMenu() {
     return this.host.querySelector('nano-menu');
   }
+  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
+  // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
+  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
+  updateAccessibleTrigger() {
+    let accessibleTrigger;
+    if (!this.tetherTo) {
+      const assignedElements = Array.from(this.host.querySelectorAll('[slot="trigger"]'));
+      accessibleTrigger = assignedElements.map(tabbable.getNearestTabbableElement)[0];
+    }
+    else {
+      accessibleTrigger = this.tetherTo;
+    }
+    if (accessibleTrigger) {
+      accessibleTrigger.setAttribute('aria-haspopup', 'true');
+      accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+    }
+  }
+  // Handlers
   handleDocumentKeyDown(event) {
     // Close when escape is pressed
     if (event.key === 'Escape') {
@@ -649,23 +668,48 @@ let Dropdown = class {
       return;
     }
   }
-  handlePanelSelect(event) {
-    const target = event.target;
-    // Hide the dropdown when a menu item is selected
-    if (this.closeOnSelect && target.tagName.toLowerCase() === 'nano-menu')
-      this.hide();
-  }
-  // Slotted triggers can be arbitrary content, but we need to link them to the dropdown panel with `aria-haspopup` and
-  // `aria-expanded`. These must be applied to the "accessible trigger" (the tabbable portion of the trigger element
-  // that gets slotted in) so screen readers will understand them. The accessible trigger could be the slotted element,
-  updateAccessibleTrigger() {
-    const assignedElements = Array.from(this.host.querySelectorAll('[slot="trigger"]'));
-    const accessibleTrigger = assignedElements.map(tabbable.getNearestTabbableElement)[0];
-    if (accessibleTrigger) {
-      accessibleTrigger.setAttribute('aria-haspopup', 'true');
-      accessibleTrigger.setAttribute('aria-expanded', this.open ? 'true' : 'false');
+  createPopover() {
+    if (this.popover) {
+      if (this.open)
+        this.hide();
+      this.popover.destroy();
+      this.popover = null;
+    }
+    this.popover = new popover.Popover(this.tetherTo || this.trigger, this.positioner, {
+      strategy: this.hoist ? 'fixed' : 'absolute',
+      placement: this.placement,
+      distance: this.distance,
+      skidding: this.skidding,
+      transitionElement: this.panel,
+      onAfterHide: () => this.nanoAfterHide.emit(),
+      onAfterShow: () => this.nanoAfterShow.emit(),
+      onTransitionEnd: () => {
+        if (!this.open) {
+          this.panel.scrollTop = 0;
+        }
+      },
+    });
+    // Show on init if open
+    if (this.open) {
+      this.show();
     }
   }
+  // Stencil hooks
+  connectedCallback() {
+    this.handleDocumentKeyDown = this.handleDocumentKeyDown.bind(this);
+    this.handleDocumentMouseDown = this.handleDocumentMouseDown.bind(this);
+    this.handlePanelSelect = this.handlePanelSelect.bind(this);
+    if (!this.containingElement)
+      this.containingElement = this.host;
+  }
+  componentDidLoad() {
+    this.createPopover();
+  }
+  disconnectedCallback() {
+    this.hide();
+    if (this.popover)
+      this.popover.destroy();
+  }
   render() {
     return (index.h("div", { part: "base", id: this.dropdownId, class: {
         dropdown: true,
@@ -675,6 +719,7 @@ let Dropdown = class {
   get host() { return index.getElement(this); }
   static get watchers() { return {
     "open": ["handleOpenChange"],
+    "tetherTo": ["handleTetherToChange"],
     "placement": ["handlePopoverOptionsChange"],
     "distance": ["handlePopoverOptionsChange"],
     "skidding": ["handlePopoverOptionsChange"],
@@ -684,7 +729,7 @@ let Dropdown = class {
 let dropDownIds = 0;
 Dropdown.style = dropdownCss;
 
-exports.nano_date_picker = NanoDatePicker;
+exports.nano_date_picker = DatePicker;
 exports.nano_dropdown = Dropdown;
 
 //# sourceMappingURL=nano-date-picker_2.cjs.entry.js.map