@ardium-ui/ui 5.0.0-alpha.92 → 5.0.0-alpha.94

package/themes/default/chips.scss

@@ -39,6 +39,7 @@
     --ard-chip-transition: 0.15s ease;
     --ard-chip-disabled-opacity: 60%;
     --ard-chip-disabled-selected-opacity: 40%;
+    // --ard-chip-readonly-cursor: ;
   }
 
   //! general css
@@ -77,15 +78,17 @@
       display: flex;
       align-items: center;
 
-      &:hover,
-      &:focus {
-        > .ard-focus-overlay {
-          opacity: var(--ard-chip-selectable-hover-overlay-opacity, 7.5%);
+      :not(.ard-disabled):not(.ard-readonly) > & {
+        &:hover,
+        &:focus {
+          > .ard-focus-overlay {
+            opacity: var(--ard-chip-selectable-hover-overlay-opacity, 7.5%);
+          }
         }
-      }
-      &:active {
-        > .ard-focus-overlay {
-          opacity: var(--ard-chip-selectable-active-overlay-opacity, 20%);
+        &:active {
+          > .ard-focus-overlay {
+            opacity: var(--ard-chip-selectable-active-overlay-opacity, 20%);
+          }
         }
       }
 
@@ -141,15 +144,17 @@
           opacity: 0;
           background: var(--ard-cmpcl--bg-colored);
         }
-        &:hover,
-        &:focus {
-          > .ard-focus-overlay {
-            opacity: var(--ard-chip-outlined-hover-overlay-opacity, 4%);
+        :not(.ard-disabled):not(.ard-readonly) > & {
+          &:hover,
+          &:focus {
+            > .ard-focus-overlay {
+              opacity: var(--ard-chip-outlined-hover-overlay-opacity, 4%);
+            }
           }
-        }
-        &:active {
-          > .ard-focus-overlay {
-            opacity: var(--ard-chip-outlined-active-overlay-opacity, 10%);
+          &:active {
+            > .ard-focus-overlay {
+              opacity: var(--ard-chip-outlined-active-overlay-opacity, 10%);
+            }
           }
         }
 
@@ -160,24 +165,26 @@
           > .ard-focus-overlay {
             opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
           }
-          &:hover {
-            > .ard-focus-overlay {
-              opacity: var(--ard-chip-outlined-selected-hover-overlay-opacity, 17%);
+          :not(.ard-disabled):not(.ard-readonly) > & {
+            &:hover {
+              > .ard-focus-overlay {
+                opacity: var(--ard-chip-outlined-selected-hover-overlay-opacity, 17%);
+              }
             }
-          }
-          &:focus {
-            > .ard-focus-overlay {
-              opacity: var(--ard-chip-outlined-selected-focus-overlay-opacity, 0%);
+            &:focus {
+              > .ard-focus-overlay {
+                opacity: var(--ard-chip-outlined-selected-focus-overlay-opacity, 0%);
+              }
             }
-          }
-          &:focus-visible {
-            > .ard-focus-overlay {
-              opacity: var(--ard-chip-outlined-selected-focus-visible-overlay-opacity, 17%);
+            &:focus-visible {
+              > .ard-focus-overlay {
+                opacity: var(--ard-chip-outlined-selected-focus-visible-overlay-opacity, 17%);
+              }
             }
-          }
-          &:active {
-            > .ard-focus-overlay {
-              opacity: var(--ard-chip-outlined-selected-active-overlay-opacity, 22%);
+            &:active {
+              > .ard-focus-overlay {
+                opacity: var(--ard-chip-outlined-selected-active-overlay-opacity, 22%);
+              }
             }
           }
         }
@@ -247,14 +254,16 @@
     }
   }
   //! disabled state
-  .ard-disabled {
-    .ard-chip-wrapper {
-      pointer-events: none;
-      opacity: var(--ard-chip-disabled-opacity, 60%);
+  .ard-disabled > .ard-chip-wrapper {
+    pointer-events: none;
+    opacity: var(--ard-chip-disabled-opacity, 60%);
 
-      &.ard-chip-selected {
-        opacity: var(--ard-chip-disabled-selected-opacity, 40%);
-      }
+    &.ard-chip-selected {
+      opacity: var(--ard-chip-disabled-selected-opacity, 40%);
     }
   }
+  //! readonly state
+  .ard-readonly > .ard-chip-wrapper {
+    cursor: var(--ard-chip-readonly-cursor, var(--ard-readonly-cursor, default));
+  }
 }

package/themes/default/core.scss

@@ -1,8 +1,5 @@
 @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');
-
 @layer ard-ui {
   :root {
     --ard-bg: white;
@@ -39,6 +36,8 @@
     --ard-font-family: 'Roboto', sans-serif;
     --ard-font-family-mono: monospace;
 
+    --ard-readonly-cursor: default;
+
     --ard-gold: #ffc107;
 
     --ard-clear-button-size: 0.9rem;

package/themes/default/inputs/_shared.scss

@@ -22,7 +22,8 @@
   $padding-left-compact,
   $color,
   $placeholder-color,
-  $placeholder-opacity
+  $placeholder-opacity,
+  $readonly-cursor
 ) {
   height: $height;
   position: relative;
@@ -87,4 +88,8 @@
     padding-top: $padding-top-compact;
     padding-bottom: $padding-bottom-compact;
   }
+  //! readonly
+  .ard-readonly > & {
+    cursor: $readonly-cursor;
+  }
 }

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

@@ -42,6 +42,7 @@
     // --ard-autocomplete-input-selected-background: ;
     --ard-autocomplete-input-selected-font-weight: 500;
     --ard-autocomplete-input-disabled-opacity: 50%;
+    // --ard-autocomplete-input-readonly-cursor: ;
   }
 
   .ard-autocomplete-input {
@@ -64,7 +65,8 @@
       var(--ard-autocomplete-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
       var(--ard-autocomplete-input-color, #{ARD.$text}),
       var(--ard-autocomplete-input-placeholder-color, #{ARD.$text}),
-      var(--ard-autocomplete-input-placeholder-opacity, 60%)
+      var(--ard-autocomplete-input-placeholder-opacity, 60%),
+      var(--ard-autocomplete-input-readonly-cursor, var(--ard-readonly-cursor, default))
     );
     min-width: var(--ard-autocomplete-input-min-width, 10rem);
     max-width: var(--ard-autocomplete-input-max-width, 100%);

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

@@ -24,6 +24,7 @@
     // --ard-date-input-color: ;
     // --ard-date-input-placeholder-color: ;
     --ard-date-input-placeholder-opacity: 60%;
+    // --ard-date-input-readonly-cursor: ;
 
     --ard-date-input-multipage-gap: 0;
   }
@@ -50,7 +51,8 @@
       var(--ard-date-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
       var(--ard-date-input-color, #{ARD.$text}),
       var(--ard-date-input-placeholder-color, #{ARD.$text}),
-      var(--ard-date-input-placeholder-opacity, 60%)
+      var(--ard-date-input-placeholder-opacity, 60%),
+      var(--ard-date-input-readonly-cursor, var(--ard-readonly-cursor, default))
     );
     display: grid;
     grid-template-columns: 1fr max-content;

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

@@ -22,6 +22,7 @@
     // --ard-digit-input-error-background-color: ;
     // --ard-digit-input-error-border-color: ;
     --ard-digit-input-disabled-opacity: 50%;
+    // --ard-digit-input-readonly-cursor: ;
   }
 
   ard-digit-input {
@@ -125,4 +126,13 @@
       pointer-events: none;
     }
   }
+  .ard-readonly {
+    > .ard-digit-input {
+      cursor: var(--ard-digit-input-readonly-cursor, var(--ard-readonly-cursor, default));
+
+      .ard-digit-input__input {
+        outline: none;
+      }
+    }
+  }
 }

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

@@ -27,6 +27,7 @@
     // --ard-file-input-color: ;
     // --ard-file-input-placeholder-color: ;
     --ard-file-input-placeholder-opacity: 60%;
+    // --ard-file-input-readonly-cursor: ;
 
     --ard-file-input-min-width: 10rem;
     --ard-file-input-max-width: 100%;
@@ -78,7 +79,8 @@
       var(--ard-file-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
       var(--ard-file-input-color, #{ARD.$text}),
       var(--ard-file-input-placeholder-color, #{ARD.$text}),
-      var(--ard-file-input-placeholder-opacity, 60%)
+      var(--ard-file-input-placeholder-opacity, 60%),
+      var(--ard-file-input-readonly-cursor, var(--ard-readonly-cursor, default))
     );
     @include CM.typeColors();
     min-width: var(--ard-file-input-min-width, 10rem);

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

@@ -26,6 +26,7 @@
     // --ard-hex-input-color: ;
     // --ard-hex-input-placeholder-color: ;
     --ard-hex-input-placeholder-opacity: 60%;
+    // --ard-hex-input-readonly-cursor: ;
 
     --ard-hex-input-min-width: 10rem;
     --ard-hex-input-max-width: 100%;
@@ -53,7 +54,8 @@
       var(--ard-hex-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
       var(--ard-hex-input-color, #{ARD.$text}),
       var(--ard-hex-input-placeholder-color, #{ARD.$text}),
-      var(--ard-hex-input-placeholder-opacity, 60%)
+      var(--ard-hex-input-placeholder-opacity, 60%),
+      var(--ard-hex-input-readonly-cursor, var(--ard-readonly-cursor, default))
     );
     min-width: var(--ard-hex-input-min-width, 10rem);
     max-width: var(--ard-hex-input-max-width, 100%);

package/themes/default/inputs/input.scss

@@ -26,6 +26,7 @@
     // --ard-input-color: ;
     // --ard-input-placeholder-color: ;
     --ard-input-placeholder-opacity: 60%;
+    // --ard-input-readonly-cursor: ;
 
     --ard-input-min-width: 10rem;
     --ard-input-max-width: 100%;
@@ -51,7 +52,8 @@
       var(--ard-input-padding-left-compact, var(--ard-form-field-padding-left-compact, 0.375rem)),
       var(--ard-input-color, #{ARD.$text}),
       var(--ard-input-placeholder-color, #{ARD.$text}),
-      var(--ard-input-placeholder-opacity, 60%)
+      var(--ard-input-placeholder-opacity, 60%),
+      var(--ard-input-readonly-cursor, var(--ard-readonly-cursor, default))
     );
     min-width: var(--ard-input-min-width, 10rem);
     max-width: var(--ard-input-max-width, 100%);

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

@@ -28,6 +28,7 @@
     --ard-number-input-disabled-opacity: 50%;
     // --ard-number-input-width: ;
     --ard-number-input-rounded-border-radius: 8px;
+    // --ard-number-input-readonly-cursor: ;
   }
 
   ard-number-input {
@@ -54,7 +55,8 @@
       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%)
+      var(--ard-number-input-placeholder-opacity, 60%),
+      var(--ard-number-input-readonly-cursor, var(--ard-readonly-cursor, default))
     );
     @include defaultMixins.formAppearances();
     gap: 0;
@@ -191,16 +193,24 @@
     }
   }
 
-  .ard-disabled {
+  .ard-disabled,
+  .ard-readonly {
     > .ard-number-input {
-      pointer-events: none;
-      opacity: var(--ard-number-input-disabled-opacity, 50%);
-
       .ard-button .ard-focus-overlay {
         opacity: 0;
       }
-
+    }
+  }
+  .ard-disabled {
+    > .ard-number-input {
+      pointer-events: none;
+      opacity: var(--ard-number-input-disabled-opacity, 50%);
       background: ARD.$bg-f;
     }
   }
+  .ard-readonly {
+    > .ard-number-input {
+      cursor: var(--ard-number-input-readonly-cursor, var(--ard-readonly-cursor, default));
+    }
+  }
 }

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

@@ -26,6 +26,7 @@
     // --ard-password-input-color: ;
     // --ard-password-input-placeholder-color: ;
     --ard-password-input-placeholder-opacity: 60%;
+    // --ard-password-input-readonly-cursor: ;
 
     --ard-password-input-min-width: 10rem;
     --ard-password-input-max-width: 100%;
@@ -65,7 +66,8 @@
       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%)
+      var(--ard-password-input-placeholder-opacity, 60%),
+      var(--ard-password-input-readonly-cursor, var(--ard-readonly-cursor, default))
     );
     min-width: var(--ard-password-input-min-width, 10rem);
     max-width: var(--ard-password-input-max-width, 100%);

package/themes/default/radio.scss

@@ -20,6 +20,7 @@
     --ard-radio-active-overlay-opacity: 25%;
     --ard-radio-transition-duration: 0.2s;
     --ard-radio-disabled-opacity: 50%;
+    // --ard-radio-readonly-cursor: ;
   }
 
   ard-radio-group {
@@ -132,4 +133,22 @@
       user-select: none;
     }
   }
+  .ard-readonly {
+    .ard-radio {
+      cursor: var(--ard-radio-readonly-cursor, var(--ard-readonly-cursor, default));
+
+      > .ard-radio-circles {
+        pointer-events: none;
+
+        .ard-focus-overlay {
+          display: none;
+        }
+      }
+      &:focus-visible {
+        > .ard-radio-circles > .ard-focus-overlay {
+          display: block;
+        }
+      }
+    }
+  }
 }

package/themes/default/segment.scss

@@ -25,6 +25,7 @@
     --ard-segment-option-active-keyboard-bg-opacity: 34%;
     --ard-segment-option-selected-bg-opacity: 16%;
     // --ard-segment-border-color: ;
+    // --ard-segment-readonly-cursor: ;
   }
 
   .ard-segment-container {
@@ -101,16 +102,18 @@
           opacity: var(--ard-segment-option-highlighted-bg-opacity, 4%);
         }
       }
-      &:active {
-        .ard-focus-overlay {
-          opacity: var(--ard-segment-option-active-bg-opacity, 12%);
-        }
-      }
       &.ard-option-selected {
         .ard-focus-overlay {
           opacity: var(--ard-segment-option-selected-bg-opacity, 16%);
         }
       }
+      ard-segment:not(.ard-disabled):not(.ard-readonly) & {
+        &:active {
+          .ard-focus-overlay {
+            opacity: var(--ard-segment-option-active-bg-opacity, 12%);
+          }
+        }
+      }
     }
     &.ard-using-keyboard {
       .ard-segment-option {
@@ -119,9 +122,11 @@
             opacity: var(--ard-segment-option-highlighted-keyboard-bg-opacity, 28%);
           }
         }
-        &:active {
-          .ard-focus-overlay {
-            opacity: var(--ard-segment-option-active-keyboard-bg-opacity, 34%);
+        ard-segment:not(.ard-disabled):not(.ard-readonly) & {
+          &:active {
+            .ard-focus-overlay {
+              opacity: var(--ard-segment-option-active-keyboard-bg-opacity, 34%);
+            }
           }
         }
       }
@@ -345,26 +350,34 @@
         justify-content: center;
       }
     }
