ngx-strata 0.5.0 → 0.5.2

package/assets/styles/components/_breadcrumb.scss

@@ -35,6 +35,10 @@
     border-radius: var(--st-border-radius-sm, 4px);
     outline-offset: 2px;
 
+    st-badge {
+      flex-shrink: 0;
+    }
+
     &:focus-visible {
       outline: 2px solid var(--st-color-accent-default);
     }

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

@@ -0,0 +1,260 @@
+st-number-stepper {
+  --st-number-stepper-bg-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);
+  --st-number-stepper-border-radius: var(--st-border-radius-md);
+  --st-number-stepper-btn-width: var(--st-interactive-element-height-md);
+  --st-number-stepper-btn-bg: transparent;
+  --st-number-stepper-btn-hover-bg: var(--st-color-control-bg-hover);
+  --st-number-stepper-btn-active-bg: var(--st-color-control-bg-active);
+  --st-number-stepper-btn-color: var(--st-color-text-secondary);
+  --st-number-stepper-btn-hover-color: var(--st-color-text-primary);
+  --st-number-stepper-btn-icon-size: var(--st-font-md);
+  --st-number-stepper-footer-font-size: var(--st-font-sm);
+
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  label {
+    margin-bottom: var(--st-space-2);
+  }
+
+  &.st-size-sm {
+    --st-number-stepper-height: var(--st-interactive-element-height-sm);
+    --st-number-stepper-font-size: var(--st-font-sm);
+    --st-number-stepper-border-radius: var(--st-border-radius-sm);
+    --st-number-stepper-btn-width: var(--st-interactive-element-height-sm);
+    --st-number-stepper-btn-icon-size: var(--st-font-sm);
+    --st-number-stepper-footer-font-size: var(--st-font-xs);
+  }
+
+  &.st-size-md {
+    --st-number-stepper-height: var(--st-interactive-element-height-md);
+    --st-number-stepper-font-size: var(--st-font-md);
+    --st-number-stepper-border-radius: var(--st-border-radius-md);
+    --st-number-stepper-btn-width: var(--st-interactive-element-height-md);
+    --st-number-stepper-btn-icon-size: var(--st-font-md);
+    --st-number-stepper-footer-font-size: var(--st-font-sm);
+  }
+
+  &.st-size-lg {
+    --st-number-stepper-height: var(--st-interactive-element-height-lg);
+    --st-number-stepper-font-size: var(--st-font-md);
+    --st-number-stepper-border-radius: var(--st-border-radius-md);
+    --st-number-stepper-btn-width: var(--st-interactive-element-height-lg);
+    --st-number-stepper-btn-icon-size: var(--st-font-lg);
+    --st-number-stepper-footer-font-size: var(--st-font-sm);
+  }
+
+  .st-stepper-wrapper {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    box-sizing: border-box;
+    height: var(--st-number-stepper-height);
+    min-height: var(--st-number-stepper-height);
+    background-color: var(--st-number-stepper-bg-color);
+    border: 1px solid var(--st-number-stepper-border-color);
+    border-radius: var(--st-number-stepper-border-radius);
+    overflow: hidden;
+    transition:
+      border-color var(--st-transition-fast),
+      background-color var(--st-transition-fast),
+      box-shadow var(--st-transition-fast);
+
+    &:focus-within {
+      outline: var(--st-focus-ring-width) var(--st-focus-ring-style) var(--st-focus-ring-color);
+      outline-offset: var(--st-focus-ring-offset);
+    }
+
+    &:hover {
+      background-color: var(--st-number-stepper-bg-hover-color);
+      border-color: var(--st-number-stepper-border-hover-color);
+    }
+  }
+
+  input {
+    border: none;
+    background: none;
+    flex: 1;
+    min-width: 0;
+    width: 100%;
+    height: 100%;
+    color: var(--st-number-stepper-text-color);
+    font-size: var(--st-number-stepper-font-size);
+    font-family: inherit;
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+    padding: 0 var(--st-space-2);
+    box-sizing: border-box;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  .st-stepper-btn {
+    border: none;
+    background: var(--st-number-stepper-btn-bg);
+    color: var(--st-number-stepper-btn-color);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    transition:
+      background-color var(--st-transition-fast),
+      color var(--st-transition-fast);
+    user-select: none;
+
+    &:hover:not(:disabled) {
+      background-color: var(--st-number-stepper-btn-hover-bg);
+      color: var(--st-number-stepper-btn-hover-color);
+    }
+
+    &:active:not(:disabled) {
+      background-color: var(--st-number-stepper-btn-active-bg);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: 0.4;
+    }
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  &.st-layout-split {
+    .st-stepper-btn {
+      width: var(--st-number-stepper-btn-width);
+      min-width: var(--st-number-stepper-btn-width);
+      height: 100%;
+
+      st-icon {
+        font-size: var(--st-number-stepper-btn-icon-size);
+      }
+    }
+
+    .st-stepper-btn-dec {
+      border-right: 1px solid var(--st-number-stepper-border-color);
+    }
+
+    .st-stepper-btn-inc {
+      border-left: 1px solid var(--st-number-stepper-border-color);
+    }
+  }
+
+  &.st-layout-stacked {
+    input {
+      text-align: left;
+      padding-left: var(--st-space-3);
+    }
+
+    .st-stepper-stacked-actions {
+      display: flex;
+      flex-direction: column;
+      width: calc(var(--st-number-stepper-btn-width) * 0.75);
+      min-width: calc(var(--st-number-stepper-btn-width) * 0.75);
+      border-left: 1px solid var(--st-number-stepper-border-color);
+      height: 100%;
+
+      .st-stepper-btn {
+        flex: 1;
+        width: 100%;
+        height: 50%;
+
+        st-icon {
+          font-size: calc(var(--st-number-stepper-btn-icon-size) * 0.75);
+        }
+
+        &.st-stepper-btn-inc {
+          border-bottom: 1px solid var(--st-number-stepper-border-color);
+        }
+      }
+    }
+  }
+
+  &.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);
+    }
+  }
+
+  &.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);
+    }
+  }
+
+  &.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);
+    }
+  }
+
+  .st-stepper-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: var(--st-space-2);
+    margin-top: var(--st-space-1);
+    line-height: 1.25;
+  }
+
+  .st-stepper-message {
+    font-size: var(--st-number-stepper-footer-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-disabled,
+  &[disabled],
+  &[data-disabled='true'],
+  &:has(input:disabled),
+  &:has([aria-disabled='true']) {
+    cursor: not-allowed;
+    opacity: var(--st-number-stepper-opacity-disabled);
+    pointer-events: none;
+
+    .st-stepper-wrapper {
+      &:hover {
+        background-color: var(--st-number-stepper-bg-color);
+        border-color: var(--st-number-stepper-border-color);
+      }
+
+      &:focus-within {
+        outline: none;
+      }
+    }
+  }
+}

package/assets/styles/components/_skeleton.scss

@@ -0,0 +1,115 @@
+st-skeleton {
+  --st-skeleton-bg: var(--st-color-skeleton-bg);
+  --st-skeleton-shimmer: var(--st-color-skeleton-shimmer);
+  --st-skeleton-radius: var(--st-border-radius-sm);
+  --st-skeleton-gap: var(--st-space-2);
+  --st-skeleton-height: 1.15em;
+  --st-skeleton-animation-duration: 1.6s;
+
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+
+  &.st-skeleton-xs {
+    --st-skeleton-height: 20px;
+    --st-skeleton-size: 20px;
+  }
+
+  &.st-skeleton-sm {
+    --st-skeleton-height: 32px;
+    --st-skeleton-size: 32px;
+  }
+
+  &.st-skeleton-md {
+    --st-skeleton-height: 48px;
+    --st-skeleton-size: 48px;
+  }
+
+  &.st-skeleton-lg {
+    --st-skeleton-height: 72px;
+    --st-skeleton-size: 72px;
+  }
+
+  &.st-skeleton-circular {
+    --st-skeleton-radius: var(--st-border-radius-full);
+    --st-skeleton-height: var(--st-skeleton-size, 48px);
+    display: inline-block;
+    width: auto;
+
+    .st-skeleton-bone {
+      width: var(--st-skeleton-height);
+      height: var(--st-skeleton-height);
+      aspect-ratio: 1 / 1;
+    }
+  }
+
+  &.st-skeleton-rectangular {
+    --st-skeleton-radius: var(--st-border-radius-md);
+    --st-skeleton-height: 120px;
+  }
+
+  &.st-skeleton-rounded {
+    --st-skeleton-radius: var(--st-border-radius-full);
+    --st-skeleton-height: var(--st-skeleton-size, 36px);
+  }
+
+  .st-skeleton-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-skeleton-gap);
+    width: 100%;
+  }
+
+  .st-skeleton-bone {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: 8px;
+    height: var(--st-skeleton-height);
+    border-radius: var(--st-skeleton-radius);
+    background-color: var(--st-skeleton-bg);
+  }
+
+  &.st-skeleton-anim-shimmer .st-skeleton-bone {
+    background-image: linear-gradient(
+      90deg,
+      var(--st-skeleton-bg) 0%,
+      var(--st-skeleton-shimmer) 50%,
+      var(--st-skeleton-bg) 100%
+    );
+    background-size: 200% 100%;
+    background-repeat: no-repeat;
+    animation: st-skeleton-shimmer var(--st-skeleton-animation-duration) ease-in-out infinite;
+  }
+
+  &.st-skeleton-anim-pulse .st-skeleton-bone {
+    animation: st-skeleton-pulse var(--st-skeleton-animation-duration) ease-in-out infinite;
+  }
+
+  &.st-skeleton-anim-none .st-skeleton-bone {
+    animation: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .st-skeleton-bone {
+      animation: none !important;
+    }
+  }
+}
+
+@keyframes st-skeleton-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes st-skeleton-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.4;
+  }
+}

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 {
@@ -27,6 +41,10 @@ st-action-menu-item {
     display: flex;
     align-items: center;
     height: auto;
+
+    st-badge {
+      flex-shrink: 0;
+    }
   }
 
   .item-start:not(:empty) {

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;
@@ -153,11 +155,23 @@ 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-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);
@@ -166,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);
@@ -174,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);
@@ -228,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);
+      }
     }
   }