@surflane/ui 0.5.0 → 0.7.0

package/dist/css/rules/stat.css

@@ -0,0 +1,59 @@
+/* Stat, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* The label and caption take their own lines; the value and its change share one,
+     on a common baseline. */
+  .pui-stat {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: var(--space-1) var(--space-2);
+    min-width: 0;
+    margin: 0;
+  }
+  .pui-stat > :where(dt, dd) {
+    margin: 0;
+  }
+  .pui-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);
+    font-variant-numeric: tabular-nums;
+  }
+  .pui-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);
+    font-variant-numeric: tabular-nums;
+  }
+  .pui-stat-change[data-tone='up'] {
+    color: var(--trend-up-fg);
+  }
+  .pui-stat-change[data-tone='down'] {
+    color: var(--trend-down-fg);
+  }
+  .pui-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);
+  }
+}

package/dist/css/rules/switch.css

@@ -0,0 +1,50 @@
+/* Switch, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-switch {
+    width: var(--control-switch-width);
+    height: var(--control-switch-height);
+    padding: calc(
+      (var(--control-switch-height) - var(--control-switch-thumb)) / 2 - 1px
+    );
+    border-radius: var(--radius-full);
+    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);
+    transform: translateX(0);
+    transition:
+      transform var(--duration-fast) var(--ease-out),
+      background-color var(--duration-fast) var(--ease-out);
+  }
+  .pui-switch[data-checked] .pui-switch-thumb {
+    background: var(--on-brand);
+    transform: translateX(
+      calc(var(--control-switch-width) - var(--control-switch-height))
+    );
+  }
+  .pui-switch:dir(rtl)[data-checked] .pui-switch-thumb {
+    transform: translateX(
+      calc(var(--control-switch-height) - var(--control-switch-width))
+    );
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pui-switch,
+    .pui-switch-thumb {
+      transition: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .pui-switch[data-checked] .pui-switch-thumb {
+      background: HighlightText;
+    }
+    .pui-switch-thumb {
+      background: ButtonText;
+    }
+  }
+}

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

@@ -0,0 +1,82 @@
+/* Syntax highlighter, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* Syntax tokens are semantic color roles; source text, type and geometry remain unchanged. */
+  .pui-syntax {
+    color: var(--syntax-plain);
+    font: inherit;
+    letter-spacing: inherit;
+  }
+  .pui-syntax [data-syntax] {
+    font: inherit;
+    letter-spacing: inherit;
+  }
+  .pui-syntax [data-syntax='plain'] {
+    color: var(--syntax-plain);
+  }
+  .pui-syntax [data-syntax='comment'] {
+    color: var(--syntax-comment);
+  }
+  .pui-syntax [data-syntax='keyword'] {
+    color: var(--syntax-keyword);
+  }
+  .pui-syntax [data-syntax='string'] {
+    color: var(--syntax-string);
+  }
+  .pui-syntax [data-syntax='number'] {
+    color: var(--syntax-number);
+  }
+  .pui-syntax [data-syntax='function'] {
+    color: var(--syntax-function);
+  }
+  .pui-syntax [data-syntax='tag'] {
+    color: var(--syntax-tag);
+  }
+  .pui-syntax [data-syntax='attribute'] {
+    color: var(--syntax-attribute);
+  }
+  .pui-syntax [data-syntax='punctuation'] {
+    color: var(--syntax-punctuation);
+  }
+  .pui-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);
+    /* Code shows the characters as typed, like the other code text: no === or => ligatures. */
+    font-variant-ligatures: none;
+    letter-spacing: var(--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);
+    overflow: hidden;
+  }
+  .pui-syntax-scroll .pui-syntax-pre {
+    min-inline-size: max-content;
+    border-radius: 0;
+    background: none;
+  }
+  .pui-syntax-scroll .pui-syntax-pre[data-wrap] {
+    min-inline-size: 0;
+  }
+  .pui-syntax-pre[data-wrap] {
+    white-space: pre-wrap;
+    overflow-wrap: anywhere;
+  }
+  @media (forced-colors: active) {
+    .pui-syntax,
+    .pui-syntax [data-syntax] {
+      color: CanvasText;
+    }
+  }
+}

package/dist/css/rules/table.css

