@trdrs/quickcharts 5.1.1 → 5.2.0

package/dist/quickcharts.css

@@ -6672,13 +6672,14 @@
   }
 }
 
-/* The symbol search dialog and its compare family: the heading, the field with its operators, the
- * class strip, and the result list. */
-[data-qc-theme] .qc-search-dialog {
+/* The symbol search dialog and its compare family: the field with its operators, the class strip,
+ * and the result list, in a box rounded 20px. */
+[data-qc-theme] .qc-dialog.qc-search-dialog {
   height: min(85vh, 680px);
+  border-radius: 20px;
 }
 
-[data-qc-theme] .qc-search-dialog--compare {
+[data-qc-theme] .qc-dialog.qc-search-dialog--compare {
   height: min(85vh, 565px);
 }
 
@@ -6690,51 +6691,31 @@
   height: 100%;
   flex-direction: column;
   padding: 0 6px 6px;
-  color: var(--qc-text-primary);
+  color: var(--qc-text-secondary);
   font-family: var(--qc-text-fontFamily);
   font-size: var(--qc-text-fontSizeBase);
 }
 
-/* The heading band: a 68px line with the title at 20px on 28. The close reaches 3px past the band's
- * inset, where every dialog of this size keeps it. */
-[data-qc-theme] .qc-search-dialog .qc-dialog-title {
-  height: 68px;
-  padding: 0 20px;
-}
-
-[data-qc-theme] .qc-search-dialog .qc-dialog-title .qc-title {
-  font-size: 20px;
-  line-height: 28px;
-}
-
-[data-qc-theme] .qc-search-dialog .qc-dialog-close {
-  margin-inline-end: -3px;
-}
-
-/* One 40px row in an 8px round box: the mark, the value, and the strip of things to do to the value.
- * It does NOT wrap: a field that reflows as the operators appear moves the caret out from under the
- * hand that is typing into it. The outline stands in for a border, so the side padding carries the
- * pixel a border would take. */
+/* The field: the mark and the value on one 40px line, 16px under the box's top edge on its 20px
+ * inset, with nothing drawn around it. It does NOT wrap: a field that reflows as the operators
+ * appear moves the caret out from under the hand that is typing into it. */
 [data-qc-theme] .qc-search-field {
   display: flex;
   flex: 0 0 auto;
   align-items: center;
   height: 40px;
-  margin: 0 20px 8px;
-  padding: 6px 9px;
-  border-radius: 8px;
-  outline: 1px solid var(--qc-chrome-fieldBorder);
-  outline-offset: -1px;
+  margin: 16px 20px 0;
+  padding: 6px 0;
 }
 
 /* The mark stands back while the field is idle and steps forward once the caret is in it. */
 [data-qc-theme] .qc-search-magnifier {
   flex: 0 0 auto;
-  color: var(--qc-text-disabled);
+  color: var(--qc-text-muted);
 }
 
 [data-qc-theme] .qc-search-field:focus-within .qc-search-magnifier {
-  color: var(--qc-text-muted);
+  color: var(--qc-text-secondary);
 }
 
 /* The value at 16px on 24, raised to the case a ticker is written in. */
@@ -6743,7 +6724,7 @@
   min-width: 0;
   height: 24px;
   padding: 0;
-  color: var(--qc-text-primary);
+  color: var(--qc-text-secondary);
   font: inherit;
   font-size: calc(var(--qc-text-fontSizeBase) + 2px);
   line-height: 24px;
@@ -6804,8 +6785,8 @@
   background: var(--qc-state-pressedHover);
 }
 
-/* The class strip: filled round tabs 4px apart on the field's inset, scrolling sideways when the
- * feed serves more classes than the width holds. */
+/* The class strip: filled round tabs 4px apart on the field's inset, 8px under the field, scrolling
+ * sideways when the feed serves more classes than the width holds. */
 [data-qc-theme] .qc-search-classes {
   display: flex;
   flex: 0 0 auto;
@@ -6840,7 +6821,7 @@
   flex: 0 0 auto;
   height: 28px;
   padding: 0 11px;
-  color: var(--qc-text-primary);
+  color: var(--qc-text-secondary);
   font-size: var(--qc-text-fontSizeBase);
   line-height: 18px;
   background: var(--qc-state-hover);
@@ -6895,9 +6876,13 @@
   overflow: hidden;
 }
 
