@trdrs/quickcharts 5.5.0 → 5.6.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 5.6.0
+
+The currency and unit box holds its words in a 24px row inside its outline, at the row's start, 3px in from each end on a radius of 3. With `scaleUnitMenu` the row ends in a 7 by 5 caret and lights under the pointer, and `ScaleUnitMenuRequest.expanded(open)` lets the host say its menu stands open, which keeps the row lit and turns the caret up. The auto-scale and logarithmic buttons stand 4px apart, the pair centred on the scale.
+
 ## 5.5.0
 
 The indicator picker's rail offers Favorites only while something is starred, and keeps it while it is open. The author and count columns stand only while a listed row fills them, so a list of starred built-ins reads as stars and names. Items a host answers for the `builtin` collection list in Technicals after the shipped definitions, under the host's own kinds. `IndicatorPickerCollection.empty` gives a collection an empty state: a title, text, a mark drawn 120px square from the 28-unit glyph grid, and one action that reaches `act` with a `collection` target. `IndicatorPickerEmpty` is exported. `chart.indicators.open` takes a `kind` beside `collection` and opens with that kind's filter pressed.

package/README.md

@@ -2462,7 +2462,9 @@ the same in both modes, in `CHART_FACTORY_COLORS`. The sections and what stands
   `scaleUnitMenu` option the box is a button titled with the setting's name: a press hands your
   handler a `ScaleUnitMenuRequest` (the chart, the box's place in viewport pixels, and whether the
   keyboard pressed it) so your own currency and unit menu opens against it, and the box stays
-  while the pointer rests on it. Without the option the box is a label that takes no pointer, so
+  while the pointer rests on it. Call the request's `expanded(true)` as your menu opens and
+  `expanded(false)` as it closes: while it stands open the box stays lit and the caret at the end
+  of its row points up. Without the option the box is a label that takes no pointer, so
   the scale under it still drags. The price-to-bar
   ratio lock (`lockPriceToBarRatio`) holds the price one bar's width spans: engaging it with no
   `priceToBarRatio` of its own takes the ratio on screen into that leaf, the scale stops framing

