@ardium-ui/ui 5.0.0-alpha.75 → 5.0.0-alpha.77

package/prebuilt-themes/default/table.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/table.scss","../../../../projects/ui/src/themes/default/_coloring.scss"],"names":[],"mappings":"AAKA;EAKE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;EA8JA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AC3MA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADnGF;EACE;;AAGF;AAAA;EAEE;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAKR;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAGJ;EACE;;AAKA;EACE;;AAEF;EACE;;AAMF;AAAA;EAEE;;AAEF;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AASJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAOR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAMF;EACE;;AAiBF;EACE;EACA;;AAEF;EACE;EACA;;AAIF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAIF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAKF;AAAA;AAAA;EAGE;;AAEF;EACE;EACA;;AACA;EACE;;AAGJ;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AAEA;EACE;EACA;;AAIN;EACE;EACA;;AAGE;EACE;;AAIF;EACE;;AAUJ;AAAA;EACE;EACA;;AAGJ;EACE;;AAEA;EACE;;AAGJ;EACE;;AAGA;EACE;EACA;;AAGJ;EACE;;AAMF;EACE;;AAMF;EACE;;AAGJ;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;;AAIF;EACE;;AAKA;EACE;EACA;EACA;;AAQF;EACE;;AAMF;EACE;;AAMF;EACE;;AAMF;EACE;;AAMF;EACE;;AAMF;EACE;;AAOF;AAAA;AAAA;AAAA;EAEE;;AAMF;AAAA;AAAA;AAAA;EAEE;;AAMF;AAAA;AAAA;AAAA;EAEE;;AAMF;EACE;;AAMF;EACE;;AAMF;EACE","file":"table.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/table.scss","../../../../projects/ui/src/themes/default/_coloring.scss"],"names":[],"mappings":"AAGA;EAGE;IAKE;IACA;IACA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;IACA;IAIA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAGF;IAEE;IACA;IA8JA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EC5MF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEF;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EDlGA;IACE;;EAGF;AAAA;IAEE;;EAEA;AAAA;IACE;IACA;IACA;IACA;IACA;;EAEA;AAAA;IACE;IACA;IACA;;EAEA;AAAA;IACE;IACA;IACA;;EAKR;IACE;IACA;IACA;;EAEF;IACE;IACA;;EAEA;IACE;IACA;IACA;;EAIF;IACE;IACA;IACA;IACA;IACA;;EAGJ;IACE;;EAKA;IACE;;EAEF;IACE;;EAMF;AAAA;IAEE;;EAEF;IACE;;EAEF;IACE;;EAGJ;IACE;IACA;IACA;IACA;;EAEA;IACE;;EAEA;IACE;IACA;IACA;;EAEA;IACE;;EASJ;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;;EAEF;IACE;IACA;;EAEF;IACE;IACA;;EAOR;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;;EAEA;IACE;IACA;IACA;;EAMF;IACE;;EAiBF;IACE;IACA;;EAEF;IACE;IACA;;EAIF;IACE;;EAEF;IACE;IACA;;EAEF;IACE;;EAIF;IACE;;EAEF;IACE;IACA;;EAEF;IACE;;EAKF;AAAA;AAAA;IAGE;;EAEF;IACE;IACA;;EACA;IACE;;EAGJ;IACE;;EAEF;IACE;;EAEF;IACE;;EAEF;IACE;IACA;;EACA;IACE;IACA;;EAEA;IACE;IACA;;EAIN;IACE;IACA;;EAGE;IACE;;EAIF;IACE;;EAUJ;AAAA;IACE;IACA;;EAGJ;IACE;;EAEA;IACE;;EAGJ;IACE;;EAGA;IACE;IACA;;EAGJ;IACE;;EAMF;IACE;;EAMF;IACE;;EAGJ;IACE;;EAEF;IACE;;EAIF;IACE;IACA;IACA;;EAIF;IACE;;EAKA;IACE;IACA;IACA;;EAQF;IACE;;EAMF;IACE;;EAMF;IACE;;EAMF;IACE;;EAMF;IACE;;EAMF;IACE;;EAOF;AAAA;AAAA;AAAA;IAEE;;EAMF;AAAA;AAAA;AAAA;IAEE;;EAMF;AAAA;AAAA;AAAA;IAEE;;EAMF;IACE;;EAMF;IACE;;EAMF;IACE","file":"table.css"}

