@duskmoon-dev/components 0.5.3 → 0.5.5

package/dist/infrastructure.js

@@ -4,7 +4,7 @@
 import { useCallback, useState } from "react";
 
 // src/generated/version.ts
-var version = "0.5.3";
+var version = "0.5.5";
 
 // src/infrastructure.ts
 var theme = {

package/dist/styles.css

@@ -26771,7 +26771,12 @@ html {
   }
 
   .select-container > .select {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0 0.75rem 0 0.875rem;
     background-image: none;
+    appearance: none;
   }
 
   .select:focus-visible {
@@ -26895,6 +26900,42 @@ html {
       0 16px 40px rgb(15 23 42 / 0.12);
   }
 
+  .select-dropdown[popover] {
+    position: fixed;
+    inset: auto;
+    width: anchor-size(width);
+    min-width: var(--select-anchor-width, 10rem);
+    max-height: 16rem;
+    margin: 0.375rem 0 0 0;
+    padding: 0.375rem;
+    overflow: auto;
+    color: var(--color-on-surface);
+    background-color: var(--color-surface);
+    border: 1px solid var(--color-outline-variant);
+    border-radius: var(--radius-sm);
+    box-shadow:
+      0 4px 12px rgb(15 23 42 / 0.1),
+      0 16px 40px rgb(15 23 42 / 0.12);
+  }
+
+  @supports (position-area: bottom) {
+    .select-dropdown[popover] {
+      position-area: bottom span-right;
+      position-try-fallbacks: flip-block;
+    }
+  }
+
+  @supports not (position-area: bottom) {
+    .select-dropdown[popover] {
+      top: anchor(bottom);
+      left: anchor(left);
+    }
+  }
+
+  .select-dropdown[popover]:popover-open {
+    display: grid;
+  }
+
   .select-option {
     display: flex;
     width: 100%;
@@ -27984,9 +28025,6 @@ html {
   }
 
   .timeline-marker {
-    --timeline-marker-color: var(--color-primary);
-    --timeline-marker-bg: var(--color-primary-container);
-
     position: relative;
     z-index: 1;
     display: inline-flex;
@@ -27995,19 +28033,24 @@ html {
     flex: 0 0 var(--timeline-marker-size);
     align-items: center;
     justify-content: center;
-    color: var(--timeline-marker-color);
+    color: var(--color-on-surface-variant);
     background: var(--color-surface);
-    border: 2px solid var(--timeline-marker-color);
+    border: 2px solid var(--color-outline-variant);
     border-radius: var(--radius-full);
-    box-shadow: 0 0 0 4px var(--timeline-marker-bg);
   }
 
-  .timeline-marker:not(.timeline-marker-icon)::after {
-    width: 0.625rem;
-    height: 0.625rem;
-    background: var(--timeline-marker-color);
+  .timeline-marker-dot {
+    width: 0.75rem;
+    height: 0.75rem;
+    background-color: var(--color-outline-variant);
     border-radius: var(--radius-full);
-    content: "";
+  }
+
+  .timeline-item-active > .timeline-marker,
+  .timeline-item.active .timeline-marker {
+    border-color: var(--color-primary);
+    background-color: var(--color-primary-container);
+    box-shadow: 0 0 0 4px var(--color-primary-container);
   }
 
   .timeline-marker-secondary {
@@ -28071,21 +28114,21 @@ html {
   }
 
   .timeline-sm {
-    --timeline-marker-size: 1.75rem;
+    --timeline-marker-size: 1.5rem;
   }
 
-  .timeline-sm .timeline-marker:not(.timeline-marker-icon)::after {
-    width: 0.45rem;
-    height: 0.45rem;
+  .timeline-sm .timeline-marker-dot {
+    width: 0.5rem;
+    height: 0.5rem;
   }
 
   .timeline-lg {
     --timeline-marker-size: 3rem;
   }
 
-  .timeline-lg .timeline-marker:not(.timeline-marker-icon)::after {
-    width: 0.75rem;
-    height: 0.75rem;
+  .timeline-lg .timeline-marker-dot {
+    width: 0.875rem;
+    height: 0.875rem;
   }
 
   .timeline-right {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duskmoon-dev/components",
-  "version": "0.5.3",
+  "version": "0.5.5",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",