feat: group

css/pico.classless.css

@@ -237,6 +237,10 @@ input:not([type=submit],
   --pico-outline-width: 0.0625rem;
 }
 
+[type=search] {
+  --pico-border-radius: 5rem;
+}
+
 [type=checkbox],
 [type=radio] {
   --pico-border-width: 0.125rem;
@@ -254,6 +258,56 @@ nav details[role=list] summary:focus-visible {
   --pico-outline-width: 0.1875rem;
 }
 
+[role=search] {
+  --pico-border-radius: 5rem;
+}
+
+[role=search],
+[role=group] {
+  --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}
+[role=search] button,
+[role=search] [type=submit],
+[role=search] [type=button],
+[role=search] [role=button],
+[role=group] button,
+[role=group] [type=submit],
+[role=group] [type=button],
+[role=group] [role=button] {
+  --pico-form-element-spacing-horizontal: 2rem;
+}
+@supports selector(:has(*)) {
+  [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus),
+  [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) {
+    --pico-group-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
+  }
+  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
+  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) {
+    --pico-group-box-shadow: 0 0 0 0.0625rem var(--pico-form-element-border-color);
+  }
+  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
+  [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=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] {
+    --pico-button-box-shadow: 0 0 0 0.0625rem var(--pico-primary-border);
+    --pico-button-hover-box-shadow: 0 0 0 0.0625rem var(--pico-primary-border-hover);
+  }
+  [role=search] button:focus,
+  [role=search] [type=submit]:focus,
+  [role=search] [type=button]:focus,
+  [role=search] [role=button]:focus,
+  [role=group] button:focus,
+  [role=group] [type=submit]:focus,
+  [role=group] [type=button]:focus,
+  [role=group] [role=button]:focus {
+    box-shadow: none;
+  }
+}
+
 /**
  * Color schemes
  */
@@ -749,8 +803,8 @@ a,
   transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
   transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
 }
