ngx-strata 0.5.0 → 0.5.2

package/assets/styles/components/notification.scss

@@ -1,79 +1,280 @@
 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: 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: 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-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);
+  --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-border-strong);
+  --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);
+  width: 100%;
+  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 {
+  @media (min-width: 768px) {
+    width: auto;
+    min-width: var(--st-notification-min-width);
+    max-width: var(--st-notification-max-width);
+  }
+
+  &::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-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-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-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);
   }
 
   &.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-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);
+  }
+
+  &.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);
   }
 
   &.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-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);
   }
 
-  &.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-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);
   }
 }
 
+@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);
+
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
   position: fixed;
@@ -81,21 +282,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/segmented-control.scss

@@ -129,6 +129,7 @@ st-segmented-control {
     display: flex;
     align-items: center;
     justify-content: center;
+    gap: var(--st-space-2, 8px);
     height: var(--st-segmented-control-item-height);
     padding: 0 var(--st-segmented-control-padding-x);
     border-radius: calc(var(--st-segmented-control-border-radius) - 2px);
@@ -138,11 +139,30 @@ st-segmented-control {
     transition: background-color var(--st-transition-fast), color var(--st-transition-fast);
   }
 
+  st-segmented-control-item {
+    position: relative;
+    z-index: 1;
+
+    &[aria-selected="true"] {
+      color: var(--st-color-control-primary-text);
+
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    st-badge {
+      flex-shrink: 0;
+    }
+  }
+
   #selection-indicator {
     cursor: default;
     position: absolute;
     top: 0;
     left: 0;
+    z-index: 0;
+    pointer-events: none;
     border-radius: calc(var(--st-segmented-control-border-radius) - 2px);
     background-color: var(--st-color-control-primary-bg);
     color: var(--st-color-control-primary-text);

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

package/assets/styles/components/sidemenu.scss

@@ -52,8 +52,15 @@ st-sidemenu {
       opacity: 0.5;
     }
 
-    st-tag {
+    st-tag,
+    st-badge {
       margin-left: auto;
+      flex-shrink: 0;
+    }
+
+    st-tag + .st-sidemenu-item-secondary-action,
+    st-badge + .st-sidemenu-item-secondary-action {
+      margin-left: var(--st-space-2, 8px);
     }
 
     st-icon:not(.st-sidemenu-item-group-icon) {

package/assets/styles/components/tabs.scss

@@ -13,6 +13,9 @@ st-tabs {
   }
 
   st-tab-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--st-space-2, 8px);
     padding: 12px 16px;
     font-size: 14px;
     font-weight: 500;
@@ -25,6 +28,10 @@ st-tabs {
     margin-bottom: -1px;
     outline: none;
 
+    st-badge {
+      flex-shrink: 0;
+    }
+
     &:focus,
     &:active {
       outline: none;

package/assets/styles/public-api.scss

@@ -27,6 +27,7 @@
 @use "./components/item";
 @use "./components/modal";
 @use "./components/number-display";
+@use "./components/number-stepper";
 @use "./components/notification";
 @use "./components/overlay";
 @use "./components/pagination";
@@ -34,6 +35,7 @@
 @use "./components/radio";
 @use "./components/segmented-control";
 @use "./components/select";
+@use "./components/skeleton";
 @use "./components/slider";
 @use "./components/spinner";
 @use "./components/table";

package/assets/styles/semantics/color-semantic.scss

@@ -76,6 +76,10 @@
     --st-color-control-primary-bg:       var(--st-color-neutral-900);
     --st-color-control-primary-bg-hover: var(--st-color-neutral-800);
     --st-color-control-primary-text:     var(--st-color-neutral-0);
+
+    /* --- Skeleton Placeholder --- */
+    --st-color-skeleton-bg:              var(--st-color-neutral-200);
+    --st-color-skeleton-shimmer:         var(--st-color-neutral-50);
 }
 
 
@@ -156,4 +160,8 @@
     --st-color-control-primary-bg:       var(--st-color-neutral-50);
     --st-color-control-primary-bg-hover: var(--st-color-neutral-200);
     --st-color-control-primary-text:     var(--st-color-neutral-900);
+
+    /* --- Skeleton Placeholder --- */
+    --st-color-skeleton-bg:              var(--st-color-neutral-700);
+    --st-color-skeleton-shimmer:         var(--st-color-neutral-600);
 }