npm - @duetds/components - Versions diffs - 8.0.6 → 8.1.1 - Mend

@duetds/components 8.0.6 → 8.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1247) hide show

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

@@ -5,256 +5,256 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-2cce7b13.js');
-const themeableComponent = require('./themeable-component-0be6d1f4.js');
-const commonStrings = require('./common-strings-86913e94.js');
-const languageUtils = require('./language-utils-dc19e8b6.js');
-const tokenUtils = require('./token-utils-dbfeff2e.js');
-require('./string-utils-51a2f59f.js');
+const index = require('./index-2dc54a15.js');
+const themeableComponent = require('./themeable-component-83a2a0d4.js');
+const commonStrings = require('./common-strings-22c70ef0.js');
+const languageUtils = require('./language-utils-e8a527e5.js');
+const tokenUtils = require('./token-utils-84b3bca6.js');
+require('./string-utils-053749ff.js');
 require('./tokens.module-10f42b21.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%;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(.input-button){z-index:250}:host(.duet-small){margin-right:2px !important;margin-bottom:8px !important}:host(.duet-small):last-child,:host(.duet-small):last-of-type{margin-right:0 !important}@media (max-width: 35.9375em){:host(.duet-small){width:auto}}: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;width:100%}.duet-button{padding:14px 27px 15px !important;-webkit-user-select:none;user-select:none;position:relative;z-index:100;display:block;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;-webkit-hyphens:auto;hyphens:auto;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:2px;border-radius:20rem;transition:background-color 300ms ease, color 300ms ease, border 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: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){padding:9px 19px 10px !important;min-width:48px;font-size:0.875rem}.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-button.duet-button-is-small:not(.duet-button-icon-only).icon{padding-left:48px !important}.duet-button.duet-button-is-small:not(.duet-button-icon-only).icon-right{padding-right:48px !important;padding-left:20px !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:inline-block;margin:0 auto;pointer-events:none}.duet-button.duet-no-wrap{white-space:nowrap}.duet-button.icon{padding-left:52px !important}.duet-button.icon-right{padding-right:52px !important;padding-left:28px !important}.duet-button svg{width:100%;min-width:100%;fill:currentColor}.duet-button .duet-button-icon{position:absolute;top:50%;left:-28px;display:flex;align-items:center;justify-content:center;width:16px;height:16px;margin:0 !important;transform:translateY(-50%)}.duet-button .duet-button-icon duet-icon{width:16px;height:16px}.duet-button .duet-button-icon.right{right:-28px;left:auto}.duet-button .duet-button-icon.large{left:-32px;width:20px;height:20px}.duet-button .duet-button-icon.large duet-icon{width:20px;height:20px}.duet-button .duet-button-icon.large.right{right:-32px;left:auto}.duet-button .duet-button-icon.medium-small{left:-16px;width:10px;height:10px;padding-top:1px}.duet-button .duet-button-icon.medium-small duet-icon{width:10px;height:10px}.duet-button .duet-button-icon.medium-small.right{right:-16px;left:auto}.duet-button .duet-button-icon.small{left:-16px;width:7px;height:7px}.duet-button .duet-button-icon.small duet-icon{width:7px;height:7px}.duet-button .duet-button-icon.small.right{right:-16px;left:auto}.duet-button:active:not([disabled]){opacity:0.75;transition:none}.duet-button.default{border-color:rgb(225, 227, 230)}.duet-theme-turva .duet-button.default{color:rgb(198, 12, 48) !important;border-color:rgb(228, 228, 230)}.duet-button.default:hover{border-color:rgb(0, 119, 179)}.duet-theme-turva .duet-button.default:hover{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(228, 228, 230) !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(148, 9, 37);border-color:rgb(148, 9, 37)}.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(0, 41, 77) !important;background:transparent;border-color:rgb(0, 41, 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(225, 227, 230) !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(228, 228, 230) !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.negative{color:rgb(0, 41, 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(222, 35, 98);border-color:rgb(222, 35, 98)}.duet-theme-turva .duet-button.destructive-primary{color:rgb(255, 255, 255) !important;background:rgb(224, 42, 13);border-color:rgb(224, 42, 13)}.duet-button.destructive-primary:hover{background:#b21c4e;border-color:#b21c4e;box-shadow:0 4px 20px 0 rgba(34, 34, 34, 0.1)}.duet-theme-turva .duet-button.destructive-primary:hover{background:#b3220a}.duet-button.destructive,.duet-button.destructive-secondary{color:rgb(222, 35, 98) !important;background:rgb(255, 255, 255);border-color:rgb(222, 35, 98)}.duet-theme-turva .duet-button.destructive,.duet-theme-turva .duet-button.destructive-secondary{color:rgb(224, 42, 13) !important;background:rgb(255, 255, 255);border-color:rgb(224, 42, 13)}.duet-button.destructive:hover,.duet-button.destructive-secondary:hover{color:rgb(255, 255, 255) !important;background:#b21c4e;border-color:#b21c4e}.duet-theme-turva .duet-button.destructive:hover,.duet-theme-turva .duet-button.destructive-secondary:hover{color:rgb(255, 255, 255) !important;background:#b3220a;border-color:#b3220a}.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.icon{padding-left:20px !important}.duet-button.plain.icon.icon-right{padding-right:20px !important;padding-left:0 !important}.duet-button.plain.icon.small{padding-left:20px !important}.duet-button.plain.icon.small.icon-right{padding-right:20px !important;padding-left:0 !important}.duet-button.plain.icon.medium-small{padding-left:20px !important}.duet-button.plain.icon.medium-small.icon-right{padding-right:20px !important;padding-left:0 !important}.duet-button.plain.icon.medium{padding-left:24px !important}.duet-button.plain.icon.medium.icon-right{padding-right:24px !important;padding-left:0 !important}.duet-button.plain.icon.large{padding-left:30px !important}.duet-button.plain.icon.large.icon-right{padding-right:30px !important;padding-left:0 !important}.duet-button.plain .duet-button-icon.left{left:-16.6666666667px !important}.duet-button.plain .duet-button-icon.left.medium{left:-24px !important}.duet-button.plain .duet-button-icon.left.large{left:-30px !important}.duet-button.plain .duet-button-icon.right{right:-16.6666666667px !important}.duet-button.plain .duet-button-icon.right.medium{right:-24px !important}.duet-button.plain .duet-button-icon.right.large{right:-30px !important}.duet-button.plain[disabled]{color:rgb(101, 119, 135) !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(228, 228, 230) !important}.duet-button.plain:hover{color:rgb(0, 77, 128) !important;background:transparent !important}.duet-theme-turva .duet-button.plain:hover{color:rgb(148, 9, 37) !important}.duet-button.plain.duet-button-negative{color:rgb(255, 255, 255) !important}.duet-theme-turva .duet-button.plain.duet-button-negative{color:rgb(228, 228, 230) !important}.duet-button.plain.duet-button-negative:hover{color:rgb(0, 119, 179) !important}.duet-theme-turva .duet-button.plain.duet-button-negative:hover{color:rgb(198, 12, 48) !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:48px !important;min-width:auto !important;height:48px !important;padding:0 !important;font-size:1.25rem;border-color:rgb(225, 227, 230);border-width:1px;border-radius:8px}.duet-button.square.duet-button-is-small{width:28px !important;height:28px !important;padding:0 !important;font-size:1rem}.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(228, 228, 230)}.duet-button[disabled],.duet-button[disabled]:hover,.duet-button.duet-button-negative[disabled],.duet-button.duet-button-negative[disabled]:hover{color:rgb(101, 119, 135) !important;cursor:not-allowed;background:rgb(225, 227, 230) !important;border-color:rgb(225, 227, 230) !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(116, 116, 117) !important;cursor:not-allowed;background:rgb(228, 228, 230) !important;border-color:rgb(228, 228, 230) !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 DuetButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.duetFocus = index.createEvent(this, "duetFocus", 7);
-    this.duetBlur = index.createEvent(this, "duetBlur", 7);
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.duetFocus = index.createEvent(this, "duetFocus", 7);
+        this.duetBlur = index.createEvent(this, "duetBlur", 7);
+        /**
+         * Component event handling.
+         */
+        this.handleClick = (ev) => {
+            // If this button wants to specifically submit a form
+            // 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")) {
+                ev.preventDefault();
+                this.proxyButton.click();
+            }
+        };
+        this.onFocus = () => {
+            this.duetFocus.emit();
+        };
+        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.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 event handling.
+     * Component lifecycle events.
      */
