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

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

@@ -1,62 +1,119 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { d as debounce } from './js-utils-9b9e0039.js';
-import { i as isKeyboardClick } from './keyboard-utils-daf80d44.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-40caac4f.js';
-import { c as capitalizeFirstLetter, g as getColorByName, s as shadeRGBColor } from './token-utils-b9ba8c5e.js';
-import './string-utils-192eb3c8.js';
-import './tokens.module-2d02f5ff.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { d as debounce } from './js-utils-BlUsLmbQ.js';
+import { i as isKeyboardClick } from './keyboard-utils-Db8rvjPI.js';
+import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-BxXgd2r7.js';
+import { c as capitalizeFirstLetter, g as getColorByName, s as shadeRGBColor } from './token-utils-D2bU4zM_.js';
+import './string-utils-C6E9F6QT.js';
+import './tokens.module-UQH7pb1d.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) {
         registerInstance(this, hostRef);
         this.duetActionEvent = createEvent(this, "duetActionEvent", 6);
         this.listId = createID("duet-action-button");
+        this.numbersStore = "";
         /**
-         * Private methods.
+         * Theme of the pagination.
          */
-        //helper to emit relevant page events
-        this.emitPageEvent = 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 = 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 = 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) {
@@ -154,6 +211,6 @@ const DuetActionButton = class {
     }
     get element() { return getElement(this); }
 };
-DuetActionButton.style = DuetActionButtonStyle0;
+DuetActionButton.style = duetActionButtonCss;
 
 export { DuetActionButton as duet_action_button };

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

@@ -1,16 +1,15 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { c as createID } from './create-id-149a1b6d.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-daf80d44.js';
-import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-40caac4f.js';
-import { h as hasSlot } from './slot-utils-4096ff0d.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { c as createID } from './create-id-Cfr_DJqU.js';
+import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-Db8rvjPI.js';
+import { g as getLocaleString, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver } from './language-utils-BxXgd2r7.js';
+import { h as hasSlot } from './slot-utils-B1zQ6tzO.js';
+import './string-utils-C6E9F6QT.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) {
@@ -19,43 +18,88 @@ const DuetAlert = class {
         this.duetCloseComplete = createEvent(this, "duetCloseComplete", 7);
         this.descriptiveId = 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 = 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.
@@ -138,6 +182,6 @@ const DuetAlert = class {
     }
     get element() { return getElement(this); }
 };
-DuetAlert.style = DuetAlertStyle0;
+DuetAlert.style = duetAlertCss;
 
 export { DuetAlert as duet_alert };

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

@@ -1,18 +1,30 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.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) {
         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";
     }
     /**
@@ -36,6 +48,6 @@ const DuetBadge = class {
     }
     get element() { return getElement(this); }
 };
-DuetBadge.style = DuetBadgeStyle0;
+DuetBadge.style = duetBadgeCss;
 
 export { DuetBadge as duet_badge };

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

@@ -1,12 +1,12 @@
 /*!
  * Built with Duet Design System
  */
