@surflane/ui 0.9.0 → 0.10.0

package/dist/css/rules/slider.css

@@ -3,122 +3,122 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-slider {
+  .surf-slider {
     display: grid;
     grid-template-columns: minmax(0, 1fr) auto;
-    column-gap: var(--space-4);
-    row-gap: var(--space-2);
+    column-gap: var(--surf-space-4);
+    row-gap: var(--surf-space-2);
     width: 100%;
     max-width: 32rem;
     min-width: 0;
-    color: var(--ink-body);
+    color: var(--surf-ink-body);
   }
-  .pui-slider-label {
-    font-weight: var(--weight-regular);
-    color: var(--ink);
+  .surf-slider-label {
+    font-weight: var(--surf-weight-regular);
+    color: var(--surf-ink);
     overflow-wrap: anywhere;
   }
-  .pui-slider-value {
+  .surf-slider-value {
     margin: 0;
     font: inherit;
     font-variant-numeric: tabular-nums;
     text-align: end;
   }
-  .pui-slider-control {
+  .surf-slider-control {
     position: relative;
     grid-column: 1/-1;
     display: flex;
     align-items: center;
     width: 100%;
     min-width: 0;
-    height: var(--control-target-size);
+    height: var(--surf-control-target-size);
     touch-action: pan-y;
     user-select: none;
     cursor: pointer;
   }
-  .pui-slider-track {
+  .surf-slider-track {
     width: 100%;
     height: 6px;
-    border-radius: var(--radius-full);
-    background: var(--ink-muted);
+    border-radius: var(--surf-radius-full);
+    background: var(--surf-slider-track);
   }
-  .pui-slider-indicator {
-    background: var(--brand);
+  .surf-slider-indicator {
+    background: var(--surf-brand);
     border-radius: inherit;
   }
-  .pui-slider-thumb {
+  .surf-slider-thumb {
     box-sizing: border-box;
     width: 24px;
     height: 24px;
-    border: 2px solid var(--ink-body);
-    border-radius: var(--radius-full);
-    background: var(--canvas);
+    border: 2px solid var(--surf-ink-body);
+    border-radius: var(--surf-radius-full);
+    background: var(--surf-canvas);
   }
   /* The thumb's input is focused on pointer use too; only keyboard focus rings. */
-  .pui-slider-thumb:has(:focus-visible) {
-    outline: var(--focus-ring-width) solid var(--interaction-focus);
-    outline-offset: var(--focus-ring-offset);
+  .surf-slider-thumb:has(:focus-visible) {
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
+    outline-offset: var(--surf-focus-ring-offset);
   }
-  .pui-slider[data-disabled] {
-    opacity: var(--control-disabled-opacity);
+  .surf-slider[data-disabled] {
+    opacity: var(--surf-control-disabled-opacity);
   }
-  .pui-slider-control[data-disabled],
-  .pui-slider-thumb[data-disabled] {
+  .surf-slider-control[data-disabled],
+  .surf-slider-thumb[data-disabled] {
     cursor: not-allowed;
   }
-  .pui-slider[data-orientation='vertical'] {
+  .surf-slider[data-orientation='vertical'] {
     width: max-content;
     min-width: 120px;
   }
-  .pui-slider-control[data-orientation='vertical'] {
-    width: var(--control-target-size);
+  .surf-slider-control[data-orientation='vertical'] {
+    width: var(--surf-control-target-size);
     height: 192px;
     justify-content: center;
     justify-self: center;
     touch-action: pan-x;
   }
-  .pui-slider-track[data-orientation='vertical'] {
+  .surf-slider-track[data-orientation='vertical'] {
     width: 6px;
     height: 100%;
   }
   @media (max-width: 760px) {
-    .pui-slider-thumb {
+    .surf-slider-thumb {
       width: 28px;
       height: 28px;
     }
   }
   @media (forced-colors: active) {
-    .pui-slider-track {
+    .surf-slider-track {
       background: CanvasText;
     }
-    .pui-slider-indicator {
+    .surf-slider-indicator {
       background: Highlight;
     }
-    .pui-slider-thumb {
+    .surf-slider-thumb {
       border-color: CanvasText;
       background: Canvas;
     }
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-slider-thumb {
-    width: var(--ui-slider-thumb);
-    height: var(--ui-slider-thumb);
+  :where([data-ui-size], [data-ui-size] *).surf-slider-thumb {
+    width: var(--surf-ui-slider-thumb);
+    height: var(--surf-ui-slider-thumb);
   }
   @media (max-width: 760px), (pointer: coarse) {
-    :where([data-ui-size], [data-ui-size] *).pui-slider-control {
-      min-block-size: var(--control-target-size);
+    :where([data-ui-size], [data-ui-size] *).surf-slider-control {
+      min-block-size: var(--surf-control-target-size);
     }
   }
-  :where([data-ui-size], [data-ui-size] *).pui-slider-track:not(
+  :where([data-ui-size], [data-ui-size] *).surf-slider-track:not(
       [data-orientation='vertical']
     ) {
-    height: var(--ui-gauge);
+    height: var(--surf-ui-gauge);
   }
   :where(
       [data-ui-size],
       [data-ui-size] *
-    ).pui-slider-track[data-orientation='vertical'] {
-    width: var(--ui-slider-track);
+    ).surf-slider-track[data-orientation='vertical'] {
+    width: var(--surf-ui-slider-track);
   }
 }

package/dist/css/rules/sparkline.css

@@ -4,48 +4,48 @@
 
 @layer surflane.components {
   /* The line fills the width it is given; its height comes from the size. */
-  .pui-sparkline {
-    --sparkline-height: var(--space-8);
+  .surf-sparkline {
+    --surf-sparkline-height: var(--surf-space-8);
     display: block;
     inline-size: 100%;
-    block-size: var(--sparkline-height);
+    block-size: var(--surf-sparkline-height);
     overflow: visible;
-    color: var(--ink-body);
+    color: var(--surf-ink-body);
     fill: none;
   }
-  .pui-sparkline[data-size='small'] {
-    --sparkline-height: var(--space-6);
+  .surf-sparkline[data-size='small'] {
+    --surf-sparkline-height: var(--surf-space-6);
   }
-  .pui-sparkline[data-size='large'] {
-    --sparkline-height: var(--space-12);
+  .surf-sparkline[data-size='large'] {
+    --surf-sparkline-height: var(--surf-space-12);
   }
-  .pui-sparkline[data-tone='up'] {
-    color: var(--trend-up-fg);
+  .surf-sparkline[data-tone='up'] {
+    color: var(--surf-trend-up-fg);
   }
-  .pui-sparkline[data-tone='down'] {
-    color: var(--trend-down-fg);
+  .surf-sparkline[data-tone='down'] {
+    color: var(--surf-trend-down-fg);
   }
-  .pui-sparkline[data-tone='flat'] {
-    color: var(--trend-flat-fg);
+  .surf-sparkline[data-tone='flat'] {
+    color: var(--surf-trend-flat-fg);
   }
-  .pui-sparkline-line {
+  .surf-sparkline-line {
     stroke: currentColor;
-    stroke-width: var(--icon-stroke-width);
+    stroke-width: var(--surf-icon-stroke-width);
     stroke-linejoin: round;
     stroke-linecap: round;
   }
-  .pui-sparkline-baseline {
-    stroke: var(--ink-muted);
+  .surf-sparkline-baseline {
+    stroke: var(--surf-ink-muted);
     stroke-width: 1;
     stroke-dasharray: 2 3;
   }
-  .pui-sparkline-marker {
+  .surf-sparkline-marker {
     stroke: currentColor;
-    stroke-width: calc(var(--icon-stroke-width) * 3);
+    stroke-width: calc(var(--surf-icon-stroke-width) * 3);
     stroke-linecap: round;
   }
   @media (forced-colors: active) {
-    .pui-sparkline {
+    .surf-sparkline {
       color: CanvasText;
     }
   }

package/dist/css/rules/spinner.css

@@ -3,36 +3,36 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-spinner {
+  .surf-spinner {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: none;
-    color: var(--ink-body);
+    color: var(--surf-ink-body);
     width: 20px;
     height: 20px;
     vertical-align: middle;
   }
-  .pui-spinner > svg {
+  .surf-spinner > svg {
     width: 100%;
     height: 100%;
-    animation: pui-feedback-spin 1s linear infinite;
+    animation: surf-feedback-spin 1s linear infinite;
   }
-  @keyframes pui-feedback-spin {
+  @keyframes surf-feedback-spin {
     to {
       transform: rotate(360deg);
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-spinner > svg {
+    .surf-spinner > svg {
       animation: none;
       transition: none;
     }
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-spinner {
-    width: var(--ui-spinner);
-    height: var(--ui-spinner);
+  :where([data-ui-size], [data-ui-size] *).surf-spinner {
+    width: var(--surf-ui-spinner);
+    height: var(--surf-ui-spinner);
   }
 }

package/dist/css/rules/stat.css

@@ -5,55 +5,55 @@
 @layer surflane.components {
   /* The label and caption take their own lines; the value and its change share one,
      on a common baseline. */
-  .pui-stat {
+  .surf-stat {
     display: flex;
     flex-wrap: wrap;
     align-items: baseline;
-    gap: var(--space-1) var(--space-2);
+    gap: var(--surf-space-1) var(--surf-space-2);
     min-width: 0;
     margin: 0;
   }
-  .pui-stat > :where(dt, dd) {
+  .surf-stat > :where(dt, dd) {
     margin: 0;
   }
-  .pui-stat-label {
+  .surf-stat-label {
     flex: 1 0 100%;
-    color: var(--ink-muted);
-    font-size: var(--type-label-size);
-    line-height: var(--type-label-leading);
-    letter-spacing: var(--type-label-tracking);
-  }
-  .pui-stat-value {
-    color: var(--ink);
-    font-family: var(--font-display);
-    font-size: var(--type-metric-size);
-    line-height: var(--type-metric-leading);
-    letter-spacing: var(--type-metric-tracking);
-    font-weight: var(--weight-medium);
+    color: var(--surf-ink-muted);
+    font-size: var(--surf-type-label-size);
+    line-height: var(--surf-type-label-leading);
+    letter-spacing: var(--surf-type-label-tracking);
+  }
+  .surf-stat-value {
+    color: var(--surf-ink);
+    font-family: var(--surf-font-display);
+    font-size: var(--surf-type-metric-size);
+    line-height: var(--surf-type-metric-leading);
+    letter-spacing: var(--surf-type-metric-tracking);
+    font-weight: var(--surf-weight-medium);
     font-variant-numeric: tabular-nums;
   }
-  .pui-stat-change {
+  .surf-stat-change {
     display: inline-flex;
     align-items: center;
-    gap: var(--space-1);
-    color: var(--trend-flat-fg);
-    font-size: var(--type-label-size);
-    line-height: var(--type-label-leading);
-    letter-spacing: var(--type-label-tracking);
-    font-weight: var(--weight-medium);
+    gap: var(--surf-space-1);
+    color: var(--surf-trend-flat-fg);
+    font-size: var(--surf-type-label-size);
+    line-height: var(--surf-type-label-leading);
+    letter-spacing: var(--surf-type-label-tracking);
+    font-weight: var(--surf-weight-medium);
     font-variant-numeric: tabular-nums;
   }
-  .pui-stat-change[data-tone='up'] {
-    color: var(--trend-up-fg);
+  .surf-stat-change[data-tone='up'] {
+    color: var(--surf-trend-up-fg);
   }
-  .pui-stat-change[data-tone='down'] {
-    color: var(--trend-down-fg);
+  .surf-stat-change[data-tone='down'] {
+    color: var(--surf-trend-down-fg);
   }
-  .pui-stat-caption {
+  .surf-stat-caption {
     flex: 1 0 100%;
-    color: var(--ink-muted);
-    font-size: var(--type-caption-size);
-    line-height: var(--type-caption-leading);
-    letter-spacing: var(--type-caption-tracking);
+    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);
   }
 }

package/dist/css/rules/switch.css

@@ -3,47 +3,54 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-switch {
-    width: var(--control-switch-width);
-    height: var(--control-switch-height);
+  .surf-switch {
+    width: var(--surf-control-switch-width);
+    height: var(--surf-control-switch-height);
     padding: calc(
-      (var(--control-switch-height) - var(--control-switch-thumb)) / 2 - 1px
+      (var(--surf-control-switch-height) - var(--surf-control-switch-thumb)) /
+        2 - 1px
     );
-    border-radius: var(--radius-full);
+    border-radius: var(--surf-radius-pill);
     justify-content: flex-start;
   }
-  .pui-switch-thumb {
-    width: var(--control-switch-thumb);
-    height: var(--control-switch-thumb);
-    border-radius: var(--radius-full);
-    background: var(--ink-muted);
+  .surf-switch-thumb {
+    width: var(--surf-control-switch-thumb);
+    height: var(--surf-control-switch-thumb);
+    /* Concentric with the track: its corner less the gap around the thumb. */
+    border-radius: max(
+      0px,
+      var(--surf-radius-pill) -
+        (var(--surf-control-switch-height) - var(--surf-control-switch-thumb)) /
+        2
+    );
+    background: var(--surf-ink-muted);
     transform: translateX(0);
     transition:
-      transform var(--duration-fast) var(--ease-out),
-      background-color var(--duration-fast) var(--ease-out);
+      transform var(--surf-duration-fast) var(--surf-ease-out),
+      background-color var(--surf-duration-fast) var(--surf-ease-out);
   }
-  .pui-switch[data-checked] .pui-switch-thumb {
-    background: var(--on-brand);
+  .surf-switch[data-checked] .surf-switch-thumb {
+    background: var(--surf-on-brand);
     transform: translateX(
-      calc(var(--control-switch-width) - var(--control-switch-height))
+      calc(var(--surf-control-switch-width) - var(--surf-control-switch-height))
     );
   }
-  .pui-switch:dir(rtl)[data-checked] .pui-switch-thumb {
+  .surf-switch:dir(rtl)[data-checked] .surf-switch-thumb {
     transform: translateX(
-      calc(var(--control-switch-height) - var(--control-switch-width))
+      calc(var(--surf-control-switch-height) - var(--surf-control-switch-width))
     );
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-switch,
-    .pui-switch-thumb {
+    .surf-switch,
+    .surf-switch-thumb {
       transition: none;
     }
   }
   @media (forced-colors: active) {
-    .pui-switch[data-checked] .pui-switch-thumb {
+    .surf-switch[data-checked] .surf-switch-thumb {
       background: HighlightText;
     }
-    .pui-switch-thumb {
+    .surf-switch-thumb {
       background: ButtonText;
     }
   }

package/dist/css/rules/syntax-highlighter.css

@@ -4,78 +4,79 @@
 
 @layer surflane.components {
   /* Syntax tokens are semantic color roles; source text, type and geometry remain unchanged. */
-  .pui-syntax {
-    color: var(--syntax-plain);
+  .surf-syntax {
+    color: var(--surf-syntax-plain);
     font: inherit;
     letter-spacing: inherit;
   }
-  .pui-syntax [data-syntax] {
+  .surf-syntax [data-syntax] {
     font: inherit;
     letter-spacing: inherit;
   }
-  .pui-syntax [data-syntax='plain'] {
-    color: var(--syntax-plain);
+  .surf-syntax [data-syntax='plain'] {
+    color: var(--surf-syntax-plain);
   }
-  .pui-syntax [data-syntax='comment'] {
-    color: var(--syntax-comment);
+  .surf-syntax [data-syntax='comment'] {
+    color: var(--surf-syntax-comment);
   }
-  .pui-syntax [data-syntax='keyword'] {
-    color: var(--syntax-keyword);
+  .surf-syntax [data-syntax='keyword'] {
+    color: var(--surf-syntax-keyword);
   }
-  .pui-syntax [data-syntax='string'] {
-    color: var(--syntax-string);
+  .surf-syntax [data-syntax='string'] {
+    color: var(--surf-syntax-string);
   }
-  .pui-syntax [data-syntax='number'] {
-    color: var(--syntax-number);
+  .surf-syntax [data-syntax='number'] {
+    color: var(--surf-syntax-number);
   }
-  .pui-syntax [data-syntax='function'] {
-    color: var(--syntax-function);
+  .surf-syntax [data-syntax='function'] {
+    color: var(--surf-syntax-function);
   }
-  .pui-syntax [data-syntax='tag'] {
-    color: var(--syntax-tag);
+  .surf-syntax [data-syntax='tag'] {
+    color: var(--surf-syntax-tag);
   }
-  .pui-syntax [data-syntax='attribute'] {
-    color: var(--syntax-attribute);
+  .surf-syntax [data-syntax='attribute'] {
+    color: var(--surf-syntax-attribute);
   }
-  .pui-syntax [data-syntax='punctuation'] {
-    color: var(--syntax-punctuation);
+  .surf-syntax [data-syntax='punctuation'] {
+    color: var(--surf-syntax-punctuation);
   }
-  .pui-syntax-pre {
+  .surf-syntax-pre {
     box-sizing: border-box;
     min-inline-size: 0;
     margin: 0;
-    padding: var(--ui-surface-padding, var(--space-4));
-    background: var(--code-bg);
-    border-radius: var(--radius-md);
-    font: var(--weight-regular) var(--type-code-size)/var(--type-code-leading)
-      var(--font-code);
+    padding: var(--surf-ui-surface-padding, var(--surf-space-4));
+    background: var(--surf-code-bg);
+    border-radius: var(--surf-radius-md);
+    font: var(--surf-weight-regular)
+      var(--surf-type-code-size)/var(--surf-type-code-leading)
+      var(--surf-font-code);
     /* Code shows the characters as typed, like the other code text: no === or => ligatures. */
     font-variant-ligatures: none;
-    letter-spacing: var(--tracking-mono);
+    letter-spacing: var(--surf-tracking-mono);
     tab-size: 2;
     white-space: pre;
   }
   /* The visible box keeps its background and corners while long lines scroll inside it. */
-  .pui-syntax-scroll {
-    border-radius: var(--radius-md);
-    background: var(--code-bg);
+  .surf-syntax-scroll {
+    border-radius: var(--surf-radius-md);
+    background: var(--surf-code-bg);
     overflow: hidden;
   }
-  .pui-syntax-scroll .pui-syntax-pre {
+  .surf-syntax-scroll .surf-syntax-pre {
     min-inline-size: max-content;
     border-radius: 0;
     background: none;
   }
-  .pui-syntax-scroll .pui-syntax-pre[data-wrap] {
+  .surf-syntax-scroll .surf-syntax-pre[data-wrap] {
     min-inline-size: 0;
   }
-  .pui-syntax-pre[data-wrap] {
+  .surf-syntax-pre[data-wrap] {
     white-space: pre-wrap;
     overflow-wrap: anywhere;
   }
   @media (forced-colors: active) {
-    .pui-syntax,
-    .pui-syntax [data-syntax] {
+    .surf-syntax,
+    .surf-syntax [data-syntax] {
       color: CanvasText;
     }
   }

package/dist/css/rules/table.css

@@ -5,24 +5,24 @@
 @layer surflane.components {
   /* With no text inside, an inline control rests on the baseline, above the middle of a
    * table row. In a cell it becomes a block, so the cell centers it exactly, and it
-   * still follows the cell's alignment. Put a labelled control in a pui-choice-label. */
-  .pui-table-cell > :is(.pui-checkbox, .pui-radio, .pui-switch) {
+   * still follows the cell's alignment. Put a labelled control in a surf-choice-label. */
+  .surf-table-cell > :is(.surf-checkbox, .surf-radio, .surf-switch) {
     display: flex;
   }
-  .pui-table-cell[data-align='center']
-    > :is(.pui-checkbox, .pui-radio, .pui-switch) {
+  .surf-table-cell[data-align='center']
+    > :is(.surf-checkbox, .surf-radio, .surf-switch) {
     margin-inline: auto;
   }
-  .pui-table-cell[data-align='end']
-    > :is(.pui-checkbox, .pui-radio, .pui-switch) {
+  .surf-table-cell[data-align='end']
+    > :is(.surf-checkbox, .surf-radio, .surf-switch) {
     margin-inline-start: auto;
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-table-cell {
-    padding: var(--ui-table-padding-y) var(--ui-table-padding-x);
+  :where([data-ui-size], [data-ui-size] *).surf-table-cell {
+    padding: var(--surf-ui-table-padding-y) var(--surf-ui-table-padding-x);
   }
-  :where([data-ui-size], [data-ui-size] *).pui-table-caption {
-    padding-inline: var(--ui-table-padding-x);
+  :where([data-ui-size], [data-ui-size] *).surf-table-caption {
+    padding-inline: var(--surf-ui-table-padding-x);
   }
 }