@ardium-ui/ui 5.0.0-alpha.69 → 5.0.0-alpha.70

package/themes/default/file-drop-area.scss

@@ -1,5 +1,51 @@
 @use './coloring' as CM;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-file-drop-area-min-width: 15rem;
+  --ard-file-drop-area-min-height: 10rem;
+  --ard-file-drop-area-padding: 0.625rem;
+  --ard-file-drop-area-outline-border-width: 2px;
+  --ard-file-drop-area-outline-border-style: dashed;
+  --ard-file-drop-area-outline-padding: 0.375rem;
+  --ard-file-drop-area-content-gap-min: 0.2rem;
+  --ard-file-drop-area-content-gap-preferred: 10%;
+  --ard-file-drop-area-content-gap-max: 1rem;
+  --ard-file-drop-area-icon-font-size: 220%;
+  --ard-file-drop-area-drop-text-font-weight: 500;
+  --ard-file-drop-area-drop-text-font-size: 105%;
+  --ard-file-drop-area-or-text-font-weight: 400;
+  --ard-file-drop-area-or-text-font-size: 95%;
+  --ard-file-drop-area-dragover-text-font-weight: 500;
+  --ard-file-drop-area-dragover-text-font-size: 105%;
+  --ard-file-drop-area-dragover-amount-font-weight: 600;
+  --ard-file-drop-area-dragover-amount-font-size: 120%;
+  --ard-file-drop-area-uploaded-container-gap: 0.75rem;
+  --ard-file-drop-area-uploaded-message-font-weight: 500;
+  --ard-file-drop-area-uploaded-message-font-size: 105%;
+  --ard-file-drop-area-uploaded-amount-font-weight: 600;
+  --ard-file-drop-area-uploaded-amount-font-size: 100%;
+  --ard-file-drop-area-uploaded-files-gap: 0.45rem;
+  --ard-file-drop-area-file-gap: 0.75rem;
+  --ard-file-drop-area-file-icon-font-size: 220%;
+  --ard-file-drop-area-file-info-gap: 0.5ch;
+  --ard-file-drop-area-filename-gap: 0;
+  --ard-file-drop-area-filename-name-line-height: 1;
+  --ard-file-drop-area-filename-name-height: 1em;
+  --ard-file-drop-area-filesize-font-weight: 500;
+  --ard-file-drop-area-filesize-font-size: 83%;
+  --ard-file-drop-area-filesize-opacity: 60%;
+  --ard-file-drop-area-variant-rounded-corner-radius: 0.875rem;
+  --ard-file-drop-area-outline-corner-radius: 0.25rem;
+  --ard-file-drop-area-font-size-compact: 85%;
+  --ard-file-drop-area-min-width-compact: 12rem;
+  --ard-file-drop-area-min-height-compact: 8rem;
+  --ard-file-drop-area-content-gap-min-compact: 0.1667rem;
+  --ard-file-drop-area-content-gap-preferred-compact: 10%;
+  --ard-file-drop-area-content-gap-max-compact: 0.75rem;
+}
+
 ard-file-drop-area {
   display: block;
   width: 100%;
@@ -14,9 +60,9 @@ ard-file-drop-area {
   max-width: 100%;
   height: 100%;
   max-height: 100%;
-  min-width: 15rem;
-  min-height: 10rem;
-  padding: 0.625rem;
+  min-width: var(--ard-file-drop-area-min-width, 15rem);
+  min-height: var(--ard-file-drop-area-min-height, 10rem);
+  padding: var(--ard-file-drop-area-padding, 0.625rem);
   box-sizing: border-box;
   background: var(--ard-cmpcl--bg-colored-verylight);
   display: flex;
@@ -25,8 +71,9 @@ ard-file-drop-area {
     width: 100%;
     min-height: 100%;
     box-sizing: border-box;
-    border: 2px dashed var(--ard-cmpcl--border);
-    padding: 0.375rem;
+    border: var(--ard-file-drop-area-outline-border-width, 2px) var(--ard-file-drop-area-outline-border-style, dashed)
+      var(--ard-cmpcl--border);
+    padding: var(--ard-file-drop-area-outline-padding, 0.375rem);
     pointer-events: none;
 
     * {
@@ -40,22 +87,27 @@ ard-file-drop-area {
     flex-direction: column;
     align-items: center;
     justify-content: center;
-    gap: clamp(0.2rem, 10%, 1rem);
-    padding: 0.2rem 0;
+    gap: clamp(
+      var(--ard-file-drop-area-content-gap-min, 0.2rem),
+      var(--ard-file-drop-area-content-gap-preferred, 10%),
+      var(--ard-file-drop-area-content-gap-max, 1rem)
+    );
+    padding: var(--ard-file-drop-area-content-padding, 0.2rem 0);
     box-sizing: border-box;
   }
 
   //! state-specific styling
   //idle
   .ard-file-drop-area-icon {
-    font-size: 220%;
+    font-size: var(--ard-file-drop-area-icon-font-size, 220%);
   }
   .ard-file-drop-area-drop-text {
-    font-weight: 500;
-    font-size: 105%;
+    font-weight: var(--ard-file-drop-area-drop-text-font-weight, 500);
+    font-size: var(--ard-file-drop-area-drop-text-font-size, 105%);
   }
   .ard-file-drop-area-or-text {
-    font-size: 95%;
+    font-weight: var(--ard-file-drop-area-or-text-font-weight, 400);
+    font-size: var(--ard-file-drop-area-or-text-font-size, 95%);
   }
   .ard-file-drop-area-browse-button > button {
     border: 1px solid var(--ard-cmpcl--border);
@@ -63,12 +115,12 @@ ard-file-drop-area {
   }
   //dragover
   .ard-file-drop-area-dragover-text {
-    font-weight: 500;
-    font-size: 105%;
+    font-weight: var(--ard-file-drop-area-dragover-text-font-weight, 500);
+    font-size: var(--ard-file-drop-area-dragover-text-font-size, 105%);
   }
   .ard-file-drop-area-dragover-amount {
-    font-weight: 600;
-    font-size: 120%;
+    font-weight: var(--ard-file-drop-area-dragover-amount-font-weight, 600);
+    font-size: var(--ard-file-drop-area-dragover-amount-font-size, 120%);
   }
   //uploaded
   .ard-file-drop-area-uploaded-container {
@@ -78,15 +130,16 @@ ard-file-drop-area {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: max-content 1fr;
-    gap: 0.75rem;
+    gap: var(--ard-file-drop-area-uploaded-container-gap, 0.75rem);
     justify-items: center;
   }
   .ard-file-drop-area-uploaded-message {
-    font-weight: 500;
-    font-size: 105%;
+    font-weight: var(--ard-file-drop-area-uploaded-message-font-weight, 500);
+    font-size: var(--ard-file-drop-area-uploaded-message-font-size, 105%);
   }
   .ard-file-drop-area-uploaded-amount {
-    font-weight: 600;
+    font-weight: var(--ard-file-drop-area-uploaded-amount-font-weight, 600);
+    font-size: var(--ard-file-drop-area-uploaded-amount-font-size, 100%);
   }
   .ard-file-drop-area-uploaded-files {
     max-width: 100%;
@@ -94,7 +147,7 @@ ard-file-drop-area {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: 0.45rem;
+    gap: var(--ard-file-drop-area-uploaded-files-gap, 0.45rem);
     overflow: hidden auto;
     box-sizing: border-box;
 
@@ -103,36 +156,36 @@ ard-file-drop-area {
       display: grid;
       align-items: center;
       grid-template-columns: max-content 1fr;
-      gap: 0.75rem;
+      gap: var(--ard-file-drop-area-file-gap, 0.75rem);
       max-height: min-content;
 
       ard-icon {
-        font-size: 220%;
+        font-size: var(--ard-file-drop-area-file-icon-font-size, 220%);
       }
       .ard-file-drop-area-file-info {
         display: flex;
         flex-direction: column;
         line-height: 1;
-        gap: 0.5ch;
+        gap: var(--ard-file-drop-area-file-info-gap, 0.5ch);
       }
       .ard-file-drop-area-filename {
         max-width: 100%;
         display: grid;
         grid-template-columns: 1fr max-content;
-        gap: 0;
+        gap: var(--ard-file-drop-area-filename-gap, 0);
       }
       .ard-file-drop-area-filename-name {
         max-width: 100%;
-        line-height: 1;
+        line-height: var(--ard-file-drop-area-filename-name-line-height, 1);
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
-        height: 1em;
+        height: var(--ard-file-drop-area-filename-name-height, 1em);
       }
       .ard-file-drop-area-filesize {
-        font-weight: 500;
-        font-size: 83%;
-        opacity: 60%;
+        font-weight: var(--ard-file-drop-area-filesize-font-weight, 500);
+        font-size: var(--ard-file-drop-area-filesize-font-size, 83%);
+        opacity: var(--ard-file-drop-area-filesize-opacity, 60%);
       }
     }
   }
@@ -140,10 +193,10 @@ ard-file-drop-area {
   //! variant
   &.ard-variant-rounded,
   &.ard-variant-pill {
-    border-radius: 0.875rem;
+    border-radius: var(--ard-file-drop-area-variant-rounded-corner-radius, 0.875rem);
 
     .ard-file-drop-area-outline {
-      border-radius: 0.25rem;
+      border-radius: var(--ard-file-drop-area-outline-corner-radius, 0.25rem);
     }
   }
   &.ard-variant-sharp {
@@ -151,12 +204,16 @@ ard-file-drop-area {
   }
   //! compact
   &.ard-compact {
-    font-size: 85%;
-    min-width: 12rem;
-    min-height: 8rem;
+    font-size: var(--ard-file-drop-area-font-size-compact, 85%);
+    min-width: var(--ard-file-drop-area-min-width-compact, 12rem);
+    min-height: var(--ard-file-drop-area-min-height-compact, 8rem);
 
     .ard-file-drop-area-content {
-      gap: clamp(0.1667rem, 10%, 0.75rem);
+      gap: clamp(
+        var(--ard-file-drop-area-content-gap-min-compact, 0.1667rem),
+        var(--ard-file-drop-area-content-gap-preferred-compact, 10%),
+        var(--ard-file-drop-area-content-gap-max-compact, 0.75rem)
+      );
     }
   }
 }

package/themes/default/inputs/digit-input.scss

@@ -2,10 +2,31 @@
 @use '../../variables' as ARD;
 @use '../mixins' as defaultMixins;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  // --ard-digit-input-font-family: ;
+  --ard-digit-input-font-weight: 500;
+  // --ard-digit-input-color: ;
+  --ard-digit-input-gap: 0.375em;
+  --ard-digit-input-size: 2.0625em;
+  // --ard-digit-input-caret-color: ;
+  // --ard-digit-input-placeholder-color: ;
+  --ard-digit-input-placeholder-opacity: 60%;
+  --ard-digit-input-transition-duration: 150ms;
+  // --ard-digit-input-rectangle-height: ;
+  --ard-digit-input-rectangle-font-size: 1.25em;
+  --ard-digit-input-success-background-color: transparent;
+  // --ard-digit-input-success-border-color: ;
+  // --ard-digit-input-error-background-color: ;
+  // --ard-digit-input-error-border-color: ;
+  --ard-digit-input-disabled-opacity: 50%;
+}
+
 ard-digit-input {
-  font-family: var(--ard-font-family);
-  font-weight: 500;
-  color: ARD.$text;
+  font-family: var(--ard-digit-input-font-family, var(--ard-font-family));
+  font-weight: var(--ard-digit-input-font-weight, 500);
+  color: var(--ard-digit-input-color, #{ARD.$text});
 }
 
 .ard-digit-input,
@@ -18,34 +39,34 @@ ard-digit-input {
 .ard-digit-input {
   @include defaultMixins.formAppearances();
   display: flex;
-  gap: 0.375em;
+  gap: var(--ard-digit-input-gap, 0.375em);
 
   .ard-digit-input__item {
     height: max-content;
     display: flex;
-    height: 2.0625em;
+    height: var(--ard-digit-input-size, 2.0625em);
     box-sizing: border-box;
 
     &.ard-digit-input__item-with-input {
-      width: 2.0625em;
+      width: var(--ard-digit-input-size, 2.0625em);
     }
     .ard-digit-input__input {
       width: 100%;
       height: 100%;
       box-sizing: border-box;
       text-align: center;
-      color: ARD.$text;
-      caret-color: ARD.$text3;
+      color: inherit;
+      caret-color: var(--ard-digit-input-caret-color, #{ARD.$text3});
       background: var(--ard-appearance-background);
       border: var(--ard-appearance-border);
       border-radius: var(--ard-variant-border-radius);
       transition:
-        border-color 0.15s ARD.$timing-fn,
-        background-color 0.15s ARD.$timing-fn;
+        border-color var(--ard-digit-input-transition-duration, 0.15s) ARD.$timing-fn,
+        background-color var(--ard-digit-input-transition-duration, 0.15s) ARD.$timing-fn;
 
       &::placeholder {
-        color: ARD.$text3;
-        opacity: 60%;
+        color: var(--ard-digit-input-placeholder-color, #{ARD.$text3});
+        opacity: var(--ard-digit-input-placeholder-opacity, 60%);
       }
 
       &:not(.ard-digit-input__input-empty) {
@@ -61,33 +82,34 @@ ard-digit-input {
   }
   &.ard-shape-square {
     .ard-digit-input__item {
-      height: 2.0625em;
+      height: var(--ard-digit-input-size, 2.0625em);
     }
   }
   &.ard-shape-rectangle {
     .ard-digit-input__item {
-      height: 2.0625em * 1.3;
+      height: var(--ard-digit-input-rectangle-height, calc(var(--ard-digit-input-size, 2.0625em) * 1.3));
 
       .ard-digit-input__input {
-        font-size: 1.2em;
+        font-size: var(--ard-digit-input-rectangle-font-size, 1.25em);
       }
     }
   }
 
   &.ard-is-success {
     .ard-digit-input__item .ard-digit-input__input {
-      border-color: ARD.$success500;
+      background-color: var(--ard-digit-input-success-background-color, transparent);
+      border-color: var(--ard-digit-input-success-border-color, #{ARD.$success500});
     }
   }
   &.ard-has-error {
     .ard-digit-input__item .ard-digit-input__input {
-      background-color: ARD.$danger50;
-      border-color: ARD.$danger500;
+      background-color: var(--ard-digit-input-error-background-color, #{ARD.$danger50});
+      border-color: var(--ard-digit-input-error-border-color, #{ARD.$danger500});
     }
   }
 
   &.ard-variant-rounded {
-    --ard-variant-border-radius: 0.25em;
+    --ard-variant-border-radius: var(--ard-digit-input-border-radius, var(--ard-rounded-corner-radius, 0.375rem));
   }
   &.ard-variant-pill {
     --ard-variant-border-radius: 9999px;
@@ -98,7 +120,7 @@ ard-digit-input {
 }
 .ard-disabled {
   > .ard-digit-input {
-    opacity: 50%;
+    opacity: var(--ard-digit-input-disabled-opacity, 50%);
     pointer-events: none;
   }
 }

package/themes/default/progress-circle.scss

@@ -1,9 +1,20 @@
 @use './coloring' as coloringMixins;
 @use '../variables' as ARD;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-progress-circle-size: 3em;
+  // --ard-progress-circle-colorless-background-color: ;
+  --ard-progress-circle-colorless-background-opacity: 100%;
+  --ard-progress-circle-colored-background-opacity: 100%;
+  --ard-progress-circle-value-font-size: 0.875em;
+}
+
 .ard-progress-circle {
   @include coloringMixins.typeColors;
-  width: 3em;
+  width: var(--ard-progress-circle-size, 3em);
+  height: var(--ard-progress-circle-size, 3em);
 
   --ard-_progress-circle-fill-color: var(--ard-cmpcl--bg-colored);
 
@@ -15,20 +26,15 @@
   }
   &.ard-appearance-colorless {
     .ard-progress-circle-background {
-      background: ARD.$darken-overlay-medium;
+      background: var(--ard-progress-circle-colorless-background-color, #{ARD.$darken-overlay-medium});
+      opacity: var(--ard-progress-circle-colorless-background-opacity, 100%);
     }
   }
   &.ard-appearance-colored {
     .ard-progress-circle-background {
-      opacity: 16%;
+      opacity: var(--ard-progress-circle-colored-background-opacity, 100%);
       background: var(--ard-cmpcl--bg-colored);
     }
-    //special case for no coloring
-    &.ard-color-none {
-      .ard-progress-circle-background {
-        opacity: 8%;
-      }
-    }
   }
   //! ring variant
   &.ard-progress-circle-variant-ring {
@@ -46,7 +52,7 @@
     top: 50%;
     transform: translate(-50%, -50%);
     font-weight: bold;
-    font-size: 0.9em;
+    font-size: var(--ard-progress-circle-value-font-size, 0.875em);
   }
   &.ard-progress-circle-variant-full {
     .ard-progress-circle-value {

package/themes/default/snackbar.scss

@@ -1,33 +1,51 @@
 @use './coloring' as C;
 @use '../variables' as ARD;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-snackbar-min-width: min(21rem, 90vw);
+  --ard-snackbar-max-width: min(42rem, 90vw);
+  --ard-snackbar-min-height: 3rem;
+  // --ard-snackbar-background-color: ;
+  // --ard-snackbar-content-color: ;
+  --ard-snackbar-gap: 0.625rem;
+  --ard-snackbar-margin: 0.625rem;
+  --ard-snackbar-padding: 0 0.5rem 0 1rem;
+  // --ard-snackbar-border-radius: ;
+  --ard-snackbar-content-gap: 0.625rem;
+  --ard-snackbar-animation-duration: 150ms;
+  --ard-snackbar-animation-bottom: -0.375rem;
+  --ard-snackbar-animation-scale: 60%;
+}
+
 .ard-snackbar {
   @include C.typeColors();
-  min-width: min(21rem, 90vw);
-  max-width: min(42rem, 90vw);
-  min-height: 3rem;
-  margin: 0.625rem;
+  min-width: var(--ard-snackbar-min-width, min(21rem, 90vw));
+  max-width: var(--ard-snackbar-max-width, min(42rem, 90vw));
+  min-height: var(--ard-snackbar-min-height, 3rem);
+  margin: var(--ard-snackbar-margin, 0.625rem);
   position: relative;
   display: flex;
   justify-content: stretch;
   align-items: center;
-  gap: 0.625rem;
-  border-radius: 6px;
+  gap: var(--ard-snackbar-gap, 0.625rem);
+  border-radius: var(--ard-snackbar-border-radius, var(--ard-rounded-corner-radius, 0.375rem));
   transform-origin: bottom center;
-  background-color: ARD.$bg-f-alt;
-  padding: 0 0.5rem 0 1rem;
+  background-color: var(--ard-snackbar-background-color, #{ARD.$bg-f-alt});
+  padding: var(--ard-snackbar-padding, 0 0.5rem 0 1rem);
 
   opacity: 100%;
   transform: scale(100%);
   bottom: 0;
-  animation: show 150ms ease-out forwards;
+  animation: show var(--ard-snackbar-animation-duration, 150ms) ease-out forwards;
 
   .ard-snackbar-content {
     display: flex;
-    gap: 0.625rem;
+    gap: var(--ard-snackbar-content-gap, 0.625rem);
     align-items: center;
     flex-grow: 1;
-    color: ARD.$text2-alt;
+    color: var(--ard-snackbar-content-color, #{ARD.$text2-alt});
 
     ard-icon {
       color: var(--ard-cmpcl--content-light);
@@ -35,14 +53,14 @@
   }
 
   &.ard-snackbar-closing {
-    animation: hide 150ms ease-out forwards;
+    animation: hide var(--ard-snackbar-animation-duration, 150ms) ease-out forwards;
   }
 }
 
 @mixin animation {
   opacity: 0%;
-  transform: scale(60%);
-  bottom: -0.375rem;
+  transform: scale(var(--ard-snackbar-animation-scale, 60%));
+  bottom: var(--ard-snackbar-animation-bottom, -0.375rem);
 }
 
 @keyframes show {

package/themes/default/spinner.scss

@@ -1,16 +1,24 @@
 @use './coloring' as CM;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-spinner-size: 2rem;
+  --ard-spinner-margin: 0.25rem;
+  --ard-spinner-duration: 1.4s;
+}
+
 ard-spinner {
   display: inline-block;
-  width: 2rem;
+  width: var(--ard-spinner-size, 2rem);
   aspect-ratio: 1;
   position: relative;
-  margin: 0.25rem;
+  margin: var(--ard-spinner-margin, 0.25rem);
 }
 
 .ard-spinner {
   @include CM.typeColors();
-  --ard-_spinner-duration: 1.4s;
+  --ard-_spinner-duration: var(--ard-spinner-duration, 1.4s);
   position: absolute;
 
   scale: 2.3; //magic number

package/themes/default/stars.scss

@@ -2,6 +2,23 @@
 @use './coloring' as coloringMixins;
 @use '../variables' as ARD;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-star-size: 1.5em;
+
+  --ard-star-button-hitbox-offset: -4px;
+  --ard-star-button-overlay-offset: -0.125em;
+  --ard-star-button-hover-overlay-opacity: 10%;
+  --ard-star-button-focus-overlay-opacity: 0;
+  --ard-star-button-focus-visible-overlay-opacity: 10%;
+  --ard-star-button-active-overlay-opacity: 20%;
+  --ard-star-button-disabled-opacity: 50%;
+
+  --ard-rating-input-not-in-value-opacity: 50%;
+  --ard-rating-input-disabled-opacity: 50%;
+}
+
 .ard-star,
 .ard-star-button,
 .ard-rating-display,
@@ -15,8 +32,8 @@
 }
 .ard-star {
   font-size: inherit;
-  width: 1.5em;
-  height: 1.5em;
+  width: var(--ard-star-size, 1.5em);
+  height: var(--ard-star-size, 1.5em);
   position: relative;
 }
 .ard-rating-display,
@@ -28,7 +45,7 @@
   cursor: pointer;
 
   .ard-star-not-in-value {
-    opacity: 50%;
+    opacity: var(--ard-rating-input-not-in-value-opacity, 50%);
   }
 }
 .ard-star-button {
@@ -46,40 +63,52 @@
 
   .ard-hitbox {
     position: absolute;
-    left: -4px;
-    right: -4px;
-    bottom: -4px;
-    top: -4px;
+    left: var(--ard-star-button-hitbox-offset, -4px);
+    right: var(--ard-star-button-hitbox-offset, -4px);
+    bottom: var(--ard-star-button-hitbox-offset, -4px);
+    top: var(--ard-star-button-hitbox-offset, -4px);
   }
 
   .ard-focus-overlay {
     @include defaultMixins.focus-overlay;
     position: absolute;
-    left: -0.125em;
-    right: -0.125em;
-    bottom: -0.125em;
-    top: -0.125em;
+    left: var(--ard-star-button-overlay-offset, -0.125em);
+    right: var(--ard-star-button-overlay-offset, -0.125em);
+    bottom: var(--ard-star-button-overlay-offset, -0.125em);
+    top: var(--ard-star-button-overlay-offset, -0.125em);
     border-radius: 999px;
     background: currentColor;
   }
   @include defaultMixins.focus-overlay-scale-addon();
-  &:hover,
+  &:hover {
+    .ard-focus-overlay {
+      opacity: var(--ard-star-button-hover-overlay-opacity, 10%);
+    }
+  }
   &:focus {
     .ard-focus-overlay {
-      opacity: 10%;
+      opacity: var(--ard-star-button-focus-overlay-opacity, 0%);
+    }
+  }
+  &:focus-visible {
+    .ard-focus-overlay {
+      opacity: var(--ard-star-button-focus-visible-overlay-opacity, 10%);
     }
   }
   &:active {
     .ard-focus-overlay {
-      opacity: 20%;
+      opacity: var(--ard-star-button-active-overlay-opacity, 20%);
     }
   }
 }
 //! disabled state for star-button
 .ard-disabled {
-  > .ard-star-button,
+  > .ard-star-button {
+    pointer-events: none;
+    opacity: var(--ard-star-button-disabled-opacity, 50%);
+  }
   > .ard-rating-input {
     pointer-events: none;
-    opacity: 50%;
+    opacity: var(--ard-rating-input-disabled-opacity, 50%);
   }
 }

package/themes/default/tabber.scss

@@ -44,7 +44,7 @@ ard-tabber {
     &.ard-tab-align-left {
       justify-content: left;
     }
-    &.ard-tab-align-middle {
+    &.ard-tab-align-center {
       justify-content: center;
     }
     &.ard-tab-align-right {