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

package/lib/cjs/_commonjsHelpers-4N64IRaP.js

@@ -0,0 +1,10 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+function getDefaultExportFromCjs (x) {
+	return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
+}
+
+exports.getDefaultExportFromCjs = getDefaultExportFromCjs;

package/lib/cjs/{a11y-utils-afeb2485.js → a11y-utils-CrefuUbk.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-const slotUtils = require('./slot-utils-acd4cc20.js');
+var slotUtils = require('./slot-utils-DgJchaT4.js');
 
 function getAccessibleLinkLabel(component) {
     const textContent = component.element.textContent;

package/lib/cjs/action-arrow-down-small-CDsSJFvZ.js

@@ -0,0 +1,21 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+var _commonjsHelpers = require('./_commonjsHelpers-4N64IRaP.js');
+
+var actionArrowDownSmall;
+var hasRequiredActionArrowDownSmall;
+
+function requireActionArrowDownSmall () {
+	if (hasRequiredActionArrowDownSmall) return actionArrowDownSmall;
+	hasRequiredActionArrowDownSmall = 1;
+	actionArrowDownSmall={"title":"action-arrow-down-small","tags":"action arrow down small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M12 19.5a2.3 2.3 0 0 1-1.729-.78L.46 7.568a1.847 1.847 0 0 1 2.773-2.439l8.579 9.752a.25.25 0 0 0 .376 0l8.579-9.752a1.847 1.847 0 1 1 2.773 2.439l-9.808 11.148A2.31 2.31 0 0 1 12 19.5z\"/></svg>"};
+	return actionArrowDownSmall;
+}
+
+var actionArrowDownSmallExports = requireActionArrowDownSmall();
+var arrowDownIcon = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(actionArrowDownSmallExports);
+
+exports.arrowDownIcon = arrowDownIcon;

package/lib/cjs/action-new-window-small-BWlVx6YN.js

@@ -0,0 +1,21 @@
+/*!
+ * Built with Duet Design System
+ */
+'use strict';
+
+var _commonjsHelpers = require('./_commonjsHelpers-4N64IRaP.js');
+
+var actionNewWindowSmall;
+var hasRequiredActionNewWindowSmall;
+
+function requireActionNewWindowSmall () {
+	if (hasRequiredActionNewWindowSmall) return actionNewWindowSmall;
+	hasRequiredActionNewWindowSmall = 1;
+	actionNewWindowSmall={"title":"action-new-window-small","tags":"arrow open new window tab external linksquare box rectangle action small","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M10.5 2a1.5 1.5 0 0 1 .14 3H3.75c-.38 0-.7.28-.74.65l-.01.1v14.5c0 .38.28.7.65.74l.1.01h14.5c.38 0 .7-.28.74-.65l.01-.1v-6.89a1.5 1.5 0 0 1 3 0v6.89A3.75 3.75 0 0 1 18.25 24H3.75A3.75 3.75 0 0 1 0 20.25V5.75A3.75 3.75 0 0 1 3.75 2zm12-2c.78 0 1.42.6 1.5 1.36V7.5a1.5 1.5 0 0 1-3 .14V5.12l-5.44 5.44a1.5 1.5 0 0 1-2.22-2l.1-.12L18.88 3H16.5A1.5 1.5 0 0 1 15 1.64V1.5c0-.78.6-1.42 1.36-1.5h.14z\"/></svg>"};
+	return actionNewWindowSmall;
+}
+
+var actionNewWindowSmallExports = requireActionNewWindowSmall();
+var newWindowIcon = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(actionNewWindowSmallExports);
+
+exports.newWindowIcon = newWindowIcon;

package/lib/cjs/{app-globals-540cd51d.js → app-globals-CkySA1aW.js}

@@ -3,7 +3,7 @@
  */
 'use strict';
 
-require('./index-00821d28.js');
+require('./index-CdC7dzZ-.js');
 
 const setupLoggers = () => {
     {
@@ -21,7 +21,7 @@ const setupLoggers = () => {
     }
 };
 
-const appGlobalScript = () => {
+var appGlobalScript = () => {
     setupLoggers();
 };
 

package/lib/cjs/duet-action-button.cjs.entry.js

@@ -3,64 +3,119 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-00821d28.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const createId = require('./create-id-1f8c438f.js');
-const jsUtils = require('./js-utils-92e24ba1.js');
-const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
-const languageUtils = require('./language-utils-77bf1c27.js');
-const tokenUtils = require('./token-utils-5000595c.js');
-require('./string-utils-7b13c16e.js');
-require('./tokens.module-7c947029.js');
+var index = require('./index-CdC7dzZ-.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
+var createId = require('./create-id-DtslnIOq.js');
+var jsUtils = require('./js-utils-hJ4A2edy.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var languageUtils = require('./language-utils-A7DfQayC.js');
+var tokenUtils = require('./token-utils-BUKJTu4j.js');
+require('./string-utils-B35hEUBv.js');
+require('./tokens.module-GwBgNF6_.js');
 
 const duetActionButtonCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:inline-block;margin:0 auto}.duet-action-button{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;min-height:auto !important;padding:0 !important;margin:0 0 0 8px;color:rgb(8, 42, 77);white-space:nowrap;cursor:pointer;background:rgb(245, 248, 250);border-radius:50%;transition:background-color 300ms ease !important}.duet-action-button.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 247, 250)}.duet-action-button duet-icon{display:block}@media (max-width: 35.9375em){.duet-action-button{width:32px;height:32px}}.duet-action-button:not(:disabled):hover{background:#e9ecee}.duet-action-button:not(:disabled):hover.duet-theme-turva{background:#e9ebee}.duet-action-button:focus{outline:0;box-shadow:0 0 0 2px #0077b3 !important}.duet-action-button:focus.duet-theme-turva{box-shadow:0 0 0 2px #171c3a !important}.duet-action-button:active:focus{background:#dddfe1 !important;box-shadow:none}.duet-action-button:active:focus.duet-theme-turva{background:#dddee1 !important}.duet-action-button:disabled{color:rgb(127, 150, 165);cursor:default;background:rgb(245, 248, 250);opacity:0.75}.duet-action-button.duet-theme-turva:disabled{color:rgb(143, 147, 158);background:rgb(245, 247, 250)}";
-const DuetActionButtonStyle0 = duetActionButtonCss;
 
 const DuetActionButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.duetActionEvent = index.createEvent(this, "duetActionEvent", 6);
         this.listId = createId.createID("duet-action-button");
+        this.numbersStore = "";
         /**
-         * Private methods.
+         * Theme of the pagination.
          */
-        //helper to emit relevant page events
-        this.emitPageEvent = jsUtils.debounce(e => {
-            this.duetActionEvent.emit({
-                component: "duet-action-button",
-                originalEvent: e,
-                action: this.actionId,
-                name: this.actionName,
-                meta: this.actionMeta,
-                id: this.listId,
-            });
-        });
-        this.numbersStore = "";
         this.theme = "";
+        /**
+         * Name of the icon to display
+         */
         this.iconName = "action-arrow-left-small";
+        /**
+         * Color of the icon to display
+         */
         this.iconColor = "currentColor";
+        /**
+         * Size of the icon
+         */
         this.iconSize = "xx-small";
-        this.actionName = undefined;
+        /**
+         * Name of id of action that was called being called
+         */
         this.actionId = undefined;
+        /**
+         * Name of id of action that was called being called
+         */
         this.actionMeta = undefined;
+        /**
+         * Disables the button
+         */
         this.disabled = false;
+        /**
+         * Custom color to be used for the icon, as a design token entered in camelCase
+         * or kebab-case. Example: "color-primary". This property can also be set to
+         * "currentColor" which forces the icon to use the CSS text color of parent
+         * element instead. Useful when you want to control the color in stylesheet
+         * instead.
+         */
         this.color = "";
+        /**
+         * Custom color to be used for a background, as a design token entered
+         * in camelCase or kebab-case. Using this option the icon will always be resized
+         * to $size-icon-medium on mobile viewports. Example: "color-primary".
+         */
         this.background = "";
+        /**
+         * Title of the action button (shows as DOM tooltip when hovering)
+         * if set to true, this will try to add a best-guess title based on action-name
+         * if set to a string the string is used
+         * if set to false nothing is set
+         */
         this.accessibleTitle = true;
+        /**
+         * Described By id
+         */
         this.accessibleDescribedBy = undefined;
+        /**
+         * Details of the component
+         */
         this.accessibleDetails = undefined;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
         this.accessibleLabelledBy = undefined;
+        /**
+         * Aria description the button
+         */
         this.accessibleDescription = undefined;
+        /**
+         * Default accessible label
+         */
         this.accessibleLabelsDefaults = {
             en: "Click to activate action",
             fi: "Klikkaa aktivoidaksesi toiminto",
             sv: "Klicka för att aktivera åtgärd",
         };
+        /**
+         * Accessible label
+         */
         this.accessibleLabel = languageUtils.getLocaleString(this.accessibleLabelsDefaults);
+        /**
+         * Used to indicate which dom element with ID this element controls
+         */
         this.accessibleControls = "";
-        this.url = undefined;
+        /**
+         * Private methods.
+         */
+        //helper to emit relevant page events
+        this.emitPageEvent = jsUtils.debounce(e => {
+            this.duetActionEvent.emit({
+                component: "duet-action-button",
+                originalEvent: e,
+                action: this.actionId,
+                name: this.actionName,
+                meta: this.actionMeta,
+                id: this.listId,
+            });
+        });
     }
     //handle a11y keyboard navigation events
     async onKeyboardDown(e) {
@@ -158,6 +213,6 @@ const DuetActionButton = class {
     }
     get element() { return index.getElement(this); }
 };
-DuetActionButton.style = DuetActionButtonStyle0;
+DuetActionButton.style = duetActionButtonCss;
 
 exports.duet_action_button = DuetActionButton;

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

@@ -3,18 +3,15 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-00821d28.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const createId = require('./create-id-1f8c438f.js');
-const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
-const languageUtils = require('./language-utils-77bf1c27.js');
-const slotUtils = require('./slot-utils-acd4cc20.js');
-require('./string-utils-7b13c16e.js');
+var index = require('./index-CdC7dzZ-.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
+var createId = require('./create-id-DtslnIOq.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var languageUtils = require('./language-utils-A7DfQayC.js');
+var slotUtils = require('./slot-utils-DgJchaT4.js');
+require('./string-utils-B35hEUBv.js');
 
 const duetAlertCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:block;width:100%;max-height:999px;transition:opacity 300ms ease, visibility 300ms ease, transform 300ms ease, max-height 300ms ease}:host(:focus){outline:0}:host(.user-is-tabbing:focus){border-radius:4px;box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing.duet-theme-turva:focus){box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}:host(.duet-alert-is-dismissed){max-height:0;overflow:hidden;visibility:hidden !important;opacity:0;transform:scale(0.98)}:host(.duet-alert-is-dismissed) .duet-alert{margin:0 !important}.duet-alert-wrapper{margin-bottom:16px !important;position:relative;width:100%;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:1rem;font-weight:400;line-height:1.25;color:rgb(8, 42, 77);background:rgb(228, 241, 247);border:1px solid rgb(172, 210, 229);border-radius:12px;transition:margin 100ms 300ms ease}.duet-alert-wrapper.duet-p-0{padding:0 !important}.duet-alert-wrapper.duet-m-0{margin:0 !important}.duet-alert-wrapper.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-alert-wrapper.warning{color:rgb(38, 26, 4);background:rgb(255, 247, 221);border:1px solid rgb(255, 217, 120)}.duet-alert-wrapper.danger{color:rgb(89, 0, 45);background:rgb(255, 225, 231);border:1px solid rgb(252, 136, 162)}.duet-alert-wrapper.success{color:rgb(4, 38, 33);background:rgb(231, 248, 239);border:1px solid rgb(163, 229, 202)}.duet-alert-wrapper.below-nav{margin-bottom:0 !important;border:0;border-bottom:1px solid rgb(212, 223, 229);border-radius:0}.duet-alert-wrapper .duet-alert{position:relative;width:100%;max-width:1384px;padding:16px;margin:0 auto}.duet-alert-wrapper .duet-alert.duet-alert-is-dismissible{padding:16px 72px 16px 16px;text-align:left}.duet-alert-wrapper .duet-alert.duet-alert-is-dismissible .duet-alert-container{text-align:left}.duet-alert-wrapper .duet-alert.duet-alert-has-show-more{padding-bottom:0}.duet-alert-wrapper .duet-alert.duet-alert-has-icon .duet-alert-show-more{margin-left:36px}.duet-alert-wrapper .duet-alert.duet-alert-expandable{padding-right:20px}.duet-alert-dismiss{position:absolute;top:3px;right:3px}.duet-alert-dismiss duet-button:hover{background-color:rgb(198, 225, 238);border-radius:8px}.warning .duet-alert-dismiss duet-button:hover{background-color:rgb(255, 232, 160)}.danger .duet-alert-dismiss duet-button:hover{background-color:rgb(255, 173, 190)}.success .duet-alert-dismiss duet-button:hover{background-color:rgb(191, 239, 218)}.duet-alert-container{display:inline-flex;align-items:flex-start;width:100%;margin:0 auto !important}.duet-alert-container .duet-alert-content{flex-grow:1;line-height:1.5}.duet-alert-has-icon .duet-alert-container{margin-top:2px !important}.duet-alert-container:focus{outline:none}.duet-alert-icon{position:relative;top:2px;display:inline-block;width:20px;min-width:20px;height:20px;margin:0 16px 0 0 !important}.duet-alert-icon duet-icon{width:20px;height:20px}.duet-alert-expander{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;width:calc(100% + 32px + 40px);padding:16px;padding-right:20px;padding-left:52px;margin:-16px;margin-left:-52px;font-family:inherit;color:inherit;cursor:pointer;background-color:inherit}.duet-alert-expanded .duet-alert-expander{margin-bottom:-4px}.duet-alert-expander .expanding-title{flex-grow:1;font-size:1rem;line-height:1.5;text-align:left}.duet-alert-expander duet-icon{position:relative;top:4px;transition:rotate 300ms ease}.duet-alert-expanded .duet-alert-expander duet-icon{rotate:180deg}.duet-alert-expander:hover{filter:brightness(85%)}";
-const DuetAlertStyle0 = duetAlertCss;
 
 const DuetAlert = class {
     constructor(hostRef) {
@@ -23,43 +20,88 @@ const DuetAlert = class {
         this.duetCloseComplete = index.createEvent(this, "duetCloseComplete", 7);
         this.descriptiveId = createId.createID("DuetAlert");
         this.hasShowMoreSlot = false;
-        this.handleDismiss = (ev) => {
-            this.handleHide();
-            this.duetDismiss.emit({
-                component: "duet-alert",
-                originalEvent: ev,
-            });
-        };
-        this.handleShow = () => {
-            this.isDismissed = false;
-        };
-        this.handleHide = () => {
-            this.isDismissed = true;
-            this.element.addEventListener("transitionend", () => this.duetCloseComplete.emit(), { once: true });
-        };
-        this.handleExpandToggle = () => {
-            this.isExpanded = !this.isExpanded;
-        };
+        /**
+         * Theme of the card.
+         */
         this.theme = "";
+        /**
+         * State() variables
+         * Inlined decorator, alphabetical order.
+         */
         this.isDismissed = false;
         this.isExpanded = false;
-        this.timeoutID = undefined;
+        /**
+         * Property to change languageDefaults on the component.
+         * normally you would handle these strings on an application level and override accessibleLabel when needed
+         * @default {fi: "Painike viestin sulkemiseen", sv: "Knapp för att stänga meddelandet", en: "Button to close the message"}
+         */
         this.accessibleLabelDefaults = {
             fi: "Painike viestin sulkemiseen",
             sv: "Knapp för att stänga meddelandet",
             en: "Button to close the message",
         };
+        /**
+         * Adds accessible label for the dismissible alert close button.
+         * @default {fi: "Painike viestin sulkemiseen", sv: "Knapp för att stänga meddelandet", en: "Button to close the message"}
+         */
         this.accessibleLabel = languageUtils.getLocaleString(this.accessibleLabelDefaults);
+        /**
+         * Enable or disabled announcements by assistive technologies. If the alert is present already on page load, this usually
+         * should be set to false, so that it is not read out first.
+         */
         this.announcements = true;
+        /**
+         * Icon to display to the left of the content, overriding the default status icon. As the alert now uses default status icons,
+         * use of this property is discouraged, and it is being considered for deprication.
+         */
         this.icon = "";
-        this.autoDismiss = undefined;
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
+        /**
+         * Controls the padding of the component.
+         */
         this.padding = "auto";
+        /**
+         * Style variation of the alert.
+         */
         this.variation = "default";
+        /**
+         * Allows for styling of the alert based on its position in the layout.
+         * "below-nav" is used when the alert is below the navigation bar. It also overrides the icon to be the same as the variation.
+         */
         this.position = "content";
+        /**
+         * Show a button to dismiss the alert. Note that this has no effect when expandingTitle is used.
+         */
         this.dismissible = false;
+        /**
+         * Make alert focusable.
+         */
         this.focusable = false;
+        /**
+         * When given, the expanding title is initially shown and the content of the alert is hidden. The title acts as a
+         * toggle button for showing/hiding the content. Note that you can't make an expanding alert dismissible.
+         */
         this.expandingTitle = "";
+        this.handleDismiss = (ev) => {
+            this.handleHide();
+            this.duetDismiss.emit({
+                component: "duet-alert",
+                originalEvent: ev,
+            });
+        };
+        this.handleShow = () => {
+            this.isDismissed = false;
+        };
+        this.handleHide = () => {
+            this.isDismissed = true;
+            this.element.addEventListener("transitionend", () => this.duetCloseComplete.emit(), { once: true });
+        };
+        this.handleExpandToggle = () => {
+            this.isExpanded = !this.isExpanded;
+        };
     }
     /**
      * Component lifecycle events.
@@ -142,6 +184,6 @@ const DuetAlert = class {
     }
     get element() { return index.getElement(this); }
 };
-DuetAlert.style = DuetAlertStyle0;
+DuetAlert.style = duetAlertCss;
 
 exports.duet_alert = DuetAlert;

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

@@ -3,20 +3,30 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-00821d28.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
+var index = require('./index-CdC7dzZ-.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
 
 const duetBadgeCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;margin-right:4px !important;margin-bottom:2px !important;display:inline-block;width:auto;vertical-align:middle}:host:last-child,:host:last-of-type{margin-right:0 !important}:host(.duet-m-0){margin:0 !important}.duet-badge{display:inline-block;width:100%;padding:4.4444444444px 12px 5.4444444444px;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-size:0.75rem;font-style:normal;font-weight:600;line-height:1.25;color:rgb(8, 42, 77);text-align:center;word-break:break-word;vertical-align:middle;background:#d9ebf4;border-radius:20rem}.duet-badge.duet-p-0{padding:0 !important}.duet-badge.duet-m-0{margin:0 !important}.duet-badge.duet-theme-turva{padding:5.4444444444px 12px 4.4444444444px;font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";font-weight:700;color:rgb(23, 28, 58);background:#e8e8eb}.duet-badge.warning{background:#fdecc9}.duet-badge.warning.duet-theme-turva{background:#fdecc9}.duet-badge.danger{background:#f7d2dc}.duet-badge.danger.duet-theme-turva{background:#f7d2dc}.duet-badge.success{background:#d6e6e1}.duet-badge.success.duet-theme-turva{background:#d6e6e1}.duet-badge.subtle{color:rgb(98, 121, 138);background:none;outline:1px solid rgb(212, 223, 229);outline-offset:-1px}.duet-badge.subtle.duet-theme-turva{color:rgb(113, 118, 132);background:none;outline-color:rgb(222, 224, 228)}.duet-badge.background-strong.default{color:rgb(255, 255, 255);background:rgb(0, 119, 179)}.duet-badge.background-strong.default.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(23, 28, 58)}.duet-badge.background-strong.warning{background:#f9c153}.duet-badge.background-strong.warning.duet-theme-turva{background:#f9c153}.duet-badge.background-strong.danger{color:rgb(255, 255, 255);background:rgb(214, 28, 82)}.duet-badge.background-strong.danger.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(214, 28, 82)}.duet-badge.background-strong.success{color:rgb(255, 255, 255);background:rgb(48, 131, 105)}.duet-badge.background-strong.success.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(48, 131, 105)}.duet-badge.background-strong.subtle{border-color:rgb(181, 198, 208);outline-color:rgb(8, 42, 77)}.duet-badge.background-strong.subtle.duet-theme-turva{border-color:rgb(199, 202, 207);outline-color:rgb(23, 28, 58)}";
-const DuetBadgeStyle0 = duetBadgeCss;
 
 const DuetBadge = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Theme of the badge.
+         */
         this.theme = "";
+        /**
+         * Style variation of the badge.
+         */
         this.variation = "default";
+        /**
+         * Variation of the background. "strong" results in a more prominent background color.
+         * @default "normal"
+         */
         this.background = "normal";
+        /**
+         * Controls the margin of the component.
+         */
         this.margin = "auto";
     }
     /**
@@ -40,6 +50,6 @@ const DuetBadge = class {
     }
     get element() { return index.getElement(this); }
 };
-DuetBadge.style = DuetBadgeStyle0;
+DuetBadge.style = duetBadgeCss;
 
 exports.duet_badge = DuetBadge;

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

@@ -3,14 +3,12 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-00821d28.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const slotUtils = require('./slot-utils-acd4cc20.js');
-const stringUtils = require('./string-utils-7b13c16e.js');
-const tokenUtils = require('./token-utils-5000595c.js');
-require('./tokens.module-7c947029.js');
+var index = require('./index-CdC7dzZ-.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
+var slotUtils = require('./slot-utils-DgJchaT4.js');
+var stringUtils = require('./string-utils-B35hEUBv.js');
+var tokenUtils = require('./token-utils-BUKJTu4j.js');
+require('./tokens.module-GwBgNF6_.js');
 
 const DuetPicture = ({ img, sources }) => {
     return (index.h("picture", null,
@@ -20,11 +18,51 @@ const DuetPicture = ({ img, sources }) => {
 };
 
 const duetBannerCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n:host {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  background: transparent;\n  border: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  margin-right: 36px !important;\n  margin-bottom: 36px !important;\n  display: flex;\n  justify-content: center;\n  width: auto;\n  container: duet-banner-container;\n  container-type: inline-size;\n}\n:host:last-child, :host:last-of-type {\n  margin-right: 0 !important;\n}\n\n:host(.duet-m-0) {\n  margin: 0 !important;\n}\n\n.duet-banner {\n  display: grid;\n  grid-template-rows: min-content 1fr;\n  width: 100%;\n  height: 100%;\n  font-family: \"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n  font-style: normal;\n  text-align: left;\n  border-radius: 16px;\n}\n.duet-banner.duet-p-0 {\n  padding: 0 !important;\n}\n.duet-banner.duet-m-0 {\n  margin: 0 !important;\n}\n.duet-banner .visual {\n  position: relative;\n  display: none;\n  overflow: hidden;\n  /* stylelint-disable */\n}\n@container duet-banner-container (min-width: 0px) {\n  .duet-banner .visual {\n    /* stylelint-enable */\n    display: block;\n  }\n}\n.duet-banner .visual .image-container {\n  position: relative;\n  aspect-ratio: 2/1;\n  overflow: hidden;\n}\n.duet-banner .visual .image {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  object-position: center;\n}\n.duet-banner .visual .icon {\n  position: absolute;\n}\n.duet-banner .visual .brand-shape {\n  position: absolute;\n  top: 0;\n  left: 72%;\n  display: none;\n  width: 100%;\n  height: 100%;\n  mask-image: url(\"data:image/svg+xml,%3Csvg%20%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20160%20344%22%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M2.72641e-07%2091.1902C0.000476976%2097.9034%200.626077%20104.726%201.92282%20111.592L42.7493%20327.771C43.8045%20333.358%2045.2667%20338.776%2047.0996%20344H160V0H51.1439C19.7799%2019.1253%200.00268143%2053.4178%202.72641e-07%2091.1749C-9.08807e-08%2091.18%20-9.08875e-08%2091.1851%202.72641e-07%2091.1902Z%22%20fill%3D%22%23E6F2F8%22%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fsvg%3E\");\n}\n.duet-banner .content {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  padding: 16px 20px 28px;\n}\n.duet-banner .content .description {\n  hyphens: auto;\n}\n.duet-banner .action {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  align-items: flex-start;\n  justify-content: flex-end;\n  padding-top: 16px;\n}\n.duet-banner .visual {\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n}\n.duet-banner .visual .image-container {\n  width: 100%;\n  height: auto;\n  border-radius: 0;\n}\n.duet-banner .visual .icon {\n  bottom: 30px;\n  left: 15px;\n}\n.duet-banner.duet-theme-turva {\n  font-family: \"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n.duet-banner.duet-theme-turva .visual .brand-shape {\n  mask-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 160 344' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_7920_3801)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.58983 142.533C0.751086 155.147 0.0746585 167.857 0.00796847 179.225C0.00263853 179.814 0 180.409 0 181.007C0 194.845 1.41172 210.806 3.58065 223.171C5.6528 234.934 8.58716 246.495 12.5981 257.779C21.2249 282.059 34.0151 304.109 50.8401 323.977C56.7824 330.993 63.0921 337.68 69.8162 344H160V0H65.0733C52.1771 10.7866 41.4339 23.4177 32.7528 37.7978C21.1154 57.0822 14.0367 77.9583 9.75424 99.7913C9.09214 103.157 8.55049 106.545 8.00901 109.933C7.75185 111.542 7.49474 113.15 7.22478 114.756C6.74308 117.618 6.24543 120.479 5.74776 123.34C4.6361 129.729 3.52432 136.12 2.58983 142.533Z' fill='%23F5F5F7'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_7920_3801'%3E%3Crect width='160' height='344' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A\");\n}\n.duet-banner.size-medium, .duet-banner.size-large {\n  /* stylelint-disable */\n  /* stylelint-disable */\n}\n@container duet-banner-container (min-width: 486px) {\n  .duet-banner.size-medium, .duet-banner.size-large {\n    /* stylelint-enable */\n    grid-template-rows: none;\n    grid-template-columns: 50% 50%;\n  }\n  .duet-banner.size-medium .visual, .duet-banner.size-large .visual {\n    border-top-left-radius: 16px;\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 16px;\n  }\n  .duet-banner.size-medium .visual .image-container, .duet-banner.size-large .visual .image-container {\n    height: 100%;\n  }\n  .duet-banner.size-medium .visual .image, .duet-banner.size-large .visual .image {\n    width: 100%;\n    height: 100%;\n  }\n  .duet-banner.size-medium .visual .icon, .duet-banner.size-large .visual .icon {\n    top: 36px;\n    left: 168px;\n  }\n  .duet-banner.size-medium .visual .brand-shape, .duet-banner.size-large .visual .brand-shape {\n    display: block;\n  }\n  .duet-banner.size-medium .content, .duet-banner.size-large .content {\n    align-items: flex-start;\n    justify-content: center;\n    padding: 28px 28px 28px 0;\n  }\n  .duet-banner.size-medium .action, .duet-banner.size-large .action {\n    flex-grow: 0;\n  }\n}\n@container duet-banner-container (min-width: 586px) {\n  .duet-banner.size-medium, .duet-banner.size-large {\n    /* stylelint-enable */\n  }\n  .duet-banner.size-medium .visual .brand-shape, .duet-banner.size-large .visual .brand-shape {\n    left: 80%;\n  }\n}\n.duet-banner.size-large {\n  /* stylelint-disable */\n}\n@container duet-banner-container (min-width: 900px) {\n  .duet-banner.size-large {\n    /* stylelint-enable */\n    grid-template-rows: none;\n    grid-template-columns: 50% 50%;\n  }\n  .duet-banner.size-large .visual {\n    border-top-left-radius: 16px;\n    border-bottom-left-radius: 16px;\n  }\n  .duet-banner.size-large .visual .image-container {\n    height: 100%;\n  }\n  .duet-banner.size-large .visual .image {\n    width: 100%;\n    height: 100%;\n  }\n  .duet-banner.size-large .visual .icon {\n    top: 40px;\n    bottom: auto;\n    left: 335px;\n  }\n  .duet-banner.size-large .visual .brand-shape {\n    display: block;\n  }\n  .duet-banner.size-large .content {\n    align-items: flex-start;\n    justify-content: center;\n    padding: 48px 48px 48px 0;\n  }\n  .duet-banner.size-large .action {\n    flex-grow: 0;\n  }\n}\n.duet-banner.no-image {\n  display: flex;\n  justify-content: center;\n  padding: 36px 20px;\n}\n.duet-banner.no-image .visual {\n  display: none;\n}\n.duet-banner.no-image .content {\n  width: 100%;\n  max-width: 720px;\n  padding: 0;\n}\n.duet-banner.no-image.size-medium, .duet-banner.no-image.size-large {\n  /* stylelint-disable */\n}\n@container duet-banner-container (min-width: 486px) {\n  .duet-banner.no-image.size-medium, .duet-banner.no-image.size-large {\n    /* stylelint-enable */\n    padding: 48px;\n  }\n}";
-const DuetBannerStyle0 = duetBannerCss;
 
 const DuetBanner = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        /**
+         * Theme.
+         */
+        this.theme = "";
+        /**
+         * Controls the margin of the component.
+         */
+        this.margin = "auto";
+        /**
+         * Background color.
+         */
+        this.backgroundColor = "primary-lighter";
+        /**
+         * Icon color.
+         */
+        this.iconColor = "gray-lightest";
+        /**
+         * Icon background color.
+         */
+        this.iconBackgroundColor = "primary";
+        /**
+         * Text color.
+         */
+        this.textColor = "secondary";
+        /**
+         * Maximum size of the banner. The banner will automatically switch to smaller sizes when space is not available.
+         * Sizes "large" and "medium" are horizontal, "small" is vertical,
+         */
+        this.size = "large";
+        /**
+         * Image. Example image is 512x341;
+         */
+        this.image = "";
+        /**
+         * Icon.
+         */
+        this.icon = "";
+        /**
+         * The actual heading level used in the HTML markup.
+         */
+        this.headingLevel = "h2";
         this.checkCurrentSize = () => {
             const elementSize = this.element.clientWidth;
             if (elementSize < 500 || this.size === "small") {
@@ -54,18 +92,6 @@ const DuetBanner = class {
                 }
             }
         };
-        this.currentSize = undefined;
-        this.theme = "";
-        this.margin = "auto";
-        this.backgroundColor = "primary-lighter";
-        this.iconColor = "gray-lightest";
-        this.iconBackgroundColor = "primary";
-        this.textColor = "secondary";
-        this.size = "large";
-        this.image = "";
-        this.sources = undefined;
-        this.icon = "";
-        this.headingLevel = "h2";
     }
     /**
      * Component lifecycle events.
@@ -109,10 +135,10 @@ const DuetBanner = class {
                 "size-medium": this.size === "medium" || this.size === "large",
                 "size-large": this.size === "large",
                 "no-image": !this.image,
-            }, style: bannerStyles }, index.h("div", { key: '4213a9062ef79c32430faf2230b896cdcf686fab', class: "visual" }, index.h("div", { key: '28cc855a769f28823c4501268ac578dc00d177be', class: "image-container" }, this.image && index.h(DuetPicture, Object.assign({ key: 'ef1257956d87c2dd2e40a309d784cf92680ff193' }, pictureSource))), 1 > 2  , index.h("div", { key: 'c21b74c5b8af201787e8c502cab1fe5e7c6f11d5', style: bannerStyles, class: "brand-shape" })), index.h("div", { key: '8f2a9fa44b18a35442b056f6d52d73a3804dc536', class: "content" }, this.hasHeadingSlot && (index.h("div", { key: '7003386020f8944006ea5c7f8479aef1908f4773', class: "heading" }, index.h("duet-heading", { key: '3bb18ccbae1989efaaf587de4985e01aa50db691', theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: this.textColor }, index.h("span", { key: 'b32d9f049c16b5521ad96d823c6d2325c6a80b98' }, index.h("slot", { key: '83c445eca1d63aa91847fbe090eb8afdaec130d7', name: "heading" }))))), this.hasDescriptionSlot && (index.h("div", { key: '2a885bb4ddd277b9a56e00addc82784c469dcdfa', class: "description", style: { color } }, index.h("slot", { key: 'f79f7fdb5137692c0ffa3fa2dd6044f9f5a1f799', name: "description" }))), this.hasActionSlot && (index.h("div", { key: '21306ab0e66e7a6c5830df04387c89af2b01cfe8', class: "action" }, index.h("slot", { key: '7f9c1b80831ae7e2baa3e89ff91bd2802b4c4fb9', name: "action" })))))));
+            }, style: bannerStyles }, index.h("div", { key: '4213a9062ef79c32430faf2230b896cdcf686fab', class: "visual" }, index.h("div", { key: '28cc855a769f28823c4501268ac578dc00d177be', class: "image-container" }, this.image && index.h(DuetPicture, Object.assign({ key: 'ef1257956d87c2dd2e40a309d784cf92680ff193' }, pictureSource))), 1 > 2, index.h("div", { key: 'c21b74c5b8af201787e8c502cab1fe5e7c6f11d5', style: bannerStyles, class: "brand-shape" })), index.h("div", { key: '8f2a9fa44b18a35442b056f6d52d73a3804dc536', class: "content" }, this.hasHeadingSlot && (index.h("div", { key: '7003386020f8944006ea5c7f8479aef1908f4773', class: "heading" }, index.h("duet-heading", { key: '3bb18ccbae1989efaaf587de4985e01aa50db691', theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: this.textColor }, index.h("span", { key: 'b32d9f049c16b5521ad96d823c6d2325c6a80b98' }, index.h("slot", { key: '83c445eca1d63aa91847fbe090eb8afdaec130d7', name: "heading" }))))), this.hasDescriptionSlot && (index.h("div", { key: '2a885bb4ddd277b9a56e00addc82784c469dcdfa', class: "description", style: { color } }, index.h("slot", { key: 'f79f7fdb5137692c0ffa3fa2dd6044f9f5a1f799', name: "description" }))), this.hasActionSlot && (index.h("div", { key: '21306ab0e66e7a6c5830df04387c89af2b01cfe8', class: "action" }, index.h("slot", { key: '7f9c1b80831ae7e2baa3e89ff91bd2802b4c4fb9', name: "action" })))))));
     }
     get element() { return index.getElement(this); }
 };
-DuetBanner.style = DuetBannerStyle0;
+DuetBanner.style = duetBannerCss;
 
 exports.duet_banner = DuetBanner;

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

@@ -3,18 +3,27 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-CdC7dzZ-.js');
+var _commonjsHelpers = require('./_commonjsHelpers-4N64IRaP.js');
+var themeableComponent = require('./themeable-component-C57DSx5w.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
+var languageUtils = require('./language-utils-A7DfQayC.js');
+require('./string-utils-B35hEUBv.js');
 
-const index = require('./index-00821d28.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
-const languageUtils = require('./language-utils-77bf1c27.js');
-require('./string-utils-7b13c16e.js');
+var actionArrowRightSmall;
+var hasRequiredActionArrowRightSmall;
 
-var actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
+function requireActionArrowRightSmall () {
+	if (hasRequiredActionArrowRightSmall) return actionArrowRightSmall;
+	hasRequiredActionArrowRightSmall = 1;
+	actionArrowRightSmall={"title":"action-arrow-right-small","tags":"action arrow right small caret","svg":"<svg fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" role=\"img\"><path d=\"M19.5 12a2.3 2.3 0 0 1-.78 1.729L7.568 23.54a1.847 1.847 0 0 1-2.439-2.773l9.752-8.579a.25.25 0 0 0 0-.376L5.129 3.233A1.847 1.847 0 0 1 7.568.46l11.148 9.808A2.31 2.31 0 0 1 19.5 12z\"/></svg>"};
+	return actionArrowRightSmall;
+}
+
+var actionArrowRightSmallExports = requireActionArrowRightSmall();
+var arrowRightSmallIcon = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(actionArrowRightSmallExports);
 
 const duetBreadcrumbCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}:host{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;display:list-item;width:auto}.container{display:flex;gap:8px;align-items:center}.hide{display:none}.duet-breadrumbs-arrow{display:block;align-items:center;justify-content:center;width:0.375rem;min-width:0.375rem;height:0.375rem;min-height:0.375rem}.duet-breadcrumb{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;height:100%;font-size:0.875rem;font-weight:inherit;line-height:1.25;color:inherit;text-decoration:none}.duet-breadcrumb:focus{outline:0}:host(.user-is-tabbing) .duet-breadcrumb:focus{box-shadow:0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3}:host(.user-is-tabbing) .duet-breadcrumb.duet-theme-turva:focus{box-shadow:0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a}";
-const DuetBreadcrumbStyle0 = duetBreadcrumbCss;
 
 const DuetBreadcrumb = class {
     constructor(hostRef) {
@@ -24,13 +33,24 @@ const DuetBreadcrumb = class {
             sv: "disabled. Visa mer",
             en: "disabled. Nuvarande sida",
         };
-        this.hasSlottedContent = false;
+        /**
+         * Theme
+         */
         this.theme = "";
         this.language = languageUtils.getLanguage();
+        /**
+         * Href
+         */
         this.href = "";
+        /**
+         * Icon
+         */
         this.icon = "arrow-right-small-icon";
+        /**
+         * Icon size
+         */
         this.iconSize = "x-small";
-        this.accessibleLabel = undefined;
+        this.hasSlottedContent = false;
     }
     /**
      * Component lifecycle events.
@@ -53,7 +73,7 @@ const DuetBreadcrumb = class {
      */
     render() {
         var _a;
-        return (index.h(index.Host, { key: '599e50250a3ae11c1bd9a7b3e24b46856415f22e', role: "listitem" }, index.h("div", { key: '74e570c307d43b15ad28e812c1486e861f5c9736', class: "container" }, this.icon === "arrow-right-small-icon" && (index.h("duet-icon", { key: '09e7700108b0d04c62c94e96921450c9913a9276', class: "duet-breadrumbs-arrow", size: "auto", icon: actionArrowRightSmall.svg, margin: "none", color: "currentColor" })), index.h("a", { key: 'd19cfbc2d29d02b4edc4a9303310df963d54c6df', class: {
+        return (index.h(index.Host, { key: '599e50250a3ae11c1bd9a7b3e24b46856415f22e', role: "listitem" }, index.h("div", { key: '74e570c307d43b15ad28e812c1486e861f5c9736', class: "container" }, this.icon === "arrow-right-small-icon" && (index.h("duet-icon", { key: '09e7700108b0d04c62c94e96921450c9913a9276', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), index.h("a", { key: 'd19cfbc2d29d02b4edc4a9303310df963d54c6df', class: {
                 "duet-breadcrumb": true,
                 "duet-theme-turva": this.theme === "turva",
             }, href: this.href ? this.href : undefined, "aria-label": `${!this.href ? `${languageUtils.getLocaleString(this.currentCrumb)} ` : ""}${(_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.element.innerHTML}`, role: "link" }, this.icon !== "arrow-right-small-icon" &&
@@ -64,6 +84,6 @@ const DuetBreadcrumb = class {
     }
     get element() { return index.getElement(this); }
 };
-DuetBreadcrumb.style = DuetBreadcrumbStyle0;
+DuetBreadcrumb.style = duetBreadcrumbCss;
 
 exports.duet_breadcrumb = DuetBreadcrumb;