ngx-strata 0.2.0 → 0.2.1

package/assets/styles/components/_breadcrumb.scss

@@ -0,0 +1,68 @@
+.st-breadcrumb {
+  --st-breadcrumb-gap: var(--st-spacing-xs, 4px);
+  --st-breadcrumb-color: var(--st-color-text-secondary);
+  --st-breadcrumb-color-active: var(--st-color-text-primary);
+  --st-breadcrumb-separator-color: var(--st-color-text-tertiary);
+  --st-breadcrumb-font-size: var(--st-font-size-sm, 14px);
+
+  display: block;
+  font-size: var(--st-breadcrumb-font-size);
+
+  .st-breadcrumb-list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.st-breadcrumb-item {
+  display: flex;
+  align-items: center;
+  color: var(--st-breadcrumb-color);
+
+  .st-breadcrumb-item-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .st-breadcrumb-item-content {
+    display: flex;
+    align-items: center;
+    gap: var(--st-breadcrumb-gap);
+    border-radius: var(--st-border-radius-sm, 4px);
+    outline-offset: 2px;
+
+    &:focus-visible {
+      outline: 2px solid var(--st-color-accent-default);
+    }
+
+    &.interactable {
+      cursor: pointer;
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: var(--st-breadcrumb-color-active);
+      }
+
+      &:active {
+        opacity: 0.8;
+      }
+    }
+
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  }
+
+  .st-breadcrumb-separator {
+    color: var(--st-breadcrumb-separator-color);
+    display: flex;
+    align-items: center;
+    margin: 0 var(--st-breadcrumb-gap);
+  }
+}

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

@@ -16,6 +16,11 @@ st-action-menu-item {
     cursor: pointer;
   }
 
