@surflane/ui 0.10.1 → 0.12.0

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

@@ -117,6 +117,22 @@
     font-variant-numeric: tabular-nums;
     text-align: center;
   }
+  /* Status fills, each 4.5:1 against the canvas-colored count. */
+  .surf-bottom-nav-badge[data-tone='caution'] {
+    background: var(--surf-status-caution-fg);
+  }
+  .surf-bottom-nav-badge[data-tone='success'] {
+    background: var(--surf-status-success-fg);
+  }
+  .surf-bottom-nav-badge[data-tone='info'] {
+    background: var(--surf-status-info-fg);
+  }
+  .surf-bottom-nav-badge[data-tone='progress'] {
+    background: var(--surf-status-progress-fg);
+  }
+  .surf-bottom-nav-badge[data-tone='neutral'] {
+    background: var(--surf-status-neutral-fg);
+  }
   .surf-bottom-nav-badge[data-dot] {
     inset-block-start: 0;
     min-inline-size: 0;

package/dist/css/rules/card.css

@@ -7,4 +7,9 @@
     padding: var(--surf-surface-padding, var(--surf-ui-card-padding));
     gap: var(--surf-ui-surface-padding);
   }
+  :where([data-ui-size], [data-ui-size] *).surf-card-title {
+    font-size: var(--surf-ui-title-size);
+    line-height: var(--surf-ui-title-leading);
+    letter-spacing: var(--surf-ui-title-tracking);
+  }
 }

package/dist/css/rules/chart.css

@@ -54,7 +54,7 @@
     display: inline-flex;
     align-items: center;
     gap: var(--surf-space-2);
-    min-height: 36px;
+    min-height: var(--surf-control-height);
     padding: var(--surf-space-1) var(--surf-space-2);
     border: 0;
     border-radius: var(--surf-radius-md);
@@ -66,9 +66,39 @@
     cursor: pointer;
     text-align: start;
   }
-  .surf-chart-legend-button svg {
+  .surf-chart-legend-button svg,
+  .surf-chart-legend-reference svg {
     flex: none;
   }
+  /* A threshold or band: named with its value, not a toggle. */
+  .surf-chart-legend-reference {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--surf-space-2);
+    min-height: var(--surf-control-height);
+    padding: var(--surf-space-1) var(--surf-space-2);
+    color: var(--surf-ink-body);
+    font: var(--surf-weight-regular)
+      var(--surf-type-body-size)/var(--surf-type-body-leading)
+      var(--surf-font-body);
+  }
+  .surf-chart-legend-more {
+    font-variant-numeric: tabular-nums;
+  }
+  /* The series past legendLimit, one per row in a popover. */
+  .surf-chart-legend-list {
+    display: grid;
+    gap: var(--surf-space-1);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+  .surf-chart-legend-list .surf-chart-legend-button {
+    inline-size: 100%;
+  }
+  .surf-chart-key[data-position='bottom'] .surf-chart-legend {
+    margin-inline-start: 0;
+  }
   .surf-chart-legend-button span {
     overflow-wrap: anywhere;
   }
@@ -166,6 +196,10 @@
     inline-size: var(--surf-space-6);
     block-size: var(--surf-space-4);
   }
