@duetds/components 10.0.0-alpha.28 → 10.0.0-alpha.29

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

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-BkDTP7hm.js');
-var themeableComponent = require('./themeable-component-DvX_Xgrg.js');
+var index = require('./index-ULRMHMT6.js');
+var themeableComponent = require('./themeable-component-vXSpPXDS.js');
 var tokenUtils = require('./token-utils-b3aW02zZ.js');
 require('./tokens.module-7opSZfop.js');
 

package/lib/cjs/duet-editable-table_3.cjs.entry.js

@@ -3,16 +3,16 @@
  */
 'use strict';
 
-var index = require('./index-BkDTP7hm.js');
-var themeableComponent = require('./themeable-component-DvX_Xgrg.js');
+var index = require('./index-ULRMHMT6.js');
+var themeableComponent = require('./themeable-component-vXSpPXDS.js');
 var jsUtils = require('./js-utils-hJ4A2edy.js');
 var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
-var languageUtils = require('./language-utils-BxIeXBGy.js');
+var languageUtils = require('./language-utils-D_noDTNR.js');
 var tokens_module = require('./tokens.module-7opSZfop.js');
 var tokenUtils = require('./token-utils-b3aW02zZ.js');
 var createId = require('./create-id-DtslnIOq.js');
 var stringUtils = require('./string-utils-B35hEUBv.js');