+  }
+
+  //! disabled styling
+  .ard-disabled > .ard-segment-container {
+    pointer-events: none;
+    opacity: var(--ard-segment-option-disabled-opacity, 50%);
 
-    //! disabled styling
-    &.ard-disabled {
-      pointer-events: none;
-      opacity: var(--ard-segment-option-disabled-opacity, 50%);
+    .ard-focus-overlay {
+      opacity: 10%;
+    }
 
+    //edge case for no coloring
+    &.ard-color-none {
+      .ard-button-icon,
+      .ard-button-content {
+        opacity: calc(var(--ard-segment-option-disabled-opacity, 50%) * 1.2);
+      }
       .ard-focus-overlay {
-        opacity: 10%;
+        background: var(--ard-cmpcl--overlay);
       }
+    }
+  }
+  //! readonly styling
+  .ard-readonly > .ard-segment-container {
+    cursor: var(--ard-segment-readonly-cursor, var(--ard-readonly-cursor, default));
 
-      //edge case for no coloring
-      &.ard-color-none {
-        .ard-button-icon,
-        .ard-button-content {
-          opacity: calc(var(--ard-segment-option-disabled-opacity, 50%) * 1.2);
-        }
-        .ard-focus-overlay {
-          background: var(--ard-cmpcl--overlay);
-        }
-      }
+    .ard-segment-row .ard-segment-option {
+      cursor: inherit;
     }
   }
 }

