@duetds/components 10.0.0-alpha.9 → 10.1.0

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

@@ -3,14 +3,12 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-7b1d76ef.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const slotUtils = require('./slot-utils-7e6aa48b.js');
-const stringUtils = require('./string-utils-7b13c16e.js');
-const tokenUtils = require('./token-utils-5000595c.js');
-require('./tokens.module-7c947029.js');
+var index = require('./index-blgG8IJB.js');
+var themeableComponent = require('./themeable-component-DcR7DztR.js');
+var slotUtils = require('./slot-utils-Byx247xX.js');
+var stringUtils = require('./string-utils-B35hEUBv.js');
+var tokenUtils = require('./token-utils-BJtlJxnJ.js');
+require('./tokens.module-DJt2h4FX.js');
 
 const DuetPicture = ({ img, sources }) => {
     return (index.h("picture", null,
@@ -19,12 +17,52 @@ const DuetPicture = ({ img, sources }) => {
         index.h("img", Object.assign({}, img))));
 };
 
-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 duetBannerCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  border: 0;\n}\n\n:host {\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n  background: transparent;\n  border: 0;\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[alignment=form-distribute] > :host:last-of-type:not(:last-child) {\n  margin-right: 36px !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}\n@container duet-banner-container (min-width: 0) {\n  .duet-banner .visual {\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  transform: scale(101%);\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-grow: 1;\n  flex-direction: column;\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@container duet-banner-container (min-width: 486px) {\n  .duet-banner.size-medium, .duet-banner.size-large {\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 .visual .brand-shape, .duet-banner.size-large .visual .brand-shape {\n    left: 80%;\n  }\n}\n@container duet-banner-container (min-width: 900px) {\n  .duet-banner.size-large {\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@container duet-banner-container (min-width: 486px) {\n  .duet-banner.no-image.size-medium, .duet-banner.no-image.size-large {\n    padding: 48px;\n  }\n}\n\n:host(.duet-theme-turva2) .duet-banner {\n  border-radius: 12px;\n}\n:host(.duet-theme-turva2) .duet-banner .visual .brand-shape {\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: block;\n  mask-image: url(\"data:image/svg+xml,%3Csvg%20width%3D%22540%22%20height%3D%2258%22%20viewBox%3D%220%200%20540%2058%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M540%2018.0729L540%2057.6749H0L0.000139455%2011.2563C0.000139455%202.85822%208.31858%20-2.59156%2015.3307%201.26796C33.6821%2011.3367%2055.6983%2020.0831%2080.3633%2027.3465C134.438%2043.276%20201.239%2052.0939%20270%2052.0939C338.761%2052.0939%20405.572%2043.276%20459.637%2027.3465C484.302%2020.0742%20506.318%2011.3277%20524.669%201.25902C531.682%20-2.59156%20540%202.85822%20540%2011.2563V18.0729Z%22%20fill%3D%22%23FBEBE1%22%2F%3E%0A%3C%2Fsvg%3E%0A\");\n  mask-repeat: no-repeat;\n  mask-position: bottom;\n  mask-size: contain;\n  scale: 101%;\n}\n:host(.duet-theme-turva2) .duet-banner.size-medium .visual, :host(.duet-theme-turva2) .duet-banner.size-large .visual {\n  border-top-left-radius: 8px;\n  border-top-right-radius: 8px;\n}\n@container duet-banner-container (min-width: 486px) {\n  :host(.duet-theme-turva2) .duet-banner.size-medium, :host(.duet-theme-turva2) .duet-banner.size-large {\n    grid-template-columns: 1fr 1fr;\n    gap: 28px;\n    border-radius: 12px;\n  }\n  :host(.duet-theme-turva2) .duet-banner.size-medium .visual, :host(.duet-theme-turva2) .duet-banner.size-large .visual {\n    border-top-left-radius: 12px;\n    border-top-right-radius: 0;\n    border-bottom-left-radius: 12px;\n  }\n  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .image-container, :host(.duet-theme-turva2) .duet-banner.size-large .visual .image-container {\n    padding: 20px;\n    padding-right: 0;\n  }\n  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .image, :host(.duet-theme-turva2) .duet-banner.size-large .visual .image {\n    border-radius: 12px;\n  }\n  :host(.duet-theme-turva2) .duet-banner.size-medium .visual .brand-shape, :host(.duet-theme-turva2) .duet-banner.size-large .visual .brand-shape {\n    display: none;\n  }\n}";
 
 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,18 @@ 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";
+        this.isTurva2 = () => { var _a; return (_a = document.documentElement.attributes.getNamedItem("class")) === null || _a === void 0 ? void 0 : _a.value.includes("duet-theme-turva2"); };
+        this.getBackgroundColor = () => {
+            if (this.theme === "turva" && this.backgroundColor === "primary-lighter") {
+                if (this.isTurva2()) {
+                    return tokenUtils.getColorByName("turva-nude-50", this.theme);
+                }
+                else {
+                    return tokenUtils.getColorByName("gray-lighter", this.theme);
+                }
+            }
+            return tokenUtils.getColorByName(this.backgroundColor, this.theme);
+        };
     }
     /**
      * Component lifecycle events.
@@ -92,27 +130,32 @@ const DuetBanner = class {
      * Always the last one of the class.
      */
     render() {
-        const backgroundColorTemp = this.theme === "turva" && this.backgroundColor === "primary-lighter" ? "gray-lighter" : this.backgroundColor;
-        const backgroundColor = tokenUtils.getColorByName(backgroundColorTemp, this.theme);
+        const backgroundColor = this.getBackgroundColor();
         const color = tokenUtils.getColorByName(this.textColor, this.theme);
         const bannerStyles = {
             backgroundColor,
         };
         const pictureSource = {
-            img: { src: this.image, alt: "", loading: "lazy", class: "image", role: "presentation" },
+            img: {
+                src: this.image,
+                alt: this.imageAlt || "",
+                loading: "lazy",
+                class: "image",
+                role: this.imageAlt ? undefined : "presentation",
+            },
             sources: stringUtils.parsePossibleJSON(this.sources),
         };
-        return (index.h(index.Host, { key: 'b8716b8067524ae7e4c29e56cdc37d6219c7743a', class: { "duet-m-0": this.margin === "none" } }, index.h("aside", { key: '7c4b420d5a203fa5066f4a71a801c9fc288e179c', class: {
+        return (index.h(index.Host, { key: '38f57d004daf85f022fb1e8289a00d63dbe78a31', class: { "duet-m-0": this.margin === "none" } }, index.h("aside", { key: '0667b2510bdf502f24178e226897239cc0905843', class: {
                 "duet-banner": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.currentSize]: true,
                 "size-medium": this.size === "medium" || this.size === "large",
                 "size-large": this.size === "large",
                 "no-image": !this.image,
-            }, style: bannerStyles }, index.h("div", { key: 'dd84b698336d0c159b692bde709c6f10bfe414bf', class: "visual" }, index.h("div", { key: 'c92d3fdabc120fa760c30ae44e90a29439817940', class: "image-container" }, this.image && index.h(DuetPicture, Object.assign({ key: 'bab1712aa5f1ab77a6c96babc607a9a9d4359dd2' }, pictureSource))), 1 > 2  , index.h("div", { key: '411fc99b5c017a4b89f4aa375d6725e9e85314e6', style: bannerStyles, class: "brand-shape" })), index.h("div", { key: '6ba154b92216b98f00b33d740175760049157d14', class: "content" }, this.hasHeadingSlot && (index.h("div", { key: 'ba3ab430999ab6f0823ab957b06bcc4077799c5a', class: "heading" }, index.h("duet-heading", { key: '256ed05f27e6c6c3ec987d4039d6a7caf713458b', 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: '197dbc447ca8910b13c8317cd00507e034e84e6f' }, index.h("slot", { key: 'cba3fcc030b0412d981e7cc94626e90aa628cb25', name: "heading" }))))), this.hasDescriptionSlot && (index.h("div", { key: 'dbcc6142fe33db74bccac1d54a1fe2a8e8ccc064', class: "description", style: { color } }, index.h("slot", { key: '1806ab5f5be1ee076c3978f1fcb676cef6b62893', name: "description" }))), this.hasActionSlot && (index.h("div", { key: 'bf9fd56968048a53d15cc1849c2a3b4619851c49', class: "action" }, index.h("slot", { key: '367d2a86cb83fe2d2bdb91ae1e133453e35ce895', name: "action" })))))));
+            }, style: bannerStyles }, index.h("div", { key: 'b7266d2d9986afecfc9fa233950090500ac811b4', class: "visual" }, index.h("div", { key: 'a3b71e01ad58dd30a19413c2daad81fc0e5f617d', class: "image-container" }, this.image && index.h(DuetPicture, Object.assign({ key: '8f687c33222c1f483c4354506729bd508c784f0f' }, pictureSource))), 1 > 2, index.h("div", { key: 'cab35290e96c82eaee8605e89646a239de7396b0', style: bannerStyles, class: "brand-shape" })), index.h("div", { key: 'b05d73b8fa653e30db6e5310c017b2890ba0d572', class: "content" }, this.hasHeadingSlot && (index.h("div", { key: 'b5cb84dbabf050477d224f323b18b25d26e65a42', class: "heading" }, index.h("duet-heading", { key: '581d34f383f4679e06407583eadeacc0e2f651b4', theme: this.theme, level: this.headingLevel, "visual-level": this.currentSize === "large" ? "h2" : "h3", "fixed-size": true, margin: "none", color: tokenUtils.postfixTheme(this.textColor, this.theme) }, index.h("span", { key: '285c1d82691487108eb3e52c8df65eb495b803dc' }, index.h("slot", { key: 'ba3c94dfe9dfc6900d41fe31ecd716e4c08bbaaa', name: "heading" }))))), this.hasDescriptionSlot && (index.h("div", { key: 'f9d06d854f0dab9e11c1945436eca5757696818d', class: "description", style: { color } }, index.h("slot", { key: '72d05e038ee1a75f3c2ff6d353c0cc7891f00e06', name: "description" }))), this.hasActionSlot && (index.h("div", { key: '6f27c979244fd9093fbe55d3fb375f7b6c18711c', class: "action" }, index.h("slot", { key: '82532736b2e53a5020afc769526a0b824716cd66', 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,34 +3,46 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-blgG8IJB.js');
+var _commonjsHelpers = require('./_commonjsHelpers-4N64IRaP.js');
+var themeableComponent = require('./themeable-component-DcR7DztR.js');
+var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
 
-const index = require('./index-7b1d76ef.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const keyboardUtils = require('./keyboard-utils-f7c9f980.js');
-const languageUtils = require('./language-utils-a6a152b8.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;
+}
 
-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;
+var actionArrowRightSmallExports = requireActionArrowRightSmall();
+var arrowRightSmallIcon = /*@__PURE__*/_commonjsHelpers.getDefaultExportFromCjs(actionArrowRightSmallExports);
+
+const duetBreadcrumbCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;display:list-item;width:auto}.container{display:flex;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%;padding:10px 8px;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{outline:2px solid;outline-offset:2px;outline-color:rgba(0, 119, 179, 0.8)}.duet-theme-turva :host(.user-is-tabbing) .duet-breadcrumb:focus,:host(.user-is-tabbing) .duet-breadcrumb:focus.duet-theme-turva,.duet-theme-turva2 :host(.user-is-tabbing) .duet-breadcrumb:focus,:host(.user-is-tabbing) .duet-breadcrumb:focus.duet-theme-turva2{outline-color:rgba(53, 79, 101, 0.8)}";
 
 const DuetBreadcrumb = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.currentCrumb = {
-            fi: "disabled. Nykyinen sivu",
-            sv: "disabled. Visa mer",
-            en: "disabled. Nuvarande sida",
-        };
-        this.hasSlottedContent = false;
+        /**
+         * Theme
+         */
         this.theme = "";
-        this.language = languageUtils.getLanguage();
+        /**
+         * Href for the link. Should be left empty for the last item, which should be the current page.
+         */
         this.href = "";
+        /**
+         * Icon
+         */
         this.icon = "arrow-right-small-icon";
+        /**
+         * Icon size
+         */
         this.iconSize = "x-small";
-        this.accessibleLabel = undefined;
+        this.hasSlottedContent = false;
     }
     /**
      * Component lifecycle events.
@@ -39,12 +51,10 @@ const DuetBreadcrumb = class {
         themeableComponent.inheritGlobalTheme(this);
     }
     connectedCallback() {
-        languageUtils.connectLanguageChangeObserver(this);
         keyboardUtils.subscribeTabbingChange(this);
         this.hasSlottedContent = Array.from(this.element.childNodes).length > 0;
     }
     disconnectedCallback() {
-        languageUtils.disconnectLanguageChangeObserver(this);
         keyboardUtils.unsubscribeTabbingChange(this);
     }
     /**
@@ -52,18 +62,19 @@ const DuetBreadcrumb = class {
      * Always the last one in the class.
      */
     render() {
-        var _a;
-        return (index.h(index.Host, { key: '0e1297a62e328428c8f4c499846a70dbd020b3f6', role: "listitem" }, index.h("div", { key: 'f643fa524435dae01589d0763da39b4ad6a1fc00', class: "container" }, this.icon === "arrow-right-small-icon" && (index.h("duet-icon", { key: 'f78e03bceb9247e063306cd720c3e930931a0af3', class: "duet-breadrumbs-arrow", size: "auto", icon: actionArrowRightSmall.svg, margin: "none", color: "currentColor" })), index.h("a", { key: '25544b3ce62ed9faa24fd785b792a4a1126ae88a', class: {
+        const Tag = this.href ? "a" : "span";
+        return (index.h(index.Host, { key: 'bee5edcaaa257aef537393e9620b269c242dff1d', role: "listitem" }, index.h("div", { key: 'fe46fa6ccf1f40968db1b82d27b11c5a5a450594', class: "container" }, this.icon === "arrow-right-small-icon" && (index.h("duet-icon", { key: '0f01a2a92376855fc341815886b031498a5085fd', class: "duet-breadrumbs-arrow", size: "auto", icon: arrowRightSmallIcon.svg, margin: "none", color: "currentColor" })), index.h(Tag, { key: 'cffeeca1d48de91945115a38bfcb1ae5efe702db', 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" &&
+                "icon-only": this.icon && !this.hasSlottedContent,
+            }, href: this.href || undefined, "aria-label": this.accessibleLabel || this.element.textContent, "aria-current": this.href ? undefined : "page" }, this.icon !== "arrow-right-small-icon" &&
             this.icon && [
-            index.h("duet-icon", { key: '4dcbabcd08a77ec90e06ad7e7702bf59e5529bf5', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
-            this.hasSlottedContent && index.h("duet-spacer", { key: '622bc645de5061c411a11f54ec14461af07f3a12', size: "x-small", direction: "horizontal" }),
-        ], index.h("slot", { key: '83eee004dde5a3da67516903c1019eb1b1dec620' })))));
+            index.h("duet-icon", { key: 'ee27c63d28c4c9187a8242a811532322749f94fd', size: this.iconSize, name: this.icon, margin: "none", color: "currentColor" }),
+            this.hasSlottedContent && index.h("duet-spacer", { key: 'e0a220aa059a782dc8716f9fcda3e945bc048f40', size: "x-small", direction: "horizontal" }),
+        ], index.h("slot", { key: '86454db36ecfe921c4b1719f1d9b7807da79a272' })))));
     }
     get element() { return index.getElement(this); }
 };
-DuetBreadcrumb.style = DuetBreadcrumbStyle0;
+DuetBreadcrumb.style = duetBreadcrumbCss;
 
 exports.duet_breadcrumb = DuetBreadcrumb;

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

@@ -3,17 +3,14 @@
  */
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-blgG8IJB.js');
+var themeableComponent = require('./themeable-component-DcR7DztR.js');
+var languageUtils = require('./language-utils-DWW8tvkB.js');
+var tokenUtils = require('./token-utils-BJtlJxnJ.js');
+require('./string-utils-B35hEUBv.js');
+require('./tokens.module-DJt2h4FX.js');
 
-const index = require('./index-7b1d76ef.js');
-const themeableComponent = require('./themeable-component-996b489c.js');
-const languageUtils = require('./language-utils-a6a152b8.js');
-const tokenUtils = require('./token-utils-5000595c.js');
-require('./string-utils-7b13c16e.js');
-require('./tokens.module-7c947029.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 duetBreadcrumbsCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0}:host{box-sizing:border-box;padding:0;margin:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0;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;z-index:1;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 0 20px}.duet-breadcrumbs .list{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;align-items:center;justify-content:flex-start;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}:host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.header{color:rgb(23, 42, 59);background:rgb(253, 247, 242)}:host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.header ol duet-breadcrumb[href]:hover{color:rgb(126, 2, 35)}:host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.footer{background:rgb(230, 23, 64)}";
 
 const DuetBreadcrumbs = class {
     constructor(hostRef) {
@@ -24,9 +21,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 = "";
     }
     /**
@@ -58,14 +64,14 @@ const DuetBreadcrumbs = class {
      */
     render() {
         const color = tokenUtils.getColorByName(this.color);
-        return (index.h(index.Host, { key: 'c0b1e8c78d0744f5c809583855dc93aa24996f2a' }, index.h("nav", { key: '43f9aaea1114c5dd3ccf669fd6b0e757345b27eb', "aria-label": this.breadcrumbsAriaLabel, class: {
+        return (index.h(index.Host, { key: '36f67b82a722d5c4017bb4cec37fd7149572d264' }, index.h("nav", { key: 'f8fe3f4e521969a60d9428a354a88152171613ec', "aria-label": this.breadcrumbsAriaLabel, class: {
                 "duet-breadcrumbs": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.variation]: true,
-            } }, index.h("div", { key: '96e61856bbf06a8ed5c3c693bf53c15dc3aa340d', class: "container" }, index.h("div", { key: '414388159558cdb6b2f47ae096590165d65e01df', role: "list", class: "list", style: { color } }, index.h("slot", { key: 'cecb69a54afc0a093bf4f7ca38724d8d15d2751d' })), index.h("div", { key: '6a924f55a0c2d36033df4a532bb5429d6385d35a', class: "bottom-border bottom-border--container" })), index.h("div", { key: '00bb27276633fa524c2d74812968048ff98770b0', class: "bottom-border bottom-border--nav" }))));
+            } }, index.h("div", { key: '78f711e9262e47c989705552d2ab75e65ae17fbe', class: "container" }, index.h("div", { key: 'bfc70b5d984cc57ef2591f4a3ecf452db9ae0ed6', role: "list", class: "list", style: { color } }, index.h("slot", { key: '96e85ea897f84aef0111f41d1e91ac2a263e8d66' })), index.h("div", { key: 'b99f56d5dba834d934872b86fcb8e46205ae3084', class: "bottom-border bottom-border--container" })), index.h("div", { key: '1d96cf880260a6fa1fb39cbc0e76e7b5df8f208c', class: "bottom-border bottom-border--nav" }))));
     }
     get element() { return index.getElement(this); }
 };
-DuetBreadcrumbs.style = DuetBreadcrumbsStyle0;
+DuetBreadcrumbs.style = duetBreadcrumbsCss;
 
 exports.duet_breadcrumbs = DuetBreadcrumbs;