@surflane/ui 0.9.0 → 0.10.0

package/dist/css/rules/link.css

@@ -3,7 +3,7 @@
   surflane.sizes;
 
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *):is(.pui-link) {
-    font-size: var(--ui-font);
+  :where([data-ui-size], [data-ui-size] *):is(.surf-link) {
+    font-size: var(--surf-ui-font);
   }
 }

package/dist/css/rules/list.css

@@ -3,8 +3,8 @@
   surflane.sizes;
 
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-list-item {
-    padding: var(--ui-table-padding-y) var(--ui-surface-padding);
-    gap: var(--ui-surface-padding);
+  :where([data-ui-size], [data-ui-size] *).surf-list-item {
+    padding: var(--surf-ui-table-padding-y) var(--surf-ui-surface-padding);
+    gap: var(--surf-ui-surface-padding);
   }
 }

package/dist/css/rules/markdown.css

@@ -3,61 +3,61 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-markdown {
+  .surf-markdown {
     min-inline-size: 0;
     overflow-wrap: anywhere;
   }
-  .pui-markdown > :first-child {
+  .surf-markdown > :first-child {
     margin-block-start: 0;
   }
-  .pui-markdown > :last-child {
+  .surf-markdown > :last-child {
     margin-block-end: 0;
   }
-  .pui-markdown .pui-code-block {
+  .surf-markdown .surf-code-block {
     max-inline-size: 100%;
-    margin-block: var(--space-4);
+    margin-block: var(--surf-space-4);
   }
-  .pui-markdown img {
+  .surf-markdown img {
     display: block;
     max-inline-size: 100%;
     block-size: auto;
-    border-radius: var(--radius-md);
+    border-radius: var(--surf-radius-md);
   }
-  .pui-markdown blockquote {
+  .surf-markdown blockquote {
     margin-inline: 0;
-    padding-inline-start: var(--space-4);
-    border-inline-start: 2px solid var(--line);
-    color: var(--ink-body);
+    padding-inline-start: var(--surf-space-4);
+    border-inline-start: 2px solid var(--surf-line);
+    color: var(--surf-ink-body);
   }
-  .pui-markdown a {
-    color: var(--ink);
+  .surf-markdown a {
+    color: var(--surf-ink);
     text-decoration: underline;
     text-underline-offset: 3px;
   }
-  .pui-markdown a:focus-visible {
-    outline: var(--focus-ring-width) solid var(--interaction-focus);
-    outline-offset: var(--focus-ring-offset);
+  .surf-markdown a:focus-visible {
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
+    outline-offset: var(--surf-focus-ring-offset);
   }
-  .pui-markdown .contains-task-list {
+  .surf-markdown .contains-task-list {
     list-style: none;
     padding-inline-start: 0;
   }
-  .pui-markdown .task-list-item {
+  .surf-markdown .task-list-item {
     display: list-item;
   }
-  .pui-markdown .task-list-item input {
-    margin-inline-end: var(--space-2);
-    accent-color: var(--ink);
+  .surf-markdown .task-list-item input {
+    margin-inline-end: var(--surf-space-2);
+    accent-color: var(--surf-ink);
   }
-  /* Markdown always renders inside pui-prose, whose code rule sets the family, size,
+  /* Markdown always renders inside surf-prose, whose code rule sets the family, size,
    * radius and ligatures. */
-  .pui-markdown-inline-code {
+  .surf-markdown-inline-code {
     padding: 2px 4px;
-    background: var(--code-bg);
-    font-weight: var(--weight-regular);
-    letter-spacing: var(--tracking-mono);
+    background: var(--surf-code-bg);
+    font-weight: var(--surf-weight-regular);
+    letter-spacing: var(--surf-tracking-mono);
   }
-  .pui-markdown .pui-table {
+  .surf-markdown .surf-table {
     min-inline-size: 480px;
   }
 }

package/dist/css/rules/menu.css

@@ -3,95 +3,98 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-menu {
-    padding: var(--space-1);
+  .surf-menu {
+    padding: var(--surf-space-1);
     min-width: 176px;
   }
-  .pui-menu-trigger[data-popup-open] {
-    background: var(--selected);
-    border-color: var(--control-border);
+  .surf-menu-trigger[data-popup-open] {
+    background: var(--surf-selected);
+    border-color: var(--surf-control-border);
   }
-  .pui-menu-item {
+  .surf-menu-item {
     position: relative;
     box-sizing: border-box;
     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);
-    border-radius: var(--control-radius);
-    color: var(--ink);
+    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);
+    border-radius: var(--surf-control-radius);
+    color: var(--surf-ink);
     outline: none;
     cursor: default;
     text-decoration: none;
     overflow-wrap: anywhere;
   }
-  .pui-menu-item[data-highlighted] {
-    background: var(--menu-hover-background);
+  .surf-menu-item[data-highlighted] {
+    background: var(--surf-menu-hover-background);
   }
-  .pui-menu-item[data-disabled] {
-    opacity: var(--control-disabled-opacity);
+  .surf-menu-item[data-disabled] {
+    opacity: var(--surf-control-disabled-opacity);
   }
-  .pui-menu-check-item {
+  .surf-menu-check-item {
     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)
     );
   }
-  .pui-menu-indicator {
+  .surf-menu-indicator {
     position: absolute;
-    inset-inline-start: var(--space-3);
+    inset-inline-start: var(--surf-space-3);
     display: inline-flex;
-    width: var(--icon-size-sm);
+    width: var(--surf-size-icon-default);
   }
-  .pui-menu-check-item[aria-checked='false'] > .pui-menu-indicator {
+  .surf-menu-check-item[aria-checked='false'] > .surf-menu-indicator {
     visibility: hidden;
   }
-  .pui-menu-separator {
+  .surf-menu-separator {
     height: 1px;
-    background: var(--line);
-    margin-block: var(--space-1);
+    background: var(--surf-line);
+    margin-block: var(--surf-space-1);
   }
-  .pui-menu-submenu-trigger {
+  .surf-menu-submenu-trigger {
     justify-content: space-between;
   }
-  .pui-submenu-arrow {
+  .surf-submenu-arrow {
     flex: none;
-    margin-inline-start: var(--space-3);
+    margin-inline-start: var(--surf-space-3);
   }
   @media (max-width: 760px), (pointer: coarse) {
-    .pui-menu-item {
-      min-height: var(--control-target-size);
+    .surf-menu-item {
+      min-height: var(--surf-control-target-size);
     }
   }
   @media (forced-colors: active) {
-    .pui-menu-item[data-highlighted] {
+    .surf-menu-item[data-highlighted] {
       outline: 1px solid CanvasText;
       outline-offset: -1px;
     }
   }
-  .pui-menu {
+  .surf-menu {
     max-height: min(360px, var(--available-height));
     overflow: auto;
     scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb) transparent;
+    scrollbar-color: var(--surf-scrollbar-thumb) transparent;
   }
-  .pui-menu-trigger[data-disabled] {
-    opacity: var(--control-disabled-opacity);
+  .surf-menu-trigger[data-disabled] {
+    opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *):is(.pui-menu-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-menu-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-menu-item) {
+  :where([data-ui-size], [data-ui-size] *):is(.surf-menu-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/menubar.css

@@ -3,16 +3,16 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-menubar {
-    padding: var(--space-1);
-    border-radius: var(--radius-md);
-    background: var(--surface);
+  .surf-menubar {
+    padding: var(--surf-space-1);
+    border-radius: var(--surf-radius-md);
+    background: var(--surf-surface);
     width: fit-content;
     max-width: 100%;
   }
   /* Concentric corners: outer radius minus the bar's inset. */
-  .pui-menubar > .pui-menu-trigger {
+  .surf-menubar > .surf-menu-trigger {
     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)));
   }
 }

package/dist/css/rules/navigation-menu.css

@@ -3,157 +3,160 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-navigation-menu {
+  .surf-navigation-menu {
     width: fit-content;
     max-width: 100%;
   }
-  .pui-navigation-list {
+  .surf-navigation-list {
     display: flex;
     align-items: center;
-    gap: var(--space-1);
+    gap: var(--surf-space-1);
     margin: 0;
     padding: 0;
     list-style: none;
   }
-  .pui-navigation-menu[data-orientation='vertical'] > .pui-navigation-list {
+  .surf-navigation-menu[data-orientation='vertical'] > .surf-navigation-list {
     flex-direction: column;
     align-items: stretch;
   }
-  .pui-navigation-trigger {
-    padding-inline: var(--space-3);
-    font-weight: var(--weight-medium);
+  .surf-navigation-trigger {
+    padding-inline: var(--surf-space-3);
+    font-weight: var(--surf-weight-medium);
     background: transparent;
-    color: var(--ink-body);
+    color: var(--surf-ink-body);
   }
-  .pui-navigation-trigger:hover,
-  .pui-navigation-trigger[data-popup-open] {
-    background: var(--menu-hover-background);
+  .surf-navigation-trigger:hover,
+  .surf-navigation-trigger[data-popup-open] {
+    background: var(--surf-menu-hover-background);
   }
-  .pui-navigation-trigger[data-popup-open] {
-    color: var(--ink);
+  .surf-navigation-trigger[data-popup-open] {
+    color: var(--surf-ink);
   }
-  .pui-navigation-icon {
+  .surf-navigation-icon {
     display: inline-flex;
     flex: none;
-    transition: rotate var(--motion-enter) var(--motion-ease);
+    transition: rotate var(--surf-motion-enter) var(--surf-motion-ease);
   }
-  .pui-navigation-icon[data-popup-open] {
+  .surf-navigation-icon[data-popup-open] {
     rotate: 180deg;
   }
-  .pui-navigation-link {
+  .surf-navigation-link {
     display: block;
     box-sizing: border-box;
-    min-height: var(--control-height);
-    padding: var(--space-2) var(--space-3);
+    min-height: var(--surf-control-height);
+    padding: var(--surf-space-2) var(--surf-space-3);
     border: 1px solid transparent;
-    border-radius: var(--radius-md);
-    color: var(--ink-body);
+    border-radius: var(--surf-radius-md);
+    color: var(--surf-ink-body);
     text-decoration: 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);
     overflow-wrap: anywhere;
   }
-  .pui-navigation-link:hover,
-  .pui-navigation-link[data-highlighted] {
-    background: var(--menu-hover-background);
+  .surf-navigation-link:hover,
+  .surf-navigation-link[data-highlighted] {
+    background: var(--surf-menu-hover-background);
   }
-  .pui-navigation-link[aria-current='page'] {
-    background: var(--selected);
-    color: var(--ink);
-    font-weight: var(--weight-medium);
+  .surf-navigation-link[aria-current='page'] {
+    background: var(--surf-selected);
+    color: var(--surf-ink);
+    font-weight: var(--surf-weight-medium);
   }
-  .pui-navigation-link:focus-visible {
-    outline: var(--focus-ring-width) solid var(--interaction-focus);
-    outline-offset: var(--focus-ring-offset);
+  .surf-navigation-link:focus-visible {
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
+    outline-offset: var(--surf-focus-ring-offset);
   }
-  .pui-navigation-popup {
+  .surf-navigation-popup {
     box-sizing: border-box;
     width: var(--popup-width);
     height: var(--popup-height);
     max-width: min(calc(100vw - 24px), var(--available-width));
     max-height: var(--available-height);
     overflow: hidden;
-    border: 1px solid var(--menu-border);
-    border-radius: var(--radius-lg);
-    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-lg);
+    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;
     opacity: 1;
     translate: 0 0;
     transition:
-      opacity var(--dialog-enter-duration) var(--motion-ease),
-      translate var(--dialog-enter-duration) var(--motion-spatial-ease);
+      opacity var(--surf-dialog-enter-duration) var(--surf-motion-ease),
+      translate var(--surf-dialog-enter-duration)
+        var(--surf-motion-spatial-ease);
   }
-  .pui-navigation-popup[data-starting-style] {
+  .surf-navigation-popup[data-starting-style] {
     opacity: 0;
     translate: 0 12px;
   }
-  .pui-navigation-popup[data-ending-style] {
+  .surf-navigation-popup[data-ending-style] {
     transition-duration: 0s;
   }
-  .pui-navigation-viewport {
+  .surf-navigation-viewport {
     position: relative;
     width: 100%;
     height: 100%;
     overflow: auto;
     scrollbar-width: thin;
-    scrollbar-color: var(--scrollbar-thumb) transparent;
+    scrollbar-color: var(--surf-scrollbar-thumb) transparent;
     overscroll-behavior: contain;
   }
-  .pui-navigation-content {
+  .surf-navigation-content {
     box-sizing: border-box;
     width: 380px;
     max-width: calc(100vw - 26px);
-    padding: var(--space-4);
+    padding: var(--surf-space-4);
     overflow-wrap: anywhere;
   }
   @media (max-width: 760px), (pointer: coarse) {
-    .pui-navigation-trigger,
-    .pui-navigation-link {
-      min-height: var(--control-target-size);
+    .surf-navigation-trigger,
+    .surf-navigation-link {
+      min-height: var(--surf-control-target-size);
     }
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-navigation-popup,
-    .pui-navigation-icon {
+    .surf-navigation-popup,
+    .surf-navigation-icon {
       transition: none;
     }
-    .pui-navigation-popup[data-starting-style] {
+    .surf-navigation-popup[data-starting-style] {
       translate: 0 0;
     }
   }
   @media (forced-colors: active) {
-    .pui-navigation-popup {
+    .surf-navigation-popup {
       background: Canvas;
       color: CanvasText;
       border-color: CanvasText;
     }
-    .pui-navigation-link[aria-current='page'] {
+    .surf-navigation-link[aria-current='page'] {
       border-color: Highlight;
     }
   }
   /* Keep the floating box measurable even when the popup anchors from its bottom edge. */
-  .pui-navigation-positioner {
+  .surf-navigation-positioner {
     width: var(--positioner-width);
     height: var(--positioner-height);
     max-width: calc(100vw - 24px);
   }
-  .pui-navigation-viewport {
+  .surf-navigation-viewport {
     max-height: calc(var(--available-height) - 2px);
   }
 }
 @layer surflane.sizes {
   :where([data-ui-size], [data-ui-size] *):is(
-    .pui-navigation-trigger,
-    .pui-navigation-link
+    .surf-navigation-trigger,
+    .surf-navigation-link
   ) {
-    min-block-size: var(--ui-row);
-    font-size: var(--ui-font);
-    line-height: var(--ui-leading);
+    min-block-size: var(--surf-ui-row);
+    font-size: var(--surf-ui-font);
+    line-height: var(--surf-ui-leading);
   }
 }

package/dist/css/rules/number-field.css

@@ -3,53 +3,54 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-number-group {
+  .surf-number-group {
     display: grid;
-    grid-template-columns: var(--control-height) minmax(0, 1fr) var(
-        --control-height
+    grid-template-columns: var(--surf-control-height) minmax(0, 1fr) var(
+        --surf-control-height
       );
   }
-  .pui-number-input {
+  .surf-number-input {
     box-sizing: border-box;
     width: 100%;
     min-width: 0;
-    height: var(--control-height);
-    padding: 0 var(--space-2);
+    height: var(--surf-control-height);
+    padding: 0 var(--surf-space-2);
     border: 0;
     outline: none;
     background: transparent;
-    color: var(--ink);
-    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
-      var(--font-body);
-    letter-spacing: var(--type-body-tracking);
+    color: var(--surf-ink);
+    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);
     text-align: center;
     font-variant-numeric: tabular-nums;
   }
-  .pui-number-scrub {
+  .surf-number-scrub {
     cursor: ew-resize;
     touch-action: none;
   }
   @media (prefers-reduced-motion: reduce) {
-    .pui-number-group {
+    .surf-number-group {
       transition: none;
     }
   }
-  .pui-number-step,
-  .pui-number-input {
-    height: calc(var(--control-height) - 2px);
+  .surf-number-step,
+  .surf-number-input {
+    height: calc(var(--surf-control-height) - 2px);
   }
-  .pui-number-scrub[data-readonly],
-  .pui-number-scrub[data-disabled] {
+  .surf-number-scrub[data-readonly],
+  .surf-number-scrub[data-disabled] {
     cursor: default;
   }
-  .pui-number-field {
+  .surf-number-field {
     width: 100%;
     max-width: 20rem;
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *):is(.pui-number-input) {
-    font-size: var(--ui-font);
-    line-height: var(--ui-leading);
+  :where([data-ui-size], [data-ui-size] *):is(.surf-number-input) {
+    font-size: var(--surf-ui-font);
+    line-height: var(--surf-ui-leading);
   }
 }

package/dist/css/rules/otp-field.css

@@ -3,66 +3,67 @@
   surflane.sizes;
 
 @layer surflane.components {
-  .pui-otp-field,
-  .pui-otp-group {
+  .surf-otp-field,
+  .surf-otp-group {
     display: flex;
     align-items: center;
-    gap: var(--space-2);
+    gap: var(--surf-space-2);
     min-width: 0;
     max-width: 100%;
     width: fit-content;
   }
-  .pui-otp-group {
+  .surf-otp-group {
     flex: 1 1 auto;
   }
-  .pui-otp-input {
-    flex: 0 1 var(--control-target-size);
-    width: var(--control-target-size);
-    height: var(--control-target-size);
+  .surf-otp-input {
+    flex: 0 1 var(--surf-control-target-size);
+    width: var(--surf-control-target-size);
+    height: var(--surf-control-target-size);
     min-width: 0;
     padding: 0;
     text-align: center;
-    font: var(--weight-regular)
-      var(--type-section-size)/var(--type-section-leading) var(--font-code);
-    letter-spacing: var(--tracking-mono);
+    font: var(--surf-weight-regular)
+      var(--surf-type-section-size)/var(--surf-type-section-leading)
+      var(--surf-font-code);
+    letter-spacing: var(--surf-tracking-mono);
     font-variant-numeric: tabular-nums;
-    caret-color: var(--control-focus);
+    caret-color: var(--surf-control-focus);
   }
-  .pui-otp-separator {
+  .surf-otp-separator {
     flex: none;
-    width: var(--space-2);
+    width: var(--surf-space-2);
     height: 0;
     border: 0;
-    border-top: 1px solid var(--line);
+    border-top: 1px solid var(--surf-line);
   }
   @media (max-width: 760px) {
-    .pui-otp-field,
-    .pui-otp-group {
-      gap: var(--space-1);
+    .surf-otp-field,
+    .surf-otp-group {
+      gap: var(--surf-space-1);
     }
   }
   @media (forced-colors: active) {
-    .pui-otp-input {
+    .surf-otp-input {
       background: Field;
       color: FieldText;
       border-color: ButtonText;
     }
-    .pui-otp-input:focus-visible {
+    .surf-otp-input:focus-visible {
       outline: 2px solid Highlight;
-      outline-offset: var(--focus-ring-offset);
+      outline-offset: var(--surf-focus-ring-offset);
     }
-    .pui-otp-input[aria-invalid='true'] {
+    .surf-otp-input[aria-invalid='true'] {
       border-color: LinkText;
     }
-    .pui-otp-separator {
+    .surf-otp-separator {
       border-color: CanvasText;
     }
   }
 }
 @layer surflane.sizes {
-  :where([data-ui-size], [data-ui-size] *).pui-otp-input {
-    flex-basis: var(--ui-otp);
-    width: var(--ui-otp);
-    height: var(--ui-otp);
+  :where([data-ui-size], [data-ui-size] *).surf-otp-input {
+    flex-basis: var(--surf-ui-otp);
+    width: var(--surf-ui-otp);
+    height: var(--surf-ui-otp);
   }
 }