-    this.handleClick = (ev) => {
-      // If this button wants to specifically submit a form
-      // 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")) {
-        ev.preventDefault();
-        this.proxyButton.click();
-      }
-    };
-    this.onFocus = () => {
-      this.duetFocus.emit();
-    };
-    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.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.
-   */
-  componentWillLoad() {
-    themeableComponent.inheritGlobalTheme(this);
-    if (this.url && this.external && this.icon) {
-      console.warn("[DUET]: Button used as an external link will override any icon that is set");
+    componentWillLoad() {
+        themeableComponent.inheritGlobalTheme(this);
+        if (this.url && this.external && this.icon) {
+            console.warn("[DUET]: Button used as an external link will override any icon that is set");
+        }
     }
-  }
-  connectedCallback() {
-    this.proxyButton = document.createElement("button");
-    this.proxyButton.style.display = "none";
-    this.syncToProxyButton();
-    languageUtils.connectLanguageChangeObserver(this, [
-      {
-        prop: "accessibleLabelExternal",
-        defaults: "accessibleLabelExternalDefaults",
-      },
-      {
-        prop: "accessibleLabelLoading",
-        defaults: "accessibleLabelLoadingDefaults",
-      },
-    ]);
-    if (!this.url && this.element.closest("form")) {
-      this.element.insertAdjacentElement("beforebegin", this.proxyButton);
+    connectedCallback() {
+        this.proxyButton = document.createElement("button");
+        this.proxyButton.style.display = "none";
+        this.syncToProxyButton();
+        languageUtils.connectLanguageChangeObserver(this, [
+            {
+                prop: "accessibleLabelExternal",
+                defaults: "accessibleLabelExternalDefaults",
+            },
+            {
+                prop: "accessibleLabelLoading",
+                defaults: "accessibleLabelLoadingDefaults",
+            },
+        ]);
+        if (!this.url && this.element.closest("form")) {
+            this.element.insertAdjacentElement("beforebegin", this.proxyButton);
+        }
     }
-  }
-  disconnectedCallback() {
-    this.proxyButton.remove();
-    this.proxyButton = null;
-    languageUtils.disconnectLanguageChangeObserver(this);
-  }
-  syncToProxyButton() {
-    this.proxyButton.type = this.getButtonType();
-    this.proxyButton.disabled = this.disabled;
-    // attributes should be removed in cases where name/value is not set
-    if (this.name != null) {
-      this.proxyButton.name = this.name;
+    disconnectedCallback() {
+        this.proxyButton.remove();
+        this.proxyButton = null;
+        languageUtils.disconnectLanguageChangeObserver(this);
     }
-    else {
-      this.proxyButton.removeAttribute("name");
+    syncToProxyButton() {
+        this.proxyButton.type = this.getButtonType();
+        this.proxyButton.disabled = this.disabled;
+        // attributes should be removed in cases where name/value is not set
+        if (this.name != null) {
+            this.proxyButton.name = this.name;
+        }
+        else {
+            this.proxyButton.removeAttribute("name");
+        }
+        if (this.value != null) {
+            this.proxyButton.value = this.value;
+        }
+        else {
+            this.proxyButton.removeAttribute("value");
+        }
     }
-    if (this.value != null) {
-      this.proxyButton.value = this.value;
+    getButtonType() {
+        return this.submit ? "submit" : "button";
     }
-    else {
-      this.proxyButton.removeAttribute("value");
+    getButtonIconSize() {
+        switch (this.iconSize) {
+            case "small":
+                return "small";
+            case "medium-small":
+                return "medium-small";
+            case "medium":
+                return "medium";
+            case "large":
+                return "large";
+            default:
+                return "medium";
+        }
     }
-  }
-  getButtonType() {
-    return this.submit ? "submit" : "button";
-  }
-  getButtonIconSize() {
-    switch (this.iconSize) {
-      case "small":
-        return "small";
-      case "medium-small":
-        return "medium-small";
-      case "medium":
-        return "medium";
-      case "large":
-        return "large";
-      default:
-        return "medium";
+    /**
+     * Sets focus on the specified `duet-button`. Use this method instead of the global
+     * `button.focus()`.
+     */
+    async setFocus(options) {
+        if (this.nativeButton) {
+            this.nativeButton.focus(options);
+        }
     }
-  }
-  /**
-   * Sets focus on the specified `duet-button`. Use this method instead of the global
-   * `button.focus()`.
-   */
-  async setFocus(options) {
-    if (this.nativeButton) {
-      this.nativeButton.focus(options);
+    /**
+     * render() function.
+     * Always the last one in the class.
+     */
+    render() {
+        var _a;
+        const isExternalLink = this.external && this.url;
+        // enforce consistency for external links
+        const icon = isExternalLink ? "action-new-window" : this.icon;
+        const iconRight = isExternalLink ? true : this.iconRight;
+        const commonChildren = (index.h("span", { class: "duet-button-contents", style: { color: tokenUtils.getColorByName(this.color) } }, icon && (index.h("div", { "aria-hidden": "true", class: {
+                "duet-button-icon": true,
+                left: !iconRight,
+                right: iconRight,
+                [this.getButtonIconSize()]: true,
+            } }, index.h("duet-icon", { size: "auto", margin: "none", name: icon, color: "currentColor" }))), index.h("slot", null)));
+        const commonProps = {
+            onFocus: this.onFocus,
+            onBlur: this.onBlur,
+            ref: button => (this.nativeButton = button),
+            id: this.identifier,
+            class: {
+                "duet-m-0": this.margin === "none",
+                "duet-p-0": this.padding === "none",
+                "duet-no-wrap": this.wrapping === "none",
+                "duet-button": true,
+                "duet-button-is-small": this.size === "small",
+                "duet-button-icon-only": this.iconOnly,
+                "duet-button-text-center": this.centerText,
+                "duet-button-negative": this.negative || this.variation === "negative",
+                [this.variation]: true,
+                disabled: this.disabled,
+                icon: !!icon,
+                "icon-right": iconRight,
+                [this.getButtonIconSize()]: true,
+            },
+            "aria-controls": this.accessibleControls,
+            "aria-label": this.accessibleLabel,
+            "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined,
+            "aria-activedescendant": this.accessibleActiveDescendant,
+            "aria-owns": this.accessibleOwns,
+            "aria-describedby": this.accessibleDescribedBy,
+            "aria-labelledby": this.accessibleLabelledBy,
+            "aria-details": this.accessibleDetails,
+            "aria-description": this.accessibleDescription,
+        };
+        return (index.h(index.Host, { onClick: this.handleClick, class: {
+                "duet-m-0": this.margin === "none",
+                "duet-small": this.size === "small",
+                "duet-fixed": this.fixed,
+                "duet-expand": this.expand,
+                "input-button": (_a = this.variation) === null || _a === void 0 ? void 0 : _a.startsWith("input-button"),
+            } }, index.h("div", { 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, " "))), this.loading && index.h("duet-spinner", { color: "currentColor" }))));
     }
-  }
-  /**
-   * render() function.
-   * Always the last one in the class.
-   */
-  render() {
-    var _a;
-    const isExternalLink = this.external && this.url;
-    // enforce consistency for external links
-    const icon = isExternalLink ? "action-new-window" : this.icon;
-    const iconRight = isExternalLink ? true : this.iconRight;
-    const commonChildren = (index.h("span", { class: "duet-button-contents", style: { color: tokenUtils.getColorByName(this.color) } }, icon && (index.h("div", { "aria-hidden": "true", class: {
-        "duet-button-icon": true,
-        left: !iconRight,
-        right: iconRight,
-        [this.getButtonIconSize()]: true,
-      } }, index.h("duet-icon", { size: "auto", margin: "none", name: icon, color: "currentColor" }))), index.h("slot", null)));
-    const commonProps = {
-      onFocus: this.onFocus,
-      onBlur: this.onBlur,
-      ref: button => (this.nativeButton = button),
-      id: this.identifier,
-      class: {
-        "duet-m-0": this.margin === "none",
-        "duet-p-0": this.padding === "none",
-        "duet-no-wrap": this.wrapping === "none",
-        "duet-button": true,
-        "duet-button-is-small": this.size === "small",
-        "duet-button-icon-only": this.iconOnly,
-        "duet-button-text-center": this.centerText,
-        "duet-button-negative": this.negative || this.variation === "negative",
-        [this.variation]: true,
-        disabled: this.disabled,
-        icon: !!icon,
-        "icon-right": iconRight,
-        [this.getButtonIconSize()]: true,
-      },
-      "aria-controls": this.accessibleControls,
-      "aria-label": this.accessibleLabel,
-      "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined,
-      "aria-activedescendant": this.accessibleActiveDescendant,
-      "aria-owns": this.accessibleOwns,
-      "aria-describedby": this.accessibleDescribedBy,
-      "aria-labelledby": this.accessibleLabelledBy,
-      "aria-details": this.accessibleDetails,
-      "aria-description": this.accessibleDescription,
-    };
-    return (index.h(index.Host, { onClick: this.handleClick, class: {
-        "duet-m-0": this.margin === "none",
-        "duet-small": this.size === "small",
-        "duet-fixed": this.fixed,
-        "duet-expand": this.expand,
-        "input-button": (_a = this.variation) === null || _a === void 0 ? void 0 : _a.startsWith("input-button"),
-      } }, index.h("div", { 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, " "))), this.loading && index.h("duet-spinner", { color: "currentColor" }))));
-  }
-  get element() { return index.getElement(this); }
-  static get watchers() { return {
-    "disabled": ["syncToProxyButton"],
-    "submit": ["syncToProxyButton"],
-    "value": ["syncToProxyButton"],
-    "name": ["syncToProxyButton"]
-  }; }
+    get element() { return index.getElement(this); }
+    static get watchers() { return {
+        "disabled": ["syncToProxyButton"],
+        "submit": ["syncToProxyButton"],
+        "value": ["syncToProxyButton"],
+        "name": ["syncToProxyButton"]
+    }; }
 };
 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 DuetSpinner = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.accessibleLabel = undefined;
-    this.color = "gray-lightest";
-    this.size = "small";
-    this.theme = "";
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    themeableComponent.inheritGlobalTheme(this);
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const color = this.color === "currentColor" ? "currentColor" : tokenUtils.getColorByName(this.color);
-    return (index.h(index.Host, { 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", { class: {
-        "duet-spinner": true,
-        [this.size]: true,
-      }, style: { color }, "aria-label": this.accessibleLabel })));
-  }
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.accessibleLabel = undefined;
+        this.color = "gray-lightest";
+        this.size = "small";
+        this.theme = "";
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        themeableComponent.inheritGlobalTheme(this);
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const color = this.color === "currentColor" ? "currentColor" : tokenUtils.getColorByName(this.color);
+        return (index.h(index.Host, { 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", { class: {
+                "duet-spinner": true,
+                [this.size]: true,
+            }, style: { color }, "aria-label": this.accessibleLabel })));
+    }
 };
 DuetSpinner.style = duetSpinnerCss;

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

