@surflane/ui 0.9.0 → 0.10.1

package/dist/css/rules/scroll-area.css

@@ -3,12 +3,12 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-scroll-root {
+  .surf-scroll-root {
     position: relative;
     min-width: 0;
     max-width: 100%;
   }
-  .pui-scroll-viewport {
+  .surf-scroll-viewport {
     max-width: 100%;
     overscroll-behavior: auto;
     scrollbar-width: none !important;
@@ -16,32 +16,41 @@
   }
   /* A labeled scroller takes keyboard focus. Its root draws the shared ring, since
      the viewport's edge fade would clip a ring drawn on the viewport itself. */
-  .pui-scroll-root:has(> .pui-scroll-viewport:focus-visible) {
-    outline: var(--focus-ring-width) solid var(--interaction-focus);
-    outline-offset: var(--focus-ring-offset);
+  .surf-scroll-root:has(> .surf-scroll-viewport:focus-visible) {
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
+    outline-offset: var(--surf-focus-ring-offset);
   }
-  .pui-scroll-viewport::-webkit-scrollbar {
+  .surf-scroll-viewport::-webkit-scrollbar {
     display: none;
   }
+  /* In a viewport of set height the content is at least as tall, so a child can
+   * stretch to the bottom. A viewport sized by its content is unchanged. */
+  .surf-scroll-content {
+    min-block-size: 100%;
+  }
   /* A horizontal scroller fades the edge that hides more content, so a cut-off table
    * or code line reads as scrollable before its scrollbar appears, on touch too. */
-  .pui-scroll-root[data-overflow-x-end] > .pui-scroll-viewport {
-    mask-image: linear-gradient(to left, transparent, #000 var(--space-6));
+  .surf-scroll-root[data-overflow-x-end] > .surf-scroll-viewport {
+    mask-image: linear-gradient(to left, transparent, #000 var(--surf-space-6));
   }
-  .pui-scroll-root[data-overflow-x-start] > .pui-scroll-viewport {
-    mask-image: linear-gradient(to right, transparent, #000 var(--space-6));
+  .surf-scroll-root[data-overflow-x-start] > .surf-scroll-viewport {
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      #000 var(--surf-space-6)
+    );
   }
-  .pui-scroll-root[data-overflow-x-start][data-overflow-x-end]
-    > .pui-scroll-viewport {
+  .surf-scroll-root[data-overflow-x-start][data-overflow-x-end]
+    > .surf-scroll-viewport {
     mask-image: linear-gradient(
       to right,
       transparent,
-      #000 var(--space-6),
-      #000 calc(100% - var(--space-6)),
+      #000 var(--surf-space-6),
+      #000 calc(100% - var(--surf-space-6)),
       transparent
     );
   }
-  .pui-scrollbar {
+  .surf-scrollbar {
     display: flex;
     user-select: none;
     touch-action: none;
@@ -49,58 +58,60 @@
     background: transparent;
     z-index: 1;
     opacity: 0;
-    transition: opacity var(--duration-fast) var(--ease-out);
-  }
-  .pui-scrollbar[data-scrolling],
-  .pui-scrollbar:hover,
-  .pui-scroll-root[data-scroll-near-x]
-    > .pui-scrollbar[data-orientation='horizontal'],
-  .pui-scroll-root[data-scroll-near-y]
-    > .pui-scrollbar[data-orientation='vertical'],
-  .pui-scroll-root[data-scroll-dragging='horizontal']
-    > .pui-scrollbar[data-orientation='horizontal'],
-  .pui-scroll-root[data-scroll-dragging='vertical']
-    > .pui-scrollbar[data-orientation='vertical'],
-  .pui-scroll-root:has(> .pui-scroll-viewport:focus-visible) > .pui-scrollbar {
+    transition: opacity var(--surf-duration-fast) var(--surf-ease-out);
+  }
+  .surf-scrollbar[data-scrolling],
+  .surf-scrollbar:hover,
+  .surf-scroll-root[data-scroll-near-x]
+    > .surf-scrollbar[data-orientation='horizontal'],
+  .surf-scroll-root[data-scroll-near-y]
+    > .surf-scrollbar[data-orientation='vertical'],
+  .surf-scroll-root[data-scroll-dragging='horizontal']
+    > .surf-scrollbar[data-orientation='horizontal'],
+  .surf-scroll-root[data-scroll-dragging='vertical']
+    > .surf-scrollbar[data-orientation='vertical'],
+  .surf-scroll-root:has(> .surf-scroll-viewport:focus-visible)
+    > .surf-scrollbar {
     opacity: 1;
   }
-  .pui-scrollbar[data-orientation='horizontal'] {
-    height: 10px;
+  /* The thumb plus the bar's padding on both sides. */
+  .surf-scrollbar[data-orientation='horizontal'] {
+    height: calc(var(--surf-scrollbar-indicator-size) + 4px);
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
   }
-  .pui-scrollbar[data-orientation='vertical'] {
+  .surf-scrollbar[data-orientation='vertical'] {
     flex-direction: column;
-    width: 10px;
+    width: calc(var(--surf-scrollbar-indicator-size) + 4px);
     position: absolute;
     top: 0;
     bottom: 0;
     right: 0;
   }
-  .pui-scroll-thumb {
+  .surf-scroll-thumb {
     flex: none;
-    border-radius: var(--radius-full);
-    background: var(--ink-muted);
+    border-radius: var(--surf-radius-full);
+    background: var(--surf-ink-muted);
     opacity: 0.45;
   }
-  .pui-scrollbar:hover .pui-scroll-thumb {
+  .surf-scrollbar:hover .surf-scroll-thumb {
     opacity: 0.8;
   }
   /* On touch-only screens a scrollbar is a position indicator, as native mobile
    * scrollbars are: content scrolls by swiping, so the bar overlaying its edge
    * never takes a tap meant for the link or control beneath it. */
   @media (hover: none) and (pointer: coarse) {
-    .pui-scrollbar {
+    .surf-scrollbar {
       pointer-events: none;
     }
   }
   @media (forced-colors: active) {
-    .pui-scrollbar {
+    .surf-scrollbar {
       opacity: 1;
     }
-    .pui-scrollbar .pui-scroll-thumb {
+    .surf-scrollbar .surf-scroll-thumb {
       background: CanvasText;
       opacity: 1;
     }

package/dist/css/rules/select.css

@@ -3,92 +3,95 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-select-trigger {
+  .surf-select-trigger {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: var(--space-2);
+    gap: var(--surf-space-2);
     text-align: start;
     cursor: pointer;
   }
-  .pui-select-trigger > span:first-child {
+  .surf-select-trigger > span:first-child {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .pui-select-icon {
+  .surf-select-icon {
     display: flex;
     align-items: center;
     flex: none;
-    color: var(--ink-muted);
+    color: var(--surf-ink-muted);
   }
-  .pui-select-popup {
+  .surf-select-popup {
     min-width: var(--anchor-width);
     max-height: min(360px, var(--available-height));
     overflow: auto;
-    padding: var(--space-1);
+    padding: var(--surf-space-1);
     overscroll-behavior: contain;
     scrollbar-width: thin;
   }
-  .pui-select-item {
+  .surf-select-item {
     position: relative;
     display: flex;
     align-items: center;
-    gap: var(--space-2);
-    min-height: var(--control-height);
-    padding: max(var(--space-1), calc((var(--control-height) - 1lh) / 2))
-      var(--space-3);
+    gap: var(--surf-space-2);
+    min-height: var(--surf-control-height);
+    padding: max(
+        var(--surf-space-1),
+        calc((var(--surf-control-height) - 1lh) / 2)
+      )
+      var(--surf-space-3);
     padding-inline-start: calc(
-      var(--space-3) + var(--icon-size-sm) + var(--space-2)
+      var(--surf-space-3) + var(--surf-size-icon-default) + var(--surf-space-2)
     );
-    border-radius: var(--control-radius);
+    border-radius: var(--surf-control-radius);
     cursor: default;
     outline: none;
     overflow-wrap: anywhere;
   }
-  .pui-select-item[data-highlighted] {
-    background: var(--menu-hover-background);
+  .surf-select-item[data-highlighted] {
+    background: var(--surf-menu-hover-background);
   }
-  .pui-select-item[data-selected] {
-    font-weight: var(--weight-medium);
+  .surf-select-item[data-selected] {
+    font-weight: var(--surf-weight-medium);
   }
-  .pui-select-item[data-disabled] {
-    opacity: var(--control-disabled-opacity);
+  .surf-select-item[data-disabled] {
+    opacity: var(--surf-control-disabled-opacity);
   }
   @media (forced-colors: active) {
-    .pui-select-item[data-highlighted] {
+    .surf-select-item[data-highlighted] {
       outline: 1px solid CanvasText;
       outline-offset: -1px;
     }
   }
-  .pui-select-check {
+  .surf-select-check {
     position: absolute;
-    inset-inline-start: var(--space-3);
+    inset-inline-start: var(--surf-space-3);
     display: flex;
-    width: var(--icon-size-sm);
+    width: var(--surf-size-icon-default);
   }
   /* A group heading starts where its options' text does, past the check column. */
-  .pui-select-group-label {
+  .surf-select-group-label {
     padding-inline-start: calc(
-      var(--space-3) + var(--icon-size-sm) + var(--space-2)
+      var(--surf-space-3) + var(--surf-size-icon-default) + var(--surf-space-2)
     );
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *):is(.pui-select-trigger) {
-    font-size: var(--ui-font);
-    line-height: var(--ui-leading);
+  :where([data-ui-size], [data-ui-size] *):is(.surf-select-trigger) {
+    font-size: var(--surf-ui-font);
+    line-height: var(--surf-ui-leading);
   }
-  :where([data-ui-size], [data-ui-size] *):is(.pui-select-item) {
-    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-select-item) {
+    min-block-size: var(--surf-ui-row);
+    font-size: var(--surf-ui-font);
+    line-height: var(--surf-ui-leading);
   }
-  :where([data-ui-size], [data-ui-size] *):is(.pui-select-item) {
+  :where([data-ui-size], [data-ui-size] *):is(.surf-select-item) {
     box-sizing: border-box;
     padding-block: max(
-      var(--space-1),
-      calc((var(--ui-row) - var(--ui-leading)) / 2)
+      var(--surf-space-1),
+      calc((var(--surf-ui-row) - var(--surf-ui-leading)) / 2)
     );
   }
 }

package/dist/css/rules/sizing.css

@@ -4,137 +4,140 @@
 
 @layer surflane.sizes {
   /* SizeProvider adds no layout box. Screen-reader semantics belong to its children. */
-  .pui-size-scope {
+  .surf-size-scope {
     display: contents;
   }
   [data-ui-size='small'] {
-    --ui-slider-track: var(--size-slider-track-small);
-    --ui-file-padding: var(--size-file-padding-small);
-    --ui-content-gap: var(--size-content-gap-small);
+    --surf-ui-slider-track: var(--surf-size-slider-track-small);
+    --surf-ui-file-padding: var(--surf-size-file-padding-small);
+    --surf-ui-content-gap: var(--surf-size-content-gap-small);
 
-    --ui-control-height: var(--size-control-height-small);
-    --ui-control-padding: var(--size-control-padding-small);
-    --ui-button-padding: var(--size-button-padding-small);
-    --ui-font: var(--size-font-small);
-    --ui-leading: var(--size-leading-small);
-    --ui-choice: var(--size-choice-small);
-    --ui-switch-width: var(--size-switch-width-small);
-    --ui-switch-height: var(--size-switch-height-small);
-    --ui-switch-thumb: var(--size-switch-thumb-small);
-    --ui-icon: var(--size-icon-small);
-    --ui-surface-padding: var(--size-surface-padding-small);
-    --ui-card-padding: var(--size-card-padding-small);
-    --ui-gap: var(--size-gap-small);
-    --ui-row: var(--size-row-small);
-    --ui-table-padding-y: var(--size-table-padding-y-small);
-    --ui-table-padding-x: var(--size-table-padding-x-small);
-    --ui-avatar: var(--size-avatar-small);
-    --ui-spinner: var(--size-spinner-small);
-    --ui-badge-padding-y: var(--size-badge-padding-y-small);
-    --ui-badge-padding-x: var(--size-badge-padding-x-small);
-    --ui-badge-font: var(--size-badge-font-small);
-    --ui-gauge: var(--size-gauge-small);
-    --ui-slider-thumb: var(--size-slider-thumb-small);
-    --ui-otp: var(--size-otp-small);
-    --ui-tree-row: var(--size-tree-row-small);
-    --ui-textarea-padding: var(--size-textarea-padding-small);
-    --ui-tooltip-padding-y: var(--size-tooltip-padding-y-small);
-    --ui-tooltip-padding-x: var(--size-tooltip-padding-x-small);
-    --control-height: var(--ui-control-height);
-    --control-padding-x: var(--ui-control-padding);
-    --control-choice-size: var(--ui-choice);
-    --control-switch-width: var(--ui-switch-width);
-    --control-switch-height: var(--ui-switch-height);
-    --control-switch-thumb: var(--ui-switch-thumb);
+    --surf-ui-control-height: var(--surf-size-control-height-small);
+    --surf-ui-control-padding: var(--surf-size-control-padding-small);
+    --surf-ui-button-padding: var(--surf-size-button-padding-small);
+    --surf-ui-font: var(--surf-size-font-small);
+    --surf-ui-leading: var(--surf-size-leading-small);
+    --surf-ui-choice: var(--surf-size-choice-small);
+    --surf-ui-switch-width: var(--surf-size-switch-width-small);
+    --surf-ui-switch-height: var(--surf-size-switch-height-small);
+    --surf-ui-switch-thumb: var(--surf-size-switch-thumb-small);
+    --surf-ui-icon: var(--surf-size-icon-small);
+    --surf-ui-surface-padding: var(--surf-size-surface-padding-small);
+    --surf-ui-card-padding: var(--surf-size-card-padding-small);
+    --surf-ui-gap: var(--surf-size-gap-small);
+    --surf-ui-row: var(--surf-size-row-small);
+    --surf-ui-table-padding-y: var(--surf-size-table-padding-y-small);
+    --surf-ui-table-padding-x: var(--surf-size-table-padding-x-small);
+    --surf-ui-avatar: var(--surf-size-avatar-small);
+    --surf-ui-spinner: var(--surf-size-spinner-small);
+    --surf-ui-badge-padding-y: var(--surf-size-badge-padding-y-small);
+    --surf-ui-badge-padding-x: var(--surf-size-badge-padding-x-small);
+    --surf-ui-badge-font: var(--surf-size-badge-font-small);
+    --surf-ui-gauge: var(--surf-size-gauge-small);
+    --surf-ui-slider-thumb: var(--surf-size-slider-thumb-small);
+    --surf-ui-otp: var(--surf-size-otp-small);
+    --surf-ui-tree-row: var(--surf-size-tree-row-small);
+    --surf-ui-textarea-padding: var(--surf-size-textarea-padding-small);
+    --surf-ui-tooltip-padding-y: var(--surf-size-tooltip-padding-y-small);
+    --surf-ui-tooltip-padding-x: var(--surf-size-tooltip-padding-x-small);
+    --surf-control-height: var(--surf-ui-control-height);
+    --surf-control-padding-x: var(--surf-ui-control-padding);
+    --surf-control-choice-size: var(--surf-ui-choice);
+    --surf-control-switch-width: var(--surf-ui-switch-width);
+    --surf-control-switch-height: var(--surf-ui-switch-height);
+    --surf-control-switch-thumb: var(--surf-ui-switch-thumb);
   }
   [data-ui-size='default'] {
-    --ui-slider-track: var(--size-slider-track-default);
-    --ui-file-padding: var(--size-file-padding-default);
-    --ui-content-gap: var(--size-content-gap-default);
+    --surf-ui-slider-track: var(--surf-size-slider-track-default);
+    --surf-ui-file-padding: var(--surf-size-file-padding-default);
+    --surf-ui-content-gap: var(--surf-size-content-gap-default);
 
-    --ui-control-height: var(--size-control-height-default);
-    --ui-control-padding: var(--size-control-padding-default);
-    --ui-button-padding: var(--size-button-padding-default);
-    --ui-font: var(--size-font-default);
-    --ui-leading: var(--size-leading-default);
-    --ui-choice: var(--size-choice-default);
-    --ui-switch-width: var(--size-switch-width-default);
-    --ui-switch-height: var(--size-switch-height-default);
-    --ui-switch-thumb: var(--size-switch-thumb-default);
-    --ui-icon: var(--size-icon-default);
-    --ui-surface-padding: var(--size-surface-padding-default);
-    --ui-card-padding: var(--size-card-padding-default);
-    --ui-gap: var(--size-gap-default);
-    --ui-row: var(--size-row-default);
-    --ui-table-padding-y: var(--size-table-padding-y-default);
-    --ui-table-padding-x: var(--size-table-padding-x-default);
-    --ui-avatar: var(--size-avatar-default);
-    --ui-spinner: var(--size-spinner-default);
-    --ui-badge-padding-y: var(--size-badge-padding-y-default);
-    --ui-badge-padding-x: var(--size-badge-padding-x-default);
-    --ui-badge-font: var(--size-badge-font-default);
-    --ui-gauge: var(--size-gauge-default);
-    --ui-slider-thumb: var(--size-slider-thumb-default);
-    --ui-otp: var(--size-otp-default);
-    --ui-tree-row: var(--size-tree-row-default);
-    --ui-textarea-padding: var(--size-textarea-padding-default);
-    --ui-tooltip-padding-y: var(--size-tooltip-padding-y-default);
-    --ui-tooltip-padding-x: var(--size-tooltip-padding-x-default);
-    --control-height: var(--ui-control-height);
-    --control-padding-x: var(--ui-control-padding);
-    --control-choice-size: var(--ui-choice);
-    --control-switch-width: var(--ui-switch-width);
-    --control-switch-height: var(--ui-switch-height);
-    --control-switch-thumb: var(--ui-switch-thumb);
+    --surf-ui-control-height: var(--surf-size-control-height-default);
+    --surf-ui-control-padding: var(--surf-size-control-padding-default);
+    --surf-ui-button-padding: var(--surf-size-button-padding-default);
+    --surf-ui-font: var(--surf-size-font-default);
+    --surf-ui-leading: var(--surf-size-leading-default);
+    --surf-ui-choice: var(--surf-size-choice-default);
+    --surf-ui-switch-width: var(--surf-size-switch-width-default);
+    --surf-ui-switch-height: var(--surf-size-switch-height-default);
+    --surf-ui-switch-thumb: var(--surf-size-switch-thumb-default);
+    --surf-ui-icon: var(--surf-size-icon-default);
+    --surf-ui-surface-padding: var(--surf-size-surface-padding-default);
+    --surf-ui-card-padding: var(--surf-size-card-padding-default);
+    --surf-ui-gap: var(--surf-size-gap-default);
+    --surf-ui-row: var(--surf-size-row-default);
+    --surf-ui-table-padding-y: var(--surf-size-table-padding-y-default);
+    --surf-ui-table-padding-x: var(--surf-size-table-padding-x-default);
+    --surf-ui-avatar: var(--surf-size-avatar-default);
+    --surf-ui-spinner: var(--surf-size-spinner-default);
+    --surf-ui-badge-padding-y: var(--surf-size-badge-padding-y-default);
+    --surf-ui-badge-padding-x: var(--surf-size-badge-padding-x-default);
+    --surf-ui-badge-font: var(--surf-size-badge-font-default);
+    --surf-ui-gauge: var(--surf-size-gauge-default);
+    --surf-ui-slider-thumb: var(--surf-size-slider-thumb-default);
+    --surf-ui-otp: var(--surf-size-otp-default);
+    --surf-ui-tree-row: var(--surf-size-tree-row-default);
+    --surf-ui-textarea-padding: var(--surf-size-textarea-padding-default);
+    --surf-ui-tooltip-padding-y: var(--surf-size-tooltip-padding-y-default);
+    --surf-ui-tooltip-padding-x: var(--surf-size-tooltip-padding-x-default);
+    --surf-control-height: var(--surf-ui-control-height);
+    --surf-control-padding-x: var(--surf-ui-control-padding);
+    --surf-control-choice-size: var(--surf-ui-choice);
+    --surf-control-switch-width: var(--surf-ui-switch-width);
+    --surf-control-switch-height: var(--surf-ui-switch-height);
+    --surf-control-switch-thumb: var(--surf-ui-switch-thumb);
   }
   [data-ui-size='large'] {
-    --ui-slider-track: var(--size-slider-track-large);
-    --ui-file-padding: var(--size-file-padding-large);
-    --ui-content-gap: var(--size-content-gap-large);
+    --surf-ui-slider-track: var(--surf-size-slider-track-large);
+    --surf-ui-file-padding: var(--surf-size-file-padding-large);
+    --surf-ui-content-gap: var(--surf-size-content-gap-large);
 
-    --ui-control-height: var(--size-control-height-large);
-    --ui-control-padding: var(--size-control-padding-large);
-    --ui-button-padding: var(--size-button-padding-large);
-    --ui-font: var(--size-font-large);
-    --ui-leading: var(--size-leading-large);
-    --ui-choice: var(--size-choice-large);
-    --ui-switch-width: var(--size-switch-width-large);
-    --ui-switch-height: var(--size-switch-height-large);
-    --ui-switch-thumb: var(--size-switch-thumb-large);
-    --ui-icon: var(--size-icon-large);
-    --ui-surface-padding: var(--size-surface-padding-large);
-    --ui-card-padding: var(--size-card-padding-large);
-    --ui-gap: var(--size-gap-large);
-    --ui-row: var(--size-row-large);
-    --ui-table-padding-y: var(--size-table-padding-y-large);
-    --ui-table-padding-x: var(--size-table-padding-x-large);
-    --ui-avatar: var(--size-avatar-large);
-    --ui-spinner: var(--size-spinner-large);
-    --ui-badge-padding-y: var(--size-badge-padding-y-large);
-    --ui-badge-padding-x: var(--size-badge-padding-x-large);
-    --ui-badge-font: var(--size-badge-font-large);
-    --ui-gauge: var(--size-gauge-large);
-    --ui-slider-thumb: var(--size-slider-thumb-large);
-    --ui-otp: var(--size-otp-large);
-    --ui-tree-row: var(--size-tree-row-large);
-    --ui-textarea-padding: var(--size-textarea-padding-large);
-    --ui-tooltip-padding-y: var(--size-tooltip-padding-y-large);
-    --ui-tooltip-padding-x: var(--size-tooltip-padding-x-large);
-    --control-height: var(--ui-control-height);
-    --control-padding-x: var(--ui-control-padding);
-    --control-choice-size: var(--ui-choice);
-    --control-switch-width: var(--ui-switch-width);
-    --control-switch-height: var(--ui-switch-height);
-    --control-switch-thumb: var(--ui-switch-thumb);
+    --surf-ui-control-height: var(--surf-size-control-height-large);
+    --surf-ui-control-padding: var(--surf-size-control-padding-large);
+    --surf-ui-button-padding: var(--surf-size-button-padding-large);
+    --surf-ui-font: var(--surf-size-font-large);
+    --surf-ui-leading: var(--surf-size-leading-large);
+    --surf-ui-choice: var(--surf-size-choice-large);
+    --surf-ui-switch-width: var(--surf-size-switch-width-large);
+    --surf-ui-switch-height: var(--surf-size-switch-height-large);
+    --surf-ui-switch-thumb: var(--surf-size-switch-thumb-large);
+    --surf-ui-icon: var(--surf-size-icon-large);
+    --surf-ui-surface-padding: var(--surf-size-surface-padding-large);
+    --surf-ui-card-padding: var(--surf-size-card-padding-large);
+    --surf-ui-gap: var(--surf-size-gap-large);
+    --surf-ui-row: var(--surf-size-row-large);
+    --surf-ui-table-padding-y: var(--surf-size-table-padding-y-large);
+    --surf-ui-table-padding-x: var(--surf-size-table-padding-x-large);
+    --surf-ui-avatar: var(--surf-size-avatar-large);
+    --surf-ui-spinner: var(--surf-size-spinner-large);
+    --surf-ui-badge-padding-y: var(--surf-size-badge-padding-y-large);
+    --surf-ui-badge-padding-x: var(--surf-size-badge-padding-x-large);
+    --surf-ui-badge-font: var(--surf-size-badge-font-large);
+    --surf-ui-gauge: var(--surf-size-gauge-large);
+    --surf-ui-slider-thumb: var(--surf-size-slider-thumb-large);
+    --surf-ui-otp: var(--surf-size-otp-large);
+    --surf-ui-tree-row: var(--surf-size-tree-row-large);
+    --surf-ui-textarea-padding: var(--surf-size-textarea-padding-large);
+    --surf-ui-tooltip-padding-y: var(--surf-size-tooltip-padding-y-large);
+    --surf-ui-tooltip-padding-x: var(--surf-size-tooltip-padding-x-large);
+    --surf-control-height: var(--surf-ui-control-height);
+    --surf-control-padding-x: var(--surf-ui-control-padding);
+    --surf-control-choice-size: var(--surf-ui-choice);
+    --surf-control-switch-width: var(--surf-ui-switch-width);
+    --surf-control-switch-height: var(--surf-ui-switch-height);
+    --surf-control-switch-thumb: var(--surf-ui-switch-thumb);
   }
   /* Coarse pointers retain comfortable targets even with a compact visual scheme. */
   @media (max-width: 760px), (pointer: coarse) {
     [data-ui-size] {
-      --control-height: max(
-        var(--control-target-size),
-        var(--ui-control-height)
+      --surf-control-height: max(
+        var(--surf-control-target-size),
+        var(--surf-ui-control-height)
+      );
+      --surf-ui-row: max(
+        var(--surf-control-target-size),
+        var(--surf-ui-control-height)
       );
-      --ui-row: max(var(--control-target-size), var(--ui-control-height));
     }
   }
 }

package/dist/css/rules/skeleton.css

@@ -3,39 +3,46 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-skeleton {
+  .surf-skeleton {
     display: block;
     min-width: 0;
     width: 100%;
     height: 1em;
-    border-radius: var(--radius-sm);
-    background: var(--surface);
-    animation: pui-progress-pulse 1.4s ease-in-out infinite;
+    border-radius: var(--surf-radius-sm);
+    /* Its own tokens: --surf-surface is about 1.07:1 on a light canvas, and a pulse
+       through opacity faded it further. The pulse moves between the two shades. */
+    background: var(--surf-skeleton-base);
+    animation: surf-skeleton-pulse 1.4s ease-in-out infinite;
   }
-  .pui-skeleton[data-shape='block'] {
+  @keyframes surf-skeleton-pulse {
+    50% {
+      background-color: var(--surf-skeleton-highlight);
+    }
+  }
+  .surf-skeleton[data-shape='block'] {
     height: 96px;
-    border-radius: var(--radius-md);
+    border-radius: var(--surf-radius-md);
   }
-  .pui-skeleton[data-shape='circle'] {
+  .surf-skeleton[data-shape='circle'] {
     width: 36px;
     height: 36px;
     border-radius: 50%;
     flex: none;
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-skeleton {
+    .surf-skeleton {
       animation: none;
       transition: none;
     }
   }
   @media (forced-colors: active) {
-    .pui-skeleton {
+    .surf-skeleton {
       background: CanvasText;
     }
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-skeleton[data-shape='text'] {
-    height: var(--ui-leading);
+  :where([data-ui-size], [data-ui-size] *).surf-skeleton[data-shape='text'] {
+    height: var(--surf-ui-leading);
   }
 }