Group

Source

• Group.css

Example

<div class="x-group">
    <button class="x-button">Button</button>
    <button class="x-button">Button</button>
    <button class="x-button">Button</button>
</div>

More examples can be found in the Winduum docs.

Example CSS

@import "winduum/src/components/group/default.css" layer(utilities);
@import "winduum/src/components/group/vertical.css" layer(utilities);

/* Example customization */
@layer utilities {
  .x-group {
    --x-button-border-width: 1px;
    --x-button-focus-outline-offset: 0;
  }
}

Winduum CSS Code

winduum/src/components/group/default.css

.x-group {
  display: flex;
  border-radius: var(--radius-xl);

  &:has(.x-control) {
    > :where(.x-button) {
      min-inline-size: var(--x-control-block-size);
      height: auto;
    }

    > :is(.x-button) {
      --x-button-border-width: var(--x-control-border-width);
    }
  }

  > :where(*) {
    border-radius: inherit;

    &:is(.x-control) {
      --x-control-border-color-mix: var(--color-body-primary);
    }

    &:is(.x-button) {
      --x-button-focus-outline-offset: 0;
    }

    &:focus-within {
      z-index: 1;
    }

    &:where(:not(:first-child)) {
      margin-inline-start: calc(var(--x-control-border-width) * -1);
      border-start-start-radius: 0;
      border-end-start-radius: 0;
    }

    &:where(:not(:last-child)) {
      border-start-end-radius: 0;
      border-end-end-radius: 0;
    }
  }
}

winduum/src/components/group/vertical.css

.x-group:where(.vertical) {
  flex-direction: column;

  > :where(*) {
    border-radius: inherit;

    &:where(:not(:first-child)) {
      margin-block-start: calc(var(--x-control-border-width) * -1);
      border-start-start-radius: 0;
      border-start-end-radius: 0;
      margin-inline-start: 0;
    }

    &:where(:not(:last-child)) {
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }
  }
}