@duetds/components 10.0.0-alpha.2 → 10.0.0-alpha.4

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

@@ -93,7 +93,7 @@ export class DuetTab {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '82a68331e195880eaab4d0975ebe843c8b0383e8', ref: element => {
+        return (h("div", { key: '5376b9cb2792c5159fab470027b49f0a665d1e02', ref: element => {
                 if (!this.contentId) {
                     this.tabpanelElement = element;
                 }
@@ -102,7 +102,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: '1c63bb93ad6c9c031569794c156568497ee28b27' })));
+            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", { key: '2efcb680c2d921e5c1c29d9114f3f997a5ead373' })));
     }
     static get is() { return "duet-tab"; }
     static get encapsulation() { return "shadow"; }

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

@@ -36,14 +36,6 @@
 .duet-tab-group-tabs.duet-m-0 {
   margin: 0 !important;
 }
-.duet-tab-group-tabs.duet-tab-group-collapses.duet-tab-group-hidden {
-  display: none;
-}
-@media (min-width: 36em) {
-  .duet-tab-group-tabs.duet-tab-group-collapses.duet-tab-group-hidden {
-    display: block;
-  }
-}
 .duet-tab-variation-plain .duet-tab-group-tabs {
   border-bottom: 1px solid rgb(212, 223, 229);
 }
@@ -54,6 +46,7 @@
 .duet-tab-variation-checked .duet-tab-group-tabs {
   display: flex;
   gap: 4px;
+  padding-top: 0;
   padding-right: 12px;
   padding-left: 12px;
   overflow-x: scroll;
@@ -103,21 +96,19 @@
   user-select: none;
   position: relative;
   z-index: 100;
-  display: block;
-  width: 100%;
+  display: inline-block;
+  width: auto;
   padding: 20px;
-  margin-top: -2px;
+  margin-left: -2px;
   overflow: visible;
   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.1;
-  color: rgb(8, 42, 77);
   text-align: left;
   text-decoration: none;
   cursor: pointer;
-  background: rgb(255, 255, 255);
-  border: 2px solid rgb(212, 223, 229);
+  border-right: 2px solid rgb(212, 223, 229);
   border-radius: 0;
   transition: 150ms ease;
 }
@@ -162,7 +153,6 @@
 .duet-theme-turva .duet-tab-button {
   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);
-  border-color: rgb(222, 224, 228);
 }
 .duet-theme-turva .duet-tab-button.duet-notification-mark-warning::after {
   position: absolute;
@@ -199,15 +189,6 @@
 .duet-tab-button.duet-p-0 {
   padding: 0 !important;
 }
-@media (min-width: 36em) {
-  .duet-tab-button {
-    display: inline-block;
-    width: auto;
-    margin-left: -2px;
-    border-right: 2px solid rgb(212, 223, 229);
-    border-radius: 0;
-  }
-}
 .duet-tab-button:hover {
   z-index: 200;
   border-color: rgb(127, 150, 165);
@@ -221,16 +202,16 @@
 }
 .duet-tab-button.selected {
   z-index: 201;
-  color: rgb(255, 255, 255);
-  background: rgb(8, 42, 77);
-  border-color: rgb(8, 42, 77);
+  color: rgb(0, 119, 179);
+  background: rgb(255, 255, 255);
+  border-bottom: 3px solid rgb(0, 119, 179);
   outline: 0;
   box-shadow: none !important;
 }
 .duet-theme-turva .duet-tab-button.selected {
-  color: rgb(255, 255, 255);
-  background-color: rgb(23, 28, 58);
-  border-color: rgb(23, 28, 58);
+  color: rgb(198, 12, 48);
+  border-color: rgb(222, 224, 228);
+  border-bottom-color: rgb(198, 12, 48);
 }
 .duet-tab-button:focus {
   z-index: 200;
@@ -242,26 +223,57 @@
 :host(.user-is-tabbing) .duet-theme-turva .duet-tab-button:focus {
   box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
 }
-.duet-tab-button:first-child {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+.duet-tab-variation-default .duet-tab-button {
+  padding: 15px 28px 17px 28px;
+  overflow: hidden;
+  color: rgb(81, 105, 123);
+  background: rgb(245, 248, 250);
+  border: 1px solid rgb(212, 223, 229);
 }
-@media (min-width: 36em) {
-  .duet-tab-button:first-child {
-    border-top-right-radius: 0;
-    border-bottom-left-radius: 4px;
-  }
+.duet-tab-variation-default .duet-tab-button.selected {
+  color: rgb(8, 42, 77);
+  background: rgb(255, 255, 255);
 }
-.duet-tab-button:last-child {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
+.duet-tab-variation-default .duet-tab-button.selected::after {
+  position: absolute;
+  right: -1px;
+  bottom: 0;
+  z-index: 300;
+  display: block;
+  width: calc(100% + 2px);
+  height: 2px;
+  content: "";
+  background-color: rgb(0, 119, 179);
 }
-@media (min-width: 36em) {
-  .duet-tab-button:last-child {
-    border-radius: 0;
-    border-top-right-radius: 4px;
-    border-bottom-right-radius: 4px;
-  }
+.duet-tab-variation-default .duet-tab-button:not(.selected) {
+  box-shadow: 0 3px 2px -1px rgba(0, 41, 77, 0.1) inset, 0 0 0 rgb(212, 223, 229);
+}
+.duet-tab-variation-default .duet-tab-button:hover:not(.selected) {
+  color: rgb(45, 64, 81);
+  background: rgb(228, 236, 239);
+}
+.duet-tab-variation-default .duet-tab-button:first-child {
+  border-radius: 8px 0 0 8px;
+}
+.duet-tab-variation-default .duet-tab-button:last-child {
+  border-radius: 0 8px 8px 0;
+}
+.duet-theme-turva.duet-tab-variation-default .duet-tab-button {
+  color: rgb(98, 104, 122);
+}
+.duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected {
+  color: rgb(51, 5, 20);
+  background: rgb(255, 255, 255);
+}
+.duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected::after {
+  background-color: rgb(198, 12, 48);
+}
+.duet-theme-turva.duet-tab-variation-default .duet-tab-button:not(.selected) {
+  box-shadow: 0 3px 2px -1px rgba(23, 28, 58, 0.1) inset, 0 0 0 rgb(222, 224, 228);
+}
+.duet-theme-turva.duet-tab-variation-default .duet-tab-button:hover:not(.selected) {
+  color: rgb(45, 52, 79);
+  background: rgb(234, 235, 239);
 }
 .duet-tab-variation-plain .duet-tab-button {
   display: inline-block;
@@ -269,23 +281,19 @@
   padding-right: 0;
   padding-left: 0;
   margin-left: 0;
-  border: 0;
+  border-width: 0;
   border-radius: 0;
   transition: none;
 }
+.duet-tab-variation-plain .duet-tab-button.selected {
+  border-bottom: 2px solid rgb(0, 119, 179);
+}
 .duet-tab-variation-plain .duet-tab-button + .duet-tab-button {
   margin-left: 36px;
 }
-.duet-tab-variation-plain .duet-tab-button.selected {
-  color: rgb(0, 119, 179);
-  background: rgb(255, 255, 255);
-  border-bottom: 3px solid rgb(0, 119, 179);
-}
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected {
-  color: rgb(198, 12, 48);
-  border-bottom-color: rgb(198, 12, 48);
+  border-bottom: 2px solid rgb(198, 12, 48);
 }
-
 .duet-tab-variation-checked .duet-tab-button {
   position: relative;
   display: inline-block;
@@ -295,7 +303,9 @@
   min-width: 200px;
   padding: 8px 4px;
   border-color: rgb(181, 198, 208);
+  border-top: 2px solid rgb(181, 198, 208);
   border-bottom-color: rgb(0, 119, 179);
+  border-left: 2px solid rgb(181, 198, 208);
   border-radius: 4px 4px 0 0;
   transition: none;
 }

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

@@ -49,35 +49,18 @@ export class DuetTabGroup {
             }
         };
         this.scrollToActive = () => {
-            if (this.variation === "checked" || this.variation === "plain-scrolling") {
-                setTimeout(() => {
-                    const active = this.tabsContainer.querySelector(".selected");
-                    if (active) {
-                        active.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
-                    }
-                }, 50);
-            }
-        };
-        this.renderTab = () => {
-            const renderedTabs = this.tabs.map((element, index) => {
-                return (h("button", { role: "tab", id: this.getButtonId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: element.selected ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
-                        "duet-p-0": this.padding === "none",
-                        "duet-tab-button": true,
-                        "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
-                        selected: element.selected,
-                        [`duet-notification-mark-${element.notificationMark}`]: !!element.notificationMark,
-                    }, 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)));
-            });
-            if (this.scrolls) {
-                return (h("duet-scrollable", { selected: this.selected, identifier: this.identifier }, renderedTabs));
-            }
-            return renderedTabs;
+            setTimeout(() => {
+                const active = this.tabsContainer.querySelector(".selected");
+                if (active) {
+                    active.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+                }
+            }, 50);
         };
         this.tabs = [];
         this.selected = undefined;
         this.theme = "";
-        this.scrolls = false;
-        this.collapses = true;
+        this.scrolls = true;
+        this.collapses = false;
         this.accessibleLabel = undefined;
         this.variation = "default";
         this.language = getLanguage();
@@ -196,34 +179,44 @@ export class DuetTabGroup {
         }
         return;
     }
+    /**
+     * To support text-align: center;
+     */
+    isCentered() {
+        return window && window.getComputedStyle(this.element).textAlign == "center";
+    }
     /**
      * render() function
      * Always the last one in the class.
      */
     render() {
+        // TODO: get rid of plain-scrolling class, as we always scroll
         const variationClass = this.variation === "plain-scrolling" ? "duet-tab-variation-plain" : `duet-tab-variation-${this.variation}`;
         const isSwipeScrollable = this.variation === "checked" || this.variation === "plain-scrolling";
-        return (h("div", { key: '55b19c0083ced74f0862c8879512d8a7ac550ccf', class: {
+        const buttons = this.tabs.map((element, index) => (h("button", { role: "tab", id: this.getButtonId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: element.selected ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
+                "duet-p-0": this.padding === "none",
+                "duet-tab-button": true,
+                "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
+                selected: element.selected,
+                [`duet-notification-mark-${element.notificationMark}`]: !!element.notificationMark,
+            }, 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))));
+        return (h("div", { key: '05e714be871fbdeaac2b41a9f846664202b5eac8', 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": this.scrolls,
-                "duet-tab-group-collapses": this.collapses,
-            }, "aria-label": this.accessibleLabel }, !isSwipeScrollable && this.tabs.length > 3 && this.collapses && (h("duet-select", { key: 'fa42a4e505fb4d94cfde64470682bcda87c4e8a8', value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.onTabSelect(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
-                return { label: tab.label, value: index.toString() };
-            }) })), h("div", { key: '5a4ba1e8089bd37f2bcd012ef58285369eb0282f', role: "tablist", class: {
+                "duet-tab-group-scrolls": true,
+            }, "aria-label": this.accessibleLabel }, h("div", { key: 'd680490d85ad3d735bb85d4c704cd48fd1feaf66', 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,
-                "duet-tab-group-collapses": this.collapses,
             }, ref: el => {
                 this.tabsContainer = el;
-            } }, this.renderTab()), h("div", { key: 'd80d6fdd3ad52d8c0dfd13d7ae1d906703eac971', class: {
+            } }, this.variation === "checked" ? (buttons) : (h("duet-scrollable", { selected: this.selected, identifier: this.identifier, gap: this.variation === "default" ? "none" : "large", buttonPosition: this.variation === "default" ? "absolute" : "relative", center: this.isCentered() ? this.isCentered() : this.element.style.textAlign == "center" }, buttons))), h("div", { key: 'a8aa2ad19a01759d5eed47140ec483e5cb4a8df5', class: {
                 "duet-tab-group-content": true,
                 "duet-m-0": this.margin === "none",
                 "checked-group-content": this.variation === "checked",
-            } }, h("slot", { key: 'a14facc65a69917ede3d270a93919e949aa5116e' }))));
+            } }, h("slot", { key: '0b630a0821503c480cf580600c68dbb5a3ab2bfa' }))));
     }
     static get is() { return "duet-tab-group"; }
     static get encapsulation() { return "shadow"; }
