@duetds/components 10.0.0-alpha.13 → 10.0.0-alpha.14

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

@@ -1,15 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { d as debounce } from './js-utils-9b9e0039.js';
-import { k as isArrowKey, l as isNumber, d as isArrowLeftKey, b as isArrowUpKey, a as isArrowRightKey, c as isArrowDownKey, m as isMinusKey, n as isPlusKey } from './keyboard-utils-daf80d44.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-40caac4f.js';
-import { p as parsePossibleJSON } from './string-utils-192eb3c8.js';
-import { b as breakpointTokensUpTo, a as breakpointToToken } from './token-utils-b9ba8c5e.js';
-import './tokens.module-2d02f5ff.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { d as debounce } from './js-utils-BlUsLmbQ.js';
+import { j as isArrowKey, k as isNumber, d as isArrowLeftKey, e as isArrowUpKey, f as isArrowRightKey, g as isArrowDownKey, l as isMinusKey, m as isPlusKey } from './keyboard-utils-Db8rvjPI.js';
+import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-BxXgd2r7.js';
+import { p as parsePossibleJSON } from './string-utils-C6E9F6QT.js';
+import { b as breakpointTokensUpTo, a as breakpointToToken } from './token-utils-D2bU4zM_.js';
+import './tokens.module-UQH7pb1d.js';
 
 const shouldDisplayNavigation = (visibleItems, total, take) => {
     if (visibleItems * 2 > total / take) {
@@ -19,75 +19,56 @@ const shouldDisplayNavigation = (visibleItems, total, take) => {
 };
 
 const duetPaginationCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}.duet-pagination-nav{position:relative}.duet-pagination ::part(button){border:0}.duet-pagination,.duet-pagination li{display:flex;flex-wrap:wrap;gap:0.1rem;align-items:center}.duet-pagination-item-is-active .duet-pagination-page-number{border-bottom-color:inherit;border-bottom-style:solid;border-bottom-width:2px}.duet-pagination duet-button{width:30px;min-width:36px;font-weight:600;text-decoration:none;border-left-width:0}.duet-pagination-overlay{position:absolute;top:1rem;z-index:300;width:100%;text-align:center}.duet-pagination.duet-pagination-is-dimmed{opacity:0.5}.duet-pagination .duet-pagination-select{margin:0 4px 0 12px !important}.duet-pagination-total-pages{margin:0;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600 !important;line-height:1.25;color:rgb(8, 42, 77);text-align:left}:host(.duet-theme-turva) .duet-pagination-total-pages{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}";
-const DuetPaginationStyle0 = duetPaginationCss;
 
 const DuetPagination = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.duetPageChange = createEvent(this, "duetPageChange", 3);
         this.listId = createID("duet-pagination-list");
-        // not in state because we don't want to trigger a render
-        this.firstRenderDone = false;
-        this.handleMediaQueryChange = (mq) => {
-            this.matchesCompactBreakpoint = breakpointTokensUpTo.includes(this.compactBreakpoint) ? mq.matches : !mq.matches;
-        };
-        // called from the watcher and used to make sure any changed to current also updates the internal section index
-        this.actionChain = async (after, before) => {
-            if (after === 0) {
-                this.current = 1;
-            }
-            else if (after > this.totalPages) {
-                this.current = this.totalPages;
-            }
-            else if (before !== after) {
-                const calculatedSectionIndex = Math.ceil(after / this.visibleItems) - 1;
-                if (calculatedSectionIndex !== this.internalSectionIndex) {
-                    this.internalSectionIndex = calculatedSectionIndex;
-                    await this.setFocus();
-                }
-            }
-            return true;
-        };
-        //helper to emit relevant page events
-        this.emitPageEvent = (ev, passedPage) => {
-            const page = Number(passedPage || this.current);
-            this.duetPageChange.emit({
-                component: "duet-pagination",
-                from: page * this.take,
-                to: page * this.take + this.take,
-                current: page,
-                take: this.take,
-                type: "page",
-                originalEvent: ev,
-            });
-        };
-        // this will return the entered number, or the current page if the user presses enter
-        this.getEnteredNumber = debounce(ev => {
-            this.emitPageEvent(ev, this.numbersStore);
-            this.current = Number(this.numbersStore);
-            this.numbersStore = "";
-            this.duetPageChange.emit({
-                component: "duet-pagination",
-                from: this.current * this.take,
-                to: this.current * this.take + this.take,
-                current: this.current,
-                take: this.take,
-                type: "jump",
-                originalEvent: ev,
-            });
-        }, 500);
         this.processedPageLinks = null;
         this.numbersStore = "";
         this.matchesCompactBreakpoint = false;
+        /**
+         * State() variables
+         * @internal
+         */
         this.totalPages = 10;
+        /**
+         * State() variables
+         * @internal
+         */
         this.internalSectionIndex = 0;
+        /**
+         * Theme of the pagination.
+         */
         this.theme = "";
+        /**
+         * Makes the controls of pagination component disabled.
+         */
         this.disabled = false;
+        /**
+         * Variation of the paginator (compact and default supported)
+         */
         this.variation = "default";
+        /**
+         * Described By id
+         */
         this.accessibleDescribedBy = undefined;
+        /**
+         * Details of the component
+         */
         this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
         this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
         this.accessibleDescription = undefined;
+        /**
+         * Default pagination labels
+         */
         this.accessibleLabelsDefaults = {
             en: {
                 next_page: "Next page",
@@ -129,14 +110,84 @@ const DuetPagination = class {
                 next_section: "Visa nästa {0} sidnummer, skrivbordsläsare ska använda piltangenterna för att navigera",
             },
         };
+        /**
+         * Default pagination labels
+         */
         this.accessibleLabels = getLocaleString(this.accessibleLabelsDefaults);
+        /**
+         * The size of the take, when paginating.
+         */
         this.take = 5;
+        /**
+         * Amount of visible page numbers to show
+         */
         this.visibleItems = 5;
+        /**
+         * The total size of the paginating data
+         */
         this.total = 1000;
+        /**
+         * Breakpoint at which the pagination should be rendered as compact with a select element
+         */
         this.compactBreakpoint = "x-small";
+        /**
+         * Used to indicate which dom element with ID this element controls
+         */
         this.ariaControls = "";
+        /**
+         * The current page
+         */
         this.current = 1;
-        this.pageLinks = undefined;
+        // not in state because we don't want to trigger a render
+        this.firstRenderDone = false;
+        this.handleMediaQueryChange = (mq) => {
+            this.matchesCompactBreakpoint = breakpointTokensUpTo.includes(this.compactBreakpoint) ? mq.matches : !mq.matches;
+        };
+        // called from the watcher and used to make sure any changed to current also updates the internal section index
+        this.actionChain = async (after, before) => {
+            if (after === 0) {
+                this.current = 1;
+            }
+            else if (after > this.totalPages) {
+                this.current = this.totalPages;
+            }
+            else if (before !== after) {
+                const calculatedSectionIndex = Math.ceil(after / this.visibleItems) - 1;
+                if (calculatedSectionIndex !== this.internalSectionIndex) {
+                    this.internalSectionIndex = calculatedSectionIndex;
+                    await this.setFocus();
+                }
+            }
+            return true;
+        };
+        //helper to emit relevant page events
+        this.emitPageEvent = (ev, passedPage) => {
+            const page = Number(passedPage || this.current);
+            this.duetPageChange.emit({
+                component: "duet-pagination",
+                from: page * this.take,
+                to: page * this.take + this.take,
+                current: page,
+                take: this.take,
+                type: "page",
+                originalEvent: ev,
+            });
+        };
+        // this will return the entered number, or the current page if the user presses enter
+        this.getEnteredNumber = debounce(ev => {
+            this.emitPageEvent(ev, this.numbersStore);
+            this.current = Number(this.numbersStore);
+            this.numbersStore = "";
+            this.duetPageChange.emit({
+                component: "duet-pagination",
+                from: this.current * this.take,
+                to: this.current * this.take + this.take,
+                current: this.current,
+                take: this.take,
+                type: "jump",
+                originalEvent: ev,
+            });
+        }, 500);
     }
     watchPropTotalHandler( /*newValue: boolean, oldValue: boolean*/) {
         this.calculatePageTake();
@@ -379,10 +430,9 @@ const DuetPagination = class {
         "pageLinks": ["refresh"]
     }; }
 };
