@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

package/lib/cjs/duet-date-picker.cjs.entry.js

@@ -3,16 +3,15 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-21e67ab3.js');
-const label = require('./label-2abeac23.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const createId = require('./create-id-1f8c438f.js');
-const focusUtils = require('./focus-utils-2a0030aa.js');
-const languageUtils = require('./language-utils-b5940c7b.js');
-const slotUtils = require('./slot-utils-382633cf.js');
-require('./string-utils-7b13c16e.js');
+var index = require('./index-CKsfMbRW.js');
+var label = require('./label-DbnS5tex.js');
+var themeableComponent = require('./themeable-component-BuC0WY98.js');
+var createId = require('./create-id-DtslnIOq.js');
+var focusUtils = require('./focus-utils-DHGNKs9U.js');
+var languageUtils = require('./language-utils-CYOjMfnd.js');
+var slotUtils = require('./slot-utils-D4QyzHw3.js');
+var _commonjsHelpers = require('./_commonjsHelpers-4N64IRaP.js');
+require('./string-utils-B35hEUBv.js');
 
 const formatOptionsShort = { day: "numeric", month: "long", weekday: "long" };
 const formatOptionsLong = { day: "numeric", month: "long", year: "numeric" };
@@ -116,7 +115,18 @@ const i18n = {
     },
 };
 