package/themes/default/slider.scss

@@ -41,6 +41,7 @@
     --ard-slider-label-font-weight: 500;
     --ard-slider-label-arrow-size: 0.375em;
     --ard-slider-label-offset: 0.5em;
+    // --ard-slider-readonly-cursor: ;
   }
 
   .ard-slider-container-master,
@@ -216,7 +217,7 @@
 
         &::before {
           bottom: 0;
-          border-top-color: var(--ard-slider-label-bg);
+          border-top-color: var(--ard-slider-label-b, var(--ard-text3));
           transform: translate(-50%, 100%);
         }
       }
@@ -228,7 +229,7 @@
 
         &::before {
           top: 0;
-          border-bottom-color: var(--ard-slider-label-bg);
+          border-bottom-color: var(--ard-slider-label-bg, var(--ard-text3));
           transform: translate(-50%, -100%);
         }
       }
@@ -264,4 +265,23 @@
       pointer-events: none !important;
     }
   }
+  .ard-disabled,
+  .ard-readonly {
+    .ard-slider-container-master,
+    .ard-range-slider-container-master {
+      cursor: var(--ard-slider-readonly-cursor, var(--ard-readonly-cursor, default));
+
+      .ard-slider-container {
+        cursor: inherit;
+
+        .ard-slider-handle {
+          cursor: inherit;
+
+          .ard-focus-overlay {
+            display: none;
+          }
+        }
+      }
+    }
+  }
 }

