@duetds/components 10.4.0 → 10.6.0

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

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-Cwhi6_oZ.js';
-import { D as DuetInternalLabel } from './label-CyQlly6Z.js';
-import { i as inheritGlobalTheme } from './themeable-component-D_FVcjsD.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-D3450NfA.js';
+import { D as DuetInternalLabel } from './label-C1HF2o4Y.js';
+import { i as inheritGlobalTheme } from './themeable-component-QHdUfcat.js';
 import { c as createID } from './create-id-Cfr_DJqU.js';
-import { F as FocusGuard } from './focus-utils-Dokkd7xz.js';
-import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-LZh-sc2s.js';
-import { c as checkNamedSlotElement, p as proxyInputToSlot } from './slot-utils-CEZnAp61.js';
+import { F as FocusGuard } from './focus-utils-C4oaajGr.js';
+import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-D4WVl8Ph.js';
+import { c as checkNamedSlotElement, p as proxyInputToSlot } from './slot-utils-Dxcjtmp3.js';
 import { g as getDefaultExportFromCjs } from './_commonjsHelpers-DvwKrUS6.js';
 import './string-utils-C6E9F6QT.js';
 
@@ -276,6 +276,13 @@ function setYear(date, year) {
     d.setFullYear(year);
     return d;
 }
+/**
+ * Check if date falls on a Saturday or Sunday
+ */
+function isWeekend(date) {
+    const day = date.getDay();
+    return day === 0 || day === 6;
+}
 /**
  * Check if date is within a min and max
  */
@@ -339,6 +346,88 @@ const DatePickerDay = ({ focusedDay, today, day, language, onDaySelect, onKeyboa
         h("span", { class: { "duet-date-table-button": true, outside: isOutsideRange, disabled: isDisabled, today: isToday } }, day.getDate())));
 };
 
+const holidaysByYear = new Map();
+/**
+ * Calculate the date of Easter Sunday for a given year using the
+ * Meeus/Jones/Butcher Gregorian algorithm.
+ */
+function getEasterSunday(year) {
+    const a = year % 19;
+    const b = Math.floor(year / 100);
+    const c = year % 100;
+    const d = Math.floor(b / 4);
+    const e = b % 4;
+    const f = Math.floor((b + 8) / 25);
+    const g = Math.floor((b - f + 1) / 3);
+    const h = (19 * a + b - d - g + 15) % 30;
+    const i = Math.floor(c / 4);
+    const k = c % 4;
+    const l = (32 + 2 * e + 2 * i - h - k) % 7;
+    const m = Math.floor((a + 11 * h + 22 * l) / 451);
+    const monthAndDay = h + l - 7 * m + 114;
+    const month = Math.floor(monthAndDay / 31);
+    const day = (monthAndDay % 31) + 1;
+    return new Date(year, month - 1, day);
+}
+/**
+ * Midsummer Eve is the Friday falling between 19 and 25 June (inclusive).
+ */
+function getMidsummerEve(year) {
+    for (let day = 19; day <= 25; day++) {
+        const date = new Date(year, 5, day);
+        if (date.getDay() === 5) {
+            return date;
+        }
+    }
+}
+/**
+ * Finnish bank holidays for a given year, as published by the Bank of Finland:
+ * https://www.suomenpankki.fi/en/money-and-payments/bank-holidays/
+ */
+function getFinnishBankHolidays(year) {
+    if (holidaysByYear.has(year)) {
+        return holidaysByYear.get(year);
+    }
+    const easterSunday = getEasterSunday(year);
+    const holidays = [
+        new Date(year, 0, 1), // New Year's Day
+        new Date(year, 0, 6), // Epiphany
+        addDays(easterSunday, -2), // Good Friday
+        addDays(easterSunday, 1), // Easter Monday
+        new Date(year, 4, 1), // May Day
+        addDays(easterSunday, 39), // Ascension Day
+        getMidsummerEve(year), // Midsummer Eve
+        new Date(year, 11, 6), // Independence Day
+        new Date(year, 11, 24), // Christmas Eve
+        new Date(year, 11, 25), // Christmas Day
+        new Date(year, 11, 26), // Boxing Day
+    ];
+    holidaysByYear.set(year, holidays);
+    return holidays;
+}
+function isFinnishBankHoliday(date) {
+    return getFinnishBankHolidays(date.getFullYear()).some(holiday => isEqual(holiday, date));
+}
+
+function parseDisallowedDates(disallowedDates) {
+    if (!disallowedDates) {
+        return [];
+    }
+    return Array.isArray(disallowedDates) ? disallowedDates : disallowedDates.split(",").map(date => date.trim());
+}
+/**
+ * Check if a date is disallowed by any of the given weekend/bank-holiday/explicit-date rules
+ */
+function isDateDisallowed(date, options) {
+    if (options.disallowWeekends && isWeekend(date)) {
+        return true;
+    }
+    if (options.disallowBankHolidays && isFinnishBankHoliday(date)) {
+        return true;
+    }
+    return parseDisallowedDates(options.disallowedDates).some(isoDate => isEqual(parseISODate(isoDate), date));
+}
+
 /**
  * Creates an array representing an inclusive numeric range.
  * `from` must be less than `to`
@@ -398,7 +487,7 @@ function createShortcuts(shortcuts) {
     };
 }
 
-const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme, language, min, max, onDateSelect, onKeyboardNavigation, focusedDayRef, onFocusEnter, onFocusExit, }) => {
+const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme, language, min, max, disallowWeekends, disallowBankHolidays, disallowedDates, onDateSelect, onKeyboardNavigation, focusedDayRef, onFocusEnter, onFocusExit, }) => {
     const { dayLabels } = i18n[language];
     const today = new Date();
     const days = getViewOfMonth(focusedDate);
@@ -416,7 +505,8 @@ const DatePickerMonth = ({ selectedDate, focusedDate, labelledById, theme, langu
             h("thead", null,
                 h("tr", null, dayLabels.map(label => (h("th", { scope: "col" },
                     h("span", { "aria-hidden": "true" }, label.substr(0, 2))))))),
-            h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (h(DatePickerDay, { day: day, today: today, language: language, focusedDay: focusedDate, inRange: inRange(day, min, max), isSelected: isEqual(day, selectedDate), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, ref: el => {
+            h("tbody", null, chunk(days, 7).map(week => (h("tr", { class: "duet-date-table-row" }, week.map(day => (h(DatePickerDay, { day: day, today: today, language: language, focusedDay: focusedDate, inRange: inRange(day, min, max) &&
+                    !isDateDisallowed(day, { disallowWeekends, disallowBankHolidays, disallowedDates }), isSelected: isEqual(day, selectedDate), onDaySelect: onDateSelect, onKeyboardNavigation: onKeyboardNavigation, ref: el => {
                     if (el && isEqual(day, focusedDate)) {
                         focusedDayRef(el);
                     }
@@ -459,6 +549,11 @@ const DuetDatePicker = class {
                 fi: "Päivämäärä vaaditaan",
                 sv: "Datum krävs",
             },
+            customError: {
+                en: "Date not allowed",
+                fi: "Päivämäärä ei sallittu",
+                sv: "Datum inte tillåtet",
+            },
         };
         this.open = false;
         this.focusedDay = new Date();
@@ -567,6 +662,19 @@ const DuetDatePicker = class {
          * This setting can be used alone or together with the min property.
          */
         this.max = "";
