@duetds/components 10.3.0 → 10.4.0

package/lib/collection/components/duet-empty-state/duet-empty-state.js

@@ -10,9 +10,26 @@ export class DuetEmptyState {
          */
         this.theme = "";
         /**
-         * Icon shown in the empty state component.
+         * The variation of the empty state component. Use "warning" when the empty state is due to an error.
+         */
+        this.variation = "default";
+        /**
+         * Set background to "none" when no background is wanted, e.g. inside a table.
+         */
+        this.background = "auto";
+        /**
+         * Icon shown in the empty state component. For warning variation a status icon is always used.
+         * Use value "none" for no icon at all.
          */
         this.icon = "messaging-question";
+        /**
+         * Heading to show above the component content
+         */
+        this.heading = "";
+        /**
+         * Padding of the empty state component
+         */
+        this.padding = "medium";
         /**
          * The size of the empty state message.
          */
@@ -24,16 +41,25 @@ export class DuetEmptyState {
     componentWillLoad() {
         inheritGlobalTheme(this);
     }
+    getIcon() {
+        const size = this.size === "small" ? "large" : "x-large";
+        if (this.variation === "warning") {
+            return h("duet-status-icon", { variation: "warning", size: size, strong: true });
+        }
+        return h("duet-icon", { color: "currentColor", name: this.icon, size: size });
+    }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '6b61854be0ee8b668d513de66e117b928cb4671b' }, h("div", { key: '62ab8dddad16464e202f9225d080cee855a8193d', class: {
+        return (h(Host, { key: '83c41a104ebe8f29f18a2d0754a822981edd2204' }, h("div", { key: 'c2b928a204ec58089c46368f0e7a73f2f6880633', class: {
                 "duet-empty-state": true,
+                [this.variation]: true,
+                [`padding-${this.padding}`]: true,
                 "duet-theme-turva": this.theme === "turva",
-                "duet-is-small": this.size === "small",
-            } }, h("duet-icon", { key: '237ea5cd85e1be42a856c7b30e14022bb4cd824e', color: "currentColor", name: this.icon, size: this.size === "small" ? "large" : "x-large" }), h("div", { key: '9bb0471dfd59d78fc51b71eccce4830d47506a42' }, h("slot", { key: 'cdf540cdcc74733367bfc04d13ec9659bd2adb52' })))));
+                "duet-no-background": this.background === "none",
+            } }, this.icon !== "none" && this.getIcon(), this.heading && (h("div", { key: '8b6f183f2022ef6a5d00b93cb4b345d93e310d45' }, h("strong", { key: 'fd7369964488e3821b00cbf3493fa873ee5a969e', class: "duet-empty-state-heading" }, this.heading), h("duet-spacer", { key: '7b96f48b9587efa581fc84b2205a32e839e03ee7', size: "x-small" }))), h("div", { key: 'ea6a1f4c70a824c705e8f644f8e58f9768db8317' }, h("slot", { key: '77c8aa58fa27abf0635ea22f22fd7d5c06d151dc' })))));
     }
     static get is() { return "duet-empty-state"; }
     static get encapsulation() { return "shadow"; }
@@ -75,12 +101,58 @@ export class DuetEmptyState {
                 "reflect": false,
                 "defaultValue": "\"\""
             },
