@iyulab/chat-components 0.15.0 → 0.16.1

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # Changelog
 
+## [0.16.1] - 2026-10-03
+
+### Changed
+
+- **Transitions follow the motion tokens, so reduced motion stops them.** Hover, expand and fade
+  transitions in the blocks, reference cards and image gallery took fixed durations and kept moving for
+  users who prefer reduced motion. They now read `--u-duration-*` from `@iyulab/components`, which drops
+  to zero under `prefers-reduced-motion: reduce`. Some speeds move to the nearest step of the scale.
+- **`u-prompt[loading]`'s sweeping border holds still under reduced motion** — the coloured band stays,
+  so the busy state is still visible.
+
+## [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/_virtual/{_@oxc-project_runtime@0.151.0 → _@oxc-project_runtime@0.152.0}/helpers/esm/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.151.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.152.0/helpers/esm/decorate.js
 function __decorate(decorators, target, key, desc) {
 	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
 	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);

package/dist/_virtual/{_@oxc-project_runtime@0.151.0 → _@oxc-project_runtime@0.152.0}/helpers/esm/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.151.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.152.0/helpers/esm/decorateMetadata.js
 function __decorateMetadata(k, v) {
 	if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
 }

package/dist/components/blocks/UCodeBlock.js

@@ -1,7 +1,7 @@
 import "../../utilities/icons.js";
 import { styles } from "./UCodeBlock.styles.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 __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";

package/dist/components/blocks/UElementBlock.js

@@ -1,5 +1,5 @@
-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 __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { UDataElement } from "../UDataElement.js";
 import { getElementBlockProperties } from "../../utilities/ElementRegistry.js";
 import { styles } from "./UElementBlock.styles.js";

package/dist/components/blocks/UFileBlock.js

@@ -1,6 +1,6 @@
 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 __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { messages } from "../../utilities/messages.js";
 import { styles } from "./UFileBlock.styles.js";
 import { html, nothing } from "lit";

package/dist/components/blocks/UFileBlock.styles.js

@@ -19,7 +19,7 @@ var styles = css`
     border-radius: 8px;
     background-color: var(--u-neutral-50);
     overflow: visible;
-    transition: background-color 0.12s ease, border-color 0.12s ease;
+    transition: background-color var(--u-duration-fast, 140ms) ease, border-color var(--u-duration-fast, 140ms) ease;
   }
   .card[previewable]:hover {
     background-color: var(--u-neutral-100);
@@ -60,7 +60,7 @@ var styles = css`
     font-size: 16px;
     border-radius: 6px;
     background-color: var(--u-neutral-200);
-    transition: background 0.15s ease;
+    transition: background var(--u-duration-fast, 140ms) ease;
     overflow: hidden;
   }
   .thumbnail img,
@@ -123,7 +123,7 @@ var styles = css`
     color: var(--u-neutral-0);
     opacity: 0;
     pointer-events: none;
-    transition: opacity 0.12s ease, background-color 0.12s ease;
+    transition: opacity var(--u-duration-fast, 140ms) ease, background-color var(--u-duration-fast, 140ms) ease;
   }
   .card:hover .remove-btn {
     opacity: 1;
@@ -143,7 +143,7 @@ var styles = css`
     flex-direction: column;
     background: rgba(0, 0, 0, 0.92);
     cursor: default;
