@duetds/components 10.5.0 → 10.7.0

package/lib/collection/components/duet-submenu-bar-dropdown-link/duet-submenu-bar-dropdown-link.js

@@ -49,12 +49,12 @@ export class DuetSubmenuBarDropdownLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: 'd7f1a1d392bb3537d252a930db732bb9a062aa1a' }, h("a", { key: 'f29d863d04d3fb1a4bdced3ca6f4c474dfdf686b', class: {
+        return (h(Host, { key: '4576334bddababcad4705978843a1ae08e34e72d' }, h("a", { key: '8e115648050ee9bde7d9fffb9dc3b895b0c46cc3', class: {
                 "duet-submenu-bar-dropdown-link": true,
                 "duet-theme-turva": this.theme === "turva",
                 highlight: this.highlight,
                 active: this.active,
-            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: 'e971fcc188cd3bd8165992bf590ca2eab7ac36d2', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: '0098384100989c6ce00468717181578c80d39577', class: "label-container" }, h("span", { key: '7a7114ef344ebe12bbbf1a86aa1adc93f6877f1b', class: "label" }, h("slot", { key: 'c5ffaea2de58f7b00416bd02d103063278951d6c' })), this.caret && h("duet-icon", { key: 'e0c832ffb658a7561ddc817f5b5af9aa70780bea', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: 'f178e2e11a936dba6e05987d34fd3ba6a9d2ad02', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
+            }, "aria-current": this.active ? "true" : "false", href: this.href, onKeyUp: e => this.handleEscape(e) }, this.icon && h("duet-icon", { key: '3cb691c70dea145bcd829655518d1e2da8ec4a48', name: this.icon, size: "x-small", margin: "none", color: "currentColor" }), h("span", { key: 'd68d5f69f86de6ea467ea7acd2e6901950846c4c', class: "label-container" }, h("span", { key: '4d40b23d4ca997fa9261b19f36934c678f0f67d6', class: "label" }, h("slot", { key: 'adf85ab136a5ddbac43131933ebd5863274562e7' })), this.caret && h("duet-icon", { key: 'c766790219038e9fc9b8bfe3454f5641020965ac', name: "action-arrow-right-small", size: "xxx-small", margin: "none" })), this.active && (h("duet-icon", { key: '75759a4e4dd6032b73cf12fa7630b33f995e7499', class: "active-check", name: "messaging-checked-small", size: "xx-small", margin: "none", color: "currentColor" })))));
     }
     static get is() { return "duet-submenu-bar-dropdown-link"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-submenu-bar-item/duet-submenu-bar-item.js

@@ -80,7 +80,7 @@ export class DuetSubmenuBarItem {
     render() {
         const TagName = this.url ? "a" : "button";
         const role = this.url ? "link" : "button";
-        return (h(Host, { key: '003100904b0f93856bed193bd01dc1e376b06e6f', role: "listitem" }, h(TagName, { key: 'f16847c6d388d57dca985f6a6ddb9b0d6e1c6157', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '71b069df0ff1d797f2992b865e6ccbae58ac88d4', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'ff67a89fe841a2be286bffe807a171854cfe2c1f', class: "label" }, h("span", { key: '527aa1d31d10d8b327c62d283882e4c5dda3d362', class: "label-text" }, h("slot", { key: 'd13184e6dc0881e5596c8c9ad59031db71300f33' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '6f1a65c84496095f3fb339ba17f0a80ff9550b03', class: {
+        return (h(Host, { key: 'de4d2352d792c0adffd35bc86e9450b970bf8b0b', role: "listitem" }, h(TagName, { key: 'd07f89e5b67f9898e7ad18385c29956226bbd875', target: !this.url ? null : this.external ? "_blank" : "_self", ref: element => (this.itemElement = element), class: { "duet-submenu-bar-item": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.url, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false", "aria-label": (this.url && getAccessibleLinkLabel(this)) || this.accessibleLabel, "aria-expanded": this.accessibleExpanded != null ? this.accessibleExpanded.toString() : undefined, "aria-haspopup": this.accessiblePopup != null ? this.accessiblePopup.toString() : undefined, role: role, rel: this.external ? "noopener" : undefined }, this.leadingIcon && (h("duet-icon", { key: '0355e7d2be9da67841b162371e4c22bed4a58bf8', class: "leading-icon", theme: this.theme, name: this.leadingIcon, size: "auto", margin: "none", color: "currentColor" })), h("div", { key: 'c6cb759071a39f0ef8d86fcc657aabc6c174f6a8', class: "label" }, h("span", { key: '35b683122ff7739979a3c10ea756df2e0becccfe', class: "label-text" }, h("slot", { key: '530d2eec823596ae1a6c9148684a500bd48ebfae' })), (this.trailingIcon || this.external) && (h("duet-icon", { key: '95d91c2031615a6960ae2d476a92034f37cd5e7f', class: {
                 "trailing-icon": !!this.trailingIcon,
                 "trailing-icon-arrow": this.trailingIcon === "action-arrow-down-small",
                 "external-icon": !!this.external,

package/lib/collection/components/duet-submenu-bar-link/duet-submenu-bar-link.js

@@ -41,7 +41,7 @@ export class DuetSubmenuBarLink {
      * Always the last one in the class.
      */
     render() {
-        return (h(Host, { key: '0b8ab66aa806a5cda83d91b525f0df8f06d594de', role: "listitem" }, h("a", { key: '6afed3047487660b7f969cd5064b985899a86797', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: '2c2b94f00eb0428a73255667ed7d320fa81bac1f', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '98e5c15c559592573613071d617fc46cf2b8d6f5', class: "label" }, h("slot", { key: 'b99c0f46131d490d6aa540d646fc7750c255c4b4' })))));
+        return (h(Host, { key: 'f21f33d16d3f1e5435db17e9cd84b5c6be8b9a27', role: "listitem" }, h("a", { key: 'd0a5cbf0af61c71728e231fe37161b3771d32239', class: { "duet-submenu-bar-link": true, "duet-theme-turva": this.theme === "turva", active: this.active }, href: this.href, onKeyUp: e => this.handleEscape(e), "aria-current": this.active ? "true" : "false" }, this.icon && (h("duet-icon", { key: '62d39b5711cb99bbe1e6a5116d365926cbb7a00e', class: "submenu-bar-link-icon", theme: this.theme, name: this.icon, size: "auto", margin: "none", color: "currentColor" })), h("span", { key: '0c4fad2999da91f0c87910c43f30c028482581ca', class: "label" }, h("slot", { key: '9f803721b07edf060c3a0c3c65190f8205ab0422' })))));
     }
     static get is() { return "duet-submenu-bar-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -110,7 +110,7 @@ export class DuetTab {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '12b8133d0bbf92a085f5c39db06ad4f61be77770', ref: element => {
+        return (h("div", { key: '91c006415c8db98625168cc1509f085f9f25424e', ref: element => {
                 if (!this.contentId) {
                     this.tabpanelElement = element;
                 }
@@ -119,7 +119,7 @@ export class DuetTab {
                 "duet-tab": true,
                 selected: this.selected,
                 "has-content-id": !!this.contentId,
-            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", { key: 'f4d601ccf9017d30770ea9eaaf5873b32fcab605' })));
+            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", { key: 'cbcb9eb3c000e67f2aa896af7159101672c5c8af' })));
     }
     static get is() { return "duet-tab"; }
     static get encapsulation() { return "shadow"; }

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -281,13 +281,13 @@ export class DuetTabGroup {
                 [largeBreakpoint]: ["default", "plain", "plain-scrolling"].includes(this.variation) ? true : false,
                 "duet-theme-turva": this.theme === "turva",
             }, onClick: () => this.onTabSelect(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label), element.indicator && (h("duet-indicator", { variation: element.indicator, "accessible-label": element.indicatorAccessibleLabel })))));
-        return (h("div", { key: '9662897bf265783e330558b8a1b463729026b044', class: {
+        return (h("div", { key: '417e3a0eb99cdf3d6df636586be7435cad2144ac', class: {
                 "duet-tab-group": true,
                 "duet-theme-turva": this.theme === "turva",
                 [variationClass]: true,
                 "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
                 "duet-tab-group-scrolls": true,
-            }, "aria-label": this.accessibleLabel }, h("div", { key: 'bbeef489c8be2a79c22b7fb355a431fada517c63', role: "tablist", class: {
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'da12d48bcbb77d4e88ca34c63ee54c63db53eacd', role: "tablist", class: {
                 "duet-m-0": this.margin === "none" || this.variation === "checked",
                 "duet-tab-group-tabs": true,
                 "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
@@ -298,11 +298,11 @@ export class DuetTabGroup {
             } }, this.variation === "checked" ? (buttons) : (h("div", { class: {
                 "duet-tab-group-scrollable-wrapper": true,
                 "duet-tab-group-fill-space-wrapper": this.fillSpace && this.variation === "default",
-            } }, this.fillSpace && !this.stretch && this.variation === "default" && (h("div", { class: "duet-scrollable-stretch-overlay" }, h("div", { class: "background" }), h("div", { class: "border" }))), h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center", theme: this.theme, stretch: this.stretch }, buttons)))), h("div", { key: '48bc3f8b5d1ec742e59db454a6b1649e29b7605e', class: {
+            } }, this.fillSpace && !this.stretch && this.variation === "default" && (h("div", { class: "duet-scrollable-stretch-overlay" }, h("div", { class: "background" }), h("div", { class: "border" }))), h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: ["default", "plain", "plain-scrolling"].includes(this.variation) ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center", theme: this.theme, stretch: this.stretch }, buttons)))), h("div", { key: '25e346444619db75d262e11a84acdfaaafa2257c', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: 'b6af6d77ff36c34028e664664c71ed391a54066b' }))));
+            } }, h("slot", { key: 'c63f225ca6cd084bb78f4f3bcc046d21c9d47e0a' }))));
     }
     static get is() { return "duet-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -420,7 +420,7 @@ export class DuetTabGroup {
                     "references": {
                         "DuetTabVariation": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabVariation"
                         }
                     }
@@ -743,7 +743,7 @@ export class DuetTabGroup {
                     "references": {
                         "DuetTabGroupEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
                         }
                     }
@@ -764,7 +764,7 @@ export class DuetTabGroup {
                     "references": {
                         "DuetTabGroupEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
                         }
                     }
@@ -785,7 +785,7 @@ export class DuetTabGroup {
                     "references": {
                         "DuetTabGroupEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
                         }
                     }
@@ -809,7 +809,7 @@ export class DuetTabGroup {
                         },
                         "DuetTabGroupEvent": {
                             "location": "local",
-                            "path": "/Users/juha-matti.laaksonen/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "path": "/Users/kasimir/projects/lahitapiola/duet-design-system/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
                             "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
                         }
                     },

package/lib/collection/components/duet-table/duet-table-styles.js

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { colorGrayDarkTurva, colorGrayDarker, colorGrayDarkerTurva, colorGrayLight, colorGrayLightest, colorGrayLightTurva, colorPrimary, colorSecondary, colorSecondaryTurva, colorTurvaGray900, fontFamilyText, fontFamilyTextTurva, fontSizeMedium, fontWeightSemiBold, lineHeightSmall, mediaQueryXSmall, spaceLarge, spaceMedium, spaceSmall, spaceXxSmall, } from "@duetds/tokens";
+import { colorForegroundSecondary, colorForegroundSecondaryTurva, colorGrayDarker, colorGrayDarkerTurva, colorGrayLight, colorGrayLightest, colorGrayLightTurva, colorPrimary, colorSecondary, colorSecondaryTurva, colorTurvaGray900, fontFamilyText, fontFamilyTextTurva, fontSizeMedium, fontWeightSemiBold, lineHeightSmall, mediaQueryXSmall, spaceLarge, spaceMedium, spaceSmall, spaceXxSmall, } from "@duetds/tokens";
 const rgbable = (value) => {
     return value.replace("rgb(", "").replace(")", "");
 };
@@ -72,7 +72,7 @@ duet-table {
   th {
     font-weight: ${fontWeightSemiBold};
     line-height: ${lineHeightSmall};
-    color: ${colorGrayDarker};
+    color: ${colorForegroundSecondary};
     text-align: left;
   }
 
@@ -224,7 +224,7 @@ duet-table {
     }
   }
 
-  
+
 
   tbody th {
     padding-top: calc(${spaceLarge} * 2) !important;
@@ -410,7 +410,7 @@ duet-table {
     }
   }
 }
-  
+
 duet-table.duet-theme-turva table {
   font-family: ${fontFamilyTextTurva};
 }
@@ -420,7 +420,7 @@ duet-table.duet-theme-turva td {
 }
 
 duet-table.duet-theme-turva th {
-  color: ${colorGrayDarkTurva};
+  color: ${colorForegroundSecondaryTurva};
 }
 
 duet-table.duet-theme-turva tbody th {

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

@@ -144,7 +144,7 @@ export class DuetTable {
         });
     }
     render() {
-        return (h(Host, { key: '9f1704f22fc4624b02f78c7aef30b43a788ce295', class: {
+        return (h(Host, { key: '1dee35eb36b222e57e85e68f730b6460a8b9e63c', class: {
                 [`duet-table-${this.variation}`]: true,
                 "duet-table-flattened": !this.matchesBreakpoint,
                 // sticky only valid when in regular table layout
@@ -153,7 +153,7 @@ export class DuetTable {
                 "duet-m-0": this.margin === "none",
                 "duet-theme-turva": this.theme === "turva",
                 "duet-table-hide-head-visually": this.hideHeadVisually,
-            } }, h("slot", { key: '110acd28c9af7e36e6be318cfc5ad44251b72d32' })));
+            } }, h("slot", { key: '933771b95dbc033acc97acf8396d23e2fa5e7651' })));
     }
     static get is() { return "duet-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,127 @@
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: 0;
+}
+
+:host {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  display: block;
+  width: auto;
+  container-type: inline-size;
+}
+
+.duet-teaser {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+}
+.duet-teaser .image-wrap,
+.duet-teaser .icon-wrap {
+  margin-bottom: 16px;
+}
+.duet-teaser .image-wrap {
+  display: inline-block;
+  overflow: hidden;
+  border-radius: 16px;
+}
+.duet-teaser .image-wrap .duet-teaser-image {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16/10;
+  object-fit: cover;
+}
+.duet-teaser .icon-wrap .duet-teaser-icon {
+  display: block;
+  width: 30px;
+  width: 62px;
+  height: 30px;
+  height: 62px;
+}
+@container (width > 450px) {
+  .duet-teaser .icon-wrap .duet-teaser-icon {
+    width: 36px;
+    width: 76px;
+    height: 36px;
+    height: 76px;
+  }
+}
+.duet-teaser ::slotted(.teaser-heading) {
+  margin: 0 0 1rem 0;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.25;
+}
+.duet-teaser ::slotted(.teaser-heading-h5) {
+  font-size: 1.25rem;
+  font-weight: 600;
+  line-height: 1.25;
+}
+.duet-teaser .duet-teaser-body {
+  display: flex;
+  flex-direction: column;
+}
+.duet-teaser .duet-teaser-body .duet-teaser-meta {
+  order: -1;
+  padding-top: 8px;
+}
+.duet-teaser.duet-teaser-link {
+  text-decoration: none;
+}
+.duet-teaser.duet-teaser-link:focus {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-teaser.duet-teaser-link:focus, .duet-teaser.duet-teaser-link:focus.duet-theme-turva {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
+}
+.duet-teaser.duet-teaser-link .image-wrap {
+  display: inline-block;
+  overflow: hidden;
+}
+.duet-teaser.duet-teaser-link .image-wrap img {
+  transition: transform 300ms ease;
+}
+.duet-teaser.duet-teaser-link ::slotted(.teaser-heading) {
+  color: rgb(0, 75, 129);
+}
+.duet-teaser.duet-teaser-link:hover .teaser-heading {
+  color: rgb(0, 97, 155);
+}
+.duet-teaser.duet-teaser-link:hover .image-wrap img {
+  transform: scale(1.1);
+  transition: transform 300ms ease;
+}
+.duet-teaser.duet-teaser-link:hover ::slotted(.teaser-heading) {
+  color: rgb(0, 97, 155);
+  text-decoration: underline;
+}
+
+.duet-theme-turva.duet-teaser {
+  font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+.duet-theme-turva.duet-teaser-link ::slotted(.teaser-heading) {
+  color: rgb(140, 0, 30);
+}
+.duet-theme-turva.duet-teaser-link:hover ::slotted(.teaser-heading) {
+  color: rgb(185, 3, 41);
+}