@haiyue/ui 0.2.1 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## Unreleased
+
+## 0.2.2 - 2026-10-23
+
+- 新增 `HYModal` / `<hy-modal>` 及独立 `@haiyue/ui/modal` 入口：支持原生模态层、标题/正文/页脚插槽、确认与取消按钮、可阻止的操作事件、异步确认加载态、独立遮罩/Esc/关闭按钮控制、受控状态、焦点恢复、滚动锁与隐藏内容卸载。
+
+- 新增 `HYQRCode` / `<hy-qr-code>` 二维码组件及独立 `@haiyue/ui/qr-code` 入口，支持本地 SVG 编码、Unicode、尺寸/颜色/纠错等级、中央图片或 icon 插槽及留白配置；带图标时默认采用 H 级纠错，允许显式选择其他等级并限制遮挡面积，提供空值/超容量/图标加载失败状态。修复示例中带图标时纠错等级下拉框无法选择的问题。
+
+- Collapse 新增 `animated` 与 `animation-duration` / `animationDuration`，支持可配置时长和缓动的展开/收起动画、快速反向切换、内容尺寸变化、减少动态效果偏好与断开清理；收起时立即同步无障碍状态，`destroyOnHidden` 延迟到动画完成后销毁内容。
+
+- 新增 `HYCarousel` / `<hy-carousel>` 轮播组件及独立 `@haiyue/ui/carousel` 入口：支持自定义指示点样式/位置/渲染、自动播放与暂停、拖拽、循环、水平/垂直切换、键盘导航、非活动面板 inert、减少动态效果偏好与完整生命周期清理。
+
+- 新增可按需导入的 `HYMasonry` / `<hy-masonry>` 瀑布流组件：支持最短列布局、自动或固定列数、最小列宽、间距、动态内容与容器尺寸响应、RTL、布局事件及断开清理；组件示例按类别内字母顺序排列。
+
+- 扩展 portable/core 与 Web 适配器的呈现契约：按钮样式/尺寸/矢量图标、文字样式与色调、Tabs 分段模式、Select 呈现配置及字体缩放主题；新增 FormGroup 帮助文字、响应式布局辅助函数，并保持控件焦点、输入与选择状态。
+
 ## 0.2.1 - 2026-10-20
 
 - 新增可按需导入的 `HYTag` / `<hy-tag>` 标签组件，支持语义与自定义配色、三种尺寸、文字或 icon 插槽、可取消的关闭事件、可选择状态、键盘操作和禁用状态；新增 `HYToast` / `<hy-toast>` 轻提示组件，支持五种状态、上/中/下位置、自动或持久显示、最大数量、手动关闭/清空、生命周期事件与完整计时器清理。

package/LICENSE

@@ -19,3 +19,30 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+---
+Vendored QR Code encoder: src/internal/qrcodegen.ts
+Source: https://github.com/nayuki/QR-Code-generator/blob/master/typescript-javascript/qrcodegen.ts
+Upstream Git blob: c4191ac0b5f8a24d87fd9340ceaa2d3b07d0231a
+Local changes: ES module export, strict indexed-access assertions, and formatting.
+
+QR Code generator library (TypeScript)
+
+Copyright (c) Project Nayuki. (MIT License)
+https://www.nayuki.io/page/qr-code-generator-library
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+- The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+- The Software is provided "as is", without warranty of any kind, express or
+  implied, including but not limited to the warranties of merchantability,
+  fitness for a particular purpose and noninfringement. In no event shall the
+  authors or copyright holders be liable for any claim, damages or other
+  liability, whether in an action of contract, tort or otherwise, arising from,
+  out of or in connection with the Software or the use or other dealings in the
+  Software.

package/README.md

@@ -48,6 +48,168 @@ defineHaiyueUI();
 Because `defineHaiyueUI()` references the complete component set, prefer focused subpaths in bundle-sensitive
 product entry points.
 
