@surflane/ui 0.10.1 → 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/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);

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@surflane/ui",
-  "version": "0.10.1",
+  "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.1",
-    "@surflane/design-tokens": "^0.10.1",
+    "@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",