@ardium-pl/ui 5.0.0-alpha.106

package/themes/default/_clear-button.scss

@@ -0,0 +1,78 @@
+@use './mixins' as defaultMixins;
+@use '../variables' as ARD;
+
+@mixin clearButton() {
+  ard-clear-button {
+    height: ARD.$clear-button-size;
+    width: ARD.$clear-button-size;
+    position: relative;
+  }
+
+  .ard-clear-btn-wrapper {
+    cursor: pointer;
+    font-size: medium;
+    color: ARD.$detail;
+    width: ARD.$clear-button-size;
+    height: ARD.$clear-button-size;
+    line-height: 1em;
+    border-radius: 999px;
+    border: none;
+    padding: 0;
+    background: transparent;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    outline: none;
+    color: inherit;
+
+    .ard-hitbox {
+      position: absolute;
+      left: -1px;
+      right: -1px;
+      top: -1px;
+      bottom: -1px;
+    }
+
+    .ard-focus-overlay {
+      @include defaultMixins.focus-overlay(1px);
+      background: currentColor;
+    }
+
+    .ard-clear-btn {
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+
+      &::before {
+        content: 'close';
+        @include defaultMixins.icon;
+        font-size: 70%;
+      }
+    }
+
+    &:hover {
+      .ard-focus-overlay {
+        opacity: 5%;
+      }
+    }
+
+    &:focus {
+      .ard-focus-overlay {
+        opacity: 8%;
+      }
+    }
+
+    &:active {
+      .ard-focus-overlay {
+        opacity: 15%;
+      }
+    }
+  }
+  .ard-disabled, .ard-readonly {
+    .ard-clear-btn-wrapper {
+      pointer-events: none;
+    }
+  }
+}

package/themes/default/_coloring.scss

