@limetech/lime-elements 40.23.0 → 40.25.0

package/dist/esm/limel-date-picker.entry.js

@@ -1,15 +1,165 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BU9IJqli.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-D3SUrFhp.js';
+import { c as createLiveMessage } from './live-message-BKB4vu28.js';
 import { c as createRandomString } from './random-string-BrjD-ITe.js';
 import { i as isIOSDevice, a as isAndroidDevice } from './device-B-tmXAXV.js';
 import './sv-DpsDSi7k.js';
 import { m as moment } from './moment-_DadZLWp.js';
-import { a as getPrimarySubtag } from './language-VamkUr90.js';
+import { a as getPrimarySubtag, t as translations } from './translations--i932i_D.js';
 import { M as MDCTextField } from './component-CVihTrav.js';
+import './debounce-B67JMchz.js';
+import './isObject-BJQylLSL.js';
+import './toNumber-D6JYpQI9.js';
+import './isSymbol-ClAke5ga.js';
+import './isObjectLike-oiMYqRQ0.js';
 import './_commonjsHelpers-B85MJLTf.js';
 import './ponyfill-6YuZiAPi.js';
 import './component-CrjPGt1I.js';
 import './component-CyFeUQ0l.js';
 
+// Literals first, so an `l` inside `[...]` is not expanded. Then longest
+// first, since alternation takes the first match, not the longest.
+const LONG_DATE_FORMAT_TOKENS = /\[[^\][]*\]|LTS|LLLL|LLL|LL|LT|L|lts|llll|lll|ll|lt|l/g;
+// Literals, tokens (runs of one repeated letter) and separators.
+const FORMAT_PARTS = /\[[^\][]*\]|([a-zA-Z])\1*|[^a-zA-Z[]+/g;
+// Tokens moment parses leniently as one or two digits.
+const ONE_OR_TWO_DIGIT_TOKENS = /^([MDHhkmsWw])\1?$/;
+// Includes the narrow no-break space `Intl` puts before AM/PM.
+const WHITESPACE = /\s+/g;
+// ` - ` or `, ` between a date and a time. Separators inside a date, such
+// as `-` in `YYYY-MM-DD`, must still be typed as in the format.
+const DATE_TIME_JOINER = / ?, ?| - /g;
+const TIME_SEPARATOR = /([Hhk]{1,2}|m{1,2})([:.])(?=m{1,2}|s{1,2})/g;
+// Such as `[w]` in `[w] W GGGG`.
+const WEEK_PREFIX = /^\[[^\][]*\]\s*(?=[Ww])/;
+/**
+ * Expands localized tokens, e.g. `L` to `MM/DD/YYYY` for `en`.
+ * @param format - the moment format to expand, e.g. `L` or `L - LT`
+ * @param locale - the moment locale to expand it for
+ */
+function expandLongDateFormatTokens(format, locale) {
+    if (!format) {
+        return format;
+    }
+    const localeData = moment.localeData(locale);
+    return format.replaceAll(LONG_DATE_FORMAT_TOKENS, (token) => {
+        if (token.startsWith('[')) {
+            return token;
+        }
+        return (localeData.longDateFormat(token) ||
+            token);
+    });
+}
+/**
+ * Accepts fewer digits than the format has, e.g. `1/24/20` for
+ * `MM/DD/YYYY`, but rejects text that leaves part of the format unmatched.
+ * Moment's lenient mode alone accepts "01" as a complete date.
+ *
+ * Times and weeks are accepted in more forms than their format, e.g.
+ * `15.30` for `HH:mm` and `v. 4 26` for `[w] W GGGG`.
+ * @param date - the raw text to parse
+ * @param format - the moment format to parse it against
+ * @param locale - the moment locale to parse it in
+ */
+function parseComplete(date, format, locale) {
+    const text = normalizeSeparators(date);
+    const expandedFormat = normalizeSeparators(expandLongDateFormatTokens(format, locale));
+    for (const candidate of getTimeSeparatorVariants(expandedFormat)) {
+        const parsed = parseLeniently(text, candidate, locale);
+        if (parsed) {
+            return parsed;
+        }
+    }
+    return null;
+}
+function parseLeniently(date, format, locale) {
+    const [weekText, weekFormat] = dropWeekPrefix(date, format);
+    const text = pivotWeekYears(weekText, weekFormat);
+    const parsed = moment(text, weekFormat, locale, false);
+    if (!parsed.isValid()) {
+        return null;
+    }
+    const flags = parsed.parsingFlags();
+    if (flags.charsLeftOver > 0 ||
+        flags.unusedTokens.length > 0 ||
+        hasAmbiguousYear(text, weekFormat)) {
+        return null;
+    }
+    return parsed.toDate();
+}
+// Applied to both the text and the format, so they stay aligned.
+function normalizeSeparators(text) {
+    return text
+        .trim()
+        .replaceAll(WHITESPACE, ' ')
+        .replaceAll(DATE_TIME_JOINER, ' ');
+}
+function getTimeSeparatorVariants(format) {
+    const swapped = format.replaceAll(TIME_SEPARATOR, (_, part, separator) => part + (separator === ':' ? '.' : ':'));
+    return swapped === format ? [format] : [format, swapped];
+}
+// Accepts any prefix, e.g. `v.`, `w` or none, for `[w] W GGGG`.
+function dropWeekPrefix(date, format) {
+    if (!WEEK_PREFIX.test(format)) {
+        return [date, format];
+    }
+    return [date.replace(/^\D*/, ''), format.replace(WEEK_PREFIX, '')];
+}
+// Moment pivots a 2-digit `YYYY`, e.g. `26` to 2026, but not `GGGG`.
+function pivotWeekYears(date, format) {
+    const twoDigitWeekYears = findYears(date, format).filter(({ token, start, end }) => token === 'GGGG' && end - start === 2);
+    return twoDigitWeekYears.reduceRight((text, { start, end }) => text.slice(0, start) +
+        moment.parseTwoDigitYear(text.slice(start, end)) +
+        text.slice(end), date);
+}
+// Lenient parsing reads a half-typed year such as "1/24/2" as year 2.
+function hasAmbiguousYear(date, format) {
+    return findYears(date, format).some(({ start, end }) => {
+        const digitCount = end - start;
+        return digitCount !== 2 && digitCount !== 4;
+    });
+}
+function findYears(date, format) {
+    const formatParts = format.match(FORMAT_PARTS) || [];
+    const inputPattern = formatParts.map(formatPartToPattern).join('');
+    const match = new RegExp(`^${inputPattern}$`, 'd').exec(date);
+    if (!match) {
+        return [];
+    }
+    return formatParts.filter(isYearToken).map((token, index) => {
+        const [start, end] = match.indices[index + 1];
+        return { token: token, start: start, end: end };
+    });
+}
+function isYearToken(part) {
+    return part === 'YYYY' || part === 'GGGG';
+}
+/**
+ * Literals and separators are optional, since lenient parsing skips them
+ * when they are not typed, e.g. `01242026` for `MM/DD/YYYY`.
+ * @param part - a literal, token or separator of the format
+ */
+function formatPartToPattern(part) {
+    if (part.startsWith('[')) {
+        return optional(part.slice(1, -1));
+    }
+    if (isYearToken(part)) {
+        return String.raw `(\d{1,4})`;
+    }
+    if (ONE_OR_TWO_DIGIT_TOKENS.test(part)) {
+        return String.raw `\d{1,2}`;
+    }
+    if (/^[a-zA-Z]+$/.test(part)) {
+        return '.+?';
+    }
+    // Moment matches each separator character on its own.
+    return [...part].map(optional).join('');
+}
+function optional(text) {
+    return `(?:${escapeRegExp(text)})?`;
+}
+function escapeRegExp(text) {
+    return text.replaceAll(/[.*+?^${}()|[\]\\]/g, String.raw `\$&`);
+}
 class DateFormatter {
     constructor(language = 'en') {
         this.language = language;
@@ -22,7 +172,9 @@ class DateFormatter {
     }
     parseDate(date, dateFormat) {
         if (date) {
-            return moment(date, dateFormat).toDate();
+            // Importing the moment locales changes moment's global default
+            // locale, so tokens like `L` must be parsed with ours.
+            return parseComplete(date, dateFormat, this.getLanguage());
         }
         return null;
     }
@@ -46,7 +198,7 @@ class DateFormatter {
     }
 }
 
-const datePickerCss = () => `:host(limel-date-picker){position:relative}limel-input-field[disabled],limel-input-field[readonly]{pointer-events:none}`;
+const datePickerCss = () => `@charset "UTF-8";:host(limel-date-picker){position:relative}limel-input-field[disabled],limel-input-field[readonly]{pointer-events:none}.error-message{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}`;
 
 // tslint:disable:no-duplicate-string
 const nativeTypeForConsumerType = {
@@ -73,6 +225,7 @@ const DatePicker = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.change = createEvent(this, "change", 7);
+        this.invalidInput = createEvent(this, "invalidInput", 7);
         /**
          * Set to `true` to disable the field.
          * Use `disabled` to indicate that the field can normally be interacted
@@ -88,7 +241,8 @@ const DatePicker = class {
         this.readonly = false;
         /**
          * Set to `true` to indicate that the current value of the date picker is
-         * invalid.
+         * invalid. Typed text that is not a valid date is flagged by the
+         * component itself, whatever this is set to.
          */
         this.invalid = false;
         /**
@@ -105,15 +259,85 @@ const DatePicker = class {
          */
         this.language = 'en';
         this.showPortal = false;
+        this.parseError = false;
+        this.isEditing = false;
         this.portalId = `date-picker-calendar-${createRandomString()}`;
+        // Screen readers don't announce a changed description of the focused
+        // field, so the error is spoken through a live region.
+        this.errorMessage = createLiveMessage(() => this.parseError ? this.getHelperText() : '');
         this.documentClickListener = (event) => {
             if (event.composedPath().includes(this.textField)) {
                 return;
             }
             const element = document.querySelector(`#${this.portalId}`);
-            if (!element.contains(event.target)) {
-                this.hideCalendar();
+            if (element.contains(event.target)) {
+                return;
+            }
+            // The input's own blur, which follows, closes the calendar with the
+            // final typed text.
+            if (this.textField.shadowRoot.activeElement === this.inputElement) {
+                return;
             }
+            this.hideCalendar();
+        };
+        this.handleKeyDown = (event) => {
+            var _a;
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.discardedText = undefined;
+            const handlers = {
+                ArrowDown: this.handleArrowDown,
+                Escape: this.handleEscape,
+                Enter: this.handleEnter,
+                Backspace: this.handleDelete,
+                Delete: this.handleDelete,
+            };
+            (_a = handlers[event.key]) === null || _a === void 0 ? void 0 : _a.call(handlers, event);
+        };
+        this.handleArrowDown = async (event) => {
+            var _a;
+            event.preventDefault();
+            if (!this.showPortal) {
+                this.showPortal = true;
+                return;
+            }
+            await ((_a = this.datePickerCalendar) === null || _a === void 0 ? void 0 : _a.focusDay());
+        };
+        // The first Escape discards typed text, the next closes the calendar.
+        // Stopping it keeps a surrounding dialog open.
+        this.handleEscape = (event) => {
+            if (this.hasTypedText()) {
+                this.discardTypedText();
+            }
+            else if (this.showPortal) {
+                this.showPortal = false;
+            }
+            else {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        // Reads the input, since the input field emits its text debounced.
+        this.handleEnter = () => {
+            var _a, _b;
+            if (!this.acceptsTypedInput()) {
+                return;
+            }
+            const currentText = (_b = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) !== null && _b !== void 0 ? _b : '';
+            this.rawInputValue = currentText;
+            if (currentText !== '' && !this.parseText(currentText)) {
+                this.parseError = true;
+                return;
+            }
+            this.commitTypedText();
+        };
+        this.handleDelete = () => {
+            if (this.acceptsTypedInput() || !this.value) {
+                return;
+            }
+            this.clearValue();
         };
         this.formatValue = (value) => this.dateFormatter.formatDate(value, this.internalFormat);
         this.handleCalendarChange = this.handleCalendarChange.bind(this);
@@ -127,6 +351,8 @@ const DatePicker = class {
         this.nativeChangeHandler = this.nativeChangeHandler.bind(this);
         this.preventBlurFromCalendarContainer =
             this.preventBlurFromCalendarContainer.bind(this);
+        this.commitTypedText = this.commitTypedText.bind(this);
+        this.handleInputBlur = this.handleInputBlur.bind(this);
     }
     componentWillLoad() {
         this.useNative = !this.readonly && (isIOSDevice() || isAndroidDevice());
@@ -136,7 +362,28 @@ const DatePicker = class {
         this.updateInternalFormatAndType();
     }
     disconnectedCallback() {
+        var _a;
         this.removeDocumentListeners();
+        (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.removeEventListener('blur', this.handleInputBlur);
+        this.errorMessage.update.cancel();
+    }
+    // Consumers such as `limel-form` pass a new `Date` on every render.
+    watchValue(newValue, oldValue) {
+        if ((newValue === null || newValue === void 0 ? void 0 : newValue.getTime()) === (oldValue === null || oldValue === void 0 ? void 0 : oldValue.getTime())) {
+            return;
+        }
+        this.resetTypedText();
+    }
+    watchParseError() {
+        this.errorMessage.update();
+        this.invalidInput.emit(this.parseError ? this.getInvalidInputMessage() : null);
+    }
+    watchFormatInputs() {
+        this.resetTypedText();
+    }
+    watchLanguage() {
+        this.dateFormatter = new DateFormatter(this.language);
+        this.resetTypedText();
     }
     render() {
         const inputProps = {
@@ -145,24 +392,56 @@ const DatePicker = class {
         if (this.value && !this.readonly && !this.disabled) {
             inputProps.trailingIcon = 'clear_symbol';
         }
-        const helperText = this.disabled || this.readonly ? undefined : this.helperText;
+        const helperText = this.getHelperText();
         if (this.useNative) {
             return (h("limel-input-field", { disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, helperText: helperText, required: this.required, value: this.formatValue(this.value), type: this.nativeType, onChange: this.nativeChangeHandler }));
         }
         const dropdownZIndex = getComputedStyle(this.host).getPropertyValue('--dropdown-z-index');
         const formatter = this.formatter || this.formatValue;
         return [
-            h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid, label: this.label, placeholder: this.placeholder, helperText: helperText, required: this.required, value: this.value ? formatter(this.value) : '', onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, ref: (el) => (this.textField = el) }, inputProps)),
-            h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, formatter: formatter, onChange: this.handleCalendarChange })),
+            h("limel-input-field", Object.assign({ disabled: this.disabled, readonly: this.readonly, invalid: this.invalid || this.parseError, label: this.label, placeholder: this.placeholder, helperText: helperText, required: this.required, value: this.getDisplayValue(formatter), onFocus: this.showCalendar, onBlur: this.hideCalendar, onClick: this.onInputClick, onChange: this.handleInputElementChange, onKeyDown: this.handleKeyDown, ref: (el) => (this.textField = el) }, inputProps)),
+            h("span", { class: "error-message", "aria-live": "polite", ref: this.errorMessage.setElement }),
+            h("limel-portal", { containerId: this.portalId, visible: this.showPortal, containerStyle: { 'z-index': dropdownZIndex } }, h("limel-flatpickr-adapter", { format: this.internalFormat, language: this.language, type: this.type, value: this.value, previewValue: this.previewValue, ref: (el) => (this.datePickerCalendar = el), isOpen: this.showPortal, onChange: this.handleCalendarChange })),
         ];
     }
+    getDisplayValue(formatter) {
+        if (this.rawInputValue !== undefined) {
+            return this.rawInputValue;
+        }
+        if (!this.value) {
+            return '';
+        }
+        return this.isEditing && this.acceptsTypedInput()
+            ? this.formatValue(this.value)
+            : formatter(this.value);
+    }
+    acceptsTypedInput() {
+        return !this.formatter || !!this.format;
+    }
+    getHelperText() {
+        if (this.parseError) {
+            return this.getInvalidInputMessage();
+        }
+        if (this.disabled || this.readonly) {
+            return undefined;
+        }
+        return this.helperText;
+    }
+    getInvalidInputMessage() {
+        const key = this.type === 'time'
+            ? 'date-picker.invalid-time-format'
+            : 'date-picker.invalid-format';
+        return translations.get(key, this.language, {
+            example: this.formatValue(new Date()),
+        });
+    }
     updateInternalFormatAndType() {
         this.nativeType = nativeTypeForConsumerType[this.type || 'default'];
         this.nativeFormat = nativeFormatForType[this.nativeType];
         if (this.useNative) {
             this.internalFormat = this.nativeFormat;
         }
-        else if (this.formatter || this.format) {
+        else if (this.format) {
             this.internalFormat = this.format;
         }
         else {
@@ -171,19 +450,27 @@ const DatePicker = class {
     }
     nativeChangeHandler(event) {
         event.stopPropagation();
-        const date = this.dateFormatter.parseDate(event.detail, this.internalFormat);
-        this.change.emit(date);
+        if (event.detail === '') {
+            this.clearValue();
+            return;
+        }
+        const date = this.parseText(event.detail);
+        if (date) {
+            this.change.emit(date);
+        }
     }
     showCalendar(event) {
         if (this.disabled || this.readonly) {
             event.stopPropagation();
             return;
         }
+        this.isEditing = true;
         this.showPortal = true;
-        const inputElement = this.textField.shadowRoot.querySelector('input');
-        setTimeout(() => {
-            this.datePickerCalendar.inputElement = inputElement;
-        }, 0);
+        this.setUpInputElement();
+        // Wait for the adapter to render. This creates the calendar.
+        queueMicrotask(() => {
+            this.datePickerCalendar.inputElement = this.inputElement;
+        });
         event.stopPropagation();
         document.addEventListener('mousedown', this.documentClickListener, {
             passive: true,
@@ -192,6 +479,25 @@ const DatePicker = class {
             capture: true,
         });
     }
+    // Tabbing to the clear icon doesn't blur the input field, only its
+    // input. Its `readonly` prop would also stop the calendar from opening.
+    setUpInputElement() {
+        this.inputElement = this.textField.shadowRoot.querySelector('input');
+        this.inputElement.readOnly = !this.acceptsTypedInput();
+        this.inputElement.addEventListener('blur', this.handleInputBlur);
+    }
+    handleInputBlur(event) {
+        const nextFocus = event.relatedTarget;
+        this.commitTypedText();
+        if (!nextFocus) {
+            return;
+        }
+        requestAnimationFrame(() => {
+            if (!nextFocus.isConnected) {
+                this.inputElement.focus();
+            }
+        });
+    }
     preventBlurFromCalendarContainer(event) {
         // We don't want the input element to lose focus when we pick
         // a date in the calendar container.
@@ -203,6 +509,8 @@ const DatePicker = class {
         }
     }
     hideCalendar() {
+        this.isEditing = false;
+        this.commitTypedText();
         setTimeout(() => {
             this.showPortal = false;
         }, 0);
@@ -225,15 +533,21 @@ const DatePicker = class {
         }
         const mdcTextField = new MDCTextField(root);
         mdcTextField.getDefaultFoundation().deactivateFocus();
-        mdcTextField.valid = !this.invalid;
+        mdcTextField.valid = !(this.invalid || this.parseError);
+        // Removes the listeners but keeps the classes set above.
+        mdcTextField.destroy();
     }
     handleCalendarChange(event) {
-        const date = event.detail;
+        var _a;
         event.stopPropagation();
+        // Reset before hiding, or text typed earlier is committed over the
+        // pick. Preview the pick until the consumer echoes it back.
+        this.resetTypedText();
+        this.previewValue = (_a = event.detail) !== null && _a !== void 0 ? _a : undefined;
         if (this.pickerIsAutoClosing()) {
             this.hideCalendar();
         }
-        this.change.emit(date);
+        this.change.emit(event.detail);
     }
     onInputClick(event) {
         if (this.disabled || this.readonly || this.showPortal) {
@@ -242,22 +556,119 @@ const DatePicker = class {
         this.showCalendar(event);
     }
     handleInputElementChange(event) {
-        if (this.disabled || this.readonly) {
-            event.stopPropagation();
+        event.stopPropagation();
+        if (this.disabled || this.readonly || !this.acceptsTypedInput()) {
             return;
         }
-        if (event.detail === '') {
-            this.clearValue();
+        const text = event.detail;
+        if (text === this.discardedText) {
+            return;
         }
-        event.stopPropagation();
+        const date = text === '' ? null : this.parseText(text);
+        this.rawInputValue = text;
+        this.previewValue = date !== null && date !== void 0 ? date : undefined;
+        // Half-typed text is only flagged on commit.
+        if (date || text === '') {
+            this.parseError = false;
+        }
+    }
+    hasTypedText() {
+        var _a;
+        return (this.rawInputValue !== undefined ||
+            ((_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value) !== this.getCommittedText());
+    }
+    // The input field only rewrites its text when its `value` changes.
+    discardTypedText() {
+        var _a;
+        this.discardedText = (_a = this.inputElement) === null || _a === void 0 ? void 0 : _a.value;
+        this.resetTypedText();
+        if (this.inputElement) {
+            this.inputElement.value = this.getCommittedText();
+        }
+    }
+    getCommittedText() {
+        return this.getDisplayValue(this.formatter || this.formatValue);
+    }
+    commitTypedText() {
+        const text = this.rawInputValue;
+        if (text === undefined || text === this.committedText) {
+            return;
+        }
+        const currentText = this.value ? this.formatValue(this.value) : '';
+        if (text === currentText) {
+            this.resetTypedText();
+            return;
+        }
+        if (text === '') {
+            this.commitEmptyText();
+            return;
+        }
+        this.commitDate(text);
+    }
+    commitEmptyText() {
+        this.parseError = false;
+        if (this.value) {
+            this.emitCommitted('', null);
+        }
+        else {
+            this.rawInputValue = undefined;
+        }
+    }
+    commitDate(text) {
+        var _a;
+        const date = this.parseText(text);
+        if (!date) {
+            this.parseError = true;
+            return;
+        }
+        if (date.getTime() === ((_a = this.value) === null || _a === void 0 ? void 0 : _a.getTime())) {
+            this.resetTypedText();
+            return;
+        }
+        this.parseError = false;
+        this.emitCommitted(text, date);
+    }
+    // Keeps `rawInputValue` until `watchValue` resets it, or the old value
+    // flashes.
+    emitCommitted(text, date) {
+        this.committedText = text;
+        this.change.emit(date);
+    }
+    parseText(text) {
+        const date = this.dateFormatter.parseDate(text, this.internalFormat);
+        return date && !Number.isNaN(date.getTime()) ? date : null;
+    }
+    resetTypedText() {
+        this.parseError = false;
+        this.committedText = undefined;
+        this.rawInputValue = undefined;
+        this.previewValue = undefined;
     }
     pickerIsAutoClosing() {
         return this.type !== 'datetime' && this.type !== 'time';
     }
     clearValue() {
+        this.resetTypedText();
         this.change.emit(null);
     }
     get host() { return getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "watchValue": 0
+            }],
+        "parseError": [{
+                "watchParseError": 0
+            }],
+        "format": [{
+                "watchFormatInputs": 0
+            }],
+        "type": [{
+                "watchFormatInputs": 0
+            }],
+        "language": [{
+                "watchLanguage": 0
+            }]
+    }; }
 };
 DatePicker.style = datePickerCss();
 

package/dist/esm/limel-dialog.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-BU9IJqli.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-D3SUrFhp.js';
 import { d as dispatchResizeEvent } from './dispatch-resize-event-z_E3sq3p.js';
 import { c as createRandomString } from './random-string-BrjD-ITe.js';
 import { _ as __extends, a as __assign, M as MDCFoundation, b as __values, c as MDCComponent, d as closest, m as matches } from './ponyfill-6YuZiAPi.js';
@@ -1018,10 +1018,10 @@ const Dialog = class {
         this.mdcDialog.destroy();
     }
     render() {
-        return (h("div", { key: 'a9a3f26e3da86f1659487affe5a8758dca4cefb9', class: {
+        return (h("div", { key: '3e1a6defb45d3a7db6569742226cb0f6f417fb6e', class: {
                 'mdc-dialog': true,
                 'full-screen': !!this.fullscreen,
-            }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { key: '792d35f0b5c497bac447327c2aafdd74e3b8c0ee', hidden: true, id: "initialFocusEl" }), h("div", { key: 'a4331ee65f7ff242ee2af707281a1051f307a218', class: "mdc-dialog__container" }, h("div", { key: 'c4e1ef542e1078fe65bb6c299a890da6242c154e', class: "mdc-dialog__surface" }, h("input", { key: '626470072fbed50ef98ab29e32ad0d219018cb51', type: "button", id: "initialFocusElement" }), this.renderHeading(), h("div", { key: '8399fa33d6b6d342848f7051fc92b4bde9b02f8e', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", { key: '94f1d56d78fd5e5f0cc483c622b1138ed7148a2e' })), this.renderFooter())), h("div", { key: '22a1c2516049f8a8d444fbb60c0009cb96dffe9f', class: "mdc-dialog__scrim" })));
+            }, role: "alertdialog", "aria-modal": "true", "aria-labelledby": 'limel-dialog-title-' + this.id, "aria-describedby": 'limel-dialog-content-' + this.id }, h("input", { key: '4a5f5cbd39cefc237854e87a3bd26c9a371d0703', hidden: true, id: "initialFocusEl" }), h("div", { key: 'cea96e7efebe5f92b65c36f9e9ff4b4814cf6245', class: "mdc-dialog__container" }, h("div", { key: '2002f463e8289d8e11974818e8339cd8506d9172', class: "mdc-dialog__surface" }, h("input", { key: 'ff0f029260dcd53f59f0ac7882b917e7fdff41a1', type: "button", id: "initialFocusElement" }), this.renderHeading(), h("div", { key: 'd2f23c68ef6fa558c7d40b7a729173bfc6c1e120', class: "mdc-dialog__content", id: 'limel-dialog-content-' + this.id }, h("slot", { key: '7b990ba91a610dad210627c1e6075b4db6ecd0c8' })), this.renderFooter())), h("div", { key: 'b878b47719571bac33c5f8f04e6271d11fd7bf69', class: "mdc-dialog__scrim" })));
     }
     watchHandler(newValue, oldValue) {
         if (oldValue === newValue || !this.mdcDialog) {

package/dist/esm/limel-dock-button.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h } from './index-BU9IJqli.js';
+import { r as registerInstance, c as createEvent, h } from './index-D3SUrFhp.js';
 import { c as createRandomString } from './random-string-BrjD-ITe.js';
 
 const dockButtonCss = () => `@charset "UTF-8";limel-dock-button button{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;isolation:isolate;position:relative;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-dock-item-text-color);background-color:var(--dock-background-color)}limel-dock-button button:hover,limel-dock-button button:focus,limel-dock-button button:focus-visible{will-change:color, background-color, box-shadow, transform}limel-dock-button button:hover,limel-dock-button button:focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}limel-dock-button button:hover{box-shadow:var(--button-shadow-hovered)}limel-dock-button button:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);background-color:var(--limel-theme-surface-background-color);box-shadow:var(--button-shadow-inset-pressed)}limel-dock-button button:hover,limel-dock-button button:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}limel-dock-button button:focus{outline:none}limel-dock-button button:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}limel-dock-button button{box-sizing:border-box;display:flex;align-items:center;width:100%;height:var(--dock-item-height);border-radius:0.375rem;font-size:var(--limel-theme-default-font-size);padding:0 0.5rem;min-width:var(--dock-item-height)}limel-dock-button button:hover{z-index:1}limel-dock-button button[aria-current=page]{color:var(--limel-dock-item-text-color--selected);background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)));box-shadow:var(--button-shadow-inset)}limel-dock-button button[aria-current=page]:focus-visible{box-shadow:var(--button-shadow-inset), var(--shadow-depth-8-focused)}limel-dock-button button[aria-current=page] .icon{color:var(--limel-dock-item-text--selected)}limel-popover{display:grid;grid-template-columns:100%}limel-popover button[slot=trigger][aria-expanded=true]{box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:0.5rem;padding-right:0.75rem}limel-dock-button:not([expanded]) .text{position:absolute;width:0;height:0;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0, 0, 0, 0);clip-path:inset(50%);white-space:nowrap}.icon{flex-shrink:0;width:calc(var(--dock-item-height) - 1rem);height:calc(var(--dock-item-height) - 1rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}limel-badge{position:absolute;top:-0.125rem;right:-0.125rem}limel-dock-button[use-mobile-layout][expanded]{flex:1 1 0;min-width:0}limel-dock-button[use-mobile-layout][expanded] button{flex-direction:column;justify-content:center;gap:0.125rem;height:auto;min-height:var(--dock-item-height);padding:0.375rem 0.25rem}limel-dock-button[use-mobile-layout][expanded] .text{box-sizing:border-box;max-width:100%;padding:0 0.125rem;font-size:0.6875rem;line-height:1.2;text-align:center}limel-dock-button[use-mobile-layout][expanded] limel-badge{right:auto;left:calc(50% + 0.375rem)}.icon{position:relative}.icon:before{text-align:center;pointer-events:none;position:absolute;inset:0;background-color:var(--dock-background-color, rgb(var(--contrast-100)));background-position:center;background-repeat:no-repeat;background-size:contain;background-image:var(--limel-custom-home-icon);content:var(--limel-custom-home-icon-enabler)}button[aria-current=page] .icon:before{background-color:var(--dock-item-background-color--selected, rgb(var(--contrast-200)))}`;

package/dist/esm/limel-dock.entry.js

@@ -1,6 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BU9IJqli.js';
-import { t as translations } from './translations-D9ZGrMhe.js';
-import './language-VamkUr90.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-D3SUrFhp.js';
+import { t as translations } from './translations--i932i_D.js';
 
 const dockCss = () => `@charset "UTF-8";button.expand-shrink{appearance:none;background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;text-align:inherit;box-sizing:border-box;transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:transparent}button.expand-shrink:hover,button.expand-shrink:focus,button.expand-shrink:focus-visible{will-change:color, background-color, box-shadow, transform}button.expand-shrink:hover,button.expand-shrink:focus-visible{transform:translate3d(0, 0.01rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color)}button.expand-shrink:hover{box-shadow:var(--button-shadow-hovered)}button.expand-shrink:active{--limel-clickable-transform-timing-function:cubic-bezier(       0.83,       -0.15,       0.49,       1.16   );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button.expand-shrink:hover,button.expand-shrink:active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button.expand-shrink:focus{outline:none}button.expand-shrink:focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button.expand-shrink{display:flex;justify-content:center;align-items:center;height:var(--dock-expand-shrink-button-height);padding:0 0.5rem;margin:var(--limel-dock-padding);border-radius:0.375rem}button.expand-shrink.expanded{justify-content:flex-end}button.expand-shrink.expanded limel-icon{transform:rotateY(180deg)}button.expand-shrink limel-icon{width:calc(var(--dock-expand-shrink-button-height) - 0.25rem);color:var(--dock-item-icon-color, var(--limel-dock-item-text-color))}:host(limel-dock){--badge-background-color:rgb(var(--color-red-default));--badge-text-color:rgb(var(--color-white));--dock-item-height:2.75rem;--limel-dock-padding:0.25rem;--dock-expand-shrink-button-height:1rem;--limel-dock-item-text-color:var(       --dock-item-text-color,       rgb(var(--contrast-1100))   );--limel-dock-item-text-color--selected:var(       --dock-item-text-color--selected,       rgb(var(--contrast-1300))   );isolation:isolate;position:relative;box-sizing:border-box;display:inline-flex;flex-direction:column;background-color:var(--dock-background-color, rgb(var(--contrast-100)));box-shadow:var(--shadow-depth-8);padding-top:var(--dock-padding-top);padding-right:var(--dock-padding-right);padding-bottom:var(--dock-padding-bottom);padding-left:var(--dock-padding-left)}:host(limel-dock:not(.has-mobile-layout)){height:100%;width:calc(var(--limel-dock-padding) * 2 + var(--dock-item-height) + var(--dock-padding-left, 0px) + var(--dock-padding-right, 0px))}:host(limel-dock:not(.has-mobile-layout)) nav{padding-bottom:calc(var(--limel-dock-padding) + 0.25rem)}:host(limel-dock.expanded:not(.has-mobile-layout)){width:calc(var(--dock-expanded-max-width, 10rem) + var(--dock-padding-left, 0px) + var(--dock-padding-right, 0px))}.footer-separator{margin-top:auto;justify-self:flex-end}nav{box-sizing:border-box;display:inline-flex;flex-direction:column;gap:0.375rem;flex-grow:1;padding:var(--limel-dock-padding);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}nav::-webkit-scrollbar{display:none}:host(limel-dock.has-mobile-layout) nav{justify-content:space-between;flex-direction:row}limel-dock-button:first-of-type{--limel-custom-home-icon-enabler:var(--crm-custom-home-icon-enabler);--limel-custom-home-icon:var(--crm-custom-home-icon)}`;
 
@@ -95,11 +94,11 @@ const Dock = class {
         this.resizeObserver.disconnect();
     }
     render() {
-        return (h(Host, { key: '5f27f5d6ed669bdee199afc2dfe151495a67b05b', class: {
+        return (h(Host, { key: 'a2389035294a8e9faaf4de889fef82c3775dd3aa', class: {
                 dock: true,
                 expanded: this.expanded,
                 'has-mobile-layout': this.useMobileLayout,
-            } }, h("nav", { key: '9f7befc311318c7ff2486714adc0a6ec0e6b4cea', "aria-label": this.accessibleLabel }, this.dockItems.map(this.renderDockItem), this.renderSeparator(), this.dockFooterItems.map(this.renderDockItem)), this.renderExpandShrinkToggle()));
+            } }, h("nav", { key: '7a5ef68e234cb744eaef4ee59a3d9cfed70af4aa', "aria-label": this.accessibleLabel }, this.dockItems.map(this.renderDockItem), this.renderSeparator(), this.dockFooterItems.map(this.renderDockItem)), this.renderExpandShrinkToggle()));
     }
     renderExpandShrinkToggle() {
         if (this.useMobileLayout || !this.allowResize) {