@iyulab/chat-components 0.11.9 → 0.12.1

package/CHANGELOG.md

@@ -1,5 +1,68 @@
 # Changelog
 
+## [0.12.1] - 2026-09-15
+
+### Fixed
+
+- **`u-table-block` columns could not be sorted from the keyboard.** The sortable header cell only
+  listened for clicks, took no focus and exposed no sort state. Each header now holds a button that
+  fills the cell (the pointer target is unchanged), Enter or Space toggles the sort, and the header
+  carries `aria-sort`. The button is exposed as the `sort-button` part.
+- **`u-images-block` thumbnails and `u-file-block` previews could not be opened from the
+  keyboard.** Both were click-only `div`s. A thumbnail is now a button (named by the image's `alt`,
+  or "Open image N"); a previewable file card's body is a button named "Preview <name>", exposed as
+  the `card-main` part, with the remove button kept outside it. Cards that cannot be previewed no
+  longer show a pointer cursor or hover state. New locale keys: `openImage`, `previewFile`.
+
+## [0.12.0] - 2026-09-10
+
+### Changed
+
+- **`@iyulab/components` moved from `dependencies` to `peerDependencies`.** It owns
+  process-global state — the custom element registry and module-level singletons — so two
+  copies in one install tree split that state with no error raised. Consumers already
+  installing `@iyulab/components` are unaffected; the declaration now says that this package
+  uses the copy they installed rather than fetching one of its own.
+
+- **The KaTeX `marked` extension is now owned in-package**, replacing the third-party
+  `marked-katex-extension`, and `katex` moves to `^0.18.7`. No published version of that
+  extension satisfied both a `katex <0.19` peer range and compiled `.d.ts`/`.js` output, so
+  depending on it pinned `katex` to 0.17 and required an install-time override that does not
+  reach consumers of the published package at all. A browser regression pins the render
+  contract first — delimiter parsing, `displayMode` versus block placement, and the inputs that
+  must *not* be treated as maths (currency pairs, newlines inside inline maths) — so the
+  replacement is demonstrably equivalent rather than merely plausible. The `.katex` coupling
+  point is unchanged across both minors.
+
+### Fixed
+
+- **A `max-height` on `u-chart-block` or `u-map-block` now actually constrains the block.** Both
+  laid their inner box out independently of the host — the chart viewport kept its content height
+  and the map's frame kept a flat 300px — so a height set on the component shrank the component
+  without shrinking what was inside it, and the surplus was clipped away by the block's own
+  `overflow: hidden` with no scrollbar left to reach it. Measured at 600px wide against a 120px
+  host: 248px of the chart and 180px of the map were unreachable. The toolbar and the chart area
+  (and the map frame) now divide the component's height by layout, so a constraint on the component
+  reaches them. The map's 300px is unchanged as the height you get when nothing constrains it.
+  - `u-images-block`, `u-video-block` and `u-message` deliberately do **not** follow such a
+    constraint: the first two derive height from width through `aspect-ratio`, and squeezing a
+    message bubble hides content that the conversation itself already scrolls. They overflow
+    visibly rather than clipping, and a browser regression now pins that distinction — not
+    following a constraint and silently clipping are different things.
+
+- **A `max-height` on `u-table-block` now actually constrains the table.** The scrolling table area
+  carried a fixed 480px maximum of its own, so a height set on the component shrank the component
+  without shrinking the table inside it: the surplus was clipped away by the block's own
+  `overflow: hidden` with no scrollbar left to reach it. Measured with 40 rows and a 200px
+  `max-height`, 330px of rows became unreachable. The header row and the table area now divide the
+  component's height by layout, so a constraint on the component reaches the table and the rows
+  stay reachable by scrolling. The 480px default is unchanged: left unconstrained, a long table
+  still stops there rather than swallowing the conversation.
+
+- **The reference carousel's navigation buttons presented a 16×16 pointer target**, below the
+  24×24 CSS px minimum (WCAG 2.2 SC 2.5.8). Nothing visible changes: the buttons carry no
+  border or background, and the icon size is still set by `font-size`.
+
 ## [0.11.9] - 2026-09-08
 
 ### Fixed

package/README.md

@@ -112,6 +112,22 @@ markedBlock.value = llmResponse;
 
 ---
 
