@iyulab/components 0.1.10 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,57 @@
 # 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

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

@@ -0,0 +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>";
+
+export { arrowRepeat as default };

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

@@ -0,0 +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>";
+
+export { boxArrowUpRight as default };

package/dist/assets/icons/file-earmark.svg.js

@@ -0,0 +1,3 @@
+const fileEarmark = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5z\"/>\n</svg>";
+
+export { fileEarmark as default };

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

@@ -0,0 +1,3 @@
+const flag = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M14.778.085A.5.5 0 0 1 15 .5V8a.5.5 0 0 1-.314.464L14.5 8l.186.464-.003.001-.006.003-.023.009a12 12 0 0 1-.397.15c-.264.095-.631.223-1.047.35-.816.252-1.879.523-2.71.523-.847 0-1.548-.28-2.158-.525l-.028-.01C7.68 8.71 7.14 8.5 6.5 8.5c-.7 0-1.638.23-2.437.477A20 20 0 0 0 3 9.342V15.5a.5.5 0 0 1-1 0V.5a.5.5 0 0 1 1 0v.282c.226-.079.496-.17.79-.26C4.606.272 5.67 0 6.5 0c.84 0 1.524.277 2.121.519l.043.018C9.286.788 9.828 1 10.5 1c.7 0 1.638-.23 2.437-.477a20 20 0 0 0 1.349-.476l.019-.007.004-.002h.001M14 1.221c-.22.078-.48.167-.766.255-.81.252-1.872.523-2.734.523-.886 0-1.592-.286-2.203-.534l-.008-.003C7.662 1.21 7.139 1 6.5 1c-.669 0-1.606.229-2.415.478A21 21 0 0 0 3 1.845v6.433c.22-.078.48-.167.766-.255C4.576 7.77 5.638 7.5 6.5 7.5c.847 0 1.548.28 2.158.525l.028.01C9.32 8.29 9.86 8.5 10.5 8.5c.668 0 1.606-.229 2.415-.478A21 21 0 0 0 14 7.655V1.222z\"/>\n</svg>";
+
+export { flag as default };

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

@@ -0,0 +1,3 @@
+const globe = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m7.5-6.923c-.67.204-1.335.82-1.887 1.855A8 8 0 0 0 5.145 4H7.5zM4.09 4a9.3 9.3 0 0 1 .64-1.539 7 7 0 0 1 .597-.933A7.03 7.03 0 0 0 2.255 4zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a7 7 0 0 0-.656 2.5zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5zM8.5 5v2.5h2.99a12.5 12.5 0 0 0-.337-2.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5zM5.145 12q.208.58.468 1.068c.552 1.035 1.218 1.65 1.887 1.855V12zm.182 2.472a7 7 0 0 1-.597-.933A9.3 9.3 0 0 1 4.09 12H2.255a7 7 0 0 0 3.072 2.472M3.82 11a13.7 13.7 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5zm6.853 3.472A7 7 0 0 0 13.745 12H11.91a9.3 9.3 0 0 1-.64 1.539 7 7 0 0 1-.597.933M8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855q.26-.487.468-1.068zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.7 13.7 0 0 1-.312 2.5m2.802-3.5a7 7 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7 7 0 0 0-3.072-2.472c.218.284.418.598.597.933M10.855 4a8 8 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4z\"/>\n</svg>";
+
+export { globe as default };

package/dist/assets/icons/hand-thumbs-down-fill.svg.js

