@surflane/ui 0.4.0 → 0.6.0

package/dist/css/rules/chart.css

@@ -0,0 +1,256 @@
+/* Chart, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-chart {
+    min-width: 0;
+    max-width: 100%;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+  .pui-chart-caption strong {
+    font: var(--weight-medium)
+      var(--type-subsection-size)/var(--type-subsection-leading)
+      var(--font-body);
+  }
+  .pui-chart-caption p,
+  .pui-chart-help {
+    margin: var(--space-2) 0 0;
+    color: var(--ink-muted);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+  }
+  /* The key, the plot and the x-axis name read as one block: the key sits right on
+     the plot, the value axis name to its left and the legend to its right. */
+  .pui-chart-frame {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+  }
+  .pui-chart-key {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0 var(--space-4);
+  }
+  .pui-chart-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-1) var(--space-2);
+    padding: 0;
+    margin: 0 0 0 auto;
+    list-style: none;
+  }
+  .pui-chart-mark {
+    inline-size: var(--space-8);
+    block-size: var(--space-5);
+  }
+  .pui-chart-legend-button {
+    max-width: 100%;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-height: 36px;
+    padding: var(--space-1) var(--space-2);
+    border: 0;
+    border-radius: var(--radius-md);
+    background: transparent;
+    color: var(--ink-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    cursor: pointer;
+    text-align: start;
+  }
+  .pui-chart-legend-button svg {
+    flex: none;
+  }
+  .pui-chart-legend-button span {
+    overflow-wrap: anywhere;
+  }
+  .pui-chart-legend-button:hover {
+    background: var(--interaction-hover-bg);
+  }
+  .pui-chart-legend-button:active {
+    background: var(--interaction-active-bg);
+  }
+  .pui-chart-legend-button[aria-pressed='false'] span {
+    text-decoration: line-through;
+    color: var(--ink-muted);
+  }
+  .pui-chart-legend-button:focus-visible,
+  .pui-chart-plot .recharts-surface:focus-visible,
+  .pui-chart-table summary:focus-visible {
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
+    border-radius: var(--radius-sm);
+  }
+  .pui-chart-axis-label {
+    margin: 0;
+    color: var(--ink-muted);
+    font: var(--weight-regular)
+      var(--type-caption-size)/var(--type-caption-leading) var(--font-body);
+    overflow-wrap: anywhere;
+  }
+  .pui-chart-x-label {
+    text-align: center;
+  }
+  .pui-chart-plot {
+    position: relative;
+    min-width: 0;
+    width: 100%;
+    font-family: var(--font-body);
+  }
+  /* The active point's values float beside it; the readout below says the same for
+     assistive technology. On the right half the box turns to the left. */
+  .pui-chart-float {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+  .pui-chart-tooltip {
+    position: absolute;
+    z-index: 1;
+    box-sizing: border-box;
+    inline-size: max-content;
+    max-inline-size: 100%;
+    translate: 0 var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    border: 1px solid var(--menu-border);
+    border-radius: var(--radius-md);
+    background: var(--menu-background);
+    box-shadow: var(--shadow-float);
+    color: var(--ink-body);
+    font: var(--weight-regular)
+      var(--type-compact-size)/var(--type-compact-leading) var(--font-body);
+    overflow-wrap: break-word;
+  }
+  .pui-chart-tooltip strong {
+    display: block;
+    color: var(--ink);
+    font-weight: var(--weight-medium);
+  }
+  .pui-chart-tooltip ul {
+    display: grid;
+    gap: var(--space-1);
+    margin: var(--space-1) 0 0;
+    padding: 0;
+    list-style: none;
+  }
+  .pui-chart-tooltip li {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+  }
+  .pui-chart-tooltip .pui-chart-mark {
+    flex: none;
+    inline-size: var(--space-6);
+    block-size: var(--space-4);
+  }
+  .pui-chart-tooltip-value {
+    white-space: nowrap;
+    margin-inline-start: auto;
+    padding-inline-start: var(--space-3);
+    color: var(--ink);
+    font-variant-numeric: tabular-nums;
+  }
+  .pui-chart-inspector {
+    box-sizing: border-box;
+    min-height: 100px;
+    padding: var(--space-3) var(--space-4);
+    background: var(--surface);
+    color: var(--ink-body);
+    border-radius: var(--radius-md);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+    overflow-wrap: anywhere;
+  }
+  .pui-chart-inspector[hidden] {
+    display: none;
+  }
+  .pui-chart-readout strong {
+    font-weight: var(--weight-medium);
+  }
+  .pui-chart-readout ul {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-2) var(--space-4);
+    list-style: none;
+    padding: 0;
+    margin: var(--space-2) 0 0;
+  }
+  .pui-chart-empty {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--space-3);
+    min-height: 160px;
+    padding: var(--space-4);
+    background: var(--surface);
+    color: var(--ink-muted);
+    border-radius: var(--radius-md);
+  }
+  .pui-chart-empty p {
+    margin: 0;
+  }
+  .pui-chart-table {
+    min-width: 0;
+  }
+  .pui-chart-table summary {
+    width: fit-content;
+    cursor: pointer;
+    color: var(--ink);
+    padding-block: var(--space-2);
+    text-decoration: underline;
+    text-underline-offset: 3px;
+  }
+  .pui-chart-table .pui-scroll-root {
+    margin-top: var(--space-2);
+  }
+  /* The data table scrolls inside a bounded region, so long series stay compact. */
+  .pui-chart-table .pui-scroll-viewport {
+    max-block-size: 320px;
+  }
+  @media (max-width: 760px), (pointer: coarse) {
+    .pui-chart-legend-button {
+      min-height: var(--control-target-size);
+    }
+  }
+  @media (forced-colors: active) {
+    .pui-chart {
+      --canvas: Canvas;
+      --ink-muted: CanvasText;
+      --line: GrayText;
+      --control-border: CanvasText;
+      --chart-series-1: CanvasText;
+      --chart-series-2: CanvasText;
+      --chart-series-3: CanvasText;
+      --chart-category-1: CanvasText;
+      --chart-category-2: CanvasText;
+      --chart-category-3: CanvasText;
+      --chart-category-4: CanvasText;
+      --chart-category-5: CanvasText;
+      --chart-category-6: CanvasText;
+    }
+    .pui-chart-plot .recharts-surface,
+    .pui-chart-mark {
+      forced-color-adjust: none;
+    }
+    .pui-chart-inspector,
+    .pui-chart-tooltip,
+    .pui-chart-empty {
+      background: Canvas;
+      color: CanvasText;
+      border: 1px solid CanvasText;
+    }
+  }
+}
+@layer surflane.sizes {
+  @media (forced-colors: active) {
+    .pui-chart-plot .recharts-cartesian-axis-tick text {
+      fill: CanvasText;
+    }
+  }
+}

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

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

