@surflane/ui 0.10.0 → 0.10.1

package/dist/css/rules/fieldset.css

@@ -12,9 +12,11 @@
     flex-direction: column;
     gap: var(--surf-space-4);
   }
+  /* Base UI renders the legend as a div, a flex item, so the fieldset's gap alone
+     spaces it from the first field. A margin added to that gap and left the legend
+     closer to the group above it than to its own fields. */
   .surf-fieldset-legend {
     padding: 0;
-    margin-bottom: var(--surf-space-4);
     color: var(--surf-ink);
     font: var(--surf-weight-medium)
       var(--surf-type-subsection-size)/var(--surf-type-subsection-leading)

package/dist/css/rules/input-group.css

@@ -63,6 +63,12 @@
     opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
   }
+  /* A read-only field keeps its value readable and copyable, but its steppers do
+     nothing, so they fade like a disabled one's. */
+  .surf-number-step[data-readonly] {
+    opacity: var(--surf-control-disabled-opacity);
+    cursor: default;
+  }
   .surf-combobox-group[data-invalid],
   .surf-number-group[data-invalid] {
     border-color: var(--surf-status-danger-fg);

package/dist/css/rules/skeleton.css

@@ -9,8 +9,15 @@
     width: 100%;
     height: 1em;
     border-radius: var(--surf-radius-sm);
-    background: var(--surf-surface);
-    animation: surf-progress-pulse 1.4s ease-in-out infinite;
+    /* Its own tokens: --surf-surface is about 1.07:1 on a light canvas, and a pulse
+       through opacity faded it further. The pulse moves between the two shades. */
+    background: var(--surf-skeleton-base);
+    animation: surf-skeleton-pulse 1.4s ease-in-out infinite;
+  }
+  @keyframes surf-skeleton-pulse {
+    50% {
+      background-color: var(--surf-skeleton-highlight);
+    }
   }
   .surf-skeleton[data-shape='block'] {
     height: 96px;

package/dist/file-upload.js

@@ -55,6 +55,8 @@ function accepts(file, accept) {
 export const FileUpload = function FileUpload({ label, description, name, form, accept = '', capture, multiple = false, required = false, maxFiles = Infinity, maxFileSize = Infinity, files: controlled, defaultFiles = [], onFilesChange, onReject, transport, getUploadError, labels: customLabels, disabled = false, className, onDragEnter, onDragLeave, onDragOver, onDrop, ref: forwardedRef, ...props }) {
     const labels = {
         ...labelsDefault,
+        // A field that takes one file says so.
+        ...(!multiple && { choose: 'Choose file', drop: 'or drop a file here' }),
         ...customLabels,
         status: { ...labelsDefault.status, ...customLabels?.status },
     };
@@ -271,7 +273,7 @@ export const FileUpload = function FileUpload({ label, description, name, form,
         }
     }
     const hasFiles = (event) => Array.from(event.dataTransfer.types).includes('Files');
-    return (_jsxs(Field.Root, { ...props, ref: ref, name: name, disabled: disabled, className: skin('surf-field surf-file-upload', className), "data-dragging": dragging || undefined, children: [_jsx(Field.Label, { children: label }), description != null && description !== false && (_jsx(Field.Description, { children: description })), _jsxs("div", { className: 'surf-file-dropzone', onDragEnter: (event) => {
+    return (_jsxs(Field.Root, { ...props, ref: ref, name: name, disabled: disabled, className: skin('surf-file-upload', className), "data-dragging": dragging || undefined, children: [_jsx(Field.Label, { children: label }), description != null && description !== false && (_jsx(Field.Description, { children: description })), _jsxs("div", { className: 'surf-file-dropzone', onDragEnter: (event) => {
                     onDragEnter?.(event);
                     if (!event.defaultPrevented && hasFiles(event) && !disabled) {
                         event.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surflane/ui",
-  "version": "0.10.0",
+  "version": "0.10.1",
   "description": "Surflane React components built on Base UI, with data, chart, code and Markdown components.",
   "keywords": [
     "design-system",
@@ -406,8 +406,8 @@
     "@base-ui/react": "^1.9.0",
     "@headless-tree/core": "^1.8.0",
     "@headless-tree/react": "^1.8.0",
-    "@surflane/css": "^0.10.0",
-    "@surflane/design-tokens": "^0.10.0",
+    "@surflane/css": "^0.10.1",
+    "@surflane/design-tokens": "^0.10.1",
     "@tanstack/react-virtual": "^3.14.21",
     "react": "^19.0.0",
     "react-aria-components": "^1.22.1",