@@ -0,0 +1,28 @@
+/* Table, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@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) {
+    display: flex;
+  }
+  .pui-table-cell[data-align='center']
+    > :is(.pui-checkbox, .pui-radio, .pui-switch) {
+    margin-inline: auto;
+  }
+  .pui-table-cell[data-align='end']
+    > :is(.pui-checkbox, .pui-radio, .pui-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] *).pui-table-caption {
+    padding-inline: var(--ui-table-padding-x);
+  }
+}

package/dist/css/rules/tabs.css

@@ -0,0 +1,126 @@
+/* Tabs, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* Navigation: whole-surface selection and stable controls. */
+  .pui-tabs {
+    min-width: 0;
+  }
+  .pui-tabs-list {
+    display: flex;
+    gap: var(--space-1);
+    position: relative;
+    min-width: 0;
+    max-width: 100%;
+    padding: var(--space-1);
+    background: var(--surface);
+    border-radius: var(--radius-md);
+    overflow: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) transparent;
+  }
+  .pui-tabs-tab {
+    box-sizing: border-box;
+    flex: none;
+    position: relative;
+    z-index: 1;
+    border: 0;
+    border-radius: var(--control-radius);
+    min-height: var(--control-height);
+    padding: 0 var(--space-3);
+    background: transparent;
+    color: var(--ink-muted);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    cursor: pointer;
+    white-space: nowrap;
+    outline: none;
+  }
+  .pui-tabs-tab:hover:not(:disabled):not([data-disabled]) {
+    color: var(--ink);
+    background: var(--interaction-hover-bg);
+  }
+  .pui-tabs-tab:active:not(:disabled):not([data-disabled]) {
+    background: var(--interaction-active-bg);
+  }
+  .pui-tabs-tab[data-active] {
+    background: var(--canvas);
+    color: var(--ink);
+    font-weight: var(--weight-medium);
+  }
+  .pui-tabs-tab:focus-visible {
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-inset);
+  }
+  .pui-tabs-tab:is(:disabled, [data-disabled]) {
+    opacity: var(--control-disabled-opacity);
+    cursor: not-allowed;
+  }
+  .pui-tabs-panel {
+    min-width: 0;
+    padding-block: var(--space-4);
+    outline: none;
+    overflow-wrap: anywhere;
+  }
+  .pui-tabs-panel:focus-visible {
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
+    border-radius: var(--radius-md);
+  }
+  .pui-tabs-indicator {
+    position: absolute;
+    top: var(--active-tab-top);
+    left: var(--active-tab-left);
+    width: var(--active-tab-width);
+    height: var(--active-tab-height);
+    box-sizing: border-box;
+    border: 0;
+    background: var(--canvas);
+    border-radius: var(--control-radius);
+    pointer-events: none;
+  }
+  .pui-tabs-list:has(.pui-tabs-indicator) .pui-tabs-tab[data-active] {
+    background: transparent;
+    border-color: transparent;
+  }
+  .pui-tabs[data-orientation='vertical'] {
+    display: grid;
+    grid-template-columns: minmax(0, 180px) minmax(0, 1fr);
+    gap: var(--space-6);
+    align-items: start;
+  }
+  .pui-tabs-list[data-orientation='vertical'] {
+    flex-direction: column;
+  }
+  .pui-tabs-list[data-orientation='vertical'] .pui-tabs-tab {
+    text-align: start;
+  }
+  .pui-tabs[data-orientation='vertical'] > .pui-tabs-panel {
+    padding-block: var(--space-1);
+  }
+  @media (max-width: 760px) {
+    .pui-tabs[data-orientation='vertical'] {
+      grid-template-columns: minmax(0, 1fr);
+      gap: var(--space-3);
+    }
+  }
+  @media (forced-colors: active) {
+    .pui-tabs-tab[data-active] {
+      background: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+    .pui-tabs-indicator {
+      background: Highlight;
+      forced-color-adjust: none;
+    }
+  }
+}
+@layer surflane.sizes {
+  :where([data-ui-size], [data-ui-size] *):is(.pui-tabs-tab) {
+    min-block-size: var(--ui-row);
+    font-size: var(--ui-font);
+    line-height: var(--ui-leading);
+  }
+}

package/dist/css/rules/textarea.css