@@ -0,0 +1,3 @@
+const handThumbsDownFill = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M6.956 14.534c.065.936.952 1.659 1.908 1.42l.261-.065a1.38 1.38 0 0 0 1.012-.965c.22-.816.533-2.512.062-4.51q.205.03.443.051c.713.065 1.669.071 2.516-.211.518-.173.994-.68 1.2-1.272a1.9 1.9 0 0 0-.234-1.734c.058-.118.103-.242.138-.362.077-.27.113-.568.113-.856 0-.29-.036-.586-.113-.857a2 2 0 0 0-.16-.403c.169-.387.107-.82-.003-1.149a3.2 3.2 0 0 0-.488-.9c.054-.153.076-.313.076-.465a1.86 1.86 0 0 0-.253-.912C13.1.757 12.437.28 11.5.28H8c-.605 0-1.07.08-1.466.217a4.8 4.8 0 0 0-.97.485l-.048.029c-.504.308-.999.61-2.068.723C2.682 1.815 2 2.434 2 3.279v4c0 .851.685 1.433 1.357 1.616.849.232 1.574.787 2.132 1.41.56.626.914 1.28 1.039 1.638.199.575.356 1.54.428 2.591\"/>\n</svg>";
+
+export { handThumbsDownFill as default };

package/dist/assets/icons/hand-thumbs-down.svg.js

@@ -0,0 +1,3 @@
+const handThumbsDown = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M8.864 15.674c-.956.24-1.843-.484-1.908-1.42-.072-1.05-.23-2.015-.428-2.59-.125-.36-.479-1.012-1.04-1.638-.557-.624-1.282-1.179-2.131-1.41C2.685 8.432 2 7.85 2 7V3c0-.845.682-1.464 1.448-1.546 1.07-.113 1.564-.415 2.068-.723l.048-.029c.272-.166.578-.349.97-.484C6.931.08 7.395 0 8 0h3.5c.937 0 1.599.478 1.934 1.064.164.287.254.607.254.913 0 .152-.023.312-.077.464.201.262.38.577.488.9.11.33.172.762.004 1.15.069.13.12.268.159.403.077.27.113.567.113.856s-.036.586-.113.856c-.035.12-.08.244-.138.363.394.571.418 1.2.234 1.733-.206.592-.682 1.1-1.2 1.272-.847.283-1.803.276-2.516.211a10 10 0 0 1-.443-.05 9.36 9.36 0 0 1-.062 4.51c-.138.508-.55.848-1.012.964zM11.5 1H8c-.51 0-.863.068-1.14.163-.281.097-.506.229-.776.393l-.04.025c-.555.338-1.198.73-2.49.868-.333.035-.554.29-.554.55V7c0 .255.226.543.62.65 1.095.3 1.977.997 2.614 1.709.635.71 1.064 1.475 1.238 1.977.243.7.407 1.768.482 2.85.025.362.36.595.667.518l.262-.065c.16-.04.258-.144.288-.255a8.34 8.34 0 0 0-.145-4.726.5.5 0 0 1 .595-.643h.003l.014.004.058.013a9 9 0 0 0 1.036.157c.663.06 1.457.054 2.11-.163.175-.059.45-.301.57-.651.107-.308.087-.67-.266-1.021L12.793 7l.353-.354c.043-.042.105-.14.154-.315.048-.167.075-.37.075-.581s-.027-.414-.075-.581c-.05-.174-.111-.273-.154-.315l-.353-.354.353-.354c.047-.047.109-.176.005-.488a2.2 2.2 0 0 0-.505-.804l-.353-.354.353-.354c.006-.005.041-.05.041-.17a.9.9 0 0 0-.121-.415C12.4 1.272 12.063 1 11.5 1\"/>\n</svg>";
+
+export { handThumbsDown as default };

package/dist/assets/icons/hand-thumbs-up-fill.svg.js

@@ -0,0 +1,3 @@
+const handThumbsUpFill = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M6.956 1.745C7.021.81 7.908.087 8.864.325l.261.066c.463.116.874.456 1.012.965.22.816.533 2.511.062 4.51a10 10 0 0 1 .443-.051c.713-.065 1.669-.072 2.516.21.518.173.994.681 1.2 1.273.184.532.16 1.162-.234 1.733q.086.18.138.363c.077.27.113.567.113.856s-.036.586-.113.856c-.039.135-.09.273-.16.404.169.387.107.819-.003 1.148a3.2 3.2 0 0 1-.488.901c.054.152.076.312.076.465 0 .305-.089.625-.253.912C13.1 15.522 12.437 16 11.5 16H8c-.605 0-1.07-.081-1.466-.218a4.8 4.8 0 0 1-.97-.484l-.048-.03c-.504-.307-.999-.609-2.068-.722C2.682 14.464 2 13.846 2 13V9c0-.85.685-1.432 1.357-1.615.849-.232 1.574-.787 2.132-1.41.56-.627.914-1.28 1.039-1.639.199-.575.356-1.539.428-2.59z\"/>\n</svg>";
+
+export { handThumbsUpFill as default };

