@surflane/ui 0.8.0 → 0.10.0

package/dist/css/rules/dialog.css

@@ -4,157 +4,163 @@
 
 @layer surflane.components {
   /* Dialog: acknowledge arrival; dismissal has no visual wait. */
-  .pui-dialog-backdrop {
+  .surf-dialog-backdrop {
     position: fixed;
     inset: 0;
-    z-index: var(--layer-backdrop);
-    background: color-mix(in srgb, var(--chrome), transparent 25%);
+    z-index: var(--surf-layer-backdrop);
+    background: color-mix(in srgb, var(--surf-chrome), transparent 25%);
     backdrop-filter: blur(3px);
     opacity: 1;
-    transition: opacity var(--dialog-enter-duration) var(--motion-ease);
+    transition: opacity var(--surf-dialog-enter-duration)
+      var(--surf-motion-ease);
   }
-  .pui-dialog-popup {
+  .surf-dialog-popup {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    z-index: var(--layer-dialog);
+    z-index: var(--surf-layer-dialog);
     margin: 0;
     outline: none;
     opacity: 1;
     translate: 0 0;
     transition:
-      opacity var(--dialog-enter-duration) var(--motion-ease),
-      translate var(--dialog-enter-duration) var(--motion-spatial-ease);
+      opacity var(--surf-dialog-enter-duration) var(--surf-motion-ease),
+      translate var(--surf-dialog-enter-duration)
+        var(--surf-motion-spatial-ease);
   }
-  .pui-dialog-popup[data-starting-style] {
+  .surf-dialog-popup[data-starting-style] {
     opacity: 0;
-    translate: 0 var(--dialog-enter-offset);
+    translate: 0 var(--surf-dialog-enter-offset);
   }
-  .pui-dialog-backdrop[data-starting-style] {
+  .surf-dialog-backdrop[data-starting-style] {
     opacity: 0;
   }
-  .pui-dialog-popup[data-ending-style],
-  .pui-dialog-backdrop[data-ending-style] {
+  .surf-dialog-popup[data-ending-style],
+  .surf-dialog-backdrop[data-ending-style] {
     transition: none;
-    transition-duration: var(--dialog-exit-duration);
+    transition-duration: var(--surf-dialog-exit-duration);
     opacity: 0;
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-dialog-popup,
-    .pui-dialog-backdrop {
+    .surf-dialog-popup,
+    .surf-dialog-backdrop {
       transition: none;
     }
-    .pui-dialog-popup {
+    .surf-dialog-popup {
       translate: none;
     }
   }
-  .pui-dialog-close {
+  .surf-dialog-close {
     position: absolute;
-    inset-block-start: var(--space-4);
-    inset-inline-end: var(--space-4);
+    inset-block-start: var(--surf-space-4);
+    inset-inline-end: var(--surf-space-4);
     z-index: 1;
   }
   /* Structural chrome never reserves scrollbar space; scrolling belongs to Body. */
-  .pui-dialog-content {
+  .surf-dialog-content {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
-    --dialog-width: var(--size-dialog-default);
-    width: min(var(--dialog-width), calc(100% - var(--space-4) * 2));
+    --surf-dialog-width: var(--surf-size-dialog-default);
+    width: min(var(--surf-dialog-width), calc(100% - var(--surf-space-4) * 2));
     max-height: calc(100dvh - 32px);
     overflow: hidden;
     scrollbar-gutter: auto;
     padding: 0;
-    border: 1px solid var(--line);
-    border-radius: var(--radius-sheet);
-    background: var(--canvas);
-    color: var(--ink);
-    box-shadow: var(--shadow-float);
-    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
-      var(--font-body);
-    letter-spacing: var(--type-body-tracking);
-  }
-  .pui-dialog-header,
-  .pui-dialog-body,
-  .pui-dialog-footer {
+    border: 1px solid var(--surf-line);
+    border-radius: var(--surf-radius-sheet);
+    background: var(--surf-canvas);
+    color: var(--surf-ink);
+    box-shadow: var(--surf-shadow-float);
+    font: var(--surf-weight-regular)
+      var(--surf-type-body-size)/var(--surf-type-body-leading)
+      var(--surf-font-body);
+    letter-spacing: var(--surf-type-body-tracking);
+  }
+  .surf-dialog-header,
+  .surf-dialog-body,
+  .surf-dialog-footer {
     box-sizing: border-box;
     min-width: 0;
   }
-  .pui-dialog-header,
-  .pui-dialog-footer {
+  .surf-dialog-header,
+  .surf-dialog-footer {
     flex: none;
     align-self: stretch;
   }
-  .pui-dialog-header {
-    padding-block: var(--space-6) var(--space-5);
-    padding-inline: var(--space-6)
-      calc(var(--control-height) + var(--space-4) * 2);
-    border-bottom: 1px solid var(--line);
+  .surf-dialog-header {
+    padding-block: var(--surf-space-6) var(--surf-space-5);
+    padding-inline: var(--surf-space-6)
+      calc(var(--surf-control-height) + var(--surf-space-4) * 2);
+    border-bottom: 1px solid var(--surf-line);
   }
-  .pui-dialog-header h2 {
+  .surf-dialog-header h2 {
     margin: 0;
-    font: var(--weight-medium)
-      var(--type-section-size)/var(--type-section-leading) var(--font-display);
-    letter-spacing: var(--type-section-tracking);
+    font: var(--surf-weight-medium)
+      var(--surf-type-section-size)/var(--surf-type-section-leading)
+      var(--surf-font-display);
+    letter-spacing: var(--surf-type-section-tracking);
   }
-  .pui-dialog-header p {
-    margin: var(--space-2) 0 0;
-    color: var(--ink-body);
+  .surf-dialog-header p {
+    margin: var(--surf-space-2) 0 0;
+    color: var(--surf-ink-body);
   }
-  .pui-dialog-body {
+  .surf-dialog-body {
     flex: 1 1 auto;
     min-height: 0;
     overflow: auto;
-    padding: var(--space-6);
+    padding: var(--surf-space-6);
     overscroll-behavior: contain;
     scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+    scrollbar-color: var(--surf-scrollbar-thumb) var(--surf-scrollbar-track);
   }
-  .pui-dialog-body::-webkit-scrollbar {
-    width: var(--scrollbar-size);
-    height: var(--scrollbar-size);
+  .surf-dialog-body::-webkit-scrollbar {
+    width: var(--surf-scrollbar-size);
+    height: var(--surf-scrollbar-size);
   }
-  .pui-dialog-body::-webkit-scrollbar-thumb {
-    background: var(--scrollbar-thumb);
-    border-radius: var(--scrollbar-radius);
+  .surf-dialog-body::-webkit-scrollbar-thumb {
+    background: var(--surf-scrollbar-thumb);
+    border-radius: var(--surf-scrollbar-radius);
   }
-  .pui-dialog-body::-webkit-scrollbar-thumb:hover {
-    background: var(--scrollbar-thumb-hover);
+  .surf-dialog-body::-webkit-scrollbar-thumb:hover {
+    background: var(--surf-scrollbar-thumb-hover);
   }
-  .pui-dialog-footer {
+  .surf-dialog-footer {
     display: flex;
     justify-content: flex-end;
     flex-wrap: wrap;
-    gap: var(--space-2);
-    padding: var(--space-5) var(--space-6);
-    border-top: 1px solid var(--line);
+    gap: var(--surf-space-2);
+    padding: var(--surf-space-5) var(--surf-space-6);
+    border-top: 1px solid var(--surf-line);
   }
-  .pui-dialog-close:disabled {
-    opacity: var(--control-disabled-opacity);
+  .surf-dialog-close:disabled {
+    opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
   }
-  .pui-dialog-content[data-size='small'] {
-    --dialog-width: var(--size-dialog-small);
+  .surf-dialog-content[data-size='small'] {
+    --surf-dialog-width: var(--surf-size-dialog-small);
   }
-  .pui-dialog-content[data-size='default'] {
-    --dialog-width: var(--size-dialog-default);
+  .surf-dialog-content[data-size='default'] {
+    --surf-dialog-width: var(--surf-size-dialog-default);
   }
-  .pui-dialog-content[data-size='large'] {
-    --dialog-width: var(--size-dialog-large);
+  .surf-dialog-content[data-size='large'] {
+    --surf-dialog-width: var(--surf-size-dialog-large);
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-dialog-body {
-    padding: var(--ui-card-padding);
+  :where([data-ui-size], [data-ui-size] *).surf-dialog-body {
+    padding: var(--surf-ui-card-padding);
   }
   :where([data-ui-size], [data-ui-size] *):is(
-    .pui-dialog-header,
-    .pui-dialog-footer
+    .surf-dialog-header,
+    .surf-dialog-footer
   ) {
-    padding-inline: var(--ui-card-padding);
+    padding-inline: var(--surf-ui-card-padding);
   }
-  :where([data-ui-size], [data-ui-size] *).pui-dialog-header {
-    padding-inline-end: calc(var(--control-height) + var(--space-4) * 2);
+  :where([data-ui-size], [data-ui-size] *).surf-dialog-header {
+    padding-inline-end: calc(
+      var(--surf-control-height) + var(--surf-space-4) * 2
+    );
   }
 }

package/dist/css/rules/disclosure.css

@@ -3,105 +3,107 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-accordion-item,
-  .pui-collapsible {
-    border-radius: var(--radius-md);
+  .surf-accordion-item,
+  .surf-collapsible {
+    border-radius: var(--surf-radius-md);
     min-width: 0;
   }
-  .pui-accordion-item[data-open],
-  .pui-collapsible[data-open] {
-    background: var(--surface);
+  .surf-accordion-item[data-open],
+  .surf-collapsible[data-open] {
+    background: var(--surf-surface);
   }
-  .pui-disclosure-trigger {
+  .surf-disclosure-trigger {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--space-3);
+    gap: var(--surf-space-3);
     width: 100%;
-    min-height: var(--control-height);
-    padding: var(--space-3) var(--space-4);
+    min-height: var(--surf-control-height);
+    padding: var(--surf-space-3) var(--surf-space-4);
     border: 0;
-    border-radius: var(--radius-md);
+    border-radius: var(--surf-radius-md);
     background: transparent;
-    color: var(--ink);
-    font: var(--weight-medium) var(--type-body-size)/var(--type-body-leading)
-      var(--font-body);
+    color: var(--surf-ink);
+    font: var(--surf-weight-medium)
+      var(--surf-type-body-size)/var(--surf-type-body-leading)
+      var(--surf-font-body);
     text-align: start;
     cursor: pointer;
     outline: none;
   }
-  .pui-disclosure-label {
+  .surf-disclosure-label {
     min-width: 0;
     overflow-wrap: anywhere;
   }
-  .pui-disclosure-trigger:hover:not(:disabled) {
-    background: var(--interaction-hover-bg);
+  .surf-disclosure-trigger:hover:not(:disabled) {
+    background: var(--surf-interaction-hover-bg);
   }
-  .pui-disclosure-trigger:active:not(:disabled) {
-    background: var(--interaction-active-bg);
+  .surf-disclosure-trigger:active:not(:disabled) {
+    background: var(--surf-interaction-active-bg);
   }
-  .pui-disclosure-trigger:focus-visible {
-    outline: var(--focus-ring-width) solid var(--interaction-focus);
-    outline-offset: var(--focus-ring-inset);
+  .surf-disclosure-trigger:focus-visible {
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
+    outline-offset: var(--surf-focus-ring-inset);
   }
-  .pui-disclosure-trigger:disabled {
-    opacity: var(--control-disabled-opacity);
+  .surf-disclosure-trigger:disabled {
+    opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
   }
-  .pui-disclosure-chevron {
+  .surf-disclosure-chevron {
     flex: none;
-    transition: rotate var(--duration-fast) var(--ease-out);
+    transition: rotate var(--surf-duration-fast) var(--surf-ease-out);
   }
   /* The chevron mirrors itself in right-to-left text, so it turns the other way to
      point down when open. */
-  .pui-disclosure-trigger[data-panel-open] > .pui-disclosure-chevron {
+  .surf-disclosure-trigger[data-panel-open] > .surf-disclosure-chevron {
     rotate: 90deg;
   }
-  .pui-disclosure-trigger:dir(rtl)[data-panel-open] > .pui-disclosure-chevron {
+  .surf-disclosure-trigger:dir(rtl)[data-panel-open]
+    > .surf-disclosure-chevron {
     rotate: -90deg;
   }
-  .pui-accordion-panel,
-  .pui-collapsible-panel {
+  .surf-accordion-panel,
+  .surf-collapsible-panel {
     overflow: clip;
     opacity: 1;
     transition:
-      height var(--motion-reveal) var(--motion-ease),
-      opacity var(--motion-reveal) var(--motion-ease);
+      height var(--surf-motion-reveal) var(--surf-motion-ease),
+      opacity var(--surf-motion-reveal) var(--surf-motion-ease);
   }
-  .pui-accordion-panel[data-starting-style],
-  .pui-collapsible-panel[data-starting-style] {
+  .surf-accordion-panel[data-starting-style],
+  .surf-collapsible-panel[data-starting-style] {
     height: 0;
     opacity: 0;
   }
-  .pui-accordion-panel[data-ending-style],
-  .pui-collapsible-panel[data-ending-style] {
+  .surf-accordion-panel[data-ending-style],
+  .surf-collapsible-panel[data-ending-style] {
     height: 0;
     opacity: 0;
   }
-  .pui-disclosure-body {
-    padding: var(--space-2) var(--space-4) var(--space-4);
+  .surf-disclosure-body {
+    padding: var(--surf-space-2) var(--surf-space-4) var(--surf-space-4);
     overflow-wrap: anywhere;
     min-width: 0;
   }
-  .pui-disclosure-body > :first-child {
+  .surf-disclosure-body > :first-child {
     margin-top: 0;
   }
-  .pui-disclosure-body > :last-child {
+  .surf-disclosure-body > :last-child {
     margin-bottom: 0;
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-disclosure-chevron,
-    .pui-accordion-panel,
-    .pui-collapsible-panel {
+    .surf-disclosure-chevron,
+    .surf-accordion-panel,
+    .surf-collapsible-panel {
       transition: none;
     }
   }
 }
 @layer surflane.sizes {
   /* At the default size these equal the base rules: a default SizeProvider changes nothing. */
-  :where([data-ui-size], [data-ui-size] *).pui-disclosure-trigger {
-    min-block-size: var(--control-height);
-    font-size: var(--ui-font);
-    padding-block: calc(var(--ui-gap) * 1.5);
+  :where([data-ui-size], [data-ui-size] *).surf-disclosure-trigger {
+    min-block-size: var(--surf-control-height);
+    font-size: var(--surf-ui-font);
+    padding-block: calc(var(--surf-ui-gap) * 1.5);
   }
 }

package/dist/css/rules/drawer.css

@@ -3,16 +3,16 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-drawer-handle {
+  .surf-drawer-handle {
     flex: none;
     width: 36px;
     height: 4px;
-    margin: var(--space-3) auto 0;
-    border-radius: var(--radius-full);
-    background: var(--line);
+    margin: var(--surf-space-3) auto 0;
+    border-radius: var(--surf-radius-full);
+    background: var(--surf-line);
   }
-  .pui-drawer[data-side='left'] > .pui-drawer-handle,
-  .pui-drawer[data-side='right'] > .pui-drawer-handle {
+  .surf-drawer[data-side='left'] > .surf-drawer-handle,
+  .surf-drawer[data-side='right'] > .surf-drawer-handle {
     display: none;
   }
 }

package/dist/css/rules/empty-state.css

@@ -3,7 +3,7 @@
   surflane.sizes;
 
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-empty {
-    padding: var(--ui-card-padding);
+  :where([data-ui-size], [data-ui-size] *).surf-empty {
+    padding: var(--surf-ui-card-padding);
   }
 }

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

@@ -3,8 +3,8 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-control,
-  .pui-select {
+  .surf-control,
+  .surf-select {
     position: relative;
     display: inline-flex;
     min-width: 0;
@@ -12,70 +12,79 @@
     width: 100%;
     vertical-align: middle;
   }
-  .pui-input,
-  .pui-select-trigger {
+  .surf-input,
+  .surf-select-trigger {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    height: var(--control-height);
-    padding: 0 var(--control-padding-x);
-    border: 1px solid var(--control-border);
-    border-radius: var(--control-radius);
-    background: var(--control-background);
-    color: var(--ink);
-    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
-      var(--font-body);
-    letter-spacing: var(--type-body-tracking);
+    height: var(--surf-control-height);
+    padding: 0 var(--surf-control-padding-x);
+    border: 1px solid var(--surf-control-border);
+    border-radius: var(--surf-control-radius);
+    background: var(--surf-control-background);
+    color: var(--surf-ink);
+    font: var(--surf-weight-regular)
+      var(--surf-type-body-size)/var(--surf-type-body-leading)
+      var(--surf-font-body);
+    letter-spacing: var(--surf-type-body-tracking);
     outline: none;
     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-input:hover:not(:disabled, [aria-disabled='true'], [readonly], :focus),
-  .pui-select-trigger:hover:not(
+  /* iOS zooms the page into a focused field whose text is under 16px. */
+  .surf-input {
+    font-size: max(
+      var(--surf-control-text-min-size),
+      var(--surf-type-body-size)
+    );
+  }
+  .surf-input:hover:not(:disabled, [aria-disabled='true'], [readonly], :focus),
+  .surf-select-trigger:hover:not(
       :disabled,
       [aria-disabled='true'],
       :focus-visible
     ) {
-    background: var(--control-hover-background);
-    border-color: var(--control-hover-border);
+    background: var(--surf-control-hover-background);
+    border-color: var(--surf-control-hover-border);
   }
-  .pui-input:focus,
-  .pui-select-trigger:focus-visible {
-    background: var(--control-focus-background);
-    border-color: var(--control-focus);
-    box-shadow: 0 0 0 var(--control-focus-ring-size) var(--control-focus-ring);
+  .surf-input:focus,
+  .surf-select-trigger:focus-visible {
+    background: var(--surf-control-focus-background);
+    border-color: var(--surf-control-focus);
+    box-shadow: 0 0 0 var(--surf-control-focus-ring-size)
+      var(--surf-control-focus-ring);
   }
-  .pui-input:disabled,
-  .pui-select-trigger:disabled {
-    opacity: var(--control-disabled-opacity);
+  .surf-input:disabled,
+  .surf-select-trigger:disabled {
+    opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
-    background: var(--control-disabled-background);
+    background: var(--surf-control-disabled-background);
   }
   /* An invalid field keeps its edge while hovered; hover still tints the fill. */
-  .pui-input[aria-invalid='true'],
-  .pui-input[aria-invalid='true']:hover,
-  .pui-select-trigger[aria-invalid='true'],
-  .pui-select-trigger[aria-invalid='true']:hover {
-    border-color: var(--status-danger-fg);
+  .surf-input[aria-invalid='true'],
+  .surf-input[aria-invalid='true']:hover,
+  .surf-select-trigger[aria-invalid='true'],
+  .surf-select-trigger[aria-invalid='true']:hover {
+    border-color: var(--surf-status-danger-fg);
   }
   /* Forced colors drop the border color and the halo, so focus becomes an outline. */
   @media (forced-colors: active) {
-    .pui-input:focus,
-    .pui-select-trigger:focus-visible {
-      outline: var(--focus-ring-width) solid Highlight;
-      outline-offset: var(--focus-ring-offset);
+    .surf-input:focus,
+    .surf-select-trigger:focus-visible {
+      outline: var(--surf-focus-ring-width) solid Highlight;
+      outline-offset: var(--surf-focus-ring-offset);
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-input,
-    .pui-select-trigger {
+    .surf-input,
+    .surf-select-trigger {
       transition: none;
     }
   }
-  .pui-textarea[readonly],
-  .pui-input[readonly] {
+  .surf-textarea[readonly],
+  .surf-input[readonly] {
     cursor: text;
   }
 }

package/dist/css/rules/field.css

@@ -4,53 +4,55 @@
 
 @layer surflane.components {
   /* Form and selection primitives: semantic labels, consistent control states. */
-  .pui-field {
+  .surf-field {
     display: flex;
     flex-direction: column;
     min-width: 0;
   }
-  .pui-field {
-    gap: var(--space-2);
+  .surf-field {
+    gap: var(--surf-space-2);
   }
-  .pui-field-label {
+  .surf-field-label {
     display: block;
     margin: 0;
-    color: var(--ink);
-    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
-      var(--font-body);
+    color: var(--surf-ink);
+    font: var(--surf-weight-regular)
+      var(--surf-type-body-size)/var(--surf-type-body-leading)
+      var(--surf-font-body);
   }
-  .pui-field-description,
-  .pui-field-error {
+  .surf-field-description,
+  .surf-field-error {
     margin: 0;
-    font: var(--weight-regular)
-      var(--type-caption-size)/var(--type-caption-leading) var(--font-body);
+    font: var(--surf-weight-regular)
+      var(--surf-type-caption-size)/var(--surf-type-caption-leading)
+      var(--surf-font-body);
     overflow-wrap: anywhere;
   }
-  .pui-field-description {
-    color: var(--ink-muted);
+  .surf-field-description {
+    color: var(--surf-ink-muted);
   }
-  .pui-field-error {
-    color: var(--status-danger-fg);
+  .surf-field-error {
+    color: var(--surf-status-danger-fg);
   }
-  .pui-field-item {
+  .surf-field-item {
     display: grid;
     grid-template-columns: auto minmax(0, 1fr);
     align-items: center;
-    column-gap: var(--space-3);
-    row-gap: var(--space-1);
-    min-height: var(--control-height);
+    column-gap: var(--surf-space-3);
+    row-gap: var(--surf-space-1);
+    min-height: var(--surf-control-height);
   }
-  .pui-field-item > :is(.pui-field-description, .pui-field-error) {
+  .surf-field-item > :is(.surf-field-description, .surf-field-error) {
     grid-column: 2;
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-field-item {
-    min-block-size: var(--control-height);
+  :where([data-ui-size], [data-ui-size] *).surf-field-item {
+    min-block-size: var(--surf-control-height);
   }
   @media (max-width: 760px), (pointer: coarse) {
-    :where([data-ui-size], [data-ui-size] *).pui-field-item {
-      min-block-size: var(--control-target-size);
+    :where([data-ui-size], [data-ui-size] *).surf-field-item {
+      min-block-size: var(--surf-control-target-size);
     }
   }
 }