-import { h, r as registerInstance, H as Host, g as getElement } from './index-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { h as hasSlot, c as checkNamedSlotElement } from './slot-utils-4096ff0d.js';
-import { p as parsePossibleJSON } from './string-utils-192eb3c8.js';
-import { g as getColorByName } from './token-utils-b9ba8c5e.js';
-import './tokens.module-2d02f5ff.js';
+import { h, r as registerInstance, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { h as hasSlot, c as checkNamedSlotElement } from './slot-utils-B1zQ6tzO.js';
+import { p as parsePossibleJSON } from './string-utils-C6E9F6QT.js';
+import { g as getColorByName } from './token-utils-D2bU4zM_.js';
+import './tokens.module-UQH7pb1d.js';
 
 const DuetPicture = ({ img, sources }) => {
     return (h("picture", null,
@@ -16,11 +16,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) {
         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") {
@@ -50,18 +90,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.
@@ -105,10 +133,10 @@ const DuetBanner = class {
                 "size-medium": this.size === "medium" || this.size === "large",
                 "size-large": this.size === "large",
                 "no-image": !this.image,
-            }, style: bannerStyles }, h("div", { key: '4213a9062ef79c32430faf2230b896cdcf686fab', class: "visual" }, h("div", { key: '28cc855a769f28823c4501268ac578dc00d177be', class: "image-container" }, this.image && h(DuetPicture, Object.assign({ key: 'ef1257956d87c2dd2e40a309d784cf92680ff193' }, pictureSource))), 1 > 2  , h("div", { key: 'c21b74c5b8af201787e8c502cab1fe5e7c6f11d5', style: bannerStyles, class: "brand-shape" })), h("div", { key: '8f2a9fa44b18a35442b056f6d52d73a3804dc536', class: "content" }, this.hasHeadingSlot && (h("div", { key: '7003386020f8944006ea5c7f8479aef1908f4773', class: "heading" }, 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 }, h("span", { key: 'b32d9f049c16b5521ad96d823c6d2325c6a80b98' }, h("slot", { key: '83c445eca1d63aa91847fbe090eb8afdaec130d7', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '2a885bb4ddd277b9a56e00addc82784c469dcdfa', class: "description", style: { color } }, h("slot", { key: 'f79f7fdb5137692c0ffa3fa2dd6044f9f5a1f799', name: "description" }))), this.hasActionSlot && (h("div", { key: '21306ab0e66e7a6c5830df04387c89af2b01cfe8', class: "action" }, h("slot", { key: '7f9c1b80831ae7e2baa3e89ff91bd2802b4c4fb9', name: "action" })))))));
+            }, style: bannerStyles }, h("div", { key: '4213a9062ef79c32430faf2230b896cdcf686fab', class: "visual" }, h("div", { key: '28cc855a769f28823c4501268ac578dc00d177be', class: "image-container" }, this.image && h(DuetPicture, Object.assign({ key: 'ef1257956d87c2dd2e40a309d784cf92680ff193' }, pictureSource))), 1 > 2, h("div", { key: 'c21b74c5b8af201787e8c502cab1fe5e7c6f11d5', style: bannerStyles, class: "brand-shape" })), h("div", { key: '8f2a9fa44b18a35442b056f6d52d73a3804dc536', class: "content" }, this.hasHeadingSlot && (h("div", { key: '7003386020f8944006ea5c7f8479aef1908f4773', class: "heading" }, 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 }, h("span", { key: 'b32d9f049c16b5521ad96d823c6d2325c6a80b98' }, h("slot", { key: '83c445eca1d63aa91847fbe090eb8afdaec130d7', name: "heading" }))))), this.hasDescriptionSlot && (h("div", { key: '2a885bb4ddd277b9a56e00addc82784c469dcdfa', class: "description", style: { color } }, h("slot", { key: 'f79f7fdb5137692c0ffa3fa2dd6044f9f5a1f799', name: "description" }))), this.hasActionSlot && (h("div", { key: '21306ab0e66e7a6c5830df04387c89af2b01cfe8', class: "action" }, h("slot", { key: '7f9c1b80831ae7e2baa3e89ff91bd2802b4c4fb9', name: "action" })))))));
     }
     get element() { return getElement(this); }
 };
-DuetBanner.style = DuetBannerStyle0;
+DuetBanner.style = duetBannerCss;
 
 export { DuetBanner as duet_banner };

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

@@ -1,16 +1,27 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-daf80d44.js';
-import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-40caac4f.js';
-import './string-utils-192eb3c8.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { g as getDefaultExportFromCjs } from './_commonjsHelpers-DvwKrUS6.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { s as subscribeTabbingChange, u as unsubscribeTabbingChange } from './keyboard-utils-Db8rvjPI.js';
+import { a as getLanguage, c as connectLanguageChangeObserver, d as disconnectLanguageChangeObserver, g as getLocaleString } from './language-utils-BxXgd2r7.js';
+import './string-utils-C6E9F6QT.js';
 