@@ -276,14 +269,17 @@ export class DuetTabGroup {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens),\nif this is a number instead of true it will be used as \"amount of items to scroll\""
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "scrolling is now the deafult behavior which can not be overridden, and this attribute has no effect"
+                        }],
+                    "text": "Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens)"
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "scrolls",
                 "reflect": false,
-                "defaultValue": "false"
+                "defaultValue": "true"
             },
             "collapses": {
                 "type": "boolean",
@@ -296,14 +292,17 @@ export class DuetTabGroup {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "as scrolls is now always enabled, tabs never collapse to a dropdown, and this attribute has no effect"
+                        }],
                     "text": "Whether the tab-group collapses to a select dropwdown in minor breakpoints"
                 },
                 "getter": false,
                 "setter": false,
                 "attribute": "collapses",
                 "reflect": false,
-                "defaultValue": "true"
+                "defaultValue": "false"
             },
             "accessibleLabel": {
                 "type": "string",
@@ -343,7 +342,7 @@ export class DuetTabGroup {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Style variation of the tab group."
+                    "text": "Style variation of the tab group. Note that \"plain-scrolling\" is deprecated, as tab-group now allways has scrolling\nbehavior, use values \"default\", \"plain\" or \"checked\""
                 },
                 "getter": false,
                 "setter": false,