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

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

@@ -3,21 +3,19 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-00821d28.js');
-const tokens_module = require('./tokens.module-7c947029.js');
-const floatingUi_dom_esm = require('./floating-ui.dom.esm-806e7c53.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const focusUtils = require('./focus-utils-c4163f8f.js');
-const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
-const languageUtils = require('./language-utils-77bf1c27.js');
-const teleport = require('./teleport-c0eede18.js');
-const actionNewWindowSmall = require('./action-new-window-small-fa51dfb9.js');
-require('./string-utils-7b13c16e.js');
+var index = require('./index-CdC7dzZ-.js');
+var tokens_module = require('./tokens.module-GwBgNF6_.js');
+var floatingUi_dom_browser_min = require('./floating-ui.dom.browser.min-Cj0r5YDz.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
+var focusUtils = require('./focus-utils-dqd59YI6.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var languageUtils = require('./language-utils-A7DfQayC.js');
+var teleport = require('./teleport-BIcrl_KV.js');
+var actionNewWindowSmall = require('./action-new-window-small-BWlVx6YN.js');
+require('./string-utils-B35hEUBv.js');
+require('./_commonjsHelpers-4N64IRaP.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) {
@@ -33,6 +31,49 @@ const DuetPopupMenu = class {
             fi: "kohtaa vastaa suodatinta",
             sv: "menyalternativ matchar filtret",
         };
+        this.open = false;
+        this.language = languageUtils.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,11 +97,11 @@ const DuetPopupMenu = class {
                 return;
             }
             const middleware = [
-                floatingUi_dom_esm.offset({ mainAxis: this.mainAxisOffset, crossAxis: this.crossAxisOffset }),
-                this.allowVerticalFlip && floatingUi_dom_esm.flip(),
-                floatingUi_dom_esm.shift({ padding: 5 }),
+                floatingUi_dom_browser_min.offset({ mainAxis: this.mainAxisOffset, crossAxis: this.crossAxisOffset }),
+                this.allowVerticalFlip && floatingUi_dom_browser_min.flip(),
+                floatingUi_dom_browser_min.shift({ padding: 5 }),
             ].filter(Boolean);
-            const coordinates = await floatingUi_dom_esm.computePosition(this.openButton, this.menuElement, {
+            const coordinates = await floatingUi_dom_browser_min.M(this.openButton, this.menuElement, {
                 middleware,
                 placement: this.placement,
                 strategy: this.position,
@@ -92,24 +133,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 = languageUtils.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,
@@ -273,7 +296,7 @@ const DuetPopupMenu = class {
             this.updatePlacement();
             // Start autoUpdate when menu is open
             if (this.menuElement && this.openButton) {
-                this.autoUpdateCleanup = floatingUi_dom_esm.autoUpdate(this.openButton, this.menuElement, this.updatePlacement);
+                this.autoUpdateCleanup = floatingUi_dom_browser_min.z(this.openButton, this.menuElement, this.updatePlacement);
             }
             if (this.showFilterInput) {
                 this.filterInput.value = "";
@@ -353,16 +376,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) {
         index.registerInstance(this, hostRef);
         this.duetFocus = index.createEvent(this, "duetFocus", 7);
         this.duetBlur = index.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.
          */
@@ -382,20 +450,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.
@@ -424,14 +478,14 @@ const DuetPopupMenuItem = class {
             "active-descendant": this.activeDescendant,
         };
         return (index.h(index.Host, { key: '87b21072c16186cf0cec5d459b08811f003aa12b', role: this.accessibleRole }, index.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 && (index.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" })), index.h("span", { key: '34f80b2a2add7ec29841ab0a7dc57d4f42cc33b0', class: "duet-popup-menu-item-label" }, index.h("slot", { key: 'dbdc4ec45a3c62c4c06acb53cb337ab35a7e469b' })), (this.trailingIcon || this.active || (this.url && this.external)) && (index.h("duet-icon", { key: 'efeb01a714b514c280666cb47b68a490248e1db7', name: this.url && this.external
-                ? actionNewWindowSmall.actionNewWindowSmall.title
+                ? actionNewWindowSmall.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 && index.h("span", { key: 'b57e76791146d271b1c0c53ef29839d3e4633da2', class: "duet-popup-menu-item-trailing" }, this.trailingText))));
     }
     get element() { return index.getElement(this); }
 };
-DuetPopupMenuItem.style = DuetPopupMenuItemStyle0;
+DuetPopupMenuItem.style = duetPopupMenuItemCss;
 
 exports.duet_popup_menu = DuetPopupMenu;
 exports.duet_popup_menu_item = DuetPopupMenuItem;

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

@@ -3,16 +3,13 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-00821d28.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const createId = require('./create-id-1f8c438f.js');
-const languageUtils = require('./language-utils-77bf1c27.js');
-require('./string-utils-7b13c16e.js');
+var index = require('./index-CdC7dzZ-.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
+var createId = require('./create-id-DtslnIOq.js');
+var languageUtils = require('./language-utils-A7DfQayC.js');
+require('./string-utils-B35hEUBv.js');
 
 const duetProgressCss = "*,*::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;width:100%;height:inherit}.duet-progress{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;min-height:1px;}.duet-progress .progress-bar{position:relative;display:block;width:100%;height:inherit;min-height:1px;background-color:rgb(240, 247, 250);border-radius:0;box-shadow:none}.duet-theme-turva .duet-progress .progress-bar{background-color:rgb(255, 241, 241)}.duet-progress .progress-bar>span{display:block;height:inherit;text-indent:-9999px;background-color:rgb(0, 119, 179);border-radius:0}.duet-theme-turva .duet-progress .progress-bar>span{background-color:rgb(198, 12, 48)}.duet-progress progress[value]{display:flex;width:100%;height:inherit;min-height:1px;color:rgb(0, 119, 179);border:0 none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.duet-progress progress[value]::-webkit-progress-bar{background-color:rgb(240, 247, 250);border-radius:0}.duet-progress progress[value]::-webkit-progress-value{background-color:rgb(0, 119, 179);background-size:35px 20px, 100% 100%, 100% 100%;border-radius:0;-webkit-animation:animate-stripes 5s linear infinite;animation:animate-stripes 5s linear infinite}.duet-progress progress[value] ::-moz-progress-bar{background-color:rgb(240, 247, 250)}.duet-progress.duet-theme-turva progress[value]{color:rgb(198, 12, 48)}.duet-progress.duet-theme-turva progress[value]::-webkit-progress-bar{background-color:rgb(255, 241, 241)}.duet-progress.duet-theme-turva progress[value]::-webkit-progress-value{background-color:rgb(198, 12, 48)}.duet-progress.duet-theme-turva progress[value] ::-moz-progress-bar{background-color:rgb(255, 241, 241)}";
-const DuetProgressStyle0 = duetProgressCss;
 
 const DuetProgress = class {
     constructor(hostRef) {
@@ -22,20 +19,42 @@ const DuetProgress = class {
          */
         this.progressId = createId.createID("DuetProgress");
         this.progressLabelId = createId.createID("DuetProgressLabel");
-        this.accessibleDescribedBy = undefined;
+        /**
+         * Aria 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;
-        this.accessibleLabel = undefined;
+        /**
+         * Defaults for accessibleLabel
+         */
         this.accessibleLabelUploadDefaults = {
             fi: ["lähetys valmis", "lähetys käynnissä"],
             sv: ["Uppladdningen är klar", "Uppladdning pågår"],
             en: ["upload completed", "upload in progress"],
         };
+        /**
+         * Adds accessible label for upload in progress and upload complete states
+         * @default {fi: ["lähetys valmis", "lähetys käynnissä"],sv: ["Uppladdningen är klar", "Uppladdning pågår"], en:  ["completed", "in progress"]}
+         */
         this.accessibleLabelUpload = languageUtils.getLocaleString(this.accessibleLabelUploadDefaults);
+        /**
+         * Progress of the bar, a value from 0-100
+         */
         this.progress = 0;
-        this.caption = undefined;
+        /**
+         * Height of progressbar
+         */
         this.height = "10px";
+        /**
+         * Theme of the input.
+         */
         this.theme = "";
     }
     /**
@@ -67,6 +86,6 @@ const DuetProgress = class {
     }
     get element() { return index.getElement(this); }
 };
-DuetProgress.style = DuetProgressStyle0;
+DuetProgress.style = duetProgressCss;
 
 exports.duet_progress = DuetProgress;

package/lib/cjs/duet-promo-card.cjs.entry.js

@@ -3,27 +3,41 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-00821d28.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const slotUtils = require('./slot-utils-acd4cc20.js');
-const tokenUtils = require('./token-utils-5000595c.js');
-require('./tokens.module-7c947029.js');
+var index = require('./index-CdC7dzZ-.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
+var slotUtils = require('./slot-utils-DgJchaT4.js');
+var tokenUtils = require('./token-utils-BUKJTu4j.js');
+require('./tokens.module-GwBgNF6_.js');
 
 const duetPromoCardCss = "*,*::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;margin-right:4px !important;margin-bottom:2px !important;display:block;width:auto}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-promo-card{display:flex;flex-direction:column;width:100%;height: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-style:normal;color:rgb(8, 42, 77);text-align:left;border-radius:20px}.duet-promo-card.duet-p-0{padding:0 !important}.duet-promo-card.duet-m-0{margin:0 !important}.duet-promo-card .content-wrapper{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}.duet-promo-card .content-wrapper:focus{border-radius:20px;outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-promo-card .image{position:relative;width:100%;overflow:hidden;border-top-left-radius:20px;border-top-right-radius:20px;object-fit:cover}.duet-promo-card .content{display:flex;flex-direction:column;flex-grow:1;gap:8px;padding:20px}@media (min-width: 36em){.duet-promo-card .content{padding:28px}}.duet-promo-card .action{display:flex;flex-grow:1;align-items:flex-end;padding-top:16px}.duet-promo-card.no-bg-color .content{padding:20px 0 0}.duet-promo-card.no-bg-color .image{border-radius:16px}.duet-promo-card.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\"}.duet-promo-card.duet-theme-turva .content-wrapper:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-promo-card-link{transition:box-shadow 300ms ease}.duet-promo-card-link:hover{box-shadow:0 2px 6px 0 rgba(0, 41, 77, 0.07), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(0, 41, 77, 0.1)}.duet-promo-card-link:hover.duet-theme-turva{box-shadow:0 2px 6px 0 rgba(117, 117, 117, 0.13), 0 -1px 0 0 rgba(0, 0, 0, 0.09), -1px 0 0 0 rgba(0, 0, 0, 0.07), 1px 0 0 0 rgba(0, 0, 0, 0.07), 0 1px 0 0 rgba(0, 0, 0, 0.07), 0 2px 10px 0 rgba(117, 117, 117, 0.15)}";
-const DuetPromoCardStyle0 = duetPromoCardCss;
 
 const DuetPromoCard = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Background color.
+         */
         this.backgroundColor = "";
+        /**
+         * Text color.
+         */
         this.textColor = "secondary";
+        /**
+         * Image. Example image is 512x341;
+         */
         this.image = "";
+        /**
+         * The actual heading level used in the HTML markup.
+         */
         this.headingLevel = "h3";
-        this.url = undefined;
     }
     /**
      * Component lifecycle events.
@@ -66,6 +80,6 @@ const DuetPromoCard = class {
     }
     get element() { return index.getElement(this); }
 };
-DuetPromoCard.style = DuetPromoCardStyle0;
+DuetPromoCard.style = duetPromoCardCss;
 
 exports.duet_promo_card = DuetPromoCard;

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

@@ -3,16 +3,13 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-00821d28.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const createId = require('./create-id-1f8c438f.js');
-const slotUtils = require('./slot-utils-acd4cc20.js');
-const watchOptions = require('./watch-options-30a12622.js');
+var index = require('./index-CdC7dzZ-.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
+var createId = require('./create-id-DtslnIOq.js');
+var slotUtils = require('./slot-utils-DgJchaT4.js');
+var watchOptions = require('./watch-options-CTB_6VOA.js');
 
 const duetRadioCss = "*,*::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;margin-right:28px !important;margin-bottom:12px !important;display:inline-flex;width:100%;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.vertical){margin-right:0 !important}:host(.horizontal){margin-bottom:0 !important;width:auto}:host(.horizontal) .duet-label .duet-label-content{max-width:100%}@media (min-width: 48em){:host(.horizontal-responsive){margin-right:28px !important;margin-bottom:0 !important;width:auto}:host(.horizontal-responsive):last-child,:host(.horizontal-responsive):last-of-type{margin-right:0 !important}:host(.horizontal-responsive) .duet-label .duet-label-content{max-width:100%}}:host(.duet-m-0){margin:0 !important}:host(:last-child:not(:only-child)){margin-right:0 !important;margin-bottom:0 !important}.duet-label{position:relative;z-index:100;display:flex;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;hyphens:auto;line-height:1.5;color:rgb(8, 42, 77);word-break:break-word;overflow-wrap:break-word;cursor:pointer;background:transparent}.duet-theme-turva .duet-label{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-label .duet-label-content{flex-grow:1;font-size:1rem}.duet-label-hidden .duet-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}.duet-radio-container{position:relative;width:100%;height:100%}.duet-label::before{z-index:100;flex-shrink:0;width:20px;height:20px;margin:2px 10px 1px 1px;content:\"\";background:rgb(255, 255, 255);border:1px solid rgb(8, 42, 77);border-radius:50%}.duet-theme-turva .duet-label::before{border-color:rgb(23, 28, 58)}.duet-label.focus::before{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-label.focus::before{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-label.checked::after{position:absolute;top:6px;left:5px;z-index:200;flex-shrink:0;width:12px;height:12px;content:\"\";background:rgb(0, 119, 179);border-radius:50%}.duet-theme-turva .duet-label.checked::after{background:rgb(23, 28, 58)}.duet-label.disabled{color:rgb(98, 121, 138)}.duet-theme-turva .duet-label.disabled{color:rgb(143, 147, 158)}.duet-label.disabled::before{border-color:rgb(181, 198, 208)}.duet-theme-turva .duet-label.disabled::before{border-color:rgb(143, 147, 158)}.duet-label.disabled.checked::before{border:1px solid rgb(127, 150, 165)}.duet-label.disabled.checked::after{background:rgb(127, 150, 165)}.duet-theme-turva .duet-label.disabled.checked::after{background:rgb(143, 147, 158);border-color:rgb(143, 147, 158)}*::slotted([slot=input]){padding:14px !important;position:absolute;top:0;left:0;z-index:200;width:100%;height:100%;cursor:pointer;opacity:0}*::slotted([slot=input][disabled]){cursor:default}";
-const DuetRadioStyle0 = duetRadioCss;
 
 const DuetRadio = class {
     constructor(hostRef) {
@@ -20,10 +17,51 @@ const DuetRadio = class {
         this.duetChange = index.createEvent(this, "duetChange", 7);
         this.duetFocus = index.createEvent(this, "duetFocus", 7);
         this.duetBlur = index.createEvent(this, "duetBlur", 7);
+        this.focus = false;
         /**
          * Own Properties.
          */
         this.radioId = createId.createID("DuetRadio");
+        /**
+         * Aria 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;
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Theme of the radio.
+         */
+        this.theme = "";
+        /**
+         * Makes the radio component disabled. This prevents users from being able to
+         * interact with the radio, 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;
+        /**
+         * Stops the components from emitting events
+         */
+        this.blockEvents = false;
+        /**
+         * Label for the radio.
+         */
+        this.label = "label";
         this.radioInputListenersRemove = radioInput => {
             radioInput.removeEventListener("change", this.onChange);
             //radioInput.removeEventListener("click", this.onRadioClick)
@@ -37,7 +75,7 @@ const DuetRadio = class {
             radioInput.addEventListener("blur", this.onBlur);
         };
         this.radioInputSetUp = () => {
-            const slotInput = this.element.querySelector("input[slot=input]");
+            const slotInput = this.element.querySelector("input");
             const radioInput = slotInput || document.createElement("input");
             radioInput.slot = "input";
             radioInput.disabled = this.disabled || this.groupDisabled ? true : undefined;
@@ -125,29 +163,6 @@ const DuetRadio = class {
                 component: "duet-radio",
             });
         };
-        this.focus = false;
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleIndex = undefined;
-        this.margin = "auto";
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.theme = "";
-        this.disabled = false;
-        this.required = false;
-        this.blockEvents = false;
-        this.identifier = undefined;
-        this.label = "label";
-        this.name = undefined;
-        this.role = undefined;
-        this.groupDisabled = undefined;
-        this.groupDirection = undefined;
-        this.groupResponsive = undefined;
-        this.checked = undefined;
-        this.value = undefined;
     }
     /**
      * Component lifecycle events.
@@ -174,54 +189,92 @@ const DuetRadio = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: 'a52c6ac475749b2d64a22d9b37e841039fb39d2a', onClick: this.onClick, class: {
+        return (index.h(index.Host, { key: '0811162c634e2b8b369c4e7f4b812f8a1273d968', onClick: this.onClick, class: {
                 horizontal: this.groupDirection === "horizontal" && !this.groupResponsive,
                 "horizontal-responsive": this.groupDirection === "horizontal" && this.groupResponsive,
                 "duet-m-0": this.margin === "none",
-            } }, index.h("div", { key: '417713dd7269568373d53e39dd9b380549baeeca', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, index.h("slot", { key: '290edaf76e243376166f55ba7e18010c7d7d0a33', name: "input" }), index.h("label", { key: 'f3aa06a86046c1b0256dab97bd42633fcdeb9db9', inert: true, ref: element => (this.labelElement = element), class: {
+            } }, index.h("div", { key: '092e3a273977a27528421ed663ff7fb02d8d69c3', class: { "duet-radio-container": true, "duet-theme-turva": this.theme === "turva" } }, index.h("slot", { key: '4718ae20d1c35598cd5303f78aff0a4396cb2347', name: "input" }), index.h("label", { key: 'ec79e101c2130e2bb249336066e200e0dd4be698', inert: true, ref: element => (this.labelElement = element), class: {
                 "duet-label": true,
                 checked: this.checked,
                 focus: this.focus,
                 disabled: this.disabled || this.groupDisabled,
-            } }, index.h("div", { key: 'c849be25a4c0058030e19d2c21ebf4cb7242f95e', class: "duet-label-content" }, this.hasLabel ? index.h("slot", { name: "label" }) : this.label)))));
+            } }, index.h("div", { key: '11d19022266ecb88c7f4e473ac20279dc02fbd08', class: "duet-label-content" }, this.hasLabel ? index.h("slot", { name: "label" }) : this.label)))));
     }
     get element() { return index.getElement(this); }
 };
-DuetRadio.style = DuetRadioStyle0;
+DuetRadio.style = duetRadioCss;
 
 const duetRadioGroupCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%}:host(.horizontal) .duet-radio-group{display:block}@media (min-width: 48em){:host(.horizontal) .duet-radio-group{display:flex}}:host(.horizontal) .duet-radio-group.duet-no-stacking{display:flex}.deut-radio-group{width:100%}";
-const DuetRadioGroupStyle0 = duetRadioGroupCss;
 
 const DuetRadioGroup = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         /**
-         * Component event handling.
+         * Direction of the radio group.
          */
-        this.onSelect = (ev) => {
-            const selectedRadio = ev.target;
-            if (selectedRadio) {
-                this.value = selectedRadio.value;
-            }
-            // Prevent events from bubbling up the DOM tree in case
-            // this group is a sub-group of another choice group.
-            ev.cancelBubble = true;
-        };
         this.direction = "vertical";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Theme of the radio group.
+         */
         this.theme = "";
+        /**
+         * Display radio group in error state along with an error message.
+         */
         this.error = "";
+        /**
+         * Tooltip to display next to the label of the radio group.
+         */
         this.tooltip = "";
+        /**
+         * With direction setting you can force the tooltip to always open towards left
+         * or right instead of automatically determining the direction.
+         */
         this.tooltipDirection = "auto";
-        this.name = undefined;
+        /**
+         * Legend displayed for the radio buttons in this group.
+         */
         this.label = "Label";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
         this.labelHidden = false;
+        /**
+         * Additional caption to show inside the label of the radio group.
+         */
         this.caption = "";
+        /**
+         * Enable or disable the automatic responsive behaviour of the radio group
+         * component when horizontal setting is used. Setting this option to "true"
+         * makes sure that contents are stacked vertically on mobile.
+         */
         this.responsive = false;
-        this.value = undefined;
-        this.disabled = undefined;
+        /**
+         * Sets whether making a choice is required or optional. Will set contained duet-radio components to required as well.
+         */
         this.required = false;
+        /**
+         * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
+         * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
+         * the messages unread by screen readers. Use "assertive" only in those rare cases when "polite" would leave the error message
+         * unread by screen readers.
+         */
         this.accessibleLiveError = "polite";
+        /**
+         * Component event handling.
+         */
+        this.onSelect = (ev) => {
+            const selectedRadio = ev.target;
+            if (selectedRadio) {
+                this.value = selectedRadio.value;
+            }
+            // Prevent events from bubbling up the DOM tree in case
+            // this group is a sub-group of another choice group.
+            ev.cancelBubble = true;
+        };
     }
     /**
      * Component lifecycle events.
@@ -309,7 +362,7 @@ const DuetRadioGroup = class {
         "responsive": ["updateRadios"]
     }; }
 };
-DuetRadioGroup.style = DuetRadioGroupStyle0;
+DuetRadioGroup.style = duetRadioGroupCss;
 
 exports.duet_radio = DuetRadio;
 exports.duet_radio_group = DuetRadioGroup;