@surflane/ui 0.8.0 → 0.10.0

package/dist/css/rules/fieldset.css

@@ -3,21 +3,21 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-fieldset {
+  .surf-fieldset {
     min-width: 0;
     margin: 0;
     padding: 0;
     border: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--space-4);
+    gap: var(--surf-space-4);
   }
-  .pui-fieldset-legend {
+  .surf-fieldset-legend {
     padding: 0;
-    margin-bottom: var(--space-4);
-    color: var(--ink);
-    font: var(--weight-medium)
-      var(--type-subsection-size)/var(--type-subsection-leading)
-      var(--font-body);
+    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)
+      var(--surf-font-body);
   }
 }

package/dist/css/rules/file-upload.css

@@ -3,10 +3,10 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-file-upload {
+  .surf-file-upload {
     min-width: 0;
   }
-  .pui-file-native {
+  .surf-file-native {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -19,68 +19,69 @@
   }
   /* One plane: the picker row, then a row per file. Rows meet at a line, and the
      plane keeps one inset on every edge. */
-  .pui-file-dropzone {
-    --file-inset: var(--space-5);
+  .surf-file-dropzone {
+    --surf-file-inset: var(--surf-space-5);
     display: flex;
     flex-direction: column;
-    padding-inline: var(--file-inset);
+    padding-inline: var(--surf-file-inset);
     border: 1px solid transparent;
-    border-radius: var(--radius-lg);
-    background: var(--surface);
-    transition: background-color var(--duration-fast) var(--ease-out);
+    border-radius: var(--surf-radius-lg);
+    background: var(--surf-surface);
+    transition: background-color var(--surf-duration-fast) var(--surf-ease-out);
   }
-  .pui-file-upload[data-dragging] .pui-file-dropzone {
-    background: var(--selected);
+  .surf-file-upload[data-dragging] .surf-file-dropzone {
+    background: var(--surf-selected);
   }
-  .pui-file-picker {
+  .surf-file-picker {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--space-3);
-    padding-block: var(--file-inset);
+    gap: var(--surf-space-3);
+    padding-block: var(--surf-file-inset);
   }
-  .pui-file-trigger {
+  .surf-file-trigger {
     flex-direction: row;
     width: fit-content;
     cursor: pointer;
-    font-size: var(--type-body-size);
-    letter-spacing: var(--type-body-tracking);
-    line-height: var(--type-body-leading);
+    font-size: var(--surf-type-body-size);
+    letter-spacing: var(--surf-type-body-tracking);
+    line-height: var(--surf-type-body-leading);
   }
-  .pui-file-trigger[data-disabled] {
-    opacity: var(--control-disabled-opacity);
+  .surf-file-trigger[data-disabled] {
+    opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
   }
-  .pui-file-upload:has(.pui-file-native:focus-visible) .pui-file-trigger {
-    outline: var(--focus-ring-width) solid var(--interaction-focus);
-    outline-offset: var(--focus-ring-offset);
+  .surf-file-upload:has(.surf-file-native:focus-visible) .surf-file-trigger {
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
+    outline-offset: var(--surf-focus-ring-offset);
   }
-  .pui-file-upload:has(.pui-file-native[aria-invalid='true'])
-    .pui-file-dropzone {
-    border-color: var(--status-danger-fg);
+  .surf-file-upload:has(.surf-file-native[aria-invalid='true'])
+    .surf-file-dropzone {
+    border-color: var(--surf-status-danger-fg);
   }
-  .pui-file-drop-hint {
+  .surf-file-drop-hint {
     margin: 0;
-    color: var(--ink-muted);
-    font-size: var(--type-compact-size);
-    line-height: var(--type-compact-leading);
-    letter-spacing: var(--type-compact-tracking);
-  }
-  .pui-file-errors {
-    color: var(--status-danger-fg);
-    font: var(--weight-regular)
-      var(--type-compact-size)/var(--type-compact-leading) var(--font-body);
-    letter-spacing: var(--type-compact-tracking);
+    color: var(--surf-ink-muted);
+    font-size: var(--surf-type-compact-size);
+    line-height: var(--surf-type-compact-leading);
+    letter-spacing: var(--surf-type-compact-tracking);
+  }
+  .surf-file-errors {
+    color: var(--surf-status-danger-fg);
+    font: var(--surf-weight-regular)
+      var(--surf-type-compact-size)/var(--surf-type-compact-leading)
+      var(--surf-font-body);
+    letter-spacing: var(--surf-type-compact-tracking);
     overflow-wrap: anywhere;
   }
-  .pui-file-errors:empty {
+  .surf-file-errors:empty {
     display: none;
   }
-  .pui-file-errors ul {
+  .surf-file-errors ul {
     margin: 0;
-    padding-inline-start: var(--space-5);
+    padding-inline-start: var(--surf-space-5);
   }
-  .pui-file-list {
+  .surf-file-list {
     display: grid;
     list-style: none;
     padding: 0;
@@ -88,80 +89,80 @@
   }
   /* The file's details lead its row and its actions end it, wrapping below when the
      row is narrow. Progress and an upload error run under the whole row. */
-  .pui-file-item {
+  .surf-file-item {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--space-3) var(--space-4);
+    gap: var(--surf-space-3) var(--surf-space-4);
     min-width: 0;
-    padding-block: var(--space-3);
-    border-top: 1px solid var(--line);
+    padding-block: var(--surf-space-3);
+    border-top: 1px solid var(--surf-line);
   }
-  .pui-file-item:last-child {
-    padding-block-end: var(--file-inset);
+  .surf-file-item:last-child {
+    padding-block-end: var(--surf-file-inset);
   }
-  .pui-file-item > :not(.pui-file-info, .pui-file-actions) {
+  .surf-file-item > :not(.surf-file-info, .surf-file-actions) {
     flex-basis: 100%;
   }
-  .pui-file-info {
+  .surf-file-info {
     flex: 1 1 auto;
     min-width: 0;
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--space-2) var(--space-3);
-    font-size: var(--type-compact-size);
-    line-height: var(--type-compact-leading);
-    letter-spacing: var(--type-compact-tracking);
+    gap: var(--surf-space-2) var(--surf-space-3);
+    font-size: var(--surf-type-compact-size);
+    line-height: var(--surf-type-compact-leading);
+    letter-spacing: var(--surf-type-compact-tracking);
   }
-  .pui-file-info > strong {
+  .surf-file-info > strong {
     min-width: 0;
     max-width: 100%;
     overflow-wrap: anywhere;
-    font-weight: var(--weight-medium);
+    font-weight: var(--surf-weight-medium);
   }
-  .pui-file-info > span:not(.pui-badge) {
-    color: var(--ink-muted);
+  .surf-file-info > span:not(.surf-badge) {
+    color: var(--surf-ink-muted);
   }
-  .pui-file-actions {
+  .surf-file-actions {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--space-2);
+    gap: var(--surf-space-2);
   }
-  .pui-file-upload-error {
+  .surf-file-upload-error {
     margin: 0;
-    color: var(--status-danger-fg);
-    font-size: var(--type-compact-size);
-    line-height: var(--type-compact-leading);
-    letter-spacing: var(--type-compact-tracking);
+    color: var(--surf-status-danger-fg);
+    font-size: var(--surf-type-compact-size);
+    line-height: var(--surf-type-compact-leading);
+    letter-spacing: var(--surf-type-compact-tracking);
   }
   @media (max-width: 760px), (pointer: coarse) {
-    .pui-file-trigger {
-      min-height: var(--control-target-size);
+    .surf-file-trigger {
+      min-height: var(--surf-control-target-size);
     }
   }
   @media (max-width: 760px) {
-    .pui-file-dropzone {
-      --file-inset: var(--space-4);
+    .surf-file-dropzone {
+      --surf-file-inset: var(--surf-space-4);
     }
   }
   @media (forced-colors: active) {
-    .pui-file-dropzone {
+    .surf-file-dropzone {
       border-color: ButtonText;
       background: Canvas;
     }
-    .pui-file-upload[data-dragging] .pui-file-dropzone {
+    .surf-file-upload[data-dragging] .surf-file-dropzone {
       border-color: Highlight;
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-file-dropzone {
+    .surf-file-dropzone {
       transition: none;
     }
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-file-dropzone {
-    --file-inset: var(--ui-file-padding);
+  :where([data-ui-size], [data-ui-size] *).surf-file-dropzone {
+    --surf-file-inset: var(--surf-ui-file-padding);
   }
 }

package/dist/css/rules/filter-bar.css

@@ -3,54 +3,55 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-filter-bar {
+  .surf-filter-bar {
     display: grid;
-    gap: var(--space-4);
+    gap: var(--surf-space-4);
     min-inline-size: 0;
   }
-  .pui-filter-bar-controls {
+  .surf-filter-bar-controls {
     display: flex;
     flex-wrap: wrap;
     align-items: end;
-    gap: var(--space-4);
+    gap: var(--surf-space-4);
     min-inline-size: 0;
   }
-  .pui-filter-bar-field {
+  .surf-filter-bar-field {
     display: grid;
-    gap: var(--space-2);
+    gap: var(--surf-space-2);
     flex: 1 1 12rem;
     min-inline-size: 0;
     max-inline-size: 100%;
   }
-  .pui-filter-bar-field[data-width='search'] {
+  .surf-filter-bar-field[data-width='search'] {
     flex: 2 1 20rem;
   }
-  .pui-filter-bar-field > :is(.pui-control, .pui-select-trigger) {
+  .surf-filter-bar-field > :is(.surf-control, .surf-select-trigger) {
     inline-size: 100%;
     min-inline-size: 0;
   }
-  .pui-filter-bar-actions {
+  .surf-filter-bar-actions {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: var(--space-2);
+    gap: var(--surf-space-2);
     min-inline-size: 0;
   }
-  .pui-filter-bar-summary {
-    color: var(--ink-muted);
-    font: var(--weight-regular)
-      var(--type-caption-size)/var(--type-caption-leading) var(--font-body);
+  .surf-filter-bar-summary {
+    color: var(--surf-ink-muted);
+    font: var(--surf-weight-regular)
+      var(--surf-type-caption-size)/var(--surf-type-caption-leading)
+      var(--surf-font-body);
   }
 }
 @layer surflane.sizes {
-  .pui-filter-bar-actions > .pui-button {
+  .surf-filter-bar-actions > .surf-button {
     max-inline-size: 100%;
-    min-height: var(--control-height);
+    min-height: var(--surf-control-height);
     overflow-wrap: anywhere;
   }
   /* Labels wrap; an icon button stays square. */
-  .pui-filter-bar-actions > .pui-button:where(:not([data-size^='icon'])) {
+  .surf-filter-bar-actions > .surf-button:where(:not([data-size^='icon'])) {
     height: auto;
-    padding-block: var(--space-2);
+    padding-block: var(--surf-space-2);
   }
 }

package/dist/css/rules/form.css

@@ -4,12 +4,12 @@
 
 @layer surflane.components {
   /* Form and selection primitives: semantic labels, consistent control states. */
-  .pui-form {
+  .surf-form {
     display: flex;
     flex-direction: column;
     min-width: 0;
   }
-  .pui-form {
-    gap: var(--space-6);
+  .surf-form {
+    gap: var(--surf-space-6);
   }
 }

package/dist/css/rules/gauge.css

@@ -4,58 +4,58 @@
 
 @layer surflane.components {
   /* Feedback: completion and measurement share geometry, not semantics. */
-  .pui-gauge {
+  .surf-gauge {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
-    gap: var(--space-2) var(--space-4);
+    gap: var(--surf-space-2) var(--surf-space-4);
     min-width: 0;
-    color: var(--ink);
+    color: var(--surf-ink);
   }
-  .pui-gauge-label {
-    font-weight: var(--weight-regular);
+  .surf-gauge-label {
+    font-weight: var(--surf-weight-regular);
     overflow-wrap: anywhere;
   }
-  .pui-gauge-value {
-    color: var(--ink-body);
+  .surf-gauge-value {
+    color: var(--surf-ink-body);
     font-variant-numeric: tabular-nums;
   }
-  .pui-gauge-track {
+  .surf-gauge-track {
     grid-column: 1 / -1;
     position: relative;
-    height: var(--space-2);
+    height: var(--surf-space-2);
     overflow: hidden;
-    border-radius: var(--radius-full);
-    background: var(--surface);
+    border-radius: var(--surf-radius-full);
+    background: var(--surf-surface);
   }
-  .pui-gauge-indicator {
-    background: var(--ink-body);
+  .surf-gauge-indicator {
+    background: var(--surf-ink-body);
     border-radius: inherit;
-    transition: width var(--duration-base) var(--ease-out);
+    transition: width var(--surf-duration-base) var(--surf-ease-out);
   }
-  .pui-gauge-indicator[data-indeterminate] {
+  .surf-gauge-indicator[data-indeterminate] {
     width: 40%;
     height: inherit;
-    animation: pui-progress-pulse 1.4s ease-in-out infinite;
+    animation: surf-progress-pulse 1.4s ease-in-out infinite;
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-gauge-indicator,
-    .pui-gauge-indicator[data-indeterminate] {
+    .surf-gauge-indicator,
+    .surf-gauge-indicator[data-indeterminate] {
       animation: none;
       transition: none;
     }
   }
   @media (forced-colors: active) {
-    .pui-gauge-track {
+    .surf-gauge-track {
       background: Canvas;
       outline: 1px solid CanvasText;
     }
-    .pui-gauge-indicator {
+    .surf-gauge-indicator {
       background: CanvasText;
     }
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-gauge-track {
-    height: var(--ui-gauge);
+  :where([data-ui-size], [data-ui-size] *).surf-gauge-track {
+    height: var(--surf-ui-gauge);
   }
 }

package/dist/css/rules/icon.css

@@ -4,24 +4,29 @@
 
 @layer surflane.components {
   /* Static glyphs share size/stroke tokens; parent controls own interaction. */
-  .pui-icon {
+  .surf-icon {
     display: inline-block;
     flex: 0 0 auto;
-    width: var(--icon-size-sm);
-    height: var(--icon-size-sm);
+    width: var(--surf-size-icon-default);
+    height: var(--surf-size-icon-default);
     vertical-align: -0.125em;
-    stroke-width: var(--icon-stroke-width);
+    stroke-width: var(--surf-icon-stroke-width);
     pointer-events: none;
   }
-  .pui-icon[data-size='md'] {
-    width: var(--icon-size-md);
-    height: var(--icon-size-md);
+  .surf-icon[data-size='small'] {
+    width: var(--surf-size-icon-small);
+    height: var(--surf-size-icon-small);
   }
-  .pui-icon[data-size='lg'] {
-    width: var(--icon-size-lg);
-    height: var(--icon-size-lg);
+  .surf-icon[data-size='large'] {
+    width: var(--surf-size-icon-large);
+    height: var(--surf-size-icon-large);
   }
-  .pui-icon[data-directional='true']:dir(rtl) {
+  /* Deprecated: the 24px size, off the scale. Removed in a later minor. */
+  .surf-icon[data-size='lg'] {
+    width: var(--surf-icon-size-lg);
+    height: var(--surf-icon-size-lg);
+  }
+  .surf-icon[data-directional='true']:dir(rtl) {
     transform: scaleX(-1);
   }
 }

package/dist/css/rules/inline-message.css

@@ -3,8 +3,8 @@
   surflane.sizes;
 
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-message {
-    padding: var(--ui-surface-padding);
-    gap: var(--ui-content-gap);
+  :where([data-ui-size], [data-ui-size] *).surf-message {
+    padding: var(--surf-ui-surface-padding);
+    gap: var(--surf-ui-content-gap);
   }
 }

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

@@ -3,74 +3,75 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-combobox-group,
-  .pui-number-group {
+  .surf-combobox-group,
+  .surf-number-group {
     box-sizing: border-box;
     display: flex;
     align-items: center;
     min-width: 0;
     width: 100%;
-    min-height: var(--control-height);
-    border: 1px solid var(--control-border);
-    border-radius: var(--control-radius);
-    background: var(--control-background);
+    min-height: var(--surf-control-height);
+    border: 1px solid var(--surf-control-border);
+    border-radius: var(--surf-control-radius);
+    background: var(--surf-control-background);
     transition:
-      background-color var(--duration-fast) var(--ease-out),
-      border-color var(--duration-fast) var(--ease-out),
-      box-shadow var(--duration-fast) var(--ease-out);
+      background-color var(--surf-duration-fast) var(--surf-ease-out),
+      border-color var(--surf-duration-fast) var(--surf-ease-out),
+      box-shadow var(--surf-duration-fast) var(--surf-ease-out);
   }
-  .pui-combobox-group:hover,
-  .pui-number-group:hover {
-    border-color: var(--control-hover-border);
-    background: var(--control-hover-background);
+  .surf-combobox-group:hover,
+  .surf-number-group:hover {
+    border-color: var(--surf-control-hover-border);
+    background: var(--surf-control-hover-background);
   }
-  .pui-combobox-group:focus-within,
-  .pui-number-group:focus-within {
-    border-color: var(--control-focus);
-    box-shadow: 0 0 0 var(--control-focus-ring-size) var(--control-focus-ring);
+  .surf-combobox-group:focus-within,
+  .surf-number-group:focus-within {
+    border-color: var(--surf-control-focus);
+    box-shadow: 0 0 0 var(--surf-control-focus-ring-size)
+      var(--surf-control-focus-ring);
   }
-  .pui-combobox-action,
-  .pui-number-step,
-  .pui-combobox-chip-remove {
+  .surf-combobox-action,
+  .surf-number-step,
+  .surf-combobox-chip-remove {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: none;
-    width: var(--control-height);
-    height: var(--control-height);
+    width: var(--surf-control-height);
+    height: var(--surf-control-height);
     padding: 0;
     border: 0;
-    border-radius: var(--control-radius);
+    border-radius: var(--surf-control-radius);
     background: transparent;
-    color: var(--ink-body);
+    color: var(--surf-ink-body);
     cursor: pointer;
   }
-  .pui-combobox-action:focus-visible,
-  .pui-number-step:focus-visible,
-  .pui-combobox-chip-remove:focus-visible {
-    outline: var(--focus-ring-width) solid var(--interaction-focus);
-    outline-offset: var(--focus-ring-inset);
+  .surf-combobox-action:focus-visible,
+  .surf-number-step:focus-visible,
+  .surf-combobox-chip-remove:focus-visible {
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
+    outline-offset: var(--surf-focus-ring-inset);
   }
-  .pui-combobox-group[data-disabled],
-  .pui-number-group[data-disabled] {
-    opacity: var(--control-disabled-opacity);
+  .surf-combobox-group[data-disabled],
+  .surf-number-group[data-disabled] {
+    opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
   }
-  .pui-combobox-action[data-disabled],
-  .pui-number-step[data-disabled],
-  .pui-combobox-chip-remove[data-disabled] {
-    opacity: var(--control-disabled-opacity);
+  .surf-combobox-action[data-disabled],
+  .surf-number-step[data-disabled],
+  .surf-combobox-chip-remove[data-disabled] {
+    opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
   }
-  .pui-combobox-group[data-invalid],
-  .pui-number-group[data-invalid] {
-    border-color: var(--status-danger-fg);
+  .surf-combobox-group[data-invalid],
+  .surf-number-group[data-invalid] {
+    border-color: var(--surf-status-danger-fg);
   }
   @media (forced-colors: active) {
-    .pui-combobox-group:focus-within,
-    .pui-number-group:focus-within {
-      outline: var(--focus-ring-width) solid Highlight;
-      outline-offset: var(--focus-ring-offset);
+    .surf-combobox-group:focus-within,
+    .surf-number-group:focus-within {
+      outline: var(--surf-focus-ring-width) solid Highlight;
+      outline-offset: var(--surf-focus-ring-offset);
     }
   }
 }

package/dist/css/rules/input.css

@@ -3,31 +3,31 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-input::placeholder {
-    color: var(--control-placeholder);
+  .surf-input::placeholder {
+    color: var(--surf-control-placeholder);
     opacity: 1;
   }
-  .pui-control-icon {
+  .surf-control-icon {
     pointer-events: none;
     position: absolute;
-    inset-inline-start: var(--control-padding-x);
+    inset-inline-start: var(--surf-control-padding-x);
     top: 50%;
     transform: translateY(-50%);
     display: flex;
     align-items: center;
-    color: var(--ink-muted);
+    color: var(--surf-ink-muted);
     z-index: 1;
   }
-  .pui-control[data-leading-icon] .pui-input {
+  .surf-control[data-leading-icon] .surf-input {
     padding-inline-start: calc(
-      var(--control-padding-x) + var(--control-icon-size) +
-        var(--control-icon-gap)
+      var(--surf-control-padding-x) + var(--surf-control-icon-size) +
+        var(--surf-control-icon-gap)
     );
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *):is(.pui-input) {
-    font-size: var(--ui-font);
-    line-height: var(--ui-leading);
+  :where([data-ui-size], [data-ui-size] *):is(.surf-input) {
+    font-size: max(var(--surf-control-text-min-size), var(--surf-ui-font));
+    line-height: var(--surf-ui-leading);
   }
 }

package/dist/css/rules/item.css

@@ -3,12 +3,12 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-menu-group-label,
-  .pui-select-group-label {
-    padding: var(--space-2) var(--space-3);
-    color: var(--ink-muted);
-    font-size: var(--type-caption-size);
-    line-height: var(--type-caption-leading);
-    letter-spacing: var(--type-caption-tracking);
+  .surf-menu-group-label,
+  .surf-select-group-label {
+    padding: var(--surf-space-2) var(--surf-space-3);
+    color: var(--surf-ink-muted);
+    font-size: var(--surf-type-caption-size);
+    line-height: var(--surf-type-caption-leading);
+    letter-spacing: var(--surf-type-caption-tracking);
   }
 }