+/* The list opens 8px under what stands above it, with a pixel of air over its first row and 6px
+ * under its last. */
 [data-qc-theme] .qc-search-list {
   flex: 1 1 auto;
   min-height: 0;
+  margin-top: 8px;
+  padding: 1px 0 6px;
   overflow-y: auto;
 }
 
@@ -6907,44 +6892,60 @@
   letter-spacing: normal;
 }
 
-/* A row. The pointer lifts it a step up the neutral ramp, the same step its divider is drawn in, so a
- * hovered row reads as one block with its edge. The keyboard's row wears a 2px ring in the emphasis
- * ink inside its own box, apart from the hover: the ring says where Enter will land. */
+/* A row: the market's mark, its ticker over a line of its description and kind, and its source at
+ * the row's end, on a 56px row at the box's 20px inset. The pointer lays a plate under it, 12px in
+ * from the box's edges and rounded 8px, and the keyboard's row wears the same plate: the row Enter
+ * will act on reads as the one under the hand. */
 [data-qc-theme] .qc-search-row {
   position: relative;
+  isolation: isolate;
   display: flex;
   align-items: center;
-  border-bottom: 1px solid var(--qc-state-pressed);
+  min-height: 56px;
+  padding: 8px 20px;
   cursor: default;
 }
 