@@ -0,0 +1,21 @@
+/* Textarea, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-textarea {
+    height: auto;
+    min-height: calc(var(--control-height) * 2.5);
+    padding-block: var(--space-3);
+    resize: vertical;
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+  }
+}
+@layer surflane.sizes {
+  :where([data-ui-size], [data-ui-size] *).pui-textarea {
+    height: auto;
+    min-height: calc(var(--control-height) * 2.5);
+    padding-block: var(--ui-textarea-padding);
+  }
+}

package/dist/css/rules/toast.css

@@ -0,0 +1,247 @@
+/* Toast, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* Compact notification surfaces: one quiet card, semantic icon and predictable actions. */
+  .pui-toast-viewport {
+    position: fixed;
+    /* The inset is inside the scrollport so shadows have room to fade. */
+    inset-inline-end: 0;
+    bottom: 0;
+    z-index: var(--layer-popup);
+    display: flex;
+    flex-direction: column-reverse;
+    gap: var(--space-2);
+    box-sizing: border-box;
+    width: 416px;
+    max-width: 100vw;
+    max-height: 100dvh;
+    padding: var(--space-6);
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-width: none;
+    overscroll-behavior: contain;
+    pointer-events: none;
+    outline: none;
+  }
+  .pui-toast {
+    --_toast-icon: var(--ink-muted);
+    position: relative;
+    flex: none;
+    box-sizing: border-box;
+    width: 100%;
+    padding: var(--space-4);
+    border: 0;
+    border-radius: var(--radius-lg);
+    background: var(--menu-background);
+    color: var(--ink);
+    box-shadow: var(--shadow-float);
+    font: var(--weight-regular)
+      var(--type-compact-size)/var(--type-compact-leading) var(--font-body);
+    letter-spacing: var(--type-compact-tracking);
+    overflow-wrap: anywhere;
+    pointer-events: auto;
+    opacity: 1;
+    translate: 0 0;
+    transition:
+      opacity var(--toast-enter-duration) var(--motion-ease),
+      translate var(--toast-enter-duration) var(--toast-stack-ease);
+  }
+  .pui-toast[data-tone='success'] {
+    --_toast-icon: var(--status-success-fg);
+  }
+  .pui-toast[data-tone='danger'] {
+    --_toast-icon: var(--status-danger-fg);
+  }
+  .pui-toast[data-tone='caution'] {
+    --_toast-icon: var(--status-caution-fg);
+  }
+  .pui-toast[data-tone='progress'] {
+    --_toast-icon: var(--status-progress-fg);
+  }
+  .pui-toast[data-tone='info'] {
+    --_toast-icon: var(--status-info-fg);
+  }
+  .pui-toast[data-starting-style] {
+    opacity: 0;
+    translate: 0 12px;
+  }
+  .pui-toast[data-ending-style] {
+    opacity: 0;
+    transition-duration: 0s;
+  }
+  .pui-toast[data-limited] {
+    display: none;
+  }
+  .pui-toast:focus-visible {
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
+  }
+  .pui-toast-content {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--space-3);
+    opacity: 1;
+    transition: opacity var(--duration-fast) var(--motion-ease);
+  }
+  .pui-toast-text {
+    flex: 1;
+    min-width: 0;
+  }
+  .pui-toast-icon {
+    display: inline-flex;
+    flex: none;
+    color: var(--_toast-icon);
+    margin-top: 1px;
+  }
+  .pui-toast-icon > svg {
+    width: 18px;
+    height: 18px;
+  }
+  .pui-toast-title {
+    margin: 0;
+    font: var(--weight-medium)
+      var(--type-compact-size)/var(--type-compact-leading) var(--font-body);
+    letter-spacing: var(--type-compact-tracking);
+  }
+  .pui-toast-description {
+    margin: 2px 0 0;
+    color: var(--ink-muted);
+    font-size: var(--type-compact-size);
+    letter-spacing: var(--type-compact-tracking);
+    line-height: var(--type-compact-leading);
+  }
+  /* Close and Action are small Buttons (see toast.tsx); only their placement is set here. */
+  .pui-toast-close {
+    flex: none;
+    margin: -4px 0 0;
+    margin-inline-end: -4px;
+    color: var(--ink-muted);
+  }
+  .pui-toast-action {
+    margin-top: var(--space-3);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pui-toast {
+      transition: none;
+    }
+    .pui-toast[data-starting-style] {
+      translate: 0 0;
+    }
+  }
+  @media (forced-colors: active) {
+    .pui-toast {
+      background: Canvas;
+      color: CanvasText;
+      border: 1px solid CanvasText;
+      box-shadow: none;
+    }
+    .pui-toast-description,
+    .pui-toast-icon {
+      color: CanvasText;
+    }
+  }
+  .pui-toast-viewport[data-layout='stack']:focus-visible {
+    border-radius: var(--radius-lg);
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-inset);
+  }
+  .pui-toast-viewport[data-layout='anchored'] {
+    inset: 0;
+    display: block;
+    width: auto;
+    max-width: none;
+    max-height: none;
+    padding: 0;
+    overflow: visible;
+  }
+  .pui-toast-viewport[data-layout='anchored'] .pui-toast {
+    width: 320px;
+    max-width: min(calc(100vw - 24px), var(--available-width));
+    max-height: var(--available-height);
+    overflow: auto;
+    scrollbar-width: thin;
+  }
+  .pui-toast-viewport[data-layout='anchored']:focus-visible .pui-toast {
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
+  }
+  /* Base UI owns hover/focus expansion, announcements, timers and gestures. */
+  .pui-toast-viewport[data-layout='stack'] {
+    display: grid;
+    /* An auto row adopts the tallest card while its height transitions, moving
+       the bottom anchor during collapse when a behind-card has an action. */
+    grid-template-rows: var(--toast-frontmost-height, 80px);
+    padding-top: var(--space-6);
+    height: calc(var(--toast-frontmost-height, 80px) + 48px);
+    overflow: visible;
+  }
+  .pui-toast-viewport[data-layout='stack'] > .pui-toast {
+    grid-area: 1 / 1;
+    z-index: calc(100 - var(--toast-index));
+    height: var(--toast-frontmost-height, var(--toast-height, auto));
+    overflow: clip;
+    align-self: end;
+    transform-origin: bottom center;
+    transform: translateY(calc(var(--toast-index) * -10px))
+      scale(calc(1 - var(--toast-index) * 0.035));
+    transition:
+      height var(--toast-stack-duration) var(--toast-stack-ease),
+      transform var(--toast-stack-duration) var(--toast-stack-ease),
+      opacity var(--toast-enter-duration) var(--motion-ease),
+      translate var(--toast-enter-duration) var(--toast-stack-ease);
+  }
+  .pui-toast-viewport[data-layout='stack']:not([data-expanded])
+    .pui-toast-content[data-behind] {
+    opacity: 0;
+    pointer-events: none;
+  }
+  .pui-toast-viewport[data-layout='stack'][data-expanded] {
+    pointer-events: auto;
+    height: min(calc(var(--toast-stack-height, 240px) + 48px), 100dvh);
+    grid-template-rows: var(--toast-stack-height, auto);
+    padding-top: var(--space-6);
+    overflow: visible;
+  }
+  .pui-toast-viewport[data-layout='stack'][data-expanded][data-stack-overflow] {
+    overflow-y: auto;
+    overflow-x: hidden;
+  }
+  .pui-toast-viewport[data-layout='stack'][data-expanded] > .pui-toast {
+    height: var(--toast-height, auto);
+    transform: translateY(
+      calc(-1 * (var(--toast-offset-y) + var(--toast-index) * var(--space-2)))
+    );
+  }
+  .pui-toast-viewport[data-layout='stack'] > .pui-toast[data-ending-style] {
+    transition-duration: 0s;
+  }
+  /* Touch targets grow to the target size with the small Button scheme; the close button stays centred
+     on the first line. */
+  @media (max-width: 760px), (pointer: coarse) {
+    .pui-toast-close {
+      margin-top: -8px;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pui-toast-content,
+    .pui-toast-viewport[data-layout='stack'],
+    .pui-toast-viewport[data-layout='stack'] > .pui-toast {
+      transition: none;
+    }
+  }
+  .pui-toast-viewport::-webkit-scrollbar {
+    display: none;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pui-toast {
+      transition: none;
+    }
+  }
+}
+@layer surflane.sizes {
+  :where([data-ui-size], [data-ui-size] *).pui-toast {
+    padding: var(--ui-surface-padding);
+  }
+}

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

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

package/dist/css/rules/toggle.css

@@ -0,0 +1,27 @@
+/* Toggle, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* Command state uses the whole rounded surface, with no one-sided accent. */
+  .pui-toggle {
+    background: transparent;
+    border-color: var(--line);
+  }
+  .pui-toggle[data-pressed] {
+    background: var(--selected);
+    border-color: var(--control-border);
+    color: var(--ink);
+  }
+  .pui-toggle[data-disabled] {
+    opacity: var(--control-disabled-opacity);
+    cursor: not-allowed;
+  }
+}
+@layer surflane.sizes {
+  :where([data-ui-size], [data-ui-size] *):is(.pui-toggle) {
+    min-block-size: var(--ui-row);
+    font-size: var(--ui-font);
+    line-height: var(--ui-leading);
+  }
+}