+        /**
+         * Disallow selecting Saturdays and Sundays.
+         */
+        this.disallowWeekends = false;
+        /**
+         * Disallow selecting Finnish bank holidays, including Easter-based dates and Midsummer Eve.
+         */
+        this.disallowBankHolidays = false;
+        /**
+         * Disallow selecting specific dates. Accepts an array of ISO-8601 (YYYY-MM-DD) dates,
+         * or a comma-separated string of the same when set as an HTML attribute.
+         */
+        this.disallowedDates = [];
         /**
          * Increment to add to years, defaults to 10 for simplicity, if you need a larger selectionspace you can set it to 100
          */
@@ -669,7 +777,7 @@ const DuetDatePicker = class {
         this.handleDaySelect = (_event, day) => {
             const min = parseISODate(this.min);
             const max = parseISODate(this.max);
-            if (inRange(day, min, max)) {
+            if (inRange(day, min, max) && !isDateDisallowed(day, this)) {
                 this.setValue(day);
                 this.hide();
             }
@@ -690,6 +798,7 @@ const DuetDatePicker = class {
      * This offers information relating to the current validity of the component.
      * It follow as closely as possible the behaviour of the native date input.
      * Useful properties to inspect are badInput, valueMissing, rangeOverflow, rangeUnderflow.
+     * For disallowed dates property customError is set true.
      */
     get validity() {
         this.determineValidity();
@@ -814,9 +923,10 @@ const DuetDatePicker = class {
         const valueMissing = !valueAsDate && this.required;
         const rangeOverflow = valueAsDate ? !inRange(valueAsDate, null, parseISODate(this.max)) : false;
         const rangeUnderflow = valueAsDate ? !inRange(valueAsDate, parseISODate(this.min)) : false;
+        const customError = valueAsDate ? isDateDisallowed(valueAsDate, this) : false;
         this._validity = {
             patternMismatch: false,
-            customError: false,
+            customError,
             stepMismatch: false,
             tooLong: false,
             tooShort: false,
@@ -825,7 +935,7 @@ const DuetDatePicker = class {
             rangeUnderflow,
             rangeOverflow,
             valueMissing,
-            valid: !(valueMissing || badInput || rangeUnderflow || rangeOverflow),
+            valid: !(valueMissing || badInput || rangeUnderflow || rangeOverflow || customError),
         };
         if (this._validity.valid) {
             this.error = "";
@@ -888,20 +998,24 @@ const DuetDatePicker = class {
         if (maxDate) {
             maxYear = Math.min(maxYear, maxDate.getFullYear());
         }
-        return (h(Host, { key: '5ebd34bf6ba1033b890138e5523f45fecd17eaf4', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '8c4b995485be3c6b070ce738f3416db0d9683771', class: "duet-date" }, h(DatePickerInput, { key: 'c0b308099cd5c56790a1160d10a682551ce9da7e', 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, 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 })), h("div", { key: 'cca008327d5a939054a1b2abd748b08170b19a07', class: {
+        return (h(Host, { key: '574a2e443eb79af37f178f46845a206f561cba2e', class: { "duet-expand": this.expand, "duet-m-0": this.margin === "none" } }, h("div", { key: '62fa53292d9b464c3bfce84805c61abbc729b32c', class: "duet-date" }, h(DatePickerInput, { key: 'fd44ced264f1b867ffa5642a110d118cfd8a7977', 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, 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 })), h("div", { key: '7db19721a17bc48c0f232de5a91e9aee49435f6b', 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 }, h("duet-overlay", { key: 'fcb2d3f3fd5333529c2ebc82590a6a543112a5f4', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: '0de38fdb796337ec9448bcff1bb652776fdf6f60', moveFocusTo: this.focusedDayNode }), h("div", { key: '9950afbc58987e498e2e6734fd6af177c65d94a8', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '2394f33f1efd2e0626b2a1bc3642a73193798b13', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '74b68ad35d92ab0c2616be5466ea6b8b2c1a1451', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: '7385d9ef814cf4557cf903f705b38a7571369d0f', margin: "none" }, this.label), h("button", { key: '5ba61af3c6b024f1f3ef531b412e5c20243d83ca', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: '14e320af49eb06c184cfe918a67f278bdac888bf', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: 'b58668ebd6f0849ae6e8f0454800b4ceb916443e' }, text.closeLabel))), h("div", { key: '79a07d6373ca479f45808ff3eef1ea6239148b26', class: "duet-date-dialog-header" }, h("div", { key: '6f08a300db74dd1562c658334c8220fc1569228c', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: '400b1451a2180e0a189a5c1e7c27139647ec5539' }, h("h2", { key: '47225d656584304da5b114f0430e17cb74a38e53', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: 'b66a24df41db7807ed3c0d3f36d380a897360fa6' }, h("label", { key: 'aae8cf780c5452e1399421e177309ad7a9179803', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: 'f2bad2498489114a7bc0ffd6fc8c4f842b507e43', class: "duet-date-dialog-select" }, h("select", { key: '9d58e711523ace0781cc27947fb9ecc52bda8499', id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: '914f0bef1d172d4d5391991fd9f8206f7d0576df', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '7aebf3e0cbc22a117a5e155e0dd4518189f9b946' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'faf140d4032093b37db295f06e23ea761fa27c65', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: '66399d5d57f605fe4db9c13ee13bcf89f4d38efd' }, h("label", { key: '76256efb6db83d4165a903420b70e9a6d43a2e49', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: 'e871aa90559d85cad33752f52a6e538571e6984f', class: "duet-date-dialog-select" }, h("select", { key: 'af2e90cb3d28123c36c83853753be30beff06400', id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: 'a1487d1853c56fc62c20bf2b3df60cc73d666017', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: 'ad43c7efa4a93e4417c2051e000fe0f786b35612' }, this.focusedDay.getFullYear()), h("duet-icon", { key: '5c42115e3dd7c4a48e5cae87b5f03ed274087ba5', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: 'bc63edbea7a3b069774fc0b8766983f570479501', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: 'e3cb3ade86eeedbaf914d104ce9b638109708eb6', 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), h("duet-action-button", { key: '3d1b9df7ab5852d770d6c98285b73e002a9f4468', 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))), h(DatePickerMonth, { key: 'fb66dbdf2065a158a265490a6f7c0ace038919d5', 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 })), h(FocusGuard, { key: 'b40a59659930ae4a47fb6d8dd45f334e5fcdf026', 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 }, h("duet-overlay", { key: 'b762f7971ef0f3cfdba4338da8b66ddd932d739c', visible: this.open, "display-device": "x-small" }), h(FocusGuard, { key: '116f8a028515e1cabbdfe6c7c4fbe46a366e8417', moveFocusTo: this.focusedDayNode }), h("div", { key: '46df5dc4188ca94f1e9288cc94b369a56a951ee1', class: "duet-date-dialog-wrapper", onKeyDown: this.handleEscKey, ref: element => (this.dialogWrapperNode = element) }, h("duet-visually-hidden", { key: '1de44e1f4c44b9c97adb419fa7abf60f937b0fa2', "aria-live": "polite" }, text.keyboardInstruction), h("div", { key: '4a36684eab5f83211dcd9f04f240ad535f781376', class: "duet-date-dialog-mobile-header" }, h(DuetInternalLabel, { key: 'ef9877f7fc10b63428437a0ddbc07a787792617b', margin: "none" }, this.label), h("button", { key: '52b087991727aa7c32178aef85a7ff6a88b33f6e', class: "duet-date-picker-close", ref: element => (this.closeButtonNode = element), onClick: () => this.hide(), type: "button" }, h("duet-icon", { key: '9434a8ab91835101fca28fb28d3ba3b5fc768583', name: "navigation-close-small", margin: "none", color: "currentColor", size: "xx-small" }), h("duet-visually-hidden", { key: 'eaa01ae0b3e0270af1ee5b7777c4bf1c823ed55d' }, text.closeLabel))), h("div", { key: '8f59e259985eb3628f23dd8aa4edd90eab33ce45', class: "duet-date-dialog-header" }, h("div", { key: 'fd9e2ffede5b19a2008684f5587663372a769b0f', class: "duet-date-dialog-dropdowns" }, h("duet-visually-hidden", { key: '9bfda8777868d3a1a0b5dfb1146d4bd22ece9b9d' }, h("h2", { key: '4f8171f8b0bfabeb8ef0d44f604c668810572ba8', id: this.dialogLabelId, "aria-live": "polite", "aria-atomic": "true" }, text.monthLabels[focusedMonth], " ", this.focusedDay.getFullYear())), h("duet-visually-hidden", { key: 'f55f26894bef3e11233e3d72b62d70ff5f4f30fc' }, h("label", { key: '01d6cda898862ee9c82f018e4a875a54c8a4454c', htmlFor: this.monthSelectId }, text.monthSelectLabel)), h("div", { key: '758b166665674a916ab6d6b2c9fd78b6f51f27fd', class: "duet-date-dialog-select" }, h("select", { key: '548b2e7615f581454c64c30fe8e8c8d6dfe0d969', id: this.monthSelectId, class: "duet-date-month-select", ref: element => (this.monthSelectNode = element), onChange: this.handleMonthSelect }, text.monthLabels.map((month, i) => (h("option", { key: month, value: i, selected: i === focusedMonth, disabled: !inRange(new Date(focusedYear, i, 1), minDate ? startOfMonth(minDate) : null, maxDate ? endOfMonth(maxDate) : null) }, month)))), h("div", { key: '34d1e610de1d9f1c1436fdf1ffb2294742269696', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '84d57f82660038e7fb7d631e6eb03be0ef9c4315' }, text.monthLabelsShort[focusedMonth]), h("duet-icon", { key: 'f706752d81c80ae05bf13a19ed6cfa3b2d7262cc', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" }))), h("duet-visually-hidden", { key: 'fb67730ced2246377442fb2fd2ebf5086db34fbd' }, h("label", { key: '0d3d28925711a15b919004ad2384c719b9832f7d', htmlFor: this.yearSelectId }, text.yearSelectLabel)), h("div", { key: '371bb8461b655460da25e9982e17c0385fab8f71', class: "duet-date-dialog-select" }, h("select", { key: 'c466eed369426ad7cc78fbed3278a0523529920c', id: this.yearSelectId, class: "duet-date-year-select", onChange: this.handleYearSelect }, range(minYear, maxYear).map(year => (h("option", { key: year, selected: year === focusedYear }, year)))), h("div", { key: '78db254ed00d0d7b5104f4932415d970ff17e1f4', class: "duet-date-dialog-select-label", "aria-hidden": "true" }, h("span", { key: '9a66b0dad5bf39fd769cd851cb529b4568310d9d' }, this.focusedDay.getFullYear()), h("duet-icon", { key: 'a68a8da9385f631020ba28389caf1b611def6676', name: "action-arrow-down-small", color: "currentColor", margin: "none", size: "xxx-small" })))), h("div", { key: 'd1dd09f7da7f1e9d50cdd79ae97d13ba4d89be25', class: "duet-date-dialog-buttons" }, h("duet-action-button", { key: 'e7b3c41d7d56f2c24b4e69db80e4c8fc2e0395a2', 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), h("duet-action-button", { key: '980a6a1316a3f0b64a0ae62dd80d3494ea855ae8', 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))), h(DatePickerMonth, { key: '8524700a8665fe9b8edc04bd6b90b4aacc1eeea0', selectedDate: valueAsDate, focusedDate: this.focusedDay, onDateSelect: this.handleDaySelect, onKeyboardNavigation: this.handleKeyboardNavigation, labelledById: this.dialogLabelId, language: this.language, theme: this.theme, min: minDate, max: maxDate, disallowWeekends: this.disallowWeekends, disallowBankHolidays: this.disallowBankHolidays, disallowedDates: this.disallowedDates, focusedDayRef: element => (this.focusedDayNode = element), onFocusEnter: this.enableActiveFocus, onFocusExit: this.disableActiveFocus })), h(FocusGuard, { key: '8b92a3d7d025848e2e3c976e9c091364b52b7f96', moveFocusTo: this.closeButtonNode }))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
         "min": ["updateValidity"],
         "max": ["updateValidity"],
         "value": ["updateValidity", "updateInternalValue"],
-        "required": ["updateValidity"]
+        "required": ["updateValidity"],
+        "inputValue": ["updateValidity"],
+        "disallowWeekends": ["updateValidity"],
+        "disallowBankHolidays": ["updateValidity"],
+        "disallowedDates": ["updateValidity"]
     }; }
 };
 DuetDatePicker.style = duetDatePickerCss;

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

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, g as getElement, H as Host } from './index-Cwhi6_oZ.js';
-import { i as inheritGlobalTheme } from './themeable-component-D_FVcjsD.js';
-import { g as getColorByName } from './token-utils-B0KAgyj_.js';
-import './tokens.module-DEzE2U5T.js';
+import { r as registerInstance, h, g as getElement, H as Host } from './index-D3450NfA.js';
+import { i as inheritGlobalTheme } from './themeable-component-QHdUfcat.js';
+import { g as getColorByName } from './token-utils-BILzD7LX.js';
+import './tokens.module-kkZE1C6Z.js';
 
 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(212, 221, 226)}";
 
@@ -37,7 +37,7 @@ const DuetDivider = class {
      */
     render() {
         const background = getColorByName(this.color);
-        return (h("div", { key: 'a833c22a31c93caea94753696848ad720b5dc06d', class: {
+        return (h("div", { key: 'cfe1692393e236239489a12b1348ee3ceacbd6e8', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-m-s": this.margin === "small",
                 "duet-divider": true,
@@ -72,7 +72,7 @@ const DuetSpacer = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'f2f4fa377c08b91ba94544d234bc8ab55c8b35b5', class: {
+        return (h(Host, { key: 'b494dd7486aac50ad7c79b76b0476a66fb197a89', class: {
                 "duet-spacer": true,
                 "duet-spacer-xx-small": this.breakpoint === "xx-small",
                 "duet-spacer-x-small": this.breakpoint === "x-small",

package/lib/esm/duet-editable-table_3.entry.js

@@ -1,16 +1,16 @@
 /*!
  * Built with Duet Design System
  */
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, F as Fragment } from './index-Cwhi6_oZ.js';
-import { i as inheritGlobalTheme } from './themeable-component-D_FVcjsD.js';
+import { h, r as registerInstance, c as createEvent, H as Host, g as getElement, F as Fragment } from './index-D3450NfA.js';
+import { i as inheritGlobalTheme } from './themeable-component-QHdUfcat.js';
 import { f as fieldSorter, d as debounce } from './js-utils-BlUsLmbQ.js';
-import { i as isKeyboardClick } from './keyboard-utils-Db8rvjPI.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString, s as sanitizeString } from './language-utils-LZh-sc2s.js';
-import { q as spaceLarge, r as fontFamilyText, p as fontSizeMedium, u as colorSecondary, v as fontWeightSemiBold, w as lineHeightSmall, x as colorGrayDarker, y as spaceMedium, z as spaceXxSmall, A as colorGrayLightest, f as mediaQueryXSmall, B as spaceSmall, C as colorGrayLight, D as fontFamilyTextTurva, E as colorTurvaGray900, F as colorGrayDarkTurva, G as colorSecondaryTurva, H as colorGrayLightTurva, I as colorGrayDarkerTurva, j as colorPrimary, s as sizeHeader, J as sizeNavigation } from './tokens.module-DEzE2U5T.js';
-import { b as breakpointTokensUpTo, a as breakpointToToken } from './token-utils-B0KAgyj_.js';
+import { i as isKeyboardClick } from './keyboard-utils-BaefVzkx.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString, s as sanitizeString } from './language-utils-D4WVl8Ph.js';
+import { q as spaceLarge, r as fontFamilyText, p as fontSizeMedium, u as colorSecondary, v as fontWeightSemiBold, w as lineHeightSmall, x as colorForegroundSecondary, y as spaceMedium, z as spaceXxSmall, A as colorGrayDarker, B as colorGrayLightest, f as mediaQueryXSmall, C as spaceSmall, D as colorGrayLight, E as fontFamilyTextTurva, F as colorTurvaGray900, G as colorForegroundSecondaryTurva, H as colorSecondaryTurva, I as colorGrayLightTurva, J as colorGrayDarkerTurva, j as colorPrimary, s as sizeHeader, K as sizeNavigation } from './tokens.module-kkZE1C6Z.js';
+import { b as breakpointTokensUpTo, a as breakpointToToken } from './token-utils-BILzD7LX.js';
 import { c as createID } from './create-id-Cfr_DJqU.js';
 import { p as parsePossibleJSON } from './string-utils-C6E9F6QT.js';
-import { a as getError, g as getI18nError } from './errorcodes.utils-CqW0-HM8.js';
+import { a as getError, g as getI18nError } from './errorcodes.utils-S_WrUPeV.js';
 
 //simple functional component that renders the data in the table
 const TableData = ({ data, groupId, alignment }, _children) => {
@@ -227,7 +227,7 @@ const DuetEditableTable = class {
      * Render Methods
      */
     render() {
-        return (h(Host, { key: 'a0c3202194fcc3910b50193f2a4fcb3bd7d3a5d8', class: {
+        return (h(Host, { key: 'e8047048590b1dfac635e5a94a46fb1d61e4030b', class: {
                 [`duet-editable-table-${this.variation}`]: true,
                 "duet-editable-table": true,
                 [`duet-editable-table-${this.theme}`]: true,
@@ -237,7 +237,7 @@ const DuetEditableTable = class {
                 "duet-editable-table-actions": !!this.actions,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("duet-table", { key: '6e53631c212527e8702f9e9c8a1b9bc2b390c830', class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { key: '990481c1affeb11d6a6541a36a8f0118c961915c', role: this.accessibleRole }, h("caption", { key: 'f7b1bc44ab9fef0194485fdd6e49e11a306e365c' }, h("slot", { key: '2caecec6e5c024bdde6fa6bf72917914e2626752', name: "tcaption" })), h("thead", { key: 'c892dcd586814dcecddc46fbaf0319b04b6d9f16' }, this.hasHeadSlotFirst && (h("tr", { key: 'bfbac21dbab8afab7f34e952bd5803954be4991d' }, h("td", { key: '0a491ed1c4855d55b4dbc493a52029d657a08cc5', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '87c033e72a1bd3b87a51a4981b1b4939de66578d', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", { key: '2ab66f9b14fe592f7ee7e6293cdd56b3aed0190e' }, h("td", { key: 'edb3ae066371b6f5dc990f10f088246c0d9388d9', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: 'f57ebf07ee01c40cb47469b2fa07a706c4724dae', name: "thead-last" }))))), h("tbody", { key: '538b2de606132fcb272e5af1650cafb947fc5b2a' }, this.renderTableBody()), this.hasFootSlot && (h("tfoot", { key: '2f1a98dd550705933222f7179bc3ff4d6554d117' }, h("tr", { key: 'ecb9667d57ea85de7efa6fa0035fbfbb16c78a9e' }, h("td", { key: 'c78b25495de0621c55f70cce5131b1d192fc5e0e', class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { key: 'ed051b0e66c28fdbee565b33c1c394034a817a82', name: "tfoot" })))))))));
+            } }, h("duet-table", { key: 'abcb5c0dc22830d840bbf18144e66605207849d0', class: "duet-editable-table-table", sticky: this.sticky, stickyDistance: this.stickyDistance, margin: this.margin, theme: this.theme, variation: this.variation, breakpoint: this.breakpoint, "hide-head-visually": this.hideHeadVisually }, h("table", { key: '269ab86ebe745cfcf2e208e174e0914ea7b4fed8', role: this.accessibleRole }, h("caption", { key: '2753e748db0c5264c994a41b002e52a5641d2971' }, h("slot", { key: '567de210690137ae00e2ad40e2e2c1e1c733f3d7', name: "tcaption" })), h("thead", { key: 'ea6b829d344cd19619f667d75304614cbf60cc9d' }, this.hasHeadSlotFirst && (h("tr", { key: '84c66d116690df93737670dbbd0fc2b0e5c9f80b' }, h("td", { key: '3ab4954300f48b65cdc48f612045ef4296f3561d', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '9f32c90606e46036a34ca037bdfd61d4eae70fb2', name: "thead-first" })))), this.renderTableHeader(), this.hasHeadSlotLast && (h("tr", { key: '8be7b6223bd2ba7109db839efde2baab0f04c40f' }, h("td", { key: '1d6b0626d4b9dfdedc24f1118b53558e3ad80a54', class: "duet-editable-table-actions-menu", colSpan: 99 }, h("slot", { key: '247e4a043cc716d504a4827c415a3d73e8285046', name: "thead-last" }))))), h("tbody", { key: '778fd5a880190cffa0f9649b37839b2a0abedbe5' }, this.renderTableBody()), this.hasFootSlot && (h("tfoot", { key: '8c5e4045377ec3547c5005836f389cac2221dc62' }, h("tr", { key: '71959adb135cbcd6b7e19c9c9d4dcd3e799e8720' }, h("td", { key: 'ff1dc8216a9c918c1d9dec4aaf77454fd728a9ff', class: "duet-editable-table-footer-menu", colSpan: 99 }, h("slot", { key: '450238c070a9f72a326737a26b1f6ede2f9606d2', name: "tfoot" })))))))));
     }
     get element() { return getElement(this); }
 };
@@ -313,7 +313,7 @@ duet-table {
   th {
     font-weight: ${fontWeightSemiBold};
     line-height: ${lineHeightSmall};
-    color: ${colorGrayDarker};
+    color: ${colorForegroundSecondary};
     text-align: left;
   }
 
@@ -465,7 +465,7 @@ duet-table {
     }
   }
 
-  
+
 
   tbody th {
     padding-top: calc(${spaceLarge} * 2) !important;
@@ -651,7 +651,7 @@ duet-table {
     }
   }
 }
-  
+
 duet-table.duet-theme-turva table {
   font-family: ${fontFamilyTextTurva};
 }
@@ -661,7 +661,7 @@ duet-table.duet-theme-turva td {
 }
 
 duet-table.duet-theme-turva th {
-  color: ${colorGrayDarkTurva};
+  color: ${colorForegroundSecondaryTurva};
 }
 
 duet-table.duet-theme-turva tbody th {
@@ -882,7 +882,7 @@ const DuetTable = class {
         });
     }
     render() {
-        return (h(Host, { key: '02ed0a7f4b3c7504b0f6df2ee9e923f5afbca106', class: {
+        return (h(Host, { key: '968bf1e9fea756e09fd9c3c26596fcf857ad8a61', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -891,7 +891,7 @@ const DuetTable = class {
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-table-hide-head-visually": this.hideHeadVisually,
-            } }, h("slot", { key: '946a620f959caf19dc712844d81ebc345870757d' })));
+            } }, h("slot", { key: 'ccde2e16ca1aea0af30556faad3207a61a8219d0' })));
     }
     get element() { return getElement(this); }
     static get watchers() { return {
@@ -2149,10 +2149,10 @@ const DuetUpload = class {
             this.externalUploadButton.accessibleLabel = `${this.externalUploadButton.innerText}. ${caption}`;
         }
         // @ts-ignore
-        return (h(Host, { key: '855e27e55645747625669bf080e6f65423b9bbf0', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: '89d6b1b88260ccb7ffa2f4a3130fdf74d904e048', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: '10b9cdc44bd94871f538a9299ea6252f4375a864', name: "header" }), !this.files.size && (h("duet-empty-state", { key: '924905b1aafa76175b93f12dd6e7d7ac8ac5b5e3', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: 'f744c2afdb520cd0e69a15c0a942f6ecd8e30b75', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: 'da55dafcb732e24b895185995040decfe40382c6', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: '199e78733f262f857124540bbd055e7c6cbcaf6a', invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { key: 'd6327694548a1ee39188af3935c67d0a6eaead79', name: "filefooter" }), h("slot", { key: '718e1e5d1f7041d2d596ada75a717942b74999f6', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: 'd15f3fd09b07de11dc1f725bc9ee344889b6445f', margin: "none", size: "small" }, h("div", { key: '1e4e1c3a29338fa3339cd2de701ba3c776c1166a', class: "upload-bottom-caption" }, caption))), h("slot", { key: '90f1e8de4c8359df2b8dded1bf5211857ce48a79', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '431fb04536068eefdf974fc34f89f56e712674c9' }, h("duet-spacer", { key: 'c98d3f3e0f06d17b1b86ab40486a663ef8c6a75e', size: "large" }), h("duet-button", { key: '1f057848bdacb5e69ef63e2bfdc81e216271f455', id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel || `${this.buttonLabel}. ${caption}`, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached ||
+        return (h(Host, { key: '56a66fb13e2d5b1e975502e6c02e0374b464dab1', class: { "duet-m-0": this.margin === "none" } }, h("duet-fieldset", { key: '402d0cd0bfc53a1fd6d981227186277cf58ef428', "label-heading-level": this.headerHeadingLevel, "label-hidden": this.hideHeader, label: this.label }, h("slot", { key: '2e9c7748bbd2e39175cb19e2d3fa2a6c5b5e0d90', name: "header" }), !this.files.size && (h("duet-empty-state", { key: 'a7c200b271571a9758bbc92c91d0c0d761a8383f', id: this.labelId, part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", icon: "messaging-attachment" }, h("duet-paragraph", { key: '5bd08aa838e2b2fe41c7cda3895dea43ad14cdc2', margin: "none" }, this.fileListEmpty))), !!this.files.size && h("slot", { key: '1e874d98480606d31435b4e8c18e78b5562d5af3', name: "fileheader" }), !!this.files.size && (h("duet-upload-aria-status", { key: '2093949b2d42328009e91051a6c8e2cd3c8d66cb', invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })), !!this.files.size && this.renderUploadedItems(), !!this.files.size && h("slot", { key: '7f5376e608450c72e17e44360074667501fab26f', name: "filefooter" }), h("slot", { key: '0786ed3f222fea600dbe962f9fc8567de54fc612', name: "uploadfooter" }), this.captionOnBottom && (h("duet-caption", { key: 'c2a67358020739bb490e36f573fd9bf7f60cbb48', margin: "none", size: "small" }, h("div", { key: 'fdd83feb31ce19b351e40e28005c3081d69e0a6c', class: "upload-bottom-caption" }, caption))), h("slot", { key: 'bf1265497a10a890adc43104eebf251f1876cc32', name: "afterfooter" }), !this.hideButton && (h(Fragment, { key: '3e1d242d5a44cac89bf099556b2323a249d615b4' }, h("duet-spacer", { key: '664591d6c28c59f626e14e691fcdc9434c37a23b', size: "large" }), h("duet-button", { key: 'b688f7277f2d77bcc7bac03bb357b6a71302b1bf', id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel || `${this.buttonLabel}. ${caption}`, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel))), (this.fileMaxReached ||
             this.bytesMaxReached ||
             this.filesToUploadExceedsLimit ||
-            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, { key: '8169162805d7ec3a093344e09a4bd9241c1b9c58' }, h("duet-spacer", { key: '0f6500a4ada6c4b3c73f6524bf224ee1d79f0ae6', size: "medium" }), h("duet-alert", { key: '8bbc63eb777fa98ff0f797d970d66835ac6155a5', part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h("duet-visually-hidden", { key: '5fb70459ca757cc24041ce6e01414165ba6497b5', "aria-hidden": "true" }, h("input", { key: '808b15c23e12cf691f85e48e1a03106409b81565', ref: input => {
+            this.filesToUploadTotalSizeIsAboveMax) && (h(Fragment, { key: '1d525d949fe3b1f16cbad102b17ccb1662b6ebda' }, h("duet-spacer", { key: '0f9192d41feeb38243181a24cd8282f88f1c8615', size: "medium" }), h("duet-alert", { key: '6ff272d122f622205262c116a25a99dc889ffa6f', part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" }, this.fileMaxReached && getI18nError("duet-upload-301", this.errorCodes), this.bytesMaxReached && getI18nError("duet-upload-202", this.errorCodes), this.filesToUploadExceedsLimit && getI18nError("duet-upload-302", this.errorCodes), this.filesToUploadTotalSizeIsAboveMax && getI18nError("duet-upload-203", this.errorCodes)))), h("duet-visually-hidden", { key: '9c819c3fa17b4954699fe60bd343ff32188ae5da', "aria-hidden": "true" }, h("input", { key: 'bb9d9c02d82c35b46c9ed91a8f7340aeb6f69fb1', ref: input => {
                 this.nativeInput = input;
             }, accept: !this.limitSelection ? undefined : `${this.allowedMimetypes},${this.allowedExtensions}`, onBlur: this.onBlur, onFocus: this.onFocus, onChange: e => this.onChange(e), type: "file", class: {
                 "duet-upload": true,

package/lib/esm/duet-empty-state.entry.js

@@ -1,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-Cwhi6_oZ.js';
-import { i as inheritGlobalTheme } from './themeable-component-D_FVcjsD.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-D3450NfA.js';
+import { i as inheritGlobalTheme } from './themeable-component-QHdUfcat.js';
 
 const duetEmptyStateCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  border: 0;\n}\n\n:host {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n\n.duet-empty-state {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  border: 0;\n  width: 100%;\n  height: 100%;\n  padding: 48px;\n  color: rgb(8, 42, 77);\n  text-align: center;\n  background: rgb(245, 248, 250);\n  border-radius: 12px;\n}\n.duet-empty-state.padding-small {\n  padding: 36px;\n}\n.duet-empty-state.padding-large {\n  padding: 72px;\n}\n.duet-empty-state.warning {\n  background: rgb(255, 247, 221);\n}\n.duet-empty-state.duet-no-background {\n  background: none;\n}\n.duet-empty-state > div {\n  max-width: 800px;\n  margin: auto;\n}\n.duet-empty-state .duet-empty-state-heading {\n  font-size: 4vw;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-style: normal;\n  font-weight: 600;\n  line-height: 1.25;\n  color: rgb(8, 42, 77);\n  letter-spacing: 0;\n}\n@media (max-width: 27.5rem) {\n  .duet-empty-state .duet-empty-state-heading {\n    font-size: 1.1rem;\n  }\n}\n@media (min-width: 28.4090909091rem) {\n  .duet-empty-state .duet-empty-state-heading {\n    font-size: 1.1363636364rem;\n  }\n}\n@container (width < 576px) {\n  .duet-empty-state {\n    padding: 36px;\n  }\n  .duet-empty-state.padding-small {\n    padding: 28px;\n  }\n  .duet-empty-state.padding-large {\n    padding: 48px;\n  }\n}\n\n.duet-theme-turva.duet-empty-state {\n  color: rgb(23, 42, 59);\n}\n.duet-theme-turva.duet-empty-state:not(.warning):not(.duet-no-background) {\n  background: rgb(245, 246, 247);\n}\n.duet-theme-turva.duet-empty-state .duet-empty-state-heading {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-weight: 700;\n  color: rgb(23, 42, 59);\n}";
 
@@ -57,13 +57,13 @@ const DuetEmptyState = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '83c41a104ebe8f29f18a2d0754a822981edd2204' }, h("div", { key: 'c2b928a204ec58089c46368f0e7a73f2f6880633', class: {
+        return (h(Host, { key: 'bf9aa87672aa22b4e89cc0014f6918fd8389981f' }, h("div", { key: '21e1d1af1326ef9709a99695809cb6025bd8431a', class: {
                 "duet-empty-state": true,
                 [this.variation]: true,
                 [`padding-${this.padding}`]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-no-background": this.background === "none",
-            } }, this.icon !== "none" && this.getIcon(), this.heading && (h("div", { key: '8b6f183f2022ef6a5d00b93cb4b345d93e310d45' }, h("strong", { key: 'fd7369964488e3821b00cbf3493fa873ee5a969e', class: "duet-empty-state-heading" }, this.heading), h("duet-spacer", { key: '7b96f48b9587efa581fc84b2205a32e839e03ee7', size: "x-small" }))), h("div", { key: 'ea6a1f4c70a824c705e8f644f8e58f9768db8317' }, h("slot", { key: '77c8aa58fa27abf0635ea22f22fd7d5c06d151dc' })))));
+            } }, this.icon !== "none" && this.getIcon(), this.heading && (h("div", { key: 'dc994018199345c865ee6d242349dadd99f71b36' }, h("strong", { key: '4e758372f9785d9f54bfe969ddcb90a0ae1fee6d', class: "duet-empty-state-heading" }, this.heading), h("duet-spacer", { key: '7eedd7853ef4ea89bb434dc55a488132fa8a30ef', size: "x-small" }))), h("div", { key: '4d1817b68cd9e88627eb1725a06cd510ea10ed61' }, h("slot", { key: '4db106ff0912e6896ca74071580223340fb3df14' })))));
     }
     get element() { return getElement(this); }
 };

package/lib/esm/duet-fieldset.entry.js

@@ -1,10 +1,10 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-Cwhi6_oZ.js';
-import { i as inheritGlobalTheme } from './themeable-component-D_FVcjsD.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-D3450NfA.js';
+import { i as inheritGlobalTheme } from './themeable-component-QHdUfcat.js';
 import { c as createID } from './create-id-Cfr_DJqU.js';
-import { h as hasSlot } from './slot-utils-CEZnAp61.js';
+import { h as hasSlot } from './slot-utils-Dxcjtmp3.js';
 
 const duetFieldsetCss = "*,*::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;margin-bottom:12px !important;display:block;width:100%}:host(.duet-m-0){margin:0 !important}fieldset{position:relative;width:100%;min-width:0;border:0}fieldset legend{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;border:0 !important;clip:rect(1px, 1px, 1px, 1px) !important}.duet-legend-wrapper{position:relative;display:block;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:600;line-height:1.5;color:rgb(8, 42, 77);text-align:left;background:transparent}.duet-legend-wrapper.duet-legend-compact:not(.duet-legend-has-caption){line-height:1.25}.duet-fieldset-label{margin-bottom:12px !important;display:flex;margin-top:8px}.duet-legend-has-caption .duet-fieldset-label{margin-bottom:6px !important}@media (min-width: 48em){.duet-legend-has-tooltip.duet-legend-has-caption .duet-fieldset-label{margin-bottom:-3px !important}}.duet-fieldset-caption{margin-bottom:12px !important}.duet-fieldset-help{display:block;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;line-height:1.25;color:rgb(214, 28, 82);border-radius:4px}.duet-fieldset-help span{display:block;margin-top:12px}.duet-fieldset-help span.duet-m-0{margin-top:0}.duet-theme-turva .duet-fieldset-help{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(214, 28, 82)}::slotted(duet-tooltip){position:relative;top:4px}.duet-legend-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;border:0;clip:rect(0 0 0 0)}.duet-theme-turva .duet-legend-wrapper{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, 42, 59)}.duet-theme-turva .duet-fieldset-help{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(214, 28, 82)}";
 
@@ -75,20 +75,20 @@ const DuetFieldset = class {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'e1a788de39eaef07a1abaa996870dd726b226aee', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'e7d2b6ecb24666f6a563d4923bb228bdf7e8820d', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: 'dfc4801eaf8c1165b778701dffc06cb6c6729dab', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: '720a2326b5106d5a7665528aedf93a351173abd0', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
             // NVDA and VoiceOver do not yet support aria-errormessage
             // once they do, we can remove errors from the aria-describedby
             // aria-errormessage={this.error ? this.errorId : null}
             class: {
                 "duet-fieldset": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, h("legend", { key: '9412c1763b18075c6c6d585389c3ac9d22542f64', id: this.labelId }, h(this.labelHeadingLevel, { key: '9c1c5cfef779deef96e68e7f3760f0eeec8d347a' }, this.label), this.caption && h("span", { key: 'd166f280495ee9e156e705fe52455b18c5a13ea2' }, this.caption)), h("div", { key: 'e390d201c421bbd2086946b4548dc98d5c58fead', class: {
+            } }, h("legend", { key: 'a3e0f5a2079c07462370fe5b4953029868a34128', id: this.labelId }, h(this.labelHeadingLevel, { key: '8b09fc7c58d0cb9ce5228f420c16b7e753cbff32' }, this.label), this.caption && h("span", { key: '5505e5ff8f0fb05d0de2100a606281efc89de10d' }, this.caption)), h("div", { key: 'c283e26732c4a1a23ab92f2f69c470f8576a1295', class: {
                 "duet-legend-wrapper": true,
                 "duet-legend-has-caption": !!this.caption,
                 "duet-legend-has-tooltip": this.hasTooltip,
                 "duet-legend-hidden": this.labelHidden,
                 "duet-legend-compact": this.compactLabel,
-            } }, h("div", { key: '10861fb7ec43cc4aec34ae9b04b1b191dd7a0d5c', class: "duet-fieldset-label" }, h("span", { key: '63b295dc887c75eb4bc062d214bb5b6a899e0f83', "aria-hidden": "true" }, this.label), h("slot", { key: 'dc154b5f9980e99c525884e32f7811e36fe634fc', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '1803a70997b3d2de928d501cfb86864bfa3af614', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'c574d64b9a375d0af50bc0bed35ea0418139f579', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '48665d8be4d66036d4d69090d7a98ee01f99dbac' }), h("span", { key: '9815f8bf073a39267673baf538de5908b52758e9', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: '93bfa1f3fb33cf3bc23055948b416a18369b8497', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
+            } }, h("div", { key: '1ffa47a6b399b46b218a71a35e645f3c7f3e4699', class: "duet-fieldset-label" }, h("span", { key: '8f13839c07004cfa7b57c7e90a56a9416e5318cd', "aria-hidden": "true" }, this.label), h("slot", { key: '48871bac950c808682971d71b05bffb3e4d2f423', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '9a67fb599acf90e1b6711421f08b5f76776c9c2a', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '4b40741c7e05704d6c7d8226a926a6a38ceff851', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'f57fd8b8ab64c31c89e7daf22baa9c9ae1251cfa' }), h("span", { key: '3fc490294c332706136999063ea7b3091c95676d', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'f8b4d8ccd2a8d7b1b0ef640f55520278995fe80b', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
     }
     get element() { return getElement(this); }
 };

package/lib/esm/duet-file-chooser.entry.js

@@ -1,8 +1,8 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-Cwhi6_oZ.js';
-import { i as inheritGlobalTheme } from './themeable-component-D_FVcjsD.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-D3450NfA.js';
+import { i as inheritGlobalTheme } from './themeable-component-QHdUfcat.js';
 
 const duetFileChooserCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}.container{display:flex;flex-direction:row;gap:8px;align-items:center}.container .label{margin-bottom:8px}";
 
@@ -53,7 +53,7 @@ const DuetUploadItem = class {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '96ed40ea2f9ae846c2ad9654c04511e312933fcd' }, h("duet-visually-hidden", { key: '2092c91fbf71c47a422748e27741c8a2695d4d5f', "aria-hidden": "true" }, h("input", { key: '1e83b554493c852b23e14bd801f8c48a42c8790e', ref: input => {
+        return (h(Host, { key: 'f17176210e5f0675eb847b4d9d60594a226e3dab' }, h("duet-visually-hidden", { key: '3a0eef27ad35e9348f9047f8ad2dcf13c5a9ad76', "aria-hidden": "true" }, h("input", { key: '4c67d86c2f388fbd4e2914013b0611e973a24e35', ref: input => {
                 this.nativeInput = input;
             }, type: "file", class: {
                 "duet-upload": true,

package/lib/esm/duet-footer.entry.js

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent$1, h, F as Fragment, g as getElement } from './index-Cwhi6_oZ.js';
+import { r as registerInstance, c as createEvent$1, h, F as Fragment, g as getElement } from './index-D3450NfA.js';
 import { n as newWindowIcon } from './action-new-window-small-EH8_HdAm.js';
 import { a as DuetStringsExternalDefaults } from './common-strings-8RjiAqaE.js';
-import { i as inheritGlobalTheme } from './themeable-component-D_FVcjsD.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-Db8rvjPI.js';
-import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-LZh-sc2s.js';
-import { h as hasSlot } from './slot-utils-CEZnAp61.js';
+import { i as inheritGlobalTheme } from './themeable-component-QHdUfcat.js';
+import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-BaefVzkx.js';
+import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-D4WVl8Ph.js';
+import { h as hasSlot } from './slot-utils-Dxcjtmp3.js';
 import { p as parsePossibleJSON } from './string-utils-C6E9F6QT.js';
 import './_commonjsHelpers-DvwKrUS6.js';
 
@@ -165,16 +165,16 @@ const DuetFooter = class {
     render() {
         const text = getLocaleString(i18n, this.language);
         const copyrightLabel = this.theme === "turva" ? text.turva : text.lahi;
-        return (h("footer", { key: '803a027abb0c9d387f880a40cf4fa48cfdc96ab0', class: {
+        return (h("footer", { key: '41644e999245cd90d4c97839293f95bfa5d9d250', class: {
                 "duet-footer": true,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-footer-simple": this.variation === "simple",
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '46da624a2ea71bc94e7029110f2aa4b264e21a0b', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: 'bb5d3de968dc4d893e002294a3ab5106ca3676ad', class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '5cc2520a6657b134143ef4b54e8bc25cb4ec6f3f', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: '6172bf0124114fa0d1447d4cde52541c06513707', class: {
                 "duet-footer-top": true,
                 "duet-has-info": this.hasInfoSlot,
-            }, part: "top" }, h("div", { key: 'a3c27f3c9fbf54263b0e632307fe2ed39aeb9e46', class: "footer-top-logo" }, h("duet-logo", { key: '5f7440b81f78389724830f3e843c71de140ae05d', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: 'f0a8b5cdda02fbd0fbff1015320572900e12a16e', class: "footer-top-right-container" }, h("slot", { key: '2c9e48c0350b76dbb74c59cfbca727d1c579b7a5', name: "info" }), h("div", { key: '4df2f42f2dc49b084a94de90de892adac97866c9', class: "footer-top-items" }, this.processedItems &&
-            this.processedItems.map((item, index) => (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { ref: element => this.setDataAttributes(element, item), theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: this.getTopItemButtonIcon(item), "icon-right": !this.isMessagingLink(item.href), "icon-size": this.isMessagingLink(item.href) ? "medium" : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)))))))), h("slot", { key: '51d5f56fe14519205709b1cb02bcfa1b87e6a3c2', name: "extra" }), h("p", { key: '3e2b620a21d109d0f4119d5b2a8a1a5c1404ec5c', class: "duet-footer-menu", part: "menu" }, h("span", { key: '9a5becef9ceb454715ee6f560e3f9df8ae72357a', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '34b3c5e0d44b6a0497b7983ddde14380175618cc', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: 'd7defe3bd130ba7fb71731f71860351dbca3d726' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '4c708db5c94a113edcda458bd9375cdb382a3237', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
+            }, part: "top" }, h("div", { key: '8d7fa0e35487812a06867478b0d8c717e8cbc295', class: "footer-top-logo" }, h("duet-logo", { key: '88a405f43f8923aec01dfbe7637d8b693c24ee94', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '0945fb2a21d2621abd034763e50d30f047fa7734', class: "footer-top-right-container" }, h("slot", { key: '73eb607d6eae88968f7066c951f5f8ddf326f55e', name: "info" }), h("div", { key: '1c142d6053b4b3f9b0bae03289e9ad79849cade6', class: "footer-top-items" }, this.processedItems &&
+            this.processedItems.map((item, index) => (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { ref: element => this.setDataAttributes(element, item), theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: this.getTopItemButtonIcon(item), "icon-right": !this.isMessagingLink(item.href), "icon-size": this.isMessagingLink(item.href) ? "medium" : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)))))))), h("slot", { key: '86fc7e14e4fb80b35c4e81659c9e3b35d6c965c7', name: "extra" }), h("p", { key: 'f5ddbb6a4cbf19f70259d96ef786cd6b068f503f', class: "duet-footer-menu", part: "menu" }, h("span", { key: '9e2390e03d199fc50f6fb67181734a4ba71a38b8', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: 'c7b6bc951c3d2dc81abfcc4eac43d6d9061e9421', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: '87ef405d79957865d7cfd81f07fb400b9aa2ab1a' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '53c2ae3a42969730299aa948b8b6d42e9d765d32', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
     }
     get element() { return getElement(this); }
     static get watchers() { return {