feat: group

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,115 @@
+@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;
+    }
+
+    @supports selector(:has(*)) {
+      // Group box shadow when a button is focused
+      &:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
+        #{$✨}group-box-shadow: var(#{$✨}group-box-shadow-with-button);
+      }
+
+      // Group box shadow when an input is focused
+      &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
+        #{$✨}group-box-shadow: var(#{$✨}group-box-shadow-with-input);
+
+        // Adapt box shadow for buttons
+        button,
+        [type="submit"],
+        [type="button"],
+        [role="button"] {
+          #{$✨}button-box-shadow: 0 0 0 var(#{$✨}border-width) var(#{$✨}primary-border);
+          #{$✨}button-hover-box-shadow: 0 0 0 var(#{$✨}border-width)
+            var(#{$✨}primary-border-hover);
+        }
+      }
+
+      // Remove button box shadow if we have a group box shadow
+      button,
+      [type="submit"],
+      [type="button"],
+      [role="button"] {
+        &:focus {
+          box-shadow: none;
+        }
+      }
+    }
+  }
+}

scss/themes/default/_styles.scss

@@ -31,7 +31,7 @@
 
     // Borders
     #{$✨}border-radius: 0.25rem;
-    #{$✨}border-width: 1px;
+    #{$✨}border-width: 0.0625rem;
     #{$✨}outline-width: 0.1875rem;
 
     // Transitions
@@ -308,7 +308,7 @@
       th,
       td {
         #{$✨}font-weight: 600;
-        #{$✨}border-width: 3px;
+        #{$✨}border-width: 0.1875rem;
       }
     }
   }
@@ -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,53 @@
       }
     }
   }
+
+  // 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);
+      #{$✨}group-box-shadow-with-button: 0 0 0 var(#{$✨}outline-width) var(#{$✨}primary-focus);
+      #{$✨}group-box-shadow-with-input: 0 0 0 0.0625rem var(#{$✨}form-element-border-color);
+
+      @if $enable-classes {
+        &:has(
+            button.secondary:focus,
+            [type="submit"].secondary:focus,
+            [type="button"].secondary:focus,
+            [role="button"].secondary:focus
+          ) {
+          #{$✨}group-box-shadow-with-button: 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-with-button: 0
+            0
+            0
+            var(#{$✨}outline-width)
+            var(#{$✨}contrast-focus);
+        }
+      }
+
+      button,
+      [type="submit"],
+      [type="button"],
+      [role="button"] {
+        #{$✨}form-element-spacing-horizontal: 2rem;
+      }
+    }
+  }
 }