package/dist/assets/icons/hand-thumbs-up.svg.js

@@ -0,0 +1,3 @@
+const handThumbsUp = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M8.864.046C7.908-.193 7.02.53 6.956 1.466c-.072 1.051-.23 2.016-.428 2.59-.125.36-.479 1.013-1.04 1.639-.557.623-1.282 1.178-2.131 1.41C2.685 7.288 2 7.87 2 8.72v4.001c0 .845.682 1.464 1.448 1.545 1.07.114 1.564.415 2.068.723l.048.03c.272.165.578.348.97.484.397.136.861.217 1.466.217h3.5c.937 0 1.599-.477 1.934-1.064a1.86 1.86 0 0 0 .254-.912c0-.152-.023-.312-.077-.464.201-.263.38-.578.488-.901.11-.33.172-.762.004-1.149.069-.13.12-.269.159-.403.077-.27.113-.568.113-.857 0-.288-.036-.585-.113-.856a2 2 0 0 0-.138-.362 1.9 1.9 0 0 0 .234-1.734c-.206-.592-.682-1.1-1.2-1.272-.847-.282-1.803-.276-2.516-.211a10 10 0 0 0-.443.05 9.4 9.4 0 0 0-.062-4.509A1.38 1.38 0 0 0 9.125.111zM11.5 14.721H8c-.51 0-.863-.069-1.14-.164-.281-.097-.506-.228-.776-.393l-.04-.024c-.555-.339-1.198-.731-2.49-.868-.333-.036-.554-.29-.554-.55V8.72c0-.254.226-.543.62-.65 1.095-.3 1.977-.996 2.614-1.708.635-.71 1.064-1.475 1.238-1.978.243-.7.407-1.768.482-2.85.025-.362.36-.594.667-.518l.262.066c.16.04.258.143.288.255a8.34 8.34 0 0 1-.145 4.725.5.5 0 0 0 .595.644l.003-.001.014-.003.058-.014a9 9 0 0 1 1.036-.157c.663-.06 1.457-.054 2.11.164.175.058.45.3.57.65.107.308.087.67-.266 1.022l-.353.353.353.354c.043.043.105.141.154.315.048.167.075.37.075.581 0 .212-.027.414-.075.582-.05.174-.111.272-.154.315l-.353.353.353.354c.047.047.109.177.005.488a2.2 2.2 0 0 1-.505.805l-.353.353.353.354c.006.005.041.05.041.17a.9.9 0 0 1-.121.416c-.165.288-.503.56-1.066.56z\"/>\n</svg>";
+
+export { handThumbsUp as default };

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

@@ -0,0 +1,3 @@
+const share = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M13.5 1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.5 2.5 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5m-8.5 4a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3m11 5.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3\"/>\n</svg>";
+
+export { share as default };

package/dist/assets/icons/stop-circle.svg.js

@@ -0,0 +1,3 @@
+const stopCircle = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16\"/>\n  <path d=\"M5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5z\"/>\n</svg>";
+
+export { stopCircle as default };

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

