@surflane/ui 0.11.0 → 0.13.0

package/dist/css/rules/card.css

@@ -7,4 +7,23 @@
     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);
+  }
+  /* Compact density, after any size: a card pads 12px, keeps 8px between its parts
+     and titles itself with the label role, as a dense panel needs. */
+  :where([data-ui-density='compact'], [data-ui-density='compact'] *).surf-card {
+    padding: var(--surf-surface-padding, var(--surf-ui-density-gap));
+    gap: var(--surf-ui-density-inset);
+  }
+  :where(
+    [data-ui-density='compact'],
+    [data-ui-density='compact'] *
+  ).surf-card-title {
+    font-size: var(--surf-type-label-size);
+    line-height: var(--surf-type-label-leading);
+    letter-spacing: var(--surf-type-label-tracking);
+  }
 }

package/dist/css/rules/chart.css

@@ -37,12 +37,14 @@
     align-items: center;
     gap: 0 var(--surf-space-4);
   }
+  /* The legend takes the inline end of the key: the right, or the left right to left. */
   .surf-chart-legend {
     display: flex;
     flex-wrap: wrap;
     gap: var(--surf-space-1) var(--surf-space-2);
     padding: 0;
-    margin: 0 0 0 auto;
+    margin: 0;
+    margin-inline-start: auto;
     list-style: none;
   }
   .surf-chart-mark {
@@ -54,7 +56,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,17 +68,53 @@
     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;
   }
   .surf-chart-legend-button:hover {
-    background: var(--surf-interaction-hover-bg);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   .surf-chart-legend-button:active {
-    background: var(--surf-interaction-active-bg);
+    background-image: linear-gradient(
+      var(--surf-interaction-active-bg),
+      var(--surf-interaction-active-bg)
+    );
   }
   .surf-chart-legend-button[aria-pressed='false'] span {
     text-decoration: line-through;
@@ -166,6 +204,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;
@@ -177,7 +219,7 @@
     box-sizing: border-box;
     min-height: 100px;
     padding: var(--surf-space-3) var(--surf-space-4);
-    background: var(--surf-surface);
+    background: var(--surf-recessed);
     color: var(--surf-ink-body);
     border-radius: var(--surf-radius-md);
     font: var(--surf-weight-regular)
@@ -206,7 +248,7 @@
     gap: var(--surf-space-3);
     min-height: 160px;
     padding: var(--surf-space-4);
-    background: var(--surf-surface);
+    background: var(--surf-recessed);
     color: var(--surf-ink-muted);
     border-radius: var(--surf-radius-md);
   }
@@ -231,8 +273,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 +324,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/choice.css

@@ -39,7 +39,10 @@
   .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);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   .surf-checkbox:is([data-checked], [data-indeterminate]),
   .surf-radio[data-checked],
@@ -54,7 +57,10 @@
       [data-disabled],
       [data-readonly]
     ) {
-    background: var(--surf-control-hover-background);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
     border-color: var(--surf-control-choice-hover-border);
   }
   :is(.surf-checkbox, .surf-radio, .surf-switch):is(
@@ -103,6 +109,24 @@
     ) {
     border-color: var(--surf-status-danger-fg);
   }
+  /* On touch and narrow screens a ChoiceLabel makes the whole row the target. A
+     choice without one, such as a table row's checkbox, keeps its size and reaches
+     --surf-control-target-size around it instead. */
+  @media (max-width: 760px), (pointer: coarse) {
+    :is(.surf-checkbox, .surf-radio, .surf-switch):not(.surf-choice-label *) {
+      position: relative;
+    }
+    :is(.surf-checkbox, .surf-radio, .surf-switch):not(
+        .surf-choice-label *
+      )::after {
+      content: '';
+      position: absolute;
+      inset: 50% auto auto 50%;
+      inline-size: max(100%, var(--surf-control-target-size));
+      block-size: max(100%, var(--surf-control-target-size));
+      translate: -50% -50%;
+    }
+  }
   @media (forced-colors: active) {
     .surf-checkbox,
     .surf-radio,

package/dist/css/rules/combobox.css

@@ -28,19 +28,10 @@
       var(--surf-font-body);
     letter-spacing: var(--surf-type-body-tracking);
     outline: none;
-    transition:
-      opacity var(--surf-duration-fast) var(--surf-ease-out),
-      transform var(--surf-duration-fast) var(--surf-ease-out);
   }
