@trdrs/quickcharts 1.2.0 → 2.0.0

package/dist/quickcharts.css

@@ -1,14 +1,14 @@
 /* Quick Charts stylesheet.
  * Generated from the typed theme source. Do not edit by hand.
  * Every rule is scoped to [data-qc-theme], the widget root element, and sits in a cascade
- * layer: the built-in palettes in trdrs.tokens, every recipe in trdrs.chart.
+ * layer: the built-in palettes in quickcharts.tokens, every recipe in quickcharts.chart.
  * The custom-property names below are private implementation, not API. The supported class
  * names are listed in the theme manifest under hooks; every other class is private.
  */
 
-@layer trdrs.tokens, trdrs.chart;
+@layer quickcharts.tokens, quickcharts.chart;
 
-@layer trdrs.tokens {
+@layer quickcharts.tokens {
 [data-qc-theme="light"] {
   --qc-canvas-background: #ffffff;
   --qc-canvas-paneBorder: #ebebeb;
@@ -39,6 +39,14 @@
   --qc-illustration-ink: #1e222d;
   --qc-motion-durationBase: 150ms;
   --qc-motion-durationFast: 90ms;
+  --qc-motion-durationModerate: 250ms;
+  --qc-motion-durationSlow: 350ms;
+  --qc-motion-durationSlower: 500ms;
+  --qc-motion-easingLinear: linear;
+  --qc-motion-easingOut: ease-out;
+  --qc-motion-easingSpring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --qc-motion-easingStandard: ease;
+  --qc-motion-scaleEnter: 0.97;
   --qc-overlay-scrim: rgba(0, 0, 0, 0.35);
   --qc-overlay-separator: #ebebeb;
   --qc-overlay-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
@@ -122,6 +130,14 @@
   --qc-illustration-ink: #d1d4dc;
   --qc-motion-durationBase: 150ms;
   --qc-motion-durationFast: 90ms;
+  --qc-motion-durationModerate: 250ms;
+  --qc-motion-durationSlow: 350ms;
+  --qc-motion-durationSlower: 500ms;
+  --qc-motion-easingLinear: linear;
+  --qc-motion-easingOut: ease-out;
+  --qc-motion-easingSpring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  --qc-motion-easingStandard: ease;
+  --qc-motion-scaleEnter: 0.97;
   --qc-overlay-scrim: rgba(0, 0, 0, 0.5);
   --qc-overlay-separator: #4a4a4a;
   --qc-overlay-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
@@ -174,9 +190,19 @@
   --qc-text-primary: #dbdbdb;
   --qc-text-secondary: #b8b8b8;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  [data-qc-theme] {
+    --qc-motion-durationBase: 0ms !important;
+    --qc-motion-durationFast: 0ms !important;
+    --qc-motion-durationModerate: 0ms !important;
+    --qc-motion-durationSlow: 0ms !important;
+    --qc-motion-durationSlower: 0ms !important;
+  }
+}
 }
 