-DuetPagination.style = DuetPaginationStyle0;
+DuetPagination.style = duetPaginationCss;
 
 const duetRangeStepperCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}.duet-range-stepper{display:flex;flex-wrap:wrap;gap:0;align-items:baseline;justify-content:center;min-width:30px;min-height:30px;font-weight:600;text-decoration:none;border-left-width:0}.duet-range-stepper{white-space:nowrap}.duet-range-stepper .duet-range-step-counter{font-weight:600;color:rgb(8, 42, 77)}.duet-range-stepper ::part(button){border:0}";
-const DuetRangeStepperStyle0 = duetRangeStepperCss;
 
 const DuetRangeStepper = class {
     constructor(hostRef) {
@@ -390,19 +440,34 @@ const DuetRangeStepper = class {
         this.duetRangeStepUpdate = createEvent(this, "duetRangeStepUpdate", 7);
         this.leftBn = createID("duetRangeStepper-left");
         this.rightBn = createID("duetRangeStepper-right");
-        this.handleClick = (e, direction) => {
-            e.preventDefault();
-            this.stepIndex += direction;
-            this.clampStepIndex();
-            this.handleStepClick(e);
-        };
         this.buttonLeftDisabled = false;
         this.buttonRightDisabled = false;
+        /**
+         * Theme of the component.
+         */
         this.theme = "";
+        /**
+         * Makes the controls of range-stepper component disabled.
+         */
         this.disabled = false;
+        /**
+         * Start value
+         * @default 1
+         */
         this.stepIndex = 1;
+        /**
+         * How big is the step
+         * @default 50
+         */
         this.stepSize = 50;
+        /**
+         * Total of
+         * @default undefined
+         */
         this.total = 1000;
+        /**
+         * Default range stepper labels
+         */
         this.ariaLabelsDefaults = {
             en: {
                 next_increment: "Next range increment",
@@ -420,8 +485,20 @@ const DuetRangeStepper = class {
                 x_of_y: "{0}–{1} av {2}",
             },
         };
+        /**
+         * Default pagination labels
+         */
         this.ariaLabels = getLocaleString(this.ariaLabelsDefaults);
+        /**
+         * Used to indicate which dom element with ID this element controls
+         */
         this.ariaControls = "";
+        this.handleClick = (e, direction) => {
+            e.preventDefault();
+            this.stepIndex += direction;
+            this.clampStepIndex();
+            this.handleStepClick(e);
+        };
     }
     watchStepIndexStateHandler(newValue) {
         if (this.leftBnRef && this.rightBnRef) {
@@ -553,6 +630,6 @@ const DuetRangeStepper = class {
         "stepSize": ["watchStepSizeStateHandler"]
     }; }
 };
-DuetRangeStepper.style = DuetRangeStepperStyle0;
+DuetRangeStepper.style = duetRangeStepperCss;
 
 export { DuetPagination as duet_pagination, DuetRangeStepper as duet_range_stepper };

package/lib/esm/duet-phone-input.entry.js

@@ -1,13 +1,13 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-daf80d44.js';
-import { a as getLanguage, g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-40caac4f.js';
-import { c as checkNamedSlotElement } from './slot-utils-4096ff0d.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { c as createID } from './create-id-Cfr_DJqU.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-BxXgd2r7.js';
+import { c as checkNamedSlotElement } from './slot-utils-B1zQ6tzO.js';
+import './string-utils-C6E9F6QT.js';
 
 const countries = {
     AF: {
@@ -1769,7 +1769,6 @@ const primaryCountriesForSharedCountryCodes = {
 };
 
 const duetPhoneInputCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}span.flag-container{display:flex;align-items:center;justify-content:center;width:30px;height:30px}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:16px !important;margin-bottom:12px !important;display:inline-flex;width:100%;min-width:calc(33.333% - 8px);max-width:100%;text-align:left;vertical-align:bottom}:host:last-child,:host:last-of-type{margin-right:0 !important}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}.duet-phone-input-container{position:relative;width:100%;height:100%}";
-const DuetPhoneInputStyle0 = duetPhoneInputCss;
 
 const DuetPhoneInput = class {
     constructor(hostRef) {
@@ -1786,6 +1785,74 @@ const DuetPhoneInput = class {
             fi: "Valitse maatunnus",
             sv: "Välj landskod",
         };
+        this.language = getLanguage();
+        /**
+         * Theme of the input.
+         */
+        this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Expands the input to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Details of the component
+         */
+        this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
+        this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
+        this.accessibleDescription = undefined;
+        /**
+         * Makes the phone input component disabled. This prevents users from being able to
+         * interact with the input, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Set whether the input is required or not. Please note that this is required for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * browser from displaying its own validation errors.
+         */
+        this.required = false;
+        /**
+         * Defaults for Label
+         * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
+         */
+        this.labelDefaults = {
+            fi: "Puhelinnumero",
+            en: "Phone number",
+            sv: "Telefonnummer",
+        };
+        /**
+         * Label for the number input.
+         * @default  {fi: "Etiketti", en: "Label", sv: "Märka"}
+         */
+        this.label = getLocaleString(this.labelDefaults, this.language);
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Display the input in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * Tooltip to display next to the label of the input.
+         */
+        this.tooltip = "";
+        /**
+         * Countries to list at the top of the popup-menu, given as an array or comma separated list of ISO 3166-2 codes.
+         * @default ["FI", "SE"]
+         */
+        this.listFirst = ["FI", "SE"];
         this.setListFirstCountries = () => {
             const listFirstCodes = (typeof this.listFirst === "string" ? this.listFirst.split(",") : this.listFirst).map(c => c.trim().toUpperCase());
             const listFirstCountries = Object.values(countries).filter(c => listFirstCodes.includes(c.isoCode));
@@ -1836,30 +1903,6 @@ const DuetPhoneInput = class {
             this.countryCodePopup.hide();
             this.setInputCountryCode();
         };
-        this.language = getLanguage();
-        this.currentCountry = undefined;
-        this.theme = "";
-        this.margin = "auto";
-        this.expand = false;
-        this.identifier = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.disabled = false;
-        this.required = false;
-        this.labelDefaults = {
-            fi: "Puhelinnumero",
-            en: "Phone number",
-            sv: "Telefonnummer",
-        };
-        this.label = getLocaleString(this.labelDefaults, this.language);
-        this.labelHidden = false;
-        this.caption = undefined;
-        this.name = undefined;
-        this.error = "";
-        this.tooltip = "";
-        this.listFirst = ["FI", "SE"];
     }
     /**
      * The phone input itself contains a comprehensive list of countries and their telephone country codes and it is
@@ -2005,6 +2048,6 @@ const DuetPhoneInput = class {
     }
     get element() { return getElement(this); }
 };
-DuetPhoneInput.style = DuetPhoneInputStyle0;
+DuetPhoneInput.style = duetPhoneInputCss;
 
 export { DuetPhoneInput as duet_phone_input };

package/lib/esm/duet-popup-menu_2.entry.js

@@ -1,19 +1,19 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a830b2de.js';
-import { I as spaceXSmall } from './tokens.module-2d02f5ff.js';
-import { o as offset, f as flip, s as shift, c as computePosition, b as autoUpdate } from './floating-ui.dom.esm-ebc91b33.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { f as focusElement } from './focus-utils-9bbe977f.js';
-import { c as isArrowDownKey, f as isEscapeKey, b as isArrowUpKey, o as isTabKey } from './keyboard-utils-daf80d44.js';
-import { a as getLanguage } from './language-utils-40caac4f.js';
-import { T as Teleport } from './teleport-aa27d5f9.js';
-import { a as actionNewWindowSmall } from './action-new-window-small-1945be91.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { n as spaceXSmall } from './tokens.module-UQH7pb1d.js';
+import { M, z, o as offset, f as flip, s as shift } from './floating-ui.dom.browser.min-B_NkY9T0.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { f as focusElement } from './focus-utils-B1AOXMlP.js';
+import { g as isArrowDownKey, a as isEscapeKey, e as isArrowUpKey, b as isTabKey } from './keyboard-utils-Db8rvjPI.js';
+import { a as getLanguage } from './language-utils-BxXgd2r7.js';
+import { T as Teleport } from './teleport-DWuCOI7R.js';
+import { n as newWindowIcon } from './action-new-window-small-EH8_HdAm.js';
+import './string-utils-C6E9F6QT.js';
+import './_commonjsHelpers-DvwKrUS6.js';
 
 const duetPopupMenuCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-popup-menu-list{position:absolute;top:0;left:0;z-index:950;width:max-content;min-width:175px;padding:8px;margin:0;color:rgb(8, 42, 77);list-style:none;visibility:hidden !important;background:rgb(255, 255, 255);border-radius:8px;box-shadow:0 0 0 1px rgba(0, 0, 0, 0.07), 0 4px 10px 0 rgba(0, 41, 77, 0.15);opacity:0;transition:transform 300ms ease, visibility 300ms ease, opacity 300ms ease;transform:scaleY(0);transform-origin:top center}.duet-popup-menu-list.open{visibility:visible !important;opacity:1;transform:scaleY(1)}.duet-popup-menu-list.fixed{position:fixed}.duet-popup-menu-list.scroll-visible{overflow-y:scroll;scroll-margin:20px}.duet-popup-menu-list.duet-theme-turva{color:rgb(23, 28, 58) !important;background:rgb(255, 255, 255)}::slotted(duet-notification){max-width:360px}";
-const DuetPopupMenuStyle0 = duetPopupMenuCss;
 
 const DuetPopupMenu = class {
     constructor(hostRef) {
@@ -29,6 +29,49 @@ const DuetPopupMenu = class {
             fi: "kohtaa vastaa suodatinta",
             sv: "menyalternativ matchar filtret",
         };
+        this.open = false;
+        this.language = getLanguage();
+        /**
+         * Accessible role.
+         */
+        this.accessibleRole = "menu";
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Placement of the popup menu relative to its controller.
+         * Possible values: "top", "bottom", "left" and "right", optionally combined with "-start" or "-end".
+         */
+        this.placement = "bottom-start";
+        /**
+         * Force placement.
+         */
+        this.forcePlacement = false;
+        /**
+         * Allow vertical flip when there is not enough space
+         * below the controller.
+         */
+        this.allowVerticalFlip = true;
+        /**
+         * Position.
+         */
+        this.position = "absolute";
+        /**
+         * Main axis positioning offset of the popup menu relative to its controller.
+         * For "top" and "bottom" placements main axis is vertical, for "left" and "right" horizontal.
+         */
+        this.mainAxisOffset = 0;
+        /**
+         * Cross axis positioning offset of the popup menu relative to its controller.
+         * For "top" and "bottom" placements cross axis is horizontal, for "left" and "right" vertical.
+         */
+        this.crossAxisOffset = 0;
+        /**
+         * By default Popup Menu adds "action-arrow-down-small" icon to the controller.
+         * This can be removed with controller-icon="".
+         */
+        this.controllerIcon = "action-arrow-down-small";
         this.setOpenButton = (element) => {
             if (!element) {
                 return;
@@ -56,7 +99,7 @@ const DuetPopupMenu = class {
                 this.allowVerticalFlip && flip(),
                 shift({ padding: 5 }),
             ].filter(Boolean);
-            const coordinates = await computePosition(this.openButton, this.menuElement, {
+            const coordinates = await M(this.openButton, this.menuElement, {
                 middleware,
                 placement: this.placement,
                 strategy: this.position,
@@ -88,24 +131,6 @@ const DuetPopupMenu = class {
                 (_a = this.getNonFilteredItems()[0]) === null || _a === void 0 ? void 0 : _a.setFocus();
             }
         };
-        this.open = false;
-        this.menuY = undefined;
-        this.menuX = undefined;
-        this.filterResultCount = undefined;
-        this.language = getLanguage();
-        this.accessibleLabel = undefined;
-        this.accessibleRole = "menu";
-        this.theme = "";
-        this.skipTeleport = undefined;
-        this.placement = "bottom-start";
-        this.forcePlacement = false;
-        this.allowVerticalFlip = true;
-        this.position = "absolute";
-        this.mainAxisOffset = 0;
-        this.crossAxisOffset = 0;
-        this.controllerIcon = "action-arrow-down-small";
-        this.scrollLimit = undefined;
-        this.showFilterInput = undefined;
     }
     /**
      * Element, or id of an element, that controls the opening and closing of the popup menu. If id is given,
@@ -269,7 +294,7 @@ const DuetPopupMenu = class {
             this.updatePlacement();
             // Start autoUpdate when menu is open
             if (this.menuElement && this.openButton) {
-                this.autoUpdateCleanup = autoUpdate(this.openButton, this.menuElement, this.updatePlacement);
+                this.autoUpdateCleanup = z(this.openButton, this.menuElement, this.updatePlacement);
             }
             if (this.showFilterInput) {
                 this.filterInput.value = "";
@@ -349,16 +374,61 @@ const DuetPopupMenu = class {
         "open": ["handleOpenChange"]
     }; }
 };
-DuetPopupMenu.style = DuetPopupMenuStyle0;
+DuetPopupMenu.style = duetPopupMenuCss;
 
 const duetPopupMenuItemCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:flex-start}.duet-popup-menu-item{display:flex;flex-grow:1;gap:12px;align-items:center;height:100%;padding:8px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.5;color:rgb(8, 42, 77);text-align:left;text-decoration:none;cursor:pointer}.duet-popup-menu-item:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-popup-menu-item:focus,.duet-popup-menu-item:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-popup-menu-item.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-popup-menu-item.active{background:rgb(240, 247, 250)}.duet-popup-menu-item.active.duet-theme-turva{background:rgb(245, 247, 250)}.duet-popup-menu-item:hover{background:rgb(228, 241, 247)}.duet-popup-menu-item:hover.duet-theme-turva{background:rgb(222, 224, 228)}.duet-popup-menu-item .duet-popup-menu-item-label{flex-grow:1}.duet-popup-menu-item .duet-popup-menu-item-trailing{padding-left:20px}.active-descendant{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .active-descendant,.active-descendant.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
-const DuetPopupMenuItemStyle0 = duetPopupMenuItemCss;
 
 const DuetPopupMenuItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.duetFocus = createEvent(this, "duetFocus", 7);
         this.duetBlur = createEvent(this, "duetBlur", 7);
+        this.focus = false;
+        /**
+         * Accessible role.
+         */
+        this.accessibleRole = "menuitem";
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        this.external = false;
+        /**
+         * Language of the link. Use this only for language selection links.
+         */
+        this.targetLanguage = undefined;
+        /**
+         * Value
+         */
+        this.value = undefined;
+        /**
+         * Left icon.
+         */
+        this.leadingIcon = undefined;
+        /**
+         * Left icon color.
+         */
+        this.leadingIconColor = undefined;
+        /**
+         * Right icon.
+         */
+        this.trailingIcon = undefined;
+        /**
+         * Short text to display after the label, e.g. keyboard shortcut.
+         */
+        this.trailingText = undefined;
+        /**
+         * Is the item currently active (e.g. selected)
+         */
+        this.active = false;
+        /**
+         * @internal
+         * Focus simulation when parent element uses aria-activedescendant
+         */
+        this.activeDescendant = false;
         /**
          * Component event handling.
          */
@@ -378,20 +448,6 @@ const DuetPopupMenuItem = class {
                 component: "duet-popup-menu-item",
             });
         };
-        this.focus = false;
-        this.accessibleLabel = undefined;
-        this.accessibleRole = "menuitem";
-        this.theme = "";
-        this.url = undefined;
-        this.external = false;
-        this.targetLanguage = undefined;
-        this.value = undefined;
-        this.leadingIcon = undefined;
-        this.leadingIconColor = undefined;
-        this.trailingIcon = undefined;
-        this.trailingText = undefined;
-        this.active = false;
-        this.activeDescendant = false;
     }
     /**
      * Component lifecycle events.
@@ -420,13 +476,13 @@ const DuetPopupMenuItem = class {
             "active-descendant": this.activeDescendant,
         };
         return (h(Host, { key: '87b21072c16186cf0cec5d459b08811f003aa12b', role: this.accessibleRole }, h(TagName, { key: '5bc8756a4f6442cb38c7ba11bb5ab1fb35e856c9', ref: element => (this.itemElement = element), tabIndex: this.accessibleRole === "listitem" ? 0 : -1, onFocus: this.onFocus, onBlur: this.onBlur, role: `${TagName === "a" ? "link" : "button"}`, "aria-label": this.accessibleLabel, class: classes, value: this.value, href: this.url, target: this.external ? "_blank" : undefined, rel: this.external ? "noopener" : undefined, lang: TagName === "button" ? undefined : this.targetLanguage, hreflang: TagName === "button" ? undefined : this.targetLanguage }, this.leadingIcon && (h("duet-icon", { key: '4647635aad9b3d41aed74e7912d2299bb4c5041d', name: this.leadingIcon, size: "x-small", color: this.leadingIconColor ? this.leadingIconColor : "currentColor", class: "duet-popup-menu-item-leading", margin: "none" })), h("span", { key: '34f80b2a2add7ec29841ab0a7dc57d4f42cc33b0', class: "duet-popup-menu-item-label" }, h("slot", { key: 'dbdc4ec45a3c62c4c06acb53cb337ab35a7e469b' })), (this.trailingIcon || this.active || (this.url && this.external)) && (h("duet-icon", { key: 'efeb01a714b514c280666cb47b68a490248e1db7', name: this.url && this.external
-                ? actionNewWindowSmall.title
+                ? newWindowIcon.title
                 : this.active
                     ? "messaging-checked-small"
                     : this.trailingIcon, size: (this.url && this.external) || this.active ? "xx-small" : "x-small", color: "currentColor", class: "duet-popup-menu-item-trailing", margin: "none" })), this.trailingText && h("span", { key: 'b57e76791146d271b1c0c53ef29839d3e4633da2', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     get element() { return getElement(this); }
 };
-DuetPopupMenuItem.style = DuetPopupMenuItemStyle0;
+DuetPopupMenuItem.style = duetPopupMenuItemCss;
 
 export { DuetPopupMenu as duet_popup_menu, DuetPopupMenuItem as duet_popup_menu_item };