-var errorcodes_utils = require('./errorcodes.utils-CvAMXZjl.js');
+var errorcodes_utils = require('./errorcodes.utils-CT287Ycp.js');
 
 //simple functional component that renders the data in the table
 const TableData = ({ data, groupId, alignment }, _children) => {
@@ -413,6 +413,7 @@ duet-table {
 .duet-table-sticky thead th {
   position: sticky;
   top: 0;
+  z-index: $z-index-sticky;
   background: ${tokens_module.colorGrayLightest};
 }
 

package/lib/cjs/duet-empty-state.cjs.entry.js

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-BkDTP7hm.js');
-var themeableComponent = require('./themeable-component-DvX_Xgrg.js');
+var index = require('./index-ULRMHMT6.js');
+var themeableComponent = require('./themeable-component-vXSpPXDS.js');
 
 const duetEmptyStateCss = "*,*::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%;height:100%}.duet-empty-state{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;width:100%;height:100%;padding:48px;color:rgb(8, 42, 77);text-align:center;background:rgb(245, 248, 250);border-radius:4px}.duet-empty-state.duet-theme-turva{color:rgb(23, 28, 58);background:rgb(245, 247, 250)}:host(.duet-theme-turva2) .duet-empty-state.duet-theme-turva{color:#172a3b;background:#f5f6f7}";
 

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

@@ -3,10 +3,10 @@
  */
 'use strict';
 
-var index = require('./index-BkDTP7hm.js');
-var themeableComponent = require('./themeable-component-DvX_Xgrg.js');
+var index = require('./index-ULRMHMT6.js');
+var themeableComponent = require('./themeable-component-vXSpPXDS.js');
 var createId = require('./create-id-DtslnIOq.js');
-var slotUtils = require('./slot-utils-F-Jmx-3a.js');
+var slotUtils = require('./slot-utils-CuWfl8gF.js');
 
 const duetFieldsetCss = "*,*::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-bottom:12px !important;display:block;width:100%}:host(.duet-m-0){margin:0 !important}fieldset{position:relative;width:100%;min-width:0;border:0}fieldset legend{position:absolute !important;top:0;width:1px !important;height:1px !important;padding:0 !important;overflow:hidden !important;clip:rect(1px, 1px, 1px, 1px) !important;border:0 !important}.duet-legend-wrapper{position:relative;display:block;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:600;line-height:1.5;color:rgb(8, 42, 77);text-align:left;background:transparent}.duet-legend-wrapper.duet-legend-compact:not(.duet-legend-has-caption){line-height:1.25}.duet-theme-turva .duet-legend-wrapper{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(23, 28, 58)}.duet-fieldset-label{margin-bottom:12px !important;margin-top:8px}.duet-legend-has-caption .duet-fieldset-label{margin-bottom:6px !important}.duet-legend-has-tooltip .duet-fieldset-label{padding-right:36px}@media (min-width: 48em){.duet-legend-has-tooltip .duet-fieldset-label{margin-bottom:3px !important;padding-right:0}}@media (min-width: 48em){.duet-legend-has-tooltip.duet-legend-has-caption .duet-fieldset-label{margin-bottom:-3px !important}}.duet-fieldset-caption{margin-bottom:12px !important}.duet-fieldset-help{display:block;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-weight:400;line-height:1.25;color:rgb(214, 28, 82);border-radius:4px}.duet-fieldset-help span{display:block;margin-top:12px}.duet-fieldset-help span.duet-m-0{margin-top:0}.duet-theme-turva .duet-fieldset-help{font-family:\"turva-sans\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";color:rgb(214, 28, 82)}::slotted(duet-tooltip){position:absolute;top:4px;right:0}@media (min-width: 48em){::slotted(duet-tooltip){position:relative;right:auto}}.duet-legend-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}:host(.duet-theme-turva2) .duet-theme-turva .duet-legend-wrapper{color:#172a3b}";
 
@@ -32,6 +32,10 @@ const DuetFieldset = class {
          * If caption is present, larger lineheight is used regardless of this prop.
          */
         this.compactLabel = false;
+        /**
+         * An error message to be shown next to the label.
+         */
+        this.error = "";
         /**
          * The aria-live attribute for the error message. When the input is validated on blur, use "off", as using "polite" or "assertive"
          * makes the screen reader read the error message twice. When the input is validated on submit, use "polite", as "off" would leave
@@ -73,20 +77,20 @@ const DuetFieldset = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '258a1f3685f4b3062dde173a5794b9b28c09907f', class: { "duet-m-0": this.margin === "none" } }, index.h("fieldset", { key: '2c02911b79dc15bab34df3f44a51422915f85512', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (index.h(index.Host, { key: 'e1a788de39eaef07a1abaa996870dd726b226aee', class: { "duet-m-0": this.margin === "none" } }, index.h("fieldset", { key: 'e7d2b6ecb24666f6a563d4923bb228bdf7e8820d', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
             // NVDA and VoiceOver do not yet support aria-errormessage
             // once they do, we can remove errors from the aria-describedby
             // aria-errormessage={this.error ? this.errorId : null}
             class: {
                 "duet-fieldset": true,
                 "duet-theme-turva": this.theme === "turva",
-            } }, index.h("legend", { key: 'e8cc33c8ce84e853fc7c7346b530e2e6aaad3183', id: this.labelId }, index.h(this.labelHeadingLevel, { key: '67c582882054f866aeeb51fe1a3cd265fba86c3d' }, this.label), this.caption && index.h("span", { key: 'd7e7385c337f132b5f9c9a05fa1d0882059b5b4f' }, this.caption)), index.h("div", { key: '1bde79106ff72cb9a950abb9063c1f361ebc88b8', class: {
+            } }, index.h("legend", { key: '9412c1763b18075c6c6d585389c3ac9d22542f64', id: this.labelId }, index.h(this.labelHeadingLevel, { key: '9c1c5cfef779deef96e68e7f3760f0eeec8d347a' }, this.label), this.caption && index.h("span", { key: 'd166f280495ee9e156e705fe52455b18c5a13ea2' }, this.caption)), index.h("div", { key: 'e390d201c421bbd2086946b4548dc98d5c58fead', class: {
                 "duet-legend-wrapper": true,
                 "duet-legend-has-caption": !!this.caption,
                 "duet-legend-has-tooltip": this.hasTooltip,
                 "duet-legend-hidden": this.labelHidden,
                 "duet-legend-compact": this.compactLabel,
-            } }, index.h("div", { key: '5bdd5a1d10ec0ca02f0d663c4c0398cf4f15f912', class: "duet-fieldset-label" }, index.h("span", { key: '6da5eaba488e3691f1b3f5e4641b0043f7b264dc', "aria-hidden": "true" }, this.label), index.h("slot", { key: '8720d1bc6a9fd0b88a2e2f3ec04a783f33c25f8f', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (index.h("div", { key: 'f2701433f3204d8c606d025e2db9824f8975dd6b', class: "duet-fieldset-caption", "aria-hidden": "true" }, index.h("duet-caption", { key: 'edf83cd535f5139e64f86a962f9a247e33d9b3b1', theme: this.theme, margin: "none" }, this.caption)))), index.h("slot", { key: 'b8aa86236854c21d9662cf8bf46c70d5cf8c0d68' }), index.h("span", { key: 'b8877c8c9a710aa4b59d77ebd847ff3f13b57d6d', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && index.h("span", { key: 'b8781cebef3af6ea44dd2754ae2ae7c05f63b1f1', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
+            } }, index.h("div", { key: '10861fb7ec43cc4aec34ae9b04b1b191dd7a0d5c', class: "duet-fieldset-label" }, index.h("span", { key: '63b295dc887c75eb4bc062d214bb5b6a899e0f83', "aria-hidden": "true" }, this.label), index.h("slot", { key: 'dc154b5f9980e99c525884e32f7811e36fe634fc', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (index.h("div", { key: '1803a70997b3d2de928d501cfb86864bfa3af614', class: "duet-fieldset-caption", "aria-hidden": "true" }, index.h("duet-caption", { key: 'c574d64b9a375d0af50bc0bed35ea0418139f579', theme: this.theme, margin: "none" }, this.caption)))), index.h("slot", { key: '48665d8be4d66036d4d69090d7a98ee01f99dbac' }), index.h("span", { key: '9815f8bf073a39267673baf538de5908b52758e9', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && index.h("span", { key: '93bfa1f3fb33cf3bc23055948b416a18369b8497', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
     }
     get element() { return index.getElement(this); }
 };

package/lib/cjs/duet-file-chooser.cjs.entry.js

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-BkDTP7hm.js');
-var themeableComponent = require('./themeable-component-DvX_Xgrg.js');
+var index = require('./index-ULRMHMT6.js');
+var themeableComponent = require('./themeable-component-vXSpPXDS.js');
 
 const duetFileChooserCss = "*,*::after,*::before{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none}.container{display:flex;flex-direction:row;gap:8px;align-items:center}.container .label{margin-bottom:8px}";
 

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

@@ -3,13 +3,13 @@
  */
 'use strict';
 
-var index = require('./index-BkDTP7hm.js');
+var index = require('./index-ULRMHMT6.js');
 var actionNewWindowSmall = require('./action-new-window-small-BWlVx6YN.js');
 var commonStrings = require('./common-strings-CSqtNIxt.js');
-var themeableComponent = require('./themeable-component-DvX_Xgrg.js');
+var themeableComponent = require('./themeable-component-vXSpPXDS.js');
 var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
-var languageUtils = require('./language-utils-BxIeXBGy.js');
-var slotUtils = require('./slot-utils-F-Jmx-3a.js');
+var languageUtils = require('./language-utils-D_noDTNR.js');
+var slotUtils = require('./slot-utils-CuWfl8gF.js');
 var stringUtils = require('./string-utils-B35hEUBv.js');
 require('./_commonjsHelpers-4N64IRaP.js');
 

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

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-BkDTP7hm.js');
-var themeableComponent = require('./themeable-component-DvX_Xgrg.js');
+var index = require('./index-ULRMHMT6.js');
+var themeableComponent = require('./themeable-component-vXSpPXDS.js');
 
 const duetGridCss = ":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}\n\n:host(.duet-grid-variation-flex) {\n  display: flex !important;\n  flex-direction: column !important;\n  align-items: flex-start !important;\n  justify-content: flex-start !important;\n  width: 100%;\n  max-width: 100%;\n  height: auto;\n}\n\n:host(.duet-grid-variation-flex.duet-grid-breakpoint-x-small) {\n  flex-direction: row !important;\n}\n@media (max-width: 22.5em) {\n  :host(.duet-grid-variation-flex.duet-grid-breakpoint-x-small) {\n    flex-direction: column !important;\n  }\n}\n\n:host(.duet-grid-variation-flex.duet-grid-breakpoint-x-small.duet-grid-row-reverse) {\n  flex-direction: row-reverse !important;\n}\n\n@media (min-width: 36em) {\n  :host(.duet-grid-variation-flex.duet-grid-breakpoint-small) {\n    flex-direction: row !important;\n  }\n}\n\n@media (min-width: 36em) {\n  :host(.duet-grid-variation-flex.duet-grid-breakpoint-small.duet-grid-row-reverse) {\n    flex-direction: row-reverse !important;\n  }\n}\n\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-flex.duet-grid-breakpoint-medium) {\n    flex-direction: row !important;\n  }\n}\n\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-flex.duet-grid-breakpoint-medium.duet-grid-row-reverse) {\n    flex-direction: row-reverse !important;\n  }\n}\n\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-flex.duet-grid-breakpoint-large) {\n    flex-direction: row !important;\n  }\n}\n\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-flex.duet-grid-breakpoint-large.duet-grid-row-reverse) {\n    flex-direction: row-reverse !important;\n  }\n}\n\n@media (min-width: 64.0625em) {\n  :host(.duet-grid-variation-flex.duet-grid-breakpoint-x-large) {\n    flex-direction: row !important;\n  }\n}\n\n@media (min-width: 64.0625em) {\n  :host(.duet-grid-variation-flex.duet-grid-breakpoint-x-large.duet-grid-row-reverse) {\n    flex-direction: row-reverse !important;\n  }\n}\n\n:host(.duet-grid-variation-flex.duet-grid-wrap) {\n  flex-wrap: wrap !important;\n}\n\n:host(.duet-grid-variation-flex.duet-no-stacking) {\n  flex-direction: row !important;\n}\n\n:host(.duet-grid-variation-flex.duet-no-stacking.duet-grid-row-reverse) {\n  flex-direction: row-reverse !important;\n}\n\n:host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-small) {\n  flex-direction: column !important;\n}\n@media (max-width: 35.9375em) {\n  :host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-small) {\n    flex-direction: column !important;\n  }\n}\n\n:host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-small) {\n  flex-direction: column !important;\n}\n@media (min-width: 36em) {\n  :host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-small) {\n    flex-direction: column !important;\n  }\n}\n\n:host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-medium) {\n  flex-direction: column !important;\n}\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-medium) {\n    flex-direction: column !important;\n  }\n}\n\n:host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-large) {\n  flex-direction: column !important;\n}\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-large) {\n    flex-direction: column !important;\n  }\n}\n\n:host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-large) {\n  flex-direction: column !important;\n}\n@media (min-width: 64.0625em) {\n  :host(.duet-grid-variation-flex.duet-grid-direction-vertical.duet-grid-breakpoint-x-large) {\n    flex-direction: column !important;\n  }\n}\n\n:host(.duet-grid-variation-flex.duet-grid-align-top.duet-no-stacking) {\n  align-items: flex-start !important;\n}\n\n:host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-no-stacking) {\n  align-items: flex-end !important;\n}\n\n:host(.duet-grid-variation-flex.duet-grid-align-center.duet-no-stacking) {\n  align-items: center !important;\n}\n\n.duet-grid-align-stretch.duet-no-stacking {\n  align-items: stretch !important;\n}\n\n:host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-no-stacking) {\n  align-items: baseline !important;\n}\n\n:host(.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-x-small) {\n  align-items: flex-start !important;\n}\n\n:host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-x-small) {\n  align-items: flex-end !important;\n}\n\n:host(.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-x-small) {\n  align-items: center !important;\n}\n\n:host(.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-x-small) {\n  align-items: stretch !important;\n}\n\n:host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-x-small) {\n  align-items: baseline !important;\n}\n\n@media (min-width: 36em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-small) {\n    align-items: flex-start !important;\n  }\n}\n\n@media (min-width: 36em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-small) {\n    align-items: flex-end !important;\n  }\n}\n\n@media (min-width: 36em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-small) {\n    align-items: center !important;\n  }\n}\n\n@media (min-width: 36em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-small) {\n    align-items: stretch !important;\n  }\n}\n\n@media (min-width: 36em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-small) {\n    align-items: baseline !important;\n  }\n}\n\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-medium) {\n    align-items: flex-start !important;\n  }\n}\n\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-medium) {\n    align-items: flex-end !important;\n  }\n}\n\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-medium) {\n    align-items: center !important;\n  }\n}\n\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-medium) {\n    align-items: stretch !important;\n  }\n}\n\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-medium) {\n    align-items: baseline !important;\n  }\n}\n\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-large) {\n    align-items: flex-start !important;\n  }\n}\n\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-large) {\n    align-items: flex-end !important;\n  }\n}\n\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-large) {\n    align-items: center !important;\n  }\n}\n\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-large) {\n    align-items: stretch !important;\n  }\n}\n\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-large) {\n    align-items: baseline !important;\n  }\n}\n\n@media (min-width: 64.0625em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-top.duet-grid-breakpoint-x-large) {\n    align-items: flex-start !important;\n  }\n}\n\n@media (min-width: 64.0625em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-bottom.duet-grid-breakpoint-x-large) {\n    align-items: flex-end !important;\n  }\n}\n\n@media (min-width: 64.0625em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-center.duet-grid-breakpoint-x-large) {\n    align-items: center !important;\n  }\n}\n\n@media (min-width: 64.0625em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-stretch.duet-grid-breakpoint-x-large) {\n    align-items: stretch !important;\n  }\n}\n\n@media (min-width: 64.0625em) {\n  :host(.duet-grid-variation-flex.duet-grid-align-baseline.duet-grid-breakpoint-x-large) {\n    align-items: baseline !important;\n  }\n}\n\n:host(.duet-grid-variation-flex.duet-grid-distribution-left) {\n  justify-content: flex-start !important;\n}\n\n:host(.duet-grid-variation-flex.duet-grid-distribution-right) {\n  justify-content: flex-end !important;\n}\n\n:host(.duet-grid-variation-flex.duet-grid-distribution-center) {\n  justify-content: center !important;\n}\n\n:host(.duet-grid-variation-flex.duet-grid-distribution-between) {\n  justify-content: space-between !important;\n}\n\n:host(.duet-grid-variation-flex.duet-grid-distribution-around) {\n  justify-content: space-around !important;\n}\n\n:host(.duet-grid-variation-flex.duet-grid-distribution-evenly) {\n  justify-content: space-evenly !important;\n}\n\n@media (max-width: 35.9375em) {\n  :host(.duet-grid-variation-flex.duet-grid-mobile-left) {\n    align-items: flex-start !important;\n    justify-content: flex-start !important;\n    text-align: left !important;\n  }\n}\n\n@media (max-width: 35.9375em) {\n  :host(.duet-grid-variation-flex.duet-grid-mobile-center) {\n    align-items: center !important;\n    justify-content: center !important;\n    text-align: center !important;\n  }\n  :host(.duet-grid-variation-flex.duet-grid-mobile-center) * {\n    text-align: center !important;\n  }\n}\n\n@media (max-width: 35.9375em) {\n  :host(.duet-grid-variation-flex.duet-grid-mobile-right) {\n    align-items: flex-end !important;\n    justify-content: flex-end !important;\n    text-align: right !important;\n  }\n  :host(.duet-grid-variation-flex.duet-grid-mobile-right) * {\n    text-align: right !important;\n  }\n}\n\n:host(.duet-grid-variation-grid) {\n  display: grid;\n  grid-template-rows: repeat(1, 1fr);\n  grid-template-columns: repeat(4, minmax(0, 1fr));\n  gap: 16px;\n  align-items: flex-start;\n  justify-content: center;\n  padding: 0 20px;\n  container-type: inline-size;\n  overflow-x: clip;\n}\n@media (min-width: 36em) {\n  :host(.duet-grid-variation-grid) {\n    gap: 24px;\n    padding: 0 40px;\n  }\n}\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-grid) {\n    grid-template-columns: repeat(8, 55px);\n    gap: 24px 32px;\n    padding: 0;\n  }\n}\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-grid) {\n    grid-template-columns: repeat(12, minmax(0, 1fr));\n    padding: 0 64px;\n  }\n}\n@media (min-width: 76.25em) {\n  :host(.duet-grid-variation-grid) {\n    grid-template-columns: repeat(12, 55px);\n    gap: 40px;\n    padding: 0;\n  }\n}\n\n:host(.duet-grid-variation-grid.duet-grid-template-small) ::slotted(*) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-small) ::slotted(*) {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-small) ::slotted(*) {\n    grid-column: 3/span 8;\n  }\n}\n\n:host(.duet-grid-variation-grid.duet-grid-template-medium) ::slotted(*) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-medium) ::slotted(*) {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-medium) ::slotted(*) {\n    grid-column: 2/span 10;\n  }\n}\n\n:host(.duet-grid-variation-grid.duet-grid-template-large) ::slotted(*) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-large) ::slotted(*) {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-large) ::slotted(*) {\n    grid-column: 1/span 12;\n  }\n}\n\n:host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(odd)) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(odd)) {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(odd)) {\n    grid-column: 1/span 8;\n  }\n}\n:host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(even)) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(even)) {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-right) ::slotted(:nth-child(even)) {\n    grid-column: 9/span 4;\n  }\n}\n\n:host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(odd)) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(odd)) {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(odd)) {\n    grid-column: 1/span 4;\n  }\n}\n:host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(even)) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(even)) {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-sidebar-left) ::slotted(:nth-child(even)) {\n    grid-column: 5/span 8;\n  }\n}\n\n:host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(odd)) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(odd)) {\n    grid-column: 1/span 4;\n  }\n}\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(odd)) {\n    grid-column: 1/span 6;\n  }\n}\n:host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(even)) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(even)) {\n    grid-column: 5/span 4;\n  }\n}\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-two-columns) ::slotted(:nth-child(even)) {\n    grid-column: 7/span 6;\n  }\n}\n\n:host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+1)) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+1)) {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+1)) {\n    grid-column: 1/span 4;\n  }\n}\n:host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+2)) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+2)) {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+2)) {\n    grid-column: 5/span 4;\n  }\n}\n:host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+3)) {\n  grid-column: 1/span 4;\n}\n@media (min-width: 48em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+3)) {\n    grid-column: 1/span 8;\n  }\n}\n@media (min-width: 62em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-three-columns) ::slotted(:nth-child(3n+3)) {\n    grid-column: 9/span 4;\n  }\n}\n\n:host(.duet-grid-variation-grid.duet-grid-template-button-grid) {\n  grid-template-columns: minmax(0, 1fr);\n  gap: 12px;\n  padding: 0;\n  /* stylelint-disable */\n  /* stylelint-disable */\n}\n@media (min-width: 36em) {\n  :host(.duet-grid-variation-grid.duet-grid-template-button-grid) {\n    gap: 16px;\n  }\n}\n@container (min-width: 664px) {\n  :host(.duet-grid-variation-grid.duet-grid-template-button-grid) {\n    /* stylelint-enable */\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n@container (min-width: 1100px) {\n  :host(.duet-grid-variation-grid.duet-grid-template-button-grid) {\n    /* stylelint-enable */\n    grid-template-columns: repeat(3, minmax(0, 1fr));\n  }\n}";
 
@@ -32,9 +32,10 @@ const DuetGrid = class {
          */
         this.rowReverse = false;
         /**
-         * Adjusts the vertical alignment of the grid items, if set to "form_distribute"
+         * Adjusts the vertical alignment of the grid items, if set to "form-distribute"
          * the grid will try to calculate correct paddings for any duet-input fields inside duet-grid-items,
-         * so that they align even when displaying errors.
+         * so that they align even when displaying errors. Value "form_distribute" is deprecated, use
+         * "form-distribute" for new development.
          */
         this.alignment = "top";
         /**
@@ -50,6 +51,12 @@ const DuetGrid = class {
          */
         this.gridTemplate = null;
     }
+    validateAlignment(newValue) {
+        if (newValue === "form_distribute") {
+            console.warn(`DuetGrid alignment value "form_distribute" is deprecated, replace with "form-distribute"`);
+            this.alignment = "form-distribute";
+        }
+    }
     /**
      * Private functions
      */
@@ -76,10 +83,15 @@ const DuetGrid = class {
             this.childObserver.observe(this.element, { childList: true });
         }
         // the next two functions are used to watch for changes in the grid items, and are process intensive - so only run when needed
-        if (this.alignment === "form_distribute") {
+        if (this.alignment === "form-distribute") {
             {
                 this.formDistributeObserver = new MutationObserver(this.updateGridItemsWithInputFields.bind(this));
-                this.formDistributeObserver.observe(this.element, { subtree: true, childList: true, characterData: true });
+                this.formDistributeObserver.observe(this.element, {
+                    subtree: true,
+                    childList: true,
+                    characterData: true,
+                    attributeFilter: ["error"],
+                });
                 window.addEventListener("resize", this.debounceWindowResizeHandler);
             }
             this.updateGridItemsWithInputFields();
@@ -113,7 +125,7 @@ const DuetGrid = class {
         });
     }
     async updateGridItemsWithInputFields() {
-        // Duet components that need to taken into account in form_distribute
+        // Duet components that need to taken into account in form-distribute
         const elementNames = [
             "duet-button",
             "duet-checkbox",
@@ -190,11 +202,11 @@ const DuetGrid = class {
      * Always the last one in the class.
      */
     render() {
-        return (index.h(index.Host, { key: '2bb3d9243ec7a125fb661965f3cbaf286783b81d', class: {
+        return (index.h(index.Host, { key: '9212e2e0bff89f3625e4194c7c1ea2d8f71576c9', class: {
                 "duet-grid": true,
                 "duet-no-stacking": !this.responsive,
                 "duet-grid-align-top": this.alignment === "top", // flex-start
-                "duet-grid-align-bottom": this.alignment === "bottom" || this.alignment === "form_distribute", // flex-end
+                "duet-grid-align-bottom": this.alignment === "bottom" || this.alignment === "form-distribute", // flex-end
                 "duet-grid-align-center": this.alignment === "center", // center
                 "duet-grid-align-stretch": this.alignment === "stretch", // stretch
                 "duet-grid-align-baseline": this.alignment === "baseline", // baseline
@@ -217,10 +229,11 @@ const DuetGrid = class {
                 "duet-grid-row-reverse": this.rowReverse,
                 [`duet-grid-variation-${this.gridTemplate ? "grid" : "flex"}`]: true,
                 [`duet-grid-template-${this.gridTemplate}`]: true,
-            } }, index.h("slot", { key: 'c24fa9a1a433f68a451601ab0313149b4c2cd13d' })));
+            } }, index.h("slot", { key: '3b4490d66c0ad8256492ab43535a62150495ca41' })));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {
+        "alignment": ["validateAlignment"],
         "responsive": ["updateGridItems"],
         "breakpoint": ["updateGridItems"],
         "direction": ["updateGridItems"]

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

@@ -3,15 +3,15 @@
  */
 'use strict';
 
-var index = require('./index-BkDTP7hm.js');
+var index = require('./index-ULRMHMT6.js');
 var formSearch = require('./form-search-CzPfHB80.js');
 var _commonjsHelpers = require('./_commonjsHelpers-4N64IRaP.js');
 var tokens = require('./tokens-D7zqZKjQ.js');
 var bodyScrollLock_es6 = require('./bodyScrollLock.es6-B2sCDud5.js');
 var commonStrings = require('./common-strings-CSqtNIxt.js');
-var themeableComponent = require('./themeable-component-DvX_Xgrg.js');
+var themeableComponent = require('./themeable-component-vXSpPXDS.js');
 var keyboardUtils = require('./keyboard-utils-D9UlHbik.js');
-var languageUtils = require('./language-utils-BxIeXBGy.js');
+var languageUtils = require('./language-utils-D_noDTNR.js');
 var stringUtils = require('./string-utils-B35hEUBv.js');
 var tokenUtils = require('./token-utils-b3aW02zZ.js');
 var actionArrowDownSmall = require('./action-arrow-down-small-CDsSJFvZ.js');

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

@@ -3,12 +3,12 @@
  */
 'use strict';
 
-var index = require('./index-BkDTP7hm.js');
+var index = require('./index-ULRMHMT6.js');
 var actionNewWindowSmall = require('./action-new-window-small-BWlVx6YN.js');
 var commonStrings = require('./common-strings-CSqtNIxt.js');
-var themeableComponent = require('./themeable-component-DvX_Xgrg.js');
-var languageUtils = require('./language-utils-BxIeXBGy.js');
-var slotUtils = require('./slot-utils-F-Jmx-3a.js');
+var themeableComponent = require('./themeable-component-vXSpPXDS.js');
+var languageUtils = require('./language-utils-D_noDTNR.js');
+var slotUtils = require('./slot-utils-CuWfl8gF.js');
 var stringUtils = require('./string-utils-B35hEUBv.js');
 require('./_commonjsHelpers-4N64IRaP.js');
 
@@ -190,6 +190,9 @@ const DuetHero = class {
         if (this.hasHeadingSlot && slotUtils.getElementsFromNamedSlot(this.element, "heading")[0].matches(headings)) {
             this.hasHeadingSlotNative = true;
         }
+        if (this.hasSubHeadingSlot && slotUtils.getElementsFromNamedSlot(this.element, "subheading")[0].matches(headings)) {
+            this.hasSubHeadingSlotNative = true;
+        }
         this.refresh();
     }
     connectedCallback() {
@@ -273,7 +276,7 @@ const DuetHero = class {
                 outlineColor = "color-primary-turva";
             }
         }
-        return (index.h("div", { key: '2acab1c8b82358799dafa10a59b26c5c4926d9c2', role: "region", class: {
+        return (index.h("div", { key: 'fc3ecc930f72a824e8e8e488594714fe52f31fff', role: "region", class: {
                 "duet-hero": true,
                 "duet-theme-turva": this.theme === "turva",
                 "duet-has-category-icon": !!this.categoryIcon,
@@ -291,17 +294,17 @@ const DuetHero = class {
                 "duet-hero-text-center": (this.textCenter && !this.leftAlign) || campaignOrSection,
                 "duet-hero-left-align": this.leftAlign && !campaignOrSection,
                 "duet-hero-narrow": this.layout === "narrow",
-            }, part: "duet-hero" }, campaignOrSection && this.image && (index.h("div", { key: '6eaf6fdf31c583d1bf46b6e0a17e5f59fd9bef16', class: "background-area" }, index.h("div", { key: 'cffc1963ec6f4f330a45b16ef8597fd0406810ff', class: "background-container" }, index.h("div", { key: '5d5a8bbbe8acf1873aac92bb8958ce89645586b6', class: "background" }, index.h("img", { key: '275067a598c6e3698a173ae744c78a3561cf9860', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), index.h("div", { key: '3d2d60e4424fd538cf25286506898ca36ead0e25', class: "brand-shape" })))), this.variation === "product" && this.image && (index.h("div", { key: 'e67359431f573b15907e91a3849e85dd68a2b644', class: { "background-area": true, [this.layout]: true } }, index.h("div", { key: '397e5301fc2b4a121e3c0a2de7e2370004208035', class: { "background-container": true, [this.layout]: true } }, index.h("div", { key: '078e49f6846a0b61d1bbb11928c7c1b4f0969237', class: { background: true, [this.layout]: true } }, index.h("div", { key: '2daa9135a889476521e74ed6aa803bbace92dd6d', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && index.h("div", { key: 'ae26a5feaebc0b7911990d0b9c30057856721dac', class: { "brand-shape": true, [this.layout]: true } }), index.h("div", { key: 'f419c7247da65238eebad9f99b75518c2c2b8ada', class: { "brand-shaped-image": true, [this.layout]: true } }, index.h("div", { key: '68ccb4c3fe4fd2440d6ff7e335df5d2846b7aa85', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, index.h("div", { key: '5f7b2f8284d75a99cedbd8222a64fa85da3bbba0', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (index.h("div", { key: 'a5dd4a3ddf8496bb7410510b3f7dd0b0a25bb669', class: { "brand-shaped-icon": true, [this.layout]: true } }, index.h("duet-icon", { key: '1294469ae73fd7152468c7511115df26ade001c6', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (index.h("div", { key: '94e722b437acc481d8850afa5a427d663db361df', class: "background-area" }, index.h("div", { key: '24695ae05a4f5e71286485ca9de320a188a3f750', class: "background" }, index.h("div", { key: '49ff7ba2e5bff31c66ff1a8e25089d93d04dbe79', class: "background-mask" }), this.theme !== "turva" && index.h("div", { key: '220556ff22eea0a4c635c9848d8b8819bc6efd1f', class: "brand-shape" }), index.h("div", { key: '378d01fdda36431c580f66a784648efb5560b686', class: "brand-shaped-image" }, index.h("div", { key: '1fc789aafa6956bd228968caf0db6dff147114dc', class: "brand-shaped-image-wrapper" }, index.h("div", { key: '7788059d7f3affaec40ab2ae5990657f991dd48c', class: "brand-shaped-image-bg", style: styles })))))), index.h("div", { key: 'af608366dc29bfccac27e761e93e75c0b7bfec2c', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (index.h("div", { key: 'afe18dd2b7e20333e45e00e5c5a4a966e35660f9', class: "duet-hero-image-mask" }, index.h("div", { key: 'f4ab5d687e3907148e0b4f0d1363576cd2b566e2', class: "duet-hero-image-wrapper" }, index.h("div", { key: '593e3142b5e6452188ca524610bd213eeea25c3f', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
-            this.processedBack && (index.h("div", { key: '6ef1cb9203c2a2e553ecb1765a912929d9db9846', class: "duet-hero-back" }, index.h("duet-button", { key: '88c8ae092e2822124387ea072d6b367d52192100', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
+            }, part: "duet-hero" }, campaignOrSection && this.image && (index.h("div", { key: 'a8cdeb3e0c17fed0de61ab1c84a5f8b4eb92d43f', class: "background-area" }, index.h("div", { key: 'c0e772e0eb58c3b59be2ef2441653d7d9355b7be', class: "background-container" }, index.h("div", { key: 'ff30622beb78548046143236845a8c6252dc4c40', class: "background" }, index.h("img", { key: '4ed685b3b1f5926867fcf8e53050a4f4dbe71060', class: `${imageSizeIsCover ? "cover" : ""} ${imagePositionIsCenter ? "center" : ""}`, src: this.image, alt: "", role: "presentation" })), index.h("div", { key: '8757c109c1ecbf249d31b7f3fdfe062e7cbcdf46', class: "brand-shape" })))), this.variation === "product" && this.image && (index.h("div", { key: 'b6b734d21571cbe03adab7be1942caa351eb886e', class: { "background-area": true, [this.layout]: true } }, index.h("div", { key: '5e6e459f153a9665bc8993789961ae5d23ff389e', class: { "background-container": true, [this.layout]: true } }, index.h("div", { key: '593f8f68c2df59b1e6499eb6f59394dee782891e', class: { background: true, [this.layout]: true } }, index.h("div", { key: '49aaadfc675e5cc1cf528cfb3516577d3baa1c4f', class: { "background-mask": true, [this.layout]: true } }), this.theme !== "turva" && index.h("div", { key: '52d15566f49e4ee0d72ab9ec10f992d55291a2cd', class: { "brand-shape": true, [this.layout]: true } }), index.h("div", { key: 'a7275c16c76b667037cfe0044b21b11ce09bf413', class: { "brand-shaped-image": true, [this.layout]: true } }, index.h("div", { key: 'a3522f3ed67befbb439ee07195e959180b3e01a1', class: { "brand-shaped-image-wrapper": true, [this.layout]: true } }, index.h("div", { key: '3cb4ef66b9af1357e75318bc6f97e732e1787ce2', class: { "brand-shaped-image-bg": true, [this.layout]: true }, style: styles }))), this.categoryIcon && (index.h("div", { key: 'c15dfb764fe13d5766c3ad5e2b4bf012c739e257', class: { "brand-shaped-icon": true, [this.layout]: true } }, index.h("duet-icon", { key: 'd5f3d4a50473d2e2b56575de789e42c246c69987', class: { [this.layout]: true }, background: "none", name: this.categoryIcon, margin: "none", size: "auto", responsive: false }))))))), this.variation === "content" && this.image && (index.h("div", { key: 'c0ace6245e4431276a7e72a618b37f967d0b4bc5', class: "background-area" }, index.h("div", { key: 'cf04f88d15da106d8416d910835e07e87dd04bea', class: "background" }, index.h("div", { key: '0536ea5ec869a1ec253ab616a12485b01433982d', class: "background-mask" }), this.theme !== "turva" && index.h("div", { key: 'd7933f6c85dc709697ba451cf89cda8f7a9e3f03', class: "brand-shape" }), index.h("div", { key: 'c5fd0f3a99befd7d054303c9ebfd596989e7ccb8', class: "brand-shaped-image" }, index.h("div", { key: '96c71979b18e456b1a94fbb2bc1ae56bbf5cf318', class: "brand-shaped-image-wrapper" }, index.h("div", { key: 'acd8a1ce0a639e28970c6ca41b789bcfac03f9c7', class: "brand-shaped-image-bg", style: styles })))))), index.h("div", { key: '8d08cf63aac9a03e1874b8cbfa4741ee1f1c4949', class: { "duet-hero-wrapper": true, [this.layout]: true } }, this.image && this.variation === "image" && (index.h("div", { key: '6da49938f8cf4c5038179fb9b48e0d8d5b8a521a', class: "duet-hero-image-mask" }, index.h("div", { key: '1682a488a00e1188d2be47d0aa895277f065adee', class: "duet-hero-image-wrapper" }, index.h("div", { key: '6fc100efe321915493d840f3fd2f01100fa954fd', class: "duet-hero-image", style: styles })))), (this.variation === "gray" || this.variation === "light" || this.variation === "minimal") &&
+            this.processedBack && (index.h("div", { key: '2777feaa8cc994cf4215d49143c69bee06d85552', class: "duet-hero-back" }, index.h("duet-button", { key: '57315d5cb34c6db55f6642224b442b12ebb7fe9a', style: buttonStyles, variation: "plain", icon: "action-arrow-left-small", theme: this.theme, iconSize: "small", color: buttonColor, padding: "none", margin: "none", fixed: true, url: this.processedBack.href, identifier: this.processedBack.id, onClick: event => this.handleClick(event, {
                 label: this.processedBack.label,
                 href: this.processedBack.href,
                 id: this.processedBack.id,
                 analyticsId: this.processedBack.analyticsId,
-            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (index.h("duet-icon", { key: '84ee8012288a996c6f8e8784ec4f11cfbd1b8ae0', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), index.h("div", { key: 'f01a0715385faba12c729803e38c98d63081afbb', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (index.h("duet-paragraph", { key: 'cadb1a1a8c68ef87c94a91ccb04055e978df8ef6', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium", "aria-hidden": "true" }, this.preHeading ? (this.preHeading) : (index.h("span", null, index.h("slot", { name: "pre-heading" }))))), index.h("slot", { key: 'a7fc32e5f238d1cd628753e0f20a4afd1e5e0eb9', name: "badge" }), (this.heading || this.hasHeadingSlot) && (index.h("duet-heading", { key: 'e3275e3977ba1e6900478aa53175f2e2e4e40d04', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : index.h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (index.h("duet-heading", { key: 'fe9b5e29d6ae66ad144b44c8e148bf2094ea90af', theme: this.theme, level: this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, index.h("slot", { key: '32b4475fd032d945cb71f8a3bbf1853be66e2e22', name: "subheading" }))), this.description && (index.h("duet-paragraph", { key: '0524a2070a96b01316a972650024cea29f21e414', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (index.h("duet-list", { key: '5a63ea9d07f59ea32ba37a1d0347b8eb38f25d6b', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (index.h("duet-list-item", null, index.h("span", { slot: "label" }, item.label), index.h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (index.h("duet-button", { key: 'e579589e4189bb1f3f07c7557fa99ce2223dbe40', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), index.h("slot", { key: '516589bcc702ae95a21b1dd6c3204f678a658a0d' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (index.h("div", { key: 'd7b178afe535335a3c51949d7e8f3546d3d434e3', class: "duet-hero-links" }, this.processedActions.map(item => (index.h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, index.h("div", { class: "duet-hero-action-icon" }, index.h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), index.h("span", null, item.label), item.external && index.h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (index.h("div", { class: "duet-hero-action-arrow" }, index.h("duet-icon", { icon: actionNewWindowSmall.newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
+            }) }, this.processedBack.label))), (this.variation === "gray" || this.variation === "minimal") && this.categoryIcon && (index.h("duet-icon", { key: '282df2be20e350964563837a2344b4fd3fbd6812', class: { "duet-hero-icon": true, "duet-hero-icon-has-heading": this.preHeading !== "" }, size: "x-large", background: this.categoryIconColor, name: this.categoryIcon })), index.h("div", { key: '0a04e8f9ada19e0e157a52295248291e4ce30703', class: { "duet-hero-text": true }, part: "duet-hero-text" }, (this.preHeading || this.hasPreHeadingSlot) && (index.h("duet-paragraph", { key: '38897d3fc34f854e13e2675bc3c79005a7ba16b1', margin: "none", class: "duet-hero-pre", size: this.variation === "content" ? "small" : "medium", "aria-hidden": "true" }, this.preHeading ? (this.preHeading) : (index.h("span", null, index.h("slot", { name: "pre-heading" }))))), index.h("slot", { key: 'c77b97021d7c7a735ce0aeba42fabce91d83da39', name: "badge" }), (this.heading || this.hasHeadingSlot) && (index.h("duet-heading", { key: 'cd22335d7881e672e2df6367d58c734784ff5f6e', theme: this.theme, level: this.hasHeadingSlotNative ? "div" : this.level, class: { "duet-hero-heading": true, "duet-hero-heading-has-pre": this.preHeading !== "" }, color: headingColor, visualLevel: headingVisualLevel, margin: campaignOrSection ? "none" : "auto", accessibleLabel: this.getAccessibleHeading() }, this.heading ? this.heading : index.h("slot", { name: "heading" }))), campaignOrSection && this.hasSubHeadingSlot && (index.h("duet-heading", { key: 'ce92b7e2ce3f86fa082b8601dd070d5a76b27437', theme: this.theme, level: this.hasSubHeadingSlotNative ? "div" : this.subHeadingLevel, class: { "duet-hero-subheading": true }, color: this.theme === "turva" ? "secondary-turva" : "secondary", visualLevel: "h2" }, index.h("slot", { key: 'f79855d9d88deba48f86e05f2318cf9459da6db0', name: "subheading" }))), this.description && (index.h("duet-paragraph", { key: '9b3cefb7c435efb47e07a1501e18dee9db1b6b5b', theme: this.theme, color: textColor, variation: "intro" }, this.description)), (this.variation === "gray" || this.variation === "minimal") && this.processedListItems && (index.h("duet-list", { key: '1c4915294fb3b2335ff981939207a961069d6b74', theme: this.theme, "label-width": "30", breakpoint: "large", mobile: this.leftAlign ? undefined : "center" }, this.processedListItems.map(item => (index.h("duet-list-item", null, index.h("span", { slot: "label" }, item.label), index.h("span", { slot: "value" }, item.value)))))), this.buttonLabel && (index.h("duet-button", { key: 'ba2b9cded251cad0aea4ebd4c66d1fddf78bea38', url: this.buttonUrl, icon: this.icon, iconRight: this.iconRight, iconSize: this.iconSize, variation: buttonVariation, theme: this.theme, identifier: this.buttonId, onClick: event => this.handleClick(event, this.buttonData), fixed: true }, this.buttonLabel)), index.h("slot", { key: '0570f78ab10d749668c6dc20bb97db5896ce1039' })), (this.variation === "gray" || this.variation === "minimal") && this.processedActions && (index.h("div", { key: '647db5a0b2aa0416fd2a499bf168523b2f090e81', class: "duet-hero-links" }, this.processedActions.map(item => (index.h("a", { class: "duet-hero-link", href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleClick(event, item) }, index.h("div", { class: "duet-hero-action-icon" }, index.h("duet-icon", { size: "small", margin: "none", name: item.icon, color: "currentColor", outline: outlineColor })), index.h("span", null, item.label), item.external && index.h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), item.external && (index.h("div", { class: "duet-hero-action-arrow" }, index.h("duet-icon", { icon: actionNewWindowSmall.newWindowIcon.svg, size: "xx-small", margin: "none", color: "currentColor" })))))))), this.image &&
             this.variation !== "image" &&
             !campaignOrSection &&
             this.variation !== "product" &&
-            this.variation !== "content" && index.h("div", { key: '24764772d259abadc2405cc658c07c9b255a48e4', class: "duet-hero-image", style: styles }), index.h("slot", { key: 'f8209505395340f3f3f2cd2d8d7d3e7d2c9a8740', name: "bottom" }))));
+            this.variation !== "content" && index.h("div", { key: '32f36cc551b37aefb3a06403431479f4d4e7460d', class: "duet-hero-image", style: styles }), index.h("slot", { key: 'd53f84c8a9c995bb049ba25531b49b8119d40353', name: "bottom" }))));
     }
     get element() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-BkDTP7hm.js');
-var themeableComponent = require('./themeable-component-DvX_Xgrg.js');
+var index = require('./index-ULRMHMT6.js');
+var themeableComponent = require('./themeable-component-vXSpPXDS.js');
 var tokenUtils = require('./token-utils-b3aW02zZ.js');
 require('./tokens.module-7opSZfop.js');
 

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

@@ -3,8 +3,8 @@
  */
 'use strict';
 
-var index = require('./index-BkDTP7hm.js');
-var languageUtils = require('./language-utils-BxIeXBGy.js');
+var index = require('./index-ULRMHMT6.js');
+var languageUtils = require('./language-utils-D_noDTNR.js');
 require('./string-utils-B35hEUBv.js');
 
 const duetIndicatorCss = "*,*::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;position:relative}.duet-indicator{position:absolute;top:0;right:0;display:inline-block;width:8px;height:8px;border-radius:50%}.duet-indicator-new{background:rgb(0, 119, 179)}.duet-indicator-change{background:rgb(247, 178, 40)}.duet-indicator-error{background:rgb(185, 16, 74)}.duet-indicator-success{background:rgb(29, 106, 88)}";