Added <label> compatibility to groups

Author: Yohn

css/pico.amber.css

@@ -725,6 +725,26 @@ section {
   grid-template-columns: repeat(12, 1fr);
   gap: var(--pico-grid-row-gap) var(--pico-grid-column-gap);
 }
+.row-fluid.align-center,
+.row.align-center {
+  align-items: center;
+}
+.row-fluid.align-start,
+.row.align-start {
+  align-items: start;
+}
+.row-fluid.align-end,
+.row.align-end {
+  align-items: end;
+}
+.row-fluid > [class*=col] > *,
+.row-fluid > [class|=col] > *,
+.row-fluid > [class~=col] > *,
+.row > [class*=col] > *,
+.row > [class|=col] > *,
+.row > [class~=col] > * {
+  margin: calc(var(--pico-block-spacing-vertical) * 0.5) auto;
+}
 
 .row {
   max-width: 1200px;
@@ -828,7 +848,7 @@ section {
   grid-column-start: 12;
 }
 
-@media (max-width: 510px) {
+@media (min-width: 510px) {
   .col-sm-1 {
     grid-column-end: span 1;
   }
@@ -902,7 +922,7 @@ section {
     grid-column-start: 12;
   }
 }
-@media (max-width: 700px) {
+@media (min-width: 700px) {
   .col-md-1 {
     grid-column-end: span 1;
   }
@@ -976,7 +996,7 @@ section {
     grid-column-start: 12;
   }
 }
-@media (max-width: 950px) {
+@media (min-width: 950px) {
   .col-lg-1 {
     grid-column-end: span 1;
   }
@@ -1050,7 +1070,7 @@ section {
     grid-column-start: 12;
   }
 }
-@media (max-width: 1200px) {
+@media (min-width: 1200px) {
   .col-xl-1 {
     grid-column-end: span 1;
   }
@@ -1124,7 +1144,7 @@ section {
     grid-column-start: 12;
   }
 }
-@media (max-width: 1450px) {
+@media (min-width: 1450px) {
   .col-xxl-1 {
     grid-column-end: span 1;
   }
@@ -1742,7 +1762,8 @@ canvas {
 input,
 optgroup,
 select,
-textarea {
+textarea,
+[role=group] > label {
   margin: 0;
   font-size: 1rem;
   line-height: var(--pico-line-height);
@@ -1816,7 +1837,8 @@ textarea {
   border-width: 0;
 }
 
-input:not([type=checkbox], [type=radio], [type=range], [type=date]) {
+input:not([type=checkbox], [type=radio], [type=range], [type=date]),
+[role=group] > label {
   height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
 }
 
@@ -1849,7 +1871,8 @@ textarea {
 
 input:not([type=checkbox], [type=radio], [type=range], [type=file]),
 select,
-textarea {
+textarea,
+[role=group] > label {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -1858,7 +1881,8 @@ textarea {
 
 input,
 select,
-textarea {
+textarea,
+[role=group] > label {
   --pico-background-color: var(--pico-form-element-background-color);
   --pico-border-color: var(--pico-form-element-border-color);
   --pico-color: var(--pico-form-element-color);
@@ -1899,6 +1923,7 @@ input:not([type=submit],
 }
 
 input:not([type=submit], [type=button], [type=reset])[disabled],
+[role=group] > label,
 select[disabled],
 textarea[disabled],
 label[aria-disabled=true],
@@ -1907,7 +1932,8 @@ label[aria-disabled=true],
   pointer-events: none;
 }
 
-label[aria-disabled=true] input[disabled] {
+label[aria-disabled=true] input[disabled],
+[role=group] > label {
   opacity: 1;
 }
 
@@ -1974,14 +2000,16 @@ input::placeholder,
 input::-webkit-input-placeholder,
 textarea::placeholder,
 textarea::-webkit-input-placeholder,
-select:invalid {
+select:invalid,
+[role=group] > label {
   color: var(--pico-form-element-placeholder-color);
   opacity: 1;
 }
 
 input:not([type=checkbox], [type=radio]),
 select,
-textarea {
+textarea,
+[role=group] > label {
   margin-bottom: var(--pico-spacing);
 }
 
@@ -2376,6 +2404,12 @@ details {
   display: block;
   margin-bottom: var(--pico-spacing);
 }
+details:not([open]) summary ~ * {
+  max-height: 0;
+  overflow: hidden;
+  opacity: 0;
+  transition: max-height var(--pico-transition), opacity var(--pico-transition);
+}
 details summary {
   line-height: 1rem;
   list-style-type: none;
@@ -2435,6 +2469,11 @@ details[open] > summary:not([role]):not(:focus) {
 details[open] > summary::after {
   transform: rotate(0);
 }
+details[open] > summary ~ * {
+  max-height: 100; /* Initial max height for content */
+  opacity: 1;
+  transition: max-height var(--pico-transition), opacity var(--pico-transition);
+}
 
 [dir=rtl] details summary {
   text-align: right;
@@ -2650,41 +2689,54 @@ label > details.dropdown {
   vertical-align: middle;
   transition: box-shadow var(--pico-transition);
 }
+[role=search] > label,
+[role=group] > label {
+  background-color: var(--pico-secondary-background);
+  color: var(--pico-secondary-inverse);
+}
 [role=search] > *,
 [role=search] input:not([type=checkbox], [type=radio]),
 [role=search] select,
+[role=search] label,
 [role=group] > *,
 [role=group] input:not([type=checkbox], [type=radio]),
-[role=group] select {
+[role=group] select,
+[role=group] label {
   position: relative;
   flex: 1 1 auto;
   margin-bottom: 0;
 }
 [role=search] > *:not(:first-child),
 [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
 [role=search] select:not(:first-child),
+[role=search] label:not(:first-child),
 [role=group] > *:not(:first-child),
 [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
-[role=group] select:not(:first-child) {
+[role=group] select:not(:first-child),
+[role=group] label:not(:first-child) {
   margin-left: 0;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 [role=search] > *:not(:last-child),
 [role=search] input:not([type=checkbox], [type=radio]):not(:last-child),
 [role=search] select:not(:last-child),
+[role=search] label:not(:last-child),
 [role=group] > *:not(:last-child),
 [role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
-[role=group] select:not(:last-child) {
+[role=group] select:not(:last-child),
+[role=group] label:not(:last-child) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 [role=search] > *:focus,
 [role=search] input:not([type=checkbox], [type=radio]):focus,
 [role=search] select:focus,
+[role=search] label:focus,
 [role=group] > *:focus,
 [role=group] input:not([type=checkbox], [type=radio]):focus,
-[role=group] select:focus {
+[role=group] select:focus,
+[role=group] label:focus {
   z-index: 2;
 }
 [role=search] button:not(:first-child),
@@ -2694,25 +2746,29 @@ label > details.dropdown {
 [role=search] [role=button]:not(:first-child),
 [role=search] input:not([type=checkbox], [type=radio]):not(:first-child),
 [role=search] select:not(:first-child),
+[role=search] label:not(:first-child),
 [role=group] button:not(:first-child),
 [role=group] [type=submit]:not(:first-child),
 [role=group] [type=reset]:not(:first-child),
 [role=group] [type=button]:not(:first-child),
 [role=group] [role=button]:not(:first-child),
 [role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
-[role=group] select:not(:first-child) {
+[role=group] select:not(:first-child),
+[role=group] label:not(:first-child) {
   margin-left: calc(var(--pico-border-width) * -1);
 }
 [role=search] button,
 [role=search] [type=submit],
 [role=search] [type=reset],
 [role=search] [type=button],
 [role=search] [role=button],
+[role=search] label,
 [role=group] button,
 [role=group] [type=submit],
 [role=group] [type=reset],
 [role=group] [type=button],
-[role=group] [role=button] {
+[role=group] [role=button],
+[role=group] label {
   width: auto;
 }
 @supports selector(:has(*)) {
@@ -2722,8 +2778,10 @@ label > details.dropdown {
   }
   [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
   [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
+  [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label,
   [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) input:not([type=checkbox], [type=radio]),
-  [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select {
+  [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) select,
+  [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) label {
     border-color: transparent;
   }
   [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
@@ -2734,10 +2792,12 @@ label > details.dropdown {
   [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
   [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
   [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
+  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) label,
   [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
   [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=submit],
   [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [type=button],
-  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button] {
+  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) [role=button],
+  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) label {
     --pico-button-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-border);
     --pico-button-hover-box-shadow: 0 0 0 var(--pico-border-width) var(--pico-primary-hover-border);
   }
@@ -2746,11 +2806,13 @@ label > details.dropdown {
   [role=search] [type=reset]:focus,
   [role=search] [type=button]:focus,
   [role=search] [role=button]:focus,
+  [role=search] label:focus,
   [role=group] button:focus,
   [role=group] [type=submit]:focus,
   [role=group] [type=reset]:focus,
   [role=group] [type=button]:focus,
-  [role=group] [role=button]:focus {
+  [role=group] [role=button]:focus,
+  [role=group] label:focus {
     box-shadow: none;
   }
 }