@umriss-ui/charts 0.41.1 → 0.43.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -4,11 +4,12 @@ This document describes what changes for **callers** of the package: exports,
4
4
  props, behaviour.
5
5
 
6
6
  **The numbers.** The middle digit rises when something is added; the last one
7
- when something is repaired. As long as the first digit is `0`, no number
8
- promises compatibility — which is why a rule stronger than the figure applies as
9
- well: **whatever changes existing behaviour stands under a heading "Changed" of
10
- its own**, no matter which digit rose. Whoever reads only one section before an
11
- upgrade reads that one.
7
+ when something is repaired. The six packages are released in step, and a rename
8
+ keeps its old name for one further minor, with a warning, before the minor after
9
+ it removes the name ([the upgrade promise, ADR-0066](../../docs/adr/0066-one-number-peers-over-the-minor-a-rename-lives-one-minor.md)).
10
+ **Whatever changes existing behaviour stands under a heading "Changed" of its
11
+ own**, no matter which digit rose, with a `Migration:` line. Whoever reads only
12
+ one section before an upgrade reads that one.
12
13
 
13
14
  From 0.34.0 the packages share one number - five, and six from 0.40.0, when the dashboard joined: they are released together, and a package without a change of its own still gets a heading for it.
14
15
 
@@ -29,12 +30,40 @@ interface was still expected to move before `0.3.0`.
29
30
 
30
31
  ---
31
32
 
33
+ ## 0.43.0 – A chart's root, and Intl's options for its numbers (Oct. 2026)
34
+
35
+ ### Added
36
+
37
+ - **A series' `format` and an axis' `tickFormat` also take `NumberOptions`** - the options of `Intl.NumberFormat` plus `decimals` - written in the wording's locale and compared by value, so an equal inline object does not relabel the axis (ADR-0069). On an axis the step's places stay unless the options set digits, so a currency axis reads "€0", "€500", "€1,000". The tooltip, the data table, the limit rows, the readout and the spoken text follow.
38
+ - **An example drills down from years to months to days over `onSelect`**, the stack of levels in the application's state: the chart keeps no level (ADR-0056).
39
+
40
+ ### Changed
41
+
42
+ - **`Chart` takes the attributes of a `<div>` and a `ref`** (ADR-0068): `ref`, `id` and `data-*` reach the root element - `data-*` was dropped silently before - and `aria-label` and `aria-labelledby` name the plot. A caller's `aria-describedby` now comes after the plot's own summary.
43
+ - Migration: nothing to change for a ref or a class; a test that looked for the caller's description first finds the summary's id first.
44
+ - **`ariaLabel` on `Chart` is renamed `aria-label`.** `ariaLabel` stays as a deprecated alias and warns once in development; 0.44.0 removes it. `aria-labelledby` pointing at a heading satisfies the name too.
45
+ - Migration: write `aria-label`, or point `aria-labelledby` at a heading.
46
+ - **The built-in number formats no longer write a negative zero:** -0.0004 on a one-place axis reads "0.0".
47
+ - Migration: nothing to change; a test that expected "-0" reads "0".
48
+ - **Under a finger the legend entries and the show-all key are hit in a square of 24 px**, and the legend's row gap becomes 10 px so one line's pads do not cover the next line's entries (ADR-0070).
49
+ - Migration: nothing to change; under touch a wrapped legend stands 2 px taller per line.
50
+
51
+ ## 0.42.0 – A chart under test in jsdom (Oct. 2026)
52
+
53
+ ### Added
54
+
55
+ - **A chart is testable in jsdom.** The new "Testing" section gives the Vitest and Jest lines in full - a charts-only application installs no core - with a setup file whose ResizeObserver reports a fixed size and whose `getContext` stub keeps jsdom quiet; `.` and `./wording/de` carry a `default` condition for Jest's resolver. The release check runs a test of a legend and the data table from those blocks under both runners.
56
+ - **The README names `--u-chart-1` to `--u-chart-6`** as the palette a brand changes, beside core's brand file.
57
+ - **TypeScript 5.4 or newer**, stated in the Install section (the declarations use `NoInfer`); the release check compiles a strict consumer under 5.4 as well as the current TypeScript.
58
+
32
59
  ## 0.41.1 – The documentation runs where the code is (Oct. 2026)
33
60
 
34
61
  ### Changed
35
62
 
36
63
  - **The documentation is no longer hosted.** The site on GitHub Pages is gone, and the package's `homepage` now names its README on GitHub. The running documentation of this version opens from a checkout of the tag `charts-v0.41.1` with `pnpm install` and `pnpm start`, at `http://localhost:4170/umriss-ui/` - the repository README says how, under "See it running".
64
+ - Migration: nothing to change; a bookmark or link to the old hosted site no longer resolves - open the documentation from a checkout of the tag, as described above.
37
65
  - **`docs/llms-full.md` in the package stands on its own:** a link to another page points at that page's heading in the same file, a link to a place on the site that the file does not hold keeps only its text, and ADR-0032 is linked at this version's tag.
66
+ - Migration: nothing to change; look at any tool that read `docs/llms-full.md` and followed its links to the site, which now find the heading in the same file.
38
67
 
39
68
  ## 0.41.0 – Limits read as values, and Jest loads the charts (Oct. 2026)
40
69
 
package/README.md CHANGED
@@ -16,7 +16,7 @@ lint rule over `packages/charts/src/**` holds that fast.
16
16
  pnpm add @umriss-ui/charts
