@duetds/components 10.0.0-alpha.9 → 10.1.0

package/lib/collection/components/duet-breadcrumbs/duet-breadcrumbs.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;
   display: block;
   width: 100%;
 }
@@ -38,6 +38,7 @@
 
 .duet-breadcrumbs {
   position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -51,16 +52,15 @@
   width: 100%;
   max-width: 1384px;
   min-height: 36px;
-  margin: 0 28px;
+  margin: 0 28px 0 20px;
 }
 .duet-breadcrumbs .list {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  gap: 8px;
+  gap: 0;
   align-items: center;
   justify-content: flex-start;
-  padding: 10px 0;
   color: inherit;
   list-style: none;
 }
@@ -140,4 +140,15 @@
 }
 .duet-breadcrumbs.plain .bottom-border {
   display: none;
+}
+
+:host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.header {
+  color: rgb(23, 42, 59);
+  background: rgb(253, 247, 242);
+}
+:host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.header ol duet-breadcrumb[href]:hover {
+  color: rgb(126, 2, 35);
+}
+:host(.duet-theme-turva2) .duet-breadcrumbs.duet-theme-turva.footer {
+  background: rgb(230, 23, 64);
 }

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

@@ -13,9 +13,18 @@ export class DuetBreadcrumbs {
             sv: "Ströbröd",
             en: "Breadcrumbs",
         });
-        this.children = undefined;
+        /**
+         * Theme
+         */
         this.theme = "";
+        /**
+         * Variation
+         */
         this.variation = "header";
+        /**
+         * Custom color to be used for text, as a design token entered in camelCase or kebab-case.
+         * Example: "color-primary".
+         */
         this.color = "";
     }
     /**
@@ -53,11 +62,11 @@ export class DuetBreadcrumbs {
      */
     render() {
         const color = getColorByName(this.color);
-        return (h(Host, { key: 'c0b1e8c78d0744f5c809583855dc93aa24996f2a' }, h("nav", { key: '43f9aaea1114c5dd3ccf669fd6b0e757345b27eb', "aria-label": this.breadcrumbsAriaLabel, class: {
+        return (h(Host, { key: '36f67b82a722d5c4017bb4cec37fd7149572d264' }, h("nav", { key: 'f8fe3f4e521969a60d9428a354a88152171613ec', "aria-label": this.breadcrumbsAriaLabel, class: {
                 "duet-breadcrumbs": true,
                 "duet-theme-turva": this.theme === "turva",
                 [this.variation]: true,
-            } }, h("div", { key: '96e61856bbf06a8ed5c3c693bf53c15dc3aa340d', class: "container" }, h("div", { key: '414388159558cdb6b2f47ae096590165d65e01df', role: "list", class: "list", style: { color } }, h("slot", { key: 'cecb69a54afc0a093bf4f7ca38724d8d15d2751d' })), h("div", { key: '6a924f55a0c2d36033df4a532bb5429d6385d35a', class: "bottom-border bottom-border--container" })), h("div", { key: '00bb27276633fa524c2d74812968048ff98770b0', class: "bottom-border bottom-border--nav" }))));
+            } }, h("div", { key: '78f711e9262e47c989705552d2ab75e65ae17fbe', class: "container" }, h("div", { key: 'bfc70b5d984cc57ef2591f4a3ecf452db9ae0ed6', role: "list", class: "list", style: { color } }, h("slot", { key: '96e85ea897f84aef0111f41d1e91ac2a263e8d66' })), h("div", { key: 'b99f56d5dba834d934872b86fcb8e46205ae3084', class: "bottom-border bottom-border--container" })), h("div", { key: '1d96cf880260a6fa1fb39cbc0e76e7b5df8f208c', class: "bottom-border bottom-border--nav" }))));
     }
     static get is() { return "duet-breadcrumbs"; }
     static get encapsulation() { return "shadow"; }
