@haiyue/ui 0.2.1 → 0.2.2

package/dist/collapse.js

@@ -18,8 +18,16 @@ export class HYCollapse extends HTMLElement {
     _itemsAssigned = false;
     _activeKeys = [];
     _panels = new Map();
+    _motion = window.matchMedia('(prefers-reduced-motion: reduce)');
+    _resizeObserver = new ResizeObserver(() => {
+        for (const panel of this._panels.values()) {
+            if (panel.animation && panel.expanded && panel.targetHeight !== panel.body.offsetHeight) {
+                this._transition(panel, Number.parseFloat(getComputedStyle(panel.region).height), this._duration());
+            }
+        }
+    });
     static get observedAttributes() {
-        return ['items', 'active-keys', 'default-active-keys', 'accordion', 'bordered', 'ghost', 'icon-position', 'collapsible', 'destroy-on-hidden', 'aria-label'];
+        return ['items', 'active-keys', 'default-active-keys', 'accordion', 'bordered', 'ghost', 'icon-position', 'collapsible', 'destroy-on-hidden', 'animated', 'animation-duration', 'aria-label'];
     }
     constructor() {
         super();
@@ -34,7 +42,7 @@ export class HYCollapse extends HTMLElement {
       .trigger:hover:not(:disabled) { background: var(--hy-hover-bg-color, #273241); }
       .trigger:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--hy-focus-border-color, #79a8ff); outline-offset: -2px; }
       .trigger:disabled { color: var(--hy-muted-color, #788697); cursor: not-allowed; }
-      .arrow { display: grid; width: 16px; height: 16px; flex: 0 0 auto; place-items: center; color: var(--hy-muted-color, #788697); transition: transform 160ms ease; }
+      .arrow { display: grid; width: 16px; height: 16px; flex: 0 0 auto; place-items: center; color: var(--hy-muted-color, #788697); transition: transform var(--hy-collapse-animation-duration, 200ms) var(--hy-collapse-animation-easing, ease); }
       .arrow::before { content: ''; width: 6px; height: 6px; border-block-start: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor; transform: rotate(45deg); }
       .panel.expanded .arrow { transform: rotate(90deg); }
       .title { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -54,6 +62,7 @@ export class HYCollapse extends HTMLElement {
         root.append(style, this._container);
     }
     connectedCallback() {
+        this._motion.addEventListener('change', this._onMotionChange);
         if (!this._itemsAssigned && this.hasAttribute('items'))
             this._readItemsAttribute();
         this._activeKeys = this.hasAttribute('active-keys') ? parseKeys(this.getAttribute('active-keys')) : parseKeys(this.getAttribute('default-active-keys'));
@@ -61,6 +70,12 @@ export class HYCollapse extends HTMLElement {
         this._syncItems();
         this._syncLabel();
     }
+    disconnectedCallback() {
+        this._motion.removeEventListener('change', this._onMotionChange);
+        this._resizeObserver.disconnect();
+        for (const panel of this._panels.values())
+            this._finishTransition(panel);
+    }
     attributeChangedCallback(name, oldValue, newValue) {
         if (oldValue === newValue)
             return;
@@ -120,6 +135,18 @@ export class HYCollapse extends HTMLElement {
     set collapsible(value) { this.setAttribute('collapsible', value === 'icon' || value === 'disabled' ? value : 'header'); }
     get destroyOnHidden() { return this.hasAttribute('destroy-on-hidden'); }
     set destroyOnHidden(value) { this.toggleAttribute('destroy-on-hidden', Boolean(value)); }
+    /** Opt-in height and arrow transitions. Initial rendering is always immediate. */
+    get animated() { return this.hasAttribute('animated') && this.getAttribute('animated') !== 'false'; }
+    set animated(value) { if (value)
+        this.setAttribute('animated', '');
+    else
+        this.removeAttribute('animated'); }
+    /** Milliseconds; zero disables animation. Defaults to 200 (or the inherited duration token). */
+    get animationDuration() {
+        const value = Number(this.getAttribute('animation-duration') ?? 200);
+        return Number.isFinite(value) ? Math.max(0, Math.min(10_000, value)) : 200;
+    }
+    set animationDuration(value) { this.setAttribute('animation-duration', String(Number.isFinite(value) ? Math.max(0, Math.min(10_000, value)) : 200)); }
     toggle(key, expanded) {
         const normalized = String(key);
         const panel = this._panels.get(normalized);
@@ -153,6 +180,9 @@ export class HYCollapse extends HTMLElement {
     _syncItems() {
         if (!this.isConnected)
             return;
+        this._resizeObserver.disconnect();
+        for (const panel of this._panels.values())
+            this._finishTransition(panel);
         this._panels.clear();
         const sections = [];
         this._items.forEach((item, index) => {
@@ -197,9 +227,10 @@ export class HYCollapse extends HTMLElement {
             body.part.add('body');
             region.append(body);
             section.append(header, region);
-            const record = { item, section, button, arrow, region, body, rendered: false };
+            const record = { item, section, button, arrow, region, body, rendered: false, expanded: null, animation: null, targetHeight: 0 };
             this._panels.set(item.key, record);
             sections.push(section);
+            this._resizeObserver.observe(body, { box: 'border-box' });
             button.addEventListener('click', event => { if (this.collapsible === 'icon' && event.detail !== 0 && !event.composedPath()[0]?.closest?.('.arrow'))
                 return; this.toggle(item.key); });
         });
@@ -209,6 +240,7 @@ export class HYCollapse extends HTMLElement {
     _syncExpanded() {
         if (!this.isConnected)
             return;
+        const duration = this._duration();
         for (const [key, panel] of this._panels) {
             const expanded = this._activeKeys.includes(key);
             const disabled = Boolean(panel.item.disabled) || this.collapsible === 'disabled';
@@ -216,15 +248,70 @@ export class HYCollapse extends HTMLElement {
             panel.section.toggleAttribute('data-disabled', disabled);
             panel.button.disabled = disabled;
             panel.button.setAttribute('aria-expanded', String(expanded));
-            panel.region.hidden = !expanded;
+            panel.arrow.style.transitionDuration = `${duration}ms`;
+            if (!expanded && panel.region.matches(':focus-within'))
+                panel.button.focus({ preventScroll: true });
+            panel.region.inert = !expanded;
+            panel.region.setAttribute('aria-hidden', String(!expanded));
             if (expanded && !panel.rendered)
                 this._renderContent(panel);
-            else if (!expanded && this.destroyOnHidden && panel.rendered) {
-                panel.body.replaceChildren();
-                panel.rendered = false;
+            if (panel.expanded !== expanded) {
+                const from = panel.animation ? Number.parseFloat(getComputedStyle(panel.region).height) : expanded ? 0 : panel.region.offsetHeight;
+                const animate = panel.expanded !== null && duration > 0;
+                panel.expanded = expanded;
+                if (animate)
+                    this._transition(panel, from, duration);
+                else
+                    this._finishTransition(panel);
             }
+            else if (!panel.animation || duration === 0)
+                this._finishTransition(panel);
+        }
+    }
+    _duration() {
+        if (!this.animated || this._motion.matches)
+            return 0;
+        if (this.hasAttribute('animation-duration'))
+            return this.animationDuration;
+        const token = getComputedStyle(this).getPropertyValue('--hy-collapse-animation-duration').trim();
+        if (!token)
+            return 200;
+        const value = Number.parseFloat(token) * (token.endsWith('ms') ? 1 : 1000);
+        return Number.isFinite(value) ? Math.max(0, Math.min(10_000, value)) : 200;
+    }
+    _transition(panel, from, duration) {
+        if (!Number.isFinite(from))
+            from = 0;
+        panel.animation?.cancel();
+        panel.animation = null;
+        panel.region.hidden = false;
+        const to = panel.expanded ? panel.body.offsetHeight : 0;
+        panel.targetHeight = to;
+        if (!duration || from === to) {
+            this._finishTransition(panel);
+            return;
+        }
+        panel.region.style.overflow = 'hidden';
+        const token = getComputedStyle(this).getPropertyValue('--hy-collapse-animation-easing').trim() || 'ease';
+        const easing = CSS.supports('transition-timing-function', token) ? token : 'ease';
+        const animation = panel.region.animate([{ height: `${from}px` }, { height: `${to}px` }], { duration, easing, fill: 'both' });
+        panel.animation = animation;
+        void animation.finished.then(() => {
+            if (panel.animation === animation)
+                this._finishTransition(panel);
+        }, () => { });
+    }
+    _finishTransition(panel) {
+        panel.animation?.cancel();
+        panel.animation = null;
+        panel.region.style.removeProperty('overflow');
+        panel.region.hidden = !panel.expanded;
+        if (!panel.expanded && this.destroyOnHidden && panel.rendered) {
+            panel.body.replaceChildren();
+            panel.rendered = false;
         }
     }
+    _onMotionChange = () => { this._syncExpanded(); };
     _renderContent(panel) {
         const source = typeof panel.item.content === 'function' ? panel.item.content() : panel.item.content;
         if (source instanceof Node)

package/dist/core/types.d.ts

@@ -68,6 +68,14 @@ export interface HYAccessibility {
     readonly error?: string;
     readonly role?: 'button' | 'text' | 'textbox' | 'checkbox' | 'tab' | 'dialog' | 'image' | 'slider' | 'list' | 'tree';
 }
+export type HYIconName = 'save' | 'export' | 'play' | 'pause' | 'reset' | 'step' | 'settings' | 'back' | 'chevronDown' | 'check' | 'close' | 'add';
+export type HYButtonVariant = 'primary' | 'secondary' | 'quiet' | 'danger';
+export type HYTextStyle = 'title' | 'body' | 'caption';
+export interface HYTypography {
+    readonly fontSize: number;
+    readonly lineHeight: number;
+    readonly weight?: 'normal' | 'medium' | 'bold';
+}
 export interface HYCommonProps {
     readonly layout?: HYLayout;
     readonly a11y?: HYAccessibility;
@@ -95,6 +103,8 @@ export interface HYComponentProps {
     Text: HYCommonProps & {
         readonly text: string;
         readonly wrap?: boolean;
+        readonly textStyle?: HYTextStyle;
+        readonly tone?: 'default' | 'muted' | 'danger';
     };
     Image: HYCommonProps & {
         readonly resource: HYResource;
@@ -108,6 +118,9 @@ export interface HYComponentProps {
         readonly text: string;
         readonly disabled?: boolean;
         readonly busy?: boolean;
+        readonly icon?: HYIconName;
+        readonly variant?: HYButtonVariant;
+        readonly size?: 'regular' | 'compact';
     };
     Checkbox: HYCommonProps & {
         readonly checked: boolean;
@@ -131,8 +144,12 @@ export interface HYComponentProps {
         readonly checked: boolean;
         readonly disabled?: boolean;
     };
-    Select: HYCommonProps & HYSelectionProps;
-    Tabs: HYCommonProps & HYSelectionProps;
+    Select: HYCommonProps & HYSelectionProps & {
+        readonly presentation?: 'auto' | 'popover' | 'sheet';
+    };
+    Tabs: HYCommonProps & HYSelectionProps & {
+        readonly variant?: 'underline' | 'segmented';
+    };
     TextInput: HYCommonProps & HYTextProps;
     TextArea: HYCommonProps & Omit<HYTextProps, 'secure'>;
     Slider: HYCommonProps & {
@@ -149,6 +166,7 @@ export interface HYComponentProps {
     };
     FormGroup: HYCommonProps & {
         readonly label: string;
+        readonly description?: string;
         readonly error?: string;
     };
     PlatformView: HYCommonProps & {
@@ -222,11 +240,12 @@ export interface HYPlatformView {
     dispose(): void;
 }
 export interface HYTheme {
-    readonly color: Readonly<Record<'text' | 'muted' | 'surface' | 'input' | 'accent' | 'danger' | 'border' | 'focus', string>>;
+    readonly color: Readonly<Record<'text' | 'muted' | 'surface' | 'input' | 'accent' | 'danger' | 'border' | 'focus', string> & Partial<Record<'selected' | 'pressed' | 'disabled' | 'elevated' | 'onAccent', string>>>;
     readonly fontSize: number;
     readonly lineHeight: number;
     readonly gap: number;
     readonly radius: number;
+    readonly typography?: Readonly<Partial<Record<HYTextStyle, HYTypography>>>;
 }
 export interface HYSourceLocation {
     readonly file: string;

package/dist/core/validation.js

@@ -80,20 +80,20 @@ const text = { value: string, disabled: boolean, readOnly: boolean, placeholder:
 const schemas = {
     Row: shape(common), Column: shape(common), Grid: shape(common), Overlay: shape(common),
     Scroll: shape({ ...common, axis: choice('horizontal', 'vertical') }, ['axis']),
-    Text: shape({ ...common, text: string, wrap: boolean }, ['text']),
+    Text: shape({ ...common, text: string, wrap: boolean, textStyle: choice('title', 'body', 'caption'), tone: choice('default', 'muted', 'danger') }, ['text']),
     Image: shape({ ...common, resource, fit: choice('contain', 'cover') }, ['resource']),
     Icon: shape({ ...common, resource, systemName: name }, ['resource']),
-    Button: shape({ ...common, text: string, disabled: boolean, busy: boolean }, ['text']),
+    Button: shape({ ...common, text: string, disabled: boolean, busy: boolean, icon: choice('save', 'export', 'play', 'pause', 'reset', 'step', 'settings', 'back', 'chevronDown', 'check', 'close', 'add'), variant: choice('primary', 'secondary', 'quiet', 'danger'), size: choice('regular', 'compact') }, ['text']),
     Checkbox: shape({ ...common, checked: boolean, disabled: boolean, text: string }, ['checked', 'text']),
     RadioGroup: shape({ ...common, ...selection }, ['value', 'options']),
     Rate: shape({ ...common, value: integer, count: check(v => Number.isInteger(v) && v >= 1 && v <= 10, 'Expected count 1–10'), disabled: boolean, readOnly: boolean }, ['value', 'count']),
     Badge: shape({ ...common, text: string }, ['text']), Divider: shape({ ...common, text: string }),
     Toggle: shape({ ...common, checked: boolean, disabled: boolean }, ['checked']),
-    Select: shape({ ...common, ...selection }, ['value', 'options']), Tabs: shape({ ...common, ...selection }, ['value', 'options']),
+    Select: shape({ ...common, ...selection, presentation: choice('auto', 'popover', 'sheet') }, ['value', 'options']), Tabs: shape({ ...common, ...selection, variant: choice('underline', 'segmented') }, ['value', 'options']),
     TextInput: shape({ ...common, ...text, secure: boolean }, ['value']), TextArea: shape({ ...common, ...text }, ['value']),
     Slider: shape({ ...common, value: number, min: number, max: number, step: positive, disabled: boolean }, ['value', 'min', 'max', 'step']),
     Dialog: shape({ ...common, open: boolean, title: string, dismissible: boolean }, ['open', 'title']),
-    FormGroup: shape({ ...common, label: string, error: string }, ['label']),
+    FormGroup: shape({ ...common, label: string, description: string, error: string }, ['label']),
     PlatformView: shape({ ...common, slot: name, resourceId: name }, ['slot', 'resourceId']),
 };
 export const HY_COMPONENTS = Object.freeze(Object.keys(schemas));
@@ -140,6 +140,11 @@ export function hyValidateProps(kind, props, context = {}, capabilities) {
             if (!p.options.some(o => o.value === p.value))
                 fail('Unknown controlled value', field(context, 'value'));
         }
+        if (kind === 'Button') {
+            const p = props;
+            if (p.icon && !p.text.trim() && !p.a11y?.label.trim())
+                fail('Icon-only button needs an accessible label', field(context, 'a11y.label'));
+        }
         if (kind === 'Rate' && props.value > props.count)
             fail('Rating exceeds count', context);
         if (kind === 'Slider') {

package/dist/index.d.ts

@@ -1,5 +1,13 @@
 export { defineExpandableComponents, HYExpandable } from './expandable.js';
 export type { HYExpandableButtonPosition, HYExpandableChangeDetail } from './expandable.js';
+export { defineModalComponents, HYModal } from './modal.js';
+export type { HYModalCloseReason, HYModalActionDetail, HYModalCloseDetail } from './modal.js';
+export { defineQRCodeComponents, HYQRCode } from './qr-code.js';
+export type { HYQRCodeErrorCorrectionLevel, HYQRCodeStatus, HYQRCodeRenderDetail, HYQRCodeErrorDetail, HYQRCodeIconErrorDetail } from './qr-code.js';
+export { defineCarouselComponents, HYCarousel } from './carousel.js';
+export type { HYCarouselDirection, HYCarouselIndicatorPosition, HYCarouselIndicatorStyle, HYCarouselChangeSource, HYCarouselChangeDetail, HYCarouselIndicatorRenderer } from './carousel.js';
+export { defineMasonryComponents, HYMasonry } from './masonry.js';
+export type { HYMasonryLayoutChangeDetail } from './masonry.js';
 export { defineButtonComponents, HYButton, } from './button.js';
 export type { HYButtonIconPosition } from './button.js';
 export { defineButtonGroupComponents, HYButtonGroup, } from './button-group.js';

package/dist/index.js

@@ -4,6 +4,14 @@ import { defineButtonComponents } from './button.js';
 import { defineButtonGroupComponents } from './button-group.js';
 import { defineBorderBeamComponents } from './border-beam.js';
 import { defineTreeComponents } from './tree.js';
+import { defineModalComponents } from './modal.js';
+export { defineModalComponents, HYModal } from './modal.js';
+import { defineQRCodeComponents } from './qr-code.js';
+export { defineQRCodeComponents, HYQRCode } from './qr-code.js';
+import { defineCarouselComponents } from './carousel.js';
+export { defineCarouselComponents, HYCarousel } from './carousel.js';
+import { defineMasonryComponents } from './masonry.js';
+export { defineMasonryComponents, HYMasonry } from './masonry.js';
 import { defineSplitComponents } from './split.js';
 import { defineSelectComponents } from './select.js';
 import { defineTabsComponents } from './tabs.js';
@@ -87,6 +95,10 @@ export function defineHaiyueUI() {
     defineButtonGroupComponents();
     defineTreeComponents();
     defineSplitComponents();
+    defineMasonryComponents();
+    defineCarouselComponents();
+    defineQRCodeComponents();
+    defineModalComponents();
     defineSelectComponents();
     defineTabsComponents();
     defineContextMenuComponents();

package/dist/internal/qrcodegen.d.ts

@@ -0,0 +1,94 @@
+declare namespace qrcodegen {
+    type bit = number;
+    type byte = number;
+    type int = number;
+    export class QrCode {
+        readonly version: int;
+        readonly errorCorrectionLevel: QrCode.Ecc;
+        static encodeText(text: string, ecl: QrCode.Ecc): QrCode;
+        static encodeBinary(data: Readonly<Array<byte>>, ecl: QrCode.Ecc): QrCode;
+        static encodeSegments(segs: Readonly<Array<QrSegment>>, ecl: QrCode.Ecc, minVersion?: int, maxVersion?: int, mask?: int, boostEcl?: boolean): QrCode;
+        readonly size: int;
+        readonly mask: int;
+        private readonly modules;
+        private readonly isFunction;
+        constructor(version: int, errorCorrectionLevel: QrCode.Ecc, dataCodewords: Readonly<Array<byte>>, msk: int);
+        getModule(x: int, y: int): boolean;
+        private drawFunctionPatterns;
+        private drawFormatBits;
+        private drawVersion;
+        private drawFinderPattern;
+        private drawAlignmentPattern;
+        private setFunctionModule;
+        private addEccAndInterleave;
+        private drawCodewords;
+        private applyMask;
+        private getPenaltyScore;
+        private getAlignmentPatternPositions;
+        private static getNumRawDataModules;
+        private static getNumDataCodewords;
+        private static reedSolomonComputeDivisor;
+        private static reedSolomonComputeRemainder;
+        private static reedSolomonMultiply;
+        private finderPenaltyCountPatterns;
+        private finderPenaltyTerminateAndCount;
+        private finderPenaltyAddHistory;
+        static readonly MIN_VERSION: int;
+        static readonly MAX_VERSION: int;
+        private static readonly PENALTY_N1;
+        private static readonly PENALTY_N2;
+        private static readonly PENALTY_N3;
+        private static readonly PENALTY_N4;
+        private static readonly ECC_CODEWORDS_PER_BLOCK;
+        private static readonly NUM_ERROR_CORRECTION_BLOCKS;
+    }
+    export class QrSegment {
+        readonly mode: QrSegment.Mode;
+        readonly numChars: int;
+        private readonly bitData;
+        static makeBytes(data: Readonly<Array<byte>>): QrSegment;
+        static makeNumeric(digits: string): QrSegment;
+        static makeAlphanumeric(text: string): QrSegment;
+        static makeSegments(text: string): Array<QrSegment>;
+        static makeEci(assignVal: int): QrSegment;
+        static isNumeric(text: string): boolean;
+        static isAlphanumeric(text: string): boolean;
+        constructor(mode: QrSegment.Mode, numChars: int, bitData: Array<bit>);
+        getData(): Array<bit>;
+        static getTotalBits(segs: Readonly<Array<QrSegment>>, version: int): number;
+        private static toUtf8ByteArray;
+        private static readonly NUMERIC_REGEX;
+        private static readonly ALPHANUMERIC_REGEX;
+        private static readonly ALPHANUMERIC_CHARSET;
+    }
+    export {};
+}
+declare namespace qrcodegen.QrCode {
+    type int = number;
+    export class Ecc {
+        readonly ordinal: int;
+        readonly formatBits: int;
+        static readonly LOW: Ecc;
+        static readonly MEDIUM: Ecc;
+        static readonly QUARTILE: Ecc;
+        static readonly HIGH: Ecc;
+        private constructor();
+    }
+    export {};
+}
+declare namespace qrcodegen.QrSegment {
+    type int = number;
+    export class Mode {
+        readonly modeBits: int;
+        private readonly numBitsCharCount;
+        static readonly NUMERIC: Mode;
+        static readonly ALPHANUMERIC: Mode;
+        static readonly BYTE: Mode;
+        static readonly KANJI: Mode;
+        static readonly ECI: Mode;
+        private constructor();
+        numCharCountBits(ver: int): int;
+    }
+    export {};
+}
+export { qrcodegen };