ngx-strata 0.5.1 → 0.6.0

package/assets/icons/calendar.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M17 3H21C21.5523 3 22 3.44772 22 4V20C22 20.5523 21.5523 21 21 21H3C2.44772 21 2 20.5523 2 20V4C2 3.44772 2.44772 3 3 3H7V1H9V3H15V1H17V3ZM20 9H4V19H20V9ZM19 5H5V7H19V5Z"></path></svg>

package/assets/styles/components/_number-stepper.scss

@@ -1,8 +1,9 @@
 st-number-stepper {
   --st-number-stepper-bg-color: var(--st-color-bg-raised);
-  --st-number-stepper-bg-hover-color: var(--st-color-bg-raised);
+  --st-number-stepper-bg-hover-color: var(--st-color-input-hover);
   --st-number-stepper-text-color: var(--st-color-text-primary);
   --st-number-stepper-border-color: var(--st-border-muted);
+  --st-number-stepper-border-hover-color: var(--st-color-border-strong);
   --st-number-stepper-opacity-disabled: 0.55;
   --st-number-stepper-height: var(--st-interactive-element-height-md);
   --st-number-stepper-font-size: var(--st-font-md);
@@ -75,6 +76,7 @@ st-number-stepper {
 
     &:hover {
       background-color: var(--st-number-stepper-bg-hover-color);
+      border-color: var(--st-number-stepper-border-hover-color);
     }
   }
 
@@ -184,6 +186,7 @@ st-number-stepper {
   &.st-state-error,
   &.st-error {
     --st-number-stepper-border-color: var(--st-color-feedback-error-default);
+    --st-number-stepper-border-hover-color: var(--st-color-feedback-error-hover, var(--st-color-feedback-error-default));
 
     .st-stepper-wrapper:focus-within {
       outline-color: var(--st-color-feedback-error-default);
@@ -192,6 +195,7 @@ st-number-stepper {
 
   &.st-state-success {
     --st-number-stepper-border-color: var(--st-color-feedback-success-default);
+    --st-number-stepper-border-hover-color: var(--st-color-feedback-success-hover, var(--st-color-feedback-success-default));
 
     .st-stepper-wrapper:focus-within {
       outline-color: var(--st-color-feedback-success-default);
@@ -200,6 +204,7 @@ st-number-stepper {
 
   &.st-state-warning {
     --st-number-stepper-border-color: var(--st-color-feedback-warning-default);
+    --st-number-stepper-border-hover-color: var(--st-color-feedback-warning-hover, var(--st-color-feedback-warning-default));
 
     .st-stepper-wrapper:focus-within {
       outline-color: var(--st-color-feedback-warning-default);
@@ -244,6 +249,7 @@ st-number-stepper {
     .st-stepper-wrapper {
       &:hover {
         background-color: var(--st-number-stepper-bg-color);
+        border-color: var(--st-number-stepper-border-color);
       }
 
       &:focus-within {

package/assets/styles/components/action-menu.scss

@@ -1,4 +1,8 @@
 st-action-menu-item {
+  --st-action-menu-item-bg: transparent;
+  --st-action-menu-item-hover-bg: var(--st-color-control-bg-hover);
+  --st-action-menu-item-hover-label-color: var(--st-color-text-secondary);
+  --st-action-menu-item-border-radius: var(--st-border-radius-sm);
   box-sizing: border-box;
   --st-item-gap: var(--st-size-xs);
   width: 100%;
@@ -7,13 +11,23 @@ st-action-menu-item {
   padding: 6px 10px;
   min-height: var(--st-interactive-element-height-md);
   height: fit-content;
-  border-radius: var(--st-border-radius-sm);
+  border-radius: var(--st-action-menu-item-border-radius);
+  background-color: var(--st-action-menu-item-bg);
   user-select: none;
   transition: background-color var(--st-transition-fast), color var(--st-transition-fast);
 
+  .st-label {
+    transition: color var(--st-transition-fast);
+  }
+
   &:hover {
-    background-color: var(--st-color-control-bg-hover);
+    background-color: var(--st-action-menu-item-hover-bg);
     cursor: pointer;
+
+    &.st-label,
+    .st-label {
+      color: var(--st-action-menu-item-hover-label-color);
+    }
   }
 
   &.active {

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

@@ -1,8 +1,9 @@
 st-input-field {
   --st-input-field-bg-color: var(--st-color-bg-raised);
-  --st-input-field-bg-hover-color: var(--st-color-bg-raised);
+  --st-input-field-bg-hover-color: var(--st-color-input-hover);
   --st-input-field-text-color: var(--st-color-text-primary);
   --st-input-field-border-color: var(--st-border-muted);
+  --st-input-field-border-hover-color: var(--st-color-border-strong);
   --st-input-field-opacity-disabled: 0.55;
   --st-input-field-height: var(--st-interactive-element-height-md);
   --st-input-field-font-size: var(--st-font-md);
@@ -61,8 +62,9 @@ st-input-field {
       outline: var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);
       outline-offset: var(--st-focus-ring-offset);
     }
-    &:hover:not(:has(.affix:hover)) {
+    &:hover {
       background-color: var(--st-input-field-bg-hover-color);
+      border-color: var(--st-input-field-border-hover-color);
     }
     &:has(textarea) {
       height: auto;
@@ -169,6 +171,7 @@ st-input-field {
   &.st-state-error,
   &.st-error {
     --st-input-field-border-color: var(--st-color-feedback-error-default);
+    --st-input-field-border-hover-color: var(--st-color-feedback-error-hover, var(--st-color-feedback-error-default));
 
     .st-input-wrapper:focus-within {
       outline-color: var(--st-color-feedback-error-default);
@@ -177,6 +180,7 @@ st-input-field {
 
   &.st-state-success {
     --st-input-field-border-color: var(--st-color-feedback-success-default);
+    --st-input-field-border-hover-color: var(--st-color-feedback-success-hover, var(--st-color-feedback-success-default));
 
     .st-input-wrapper:focus-within {
       outline-color: var(--st-color-feedback-success-default);
@@ -185,6 +189,7 @@ st-input-field {
 
   &.st-state-warning {
     --st-input-field-border-color: var(--st-color-feedback-warning-default);
+    --st-input-field-border-hover-color: var(--st-color-feedback-warning-hover, var(--st-color-feedback-warning-default));
 
     .st-input-wrapper:focus-within {
       outline-color: var(--st-color-feedback-warning-default);
@@ -239,6 +244,7 @@ st-input-field {
     .st-input-wrapper {
       &:hover {
         background-color: var(--st-input-field-bg-color);
+        border-color: var(--st-input-field-border-color);
       }
 
       &:focus-within {

package/assets/styles/components/item.scss

@@ -1,7 +1,10 @@
 st-item {
+  --st-item-bg: transparent;
+  --st-item-hover-bg: var(--st-color-control-bg-hover);
+  --st-item-hover-label-color: var(--st-color-text-secondary);
   --st-item-border-radius: var(--st-border-radius-md);
-  box-sizing: border-box;
   --st-item-gap: var(--st-size-xs);
+  box-sizing: border-box;
   width: 100%;
   display: flex;
   position: relative;
@@ -12,13 +15,23 @@ st-item {
   padding-left: var(--st-size-xxs);
   padding-right: var(--st-size-xxs);
   border-radius: var(--st-item-border-radius);
+  background-color: var(--st-item-bg);
   transition: background-color var(--st-transition-fast);
 
+  .st-label {
+    transition: color var(--st-transition-fast);
+  }
+
   &.interactable {
     &:hover,
     &:focus-visible {
-      background-color: var(--st-color-control-bg-hover);
+      background-color: var(--st-item-hover-bg);
       cursor: pointer;
+
+      &.st-label,
+      .st-label {
+        color: var(--st-item-hover-label-color);
+      }
     }
   }
 

package/assets/styles/components/modal.scss

@@ -49,6 +49,16 @@ st-modal-header {
   }
 }
 
+st-modal-body {
+  --st-modal-body-padding: var(--st-size-sm);
+
+  display: block;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  padding: var(--st-modal-body-padding);
+}
+
 st-modal-footer {
   --st-modal-footer-bg: var(--st-modal-bg-color, var(--st-color-bg-default));
   --st-modal-footer-border-color: var(--st-border);
@@ -60,16 +70,11 @@ st-modal-footer {
   align-items: center;
   flex-shrink: 0;
   flex-grow: 0;
+  margin-top: auto;
   gap: var(--st-modal-footer-gap);
   padding: var(--st-modal-footer-padding);
   border-top: 1px solid var(--st-modal-footer-border-color);
   background-color: var(--st-modal-footer-bg);
-  position: sticky;
-  bottom: 0;
-  z-index: 5;
-  margin-top: var(--st-size-sm);
-  margin-left: calc(-1 * var(--st-size-sm));
-  margin-right: calc(-1 * var(--st-size-sm));
   border-bottom-left-radius: var(--st-modal-border-radius);
   border-bottom-right-radius: var(--st-modal-border-radius);
 
@@ -127,19 +132,62 @@ st-modal {
   width: var(--st-modal-width);
   max-width: min(var(--st-modal-max-width), calc(100vw - (var(--st-modal-viewport-margin) * 2)));
   max-height: calc(100vh - (var(--st-modal-viewport-margin) * 2));
+  overflow: hidden;
 
   st-modal-header {
     flex-shrink: 0;
   }
 
   .modal-content {
-    padding: var(--st-size-sm);
-    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
     flex: 1;
     min-height: 0;
+    overflow: hidden;
+
+    > *,
+    > * > form,
+    > * > div:only-child,
+    > * > section:only-child {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      min-height: 0;
+      overflow: hidden;
+    }
+
+    &:not(:has(st-modal-body)):not(:has(st-modal-footer)) {
+      padding: var(--st-size-sm);
+      overflow-y: auto;
+
+      > * {
+        display: block;
+        flex: initial;
+        min-height: initial;
+        overflow: visible;
+      }
+    }
+
+    &:has(st-modal-footer):not(:has(st-modal-body)) {
+      > *,
+      > * > form,
+      > * > div:only-child,
+      > * > section:only-child {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+        padding: var(--st-size-sm) var(--st-size-sm) 0;
 
-    &:has(st-modal-footer) {
-      padding-bottom: 0;
+        st-modal-footer {
+          position: sticky;
+          bottom: 0;
+          margin-top: auto;
+          margin-left: calc(-1 * var(--st-size-sm));
+          margin-right: calc(-1 * var(--st-size-sm));
+        }
+      }
     }
   }
 
@@ -167,12 +215,122 @@ st-modal {
     --st-modal-bg-color: var(--st-color-bg-raised);
   }
 
+  &.st-modal-placement-center {
+    justify-self: center;
+    align-self: center;
+    animation: st-modal-fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &.st-modal-placement-right {
+    @media (min-width: 768px) {
+      justify-self: end;
+      align-self: stretch;
+      height: 100% !important;
+      height: 100dvh !important;
+      max-height: 100% !important;
+      max-height: 100dvh !important;
+      border-radius: 0 !important;
+      border-top: none !important;
+      border-right: none !important;
+      border-bottom: none !important;
+      border-left: 1px solid var(--st-border-faded) !important;
+      box-shadow: var(--st-shadow-4);
+      animation: st-modal-slide-in-right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+
+      &.st-modal-size-xs {
+        --st-modal-max-width: 320px;
+        --st-modal-width: 320px;
+      }
+
+      &.st-modal-size-sm {
+        --st-modal-max-width: 400px;
+        --st-modal-width: 400px;
+      }
+
+      &.st-modal-size-md {
+        --st-modal-max-width: 560px;
+        --st-modal-width: 560px;
+      }
+
+      &.st-modal-size-lg {
+        --st-modal-max-width: 800px;
+        --st-modal-width: 800px;
+      }
+
+      st-modal-header {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      st-modal-footer {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
+  &.st-modal-placement-left {
+    @media (min-width: 768px) {
+      justify-self: start;
+      align-self: stretch;
+      height: 100% !important;
+      height: 100dvh !important;
+      max-height: 100% !important;
+      max-height: 100dvh !important;
+      border-radius: 0 !important;
+      border-top: none !important;
+      border-left: none !important;
+      border-bottom: none !important;
+      border-right: 1px solid var(--st-border-faded) !important;
+      box-shadow: var(--st-shadow-4);
+      animation: st-modal-slide-in-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+
+      &.st-modal-size-xs {
+        --st-modal-max-width: 320px;
+        --st-modal-width: 320px;
+      }
+
+      &.st-modal-size-sm {
+        --st-modal-max-width: 400px;
+        --st-modal-width: 400px;
+      }
+
+      &.st-modal-size-md {
+        --st-modal-max-width: 560px;
+        --st-modal-width: 560px;
+      }
+
+      &.st-modal-size-lg {
+        --st-modal-max-width: 800px;
+        --st-modal-width: 800px;
+      }
+
+      st-modal-header {
+        border-top-left-radius: 0;
+        border-top-right-radius: 0;
+      }
+
+      st-modal-footer {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
+  &.st-modal-placement-bottom {
+    @media (min-width: 768px) {
+      justify-self: center;
+      align-self: center;
+      animation: st-modal-fade-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    }
+  }
+
   &.hidden-under-other-modal {
     filter: var(--st-modal-covered-modal-filter);
   }
 
   @media (max-width: 767.98px) {
-    &:not(.st-modal-size-xs):not(.st-modal-size-sm) {
+    &:not(.st-modal-size-xs):not(.st-modal-size-sm):not(.st-modal-placement-bottom) {
       --st-modal-viewport-margin: 0px;
       --st-modal-border-radius: 0px;
       --st-modal-max-width: 100%;
@@ -194,23 +352,24 @@ st-modal {
       box-shadow: none !important;
       margin: 0 !important;
 
+      &.st-modal-placement-right {
+        animation: st-modal-slide-in-right 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+      }
+
+      &.st-modal-placement-left {
+        animation: st-modal-slide-in-left 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+      }
+
       .modal-content {
         display: flex;
         flex-direction: column;
         flex: 1;
         min-height: 0;
 
-        &:has(st-modal-footer) {
-          &,
-          :has(st-modal-footer) {
-            display: flex;
-            flex-direction: column;
-            flex: 1;
-            min-height: 0;
-          }
-        }
-
-        > * {
+        > *,
+        > * > form,
+        > * > div:only-child,
+        > * > section:only-child {
           display: flex;
           flex-direction: column;
           flex: 1;
@@ -218,12 +377,40 @@ st-modal {
         }
 
         st-modal-footer {
-          margin-top: auto !important;
+          margin-top: auto;
           border-bottom-left-radius: 0;
           border-bottom-right-radius: 0;
         }
       }
     }
+
+    &.st-modal-placement-bottom {
+      position: fixed;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      top: auto;
+      width: 100% !important;
+      max-width: 100% !important;
+      max-height: calc(100dvh - var(--st-size-xl)) !important;
+      border-radius: var(--st-border-radius-xl) var(--st-border-radius-xl) 0 0 !important;
+      border-left: none !important;
+      border-right: none !important;
+      border-bottom: none !important;
+      border-top: 1px solid var(--st-border-faded) !important;
+      box-shadow: var(--st-shadow-4) !important;
+      animation: st-modal-slide-in-bottom 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+
+      st-modal-header {
+        border-top-left-radius: var(--st-border-radius-xl);
+        border-top-right-radius: var(--st-border-radius-xl);
+      }
+
+      st-modal-footer {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
   }
 }
 
@@ -271,4 +458,42 @@ st-modal-container {
     grid-column: 1;
     grid-row: 1;
   }
+}
+
+@keyframes st-modal-fade-in {
+  from {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes st-modal-slide-in-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes st-modal-slide-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes st-modal-slide-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }

package/assets/styles/components/notification.scss

@@ -12,16 +12,16 @@ st-notification {
   --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-color: transparent;
   --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-padding-left: var(--st-space-4);
   --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-bg: var(--st-color-bg-subtle);
+  --st-notification-icon-color: var(--st-color-text-primary);
   --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);
@@ -49,7 +49,7 @@ st-notification {
   --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-color: var(--st-color-border-strong);
   --st-notification-progress-height: 3px;
 
   position: relative;
@@ -57,8 +57,7 @@ st-notification {
   flex-direction: row;
   align-items: center;
   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);
+  width: 100%;
   min-height: var(--st-notification-min-height);
   box-sizing: border-box;
   background-color: var(--st-notification-bg);
@@ -70,6 +69,12 @@ st-notification {
   overflow: hidden;
   pointer-events: auto;
 
+  @media (min-width: 768px) {
+    width: auto;
+    min-width: var(--st-notification-min-width);
+    max-width: var(--st-notification-max-width);
+  }
+
   &::before {
     content: '';
     position: absolute;
@@ -185,8 +190,17 @@ st-notification {
     animation-play-state: paused;
   }
 
+  &.st-theme-default {
+    --st-notification-accent-color: transparent;
+    --st-notification-padding-left: var(--st-space-4);
+    --st-notification-icon-bg: var(--st-color-bg-subtle);
+    --st-notification-icon-color: var(--st-color-text-primary);
+    --st-notification-progress-color: var(--st-color-border-strong);
+  }
+
   &.st-theme-info {
     --st-notification-accent-color: var(--st-color-feedback-info-default);
+    --st-notification-padding-left: calc(var(--st-notification-accent-inset) * 2 + var(--st-notification-accent-width));
     --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);
@@ -194,6 +208,7 @@ st-notification {
 
   &.st-theme-success {
     --st-notification-accent-color: var(--st-color-feedback-success-default);
+    --st-notification-padding-left: calc(var(--st-notification-accent-inset) * 2 + var(--st-notification-accent-width));
     --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);
@@ -201,6 +216,7 @@ st-notification {
 
   &.st-theme-warning {
     --st-notification-accent-color: var(--st-color-feedback-warning-default);
+    --st-notification-padding-left: calc(var(--st-notification-accent-inset) * 2 + var(--st-notification-accent-width));
     --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);
@@ -208,6 +224,7 @@ st-notification {
 
   &.st-theme-danger {
     --st-notification-accent-color: var(--st-color-feedback-error-default);
+    --st-notification-padding-left: calc(var(--st-notification-accent-inset) * 2 + var(--st-notification-accent-width));
     --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);
@@ -215,6 +232,7 @@ st-notification {
 
   &.st-theme-brand {
     --st-notification-accent-color: var(--st-color-accent-default);
+    --st-notification-padding-left: calc(var(--st-notification-accent-inset) * 2 + var(--st-notification-accent-width));
     --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);
@@ -256,6 +274,7 @@ st-notification-container {
   --st-notification-overflow-clear-hover-color: var(--st-color-text-primary);
   --st-notification-overflow-clear-hover-bg: var(--st-color-control-bg-hover);
 
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
   position: fixed;

package/assets/styles/components/select.scss

@@ -110,10 +110,19 @@ st-single-select {
         transition:
           background-color var(--st-transition-fast),
           color var(--st-transition-fast);
+
+        .st-label {
+          transition: color var(--st-transition-fast);
+        }
       }
 
       .single-select-item:hover {
         background-color: var(--st-color-control-bg-hover, var(--st-color-bg-default));
+
+        &.st-label,
+        .st-label {
+          color: var(--st-color-text-secondary);
+        }
       }
     }
   }
@@ -207,10 +216,19 @@ st-single-select {
       transition:
         background-color var(--st-transition-fast),
         color var(--st-transition-fast);
+
+      .st-label {
+        transition: color var(--st-transition-fast);
+      }
     }
 
     .single-select-item:hover {
       background-color: var(--st-color-control-bg-hover, var(--st-color-bg-default));
+
+      &.st-label,
+      .st-label {
+        color: var(--st-color-text-secondary);
+      }
     }
   }