@@ -0,0 +1,144 @@
+@use '../variables' as ARD;
+
+@mixin typeColors($prefix: 'cmpcl') {
+  &.ard-color-none {
+    --ard-#{$prefix}--bg: #{ARD.$bg};
+    --ard-#{$prefix}--bg-colored: #{ARD.$bg-alt};
+    --ard-#{$prefix}--bg-colored-light: #{ARD.$detail-light};
+    --ard-#{$prefix}--bg-header: #{ARD.$bg-f};
+    --ard-#{$prefix}--bg-colored-verylight: #{ARD.$bg-d};
+    --ard-#{$prefix}--on-bg: #{ARD.$text};
+    --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored-light: #{ARD.$text};
+    --ard-#{$prefix}--border: #{ARD.$text};
+    --ard-#{$prefix}--border-light: #{ARD.$text2};
+    --ard-#{$prefix}--content: #{ARD.$text};
+    --ard-#{$prefix}--content-light: #{ARD.$text-alt};
+    --ard-#{$prefix}--overlay-rgb: #{ARD.$overlay-rgb};
+    --ard-#{$prefix}--overlay: #{ARD.$overlay};
+    --ard-#{$prefix}--overlay-colored: #{ARD.$overlay};
+    --ard-#{$prefix}--overlay-colored-light: #{ARD.$text-alt};
+  }
+  &.ard-color-primary {
+    --ard-#{$prefix}--bg: #{ARD.$main500};
+    --ard-#{$prefix}--bg-colored: #{ARD.$main500};
+    --ard-#{$prefix}--bg-colored-light: #{ARD.$main100};
+    --ard-#{$prefix}--bg-header: #{ARD.$main100};
+    --ard-#{$prefix}--bg-colored-verylight: #{ARD.$main50};
+    --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored-light: #{ARD.$text};
+    --ard-#{$prefix}--border: #{ARD.$main300};
+    --ard-#{$prefix}--border-light: #{ARD.$main100};
+    --ard-#{$prefix}--content: #{ARD.$main700};
+    --ard-#{$prefix}--content-light: #{ARD.$main300};
+    --ard-#{$prefix}--overlay-rgb: #{ARD.$main500-rgb};
+    --ard-#{$prefix}--overlay: #{ARD.$overlay};
+    --ard-#{$prefix}--overlay-colored: #{ARD.$main700};
+    --ard-#{$prefix}--overlay-colored-light: #{ARD.$main100};
+  }
+  &.ard-color-secondary {
+    --ard-#{$prefix}--bg: #{ARD.$scnd500};
+    --ard-#{$prefix}--bg-colored: #{ARD.$scnd500};
+    --ard-#{$prefix}--bg-colored-light: #{ARD.$scnd50};
+    --ard-#{$prefix}--bg-header: #{ARD.$scnd50};
+    --ard-#{$prefix}--bg-colored-verylight: #{ARD.$scnd50};
+    --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored-light: #{ARD.$text};
+    --ard-#{$prefix}--border: #{ARD.$scnd300};
+    --ard-#{$prefix}--border-light: #{ARD.$scnd100};
+    --ard-#{$prefix}--content: #{ARD.$scnd700};
+    --ard-#{$prefix}--content-light: #{ARD.$scnd300};
+    --ard-#{$prefix}--overlay-rgb: #{ARD.$scnd500-rgb};
+    --ard-#{$prefix}--overlay: #{ARD.$overlay};
+    --ard-#{$prefix}--overlay-colored: #{ARD.$scnd700};
+    --ard-#{$prefix}--overlay-colored-light: #{ARD.$scnd100};
+  }
+  &.ard-color-warn {
+    --ard-#{$prefix}--bg: #{ARD.$warn500};
+    --ard-#{$prefix}--bg-colored: #{ARD.$warn500};
+    --ard-#{$prefix}--bg-colored-light: #{ARD.$warn50};
+    --ard-#{$prefix}--bg-header: #{ARD.$warn50};
+    --ard-#{$prefix}--bg-colored-verylight: #{ARD.$warn50};
+    --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored-light: #{ARD.$text};
+    --ard-#{$prefix}--border: #{ARD.$warn300};
+    --ard-#{$prefix}--border-light: #{ARD.$warn100};
+    --ard-#{$prefix}--content: #{ARD.$warn700};
+    --ard-#{$prefix}--content-light: #{ARD.$warn100};
+    --ard-#{$prefix}--overlay-rgb: #{ARD.$warn500-rgb};
+    --ard-#{$prefix}--overlay: #{ARD.$overlay};
+    --ard-#{$prefix}--overlay-colored: #{ARD.$warn700};
+    --ard-#{$prefix}--overlay-colored-light: #{ARD.$warn100};
+  }
+  &.ard-color-danger {
+    --ard-#{$prefix}--bg: #{ARD.$danger700};
+    --ard-#{$prefix}--bg-colored: #{ARD.$danger700};
+    --ard-#{$prefix}--bg-colored-light: #{ARD.$danger100};
+    --ard-#{$prefix}--bg-header: #{ARD.$danger100};
+    --ard-#{$prefix}--bg-colored-verylight: #{ARD.$danger50};
+    --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored-light: #{ARD.$text};
+    --ard-#{$prefix}--border: #{ARD.$danger300};
+    --ard-#{$prefix}--border-light: #{ARD.$danger100};
+    --ard-#{$prefix}--content: #{ARD.$danger900};
+    --ard-#{$prefix}--content-light: #{ARD.$danger500};
+    --ard-#{$prefix}--overlay-rgb: #{ARD.$danger700-rgb};
+    --ard-#{$prefix}--overlay: #{ARD.$overlay};
+    --ard-#{$prefix}--overlay-colored: #{ARD.$danger700};
+    --ard-#{$prefix}--overlay-colored-light: #{ARD.$danger300};
+  }
+  &.ard-color-success {
+    --ard-#{$prefix}--bg: #{ARD.$success700};
+    --ard-#{$prefix}--bg-colored: #{ARD.$success700};
+    --ard-#{$prefix}--bg-colored-light: #{ARD.$success50};
+    --ard-#{$prefix}--bg-header: #{ARD.$success50};
+    --ard-#{$prefix}--bg-colored-verylight: #{ARD.$success50};
+    --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored-light: #{ARD.$text};
+    --ard-#{$prefix}--border: #{ARD.$success300};
+    --ard-#{$prefix}--border-light: #{ARD.$success100};
+    --ard-#{$prefix}--content: #{ARD.$success900};
+    --ard-#{$prefix}--content-light: #{ARD.$success300};
+    --ard-#{$prefix}--overlay-rgb: #{ARD.$success700-rgb};
+    --ard-#{$prefix}--overlay: #{ARD.$overlay};
+    --ard-#{$prefix}--overlay-colored: #{ARD.$success700};
+    --ard-#{$prefix}--overlay-colored-light: #{ARD.$success300};
+  }
+  &.ard-color-info {
+    --ard-#{$prefix}--bg: #{ARD.$info500};
+    --ard-#{$prefix}--bg-colored: #{ARD.$info500};
+    --ard-#{$prefix}--bg-colored-light: #{ARD.$info50};
+    --ard-#{$prefix}--bg-header: #{ARD.$info50};
+    --ard-#{$prefix}--bg-colored-verylight: #{ARD.$info50};
+    --ard-#{$prefix}--on-bg: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--on-bg-colored-light: #{ARD.$text};
+    --ard-#{$prefix}--border: #{ARD.$info300};
+    --ard-#{$prefix}--border-light: #{ARD.$info100};
+    --ard-#{$prefix}--content: #{ARD.$info700};
+    --ard-#{$prefix}--content-light: #{ARD.$info300};
+    --ard-#{$prefix}--overlay-rgb: #{ARD.$info500-rgb};
+    --ard-#{$prefix}--overlay: #{ARD.$overlay};
+    --ard-#{$prefix}--overlay-colored: #{ARD.$info700};
+    --ard-#{$prefix}--overlay-colored-light: #{ARD.$info100};
+  }
+  &.ard-color-currentColor {
+    --ard-#{$prefix}--bg: #{ARD.$bg};
+    --ard-#{$prefix}--bg-colored: currentColor;
+    --ard-#{$prefix}--on-bg: currentColor;
+    --ard-#{$prefix}--on-bg-colored: #{ARD.$text-alt};
+    --ard-#{$prefix}--border: currentColor;
+    --ard-#{$prefix}--border-light: currentColor;
+    --ard-#{$prefix}--content: currentColor;
+    --ard-#{$prefix}--content-light: currentColor;
+    --ard-#{$prefix}--overlay-rgb: #{ARD.$overlay-rgb};
+    --ard-#{$prefix}--overlay: #{ARD.$overlay};
+    --ard-#{$prefix}--overlay-colored: currentColor;
+    --ard-#{$prefix}--overlay-colored-light: currentColor;
+  }
+}

