@duetds/components 4.28.0 → 4.31.0

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

@@ -1,4 +1,7 @@
-import { Component, Host, State, Prop, h, Event } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Event, h, Host, Prop, State } from "@stencil/core";
 import { getLocaleString } from "../../utils/language-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetAlert {
@@ -15,6 +18,7 @@ export class DuetAlert {
     /**
      * Property to change languageDefaults on the component.
      * normally you would handle these strings on an application level and override @accessibleLabel when needed
+     * @default {fi: "Sulje viesti", sv: "Stäng meddelandet", en: "Close the message"}
      */
     this.accessibleLabelDefaults = {
       fi: "Sulje viesti",
@@ -23,6 +27,7 @@ export class DuetAlert {
     };
     /**
      * Adds accessible label for the dismissible alert close button.
+     * @default {fi: "Sulje viesti", sv: "Stäng meddelandet", en: "Close the message"}
      */
     this.accessibleLabel = getLocaleString(this.accessibleLabelDefaults);
     /**
@@ -131,11 +136,11 @@ export class DuetAlert {
       "defaultValue": "\"\""
     },
     "accessibleLabelDefaults": {
-      "type": "unknown",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
         "references": {
           "DuetLangObject": {
             "location": "import",
@@ -146,9 +151,14 @@ export class DuetAlert {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "{fi: \"Sulje viesti\", sv: \"St\u00E4ng meddelandet\", en: \"Close the message\"}",
+            "name": "default"
+          }],
         "text": "Property to change languageDefaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabel when needed"
       },
+      "attribute": "accessible-label-default",
+      "reflect": false,
       "defaultValue": "{\n    fi: \"Sulje viesti\",\n    sv: \"St\u00E4ng meddelandet\",\n    en: \"Close the message\",\n  }"
     },
     "accessibleLabel": {
@@ -162,7 +172,10 @@ export class DuetAlert {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "{fi: \"Sulje viesti\", sv: \"St\u00E4ng meddelandet\", en: \"Close the message\"}",
+            "name": "default"
+          }],
         "text": "Adds accessible label for the dismissible alert close button."
       },
       "attribute": "accessible-label",

package/lib/collection/components/duet-badge/duet-badge.css

@@ -44,6 +44,7 @@
   line-height: 1.25;
   color: #00294d;
   text-align: center;
+  word-break: break-word;
   vertical-align: middle;
   background: #e6f1f7;
   border-radius: 20rem;

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

@@ -1,4 +1,7 @@
-import { Component, Host, Prop, h } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, h, Host, Prop } from "@stencil/core";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetBadge {
   constructor() {

package/lib/collection/components/duet-button/duet-button.css

@@ -105,15 +105,15 @@
 .duet-button.duet-m-0 {
   margin: 0 !important;
 }
-.duet-button.duet-button-is-small {
+.duet-button.duet-button-is-small:not(.duet-button-icon-only) {
   padding: 9px 19px 10px !important;
   min-width: 5.3333333333rem;
   font-size: 0.875rem;
 }
-.duet-button.duet-button-is-small.icon {
+.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon {
   padding-left: 48px !important;
 }
-.duet-button.duet-button-is-small.icon-right {
+.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon-right {
   padding-right: 48px !important;
   padding-left: 20px !important;
 }

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

@@ -1,8 +1,11 @@
-import { Component, Method, Prop, Element, Host, Event, h, Watch } from "@stencil/core";
-import { getColorByName } from "../../utils/token-utils";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
-import { getLanguage, getLocaleString } from "../../utils/language-utils";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, Event, h, Host, Method, Prop, Watch } from "@stencil/core";
 import { DuetStringsExternalDefaults } from "../../common-strings";
+import { getLanguage, getLocaleString } from "../../utils/language-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { getColorByName } from "../../utils/token-utils";
 export class DuetButton {
   constructor() {
     /**
@@ -57,17 +60,20 @@ export class DuetButton {
     this.external = false;
     /**
      * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+     * @default "fi"
      */
     this.language = getLanguage();
     /**
      * Property to change accessibleLabelExternal defaults on the component.
      * normally you would handle these strings on an application level and override @accessibleLabelExternal when needed
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
      */
     this.accessibleLabelExternalDefaults = DuetStringsExternalDefaults;
     /**
      * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
      */
-    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults, this.language);
+    this.accessibleLabelExternal = getLocaleString(this.accessibleLabelExternalDefaults);
     /**
      * Icon to display to the left of the button content.
      * This is ignored/overridden when button is used as an external link.
@@ -663,6 +669,9 @@ export class DuetButton {
         "tags": [{
             "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing",
             "name": "deprecated"
+          }, {
+            "text": "\"fi\"",
+            "name": "default"
           }],
         "text": ""
       },
@@ -671,11 +680,11 @@ export class DuetButton {
       "defaultValue": "getLanguage()"
     },
     "accessibleLabelExternalDefaults": {
-      "type": "unknown",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
         "references": {
           "DuetLangObject": {
             "location": "import",
@@ -686,9 +695,14 @@ export class DuetButton {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
+            "name": "default"
+          }],
         "text": "Property to change accessibleLabelExternal defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelExternal when needed"
       },
+      "attribute": "accessible-label-external-default",
+      "reflect": false,
       "defaultValue": "DuetStringsExternalDefaults"
     },
     "accessibleLabelExternal": {
@@ -702,12 +716,15 @@ export class DuetButton {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
+            "name": "default"
+          }],
         "text": "Adds accessible label for tooltip that is shown in external link (url & external have both been set)"
       },
       "attribute": "accessible-label-external",
       "reflect": false,
-      "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults, this.language)"
+      "defaultValue": "getLocaleString(this.accessibleLabelExternalDefaults)"
     },
     "icon": {
       "type": "string",

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

@@ -1,4 +1,7 @@
-import { Component, Prop, Host, h } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, h, Host, Prop } from "@stencil/core";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetCaption {
   constructor() {

package/lib/collection/components/duet-card/duet-card.css

@@ -134,20 +134,22 @@
 
 .duet-card-heading-grid {
   display: flex;
-  align-items: center;
+  flex-direction: row;
 }
-.duet-card-heading-grid .expand {
-  flex: 1;
+
+.duet-card-icon {
+  align-self: center;
 }
 
 .duet-card-heading-text {
-  overflow: hidden;
-  text-overflow: ellipsis;
+  flex: 1;
+  word-break: break-word;
 }
 
 .duet-card-secondary-heading {
   font-size: 1rem;
   font-weight: 600;
+  word-break: break-word;
 }
 
 .duet-card-heading {
@@ -160,8 +162,6 @@
   font-size: 1.25rem;
   font-weight: 800;
   color: #00294d;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   border-bottom: 1px solid #e1e3e6;
 }
 @media (min-width: 36em) {
@@ -340,6 +340,9 @@
 }
 
 .duet-card-caret {
+  position: relative;
+  top: 6px;
+  align-self: flex-start;
   transition: 300ms ease;
 }
 [aria-expanded=false] .duet-card-caret {

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

@@ -1,10 +1,13 @@
-import { Component, Prop, Element, Method, Host, h, Event, Fragment } from "@stencil/core";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+/*!
+ * Built with Duet Design System
+ */
 import arrowUpIcon from "@duetds/icons/lib/assets/action-arrow-up";
+import { Component, Element, Event, Fragment, h, Host, Method, Prop } from "@stencil/core";
+import { createID } from "../../utils/create-id";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
 import { sanitizeString } from "../../utils/string-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
 import { getColorByName } from "../../utils/token-utils";
-import { createID } from "../../utils/create-id";
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
  * @slot footer - Footer content.
@@ -102,13 +105,11 @@ export class DuetCard {
         this.icon && (h(Fragment, null,
           h("duet-icon", { class: "duet-card-icon", name: this.icon, size: "medium", margin: "none", color: "currentColor" }),
           h("duet-spacer", { direction: "horizontal", size: "small" }))),
-        h("div", { class: "expand duet-card-heading-text" }, this.heading),
-        this.secondaryHeading && (h(Fragment, null,
-          h("duet-spacer", { direction: "horizontal", size: "small" }),
-          h("div", { class: "duet-card-secondary-heading" }, this.secondaryHeading))),
+        h("div", { class: "duet-card-heading-text" }, this.heading),
         this.collapsible && (h(Fragment, null,
           h("duet-spacer", { direction: "horizontal", size: "small" }),
-          h("duet-icon", { class: "duet-card-caret", icon: arrowUpIcon.svg, size: "small", margin: "none", color: "currentColor" }))))));
+          h("duet-icon", { class: "duet-card-caret", icon: arrowUpIcon.svg, size: "small", margin: "none", color: "currentColor" })))),
+      this.secondaryHeading && h("div", { class: "duet-card-secondary-heading" }, this.secondaryHeading)));
   }
   /**
    * Sets focus on the specified `duet-card`. Use this method instead of the global

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

@@ -1,4 +1,7 @@
-import { Component, Prop, Method, Element, Event, Host, h } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, Event, h, Host, Method, Prop } from "@stencil/core";
 import { createID } from "../../utils/create-id";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetCheckbox {

package/lib/collection/components/duet-choice/duet-choice.css

@@ -70,7 +70,6 @@
 
 :host(:last-child:not(:only-child)) {
   margin-right: 0 !important;
-  margin-bottom: 0 !important;
 }
 
 .duet-choice-card {

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

@@ -1,10 +1,13 @@
-import { Component, Host, Prop, Element, Event, Method, State, h, Listen } from "@stencil/core";
-import { createID } from "../../utils/create-id";
+/*!
+ * Built with Duet Design System
+ */
 import infoIcon from "@duetds/icons/lib/assets/messaging-info";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { Component, Element, Event, h, Host, Listen, Method, Prop, State } from "@stencil/core";