package/dist/css/rules/checkbox.css

@@ -0,0 +1,25 @@
+/* Checkbox, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-checkbox-indicator {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .pui-checkbox-mixed {
+    display: none;
+  }
+  .pui-checkbox[data-indeterminate] .pui-checkbox-check {
+    display: none;
+  }
+  .pui-checkbox[data-indeterminate] .pui-checkbox-mixed {
+    display: block;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pui-checkbox {
+      transition: none;
+    }
+  }
+}

package/dist/css/rules/choice-label.css

@@ -0,0 +1,52 @@
+/* ChoiceLabel, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-choice-label {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: var(--space-3);
+    min-height: var(--control-height);
+    width: fit-content;
+    max-width: 100%;
+    cursor: pointer;
+    color: var(--ink-body);
+    font: var(--weight-regular) var(--type-body-size)/var(--type-body-leading)
+      var(--font-body);
+  }
+  .pui-choice-label:has([data-disabled]) {
+    cursor: not-allowed;
+  }
+  .pui-choice-label > span:last-child {
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  /* ChoiceLabel: the control holds one line, so it centers on the first line of the text
+     whether or not a description follows. */
+  .pui-choice-label:has(> .pui-choice-text > .pui-choice-description) {
+    align-items: flex-start;
+  }
+  .pui-choice-control {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    min-block-size: 1lh;
+  }
+  .pui-choice-text {
+    display: grid;
+    gap: var(--space-1);
+    min-width: 0;
+    overflow-wrap: anywhere;
+  }
+  .pui-choice-description {
+    color: var(--ink-muted);
+    font-size: var(--type-caption-size);
+    line-height: var(--type-caption-leading);
+    letter-spacing: var(--type-caption-tracking);
+  }
+  .pui-choice-label:has([data-readonly]) {
+    cursor: default;
+  }
+}

package/dist/css/rules/choice.css

