@surflane/ui 0.8.0 → 0.10.0

package/dist/css/rules/chart.css

@@ -3,252 +3,262 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-chart {
+  .surf-chart {
     min-width: 0;
     max-width: 100%;
     margin: 0;
     display: flex;
     flex-direction: column;
-    gap: var(--space-3);
+    gap: var(--surf-space-3);
   }
-  .pui-chart-caption strong {
-    font: var(--weight-medium)
-      var(--type-subsection-size)/var(--type-subsection-leading)
-      var(--font-body);
+  .surf-chart-caption strong {
+    font: var(--surf-weight-medium)
+      var(--surf-type-subsection-size)/var(--surf-type-subsection-leading)
+      var(--surf-font-body);
   }
-  .pui-chart-caption p,
-  .pui-chart-help {
-    margin: var(--space-2) 0 0;
-    color: var(--ink-muted);
-    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
-      var(--font-body);
+  .surf-chart-caption p,
+  .surf-chart-help {
+    margin: var(--surf-space-2) 0 0;
+    color: var(--surf-ink-muted);
+    font: var(--surf-weight-regular)
+      var(--surf-type-body-size)/var(--surf-type-body-leading)
+      var(--surf-font-body);
   }
   /* The key, the plot and the x-axis name read as one block: the key sits right on
      the plot, the value axis name to its left and the legend to its right. */
-  .pui-chart-frame {
+  .surf-chart-frame {
     display: flex;
     flex-direction: column;
     min-width: 0;
   }
-  .pui-chart-key {
+  .surf-chart-key {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: 0 var(--space-4);
+    gap: 0 var(--surf-space-4);
   }
-  .pui-chart-legend {
+  .surf-chart-legend {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--space-1) var(--space-2);
+    gap: var(--surf-space-1) var(--surf-space-2);
     padding: 0;
     margin: 0 0 0 auto;
     list-style: none;
   }
-  .pui-chart-mark {
-    inline-size: var(--space-8);
-    block-size: var(--space-5);
+  .surf-chart-mark {
+    inline-size: var(--surf-space-8);
+    block-size: var(--surf-space-5);
   }
-  .pui-chart-legend-button {
+  .surf-chart-legend-button {
     max-width: 100%;
     display: inline-flex;
     align-items: center;
-    gap: var(--space-2);
+    gap: var(--surf-space-2);
     min-height: 36px;
-    padding: var(--space-1) var(--space-2);
+    padding: var(--surf-space-1) var(--surf-space-2);
     border: 0;
-    border-radius: var(--radius-md);
+    border-radius: var(--surf-radius-md);
     background: transparent;
-    color: var(--ink-body);
-    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
-      var(--font-body);
+    color: var(--surf-ink-body);
+    font: var(--surf-weight-regular)
+      var(--surf-type-body-size)/var(--surf-type-body-leading)
+      var(--surf-font-body);
     cursor: pointer;
     text-align: start;
   }
-  .pui-chart-legend-button svg {
+  .surf-chart-legend-button svg {
     flex: none;
   }
-  .pui-chart-legend-button span {
+  .surf-chart-legend-button span {
     overflow-wrap: anywhere;
   }
-  .pui-chart-legend-button:hover {
-    background: var(--interaction-hover-bg);
+  .surf-chart-legend-button:hover {
+    background: var(--surf-interaction-hover-bg);
   }
-  .pui-chart-legend-button:active {
-    background: var(--interaction-active-bg);
+  .surf-chart-legend-button:active {
+    background: var(--surf-interaction-active-bg);
   }
-  .pui-chart-legend-button[aria-pressed='false'] span {
+  .surf-chart-legend-button[aria-pressed='false'] span {
     text-decoration: line-through;
-    color: var(--ink-muted);
+    color: var(--surf-ink-muted);
   }
-  .pui-chart-legend-button:focus-visible,
-  .pui-chart-plot .recharts-surface:focus-visible,
-  .pui-chart-table summary:focus-visible {
-    outline: var(--focus-ring-width) solid var(--interaction-focus);
-    outline-offset: var(--focus-ring-offset);
-    border-radius: var(--radius-sm);
+  .surf-chart-legend-button:focus-visible,
+  .surf-chart-plot .recharts-surface:focus-visible,
+  .surf-chart-table summary: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-sm);
   }
   /* The browser's SVG styles ring any :focus, so a tap or click would draw its own
      ring: around the surface, or around the layer a tapped line or point sits in,
      since Recharts gives each layer tabindex -1. Only the surface is a keyboard
      target, and it rings for keyboard focus only, like every other control. */
-  .pui-chart-plot .recharts-surface:focus:not(:focus-visible),
-  .pui-chart-plot .recharts-surface :focus {
+  .surf-chart-plot .recharts-surface:focus:not(:focus-visible),
+  .surf-chart-plot .recharts-surface :focus {
     outline: none;
   }
-  .pui-chart-axis-label {
+  .surf-chart-axis-label {
     margin: 0;
-    color: var(--ink-muted);
-    font: var(--weight-regular)
-      var(--type-caption-size)/var(--type-caption-leading) var(--font-body);
+    color: var(--surf-ink-muted);
+    font: var(--surf-weight-regular)
+      var(--surf-type-caption-size)/var(--surf-type-caption-leading)
+      var(--surf-font-body);
     overflow-wrap: anywhere;
   }
-  .pui-chart-x-label {
+  .surf-chart-x-label {
     text-align: center;
   }
-  .pui-chart-plot {
+  .surf-chart-plot {
     position: relative;
     min-width: 0;
     width: 100%;
-    font-family: var(--font-body);
+    font-family: var(--surf-font-body);
+  }
+  /* Recharts fits the last axis label inside the surface by a width it measures in
+     HTML. SVG text can round a pixel wider, so the surface lets that pixel show. */
+  .surf-chart-plot .recharts-surface {
+    overflow: visible;
   }
   /* The active point's values float beside it; the readout below says the same for
      assistive technology. On the right half the box turns to the left. */
-  .pui-chart-float {
+  .surf-chart-float {
     position: absolute;
     inset: 0;
     pointer-events: none;
   }
-  .pui-chart-tooltip {
+  .surf-chart-tooltip {
     position: absolute;
     z-index: 1;
     box-sizing: border-box;
     inline-size: max-content;
     max-inline-size: 100%;
-    translate: 0 var(--space-2);
-    padding: var(--space-2) var(--space-3);
-    border: 1px solid var(--menu-border);
-    border-radius: var(--radius-md);
-    background: var(--menu-background);
-    box-shadow: var(--shadow-float);
-    color: var(--ink-body);
-    font: var(--weight-regular)
-      var(--type-compact-size)/var(--type-compact-leading) var(--font-body);
+    translate: 0 var(--surf-space-2);
+    padding: var(--surf-space-2) var(--surf-space-3);
+    border: 1px solid var(--surf-menu-border);
+    border-radius: var(--surf-radius-md);
+    background: var(--surf-menu-background);
+    box-shadow: var(--surf-shadow-float);
+    color: var(--surf-ink-body);
+    font: var(--surf-weight-regular)
+      var(--surf-type-compact-size)/var(--surf-type-compact-leading)
+      var(--surf-font-body);
     overflow-wrap: break-word;
   }
-  .pui-chart-tooltip strong {
+  .surf-chart-tooltip strong {
     display: block;
-    color: var(--ink);
-    font-weight: var(--weight-medium);
+    color: var(--surf-ink);
+    font-weight: var(--surf-weight-medium);
   }
-  .pui-chart-tooltip ul {
+  .surf-chart-tooltip ul {
     display: grid;
-    gap: var(--space-1);
-    margin: var(--space-1) 0 0;
+    gap: var(--surf-space-1);
+    margin: var(--surf-space-1) 0 0;
     padding: 0;
     list-style: none;
   }
-  .pui-chart-tooltip li {
+  .surf-chart-tooltip li {
     display: flex;
     align-items: center;
-    gap: var(--space-2);
+    gap: var(--surf-space-2);
   }
-  .pui-chart-tooltip .pui-chart-mark {
+  .surf-chart-tooltip .surf-chart-mark {
     flex: none;
-    inline-size: var(--space-6);
-    block-size: var(--space-4);
+    inline-size: var(--surf-space-6);
+    block-size: var(--surf-space-4);
   }
-  .pui-chart-tooltip-value {
+  .surf-chart-tooltip-value {
     white-space: nowrap;
     margin-inline-start: auto;
-    padding-inline-start: var(--space-3);
-    color: var(--ink);
+    padding-inline-start: var(--surf-space-3);
+    color: var(--surf-ink);
     font-variant-numeric: tabular-nums;
   }
-  .pui-chart-inspector {
+  .surf-chart-inspector {
     box-sizing: border-box;
     min-height: 100px;
-    padding: var(--space-3) var(--space-4);
-    background: var(--surface);
-    color: var(--ink-body);
-    border-radius: var(--radius-md);
-    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
-      var(--font-body);
+    padding: var(--surf-space-3) var(--surf-space-4);
+    background: var(--surf-surface);
+    color: var(--surf-ink-body);
+    border-radius: var(--surf-radius-md);
+    font: var(--surf-weight-regular)
+      var(--surf-type-body-size)/var(--surf-type-body-leading)
+      var(--surf-font-body);
     overflow-wrap: anywhere;
   }
-  .pui-chart-inspector[hidden] {
+  .surf-chart-inspector[hidden] {
     display: none;
   }
-  .pui-chart-readout strong {
-    font-weight: var(--weight-medium);
+  .surf-chart-readout strong {
+    font-weight: var(--surf-weight-medium);
   }
-  .pui-chart-readout ul {
+  .surf-chart-readout ul {
     display: flex;
     flex-wrap: wrap;
-    gap: var(--space-2) var(--space-4);
+    gap: var(--surf-space-2) var(--surf-space-4);
     list-style: none;
     padding: 0;
-    margin: var(--space-2) 0 0;
+    margin: var(--surf-space-2) 0 0;
   }
-  .pui-chart-empty {
+  .surf-chart-empty {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: var(--space-3);
+    gap: var(--surf-space-3);
     min-height: 160px;
-    padding: var(--space-4);
-    background: var(--surface);
-    color: var(--ink-muted);
-    border-radius: var(--radius-md);
+    padding: var(--surf-space-4);
+    background: var(--surf-surface);
+    color: var(--surf-ink-muted);
+    border-radius: var(--surf-radius-md);
   }
-  .pui-chart-empty p {
+  .surf-chart-empty p {
     margin: 0;
   }
-  .pui-chart-table {
+  .surf-chart-table {
     min-width: 0;
   }
-  .pui-chart-table summary {
+  .surf-chart-table summary {
     width: fit-content;
     cursor: pointer;
-    color: var(--ink);
-    padding-block: var(--space-2);
+    color: var(--surf-ink);
+    padding-block: var(--surf-space-2);
     text-decoration: underline;
     text-underline-offset: 3px;
   }
-  .pui-chart-table .pui-scroll-root {
-    margin-top: var(--space-2);
+  .surf-chart-table .surf-scroll-root {
+    margin-top: var(--surf-space-2);
   }
   /* The data table scrolls inside a bounded region, so long series stay compact. */
-  .pui-chart-table .pui-scroll-viewport {
+  .surf-chart-table .surf-scroll-viewport {
     max-block-size: 320px;
   }
   @media (max-width: 760px), (pointer: coarse) {
-    .pui-chart-legend-button {
-      min-height: var(--control-target-size);
+    .surf-chart-legend-button {
+      min-height: var(--surf-control-target-size);
     }
   }
   @media (forced-colors: active) {
-    .pui-chart {
-      --canvas: Canvas;
-      --ink-muted: CanvasText;
-      --line: GrayText;
-      --control-border: CanvasText;
-      --chart-series-1: CanvasText;
-      --chart-series-2: CanvasText;
-      --chart-series-3: CanvasText;
-      --chart-category-1: CanvasText;
-      --chart-category-2: CanvasText;
-      --chart-category-3: CanvasText;
-      --chart-category-4: CanvasText;
-      --chart-category-5: CanvasText;
-      --chart-category-6: CanvasText;
+    .surf-chart {
+      --surf-canvas: Canvas;
+      --surf-ink-muted: CanvasText;
+      --surf-line: GrayText;
+      --surf-control-border: CanvasText;
+      --surf-chart-series-1: CanvasText;
+      --surf-chart-series-2: CanvasText;
+      --surf-chart-series-3: CanvasText;
+      --surf-chart-category-1: CanvasText;
+      --surf-chart-category-2: CanvasText;
+      --surf-chart-category-3: CanvasText;
+      --surf-chart-category-4: CanvasText;
+      --surf-chart-category-5: CanvasText;
+      --surf-chart-category-6: CanvasText;
     }
-    .pui-chart-plot .recharts-surface,
-    .pui-chart-mark {
+    .surf-chart-plot .recharts-surface,
+    .surf-chart-mark {
       forced-color-adjust: none;
     }
-    .pui-chart-inspector,
-    .pui-chart-tooltip,
-    .pui-chart-empty {
+    .surf-chart-inspector,
+    .surf-chart-tooltip,
+    .surf-chart-empty {
       background: Canvas;
       color: CanvasText;
       border: 1px solid CanvasText;
@@ -257,7 +267,7 @@
 }
 @layer surflane.sizes {
   @media (forced-colors: active) {
-    .pui-chart-plot .recharts-cartesian-axis-tick text {
+    .surf-chart-plot .recharts-cartesian-axis-tick text {
       fill: CanvasText;
     }
   }

package/dist/css/rules/checkbox.css

@@ -3,22 +3,22 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-checkbox-indicator {
+  .surf-checkbox-indicator {
     display: flex;
     align-items: center;
     justify-content: center;
   }
-  .pui-checkbox-mixed {
+  .surf-checkbox-mixed {
     display: none;
   }
-  .pui-checkbox[data-indeterminate] .pui-checkbox-check {
+  .surf-checkbox[data-indeterminate] .surf-checkbox-check {
     display: none;
   }
-  .pui-checkbox[data-indeterminate] .pui-checkbox-mixed {
+  .surf-checkbox[data-indeterminate] .surf-checkbox-mixed {
     display: block;
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-checkbox {
+    .surf-checkbox {
       transition: none;
     }
   }

package/dist/css/rules/choice-label.css

@@ -3,50 +3,51 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-choice-label {
+  .surf-choice-label {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: var(--space-3);
-    min-height: var(--control-height);
+    gap: var(--surf-space-3);
+    min-height: var(--surf-control-height);
     width: fit-content;
     max-width: 100%;
     cursor: pointer;
-    color: var(--ink-body);
-    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
-      var(--font-body);
+    color: var(--surf-ink-body);
+    font: var(--surf-weight-regular)
+      var(--surf-type-body-size)/var(--surf-type-body-leading)
+      var(--surf-font-body);
   }
-  .pui-choice-label:has([data-disabled]) {
+  .surf-choice-label:has([data-disabled]) {
     cursor: not-allowed;
   }
-  .pui-choice-label > span:last-child {
+  .surf-choice-label > span:last-child {
     min-width: 0;
     overflow-wrap: anywhere;
   }
   /* ChoiceLabel: the control holds one line, so it centers on the first line of the text
      whether or not a description follows. */
-  .pui-choice-label:has(> .pui-choice-text > .pui-choice-description) {
+  .surf-choice-label:has(> .surf-choice-text > .surf-choice-description) {
     align-items: flex-start;
   }
-  .pui-choice-control {
+  .surf-choice-control {
     display: inline-flex;
     flex: none;
     align-items: center;
     min-block-size: 1lh;
   }
-  .pui-choice-text {
+  .surf-choice-text {
     display: grid;
-    gap: var(--space-1);
+    gap: var(--surf-space-1);
     min-width: 0;
     overflow-wrap: anywhere;
   }
-  .pui-choice-description {
-    color: var(--ink-muted);
-    font-size: var(--type-caption-size);
-    line-height: var(--type-caption-leading);
-    letter-spacing: var(--type-caption-tracking);
+  .surf-choice-description {
+    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);
   }
-  .pui-choice-label:has([data-readonly]) {
+  .surf-choice-label:has([data-readonly]) {
     cursor: default;
   }
 }

package/dist/css/rules/choice.css

@@ -3,110 +3,115 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-choice-group {
+  .surf-choice-group {
     display: flex;
     flex-direction: column;
-    gap: var(--space-2);
+    gap: var(--surf-space-2);
     min-width: 0;
   }
-  .pui-checkbox,
-  .pui-radio,
-  .pui-switch {
+  .surf-checkbox,
+  .surf-radio,
+  .surf-switch {
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     flex: none;
-    width: var(--control-choice-size);
-    height: var(--control-choice-size);
-    border: 1px solid var(--control-choice-border);
-    border-radius: var(--control-choice-radius);
-    background: var(--control-background);
-    color: var(--ink);
+    width: var(--surf-control-choice-size);
+    height: var(--surf-control-choice-size);
+    border: 1px solid var(--surf-control-choice-border);
+    /* A rounder theme rounds the box, but never past 3/8 of its side, so a
+       checkbox never reads as a radio. */
+    border-radius: min(
+      var(--surf-control-choice-radius),
+      var(--surf-control-choice-size) * 0.375
+    );
+    background: var(--surf-control-background);
+    color: var(--surf-ink);
     outline: none;
     cursor: pointer;
     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-checkbox:hover:not([data-disabled], [data-readonly]),
-  .pui-radio:hover:not([data-disabled], [data-readonly]),
-  .pui-switch:hover:not([data-disabled], [data-readonly]) {
-    border-color: var(--control-choice-hover-border);
-    background: var(--control-hover-background);
+  .surf-checkbox:hover:not([data-disabled], [data-readonly]),
+  .surf-radio:hover:not([data-disabled], [data-readonly]),
+  .surf-switch:hover:not([data-disabled], [data-readonly]) {
+    border-color: var(--surf-control-choice-hover-border);
+    background: var(--surf-control-hover-background);
   }
-  .pui-checkbox:is([data-checked], [data-indeterminate]),
-  .pui-radio[data-checked],
-  .pui-switch[data-checked] {
-    background: var(--control-choice-selected-bg);
-    border-color: var(--control-choice-selected-border);
-    color: var(--control-choice-selected-fg);
+  .surf-checkbox:is([data-checked], [data-indeterminate]),
+  .surf-radio[data-checked],
+  .surf-switch[data-checked] {
+    background: var(--surf-control-choice-selected-bg);
+    border-color: var(--surf-control-choice-selected-border);
+    color: var(--surf-control-choice-selected-fg);
   }
   /* Label hover shares the same feedback as the small control itself. */
-  .pui-choice-label:hover
-    :is(.pui-checkbox, .pui-radio, .pui-switch):not(
+  .surf-choice-label:hover
+    :is(.surf-checkbox, .surf-radio, .surf-switch):not(
       [data-disabled],
       [data-readonly]
     ) {
-    background: var(--control-hover-background);
-    border-color: var(--control-choice-hover-border);
+    background: var(--surf-control-hover-background);
+    border-color: var(--surf-control-choice-hover-border);
   }
-  :is(.pui-checkbox, .pui-radio, .pui-switch):is(
+  :is(.surf-checkbox, .surf-radio, .surf-switch):is(
       [data-checked],
       [data-indeterminate]
     ):hover:not([data-disabled], [data-readonly]),
-  .pui-choice-label:hover
-    :is(.pui-checkbox, .pui-radio, .pui-switch):is(
+  .surf-choice-label:hover
+    :is(.surf-checkbox, .surf-radio, .surf-switch):is(
       [data-checked],
       [data-indeterminate]
     ):not([data-disabled], [data-readonly]) {
-    background: var(--control-choice-selected-hover-bg);
-    border-color: var(--control-choice-selected-border);
+    background: var(--surf-control-choice-selected-hover-bg);
+    border-color: var(--surf-control-choice-selected-border);
   }
-  .pui-checkbox:focus-visible,
-  .pui-radio:focus-visible,
-  .pui-switch:focus-visible {
-    outline: var(--focus-ring-width) solid var(--interaction-focus);
-    outline-offset: var(--focus-ring-offset);
+  .surf-checkbox:focus-visible,
+  .surf-radio:focus-visible,
+  .surf-switch:focus-visible {
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
+    outline-offset: var(--surf-focus-ring-offset);
   }
-  .pui-checkbox[data-disabled],
-  .pui-radio[data-disabled],
-  .pui-switch[data-disabled] {
-    opacity: var(--control-disabled-opacity);
+  .surf-checkbox[data-disabled],
+  .surf-radio[data-disabled],
+  .surf-switch[data-disabled] {
+    opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
   }
-  .pui-checkbox[data-readonly],
-  .pui-radio[data-readonly],
-  .pui-switch[data-readonly] {
+  .surf-checkbox[data-readonly],
+  .surf-radio[data-readonly],
+  .surf-switch[data-readonly] {
     cursor: default;
   }
   /* An invalid control keeps its edge through every hover, checked or not; hover
      still tints the fill. Each selector matches the hover rule it must outrank. */
-  :is(.pui-checkbox, .pui-radio, .pui-switch)[data-invalid],
-  :is(.pui-checkbox, .pui-radio, .pui-switch)[data-invalid]:hover,
-  :is(.pui-checkbox, .pui-radio, .pui-switch)[data-invalid]:is(
+  :is(.surf-checkbox, .surf-radio, .surf-switch)[data-invalid],
+  :is(.surf-checkbox, .surf-radio, .surf-switch)[data-invalid]:hover,
+  :is(.surf-checkbox, .surf-radio, .surf-switch)[data-invalid]:is(
       [data-checked],
       [data-indeterminate]
     ):hover,
-  .pui-choice-label:hover
-    :is(.pui-checkbox, .pui-radio, .pui-switch)[data-invalid],
-  .pui-choice-label:hover
-    :is(.pui-checkbox, .pui-radio, .pui-switch)[data-invalid]:is(
+  .surf-choice-label:hover
+    :is(.surf-checkbox, .surf-radio, .surf-switch)[data-invalid],
+  .surf-choice-label:hover
+    :is(.surf-checkbox, .surf-radio, .surf-switch)[data-invalid]:is(
       [data-checked],
       [data-indeterminate]
     ) {
-    border-color: var(--status-danger-fg);
+    border-color: var(--surf-status-danger-fg);
   }
   @media (forced-colors: active) {
-    .pui-checkbox,
-    .pui-radio,
-    .pui-switch {
+    .surf-checkbox,
+    .surf-radio,
+    .surf-switch {
       border-color: ButtonText;
     }
-    .pui-checkbox:is([data-checked], [data-indeterminate]),
-    .pui-radio[data-checked],
-    .pui-switch[data-checked] {
+    .surf-checkbox:is([data-checked], [data-indeterminate]),
+    .surf-radio[data-checked],
+    .surf-switch[data-checked] {
       background: Highlight;
       border-color: Highlight;
       color: HighlightText;