@duetds/components 6.10.3 → 6.11.0

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

@@ -155,42 +155,42 @@
   opacity: 0.75;
   transition: none !important;
 }
-.checked .duet-choice-label {
+.checked > .duet-choice-label {
   color: rgb(0, 119, 179) !important;
   background: rgb(243, 249, 252);
   border-color: rgb(0, 119, 179) !important;
 }
-.checked .duet-choice-label .duet-checkmark-container {
+.checked > .duet-choice-label .duet-checkmark-container {
   border-color: rgb(0, 119, 179);
 }
-.duet-theme-turva .checked .duet-choice-label {
+.duet-theme-turva .checked > .duet-choice-label {
   color: rgb(23, 28, 58) !important;
   background: rgb(245, 245, 247);
   border-color: rgb(23, 28, 58) !important;
 }
-.duet-theme-turva .checked .duet-choice-label .duet-checkmark-container {
+.duet-theme-turva .checked > .duet-choice-label .duet-checkmark-container {
   border-color: rgb(198, 12, 48);
 }
-.checked.collapsible .duet-choice-label, .collapsible-force-expanded.collapsible .duet-choice-label {
+.checked.collapsible > .duet-choice-label, .collapsible-force-expanded.collapsible > .duet-choice-label {
   padding-bottom: calc(1rem + 2px);
   border-bottom: 0 !important;
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
 
-:host(:not(.no-hover):not(.disabled):hover) .duet-choice-label:not(.checked) {
+:host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) {
   border-color: rgb(144, 149, 153);
 }
-:host(:not(.no-hover):not(.disabled):hover) .duet-choice-label:not(.checked) .duet-checkmark-container {
+:host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) .duet-checkmark-container {
   border-color: rgb(144, 149, 153);
 }
-.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) .duet-choice-label:not(.checked) {
+.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) {
   border-color: rgb(116, 116, 117);
 }
-.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) .duet-choice-label:not(.checked) .duet-checkmark-container {
+.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) .duet-checkmark-container {
   border-color: rgb(116, 116, 117);
 }
-.duet-theme-turva .info :host(:not(.no-hover):not(.disabled):hover) .duet-choice-label:not(.checked) {
+.duet-theme-turva .info :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label:not(.checked) {
   border-color: rgb(116, 116, 117);
 }
 
@@ -238,12 +238,12 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border-color: rgb(116, 116, 117) !important;
 }
 
-.checked input[disabled] + .duet-choice-label {
+.checked > input[disabled] + .duet-choice-label {
   background: rgb(225, 227, 230) !important;
   border-color: rgb(225, 227, 230) !important;
 }
 
-.duet-theme-turva .checked input[disabled] + .duet-choice-label {
+.duet-theme-turva .checked > input[disabled] + .duet-choice-label {
   background: rgb(228, 228, 230) !important;
   border-color: rgb(228, 228, 230) !important;
 }
@@ -260,12 +260,12 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 .duet-theme-turva .duet-checkmark-container {
   border-color: rgb(116, 116, 117);
 }
-.checked .duet-checkmark-container {
+.checked > .duet-choice-label .duet-checkmark-container {
   background: rgb(0, 119, 179);
   border-color: rgb(0, 119, 179);
   transition: none;
 }
-.duet-theme-turva .checked .duet-checkmark-container {
+.duet-theme-turva .checked > .duet-choice-label .duet-checkmark-container {
   background: rgb(23, 28, 58);
   border-color: rgb(23, 28, 58) !important;
 }
@@ -278,10 +278,10 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 .duet-theme-turva [disabled] + label .duet-checkmark-container {
   border-color: rgb(207, 207, 209) !important;
 }
-.checked [disabled] + label .duet-checkmark-container {
+.checked > [disabled] + label .duet-checkmark-container {
   background: rgb(207, 210, 212) !important;
 }
-.duet-theme-turva .checked [disabled] + label .duet-checkmark-container {
+.duet-theme-turva .checked > [disabled] + label .duet-checkmark-container {
   background: rgb(207, 207, 209) !important;
 }
 
@@ -359,7 +359,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   color: rgb(23, 28, 58);
   border-color: rgb(23, 28, 58);
 }
-.checked .duet-choice-card-info, .checked .duet-choice-card-collapsible {
+.checked > .duet-choice-card-info, .checked > .duet-choice-card-collapsible {
   display: block;
 }
 .duet-choice-card-info-expanded, .duet-choice-card-collapsible-expanded {
@@ -405,10 +405,10 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   border-color: rgb(228, 228, 230);
 }
 
-:host(:not(.no-hover):not(.disabled):hover) .duet-choice-card-collapsible:not(.checked) {
+:host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-collapsible:not(.checked) {
   border-color: rgb(144, 149, 153);
 }
-.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) .duet-choice-card-collapsible:not(.checked) {
+.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-collapsible:not(.checked) {
   border-color: rgb(116, 116, 117);
 }
 
@@ -457,7 +457,7 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
 :host(.user-is-tabbing) .duet-choice-info-toggle:focus {
   box-shadow: 0 0 0 4px rgba(0, 119, 179, 0.3), 0 0 0 1px rgb(0, 119, 179);
 }
-.checked .duet-choice-info-toggle {
+.checked + .duet-choice-info-toggle {
   border-left-color: rgb(0, 119, 179) !important;
 }
 .duet-choice-info-toggle duet-icon {
@@ -470,10 +470,10 @@ input[disabled] + .duet-choice-label:hover, input[disabled] + .duet-choice-label
   color: rgb(198, 12, 48);
 }
 
-:host(:not(.no-hover):not(.disabled):hover) .duet-choice-label .duet-choice-info-toggle {
+:host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label .duet-choice-info-toggle {
   border-left-color: rgb(144, 149, 153);
 }
-.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) .duet-choice-label .duet-choice-info-toggle {
+.duet-theme-turva :host(:not(.no-hover):not(.disabled):hover) > .duet-choice-card-flextainer .duet-choice-label .duet-choice-info-toggle {
   border-left-color: rgb(116, 116, 117);
 }
 

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

@@ -2,8 +2,8 @@
  * Built with Duet Design System
  */
 import infoIcon from "@duetds/icons/lib/assets/messaging-info";
-import { Build, h, Host, } from "@stencil/core";
-import { inheritGlobalTheme } from "../../common";
+import { h, Host } from "@stencil/core";
+import { hasSlot, inheritGlobalTheme } from "../../common";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { createID } from "../../utils/create-id";
 import { FocusGuard } from "../../utils/focus-utils";
@@ -143,15 +143,11 @@ export class DuetChoice {
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
-    this.hasInfo = !!this.element.querySelector("[slot='info']");
-    this.hasHeader = !!this.element.querySelector('[slot="header"]');
-    this.hasAdditional = Build.isServer
-      ? Array.from(this.element.children).filter(el => el.matches("[slot='additional']")).length > 0
-      : !!this.element.querySelector(":scope > [slot='additional']");
-    this.hasLabel = Build.isServer
-      ? Array.from(this.element.children).filter(el => el.matches("[slot='label']")).length > 0
-      : !!this.element.querySelector(":scope > [slot='label']");
-    this.hasBeforeText = !!this.element.querySelector("[slot='before-text']");
+    this.hasInfo = hasSlot(this.element, "info");
+    this.hasHeader = hasSlot(this.element, "header");
+    this.hasAdditional = hasSlot(this.element, "additional");
+    this.hasLabel = hasSlot(this.element, "label");
+    this.hasBeforeText = hasSlot(this.element, "before-text");
   }
   connectedCallback() {
     connectLanguageChangeObserver(this);

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

@@ -3,8 +3,8 @@
  */
 import icon from "@duetds/icons/lib/assets/action-arrow-down-small";
 import * as tokens from "@duetds/tokens/lib/tokens.json";
-import { Build, h, Host } from "@stencil/core";
-import { inheritGlobalTheme } from "../../common/themeable-component";
+import { h, Host } from "@stencil/core";
+import { hasSlot, inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
 import { isKeyboardClick } from "../../utils/keyboard-utils";
 import { sanitizeString } from "../../utils/string-utils";
@@ -79,9 +79,7 @@ export class DuetCollapsible {
    */
   componentWillLoad() {
     inheritGlobalTheme(this);
-    this.hasAfterHeading = Build.isServer
-      ? Array.from(this.element.children).filter(el => el.matches("[slot='after-heading']")).length > 0
-      : !!this.element.querySelector(":scope > [slot='after-heading']");
+    this.hasAfterHeading = hasSlot(this.element, "after-heading");
   }
   /**
    * Sets focus on the specified `duet-collapsible`. Use this method instead of the global

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

@@ -2,6 +2,7 @@
  * Built with Duet Design System
  */
 import { h, Host } from "@stencil/core";
+import { hasSlot } from "../../common";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 /**
@@ -13,7 +14,7 @@ export class DuetFieldset {
     this.errorId = createID("DuetError");
     this.labelId = createID("DuetLabel");
     this.checkHasTooltip = () => {
-      this.hasTooltip = !!this.element.querySelector("[slot='tooltip']");
+      this.hasTooltip = hasSlot(this.element, "tooltip");
     };
     this.hasTooltip = false;
     this.theme = "";