@surflane/ui 0.8.0 → 0.10.0

package/dist/css/rules/panel.css

@@ -4,72 +4,73 @@
 
 @layer surflane.components {
   /* Edge panels share surfaces and layers; only Drawer adds native Base UI gestures. */
-  .pui-panel-layer {
+  .surf-panel-layer {
     position: fixed;
     inset: 0;
-    z-index: var(--layer-dialog);
+    z-index: var(--surf-layer-dialog);
     pointer-events: none;
     isolation: isolate;
   }
-  .pui-panel-backdrop {
+  .surf-panel-backdrop {
     position: fixed;
     inset: 0;
     z-index: 0;
     pointer-events: auto;
-    background: color-mix(in srgb, var(--chrome), transparent 25%);
+    background: color-mix(in srgb, var(--surf-chrome), transparent 25%);
     backdrop-filter: blur(3px);
     opacity: calc(1 - var(--drawer-swipe-progress, 0));
-    transition: opacity var(--duration-base) var(--ease-out);
+    transition: opacity var(--surf-duration-base) var(--surf-ease-out);
   }
-  .pui-panel-backdrop[data-starting-style],
-  .pui-panel-backdrop[data-ending-style] {
+  .surf-panel-backdrop[data-starting-style],
+  .surf-panel-backdrop[data-ending-style] {
     opacity: 0;
   }
-  .pui-panel-viewport {
+  .surf-panel-viewport {
     position: fixed;
     inset: 0;
     z-index: 1;
     display: flex;
-    padding: var(--space-3);
+    padding: var(--surf-space-3);
     pointer-events: none;
   }
-  .pui-panel-viewport[data-flush] {
+  .surf-panel-viewport[data-flush] {
     padding: 0;
   }
-  .pui-panel-viewport[data-side='right'] {
+  .surf-panel-viewport[data-side='right'] {
     justify-content: flex-end;
   }
-  .pui-panel-viewport[data-side='left'] {
+  .surf-panel-viewport[data-side='left'] {
     justify-content: flex-start;
   }
-  .pui-panel-viewport[data-side='top'] {
+  .surf-panel-viewport[data-side='top'] {
     align-items: flex-start;
     justify-content: center;
   }
-  .pui-panel-viewport[data-side='bottom'] {
+  .surf-panel-viewport[data-side='bottom'] {
     align-items: flex-end;
     justify-content: center;
   }
-  .pui-panel {
-    --panel-width: var(--size-panel-default);
-    --panel-enter-x: 0px;
-    --panel-enter-y: 0px;
+  .surf-panel {
+    --surf-panel-width: var(--surf-size-panel-default);
+    --surf-panel-enter-x: 0px;
+    --surf-panel-enter-y: 0px;
     position: relative;
     display: flex;
     flex-direction: column;
-    width: min(var(--panel-width), 100%);
+    width: min(var(--surf-panel-width), 100%);
     min-width: 0;
     max-height: 100%;
     overflow: hidden;
     pointer-events: auto;
-    background: var(--canvas);
-    color: var(--ink);
-    border-radius: var(--radius-sheet);
-    box-shadow: var(--shadow-float);
+    background: var(--surf-canvas);
+    color: var(--surf-ink);
+    border-radius: var(--surf-radius-sheet);
+    box-shadow: var(--surf-shadow-float);
     outline: none;
-    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
-      var(--font-body);
-    letter-spacing: var(--type-body-tracking);
+    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);
     transform: translate(
       var(--drawer-swipe-movement-x, 0px),
       calc(
@@ -77,145 +78,149 @@
           var(--drawer-snap-point-offset, 0px)
       )
     );
-    transition: transform var(--duration-base) var(--ease-out);
+    transition: transform var(--surf-duration-base) var(--surf-ease-out);
   }
-  .pui-panel[data-size='small'] {
-    --panel-width: var(--size-panel-small);
+  .surf-panel[data-size='small'] {
+    --surf-panel-width: var(--surf-size-panel-small);
   }
-  .pui-panel[data-size='large'] {
-    --panel-width: var(--size-panel-large);
+  .surf-panel[data-size='large'] {
+    --surf-panel-width: var(--surf-size-panel-large);
   }
-  .pui-panel[data-side='right'] {
-    --panel-enter-x: calc(100% + 12px);
+  .surf-panel[data-side='right'] {
+    --surf-panel-enter-x: calc(100% + 12px);
     height: 100%;
   }
-  .pui-panel[data-side='left'] {
-    --panel-enter-x: calc(-100% - 12px);
+  .surf-panel[data-side='left'] {
+    --surf-panel-enter-x: calc(-100% - 12px);
     height: 100%;
   }
-  .pui-panel[data-side='top'] {
-    --panel-enter-y: calc(-100% - 12px);
+  .surf-panel[data-side='top'] {
+    --surf-panel-enter-y: calc(-100% - 12px);
     max-height: min(85dvh, 100%);
   }
-  .pui-panel[data-side='bottom'] {
-    --panel-enter-y: calc(100% + 12px);
+  .surf-panel[data-side='bottom'] {
+    --surf-panel-enter-y: calc(100% + 12px);
     max-height: min(85dvh, 100%);
   }
   /* A flush panel squares the corners on the edge it is attached to. */
-  .pui-panel[data-flush][data-side='bottom'] {
+  .surf-panel[data-flush][data-side='bottom'] {
     border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
-  .pui-panel[data-flush][data-side='top'] {
+  .surf-panel[data-flush][data-side='top'] {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
   }
-  .pui-panel[data-flush][data-side='right'] {
+  .surf-panel[data-flush][data-side='right'] {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
-  .pui-panel[data-flush][data-side='left'] {
+  .surf-panel[data-flush][data-side='left'] {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
-  .pui-panel[data-starting-style],
-  .pui-panel[data-ending-style] {
-    transform: translate(var(--panel-enter-x), var(--panel-enter-y));
+  .surf-panel[data-starting-style],
+  .surf-panel[data-ending-style] {
+    transform: translate(var(--surf-panel-enter-x), var(--surf-panel-enter-y));
   }
-  .pui-panel[data-swiping],
-  .pui-panel-backdrop[data-swiping] {
+  .surf-panel[data-swiping],
+  .surf-panel-backdrop[data-swiping] {
     transition: none;
   }
-  .pui-panel-content {
+  .surf-panel-content {
     display: flex;
     flex-direction: column;
     min-height: 0;
     flex: 1;
   }
-  .pui-panel-header {
+  .surf-panel-header {
     flex: none;
-    padding-block: var(--space-6) var(--space-5);
-    padding-inline: var(--space-6)
-      calc(var(--control-height) + var(--space-4) * 2);
+    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);
   }
-  .pui-panel-title {
+  .surf-panel-title {
     margin: 0;
-    font: var(--weight-medium)
-      var(--type-section-size)/var(--type-section-leading) var(--font-display);
-    letter-spacing: var(--type-section-tracking);
-  }
-  .pui-panel-description {
-    margin: var(--space-2) 0 0;
-    color: var(--ink-body);
-    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
-      var(--font-body);
-    letter-spacing: var(--type-body-tracking);
-  }
-  .pui-panel-body {
+    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);
+  }
+  .surf-panel-description {
+    margin: var(--surf-space-2) 0 0;
+    color: var(--surf-ink-body);
+    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-panel-body {
     flex: 1 1 auto;
     min-height: 0;
     overflow: auto;
-    padding: 0 var(--space-6) var(--space-6);
+    padding: 0 var(--surf-space-6) 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-panel-body::-webkit-scrollbar {
-    width: var(--scrollbar-size);
-    height: var(--scrollbar-size);
+  .surf-panel-body::-webkit-scrollbar {
+    width: var(--surf-scrollbar-size);
+    height: var(--surf-scrollbar-size);
   }
-  .pui-panel-body::-webkit-scrollbar-thumb {
-    border-radius: var(--scrollbar-radius);
-    background: var(--scrollbar-thumb);
+  .surf-panel-body::-webkit-scrollbar-thumb {
+    border-radius: var(--surf-scrollbar-radius);
+    background: var(--surf-scrollbar-thumb);
   }
-  .pui-panel-body::-webkit-scrollbar-thumb:hover {
-    background: var(--scrollbar-thumb-hover);
+  .surf-panel-body::-webkit-scrollbar-thumb:hover {
+    background: var(--surf-scrollbar-thumb-hover);
   }
-  .pui-panel-footer {
+  .surf-panel-footer {
     flex: none;
     display: flex;
     justify-content: flex-end;
     flex-wrap: wrap;
-    gap: var(--space-2);
-    padding: var(--space-4) var(--space-6)
-      max(var(--space-5), env(safe-area-inset-bottom));
-    background: var(--surface);
+    gap: var(--surf-space-2);
+    padding: var(--surf-space-4) var(--surf-space-6)
+      max(var(--surf-space-5), env(safe-area-inset-bottom));
+    background: var(--surf-surface);
   }
-  .pui-panel-close {
+  .surf-panel-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;
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-panel,
-    .pui-panel-backdrop {
+    .surf-panel,
+    .surf-panel-backdrop {
       transition: none;
     }
   }
-  .pui-panel-layer,
-  .pui-panel-viewport,
-  .pui-panel,
-  .pui-panel-content,
-  .pui-panel-header,
-  .pui-panel-body,
-  .pui-panel-footer {
+  .surf-panel-layer,
+  .surf-panel-viewport,
+  .surf-panel,
+  .surf-panel-content,
+  .surf-panel-header,
+  .surf-panel-body,
+  .surf-panel-footer {
     box-sizing: border-box;
   }
-  .pui-panel-viewport[data-side='bottom'] {
+  .surf-panel-viewport[data-side='bottom'] {
     bottom: var(--drawer-keyboard-inset, 0px);
   }
 }
 @layer surflane.sizes {
   :where([data-ui-size], [data-ui-size] *):is(
-    .pui-panel-header,
-    .pui-panel-body,
-    .pui-panel-footer
+    .surf-panel-header,
+    .surf-panel-body,
+    .surf-panel-footer
   ) {
-    padding-inline: var(--ui-card-padding);
+    padding-inline: var(--surf-ui-card-padding);
   }
   /* The title keeps clear of the close button: its 16px inset, its width and a 16px gap. */
-  :where([data-ui-size], [data-ui-size] *).pui-panel-header {
-    padding-inline-end: calc(var(--control-height) + var(--space-4) * 2);
+  :where([data-ui-size], [data-ui-size] *).surf-panel-header {
+    padding-inline-end: calc(
+      var(--surf-control-height) + var(--surf-space-4) * 2
+    );
   }
 }

package/dist/css/rules/popover.css

@@ -5,37 +5,40 @@
 @layer surflane.components {
   /* A popover fits its content up to its width, so long text wraps at a readable
      measure instead of the viewport. */
-  .pui-popover {
-    --popover-width: var(--size-popover-default);
+  .surf-popover {
+    --surf-popover-width: var(--surf-size-popover-default);
     width: max-content;
-    max-width: min(var(--popover-width), calc(100vw - var(--space-6)));
-    padding: var(--space-4);
+    max-width: min(
+      var(--surf-popover-width),
+      calc(100vw - var(--surf-space-6))
+    );
+    padding: var(--surf-space-4);
     max-height: var(--available-height);
     overflow: auto;
   }
-  .pui-popover[data-size='small'] {
-    --popover-width: var(--size-popover-small);
+  .surf-popover[data-size='small'] {
+    --surf-popover-width: var(--surf-size-popover-small);
   }
-  .pui-popover[data-size='large'] {
-    --popover-width: var(--size-popover-large);
+  .surf-popover[data-size='large'] {
+    --surf-popover-width: var(--surf-size-popover-large);
   }
-  .pui-popover-title {
-    margin: 0 0 var(--space-2);
-    color: var(--ink);
-    font: var(--weight-medium) var(--type-subsection-size) /
-      var(--type-subsection-leading) var(--font-body);
-    letter-spacing: var(--type-subsection-tracking);
+  .surf-popover-title {
+    margin: 0 0 var(--surf-space-2);
+    color: var(--surf-ink);
+    font: var(--surf-weight-medium) var(--surf-type-subsection-size) /
+      var(--surf-type-subsection-leading) var(--surf-font-body);
+    letter-spacing: var(--surf-type-subsection-tracking);
   }
-  .pui-popover-description {
-    margin: 0 0 var(--space-4);
-    color: var(--ink-body);
+  .surf-popover-description {
+    margin: 0 0 var(--surf-space-4);
+    color: var(--surf-ink-body);
   }
-  .pui-popover-description:last-child {
+  .surf-popover-description:last-child {
     margin-bottom: 0;
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-popover {
-    padding: var(--ui-surface-padding);
+  :where([data-ui-size], [data-ui-size] *).surf-popover {
+    padding: var(--surf-ui-surface-padding);
   }
 }

package/dist/css/rules/popup.css

@@ -3,25 +3,26 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-positioner {
-    z-index: var(--layer-popup);
+  .surf-positioner {
+    z-index: var(--surf-layer-popup);
     outline: none;
     isolation: isolate;
   }
-  .pui-select-popup,
-  .pui-popover,
-  .pui-menu,
-  .pui-tooltip {
+  .surf-select-popup,
+  .surf-popover,
+  .surf-menu,
+  .surf-tooltip {
     box-sizing: border-box;
     max-width: calc(100vw - 24px);
-    border: 1px solid var(--menu-border);
-    border-radius: var(--radius-md);
-    background: var(--menu-background);
-    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);
+    border: 1px solid var(--surf-menu-border);
+    border-radius: var(--surf-radius-md);
+    background: var(--surf-menu-background);
+    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);
     outline: none;
   }
 }

package/dist/css/rules/preview-card.css

@@ -3,7 +3,7 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-preview-card {
+  .surf-preview-card {
     box-sizing: border-box;
     width: 320px;
     max-width: min(calc(100vw - 24px), var(--available-width));
@@ -11,47 +11,48 @@
     overflow: auto;
     overscroll-behavior: contain;
     scrollbar-width: thin;
-    padding: var(--space-5);
-    border: 1px solid var(--menu-border);
-    border-radius: var(--radius-md);
-    background: var(--menu-background);
-    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);
+    padding: var(--surf-space-5);
+    border: 1px solid var(--surf-menu-border);
+    border-radius: var(--surf-radius-md);
+    background: var(--surf-menu-background);
+    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);
     overflow-wrap: anywhere;
     outline: none;
     transform: translateY(0);
     opacity: 1;
     transition:
-      opacity var(--dialog-enter-duration) var(--ease-out),
-      transform var(--dialog-enter-duration) var(--ease-out);
+      opacity var(--surf-dialog-enter-duration) var(--surf-ease-out),
+      transform var(--surf-dialog-enter-duration) var(--surf-ease-out);
   }
-  .pui-preview-card > :first-child {
+  .surf-preview-card > :first-child {
     margin-top: 0;
   }
-  .pui-preview-card > :last-child {
+  .surf-preview-card > :last-child {
     margin-bottom: 0;
   }
-  .pui-preview-card[data-starting-style] {
+  .surf-preview-card[data-starting-style] {
     opacity: 0;
     transform: translateY(6px);
   }
-  .pui-preview-card[data-ending-style] {
+  .surf-preview-card[data-ending-style] {
     transition-duration: 0s;
   }
-  .pui-preview-card[data-instant] {
+  .surf-preview-card[data-instant] {
     transition-duration: 0s;
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-preview-card {
+    .surf-preview-card {
       transition: none;
       transform: none;
     }
   }
   @media (forced-colors: active) {
-    .pui-preview-card {
+    .surf-preview-card {
       border-color: CanvasText;
       background: Canvas;
       color: CanvasText;

package/dist/css/rules/progress.css

@@ -3,11 +3,11 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-progress .pui-gauge-indicator {
-    background: var(--brand);
+  .surf-progress .surf-gauge-indicator {
+    background: var(--surf-brand-mark);
   }
   @media (forced-colors: active) {
-    .pui-progress .pui-gauge-indicator {
+    .surf-progress .surf-gauge-indicator {
       background: CanvasText;
     }
   }

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

@@ -3,24 +3,24 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-radio {
-    border-radius: var(--radius-full);
+  .surf-radio {
+    border-radius: var(--surf-radius-full);
   }
-  .pui-radio-indicator {
+  .surf-radio-indicator {
     width: 8px;
     height: 8px;
-    border-radius: var(--radius-full);
+    border-radius: var(--surf-radius-full);
     background: currentColor;
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-radio {
+    .surf-radio {
       transition: none;
     }
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-radio-indicator {
-    width: calc(var(--control-choice-size) * 0.4);
-    height: calc(var(--control-choice-size) * 0.4);
+  :where([data-ui-size], [data-ui-size] *).surf-radio-indicator {
+    width: calc(var(--surf-control-choice-size) * 0.4);
+    height: calc(var(--surf-control-choice-size) * 0.4);
   }
 }