@surflane/ui 0.9.0 → 0.10.0

package/dist/css/rules/tabs.css

@@ -4,71 +4,72 @@
 
 @layer surflane.components {
   /* Navigation: whole-surface selection and stable controls. */
-  .pui-tabs {
+  .surf-tabs {
     min-width: 0;
   }
-  .pui-tabs-list {
+  .surf-tabs-list {
     display: flex;
-    gap: var(--space-1);
+    gap: var(--surf-space-1);
     position: relative;
     min-width: 0;
     max-width: 100%;
-    padding: var(--space-1);
-    background: var(--surface);
-    border-radius: var(--radius-md);
+    padding: var(--surf-space-1);
+    background: var(--surf-surface);
+    border-radius: var(--surf-radius-md);
     overflow: auto;
     scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb) transparent;
+    scrollbar-color: var(--surf-scrollbar-thumb) transparent;
   }
-  .pui-tabs-tab {
+  .surf-tabs-tab {
     box-sizing: border-box;
     flex: none;
     position: relative;
     z-index: 1;
     border: 0;
-    border-radius: var(--control-radius);
-    min-height: var(--control-height);
-    padding: 0 var(--space-3);
+    border-radius: var(--surf-control-radius);
+    min-height: var(--surf-control-height);
+    padding: 0 var(--surf-space-3);
     background: transparent;
-    color: var(--ink-muted);
-    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
-      var(--font-body);
+    color: var(--surf-ink-muted);
+    font: var(--surf-weight-regular)
+      var(--surf-type-body-size)/var(--surf-type-body-leading)
+      var(--surf-font-body);
     cursor: pointer;
     white-space: nowrap;
     outline: none;
   }
-  .pui-tabs-tab:hover:not(:disabled):not([data-disabled]) {
-    color: var(--ink);
-    background: var(--interaction-hover-bg);
+  .surf-tabs-tab:hover:not(:disabled):not([data-disabled]) {
+    color: var(--surf-ink);
+    background: var(--surf-interaction-hover-bg);
   }
-  .pui-tabs-tab:active:not(:disabled):not([data-disabled]) {
-    background: var(--interaction-active-bg);
+  .surf-tabs-tab:active:not(:disabled):not([data-disabled]) {
+    background: var(--surf-interaction-active-bg);
   }
-  .pui-tabs-tab[data-active] {
-    background: var(--canvas);
-    color: var(--ink);
-    font-weight: var(--weight-medium);
+  .surf-tabs-tab[data-active] {
+    background: var(--surf-canvas);
+    color: var(--surf-ink);
+    font-weight: var(--surf-weight-medium);
   }
-  .pui-tabs-tab:focus-visible {
-    outline: var(--focus-ring-width) solid var(--interaction-focus);
-    outline-offset: var(--focus-ring-inset);
+  .surf-tabs-tab:focus-visible {
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
+    outline-offset: var(--surf-focus-ring-inset);
   }
-  .pui-tabs-tab:is(:disabled, [data-disabled]) {
-    opacity: var(--control-disabled-opacity);
+  .surf-tabs-tab:is(:disabled, [data-disabled]) {
+    opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
   }
-  .pui-tabs-panel {
+  .surf-tabs-panel {
     min-width: 0;
-    padding-block: var(--space-4);
+    padding-block: var(--surf-space-4);
     outline: none;
     overflow-wrap: anywhere;
   }
-  .pui-tabs-panel:focus-visible {
-    outline: var(--focus-ring-width) solid var(--interaction-focus);
-    outline-offset: var(--focus-ring-offset);
-    border-radius: var(--radius-md);
+  .surf-tabs-panel:focus-visible {
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
+    outline-offset: var(--surf-focus-ring-offset);
+    border-radius: var(--surf-radius-md);
   }
-  .pui-tabs-indicator {
+  .surf-tabs-indicator {
     position: absolute;
     top: var(--active-tab-top);
     left: var(--active-tab-left);
@@ -76,51 +77,51 @@
     height: var(--active-tab-height);
     box-sizing: border-box;
     border: 0;
-    background: var(--canvas);
-    border-radius: var(--control-radius);
+    background: var(--surf-canvas);
+    border-radius: var(--surf-control-radius);
     pointer-events: none;
   }
-  .pui-tabs-list:has(.pui-tabs-indicator) .pui-tabs-tab[data-active] {
+  .surf-tabs-list:has(.surf-tabs-indicator) .surf-tabs-tab[data-active] {
     background: transparent;
     border-color: transparent;
   }
-  .pui-tabs[data-orientation='vertical'] {
+  .surf-tabs[data-orientation='vertical'] {
     display: grid;
     grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
-    gap: var(--space-6);
+    gap: var(--surf-space-6);
     align-items: start;
   }
-  .pui-tabs-list[data-orientation='vertical'] {
+  .surf-tabs-list[data-orientation='vertical'] {
     flex-direction: column;
   }
-  .pui-tabs-list[data-orientation='vertical'] .pui-tabs-tab {
+  .surf-tabs-list[data-orientation='vertical'] .surf-tabs-tab {
     text-align: start;
   }
-  .pui-tabs[data-orientation='vertical'] > .pui-tabs-panel {
-    padding-block: var(--space-1);
+  .surf-tabs[data-orientation='vertical'] > .surf-tabs-panel {
+    padding-block: var(--surf-space-1);
   }
   @media (max-width: 760px) {
-    .pui-tabs[data-orientation='vertical'] {
+    .surf-tabs[data-orientation='vertical'] {
       grid-template-columns: minmax(0, 1fr);
-      gap: var(--space-3);
+      gap: var(--surf-space-3);
     }
   }
   @media (forced-colors: active) {
-    .pui-tabs-tab[data-active] {
+    .surf-tabs-tab[data-active] {
       background: Highlight;
       color: HighlightText;
       forced-color-adjust: none;
     }
-    .pui-tabs-indicator {
+    .surf-tabs-indicator {
       background: Highlight;
       forced-color-adjust: none;
     }
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *):is(.pui-tabs-tab) {
-    min-block-size: var(--ui-row);
-    font-size: var(--ui-font);
-    line-height: var(--ui-leading);
+  :where([data-ui-size], [data-ui-size] *):is(.surf-tabs-tab) {
+    min-block-size: var(--surf-ui-row);
+    font-size: var(--surf-ui-font);
+    line-height: var(--surf-ui-leading);
   }
 }

package/dist/css/rules/textarea.css

@@ -3,19 +3,21 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-textarea {
+  /* A block box, so no baseline gap opens under it. */
+  .surf-textarea {
+    display: block;
     height: auto;
-    min-height: calc(var(--control-height) * 2.5);
-    padding-block: var(--space-3);
+    min-height: calc(var(--surf-control-height) * 2.5);
+    padding-block: var(--surf-space-3);
     resize: vertical;
     scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+    scrollbar-color: var(--surf-scrollbar-thumb) var(--surf-scrollbar-track);
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-textarea {
+  :where([data-ui-size], [data-ui-size] *).surf-textarea {
     height: auto;
-    min-height: calc(var(--control-height) * 2.5);
-    padding-block: var(--ui-textarea-padding);
+    min-height: calc(var(--surf-control-height) * 2.5);
+    padding-block: var(--surf-ui-textarea-padding);
   }
 }

package/dist/css/rules/toast.css

@@ -4,20 +4,20 @@
 
 @layer surflane.components {
   /* Compact notification surfaces: one quiet card, semantic icon and predictable actions. */
-  .pui-toast-viewport {
+  .surf-toast-viewport {
     position: fixed;
     /* The inset is inside the scrollport so shadows have room to fade. */
     inset-inline-end: 0;
     bottom: 0;
-    z-index: var(--layer-popup);
+    z-index: var(--surf-layer-popup);
     display: flex;
     flex-direction: column-reverse;
-    gap: var(--space-2);
+    gap: var(--surf-space-2);
     box-sizing: border-box;
     width: 416px;
     max-width: 100vw;
     max-height: 100dvh;
-    padding: var(--space-6);
+    padding: var(--surf-space-6);
     overflow-x: hidden;
     overflow-y: auto;
     scrollbar-width: none;
@@ -25,129 +25,131 @@
     pointer-events: none;
     outline: none;
   }
-  .pui-toast {
-    --_toast-icon: var(--ink-muted);
+  .surf-toast {
+    --_toast-icon: var(--surf-ink-muted);
     position: relative;
     flex: none;
     box-sizing: border-box;
     width: 100%;
-    padding: var(--space-4);
+    padding: var(--surf-space-4);
     border: 0;
-    border-radius: var(--radius-lg);
-    background: var(--menu-background);
-    color: var(--ink);
-    box-shadow: var(--shadow-float);
-    font: var(--weight-regular)
-      var(--type-compact-size)/var(--type-compact-leading) var(--font-body);
-    letter-spacing: var(--type-compact-tracking);
+    border-radius: var(--surf-radius-lg);
+    background: var(--surf-menu-background);
+    color: var(--surf-ink);
+    box-shadow: var(--surf-shadow-float);
+    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;
     pointer-events: auto;
     opacity: 1;
     translate: 0 0;
     transition:
-      opacity var(--toast-enter-duration) var(--motion-ease),
-      translate var(--toast-enter-duration) var(--toast-stack-ease);
+      opacity var(--surf-toast-enter-duration) var(--surf-motion-ease),
+      translate var(--surf-toast-enter-duration) var(--surf-toast-stack-ease);
   }
-  .pui-toast[data-tone='success'] {
-    --_toast-icon: var(--status-success-fg);
+  .surf-toast[data-tone='success'] {
+    --_toast-icon: var(--surf-status-success-fg);
   }
-  .pui-toast[data-tone='danger'] {
-    --_toast-icon: var(--status-danger-fg);
+  .surf-toast[data-tone='danger'] {
+    --_toast-icon: var(--surf-status-danger-fg);
   }
-  .pui-toast[data-tone='caution'] {
-    --_toast-icon: var(--status-caution-fg);
+  .surf-toast[data-tone='caution'] {
+    --_toast-icon: var(--surf-status-caution-fg);
   }
-  .pui-toast[data-tone='progress'] {
-    --_toast-icon: var(--status-progress-fg);
+  .surf-toast[data-tone='progress'] {
+    --_toast-icon: var(--surf-status-progress-fg);
   }
-  .pui-toast[data-tone='info'] {
-    --_toast-icon: var(--status-info-fg);
+  .surf-toast[data-tone='info'] {
+    --_toast-icon: var(--surf-status-info-fg);
   }
-  .pui-toast[data-starting-style] {
+  .surf-toast[data-starting-style] {
     opacity: 0;
     translate: 0 12px;
   }
-  .pui-toast[data-ending-style] {
+  .surf-toast[data-ending-style] {
     opacity: 0;
     transition-duration: 0s;
   }
-  .pui-toast[data-limited] {
+  .surf-toast[data-limited] {
     display: none;
   }
-  .pui-toast:focus-visible {
-    outline: var(--focus-ring-width) solid var(--interaction-focus);
-    outline-offset: var(--focus-ring-offset);
+  .surf-toast:focus-visible {
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
+    outline-offset: var(--surf-focus-ring-offset);
   }
-  .pui-toast-content {
+  .surf-toast-content {
     display: flex;
     align-items: flex-start;
-    gap: var(--space-3);
+    gap: var(--surf-space-3);
     opacity: 1;
-    transition: opacity var(--duration-fast) var(--motion-ease);
+    transition: opacity var(--surf-duration-fast) var(--surf-motion-ease);
   }
-  .pui-toast-text {
+  .surf-toast-text {
     flex: 1;
     min-width: 0;
   }
-  .pui-toast-icon {
+  .surf-toast-icon {
     display: inline-flex;
     flex: none;
     color: var(--_toast-icon);
     margin-top: 1px;
   }
-  .pui-toast-icon > svg {
+  .surf-toast-icon > svg {
     width: 18px;
     height: 18px;
   }
-  .pui-toast-title {
+  .surf-toast-title {
     margin: 0;
-    font: var(--weight-medium)
-      var(--type-compact-size)/var(--type-compact-leading) var(--font-body);
-    letter-spacing: var(--type-compact-tracking);
+    font: var(--surf-weight-medium)
+      var(--surf-type-compact-size)/var(--surf-type-compact-leading)
+      var(--surf-font-body);
+    letter-spacing: var(--surf-type-compact-tracking);
   }
-  .pui-toast-description {
+  .surf-toast-description {
     margin: 2px 0 0;
-    color: var(--ink-muted);
-    font-size: var(--type-compact-size);
-    letter-spacing: var(--type-compact-tracking);
-    line-height: var(--type-compact-leading);
+    color: var(--surf-ink-muted);
+    font-size: var(--surf-type-compact-size);
+    letter-spacing: var(--surf-type-compact-tracking);
+    line-height: var(--surf-type-compact-leading);
   }
   /* Close and Action are small Buttons (see toast.tsx); only their placement is set here. */
-  .pui-toast-close {
+  .surf-toast-close {
     flex: none;
     margin: -4px 0 0;
     margin-inline-end: -4px;
-    color: var(--ink-muted);
+    color: var(--surf-ink-muted);
   }
-  .pui-toast-action {
-    margin-top: var(--space-3);
+  .surf-toast-action {
+    margin-top: var(--surf-space-3);
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-toast {
+    .surf-toast {
       transition: none;
     }
-    .pui-toast[data-starting-style] {
+    .surf-toast[data-starting-style] {
       translate: 0 0;
     }
   }
   @media (forced-colors: active) {
-    .pui-toast {
+    .surf-toast {
       background: Canvas;
       color: CanvasText;
       border: 1px solid CanvasText;
       box-shadow: none;
     }
-    .pui-toast-description,
-    .pui-toast-icon {
+    .surf-toast-description,
+    .surf-toast-icon {
       color: CanvasText;
     }
   }
-  .pui-toast-viewport[data-layout='stack']:focus-visible {
-    border-radius: var(--radius-lg);
-    outline: var(--focus-ring-width) solid var(--interaction-focus);
-    outline-offset: var(--focus-ring-inset);
+  .surf-toast-viewport[data-layout='stack']:focus-visible {
+    border-radius: var(--surf-radius-lg);
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
+    outline-offset: var(--surf-focus-ring-inset);
   }
-  .pui-toast-viewport[data-layout='anchored'] {
+  .surf-toast-viewport[data-layout='anchored'] {
     inset: 0;
     display: block;
     width: auto;
@@ -156,28 +158,28 @@
     padding: 0;
     overflow: visible;
   }
-  .pui-toast-viewport[data-layout='anchored'] .pui-toast {
+  .surf-toast-viewport[data-layout='anchored'] .surf-toast {
     width: 320px;
     max-width: min(calc(100vw - 24px), var(--available-width));
     max-height: var(--available-height);
     overflow: auto;
     scrollbar-width: thin;
   }
-  .pui-toast-viewport[data-layout='anchored']:focus-visible .pui-toast {
-    outline: var(--focus-ring-width) solid var(--interaction-focus);
-    outline-offset: var(--focus-ring-offset);
+  .surf-toast-viewport[data-layout='anchored']:focus-visible .surf-toast {
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
+    outline-offset: var(--surf-focus-ring-offset);
   }
   /* Base UI owns hover/focus expansion, announcements, timers and gestures. */
-  .pui-toast-viewport[data-layout='stack'] {
+  .surf-toast-viewport[data-layout='stack'] {
     display: grid;
     /* An auto row adopts the tallest card while its height transitions, moving
        the bottom anchor during collapse when a behind-card has an action. */
     grid-template-rows: var(--toast-frontmost-height, 80px);
-    padding-top: var(--space-6);
+    padding-top: var(--surf-space-6);
     height: calc(var(--toast-frontmost-height, 80px) + 48px);
     overflow: visible;
   }
-  .pui-toast-viewport[data-layout='stack'] > .pui-toast {
+  .surf-toast-viewport[data-layout='stack'] > .surf-toast {
     grid-area: 1 / 1;
     z-index: calc(100 - var(--toast-index));
     height: var(--toast-frontmost-height, var(--toast-height, auto));
@@ -187,61 +189,63 @@
     transform: translateY(calc(var(--toast-index) * -10px))
       scale(calc(1 - var(--toast-index) * 0.035));
     transition:
-      height var(--toast-stack-duration) var(--toast-stack-ease),
-      transform var(--toast-stack-duration) var(--toast-stack-ease),
-      opacity var(--toast-enter-duration) var(--motion-ease),
-      translate var(--toast-enter-duration) var(--toast-stack-ease);
+      height var(--surf-toast-stack-duration) var(--surf-toast-stack-ease),
+      transform var(--surf-toast-stack-duration) var(--surf-toast-stack-ease),
+      opacity var(--surf-toast-enter-duration) var(--surf-motion-ease),
+      translate var(--surf-toast-enter-duration) var(--surf-toast-stack-ease);
   }
-  .pui-toast-viewport[data-layout='stack']:not([data-expanded])
-    .pui-toast-content[data-behind] {
+  .surf-toast-viewport[data-layout='stack']:not([data-expanded])
+    .surf-toast-content[data-behind] {
     opacity: 0;
     pointer-events: none;
   }
-  .pui-toast-viewport[data-layout='stack'][data-expanded] {
+  .surf-toast-viewport[data-layout='stack'][data-expanded] {
     pointer-events: auto;
-    height: min(calc(var(--toast-stack-height, 240px) + 48px), 100dvh);
-    grid-template-rows: var(--toast-stack-height, auto);
-    padding-top: var(--space-6);
+    height: min(calc(var(--surf-toast-stack-height, 240px) + 48px), 100dvh);
+    grid-template-rows: var(--surf-toast-stack-height, auto);
+    padding-top: var(--surf-space-6);
     overflow: visible;
   }
-  .pui-toast-viewport[data-layout='stack'][data-expanded][data-stack-overflow] {
+  .surf-toast-viewport[data-layout='stack'][data-expanded][data-stack-overflow] {
     overflow-y: auto;
     overflow-x: hidden;
   }
-  .pui-toast-viewport[data-layout='stack'][data-expanded] > .pui-toast {
+  .surf-toast-viewport[data-layout='stack'][data-expanded] > .surf-toast {
     height: var(--toast-height, auto);
     transform: translateY(
-      calc(-1 * (var(--toast-offset-y) + var(--toast-index) * var(--space-2)))
+      calc(
+        -1 * (var(--toast-offset-y) + var(--toast-index) * var(--surf-space-2))
+      )
     );
   }
-  .pui-toast-viewport[data-layout='stack'] > .pui-toast[data-ending-style] {
+  .surf-toast-viewport[data-layout='stack'] > .surf-toast[data-ending-style] {
     transition-duration: 0s;
   }
   /* Touch targets grow to the target size with the small Button scheme; the close button stays centred
      on the first line. */
   @media (max-width: 760px), (pointer: coarse) {
-    .pui-toast-close {
+    .surf-toast-close {
       margin-top: -8px;
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-toast-content,
-    .pui-toast-viewport[data-layout='stack'],
-    .pui-toast-viewport[data-layout='stack'] > .pui-toast {
+    .surf-toast-content,
+    .surf-toast-viewport[data-layout='stack'],
+    .surf-toast-viewport[data-layout='stack'] > .surf-toast {
       transition: none;
     }
   }
-  .pui-toast-viewport::-webkit-scrollbar {
+  .surf-toast-viewport::-webkit-scrollbar {
     display: none;
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-toast {
+    .surf-toast {
       transition: none;
     }
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-toast {
-    padding: var(--ui-surface-padding);
+  :where([data-ui-size], [data-ui-size] *).surf-toast {
+    padding: var(--surf-ui-surface-padding);
   }
 }

package/dist/css/rules/toggle.css

@@ -4,24 +4,24 @@
 
 @layer surflane.components {
   /* Command state uses the whole rounded surface, with no one-sided accent. */
-  .pui-toggle {
+  .surf-toggle {
     background: transparent;
-    border-color: var(--line);
+    border-color: var(--surf-line);
   }
-  .pui-toggle[data-pressed] {
-    background: var(--selected);
-    border-color: var(--control-border);
-    color: var(--ink);
+  .surf-toggle[data-pressed] {
+    background: var(--surf-selected);
+    border-color: var(--surf-control-border);
+    color: var(--surf-ink);
   }
-  .pui-toggle[data-disabled] {
-    opacity: var(--control-disabled-opacity);
+  .surf-toggle[data-disabled] {
+    opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *):is(.pui-toggle) {
-    min-block-size: var(--ui-row);
-    font-size: var(--ui-font);
-    line-height: var(--ui-leading);
+  :where([data-ui-size], [data-ui-size] *):is(.surf-toggle) {
+    min-block-size: var(--surf-ui-row);
+    font-size: var(--surf-ui-font);
+    line-height: var(--surf-ui-leading);
   }
 }

package/dist/css/rules/toolbar.css

@@ -3,58 +3,58 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-toolbar-button[aria-pressed='true'] {
-    background: var(--selected);
-    border-color: var(--control-border);
-    color: var(--ink);
-  }
-  .pui-toolbar-button[data-disabled],
-  .pui-toolbar-input[data-disabled] {
-    opacity: var(--control-disabled-opacity);
+  .surf-toolbar-button[aria-pressed='true'] {
+    background: var(--surf-selected);
+    border-color: var(--surf-control-border);
+    color: var(--surf-ink);
+  }
+  .surf-toolbar-button[data-disabled],
+  .surf-toolbar-input[data-disabled] {
+    opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
   }
-  .pui-toolbar {
-    padding: var(--space-1);
-    border-radius: var(--radius-md);
-    background: var(--surface);
-    gap: var(--space-2);
+  .surf-toolbar {
+    padding: var(--surf-space-1);
+    border-radius: var(--surf-radius-md);
+    background: var(--surf-surface);
+    gap: var(--surf-space-2);
   }
-  .pui-toolbar-group {
+  .surf-toolbar-group {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: var(--space-1);
+    gap: var(--surf-space-1);
     min-width: 0;
   }
-  .pui-toolbar-button,
-  .pui-toolbar-link {
+  .surf-toolbar-button,
+  .surf-toolbar-link {
     background: transparent;
     border: 0;
-    border-radius: max(0px, calc(var(--radius-md) - var(--space-1)));
+    border-radius: max(0px, calc(var(--surf-radius-md) - var(--surf-space-1)));
     text-decoration: none;
   }
-  .pui-toolbar-input {
+  .surf-toolbar-input {
     width: 160px;
     max-width: 100%;
     border: 0;
-    border-radius: max(0px, calc(var(--radius-md) - var(--space-1)));
-    background: var(--canvas);
+    border-radius: max(0px, calc(var(--surf-radius-md) - var(--surf-space-1)));
+    background: var(--surf-canvas);
   }
-  .pui-toolbar-separator {
+  .surf-toolbar-separator {
     flex: none;
     background: transparent;
   }
-  .pui-toolbar-separator[data-orientation='vertical'] {
+  .surf-toolbar-separator[data-orientation='vertical'] {
     width: 1px;
     height: 24px;
-    margin-inline: var(--space-1);
+    margin-inline: var(--surf-space-1);
   }
-  .pui-toolbar-separator[data-orientation='horizontal'] {
+  .surf-toolbar-separator[data-orientation='horizontal'] {
     height: 1px;
     width: 100%;
-    margin-block: var(--space-1);
+    margin-block: var(--surf-space-1);
   }
-  .pui-toolbar[data-orientation='vertical'] .pui-toolbar-group {
+  .surf-toolbar[data-orientation='vertical'] .surf-toolbar-group {
     flex-direction: column;
     align-items: stretch;
     width: 100%;