@@ -5,41 +5,41 @@
 Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-2cce7b13.js');
-const themeableComponent = require('./themeable-component-0be6d1f4.js');
+const index = require('./index-2dc54a15.js');
+const themeableComponent = require('./themeable-component-83a2a0d4.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 .author{color:rgb(0, 41, 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{color:rgb(23, 28, 58)}.duet-callout.duet-m-0{margin:0 !important}";
 const DuetCallout = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.hasAuthorSlot = false;
-    this.theme = "";
-    this.margin = "auto";
-  }
-  /**
-   * Component lifecycle events.
-   */
-  componentWillLoad() {
-    themeableComponent.inheritGlobalTheme(this);
-    this.hasAuthorSlot = !!this.element.querySelector('[slot="author"]');
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const icon = `<svg viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.hasAuthorSlot = false;
+        this.theme = "";
+        this.margin = "auto";
+    }
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad() {
+        themeableComponent.inheritGlobalTheme(this);
+        this.hasAuthorSlot = !!this.element.querySelector('[slot="author"]');
+    }
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const icon = `<svg viewBox="0 0 22 17" fill="none" xmlns="http://www.w3.org/2000/svg">
     <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, null, index.h("div", { class: {
-        "duet-callout": true,
-        "duet-theme-turva": this.theme === "turva",
-        "duet-m-0": this.margin === "none",
-      } }, index.h("figure", { class: "container" }, index.h("duet-icon", { 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", null, index.h("duet-paragraph", { variation: "intro", weight: "semi-bold", margin: "none", theme: this.theme }, index.h("slot", null))), this.hasAuthorSlot && (index.h("figcaption", { class: "author" }, index.h("span", null, "\u2014 "), index.h("span", null, index.h("slot", { name: "author" }))))))));
-  }
-  get element() { return index.getElement(this); }
+        return (index.h(index.Host, null, index.h("div", { class: {
+                "duet-callout": true,
+                "duet-theme-turva": this.theme === "turva",
+                "duet-m-0": this.margin === "none",
+            } }, index.h("figure", { class: "container" }, index.h("duet-icon", { 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", null, index.h("duet-paragraph", { variation: "intro", weight: "semi-bold", margin: "none", theme: this.theme }, index.h("slot", null))), this.hasAuthorSlot && (index.h("figcaption", { class: "author" }, index.h("span", null, "\u2014 "), index.h("span", null, index.h("slot", { name: "author" }))))))));
+    }
+    get element() { return index.getElement(this); }
 };
 DuetCallout.style = duetCalloutCss;