@krizaka/ui 3.34.0 → 3.36.0

package/dist/meter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/meter/meter.tsx"],"sourcesContent":["// Server-safe. A measure within a known range — a quota, a balance, a share — as opposed to the progress of a task.\n// `role=\"meter\"`, its value in words; thresholds turn it to warning then danger (or the reverse when high is good);\n// split into parts (90 % to the creator, 10 % to the platform) it becomes a stacked bar or ring with its legend: the\n// text version of what it draws.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const meter = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-1.5\",\n    header: \"flex items-baseline gap-2 text-xs\",\n    caption: \"min-w-0 flex-1 truncate font-medium text-fg\",\n    figure: \"shrink-0 tabular-nums text-fg-secondary\",\n    track: \"relative flex h-2 w-full gap-0.5 overflow-hidden rounded-full bg-surface-3\",\n    fill: \"h-full rounded-full transition-[width] duration-700 motion-reduce:transition-none\",\n    legend: \"mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-fg-secondary\",\n    swatch: \"inline-block h-2 w-2 shrink-0 rounded-full\",\n    ring: \"relative inline-flex shrink-0 items-center justify-center\",\n    center: \"absolute inset-0 flex flex-col items-center justify-center text-center\",\n  },\n  variants: {\n    size: { sm: { track: \"h-1.5\", ring: \"h-14 w-14\" }, md: { ring: \"h-24 w-24\" }, lg: { track: \"h-3\", ring: \"h-36 w-36\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\n/** The colour of a fill: by tone (thresholds) or by part (the accent, a neutral, accent-2, a lighter neutral). */\nconst BG = { ok: \"bg-accent\", success: \"bg-success\", warning: \"bg-warning\", danger: \"bg-danger\" } as const;\nconst STROKE = { ok: \"stroke-accent\", success: \"stroke-success\", warning: \"stroke-warning\", danger: \"stroke-danger\" } as const;\nconst PART_BG = [\"bg-accent\", \"bg-fg-secondary\", \"bg-accent-2\", \"bg-border-strong\"];\nconst PART_STROKE = [\"stroke-accent\", \"stroke-fg-secondary\", \"stroke-accent-2\", \"stroke-border-strong\"];\n\nexport interface MeterPart {\n  /** Its name (“To the creator”) — passed translated. */\n  label: string;\n  /** Its value, in the meter's unit. */\n  value: number;\n  /** Its value in words (“€9.00”), in the legend and for assistive technology; default: its percentage. */\n  valueText?: string;\n}\n\nexport type MeterProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** The accessible name (“Storage”, “Split of a tip”) — passed translated; shown with `showLabel`. */\n  label: string;\n  /** The value, between `min` and `max` (ignored with `parts`). */\n  value?: number;\n  /**\n   * The bottom of the range.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * The top of the range.\n   * @default 100\n   */\n  max?: number;\n  /** The value in words (“42 GB of 50 GB”) — passed translated; default: the percentage. */\n  valueText?: string;\n  /**\n   * Ratios (0–1) where the tone changes: past `high` it is in danger, past `low` in warning — or the reverse with\n   * `optimum=\"high\"` (a balance: the lower, the worse). Without thresholds the fill is the brand accent.\n   */\n  thresholds?: { readonly low: number; readonly high: number };\n  /**\n   * Which end is good.\n   * @default \"low\"\n   */\n  optimum?: \"low\" | \"high\";\n  /** Split into parts that add up to `max`: a stacked bar or ring, with its legend. */\n  parts?: readonly MeterPart[];\n  /**\n   * bar · ring.\n   * @default \"bar\"\n   */\n  variant?: \"bar\" | \"ring\";\n  /**\n   * sm · md · lg: the bar's thickness, the ring's diameter.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Shows the label and the value above the bar. */\n  showLabel?: boolean;\n  /** A ring's centre: the value, a word. */\n  children?: React.ReactNode;\n};\n\n/** A measure within a range — a quota, a balance, a share — toned by thresholds or split into parts. */\nexport function Meter({\n  label,\n  value = 0,\n  min = 0,\n  max = 100,\n  valueText,\n  thresholds,\n  optimum = \"low\",\n  parts,\n  variant = \"bar\",\n  size = \"md\",\n  showLabel,\n  className,\n  children,\n  ...props\n}: MeterProps) {\n  const s = meter({ size });\n  const span = max - min || 1;\n  const ratio = Math.min(1, Math.max(0, (value - min) / span));\n  const level = !thresholds ? \"ok\" : ratio >= thresholds.high ? (optimum === \"low\" ? \"danger\" : \"success\") : ratio >= thresholds.low ? \"warning\" : optimum === \"low\" ? \"success\" : \"danger\";\n  const words = valueText ?? `${Math.round(ratio * 100)} %`;\n  const shares = (parts ?? []).map((p, i) => ({ ...p, i, ratio: Math.min(1, Math.max(0, p.value / span)), words: p.valueText ?? `${Math.round((p.value / span) * 100)} %` }));\n  const a11y = parts\n    ? { role: \"group\" as const, \"aria-label\": label }\n    : { role: \"meter\" as const, \"aria-label\": label, \"aria-valuemin\": min, \"aria-valuemax\": max, \"aria-valuenow\": Math.min(max, Math.max(min, value)), \"aria-valuetext\": words };\n  const legend = parts && (\n    <ul className={s.legend()}>\n      {shares.map((p) => (\n        <li key={p.i} className=\"flex items-center gap-1.5\">\n          <span aria-hidden className={[s.swatch(), PART_BG[p.i % PART_BG.length]].join(\" \")} />\n          <span className=\"text-fg\">{p.label}</span>\n          <span className=\"tabular-nums\">{p.words}</span>\n        </li>\n      ))}\n    </ul>\n  );\n\n  if (variant === \"ring\") {\n    const r = 44;\n    let offset = 0;\n    const arcs = parts\n      ? shares.map((p) => {\n          const arc = { cls: PART_STROKE[p.i % PART_STROKE.length]!, len: p.ratio * 100, start: offset };\n          offset += arc.len;\n          return arc;\n        })\n      : [{ cls: STROKE[level], len: ratio * 100, start: 0 }];\n    return (\n      <div {...a11y} data-level={parts ? undefined : level} className={[\"inline-flex flex-col items-center gap-2\", className].filter(Boolean).join(\" \")} {...props}>\n        <div className={s.ring()}>\n          <svg viewBox=\"0 0 100 100\" className=\"h-full w-full -rotate-90\" aria-hidden>\n            <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" strokeWidth=\"9\" className=\"stroke-border-default\" />\n            {arcs.map((a, i) => (\n              <circle\n                key={i}\n                cx=\"50\"\n                cy=\"50\"\n                r={r}\n                fill=\"none\"\n                strokeWidth=\"9\"\n                pathLength={100}\n                strokeDasharray={`${Math.max(0, a.len - (parts ? 1 : 0))} ${100 - Math.max(0, a.len - (parts ? 1 : 0))}`}\n                strokeDashoffset={-a.start}\n                className={[a.cls, \"transition-[stroke-dasharray] duration-700 motion-reduce:transition-none\"].join(\" \")}\n              />\n            ))}\n          </svg>\n          {children !== undefined && <div className={s.center()}>{children}</div>}\n        </div>\n        {legend}\n      </div>\n    );\n  }\n\n  return (\n    <div {...a11y} data-level={parts ? undefined : level} className={s.root({ className })} {...props}>\n      {showLabel && (\n        <div aria-hidden className={s.header()}>\n          <span className={s.caption()}>{label}</span>\n          {!parts && <span className={s.figure()}>{words}</span>}\n        </div>\n      )}\n      <div aria-hidden className={s.track()}>\n        {parts ? (\n          shares.map((p) => <span key={p.i} className={[s.fill(), PART_BG[p.i % PART_BG.length]].join(\" \")} style={{ width: `${p.ratio * 100}%` }} />)\n        ) : (\n          <span className={[s.fill(), BG[level]].join(\" \")} style={{ width: `${ratio * 100}%` }} />\n        )}\n      </div>\n      {legend}\n    </div>\n  );\n}\n\nexport interface MeterValueProps {\n  /** The figure. */\n  value: React.ReactNode;\n  /** A word under it. */\n  caption?: React.ReactNode;\n}\n\n/** For the ring's centre when it shows a figure and a word. */\nexport function MeterValue({ value, caption }: MeterValueProps) {\n  return (\n    <>\n      <span className=\"font-display text-lg font-semibold text-fg tabular-nums\">{value}</span>\n      {caption && <span className=\"text-[10px] uppercase tracking-wide text-fg-secondary\">{caption}</span>}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/meter/meter.tsx"],"sourcesContent":["// Server-safe. A measure within a known range — a quota, a balance, a share — as opposed to the progress of a task.\n// `role=\"meter\"`, its value in words; thresholds turn it to warning then danger (or the reverse when high is good);\n// split into parts (90 % to the creator, 10 % to the platform) it becomes a stacked bar or ring with its legend: the\n// text version of what it draws.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const meter = tv({\n  slots: {\n    root: \"flex w-full flex-col gap-1.5\",\n    header: \"flex items-baseline gap-2 text-xs\",\n    caption: \"min-w-0 flex-1 truncate font-medium text-fg\",\n    figure: \"shrink-0 tabular-nums text-fg-secondary\",\n    track: \"relative flex h-2 w-full gap-0.5 overflow-hidden rounded-full bg-surface-3\",\n    fill: \"h-full rounded-full transition-[width] duration-700 motion-reduce:transition-none\",\n    legend: \"mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-fg-secondary\",\n    swatch: \"inline-block h-2 w-2 shrink-0 rounded-full\",\n    ring: \"relative inline-flex shrink-0 items-center justify-center\",\n    center: \"absolute inset-0 flex flex-col items-center justify-center text-center\",\n  },\n  variants: {\n    size: { sm: { track: \"h-1.5\", ring: \"h-14 w-14\" }, md: { ring: \"h-24 w-24\" }, lg: { track: \"h-3\", ring: \"h-36 w-36\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\n/** The colour of a fill: by tone (thresholds) or by part (the accent, a neutral, accent-2, a lighter neutral). */\nconst BG = { ok: \"bg-accent\", success: \"bg-success\", warning: \"bg-warning\", danger: \"bg-danger\" } as const;\nconst STROKE = { ok: \"stroke-accent\", success: \"stroke-success\", warning: \"stroke-warning\", danger: \"stroke-danger\" } as const;\nconst PART_BG = [\"bg-accent\", \"bg-fg-secondary\", \"bg-accent-2\", \"bg-border-strong\"];\nconst PART_STROKE = [\"stroke-accent\", \"stroke-fg-secondary\", \"stroke-accent-2\", \"stroke-border-strong\"];\n\nexport interface MeterPart {\n  /** Its name (“To the creator”) — passed translated. */\n  label: string;\n  /** Its value, in the meter's unit. */\n  value: number;\n  /** Its value in words (“€9.00”), in the legend and for assistive technology; default: its percentage. */\n  valueText?: string;\n}\n\nexport type MeterProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** The accessible name (“Storage”, “Split of a tip”) — passed translated; shown with `showLabel`. */\n  label: string;\n  /** The value, between `min` and `max` (ignored with `parts`). */\n  value?: number;\n  /**\n   * The bottom of the range.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * The top of the range.\n   * @default 100\n   */\n  max?: number;\n  /** The value in words (“42 GB of 50 GB”) — passed translated; default: the percentage. */\n  valueText?: string;\n  /**\n   * Ratios (0–1) where the tone changes: past `high` it is in danger, past `low` in warning — or the reverse with\n   * `optimum=\"high\"` (a balance: the lower, the worse). Without thresholds the fill is the brand accent.\n   */\n  thresholds?: { readonly low: number; readonly high: number };\n  /**\n   * Which end is good.\n   * @default \"low\"\n   */\n  optimum?: \"low\" | \"high\";\n  /** Split into parts that add up to `max`: a stacked bar or ring, with its legend. */\n  parts?: readonly MeterPart[];\n  /**\n   * bar · ring.\n   * @default \"bar\"\n   */\n  variant?: \"bar\" | \"ring\";\n  /**\n   * sm · md · lg: the bar's thickness, the ring's diameter.\n   * @default \"md\"\n   */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** Shows the label and the value above the bar. */\n  showLabel?: boolean;\n  /** A ring's centre: the value, a word. */\n  children?: React.ReactNode;\n};\n\n/** A measure within a range — a quota, a balance, a share — toned by thresholds or split into parts. */\nexport function Meter({\n  label,\n  value = 0,\n  min = 0,\n  max = 100,\n  valueText,\n  thresholds,\n  optimum = \"low\",\n  parts,\n  variant = \"bar\",\n  size = \"md\",\n  showLabel,\n  className,\n  children,\n  ...props\n}: MeterProps) {\n  const s = meter({ size });\n  const span = max - min || 1;\n  const ratio = Math.min(1, Math.max(0, (value - min) / span));\n  const level = !thresholds ? \"ok\" : ratio >= thresholds.high ? (optimum === \"low\" ? \"danger\" : \"success\") : ratio >= thresholds.low ? \"warning\" : optimum === \"low\" ? \"success\" : \"danger\";\n  const words = valueText ?? `${Math.round(ratio * 100)} %`;\n  const shares = (parts ?? []).map((p, i) => ({ ...p, i, ratio: Math.min(1, Math.max(0, p.value / span)), words: p.valueText ?? `${Math.round((p.value / span) * 100)} %` }));\n  const a11y = parts\n    ? { role: \"group\" as const, \"aria-label\": label }\n    : { role: \"meter\" as const, \"aria-label\": label, \"aria-valuemin\": min, \"aria-valuemax\": max, \"aria-valuenow\": Math.min(max, Math.max(min, value)), \"aria-valuetext\": words };\n  const legend = parts && (\n    <ul className={s.legend()}>\n      {shares.map((p) => (\n        <li key={p.i} className=\"flex items-center gap-1.5\">\n          <span aria-hidden className={[s.swatch(), PART_BG[p.i % PART_BG.length]].join(\" \")} />\n          <span className=\"text-fg\">{p.label}</span>\n          <span className=\"tabular-nums\">{p.words}</span>\n        </li>\n      ))}\n    </ul>\n  );\n\n  if (variant === \"ring\") {\n    const r = 44;\n    let offset = 0;\n    const arcs = parts\n      ? shares.map((p) => {\n          const arc = { cls: PART_STROKE[p.i % PART_STROKE.length]!, len: p.ratio * 100, start: offset };\n          offset += arc.len;\n          return arc;\n        })\n      : [{ cls: STROKE[level], len: ratio * 100, start: 0 }];\n    return (\n      <div {...a11y} data-level={parts ? undefined : level} className={[\"inline-flex flex-col items-center gap-2\", className].filter(Boolean).join(\" \")} {...props}>\n        <div className={s.ring()}>\n          <svg viewBox=\"0 0 100 100\" className=\"h-full w-full -rotate-90\" aria-hidden>\n            <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" strokeWidth=\"9\" className=\"stroke-border-default\" />\n            {arcs.map((a, i) => (\n              <circle\n                key={i}\n                cx=\"50\"\n                cy=\"50\"\n                r={r}\n                fill=\"none\"\n                strokeWidth=\"9\"\n                pathLength={100}\n                strokeDasharray={`${Math.max(0, a.len - (parts ? 1 : 0))} ${100 - Math.max(0, a.len - (parts ? 1 : 0))}`}\n                strokeDashoffset={-a.start}\n                className={[a.cls, \"transition-[stroke-dasharray] duration-700 motion-reduce:transition-none\"].join(\" \")}\n              />\n            ))}\n          </svg>\n          {children !== undefined && <div className={s.center()}>{children}</div>}\n        </div>\n        {legend}\n      </div>\n    );\n  }\n\n  return (\n    <div {...a11y} data-level={parts ? undefined : level} className={s.root({ className })} {...props}>\n      {showLabel && (\n        <div aria-hidden className={s.header()}>\n          <span className={s.caption()}>{label}</span>\n          {!parts && <span className={s.figure()}>{words}</span>}\n        </div>\n      )}\n      <div aria-hidden className={s.track()}>\n        {parts ? (\n          shares.map((p) => <span key={p.i} className={[s.fill(), PART_BG[p.i % PART_BG.length]].join(\" \")} style={{ width: `${p.ratio * 100}%` }} />)\n        ) : (\n          <span className={[s.fill(), BG[level]].join(\" \")} style={{ width: `${ratio * 100}%` }} />\n        )}\n      </div>\n      {legend}\n    </div>\n  );\n}\n\nexport interface MeterValueProps {\n  /** The figure. */\n  value: React.ReactNode;\n  /** A word under it. */\n  caption?: React.ReactNode;\n}\n\n/** For the ring's centre when it shows a figure and a word. */\nexport function MeterValue({ value, caption }: MeterValueProps) {\n  return (\n    <>\n      <span className=\"font-display text-lg font-semibold text-fg tabular-nums\">{value}</span>\n      {caption && <span className=\"text-[10px] text-fg-secondary\">{caption}</span>}\n    </>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/motion.css

