@redvars/peacock 3.3.3 → 3.5.0

package/src/button/button/button-sizes.scss

@@ -1,10 +1,15 @@
 @use '../../../scss/mixin';
 
-.button.size-xs,
-.button.size-extra-small {
-  --_button-height: 2rem;
+
+:host([size='xs']),
+:host([size='extra-small']) {
+  --button-height: 2rem;
+}
+
+:host([size='xs']) .button,
+:host([size='extra-small']) .button {
   --_button-icon-size: 1rem;
-  --_container-padding: 0.75rem;
+  --_button_container-padding: 0.75rem;
 
   font-size:  0.875rem !important;
   font-weight: var(--font-weight-medium) !important;
@@ -13,11 +18,15 @@
 }
 
 
-.button.size-sm,
-.button.size-small {
-  --_button-height: 2.5rem;
+:host([size='sm']),
+:host([size='small']) {
+  --button-height: 2.5rem;
+}
+
+:host([size='sm']) .button,
+:host([size='small']) .button {
   --_button-icon-size: 1.25rem;
-  --_container-padding: 1rem;
+  --_button_container-padding: 1rem;
   --_button-icon-label-spacing: 0.5rem;
 
   font-size:  0.875rem !important;
@@ -26,11 +35,15 @@
   letter-spacing: 0.1px !important;
 }
 
-.button.size-md,
-.button.size-medium {
-  --_button-height: 3.5rem;
+:host([size='md']),
+:host([size='medium']) {
+  --button-height: 3.5rem;
+}
+
+:host([size='md']) .button,
+:host([size='medium']) .button {
   --_button-icon-size: 1.5rem;
-  --_container-padding: 1.5rem;
+  --_button_container-padding: 1.5rem;
 
   font-size:  1rem !important;
   font-weight: var(--font-weight-medium) !important;
@@ -38,11 +51,15 @@
   letter-spacing: 0.15px !important;
 }
 
-.button.size-lg,
-.button.size-large {
-  --_button-height: 6rem;
+:host([size='lg']),
+:host([size='large']) {
+  --button-height: 6rem;
+}
+
+:host([size='lg']) .button,
+:host([size='large']) .button {
   --_button-icon-size: 2rem;
-  --_container-padding: 3rem;
+  --_button_container-padding: 3rem;
 
   font-size:  1.5rem !important;
   font-weight: var(--font-weight-regular) !important;
@@ -50,10 +67,13 @@
   letter-spacing: 0 !important;
 }
 
-.button.size-xl {
-  --_button-height: 8.5rem;
+:host([size='xl']) {
+  --button-height: 8.5rem;
+}
+
+:host([size='xl']) .button {
   --_button-icon-size: 2.5rem;
-  --_container-padding: 4rem;
+  --_button_container-padding: 4rem;
 
   font-size:  2rem !important;
   font-weight: var(--font-weight-regular) !important;

package/src/button/button/button.scss

@@ -5,17 +5,17 @@
 
 :host {
   display: inline-flex;
-  --z-index-button: 0;
 
 
   --button-height: unset;
   --button-icon-size: unset;
-  --button-container-shape: unset;
+  --button-container-padding: unset;
+  --button-container-shape: var(--shape-corner-medium);
   --button-container-shape-start-start: unset;
   --button-container-shape-start-end: unset;
   --button-container-shape-end-start: unset;
   --button-container-shape-end-end: unset;
-  --button-container-shape-variant: unset;
+  --button-container-shape-variant: squircle;
 }
 
 /**
@@ -24,7 +24,7 @@
   */
 slot::slotted(*) {
   --icon-size: var(--button-icon-size, var(--_button-icon-size));
-  --icon-color: var(--_label-text-color);
+  --icon-color: var(--_button_label-text-color);
 }
 
 /*
@@ -45,32 +45,33 @@ slot::slotted(*) {
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: var(--button-height, var(--_button-height));
-  padding: 0 var(--_container-padding);
+  height: var(--button-height);
+  padding: 0 var(--button-container-padding, var(--_button_container-padding));
   width: 100%;
   font-family: var(--font-family-sans) !important;
   cursor: pointer;
 
-  --_container-shape-start-start: var(--button-container-shape-start-start, var(--button-container-shape, var(--shape-corner-medium)));
-  --_container-shape-start-end: var(--button-container-shape-start-end, var(--button-container-shape, var(--shape-corner-medium)));
-  --_container-shape-end-start: var(--button-container-shape-end-start, var(--button-container-shape, var(--shape-corner-medium)));
-  --_container-shape-end-end: var(--button-container-shape-end-end, var(--button-container-shape, var(--shape-corner-medium)));
-  --_container-corner-shape-variant: var(--button-container-shape-variant, squircle);
+  --_button_container-shape-start-start: var(--button-container-shape-start-start, var(--button-container-shape));
+  --_button_container-shape-start-end: var(--button-container-shape-start-end, var(--button-container-shape));
+  --_button_container-shape-end-start: var(--button-container-shape-end-start, var(--button-container-shape));
+  --_button_container-shape-end-end: var(--button-container-shape-end-end, var(--button-container-shape));
+  --_button_container-corner-shape-variant: var(--button-container-shape-variant);
 
 
   .button-content {
     display: flex;
     align-items: center;
     justify-content: center;
+    pointer-events: none;
     gap: var(--_button-icon-label-spacing);
     width: 100%;
     height: 100%;
     z-index: 0;
 
-    color: var(--_label-text-color);
-    opacity: var(--_label-text-opacity, 1);
+    color: var(--_button_label-text-color);
+    opacity: var(--_button_label-text-opacity, 1);
     --icon-size: var(--button-icon-size, var(--_button-icon-size));
-    --icon-color: var(--_label-text-color);
+    --icon-color: var(--_button_label-text-color);
 
     .slot-container {
       display: none;
@@ -87,21 +88,21 @@ slot::slotted(*) {
    */
   .focus-ring {
     z-index: 2;
-    --focus-ring-container-shape-start-start: var(--_container-shape-start-start);
-    --focus-ring-container-shape-start-end: var(--_container-shape-start-end);
-    --focus-ring-container-shape-end-start: var(--_container-shape-end-start);
-    --focus-ring-container-shape-end-end: var(--_container-shape-end-end);
-    --focus-ring-container-shape-variant: var(--_container-corner-shape-variant);
+    --focus-ring-container-shape-start-start: var(--_button_container-shape-start-start);
+    --focus-ring-container-shape-start-end: var(--_button_container-shape-start-end);
+    --focus-ring-container-shape-end-start: var(--_button_container-shape-end-start);
+    --focus-ring-container-shape-end-end: var(--_button_container-shape-end-end);
+    --focus-ring-container-shape-variant: var(--_button_container-corner-shape-variant);
   }
 
   .ripple {
-    border-start-start-radius: var(--_container-shape-start-start);
-    border-start-end-radius: var(--_container-shape-start-end);
-    border-end-start-radius: var(--_container-shape-end-start);
-    border-end-end-radius: var(--_container-shape-end-end);
-    corner-shape: var(--_container-corner-shape-variant);
-    --ripple-state-opacity: var(--_container-state-opacity, 0);
-    --ripple-pressed-color: var(--_container-state-color);
+    border-start-start-radius: var(--_button_container-shape-start-start);
+    border-start-end-radius: var(--_button_container-shape-start-end);
+    border-end-start-radius: var(--_button_container-shape-end-start);
+    border-end-end-radius: var(--_button_container-shape-end-end);
+    corner-shape: var(--_button_container-corner-shape-variant);
+    --ripple-state-opacity: var(--_button_container-state-opacity, 0);
+    --ripple-pressed-color: var(--_button_container-state-color);
   }
 
   .background {
@@ -110,14 +111,14 @@ slot::slotted(*) {
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--_container-color);
-    opacity: var(--_container-opacity, 1);
-
-    border-start-start-radius: var(--_container-shape-start-start);
-    border-start-end-radius: var(--_container-shape-start-end);
-    border-end-start-radius: var(--_container-shape-end-start);
-    border-end-end-radius: var(--_container-shape-end-end);
-    corner-shape: var(--_container-corner-shape-variant);
+    background-color: var(--_button_container-color);
+    opacity: var(--_button_container-opacity, 1);
+
+    border-start-start-radius: var(--_button_container-shape-start-start);
+    border-start-end-radius: var(--_button_container-shape-start-end);
+    border-end-start-radius: var(--_button_container-shape-end-start);
+    border-end-end-radius: var(--_button_container-shape-end-end);
+    corner-shape: var(--_button_container-corner-shape-variant);
     pointer-events: none;
   }
 
@@ -129,32 +130,32 @@ slot::slotted(*) {
     position: absolute;
     top: 0;
     left: 0;
-    --skeleton-container-shape-start-start: var(--_container-shape-start-start);
-    --skeleton-container-shape-start-end: var(--_container-shape-start-end);
-    --skeleton-container-shape-end-start: var(--_container-shape-end-start);
-    --skeleton-container-shape-end-end: var(--_container-shape-end-end);
-    --skeleton-container-shape-variant: var(--_container-corner-shape-variant);
+    --skeleton-container-shape-start-start: var(--_button_container-shape-start-start);
+    --skeleton-container-shape-start-end: var(--_button_container-shape-start-end);
+    --skeleton-container-shape-end-start: var(--_button_container-shape-end-start);
+    --skeleton-container-shape-end-end: var(--_button_container-shape-end-end);
+    --skeleton-container-shape-variant: var(--_button_container-corner-shape-variant);
   }
 
   .elevation {
-    --elevation-level: var(--_container-elevation-level);
+    --elevation-level: var(--_button_container-elevation-level);
     transition-duration: 280ms;
-    --elevation-container-shape-start-start: var(--_container-shape-start-start);
-    --elevation-container-shape-start-end: var(--_container-shape-start-end);
-    --elevation-container-shape-end-start: var(--_container-shape-end-start);
-    --elevation-container-shape-end-end: var(--_container-shape-end-end);
-    --elevation-container-shape-variant: var(--_container-corner-shape-variant);
+    --elevation-container-shape-start-start: var(--_button_container-shape-start-start);
+    --elevation-container-shape-start-end: var(--_button_container-shape-start-end);
+    --elevation-container-shape-end-start: var(--_button_container-shape-end-start);
+    --elevation-container-shape-end-end: var(--_button_container-shape-end-end);
+    --elevation-container-shape-variant: var(--_button_container-corner-shape-variant);
   }
 
   .neo-background {
     display: none;
     position: absolute;
     background: var(--color-inverse-surface);
-    border-start-start-radius: var(--_container-shape-start-start);
-    border-start-end-radius: var(--_container-shape-start-end);
-    border-end-start-radius: var(--_container-shape-end-start);
-    border-end-end-radius: var(--_container-shape-end-end);
-    corner-shape: var(--_container-corner-shape-variant);
+    border-start-start-radius: var(--_button_container-shape-start-start);
+    border-start-end-radius: var(--_button_container-shape-start-end);
+    border-end-start-radius: var(--_button_container-shape-end-start);
+    border-end-end-radius: var(--_button_container-shape-end-end);
+    corner-shape: var(--_button_container-corner-shape-variant);
     width: 100%;
     height: 100%;
     pointer-events: none;
@@ -169,13 +170,13 @@ slot::slotted(*) {
     width: 100%;
     height: 100%;
     pointer-events: none;
-    border: var(--_outline-width) solid var(--_outline-color);
-    opacity: var(--_outline-opacity, 1);
-    border-start-start-radius: var(--_container-shape-start-start);
-    border-start-end-radius: var(--_container-shape-start-end);
-    border-end-start-radius: var(--_container-shape-end-start);
-    border-end-end-radius: var(--_container-shape-end-end);
-    corner-shape: var(--_container-corner-shape-variant);
+    border: var(--_button_outline-width) solid var(--_button_outline-color);
+    opacity: var(--_button_outline-opacity, 1);
+    border-start-start-radius: var(--_button_container-shape-start-start);
+    border-start-end-radius: var(--_button_container-shape-start-end);
+    border-end-start-radius: var(--_button_container-shape-end-start);
+    border-end-end-radius: var(--_button_container-shape-end-end);
+    corner-shape: var(--_button_container-corner-shape-variant);
   }
 
 
@@ -221,27 +222,27 @@ slot::slotted(*) {
  */
 
 .button.variant-elevated {
-  --_container-color: var(--elevated-button-container-color);
-  --_label-text-color: var(--elevated-button-label-text-color);
-  --_container-elevation-level: 1;
+  --_button_container-color: var(--elevated-button-container-color);
+  --_button_label-text-color: var(--elevated-button-label-text-color);
+  --_button_container-elevation-level: 1;
 
-  --_container-state-color: var(--_label-text-color);
+  --_button_container-state-color: var(--_button_label-text-color);
 
   &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_container-elevation-level: 2;
-    --_container-state-opacity: 0.08;
+    --_button_container-elevation-level: 2;
+    --_button_container-state-opacity: 0.08;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_container-elevation-level: 1;
-    --_container-state-opacity: 0.12;
+    --_button_container-elevation-level: 1;
+    --_button_container-state-opacity: 0.12;
   }
 
   &.disabled {
-    --_container-color: var(--color-on-surface);
-    --_container-opacity: 0.1;
-    --_label-text-color: var(--color-on-surface);
-    --_label-text-opacity: 0.38;
+    --_button_container-color: var(--color-on-surface);
+    --_button_container-opacity: 0.1;
+    --_button_label-text-color: var(--color-on-surface);
+    --_button_label-text-opacity: 0.38;
 
     .ripple {
       display: none;
@@ -251,26 +252,26 @@ slot::slotted(*) {
 
 
 .button.variant-filled {
-  --_container-color: var(--filled-button-container-color);
-  --_label-text-color: var(--filled-button-label-text-color);
-  --_container-state-color: var(--_label-text-color);
+  --_button_container-color: var(--filled-button-container-color);
+  --_button_label-text-color: var(--filled-button-label-text-color);
+  --_button_container-state-color: var(--_button_label-text-color);
 
 
   &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_container-elevation-level: 1;
-    --_container-state-opacity: 0.08;
+    --_button_container-elevation-level: 1;
+    --_button_container-state-opacity: 0.08;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_container-elevation-level: 0;
-    --_container-state-opacity: 0.1;
+    --_button_container-elevation-level: 0;
+    --_button_container-state-opacity: 0.1;
   }
 
   &.disabled {
-    --_container-color: var(--color-on-surface);
-    --_container-opacity: 0.1;
-    --_label-text-color: var(--color-on-surface);
-    --_label-text-opacity: 0.38;
+    --_button_container-color: var(--color-on-surface);
+    --_button_container-opacity: 0.1;
+    --_button_label-text-color: var(--color-on-surface);
+    --_button_label-text-opacity: 0.38;
 
     .ripple {
       display: none;
@@ -280,26 +281,26 @@ slot::slotted(*) {
 
 
 .button.variant-tonal {
-  --_container-color: var(--tonal-button-container-color);
-  --_label-text-color: var(--tonal-button-label-text-color);
+  --_button_container-color: var(--tonal-button-container-color);
+  --_button_label-text-color: var(--tonal-button-label-text-color);
 
-  --_container-state-color: var(--_label-text-color);
+  --_button_container-state-color: var(--_button_label-text-color);
 
   &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_container-elevation-level: 1;
-    --_container-state-opacity: 0.08;
+    --_button_container-elevation-level: 1;
+    --_button_container-state-opacity: 0.08;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_container-elevation-level: 0;
-    --_container-state-opacity: 0.12;
+    --_button_container-elevation-level: 0;
+    --_button_container-state-opacity: 0.12;
   }
 
   &.disabled {
-    --_container-color: var(--color-on-surface);
-    --_container-opacity: 0.1;
-    --_label-text-color: var(--color-on-surface);
-    --_label-text-opacity: 0.38;
+    --_button_container-color: var(--color-on-surface);
+    --_button_container-opacity: 0.1;
+    --_button_label-text-color: var(--color-on-surface);
+    --_button_label-text-opacity: 0.38;
 
     .ripple {
       display: none;
@@ -309,29 +310,29 @@ slot::slotted(*) {
 
 
 .button.variant-outlined {
-  --_outline-width: var(--outlined-button-outline-width, 0.0675rem);
-  --_outline-color: var(--outlined-button-outline-color);
-  --_label-text-color: var(--outlined-button-label-text-color);
+  --_button_outline-width: var(--outlined-button-outline-width, 0.0675rem);
+  --_button_outline-color: var(--outlined-button-outline-color);
+  --_button_label-text-color: var(--outlined-button-label-text-color);
 
-  --_container-state-color: var(--_label-text-color);
+  --_button_container-state-color: var(--_button_label-text-color);
 
   .outline {
     display: block;
   }
 
   &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_container-state-opacity: 0.08;
+    --_button_container-state-opacity: 0.08;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_container-state-opacity: 0.12;
+    --_button_container-state-opacity: 0.12;
   }
 
   &.disabled {
-    --_outline-color: var(--color-on-surface);
-    --_label-text-color: var(--color-on-surface);
-    --_label-text-opacity: 0.38;
-    --_outline-opacity: 0.12;
+    --_button_outline-color: var(--color-on-surface);
+    --_button_label-text-color: var(--color-on-surface);
+    --_button_label-text-opacity: 0.38;
+    --_button_outline-opacity: 0.12;
 
     .ripple {
       display: none;
@@ -342,20 +343,20 @@ slot::slotted(*) {
 
 .button.variant-text {
 
-  --_label-text-color: var(--text-button-label-text-color);
-  --_container-state-color: var(--_label-text-color);
+  --_button_label-text-color: var(--text-button-label-text-color);
+  --_button_container-state-color: var(--_button_label-text-color);
 
   &:hover:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_container-state-opacity: 0.08;
+    --_button_container-state-opacity: 0.08;
   }
 
   &.pressed:not(:where(.disabled, .soft-disabled, .show-skeleton)) {
-    --_container-state-opacity: 0.12;
+    --_button_container-state-opacity: 0.12;
   }
 
   &.disabled {
-    --_label-text-color: var(--color-on-surface);
-    --_label-text-opacity: 0.38;
+    --_button_label-text-color: var(--color-on-surface);
+    --_button_label-text-opacity: 0.38;
 
     .ripple {
       display: none;
@@ -365,11 +366,11 @@ slot::slotted(*) {
 
 .button.variant-neo {
 
-  --_container-color: var(--neo-button-container-color);
-  --_label-text-color: var(--neo-button-label-text-color);
+  --_button_container-color: var(--neo-button-container-color);
+  --_button_label-text-color: var(--neo-button-label-text-color);
 
-  --_outline-width: var(--outlined-button-outline-width, 0.125rem);
-  --_outline-color: var(--color-inverse-surface);
+  --_button_outline-width: var(--outlined-button-outline-width, 0.125rem);
+  --_button_outline-color: var(--color-inverse-surface);
 
   .outline {
     display: block;
@@ -395,11 +396,11 @@ slot::slotted(*) {
   }
 
   &.disabled {
-    --_container-color: var(--color-on-surface);
-    --_container-opacity: 0.1;
-    --_label-text-color: var(--color-on-surface);
-    --_label-text-opacity: 0.38;
-    --_outline-opacity: 0.12;
+    --_button_container-color: var(--color-on-surface);
+    --_button_container-opacity: 0.1;
+    --_button_label-text-color: var(--color-on-surface);
+    --_button_label-text-opacity: 0.38;
+    --_button_outline-opacity: 0.12;
 
 
     .ripple {

package/src/button/button/button.ts

@@ -1,12 +1,13 @@
 import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
-import IndividualComponent from 'src/IndividualComponent.js';
+import IndividualComponent from '@/IndividualComponent.js';
 import styles from './button.scss';
 import colorStyles from './button-colors.scss';
 import sizeStyles from './button-sizes.scss';
-import { observerSlotChangesWithCallback, throttle } from '../../utils.js';
-import { spread } from '../../spread.js';
+import { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';
+import { throttle } from '@/__utils/throttle.js';
+import { spread } from '@/__directive/spread.js';
 import { BaseButton } from '../BaseButton.js';
 
 /**
@@ -67,6 +68,26 @@ export class Button extends BaseButton {
   @state()
   private slotHasContent = false;
 
+  override focus() {
+    this.buttonElement?.focus();
+  }
+
+  override blur() {
+    this.buttonElement?.blur();
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.__dispatchClickWithThrottle);
+    window.addEventListener('mouseup', this.__handlePress);
+  }
+
+  override disconnectedCallback() {
+    window.removeEventListener('mouseup', this.__handlePress);
+    this.removeEventListener('click', this.__dispatchClickWithThrottle);
+    super.disconnectedCallback();
+  }
+
   override firstUpdated() {
     this.__dispatchClickWithThrottle = throttle(
       this.__dispatchClick,
@@ -105,10 +126,11 @@ export class Button extends BaseButton {
           id="button"
           tabindex=${this.#tabindex}
           type=${this.htmlType}
+          @click=${this.__dispatchClickWithThrottle}
           @mousedown=${this.__handlePress}
           @keydown=${this.__handlePress}
           @keyup=${this.__handlePress}
-          ?aria-describedby=${this.__getDisabledReasonID()}
+          aria-describedby=${this.__disabledReasonID}
           aria-disabled=${`${this.disabled || this.softDisabled}`}
           ?disabled=${this.disabled}
           ${spread(this.configAria)}
@@ -123,11 +145,12 @@ export class Button extends BaseButton {
         tabindex=${this.#tabindex}
         href=${this.href}
         target=${this.target}
+          @click=${this.__dispatchClickWithThrottle}
         @mousedown=${this.__handlePress}
         @keydown=${this.__handlePress}
         @keyup=${this.__handlePress}
         role="button"
-        ?aria-describedby=${this.__getDisabledReasonID()}
+        aria-describedby=${this.__disabledReasonID}
         aria-disabled=${`${this.disabled}`}
         ${spread(this.configAria)}
       >
@@ -138,7 +161,7 @@ export class Button extends BaseButton {
 
   renderButtonContent() {
     return html`
-      <wc-focus-ring class="focus-ring" .control=${this} element="buttonElement"></wc-focus-ring>
+      <wc-focus-ring class="focus-ring" .control=${this} .forElement=${this.buttonElement}></wc-focus-ring>
       <wc-elevation class="elevation"></wc-elevation>
       <div class="neo-background"></div>
       <div class="background"></div>

package/src/button/button-group/button-group.scss

@@ -7,31 +7,10 @@ $border-width: 0.0625rem;
 .button-group {
   display: flex;
   gap: var(--_button-group-gap);
-
-
-  slot::slotted(:first-child) {
-    --button-container-shape-start-start: 50%;
-    --button-container-shape-end-start: 50%;
-    --button-container-shape-start-end: var(--shape-corner-medium);
-    --button-container-shape-end-end: var(--shape-corner-medium);
-    --button-container-shape-variant: unset;
-  }
-
-  slot::slotted(:last-child) {
-    --button-container-shape-end-end: 50%;
-    --button-container-shape-start-end: 50%;
-
-    --button-container-shape-end-start: var(--shape-corner-medium);
-    --button-container-shape-start-start: var(--shape-corner-medium);
-    --button-container-shape-variant: unset;
-  }
-
-  slot::slotted(:only-child) {
-    --button-container-shape: 50%;
-  }
 }
 
 
+// Size-specific rules (can be overridden by variant rules below)
 .button-group.size-xs,
 .button-group.size-extra-small {
   --_button-group-gap: 0.125rem;
@@ -41,6 +20,7 @@ $border-width: 0.0625rem;
 .button-group.size-sm,
 .button-group.size-small {
   --_button-group-gap: 0.125rem;
+  --button-container-padding: 1.5rem;
 }
 
 .button-group.size-md,
@@ -58,4 +38,27 @@ $border-width: 0.0625rem;
 }
 
 
+// Standard variant: buttons with a visible gap, each keeping their own shape
+.button-group.variant-standard {
+  --_button-group-gap: 0.5rem;
+}
+
+
+// Connected variant: buttons with a 2px gap; outer buttons have fully rounded outer
+// corners while middle buttons keep standard rounded corners (handled via JS for
+// per-position corner overrides, including vertical orientation).
+.button-group.variant-connected {
+  --_button-group-gap: 0.125rem;
+}
+
+
+// Orientation
+.button-group.orientation-horizontal {
+  flex-direction: row;
+}
+
+.button-group.orientation-vertical {
+  flex-direction: column;
+}
+