ngx-strata 0.4.5 → 0.5.1

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);
+      }
     }
   }
 
@@ -113,21 +153,77 @@ st-input-field {
     &:focus-visible {
       outline: none;
     }
+
+    &[type='number'] {
+      appearance: textfield;
+      -moz-appearance: textfield;
+
+      &::-webkit-inner-spin-button,
+      &::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+    }
+  }
+
+  &.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/notification.scss

@@ -1,79 +1,261 @@
 st-notification {
-  --st-notification-background-color: var(--st-color-bg-raised);
-  --st-notification-text-color: var(--st-color-text-primary);
+  --st-notification-bg: var(--st-color-bg-raised);
+  --st-notification-border-color: var(--st-color-border-subtle);
+  --st-notification-border-width: var(--st-border-width);
+  --st-notification-border-style: solid;
+  --st-notification-shadow: var(--st-shadow-3);
   --st-notification-border-radius: var(--st-border-radius-lg);
+  --st-notification-text-primary: var(--st-color-text-primary);
+  --st-notification-text-secondary: var(--st-color-text-secondary);
+  --st-notification-min-width: 320px;
+  --st-notification-max-width: var(--st-breakpoint-sm);
+  --st-notification-min-height: calc(var(--st-space-12) + var(--st-space-1));
+  --st-notification-padding-y: var(--st-space-3);
+  --st-notification-padding-right: var(--st-space-4);
+  --st-notification-accent-color: var(--st-color-feedback-info-default);
+  --st-notification-accent-width: var(--st-space-1);
+  --st-notification-accent-inset: var(--st-space-3);
+  --st-notification-accent-radius: var(--st-border-radius-full);
+  --st-notification-padding-left: calc(var(--st-notification-accent-inset) * 2 + var(--st-notification-accent-width));
+  --st-notification-gap: var(--st-space-3);
+  --st-notification-content-gap: var(--st-space-1);
+
+  --st-notification-icon-bg: var(--st-color-feedback-info-subtle);
+  --st-notification-icon-color: var(--st-color-feedback-info-default);
+  --st-notification-icon-size: var(--st-space-8);
+  --st-notification-icon-glyph-size: var(--st-space-4);
+  --st-notification-icon-radius: var(--st-border-radius-md);
+  --st-notification-icon-offset-y: var(--st-size-xxxxs);
+
+  --st-notification-title-font-size: var(--st-font-md);
+  --st-notification-title-font-weight: var(--st-font-weight-semibold);
+  --st-notification-title-line-height: 1.25;
+
+  --st-notification-message-font-size: var(--st-font-md);
+  --st-notification-message-line-height: 1.4;
+
+  --st-notification-actions-gap: var(--st-space-2);
+  --st-notification-actions-margin-top: var(--st-space-2);
+
+  --st-notification-close-size: var(--st-interactive-element-height-sm);
+  --st-notification-close-glyph-size: var(--st-font-md);
+  --st-notification-close-radius: var(--st-border-radius-sm);
+  --st-notification-close-color: var(--st-color-text-tertiary);
+  --st-notification-close-hover-color: var(--st-color-text-primary);
+  --st-notification-close-hover-bg: var(--st-color-control-bg-hover);
+
+  --st-notification-focus-ring-width: var(--st-focus-ring-width);
+  --st-notification-focus-ring-style: var(--st-focus-ring-style);
+  --st-notification-focus-ring-color: var(--st-color-border-strong);
+  --st-notification-focus-ring-offset: var(--st-focus-ring-offset);
+
+  --st-notification-progress-color: var(--st-color-feedback-info-default);
+  --st-notification-progress-height: 3px;
+
+  position: relative;
   display: flex;
   flex-direction: row;
-  padding: var(--st-size-sm);
-  min-width: 250px;
-  min-height: var(--st-size-lg);
-  box-shadow: var(--st-shadow-2);
-  background-color: var(--st-notification-background-color);
-  color: var(--st-notification-text-color);
-  align-content: center;
   align-items: center;
-  justify-content: flex-start;
+  padding: var(--st-notification-padding-y) var(--st-notification-padding-right) var(--st-notification-padding-y) var(--st-notification-padding-left);
+  min-width: var(--st-notification-min-width);
+  max-width: var(--st-notification-max-width);
+  min-height: var(--st-notification-min-height);
+  box-sizing: border-box;
+  background-color: var(--st-notification-bg);
+  border: var(--st-notification-border-width) var(--st-notification-border-style) var(--st-notification-border-color);
+  box-shadow: var(--st-notification-shadow);
   border-radius: var(--st-notification-border-radius);
-  gap: 8px;
-  font-size: 16px;
+  color: var(--st-notification-text-primary);
+  gap: var(--st-notification-gap);
+  overflow: hidden;
   pointer-events: auto;
 
-  .notification-message {
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--st-notification-accent-inset);
+    bottom: var(--st-notification-accent-inset);
+    left: var(--st-notification-accent-inset);
+    width: var(--st-notification-accent-width);
+    border-radius: var(--st-notification-accent-radius);
+    background-color: var(--st-notification-accent-color);
+  }
+
+  .st-notification-icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    width: var(--st-notification-icon-size);
+    height: var(--st-notification-icon-size);
+    border-radius: var(--st-notification-icon-radius);
+    background-color: var(--st-notification-icon-bg);
+    color: var(--st-notification-icon-color);
+
+    st-icon {
+      --st-icon-size: var(--st-notification-icon-glyph-size);
+    }
+  }
+
+  .st-notification-content {
+    display: flex;
+    flex-direction: column;
     flex: 1;
+    min-width: 0;
+    gap: var(--st-notification-content-gap);
+
+    .st-notification-title {
+      font-size: var(--st-notification-title-font-size);
+      font-weight: var(--st-notification-title-font-weight);
+      color: var(--st-notification-text-primary);
+      line-height: var(--st-notification-title-line-height);
+    }
+
+    .st-notification-message {
+      font-size: var(--st-notification-message-font-size);
+      color: var(--st-notification-text-secondary);
+      line-height: var(--st-notification-message-line-height);
+      word-break: break-word;
+    }
+
+    .st-notification-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--st-notification-actions-gap);
+      margin-top: var(--st-notification-actions-margin-top);
+    }
   }
 
