@ncds/ui-admin 1.8.4 → 1.8.6

package/dist/cjs/src/components/overlays/tooltip/Tooltip.js

@@ -77,6 +77,42 @@ const computePanelCoords = (prefer, anchor, panel) => {
     calculatedPosition
   };
 };
+const buildPanelStyle = (disablePortal, coords, visible, zIndex) => {
+  const opacity = visible ? 1 : 0;
+  if (disablePortal) return {
+    opacity
+  };
+  return {
+    top: `${coords.top}px`,
+    left: `${coords.left}px`,
+    opacity,
+    ...(zIndex && {
+      zIndex
+    })
+  };
+};
+const renderIcon = (iconStyle, iconType, iconSize, iconColor) => {
+  if (iconStyle === 'help-circle') {
+    return iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
+      width: iconSize,
+      height: iconSize,
+      color: iconColor
+    }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircleFill, {
+      width: iconSize,
+      height: iconSize,
+      color: iconColor
+    });
+  }
+  return iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.AlertCircle, {
+    width: iconSize,
+    height: iconSize,
+    color: iconColor
+  }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.AlertCircleFill, {
+    width: iconSize,
+    height: iconSize,
+    color: iconColor
+  });
+};
 const Tooltip = _ref => {
   let {
     tooltipType = 'white',
@@ -90,7 +126,9 @@ const Tooltip = _ref => {
     iconColor = 'var(--gray-300)',
     iconStyle = 'help-circle',
     className,
-    zIndex
+    zIndex,
+    forceVisible,
+    disablePortal = false
   } = _ref;
   const iconSize = size === 'sm' ? ICON_SIZE_SM : ICON_SIZE_DEFAULT;
   const anchorRef = (0, _react.useRef)(null);
@@ -104,6 +142,7 @@ const Tooltip = _ref => {
   const [calculatedPosition, setCalculatedPosition] = (0, _react.useState)(position === 'auto' ? 'bottom' : position);
   const [isVisible, setIsVisible] = (0, _react.useState)(false);
   const [isManuallyClose, setIsManuallyClose] = (0, _react.useState)(false);
+  const effectiveVisible = forceVisible ?? isVisible;
   (0, _react.useEffect)(() => {
     setMounted(true);
     return () => {
@@ -114,7 +153,7 @@ const Tooltip = _ref => {
     };
   }, []);
   const updatePosition = (0, _react.useCallback)(() => {
-    if (!anchorRef.current || !panelRef.current) return;
+    if (disablePortal || !anchorRef.current || !panelRef.current) return;
     const anchor = anchorRef.current.getBoundingClientRect();
     const panel = panelRef.current.getBoundingClientRect();
     const next = computePanelCoords(position, anchor, panel);
@@ -123,9 +162,9 @@ const Tooltip = _ref => {
       left: next.left
     });
     setCalculatedPosition(next.calculatedPosition);
-  }, [position]);
+  }, [position, disablePortal]);
   (0, _react.useEffect)(() => {
-    if (!isVisible) return;
+    if (!effectiveVisible || disablePortal) return;
     updatePosition();
     window.addEventListener('resize', updatePosition, {
       passive: true
@@ -140,13 +179,10 @@ const Tooltip = _ref => {
         capture: true
       });
     };
-  }, [isVisible, updatePosition]);
+  }, [effectiveVisible, updatePosition, disablePortal]);
   const handleMouseEnter = (0, _react.useCallback)(() => {
     if (isManuallyClose) return;
-    // opacity 전환 전에 좌표 확정 (ref 가드는 updatePosition 내부)
     updatePosition();
-    // 웹폰트 로드·max-content 재계산 등 비동기 layout 안정화 후 한 번 더 보정
-    // 빠른 hover in/out 시 이전 프레임 요청은 취소해 중복/unmount 후 실행 방지
     if (rafIdRef.current !== null) cancelAnimationFrame(rafIdRef.current);
     rafIdRef.current = requestAnimationFrame(() => {
       rafIdRef.current = null;
@@ -170,18 +206,13 @@ const Tooltip = _ref => {
     'ncua-tooltip--stroke': iconType === 'stroke',
     'ncua-tooltip--auto': position === 'auto'
   }, className), [size, type, hideArrow, iconType, position, className]);
-  const panelClassName = (0, _react.useMemo)(() => (0, _classnames.default)('ncua-tooltip-panel', 'ncua-tooltip__bg', `ncua-tooltip__bg--${tooltipType}`, `ncua-tooltip__bg--${finalPosition}`, {
-    'ncua-tooltip__bg--visible': isVisible,
-    'ncua-tooltip__bg--force-hidden': isManuallyClose
-  }), [tooltipType, finalPosition, isVisible, isManuallyClose]);
-  const panelStyle = {
-    top: `${coords.top}px`,
-    left: `${coords.left}px`,
-    opacity: isVisible ? 1 : 0,
-    ...(zIndex && {
-      zIndex
-    })
-  };
+  const panelClassName = (0, _react.useMemo)(() => (0, _classnames.default)({
+    'ncua-tooltip-panel': !disablePortal
+  }, 'ncua-tooltip__bg', `ncua-tooltip__bg--${tooltipType}`, `ncua-tooltip__bg--${finalPosition}`, {
+    'ncua-tooltip__bg--visible': effectiveVisible,
+    'ncua-tooltip__bg--force-hidden': isManuallyClose && !forceVisible
+  }), [tooltipType, finalPosition, effectiveVisible, isManuallyClose, forceVisible, disablePortal]);
+  const panelStyle = buildPanelStyle(disablePortal, coords, effectiveVisible, zIndex);
   const portalTarget = mounted ? resolvePortalTarget() : null;
   const panel = (0, _jsxRuntime.jsxs)("span", {
     ref: panelRef,
@@ -201,30 +232,12 @@ const Tooltip = _ref => {
       "aria-label": "\uD234\uD301 \uB2EB\uAE30"
     })]
   });