+  &.active {
+    color: var(--st-color-accent-active);
+    background-color: var(--st-color-bg-raised);
+  }
+
   .item-start,
   .item-end {
     width: min-content;
@@ -45,6 +50,7 @@ st-action-menu-item {
 }
 
 st-item .item-default {
+
   h1,
   h2,
   h3,
@@ -59,8 +65,13 @@ st-item .item-default {
 
 st-card.action-menu-card {
   min-width: 200px;
+  z-index: 10000;
+  background-color: var(--st-color-bg-overlay) !important;
+  box-shadow: var(--st-shadow-2);
+  display: block;
+  pointer-events: auto;
 
   st-action-menu-item:not(:last-child) {
     border-bottom: 1px solid var(--st-border-faded);
   }
-}
+}

package/assets/styles/components/card.scss

@@ -1,6 +1,6 @@
 st-card {
   --st-card-padding: var(--st-size-xs);
-  --st-card-background-color: var(--st-color-bg-raised);
+  --st-card-background-color: var(--st-color-bg-subtle);
 
   width: 100%;
   display: inline-block;

package/assets/styles/components/icon.scss

@@ -32,5 +32,10 @@ st-icon {
     display: flex;
     width: inherit;
     height: inherit;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
   }
 }

package/assets/styles/components/item.scss

@@ -9,14 +9,24 @@ st-item {
   height: fit-content;
   padding-left: var(--st-size-xxs);
   padding-right: var(--st-size-xxs);
+  border-radius: var(--st-border-radius-sm);
 
   &.interactable {
-    &:hover {
+    &:hover,
+    &:focus-visible {
       background-color: var(--st-bg-light);
       cursor: pointer;
     }
   }
 
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    &.interactable {
+      cursor: not-allowed;
+    }
+  }
+
   .item-start,
   .item-end {
     width: min-content;

package/assets/styles/components/overlay.scss

@@ -1,3 +1,7 @@
 .full-anchor-width {
   width: var(--st-overlay-anchor-element-width) !important;
 }
+
+:host-context(body) > * {
+  z-index: 1000;
+}

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

@@ -1,15 +1,28 @@
 st-segmented-control {
-  display: flex;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  width: fit-content;
+  max-width: 100%;
+  min-width: 0;
   position: relative;
   border-radius: var(--st-border-radius-sm);
   box-sizing: border-box;
   background-color: var(--st-bg-light);
-  width: fit-content;
   height: var(--st-space-10);
   padding: var(--st-space-1);
   gap: var(--st-space-1);
 
+  /* Hide scrollbar */
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
   &.st-segmented-control-full-width {
+    display: flex;
     width: 100%;
 
     st-segmented-control-item {
@@ -21,6 +34,8 @@ st-segmented-control {
   st-segmented-control-item {
     border: none;
     color: var(--st-color-text-primary);
+    flex-shrink: 0;
+    text-wrap: nowrap;
 
     background-color: transparent;
 

package/assets/styles/components/select.scss

@@ -1,26 +1,14 @@
-st-dropdown {
+st-single-select {
   display: flex;
   flex-direction: column;
   width: 100%;
 
-  &.sm .dropdown-input {
-    height: var(--st-interactive-element-height-sm);
-    font-size: var(--st-font-sm);
-    st-icon {
-      width: var(--st-icon-size-xs);
-      height: var(--st-icon-size-xs);
-    }
+  label {
+    margin-bottom: var(--st-space-2);
   }
 
-  &.md .dropdown-input {
+  .single-select-input {
     height: var(--st-interactive-element-height-md);
-  }
-
-  &.lg .dropdown-input {
-    height: var(--st-interactive-element-height-lg);
-  }
-
-  .dropdown-input {
     padding-left: var(--st-size-xs);
     padding-right: var(--st-size-xs);
     border: 1px solid var(--st-border);
@@ -47,20 +35,21 @@ st-dropdown {
       width: var(--st-icon-size-sm);
       height: var(--st-icon-size-sm);
     }
+
     &:hover {
       background-color: var(--st-bg-light);
     }
 
-    &:has(.dropdown-selector:hover) {
+    &:has(.single-select-selector:hover) {
       background-color: unset;
     }
 
-    .dropdown-selector[data-show] {
+    .single-select-selector[data-show] {
       height: unset;
       visibility: visible;
     }
 
-    .dropdown-selector {
+    .single-select-selector {
       border: 1px solid var(--st-border);
       border-radius: var(--st-border-radius-sm);
       width: max-content;
@@ -76,20 +65,20 @@ st-dropdown {
       box-shadow: var(--st-shadow-1);
       z-index: 1000;
 
-      .dropdown-item {
+      .single-select-item {
         padding: 8px;
         margin: 4px;
         border-radius: 4px;
       }
 
-      .dropdown-item:hover {
+      .single-select-item:hover {
         background-color: var(--st-bg-light);
       }
     }
   }
 }
 
-.dropdown-selector {
+.single-select-selector {
   border: 1px solid var(--st-border);
   border-radius: var(--st-border-radius-sm);
   width: max-content;
@@ -104,13 +93,13 @@ st-dropdown {
   box-shadow: var(--st-shadow-1);
   z-index: 1000;
 
-  .dropdown-item {
+  .single-select-item {
     padding: 8px;
     margin: 4px;
     border-radius: 4px;
   }
 
-  .dropdown-item:hover {
+  .single-select-item:hover {
     background-color: var(--st-bg-light);
   }
 
@@ -119,6 +108,7 @@ st-dropdown {
 
     st-button {
       visibility: hidden;
+
       &.visible {
         visibility: visible;
       }
@@ -126,6 +116,6 @@ st-dropdown {
   }
 }
 
-.dropdown-selector.full-width {
+.single-select-selector.full-width {
   width: var(--st-overlay-anchor-element-width);
-}
+}

package/assets/styles/components/sidemenu.scss

@@ -15,6 +15,7 @@ st-sidemenu {
 
     display: flex;
     align-items: center;
+    gap: var(--st-space-2, 8px);
     width: 100%;
     padding: var(--st-sidemenu-item-padding);
     box-sizing: border-box;
@@ -51,5 +52,11 @@ st-sidemenu {
     st-tag {
       margin-left: auto;
     }
+
+    st-icon {
+      display: flex;
+      align-items: center;
+      --st-icon-size: var(--st-icon-size-sm, 16px);
+    }
   }
 }

package/assets/styles/components/toggle.scss

@@ -4,6 +4,7 @@ st-toggle {
   --st-toggle-width: var(--st-space-10);
   --st-toggle-padding: var(--st-size-xxxs);
   --st-toggle-handle-size: var(--st-size-sm);
+  --st-toggle-gap: var(--st-size-xxs);
 
   --st-toggle-bg-unchecked: var(--st-color-input-default);
   --st-toggle-bg-checked: var(--st-color-accent-default);
@@ -11,27 +12,47 @@ st-toggle {
 
   display: inline-flex;
   align-items: center;
-  position: relative;
+  gap: var(--st-toggle-gap);
+  cursor: pointer;
+  user-select: none;
   box-sizing: border-box;
 
-  height: var(--st-toggle-height);
-  width: var(--st-toggle-width);
-  padding: var(--st-toggle-padding);
-  background-color: var(--st-toggle-bg-unchecked);
-  border-radius: var(--st-size-xxxs); // 4px
-  cursor: pointer;
-  transition: background-color 0.2s ease;
+  &.st-toggle-label-before {
+    flex-direction: row-reverse;
+  }
 
   // Accessibility
   &:focus-visible {
-    outline: 2px solid var(--st-color-accent-default);
-    outline-offset: 2px;
+    outline: none;
+    .st-toggle-track {
+      outline: 2px solid var(--st-color-accent-default);
+      outline-offset: 2px;
+    }
   }
 
   &:focus {
     outline: none;
   }
 
+  .st-toggle-track {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    height: var(--st-toggle-height);
+    width: var(--st-toggle-width);
+    padding: var(--st-toggle-padding);
+    background-color: var(--st-toggle-bg-unchecked);
+    border-radius: var(--st-size-xxxs); // 4px
+    transition: background-color 0.2s ease;
+  }
+
+  .st-toggle-label {
+    font-family: var(--st-font-family);
+    font-size: var(--st-font-size-md);
+    color: var(--st-color-text-primary);
+  }
+
   .toggle-handle {
     display: block;
     height: var(--st-toggle-handle-size);
@@ -43,7 +64,9 @@ st-toggle {
   }
 
   &[data-checked='true'] {
-    background-color: var(--st-toggle-bg-checked);
+    .st-toggle-track {
+      background-color: var(--st-toggle-bg-checked);
+    }
 
     .toggle-handle {
       // Move by: Width (40) - Padding (4) - Handle (16) - Padding (4) = 16px
@@ -52,11 +75,15 @@ st-toggle {
   }
 
   &[data-checked='false']:not([data-disabled='true']):hover {
-    background-color: var(--st-color-input-hover);
+    .st-toggle-track {
+      background-color: var(--st-color-input-hover);
+    }
   }
 
   &[data-checked='true']:not([data-disabled='true']):hover {
-    background-color: var(--st-color-accent-hover);
+    .st-toggle-track {
+      background-color: var(--st-color-accent-hover);
+    }
   }
 
   &[data-disabled='true'] {

package/assets/styles/public-api.scss

@@ -41,4 +41,5 @@
 @use "./components/text-stack";
 @use "./components/toggle";
 @use "./components/tooltip";
+@use "./components/breadcrumb";
 @use "./components/sidemenu";

package/assets/styles/typography.scss

@@ -30,7 +30,6 @@ a {
   text-transform: uppercase;
   letter-spacing: 0.05em;
   color: var(--st-color-text-tertiary);
-
 }
 
 /* --- Typography utility classes --- */