ngx-strata 0.3.0 → 0.4.0

package/assets/icons/check.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M9.9997 15.1709L19.1921 5.97852L20.6063 7.39273L9.9997 17.9993L3.63574 11.6354L5.04996 10.2212L9.9997 15.1709Z"></path></svg>

package/assets/styles/components/accordion.scss

@@ -39,6 +39,10 @@ st-accordion-item {
     height: 54px;
     width: 100%;
     margin-right: auto;
+    border: none;
+    background: transparent;
+    color: var(--st-color-text-primary);
+    font-family: inherit;
     border-radius: var(--st-border-radius-sm);
     padding-left: 16px;
     padding-right: 16px;
@@ -47,9 +51,16 @@ st-accordion-item {
     user-select: none;
     font-size: 16px;
     font-weight: 600;
+    text-align: left;
+    outline: none;
+
+    &:focus-visible {
+      outline: 2px solid var(--st-color-accent-default);
+      outline-offset: -2px;
+    }
 
     &:hover {
-      background-color: var(--st-bg-light);
+      background-color: var(--st-color-bg-default);
       cursor: pointer;
     }
 

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

@@ -12,7 +12,7 @@ st-action-menu-item {
   user-select: none;
 
   &:hover {
-    background-color: var(--st-bg-light);
+    background-color: var(--st-color-control-bg-hover);
     cursor: pointer;
   }
 

package/assets/styles/components/avatar.scss

@@ -23,7 +23,7 @@ st-avatar {
   color: var(--st-avatar-text-color);
   fill: var(--st-avatar-text-color);
 
-  span {
+  > span {
     font-weight: bold;
     user-select: none;
   }
@@ -33,6 +33,45 @@ st-avatar {
     height: 100%;
     object-fit: var(--st-avatar-object-fit);
   }
+
+  &:has(> st-badge:not(.st-badge-placement-inline)) {
+    position: relative;
+    overflow: visible;
+
+    img {
+      border-radius: var(--avatar-size);
+    }
+  }
+
+  > st-badge:not(.st-badge-placement-inline) {
+    position: absolute;
+    z-index: 1;
+    --st-badge-border-color: var(--st-current-bg-color, var(--st-color-bg-raised));
+
+    &.st-badge-placement-bottom-right {
+      bottom: 14%;
+      right: 14%;
+      transform: translate(50%, 50%);
+    }
+
+    &.st-badge-placement-top-right {
+      top: 14%;
+      right: 14%;
+      transform: translate(50%, -50%);
+    }
+
+    &.st-badge-placement-bottom-left {
+      bottom: 14%;
+      left: 14%;
+      transform: translate(-50%, 50%);
+    }
+
+    &.st-badge-placement-top-left {
+      top: 14%;
+      left: 14%;
+      transform: translate(-50%, -50%);
+    }
+  }
 }
 
 st-avatar.st-theme-success {
@@ -63,7 +102,7 @@ st-avatar.st-theme-brand {
 st-avatar-stack.xs>st-avatar {
   --avatar-size: 20px;
 
-  span {
+  > span {
     font-size: 0.6rem !important;
   }
 }
@@ -71,7 +110,7 @@ st-avatar-stack.xs>st-avatar {
 st-avatar.xs {
   --avatar-size: 20px;
 
-  span {
+  > span {
     font-size: 0.6rem;
   }
 }
@@ -79,7 +118,7 @@ st-avatar.xs {
 st-avatar-stack.sm>st-avatar {
   --avatar-size: 32px;
 
-  span {
+  > span {
     font-size: 0.8rem !important;
   }
 }
@@ -87,7 +126,7 @@ st-avatar-stack.sm>st-avatar {
 st-avatar.sm {
   --avatar-size: 32px;
 
-  span {
+  > span {
     font-size: 0.8rem;
   }
 }
@@ -95,7 +134,7 @@ st-avatar.sm {
 st-avatar-stack.md>st-avatar {
   --avatar-size: 48px;
 
-  span {
+  > span {
     font-size: 1rem !important;
   }
 }
@@ -103,7 +142,7 @@ st-avatar-stack.md>st-avatar {
 st-avatar.md {
   --avatar-size: 48px;
 
-  span {
+  > span {
     font-size: 1rem;
   }
 }
@@ -111,7 +150,7 @@ st-avatar.md {
 st-avatar-stack.lg>st-avatar {
   --avatar-size: 72px;
 
-  span {
+  > span {
     font-size: 1.6rem !important;
   }
 }
@@ -119,7 +158,7 @@ st-avatar-stack.lg>st-avatar {
 st-avatar.lg {
   --avatar-size: 72px;
 
-  span {
+  > span {
     font-size: 1.6rem;
   }
 }

package/assets/styles/components/badge.scss

@@ -0,0 +1,134 @@
+st-badge {
+  --st-badge-bg: var(--st-color-accent-default);
+  --st-badge-color: var(--st-color-text-on-accent);
+  --st-badge-border-color: var(--st-current-bg-color, transparent);
+  --st-badge-border-width: 2px;
+  --st-badge-height: 20px;
+  --st-badge-min-width: 20px;
+  --st-badge-padding-x: 6px;
+  --st-badge-font-size: var(--st-font-sm);
+  --st-badge-dot-size: var(--st-badge-height);
+  --st-badge-icon-size: 11px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  vertical-align: middle;
+  box-sizing: border-box;
+  border-radius: 9999px;
+  user-select: none;
+  white-space: nowrap;
+  font-weight: 600;
+  font-family: inherit;
+
+  background-color: var(--st-badge-bg);
+  color: var(--st-badge-color);
+  border: var(--st-badge-border-width) solid var(--st-badge-border-color);
+
+  height: var(--st-badge-height);
+  min-width: var(--st-badge-min-width);
+  padding: 0 var(--st-badge-padding-x);
+  font-size: var(--st-badge-font-size);
+
+  .st-badge-value {
+    font-size: var(--st-badge-font-size);
+    line-height: 1;
+  }
+
+  &.st-badge-hidden {
+    display: none !important;
+  }
+
+  &.st-badge-dot {
+    width: var(--st-badge-height);
+    height: var(--st-badge-height);
+    min-width: var(--st-badge-height);
+    max-width: var(--st-badge-height);
+    padding: 0;
+    border-radius: 50%;
+  }
+
+  &.st-badge-icon-only {
+    width: var(--st-badge-height);
+    height: var(--st-badge-height);
+    min-width: var(--st-badge-height);
+    max-width: var(--st-badge-height);
+    padding: 0;
+    border-radius: 50%;
+  }
+
+  st-icon {
+    width: var(--st-badge-icon-size);
+    height: var(--st-badge-icon-size);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &.st-badge-xs {
+    --st-badge-height: 8px;
+    --st-badge-min-width: 8px;
+    width: 8px;
+    height: 8px;
+    min-width: 8px;
+    max-width: 8px;
+    padding: 0;
+    border-radius: 50%;
+  }
+
+  &.st-badge-sm {
+    --st-badge-height: 14px;
+    --st-badge-min-width: 14px;
+    --st-badge-font-size: var(--st-font-xs);
+    --st-badge-padding-x: 4px;
+    --st-badge-icon-size: 8px;
+  }
+
+  &.st-badge-md {
+    --st-badge-height: 20px;
+    --st-badge-min-width: 20px;
+    --st-badge-font-size: var(--st-font-sm);
+    --st-badge-padding-x: 6px;
+    --st-badge-icon-size: 11px;
+  }
+
+  &.st-badge-accent {
+    --st-badge-bg: var(--st-color-accent-default);
+    --st-badge-color: var(--st-color-text-on-accent);
+  }
+
+  &.st-badge-neutral {
+    --st-badge-bg: var(--st-color-control-bg);
+    --st-badge-color: var(--st-color-text-primary);
+  }
+
+  &.st-badge-success {
+    --st-badge-bg: var(--st-color-feedback-success-default);
+    --st-badge-color: var(--st-color-text-inverse);
+  }
+
+  &.st-badge-warning {
+    --st-badge-bg: var(--st-color-feedback-warning-subtle);
+    --st-badge-color: var(--st-color-feedback-warning-text);
+  }
+
+  &.st-badge-dot.st-badge-warning {
+    --st-badge-bg: var(--st-color-feedback-warning-default);
+  }
+
+  &.st-badge-error {
+    --st-badge-bg: var(--st-color-feedback-error-default);
+    --st-badge-color: var(--st-color-text-inverse);
+  }
+
+  &.st-badge-info {
+    --st-badge-bg: var(--st-color-feedback-info-default);
+    --st-badge-color: var(--st-color-text-inverse);
+  }
+}

package/assets/styles/components/button.scss

@@ -50,6 +50,51 @@ button[stButton] {
   border-radius: var(--st-border-radius-sm);
   background-color: var(--st-button-background-color);
 
+  &:has(> st-badge:not(.st-badge-placement-inline)) {
+    position: relative;
+    overflow: visible;
+  }
+
+  > st-badge:not(.st-badge-placement-inline) {
+    --st-badge-border-color: var(--st-button-background-color);
+
+    &.st-badge-placement-top-right {
+      position: absolute;
+      top: 0;
+      right: 0;
+      transform: translate(50%, -50%);
+      z-index: 1;
+    }
+
+    &.st-badge-placement-bottom-right {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      transform: translate(50%, 50%);
+      z-index: 1;
+    }
+
+    &.st-badge-placement-top-left {
+      position: absolute;
+      top: 0;
+      left: 0;
+      transform: translate(-50%, -50%);
+      z-index: 1;
+    }
+
+    &.st-badge-placement-bottom-left {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      transform: translate(-50%, 50%);
+      z-index: 1;
+    }
+  }
+
+  > st-badge.st-badge-placement-inline {
+    margin-left: var(--st-space-2);
+  }
+
   &.st-size-sm {
     height: var(--st-interactive-element-height-sm);
     font-size: 12px;

package/assets/styles/components/checkbox.scss

@@ -5,8 +5,9 @@ st-checkbox {
 
 
   user-select: none;
-  display: flex;
+  display: inline-flex;
   align-items: center;
+  min-height: var(--st-interactive-element-height-md);
   gap: var(--st-size-xxs);
   input {
     position: absolute;
@@ -63,11 +64,18 @@ st-checkbox {
   &:hover {
     cursor: pointer;
     .checkbox-visual {
-      background-color: var(--st-bg-light);
+      background-color: var(--st-color-bg-raised);
     }
 
     input:checked + .checkbox-visual {
       background-color: var(--st-checkbox-checked-bg-hover-color);
     }
   }
+
+  &[data-disabled="true"],
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+    pointer-events: none;
+  }
 }

package/assets/styles/components/file-upload.scss

@@ -0,0 +1,113 @@
+st-file-upload {
+  --st-file-upload-bg: var(--st-color-bg-default);
+  --st-file-upload-border: var(--st-color-border-default);
+  --st-file-upload-text: var(--st-color-text-primary);
+  --st-file-upload-hint: var(--st-color-text-secondary);
+  --st-file-upload-hover-bg: var(--st-color-bg-raised);
+  --st-file-upload-hover-border: var(--st-color-accent-default);
+  --st-file-upload-active-border: var(--st-color-accent-default);
+  --st-file-upload-active-bg: var(--st-color-accent-subtle, var(--st-color-bg-raised));
+  --st-file-upload-icon-color: var(--st-color-text-secondary);
+  --st-file-upload-radius: 8px;
+
+  display: block;
+  position: relative;
+  box-sizing: border-box;
+  background-color: var(--st-file-upload-bg);
+  border: 2px dashed var(--st-file-upload-border);
+  border-radius: var(--st-file-upload-radius);
+  padding: var(--st-space-6) var(--st-space-4);
+  text-align: center;
+  cursor: pointer;
+  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
+  user-select: none;
+  outline: none;
+
+  &:hover:not(.st-disabled) {
+    background-color: var(--st-file-upload-hover-bg);
+    border-color: var(--st-file-upload-hover-border);
+
+    .st-file-upload-icon {
+      color: var(--st-color-accent-default);
+      transform: translateY(-2px);
+    }
+  }
+
+  &:focus-visible:not(.st-disabled) {
+    outline: 2px solid var(--st-color-accent-default);
+    outline-offset: 2px;
+  }
+
+  &.st-drag-over {
+    background-color: var(--st-file-upload-active-bg);
+    border-color: var(--st-file-upload-active-border);
+    border-style: solid;
+    transform: scale(1.01);
+
+    .st-file-upload-icon {
+      color: var(--st-color-accent-default);
+      transform: translateY(-4px) scale(1.1);
+    }
+  }
+
+  &.st-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .st-file-upload-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  .st-file-upload-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--st-space-3);
+  }
+
+  .st-file-upload-icon-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    background-color: var(--st-color-bg-raised);
+    transition: transform 0.2s ease;
+  }
+
+  .st-file-upload-icon {
+    width: 24px;
+    height: 24px;
+    color: var(--st-file-upload-icon-color);
+    transition: color 0.2s ease, transform 0.2s ease;
+  }
+
+  .st-file-upload-text {
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-space-1);
+  }
+
+  .st-file-upload-label {
+    font-size: 0.95rem;
+    font-weight: 500;
+    color: var(--st-file-upload-text);
+  }
+
+  .st-file-upload-hint {
+    font-size: 0.8rem;
+    color: var(--st-file-upload-hint);
+  }
+}

package/assets/styles/components/image-cropper.scss

@@ -0,0 +1,201 @@
+st-image-cropper {
+  --st-image-cropper-bg: var(--st-color-bg-default);
+  --st-image-cropper-border: var(--st-color-border-default);
+  --st-image-cropper-mask-border: var(--st-color-accent-default);
+  --st-image-cropper-mask-backdrop: rgba(0, 0, 0, 0.55);
+  --st-image-cropper-radius: 8px;
+
+  display: block;
+  box-sizing: border-box;
+  background-color: var(--st-image-cropper-bg);
+  border: 1px solid var(--st-image-cropper-border);
+  border-radius: var(--st-image-cropper-radius);
+  overflow: hidden;
+
+  &.st-disabled {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+
+  .st-cropper-empty-state {
+    padding: var(--st-space-6) var(--st-space-4);
+  }
+
+  .st-cropper-empty-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--st-space-3);
+    padding: var(--st-space-8) var(--st-space-4);
+    color: var(--st-color-text-secondary);
+    font-size: 0.9rem;
+
+    .st-cropper-placeholder-icon {
+      width: 40px;
+      height: 40px;
+      opacity: 0.6;
+    }
+  }
+
+  .st-cropper-workspace {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+  }
+
+  .st-cropper-viewport {
+    position: relative;
+    width: 100%;
+    background-color: #111418;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .st-cropper-stage {
+    position: relative;
+    width: 100%;
+    height: calc(var(--st-cropper-mask-size, 240px) + var(--st-space-10));
+    min-height: 280px;
+    overflow: hidden;
+    cursor: grab;
+    user-select: none;
+    touch-action: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .st-is-dragging & {
+      cursor: grabbing;
+    }
+  }
+
+  .st-cropper-image-layer {
+    position: absolute;
+    inset: 0;
+    overflow: hidden;
+  }
+
+  .st-cropper-image {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform-origin: center center;
+    max-width: none;
+    max-height: none;
+    pointer-events: none;
+    user-select: none;
+    will-change: transform;
+  }
+
+  .st-cropper-mask {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: var(--st-cropper-mask-size, 240px);
+    height: var(--st-cropper-mask-size, 240px);
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+    box-shadow: 0 0 0 9999px var(--st-image-cropper-mask-backdrop);
+    border: 2px solid var(--st-image-cropper-mask-border);
+    box-sizing: border-box;
+
+    &.st-crop-shape-circle {
+      border-radius: 50%;
+    }
+
+    &.st-crop-shape-square {
+      border-radius: 4px;
+    }
+  }
+
+  .st-cropper-floating-close {
+    position: absolute;
+    top: var(--st-space-3);
+    right: var(--st-space-3);
+    z-index: 20;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border-radius: 50%;
+    background-color: var(--st-color-feedback-error-bg, #ef4444);
+    border: none;
+    color: #ffffff;
+    cursor: pointer;
+    transition: background-color 0.15s ease, transform 0.15s ease;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+
+    &:hover:not(:disabled) {
+      background-color: #dc2626;
+      transform: scale(1.1);
+    }
+
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+  }
+
+  .st-cropper-overlay-controls {
+    position: relative;
+    width: 100%;
+    z-index: 10;
+    display: flex;
+    flex-direction: column;
+    gap: var(--st-space-2);
+    padding: var(--st-space-2) var(--st-space-4) var(--st-space-3);
+    box-sizing: border-box;
+    background-color: #111418;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .st-cropper-buttons-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--st-space-2);
+    width: 100%;
+  }
+
+  .st-cropper-align-group {
+    display: flex;
+    align-items: center;
+    gap: var(--st-space-2);
+    margin-left: auto;
+  }
+
+  .st-cropper-slider-row {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .st-cropper-slider {
+    flex: 1;
+    width: 100%;
+  }
+
+  .st-cropper-icon-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+
+    svg {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}