@ardium-ui/ui 4.0.0 → 4.1.0

package/themes/default/card.scss

@@ -1,135 +1,135 @@
-@use '../variables' as ARD;
-
-ard-card,
-.ard-card {
-  position: relative;
-  background: ARD.$bg;
-  box-sizing: border-box;
-  width: 100%;
-  height: max-content;
-  display: block;
-
-  //! appearances
-  &.ard-appearance-outlined {
-    border: 1px solid ARD.$border-light;
-  }
-  &.ard-appearance-raised {
-    box-shadow: ARD.$card-shadow;
-  }
-  //! variants
-  &.ard-variant-sharp {
-    border-radius: 0;
-  }
-  &.ard-variant-rounded {
-    border-radius: 8px;
-  }
-}
-//! header
-ard-card-header {
-  padding: 0.5em 1em 0 1em;
-  display: flex;
-  align-items: center;
-  margin-bottom: 1em;
-  max-width: 100%;
-
-  .ard-card-header-title-container {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  &:first-child {
-    padding-top: 1em;
-  }
-}
-.ard-card-title,
-.ard-card-subtitle {
-  line-height: normal;
-  display: block;
-  margin: 0;
-  font-weight: 500;
-}
-.ard-card-title {
-  font-size: 1.375em;
-  letter-spacing: 0.0125em;
-  color: ARD.$text;
-}
-.ard-card-subtitle {
-  font-size: 1em;
-  letter-spacing: 0.0078125em;
-  color: ARD.$text3;
-  margin-top: 0.125rem;
-}
-.ard-card-avatar {
-  display: block;
-  width: 3em;
-  height: 3em;
-  border-radius: 9999px;
-  flex-shrink: 0;
-  object-fit: cover;
-
-  ~ .ard-card-header-title-container {
-    padding: 0 1em;
-  }
-}
-//! image
-.ard-card-image {
-  position: relative;
-  box-sizing: border-box;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-  max-width: 100%;
-
-  &:first-child {
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-  }
-  &:last-child {
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-  }
-}
-ard-card,
-.ard-card {
-  .ard-appearance-outlined .ard-image {
-    border-bottom: 1px solid ARD.$border-light;
-  }
-}
-//! content
-.ard-card-content {
-  padding: 0 1em;
-  display: block;
-  max-width: 100%;
-
-  &:first-child {
-    padding-top: 1em;
-  }
-  &:last-child {
-    padding-bottom: 1em;
-  }
-
-  > :last-child {
-    margin-bottom: 0;
-  }
-}
-//! action buttons
-.ard-card-action-buttons {
-  padding: 0.5em;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  max-width: 100%;
-
-  &.ard-align-left {
-    justify-content: flex-start;
-  }
-  &.ard-align-middle {
-    justify-content: center;
-  }
-  &.ard-align-right {
-    justify-content: flex-end;
-  }
-}
-//! footer
-//no styling needed
+@use '../variables' as ARD;
+
+ard-card,
+.ard-card {
+  position: relative;
+  background: ARD.$bg;
+  box-sizing: border-box;
+  width: 100%;
+  height: max-content;
+  display: block;
+
+  //! appearances
+  &.ard-appearance-outlined {
+    border: 1px solid ARD.$border-light;
+  }
+  &.ard-appearance-raised {
+    box-shadow: ARD.$card-shadow;
+  }
+  //! variants
+  &.ard-variant-sharp {
+    border-radius: 0;
+  }
+  &.ard-variant-rounded {
+    border-radius: 8px;
+  }
+}
+//! header
+ard-card-header {
+  padding: 0.5em 1em 0 1em;
+  display: flex;
+  align-items: center;
+  margin-bottom: 1em;
+  max-width: 100%;
+
+  .ard-card-header-title-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  &:first-child {
+    padding-top: 1em;
+  }
+}
+.ard-card-title,
+.ard-card-subtitle {
+  line-height: normal;
+  display: block;
+  margin: 0;
+  font-weight: 500;
+}
+.ard-card-title {
+  font-size: 1.375em;
+  letter-spacing: 0.0125em;
+  color: ARD.$text;
+}
+.ard-card-subtitle {
+  font-size: 1em;
+  letter-spacing: 0.0078125em;
+  color: ARD.$text3;
+  margin-top: 0.125rem;
+}
+.ard-card-avatar {
+  display: block;
+  width: 3em;
+  height: 3em;
+  border-radius: 9999px;
+  flex-shrink: 0;
+  object-fit: cover;
+
+  ~ .ard-card-header-title-container {
+    padding: 0 1em;
+  }
+}
+//! image
+.ard-card-image {
+  position: relative;
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  max-width: 100%;
+
+  &:first-child {
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+  }
+  &:last-child {
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
+}
+ard-card,
+.ard-card {
+  .ard-appearance-outlined .ard-image {
+    border-bottom: 1px solid ARD.$border-light;
+  }
+}
+//! content
+.ard-card-content {
+  padding: 0 1em;
+  display: block;
+  max-width: 100%;
+
+  &:first-child {
+    padding-top: 1em;
+  }
+  &:last-child {
+    padding-bottom: 1em;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+}
+//! action buttons
+.ard-card-action-buttons {
+  padding: 0.5em;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  max-width: 100%;
+
+  &.ard-align-left {
+    justify-content: flex-start;
+  }
+  &.ard-align-middle {
+    justify-content: center;
+  }
+  &.ard-align-right {
+    justify-content: flex-end;
+  }
+}
+//! footer
+//no styling needed

package/themes/default/core.scss

@@ -1,102 +1,102 @@
-@use '../variables';
-
-@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
-
-:root {
-  --ard-bg: white;
-  --ard-bg-alt: black;
-  --ard-overlay: black;
-  --ard-overlay-rgb: 0, 0, 0;
-  --ard-bg-filled: #ebebeb;
-  --ard-bg-darker: #f7f7f7;
-  --ard-bg-filled-alt: #333;
-  --ard-text: rgba(0, 0, 0, 100%);
-  --ard-text2: rgba(0, 0, 0, 87%);
-  --ard-text3: rgba(0, 0, 0, 75%);
-  --ard-text-alt: rgba(255, 255, 255, 100%);
-  --ard-text2-alt: rgba(255, 255, 255, 87%);
-  --ard-text3-alt: rgba(255, 255, 255, 75%);
-  --ard-border: rgba(0, 0, 0, 40%);
-  --ard-border-dark: rgba(0, 0, 0, 70%);
-  --ard-border-light: rgba(0, 0, 0, 25%);
-  --ard-detail: rgba(0, 0, 0, 60%);
-  --ard-detail-light: rgba(0, 0, 0, 30%);
-  --ard-detail-ultralight: rgba(0, 0, 0, 12%);
-  --ard-detail-ultralight-solid: rgb(204, 204, 204);
-  --ard-lighten-overlay: rgba(255, 255, 255, 12.5%);
-  --ard-lighten-overlay-strong: rgba(255, 255, 255, 20%);
-  --ard-lighten-overlay-medium: rgba(255, 255, 255, 10%);
-  --ard-lighten-overlay-light: rgba(255, 255, 255, 5%);
-  --ard-darken-overlay: rgba(0, 0, 0, 12.5%);
-  --ard-darken-overlay-strong: rgba(0, 0, 0, 20%);
-  --ard-darken-overlay-medium: rgba(0, 0, 0, 10%);
-  --ard-darken-overlay-light: rgba(0, 0, 0, 5%);
-  --ard-darken-overlay-ultralight: rgba(0, 0, 0, 3%);
-
-  --ard-gold: #ffc107;
-
-  --ard-clear-button-size: 0.9rem;
-  --ard-dropdown-button-size: 0.4rem;
-
-  --ard-primary-50: 234, 235, 243;
-  --ard-primary-100: 159, 167, 228;
-  --ard-primary-300: 78, 99, 219;
-  --ard-primary-500: 36, 56, 185;
-  --ard-primary-700: 27, 42, 128;
-  --ard-primary-900: 19, 28, 87;
-
-  --ard-secondary-50: 229, 172, 243;
-  --ard-secondary-100: 216, 107, 243;
-  --ard-secondary-300: 195, 38, 238;
-  --ard-secondary-500: 145, 13, 182;
-  --ard-secondary-700: 103, 10, 129;
-  --ard-secondary-900: 69, 7, 85;
-
-  --ard-danger-50: 255, 233, 233;
-  --ard-danger-100: 243, 151, 149;
-  --ard-danger-300: 245, 103, 100;
-  --ard-danger-500: 243, 55, 52;
-  --ard-danger-700: 202, 17, 14;
-  --ard-danger-900: 165, 13, 11;
-
-  --ard-warn-50: 248, 224, 192;
-  --ard-warn-100: 247, 196, 129;
-  --ard-warn-300: 240, 169, 77;
-  --ard-warn-500: 224, 140, 38;
-  --ard-warn-700: 173, 101, 13;
-  --ard-warn-900: 117, 69, 7;
-
-  --ard-success-50: 184, 240, 187;
-  --ard-success-100: 124, 230, 129;
-  --ard-success-300: 73, 223, 80;
-  --ard-success-500: 33, 179, 40;
-  --ard-success-700: 27, 131, 33;
-  --ard-success-900: 14, 82, 17;
-
-  --ard-info-50: 187, 210, 241;
-  --ard-info-100: 131, 180, 243;
-  --ard-info-300: 76, 147, 240;
-  --ard-info-500: 19, 113, 236;
-  --ard-info-700: 13, 81, 172;
-  --ard-info-900: 8, 49, 102;
-
-  --ard-box-shadow: 0 0 13px -3px rgba(0, 0, 0, 0.7);
-  --ard-card-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
-
-  --ard-simple-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
-  --ard-simple-shadow2: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
-    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-  --ard-simple-shadow3: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
-
-  --ard-spinner-color: rgba(0, 0, 0, 50%);
-
-  --ard-horizontal-form-field-label-width: 12rem;
-  --ard-horizontal-form-field-label-align: flex-start;
-}
-
-.ard-disabled {
-  pointer-events: none;
-}
+@use '../variables';
+
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+
+:root {
+  --ard-bg: white;
+  --ard-bg-alt: black;
+  --ard-overlay: black;
+  --ard-overlay-rgb: 0, 0, 0;
+  --ard-bg-filled: #ebebeb;
+  --ard-bg-darker: #f7f7f7;
+  --ard-bg-filled-alt: #333;
+  --ard-text: rgba(0, 0, 0, 100%);
+  --ard-text2: rgba(0, 0, 0, 87%);
+  --ard-text3: rgba(0, 0, 0, 75%);
+  --ard-text-alt: rgba(255, 255, 255, 100%);
+  --ard-text2-alt: rgba(255, 255, 255, 87%);
+  --ard-text3-alt: rgba(255, 255, 255, 75%);
+  --ard-border: rgba(0, 0, 0, 40%);
+  --ard-border-dark: rgba(0, 0, 0, 70%);
+  --ard-border-light: rgba(0, 0, 0, 25%);
+  --ard-detail: rgba(0, 0, 0, 60%);
+  --ard-detail-light: rgba(0, 0, 0, 30%);
+  --ard-detail-ultralight: rgba(0, 0, 0, 12%);
+  --ard-detail-ultralight-solid: rgb(204, 204, 204);
+  --ard-lighten-overlay: rgba(255, 255, 255, 12.5%);
+  --ard-lighten-overlay-strong: rgba(255, 255, 255, 20%);
+  --ard-lighten-overlay-medium: rgba(255, 255, 255, 10%);
+  --ard-lighten-overlay-light: rgba(255, 255, 255, 5%);
+  --ard-darken-overlay: rgba(0, 0, 0, 12.5%);
+  --ard-darken-overlay-strong: rgba(0, 0, 0, 20%);
+  --ard-darken-overlay-medium: rgba(0, 0, 0, 10%);
+  --ard-darken-overlay-light: rgba(0, 0, 0, 5%);
+  --ard-darken-overlay-ultralight: rgba(0, 0, 0, 3%);
+
+  --ard-gold: #ffc107;
+
+  --ard-clear-button-size: 0.9rem;
+  --ard-dropdown-button-size: 0.4rem;
+
+  --ard-primary-50: 234, 235, 243;
+  --ard-primary-100: 159, 167, 228;
+  --ard-primary-300: 78, 99, 219;
+  --ard-primary-500: 36, 56, 185;
+  --ard-primary-700: 27, 42, 128;
+  --ard-primary-900: 19, 28, 87;
+
+  --ard-secondary-50: 229, 172, 243;
+  --ard-secondary-100: 216, 107, 243;
+  --ard-secondary-300: 195, 38, 238;
+  --ard-secondary-500: 145, 13, 182;
+  --ard-secondary-700: 103, 10, 129;
+  --ard-secondary-900: 69, 7, 85;
+
+  --ard-danger-50: 255, 233, 233;
+  --ard-danger-100: 243, 151, 149;
+  --ard-danger-300: 245, 103, 100;
+  --ard-danger-500: 243, 55, 52;
+  --ard-danger-700: 202, 17, 14;
+  --ard-danger-900: 165, 13, 11;
+
+  --ard-warn-50: 248, 224, 192;
+  --ard-warn-100: 247, 196, 129;
+  --ard-warn-300: 240, 169, 77;
+  --ard-warn-500: 224, 140, 38;
+  --ard-warn-700: 173, 101, 13;
+  --ard-warn-900: 117, 69, 7;
+
+  --ard-success-50: 184, 240, 187;
+  --ard-success-100: 124, 230, 129;
+  --ard-success-300: 73, 223, 80;
+  --ard-success-500: 33, 179, 40;
+  --ard-success-700: 27, 131, 33;
+  --ard-success-900: 14, 82, 17;
+
+  --ard-info-50: 187, 210, 241;
+  --ard-info-100: 131, 180, 243;
+  --ard-info-300: 76, 147, 240;
+  --ard-info-500: 19, 113, 236;
+  --ard-info-700: 13, 81, 172;
+  --ard-info-900: 8, 49, 102;
+
+  --ard-box-shadow: 0 0 13px -3px rgba(0, 0, 0, 0.7);
+  --ard-card-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+
+  --ard-simple-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  --ard-simple-shadow2: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+  --ard-simple-shadow3: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+
+  --ard-spinner-color: rgba(0, 0, 0, 50%);
+
+  --ard-horizontal-form-field-label-width: 12rem;
+  --ard-horizontal-form-field-label-align: flex-start;
+}
+
+.ard-disabled {
+  pointer-events: none;
+}

package/themes/default/form-field-frame.scss

@@ -53,7 +53,9 @@
   .ard-form-field-overlay {
     background: ARD.$overlay;
     opacity: 0;
-    transition: opacity 0.15s ARD.$timing-fn, background-color 0.15s ARD.$timing-fn;
+    transition:
+      opacity 0.15s ARD.$timing-fn,
+      background-color 0.15s ARD.$timing-fn;
   }
 
   &:hover {

package/themes/default/form-field.scss

@@ -71,7 +71,7 @@ ard-horizontal-form-field {
   justify-content: stretch;
   flex-direction: row;
   gap: 0.5rem;
-  
+
   .ard-form-field__label-container {
     width: var(--ard-horizontal-form-field-label-width, 12rem);
     height: 2.3125rem;
@@ -97,4 +97,4 @@ ard-horizontal-form-field {
   to {
     height: 1.1em;
   }
-}
+}

package/themes/default/inputs/_shared.scss

@@ -1,50 +1,50 @@
-@use '../../variables' as ARD;
-
-/**
- * Should be applied to the first element in the component's template.
- */
-@mixin genericInput() {
-  position: relative;
-  font-family: 'Roboto', sans-serif;
-  display: flex;
-  align-items: center;
-  justify-content: stretch;
-  gap: 0.625em;
-  cursor: text;
-  box-sizing: border-box;
-  font-size: 1rem;
-  line-height: 1.25em;
-
-  .ard-input-container {
-    flex-grow: 1;
-    text-size-adjust: 100%;
-    display: flex;
-    align-items: center;
-
-    .ard-placeholder {
-      font: inherit;
-      opacity: 60%;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      max-width: 100%;
-      pointer-events: none;
-    }
-
-    input {
-      border: none;
-      background: transparent;
-      outline: none;
-      font: inherit;
-      padding: 0;
-      display: block;
-      width: 100%;
-    }
-  }
-  //! compact
-  &.ard-compact {
-    height: 1.5625em;
-    font-size: 0.85em;
-    line-height: 1;
-  }
-}
+@use '../../variables' as ARD;
+
+/**
+ * Should be applied to the first element in the component's template.
+ */
+@mixin genericInput() {
+  position: relative;
+  font-family: 'Roboto', sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  gap: 0.625em;
+  cursor: text;
+  box-sizing: border-box;
+  font-size: 1rem;
+  line-height: 1.25em;
+
+  .ard-input-container {
+    flex-grow: 1;
+    text-size-adjust: 100%;
+    display: flex;
+    align-items: center;
+
+    .ard-placeholder {
+      font: inherit;
+      opacity: 60%;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+      pointer-events: none;
+    }
+
+    input {
+      border: none;
+      background: transparent;
+      outline: none;
+      font: inherit;
+      padding: 0;
+      display: block;
+      width: 100%;
+    }
+  }
+  //! compact
+  &.ard-compact {
+    height: 1.5625em;
+    font-size: 0.85em;
+    line-height: 1;
+  }
+}

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

@@ -1,8 +1,7 @@
 @use './shared' as S;
 @use '../../variables' as ARD;
 
-ard-date-input
-.ard-date-input {
+ard-date-input .ard-date-input {
   @include S.genericInput();
   padding-left: 0.375rem;
 
@@ -13,8 +12,8 @@ ard-date-input
     position: absolute;
   }
   .ard-date-input__input-container {
-      position: absolute;
-      inset: 0;
+    position: absolute;
+    inset: 0;
 
     &.ard-date-input__input-container-hidden {
       position: absolute;
@@ -29,4 +28,4 @@ ard-date-input
       padding: 0 2.625rem 0 0.375rem;
     }
   }
-}
+}

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

@@ -39,7 +39,9 @@ ard-digit-input {
       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;
+      transition:
+        border-color 0.15s ARD.$timing-fn,
+        background-color 0.15s ARD.$timing-fn;
 
       &::placeholder {
         color: ARD.$text3;