-a:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+a:is([aria-current], :hover, :active, :focus),
-[role=link]:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
+[role=link]:is([aria-current], :hover, :active, :focus) {
   --pico-color: var(--pico-primary-hover);
   --pico-underline: var(--pico-primary-underline-hover);
   --pico-text-decoration: underline;
@@ -864,19 +918,11 @@ hgroup > *:not(:first-child):last-child {
   font-family: unset;
 }
 
-:where(dl, ol, ul) {
+:where(ol, ul) li {
-  padding-right: 0;
-  padding-left: var(--pico-spacing);
-  -webkit-padding-start: var(--pico-spacing);
-  padding-inline-start: var(--pico-spacing);
-  -webkit-padding-end: 0;
-  padding-inline-end: 0;
-}
-:where(dl, ol, ul) li {
   margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25);
 }
 
-:where(dl, ol, ul) :is(dl, ol, ul) {
+:where(dl, ol, ul) :where(dl, ol, ul) {
   margin: 0;
   margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25);
 }
@@ -978,16 +1024,16 @@ button {
 
 button,
 [type=submit],
-input[type=reset],
+[type=reset],
-input[type=button] {
+[type=button] {
   -webkit-appearance: button;
 }
 
 button,
 [type=submit],
-input[type=reset],
+[type=reset],
-input[type=button],
+[type=button],
-input[type=file]::file-selector-button,
+[type=file]::file-selector-button,
 [role=button] {
   --pico-background-color: var(--pico-primary-background);
   --pico-border-color: var(--pico-primary-border);
@@ -1011,12 +1057,12 @@ input[type=file]::file-selector-button,
   user-select: none;
   transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
 }
-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+button:is([aria-current], :hover, :active, :focus),
-[type=submit]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+[type=submit]:is([aria-current], :hover, :active, :focus),
-input[type=reset]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+[type=reset]:is([aria-current], :hover, :active, :focus),
-input[type=button]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+[type=button]:is([aria-current], :hover, :active, :focus),
-input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus),
-[role=button]:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
+[role=button]:is([aria-current], :hover, :active, :focus) {
   --pico-background-color: var(--pico-primary-background-hover);
   --pico-border-color: var(--pico-primary-border-hover);
   --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@@ -1024,42 +1070,38 @@ input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focu
 }
 button:focus,
 [type=submit]:focus,
-input[type=reset]:focus,
+[type=reset]:focus,
-input[type=button]:focus,
+[type=button]:focus,
-input[type=file]::file-selector-button:focus,
+[type=file]::file-selector-button:focus,
 [role=button]:focus {
   --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
 }
 
 [type=submit],
-input[type=reset],
+[type=reset],
-input[type=button] {
+[type=button] {
   margin-bottom: var(--pico-spacing);
 }
 
-input[type=reset],
+[type=reset],
-input[type=file]::file-selector-button {
+[type=file]::file-selector-button {
   --pico-background-color: var(--pico-secondary);
   --pico-border-color: var(--pico-secondary);
   --pico-color: var(--pico-secondary-inverse);
   cursor: pointer;
 }
-input[type=reset]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+[type=reset]:is([aria-current], :hover, :active, :focus),
-input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
+[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus) {
   --pico-background-color: var(--pico-secondary-hover);
   --pico-border-color: var(--pico-secondary-hover);
 }
-input[type=reset]:focus,
+[type=reset]:focus,
-input[type=file]::file-selector-button:focus {
+[type=file]::file-selector-button:focus {
   --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
 }
 
-:where(button,
+:where(button, [type=submit], [type=reset], [type=button], [role=button])[disabled],
-[type=submit],
+:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]) {
-input[type=reset],
-input[type=button],
-[role=button])[disabled],
-:where(fieldset[disabled]) :is(button, [type=submit], input[type=button], input[type=reset], [role=button]) {
   opacity: 0.5;
   pointer-events: none;
 }
@@ -1664,7 +1706,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
 /**
  * Input type file
  */
-input[type=file] {
+[type=file] {
   --pico-color: var(--pico-muted-color);
   margin-left: calc(var(--pico-outline-width) * -1);
   padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
@@ -1673,15 +1715,15 @@ input[type=file] {
   border-radius: 0;
   background: none;
 }
-input[type=file]::file-selector-button {
+[type=file]::file-selector-button {
   margin-right: calc(var(--pico-spacing) / 2);
   padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
 }
-input[type=file]:is(:hover, :active, :focus)::file-selector-button {
+[type=file]:is(:hover, :active, :focus)::file-selector-button {
   --pico-background-color: var(--pico-secondary-background-hover);
   --pico-border-color: var(--pico-secondary-border-hover);
 }
-input[type=file]:focus::file-selector-button {
+[type=file]:focus::file-selector-button {
   --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
 }
 
@@ -1776,7 +1818,6 @@ input[type=file]:focus::file-selector-button {
 input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
   -webkit-padding-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
   padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
-  border-radius: 5rem;
   background-image: var(--pico-icon-search);
   background-position: center left 1.125rem;
   background-size: 1rem auto;
@@ -2031,7 +2072,7 @@ details[role=list] summary + ul li a {
   text-decoration: none;
   text-overflow: ellipsis;
 }
-details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:focus, details[role=list] summary + ul li a:active, details[role=list] summary + ul li a:focus-visible, details[role=list] summary + ul li a[aria-current]:not([aria-current=false]) {
+details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:focus, details[role=list] summary + ul li a:active, details[role=list] summary + ul li a:focus-visible, details[role=list] summary + ul li a[aria-current] {
   background-color: var(--pico-dropdown-hover-background-color);
 }
 details[role=list] summary + ul li label {
@@ -2063,6 +2104,98 @@ details[role=list][open] summary::before {
   cursor: default;
 }
 
+/**
+ * Group ([role="group"], [role="search"])
+ */
+form[role=search], form[role=group] {
+  width: 100%;
+}
+
+[role=search] > *:first-child {
+  border-top-left-radius: 5rem;
+  border-bottom-left-radius: 5rem;
+}
+[role=search] > *:last-child {
+  border-top-right-radius: 5rem;
+  border-bottom-right-radius: 5rem;
+}
+
+[role=search],
+[role=group] {
+  display: inline-flex;
+  position: relative;
+  margin-bottom: var(--pico-spacing);
+  border-radius: var(--pico-border-radius);
+  box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+  vertical-align: middle;
+  transition: box-shadow var(--pico-transition);
+}
+[role=search] > *,
+[role=search] input:not([type=checkbox], [type=radio]),
+[role=search] select,
+[role=group] > *,
+[role=group] input:not([type=checkbox], [type=radio]),
+[role=group] select {
+  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=group] > *:not(:first-child),
+[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
+[role=group] select: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=group] > *:not(:last-child),
+[role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
+[role=group] select: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=group] > *:focus,
+[role=group] input:not([type=checkbox], [type=radio]):focus,
+[role=group] select:focus {
+  z-index: 2;
+}
+[role=search] button:not(:first-child),
+[role=search] [type=submit]:not(:first-child),
+[role=search] [type=reset]:not(:first-child),
+[role=search] [type=button]:not(:first-child),
+[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=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) {
+  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=group] button,
+[role=group] [type=submit],
+[role=group] [type=reset],
+[role=group] [type=button],
+[role=group] [role=button] {
+  width: auto;
+}
+
 /**
  * Loading ([aria-busy=true])
  */
@@ -2233,7 +2366,7 @@ nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
   text-align: center;
   text-decoration: none;
 }
-nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]) {
+nav[aria-label=breadcrumb] a[aria-current] {
   background-color: transparent;
   color: inherit;
   text-decoration: none;

css/pico.css

@@ -239,6 +239,10 @@ input:not([type=submit],
   --pico-outline-width: 0.0625rem;
 }
 
+[type=search] {
+  --pico-border-radius: 5rem;
+}
+
 [type=checkbox],
 [type=radio] {
   --pico-border-width: 0.125rem;
@@ -256,6 +260,76 @@ nav details[role=list] summary:focus-visible {
   --pico-outline-width: 0.1875rem;
 }
 
+[role=search] {
+  --pico-border-radius: 5rem;
+}
+
+[role=search],
+[role=group] {
+  --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}
+[role=search] button,
+[role=search] [type=submit],
+[role=search] [type=button],
+[role=search] [role=button],
+[role=group] button,
+[role=group] [type=submit],
+[role=group] [type=button],
+[role=group] [role=button] {
+  --pico-form-element-spacing-horizontal: 2rem;
+}
+@supports selector(:has(*)) {
+  [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus),
+  [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) {
+    --pico-group-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
+  }
+  [role=search]:has(button.secondary:focus,
+  [type=submit].secondary:focus,
+  [type=button].secondary:focus,
+  [role=button].secondary:focus),
+  [role=group]:has(button.secondary:focus,
+  [type=submit].secondary:focus,
+  [type=button].secondary:focus,
+  [role=button].secondary:focus) {
+    --pico-group-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
+  }
+  [role=search]:has(button.contrast:focus,
+  [type=submit].contrast:focus,
+  [type=button].contrast:focus,
+  [role=button].contrast:focus),
+  [role=group]:has(button.contrast:focus,
+  [type=submit].contrast:focus,
+  [type=button].contrast:focus,
+  [role=button].contrast:focus) {
+    --pico-group-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
+  }
+  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
+  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) {
+    --pico-group-box-shadow: 0 0 0 0.0625rem var(--pico-form-element-border-color);
+  }
+  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
+  [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=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] {
+    --pico-button-box-shadow: 0 0 0 0.0625rem var(--pico-primary-border);
+    --pico-button-hover-box-shadow: 0 0 0 0.0625rem var(--pico-primary-border-hover);
+  }
+  [role=search] button:focus,
+  [role=search] [type=submit]:focus,
+  [role=search] [type=button]:focus,
+  [role=search] [role=button]:focus,
+  [role=group] button:focus,
+  [role=group] [type=submit]:focus,
+  [role=group] [type=button]:focus,
+  [role=group] [role=button]:focus {
+    box-shadow: none;
+  }
+}
+
 /**
  * Color schemes
  */
@@ -791,8 +865,8 @@ a,
   transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
   transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
 }
-a:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+a:is([aria-current], :hover, :active, :focus),
-[role=link]:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
+[role=link]:is([aria-current], :hover, :active, :focus) {
   --pico-color: var(--pico-primary-hover);
   --pico-underline: var(--pico-primary-underline-hover);
   --pico-text-decoration: underline;
@@ -806,8 +880,8 @@ a.secondary,
   --pico-color: var(--pico-secondary);
   --pico-underline: var(--pico-secondary-underline);
 }
-a.secondary:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+a.secondary:is([aria-current], :hover, :active, :focus),
-[role=link].secondary:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
+[role=link].secondary:is([aria-current], :hover, :active, :focus) {
   --pico-color: var(--pico-secondary-hover);
   --pico-underline: var(--pico-secondary-underline-hover);
 }
@@ -816,8 +890,8 @@ a.contrast,
   --pico-color: var(--pico-contrast);
   --pico-underline: var(--pico-contrast-underline);
 }
-a.contrast:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+a.contrast:is([aria-current], :hover, :active, :focus),
-[role=link].contrast:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
+[role=link].contrast:is([aria-current], :hover, :active, :focus) {
   --pico-color: var(--pico-contrast-hover);
   --pico-underline: var(--pico-contrast-underline-hover);
 }
@@ -926,19 +1000,11 @@ hgroup > *:not(:first-child):last-child {
   font-family: unset;
 }
 
-:where(dl, ol, ul) {
+:where(ol, ul) li {
-  padding-right: 0;
-  padding-left: var(--pico-spacing);
-  -webkit-padding-start: var(--pico-spacing);
-  padding-inline-start: var(--pico-spacing);
-  -webkit-padding-end: 0;
-  padding-inline-end: 0;
-}
-:where(dl, ol, ul) li {
   margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25);
 }
 
-:where(dl, ol, ul) :is(dl, ol, ul) {
+:where(dl, ol, ul) :where(dl, ol, ul) {
   margin: 0;
   margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25);
 }
@@ -1040,16 +1106,16 @@ button {
 
 button,
 [type=submit],
-input[type=reset],
+[type=reset],
-input[type=button] {
+[type=button] {
   -webkit-appearance: button;
 }
 
 button,
 [type=submit],
-input[type=reset],
+[type=reset],
-input[type=button],
+[type=button],
-input[type=file]::file-selector-button,
+[type=file]::file-selector-button,
 [role=button] {
   --pico-background-color: var(--pico-primary-background);
   --pico-border-color: var(--pico-primary-border);
@@ -1073,12 +1139,12 @@ input[type=file]::file-selector-button,
   user-select: none;
   transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
 }
-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+button:is([aria-current], :hover, :active, :focus),
-[type=submit]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+[type=submit]:is([aria-current], :hover, :active, :focus),
-input[type=reset]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+[type=reset]:is([aria-current], :hover, :active, :focus),
-input[type=button]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+[type=button]:is([aria-current], :hover, :active, :focus),
-input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus),
-[role=button]:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
+[role=button]:is([aria-current], :hover, :active, :focus) {
   --pico-background-color: var(--pico-primary-background-hover);
   --pico-border-color: var(--pico-primary-border-hover);
   --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@@ -1086,89 +1152,85 @@ input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focu
 }
 button:focus,
 [type=submit]:focus,
-input[type=reset]:focus,
+[type=reset]:focus,
-input[type=button]:focus,
+[type=button]:focus,
-input[type=file]::file-selector-button:focus,
+[type=file]::file-selector-button:focus,
 [role=button]:focus {
   --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
 }
 
 [type=submit],
-input[type=reset],
+[type=reset],
-input[type=button] {
+[type=button] {
   margin-bottom: var(--pico-spacing);
 }
 
-:is(button, [type=submit], input[type=button], [role=button]).secondary,
+:is(button, [type=submit], [type=button], [role=button]).secondary,
-input[type=reset],
+[type=reset],
-input[type=file]::file-selector-button {
+[type=file]::file-selector-button {
   --pico-background-color: var(--pico-secondary-background);
   --pico-border-color: var(--pico-secondary-border);
   --pico-color: var(--pico-secondary-inverse);
   cursor: pointer;
 }
-:is(button, [type=submit], input[type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+:is(button, [type=submit], [type=button], [role=button]).secondary:is([aria-current], :hover, :active, :focus),
-input[type=reset]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+[type=reset]:is([aria-current], :hover, :active, :focus),
-input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
+[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus) {
   --pico-background-color: var(--pico-secondary-background-hover);
   --pico-border-color: var(--pico-secondary-border-hover);
   --pico-color: var(--pico-secondary-inverse);
 }
-:is(button, [type=submit], input[type=button], [role=button]).secondary:focus,
+:is(button, [type=submit], [type=button], [role=button]).secondary:focus,
-input[type=reset]:focus,
+[type=reset]:focus,
-input[type=file]::file-selector-button:focus {
+[type=file]::file-selector-button:focus {
   --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
 }
 
-:is(button, [type=submit], input[type=button], [role=button]).contrast {
+:is(button, [type=submit], [type=button], [role=button]).contrast {
   --pico-background-color: var(--pico-contrast-background);
   --pico-border-color: var(--pico-contrast-border);
   --pico-color: var(--pico-contrast-inverse);
 }
-:is(button, [type=submit], input[type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
+:is(button, [type=submit], [type=button], [role=button]).contrast:is([aria-current], :hover, :active, :focus) {
   --pico-background-color: var(--pico-contrast-background-hover);
   --pico-border-color: var(--pico-contrast-border-hover);
   --pico-color: var(--pico-contrast-inverse);
 }
-:is(button, [type=submit], input[type=button], [role=button]).contrast:focus {
+:is(button, [type=submit], [type=button], [role=button]).contrast:focus {
   --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-contrast-focus);
 }
 
-:is(button, [type=submit], input[type=button], [role=button]).outline,
+:is(button, [type=submit], [type=button], [role=button]).outline,
-input[type=reset].outline {
+[type=reset].outline {
   --pico-background-color: transparent;
   --pico-color: var(--pico-primary);
   --pico-border-color: currentColor;
 }
-:is(button, [type=submit], input[type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+:is(button, [type=submit], [type=button], [role=button]).outline:is([aria-current], :hover, :active, :focus),
-input[type=reset].outline:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
+[type=reset].outline:is([aria-current], :hover, :active, :focus) {
   --pico-background-color: transparent;
   --pico-color: var(--pico-primary-hover);
 }
 
-:is(button, [type=submit], input[type=button], [role=button]).outline.secondary,
+:is(button, [type=submit], [type=button], [role=button]).outline.secondary,
-input[type=reset].outline {
+[type=reset].outline {
   --pico-color: var(--pico-secondary);
   --pico-border-color: currentColor;
 }
-:is(button, [type=submit], input[type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+:is(button, [type=submit], [type=button], [role=button]).outline.secondary:is([aria-current], :hover, :active, :focus),
-input[type=reset].outline:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
+[type=reset].outline:is([aria-current], :hover, :active, :focus) {
   --pico-color: var(--pico-secondary-hover);
 }
 
-:is(button, [type=submit], input[type=button], [role=button]).outline.contrast {
+:is(button, [type=submit], [type=button], [role=button]).outline.contrast {
   --pico-color: var(--pico-contrast);
 }
-:is(button, [type=submit], input[type=button], [role=button]).outline.contrast:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
+:is(button, [type=submit], [type=button], [role=button]).outline.contrast:is([aria-current], :hover, :active, :focus) {
   --pico-color: var(--pico-contrast-hover);
 }
 
-:where(button,
+:where(button, [type=submit], [type=reset], [type=button], [role=button])[disabled],
-[type=submit],
+:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]) {
-input[type=reset],
-input[type=button],
-[role=button])[disabled],
-:where(fieldset[disabled]) :is(button, [type=submit], input[type=button], input[type=reset], [role=button]) {
   opacity: 0.5;
   pointer-events: none;
 }
@@ -1773,7 +1835,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
 /**
  * Input type file
  */
-input[type=file] {
+[type=file] {
   --pico-color: var(--pico-muted-color);
   margin-left: calc(var(--pico-outline-width) * -1);
   padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
@@ -1782,15 +1844,15 @@ input[type=file] {
   border-radius: 0;
   background: none;
 }
-input[type=file]::file-selector-button {
+[type=file]::file-selector-button {
   margin-right: calc(var(--pico-spacing) / 2);
   padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
 }
-input[type=file]:is(:hover, :active, :focus)::file-selector-button {
+[type=file]:is(:hover, :active, :focus)::file-selector-button {
   --pico-background-color: var(--pico-secondary-background-hover);
   --pico-border-color: var(--pico-secondary-border-hover);
 }
-input[type=file]:focus::file-selector-button {
+[type=file]:focus::file-selector-button {
   --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
 }
 
@@ -1885,7 +1947,6 @@ input[type=file]:focus::file-selector-button {
 input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
   -webkit-padding-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
   padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
-  border-radius: 5rem;
   background-image: var(--pico-icon-search);
   background-position: center left 1.125rem;
   background-size: 1rem auto;
@@ -2140,7 +2201,7 @@ details[role=list] summary + ul li a {
   text-decoration: none;
   text-overflow: ellipsis;
 }
-details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:focus, details[role=list] summary + ul li a:active, details[role=list] summary + ul li a:focus-visible, details[role=list] summary + ul li a[aria-current]:not([aria-current=false]) {
+details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:focus, details[role=list] summary + ul li a:active, details[role=list] summary + ul li a:focus-visible, details[role=list] summary + ul li a[aria-current] {
   background-color: var(--pico-dropdown-hover-background-color);
 }
 details[role=list] summary + ul li label {
@@ -2172,6 +2233,98 @@ details[role=list][open] summary::before {
   cursor: default;
 }
 
+/**
+ * Group ([role="group"], [role="search"])
+ */
+form[role=search], form[role=group] {
+  width: 100%;
+}
+
+[role=search] > *:first-child {
+  border-top-left-radius: 5rem;
+  border-bottom-left-radius: 5rem;
+}
+[role=search] > *:last-child {
+  border-top-right-radius: 5rem;
+  border-bottom-right-radius: 5rem;
+}
+
+[role=search],
+[role=group] {
+  display: inline-flex;
+  position: relative;
+  margin-bottom: var(--pico-spacing);
+  border-radius: var(--pico-border-radius);
+  box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+  vertical-align: middle;
+  transition: box-shadow var(--pico-transition);
+}
+[role=search] > *,
+[role=search] input:not([type=checkbox], [type=radio]),
+[role=search] select,
+[role=group] > *,
+[role=group] input:not([type=checkbox], [type=radio]),
+[role=group] select {
+  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=group] > *:not(:first-child),
+[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
+[role=group] select: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=group] > *:not(:last-child),
+[role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
+[role=group] select: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=group] > *:focus,
+[role=group] input:not([type=checkbox], [type=radio]):focus,
+[role=group] select:focus {
+  z-index: 2;
+}
+[role=search] button:not(:first-child),
+[role=search] [type=submit]:not(:first-child),
+[role=search] [type=reset]:not(:first-child),
+[role=search] [type=button]:not(:first-child),
+[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=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) {
+  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=group] button,
+[role=group] [type=submit],
+[role=group] [type=reset],
+[role=group] [type=button],
+[role=group] [role=button] {
+  width: auto;
+}
+
 /**
  * Loading ([aria-busy=true])
  */
@@ -2279,7 +2432,7 @@ dialog article .close {
   opacity: 0.5;
   transition: opacity var(--pico-transition);
 }
-dialog article .close:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
+dialog article .close:is([aria-current], :hover, :active, :focus) {
   opacity: 1;
 }
 dialog:not([open]), dialog[open=false] {
@@ -2404,7 +2557,7 @@ nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
   text-align: center;
   text-decoration: none;
 }
-nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]) {
+nav[aria-label=breadcrumb] a[aria-current] {
   background-color: transparent;
   color: inherit;
   text-decoration: none;

css/pico.fluid.classless.css

@@ -237,6 +237,10 @@ input:not([type=submit],
   --pico-outline-width: 0.0625rem;
 }
 
+[type=search] {
+  --pico-border-radius: 5rem;
+}
+
 [type=checkbox],
 [type=radio] {
   --pico-border-width: 0.125rem;
@@ -254,6 +258,56 @@ nav details[role=list] summary:focus-visible {
   --pico-outline-width: 0.1875rem;
 }
 
+[role=search] {
+  --pico-border-radius: 5rem;
+}
+
+[role=search],
+[role=group] {
+  --pico-group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}
+[role=search] button,
+[role=search] [type=submit],
+[role=search] [type=button],
+[role=search] [role=button],
+[role=group] button,
+[role=group] [type=submit],
+[role=group] [type=button],
+[role=group] [role=button] {
+  --pico-form-element-spacing-horizontal: 2rem;
+}
+@supports selector(:has(*)) {
+  [role=search]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus),
+  [role=group]:has(button:focus, [type=submit]:focus, [type=button]:focus, [role=button]:focus) {
+    --pico-group-box-shadow: 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
+  }
+  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus),
+  [role=group]:has(input:not([type=submit], [type=button]):focus, select:focus) {
+    --pico-group-box-shadow: 0 0 0 0.0625rem var(--pico-form-element-border-color);
+  }
+  [role=search]:has(input:not([type=submit], [type=button]):focus, select:focus) button,
+  [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=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] {
+    --pico-button-box-shadow: 0 0 0 0.0625rem var(--pico-primary-border);
+    --pico-button-hover-box-shadow: 0 0 0 0.0625rem var(--pico-primary-border-hover);
+  }
+  [role=search] button:focus,
+  [role=search] [type=submit]:focus,
+  [role=search] [type=button]:focus,
+  [role=search] [role=button]:focus,
+  [role=group] button:focus,
+  [role=group] [type=submit]:focus,
+  [role=group] [type=button]:focus,
+  [role=group] [role=button]:focus {
+    box-shadow: none;
+  }
+}
+
 /**
  * Color schemes
  */
@@ -712,8 +766,8 @@ a,
   transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition);
   transition: background-color var(--pico-transition), color var(--pico-transition), text-decoration var(--pico-transition), box-shadow var(--pico-transition), -webkit-text-decoration var(--pico-transition);
 }
-a:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+a:is([aria-current], :hover, :active, :focus),
-[role=link]:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
+[role=link]:is([aria-current], :hover, :active, :focus) {
   --pico-color: var(--pico-primary-hover);
   --pico-underline: var(--pico-primary-underline-hover);
   --pico-text-decoration: underline;
@@ -827,19 +881,11 @@ hgroup > *:not(:first-child):last-child {
   font-family: unset;
 }
 
-:where(dl, ol, ul) {
+:where(ol, ul) li {
-  padding-right: 0;
-  padding-left: var(--pico-spacing);
-  -webkit-padding-start: var(--pico-spacing);
-  padding-inline-start: var(--pico-spacing);
-  -webkit-padding-end: 0;
-  padding-inline-end: 0;
-}
-:where(dl, ol, ul) li {
   margin-bottom: calc(var(--pico-typography-spacing-vertical) * 0.25);
 }
 
-:where(dl, ol, ul) :is(dl, ol, ul) {
+:where(dl, ol, ul) :where(dl, ol, ul) {
   margin: 0;
   margin-top: calc(var(--pico-typography-spacing-vertical) * 0.25);
 }
@@ -941,16 +987,16 @@ button {
 
 button,
 [type=submit],
-input[type=reset],
+[type=reset],
-input[type=button] {
+[type=button] {
   -webkit-appearance: button;
 }
 
 button,
 [type=submit],
-input[type=reset],
+[type=reset],
-input[type=button],
+[type=button],
-input[type=file]::file-selector-button,
+[type=file]::file-selector-button,
 [role=button] {
   --pico-background-color: var(--pico-primary-background);
   --pico-border-color: var(--pico-primary-border);
@@ -974,12 +1020,12 @@ input[type=file]::file-selector-button,
   user-select: none;
   transition: background-color var(--pico-transition), border-color var(--pico-transition), color var(--pico-transition), box-shadow var(--pico-transition);
 }
-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+button:is([aria-current], :hover, :active, :focus),
-[type=submit]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+[type=submit]:is([aria-current], :hover, :active, :focus),
-input[type=reset]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+[type=reset]:is([aria-current], :hover, :active, :focus),
-input[type=button]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+[type=button]:is([aria-current], :hover, :active, :focus),
-input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus),
-[role=button]:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
+[role=button]:is([aria-current], :hover, :active, :focus) {
   --pico-background-color: var(--pico-primary-background-hover);
   --pico-border-color: var(--pico-primary-border-hover);
   --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
@@ -987,42 +1033,38 @@ input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focu
 }
 button:focus,
 [type=submit]:focus,
-input[type=reset]:focus,
+[type=reset]:focus,
-input[type=button]:focus,
+[type=button]:focus,
-input[type=file]::file-selector-button:focus,
+[type=file]::file-selector-button:focus,
 [role=button]:focus {
   --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-primary-focus);
 }
 
 [type=submit],
-input[type=reset],
+[type=reset],
-input[type=button] {
+[type=button] {
   margin-bottom: var(--pico-spacing);
 }
 
-input[type=reset],
+[type=reset],
-input[type=file]::file-selector-button {
+[type=file]::file-selector-button {
   --pico-background-color: var(--pico-secondary);
   --pico-border-color: var(--pico-secondary);
   --pico-color: var(--pico-secondary-inverse);
   cursor: pointer;
 }
-input[type=reset]:is([aria-current], :hover, :active, :focus):not([aria-current=false]),
+[type=reset]:is([aria-current], :hover, :active, :focus),
-input[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus):not([aria-current=false]) {
+[type=file]::file-selector-button:is([aria-current], :hover, :active, :focus) {
   --pico-background-color: var(--pico-secondary-hover);
   --pico-border-color: var(--pico-secondary-hover);
 }
-input[type=reset]:focus,
+[type=reset]:focus,
-input[type=file]::file-selector-button:focus {
+[type=file]::file-selector-button:focus {
   --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
 }
 
-:where(button,
+:where(button, [type=submit], [type=reset], [type=button], [role=button])[disabled],
-[type=submit],
+:where(fieldset[disabled]) :is(button, [type=submit], [type=button], [type=reset], [role=button]) {
-input[type=reset],
-input[type=button],
-[role=button])[disabled],
-:where(fieldset[disabled]) :is(button, [type=submit], input[type=button], input[type=reset], [role=button]) {
   opacity: 0.5;
   pointer-events: none;
 }
@@ -1627,7 +1669,7 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time] {
 /**
  * Input type file
  */
-input[type=file] {
+[type=file] {
   --pico-color: var(--pico-muted-color);
   margin-left: calc(var(--pico-outline-width) * -1);
   padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) 0;
@@ -1636,15 +1678,15 @@ input[type=file] {
   border-radius: 0;
   background: none;
 }
-input[type=file]::file-selector-button {
+[type=file]::file-selector-button {
   margin-right: calc(var(--pico-spacing) / 2);
   padding: calc(var(--pico-form-element-spacing-vertical) * 0.5) var(--pico-form-element-spacing-horizontal);
 }
-input[type=file]:is(:hover, :active, :focus)::file-selector-button {
+[type=file]:is(:hover, :active, :focus)::file-selector-button {
   --pico-background-color: var(--pico-secondary-background-hover);
   --pico-border-color: var(--pico-secondary-border-hover);
 }
-input[type=file]:focus::file-selector-button {
+[type=file]:focus::file-selector-button {
   --pico-box-shadow: var(--pico-button-hover-box-shadow, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--pico-outline-width) var(--pico-secondary-focus);
 }
 
@@ -1739,7 +1781,6 @@ input[type=file]:focus::file-selector-button {
 input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
   -webkit-padding-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
   padding-inline-start: calc(var(--pico-form-element-spacing-horizontal) + 1.75rem);
-  border-radius: 5rem;
   background-image: var(--pico-icon-search);
   background-position: center left 1.125rem;
   background-size: 1rem auto;
@@ -1994,7 +2035,7 @@ details[role=list] summary + ul li a {
   text-decoration: none;
   text-overflow: ellipsis;
 }
-details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:focus, details[role=list] summary + ul li a:active, details[role=list] summary + ul li a:focus-visible, details[role=list] summary + ul li a[aria-current]:not([aria-current=false]) {
+details[role=list] summary + ul li a:hover, details[role=list] summary + ul li a:focus, details[role=list] summary + ul li a:active, details[role=list] summary + ul li a:focus-visible, details[role=list] summary + ul li a[aria-current] {
   background-color: var(--pico-dropdown-hover-background-color);
 }
 details[role=list] summary + ul li label {
@@ -2026,6 +2067,98 @@ details[role=list][open] summary::before {
   cursor: default;
 }
 
+/**
+ * Group ([role="group"], [role="search"])
+ */
+form[role=search], form[role=group] {
+  width: 100%;
+}
+
+[role=search] > *:first-child {
+  border-top-left-radius: 5rem;
+  border-bottom-left-radius: 5rem;
+}
+[role=search] > *:last-child {
+  border-top-right-radius: 5rem;
+  border-bottom-right-radius: 5rem;
+}
+
+[role=search],
+[role=group] {
+  display: inline-flex;
+  position: relative;
+  margin-bottom: var(--pico-spacing);
+  border-radius: var(--pico-border-radius);
+  box-shadow: var(--pico-group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+  vertical-align: middle;
+  transition: box-shadow var(--pico-transition);
+}
+[role=search] > *,
+[role=search] input:not([type=checkbox], [type=radio]),
+[role=search] select,
+[role=group] > *,
+[role=group] input:not([type=checkbox], [type=radio]),
+[role=group] select {
+  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=group] > *:not(:first-child),
+[role=group] input:not([type=checkbox], [type=radio]):not(:first-child),
+[role=group] select: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=group] > *:not(:last-child),
+[role=group] input:not([type=checkbox], [type=radio]):not(:last-child),
+[role=group] select: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=group] > *:focus,
+[role=group] input:not([type=checkbox], [type=radio]):focus,
+[role=group] select:focus {
+  z-index: 2;
+}
+[role=search] button:not(:first-child),
+[role=search] [type=submit]:not(:first-child),
+[role=search] [type=reset]:not(:first-child),
+[role=search] [type=button]:not(:first-child),
+[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=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) {
+  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=group] button,
+[role=group] [type=submit],
+[role=group] [type=reset],
+[role=group] [type=button],
+[role=group] [role=button] {
+  width: auto;
+}
+
 /**
  * Loading ([aria-busy=true])
  */
@@ -2196,7 +2329,7 @@ nav[aria-label=breadcrumb] ul li:not(:last-child)::after {
   text-align: center;
   text-decoration: none;
 }
-nav[aria-label=breadcrumb] a[aria-current]:not([aria-current=false]) {
+nav[aria-label=breadcrumb] a[aria-current] {
   background-color: transparent;
   color: inherit;
   text-decoration: none;

scss/_index.scss

@@ -36,6 +36,7 @@
 @use "components/accordion"; // details, summary
 @use "components/card"; // article
 @use "components/dropdown"; // details[role="list"]
+@use "components/group"; // details[role="list"]
 @use "components/loading"; // aria-busy=true
 @use "components/modal"; // dialog
 @use "components/nav"; // nav

scss/_settings.scss

@@ -124,6 +124,7 @@ $modules: map.merge(
     "components/accordion": true,
     "components/card": true,
     "components/dropdown": true,
+    "components/group": true,
     "components/loading": true,
     "components/modal": true,
     "components/nav": true,

scss/components/_group.scss

@@ -0,0 +1,83 @@
+@use "sass:map";
+@use "../settings" as *;
+
+@if map.get($modules, "components/group") {
+  /**
+   * Group ([role="group"], [role="search"])
+   */
+
+  form {
+    &[role="search"],
+    &[role="group"] {
+      width: 100%;
+    }
+  }
+
+  [role="search"] {
+    > * {
+      &:first-child {
+        border-top-left-radius: 5rem;
+        border-bottom-left-radius: 5rem;
+      }
+
+      &:last-child {
+        border-top-right-radius: 5rem;
+        border-bottom-right-radius: 5rem;
+      }
+    }
+  }
+
+  [role="search"],
+  [role="group"] {
+    display: inline-flex;
+    position: relative;
+    margin-bottom: var(#{$✨}spacing);
+    border-radius: var(#{$✨}border-radius);
+    box-shadow: var(#{$✨}group-box-shadow, 0 0 0 rgba(0, 0, 0, 0));
+    vertical-align: middle;
+    transition: box-shadow var(#{$✨}transition);
+
+    > *,
+    input:not([type="checkbox"], [type="radio"]),
+    select {
+      position: relative;
+      flex: 1 1 auto;
+      margin-bottom: 0;
+
+      &:not(:first-child) {
+        margin-left: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &:not(:last-child) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+
+      &:focus {
+        z-index: 2;
+      }
+    }
+
+    button,
+    [type="submit"],
+    [type="reset"],
+    [type="button"],
+    [role="button"],
+    input:not([type="checkbox"], [type="radio"]),
+    select {
+      &:not(:first-child) {
+        margin-left: calc(var(#{$✨}border-width) * -1);
+      }
+    }
+
+    button,
+    [type="submit"],
+    [type="reset"],
+    [type="button"],
+    [role="button"] {
+      width: auto;
+    }
+  }
+}

scss/themes/default/_styles.scss

@@ -342,6 +342,10 @@
     #{$✨}outline-width: 0.0625rem;
   }
 
+  [type="search"] {
+    #{$✨}border-radius: 5rem;
+  }
+
   // Checkboxes, Radios and Switches
   @if map.get($modules, "forms/checkbox-radio-switch") {
     [type="checkbox"],
@@ -369,4 +373,69 @@
       }
     }
   }
+
+  // Group (role="group")
+  @if map.get($modules, "components/group") {
+    [role="search"] {
+      #{$✨}border-radius: 5rem;
+    }
+
+    [role="search"],
+    [role="group"] {
+      #{$✨}group-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
+
+      button,
+      [type="submit"],
+      [type="button"],
+      [role="button"] {
+        #{$✨}form-element-spacing-horizontal: 2rem;
+      }
+
+      @supports selector(:has(*)) {
+        &:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
+          #{$✨}group-box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
+        }
+
+        @if $enable-classes {
+          &:has(
+              button.secondary:focus,
+              [type="submit"].secondary:focus,
+              [type="button"].secondary:focus,
+              [role="button"].secondary:focus
+            ) {
+            #{$✨}group-box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}secondary-focus);
+          }
+          &:has(
+              button.contrast:focus,
+              [type="submit"].contrast:focus,
+              [type="button"].contrast:focus,
+              [role="button"].contrast:focus
+            ) {
+            #{$✨}group-box-shadow: 0 0 0 var(#{$✨}outline-width) var(#{$✨}contrast-focus);
+          }
+        }
+
+        &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
+          #{$✨}group-box-shadow: 0 0 0 0.0625rem var(#{$✨}form-element-border-color);
+
+          button,
+          [type="submit"],
+          [type="button"],
+          [role="button"] {
+            #{$✨}button-box-shadow: 0 0 0 0.0625rem var(#{$✨}primary-border);
+            #{$✨}button-hover-box-shadow: 0 0 0 0.0625rem var(#{$✨}primary-border-hover);
+          }
+        }
+
+        button,
+        [type="submit"],
+        [type="button"],
+        [role="button"] {
+          &:focus {
+            box-shadow: none;
+          }
+        }
+      }
+    }
+  }
 }