-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>"};
+var actionArrowRightSmall;
+var hasRequiredActionArrowRightSmall;
+
+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__*/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) {
@@ -20,13 +31,24 @@ const DuetBreadcrumb = class {
             sv: "disabled. Visa mer",
             en: "disabled. Nuvarande sida",
         };
-        this.hasSlottedContent = false;
+        /**
+         * Theme
+         */
         this.theme = "";
         this.language = 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.
@@ -49,7 +71,7 @@ const DuetBreadcrumb = class {
      */
     render() {
         var _a;
-        return (h(Host, { key: '599e50250a3ae11c1bd9a7b3e24b46856415f22e', role: "listitem" }, h("div", { key: '74e570c307d43b15ad28e812c1486e861f5c9736', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: '09e7700108b0d04c62c94e96921450c9913a9276', class: "duet-breadrumbs-arrow", size: "auto", icon: actionArrowRightSmall.svg, margin: "none", color: "currentColor" })), h("a", { key: 'd19cfbc2d29d02b4edc4a9303310df963d54c6df', class: {
+        return (h(Host, { key: '599e50250a3ae11c1bd9a7b3e24b46856415f22e', role: "listitem" }, h("div", { key: '74e570c307d43b15ad28e812c1486e861f5c9736', class: "container" }, this.icon === "arrow-right-small-icon" && (h("duet-icon", { key: '09e7700108b0d04c62c94e96921450c9913a9276', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), h("a", { key: 'd19cfbc2d29d02b4edc4a9303310df963d54c6df', class: {
                 "duet-breadcrumb": true,
                 "duet-theme-turva": this.theme === "turva",
             }, href: this.href ? this.href : undefined, "aria-label": `${!this.href ? `${getLocaleString(this.currentCrumb)} ` : ""}${(_a = this.accessibleLabel) !== null && _a !== void 0 ? _a : this.element.innerHTML}`, role: "link" }, this.icon !== "arrow-right-small-icon" &&
@@ -60,6 +82,6 @@ const DuetBreadcrumb = class {
     }
     get element() { return getElement(this); }
 };
-DuetBreadcrumb.style = DuetBreadcrumbStyle0;
+DuetBreadcrumb.style = duetBreadcrumbCss;
 
 export { DuetBreadcrumb as duet_breadcrumb };

package/lib/esm/duet-breadcrumbs.entry.js

@@ -1,15 +1,14 @@
 /*!
  * Built with Duet Design System
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-a830b2de.js';
-import { i as inheritGlobalTheme } from './themeable-component-860041c5.js';
-import { g as getLocaleString } from './language-utils-40caac4f.js';
-import { g as getColorByName } from './token-utils-b9ba8c5e.js';
-import './string-utils-192eb3c8.js';
-import './tokens.module-2d02f5ff.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-BGuG-JHD.js';
+import { i as inheritGlobalTheme } from './themeable-component-WhCDf9tt.js';
+import { g as getLocaleString } from './language-utils-BxXgd2r7.js';
+import { g as getColorByName } from './token-utils-D2bU4zM_.js';
+import './string-utils-C6E9F6QT.js';
+import './tokens.module-UQH7pb1d.js';
 
 const duetBreadcrumbsCss = "*,*::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%}::slotted(*){font-weight:400}::slotted(:last-child){font-weight:600}:host([variation=plain]) ::slotted(:last-child){font-weight:400}.duet-breadcrumbs{position:relative;display:flex;align-items:center;justify-content:center;font-family:\"localtapiola-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"}.duet-breadcrumbs .container{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1384px;min-height:36px;margin:0 28px}.duet-breadcrumbs .list{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-start;padding:10px 0;color:inherit;list-style:none}.duet-breadcrumbs .bottom-border{position:absolute;bottom:0;display:none;width:100%;height:1px}.duet-breadcrumbs.header{color:rgb(8, 42, 77);background:rgb(240, 247, 250)}.duet-breadcrumbs.header .list duet-breadcrumb[href]:hover{color:rgb(0, 75, 129)}.duet-breadcrumbs.header .bottom-border--nav{display:block;background:rgb(212, 223, 229)}.duet-breadcrumbs.header.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 247, 250)}.duet-breadcrumbs.header.duet-theme-turva ol duet-breadcrumb[href]:hover{color:rgb(126, 2, 35)}.duet-breadcrumbs.footer{color:rgb(255, 255, 255);background:rgb(8, 42, 77)}@media (min-width: 64.0625em){.duet-breadcrumbs.footer{justify-content:flex-start}}@media (min-width: 76.25em){.duet-breadcrumbs.footer{justify-content:center}}.duet-breadcrumbs.footer .container{max-width:1110px}@media (min-width: 62em){.duet-breadcrumbs.footer .container{margin:0 72px 0 48px}}.duet-breadcrumbs.footer .list{padding:20px 0}@media (min-width: 62em){.duet-breadcrumbs.footer .list{padding:20px 8px}}.duet-breadcrumbs.footer .list duet-breadcrumb[href]:hover{text-decoration:underline}.duet-breadcrumbs.footer .bottom-border--container{display:block;background:rgba(255, 255, 255, 0.2)}.duet-breadcrumbs.footer.duet-theme-turva{color:rgb(255, 255, 255);background:rgb(198, 12, 48)}.duet-breadcrumbs.plain .container{max-width:none;min-height:auto;margin:0}.duet-breadcrumbs.plain .list{padding:0}.duet-breadcrumbs.plain .bottom-border{display:none}";
-const DuetBreadcrumbsStyle0 = duetBreadcrumbsCss;
 
 const DuetBreadcrumbs = class {
     constructor(hostRef) {
@@ -20,9 +19,18 @@ const DuetBreadcrumbs = class {
             sv: "Ströbröd",
             en: "Breadcrumbs",
         });
-        this.children = undefined;
+        /**
+         * Theme
+         */
         this.theme = "";
+        /**
+         * Variation
+         */
         this.variation = "header";
+        /**
+         * Custom color to be used for text, as a design token entered in camelCase or kebab-case.
+         * Example: "color-primary".
+         */
         this.color = "";
     }
     /**
@@ -62,6 +70,6 @@ const DuetBreadcrumbs = class {
     }
     get element() { return getElement(this); }
 };
-DuetBreadcrumbs.style = DuetBreadcrumbsStyle0;
+DuetBreadcrumbs.style = duetBreadcrumbsCss;
 
 export { DuetBreadcrumbs as duet_breadcrumbs };