-  return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [(0, _jsxRuntime.jsxs)("span", {
-      ref: anchorRef,
-      className: tooltipClassName,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      children: [iconStyle === 'help-circle' && (iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircle, {
-        width: iconSize,
-        height: iconSize,
-        color: iconColor
-      }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.HelpCircleFill, {
-        width: iconSize,
-        height: iconSize,
-        color: iconColor
-      })), iconStyle === 'alert-circle' && (iconType === 'stroke' ? (0, _jsxRuntime.jsx)(_uiAdminIcon.AlertCircle, {
-        width: iconSize,
-        height: iconSize,
-        color: iconColor
-      }) : (0, _jsxRuntime.jsx)(_uiAdminIcon.AlertCircleFill, {
-        width: iconSize,
-        height: iconSize,
-        color: iconColor
-      }))]
-    }), portalTarget && /*#__PURE__*/(0, _reactDom.createPortal)(panel, portalTarget)]
+  return (0, _jsxRuntime.jsxs)("span", {
+    ref: anchorRef,
+    className: tooltipClassName,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    children: [renderIcon(iconStyle, iconType, iconSize, iconColor), disablePortal ? panel : portalTarget && /*#__PURE__*/(0, _reactDom.createPortal)(panel, portalTarget)]
   });
 };
 exports.Tooltip = Tooltip;

package/dist/cjs/src/components/select-dropdown/SelectDropdown.js