package/themes/default/stars.scss

@@ -12,12 +12,15 @@
     --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-focus-visible-overlay-opacity: 30%;
     --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-button-readonly-cursor: ;
+    // --ard-rating-input-readonly-cursor: ;
   }
 
   .ard-star,
@@ -81,6 +84,7 @@
       background: currentColor;
     }
     @include defaultMixins.focus-overlay-scale-addon();
+
     &:hover {
       .ard-focus-overlay {
         opacity: var(--ard-star-button-hover-overlay-opacity, 10%);
@@ -93,7 +97,7 @@
     }
     &:focus-visible {
       .ard-focus-overlay {
-        opacity: var(--ard-star-button-focus-visible-overlay-opacity, 10%);
+        opacity: var(--ard-star-button-focus-visible-overlay-opacity, 30%);
       }
     }
     &:active {
@@ -113,4 +117,17 @@
       opacity: var(--ard-rating-input-disabled-opacity, 50%);
     }
   }
+  //! readonly state for star-button and rating-input
+  .ard-readonly {
+    > .ard-star-button {
+      cursor: var(--ard-star-button-readonly-cursor, var(--ard-readonly-cursor, default));
+
+      .ard-focus-overlay {
+        display: none;
+      }
+    }
+    > .ard-rating-input {
+      cursor: var(--ard-rating-input-readonly-cursor, var(--ard-readonly-cursor, default));
+    }
+  }
 }