@iyulab/components 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,105 +1,118 @@
-# Changelog
-
-## 0.2.0 (2026-01-16)
-
-### Breaking Changes
-- **Utilities**: Refactored utility class architecture to static-only pattern
-  - `IconRegistry`: Changed from singleton instance to static class (use `IconRegistry.register()` instead of `icons.register()`)
-  - `Notifier`: Changed from singleton instance to static class (use `Notifier.toast()` instead of `notifier.toast()`)
-  - `Theme`: Changed from singleton instance to static class (use `Theme.init()` instead of `theme.init()`)
-- **IconButton**: Removed `UIconButton` component (use `UButton` with icon slot instead)
-
-### Features
-- **UTag**: Added new Tag component for displaying labels, categories, and status
-  - Supports variants: `default`, `info`, `success`, `warning`, `danger`
-  - Removable tag functionality with smooth animation
-  - Prefix/suffix slots for custom content
-- **UButton**: Added `variant` property with support for `default`, `borderless`, and `link` styles
-- **UTooltip**: Added `interactive` property for keeping tooltip open when hovering over it
-- **Icons**: Added new icon assets
-  - `arrow-repeat`, `box-arrow-up-right`, `file-earmark`, `flag`, `globe`
-  - `hand-thumbs-up`, `hand-thumbs-up-fill`, `hand-thumbs-down`, `hand-thumbs-down-fill`
-  - `share`, `stop-circle`, `tools`
-- **Utilities**: Added new utility functions
-  - `converters.ts`: `arrayAttrConverter()` for array attribute conversion
-  - `elements.ts`: DOM helper functions (`getParentElement`, `querySelectorWithin`, `querySelectorAllWithin`)
-
-### Improvements
-- **FloatingElement**: Enhanced positioning and anchor management logic
-- **UButton**: Improved click event handling for disabled and loading states
-- **UDialog/UDrawer**: Updated to use improved modal element patterns
-- **UMenu**: Refactored submenu handling and dropdown logic
-- **IconRegistry**: Reorganized and improved icon loading architecture
-- **Utilities**: Moved internal utilities to public utilities directory
-  - `internals/attribute-converters.ts` → `utilities/converters.ts`
-  - `internals/node-helpers.ts` → `utilities/elements.ts`
-  - `utilities/icons.ts` → `utilities/IconRegistry.ts`
-
-## 0.1.11 (2026-01-06)
-
-### Fixes
-- Fixed d.ts generation error for `Theme` class by exporting the class
-
-### Features
-- **UTreeItem**: Added `loading` property with spinner indicator
-- **UTreeItem**: Added MutationObserver for dynamic child loading support
-- **UMenuItem**: Added `loading` property with spinner indicator
-
-### Improvements
-- **UDivider**: Simplified component (removed movable functionality)
-- **USplitPanel**: Completely rewritten with native splitter implementation
-- **UMenu/UMenuItem**: Refactored submenu handling logic
-- **UTreeItem**: Improved children slot handling with `processChildren` method
-- **UTreeItem**: Changed indent styling to use CSS custom property (`--indent-level`)
-
-## 0.1.10 (2025-12-19)
-- Fixed circular dependency issue between `UMenu` and `UMenuItem`
-- Changed `UMenuItem` to use tagName check instead of `instanceof` for submenu detection
-
-## 0.1.9 (2025-12-19)
-- Added `Tree`, `TreeItem` components for hierarchical data display
-- Updated React wrapper plugin to support new file structure
-- Removed `CopyButton` component
-- Changed React wrapper output directory to `react-components`
-
-## 0.1.8 (2025-12-18)
-- **Breaking Change**: Added `U` prefix to all component class names (e.g., `Alert` → `UAlert`)
-- **Breaking Change**: Changed file naming convention
-  - `{Name}.ts` → `U{Name}.component.ts` (class implementation)
-  - `{Name}.styles.ts` → `U{Name}.styles.ts` (styles)
-  - `index.ts` → `U{Name}.ts` (element definition)
-
-## 0.1.7 (2025-12-13)
-- Added `FloatingElement` base class for popover, tooltip common logic
-- Added `ModalElement` base class for dialog, drawer common logic
-- Added `Drawer` component
-- Added `Skeleton` component
-- Improved `Menu` component with dropdown, contextmenu, submenu support
-- Refactored `Dialog` component based on `ModalElement`
-- Removed `ContextMenu`, `DropdownMenu` (merged into `Menu`)
-
-## 0.1.5 (2025-12-10)
-- Improved `Icon` component and refactored icon utilities
-- Improved `Input` component styles and validation
-- Improved `Tooltip`, `Divider`, `SplitPanel` components
-- Improved `notifier` utility
-- Removed `Panel` component
-- Updated theme styles (light/dark)
-
-## 0.1.4 (2025-12-05)
-- Fixes some issues
-
-## 0.1.3 (2025-11-17)
-- fixed a theme `useBuiltIn` Option, now it works as expected.
-- added `ProgressBar` component to show loading progress at the top of the page.
-
-## 0.1.2 (2025-11-13)
-- fixed a type issue in `theme` utility.
-
-## 0.1.1 (2025-11-13)
-- added `BrowserStorage` which supports `localStorage` and `cookie` with async methods for getting, setting, and removing items.
-- changed theme `persist` option to `store` option, and fixed some issues.
-- removed `toggle` method from theme utility.
-
-## 0.1.0 (2025-11-12)
-- Initial library version release
+# Changelog
+
+## 0.2.2 (2026-02-09)
+
+### Features
+- **UInput**: Added `min`, `max`, `step` properties for number/date/time input types (closes #1)
+
+## 0.2.1 (2026-02-09)
+
+### Documentation
+- **Events**: Added complete event API reference with all `u-*` events, detail types, and usage examples (closes #3)
+- **CSS Custom Properties**: Added full `--u-*` variable reference with light/dark values (closes #2)
+- **Theming**: Added theme setup, switching, and external design system integration guide
+- **Components**: Added component list with tags and descriptions
+
+## 0.2.0 (2026-01-16)
+
+### Breaking Changes
+- **Utilities**: Refactored utility class architecture to static-only pattern
+  - `IconRegistry`: Changed from singleton instance to static class (use `IconRegistry.register()` instead of `icons.register()`)
+  - `Notifier`: Changed from singleton instance to static class (use `Notifier.toast()` instead of `notifier.toast()`)
+  - `Theme`: Changed from singleton instance to static class (use `Theme.init()` instead of `theme.init()`)
+- **IconButton**: Removed `UIconButton` component (use `UButton` with icon slot instead)
+
+### Features
+- **UTag**: Added new Tag component for displaying labels, categories, and status
+  - Supports variants: `default`, `info`, `success`, `warning`, `danger`
+  - Removable tag functionality with smooth animation
+  - Prefix/suffix slots for custom content
+- **UButton**: Added `variant` property with support for `default`, `borderless`, and `link` styles
+- **UTooltip**: Added `interactive` property for keeping tooltip open when hovering over it
+- **Icons**: Added new icon assets
+  - `arrow-repeat`, `box-arrow-up-right`, `file-earmark`, `flag`, `globe`
+  - `hand-thumbs-up`, `hand-thumbs-up-fill`, `hand-thumbs-down`, `hand-thumbs-down-fill`
+  - `share`, `stop-circle`, `tools`
+- **Utilities**: Added new utility functions
+  - `converters.ts`: `arrayAttrConverter()` for array attribute conversion
+  - `elements.ts`: DOM helper functions (`getParentElement`, `querySelectorWithin`, `querySelectorAllWithin`)
+
+### Improvements
+- **FloatingElement**: Enhanced positioning and anchor management logic
+- **UButton**: Improved click event handling for disabled and loading states
+- **UDialog/UDrawer**: Updated to use improved modal element patterns
+- **UMenu**: Refactored submenu handling and dropdown logic
+- **IconRegistry**: Reorganized and improved icon loading architecture
+- **Utilities**: Moved internal utilities to public utilities directory
+  - `internals/attribute-converters.ts` → `utilities/converters.ts`
+  - `internals/node-helpers.ts` → `utilities/elements.ts`
+  - `utilities/icons.ts` → `utilities/IconRegistry.ts`
+
+## 0.1.11 (2026-01-06)
+
+### Fixes
+- Fixed d.ts generation error for `Theme` class by exporting the class
+
+### Features
+- **UTreeItem**: Added `loading` property with spinner indicator
+- **UTreeItem**: Added MutationObserver for dynamic child loading support
+- **UMenuItem**: Added `loading` property with spinner indicator
+
+### Improvements
+- **UDivider**: Simplified component (removed movable functionality)
+- **USplitPanel**: Completely rewritten with native splitter implementation
+- **UMenu/UMenuItem**: Refactored submenu handling logic
+- **UTreeItem**: Improved children slot handling with `processChildren` method
+- **UTreeItem**: Changed indent styling to use CSS custom property (`--indent-level`)
+
+## 0.1.10 (2025-12-19)
+- Fixed circular dependency issue between `UMenu` and `UMenuItem`
+- Changed `UMenuItem` to use tagName check instead of `instanceof` for submenu detection
+
+## 0.1.9 (2025-12-19)
+- Added `Tree`, `TreeItem` components for hierarchical data display
+- Updated React wrapper plugin to support new file structure
+- Removed `CopyButton` component
+- Changed React wrapper output directory to `react-components`
+
+## 0.1.8 (2025-12-18)
+- **Breaking Change**: Added `U` prefix to all component class names (e.g., `Alert` → `UAlert`)
+- **Breaking Change**: Changed file naming convention
+  - `{Name}.ts` → `U{Name}.component.ts` (class implementation)
+  - `{Name}.styles.ts` → `U{Name}.styles.ts` (styles)
+  - `index.ts` → `U{Name}.ts` (element definition)
+
+## 0.1.7 (2025-12-13)
+- Added `FloatingElement` base class for popover, tooltip common logic
+- Added `ModalElement` base class for dialog, drawer common logic
+- Added `Drawer` component
+- Added `Skeleton` component
+- Improved `Menu` component with dropdown, contextmenu, submenu support
+- Refactored `Dialog` component based on `ModalElement`
+- Removed `ContextMenu`, `DropdownMenu` (merged into `Menu`)
+
+## 0.1.5 (2025-12-10)
+- Improved `Icon` component and refactored icon utilities
+- Improved `Input` component styles and validation
+- Improved `Tooltip`, `Divider`, `SplitPanel` components
+- Improved `notifier` utility
+- Removed `Panel` component
+- Updated theme styles (light/dark)
+
+## 0.1.4 (2025-12-05)
+- Fixes some issues
+
+## 0.1.3 (2025-11-17)
+- fixed a theme `useBuiltIn` Option, now it works as expected.
+- added `ProgressBar` component to show loading progress at the top of the page.
+
+## 0.1.2 (2025-11-13)
+- fixed a type issue in `theme` utility.
+
+## 0.1.1 (2025-11-13)
+- added `BrowserStorage` which supports `localStorage` and `cookie` with async methods for getting, setting, and removing items.
+- changed theme `persist` option to `store` option, and fixed some issues.
+- removed `toggle` method from theme utility.
+
+## 0.1.0 (2025-11-12)
+- Initial library version release

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) [year] [fullname]
-
-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
+MIT License
+
+Copyright (c) [year] [fullname]
+
+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

@@ -1,26 +1,283 @@
-# @iyulab/components
-
-Modern web components library built with Lit-Element for building reactive user interfaces.
-
-Visit our [Demo Site](https://components.iyulab.com) to explore all components and their features.
-
-## Installation
-
-```bash
-npm install @iyulab/components
-```
-
-## Usage
-
-```js
-import "@iyulab/components";
-```
-
-## Core Dependencies
-
-- [lit](https://www.npmjs.com/package/lit) - Fast web components framework
-- [@floating-ui/dom](https://www.npmjs.com/package/@floating-ui/dom) - Positioning library for tooltips and popovers
-
-## License
-
-MIT © [iyulab](https://www.iyulab.com)
+# @iyulab/components
+
+Modern web components library built with Lit-Element for building reactive user interfaces.
+
+Visit our [Demo Site](https://components.iyulab.com) to explore all components and their features.
+
+## Installation
+
+```bash
+npm install @iyulab/components
+```
+
+## Usage
+
+```js
+import "@iyulab/components";
+```
+
+## Components
+
+| Component | Tag | Description |
+|-----------|-----|-------------|
+| UAlert | `u-alert` | Alert messages with variants |
+| UButton | `u-button` | Button with variants, loading state |
+| UDialog | `u-dialog` | Modal dialog |
+| UDrawer | `u-drawer` | Slide-in drawer panel |
+| UDivider | `u-divider` | Visual divider |
+| UForm | `u-form` | Form container with validation |
+| UIcon | `u-icon` | Icon display |
+| UInput | `u-input` | Text input with validation |
+| UMenu | `u-menu` | Dropdown/context menu |
+| UMenuItem | `u-menu-item` | Menu item |
+| UProgressBar | `u-progress-bar` | Progress bar |
+| UProgressRing | `u-progress-ring` | Circular progress indicator |
+| USkeleton | `u-skeleton` | Loading placeholder |
+| USpinner | `u-spinner` | Loading spinner |
+| USplitPanel | `u-split-panel` | Resizable split panel |
+| UTag | `u-tag` | Label/status tag |
+| UTooltip | `u-tooltip` | Tooltip |
+| UTree | `u-tree` | Tree view |
+| UTreeItem | `u-tree-item` | Tree view item |
+
+## Events
+
+All custom events use the `u-<action>` naming convention. Events bubble across Shadow DOM boundaries (`bubbles: true`, `composed: true`).
+
+### Event Reference
+
+| Event | Emitted By | Detail | Description |
+|-------|-----------|--------|-------------|
+| `u-input` | `u-input` | `{ value: string }` | Fires on every keystroke (real-time input) |
+| `u-change` | `u-input` | `{ value: string }` | Fires when value is committed (blur/enter) |
+| `u-select` | `u-tree-item` | `{ value: string, item: UTreeItem }` | Fires when a leaf item is selected |
+| `u-show` | `u-dialog`, `u-drawer`, `u-tooltip` | — | Fires when the element becomes visible |
+| `u-hide` | `u-dialog`, `u-drawer`, `u-tooltip` | — | Fires when the element is hidden |
+| `u-toggle` | `u-tree-item` | `{ expanded: boolean, item: UTreeItem }` | Fires when a branch item expands/collapses |
+| `u-resize` | `u-split-panel` | — | Fires when the panel is resized |
+
+### TypeScript Support
+
+All events are typed and registered on `GlobalEventHandlersEventMap`:
+
+```typescript
+import type { UInputEvent, UChangeEvent, USelectEvent, UShowEvent, UHideEvent, UResizeEvent } from '@iyulab/components';
+
+element.addEventListener('u-input', (e: UInputEvent) => {
+  console.log(e.detail.value);
+});
+```
+
+### Listening to Events
+
+```html
+<!-- Lit template -->
+<u-input @u-input=${this.handleInput} @u-change=${this.handleChange}></u-input>
+```
+
+```javascript
+// Vanilla JS
+document.querySelector('u-input').addEventListener('u-input', (e) => {
+  console.log('Real-time value:', e.detail.value);
+});
+
+document.querySelector('u-input').addEventListener('u-change', (e) => {
+  console.log('Committed value:', e.detail.value);
+});
+```
+
+## CSS Custom Properties
+
+All CSS custom properties use the `--u-` prefix and are defined on `:root`. They respond to light/dark theme changes automatically.
+
+### Semantic Colors
+
+These variables reference the color palette and should be used in most cases:
+
+#### Text
+
+| Variable | Light | Dark |
+|----------|-------|------|
+| `--u-txt-color` | neutral-900 | neutral-900 |
+| `--u-txt-color-inverse` | neutral-0 | neutral-100 |
+| `--u-txt-color-hover` | blue-600 | blue-600 |
+| `--u-txt-color-active` | blue-600 | blue-600 |
+| `--u-txt-color-disabled` | neutral-400 | neutral-500 |
+| `--u-txt-color-weak` | neutral-700 | neutral-700 |
+| `--u-txt-color-strong` | neutral-1000 | neutral-1000 |
+| `--u-link-txt-color` | blue-700 | blue-700 |
+| `--u-tooltip-txt-color` | neutral-0 | neutral-100 |
+
+#### Icon
+
+| Variable | Light | Dark |
+|----------|-------|------|
+| `--u-icon-color` | neutral-700 | neutral-800 |
+| `--u-icon-color-inverse` | neutral-0 | neutral-100 |
+| `--u-icon-color-hover` | blue-600 | blue-600 |
+| `--u-icon-color-active` | blue-600 | blue-600 |
+| `--u-icon-color-disabled` | neutral-400 | neutral-500 |
+
+#### Border
+
+| Variable | Light | Dark |
+|----------|-------|------|
+| `--u-border-color` | neutral-300 | neutral-400 |
+| `--u-border-color-weak` | neutral-200 | neutral-300 |
+| `--u-border-color-strong` | neutral-400 | neutral-500 |
+| `--u-input-border-color` | neutral-300 | neutral-400 |
+| `--u-input-border-color-hover` | neutral-400 | neutral-500 |
+| `--u-input-border-color-focus` | blue-600 | blue-600 |
+| `--u-input-border-color-invalid` | red-600 | red-600 |
+
+#### Background
+
+| Variable | Light | Dark |
+|----------|-------|------|
+| `--u-bg-color` | neutral-0 | neutral-100 |
+| `--u-bg-color-inverse` | neutral-900 | neutral-0 |
+| `--u-bg-color-hover` | neutral-100 | neutral-300 |
+| `--u-bg-color-active` | neutral-200 | neutral-400 |
+| `--u-bg-color-disabled` | neutral-50 | neutral-100 |
+| `--u-input-bg-color` | neutral-0 | neutral-200 |
+| `--u-panel-bg-color` | neutral-0 | neutral-200 |
+| `--u-overlay-bg-color` | `rgba(0,0,0,0.5)` | `rgba(0,0,0,0.7)` |
+| `--u-tooltip-bg-color` | `rgba(0,0,0,0.75)` | `rgba(255,255,255,0.85)` |
+
+#### Shadow
+
+| Variable | Light | Dark |
+|----------|-------|------|
+| `--u-shadow-color-weaker` | `rgba(0,0,0,0.04)` | `rgba(0,0,0,0.15)` |
+| `--u-shadow-color-weak` | `rgba(0,0,0,0.08)` | `rgba(0,0,0,0.25)` |
+| `--u-shadow-color-normal` | `rgba(0,0,0,0.12)` | `rgba(0,0,0,0.35)` |
+| `--u-shadow-color-strong` | `rgba(0,0,0,0.16)` | `rgba(0,0,0,0.45)` |
+| `--u-shadow-color-stronger` | `rgba(0,0,0,0.24)` | `rgba(0,0,0,0.60)` |
+
+#### Scrollbar
+
+| Variable | Light | Dark |
+|----------|-------|------|
+| `--u-scrollbar-color` | neutral-400 | neutral-500 |
+| `--u-scrollbar-color-hover` | neutral-500 | neutral-600 |
+| `--u-scrollbar-track-color` | `transparent` | `transparent` |
+
+### Typography
+
+| Variable | Value |
+|----------|-------|
+| `--u-font-base` | -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif |
+| `--u-font-mono` | ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Monaco, monospace |
+| `--u-font-serif` | 'Georgia', 'Times New Roman', Times, serif |
+| `--u-font-display` | 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif |
+| `--u-font-modern` | 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif |
+| `--u-font-rounded` | 'Nunito', 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif |
+
+### Color Palette
+
+The base color palettes (`neutral`, `blue`, `green`, `yellow`, `red`) range from `0` (lightest) to `1000` (darkest) in light mode, and are inverted for dark mode.
+
+```css
+--u-neutral-{0|50|100|200|300|400|500|600|700|800|900|1000}
+--u-blue-{0|100|200|300|400|500|600|700|800|900|1000}
+--u-green-{0|100|200|300|400|500|600|700|800|900|1000}
+--u-yellow-{0|100|200|300|400|500|600|700|800|900|1000}
+--u-red-{0|100|200|300|400|500|600|700|800|900|1000}
+```
+
+### Customizing Styles
+
+Override any `--u-*` variable on `:root` or on specific elements:
+
+```css
+/* Global override */
+:root {
+  --u-blue-600: #3B82F6;
+  --u-font-base: 'Pretendard', sans-serif;
+}
+
+/* Scoped override */
+u-button {
+  --u-bg-color: var(--my-brand-primary);
+  --u-txt-color: var(--my-brand-on-primary);
+}
+```
+
+### Integrating with External Design Systems
+
+Bridge `--u-*` variables with your design tokens:
+
+```css
+/* Tailwind CSS bridge */
+:root {
+  --u-blue-500: var(--color-blue-500);
+  --u-blue-600: var(--color-blue-600);
+  --u-neutral-0: var(--color-white);
+  --u-neutral-900: var(--color-gray-900);
+  --u-font-base: var(--font-sans);
+}
+
+/* Material Design bridge */
+:root {
+  --u-blue-600: var(--md-sys-color-primary);
+  --u-bg-color: var(--md-sys-color-surface);
+  --u-txt-color: var(--md-sys-color-on-surface);
+}
+```
+
+## Theming
+
+### Setup
+
+```typescript
+import { Theme } from '@iyulab/components';
+
+await Theme.init({
+  default: 'system',      // 'light' | 'dark' | 'system'
+  useBuiltIn: true,        // use built-in light/dark CSS (default: true)
+  store: {                 // persist theme preference
+    type: 'localStorage',
+    prefix: 'my-app',
+  },
+});
+```
+
+### Switching Themes
+
+```typescript
+Theme.set('dark');         // apply dark theme
+Theme.set('light');        // apply light theme
+Theme.set('system');       // follow OS preference
+const current = Theme.get(); // get current theme
+```
+
+### External Theme Toggle Integration
+
+When using an external dark mode toggle (e.g., Tailwind's `dark:` class), disable built-in styles and bridge the variables:
+
+```typescript
+// Disable built-in theme styles
+await Theme.init({ useBuiltIn: false });
+```
+
+```css
+/* Provide your own light/dark values */
+:root {
+  --u-bg-color: #ffffff;
+  --u-txt-color: #212121;
+}
+
+[data-theme="dark"] {
+  --u-bg-color: #121212;
+  --u-txt-color: #d4d4d4;
+}
+```
+
+## Core Dependencies
+
+- [lit](https://www.npmjs.com/package/lit) - Fast web components framework
+- [@floating-ui/dom](https://www.npmjs.com/package/@floating-ui/dom) - Positioning library for tooltips and popovers
+
+## License
+
+MIT © [iyulab](https://www.iyulab.com)

package/dist/assets/icons/arrow-down.svg.js

@@ -1,3 +1,3 @@
-const arrowDown = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path stroke=\"currentColor\" stroke-width=\"1.5\" d=\"M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1\"/>\n</svg>";
+const arrowDown = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n  <path stroke=\"currentColor\" stroke-width=\"1.5\" d=\"M8 1a.5.5 0 0 1 .5.5v11.793l3.146-3.147a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 0 1 .708-.708L7.5 13.293V1.5A.5.5 0 0 1 8 1\"/>\r\n</svg>";
 
 export { arrowDown as default };

package/dist/assets/icons/arrow-repeat.svg.js

@@ -1,3 +1,3 @@
-const arrowRepeat = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9\"/>\n  <path fill-rule=\"evenodd\" d=\"M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z\"/>\n</svg>";
+const arrowRepeat = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n  <path d=\"M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9\"/>\r\n  <path fill-rule=\"evenodd\" d=\"M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z\"/>\r\n</svg>";
 
 export { arrowRepeat as default };

package/dist/assets/icons/arrow-up.svg.js

@@ -1,3 +1,3 @@
-const arrowUp = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path stroke=\"currentColor\" stroke-width=\"1.5\" d=\"M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5\"/>\n</svg>";
+const arrowUp = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n  <path stroke=\"currentColor\" stroke-width=\"1.5\" d=\"M8 15a.5.5 0 0 0 .5-.5V2.707l3.146 3.147a.5.5 0 0 0 .708-.708l-4-4a.5.5 0 0 0-.708 0l-4 4a.5.5 0 1 0 .708.708L7.5 2.707V14.5a.5.5 0 0 0 .5.5\"/>\r\n</svg>";
 
 export { arrowUp as default };

package/dist/assets/icons/ban.svg.js

@@ -1,3 +1,3 @@
-const ban = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M15 8a6.97 6.97 0 0 0-1.71-4.584l-9.874 9.875A7 7 0 0 0 15 8M2.71 12.584l9.874-9.875a7 7 0 0 0-9.874 9.874ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0\"/>\n</svg>";
+const ban = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n  <path d=\"M15 8a6.97 6.97 0 0 0-1.71-4.584l-9.874 9.875A7 7 0 0 0 15 8M2.71 12.584l9.874-9.875a7 7 0 0 0-9.874 9.874ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0\"/>\r\n</svg>";
 
 export { ban as default };

package/dist/assets/icons/bell-fill.svg.js

@@ -1,3 +1,3 @@
-const bellFill = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2m.995-14.901a1 1 0 1 0-1.99 0A5 5 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901\"/>\n</svg>";
+const bellFill = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n  <path d=\"M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2m.995-14.901a1 1 0 1 0-1.99 0A5 5 0 0 0 3 6c0 1.098-.5 6-2 7h14c-1.5-1-2-5.902-2-7 0-2.42-1.72-4.44-4.005-4.901\"/>\r\n</svg>";
 
 export { bellFill as default };

package/dist/assets/icons/box-arrow-up-right.svg.js

@@ -1,3 +1,3 @@
-const boxArrowUpRight = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path fill-rule=\"evenodd\" d=\"M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5\"/>\n  <path fill-rule=\"evenodd\" d=\"M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z\"/>\n</svg>";
+const boxArrowUpRight = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n  <path fill-rule=\"evenodd\" d=\"M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5\"/>\r\n  <path fill-rule=\"evenodd\" d=\"M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0z\"/>\r\n</svg>";
 
 export { boxArrowUpRight as default };

package/dist/assets/icons/check-circle-fill.svg.js

@@ -1,3 +1,3 @@
-const checkCircleFill = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n    <path d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z\"/>\n</svg>";
+const checkCircleFill = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n    <path d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z\"/>\r\n</svg>";
 
 export { checkCircleFill as default };

package/dist/assets/icons/check-lg.svg.js

@@ -1,3 +1,3 @@
-const checkLg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z\"/>\n</svg>";
+const checkLg = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n  <path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z\"/>\r\n</svg>";
 
 export { checkLg as default };

package/dist/assets/icons/chevron-down.svg.js

@@ -1,3 +1,3 @@
-const chevronDown = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path fill-rule=\"evenodd\" d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708\"></path>\n</svg>";
+const chevronDown = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\r\n  <path fill-rule=\"evenodd\" d=\"M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708\"></path>\r\n</svg>";
 
 export { chevronDown as default };