@stnd/ui 0.6.4 → 0.6.6

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @stnd/ui
 
+## 0.6.6
+
+### Patch Changes
+
+- Updated dependencies
+  - @stnd/icon@0.3.0
+
+## 0.6.5
+
+### Patch Changes
+
+- Auto-bumped @stnd/ui due to modified code.
+
 ## 0.6.4
 
 ### Patch Changes

package/Combobox.svelte

@@ -354,13 +354,7 @@
     outline: none;
     transition: all var(--transition-fast);
     box-shadow: var(--shadow);
-
-    cursor: pointer;
-    text-align: left;
     text-shadow: none !important;
-    &:hover {
-      background: var(--color-surface-high) !important;
-    }
   }
 
   .std-combobox-trigger:hover,

package/ContextMenu.svelte

@@ -95,10 +95,10 @@
   .context-menu-trigger { display: contents; }
   .context-menu-content {
     position: fixed;
-    z-index: 10000;
+    z-index: var(--z-dropdown, 1000);
     min-width: var(--space-6);
-    max-width: calc(100vw - 16px);
-    max-height: calc(100vh - 16px);
+    max-width: calc(100vw - var(--space, 1rem));
+    max-height: calc(100vh - var(--space, 1rem));
     overflow-y: auto;
   }
   :global(.context-menu-content > *) { flex-shrink: 0; }

package/Dialog.svelte

@@ -45,16 +45,19 @@
     padding: 0;
     margin: auto;
     width: var(--dialog-width, min(90vw, 580px));
-    max-width: calc(100vw - 32px);
+    max-width: calc(100vw - var(--space-2, 2rem));
     height: var(--dialog-height, auto);
     max-height: var(--dialog-max-height, 88vh);
     overflow: hidden;
     background: var(--color-surface-low);
     color: var(--color-foreground);
-    border: 1px solid var(--color-border);
+    border: var(--border, 1px solid var(--color-border));
     border-radius: var(--radius-lg);
-    box-shadow: var(--shadow);
+    box-shadow: var(--shadow-xl, var(--shadow));
   }
   .std-modal[open] { display: flex; flex-direction: column; }
-  .std-modal::backdrop { background: rgb(0 0 0 / 0.65); backdrop-filter: blur(8px); }
+  .std-modal::backdrop {
+    background: var(--color-backdrop, color-mix(in oklch, var(--color-dark, #000) 65%, transparent));
+    backdrop-filter: var(--filter-blur, blur(8px));
+  }
 </style>

package/Dropdown.svelte

@@ -132,7 +132,7 @@
     min-width: var(--space-6);
     max-height: 70vh;
     overflow-y: auto;
-    z-index: 100;
+    z-index: var(--z-dropdown, 1000);
 
     &.align-end {
       right: 0;

package/Panel.svelte

@@ -271,9 +271,9 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    background: var(--color-surface, white);
-    border-inline: 1px solid var(--border, rgba(0 0 0 / 0.1));
-    box-shadow: var(--shadow-raised, 0 4px 16px rgba(0 0 0 / 0.12));
+    background: var(--color-surface, var(--color-surface-low));
+    border-inline: var(--border, 1px solid var(--color-border));
+    box-shadow: var(--shadow-raised, var(--shadow-lg));
     backdrop-filter: var(--filter-blur, none);
     transition:
       width var(--transition, 200ms ease),
@@ -295,7 +295,7 @@
     justify-content: space-between;
     gap: var(--space-d2, 0.25rem);
     padding: var(--space, 1rem);
-    border-block-end: 1px solid var(--border, rgba(0 0 0 / 0.08));
+    border-block-end: var(--border, 1px solid var(--color-border));
     flex-shrink: 0;
     min-height: 2.75rem;
   }
@@ -323,7 +323,7 @@
     border-radius: var(--radius, 6px);
     border: none;
     background: transparent;
-    color: oklch(from var(--color-foreground, currentColor) l c h / 0.4);
+    color: var(--color-subtle, currentColor);
     cursor: pointer;
     transition:
       background var(--transition, 200ms ease),
@@ -331,14 +331,14 @@
 
     &:hover,
     &:focus-visible {
-      background: oklch(from var(--color-foreground, currentColor) l c h / 0.08);
+      background: var(--color-surface-high, color-mix(in oklch, var(--color-foreground) 8%, transparent));
       color: var(--color-foreground, currentColor);
       outline: none;
     }
 
     &.is-pinned {
       color: var(--color-accent, currentColor);
-      background: oklch(from var(--color-accent, currentColor) l c h / 0.1);
+      background: color-mix(in oklch, var(--color-accent) 10%, transparent);
     }
   }
 

package/Popover.svelte

@@ -75,8 +75,8 @@
   .std-popover { position: relative; display: inline-block; }
   .std-popover-content {
     position: absolute; top: 100%; left: 0; margin-top: var(--space-d2);
-    width: max-content; min-width: 180px; max-width: min(320px, calc(100vw - 16px));
-    max-height: 70vh; overflow-y: auto; z-index: 100;
+    width: max-content; min-width: 180px; max-width: min(320px, calc(100vw - var(--space, 1rem)));
+    max-height: 70vh; overflow-y: auto; z-index: var(--z-dropdown, 1000);
   }
   .align-end { left: auto; right: 0; }
   .above { top: auto; bottom: 100%; margin-top: 0; margin-bottom: var(--space-d2); }

package/Scroller.svelte

@@ -33,7 +33,7 @@
     left: 0;
     width: 100%;
     height: var(--stroke-width-lg);
-    z-index: 999999999;
+    z-index: var(--z-toast, 1090);
     pointer-events: none;
     margin-top: 0 !important;
   }

package/TableOfContents.astro

@@ -124,12 +124,10 @@ const tocHeadings = (headings || [])
       var(--color-surface, var(--color-background)) 92%,
       transparent
     );
