@helpwave/hightide 0.11.1 → 0.12.1

package/dist/style/uncompiled/theme/components/avatar.css

@@ -71,4 +71,37 @@
   [data-name="avatar-group-more"] {
     @apply flex-row-2 truncate items-center text-[calc(var(--size)*2/3)];
   }
+
+  [data-name="avatar-with-status"] {
+    @apply relative inline-flex;
+  }
+
+  [data-name="avatar-with-status-dot"] {
+    @apply absolute right-0 bottom-0 z-1 rounded-full border-solid;
+    border-color: var(--color-background);
+
+    &[data-size="xs"] {
+      @apply size-3 border-[1.5px];
+    }
+
+    &[data-size="sm"] {
+      @apply size-3.5 border-2;
+    }
+
+    &[data-size="md"] {
+      @apply size-4 border-2;
+    }
+
+    &[data-size="lg"] {
+      @apply size-5 border-2;
+    }
+
+    &[data-online] {
+      background-color: var(--color-positive);
+    }
+
+    &:not([data-online]) {
+      background-color: var(--color-negative);
+    }
+  }
 }

package/dist/style/uncompiled/theme/components/card.css

@@ -1,13 +1,84 @@
 @layer components {
-  [data-name="card-sm"] {
-    @apply flex-col-2 surface coloring-solid px-2 py-1 rounded;
+  [data-name="card"] {
+    @apply flex-col-1 w-full min-w-0 surface coloring-solid shadow-md;
+
+    &[data-size="sm"] {
+      @apply px-2 py-1 rounded;
+    }
+
+    &[data-size="md"] {
+      @apply px-4 py-2 rounded-md;
+    }
+
+    &[data-size="lg"] {
+      @apply px-8 py-4 rounded-lg;
+    }
   }
 
-  [data-name="card-md"] {
-    @apply flex-col-2 bg-surface text-on-surface px-4 py-2 rounded-md;
+  [data-name="action-card"],
+  [data-name="navigation-card"] {
+    @apply flex-col-1 w-full min-w-0 surface coloring-solid-hover shadow-md;
+
+    &[data-size="sm"] {
+      @apply px-2 py-1 rounded;
+    }
+
+    &[data-size="md"] {
+      @apply px-4 py-2 rounded-md;
+    }
+
+    &[data-size="lg"] {
+      @apply px-8 py-4 rounded-lg;
+    }
+  }
+
+  [data-name="card-header"] {
+    @apply flex-row-2 items-center w-full min-w-0;
+  }
+
+  [data-name="card-content"] {
+    @apply flex-col-1 min-w-0 flex-1;
+  }
+
+  [data-name="card-action"] {
+    @apply flex-col-0 items-center justify-center shrink-0 text-description;
+  }
+
+  [data-name="navigation-card-action"] {
+    @apply flex-col-0 items-center justify-center shrink-0 text-description transition-colors group-hover/card:text-on-surface;
+  }
+
+  [data-name="card-title"] {
+    @apply typography-title-md;
+  }
+
+  [data-name="card"][data-size="sm"] [data-name="card-title"],
+  [data-name="action-card"][data-size="sm"] [data-name="card-title"],
+  [data-name="navigation-card"][data-size="sm"] [data-name="card-title"] {
+    @apply typography-title-sm;
+  }
+
+  [data-name="card"][data-size="lg"] [data-name="card-title"],
+  [data-name="action-card"][data-size="lg"] [data-name="card-title"],
+  [data-name="navigation-card"][data-size="lg"] [data-name="card-title"] {
+    @apply typography-title-lg;
+  }
+
+  [data-name="card-description"] {
+    @apply text-description typography-body-md;
+  }
+
+  [data-name="action-card"] {
+    &:not([data-disabled]) {
+      @apply cursor-pointer;
+    }
+
+    &[data-disabled] {
+      @apply cursor-not-allowed disabled;
+    }
   }
 
-  [data-name="card-lg"] {
-    @apply flex-col-2 bg-surface text-on-surface px-8 py-4 rounded-lg;
+  [data-name="navigation-card"] {
+    @apply cursor-pointer;
   }
-}
+}

package/dist/style/uncompiled/theme/components/checkbox.css

@@ -1,6 +1,7 @@
 @layer components {
   [data-name="checkbox"] {
-    @apply flex-col-0 items-center justify-center rounded border-2;
+    @apply flex-col-0 items-center justify-center border-2;
+    @apply rounded data-[rounded]:rounded-full;
     transition: 
       border-color var(--animation-duration-in, 250ms) ease-in-out, 
       box-shadow var(--animation-duration-in, 250ms) ease-in-out,

package/dist/style/uncompiled/theme/components/index.css

@@ -28,4 +28,6 @@
 @import "./general.css";
 @import "./icon-button.css";
 @import "./date-time-input.css";
-@import "./process-model.css";
+@import "./process-model.css";
+@import "./vertical-navigation.css";
+@import "./app-page.css";

package/dist/style/uncompiled/theme/components/vertical-navigation.css

@@ -0,0 +1,42 @@
+@layer components {
+  [data-name="vertical-navigation-tree"] {
+    @apply flex-col-2 list-none m-0 p-0;
+  }
+
+  [data-name="vertical-navigation-node"] {
+    @apply list-none m-0 p-0 rounded-md outline-none cursor-pointer;
+  }
+
+  [data-name="vertical-navigation-group"] {
+    @apply flex-col-0 list-none m-0 my-0.5 ml-2.5 pl-2.5 border-l border-border;
+  }
+
+  [data-name="vertical-navigation-node-header"],
+  [data-name="vertical-navigation-item"] {
+    @apply flex-row-1 items-center rounded-md min-h-9 min-w-0 px-2.5 py-1.5;
+  
+    &:hover, &:focus-visible {
+      @apply bg-primary/15;
+    }
+  }
+
+  [data-name="vertical-navigation-node-header"] {
+    @apply justify-between;
+    transition: var(--focus-outline-transition);
+    
+    &[data-active] {
+      @apply bg-primary/15;
+
+      &:is(:where(.group\/tree-node):focus-visible *) {
+        outline: var(--focus-outline);
+        outline-offset: var(--focus-outline-offset);
+        box-shadow: var(--focus-box-shadow);
+        border-color: var(--focus-border-color);
+      }
+    }
+  }
+
+  [data-name="vertical-navigation-item-link"] {
+    @apply flex-row-2 w-full items-center justify-between no-underline;
+  }
+}

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "MPL-2.0",
-  "version": "0.11.1",
+  "version": "0.12.1",
   "files": [
     "dist"
   ],
@@ -100,4 +100,4 @@
     "postcss": "8.5.15",
     "js-yaml": "4.2.0"
   }
-}
+}