@@ -27,6 +27,7 @@ const SelectDropdown = exports.SelectDropdown = /*#__PURE__*/(0, _react.forwardR
     multiple = false,
     showFooterButtons = false,
     selectAllButtonText = '전체 선택',
+    showSelectAllAction = true,
     onSelectAll,
     onEdit,
     onComplete,
@@ -92,7 +93,7 @@ const SelectDropdown = exports.SelectDropdown = /*#__PURE__*/(0, _react.forwardR
         className: "ncua-select-dropdown__footer-buttons",
         children: [(0, _jsxRuntime.jsx)("div", {
           className: "ncua-select-dropdown__footer-left",
-          children: multiple && (0, _jsxRuntime.jsx)(_button.Button, {
+          children: multiple && showSelectAllAction && (0, _jsxRuntime.jsx)(_button.Button, {
             label: selectAllButtonText,
             hierarchy: "text",
             size: "xs",

package/dist/cjs/src/contexts/FloatingContext.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFloatingContext = exports.FloatingProvider = void 0;
+var _react = require("react");
+const FloatingContext = /*#__PURE__*/(0, _react.createContext)(null);
+const FloatingProvider = exports.FloatingProvider = FloatingContext.Provider;
+const useFloatingContext = () => (0, _react.useContext)(FloatingContext);
+exports.useFloatingContext = useFloatingContext;

package/dist/cjs/src/contexts/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _FloatingContext = require("./FloatingContext");
+Object.keys(_FloatingContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FloatingContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _FloatingContext[key];
+    }
+  });
+});

package/dist/cjs/src/hooks/index.js

@@ -25,6 +25,17 @@ Object.keys(_useCallbackRef).forEach(function (key) {
     }
   });
 });
+var _useFloatingPosition = require("./useFloatingPosition");
+Object.keys(_useFloatingPosition).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useFloatingPosition[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useFloatingPosition[key];
+    }
+  });
+});
 var _useMediaQuery = require("./useMediaQuery");
 Object.keys(_useMediaQuery).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/dist/cjs/src/hooks/useFloatingPosition.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFloatingPosition = void 0;
+var _react = require("react");
+const FLOATING_Z_INDEX = 1500;
+const useFloatingPosition = _ref => {
+  let {
+    enabled,
+    isOpen,
+    triggerRef,
+    floatingRef,
+    direction,
+    offset = 4,
+    align = 'left',
+    matchTriggerWidth = false
+  } = _ref;
+  const [style, setStyle] = (0, _react.useState)(null);
+  (0, _react.useLayoutEffect)(() => {
+    if (!enabled || !isOpen) {
+      setStyle(null);
+      return;
+    }
+    const trigger = triggerRef.current;
+    if (!trigger) return;
+    const calculatePosition = (trigger, floatingHeight, floatingWidth) => {
+      const top = direction === 'up' ? trigger.top - floatingHeight - offset : trigger.bottom + offset;
+      const left = align === 'right' ? trigger.right - floatingWidth : trigger.left;
+      return {
+        top,
+        left
+      };
+    };
+    const update = () => {
+      const t = triggerRef.current;
+      const f = floatingRef.current;
+      if (!t) return;
+      const r = t.getBoundingClientRect();
+      const floatingHeight = f?.offsetHeight ?? 0;
+      const floatingWidth = matchTriggerWidth ? r.width : f?.offsetWidth ?? r.width;
+      const {
+        top,
+        left
+      } = calculatePosition(r, floatingHeight, floatingWidth);
+      // matchTriggerWidth=true: width는 max-content(콘텐츠 자연 너비), min-width만 trigger 너비로 보장.
+      // 옵션이 짧으면 trigger 너비, 길면 자연 확장 — 기존 absolute 모드와 동일한 UX.
+      setStyle({
+        position: 'fixed',
+        top,
+        left,
+        zIndex: FLOATING_Z_INDEX,
+        ...(matchTriggerWidth ? {
+          minWidth: r.width
+        } : {})
+      });
+    };
+    update();
+    window.addEventListener('scroll', update, true);
+    window.addEventListener('resize', update);
+    const triggerObserver = new ResizeObserver(update);
+    triggerObserver.observe(trigger);
+    let floatingObserver;
+    if (floatingRef.current) {
+      floatingObserver = new ResizeObserver(update);
+      floatingObserver.observe(floatingRef.current);
+    }
+    return () => {
+      window.removeEventListener('scroll', update, true);
+      window.removeEventListener('resize', update);
+      triggerObserver.disconnect();
+      floatingObserver?.disconnect();
+    };
+  }, [enabled, isOpen, direction, offset, align, matchTriggerWidth, triggerRef, floatingRef]);
+  return style;
+};
+exports.useFloatingPosition = useFloatingPosition;

