ngx-strata 0.4.5 → 0.5.0

package/assets/styles/components/avatar.scss

@@ -3,12 +3,14 @@ st-avatar {
   --st-avatar-bg-color: var(--st-color-bg-subtle);
   --st-avatar-text-color: var(--st-color-text-primary);
   --st-avatar-object-fit: cover;
+  --st-avatar-border-radius: var(--st-border-radius-full);
+  --st-avatar-radius-rounded: var(--st-border-radius-md);
 
   z-index: var(--z, 0);
   transition: z-index 0s;
   /* avoids flicker */
   background-color: var(--st-avatar-bg-color);
-  border-radius: var(--avatar-size);
+  border-radius: var(--st-avatar-border-radius);
   overflow: hidden;
   display: inline-flex;
   align-items: center;
@@ -39,7 +41,37 @@ st-avatar {
     overflow: visible;
 
     img {
-      border-radius: var(--avatar-size);
+      border-radius: var(--st-avatar-border-radius);
+    }
+  }
+
+  &.rounded {
+    --st-avatar-border-radius: var(--st-avatar-radius-rounded);
+
+    > st-badge:not(.st-badge-placement-inline) {
+      &.st-badge-placement-bottom-right {
+        bottom: 0;
+        right: 0;
+        transform: translate(30%, 30%);
+      }
+
+      &.st-badge-placement-top-right {
+        top: 0;
+        right: 0;
+        transform: translate(30%, -30%);
+      }
+
+      &.st-badge-placement-bottom-left {
+        bottom: 0;
+        left: 0;
+        transform: translate(-30%, 30%);
+      }
+
+      &.st-badge-placement-top-left {
+        top: 0;
+        left: 0;
+        transform: translate(-30%, -30%);
+      }
     }
   }
 
@@ -101,6 +133,7 @@ st-avatar.st-theme-brand {
 
 st-avatar-stack.xs>st-avatar {
   --avatar-size: 20px;
+  --st-avatar-radius-rounded: var(--st-border-radius-xs);
 
   > span {
     font-size: 0.6rem !important;
@@ -109,6 +142,7 @@ st-avatar-stack.xs>st-avatar {
 
 st-avatar.xs {
   --avatar-size: 20px;
+  --st-avatar-radius-rounded: var(--st-border-radius-xs);
 
   > span {
     font-size: 0.6rem;
@@ -117,6 +151,7 @@ st-avatar.xs {
 
 st-avatar-stack.sm>st-avatar {
   --avatar-size: 32px;
+  --st-avatar-radius-rounded: var(--st-border-radius-sm);
 
   > span {
     font-size: 0.8rem !important;
@@ -125,6 +160,7 @@ st-avatar-stack.sm>st-avatar {
 
 st-avatar.sm {
   --avatar-size: 32px;
+  --st-avatar-radius-rounded: var(--st-border-radius-sm);
 
   > span {
     font-size: 0.8rem;
@@ -133,6 +169,7 @@ st-avatar.sm {
 
 st-avatar-stack.md>st-avatar {
   --avatar-size: 48px;
+  --st-avatar-radius-rounded: var(--st-border-radius-md);
 
   > span {
     font-size: 1rem !important;
@@ -141,6 +178,7 @@ st-avatar-stack.md>st-avatar {
 
 st-avatar.md {
   --avatar-size: 48px;
+  --st-avatar-radius-rounded: var(--st-border-radius-md);
 
   > span {
     font-size: 1rem;
@@ -149,6 +187,7 @@ st-avatar.md {
 
 st-avatar-stack.lg>st-avatar {
   --avatar-size: 72px;
+  --st-avatar-radius-rounded: var(--st-border-radius-lg);
 
   > span {
     font-size: 1.6rem !important;
@@ -157,6 +196,7 @@ st-avatar-stack.lg>st-avatar {
 
 st-avatar.lg {
   --avatar-size: 72px;
+  --st-avatar-radius-rounded: var(--st-border-radius-lg);
 
   > span {
     font-size: 1.6rem;

package/assets/styles/components/checkbox.scss

@@ -3,12 +3,21 @@ st-checkbox {
   --st-checkbox-checked-bg-hover-color: var(--st-color-accent-hover);
   --st-checkbox-checked-icon-color: var(--st-color-text-on-accent);
   --st-checkbox-border-radius: var(--st-border-radius-sm);
+  --st-checkbox-border-color: var(--st-border);
 
   user-select: none;
   display: inline-flex;
-  align-items: center;
+  flex-direction: column;
+  align-items: flex-start;
   min-height: var(--st-interactive-element-height-md);
-  gap: var(--st-size-xxs);
+
+  .st-checkbox-row {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--st-size-xxs);
+    min-height: var(--st-interactive-element-height-md);
+  }
+
   input {
     position: absolute;
     opacity: 0;
@@ -23,7 +32,7 @@ st-checkbox {
 
   input:checked + .checkbox-visual {
     background-color: var(--st-checkbox-checked-bg-color);
-    border: none;
+    border-color: var(--st-checkbox-checked-bg-color);
     svg {
       justify-self: center;
       width: 100%;
@@ -34,7 +43,6 @@ st-checkbox {
 
   input:focus + .checkbox-visual {
     outline: 1px solid var(--st-color-accent-default);
-
     outline-offset: 2px;
   }
 
@@ -45,7 +53,7 @@ st-checkbox {
     max-width: var(--st-selection-control-size);
     max-height: var(--st-selection-control-size);
     background-color: var(--st-color-bg-raised);
-    border: 1px solid var(--st-border);
+    border: 1px solid var(--st-checkbox-border-color);
     border-radius: var(--st-checkbox-border-radius);
     color: var(--st-checkbox-checked-icon-color);
     padding: 2px;
@@ -60,6 +68,7 @@ st-checkbox {
       visibility: hidden;
     }
   }
+
   &:hover {
     cursor: pointer;
     .checkbox-visual {
@@ -71,6 +80,58 @@ st-checkbox {
     }
   }
 
+  &.st-state-error,
+  &.st-error {
+    --st-checkbox-border-color: var(--st-color-feedback-error-default);
+    --st-checkbox-checked-bg-color: var(--st-color-feedback-error-default);
+    --st-checkbox-checked-bg-hover-color: var(--st-color-feedback-error-hover, var(--st-color-feedback-error-default));
+
+    input:focus + .checkbox-visual {
+      outline-color: var(--st-color-feedback-error-default);
+    }
+  }
+
+  &.st-state-success {
+    --st-checkbox-border-color: var(--st-color-feedback-success-default);
+    --st-checkbox-checked-bg-color: var(--st-color-feedback-success-default);
+    --st-checkbox-checked-bg-hover-color: var(--st-color-feedback-success-hover, var(--st-color-feedback-success-default));
+
+    input:focus + .checkbox-visual {
+      outline-color: var(--st-color-feedback-success-default);
+    }
+  }
+
+  &.st-state-warning {
+    --st-checkbox-border-color: var(--st-color-feedback-warning-default);
+    --st-checkbox-checked-bg-color: var(--st-color-feedback-warning-default);
+    --st-checkbox-checked-bg-hover-color: var(--st-color-feedback-warning-hover, var(--st-color-feedback-warning-default));
+    --st-checkbox-checked-icon-color: var(--st-color-feedback-warning-text);
+
+    input:focus + .checkbox-visual {
+      outline-color: var(--st-color-feedback-warning-default);
+    }
+  }
+
+  .st-checkbox-message {
+    margin-top: calc(var(--st-space-1) * -1 + 2px);
+    margin-left: calc(var(--st-selection-control-size) + var(--st-size-xxs));
+    font-size: var(--st-font-sm, 12px);
+    color: var(--st-color-text-secondary);
+    line-height: 1.25;
+
+    &.st-message-error {
+      color: var(--st-color-feedback-error-text);
+    }
+
+    &.st-message-success {
+      color: var(--st-color-feedback-success-text);
+    }
+
+    &.st-message-warning {
+      color: var(--st-color-feedback-warning-text);
+    }
+  }
+
   &[data-disabled="true"],
   &.disabled {
     cursor: not-allowed;

package/assets/styles/components/file-upload.scss

@@ -109,8 +109,60 @@ st-file-upload {
     color: var(--st-file-upload-text);
   }
 
+  &.st-state-error,
+  &.st-error {
+    --st-file-upload-border: var(--st-color-feedback-error-default);
+    --st-file-upload-hover-border: var(--st-color-feedback-error-hover, var(--st-color-feedback-error-default));
+
+    &:hover:not(.st-disabled) .st-file-upload-icon {
+      color: var(--st-color-feedback-error-default);
+    }
+
+    &:focus-visible:not(.st-disabled) {
+      outline-color: var(--st-color-feedback-error-default);
+    }
+  }
+
+  &.st-state-success {
+    --st-file-upload-border: var(--st-color-feedback-success-default);
+    --st-file-upload-hover-border: var(--st-color-feedback-success-hover, var(--st-color-feedback-success-default));
+
+    &:hover:not(.st-disabled) .st-file-upload-icon {
+      color: var(--st-color-feedback-success-default);
+    }
+
+    &:focus-visible:not(.st-disabled) {
+      outline-color: var(--st-color-feedback-success-default);
+    }
+  }
+
+  &.st-state-warning {
+    --st-file-upload-border: var(--st-color-feedback-warning-default);
+    --st-file-upload-hover-border: var(--st-color-feedback-warning-hover, var(--st-color-feedback-warning-default));
+
+    &:hover:not(.st-disabled) .st-file-upload-icon {
+      color: var(--st-color-feedback-warning-default);
+    }
+
+    &:focus-visible:not(.st-disabled) {
+      outline-color: var(--st-color-feedback-warning-default);
+    }
+  }
+
   .st-file-upload-hint {
     font-size: 0.8rem;
     color: var(--st-file-upload-hint);
+
+    &.st-message-error {
+      color: var(--st-color-feedback-error-text);
+    }
+
+    &.st-message-success {
+      color: var(--st-color-feedback-success-text);
+    }
+
+    &.st-message-warning {
+      color: var(--st-color-feedback-warning-text);
+    }
   }
 }

package/assets/styles/components/input-field.scss

@@ -15,6 +15,10 @@ st-input-field {
   flex-direction: column;
   box-sizing: border-box;
 
+  label {
+    margin-bottom: var(--st-space-2);
+  }
+
   &.st-size-sm {
     --st-input-field-height: var(--st-interactive-element-height-sm);
     --st-input-field-font-size: var(--st-font-sm);
@@ -62,11 +66,39 @@ st-input-field {
     }
     &:has(textarea) {
       height: auto;
+      flex-direction: column;
+      align-items: stretch;
+
+      &:has(.affix:last-of-type:not(:empty)) textarea {
+        padding-bottom: var(--st-space-1);
+      }
+
+      .affix {
+        &:first-of-type {
+          padding-left: var(--st-input-field-padding-x);
+          padding-top: var(--st-space-1);
+          padding-bottom: 0;
+          align-self: flex-start;
+        }
+
+        &:last-of-type {
+          align-self: flex-end;
+          padding-left: var(--st-input-field-padding-x);
+          padding-right: var(--st-input-field-padding-x);
+          padding-bottom: var(--st-space-2);
+          padding-top: 0;
+
+          &:has(button, st-button-group) {
+            padding-right: var(--st-space-1);
+            padding-bottom: var(--st-space-1);
+          }
+        }
+      }
     }
   }
 
   .affix {
-    width: min-content;
+    width: auto;
     display: flex;
     justify-items: center;
     align-items: center;
@@ -80,10 +112,18 @@ st-input-field {
 
     &:first-of-type {
       padding-right: 0;
+
+      &:has(button, st-button-group) {
+        padding-left: var(--st-space-1);
+      }
     }
 
     &:last-of-type {
       padding-left: 0;
+
+      &:has(button, st-button-group) {
+        padding-right: var(--st-space-1);
+      }
     }
   }
 
@@ -115,19 +155,64 @@ st-input-field {
     }
   }
 
+  &.st-state-error,
+  &.st-error {
+    --st-input-field-border-color: var(--st-color-feedback-error-default);
+
+    .st-input-wrapper:focus-within {
+      outline-color: var(--st-color-feedback-error-default);
+    }
+  }
+
+  &.st-state-success {
+    --st-input-field-border-color: var(--st-color-feedback-success-default);
+
+    .st-input-wrapper:focus-within {
+      outline-color: var(--st-color-feedback-success-default);
+    }
+  }
+
+  &.st-state-warning {
+    --st-input-field-border-color: var(--st-color-feedback-warning-default);
+
+    .st-input-wrapper:focus-within {
+      outline-color: var(--st-color-feedback-warning-default);
+    }
+  }
+
   .st-input-field-footer {
     display: flex;
-    justify-content: flex-end;
-    align-items: center;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--st-space-2);
     margin-top: var(--st-space-1);
     line-height: 1.25;
   }
 
+  .st-input-field-message {
+    font-size: var(--st-input-field-counter-font-size);
+    color: var(--st-color-text-secondary);
+
+    &.st-message-error {
+      color: var(--st-color-feedback-error-text);
+    }
+
+    &.st-message-success {
+      color: var(--st-color-feedback-success-text);
+    }
+
+    &.st-message-warning {
+      color: var(--st-color-feedback-warning-text);
+    }
+  }
+
   .st-input-field-counter {
+    margin-left: auto;
     font-size: var(--st-input-field-counter-font-size);
     color: var(--st-input-field-counter-color);
     font-variant-numeric: tabular-nums;
     user-select: none;
+    white-space: nowrap;
   }
 
   &.st-disabled,

package/assets/styles/components/radio.scss

@@ -1,13 +1,38 @@
 st-radio-group {
   display: flex;
   flex-direction: column;
-  gap: var(--st-size-xs);
+  gap: var(--st-size-xxs);
+
+  .st-radio-group-radios {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-size-xs);
+  }
+
+  .st-radio-message {
+    margin-top: var(--st-space-1);
+    font-size: var(--st-font-sm, 12px);
+    color: var(--st-color-text-secondary);
+    line-height: 1.25;
+
+    &.st-message-error {
+      color: var(--st-color-feedback-error-text);
+    }
+
+    &.st-message-success {
+      color: var(--st-color-feedback-success-text);
+    }
+
+    &.st-message-warning {
+      color: var(--st-color-feedback-warning-text);
+    }
+  }
 }
 
 st-radio {
   --st-radio-checked-bg-color: var(--st-color-accent-default);
   --st-radio-checked-bg-hover-color: var(--st-color-accent-hover);
-
+  --st-radio-border-color: var(--st-border);
 
   user-select: none;
   display: inline-flex;
@@ -34,8 +59,7 @@ st-radio {
     min-width: var(--st-selection-control-size);
     min-height: var(--st-selection-control-size);
     background-color: var(--st-color-bg-raised);
-
-    border: 1px solid var(--st-border);
+    border: 1px solid var(--st-radio-border-color);
     border-radius: 50%;
     display: grid;
     place-items: center;
@@ -99,4 +123,35 @@ st-radio {
       }
     }
   }
+
+  &.st-state-error,
+  &.st-error {
+    --st-radio-border-color: var(--st-color-feedback-error-default);
+    --st-radio-checked-bg-color: var(--st-color-feedback-error-default);
+    --st-radio-checked-bg-hover-color: var(--st-color-feedback-error-hover, var(--st-color-feedback-error-default));
+
+    input:focus + .radio-visual {
+      outline-color: var(--st-color-feedback-error-default);
+    }
+  }
+
+  &.st-state-success {
+    --st-radio-border-color: var(--st-color-feedback-success-default);
+    --st-radio-checked-bg-color: var(--st-color-feedback-success-default);
+    --st-radio-checked-bg-hover-color: var(--st-color-feedback-success-hover, var(--st-color-feedback-success-default));
+
+    input:focus + .radio-visual {
+      outline-color: var(--st-color-feedback-success-default);
+    }
+  }
+
+  &.st-state-warning {
+    --st-radio-border-color: var(--st-color-feedback-warning-default);
+    --st-radio-checked-bg-color: var(--st-color-feedback-warning-default);
+    --st-radio-checked-bg-hover-color: var(--st-color-feedback-warning-hover, var(--st-color-feedback-warning-default));
+
+    input:focus + .radio-visual {
+      outline-color: var(--st-color-feedback-warning-default);
+    }
+  }
 }

package/assets/styles/components/segmented-control.scss

@@ -4,29 +4,27 @@ st-segmented-control {
   --st-segmented-control-font-size: 14px;
   --st-segmented-control-padding-x: var(--st-size-xxs);
   --st-segmented-control-border-radius: var(--st-border-radius-md);
+  --st-segmented-control-border-color: transparent;
+  --st-segmented-control-error-border: var(--st-color-feedback-error-default);
+  --st-segmented-control-success-border: var(--st-color-feedback-success-default);
+  --st-segmented-control-warning-border: var(--st-color-feedback-warning-default);
 
   display: inline-flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  overflow-x: auto;
+  flex-direction: column;
   width: fit-content;
   max-width: 100%;
-  min-width: 0;
-  position: relative;
-  border-radius: var(--st-segmented-control-border-radius);
   box-sizing: border-box;
-  background-color: var(--st-color-bg-raised);
-  height: var(--st-segmented-control-height);
-  padding: 4px;
-  gap: 4px;
 
   &.st-size-sm {
     --st-segmented-control-height: var(--st-interactive-element-height-sm);
     --st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 4px);
     --st-segmented-control-font-size: 12px;
     --st-segmented-control-padding-x: var(--st-size-xxxs);
-    padding: 2px;
-    gap: 2px;
+
+    .st-segmented-control-track {
+      padding: 2px;
+      gap: 2px;
+    }
   }
 
   &.st-size-md {
@@ -34,8 +32,11 @@ st-segmented-control {
     --st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);
     --st-segmented-control-font-size: 14px;
     --st-segmented-control-padding-x: var(--st-size-xxs);
-    padding: 4px;
-    gap: 4px;
+
+    .st-segmented-control-track {
+      padding: 4px;
+      gap: 4px;
+    }
   }
 
   &.st-size-lg {
@@ -43,23 +44,60 @@ st-segmented-control {
     --st-segmented-control-item-height: calc(var(--st-segmented-control-height) - 8px);
     --st-segmented-control-font-size: 16px;
     --st-segmented-control-padding-x: var(--st-size-xs);
+
+    .st-segmented-control-track {
+      padding: 4px;
+      gap: 4px;
+    }
+  }
+
+  &.st-state-error {
+    --st-segmented-control-border-color: var(--st-segmented-control-error-border);
+  }
+
+  &.st-state-success {
+    --st-segmented-control-border-color: var(--st-segmented-control-success-border);
+  }
+
+  &.st-state-warning {
+    --st-segmented-control-border-color: var(--st-segmented-control-warning-border);
+  }
+
+  .st-segmented-control-track {
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    overflow-x: auto;
+    width: fit-content;
+    max-width: 100%;
+    min-width: 0;
+    position: relative;
+    border-radius: var(--st-segmented-control-border-radius);
+    border: 1px solid var(--st-segmented-control-border-color);
+    box-sizing: border-box;
+    background-color: var(--st-color-bg-raised);
+    height: var(--st-segmented-control-height);
     padding: 4px;
     gap: 4px;
-  }
+    transition: border-color var(--st-transition-fast);
 
-  /* Hide scrollbar */
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
   }
 
   &.st-segmented-control-full-width {
-    display: flex;
     width: 100%;
 
-    st-segmented-control-item {
-      flex: 1;
+    .st-segmented-control-track {
+      display: flex;
+      width: 100%;
+
+      st-segmented-control-item {
+        flex: 1;
+      }
     }
   }
 
@@ -114,4 +152,22 @@ st-segmented-control {
       left var(--st-transition-fast),
       width var(--st-transition-fast);
   }
+
+  .st-segmented-control-message {
+    margin-top: var(--st-space-1);
+    font-size: var(--st-font-size-sm, 12px);
+    color: var(--st-color-text-secondary);
+
+    &.st-message-error {
+      color: var(--st-color-feedback-error-text);
+    }
+
+    &.st-message-success {
+      color: var(--st-color-feedback-success-text);
+    }
+
+    &.st-message-warning {
+      color: var(--st-color-feedback-warning-text);
+    }
+  }
 }