{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "chart",
  "title": "Chart",
  "description": "Hairlines and dots against one very large number that rolls to the bar you point at.",
  "registryDependencies": [
    "https://thedirectors.agency/ui/r/0nlytype.json"
  ],
  "files": [
    {
      "path": "registry/0nlytype/ui/chart.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { roll } from \"@/lib/0nlytype/roll\"\nimport { rove } from \"@/lib/0nlytype/rove\"\n\n/** One point: its label and a number under each series key (`value` when there's one series). */\ntype ChartDatum = { label: string; value?: number; [key: string]: string | number | undefined }\n/** A series: the key it reads from each datum, and its name in the readout. */\ntype ChartSeries = { key: string; label: string }\n\ntype ChartShared = Omit<React.ComponentProps<\"figure\">, \"children\"> & {\n  data: ChartDatum[]\n  /** Two or more series turn the one giant number into a short list, read at the point you're on. */\n  series?: ChartSeries[]\n  /** Names the chart for assistive tech, e.g. \"Visits by month, 2026\". */\n  label: string\n  /** What the values count, e.g. \"visits\". Reads \"visits in September\" beside the number. */\n  unit?: string\n  /** The point the number rests on; it carries the accent. Defaults to the last. */\n  now?: number\n  /** The value the tallest bar could reach. Defaults to the next round number above the largest. */\n  max?: number\n  format?: (value: number) => string\n  /** Pins the pointed-at look on the point the number is on; set on the root for documentation. */\n  \"data-force\"?: string\n}\n\ntype ChartProps = ChartShared & {\n  /**\n   * stems: hairlines and dots against one very large number. spark: word-sized, set in a sentence,\n   * the number after it. isotype: each month a column of dots, one dot a fixed amount, counted not scaled.\n   */\n  variant?: \"stems\" | \"spark\" | \"isotype\"\n  /** isotype: what one dot counts. Defaults to a tenth of the ceiling. */\n  each?: number\n  /** stems: bars stand up from the baseline, or run along from the start edge as a ledger. */\n  orientation?: \"vertical\" | \"horizontal\"\n  /** stems with series: one stem per column, each series a length of it, a dot at every joint. */\n  stacked?: boolean\n}\n\n/** What a chart's drawing layer is given: each point's [from, to] per series, 0–1 of the ceiling. */\ntype ChartGeometry = { spans: [number, number][][]; series: ChartSeries[] }\n\ntype ChartFrameProps = Omit<ChartProps, \"variant\"> & {\n  variant: string\n  /** Drawn in the plot under the points (line-chart, area-chart). */\n  layer?: (geometry: ChartGeometry) => React.ReactNode\n}\n\nconst figures = new Intl.NumberFormat(\"en-GB\")\n\n// ponytail: 1, 2, 2.5, 5, 10 steps; swap for d3-scale ticks if axes ever need more than a ceiling.\nfunction ceiling(n: number) {\n  if (n <= 0) return 1\n  const p = 10 ** Math.floor(Math.log10(n))\n  return ([1, 2, 2.5, 5, 10].find((s) => s * p >= n) ?? 10) * p\n}\n\n/**\n * The frame every 0nlyType chart shares: the rolling readout (one giant number, or a short list for\n * several series), a plot of one button per point, and the axis. Point at or focus a point and the\n * number rolls to it; Left and Right (or Up and Down) move between points, Home and End jump.\n */\nfunction ChartFrame({\n  data,\n  series,\n  label,\n  unit,\n  now = data.length - 1,\n  max,\n  format = figures.format,\n  variant,\n  each,\n  orientation = \"vertical\",\n  stacked = false,\n  layer,\n  className,\n  style,\n  ...props\n}: ChartFrameProps) {\n  const [shown, setShown] = React.useState(now)\n  // Nothing counts itself in until the person has pointed at something.\n  const [moved, setMoved] = React.useState(false)\n  const target = React.useRef(now)\n  const values = React.useRef<(HTMLSpanElement | null)[]>([])\n  const plot = React.useRef<HTMLSpanElement>(null)\n  const spark = variant === \"spark\"\n  const isotype = variant === \"isotype\"\n  // Spark and isotype read one series; stems, lines and areas read them all.\n  const list = series?.length ? (spark || isotype ? series.slice(0, 1) : series) : [{ key: \"value\", label: unit ?? \"\" }]\n  const multi = list.length > 1\n  const stack = multi && stacked\n  const across = orientation === \"horizontal\" && !spark && !isotype\n  // ponytail: missing values count as 0; add gaps in the line when data with holes turns up.\n  const raw = data.map((d) => {\n    let from = 0\n    return list.map((s): [number, number] => {\n      const v = Number(d[s.key] ?? 0)\n      const span: [number, number] = stack ? [from, from + v] : [0, v]\n      from += v\n      return span\n    })\n  })\n  const tops = raw.map((s) => Math.max(...s.map((p) => p[1])))\n  const top = max ?? ceiling(Math.max(...tops))\n  const unitEach = each ?? top / 10\n  const rows = isotype ? Math.max(1, Math.round(top / unitEach)) : 0\n  const spans = raw.map((s) => s.map(([a, b]): [number, number] => [Math.min(a / top, 1), Math.min(b / top, 1)]))\n  // A sparkline spans its own range, low to high, so a word-sized line still shows the shape.\n  const lo = Math.min(...tops)\n  const hi = Math.max(...tops)\n  // What the readout shows at point i: one number, or each series then (stacked) the sum.\n  const reading = (i: number) => (multi ? [...raw[i].map((p) => p[1] - p[0]), ...(stack ? [tops[i]] : [])] : [tops[i]])\n\n  function show(i: number) {\n    if (i === target.current) return\n    const was = reading(target.current)\n    const next = reading(i)\n    target.current = i\n    setMoved(true)\n    let rolled = false\n    values.current.forEach((el, k) => {\n      if (!el || next[k] === was[k]) return\n      rolled = true\n      roll(el, () => setShown(target.current), \"0.3em\", next[k] > was[k] ? 1 : -1)\n    })\n    if (!rolled) setShown(i)\n  }\n\n  const at = data[shown] ?? data[now]\n  const said = reading(shown)\n  const words = unit ? `${unit} in ${at.label}` : at.label\n  // A sparkline sits in a sentence, so it's phrasing content: spans, not a figure.\n  const Root = (spark ? \"span\" : \"figure\") as \"figure\"\n  const Read = (spark ? \"span\" : \"figcaption\") as \"figcaption\"\n  const read = multi ? (\n    <Read data-slot=\"chart-read\" className=\"ot-chart-read\" data-list=\"\">\n      <span className=\"ot-chart-at\">{at.label}</span>\n      <span className=\"ot-chart-list\">\n        {said.map((v, k) => (\n          <span key={k} className=\"ot-chart-row\" data-series={k < list.length ? k : undefined} data-total={k === list.length || undefined}>\n            <span ref={(el) => void (values.current[k] = el)} className=\"ot-chart-value\">\n              {format(v)}\n            </span>\n            <span className=\"ot-chart-name\">\n              <i className=\"ot-chart-swatch\" aria-hidden=\"true\" />\n              {k < list.length ? list[k].label : unit ? `${unit} in all` : \"in all\"}\n            </span>\n          </span>\n        ))}\n      </span>\n    </Read>\n  ) : (\n    <Read data-slot=\"chart-read\" className=\"ot-chart-read\">\n      <span ref={(el) => void (values.current[0] = el)} className=\"ot-chart-value\">\n        {format(said[0])}\n      </span>\n      {spark ? \" \" : null}\n      <span>{words}</span>\n    </Read>\n  )\n  const Plot = (spark ? \"span\" : \"div\") as \"span\"\n\n  return (\n    <Root\n      data-slot=\"chart\"\n      data-variant={variant}\n      data-orientation={across ? \"horizontal\" : undefined}\n      data-stacked={stack || undefined}\n      data-moved={moved || undefined}\n      className={cn(\"ot-chart\", className)}\n      style={{ \"--n\": data.length, \"--rows\": rows, \"--m\": list.length, ...style } as React.CSSProperties}\n      {...props}\n    >\n      {spark ? null : read}\n      <Plot\n        ref={plot}\n        role=\"group\"\n        aria-label={label}\n        data-slot=\"chart-plot\"\n        className=\"ot-chart-plot\"\n        onKeyDown={(e) => rove(e, \"[data-slot=chart-bar]\")}\n        onPointerLeave={() => plot.current && !plot.current.contains(document.activeElement) && show(now)}\n        onBlur={(e) => !plot.current?.contains(e.relatedTarget) && show(now)}\n      >\n        {layer ? layer({ spans, series: list }) : null}\n        {data.map((d, i) => {\n          const on = tops[i] > 0 ? Math.min(rows, Math.max(1, Math.round(tops[i] / unitEach))) : 0\n          const read = multi\n            ? `${d.label}: ${list.map((s, k) => `${s.label} ${format(raw[i][k][1] - raw[i][k][0])}`).join(\", \")}${stack ? `, ${format(tops[i])} in all` : \"\"}`\n            : `${d.label}, ${format(tops[i])}${unit ? ` ${unit}` : \"\"}`\n          return (\n            <button\n              key={d.label}\n              type=\"button\"\n              tabIndex={i === shown ? 0 : -1}\n              data-slot=\"chart-bar\"\n              className=\"ot-chart-bar\"\n              style={{ \"--v\": Math.min(tops[i] / top, 1), \"--s\": hi > lo ? 0.2 + (0.8 * (tops[i] - lo)) / (hi - lo) : 1 } as React.CSSProperties}\n              data-now={i === now || undefined}\n              data-shown={i === shown || undefined}\n              aria-label={read}\n              onPointerEnter={() => show(i)}\n              onFocus={() => show(i)}\n            >\n              {Array.from({ length: rows }, (_, k) => (\n                <i key={k} data-on={k < on || undefined} data-top={k === on - 1 || undefined} style={{ \"--k\": k } as React.CSSProperties} />\n              ))}\n              {multi\n                ? spans[i].map(([b, v], k) => (\n                    <span\n                      key={k}\n                      className=\"ot-chart-mark\"\n                      data-series={k}\n                      data-top={k === list.length - 1 || undefined}\n                      style={{ \"--b\": b, \"--v\": v, \"--k\": k } as React.CSSProperties}\n                    />\n                  ))\n                : null}\n            </button>\n          )\n        })}\n      </Plot>\n      {spark ? (\n        <>\n          {\" \"}\n          {read}\n        </>\n      ) : (\n        <div data-slot=\"chart-axis\" className=\"ot-chart-axis\" aria-hidden=\"true\">\n          {data.map((d, i) => (\n            <span key={d.label} data-shown={i === shown || undefined}>{across ? d.label : d.label.charAt(0)}</span>\n          ))}\n        </div>\n      )}\n      {isotype ? (\n        <span data-slot=\"chart-key\" className=\"ot-chart-key\">\n          <i aria-hidden=\"true\" />\n          One dot, {format(unitEach)}\n          {unit ? ` ${unit}` : \"\"}\n        </span>\n      ) : null}\n    </Root>\n  )\n}\n\n/**\n * Hairlines and dots against one very large number. Point at a bar, or focus it, and\n * its line inks, its dot swells and the number rolls to it; leave and it rolls back.\n * Every bar is a button labelled with its value, so the data is read without a pointer.\n */\nfunction Chart({ variant = \"stems\", ...props }: ChartProps) {\n  return <ChartFrame variant={variant} {...props} />\n}\n\nexport { Chart, ChartFrame, type ChartProps, type ChartShared, type ChartDatum, type ChartSeries, type ChartGeometry }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/0nlytype/styles/chart.css",
      "content": "@layer components {\n  /* ── ot-chart ── hairlines and dots, against one very large number */\n  .ot-chart { margin: 0; display: grid; gap: var(--ot-space-5); }\n  .ot-chart:not([data-variant=\"spark\"]) { container-type: inline-size; }\n  .ot-chart-read { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--ot-space-4); color: var(--ot-graphite); }\n  /* The number is as large as the chart allows: SPECTRA's scale contrast, tiny data against giant type. */\n  .ot-chart-value { display: inline-block; font-size: clamp(var(--ot-ff), 16cqi, var(--ot-fff)); line-height: 0.9; letter-spacing: var(--ot-ff-tr); font-weight: 200; color: var(--ot-ink); font-variant-numeric: tabular-nums lining-nums; }\n  .ot-chart-plot {\n    display: grid; grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); height: 13rem;\n    background: repeating-linear-gradient(to top, var(--ot-rule) 0 1px, transparent 1px 25%);\n    box-shadow: inset 0 calc(-1 * var(--ot-hairline)) 0 var(--ot-ink);\n  }\n  .ot-chart-bar { position: relative; appearance: none; border: 0; margin: 0; padding: 0; background: none; cursor: crosshair; }\n  .ot-chart-bar::before, .ot-chart-bar::after { content: \"\"; position: absolute; left: 50%; pointer-events: none; }\n  .ot-chart-bar::before { bottom: 0; width: var(--ot-hairline); height: calc(var(--v) * 100%); translate: -50% 0; background: var(--ot-pencil); transition: width var(--ot-allegro), background-color var(--ot-allegro); }\n  .ot-chart-bar::after {\n    bottom: calc(var(--v) * 100%); width: 7px; height: 7px; border-radius: 50%; translate: -50% 50%;\n    background: var(--ot-paper); box-shadow: inset 0 0 0 var(--ot-hairline) var(--ot-pencil);\n    transition: scale var(--ot-moderato) var(--ot-spiccato), background-color var(--ot-allegro), box-shadow var(--ot-allegro);\n  }\n  .ot-chart-bar:is(:hover, :focus-visible)::before, .ot-chart[data-force~=\"hover\"] > .ot-chart-plot > .ot-chart-bar[data-shown]::before { width: var(--ot-stroke); background: var(--ot-ink); }\n  .ot-chart-bar:is(:hover, :focus-visible)::after, .ot-chart[data-force~=\"hover\"] > .ot-chart-plot > .ot-chart-bar[data-shown]::after { scale: 1.5; background: var(--ot-ink); box-shadow: inset 0 0 0 var(--ot-hairline) var(--ot-ink); }\n  .ot-chart-bar[data-now]::after { background: var(--ot-accent); box-shadow: none; }\n  .ot-chart-bar:focus-visible { outline-offset: 2px; }\n  .ot-chart-axis { display: grid; grid-template-columns: repeat(var(--n, 12), minmax(0, 1fr)); margin-top: calc(-1 * var(--ot-space-3)); font-size: var(--ot-pp); color: var(--ot-pencil); text-align: center; }\n\n  /* spark: word-sized, set in the sentence (Tufte's sparkline). Stems as tall as a capital, standing\n     on the baseline, the accent dot on now; the number follows at the text's own size and rolls. */\n  .ot-chart[data-variant=\"spark\"] { display: inline; }\n  .ot-chart[data-variant=\"spark\"] > .ot-chart-plot {\n    display: inline-flex; align-items: stretch; height: 0.72em; vertical-align: baseline;\n    margin-inline: 0.1em 0.05em; background: none; box-shadow: none;\n  }\n  .ot-chart[data-variant=\"spark\"] .ot-chart-bar { flex: none; width: 0.34em; cursor: crosshair; }\n  .ot-chart[data-variant=\"spark\"] .ot-chart-bar::before { height: calc(var(--s) * 100%); background: var(--ot-graphite); }\n  .ot-chart[data-variant=\"spark\"] .ot-chart-bar::after { bottom: calc(var(--s) * 100%); width: 0.26em; height: 0.26em; background: transparent; box-shadow: none; }\n  .ot-chart[data-variant=\"spark\"] .ot-chart-bar[data-now]::after { background: var(--ot-accent); }\n  .ot-chart[data-variant=\"spark\"] .ot-chart-bar:is(:hover, :focus-visible)::after,\n  .ot-chart[data-variant=\"spark\"][data-force~=\"hover\"] > .ot-chart-plot > .ot-chart-bar[data-shown]::after { scale: 1; background: var(--ot-ink); box-shadow: none; }\n  .ot-chart[data-variant=\"spark\"] > .ot-chart-read { display: inline; color: inherit; }\n  .ot-chart[data-variant=\"spark\"] .ot-chart-value { font-size: inherit; line-height: inherit; letter-spacing: inherit; font-weight: 500; }\n\n  /* isotype: Neurath's rule, count don't scale. Each column a stack of dots, one dot a fixed amount:\n     had in ink, the room left to the ceiling in hairline rings; now's top dot is the accent.\n     Pointing a column sets the rest back and counts its dots up, one after another. */\n  .ot-chart[data-variant=\"isotype\"] { --ot-chart-dot: clamp(0.5rem, calc(55cqi / var(--n)), 1rem); }\n  .ot-chart[data-variant=\"isotype\"] > .ot-chart-plot { height: auto; background: none; box-shadow: none; }\n  .ot-chart[data-variant=\"isotype\"] .ot-chart-bar { display: flex; flex-direction: column-reverse; align-items: center; gap: calc(var(--ot-chart-dot) * 0.45); padding-block: var(--ot-space-2); }\n  .ot-chart[data-variant=\"isotype\"] .ot-chart-bar::before, .ot-chart[data-variant=\"isotype\"] .ot-chart-bar::after { content: none; }\n  .ot-chart[data-variant=\"isotype\"] .ot-chart-bar > i {\n    display: block; flex: none; inline-size: var(--ot-chart-dot); aspect-ratio: 1; border-radius: 50%;\n    box-shadow: inset 0 0 0 var(--ot-hairline) var(--ot-rule-strong);\n    transition: background-color var(--ot-allegro), box-shadow var(--ot-allegro);\n  }\n  .ot-chart[data-variant=\"isotype\"] .ot-chart-bar > i[data-on] { background: var(--ot-ink); box-shadow: none; }\n  .ot-chart[data-variant=\"isotype\"] .ot-chart-bar[data-now] > i[data-top] { background: var(--ot-accent); }\n  .ot-chart[data-variant=\"isotype\"] > .ot-chart-plot:is(:hover, :focus-within) > .ot-chart-bar:not([data-shown]) > i[data-on],\n  .ot-chart[data-variant=\"isotype\"][data-force~=\"hover\"] > .ot-chart-plot > .ot-chart-bar:not([data-shown]) > i[data-on] { background: var(--ot-rule-strong); }\n  .ot-chart[data-variant=\"isotype\"][data-moved] .ot-chart-bar[data-shown] > i[data-on] { animation: ot-chart-count var(--ot-moderato) var(--ot-spiccato) calc(var(--k) * var(--ot-arpeggio)) both; }\n  @keyframes ot-chart-count { from { scale: 0.35; } to { scale: 1; } }\n  .ot-chart[data-variant=\"isotype\"] > .ot-chart-axis { margin-top: calc(-1 * var(--ot-space-4)); }\n  .ot-chart-key { display: inline-flex; align-items: center; gap: var(--ot-space-2); font-size: var(--ot-pp); line-height: var(--ot-pp-lh); color: var(--ot-pencil); }\n  .ot-chart-key > i { inline-size: 0.5rem; aspect-ratio: 1; border-radius: 50%; background: var(--ot-ink); }\n\n  /* series: two or more read at once. Each has its own line, solid, dotted or dashed (a ring, a disc,\n     a ring on the dots), and its own voice in the readout, roman, italic or pencil, as \"It has to be\n     design.\" pairs the two faces. Grouped, the stems stand side by side; stacked, one stem per column\n     is cut into lengths with a dot at every joint, and the top joint is now's accent. */\n  .ot-chart-bar:has(> .ot-chart-mark)::before, .ot-chart-bar:has(> .ot-chart-mark)::after { content: none; }\n  .ot-chart-mark { --c: var(--ot-pencil); position: absolute; inset-block: 0; left: calc(50% + (var(--k) - (var(--m) - 1) / 2) * var(--ot-space-2)); pointer-events: none; }\n  .ot-chart[data-stacked] .ot-chart-mark { left: 50%; }\n  .ot-chart-mark::before, .ot-chart-mark::after { content: \"\"; position: absolute; left: 0; }\n  .ot-chart-mark::before { bottom: calc(var(--b) * 100%); width: var(--ot-hairline); height: calc((var(--v) - var(--b)) * 100%); translate: -50% 0; background: var(--c); }\n  .ot-chart-mark[data-series=\"1\"]::before { background: repeating-linear-gradient(to top, var(--c) 0 1px, transparent 1px 3px); }\n  .ot-chart-mark[data-series=\"2\"]::before { background: repeating-linear-gradient(to top, var(--c) 0 4px, transparent 4px 7px); }\n  .ot-chart-mark::after {\n    z-index: 1; bottom: calc(var(--v) * 100%); width: 7px; height: 7px; border-radius: 50%; translate: -50% 50%;\n    background: var(--ot-paper); box-shadow: inset 0 0 0 var(--ot-hairline) var(--c);\n    transition: scale var(--ot-moderato) var(--ot-spiccato), background-color var(--ot-allegro), box-shadow var(--ot-allegro);\n  }\n  .ot-chart-mark[data-series=\"1\"]::after { background: var(--c); }\n  .ot-chart-bar:is(:hover, :focus-visible) > .ot-chart-mark, .ot-chart[data-force~=\"hover\"] > .ot-chart-plot > .ot-chart-bar[data-shown] > .ot-chart-mark { --c: var(--ot-ink); }\n  .ot-chart-bar:is(:hover, :focus-visible) > .ot-chart-mark::after, .ot-chart[data-force~=\"hover\"] > .ot-chart-plot > .ot-chart-bar[data-shown] > .ot-chart-mark::after { scale: 1.5; }\n  .ot-chart:not([data-stacked]) .ot-chart-bar[data-now] > .ot-chart-mark[data-series=\"0\"]::after,\n  .ot-chart[data-stacked] .ot-chart-bar[data-now] > .ot-chart-mark[data-top]::after { background: var(--ot-accent); box-shadow: none; }\n\n  /* The readout for several series: the one giant number becomes a short list, figures set flush\n     right in a column as on a ledger, each rolling on its own; stacked, a rule and the sum under it. */\n  .ot-chart-read[data-list] { display: grid; row-gap: var(--ot-space-3); }\n  .ot-chart-list { display: grid; grid-template-columns: max-content auto; column-gap: var(--ot-space-4); row-gap: var(--ot-space-1); align-items: baseline; justify-content: start; }\n  .ot-chart-row { display: contents; }\n  .ot-chart-row > .ot-chart-value { grid-column: 1; }\n  .ot-chart-row > .ot-chart-name { grid-column: 2; }\n  .ot-chart-list .ot-chart-value { justify-self: end; font-size: clamp(var(--ot-mf), 8cqi, var(--ot-f)); letter-spacing: var(--ot-f-tr); }\n  .ot-chart-row[data-total]::before { content: \"\"; grid-column: 1; border-top: var(--ot-hairline) solid var(--ot-ink); margin-block: var(--ot-space-1) var(--ot-space-2); }\n  .ot-chart-name { display: inline-flex; align-items: center; gap: var(--ot-space-2); font-size: var(--ot-pp); line-height: var(--ot-pp-lh); color: var(--ot-graphite); }\n  .ot-chart-row[data-series=\"1\"] > .ot-chart-name { font-family: var(--ot-expression); font-style: italic; font-size: calc(var(--ot-pp) * var(--ot-expression-scale)); }\n  .ot-chart-row[data-series=\"2\"] > .ot-chart-name { color: var(--ot-pencil); }\n  .ot-chart-swatch { --c: var(--ot-graphite); flex: none; inline-size: 1.5em; block-size: var(--ot-hairline); background: var(--c); }\n  .ot-chart-row[data-series=\"1\"] .ot-chart-swatch { background: repeating-linear-gradient(to right, var(--c) 0 1px, transparent 1px 3px); }\n  .ot-chart-row[data-series=\"2\"] .ot-chart-swatch { background: repeating-linear-gradient(to right, var(--c) 0 4px, transparent 4px 7px); }\n  .ot-chart-row[data-total] .ot-chart-swatch { visibility: hidden; }\n\n  /* horizontal: a ledger. The names stand in a column at the start, each line runs out from a\n     baseline on the start edge to its dot, and the name of the line the number reads is inked. */\n  .ot-chart[data-orientation=\"horizontal\"] { grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--ot-space-4); }\n  .ot-chart[data-orientation=\"horizontal\"] > .ot-chart-read { grid-column: 1 / -1; }\n  .ot-chart[data-orientation=\"horizontal\"] > :is(.ot-chart-plot, .ot-chart-axis) { grid-row: 2; grid-template-columns: none; grid-template-rows: repeat(var(--n, 12), var(--ot-space-6)); }\n  .ot-chart[data-orientation=\"horizontal\"] > .ot-chart-plot {\n    grid-column: 2; height: auto; box-shadow: none; border-inline-start: var(--ot-hairline) solid var(--ot-ink);\n    background: repeating-linear-gradient(to right, var(--ot-rule) 0 1px, transparent 1px 25%);\n  }\n  .ot-chart[data-orientation=\"horizontal\"] > .ot-chart-axis { grid-column: 1; margin-top: 0; align-items: center; text-align: end; }\n  .ot-chart[data-orientation=\"horizontal\"] > .ot-chart-axis > [data-shown] { color: var(--ot-ink); }\n  .ot-chart[data-orientation=\"horizontal\"] .ot-chart-bar::before { left: auto; bottom: auto; top: 50%; inset-inline-start: 0; width: calc(var(--v) * 100%); height: var(--ot-hairline); translate: 0 -50%; }\n  .ot-chart[data-orientation=\"horizontal\"] .ot-chart-bar:is(:hover, :focus-visible)::before,\n  .ot-chart[data-orientation=\"horizontal\"][data-force~=\"hover\"] > .ot-chart-plot > .ot-chart-bar[data-shown]::before { width: calc(var(--v) * 100%); height: var(--ot-stroke); }\n  .ot-chart[data-orientation=\"horizontal\"] :is(.ot-chart-bar, .ot-chart-mark)::after { left: auto; bottom: auto; top: 50%; inset-inline-start: calc(var(--v) * 100%); margin-inline-start: -3.5px; translate: 0 -50%; }\n  .ot-chart[data-orientation=\"horizontal\"] .ot-chart-mark { inset: auto 0; top: calc(50% + (var(--k) - (var(--m) - 1) / 2) * var(--ot-space-2)); height: 0; }\n  .ot-chart[data-orientation=\"horizontal\"][data-stacked] .ot-chart-mark { top: 50%; }\n  .ot-chart[data-orientation=\"horizontal\"] .ot-chart-mark::after { top: 0; }\n  .ot-chart[data-orientation=\"horizontal\"] .ot-chart-mark::before { left: auto; bottom: auto; top: 0; inset-inline-start: calc(var(--b) * 100%); width: calc((var(--v) - var(--b)) * 100%); height: var(--ot-hairline); translate: 0 -50%; }\n  .ot-chart[data-orientation=\"horizontal\"] .ot-chart-mark[data-series=\"1\"]::before { background: repeating-linear-gradient(to right, var(--c) 0 1px, transparent 1px 3px); }\n  .ot-chart[data-orientation=\"horizontal\"] .ot-chart-mark[data-series=\"2\"]::before { background: repeating-linear-gradient(to right, var(--c) 0 4px, transparent 4px 7px); }\n\n  @media (forced-colors: active) {\n    .ot-chart-bar::before, .ot-chart[data-variant=\"isotype\"] .ot-chart-bar > i[data-on], .ot-chart-key > i { background: CanvasText; forced-color-adjust: none; }\n    .ot-chart-bar[data-now]::after, .ot-chart-bar[data-now] > .ot-chart-mark:is([data-series=\"0\"], [data-top])::after, .ot-chart[data-variant=\"isotype\"] .ot-chart-bar[data-now] > i[data-top] { background: Highlight; forced-color-adjust: none; }\n    .ot-chart-mark, .ot-chart-swatch { --c: CanvasText; forced-color-adjust: none; }\n    .ot-chart[data-variant=\"isotype\"] .ot-chart-bar > i { box-shadow: inset 0 0 0 1px CanvasText; forced-color-adjust: none; }\n  }\n}\n",
      "type": "registry:file",
      "target": "styles/0nlytype/chart.css"
    }
  ],
  "css": {
    "@import \"../styles/0nlytype/chart.css\"": {}
  },
  "meta": {
    "movement": "X",
    "underneath": "hook",
    "contract": "ot-chart"
  },
  "type": "registry:ui"
}