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

package/dist/collection/components/date-picker/date-picker.css

@@ -1,7 +1,4 @@
-:host {
-  box-sizing: border-box;
-}
-
+:host,
 *,
 *::before,
 *::after {
@@ -10,10 +7,17 @@
 [hidden] {
   display: none !important;
 }
-:host {
-  box-sizing: border-box;
-}
-
+@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 {
@@ -22,31 +26,28 @@
 [hidden] {
   display: none !important;
 }
-:host {
+@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 {
   /**
-   * @prop --background: defaults to var(--nano-layer-bg, #fff)
-   * @prop --active-color: defaults to var(--nano-color-base, nano-color(primary, base))
-   * @prop --active-text-color: defaults to  var(--nano-color-contrast, nano-color(primary, contrast))
-   * @prop --focus-shadow: defaults to  var(--nano-control-focus-shadow, 0 0 0 0.1875rem  var(--nano-control-focus-color, rgba(144, 198, 231, 0.8)))
-   * @prop --inactive-color: defaults to var(--nano-button-color, #f0efed)
+   * @prop --active-color: defaults to var(--nano-color-primary-1000);
+   * @prop --active-text-color: defaults to var(--nano-color-base-0);
+   * @prop --inactive-color: defaults to var(--nano-color-neutral-300);
    */
-  --background: var(--nano-layer-bg, #fff);
-  --active-color: var(--nano-color-base, var(--nano-color-primary, #007495));
-  --active-text-color:
-    var(
-      --nano-color-contrast,
-      var(--nano-color-primary-contrast, #fff)
-    );
-  --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);
+  --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;
-}
-
-: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);
+  background: var(--nano-color-neutral-50);
 }
 
 .duet-date *,
@@ -78,10 +79,8 @@
 }
 
 .duet-date__dialog-content {
-  background: var(--background);
   min-inline-size: 290px;
-  padding-block: 16px 20px;
-  padding-inline: 16px;
+  padding: var(--nano-spacing-md);
   position: relative;
   transform: none;
   max-inline-size: 100%;
@@ -109,6 +108,7 @@
 
 .duet-date__cell {
   text-align: center;
+  padding: 0 0 3px;
 }
 
 .duet-date__day {
@@ -125,7 +125,6 @@
   text-align: center;
   vertical-align: middle;
   z-index: 1;
-  transition: 0.15s ease all;
   block-size: 2.5em;
   inline-size: 2.5em;
 }
@@ -147,14 +146,14 @@
   box-shadow: none;
   outline: 0;
 }
-.duet-date__day:active {
-  background: var(--active-color);
-  box-shadow: var(--focus-shadow);
+.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 {
-  box-shadow: var(--focus-shadow);
-  outline: 0;
+.duet-date__day:focus-visible {
+  outline: var(--nano-focus-ring);
+  outline-offset: -1px;
+  z-index: 2;
 }
 .duet-date__day.is-disabled {
   background: transparent;
@@ -169,7 +168,7 @@
   background: var(--inactive-color);
   box-shadow: none;
   cursor: default;
-  opacity: 0.6;
+  opacity: 0.8;
   pointer-events: none;
 }
 .duet-date__day.is-outside::before {
@@ -180,7 +179,7 @@
   align-items: center;
   display: flex;
   justify-content: space-between;
-  margin-block-end: 16px;
+  margin-block-end: var(--nano-spacing-md);
   inline-size: 100%;
 }
 
@@ -200,24 +199,23 @@
   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:focus-visible,
+.duet-date__next:focus-visible {
+  outline: var(--nano-focus-ring);
+  outline-offset: var(--nano-focus-ring-offset);
 }
-.duet-date__prev:active:focus,
-.duet-date__next:active:focus {
-  box-shadow: none;
+.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.5;
+  opacity: 0.7;
 }
 .duet-date__prev .nano-icon,
 .duet-date__next .nano-icon {
@@ -244,13 +242,13 @@
   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 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;
-  border-radius: 4px;
   display: flex;
   font-size: 1.25em;
   font-weight: 600;

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

@@ -1,11 +1,9 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { Host, } from "@stencil/core";
 import { h } from "../../utils/renderer";
 import { addDays, startOfWeek, endOfWeek, setMonth, setYear, dateClamp, inRange, endOfMonth, startOfMonth, printISODate, parseISODate, DaysOfWeek, } from "../../utils/date-utils";
-import { focusVisible } from "../../utils/focus-visible";
-import { createColorClasses } from "../../utils/theme";
 import defaultLocalization from "./duet-date-picker/date-localization";
 import { DatePickerMonth } from "./duet-date-picker/date-picker-month";
 function range(from, to) {
@@ -17,17 +15,18 @@ function range(from, to) {
 }
 let dateIds = 0;
 /**
- * A highly performant, small and accessible date-picker.
- * Customised from [Duet date-picker](https://duetds.github.io/date-picker/).
+ * Enables the selection of a date from a calendar view.
+ *
+ * @version 1.0.0
+ * @status stable
  */
-export class DatePicker {
+export class NanoDatePicker {
     dateId = `nano-datepicker-${dateIds++}`;
     monthSelectId = this.dateId + '-' + 'month';
     yearSelectId = this.dateId + '-' + 'year';
     dialogLabelId = this.dateId + '-' + 'dialog';
     firstFocusableElement;
     monthSelectNode;
-    yearSelectNode;
     focusedDayNode;
     focusTimeoutId;
     initialTouchX = null;
@@ -36,30 +35,38 @@ export class DatePicker {
     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;
     /**
      * 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;
@@ -71,7 +78,7 @@ export class DatePicker {
      * @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);
@@ -79,8 +86,6 @@ export class DatePicker {
         }
         clearTimeout(this.focusTimeoutId);
         this.focusTimeoutId = setTimeout(() => {
-            if (forceFocusVisible)
-                focusVisible.force(this.monthSelectNode);
             this.monthSelectNode.focus();
         }, 20);
     }
@@ -158,7 +163,10 @@ export class DatePicker {
         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;
@@ -237,22 +245,9 @@ export class DatePicker {
             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();
@@ -272,11 +267,11 @@ export class DatePicker {
             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 is() { return "nano-date-picker"; }
     static get encapsulation() { return "shadow"; }
@@ -294,6 +289,7 @@ export class DatePicker {
         return {
             "selectedDate": {
                 "type": "string",
+                "attribute": "selected-date",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -306,14 +302,14 @@ export class DatePicker {
                     "tags": [],
                     "text": "Selected Date. Must be in IS0-8601 format: YYYY-MM-DD."
                 },
-                "getter": false,
-                "setter": false,
-                "attribute": "selected-date",
+                "getter": true,
+                "setter": true,
                 "reflect": false,
                 "defaultValue": "''"
             },
             "min": {
                 "type": "string",
+                "attribute": "min",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -328,12 +324,12 @@ export class DatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "min",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "max": {
                 "type": "string",
+                "attribute": "max",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -348,12 +344,12 @@ export class DatePicker {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "max",
                 "reflect": false,
                 "defaultValue": "''"
             },
             "firstDayOfWeek": {
                 "type": "number",
+                "attribute": "first-day-of-week",
                 "mutable": false,
                 "complexType": {
                     "original": "DaysOfWeek",
@@ -370,16 +366,16 @@ export class DatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Which day is considered first day of the week? `0` for Sunday, `1` for Monday, etc.\nDefault is Monday."
+                    "text": "Which day is considered first day of the week. `0` for Sunday, `1` for Monday, etc.\nDefault is Monday."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "first-day-of-week",
                 "reflect": false,
                 "defaultValue": "DaysOfWeek.Monday"
             },
             "localization": {
                 "type": "unknown",
+                "attribute": "localization",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLocalizedText",
@@ -402,33 +398,9 @@ export class DatePicker {
                 "setter": false,
                 "defaultValue": "defaultLocalization"
             },
-            "color": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "Color",
-                    "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
-                    "references": {
-                        "Color": {
-                            "location": "import",
-                            "path": "../../types/shared",
-                            "id": "src/types/shared.ts::Color"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "The color to use from the application's color palette."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "color",
-                "reflect": false
-            },
             "isDateDisabled": {
                 "type": "unknown",
+                "attribute": "is-date-disabled",
                 "mutable": false,
                 "complexType": {
                     "original": "DateDisabledPredicate",
@@ -456,6 +428,7 @@ export class DatePicker {
             },
             "isModal": {
                 "type": "boolean",
+                "attribute": "is-modal",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -466,16 +439,16 @@ export class DatePicker {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Controls whether the picker is a modal or dialog,\npopup control and will therefore keep focus within the control"
+                    "text": "Controls whether the picker is within a modal control and will therefore keep focus within the control"
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "is-modal",
                 "reflect": false,
                 "defaultValue": "false"
             },
             "firstFocusEle": {
                 "type": "unknown",
+                "attribute": "first-focus-ele",
                 "mutable": false,
                 "complexType": {
                     "original": "HTMLElement",
@@ -535,15 +508,11 @@ export class DatePicker {
         return {
             "setFocus": {
                 "complexType": {
-                    "signature": "(day?: boolean, forceFocusVisible?: boolean) => Promise<void>",
+                    "signature": "(day?: boolean) => Promise<void>",
                     "parameters": [{
                             "name": "day",
                             "type": "boolean",
                             "docs": "- focus to the current selected day"
-                        }, {
-                            "name": "forceFocusVisible",
-                            "type": "boolean",
-                            "docs": "- force visible focus - required if opened via keyboad"
                         }],
                     "references": {
                         "Promise": {
@@ -574,4 +543,3 @@ export class DatePicker {
             }];
     }
 }
-//# sourceMappingURL=date-picker.js.map

package/dist/collection/components/date-picker/duet-date-picker/date-adapter.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { parseISODate, printISODate, } from "../../../utils/date-utils";
 const isoAdapter = {
@@ -7,4 +7,3 @@ const isoAdapter = {
     format: printISODate,
 };
 export default isoAdapter;
-//# sourceMappingURL=date-adapter.js.map

package/dist/collection/components/date-picker/duet-date-picker/date-localization.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 const localization = {
     buttonLabel: 'Choose date',
@@ -51,4 +51,3 @@ const localization = {
     ],
 };
 export default localization;
-//# sourceMappingURL=date-localization.js.map

package/dist/collection/components/date-picker/duet-date-picker/date-picker-day.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { h } from "../../../utils/renderer";
 import { isEqual } from "../../../utils/date-utils";
@@ -22,4 +22,3 @@ export const DatePickerDay = ({ focusedDay, today, day, onDaySelect, onKeyboardN
             }
         } }, h("span", { "aria-hidden": "true" }, day.getDate()), h("span", { class: "duet-date__vhidden" }, day.toLocaleDateString(undefined, { day: 'numeric', month: 'long' }))));
 };
-//# sourceMappingURL=date-picker-day.js.map

package/dist/collection/components/date-picker/duet-date-picker/date-picker-month.js

@@ -1,5 +1,5 @@
 /*!
- * Web Components for Nanopore digital Web Apps
+ * Custom elements for Nanopore-Digital Web applications
  */
 import { h } from "../../../utils/renderer";
 import { getViewOfMonth, inRange, isEqual, } from "../../../utils/date-utils";
@@ -20,6 +20,5 @@ function mapWithOffset(array, startingOffset, mapFn) {
 export const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, localization, firstDayOfWeek, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onMouseDown, onFocusIn, isDateDisabled, }) => {
     const today = new Date();
     const days = getViewOfMonth(focusedDate, firstDayOfWeek);
-    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", { 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) }))))))))));
+    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.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) }))))))))));
 };
-//# sourceMappingURL=date-picker-month.js.map