@ardium-ui/ui 5.0.0-alpha.66 → 5.0.0-alpha.68

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

@@ -13,12 +13,18 @@
   --ard-number-input-line-height: 1.25;
   --ard-number-input-line-height-compact: 1;
   --ard-number-input-font-weight: 400;
-  // --ard-number-input-padding: ;
-  // --ard-number-input-padding-compact: ;
+  // --ard-number-input-padding-top: ;
+  // --ard-number-input-padding-right: ;
+  // --ard-number-input-padding-bottom: ;
+  // --ard-number-input-padding-left: ;
+  // --ard-number-input-padding-top-compact: ;
+  // --ard-number-input-padding-right-compact: ;
+  // --ard-number-input-padding-bottom-compact: ;
+  // --ard-number-input-padding-left-compact: ;
   // --ard-number-input-color: ;
   // --ard-number-input-placeholder-color: ;
   --ard-number-input-placeholder-opacity: 60%;
-
+  --ard-number-input-disabled-opacity: 50%;
   // --ard-number-input-width: ;
   --ard-number-input-rounded-border-radius: 8px;
 }
@@ -37,8 +43,14 @@ ard-number-input {
     var(--ard-number-input-line-height, 1.25),
     var(--ard-number-input-line-height-compact, 1),
     var(--ard-number-input-font-weight, 400),
-    var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem)),
-    var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
+    var(--ard-number-input-padding-top, var(--ard-form-field-padding-top, 0)),
+    var(--ard-number-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
+    var(--ard-number-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
+    var(--ard-number-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
+    var(--ard-number-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
+    var(--ard-number-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
+    var(--ard-number-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
+    var(--ard-number-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
     var(--ard-number-input-color, #{ARD.$text}),
     var(--ard-number-input-placeholder-color, #{ARD.$text}),
     var(--ard-number-input-placeholder-opacity, 60%)
@@ -47,19 +59,37 @@ ard-number-input {
   gap: 0;
   width: 100%;
 
-  .ard-input-container {
+  .ard-number-input-wrapper {
+    flex-grow: 1;
+    text-size-adjust: 100%;
+    display: flex;
+    align-items: center;
     height: 100%;
-    max-width: 100%;
-    padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
+  }
+  .ard-input-container {
+    position: relative;
+    padding-left: var(--ard-number-input-padding-left, var(--ard-form-field-padding-left, 0.375rem));
+    padding-right: var(--ard-number-input-padding-right, var(--ard-form-field-padding-right, 0.375rem));
+    padding-top: var(--ard-number-input-padding-top, var(--ard-form-field-padding-top, 0));
+    padding-bottom: var(--ard-number-input-padding-bottom, var(--ard-form-field-padding-bottom, 0));
+  }
 
-    & > input {
-      width: 100%;
-    }
+  //! prefix & suffix
+  .ard-number-input-prefix-container,
+  .ard-number-input-suffix-container {
+    height: max-content;
+    max-height: 100%;
+    display: flex;
+    align-items: center;
   }
-  .ard-placeholder {
-    padding: var(--ard-number-input-padding, var(--ard-form-field-padding, 0 0.375rem));
+  .ard-number-input-prefix-container {
+    padding-left: var(--ard-number-input-padding-left, 0.375rem);
+  }
+  .ard-number-input-suffix-container {
+    padding-right: var(--ard-number-input-padding-right, 0.375rem);
   }
 
+  //! buttons
   .ard-quick-change-button {
     position: relative;
     min-width: var(--ard-number-input-height, var(--ard-form-field-height, 2.3125rem));
@@ -100,7 +130,7 @@ ard-number-input {
     border-radius: var(--ard-number-input-rounded-border-radius, 8px);
 
     &.ard-quick-change-false {
-      .ard-input-container {
+      .ard-number-input-wrapper {
         border-radius: var(--ard-number-input-rounded-border-radius, 8px);
       }
     }
@@ -119,7 +149,7 @@ ard-number-input {
     }
 
     &.ard-quick-change-false {
-      .ard-input-container {
+      .ard-number-input-wrapper {
         border-radius: 9999px;
       }
     }
@@ -128,7 +158,7 @@ ard-number-input {
   //! variant-specific appearances
   &.ard-variant-rounded,
   &.ard-variant-sharp {
-    &:not(.ard-appearance-filled) .ard-input-container {
+    &:not(.ard-appearance-filled) .ard-number-input-wrapper {
       box-sizing: border-box;
       background: var(--ard-appearance-background);
       border: var(--ard-appearance-border);
@@ -145,11 +175,11 @@ ard-number-input {
 
   //! compact
   &.ard-compact {
-    .ard-input-container {
-      padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
-    }
-    .ard-placeholder {
-      padding: var(--ard-number-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
+    .ard-number-input-wrapper {
+      padding-left: var(--ard-number-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem));
+      padding-right: var(--ard-number-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem));
+      padding-top: var(--ard-number-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0));
+      padding-bottom: var(--ard-number-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0));
     }
     .ard-quick-change-button {
       min-width: var(--ard-number-input-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
@@ -160,7 +190,7 @@ ard-number-input {
 .ard-disabled {
   > .ard-number-input {
     pointer-events: none;
-    opacity: 50%;
+    opacity: var(--ard-number-input-disabled-opacity, 50%);
 
     .ard-button .ard-focus-overlay {
       opacity: 0;

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

@@ -14,8 +14,14 @@
   --ard-password-input-line-height: 1.25;
   --ard-password-input-line-height-compact: 1;
   --ard-password-input-font-weight: 400;
-  // --ard-password-input-padding: ;
-  // --ard-password-input-padding-compact: ;
+  // --ard-password-input-padding-top: ;
+  // --ard-password-input-padding-right: ;
+  // --ard-password-input-padding-bottom: ;
+  // --ard-password-input-padding-left: ;
+  // --ard-password-input-padding-top-compact: ;
+  // --ard-password-input-padding-right-compact: ;
+  // --ard-password-input-padding-bottom-compact: ;
+  // --ard-password-input-padding-left-compact: ;
   // --ard-password-input-color: ;
   // --ard-password-input-placeholder-color: ;
   --ard-password-input-placeholder-opacity: 60%;
@@ -48,8 +54,14 @@
     var(--ard-password-input-line-height, 1.25),
     var(--ard-password-input-line-height-compact, 1),
     var(--ard-password-input-font-weight, 400),
-    var(--ard-password-input-padding, var(--ard-form-field-padding, 0 0.375rem)),
-    var(--ard-password-input-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
+    var(--ard-password-input-padding-top, var(--ard-form-field-padding-top, 0)),
+    var(--ard-password-input-padding-right, var(--ard-form-field-padding-right, 0.375rem)),
+    var(--ard-password-input-padding-bottom, var(--ard-form-field-padding-bottom, 0)),
+    var(--ard-password-input-padding-left, var(--ard-form-field-padding-left, 0.375rem)),
+    var(--ard-password-input-padding-top-compact, var(--ard-form-field-padding-top-compact, 0)),
+    var(--ard-password-input-padding-right-compact, var(--ard-form-field-padding-right-compact, 0.375rem)),
+    var(--ard-password-input-padding-bottom-compact, var(--ard-form-field-padding-bottom-compact, 0)),
+    var(--ard-password-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
     var(--ard-password-input-color, #{ARD.$text}),
     var(--ard-password-input-placeholder-color, #{ARD.$text}),
     var(--ard-password-input-placeholder-opacity, 60%)

package/prebuilt-themes/default/inputs/search-bar.css

@@ -1,135 +0,0 @@
-/**
- * Should be applied to the first element in the component's template.
- */
-:root {
-  --ard-search-bar-gap: 0.625rem;
-  --ard-search-bar-line-height: 1.25;
-  --ard-search-bar-line-height-compact: 1;
-  --ard-search-bar-font-weight: 400;
-  --ard-search-bar-placeholder-opacity: 60%;
-  --ard-search-bar-min-width: 10rem;
-  --ard-search-bar-max-width: 100%;
-  --ard-search-bar-disabled-opacity: 50%;
-}
-
-.ard-search-bar {
-  height: var(--ard-search-bar-height, var(--ard-form-field-height, 2.3125rem));
-  position: relative;
-  font-family: var(--ard-font-family);
-  display: flex;
-  align-items: center;
-  justify-content: stretch;
-  gap: var(--ard-search-bar-gap, 0.625rem);
-  cursor: text;
-  box-sizing: border-box;
-  font-size: var(--ard-search-bar-font-size, var(--ard-form-field-font-size, 1rem));
-  line-height: var(--ard-search-bar-line-height, 1.25);
-  font-weight: var(--ard-search-bar-font-weight, 400);
-  padding: var(--ard-search-bar-padding, var(--ard-form-field-padding, 0 0.375rem));
-  color: var(--ard-search-bar-color, var(--ard-text));
-  min-width: var(--ard-search-bar-min-width, 10rem);
-  max-width: var(--ard-search-bar-max-width, 100%);
-}
-.ard-search-bar .ard-input-container {
-  flex-grow: 1;
-  text-size-adjust: 100%;
-  display: flex;
-  align-items: center;
-}
-.ard-search-bar .ard-input-container .ard-placeholder {
-  font: inherit;
-  opacity: var(--ard-search-bar-placeholder-opacity, 60%);
-  color: var(--ard-search-bar-placeholder-color, var(--ard-text));
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 100%;
-  pointer-events: none;
-}
-.ard-search-bar .ard-input-container input {
-  border: none;
-  background: transparent;
-  outline: none;
-  font: inherit;
-  padding: 0;
-  color: inherit;
-  display: block;
-  width: 100%;
-}
-.ard-search-bar.ard-compact {
-  height: var(--ard-search-bar-height-compact, var(--ard-form-field-height-compact, 1.6875rem));
-  font-size: var(--ard-search-bar-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem));
-  line-height: var(--ard-search-bar-line-height-compact, 1);
-  padding: var(--ard-search-bar-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem));
-}
-.ard-search-bar ard-clear-button {
-  height: var(--ard-clear-button-size);
-  width: var(--ard-clear-button-size);
-  position: relative;
-}
-.ard-search-bar .ard-clear-btn-wrapper {
-  cursor: pointer;
-  font-size: medium;
-  color: var(--ard-detail);
-  width: var(--ard-clear-button-size);
-  height: var(--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-search-bar .ard-clear-btn-wrapper .ard-hitbox {
-  position: absolute;
-  left: -1px;
-  right: -1px;
-  top: -1px;
-  bottom: -1px;
-}
-.ard-search-bar .ard-clear-btn-wrapper .ard-focus-overlay {
-  position: absolute;
-  top: calc(-1 * 1px);
-  bottom: calc(-1 * 1px);
-  left: calc(-1 * 1px);
-  right: calc(-1 * 1px);
-  opacity: 0;
-  border-radius: inherit;
-  pointer-events: none;
-  transition: opacity 0.2s ease;
-  background: currentColor;
-}
-.ard-search-bar .ard-clear-btn-wrapper .ard-clear-btn {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-.ard-search-bar .ard-clear-btn-wrapper .ard-clear-btn::before {
-  content: "close";
-  font-family: "Material Symbols Outlined";
-  font-size: 1.5em;
-  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
-  font-size: 70%;
-}
-.ard-search-bar .ard-clear-btn-wrapper:hover .ard-focus-overlay {
-  opacity: 5%;
-}
-.ard-search-bar .ard-clear-btn-wrapper:focus .ard-focus-overlay {
-  opacity: 8%;
-}
-.ard-search-bar .ard-clear-btn-wrapper:active .ard-focus-overlay {
-  opacity: 15%;
-}
-
-.ard-disabled .ard-search-bar {
-  pointer-events: none;
-  opacity: var(--ard-search-bar-disabled-opacity, 50%);
-}
-
-/*# sourceMappingURL=search-bar.css.map */

package/prebuilt-themes/default/inputs/search-bar.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/search-bar.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACKA;EAGE;EAGA;EACA;EACA;EAKA;EAEA;EACA;EACA;;;AAGF;EDPE,QCSE;EDRF;EACA;EACA;EACA;EACA;EACA,KCKE;EDJF;EACA;EACA,WCGE;EDFF,aCIE;EDHF,aCKE;EDJF,SCKE;EDJF,OCME;EAIF;EACA;;ADTA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA,SCFF;EDGE,OCJF;EDKE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE,QCnCA;EDoCA,WCjCA;EDkCA,aChCA;EDiCA,SC9BA;;AClCF;EACE,QCmCgB;EDlChB,OCkCgB;EDjChB;;AAGF;EACE;EACA;EACA,OCGK;EDFL,OC0BgB;EDzBhB,QCyBgB;EDxBhB;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAGF;EEvBF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFgBI;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EE7CN;EACA;EACA,yBACE;EF4CI;;AAKF;EACE;;AAKF;EACE;;AAKF;EACE;;;ADlBN;EACE;EACA","file":"search-bar.css"}

package/themes/default/inputs/search-bar.scss

@@ -1,55 +0,0 @@
-@use './shared' as inputMixin;
-@use '../mixins' as defaultMixins;
-@use '../clear-button' as CB;
-@use '../../variables' as ARD;
-
-// the variables are commented out intentionally
-// read more in docs/dev/css-variables.md
-:root {
-  // --ard-search-bar-height: ;
-  // --ard-search-bar-height-compact: ;
-  --ard-search-bar-gap: 0.625rem;
-  // --ard-search-bar-font-size: ;
-  // --ard-search-bar-font-size-compact: ;
-  --ard-search-bar-line-height: 1.25;
-  --ard-search-bar-line-height-compact: 1;
-  --ard-search-bar-font-weight: 400;
-  // --ard-search-bar-padding: ;
-  // --ard-search-bar-padding-compact: ;
-  // --ard-search-bar-color: ;
-  // --ard-search-bar-placeholder-color: ;
-  --ard-search-bar-placeholder-opacity: 60%;
-
-  --ard-search-bar-min-width: 10rem;
-  --ard-search-bar-max-width: 100%;
-  --ard-search-bar-disabled-opacity: 50%;
-}
-
-.ard-search-bar {
-  @include inputMixin.genericInput(
-    var(--ard-search-bar-height, var(--ard-form-field-height, 2.3125rem)),
-    var(--ard-search-bar-height-compact, var(--ard-form-field-height-compact, 1.6875rem)),
-    var(--ard-search-bar-gap, 0.625rem),
-    var(--ard-search-bar-font-size, var(--ard-form-field-font-size, 1rem)),
-    var(--ard-search-bar-font-size-compact, var(--ard-form-field-font-size-compact, 0.875rem)),
-    var(--ard-search-bar-line-height, 1.25),
-    var(--ard-search-bar-line-height-compact, 1),
-    var(--ard-search-bar-font-weight, 400),
-    var(--ard-search-bar-padding, var(--ard-form-field-padding, 0 0.375rem)),
-    var(--ard-search-bar-padding-compact, var(--ard-form-field-padding-compact, 0 0.375rem)),
-    var(--ard-search-bar-color, #{ARD.$text}),
-    var(--ard-search-bar-placeholder-color, #{ARD.$text}),
-    var(--ard-search-bar-placeholder-opacity, 60%)
-  );
-  min-width: var(--ard-search-bar-min-width, 10rem);
-  max-width: var(--ard-search-bar-max-width, 100%);
-
-  @include CB.clearButton();
-}
-//! disabled state
-.ard-disabled {
-  .ard-search-bar {
-    pointer-events: none;
-    opacity: var(--ard-search-bar-disabled-opacity, 50%);
-  }
-}