ngx-strata 0.2.5 → 0.4.0

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

@@ -1,4 +1,9 @@
 st-segmented-control {
+  --st-segmented-control-height: var(--st-interactive-element-height-md);
+  --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);
+
   display: inline-flex;
   flex-direction: row;
   flex-wrap: nowrap;
@@ -9,10 +14,37 @@ st-segmented-control {
   position: relative;
   border-radius: var(--st-border-radius-sm);
   box-sizing: border-box;
-  background-color: var(--st-bg-light);
-  height: var(--st-space-10);
-  padding: var(--st-space-1);
-  gap: var(--st-space-1);
+  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-size-md {
+    --st-segmented-control-height: var(--st-interactive-element-height-md);
+    --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-size-lg {
+    --st-segmented-control-height: var(--st-interactive-element-height-lg);
+    --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);
+    padding: 4px;
+    gap: 4px;
+  }
 
   /* Hide scrollbar */
   -ms-overflow-style: none;
@@ -48,8 +80,8 @@ st-segmented-control {
 
     &:hover:not([disabled]) {
       cursor: pointer;
-      background-color: var(--st-bg-contrast-dark);
-      color: var(--st-text-contrast);
+      background-color: var(--st-color-control-bg-hover);
+      color: var(--st-color-text-primary);
     }
   }
 
@@ -58,10 +90,10 @@ st-segmented-control {
     display: flex;
     align-items: center;
     justify-content: center;
-    height: var(--st-space-8);
-    padding: 0 var(--st-space-8);
+    height: var(--st-segmented-control-item-height);
+    padding: 0 var(--st-segmented-control-padding-x);
     border-radius: var(--st-border-radius-sm);
-    font-size: 16px;
+    font-size: var(--st-segmented-control-font-size);
     font-weight: 500;
     user-select: none;
   }
@@ -71,8 +103,8 @@ st-segmented-control {
     position: absolute;
     top: 0;
     left: 0;
-    background-color: var(--st-bg-contrast-light);
-    color: var(--st-text-contrast);
+    background-color: var(--st-color-control-primary-bg);
+    color: var(--st-color-control-primary-text);
     text-wrap: nowrap;
     transition:
       0.15s ease-in left,

package/assets/styles/components/select.scss

@@ -1,16 +1,39 @@
 st-single-select {
+  --st-select-height: var(--st-interactive-element-height-md);
+  --st-select-font-size: 14px;
+  --st-select-padding-x: var(--st-size-xs);
+
   display: flex;
   flex-direction: column;
   width: 100%;
 
+  &.st-size-sm {
+    --st-select-height: var(--st-interactive-element-height-sm);
+    --st-select-font-size: 12px;
+    --st-select-padding-x: var(--st-size-xxs);
+  }
+
+  &.st-size-md {
+    --st-select-height: var(--st-interactive-element-height-md);
+    --st-select-font-size: 14px;
+    --st-select-padding-x: var(--st-size-xs);
+  }
+
+  &.st-size-lg {
+    --st-select-height: var(--st-interactive-element-height-lg);
+    --st-select-font-size: 16px;
+    --st-select-padding-x: var(--st-size-xs);
+  }
+
   label {
     margin-bottom: var(--st-space-2);
   }
 
   .single-select-input {
-    height: var(--st-interactive-element-height-md);
-    padding-left: var(--st-size-xs);
-    padding-right: var(--st-size-xs);
+    height: var(--st-select-height);
+    font-size: var(--st-select-font-size);
+    padding-left: var(--st-select-padding-x);
+    padding-right: var(--st-select-padding-x);
     border: 1px solid var(--st-border);
     border-radius: var(--st-border-radius-sm);
     min-width: 128px;
@@ -36,8 +59,14 @@ st-single-select {
       height: var(--st-icon-size-sm);
     }
 
-    &:hover {
-      background-color: var(--st-bg-light);
+    &.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+      cursor: not-allowed;
+    }
+
+    &:hover:not(.disabled) {
+      background-color: var(--st-color-bg-default);
     }
 
     &:has(.single-select-selector:hover) {
@@ -72,7 +101,7 @@ st-single-select {
       }
 
       .single-select-item:hover {
-        background-color: var(--st-bg-light);
+        background-color: var(--st-color-control-bg-hover, var(--st-color-bg-default));
       }
     }
   }
@@ -108,7 +137,7 @@ st-single-select {
     }
 
     .single-select-item:hover {
-      background-color: var(--st-bg-light);
+      background-color: var(--st-color-control-bg-hover, var(--st-color-bg-default));
     }
   }
 

package/assets/styles/components/sidemenu.scss

@@ -12,6 +12,9 @@ st-sidemenu {
     --st-sidemenu-item-padding: 6px var(--st-size-xs, 12px);
     --st-sidemenu-item-font-size: var(--st-font-sm, 14px);
     --st-sidemenu-item-font-weight: 500;
+    --st-sidemenu-item-visual-width: 20px;
+    --st-sidemenu-item-icon-size: var(--st-icon-size-sm, 16px);
+    --st-sidemenu-item-avatar-size: 20px;
 
     display: flex;
     align-items: center;
@@ -53,10 +56,61 @@ st-sidemenu {
       margin-left: auto;
     }
 
-    st-icon {
+    st-icon:not(.st-sidemenu-item-group-icon) {
       display: flex;
       align-items: center;
-      --st-icon-size: var(--st-icon-size-sm, 16px);
+      justify-content: center;
+      width: var(--st-sidemenu-item-visual-width);
+      height: var(--st-sidemenu-item-visual-width);
+      --st-icon-size: var(--st-sidemenu-item-icon-size);
+      flex-shrink: 0;
     }
+
+    st-avatar {
+      --avatar-size: var(--st-sidemenu-item-avatar-size);
+      width: var(--st-sidemenu-item-avatar-size);
+      height: var(--st-sidemenu-item-avatar-size);
+      min-width: var(--st-sidemenu-item-avatar-size);
+      min-height: var(--st-sidemenu-item-avatar-size);
+      max-width: var(--st-sidemenu-item-avatar-size);
+      max-height: var(--st-sidemenu-item-avatar-size);
+      flex-shrink: 0;
+
+      span {
+        font-size: calc(var(--st-sidemenu-item-avatar-size) * 0.45);
+      }
+    }
+
+    .st-sidemenu-item-secondary-action {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      border: none;
+      padding: var(--st-space-1, 4px);
+      margin-left: auto;
+      border-radius: var(--st-radius-sm, 2px);
+      color: var(--st-color-text-tertiary);
+      cursor: pointer;
+      line-height: 1;
+      transition: background-color 0.15s ease, color 0.15s ease;
+
+      &:hover {
+        background-color: var(--st-color-bg-raised-hover, rgba(255, 255, 255, 0.1));
+        color: var(--st-color-text-primary);
+      }
+
+      st-icon {
+        width: auto;
+        height: auto;
+        transition: transform 0.2s ease;
+      }
+    }
+
+    &.st-sidemenu-item-group-expanded .st-sidemenu-item-secondary-action st-icon {
+      transform: rotate(180deg);
+    }
+
+
   }
 }

package/assets/styles/components/slider.scss

@@ -1,12 +1,40 @@
 st-slider {
   --st-slider-track-height: var(--st-size-xxs);
-  --st-slider-track-color: var(--st-bg-light);
+  --st-slider-track-color: var(--st-color-bg-raised);
   --st-slider-thumb-size: var(--st-size-sm);
-  --st-slider-thumb-color: var(--st-bg-contrast);
+  --st-slider-thumb-color: var(--st-color-text-primary);
   --st-slider-tick-color: var(--st-border);
   --st-slider-tick-width: 1px;
   width: 100%;
   height: var(--st-slider-thumb-size);
+  display: block;
+
+  &.st-disabled,
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: 0.45;
+
+    .range-wrapper input[type='range']::-webkit-slider-runnable-track {
+      background-color: var(--st-color-bg-disabled, var(--st-slider-track-color));
+    }
+
+    .range-wrapper input[type='range']::-moz-range-track {
+      background-color: var(--st-color-bg-disabled, var(--st-slider-track-color));
+    }
+
+    input[type='range']::-webkit-slider-thumb {
+      background-color: var(--st-color-text-disabled, var(--st-slider-thumb-color));
+    }
+
+    input[type='range']::-moz-range-thumb {
+      background-color: var(--st-color-text-disabled, var(--st-slider-thumb-color));
+    }
+
+    .range-wrapper,
+    input[type='range'] {
+      cursor: not-allowed;
+    }
+  }
 
   /* slider track */
   .range-wrapper input[type='range']::-webkit-slider-runnable-track {

package/assets/styles/components/stepper.scss

@@ -0,0 +1,378 @@
+st-stepper {
+  --st-stepper-indicator-size: 32px;
+  --st-stepper-indicator-font-size: var(--st-font-md, 14px);
+  --st-stepper-indicator-font-weight: 600;
+  --st-stepper-title-font-size: var(--st-font-md, 14px);
+  --st-stepper-desc-font-size: var(--st-font-sm, 12px);
+
+  --st-stepper-line-thickness: 2px;
+  --st-stepper-line-color: var(--st-color-border-subtle);
+  --st-stepper-line-active-color: var(--st-color-text-primary);
+
+  --st-stepper-future-indicator-bg: var(--st-color-bg-default);
+  --st-stepper-future-indicator-border: var(--st-color-border-strong);
+  --st-stepper-future-indicator-color: var(--st-color-text-tertiary);
+  --st-stepper-future-title-color: var(--st-color-text-secondary);
+  --st-stepper-future-desc-color: var(--st-color-text-tertiary);
+
+  --st-stepper-current-indicator-bg: var(--st-color-text-primary);
+  --st-stepper-current-indicator-border: var(--st-color-text-primary);
+  --st-stepper-current-indicator-color: var(--st-color-text-inverse);
+  --st-stepper-current-halo: 0 0 0 3px var(--st-color-border-default);
+  --st-stepper-current-title-color: var(--st-color-text-primary);
+  --st-stepper-current-desc-color: var(--st-color-text-secondary);
+
+  --st-stepper-completed-indicator-bg: var(--st-color-control-bg);
+  --st-stepper-completed-indicator-border: var(--st-color-text-primary);
+  --st-stepper-completed-indicator-color: var(--st-color-text-primary);
+  --st-stepper-completed-title-color: var(--st-color-text-primary);
+  --st-stepper-completed-desc-color: var(--st-color-text-secondary);
+
+  --st-stepper-error-indicator-bg: var(--st-color-feedback-error-subtle);
+  --st-stepper-error-indicator-border: var(--st-color-feedback-error-default);
+  --st-stepper-error-indicator-color: var(--st-color-feedback-error-text);
+  --st-stepper-error-title-color: var(--st-color-feedback-error-text);
+  --st-stepper-error-desc-color: var(--st-color-text-tertiary);
+
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+
+  &.st-size-sm {
+    --st-stepper-indicator-size: 24px;
+    --st-stepper-indicator-font-size: var(--st-font-xs, 10px);
+    --st-stepper-title-font-size: var(--st-font-sm, 12px);
+    --st-stepper-desc-font-size: var(--st-font-xs, 10px);
+  }
+
+  &.st-size-md {
+    --st-stepper-indicator-size: 32px;
+    --st-stepper-indicator-font-size: var(--st-font-md, 14px);
+    --st-stepper-title-font-size: var(--st-font-md, 14px);
+    --st-stepper-desc-font-size: var(--st-font-sm, 12px);
+  }
+
+  &.st-theme-brand {
+    --st-stepper-line-active-color: var(--st-color-accent-default);
+
+    --st-stepper-current-indicator-bg: var(--st-color-accent-default);
+    --st-stepper-current-indicator-border: var(--st-color-accent-default);
+    --st-stepper-current-indicator-color: var(--st-color-text-on-accent);
+    --st-stepper-current-halo: 0 0 0 3px var(--st-color-accent-subtle);
+
+    --st-stepper-completed-indicator-bg: var(--st-color-accent-subtle);
+    --st-stepper-completed-indicator-border: var(--st-color-accent-default);
+    --st-stepper-completed-indicator-color: var(--st-color-accent-text);
+  }
+
+  &.st-theme-success {
+    --st-stepper-line-active-color: var(--st-color-feedback-success-default);
+
+    --st-stepper-current-indicator-bg: var(--st-color-feedback-success-default);
+    --st-stepper-current-indicator-border: var(--st-color-feedback-success-default);
+    --st-stepper-current-indicator-color: var(--st-color-text-inverse);
+    --st-stepper-current-halo: 0 0 0 3px var(--st-color-feedback-success-subtle);
+
+    --st-stepper-completed-indicator-bg: var(--st-color-feedback-success-subtle);
+    --st-stepper-completed-indicator-border: var(--st-color-feedback-success-default);
+    --st-stepper-completed-indicator-color: var(--st-color-feedback-success-text);
+  }
+
+  &.st-theme-info {
+    --st-stepper-line-active-color: var(--st-color-feedback-info-default);
+
+    --st-stepper-current-indicator-bg: var(--st-color-feedback-info-default);
+    --st-stepper-current-indicator-border: var(--st-color-feedback-info-default);
+    --st-stepper-current-indicator-color: var(--st-color-text-inverse);
+    --st-stepper-current-halo: 0 0 0 3px var(--st-color-feedback-info-subtle);
+
+    --st-stepper-completed-indicator-bg: var(--st-color-feedback-info-subtle);
+    --st-stepper-completed-indicator-border: var(--st-color-feedback-info-default);
+    --st-stepper-completed-indicator-color: var(--st-color-feedback-info-text);
+  }
+
+  &.st-theme-warning {
+    --st-stepper-line-active-color: var(--st-color-feedback-warning-default);
+
+    --st-stepper-current-indicator-bg: var(--st-color-feedback-warning-default);
+    --st-stepper-current-indicator-border: var(--st-color-feedback-warning-default);
+    --st-stepper-current-indicator-color: var(--st-color-neutral-900);
+    --st-stepper-current-halo: 0 0 0 3px var(--st-color-feedback-warning-subtle);
+
+    --st-stepper-completed-indicator-bg: var(--st-color-feedback-warning-subtle);
+    --st-stepper-completed-indicator-border: var(--st-color-feedback-warning-default);
+    --st-stepper-completed-indicator-color: var(--st-color-feedback-warning-text);
+  }
+
+  &.st-theme-danger {
+    --st-stepper-line-active-color: var(--st-color-feedback-error-default);
+
+    --st-stepper-current-indicator-bg: var(--st-color-feedback-error-default);
+    --st-stepper-current-indicator-border: var(--st-color-feedback-error-default);
+    --st-stepper-current-indicator-color: var(--st-color-text-inverse);
+    --st-stepper-current-halo: 0 0 0 3px var(--st-color-feedback-error-subtle);
+
+    --st-stepper-completed-indicator-bg: var(--st-color-feedback-error-subtle);
+    --st-stepper-completed-indicator-border: var(--st-color-feedback-error-default);
+    --st-stepper-completed-indicator-color: var(--st-color-feedback-error-text);
+  }
+
+  .st-stepper-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    box-sizing: border-box;
+  }
+
+  &.st-orientation-horizontal .st-stepper-list {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  &.st-orientation-vertical .st-stepper-list {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+}
+
+st-step {
+  display: block;
+  box-sizing: border-box;
+
+  &.st-orientation-horizontal {
+    flex: 1;
+    min-width: 0;
+
+    .st-step-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+    }
+
+    .st-step-top {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      align-self: stretch;
+      position: relative;
+    }
+
+    .st-step-line {
+      flex: 1;
+      height: var(--st-stepper-line-thickness);
+      background-color: var(--st-stepper-line-color);
+      transition: background-color 0.2s ease;
+      margin: 0;
+
+      &.st-line-active {
+        background-color: var(--st-stepper-line-active-color);
+      }
+    }
+
+    .st-step-line-after {
+      margin-right: -1px;
+    }
+
+    .st-step-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      margin-top: var(--st-size-xs, 8px);
+      width: 100%;
+      padding: 0 var(--st-size-xxs, 4px);
+      box-sizing: border-box;
+    }
+
+    &.st-step-first {
+      .st-step-wrapper {
+        align-items: flex-start;
+      }
+
+      .st-step-content {
+        align-items: flex-start;
+        text-align: left;
+        padding-left: 0;
+      }
+    }
+
+    &.st-step-last {
+      .st-step-wrapper {
+        align-items: flex-end;
+      }
+
+      .st-step-content {
+        align-items: flex-end;
+        text-align: right;
+        padding-right: 0;
+      }
+    }
+
+    .st-step-title {
+      font-size: var(--st-stepper-title-font-size);
+      line-height: 1.3;
+      font-weight: 500;
+      transition: color 0.2s ease, font-size 0.2s ease;
+      word-break: break-word;
+    }
+
+    .st-step-description {
+      font-size: var(--st-stepper-desc-font-size);
+      line-height: 1.3;
+      margin-top: var(--st-size-xxxxs, 2px);
+      transition: color 0.2s ease, font-size 0.2s ease;
+      word-break: break-word;
+    }
+  }
+
+  &.st-orientation-vertical {
+    width: 100%;
+
+    .st-step-wrapper {
+      display: flex;
+      flex-direction: row;
+      width: 100%;
+    }
+
+    .st-step-vertical-left {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex: 0 0 auto;
+      margin-right: var(--st-size-sm, 16px);
+      position: relative;
+    }
+
+    .st-step-vertical-line {
+      width: var(--st-stepper-line-thickness);
+      flex: 1;
+      min-height: var(--st-size-xl, 32px);
+      background-color: var(--st-stepper-line-color);
+      transition: background-color 0.2s ease;
+
+      &.st-line-active {
+        background-color: var(--st-stepper-line-active-color);
+      }
+    }
+
+    .st-step-content {
+      flex: 1;
+      min-width: 0;
+      padding-bottom: var(--st-size-md, 24px);
+    }
+
+    &.st-step-last .st-step-content {
+      padding-bottom: 0;
+    }
+
+    .st-step-header {
+      display: flex;
+      flex-direction: column;
+      min-height: var(--st-stepper-indicator-size);
+      justify-content: center;
+    }
+
+    .st-step-title {
+      font-size: var(--st-stepper-title-font-size);
+      line-height: 1.3;
+      font-weight: 500;
+      transition: color 0.2s ease;
+    }
+
+    .st-step-description {
+      font-size: var(--st-stepper-desc-font-size);
+      line-height: 1.3;
+      margin-top: var(--st-size-xxxxs, 2px);
+      transition: color 0.2s ease;
+    }
+
+    .st-step-body {
+      margin-top: var(--st-size-xs, 8px);
+    }
+  }
+
+  .st-step-indicator {
+    flex: 0 0 auto;
+    width: var(--st-stepper-indicator-size);
+    height: var(--st-stepper-indicator-size);
+    border-radius: var(--st-border-radius-full, 9999px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--st-stepper-indicator-font-size);
+    font-weight: var(--st-stepper-indicator-font-weight);
+    box-sizing: border-box;
+    transition: all 0.2s ease;
+    z-index: 1;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &.st-state-future {
+    .st-step-indicator {
+      background-color: var(--st-stepper-future-indicator-bg);
+      border: 1px solid var(--st-stepper-future-indicator-border);
+      color: var(--st-stepper-future-indicator-color);
+    }
+
+    .st-step-title {
+      color: var(--st-stepper-future-title-color);
+    }
+
+    .st-step-description {
+      color: var(--st-stepper-future-desc-color);
+    }
+  }
+
+  &.st-state-current {
+    .st-step-indicator {
+      background-color: var(--st-stepper-current-indicator-bg);
+      border: 1px solid var(--st-stepper-current-indicator-border);
+      color: var(--st-stepper-current-indicator-color);
+      box-shadow: var(--st-stepper-current-halo);
+    }
+
+    .st-step-title {
+      color: var(--st-stepper-current-title-color);
+      font-weight: 600;
+    }
+
+    .st-step-description {
+      color: var(--st-stepper-current-desc-color);
+    }
+  }
+
+  &.st-state-completed {
+    .st-step-indicator {
+      background-color: var(--st-stepper-completed-indicator-bg);
+      border: 1px solid var(--st-stepper-completed-indicator-border);
+      color: var(--st-stepper-completed-indicator-color);
+    }
+
+    .st-step-title {
+      color: var(--st-stepper-completed-title-color);
+    }
+
+    .st-step-description {
+      color: var(--st-stepper-completed-desc-color);
+    }
+  }
+
+  &.st-state-error {
+    .st-step-indicator {
+      background-color: var(--st-stepper-error-indicator-bg);
+      border: 1px solid var(--st-stepper-error-indicator-border);
+      color: var(--st-stepper-error-indicator-color);
+    }
+
+    .st-step-title {
+      color: var(--st-stepper-error-title-color);
+    }
+
+    .st-step-description {
+      color: var(--st-stepper-error-desc-color);
+    }
+  }
+}

package/assets/styles/components/table.scss

@@ -62,7 +62,7 @@ st-card {
   }
 
   &:not(.outline) table.st-table {
-    --st-table-background-color-even-row: var(--st-bg-light);
+    --st-table-background-color-even-row: var(--st-color-bg-raised);
     --st-table-divider-color: var(--st-border-muted);
   }
 }

package/assets/styles/components/tabs.scss

@@ -37,7 +37,7 @@ st-tabs {
 
     &:focus-visible {
       outline: none;
-      background-color: var(--st-bg-light);
+      background-color: var(--st-color-bg-raised);
       border-radius: var(--st-border-radius-sm);
     }
 

package/assets/styles/components/toggle.scss

@@ -12,6 +12,7 @@ st-toggle {
 
   display: inline-flex;
   align-items: center;
+  min-height: var(--st-interactive-element-height-md);
   gap: var(--st-toggle-gap);
   cursor: pointer;
   user-select: none;