@genome-spy/core 0.72.0 → 0.74.0

package/dist/src/spec/parameter.d.ts

@@ -1,5 +1,6 @@
 import { PrimaryPositionalChannel, Scalar } from "./channel.js";
 import { ShadowProps } from "./mark.js";
+import { ZIndexProps } from "./decoration.js";
 
 export interface ExprRef {
     /**
@@ -177,14 +178,20 @@ export type SelectionInitInterval =
     | Vector2<number>
     | Vector2<string>;
 
-export type InteractionEventType = "click" | "dblclick" | "mouseover";
+export type InteractionEventType =
+    | "click"
+    | "dblclick"
+    | "mouseenter"
+    | "mouseleave"
+    | "mouseover"
+    | "mousedown"
+    | "wheel";
 
-// TODO: merge with InteractionEventType
-export type DomEventType = "click" | "dblclick" | "mouseover" | "pointerover";
+export type DomEventType = InteractionEventType | "pointerover";
 
 export interface EventConfig {
     /**
-     * The type of event to listen to. For example, `"click"` or `"mouseover"`.
+     * The type of event to listen to. For example, `"click"` or `"mouseenter"`.
      */
     type: DomEventType;
 
@@ -208,6 +215,13 @@ export interface BaseSelectionConfig<T extends SelectionType = SelectionType> {
 
     /**
      * A string or object that defines the events to which the selection should listen.
+     *
+     * __Default value:__
+     *
+     * - point selections: `"click"`
+     * - interval selections:
+     *   - `"mousedown[event.shiftKey]"` when any brushed channel is zoomable
+     *   - `"mousedown"` otherwise
      */
     on?: DomEventType | EventConfig | string;
 
@@ -247,9 +261,35 @@ export interface IntervalSelectionConfig extends BaseSelectionConfig<"interval">
      * Use the `mark` property to adjust the appearance of this rectangle.
      */
     mark?: BrushConfig;
+
+    /**
+     * Controls whether an active interval selection can be resized by mouse wheel.
+     * The wheel interaction only applies when the cursor is over the interval.
+     *
+     * Can be:
+     *
+     * - `true` / `false`
+     * - event type string such as `"wheel"` or `"wheel[event.altKey]"`
+     * - an `EventConfig` object
+     *
+     * Currently, only `"wheel"` events are supported.
+     *
+     * __Default value:__
+     *
+     * - `false` when any brushed channel uses a zoomable scale
+     * - `true` otherwise
+     */
+    zoom?: DomEventType | EventConfig | string | boolean;
 }
 
-export interface BrushConfig extends ShadowProps {
+export interface BrushConfig extends ShadowProps, ZIndexProps {
+    /**
+     * Mouse cursor shown while the pointer is over the interval mark.
+     *
+     * __Default value:__ `{ expr: "intervalDragActive ? 'grabbing' : 'move'" }`
+     */
+    cursor?: string | ExprRef;
+
     /**
      * The fill color of the interval mark.
      *
@@ -286,6 +326,23 @@ export interface BrushConfig extends ShadowProps {
      */
     strokeWidth?: number;
 
+    /**
+     * Whether the brush rectangle should be clipped to the viewport.
+     *
+     * __Default value:__ `true`
+     */
+    clip?: boolean | "never";
+
+    /**
+     * Z-order of the interval mark relative to the view content.
+     *
+     * Values greater than `0` render after the view marks. Values less than or
+     * equal to `0` render before the marks.
+     *
+     * __Default value:__ `1`
+     */
+    zindex?: number;
+
     /**
      * Where to display the measurement text (e.g., number of base pairs) for the interval selection.
      *

package/dist/src/spec/root.d.ts

@@ -1,9 +1,29 @@
-import { GenomeConfig } from "./genome.js";
+import { GenomeConfig, GenomeDefinition } from "./genome.js";
+import { BuiltInThemeName, GenomeSpyConfig } from "./config.js";
 import { ViewSpec } from "./view.js";
 
+export type NamedGenomeConfig = GenomeDefinition | Record<string, never>;
+
 export interface RootConfig {
     $schema?: string;
 
+    /**
+     * Named genome assembly definitions.
+     *
+     * Each object key is the assembly name.
+     */
+    genomes?: Record<string, NamedGenomeConfig>;
+
+    /**
+     * Default assembly for locus scales that do not define `scale.assembly`.
+     *
+     * Can reference either a key in `genomes` or a built-in assembly name.
+     */
+    assembly?: string;
+
+    /**
+     * @deprecated Legacy root-level genome config. Use `genomes` and `assembly` instead.
+     */
     genome?: GenomeConfig;
 
     baseUrl?: string;
@@ -17,6 +37,19 @@ export interface RootConfig {
      * https://vega.github.io/vega-lite/docs/data.html#datasets
      */
     datasets?: Record<string, any[]>;
+
+    /**
+     * Global configuration defaults and theme tokens.
+     *
+     * The configuration is inherited by descendant views and can be overridden
+     * by view-local `config` objects.
+     */
+    config?: GenomeSpyConfig;
+
+    /**
+     * Selects built-in theme preset(s) for the whole visualization.
+     */
+    theme?: BuiltInThemeName | BuiltInThemeName[];
 }
 
 export type RootSpec = ViewSpec & RootConfig;

package/dist/src/spec/scale.d.ts

@@ -8,7 +8,7 @@
  * BSD-3-Clause License: https://github.com/vega/vega-lite/blob/master/LICENSE
  */
 
-import { ChromosomalLocus } from "./genome.js";
+import { ChromosomalLocus, GenomeDefinition } from "./genome.js";
 import { ExprRef } from "./parameter.js";
 
 export type ScaleType =
@@ -48,10 +48,16 @@ export interface Scale {
     type?: ScaleType;
 
     /**
-     * The genome assembly name for locus scales. If undefined, the default
-     * genome from the genome store is used.
+     * Genome assembly definition for locus scales.
+     *
+     * This can be:
+     *
+     * - A string reference to a named assembly (built-in or root-configured).
+     * - An inline anonymous assembly that defines either `contigs` or `url`.
+     *
+     * If undefined, the default genome from the genome store is used.
      */
-    assembly?: string;
+    assembly?: string | InlineLocusAssembly;
 
     /**
      * Customized domain values.
@@ -62,7 +68,7 @@ export interface Scale {
      *
      * For _ordinal_ and _nominal_ fields, `domain` can be an array that lists valid input values.
      */
-    domain?: ScalarDomain | ComplexDomain;
+    domain?: ScalarDomain | ComplexDomain | SelectionDomainRef;
 
     /**
      * Inserts a single mid-point value into a two-element domain. The mid-point value must lie between the domain minimum and maximum values. This property can be useful for setting a midpoint for [diverging color scales](https://vega.github.io/vega-lite/docs/scale.html#piecewise). The domainMid property is only intended for use with scales supporting continuous, piecewise domains.
@@ -228,6 +234,41 @@ export interface Scale {
      * If `true` and the scale is used on a positional channel, it can bee zoomed and translated interactively.
      */
     zoom?: boolean | ZoomParams;
+
+    /**
+     * The numbering offset used when formatting tick labels on index and locus scales.
+     *
+     * __Default value:__ `0`
+     */
+    numberingOffset?: number;
+}
+
+export type InlineLocusAssembly = GenomeDefinition;
+
+export interface SelectionDomainRef {
+    /**
+     * Name of an interval selection parameter that provides the domain.
+     */
+    param: string;
+
+    /**
+     * Initial configured domain for the linked scale when the linked interval
+     * selection is empty.
+     *
+     * Only supported when the linked scale is zoomable.
+     *
+     * Clearing the linked interval selection resets the domain to the normal
+     * default/data-derived domain instead of restoring `initial`.
+     */
+    initial?: ScalarDomain | ComplexDomain;
+
+    /**
+     * Selection interval channel to use.
+     *
+     * If omitted, GenomeSpy infers the channel from the scale channel when
+     * possible (e.g., `x` -> `x`, `x2` -> `x`, `y` -> `y`, `y2` -> `y`).
+     */
+    encoding?: "x" | "y";
 }
 
 export interface SchemeParams {

package/dist/src/spec/title.d.ts

@@ -10,12 +10,13 @@
 
 import { Align, Baseline, FontStyle, FontWeight } from "./font.js";
 import { ExprRef } from "./parameter.js";
+import { ZIndexProps } from "./decoration.js";
 
 export type TitleOrient = "none" | "left" | "right" | "top" | "bottom";
 export type TitleAnchor = null | "start" | "middle" | "end";
 export type TitleFrame = "bounds" | "group";
 
-export interface Title {
+export interface Title extends ZIndexProps {
     /**
      * The title text.
      */
@@ -24,7 +25,7 @@ export interface Title {
     /**
      * A mark style property to apply to the title text mark. If not specified, a default style of `"group-title"` is applied.
      */
-    style?: string;
+    style?: string | string[];
 
     /**
      * The anchor position for placing the title and subtitle text. One of `"start"`, `"middle"`, or `"end"`. For example, with an orientation of top these anchor positions map to a left-, center-, or right-aligned title.
@@ -41,6 +42,16 @@ export interface Title {
      */
     offset?: number;
 
+    /**
+     * Z-order of the title relative to the view content.
+     *
+     * Values greater than `0` render after the view marks. Values less than or
+     * equal to `0` render before the marks.
+     *
+     * __Default value:__ `1`
+     */
+    zindex?: number;
+
     /**
      * Default title orientation (`"none"`, `"top"`, `"bottom"`, `"left"`, or `"right"`)
      */

package/dist/src/spec/tooltip.d.ts

@@ -6,4 +6,4 @@ export interface HandledTooltip {
 
 // TODO: Encoding / data: https://vega.github.io/vega-lite/docs/tooltip.html#encoding
 
-export type Tooltip = HandledTooltip | null;
+export type Tooltip = HandledTooltip | null | false;

package/dist/src/spec/transform.d.ts

@@ -1,4 +1,5 @@
 import { PositionalChannel } from "./channel.js";
+import { FontStyle, FontWeight } from "./font.js";
 import { ExprRef } from "./parameter.js";
 
 /**
@@ -177,7 +178,7 @@ export interface StackParams extends TransformParamsBase {
      *
      * **Default:** `["y0", "y1"]`
      */
-    as: string[];
+    as?: string[];
 
     /**
      * Cardinality, e.g., the number if distinct bases or amino acids. Used for
@@ -204,7 +205,9 @@ export type AggregateOp =
     | "min"
     | "max"
     | "mean"
+    | "q1"
     | "median"
+    | "q3"
     | "variance";
 
 export interface AggregateParams extends TransformParamsBase {
@@ -225,7 +228,7 @@ export interface AggregateParams extends TransformParamsBase {
 
     /**
      * The aggregation operations to be performed on the fields, such as `"sum"`,
-     * `"average"`, or `"count"`.
+     * `"q1"`, `"median"`, `"q3"`, or `"count"`.
      */
     ops?: AggregateOp[];
 
@@ -424,13 +427,45 @@ export interface SampleParams extends TransformParamsBase {
 export interface MeasureTextParams extends TransformParamsBase {
     type: "measureText";
 
+    /**
+     * The field that contains the text to be measured.
+     */
     field: Field;
 
+    /**
+     * The font size in pixels.
+     */
     fontSize: number | ExprRef;
 
-    as: string;
+    /**
+     * The font typeface. Uses the same asynchronously loaded SDF fonts as the
+     * `"text"` mark.
+     *
+     * **Default:** `"Lato"`
+     */
+    font?: string;
+
+    /**
+     * The font style. Valid values: `"normal"` and `"italic"`.
+     *
+     * **Default:** `"normal"`
+     */
+    fontStyle?: FontStyle;
+
+    /**
+     * The font weight. The following strings and numbers are valid values:
+     * `"thin"` (`100`), `"light"` (`300`), `"regular"` (`400`),
+     * `"normal"` (`400`), `"medium"` (`500`), `"bold"` (`700`),
+     * `"black"` (`900`)
+     *
+     * **Default:** `"regular"`
+     */
+    fontWeight?: FontWeight;
 
-    // TODO: FontFamily etc
+    /**
+     * The output field where the measured width is written.
+     */
+    as: string;
 }
 
 export interface MergeFacetsParams extends TransformParamsBase {

package/dist/src/spec/view.d.ts

@@ -6,17 +6,12 @@ import {
     FacetFieldDef,
     PrimaryPositionalChannel,
 } from "./channel.js";
-import {
-    FillAndStrokeProps,
-    MarkProps,
-    MarkType,
-    RectProps,
-    RuleProps,
-    ShadowProps,
-} from "./mark.js";
+import { MarkProps, MarkType, RuleProps } from "./mark.js";
 import { ExprRef } from "./parameter.js";
 import { Title } from "./title.js";
 import { Parameter } from "./parameter.js";
+import { GenomeSpyConfig } from "./config.js";
+import { ViewBackgroundProps, ZIndexProps } from "./decoration.js";
 
 export interface SizeDef {
     /**
@@ -84,22 +79,50 @@ export type Paddings = Partial<Record<Side, number>>;
 
 export type PaddingConfig = Paddings | number;
 
-interface CompleteViewBackground extends RectProps, FillAndStrokeProps {
-    // TODO: style?: string | string[];
+export interface ViewBackground extends ViewBackgroundProps {
+    /**
+     * Named style reference(s) resolved from `config.style`.
+     * If an array is provided, later styles override earlier ones.
+     *
+     * __Default value:__ `"cell"`
+     */
+    style?: string | string[];
 
-    // TODO: Move to FillAndStrokeProps or something
-    strokeWidth?: number;
-}
+    /**
+     * Z-order of the background fill relative to the view content.
+     *
+     * Values greater than `0` render after the view marks. Values less than or
+     * equal to `0` render before the marks.
+     *
+     * __Default value:__ `0`
+     */
+    zindex?: number;
 
-export type ViewBackground = Pick<
-    CompleteViewBackground,
-    "fill" | "fillOpacity" | "stroke" | "strokeWidth" | "strokeOpacity"
-> &
-    ShadowProps;
+    /**
+     * Z-order of the background stroke relative to the view content.
+     *
+     * Values greater than `0` render after the view marks. Values less than or
+     * equal to `0` render before the marks.
+     *
+     * __Default value:__ `0`, or `10` when the view content is clipped or
+     * scrollable.
+     */
+    strokeZindex?: number;
+}
 
-export interface SeparatorProps extends Omit<RuleProps, "type"> {
+export interface SeparatorProps extends Omit<RuleProps, "type">, ZIndexProps {
     type?: "rule";
 
+    /**
+     * Z-order of the separator relative to the view content.
+     *
+     * Values greater than `0` render after the view marks. Values less than or
+     * equal to `0` render before the marks.
+     *
+     * __Default value:__ `0`
+     */
+    zindex?: number;
+
     /**
      * Whether separators extend into the plot margin (axes/padding) around
      * the grid.
@@ -118,6 +141,15 @@ export interface ViewSpecBase extends ResolveSpec {
      */
     name?: string;
 
+    /**
+     * Mouse cursor shown while the pointer is inside the view.
+     * The deepest matching cursor wins: mark cursor first, then the pointed
+     * view, then ancestor views outward toward the root.
+     *
+     * __Default value:__ browser default
+     */
+    cursor?: string | ExprRef;
+
     /**
      * Height of the view. If a number, it is interpreted as pixels.
      * Check [child sizing](https://genomespy.app/docs/grammar/composition/concat/#child-sizing)
@@ -172,6 +204,13 @@ export interface ViewSpecBase extends ResolveSpec {
      */
     params?: Parameter[];
 
+    /**
+     * Configures defaults for this view subtree.
+     *
+     * Properties in child views override properties inherited from ancestors.
+     */
+    config?: GenomeSpyConfig;
+
     /**
      * Specifies a [data source](https://genomespy.app/docs/grammar/data/).
      * If omitted, the data source is inherited from the parent view.
@@ -433,6 +472,15 @@ export interface ImportSpec {
      */
     visible?: boolean;
 
+    /**
+     * Configures defaults for the imported subtree at the import site.
+     *
+     * This config is merged before the imported spec's own root-level `config`,
+     * so imported specs can remain self-contained and override import-site
+     * defaults where needed.
+     */
+    config?: GenomeSpyConfig;
+
     /**
      * The method to import a specification.
      */

package/dist/src/styles/genome-spy.css

@@ -1,17 +1,17 @@
-:root {
-    --genome-spy-basic-spacing: 10px;
-    --genome-spy-font-family:
-        system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
-        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
+@scope {
+    :scope {
+        --genome-spy-basic-spacing: 10px;
+        --genome-spy-font-family:
+            system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+            "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 
-.genome-spy {
-    font-family: var(--genome-spy-font-family);
+        font-family: var(--genome-spy-font-family);
 
-    position: relative;
+        position: relative;
 
-    display: flex;
-    flex-direction: column;
+        display: flex;
+        flex-direction: column;
+    }
 
     .canvas-wrapper {
         position: relative;
@@ -21,6 +21,7 @@
 
     canvas {
         display: block;
+        touch-action: none;
         transform: scale(1, 1);
         opacity: 1;
         transition:
@@ -163,6 +164,13 @@
             box-shadow: 0px 0px 3px 1px white;
         }
 
+        .color-legend-unmapped {
+            background-color: transparent;
+            border: 1px solid black;
+            box-sizing: border-box;
+            box-shadow: none;
+        }
+
         .attributes {
             .hovered {
                 background-color: #e0e0e0;
@@ -182,6 +190,50 @@
         }
     }
 
+    .gs-input-binding {
+        display: grid;
+        grid-template-columns: max-content max-content;
+        column-gap: 1em;
+        row-gap: 0.3em;
+        justify-items: start;
+
+        > select,
+        > input:not([type="checkbox"]) {
+            width: 100%;
+        }
+
+        input[type="range"] + span {
+            display: inline-block;
+            margin-left: 0.3em;
+            min-width: 2.2em;
+            font-variant-numeric: tabular-nums;
+        }
+
+        input[type="range"],
+        input[type="radio"] {
+            vertical-align: text-bottom;
+        }
+
+        .radio-group {
+            display: flex;
+            align-items: center;
+        }
+
+        .description {
+            max-width: 26em;
+            grid-column: 1 / -1;
+            color: #777;
+            font-size: 90%;
+            margin-top: -0.5em;
+        }
+    }
+
+    .gs-input-bindings {
+        flex-basis: content;
+        font-size: 14px;
+        padding: var(--genome-spy-basic-spacing);
+    }
+
     .message-box {
         display: flex;
         align-items: center;
@@ -198,47 +250,3 @@
         }
     }
 }
-
-.gs-input-binding {
-    display: grid;
-    grid-template-columns: max-content max-content;
-    column-gap: 1em;
-    row-gap: 0.3em;
-    justify-items: start;
-
-    > select,
-    > input:not([type="checkbox"]) {
-        width: 100%;
-    }
-
-    input[type="range"] + span {
-        display: inline-block;
-        margin-left: 0.3em;
-        min-width: 2.2em;
-        font-variant-numeric: tabular-nums;
-    }
-
-    input[type="range"],
-    input[type="radio"] {
-        vertical-align: text-bottom;
-    }
-
-    .radio-group {
-        display: flex;
-        align-items: center;
-    }
-
-    .description {
-        max-width: 26em;
-        grid-column: 1 / -1;
-        color: #777;
-        font-size: 90%;
-        margin-top: -0.5em;
-    }
-}
-
-.gs-input-bindings {
-    flex-basis: content;
-    font-size: 14px;
-    padding: var(--genome-spy-basic-spacing);
-}

package/dist/src/styles/genome-spy.css.d.ts

@@ -1,3 +1,3 @@
 export default css;
-declare const css: "\n:root {\n--genome-spy-basic-spacing: 10px;\n--genome-spy-font-family: system-ui, \"Segoe UI\", Roboto, Helvetica, Arial,\nsans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n\n.genome-spy {\nfont-family: var(--genome-spy-font-family);\n\nposition: relative;\n\ndisplay: flex;\nflex-direction: column;\n\n.canvas-wrapper {\nposition: relative;\nflex-grow: 1;\noverflow: hidden;\n}\n\ncanvas {\ndisplay: block;\ntransform: scale(1, 1);\nopacity: 1;\ntransition:\ntransform 0.6s,\nopacity 0.6s;\n\n&:focus,\n&:focus-visible {\noutline: none;\n}\n}\n\n.loading {\n> canvas {\ntransform: scale(0.95, 0.95);\nopacity: 0;\n}\n}\n\n.loading-indicators {\nposition: absolute;\ninset: 0;\n\nuser-select: none;\npointer-events: none;\n\ndiv {\nposition: absolute;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\n\n> div {\nfont-size: 11px;\ntransition: opacity 0.2s;\nbackground: white;\npadding: 2px 5px;\ndisplay: flex;\nborder-radius: 3px;\ngap: 0.5em;\nopacity: 0;\n\n&.loading {\nopacity: 0.5;\n}\n\n&.error {\nopacity: 0.8;\ncolor: firebrick;\n}\n\n> * {\ndisplay: block;\n}\n\nimg {\nwidth: 1.5em;\nheight: 1.5em;\n}\n}\n}\n}\n\n.tooltip {\nposition: absolute;\n\nmax-width: 450px;\noverflow: hidden;\n\n--background-color: #f6f6f6;\nbackground: var(--background-color);\npadding: var(--genome-spy-basic-spacing);\n\n--font-size: 12px;\nfont-size: var(--font-size);\n\nbox-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);\n\n&:not(.sticky) {\npointer-events: none;\n}\n\ntransition:\noutline-color 0.3s ease-in-out,\nbox-shadow 0.3s ease-in-out;\n\noutline: 0px solid transparent;\n&.sticky {\noutline: 2px solid black;\nbox-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.3);\n}\n\nz-index: 100;\n\n> :last-child {\nmargin-bottom: 0;\n}\n\n> .title {\npadding-bottom: calc(var(--genome-spy-basic-spacing) / 2);\nmargin-bottom: calc(var(--genome-spy-basic-spacing) / 2);\nborder-bottom: 1px dashed var(--background-color);\nborder-bottom: 1px dashed\ncolor-mix(in srgb, black 25%, var(--background-color));\n}\n\n.summary {\nfont-size: 12px;\n}\n\ntable {\n&:first-child {\nmargin-top: 0;\n}\n\nborder-collapse: collapse;\n\nth,\ntd {\npadding: 2px 0.4em;\nvertical-align: top;\nfont-size: var(--font-size);\n\n&:first-child {\npadding-left: 0;\n}\n}\n\nth {\ntext-align: left;\nfont-weight: bold;\n}\n}\n\n.color-legend {\ndisplay: inline-block;\nwidth: 0.8em;\nheight: 0.8em;\nmargin-left: 0.4em;\nbox-shadow: 0px 0px 3px 1px white;\n}\n\n.attributes {\n.hovered {\nbackground-color: #e0e0e0;\n}\n}\n\n.na {\ncolor: #aaa;\nfont-style: italic;\nfont-size: 80%;\n}\n}\n\n.gene-track-tooltip {\n.summary {\nfont-size: 90%;\n}\n}\n\n.message-box {\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nposition: absolute;\ntop: 0;\nheight: 100%;\nwidth: 100%;\n\n> div {\nborder: 1px solid red;\npadding: 10px;\nbackground: #fff0f0;\n}\n}\n}\n\n.gs-input-binding {\ndisplay: grid;\ngrid-template-columns: max-content max-content;\ncolumn-gap: 1em;\nrow-gap: 0.3em;\njustify-items: start;\n\n> select,\n> input:not([type=\"checkbox\"]) {\nwidth: 100%;\n}\n\ninput[type=\"range\"] + span {\ndisplay: inline-block;\nmargin-left: 0.3em;\nmin-width: 2.2em;\nfont-variant-numeric: tabular-nums;\n}\n\ninput[type=\"range\"],\ninput[type=\"radio\"] {\nvertical-align: text-bottom;\n}\n\n.radio-group {\ndisplay: flex;\nalign-items: center;\n}\n\n.description {\nmax-width: 26em;\ngrid-column: 1 / -1;\ncolor: #777;\nfont-size: 90%;\nmargin-top: -0.5em;\n}\n}\n\n.gs-input-bindings {\nflex-basis: content;\nfont-size: 14px;\npadding: var(--genome-spy-basic-spacing);\n}\n";
+declare const css: "\n@scope {\n:scope {\n--genome-spy-basic-spacing: 10px;\n--genome-spy-font-family:\nsystem-ui, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif,\n\"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n\nfont-family: var(--genome-spy-font-family);\n\nposition: relative;\n\ndisplay: flex;\nflex-direction: column;\n}\n\n.canvas-wrapper {\nposition: relative;\nflex-grow: 1;\noverflow: hidden;\n}\n\ncanvas {\ndisplay: block;\ntouch-action: none;\ntransform: scale(1, 1);\nopacity: 1;\ntransition:\ntransform 0.6s,\nopacity 0.6s;\n\n&:focus,\n&:focus-visible {\noutline: none;\n}\n}\n\n.loading {\n> canvas {\ntransform: scale(0.95, 0.95);\nopacity: 0;\n}\n}\n\n.loading-indicators {\nposition: absolute;\ninset: 0;\n\nuser-select: none;\npointer-events: none;\n\ndiv {\nposition: absolute;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\n\n> div {\nfont-size: 11px;\ntransition: opacity 0.2s;\nbackground: white;\npadding: 2px 5px;\ndisplay: flex;\nborder-radius: 3px;\ngap: 0.5em;\nopacity: 0;\n\n&.loading {\nopacity: 0.5;\n}\n\n&.error {\nopacity: 0.8;\ncolor: firebrick;\n}\n\n> * {\ndisplay: block;\n}\n\nimg {\nwidth: 1.5em;\nheight: 1.5em;\n}\n}\n}\n}\n\n.tooltip {\nposition: absolute;\n\nmax-width: 450px;\noverflow: hidden;\n\n--background-color: #f6f6f6;\nbackground: var(--background-color);\npadding: var(--genome-spy-basic-spacing);\n\n--font-size: 12px;\nfont-size: var(--font-size);\n\nbox-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);\n\n&:not(.sticky) {\npointer-events: none;\n}\n\ntransition:\noutline-color 0.3s ease-in-out,\nbox-shadow 0.3s ease-in-out;\n\noutline: 0px solid transparent;\n&.sticky {\noutline: 2px solid black;\nbox-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.3);\n}\n\nz-index: 100;\n\n> :last-child {\nmargin-bottom: 0;\n}\n\n> .title {\npadding-bottom: calc(var(--genome-spy-basic-spacing) / 2);\nmargin-bottom: calc(var(--genome-spy-basic-spacing) / 2);\nborder-bottom: 1px dashed var(--background-color);\nborder-bottom: 1px dashed\ncolor-mix(in srgb, black 25%, var(--background-color));\n}\n\n.summary {\nfont-size: 12px;\n}\n\ntable {\n&:first-child {\nmargin-top: 0;\n}\n\nborder-collapse: collapse;\n\nth,\ntd {\npadding: 2px 0.4em;\nvertical-align: top;\nfont-size: var(--font-size);\n\n&:first-child {\npadding-left: 0;\n}\n}\n\nth {\ntext-align: left;\nfont-weight: bold;\n}\n}\n\n.color-legend {\ndisplay: inline-block;\nwidth: 0.8em;\nheight: 0.8em;\nmargin-left: 0.4em;\nbox-shadow: 0px 0px 3px 1px white;\n}\n\n.color-legend-unmapped {\nbackground-color: transparent;\nborder: 1px solid black;\nbox-sizing: border-box;\nbox-shadow: none;\n}\n\n.attributes {\n.hovered {\nbackground-color: #e0e0e0;\n}\n}\n\n.na {\ncolor: #aaa;\nfont-style: italic;\nfont-size: 80%;\n}\n}\n\n.gene-track-tooltip {\n.summary {\nfont-size: 90%;\n}\n}\n\n.gs-input-binding {\ndisplay: grid;\ngrid-template-columns: max-content max-content;\ncolumn-gap: 1em;\nrow-gap: 0.3em;\njustify-items: start;\n\n> select,\n> input:not([type=\"checkbox\"]) {\nwidth: 100%;\n}\n\ninput[type=\"range\"] + span {\ndisplay: inline-block;\nmargin-left: 0.3em;\nmin-width: 2.2em;\nfont-variant-numeric: tabular-nums;\n}\n\ninput[type=\"range\"],\ninput[type=\"radio\"] {\nvertical-align: text-bottom;\n}\n\n.radio-group {\ndisplay: flex;\nalign-items: center;\n}\n\n.description {\nmax-width: 26em;\ngrid-column: 1 / -1;\ncolor: #777;\nfont-size: 90%;\nmargin-top: -0.5em;\n}\n}\n\n.gs-input-bindings {\nflex-basis: content;\nfont-size: 14px;\npadding: var(--genome-spy-basic-spacing);\n}\n\n.message-box {\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nposition: absolute;\ntop: 0;\nheight: 100%;\nwidth: 100%;\n\n> div {\nborder: 1px solid red;\npadding: 10px;\nbackground: #fff0f0;\n}\n}\n}\n";
 //# sourceMappingURL=genome-spy.css.d.ts.map

package/dist/src/styles/genome-spy.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,0iHAoPE"}
+{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,isHA6PE"}