-  .notification-close-btn {
+  .st-notification-close-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    flex-shrink: 0;
+    width: var(--st-notification-close-size);
+    height: var(--st-notification-close-size);
+    margin-left: auto;
     background: none;
     border: none;
     padding: 0;
-    margin-left: auto;
-    color: inherit;
-    opacity: 0.7;
+    color: var(--st-notification-close-color);
     cursor: pointer;
-    border-radius: var(--st-border-radius-sm);
-    transition: opacity var(--st-transition-fast), background-color var(--st-transition-fast);
+    border-radius: var(--st-notification-close-radius);
+    transition: color var(--st-transition-fast), background-color var(--st-transition-fast);
 
     &:hover {
-      opacity: 1;
+      color: var(--st-notification-close-hover-color);
+      background-color: var(--st-notification-close-hover-bg);
     }
 
     &:focus-visible {
-      outline: 2px solid currentColor;
-      outline-offset: 2px;
+      outline: var(--st-notification-focus-ring-width) var(--st-notification-focus-ring-style) var(--st-notification-focus-ring-color);
+      outline-offset: var(--st-notification-focus-ring-offset);
+    }
+
+    st-icon {
+      --st-icon-size: var(--st-notification-close-glyph-size);
     }
   }
 
-  &.st-theme-brand {
-    --st-notification-background-color: var(--st-color-accent-subtle);
-    --st-notification-text-color: var(--st-color-accent-text);
+  &:has(.st-notification-actions),
+  &:has(.st-notification-title) {
+    align-items: flex-start;
+
+    .st-notification-icon-wrapper {
+      margin-top: var(--st-notification-icon-offset-y);
+    }
+
+    .st-notification-close-btn {
+      margin-top: 0;
+    }
+  }
+
+  .st-notification-progress-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: var(--st-notification-progress-height);
+    background-color: var(--st-notification-progress-color);
+    transform-origin: left;
+    animation: st-notification-progress-anim var(--st-notification-duration, 3000ms) linear forwards;
+  }
+
+  &.st-is-paused .st-notification-progress-bar {
+    animation-play-state: paused;
   }
 
   &.st-theme-info {
-    --st-notification-background-color: var(--st-color-feedback-info-subtle);
-    --st-notification-text-color: var(--st-color-feedback-info-text);
+    --st-notification-accent-color: var(--st-color-feedback-info-default);
+    --st-notification-icon-bg: var(--st-color-feedback-info-subtle);
+    --st-notification-icon-color: var(--st-color-feedback-info-default);
+    --st-notification-progress-color: var(--st-color-feedback-info-default);
   }
 
   &.st-theme-success {
-    --st-notification-background-color: var(--st-color-feedback-success-subtle);
-    --st-notification-text-color: var(--st-color-feedback-success-text);
+    --st-notification-accent-color: var(--st-color-feedback-success-default);
+    --st-notification-icon-bg: var(--st-color-feedback-success-subtle);
+    --st-notification-icon-color: var(--st-color-feedback-success-default);
+    --st-notification-progress-color: var(--st-color-feedback-success-default);
+  }
+
+  &.st-theme-warning {
+    --st-notification-accent-color: var(--st-color-feedback-warning-default);
+    --st-notification-icon-bg: var(--st-color-feedback-warning-subtle);
+    --st-notification-icon-color: var(--st-color-feedback-warning-default);
+    --st-notification-progress-color: var(--st-color-feedback-warning-default);
   }
 
   &.st-theme-danger {
-    --st-notification-background-color: var(--st-color-feedback-error-subtle);
-    --st-notification-text-color: var(--st-color-feedback-error-text);
+    --st-notification-accent-color: var(--st-color-feedback-error-default);
+    --st-notification-icon-bg: var(--st-color-feedback-error-subtle);
+    --st-notification-icon-color: var(--st-color-feedback-error-default);
+    --st-notification-progress-color: var(--st-color-feedback-error-default);
   }
 
