@stnd/ui 0.6.5 → 0.7.0

package/Alert.svelte

@@ -45,7 +45,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: var(--size-sm, 0.875rem);
+    font-size: var(--scale-d2, 0.875rem);
     flex-shrink: 0;
     padding-block-start: 0.15em;
   }
@@ -57,7 +57,7 @@
   }
 
   .alert-title {
-    font-size: var(--size-sm, 0.875rem);
+    font-size: var(--scale-d2, 0.875rem);
     display: block;
   }
 </style>

package/AlertDialog.svelte

@@ -100,7 +100,7 @@
     width: 400px;
     color: var(--color-foreground);
     user-select: none;
-    background: var(--color-surface-high);
+    background: var(--color-surface-light-2);
     backdrop-filter: var(--filter-glass);
     border-radius: var(--radius);
     box-shadow: var(--shadow-glow), var(--shadow-raised);
@@ -122,7 +122,7 @@
   .std-dialog-desc {
     margin-block-start: var(--space-half);
     color: var(--color-muted);
-    font-size: var(--size-sm);
+    font-size: var(--scale-d2);
   }
   .std-dialog-footer {
     display: flex;

package/CHANGELOG.md

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

package/Combobox.svelte

@@ -341,13 +341,13 @@
     justify-content: space-between;
     width: 100%;
     padding: var(--space-d4) var(--space-d4);
-    background: var(--color-surface);
+    background: var(--color-surface-light-1);
     font-weight: var(--font-weight);
     font-size: 1em;
     text-box-trim: none;
 
     border: none;
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius);
     color: var(--color-muted);
     cursor: pointer;
     text-align: left;
@@ -360,7 +360,7 @@
   .std-combobox-trigger:hover,
   .std-combobox-trigger:focus {
     border-color: var(--color-subtle);
-    background: var(--color-surface);
+    background: var(--color-surface-light-2);
     color: var(--color-foreground);
   }
 
@@ -383,7 +383,7 @@
     width: max-content;
     max-width: 300px;
     overflow: hidden;
-    background: var(--color-surface);
+    background: var(--color-surface-light-2);
   }
 
   .std-combobox-header {
@@ -405,7 +405,7 @@
     border: none;
     outline: none;
     font-family: inherit;
-    font-size: var(--size-sm);
+    font-size: var(--scale-d2);
     box-shadow: none;
   }
 
@@ -438,12 +438,12 @@
   .std-combobox-empty {
     text-align: center;
     color: var(--color-subtle);
-    font-size: var(--size-sm);
+    font-size: var(--scale-d2);
     padding: var(--space-d2);
   }
 
   .std-combobox-option.selected {
-    background: var(--color-surface-lowest);
+    background: var(--color-surface-dark-1);
   }
 
   .icon {

package/ContextMenuItemCheckbox.svelte

@@ -74,8 +74,8 @@
     align-items: center;
     gap: 0;
     padding: 0 var(--space-d4);
-    border-radius: var(--radius-sm);
-    font-size: var(--size-sm);
+    border-radius: var(--radius);
+    font-size: var(--scale-d2);
     font-family: var(--font-interface);
     color: var(--color-foreground);
     cursor: pointer;
@@ -85,11 +85,11 @@
   }
 
   .context-menu-item:hover:not(.disabled) {
-    background: var(--color-surface-high);
+    background: var(--color-surface-light-3);
     box-shadow: var(--shadow);
   }
   .context-menu-item:active:not(.disabled) {
-    background: var(--color-surface-low);
+    background: var(--color-surface-dark-1);
     box-shadow: var(--shadow-inset);
   }
 

package/Dialog.svelte

@@ -49,10 +49,10 @@
     height: var(--dialog-height, auto);
     max-height: var(--dialog-max-height, 88vh);
     overflow: hidden;
-    background: var(--color-surface-low);
+    background: var(--color-surface-light-2);
     color: var(--color-foreground);
     border: var(--border, 1px solid var(--color-border));
-    border-radius: var(--radius-lg);
+    border-radius: var(--radius);
     box-shadow: var(--shadow-xl, var(--shadow));
   }
   .std-modal[open] { display: flex; flex-direction: column; }

package/Panel.svelte