@@ -0,0 +1,3 @@
+const tools = "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\">\n  <path d=\"M1 0 0 1l2.2 3.081a1 1 0 0 0 .815.419h.07a1 1 0 0 1 .708.293l2.675 2.675-2.617 2.654A3.003 3.003 0 0 0 0 13a3 3 0 1 0 5.878-.851l2.654-2.617.968.968-.305.914a1 1 0 0 0 .242 1.023l3.27 3.27a.997.997 0 0 0 1.414 0l1.586-1.586a.997.997 0 0 0 0-1.414l-3.27-3.27a1 1 0 0 0-1.023-.242L10.5 9.5l-.96-.96 2.68-2.643A3.005 3.005 0 0 0 16 3q0-.405-.102-.777l-2.14 2.141L12 4l-.364-1.757L13.777.102a3 3 0 0 0-3.675 3.68L7.462 6.46 4.793 3.793a1 1 0 0 1-.293-.707v-.071a1 1 0 0 0-.419-.814zm9.646 10.646a.5.5 0 0 1 .708 0l2.914 2.915a.5.5 0 0 1-.707.707l-2.915-2.914a.5.5 0 0 1 0-.708M3 11l.471.242.529.026.287.445.445.287.026.529L5 13l-.242.471-.026.529-.445.287-.287.445-.529.026L3 15l-.471-.242L2 14.732l-.287-.445L1.268 14l-.026-.529L1 13l.242-.471.026-.529.445-.287.287-.445.529-.026z\"/>\n</svg>";
+
+export { tools as default };

package/dist/components/FloatingElement.d.ts

