hisonvue 1.1.1 → 1.1.3

package/dist/hisonvue.d.ts

@@ -8429,6 +8429,11 @@ inputTextdHandler: {
 type: PropType<(value: any) => string>;
 default: undefined;
 };
+toggleStyle: {
+type: PropType<"default" | "switch">;
+default: string;
+validator: (v: any) => boolean;
+};
 }>, {
 inputRef: Ref<HTMLTextAreaElement | HTMLSelectElement | HTMLInputElement | null, HTMLTextAreaElement | HTMLSelectElement | HTMLInputElement | null>;
 inputTextRef: Ref<HTMLInputElement | null, HTMLInputElement | null>;
@@ -8477,6 +8482,8 @@ isBorder: () => boolean;
 setBorder: (border: boolean) => void;
 isModified: () => boolean;
 setModified: (modified: boolean) => void;
+getToggleStyle: () => "default" | "switch";
+setToggleStyle: (style: "default" | "switch") => void;
 getTabIndex: () => number | null;
 setTabIndex: (v: number | null) => void;
 focus: () => void;
@@ -8613,6 +8620,11 @@ inputTextdHandler: {
 type: PropType<(value: any) => string>;
 default: undefined;
 };
+toggleStyle: {
+type: PropType<"default" | "switch">;
+default: string;
+validator: (v: any) => boolean;
+};
 }>> & Readonly<{
 onClick?: ((...args: any[]) => any) | undefined;
 onInput?: ((...args: any[]) => any) | undefined;
@@ -8678,6 +8690,7 @@ placeholder: Ref<string, string>;
 maxNumber: Ref<number | null, number | null>;
 minNumber: Ref<number | null, number | null>;
 spanText: Ref<string, string>;
+toggleStyle: Ref<"default" | "switch", "default" | "switch">;
 tabIndex: Ref<number | null, number | null>;
 onInput: (e: Event) => void;
 onTextInputFocus: (e: Event) => void;
@@ -8814,6 +8827,11 @@ inputTextdHandler: {
 type: PropType<(value: any) => string>;
 default: undefined;
 };
+toggleStyle: {
+type: PropType<"default" | "switch">;
+default: string;
+validator: (v: any) => boolean;
+};
 }>> & Readonly<{
 onClick?: ((...args: any[]) => any) | undefined;
 onInput?: ((...args: any[]) => any) | undefined;
@@ -8869,6 +8887,7 @@ options: {
 text: string;
 value: any;
 }[];
+toggleStyle: "default" | "switch";
 editMode: "editable" | "disable" | "readonly" | EditMode;
 nullText: string;
 checkedText: string;
@@ -9351,6 +9370,16 @@ export declare interface HInputMethods extends ComponentMethods {
      * @param modified A boolean indicating whether the input should be marked as modified.
      */
     setModified(modified: boolean): void;
+    /**
+     * Returns the current toggle style of the input (`checkbox` or `radio`).
+     * @returns `'default'` for standard style, or `'switch'` for switch-type toggle.
+     */
+    getToggleStyle(): 'default' | 'switch';
+    /**
+     * Sets the toggle style for the input (`checkbox` or `radio`).
+     * @param style - `'default'` for standard style, or `'switch'` for switch-type toggle.
+     */
+    setToggleStyle(style: 'default' | 'switch'): void;
     /**
      * Gets the current `tabIndex` applied to element.
      * - `null`: no `tabindex` attribute (items not focusable).
@@ -9369,237 +9398,433 @@ export declare interface HInputMethods extends ComponentMethods {
 }
 
 /**
- * Extended `Hison` interface for `hisonvue`.
- *
- * This interface expands the base `Hison` object provided by `hisonjs`
- * by adding the `vue` namespace, which contains frontend-specific modules
- * such as editors, grids, and other UI-related components.
- *
- * ---
- *
- * ### Core Structure
- *
- * - Inherits all core functionalities from `hisonjs`, including:
- *   - **Configuration Management** (date formats, character encoding, API settings)
- *   - **Security Features** (shield module for devtool blocking, IP restrictions)
- *   - **Utility Functions** (string, number, date manipulation)
- *   - **Structured Data Handling** (DataWrapper, DataModel)
- *   - **API Communication** (promise-based API modules, WebSocket caching)
+ * Global runtime facade for the `hisonvue` ecosystem.
  *
- * - Adds a new `vue` namespace for managing **frontend UI components**.
+ * The `Hison` object in `hisonvue` acts as the **frontend counterpart** to the core `Hison` from `hisonjs`.
+ * While `hisonjs` focuses on configuration, data handling, and communication logic,
+ * `hisonvue` extends this foundation into the **UI runtime layer**—managing
+ * event hooks, component lifecycles, and theme styling in real time.
  *
  * ---
+ * ### Relation to `hisonjs`
+ * This object extends {@link Hisonjs}, inheriting:
+ * - **Configuration and Utility Layers**: Formatting, type conversion, validation, and constants.
+ * - **Security Controls (`hison.shield`)**: Access, freezing, and developer tool restrictions.
+ * - **Data Models (`hison.data`)**: `DataWrapper`, `DataModel`, and related data transformation tools.
+ * - **API Communication (`hison.link`)**: Promise-based REST and WebSocket interfaces.
  *
- * ### `vue` Namespace
- *
- * The `vue` property groups together client-side objects
- * tightly coupled with DOM-based operations in Vue/Nuxt applications.
- *
- * | Key | Type | Description |
- * |:----|:-----|:-------------|
- * | `note` | `Vanillanote` | Singleton object for handling rich-text editors (Vanillanote). |
- * | `grid` | `Vanillagrid` | Singleton object for managing lightweight, customizable grids (Vanillagrid). |
- *
+ * On top of these, `hisonvue` introduces **UI-centric runtime systems**:
  *
- * #### `vue.note: Vanillanote`
- * - Manages the lifecycle of WYSIWYG editor instances.
- * - Provides methods like `init()`, `mountNote()`, `getNote()`, `unmountNote()`, and `destroy()`.
- * - Ensures consistent styling, event binding, and editor state management across SPA environments.
+ * - **Global Event Hooks (`cssEvent`)**
+ *   Intercept and modify component interactions (click, focus, blur, mouse/touch events)
+ *   across the entire app, before or after they occur.
  *
- * Example:
- * ```typescript
- * const editor = hison.note.getNote("editor-id");
- * editor.setNoteData({ html: "<p>Hello</p>" });
- * ```
- *
- *
- * #### `vue.grid: Vanillagrid`
- * - Provides a flexible, dependency-free table/grid system.
- * - Supports features like sorting, filtering, undo/redo, customizable headers and footers.
- *
- * Example:
- * ```typescript
- * const grid = hison.grid.getGrid("grid-id");
- * grid.load([{ id: "001", name: "Alice" }]);
- * ```
+ * - **Component Registry (`component`)**
+ *   Provides runtime access to all mounted hisonvue components via `id`.
+ *   Developers can programmatically control or query components even outside Vue scopes,
+ *   enabling reactive orchestration between views and data.
  *
+ * - **Dynamic Theming & Size Control (`style`)**
+ *   Manages global CSS variable states for colors, text, and layout sizes.
+ *   Changing these values automatically updates all mounted components without reloading the page.
  *
  * ---
+ * ### Internal Architecture
+ * The entire hisonvue runtime is built around a **shared internal state container** known as `hisonCloser`.
+ * This closure encapsulates mutable runtime data and exposes only safe API methods through this public interface.
  *
- * ### Encapsulation and Usage
- *
- * - The `hison` object is a **singleton** created internally by `hisonvue`.
- * - It is globally available after installing `Hisonvue` into your Vue application.
- * - It consolidates backend communication, frontend rendering, and utility logic into a unified, type-safe API.
- *
+ * - **Public Setters/Getters** → update the internal `hisonCloser` fields.
+ * - **CSS Variable Management** → uses `applyCssVariables()` to re-apply computed styles to the document root.
+ * - **Component Reload** → triggers `reloadAllHisonComponents()` to refresh visual themes non-destructively.
+ * - **SSR-Safe Operation** → browser-only side effects are guarded by runtime environment checks.
  *
- * ### Example Usage
+ * This separation ensures:
+ * - Consistent theme and event propagation across all components.
+ * - Isolation of mutable UI state from the immutable base hisonjs core.
+ * - Full TypeScript typing and IntelliSense coverage for both logic and UI.
  *
+ * ---
+ * ### Runtime Flow Example
  * ```typescript
- * import { hison } from "hisonvue";
- *
- * // Using core utilities
- * const isAlpha = hison.utils.isAlpha("Hello");
+ * // Customize global button behavior
+ * hison.cssEvent.setButtonOnBefoerClick((e) => {
+ *   console.log("Before click:", e.target);
+ *   return true; // returning false cancels the event
+ * });
  *
- * // Accessing Vanillanote editor
- * const note = hison.note.getNote("note1");
- * note.setNoteData({ html: "<p>World</p>" });
+ * // Dynamically recolor the theme
+ * hison.style.setPrimaryColor("#4E79FF");
+ * hison.style.setInvertColor(true);
  *
- * // Accessing Vanillagrid
- * const grid = hison.grid.getGrid("grid1");
- * grid.load([{ id: "001", name: "Alice" }]);
+ * // Access and control a mounted component by id
+ * const modal = hison.component.getModal("userInfoModal");
+ * modal?.open();
  * ```
  *
- *
  * ---
+ * ### Design Philosophy
+ * - **Unified Runtime Bridge** — Integrates logic (hisonjs) and UI (hisonvue) through a single global object.
+ * - **Declarative yet Controllable** — All Vue components are reactive but remain controllable imperatively.
+ * - **Theme Reactivity** — Any visual property (color, size, typography) can be updated at runtime.
+ * - **Extensible Hooks** — Developers can globally override or extend behavior without touching component internals.
+ * - **SSR Compatibility** — Designed to be safe for use with Nuxt 3 or Vue SSR environments.
  *
- * ### Future Expansion
- *
- * The `vue` namespace is designed to be **modular and extensible**.
- *
- * Planned or possible additions under `vue` may include:
- *
- * - `form`: Form validation and input components
- * - `chart`: Chart rendering components (e.g., Chart.js integration)
- * - `modal`, `toast`, `notification`, etc.
- *
+ * ---
+ * ### Usage Scenarios
+ * - Injecting custom UX logic globally (e.g., analytics before button clicks).
+ * - Building dynamic dashboards that manipulate component layouts in runtime.
+ * - Re-theming enterprise applications without recompilation.
+ * - Providing consistent interaction feedback across all hisonvue elements.
  *
  * ---
+ * ### Notes
+ * - **SSR-Safe**: CSS variable application runs only in client environments (`typeof window !== 'undefined'`).
+ * - **Component Safety**: Each `getXxx(id)` returns `null` if no component is registered under that id—no runtime throw.
+ * - **Naming Consistency**: Certain method names contain legacy typos (e.g., `Befoer` instead of `Before`);
+ *   they are preserved for backward compatibility but may be formally deprecated in a future release.
  *
+ * ---
  * ### Summary
+ * The `Hison` object in `hisonvue` represents the **bridge between data-driven logic and UI runtime control**.
+ * It inherits all configuration, data, and communication capabilities from `hisonjs`,
+ * while providing unified control over visual, behavioral, and interactive elements in Vue-based applications.
  *
- * The extended `Hison` for `hisonvue` provides a **fullstack bridge**:
- *
- * - Core system management via `hisonjs`
- * - Frontend visual components via `hison .note .grid .button ..`
- *
- * allowing you to develop robust, scalable, and highly modular applications.
+ * By consolidating configuration, runtime state, and UI event orchestration into a single
+ * globally accessible object, it ensures both **developer productivity** and **runtime consistency**
+ * across large-scale, enterprise-grade applications built with the hisondev ecosystem.
  */
 export declare interface Hison extends Hison_2 {
+    /**
+     * Sets the **maximum total upload size (bytes)** allowed across an entire HFileSet component.
+     * This guards the *sum* of all selected files in a single widget.
+     *
+     * @param fileSize - Maximum total size in bytes. Use `Infinity` for no global limit.
+     * @example
+     * hison.setMaxFilesetTotalSize(20 * 1024 * 1024) // 20 MB across all files
+     */
     setMaxFilesetTotalSize(fileSize: number): void;
+    /**
+     * Sets the **maximum per-file upload size (bytes)** for HFileSet.
+     * This guards the size of **each individual** file that a user selects.
+     *
+     * @param fileTotalSize - Maximum bytes allowed per file. Use `Infinity` to remove this cap.
+     * @example
+     * hison.setMaxFilesetSize(5 * 1024 * 1024) // 5 MB per file
+     */
     setMaxFilesetSize(fileTotalSize: number): void;
+    /**
+     * Returns the currently effective **maximum total upload size** (bytes) across the entire HFileSet.
+     * @returns The configured limit in bytes (or `Infinity` if unlimited).
+     */
     getMaxFilesetTotalSize(): number;
+    /**
+     * Returns the currently effective **maximum per-file upload size** (bytes) for HFileSet.
+     * @returns The configured limit in bytes (or `Infinity` if unlimited).
+     */
     getMaxFilesetSize(): number;
+    /**
+     * Global UI interaction hooks for hisonvue components.
+     *
+     * Each setter replaces the active handler for the given event “slot”.
+     * - **Button** series targets `<HButton>` UI events.
+     * - **Input** series targets text-input-like components (e.g., `<HInput>`, `<HInputGroup>`).
+     *
+     * @remarks
+     * - “Before” handlers (`...OnBefore...`) may return `false` to cancel the action.
+     * - “After” handlers (`...OnAfter...`) run after the component processes the event.
+     * - Handlers are invoked by components that integrate with the hisonvue event system.
+     * - Method names include a typo (`Befoer` → *Before*). Kept for compatibility.
+     * - If you need **multiple** handlers per event, compose them manually in your setter or
+     *   consider introducing an internal add/remove pipeline in a future version.
+     *
+     * @example
+     * // Cancel every HButton click unless a condition passes
+     * hison.cssEvent.setButtonOnBefoerClick((e) => {
+     *   const allow = someGuard();
+     *   if (!allow) e.preventDefault();
+     *   return allow;
+     * });
+     *
+     * @example
+     * // Add a visual cue after any HInput focus
+     * hison.cssEvent.setInputOnAfterFocus(() => highlightInputs());
+     */
     cssEvent: {
-        setButtonOnBefoerFocus(func: ((e: FocusEvent) => boolean)): void;
-        setButtonOnAfterFocus(func: ((e: FocusEvent) => void)): void;
-        setButtonOnBefoerBlur(func: ((e: FocusEvent) => boolean)): void;
-        setButtonOnAfterBlur(func: ((e: FocusEvent) => void)): void;
-        setButtonOnBefoerClick(func: ((e: MouseEvent) => boolean)): void;
-        setButtonOnAfterClick(func: ((e: MouseEvent) => void)): void;
-        setButtonOnBeforeMouseover(func: ((e: MouseEvent) => boolean)): void;
-        setButtonOnAfterMouseover(func: ((e: MouseEvent) => void)): void;
-        setButtonOnBeforeMouseout(func: ((e: MouseEvent) => boolean)): void;
-        setButtonOnAfterMouseout(func: ((e: MouseEvent) => void)): void;
-        setButtonOnBeforeTouchstart(func: ((e: TouchEvent) => boolean)): void;
-        setButtonOnAfterTouchstart(func: ((e: TouchEvent) => void)): void;
-        setButtonOnBeforeTouchend(func: ((e: TouchEvent) => boolean)): void;
-        setButtonOnAfterTouchend(func: ((e: TouchEvent) => void)): void;
-        setInputOnBefoerFocus(func: ((e: FocusEvent) => boolean)): void;
-        setInputOnAfterFocus(func: ((e: FocusEvent) => void)): void;
-        setInputOnBefoerBlur(func: ((e: FocusEvent) => boolean)): void;
-        setInputOnAfterBlur(func: ((e: FocusEvent) => void)): void;
-        setInputOnBeforeMouseover(func: ((e: MouseEvent) => boolean)): void;
-        setInputOnAfterMouseover(func: ((e: MouseEvent) => void)): void;
-        setInputOnBeforeMouseout(func: ((e: MouseEvent) => boolean)): void;
-        setInputOnAfterMouseout(func: ((e: MouseEvent) => void)): void;
-        setInputOnBeforeTouchstart(func: ((e: TouchEvent) => boolean)): void;
-        setInputOnAfterTouchstart(func: ((e: TouchEvent) => void)): void;
-        setInputOnBeforeTouchend(func: ((e: TouchEvent) => boolean)): void;
-        setInputOnAfterTouchend(func: ((e: TouchEvent) => void)): void;
+        /** Registers a global BEFORE-focus handler for HButton (return `false` to cancel). (typo: Befoer) */
+        setButtonOnBefoerFocus(func: (e: FocusEvent) => boolean): void;
+        /** Registers a global AFTER-focus handler for HButton. */
+        setButtonOnAfterFocus(func: (e: FocusEvent) => void): void;
+        /** Registers a global BEFORE-blur handler for HButton (return `false` to cancel). (typo: Befoer) */
+        setButtonOnBefoerBlur(func: (e: FocusEvent) => boolean): void;
+        /** Registers a global AFTER-blur handler for HButton. */
+        setButtonOnAfterBlur(func: (e: FocusEvent) => void): void;
+        /** Registers a global BEFORE-click handler for HButton (return `false` to cancel). (typo: Befoer) */
+        setButtonOnBefoerClick(func: (e: MouseEvent) => boolean): void;
+        /** Registers a global AFTER-click handler for HButton. */
+        setButtonOnAfterClick(func: (e: MouseEvent) => void): void;
+        /** Registers a global BEFORE-mouseover handler for HButton (return `false` to cancel). */
+        setButtonOnBeforeMouseover(func: (e: MouseEvent) => boolean): void;
+        /** Registers a global AFTER-mouseover handler for HButton. */
+        setButtonOnAfterMouseover(func: (e: MouseEvent) => void): void;
+        /** Registers a global BEFORE-mouseout handler for HButton (return `false` to cancel). */
+        setButtonOnBeforeMouseout(func: (e: MouseEvent) => boolean): void;
+        /** Registers a global AFTER-mouseout handler for HButton. */
+        setButtonOnAfterMouseout(func: (e: MouseEvent) => void): void;
+        /** Registers a global BEFORE-touchstart handler for HButton (return `false` to cancel). */
+        setButtonOnBeforeTouchstart(func: (e: TouchEvent) => boolean): void;
+        /** Registers a global AFTER-touchstart handler for HButton. */
+        setButtonOnAfterTouchstart(func: (e: TouchEvent) => void): void;
+        /** Registers a global BEFORE-touchend handler for HButton (return `false` to cancel). */
+        setButtonOnBeforeTouchend(func: (e: TouchEvent) => boolean): void;
+        /** Registers a global AFTER-touchend handler for HButton. */
+        setButtonOnAfterTouchend(func: (e: TouchEvent) => void): void;
+        /** Registers a global BEFORE-focus handler for Input-like components (return `false` to cancel). (typo: Befoer) */
+        setInputOnBefoerFocus(func: (e: FocusEvent) => boolean): void;
+        /** Registers a global AFTER-focus handler for Input-like components. */
+        setInputOnAfterFocus(func: (e: FocusEvent) => void): void;
+        /** Registers a global BEFORE-blur handler for Input-like components (return `false` to cancel). (typo: Befoer) */
+        setInputOnBefoerBlur(func: (e: FocusEvent) => boolean): void;
+        /** Registers a global AFTER-blur handler for Input-like components. */
+        setInputOnAfterBlur(func: (e: FocusEvent) => void): void;
+        /** Registers a global BEFORE-mouseover handler for Input-like components (return `false` to cancel). */
+        setInputOnBeforeMouseover(func: (e: MouseEvent) => boolean): void;
+        /** Registers a global AFTER-mouseover handler for Input-like components. */
+        setInputOnAfterMouseover(func: (e: MouseEvent) => void): void;
+        /** Registers a global BEFORE-mouseout handler for Input-like components (return `false` to cancel). */
+        setInputOnBeforeMouseout(func: (e: MouseEvent) => boolean): void;
+        /** Registers a global AFTER-mouseout handler for Input-like components. */
+        setInputOnAfterMouseout(func: (e: MouseEvent) => void): void;
+        /** Registers a global BEFORE-touchstart handler for Input-like components (return `false` to cancel). */
+        setInputOnBeforeTouchstart(func: (e: TouchEvent) => boolean): void;
+        /** Registers a global AFTER-touchstart handler for Input-like components. */
+        setInputOnAfterTouchstart(func: (e: TouchEvent) => void): void;
+        /** Registers a global BEFORE-touchend handler for Input-like components (return `false` to cancel). */
+        setInputOnBeforeTouchend(func: (e: TouchEvent) => boolean): void;
+        /** Registers a global AFTER-touchend handler for Input-like components. */
+        setInputOnAfterTouchend(func: (e: TouchEvent) => void): void;
     };
+    /**
+     * Runtime accessors for **mounted component instances** by their `id`.
+     *
+     * Components register/unregister themselves to an internal registry during mount/unmount.
+     * Each getter returns the type-specific method interface for imperative control,
+     * or `null` if no component is registered under that id.
+     *
+     * @remarks
+     * - Use these accessors to orchestrate UI from outside component scopes (e.g., from services or stores).
+     * - Prefer stable, unique `id` assignments to avoid collisions.
+     * - If you need strict behavior, wrap calls with your own `requireXxx(id)` helper that throws on `null`.
+     *
+     * @example
+     * const btn = hison.component.getButton('primarySubmit');
+     * btn?.setLoading(true);
+     * btn?.setDisabled(true);
+     */
     component: {
+        /** Returns the runtime methods for an HAccordion, or `null` if not found. */
         getAccordion(accordionId: string): HAccordionMethods | null;
+        /** Returns the runtime methods for an HBaggie, or `null` if not found. */
         getBaggie(baggieId: string): HBaggieMethods | null;
+        /** Returns the runtime methods for an HBanner, or `null` if not found. */
         getBanner(bannerId: string): HBannerMethods | null;
+        /** Returns the runtime methods for an HButton, or `null` if not found. */
         getButton(buttonId: string): HButtonMethods | null;
+        /** Returns the runtime methods for an HCalendar, or `null` if not found. */
         getCalendar(calendarId: string): HCalendarMethods | null;
+        /** Returns the runtime methods for an HCaption, or `null` if not found. */
         getCaption(calendarId: string): HCaptionMethods | null;
+        /** Returns the chart instance handle, or `null` if not found. */
         getChart(chartId: string): HChartInstance | null;
+        /** Returns the runtime methods for an HDrawer, or `null` if not found. */
         getDrawer(drawerId: string): HDrawerMethods | null;
+        /** Returns the runtime methods for an HDropdown, or `null` if not found. */
         getDropdown(dropdownId: string): HDropdownMethods | null;
+        /** Returns the runtime methods for an HFileSet, or `null` if not found. */
         getFileset(filesetId: string): HFilesetMethods | null;
+        /** Returns the runtime methods for an HGap, or `null` if not found. */
         getGap(gapId: string): HGapMethods | null;
+        /** Returns the runtime methods for an HGrid, or `null` if not found. */
         getGrid(gridId: string): HGridMethods | null;
+        /** Returns the runtime methods for an HImageBox, or `null` if not found. */
         getImagebox(imageboxId: string): HImageboxMethods | null;
+        /** Returns the runtime methods for an HInput, or `null` if not found. */
         getInput(inputId: string): HInputMethods | null;
+        /** Returns the runtime methods for an HInputGroup, or `null` if not found. */
         getInputGroup(inputGroupId: string): HInputGroupMethods | null;
+        /** Returns the runtime methods for an HLabel, or `null` if not found. */
         getLabel(labelId: string): HLabelMethods | null;
+        /** Returns the runtime methods for an HLayout, or `null` if not found. */
         getLayout(layoutId: string): HLayoutMethods | null;
+        /** Returns the runtime methods for an HList, or `null` if not found. (param name has a typo: listtId) */
         getList(listtId: string): HListMethods | null;
+        /** Returns the runtime methods for an HModal, or `null` if not found. (param name has a typo: listtId) */
         getModal(listtId: string): HModalMethods | null;
+        /** Returns the DOM-like note element handle, or `null` if not found. */
         getNote(noteId: string): HNoteElement | null;
+        /** Returns the runtime methods for an HPagination, or `null` if not found. */
         getPagination(paginationId: string): HPaginationMethods | null;
+        /** Returns the runtime methods for an HParagraph, or `null` if not found. */
         getParagraph(paragraphId: string): HParagraphMethods | null;
+        /** Returns the runtime methods for an HPopup, or `null` if not found. */
         getPopup(popupId: string): HPopupMethods | null;
+        /** Returns the runtime methods for an HSpinner, or `null` if not found. */
         getSpinner(spinnerId: string): HSpinnerMethods | null;
+        /** Returns the runtime methods for an HTable, or `null` if not found. */
         getTable(tableId: string): HTableMethods | null;
     };
+    /**
+     * Global theme & sizing controller. Mutators update the runtime theme state and
+     * re-apply CSS variables to the document, then softly reload mounted components
+     * so visual changes take effect immediately.
+     *
+     * Colors accept any valid CSS color string (hex, rgb(a), hsl(a), named colors).
+     * Size uses the predefined scale from {@link Size}.
+     *
+     * @remarks
+     * - Some “derived” getters (e.g., button/border/hover colors) return computed values
+     *   from the base palette; implementations typically cache or derive them from the
+     *   current theme and inversion state.
+     * - `invertColor` flips foreground/background contrast for dark/light schemes.
+     *
+     * @example
+     * // Switch to a medium size scale and update the primary palette:
+     * hison.style.setSize(Size.m);
+     * hison.style.setPrimaryColor('#4e79ff');
+     * hison.style.setInvertColor(true);
+     */
     style: {
+        /** Sets the global size scale. Affects paddings, radii, and control heights. */
         setSize(size: Size.s | Size.m | Size.l | Size.xl): void;
+        /** Sets the base “filled” surface color used by components. */
         setFilledColor(filledColor: string): void;
+        /** Sets the base “empty/outline” surface color used by components. */
         setEmptyColor(emptyColor: string): void;
+        /** Sets the default text color on filled surfaces. */
         setFilledTextColor(filledTextColor: string): void;
+        /** Sets the default text color on empty/outline surfaces. */
         setEmptyTextColor(emptyTextColor: string): void;
+        /** Sets the primary accent color (brand color). */
         setPrimaryColor(primaryColor: string): void;
+        /** Sets the muted/neutral color. */
         setMutedColor(mutedColor: string): void;
+        /** Sets the informational color (status). */
         setInfoColor(infoColor: string): void;
+        /** Sets the success color (status). */
         setSuccessColor(successColor: string): void;
+        /** Sets the danger color (status). */
         setDangerColor(dangerColor: string): void;
+        /** Sets the warning color (status). */
         setWarningColor(warningColor: string): void;
+        /**
+         * Enables or disables **color inversion** (dark/light intent).
+         * When enabled, derived text/background pairs flip to preserve contrast.
+         */
         setInvertColor(invert: boolean): void;
+        /** Returns the base filled surface color. */
         getFilledColor(): string;
+        /** Returns the base empty/outline surface color. */
         getEmptyColor(): string;
+        /** Returns the default text color on filled surfaces. */
         getFilledTextColor(): string;
+        /** Returns the default text color on empty/outline surfaces. */
         getEmptyTextColor(): string;
+        /** Returns the primary base color. */
         getPrimaryColor(): string;
+        /** Returns the computed button color for the primary palette. */
         getPrimaryButtonColor(): string;
+        /** Returns the computed border color for the primary palette. */
         getPrimaryBorderColor(): string;
+        /** Returns the computed shadow color for the primary palette. */
         getPrimaryShadowColor(): string;
+        /** Returns the computed hover color for the primary palette. */
         getPrimaryHoverColor(): string;
+        /** Returns the computed active color for the primary palette. */
         getPrimaryActiveColor(): string;
+        /** Returns the computed row hover color for the primary palette (e.g., tables). */
         getPrimaryRowHoverColor(): string;
+        /** Returns the computed stripe color for the primary palette (e.g., zebra rows). */
         getPrimaryStripeColor(): string;
+        /** Returns the muted base color. */
         getMutedColor(): string;
+        /** Returns the computed button color for the muted palette. */
         getMutedButtonColor(): string;
+        /** Returns the computed border color for the muted palette. */
         getMutedBorderColor(): string;
+        /** Returns the computed shadow color for the muted palette. */
         getMutedShadowColor(): string;
+        /** Returns the computed hover color for the muted palette. */
         getMutedHoverColor(): string;
+        /** Returns the computed active color for the muted palette. */
         getMutedActiveColor(): string;
+        /** Returns the computed row hover color for the muted palette. */
         getMutedRowHoverColor(): string;
+        /** Returns the computed stripe color for the muted palette. */
         getMutedStripeColor(): string;
+        /** Returns the info base color. */
         getInfoColor(): string;
+        /** Returns the computed button color for the info palette. */
         getInfoButtonColor(): string;
+        /** Returns the computed border color for the info palette. */
         getInfoBorderColor(): string;
+        /** Returns the computed shadow color for the info palette. */
         getInfoShadowColor(): string;
+        /** Returns the computed hover color for the info palette. */
         getInfoHoverColor(): string;
+        /** Returns the computed active color for the info palette. */
         getInfoActiveColor(): string;
+        /** Returns the computed row hover color for the info palette. */
         getInfoRowHoverColor(): string;
+        /** Returns the computed stripe color for the info palette. */
         getInfoStripeColor(): string;
+        /** Returns the success base color. */
         getSuccessColor(): string;
+        /** Returns the computed button color for the success palette. */
         getSuccessButtonColor(): string;
+        /** Returns the computed border color for the success palette. */
         getSuccessBorderColor(): string;
+        /** Returns the computed shadow color for the success palette. */
         getSuccessShadowColor(): string;
+        /** Returns the computed hover color for the success palette. */
         getSuccessHoverColor(): string;
+        /** Returns the computed active color for the success palette. */
         getSuccessActiveColor(): string;
+        /** Returns the computed row hover color for the success palette. */
         getSuccessRowHoverColor(): string;
+        /** Returns the computed stripe color for the success palette. */
         getSuccessStripeColor(): string;
+        /** Returns the danger base color. */
         getDangerColor(): string;
+        /** Returns the computed button color for the danger palette. */
         getDangerButtonColor(): string;
+        /** Returns the computed border color for the danger palette. */
         getDangerBorderColor(): string;
+        /** Returns the computed shadow color for the danger palette. */
         getDangerShadowColor(): string;
+        /** Returns the computed hover color for the danger palette. */
         getDangerHoverColor(): string;
+        /** Returns the computed active color for the danger palette. */
         getDangerActiveColor(): string;
+        /** Returns the computed row hover color for the danger palette. */
         getDangerRowHoverColor(): string;
+        /** Returns the computed stripe color for the danger palette. */
         getDangerStripeColor(): string;
+        /** Returns the warning base color. */
         getWarningColor(): string;
+        /** Returns the computed button color for the warning palette. */
         getWarningButtonColor(): string;
+        /** Returns the computed border color for the warning palette. */
         getWarningBorderColor(): string;
+        /** Returns the computed shadow color for the warning palette. */
         getWarningShadowColor(): string;
+        /** Returns the computed hover color for the warning palette. */
         getWarningHoverColor(): string;
+        /** Returns the computed active color for the warning palette. */
         getWarningActiveColor(): string;
+        /** Returns the computed row hover color for the warning palette. */
         getWarningRowHoverColor(): string;
+        /** Returns the computed stripe color for the warning palette. */
         getWarningStripeColor(): string;
+        /** Returns whether theme inversion (dark/light intent) is currently enabled. */
         isInvertColor(): boolean;
     };
 }
@@ -9725,6 +9950,10 @@ type: PropType<BackgroundType | BackgroundTypeValue>;
 default: BackgroundType;
 validator: (v: any) => boolean;
 };
+toggleTarget: {
+type: PropType<string | null>;
+default: null;
+};
 tabIndex: {
 type: PropType<number | string | null>;
 default: null;
@@ -9761,6 +9990,8 @@ isBorder: () => boolean;
 setBorder: (border: boolean) => void;
 getBackgroundType: () => BackgroundTypeValue;
 setBackgroundType: (type: BackgroundType | BackgroundTypeValue) => void;
+getToggleTarget: () => string | null;
+setToggleTarget: (id: string | null) => void;
 getTabIndex: () => number | null;
 setTabIndex: (v: number | null) => void;
 focus: () => void;
@@ -9831,6 +10062,10 @@ type: PropType<BackgroundType | BackgroundTypeValue>;
 default: BackgroundType;
 validator: (v: any) => boolean;
 };
+toggleTarget: {
+type: PropType<string | null>;
+default: null;
+};
 tabIndex: {
 type: PropType<number | string | null>;
 default: null;
@@ -9847,6 +10082,7 @@ onMounted?: ((...args: any[]) => any) | undefined;
 }> & {}>;
 title: Ref<string, string>;
 hasHref: ComputedRef<boolean>;
+hasToggleTarget: ComputedRef<boolean>;
 hasElementSlot: ComputedRef<boolean>;
 renderTag: ComputedRef<"a" | "div" | "span">;
 internalText: Ref<string, string>;
@@ -9928,6 +10164,10 @@ type: PropType<BackgroundType | BackgroundTypeValue>;
 default: BackgroundType;
 validator: (v: any) => boolean;
 };