@@ -175,12 +175,12 @@
   }
 
   .side-right {
-    right: var(--gap-body, 1.5rem);
+    right: var(--page-padding);
     flex-direction: row-reverse; /* handle on left, body on right */
   }
 
   .side-left {
-    left: var(--gap-body, 1.5rem);
+    left: var(--page-padding);
     flex-direction: row; /* handle on right, body on left */
   }
 
@@ -271,7 +271,7 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    background: var(--color-surface, var(--color-surface-low));
+    background: var(--color-surface-light-1);
     border-inline: var(--border, 1px solid var(--color-border));
     box-shadow: var(--shadow-raised, var(--shadow-lg));
     backdrop-filter: var(--filter-blur, none);
@@ -302,7 +302,7 @@
 
   .panel-title {
     font-family: var(--font-interface, sans-serif);
-    font-size: var(--size-sm, 0.875rem);
+    font-size: var(--scale-d2, 0.875rem);
     font-weight: 600;
     color: var(--color-foreground, currentColor);
     white-space: nowrap;
@@ -331,7 +331,7 @@
 
     &:hover,
     &:focus-visible {
-      background: var(--color-surface-high, color-mix(in oklch, var(--color-foreground) 8%, transparent));
+      background: var(--color-surface-light-2, color-mix(in oklch, var(--color-foreground) 8%, transparent));
       color: var(--color-foreground, currentColor);
       outline: none;
     }

package/TableOfContents.astro

@@ -27,23 +27,25 @@ interface Props {
 
 function cleanHeadingText(raw: string): string {
   if (!raw) return "";
-  return raw
-    .replace(/<[^>]+>/g, "")
-    // Decode common numeric and named entities
-    .replace(/&#(\d+);/g, (_, dec) => String.fromCharCode(dec))
-    .replace(/&#x([0-9a-f]+);/gi, (_, hex) =>
-      String.fromCharCode(parseInt(hex, 16)),
-    )
-    .replace(/&nbsp;/gi, " ")
-    .replace(/&amp;/gi, "&")
-    .replace(/&quot;/gi, '"')
-    .replace(/&apos;|&#39;/gi, "'")
-    .replace(/&lt;/gi, "<")
-    .replace(/&gt;/gi, ">")
-    // Replace non-breaking and special spaces with standard space
-    .replace(/[\u00A0\u1680\u2000-\u200A\u202F\u205F\u3000]/g, " ")
-    .replace(/\s+/g, " ")
-    .trim();
+  return (
+    raw
+      .replace(/<[^>]+>/g, "")
+      // Decode common numeric and named entities
+      .replace(/&#(\d+);/g, (_, dec) => String.fromCharCode(dec))
+      .replace(/&#x([0-9a-f]+);/gi, (_, hex) =>
+        String.fromCharCode(parseInt(hex, 16)),
+      )
+      .replace(/&nbsp;/gi, " ")
+      .replace(/&amp;/gi, "&")
+      .replace(/&quot;/gi, '"')
+      .replace(/&apos;|&#39;/gi, "'")
+      .replace(/&lt;/gi, "<")
+      .replace(/&gt;/gi, ">")
+      // Replace non-breaking and special spaces with standard space
+      .replace(/[\u00A0\u1680\u2000-\u200A\u202F\u205F\u3000]/g, " ")
+      .replace(/\s+/g, " ")
+      .trim()
+  );
 }
 
 const { headings, minHeadings = 2, breakpoint = 1100 } = Astro.props;
@@ -121,7 +123,7 @@ const tocHeadings = (headings || [])
     opacity: 1;
     background: color-mix(
       in oklab,
-      var(--color-surface, var(--color-background)) 92%,
+      var(--color-surface-light-1, var(--color-background)) 92%,
       transparent
     );
     backdrop-filter: var(--filter-glass, blur(20px)) saturate(160%);
@@ -138,7 +140,10 @@ const tocHeadings = (headings || [])
     top: 0.75rem;
     bottom: 0.75rem;
     width: 1px;
-    background: var(--color-border, 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 var(--duration-fast, 0.25s) ease;
@@ -168,7 +173,7 @@ const tocHeadings = (headings || [])
 
   .toc-header-title {
     font-family: var(--font-monospace, monospace);
-    font-size: var(--size-2xs, 0.65rem);
+    font-size: var(--scale-d4, 0.65rem);
     letter-spacing: 0.12em;
     text-transform: uppercase;
     color: var(--color-muted);
@@ -180,6 +185,7 @@ const tocHeadings = (headings || [])
     max-height: 1.5rem;
     opacity: 1;
     margin-bottom: 0.5rem;
+    margin-top: 0;
     padding-bottom: 0.35rem;
     border-bottom: 1px solid
       color-mix(in oklab, var(--color-foreground) 7%, transparent);
@@ -196,6 +202,7 @@ const tocHeadings = (headings || [])
     overflow-y: auto;
     overflow-x: hidden;
     padding-right: 1px;
+    margin-top: 0;
   }
 
   .toc-list::-webkit-scrollbar {
@@ -229,7 +236,7 @@ const tocHeadings = (headings || [])
   /* Label */
   .toc-label {
     font-family: var(--font-interface, sans-serif);
-    font-size: var(--size-xs, 0.8125rem);
+    font-size: var(--scale-d3, 0.8125rem);
     color: var(--color-muted);
     text-align: right;
     line-height: 1.35;
@@ -253,7 +260,7 @@ const tocHeadings = (headings || [])
   }
 
   .toc-item[data-depth="3"] .toc-label {
-    font-size: var(--size-2xs, 0.725rem);
+    font-size: var(--scale-d4, 0.725rem);
     opacity: 0.65;
     padding-right: 4px;
   }
@@ -323,8 +330,9 @@ const tocHeadings = (headings || [])
 <script>
   document.addEventListener("astro:page-load", () => {
     const toc = document.querySelector<HTMLElement>(".stnd-toc");
-    const tocLinks =
-      document.querySelectorAll<HTMLElement>(".toc-item[data-slug]");
+    const tocLinks = document.querySelectorAll<HTMLElement>(
+      ".toc-item[data-slug]",
+    );
     if (tocLinks.length === 0) return;
 
     if (toc) {

package/Toast.astro

@@ -42,6 +42,9 @@
     box-shadow: var(--shadow-glow);
     backdrop-filter: var(--filter-glass);
     background: var(--color-glass);
+    display: flex;
+    align-items: center;
+    gap: var(--space-half);
     margin: 0 auto;
 
     /* Animation setup */
@@ -50,6 +53,27 @@
     transition: all var(--transition);
   }
 
+  :global(.toast-action) {
+    margin-left: var(--space-half);
+    padding: var(--space-quarter, 0.2rem) var(--space-half, 0.5rem);
+    border-radius: var(--radius-s, 4px);
+    border: 1px solid currentColor;
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: var(--scale-d3, 0.85em);
+    font-weight: 600;
+    cursor: pointer;
+    white-space: nowrap;
+    text-decoration: none;
+    transition: all var(--transition, 150ms ease);
+  }
+
+  :global(.toast-action:hover) {
+    background: var(--color-foreground);
+    color: var(--color-background);
+  }
+
   :global(.toast-item.show) {
     opacity: 1;
     filter: blur(0);
@@ -135,9 +159,10 @@
           // Use declarative data-gate attributes so StandardGate handles it
           if (action && action.view) {
             try {
-              // If the view looks like a command (starts with ::), use data-gate-trigger
+              // If the view looks like a command (starts with ::), use data-launcher-view
               if (String(action.view).startsWith("::")) {
                 const tmp = document.createElement("button");
+                tmp.setAttribute("data-launcher-view", action.view);
                 tmp.setAttribute("data-gate-trigger", action.view);
                 tmp.style.display = "none";
                 document.body.appendChild(tmp);
@@ -146,6 +171,7 @@
               } else {
                 // Otherwise treat as a prompt (initial query)
                 const tmp = document.createElement("button");
+                tmp.setAttribute("data-launcher-prompt", action.view);
                 tmp.setAttribute("data-gate-prompt", action.view);
                 tmp.style.display = "none";
                 document.body.appendChild(tmp);

package/menu.css

@@ -8,7 +8,7 @@
 }
 
 .std-menu-content [role^="menuitem"]:focus-visible {
-  background: var(--color-surface-highest);
+  background: var(--color-surface-light-3);
 }
 
 /* A menu separator is a component, not prose. Themes decorate prose rules

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stnd/ui",
-  "version": "0.6.5",
+  "version": "0.7.0",
   "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"
   },