+import { DuetStringsExternalDefaults } from "../../common-strings";
+import { createID } from "../../utils/create-id";
 import { isKeyboardClick, isQuestionKey } from "../../utils/keyboard-utils";
 import { getLocaleString } from "../../utils/language-utils";
-import { DuetStringsExternalDefaults } from "../../common-strings";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
 /**
  * @slot unnamed default slot - The component’s primary content. All child nodes that do not have a slot attribute defined are inserted into this primary slot.
  * @slot info - Info content. Anything inserted into this slot is displayed in a collapsible info box.
@@ -38,6 +41,7 @@ export class DuetChoice {
     /**
      * Accessible label that is read for screen reader users in the info toggle trigger button.
      * Not visible for normal users.
+     * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
      */
     this.accessibleLabelInfoButton = getLocaleString(this.accessibleLabelInfoButtonDefaults);
     /**
@@ -330,11 +334,11 @@ export class DuetChoice {
       "defaultValue": "\"label\""
     },
     "accessibleLabelInfoButtonDefaults": {
-      "type": "unknown",
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "DuetLangObject",
-        "resolved": "DuetLangObject",
+        "original": "DuetLangObject | string",
+        "resolved": "DuetLangObject | string",
         "references": {
           "DuetLangObject": {
             "location": "import",
@@ -348,6 +352,8 @@ export class DuetChoice {
         "tags": [],
         "text": "Property to change accessibleLabelInfoButton defaults on the component.\nnormally you would handle these strings on an application level and override @accessibleLabelInfoButton when needed"
       },
+      "attribute": "accessible-label-info-default",
+      "reflect": false,
       "defaultValue": "DuetStringsExternalDefaults"
     },
     "accessibleLabelInfoButton": {
@@ -361,7 +367,10 @@ export class DuetChoice {
       "required": false,
       "optional": false,
       "docs": {
-        "tags": [],
+        "tags": [{
+            "text": "{fi: \"Avautuu uuteen ikkunaan\",sv: \"\u00D6ppnas i nytt f\u00F6nster\",en: \"Opens in a new window\"}",
+            "name": "default"
+          }],
         "text": "Accessible label that is read for screen reader users in the info toggle trigger button.\nNot visible for normal users."
       },
       "attribute": "accessible-label-info-button",

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

@@ -30,6 +30,7 @@
 @media (min-width: 48em) {
   :host(.horizontal) .duet-choice-group {
     display: flex;
+    margin-bottom: 0;
   }
 }
 
@@ -37,7 +38,8 @@
   display: flex;
 }
 
-.deut-choice-group {
+.duet-choice-group {
   position: relative;
   width: 100%;
+  margin-bottom: -12px;
 }

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

@@ -1,6 +1,9 @@
-import { Component, Prop, Element, Watch, Host, h } from "@stencil/core";
-import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, h, Host, Prop, Watch } from "@stencil/core";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { findCheckedOption, watchForOptions } from "../../utils/watch-options";
 export class DuetChoiceGroup {
   constructor() {
     /**

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

@@ -1,8 +1,13 @@
-import { Component, Prop, Element, h, Event, Method, Host } from "@stencil/core";
-import { createID } from "../../utils/create-id";
-import { inheritGlobalTheme } from "../../utils/themeable-component";
+/*!
+ * Built with Duet Design System
+ */
 import icon from "@duetds/icons/lib/assets/action-arrow-down-small";
