@pure-ds/core 0.7.19 → 0.7.21

package/src/js/pds-core/pds-generator.js

@@ -2315,8 +2315,10 @@ input[type="color"] {
   pointer-events: none;
 }
 
-label:has(input[type="checkbox"]):not(fieldset label):not(label[data-toggle]),
-input[type="checkbox"] + label:not(fieldset label):not(label[data-toggle]) {
+:is(
+  label:has(input[type="checkbox"]),
+  input[type="checkbox"] + label
+):not(fieldset label):not(label[data-toggle]) {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2345,44 +2347,44 @@ input[type="checkbox"] + label:not(fieldset label):not(label[data-toggle]) {
     background-color: var(--color-surface-subtle);
     border-color: var(--color-primary-500);
   }
-}
 
-label:has(input[type="checkbox"]:checked):not(fieldset label):not(label[data-toggle]),
-input[type="checkbox"]:checked + label:not(fieldset label):not(label[data-toggle]) {
-  background-color: color-mix(in oklab, var(--color-primary-500) 8%, transparent);
-  color: var(--color-primary-700);
-  border-color: var(--color-primary-500);
-  border-width: var(--border-width-medium);
-  font-weight: var(--font-weight-semibold);
-  
-  &:hover {
-    background-color: color-mix(in oklab, var(--color-primary-500) 15%, transparent);
-    border-color: var(--color-primary-600);
+  &:has(input[type="checkbox"]:checked),
+  input[type="checkbox"]:checked + label:not(fieldset label):not(label[data-toggle]) {
+    background-color: color-mix(in oklab, var(--color-primary-500) 8%, transparent);
+    color: var(--color-primary-700);
+    border-color: var(--color-primary-500);
+    border-width: var(--border-width-medium);
+    font-weight: var(--font-weight-semibold);
+    
+    &:hover {
+      background-color: color-mix(in oklab, var(--color-primary-500) 15%, transparent);
+      border-color: var(--color-primary-600);
+    }
   }
-}
 
-label:has(input[type="checkbox"]:focus):not(fieldset label):not(label[data-toggle]),
-input[type="checkbox"]:focus + label:not(fieldset label):not(label[data-toggle]) {
-  outline: none;
-  box-shadow: 0 0 0 ${focusWidth}px color-mix(in oklab, var(--color-primary-500) ${Math.round(
-    (focusRingOpacity || 0.3) * 100,
-  )}%, transparent);
-}
+  &:has(input[type="checkbox"]:focus),
+  input[type="checkbox"]:focus + label:not(fieldset label):not(label[data-toggle]) {
+    outline: none;
+    box-shadow: 0 0 0 ${focusWidth}px color-mix(in oklab, var(--color-primary-500) ${Math.round(
+      (focusRingOpacity || 0.3) * 100,
+    )}%, transparent);
+  }
 
-label:has(input[type="checkbox"]:disabled):not(fieldset label):not(label[data-toggle]),
-input[type="checkbox"]:disabled + label:not(fieldset label):not(label[data-toggle]) {
-  background-color: var(--color-input-disabled-bg);
-  color: var(--color-input-disabled-text);
-  border-color: var(--color-border);
-  cursor: not-allowed;
-  opacity: 0.6;
-}
+  &:has(input[type="checkbox"]:disabled),
+  input[type="checkbox"]:disabled + label:not(fieldset label):not(label[data-toggle]) {
+    background-color: var(--color-input-disabled-bg);
+    color: var(--color-input-disabled-text);
+    border-color: var(--color-border);
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
 
-label:has(input[type="checkbox"]:checked:disabled):not(fieldset label):not(label[data-toggle]),
-input[type="checkbox"]:checked:disabled + label:not(fieldset label):not(label[data-toggle]) {
-  background-color: var(--color-input-disabled-bg);
-  color: var(--color-input-disabled-text);
-  border-color: var(--color-border);
+  &:has(input[type="checkbox"]:checked:disabled),
+  input[type="checkbox"]:checked:disabled + label:not(fieldset label):not(label[data-toggle]) {
+    background-color: var(--color-input-disabled-bg);
+    color: var(--color-input-disabled-text);
+    border-color: var(--color-border);
+  }
 }
 
 /* Keep default checkbox/radio for inputs NOT in special containers */
@@ -2455,53 +2457,49 @@ fieldset[role="group"].buttons {
       color: var(--color-text-primary);
     }
 
-    &:has([disabled]){
+    &:has([disabled]) {
       pointer-events: none;
     }
-  }
-  
-  label:has(input[type="radio"]:checked),
-  label:has(input[type="checkbox"]:checked) {
-    background-color: color-mix(in oklab, var(--color-primary-500) 8%, transparent);
-    border-color: var(--color-primary-500);
-    border-width: var(--border-width-medium);
-    font-weight: var(--font-weight-semibold);
-    
-    &:hover {
-      background-color: color-mix(in oklab, var(--color-primary-500) 15%, transparent);
-      border-color: var(--color-primary-600);
+
+    &:has(input:is([type="radio"], [type="checkbox"]):checked) {
+      background-color: color-mix(in oklab, var(--color-primary-500) 8%, transparent);
+      border-color: var(--color-primary-500);
+      border-width: var(--border-width-medium);
+      font-weight: var(--font-weight-semibold);
+      
+      &:hover {
+        background-color: color-mix(in oklab, var(--color-primary-500) 15%, transparent);
+        border-color: var(--color-primary-600);
+      }
+    }
+
+    &:has(input:is([type="radio"], [type="checkbox"]):focus) {
+      outline: none;
+      box-shadow: 0 0 0 ${focusWidth}px color-mix(in oklab, var(--color-primary-500) ${Math.round(
+        (focusRingOpacity || 0.3) * 100,
+      )}%, transparent);
+    }
+
+    &:has(input:is([type="radio"], [type="checkbox"]):disabled) {
+      background-color: var(--color-input-disabled-bg);
+      color: var(--color-input-disabled-text);
+      border-color: var(--color-border);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    &:has(input:is([type="radio"], [type="checkbox"]):checked:disabled) {
+      background-color: var(--color-input-disabled-bg);
+      color: var(--color-input-disabled-text);
+      border-color: var(--color-border);
     }
-  }
-  
-  label:has(input[type="radio"]:focus),
-  label:has(input[type="checkbox"]:focus) {
-    outline: none;
-    box-shadow: 0 0 0 ${focusWidth}px color-mix(in oklab, var(--color-primary-500) ${Math.round(
-      (focusRingOpacity || 0.3) * 100,
-    )}%, transparent);
-  }
-  
-  label:has(input[type="radio"]:disabled),
-  label:has(input[type="checkbox"]:disabled) {
-    background-color: var(--color-input-disabled-bg);
-    color: var(--color-input-disabled-text);
-    border-color: var(--color-border);
-    cursor: not-allowed;
-    opacity: 0.6;
-  }
-  
-  label:has(input[type="radio"]:checked:disabled),
-  label:has(input[type="checkbox"]:checked:disabled) {
-    background-color: var(--color-input-disabled-bg);
-    color: var(--color-input-disabled-text);
-    border-color: var(--color-border);
   }
 }
 
 /* Toggle switches - enhanced checkboxes with data-toggle attribute */
 label[data-toggle] {
   display: inline-flex;
-  align-items: normal;
+  align-items: center;
   gap: var(--spacing-3);
   cursor: pointer;
   user-select: none;
@@ -2516,6 +2514,10 @@ label[data-toggle] {
     display: none;
   }
 
+  span[data-label] {
+    margin-bottom: 0;
+  }
+
   /* Toggle switch container */
   .toggle-switch {
     position: relative;
@@ -2556,29 +2558,22 @@ label[data-toggle] {
     transition: opacity 200ms ease;
   }
 
-  &.with-icons:has(input[type="checkbox"]:checked) .toggle-knob::before {
-    content: "✓";
-    color: var(--color-primary-600);
-  }
-
-  /* Toggle switch when checked - using :has() selector */
-  &:has(input[type="checkbox"]:checked) .toggle-switch {
-    background-color: var(--color-primary-fill);
-  }
-  
+  &:has(input[type="checkbox"]:checked) {
+    &.with-icons .toggle-knob::before {
+      content: "✓";
+      color: var(--color-primary-600);
+    }
 
-  /* Toggle knob when checked - always moves to the right */
-  &:has(input[type="checkbox"]:checked) .toggle-knob {
-    left: 22px;
-  }
+    .toggle-switch {
+      background-color: var(--color-primary-fill);
+    }
 
-  /* Focus state for toggle switch */
-  &:has(input[type="checkbox"]:focus) .toggle-switch {
-    outline: 2px solid var(--color-primary-500);
-    outline-offset: 2px;
+    .toggle-knob {
+      left: 22px;
+    }
   }
 
-  /* Focus visible state when label is focused via keyboard */
+  &:has(input[type="checkbox"]:focus) .toggle-switch,
   &:focus-visible .toggle-switch {
     outline: 2px solid var(--color-primary-500);
     outline-offset: 2px;
@@ -4697,15 +4692,9 @@ nav[data-dropdown] {
 
   /* Checkbox enhancement - visually hide native input but keep accessible
      Excludes button-style checkboxes in fieldsets and special containers */
-  :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]) input[type="checkbox"]) {
-    position: absolute;
-    opacity: 0;
-    width: 1px;
-    height: 1px;
-  }
-
-  /* Style label container for checkbox */
-  :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"])) {
+  :where(
+    label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"])
+  ) {
     display: inline-flex;
     align-items: center;
     gap: var(--spacing-2);
@@ -4713,64 +4702,65 @@ nav[data-dropdown] {
     user-select: none;
     position: relative;
     padding-left: calc(var(--spacing-5) + var(--spacing-3));
-  }
 
-  /* Custom checkbox box using PDS tokens - works with or without span wrapper */
-  :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"])::before) {
-    content: "";
-    position: absolute;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-    width: var(--spacing-5);
-    height: var(--spacing-5);
-    border: var(--border-width-medium) solid var(--color-border);
-    border-radius: var(--radius-sm);
-    background: var(--color-surface-base);
-    transition: all var(--transition-fast);
-    flex-shrink: 0;
-  }
+    input[type="checkbox"] {
+      position: absolute;
+      opacity: 0;
+      width: 1px;
+      height: 1px;
+    }
 
-  /* Checkmark */
-  :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:checked)::after) {
-    content: "";
-    position: absolute;
-    left: var(--spacing-2);
-    top: 50%;
-    transform: translateY(-60%) rotate(45deg);
-    width: var(--spacing-1-5);
-    height: var(--spacing-3);
-    border: solid var(--color-primary-contrast, white);
-    border-width: 0 2px 2px 0;
-  }
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+      width: var(--spacing-5);
+      height: var(--spacing-5);
+      border: var(--border-width-medium) solid var(--color-border);
+      border-radius: var(--radius-sm);
+      background: var(--color-surface-base);
+      transition: all var(--transition-fast);
+      flex-shrink: 0;
+    }
 
-  /* Checked state */
-  :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:checked)::before) {
-    background: var(--color-primary-600);
-    border-color: var(--color-primary-600);
-  }
+    &:has(input[type="checkbox"]:checked)::after {
+      content: "";
+      position: absolute;
+      left: var(--spacing-2);
+      top: 50%;
+      transform: translateY(-60%) rotate(45deg);
+      width: var(--spacing-1-5);
+      height: var(--spacing-3);
+      border: solid var(--color-primary-contrast, white);
+      border-width: 0 2px 2px 0;
+    }
 
-  /* Focus styles for accessibility */
-  :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:focus)::before) {
-    outline: 2px solid var(--color-primary-500);
-    outline-offset: 2px;
-  }
+    &:has(input[type="checkbox"]:checked)::before {
+      background: var(--color-primary-600);
+      border-color: var(--color-primary-600);
+    }
 
-  /* Hover effects */
-  :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:not(:disabled)):hover::before) {
-    border-color: var(--color-primary-600);
-    background: var(--color-surface-subtle);
-  }
+    &:has(input[type="checkbox"]:focus)::before {
+      outline: 2px solid var(--color-primary-500);
+      outline-offset: 2px;
+    }
 
-  :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:checked:not(:disabled)):hover::before) {
-    background: var(--color-primary-700);
-    border-color: var(--color-primary-700);
-  }
+    &:has(input[type="checkbox"]:not(:disabled)):hover::before {
+      border-color: var(--color-primary-600);
+      background: var(--color-surface-subtle);
+    }
 
-  /* Disabled state */
-  :where(label:not(fieldset label, .checkbox-container label, [data-toggle]):has(input[type="checkbox"]:disabled)) {
-    opacity: 0.5;
-    cursor: not-allowed;
+    &:has(input[type="checkbox"]:checked:not(:disabled)):hover::before {
+      background: var(--color-primary-700);
+      border-color: var(--color-primary-700);
+    }
+
+    &:has(input[type="checkbox"]:disabled) {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
   }
 
   :where(fieldset) {