@stnd/lab 1.0.10 → 1.0.11

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @stnd/lab
 
+## 1.0.11
+
+### Patch Changes
+
+- Updated dependencies
+  - @stnd/ui@0.7.0
+
 ## 1.0.10
 
 ### Patch Changes

package/Lab.svelte

@@ -301,7 +301,7 @@
     lineHeight = parseFloat(readVar("--line-height")) || 1.414;
     ratio = parseFloat(readVar("--optical-ratio")) || 1.414;
 
-    const rawGap = readVar("--gap-body");
+    const rawGap = readVar("--page-padding");
     const pxSpace = resolvePx("var(--space)");
 
     // Calculate body gap multiplier
@@ -337,7 +337,7 @@
       "--font-size",
       "--line-height",
       "--optical-ratio",
-      "--gap-body",
+      "--page-padding",
       "--rhythm-gap-new-line",
       "--radius",
     ];
@@ -390,7 +390,7 @@
       "--font-size",
       "--line-height",
       "--optical-ratio",
-      "--gap-body",
+      "--page-padding",
       "--rhythm-gap-new-line",
       "--radius",
     ];
@@ -714,7 +714,7 @@
       "--font-size",
       "--line-height",
       "--optical-ratio",
-      "--gap-body",
+      "--page-padding",
       "--rhythm-gap-new-line",
       "--radius",
     ];