-[data-qc-theme] .qc-search-row:hover {
-  background: var(--qc-state-pressed);
-}
-
-[data-qc-theme] .qc-search-row[aria-selected='true']::after {
+[data-qc-theme] .qc-search-row::before {
   position: absolute;
-  inset: 0;
-  border: 2px solid var(--qc-control-on);
-  border-radius: 4px;
+  inset: 0 12px;
+  z-index: -1;
+  border-radius: 8px;
   content: '';
   pointer-events: none;
 }
 
-/* A row's own mark: 24px, 20px in from the dialog's edge and 8px before the ticker. */
+[data-qc-theme] .qc-search-row:hover::before,
+[data-qc-theme] .qc-search-row[aria-selected='true']::before {
+  background: var(--qc-state-hover);
+}
+
+/* A row's own mark: 36px, 8px before the ticker, its monogram at 16px. */
 [data-qc-theme] .qc-search-row .qc-symbol-badge {
-  flex: 0 0 24px;
-  width: 24px;
-  height: 24px;
-  margin-inline: 20px 8px;
+  flex: 0 0 36px;
+  width: 36px;
+  height: 36px;
+  margin-inline-end: 8px;
+  font-size: calc(var(--qc-text-fontSizeBase) + 2px);
+  font-weight: 700;
+}
+
+/* The ticker over its line, taking the room the row's end leaves. */
+[data-qc-theme] .qc-search-text {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-width: 0;
 }
 
+/* The ticker at 16px on 24, in the case a ticker is written in. */
 [data-qc-theme] .qc-search-symbol {
   min-width: 0;
   overflow: hidden;
-  color: var(--qc-text-primary);
+  color: var(--qc-text-secondary);
   font-size: calc(var(--qc-text-fontSizeBase) + 2px);
   line-height: 24px;
+  text-transform: uppercase;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -6953,47 +6954,60 @@
   color: var(--qc-text-highlight);
 }
 
+/* The line under the ticker: the description at 12px on 16, then the kind. */
+[data-qc-theme] .qc-search-line {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+}
+
 [data-qc-theme] .qc-search-name {
   min-width: 0;
   overflow: hidden;
+  color: var(--qc-text-secondary);
+  font-size: calc(var(--qc-text-fontSizeBase) - 2px);
+  line-height: 16px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-/* The source cell: what kind of market a row is and where its data comes from, then the mark of
- * the venue or the data source, set against the row's end. */
-[data-qc-theme] .qc-search-source {
-  display: inline-flex;
+/* The market's kind: a 12px tag of 8px bold capitals, rounded 3px, on a fifth of the text's ink. */
+[data-qc-theme] .qc-search-kind {
   flex: 0 0 auto;
-  align-items: center;
-  justify-content: flex-end;
-  padding-inline-end: 20px;
-}
-
-[data-qc-theme] .qc-search-source-name {
-  color: var(--qc-text-primary);
-  font-size: var(--qc-text-fontSizeBase);
-  line-height: 21px;
+  height: 12px;
+  margin-inline-start: 2px;
+  padding: 0 6px;
+  color: var(--qc-text-secondary);
+  font-size: 8px;
+  font-weight: 700;
+  line-height: 12px;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
   white-space: nowrap;
+  background: color-mix(in srgb, var(--qc-text-secondary) 20%, transparent);
+  border-radius: 3px;
 }
 
-[data-qc-theme] .qc-search-kind {
-  color: var(--qc-text-muted);
-  font-size: calc(var(--qc-text-fontSizeBase) - 2px);
-  white-space: nowrap;
+/* The source at the row's end, 24px past the text: its mark. */
+[data-qc-theme] .qc-search-source {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 8px;
+  padding-inline-start: 24px;
 }
 
-/* The source's mark: an 18px disc in a 20px cell. The package ships no brand artwork and fetches
- * none: a host paints the venue's own mark, or a data source's, and without one the source is
- * written in the one letter it is known by on the neutral fill. */
+/* The source's mark: a 24px disc that names the source in its tooltip. The package ships no brand
+ * artwork and fetches none: a host paints the venue's own mark, or a data source's, and without one
+ * the source is written in the one letter it is known by on the neutral fill. */
 [data-qc-theme] .qc-search-mark {
   display: inline-flex;
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
-  width: 18px;
-  height: 18px;
-  margin: 1px;
+  width: 24px;
+  height: 24px;
   color: var(--qc-text-muted);
   font-size: var(--qc-text-fontSizeMicro);
   font-weight: 700;
@@ -7015,102 +7029,6 @@
   object-fit: contain;
 }
 
-/* A SEARCH and a PICK list their markets as a table, in a dialog or in a card a page holds: the mark, the ticker on a column as wide as the widest ticker
- * the list holds, the description in the room that is left, and the source. Each row is a subgrid of
- * the list, so the columns line up down every row. The list opens 8px under the class strip. */
-[data-qc-theme] .qc-search-table .qc-search-list {
-  display: grid;
-  grid-template-columns: 52px max-content minmax(0, 1fr) max-content;
-  align-content: start;
-  margin-top: 8px;
-  padding: 1px 0 6px;
-}
-
-[data-qc-theme] .qc-search-table .qc-search-list > :not(.qc-search-row) {
-  grid-column: 1 / -1;
-}
-
-[data-qc-theme] .qc-search-table .qc-search-row {
-  display: grid;
-  grid-column: 1 / -1;
-  grid-template-columns: subgrid;
-  height: 40px;
-}
-
-/* The ticker and its description stand in the row's own columns rather than in a box of their own,
- * and the source cell's wrapper steps aside the same way, so the kind reads ahead of the venue on
- * the row's one line. */
-[data-qc-theme] .qc-search-table .qc-search-text,
-[data-qc-theme] .qc-search-table .qc-search-source-text {
-  display: contents;
-}
-
-[data-qc-theme] .qc-search-table .qc-search-symbol {
-  padding-inline-end: 24px;
-}
-
-[data-qc-theme] .qc-search-table .qc-search-name {
-  padding-inline-end: 24px;
-  color: var(--qc-text-primary);
-  font-size: var(--qc-text-fontSizeBase);
-}
-
-[data-qc-theme] .qc-search-table .qc-search-kind {
-  order: -1;
-  margin-inline-end: 8px;
-  line-height: 21px;
-}
-
-[data-qc-theme] .qc-search-table .qc-search-source-name {
-  margin-inline-end: 8px;
-}
-
-/* COMPARE stacks the ticker over its description and the source over the kind, on 52px rows, and
- * keeps 6px of air at the list's two ends. */
-[data-qc-theme] .qc-search-dialog--compare .qc-search-row {
-  height: 52px;
-}
-
-[data-qc-theme] .qc-search-dialog--compare .qc-search-list > .qc-search-row:first-child {
-  margin-top: 6px;
-}
-
-[data-qc-theme] .qc-search-dialog--compare .qc-search-list > .qc-search-row:last-child {
-  margin-bottom: 6px;
-}
-
-[data-qc-theme] .qc-search-dialog--compare .qc-search-text {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  justify-content: center;
-  min-width: 0;
-  padding-inline-end: 16px;
-}
-
-[data-qc-theme] .qc-search-dialog--compare .qc-search-name {
-  color: var(--qc-text-muted);
-  font-size: calc(var(--qc-text-fontSizeBase) - 2px);
-  line-height: 17px;
-}
-
-/* The venue over its kind, with 4px of air above the pair so the two lines sit level with the
- * ticker and description beside them. */
-[data-qc-theme] .qc-search-dialog--compare .qc-search-source-text {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: flex-end;
-  padding-top: 4px;
-}
-
-[data-qc-theme] .qc-search-dialog--compare .qc-search-kind {
-  line-height: 17px;
-}
-
-[data-qc-theme] .qc-search-dialog--compare .qc-search-mark {
-  margin-inline-start: 9px;
-}
-
 /* A row already on the chart carries a check where its source would stand. */
 [data-qc-theme] .qc-search-added {
   display: inline-flex;
@@ -7119,7 +7037,7 @@
   justify-content: center;
   width: 28px;
   height: 28px;
-  margin-inline-end: 16px;
+  margin-inline-start: 24px;
   color: var(--qc-text-muted);
 }
 
@@ -7129,7 +7047,7 @@
   display: none;
   flex: 0 0 auto;
   gap: 8px;
-  padding-inline-end: 20px;
+  padding-inline-start: 24px;
 }
 
 [data-qc-theme] .qc-search-dialog--compare .qc-search-row:hover .qc-search-actions,

package/dist/{symbols-CHJGWrf-.d.ts → symbols-CCYUK8MU.d.ts}

@@ -79,13 +79,17 @@ interface FeedBar {
 }
 /** A symbol-search result row. `exchange` names the venue the market lists on. `dataSource` names
  *  where the market's data comes from, and a row names one only when that source publishes the
- *  symbol's data. The row's source cell shows the venue, or the data source for a row with none. */
+ *  symbol's data. The row's source mark shows the venue, or the data source for a row with none. */
 interface SymbolRow {
     symbol: string;
     name: string;
     exchange: string;
     type: string;
     dataSource?: string | null;
+    /** The ticker a viewer reads the market by, where the feed writes one apart from its symbol:
+     *  `NVDA` for a symbol written `EXCH:BOOK:NVDA`. A row without it reads the symbol's own ticker,
+     *  its exchange prefix dropped. `SymbolInfo.ticker` states the same for the charted symbol. */
+    ticker?: string;
     /** What the market is priced in, when the feed knows it here. A PAIR market writes itself as
      *  `BASE / QUOTE` wherever it is named, and a ticker alone cannot say what the quote is; a row
      *  without it keeps the name the feed sent instead. `resolve()` states the same fact for the

package/dist/symbols.d.ts

@@ -1,2 +1,2 @@
-export { n as SymbolNames, q as bareTicker, s as symbolNames } from './symbols-CHJGWrf-.js';
+export { n as SymbolNames, q as bareTicker, s as symbolNames } from './symbols-CCYUK8MU.js';
 import './symbology-D3SLclrU.js';

package/dist/symbols.js

@@ -1,7 +1,7 @@
 import {
   bareTicker,
   symbolNames
-} from "./chunk-GFQQSY47.js";
+} from "./chunk-U4W26DXU.js";
 export {
   bareTicker,
   symbolNames

package/package.json

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