-    animation: preview-fadeIn 0.2s ease;
+    animation: preview-fadeIn var(--u-duration-normal, 220ms) ease;
   }
 
   .preview-header {
@@ -174,7 +174,7 @@ var styles = css`
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: background 0.2s;
+    transition: background var(--u-duration-normal, 220ms);
   }
   .preview-close:hover  { background: rgba(255, 255, 255, 0.18); }
   .preview-close:active { background: rgba(255, 255, 255, 0.28); }

package/dist/components/blocks/UMarkedBlock.js

@@ -1,5 +1,5 @@
-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 __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import "./UCodeBlock.js";
 import { escapeHtmlAttr, escapeHtmlHref, escapeHtmlText, stripZeroWidth } from "../../utilities/sanitizers.js";
 import { HtmlBuilder } from "../../utilities/HtmlBuilder.js";

package/dist/components/blocks/URefBlock.js

@@ -1,5 +1,5 @@
-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 __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import "../references/URefCard.js";
 import { styles } from "./URefBlock.styles.js";
 import { html } from "lit";

package/dist/components/blocks/URefBlock.styles.js

@@ -30,7 +30,7 @@ var styles = css`
   u-icon {
     color: inherit;
     font-size: 1em;
-    transition: transform 0.2s ease-in-out;
+    transition: transform var(--u-duration-normal, 220ms) ease-in-out;
   }
   u-icon[collapsed] {
     transform: rotate(-90deg);
@@ -61,7 +61,7 @@ var styles = css`
     flex-direction: column;
     gap: 0.75em;
     margin-top: 0.75em;
-    transition: all 0.3s ease-in-out;
+    transition: all var(--u-duration-slow, 320ms) ease-in-out;
   }
   .body[collapsed] {
     height: 0;

package/dist/components/blocks/UTableBlock.js

@@ -1,6 +1,6 @@
 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 __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { UDataElement } from "../UDataElement.js";
 import { messages } from "../../utilities/messages.js";
 import { styles } from "./UTableBlock.styles.js";

package/dist/components/blocks/UTableBlock.styles.js

@@ -127,7 +127,7 @@ var styles = css`
     margin-left: 4px;
     font-size: 12px;
     opacity: 0.3;
-    transition: opacity 0.15s;
+    transition: opacity var(--u-duration-fast, 140ms);
   }
 
   tbody tr {

package/dist/components/blocks/UTextBlock.js

@@ -1,5 +1,5 @@
-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 __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { styles } from "./UTextBlock.styles.js";
 import { html } from "lit";
 import { customElement, property, query } from "lit/decorators.js";

package/dist/components/message/UMessage.js

@@ -1,5 +1,5 @@
-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 __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { styles } from "./UMessage.styles.js";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";

package/dist/components/prompt/UPrompt.js

@@ -1,6 +1,6 @@
 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 __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { messages } from "../../utilities/messages.js";
 import "../blocks/UFileBlock.js";
 import { styles } from "./UPrompt.styles.js";

package/dist/components/prompt/UPrompt.styles.js

@@ -70,6 +70,14 @@ var styles = css`
     border-radius: 50%;
   }
 
+  /* 동작 줄이기 — 흐르는 테두리를 멈춘다. 색 띠는 그대로 남아 «응답 중» 은 계속 보인다(메시지의 점 로더와 같은 처리). */
+  @media (prefers-reduced-motion: reduce) {
+    :host([loading])::before {
+      animation: none;
+      background-position: 50% 0;
+    }
+  }
+
   @keyframes border-shimmer {
     0%   { background-position: 100% 0; }
     100% { background-position: 0% 0; }

package/dist/components/references/URefCard.js

@@ -1,8 +1,9 @@
 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 __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.152.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

@@ -16,7 +16,7 @@ var styles = css`
     padding: 6px;
     color: inherit;
     text-decoration: none;
-    transition: all 0.2s ease;
+    transition: all var(--u-duration-normal, 220ms) ease;
   }
   a:hover {
     color: var(--u-txt-color-hover, #1565C0);
@@ -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/URefCardGroup.js

@@ -1,5 +1,5 @@
-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 __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { messages } from "../../utilities/messages.js";
 import { URefCard } from "./URefCard.js";
 import { styles } from "./URefCardGroup.styles.js";

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

@@ -61,7 +61,7 @@ var styles = css`
     flex-direction: row;
     width: 100%;
     will-change: transform;
-    transition: transform 260ms ease;
+    transition: transform var(--u-duration-normal, 220ms) ease;
   }
 
   /* slot 안의 각 카드가 한 페이지(100%)를 차지하도록 */

package/dist/components/references/URefTag.js

@@ -1,7 +1,8 @@
 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 __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.152.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

@@ -12,7 +12,7 @@ var styles = css`
     border-radius: 9999px;
     background-color: var(--u-neutral-100);
     padding: 2px 6px;
-    transition: background-color 0.2s ease-in-out;
+    transition: background-color var(--u-duration-normal, 220ms) ease-in-out;
     cursor: pointer;
   }
   :host(:hover) {
@@ -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.js

@@ -1,6 +1,6 @@
 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 __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { registerElementBlock } from "../utilities/ElementRegistry.js";
 import { messages } from "../utilities/messages.js";
 import { styles } from "./UChartBlock.styles.js";

package/dist/components-extra/UImagesBlock.js

@@ -1,5 +1,5 @@
-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 __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorate.js";
 import { registerElementBlock } from "../utilities/ElementRegistry.js";
 import { messages } from "../utilities/messages.js";
 import { resolveImageSource } from "../utilities/imageSources.js";

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

@@ -33,7 +33,7 @@ var styles = css`
     height: 100%;
     object-fit: cover;
     pointer-events: none;
-    transition: transform 0.3s ease, filter 0.3s ease;
+    transition: transform var(--u-duration-slow, 320ms) ease, filter var(--u-duration-slow, 320ms) ease;
   }
   .slide:hover img {
     transform: scale(1.05);
@@ -75,7 +75,7 @@ var styles = css`
     display: flex;
     flex-direction: column;
     background: rgba(0, 0, 0, 0.92);
-    animation: overlay-fadeIn 0.2s ease;
+    animation: overlay-fadeIn var(--u-duration-normal, 220ms) ease;
   }
 
   /* 상단 헤더: 카운터(중앙) + 닫기(우측) */
@@ -112,7 +112,7 @@ var styles = css`
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: background 0.2s;
+    transition: background var(--u-duration-normal, 220ms);
   }
   .lb-close:hover  {
     background: rgba(255, 255, 255, 0.18);
@@ -147,7 +147,7 @@ var styles = css`
     flex-direction: row;
     align-items: center;
     gap: 16px;
-    transition: transform 0.45s cubic-bezier(0.25, 0.1, 0.25, 1);
+    transition: transform var(--u-duration-slow, 320ms) cubic-bezier(0.25, 0.1, 0.25, 1);
     will-change: transform;
   }
 
@@ -159,7 +159,7 @@ var styles = css`
     justify-content: center;
     opacity: 0.5;
     transform: scale(0.9);
-    transition: opacity 0.4s ease, transform 0.4s ease;
+    transition: opacity var(--u-duration-slow, 320ms) ease, transform var(--u-duration-slow, 320ms) ease;
   }
   .lb-slide[active] {
     opacity: 1;
@@ -192,7 +192,7 @@ var styles = css`
     align-items: center;
     justify-content: center;
     cursor: pointer;
-    transition: background 0.25s;
+    transition: background var(--u-duration-normal, 220ms);
   }
   .lb-nav.prev {
     left: 0;
@@ -218,7 +218,7 @@ var styles = css`
     padding: 12px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.15);
-    transition: background 0.2s, transform 0.15s;
+    transition: background var(--u-duration-normal, 220ms), transform var(--u-duration-fast, 140ms);
   }
   .lb-nav:hover u-icon {
     background: rgba(255, 255, 255, 0.3);

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 __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../_virtual/_@oxc-project_runtime@0.152.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 __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.152.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../_virtual/_@oxc-project_runtime@0.152.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/node_modules/katex/dist/katex.js

@@ -26276,7 +26276,7 @@ var renderToHTMLTree = function renderToHTMLTree(expression, options) {
 		return renderError(error, expression, settings);
 	}
 };
-var version = "0.18.9";
+var version = "0.18.10";
 var __domTree = {
 	Span,
 	Anchor,

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.1",
   "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