@stencil-kit/core 0.0.1 → 0.0.3

package/dist/cjs/{index-BrMvRGjk.js → index-q0fPnkdL.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 const NAMESPACE = 'stencil-library';
-const BUILD = /* stencil-library */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, prop: true, propChangeCallback: false, updatable: true};
+const BUILD = /* stencil-library */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, state: true, updatable: true};
 
 /*
  Stencil Client Platform v4.43.5 | MIT Licensed | https://stenciljs.com
@@ -60,7 +60,7 @@ var registerInstance = (lazyInstance, hostRef) => {
   if (!hostRef) return;
   lazyInstance.__stencil__getHostRef = () => hostRef;
   hostRef.$lazyInstance$ = lazyInstance;
-  if (hostRef.$cmpMeta$.$flags$ & 512 /* hasModernPropertyDecls */ && (BUILD.prop)) {
+  if (hostRef.$cmpMeta$.$flags$ & 512 /* hasModernPropertyDecls */ && (BUILD.state)) {
     reWireGetterSetter(lazyInstance, hostRef);
   }
 };
@@ -419,6 +419,31 @@ var newVNode = (tag, text) => {
 var Host = {};
 var isHost = (node) => node && node.$tag$ === Host;
 
+// src/runtime/normalize-watchers.ts
+var normalizeWatchers = (raw) => {
+  if (!raw) return void 0;
+  const keys = Object.keys(raw);
+  if (keys.length === 0) return void 0;
+  let hasLegacy = false;
+  for (const propName of keys) {
+    if (hasLegacy) break;
+    for (const h2 of raw[propName]) {
+      if (typeof h2 === "string") {
+        hasLegacy = true;
+        break;
+      }
+    }
+  }
+  if (!hasLegacy) return raw;
+  const out = {};
+  for (const propName of keys) {
+    out[propName] = raw[propName].map(
+      (h2) => typeof h2 === "string" ? { [h2]: 0 } : h2
+    );
+  }
+  return out;
+};
+
 // src/runtime/parse-property-value.ts
 var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   if (propValue != null && !isComplexType(propValue)) {
@@ -434,6 +459,25 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
   }
   return propValue;
 };
+var getElement = (ref) => {
+  var _a;
+  return (_a = getHostRef(ref)) == null ? void 0 : _a.$hostElement$ ;
+};
+
+// src/runtime/event-emitter.ts
+var createEvent = (ref, name, flags) => {
+  const elm = getElement(ref);
+  return {
+    emit: (detail) => {
+      return emitEvent(elm, name, {
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+        detail
+      });
+    }
+  };
+};
 var emitEvent = (elm, name, opts) => {
   const ev = plt.ce(name, opts);
   elm.dispatchEvent(ev);
@@ -444,7 +488,7 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
     return;
   }
   let isProp = isMemberInElement(elm, memberName);
-  memberName.toLowerCase();
+  let ln = memberName.toLowerCase();
   if (memberName === "class") {
     const classList = elm.classList;
     const oldClasses = parseClassList(oldValue);
@@ -453,7 +497,25 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
     }
-  } else if (memberName === "key") ; else if (memberName[0] === "a" && memberName.startsWith("attr:")) {
+  } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+    if (memberName[2] === "-") {
+      memberName = memberName.slice(3);
+    } else if (isMemberInElement(win, ln)) {
+      memberName = ln.slice(2);
+    } else {
+      memberName = ln[2] + memberName.slice(3);
+    }
+    if (oldValue || newValue) {
+      const capture = memberName.endsWith(CAPTURE_EVENT_SUFFIX);
+      memberName = memberName.replace(CAPTURE_EVENT_REGEX, "");
+      if (oldValue) {
+        plt.rel(elm, memberName, oldValue, capture);
+      }
+      if (newValue) {
+        plt.ael(elm, memberName, newValue, capture);
+      }
+    }
+  } else if (memberName[0] === "a" && memberName.startsWith("attr:")) {
     const propName = memberName.slice(5);
     let attrName;
     {
@@ -528,6 +590,8 @@ var parseClassList = (value) => {
   }
   return value.split(parseClassListRegex);
 };
+var CAPTURE_EVENT_SUFFIX = "Capture";
+var CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + "$");
 
 // src/runtime/vdom/update-element.ts
 var updateElement = (oldVnode, newVnode, isSvgMode2, isInitialRender) => {
@@ -983,6 +1047,7 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
       `Couldn't find host element for "${cmpMeta.$tagName$}" as it is unknown to this Stencil runtime. This usually happens when integrating a 3rd party Stencil component with another Stencil component or application. Please reach out to the maintainers of the 3rd party Stencil component or report this on the Stencil Discord server (https://chat.stenciljs.com) or comment on this similar [GitHub issue](https://github.com/stenciljs/core/issues/5457).`
     );
   }