+  .surf-chart-tooltip-total {
+    padding-block-start: var(--surf-space-1);
+    border-block-start: 1px solid var(--surf-line);
+  }
   .surf-chart-tooltip-value {
     white-space: nowrap;
     margin-inline-start: auto;
@@ -231,8 +265,39 @@
   .surf-chart-table .surf-scroll-viewport {
     max-block-size: 320px;
   }
+  /* Compact, for charts in dashboard cards: the plot, its legend and the floating
+     values show; the caption, keyboard help, readout and x-axis name stay for
+     assistive technology. */
+  .surf-chart[data-density='compact'] {
+    gap: var(--surf-space-2);
+  }
+  .surf-chart[data-density='compact']
+    :is(
+      .surf-chart-caption,
+      .surf-chart-help,
+      .surf-chart-inspector,
+      .surf-chart-x-label
+    ) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    min-height: 0;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .surf-chart[data-density='compact']
+    :is(.surf-chart-legend-button, .surf-chart-legend-reference) {
+    min-height: var(--surf-space-6);
+    padding-block: 0;
+    font-size: var(--surf-type-compact-size);
+    line-height: var(--surf-type-compact-leading);
+  }
   @media (max-width: 760px), (pointer: coarse) {
-    .surf-chart-legend-button {
+    .surf-chart-legend-button,
+    .surf-chart[data-density='compact'] .surf-chart-legend-button {
       min-height: var(--surf-control-target-size);
     }
   }
@@ -251,6 +316,12 @@
       --surf-chart-category-4: CanvasText;
       --surf-chart-category-5: CanvasText;
       --surf-chart-category-6: CanvasText;
+      --surf-chart-category-7: CanvasText;
+      --surf-chart-category-8: CanvasText;
+      --surf-chart-category-9: CanvasText;
+      --surf-chart-category-10: CanvasText;
+      --surf-chart-category-11: CanvasText;
+      --surf-chart-category-12: CanvasText;
     }
     .surf-chart-plot .recharts-surface,
     .surf-chart-mark {

package/dist/css/rules/dashboard.css

@@ -0,0 +1,66 @@
+/* Dashboard, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* As many columns as fit a panel's minimum width; one on a phone. */
+  .surf-dashboard {
+    --surf-dashboard-panel-min-width: 20rem;
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(min(100%, var(--surf-dashboard-panel-min-width)), 1fr)
+    );
+    gap: var(--surf-space-4);
+    min-inline-size: 0;
+  }
+  /* The header keeps its height; the content takes the rest of a stretched row. */
+  .surf-dashboard-panel {
+    grid-template-rows: auto minmax(0, 1fr);
+    align-content: start;
+    min-inline-size: 0;
+  }
+  .surf-dashboard-panel[data-span='2'] {
+    grid-column: span 2;
+  }
+  .surf-dashboard-panel[data-span='3'] {
+    grid-column: span 3;
+  }
+  .surf-dashboard-panel[data-span='full'] {
+    grid-column: 1 / -1;
+  }
+  /* As tall as an icon button, with or without one, so titles line up across a row. */
+  .surf-dashboard-panel-header {
+    display: flex;
+    align-items: center;
+    gap: var(--surf-space-2);
+    min-inline-size: 0;
+    min-block-size: var(--surf-control-height);
+  }
+  .surf-dashboard-panel-header .surf-card-title {
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .surf-dashboard-panel-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--surf-space-1);
+    margin-inline-start: auto;
+  }
+  .surf-dashboard-panel-body {
+    min-inline-size: 0;
+    min-block-size: 0;
+  }
+  .surf-dashboard-panel-empty {
+    margin: 0;
+    color: var(--surf-ink-muted);
+  }
+  /* A phone shows one panel a row, whatever it spans. */
+  @media (max-width: 760px) {
+    .surf-dashboard-panel[data-span] {
+      grid-column: auto;
+    }
+  }
+}

package/dist/css/rules/date-picker.css

@@ -50,13 +50,20 @@
     .surf-date-group:hover {
     border-color: var(--surf-status-danger-fg);
   }
-  :is(.surf-date-picker, .surf-time-field)[data-disabled] {
-    opacity: var(--surf-control-disabled-opacity);
-  }
+  /* Disabled fades the field, as in every other field: the label and the reason
+     beside it stay readable. */
   :is(.surf-date-picker, .surf-time-field)[data-disabled] .surf-date-group {
+    opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
     background: var(--surf-control-disabled-background);
   }
+  /* Read-only shows a value, not a box to type in: it sits on the surface plane
+     without the field's border, as text fields do. */
+  :is(.surf-date-picker, .surf-time-field)[data-readonly]:not([data-invalid])
+    .surf-date-group:not([data-focus-within], :focus-within) {
+    border-color: transparent;
+    background: var(--surf-surface);
+  }
   .surf-date-input {
     display: flex;
     align-items: center;

package/dist/css/rules/dialog.css

@@ -158,9 +158,20 @@
   ) {
     padding-inline: var(--surf-ui-card-padding);
   }
+  /* Head and footer follow the size's card padding: 24/20px and 20px by default. */
   :where([data-ui-size], [data-ui-size] *).surf-dialog-header {
+    padding-block: var(--surf-ui-card-padding)
+      calc(var(--surf-ui-card-padding) - var(--surf-space-1));
     padding-inline-end: calc(
       var(--surf-control-height) + var(--surf-space-4) * 2
     );
   }