@@ -0,0 +1,104 @@
+/* Shared by Checkbox, Radio and Switch, and ChoiceLabel around them. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-choice-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    min-width: 0;
+  }
+  .pui-checkbox,
+  .pui-radio,
+  .pui-switch {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: none;
+    width: var(--control-choice-size);
+    height: var(--control-choice-size);
+    border: 1px solid var(--control-choice-border);
+    border-radius: var(--control-choice-radius);
+    background: var(--control-background);
+    color: var(--ink);
+    outline: none;
+    cursor: pointer;
+    transition:
+      background-color var(--duration-fast) var(--ease-out),
+      border-color var(--duration-fast) var(--ease-out),
+      box-shadow var(--duration-fast) var(--ease-out);
+  }
+  .pui-checkbox:hover:not([data-disabled], [data-readonly]),
+  .pui-radio:hover:not([data-disabled], [data-readonly]),
+  .pui-switch:hover:not([data-disabled], [data-readonly]) {
+    border-color: var(--control-choice-hover-border);
+    background: var(--control-hover-background);
+  }
+  .pui-checkbox:is([data-checked], [data-indeterminate]),
+  .pui-radio[data-checked],
+  .pui-switch[data-checked] {
+    background: var(--control-choice-selected-bg);
+    border-color: var(--control-choice-selected-border);
+    color: var(--control-choice-selected-fg);
+  }
+  /* Label hover shares the same feedback as the small control itself. */
+  .pui-choice-label:hover
+    :is(.pui-checkbox, .pui-radio, .pui-switch):not(
+      [data-disabled],
+      [data-readonly]
+    ) {
+    background: var(--control-hover-background);
+    border-color: var(--control-choice-hover-border);
+  }
+  :is(.pui-checkbox, .pui-radio, .pui-switch):is(
+      [data-checked],
+      [data-indeterminate]
+    ):hover:not([data-disabled], [data-readonly]),
+  .pui-choice-label:hover
+    :is(.pui-checkbox, .pui-radio, .pui-switch):is(
+      [data-checked],
+      [data-indeterminate]
+    ):not([data-disabled], [data-readonly]) {
+    background: var(--control-choice-selected-hover-bg);
+    border-color: var(--control-choice-selected-border);
+  }
+  .pui-checkbox:focus-visible,
+  .pui-radio:focus-visible,
+  .pui-switch:focus-visible {
+    outline: var(--focus-ring-width) solid var(--interaction-focus);
+    outline-offset: var(--focus-ring-offset);
+  }
+  .pui-checkbox[data-disabled],
+  .pui-radio[data-disabled],
+  .pui-switch[data-disabled] {
+    opacity: var(--control-disabled-opacity);
+    cursor: not-allowed;
+  }
+  .pui-checkbox[data-readonly],
+  .pui-radio[data-readonly],
+  .pui-switch[data-readonly] {
+    cursor: default;
+  }
+  :is(.pui-checkbox, .pui-radio, .pui-switch)[data-invalid],
+  .pui-choice-label:hover
+    :is(.pui-checkbox, .pui-radio, .pui-switch)[data-invalid] {
+    border-color: var(--status-danger-fg);
+  }
+  @media (forced-colors: active) {
+    .pui-checkbox,
+    .pui-radio,
+    .pui-switch {
+      border-color: ButtonText;
+    }
+    .pui-checkbox:is([data-checked], [data-indeterminate]),
+    .pui-radio[data-checked],
+    .pui-switch[data-checked] {
+      background: Highlight;
+      border-color: Highlight;
+      color: HighlightText;
+      forced-color-adjust: none;
+    }
+  }
+}

package/dist/css/rules/code.css