@@ -18,9 +18,13 @@ export declare class FloatingElement extends BaseElement {
     private rafId;
     private cleanup;
     /**
-     * 연결될 대상 엘리먼트 입니다. 지정하지 않으면 부모 엘리먼트를 사용합니다.
+     * 엘리먼트가 떠 있는 동안의 대상 엘리먼트 입니다.
      */
-    anchor?: HTMLElement;
+    target?: HTMLElement | VirtualElement;
+    /**
+     * 연결될 대상 엘리먼트 입니다. 지정하지 않으면 부모 엘리먼트가 포함됩니다.
+     */
+    anchors?: HTMLElement[];
     /**
      * 앵커 엘리먼트를 찾기 위한 CSS 선택자입니다. querySelector를 사용하여 DOM에서 대상을 검색합니다.
      *
@@ -72,13 +76,17 @@ export declare class FloatingElement extends BaseElement {
     disconnectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues): void;
     protected updated(changedProperties: PropertyValues): void;
+    /**
+     * for 속성에 따라 element를 기준으로 앵커 엘리먼트를 탐색하여 anchors로 설정합니다.
+     */
+    scan(element: Element): void;
     /**
      * 현재 엘리먼트를 표시합니다.
      *
-     * @param anchor - 위치 계산에 사용할 앵커 엘리먼트입니다. 지정하지 않으면 this.anchor 가 사용됩니다.
+     * @param target - 위치 계산에 사용할 타겟 엘리먼트입니다.
      * @param auto - 표시 후 자동 위치 업데이트 활성화 여부입니다. 기본값은 true 입니다.
      */
-    show(anchor?: Element | VirtualElement, auto?: boolean): Promise<void>;
+    show(target: Element | VirtualElement, auto?: boolean): Promise<void>;
     /**
      * 현재 엘리먼트를 숨깁니다.
      */
@@ -86,7 +94,7 @@ export declare class FloatingElement extends BaseElement {
     /**
      * `floating-ui` 를 이용하여 위치를 계산하고 style 을 적용합니다.
      *
-     * @param target - 위치 계산에 사용할 앵커 엘리먼트입니다.
+     * @param target - 위치 계산에 사용할 타겟 엘리먼트입니다.
      */
     protected reposition(target: Element | VirtualElement): Promise<void>;
     /** 표시 상태 변경 이벤트를 발생시킵니다. */

package/dist/components/FloatingElement.js

@@ -1,6 +1,6 @@
 import { state, property } from 'lit/decorators.js';
 import { autoUpdate, computePosition, offset, shift, flip, autoPlacement } from '@floating-ui/dom';
-import { getParentElement, querySelectorWithin } from '../internals/node-helpers.js';
+import { getParentElement, querySelectorAllWithin } from '../utilities/elements.js';
 import { BaseElement } from './BaseElement.js';
 import { styles } from './FloatingElement.styles.js';
 
@@ -36,7 +36,10 @@ class FloatingElement extends BaseElement {
   }
   connectedCallback() {
     super.connectedCallback();
-    this.anchor ||= getParentElement(this);
+    if (!this.anchors || this.anchors.length === 0) {
+      const parent = getParentElement(this);
+      this.anchors = parent ? [parent] : [];
+    }
   }
   disconnectedCallback() {
     if (this.rafId !== null) cancelAnimationFrame(this.rafId);
@@ -48,35 +51,45 @@ class FloatingElement extends BaseElement {
   willUpdate(changedProperties) {
     super.willUpdate(changedProperties);
     if (changedProperties.has("for")) {
-      const founded = this.for ? querySelectorWithin(this, this.for) : void 0;
-      this.anchor = founded || void 0;
+      this.scan(this);
     }
   }
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has("visible")) {
-      this.toggleAttribute("inert", !this.visible);
       this.toggleAttribute("aria-hidden", !this.visible);
+      this.toggleAttribute("inert", !this.visible);
       this.updateVisibleState(this.visible);
     }
   }
+  /**
+   * for 속성에 따라 element를 기준으로 앵커 엘리먼트를 탐색하여 anchors로 설정합니다.
+   */
+  scan(element) {
+    if (this.for) {
+      const anchors = querySelectorAllWithin(element, this.for);
+      this.anchors = Array.from(anchors);
+    } else {
+      const parent = getParentElement(this);
+      this.anchors = parent ? [parent] : [];
+    }
+  }
   /** 
    * 현재 엘리먼트를 표시합니다.
    * 
-   * @param anchor - 위치 계산에 사용할 앵커 엘리먼트입니다. 지정하지 않으면 this.anchor 가 사용됩니다.
+   * @param target - 위치 계산에 사용할 타겟 엘리먼트입니다.
    * @param auto - 표시 후 자동 위치 업데이트 활성화 여부입니다. 기본값은 true 입니다.
    */
-  async show(anchor, auto = true) {
-    anchor ||= this.anchor;
-    if (!anchor) return;
+  async show(target, auto = true) {
     await this.updateComplete;
-    await this.reposition(anchor);
+    await this.reposition(target);
     if (auto === true) {
-      this.cleanup = autoUpdate(anchor, this, () => {
-        this.reposition(anchor);
+      this.cleanup = autoUpdate(target, this, () => {
+        this.reposition(target);
       });
     }
     this.scheduleVisible(true);
+    this.target = target;
   }
   /** 
    * 현재 엘리먼트를 숨깁니다.
@@ -86,11 +99,12 @@ class FloatingElement extends BaseElement {
     if (this.cleanup !== null) this.cleanup();
     this.cleanup = null;
     this.scheduleVisible(false);
+    this.target = void 0;
   }
   /** 
    * `floating-ui` 를 이용하여 위치를 계산하고 style 을 적용합니다. 
    * 
-   * @param target - 위치 계산에 사용할 앵커 엘리먼트입니다.
+   * @param target - 위치 계산에 사용할 타겟 엘리먼트입니다.
    */
   async reposition(target) {
     const position = await computePosition(target, this, {
@@ -152,9 +166,12 @@ class FloatingElement extends BaseElement {
 }
 __decorateClass([
   state()
-], FloatingElement.prototype, "anchor");
+], FloatingElement.prototype, "target");
 __decorateClass([
-  property({ type: String })
+  state()
+], FloatingElement.prototype, "anchors");
+__decorateClass([
+  property({ type: String, reflect: true })
 ], FloatingElement.prototype, "for");
 __decorateClass([
   property({ type: Boolean, reflect: true })

package/dist/components/FloatingElement.styles.js

@@ -7,15 +7,11 @@ const styles = css`
     top: 0;
     left: 0;
     width: max-content;
-
     opacity: 0;
-    pointer-events: none;
   }
   :host([visible]) {
     opacity: 1;
-    pointer-events: auto;
   }
-
   :host([strategy="absolute"]) {
     position: absolute;
   }

package/dist/components/button/UButton.component.d.ts

@@ -1,4 +1,5 @@
 import { BaseElement } from '../BaseElement.js';
+export type ButtonVariant = "default" | "borderless" | "link";
 /**
  * Button 컴포넌트는 클릭 가능한 버튼을 나타내며, 로딩 상태와 툴팁 기능을 지원합니다.
  * @slot - 버튼 내부에 표시할 콘텐츠를 삽입합니다.
@@ -8,9 +9,15 @@ import { BaseElement } from '../BaseElement.js';
 export declare class UButton extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
+    /** 버튼의 스타일 변형을 설정합니다. */
+    variant: ButtonVariant;
     /** 버튼이 비활성화 상태인지 여부를 설정합니다. 비활성화된 버튼은 클릭할 수 없습니다. */
     disabled: boolean;
     /** 버튼이 로딩 상태인지 여부를 설정합니다. 로딩 중에는 버튼이 비활성화되고 스피너가 표시됩니다. */
     loading: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): import('lit-html').TemplateResult<1>;
+    /** 클릭 이벤트 컨트롤 */
+    private handleClick;
 }

package/dist/components/button/UButton.component.js

@@ -16,8 +16,16 @@ var __decorateClass = (decorators, target, key, kind) => {
 class UButton extends BaseElement {
   constructor() {
     super(...arguments);
+    this.variant = "default";
     this.disabled = false;
     this.loading = false;
+    /** 클릭 이벤트 컨트롤 */
+    this.handleClick = (e) => {
+      if (this.disabled || this.loading) {
+        e.preventDefault();
+        e.stopImmediatePropagation();
+      }
+    };
   }
   static {
     this.styles = [super.styles, styles];
@@ -27,6 +35,14 @@ class UButton extends BaseElement {
       "u-spinner": USpinner
     };
   }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.handleClick);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this.handleClick);
+    super.disconnectedCallback();
+  }
   render() {
     return html`
       <button part="base" 
@@ -36,13 +52,16 @@ class UButton extends BaseElement {
         <slot name="suffix"></slot>
       </button>
       
-      <div class="overlay" part="overlay"
+      <div class="mask" part="mask"
         ?hidden=${!this.loading}>
         <u-spinner></u-spinner>
       </div>
     `;
   }
 }
+__decorateClass([
+  property({ type: String, reflect: true })
+], UButton.prototype, "variant");
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], UButton.prototype, "disabled");

package/dist/components/button/UButton.styles.js

@@ -8,7 +8,7 @@ const styles = css`
     font-size: 14px;
     font-weight: 500;
     line-height: 1.5;
-    padding: 0.5em 1em;
+    padding: 0.5em;
     border: 1px solid var(--u-border-color);
     border-radius: 6px;
     background-color: var(--u-bg-color);
@@ -18,19 +18,57 @@ const styles = css`
     user-select: none;
     cursor: pointer;
   }
-  :host(:hover) {
-    color: var(--u-txt-color-hover);
+
+  /* Style variants */
+  :host([variant="default"]) {
+    color: var(--u-txt-color);
+    border-color: var(--u-border-color);
+    background-color: var(--u-bg-color);
+  }
+  :host([variant="default"]:hover) {
     background-color: var(--u-bg-color-hover);
   }
-  :host(:active) {
-    color: var(--u-txt-color-active);
+  :host([variant="default"]:active) {
+    background-color: var(--u-bg-color-active);
+  }
+
+  :host([variant="borderless"]) {
+    color: var(--u-txt-color);
+    border-color: transparent;
+    background-color: transparent;
+  }
+  :host([variant="borderless"]:hover) {
+    background-color: var(--u-bg-color-hover);
+  }
+  :host([variant="borderless"]:active) {
     background-color: var(--u-bg-color-active);
+  }
+
+  :host([variant="link"]) {
+    color: var(--u-txt-color);
+    border-color: transparent;
+    background-color: transparent;
+  }
+  :host([variant="link"]:hover) {
+    color: var(--u-blue-500, #3b82f6);
+  }
+  :host([variant="link"]:active) {
+    color: var(--u-blue-600, #2563eb);
+  }
+
+  :host(:active) {
     transform: translateY(1px);
   }
-  :host([loading]),
+
   :host([disabled]) {
     color: var(--u-txt-color-disabled);
-    pointer-events: none;
+    cursor: not-allowed;
+  }
+  :host([loading]) {
+    cursor: wait;
+  }
+  :host([loading]) button {
+    visibility: hidden;
   }
 
   button {
@@ -52,6 +90,10 @@ const styles = css`
     display: inline-flex;
     justify-content: center;
   }
+  ::slotted(*) {
+    color: inherit;
+    font-size: inherit;
+  }
   /* 슬롯에 내용이 있을 때 gap 적용 */
   ::slotted([slot="prefix"]) {
     margin-right: 0.5em;
@@ -60,7 +102,7 @@ const styles = css`
     margin-left: 0.5em;
   }
 
-  .overlay {
+  .mask {
     position: absolute;
     z-index: 100;
     top: 0;
@@ -76,6 +118,7 @@ const styles = css`
     font-size: inherit;
     border-radius: inherit;
     background-color: inherit;
+    pointer-events: none;
   }
 `;
 

package/dist/components/dialog/UDialog.component.d.ts

@@ -7,6 +7,8 @@ import { ModalElement } from '../ModalElement.js';
 export declare class UDialog extends ModalElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
+    /** 헤드리스 모드 여부 */
+    headless: boolean;
     /** 타이틀 텍스트 */
     heading: string;
     render(): import('lit-html').TemplateResult<1>;

package/dist/components/dialog/UDialog.component.js

@@ -1,7 +1,8 @@
 import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { ModalElement } from '../ModalElement.js';
-import { UIconButton } from '../icon-button/UIconButton.component.js';
+import { UIcon } from '../icon/UIcon.component.js';
+import { UButton } from '../button/UButton.component.js';
 import { styles } from './UDialog.styles.js';
 
 var __defProp = Object.defineProperty;
@@ -16,6 +17,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 class UDialog extends ModalElement {
   constructor() {
     super(...arguments);
+    this.headless = false;
     this.heading = "";
   }
   static {
@@ -23,22 +25,22 @@ class UDialog extends ModalElement {
   }
   static {
     this.dependencies = {
-      "u-icon-button": UIconButton
+      "u-icon": UIcon,
+      "u-button": UButton
     };
   }
   render() {
     return html`
       <div class="dialog" part="base" ?open=${this.open}>
-        <div class="header" part="header" ?hidden=${!this.heading}>
+        <div class="header" part="header" ?hidden=${this.headless}>
           <span class="title" part="title">
             ${this.heading}
           </span>
-          <u-icon-button class="close-btn" part="close-btn"
-            borderless  
-            lib="internal"
-            name="x-lg"
-            @click=${() => this.hide()}
-          ></u-icon-button>
+          <u-button class="close-btn" part="close-btn"
+            variant="link"
+            @click=${() => this.hide()}>
+            <u-icon lib="internal" name="x-lg"></u-icon>
+          </u-button>
         </div>
 
         <div class="content" part="content" scrollable>
@@ -58,6 +60,9 @@ class UDialog extends ModalElement {
     }, 500);
   }
 }
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UDialog.prototype, "headless");
 __decorateClass([
   property({ type: String })
 ], UDialog.prototype, "heading");

package/dist/components/divider/UDivider.component.d.ts

@@ -1,25 +1,10 @@
-import { nothing } from 'lit';
 import { BaseElement } from '../BaseElement.js';
 /**
- * Divider 컴포넌트는 엘리먼트 사이에 움직임이 가능한 구분선을 제공합니다.
+ * Divider 컴포넌트는 엘리먼트 사이에 구분선을 제공합니다.
  */
 export declare class UDivider extends BaseElement {
     static styles: import('lit').CSSResultGroup[];
     static dependencies: Record<string, typeof BaseElement>;
-    /** 마지막 마우스 포인터 위치를 저장합니다. */
-    private prevPointerPosition;
-    /** 분할선이 움직이는지 여부를 나타냅니다. */
-    moving: boolean;
-    /** 분할 방향을 설정합니다. */
-    orientation: 'horizontal' | 'vertical';
-    /** 분할선을 움직일 수 있는지 여부를 설정합니다. */
-    movable: boolean;
-    disconnectedCallback(): void;
-    render(): typeof nothing | import('lit-html').TemplateResult<1>;
-    /** 마우스 다운 이벤트 핸들러 */
-    private handleMousedown;
-    /** 마우스 무브 이벤트 핸들러 */
-    private handleMousemove;
-    /** 마우스 업 이벤트 핸들러 */
-    private handleMouseup;
+    /** 수직 방향 여부를 설정합니다. (기본값: 수평) */
+    vertical: boolean;
 }

package/dist/components/divider/UDivider.component.js

@@ -1,5 +1,4 @@
-import { html, nothing } from 'lit';
-import { state, property } from 'lit/decorators.js';
+import { property } from 'lit/decorators.js';
 import { BaseElement } from '../BaseElement.js';
 import { styles } from './UDivider.styles.js';
 
@@ -15,41 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
 class UDivider extends BaseElement {
   constructor() {
     super(...arguments);
-    /** 마지막 마우스 포인터 위치를 저장합니다. */
-    this.prevPointerPosition = 0;
-    this.moving = false;
-    this.orientation = "horizontal";
-    this.movable = false;
-    /** 마우스 다운 이벤트 핸들러 */
-    this.handleMousedown = (e) => {
-      e.preventDefault();
-      this.moving = true;
-      this.prevPointerPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
-      this.emit("u-movestart");
-      document.addEventListener("mousemove", this.handleMousemove);
-      document.addEventListener("mouseup", this.handleMouseup);
-      document.body.style.userSelect = "none";
-      document.body.style.cursor = this.orientation === "horizontal" ? "col-resize" : "row-resize";
-    };
-    /** 마우스 무브 이벤트 핸들러 */
-    this.handleMousemove = (e) => {
-      if (!this.moving) return;
-      e.preventDefault();
-      const currentPointerPosition = this.orientation === "horizontal" ? e.clientX : e.clientY;
-      const delta = currentPointerPosition - this.prevPointerPosition;
-      this.emit("u-move", { delta });
-      this.prevPointerPosition = currentPointerPosition;
-    };
-    /** 마우스 업 이벤트 핸들러 */
-    this.handleMouseup = (_) => {
-      if (!this.moving) return;
-      this.moving = false;
-      this.emit("u-moveend");
-      document.removeEventListener("mousemove", this.handleMousemove);
-      document.removeEventListener("mouseup", this.handleMouseup);
-      document.body.style.userSelect = "";
-      document.body.style.cursor = "";
-    };
+    this.vertical = false;
   }
   static {
     this.styles = [super.styles, styles];
@@ -57,33 +22,9 @@ class UDivider extends BaseElement {
   static {
     this.dependencies = {};
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    document.removeEventListener("mousemove", this.handleMousemove);
-    document.removeEventListener("mouseup", this.handleMouseup);
-  }
-  render() {
-    if (this.movable) {
-      return html`
-        <div class="handler" part="handler"
-          ?moving=${this.moving}
-          orientation=${this.orientation}
-          @mousedown=${this.handleMousedown}
-        ></div>
-      `;
-    } else {
-      return nothing;
-    }
-  }
 }
-__decorateClass([
-  state()
-], UDivider.prototype, "moving");
-__decorateClass([
-  property({ type: String, reflect: true })
-], UDivider.prototype, "orientation");
 __decorateClass([
   property({ type: Boolean, reflect: true })
-], UDivider.prototype, "movable");
+], UDivider.prototype, "vertical");
 
 export { UDivider };