+  :where([data-ui-size], [data-ui-size] *).surf-dialog-footer {
+    padding-block: calc(var(--surf-ui-card-padding) - var(--surf-space-1));
+  }
+  :where([data-ui-size], [data-ui-size] *).surf-dialog-header h2 {
+    font-size: var(--surf-ui-title-size);
+    line-height: var(--surf-ui-title-leading);
+    letter-spacing: var(--surf-ui-title-tracking);
+  }
 }

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

@@ -62,6 +62,13 @@
     cursor: not-allowed;
     background: var(--surf-control-disabled-background);
   }
+  /* Read-only shows a value, not a box to type in: the value sits on the surface
+     plane without the field's border. Its text stays at full ink, apart from a
+     disabled field, and focus still rings it, so the value stays copyable. */
+  .surf-input[readonly]:not(:focus, [aria-invalid='true']) {
+    border-color: transparent;
+    background: var(--surf-surface);
+  }
   /* An invalid field keeps its edge while hovered; hover still tints the fill. */
   .surf-input[aria-invalid='true'],
   .surf-input[aria-invalid='true']:hover,

package/dist/css/rules/filter-bar.css

@@ -15,16 +15,23 @@
     gap: var(--surf-space-4);
     min-inline-size: 0;
   }
+  /* A filter keeps its width; only the search field takes the room left in the row. */
   .surf-filter-bar-field {
     display: grid;
     gap: var(--surf-space-2);
-    flex: 1 1 12rem;
+    flex: 0 1 12rem;
     min-inline-size: 0;
     max-inline-size: 100%;
   }
   .surf-filter-bar-field[data-width='search'] {
     flex: 2 1 20rem;
   }
+  /* On a phone each field fills its row. */
+  @media (max-width: 760px) {
+    .surf-filter-bar-field {
+      flex-grow: 1;
+    }
+  }
   .surf-filter-bar-field > :is(.surf-control, .surf-select-trigger) {
     inline-size: 100%;
     min-inline-size: 0;

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

@@ -24,6 +24,15 @@
     border-color: var(--surf-control-hover-border);
     background: var(--surf-control-hover-background);
   }
+  /* Read-only shows a value on the surface plane, without the field's border, as
+     text fields do. */
+  :is(.surf-combobox-group, .surf-number-group)[data-readonly]:not(
+      :focus-within,
+      [data-invalid]
+    ) {
+    border-color: transparent;
+    background: var(--surf-surface);
+  }
   .surf-combobox-group:focus-within,
   .surf-number-group:focus-within {
     border-color: var(--surf-control-focus);

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

@@ -29,12 +29,15 @@
     font-variant-numeric: tabular-nums;
     caret-color: var(--surf-control-focus);
   }
+  /* A short dash, as a code is written elsewhere (481-920): muted ink, weaker than
+     the digits and the boxes but plainly there. */
   .surf-otp-separator {
     flex: none;
-    width: var(--surf-space-2);
-    height: 0;
+    width: var(--surf-space-3);
+    height: 2px;
     border: 0;
-    border-top: 1px solid var(--surf-line);
+    border-radius: var(--surf-radius-full);
+    background: var(--surf-ink-muted);
   }
   @media (max-width: 760px) {
     .surf-otp-field,
@@ -56,7 +59,7 @@
       border-color: LinkText;
     }
     .surf-otp-separator {
-      border-color: CanvasText;
+      background: CanvasText;
     }
   }
 }

package/dist/css/rules/panel.css

@@ -217,10 +217,18 @@
   ) {
     padding-inline: var(--surf-ui-card-padding);
   }
-  /* The title keeps clear of the close button: its 16px inset, its width and a 16px gap. */
+  /* The title keeps clear of the close button: its 16px inset, its width and a 16px gap.
+   * Above and below, the head follows the size's card padding: 24/20px by default. */
   :where([data-ui-size], [data-ui-size] *).surf-panel-header {
+    padding-block: var(--surf-ui-card-padding)
+      calc(var(--surf-ui-card-padding) - var(--surf-space-1));
     padding-inline-end: calc(
       var(--surf-control-height) + var(--surf-space-4) * 2
     );
   }
+  :where([data-ui-size], [data-ui-size] *).surf-panel-title {
+    font-size: var(--surf-ui-title-size);
+    line-height: var(--surf-ui-title-leading);
+    letter-spacing: var(--surf-ui-title-tracking);
+  }
 }