17
17
  ```
18
18
 
19
- React 19 or newer as a peer, and nothing else. `@umriss-ui/core` is **not** a
19
+ React 19 or newer as a peer, and nothing else. TypeScript 5.4 or newer (the declarations use `NoInfer`). `@umriss-ui/core` is **not** a
20
20
  dependency and not a peer dependency — if an application uses both packages, it
21
21
  does so because it chose to, not because this one required it (ADR-0020).
22
22
 
@@ -24,8 +24,11 @@ The package ships ES2022 syntax; an application that serves older browsers
24
24
  transpiles it itself.
25
25
 
26
26
  Every entry, `./wording/de` included, begins with `"use client"`, the directive a framework
27
- with Server Components reads to treat a module as client code. No test runs
28
- inside such a framework: the charts are rendered to a string in a test.
27
+ with Server Components reads to treat a module as client code. A chart is declared by its hook,
28
+ `useChart`, so the declaration lives in a Client Component file: a Server Component renders that
29
+ file and hands it the rows. On a server a chart gives its labelled frame and an empty canvas; the
30
+ drawing arrives after mount. No test runs inside such a framework: the charts are rendered to a
31
+ string in a test.
29
32
 
30
33
  ## The smallest chart that runs
31
34
 
@@ -47,7 +50,7 @@ const DATA: Point[] = [
47
50
  export function Course() {
48
51
  const { Chart, XAxis, YAxis, Line } = useChart(DATA);
49
52
  return (
50
- <Chart height={280} ariaLabel="Course of one series">
53
+ <Chart height={280} aria-label="Course of one series">
51
54
  <XAxis value="t" label="Index" />
52
55
  <YAxis />
53
56
  <Line value="a" name="Series A" />
@@ -65,6 +68,8 @@ an x axis that reads such rows names their type: `<XAxis<Row> value="t" />`.
65
68
  A y axis reads no value: its series place the rows along y. `Tooltip`, `Legend`, `DataTable`, `LimitLine` and `LimitBand` read no row and
66
69
  are imported as they are (ADR-0048).
67
70
 
71
+ The chart is a composite (ADR-0068): `ref`, `className`, `style`, `id` and `data-*` reach its root `<div>`; `aria-label` and `aria-labelledby` name the plot, and your `aria-describedby` is added after the plot's own summary. `ariaLabel` still works for one further minor and warns once in development.
72
+
68
73
  A series is an element, not an entry in a configuration object: the order in the
69
74
  JSX decides what lies over what, and at the same time the palette colour.
70
75
 
@@ -85,7 +90,7 @@ wording is the one input - the browser's language is not read:
85
90
  ```tsx
86
91
  import { GERMAN_CHARTS_WORDING } from "@umriss-ui/charts/wording/de";
87
92
 
