@ardium-ui/ui 5.0.0-alpha.91 → 5.0.0-alpha.93

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));
+    }
+  }
 }