package/dist/css/rules/select.css

@@ -11,11 +11,35 @@
     text-align: start;
     cursor: pointer;
   }
-  .surf-select-trigger > span:first-child {
+  .surf-select-trigger > span:first-child,
+  .surf-select-value {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+  /* Content width: the trigger fits its longest option and keeps that width. */
+  .surf-select[data-width='content'],
+  .surf-select[data-width='content'] .surf-select-trigger {
+    width: auto;
+  }
+  .surf-select-sizer {
+    display: grid;
+    min-width: 0;
+  }
+  .surf-select-sizer > * {
+    grid-area: 1 / 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .surf-select-sizer > [aria-hidden='true'] {
+    visibility: hidden;
+  }
+  .surf-select-separator {
+    block-size: 1px;
+    margin-block: var(--surf-space-1);
+    background: var(--surf-line);
+  }
   .surf-select-icon {
     display: flex;
     align-items: center;

package/dist/css/rules/sizing.css

@@ -11,6 +11,10 @@
     --surf-ui-slider-track: var(--surf-size-slider-track-small);
     --surf-ui-file-padding: var(--surf-size-file-padding-small);
     --surf-ui-content-gap: var(--surf-size-content-gap-small);
+    /* Surface titles (Card, Sheet, Dialog) step down one role at Small. */
+    --surf-ui-title-size: var(--surf-type-subsection-size);
+    --surf-ui-title-leading: var(--surf-type-subsection-leading);
+    --surf-ui-title-tracking: var(--surf-type-subsection-tracking);
 
     --surf-ui-control-height: var(--surf-size-control-height-small);
     --surf-ui-control-padding: var(--surf-size-control-padding-small);
@@ -51,6 +55,9 @@
     --surf-ui-slider-track: var(--surf-size-slider-track-default);
     --surf-ui-file-padding: var(--surf-size-file-padding-default);
     --surf-ui-content-gap: var(--surf-size-content-gap-default);
+    --surf-ui-title-size: var(--surf-type-section-size);
+    --surf-ui-title-leading: var(--surf-type-section-leading);
+    --surf-ui-title-tracking: var(--surf-type-section-tracking);
 
     --surf-ui-control-height: var(--surf-size-control-height-default);
     --surf-ui-control-padding: var(--surf-size-control-padding-default);
@@ -91,6 +98,9 @@
     --surf-ui-slider-track: var(--surf-size-slider-track-large);
     --surf-ui-file-padding: var(--surf-size-file-padding-large);
     --surf-ui-content-gap: var(--surf-size-content-gap-large);
+    --surf-ui-title-size: var(--surf-type-section-size);
+    --surf-ui-title-leading: var(--surf-type-section-leading);
+    --surf-ui-title-tracking: var(--surf-type-section-tracking);
 
     --surf-ui-control-height: var(--surf-size-control-height-large);
     --surf-ui-control-padding: var(--surf-size-control-padding-large);

package/dist/css/rules/slider.css

@@ -38,12 +38,14 @@
   }
   .surf-slider-track {
     width: 100%;
-    height: 6px;
+    height: var(--surf-size-slider-track-default);
     border-radius: var(--surf-radius-full);
     background: var(--surf-slider-track);
   }
+  /* The pair Progress uses: a brand-mark fill on the surface track, 3:1 against both
+     the track and the sheet in either theme. */
   .surf-slider-indicator {
-    background: var(--surf-brand);
+    background: var(--surf-brand-mark);
     border-radius: inherit;
   }
   .surf-slider-thumb {

package/dist/css/rules/stat.css

@@ -49,6 +49,35 @@
   .surf-stat-change[data-tone='down'] {
     color: var(--surf-trend-down-fg);
   }
+  /* The value's state: the tone's icon and text, on the value's line. */
+  .surf-stat-status {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--surf-space-1);
+    color: var(--surf-status-neutral-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);
+  }
+  .surf-stat-status[data-tone='info'] {
+    color: var(--surf-status-info-fg);
+  }
+  .surf-stat-status[data-tone='success'] {
+    color: var(--surf-status-success-fg);
+  }
+  .surf-stat-status[data-tone='progress'] {
+    color: var(--surf-status-progress-fg);
+  }
+  /* Past a threshold the value takes the status color as well. */
+  .surf-stat-status[data-tone='caution'],
+  .surf-stat:has(> .surf-stat-status[data-tone='caution']) > .surf-stat-value {
+    color: var(--surf-status-caution-fg);
+  }
+  .surf-stat-status[data-tone='danger'],
+  .surf-stat:has(> .surf-stat-status[data-tone='danger']) > .surf-stat-value {
+    color: var(--surf-status-danger-fg);
+  }
   .surf-stat-caption {
     flex: 1 0 100%;
     color: var(--surf-ink-muted);
@@ -56,4 +85,32 @@
     line-height: var(--surf-type-caption-leading);
     letter-spacing: var(--surf-type-caption-tracking);
   }
+  /* A group: the shared label, then each value under its own name, side by side. */
+  .surf-stat-group {
+    display: grid;
+    gap: var(--surf-space-2);
+    min-width: 0;
+  }
+  .surf-stat-group-label {
+    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);
+  }
+  /* Each value takes its own width and wraps to a new line when the row is full. */
+  .surf-stat-group-items {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--surf-space-3) var(--surf-space-6);
+    min-width: 0;
+  }
+  /* In a group each value stacks its lines, so it is only as wide as the widest. */
+  .surf-stat-group-items > .surf-stat {
+    display: grid;
+    justify-items: start;
+    align-content: start;
+  }
+  .surf-stat-group-items .surf-stat-label {
+    color: var(--surf-ink-body);
+  }
 }