88
- <Chart ariaLabel="Verlauf" wording={GERMAN_CHARTS_WORDING}>…</Chart>
93
+ <Chart aria-label="Verlauf" wording={GERMAN_CHARTS_WORDING}>…</Chart>
89
94
  ```
90
95
 
91
96
  ## Styles
@@ -98,7 +103,8 @@ wins. `@umriss-ui/charts/styles.css` stays exported for setups that link
98
103
  stylesheets by hand.
99
104
 
100
105
  **Colours** come from `--uc-*` variables that fall back to the tokens of
101
- `@umriss-ui/core` where they exist and to literals where they do not. **Light and
106
+ `@umriss-ui/core` where they exist and to literals where they do not. The palette is `--u-chart-1` to
107
+ `--u-chart-6`; core's README holds a brand file that sets them, light and dark. **Light and
102
108
  dark** follow the application's `color-scheme`: the canvas colours are resolved
103
109
  anew when the root element's attributes or the system preference change;
104
110
  `invalidateTheme()` covers a switch made on another ancestor. **Fonts** are not
@@ -164,6 +170,80 @@ next kind to come (ADR-0059).
164
170
  * [`../../docs/design-language.md`](../../docs/design-language.md) — the design
165
171
  language all five packages share.
166
172
 
173
+ ## Testing
174
+
175
+ Tested: Vitest 5 and Jest 30 (with babel-jest), both on jsdom. happy-dom and Jest 29 may work and are
176
+ not promised. `check:dist` runs a test of the installed package in a Vitest project and a Jest project
177
+ that hold exactly the files below. A chart-only application installs no core, so the lines are given in
178
+ full here.
179
+
180
+ **Vitest** needs one line, `server.deps.inline`: Vitest hands a dependency to Node, and Node cannot
181
+ import the stylesheet that the package's JavaScript imports (`Unknown file extension ".css"`). Inlined,
182
+ Vitest's own pipeline handles it.
183
+
184
+ ```ts vitest.config.ts
185
+ import { defineConfig } from "vitest/config";
186
+
187
+ export default defineConfig({
188
+ test: {
189
+ environment: "jsdom",
190
+ globals: true,
191
+ setupFiles: ["./umriss.setup.js"],
192
+ server: { deps: { inline: [/@umriss-ui/] } },
193
+ },
194
+ });
195
+ ```
196
+
197
+ **Jest** needs two settings: `moduleNameMapper` maps every stylesheet to an empty module, and
198
+ `transformIgnorePatterns` lets babel-jest compile the package, which ships ES modules. Babel's config
199
+ must apply to `node_modules`, so it is a root `babel.config.*`, not a `.babelrc`.
200
+
201
+ ```js jest.config.cjs
202
+ module.exports = {
203
+ testEnvironment: "jsdom",
204
+ setupFilesAfterEnv: ["<rootDir>/umriss.setup.js"],
205
+ moduleNameMapper: { "\\.css$": "<rootDir>/css-stub.cjs" },
206
+ transformIgnorePatterns: ["/node_modules/(?!(@umriss-ui)/)"],
207
+ };
208
+ ```
209
+
210
+ ```js css-stub.cjs
211
+ module.exports = {};
212
+ ```
213
+
214
+ ```js babel.config.cjs
215
+ module.exports = {
216
+ presets: [
217
+ ["@babel/preset-env", { targets: { node: "current" } }],
218
+ ["@babel/preset-react", { runtime: "automatic" }],
219
+ ],
220
+ };
221
+ ```
222
+
223
+ **Next.js** with `next/jest`: put the umriss packages in `transpilePackages`; the preset stubs the
224
+ stylesheets and compiles the packages itself.
225
+
226
+ **The setup file** gives jsdom what a chart needs to lay out. jsdom measures nothing, so the
227
+ `ResizeObserver` reports a fixed size (600 x 280) for whatever it observes; without a size the chart
228
+ stays empty, and neither the legend nor "Show data" appears. jsdom has no canvas, so `getContext`
229
+ returns `null`, which a chart copes with. The file is the same for both runners:
230
+
231
+ ```js umriss.setup.js
232
+ globalThis.ResizeObserver = class {
233
+ constructor(callback) {
234
+ this.callback = callback;
235
+ }
236
+ observe(target) {
237
+ const box = { inlineSize: 600, blockSize: 280 };
238
+ this.callback([{ target, contentRect: { width: 600, height: 280 }, contentBoxSize: [box] }], this);
239
+ }
240
+ unobserve() {}
241
+ disconnect() {}
242
+ };
243
+
244
+ HTMLCanvasElement.prototype.getContext = () => null;
245
+ ```
246
+
167
247
  ## Licence
168
248
 
169
249
  MIT — see [`LICENSE`](LICENSE).
package/dist/charts.css CHANGED
@@ -1 +1 @@
1
- @layer umriss.tokens,umriss.base,umriss.components;@layer umriss.components{.uc-root,.uc-root:before,.uc-root:after{box-sizing:border-box}.uc-plot,.uc-plot:before,.uc-plot:after{box-sizing:border-box}.uc-sr,.uc-sr:before,.uc-sr:after{box-sizing:border-box}.uc-limit-label,.uc-limit-label:before,.uc-limit-label:after{box-sizing:border-box}.uc-layer-series,.uc-layer-series:before,.uc-layer-series:after{box-sizing:border-box}.uc-silhouette,.uc-silhouette:before,.uc-silhouette:after{box-sizing:border-box}.uc-silhouette-ground,.uc-silhouette-ground:before,.uc-silhouette-ground:after{box-sizing:border-box}.uc-silhouette-glint,.uc-silhouette-glint:before,.uc-silhouette-glint:after{box-sizing:border-box}.uc-silhouette-band,.uc-silhouette-band:before,.uc-silhouette-band:after{box-sizing:border-box}.uc-axes,.uc-axes:before,.uc-axes:after{box-sizing:border-box}.uc-axis,.uc-axis:before,.uc-axis:after{box-sizing:border-box}.uc-axis-line,.uc-axis-line:before,.uc-axis-line:after{box-sizing:border-box}.uc-axis-y,.uc-axis-y:before,.uc-axis-y:after{box-sizing:border-box}.uc-axis-left,.uc-axis-left:before,.uc-axis-left:after{box-sizing:border-box}.uc-axis-right,.uc-axis-right:before,.uc-axis-right:after{box-sizing:border-box}.uc-axis-x,.uc-axis-x:before,.uc-axis-x:after{box-sizing:border-box}.uc-axis-bottom,.uc-axis-bottom:before,.uc-axis-bottom:after{box-sizing:border-box}.uc-axis-top,.uc-axis-top:before,.uc-axis-top:after{box-sizing:border-box}.uc-tick,.uc-tick:before,.uc-tick:after{box-sizing:border-box}.uc-tick-mark,.uc-tick-mark:before,.uc-tick-mark:after{box-sizing:border-box}.uc-tick-label,.uc-tick-label:before,.uc-tick-label:after{box-sizing:border-box}.uc-axis-title,.uc-axis-title:before,.uc-axis-title:after{box-sizing:border-box}.uc-empty,.uc-empty:before,.uc-empty:after{box-sizing:border-box}.uc-legend,.uc-legend:before,.uc-legend:after{box-sizing:border-box}.uc-legend-top,.uc-legend-top:before,.uc-legend-top:after{box-sizing:border-box}.uc-legend-bottom,.uc-legend-bottom:before,.uc-legend-bottom:after{box-sizing:border-box}.uc-legend-item,.uc-legend-item:before,.uc-legend-item:after{box-sizing:border-box}.uc-legend-chip,.uc-legend-chip:before,.uc-legend-chip:after{box-sizing:border-box}.uc-legend-mark,.uc-legend-mark:before,.uc-legend-mark:after{box-sizing:border-box}.uc-show-all,.uc-show-all:before,.uc-show-all:after{box-sizing:border-box}.uc-show-all-bottom,.uc-show-all-bottom:before,.uc-show-all-bottom:after{box-sizing:border-box}.uc-data-key,.uc-data-key:before,.uc-data-key:after{box-sizing:border-box}.uc-data-panel,.uc-data-panel:before,.uc-data-panel:after{box-sizing:border-box}.uc-data-table,.uc-data-table:before,.uc-data-table:after{box-sizing:border-box}.uc-tooltip,.uc-tooltip:before,.uc-tooltip:after{box-sizing:border-box}.uc-tooltip-head,.uc-tooltip-head:before,.uc-tooltip-head:after{box-sizing:border-box}.uc-tooltip-list,.uc-tooltip-list:before,.uc-tooltip-list:after{box-sizing:border-box}.uc-tooltip-row,.uc-tooltip-row:before,.uc-tooltip-row:after{box-sizing:border-box}.uc-tooltip-chip,.uc-tooltip-chip:before,.uc-tooltip-chip:after{box-sizing:border-box}.uc-tooltip-name,.uc-tooltip-name:before,.uc-tooltip-name:after{box-sizing:border-box}.uc-tooltip-total,.uc-tooltip-total:before,.uc-tooltip-total:after{box-sizing:border-box}.uc-tooltip-part,.uc-tooltip-part:before,.uc-tooltip-part:after{box-sizing:border-box}.uc-tooltip-x,.uc-tooltip-x:before,.uc-tooltip-x:after{box-sizing:border-box}.uc-tooltip-value,.uc-tooltip-value:before,.uc-tooltip-value:after{box-sizing:border-box}.uc-measure,.uc-measure:before,.uc-measure:after{box-sizing:border-box}.uc-limit-mark,.uc-limit-mark:before,.uc-limit-mark:after{box-sizing:border-box}.uc-break,.uc-break:before,.uc-break:after{box-sizing:border-box}.uc-root{--uc-color-axis: var(--u-edge-color-strong, rgba(23, 23, 23, .17));--uc-color-grid: var(--u-hairline, rgba(23, 23, 23, .06));--uc-color-text: var(--u-color-text-muted, #71717a);--uc-color-bg: var(--u-color-surface, #ffffff);--uc-font: var( --u-font-sans, "Geist Sans", "Geist", -apple-system, "Segoe UI", system-ui, sans-serif );--uc-font-mono: var( --u-font-mono, "Geist Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace );--uc-color-warning: var(--u-color-warning, #8a5c00);--uc-color-alarm: var(--u-color-danger, #b13636);--uc-color-ok: var(--u-color-success, #217a4b);--uc-series-1: var(--u-chart-1, #2563eb);--uc-series-2: var(--u-chart-2, #db2777);--uc-series-3: var(--u-chart-3, #059669);--uc-series-4: var(--u-chart-4, #d97706);--uc-series-5: var(--u-chart-5, #7c3aed);--uc-series-6: var(--u-chart-6, #0891b2);--uc-size-tick: 11.5px;--uc-size-title: 12px;--uc-size-legend: 12.5px;--uc-size-tooltip: 12px;--uc-leading-label: 1.25;--uc-leading-text: 1.35;--uc-radius: 6px;--uc-radius-chip: 2px;--uc-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .08);--uc-focus-ring: var(--u-focus-ring, 0 0 0 2px #0e7d72);--uc-color-hover: var(--u-color-surface-sunken, #f4f4f5);--uc-color-pressed: var(--u-color-surface-pressed, #e9e9eb);--uc-transition-state: var(--u-transition, .12s cubic-bezier(.22, 1, .36, 1));--uc-transition: 80ms var(--u-ease-out, cubic-bezier(.22, 1, .36, 1));--uc-delay-stale: var(--u-delay-stale, .2s);--uc-silhouette: color-mix(in srgb, var(--u-color-text, #18181b) 10%, transparent);--uc-ease-swell: var(--u-ease-swell, ease-in-out);--uc-fade: var(--u-duration-medium, .24s) var(--u-ease-out, cubic-bezier(.22, 1, .36, 1));position:relative;display:flex;flex-direction:column;font-family:var(--uc-font);color:var(--uc-color-text);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.uc-plot{position:relative;flex:1 1 auto;min-height:0;min-width:0}.uc-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.uc-plot:focus{outline:none}.uc-plot:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-plot>canvas{box-sizing:border-box}.uc-plot>canvas{position:absolute;inset:0;display:block;pointer-events:none}.uc-plot[data-stale]{pointer-events:none}.uc-plot[data-stale] .uc-limit-label,.uc-plot[data-stale]>.uc-layer-series{opacity:.5;transition:opacity var(--uc-transition-state) var(--uc-delay-stale)}.uc-silhouette{position:absolute;pointer-events:none;transition:opacity var(--uc-fade)}.uc-silhouette[data-leaving]{opacity:0}.uc-silhouette>svg{box-sizing:border-box}.uc-silhouette>svg{display:block}.uc-silhouette-ground{fill:var(--uc-silhouette)}.uc-silhouette-glint{stop-color:var(--uc-color-bg)}.uc-silhouette-band{animation:uc-silhouette-sweep var(--uc-ease-swell) infinite}@keyframes uc-silhouette-sweep{0%{transform:translate(0)}80%{transform:translate(var(--uc-travel))}to{transform:translate(var(--uc-travel))}}.uc-plot[data-arriving]>.uc-layer-series{animation:uc-silhouette-arrive var(--uc-fade)}@keyframes uc-silhouette-arrive{0%{opacity:0}}@media(forced-colors:active){.uc-silhouette-ground{fill:GrayText}.uc-silhouette-band{display:none}}.uc-axes{position:absolute;inset:0;pointer-events:none}.uc-axis{position:absolute}.uc-axis-line{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-axis-line{top:0;width:1px;height:100%}.uc-axis-left>.uc-axis-line{right:0}.uc-axis-right>.uc-axis-line{left:0}.uc-axis-x>.uc-axis-line{left:0;width:100%;height:1px}.uc-axis-bottom>.uc-axis-line{top:0}.uc-axis-top>.uc-axis-line{bottom:0}.uc-tick{position:absolute}.uc-axis-y>.uc-tick{left:0;right:0;height:1px}.uc-axis-x>.uc-tick{top:0;bottom:0;width:1px}.uc-tick-mark{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-tick>.uc-tick-mark{top:0;width:5px;height:1px}.uc-axis-left>.uc-tick>.uc-tick-mark{right:0}.uc-axis-right>.uc-tick>.uc-tick-mark{left:0}.uc-axis-x>.uc-tick>.uc-tick-mark{left:0;width:1px;height:5px}.uc-axis-bottom>.uc-tick>.uc-tick-mark{top:0}.uc-axis-top>.uc-tick>.uc-tick-mark{bottom:0}.uc-tick-label{position:absolute;white-space:pre;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);letter-spacing:.005em;color:var(--uc-color-text)}.uc-axis-y>.uc-tick>.uc-tick-label{top:50%;transform:translateY(-50%)}.uc-axis-left>.uc-tick>.uc-tick-label{text-align:right}.uc-axis-x>.uc-tick>.uc-tick-label{text-align:center}.uc-axis-right>.uc-tick>.uc-tick-label{text-align:left}.uc-axis-title{position:absolute;white-space:pre;font-size:var(--uc-size-title);line-height:var(--uc-leading-label);letter-spacing:.01em;color:var(--uc-color-text)}.uc-axis-x>.uc-axis-title{left:0;right:0;text-align:center}.uc-axis-bottom>.uc-axis-title{bottom:0}.uc-axis-top>.uc-axis-title{top:0}.uc-axis-y>.uc-axis-title{top:50%;writing-mode:vertical-rl}.uc-axis-left>.uc-axis-title{left:0;transform:translateY(-50%) rotate(180deg)}.uc-axis-right>.uc-axis-title{right:0;transform:translateY(-50%)}.uc-empty{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--uc-size-legend);color:var(--uc-color-text)}.uc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--uc-size-legend);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-legend-top{order:-1;padding-bottom:8px}.uc-legend-bottom{order:1;padding-top:8px}.uc-legend-item{display:inline-flex;align-items:center;gap:6px;cursor:default}.uc-legend-chip{display:inline-block;width:10px;height:10px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-legend-mark{display:block;flex:none;forced-color-adjust:none}button.uc-legend-item{box-sizing:border-box}button.uc-legend-item{padding:0;border:0;border-radius:var(--uc-radius-chip);corner-shape:squircle;background:none;font:inherit;color:inherit;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}button.uc-legend-item:hover{box-sizing:border-box}button.uc-legend-item:hover{background:var(--uc-color-hover)}button.uc-legend-item:hover:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:hover:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-hover)}button.uc-legend-item:active{box-sizing:border-box}button.uc-legend-item:active{background:var(--uc-color-pressed)}button.uc-legend-item:active:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:active:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-pressed)}button.uc-legend-item:focus-visible{box-sizing:border-box}button.uc-legend-item:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-legend-item[data-hidden]{text-decoration:line-through}.uc-legend-item[data-hidden]>.uc-legend-chip{opacity:.3}.uc-show-all{position:absolute;top:0;left:0;z-index:1;translate:calc(-100% - 6px) 6px;padding:2px 8px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);font:inherit;font-size:var(--uc-size-tick);line-height:var(--uc-leading-text);color:var(--uc-color-text);white-space:nowrap;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}.uc-show-all-bottom{translate:calc(-100% - 6px) calc(-100% - 6px)}.uc-show-all:hover{background:var(--uc-color-hover)}.uc-show-all:active{background:var(--uc-color-pressed)}.uc-show-all:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-data-key{margin-left:auto}.uc-data-panel{position:absolute;inset:0;z-index:3;overflow:auto;background:var(--uc-color-bg);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-data-panel:focus{outline:none}.uc-data-panel:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-root:has(>.uc-data-panel)>.uc-plot,.uc-root:has(>.uc-data-panel)>.uc-show-all{visibility:hidden}.uc-data-table{width:100%;border-collapse:collapse}.uc-data-table+.uc-data-table{margin-top:12px}.uc-data-table>caption{box-sizing:border-box}.uc-data-table>caption{padding-bottom:6px;text-align:left}.uc-data-table th,.uc-data-table td{box-sizing:border-box}.uc-data-table th,.uc-data-table td{padding:3px 8px;border-bottom:1px solid var(--uc-color-grid);white-space:nowrap;font-weight:400;text-align:right}.uc-data-table>thead th{box-sizing:border-box}.uc-data-table>thead th{position:sticky;top:0;background:var(--uc-color-bg);border-bottom-color:var(--uc-color-axis)}.uc-data-table th:first-child{box-sizing:border-box}.uc-data-table th:first-child{text-align:left}.uc-data-table>tbody th{box-sizing:border-box}.uc-data-table>tbody td{box-sizing:border-box}.uc-data-table>tbody th,.uc-data-table>tbody td{font-family:var(--uc-font-mono)}.uc-tooltip{position:absolute;top:0;left:0;z-index:2;pointer-events:none;opacity:0;transition:opacity var(--uc-transition);min-width:96px;padding:7px 9px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);box-shadow:var(--uc-shadow);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-tooltip-head{font-family:var(--uc-font-mono);font-size:var(--uc-size-tick);letter-spacing:.01em;padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid var(--uc-color-grid)}.uc-tooltip-list{display:grid;grid-template-columns:auto 1fr auto;gap:3px 8px;align-items:center}.uc-tooltip-row{display:contents}.uc-tooltip-chip{width:8px;height:8px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-tooltip-name{white-space:nowrap}.uc-tooltip-total{grid-column:1 / 3}.uc-tooltip-part{grid-column:2}.uc-tooltip-x{margin-left:6px;font-family:var(--uc-font-mono)}.uc-tooltip-value{font-family:var(--uc-font-mono);text-align:right;white-space:nowrap}@media(prefers-reduced-motion:reduce){.uc-tooltip,button.uc-legend-item,.uc-show-all{transition:none}.uc-silhouette-band{display:none}.uc-silhouette{transition:none}.uc-plot[data-arriving]>.uc-layer-series{animation:none}.uc-plot[data-stale] .uc-limit-label,.uc-plot[data-stale]>.uc-layer-series{transition-duration:0s}}.uc-measure{position:absolute;inset:0 auto auto 0;transform:none;visibility:hidden;pointer-events:none;white-space:pre;writing-mode:horizontal-tb}.uc-limit-label{position:absolute;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--uc-color-bg);padding:0 2px}.uc-limit-label[data-severity=warning]{color:var(--uc-color-warning)}.uc-limit-label[data-severity=alarm]{color:var(--uc-color-alarm)}.uc-limit-label[data-role=control],.uc-limit-label[data-role=zone],.uc-limit-label[data-own]{color:var(--uc-color-text)}.uc-limit-mark{display:inline-block;width:10px;margin-right:4px;vertical-align:middle;border-top:2px dashed currentColor}.uc-limit-label[data-role=control]>.uc-limit-mark{border-top-style:solid}.uc-limit-label[data-role=zone]>.uc-limit-mark{border-top-style:dotted}.uc-axis-y .uc-limit-label{transform:translateY(-50%)}.uc-axis-left .uc-limit-label{right:9px}.uc-axis-right .uc-limit-label{left:9px}.uc-break{position:absolute;top:0;width:7px;height:9px;margin-left:-3.5px;color:var(--uc-color-text)}.uc-break:before,.uc-break:after{content:"";position:absolute;top:0;width:1px;height:9px;background:currentColor;opacity:.55;transform:skew(-20deg)}.uc-break:before{left:1px}.uc-break:after{left:4px}}
1
+ @layer umriss.tokens,umriss.base,umriss.components;@layer umriss.components{.uc-root,.uc-root:before,.uc-root:after{box-sizing:border-box}.uc-plot,.uc-plot:before,.uc-plot:after{box-sizing:border-box}.uc-sr,.uc-sr:before,.uc-sr:after{box-sizing:border-box}.uc-limit-label,.uc-limit-label:before,.uc-limit-label:after{box-sizing:border-box}.uc-layer-series,.uc-layer-series:before,.uc-layer-series:after{box-sizing:border-box}.uc-silhouette,.uc-silhouette:before,.uc-silhouette:after{box-sizing:border-box}.uc-silhouette-ground,.uc-silhouette-ground:before,.uc-silhouette-ground:after{box-sizing:border-box}.uc-silhouette-glint,.uc-silhouette-glint:before,.uc-silhouette-glint:after{box-sizing:border-box}.uc-silhouette-band,.uc-silhouette-band:before,.uc-silhouette-band:after{box-sizing:border-box}.uc-axes,.uc-axes:before,.uc-axes:after{box-sizing:border-box}.uc-axis,.uc-axis:before,.uc-axis:after{box-sizing:border-box}.uc-axis-line,.uc-axis-line:before,.uc-axis-line:after{box-sizing:border-box}.uc-axis-y,.uc-axis-y:before,.uc-axis-y:after{box-sizing:border-box}.uc-axis-left,.uc-axis-left:before,.uc-axis-left:after{box-sizing:border-box}.uc-axis-right,.uc-axis-right:before,.uc-axis-right:after{box-sizing:border-box}.uc-axis-x,.uc-axis-x:before,.uc-axis-x:after{box-sizing:border-box}.uc-axis-bottom,.uc-axis-bottom:before,.uc-axis-bottom:after{box-sizing:border-box}.uc-axis-top,.uc-axis-top:before,.uc-axis-top:after{box-sizing:border-box}.uc-tick,.uc-tick:before,.uc-tick:after{box-sizing:border-box}.uc-tick-mark,.uc-tick-mark:before,.uc-tick-mark:after{box-sizing:border-box}.uc-tick-label,.uc-tick-label:before,.uc-tick-label:after{box-sizing:border-box}.uc-axis-title,.uc-axis-title:before,.uc-axis-title:after{box-sizing:border-box}.uc-empty,.uc-empty:before,.uc-empty:after{box-sizing:border-box}.uc-legend,.uc-legend:before,.uc-legend:after{box-sizing:border-box}.uc-legend-top,.uc-legend-top:before,.uc-legend-top:after{box-sizing:border-box}.uc-legend-bottom,.uc-legend-bottom:before,.uc-legend-bottom:after{box-sizing:border-box}.uc-legend-item,.uc-legend-item:before,.uc-legend-item:after{box-sizing:border-box}.uc-legend-chip,.uc-legend-chip:before,.uc-legend-chip:after{box-sizing:border-box}.uc-legend-mark,.uc-legend-mark:before,.uc-legend-mark:after{box-sizing:border-box}.uc-show-all,.uc-show-all:before,.uc-show-all:after{box-sizing:border-box}.uc-show-all-bottom,.uc-show-all-bottom:before,.uc-show-all-bottom:after{box-sizing:border-box}.uc-data-key,.uc-data-key:before,.uc-data-key:after{box-sizing:border-box}.uc-data-panel,.uc-data-panel:before,.uc-data-panel:after{box-sizing:border-box}.uc-data-table,.uc-data-table:before,.uc-data-table:after{box-sizing:border-box}.uc-tooltip,.uc-tooltip:before,.uc-tooltip:after{box-sizing:border-box}.uc-tooltip-head,.uc-tooltip-head:before,.uc-tooltip-head:after{box-sizing:border-box}.uc-tooltip-list,.uc-tooltip-list:before,.uc-tooltip-list:after{box-sizing:border-box}.uc-tooltip-row,.uc-tooltip-row:before,.uc-tooltip-row:after{box-sizing:border-box}.uc-tooltip-chip,.uc-tooltip-chip:before,.uc-tooltip-chip:after{box-sizing:border-box}.uc-tooltip-name,.uc-tooltip-name:before,.uc-tooltip-name:after{box-sizing:border-box}.uc-tooltip-total,.uc-tooltip-total:before,.uc-tooltip-total:after{box-sizing:border-box}.uc-tooltip-part,.uc-tooltip-part:before,.uc-tooltip-part:after{box-sizing:border-box}.uc-tooltip-x,.uc-tooltip-x:before,.uc-tooltip-x:after{box-sizing:border-box}.uc-tooltip-value,.uc-tooltip-value:before,.uc-tooltip-value:after{box-sizing:border-box}.uc-measure,.uc-measure:before,.uc-measure:after{box-sizing:border-box}.uc-limit-mark,.uc-limit-mark:before,.uc-limit-mark:after{box-sizing:border-box}.uc-break,.uc-break:before,.uc-break:after{box-sizing:border-box}.uc-root{--uc-color-axis: var(--u-edge-color-strong, rgba(23, 23, 23, .17));--uc-color-grid: var(--u-hairline, rgba(23, 23, 23, .06));--uc-color-text: var(--u-color-text-muted, #71717a);--uc-color-bg: var(--u-color-surface, #ffffff);--uc-font: var( --u-font-sans, "Geist Sans", "Geist", -apple-system, "Segoe UI", system-ui, sans-serif );--uc-font-mono: var( --u-font-mono, "Geist Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace );--uc-color-warning: var(--u-color-warning, #8a5c00);--uc-color-alarm: var(--u-color-danger, #b13636);--uc-color-ok: var(--u-color-success, #217a4b);--uc-series-1: var(--u-chart-1, #2563eb);--uc-series-2: var(--u-chart-2, #db2777);--uc-series-3: var(--u-chart-3, #059669);--uc-series-4: var(--u-chart-4, #d97706);--uc-series-5: var(--u-chart-5, #7c3aed);--uc-series-6: var(--u-chart-6, #0891b2);--uc-size-tick: 11.5px;--uc-size-title: 12px;--uc-size-legend: 12.5px;--uc-size-tooltip: 12px;--uc-leading-label: 1.25;--uc-leading-text: 1.35;--uc-radius: 6px;--uc-radius-chip: 2px;--uc-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .08);--uc-focus-ring: var(--u-focus-ring, 0 0 0 2px #0e7d72);--uc-color-hover: var(--u-color-surface-sunken, #f4f4f5);--uc-color-pressed: var(--u-color-surface-pressed, #e9e9eb);--uc-transition-state: var(--u-transition, .12s cubic-bezier(.22, 1, .36, 1));--uc-transition: 80ms var(--u-ease-out, cubic-bezier(.22, 1, .36, 1));--uc-delay-stale: var(--u-delay-stale, .2s);--uc-silhouette: color-mix(in srgb, var(--u-color-text, #18181b) 10%, transparent);--uc-ease-swell: var(--u-ease-swell, ease-in-out);--uc-fade: var(--u-duration-medium, .24s) var(--u-ease-out, cubic-bezier(.22, 1, .36, 1));position:relative;display:flex;flex-direction:column;font-family:var(--uc-font);color:var(--uc-color-text);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.uc-plot{position:relative;flex:1 1 auto;min-height:0;min-width:0}.uc-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.uc-plot:focus{outline:none}.uc-plot:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-plot>canvas{box-sizing:border-box}.uc-plot>canvas{position:absolute;inset:0;display:block;pointer-events:none}.uc-plot[data-stale]{pointer-events:none}.uc-plot[data-stale] .uc-limit-label,.uc-plot[data-stale]>.uc-layer-series{opacity:.5;transition:opacity var(--uc-transition-state) var(--uc-delay-stale)}.uc-silhouette{position:absolute;pointer-events:none;transition:opacity var(--uc-fade)}.uc-silhouette[data-leaving]{opacity:0}.uc-silhouette>svg{box-sizing:border-box}.uc-silhouette>svg{display:block}.uc-silhouette-ground{fill:var(--uc-silhouette)}.uc-silhouette-glint{stop-color:var(--uc-color-bg)}.uc-silhouette-band{animation:uc-silhouette-sweep var(--uc-ease-swell) infinite}@keyframes uc-silhouette-sweep{0%{transform:translate(0)}80%{transform:translate(var(--uc-travel))}to{transform:translate(var(--uc-travel))}}.uc-plot[data-arriving]>.uc-layer-series{animation:uc-silhouette-arrive var(--uc-fade)}@keyframes uc-silhouette-arrive{0%{opacity:0}}@media(forced-colors:active){.uc-silhouette-ground{fill:GrayText}.uc-silhouette-band{display:none}}.uc-axes{position:absolute;inset:0;pointer-events:none}.uc-axis{position:absolute}.uc-axis-line{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-axis-line{top:0;width:1px;height:100%}.uc-axis-left>.uc-axis-line{right:0}.uc-axis-right>.uc-axis-line{left:0}.uc-axis-x>.uc-axis-line{left:0;width:100%;height:1px}.uc-axis-bottom>.uc-axis-line{top:0}.uc-axis-top>.uc-axis-line{bottom:0}.uc-tick{position:absolute}.uc-axis-y>.uc-tick{left:0;right:0;height:1px}.uc-axis-x>.uc-tick{top:0;bottom:0;width:1px}.uc-tick-mark{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-tick>.uc-tick-mark{top:0;width:5px;height:1px}.uc-axis-left>.uc-tick>.uc-tick-mark{right:0}.uc-axis-right>.uc-tick>.uc-tick-mark{left:0}.uc-axis-x>.uc-tick>.uc-tick-mark{left:0;width:1px;height:5px}.uc-axis-bottom>.uc-tick>.uc-tick-mark{top:0}.uc-axis-top>.uc-tick>.uc-tick-mark{bottom:0}.uc-tick-label{position:absolute;white-space:pre;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);letter-spacing:.005em;color:var(--uc-color-text)}.uc-axis-y>.uc-tick>.uc-tick-label{top:50%;transform:translateY(-50%)}.uc-axis-left>.uc-tick>.uc-tick-label{text-align:right}.uc-axis-x>.uc-tick>.uc-tick-label{text-align:center}.uc-axis-right>.uc-tick>.uc-tick-label{text-align:left}.uc-axis-title{position:absolute;white-space:pre;font-size:var(--uc-size-title);line-height:var(--uc-leading-label);letter-spacing:.01em;color:var(--uc-color-text)}.uc-axis-x>.uc-axis-title{left:0;right:0;text-align:center}.uc-axis-bottom>.uc-axis-title{bottom:0}.uc-axis-top>.uc-axis-title{top:0}.uc-axis-y>.uc-axis-title{top:50%;writing-mode:vertical-rl}.uc-axis-left>.uc-axis-title{left:0;transform:translateY(-50%) rotate(180deg)}.uc-axis-right>.uc-axis-title{right:0;transform:translateY(-50%)}.uc-empty{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--uc-size-legend);color:var(--uc-color-text)}.uc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--uc-size-legend);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-legend-top{order:-1;padding-bottom:8px}.uc-legend-bottom{order:1;padding-top:8px}.uc-legend-item{display:inline-flex;align-items:center;gap:6px;cursor:default}.uc-legend-chip{display:inline-block;width:10px;height:10px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-legend-mark{display:block;flex:none;forced-color-adjust:none}button.uc-legend-item{box-sizing:border-box}button.uc-legend-item{padding:0;border:0;border-radius:var(--uc-radius-chip);corner-shape:squircle;background:none;font:inherit;color:inherit;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}button.uc-legend-item:hover{box-sizing:border-box}button.uc-legend-item:hover{background:var(--uc-color-hover)}button.uc-legend-item:hover:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:hover:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-hover)}button.uc-legend-item:active{box-sizing:border-box}button.uc-legend-item:active{background:var(--uc-color-pressed)}button.uc-legend-item:active:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:active:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-pressed)}button.uc-legend-item:focus-visible{box-sizing:border-box}button.uc-legend-item:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-legend-item[data-hidden]{text-decoration:line-through}.uc-legend-item[data-hidden]>.uc-legend-chip{opacity:.3}.uc-show-all{position:absolute;top:0;left:0;z-index:1;translate:calc(-100% - 6px) 6px;padding:2px 8px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);font:inherit;font-size:var(--uc-size-tick);line-height:var(--uc-leading-text);color:var(--uc-color-text);white-space:nowrap;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}.uc-show-all-bottom{translate:calc(-100% - 6px) calc(-100% - 6px)}.uc-show-all:hover{background:var(--uc-color-hover)}.uc-show-all:active{background:var(--uc-color-pressed)}.uc-show-all:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-data-key{margin-left:auto}.uc-data-panel{position:absolute;inset:0;z-index:3;overflow:auto;background:var(--uc-color-bg);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-data-panel:focus{outline:none}.uc-data-panel:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-root:has(>.uc-data-panel)>.uc-plot,.uc-root:has(>.uc-data-panel)>.uc-show-all{visibility:hidden}.uc-data-table{width:100%;border-collapse:collapse}.uc-data-table+.uc-data-table{margin-top:12px}.uc-data-table>caption{box-sizing:border-box}.uc-data-table>caption{padding-bottom:6px;text-align:left}.uc-data-table th,.uc-data-table td{box-sizing:border-box}.uc-data-table th,.uc-data-table td{padding:3px 8px;border-bottom:1px solid var(--uc-color-grid);white-space:nowrap;font-weight:400;text-align:right}.uc-data-table>thead th{box-sizing:border-box}.uc-data-table>thead th{position:sticky;top:0;background:var(--uc-color-bg);border-bottom-color:var(--uc-color-axis)}.uc-data-table th:first-child{box-sizing:border-box}.uc-data-table th:first-child{text-align:left}.uc-data-table>tbody th{box-sizing:border-box}.uc-data-table>tbody td{box-sizing:border-box}.uc-data-table>tbody th,.uc-data-table>tbody td{font-family:var(--uc-font-mono)}.uc-tooltip{position:absolute;top:0;left:0;z-index:2;pointer-events:none;opacity:0;transition:opacity var(--uc-transition);min-width:96px;padding:7px 9px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);box-shadow:var(--uc-shadow);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-tooltip-head{font-family:var(--uc-font-mono);font-size:var(--uc-size-tick);letter-spacing:.01em;padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid var(--uc-color-grid)}.uc-tooltip-list{display:grid;grid-template-columns:auto 1fr auto;gap:3px 8px;align-items:center}.uc-tooltip-row{display:contents}.uc-tooltip-chip{width:8px;height:8px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-tooltip-name{white-space:nowrap}.uc-tooltip-total{grid-column:1 / 3}.uc-tooltip-part{grid-column:2}.uc-tooltip-x{margin-left:6px;font-family:var(--uc-font-mono)}.uc-tooltip-value{font-family:var(--uc-font-mono);text-align:right;white-space:nowrap}@media(pointer:coarse){.uc-legend{row-gap:10px}button.uc-legend-item,.uc-show-all{position:relative}.uc-show-all{position:absolute}button.uc-legend-item:after{box-sizing:border-box}button.uc-legend-item:after,.uc-show-all:after{content:"";position:absolute;inset:-4px 0}}@media(prefers-reduced-motion:reduce){.uc-tooltip,button.uc-legend-item,.uc-show-all{transition:none}.uc-silhouette-band{display:none}.uc-silhouette{transition:none}.uc-plot[data-arriving]>.uc-layer-series{animation:none}.uc-plot[data-stale] .uc-limit-label,.uc-plot[data-stale]>.uc-layer-series{transition-duration:0s}}.uc-measure{position:absolute;inset:0 auto auto 0;transform:none;visibility:hidden;pointer-events:none;white-space:pre;writing-mode:horizontal-tb}.uc-limit-label{position:absolute;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--uc-color-bg);padding:0 2px}.uc-limit-label[data-severity=warning]{color:var(--uc-color-warning)}.uc-limit-label[data-severity=alarm]{color:var(--uc-color-alarm)}.uc-limit-label[data-role=control],.uc-limit-label[data-role=zone],.uc-limit-label[data-own]{color:var(--uc-color-text)}.uc-limit-mark{display:inline-block;width:10px;margin-right:4px;vertical-align:middle;border-top:2px dashed currentColor}.uc-limit-label[data-role=control]>.uc-limit-mark{border-top-style:solid}.uc-limit-label[data-role=zone]>.uc-limit-mark{border-top-style:dotted}.uc-axis-y .uc-limit-label{transform:translateY(-50%)}.uc-axis-left .uc-limit-label{right:9px}.uc-axis-right .uc-limit-label{left:9px}.uc-break{position:absolute;top:0;width:7px;height:9px;margin-left:-3.5px;color:var(--uc-color-text)}.uc-break:before,.uc-break:after{content:"";position:absolute;top:0;width:1px;height:9px;background:currentColor;opacity:.55;transform:skew(-20deg)}.uc-break:before{left:1px}.uc-break:after{left:4px}}