@iyulab/chat-components 0.15.0 → 0.16.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # 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

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/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.15.0",
+  "version": "0.16.0",
   "author": "iyulab",
   "license": "MIT",
   "keywords": [

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