@duetds/components 10.0.0-alpha.3 → 10.0.0-alpha.30

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%;
@@ -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;
@@ -91,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 {
@@ -103,21 +139,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;
 }
@@ -127,93 +161,33 @@
 .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);
-  border-color: rgb(222, 224, 228);
-}
-.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;
 }
-@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);
 }
 .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;
@@ -221,81 +195,176 @@
 }
 .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);
   outline: 0;
+  background: rgb(255, 255, 255);
+  border-bottom: 3px solid rgb(0, 119, 179);
   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;
+  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-button:first-child {
-  border-top-left-radius: 4px;
-  border-top-right-radius: 4px;
+.duet-tab-variation-default .duet-tab-button {
+  z-index: 200;
+  padding: 11px 20px 13px 20px;
+  overflow: hidden;
+  font-size: 0.875rem;
+  color: rgb(62, 84, 102);
+  background: rgb(245, 248, 250);
+  border: 1px solid rgb(212, 223, 229);
+}
+.duet-tab-variation-default .duet-tab-button.switch-large-at-always {
+  padding: 15px 28px 17px 28px;
+  font-size: 1rem;
 }
 @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.switch-large-at-small {
+    padding: 15px 28px 17px 28px;
+    font-size: 1rem;
   }
 }
-.duet-tab-button:last-child {
-  border-bottom-right-radius: 4px;
-  border-bottom-left-radius: 4px;
+.duet-tab-variation-default .duet-tab-button.selected {
+  color: rgb(8, 42, 77);
+  background: rgb(255, 255, 255);
+  transition: none;
 }
-@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.selected::before {
+  position: absolute;
+  right: -1px;
+  bottom: 0;
+  z-index: 300;
+  display: block;
+  width: calc(100% + 2px);
+  height: 2px;
+  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(30, 45, 59);
+  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-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(71, 78, 101);
+}
+.duet-theme-turva.duet-tab-variation-default .duet-tab-button.selected {
+  color: rgb(23, 28, 58);
+  background: rgb(255, 255, 255);
+}
+.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);
+}
+.duet-theme-turva.duet-tab-variation-default .duet-tab-button:focus-visible {
+  outline-color: rgba(199, 202, 207, 0.8);
+  border-color: rgb(222, 224, 228);
 }
 .duet-tab-variation-plain .duet-tab-button {
   display: inline-block;
   width: auto;
-  padding-right: 0;
-  padding-left: 0;
+  padding: 12px 0;
   margin-left: 0;
-  border: 0;
+  font-size: 0.875rem;
+  color: rgb(81, 105, 123);
+  border-width: 0;
+  border-bottom: 2px solid transparent;
   border-radius: 0;
   transition: none;
 }
+.duet-tab-variation-plain .duet-tab-button.switch-large-at-always {
+  padding: 20px 0;
+  font-size: 1rem;
+}
+@media (min-width: 36em) {
+  .duet-tab-variation-plain .duet-tab-button.switch-large-at-small {
+    padding: 20px 0;
+    font-size: 1rem;
+  }
+}
+.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);
+  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 {
+  color: rgb(71, 78, 101);
+}
+.duet-theme-turva.duet-tab-variation-plain .duet-tab-button:hover {
+  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(198, 12, 48);
-  border-bottom-color: rgb(198, 12, 48);
+  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;
   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;
 }
@@ -409,11 +478,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;
@@ -433,4 +505,35 @@
 }
 .duet-theme-turva .duet-tab-group-content.checked-group-content::after {
   background-color: rgb(113, 118, 132);
+}
+
+:host(.duet-theme-turva2) {
+  /* Plain variation: divider nude, hover & active underlines red */
+  /* Base tab button mapping + selected underline red, outer borders nude */
+  /* Default variation selected underline (uses ::before) should be red */
+  /* Default variation focus-visible border stays nude */
+  /* Checked variation selected state */
+}
+: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(251, 225, 209);
+  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);
+}
+:host(.duet-theme-turva2) .duet-theme-turva.duet-tab-variation-default .duet-tab-button:focus-visible {
+  border-color: rgb(251, 225, 209);
 }