@duetds/components 9.2.1 → 9.2.3

package/lib/collection/components/duet-choice-group/duet-choice-group.js

@@ -171,6 +171,8 @@ export class DuetChoiceGroup {
                     "tags": [],
                     "text": "Direction of the choice group."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "direction",
                 "reflect": false,
                 "defaultValue": "\"vertical\""
@@ -195,6 +197,8 @@ export class DuetChoiceGroup {
                     "tags": [],
                     "text": "Controls the margin of the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -219,6 +223,8 @@ export class DuetChoiceGroup {
                     "tags": [],
                     "text": "Theme of the choice group."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -237,6 +243,8 @@ export class DuetChoiceGroup {
                     "tags": [],
                     "text": "Display choice group in error state along with an error message."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "error",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -255,6 +263,8 @@ export class DuetChoiceGroup {
                     "tags": [],
                     "text": "Name for the choice buttons within this group. **This must be unique amongst all other inputs.**"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -272,6 +282,8 @@ export class DuetChoiceGroup {
                     "tags": [],
                     "text": "Legend displayed for the choice buttons in this group."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"Label\""
@@ -290,6 +302,8 @@ export class DuetChoiceGroup {
                     "tags": [],
                     "text": "Visually hide the label, but still show it to screen readers."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label-hidden",
                 "reflect": false,
                 "defaultValue": "false"
@@ -308,6 +322,8 @@ export class DuetChoiceGroup {
                     "tags": [],
                     "text": "Additional caption to show inside the label of the choice group."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "caption",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -326,6 +342,8 @@ export class DuetChoiceGroup {
                     "tags": [],
                     "text": "Tooltip to display next to the label of the choice group."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tooltip",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -350,6 +368,8 @@ export class DuetChoiceGroup {
                     "tags": [],
                     "text": "With direction setting you can force the tooltip to always open towards left\nor right instead of automatically determining the direction."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "tooltip-direction",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -368,6 +388,8 @@ export class DuetChoiceGroup {
                     "tags": [],
                     "text": "Enable or disable the automatic responsive behaviour of the choice group\ncomponent when horizontal setting is used. Setting this option to \"true\"\nmakes sure that contents are stacked vertically on mobile."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "responsive",
                 "reflect": false,
                 "defaultValue": "false"
@@ -392,6 +414,8 @@ export class DuetChoiceGroup {
                     "tags": [],
                     "text": "Switch the breakpoint used to trigger the content stacking. These match to\nsimilar media query tokens eg.: $media-query-small, $media-query-medium."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "breakpoint",
                 "reflect": false,
                 "defaultValue": "\"small\""
@@ -410,6 +434,8 @@ export class DuetChoiceGroup {
                     "tags": [],
                     "text": "The value of the selected choice button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": true
             },
@@ -427,6 +453,8 @@ export class DuetChoiceGroup {
                     "tags": [],
                     "text": "Determines, whether the control is disabled or not."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "disabled",
                 "reflect": false
             },
@@ -444,6 +472,8 @@ export class DuetChoiceGroup {
                     "tags": [],
                     "text": "Sets whether making a choice is required or optional. Will set contained choices to required as well."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "required",
                 "reflect": false,
                 "defaultValue": "false"
@@ -462,6 +492,8 @@ export class DuetChoiceGroup {
                     "tags": [],
                     "text": "The aria-live attribute for the error message. When the input is validated on blur, use \"off\", as using \"polite\" or \"assertive\"\nmakes the screen reader read the error message twice. When the input is validated on submit, use \"polite\", as \"off\" would leave\nthe messages unread by screen readers. Use \"assertive\" only in those rare cases when \"polite\" would leave the error message\nunread by screen readers."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-live-error",
                 "reflect": false,
                 "defaultValue": "\"polite\""

package/lib/collection/components/duet-collapsible/duet-collapsible.js

@@ -147,6 +147,8 @@ export class DuetCollapsible {
                     "tags": [],
                     "text": "Theme of the collapsible."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -165,6 +167,8 @@ export class DuetCollapsible {
                     "tags": [],
                     "text": "Adds accessible label for the collapsible that is only shown for screen readers.\nTypically, this label text replaces the visible text on the button for\nusers who use assistive technology."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false
             },
@@ -182,6 +186,8 @@ export class DuetCollapsible {
                     "tags": [],
                     "text": "The content for the collapsible heading."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "heading",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -200,6 +206,8 @@ export class DuetCollapsible {
                     "tags": [],
                     "text": "Makes collapsible heading full width"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "heading-full-width",
                 "reflect": false,
                 "defaultValue": "false"
@@ -218,6 +226,8 @@ export class DuetCollapsible {
                     "tags": [],
                     "text": "Centers heading inside its container"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "center-heading",
                 "reflect": false,
                 "defaultValue": "false"
@@ -242,6 +252,8 @@ export class DuetCollapsible {
                     "tags": [],
                     "text": "The font weight of the heading"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "heading-weight",
                 "reflect": false,
                 "defaultValue": "\"semibold\""
@@ -266,6 +278,8 @@ export class DuetCollapsible {
                     "tags": [],
                     "text": "Custom headingSize to be used for font size of heading, as a design token entered\nin kebab-case x-small -> font-size-x-small.\nExample:\n# 12px (0.75rem)  ------  +2px   (x-small)\n# 14px (0.875rem) ------  +2px   (small)\n# 16px (1rem)     ------  +2px   (medium)\n# 20px (1.25rem)  ------  +4px   (large)\n# 24px (1.5rem)   ------  +4px   (x-large)\n# 36px (2.25rem)  ------  +12px  (xx-large)\n# 48px (3rem)     ------  +12px  (xxx-large)\n# 72px (4.5rem)   ------  +24px  (xxxx-large)"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "heading-size",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -290,6 +304,8 @@ export class DuetCollapsible {
                     "tags": [],
                     "text": "The actual heading level used for the heading in html markup. This setting\nexists for accessibility reasons. It doesn\u2019t change the style visually.\nonly variations of h1-h6 area accepted"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "heading-level",
                 "reflect": false,
                 "defaultValue": "undefined"
@@ -314,6 +330,8 @@ export class DuetCollapsible {
                     "tags": [],
                     "text": "Controls the margin of the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -332,6 +350,8 @@ export class DuetCollapsible {
                     "tags": [],
                     "text": "Is the component expanded or collapsed."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "open",
                 "reflect": true,
                 "defaultValue": "false"

package/lib/collection/components/duet-combobox/duet-combobox.js

@@ -535,7 +535,7 @@ export class DuetCombobox {
         return (h(Host, { class: {
                 "duet-combobox": true,
                 [`duet-theme-${this.theme}`]: true,
-            } }, h("slot", null), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.input, ref: el => (this.listContainer = el), accessibleRole: "listbox" }, h("div", { class: "combobox-menu-container" }, this.listOpen &&
+            } }, h("slot", null), h("div", null, h("duet-popup-menu", { id: this.listBoxId, controller: this.input, ref: el => (this.listContainer = el), accessibleRole: "listbox", allowVerticalFlip: false }, h("div", { class: "combobox-menu-container" }, this.listOpen &&
             selectElements.map((item, index) => {
                 return (h(DuetComboBoxSelect, { id: this.activeDescendantId, item: item, activeDescendant: index === this.activeItem, selected: this.selectedItems.has(item.id), search: this.inputValue, clickHandler: e => this.onListClick(e, item), label: this.formatLabel(item, index, selectElements.length, this.processedItems.length), isAndroidDevice: this.isAndroidDevice }));
             }), h("duet-spacer", { size: "x-small" }))))));
@@ -574,6 +574,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Defaults for the accessible labels for the select items"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label-defaults",
                 "reflect": false,
                 "defaultValue": "{\n    en: {\n      heading: \"Select:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} filtered\",\n    },\n    fi: {\n      heading: \"Valitse:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} suodatettu\",\n    },\n    sv: {\n      heading: \"V\u00E4lj:\",\n      item: \"{name}\",\n      itemFiltered: \"{name}, {hiddenItems} filtrerade\",\n    },\n  }"
@@ -597,6 +599,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Accessible labels for the select items"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "getLocaleString(\n    this.accessibleLabelDefaults,\n    getLanguage()\n  )"
             },
             "label": {
@@ -613,6 +617,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Label for the input if input is not provided as a slotted element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "label",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -631,6 +637,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Caption for the input if input is not provided as a slotted element."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "caption",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -655,6 +663,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Theme of the combobox."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -673,6 +683,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Force the user to make a selection (typing things in the input field will only be used for list search).\nThis property also sync input value with selected value on blur."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "force",
                 "reflect": false,
                 "defaultValue": "false"
@@ -691,6 +703,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Allow multiple selections. Selections are displayed as DuetChips."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "multiple",
                 "reflect": false,
                 "defaultValue": "false"
@@ -709,6 +723,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Array of item objects. Each item should have properties name, value and optionally id. If id is not provided, it will be generated.\nAlternatively, an array of strings can be provided, in which case the strings will be used for name, value and id."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "items",
                 "reflect": false
             },
@@ -738,6 +754,8 @@ export class DuetCombobox {
                         }],
                     "text": "A hook to overwrite how the values are displayed in the input field after a User select an item"
                 },
+                "getter": false,
+                "setter": false,
                 "defaultValue": "(item: DuetComboboxItem) =>\n    item && item.name ? item.name : \"\""
             },
             "value": {
@@ -754,6 +772,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Value of selected item/s. If multiple is true, value is an array of selected items, else it's a string."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "value",
                 "reflect": false
             },
@@ -771,6 +791,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Defines minimum number of characters that must be given to show search results"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "min-characters",
                 "reflect": false,
                 "defaultValue": "1"
@@ -789,6 +811,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Defines if items list should always open after clicking on input"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "open-list-on-click",
                 "reflect": false,
                 "defaultValue": "false"
@@ -807,6 +831,8 @@ export class DuetCombobox {
                     "tags": [],
                     "text": "Defines if filtering of items should be done by includes or startsWith"
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "filter-type",
                 "reflect": false,
                 "defaultValue": "\"startsWith\""

package/lib/collection/components/duet-contact-card/duet-contact-card.js

@@ -45,10 +45,10 @@ export class DuetContactCard {
     render() {
         const isTurva = this.theme === "turva";
         const theme = isTurva ? "turva" : "default";
-        return (h(Host, { key: '27e103c0c5049f7fab515607764a54b61951c1e0', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: 'c574b5e46c7fa008821587bb36154641b390b903', class: {
+        return (h(Host, { key: '710493f629c7d9cac46f490f0dee228f7242a95c', class: { "duet-m-0": this.margin === "none" } }, h("div", { key: '6ebe03954a2fa70044934971a113f2799d883a61', class: {
                 "duet-contact-card": true,
                 "duet-theme-turva": this.theme === "turva",
-            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: 'ad527316cf8b63feb34bd4dd79f77324b7f48c80' }, this.name && (h("duet-heading", { key: '6774b39b0bbd63f84d262fcf3f2ecad255664ce0', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: 'f8dcb174650b2bc6f9ab36f8995c9e4629cd4cb7', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '73e0f30a03c566d15e338a87506fcf537f8c5cfd', class: "email" }, h("duet-icon", { key: '362a6a97716c3a14aee0aa4f922b46752a512fe0', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '86f261b33c3199a7e02d697417f835d70f3300fa', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: 'fefe6fcb46d1113762849f95e2dcb7c4625d2472', class: "phone" }, h("duet-icon", { key: '55a47952ffee9a4d97c714aa749219bc6d7aa2b8', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '618acf848c98219d2a05233a8f072401a33c5507', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: 'bc881ffff92c8433241d886ebd054090356ffece', class: "call-to-action" }, h("duet-button", { key: '8147b7ed59d0c12d235059e6a1d1ec7551f1e184', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '1d06de992fe79882232166faca835f6468ce796f' }), h("slot", { key: 'ade5d1b926723e45fc1ff45faeef9fa14bd5af56' }))));
+            }, role: "group", "aria-label": this.name }, this.image ? h("img", { class: "image", src: this.image, alt: this.name }) : h("div", null), h("div", { key: '38bd574fe717f2d7b57c74cde6d5ac57f148b23c' }, this.name && (h("duet-heading", { key: '72ef2682da855b8cb86c2537843b864121b1529b', class: "name", level: "h3", margin: "none", theme: theme }, this.name)), this.description && (h("duet-paragraph", { key: 'b657102818b5864f82ddc9de07ff4c910024e46f', class: "description", margin: "none", theme: theme }, this.description)), this.email && (h("div", { key: '310a665ff9dad389ea89c74bcda6b5b637513eca', class: "email" }, h("duet-icon", { key: '0d15be99d190d285cead78ef5a1356ce88802e21', name: "navigation-message", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '67e957450d29245d930ca9b8366cdc421c95b5a0', url: `mailto:${this.email}`, accessibleLabel: `Email: ${this.email}`, theme: theme }, this.email))), this.phone && (h("div", { key: '3c7f8dbef0143be61c6da4e5c5aaf50036a5a795', class: "phone" }, h("duet-icon", { key: '107635e97ef8980ce1f9d91cc7c0a20132967d50', name: "form-tel", size: "x-small", color: "primary-dark", margin: "none", theme: theme }), h("duet-link", { key: '30993d3b47125ecd85527fd664596deb5b1e6c55', url: `tel:${this.phone}`, accessibleLabel: `${this.phoneLabel[this.language]}: ${this.phone}`, theme: theme }, this.phone)))), this.buttonUrl && this.buttonText && (h("div", { key: '08e0710a040f7775d7a8b2c61b5e803212b1a344', class: "call-to-action" }, h("duet-button", { key: '33b3f9f83c8b98df670211fa786bc91e1daeb33f', variation: "default", icon: this.buttonIcon, fixed: true, margin: "none", url: this.buttonUrl, theme: theme }, this.buttonText))), h("div", { key: '6bd3ab22e2e630bc6de6fd7f841f2b0fd658cc95' }), h("slot", { key: 'ddcf2048393c89dbc94c29254ee703829cdc08a2' }))));
     }
     static get is() { return "duet-contact-card"; }
     static get encapsulation() { return "shadow"; }
@@ -84,6 +84,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Theme."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
@@ -108,6 +110,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Controls the margin of the component."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "margin",
                 "reflect": false,
                 "defaultValue": "\"auto\""
@@ -126,6 +130,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Image."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "image",
                 "reflect": false
             },
@@ -143,6 +149,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Name."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "name",
                 "reflect": false
             },
@@ -160,6 +168,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Description."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "description",
                 "reflect": false
             },
@@ -177,6 +187,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Email."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "email",
                 "reflect": false
             },
@@ -194,6 +206,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Phone."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "phone",
                 "reflect": false
             },
@@ -211,6 +225,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Button text."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-text",
                 "reflect": false
             },
@@ -234,6 +250,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Button icon."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-icon",
                 "reflect": false,
                 "defaultValue": "\"form-date\""
@@ -252,6 +270,8 @@ export class DuetContactCard {
                     "tags": [],
                     "text": "Button url."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "button-url",
                 "reflect": false
             }

package/lib/collection/components/duet-cookie-consent/duet-cookie-consent.js

@@ -70,6 +70,8 @@ export class DuetCookieConsent {
                     "tags": [],
                     "text": "Adds accessible label for the cookie consent ok button."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "accessible-label",
                 "reflect": false,
                 "defaultValue": "\"Hyv\u00E4ksyn ev\u00E4steiden k\u00E4yt\u00F6n\""
@@ -94,6 +96,8 @@ export class DuetCookieConsent {
                     "tags": [],
                     "text": "Theme of the cookie consent banner."
                 },
+                "getter": false,
+                "setter": false,
                 "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""

package/lib/collection/components/duet-date-picker/date-i18n.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-const formatOptionsShort = { day: "numeric", month: "long" };
+const formatOptionsShort = { day: "numeric", month: "long", weekday: "long" };
 const formatOptionsLong = { day: "numeric", month: "long", year: "numeric" };
 const i18n = {
     fi: {

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

@@ -3,7 +3,7 @@
  */
 import { h } from "@stencil/core";
 import i18n from "./date-i18n";
-import { isEqual } from "./date-utils";
+import { isEqual, printISODate } from "./date-utils";
 export const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, onKeyboardNavigation, ref, inRange, isSelected, }) => {
     const isToday = isEqual(day, today);
     const isFocused = isEqual(day, focusedDay);
@@ -13,5 +13,5 @@ export const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, o
     function handleClick(e) {
         onDaySelect(e, day);
     }
-    return (h("button", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday }, tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, "aria-pressed": isSelected ? "true" : "false", type: "button", ref: ref }, h("span", { "aria-hidden": "true" }, day.getDate()), h("duet-visually-hidden", null, formatterShort.format(day))));
+    return (h("td", { "data-day": printISODate(day), class: "duet-date-table-cell", "aria-label": formatterShort.format(day), role: "button", tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, "aria-pressed": isSelected ? "true" : "false", ref: ref }, h("span", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday } }, day.getDate())));
 };

package/lib/collection/components/duet-date-picker/date-picker-input.js

@@ -4,10 +4,12 @@
 import formDateIcon from "@duetds/icons/lib/assets/form-date";
 import { h } from "@stencil/core";
 import i18n from "./date-i18n";
-export const DatePickerInput = ({ onClick, placeholder, name, inputLabel, value, valueAsDate, formattedValue, language, identifier, theme, disabled, error, role, required, tooltip, tooltipDirection, labelHidden, buttonRef, inputRef, onInput, onBlur, onFocus, accessibleActiveDescendant, accessibleControls, accessibleOwns, accessibleDescribedBy, accessibleLiveError, echoPlaceholder, caption, }) => {
+export const DatePickerInput = ({ onClick, placeholder, name, inputLabel, value, valueAsDate, formattedValue, language, identifier, theme, disabled, error, role, required, tooltip, tooltipDirection, labelHidden, buttonRef, inputRef, onInput, onBlur, onFocus, hasFocus, accessibleActiveDescendant, accessibleControls, accessibleOwns, accessibleDescribedBy, accessibleLiveError, echoPlaceholder, caption, }) => {
     const { buttonLabel, selected, formatterLong } = i18n[language];
-    return (h("div", { class: {
-            "duet-theme-turva": theme === "turva",
-            "duet-date-input": true,
-        } }, h("duet-input", { label: inputLabel, value: formattedValue, placeholder: placeholder, id: identifier, disabled: disabled, theme: theme, error: error, role: role, required: required, tooltip: tooltip, tooltipDirection: tooltipDirection, margin: "none", component: "date", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, accessibleLiveError: accessibleLiveError, echoPlaceholder: echoPlaceholder, caption: caption }, h("slot", { name: "tooltip" }), h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button" }, h("duet-icon", { icon: formDateIcon.svg, margin: "none", size: "small", color: "currentColor" }), h("duet-visually-hidden", null, buttonLabel, valueAsDate && (h("span", null, ", ", selected, " ", formatterLong.format(valueAsDate)))))), h("input", { type: "hidden", name: name, value: value })));
+    const classes = {
+        "duet-theme-turva": theme === "turva",
+        "duet-date-input": true,
+        "duet-date-input-has-focus": hasFocus,
+    };
+    return (h("div", { class: classes }, h("duet-input", { label: inputLabel, value: formattedValue, placeholder: placeholder, id: identifier, disabled: disabled, theme: theme, error: error, role: role, required: required, tooltip: tooltip, tooltipDirection: tooltipDirection, margin: "none", labelHidden: labelHidden, accessibleAutocomplete: "none", onDuetInput: onInput, onDuetFocus: onFocus, onDuetBlur: onBlur, autoComplete: "off", disallowPattern: "[^0-9\\.\\-\\/]", expand: true, ref: inputRef, accessibleActiveDescendant: accessibleActiveDescendant, accessibleControls: accessibleControls, accessibleOwns: accessibleOwns, accessibleDescribedBy: accessibleDescribedBy, accessibleLiveError: accessibleLiveError, echoPlaceholder: echoPlaceholder, caption: caption, variation: "button" }, h("slot", { name: "tooltip" }), h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button", slot: "button" }, h("duet-icon", { icon: formDateIcon.svg, margin: "none", size: "small", color: "currentColor" }), h("duet-visually-hidden", null, buttonLabel, valueAsDate && (h("span", null, ", ", selected, " ", formatterLong.format(valueAsDate)))))), h("input", { type: "hidden", name: name, value: value })));
 };

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

@@ -17,9 +17,9 @@ export const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme
             onFocusExit(e);
         }
     }
-    return (h("table", { class: { "duet-date-table": true, "duet-theme-turva": theme === "turva" }, "aria-labelledby": labelledById,
+    return (h("div", { role: "application" }, h("table", { role: "presentation", class: { "duet-date-table": true, "duet-theme-turva": theme === "turva" }, "aria-labelledby": labelledById,
         // @ts-ignore
-        onFocusin: onFocusEnter, onFocusout: handleFocusOut }, h("thead", null, h("tr", null, dayLabels.map(label => (h("th", { scope: "col" }, h("span", { "aria-hidden": "true" }, label.substr(0, 2)), h("duet-visually-hidden", null, label)))))), h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (h("td", { class: "duet-date-table-cell" }, h(DatePickerDay, { day: day, today: today, language: language, focusedDay: focusedDate, inRange: inRange(day, min, max), isSelected: isEqual(day, selectedDate), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, ref: el => {
+        onFocusin: onFocusEnter, onFocusout: handleFocusOut }, h("thead", null, h("tr", null, dayLabels.map(label => (h("th", { scope: "col" }, h("span", { "aria-hidden": "true" }, label.substr(0, 2))))))), h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (h(DatePickerDay, { day: day, today: today, language: language, focusedDay: focusedDate, inRange: inRange(day, min, max), isSelected: isEqual(day, selectedDate), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, ref: el => {
             if (el && isEqual(day, focusedDate)) {
                 focusedDayRef(el);
             }

package/lib/collection/components/duet-date-picker/duet-date-picker.css

@@ -64,20 +64,22 @@
 .duet-date-button {
   -webkit-user-select: none;
   user-select: none;
-  position: absolute;
-  top: 1px;
-  right: 1px;
+  position: relative;
   z-index: 200;
+  box-sizing: content-box;
   display: flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
-  width: 48px;
-  height: calc(100% - 2px);
+  width: 47px;
+  height: 48px;
   color: rgb(8, 42, 77);
   cursor: pointer;
-  background: transparent !important;
-  border-left: 1px solid rgb(181, 198, 208) !important;
-  border-radius: 0 4px 4px 0 !important;
+  background: rgb(255, 255, 255);
+  border: 1px solid rgb(127, 150, 165);
+  border-left-color: rgb(181, 198, 208);
+  border-radius: 0 4px 4px 0;
+  transition: box-shadow 150ms ease, border 150ms ease !important;
 }
 .duet-theme-turva .duet-date-button {
   color: rgb(23, 28, 58);
@@ -92,6 +94,12 @@
   content: "";
   background: linear-gradient(to left, rgba(181, 198, 208, 0.2) 0%, rgba(181, 198, 208, 0.2) 1px, rgba(181, 198, 208, 0.1) 1px, rgba(181, 198, 208, 0) 100%);
 }
+.duet-date-button:hover:not(:disabled) {
+  box-shadow: 0 0 0 1px #909599 !important;
+}
+.duet-theme-turva .duet-date-button:hover:not(:disabled) {
+  box-shadow: 0 0 0 1px #747475 !important;
+}
 .duet-date-button:disabled {
   pointer-events: none;
   cursor: not-allowed;
@@ -113,13 +121,14 @@
 .duet-date-button:active duet-icon {
   transform: translateY(0);
 }
-.duet-date-button:focus {
+.duet-date-input-has-focus .duet-date-button, .duet-date-button:focus {
+  height: 46px;
   color: rgb(0, 119, 179);
   border-color: transparent;
   outline: 0;
   box-shadow: 0 0 0 2px #0077b3 !important;
 }
-.duet-theme-turva .duet-date-button:focus {
+.duet-theme-turva .duet-date-input-has-focus .duet-date-button, .duet-theme-turva .duet-date-button:focus {
   color: rgb(23, 28, 58);
   box-shadow: 0 0 0 2px #171c3a !important;
 }
@@ -240,6 +249,9 @@
 .duet-date-table .duet-date-table-cell {
   text-align: center;
 }
+.duet-date-table .duet-date-table-cell:focus {
+  outline: none;
+}
 
 .duet-date-table-button {
   position: relative;
@@ -254,7 +266,7 @@
   font-size: 0.875rem;
   font-weight: 400;
   font-variant-numeric: tabular-nums;
-  line-height: 1.25 !important;
+  line-height: 2.6 !important;
   color: rgb(8, 42, 77) !important;
   text-align: center;
   vertical-align: initial !important;
@@ -284,12 +296,12 @@
   background: rgb(255, 241, 241) !important;
   box-shadow: 0 0 0 1px #171c3a !important;
 }
-.duet-date-table-button[aria-pressed=true], .duet-date-table-button:focus {
+[aria-pressed=true] .duet-date-table-button, :focus .duet-date-table-button {
   color: rgb(255, 255, 255) !important;
   background: rgb(0, 119, 179) !important;
   outline: 0;
 }
-.duet-theme-turva .duet-date-table-button[aria-pressed=true], .duet-theme-turva .duet-date-table-button:focus {
+.duet-theme-turva [aria-pressed=true] .duet-date-table-button, .duet-theme-turva :focus .duet-date-table-button {
   color: rgb(255, 255, 255) !important;
   background: rgb(198, 12, 48) !important;
 }
@@ -304,11 +316,11 @@
   background: rgb(198, 12, 48) !important;
   box-shadow: 0 0 5px 0 #171c3a !important;
 }
-.duet-date-table-button:focus {
+:focus .duet-date-table-button {
   z-index: 200;
   box-shadow: 0 0 5px 0 #0077b3 !important;
 }
-.duet-theme-turva .duet-date-table-button:focus {
+.duet-theme-turva :focus .duet-date-table-button {
   box-shadow: 0 0 5px 0 #171c3a !important;
 }
 .duet-date-table-button.disabled {