-var formDate={"title":"form-date","tags":"form date calendar date picker","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M2.25 24A2.252 2.252 0 0 1 0 21.75V5.25A2.252 2.252 0 0 1 2.25 3H6V.75a.75.75 0 0 1 1.5 0V3h9V.75a.75.75 0 0 1 1.5 0V3h3.75A2.252 2.252 0 0 1 24 5.25v16.5A2.252 2.252 0 0 1 21.75 24zm-.75-2.25c0 .414.336.75.75.75h19.5a.75.75 0 0 0 .75-.75V10.5h-21zM22.5 9V5.25a.75.75 0 0 0-.75-.75H18V6a.75.75 0 0 1-1.5 0V4.5h-9V6A.75.75 0 0 1 6 6V4.5H2.25a.75.75 0 0 0-.75.75V9z\"/><circle cx=\"5.625\" cy=\"13.875\" r=\"1.125\"/><circle cx=\"5.625\" cy=\"19.125\" r=\"1.125\"/><circle cx=\"12\" cy=\"13.875\" r=\"1.125\"/><circle cx=\"12\" cy=\"19.125\" r=\"1.125\"/><circle cx=\"18.375\" cy=\"13.875\" r=\"1.125\"/><path d=\"M18.375 20.25c-.62 0-1.125-.505-1.125-1.125a1.127 1.127 0 0 1 1.171-1.122l.027.003a1.118 1.118 0 0 1 1.052 1.12c0 .619-.505 1.124-1.125 1.124z\"/></svg>"};
+var formDate;
+var hasRequiredFormDate;
+
+function requireFormDate () {
+	if (hasRequiredFormDate) return formDate;
+	hasRequiredFormDate = 1;
+	formDate={"title":"form-date","tags":"form date calendar date picker","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M2.25 24A2.252 2.252 0 0 1 0 21.75V5.25A2.252 2.252 0 0 1 2.25 3H6V.75a.75.75 0 0 1 1.5 0V3h9V.75a.75.75 0 0 1 1.5 0V3h3.75A2.252 2.252 0 0 1 24 5.25v16.5A2.252 2.252 0 0 1 21.75 24zm-.75-2.25c0 .414.336.75.75.75h19.5a.75.75 0 0 0 .75-.75V10.5h-21zM22.5 9V5.25a.75.75 0 0 0-.75-.75H18V6a.75.75 0 0 1-1.5 0V4.5h-9V6A.75.75 0 0 1 6 6V4.5H2.25a.75.75 0 0 0-.75.75V9z\"/><circle cx=\"5.625\" cy=\"13.875\" r=\"1.125\"/><circle cx=\"5.625\" cy=\"19.125\" r=\"1.125\"/><circle cx=\"12\" cy=\"13.875\" r=\"1.125\"/><circle cx=\"12\" cy=\"19.125\" r=\"1.125\"/><circle cx=\"18.375\" cy=\"13.875\" r=\"1.125\"/><path d=\"M18.375 20.25c-.62 0-1.125-.505-1.125-1.125a1.127 1.127 0 0 1 1.171-1.122l.027.003a1.118 1.118 0 0 1 1.052 1.12c0 .619-.505 1.124-1.125 1.124z\"/></svg>"};
+	return formDate;
+}
+
+var formDateExports = requireFormDate();
+var formDateIcon = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(formDateExports);
 
 const DatePickerInput = ({ onClick, placeholder, inputLabel, 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];
@@ -129,7 +139,7 @@ const DatePickerInput = ({ onClick, placeholder, inputLabel, valueAsDate, format
         index.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", onDuetChange: e => e.stopImmediatePropagation(), 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" },
             index.h("slot", { name: "tooltip" }),
             index.h("button", { class: { "duet-date-button": true, "duet-no-label": labelHidden, "input-error": !!error }, onClick: onClick, disabled: disabled, ref: buttonRef, type: "button", slot: "button" },
-                index.h("duet-icon", { icon: formDate.svg, margin: "none", size: "small", color: "currentColor" }),
+                index.h("duet-icon", { icon: formDateIcon.svg, margin: "none", size: "small", color: "currentColor" }),
                 index.h("duet-visually-hidden", null,
                     buttonLabel,
                     valueAsDate && (index.h("span", null,
@@ -156,7 +166,12 @@ function createDate(year, month, day) {
         dayInt <= 31 &&
         yearInt > 0;
     if (isValid) {
-        return new Date(yearInt, monthInt - 1, dayInt);
+        const date = new Date(yearInt, monthInt - 1, dayInt);
+        // Reject dates where JS overflowed to a different month/day (e.g. Feb 31 → Mar 3)
+        if (date.getDate() !== dayInt || date.getMonth() !== monthInt - 1) {
+            return undefined;
+        }
+        return date;
     }
 }
 /**
@@ -307,6 +322,11 @@ function getViewOfMonth(date, firstDayOfWeek = 1) {
     return getDaysInRange(start, end);
 }
 
+const selectedDayLabel = {
+    fi: "Valittu päivä",
+    en: "Selected day",
+    sv: "Vald dag",
+};
 const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, onKeyboardNavigation, ref, inRange, isSelected, }) => {
     const isToday = isEqual(day, today);
     const isFocused = isEqual(day, focusedDay);
@@ -316,7 +336,7 @@ const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, onKeyboa
     function handleClick(e) {
         onDaySelect(e, day);
     }
-    return (index.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 },
+    return (index.h("td", { "data-day": printISODate(day), class: { "duet-date-table-cell": true, selected: isSelected }, "aria-label": `${formatterShort.format(day)}${isSelected ? `, ${selectedDayLabel[language]}` : undefined}`, role: "button", tabIndex: isFocused ? 0 : -1, onClick: handleClick, onKeyDown: onKeyboardNavigation, "aria-disabled": isOutsideRange || isDisabled, ref: ref },
         index.h("span", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday } }, day.getDate())));
 };
 
@@ -404,8 +424,7 @@ const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme, langu
                 } }))))))))));
 };
 
-const duetDatePickerCss = ".duet-internal-label{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600 !important;line-height:1.25;line-height:1.25;color:rgb(8, 42, 77);text-align:left;word-break:break-word;cursor:default}.duet-internal-label.duet-p-0{padding:0 !important}.duet-internal-label.duet-m-0{margin:0 !important}.duet-internal-label span{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-internal-label.duet-m-0{margin-bottom:0 !important}.duet-internal-label.duet-small-margin{margin-top:8px !important;margin-bottom:4px !important}.duet-internal-label.duet-has-tooltip{padding-right:48px}@media (min-width: 48em){.duet-internal-label.duet-has-tooltip{padding-right:0}}.duet-internal-label.duet-internal-label-small{font-size:0.875rem}.duet-internal-label.duet-internal-label-small span{font-size:0.875rem}.duet-internal-label.duet-weight-normal{font-weight:400 !important}.duet-internal-label.duet-weight-normal span{font-weight:400 !important}.duet-internal-label.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{margin-right:16px !important}:host(:last-child),:host(:last-of-type){margin-right:0 !important}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;position:relative;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;text-align:left;vertical-align:top}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}.duet-date{position:relative;width:100%}.duet-date button,.duet-date-dialog button{max-width:initial !important;min-height:initial !important;padding:0 !important;margin:0 !important;transition:initial}.duet-date-button{-webkit-user-select:none;user-select:none;position:relative;z-index:200;box-sizing:content-box;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:47px;height:48px;color:rgb(8, 42, 77);cursor:pointer;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);border-color:rgb(199, 202, 207)}.duet-date-button::before{position:absolute;top:0;left:-6px;width:6px;height:100%;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;background:rgb(245, 248, 250) !important;border:0 !important}.duet-theme-turva .duet-date-button:disabled{background:rgb(245, 247, 250) !important}.duet-date-button:disabled::before{display:none}.duet-date-button:disabled duet-icon{opacity:0.4}.duet-date-button duet-icon{transform:translateY(-1px)}.duet-date-button:active duet-icon{transform:translateY(0)}.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-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}.input-error{border-top-color:rgb(214, 28, 82);border-right-color:rgb(214, 28, 82);border-bottom-color:rgb(214, 28, 82)}.duet-date-dialog{position:absolute;top:100%;left:0;z-index:900;display:flex;width:100%;visibility:hidden;opacity:0;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right}@media (min-width: 36em){.duet-date-dialog.left{right:0;left:auto;width:auto}}@media (max-width: 35.9375em){.duet-date-dialog{position:fixed;top:0;right:0;bottom:0;transition:opacity 400ms ease, visibility 400ms ease;transform:translateZ(0);transform-origin:bottom center}}.duet-date-dialog.active{visibility:visible;opacity:1;transition-property:transform, opacity;transform:scale(1.0001) translateZ(0) translateY(0)}@media (min-width: 36em){.duet-date-dialog.error{top:calc(100% - 28px);margin-top:4px}}.duet-date-dialog-wrapper{position:relative;z-index:600;width:100%;min-width:290px;max-width:310px;padding:16px 16px 20px;margin-top:8px;margin-left:auto;background:rgb(255, 255, 255);border:1px solid rgb(212, 223, 229);border-radius:4px;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);transform:none}.duet-theme-turva .duet-date-dialog-wrapper{border-color:rgb(222, 224, 228)}@media (max-width: 35.9375em){.duet-date-dialog-wrapper{position:absolute;bottom:0;left:0;z-index:900;max-width:none;min-height:25em;padding:0 8% 20px;margin:0;visibility:hidden;border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;opacity:0;transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease;transform:translateZ(0) translateY(100%)}.active .duet-date-dialog-wrapper{visibility:visible;opacity:1;transition-property:transform, opacity;transform:translateZ(0) translateY(0)}}.duet-date-table{width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.25;color:rgb(8, 42, 77);text-align:center;border-spacing:0;border-collapse:collapse}.duet-date-table.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-date-table th{padding-bottom:8px;font-size:0.75rem;font-weight:600;line-height:1.25;text-decoration:none;text-transform:uppercase;letter-spacing:1px}.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;z-index:100;display:inline-block !important;width:36.9230769231px !important;height:36.9230769231px !important;min-height:initial !important;padding:0 !important;margin:0 !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;font-variant-numeric:tabular-nums;line-height:2.6 !important;color:rgb(8, 42, 77) !important;text-align:center;vertical-align:initial !important;cursor:pointer;background:transparent !important;border-radius:50% !important;transition:initial !important}.duet-theme-turva .duet-date-table-button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;color:rgb(23, 28, 58) !important}.duet-date-table-button:hover{background:rgb(228, 241, 247) !important}.duet-theme-turva .duet-date-table-button:hover{background:rgb(255, 227, 228) !important}.duet-date-table-button.today{z-index:200;color:rgb(0, 75, 129) !important;background:rgb(240, 247, 250) !important;box-shadow:0 0 0 1px #0077b3 !important}.duet-theme-turva .duet-date-table-button.today{color:rgb(126, 2, 35) !important;background:rgb(255, 241, 241) !important;box-shadow:0 0 0 1px #171c3a !important}[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 [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}.duet-date-table-button:active{z-index:200;color:rgb(255, 255, 255) !important;background:rgb(0, 119, 179) !important;box-shadow:0 0 5px 0 #0077b3 !important}.duet-theme-turva .duet-date-table-button:active{color:rgb(255, 255, 255) !important;background:rgb(198, 12, 48) !important;box-shadow:0 0 5px 0 #171c3a !important}:focus .duet-date-table-button{z-index:200;box-shadow:0 0 5px 0 #0077b3 !important}.duet-theme-turva :focus .duet-date-table-button{box-shadow:0 0 5px 0 #171c3a !important}.duet-date-table-button.disabled{color:rgb(127, 150, 165) !important;cursor:default;background:transparent !important;box-shadow:none !important}.duet-theme-turva .duet-date-table-button.disabled{color:rgb(143, 147, 158) !important;background:transparent !important;box-shadow:none !important}.duet-date-table-button.outside{color:rgb(127, 150, 165) !important;pointer-events:none;cursor:default;background:rgb(245, 248, 250) !important;box-shadow:none;opacity:0.75}.duet-theme-turva .duet-date-table-button.outside{color:rgb(143, 147, 158);background:rgb(245, 247, 250);box-shadow:none}.duet-date-dialog-header{margin-bottom:16px !important;display:flex;align-items:center;justify-content:space-between;width:100%}.duet-date-dialog-buttons{white-space:nowrap}.duet-date-dialog-buttons ::part(button){border:0}.duet-date-dialog-select{position:relative;display:inline-flex;margin-top:4px}.duet-date-dialog-select .duet-date-dialog-select-label{position:relative;z-index:1;display:flex;align-items:center;width:100%;padding:0 8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1.25rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);pointer-events:none;border-radius:4px}.duet-theme-turva .duet-date-dialog-select .duet-date-dialog-select-label{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-date-dialog-select span{margin-right:4px}.duet-date-dialog-select select{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;font-size:1rem;cursor:pointer;opacity:0}.duet-date-dialog-select select:focus+.duet-date-dialog-select-label{box-shadow:0 0 0 2px #0077b3 !important}.duet-theme-turva .duet-date-dialog-select select:focus+.duet-date-dialog-select-label{box-shadow:0 0 0 2px #171c3a !important}.duet-date-dialog-mobile-header{position:relative;display:flex;align-items:center;justify-content:space-between;width:120%;padding:12px 20px;margin-bottom:20px;margin-left:-10%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid rgb(181, 198, 208)}@media (min-width: 36em){.duet-date-dialog-mobile-header{position:absolute;top:-8px;right:-8px;width:auto;padding:0;margin:0;overflow:visible;border:0}}.duet-theme-turva .duet-date-dialog-mobile-header{border-color:rgb(199, 202, 207)}.duet-date-dialog-mobile-header duet-label{display:inline-block;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.duet-date-dialog-mobile-header duet-label{display:none}}.duet-date-picker-close{display:flex;align-items:center;justify-content:center;width:24px;height:24px !important;padding:0 !important;color:rgb(8, 42, 77) !important;cursor:pointer;background:rgb(245, 248, 250) !important;border-radius:50%;-webkit-appearance:none;appearance:none}@media (min-width: 36em){.duet-date-picker-close{opacity:0}}.duet-theme-turva .duet-date-picker-close{background:rgb(245, 247, 250) !important}.duet-date-picker-close:hover{background:rgb(245, 248, 250) !important}.duet-theme-turva .duet-date-picker-close:hover{background:rgb(245, 247, 250) !important}.duet-date-picker-close:focus{outline:none;box-shadow:0 0 0 2px #0077b3 !important}@media (min-width: 36em){.duet-date-picker-close:focus{opacity:1}}.duet-theme-turva .duet-date-picker-close:focus{box-shadow:0 0 0 2px #171c3a !important}";
-const DuetDatePickerStyle0 = duetDatePickerCss;
+const duetDatePickerCss = ".duet-internal-label{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600 !important;line-height:1.25;line-height:1.25;color:rgb(8, 42, 77);text-align:left;word-break:break-word;cursor:default}.duet-internal-label.duet-p-0{padding:0 !important}.duet-internal-label.duet-m-0{margin:0 !important}.duet-internal-label span{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-internal-label.duet-m-0{margin-bottom:0 !important}.duet-internal-label.duet-small-margin{margin-top:8px !important;margin-bottom:4px !important}.duet-internal-label.duet-has-tooltip{padding-right:48px}@media (min-width: 48em){.duet-internal-label.duet-has-tooltip{padding-right:0}}.duet-internal-label.duet-internal-label-small{font-size:0.875rem}.duet-internal-label.duet-internal-label-small span{font-size:0.875rem}.duet-internal-label.duet-weight-normal{font-weight:400 !important}.duet-internal-label.duet-weight-normal span{font-weight:400 !important}.duet-internal-label.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{margin-right:16px !important}:host(:last-child),:host(:last-of-type){margin-right:0 !important}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-bottom:12px !important;position:relative;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;vertical-align:top;text-align:left}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}.duet-date{position:relative;width:100%}.duet-date button,.duet-date-dialog button{max-width:initial !important;min-height:initial !important;padding:0 !important;margin:0 !important;transition:initial}.duet-date-button{-webkit-user-select:none;user-select:none;position:relative;z-index:200;box-sizing:content-box;display:flex;flex-shrink:0;align-items:center;justify-content:center;width:47px;height:48px;color:rgb(8, 42, 77);cursor:pointer;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);border-color:rgb(143, 147, 158);border-left-color:rgb(199, 202, 207)}.duet-date-button::before{position:absolute;top:0;left:-6px;width:6px;height:100%;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){outline:2px solid;outline-color:rgb(98, 121, 138);outline-offset:-1px}.duet-theme-turva .duet-date-button:hover:not(:disabled),.duet-date-button:hover:not(:disabled).duet-theme-turva,.duet-theme-turva2 .duet-date-button:hover:not(:disabled),.duet-date-button:hover:not(:disabled).duet-theme-turva2{outline-color:rgb(120, 145, 164)}.duet-date-button:disabled{pointer-events:none;cursor:not-allowed;background:rgb(245, 248, 250) !important;border:0 !important}.duet-theme-turva .duet-date-button:disabled{background:rgb(245, 247, 250) !important}.duet-date-button:disabled::before{display:none}.duet-date-button:disabled duet-icon{opacity:0.4}.duet-date-button duet-icon{transform:translateY(-1px)}.duet-date-button:active duet-icon{transform:translateY(0)}.duet-date-input-has-focus .duet-date-button,.duet-date-button:focus{height:46px;color:rgb(0, 119, 179)}.duet-date-input-has-focus .duet-date-button:focus,.duet-date-button:focus:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-date-input-has-focus .duet-date-button:focus,.duet-date-input-has-focus .duet-date-button:focus.duet-theme-turva,.duet-theme-turva2 .duet-date-input-has-focus .duet-date-button:focus,.duet-date-input-has-focus .duet-date-button:focus.duet-theme-turva2,.duet-theme-turva .duet-date-button:focus:focus,.duet-date-button:focus:focus.duet-theme-turva,.duet-theme-turva2 .duet-date-button:focus:focus,.duet-date-button:focus:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-theme-turva.duet-date-input-has-focus .duet-date-button,.duet-theme-turva .duet-date-button:focus{color:rgb(23, 28, 58)}.input-error{border-top-color:rgb(214, 28, 82);border-right-color:rgb(214, 28, 82);border-bottom-color:rgb(214, 28, 82)}.duet-date-dialog{position:absolute;top:100%;left:0;z-index:900;display:flex;visibility:hidden;width:100%;opacity:0;transform:scale(0.96) translateZ(0) translateY(-20px);transform-origin:top right;transition:transform 300ms ease, opacity 300ms ease, visibility 300ms ease}@media (min-width: 36em){.duet-date-dialog.left{right:0;left:auto;width:auto}}@media (max-width: 35.9375em){.duet-date-dialog{position:fixed;top:0;right:0;bottom:0;transform:translateZ(0);transform-origin:bottom center;transition:opacity 400ms ease, visibility 400ms ease}}.duet-date-dialog.active{visibility:visible;opacity:1;transform:scale(1.0001) translateZ(0) translateY(0);transition-property:transform, opacity}@media (min-width: 36em){.duet-date-dialog.error{top:calc(100% - 28px);margin-top:4px}}.duet-date-dialog-wrapper{position:relative;z-index:600;width:100%;min-width:290px;max-width:310px;padding:16px 16px 20px;margin-top:8px;margin-left:auto;background:rgb(255, 255, 255);border:1px solid rgb(212, 223, 229);border-radius:4px;box-shadow:0 4px 10px 0 rgba(0, 41, 77, 0.15);transform:none}.duet-theme-turva .duet-date-dialog-wrapper{border-color:rgb(222, 224, 228)}@media (max-width: 35.9375em){.duet-date-dialog-wrapper{position:absolute;bottom:0;left:0;z-index:900;visibility:hidden;max-width:none;min-height:25em;padding:0 8% 20px;margin:0;border:0;border-radius:0;border-top-left-radius:4px;border-top-right-radius:4px;opacity:0;transform:translateZ(0) translateY(100%);transition:transform 400ms ease, opacity 400ms ease, visibility 400ms ease}.active .duet-date-dialog-wrapper{visibility:visible;opacity:1;transform:translateZ(0) translateY(0);transition-property:transform, opacity}}.duet-date-table{width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.25;color:rgb(8, 42, 77);text-align:center;border-spacing:0;border-collapse:collapse}.duet-date-table.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-date-table th{padding-bottom:8px;font-size:0.75rem;font-weight:600;line-height:1.25;text-transform:uppercase;letter-spacing:1px;text-decoration:none}.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;z-index:100;display:inline-block !important;width:36.9230769231px !important;height:36.9230769231px !important;min-height:initial !important;padding:0 !important;margin:0 !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;font-variant-numeric:tabular-nums;line-height:2.6 !important;vertical-align:initial !important;color:rgb(8, 42, 77) !important;text-align:center;cursor:pointer;background:transparent !important;border-radius:50% !important;transition:initial !important}.duet-theme-turva .duet-date-table-button{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\" !important;color:rgb(23, 28, 58) !important}.duet-date-table-button:hover{background:rgb(228, 241, 247) !important}.duet-theme-turva .duet-date-table-button:hover{background:rgb(255, 227, 228) !important}.duet-date-table-button.today{z-index:200;color:rgb(0, 75, 129) !important;background:rgb(240, 247, 250) !important;box-shadow:0 0 0 1px #0077b3 !important}.duet-theme-turva .duet-date-table-button.today{color:rgb(126, 2, 35) !important;background:rgb(255, 241, 241) !important;box-shadow:0 0 0 1px #171c3a !important}.selected .duet-date-table-button,:focus .duet-date-table-button{color:rgb(255, 255, 255) !important;outline:0;background:rgb(0, 119, 179) !important}.duet-theme-turva .selected .duet-date-table-button,.duet-theme-turva :focus .duet-date-table-button{color:rgb(255, 255, 255) !important;background:rgb(198, 12, 48) !important}.duet-date-table-button:active{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8);z-index:200;color:rgb(255, 255, 255) !important;background:rgb(0, 119, 179) !important}.duet-theme-turva .duet-date-table-button:active,.duet-date-table-button:active.duet-theme-turva,.duet-theme-turva2 .duet-date-table-button:active,.duet-date-table-button:active.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}.duet-theme-turva .duet-date-table-button:active{color:rgb(255, 255, 255) !important;background:rgb(198, 12, 48) !important}:focus .duet-date-table-button{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8);z-index:200}.duet-theme-turva :focus .duet-date-table-button,:focus .duet-date-table-button.duet-theme-turva,.duet-theme-turva2 :focus .duet-date-table-button,:focus .duet-date-table-button.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}.duet-date-table-button.disabled{color:rgb(127, 150, 165) !important;cursor:default;outline:none !important;background:transparent !important}.duet-theme-turva .duet-date-table-button.disabled{color:rgb(143, 147, 158) !important;outline:none !important;background:transparent !important}.duet-date-table-button.outside{color:rgb(127, 150, 165) !important;pointer-events:none;cursor:default;outline:none;background:rgb(245, 248, 250) !important;opacity:0.75}.duet-theme-turva .duet-date-table-button.outside{color:rgb(143, 147, 158);outline:none;background:rgb(245, 247, 250)}.duet-date-dialog-header{margin-bottom:16px !important;display:flex;align-items:center;justify-content:space-between;width:100%}.duet-date-dialog-buttons{white-space:nowrap}.duet-date-dialog-buttons ::part(button){border:0}.duet-date-dialog-select{position:relative;display:inline-flex;margin-top:4px}.duet-date-dialog-select .duet-date-dialog-select-label{position:relative;z-index:1;display:flex;align-items:center;width:100%;padding:0 8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1.25rem;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);pointer-events:none;border-radius:4px}.duet-theme-turva .duet-date-dialog-select .duet-date-dialog-select-label{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-date-dialog-select span{margin-right:4px}.duet-date-dialog-select select{position:absolute;top:0;left:0;z-index:2;width:100%;height:100%;font-size:1rem;cursor:pointer;opacity:0}.duet-date-dialog-select select:focus+.duet-date-dialog-select-label{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-date-dialog-select select:focus+.duet-date-dialog-select-label,.duet-date-dialog-select select:focus+.duet-date-dialog-select-label.duet-theme-turva,.duet-theme-turva2 .duet-date-dialog-select select:focus+.duet-date-dialog-select-label,.duet-date-dialog-select select:focus+.duet-date-dialog-select-label.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}.duet-date-dialog-mobile-header{position:relative;display:flex;align-items:center;justify-content:space-between;width:120%;padding:12px 20px;margin-bottom:20px;margin-left:-10%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-bottom:1px solid rgb(181, 198, 208)}@media (min-width: 36em){.duet-date-dialog-mobile-header{position:absolute;top:-8px;right:-8px;width:auto;padding:0;margin:0;overflow:visible;border:0}}.duet-theme-turva .duet-date-dialog-mobile-header{border-color:rgb(199, 202, 207)}.duet-date-dialog-mobile-header duet-label{display:inline-block;max-width:84%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (min-width: 36em){.duet-date-dialog-mobile-header duet-label{display:none}}.duet-date-picker-close{display:flex;align-items:center;justify-content:center;width:24px;height:24px !important;padding:0 !important;color:rgb(8, 42, 77) !important;-webkit-appearance:none;appearance:none;cursor:pointer;background:rgb(245, 248, 250) !important;border-radius:50%}@media (min-width: 36em){.duet-date-picker-close{opacity:0}}.duet-theme-turva .duet-date-picker-close{background:rgb(245, 247, 250) !important}.duet-date-picker-close:hover{background:rgb(245, 248, 250) !important}.duet-theme-turva .duet-date-picker-close:hover{background:rgb(245, 247, 250) !important}.duet-date-picker-close:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-date-picker-close:focus,.duet-date-picker-close:focus.duet-theme-turva,.duet-theme-turva2 .duet-date-picker-close:focus,.duet-date-picker-close:focus.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}@media (min-width: 36em){.duet-date-picker-close:focus{opacity:1}}:host(.duet-theme-turva2) .duet-theme-turva .duet-date-button{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-theme-turva.duet-date-input-has-focus :host(.duet-theme-turva2) .duet-theme-turva,:host(.duet-theme-turva2) .duet-theme-turva:focus{color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button{color:rgb(23, 42, 59) !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button:hover:not(.disabled){background:rgb(251, 225, 209) !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button.today{background:rgb(253, 247, 242) !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button:active{color:rgb(255, 255, 255) !important;background:rgb(230, 23, 64) !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button.outside{color:rgb(120, 145, 164) !important;background:rgb(245, 246, 247) !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-date-table-button.disabled{color:rgb(199, 202, 207) !important}:host(.duet-theme-turva2) .duet-theme-turva [aria-pressed=true] .duet-date-table-button,:host(.duet-theme-turva2) .duet-theme-turva :focus .duet-date-table-button{color:rgb(255, 255, 255) !important;background:rgb(230, 23, 64) !important}:host(.duet-theme-turva2) .duet-theme-turva.duet-date-table{color:rgb(23, 42, 59)}";
 
 const DuetDatePicker = class {
     constructor(hostRef) {
@@ -436,7 +455,131 @@ const DuetDatePicker = class {
                 fi: "Liian myöhäinen päivämäärä",
                 sv: "Datum för sent",
             },
+            valueMissing: {
+                en: "Date required",
+                fi: "Päivämäärä vaaditaan",
+                sv: "Datum krävs",
+            },
+        };
+        this.open = false;
+        this.focusedDay = new Date();
+        this.inputValue = "";
+        this.inputHasFocus = false;
+        this.internalValidityError = "";
+        /**
+         * Theme of the component.
+         */
+        this.theme = "";
+        /**
+         * Expands the date picker input to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Name of the date picker input.
+         */
+        this.name = "";
+        /**
+         * Adds a unique identifier for the date picker input.
+         */
+        this.identifier = "";
+        /**
+         * Label for the date picker input.
+         */
+        this.label = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * The currently active language. This setting changes the month/year/day.
+         * names and button labels as well as all screen reader labels.
+         * @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 = languageUtils.getLanguage();
+        /**
+         * Placeholder defaults.
+         * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+         */
+        this.placeholderDefaults = {
+            fi: "pp.kk.vvvv",
+            en: "dd.mm.yyyy",
+            sv: "dd.mm.åååå",
         };
+        /**
+         * Hint text to display before the user types into the date picker input.
+         * @default { fi: "pp.kk.vvvv", en: "dd.mm.yyyy", sv: "dd.mm.åååå" }
+         */
+        this.placeholder = languageUtils.getLocaleString(this.placeholderDefaults, this.language);
+        /**
+         * If form input field has a placeholder text, and user types anything (causing the text to dissapear),
+         * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
+         */
+        this.echoPlaceholder = false;
+        /**
+         * Makes the date picker input component disabled. This prevents users from being able to
+         * interact with the input, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Display the date picker input in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * Date picker offers built-in error messages for invalid or missing entries. These can be disabled if the application handles those.
+         */
+        this.disableBuiltInErrors = false;
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Set whether the input is required or not. Please note that this is necessary for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * browser from displaying its own validation errors.
+         */
+        this.required = false;
+        /**
+         * Forces the opening direction of the calendar modal to be always left or right.
+         * This setting can be useful when the input is smaller than the opening date picker
+         * would be as by default the picker always opens towards right.
+         */
+        this.direction = "right";
+        /**
+         * Tooltip to display next to the label of the date picker input.
+         */
+        this.tooltip = "";
+        /**
+         * With direction setting you can force the tooltip to always open towards left
+         * or right instead of automatically determining the direction.
+         */
+        this.tooltipDirection = "auto";
+        /**
+         * Date value. Must be in IS0-8601 format: YYYY-MM-DD
+         */
+        this.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.
+         */
+        this.min = "";
+        /**
+         * 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 min property.
+         */
+        this.max = "";
+        /**
+         * Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100
+         */
+        this.incrementYears = 10;
+        /**
+         * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
+         * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
+         * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
+         * unread by screen readers.
+         */
+        this.accessibleLiveError = "polite";
         this.enableActiveFocus = () => {
             this.focusTarget = "day-button";
         };
@@ -549,43 +692,6 @@ const DuetDatePicker = class {
                 this.setValue(parsed);
             }
         };
-        this.open = false;
-        this.focusedDay = new Date();
-        this.inputValue = "";
-        this.inputHasFocus = false;
-        this.internalValidityError = "";
-        this.theme = "";
-        this.expand = false;
-        this.name = "";
-        this.identifier = "";
-        this.label = "";
-        this.caption = undefined;
-        this.margin = "auto";
-        this.language = languageUtils.getLanguage();
-        this.placeholderDefaults = {
-            fi: "pp.kk.vvvv",
-            en: "dd.mm.yyyy",
-            sv: "dd.mm.åååå",
-        };
-        this.placeholder = languageUtils.getLocaleString(this.placeholderDefaults, this.language);
-        this.echoPlaceholder = false;
-        this.disabled = false;
-        this.error = "";
-        this.labelHidden = false;
-        this.role = undefined;
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.required = false;
-        this.direction = "right";
-        this.tooltip = "";
-        this.tooltipDirection = "auto";
-        this.value = "";
-        this.min = "";
-        this.max = "";
-        this.incrementYears = 10;
-        this.accessibleLiveError = "polite";
     }
     /**
      * This offers information relating to the current validity of the component.
@@ -725,10 +831,10 @@ const DuetDatePicker = class {
             tooLong: false,
             tooShort: false,
             typeMismatch: false,
-            valueMissing,
             badInput,
             rangeUnderflow,
             rangeOverflow,
+            valueMissing,
             valid: !(valueMissing || badInput || rangeUnderflow || rangeOverflow),
         };
     }
@@ -788,13 +894,13 @@ const DuetDatePicker = class {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (index.h(index.Host, { key: 'ffbf4028a27b7ce50696f3735314e12b48644e83', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, index.h("div", { key: 'be1ffaf5b189177ace8c0e537601247fb4c541e1', class: "duet-date" }, index.h(DatePickerInput, { key: '9f256d886f365c0ffb729b2e19d9695ae62d125d', hasFocus: this.inputHasFocus, value: this.value, valueAsDate: valueAsDate, formattedValue: this.inputValue, language: this.language, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, error: this.error || this.internalValidityError || null, role: this.role, required: this.required, theme: this.theme, tooltip: this.tooltip, tooltipDirection: this.tooltipDirection, labelHidden: this.labelHidden, placeholder: this.placeholder, inputLabel: this.label, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element), accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy, accessibleLiveError: this.accessibleLiveError, echoPlaceholder: this.echoPlaceholder, caption: this.caption })), index.h("div", { key: '083b96641cff2923eeb8b2a2811559674a3422a7', class: {
+        return (index.h(index.Host, { key: '37f45a71c4032ac634736a6920fb025734c3bbe2', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, index.h("div", { key: '61c829b503df044c1b67f460b7dacd7398078cba', class: "duet-date" }, index.h(DatePickerInput, { key: '8a04908b051939c5c8eb85cf7efdeac0d3a21d6c', hasFocus: this.inputHasFocus, value: this.value, valueAsDate: valueAsDate, formattedValue: this.inputValue, language: this.language, onInput: this.handleInputChange, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.toggleOpen, name: this.name, disabled: this.disabled, error: this.error || (!this.disableBuiltInErrors && this.internalValidityError) || null, role: this.role, required: this.required, theme: this.theme, tooltip: this.tooltip, tooltipDirection: this.tooltipDirection, labelHidden: this.labelHidden, placeholder: this.placeholder, inputLabel: this.label, identifier: this.identifier, buttonRef: element => (this.datePickerButton = element), inputRef: element => (this.datePickerInput = element), accessibleActiveDescendant: this.accessibleActiveDescendant, accessibleControls: this.accessibleControls, accessibleOwns: this.accessibleOwns, accessibleDescribedBy: this.accessibleDescribedBy, accessibleLiveError: this.accessibleLiveError, echoPlaceholder: this.echoPlaceholder, caption: this.caption })), index.h("div", { key: 'acd43f63f5682534c6bf78625fe43c6c86a46dc0', class: {
                 "duet-theme-turva": this.theme === "turva",
                 "duet-date-dialog": true,
                 left: this.direction === "left",
                 error: !!this.error,
                 active: this.open,
-            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, index.h("duet-overlay", { key: 'e996bbb11fb297a854c0b052a76bd901cc206b69', visible: this.open, "display-device": "x-small" }), index.h(focusUtils.FocusGuard, { key: 'fb326c88bc79b2fb26934d500ada890909df7353', moveFocusTo: this.focusedDayNode }), index.h("div", { key: '012cbf4ec8c8a86c8490df5858d0b51ce5cd8b92', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, index.h("duet-visually-hidden", { key: '0a70e49f2bc2719fd766d604026711557e741918', "aria-live": "polite" }, text.keyboardInstruction), index.h("div", { key: '79509cb586c8498c5f450e63759e27d6dc10622a', class: "duet-date-dialog-mobile-header" }, index.h(label.DuetInternalLabel, { key: '4377e01f607d4de35728b1cdc8cbc298f6b19142', margin: "none" }, this.label), index.h("button", { key: '3287aeee04a35a036c1cdf5e93851cbb1b2a18d7', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, index.h("duet-icon", { key: 'dfcef3d22fa0a905e5b7de34da2c7c669d2e4cef', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), index.h("duet-visually-hidden", { key: 'cdf305c57bc94b51d148077ddfd30b3c29a989a0' }, text.closeLabel))), index.h("div", { key: '7e0171347a1da56e751c38f36de27f199fa2ec47', class: "duet-date-dialog-header" }, index.h("div", { key: '83306e6e3f77c536f522c30ad516423d90e4bf6b', class: "duet-date-dialog-dropdowns" }, index.h("duet-visually-hidden", { key: 'd12b4ec4e07e8c657a61c2e9fb944d0e87367cd4' }, index.h("h2", { key: 'ed4f5fa368effa1c5d0d49f0fed98c062ce66aaa', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), index.h("duet-visually-hidden", { key: '3049c56b3982abd6e9609e8bb39ccff0ff5fe4a6' }, index.h("label", { key: 'f81eb75848f18de93c98a21e2475545f5b18b11a', htmlFor: this.monthSelectId }, text.monthSelectLabel)), index.h("div", { key: '5cd66e4fbf36396e710f351fd7c36459a8515804', class: "duet-date-dialog-select" }, index.h("select", { key: '3dfa3aa9d7b96f84500d8af3b6c5dd6ff1325b20', id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (index.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)))), index.h("div", { key: '1fb7b3f4fa0ecd6c9cf95613c50200df097e919c', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, index.h("span", { key: '99a67cc02351674b14ffb24949672d2a02a48324' }, text.monthLabelsShort[focusedMonth]), index.h("duet-icon", { key: 'a7a4c1b2f6b361cd51737e60d59c26c97abe1a47', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), index.h("duet-visually-hidden", { key: '49515f341552fba5f3151b093c2a5b1ddc53ee07' }, index.h("label", { key: '13f6235f20b354b5bece44b65e1b05f8dfa355dd', htmlFor: this.yearSelectId }, text.yearSelectLabel)), index.h("div", { key: '4bd86d771eea83a8bd24387e91b09baa8e1a22ad', class: "duet-date-dialog-select" }, index.h("select", { key: '027f699ba8c1da2af2525c937474e23595173ed0', id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (index.h("option", { key: year, selected: year === focusedYear }, year)))), index.h("div", { key: '8b1b6158805a2bfac0bf1d11358d9ead7b053ef8', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, index.h("span", { key: 'a49b7c229199f49a8e791d30c6164dfcb0a35b18' }, this.focusedDay.getFullYear()), index.h("duet-icon", { key: 'bc944c5c5d76c6f3fb6da35e5afa384d101952d9', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), index.h("div", { key: '93a4f1129af6c3e723b951147d022243e053c3df', class: "duet-date-dialog-buttons" }, index.h("duet-action-button", { key: '5a13ca85a4fd737fedc9c7f5e623c3def16397ae', accessibleLabel: i18n[this.language].prevMonthLabel, actionName: i18n[this.language].prevMonthLabel, class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), index.h("duet-action-button", { key: '283fca10745ff21e1c0d0da2479121ef0d5ed890', accessibleLabel: i18n[this.language].nextMonthLabel, actionName: i18n[this.language].nextMonthLabel, class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), index.h(DatePickerMonth, { key: 'cc59e30b0a39e5a63682a2fb3da3c4080c7bc960', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), index.h(focusUtils.FocusGuard, { key: '9de58a8642b2f06882542924e86b3792f5bc54ad', moveFocusTo: this.closeButtonNode }))));
+            }, role: "dialog", "aria-modal": "true", "aria-hidden": this.open ? "false" : "true", "aria-labelledby": this.dialogLabelId, onTouchMove: this.handleTouchMove, onTouchStart: this.handleTouchStart, onTouchEnd: this.handleTouchEnd }, index.h("duet-overlay", { key: '88bd9a51351af2edf1e2e07f155c1eabbff10646', visible: this.open, "display-device": "x-small" }), index.h(focusUtils.FocusGuard, { key: '08fa3fd43496f0250e63598a879eb03ff81ade36', moveFocusTo: this.focusedDayNode }), index.h("div", { key: 'a7d8dd867afa616cd47543b8c47a160b710b70f3', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, index.h("duet-visually-hidden", { key: '81c99489839f6ceb28ac6f25f73a0d92f054b0bc', "aria-live": "polite" }, text.keyboardInstruction), index.h("div", { key: '404552e44ed007048db39d1d20108c6c38aca2bf', class: "duet-date-dialog-mobile-header" }, index.h(label.DuetInternalLabel, { key: 'd49183b544c8e2a4a23ca281a62b3c4be8a90ebf', margin: "none" }, this.label), index.h("button", { key: '3adb95e86f08e23c1b60e6e19ec3d9d23467f33f', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, index.h("duet-icon", { key: 'c500a093b3fdae7155e3a5aed30539f009f156c2', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), index.h("duet-visually-hidden", { key: '1f23e50c6c479195a622d512ac4ee5d866ebcd9b' }, text.closeLabel))), index.h("div", { key: '662972a21f2c4cd532471209c9d49e51142f0b25', class: "duet-date-dialog-header" }, index.h("div", { key: 'fb7cbfa6f3ccded04f8d481447c5847a1293d535', class: "duet-date-dialog-dropdowns" }, index.h("duet-visually-hidden", { key: '8aa30a4e48fcc57ee56d7564284ff219260e8d5f' }, index.h("h2", { key: '7a40dd8ca6344ac0ccf504ce73b476a3f5e4b0f6', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), index.h("duet-visually-hidden", { key: '7ef05a1a7fab5bebf6d24bc78bb9789efd85835e' }, index.h("label", { key: 'b93bb5d18acd17fb2bc22bc43c00d16199d254da', htmlFor: this.monthSelectId }, text.monthSelectLabel)), index.h("div", { key: '72f8d34639a3a7de933c91e781b9aafa8e3fb668', class: "duet-date-dialog-select" }, index.h("select", { key: 'a09e0ba04dfd0da49e8d141c8b2c520d49a6108d', id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (index.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)))), index.h("div", { key: '85e19eac15e8475ea1a891b49796c2999e9800b8', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, index.h("span", { key: 'ae692bf29092ba59affd6258f57ef9dcc1847f2e' }, text.monthLabelsShort[focusedMonth]), index.h("duet-icon", { key: 'aed73b3af5c337b8e7ff70699106d3c685206ff1', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), index.h("duet-visually-hidden", { key: '860526bf60d4e94dfd2c19a5eabcd049b8273d82' }, index.h("label", { key: '6852a9ff1990eddd80f8c0edfa59cc762d68fcc9', htmlFor: this.yearSelectId }, text.yearSelectLabel)), index.h("div", { key: '28bf2d2a99952eb203a2198f558b7ccba9ae99c3', class: "duet-date-dialog-select" }, index.h("select", { key: 'efafa17aa2c9306af0ca13dbee83cdefeed076b2', id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (index.h("option", { key: year, selected: year === focusedYear }, year)))), index.h("div", { key: '5d9f4154d302ea2733b72a2f613abd9f7f569be8', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, index.h("span", { key: 'a6996b5aa61aa5227048b4eb1b8cb227b0dcda33' }, this.focusedDay.getFullYear()), index.h("duet-icon", { key: '6c999d099466d7b9ac2dd54ba7cf9b80732d82ef', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), index.h("div", { key: '7c63a65698b7a07d10c9b75ad21a6c7585c99034', class: "duet-date-dialog-buttons" }, index.h("duet-action-button", { key: '3599aaffa6d0b601b35cfa244faa11b705724ef0', accessibleLabel: i18n[this.language].prevMonthLabel, actionName: i18n[this.language].prevMonthLabel, class: "duet-date-dialog-prev", onClick: this.handlePreviousMonthClick, disabled: prevMonthDisabled, "icon-name": "action-arrow-left-small" }, text.prevMonthLabel), index.h("duet-action-button", { key: 'dfff287908a10fd3b84abbd643af6d095bb70537', accessibleLabel: i18n[this.language].nextMonthLabel, actionName: i18n[this.language].nextMonthLabel, class: "duet-date-dialog-next", onClick: this.handleNextMonthClick, disabled: nextMonthDisabled, "icon-name": "action-arrow-right-small" }, text.nextMonthLabel))), index.h(DatePickerMonth, { key: '4f9b1c1fd0791045a5d04055e1c61182f11ebe86', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), index.h(focusUtils.FocusGuard, { key: '06daea4e6567faa83c290236d3bafd2ed6bb310e', moveFocusTo: this.closeButtonNode }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
@@ -804,6 +910,6 @@ const DuetDatePicker = class {
         "required": ["updateValidity"]
     }; }
 };
-DuetDatePicker.style = DuetDatePickerStyle0;
+DuetDatePicker.style = duetDatePickerCss;
 
 exports.duet_date_picker = DuetDatePicker;

package/lib/cjs/duet-divider_2.cjs.entry.js

@@ -3,21 +3,28 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-CKsfMbRW.js');
+var themeableComponent = require('./themeable-component-BuC0WY98.js');
+var tokenUtils = require('./token-utils-COKjUxmn.js');
+require('./tokens.module-Bhh9B2g8.js');
 
-const index = require('./index-21e67ab3.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const tokenUtils = require('./token-utils-5000595c.js');
-require('./tokens.module-7c947029.js');
-
-const duetDividerCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}.duet-divider{-webkit-user-select:none;user-select:none;display:block;width:100%;height:1px;margin-top:36px !important;margin-bottom:28px;background:rgb(212, 223, 229)}.duet-divider.duet-p-0{padding:0 !important}.duet-divider.duet-m-0{margin:0 !important}.duet-divider.duet-m-s{margin-bottom:16px !important;margin-top:0 !important}.duet-divider.duet-theme-turva{background:rgb(222, 224, 228)}";
-const DuetDividerStyle0 = duetDividerCss;
+const duetDividerCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;display:block;width:100%}.duet-divider{-webkit-user-select:none;user-select:none;display:block;width:100%;height:1px;margin-top:var(--divider-margin, 36px) !important;margin-right:var(--divider-margin, 0);margin-bottom:var(--divider-margin, 28px);margin-left:var(--divider-margin, 0);background:rgb(212, 223, 229)}.duet-divider.duet-p-0{padding:0 !important}.duet-divider.duet-m-0{margin:0 !important}.duet-divider.duet-m-s{margin-bottom:16px !important;margin-top:0 !important}.duet-divider.duet-theme-turva{background:rgb(222, 224, 228)}:host(.duet-theme-turva2) .duet-divider.duet-theme-turva{background:rgb(212, 221, 226)}";
 
 const DuetDivider = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Theme of the divider.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Custom color, as a design token entered in camelCase or kebab-case.
+         * Example: "color-primary".
+         */
         this.color = "";
     }
     /**
@@ -32,7 +39,7 @@ const DuetDivider = class {
      */
     render() {
         const background = tokenUtils.getColorByName(this.color);
-        return (index.h("div", { key: '64511b39c68988b15d35f49ae4d6416b0937d6f2', class: {
+        return (index.h("div", { key: '99327b6d34622f91cf6916aecf6b544075d53573', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-m-s": this.margin === "small",
                 "duet-divider": true,
@@ -41,16 +48,25 @@ const DuetDivider = class {
     }
     get element() { return index.getElement(this); }
 };
-DuetDivider.style = DuetDividerStyle0;
+DuetDivider.style = duetDividerCss;
 
-const duetSpacerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:12px;min-width:12px;height:12px}@media (min-width: 36em){:host{width:16px;min-width:16px;height:16px}}:host(.duet-spacer-horizontal){display:inline-block;height:100% !important}:host(.duet-spacer-horizontal.xx-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xx-small){width:4px;min-width:4px}}:host(.duet-spacer-horizontal.x-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.x-small){width:8px;min-width:8px}}:host(.duet-spacer-horizontal.small){width:8px;min-width:8px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.small){width:12px;min-width:12px}}:host(.duet-spacer-horizontal.medium){height:100%}:host(.duet-spacer-horizontal.large){width:16px;min-width:16px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.large){width:20px;min-width:20px}}:host(.duet-spacer-horizontal.x-large){width:20px;min-width:20px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.x-large){width:28px;min-width:28px}}:host(.duet-spacer-horizontal.xx-large){width:28px;min-width:28px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xx-large){width:36px;min-width:36px}}:host(.duet-spacer-horizontal.xxx-large){width:36px;min-width:36px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xxx-large){width:48px;min-width:48px}}:host(.duet-spacer-horizontal.xxxx-large){width:48px;min-width:48px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xxxx-large){width:72px;min-width:72px}}:host(.duet-spacer-vertical.xx-small){width:100%;height:4px;min-height:4px}:host(.duet-spacer-vertical.x-small){width:100%;height:4px;min-height:4px}@media (min-width: 36em){:host(.duet-spacer-vertical.x-small){height:8px;min-height:8px}}:host(.duet-spacer-vertical.small){width:100%;height:8px;min-height:8px}@media (min-width: 36em){:host(.duet-spacer-vertical.small){height:12px;min-height:12px}}:host(.duet-spacer-vertical.medium){width:100%}:host(.duet-spacer-vertical.large){width:100%;height:16px;min-height:16px}@media (min-width: 36em){:host(.duet-spacer-vertical.large){height:20px;min-height:20px}}:host(.duet-spacer-vertical.x-large){width:100%;height:20px;min-height:20px}@media (min-width: 36em){:host(.duet-spacer-vertical.x-large){height:28px;min-height:28px}}:host(.duet-spacer-vertical.xx-large){width:100%;height:28px;min-height:28px}@media (min-width: 36em){:host(.duet-spacer-vertical.xx-large){height:36px;min-height:36px}}:host(.duet-spacer-vertical.xxx-large){width:100%;height:36px;min-height:36px}@media (min-width: 36em){:host(.duet-spacer-vertical.xxx-large){height:48px;min-height:48px}}:host(.duet-spacer-vertical.xxxx-large){width:100%;height:48px;min-height:48px}@media (min-width: 36em){:host(.duet-spacer-vertical.xxxx-large){height:72px;min-height:72px}}:host(.duet-spacer-xx-small){display:none}@media (max-width: 22.5em){:host(.duet-spacer-xx-small){display:block}}:host(.duet-spacer-x-small){display:none}@media (max-width: 35.9375em){:host(.duet-spacer-x-small){display:block}}:host(.duet-spacer-small){display:none}@media (min-width: 36em){:host(.duet-spacer-small){display:block}}:host(.duet-spacer-medium){display:none}@media (min-width: 48em){:host(.duet-spacer-medium){display:block}}:host(.duet-spacer-large){display:none}@media (min-width: 62em){:host(.duet-spacer-large){display:block}}:host(.duet-spacer-x-large){display:none}@media (min-width: 64.0625em){:host(.duet-spacer-x-large){display:block}}:host(.duet-spacer-xx-large){display:none}@media (min-width: 76.25em){:host(.duet-spacer-xx-large){display:block}}";
-const DuetSpacerStyle0 = duetSpacerCss;
+const duetSpacerCss = ":host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;position:relative;display:block;width:12px;min-width:12px;height:12px}@media (min-width: 36em){:host{width:16px;min-width:16px;height:16px}}:host(.duet-spacer-horizontal){display:inline-block;height:100% !important}:host(.duet-spacer-horizontal.xx-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xx-small){width:4px;min-width:4px}}:host(.duet-spacer-horizontal.x-small){width:4px;min-width:4px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.x-small){width:8px;min-width:8px}}:host(.duet-spacer-horizontal.small){width:8px;min-width:8px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.small){width:12px;min-width:12px}}:host(.duet-spacer-horizontal.medium){height:100%}:host(.duet-spacer-horizontal.large){width:16px;min-width:16px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.large){width:20px;min-width:20px}}:host(.duet-spacer-horizontal.x-large){width:20px;min-width:20px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.x-large){width:28px;min-width:28px}}:host(.duet-spacer-horizontal.xx-large){width:28px;min-width:28px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xx-large){width:36px;min-width:36px}}:host(.duet-spacer-horizontal.xxx-large){width:36px;min-width:36px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xxx-large){width:48px;min-width:48px}}:host(.duet-spacer-horizontal.xxxx-large){width:48px;min-width:48px;height:100%}@media (min-width: 36em){:host(.duet-spacer-horizontal.xxxx-large){width:72px;min-width:72px}}:host(.duet-spacer-vertical.xx-small){width:100%;height:4px;min-height:4px}:host(.duet-spacer-vertical.x-small){width:100%;height:4px;min-height:4px}@media (min-width: 36em){:host(.duet-spacer-vertical.x-small){height:8px;min-height:8px}}:host(.duet-spacer-vertical.small){width:100%;height:8px;min-height:8px}@media (min-width: 36em){:host(.duet-spacer-vertical.small){height:12px;min-height:12px}}:host(.duet-spacer-vertical.medium){width:100%}:host(.duet-spacer-vertical.large){width:100%;height:16px;min-height:16px}@media (min-width: 36em){:host(.duet-spacer-vertical.large){height:20px;min-height:20px}}:host(.duet-spacer-vertical.x-large){width:100%;height:20px;min-height:20px}@media (min-width: 36em){:host(.duet-spacer-vertical.x-large){height:28px;min-height:28px}}:host(.duet-spacer-vertical.xx-large){width:100%;height:28px;min-height:28px}@media (min-width: 36em){:host(.duet-spacer-vertical.xx-large){height:36px;min-height:36px}}:host(.duet-spacer-vertical.xxx-large){width:100%;height:36px;min-height:36px}@media (min-width: 36em){:host(.duet-spacer-vertical.xxx-large){height:48px;min-height:48px}}:host(.duet-spacer-vertical.xxxx-large){width:100%;height:48px;min-height:48px}@media (min-width: 36em){:host(.duet-spacer-vertical.xxxx-large){height:72px;min-height:72px}}:host(.duet-spacer-xx-small){display:none}@media (max-width: 22.5em){:host(.duet-spacer-xx-small){display:block}}:host(.duet-spacer-x-small){display:none}@media (max-width: 35.9375em){:host(.duet-spacer-x-small){display:block}}:host(.duet-spacer-small){display:none}@media (min-width: 36em){:host(.duet-spacer-small){display:block}}:host(.duet-spacer-medium){display:none}@media (min-width: 48em){:host(.duet-spacer-medium){display:block}}:host(.duet-spacer-large){display:none}@media (min-width: 62em){:host(.duet-spacer-large){display:block}}:host(.duet-spacer-x-large){display:none}@media (min-width: 64.0625em){:host(.duet-spacer-x-large){display:block}}:host(.duet-spacer-xx-large){display:none}@media (min-width: 76.25em){:host(.duet-spacer-xx-large){display:block}}";
 
 const DuetSpacer = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Size variation of the spacer. Can be any of the spacing tokens.
+         */
         this.size = "medium";
+        /**
+         * Direction of the space added.
+         */
         this.direction = "vertical";
+        /**
+         * Adjusts the breakpoint where the spacer is shown in. The functionality
+         * follows 1:1 the media queries defined in design tokens.
+         */
         this.breakpoint = "";
     }
     /**
@@ -58,7 +74,7 @@ const DuetSpacer = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '2aa5669c773f8841ad33637ee24c845c7eeb5dd2', class: {
+        return (index.h(index.Host, { key: '6765403ee0beffd36f0e97c767260714c18bdc19', class: {
                 "duet-spacer": true,
                 "duet-spacer-xx-small": this.breakpoint === "xx-small",
                 "duet-spacer-x-small": this.breakpoint === "x-small",
@@ -72,7 +88,7 @@ const DuetSpacer = class {
             } }));
     }
 };
-DuetSpacer.style = DuetSpacerStyle0;
+DuetSpacer.style = duetSpacerCss;
 
 exports.duet_divider = DuetDivider;
 exports.duet_spacer = DuetSpacer;