+toggleTarget: {
+type: PropType<string | null>;
+default: null;
+};
 tabIndex: {
 type: PropType<number | string | null>;
 default: null;
@@ -9953,6 +10193,7 @@ tabIndex: string | number | null;
 backgroundType: BackgroundTypeValue | BackgroundType;
 href: string | null;
 anchorAttrs: Record<string, unknown> | Partial<HLabelAnchorAttrs>;
+toggleTarget: string | null;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 /**
@@ -10157,6 +10398,17 @@ export declare interface HLabelMethods extends ComponentMethods {
      * - Accepts 'filled' | 'empty' | 'transparent'.
      */
     setBackgroundType(type: BackgroundType | BackgroundTypeValue): void;
+    /**
+     * Gets the current toggle target id.
+     * - Returns the id of the `HInput` (checkbox/radio) linked to this label, or `null` if none.
+     */
+    getToggleTarget(): string | null;
+    /**
+     * Sets or changes the toggle target id.
+     * - When assigned, clicking the label (or pressing Enter/Space) will toggle the specified `HInput`.
+     * - Accepts `null` to remove toggle linkage.
+     */
+    setToggleTarget(id: string | null): void;
     /**
      * Gets the current `tabIndex` applied to element.
      * - `null`: no `tabindex` attribute (items not focusable).
@@ -16962,6 +17214,9 @@ export { }
 
 declare module 'vue' {
     interface GlobalComponents {
+        /**
+         * label과 연동? label속성? label slot?? label클릭 시 checkbox, radio 토글 제공???
+         */
         /**
          * Hisonvue custom accordion component.
          *
@@ -18658,6 +18913,7 @@ declare module 'vue' {
          * @prop {string} [checkedText='Y'] - Display text for `true` value in checkbox/radio (span-text).
          * @prop {string} [uncheckedText='N'] - Display text for `false` value in checkbox/radio (span-text).
          * @prop {(value: any) => string} [inputTextdHandler] - Custom formatter for display text (span).
+         * @prop {('default' | 'switch')} [toggleStyle='default'] - Visual style for `checkbox`/`radio`.
          *
          * ---
          *