@@ -805,7 +805,7 @@
 
   function onGapInput(e) {
     gapBody = parseFloat(e.target.value);
-    writeVar("--gap-body", `calc(var(--space) * ${gapBody})`);
+    writeVar("--page-padding", `calc(var(--space) * ${gapBody})`);
   }
 
   function onRhythmGapInput(e) {
@@ -1516,7 +1516,7 @@
     border-bottom: var(--border);
     flex-shrink: 0;
 
-    background: var(--color-surface-low);
+    background: var(--color-surface-light-1);
   }
   .lab-header-title {
     display: flex;
@@ -1526,11 +1526,11 @@
     min-width: 0;
   }
   .lab-header h2 {
-    font-size: var(--size-sm) !important;
+    font-size: var(--scale-d2) !important;
     line-height: 1 !important;
   }
   .lab-version {
-    font-size: var(--size-xs) !important;
+    font-size: var(--scale-d3) !important;
     color: var(--text-muted);
   }
   .lab-header-meta {
@@ -1578,7 +1578,7 @@
   }
 
   .lab-section-arrow {
-    font-size: var(--size-2xs) !important;
+    font-size: var(--scale-d4) !important;
     color: var(--text-subtle);
     transition: transform var(--transition);
     flex-shrink: 0;
@@ -1591,7 +1591,7 @@
   }
 
   .lab-section-title {
-    font-size: var(--size-2xs) !important;
+    font-size: var(--scale-d4) !important;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.08em;
@@ -1619,7 +1619,7 @@
 
   .lab-field-label {
     display: block;
-    font-size: var(--size-3xs) !important;
+    font-size: var(--scale-d5) !important;
     color: var(--color-muted);
     text-transform: uppercase;
     line-height: 1;
@@ -1628,7 +1628,7 @@
   /* ═══════════ TEXT INPUT ═══════════ */
   .lab-text-input {
     width: 100%;
-    font-size: var(--size-2xs) !important;
+    font-size: var(--scale-d4) !important;
     line-height: 1 !important;
     transition: all var(--transition);
     margin: 0 !important;
@@ -1664,7 +1664,7 @@
 
   /* ═══════════ SELECT ═══════════ */
   .lab-select {
-    font-size: var(--size-2xs) !important;
+    font-size: var(--scale-d4) !important;
   }
   .lab-select:focus {
     border-color: var(--color-accent);
@@ -1691,7 +1691,7 @@
   }
 
   .lab-link {
-    font-size: var(--size-2xs) !important;
+    font-size: var(--scale-d4) !important;
     color: var(--color-accent);
     text-decoration: none;
     padding: var(--space-d4) 0;
@@ -1710,7 +1710,7 @@
     padding: var(--space-half) var(--space);
     box-shadow: var(--shadow);
     flex-shrink: 0;
-    background: var(--color-surface-low);
+    background: var(--color-surface-light-1);
   }
 
   /* ═══════════ RESPONSIVE ═══════════ */
@@ -1753,7 +1753,7 @@
   :global(.lab-font-combobox .std-combobox-trigger) {
     width: 100%;
     padding: calc(var(--space-d3) - 2px) var(--space-d4);
-    font-size: var(--size-2xs);
+    font-size: var(--scale-d4);
     line-height: 1;
     background: transparent;
     border: var(--border);
@@ -1779,7 +1779,7 @@
     max-width: none;
     margin-top: var(--space-d2);
     border: var(--border);
-    border-radius: var(--radius-sm);
+    border-radius: var(--radius);
     box-shadow: var(--shadow-xl), var(--shadow-ring);
     background: var(--color-surface, var(--color-background));
     z-index: 120;
@@ -1791,7 +1791,7 @@
     margin-bottom: var(--space-d2);
   }
   :global(.lab-font-combobox .std-combobox-header input) {
-    font-size: var(--size-sm);
+    font-size: var(--scale-d2);
     padding: var(--space-half) 0;
     width: 100%;
     background: transparent;
@@ -1802,7 +1802,7 @@
   /* Ensure options are comfortably spaced in the Lab */
   :global(.lab-font-combobox .std-combobox-listbox .std-menu-item) {
     padding: var(--space-d2) var(--space-d4);
-    font-size: var(--size-sm);
+    font-size: var(--scale-d2);
   }
 
   /* Preserve the rest of the stylesheet closing tag */

package/old.standard.lab.js

@@ -1380,7 +1380,7 @@
       .standard-lab-badge { font-family: var(--stnd-lab-font-family); position: fixed; width: var(--space-d2); height: var(--space-d2); border-radius: 50%; background: var(--color-surface); border: var(--border); box-shadow: var(--shadow); backdrop-filter: var(--filter-blur); cursor: pointer; z-index: var(--z-toast); line-height:1.5; display: flex; align-items: baseline; justify-content: center; color: var(--color-foreground); transition: all 0.2s ease; padding: 0; margin:0; }
       .standard-lab-badge:hover { box-shadow: var(--shadow); transform: scale(1.05); color: var(--color-dark-accent); }
       .standard-lab-badge:active { transform: scale(0.95); }
-      .standard-lab-badge[data-modified]::after { content: attr(data-modified); position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent); color: var(--color-background); font-size: var(--size-xs); display: flex; align-items: center; justify-content: center; font-weight: 600; border: var(--border); box-shadow:var(--shadow); }
+      .standard-lab-badge[data-modified]::after { content: attr(data-modified); position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent); color: var(--color-background); font-size: var(--scale-d3); display: flex; align-items: center; justify-content: center; font-weight: 600; border: var(--border); box-shadow:var(--shadow); }
       .standard-lab-panel { position: fixed; background: var(--stnd-lab-bg); color: var(--stnd-lab-text); font-size: var(--stnd-lab-text-size); border: var(--stnd-lab-border); border-radius: 6px; box-shadow: var(--stnd-lab-shadow); backdrop-filter: var(--stnd-lab-blur); z-index: var(--z-toast); opacity: 0; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.2s ease; display: flex; flex-direction: column; }
       .standard-lab-panel * { font-family: var(--stnd-lab-font-family) !important; font-size: inherit; line-height:1.5; margin:0; }
       .standard-lab-panel :is(label, input) { margin:0; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stnd/lab",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "type": "module",
   "svelte": "./Lab.svelte",
   "author": "Francis Fontaine",
@@ -17,7 +17,7 @@
     "bezier-easing": "^3.0.1",
     "svelte": "5.57.0",
     "wrangler": "^4.129.0",
-    "@stnd/ui": "0.6.6"
+    "@stnd/ui": "0.7.0"
   },
   "peerDependencies": {
     "astro": ">=5.0.0"