@surflane/ui 0.10.0 → 0.11.0

package/dist/css/rules/date-picker.css

@@ -50,13 +50,20 @@
     .surf-date-group:hover {
     border-color: var(--surf-status-danger-fg);
   }
-  :is(.surf-date-picker, .surf-time-field)[data-disabled] {
-    opacity: var(--surf-control-disabled-opacity);
-  }
+  /* Disabled fades the field, as in every other field: the label and the reason
+     beside it stay readable. */
   :is(.surf-date-picker, .surf-time-field)[data-disabled] .surf-date-group {
+    opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
     background: var(--surf-control-disabled-background);
   }
+  /* Read-only shows a value, not a box to type in: it sits on the surface plane
+     without the field's border, as text fields do. */
+  :is(.surf-date-picker, .surf-time-field)[data-readonly]:not([data-invalid])
+    .surf-date-group:not([data-focus-within], :focus-within) {
+    border-color: transparent;
+    background: var(--surf-surface);
+  }
   .surf-date-input {
     display: flex;
     align-items: center;

package/dist/css/rules/field-control.css

@@ -62,6 +62,13 @@
     cursor: not-allowed;
     background: var(--surf-control-disabled-background);
   }
+  /* Read-only shows a value, not a box to type in: the value sits on the surface
+     plane without the field's border. Its text stays at full ink, apart from a
+     disabled field, and focus still rings it, so the value stays copyable. */
+  .surf-input[readonly]:not(:focus, [aria-invalid='true']) {
+    border-color: transparent;
+    background: var(--surf-surface);
+  }
   /* An invalid field keeps its edge while hovered; hover still tints the fill. */
   .surf-input[aria-invalid='true'],
   .surf-input[aria-invalid='true']:hover,

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

@@ -24,6 +24,15 @@
     border-color: var(--surf-control-hover-border);
     background: var(--surf-control-hover-background);
   }
+  /* Read-only shows a value on the surface plane, without the field's border, as
+     text fields do. */
+  :is(.surf-combobox-group, .surf-number-group)[data-readonly]:not(
+      :focus-within,
+      [data-invalid]
+    ) {
+    border-color: transparent;
+    background: var(--surf-surface);
+  }
   .surf-combobox-group:focus-within,
   .surf-number-group:focus-within {
     border-color: var(--surf-control-focus);
@@ -63,6 +72,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/otp-field.css

@@ -29,12 +29,15 @@
     font-variant-numeric: tabular-nums;
     caret-color: var(--surf-control-focus);
   }
+  /* A short dash, as a code is written elsewhere (481-920): muted ink, weaker than
+     the digits and the boxes but plainly there. */
   .surf-otp-separator {
     flex: none;
-    width: var(--surf-space-2);
-    height: 0;
+    width: var(--surf-space-3);
+    height: 2px;
     border: 0;
-    border-top: 1px solid var(--surf-line);
+    border-radius: var(--surf-radius-full);
+    background: var(--surf-ink-muted);
   }
   @media (max-width: 760px) {
     .surf-otp-field,
@@ -56,7 +59,7 @@
       border-color: LinkText;
     }
     .surf-otp-separator {
-      border-color: CanvasText;
+      background: CanvasText;
     }
   }
 }

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/css/rules/slider.css

@@ -38,12 +38,14 @@
   }
   .surf-slider-track {
     width: 100%;
-    height: 6px;
+    height: var(--surf-size-slider-track-default);
     border-radius: var(--surf-radius-full);
     background: var(--surf-slider-track);
   }
+  /* The pair Progress uses: a brand-mark fill on the surface track, 3:1 against both
+     the track and the sheet in either theme. */
   .surf-slider-indicator {
-    background: var(--surf-brand);
+    background: var(--surf-brand-mark);
     border-radius: inherit;
   }
   .surf-slider-thumb {

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.11.0",
   "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.11.0",
+    "@surflane/design-tokens": "^0.11.0",
     "@tanstack/react-virtual": "^3.14.21",
     "react": "^19.0.0",
     "react-aria-components": "^1.22.1",