@duetds/components 10.0.0-alpha.9 → 10.0.0

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

@@ -8,6 +8,32 @@ import { connectLanguageChangeObserver, disconnectLanguageChangeObserver, getLoc
 import { getShadowByName } from "../../utils/token-utils";
 export class DuetTab {
     constructor() {
+        /**
+         * Theme of the component.
+         */
+        this.theme = "";
+        /**
+         * Defaults for AccessibleLabel
+         * @default null
+         */
+        this.accessibleDescriptionDefault = null;
+        /**
+         * String for AccessibleLabel
+         * @default null
+         */
+        this.accessibleDescription = this
+            .accessibleDescriptionDefault
+            ? getLocaleString(this.accessibleDescriptionDefault)
+            : null;
+        /**
+         * String of id's that indicate alternative labels elements
+         */
+        this.accessibleLabelledBy = undefined;
+        /**
+         * HTML id of element that is to be used when opening this tab.
+         * This enables decoupling the content from the tab buttons.
+         */
+        this.contentId = undefined;
         this.setupContentElement = () => {
             if (this.contentId) {
                 this.tabpanelElement = document.getElementById(this.contentId);
@@ -43,18 +69,6 @@ export class DuetTab {
             this.tabpanelElement.style.outline = null;
             this.tabpanelElement.style.boxShadow = null;
         };
-        this.theme = "";
-        this.label = undefined;
-        this.caption = undefined;
-        this.selected = undefined;
-        this.notificationMark = undefined;
-        this.accessibleDescriptionDefault = null;
-        this.accessibleDescription = this
-            .accessibleDescriptionDefault
-            ? getLocaleString(this.accessibleDescriptionDefault)
-            : null;
-        this.accessibleLabelledBy = undefined;
-        this.contentId = undefined;
     }
     componentWillLoad() {
         inheritGlobalTheme(this);
@@ -65,6 +79,9 @@ export class DuetTab {
     connectedCallback() {
         connectLanguageChangeObserver(this, { prop: "accessibleDescription", defaults: "accessibleDescriptionDefault" });
         subscribeTabbingChange(this);
+        if (this.notificationMark) {
+            this.indicator = this.notificationMark === "warning" ? "change" : "error";
+        }
         this.setupContentElement();
     }
     disconnectedCallback() {
@@ -93,7 +110,7 @@ export class DuetTab {
      * Always the last one in the class.
      */
     render() {
-        return (h("div", { key: '7b32395451131750ebd28c6967302efb6205f9e8', ref: element => {
+        return (h("div", { key: 'a022a330a4f4eef2664a452c8f0df2b84e46c429', ref: element => {
                 if (!this.contentId) {
                     this.tabpanelElement = element;
                 }
@@ -102,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: 'ca8b2a951dc90dc029b9088d1f2888a0deccf673' })));
+            }, "aria-description": this.accessibleDescription, "aria-labelledby": this.accessibleLabelledBy, tabindex: "-1" }, h("slot", { key: 'fcb609d847cf496ada314f386a9b82dab58a7c19' })));
     }
     static get is() { return "duet-tab"; }
     static get encapsulation() { return "shadow"; }
@@ -120,6 +137,7 @@ export class DuetTab {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -140,12 +158,12 @@ export class DuetTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "label": {
                 "type": "string",
+                "attribute": "label",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -160,11 +178,11 @@ export class DuetTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "label",
                 "reflect": true
             },
             "caption": {
                 "type": "string",
+                "attribute": "caption",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -179,11 +197,11 @@ export class DuetTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "caption",
                 "reflect": true
             },
             "selected": {
                 "type": "boolean",
+                "attribute": "selected",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -198,11 +216,11 @@ export class DuetTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "selected",
                 "reflect": true
             },
             "notificationMark": {
                 "type": "string",
+                "attribute": "notification-mark",
                 "mutable": false,
                 "complexType": {
                     "original": "\"warning\" | \"danger\"",
@@ -211,17 +229,64 @@ export class DuetTab {
                 },
                 "required": false,
                 "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use indicator property instead.\nNotification mark to show in the tab button. Works better with plain variation, as the dark background of\nselected default button makes the mark less noticable."
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true
+            },
+            "indicator": {
+                "type": "string",
+                "attribute": "indicator",
+                "mutable": true,
+                "complexType": {
+                    "original": "IndicatorVariation",
+                    "resolved": "\"change\" | \"error\" | \"new\" | \"success\"",
+                    "references": {
+                        "IndicatorVariation": {
+                            "location": "import",
+                            "path": "../duet-indicator/duet-indicator",
+                            "id": "src/components/duet-indicator/duet-indicator.tsx::IndicatorVariation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Notification mark to show in the tab button. Works better with plain variation, as the dark background of\nselected default button makes the mark less noticable."
+                    "text": "Indicator to show in the tab button."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "notification-mark",
                 "reflect": true
             },
+            "indicatorAccessibleLabel": {
+                "type": "string",
+                "attribute": "indicator-accessible-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Provides accessible text for the Duet Indicator. If Indicator's default is sufficient this is not needed."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "accessibleDescriptionDefault": {
                 "type": "string",
+                "attribute": "accessible-description-defaults",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetLangObject | string",
@@ -245,12 +310,12 @@ export class DuetTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description-defaults",
                 "reflect": false,
                 "defaultValue": "null"
             },
             "accessibleDescription": {
                 "type": "string",
+                "attribute": "accessible-description",
                 "mutable": true,
                 "complexType": {
                     "original": "string",
@@ -268,12 +333,12 @@ export class DuetTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-description",
                 "reflect": false,
                 "defaultValue": "this\n    .accessibleDescriptionDefault\n    ? getLocaleString(this.accessibleDescriptionDefault)\n    : null"
             },
             "accessibleLabelledBy": {
                 "type": "string",
+                "attribute": "accessible-labelled-by",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -288,12 +353,12 @@ export class DuetTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "accessible-labelled-by",
                 "reflect": false,
                 "defaultValue": "undefined"
             },
             "contentId": {
                 "type": "string",
+                "attribute": "content-id",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -308,7 +373,6 @@ export class DuetTab {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "content-id",
                 "reflect": false,
                 "defaultValue": "undefined"
             }

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

@@ -4,22 +4,22 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
 }
 
 :host {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  background: transparent;
-  border: 0;
   -moz-appearance: none;
   -webkit-appearance: none;
   appearance: none;
+  background: transparent;
+  border: 0;
   -webkit-tap-highlight-color: transparent;
   display: block;
   width: 100%;
@@ -84,6 +84,49 @@
     overflow: auto;
   }
 }
+.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper {
+  /* stylelint-enable */
+}
+.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border-radius: 8px;
+  /* stylelint-disable */
+}
+.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay {
+  display: contents;
+}
+.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .background,
+.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .border {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  border-radius: 8px;
+}
+.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .background {
+  z-index: 100;
+  background: rgb(245, 248, 250);
+}
+.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .background::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  margin-block: 1px;
+  content: "";
+  border-radius: 8px;
+  box-shadow: 0 3px 2px -1px rgba(0, 41, 77, 0.1) inset, 0 0 0 rgb(212, 223, 229);
+}
+.duet-theme-turva .duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .background::after {
+  box-shadow: 0 3px 2px -1px rgba(23, 28, 58, 0.1) inset, 0 0 0 rgb(222, 224, 228);
+}
+.duet-tab-group-tabs .duet-tab-group-scrollable-wrapper.duet-tab-group-fill-space-wrapper .duet-scrollable-stretch-overlay .border {
+  z-index: 206;
+  border: 1px solid rgb(212, 223, 229);
+}
 
 @media (min-width: 36em) {
   duet-select {
@@ -118,74 +161,24 @@
 .duet-tab-button.duet-m-0 {
   margin: 0 !important;
 }
-.duet-tab-button.duet-notification-mark-warning::after {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  content: "";
-  border-radius: 50%;
-  background: rgb(247, 178, 40);
-  box-shadow: 0 0 0 1px #dea024;
-}
-.duet-tab-variation-plain .duet-tab-button.duet-notification-mark-warning::after {
-  top: calc(50% - 0.5rem - 6px);
-  right: -6px;
+.duet-tab-group-stretch .duet-tab-button {
+  flex: 1 1 0;
+  min-width: fit-content;
+  text-align: center;
 }
-.duet-tab-button.duet-notification-mark-danger::after {
+.duet-tab-button duet-indicator {
   position: absolute;
-  top: 6px;
-  right: 6px;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  content: "";
-  border-radius: 50%;
-  background: rgb(214, 28, 82);
-  box-shadow: 0 0 0 1px #c1194a;
+  top: 5px;
+  right: 5px;
 }
-.duet-tab-variation-plain .duet-tab-button.duet-notification-mark-danger::after {
-  top: calc(50% - 0.5rem - 6px);
-  right: -6px;
+.duet-tab-variation-plain .duet-tab-button duet-indicator {
+  top: calc(50% - 0.5rem - 7px);
+  right: -7px;
 }
 .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);
 }
-.duet-theme-turva .duet-tab-button.duet-notification-mark-warning::after {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  content: "";
-  border-radius: 50%;
-  background: rgb(247, 178, 40);
-  box-shadow: 0 0 0 1px #dea024;
-}
-.duet-tab-variation-plain .duet-theme-turva .duet-tab-button.duet-notification-mark-warning::after {
-  top: calc(50% - 0.5rem - 6px);
-  right: -6px;
-}
-.duet-theme-turva .duet-tab-button.duet-notification-mark-danger::after {
-  position: absolute;
-  top: 6px;
-  right: 6px;
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  content: "";
-  border-radius: 50%;
-  background: rgb(214, 28, 82);
-  box-shadow: 0 0 0 1px #c1194a;
-}
-.duet-tab-variation-plain .duet-theme-turva .duet-tab-button.duet-notification-mark-danger::after {
-  top: calc(50% - 0.5rem - 6px);
-  right: -6px;
-}
 .duet-tab-button.duet-p-0 {
   padding: 0 !important;
 }
@@ -194,7 +187,7 @@
   border-color: rgb(127, 150, 165);
 }
 .duet-theme-turva .duet-tab-button:hover {
-  border-color: rgb(143, 147, 158);
+  border-color: rgba(199, 202, 207, 0.8);
 }
 .duet-tab-button:active {
   opacity: 0.75;
@@ -203,9 +196,9 @@
 .duet-tab-button.selected {
   z-index: 201;
   color: rgb(0, 119, 179);
+  outline: 0;
   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 {
@@ -214,20 +207,23 @@
   border-bottom-color: rgb(198, 12, 48);
 }
 .duet-tab-button:focus {
-  z-index: 200;
+  z-index: 205;
   outline: 0;
 }
 :host(.user-is-tabbing) .duet-tab-button:focus {
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
+  outline: 2px solid;
+  outline-offset: 0;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-: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-theme-turva :host(.user-is-tabbing) .duet-tab-button:focus, :host(.user-is-tabbing) .duet-tab-button:focus.duet-theme-turva, .duet-theme-turva2 :host(.user-is-tabbing) .duet-tab-button:focus, :host(.user-is-tabbing) .duet-tab-button:focus.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-tab-variation-default .duet-tab-button {
+  z-index: 200;
   padding: 11px 20px 13px 20px;
   overflow: hidden;
   font-size: 0.875rem;
-  color: rgb(81, 105, 123);
+  color: rgb(62, 84, 102);
   background: rgb(245, 248, 250);
   border: 1px solid rgb(212, 223, 229);
 }
@@ -244,8 +240,9 @@
 .duet-tab-variation-default .duet-tab-button.selected {
   color: rgb(8, 42, 77);
   background: rgb(255, 255, 255);
+  transition: none;
 }
-.duet-tab-variation-default .duet-tab-button.selected::after {
+.duet-tab-variation-default .duet-tab-button.selected::before {
   position: absolute;
   right: -1px;
   bottom: 0;
@@ -256,11 +253,22 @@
   content: "";
   background-color: rgb(0, 119, 179);
 }
+.duet-tab-variation-default .duet-tab-button.selected:focus-visible {
+  outline: 2px solid;
+  outline-offset: -5px;
+  outline-color: rgba(0, 119, 179, 0.8);
+}
+.duet-theme-turva .duet-tab-variation-default .duet-tab-button.selected:focus-visible, .duet-tab-variation-default .duet-tab-button.selected:focus-visible.duet-theme-turva, .duet-theme-turva2 .duet-tab-variation-default .duet-tab-button.selected:focus-visible, .duet-tab-variation-default .duet-tab-button.selected:focus-visible.duet-theme-turva2 {
+  outline-color: rgba(53, 79, 101, 0.8);
+}
+.duet-tab-variation-default .duet-tab-button.selected:focus-visible::before {
+  height: 0;
+}
 .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);
+  color: rgb(30, 45, 59);
   background: rgb(228, 236, 239);
 }
 .duet-tab-variation-default .duet-tab-button:first-child {
@@ -269,20 +277,31 @@
 .duet-tab-variation-default .duet-tab-button:last-child {
   border-radius: 0 8px 8px 0;
 }
+.duet-tab-variation-default .duet-tab-group-fill-space .duet-tab-button {
+  z-index: 200;
+}
+.duet-tab-variation-default .duet-tab-group-fill-space .duet-tab-button:last-child {
+  border-radius: 0;
+}
+.duet-theme-turva.duet-tab-variation-default .duet-tab-group-fill-space .duet-tab-button::before {
+  height: 3px;
+}
 .duet-theme-turva.duet-tab-variation-default .duet-tab-button {
-  color: rgb(98, 104, 122);
+  color: rgb(71, 78, 101);
 }
 .duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected {
-  color: rgb(51, 5, 20);
+  color: rgb(23, 28, 58);
   background: rgb(255, 255, 255);
 }
-.duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected::after {
+.duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected::before {
   background-color: rgb(198, 12, 48);
 }
 .duet-theme-turva.duet-tab-variation-default .duet-tab-button:not(.selected) {
+  z-index: 200;
   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) {
+  z-index: 200;
   color: rgb(45, 52, 79);
   background: rgb(234, 235, 239);
 }
@@ -292,8 +311,9 @@
   padding: 12px 0;
   margin-left: 0;
   font-size: 0.875rem;
-  color: rgb(98, 121, 138);
+  color: rgb(81, 105, 123);
   border-width: 0;
+  border-bottom: 2px solid transparent;
   border-radius: 0;
   transition: none;
 }
@@ -309,6 +329,7 @@
 }
 .duet-tab-variation-plain .duet-tab-button:hover {
   color: rgb(8, 42, 77);
+  border-bottom: 2px solid rgb(0, 119, 179);
 }
 .duet-tab-variation-plain .duet-tab-button.selected {
   color: rgb(8, 42, 77);
@@ -318,20 +339,21 @@
   margin-left: 36px;
 }
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-button {
-  color: rgb(113, 118, 132);
+  color: rgb(71, 78, 101);
 }
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-button:hover {
-  color: rgb(51, 5, 20);
+  color: rgb(45, 52, 79);
+  border-bottom: 2px solid rgb(198, 12, 48);
 }
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected {
-  color: rgb(51, 5, 20);
+  color: rgb(23, 28, 58);
   border-bottom: 2px solid rgb(198, 12, 48);
 }
 .duet-tab-variation-checked .duet-tab-button {
   position: relative;
   display: inline-block;
-  flex-basis: 0;
   flex-grow: 1;
+  flex-basis: 0;
   width: 200px;
   min-width: 200px;
   padding: 8px 4px;
@@ -452,11 +474,14 @@
   text-align: left;
 }
 .duet-tab-group-content:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3 !important;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-tab-group-content:focus, .duet-tab-group-content:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a !important;
+.duet-theme-turva .duet-tab-group-content:focus, .duet-tab-group-content:focus.duet-theme-turva, .duet-theme-turva2 .duet-tab-group-content:focus, .duet-tab-group-content:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-tab-group-content.checked-group-content {
   padding: 28px 0 28px 0;
@@ -476,4 +501,25 @@
 }
 .duet-theme-turva .duet-tab-group-content.checked-group-content::after {
   background-color: rgb(113, 118, 132);
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-tab-group-tabs.duet-tab-variation-plain {
+  border-bottom-color: rgb(251, 225, 209);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-tab-variation-plain .duet-tab-button:hover {
+  border-bottom: 2px solid rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected {
+  border-bottom: 2px solid rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-tab-button {
+  color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-tab-button.selected {
+  color: rgb(23, 42, 59);
+  border-color: rgb(212, 221, 226);
+  border-bottom-color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected::before {
+  background-color: rgb(230, 23, 64);
 }