package/dist/css/rules/time-range-picker.css

@@ -0,0 +1,14 @@
+/* Time range picker, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  /* The span, the interval and the button sit on one line in a header or toolbar. */
+  .surf-time-range {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--surf-space-2);
+    max-inline-size: 100%;
+  }
+}

package/dist/css/styles.css

@@ -62,6 +62,7 @@
 @import './rules/app-shell.css';
 @import './rules/tree.css';
 @import './rules/date-picker.css';
+@import './rules/time-range-picker.css';
 @import './rules/chart.css';
 @import '@surflane/css/foundations/layout.css';
 @import './rules/layout.css';
@@ -73,8 +74,10 @@
 @import './rules/list.css';
 @import './rules/stat.css';
 @import './rules/sparkline.css';
+@import './rules/bar-list.css';
 @import '@surflane/css/presentation/inline-message.css';
 @import './rules/inline-message.css';
+@import './rules/dashboard.css';
 @import './rules/syntax-highlighter.css';
 @import '@surflane/css/presentation/code.css';
 @import './rules/code.css';

package/dist/css/time-range-picker.css

@@ -0,0 +1,14 @@
+/* Time range picker, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+@import '@surflane/design-tokens/tokens.css';
+@import '@surflane/css/presentation/base.css';
+@import './rules/base.css';
+@import './rules/field-control.css';
+@import './rules/sizing.css';
+@import './rules/popup.css';
+@import './rules/item.css';
+@import './rules/icon.css';
+@import './rules/select.css';
+@import './rules/button.css';
+@import './rules/time-range-picker.css';

package/dist/dashboard.d.ts

@@ -0,0 +1,46 @@
+import * as React from 'react';
+export type DashboardRootProps = React.ComponentPropsWithoutRef<'div'>;
+export type DashboardPanelLabels = {
+    /** The button that shows the description, given the title. */
+    about: (title: string) => string;
+    loading: string;
+    refreshing: string;
+    error: string;
+    retry: string;
+    empty: string;
+};
+export type DashboardPanelProps = Omit<React.ComponentPropsWithoutRef<'div'>, 'title'> & {
+    title: string;
+    /** What the panel shows and how it is measured, behind an info button by the title. */
+    description?: React.ReactNode;
+    /** The heading level of the title. */
+    level?: 2 | 3 | 4 | 5 | 6;
+    /** loading shows a placeholder until the first data arrives; error and empty
+     * replace the content with a message. */
+    state?: 'ready' | 'loading' | 'error' | 'empty';
+    /** New data is on its way: the content stays, a spinner shows by the title and the
+     * panel is busy for assistive technology. */
+    refreshing?: boolean;
+    /** Shows a retry button in the error message. */
+    onRetry?: () => void;
+    /** Why it failed or why it is empty, in place of the default text. */
+    message?: React.ReactNode;
+    /** Controls at the end of the header, such as a menu. */
+    actions?: React.ReactNode;
+    /** Columns the panel spans where they fit; a phone shows one. */
+    span?: 1 | 2 | 3 | 'full';
+    labels?: Partial<DashboardPanelLabels>;
+};
+export declare const Dashboard: {
+    Root: ({ className, ref, ...props }: DashboardRootProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+    Panel: ({ title, description, level, state, refreshing, onRetry, message, actions, span, labels, className, children, ref, ...props }: DashboardPanelProps & {
+        ref?: React.Ref<HTMLDivElement>;
+    }) => React.JSX.Element;
+};
+export declare const DashboardRoot: ({ className, ref, ...props }: DashboardRootProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element, DashboardPanel: ({ title, description, level, state, refreshing, onRetry, message, actions, span, labels, className, children, ref, ...props }: DashboardPanelProps & {
+    ref?: React.Ref<HTMLDivElement>;
+}) => React.JSX.Element;

package/dist/dashboard.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from 'react';
+import { Button } from './button.js';
+import { Card } from './card.js';
+import { Icon } from './icon.js';
+import { InlineMessage } from './inline-message.js';
+import { Popover } from './popover.js';
+import { Skeleton } from './skeleton.js';
+import { Spinner } from './spinner.js';
+import { cx } from './class-names.js';
+/** The panels of a dashboard on a responsive grid: as many columns as fit panels of
+ * --surf-dashboard-panel-min-width (20rem), one column on a phone. */
+const Root = function DashboardRoot({ className, ref, ...props }) {
+    return (_jsx("div", { ...props, ref: ref, className: cx('surf-dashboard', className) }));
+};
+const panelLabels = {
+    about: (title) => `About ${title}`,
+    loading: 'Loading',
+    refreshing: 'Refreshing',
+    error: 'This panel could not load.',
+    retry: 'Retry',
+    empty: 'No data in this range.',
+};
+/** One panel of a dashboard: a card with its title, an optional description, the
+ * states of its data and the content. The content takes the room the row gives it. */
+const Panel = function DashboardPanel({ title, description, level = 3, state = 'ready', refreshing = false, onRetry, message, actions, span, labels, className, children, ref, ...props }) {
+    const text = { ...panelLabels, ...labels };
+    const id = React.useId();
+    const busy = state === 'loading' || refreshing;
+    return (_jsxs(Card.Root, { role: 'group', "aria-labelledby": `${id}-title`, "aria-busy": busy || undefined, ...props, ref: ref, "data-span": span, "data-state": state, className: cx('surf-dashboard-panel', className), children: [_jsxs("div", { className: 'surf-dashboard-panel-header', children: [_jsx(Card.Title, { level: level, id: `${id}-title`, children: title }), description && (_jsxs(Popover.Root, { children: [_jsx(Popover.Trigger, { render: _jsx(Button, { variant: 'ghost', size: 'icon-small', "aria-label": text.about(title) }), children: _jsx(Icon, { name: 'info' }) }), _jsx(Popover.Content, { size: 'small', children: _jsx(Popover.Description, { children: description }) })] })), refreshing && state !== 'loading' && (_jsx(Spinner, { size: 'small', label: text.refreshing })), actions && (_jsx("div", { className: 'surf-dashboard-panel-actions', children: actions }))] }), _jsx("div", { className: 'surf-dashboard-panel-body', children: state === 'loading' ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { shape: 'block' }), _jsx("span", { className: 'surf-feedback-sr', children: text.loading })] })) : state === 'error' ? (_jsxs(InlineMessage.Root, { tone: 'danger', children: [_jsx(InlineMessage.Icon, { tone: 'danger' }), _jsxs(InlineMessage.Content, { children: [_jsx(InlineMessage.Description, { children: message ?? text.error }), onRetry && (_jsx(InlineMessage.Actions, { children: _jsx(Button, { variant: 'outline', size: 'small', onClick: onRetry, children: text.retry }) }))] })] })) : state === 'empty' ? (_jsx("p", { className: 'surf-dashboard-panel-empty', children: message ?? text.empty })) : (children) })] }));
+};
+export const Dashboard = { Root, Panel };
+// Flat names for React Server Components, which cannot dot into client exports.
+export const { Root: DashboardRoot, Panel: DashboardPanel } = Dashboard;