package/dist/cjs/src/hooks/usePortalState.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePortalState = void 0;
+var _FloatingContext = require("../contexts/FloatingContext");
+const usePortalState = usePortalProp => {
+  const floatingContext = (0, _FloatingContext.useFloatingContext)();
+  const shouldPortal = usePortalProp ?? floatingContext?.preferPortal ?? false;
+  const portalContainer = floatingContext?.portalContainer ?? (typeof document !== 'undefined' ? document.body : null);
+  return {
+    shouldPortal,
+    portalContainer
+  };
+};
+exports.usePortalState = usePortalState;

package/dist/cjs/src/types/component-meta.js

@@ -2,4 +2,11 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.COMPONENT_CATEGORIES = void 0;
+/** AI 에이전트용 컴포넌트 메타데이터 타입 */
+/**
+ * 컴포넌트 카테고리 — `src/components/` 하위 디렉토리명과 동일.
+ * 타입과 런타임 값을 한 곳에서 정의해 추가/변경 시 동기화 누락을 막는다.
+ */
+const COMPONENT_CATEGORIES = exports.COMPONENT_CATEGORIES = ['action', 'data-display', 'feedback-and-status', 'forms-and-input', 'image-and-icons', 'layout', 'navigation', 'overlays'];

package/dist/cjs/src/utils/dropdown/maxSelection.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isMaxSelectionReached = exports.isMaxSelectionLimitActive = void 0;
+/**
+ * SelectBox / ComboBox 공통 — 최대 선택 개수 제한 활성 여부 판정.
+ *
+ * React 훅(`useMultiSelect`)과 vanilla 드롭다운(`DropdownModel`)가 동일 로직을 공유하므로
+ * 두 곳에 정의가 갈라지지 않도록 단일 source-of-truth로 둔다.
+ *
+ * **계약**
+ * - `0` 이상의 정수 → 활성 (단, `0`은 모든 새 선택을 차단하는 의미)
+ * - 음수 / 비정수 / `undefined` / `null` → 비활성 (제한 없는 것과 동일)
+ *
+ * `0`을 활성으로 보는 이유: 호출자가 `maxSelection={0}`을 명시적으로 전달했을 때
+ * "선택 자체를 막겠다"는 의도로 해석하기 위함. 음수는 일반적으로 "값 없음"의 sentinel이므로 비활성.
+ */
+const isMaxSelectionLimitActive = maxSelection => typeof maxSelection === 'number' && Number.isInteger(maxSelection) && maxSelection >= 0;
+/**
+ * 현재 선택 길이가 최대치에 도달했는지 단일 함수로 판정.
+ *
+ * 호출 측에서 `>=`을 직접 작성하지 않도록 의미를 노출하고, type predicate가 내부에서 적용되어
+ * `maxSelection`의 narrowing이 보장된다 (외부 predicate 호출로 인한 narrowing 누락 방지).
+ *
+ * - 제한 비활성(음수 / null / undefined / 비정수): 항상 `false`.
+ * - 활성: `currentLength >= maxSelection`.
+ */
+exports.isMaxSelectionLimitActive = isMaxSelectionLimitActive;
+const isMaxSelectionReached = (currentLength, maxSelection) => {
+  if (!isMaxSelectionLimitActive(maxSelection)) return false;
+  return currentLength >= maxSelection;
+};
+exports.isMaxSelectionReached = isMaxSelectionReached;

package/dist/cjs/src/utils/dropdown/multiSelect.js

@@ -3,7 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useMultiSelect = exports.removeTagFromSelected = exports.isAllItemsSelected = exports.handleSelectAllItems = exports.getSelectedTags = exports.getSelectAllButtonText = void 0;
+exports.useMultiSelect = exports.useMaxSelection = exports.removeTagFromSelected = exports.isAllItemsSelected = exports.handleSelectAllItems = exports.getSelectedTags = exports.getSelectAllButtonText = void 0;
+var _react = require("react");
+var _maxSelection = require("./maxSelection");
 /**
  * 전체 선택 상태를 확인하는 유틸 함수
  */
