@surflane/ui 0.4.0 → 0.6.0

package/dist/css/rules/preview-card.css

@@ -0,0 +1,60 @@
+/* Preview Card, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-preview-card {
+    box-sizing: border-box;
+    width: 320px;
+    max-width: min(calc(100vw - 24px), var(--available-width));
+    max-height: var(--available-height);
+    overflow: auto;
+    overscroll-behavior: contain;
+    scrollbar-width: thin;
+    padding: var(--space-5);
+    border: 1px solid var(--menu-border);
+    border-radius: var(--radius-md);
+    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);
+    overflow-wrap: anywhere;
+    outline: none;
+    transform: translateY(0);
+    opacity: 1;
+    transition:
+      opacity var(--dialog-enter-duration) var(--ease-out),
+      transform var(--dialog-enter-duration) var(--ease-out);
+  }
+  .pui-preview-card > :first-child {
+    margin-top: 0;
+  }
+  .pui-preview-card > :last-child {
+    margin-bottom: 0;
+  }
+  .pui-preview-card[data-starting-style] {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  .pui-preview-card[data-ending-style] {
+    transition-duration: 0s;
+  }
+  .pui-preview-card[data-instant] {
+    transition-duration: 0s;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pui-preview-card {
+      transition: none;
+      transform: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .pui-preview-card {
+      border-color: CanvasText;
+      background: Canvas;
+      color: CanvasText;
+    }
+  }
+}

package/dist/css/rules/progress.css

@@ -0,0 +1,14 @@
+/* Progress, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-progress .pui-gauge-indicator {
+    background: var(--brand);
+  }
+  @media (forced-colors: active) {
+    .pui-progress .pui-gauge-indicator {
+      background: CanvasText;
+    }
+  }
+}

package/dist/css/rules/radio-group.css

@@ -0,0 +1,26 @@
+/* Radio Group, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-radio {
+    border-radius: var(--radius-full);
+  }
+  .pui-radio-indicator {
+    width: 8px;
+    height: 8px;
+    border-radius: var(--radius-full);
+    background: currentColor;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pui-radio {
+      transition: none;
+    }
+  }
+}
+@layer surflane.sizes {
+  :where([data-ui-size], [data-ui-size] *).pui-radio-indicator {
+    width: calc(var(--control-choice-size) * 0.4);
+    height: calc(var(--control-choice-size) * 0.4);
+  }
+}

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

@@ -0,0 +1,101 @@
+/* Scroll Area, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-scroll-root {
+    position: relative;
+    min-width: 0;
+    max-width: 100%;
+  }
+  .pui-scroll-viewport {
+    max-width: 100%;
+    overscroll-behavior: auto;
+    scrollbar-width: none !important;
+  }
+  .pui-scroll-viewport::-webkit-scrollbar {
+    display: none;
+  }
+  /* 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));
+  }
+  .pui-scroll-root[data-overflow-x-start] > .pui-scroll-viewport {
+    mask-image: linear-gradient(to right, transparent, #000 var(--space-6));
+  }
+  .pui-scroll-root[data-overflow-x-start][data-overflow-x-end]
+    > .pui-scroll-viewport {
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      #000 var(--space-6),
+      #000 calc(100% - var(--space-6)),
+      transparent
+    );
+  }
+  .pui-scrollbar {
+    display: flex;
+    user-select: none;
+    touch-action: none;
+    padding: 2px;
+    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 {
+    opacity: 1;
+  }
+  .pui-scrollbar[data-orientation='horizontal'] {
+    height: 10px;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+  .pui-scrollbar[data-orientation='vertical'] {
+    flex-direction: column;
+    width: 10px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+  }
+  .pui-scroll-thumb {
+    flex: none;
+    border-radius: var(--radius-full);
+    background: var(--ink-muted);
+    opacity: 0.45;
+  }
+  .pui-scrollbar:hover .pui-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 {
+      pointer-events: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .pui-scrollbar {
+      opacity: 1;
+    }
+    .pui-scrollbar .pui-scroll-thumb {
+      background: CanvasText;
+      opacity: 1;
+    }
+  }
+}

package/dist/css/rules/select.css

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

package/dist/css/rules/separator.css

@@ -0,0 +1,3 @@
+/* Separator, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;

package/dist/css/rules/sheet.css

@@ -0,0 +1,3 @@
+/* Sheet, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;

package/dist/css/rules/sizing.css

@@ -0,0 +1,140 @@
+/* SizeProvider and the size scheme, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.sizes {
+  /* SizeProvider adds no layout box. Screen-reader semantics belong to its children. */
+  .pui-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);
+
+    --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);
+  }
+  [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);
+
+    --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);
+  }
+  [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);
+
+    --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);
+  }
+  /* 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)
+      );
+      --ui-row: max(var(--control-target-size), var(--ui-control-height));
+    }
+  }
+}

package/dist/css/rules/skeleton.css

@@ -0,0 +1,41 @@
+/* Skeleton, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-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;
+  }
+  .pui-skeleton[data-shape='block'] {
+    height: 96px;
+    border-radius: var(--radius-md);
+  }
+  .pui-skeleton[data-shape='circle'] {
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    flex: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pui-skeleton {
+      animation: none;
+      transition: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .pui-skeleton {
+      background: CanvasText;
+    }
+  }
+}
+@layer surflane.sizes {
+  :where([data-ui-size], [data-ui-size] *).pui-skeleton[data-shape='text'] {
+    height: var(--ui-leading);
+  }
+}

package/dist/css/rules/slider.css

@@ -0,0 +1,123 @@
+/* Slider, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-slider {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    column-gap: var(--space-4);
+    row-gap: var(--space-2);
+    width: 100%;
+    max-width: 32rem;
+    min-width: 0;
+    color: var(--ink-body);
+  }
+  .pui-slider-label {
+    font-weight: var(--weight-regular);
+    color: var(--ink);
+    overflow-wrap: anywhere;
+  }
+  .pui-slider-value {
+    margin: 0;
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    text-align: end;
+  }
+  .pui-slider-control {
+    position: relative;
+    grid-column: 1/-1;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    min-width: 0;
+    height: var(--control-target-size);
+    touch-action: pan-y;
+    user-select: none;
+    cursor: pointer;
+  }
+  .pui-slider-track {
+    width: 100%;
+    height: 6px;
+    border-radius: var(--radius-full);
+    background: var(--ink-muted);
+  }
+  .pui-slider-indicator {
+    background: var(--brand);
+    border-radius: inherit;
+  }
+  .pui-slider-thumb {
+    box-sizing: border-box;
+    width: 24px;
+    height: 24px;
+    border: 2px solid var(--ink-body);
+    border-radius: var(--radius-full);
+    background: var(--canvas);
+  }
+  .pui-slider-thumb:focus-within {
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
+  }
+  .pui-slider[data-disabled] {
+    opacity: var(--control-disabled-opacity);
+  }
+  .pui-slider-control[data-disabled],
+  .pui-slider-thumb[data-disabled] {
+    cursor: not-allowed;
+  }
+  .pui-slider[data-orientation='vertical'] {
+    width: max-content;
+    min-width: 120px;
+  }
+  .pui-slider-control[data-orientation='vertical'] {
+    width: var(--control-target-size);
+    height: 192px;
+    justify-content: center;
+    justify-self: center;
+    touch-action: pan-x;
+  }
+  .pui-slider-track[data-orientation='vertical'] {
+    width: 6px;
+    height: 100%;
+  }
+  @media (max-width: 760px) {
+    .pui-slider-thumb {
+      width: 28px;
+      height: 28px;
+    }
+  }
+  @media (forced-colors: active) {
+    .pui-slider-track {
+      background: CanvasText;
+    }
+    .pui-slider-indicator {
+      background: Highlight;
+    }
+    .pui-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);
+  }
+  @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] *).pui-slider-track:not(
+      [data-orientation='vertical']
+    ) {
+    height: var(--ui-gauge);
+  }
+  :where(
+      [data-ui-size],
+      [data-ui-size] *
+    ).pui-slider-track[data-orientation='vertical'] {
+    width: var(--ui-slider-track);
+  }
+}

package/dist/css/rules/sparkline.css

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

package/dist/css/rules/spinner.css

@@ -0,0 +1,38 @@
+/* Spinner, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    color: var(--ink-body);
+    width: 20px;
+    height: 20px;
+    vertical-align: middle;
+  }
+  .pui-spinner > svg {
+    width: 100%;
+    height: 100%;
+    animation: pui-feedback-spin 1s linear infinite;
+  }
+  @keyframes pui-feedback-spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pui-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);
+  }
+}