+import * as tokens from "@duetds/tokens/lib/tokens.json";
+import { Component, Element, Event, h, Host, Method, Prop } from "@stencil/core";
+import { createID } from "../../utils/create-id";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
+import { sanitizeString } from "../../utils/string-utils";
+import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetCollapsible {
   constructor() {
     this.id = createID("DuetCollapsible");
@@ -18,6 +23,26 @@ export class DuetCollapsible {
      * The font weight of the heading
      */
     this.headingWeight = "semibold";
+    /**
+     * Custom headingSize to be used for font size of heading, as a design token entered
+     * in kebab-case x-small -> font-size-x-small.
+     * Example:
+     * # 12px (0.75rem)  ------  +2px   (x-small)
+     * # 14px (0.875rem) ------  +2px   (small)
+     * # 16px (1rem)     ------  +2px   (medium)
+     * # 20px (1.25rem)  ------  +4px   (large)
+     * # 24px (1.5rem)   ------  +4px   (x-large)
+     * # 36px (2.25rem)  ------  +12px  (xx-large)
+     * # 48px (3rem)     ------  +12px  (xxx-large)
+     * # 72px (4.5rem)   ------  +24px  (xxxx-large)
+     */
+    this.headingSize = undefined;
+    /**
+     * The actual heading level used for the heading in html markup. This setting
+     * exists for accessibility reasons. It doesn’t change the style visually.
+     * only variations of h1-h6 area accepted
+     */
+    this.headingLevel = undefined;
     /**
      * Controls the margin of the component.
      */
@@ -31,6 +56,39 @@ export class DuetCollapsible {
         this.handleClick(e);
       }
     };
+    this.getFontSizeFromTokens = (fontSize = this.headingSize) => {
+      if (!fontSize) {
+        return tokens["font_size_medium"];
+      }
+      else {
+        const searchRegExp = /-/g;
+        const fontSizeReplaced = fontSize.replace(searchRegExp, "_");
+        return tokens[`font_size_${fontSizeReplaced}`];
+      }
+    };
+    this.getEquivalentIconSize = (fontSize = this.headingSize) => {
+      switch (fontSize) {
+        case "x-small":
+          return "xx-small";
+        case "small":
+          return "xx-small";
+        case "medium":
+          return "xx-small";
+        case "large":
+          return "x-small";
+        case "x-large":
+          return "small";
+        case "xx-large":
+          return "medium";
+        case "xxx-large":
+          return "x-large";
+        case "xxxx-large":
+          return "xxx-large";
+        default:
+          // default size
+          return "xx-small";
+      }
+    };
     this.handleClick = (e) => {
       e.preventDefault();
       this.open = !this.open;
@@ -61,14 +119,15 @@ export class DuetCollapsible {
    * Always the last one in the class.
    */
   render() {
+    const HeadingTagName = this.headingLevel ? sanitizeString(this.headingLevel) : "div";
     return (h(Host, { class: { "duet-m-0": this.margin === "none" } },
-      h("div", { class: {
+      h(HeadingTagName, { class: {
           "duet-collapsible-heading": true,
           "duet-theme-turva": this.theme === "turva",
           "duet-collapsible-normal-weight": this.headingWeight === "normal",
-        }, role: "button", tabindex: "0", ref: button => (this.nativeButton = button), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown },
+        }, style: { "font-size": this.getFontSizeFromTokens() }, role: "button", tabindex: "0", ref: button => (this.nativeButton = button), "aria-expanded": this.open ? "true" : "false", "aria-controls": this.id, onClick: this.handleClick, onKeyDown: this.handleKeyDown },
         h("div", { class: "duet-collapsible-heading-icon" },
-          h("duet-icon", { margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: "xx-small", icon: icon.svg })),
+          h("duet-icon", { margin: "none", color: this.theme === "turva" ? "secondary-turva" : "secondary", size: this.getEquivalentIconSize(), icon: icon.svg })),
         h("div", { class: "duet-collapsible-heading-content" }, this.heading)),
       h("div", { id: this.id, class: { "duet-collapsible-content": true, "duet-theme-turva": this.theme === "turva" } },
         h("slot", null))));
@@ -145,6 +204,51 @@ export class DuetCollapsible {
       "reflect": false,
       "defaultValue": "\"semibold\""
     },
+    "headingSize": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetCollapsibleHeadingFontSize",
+        "resolved": "\"large\" | \"medium\" | \"small\" | \"x-large\" | \"x-small\" | \"xx-large\" | \"xxx-large\" | \"xxxx-large\"",
+        "references": {
+          "DuetCollapsibleHeadingFontSize": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "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)"
+      },
+      "attribute": "heading-size",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
+    "headingLevel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DuetHeadingLevel | undefined",
+        "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+        "references": {
+          "DuetHeadingLevel": {
+            "location": "import",
+            "path": "../../common-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "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"
+      },
+      "attribute": "heading-level",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
     "margin": {
       "type": "string",
       "mutable": false,

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

@@ -1,4 +1,7 @@
-import { Component, Prop, Element, Host, h, Event } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
+import { Component, Element, Event, h, Host, Prop } from "@stencil/core";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
 export class DuetCookieConsent {
   constructor() {

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

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

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

@@ -1,6 +1,9 @@
+/*!
+ * Built with Duet Design System
+ */
 import { h } from "@stencil/core";
-import { isEqual } from "./date-utils";
 import i18n from "./date-i18n";
+import { isEqual } 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);

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

@@ -1,5 +1,8 @@
-import { h } from "@stencil/core";
+/*!
+ * Built with Duet Design System
+ */
 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, echoPlaceholder, caption, }) => {
   const { buttonLabel, selected, formatterLong } = i18n[language];

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

@@ -1,7 +1,10 @@
+/*!
+ * Built with Duet Design System
+ */
 import { h } from "@stencil/core";
+import i18n from "./date-i18n";
 import { DatePickerDay } from "./date-picker-day";
 import { getViewOfMonth, inRange, isEqual } from "./date-utils";
-import i18n from "./date-i18n";
 import { chunk } from "./utils";
 export const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme, language, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onFocusEnter, onFocusExit, }) => {
   const { dayLabels } = i18n[language];

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

@@ -1,3 +1,6 @@
+/*!
+ * Built with Duet Design System
+ */
 const DATE_FORMAT = /^(\d{1,2})[\.\-\/](\d{1,2})[\.\-\/](\d{4})$/;
 const ISO_DATE_FORMAT = /^(\d{4})-(\d{2})-(\d{2})$/;
 const DATE_OUTPUT_FORMAT = "dd.mm.yyyy";

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

@@ -28,7 +28,7 @@
   min-width: calc(33.333% - 8px);
   max-width: 100%;
   text-align: left;
-  vertical-align: bottom;
+  vertical-align: top;
 }
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;