@@ -0,0 +1,9 @@
+/* Code block, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.sizes {
+  :where([data-ui-size], [data-ui-size] *).pui-code-text {
+    padding: var(--ui-surface-padding);
+  }
+}

package/dist/css/rules/collapsible.css

@@ -0,0 +1,12 @@
+/* Collapsible, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-collapsible-panel {
+    height: var(--collapsible-panel-height);
+  }
+  .pui-collapsible-panel[data-ending-style] {
+    transition-duration: 0ms;
+  }
+}

package/dist/css/rules/combobox.css

@@ -0,0 +1,177 @@
+/* Combobox, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-combobox-group > .pui-combobox-input {
+    flex: 1;
+    min-width: 0;
+    width: 0;
+    border: 0;
+    background: transparent;
+    box-shadow: none;
+  }
+  .pui-combobox-popup {
+    box-sizing: border-box;
+    width: var(--anchor-width);
+    max-width: calc(100vw - 24px);
+    max-height: var(--available-height);
+    overflow: auto;
+    padding: var(--space-1);
+    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);
+    outline: none;
+    transition:
+      opacity var(--duration-fast) var(--ease-out),
+      transform var(--duration-fast) var(--ease-out);
+  }
+  .pui-combobox-popup[data-starting-style] {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  .pui-combobox-popup[data-ending-style] {
+    opacity: 0;
+    transition: none;
+  }
+  .pui-combobox-list {
+    max-height: min(280px, var(--available-height));
+    overflow: auto;
+  }
+  /* Select, Menu and Combobox items share one row: the control height. */
+  .pui-combobox-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: max(var(--space-1), calc((var(--control-height) - 1lh) / 2))
+      var(--space-3);
+    min-height: var(--control-height);
+    box-sizing: border-box;
+    border-radius: var(--control-radius);
+    cursor: default;
+    outline: none;
+    overflow-wrap: anywhere;
+  }
+  .pui-combobox-item[data-highlighted] {
+    background: var(--menu-hover-background);
+  }
+  .pui-combobox-item[data-selected] {
+    background: var(--selected);
+  }
+  .pui-combobox-item[data-disabled] {
+    opacity: var(--control-disabled-opacity);
+  }
+  .pui-combobox-indicator {
+    display: inline-flex;
+    align-items: center;
+  }
+  .pui-combobox-empty,
+  .pui-combobox-status {
+    padding: var(--space-3);
+    color: var(--ink-body);
+  }
+  .pui-combobox-empty:empty,
+  .pui-combobox-status:empty {
+    padding: 0;
+  }
+  .pui-combobox-section-label {
+    padding: var(--space-2) var(--space-3);
+    color: var(--ink-muted);
+    font-size: var(--type-caption-size);
+    line-height: var(--type-caption-leading);
+    letter-spacing: var(--type-caption-tracking);
+  }
+  .pui-combobox-separator {
+    height: 1px;
+    background: var(--line);
+    margin-block: var(--space-1);
+  }
+  .pui-combobox-chips {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-1);
+    width: 100%;
+    padding: var(--space-1);
+  }
+  .pui-combobox-chips .pui-combobox-input {
+    flex: 1;
+    width: 100px;
+    min-width: 80px;
+    border: 0;
+    box-shadow: none;
+    background: transparent;
+  }
+  .pui-combobox-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    padding-inline-start: var(--space-3);
+    border-radius: var(--radius-full);
+    background: var(--selected);
+    color: var(--ink);
+    font-size: var(--type-caption-size);
+    line-height: var(--type-caption-leading);
+    letter-spacing: var(--type-caption-tracking);
+  }
+  .pui-combobox-chip-remove {
+    width: 28px;
+    height: 28px;
+  }
+  @media (max-width: 760px), (pointer: coarse) {
+    .pui-combobox-item {
+      min-height: var(--control-target-size);
+    }
+    .pui-combobox-chip-remove {
+      width: var(--control-target-size);
+      height: var(--control-target-size);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .pui-combobox-popup,
+    .pui-combobox-group {
+      transition: none;
+    }
+  }
+  @media (forced-colors: active) {
+    .pui-combobox-item:is([data-selected], [data-highlighted]) {
+      outline: 1px solid CanvasText;
+      outline-offset: -1px;
+    }
+  }
+  .pui-combobox-group > .pui-combobox-input,
+  .pui-combobox-action {
+    height: calc(var(--control-height) - 2px);
+  }
+  /* Reserve the selection mark so every option label shares one alignment line. */
+  .pui-combobox-indicator {
+    width: 16px;
+    flex: none;
+  }
+  .pui-combobox-item:not([data-selected]) .pui-combobox-indicator {
+    visibility: hidden;
+  }
+}
+@layer surflane.sizes {
+  :where([data-ui-size], [data-ui-size] *):is(.pui-combobox-input) {
+    font-size: var(--ui-font);
+    line-height: var(--ui-leading);
+  }
+  :where([data-ui-size], [data-ui-size] *):is(.pui-combobox-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-combobox-item) {
+    box-sizing: border-box;
+    padding-block: max(
+      var(--space-1),
+      calc((var(--ui-row) - var(--ui-leading)) / 2)
+    );
+  }
+}

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

@@ -0,0 +1,9 @@
+/* Context Menu, with the styles of what it renders. */
+@layer surflane.tokens, surflane.themes, surflane.base, surflane.components,
+  surflane.sizes;
+
+@layer surflane.components {
+  .pui-context-trigger {
+    -webkit-touch-callout: none;
+  }
+}