@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.31

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

@@ -3,24 +3,145 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-CKsfMbRW.js');
+var themeableComponent = require('./themeable-component-BuC0WY98.js');
+var commonStrings = require('./common-strings-CSqtNIxt.js');
+var languageUtils = require('./language-utils-CYOjMfnd.js');
+var tokenUtils = require('./token-utils-COKjUxmn.js');
+require('./string-utils-B35hEUBv.js');
+require('./tokens.module-Bhh9B2g8.js');
 
-const index = require('./index-21e67ab3.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const commonStrings = require('./common-strings-2984301e.js');
-const languageUtils = require('./language-utils-b5940c7b.js');
-const tokenUtils = require('./token-utils-5000595c.js');
-require('./string-utils-7b13c16e.js');
-require('./tokens.module-7c947029.js');
-
-const duetButtonCss = "*,*::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:8px !important;margin-bottom:12px !important;position:relative;z-index:1;display:inline-flex;width:auto;max-width:100%;font-size:0;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){:host{width:100%}}:host(.square){margin-right:12px !important}:host(.square):last-child,:host(.square):last-of-type{margin-right:0 !important}:host(.input-button){z-index:250}:host(.duet-small),:host(.duet-x-small){margin-right:4px !important;margin-bottom:8px !important}:host(.duet-small):last-child,:host(.duet-small):last-of-type,:host(.duet-x-small):last-child,:host(.duet-x-small):last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){:host(.duet-small),:host(.duet-x-small){width:auto}}:host(.duet-x-small){margin-right:2px !important}:host(.duet-x-small):last-child,:host(.duet-x-small):last-of-type{margin-right:0 !important}:host(.square.duet-small),:host(.square.duet-x-small){margin-right:8px !important}:host(.square.duet-small):last-child,:host(.square.duet-small):last-of-type,:host(.square.duet-x-small):last-child,:host(.square.duet-x-small):last-of-type{margin-right:0 !important}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}:host(.duet-fixed){width:auto !important}:host(:last-child){margin-right:0 !important}.duet-button-container{position:relative;display:block;width:100%}.duet-button{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:flex;align-items:center;width:100%;min-width:8rem;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.1;color:rgb(0, 119, 179) !important;text-align:center;text-decoration:none;cursor:pointer;background:transparent;border-style:solid;border-width:1px;transition:background-color 300ms ease, color 300ms ease, border 300ms ease, outline 300ms ease, padding 300ms ease, box-shadow 300ms ease}.duet-button.duet-p-0{padding:0 !important}.duet-button.duet-m-0{margin:0 !important}.duet-button:focus{outline:0;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}.duet-theme-turva .duet-button:focus,.duet-button:focus.duet-theme-turva{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}.duet-button.duet-button-size-medium{height:50px;padding-right:30px;padding-left:30px;font-size:1rem;border-radius:25px}.duet-theme-turva .duet-button.duet-button-size-medium{padding-right:24px;padding-left:24px;border-radius:12.5px}.duet-button.duet-button-size-medium.square{border-radius:12.5px}.duet-button.duet-button-size-medium.icon-left{padding-left:24px}.duet-theme-turva .duet-button.duet-button-size-medium.icon-left{padding-left:18px}.duet-button.duet-button-size-medium.icon-right{padding-right:24px}.duet-theme-turva .duet-button.duet-button-size-medium.icon-right{padding-right:18px}.duet-button.duet-button-size-small{height:40px;padding-right:20px;padding-left:20px;font-size:0.875rem;border-radius:20px}.duet-theme-turva .duet-button.duet-button-size-small{padding-right:18px;padding-left:18px;border-radius:10px}.duet-button.duet-button-size-small.square{border-radius:10px}.duet-button.duet-button-size-small.icon-left{padding-left:18px}.duet-theme-turva .duet-button.duet-button-size-small.icon-left{padding-left:14px}.duet-button.duet-button-size-small.icon-right{padding-right:18px}.duet-theme-turva .duet-button.duet-button-size-small.icon-right{padding-right:14px}.duet-button.duet-button-size-x-small{height:32px;padding-right:12px;padding-left:12px;font-size:0.75rem;border-radius:8px}.duet-button.duet-button-size-x-small.icon-left{padding-left:10px}.duet-button.duet-button-size-x-small.icon-right{padding-right:10px}.duet-button.plain.duet-p-0{height:auto}.duet-button:not(.input-button-primary,.input-button-secondary,.input-button-embedded){font-variant-numeric:tabular-nums}.duet-button.duet-button-text-center{text-align:center !important}.duet-button.duet-button-is-small:not(.duet-button-icon-only){min-width:48px}.duet-button.duet-button-is-small:not(.duet-button-icon-only).plain{padding-right:0 !important;padding-left:0 !important}.duet-button.duet-button-is-small:not(.duet-button-icon-only).duet-p-0{padding:0 !important}.duet-theme-turva .duet-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(198, 12, 48) !important}.duet-button .duet-button-contents{position:relative;display:flex;gap:10px;align-items:center;margin:0 auto;pointer-events:none}.duet-button .duet-button-contents.icon-right{flex-direction:row-reverse}.duet-button .duet-button-contents .duet-button-contents-slot{position:relative;top:0}.duet-button.duet-no-wrap{white-space:nowrap}.duet-button svg{width:100%;min-width:100%;fill:currentColor}.duet-button .duet-button-icon{display:flex;align-items:center}.duet-button .duet-button-icon duet-icon{width:16px;height:16px}.duet-button .duet-button-icon.large duet-icon{width:20px;height:20px}.duet-button .duet-button-icon.medium-small duet-icon{width:10px;height:10px}.duet-button .duet-button-icon.small duet-icon{width:7px;height:7px}.duet-button:active:not([disabled]){opacity:0.75;transition:none}.duet-button.default{background:rgb(255, 255, 255);border-color:rgb(181, 198, 208)}.duet-theme-turva .duet-button.default{color:rgb(198, 12, 48) !important;border-color:rgb(222, 224, 228)}.duet-button.default:hover{border-color:rgb(0, 119, 179);outline:2px solid rgb(0, 119, 179);outline-offset:-2px}.duet-theme-turva .duet-button.default:hover{border-color:rgb(198, 12, 48);outline-color:rgb(198, 12, 48)}.duet-button.default.duet-button-negative{background-color:rgb(255, 255, 255)}.duet-theme-turva .duet-button.default.duet-button-negative{background-color:rgb(222, 224, 228) !important}.duet-button.default.duet-button-negative:hover{color:rgb(0, 119, 179) !important;border-color:rgb(0, 119, 179)}.duet-theme-turva .duet-button.default.duet-button-negative:hover{color:rgb(198, 12, 48) !important;border-color:rgb(198, 12, 48)}.duet-button.primary,.duet-button.input-button-primary{color:rgb(255, 255, 255) !important;background:rgb(0, 119, 179);border-color:rgb(0, 119, 179)}.duet-theme-turva .duet-button.primary,.duet-theme-turva .duet-button.input-button-primary{color:rgb(255, 255, 255) !important;background:rgb(198, 12, 48);border-color:rgb(198, 12, 48)}.duet-button.primary:hover,.duet-button.input-button-primary:hover{background:#005f8f;border-color:#005f8f;box-shadow:0 4px 20px 0 rgba(34, 34, 34, 0.1)}.duet-theme-turva .duet-button.primary:hover,.duet-theme-turva .duet-button.input-button-primary:hover{background:rgb(126, 2, 35);border-color:rgb(126, 2, 35)}.duet-button.primary:focus,.duet-button.input-button-primary:focus{outline:0;box-shadow:0 0 0 1px #fff, 0 0 0 4px rgba(0, 119, 179, 0.75)}.duet-theme-turva .duet-button.primary:focus,.duet-theme-turva .duet-button.input-button-primary:focus{box-shadow:0 0 0 1px #fff, 0 0 0 4px rgba(23, 28, 58, 0.75)}.duet-button.secondary,.duet-button.input-button-secondary,.duet-button.input-button-embedded{color:rgb(8, 42, 77) !important;background:transparent;border-color:rgb(8, 42, 77)}.duet-theme-turva .duet-button.secondary,.duet-theme-turva .duet-button.input-button-secondary,.duet-theme-turva .duet-button.input-button-embedded{color:rgb(23, 28, 58) !important;border-color:rgb(23, 28, 58)}.duet-button.secondary:hover,.duet-button.input-button-secondary:hover,.duet-button.input-button-embedded:hover{color:rgb(0, 119, 179) !important;border-color:rgb(0, 119, 179)}.duet-theme-turva .duet-button.secondary:hover,.duet-theme-turva .duet-button.input-button-secondary:hover,.duet-theme-turva .duet-button.input-button-embedded:hover{color:rgb(198, 12, 48) !important;border-color:rgb(198, 12, 48)}.duet-button.secondary.duet-button-negative,.duet-button.input-button-secondary.duet-button-negative,.duet-button.input-button-embedded.duet-button-negative{color:rgb(212, 223, 229) !important;border-color:rgb(255, 255, 255)}.duet-theme-turva .duet-button.secondary.duet-button-negative,.duet-theme-turva .duet-button.input-button-secondary.duet-button-negative,.duet-theme-turva .duet-button.input-button-embedded.duet-button-negative{color:rgb(222, 224, 228) !important}.duet-button.secondary.duet-button-negative:hover,.duet-button.input-button-secondary.duet-button-negative:hover,.duet-button.input-button-embedded.duet-button-negative:hover{color:rgb(0, 119, 179) !important;border-color:rgb(0, 119, 179)}.duet-theme-turva .duet-button.secondary.duet-button-negative:hover,.duet-theme-turva .duet-button.input-button-secondary.duet-button-negative:hover,.duet-theme-turva .duet-button.input-button-embedded.duet-button-negative:hover{color:rgb(198, 12, 48) !important;border-color:rgb(198, 12, 48)}.duet-button.input-button-embedded{width:40px;min-width:40px !important;min-height:40px !important;margin:4px !important;border-width:0 !important;border-radius:4px !important}.duet-button.input-button{height:auto}.duet-button.negative{color:rgb(8, 42, 77) !important;background:rgb(255, 255, 255);border-color:rgb(255, 255, 255)}.duet-theme-turva .duet-button.negative{color:rgb(23, 28, 58) !important}.duet-button.negative:hover{color:rgb(255, 255, 255) !important;background:transparent;border-color:rgb(255, 255, 255)}.duet-button.negative:focus{outline:0;box-shadow:0 0 0 1px #00294d, 0 0 0 4px rgba(255, 255, 255, 0.7)}.duet-theme-turva .duet-button.negative:focus{box-shadow:0 0 0 1px #0077b3, 0 0 0 4px rgba(255, 255, 255, 0.7)}.duet-button.destructive-primary{color:rgb(255, 255, 255) !important;background:rgb(214, 28, 82);border-color:rgb(214, 28, 82)}.duet-theme-turva .duet-button.destructive-primary{color:rgb(255, 255, 255) !important;background:rgb(214, 28, 82);border-color:rgb(214, 28, 82)}.duet-button.destructive-primary:hover{background:#ab1642;border-color:#ab1642;box-shadow:0 4px 20px 0 rgba(34, 34, 34, 0.1)}.duet-theme-turva .duet-button.destructive-primary:hover{background:#ab1642}.duet-button.destructive,.duet-button.destructive-secondary{color:rgb(214, 28, 82) !important;background:rgb(255, 255, 255);border-color:rgb(214, 28, 82)}.duet-theme-turva .duet-button.destructive,.duet-theme-turva .duet-button.destructive-secondary{color:rgb(214, 28, 82) !important;background:rgb(255, 255, 255);border-color:rgb(214, 28, 82)}.duet-button.destructive:hover,.duet-button.destructive-secondary:hover{color:rgb(255, 255, 255) !important;background:#ab1642;border-color:#ab1642}.duet-theme-turva .duet-button.destructive:hover,.duet-theme-turva .duet-button.destructive-secondary:hover{color:rgb(255, 255, 255) !important;background:#ab1642;border-color:#ab1642}.duet-button.plain{min-width:48px;padding-right:0 !important;padding-left:0 !important;line-height:1.5;text-align:left;background:transparent;border:0;border-color:transparent;border-radius:4px}.duet-theme-turva .duet-button.plain{color:rgb(198, 12, 48) !important;background:transparent;border-color:transparent}.duet-button.plain.duet-p-0 .duet-button-contents{height:auto}.duet-button.plain[disabled]{color:rgb(98, 121, 138) !important;cursor:not-allowed;background:transparent !important;border-color:transparent !important}.duet-theme-turva .duet-button.plain[disabled]{color:transparent !important;cursor:not-allowed;background:transparent !important;border-color:rgb(222, 224, 228) !important}.duet-button.plain:hover{color:rgb(0, 75, 129) !important;background:transparent !important}.duet-theme-turva .duet-button.plain:hover{color:rgb(126, 2, 35) !important}.duet-button.plain.duet-button-negative{color:rgb(255, 255, 255) !important}.duet-theme-turva .duet-button.plain.duet-button-negative{color:rgb(255, 255, 255) !important}.duet-button.plain.duet-button-negative:hover{color:rgba(255, 255, 255, 0.8) !important}.duet-button.duet-button-icon-only{min-width:48px;min-height:48px;padding:0 !important}.duet-button.duet-button-icon-only .duet-button-contents{position:static}.duet-button.duet-button-icon-only .duet-button-icon.left.large,.duet-button.duet-button-icon-only .duet-button-icon.left.medium,.duet-button.duet-button-icon-only .duet-button-icon.left.small{position:absolute;top:50% !important;left:50% !important;padding:0;margin:0;transform:translateX(-50%) translateY(-50%)}.duet-button.duet-button.input-button-primary,.duet-button.duet-button.input-button-secondary,.duet-button.duet-button.input-button-embedded{box-sizing:content-box;min-width:48px;min-height:48px;padding:0 !important;border-width:1px;border-top-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:0}.duet-button.duet-button.input-button-primary .duet-button-contents,.duet-button.duet-button.input-button-secondary .duet-button-contents,.duet-button.duet-button.input-button-embedded .duet-button-contents{position:static}.duet-button.duet-button.input-button-primary .duet-button-icon.left.large,.duet-button.duet-button.input-button-primary .duet-button-icon.left.medium,.duet-button.duet-button.input-button-primary .duet-button-icon.left.small,.duet-button.duet-button.input-button-secondary .duet-button-icon.left.large,.duet-button.duet-button.input-button-secondary .duet-button-icon.left.medium,.duet-button.duet-button.input-button-secondary .duet-button-icon.left.small,.duet-button.duet-button.input-button-embedded .duet-button-icon.left.large,.duet-button.duet-button.input-button-embedded .duet-button-icon.left.medium,.duet-button.duet-button.input-button-embedded .duet-button-icon.left.small{position:absolute;top:50% !important;left:50% !important;padding:0;margin:0;transform:translateX(-50%) translateY(-50%)}.duet-button.duet-button.input-button-embedded{border-left-width:0}.duet-button.square{width:52px;min-width:auto !important;padding:0 !important;font-size:1rem;border-color:rgb(181, 198, 208);border-width:1px}.duet-button.square.duet-button-size-small{width:42px;font-size:0.875rem}.duet-button.square.duet-button-size-x-small{width:34px;font-size:0.875rem}.duet-button.square.duet-button-negative{color:rgb(255, 255, 255) !important;background:rgb(0, 119, 179);border-color:rgb(0, 119, 179)}.duet-theme-turva .duet-button.square.duet-button-negative{color:rgb(255, 255, 255) !important;background:rgb(198, 12, 48);border-color:rgb(198, 12, 48)}.duet-theme-turva .duet-button.square{border-color:rgb(222, 224, 228)}.duet-button.square:hover{border-color:rgb(0, 119, 179);outline:2px solid rgb(0, 119, 179);outline-offset:-2px}.duet-theme-turva .duet-button.square:hover{border-color:rgb(198, 12, 48);outline-color:rgb(198, 12, 48)}.duet-button.square .duet-button-contents{gap:0}.duet-button[disabled],.duet-button[disabled]:hover,.duet-button.duet-button-negative[disabled],.duet-button.duet-button-negative[disabled]:hover{color:rgb(98, 121, 138) !important;cursor:not-allowed;background:rgb(212, 223, 229) !important;border-color:rgb(212, 223, 229) !important;outline-color:rgb(212, 223, 229) !important;box-shadow:none !important}.duet-theme-turva .duet-button[disabled],.duet-theme-turva .duet-button[disabled]:hover,.duet-theme-turva .duet-button.duet-button-negative [disabled],.duet-theme-turva .duet-button.duet-button-negative [disabled]:hover{color:rgb(143, 147, 158) !important;cursor:not-allowed;background:rgb(222, 224, 228) !important;border-color:rgb(222, 224, 228) !important;outline-color:rgb(222, 224, 228) !important}.duet-button-is-loading.primary,.duet-button-is-loading.input-button-primary{color:rgb(255, 255, 255)}.duet-button-is-loading.default{color:rgb(0, 119, 179)}.duet-button-is-loading.default.duet-theme-turva{color:rgb(198, 12, 48)}.duet-button-is-loading .duet-button-contents{visibility:hidden;opacity:0}";
-const DuetButtonStyle0 = duetButtonCss;
+const duetButtonCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;margin-right:8px !important;margin-bottom:12px !important;position:relative;z-index:1;display:inline-flex;width:auto;max-width:100%;font-size:0;vertical-align:bottom;-webkit-tap-highlight-color:transparent}:host:last-child,:host:last-of-type{margin-right:0 !important}[alignment=form-distribute]>:host:last-of-type{margin-right:8px !important}@media (max-width: 35.9375em){:host{width:100%}}:host(.square){margin-right:12px !important}:host(.square):last-child,:host(.square):last-of-type{margin-right:0 !important}[alignment=form-distribute]>:host(.square):last-of-type{margin-right:12px !important}:host(.input-button){z-index:250}:host(.duet-small),:host(.duet-x-small){margin-right:4px !important;margin-bottom:8px !important}:host(.duet-small):last-child,:host(.duet-small):last-of-type,:host(.duet-x-small):last-child,:host(.duet-x-small):last-of-type{margin-right:0 !important}[alignment=form-distribute]>:host(.duet-small):last-of-type,[alignment=form-distribute]>:host(.duet-x-small):last-of-type{margin-right:4px !important}@media (max-width: 35.9375em){:host(.duet-small),:host(.duet-x-small){width:auto}}:host(.duet-x-small){margin-right:2px !important}:host(.duet-x-small):last-child,:host(.duet-x-small):last-of-type{margin-right:0 !important}[alignment=form-distribute]>:host(.duet-x-small):last-of-type{margin-right:2px !important}:host(.square.duet-small),:host(.square.duet-x-small){margin-right:8px !important}:host(.square.duet-small):last-child,:host(.square.duet-small):last-of-type,:host(.square.duet-x-small):last-child,:host(.square.duet-x-small):last-of-type{margin-right:0 !important}[alignment=form-distribute]>:host(.square.duet-small):last-of-type,[alignment=form-distribute]>:host(.square.duet-x-small):last-of-type{margin-right:8px !important}:host(.duet-expand){width:100% !important}:host(.duet-m-0){margin:0 !important}:host(.duet-fixed){width:auto !important}:host(:last-child){margin-right:0 !important}.duet-button-container{position:relative;display:block;width:100%}.duet-button{-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:flex;align-items:center;width:100%;min-width:8rem;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.1;color:rgb(0, 119, 179) !important;text-align:center;text-decoration:none;cursor:pointer;background:transparent;border-style:solid;border-width:1px;transition:background-color 300ms ease, color 300ms ease, border 300ms ease, padding 300ms ease, box-shadow 300ms ease}.duet-button.duet-p-0{padding:0 !important}.duet-button.duet-m-0{margin:0 !important}.duet-button:focus{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva .duet-button:focus,.duet-button:focus.duet-theme-turva,.duet-theme-turva2 .duet-button:focus,.duet-button:focus.duet-theme-turva2{outline:2px solid;outline-offset:2px;outline-color:rgba(53, 79, 101, 0.8)}.duet-button.duet-button-size-medium{height:50px;padding-right:30px;padding-left:30px;font-size:1rem;border-radius:25px}.duet-theme-turva .duet-button.duet-button-size-medium{padding-right:24px;padding-left:24px;border-radius:12.5px}.duet-button.duet-button-size-medium.square{border-radius:12.5px}.duet-button.duet-button-size-medium.icon-left{padding-left:24px}.duet-theme-turva .duet-button.duet-button-size-medium.icon-left{padding-left:18px}.duet-button.duet-button-size-medium.icon-right{padding-right:24px}.duet-theme-turva .duet-button.duet-button-size-medium.icon-right{padding-right:18px}.duet-button.duet-button-size-small{height:40px;padding-right:20px;padding-left:20px;font-size:0.875rem;border-radius:20px}.duet-theme-turva .duet-button.duet-button-size-small{padding-right:18px;padding-left:18px;border-radius:10px}.duet-button.duet-button-size-small.square{border-radius:10px}.duet-button.duet-button-size-small.icon-left{padding-left:18px}.duet-theme-turva .duet-button.duet-button-size-small.icon-left{padding-left:14px}.duet-button.duet-button-size-small.icon-right{padding-right:18px}.duet-theme-turva .duet-button.duet-button-size-small.icon-right{padding-right:14px}.duet-button.duet-button-size-x-small{height:32px;padding-right:12px;padding-left:12px;font-size:0.75rem;border-radius:8px}.duet-button.duet-button-size-x-small.icon-left{padding-left:10px}.duet-button.duet-button-size-x-small.icon-right{padding-right:10px}.duet-button.plain.duet-p-0{height:auto}.duet-button:not(.input-button-primary,.input-button-secondary,.input-button-embedded){font-variant-numeric:tabular-nums}.duet-button.duet-button-text-center{text-align:center !important}.duet-button.duet-button-is-small:not(.duet-button-icon-only){min-width:48px}.duet-button.duet-button-is-small:not(.duet-button-icon-only).plain{padding-right:0 !important;padding-left:0 !important}.duet-button.duet-button-is-small:not(.duet-button-icon-only).duet-p-0{padding:0 !important}.duet-theme-turva .duet-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(198, 12, 48) !important}.duet-button .duet-button-contents{position:relative;display:flex;gap:10px;align-items:center;margin:0 auto;pointer-events:none}.duet-button .duet-button-contents.icon-right{flex-direction:row-reverse}.duet-button .duet-button-contents .duet-button-contents-slot{position:relative;top:0}.duet-button.duet-no-wrap{white-space:nowrap}.duet-button svg{width:100%;min-width:100%;fill:currentColor}.duet-button .duet-button-icon{display:flex;align-items:center}.duet-button .duet-button-icon duet-icon{width:16px;height:16px}.duet-button .duet-button-icon.large duet-icon{width:20px;height:20px}.duet-button .duet-button-icon.medium-small duet-icon{width:10px;height:10px}.duet-button .duet-button-icon.small duet-icon{width:7px;height:7px}.duet-button:active:not([disabled]){opacity:0.75;transition:none}.duet-button.default{background:rgb(255, 255, 255);border-color:rgb(181, 198, 208)}.duet-theme-turva .duet-button.default{color:rgb(198, 12, 48) !important;border-color:rgb(222, 224, 228)}.duet-button.default:hover{outline:2px solid rgb(0, 119, 179);outline-offset:-2px;border-color:rgb(0, 119, 179)}.duet-theme-turva .duet-button.default:hover{outline-color:rgb(198, 12, 48);border-color:rgb(198, 12, 48)}.duet-button.default.duet-button-negative{background-color:rgb(255, 255, 255)}.duet-theme-turva .duet-button.default.duet-button-negative{background-color:rgb(222, 224, 228) !important}.duet-button.default.duet-button-negative:hover{color:rgb(0, 119, 179) !important;border-color:rgb(0, 119, 179)}.duet-theme-turva .duet-button.default.duet-button-negative:hover{color:rgb(198, 12, 48) !important;border-color:rgb(198, 12, 48)}.duet-button.primary,.duet-button.input-button-primary,.duet-button.input-button-left-primary{color:rgb(255, 255, 255) !important;background:rgb(0, 119, 179);border-color:rgb(0, 119, 179)}.duet-theme-turva .duet-button.primary,.duet-theme-turva .duet-button.input-button-primary,.duet-theme-turva .duet-button.input-button-left-primary{color:rgb(255, 255, 255) !important;background:rgb(198, 12, 48);border-color:rgb(198, 12, 48)}.duet-button.primary:hover,.duet-button.input-button-primary:hover,.duet-button.input-button-left-primary:hover{background:#005f8f;border-color:#005f8f;box-shadow:0 4px 20px 0 rgba(34, 34, 34, 0.1)}.duet-theme-turva .duet-button.primary:hover,.duet-theme-turva .duet-button.input-button-primary:hover,.duet-theme-turva .duet-button.input-button-left-primary:hover{background:rgb(126, 2, 35);border-color:rgb(126, 2, 35)}.duet-button.secondary,.duet-button.input-button-secondary,.duet-button.input-button-left-secondary,.duet-button.input-button-embedded{color:rgb(8, 42, 77) !important;background:transparent;border-color:rgb(8, 42, 77)}.duet-theme-turva .duet-button.secondary,.duet-theme-turva .duet-button.input-button-secondary,.duet-theme-turva .duet-button.input-button-left-secondary,.duet-theme-turva .duet-button.input-button-embedded{color:rgb(23, 28, 58) !important;border-color:rgb(23, 28, 58)}.duet-button.secondary:hover,.duet-button.input-button-secondary:hover,.duet-button.input-button-left-secondary:hover,.duet-button.input-button-embedded:hover{color:rgb(0, 119, 179) !important;border-color:rgb(0, 119, 179);outline:2px solid;outline-color:rgb(98, 121, 138);outline-offset:-1px}.duet-theme-turva .duet-button.secondary:hover,.duet-button.secondary:hover.duet-theme-turva,.duet-theme-turva2 .duet-button.secondary:hover,.duet-button.secondary:hover.duet-theme-turva2,.duet-theme-turva .duet-button.input-button-secondary:hover,.duet-button.input-button-secondary:hover.duet-theme-turva,.duet-theme-turva2 .duet-button.input-button-secondary:hover,.duet-button.input-button-secondary:hover.duet-theme-turva2,.duet-theme-turva .duet-button.input-button-left-secondary:hover,.duet-button.input-button-left-secondary:hover.duet-theme-turva,.duet-theme-turva2 .duet-button.input-button-left-secondary:hover,.duet-button.input-button-left-secondary:hover.duet-theme-turva2,.duet-theme-turva .duet-button.input-button-embedded:hover,.duet-button.input-button-embedded:hover.duet-theme-turva,.duet-theme-turva2 .duet-button.input-button-embedded:hover,.duet-button.input-button-embedded:hover.duet-theme-turva2{outline-color:rgb(120, 145, 164)}.duet-theme-turva .duet-button.secondary:hover,.duet-theme-turva .duet-button.input-button-secondary:hover,.duet-theme-turva .duet-button.input-button-left-secondary:hover,.duet-theme-turva .duet-button.input-button-embedded:hover{color:rgb(198, 12, 48) !important;border-color:rgb(198, 12, 48)}.duet-button.secondary.duet-button-negative,.duet-button.input-button-secondary.duet-button-negative,.duet-button.input-button-left-secondary.duet-button-negative,.duet-button.input-button-embedded.duet-button-negative{color:rgb(212, 223, 229) !important;border-color:rgb(255, 255, 255)}.duet-theme-turva .duet-button.secondary.duet-button-negative,.duet-theme-turva .duet-button.input-button-secondary.duet-button-negative,.duet-theme-turva .duet-button.input-button-left-secondary.duet-button-negative,.duet-theme-turva .duet-button.input-button-embedded.duet-button-negative{color:rgb(222, 224, 228) !important}.duet-button.secondary.duet-button-negative:hover,.duet-button.input-button-secondary.duet-button-negative:hover,.duet-button.input-button-left-secondary.duet-button-negative:hover,.duet-button.input-button-embedded.duet-button-negative:hover{color:rgb(0, 119, 179) !important;border-color:rgb(0, 119, 179)}.duet-theme-turva .duet-button.secondary.duet-button-negative:hover,.duet-theme-turva .duet-button.input-button-secondary.duet-button-negative:hover,.duet-theme-turva .duet-button.input-button-left-secondary.duet-button-negative:hover,.duet-theme-turva .duet-button.input-button-embedded.duet-button-negative:hover{color:rgb(198, 12, 48) !important;border-color:rgb(198, 12, 48)}.duet-button.input-button-embedded{width:40px;min-width:40px !important;min-height:40px !important;margin:4px !important;border-width:0 !important;border-radius:4px !important}.duet-button.input-button{height:auto}.duet-button.negative{color:rgb(8, 42, 77) !important;background:rgb(255, 255, 255);border-color:rgb(255, 255, 255)}.duet-theme-turva .duet-button.negative{color:rgb(23, 28, 58) !important}.duet-button.negative:hover{color:rgb(255, 255, 255) !important;background:transparent;border-color:rgb(255, 255, 255)}.duet-button.destructive-primary{color:rgb(255, 255, 255) !important;background:rgb(214, 28, 82);border-color:rgb(214, 28, 82)}.duet-theme-turva .duet-button.destructive-primary{color:rgb(255, 255, 255) !important;background:rgb(214, 28, 82);border-color:rgb(214, 28, 82)}.duet-button.destructive-primary:hover{background:#ab1642;border-color:#ab1642;box-shadow:0 4px 20px 0 rgba(34, 34, 34, 0.1)}.duet-theme-turva .duet-button.destructive-primary:hover{background:#ab1642}.duet-button.destructive,.duet-button.destructive-secondary{color:rgb(214, 28, 82) !important;background:rgb(255, 255, 255);border-color:rgb(214, 28, 82)}.duet-theme-turva .duet-button.destructive,.duet-theme-turva .duet-button.destructive-secondary{color:rgb(214, 28, 82) !important;background:rgb(255, 255, 255);border-color:rgb(214, 28, 82)}.duet-button.destructive:hover,.duet-button.destructive-secondary:hover{color:rgb(255, 255, 255) !important;background:#ab1642;border-color:#ab1642}.duet-theme-turva .duet-button.destructive:hover,.duet-theme-turva .duet-button.destructive-secondary:hover{color:rgb(255, 255, 255) !important;background:#ab1642;border-color:#ab1642}.duet-button.plain{min-width:48px;padding-right:0 !important;padding-left:0 !important;line-height:1.5;text-align:left;background:transparent;border:0;border-color:transparent;border-radius:4px}.duet-theme-turva .duet-button.plain{color:rgb(198, 12, 48) !important;background:transparent;border-color:transparent}.duet-button.plain.duet-p-0 .duet-button-contents{height:auto}.duet-button.plain[disabled],.duet-button.plain[disabled]:hover{color:rgb(98, 121, 138) !important;cursor:not-allowed;background:transparent !important;border-color:transparent !important}.duet-theme-turva .duet-button.plain[disabled],.duet-theme-turva .duet-button.plain[disabled]:hover{color:rgb(113, 118, 132) !important;cursor:not-allowed;background:transparent !important;border-color:rgb(222, 224, 228) !important}.duet-button.plain:hover{color:rgb(0, 75, 129) !important;background:transparent !important}.duet-theme-turva .duet-button.plain:hover{color:rgb(126, 2, 35) !important}.duet-button.plain.duet-button-negative{color:rgb(255, 255, 255) !important}.duet-theme-turva .duet-button.plain.duet-button-negative{color:rgb(255, 255, 255) !important}.duet-button.plain.duet-button-negative:hover{color:rgba(255, 255, 255, 0.8) !important}.duet-button.plain.duet-button-icon-only:focus{outline-offset:1px}.duet-button.duet-button-icon-only{min-width:48px;min-height:48px;padding:0 !important}.duet-button.duet-button-icon-only .duet-button-contents{position:static}.duet-button.duet-button-icon-only .duet-button-icon.left.large,.duet-button.duet-button-icon-only .duet-button-icon.left.medium,.duet-button.duet-button-icon-only .duet-button-icon.left.small{position:absolute;top:50% !important;left:50% !important;padding:0;margin:0;transform:translateX(-50%) translateY(-50%)}.duet-button.duet-button.input-button-primary,.duet-button.duet-button.input-button-secondary,.duet-button.duet-button.input-button-embedded,.duet-button.duet-button.input-button-left-primary,.duet-button.duet-button.input-button-left-secondary{box-sizing:content-box;min-width:48px;min-height:48px;padding:0 !important;border-width:1px}.duet-button.duet-button.input-button-primary .duet-button-contents,.duet-button.duet-button.input-button-secondary .duet-button-contents,.duet-button.duet-button.input-button-embedded .duet-button-contents,.duet-button.duet-button.input-button-left-primary .duet-button-contents,.duet-button.duet-button.input-button-left-secondary .duet-button-contents{position:static}.duet-button.duet-button.input-button-primary .duet-button-contents.icon-right,.duet-button.duet-button.input-button-secondary .duet-button-contents.icon-right,.duet-button.duet-button.input-button-embedded .duet-button-contents.icon-right,.duet-button.duet-button.input-button-left-primary .duet-button-contents.icon-right,.duet-button.duet-button.input-button-left-secondary .duet-button-contents.icon-right{padding:0 16px}.duet-button.duet-button.input-button-primary,.duet-button.duet-button.input-button-secondary,.duet-button.duet-button.input-button-embedded{border-top-left-radius:0;border-top-right-radius:4px;border-bottom-right-radius:4px;border-bottom-left-radius:0}.duet-button.duet-button.input-button-primary .duet-button-icon.left.large,.duet-button.duet-button.input-button-primary .duet-button-icon.left.medium,.duet-button.duet-button.input-button-primary .duet-button-icon.left.small,.duet-button.duet-button.input-button-secondary .duet-button-icon.left.large,.duet-button.duet-button.input-button-secondary .duet-button-icon.left.medium,.duet-button.duet-button.input-button-secondary .duet-button-icon.left.small,.duet-button.duet-button.input-button-embedded .duet-button-icon.left.large,.duet-button.duet-button.input-button-embedded .duet-button-icon.left.medium,.duet-button.duet-button.input-button-embedded .duet-button-icon.left.small{position:absolute;top:50% !important;left:50% !important;padding:0;margin:0;transform:translateX(-50%) translateY(-50%)}.duet-button.duet-button.input-button-embedded{border-left-width:0}.duet-button.duet-button.input-button-left-primary,.duet-button.duet-button.input-button-left-secondary{border-top-left-radius:4px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:4px}.duet-button.duet-button.input-button-left-primary .duet-button-contents,.duet-button.duet-button.input-button-left-secondary .duet-button-contents{position:static}.duet-button.square{width:52px;min-width:auto !important;padding:0 !important;font-size:1rem;border-color:rgb(181, 198, 208);border-width:1px}.duet-button.square.duet-button-size-small{width:42px;font-size:0.875rem}.duet-button.square.duet-button-size-x-small{width:34px;font-size:0.875rem}.duet-button.square.duet-button-negative{color:rgb(255, 255, 255) !important;background:rgb(0, 119, 179);border-color:rgb(0, 119, 179)}.duet-theme-turva .duet-button.square.duet-button-negative{color:rgb(255, 255, 255) !important;background:rgb(198, 12, 48);border-color:rgb(198, 12, 48)}.duet-theme-turva .duet-button.square{border-color:rgb(222, 224, 228)}.duet-button.square:hover{outline:2px solid rgb(0, 119, 179);outline-offset:-2px;border-color:rgb(0, 119, 179)}.duet-theme-turva .duet-button.square:hover{outline-color:rgb(198, 12, 48);border-color:rgb(198, 12, 48)}.duet-button.square .duet-button-contents{gap:0}.duet-button[disabled],.duet-button[disabled]:hover,.duet-button.duet-button-negative[disabled],.duet-button.duet-button-negative[disabled]:hover{color:rgb(98, 121, 138) !important;cursor:not-allowed;outline:none !important;outline-color:rgb(212, 223, 229) !important;outline-color:rgb(212, 223, 229) !important;background:rgb(212, 223, 229) !important;border-color:rgb(212, 223, 229) !important;box-shadow:none !important}.duet-theme-turva .duet-button[disabled],.duet-theme-turva .duet-button[disabled]:hover,.duet-theme-turva .duet-button.duet-button-negative [disabled],.duet-theme-turva .duet-button.duet-button-negative [disabled]:hover{color:rgb(143, 147, 158) !important;cursor:not-allowed;outline-color:rgb(222, 224, 228) !important;background:rgb(222, 224, 228) !important;border-color:rgb(222, 224, 228) !important}.duet-button-is-loading.primary,.duet-button-is-loading.input-button-primary{color:rgb(255, 255, 255)}.duet-button-is-loading.default{color:rgb(0, 119, 179)}.duet-button-is-loading.default.duet-theme-turva{color:rgb(198, 12, 48)}.duet-button-is-loading .duet-button-contents{visibility:hidden;opacity:0}:host(.duet-theme-turva2) .duet-theme-turva .duet-button{border-radius:8px}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.default{color:rgb(230, 23, 64) !important;border-color:rgb(212, 221, 226)}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.default:hover{outline-color:rgb(230, 23, 64);border-color:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.default.duet-button-negative{background-color:rgb(251, 225, 209) !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.default.duet-button-negative:hover{color:rgb(230, 23, 64) !important;border-color:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.primary,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-primary,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-primary{background:rgb(230, 23, 64);border-color:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded{color:rgb(23, 42, 59) !important;border-color:rgb(23, 42, 59)}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary:hover,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary:hover,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary:hover,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded:hover{color:rgb(230, 23, 64) !important;border-color:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary.duet-button-negative,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary.duet-button-negative,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary.duet-button-negative,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded.duet-button-negative{color:rgb(251, 225, 209) !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary.duet-button-negative:hover,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary.duet-button-negative:hover,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary.duet-button-negative:hover,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded.duet-button-negative:hover{color:rgb(230, 23, 64) !important;border-color:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-primary,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-secondary,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-embedded{border-top-left-radius:0;border-bottom-left-radius:0}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-left-primary,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-left-secondary{border-top-right-radius:0;border-bottom-right-radius:0}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.negative{color:rgb(23, 42, 59) !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.negative:hover{color:rgb(255, 255, 255) !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain{color:rgb(230, 23, 64) !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain.duet-button-negative{color:rgb(255, 255, 255) !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain:hover{color:rgb(140, 0, 30) !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain[disabled],:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain[disabled]:hover{color:rgb(95, 122, 143) !important;background:transparent !important;border-color:rgb(251, 225, 209) !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.square{border-color:rgb(212, 221, 226)}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.square.duet-button-negative{background:rgb(230, 23, 64);border-color:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-theme-turva .duet-button.square:hover{outline-color:rgb(230, 23, 64);border-color:rgb(230, 23, 64)}:host(.duet-theme-turva2) .duet-theme-turva .duet-button[disabled],:host(.duet-theme-turva2) .duet-theme-turva .duet-button[disabled]:hover,:host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button-negative [disabled],:host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button-negative [disabled]:hover{color:rgb(120, 145, 164) !important;cursor:not-allowed;outline-color:rgb(212, 221, 226) !important;background:rgb(212, 221, 226) !important;border-color:rgb(212, 221, 226) !important}:host(.duet-theme-turva2) .duet-theme-turva .duet-button-is-loading.default{color:rgb(230, 23, 64)}";
 
 const DuetButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.duetFocus = index.createEvent(this, "duetFocus", 7);
         this.duetBlur = index.createEvent(this, "duetBlur", 7);
+        /**
+         * Use this property to add an aria-haspopup attribute to a button, if you are using it as a menu button.
+         */
+        this.accessiblePopup = "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;
+        /**
+         * Loading state of the button
+         */
+        this.loading = false;
+        /**
+         * Style variation of the button.
+         * @negative - value is deprecated and should be used in combination with negative prop in the future
+         * @destructive - value is deprecated and should be replace with destructive-secondary
+         */
+        this.variation = "default";
+        /**
+         * Negative variation, can be combined with Variation to produce negative versions
+         */
+        this.negative = false;
+        /**
+         * Theme of the button.
+         */
+        this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Controls the padding of the plain variation button - has no effect for other variations.
+         */
+        this.padding = "auto";
+        /**
+         * Centers the text of a button
+         */
+        this.centerText = false;
+        /**
+         * Controls the text wrapping.
+         */
+        this.wrapping = "auto";
+        /**
+         * Expands the button to fill 100% of the container width.
+         */
+        this.expand = false;
+        /**
+         * Keep the button fixed width even on mobile viewports.
+         */
+        this.fixed = false;
+        /**
+         * Makes the button component disabled. This prevents users from being able to
+         * interact with the button, and conveys its inactive state to assistive technologies.
+         */
+        this.disabled = false;
+        /**
+         * Allows the button to submit a form.
+         */
+        this.submit = false;
+        /**
+         * Forces URL to open in a new browser tab. Used together with URL prop.
+         */
+        this.external = false;
+        /**
+         * @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();
+        /**
+         * Property to change accessibleLabelExternal defaults on the component.
+         * normally you would handle these strings on an application level and override accessibleLabelExternal when needed
+         * @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);
+        /**
+         * Property to change accessibleLabelLoading defaults on the component.
+         * normally you would handle these strings on an application level and override accessibleLabelLoading when needed
+         * @default {fi: "Ladataan",sv: "Lastning",en: "Loading…"}
+         */
+        this.accessibleLabelLoadingDefaults = commonStrings.DuetStringsLoadingDefaults;
+        /**
+         * Adds accessible label for button in "loading" state
+         * @default {fi: "Ladataan",sv: "Lastning",en: "Loading…"}
+         */
+        this.accessibleLabelLoading = languageUtils.getLocaleString(this.accessibleLabelLoadingDefaults);
+        /**
+         * Icon to display to the left of the button content.
+         * This is ignored/overridden when button is used as an external link.
+         */
+        this.icon = "";
+        /**
+         * Custom color to be used for text, as a design token entered in camelCase or
+         * kebab-case. Example: "color-primary".
+         */
+        this.color = "";
+        /**
+         * Show icon on the right side of the button content.
+         */
+        this.iconRight = false;
+        /**
+         * Icon size.
+         */
+        this.iconSize = "medium";
+        /**
+         * Button’s size.
+         */
+        this.size = "medium";
+        /**
+         * Whether this button should use styles meant for displaying just an icon.
+         */
+        this.iconOnly = false;
         this.proxyButtonSetUp = () => {
             const slottedElement = this.element.querySelector("button[slot=proxybutton]");
             const button = slottedElement || document.createElement("button");
@@ -65,7 +186,8 @@ const DuetButton = class {
             // climb up the dom to see if we're in a <form>
             // and if so, then use JS to submit it.
             // To understand better, see: https://www.hjorthhansen.dev/shadow-dom-form-participation/
-            if (!this.url && (this.element.closest("form") || this.form) && ev.target === this.element) {
+            if (this.submit && !this.url && (this.element.closest("form") || this.form)) {
+                ev.stopPropagation();
                 ev.preventDefault();
                 this.proxyButton.click();
             }
@@ -76,46 +198,6 @@ const DuetButton = class {
         this.onBlur = () => {
             this.duetBlur.emit();
         };
-        this.accessibleLabel = undefined;
-        this.accessibleControls = undefined;
-        this.accessiblePopup = "false";
-        this.accessibleActiveDescendant = undefined;
-        this.accessibleOwns = undefined;
-        this.accessibleDescribedBy = undefined;
-        this.accessibleDetails = undefined;
-        this.accessibleLabelledBy = undefined;
-        this.accessibleDescription = undefined;
-        this.accessibleExpanded = undefined;
-        this.accessiblePressed = undefined;
-        this.loading = false;
-        this.variation = "default";
-        this.negative = false;
-        this.theme = "";
-        this.margin = "auto";
-        this.form = undefined;
-        this.padding = "auto";
-        this.centerText = false;
-        this.wrapping = "auto";
-        this.expand = false;
-        this.fixed = false;
-        this.disabled = false;
-        this.name = undefined;
-        this.value = undefined;
-        this.identifier = undefined;
-        this.submit = false;
-        this.external = false;
-        this.language = languageUtils.getLanguage();
-        this.accessibleLabelExternalDefaults = commonStrings.DuetStringsExternalDefaults;
-        this.accessibleLabelExternal = languageUtils.getLocaleString(this.accessibleLabelExternalDefaults);
-        this.accessibleLabelLoadingDefaults = commonStrings.DuetStringsLoadingDefaults;
-        this.accessibleLabelLoading = languageUtils.getLocaleString(this.accessibleLabelLoadingDefaults);
-        this.icon = "";
-        this.color = "";
-        this.iconRight = false;
-        this.iconSize = "medium";
-        this.size = "medium";
-        this.iconOnly = false;
-        this.url = undefined;
     }
     /**
      * Component lifecycle events.
@@ -139,16 +221,15 @@ const DuetButton = class {
         ]);
     }
     disconnectedCallback() {
-        if (this.proxyButton) {
-            this.proxyButton = null;
-        }
         languageUtils.disconnectLanguageChangeObserver(this);
     }
     componentDidRender() {
         if (this.disabled === false) {
             this.element.removeAttribute("disabled");
         }
-        this.proxyButtonSetUp();
+        if (this.submit) {
+            this.proxyButtonSetUp();
+        }
     }
     getButtonType() {
         return this.submit ? "submit" : "button";
@@ -186,12 +267,12 @@ const DuetButton = class {
         // enforce consistency for external links
         const icon = isExternalLink ? "action-new-window" : this.icon;
         const iconRight = isExternalLink ? true : this.iconRight;
-        const commonChildren = (index.h("span", { key: '5a0c6410ac691a86fc5015ab7db83c969dc3bad1', class: { "duet-button-contents": true, "icon-right": iconRight }, style: { color: tokenUtils.getColorByName(this.color) } }, icon && (index.h("span", { key: 'e40d495dc3100c27f283c4e35c5e9a27c98464c2', "aria-hidden": "true", class: {
+        const commonChildren = (index.h("span", { key: '4b6618222c037ec329c118f7ad247b9fd514e878', class: { "duet-button-contents": true, "icon-right": iconRight }, style: { color: tokenUtils.getColorByName(this.color, this.theme) } }, icon && (index.h("span", { key: '67492c9b50231879ba232f7c6bcdadcb2d219875', "aria-hidden": "true", class: {
                 "duet-button-icon": true,
                 left: !iconRight,
                 right: iconRight,
                 [this.getButtonIconSize()]: true,
-            } }, index.h("duet-icon", { key: '96a0389f3704e534f2c4da39243f6f7b87038f6f', size: "auto", margin: "none", name: icon, color: "currentColor" }))), index.h("span", { key: 'cbc6c347c96296ed4f4afa3963a12495fea09884', class: "duet-button-contents-slot" }, index.h("slot", { key: '894a6a4e9f03f813a7e8918abf87ef9ceabecbc3' }))));
+            } }, index.h("duet-icon", { key: 'fce0630d78df187c2a7f3946ff3d262c43e5ce95', size: "auto", margin: "none", name: icon, color: "currentColor" }))), index.h("span", { key: '34d608211bac6921c4aec51f71a9b33e2ac2b7b0', class: "duet-button-contents-slot" }, index.h("slot", { key: 'b2478d851993c148be6a83a76f9f725469bc9944' }))));
         const size = this.size == "medium" || this.size == "small" || this.size == "x-small" ? this.size : "medium";
         const commonProps = {
             onFocus: this.onFocus,
@@ -226,7 +307,7 @@ const DuetButton = class {
             "aria-details": this.accessibleDetails,
             "aria-description": this.accessibleDescription,
         };
-        return (index.h(index.Host, { key: '24621240c8dcf778398f04e79c780bade455090f', onClick: this.handleClick, class: {
+        return (index.h(index.Host, { key: 'c70e2d9cbe884c7b6cc3012721f01ce6d54b4555', class: {
                 "duet-m-0": this.margin === "none",
                 "duet-small": this.size === "small",
                 "duet-x-small": this.size === "x-small",
@@ -234,33 +315,37 @@ const DuetButton = class {
                 "duet-expand": this.expand,
                 [this.variation]: true,
                 "input-button": (_b = this.variation) === null || _b === void 0 ? void 0 : _b.startsWith("input-button"),
-            } }, index.h("span", { key: 'ca827a33826b3c42662ccd5a079d8327b9b6175e', class: {
+            } }, index.h("span", { key: 'c8be7792d2ae572befbfbe921a3ec453c073637d', onClick: this.handleClick, class: {
                 "duet-button-container": true,
                 "duet-button-is-loading": this.loading,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-button-negative": this.negative || this.variation === "negative",
                 [this.variation]: true,
-            } }, this.url ? (index.h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && index.h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (index.h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren, this.loading && index.h("duet-visually-hidden", null, " ", this.accessibleLabelLoading, " "), index.h("slot", { name: "proxybutton" }))), this.loading && index.h("duet-spinner", { key: '7e1e99a1cc8724ea6db15316084259e62926b82b', color: "currentColor" }))));
+            } }, this.url ? (index.h("a", Object.assign({}, commonProps, { href: this.url, target: this.external ? "_blank" : "_self", rel: this.external ? "noopener" : undefined }), commonChildren, this.external && index.h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal))) : (index.h("button", Object.assign({}, commonProps, { type: this.getButtonType(), disabled: this.disabled, name: this.name, value: this.value, "aria-pressed": this.accessiblePressed != null ? this.accessiblePressed.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, "aria-disabled": this.disabled }), commonChildren, this.loading && index.h("duet-visually-hidden", null, " ", this.accessibleLabelLoading, " "))), this.loading && index.h("duet-spinner", { key: 'da956cda627d2afc5084ee69629b54ffabcb672b', color: "currentColor" })), index.h("slot", { key: '0ead01a475d6242c0049a259f9b9c725830d4b80', name: "proxybutton" })));
     }
     get element() { return index.getElement(this); }
 };
-DuetButton.style = DuetButtonStyle0;
+DuetButton.style = duetButtonCss;
 
-const duetSpinnerCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute;top:50%;left:50%;z-index:800;max-width:100%}:host(.duet-theme-default) .duet-spinner{color:rgb(0, 119, 179) !important}:host(.duet-theme-turva) .duet-spinner{color:rgb(198, 12, 48) !important}:host(.duet-custom-color){color:inherit}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.duet-spinner{-webkit-user-select:none;user-select:none;position:absolute;top:50%;left:50%;z-index:800;width:24px;height:24px;color:rgb(0, 119, 179);border:2px solid transparent;border-left:2px solid currentColor;border-radius:50%;transform:translateZ(0) translateX(-50%) translateY(-50%);transform-origin:0% 0%;animation:duetRotate 0.6s linear infinite}.duet-spinner::after{position:absolute;top:50%;left:50%;z-index:200;box-sizing:content-box;width:100%;height:100%;overflow:hidden;content:\"\";border:2px solid currentColor;border-radius:50%;opacity:0.3;transform:translateZ(0) translateX(-50%) translateY(-50%);transform-origin:0% 0%}.duet-spinner.medium{width:36px;height:36px;border-width:4px}.duet-spinner.medium::after{border-width:4px}.duet-spinner.large{width:72px;height:72px;border-width:8px}.duet-spinner.large::after{border-width:8px}@keyframes duetRotate{0%{transform:translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%)}100%{transform:translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%)}}";
-const DuetSpinnerStyle0 = duetSpinnerCss;
+const duetSpinnerCss = ":host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;position:absolute;top:50%;left:50%;z-index:800;max-width:100%}*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}.duet-spinner{-webkit-user-select:none;user-select:none;position:absolute;top:50%;left:50%;z-index:800;width:24px;height:24px;color:rgb(0, 119, 179);border:2px solid transparent;border-left:2px solid currentColor;border-radius:50%;transform:translateZ(0) translateX(-50%) translateY(-50%);transform-origin:0% 0%;animation:duetRotate 0.6s linear infinite}.duet-spinner.duet-theme-turva{color:rgb(198, 12, 48)}.duet-spinner::after{position:absolute;top:50%;left:50%;z-index:200;box-sizing:content-box;width:100%;height:100%;overflow:hidden;content:\"\";border:2px solid currentColor;border-radius:50%;opacity:0.3;transform:translateZ(0) translateX(-50%) translateY(-50%);transform-origin:0% 0%}.duet-spinner.medium{width:36px;height:36px;border-width:4px}.duet-spinner.medium::after{border-width:4px}.duet-spinner.large{width:72px;height:72px;border-width:8px}.duet-spinner.large::after{border-width:8px}@keyframes duetRotate{0%{transform:translateZ(0) rotate(0deg) translateX(-50%) translateY(-50%)}100%{transform:translateZ(0) rotate(360deg) translateX(-50%) translateY(-50%)}}:host(.duet-theme-turva2) .duet-theme-turva.duet-spinner{color:rgb(230, 23, 64)}";
 
 const DuetSpinner = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.accessibleLabel = undefined;
-        this.color = "gray-lightest";
+        /**
+         * Size variation of the spinner.
+         */
         this.size = "small";
-        this.theme = "";
     }
     /**
      * Component lifecycle events.
      */
     componentWillLoad() {
+        // NOTE: for backward compatibility reasons, if no theme and no color is given, we default to "gray-lightest".
+        // Changing this would be a breaking change, and we do it only when we have other things to break too.
+        if (!this.color && !this.theme) {
+            this.color = "gray-lightest";
+        }
         themeableComponent.inheritGlobalTheme(this);
     }
     /**
@@ -268,18 +353,16 @@ const DuetSpinner = class {
      * Always the last one in the class.
      */
     render() {
-        const color = this.color === "currentColor" ? "currentColor" : tokenUtils.getColorByName(this.color);
-        return (index.h(index.Host, { key: 'f415bd43d421b7106fdbd90bd2c187879ff17c17', class: {
-                "duet-custom-color": this.color !== "currentColor" && this.theme !== "turva" && this.theme !== "default",
-                "duet-theme-turva": this.theme === "turva" && this.color !== "currentColor",
-                "duet-theme-default": this.theme === "default" && this.color !== "currentColor",
-            } }, index.h("div", { key: '34b4c350a642f331b9776f5ce12e3c7a2990b3d7', class: {
+        const color = !!this.color && this.color === "currentColor" ? "currentColor" : tokenUtils.getColorByName(this.color, this.theme);
+        return (index.h(index.Host, { key: '0d9ba3a785f72e0bd9318f4b38bc5b5459075704' }, index.h("div", { key: '5fed4253f83731359bfdf0a5b266b2352354b1cc', class: {
                 "duet-spinner": true,
                 [this.size]: true,
+                "duet-theme-turva": this.theme === "turva",
             }, style: { color }, "aria-label": this.accessibleLabel })));
     }
+    get element() { return index.getElement(this); }
 };
-DuetSpinner.style = DuetSpinnerStyle0;
+DuetSpinner.style = duetSpinnerCss;
 
 exports.duet_button = DuetButton;
 exports.duet_spinner = DuetSpinner;

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

@@ -3,20 +3,23 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-CKsfMbRW.js');
+var themeableComponent = require('./themeable-component-BuC0WY98.js');
+var slotUtils = require('./slot-utils-D4QyzHw3.js');
 
-const index = require('./index-21e67ab3.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const slotUtils = require('./slot-utils-382633cf.js');
-
-const duetCalloutCss = ":host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:relative;display:block;width:100%}blockquote,figure{margin:0}.duet-callout{margin-bottom:28px !important;display:flex;align-items:center;justify-content:center;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\"}.duet-callout .container{display:flex;flex-direction:column;gap:8px;align-items:center;max-width:688px;text-align:center}.duet-callout .callout-icon{width:50px;padding-bottom:8px}.duet-callout blockquote{font-size:2.7vw;font-weight:600;line-height:1.5;color:rgb(8, 42, 77)}@media (max-width: 37.037037037rem){.duet-callout blockquote{font-size:1rem}}@media (min-width: 46.2962962963rem){.duet-callout blockquote{font-size:1.25rem}}.duet-callout .author{color:rgb(8, 42, 77)}.duet-callout.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-callout.duet-theme-turva .author,.duet-callout.duet-theme-turva blockquote{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";
-const DuetCalloutStyle0 = duetCalloutCss;
+const duetCalloutCss = ":host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;position:relative;display:block;width:100%}blockquote,figure{margin:0}.duet-callout{margin-bottom:28px !important;display:flex;align-items:center;justify-content:center;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\"}.duet-callout .container{display:flex;flex-direction:column;gap:8px;align-items:center;max-width:688px;text-align:center}.duet-callout .callout-icon{width:50px;padding-bottom:8px}.duet-callout blockquote{font-size:2.7vw;font-weight:600;line-height:1.5;color:rgb(8, 42, 77)}@media (max-width: 37.037037037rem){.duet-callout blockquote{font-size:1rem}}@media (min-width: 46.2962962963rem){.duet-callout blockquote{font-size:1.25rem}}.duet-callout .author{color:rgb(8, 42, 77)}.duet-callout.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-callout.duet-theme-turva .author,.duet-callout.duet-theme-turva blockquote{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}:host(.duet-theme-turva2) .duet-callout.duet-theme-turva .author,:host(.duet-theme-turva2) .duet-callout.duet-theme-turva blockquote{color:rgb(23, 42, 59)}";
 
 const DuetCallout = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.hasAuthorSlot = false;
+        /**
+         * Theme of the caption.
+         */
         this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
     }
     /**
@@ -36,14 +39,14 @@ const DuetCallout = class {
     <path d="M6.6591 0.557547L9.2031 2.33355C7.0911 5.21355 6.1311 7.18155 5.8431 8.90955C7.4751 9.34155 8.7231 10.5415 8.7231 12.6535C8.7231 15.2935 6.9471 16.9255 4.6431 16.9255C2.0511 16.9255 0.227096 15.1975 0.227096 12.2695C0.227096 8.28555 2.3871 4.34955 6.6591 0.557547ZM17.9871 8.95755C19.6191 9.34155 20.8671 10.5415 20.8671 12.6535C20.8671 15.2935 19.1391 16.9255 16.8351 16.9255C14.2431 16.9255 12.4191 15.1975 12.4191 12.2695C12.4191 8.28555 14.5791 4.34955 18.8511 0.557547L21.3951 2.33355C19.2351 5.21355 18.3231 7.18155 17.9871 8.95755Z"/>
     </svg>
     `;
-        return (index.h(index.Host, { key: '53420cb240f39349ae66450dc91f20a4cb43f6ad' }, index.h("div", { key: '9d1c788d25eb614f0dd7887410b62873e5b6623d', class: {
+        return (index.h(index.Host, { key: 'e0a035450d6e7305b25de43ed55f4ffe7a15a0e3' }, index.h("div", { key: '6c5d998d494deab47f1384005e7d2dfb95246c7b', class: {
                 "duet-callout": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-m-0": this.margin === "none",
-            } }, index.h("figure", { key: '9e9ee10955241a7b2996f03d1afa66fb829785aa', class: "container" }, index.h("duet-icon", { key: '7a39335b4292024aa8158854a0a5bffc778f4732', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), index.h("blockquote", { key: '2e1e5a9554f5d68e7c0d73a0a1ccb12a89998c67' }, index.h("slot", { key: '272543bd9df5201872a805c824006e7af13892f2' })), this.hasAuthorSlot && (index.h("figcaption", { key: 'a8bed17504c945ecba4103eee63602200d28b9a3', class: "author" }, index.h("span", { key: '565ae8d03018d87763e3c4bb7ae8a551b98f256e' }, "\u2014 "), index.h("slot", { key: '235af7e37f6b961bd784ecc87c26a2c0c82b6268', name: "author" })))))));
+            } }, index.h("figure", { key: '48c6d6f720cd951a3e80e953265a1c79174c0dd6', class: "container" }, index.h("duet-icon", { key: 'f25c2dbb92d9a7f05b11512f9ef73052585916a7', class: "callout-icon", shape: "brand-rotated", background: "primary-lighter", "background-opacity": "0.75", "background-rotation": this.theme === "turva" ? "0" : "7", color: "secondary", icon: icon, size: "auto", margin: "none", theme: this.theme }), index.h("blockquote", { key: 'e01e4dcdc7992709803169f5fb85183134f7608f' }, index.h("slot", { key: '7d23fc2421ababa106e834cbb1681d7b94137574' })), this.hasAuthorSlot && (index.h("figcaption", { key: 'ccd723ba6d25df159a5826a0ab652cde0556659d', class: "author" }, index.h("span", { key: '0daa1d1540484278f462a1f6ea258dd292f5548c' }, "\u2014 "), index.h("slot", { key: '47f2ade5a9f6e081482c243fa52942de8fa523e8', name: "author" })))))));
     }
     get element() { return index.getElement(this); }
 };
-DuetCallout.style = DuetCalloutStyle0;
+DuetCallout.style = duetCalloutCss;
 
 exports.duet_callout = DuetCallout;