-  .surf-combobox-popup[data-starting-style] {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  .surf-combobox-popup[data-ending-style] {
-    opacity: 0;
-    transition: none;
-  }
-  .surf-combobox-list {
+  /* In its popup the list scrolls itself. An inline list leaves scrolling to the
+     container it is placed in, such as a ScrollArea. */
+  .surf-combobox-popup .surf-combobox-list {
     max-height: min(280px, var(--available-height));
     overflow: auto;
   }
@@ -61,11 +52,16 @@
     outline: none;
     overflow-wrap: anywhere;
   }
+  /* The highlight is a layer over the selected fill, so the keyboard position
+     shows on a chosen option too. */
   .surf-combobox-item[data-highlighted] {
-    background: var(--surf-menu-hover-background);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   .surf-combobox-item[data-selected] {
-    background: var(--surf-selected);
+    background-color: var(--surf-selected);
   }
   .surf-combobox-item[data-disabled] {
     opacity: var(--surf-control-disabled-opacity);
@@ -117,7 +113,7 @@
     gap: var(--surf-space-1);
     padding-inline-start: var(--surf-space-3);
     border-radius: var(--surf-radius-pill);
-    background: var(--surf-selected);
+    background-color: var(--surf-selected);
     color: var(--surf-ink);
     font-size: var(--surf-type-caption-size);
     line-height: var(--surf-type-caption-leading);
@@ -143,7 +139,12 @@
     }
   }
   @media (forced-colors: active) {
-    .surf-combobox-item:is([data-selected], [data-highlighted]) {
+    .surf-combobox-item[data-highlighted] {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+    /* A chosen value keeps its chip edge when its fill is gone. */
+    .surf-combobox-chip {
       outline: 1px solid CanvasText;
       outline-offset: -1px;
     }

package/dist/css/rules/dashboard.css

@@ -0,0 +1,118 @@
+/* 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;
+    --surf-dashboard-gap: var(--surf-space-4);
+    display: grid;
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(min(100%, var(--surf-dashboard-panel-min-width)), 1fr)
+    );
+    gap: var(--surf-dashboard-gap);
+    min-inline-size: 0;
+  }
+  /* columns caps the count: a column is never narrower than its share of that many. */
+  .surf-dashboard[data-columns] {
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(
+        min(
+          100%,
+          max(
+            var(--surf-dashboard-panel-min-width),
+            (
+                100% - (var(--surf-dashboard-columns) - 1) *
+                  var(--surf-dashboard-gap)
+              ) /
+              var(--surf-dashboard-columns)
+          )
+        ),
+        1fr
+      )
+    );
+  }
+  /* 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;
+    border-radius: var(--surf-radius-sm);
+  }
+  /* The title takes focus after Retry; a keyboard reader sees where they are. */
+  .surf-dashboard-panel-header .surf-card-title:focus-visible {
+    outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
+    outline-offset: var(--surf-focus-ring-offset);
+  }
+  .surf-dashboard-panel-header .surf-card-title:focus:not(:focus-visible) {
+    outline: none;
+  }
+  .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;
+  }
+  /* A stale panel keeps its last content under the caution. */
+  .surf-dashboard-panel[data-state='stale'] > .surf-dashboard-panel-body {
+    display: grid;
+    align-content: start;
+    gap: var(--surf-space-3);
+  }
+  .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;
+    }
+  }
+}
+@layer surflane.sizes {
+  /* Compact density: panels sit 12px apart. The card inside tightens itself. */
+  :where(
+    [data-ui-density='compact'],
+    [data-ui-density='compact'] *
+  ).surf-dashboard {
+    --surf-dashboard-gap: var(--surf-ui-density-gap);
+  }
+  :where(
+      [data-ui-density='compact'],
+      [data-ui-density='compact'] *
+    ).surf-dashboard-panel[data-state='stale']
+    > .surf-dashboard-panel-body {
+    gap: var(--surf-ui-density-inset);
+  }
+}

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

@@ -31,7 +31,10 @@
   }
   :is(.surf-date-picker, .surf-time-field):not([data-disabled], [data-readonly])
     .surf-date-group:hover:not([data-focus-within], :focus-within) {
-    background: var(--surf-control-hover-background);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
     border-color: var(--surf-control-hover-border);
   }
   .surf-date-group[data-focus-within],
@@ -55,14 +58,14 @@
   :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);
+    background: var(--surf-recessed);
   }
