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

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

@@ -3,17 +3,14 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-00821d28.js');
-const label = require('./label-3ce3ebad.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const createId = require('./create-id-1f8c438f.js');
-const slotUtils = require('./slot-utils-acd4cc20.js');
-const stringUtils = require('./string-utils-7b13c16e.js');
+var index = require('./index-CdC7dzZ-.js');
+var label = require('./label-BQpxsrOR.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
+var createId = require('./create-id-DtslnIOq.js');
+var slotUtils = require('./slot-utils-DgJchaT4.js');
+var stringUtils = require('./string-utils-B35hEUBv.js');
 
 const duetSelectCss = ".duet-internal-label{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-bottom:12px !important;position:relative;z-index:100;display:inline-flex;width:auto;margin-top:8px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600 !important;line-height:1.25;line-height:1.25;color:rgb(8, 42, 77);text-align:left;word-break:break-word;cursor:default}.duet-internal-label.duet-p-0{padding:0 !important}.duet-internal-label.duet-m-0{margin:0 !important}.duet-internal-label span{font-size:1rem;font-weight:600 !important;word-break:break-word}.duet-internal-label.duet-m-0{margin-bottom:0 !important}.duet-internal-label.duet-small-margin{margin-top:8px !important;margin-bottom:4px !important}.duet-internal-label.duet-has-tooltip{padding-right:48px}@media (min-width: 48em){.duet-internal-label.duet-has-tooltip{padding-right:0}}.duet-internal-label.duet-internal-label-small{font-size:0.875rem}.duet-internal-label.duet-internal-label-small span{font-size:0.875rem}.duet-internal-label.duet-weight-normal{font-weight:400 !important}.duet-internal-label.duet-weight-normal span{font-weight:400 !important}.duet-internal-label.duet-theme-turva{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-flex;width:100%;max-width:100%;vertical-align:bottom}@media (min-width: 36em){:host{width:calc(50% - 16px - 3px)}:host.duet-expand{width:100% !important}}:host(:not(.duet-m-0)){margin-right:16px !important;margin-bottom:12px !important}:host(:not(.duet-m-0)):last-child,:host(:not(.duet-m-0)):last-of-type{margin-right:0 !important}@media (min-width: 36em){:host(.duet-expand){width:100% !important}}:host(.duet-select-variation-tiny),:host(.duet-select-variation-compact){position:relative;top:-2px;width:72px;margin:0;vertical-align:baseline}:host(.duet-select-variation-compact){width:auto}duet-tooltip,::slotted(duet-tooltip){position:absolute;top:12px;right:0}@media (min-width: 48em){duet-tooltip,::slotted(duet-tooltip){position:relative;top:4px;right:auto}}.duet-select-placeholder{position:absolute;top:-9px;left:9px;z-index:200;display:block;width:auto;max-width:60%;padding:0 0.25rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:rgb(255, 255, 255)}.duet-select-container{position:relative;width:100%}.duet-select-container.duet-select-variation-tiny{width:72px}.duet-select-wrapper{position:relative;width:100%;padding:15px 14px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.25}.duet-theme-turva .duet-select-wrapper{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-variation-tiny .duet-select-wrapper{width:81px;padding:0 !important}.duet-select-variation-compact .duet-select-wrapper{padding:0 !important;line-height:1}.duet-select-wrapper select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:200;width:100%;height:100%;padding:0;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;cursor:pointer;border:0;outline:none;opacity:0}.duet-theme-turva .duet-select-wrapper select{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-select-wrapper select:hover+.duet-select{border-color:rgb(127, 150, 165);box-shadow:0 0 0 1px #909599}.duet-theme-turva .duet-select-wrapper select:hover+.duet-select{border-color:rgb(143, 147, 158);box-shadow:0 0 0 1px #747475}.has-error .duet-select-wrapper select:hover+.duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-select-wrapper select:hover+.duet-select{box-shadow:0 0 0 1px #e55039}.duet-select-wrapper select:focus+.duet-select{border-color:rgb(0, 119, 179);outline:0;box-shadow:0 0 0 1px #0077b3 !important;transition:none}.duet-theme-turva .duet-select-wrapper select:focus+.duet-select{border-color:rgb(23, 28, 58);box-shadow:0 0 0 1px #171c3a !important}.duet-theme-turva .duet-select-wrapper select:focus+.duet-select .duet-select-icon{color:rgb(23, 28, 58)}.duet-select-wrapper select:focus+.duet-select .duet-select-icon{color:rgb(0, 119, 179)}.has-error .duet-select-wrapper select:focus+.duet-select{box-shadow:0 0 0 1px #de2362}.duet-theme-turva.has-error .duet-select-wrapper select:focus+.duet-select{box-shadow:0 0 0 1px #e55039}.duet-select-wrapper select[disabled]{cursor:default !important}.duet-select-wrapper select[disabled]+.duet-select{color:rgb(8, 42, 77) !important;cursor:default !important;background:rgb(245, 248, 250) !important;border-color:rgb(245, 248, 250) !important;box-shadow:none !important;opacity:1 !important;-webkit-text-fill-color:rgb(8, 42, 77) !important}.duet-theme-turva .duet-select-wrapper select[disabled]+.duet-select{color:rgb(23, 28, 58) !important;background:rgb(245, 247, 250) !important;border-color:rgb(245, 247, 250) !important;-webkit-text-fill-color:rgb(23, 28, 58) !important}.duet-select-wrapper span.duet-keep-container-height{opacity:0}.duet-select-variation-compact .duet-select-wrapper span.duet-keep-container-height{display:none}.duet-select{position:absolute;top:0;right:0;bottom:0;left:0;z-index:100;display:block;width:100%;min-width:8rem;padding:12px 14px !important;padding-right:48px !important;overflow:hidden;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;font-variant-numeric:tabular-nums;line-height:1.5;color:rgb(8, 42, 77);text-align:left;text-overflow:ellipsis;white-space:nowrap;background:rgb(255, 255, 255);border:1px solid rgb(127, 150, 165);border-radius:4px;transition:150ms ease}.has-error .duet-select{border-color:rgb(214, 28, 82) !important}.has-error .duet-select .duet-select-icon{color:rgb(214, 28, 82) !important}.duet-theme-turva.has-error .duet-select{border-color:rgb(214, 28, 82) !important}.duet-theme-turva.has-error .duet-select .duet-select-icon{color:rgb(214, 28, 82) !important}.duet-theme-turva .duet-select{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);border-color:rgb(143, 147, 158)}.duet-select svg{position:absolute;top:50%;right:16px;z-index:200;width:20px;height:20px;color:rgb(8, 42, 77);pointer-events:none;transform:translateY(-50%)}.duet-theme-turva .duet-select svg{color:rgb(23, 28, 58)}.duet-select-variation-tiny .duet-select,.duet-select-variation-compact .duet-select{width:72px;min-width:inherit;padding:0 !important;margin-bottom:-4px;overflow:visible;font-weight:600;text-align:center}.duet-select-variation-tiny .duet-select duet-icon,.duet-select-variation-compact .duet-select duet-icon{padding-left:10px}.duet-select-variation-compact .duet-select{position:relative;width:fit-content;padding:7px 16px !important;font-size:0.875rem;line-height:1.1;text-align:right;border-radius:8px}.duet-select-help{display:block;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.875rem;font-weight:400;line-height:1.25;color:rgb(98, 121, 138);border-radius:4px}.duet-select-help span{display:block;margin-top:8px}.duet-theme-turva .duet-select-help{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(143, 147, 158)}.has-error .duet-select-help{color:rgb(214, 28, 82)}.duet-theme-turva.has-error .duet-select-help{color:rgb(214, 28, 82)}.duet-label-hidden .duet-internal-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}";
-const DuetSelectStyle0 = duetSelectCss;
 
 function isOptionGroup(item) {
     return "options" in item;
@@ -43,6 +40,78 @@ const DuetSelect = class {
         this.labelId = createId.createID("DuetLabel");
         this.topCaptionId = createId.createID("DuetCaptionTop");
         this.topCaptionPlaceholderId = createId.createID("DuetCaptionPlaceholderTop");
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
+        this.processedItems = null;
+        /**
+         * Variation of dropdown. Tiny is used for small numbers / tiny option ranges. Compact works well with adjacent buttons,
+         * like with compact pagination.
+         */
+        this.variation = "default";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Display the select in error state along with an error message.
+         */
+        this.error = "";
+        /**
+         * 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";
+        /**
+         * Expands the input to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Theme of the select.
+         */
+        this.theme = "";
+        /**
+         * Visually hide the label, but still show it to screen readers.
+         */
+        this.labelHidden = false;
+        /**
+         * Hint text to display.
+         */
+        this.placeholder = "";
+        /**
+         * If form input field has a placeholder text, and user types anything (causing the placeholder text to disappear),
+         * settings this to true will "echo" it into the caption slot - this option will be false by default for the next few versions, but will eventually be true by default (scheduled for 4.30.0)
+         */
+        this.echoPlaceholder = false;
+        /**
+         * Makes the select component disabled. This prevents users from being able
+         * to interact with the select, and conveys its inactive state to assistive
+         * technologies.
+         */
+        this.disabled = false;
+        /**
+         * Set whether the input is required or not. Please note that this is necessary for
+         * accessible inputs when the user is required to fill them. When using this property
+         * you need to also set “novalidate” attribute to your form element to prevent
+         * browser from displaying its own validation errors.
+         */
+        this.required = false;
+        /**
+         * Label for the select.
+         */
+        this.label = "label";
+        /**
+         * Tooltip to display next to the label of the input.
+         */
+        this.tooltip = "";
+        /**
+         * With direction setting you can force the tooltip to always open towards left
+         * or right instead of automatically determining the direction.
+         */
+        this.tooltipDirection = "auto";
         /**
          * Component event handling.
          */
@@ -83,33 +152,6 @@ const DuetSelect = class {
             }
             return describedBy.length > 0 ? describedBy.join(" ") : null;
         };
-        this.processedItems = null;
-        this.variation = "default";
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.margin = "auto";
-        this.accessibleControls = undefined;
-        this.accessibleOwns = undefined;
-        this.error = "";
-        this.accessibleLiveError = "polite";
-        this.expand = false;
-        this.value = undefined;
-        this.theme = "";
-        this.labelHidden = false;
-        this.identifier = undefined;
-        this.name = undefined;
-        this.placeholder = "";
-        this.caption = undefined;
-        this.echoPlaceholder = false;
-        this.items = undefined;
-        this.disabled = false;
-        this.required = false;
-        this.label = "label";
-        this.labelColor = undefined;
-        this.labelWeight = undefined;
-        this.role = undefined;
-        this.tooltip = "";
-        this.tooltipDirection = "auto";
     }
     valueChanged() {
         if (this.nativeSelect) {
@@ -184,6 +226,6 @@ const DuetSelect = class {
         "items": ["refresh"]
     }; }
 };
-DuetSelect.style = DuetSelectStyle0;
+DuetSelect.style = duetSelectCss;
 
 exports.duet_select = DuetSelect;

package/lib/cjs/duet-shaped-image.cjs.entry.js

@@ -3,21 +3,26 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-00821d28.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
+var index = require('./index-CdC7dzZ-.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
 
 const duetShapedImageCss = "*,*::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;width:100%;height:100%;margin:5%}:host(.duet-theme-turva){margin:3%}:host(.duet-m-0){margin:0}.shaped-image{position:relative;display:inline-block;width:100%;height:100%}.shaped-image .shaped-image-mask{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:25%;transform:rotate(var(--rotation))}.shaped-image .shaped-image-mask .shaped-image-img{position:relative;display:block;width:100%;height:100%;background-repeat:no-repeat;background-position:center;background-size:cover;transform:scale(1.07) rotate(calc(-1 * var(--rotation)));transform-origin:center}:host(.duet-theme-turva) .shaped-image .shaped-image-mask{transform:none;-webkit-mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");-webkit-mask-repeat:no-repeat;mask-image:url(\"data:image/svg+xml,%3Csvg%20fill%3D%22currentColor%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20140%22%3E%3Cpath%20d%3D%22M87.8%20139.6a57.3%2057.3%200%2000-18.4-3.3c-8-.5-16.3-2.5-24.6-6-16.7-7-29-18.7-37.1-35.3a73.5%2073.5%200%2001-5-52.4c1.7-4%203-6.7%204-7.8a33%2033%200%20004-7.8C33.4%203.5%2063.2-4.3%20100%203.2c30.5%204%2049.7%2019.9%2057.6%2047.4l1.6%2024c4.4%2036-11.5%2056-47.5%2060.3-4%202.4-12%203.9-24%204.7%22%20fill-rule%3D%22nonzero%22%2F%3E%3C%2Fsvg%3E\");mask-repeat:no-repeat}:host(.duet-theme-turva) .shaped-image .shaped-image-mask .shaped-image-img{transform:none}";
-const DuetShapedImageStyle0 = duetShapedImageCss;
 
 const DuetShapedImage = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Theme of the component.
+         */
         this.theme = "";
-        this.accessibleLabel = undefined;
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
-        this.src = undefined;
+        /**
+         * Rotation. Note: in 'turva' theme there's no rotation.
+         * @default "7"
+         */
         this.rotation = 7;
     }
     /**
@@ -39,6 +44,6 @@ const DuetShapedImage = class {
             }, role: "img", "aria-label": this.accessibleLabel, style: style }, index.h("span", { key: '40f7cd9536a69fd2871a473ddd382acf393bd1b9', class: "shaped-image-mask", role: "presentation" }, index.h("span", { key: 'eda5c54d79dd7b3d06cac81547b5ca56e626597f', class: "shaped-image-img", role: "presentation", style: { backgroundImage: `url("${this.src}")` } })))));
     }
 };
-DuetShapedImage.style = DuetShapedImageStyle0;
+DuetShapedImage.style = duetShapedImageCss;
 
 exports.duet_shaped_image = DuetShapedImage;

package/lib/cjs/duet-show-more.cjs.entry.js

@@ -3,17 +3,14 @@
  */
 '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 keyboardUtils = require('./keyboard-utils-f7c9f980.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 keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var languageUtils = require('./language-utils-A7DfQayC.js');
+require('./string-utils-B35hEUBv.js');
 
 const duetShowMoreCss = "*,*::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}.duet-show-more{margin-bottom:16px !important;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:600;line-height:1.5;color:rgb(8, 42, 77)}.duet-show-more.duet-m-0{margin:0 !important}.duet-show-more .slotted-content{display:none}.duet-show-more.open .slotted-content{display:block}.duet-show-more .content:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-show-more.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-show-more.duet-theme-turva .content:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
-const DuetShowMoreStyle0 = duetShowMoreCss;
 
 const DuetShowMore = class {
     constructor(hostRef) {
@@ -22,62 +19,107 @@ const DuetShowMore = class {
         this.contentId = createId.createID("DuetShowMore");
         this.buttonId = createId.createID("DuetShowMoreButton");
         this.isSafariBrowser = /^((?!chrome|android).)*safari/i.test(navigator === null || navigator === void 0 ? void 0 : navigator.userAgent);
-        this.handleKeyDown = (e) => {
-            if (keyboardUtils.isKeyboardClick(e)) {
-                this.handleClick(e);
-            }
-        };
-        this.handleClick = (e) => {
-            e.preventDefault();
-            const open = !this.open;
-            this.open = open;
-            if (open) {
-                setTimeout(() => {
-                    this.contentElement.focus();
-                }, 100);
-                setTimeout(() => {
-                    this.buttonAriaOpen = open;
-                }, 500);
-            }
-            else {
-                this.buttonAriaOpen = open;
-            }
-            this.duetToggle.emit({
-                component: "duet-show-more",
-                originalEvent: e,
-            });
-        };
         this.buttonAriaOpen = false;
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * The currently active language. This setting also changes the logo to match
+         * the chosen language.
+         * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
+         * @default "fi"
+         */
         this.language = languageUtils.getLanguage();
+        /**
+         * Default translations for show more label.
+         */
         this.showMoreLabelDefaults = {
             fi: "Näytä lisää",
             sv: "Visa mer",
             en: "Show more",
         };
+        /**
+         * Show more label. Defaults to what is in showMoreLabelDefaults prop.
+         */
         this.showMoreLabel = languageUtils.getLocaleString(this.showMoreLabelDefaults);
+        /**
+         * Default translations for show less label.
+         */
         this.showLessLabelDefaults = {
             fi: "Näytä vähemmän",
             sv: "Visa mindre",
             en: "Show less",
         };
+        /**
+         * Show less label. Defaults to what is in showLessLabelDefaults prop.
+         */
         this.showLessLabel = languageUtils.getLocaleString(this.showLessLabelDefaults);
+        /**
+         * Default translations for show more accessible label.
+         */
         this.showMoreAccessibleLabelDefaults = {
             fi: "Näytä lisää tästä aiheesta",
             sv: "Visa mer om detta ämne",
             en: "Show more about this subject",
         };
+        /**
+         * Show more accessible label. Defaults to what is in showMoreAccessibleLabelDefaults prop.
+         */
         this.showMoreAccessibleLabel = languageUtils.getLocaleString(this.showMoreAccessibleLabelDefaults);
+        /**
+         * Default translations for show less accessible label.
+         */
         this.showLessAccessibleLabelDefaults = {
             fi: "Näytä vähemmän tästä aiheesta",
             sv: "Visa mindre om detta ämne",
             en: "Show less about this subject",
         };
+        /**
+         * Show less accessible label. Defaults to what is in showLessAccessibleLabelDefaults prop.
+         */
         this.showLessAccessibleLabel = languageUtils.getLocaleString(this.showLessAccessibleLabelDefaults);
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Controls the margin of the button component inside of show more.
+         */
         this.buttonMargin = "auto";
+        /**
+         * Controls the padding of the button component inside of show more.
+         */
         this.buttonPadding = "auto";
+        /**
+         * Is the component expanded or collapsed.
+         */
         this.open = false;
+        this.handleKeyDown = (e) => {
+            if (keyboardUtils.isKeyboardClick(e)) {
+                this.handleClick(e);
+            }
+        };
+        this.handleClick = (e) => {
+            e.preventDefault();
+            const open = !this.open;
+            this.open = open;
+            if (open) {
+                setTimeout(() => {
+                    this.contentElement.focus();
+                }, 100);
+                setTimeout(() => {
+                    this.buttonAriaOpen = open;
+                }, 500);
+            }
+            else {
+                this.buttonAriaOpen = open;
+            }
+            this.duetToggle.emit({
+                component: "duet-show-more",
+                originalEvent: e,
+            });
+        };
     }
     /**
      * Component lifecycle events.
@@ -111,6 +153,6 @@ const DuetShowMore = class {
     }
     get element() { return index.getElement(this); }
 };
-DuetShowMore.style = DuetShowMoreStyle0;
+DuetShowMore.style = duetShowMoreCss;
 
 exports.duet_show_more = DuetShowMore;

package/lib/cjs/duet-slideout-lang.cjs.entry.js

@@ -3,15 +3,12 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-00821d28.js');
-const themeableComponent = require('./themeable-component-996b489c.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 languageUtils = require('./language-utils-A7DfQayC.js');
+require('./string-utils-B35hEUBv.js');
 
 const duetSlideoutLangCss = "*,*::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-slideout-lang{display:flex;gap:20px;align-items:center;justify-content:flex-start;width:min-content;white-space:nowrap}::slotted(*){position:relative}::slotted(:not(:first-child)){padding-right:0;padding-left:0.5rem}::slotted(:not(:last-child))::after{position:absolute;top:25%;right:-16px;width:2px;height:50%;content:\"\";background:rgb(8, 42, 77)}.duet-theme-turva ::slotted(:not(:last-child))::after{background:rgb(23, 28, 58)}";
-const DuetSlideoutLangStyle0 = duetSlideoutLangCss;
 
 const DuetSlideoutLang = class {
     constructor(hostRef) {
@@ -25,6 +22,9 @@ const DuetSlideoutLang = class {
             sv: "Välj språk",
         };
         this.language = languageUtils.getLanguage();
+        /**
+         * Theme.
+         */
         this.theme = "";
     }
     /**
@@ -49,6 +49,6 @@ const DuetSlideoutLang = class {
     }
     get element() { return index.getElement(this); }
 };
-DuetSlideoutLang.style = DuetSlideoutLangStyle0;
+DuetSlideoutLang.style = duetSlideoutLangCss;
 
 exports.duet_slideout_lang = DuetSlideoutLang;

package/lib/cjs/duet-slideout-link.cjs.entry.js

@@ -3,34 +3,67 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-00821d28.js');
-const actionNewWindowSmall = require('./action-new-window-small-fa51dfb9.js');
-const commonStrings = require('./common-strings-2984301e.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const a11yUtils = require('./a11y-utils-afeb2485.js');
-const languageUtils = require('./language-utils-77bf1c27.js');
-require('./slot-utils-acd4cc20.js');
-require('./string-utils-7b13c16e.js');
+var index = require('./index-CdC7dzZ-.js');
+var actionNewWindowSmall = require('./action-new-window-small-BWlVx6YN.js');
+var commonStrings = require('./common-strings-BhhnIQp3.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
+var a11yUtils = require('./a11y-utils-CrefuUbk.js');
+var languageUtils = require('./language-utils-A7DfQayC.js');
+require('./_commonjsHelpers-4N64IRaP.js');
+require('./slot-utils-DgJchaT4.js');
+require('./string-utils-B35hEUBv.js');
 
 const duetSlideoutLinkCss = "*,*::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:100%}.duet-slideout-link{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 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:inherit;font-weight:inherit;line-height:1.25;color:inherit;text-align:left;text-decoration:none}.duet-slideout-link:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-slideout-link:focus,.duet-slideout-link:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-link.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-slideout-link.active span{position:relative}.duet-slideout-link.active .label-content::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:100%;height:var(--active-height, 2px);content:\"\";background:rgb(0, 119, 179);transform:var(--active-translate-y, translateY(2px))}.duet-slideout-link.active.duet-theme-turva span::after{background:rgb(198, 12, 48)}.duet-slideout-link.small{font-size:1rem;font-weight:600}.duet-slideout-link.small span::after{--active-height:1px;--active-translate-y:1px}.duet-slideout-link.medium{font-size:1.25rem;font-weight:600}.duet-slideout-link.large{font-size:1.5rem;font-weight:800}.duet-slideout-link .label{display:flex;gap:8px;align-items:center;justify-content:space-between;width:100%}.duet-slideout-link .label-container{display:flex;gap:8px;align-items:center;justify-content:flex-start;width:100%}.duet-slideout-link .external-icon{width:10px;height:10px}.duet-slideout-link.medium .external-icon,.duet-slideout-link.large .external-icon{width:12px;height:12px}slot[name=description]::slotted(*){display:block;padding:8px 0 0;font-size:1rem;font-size:1.25;font-weight:400;color:rgb(98, 121, 138)}.duet-theme-turva slot[name=description]::slotted(*){color:rgb(113, 118, 132)}";
-const DuetSlideoutLinkStyle0 = duetSlideoutLinkCss;
 
 const DuetSlideoutLink = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.accessibleLabel = undefined;
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Language of the link. Use this only for language selection links.
+         */
         this.targetLanguage = undefined;
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Href
+         */
         this.href = "#";
+        /**
+         * Icon
+         */
         this.icon = undefined;
+        /**
+         * Size. Inherit, small, medium or large. Inherit value inherits styles from the value in the underlying slot.
+         */
         this.size = "inherit";
+        /**
+         * Caret
+         */
         this.caret = false;
+        /**
+         * @internal
+         * Indicates the component is used where aria-role menuitem is expected
+         */
         this.menuItem = false;
+        /**
+         * Defaults for accessibleLabelExternal
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternalDefaults = commonStrings.DuetStringsExternalDefaults;
+        /**
+         * Adds accessible label for tooltip that is shown in external link (url & external have both been set)
+         * @default {fi: "Avautuu uuteen ikkunaan",sv: "Öppnas i nytt fönster",en: "Opens in a new window"}
+         */
         this.accessibleLabelExternal = languageUtils.getLocaleString(this.accessibleLabelExternalDefaults);
+        /**
+         * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
         this.external = false;
     }
     /**
@@ -58,10 +91,10 @@ const DuetSlideoutLink = class {
                 "duet-theme-turva": this.theme === "turva",
                 active: this.active,
                 [this.size]: true,
-            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && a11yUtils.getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (index.h("duet-icon", { key: 'f3ffdad987835f9fe725488811516df41ebc1804', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), index.h("div", { key: '15e073801cc1649271724ce8ba557fc6a0595f5e', class: "label" }, index.h("span", { key: '54b7d1a19b38f4fc75363f35b761972e8591f121' }, index.h("span", { key: '727d4e01ef993eea033f9f6aabf055c142847f0a', class: "label-container" }, index.h("span", { key: 'ccedbbd2c4c2222335a448d7a7282bf475def69c', class: "label-content" }, index.h("slot", { key: '23a61b0a7cba001323c158b2ba476555948dc0c1' })), this.external && (index.h("duet-icon", { key: 'c026a8a54f2ba4ef095d4e581c44bdbb64037869', class: "external-icon", theme: this.theme, name: actionNewWindowSmall.actionNewWindowSmall.title, margin: "none", size: "auto", color: "currentColor" }))), index.h("slot", { key: '148bed5c517070f08c819790debfff17f8e6b61a', name: "description" })), this.caret && (index.h("duet-icon", { key: '1028cc2f997369cc2e0eddc6221ac78b0c30c584', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
+            }, href: this.href, "aria-current": this.active ? "true" : "false", lang: this.targetLanguage, hreflang: this.targetLanguage, "aria-label": (this.href && a11yUtils.getAccessibleLinkLabel(this)) || this.accessibleLabel, rel: this.external ? "noopener" : undefined }, this.icon && (index.h("duet-icon", { key: 'f3ffdad987835f9fe725488811516df41ebc1804', name: this.icon, color: "secondary", size: this.menuItem ? "x-small" : "medium", margin: "none" })), index.h("div", { key: '15e073801cc1649271724ce8ba557fc6a0595f5e', class: "label" }, index.h("span", { key: '54b7d1a19b38f4fc75363f35b761972e8591f121' }, index.h("span", { key: '727d4e01ef993eea033f9f6aabf055c142847f0a', class: "label-container" }, index.h("span", { key: 'ccedbbd2c4c2222335a448d7a7282bf475def69c', class: "label-content" }, index.h("slot", { key: '23a61b0a7cba001323c158b2ba476555948dc0c1' })), this.external && (index.h("duet-icon", { key: 'c026a8a54f2ba4ef095d4e581c44bdbb64037869', class: "external-icon", theme: this.theme, name: actionNewWindowSmall.newWindowIcon.title, margin: "none", size: "auto", color: "currentColor" }))), index.h("slot", { key: '148bed5c517070f08c819790debfff17f8e6b61a', name: "description" })), this.caret && (index.h("duet-icon", { key: '1028cc2f997369cc2e0eddc6221ac78b0c30c584', name: "action-arrow-right", color: "secondary", size: "x-small", margin: "none" }))))));
     }
     get element() { return index.getElement(this); }
 };
-DuetSlideoutLink.style = DuetSlideoutLinkStyle0;
+DuetSlideoutLink.style = duetSlideoutLinkCss;
 
 exports.duet_slideout_link = DuetSlideoutLink;

package/lib/cjs/duet-slideout-panel-dropdown.cjs.entry.js

@@ -3,24 +3,33 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-00821d28.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
+var index = require('./index-CdC7dzZ-.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
 
 const duetSlideoutPanelDropdownCss = "*,*::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:100%}:host slot:not([name=label])::slotted(*){position:relative;top:-0.5rem;opacity:0;transition:top 0.3s ease-in, opacity 0.3s ease-in}:host([open]) slot:not([name=label])::slotted(*){top:0;opacity:1}.duet-slideout-panel-dropdown{position:relative;width:100%;height:100%}.duet-slideout-panel-dropdown button{position:relative;display:flex;gap:20px;align-items:center;justify-content:flex-start;width:100%;height:100%;padding:8px 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:1.25rem;font-weight:800;line-height:1.25;color:rgb(8, 42, 77);text-align:center;text-decoration:none;cursor:pointer}.duet-slideout-panel-dropdown button .label{position:relative;display:flex;gap:0.5rem;align-items:center;justify-content:center}.duet-slideout-panel-dropdown button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-slideout-panel-dropdown button.active .label::after{position:absolute;top:auto;bottom:0;left:0;display:block;width:calc(100% - 18px);height:1px;content:\"\";background:rgb(0, 119, 179);transform:translateY(1px)}.duet-slideout-panel-dropdown .items{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;max-height:1000px;padding:4px 20px 8px 44px;overflow-y:auto;visibility:visible;transition:max-height 0.3s ease-in, padding-bottom 0.3s ease-in;-ms-overflow-style:none;scrollbar-width:none}.duet-slideout-panel-dropdown .items::-webkit-scrollbar{display:none}.duet-slideout-panel-dropdown .items.hidden{max-height:0;padding:0;overflow:hidden;visibility:hidden;transition:max-height 0.3s ease-out, padding-bottom 0.3s ease-out}.duet-slideout-panel-dropdown.duet-theme-turva button{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-slideout-panel-dropdown.duet-theme-turva button:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-slideout-panel-dropdown.duet-theme-turva button.active .label::after{background:rgb(198, 12, 48)}slot{--active-height:1px;--active-translate-y:translateY(1px);font-size:1rem;font-weight:400;color:rgb(8, 42, 77)}.duet-theme-turva slot{color:rgb(23, 28, 58)}slot[name=label]{font-size:1rem;font-weight:600}";
-const DuetSlideoutPanelDropdownStyle0 = duetSlideoutPanelDropdownCss;
 
 const DuetSlideoutPanelDropdown = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.onClick = () => {
-            this.open = !this.open;
-        };
+        /**
+         * Theme.
+         */
         this.theme = "";
+        /**
+         * Active
+         */
         this.active = false;
+        /**
+         * Open
+         */
         this.open = false;
+        /**
+         * Icon
+         */
         this.icon = undefined;
+        this.onClick = () => {
+            this.open = !this.open;
+        };
     }
     handleFocus(e) {
         const isClickOutside = e.composedPath().every(node => node !== this.element);
@@ -62,6 +71,6 @@ const DuetSlideoutPanelDropdown = class {
     }
     get element() { return index.getElement(this); }
 };
-DuetSlideoutPanelDropdown.style = DuetSlideoutPanelDropdownStyle0;
+DuetSlideoutPanelDropdown.style = duetSlideoutPanelDropdownCss;
 
 exports.duet_slideout_panel_dropdown = DuetSlideoutPanelDropdown;