-  &.st-theme-warning {
-    --st-notification-background-color: var(--st-color-feedback-warning-subtle);
-    --st-notification-text-color: var(--st-color-feedback-warning-text);
+  &.st-theme-brand {
+    --st-notification-accent-color: var(--st-color-accent-default);
+    --st-notification-icon-bg: var(--st-color-accent-subtle);
+    --st-notification-icon-color: var(--st-color-accent-default);
+    --st-notification-progress-color: var(--st-color-accent-default);
   }
 }
 
+@keyframes st-notification-progress-anim {
+  from {
+    transform: scaleX(1);
+  }
+  to {
+    transform: scaleX(0);
+  }
+}
 
 st-notification-container {
+  --st-notification-container-gap: var(--st-space-2);
+  --st-notification-container-padding-mobile: var(--st-space-3);
+  --st-notification-container-padding-desktop: var(--st-space-4);
+  --st-notification-container-z-index: 1100;
+
+  --st-notification-overflow-bg: var(--st-color-bg-raised);
+  --st-notification-overflow-border-color: var(--st-color-border-subtle);
+  --st-notification-overflow-border-width: var(--st-border-width);
+  --st-notification-overflow-border-style: solid;
+  --st-notification-overflow-shadow: var(--st-shadow-2);
+  --st-notification-overflow-text-color: var(--st-color-text-secondary);
+  --st-notification-overflow-font-size: var(--st-font-sm);
+  --st-notification-overflow-font-weight: var(--st-font-weight-medium);
+  --st-notification-overflow-line-height: 1.4;
+  --st-notification-overflow-padding-y: var(--st-space-1);
+  --st-notification-overflow-padding-x: var(--st-space-3);
+  --st-notification-overflow-gap: var(--st-space-2);
+  --st-notification-overflow-radius: var(--st-border-radius-full);
+  --st-notification-overflow-clear-size: calc(var(--st-space-4) + var(--st-size-xxxxs));
+  --st-notification-overflow-clear-glyph-size: var(--st-font-sm);
+  --st-notification-overflow-clear-radius: var(--st-border-radius-full);
+  --st-notification-overflow-clear-color: var(--st-color-text-tertiary);
+  --st-notification-overflow-clear-hover-color: var(--st-color-text-primary);
+  --st-notification-overflow-clear-hover-bg: var(--st-color-control-bg-hover);
+
   width: 100%;
   height: 100%;
   position: fixed;
@@ -81,21 +263,66 @@ st-notification-container {
   left: 0;
   overflow: hidden;
   display: flex;
-  z-index: 1100;
+  z-index: var(--st-notification-container-z-index);
   pointer-events: none;
-  gap: var(--st-size-xs);
-
-  // Small screen defaults: top center, full width
+  gap: var(--st-notification-container-gap);
   flex-direction: column;
   align-items: stretch;
   justify-content: flex-start;
-  padding: var(--st-size-sm);
+  padding: var(--st-notification-container-padding-mobile);
 
-  // Big screen overrides: bottom right, stacking upwards
   @media (min-width: 768px) {
     flex-direction: column-reverse;
     align-items: flex-end;
     justify-content: flex-start;
-    padding: var(--st-size-md);
+    padding: var(--st-notification-container-padding-desktop);
+  }
+
+  .st-notification-overflow {
+    display: inline-flex;
+    align-items: center;
+    align-self: center;
+    gap: var(--st-notification-overflow-gap);
+    padding: var(--st-notification-overflow-padding-y) var(--st-notification-overflow-padding-x);
+    background-color: var(--st-notification-overflow-bg);
+    border: var(--st-notification-overflow-border-width) var(--st-notification-overflow-border-style) var(--st-notification-overflow-border-color);
+    border-radius: var(--st-notification-overflow-radius);
+    box-shadow: var(--st-notification-overflow-shadow);
+    color: var(--st-notification-overflow-text-color);
+    font-size: var(--st-notification-overflow-font-size);
+    font-weight: var(--st-notification-overflow-font-weight);
+    pointer-events: auto;
+
+    @media (min-width: 768px) {
+      align-self: flex-end;
+    }
+
+    .st-notification-overflow-text {
+      line-height: var(--st-notification-overflow-line-height);
+    }
+
+    .st-notification-overflow-clear {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--st-notification-overflow-clear-size);
+      height: var(--st-notification-overflow-clear-size);
+      padding: 0;
+      border: none;
+      background: transparent;
+      border-radius: var(--st-notification-overflow-clear-radius);
+      color: var(--st-notification-overflow-clear-color);
+      cursor: pointer;
+      transition: color var(--st-transition-fast), background-color var(--st-transition-fast);
+
+      &:hover {
+        color: var(--st-notification-overflow-clear-hover-color);
+        background-color: var(--st-notification-overflow-clear-hover-bg);
+      }
+
+      st-icon {
+        --st-icon-size: var(--st-notification-overflow-clear-glyph-size);
+      }
+    }
   }
 }

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