@@ -54,27 +56,82 @@ const removeTagFromSelected = (selectedValues, tagIdToRemove) => {
   return selectedValues.filter(id => id !== tagIdToRemove);
 };
 /**
- * 전체 선택 관련 로직을 한 번에 처리하는 커스텀 훅
+ * 최대 선택 개수 관련 응집을 별도 훅으로 분리.
+ *
+ * - `isMaxSelectionActive`: 제한 활성 여부.
+ * - `isMaxReached`: 현재 선택 길이가 최대치에 도달했는지.
+ * - `canAdd(currentLength)`: 새 항목 추가가 허용되는지 (도달 시 `false`).
+ *
+ * 도메인 규칙(`>=` 비교 등)을 외부로 노출하지 않고 헬퍼를 통해 의미만 반환한다.
+ * `useMultiSelect`가 내부에서 사용하지만, 단독으로도 필요한 호출자가 쓸 수 있게 export한다.
  */
 exports.removeTagFromSelected = removeTagFromSelected;
-const useMultiSelect = (selectedValues, options, selectText, deselectText) => {
+const useMaxSelection = (selectedValues, maxSelection) => {
+  const isMaxSelectionActive = (0, _maxSelection.isMaxSelectionLimitActive)(maxSelection);
+  const isMaxReached = (0, _maxSelection.isMaxSelectionReached)(selectedValues.length, maxSelection);
+  const canAdd = (0, _react.useCallback)(currentLength => !(0, _maxSelection.isMaxSelectionReached)(currentLength, maxSelection), [maxSelection]);
+  return {
+    isMaxSelectionActive,
+    isMaxReached,
+    canAdd
+  };
+};
+/**
+ * 전체 선택 관련 로직을 한 번에 처리하는 커스텀 훅.
+ *
+ * 시그니처는 호출자가 maxSelection만 지정하더라도 텍스트 라벨을 건너뛰지 않도록 옵션 객체로 받는다.
+ *
+ * **반환의 `tryToggle`**: multiple 토글 결과를 직접 돌려준다.
+ *  - 새 배열 반환: 정상 토글 (추가 또는 해제).
+ *  - `null` 반환: 최대 개수 도달로 추가가 차단됨 (호출자는 변경 없이 종료해야 함).
+ *
+ * 호출자가 `>= maxSelection` 같은 도메인 규칙을 직접 검사하지 않도록 결과만 노출한다.
+ */
+exports.useMaxSelection = useMaxSelection;
+const useMultiSelect = function (selectedValues, options) {
+  let config = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  const {
+    selectText,
+    deselectText,
+    maxSelection
+  } = config;
   const isAllSelected = isAllItemsSelected(selectedValues, options);
   const buttonText = getSelectAllButtonText(selectedValues, options, selectText, deselectText);
-  const toggleSelectAll = () => {
-    return handleSelectAllItems(selectedValues, options);
-  };
-  const getSelectedTagsData = () => {
-    return getSelectedTags(selectedValues, options);
-  };
-  const removeTag = tagId => {
-    return removeTagFromSelected(selectedValues, tagId);
-  };
-  return {
+  const {
+    isMaxSelectionActive,
+    isMaxReached,
+    canAdd
+  } = useMaxSelection(selectedValues, maxSelection);
+  const toggleSelectAll = (0, _react.useCallback)(() => handleSelectAllItems(selectedValues, options), [selectedValues, options]);
+  const getSelectedTagsData = (0, _react.useCallback)(() => getSelectedTags(selectedValues, options), [selectedValues, options]);
+  const removeTag = (0, _react.useCallback)(tagId => removeTagFromSelected(selectedValues, tagId), [selectedValues]);
+  /**
+   * multiple 선택 토글을 한 번에 처리한다.
+   * - 이미 포함된 항목: 해제 (배열에서 제거하여 반환).
+   * - 미포함 항목: 추가 시도. 최대치 도달이면 `null` 반환(차단).
+   *
+   * 호출 측은 `null` 여부만 확인하면 되며 maxSelection 도메인 규칙을 알 필요가 없다.
+   */
+  const tryToggle = (0, _react.useCallback)((optionId, currentArray) => {
+    const base = Array.isArray(currentArray) ? currentArray : [];
+    const idx = base.indexOf(optionId);
+    if (idx > -1) {
+      const next = [...base];
+      next.splice(idx, 1);
+      return next;
+    }
+    if (!canAdd(base.length)) return null;
+    return [...base, optionId];
+  }, [canAdd]);
+  return (0, _react.useMemo)(() => ({
     isAllSelected,
     buttonText,
     toggleSelectAll,
     getSelectedTagsData,
-    removeTag
-  };
+    removeTag,
+    isMaxSelectionActive,
+    isMaxReached,
+    tryToggle
+  }), [isAllSelected, buttonText, toggleSelectAll, getSelectedTagsData, removeTag, isMaxSelectionActive, isMaxReached, tryToggle]);
 };
 exports.useMultiSelect = useMultiSelect;

package/dist/esm/assets/scripts/featuredIcon.js

@@ -0,0 +1,80 @@
+// React 컴포넌트와 동일하게 구성
+const iconSizeMap = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28
+};
+export class FeaturedIcon {
+  constructor(options) {
+    this.options = {
+      theme: 'light-circle',
+      color: 'neutral',
+      size: 'sm',
+      className: '',
+      ...options
+    };
+    this.element = this.createElement();
+  }
+  // svgString ( ICON SVG ) 을 받아서 요소를 생성
+  createElement() {
+    const {
+      theme,
+      color,
+      size,
+      className,
+      svgString
+    } = this.options;
+    // React FeaturedIcon과 동일한 클래스 구조
+    const classes = ['ncua-featured-icon', `ncua-featured-icon--${theme}`, `ncua-featured-icon--${color}`, `ncua-featured-icon--${size}`];
+    if (className) {
+      classes.push(className);
+    }
+    const div = document.createElement('div');
+    div.className = classes.join(' ');
+    // outline-circle 테마일 때 추가 요소들 (React 컴포넌트와 동일)
+    if (theme === 'outline-circle') {
+      const innerOutline = document.createElement('div');
+      innerOutline.className = 'ncua-featured-icon__outline ncua-featured-icon__outline--inner';
+      div.appendChild(innerOutline);
+      const outerOutline = document.createElement('div');
+      outerOutline.className = 'ncua-featured-icon__outline ncua-featured-icon__outline--outer';
+      div.appendChild(outerOutline);
+    }
+    // SVG 아이콘 추가
+    const iconSize = iconSizeMap[size];
+    const svgWithSize = this.addSizeToSvg(svgString, iconSize);
+    div.innerHTML += svgWithSize;
+    return div;
+  }
+  addSizeToSvg(svgString, size) {
+    return svgString.replace(/<svg([^>]*)>/, `<svg$1 width="${size}" height="${size}">`);
+  }
+  // Public methods
+  getElement() {
+    return this.element;
+  }
+  updateColor(color) {
+    this.element.className = this.element.className.replace(/ncua-featured-icon--(neutral|error|warning|success)/, `ncua-featured-icon--${color}`);
+    this.options.color = color;
+  }
+  updateSize(size) {
+    const iconSize = iconSizeMap[size];
+    this.element.className = this.element.className.replace(/ncua-featured-icon--(sm|md|lg|xl)/, `ncua-featured-icon--${size}`);
+    const svgIcon = this.element.querySelector('svg');
+    if (svgIcon) {
+      svgIcon.setAttribute('width', String(iconSize));
+      svgIcon.setAttribute('height', String(iconSize));
+    }
+    this.options.size = size;
+  }
+  destroy() {
+    if (this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  }
+  // Static factory method
+  static create(options) {
+    return new FeaturedIcon(options);
+  }
+}