+## Accessibility
+
+The baseline is **WCAG 2.2**. The table lists what this package **measures in tests** — it is not a
+conformance claim for the success criteria it does not list.
+
+| Success criterion | Guarantee | Measured by |
+|---|---|---|
+| 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` |
+
+`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.
+
+Color contrast comes from the `@iyulab/components` tokens this package renders with — see that
+package's Accessibility section.
+
 ## Documentation
 
 | File | Description |

package/dist/_virtual/{_@oxc-project_runtime@0.148.0 → _@oxc-project_runtime@0.149.0}/helpers/esm/decorate.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+//#region \0@oxc-project+runtime@0.149.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.148.0 → _@oxc-project_runtime@0.149.0}/helpers/esm/decorateMetadata.js

@@ -1,4 +1,4 @@
-//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorateMetadata.js
+//#region \0@oxc-project+runtime@0.149.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,6 +1,6 @@
 import { styles } from "./UCodeBlock.styles.js";
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.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.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { UDataElement } from "../UDataElement.js";
 import { styles } from "./UElementBlock.styles.js";
 import { html, nothing } from "lit";

package/dist/components/blocks/UFileBlock.d.ts

@@ -25,6 +25,8 @@ export declare class UFileBlock extends UElement {
     /** 클릭 시 오버레이로 미리볼 수 있는 타입인지 여부 */
     private get previewable();
     render(): import('lit-html').TemplateResult<1>;
+    /** 썸네일과 이름·메타 — 버튼 안에 들어가므로 구문 콘텐츠(`span`)로만 짓는다. */
+    private renderCardMain;
     private handleCardClick;
     private closePreview;
     private handleKeyDown;

package/dist/components/blocks/UFileBlock.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { messages } from "../../utilities/messages.js";
 import { styles } from "./UFileBlock.styles.js";
 import { html, nothing } from "lit";
@@ -52,22 +52,10 @@ var UFileBlock = class UFileBlock extends UElement {
 	}
 	render() {
 		return html`
-      <div class="card" @click=${this.handleCardClick}>
-        <div class="thumbnail">
-          ${this.isImage ? html`<img src=${this.url} alt=${this.name || ""} loading="lazy" />` : this.isVideo ? html`<video src="${this.url}#t=0.1" preload="metadata" muted playsinline></video>` : html`<u-icon lib="internal-chat" name=${this.resolveIcon(this.type)}></u-icon>`}
-        </div>
-
-        <div class="info">
-          <div class="name">${this.name}</div>
-          <div class="meta">
-            <span class="type">
-              ${this.resolveExt(this.name, this.type)}
-            </span>
-            <span class="size">
-              ${this.formatSize(this.size || 0)}
-            </span>
-          </div>
-        </div>
+      <div class="card" ?previewable=${this.previewable}>
+        ${this.previewable ? html`<button type="button" class="card-main" part="card-main"
+              aria-label=${messages.text("previewFile", { name: this.name || "" })}
+              @click=${this.handleCardClick}>${this.renderCardMain()}</button>` : html`<span class="card-main">${this.renderCardMain()}</span>`}
 
         <u-button class="remove-btn"
           ?hidden=${!this.removable}
@@ -91,6 +79,21 @@ var UFileBlock = class UFileBlock extends UElement {
           </div>
         </div>
       ` : nothing}
+    `;
+	}
+	/** 썸네일과 이름·메타 — 버튼 안에 들어가므로 구문 콘텐츠(`span`)로만 짓는다. */
+	renderCardMain() {
+		return html`
+      <span class="thumbnail">
+        ${this.isImage ? html`<img src=${this.url} alt=${this.name || ""} loading="lazy" />` : this.isVideo ? html`<video src="${this.url}#t=0.1" preload="metadata" muted playsinline></video>` : html`<u-icon lib="internal-chat" name=${this.resolveIcon(this.type)}></u-icon>`}
+      </span>
+      <span class="info">
+        <span class="name">${this.name}</span>
+        <span class="meta">
+          <span class="type">${this.resolveExt(this.name, this.type)}</span>
+          <span class="size">${this.formatSize(this.size || 0)}</span>
+        </span>
+      </span>
     `;
 	}
 	/** MIME 타입 → Tabler Icon 이름 */

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

@@ -15,20 +15,39 @@ var styles = css`
     flex-direction: row;
     align-items: center;
     min-width: 0;
-    gap: 10px;
-    padding: 8px 10px;
     border: 1px solid var(--u-border-color);
     border-radius: 8px;
     background-color: var(--u-neutral-50);
     overflow: visible;
-    cursor: pointer;
     transition: background-color 0.12s ease, border-color 0.12s ease;
   }