-  /* Read-only shows a value, not a box to type in: it sits on the surface plane
+  /* Read-only shows a value, not a box to type in: it sits on the recessed step
      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);
+    background: var(--surf-recessed);
   }
   .surf-date-input {
     display: flex;
@@ -73,6 +76,11 @@
     font: var(--surf-weight-regular)
       var(--surf-type-body-size)/var(--surf-type-body-leading)
       var(--surf-font-body);
+    /* iOS zooms the page into a focused segment whose text is under 16px. */
+    font-size: max(
+      var(--surf-control-text-min-size),
+      var(--surf-type-body-size)
+    );
     white-space: nowrap;
   }
   .surf-date-segment {
@@ -88,10 +96,12 @@
   .surf-date-segment[data-placeholder] {
     color: var(--surf-control-placeholder);
   }
+  /* The group carries the focus halo; the segment being typed into is marked
+     like a selected table row, a selected fill told apart by its 3:1 edge. */
   .surf-date-segment[data-focused] {
-    background: var(--surf-selected);
+    background-color: var(--surf-selected);
     color: var(--surf-ink);
-    outline: 1px solid var(--surf-control-focus);
+    box-shadow: inset 0 0 0 1px var(--surf-selected-edge);
   }
   .surf-date-range-inputs {
     display: flex;
@@ -128,13 +138,19 @@
   :is(.surf-date-trigger, .surf-calendar-nav)[data-hovered]:not(
       [data-disabled]
     ) {
-    background: var(--surf-selected);
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   :is(.surf-date-trigger, .surf-calendar-nav)[data-focus-visible] {
     outline: var(--surf-focus-ring-width) solid var(--surf-interaction-focus);
     outline-offset: var(--surf-focus-ring-offset);
   }
-  :is(.surf-date-trigger, .surf-calendar-nav)[data-disabled] {
+  /* A disabled field has faded its trigger with the group already. */
+  :is(.surf-date-trigger, .surf-calendar-nav)[data-disabled]:not(
+      [data-disabled] *
+    ) {
     opacity: var(--surf-control-disabled-opacity);
     cursor: not-allowed;
   }
@@ -145,9 +161,9 @@
     overflow: auto;
     overscroll-behavior: contain;
     padding: var(--surf-space-2);
-    border: 1px solid var(--surf-line);
+    border: 1px solid var(--surf-menu-border);
     border-radius: var(--surf-radius-lg);
-    background: var(--surf-canvas);
+    background: var(--surf-menu-background);
     color: var(--surf-ink);
     box-shadow: var(--surf-shadow-float);
     z-index: var(--surf-layer-popup);
@@ -204,19 +220,19 @@
     outline: none;
     font-variant-numeric: tabular-nums;
   }
-  .surf-calendar-day[data-hovered]:not(
-      [data-disabled],
-      [data-unavailable],
-      [data-selected]
-    ) {
-    background: var(--surf-hover);
+  /* Hover is a layer, over a selected day's fill too. */
+  .surf-calendar-day[data-hovered]:not([data-disabled], [data-unavailable]) {
+    background-image: linear-gradient(
+      var(--surf-interaction-hover-bg),
+      var(--surf-interaction-hover-bg)
+    );
   }
   .surf-calendar-day[data-selected] {
-    background: var(--surf-selected);
+    background-color: var(--surf-selected);
     color: var(--surf-ink);
   }
   .surf-calendar-day:is([data-selection-start], [data-selection-end]) {
-    background: var(--surf-brand-mark);
+    background-color: var(--surf-brand-mark);
     color: var(--surf-on-brand);
   }
   .surf-calendar-day[data-focus-visible] {
@@ -238,12 +254,12 @@
   @media (max-width: 760px), (pointer: coarse) {
     .surf-date-trigger,
     .surf-calendar-nav {
-      width: 40px;
-      height: 40px;
-      min-width: 40px;
+      width: var(--surf-control-target-size);
+      height: var(--surf-control-target-size);
+      min-width: var(--surf-control-target-size);
     }
     .surf-calendar-day {
-      min-height: 40px;
+      min-height: var(--surf-control-target-size);
     }
   }
   @media (prefers-reduced-motion: reduce) {
@@ -267,10 +283,12 @@
       color: HighlightText;
       forced-color-adjust: none;
     }
-    .surf-calendar-day[data-focus-visible],
-    .surf-date-segment[data-focused] {
+    .surf-calendar-day[data-focus-visible] {
       outline-color: Highlight;
     }
+    .surf-date-segment[data-focused] {
+      outline: 1px solid Highlight;
+    }
   }
   .surf-calendar-grid :is(th, td) {
     padding: 0;
@@ -278,8 +296,13 @@
     min-width: 0;
     text-align: center;
   }
-  .surf-calendar-day[data-focus-visible][data-selected] {
-    outline-color: var(--surf-ink);
+  /* The ring sits inside the day. On a range end's brand fill the focus color
+     can match the fill, so it takes the color written on that fill. */
+  .surf-calendar-day:is(
+      [data-selection-start],
+      [data-selection-end]
+    )[data-focus-visible] {
+    outline-color: var(--surf-on-brand);
   }
 }
 @layer surflane.sizes {
@@ -287,7 +310,7 @@
     .surf-date-input,
     .surf-date-segment
   ) {
-    font-size: var(--surf-ui-font);
+    font-size: max(var(--surf-control-text-min-size), var(--surf-ui-font));
     line-height: var(--surf-ui-leading);
   }
   :where([data-ui-size], [data-ui-size] *):is(.surf-date-trigger) > svg {