@iyulab/chat-components 0.14.1 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## [0.16.0] - 2026-09-30
+
+### Added
+
+- **`u-video-block` takes subtitle / caption tracks** — `tracks: VideoTrack[]`
+  (`{ src, kind?, srclang?, label?, default? }`, WebVTT) for a direct video file. The `<video>` is
+  drawn inside the shadow tree, so an app had no way to add a `<track>`. Also in the block schema, so
+  block JSON can carry them. YouTube and Vimeo keep their own player's captions.
+
+### Fixed
+
+- **Links that open a new tab now say so to screen readers.** `u-ref-tag`, `u-ref-card` and the
+  `u-map-block` caption open in a new tab; their accessible name now ends with a localized
+  "(opens in a new tab)" (`opensInNewTab` in the message registry). The text is visually hidden —
+  the external-link icon already shows it on screen.
+
+### Documentation
+
+- README: the Accessibility section links the KWCAG 2.2 table in `@iyulab/components`.
+
+## [0.15.0] - 2026-09-30
+
+### Changed
+
+- **`u-chart-block` no longer changes Chart.js global defaults.** Its theme colors (text, ticks,
+  grid, tooltip) used to be written to `Chart.defaults`, which also recolored any other Chart.js chart
+  on the page. They are now options of that chart instance, merged under the `options` you pass —
+  your values win, down to a single key.
+- **`u-chart-block` uses the design-token chart palette.** Datasets that set no `backgroundColor` or
+  `borderColor` take `--u-chart-color-1..N` (one color per slice for `pie`, `doughnut`, and
+  `polarArea`), matching dashboards and `@iyulab/u-widgets`. Colors you set are kept, and the `data`
+  object you pass is not modified. Without the token sheet, Chart.js defaults apply as before.
+- **Peer ranges promise only tested majors:** `chart.js` is `^4.5.1` (was `>=4.5.1`), `@lit/react`
+  `^1.0.8` (was `>=1.0.8`), and `react` `^18.0.0 || ^19.0.0` (was `>=18.0.0`).
+
 ## [0.14.1] - 2026-09-30
 
 ### Fixed

package/README.md

@@ -121,6 +121,7 @@ conformance claim for the success criteria it does not list.
 |---|---|---|
 | SC 2.5.8 Target Size (Minimum) | Every pointer target inside the registered blocks (`.` and `./extra` entries) is at least 24×24 CSS px or meets the spacing exception (24px between centers), and is actually hit at that position | `tests/browser/target-size.browser.test.ts` (real Chromium) |
 | SC 2.1.1 Keyboard (pointer-cursor check) | Nothing a block renders shows a pointer cursor without being an interactive element — table sort headers, image thumbnails and previewable file cards are buttons | `tests/browser/target-size.browser.test.ts` · `tests/browser/table-block-sort-keyboard.browser.test.ts` |
+| SC 3.2.5 Change on Request (new tabs) | Links that open a new tab — `u-ref-tag`, `u-ref-card`, the `u-map-block` caption — end their accessible name with a localized "(opens in a new tab)" | `tests/browser/new-tab-link-name.browser.test.ts` |
 
 `u-ref-tag` uses the SC's **inline exception** — it is a citation badge set inside a sentence, where
 growing it to 24px would push the line height. It is still measured and reported.
@@ -128,6 +129,8 @@ growing it to 24px would push the line height. It is still measured and reported
 Color contrast comes from the `@iyulab/components` tokens this package renders with — see that
 package's Accessibility section.
 