package/themes/default/_dropdown-arrow.scss

@@ -0,0 +1,12 @@
+@use '../variables' as ARD;
+
+@mixin dropdown-arrow($size: ARD.$dropdown-button-size) {
+  width: $size;
+  height: $size;
+  border: calc($size / 2) solid transparent;
+  position: relative;
+  border-bottom-color: ARD.$detail;
+  border-right-color: ARD.$detail;
+  transform: rotate(45deg) translate(-17.67771%, -17.67771%);
+  box-sizing: border-box;
+}

package/themes/default/_mixins.scss

@@ -0,0 +1,91 @@
+@use '../variables' as ARD;
+
+@mixin icon($fill: 0, $wght: 500, $grad: 0, $opsz: 48) {
+  font-family: 'Material Symbols Outlined';
+  font-size: 1.5em;
+  font-variation-settings:
+    'FILL' #{$fill},
+    'wght' #{$wght},
+    'GRAD' #{$grad},
+    'opsz' #{$opsz};
+}
+
+@mixin focus-overlay($size: 0px) {
+  position: absolute;
+  top: calc(-1 * #{$size});
+  bottom: calc(-1 * #{$size});
+  left: calc(-1 * #{$size});
+  right: calc(-1 * #{$size});
+  opacity: 0;
+  border-radius: inherit;
+  pointer-events: none;
+
+  transition: opacity 0.2s ease;
+}
+@mixin focus-overlay-scale-addon() {
+  --_ard-focus-overlay-scale: 0.2;
+  > .ard-focus-overlay {
+    transform: scale(var(--_ard-focus-overlay-scale));
+
+    transition:
+      opacity 0.2s ease,
+      transform 0.1s ease;
+  }
+
+  &:hover,
+  &:focus,
+  &:focus-visible {
+    > .ard-focus-overlay {
+      --_ard-focus-overlay-scale: 1;
+    }
+  }
+}
+
+@mixin formAppearances() {
+  &.ard-appearance-outlined {
+    --ard-appearance-background: #{ARD.$bg};
+    --ard-appearance-border-color: #{ARD.$border};
+    --ard-appearance-border: 1px solid var(--ard-appearance-border-color);
+
+    &.ard-focused {
+      --ard-appearance-border-color: #{ARD.$border-dark};
+    }
+    &.ard-is-success {
+      --ard-appearance-border-color: #{ARD.$success500};
+    }
+    &.ard-has-error {
+      --ard-appearance-background: #{ARD.$danger50};
+      --ard-appearance-border-color: #{ARD.$danger500};
+    }
+  }
+  &.ard-appearance-filled {
+    --ard-appearance-background: #{ARD.$bg-f};
+    --ard-appearance-border: none;
+
+    &.ard-is-success {
+      --ard-appearance-background: #{ARD.$success50};
+    }
+    &.ard-has-error {
+      --ard-appearance-background: #{ARD.$danger50};
+    }
+  }
+  &.ard-appearance-transparent {
+    --ard-appearance-background: transparent;
+    --ard-appearance-border: none;
+  }
+}
+
+@mixin formVariants() {
+  border-radius: var(--ard-variant-border-radius);
+
+  &.ard-variant-rounded,
+  &.ard-variant-semirounded {
+    --ard-variant-border-radius: 8px;
+  }
+  &.ard-variant-pill {
+    --ard-variant-border-radius: 9999px;
+  }
+  &.ard-variant-sharp {
+    --ard-variant-border-radius: 0;
+  }
+}

package/themes/default/badge.scss

@@ -0,0 +1,129 @@
+@use './coloring' as CM;
+
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-badge-small-font-size: 0.55rem;
+    // --ard-badge-small-size: ;
+    --ard-badge-small-font-weight: 400;
+    --ard-badge-small-letter-spacing: 0.2px;
+    // --ard-badge-small-rounded-radius: ;
+
+    --ard-badge-medium-font-size: 0.667rem;
+    // --ard-badge-medium-size: ;
+    --ard-badge-medium-font-weight: 500;
+    --ard-badge-medium-letter-spacing: 0.2px;
+    // --ard-badge-medium-rounded-radius: ;
+
+    --ard-badge-large-font-size: 0.8125rem;
+    // --ard-badge-large-size: ;
+    --ard-badge-large-font-weight: 600;
+    --ard-badge-large-letter-spacing: 0.2px;
+    // --ard-badge-large-rounded-radius: ;
+
+    --ard-badge-overlap-offset: 0.3em;
+  }
+
+  .ard-badge-host {
+    position: relative;
+  }
+  .ard-badge {
+    @include CM.typeColors();
+    position: absolute;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+
+    //! colors
+    background: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
+
+    //! variants
+    &.ard-variant-pill {
+      border-radius: 9999px;
+    }
+    &.ard-variant-rounded {
+      border-radius: var(--ard-_badge-radius);
+    }
+    &.ard-variant-sharp {
+      border-radius: 0;
+    }
+
+    //! hidden
+    &.ard-badge-hidden {
+      display: none;
+    }
+
+    //! sizes
+    font-size: var(--ard-_badge-font-size);
+    min-width: var(--ard-_badge-size);
+    height: var(--ard-_badge-size);
+
+    .ard-badge-content {
+      padding: 0 var(--ard-_badge-padding);
+    }
+
+    &.ard-badge-size-small {
+      --ard-_badge-font-size: var(--ard-badge-small-font-size, 0.55rem);
+      --ard-_badge-size: var(--ard-badge-small-size, calc(var(--ard-badge-small-font-size) * 1.375));
+      --ard-_badge-padding: calc(var(--ard-badge-small-font-size) * 0.5);
+      --ard-_badge-radius: var(--ard-badge-small-rounded-radius, calc(var(--ard-badge-small-font-size) * 0.25));
+      font-weight: var(--ard-badge-small-font-weight, 400);
+      letter-spacing: var(--ard-badge-small-letter-spacing, 0.2px);
+    }
+    &.ard-badge-size-medium {
+      --ard-_badge-font-size: var(--ard-badge-medium-font-size, 0.667rem);
+      --ard-_badge-size: var(--ard-badge-medium-size, calc(var(--ard-badge-medium-font-size) * 1.375));
+      --ard-_badge-padding: calc(var(--ard-badge-medium-font-size) * 0.5);
+      --ard-_badge-radius: var(--ard-badge-medium-rounded-radius, calc(var(--ard-badge-medium-font-size) * 0.25));
+      font-weight: var(--ard-badge-medium-font-weight, 500);
+      letter-spacing: var(--ard-badge-medium-letter-spacing, 0.2px);
+    }
+    &.ard-badge-size-large {
+      --ard-_badge-font-size: var(--ard-badge-large-font-size, 0.8125rem);
+      --ard-_badge-size: var(--ard-badge-large-size, calc(var(--ard-badge-large-font-size) * 1.375));
+      --ard-_badge-padding: calc(var(--ard-badge-large-font-size) * 0.5);
+      --ard-_badge-radius: var(--ard-badge-large-rounded-radius, calc(var(--ard-badge-large-font-size) * 0.25));
+      font-weight: var(--ard-badge-large-font-weight, 600);
+      letter-spacing: var(--ard-badge-large-letter-spacing, 0.2px);
+    }
+
+    //! overlap
+    --ard-_badge-overlap-offset-x: var(--ard-badge-overlap-offset, 0.3em);
+
+    &.ard-badge-overlap {
+      --ard-_badge-overlap-offset-x: 50%;
+    }
+    &.ard-badge-position-above-before {
+      transform: translate(var(--ard-_badge-overlap-offset-x), 50%);
+    }
+    &.ard-badge-position-above-after {
+      transform: translate(calc(-1 * var(--ard-_badge-overlap-offset-x)), 50%);
+    }
+    &.ard-badge-position-below-after {
+      transform: translate(calc(-1 * var(--ard-_badge-overlap-offset-x)), -50%);
+    }
+    &.ard-badge-position-below-before {
+      transform: translate(var(--ard-_badge-overlap-offset-x), -50%);
+    }
+
+    //! positions
+    &.ard-badge-position-above-before,
+    &.ard-badge-position-below-before {
+      right: 100%;
+    }
+    &.ard-badge-position-above-after,
+    &.ard-badge-position-below-after {
+      left: 100%;
+    }
+    &.ard-badge-position-below-before,
+    &.ard-badge-position-below-after {
+      top: 100%;
+    }
+    &.ard-badge-position-above-before,
+    &.ard-badge-position-above-after {
+      bottom: 100%;
+    }
+  }
+}

package/themes/default/buttons/_button-mixins.scss

@@ -0,0 +1,152 @@
+@use '../mixins' as defaultMixins;
+@use '../coloring' as coloringMixins;
+@use '../../variables' as ARD;
+
+@mixin button(
+  $margin,
+  $padding,
+  $font-size,
+  $font-weight,
+  $hover-opacity,
+  $focus-opacity,
+  $active-opacity,
+  $focus-visible-opacity,
+  $border-style,
+  $border-width,
+) {
+  @include coloringMixins.typeColors();
+  font-family: var(--ard-font-family);
+  margin: $margin;
+  padding: $padding;
+  border: 1px solid transparent;
+  font-weight: $font-weight;
+  font-size: $font-size;
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  box-sizing: border-box;
+
+  //! button focus inficator
+  &::before {
+    content: '';
+    @include defaultMixins.focus-overlay;
+    background-color: var(--ard-cmpcl--overlay);
+  }
+  &:hover {
+    &::before {
+      opacity: $hover-opacity;
+    }
+  }
+  &:focus {
+    &::before {
+      opacity: $focus-opacity;
+    }
+  }
+  &.ard-active,
+  &:active {
+    &::before {
+      opacity: $active-opacity;
+    }
+  }
+  &:focus-visible {
+    &::before {
+      opacity: $focus-visible-opacity;
+    }
+  }
+  //! button appearances
+  &.ard-appearance-transparent,
+  &.ard-appearance-raised {
+    background: transparent;
+    color: var(--ard-cmpcl--content);
+    border: none;
+
+    &::before {
+      background: var(--ard-cmpcl--overlay-colored);
+    }
+  }
+  &.ard-appearance-raised,
+  &.ard-appearance-raised-strong {
+    background: ARD.$bg;
+    transition: box-shadow 0.28s ARD.$timing-fn;
+    box-shadow: ARD.$simple-shadow;
+
+    &:hover,
+    &:focus-visible {
+      box-shadow: ARD.$simple-shadow2;
+    }
+    &:active {
+      box-shadow: ARD.$simple-shadow3;
+    }
+  }
+  &.ard-appearance-outlined {
+    background: ARD.$bg;
+    color: var(--ard-cmpcl--content);
+    border: $border-width $border-style ARD.$border-light;
+
+    &::before {
+      background: var(--ard-cmpcl--overlay-colored);
+    }
+  }
+  &.ard-appearance-outlined-strong {
+    background: ARD.$bg;
+    color: var(--ard-cmpcl--content);
+    border: $border-width $border-style ARD.$border-light;
+
+    &::before {
+      display: none;
+    }
+
+    transition: background-color 0.2s ease, color 0.2s ease;
+    &:hover,
+    &:focus-visible {
+      background: var(--ard-cmpcl--bg-colored);
+      color: var(--ard-cmpcl--on-bg-colored);
+    }
+  }
+  &.ard-appearance-flat,
+  &.ard-appearance-raised-strong {
+    background: var(--ard-cmpcl--bg-colored);
+    color: var(--ard-cmpcl--on-bg-colored);
+    border: 1px solid var(--ard-cmpcl--bg-colored);
+
+    &::before {
+      background: var(--ard-cmpcl--on-bg);
+    }
+    &:focus-visible {
+      outline: solid black;
+    }
+  }
+  //! light coloring
+  &.ard-appearance-transparent.ard-light-coloring {
+    color: var(--ard-cmpcl--content-light);
+
+    &::before {
+      background: var(--ard-cmpcl--overlay-colored-light);
+    }
+  }
+}
+
+//! disabled state
+@mixin button-disabled($opacity, $overlay-opacity) {
+  pointer-events: none;
+  opacity: $opacity;
+  cursor: not-allowed;
+
+  &::before {
+    opacity: $overlay-opacity;
+    transform: scale(1);
+  }
+
+  //edge case for no coloring
+  &.ard-color-none {
+    .ard-button-icon,
+    .ard-button-content {
+      opacity: $opacity;
+    }
+    &::before {
+      background: var(--ard-cmpcl--overlay);
+    }
+  }
+}

package/themes/default/buttons/button-group.scss

@@ -0,0 +1,19 @@
+@layer ard-ui {
+  :root {
+    --ard-button-group-gap: 0.5rem;
+  }
+
+  ard-button-group {
+    display: flex;
+    align-items: center;
+
+    &:has(> ard-button-group) {
+      gap: var(--ard-button-group-gap, 0.5rem);
+      flex-wrap: wrap;
+      width: 100%;
+    }
+    > .ard-divider.ard-divider {
+      margin: 0;
+    }
+  }
+}