-  .card:hover {
+  .card[previewable]:hover {
     background-color: var(--u-neutral-100);
     border-color: var(--u-border-color-strong);
   }
 
+  /* 카드 본문 — 미리볼 수 있으면 버튼, 아니면 span. 둘 다 같은 배치를 갖는다.
+     카드의 여백을 본문이 가져, 누를 면이 종전(카드 전체)과 같다 — 제거 버튼은 절대 배치라 흐름에 없다. */
+  .card-main {
+    all: unset;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    flex: 1;
+    min-width: 0;
+    gap: 10px;
+    padding: 8px 10px;
+    border-radius: 8px;
+  }
+  button.card-main {
+    cursor: pointer;
+  }
+  button.card-main:focus-visible {
+    outline: 2px solid var(--u-primary-color, #1976D2);
+    outline-offset: 1px;
+  }
+
   .thumbnail {
     position: relative;
     flex-shrink: 0;
@@ -62,6 +81,7 @@ var styles = css`
   }
 
   .name {
+    display: block;
     font-size: 13px;
     font-weight: 500;
     color: var(--u-txt-color-strong);

package/dist/components/blocks/UMarkedBlock.js

@@ -1,9 +1,10 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import "./UCodeBlock.js";
 import { escapeHtmlAttr, escapeHtmlHref, escapeHtmlText, stripZeroWidth } from "../../utilities/sanitizers.js";
 import { HtmlBuilder } from "../../utilities/HtmlBuilder.js";
 import { UElementBlock } from "./UElementBlock.js";
+import { markedKatex } from "../../utilities/markedKatex.js";
 import "../references/URefTag.js";
 import { URefCard } from "../references/URefCard.js";
 import "../references/URefCardGroup.js";
@@ -15,7 +16,6 @@ import { customElement, property, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { UElement } from "@iyulab/components/dist/components/UElement.js";
 import { Marked, Parser } from "marked";
-import markedKatex from "marked-katex-extension";
 //#region src/components/blocks/UMarkedBlock.ts
 var UMarkedBlock = class UMarkedBlock extends UElement {
 	constructor(..._args) {

package/dist/components/blocks/URefBlock.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import "../references/URefCard.js";
 import { styles } from "./URefBlock.styles.js";
 import { html } from "lit";

package/dist/components/blocks/UTableBlock.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { UDataElement } from "../UDataElement.js";
 import { messages } from "../../utilities/messages.js";
 import { styles } from "./UTableBlock.styles.js";
@@ -69,14 +69,18 @@ var UTableBlock = class UTableBlock extends UDataElement {
                   <th
                     ?active=${isActive}
                     align=${h.align ?? "left"}
-                    @click=${() => this.handleSortColumn(i)}
+                    aria-sort=${isActive ? this.sort.dir === "asc" ? "ascending" : "descending" : "none"}
                   >
-                    ${unsafeHTML(h.text)}
-                    <u-icon
-                      class="sort-icon"
-                      lib="internal-chat"
-                      name=${isActive ? this.sort.dir === "asc" ? "sort-ascending-letters" : "sort-descending-letters" : "arrows-sort"}
-                    ></u-icon>
+                    <!-- 정렬은 머리 칸 전체를 채우는 버튼이다 — 클릭만 받는 th 는 키보드로 닿지 않았다. -->
+                    <button type="button" class="sort-button" part="sort-button"
+                      @click=${() => this.handleSortColumn(i)}>
+                      ${unsafeHTML(h.text)}
+                      <u-icon
+                        class="sort-icon"
+                        lib="internal-chat"
+                        name=${isActive ? this.sort.dir === "asc" ? "sort-ascending-letters" : "sort-descending-letters" : "arrows-sort"}
+                      ></u-icon>
+                    </button>
                   </th>
                 `;
 		})}

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