+            "variation": {
+                "type": "string",
+                "attribute": "variation",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetEmptyStateStatus",
+                    "resolved": "\"default\" | \"warning\"",
+                    "references": {
+                        "DuetEmptyStateStatus": {
+                            "location": "local",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-empty-state/duet-empty-state.tsx",
+                            "id": "src/components/duet-empty-state/duet-empty-state.tsx::DuetEmptyStateStatus"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The variation of the empty state component. Use \"warning\" when the empty state is due to an error."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "background": {
+                "type": "string",
+                "attribute": "background",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"auto\" | \"none\"",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set background to \"none\" when no background is wanted, e.g. inside a table."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
             "icon": {
                 "type": "string",
                 "attribute": "icon",
                 "mutable": false,
                 "complexType": {
-                    "original": "DuetIconName",
+                    "original": "DuetIconName | \"none\"",
                     "resolved": "string",
                     "references": {
                         "DuetIconName": {
@@ -94,13 +166,59 @@ export class DuetEmptyState {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Icon shown in the empty state component."
+                    "text": "Icon shown in the empty state component. For warning variation a status icon is always used.\nUse value \"none\" for no icon at all."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "\"messaging-question\""
             },
+            "heading": {
+                "type": "string",
+                "attribute": "heading",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading to show above the component content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "padding": {
+                "type": "string",
+                "attribute": "padding",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetEmptyStatePadding",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "DuetEmptyStatePadding": {
+                            "location": "local",
+                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-empty-state/duet-empty-state.tsx",
+                            "id": "src/components/duet-empty-state/duet-empty-state.tsx::DuetEmptyStatePadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Padding of the empty state component"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"medium\""
+            },
             "size": {
                 "type": "string",
                 "attribute": "size",

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

@@ -75,20 +75,20 @@ export class DuetFieldset {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'ac0f503ac6d41953e774ad46b418c8ea39ff4708', class: { "duet-m-0": this.margin === "none" } }, h("fieldset", { key: 'b564273ca16fac8fbb500ab8bfc9dff72e579770', "aria-labelledby": this.labelId, "aria-describedby": this.error ? this.errorId : null,
+        return (h(Host, { key: 'e1a788de39eaef07a1abaa996870dd726b226aee', class: { "duet-m-0": this.margin === "none" } }, 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",
-            } }, h("legend", { key: '607df92d8f78aaad01e4c80e33c17da55a52e20f', id: this.labelId }, h(this.labelHeadingLevel, { key: '33cee42411e380076885a046790cb8006088c5ed' }, this.label), this.caption && h("span", { key: '52c809bbe842c11a84e7d1a5c3083bfe92472d36' }, this.caption)), h("div", { key: 'aa297b27900d3a28a48bf8102b75e900896393ff', class: {
+            } }, h("legend", { key: '9412c1763b18075c6c6d585389c3ac9d22542f64', id: this.labelId }, h(this.labelHeadingLevel, { key: '9c1c5cfef779deef96e68e7f3760f0eeec8d347a' }, this.label), this.caption && h("span", { key: 'd166f280495ee9e156e705fe52455b18c5a13ea2' }, this.caption)), 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,
-            } }, h("div", { key: '3af22b271c143a074adee18554408291e3faa660', class: "duet-fieldset-label" }, h("span", { key: '939a883743e233ba83e8ff3328b18842b0c4eae4', "aria-hidden": "true" }, this.label), h("slot", { key: '822892f650b6c0f733cc58a1aee1654e21d1f1f6', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: 'bc40348b978fc775d1007cdf3949e95d4d3b54e0', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: '3119b1a7963015c24d6324d5de47fc53cdfd748e', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: 'fa922540a117205680098064372a70aefc0953ae' }), h("span", { key: 'ad8d4d59379d7a9f89e618754d46404eb5c3c664', class: "duet-fieldset-help duet-fieldset-error", id: this.errorId, "aria-atomic": "true", "aria-live": this.accessibleLiveError, "aria-relevant": "additions removals" }, this.error && h("span", { key: 'c36abae3849393120d72e3781305cb2ce88b384c', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
+            } }, h("div", { key: '10861fb7ec43cc4aec34ae9b04b1b191dd7a0d5c', class: "duet-fieldset-label" }, h("span", { key: '63b295dc887c75eb4bc062d214bb5b6a899e0f83', "aria-hidden": "true" }, this.label), h("slot", { key: 'dc154b5f9980e99c525884e32f7811e36fe634fc', onSlotchange: this.checkHasTooltip, name: "tooltip" })), this.caption && (h("div", { key: '1803a70997b3d2de928d501cfb86864bfa3af614', class: "duet-fieldset-caption", "aria-hidden": "true" }, h("duet-caption", { key: 'c574d64b9a375d0af50bc0bed35ea0418139f579', theme: this.theme, margin: "none" }, this.caption)))), h("slot", { key: '48665d8be4d66036d4d69090d7a98ee01f99dbac' }), 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 && h("span", { key: '93bfa1f3fb33cf3bc23055948b416a18369b8497', class: { "duet-m-0": this.lastItemIsChip } }, this.error)))));
     }
     static get is() { return "duet-fieldset"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-file-chooser/duet-file-chooser.js

@@ -48,7 +48,7 @@ export class DuetUploadItem {
         inheritGlobalTheme(this);
     }
     render() {
-        return (h(Host, { key: '70aa98d57c2361a70abfd51e859679df65f68027' }, h("duet-visually-hidden", { key: '1c4899794b06709d24d5ff412141bf0e3714a8cb', "aria-hidden": "true" }, h("input", { key: 'ec3827c684ffbb3a4299720ef07f4c8590d0d6ed', ref: input => {
+        return (h(Host, { key: '96ed40ea2f9ae846c2ad9654c04511e312933fcd' }, h("duet-visually-hidden", { key: '2092c91fbf71c47a422748e27741c8a2695d4d5f', "aria-hidden": "true" }, h("input", { key: '1e83b554493c852b23e14bd801f8c48a42c8790e', ref: input => {
                 this.nativeInput = input;
             }, type: "file", class: {
                 "duet-upload": true,

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

@@ -76,7 +76,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-footer a:focus, :host(.user-is-tabbing) .duet-footer a:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-footer a:focus, :host(.user-is-tabbing) .duet-footer a:focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-footer a:focus, :host(.user-is-tabbing) .duet-footer a:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 62em) {

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

@@ -160,16 +160,16 @@ export class DuetFooter {
     render() {
         const text = getLocaleString(i18n, this.language);
         const copyrightLabel = this.theme === "turva" ? text.turva : text.lahi;
-        return (h("footer", { key: 'a1f13a9e8d015c33626dc35acfbac299d5d798b8', class: {
+        return (h("footer", { key: '803a027abb0c9d387f880a40cf4fa48cfdc96ab0', class: {
                 "duet-footer": true,
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-footer-simple": this.variation === "simple",
-            }, "aria-label": this.accessibleLabel }, h("div", { key: '48ff4a3d5e8df21215a409def47ead6f70f697fa', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: 'a0cc027a05d4c054e0f99c2c2ad3fb6b34a58873', class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: '46da624a2ea71bc94e7029110f2aa4b264e21a0b', class: "duet-footer-wrapper" }, this.variation !== "simple" && (h("div", { key: 'bb5d3de968dc4d893e002294a3ab5106ca3676ad', class: {
                 "duet-footer-top": true,
                 "duet-has-info": this.hasInfoSlot,
-            }, part: "top" }, h("div", { key: '3724f9ef6f0af6ca9812b4c9c2854209a80cb38b', class: "footer-top-logo" }, h("duet-logo", { key: '10e4b82fa2f117f130a2458a64249d36b5f99564', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: '40ceb56a8366b96d5a9afc572984ff027249cfd0', class: "footer-top-right-container" }, h("slot", { key: 'e3f21c2f91e64c844a95d40344104e8aff352013', name: "info" }), h("div", { key: 'a2c5b4d2dad3aa29116a8fe5d2bd4525b6a6ad5c', class: "footer-top-items" }, this.processedItems &&
-            this.processedItems.map((item, index) => (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { ref: element => this.setDataAttributes(element, item), theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: this.getTopItemButtonIcon(item), "icon-right": !this.isMessagingLink(item.href), "icon-size": this.isMessagingLink(item.href) ? "medium" : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)))))))), h("slot", { key: '0058cff0a643b85a2373c0b2633f5d8d293cf639', name: "extra" }), h("p", { key: '6e0623c40daaab7ecf2ba1abb3e6f5935bac445b', class: "duet-footer-menu", part: "menu" }, h("span", { key: 'abb2319d06c15e6d423337f75f713e835188c326', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: 'f0b19fd6cc3da55c0519ab7e499f9d24df20ebc8', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: '308c16b052419e8570fe7e39a5708f45bb58a00d' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '6308d6f3a762e1945a197a58efa9536c82412fdc', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
+            }, part: "top" }, h("div", { key: 'a3c27f3c9fbf54263b0e632307fe2ed39aeb9e46', class: "footer-top-logo" }, h("duet-logo", { key: '5f7440b81f78389724830f3e843c71de140ae05d', href: this.logoHref, onClick: this.handleLogoClick, size: "large", inverse: true, language: this.language, theme: this.theme })), h("div", { key: 'f0a8b5cdda02fbd0fbff1015320572900e12a16e', class: "footer-top-right-container" }, h("slot", { key: '2c9e48c0350b76dbb74c59cfbca727d1c579b7a5', name: "info" }), h("div", { key: '4df2f42f2dc49b084a94de90de892adac97866c9', class: "footer-top-items" }, this.processedItems &&
+            this.processedItems.map((item, index) => (h(Fragment, null, index > 0 && h("duet-spacer", { size: "x-large", direction: "horizontal" }), h("duet-button", { ref: element => this.setDataAttributes(element, item), theme: this.theme, id: item.id, class: "duet-footer-link", variation: "plain", margin: "none", fixed: true, negative: true, url: item.href, external: item.external, icon: this.getTopItemButtonIcon(item), "icon-right": !this.isMessagingLink(item.href), "icon-size": this.isMessagingLink(item.href) ? "medium" : "medium-small", onClick: event => this.handleItemClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label)))))))), h("slot", { key: '51d5f56fe14519205709b1cb02bcfa1b87e6a3c2', name: "extra" }), h("p", { key: '3e2b620a21d109d0f4119d5b2a8a1a5c1404ec5c', class: "duet-footer-menu", part: "menu" }, h("span", { key: '9a5becef9ceb454715ee6f560e3f9df8ae72357a', class: "duet-footer-copyright" }, `${copyrightLabel} ${new Date().getFullYear()}`), h("span", { key: '34b3c5e0d44b6a0497b7983ddde14380175618cc', class: "duet-footer-menu-links" }, this.processedMenu && (h(Fragment, { key: 'd7defe3bd130ba7fb71731f71860351dbca3d726' }, this.processedMenu.map(item => (h("a", { ref: element => this.setDataAttributes(element, item), href: item.href, id: item.id, target: item.external ? "_blank" : "_self", onClick: event => this.handleMenuClick(event, item), onMouseEnter: event => this.emitDuetEvent(event, item), onTouchStart: event => this.emitDuetEvent(event, item) }, item.label, item.external && (h(Fragment, null, h("duet-visually-hidden", null, ", ", this.accessibleLabelExternal), h("span", { class: "duet-footer-external" }, h("duet-icon", { icon: newWindowIconSmall.svg, size: "xx-small", margin: "none", color: "currentColor" })))), h("span", { class: "duet-footer-divider", role: "presentation", "aria-hidden": "true" }, "/")))))))), h("p", { key: '4c708db5c94a113edcda458bd9375cdb382a3237', class: "duet-footer-copyright duet-footer-copyright-mobile" }, `${copyrightLabel} ${new Date().getFullYear()}`))));
     }
     static get is() { return "duet-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -389,6 +389,29 @@
   }
 }
 
+:host(.duet-grid-variation-grid.duet-grid-no-row-gap) {
+  row-gap: 0;
+}
+
+:host(.duet-grid-variation-grid.duet-grid-no-column-gap) {
+  column-gap: 0;
+}
+@media (min-width: 48em) {
+  :host(.duet-grid-variation-grid.duet-grid-no-column-gap) {
+    grid-template-columns: repeat(8, 83px);
+  }
+}
+@media (min-width: 62em) {
+  :host(.duet-grid-variation-grid.duet-grid-no-column-gap) {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+  }
+}
+@media (min-width: 76.25em) {
+  :host(.duet-grid-variation-grid.duet-grid-no-column-gap) {
+    grid-template-columns: repeat(12, 91.6666666667px);
+  }
+}
+
 :host(.duet-grid-variation-grid.duet-grid-template-small) ::slotted(*) {
   grid-column: 1/span 4;
 }

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

@@ -44,6 +44,11 @@ export class DuetGrid {
          * CSS grid based templates that can be used to create pre-defined layouts.
          */
         this.gridTemplate = null;
+        /**
+         * When gridTemplate is used, gridTemplateGap sets the row and column gaps. With two values the first
+         * is row-gap and the second column-gap. Does not apply to button-grid.
+         */
+        this.gridTemplateGap = "auto";
     }
     validateAlignment() {
         if (this.alignment === "form_distribute") {
@@ -203,7 +208,7 @@ export class DuetGrid {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '1a7bab03f61e124f9e7d90c4b32e16bfc3fba736', class: {
+        return (h(Host, { key: 'e83b3b47e6285da96df9121db761bc7c5feddd65', class: {
                 "duet-grid": true,
                 "duet-no-stacking": !this.responsive,
                 "duet-grid-align-top": this.alignment === "top", // flex-start
@@ -230,7 +235,9 @@ export class DuetGrid {
                 "duet-grid-row-reverse": this.rowReverse,
                 [`duet-grid-variation-${this.gridTemplate ? "grid" : "flex"}`]: true,
                 [`duet-grid-template-${this.gridTemplate}`]: true,
-            } }, h("slot", { key: '03ee25477d7ea8733b042bf85dc855f29f11dcc1' })));
+                "duet-grid-no-row-gap": this.gridTemplateGap.startsWith("none") && this.gridTemplate !== "button-grid",
+                "duet-grid-no-column-gap": this.gridTemplateGap.endsWith("none") && this.gridTemplate !== "button-grid",
+            } }, h("slot", { key: 'f53c15eef6edec556ff4200a95675a2feb5574e4' })));
     }
     static get is() { return "duet-grid"; }
     static get encapsulation() { return "shadow"; }
@@ -435,6 +442,26 @@ export class DuetGrid {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "null"
+            },
+            "gridTemplateGap": {
+                "type": "string",
+                "attribute": "grid-template-gap",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"auto\" | \"none\" | \"auto none\" | \"none auto\"",
+                    "resolved": "\"auto none\" | \"auto\" | \"none auto\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When gridTemplate is used, gridTemplateGap sets the row and column gaps. With two values the first\nis row-gap and the second column-gap. Does not apply to button-grid."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "\"auto\""
             }
         };
     }

package/lib/collection/components/duet-grid-item/duet-grid-item.js

@@ -53,7 +53,7 @@ export class DuetGridItem {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '59b2546565c78716d981db97ba3a66b9f4b06104', style: {
+        return (h(Host, { key: '4b538b2691f1fe5d57e6d1bbdec0e4278128c0c8', style: {
                 "min-width": this.minWidth,
                 "max-width": this.maxWidth,
             }, class: {
@@ -70,7 +70,7 @@ export class DuetGridItem {
                 "duet-grid-item-br-medium": this.breakpoint === "medium",
                 "duet-grid-item-br-large": this.breakpoint === "large",
                 "duet-grid-item-br-x-large": this.breakpoint === "x-large",
-            } }, h("slot", { key: '78c0ca977366f49a62d91c19e42b7140455c0e7e' })));
+            } }, h("slot", { key: 'dabba4fd818496d5472f9328f3a400ce0dac9bc0' })));
     }
     static get is() { return "duet-grid-item"; }
     static get encapsulation() { return "shadow"; }

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

@@ -279,7 +279,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-header-items .duet-header-item:focus, :host(.user-is-tabbing) .duet-header-items .duet-header-item:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-header-items .duet-header-item:focus, :host(.user-is-tabbing) .duet-header-items .duet-header-item:focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-header-items .duet-header-item:focus, :host(.user-is-tabbing) .duet-header-items .duet-header-item:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 62em) {
@@ -347,7 +347,7 @@
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-header-toggle:focus, :host(.user-is-tabbing) .duet-header-toggle:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-header-toggle:focus, :host(.user-is-tabbing) .duet-header-toggle:focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-header-toggle:focus, :host(.user-is-tabbing) .duet-header-toggle:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 62em) {
@@ -476,7 +476,7 @@ button {
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-header-button:focus, :host(.user-is-tabbing) .duet-header-button:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-header-button:focus, :host(.user-is-tabbing) .duet-header-button:focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-header-button:focus, :host(.user-is-tabbing) .duet-header-button:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-header-button:hover {
@@ -662,7 +662,7 @@ button {
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-header-dropdown-toggle:focus, :host(.user-is-tabbing) .duet-header-dropdown-toggle:focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-header-dropdown-toggle:focus, :host(.user-is-tabbing) .duet-header-dropdown-toggle:focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-header-dropdown-toggle:focus, :host(.user-is-tabbing) .duet-header-dropdown-toggle:focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-header-dropdown-toggle:active {
@@ -827,7 +827,7 @@ button {
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva :host(.user-is-tabbing) .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus, :host(.user-is-tabbing) .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus.duet-theme-turva, .duet-theme-turva :host(.user-is-tabbing) .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus, :host(.user-is-tabbing) .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus.duet-theme-turva {
+.duet-theme-turva :host(.user-is-tabbing) .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus, :host(.user-is-tabbing) .duet-header-dropdown .duet-header-dropdown-content a:not(.duet-header-item):focus.duet-theme-turva {
   outline-color: rgba(53, 79, 101, 0.8);
 }
 @media (min-width: 62em) {
@@ -902,7 +902,7 @@ button {
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-header-skip:focus, .duet-header-skip:focus.duet-theme-turva, .duet-theme-turva .duet-header-skip:focus, .duet-header-skip:focus.duet-theme-turva {
+.duet-theme-turva .duet-header-skip:focus, .duet-header-skip:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);

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

@@ -61,6 +61,11 @@
   -webkit-hyphens: auto;
   hyphens: auto;
 }
+.duet-heading .pre-post-heading {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
 .duet-heading.h0 {
   font-size: 9.4vw;
   line-height: 1.1;
@@ -85,10 +90,29 @@
   .duet-heading.h0 {
     font-size: 2.25rem;
   }
+  .duet-heading.h0 .pre-post-heading {
+    font-size: 1rem;
+  }
 }
 .duet-heading.h0.fixed-size {
   font-size: 4.5rem;
 }
+.duet-heading.h0.fixed-size .pre-post-heading {
+  font-size: 1.5rem;
+}
+.duet-heading.h0 .pre-post-heading {
+  font-size: 4.2vw;
+}
+@media (max-width: 29.7619047619rem) {
+  .duet-heading.h0 .pre-post-heading {
+    font-size: 1.25rem;
+  }
+}
+@media (min-width: 35.7142857143rem) {
+  .duet-heading.h0 .pre-post-heading {
+    font-size: 1.5rem;
+  }
+}
 .duet-heading.h1 {
   font-size: 7vw;
   line-height: 1.1;
@@ -113,10 +137,29 @@
   .duet-heading.h1 {
     font-size: 1.5rem;
   }
+  .duet-heading.h1 .pre-post-heading {
+    font-size: 0.875rem;
+  }
 }
 .duet-heading.h1.fixed-size {
   font-size: 3rem;
 }
+.duet-heading.h1.fixed-size .pre-post-heading {
+  font-size: 1.25rem;
+}
+.duet-heading.h1 .pre-post-heading {
+  font-size: 4vw;
+}
+@media (max-width: 25rem) {
+  .duet-heading.h1 .pre-post-heading {
+    font-size: 1rem;
+  }
+}
+@media (min-width: 31.25rem) {
+  .duet-heading.h1 .pre-post-heading {
+    font-size: 1.25rem;
+  }
+}
 .duet-heading.h2 {
   font-size: 5.8vw;
   line-height: 1.1;
@@ -144,10 +187,29 @@
   .duet-heading.h2 {
     font-size: 1.375rem;
   }
+  .duet-heading.h2 .pre-post-heading {
+    font-size: 0.875rem;
+  }
 }
 .duet-heading.h2.fixed-size {
   font-size: 2.25rem;
 }
+.duet-heading.h2.fixed-size .pre-post-heading {
+  font-size: 1rem;
+}
+.duet-heading.h2 .pre-post-heading {
+  font-size: 3.8vw;
+}
+@media (max-width: 23.0263157895rem) {
+  .duet-heading.h2 .pre-post-heading {
+    font-size: 0.875rem;
+  }
+}
+@media (min-width: 26.3157894737rem) {
+  .duet-heading.h2 .pre-post-heading {
+    font-size: 1rem;
+  }
+}
 .duet-heading.h3 {
   margin-bottom: 12px !important;
   font-size: 4.2vw;

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

@@ -58,7 +58,7 @@ export class DuetHeading {
     render() {
         const TagName = sanitizeString(this.level);
         const color = getColorByName(this.color);
-        return (h(TagName, { key: 'da445e961c7a06c19d0a0522e4af2814b0ae9aa4', class: {
+        return (h(TagName, { key: '0688ea9a9c1b36b5f8ca555051c1efa338bd1f57', class: {
                 "duet-heading": true,
                 "duet-heading-border": this.border !== false,
                 "duet-heading-border-solid": this.border === "solid",
@@ -69,7 +69,7 @@ export class DuetHeading {
                 [this.visualLevel ? this.visualLevel : this.level]: true,
                 "duet-theme-turva": this.theme === "turva",
                 "fixed-size": this.fixedSize,
-            }, "aria-label": this.accessibleLabel, style: { color }, part: "duet-heading" }, h("slot", { key: '7fffcae52939a894fd8c5ee37d67fccbbd0b4f16' })));
+            }, "aria-label": this.accessibleLabel, style: { color }, part: "duet-heading" }, this.preHeading && h("span", { key: 'ca9674066e83408743dda180faa73befac1f6ee2', class: "pre-post-heading" }, this.preHeading, " "), h("slot", { key: 'e2903a1c33bc8e3681523f2ab59ce83ad258bc87' }), this.postHeading && h("span", { key: '623bec656c67630d780b7922c922bf62da571dec', class: "pre-post-heading" }, " ", this.postHeading)));
     }
     static get is() { return "duet-heading"; }
     static get encapsulation() { return "shadow"; }
@@ -318,6 +318,44 @@ export class DuetHeading {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "preHeading": {
+                "type": "string",
+                "attribute": "pre-heading",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that is included inside the heading tag, but is rendered as smaller line above the slotted heading text.\nUse only with pages' main heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "postHeading": {
+                "type": "string",
+                "attribute": "post-heading",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text that is included inside the heading tag, but is rendered as smaller line below the slotted heading text.\nUse only with pages' main heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }

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

@@ -1423,7 +1423,7 @@ duet-heading + duet-button {
   outline-offset: 2px;
   outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-hero-link:focus, .duet-hero-link:focus.duet-theme-turva, .duet-theme-turva .duet-hero-link:focus, .duet-hero-link:focus.duet-theme-turva {
+.duet-theme-turva .duet-hero-link:focus, .duet-hero-link:focus.duet-theme-turva {
   outline: 2px solid;
   outline-offset: 2px;
   outline-color: rgba(53, 79, 101, 0.8);