@@ -15,21 +15,28 @@
   animation: kz-page-in 0.5s var(--kz-ease) backwards;
 }
 @keyframes kz-page-in {
-  from { opacity: 0; transform: translateY(10px); }
+  from { opacity: 0; }
 }
 
-/* Reveal on scroll: [data-reveal] rises into place when it enters the viewport (MotionObserver adds .kz-in). */
+/* Reveal on scroll (Cahier, ADR-004): nothing rises, nothing blurs. A block settles like ink on paper — it appears
+   in place; `[data-reveal="ink"]` is written left to right, as a pen draws a line (MotionObserver adds .kz-in). */
 [data-reveal] {
   opacity: 0;
-  transform: translateY(22px);
-  filter: blur(4px);
-  transition: opacity 0.8s var(--kz-ease), transform 0.8s var(--kz-ease), filter 0.8s var(--kz-ease);
+  transition: opacity 0.6s var(--kz-ease);
+  transition-delay: var(--kz-delay, 0ms);
+}
+[data-reveal="ink"] {
+  opacity: 1;
+  clip-path: inset(0 100% 0 0);
+  transition: clip-path 0.7s var(--kz-ease);
   transition-delay: var(--kz-delay, 0ms);
 }
 [data-reveal].kz-in {
   opacity: 1;
-  transform: none;
-  filter: none;
+}
+/* Only the ink reveal clips, while it writes; once written its clip reaches far beyond its sides (nothing in the margin is cut). */
+[data-reveal="ink"].kz-in {
+  clip-path: inset(0 -100vw 0 -100vw);
 }
 
 /* A word that rolls in (RotatingWord). */