@@ -1,8 +1,12 @@
 import { css } from "lit";
 //#region src/components/blocks/UTableBlock.styles.ts
 var styles = css`
+  /* 세로 flex 인 이유: 소비자가 호스트에 높이·max-height 를 주면 그 제약이 .table-wrapper 까지
+     닿아야 한다. 종전에는 display:block + 래퍼의 max-height:480px 리터럴이라, 호스트를 200px 로
+     줄이면 래퍼가 480 을 유지해 330px 이 overflow:hidden 에 잘리고 스크롤바도 없었다. */
   :host {
-    display: block;
+    display: flex;
+    flex-direction: column;
     width: 100%;
     margin: 8px 0;
     border: 1px solid var(--u-border-color);
@@ -11,6 +15,7 @@ var styles = css`
   }
 
   .toolbar {
+    flex: none;
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -52,8 +57,12 @@ var styles = css`
   }
 
   .table-wrapper {
+    flex: 1 1 auto;
+    min-height: 0;
     overflow-x: auto;
     overflow-y: auto;
+    /* 제약이 없을 때의 기본 상한 — 채팅 스트림에서 긴 표가 화면을 삼키지 않게 한다.
+       «최대» 이므로 위 flex 수축을 막지 않는다(호스트 제약이 이긴다). */
     max-height: 480px;
     width: 100%;
   }
@@ -74,14 +83,32 @@ var styles = css`
   }
 
   th {
-    padding: 8px 12px;
+    padding: 0;
     font-weight: 600;
     text-align: left;
     border-bottom: 2px solid var(--u-border-color);
     white-space: nowrap;
-    cursor: pointer;
     user-select: none;
   }
