@duetds/components 9.17.0 → 9.19.0

package/lib/collection/components/duet-logo/duet-logo.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   margin-right: 8px !important;
   display: inline-block;
   width: auto;
@@ -28,6 +28,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type {
+  margin-right: 8px !important;
+}
 
 :host(.duet-m-0) {
   margin: 0 !important;
@@ -42,11 +45,14 @@
   border-radius: 4px;
 }
 .duet-logo:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-logo:focus, .duet-logo:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-logo:focus, .duet-logo:focus.duet-theme-turva, .duet-theme-turva2 .duet-logo:focus, .duet-logo:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-logo.duet-logo-en {
   width: 166px;
@@ -58,6 +64,11 @@
   width: 110px;
   height: 40px;
 }
+.duet-logo.duet-logo-inverse:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgb(255, 255, 255);
+}
 .duet-logo svg {
   display: block;
   width: 100%;

package/lib/collection/components/duet-logo/duet-logo.js

@@ -118,9 +118,10 @@ export class DuetLogo {
      */
     render() {
         const TagName = this.href ? "a" : "div";
-        return (h(Host, { key: '1e410097f84415333adc03b3ce6c3e9ea7577395', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: '955051b9c078a75dc74f4e2557b59e274eaac1de', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
+        return (h(Host, { key: '1e410097f84415333adc03b3ce6c3e9ea7577395', class: { "duet-m-0": this.margin === "none" } }, h(TagName, { key: 'ccbd4f5f03fd180664ace0e8b217e613bee20cdc', href: this.href, ref: link => (this.nativeLink = link), "aria-label": this.accessibleLabel, class: {
                 "duet-logo": true,
                 [this.size]: true,
+                "duet-logo-inverse": this.inverse,
                 "duet-logo-only-symbol": this.onlySymbol,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-logo-en": this.language === "en",

package/lib/collection/components/duet-menu-bar/duet-menu-bar.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   position: relative;
   width: 100%;
   pointer-events: none;
@@ -180,8 +180,8 @@
   height: 100%;
 }
 .duet-menu-bar .container > :first-child {
-  flex-basis: 0;
   flex-grow: 1;
+  flex-basis: 0;
   justify-content: flex-start;
   width: auto;
   height: 40px;
@@ -198,8 +198,8 @@
   max-height: 100%;
 }
 .duet-menu-bar .container > :last-child {
-  flex-basis: 0;
   flex-grow: 1;
+  flex-basis: 0;
   justify-content: flex-end;
 }
 .duet-menu-bar .container ::slotted(*) {
@@ -213,16 +213,16 @@
   padding-left: 16px;
   margin-left: 16px;
   overflow: hidden;
+  text-overflow: ellipsis;
   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.875rem;
   font-style: normal;
   font-weight: 400;
   font-variant-numeric: tabular-nums;
-  -webkit-hyphens: auto;
-  hyphens: auto;
   line-height: 1.1;
   color: rgb(62, 84, 102);
-  text-overflow: ellipsis;
+  -webkit-hyphens: auto;
+  hyphens: auto;
   border-left: 1px solid rgb(212, 223, 229);
 }
 .duet-menu-bar .container .duet-logo-info-text.duet-theme-turva {
@@ -294,12 +294,12 @@
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .center {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .right {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-logo-info-text {
-  color: #354f65;
-  border-left-color: #d4dde2;
+  color: rgb(53, 79, 101);
+  border-left-color: rgb(212, 221, 226);
 }

package/lib/collection/components/duet-menu-bar-button/duet-menu-bar-button.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   height: 100%;
 }
 
@@ -39,11 +39,14 @@
   cursor: pointer;
 }
 .duet-menu-bar-button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-menu-bar-button:focus, .duet-menu-bar-button:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-menu-bar-button:focus, .duet-menu-bar-button:focus.duet-theme-turva, .duet-theme-turva2 .duet-menu-bar-button:focus, .duet-menu-bar-button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-menu-bar-button .menu-bar-button-icon {
   width: 20px;
@@ -79,6 +82,6 @@
 
 @media (min-width: 62em) {
   :host(.duet-theme-turva2) .duet-menu-bar-button.duet-theme-turva:hover {
-    color: #e61740;
+    color: rgb(230, 23, 64);
   }
 }

package/lib/collection/components/duet-menu-bar-dropdown/duet-menu-bar-dropdown.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   height: 100%;
 }
 
@@ -55,6 +55,16 @@
   text-decoration: none;
   cursor: pointer;
 }
+.duet-menu-bar-dropdown button:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-menu-bar-dropdown button:focus, .duet-menu-bar-dropdown button:focus.duet-theme-turva, .duet-theme-turva2 .duet-menu-bar-dropdown button:focus, .duet-menu-bar-dropdown button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
 @media (min-width: 62em) {
   .duet-menu-bar-dropdown button {
     padding: 0 16px;
@@ -68,10 +78,6 @@
 .duet-menu-bar-dropdown button:hover {
   color: rgb(0, 119, 179);
 }
-.duet-menu-bar-dropdown button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
-}
 .duet-menu-bar-dropdown button .label {
   display: flex;
   gap: 0.5rem;
@@ -97,8 +103,8 @@
   height: 2px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(2px);
+  transition: 300ms ease;
 }
 .duet-theme-turva .duet-menu-bar-dropdown button.active::after {
   background: rgb(198, 12, 48);
@@ -140,9 +146,6 @@
 .duet-menu-bar-dropdown.duet-theme-turva button:hover {
   color: rgb(198, 12, 48);
 }
-.duet-menu-bar-dropdown.duet-theme-turva button:focus {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
-}
 .duet-menu-bar-dropdown.duet-theme-turva button.active {
   color: rgb(198, 12, 48);
 }
@@ -154,14 +157,14 @@
 }
 
 :host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button:hover {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button.active {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-menu-bar-dropdown.duet-theme-turva button.active::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }

package/lib/collection/components/duet-menu-bar-dropdown-link/duet-menu-bar-dropdown-link.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   width: 100%;
   height: 100%;
 }
@@ -41,11 +41,14 @@
   text-decoration: none;
 }
 .duet-menu-bar-dropdown-link:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-menu-bar-dropdown-link:focus, .duet-menu-bar-dropdown-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-menu-bar-dropdown-link:focus, .duet-menu-bar-dropdown-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-menu-bar-dropdown-link:focus, .duet-menu-bar-dropdown-link:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-menu-bar-dropdown-link.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";
@@ -59,8 +62,8 @@
 }
 
 :host(.duet-theme-turva2) .duet-menu-bar-dropdown-link.duet-theme-turva {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-menu-bar-dropdown-link.duet-theme-turva:hover {
-  background: #fbebe1;
+  background: rgb(251, 235, 225);
 }

package/lib/collection/components/duet-menu-bar-item/duet-menu-bar-item.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   height: 100%;
 }
 
@@ -36,16 +36,19 @@
   font-weight: inherit;
   color: inherit;
   text-align: center;
-  text-decoration: none;
   white-space: nowrap;
+  text-decoration: none;
   cursor: pointer;
 }
 .duet-menu-bar-item:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-menu-bar-item:focus, .duet-menu-bar-item:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-menu-bar-item:focus, .duet-menu-bar-item:focus.duet-theme-turva, .duet-theme-turva2 .duet-menu-bar-item:focus, .duet-menu-bar-item:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-menu-bar-item .leading-icon,
 .duet-menu-bar-item .trailing-icon {
@@ -103,8 +106,8 @@
   height: 1px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(2px);
+  transition: 300ms ease;
 }
 @media (min-width: 62em) {
   .duet-menu-bar-item.active::after {
@@ -128,16 +131,16 @@
 }
 
 :host(.duet-theme-turva2) .duet-menu-bar-item.duet-theme-turva[aria-expanded=true] {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-menu-bar-item.active.duet-theme-turva {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-menu-bar-item.active.duet-theme-turva::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 @media (min-width: 62em) {
   :host(.duet-theme-turva2) .duet-menu-bar-item.duet-theme-turva:hover {
-    color: #e61740;
+    color: rgb(230, 23, 64);
   }
 }

package/lib/collection/components/duet-menu-bar-link/duet-menu-bar-link.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   height: 100%;
 }
 
@@ -34,15 +34,18 @@
   font-family: "localtapiola-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   color: inherit;
   text-align: center;
-  text-decoration: none;
   white-space: nowrap;
+  text-decoration: none;
 }
 .duet-menu-bar-link:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-menu-bar-link:focus, .duet-menu-bar-link:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-menu-bar-link:focus, .duet-menu-bar-link:focus.duet-theme-turva, .duet-theme-turva2 .duet-menu-bar-link:focus, .duet-menu-bar-link:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: -4px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-menu-bar-link .menu-bar-link-icon {
   width: 20px;
@@ -81,8 +84,8 @@
   height: 1px;
   content: "";
   background: rgb(0, 119, 179);
-  transition: 300ms ease;
   transform: translateY(2px);
+  transition: 300ms ease;
 }
 @media (min-width: 62em) {
   .duet-menu-bar-link.active::after {
@@ -106,13 +109,13 @@
 }
 
 :host(.duet-theme-turva2) .duet-menu-bar-link.active.duet-theme-turva {
-  color: #e61740;
+  color: rgb(230, 23, 64);
 }
 :host(.duet-theme-turva2) .duet-menu-bar-link.active.duet-theme-turva::after {
-  background: #e61740;
+  background: rgb(230, 23, 64);
 }
 @media (min-width: 62em) {
   :host(.duet-theme-turva2) .duet-menu-bar-link.duet-theme-turva:hover {
-    color: #e61740;
+    color: rgb(230, 23, 64);
   }
 }

package/lib/collection/components/duet-modal/duet-modal.css

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 .duet-modal-container {
@@ -29,9 +29,9 @@
   bottom: 0;
   left: 0;
   z-index: 900;
+  visibility: hidden;
   max-height: 100vh;
   overflow-y: auto;
-  visibility: hidden;
   opacity: 0;
   transition: 300ms ease;
   transition-delay: 200ms;
@@ -121,9 +121,9 @@
   background: rgb(255, 255, 255);
   border-radius: 16px;
   opacity: 0;
+  transform: scale(0.96);
   transition: 300ms ease;
   transition-delay: 0ms;
-  transform: scale(0.96);
 }
 .duet-theme-turva .duet-modal {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -131,9 +131,9 @@
 }
 .duet-modal-active .duet-modal {
   opacity: 1;
+  transform: none;
   transition: 300ms ease;
   transition-delay: 200ms;
-  transform: none;
 }
 .duet-modal-active .duet-modal.slide-up {
   top: 0;
@@ -157,9 +157,9 @@
 .duet-modal.loader duet-paragraph.duet-loader-message {
   position: absolute;
   opacity: 0;
-  transition: all 300ms ease;
   transform: scaleY(0);
   transform-origin: top;
+  transition: all 300ms ease;
 }
 .duet-modal.loader duet-paragraph.duet-loader-message.show {
   opacity: 1;
@@ -301,6 +301,7 @@
   width: 100%;
   padding-right: 60px;
   overflow: hidden;
+  text-overflow: ellipsis;
   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: 1.25rem;
   font-style: normal;
@@ -308,10 +309,9 @@
   font-variant-numeric: tabular-nums;
   line-height: 1.25;
   color: rgb(8, 42, 77);
-  text-decoration: none;
-  text-overflow: ellipsis;
   letter-spacing: -0.01rem;
   white-space: nowrap;
+  text-decoration: none;
 }
 .duet-modal-heading.duet-p-0 {
   padding: 0 !important;
@@ -321,9 +321,9 @@
 }
 
 :host(.duet-theme-turva2) .duet-theme-turva .duet-modal {
-  color: #172a3b;
+  color: rgb(23, 42, 59);
 }
 :host(.duet-theme-turva2) .duet-theme-turva .duet-modal-sticky-header {
-  background: #fdf7f2;
-  border-bottom: 1px solid #d4dde2;
+  background: rgb(253, 247, 242);
+  border-bottom: 1px solid rgb(212, 221, 226);
 }

package/lib/collection/components/duet-modal/duet-modal.js

@@ -308,11 +308,11 @@ export class DuetModal {
                 "duet-modal-gutter-small": this.gutterSize === "small",
                 "duet-modal-gutter-medium": this.gutterSize === "medium",
                 "duet-modal-gutter-large": this.gutterSize === "large",
-            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: '579ba1b41caf40e97242aeacbf47ead29ea6aac7', class: "duet-modal-header" }, h("span", { key: '353ab4ce18f8cfaa384b7d1e02e5daf03895fc01', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'd1b1bd5e49db08393d62154e7a3524ea4bc5fc12', name: "top" })), this.icon && h("duet-icon", { key: '559c22da92b732cc829c9047bdc0c6b115058f32', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '4ffd1a28f6c1ec9a946b362f588e04350bab1dbd', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: '2c9b370fbf07ff1804bb2bb8590593dae83cc629', class: "duet-modal-spinner" }, h("duet-spinner", { key: '77c91d8fef8f52c65b5565388343bf0021529c1f', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: '3d4aa27f79ea4483c783d8f00f29663f0ff8cf0b', "aria-live": this.variation === "loader"
+            }, "aria-live": this.accessibleAnnounceChanges === "heading" ? "polite" : null, "aria-atomic": this.accessibleAnnounceChanges === "heading" ? "true" : null }, h("div", { key: '579ba1b41caf40e97242aeacbf47ead29ea6aac7', class: "duet-modal-header" }, h("span", { key: '353ab4ce18f8cfaa384b7d1e02e5daf03895fc01', class: "duet-modal-inner-slot-top" }, h("slot", { key: 'd1b1bd5e49db08393d62154e7a3524ea4bc5fc12', name: "top" })), this.icon && h("duet-icon", { key: '559c22da92b732cc829c9047bdc0c6b115058f32', name: this.icon, size: "xx-large", color: this.color || iconColor }), this.heading && (h("duet-heading", { key: '4ffd1a28f6c1ec9a946b362f588e04350bab1dbd', "visual-level": (_b = this.headingVisualLevel) !== null && _b !== void 0 ? _b : this.headingLevel, level: this.headingLevel, theme: this.theme }, this.heading))), this.variation === "loader" && (h("div", { key: '2c9b370fbf07ff1804bb2bb8590593dae83cc629', class: "duet-modal-spinner" }, h("duet-spinner", { key: '77c91d8fef8f52c65b5565388343bf0021529c1f', size: "large", color: postfixTheme("primary", this.theme) }))), h("div", { key: '0438008ab36af91adcbd0fa0cc1ad22980e086be', "aria-live": this.variation === "loader"
                 ? "assertive"
                 : this.accessibleAnnounceChanges === "body"
                     ? "polite"
-                    : null, "aria-atomic": this.accessibleAnnounceChanges === "body" ? "true" : null, class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el) }, h("slot", { key: 'c67bd34671197745eca7f15cc88c1d42b2e185c1' })))))));
+                    : null, "aria-atomic": this.accessibleAnnounceChanges === "body" ? "true" : null, class: "duet-modal-inner-slot-default", ref: el => (this.slotContainerEl = el) }, h("slot", { key: '2f174789d1cf40896384bc95dd6cece3f847ac00' })))))));
     }
     static get is() { return "duet-modal"; }
     static get encapsulation() { return "shadow"; }