@trdrs/quickcharts 5.4.0 → 5.6.0

package/dist/quickcharts.css

@@ -5174,11 +5174,12 @@
   height: 28px;
 }
 
-/* The shipped catalog has no author and no count: a row is its star, its name and its actions. */
-[data-qc-theme] .qc-picker-list--catalog .qc-picker-author,
-[data-qc-theme] .qc-picker-list--catalog .qc-picker-count,
-[data-qc-theme] .qc-picker-list--catalog .qc-picker-headings > :nth-child(3),
-[data-qc-theme] .qc-picker-list--catalog .qc-picker-headings > :nth-child(4) {
+/* The author and count columns stand only while a listed row fills them, so the shipped catalog is
+ * a row of its star, its name and its actions. */
+[data-qc-theme] .qc-picker-list:not(.qc-picker-list--authors) .qc-picker-author,
+[data-qc-theme] .qc-picker-list:not(.qc-picker-list--authors) .qc-picker-headings > :nth-child(3),
+[data-qc-theme] .qc-picker-list:not(.qc-picker-list--counts) .qc-picker-count,
+[data-qc-theme] .qc-picker-list:not(.qc-picker-list--counts) .qc-picker-headings > :nth-child(4) {
   display: none;
 }
 
@@ -5191,6 +5192,49 @@
   display: none;
 }
 
+/* A collection's empty state fills the list's place, centred in the row ink: a 120px mark 12px over
+ * an 18px title, 12px over 16px text, and its action 20px under that, a dialog footer's primary
+ * button. */
+[data-qc-theme] .qc-picker-empty {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 0;
+  padding: 0 34px 0 30px;
+  color: var(--qc-text-secondary);
+  text-align: center;
+}
+
+[data-qc-theme] .qc-picker-empty-mark,
+[data-qc-theme] .qc-picker-empty-mark svg {
+  display: flex;
+  width: 120px;
+  height: 120px;
+}
+
+[data-qc-theme] .qc-picker-empty-mark {
+  margin-bottom: 12px;
+}
+
+[data-qc-theme] .qc-picker-empty-title {
+  margin-bottom: 12px;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+[data-qc-theme] .qc-picker-empty-text {
+  margin: 0 0 -4px;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+[data-qc-theme] .qc-picker-empty-action {
+  margin-top: 20px;
+}
+
 [data-qc-theme] .qc-picker-status {
   flex: 0 0 auto;
   padding: 0 20px;
@@ -6725,15 +6769,15 @@
  * places each over the scale's box as it measures it and writes `--qcd-chart-background`, the
  * chart's own background, which each control stands on. */
 
-/* The auto-scale and logarithmic buttons at the foot of the scale: two 20x22 buttons 15px apart, each
- * centred in a 35x30 cell, a 14px letter each on an 18px line. Off, a button is a 1px outline on the
+/* The auto-scale and logarithmic buttons at the foot of the scale: two 20x22 buttons 4px apart, the
+ * pair centred on the scale, a 14px letter each on an 18px line. Off, a button is a 1px outline on the
  * chart's background, lit under the pointer; on, it is a held mode, filled in the emphasis fill a
  * checked box wears with its letter in the inverse ink, a step lighter under the pointer. */
 [data-qc-theme] .qc-scale-modes {
   position: absolute;
   z-index: 4;
   display: flex;
-  gap: 15px;
+  gap: 4px;
   pointer-events: auto;
 }
 
@@ -6773,7 +6817,8 @@
 
 /* The box at the top of the scale naming what its prices are in: at least 64x26, four pixels in from
  * the scale's top and its side away from the plot, on the chart's background inside a 1px border
- * with a radius of 4, in 12px text. It takes no pointer, so the scale under it still drags. */
+ * with a radius of 4. Its words stand at the start of a 24px row inside the border, 3px in from
+ * each end on a radius of 3, in 12px text. It takes no pointer, so the scale under it still drags. */
 [data-qc-theme] .qc-scale-unit {
   position: absolute;
   z-index: 4;
@@ -6781,9 +6826,7 @@
   display: flex;
   min-width: 64px;
   height: 26px;
-  align-items: center;
-  justify-content: center;
-  padding: 0 6px;
+  padding: 0;
   font-size: 12px;
   font-weight: 400;
   line-height: 12px;
@@ -6795,23 +6838,45 @@
   pointer-events: none;
 }
 
+[data-qc-theme] .qc-scale-unit-row {
+  display: flex;
+  flex: 1 1 auto;
+  height: 24px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2px;
+  padding: 0 3px;
+  border-radius: 3px;
+}
+
 /* With the host's door the box is a button that opens the host's menu: it keeps the box's size, type
- * and outline, takes the pointer, and lights under it and while pressed as the scale's buttons do.
- * The chrome gives every button its pointer back, so this rule names the chrome as well. */
+ * and outline, takes the pointer, and ends its row in a 7x5 caret. The row lights under the pointer,
+ * while pressed and while the menu stands open, and the caret turns over while it is open. The chrome
+ * gives every button its pointer back, so these rules name the chrome as well. */
 [data-qc-theme] .qc-chrome button.qc-scale-unit {
   font-family: inherit;
   cursor: pointer;
   pointer-events: auto;
 }
 
-[data-qc-theme] .qc-chrome button.qc-scale-unit:hover {
+[data-qc-theme] .qc-chrome button.qc-scale-unit:hover .qc-scale-unit-row,
+[data-qc-theme] .qc-chrome button.qc-scale-unit[aria-expanded='true'] .qc-scale-unit-row {
   background: var(--qc-state-hover);
 }
 
-[data-qc-theme] .qc-chrome button.qc-scale-unit:active {
+[data-qc-theme] .qc-chrome button.qc-scale-unit:active .qc-scale-unit-row {
   background: var(--qc-state-pressed);
 }
 
+[data-qc-theme] .qc-scale-unit-arrow {
+  display: flex;
+  flex: 0 0 7px;
+}
+
+[data-qc-theme] .qc-chrome button.qc-scale-unit[aria-expanded='true'] .qc-scale-unit-arrow {
+  transform: rotate(180deg);
+}
+
 /* The plus beside the crosshair's price label is painted by the renderer with the label. Its button
  * stands over the painted box, at the size the chart writes: transparent, and taking no pointer, so
  * a pointer resting on the plus stays on the plot and keeps the crosshair. It carries the plus's

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trdrs/quickcharts",
-  "version": "5.4.0",
+  "version": "5.6.0",
   "description": "Quick Charts: a datafeed-driven charting library with drawings, indicators, layouts and replay over host-supplied data and storage ports.",
   "keywords": [
     "charts",