package/dist/feature-manifest.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.5.0",
+  "version": "5.6.0",
   "styles": [
     {
       "id": "candles",

package/dist/index.d.ts

@@ -5608,6 +5608,9 @@ interface ScaleUnitMenuRequest {
     };
     /** Whether the box was pressed from the keyboard, so the menu takes the focus. */
     readonly keyboard: boolean;
+    /** Say whether the menu stands open: `true` as it opens and `false` as it closes. While it is open
+     *  the box stays lit and its caret points up. */
+    expanded(open: boolean): void;
 }
 /** Everything needed to construct a widget. `container` and `datafeed` are the two hard
  *  requirements; every other field has a working default. */

package/dist/index.js

@@ -10205,6 +10205,9 @@ var ICONS = {
   /** The pickers' wide caret, on its native 16 by 8 grid: the trigger arrow, which
    *  renders half size beside a picker's text. */
   menuArrowWide: { viewBox: "0 0 16 8", body: solid(polyline([[0.6, 0.7], [8, 7], [15.4, 0.7]], 1.8)) },
+  /** The currency and unit box's caret, on its native 7 by 5 grid: a 1.2 stroke bent down at its
+   *  middle, drawn at its own size after the box's words. */
+  scaleUnitArrow: { viewBox: "0 0 7 5", body: '<path d="M1 1.5l2.5 2 2.5-2" stroke="currentColor" stroke-width="1.2"/>' },
   // Hairline weight: these two sit beside a label rather than alone in a 38px cell. A tray taking an
   // arrow, and two sheets, the back one broken where the front lies over it.
   download: { viewBox: "0 0 28 28", body: solid(bend([[6.5, 17], [6.5, 22.5], [22.5, 22.5], [22.5, 17]], 1) + line2([14.5, 6], [14.5, 18]) + polyline([[10.5, 14.5], [14.5, 18.5], [18.5, 14.5]])) },
@@ -18195,7 +18198,7 @@ var CONTROL_ICONS = byMeaning({
   image: [ICONS.camera],
   download: [ICONS.download],
   copy: [ICONS.copy],
-  caret: [ICONS.menuArrowWide],
+  caret: [ICONS.menuArrowWide, ICONS.scaleUnitArrow],
   info: [ICONS.info],
   // The legend.
   visible: [ICONS.legendEye],
@@ -20435,7 +20438,7 @@ function mountNavControls(deps) {
 }
 
 // src/ui/chrome/scaleControls.ts
-var BUTTON = { width: 20, height: 22, gap: 15, foot: 4 };
+var BUTTON = { width: 20, height: 22, gap: 4, foot: 4 };
 var UNIT_BOX = { inset: 4 };
 function mountScaleControls(deps) {
   const t = deps.i18n.t;
@@ -20445,12 +20448,15 @@ function mountScaleControls(deps) {
   modes.append(auto, log);
   stopPointer(modes);
   const door = deps.openUnitMenu;
-  const unit = door ? h("button", { type: "button", class: "qc-scale-unit", "data-role": "scale-unit" }) : h("div", { class: "qc-scale-unit", "data-role": "scale-unit" });
+  const unit = door ? h("button", { type: "button", class: "qc-scale-unit", "data-role": "scale-unit", "aria-haspopup": "menu", "aria-expanded": "false" }) : h("div", { class: "qc-scale-unit", "data-role": "scale-unit" });
+  const unitText = h("span", {});
+  unit.append(h("span", { class: "qc-scale-unit-row" }, unitText, door ? deps.icons.glyph(ICONS.scaleUnitArrow, { size: 7, height: 5, className: "qc-scale-unit-arrow" }) : null));
   if (door) {
     stopPointer(unit);
+    const expanded = (open2) => unit.setAttribute("aria-expanded", String(open2 === true));
     unit.addEventListener("click", (event) => {
       const box2 = unit.getBoundingClientRect();
-      door({ left: box2.left, top: box2.top, right: box2.right, bottom: box2.bottom }, event.detail === 0);
+      door({ left: box2.left, top: box2.top, right: box2.right, bottom: box2.bottom }, event.detail === 0, expanded);
     });
   }
   deps.chrome.appendChild(unit);
@@ -20569,7 +20575,7 @@ function mountScaleControls(deps) {
     const currency = named2?.currency?.trim() ?? "";
     const unitId = named2?.unit?.trim() ?? "";
     const text2 = currency && unitId ? t("chrome.currencyAndUnit", { currency, unit: unitId }) : currency || unitId;
-    unit.textContent = text2;
+    unitText.textContent = text2;
     unit.dataset.qcVisibility = visibility;
     unit.hidden = text2 === "" || visibility === "never" || visibility === "hover" && !overScale && !overControls;
     unit.style.top = `${Math.round(box2.top + UNIT_BOX.inset)}px`;
@@ -22766,6 +22772,7 @@ function createChartInstance(deps) {
     chrome: chrome2,
     gestures,
     i18n,
+    icons: deps.icons,
     box: priceScaleBox,
     modeButtons: () => eff.priceScale.scaleModeButtons,
     unitBox: () => eff.priceScale.currencyAndUnit,
@@ -22782,7 +22789,7 @@ function createChartInstance(deps) {
     openPriceMenu: (anchor2, keyboard) => {
       menu2?.raisePriceMenu(anchor2, keyboard);
     },
-    ...deps.scaleUnitMenu ? { openUnitMenu: (anchor2, keyboard) => deps.scaleUnitMenu?.({ chart: handle, anchor: anchor2, keyboard }) } : {}
+    ...deps.scaleUnitMenu ? { openUnitMenu: (anchor2, keyboard, expanded) => deps.scaleUnitMenu?.({ chart: handle, anchor: anchor2, keyboard, expanded }) } : {}
   }) : null;
   scalePlus = scaleControls && menu2 ? attachScalePlus({
     chart,