+  const elm = hostRef.$hostElement$ ;
   const oldVal = hostRef.$instanceValues$.get(propName);
   const flags = hostRef.$flags$;
   const instance = hostRef.$lazyInstance$ ;
@@ -993,6 +1058,27 @@ var setValue = (ref, propName, newVal, cmpMeta) => {
   const didValueChange = newVal !== oldVal && !areBothNaN;
   if ((!(flags & 8 /* isConstructingInstance */) || oldVal === void 0) && didValueChange) {
     hostRef.$instanceValues$.set(propName, newVal);
+    if (cmpMeta.$watchers$) {
+      const watchMethods = cmpMeta.$watchers$[propName];
+      if (watchMethods) {
+        watchMethods.map((watcher) => {
+          try {
+            const [[watchMethodName, watcherFlags]] = Object.entries(watcher);
+            if (flags & 128 /* isWatchReady */ || watcherFlags & 1 /* Immediate */) {
+              if (!instance) {
+                hostRef.$fetchedCbList$.push(() => {
+                  hostRef.$lazyInstance$[watchMethodName](newVal, oldVal, propName);
+                });
+              } else {
+                instance[watchMethodName](newVal, oldVal, propName);
+              }
+            }
+          } catch (e) {
+            consoleError(e, elm);
+          }
+        });
+      }
+    }
     if (flags & 2 /* hasRendered */) {
       if (instance.componentShouldUpdate) {
         const shouldUpdate = instance.componentShouldUpdate(newVal, oldVal, propName);
@@ -1012,6 +1098,17 @@ var proxyComponent = (Cstr, cmpMeta, flags) => {
   var _a, _b;
   const prototype = Cstr.prototype;
   if (cmpMeta.$members$ || BUILD.propChangeCallback) {
+    {
+      if (Cstr.watchers && !cmpMeta.$watchers$) {
+        cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
+      }
+      if (Cstr.deserializers && !cmpMeta.$deserializers$) {
+        cmpMeta.$deserializers$ = Cstr.deserializers;
+      }
+      if (Cstr.serializers && !cmpMeta.$serializers$) {
+        cmpMeta.$serializers$ = Cstr.serializers;
+      }
+    }
     const members = Object.entries((_a = cmpMeta.$members$) != null ? _a : {});
     members.map(([memberName, [memberFlags]]) => {
       if ((memberFlags & 31 /* Prop */ || (flags & 2 /* proxyState */) && memberFlags & 32 /* State */)) {
@@ -1164,6 +1261,11 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
           throw new Error(`Constructor for "${cmpMeta.$tagName$}#${hostRef.$modeName$}" was not found`);
         }
         if (!Cstr.isProxied) {
+          {
+            cmpMeta.$watchers$ = normalizeWatchers(Cstr.watchers);
+            cmpMeta.$serializers$ = Cstr.serializers;
+            cmpMeta.$deserializers$ = Cstr.deserializers;
+          }
           proxyComponent(Cstr, cmpMeta, 2 /* proxyState */);
           Cstr.isProxied = true;
         }
@@ -1179,6 +1281,9 @@ var initializeComponent = async (elm, hostRef, cmpMeta, hmrVersionId) => {
         {
           hostRef.$flags$ &= -9 /* isConstructingInstance */;
         }
+        {
+          hostRef.$flags$ |= 128 /* isWatchReady */;
+        }
         endNewInstance();
         {
           fireConnectedCallback(hostRef.$lazyInstance$, elm);
@@ -1310,6 +1415,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   plt.$resourcesUrl$ = new URL(options.resourcesUrl || "./", win.document.baseURI).href;
   lazyBundles.map((lazyBundle) => {
     lazyBundle[1].map((compactMeta) => {
+      var _a2, _b;
       const cmpMeta = {
         $flags$: compactMeta[0],
         $tagName$: compactMeta[1],
@@ -1319,6 +1425,11 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$members$ = compactMeta[2];
       }
+      {
+        cmpMeta.$watchers$ = normalizeWatchers(compactMeta[4]);
+        cmpMeta.$serializers$ = (_a2 = compactMeta[5]) != null ? _a2 : {};
+        cmpMeta.$deserializers$ = (_b = compactMeta[6]) != null ? _b : {};
+      }
       const tagName = transformTag(cmpMeta.$tagName$);
       const HostElement = class extends HTMLElement {
         ["s-p"];
@@ -1424,6 +1535,7 @@ function transformTag(tag) {
 }
 
 exports.bootstrapLazy = bootstrapLazy;
+exports.createEvent = createEvent;
 exports.h = h;
 exports.promiseResolve = promiseResolve;
 exports.registerInstance = registerInstance;

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-BrMvRGjk.js');
+var index = require('./index-q0fPnkdL.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["my-badge.cjs",[[769,"my-badge",{"color":[1],"size":[1],"pill":[4]}]]],["my-button.cjs",[[769,"my-button",{"variant":[1],"size":[1],"disabled":[4]}]]],["my-card.cjs",[[769,"my-card",{"cardTitle":[1,"card-title"],"subtitle":[1],"elevation":[1]}]]],["my-component.cjs",[[513,"my-component",{"first":[1],"middle":[1],"last":[1]}]]]], options);
+  return index.bootstrapLazy([["my-alert.cjs",[[769,"my-alert",{"type":[1],"alertTitle":[1,"alert-title"],"dismissible":[4],"dismissed":[32]}]]],["my-badge.cjs",[[769,"my-badge",{"color":[1],"size":[1],"pill":[4]}]]],["my-button.cjs",[[769,"my-button",{"variant":[1],"size":[1],"disabled":[4]}]]],["my-card.cjs",[[769,"my-card",{"cardTitle":[1,"card-title"],"subtitle":[1],"elevation":[1]}]]],["my-component.cjs",[[513,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["my-dropdown.cjs",[[513,"my-dropdown",{"options":[1],"value":[1025],"placeholder":[1],"label":[1],"disabled":[4],"error":[1],"isOpen":[32]}]]],["my-input.cjs",[[513,"my-input",{"label":[1],"placeholder":[1],"value":[1],"type":[1],"error":[1],"disabled":[4],"required":[4]}]]],["my-modal.cjs",[[769,"my-modal",{"open":[1028],"modalTitle":[1,"modal-title"],"size":[1]},null,{"open":[{"handleOpenChange":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/my-alert.cjs.entry.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var index = require('./index-q0fPnkdL.js');
+
+const myAlertCss = () => `:host{display:block}.alert{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:8px;border-left:4px solid;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;font-size:14px;line-height:1.5}.alert-icon{font-size:16px;font-weight:700;flex-shrink:0;margin-top:1px}.alert-content{flex:1;display:flex;flex-direction:column;gap:2px}.alert-title{font-size:14px;font-weight:700}.alert-message{opacity:0.9}.alert-dismiss{background:none;border:none;font-size:14px;cursor:pointer;padding:0 4px;border-radius:4px;opacity:0.6;transition:opacity 0.15s;flex-shrink:0;line-height:1}.alert-dismiss:hover{opacity:1}.alert--success{background:#f0fdf4;border-color:#10b981;color:#065f46}.alert--success .alert-icon{color:#10b981}.alert--warning{background:#fffbeb;border-color:#f59e0b;color:#78350f}.alert--warning .alert-icon{color:#f59e0b}.alert--error{background:#fef2f2;border-color:#ef4444;color:#7f1d1d}.alert--error .alert-icon{color:#ef4444}.alert--info{background:#eff6ff;border-color:#3b82f6;color:#1e3a8a}.alert--info .alert-icon{color:#3b82f6}`;
+
+const MyAlert = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.myDismiss = index.createEvent(this, "myDismiss");
+    }
+    type = 'info';
+    alertTitle = '';
+    dismissible = false;
+    dismissed = false;
+    myDismiss;
+    icons = {
+        success: '✓',
+        warning: '⚠',
+        error: '✕',
+        info: 'ℹ',
+    };
+    dismiss() {
+        this.dismissed = true;
+        this.myDismiss.emit();
+    }
+    render() {
+        if (this.dismissed)
+            return null;
+        return (index.h("div", { class: `alert alert--${this.type}`, role: "alert" }, index.h("span", { class: "alert-icon" }, this.icons[this.type]), index.h("div", { class: "alert-content" }, this.alertTitle && index.h("strong", { class: "alert-title" }, this.alertTitle), index.h("span", { class: "alert-message" }, index.h("slot", null))), this.dismissible && (index.h("button", { class: "alert-dismiss", onClick: () => this.dismiss() }, "\u2715"))));
+    }
+};
+MyAlert.style = myAlertCss();
+
+exports.my_alert = MyAlert;

package/dist/cjs/my-badge.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BrMvRGjk.js');
+var index = require('./index-q0fPnkdL.js');
 
 const myBadgeCss = () => `:host{display:inline-block}.badge{display:inline-flex;align-items:center;justify-content:center;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;font-weight:600;border-radius:4px;transition:all 0.2s ease}.badge--pill{border-radius:100px}.badge--small{padding:4px 8px;font-size:11px;line-height:1}.badge--medium{padding:6px 12px;font-size:13px;line-height:1}.badge--large{padding:8px 16px;font-size:15px;line-height:1}.badge--success{background-color:#10b981;color:white}.badge--warning{background-color:#f59e0b;color:white}.badge--error{background-color:#ef4444;color:white}.badge--info{background-color:#3b82f6;color:white}.badge--neutral{background-color:#6b7280;color:white}.badge:hover{opacity:0.9;transform:scale(1.05)}`;
 
@@ -21,7 +21,7 @@ const MyBadge = class {
      */
     pill = false;
     render() {
-        return (index.h("span", { key: '33a316730b54199e32c7ecbd1160997411e5ff95', class: `badge badge--${this.color} badge--${this.size} ${this.pill ? 'badge--pill' : ''}` }, index.h("slot", { key: 'eb7a3e46ea27e7d714dcc60723ca7f5801204674' })));
+        return (index.h("span", { key: '9c76b0118c984ac578169d0f9df317fd3b99abcf', class: `badge badge--${this.color} badge--${this.size} ${this.pill ? 'badge--pill' : ''}` }, index.h("slot", { key: 'b98fb68c38ee63166be5dbb315d7b68faa0d0ce2' })));
     }
 };
 MyBadge.style = myBadgeCss();

package/dist/cjs/my-button.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BrMvRGjk.js');
+var index = require('./index-q0fPnkdL.js');
 
 const myButtonCss = () => `:host{display:inline-block}.btn{font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all 0.2s ease;text-align:center;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 12px rgba(0, 0, 0, 0.15)}.btn:active:not(:disabled){transform:translateY(0)}.btn:disabled{opacity:0.5;cursor:not-allowed}.btn--small{padding:8px 16px;font-size:14px}.btn--medium{padding:12px 24px;font-size:16px}.btn--large{padding:16px 32px;font-size:18px}.btn--primary{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:white}.btn--primary:hover:not(:disabled){background:linear-gradient(135deg, #5568d3 0%, #63408a 100%)}.btn--secondary{background:linear-gradient(135deg, #f093fb 0%, #f5576c 100%);color:white}.btn--secondary:hover:not(:disabled){background:linear-gradient(135deg, #d97ee0 0%, #db4a5d 100%)}.btn--danger{background:linear-gradient(135deg, #fa709a 0%, #fee140 100%);color:#333}.btn--danger:hover:not(:disabled){background:linear-gradient(135deg, #e55d87 0%, #e5ca2b 100%)}`;
 
@@ -21,7 +21,7 @@ const MyButton = class {
      */
     disabled = false;
     render() {
-        return (index.h("button", { key: '94d04ac3ac7441f76510463322200c2b7a01d569', class: `btn btn--${this.variant} btn--${this.size}`, disabled: this.disabled }, index.h("slot", { key: '80f6c9a56010f80635288b16804d33c780232da5' })));
+        return (index.h("button", { key: '37743c78738521a38d5d09dd486c38a9a21f8b5b', class: `btn btn--${this.variant} btn--${this.size}`, disabled: this.disabled }, index.h("slot", { key: '89e08ccf936a61509c8a4601324b8f1909dd6f59' })));
     }
 };
 MyButton.style = myButtonCss();

package/dist/cjs/my-card.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BrMvRGjk.js');
+var index = require('./index-q0fPnkdL.js');
 
 const myCardCss = () => `:host{display:block}.card{background:white;border-radius:12px;overflow:hidden;transition:all 0.3s ease;border:1px solid #e5e7eb}.card:hover{transform:translateY(-4px)}.card--low{box-shadow:0 1px 3px rgba(0, 0, 0, 0.1)}.card--low:hover{box-shadow:0 4px 6px rgba(0, 0, 0, 0.1)}.card--medium{box-shadow:0 4px 6px rgba(0, 0, 0, 0.1)}.card--medium:hover{box-shadow:0 10px 15px rgba(0, 0, 0, 0.15)}.card--high{box-shadow:0 10px 15px rgba(0, 0, 0, 0.15)}.card--high:hover{box-shadow:0 20px 25px rgba(0, 0, 0, 0.2)}.card__header{padding:24px 24px 0}.card__title{margin:0;font-size:24px;font-weight:700;color:#1f2937;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif}.card__subtitle{margin:8px 0 0;font-size:14px;color:#6b7280;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif}.card__content{padding:24px;color:#374151;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;line-height:1.6}.card__footer{padding:0 24px 24px;display:flex;gap:12px;align-items:center}.card__footer:empty{display:none}`;
 
@@ -21,7 +21,7 @@ const MyCard = class {
      */
     elevation = 'medium';
     render() {
-        return (index.h("div", { key: '771331816e786b93963b10dcc4577c89da6385c5', class: `card card--${this.elevation}` }, this.cardTitle && (index.h("div", { key: '525c2dfdda668cb45895f6f1e9b55e6923b9538d', class: "card__header" }, index.h("h3", { key: 'a3025832b6ce60e73dce68f575bca6fbb1143913', class: "card__title" }, this.cardTitle), this.subtitle && index.h("p", { key: '3c3f094449a06aa41b63db17b3ab27e7e29be437', class: "card__subtitle" }, this.subtitle))), index.h("div", { key: '628c69443cf48fb07ee98fde44c0c2f6de148ed5', class: "card__content" }, index.h("slot", { key: 'f0c2c156603f2179314e7c58aabefbeda3b2e911' })), index.h("div", { key: '8f5a30d595399c6a606a5cde67c393aca93e3d0d', class: "card__footer" }, index.h("slot", { key: '1cb72bdc25ce96673d85c9fc86ff5661975cd412', name: "footer" }))));
+        return (index.h("div", { key: '1cc6f81c704aacbb729869b8aaeb76e2b4d53ff3', class: `card card--${this.elevation}` }, this.cardTitle && (index.h("div", { key: 'c6d63ec9950cedd07fd0b48bb950ef56d9ac8345', class: "card__header" }, index.h("h3", { key: '0f74084a20a4526366f6ef72ee054171af37c9d7', class: "card__title" }, this.cardTitle), this.subtitle && index.h("p", { key: 'd74199debd939f6921cb464ac43ed7bae367a170', class: "card__subtitle" }, this.subtitle))), index.h("div", { key: '4a283a4606d514a7fd493ea32aa686e82cf2edf8', class: "card__content" }, index.h("slot", { key: 'fcfb442bf91417cbed4ffb3b4825df575669cde0' })), index.h("div", { key: '73e18535c4f4fea108c8f5f846eebaf7ec299f54', class: "card__footer" }, index.h("slot", { key: 'd66f75ecb97d1663a124c69c7956d6e6556b82fa', name: "footer" }))));
     }
 };
 MyCard.style = myCardCss();

package/dist/cjs/my-component.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BrMvRGjk.js');
+var index = require('./index-q0fPnkdL.js');
 var index$1 = require('./index.cjs.js');
 
 const myComponentCss = () => `:host{display:block}`;
@@ -25,7 +25,7 @@ const MyComponent = class {
         return index$1.format(this.first, this.middle, this.last);
     }
     render() {
-        return index.h("div", { key: '543ff9a15c7d307e7e59a1143b033faeee29b1cb' }, "Hello, World! I'm ", this.getText());
+        return index.h("div", { key: '5c6bcb6d7c69409ec822ac4a1c31816bdbbe2bc2' }, "Hello, World! I'm ", this.getText());
     }
 };
 MyComponent.style = myComponentCss();

package/dist/cjs/my-dropdown.cjs.entry.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var index = require('./index-q0fPnkdL.js');
+
+const myDropdownCss = () => `:host{display:block}.dropdown-wrapper{display:flex;flex-direction:column;gap:6px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif}.dropdown-label{font-size:14px;font-weight:600;color:#374151}.dropdown{position:relative}.dropdown-trigger{width:100%;padding:10px 14px;font-size:15px;border:2px solid #d1d5db;border-radius:8px;background:#fff;color:#111827;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px;transition:border-color 0.2s, box-shadow 0.2s;text-align:left;box-sizing:border-box}.dropdown-trigger:hover:not(:disabled){border-color:#667eea}.dropdown--open .dropdown-trigger{border-color:#667eea;box-shadow:0 0 0 3px rgba(102, 126, 234, 0.15)}.dropdown--disabled .dropdown-trigger{background:#f3f4f6;color:#9ca3af;cursor:not-allowed}.dropdown-placeholder{color:#9ca3af}.dropdown-arrow{font-size:11px;color:#6b7280;flex-shrink:0}.dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:2px solid #667eea;border-radius:8px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.12);list-style:none;margin:0;padding:4px;z-index:100;max-height:240px;overflow-y:auto}.dropdown-item{padding:10px 12px;border-radius:6px;cursor:pointer;font-size:15px;color:#111827;transition:background 0.15s}.dropdown-item:hover{background:#f3f4f6}.dropdown-item--selected{background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:white}.dropdown-item--selected:hover{background:linear-gradient(135deg, #5568d3 0%, #63408a 100%)}.dropdown-wrapper--error .dropdown-trigger{border-color:#ef4444}.dropdown-error{font-size:13px;color:#ef4444}`;
+
+const MyDropdown = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.myChange = index.createEvent(this, "myChange");
+    }
+    options = [];
+    value = '';
+    placeholder = 'Select an option';
+    label = '';
+    disabled = false;
+    error = '';
+    isOpen = false;
+    myChange;
+    get parsedOptions() {
+        if (typeof this.options === 'string') {
+            try {
+                return JSON.parse(this.options);
+            }
+            catch {
+                return [];
+            }
+        }
+        return this.options;
+    }
+    get selectedLabel() {
+        const found = this.parsedOptions.find(o => o.value === this.value);
+        return found ? found.label : this.placeholder;
+    }
+    select(value) {
+        this.value = value;
+        this.myChange.emit(value);
+        this.isOpen = false;
+    }
+    render() {
+        return (index.h("div", { key: '5ba78bcc60f2eef7145873c29af8a2ff57c07728', class: `dropdown-wrapper ${this.error ? 'dropdown-wrapper--error' : ''}` }, this.label && index.h("label", { key: 'ebc13c625fd27fe64806fed5590aedefa9470b85', class: "dropdown-label" }, this.label), index.h("div", { key: '529ee15dc9ed0fcfde80f634bba4fe91ef250d5c', class: `dropdown ${this.isOpen ? 'dropdown--open' : ''} ${this.disabled ? 'dropdown--disabled' : ''}` }, index.h("button", { key: 'd5fe770674f4f6ef929febc373ddd1278ed91b1f', class: "dropdown-trigger", disabled: this.disabled, onClick: () => !this.disabled && (this.isOpen = !this.isOpen) }, index.h("span", { key: '02ed94363d6c142bad3b36b17ac5326a019485a9', class: !this.value ? 'dropdown-placeholder' : '' }, this.selectedLabel), index.h("span", { key: '10c1aed78e2655294b0ec0db17a178f86ddcc2bf', class: "dropdown-arrow" }, this.isOpen ? '▲' : '▼')), this.isOpen && (index.h("ul", { key: '4679e01162793d3dca7cdbc3cc932c2d33718d45', class: "dropdown-menu" }, this.parsedOptions.map(option => (index.h("li", { class: `dropdown-item ${option.value === this.value ? 'dropdown-item--selected' : ''}`, onClick: () => this.select(option.value) }, option.label)))))), this.error && index.h("span", { key: '71091a78c62997f1d64953b0a7251be9d184493d', class: "dropdown-error" }, this.error)));
+    }
+};
+MyDropdown.style = myDropdownCss();
+
+exports.my_dropdown = MyDropdown;

package/dist/cjs/my-input.cjs.entry.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var index = require('./index-q0fPnkdL.js');
+
+const myInputCss = () => `:host{display:block}.input-wrapper{display:flex;flex-direction:column;gap:6px;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif}.input-label{font-size:14px;font-weight:600;color:#374151}.input-required{color:#ef4444;margin-left:2px}.input-field{padding:10px 14px;font-size:15px;border:2px solid #d1d5db;border-radius:8px;outline:none;transition:border-color 0.2s ease, box-shadow 0.2s ease;background:#fff;color:#111827;width:100%;box-sizing:border-box}.input-field:focus{border-color:#667eea;box-shadow:0 0 0 3px rgba(102, 126, 234, 0.15)}.input-field:disabled{background:#f3f4f6;color:#9ca3af;cursor:not-allowed}.input-wrapper--error .input-field{border-color:#ef4444}.input-wrapper--error .input-field:focus{box-shadow:0 0 0 3px rgba(239, 68, 68, 0.15)}.input-error{font-size:13px;color:#ef4444}`;
+
+const MyInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.myChange = index.createEvent(this, "myChange");
+        this.myBlur = index.createEvent(this, "myBlur");
+    }
+    label = '';
+    placeholder = '';
+    value = '';
+    type = 'text';
+    error = '';
+    disabled = false;
+    required = false;
+    myChange;
+    myBlur;
+    render() {
+        return (index.h("div", { key: '9ee947b792e9829d2aa329b5314ea61515e460b1', class: `input-wrapper ${this.error ? 'input-wrapper--error' : ''}` }, this.label && (index.h("label", { key: 'f0e912275821438feb4518ed2618a49971625470', class: "input-label" }, this.label, this.required && index.h("span", { key: 'c7033d3974315c8fd4a25b7f408f263852b47920', class: "input-required" }, "*"))), index.h("input", { key: 'e5858925769f01801051fe54da86bd805b3594e2', class: "input-field", type: this.type, placeholder: this.placeholder, value: this.value, disabled: this.disabled, onInput: (e) => this.myChange.emit(e.target.value), onBlur: () => this.myBlur.emit() }), this.error && index.h("span", { key: 'f07db0cbdc2d9d91a48ea3cb67e74cc56f039ee6', class: "input-error" }, this.error)));
+    }
+};
+MyInput.style = myInputCss();
+
+exports.my_input = MyInput;

package/dist/cjs/my-modal.cjs.entry.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var index = require('./index-q0fPnkdL.js');
+
+const myModalCss = () => `:host{display:contents}.modal-overlay{position:fixed;inset:0;background:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;box-sizing:border-box}.modal{background:#fff;border-radius:12px;box-shadow:0 20px 60px rgba(0, 0, 0, 0.3);display:flex;flex-direction:column;max-height:90vh;width:100%;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;animation:modal-in 0.2s ease}@keyframes modal-in{from{opacity:0;transform:scale(0.95) translateY(-10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal--small{max-width:400px}.modal--medium{max-width:560px}.modal--large{max-width:800px}.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid #e5e7eb}.modal-title{font-size:18px;font-weight:700;color:#111827}.modal-close{background:none;border:none;font-size:18px;color:#6b7280;cursor:pointer;padding:4px 8px;border-radius:6px;line-height:1;transition:background 0.15s}.modal-close:hover{background:#f3f4f6;color:#111827}.modal-body{padding:24px;overflow-y:auto;flex:1;color:#374151;font-size:15px;line-height:1.6}.modal-footer{padding:16px 24px;border-top:1px solid #e5e7eb;display:flex;justify-content:flex-end;gap:12px}.modal-footer:empty{display:none}`;
+
+const MyModal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.myClose = index.createEvent(this, "myClose");
+    }
+    open = false;
+    modalTitle = '';
+    size = 'medium';
+    myClose;
+    handleOpenChange(open) {
+        document.body.style.overflow = open ? 'hidden' : '';
+    }
+    close() {
+        this.open = false;
+        this.myClose.emit();
+    }
+    render() {
+        if (!this.open)
+            return null;
+        return (index.h("div", { class: "modal-overlay", onClick: () => this.close() }, index.h("div", { class: `modal modal--${this.size}`, onClick: (e) => e.stopPropagation() }, index.h("div", { class: "modal-header" }, index.h("span", { class: "modal-title" }, this.modalTitle), index.h("button", { class: "modal-close", onClick: () => this.close() }, "\u2715")), index.h("div", { class: "modal-body" }, index.h("slot", null)), index.h("div", { class: "modal-footer" }, index.h("slot", { name: "footer" })))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "handleOpenChange": 0
+            }]
+    }; }
+};
+MyModal.style = myModalCss();
+
+exports.my_modal = MyModal;

package/dist/cjs/stencil-library.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BrMvRGjk.js');
+var index = require('./index-q0fPnkdL.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["my-badge.cjs",[[769,"my-badge",{"color":[1],"size":[1],"pill":[4]}]]],["my-button.cjs",[[769,"my-button",{"variant":[1],"size":[1],"disabled":[4]}]]],["my-card.cjs",[[769,"my-card",{"cardTitle":[1,"card-title"],"subtitle":[1],"elevation":[1]}]]],["my-component.cjs",[[513,"my-component",{"first":[1],"middle":[1],"last":[1]}]]]], options);
+  return index.bootstrapLazy([["my-alert.cjs",[[769,"my-alert",{"type":[1],"alertTitle":[1,"alert-title"],"dismissible":[4],"dismissed":[32]}]]],["my-badge.cjs",[[769,"my-badge",{"color":[1],"size":[1],"pill":[4]}]]],["my-button.cjs",[[769,"my-button",{"variant":[1],"size":[1],"disabled":[4]}]]],["my-card.cjs",[[769,"my-card",{"cardTitle":[1,"card-title"],"subtitle":[1],"elevation":[1]}]]],["my-component.cjs",[[513,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["my-dropdown.cjs",[[513,"my-dropdown",{"options":[1],"value":[1025],"placeholder":[1],"label":[1],"disabled":[4],"error":[1],"isOpen":[32]}]]],["my-input.cjs",[[513,"my-input",{"label":[1],"placeholder":[1],"value":[1],"type":[1],"error":[1],"disabled":[4],"required":[4]}]]],["my-modal.cjs",[[769,"my-modal",{"open":[1028],"modalTitle":[1,"modal-title"],"size":[1]},null,{"open":[{"handleOpenChange":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -1,9 +1,13 @@
 {
   "entries": [
+    "components/my-dropdown/my-dropdown.js",
+    "components/my-alert/my-alert.js",
     "components/my-badge/my-badge.js",
     "components/my-button/my-button.js",
     "components/my-card/my-card.js",
-    "components/my-component/my-component.js"
+    "components/my-component/my-component.js",
+    "components/my-input/my-input.js",
+    "components/my-modal/my-modal.js"
   ],
   "mixins": [],
   "compiler": {

package/dist/collection/components/my-alert/my-alert.css

@@ -0,0 +1,96 @@
+:host {
+  display: block;
+}
+
+.alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+  border-radius: 8px;
+  border-left: 4px solid;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.alert-icon {
+  font-size: 16px;
+  font-weight: 700;
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+.alert-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.alert-title {
+  font-size: 14px;
+  font-weight: 700;
+}
+
+.alert-message {
+  opacity: 0.9;
+}
+
+.alert-dismiss {
+  background: none;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0 4px;
+  border-radius: 4px;
+  opacity: 0.6;
+  transition: opacity 0.15s;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.alert-dismiss:hover {
+  opacity: 1;
+}
+
+/* Types */
+.alert--success {
+  background: #f0fdf4;
+  border-color: #10b981;
+  color: #065f46;
+}
+
+.alert--success .alert-icon {
+  color: #10b981;
+}
+
+.alert--warning {
+  background: #fffbeb;
+  border-color: #f59e0b;
+  color: #78350f;
+}
+
+.alert--warning .alert-icon {
+  color: #f59e0b;
+}
+
+.alert--error {
+  background: #fef2f2;
+  border-color: #ef4444;
+  color: #7f1d1d;
+}
+
+.alert--error .alert-icon {
+  color: #ef4444;
+}
+
+.alert--info {
+  background: #eff6ff;
+  border-color: #3b82f6;
+  color: #1e3a8a;
+}
+
+.alert--info .alert-icon {
+  color: #3b82f6;
+}