package/themes/default/badge.scss

@@ -1,127 +1,129 @@
 @use './coloring' as CM;
 
-// 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: ;
+@layer ard-theme {
+  // 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-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-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-overlap-offset: 0.3em;
+  }
 
-.ard-badge-host {
-  position: relative;
-}
-.ard-badge {
-  @include CM.typeColors();
-  position: absolute;
-  display: flex;
-  align-items: center;
-  pointer-events: none;
+  .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);
+    //! 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;
-  }
+    //! 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;
-  }
+    //! 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);
+    //! 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-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);
-  }
+    &.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);
+    //! 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%);
-  }
+    &.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%;
+    //! 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.scss

@@ -1,104 +1,106 @@
 @use './button-mixins' as shared;
 
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  --ard-button-height: 2.5em;
-  --ard-button-height-compact: 2.25em;
-  --ard-button-margin: 0.125rem;
-  --ard-button-padding: 0 1.2em;
-  --ard-button-padding-compact: 0 0.9em;
-  --ard-button-padding-vertical: 0.3em 1em;
-  --ard-button-padding-vertical-compact: 0.2em 0.8em;
-  --ard-button-gap: 0.375rem;
-  --ard-button-font-size: 0.875rem;
-  --ard-button-font-size-compact: 0.75rem;
-  --ard-button-font-weight: 500;
-  --ard-button-overlay-hover-opacity: 0.04;
-  --ard-button-overlay-focus-opacity: 0.12;
-  --ard-button-overlay-active-opacity: 0.18;
-  --ard-button-overlay-focus-visible-opacity: 0.24;
-  --ard-button-overlay-disabled-opacity: 0.2;
-  // --ard-button-rounded-corner-radius: ;
-  --ard-button-disabled-opacity: 0.6;
-}
-
-ard-button {
-  display: flex;
-  width: max-content;
-  height: max-content;
-  justify-content: stretch;
-}
-
-.ard-button {
-  @include shared.button(
-    var(--ard-button-margin, 0.125rem),
-    var(--ard-button-padding, 0 1.2em),
-    var(--ard-button-font-size, 0.875rem),
-    var(--ard-button-font-weight, 500),
-    var(--ard-button-overlay-hover-opacity, 0.04),
-    var(--ard-button-overlay-focus-opacity, 0.12),
-    var(--ard-button-overlay-active-opacity, 0.18),
-    var(--ard-button-overlay-focus-visible-opacity, 0.24)
-  );
-  background: transparent;
-  gap: var(--ard-button-gap, 0.375rem);
-  font-size: var(--ard-button-font-size, 0.875rem);
-  height: var(--ard-button-height, 2.5em);
-  padding: var(--ard-button-padding, 0 1.2em);
-  width: max-content;
-  min-width: max-content;
-  letter-spacing: 0.5px;
-  justify-content: center;
-  margin: 0;
-  user-select: none;
-  text-decoration: none;
-  flex-grow: 1;
-
-  //! aligns
-  &.ard-align-left {
-    flex-direction: row;
-  }
-  &.ard-align-right {
-    flex-direction: row-reverse;
+@layer ard-theme {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-button-height: 2.5em;
+    --ard-button-height-compact: 2.25em;
+    --ard-button-margin: 0.125rem;
+    --ard-button-padding: 0 1.2em;
+    --ard-button-padding-compact: 0 0.9em;
+    --ard-button-padding-vertical: 0.3em 1em;
+    --ard-button-padding-vertical-compact: 0.2em 0.8em;
+    --ard-button-gap: 0.375rem;
+    --ard-button-font-size: 0.875rem;
+    --ard-button-font-size-compact: 0.75rem;
+    --ard-button-font-weight: 500;
+    --ard-button-overlay-hover-opacity: 0.04;
+    --ard-button-overlay-focus-opacity: 0.12;
+    --ard-button-overlay-active-opacity: 0.18;
+    --ard-button-overlay-focus-visible-opacity: 0.24;
+    --ard-button-overlay-disabled-opacity: 0.2;
+    // --ard-button-rounded-corner-radius: ;
+    --ard-button-disabled-opacity: 0.6;
   }
 
-  //! button variants
-  &.ard-button-vertical {
+  ard-button {
+    display: flex;
+    width: max-content;
     height: max-content;
-    padding: var(--ard-button-padding-vertical, 0.3em 1em);
-    gap: 2px;
-    flex-direction: column;
-  }
-  &.ard-variant-rounded,
-  &.ard-variant-pill.ard-button-vertical {
-    border-radius: var(--ard-button-rounded-corner-radius, var(--ard-rounded-corner-radius, 0.375rem));
-  }
-  &.ard-variant-pill:not(.ard-button-vertical) {
-    border-radius: 9999px;
-  }
-  &.ard-variant-sharp {
-    border-radius: 0;
+    justify-content: stretch;
   }
 
-  //! compact
-  &.ard-compact {
-    font-size: var(--ard-button-font-size-compact, 0.75rem);
-    height: var(--ard-button-height-compact, 2.25em);
-    padding: var(--ard-button-padding-compact, 0 0.9em);
+  .ard-button {
+    @include shared.button(
+      var(--ard-button-margin, 0.125rem),
+      var(--ard-button-padding, 0 1.2em),
+      var(--ard-button-font-size, 0.875rem),
+      var(--ard-button-font-weight, 500),
+      var(--ard-button-overlay-hover-opacity, 0.04),
+      var(--ard-button-overlay-focus-opacity, 0.12),
+      var(--ard-button-overlay-active-opacity, 0.18),
+      var(--ard-button-overlay-focus-visible-opacity, 0.24)
+    );
+    background: transparent;
+    gap: var(--ard-button-gap, 0.375rem);
+    font-size: var(--ard-button-font-size, 0.875rem);
+    height: var(--ard-button-height, 2.5em);
+    padding: var(--ard-button-padding, 0 1.2em);
+    width: max-content;
+    min-width: max-content;
+    letter-spacing: 0.5px;
+    justify-content: center;
+    margin: 0;
+    user-select: none;
+    text-decoration: none;
+    flex-grow: 1;
 
+    //! aligns
+    &.ard-align-left {
+      flex-direction: row;
+    }
+    &.ard-align-right {
+      flex-direction: row-reverse;
+    }
+
+    //! button variants
     &.ard-button-vertical {
       height: max-content;
-      padding: var(--ard-button-padding-vertical-compact, 0.2em 0.8em);
-      gap: 0;
+      padding: var(--ard-button-padding-vertical, 0.3em 1em);
+      gap: 2px;
+      flex-direction: column;
     }
-  }
-  //! disabled
-  &.ard-disabled {
-    @include shared.button-disabled(var(--ard-button-disabled-opacity, 0.6), var(--ard-button-overlay-disabled-opacity, 0.2));
+    &.ard-variant-rounded,
+    &.ard-variant-pill.ard-button-vertical {
+      border-radius: var(--ard-button-rounded-corner-radius, var(--ard-rounded-corner-radius, 0.375rem));
+    }
+    &.ard-variant-pill:not(.ard-button-vertical) {
+      border-radius: 9999px;
+    }
+    &.ard-variant-sharp {
+      border-radius: 0;
+    }
+
+    //! compact
+    &.ard-compact {
+      font-size: var(--ard-button-font-size-compact, 0.75rem);
+      height: var(--ard-button-height-compact, 2.25em);
+      padding: var(--ard-button-padding-compact, 0 0.9em);
+
+      &.ard-button-vertical {
+        height: max-content;
+        padding: var(--ard-button-padding-vertical-compact, 0.2em 0.8em);
+        gap: 0;
+      }
+    }
+    //! disabled
+    &.ard-disabled {
+      @include shared.button-disabled(var(--ard-button-disabled-opacity, 0.6), var(--ard-button-overlay-disabled-opacity, 0.2));
 
-    &.ard-button-with-pointer-events-when-disabled {
-      pointer-events: all;
+      &.ard-button-with-pointer-events-when-disabled {
+        pointer-events: all;
+      }
     }
   }
 }

package/themes/default/buttons/fab.scss

@@ -1,90 +1,94 @@
 @use './button-mixins' as shared;
 @use '../mixins' as CM;
 
-:root {
-  --ard-fab-size-standard: 3.5rem;
-  --ard-fab-size-small: 2.5rem;
-  --ard-fab-margin: 0.5rem;
-  --ard-fab-size-standard-font-size: 1.75rem;
-  --ard-fab-size-small-font-size: 1.375rem;
-  --ard-fab-font-weight: 900;
-  --ard-fab-extended-gap: 0.75em;
-  --ard-fab-overlay-hover-opacity: 0.04;
-  --ard-fab-overlay-focus-opacity: 0.12;
-  --ard-fab-overlay-active-opacity: 0.18;
-  --ard-fab-overlay-focus-visible-opacity: 0.24;
-  --ard-fab-overlay-disabled-opacity: 0.2;
-  --ard-fab-disabled-opacity: 0.6;
-}
-
-ard-fab {
-  margin: var(--ard-fab-margin, 0.5rem);
-  display: block;
-  width: max-content;
-  height: max-content;
-}
-
-.ard-fab {
-  @include shared.button(
-    0,
-    0,
-    unset,
-    var(--ard-fab-font-weight, 900),
-    var(--ard-fab-overlay-hover-opacity, var(--ard-button-overlay-hover-opacity, 0.04)),
-    var(--ard-fab-overlay-focus-opacity, var(--ard-button-overlay-focus-opacity, 0.12)),
-    var(--ard-fab-overlay-active-opacity, var(--ard-button-overlay-active-opacity, 0.18)),
-    var(--ard-fab-overlay-focus-visible-opacity, var(--ard-button-overlay-focus-visible-opacity, 0.24))
-  );
-  height: var(--ard-_fab-size);
-  width: var(--ard-_fab-size);
-  max-height: var(--ard-_fab-size);
-  max-width: var(--ard-_fab-size);
-  min-height: var(--ard-_fab-size);
-  min-width: var(--ard-_fab-size);
-  user-select: none;
-  border-radius: 9999px;
-  justify-content: center;
-  margin: 0;
-  font-weight: 500;
-  overflow: hidden;
-  transition: max-width 0.5s ease;
-
-  &.ard-fab-size-standard {
-    --ard-_fab-size: var(--ard-fab-size-standard, 3.5rem);
-    font-size: var(--ard-fab-size-standard-font-size, 1.75rem);
-  }
-  &.ard-fab-size-small {
-    --ard-_fab-size: var(--ard-fab-size-small, 2.5rem);
-    font-size: var(--ard-fab-size-small-font-size, 1.375rem);
-  }
-  &.ard-fab-extended {
-    min-width: var(--ard-_fab-size);
-    width: max-content;
-    font-weight: unset;
-    gap: var(--ard-fab-extended-gap, 1em);
-    max-width: 10em;
+@layer ard-theme {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-fab-size-standard: 3.5rem;
+    --ard-fab-size-small: 2.5rem;
+    --ard-fab-margin: 0.5rem;
+    --ard-fab-size-standard-font-size: 1.75rem;
+    --ard-fab-size-small-font-size: 1.375rem;
+    --ard-fab-font-weight: 900;
+    --ard-fab-extended-gap: 0.75em;
+    --ard-fab-overlay-hover-opacity: 0.04;
+    --ard-fab-overlay-focus-opacity: 0.12;
+    --ard-fab-overlay-active-opacity: 0.18;
+    --ard-fab-overlay-focus-visible-opacity: 0.24;
+    --ard-fab-overlay-disabled-opacity: 0.2;
+    --ard-fab-disabled-opacity: 0.6;
   }
 
-  ard-icon {
-    font-size: 1em;
-  }
-  &.ard-appearance-transparent {
-    @include CM.focus-overlay-scale-addon();
+  ard-fab {
+    margin: var(--ard-fab-margin, 0.5rem);
+    display: block;
+    width: max-content;
+    height: max-content;
   }
-}
 
-ard-fab.ard-disabled {
-  > .ard-fab {
-    @include shared.button-disabled(
-      var(--ard-fab-overlay-disabled-opacity, var(--ard-button-overlay-disabled-opacity, 0.2)),
-      var(--ard-fab-disabled-opacity, var(--ard-button-disabled-opacity, 0.6))
+  .ard-fab {
+    @include shared.button(
+      0,
+      0,
+      unset,
+      var(--ard-fab-font-weight, 900),
+      var(--ard-fab-overlay-hover-opacity, var(--ard-button-overlay-hover-opacity, 0.04)),
+      var(--ard-fab-overlay-focus-opacity, var(--ard-button-overlay-focus-opacity, 0.12)),
+      var(--ard-fab-overlay-active-opacity, var(--ard-button-overlay-active-opacity, 0.18)),
+      var(--ard-fab-overlay-focus-visible-opacity, var(--ard-button-overlay-focus-visible-opacity, 0.24))
     );
+    height: var(--ard-_fab-size);
+    width: var(--ard-_fab-size);
+    max-height: var(--ard-_fab-size);
+    max-width: var(--ard-_fab-size);
+    min-height: var(--ard-_fab-size);
+    min-width: var(--ard-_fab-size);
+    user-select: none;
+    border-radius: 9999px;
+    justify-content: center;
+    margin: 0;
+    font-weight: 500;
+    overflow: hidden;
+    transition: max-width 0.5s ease;
+
+    &.ard-fab-size-standard {
+      --ard-_fab-size: var(--ard-fab-size-standard, 3.5rem);
+      font-size: var(--ard-fab-size-standard-font-size, 1.75rem);
+    }
+    &.ard-fab-size-small {
+      --ard-_fab-size: var(--ard-fab-size-small, 2.5rem);
+      font-size: var(--ard-fab-size-small-font-size, 1.375rem);
+    }
+    &.ard-fab-extended {
+      min-width: var(--ard-_fab-size);
+      width: max-content;
+      font-weight: unset;
+      gap: var(--ard-fab-extended-gap, 1em);
+      max-width: 10em;
+    }
+
+    ard-icon {
+      font-size: 1em;
+    }
+    &.ard-appearance-transparent {
+      @include CM.focus-overlay-scale-addon();
+    }
   }
-  &.ard-button-with-pointer-events-when-disabled {
-    pointer-events: all;
 
-    > .ard-button {
+  ard-fab.ard-disabled {
+    > .ard-fab {
+      @include shared.button-disabled(
+        var(--ard-fab-overlay-disabled-opacity, var(--ard-button-overlay-disabled-opacity, 0.2)),
+        var(--ard-fab-disabled-opacity, var(--ard-button-disabled-opacity, 0.6))
+      );
+    }
+    &.ard-button-with-pointer-events-when-disabled {
       pointer-events: all;
+
+      > .ard-button {
+        pointer-events: all;
+      }
     }
   }
 }