@manidecp/nagp-stencil-ui-kit 1.0.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,5 @@
+'use strict';
+
+//# sourceMappingURL=index.cjs.js.map
+
+//# sourceMappingURL=index.cjs.js.map

package/dist/cjs/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,15 @@
+'use strict';
+
+var index = require('./index-xXx7YX-n.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await index.globalScripts();
+  return index.bootstrapLazy([["custom-modal.cjs",[[769,"custom-modal",{"isOpen":[4,"is-open"],"modalTitle":[1,"modal-title"]}]]],["meal-slot-card.cjs",[[769,"meal-slot-card",{"day":[1],"mealType":[1,"meal-type"],"recipeName":[1,"recipe-name"]}]]],["recipe-badge.cjs",[[513,"recipe-badge",{"label":[1],"variant":[1],"color":[1]}]]],["recipe-card.cjs",[[769,"recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"imageUrl":[1,"image-url"],"prepTime":[2,"prep-time"],"isFavorite":[4,"is-favorite"],"favoriteState":[32],"toggleFavorite":[64]},null,{"isFavorite":[{"handleFavoritePropChange":0}]}]]],["recipe-rating.cjs",[[513,"recipe-rating",{"score":[2],"maxScore":[2,"max-score"],"interactive":[4],"value":[2],"max":[2],"currentScore":[32]},null,{"score":[{"handleScoreChange":0}]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;
+//# sourceMappingURL=loader.cjs.js.map
+
+//# sourceMappingURL=loader.cjs.js.map

package/dist/cjs/loader.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.cjs.js","sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n  if (typeof window === 'undefined') return undefined;\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"names":["globalScripts","bootstrapLazy"],"mappings":";;;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS;AACrD,EAAE,MAAMA,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D;;;;;"}

package/dist/cjs/meal-slot-card.cjs.entry.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var index = require('./index-xXx7YX-n.js');
+
+const mealSlotCardCss = () => `:host{--meal-card-bg:#fff7ed;--meal-card-border:#fed7aa;--meal-card-text:#111827;--meal-card-subtle:#9a5b00;--meal-card-accent:#f97316;display:block}.meal-slot-card{background:var(--meal-card-bg);border:1px solid var(--meal-card-border);border-radius:18px;padding:1rem;max-width:280px;box-shadow:0 10px 24px rgba(249, 115, 22, 0.08)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;color:var(--meal-card-subtle)}.day-label{font-weight:700}.meal-pill{display:inline-flex;padding:0.25rem 0.55rem;border-radius:999px;background:rgba(249, 115, 22, 0.12);color:var(--meal-card-accent);font-size:0.7rem;font-weight:700;text-transform:uppercase}.content h3{margin:0 0 0.5rem;color:var(--meal-card-text);font-size:1.2rem}.actions{display:flex;justify-content:space-between;gap:0.5rem;margin-top:1rem}button{border:none;border-radius:10px;padding:0.5rem 0.8rem;font-weight:700;cursor:pointer}button.primary{background:var(--meal-card-accent);color:white}button.secondary{background:#fff;color:#374151;border:1px solid rgba(15, 23, 42, 0.12)}`;
+
+const MealSlotCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.removeMeal = index.createEvent(this, "removeMeal");
+        this.addMeal = index.createEvent(this, "addMeal");
+    }
+    day = 'Monday';
+    mealType = 'Dinner';
+    recipeName = 'No meal selected';
+    removeMeal;
+    addMeal;
+    handleAddMeal = () => {
+        this.addMeal.emit({ day: this.day, mealType: this.mealType });
+    };
+    handleRemoveMeal = () => {
+        this.removeMeal.emit({ day: this.day, mealType: this.mealType });
+    };
+    render() {
+        return (index.h("article", { key: 'fa9eb478dc830300b8cb795e315e630222c99ae9', class: "meal-slot-card" }, index.h("header", { key: 'da28c71efc7e22dea6b3c0e31a0a002cd49407e1', class: "card-header" }, index.h("span", { key: '690e9ae3282df47b991fcf9903b0fc549b76a455', class: "day-label" }, this.day), index.h("span", { key: '50bc7ed1f5aae519fa9233cdccc02fae13c4fabb', class: "meal-pill" }, this.mealType)), index.h("div", { key: '157360002668cea4b02436cf7afedb6232007f77', class: "content" }, index.h("h3", { key: '5c9121084ad9f1b152b51e2db034576cf38f5b03' }, this.recipeName), index.h("slot", { key: 'b60f501af76e15758c53f29bd66dbab7f196c859' })), index.h("div", { key: '2572b419e6e0d2f74027e0bf6ef2b1a83245b9ae', class: "actions" }, index.h("button", { key: '610ea49c7bc1f9b43ef2cff9855a237168c95408', type: "button", class: "primary", onClick: this.handleAddMeal }, "Add meal"), index.h("button", { key: '0511efe9d57aee3243e06ad43294cd1c4cc2b31b', type: "button", class: "secondary", onClick: this.handleRemoveMeal }, "Remove"))));
+    }
+};
+MealSlotCard.style = mealSlotCardCss();
+
+exports.meal_slot_card = MealSlotCard;
+//# sourceMappingURL=meal-slot-card.entry.cjs.js.map
+
+//# sourceMappingURL=meal-slot-card.cjs.entry.js.map

package/dist/cjs/meal-slot-card.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"meal-slot-card.cjs.entry.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,wjCAAwjC,CAAC;;MCO3kC,YAAY,GAAA,MAAA;;;;;;IACf,GAAG,GAAW,QAAQ;IACtB,QAAQ,GAAqC,QAAQ;IACrD,UAAU,GAAW,kBAAkB;AAEtC,IAAA,UAAU;AACV,IAAA,OAAO;IAER,aAAa,GAAG,MAAK;AAC3B,QAAA,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;AAC/D,KAAC;IAEO,gBAAgB,GAAG,MAAK;AAC9B,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC;AAClE,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,QACEA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAC,gBAAgB,EAAA,EAC7BA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,KAAK,EAAC,aAAa,EAAA,EACzBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,IAAE,IAAI,CAAC,GAAG,CAAQ,EACzCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAA,EAAE,IAAI,CAAC,QAAQ,CAAQ,CACvC,EAETA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAK,IAAI,CAAC,UAAU,CAAM,EAC1BA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,EAENA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,SAAS,EAAA,EAClBA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,EAAA,EAAA,UAAA,CAExD,EACTA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,IAAI,CAAC,gBAAgB,aAE7D,CACL,CACE;;;;;;;","names":["h"],"sources":["src/components/meal-slot-card/meal-slot-card.css?tag=meal-slot-card&encapsulation=shadow","src/components/meal-slot-card/meal-slot-card.tsx"],"sourcesContent":[":host {\r\n  --meal-card-bg: #fff7ed;\r\n  --meal-card-border: #fed7aa;\r\n  --meal-card-text: #111827;\r\n  --meal-card-subtle: #9a5b00;\r\n  --meal-card-accent: #f97316;\r\n  display: block;\r\n}\r\n\r\n.meal-slot-card {\r\n  background: var(--meal-card-bg);\r\n  border: 1px solid var(--meal-card-border);\r\n  border-radius: 18px;\r\n  padding: 1rem;\r\n  max-width: 280px;\r\n  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.08);\r\n}\r\n\r\n.card-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin-bottom: 0.75rem;\r\n  color: var(--meal-card-subtle);\r\n}\r\n\r\n.day-label {\r\n  font-weight: 700;\r\n}\r\n\r\n.meal-pill {\r\n  display: inline-flex;\r\n  padding: 0.25rem 0.55rem;\r\n  border-radius: 999px;\r\n  background: rgba(249, 115, 22, 0.12);\r\n  color: var(--meal-card-accent);\r\n  font-size: 0.7rem;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.content h3 {\r\n  margin: 0 0 0.5rem;\r\n  color: var(--meal-card-text);\r\n  font-size: 1.2rem;\r\n}\r\n\r\n.actions {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  gap: 0.5rem;\r\n  margin-top: 1rem;\r\n}\r\n\r\nbutton {\r\n  border: none;\r\n  border-radius: 10px;\r\n  padding: 0.5rem 0.8rem;\r\n  font-weight: 700;\r\n  cursor: pointer;\r\n}\r\n\r\nbutton.primary {\r\n  background: var(--meal-card-accent);\r\n  color: white;\r\n}\r\n\r\nbutton.secondary {\r\n  background: #fff;\r\n  color: #374151;\r\n  border: 1px solid rgba(15, 23, 42, 0.12);\r\n}\r\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'meal-slot-card',\r\n  styleUrl: 'meal-slot-card.css',\r\n  shadow: true,\r\n})\r\nexport class MealSlotCard {\r\n  @Prop() day: string = 'Monday';\r\n  @Prop() mealType: 'Breakfast' | 'Lunch' | 'Dinner' = 'Dinner';\r\n  @Prop() recipeName: string = 'No meal selected';\r\n\r\n  @Event() removeMeal: EventEmitter<{ day: string; mealType: 'Breakfast' | 'Lunch' | 'Dinner' }>;\r\n  @Event() addMeal: EventEmitter<{ day: string; mealType: 'Breakfast' | 'Lunch' | 'Dinner' }>;\r\n\r\n  private handleAddMeal = () => {\r\n    this.addMeal.emit({ day: this.day, mealType: this.mealType });\r\n  };\r\n\r\n  private handleRemoveMeal = () => {\r\n    this.removeMeal.emit({ day: this.day, mealType: this.mealType });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <article class=\"meal-slot-card\">\r\n        <header class=\"card-header\">\r\n          <span class=\"day-label\">{this.day}</span>\r\n          <span class=\"meal-pill\">{this.mealType}</span>\r\n        </header>\r\n\r\n        <div class=\"content\">\r\n          <h3>{this.recipeName}</h3>\r\n          <slot />\r\n        </div>\r\n\r\n        <div class=\"actions\">\r\n          <button type=\"button\" class=\"primary\" onClick={this.handleAddMeal}>\r\n            Add meal\r\n          </button>\r\n          <button type=\"button\" class=\"secondary\" onClick={this.handleRemoveMeal}>\r\n            Remove\r\n          </button>\r\n        </div>\r\n      </article>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/nagp-recipe-ui-kit.cjs.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var index = require('./index-xXx7YX-n.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.44.2 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('nagp-recipe-ui-kit.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await index.globalScripts();
+  return index.bootstrapLazy([["custom-modal.cjs",[[769,"custom-modal",{"isOpen":[4,"is-open"],"modalTitle":[1,"modal-title"]}]]],["meal-slot-card.cjs",[[769,"meal-slot-card",{"day":[1],"mealType":[1,"meal-type"],"recipeName":[1,"recipe-name"]}]]],["recipe-badge.cjs",[[513,"recipe-badge",{"label":[1],"variant":[1],"color":[1]}]]],["recipe-card.cjs",[[769,"recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"imageUrl":[1,"image-url"],"prepTime":[2,"prep-time"],"isFavorite":[4,"is-favorite"],"favoriteState":[32],"toggleFavorite":[64]},null,{"isFavorite":[{"handleFavoritePropChange":0}]}]]],["recipe-rating.cjs",[[513,"recipe-rating",{"score":[2],"maxScore":[2,"max-score"],"interactive":[4],"value":[2],"max":[2],"currentScore":[32]},null,{"score":[{"handleScoreChange":0}]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;
+//# sourceMappingURL=nagp-recipe-ui-kit.cjs.js.map
+
+//# sourceMappingURL=nagp-recipe-ui-kit.cjs.js.map

package/dist/cjs/nagp-recipe-ui-kit.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nagp-recipe-ui-kit.cjs.js","sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.44.2 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":["promiseResolve","globalScripts","bootstrapLazy"],"mappings":";;;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,2QAAe;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('./index-xXx7YX-n.js');
+
+const recipeBadgeCss = () => `:host{--badge-primary-bg:#f97316;--badge-secondary-bg:#e5e7eb;--badge-accent-bg:#7c3aed;--badge-text:#ffffff;display:inline-block}.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:0.45rem 0.8rem;font-size:0.7rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--badge-text)}.variant-primary{background:var(--badge-primary-bg)}.variant-secondary{background:var(--badge-secondary-bg);color:#111827}.variant-accent{background:var(--badge-accent-bg)}`;
+
+const RecipeBadge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    label = 'Featured';
+    variant = 'primary';
+    // Backward-compatible alias for the original scaffolded API.
+    color;
+    render() {
+        const style = this.color ? { background: this.color } : {};
+        return (index.h("span", { key: '35180a6a6346c97293dc0ddadb0819b7aa1ff9e5', class: { badge: true, [`variant-${this.variant}`]: true }, style: style }, this.label));
+    }
+};
+RecipeBadge.style = recipeBadgeCss();
+
+exports.recipe_badge = RecipeBadge;
+//# sourceMappingURL=recipe-badge.entry.cjs.js.map
+
+//# sourceMappingURL=recipe-badge.cjs.entry.js.map

package/dist/cjs/recipe-badge.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"recipe-badge.cjs.entry.js","mappings":";;;;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,sgBAAsgB,CAAC;;MCOxhB,WAAW,GAAA,MAAA;;;;IACd,KAAK,GAAW,UAAU;IAC1B,OAAO,GAAuC,SAAS;;AAGvD,IAAA,KAAK;IAEb,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,UAAU,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE;AAC1D,QAAA,QACEA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAA,QAAA,EAAW,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,EAAA,EAC1E,IAAI,CAAC,KAAK,CACN;;;;;;;","names":["h"],"sources":["src/components/recipe-badge/recipe-badge.css?tag=recipe-badge&encapsulation=shadow","src/components/recipe-badge/recipe-badge.tsx"],"sourcesContent":[":host {\r\n  --badge-primary-bg: #f97316;\r\n  --badge-secondary-bg: #e5e7eb;\r\n  --badge-accent-bg: #7c3aed;\r\n  --badge-text: #ffffff;\r\n  display: inline-block;\r\n}\r\n\r\n.badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 999px;\r\n  padding: 0.45rem 0.8rem;\r\n  font-size: 0.7rem;\r\n  font-weight: 800;\r\n  letter-spacing: 0.06em;\r\n  text-transform: uppercase;\r\n  color: var(--badge-text);\r\n}\r\n\r\n.variant-primary {\r\n  background: var(--badge-primary-bg);\r\n}\r\n\r\n.variant-secondary {\r\n  background: var(--badge-secondary-bg);\r\n  color: #111827;\r\n}\r\n\r\n.variant-accent {\r\n  background: var(--badge-accent-bg);\r\n}\r\n","import { Component, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'recipe-badge',\r\n  styleUrl: 'recipe-badge.css',\r\n  shadow: true,\r\n})\r\nexport class RecipeBadge {\r\n  @Prop() label: string = 'Featured';\r\n  @Prop() variant: 'primary' | 'secondary' | 'accent' = 'primary';\r\n\r\n  // Backward-compatible alias for the original scaffolded API.\r\n  @Prop() color: string;\r\n\r\n  render() {\r\n    const style = this.color ? { background: this.color } : {};\r\n    return (\r\n      <span class={{ badge: true, [`variant-${this.variant}`]: true }} style={style}>\r\n        {this.label}\r\n      </span>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -0,0 +1,59 @@
+'use strict';
+
+var index = require('./index-xXx7YX-n.js');
+
+const recipeCardCss = () => `:host{--recipe-card-bg:#ffffff;--recipe-card-text:#111827;--recipe-card-muted:#6b7280;--recipe-card-accent:#f97316;--recipe-card-border:#e5e7eb;display:block}.recipe-card{background:var(--recipe-card-bg);border:1px solid var(--recipe-card-border);border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(15, 23, 42, 0.08);cursor:pointer;transition:transform 0.2s ease, box-shadow 0.2s ease}.recipe-card:hover{transform:translateY(-2px);box-shadow:0 18px 32px rgba(15, 23, 42, 0.12)}.image-wrap{position:relative;height:180px;background:linear-gradient(135deg, #fff7ed, #ffedd5)}.image-wrap img,.image-placeholder{width:100%;height:100%;display:block;object-fit:cover}.image-placeholder{display:grid;place-items:center;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--recipe-card-accent)}.favorite{position:absolute;top:12px;right:12px;width:2.5rem;height:2.5rem;border:none;border-radius:50%;background:rgba(255, 255, 255, 0.9);color:#9ca3af;font-size:1.2rem;cursor:pointer}.favorite.active{background:rgba(249, 115, 22, 0.12);color:var(--recipe-card-accent)}.card-content{padding:1rem}.meta-row{display:flex;justify-content:flex-end;margin-bottom:0.5rem}.prep-time{font-size:0.75rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--recipe-card-accent)}h2{margin:0 0 0.75rem;font-size:1.25rem;color:var(--recipe-card-text)}.actions-row{display:flex;justify-content:flex-end;align-items:center;gap:0.5rem}`;
+
+const RecipeCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.cardClick = index.createEvent(this, "cardClick");
+        this.favoriteToggle = index.createEvent(this, "favoriteToggle");
+    }
+    recipeId = 'recipe-1';
+    recipeTitle = 'Spicy Pasta';
+    imageUrl = '';
+    prepTime = 30;
+    isFavorite = false;
+    favoriteState = false;
+    cardClick;
+    favoriteToggle;
+    componentWillLoad() {
+        this.favoriteState = this.isFavorite;
+    }
+    handleFavoritePropChange(newValue) {
+        this.favoriteState = newValue;
+    }
+    async toggleFavorite() {
+        this.favoriteState = !this.favoriteState;
+        this.favoriteToggle.emit({
+            recipeId: this.recipeId,
+            recipeTitle: this.recipeTitle,
+            isFavorite: this.favoriteState,
+        });
+    }
+    handleCardClick = () => {
+        this.cardClick.emit({
+            recipeId: this.recipeId,
+            recipeTitle: this.recipeTitle,
+        });
+    };
+    handleFavoriteClick = (event) => {
+        event.stopPropagation();
+        this.toggleFavorite();
+    };
+    render() {
+        return (index.h("article", { key: 'ea8d57192146e0c875ba9c357ea5e65ddf4e2c5e', class: "recipe-card", onClick: this.handleCardClick }, index.h("div", { key: 'f6dfc3b4481988fd07d23cd0548f1cb1984942f5', class: "image-wrap" }, this.imageUrl ? (index.h("img", { src: this.imageUrl, alt: this.recipeTitle })) : (index.h("div", { class: "image-placeholder" }, "Recipe")), index.h("button", { key: 'f024d1784c817c7bb2ad937444365be8d192d4f8', type: "button", class: { favorite: true, active: this.favoriteState }, "aria-label": this.favoriteState ? 'Remove favorite' : 'Add favorite', onClick: this.handleFavoriteClick }, this.favoriteState ? '♥' : '♡')), index.h("div", { key: 'e44fb2e9d90c8ef20d05a1f1baabc7d1e1b7a070', class: "card-content" }, index.h("div", { key: 'e34a861b6f82d9368d400d0115a329bf3a9b91f4', class: "meta-row" }, index.h("span", { key: '925e5a0682f4923d51c28b07348b403ddac19065', class: "prep-time" }, this.prepTime, " min")), index.h("h2", { key: '7a576e9ed4af7fa83a5e34400ad2a0cfb32f7a1c' }, this.recipeTitle), index.h("div", { key: 'd4f3a287d889da78d1a785183aa43c53f9546c36', class: "actions-row" }, index.h("slot", { key: 'aeb6163d6243fbc55cf98f5fd7c3fbbf59a1a6e9', name: "actions" })))));
+    }
+    static get watchers() { return {
+        "isFavorite": [{
+                "handleFavoritePropChange": 0
+            }]
+    }; }
+};
+RecipeCard.style = recipeCardCss();
+
+exports.recipe_card = RecipeCard;
+//# sourceMappingURL=recipe-card.entry.cjs.js.map
+
+//# sourceMappingURL=recipe-card.cjs.entry.js.map

package/dist/cjs/recipe-card.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"recipe-card.cjs.entry.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,s7CAAs7C,CAAC;;MCOv8C,UAAU,GAAA,MAAA;;;;;;IACb,QAAQ,GAAW,UAAU;IAC7B,WAAW,GAAW,aAAa;IACnC,QAAQ,GAAW,EAAE;IACrB,QAAQ,GAAW,EAAE;IACrB,UAAU,GAAY,KAAK;IAE1B,aAAa,GAAY,KAAK;AAE9B,IAAA,SAAS;AACT,IAAA,cAAc;IAEvB,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,UAAU;;AAItC,IAAA,wBAAwB,CAAC,QAAiB,EAAA;AACxC,QAAA,IAAI,CAAC,aAAa,GAAG,QAAQ;;AAI/B,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,IAAI,CAAC,aAAa,GAAG,CAAC,IAAI,CAAC,aAAa;AACxC,QAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;YACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,UAAU,EAAE,IAAI,CAAC,aAAa;AAC/B,SAAA,CAAC;;IAGI,eAAe,GAAG,MAAK;AAC7B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,WAAW,EAAE,IAAI,CAAC,WAAW;AAC9B,SAAA,CAAC;AACJ,KAAC;AAEO,IAAA,mBAAmB,GAAG,CAAC,KAAY,KAAI;QAC7C,KAAK,CAAC,eAAe,EAAE;QACvB,IAAI,CAAC,cAAc,EAAE;AACvB,KAAC;IAED,MAAM,GAAA;QACJ,QACEA,OAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,eAAe,EAAA,EACxDA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACpB,IAAI,CAAC,QAAQ,IACZA,OAAA,CAAA,KAAA,EAAA,EAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,EAAA,CAAI,KAElDA,OAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,mBAAmB,aAAa,CAC5C,EACDA,OAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,aAAa,EAAE,gBACzC,IAAI,CAAC,aAAa,GAAG,iBAAiB,GAAG,cAAc,EACnE,OAAO,EAAE,IAAI,CAAC,mBAAmB,EAAA,EAEhC,IAAI,CAAC,aAAa,GAAG,GAAG,GAAG,GAAG,CACxB,CACL,EAENA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvBA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EACnBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,WAAW,EAAA,EAAE,IAAI,CAAC,QAAQ,SAAY,CAC9C,EACNA,OAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAK,IAAI,CAAC,WAAW,CAAM,EAC3BA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAA,EACtBA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACF,CACE;;;;;;;;;;;;","names":["h"],"sources":["src/components/recipe-card/recipe-card.css?tag=recipe-card&encapsulation=shadow","src/components/recipe-card/recipe-card.tsx"],"sourcesContent":[":host {\r\n  --recipe-card-bg: #ffffff;\r\n  --recipe-card-text: #111827;\r\n  --recipe-card-muted: #6b7280;\r\n  --recipe-card-accent: #f97316;\r\n  --recipe-card-border: #e5e7eb;\r\n  display: block;\r\n}\r\n\r\n.recipe-card {\r\n  background: var(--recipe-card-bg);\r\n  border: 1px solid var(--recipe-card-border);\r\n  border-radius: 18px;\r\n  overflow: hidden;\r\n  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);\r\n  cursor: pointer;\r\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n}\r\n\r\n.recipe-card:hover {\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.12);\r\n}\r\n\r\n.image-wrap {\r\n  position: relative;\r\n  height: 180px;\r\n  background: linear-gradient(135deg, #fff7ed, #ffedd5);\r\n}\r\n\r\n.image-wrap img,\r\n.image-placeholder {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n  object-fit: cover;\r\n}\r\n\r\n.image-placeholder {\r\n  display: grid;\r\n  place-items: center;\r\n  font-weight: 700;\r\n  letter-spacing: 0.08em;\r\n  text-transform: uppercase;\r\n  color: var(--recipe-card-accent);\r\n}\r\n\r\n.favorite {\r\n  position: absolute;\r\n  top: 12px;\r\n  right: 12px;\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n  border: none;\r\n  border-radius: 50%;\r\n  background: rgba(255, 255, 255, 0.9);\r\n  color: #9ca3af;\r\n  font-size: 1.2rem;\r\n  cursor: pointer;\r\n}\r\n\r\n.favorite.active {\r\n  background: rgba(249, 115, 22, 0.12);\r\n  color: var(--recipe-card-accent);\r\n}\r\n\r\n.card-content {\r\n  padding: 1rem;\r\n}\r\n\r\n.meta-row {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  margin-bottom: 0.5rem;\r\n}\r\n\r\n.prep-time {\r\n  font-size: 0.75rem;\r\n  font-weight: 700;\r\n  letter-spacing: 0.04em;\r\n  text-transform: uppercase;\r\n  color: var(--recipe-card-accent);\r\n}\r\n\r\nh2 {\r\n  margin: 0 0 0.75rem;\r\n  font-size: 1.25rem;\r\n  color: var(--recipe-card-text);\r\n}\r\n\r\n.actions-row {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n}\r\n","import { Component, h, Prop, State, Event, EventEmitter, Method, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'recipe-card',\r\n  styleUrl: 'recipe-card.css',\r\n  shadow: true,\r\n})\r\nexport class RecipeCard {\r\n  @Prop() recipeId: string = 'recipe-1';\r\n  @Prop() recipeTitle: string = 'Spicy Pasta';\r\n  @Prop() imageUrl: string = '';\r\n  @Prop() prepTime: number = 30;\r\n  @Prop() isFavorite: boolean = false;\r\n\r\n  @State() favoriteState: boolean = false;\r\n\r\n  @Event() cardClick: EventEmitter<{ recipeId: string; recipeTitle: string }>;\r\n  @Event() favoriteToggle: EventEmitter<{ recipeId: string; recipeTitle: string; isFavorite: boolean }>;\r\n\r\n  componentWillLoad() {\r\n    this.favoriteState = this.isFavorite;\r\n  }\r\n\r\n  @Watch('isFavorite')\r\n  handleFavoritePropChange(newValue: boolean) {\r\n    this.favoriteState = newValue;\r\n  }\r\n\r\n  @Method()\r\n  async toggleFavorite() {\r\n    this.favoriteState = !this.favoriteState;\r\n    this.favoriteToggle.emit({\r\n      recipeId: this.recipeId,\r\n      recipeTitle: this.recipeTitle,\r\n      isFavorite: this.favoriteState,\r\n    });\r\n  }\r\n\r\n  private handleCardClick = () => {\r\n    this.cardClick.emit({\r\n      recipeId: this.recipeId,\r\n      recipeTitle: this.recipeTitle,\r\n    });\r\n  };\r\n\r\n  private handleFavoriteClick = (event: Event) => {\r\n    event.stopPropagation();\r\n    this.toggleFavorite();\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <article class=\"recipe-card\" onClick={this.handleCardClick}>\r\n        <div class=\"image-wrap\">\r\n          {this.imageUrl ? (\r\n            <img src={this.imageUrl} alt={this.recipeTitle} />\r\n          ) : (\r\n            <div class=\"image-placeholder\">Recipe</div>\r\n          )}\r\n          <button\r\n            type=\"button\"\r\n            class={{ favorite: true, active: this.favoriteState }}\r\n            aria-label={this.favoriteState ? 'Remove favorite' : 'Add favorite'}\r\n            onClick={this.handleFavoriteClick}\r\n          >\r\n            {this.favoriteState ? '♥' : '♡'}\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"card-content\">\r\n          <div class=\"meta-row\">\r\n            <span class=\"prep-time\">{this.prepTime} min</span>\r\n          </div>\r\n          <h2>{this.recipeTitle}</h2>\r\n          <div class=\"actions-row\">\r\n            <slot name=\"actions\" />\r\n          </div>\r\n        </div>\r\n      </article>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/recipe-rating.cjs.entry.js

@@ -0,0 +1,62 @@
+'use strict';
+
+var index = require('./index-xXx7YX-n.js');
+
+const recipeRatingCss = () => `:host{--rating-filled:#fbbf24;--rating-empty:#d1d5db;display:inline-block}.rating{display:inline-flex;align-items:center;gap:0.15rem;font-size:1.2rem;line-height:1}.star{border:none;background:transparent;padding:0;margin:0;cursor:default;color:var(--rating-empty);user-select:none;font-size:inherit}.interactive .star{cursor:pointer}.star.filled{color:var(--rating-filled)}button.star{cursor:pointer}`;
+
+const RecipeRating = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.ratingChange = index.createEvent(this, "ratingChange");
+    }
+    score = 4;
+    maxScore = 5;
+    interactive = false;
+    // Backward-compatible aliases for the original scaffolded API.
+    value;
+    max;
+    currentScore = 0;
+    ratingChange;
+    get effectiveScore() {
+        return this.score ?? this.value ?? 4;
+    }
+    get effectiveMaxScore() {
+        return this.maxScore ?? this.max ?? 5;
+    }
+    componentWillLoad() {
+        this.currentScore = this.effectiveScore;
+    }
+    handleScoreChange(newValue) {
+        this.currentScore = newValue;
+    }
+    handleStarClick = (value) => {
+        if (!this.interactive) {
+            return;
+        }
+        this.currentScore = value;
+        this.ratingChange.emit(value);
+    };
+    render() {
+        const maxScore = this.effectiveMaxScore;
+        const stars = Array.from({ length: maxScore }, (_, index$1) => {
+            const value = index$1 + 1;
+            const filled = value <= this.currentScore;
+            if (this.interactive) {
+                return (index.h("button", { type: "button", class: { star: true, filled }, onClick: () => this.handleStarClick(value), "aria-label": `Rate ${value} out of ${maxScore}`, "aria-pressed": filled }, filled ? '★' : '☆'));
+            }
+            return index.h("span", { class: { star: true, filled }, "aria-hidden": "true" }, filled ? '★' : '☆');
+        });
+        return (index.h("div", { class: "rating", "aria-label": `Rated ${this.currentScore} out of ${maxScore}`, role: "img" }, stars));
+    }
+    static get watchers() { return {
+        "score": [{
+                "handleScoreChange": 0
+            }]
+    }; }
+};
+RecipeRating.style = recipeRatingCss();
+
+exports.recipe_rating = RecipeRating;
+//# sourceMappingURL=recipe-rating.entry.cjs.js.map
+
+//# sourceMappingURL=recipe-rating.cjs.entry.js.map

package/dist/cjs/recipe-rating.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"recipe-rating.cjs.entry.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,MAAM,CAAC,iZAAiZ,CAAC;;MCOpa,YAAY,GAAA,MAAA;;;;;IACf,KAAK,GAAW,CAAC;IACjB,QAAQ,GAAW,CAAC;IACpB,WAAW,GAAY,KAAK;;AAG5B,IAAA,KAAK;AACL,IAAA,GAAG;IAEF,YAAY,GAAW,CAAC;AAExB,IAAA,YAAY;AAErB,IAAA,IAAY,cAAc,GAAA;QACxB,OAAO,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC;;AAGtC,IAAA,IAAY,iBAAiB,GAAA;QAC3B,OAAO,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,GAAG,IAAI,CAAC;;IAGvC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,cAAc;;AAIzC,IAAA,iBAAiB,CAAC,QAAgB,EAAA;AAChC,QAAA,IAAI,CAAC,YAAY,GAAG,QAAQ;;AAGtB,IAAA,eAAe,GAAG,CAAC,KAAa,KAAI;AAC1C,QAAA,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YACrB;;AAGF,QAAA,IAAI,CAAC,YAAY,GAAG,KAAK;AACzB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC;AAC/B,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,iBAAiB;AACvC,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC,EAAEA,OAAK,KAAI;AAC1D,YAAA,MAAM,KAAK,GAAGA,OAAK,GAAG,CAAC;AACvB,YAAA,MAAM,MAAM,GAAG,KAAK,IAAI,IAAI,CAAC,YAAY;AAEzC,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE;gBACpB,QACEC,oBACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAC7B,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,EAAA,YAAA,EAC9B,CAAA,KAAA,EAAQ,KAAK,CAAA,QAAA,EAAW,QAAQ,CAAA,CAAE,EAAA,cAAA,EAChC,MAAM,EAAA,EAEnB,MAAM,GAAG,GAAG,GAAG,GAAG,CACZ;;AAIb,YAAA,OAAOA,OAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,EAAA,aAAA,EAAc,MAAM,EAAA,EAAE,MAAM,GAAG,GAAG,GAAG,GAAG,CAAQ;AAC5F,SAAC,CAAC;AAEF,QAAA,QACEA,iBAAK,KAAK,EAAC,QAAQ,EAAA,YAAA,EAAa,CAAA,MAAA,EAAS,IAAI,CAAC,YAAY,CAAA,QAAA,EAAW,QAAQ,CAAA,CAAE,EAAE,IAAI,EAAC,KAAK,EAAA,EACxF,KAAK,CACF;;;;;;;;;;;;","names":["index","h"],"sources":["src/components/recipe-rating/recipe-rating.css?tag=recipe-rating&encapsulation=shadow","src/components/recipe-rating/recipe-rating.tsx"],"sourcesContent":[":host {\r\n  --rating-filled: #fbbf24;\r\n  --rating-empty: #d1d5db;\r\n  display: inline-block;\r\n}\r\n\r\n.rating {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.15rem;\r\n  font-size: 1.2rem;\r\n  line-height: 1;\r\n}\r\n\r\n.star {\r\n  border: none;\r\n  background: transparent;\r\n  padding: 0;\r\n  margin: 0;\r\n  cursor: default;\r\n  color: var(--rating-empty);\r\n  user-select: none;\r\n  font-size: inherit;\r\n}\r\n\r\n.interactive .star {\r\n  cursor: pointer;\r\n}\r\n\r\n.star.filled {\r\n  color: var(--rating-filled);\r\n}\r\n\r\nbutton.star {\r\n  cursor: pointer;\r\n}\r\n","import { Component, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'recipe-rating',\r\n  styleUrl: 'recipe-rating.css',\r\n  shadow: true,\r\n})\r\nexport class RecipeRating {\r\n  @Prop() score: number = 4;\r\n  @Prop() maxScore: number = 5;\r\n  @Prop() interactive: boolean = false;\r\n\r\n  // Backward-compatible aliases for the original scaffolded API.\r\n  @Prop() value: number;\r\n  @Prop() max: number;\r\n\r\n  @State() currentScore: number = 0;\r\n\r\n  @Event() ratingChange: EventEmitter<number>;\r\n\r\n  private get effectiveScore(): number {\r\n    return this.score ?? this.value ?? 4;\r\n  }\r\n\r\n  private get effectiveMaxScore(): number {\r\n    return this.maxScore ?? this.max ?? 5;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.currentScore = this.effectiveScore;\r\n  }\r\n\r\n  @Watch('score')\r\n  handleScoreChange(newValue: number) {\r\n    this.currentScore = newValue;\r\n  }\r\n\r\n  private handleStarClick = (value: number) => {\r\n    if (!this.interactive) {\r\n      return;\r\n    }\r\n\r\n    this.currentScore = value;\r\n    this.ratingChange.emit(value);\r\n  };\r\n\r\n  render() {\r\n    const maxScore = this.effectiveMaxScore;\r\n    const stars = Array.from({ length: maxScore }, (_, index) => {\r\n      const value = index + 1;\r\n      const filled = value <= this.currentScore;\r\n\r\n      if (this.interactive) {\r\n        return (\r\n          <button\r\n            type=\"button\"\r\n            class={{ star: true, filled }}\r\n            onClick={() => this.handleStarClick(value)}\r\n            aria-label={`Rate ${value} out of ${maxScore}`}\r\n            aria-pressed={filled}\r\n          >\r\n            {filled ? '★' : '☆'}\r\n          </button>\r\n        );\r\n      }\r\n\r\n      return <span class={{ star: true, filled }} aria-hidden=\"true\">{filled ? '★' : '☆'}</span>;\r\n    });\r\n\r\n    return (\r\n      <div class=\"rating\" aria-label={`Rated ${this.currentScore} out of ${maxScore}`} role=\"img\">\r\n        {stars}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/collection/collection-manifest.json

@@ -0,0 +1,17 @@
+{
+  "entries": [
+    "components/custom-modal/custom-modal.js",
+    "components/meal-slot-card/meal-slot-card.js",
+    "components/recipe-badge/recipe-badge.js",
+    "components/recipe-card/recipe-card.js",
+    "components/recipe-rating/recipe-rating.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.44.2",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/custom-modal/custom-modal.css

@@ -0,0 +1,63 @@
+:host {
+  --modal-overlay: rgba(15, 23, 42, 0.45);
+  --modal-bg: #ffffff;
+  --modal-border: #e5e7eb;
+  --modal-text: #111827;
+  --modal-muted: #6b7280;
+  display: block;
+}
+
+.modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--modal-overlay);
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  z-index: 1000;
+}
+
+.modal {
+  width: min(420px, 100%);
+  background: var(--modal-bg);
+  border: 1px solid var(--modal-border);
+  border-radius: 18px;
+  padding: 1.25rem;
+  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);
+}
+
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+
+h3 {
+  margin: 0;
+  font-size: 1.25rem;
+  color: var(--modal-text);
+}
+
+.close-button {
+  width: 2rem;
+  height: 2rem;
+  border: none;
+  border-radius: 999px;
+  background: #f3f4f6;
+  color: var(--modal-muted);
+  font-size: 1.25rem;
+  cursor: pointer;
+}
+
+.modal-body {
+  color: var(--modal-text);
+}
+
+.modal-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  margin-top: 1.25rem;
+}

package/dist/collection/components/custom-modal/custom-modal.js

@@ -0,0 +1,95 @@
+import { h } from "@stencil/core";
+export class CustomModal {
+    isOpen = true;
+    modalTitle = 'Dialog';
+    closeModal;
+    handleOverlayClick = (event) => {
+        if (event.target.classList.contains('modal-backdrop')) {
+            this.closeModal.emit();
+        }
+    };
+    handleClose = () => {
+        this.closeModal.emit();
+    };
+    render() {
+        if (!this.isOpen) {
+            return null;
+        }
+        return (h("div", { class: "modal-backdrop", onClick: this.handleOverlayClick }, h("div", { class: "modal", role: "dialog", "aria-modal": "true", "aria-label": this.modalTitle }, h("header", null, h("h3", null, this.modalTitle), h("button", { type: "button", class: "close-button", onClick: this.handleClose, "aria-label": "Close modal" }, "\u00D7")), h("div", { class: "modal-body" }, h("slot", null)), h("div", { class: "modal-footer" }, h("slot", { name: "footer" })))));
+    }
+    static get is() { return "custom-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["custom-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["custom-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "isOpen": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "is-open",
+                "defaultValue": "true"
+            },
+            "modalTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modal-title",
+                "defaultValue": "'Dialog'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeModal",
+                "name": "closeModal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=custom-modal.js.map

package/dist/collection/components/custom-modal/custom-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-modal.js","sourceRoot":"","sources":["../../../src/components/custom-modal/custom-modal.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOxE,MAAM,OAAO,WAAW;IACd,MAAM,GAAY,IAAI,CAAC;IACvB,UAAU,GAAW,QAAQ,CAAC;IAE7B,UAAU,CAAqB;IAEhC,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;QACjD,IAAK,KAAK,CAAC,MAAsB,CAAC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAAE,CAAC;YACvE,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACzB,CAAC;IACH,CAAC,CAAC;IAEM,WAAW,GAAG,GAAG,EAAE;QACzB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,OAAO,CACL,WAAK,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB;YAC1D,WAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,gBAAY,MAAM,gBAAa,IAAI,CAAC,UAAU;gBAC5E;oBACE,cAAK,IAAI,CAAC,UAAU,CAAM;oBAC1B,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,gBAAa,aAAa,aAErF,CACF;gBAET,WAAK,KAAK,EAAC,YAAY;oBACrB,eAAQ,CACJ;gBAEN,WAAK,KAAK,EAAC,cAAc;oBACvB,YAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'custom-modal',\r\n  styleUrl: 'custom-modal.css',\r\n  shadow: true,\r\n})\r\nexport class CustomModal {\r\n  @Prop() isOpen: boolean = true;\r\n  @Prop() modalTitle: string = 'Dialog';\r\n\r\n  @Event() closeModal: EventEmitter<void>;\r\n\r\n  private handleOverlayClick = (event: MouseEvent) => {\r\n    if ((event.target as HTMLElement).classList.contains('modal-backdrop')) {\r\n      this.closeModal.emit();\r\n    }\r\n  };\r\n\r\n  private handleClose = () => {\r\n    this.closeModal.emit();\r\n  };\r\n\r\n  render() {\r\n    if (!this.isOpen) {\r\n      return null;\r\n    }\r\n\r\n    return (\r\n      <div class=\"modal-backdrop\" onClick={this.handleOverlayClick}>\r\n        <div class=\"modal\" role=\"dialog\" aria-modal=\"true\" aria-label={this.modalTitle}>\r\n          <header>\r\n            <h3>{this.modalTitle}</h3>\r\n            <button type=\"button\" class=\"close-button\" onClick={this.handleClose} aria-label=\"Close modal\">\r\n              ×\r\n            </button>\r\n          </header>\r\n\r\n          <div class=\"modal-body\">\r\n            <slot />\r\n          </div>\r\n\r\n          <div class=\"modal-footer\">\r\n            <slot name=\"footer\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/meal-slot-card/meal-slot-card.css

@@ -0,0 +1,72 @@
+:host {
+  --meal-card-bg: #fff7ed;
+  --meal-card-border: #fed7aa;
+  --meal-card-text: #111827;
+  --meal-card-subtle: #9a5b00;
+  --meal-card-accent: #f97316;
+  display: block;
+}
+
+.meal-slot-card {
+  background: var(--meal-card-bg);
+  border: 1px solid var(--meal-card-border);
+  border-radius: 18px;
+  padding: 1rem;
+  max-width: 280px;
+  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.08);
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.75rem;
+  color: var(--meal-card-subtle);
+}
+
+.day-label {
+  font-weight: 700;
+}
+
+.meal-pill {
+  display: inline-flex;
+  padding: 0.25rem 0.55rem;
+  border-radius: 999px;
+  background: rgba(249, 115, 22, 0.12);
+  color: var(--meal-card-accent);
+  font-size: 0.7rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.content h3 {
+  margin: 0 0 0.5rem;
+  color: var(--meal-card-text);
+  font-size: 1.2rem;
+}
+
+.actions {
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-top: 1rem;
+}
+
+button {
+  border: none;
+  border-radius: 10px;
+  padding: 0.5rem 0.8rem;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+button.primary {
+  background: var(--meal-card-accent);
+  color: white;
+}
+
+button.secondary {
+  background: #fff;
+  color: #374151;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+}