-    backdrop-filter: blur(24px) saturate(160%);
-    -webkit-backdrop-filter: blur(24px) saturate(160%);
-    border-color: color-mix(in oklab, var(--color-foreground) 10%, transparent);
-    box-shadow:
-      0 4px 20px -2px rgba(0, 0, 0, 0.08),
-      0 16px 36px -4px rgba(0, 0, 0, 0.08);
+    backdrop-filter: var(--filter-glass, blur(20px)) saturate(160%);
+    -webkit-backdrop-filter: var(--filter-glass, blur(20px)) saturate(160%);
+    border-color: var(--color-border);
+    box-shadow: var(--shadow-xl, var(--shadow-raised));
     padding: 0.75rem 1rem 0.85rem 1.25rem;
   }
 
@@ -140,10 +138,10 @@ const tocHeadings = (headings || [])
     top: 0.75rem;
     bottom: 0.75rem;
     width: 1px;
-    background: color-mix(in oklab, var(--color-foreground) 8%, transparent);
+    background: var(--color-border, color-mix(in oklab, var(--color-foreground) 8%, transparent));
     pointer-events: none;
     z-index: 1;
-    transition: opacity 0.25s ease;
+    transition: opacity var(--duration-fast, 0.25s) ease;
   }
 
   .stnd-toc:hover .toc-spine,

package/Toast.astro

@@ -23,7 +23,7 @@
     top: var(--space-2);
     left: 50%;
     transform: translateX(-50%);
-    z-index: 9999999;
+    z-index: var(--z-toast, 1090);
     display: flex;
     flex-direction: column;
     gap: var(--space-half);
@@ -79,7 +79,7 @@
   :global(.toast-item.warning) {
     border-color: color-mix(
       in srgb,
-      var(--color-border) 75,
+      var(--color-border) 75%,
       var(--color-warning)
     );
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stnd/ui",
-  "version": "0.6.4",
+  "version": "0.6.6",
   "type": "module",
   "svelte": "./Combobox.svelte",
   "exports": {
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "wrangler": "^4.129.0",
-    "@stnd/icon": "0.2.2",
+    "@stnd/icon": "0.3.0",
     "@stnd/store": "0.5.1",
     "@stnd/utils": "0.6.1"
   },