+## Modal
+
+Import `defineModalComponents` from `@haiyue/ui/modal` and register once. `HYModal` is also exported by the root
+and included in `defineHaiyueUI()`. It provides default confirmation/cancel actions around a native modal
+`<dialog>`, with top-layer rendering, background inertness, focus containment and return focus through shadow roots.
+The existing Dialog entry remains available for surfaces with application-supplied footer actions.
+
+```html
+<hy-modal id="publish" heading="Publish project" width="560" ok-text="Publish">
+  <p>Review the project before publishing.</p>
+</hy-modal>
+```
+
+Call `showModal()` / `close(reason?)`, or set the reflected boolean `open` property/attribute.
+`heading` defaults to “Modal”; the `heading` slot overrides its content and the default slot supplies the body.
+`width` defaults to 520 CSS pixels (240–2000), constrained to the viewport. `centered`, `closable`,
+`mask-closable` / `maskClosable`, `keyboard` (Escape), and `show-footer` / `showFooter` all default to true;
+set their attributes to `"false"` or properties to false to disable them independently.
+`ok-text` / `okText` and `cancel-text` / `cancelText` default to “OK” and “Cancel”.
+Use the `footer` slot for application-owned custom actions, replacing both default buttons.
+
+Bubbling/composed events are `modal-open`, `modal-ok`, `modal-cancel` and `modal-close`.
+The cancelable `modal-ok` and `modal-cancel` events carry `{ reason }`. Preventing either event keeps the modal open.
+Close reasons are `ok`, `cancel`, `close-button`, `mask`, `escape` and `programmatic`; `close(reason)` also accepts
+an application-specific string. `modal-close` fires once after an actual close, with `{ reason }`.
+With `controlled`, default user actions only emit requests; the application updates `open` or calls `close()`.
+
+```js
+publish.addEventListener('modal-ok', async event => {
+  event.preventDefault();
+  publish.confirmLoading = true;
+  try {
+    await saveProject();
+    publish.close('ok');
+  } finally {
+    publish.confirmLoading = false;
+  }
+});
+publish.showModal();
+```
+
+`confirm-loading` / `confirmLoading` disables the default actions and user dismissal, shows a spinner and marks the
+surface busy; application `close()` remains available. `confirm-disabled` / `confirmDisabled` only disables confirmation.
+`destroy-on-hidden` / `destroyOnHidden` unmounts light DOM content while closed, retaining the same nodes, values and
+listeners for reopening. It defaults to false. Disconnecting removes modality and scroll locks without emitting a
+close event; a retained `open` attribute reopens on reconnection. Nested modals retain scroll locking until the last closes.
+
+Style parts `panel`, `header`, `heading`, `body`, `footer`, `actions`, `ok-button`, `cancel-button`,
+`close-button`, `spinner`. Tokens include `--hy-modal-width`, `--hy-modal-radius`, `--hy-modal-body-padding`,
+`--hy-modal-duration`, `--hy-modal-bg-color`, `--hy-modal-mask-color`, `--hy-modal-mask-blur`, `--hy-modal-shadow-color`,
+`--hy-modal-footer-bg-color` and `--hy-modal-button-radius`; colors inherit semantic theme tokens. Reduced-motion
+preferences suppress the entrance and spinner animations. No sibling component import or automatic registration is needed.
+
+## QR Code
+
+Import `defineQRCodeComponents` from `@haiyue/ui/qr-code` and call it once. The root registration path also includes
+`<hy-qr-code>`. Values are encoded locally into SVG; no runtime dependency or remote QR generation service is used.
+
+```html
+<hy-qr-code value="https://haiyuestudio.github.io/UI/" size="220"
+  icon="/brand.svg" icon-size="32" icon-margin="2" aria-label="Open Haiyue UI"></hy-qr-code>
+
+<hy-qr-code value="https://haiyuestudio.github.io/UI/">
+  <img slot="icon" src="/brand.svg" alt="" />
+</hy-qr-code>
+```
+
+Set `value` to a URL or text (including UTF-8/Chinese/emoji). `size` defaults to 200 CSS pixels (64–2048).
+`margin` is the quiet zone in modules (default/minimum 4, maximum 16).
+`error-correction-level` / `errorCorrectionLevel` accepts `L`, `M`, `Q`, or `H`. Without an explicit level,
+it defaults to `H` with an icon and `M` otherwise. An explicit level applies with or without an icon.
+An `icon` image URL or content in the `icon` slot adds a center icon; the slot takes precedence over the URL.
+`icon-size` / `iconSize` requests the content size in pixels (default 32), while `icon-margin` / `iconMargin`
+sets its backing padding (default 2). The complete overlay is capped at 20% of the QR matrix width, including padding,
+and scales with responsive sizing. Icon content is decorative and inert. A failed image leaves the plain QR visible.
+
+`color` and `background-color` / `backgroundColor` customize the QR colors. The inherited tokens
+`--hy-qr-code-color` and `--hy-qr-code-background-color` default to dark modules on white for both themes.
+Other styling hooks are `--hy-qr-code-icon-radius`, `--hy-qr-code-radius` and parts `frame`, `code`,
+`background`, `modules`, `icon`, `icon-image`, `message`. Keep sufficient contrast and verify your final payload,
+size, colors and icon with the intended scanner; arbitrary custom styling can affect readability.
+
+The read-only `status` is `empty`, `ready`, or `error`. Empty values and over-capacity payloads clear the previous code.
+Bubbling, composed events are `qr-render` with `{ value, version, moduleCount, errorCorrectionLevel }` after encoding,
+`qr-error` with `{ message }` on encoding failure, and `qr-icon-error` with `{ src }` on image failure.
+SVG is decorative beneath a labelled image role; set `aria-label` to describe the QR's purpose.
+
+The internal encoder is vendored from [Project Nayuki](https://www.nayuki.io/page/qr-code-generator-library),
+upstream Git blob `c4191ac0b5f8a24d87fd9340ceaa2d3b07d0231a`, with its MIT notice retained in source and `LICENSE`.
+Local edits only add an ES module export, strict indexed-access assertions and formatting. Independent decoding tests
+use `jsqr` as a development-only dependency. Internal encoder symbols are excluded from the public component API.
+
+## Carousel
+
+`@haiyue/ui/carousel` exports `HYCarousel`, `defineCarouselComponents()` and the associated `HYCarousel*` types.
+Registration is explicit; panels are HTML elements in the default slot and stay mounted between changes.
+
+```html
+<hy-carousel direction="horizontal" indicator-style="line" indicator-position="bottom"
+  autoplay interval="4000" draggable="true" loop="true" aria-label="Featured projects">
+  <article>First panel</article>
+  <article>Second panel</article>
+  <article>Third panel</article>
+</hy-carousel>
+```
+
+| Attribute / property | Default | Behavior |
+| --- | --- | --- |
+| `index` | `0` | Active panel, zero based |
+| `direction` | `horizontal` | `horizontal` or `vertical`; horizontal supports RTL |
+| `indicator-style` / `indicatorStyle` | `dot` | `dot`, `line`, `number` |
+| `indicator-position` / `indicatorPosition` | `bottom` | `top`, `right`, `bottom`, `left` |
+| `show-indicators` / `showIndicators` | `true` | Set `false` to hide indicators |
+| `show-arrows` / `showArrows` | `true` | Set `false` to hide previous/next buttons |
+| `autoplay` | `false` | Opt-in automatic rotation with a pause/start button |
+| `interval` | `3000` | Milliseconds, normalized to 100–86,400,000 |
+| `draggable` | `true` | Mouse/touch swipe; set `false` to disable |
+| `loop` | `true` | Wrap at the ends; `false` clamps and stops autoplay at the last panel |
+
+Use `next()`, `previous()`, `goTo(index)`, `play()` and `pause()` for imperative control.
+The bubbling, composed `change` event includes `{ index, previousIndex, source }`, with sources
+`api`, `indicator`, `arrow`, `keyboard`, `drag`, `autoplay` and `content`.
+Inactive panels are inert and hidden from assistive technology. Arrow keys (matching direction), Home and End
+navigate the focused viewport or indicators; input fields keep their editing keys. Hover temporarily pauses rotation;
+keyboard focus pauses until explicitly resumed. Reduced-motion preferences suppress transitions and initial automatic
+rotation; `play()` permits explicit rotation. Disconnecting releases timers, pointer listeners and animations and restores panel attributes/styles.
+
+Customize `::part(indicators)`, `::part(indicator)`, `::part(indicator-active)`, `::part(indicator-content)`,
+`::part(previous)`, `::part(next)`, `::part(playback)` and `::part(viewport)`.
+Tokens include `--hy-carousel-height` (240px), `--hy-carousel-duration` (320ms), `--hy-carousel-indicator-size`,
+`--hy-carousel-indicator-gap`, `--hy-carousel-indicator-offset`, `--hy-carousel-indicator-radius`,
+`--hy-carousel-indicator-color` and `--hy-carousel-indicator-active-color`; other colors inherit semantic theme tokens.
+For arbitrary content, set `indicatorRenderer = (index, active) => Node | string | null` (strings are plain text).
+The component retains the native accessible indicator buttons and click/keyboard behavior around your content.
+Panels should not override the component's positioning, dimensions, visibility or transform.
+
+## Masonry layout
+
+Import `defineMasonryComponents` from `@haiyue/ui/masonry` and call it once to register `<hy-masonry>`.
+Place HTML elements of varying heights in the default slot:
+
+```html
+<hy-masonry min-column-width="240" gap="16" aria-label="Project gallery">
+  <article>First card…</article>
+  <article>Another card with more content…</article>
+  <article><img src="preview.jpg" alt="Project preview" style="width: 100%" /></article>
+</hy-masonry>
+```
+
+`columns` defaults to `0` (automatic); positive values request a fixed number of columns.
+`min-column-width` (default `240`) controls automatic sizing; `gap` (default `16`) sets both gaps in CSS pixels.
+Columns shrink to fit narrow containers. Each item goes into the shortest column, starting at the inline start,
+including RTL layouts. DOM, screen-reader and keyboard order remain the original slot order.
+Items keep their own content, theme and semantics; the component supplies positioning, border-box width and zero outer margins.
+Use padding inside cards and avoid overriding item positioning/width. Text nodes and named slots are not layout items.
+
+Container resizing, item resizing (including image loads), adding/removing items and toggling `hidden` automatically
+schedule a layout. Call `refresh()` after changes outside those observations (for example, a stylesheet rule that
+reveals a previously hidden item). `layout-change` bubbles across shadow roots with `{ columns, itemCount, height }`
+after geometry changes; `itemCount` excludes hidden items. Style the transparent container with `::part(layout)`.
+Observers and queued frames are released on disconnect, and internal item CSS properties are restored.
+
 ## Tag and toast
 
 Tags provide compact semantic labels with optional checked and close interactions. Toasts are an imperative,
@@ -116,7 +278,7 @@ button, or the application calls `search()`. Its detail contains `{ value, valid
 available. Style the `control`, `input`, `prefix`, `suffix`, and `search-button` parts or the
 `--hy-input-affix-*` and `--hy-input-search-*` tokens.
 
-## Portable component semantics (M24 G03/G05, unreleased)
+## Portable component semantics (M24 G03/G05)
 
 `@haiyue/ui/core` provides platform-independent component types, validation, selection/input/action
 controllers and the `PlatformView` lifetime contract. `@haiyue/ui/portable` provides `HYPage`, selector
@@ -150,7 +312,7 @@ elements. It introduces no runtime package dependencies or automatic registratio
 [Web adapter guide](docs/web-adapter.md) and [interactive example](examples/portable-ui/index.html).
 Run `npm run test:web-adapter` for Chromium/WebKit regression coverage.
 
-These APIs are under development and have not been published. Mobile mapping is G06, desktop mapping
+These APIs are included in the package and remain under development. Mobile mapping is G06, desktop mapping
 G08, and ShaderLab shared-page migration G07. Existing Web component APIs below remain independent. See the
 [portable UI guide](docs/portable-ui.md) and [typed composition example](test/portable/fixtures/settings-page.ts).
 Run `npm run verify:portable` for semantics, no-DOM types, and an isolated offline tarball consumer.
@@ -306,6 +468,24 @@ group to one. Configure `iconPosition`, `collapsible`, `bordered`, `ghost`, and
 to a labelled region, and user changes emit the composed `collapse-change` event with the active keys and
 changed panel. The component exposes structural shadow parts from `collapse` and `panel` through `body`.
 
+Enable `animated` / `animated = true` for smooth opening and closing. Animation is off by default;
+initial rendering stays immediate. Set `animation-duration` / `animationDuration` in milliseconds
+(default 200, range 0–10,000); zero disables animation. Without the attribute, the inherited
+`--hy-collapse-animation-duration` token (for example `250ms`) supplies the duration.
+`--hy-collapse-animation-easing` customizes the easing (default `ease`).
+
+```html
+<hy-collapse animated animation-duration="250" destroy-on-hidden></hy-collapse>
+```
+
+Rapid toggles reverse from the current height, and content resizing during expansion updates the target height.
+Closed panels become inert and hidden from assistive technology immediately; focus returns to their header
+when needed. With `destroyOnHidden`, content is removed after the closing animation finishes.
+Disabling animation, setting duration to zero, or enabling reduced-motion preferences settles immediately.
+Animations and content observers are released on disconnect. The existing `collapse-change` event still fires
+when the expanded state changes, rather than waiting for animation completion. These options extend `HYCollapse`;
+no new package exports or registration functions are required.
+
 ## Affix
 
 Import `@haiyue/ui/affix` to pin actions, navigation, or status content after it crosses a viewport threshold.
@@ -655,7 +835,7 @@ npm run release:check
 ```
 
 Candidates: `.artifacts/packages/`. Review API changes before `npm run api:update`.
-See [release review](review/release-0.1.2.md).
+See [release review](review/release-0.2.2.md).
 
 ### 共享组件目录（开发中）
 
@@ -674,3 +854,21 @@ See [release review](review/release-0.1.2.md).
 Native 仓库的 `examples/ui-validation/mobile` 提供独立「Haiyue UI」组件实验室；折叠内容、步骤导航与按钮组是基础节点组合示例，不是新增协议节点。
 
 Web 的 `hy-badge` 新增可选 `literal` 属性（默认为 false）：启用后 `count` 按原始文字显示，保留 0、前导零和大数字。普通计数的隐藏零值、截断，以及 status/text 模式保持原行为；共享 Badge 适配显式启用此模式。
+
+The portable presentation contract adds optional semantic `Button.variant`
+(`primary`, `secondary`, `quiet`, `danger`), `size` and vector `icon` names;
+`Text.textStyle` (`title`, `body`, `caption`) and `tone`; `Tabs.variant`
+(`underline`, `segmented`); and native `Select.presentation`. Existing nodes stay
+valid. `HYTheme.typography` scales with fontScale, and optional selected, pressed,
+disabled, elevated and onAccent colors map to inherited `--hy-` properties.
+`HYIconName`, `HYButtonVariant`, `HYTextStyle` and `HYTypography` are explicitly
+exported from `@haiyue/ui/core`; `HY_ICONS` / `hyIconSvg` are explicitly exported
+from `@haiyue/ui/portable`, with no platform access or registration at import time.
+
+Portable forms accept optional `FormGroup.description`, rendered as visible helper
+text and included in associated controls' accessible descriptions. Updating help
+or validation errors preserves the existing input, selection and composition.
+`@haiyue/ui/portable` explicitly exports `hyResponsiveGrid`,
+`hyResponsiveWorkspace`, `HYResponsiveGridOptions` and
+`HYResponsiveWorkspaceOptions`. These return logical-pixel layout data without
+reading window or platform globals, so hosts can use actual split-window sizes.

package/dist/adapters/web/controls.js

@@ -1,3 +1,4 @@
+import { hyIconSvg } from '../../portable/icons.js';
 import { HYButtonController, HYToggleController, HYSliderController } from '../../core/actions.js';
 import { HYSelectionController } from '../../core/selection.js';
 import { HYTextController } from '../../core/text.js';
@@ -29,6 +30,7 @@ export function definePortableWebComponents() {
     defineDialogComponents();
 }
 export const componentTags = Object.freeze({ Checkbox: 'hy-checkbox', RadioGroup: 'div', Rate: 'hy-rate', Badge: 'hy-badge', Divider: 'hy-divider', Button: 'hy-button', Toggle: 'hy-checkbox', Select: 'hy-select', Tabs: 'hy-tabs', TextInput: 'hy-input', Slider: 'hy-range', Dialog: 'hy-dialog' });
+const selectionProps = ({ value, options, disabled }) => ({ value, options, ...(disabled === undefined ? {} : { disabled }) });
 let radioGroupSequence = 0;
 function toggleProps(node) { const { checked, disabled, visible } = node.props; return { checked, ...(disabled === undefined ? {} : { disabled }), ...(visible === undefined ? {} : { visible }) }; }
 export function createControl(node, context, revision) {
@@ -43,7 +45,7 @@ export function createControl(node, context, revision) {
             } ; if (next.kind === 'Divider')
                 attribute(host, 'label', next.props.text); }, focus() { }, dispose() { } };
     if (node.kind === 'RadioGroup') {
-        const controller = new HYSelectionController(node.key, node.props, emit);
+        const controller = new HYSelectionController(node.key, selectionProps(node.props), emit);
         let props = node.props;
         const buttons = new Map(), groupName = `hy-portable-radio-${++radioGroupSequence}`;
         host.setAttribute('role', 'radiogroup');
@@ -57,7 +59,7 @@ export function createControl(node, context, revision) {
                 if (next.kind !== 'RadioGroup')
                     return;
                 props = next.props;
-                controller.update(props);
+                controller.update(selectionProps(props));
                 for (const [value, button] of buttons)
                     if (!props.options.some(o => o.value === value)) {
                         button.remove();
@@ -106,6 +108,10 @@ export function createControl(node, context, revision) {
         const label = document.createElement('span');
         label.dataset.hyButtonLabel = '';
         button.append(label);
+        const icon = document.createElement('span');
+        icon.slot = 'icon';
+        icon.setAttribute('aria-hidden', 'true');
+        let lastIcon;
         const controller = new HYButtonController(node.key, node.props, emit);
         listen(button, 'click', () => controller.activate(reason));
         return {
@@ -115,6 +121,20 @@ export function createControl(node, context, revision) {
                 controller.update(next.props);
                 if (label.textContent !== next.props.text)
                     label.textContent = next.props.text;
+                attribute(button, 'data-hy-variant', next.props.variant ?? 'secondary');
+                attribute(button, 'data-hy-size', next.props.size ?? 'regular');
+                if (lastIcon !== next.props.icon) {
+                    icon.innerHTML = next.props.icon ? hyIconSvg(next.props.icon) : '';
+                    lastIcon = next.props.icon;
+                }
+                if (next.props.icon) {
+                    if (!icon.parentNode)
+                        button.append(icon);
+                }
+                else
+                    icon.remove();
+                flag(button, 'icon-only', !!next.props.icon && !next.props.text);
+                flag(button, 'loading', !!next.props.busy);
                 flag(button, 'disabled', !!next.props.disabled || !!next.props.busy);
                 attribute(button, 'aria-busy', next.props.busy ? 'true' : undefined);
             },
@@ -144,7 +164,7 @@ export function createControl(node, context, revision) {
         const select = host;
         if (select instanceof HYTabs)
             select.controlled = true;
-        const controller = new HYSelectionController(node.key, node.props, emit);
+        const controller = new HYSelectionController(node.key, selectionProps(node.props), emit);
         let previous;
         controller.attach({
             apply(props) {
@@ -180,8 +200,11 @@ export function createControl(node, context, revision) {
                 const target = [...select.shadowRoot.querySelectorAll('button')].find(item => item.dataset.value === select.value);
                 target?.focus();
             }, true);
-        return { update(next) { if (next.kind === 'Select' || next.kind === 'Tabs')
-                controller.update(next.props); },
+        return { update(next) { if (next.kind === 'Select' || next.kind === 'Tabs') {
+                if (next.kind === 'Tabs')
+                    attribute(host, 'data-hy-variant', next.props.variant ?? 'underline');
+                controller.update(selectionProps(next.props));
+            } },
             focus() { if (select instanceof HYSelect)
                 select.shadowRoot.querySelector('select').focus();
             else

package/dist/adapters/web/renderer.js

@@ -192,11 +192,15 @@ export class HYWebRenderer {
         }
         if (node.kind === 'FormGroup') {
             entry.label = document.createElement('legend');
+            entry.help = document.createElement('span');
+            entry.help.dataset.hyHelp = '';
+            element.append(entry.help);
             entry.error = document.createElement('span');
             entry.error.dataset.hyError = '';
             entry.label.id = `${entry.id}-label`;
             entry.error.id = `${entry.id}-error`;
-            element.append(entry.label, entry.error);
+            element.prepend(entry.label);
+            element.append(entry.error);
         }
         if (node.kind === 'PlatformView') {
             const factory = this.options.platformViews?.[node.props.slot];
@@ -218,6 +222,8 @@ export class HYWebRenderer {
         flag(element, 'hidden', node.props.visible === false);
         entry.control?.update(node, revision);
         if (node.kind === 'Text') {
+            attribute(element, 'data-hy-text-style', node.props.textStyle ?? 'body');
+            attribute(element, 'data-hy-tone', node.props.tone ?? 'default');
             if (element.textContent !== node.props.text)
                 element.textContent = node.props.text;
             element.style.whiteSpace = node.props.wrap === false ? 'pre' : 'pre-wrap';
@@ -242,6 +248,8 @@ export class HYWebRenderer {
         }
         if (node.kind === 'FormGroup') {
             entry.label.textContent = node.props.label;
+            entry.help.textContent = node.props.description ?? '';
+            entry.help.hidden = !node.props.description;
             entry.error.textContent = node.props.error ?? '';
             entry.error.hidden = !node.props.error;
         }
@@ -323,7 +331,7 @@ export class HYWebRenderer {
             group = group.parent ? this.#nodes.get(group.parent) : undefined;
         const groupProps = group?.node.kind === 'FormGroup' ? group.node.props : undefined;
         const label = node.props.a11y?.label ?? (entry.control || node.kind === 'TextArea' ? groupProps?.label : undefined);
-        const description = [node.props.a11y?.description, node.props.a11y?.error ?? groupProps?.error].filter(Boolean).join('. ');
+        const description = [node.props.a11y?.description, groupProps?.description, node.props.a11y?.error ?? groupProps?.error].filter(Boolean).join('. ');
         const a11y = label === undefined ? undefined : { ...node.props.a11y, label, ...(groupProps?.error && !node.props.a11y?.error ? { error: groupProps.error } : {}) };
         applyAccessibility(element, a11y);
         const targets = element instanceof HYTabs ? [...element.shadowRoot.querySelectorAll('[role=tablist],button')]

package/dist/adapters/web/styles.d.ts

@@ -1,3 +1,3 @@
 /** Only the renderer-owned wrapper and owned ShadowRoots receive these rules. */
-export declare const rootCSS = "\n[data-hy-portable-root] { box-sizing:border-box; min-width:0; min-height:0; width:100%; height:100%;\n color:var(--hy-text-color,#d8e2f2); background:var(--hy-surface-color,#171d28);\n font:var(--hy-font-size,14px)/var(--hy-line-height,22px) system-ui,sans-serif; }\n[data-hy-portable-root] [data-hy-key] { box-sizing:border-box; min-width:0; min-height:0; }\n[data-hy-portable-root] [data-hy-key][hidden] { display:none !important; }\n[data-hy-portable-root] [data-hy-kind=Row] { display:flex; flex-direction:row; }\n[data-hy-portable-root] [data-hy-kind=RadioGroup] { display:flex; flex-wrap:wrap; gap:var(--hy-gap,8px); }\n[data-hy-portable-root] [data-hy-kind=RadioGroup] hy-radio { font:inherit; min-height:44px; }\n[data-hy-portable-root] [data-hy-kind=Column] { display:flex; flex-direction:column; }\n[data-hy-portable-root] [data-hy-kind=Grid], [data-hy-portable-root] [data-hy-kind=Overlay] { display:grid; }\n[data-hy-portable-root] [data-hy-kind=Text] { display:block; overflow-wrap:anywhere; white-space:pre-wrap; }\n[data-hy-portable-root] [data-hy-kind=Icon] { width:1.25em; height:1.25em; object-fit:contain; }\n[data-hy-portable-root] [data-hy-kind=FormGroup] { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--hy-gap,8px); }\n[data-hy-portable-root] [data-hy-kind=FormGroup] > legend { padding:0; }\n[data-hy-portable-root] [data-hy-error] { color:var(--hy-invalid-border-color,#d65c7c); font-size:.9em; }\n[data-hy-portable-root] textarea { box-sizing:border-box; width:100%; min-height:5em; resize:vertical; padding:8px;\n color:var(--hy-text-color,#d8e2f2); background:var(--hy-input-bg-color,#121822); border:1px solid var(--hy-border-color,#303746);\n border-radius:var(--hy-radius,4px); font:inherit; }\n[data-hy-portable-root] textarea:focus-visible { outline:2px solid var(--hy-focus-ring-color,#8177f2); outline-offset:1px; }\n[data-hy-portable-root] [data-hy-slot-group] { display:contents; }\n[data-hy-portable-root][data-hy-reduced-motion] { --hy-portable-transition:none; }\n@media(prefers-reduced-motion:reduce) { [data-hy-portable-root] { --hy-portable-transition:none; } }\n";
-export declare const componentCSS = "\n:host { --hy-input-font:var(--hy-font-size,14px)/var(--hy-line-height,22px) system-ui,sans-serif; font:inherit;\n --hy-panel-bg-color:var(--hy-surface-color,#171d28); --hy-surface-elevated-color:var(--hy-surface-color,#171d28);\n --hy-menu-bg-color:var(--hy-surface-color,#171d28); --hy-dialog-bg-color:var(--hy-surface-color,#171d28);\n --hy-dialog-body-color:var(--hy-text-color,#d8e2f2); --hy-dialog-footer-bg-color:var(--hy-surface-color,#171d28);\n --hy-accent-strong-color:var(--hy-accent-color,#8177f2); --hy-selected-bg-color:var(--hy-accent-color,#8177f2);\n --hy-active-text-color:var(--hy-text-color,#d8e2f2); --hy-hover-bg-color:var(--hy-input-bg-color,#121822);\n --hy-focus-border-color:var(--hy-focus-ring-color,#8177f2); --hy-dialog-radius:var(--hy-radius,8px); }\nbutton, input, select { font:inherit; min-height:2em; border-radius:var(--hy-radius,4px); }\n/* The semantic host owns the touch target. Its actual interactive element\n   must fill it too; otherwise a 44px portable Button still paints at 28px. */\n:host(hy-button), :host(hy-input), :host(hy-select) { display:inline-flex; }\n:host(hy-button) button, :host(hy-input) input, :host(hy-select) select {\n box-sizing:border-box; width:100%; min-height:inherit; height:100%; padding-inline:12px;\n}\n:host(hy-select) .wrap, :host(hy-input) .control { width:100%; min-height:inherit; height:100%; box-sizing:border-box; }\n:host(hy-input) input { min-height:0; }\nselect { height:auto; padding-block:4px; }\ninput { height:var(--hy-input-height,auto); padding-block:4px; }\n.box, .box::after, .handle { transition:var(--hy-portable-transition,background .12s ease); }\n:host(hy-checkbox) { width:auto; }\n:host(hy-checkbox) label, :host(hy-checkbox) .label { white-space:normal; }\n:host(hy-checkbox) input { min-height:0; }\n:host(hy-tabs) { height:auto; grid-template-rows:auto minmax(0,1fr); }\n:host(hy-tabs) .tabs { align-items:stretch; }\n:host(hy-tabs) button { height:auto; white-space:normal; }\n:host(hy-range) .handle { min-height:0; }\n:host(hy-dialog) .header { padding:16px 20px; }\n:host(hy-dialog) h2 { font-size:calc(var(--hy-font-size,14px) + 6px); }\n:host(hy-dialog) .body { display:flex; flex-direction:column; gap:var(--hy-gap,8px); padding:20px; }\n:host(hy-dialog) .body > slot { display:contents; }\n:host(hy-dialog) .footer { box-sizing:border-box; min-height:0; padding:12px 20px; }\n\nbutton:focus-visible, select:focus-visible, input:focus-visible { outline:2px solid var(--hy-focus-ring-color,#8177f2); outline-offset:1px; }\n[aria-invalid=true] { border-color:var(--hy-invalid-border-color,#d65c7c); }\n";
+export declare const rootCSS = "\n[data-hy-portable-root] { box-sizing:border-box; min-width:0; min-height:0; width:100%; height:100%;\n color:var(--hy-text-color,#d8e2f2); background:var(--hy-surface-color,#171d28);\n font:var(--hy-font-size,14px)/var(--hy-line-height,22px) system-ui,sans-serif; }\n[data-hy-portable-root] [data-hy-key] { box-sizing:border-box; min-width:0; min-height:0; }\n[data-hy-portable-root] [data-hy-key][hidden] { display:none !important; }\n[data-hy-portable-root] [data-hy-kind=Row] { display:flex; flex-direction:row; }\n[data-hy-portable-root] [data-hy-kind=RadioGroup] { display:flex; flex-wrap:wrap; gap:var(--hy-gap,8px); }\n[data-hy-portable-root] [data-hy-kind=RadioGroup] hy-radio { font:inherit; min-height:44px; }\n[data-hy-portable-root] [data-hy-kind=Column] { display:flex; flex-direction:column; }\n[data-hy-portable-root] [data-hy-kind=Grid], [data-hy-portable-root] [data-hy-kind=Overlay] { display:grid; }\n[data-hy-portable-root] [data-hy-kind=Text] { display:block; overflow-wrap:anywhere; white-space:pre-wrap; }\n[data-hy-portable-root] [data-hy-kind=Icon] { width:1.25em; height:1.25em; object-fit:contain; }\n[data-hy-portable-root] [data-hy-kind=FormGroup] { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--hy-gap,8px); }\n[data-hy-portable-root] [data-hy-kind=FormGroup] > legend { padding:0; }\n[data-hy-portable-root] [data-hy-help] { color:var(--hy-secondary-text-color); font-size:var(--hy-caption-font-size,12px); line-height:var(--hy-caption-line-height,18px); }\n[data-hy-portable-root] [data-hy-error] { color:var(--hy-invalid-border-color,#d65c7c); font-size:.9em; }\n[data-hy-portable-root] textarea { box-sizing:border-box; width:100%; min-height:5em; resize:vertical; padding:8px;\n color:var(--hy-text-color,#d8e2f2); background:var(--hy-input-bg-color,#121822); border:1px solid var(--hy-border-color,#303746);\n border-radius:var(--hy-radius,4px); font:inherit; }\n[data-hy-portable-root] textarea:focus-visible { outline:2px solid var(--hy-focus-ring-color,#8177f2); outline-offset:1px; }\n[data-hy-portable-root] [data-hy-text-style=title] { font-size:var(--hy-title-font-size,22px); line-height:var(--hy-title-line-height,30px); font-weight:var(--hy-title-font-weight,700); }\n[data-hy-portable-root] [data-hy-text-style=caption] { font-size:var(--hy-caption-font-size,12px); line-height:var(--hy-caption-line-height,18px); font-weight:var(--hy-caption-font-weight,400); }\n[data-hy-portable-root] [data-hy-text-style=body] { font-size:var(--hy-body-font-size,var(--hy-font-size,14px)); line-height:var(--hy-body-line-height,var(--hy-line-height,22px)); font-weight:var(--hy-body-font-weight,400); }\n[data-hy-portable-root] [data-hy-tone=muted] { color:var(--hy-secondary-text-color); }\n[data-hy-portable-root] [data-hy-tone=danger] { color:var(--hy-invalid-border-color); }\n[data-hy-portable-root] [data-hy-kind=Button] [slot=icon] svg { display:block; width:20px; height:20px; }\n[data-hy-portable-root] [data-hy-slot-group] { display:contents; }\n[data-hy-portable-root][data-hy-reduced-motion] { --hy-portable-transition:none; }\n@media(prefers-reduced-motion:reduce) { [data-hy-portable-root] { --hy-portable-transition:none; } }\n";
+export declare const componentCSS = "\n:host { --hy-input-font:var(--hy-font-size,14px)/var(--hy-line-height,22px) system-ui,sans-serif; --hy-input-radius:var(--hy-radius,8px); font:inherit;\n --hy-panel-bg-color:var(--hy-surface-color,#171d28);\n --hy-menu-bg-color:var(--hy-surface-color,#171d28); --hy-dialog-bg-color:var(--hy-surface-color,#171d28);\n --hy-dialog-body-color:var(--hy-text-color,#d8e2f2); --hy-dialog-footer-bg-color:var(--hy-surface-color,#171d28);\n --hy-accent-strong-color:var(--hy-accent-color,#8177f2);\n --hy-active-text-color:var(--hy-text-color,#d8e2f2); --hy-hover-bg-color:var(--hy-input-bg-color,#121822);\n --hy-focus-border-color:var(--hy-focus-ring-color,#8177f2); --hy-dialog-radius:var(--hy-radius,8px); }\nbutton, input, select { font:inherit; min-height:2em; border-radius:var(--hy-radius,4px); }\n/* The semantic host owns the touch target. Its actual interactive element\n   must fill it too; otherwise a 44px portable Button still paints at 28px. */\n:host(hy-button), :host(hy-input), :host(hy-select) { display:inline-flex; }\n:host(hy-button) button, :host(hy-input) input, :host(hy-select) select {\n box-sizing:border-box; width:100%; min-height:inherit; height:100%; padding-inline:12px;\n}\n:host(hy-select) .wrap, :host(hy-input) .control { width:100%; min-height:inherit; height:100%; box-sizing:border-box; }\n:host(hy-input) input { min-height:0; }\nselect { height:auto; padding-block:4px; }\n:host(hy-input) input { height:auto; align-self:stretch; padding-block:0; border-radius:0; outline:none; }\n.box, .box::after, .handle { transition:var(--hy-portable-transition,background .12s ease); }\n:host(hy-checkbox) { width:auto; }\n:host(hy-checkbox) label, :host(hy-checkbox) .label { white-space:normal; }\n:host(hy-checkbox) input { min-height:0; }\n:host(hy-tabs) { height:auto; grid-template-rows:auto minmax(0,1fr); }\n:host(hy-tabs) .tabs { align-items:stretch; }\n:host(hy-tabs) button { height:auto; white-space:normal; }\n:host(hy-range) .handle { min-height:0; }\n:host(hy-dialog) .header { padding:16px 20px; }\n:host(hy-dialog) h2 { font-size:calc(var(--hy-font-size,14px) + 6px); }\n:host(hy-dialog) .body { display:flex; flex-direction:column; gap:var(--hy-gap,8px); padding:20px; }\n:host(hy-dialog) .body > slot { display:contents; }\n:host(hy-dialog) .footer { box-sizing:border-box; min-height:0; padding:12px 20px; }\n\n/* Portable variants leave individual Web Component APIs unchanged. */\n:host(hy-button) button { border:1px solid var(--hy-border-color); background:var(--hy-surface-color); color:var(--hy-text-color); border-radius:var(--hy-radius,8px); transition:background .12s ease; }\n:host(hy-button[data-hy-variant=primary]) button { background:var(--hy-accent-color); border-color:transparent; color:var(--hy-on-accent-color,#fff); }\n:host(hy-button[data-hy-variant=danger]) button { background:var(--hy-invalid-border-color); border-color:transparent; color:var(--hy-on-accent-color,#fff); }\n:host(hy-button[data-hy-variant=quiet]) button { background:transparent; border-color:transparent; }\n:host(hy-button) button:hover:not(:disabled), :host(hy-button) button:active:not(:disabled) { background:var(--hy-pressed-bg-color,var(--hy-selected-bg-color)); }\n:host(hy-button) button:disabled { opacity:.45; }\n:host(hy-button[data-hy-size=compact]) button { padding-inline:8px; }\n:host(hy-button[icon-only]) button { padding:0; width:100%; }\n:host(hy-tabs) button { min-height:44px; padding:8px 14px; border:0; border-radius:0; background:transparent; color:var(--hy-secondary-text-color); border-bottom:2px solid transparent; }\n:host(hy-tabs) button[aria-selected=true] { color:var(--hy-text-color); border-bottom-color:var(--hy-accent-color); }\n:host(hy-tabs[data-hy-variant=segmented]) .tabs { padding:4px; gap:4px; border-radius:var(--hy-radius,8px); background:var(--hy-input-bg-color); }\n:host(hy-tabs[data-hy-variant=segmented]) button { border:0; border-radius:var(--hy-radius,8px); }\n:host(hy-tabs[data-hy-variant=segmented]) button[aria-selected=true] { background:var(--hy-selected-bg-color,var(--hy-accent-color)); }\nbutton:focus-visible, select:focus-visible { outline:2px solid var(--hy-focus-ring-color,#8177f2); outline-offset:1px; }\n[aria-invalid=true] { border-color:var(--hy-invalid-border-color,#d65c7c); }\n";

package/dist/adapters/web/styles.js

@@ -14,21 +14,28 @@ export const rootCSS = `
 [data-hy-portable-root] [data-hy-kind=Icon] { width:1.25em; height:1.25em; object-fit:contain; }
 [data-hy-portable-root] [data-hy-kind=FormGroup] { border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--hy-gap,8px); }
 [data-hy-portable-root] [data-hy-kind=FormGroup] > legend { padding:0; }
+[data-hy-portable-root] [data-hy-help] { color:var(--hy-secondary-text-color); font-size:var(--hy-caption-font-size,12px); line-height:var(--hy-caption-line-height,18px); }
 [data-hy-portable-root] [data-hy-error] { color:var(--hy-invalid-border-color,#d65c7c); font-size:.9em; }
 [data-hy-portable-root] textarea { box-sizing:border-box; width:100%; min-height:5em; resize:vertical; padding:8px;
  color:var(--hy-text-color,#d8e2f2); background:var(--hy-input-bg-color,#121822); border:1px solid var(--hy-border-color,#303746);
  border-radius:var(--hy-radius,4px); font:inherit; }
 [data-hy-portable-root] textarea:focus-visible { outline:2px solid var(--hy-focus-ring-color,#8177f2); outline-offset:1px; }
+[data-hy-portable-root] [data-hy-text-style=title] { font-size:var(--hy-title-font-size,22px); line-height:var(--hy-title-line-height,30px); font-weight:var(--hy-title-font-weight,700); }
+[data-hy-portable-root] [data-hy-text-style=caption] { font-size:var(--hy-caption-font-size,12px); line-height:var(--hy-caption-line-height,18px); font-weight:var(--hy-caption-font-weight,400); }
+[data-hy-portable-root] [data-hy-text-style=body] { font-size:var(--hy-body-font-size,var(--hy-font-size,14px)); line-height:var(--hy-body-line-height,var(--hy-line-height,22px)); font-weight:var(--hy-body-font-weight,400); }
+[data-hy-portable-root] [data-hy-tone=muted] { color:var(--hy-secondary-text-color); }
+[data-hy-portable-root] [data-hy-tone=danger] { color:var(--hy-invalid-border-color); }
+[data-hy-portable-root] [data-hy-kind=Button] [slot=icon] svg { display:block; width:20px; height:20px; }
 [data-hy-portable-root] [data-hy-slot-group] { display:contents; }
 [data-hy-portable-root][data-hy-reduced-motion] { --hy-portable-transition:none; }
 @media(prefers-reduced-motion:reduce) { [data-hy-portable-root] { --hy-portable-transition:none; } }
 `;
 export const componentCSS = `
-:host { --hy-input-font:var(--hy-font-size,14px)/var(--hy-line-height,22px) system-ui,sans-serif; font:inherit;
- --hy-panel-bg-color:var(--hy-surface-color,#171d28); --hy-surface-elevated-color:var(--hy-surface-color,#171d28);
+:host { --hy-input-font:var(--hy-font-size,14px)/var(--hy-line-height,22px) system-ui,sans-serif; --hy-input-radius:var(--hy-radius,8px); font:inherit;
+ --hy-panel-bg-color:var(--hy-surface-color,#171d28);
  --hy-menu-bg-color:var(--hy-surface-color,#171d28); --hy-dialog-bg-color:var(--hy-surface-color,#171d28);
  --hy-dialog-body-color:var(--hy-text-color,#d8e2f2); --hy-dialog-footer-bg-color:var(--hy-surface-color,#171d28);
- --hy-accent-strong-color:var(--hy-accent-color,#8177f2); --hy-selected-bg-color:var(--hy-accent-color,#8177f2);
+ --hy-accent-strong-color:var(--hy-accent-color,#8177f2);
  --hy-active-text-color:var(--hy-text-color,#d8e2f2); --hy-hover-bg-color:var(--hy-input-bg-color,#121822);
  --hy-focus-border-color:var(--hy-focus-ring-color,#8177f2); --hy-dialog-radius:var(--hy-radius,8px); }
 button, input, select { font:inherit; min-height:2em; border-radius:var(--hy-radius,4px); }
@@ -41,7 +48,7 @@ button, input, select { font:inherit; min-height:2em; border-radius:var(--hy-rad
 :host(hy-select) .wrap, :host(hy-input) .control { width:100%; min-height:inherit; height:100%; box-sizing:border-box; }
 :host(hy-input) input { min-height:0; }
 select { height:auto; padding-block:4px; }
-input { height:var(--hy-input-height,auto); padding-block:4px; }
+:host(hy-input) input { height:auto; align-self:stretch; padding-block:0; border-radius:0; outline:none; }
 .box, .box::after, .handle { transition:var(--hy-portable-transition,background .12s ease); }
 :host(hy-checkbox) { width:auto; }
 :host(hy-checkbox) label, :host(hy-checkbox) .label { white-space:normal; }
@@ -56,7 +63,21 @@ input { height:var(--hy-input-height,auto); padding-block:4px; }
 :host(hy-dialog) .body > slot { display:contents; }
 :host(hy-dialog) .footer { box-sizing:border-box; min-height:0; padding:12px 20px; }
 
-button:focus-visible, select:focus-visible, input:focus-visible { outline:2px solid var(--hy-focus-ring-color,#8177f2); outline-offset:1px; }
+/* Portable variants leave individual Web Component APIs unchanged. */
+:host(hy-button) button { border:1px solid var(--hy-border-color); background:var(--hy-surface-color); color:var(--hy-text-color); border-radius:var(--hy-radius,8px); transition:background .12s ease; }
+:host(hy-button[data-hy-variant=primary]) button { background:var(--hy-accent-color); border-color:transparent; color:var(--hy-on-accent-color,#fff); }
+:host(hy-button[data-hy-variant=danger]) button { background:var(--hy-invalid-border-color); border-color:transparent; color:var(--hy-on-accent-color,#fff); }
+:host(hy-button[data-hy-variant=quiet]) button { background:transparent; border-color:transparent; }
+:host(hy-button) button:hover:not(:disabled), :host(hy-button) button:active:not(:disabled) { background:var(--hy-pressed-bg-color,var(--hy-selected-bg-color)); }
+:host(hy-button) button:disabled { opacity:.45; }
+:host(hy-button[data-hy-size=compact]) button { padding-inline:8px; }
+:host(hy-button[icon-only]) button { padding:0; width:100%; }
+:host(hy-tabs) button { min-height:44px; padding:8px 14px; border:0; border-radius:0; background:transparent; color:var(--hy-secondary-text-color); border-bottom:2px solid transparent; }
+:host(hy-tabs) button[aria-selected=true] { color:var(--hy-text-color); border-bottom-color:var(--hy-accent-color); }
+:host(hy-tabs[data-hy-variant=segmented]) .tabs { padding:4px; gap:4px; border-radius:var(--hy-radius,8px); background:var(--hy-input-bg-color); }
+:host(hy-tabs[data-hy-variant=segmented]) button { border:0; border-radius:var(--hy-radius,8px); }
+:host(hy-tabs[data-hy-variant=segmented]) button[aria-selected=true] { background:var(--hy-selected-bg-color,var(--hy-accent-color)); }
+button:focus-visible, select:focus-visible { outline:2px solid var(--hy-focus-ring-color,#8177f2); outline-offset:1px; }
 [aria-invalid=true] { border-color:var(--hy-invalid-border-color,#d65c7c); }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/carousel.d.ts

@@ -0,0 +1,92 @@
+export type HYCarouselDirection = 'horizontal' | 'vertical';
+export type HYCarouselIndicatorPosition = 'top' | 'right' | 'bottom' | 'left';
+export type HYCarouselIndicatorStyle = 'dot' | 'line' | 'number';
+export type HYCarouselChangeSource = 'api' | 'indicator' | 'arrow' | 'keyboard' | 'drag' | 'autoplay' | 'content';
+export interface HYCarouselChangeDetail {
+    index: number;
+    previousIndex: number;
+    source: HYCarouselChangeSource;
+}
+export type HYCarouselIndicatorRenderer = (index: number, active: boolean) => Node | string | null;
+/** A slotted, accessible carousel. Panels stay mounted and inactive panels are inert. */
+export declare class HYCarousel extends HTMLElement {
+    private readonly _viewport;
+    private readonly _slot;
+    private readonly _indicators;
+    private readonly _previous;
+    private readonly _next;
+    private readonly _playback;
+    private readonly _motion;
+    private readonly _saved;
+    private readonly _animations;
+    private readonly _hostAttributes;
+    private _slides;
+    private _index;
+    private _reflecting;
+    private _connected;
+    private _timer;
+    private _paused;
+    private _hovered;
+    private _motionOverride;
+    private _drag;
+    private _blockClickUntil;
+    private _playbackPointerAction;
+    private _indicatorRenderer;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, value: string | null): void;
+    get index(): number;
+    set index(value: number);
+    get direction(): HYCarouselDirection;
+    set direction(value: HYCarouselDirection);
+    get indicatorPosition(): HYCarouselIndicatorPosition;
+    set indicatorPosition(value: HYCarouselIndicatorPosition);
+    get indicatorStyle(): HYCarouselIndicatorStyle;
+    set indicatorStyle(value: HYCarouselIndicatorStyle);
+    get indicatorRenderer(): HYCarouselIndicatorRenderer | null;
+    set indicatorRenderer(value: HYCarouselIndicatorRenderer | null);
+    get showIndicators(): boolean;
+    set showIndicators(value: boolean);
+    get showArrows(): boolean;
+    set showArrows(value: boolean);
+    get autoplay(): boolean;
+    set autoplay(value: boolean);
+    get interval(): number;
+    set interval(value: number);
+    get draggable(): boolean;
+    set draggable(value: boolean);
+    get loop(): boolean;
+    set loop(value: boolean);
+    next(): void;
+    previous(): void;
+    goTo(index: number): void;
+    play(): void;
+    pause(): void;
+    private _syncSlides;
+    private _releaseSlide;
+    private _resolve;
+    private _select;
+    private _transform;
+    private _position;
+    private _paint;
+    private _render;
+    private _animate;
+    private _cancelAnimations;
+    private _clearTimer;
+    private _schedule;
+    private _onEnter;
+    private _onLeave;
+    private _onMotionChange;
+    private _onFocus;
+    private _onKeyDown;
+    private _onNativeDrag;
+    private _onClick;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+    private _onPointerCancel;
+    private _cancelDrag;
+}
+export declare function defineCarouselComponents(): void;