+For **KWCAG 2.2** (the Korean web accessibility standard), the `@iyulab/components` README has a table of all 33 check items — which are guaranteed by a test across the sibling packages, which are shared with the app, and which do not apply: [KWCAG 2.2 대응표](https://github.com/iyulab/node-components#kwcag-22-대응표).
+
 ## Documentation
 
 | File | Description |

package/dist/components/references/URefCard.js

@@ -3,6 +3,7 @@ import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.151.0/hel
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
 import { sanitizeHref } from "../../utilities/sanitizers.js";
 import { UDataElement } from "../UDataElement.js";
+import { messages } from "../../utilities/messages.js";
 import { styles } from "./URefCard.styles.js";
 import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -64,6 +65,7 @@ var URefCard = class URefCard extends UDataElement {
         <div class="footer" ?hidden=${!this.tags || this.tags.length === 0}>
           ${this.tags?.map((tag) => html`<span class="tag">${tag}</span>`)}
         </div>
+        <span class="new-tab-hint">${messages.text("opensInNewTab")}</span>
       </a>
     `;
 	}

package/dist/components/references/URefCard.styles.js

@@ -98,6 +98,18 @@ var styles = css`
     border-radius: 4px;
     white-space: nowrap;
   }
+  /* 새 창 알림 — 화면에는 없고 접근성 이름에만 붙는다(KWCAG 7.2.1). */
+  .new-tab-hint {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 `;
 //#endregion
 export { styles };

package/dist/components/references/URefTag.js

@@ -2,6 +2,7 @@ import "../../utilities/icons.js";
 import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
 import { sanitizeHref } from "../../utilities/sanitizers.js";
+import { messages } from "../../utilities/messages.js";
 import { styles } from "./URefTag.styles.js";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
@@ -19,6 +20,7 @@ var URefTag = class URefTag extends UElement {
       <a href="${ifDefined(this.href ? sanitizeHref(this.href) : void 0)}" target="_blank" rel="noopener noreferrer"
         @click=${this.handleAnchorClick}>
         <slot></slot>
+        <span class="new-tab-hint">${messages.text("opensInNewTab")}</span>
       </a>
 
       <u-icon lib="internal-chat" name="external-link"></u-icon>

package/dist/components/references/URefTag.styles.js

@@ -46,6 +46,18 @@ var styles = css`
   u-tooltip[visible] {
     opacity: 1;
   }
+  /* 새 창 알림 — 화면에는 없고 접근성 이름에만 붙는다(KWCAG 7.2.1). */
+  .new-tab-hint {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 `;
 //#endregion
 export { styles };

package/dist/components-extra/UChartBlock.d.ts

@@ -26,8 +26,11 @@ export declare class UChartBlock extends UElement {
     private createChart;
     /** 기존 차트 인스턴스 제거 */
     private destroyChart;
-    /** 현재 테마의 CSS 변수를 읽어 Chart.defaults에 전역 적용 */
-    private applyTheme;
+    /**
+     * 현재 테마의 CSS 변수를 읽는다. ⚠`Chart.defaults` 를 바꾸지 않는다 — 전역이라 같은 페이지에서
+     * 소비자가 직접 만든 chart.js 차트의 색까지 바꿨다. 값은 이 인스턴스의 옵션으로만 들어간다.
+     */
+    private readTheme;
     private handleDownloadPNG;
     private handleDownloadJSON;
     private handleFullscreen;

package/dist/components-extra/UChartBlock.js

@@ -85,15 +85,15 @@ var UChartBlock = class UChartBlock extends UElement {
 			return;
 		}
 		try {
-			this.applyTheme();
+			const theme = this.readTheme();
 			this.chartjs = new Chart(ctx, {
 				type: this.type,
-				data: this.data,
-				options: {
+				data: paintDatasets(this.type, this.data, theme),
+				options: mergeOptions(themeOptions(this.type, this.data, this.options, theme), {
 					responsive: true,
 					maintainAspectRatio: true,
 					...this.options
-				}
+				})
 			});
 		} catch (e) {
 			this.error = e instanceof Error ? e.message : String(e);
@@ -106,22 +106,26 @@ var UChartBlock = class UChartBlock extends UElement {
 			this.chartjs = null;
 		}
 	}
-	/** 현재 테마의 CSS 변수를 읽어 Chart.defaults에 전역 적용 */
-	applyTheme() {
-		const css = (v) => getComputedStyle(this).getPropertyValue(v).trim();
-		const textColor = css("--u-txt-color");
-		const weakColor = css("--u-txt-color-weak");
-		const borderColor = css("--u-border-color");
-		const bgColor = css("--u-bg-color");
-		Chart.defaults.color = textColor;
-		Chart.defaults.borderColor = borderColor;
-		Chart.defaults.plugins.tooltip.backgroundColor = bgColor;
-		Chart.defaults.plugins.tooltip.titleColor = textColor;
-		Chart.defaults.plugins.tooltip.bodyColor = weakColor;
-		Chart.defaults.plugins.tooltip.borderColor = borderColor;
-		Chart.defaults.plugins.tooltip.borderWidth = 1;
-		Chart.defaults.scale.ticks.color = weakColor;
-		Chart.defaults.scale.grid.color = borderColor;
+	/**
+	* 현재 테마의 CSS 변수를 읽는다. ⚠`Chart.defaults` 를 바꾸지 않는다 — 전역이라 같은 페이지에서
+	* 소비자가 직접 만든 chart.js 차트의 색까지 바꿨다. 값은 이 인스턴스의 옵션으로만 들어간다.
+	*/
+	readTheme() {
+		const style = getComputedStyle(this);
+		const css = (v) => style.getPropertyValue(v).trim();
+		const palette = [];
+		for (let i = 1; i <= PALETTE_MAX; i++) {
+			const c = css(`--u-chart-color-${i}`);
+			if (!c) break;
+			palette.push(c);
+		}
+		return {
+			text: css("--u-txt-color"),
+			weak: css("--u-txt-color-weak"),
+			border: css("--u-border-color"),
+			background: css("--u-bg-color"),
+			palette
+		};
 	}
 	handleDownloadPNG() {
 		if (!this.chartjs) return;
@@ -155,5 +159,100 @@ __decorate([query("canvas"), __decorateMetadata("design:type", typeof HTMLCanvas
 __decorate([query(".viewport"), __decorateMetadata("design:type", typeof HTMLElement === "undefined" ? Object : HTMLElement)], UChartBlock.prototype, "viewport", void 0);
 __decorate([state(), __decorateMetadata("design:type", Object)], UChartBlock.prototype, "error", void 0);
 UChartBlock = __decorate([customElement("u-chart-block")], UChartBlock);
+/** 읽어 볼 팔레트 토큰의 상한 — 시트는 여덟을 선언한다. 비어 있는 첫 번호에서 멈춘다. */
+var PALETTE_MAX = 12;
+function isPlain(v) {
+	return typeof v === "object" && v !== null && !Array.isArray(v);
+}
+/** `base` 위에 `over` 를 깊게 덮는다 — 소비자가 준 값이 항상 이긴다. 입력은 바꾸지 않는다. */
+function mergeOptions(base, over) {
+	const out = { ...base };
+	for (const [k, v] of Object.entries(over)) out[k] = isPlain(v) && isPlain(out[k]) ? mergeOptions(out[k], v) : v;
+	return out;
+}
+var CARTESIAN = /* @__PURE__ */ new Set([
+	"bar",
+	"line",
+	"scatter",
+	"bubble"
+]);
+var RADIAL = /* @__PURE__ */ new Set(["radar", "polarArea"]);
+var PER_POINT = /* @__PURE__ */ new Set([
+	"pie",
+	"doughnut",
+	"polarArea"
+]);
+/**
+* 테마 색을 담은 인스턴스 옵션. 축은 «이 차트에 실제로 생길 축» 에만 준다 — 원형 차트에 `x`/`y`
+* 설정을 주면 축이 생길 수 있어서다. 축 id 는 차트 종류의 기본 축 · 소비자가 선언한 축 · 데이터셋이
+* 가리키는 축의 합집합이다.
+*/
+function themeOptions(type, data, options, t) {
+	const tooltip = {
+		backgroundColor: t.background,
+		titleColor: t.text,
+		bodyColor: t.weak,
+		borderColor: t.border,
+		borderWidth: 1
+	};
+	const ids = new Set(Object.keys(options?.scales ?? {}));
+	if (CARTESIAN.has(type)) {
+		ids.add("x");
+		ids.add("y");
+	}
+	if (RADIAL.has(type)) ids.add("r");
+	for (const ds of data.datasets ?? []) {
+		const d = ds;
+		for (const key of [
+			"xAxisID",
+			"yAxisID",
+			"rAxisID"
+		]) if (typeof d[key] === "string") ids.add(d[key]);
+	}
+	const scales = {};
+	for (const id of ids) scales[id] = {
+		ticks: { color: t.weak },
+		grid: { color: t.border },
+		...RADIAL.has(type) && id === "r" ? {
+			angleLines: { color: t.border },
+			pointLabels: { color: t.text }
+		} : {}
+	};
+	return {
+		color: t.text,
+		borderColor: t.border,
+		plugins: {
+			tooltip,
+			legend: { labels: { color: t.text } }
+		},
+		...ids.size ? { scales } : {}
+	};
+}
+/**
+* 색을 지정하지 않은 데이터셋에 팔레트를 입힌다. 소비자가 준 `backgroundColor`/`borderColor` 는
+* 건드리지 않고, 입력 객체도 바꾸지 않는다(사본을 돌려준다). 원형 차트는 조각마다 한 색이다.
+*/
+function paintDatasets(type, data, t) {
+	const p = t.palette;
+	if (!p.length || !data.datasets) return data;
+	const datasets = data.datasets.map((ds, i) => {
+		const d = { ...ds };
+		const has = (k) => d[k] !== void 0;
+		if (PER_POINT.has(type)) {
+			const n = Array.isArray(d.data) ? d.data.length : 0;
+			if (!has("backgroundColor")) d.backgroundColor = Array.from({ length: n }, (_, j) => p[j % p.length]);
+			if (!has("borderColor") && t.background) d.borderColor = t.background;
+		} else {
+			const c = p[i % p.length];
+			if (!has("borderColor")) d.borderColor = c;
+			if (!has("backgroundColor")) d.backgroundColor = c;
+		}
+		return d;
+	});
+	return {
+		...data,
+		datasets
+	};
+}
 //#endregion
 export { UChartBlock };

package/dist/components-extra/UMapBlock.js

@@ -1,6 +1,7 @@
 import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
 import { registerElementBlock } from "../utilities/ElementRegistry.js";
+import { messages } from "../utilities/messages.js";
 import { styles } from "./UMapBlock.styles.js";
 import schema from "./UMapBlock.schema.js";
 import { html, nothing } from "lit";
@@ -34,6 +35,7 @@ var UMapBlock = class UMapBlock extends UElement {
       >
         <strong>${this.label}</strong>
         <span>${this.description}</span>
+        <span class="new-tab-hint">${messages.text("opensInNewTab")}</span>
       </a>
     `;
 	}

package/dist/components-extra/UMapBlock.styles.js

@@ -52,6 +52,18 @@ var styles = css`
     font-size: 0.7em;
     opacity: 0.8;
   }
+  /* 새 창 알림 — 화면에는 없고 접근성 이름에만 붙는다(KWCAG 7.2.1). */
+  .new-tab-hint {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 `;
 //#endregion
 export { styles };

package/dist/components-extra/UVideoBlock.d.ts

@@ -1,5 +1,14 @@
 import { nothing, PropertyValues } from 'lit';
 import { UElement } from '@iyulab/components/dist/components/UElement.js';
+/** 자막·캡션 트랙(WebVTT) 하나. */
+export interface VideoTrack {
+    src: string;
+    /** 기본 `subtitles` */
+    kind?: 'subtitles' | 'captions' | 'descriptions' | 'chapters' | 'metadata';
+    srclang?: string;
+    label?: string;
+    default?: boolean;
+}
 /**
  * 비디오 플레이어 블록 컴포넌트
  */
@@ -11,6 +20,11 @@ export declare class UVideoBlock extends UElement {
     poster?: string;
     /** 비디오 비율 */
     ratio: '16:9' | '4:3' | '1:1';
+    /**
+     * 직접 파일 영상의 자막·캡션 트랙(WebVTT). 영상이 섀도 안에 그려지므로 앱이 `<track>` 을
+     * 넣을 수 없다 — 이 속성이 유일한 자리다. YouTube·Vimeo 는 그 플레이어가 자막을 다룬다.
+     */
+    tracks: VideoTrack[];
     protected updated(changedProperties: PropertyValues): void;
     render(): typeof nothing | import('lit-html').TemplateResult<1>;
     private isYouTube;

package/dist/components-extra/UVideoBlock.js

@@ -1,5 +1,6 @@
 import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorateMetadata.js";
 import __decorate from "../_virtual/_@oxc-project_runtime@0.151.0/helpers/esm/decorate.js";
+import { sanitizeHref } from "../utilities/sanitizers.js";
 import { registerElementBlock } from "../utilities/ElementRegistry.js";
 import { styles } from "./UVideoBlock.styles.js";
 import schema from "./UVideoBlock.schema.js";
@@ -13,6 +14,7 @@ var UVideoBlock = class UVideoBlock extends UElement {
 	constructor(..._args) {
 		super(..._args);
 		this.ratio = "16:9";
+		this.tracks = [];
 	}
 	static {
 		this.styles = [super.styles, styles];
@@ -55,7 +57,13 @@ var UVideoBlock = class UVideoBlock extends UElement {
         poster=${ifDefined(this.poster)}
         controls
         playsinline
-      ></video>
+      >${this.tracks.filter((t) => t && typeof t.src === "string" && sanitizeHref(t.src) !== "#").map((t) => html`<track
+          src=${sanitizeHref(t.src)}
+          kind=${t.kind ?? "subtitles"}
+          srclang=${ifDefined(t.srclang)}
+          label=${ifDefined(t.label)}
+          ?default=${t.default === true}
+        />`)}</video>
     `;
 	}
 	isYouTube(url) {
@@ -79,6 +87,7 @@ var UVideoBlock = class UVideoBlock extends UElement {
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UVideoBlock.prototype, "src", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UVideoBlock.prototype, "poster", void 0);
 __decorate([property({ type: String }), __decorateMetadata("design:type", String)], UVideoBlock.prototype, "ratio", void 0);
+__decorate([property({ type: Array }), __decorateMetadata("design:type", Array)], UVideoBlock.prototype, "tracks", void 0);
 UVideoBlock = __decorate([customElement("u-video-block")], UVideoBlock);
 //#endregion
 export { UVideoBlock };

package/dist/components-extra/UVideoBlock.schema.js

@@ -20,6 +20,44 @@ var schema = {
 			],
 			default: "16:9",
 			description: "Video aspect ratio"
+		},
+		tracks: {
+			type: "array",
+			items: {
+				type: "object",
+				properties: {
+					src: {
+						type: "string",
+						description: "WebVTT file URL"
+					},
+					kind: {
+						type: "string",
+						enum: [
+							"subtitles",
+							"captions",
+							"descriptions",
+							"chapters",
+							"metadata"
+						],
+						default: "subtitles",
+						description: "Track kind"
+					},
+					srclang: {
+						type: "string",
+						description: "Language of the track text (BCP 47, e.g. ko)"
+					},
+					label: {
+						type: "string",
+						description: "Name shown in the player's track menu"
+					},
+					default: {
+						type: "boolean",
+						description: "Show this track by default"
+					}
+				},
+				required: ["src"]
+			},
+			description: "Subtitle / caption tracks for a direct video file (ignored for YouTube and Vimeo)"
 		}
 	},
 	required: ["src"]

package/dist/utilities/messages.d.ts

@@ -5,5 +5,5 @@
  * 이 리포가 채택한 표준이 *"영어 기본 **+ 레지스트리**"* 이기 때문이다 — 영어 리터럴만으로는
  * 한국어 앱이 그 문구를 되돌릴 방법이 없다. 다음 문자열은 여기로 온다.
  */
-export type ChatMessageKey = 'canvasUnavailable' | 'previousReference' | 'nextReference' | 'closePreview' | 'closeLightbox' | 'previousImage' | 'nextImage' | 'sendMessage' | 'stopGenerating' | 'fullScreen' | 'remove' | 'pngDownload' | 'jsonDownload' | 'search' | 'rowCount' | 'excelDownload' | 'csvDownload' | 'openImage' | 'previewFile' | 'imageBlocked' | 'imageBlockedNamed';
+export type ChatMessageKey = 'canvasUnavailable' | 'previousReference' | 'nextReference' | 'closePreview' | 'closeLightbox' | 'previousImage' | 'nextImage' | 'sendMessage' | 'stopGenerating' | 'fullScreen' | 'remove' | 'pngDownload' | 'jsonDownload' | 'search' | 'rowCount' | 'excelDownload' | 'csvDownload' | 'openImage' | 'previewFile' | 'imageBlocked' | 'imageBlockedNamed' | 'opensInNewTab';
 export declare const messages: import('@iyulab/components/dist/utilities/Locale.js').LocaleNamespace<ChatMessageKey>;

package/dist/utilities/messages.js

@@ -22,7 +22,8 @@ messages.register("en", {
 	openImage: "Open image {index}",
 	previewFile: "Preview {name}",
 	imageBlocked: "Image blocked",
-	imageBlockedNamed: "Image blocked: {name}"
+	imageBlockedNamed: "Image blocked: {name}",
+	opensInNewTab: "(opens in a new tab)"
 });
 messages.register("ko", {
 	canvasUnavailable: "Canvas 2D context를 가져올 수 없습니다.",
@@ -45,7 +46,8 @@ messages.register("ko", {
 	openImage: "이미지 {index} 열기",
 	previewFile: "{name} 미리보기",
 	imageBlocked: "차단된 이미지",
-	imageBlockedNamed: "차단된 이미지: {name}"
+	imageBlockedNamed: "차단된 이미지: {name}",
+	opensInNewTab: "(새 창에서 열림)"
 });
 //#endregion
 export { messages };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@iyulab/chat-components",
   "description": "llm chat components for building chat interfaces",
-  "version": "0.14.1",
+  "version": "0.16.0",
   "author": "iyulab",
   "license": "MIT",
   "keywords": [
@@ -70,9 +70,9 @@
   },
   "peerDependencies": {
     "@iyulab/components": ">=1.51.0",
-    "@lit/react": ">=1.0.8",
-    "chart.js": ">=4.5.1",
-    "react": ">=18.0.0"
+    "@lit/react": "^1.0.8",
+    "chart.js": "^4.5.1",
+    "react": "^18.0.0 || ^19.0.0"
   },
   "peerDependenciesMeta": {
     "@lit/react": {

package/skills/iyulab-chat-components/references/components/chart-block.md

@@ -65,6 +65,23 @@ of it was clipped by the block's `overflow: hidden` with no scrollbar left to re
 
 There is no size property or custom property for this — the host is the lever.
 
+## Colors and theme
+
+Text, tick, grid, and tooltip colors come from the design tokens (`--u-txt-color`,
+`--u-txt-color-weak`, `--u-border-color`, `--u-bg-color`), and dataset colors from the chart palette
+`--u-chart-color-1..N` — the same palette dashboards and `@iyulab/u-widgets` use. Both apply to **this
+chart only**: `Chart.defaults` is not modified, so other Chart.js charts on the page keep their own
+look.
+
+Anything you pass wins: a dataset's own `backgroundColor`/`borderColor` is kept, and `options` are
+merged over the theme (`options.scales.x.ticks.color` overrides just that value). Without the token
+sheet the palette is empty and Chart.js defaults apply.
+
+```css
+/* Recolour the palette for one area */
+.report u-chart-block { --u-chart-color-1: #0b6e4f; }
+```
+
 ## Properties
 
 | Property | Type | Default | Description |
@@ -80,6 +97,7 @@ There is no size property or custom property for this — the host is the lever.
 | Download | Export chart as PNG or raw JSON data |
 | Full screen | Toggle the chart viewport into full-screen mode |
 | Theme sync | Watches `document.documentElement[theme]` and re-renders on change |
+| Palette | Datasets without `backgroundColor`/`borderColor` take `--u-chart-color-1..N` from the design-token sheet (per slice for `pie`/`doughnut`/`polarArea`) |
 
 ## Requires
 

package/skills/iyulab-chat-components/references/components/video-block.md

@@ -55,6 +55,7 @@ reason as the image block: vertical squeezing would break the aspect ratio. The
 | `src` | `string` | `undefined` | Video URL: YouTube, Vimeo, or direct file |
 | `poster` | `string` | `undefined` | Poster image URL for direct video files |
 | `ratio` | `'16:9'\|'4:3'\|'1:1'` | `'16:9'` | Aspect ratio |
+| `tracks` | `VideoTrack[]` | `[]` | Subtitle / caption tracks (WebVTT) for a direct video file — `{ src, kind?, srclang?, label?, default? }`, `kind` defaults to `'subtitles'`. The video is inside the shadow tree, so this is the only way to add a `<track>`. Ignored for YouTube and Vimeo. Track files on another origin load only when that server allows CORS for the page |
 
 ## Supported Platforms