@@ -38,7 +45,7 @@
   animation: kz-word-in 0.6s var(--kz-ease) both;
 }
 @keyframes kz-word-in {
-  from { opacity: 0; transform: translateY(70%); filter: blur(6px); }
+  from { opacity: 0; clip-path: inset(0 100% 0 0); }
 }
 
 /* RotatingWord: every alternative shares one grid cell from the first paint (the line keeps the width of the longest
@@ -60,11 +67,9 @@
   animation: kz-word-in 0.6s var(--kz-ease) both;
 }
 
-/* A softer reveal for schemas and dense content: shorter travel, no blur. */
+/* A softer reveal for schemas and dense content: a shorter settle. */
 [data-reveal="soft"] {
-  transform: translateY(12px);
-  filter: none;
-  transition-duration: 0.6s;
+  transition-duration: 0.4s;
 }
 
 /* Retired (krizaka-ui#393): the sheen across a button, the spotlight that followed the pointer and the lift of a card.
@@ -185,41 +190,23 @@
   background: linear-gradient(0deg, var(--kz-brand-gradient-from), var(--kz-brand-gradient-via) 55%, var(--kz-brand-gradient-to));
 }
 .kz-backdrop > [data-backdrop-layer] { position: absolute; z-index: -1; pointer-events: none; }
+/* Retired (Cahier, ADR-004): the drifting glows, the dome of light and the perspective grid floor were template tells.
+   The layers stay harmless (they draw nothing) so an old page does not break; the ruling (`.kz-ruled`) replaces them. */
 .kz-backdrop-drift {
-  inset: -20%;
-  background:
-    radial-gradient(38% 32% at 28% 30%, color-mix(in oklab, var(--kz-accent, #3e6f99) 14%, transparent), transparent 70%),
-    radial-gradient(34% 30% at 76% 22%, color-mix(in oklab, var(--kz-accent-2, #3e6f99) 10%, transparent), transparent 70%);
-  animation: kz-backdrop-drift 40s ease-in-out infinite alternate;
+  display: none;
 }
 @keyframes kz-backdrop-drift {
   to { transform: translate3d(6%, 4%, 0) rotate(6deg); }
 }
-.kz-backdrop-dome {
-  left: 50%;
-  top: -35%;
-  width: 110%;
-  aspect-ratio: 2 / 1;
-  transform: translateX(-50%);
-  border-radius: 50%;
-  background: radial-gradient(closest-side, color-mix(in oklab, var(--kz-accent, #3e6f99) 24%, transparent), transparent);
-  filter: blur(28px);
-}
+.kz-backdrop-dome,
 .kz-backdrop-grid {
-  inset: auto -50% 0 -50%;
-  height: 55%;
-  background-image:
-    linear-gradient(to right, var(--kz-border-default) 1px, transparent 1px),
-    linear-gradient(to bottom, var(--kz-border-default) 1px, transparent 1px);
-  background-size: 48px 48px;
-  transform: perspective(640px) rotateX(62deg);
-  transform-origin: bottom;
-  mask-image: linear-gradient(to top, #000 5%, transparent 85%);
+  display: none;
 }
+/* A photograph behind a section is printed, not blurred: flat, desaturated, quiet. */
 .kz-backdrop-media {
   inset: 0;
-  filter: blur(var(--kz-backdrop-blur, 18px));
-  opacity: 0.5;
+  filter: grayscale(1) contrast(0.9);
+  opacity: 0.22;
 }
 
 /* ─── The conductor's states (MotionObserver) ───
@@ -661,9 +648,9 @@ svg[data-kz-icon="ExternalIcon"] {
   width: var(--kz-flow-hub);
   height: var(--kz-flow-hub);
   /* Opaque: the conduits end under the hub. */
-  background: radial-gradient(circle, var(--kz-accent-soft), transparent 72%), var(--kz-surface-1);
+  background: var(--kz-surface-1);
   border-color: var(--kz-accent);
-  box-shadow: 0 0 40px -8px var(--kz-accent);
+  box-shadow: 0 0 0 4px var(--kz-accent-soft);
 }
 .kz-flow-hub-mark > svg { width: 64%; height: 64%; }
 .kz-flow-hub-label { font-weight: 700; font-size: 0.9375rem; color: var(--kz-text-primary); }
@@ -715,7 +702,7 @@ svg[data-kz-icon="ExternalIcon"] {
   .kz-flow-node-mark, .kz-flow-node, .kz-flow-link { transition: none; }
   /* At rest, the trace stands still where a reader expects it: a third of the hexagon from the top. */
   .kz-loader-trace:not([stroke-dasharray]) { stroke-dashoffset: -8; }
-  [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
+  [data-reveal] { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; }
   /* The band stands still and scrolls by hand; its copy goes. */
   .kz-band > .kz-band-viewport { overflow-x: auto; scrollbar-width: thin; }
   .kz-band-copy { display: none !important; }

package/dist/native/map.js

@@ -54,17 +54,17 @@ function formatDistance(meters, locale) {
 
 // ../tokens/dist/native.js
 var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze({
-  "surface0": "#0c0c0e",
-  "surface1": "#161618",
-  "surface2": "#1f1f23",
-  "surface3": "#2a2a2d",
-  "media": "#1b1b1d",
-  "borderSubtle": "rgba(255,255,255,0.06)",
-  "borderDefault": "rgba(255,255,255,0.1)",
-  "borderStrong": "rgba(255,255,255,0.16)",
-  "textPrimary": "#f5f5f5",
-  "textSecondary": "#a0a0a7",
-  "textMuted": "#92929b",
+  "surface0": "#151b18",
+  "surface1": "#191f1c",
+  "surface2": "#1c221f",
+  "surface3": "#262e2a",
+  "media": "#1e2521",
+  "borderSubtle": "rgba(231,240,230,0.07)",
+  "borderDefault": "rgba(231,240,230,0.12)",
+  "borderStrong": "rgba(231,240,230,0.2)",
+  "textPrimary": "#ecf0ea",
+  "textSecondary": "#bcc8c0",
+  "textMuted": "#a7b4ab",
   "textOnMedia": "#ffffff",
   "accent": "#3e76a8",
   "accentHover": "#346793",
@@ -73,9 +73,9 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "accent2": "#3e76a8",
   "onAccent": "#ffffff",
   "ring": "#3e76a8",
-  "brandGradientFrom": "#121a21",
-  "brandGradientVia": "#0f1114",
-  "brandGradientTo": "#0c0c0e",
+  "brandGradientFrom": "#151b18",
+  "brandGradientVia": "#151b18",
+  "brandGradientTo": "#151b18",
   "success": "#10b77f",
   "successText": "#36d399",
   "successSoft": "rgba(16,183,127,0.14)",
@@ -90,25 +90,31 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
   "overlay": "rgba(0,0,0,0.7)",
-  "surfaceSheen": "rgba(255,255,255,0.045)",
+  "paperRuleMajor": "rgba(217,232,222,0.09)",
+  "paperRuleMinor": "rgba(217,232,222,0.045)",
+  "paperRuleMargin": "#e08071",
+  "paperTag": "#2d3932",
+  "paperTagEdge": "#586a5f",
+  "paperTagInk": "#e9eee7",
+  "surfaceSheen": "rgba(255,255,255,0)",
   "fillShade": "rgba(0,0,0,0.12)",
-  "edgeLight": "rgba(255,255,255,0.07)",
+  "edgeLight": "rgba(255,255,255,0)",
   "edgeOnFill": "rgba(255,255,255,0.22)",
   "edgeWell": "rgba(4,4,7,0.5)",
-  "glassBg": "rgba(29,29,32,0.88)",
+  "glassBg": "#191f1c",
   "glassBorder": "rgba(255,255,255,0.1)"
 }), light: /* @__PURE__ */ Object.freeze({
-  "surface0": "#fafafa",
-  "surface1": "#ffffff",
-  "surface2": "#f1f1f3",
-  "surface3": "#e4e4e7",
-  "media": "#e9e9ec",
-  "borderSubtle": "rgba(0,0,0,0.06)",
-  "borderDefault": "rgba(0,0,0,0.1)",
-  "borderStrong": "rgba(0,0,0,0.16)",
-  "textPrimary": "#18181b",
-  "textSecondary": "#56565d",
-  "textMuted": "#64646d",
+  "surface0": "#f4f6f3",
+  "surface1": "#fbfcfb",
+  "surface2": "#f0f3ef",
+  "surface3": "#dfe3de",
+  "media": "#e5e8e3",
+  "borderSubtle": "rgba(31,59,91,0.1)",
+  "borderDefault": "rgba(31,59,91,0.17)",
+  "borderStrong": "rgba(31,59,91,0.28)",
+  "textPrimary": "#1d3654",
+  "textSecondary": "#405064",
+  "textMuted": "#4f5b69",
   "textOnMedia": "#ffffff",
   "accent": "#2a5f8d",
   "accentHover": "#1f4d75",
@@ -117,9 +123,9 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "accent2": "#2a5f8d",
   "onAccent": "#ffffff",
   "ring": "#2a5f8d",
-  "brandGradientFrom": "#e7eef4",
-  "brandGradientVia": "#f5f7fa",
-  "brandGradientTo": "#fafafa",
+  "brandGradientFrom": "#f4f6f3",
+  "brandGradientVia": "#f4f6f3",
+  "brandGradientTo": "#f4f6f3",
   "success": "#10b77f",
   "successText": "#0a714e",
   "successSoft": "rgba(16,183,127,0.1)",
@@ -134,12 +140,18 @@ var themes = /* @__PURE__ */ Object.freeze({ dark: /* @__PURE__ */ Object.freeze
   "scrim": "rgba(0,0,0,0.6)",
   "scrimStrong": "rgba(0,0,0,0.8)",
   "overlay": "rgba(0,0,0,0.7)",
-  "surfaceSheen": "rgba(255,255,255,0.7)",
+  "paperRuleMajor": "rgba(69,109,161,0.24)",
+  "paperRuleMinor": "rgba(69,109,161,0.1)",
+  "paperRuleMargin": "#a53127",
+  "paperTag": "#eadfc2",
+  "paperTagEdge": "#b4a274",
+  "paperTagInk": "#282620",
+  "surfaceSheen": "rgba(255,255,255,0)",
   "fillShade": "rgba(0,0,0,0.12)",
-  "edgeLight": "rgba(255,255,255,0.9)",
+  "edgeLight": "rgba(255,255,255,0)",
   "edgeOnFill": "rgba(255,255,255,0.22)",
   "edgeWell": "rgba(48,52,80,0.08)",
-  "glassBg": "rgba(255,255,255,0.88)",
+  "glassBg": "#fbfcfb",
   "glassBorder": "rgba(0,0,0,0.08)"
 }) });
 var brands = /* @__PURE__ */ Object.freeze({
@@ -154,9 +166,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#3e76a8",
       "info": "#3e76a8",
       "infoText": "#8ebde1",
-      "brandGradientFrom": "#121a21",
-      "brandGradientVia": "#0f1114",
-      "brandGradientTo": "#0c0c0e"
+      "brandGradientFrom": "#151b18",
+      "brandGradientVia": "#151b18",
+      "brandGradientTo": "#151b18"
     },
     "light": {
       "accent": "#2a5f8d",
@@ -168,9 +180,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#2a5f8d",
       "info": "#2a5f8d",
       "infoText": "#275782",
-      "brandGradientFrom": "#e7eef4",
-      "brandGradientVia": "#f5f7fa",
-      "brandGradientTo": "#fafafa"
+      "brandGradientFrom": "#f4f6f3",
+      "brandGradientVia": "#f4f6f3",
+      "brandGradientTo": "#f4f6f3"
     }
   },
   "orazaka": {
@@ -184,9 +196,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#f67e23",
       "info": "#5e99c9",
       "infoText": "#8ebde1",
-      "brandGradientFrom": "#28170b",
-      "brandGradientVia": "#17130c",
-      "brandGradientTo": "#0c0c0e"
+      "brandGradientFrom": "#151b18",
+      "brandGradientVia": "#151b18",
+      "brandGradientTo": "#151b18"
     },
     "light": {
       "accent": "#b45309",
@@ -198,9 +210,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#b45309",
       "info": "#2a5f8d",
       "infoText": "#275782",
-      "brandGradientFrom": "#ffebd6",
-      "brandGradientVia": "#fdf7ed",
-      "brandGradientTo": "#fafafa"
+      "brandGradientFrom": "#f4f6f3",
+      "brandGradientVia": "#f4f6f3",
+      "brandGradientTo": "#f4f6f3"
     }
   },
   "orochia": {
@@ -214,9 +226,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#a78bfa",
       "info": "#7c3aed",
       "infoText": "#a78bfa",
-      "brandGradientFrom": "#1a0e2a",
-      "brandGradientVia": "#1c0d17",
-      "brandGradientTo": "#0c0c0e"
+      "brandGradientFrom": "#151b18",
+      "brandGradientVia": "#151b18",
+      "brandGradientTo": "#151b18"
     },
     "light": {
       "accent": "#7c3aed",
@@ -228,9 +240,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#7c3aed",
       "info": "#7c3aed",
       "infoText": "#6d28d9",
-      "brandGradientFrom": "#efe7fe",
-      "brandGradientVia": "#fdedf5",
-      "brandGradientTo": "#fafafa"
+      "brandGradientFrom": "#f4f6f3",
+      "brandGradientVia": "#f4f6f3",
+      "brandGradientTo": "#f4f6f3"
     }
   },
   "yasakia": {
@@ -244,9 +256,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#24dbc9",
       "info": "#5e99c9",
       "infoText": "#8ebde1",
-      "brandGradientFrom": "#0a241e",
-      "brandGradientVia": "#0c1818",
-      "brandGradientTo": "#0c0c0e"
+      "brandGradientFrom": "#151b18",
+      "brandGradientVia": "#151b18",
+      "brandGradientTo": "#151b18"
     },
     "light": {
       "accent": "#097169",
@@ -258,9 +270,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#097169",
       "info": "#2a5f8d",
       "infoText": "#275782",
-      "brandGradientFrom": "#e1faf1",
-      "brandGradientVia": "#e9fbfa",
-      "brandGradientTo": "#fafafa"
+      "brandGradientFrom": "#f4f6f3",
+      "brandGradientVia": "#f4f6f3",
+      "brandGradientTo": "#f4f6f3"
     }
   },
   "yororis": {
@@ -274,9 +286,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#98b587",
       "info": "#5e99c9",
       "infoText": "#8ebde1",
-      "brandGradientFrom": "#1c1812",
-      "brandGradientVia": "#11140f",
-      "brandGradientTo": "#0c0c0e"
+      "brandGradientFrom": "#151b18",
+      "brandGradientVia": "#151b18",
+      "brandGradientTo": "#151b18"
     },
     "light": {
       "accent": "#456237",
@@ -288,9 +300,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#456237",
       "info": "#2a5f8d",
       "infoText": "#275782",
-      "brandGradientFrom": "#f5efe5",
-      "brandGradientVia": "#f1f6ee",
-      "brandGradientTo": "#fafafa"
+      "brandGradientFrom": "#f4f6f3",
+      "brandGradientVia": "#f4f6f3",
+      "brandGradientTo": "#f4f6f3"
     }
   },
   "yomizaka": {
@@ -304,9 +316,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#8888f2",
       "info": "#5e99c9",
       "infoText": "#8ebde1",
-      "brandGradientFrom": "#121321",
-      "brandGradientVia": "#111019",
-      "brandGradientTo": "#0c0c0e"
+      "brandGradientFrom": "#151b18",
+      "brandGradientVia": "#151b18",
+      "brandGradientTo": "#151b18"
     },
     "light": {
       "accent": "#3c38b2",
@@ -318,9 +330,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#3c38b2",
       "info": "#2a5f8d",
       "infoText": "#275782",
-      "brandGradientFrom": "#ebecfa",
-      "brandGradientVia": "#f0f0fa",
-      "brandGradientTo": "#fafafa"
+      "brandGradientFrom": "#f4f6f3",
+      "brandGradientVia": "#f4f6f3",
+      "brandGradientTo": "#f4f6f3"
     }
   },
   "kachizaka": {
@@ -334,9 +346,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#fbcf23",
       "info": "#5e99c9",
       "infoText": "#8ebde1",
-      "brandGradientFrom": "#101628",
-      "brandGradientVia": "#0f111a",
-      "brandGradientTo": "#0c0c0e"
+      "brandGradientFrom": "#151b18",
+      "brandGradientVia": "#151b18",
+      "brandGradientTo": "#151b18"
     },
     "light": {
       "accent": "#fac905",
@@ -348,9 +360,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#1743d3",
       "info": "#2a5f8d",
       "infoText": "#275782",
-      "brandGradientFrom": "#e8edfc",
-      "brandGradientVia": "#fcf8e8",
-      "brandGradientTo": "#fafafa"
+      "brandGradientFrom": "#f4f6f3",
+      "brandGradientVia": "#f4f6f3",
+      "brandGradientTo": "#f4f6f3"
     }
   },
   "akinaza": {
@@ -364,9 +376,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#65c374",
       "info": "#5e99c9",
       "infoText": "#8ebde1",
-      "brandGradientFrom": "#111d15",
-      "brandGradientVia": "#181410",
-      "brandGradientTo": "#0c0c0e"
+      "brandGradientFrom": "#151b18",
+      "brandGradientVia": "#151b18",
+      "brandGradientTo": "#151b18"
     },
     "light": {
       "accent": "#21692f",
@@ -378,9 +390,9 @@ var brands = /* @__PURE__ */ Object.freeze({
       "ring": "#21692f",
       "info": "#2a5f8d",
       "infoText": "#275782",
-      "brandGradientFrom": "#e9f7eb",
-      "brandGradientVia": "#faf1eb",
-      "brandGradientTo": "#fafafa"
+      "brandGradientFrom": "#f4f6f3",
+      "brandGradientVia": "#f4f6f3",
+      "brandGradientTo": "#f4f6f3"
     }
   }
 });