@@ -75,6 +84,7 @@ export class DuetBreadcrumbs {
         return {
             "theme": {
                 "type": "string",
+                "attribute": "theme",
                 "mutable": true,
                 "complexType": {
                     "original": "DuetTheme",
@@ -95,12 +105,12 @@ export class DuetBreadcrumbs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "theme",
                 "reflect": false,
                 "defaultValue": "\"\""
             },
             "variation": {
                 "type": "string",
+                "attribute": "variation",
                 "mutable": false,
                 "complexType": {
                     "original": "\"header\" | \"footer\" | \"plain\"",
@@ -115,12 +125,12 @@ export class DuetBreadcrumbs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "variation",
                 "reflect": false,
                 "defaultValue": "\"header\""
             },
             "color": {
                 "type": "string",
+                "attribute": "color",
                 "mutable": false,
                 "complexType": {
                     "original": "DuetColor",
@@ -141,7 +151,6 @@ export class DuetBreadcrumbs {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "color",
                 "reflect": false,
                 "defaultValue": "\"\""
             }

package/lib/collection/components/duet-button/duet-button.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;
   margin-right: 8px !important;
   margin-bottom: 12px !important;
   position: relative;
@@ -34,6 +34,9 @@
 :host:last-child, :host:last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host:last-of-type:not(:last-child) {
+  margin-right: 8px !important;
+}
 @media (max-width: 35.9375em) {
   :host {
     width: 100%;
@@ -46,6 +49,9 @@
 :host(.square):last-child, :host(.square):last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host(.square):last-of-type:not(:last-child) {
+  margin-right: 12px !important;
+}
 
 :host(.input-button) {
   z-index: 250;
@@ -61,6 +67,10 @@
 :host(.duet-x-small):last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host(.duet-small):last-of-type:not(:last-child),
+[alignment=form-distribute] > :host(.duet-x-small):last-of-type:not(:last-child) {
+  margin-right: 4px !important;
+}
 @media (max-width: 35.9375em) {
   :host(.duet-small),
   :host(.duet-x-small) {
@@ -74,6 +84,9 @@
 :host(.duet-x-small):last-child, :host(.duet-x-small):last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host(.duet-x-small):last-of-type:not(:last-child) {
+  margin-right: 2px !important;
+}
 
 :host(.square.duet-small),
 :host(.square.duet-x-small) {
@@ -84,6 +97,10 @@
 :host(.square.duet-x-small):last-of-type {
   margin-right: 0 !important;
 }
+[alignment=form-distribute] > :host(.square.duet-small):last-of-type:not(:last-child),
+[alignment=form-distribute] > :host(.square.duet-x-small):last-of-type:not(:last-child) {
+  margin-right: 8px !important;
+}
 
 :host(.duet-expand) {
   width: 100% !important;
@@ -127,7 +144,7 @@
   background: transparent;
   border-style: solid;
   border-width: 1px;
-  transition: background-color 300ms ease, color 300ms ease, border 300ms ease, outline 300ms ease, padding 300ms ease, box-shadow 300ms ease;
+  transition: background-color 300ms ease, color 300ms ease, border 300ms ease, padding 300ms ease, box-shadow 300ms ease;
 }
 .duet-button.duet-p-0 {
   padding: 0 !important;
@@ -136,11 +153,14 @@
   margin: 0 !important;
 }
 .duet-button:focus {
-  outline: 0;
-  box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px #0077b3;
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(0, 119, 179, 0.8);
 }
-.duet-theme-turva .duet-button:focus, .duet-button:focus.duet-theme-turva {
-  box-shadow: 0 0 0 4px rgba(23, 28, 58, 0.2), 0 0 0 1px #171c3a;
+.duet-theme-turva .duet-button:focus, .duet-button:focus.duet-theme-turva, .duet-theme-turva2 .duet-button:focus, .duet-button:focus.duet-theme-turva2 {
+  outline: 2px solid;
+  outline-offset: 2px;
+  outline-color: rgba(53, 79, 101, 0.8);
 }
 .duet-button.duet-button-size-medium {
   height: 50px;
@@ -288,13 +308,13 @@
   border-color: rgb(222, 224, 228);
 }
 .duet-button.default:hover {
-  border-color: rgb(0, 119, 179);
   outline: 2px solid rgb(0, 119, 179);
   outline-offset: -2px;
+  border-color: rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-button.default:hover {
-  border-color: rgb(198, 12, 48);
   outline-color: rgb(198, 12, 48);
+  border-color: rgb(198, 12, 48);
 }
 .duet-button.default.duet-button-negative {
   background-color: rgb(255, 255, 255);
@@ -329,13 +349,6 @@
   background: rgb(126, 2, 35);
   border-color: rgb(126, 2, 35);
 }
-.duet-button.primary:focus, .duet-button.input-button-primary:focus, .duet-button.input-button-left-primary:focus {
-  outline: 0;
-  box-shadow: 0 0 0 1px #fff, 0 0 0 4px rgba(0, 119, 179, 0.75);
-}
-.duet-theme-turva .duet-button.primary:focus, .duet-theme-turva .duet-button.input-button-primary:focus, .duet-theme-turva .duet-button.input-button-left-primary:focus {
-  box-shadow: 0 0 0 1px #fff, 0 0 0 4px rgba(23, 28, 58, 0.75);
-}
 .duet-button.secondary, .duet-button.input-button-secondary, .duet-button.input-button-left-secondary, .duet-button.input-button-embedded {
   color: rgb(8, 42, 77) !important;
   background: transparent;
@@ -348,6 +361,12 @@
 .duet-button.secondary:hover, .duet-button.input-button-secondary:hover, .duet-button.input-button-left-secondary:hover, .duet-button.input-button-embedded:hover {
   color: rgb(0, 119, 179) !important;
   border-color: rgb(0, 119, 179);
+  outline: 2px solid;
+  outline-color: rgb(98, 121, 138);
+  outline-offset: -1px;
+}
+.duet-theme-turva .duet-button.secondary:hover, .duet-button.secondary:hover.duet-theme-turva, .duet-theme-turva2 .duet-button.secondary:hover, .duet-button.secondary:hover.duet-theme-turva2, .duet-theme-turva .duet-button.input-button-secondary:hover, .duet-button.input-button-secondary:hover.duet-theme-turva, .duet-theme-turva2 .duet-button.input-button-secondary:hover, .duet-button.input-button-secondary:hover.duet-theme-turva2, .duet-theme-turva .duet-button.input-button-left-secondary:hover, .duet-button.input-button-left-secondary:hover.duet-theme-turva, .duet-theme-turva2 .duet-button.input-button-left-secondary:hover, .duet-button.input-button-left-secondary:hover.duet-theme-turva2, .duet-theme-turva .duet-button.input-button-embedded:hover, .duet-button.input-button-embedded:hover.duet-theme-turva, .duet-theme-turva2 .duet-button.input-button-embedded:hover, .duet-button.input-button-embedded:hover.duet-theme-turva2 {
+  outline-color: rgb(120, 145, 164);
 }
 .duet-theme-turva .duet-button.secondary:hover, .duet-theme-turva .duet-button.input-button-secondary:hover, .duet-theme-turva .duet-button.input-button-left-secondary:hover, .duet-theme-turva .duet-button.input-button-embedded:hover {
   color: rgb(198, 12, 48) !important;
@@ -392,13 +411,6 @@
   background: transparent;
   border-color: rgb(255, 255, 255);
 }
-.duet-button.negative:focus {
-  outline: 0;
-  box-shadow: 0 0 0 1px #00294d, 0 0 0 4px rgba(255, 255, 255, 0.7);
-}
-.duet-theme-turva .duet-button.negative:focus {
-  box-shadow: 0 0 0 1px #0077b3, 0 0 0 4px rgba(255, 255, 255, 0.7);
-}
 .duet-button.destructive-primary {
   color: rgb(255, 255, 255) !important;
   background: rgb(214, 28, 82);
@@ -456,14 +468,14 @@
 .duet-button.plain.duet-p-0 .duet-button-contents {
   height: auto;
 }
-.duet-button.plain[disabled] {
+.duet-button.plain[disabled], .duet-button.plain[disabled]:hover {
   color: rgb(98, 121, 138) !important;
   cursor: not-allowed;
   background: transparent !important;
   border-color: transparent !important;
 }
-.duet-theme-turva .duet-button.plain[disabled] {
-  color: transparent !important;
+.duet-theme-turva .duet-button.plain[disabled], .duet-theme-turva .duet-button.plain[disabled]:hover {
+  color: rgb(113, 118, 132) !important;
   cursor: not-allowed;
   background: transparent !important;
   border-color: rgb(222, 224, 228) !important;
@@ -484,6 +496,9 @@
 .duet-button.plain.duet-button-negative:hover {
   color: rgba(255, 255, 255, 0.8) !important;
 }
+.duet-button.plain.duet-button-icon-only:focus {
+  outline-offset: 1px;
+}
 .duet-button.duet-button-icon-only {
   min-width: 48px;
   min-height: 48px;
@@ -577,13 +592,13 @@
   border-color: rgb(222, 224, 228);
 }
 .duet-button.square:hover {
-  border-color: rgb(0, 119, 179);
   outline: 2px solid rgb(0, 119, 179);
   outline-offset: -2px;
+  border-color: rgb(0, 119, 179);
 }
 .duet-theme-turva .duet-button.square:hover {
-  border-color: rgb(198, 12, 48);
   outline-color: rgb(198, 12, 48);
+  border-color: rgb(198, 12, 48);
 }
 .duet-button.square .duet-button-contents {
   gap: 0;
@@ -591,17 +606,19 @@
 .duet-button[disabled], .duet-button[disabled]:hover, .duet-button.duet-button-negative[disabled], .duet-button.duet-button-negative[disabled]:hover {
   color: rgb(98, 121, 138) !important;
   cursor: not-allowed;
+  outline: none !important;
+  outline-color: rgb(212, 223, 229) !important;
+  outline-color: rgb(212, 223, 229) !important;
   background: rgb(212, 223, 229) !important;
   border-color: rgb(212, 223, 229) !important;
-  outline-color: rgb(212, 223, 229) !important;
   box-shadow: none !important;
 }
 .duet-theme-turva .duet-button[disabled], .duet-theme-turva .duet-button[disabled]:hover, .duet-theme-turva .duet-button.duet-button-negative [disabled], .duet-theme-turva .duet-button.duet-button-negative [disabled]:hover {
   color: rgb(143, 147, 158) !important;
   cursor: not-allowed;
+  outline-color: rgb(222, 224, 228) !important;
   background: rgb(222, 224, 228) !important;
   border-color: rgb(222, 224, 228) !important;
-  outline-color: rgb(222, 224, 228) !important;
 }
 
 .duet-button-is-loading.primary, .duet-button-is-loading.input-button-primary {
@@ -616,4 +633,95 @@
 .duet-button-is-loading .duet-button-contents {
   visibility: hidden;
   opacity: 0;
+}
+
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button {
+  border-radius: 8px;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.default {
+  color: rgb(230, 23, 64) !important;
+  border-color: rgb(178, 194, 205);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.default:hover {
+  outline-color: rgb(230, 23, 64);
+  border-color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.default.duet-button-negative {
+  background-color: rgb(251, 225, 209) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.default.duet-button-negative:hover {
+  color: rgb(230, 23, 64) !important;
+  border-color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.primary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-primary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-primary {
+  background: rgb(230, 23, 64);
+  border-color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.primary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-primary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-primary:hover {
+  background: rgb(140, 0, 30);
+  border-color: rgb(140, 0, 30);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded {
+  color: rgb(23, 42, 59) !important;
+  border-color: rgb(23, 42, 59);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded:hover {
+  color: rgb(230, 23, 64) !important;
+  border-color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary.duet-button-negative, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary.duet-button-negative, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary.duet-button-negative, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded.duet-button-negative {
+  color: rgb(251, 225, 209) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.secondary.duet-button-negative:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-secondary.duet-button-negative:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-left-secondary.duet-button-negative:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.input-button-embedded.duet-button-negative:hover {
+  color: rgb(230, 23, 64) !important;
+  border-color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-primary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-secondary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-embedded {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-left-primary, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button.input-button-left-secondary {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.negative {
+  color: rgb(23, 42, 59) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.negative:hover {
+  color: rgb(255, 255, 255) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain {
+  color: rgb(230, 23, 64) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain.duet-button-negative {
+  color: rgb(255, 255, 255) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain:hover {
+  color: rgb(140, 0, 30) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain[disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button.plain[disabled]:hover {
+  color: rgb(95, 122, 143) !important;
+  background: transparent !important;
+  border-color: rgb(251, 225, 209) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.square {
+  border-color: rgb(212, 221, 226);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.square.duet-button-negative {
+  background: rgb(230, 23, 64);
+  border-color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button.square:hover {
+  outline-color: rgb(230, 23, 64);
+  border-color: rgb(230, 23, 64);
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button[disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button[disabled]:hover, :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button-negative [disabled], :host(.duet-theme-turva2) .duet-theme-turva .duet-button.duet-button-negative [disabled]:hover {
+  color: rgb(120, 145, 164) !important;
+  cursor: not-allowed;
+  outline-color: rgb(212, 221, 226) !important;
+  background: rgb(212, 221, 226) !important;
+  border-color: rgb(212, 221, 226) !important;
+}
+:host(.duet-theme-turva2) .duet-theme-turva .duet-button-is-loading.default {
+  color: rgb(230, 23, 64);
 }