-@layer trdrs.chart {
+@layer quickcharts.chart {
 /* Quick Charts component recipes.
  *
  * Every rule is scoped to the widget's own root element, which carries `data-qc-theme`. Nothing
@@ -249,7 +275,7 @@
   border: 1px solid var(--qc-chrome-border);
   border-radius: var(--qc-chrome-radius);
   cursor: pointer;
-  transition: background-color var(--qc-motion-durationFast) linear, border-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear), border-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-button:hover {
@@ -260,8 +286,8 @@
   background: var(--qc-state-pressed);
 }
 
-/* A held button wears the neutral held fill in the primary ink, the held state the toolbars and the
- * rail show too. */
+/* A held button wears the neutral held fill in the primary ink, the held state the top bar, the
+ * bottom bar and the drawing toolbar show too. */
 [data-qc-theme] .qc-button[aria-pressed='true'],
 [data-qc-theme] .qc-button[data-qc-active='true'] {
   color: var(--qc-text-primary);
@@ -375,7 +401,7 @@
   border: 0;
   border-radius: var(--qc-chrome-radius);
   cursor: pointer;
-  transition: background-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-menu-row:hover {
@@ -430,8 +456,8 @@
   font-variant-numeric: tabular-nums;
 }
 
-/* A hidden study keeps its ink and stands the WHOLE row back, controls included, so the row reads
- * as switched off rather than as a different kind of row. */
+/* A hidden indicator keeps its ink and stands the WHOLE row back, controls included, so the row
+ * reads as switched off rather than as a different kind of row. */
 [data-qc-theme] .qc-legend-row[data-qc-hidden='true'] {
   opacity: 0.5;
 }
@@ -544,8 +570,8 @@
   display: contents;
 }
 
-/* An external rail's flyout stands here, over anything the page stacks beside the widget and under
- * the widget's own dialogs. */
+/* An external drawing toolbar's flyout stands here, over anything the page stacks beside the widget
+ * and under the widget's own dialogs. */
 [data-qc-theme].qc-layer > .qc-drawing-popover {
   position: fixed;
   z-index: 2147483001;
@@ -651,7 +677,7 @@
 }
 
 /* The market and its facts stand as one 24px band, in the legend's ink at a size up from the
- * chrome's: the mark, the name 4px past it, then the interval and the venue, each in a 12px cell
+ * chrome's: the mark, the name 4px past it, then the timeframe and the venue, each in a 12px cell
  * that carries its separating dot. The reading beside it wraps whole to its own line, so the two
  * are separate hover targets and only the band under the pointer takes the chip. */
 [data-qc-theme] .qc-legend-identity {
@@ -721,7 +747,8 @@
   background: var(--qc-state-pressed);
 }
 
-/* The interval and the venue, each behind its own separator dot, in the name's own ink and size. */
+/* The timeframe and the venue, each behind its own separator dot, in the name's own ink and
+ * size. */
 [data-qc-theme] .qc-legend-fact {
   white-space: nowrap;
 }
@@ -784,8 +811,8 @@
 
 /* Step 3: a slim pane sheds the venue and its separator, in the header and in every market row
  * under it — one answer for the whole legend, because a row that kept its venue while the header
- * above it dropped one would read as two different markets. The interval stays, because one chart
- * of a layout has nowhere else to say what interval it is on. */
+ * above it dropped one would read as two different markets. The timeframe stays, because one chart
+ * of a layout has nowhere else to say what timeframe it is on. */
 [data-qc-theme] .qc-legend[data-qc-slim='true'] [data-role='legend-exchange'],
 [data-qc-theme] .qc-legend[data-qc-slim='true'] [data-role='legend-exchange-sep'],
 [data-qc-theme] .qc-legend[data-qc-slim='true'] .qc-legend-row-venue {
@@ -857,7 +884,7 @@
   opacity: 1;
 }
 
-/* A hidden study says so whether or not the pointer is on it, so its eye stands on its own. */
+/* A hidden indicator says so whether or not the pointer is on it, so its eye stands on its own. */
 [data-qc-theme] .qc-legend-row[data-qc-hidden='true'] .qc-legend-eye {
   opacity: 1;
 }
@@ -876,8 +903,8 @@
   margin-inline: -4px;
   padding-inline: 4px;
   color: var(--qc-text-primary);
-  /* The study rows are their own stack over the plot, not part of the header band, so they take the
-   * ordinary weight rather than the header's. */
+  /* The indicator rows are their own stack over the plot, not part of the header band, so they take
+   * the ordinary weight rather than the header's. */
   font-weight: 400;
   border-radius: 4px;
   pointer-events: auto;
@@ -971,7 +998,7 @@
   height: 14px;
 }
 
-/* A compare's own name is a door to symbol search, so it is a button. It reads as text and takes
+/* A comparison's own name is a door to symbol search, so it is a button. It reads as text and takes
  * the same wash box the market's name does, never a rule under the words. */
 [data-qc-theme] .qc-legend-title {
   width: auto;
@@ -991,7 +1018,7 @@
   height: 18px;
 }
 
-/* The rows' own toggler, standing under the stack. It carries the study/compare rows away and
+/* The rows' own toggler, standing under the stack. It carries the indicator/compare rows away and
  * leaves the identity and the reading in place. Its box is set here, AFTER the shared action
  * recipe, because it is the one action that is not a row control and does not take that geometry. */
 [data-qc-theme] .qc-legend-collapse {
@@ -1038,7 +1065,7 @@
 /* The drawing toolbar, the selected drawing's surfaces and their fields are recipes of their own
  * under styles/components/drawings-*.css, which the build concatenates after this file. */
 
-/* Level menu ----------------------------------------------------------------------------------- */
+/* Context menu --------------------------------------------------------------------------------- */
 
 [data-qc-theme] .qc-menu-backdrop {
   position: fixed;
@@ -1058,7 +1085,7 @@
   pointer-events: auto;
 }
 
-/* The level menu's rows restate the row rhythm: 32px tall, square-cornered and running edge to
+/* The context menu's rows restate the row rhythm: 32px tall, square-cornered and running edge to
  * edge of the box (the surface's clip rounds them off), the glyph 6px from the label and 20px of
  * room at the end for a chord. */
 [data-qc-theme] .qc-menu .qc-menu-row {
@@ -1139,13 +1166,8 @@
 
 /* Accessibility --------------------------------------------------------------------------------- */
 
-@media (prefers-reduced-motion: reduce) {
-  [data-qc-theme] * {
-    transition-duration: 1ms !important;
-    animation-duration: 1ms !important;
-    animation-iteration-count: 1 !important;
-  }
-}
+/* Every transition reads a motion duration role, and the generated tokens resolve each of them to
+ * zero under a reduced-motion preference, so no recipe here repeats that rule. */
 
 @media (forced-colors: active) {
   [data-qc-theme] .qc-surface,
@@ -1219,6 +1241,17 @@
   font-variant-numeric: tabular-nums lining-nums;
 }
 
+/* With one zone offered the clock stands alone, in the trigger's own cell and inset. */
+[data-qc-theme] .qc-bottombar .qc-tz-clock {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 38px;
+  padding: 0 6px;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
 [data-qc-theme] .qc-clock {
   font-variant-numeric: tabular-nums;
 }
@@ -1304,7 +1337,7 @@
   transform: translateX(-50%);
   opacity: 0;
   pointer-events: auto;
-  transition: opacity var(--qc-motion-durationBase) linear;
+  transition: opacity var(--qc-motion-durationBase) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-nav[data-qc-near],
@@ -1357,11 +1390,11 @@
  * ancestor with a transform, a filter or containment changes nothing: a panel is positioned in the
  * root's own coordinates.
  *
- * The chrome's stacking ladder, all inside the root: legend and rail 3, navigation 4,
+ * The chrome's stacking ladder, all inside the root: legend and drawing toolbar 3, navigation 4,
  * the chart chrome layer 5, notices 6, the overlay layer 20, a menu panel 21, a dialog scrim 22.
  * The replay transport takes no rung: it is an in-flow row of the root's column, not a float.
  * The chart chrome layer is a stacking context of its own, and the drawing surfaces inside it
- * keep their own rungs: the toolbar on the rail's 3, the floating bars 7, the inline text
+ * keep their own rungs: the drawing toolbar on 3, the floating bars 7, the inline text
  * editor 8, a flyout or palette 9, a drawing dialog's scrim 10.
  * A host that must stack something above the widget gives its own element a stacking context
  * above the root; nothing here reaches the top of the integer range. */
@@ -1438,7 +1471,7 @@
   inset: 2px;
   z-index: -1;
   border-radius: var(--qc-chrome-radius);
-  transition: background-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-toolbar-button:hover {
@@ -1450,8 +1483,8 @@
   background: var(--qc-state-hover);
 }
 
-/* A chosen interval or a held toggle takes the pressed fill, a step past hover; a door whose menu is
- * open fills its whole cell, square, in the hover fill. */
+/* A chosen timeframe or a held toggle takes the pressed fill, a step past hover; a door whose menu
+ * is open fills its whole cell, square, in the hover fill. */
 [data-qc-theme] .qc-toolbar-button[aria-pressed='true'],
 [data-qc-theme] .qc-toolbar-button[aria-expanded='true'],
 [data-qc-theme] .qc-toolbar-button[data-qc-active='true'] {
@@ -1475,7 +1508,7 @@
 }
 
 /* A HELD MODE is not a chosen option. A chip chosen among its siblings takes the quiet pressed
- * wash above; a mode the chart is IN until the trader leaves it says so the way this product says
+ * wash above; a mode the chart is IN until the viewer leaves it says so the way this product says
  * "on" everywhere else, in the emphasis fill with the ink cut out of it. */
 [data-qc-theme] .qc-toolbar-button[data-qc-mode='held'][aria-pressed='true'] {
   color: var(--qc-text-inverse);
@@ -1499,11 +1532,11 @@
  * and neither bends the other, and each answers to its OWN button: a caret nested inside some other
  * open thing is not the thing that opened. */
 [data-qc-theme] .qc-caret {
-  transition: translate 350ms ease;
+  transition: translate var(--qc-motion-durationSlow) var(--qc-motion-easingStandard);
 }
 
 [data-qc-theme] .qc-caret > svg {
-  transition: rotate 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: rotate var(--qc-motion-durationSlow) var(--qc-motion-easingSpring);
 }
 
 [data-qc-theme] .qc-toolbar-button:not([aria-expanded='true']):hover > .qc-caret {
@@ -1626,7 +1659,7 @@
   height: 14px;
   background: var(--qc-control-mark);
   border-radius: 50%;
-  transition: inset-inline-start 250ms ease-out;
+  transition: inset-inline-start var(--qc-motion-durationModerate) var(--qc-motion-easingOut);
 }
 
 [data-qc-theme] .qc-switch[aria-checked='true'] .qc-switch-knob,
@@ -1650,7 +1683,7 @@
   border: 1px solid var(--qc-control-on);
   border-radius: 3px;
   cursor: pointer;
-  transition: background-color 350ms, border-color 350ms;
+  transition: background-color var(--qc-motion-durationSlow) var(--qc-motion-easingStandard), border-color var(--qc-motion-durationSlow) var(--qc-motion-easingStandard);
 }
 
 [data-qc-theme] .qc-checkbox:checked {
@@ -1970,7 +2003,7 @@
 
 /* The settings field primitives: rows, checkbox rows, selects, number fields with their steppers,
  * swatches and the palette, the custom color panel, the opacity slider, line-end pickers, the
- * dialog tab strip and the interval-visibility rows. Every color a control paints with is either
+ * dialog tab strip and the timeframe-visibility rows. Every color a control paints with is either
  * a generated custom property or the drawing's own value, carried in `--qcd-swatch`. */
 
 [data-qc-theme] .qc-drawing-row {
@@ -2413,7 +2446,7 @@
 }
 
 /* The readout is a FIELD beside the track: outlined rather than washed, because it is a number a
- * trader types over and not a chip the panel is showing them. */
+ * viewer types over and not a chip the panel is showing them. */
 [data-qc-theme] .qc-drawing-opacity-field {
   position: relative;
   flex: 0 0 auto;
@@ -2755,7 +2788,7 @@
   border-radius: var(--qc-chrome-radius);
   content: '';
   pointer-events: none;
-  transition: background-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-drawing-bar-wide {
@@ -2817,7 +2850,7 @@
 }
 
 /* The bar's menus: a 4px-padded column of 34px rows, sized by content, or 240px wide for the
- * templates, More and interval lists, or 176px for the stacking moves. */
+ * templates, More and timeframe lists, or 176px for the stacking moves. */
 [data-qc-theme] .qc-drawing-bar-menu {
   min-width: 0;
   width: max-content;
@@ -2973,7 +3006,7 @@
 
 [data-qc-theme] .qc-drawing-caret {
   display: flex;
-  transition: transform var(--qc-motion-durationFast) linear;
+  transition: transform var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-drawing-template-button[aria-expanded='true'] .qc-drawing-caret {
@@ -2996,12 +3029,12 @@
   white-space: nowrap;
 }
 
-/* The drawing toolbar: the rail down the chart's inline-start edge, its split cells, its flyouts
+/* The drawing toolbar: the column down the chart's inline-start edge, its split cells, its flyouts
  * and menus, and the favorites bar. Every rule is scoped to the widget root like the rest of the
  * package stylesheet, every value comes from a generated custom property, and geometry is stated
- * with logical properties so the rail flips with the reading direction.
+ * with logical properties so the toolbar flips with the reading direction.
  *
- * The chrome layer is inert. The rail is a surface the pointer must stop at, so it opts in as a
+ * The chrome layer is inert. The toolbar is a surface the pointer must stop at, so it opts in as a
  * whole; the gaps between its buttons must not let a drag through to the canvas underneath. */
 
 [data-qc-theme].qc-drawing-toolbar-host {
@@ -3030,7 +3063,7 @@
   pointer-events: auto;
 }
 
-/* The chart and its overlays share a reserved content box. Only the rail reaches back into the
+/* The chart and its overlays share a reserved content box. Only the toolbar reaches back into the
  * leading column, so axis labels and drawing coordinates never pass underneath its buttons. */
 [data-qc-theme] .qc-chrome[data-qc-drawing-toolbar='true'] .qc-drawing-toolbar {
   inset-inline-start: -52px;
@@ -3070,7 +3103,7 @@
   width: 100%;
 }
 
-[data-qc-theme] .qc-drawing-rail-button {
+[data-qc-theme] .qc-drawing-toolbar-button {
   position: relative;
   z-index: 0;
   display: flex;
@@ -3085,8 +3118,8 @@
   border-radius: var(--qc-chrome-radius);
 }
 
-/* Keep the full rail as the hit area; the inset square is only its visual feedback. */
-[data-qc-theme] .qc-drawing-rail-button::before {
+/* Keep the full toolbar width as the hit area; the inset square is only its visual feedback. */
+[data-qc-theme] .qc-drawing-toolbar-button::before {
   position: absolute;
   z-index: -1;
   inset-block-start: 50%;
@@ -3097,67 +3130,67 @@
   content: '';
   pointer-events: none;
   transform: translate(-50%, -50%);
-  transition: background-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
-[data-qc-theme] .qc-drawing-rail-button:hover,
-[data-qc-theme] .qc-drawing-rail-button:active,
-[data-qc-theme] .qc-drawing-rail-button:focus-visible {
+[data-qc-theme] .qc-drawing-toolbar-button:hover,
+[data-qc-theme] .qc-drawing-toolbar-button:active,
+[data-qc-theme] .qc-drawing-toolbar-button:focus-visible {
   color: var(--qc-text-primary);
   background: none;
 }
 
 /* The tool's inset square and the arrow's strip share the hover fill, so where they meet no seam
  * forms. */
-[data-qc-theme] .qc-drawing-rail-button:hover::before,
-[data-qc-theme] .qc-drawing-rail-button:focus-visible::before,
-[data-qc-theme] .qc-drawing-rail-button:active::before {
+[data-qc-theme] .qc-drawing-toolbar-button:hover::before,
+[data-qc-theme] .qc-drawing-toolbar-button:focus-visible::before,
+[data-qc-theme] .qc-drawing-toolbar-button:active::before {
   background: var(--qc-state-hover);
 }
 
-[data-qc-theme] .qc-drawing-rail-button[data-qc-active='true'] {
+[data-qc-theme] .qc-drawing-toolbar-button[data-qc-active='true'] {
   color: var(--qc-text-primary);
   background: none;
 }
 
-/* The armed tool wears a NEUTRAL inset wash and the primary ink, the pinned rail recipe. The
- * accent-tinted selected role belongs to a chosen row, not to a tool the rail is holding. */
-[data-qc-theme] .qc-drawing-rail-button[data-qc-active='true']::before {
+/* The armed tool wears a NEUTRAL inset wash and the primary ink, the pinned toolbar recipe. The
+ * accent-tinted selected role belongs to a chosen row, not to a tool the toolbar is holding. */
+[data-qc-theme] .qc-drawing-toolbar-button[data-qc-active='true']::before {
   background: var(--qc-state-pressed);
 }
 
-[data-qc-theme] .qc-drawing-rail-button[data-qc-active='true']:hover::before {
+[data-qc-theme] .qc-drawing-toolbar-button[data-qc-active='true']:hover::before {
   background: var(--qc-state-pressedHover);
 }
 
-/* A mode the rail holds, staying in drawing mode or showing the favorites bar, inverts: the on fill
- * behind the inverse ink, a step apart under the pointer. */
-[data-qc-theme] .qc-drawing-rail-mode[data-qc-active='true'] {
+/* A mode the toolbar holds, staying in drawing mode or showing the favorites bar, inverts: the on
+ * fill behind the inverse ink, a step apart under the pointer. */
+[data-qc-theme] .qc-drawing-toolbar-mode[data-qc-active='true'] {
   color: var(--qc-text-inverse);
 }
 
-[data-qc-theme] .qc-drawing-rail-mode[data-qc-active='true']::before {
+[data-qc-theme] .qc-drawing-toolbar-mode[data-qc-active='true']::before {
   background: var(--qc-control-on);
 }
 
-[data-qc-theme] .qc-drawing-rail-mode[data-qc-active='true']:hover::before {
+[data-qc-theme] .qc-drawing-toolbar-mode[data-qc-active='true']:hover::before {
   background: var(--qc-control-onHover);
 }
 
-[data-qc-theme] .qc-drawing-rail-button:focus-visible {
+[data-qc-theme] .qc-drawing-toolbar-button:focus-visible {
   outline-offset: -3px;
 }
 
-[data-qc-theme] .qc-drawing-rail-button[disabled] {
+[data-qc-theme] .qc-drawing-toolbar-button[disabled] {
   color: var(--qc-text-disabled);
   background: none;
 }
 
-[data-qc-theme] .qc-drawing-rail-button[disabled]::before {
+[data-qc-theme] .qc-drawing-toolbar-button[disabled]::before {
   background: none;
 }
 
-[data-qc-theme] .qc-drawing-rail-arrow {
+[data-qc-theme] .qc-drawing-toolbar-arrow {
   position: absolute;
   inset-block: 2px;
   inset-inline-end: 0;
@@ -3170,51 +3203,51 @@
   color: var(--qc-chrome-caret);
   background: none;
   border: 0;
-  /* Rounded on the inboard side only. The strip ends flush against the rail's own edge, so a
+  /* Rounded on the inboard side only. The strip ends flush against the toolbar's own edge, so a
    * radius there would round a corner that has nothing to round away from. */
   border-start-start-radius: 4px;
   border-end-start-radius: 4px;
   border-start-end-radius: 0;
   border-end-end-radius: 0;
   opacity: 0;
-  transition: opacity var(--qc-motion-durationFast) linear;
+  transition: opacity var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 /* The chevron turns to face the panel: pointing out at where the flyout will appear while closed,
- * back at the rail once it is open. */
-[data-qc-theme] .qc-drawing-rail-arrow svg {
-  transition: transform 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
+ * back at the toolbar once it is open. */
+[data-qc-theme] .qc-drawing-toolbar-arrow svg {
+  transition: transform var(--qc-motion-durationSlower) var(--qc-motion-easingSpring);
 }
 
-[data-qc-theme] .qc-drawing-rail-arrow[aria-expanded='true'] svg {
+[data-qc-theme] .qc-drawing-toolbar-arrow[aria-expanded='true'] svg {
   transform: rotate(180deg);
 }
 
-[data-qc-theme] [dir='rtl'] .qc-drawing-rail-arrow svg,
-[data-qc-theme][dir='rtl'] .qc-drawing-rail-arrow svg {
+[data-qc-theme] [dir='rtl'] .qc-drawing-toolbar-arrow svg,
+[data-qc-theme][dir='rtl'] .qc-drawing-toolbar-arrow svg {
   transform: scaleX(-1);
 }
 
-[data-qc-theme] [dir='rtl'] .qc-drawing-rail-arrow[aria-expanded='true'] svg,
-[data-qc-theme][dir='rtl'] .qc-drawing-rail-arrow[aria-expanded='true'] svg {
+[data-qc-theme] [dir='rtl'] .qc-drawing-toolbar-arrow[aria-expanded='true'] svg,
+[data-qc-theme][dir='rtl'] .qc-drawing-toolbar-arrow[aria-expanded='true'] svg {
   transform: scaleX(-1) rotate(180deg);
 }
 
-[data-qc-theme] .qc-drawing-cell:hover .qc-drawing-rail-arrow,
-[data-qc-theme] .qc-drawing-rail-arrow:focus-visible,
-[data-qc-theme] .qc-drawing-rail-arrow[aria-expanded='true'] {
+[data-qc-theme] .qc-drawing-cell:hover .qc-drawing-toolbar-arrow,
+[data-qc-theme] .qc-drawing-toolbar-arrow:focus-visible,
+[data-qc-theme] .qc-drawing-toolbar-arrow[aria-expanded='true'] {
   opacity: 1;
 }
 
 /* The arrow keeps its caret ink; its strip takes the hover fill under the pointer and while its
  * flyout is open. */
-[data-qc-theme] .qc-drawing-rail-arrow:hover,
-[data-qc-theme] .qc-drawing-rail-arrow[aria-expanded='true'] {
+[data-qc-theme] .qc-drawing-toolbar-arrow:hover,
+[data-qc-theme] .qc-drawing-toolbar-arrow[aria-expanded='true'] {
   background: var(--qc-state-hover);
 }
 
-/* Three rules, three recipes. The RAIL's spans 36px of the rail with 6px above and below. A tool
- * flyout's section rule and a menu's rule span the content area inside the panel's 6px side
+/* Three rules, three recipes. The TOOLBAR's spans 36px of the toolbar with 6px above and below. A
+ * tool flyout's section rule and a menu's rule span the content area inside the panel's 6px side
  * padding, with 6px above and below. */
 [data-qc-theme] .qc-drawing-divider {
   flex: 0 0 auto;
@@ -3294,10 +3327,6 @@
   cursor: default;
 }
 
-[data-qc-theme] .qc-drawing-menu-note {
-  padding: 8px 12px;
-}
-
 [data-qc-theme] .qc-drawing-menu .qc-separator {
   margin: 6px 0;
 }
@@ -3360,7 +3389,7 @@
   border-radius: 4px;
   cursor: pointer;
   opacity: 0;
-  transition: opacity var(--qc-motion-durationFast) linear;
+  transition: opacity var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-drawing-flyout-row:hover .qc-drawing-star,
@@ -3457,7 +3486,7 @@
   border-radius: 2px;
   content: '';
   pointer-events: none;
-  transition: background-color var(--qc-motion-durationFast) linear;
+  transition: background-color var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-drawing-favorite:hover,
@@ -3507,14 +3536,14 @@
   cursor: grabbing;
 }
 
-/* Forced colors: a row or tab the trader has chosen reads as the system highlight, since the
+/* Forced colors: a row or tab the viewer has chosen reads as the system highlight, since the
  * accent fill it wears otherwise is discarded. */
 @media (forced-colors: active) {
-  [data-qc-theme] .qc-drawing-rail-button[data-qc-active='true'] {
+  [data-qc-theme] .qc-drawing-toolbar-button[data-qc-active='true'] {
     color: HighlightText;
   }
 
-  [data-qc-theme] .qc-drawing-rail-button[data-qc-active='true']::before,
+  [data-qc-theme] .qc-drawing-toolbar-button[data-qc-active='true']::before,
   [data-qc-theme] .qc-drawing-favorite[data-qc-active='true']::before {
     background: Highlight;
     forced-color-adjust: none;
@@ -3537,7 +3566,7 @@
   }
 }
 
-/* The historical indicator browser, rendered by the product with product tokens. */
+/* The indicator picker, drawn with the chart's own tokens. */
 [data-qc-theme] .qc-picker-dialog {
   height: 638px;
   max-height: min(85vh, calc(100% - 32px));
@@ -3805,7 +3834,7 @@
    So the rail lies DOWN. It becomes a row of chips above the list, scrolling sideways the way every
    other run of choices on a phone does, and the table sheds the columns a phone has no room to
    spend: the author and the count go, the star and the actions stay, and the name takes what is
-   left. The GROUP headings go with the rail's column — "Personal" over "Community" reads as
+   left. The GROUP headings go with the rail's column — "Saved" over "Shared" reads as
    structure in a list and as noise in a row, and the chips say what they are. */
 @media (max-width: 560px) {
   [data-qc-theme] .qc-picker-body {
@@ -4403,8 +4432,12 @@
   text-transform: uppercase;
 }
 
+/* The line a list shows in place of rows (empty, loading, failed): the rows' own size in the muted
+ * ink, on a row's height, its words 8px in where a row's label starts. */
 [data-qc-theme] .qc-menu-note {
-  padding: 6px 12px;
+  padding: 6px 8px;
+  color: var(--qc-text-muted);
+  line-height: 20px;
 }
 
 [data-qc-theme] .qc-menu-panel .qc-separator {
@@ -4417,8 +4450,8 @@
  * scrim left every surface beside it live: a press on the page's own header landed on that header
  * instead of dismissing the dialog, so the one gesture every modal answers to did nothing over most
  * of the screen. Fixed, a press anywhere outside the box closes it, which is what `aria-modal` on
- * the box already promises. The z-index is the level-menu's, for the same reason it is: nothing the
- * host stacks above its own page may paint over a surface that has taken the keyboard. */
+ * the box already promises. The z-index is the context menu's, for the same reason it is: nothing
+ * the host stacks above its own page may paint over a surface that has taken the keyboard. */
 [data-qc-theme] .qc-dialog-scrim {
   position: fixed;
   inset: 0;
@@ -4438,6 +4471,34 @@
   font-size: var(--qc-text-fontSizeBase);
 }
 
+/* The modal motion, which every modal dialog opens and closes with (its scrim carries `data-state`):
+ * the backdrop fades in, and the box fades in and grows from the entrance scale, over one duration.
+ * Closing runs the same motion in reverse. Under a reduced-motion preference the duration is zero,
+ * so both are instant. */
+[data-qc-theme] .qc-dialog-scrim[data-state] {
+  opacity: 1;
+  transition: opacity var(--qc-motion-durationBase) var(--qc-motion-easingOut);
+}
+
+[data-qc-theme] .qc-dialog-scrim[data-state] > .qc-dialog {
+  opacity: 1;
+  scale: none;
+  transition:
+    opacity var(--qc-motion-durationBase) var(--qc-motion-easingStandard),
+    scale var(--qc-motion-durationBase) var(--qc-motion-easingStandard);
+}
+
+[data-qc-theme] .qc-dialog-scrim[data-state='opening'],
+[data-qc-theme] .qc-dialog-scrim[data-state='closing'] {
+  opacity: 0;
+}
+
+[data-qc-theme] .qc-dialog-scrim[data-state='opening'] > .qc-dialog,
+[data-qc-theme] .qc-dialog-scrim[data-state='closing'] > .qc-dialog {
+  opacity: 0;
+  scale: var(--qc-motion-scaleEnter);
+}
+
 /* In place of rows: the drawing over the line that says nothing matched, centred where the rows
  * would have stood. */
 [data-qc-theme] .qc-empty {
@@ -4612,7 +4673,7 @@
  *
  * The row is in the root's own flow and positions nothing: it reserves 49px of the column between
  * the charts grid and the bottom range and timezone band (a 48px row under the pane's own hairline),
- * so the plot and the time axis stay unobscured and the drawing rail keeps its column beside it.
+ * so the plot and the time axis stay unobscured and the drawing toolbar keeps its column beside it.
  * Entry reserves that height and exit returns it. Everything inside is placed by the strip's logical
  * grid, so a right-to-left chart mirrors without a transform, and a long translation scrolls the
  * strip rather than overlapping a neighbour. */
@@ -4640,14 +4701,15 @@
   transform: translateY(0);
   clip-path: inset(0);
   transition:
-    flex-basis 220ms cubic-bezier(0.22, 1, 0.36, 1),
-    max-height 220ms cubic-bezier(0.22, 1, 0.36, 1),
-    opacity 140ms linear,
-    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
-    clip-path 220ms cubic-bezier(0.22, 1, 0.36, 1);
+    flex-basis var(--qc-motion-durationBase) var(--qc-motion-easingStandard),
+    max-height var(--qc-motion-durationBase) var(--qc-motion-easingStandard),
+    opacity var(--qc-motion-durationBase) var(--qc-motion-easingStandard),
+    transform var(--qc-motion-durationBase) var(--qc-motion-easingStandard),
+    clip-path var(--qc-motion-durationBase) var(--qc-motion-easingStandard);
 }
 
-/* The row itself animates from zero to 49px and back. max-height clamps the fixed-height band while
+/* The row itself animates from zero to 49px and back, on the modal motion's duration and timing,
+ * and closing runs the opening in reverse. max-height clamps the fixed-height band while
  * flex-basis gives the chart space up at the same pace, so the chart and controls move together.
  * The state is driven by CSS transitions because some embedded hosts omit Element.animate(). */
 [data-qc-theme] .qc-replay[data-state='opening'],
@@ -4659,11 +4721,6 @@
   clip-path: inset(100% 0 0);
 }
 
-[data-qc-theme] .qc-replay[data-state='closing'] {
-  transition-duration: 170ms, 170ms, 170ms, 170ms, 170ms;
-  transition-timing-function: cubic-bezier(0.4, 0, 1, 1), cubic-bezier(0.4, 0, 1, 1), linear, cubic-bezier(0.4, 0, 1, 1), cubic-bezier(0.4, 0, 1, 1);
-}
-
 [data-qc-theme] .qc-replay::-webkit-scrollbar {
   display: none;
 }
@@ -4709,7 +4766,7 @@
 }
 
 [data-qc-theme] .qc-replay-speed,
-[data-qc-theme] .qc-replay-interval {
+[data-qc-theme] .qc-replay-timeframe {
   justify-content: center;
   min-width: 38px;
   font-variant-numeric: tabular-nums;
@@ -4777,8 +4834,8 @@
   padding-inline: 12px 10px;
 }
 
-/* The starting points carry the same 28-grid marks the rail does, so the gutter is the mark's own
- * width; a list whose rows carry no mark keeps no gutter for one. */
+/* The starting points carry the same 28-grid marks the drawing toolbar does, so the gutter is the
+ * mark's own width; a list whose rows carry no mark keeps no gutter for one. */
 [data-qc-theme] .qc-replay-menu .qc-menu-icon {
   flex: 0 0 28px;
   width: 28px;
@@ -5028,40 +5085,8 @@
 
 /* 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-scrim {
-  opacity: 1;
-  transition: opacity 160ms linear;
-}
-
 [data-qc-theme] .qc-search-dialog {
   height: min(85vh, 680px);
-  opacity: 1;
-  transform: translateY(0) scale(1);
-  transform-origin: center 42%;
-  transition:
-    opacity 150ms ease-out,
-    transform 190ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-[data-qc-theme] .qc-search-dialog-scrim[data-state='opening'] {
-  opacity: 0;
-}
-
-[data-qc-theme] .qc-search-dialog-scrim[data-state='opening'] .qc-search-dialog {
-  opacity: 0;
-  transform: translateY(8px) scale(0.985);
-}
-
-[data-qc-theme] .qc-search-dialog-scrim[data-state='closing'] {
-  opacity: 0;
-  transition-duration: 140ms;
-}
-
-[data-qc-theme] .qc-search-dialog-scrim[data-state='closing'] .qc-search-dialog {
-  opacity: 0;
-  transform: translateY(6px) scale(0.985);
-  transition-duration: 110ms, 140ms;
-  transition-timing-function: ease-in, cubic-bezier(0.4, 0, 1, 1);
 }
 
 [data-qc-theme] .qc-search-dialog--compare {
@@ -5205,6 +5230,12 @@
   display: none;
 }
 
+/* A selected class's narrower classes: a second strip of the same tabs, standing directly under the
+ * strip above so the two rows read as one filter. */
+[data-qc-theme] .qc-search-classes + .qc-search-subclasses {
+  padding-top: 0;
+}
+
 [data-qc-theme] .qc-search-scope {
   display: inline-flex;
   flex: 0 0 auto;
@@ -5330,8 +5361,8 @@
   white-space: nowrap;
 }
 
-/* The source cell: what kind of market a row is and where its data comes from, then the venue's
- * mark, set against the row's end. */
+/* 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;
   flex: 0 0 auto;
@@ -5340,7 +5371,7 @@
   padding-inline-end: 20px;
 }
 
-[data-qc-theme] .qc-search-venue {
+[data-qc-theme] .qc-search-source-name {
   color: var(--qc-text-primary);
   font-size: var(--qc-text-fontSizeBase);
   line-height: 21px;
@@ -5354,8 +5385,8 @@
 }
 
 /* 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 provider's, and without one the source is written
- * in the one letter it is known by on the neutral fill. */
+ * 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;
@@ -5372,8 +5403,8 @@
   border-radius: 50%;
 }
 
-/* A host's venue or provider mark IS the disc: the package's ground stands down under it, and the
- * artwork fills the round box. */
+/* A host's venue or data source mark IS the disc: the package's ground stands down under it, and
+ * the artwork fills the round box. */
 [data-qc-theme] .qc-search-mark[data-qc-host='true'] {
   background: none;
 }
@@ -5431,11 +5462,11 @@
   line-height: 21px;
 }
 
-[data-qc-theme] .qc-search-table .qc-search-venue {
+[data-qc-theme] .qc-search-table .qc-search-source-name {
   margin-inline-end: 8px;
 }
 
-/* COMPARE stacks the ticker over its description and the venue over the kind, on 52px rows, and
+/* 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;
@@ -5604,13 +5635,8 @@
   font-size: var(--qc-text-fontSizeSmall);
 }
 
-/* Chart settings follows the same centered, two-column layout as TradingView: a fixed title and
- * footer around a section rail and one roomy settings page. */
-[data-qc-theme] .qc-chart-settings-scrim {
-  opacity: 1;
-  transition: opacity 160ms linear;
-}
-
+/* Chart settings is a centered, two-column dialog: a fixed title and footer around a section rail
+ * and one roomy settings page. */
 [data-qc-theme] .qc-chart-settings-dialog {
   box-sizing: border-box;
   height: min(612px, calc(100vh - 32px));
@@ -5620,32 +5646,6 @@
   border: 0;
   border-radius: 6px;
   box-shadow: var(--qc-overlay-shadow);
-  opacity: 1;
-  transform: translateY(0) scale(1);
-  transform-origin: center 42%;
-  transition:
-    opacity 150ms ease-out,
-    transform 190ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-[data-qc-theme] .qc-chart-settings-scrim[data-state='opening'],
-[data-qc-theme] .qc-chart-settings-scrim[data-state='closing'] {
-  opacity: 0;
-}
-
-[data-qc-theme] .qc-chart-settings-scrim[data-state='opening'] .qc-chart-settings-dialog,
-[data-qc-theme] .qc-chart-settings-scrim[data-state='closing'] .qc-chart-settings-dialog {
-  opacity: 0;
-  transform: translateY(8px) scale(0.985);
-}
-
-[data-qc-theme] .qc-chart-settings-scrim[data-state='closing'] {
-  transition-duration: 140ms;
-}
-
-[data-qc-theme] .qc-chart-settings-scrim[data-state='closing'] .qc-chart-settings-dialog {
-  transition-duration: 110ms, 140ms;
-  transition-timing-function: ease-in, cubic-bezier(0.4, 0, 1, 1);
 }
 
 [data-qc-theme] .qc-chart-settings-dialog .qc-dialog-title {
@@ -5764,8 +5764,8 @@
   border-radius: 4px;
 }
 
-/* TradingView uses compact square checks in this dialog. Keep the existing accessible switch role
- * while painting it as the same control and placing it before the label. */
+/* This dialog paints its switches as compact square checks before the label, and each keeps the
+ * accessible switch role. */
 [data-qc-theme] .qc-settings-menu .qc-switch-row {
   display: flex;
   flex-direction: row-reverse;
@@ -5807,7 +5807,7 @@
   border-radius: 0;
   opacity: 0;
   transform: rotate(45deg);
-  transition: opacity var(--qc-motion-durationFast) linear;
+  transition: opacity var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
 }
 
 [data-qc-theme] .qc-settings-menu .qc-switch[aria-checked='true'] .qc-switch-knob {
@@ -5943,13 +5943,6 @@
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  [data-qc-theme] .qc-chart-settings-scrim,
-  [data-qc-theme] .qc-chart-settings-dialog {
-    transition-duration: 0ms;
-  }
-}
-
 /* The market-status control on the legend and its popup. */
 [data-qc-theme] .qc-legend-status {
   display: inline-flex;
@@ -6347,7 +6340,7 @@
 [data-qc-theme] .qc-tf-unit-caret {
   flex: 0 0 auto;
   color: var(--qc-text-muted);
-  transition: transform var(--qc-motion-durationFast) linear;
+  transition: transform var(--qc-motion-durationFast) var(--qc-motion-easingLinear);
   transform: rotate(180deg);
 }
 
@@ -6401,6 +6394,26 @@
   cursor: not-allowed;
 }
 
+/* The same list with no drop-down around it, for a page that holds the picker in a box of its own:
+ * a phone's card, where the card IS the picker. It fills that box, the rows scroll inside it, and the
+ * composer stays pinned below them. The box is the page's, so the card paints no surface of its own. */
+[data-qc-theme].qc-tf-card {
+  display: flex;
+  min-height: 0;
+  height: 100%;
+  flex-direction: column;
+  color: var(--qc-text-primary);
+  font-family: var(--qc-text-fontFamily);
+  font-size: var(--qc-text-fontSizeBase);
+}
+
+[data-qc-theme].qc-tf-card > .qc-tf-menu {
+  display: flex;
+  flex: 1 1 auto;
+  min-height: 0;
+  flex-direction: column;
+}
+
 /* The chart's notices, stacked at the bottom of the charts, newest last. The region is the charts
  * grid's next sibling in the root's column and takes no height of its own; the stack inside it is
  * anchored to its top edge and grows upward, over the charts, never over the bottom bar. */