@iyulab/components 0.1.0 → 0.1.2

package/dist/components/split-panel/SplitPanel.styles.js

@@ -1,5 +1,6 @@
-import { css as o } from "lit";
-const i = o`
+import { css } from 'lit';
+
+const styles = css`
   :host {
     position: relative;
     display: flex;
@@ -14,6 +15,5 @@ const i = o`
     flex-direction: column;
   }
 `;
-export {
-  i as styles
-};
+
+export { styles };

package/dist/components/split-panel/Splitter.js

@@ -1,39 +1,45 @@
-import { html as p } from "lit";
-import { state as l, property as g } from "lit/decorators.js";
-import { BaseElement as d } from "../BaseElement.js";
-import { styles as m } from "./Splitter.styles.js";
-var f = Object.defineProperty, n = (r, e, i, u) => {
-  for (var t = void 0, s = r.length - 1, o; s >= 0; s--)
-    (o = r[s]) && (t = o(e, i, t) || t);
-  return t && f(e, i, t), t;
+import { html } from 'lit';
+import { state, property } from 'lit/decorators.js';
+import { BaseElement } from '../BaseElement.js';
+import { styles } from './Splitter.styles.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
 };
-class a extends d {
+class Splitter extends BaseElement {
   constructor() {
-    super(...arguments), this.dragging = !1, this.orientation = "horizontal";
+    super(...arguments);
+    this.dragging = false;
+    this.orientation = "horizontal";
   }
   static {
-    this.styles = [super.styles, m];
+    this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {};
   }
   render() {
-    return p`
+    return html`
       <div class="handler" ?dragging=${this.dragging}></div>
     `;
   }
   /** 스플리터의 크기를 반환합니다. */
   get size() {
-    const e = getComputedStyle(this).getPropertyValue("--splitter-size").trim();
-    return parseFloat(e) || 2;
+    const sizeStr = getComputedStyle(this).getPropertyValue("--splitter-size").trim();
+    return parseFloat(sizeStr) || 2;
   }
 }
-n([
-  l()
-], a.prototype, "dragging");
-n([
-  g({ type: String, reflect: !0 })
-], a.prototype, "orientation");
-export {
-  a as Splitter
-};
+__decorateClass([
+  state()
+], Splitter.prototype, "dragging");
+__decorateClass([
+  property({ type: String, reflect: true })
+], Splitter.prototype, "orientation");
+
+export { Splitter };

package/dist/components/split-panel/Splitter.styles.js

@@ -1,5 +1,6 @@
-import { css as r } from "lit";
-const e = r`
+import { css } from 'lit';
+
+const styles = css`
   :host {
     position: relative;
     display: block;
@@ -40,6 +41,5 @@ const e = r`
     opacity: 1;
   }
 `;
-export {
-  e as styles
-};
+
+export { styles };

package/dist/components/tooltip/Tooltip.js

@@ -1,91 +1,133 @@
-import { html as l } from "lit";
-import { property as r } from "lit/decorators.js";
-import { offset as g, shift as p, flip as u, autoPlacement as m, computePosition as d } from "@floating-ui/dom";
-import { getParentElement as f, findElementsBy as y } from "../../internals/node-helpers.js";
-import { BaseElement as E } from "../BaseElement.js";
-import { styles as v } from "./Tooltip.styles.js";
-var T = Object.defineProperty, i = (a, t, e, n) => {
-  for (var s = void 0, h = a.length - 1, c; h >= 0; h--)
-    (c = a[h]) && (s = c(t, e, s) || s);
-  return s && T(t, e, s), s;
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { offset, shift, flip, autoPlacement, computePosition } from '@floating-ui/dom';
+import { getParentElement, findElementsBy } from '../../internals/node-helpers.js';
+import { BaseElement } from '../BaseElement.js';
+import { styles } from './Tooltip.styles.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
 };
-class o extends E {
+class Tooltip extends BaseElement {
   constructor() {
-    super(...arguments), this.isSlotEmpty = !0, this.triggers = [], this.open = !1, this.hoist = !1, this.distance = 8, this.show = async (t) => {
+    super(...arguments);
+    /** 슬롯이 비어있는지 여부를 나타냅니다. */
+    this.isSlotEmpty = true;
+    this.triggers = [];
+    this.open = false;
+    this.hoist = false;
+    this.distance = 8;
+    /** 툴팁을 표시합니다. */
+    this.show = async (e) => {
       await this.updateComplete;
-      const e = t?.currentTarget || this.triggers[0] || null;
-      if (!e || this.isSlotEmpty) return;
-      const n = [
-        g({ mainAxis: this.distance }),
-        p(),
-        u()
+      const trigger = e?.currentTarget || this.triggers[0] || null;
+      if (!trigger || this.isSlotEmpty) return;
+      const middleware = [
+        offset({ mainAxis: this.distance }),
+        shift(),
+        flip()
       ];
-      this.placement || n.push(m());
-      const s = await d(e, this, {
+      if (!this.placement)
+        middleware.push(autoPlacement());
+      const position = await computePosition(trigger, this, {
         placement: this.placement,
-        middleware: n,
+        middleware,
         strategy: this.hoist ? "fixed" : "absolute"
       });
       Object.assign(this.style, {
-        left: `${s.x}px`,
-        top: `${s.y}px`,
-        transformOrigin: this.getTransformOrigin(s.placement)
-      }), await this.updateComplete, requestAnimationFrame(() => {
-        this.open = !0;
+        left: `${position.x}px`,
+        top: `${position.y}px`,
+        transformOrigin: this.getTransformOrigin(position.placement)
       });
-    }, this.hide = async (t) => {
-      await this.updateComplete, requestAnimationFrame(() => {
-        this.open = !1;
+      await this.updateComplete;
+      requestAnimationFrame(() => {
+        this.open = true;
+      });
+    };
+    /** 툴팁을 숨깁니다. */
+    this.hide = async (_) => {
+      await this.updateComplete;
+      requestAnimationFrame(() => {
+        this.open = false;
+      });
+    };
+    /** 
+     * slot에 콘텐츠가 존재하는지 확인합니다. 
+     */
+    this.handleSlotChange = (e) => {
+      const slot = e.target;
+      const nodes = slot.assignedNodes({ flatten: true }) ?? [];
+      this.isSlotEmpty = !nodes.some((node) => {
+        if (node.nodeType === Node.ELEMENT_NODE) return true;
+        if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) return true;
+        return false;
       });
-    }, this.handleSlotChange = (t) => {
-      const n = t.target.assignedNodes({ flatten: !0 }) ?? [];
-      this.isSlotEmpty = !n.some((s) => !!(s.nodeType === Node.ELEMENT_NODE || s.nodeType === Node.TEXT_NODE && s.textContent?.trim()));
     };
   }
   static {
-    this.styles = [super.styles, v];
+    this.styles = [super.styles, styles];
   }
   static {
     this.dependencies = {};
   }
   connectedCallback() {
-    if (super.connectedCallback(), this.triggers.length === 0) {
-      const t = f(this);
-      t && (this.triggers = [t]);
+    super.connectedCallback();
+    if (this.triggers.length === 0) {
+      const parent = getParentElement(this);
+      if (parent) this.triggers = [parent];
     }
   }
   disconnectedCallback() {
-    this.detachTriggers(this.triggers), super.disconnectedCallback();
+    this.detachTriggers(this.triggers);
+    super.disconnectedCallback();
   }
-  updated(t) {
-    if (super.updated(t), t.has("triggers") && this.triggers) {
-      const e = t.get("triggers");
-      this.detachTriggers(e), this.attachTriggers(this.triggers);
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("triggers") && this.triggers) {
+      const oldTriggers = changedProperties.get("triggers");
+      this.detachTriggers(oldTriggers);
+      this.attachTriggers(this.triggers);
+    }
+    if (changedProperties.has("triggerSelectors") && this.triggerSelectors) {
+      this.triggers = findElementsBy(this, this.triggerSelectors);
     }
-    t.has("triggerSelectors") && this.triggerSelectors && (this.triggers = y(this, this.triggerSelectors));
   }
   render() {
-    return l`
+    return html`
       <slot @slotchange=${this.handleSlotChange}></slot>
     `;
   }
   /** 대상 엘리먼트에 툴팁 이벤트를 바인딩 합니다. */
-  attachTriggers(t) {
-    if (t)
-      for (const e of t)
-        e.addEventListener("mouseenter", this.show), e.addEventListener("mouseleave", this.hide), e.addEventListener("focusin", this.show), e.addEventListener("focusout", this.hide);
+  attachTriggers(triggers) {
+    if (!triggers) return;
+    for (const trigger of triggers) {
+      trigger.addEventListener("mouseenter", this.show);
+      trigger.addEventListener("mouseleave", this.hide);
+      trigger.addEventListener("focusin", this.show);
+      trigger.addEventListener("focusout", this.hide);
+    }
   }
   /** 대상 엘리먼트에 바인딩된 툴팁 이벤트를 제거합니다. */
-  detachTriggers(t) {
-    if (t)
-      for (const e of t)
-        e.removeEventListener("mouseenter", this.show), e.removeEventListener("mouseleave", this.hide), e.removeEventListener("focusin", this.show), e.removeEventListener("focusout", this.hide);
+  detachTriggers(triggers) {
+    if (!triggers) return;
+    for (const trigger of triggers) {
+      trigger.removeEventListener("mouseenter", this.show);
+      trigger.removeEventListener("mouseleave", this.hide);
+      trigger.removeEventListener("focusin", this.show);
+      trigger.removeEventListener("focusout", this.hide);
+    }
   }
   /**
   * 툴팁이 나타날 위치에 따라 transform-origin 값을 반환합니다.
   */
-  getTransformOrigin(t) {
-    switch (t) {
+  getTransformOrigin(placement) {
+    switch (placement) {
       case "top":
       case "top-start":
       case "top-end":
@@ -107,24 +149,23 @@ class o extends E {
     }
   }
 }
-i([
-  r({ attribute: !1 })
-], o.prototype, "triggers");
-i([
-  r({ type: String, attribute: "trigger-selectors" })
-], o.prototype, "triggerSelectors");
-i([
-  r({ type: Boolean, reflect: !0 })
-], o.prototype, "open");
-i([
-  r({ type: Boolean, reflect: !0 })
-], o.prototype, "hoist");
-i([
-  r({ type: String })
-], o.prototype, "placement");
-i([
-  r({ type: Number })
-], o.prototype, "distance");
-export {
-  o as Tooltip
-};
+__decorateClass([
+  property({ attribute: false })
+], Tooltip.prototype, "triggers");
+__decorateClass([
+  property({ type: String, attribute: "trigger-selectors" })
+], Tooltip.prototype, "triggerSelectors");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Tooltip.prototype, "open");
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], Tooltip.prototype, "hoist");
+__decorateClass([
+  property({ type: String })
+], Tooltip.prototype, "placement");
+__decorateClass([
+  property({ type: Number })
+], Tooltip.prototype, "distance");
+
+export { Tooltip };

package/dist/components/tooltip/Tooltip.styles.js

@@ -1,5 +1,6 @@
-import { css as o } from "lit";
-const e = o`
+import { css } from 'lit';
+
+const styles = css`
   :host {
     position: absolute;
     z-index: 1000;
@@ -31,6 +32,5 @@ const e = o`
     position: fixed;
   }
 `;
-export {
-  e as styles
-};
+
+export { styles };

package/dist/index.js

@@ -1,40 +1,18 @@
-import { Alert as e } from "./components/alert/Alert.js";
-import { Button as p } from "./components/button/Button.js";
-import { ContextMenu as f } from "./components/context-menu/ContextMenu.js";
-import { Dialog as n } from "./components/dialog/Dialog.js";
-import { Form as i } from "./components/form/Form.js";
-import { Icon as g } from "./components/icon/Icon.js";
-import { IconButton as M } from "./components/icon-button/IconButton.js";
-import { Input as s } from "./components/input/Input.js";
-import { Menu as B } from "./components/menu/Menu.js";
-import { Panel as S } from "./components/panel/Panel.js";
-import { ProgressRing as h } from "./components/progress-ring/ProgressRing.js";
-import { Spinner as A } from "./components/spinner/Spinner.js";
-import { SplitPanel as D } from "./components/split-panel/SplitPanel.js";
-import { Tooltip as R } from "./components/tooltip/Tooltip.js";
-import { getPropertyMeta as b, propertyMeta as d, setPropertyMeta as j } from "./utilities/decorators.js";
-import { notifier as q } from "./utilities/notifier.js";
-import { BrowserStorage as z } from "./utilities/storage.js";
-import { theme as G } from "./utilities/theme.js";
-export {
-  e as Alert,
-  z as BrowserStorage,
-  p as Button,
-  f as ContextMenu,
-  n as Dialog,
-  i as Form,
-  g as Icon,
-  M as IconButton,
-  s as Input,
-  B as Menu,
-  S as Panel,
-  h as ProgressRing,
-  A as Spinner,
-  D as SplitPanel,
-  R as Tooltip,
-  b as getPropertyMeta,
-  q as notifier,
-  d as propertyMeta,
-  j as setPropertyMeta,
-  G as theme
-};
+export { Alert } from './components/alert/Alert.js';
+export { Button } from './components/button/Button.js';
+export { ContextMenu } from './components/context-menu/ContextMenu.js';
+export { Dialog } from './components/dialog/Dialog.js';
+export { Form } from './components/form/Form.js';
+export { Icon } from './components/icon/Icon.js';
+export { IconButton } from './components/icon-button/IconButton.js';
+export { Input } from './components/input/Input.js';
+export { Menu } from './components/menu/Menu.js';
+export { Panel } from './components/panel/Panel.js';
+export { ProgressRing } from './components/progress-ring/ProgressRing.js';
+export { Spinner } from './components/spinner/Spinner.js';
+export { SplitPanel } from './components/split-panel/SplitPanel.js';
+export { Tooltip } from './components/tooltip/Tooltip.js';
+export { BrowserStorage } from './utilities/BrowserStorage.js';
+export { getPropertyMeta, propertyMeta, setPropertyMeta } from './utilities/decorators.js';
+export { notifier } from './utilities/notifier.js';
+export { Theme, theme } from './utilities/theme.js';

package/dist/internals/attribute-converters.js

@@ -1,12 +1,14 @@
-function e(i, r = ",") {
+function arrayAttributeConverter(parser, separator = ",") {
   return {
-    fromAttribute: (t) => {
-      if (t)
-        return t.split(r).map((n) => i(n.trim()));
+    fromAttribute: (value) => {
+      if (!value) return void 0;
+      return value.split(separator).map((v) => parser(v.trim()));
     },
-    toAttribute: (t) => t ? t.join(r) : null
+    toAttribute: (value) => {
+      if (!value) return null;
+      return value.join(separator);
+    }
   };
 }
-export {
-  e as arrayAttributeConverter
-};
+
+export { arrayAttributeConverter };

package/dist/internals/icons.js

@@ -1,67 +1,42 @@
-import * as i from "../assets/icons/arrow-clockwise.svg.js";
-import * as r from "../assets/icons/arrow-down.svg.js";
-import * as e from "../assets/icons/arrow-up.svg.js";
-import * as a from "../assets/icons/ban.svg.js";
-import * as t from "../assets/icons/bell-fill.svg.js";
-import * as l from "../assets/icons/check-circle-fill.svg.js";
-import * as c from "../assets/icons/check-lg.svg.js";
-import * as m from "../assets/icons/chevron-down.svg.js";
-import * as n from "../assets/icons/chevron-left.svg.js";
-import * as p from "../assets/icons/chevron-right.svg.js";
-import * as g from "../assets/icons/chevron-up.svg.js";
-import * as f from "../assets/icons/copy.svg.js";
-import * as v from "../assets/icons/dash-lg.svg.js";
-import * as h from "../assets/icons/exclamation-circle-fill.svg.js";
-import * as b from "../assets/icons/exclamation-triangle-fill.svg.js";
-import * as u from "../assets/icons/eye-slash.svg.js";
-import * as w from "../assets/icons/eye.svg.js";
-import * as d from "../assets/icons/info-circle-fill.svg.js";
-import * as y from "../assets/icons/layout-sidebar.svg.js";
-import * as F from "../assets/icons/lightbulb-fill.svg.js";
-import * as x from "../assets/icons/lightbulb-off.svg.js";
-import * as k from "../assets/icons/lightbulb.svg.js";
-import * as L from "../assets/icons/mic-fill.svg.js";
-import * as C from "../assets/icons/mic-mute-fill.svg.js";
-import * as O from "../assets/icons/paperclip.svg.js";
-import * as S from "../assets/icons/pencil-square.svg.js";
-import * as j from "../assets/icons/plus-lg.svg.js";
-import * as q from "../assets/icons/search.svg.js";
-import * as D from "../assets/icons/speedometer.svg.js";
-import * as M from "../assets/icons/x-lg.svg.js";
-const R = new Map(
-  Object.entries(/* @__PURE__ */ Object.assign({
-    "../assets/icons/arrow-clockwise.svg": i,
-    "../assets/icons/arrow-down.svg": r,
-    "../assets/icons/arrow-up.svg": e,
-    "../assets/icons/ban.svg": a,
-    "../assets/icons/bell-fill.svg": t,
-    "../assets/icons/check-circle-fill.svg": l,
-    "../assets/icons/check-lg.svg": c,
-    "../assets/icons/chevron-down.svg": m,
-    "../assets/icons/chevron-left.svg": n,
-    "../assets/icons/chevron-right.svg": p,
-    "../assets/icons/chevron-up.svg": g,
-    "../assets/icons/copy.svg": f,
-    "../assets/icons/dash-lg.svg": v,
-    "../assets/icons/exclamation-circle-fill.svg": h,
-    "../assets/icons/exclamation-triangle-fill.svg": b,
-    "../assets/icons/eye-slash.svg": u,
-    "../assets/icons/eye.svg": w,
-    "../assets/icons/info-circle-fill.svg": d,
-    "../assets/icons/layout-sidebar.svg": y,
-    "../assets/icons/lightbulb-fill.svg": F,
-    "../assets/icons/lightbulb-off.svg": x,
-    "../assets/icons/lightbulb.svg": k,
-    "../assets/icons/mic-fill.svg": L,
-    "../assets/icons/mic-mute-fill.svg": C,
-    "../assets/icons/paperclip.svg": O,
-    "../assets/icons/pencil-square.svg": S,
-    "../assets/icons/plus-lg.svg": j,
-    "../assets/icons/search.svg": q,
-    "../assets/icons/speedometer.svg": D,
-    "../assets/icons/x-lg.svg": M
-  })).map(([s, o]) => [s.split("/").pop()?.replace(".svg", "") || "", o.default]).filter(([s]) => s !== "")
+import * as arrowClockwise from '../assets/icons/arrow-clockwise.svg.js';
+import * as arrowDown from '../assets/icons/arrow-down.svg.js';
+import * as arrowUp from '../assets/icons/arrow-up.svg.js';
+import * as ban from '../assets/icons/ban.svg.js';
+import * as bellFill from '../assets/icons/bell-fill.svg.js';
+import * as checkCircleFill from '../assets/icons/check-circle-fill.svg.js';
+import * as checkLg from '../assets/icons/check-lg.svg.js';
+import * as chevronDown from '../assets/icons/chevron-down.svg.js';
+import * as chevronLeft from '../assets/icons/chevron-left.svg.js';
+import * as chevronRight from '../assets/icons/chevron-right.svg.js';
+import * as chevronUp from '../assets/icons/chevron-up.svg.js';
+import * as copy from '../assets/icons/copy.svg.js';
+import * as dashLg from '../assets/icons/dash-lg.svg.js';
+import * as exclamationCircleFill from '../assets/icons/exclamation-circle-fill.svg.js';
+import * as exclamationTriangleFill from '../assets/icons/exclamation-triangle-fill.svg.js';
+import * as eyeSlash from '../assets/icons/eye-slash.svg.js';
+import * as eye from '../assets/icons/eye.svg.js';
+import * as infoCircleFill from '../assets/icons/info-circle-fill.svg.js';
+import * as layoutSidebar from '../assets/icons/layout-sidebar.svg.js';
+import * as lightbulbFill from '../assets/icons/lightbulb-fill.svg.js';
+import * as lightbulbOff from '../assets/icons/lightbulb-off.svg.js';
+import * as lightbulb from '../assets/icons/lightbulb.svg.js';
+import * as micFill from '../assets/icons/mic-fill.svg.js';
+import * as micMuteFill from '../assets/icons/mic-mute-fill.svg.js';
+import * as paperclip from '../assets/icons/paperclip.svg.js';
+import * as pencilSquare from '../assets/icons/pencil-square.svg.js';
+import * as plusLg from '../assets/icons/plus-lg.svg.js';
+import * as search from '../assets/icons/search.svg.js';
+import * as speedometer from '../assets/icons/speedometer.svg.js';
+import * as xLg from '../assets/icons/x-lg.svg.js';
+
+const icons = new Map(
+  Object.entries(/* #__PURE__ */ Object.assign({"../assets/icons/arrow-clockwise.svg": arrowClockwise,"../assets/icons/arrow-down.svg": arrowDown,"../assets/icons/arrow-up.svg": arrowUp,"../assets/icons/ban.svg": ban,"../assets/icons/bell-fill.svg": bellFill,"../assets/icons/check-circle-fill.svg": checkCircleFill,"../assets/icons/check-lg.svg": checkLg,"../assets/icons/chevron-down.svg": chevronDown,"../assets/icons/chevron-left.svg": chevronLeft,"../assets/icons/chevron-right.svg": chevronRight,"../assets/icons/chevron-up.svg": chevronUp,"../assets/icons/copy.svg": copy,"../assets/icons/dash-lg.svg": dashLg,"../assets/icons/exclamation-circle-fill.svg": exclamationCircleFill,"../assets/icons/exclamation-triangle-fill.svg": exclamationTriangleFill,"../assets/icons/eye-slash.svg": eyeSlash,"../assets/icons/eye.svg": eye,"../assets/icons/info-circle-fill.svg": infoCircleFill,"../assets/icons/layout-sidebar.svg": layoutSidebar,"../assets/icons/lightbulb-fill.svg": lightbulbFill,"../assets/icons/lightbulb-off.svg": lightbulbOff,"../assets/icons/lightbulb.svg": lightbulb,"../assets/icons/mic-fill.svg": micFill,"../assets/icons/mic-mute-fill.svg": micMuteFill,"../assets/icons/paperclip.svg": paperclip,"../assets/icons/pencil-square.svg": pencilSquare,"../assets/icons/plus-lg.svg": plusLg,"../assets/icons/search.svg": search,"../assets/icons/speedometer.svg": speedometer,"../assets/icons/x-lg.svg": xLg
+
+
+})).map(([path, module]) => {
+    const name = path.split("/").pop()?.replace(".svg", "") || "";
+    return [name, module.default];
+  }).filter(([name]) => name !== "")
 );
-export {
-  R as icons
-};
+
+export { icons };

package/dist/internals/node-helpers.js

@@ -1,21 +1,20 @@
-function r(o) {
-  if (o.parentElement)
-    return o.parentElement;
-  {
-    const e = o.getRootNode({ composed: !1 });
-    return e instanceof Document ? e.documentElement : e instanceof ShadowRoot ? e.host : e instanceof HTMLElement ? e : void 0;
+function getParentElement(element) {
+  if (element.parentElement) {
+    return element.parentElement;
+  } else {
+    const root = element.getRootNode({ composed: false });
+    return root instanceof Document ? root.documentElement : root instanceof ShadowRoot ? root.host : root instanceof HTMLElement ? root : void 0;
   }
 }
-function c(o, e) {
-  if (!e) return [];
-  const t = o.getRootNode({ composed: !1 });
-  if (t instanceof ShadowRoot || t instanceof Document) {
-    const n = t.querySelectorAll(e);
-    return Array.from(n);
-  } else
+function findElementsBy(element, selectors) {
+  if (!selectors) return [];
+  const rootNode = element.getRootNode({ composed: false });
+  if (rootNode instanceof ShadowRoot || rootNode instanceof Document) {
+    const nodeList = rootNode.querySelectorAll(selectors);
+    return Array.from(nodeList);
+  } else {
     return [];
+  }
 }
-export {
-  c as findElementsBy,
-  r as getParentElement
-};
+
+export { findElementsBy, getParentElement };

package/dist/utilities/BrowserStorage.d.ts

@@ -0,0 +1,43 @@
+/** localStorage 설정 옵션 */
+export interface LocalStorageOptions {
+    type: 'localStorage';
+}
+/** 쿠키 스토리지 설정 옵션 */
+export interface CookieOptions {
+    type: 'cookie';
+    path?: string;
+    domain?: string | null;
+    expires?: DOMHighResTimeStamp | null;
+    sameSite?: CookieSameSite;
+    partitioned?: boolean;
+}
+export type BrowserStorageOptions = (LocalStorageOptions | CookieOptions) & {
+    /** 키 앞에 붙일 접두사 (옵션) */
+    prefix?: string;
+};
+/**
+ * 웹 브라우저가 제공하는 저장소 유틸리티 클래스
+ */
+export declare class BrowserStorage {
+    private readonly options;
+    constructor(options: BrowserStorageOptions);
+    /** 키에 prefix를 붙인 실제 저장 키 */
+    private buildKey;
+    /**
+     * 값 저장
+     * @param key 키
+     * @param value 문자열 값 (문자열이 아닌 값은 JSON.stringify 권장)
+     */
+    set(key: string, value: string): Promise<void>;
+    /**
+     * 값 조회
+     * @param key 키
+     * @returns 값 (없으면 null)
+     */
+    get(key: string): Promise<string | null>;
+    /**
+     * 값 삭제
+     * @param key 키
+     */
+    remove(key: string): Promise<void>;
+}