+
+  /* 칸 전체가 누를 면이다 — 여백을 th 가 아니라 버튼이 갖는다. */
+  .sort-button {
+    all: unset;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    inline-size: 100%;
+    padding: 8px 12px;
+    font: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+  th[align="center"] .sort-button { justify-content: center; }
+  th[align="right"] .sort-button { justify-content: flex-end; }
+  .sort-button:focus-visible {
+    outline: 2px solid var(--u-primary-color, #1976D2);
+    outline-offset: -2px;
+  }
   th:hover {
     background-color: var(--u-neutral-200);
   }

package/dist/components/blocks/UTextBlock.js

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

package/dist/components/references/URefCard.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { UDataElement } from "../UDataElement.js";
 import { styles } from "./URefCard.styles.js";
 import { html } from "lit";

package/dist/components/references/URefCardGroup.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.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

@@ -33,6 +33,11 @@ var styles = css`
     color: inherit;
     font-size: 16px;
     cursor: pointer;
+    /* WCAG 2.2 SC 2.5.8 — 실측 16x16 이라 포인터 타깃이 모자랐다. 배경도 테두리도 없는
+       아이콘 버튼이라 상자를 키워도 **보이는 것은 그대로**다: 아이콘 치수는 위 font-size 가
+       정하고 여기서 늘어나는 것은 잡히는 영역뿐이다. */
+    min-inline-size: 24px;
+    min-block-size: 24px;
   }
   .nav-button:hover u-icon {
     opacity: 0.6;

package/dist/components/references/URefTag.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { styles } from "./URefTag.styles.js";
 import { html } from "lit";
 import { customElement, property } from "lit/decorators.js";

package/dist/components-extra/UChartBlock.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { messages } from "../utilities/messages.js";
 import { styles } from "./UChartBlock.styles.js";
 import { html, nothing } from "lit";

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

@@ -1,9 +1,16 @@
 import { css } from "lit";
 //#region src/components-extra/UChartBlock.styles.ts
 var styles = css`
+  /* 🔴호스트를 «세로 flex» 로 둔다 — display:block 이면 사슬이 여기서 끊긴다.
+     내부는 툴바(고정) + 뷰포트(가변) 구조인데, 호스트가 block 이면 그 둘이 호스트의
+     max-height 에 참여하지 못해 호스트만 줄고 뷰포트는 제 높이를 유지한다.
+     그러면 overflow:hidden 에 잘리고 스크롤도 없어 도달할 수 없다 — 실측(자연 368):
+     호스트 120 에서 뷰포트가 316 그대로였고 248px 이 잘렸다.
+     계약은 tests/browser/extra-block-size-model.browser.test.ts 가 고정한다. */
   :host {
     margin: 0.75em auto;
-    display: block;
+    display: flex;
+    flex-direction: column;
     width: 100%;
     background: var(--u-bg-color);
     border: 1px solid var(--u-border-color);
@@ -19,6 +26,8 @@ var styles = css`
     background-color: var(--u-neutral-100);
     border-bottom: 1px solid var(--u-border-color);
     gap: 8px;
+    /* 툴바는 줄어들지 않는다 — 제약이 들어오면 차트가 양보한다. */
+    flex: none;
   }
 
   .toolbar-left {
@@ -42,6 +51,11 @@ var styles = css`
   .viewport {
     position: relative;
     padding: 1em;
+    /* ⚠min-height:0 이 없으면 flex 아이템의 기본 min-height:auto 가 «줄어들지 않음» 이라
+       위 사슬이 그대로 무효가 된다(이 리포가 여러 번 밟은 자리). */
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
   }
 
   .viewport:fullscreen {

package/dist/components-extra/UImagesBlock.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { messages } from "../utilities/messages.js";
 import { styles } from "./UImagesBlock.styles.js";
 import { html, nothing } from "lit";
@@ -65,18 +65,21 @@ var UImagesBlock = class UImagesBlock extends UElement {
         .gap=${8}
       >
         ${repeat(this.items, (item, i) => html`
-          <div class="slide"
+          <!-- 썸네일은 라이트박스를 여는 버튼이다 — 클릭만 받는 div 는 키보드로 열 수 없었다.
+               대체 텍스트가 있으면 그것이 이름이고, 없으면 «이미지 N 열기» 로 이름을 준다. -->
+          <button type="button" class="slide"
+            aria-label=${item.alt ? nothing : messages.text("openImage", { index: i + 1 })}
             @click=${() => this.open(i)}>
             <img
               src=${item.src}
               alt=${item.alt || ""}
               loading="lazy"
             />
-            <div class="caption"
+            <span class="caption"
               ?hidden=${!item.caption}>
               ${item.caption}
-            </div>
-          </div>
+            </span>
+          </button>
         `)}
       </u-carousel>
 

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

@@ -9,11 +9,24 @@ var styles = css`
 
   .slide {
     position: relative;
+    display: block;
+    inline-size: 100%;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    font: inherit;
+    color: inherit;
+    text-align: start;
     border-radius: 10px;
     overflow: hidden;
     cursor: pointer;
     aspect-ratio: 4 / 3;
   }
+  .slide:focus-visible {
+    outline: 2px solid var(--u-primary-color, #1976D2);
+    outline-offset: 2px;
+  }
   .slide img {
     display: block;
     width: 100%;

package/dist/components-extra/UMapBlock.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { styles } from "./UMapBlock.styles.js";
 import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";

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

@@ -1,9 +1,14 @@
 import { css } from "lit";
 //#region src/components-extra/UMapBlock.styles.ts
 var styles = css`
+  /* 🔴호스트를 «세로 flex» 로 둔다 — display:block 이면 아래 iframe 의 300px 이
+     호스트의 max-height 에 참여하지 못한다. 실측: 호스트 120 에서 지도가 300 그대로였고
+     180px 이 overflow:hidden 에 잘렸다(스크롤도 없어 도달 불가).
+     계약은 tests/browser/extra-block-size-model.browser.test.ts 가 고정한다. */
   :host {
     position: relative;
-    display: block;
+    display: flex;
+    flex-direction: column;
     width: 100%;
     border-radius: 8px;
     overflow: hidden;
@@ -12,7 +17,12 @@ var styles = css`
 
   iframe {
     width: 100%;
+    /* ⚠이 300px 은 «고정» 이 아니라 «제약이 없을 때의 기본» 이다 — flex-basis 가 auto 라
+       선언이 그대로 기본값이 되고, 호스트가 제약을 주면 flex 가 그것을 이긴다.
+       (이름과 값을 유지하고 의미만 재정의한 것은 u-widgets 의 차트 높이와 같은 처리다.) */
     height: 300px;
+    flex: 1 1 auto;
+    min-height: 0;
     display: block;
     border: none;
   }

package/dist/components-extra/UVideoBlock.js

@@ -1,5 +1,5 @@
-import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorateMetadata.js";
-import __decorate from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+import __decorateMetadata from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorateMetadata.js";
+import __decorate from "../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { styles } from "./UVideoBlock.styles.js";
 import { html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";