@seepmaini/stencil-recipe-components 0.0.1

package/dist/cjs/index.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+
+exports.format = format;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-BgGiRDlK.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-component.cjs",[[513,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["no-recipe-found.cjs",[[513,"no-recipe-found",{"header":[1],"message":[1],"buttonText":[1,"button-text"]}]]],["recipe-browser.cjs",[[513,"recipe-browser",{"categories":[16],"areas":[16],"ingredients":[16],"selectedCategory":[1,"selected-category"],"selectedArea":[1,"selected-area"],"selectedIngredient":[1,"selected-ingredient"]}]]],["recipe-button.cjs",[[769,"recipe-button",{"variant":[1],"type":[1],"disabled":[4]}]]],["recipe-card.cjs",[[513,"recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"cuisine":[1],"favorite":[4],"showPlanner":[32],"selectedDay":[32],"selectedMeal":[32]}]]],["recipe-form-section.cjs",[[769,"recipe-form-section",{"number":[1],"formTitle":[1,"form-title"],"description":[1]}]]],["recipe-input.cjs",[[513,"recipe-input",{"label":[1],"name":[1],"type":[1],"placeholder":[1],"value":[1],"required":[4],"helper":[1]}]]],["recipe-navbar.cjs",[[513,"recipe-navbar",{"currentPage":[1,"current-page"]}]]],["recipe-textarea.cjs",[[513,"recipe-textarea",{"label":[1],"name":[1],"rows":[2],"placeholder":[1],"value":[1],"required":[4]}]]],["search-food.cjs",[[513,"search-food",{"search":[1025]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

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

@@ -0,0 +1,33 @@
+'use strict';
+
+var index = require('./index-BgGiRDlK.js');
+var index$1 = require('./index.cjs.js');
+
+const myComponentCss = () => `:host{display:block}`;
+
+const MyComponent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /**
+     * The first name
+     */
+    first;
+    /**
+     * The middle name
+     */
+    middle;
+    /**
+     * The last name
+     */
+    last;
+    getText() {
+        return index$1.format(this.first, this.middle, this.last);
+    }
+    render() {
+        return index.h("div", { key: 'edcd595f3b87cfa751442fba79e07a8823826cbc' }, "Hello, World! I'm ", this.getText());
+    }
+};
+MyComponent.style = myComponentCss();
+
+exports.my_component = MyComponent;

package/dist/cjs/no-recipe-found.cjs.entry.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('./index-BgGiRDlK.js');
+
+const noRecipeFoundCss = () => `:host{display:block;font-family:Arial, sans-serif}.icon{width:70px;height:70px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;border-radius:50%;background:#ffffff;font-size:32px}.empty-state{width:min(650px, calc(100% - 40px));margin:50px auto;padding:55px 25px;display:flex;flex-direction:column;align-items:center;text-align:center;background:#ffffff;border:1px solid #eeeeee;border-radius:20px;box-shadow:0 8px 30px rgba(0, 0, 0, 0.08);box-sizing:border-box}h2{margin:0 0 10px;color:#2c2c2c;font-size:28px;font-weight:700}p{max-width:500px;margin:0 0 25px;color:#eeeeee;font-size:15px;line-height:1.6}button{padding:11px 20px;border:none;border-radius:10px;background:#f97316;color:white;font-family:Arial, sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background 0.2s ease,      transform 0.2s ease}button:hover{background:#ea580c;transform:translateY(-2px)}button:active{transform:translateY(0)}@media (max-width: 600px){.empty-state{width:calc(100% - 24px);margin:35px auto;padding:40px 20px}h2{font-size:24px}p{font-size:14px}}`;
+
+const NoRecipesFound = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.clear = index.createEvent(this, "clear");
+    }
+    header = 'No Recipes Found';
+    message = 'We couldn’t find any recipes matching your search. Try a different recipe, category, cuisine, or ingredient.';
+    buttonText = 'Clear Search';
+    clear;
+    handleClear = () => {
+        this.clear.emit();
+    };
+    render() {
+        return (index.h("section", { key: '8f32c60bdbe3662614a69ed6df89ee3100381f74', class: "empty-state" }, index.h("div", { key: 'ab15444f85192f5a0599a8639ee78513359d0489', class: "icon", "aria-hidden": "true" }, "\uD83C\uDF7D\uFE0F"), index.h("h2", { key: '1a4fac73782ea53e4405b38f28686eea414d1d94' }, this.header), index.h("p", { key: 'ee205e4e18009cc93995d717bf9129c265f293f7' }, this.message), index.h("button", { key: '90f4c76d61253e050ae0fc8ff005dfba2e053d98', type: "button", onClick: this.handleClear }, this.buttonText)));
+    }
+};
+NoRecipesFound.style = noRecipeFoundCss();
+
+exports.no_recipe_found = NoRecipesFound;

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

@@ -0,0 +1,64 @@
+'use strict';
+
+var index = require('./index-BgGiRDlK.js');
+
+const recipeBrowserCss = () => `:host{display:block;font-family:Arial, sans-serif;color:#2c2c2c}.wrapper{width:min(1200px, calc(100% - 40px));margin:0 auto;padding:45px 0}.header{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}.heading{max-width:650px}.eyebrow{display:block;margin-bottom:8px;font-size:14px;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:#f97316}h2{margin:0;font-size:clamp(28px, 4vw, 40px);line-height:1.1;font-weight:700;letter-spacing:-0.03em}.heading p{margin:10px 0 0;font-size:16px;line-height:1.6;color:#777777}.clear-button{flex-shrink:0;padding:10px 17px;border:1px solid #e5e7eb;border-radius:10px;background:white;color:#2c2c2c;font-family:Arial, sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background 0.2s ease,      color 0.2s ease,      border-color 0.2s ease}.clear-button:hover{background:#fff7ed;border-color:#fdba74;color:#ea580c}.filters{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:18px}.filter-card{display:flex;gap:16px;padding:22px;background:white;border:1px solid #eeeeee;border-radius:18px;box-shadow:0 6px 25px rgba(0, 0, 0, 0.04);transition:transform 0.2s ease,      box-shadow 0.2s ease,      border-color 0.2s ease}.filter-card:hover{transform:translateY(-3px);border-color:#fed7aa;box-shadow:0 12px 30px rgba(0, 0, 0, 0.08)}.icon{width:46px;height:46px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:22px}.category-icon{background:#fff7ed}.cuisine-icon{background:#eff6ff}.ingredient-icon{background:#f0fdf4}.content{flex:1;min-width:0}.content h3{margin:0;font-size:17px;font-weight:700}.content p{margin:6px 0 14px;font-size:13px;line-height:1.5;color:#777}select{display:block;width:100%;height:42px;padding:0 12px;border:1px solid #e5e7eb;border-radius:9px;background:white;color:#2c2c2c;font-family:Arial, sans-serif;font-size:14px;cursor:pointer;outline:none;box-sizing:border-box;transition:border-color 0.2s ease,      box-shadow 0.2s ease}select:hover{border-color:#fb923c}select:focus{border-color:#f97316;box-shadow:0 0 0 3px rgba(249, 115, 22, 0.12)}@media (max-width: 900px){.filters{grid-template-columns:repeat(2, minmax(0, 1fr))}.filter-card:last-child{grid-column:span 2}}@media (max-width: 600px){.wrapper{width:calc(100% - 24px);padding:35px 0}.header{align-items:flex-start;flex-direction:column}.clear-button{align-self:flex-start}.filters{grid-template-columns:1fr;gap:14px}.filter-card:last-child{grid-column:auto}.filter-card{padding:18px}}@media (prefers-reduced-motion: reduce){.filter-card,.clear-button,select{transition:none}}`;
+
+const RecipeBrowser = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.browseChange = index.createEvent(this, "browseChange");
+        this.browseClear = index.createEvent(this, "browseClear");
+    }
+    categories = [];
+    areas = [];
+    ingredients = [];
+    selectedCategory = '';
+    selectedArea = '';
+    selectedIngredient = '';
+    browseChange;
+    browseClear;
+    handleCategory = (event) => {
+        const select = event.target;
+        const value = select.value;
+        if (!value) {
+            return;
+        }
+        this.browseChange.emit({
+            type: 'category',
+            value,
+        });
+    };
+    handleArea = (event) => {
+        const select = event.target;
+        const value = select.value;
+        if (!value) {
+            return;
+        }
+        this.browseChange.emit({
+            type: 'area',
+            value,
+        });
+    };
+    handleIngredient = (event) => {
+        const select = event.target;
+        const value = select.value;
+        if (!value) {
+            return;
+        }
+        this.browseChange.emit({
+            type: 'ingredient',
+            value,
+        });
+    };
+    handleClear = () => {
+        this.browseClear.emit();
+    };
+    render() {
+        const hasSelection = this.selectedCategory !== '' || this.selectedArea !== '' || this.selectedIngredient !== '';
+        return (index.h("section", { key: '1e4b3474c45baf701d6212a58d4cfc465063bc5e', class: "wrapper" }, index.h("div", { key: '165084c65d6e9a4e457c601fc8ce6feb0321544c', class: "header" }, index.h("div", { key: '6fd026ea128dca2e65c3cbdfdc4908ee34ee4bfc', class: "heading" }, index.h("span", { key: '7a110eeebd3835354934bca2e141248142beb8e2', class: "eyebrow" }, "\u2726 BROWSE RECIPES"), index.h("h2", { key: '74431b3cfda0539b1c639d2f5ec71092dada18d9' }, "Find Your Perfect Recipe"), index.h("p", { key: 'd4ca3d04dd15a8f3a74020eafc454770a6d15e17' }, "Explore delicious recipes by category, cuisine or ingredient.")), hasSelection && (index.h("button", { key: 'c0576d993b85806611797e3b34c52773594b28ca', type: "button", class: "clear-button", onClick: this.handleClear }, "Clear Filters"))), index.h("div", { key: 'db81e498a63b5ba1ca7fab36bef03ca69337f695', class: "filters" }, index.h("div", { key: '1c4981b68d5ffffb2533a2ba08ed31746d8ed63d', class: "filter-card" }, index.h("div", { key: '5e253ee63f146f9d14404e6d9c00c2132cb32c6e', class: "content" }, index.h("h3", { key: 'c803bb45c98d0108babb53c77ec4fe495ebfc475' }, "Category"), index.h("p", { key: 'b81b23f23c834ad6e718213e640221e7361e41c4' }, "Find recipes by food category."), index.h("select", { key: '79b2055724ae09bc9ff5810ed85549abdf82025c', "aria-label": "Select recipe category", onChange: this.handleCategory }, index.h("option", { key: '2c8426061798f6790b0e6c06e232388aad1f2010', value: "" }, "All Categories"), this.categories.map(category => (index.h("option", { value: category, selected: this.selectedCategory === category }, category)))))), index.h("div", { key: '7809c3a73c2f32c5b1bcf318249b7cb71ce6f1d0', class: "filter-card" }, index.h("div", { key: '7353fe2a352af762393d11482ddecbb7de08176b', class: "content" }, index.h("h3", { key: '949566a102ece48164fccfc2805b77c5364152ff' }, "Ingredient"), index.h("p", { key: '060f125190ee29b79cf3e6025f71fd9759ac5e55' }, "Find recipes using your favourite ingredients."), index.h("select", { key: 'abff2d33d651b611a60952aba9c59ff5e9bb2ab6', "aria-label": "Select recipe ingredient", onChange: this.handleIngredient }, index.h("option", { key: 'eaeb17a91f94ba7c81b1a9e074f837a04b2630c6', value: "" }, "All Ingredients"), this.ingredients.map(ingredient => (index.h("option", { value: ingredient, selected: this.selectedIngredient === ingredient }, ingredient)))))), index.h("div", { key: '993eadac9b0939bcf6480960cdf46436900d6c0e', class: "filter-card" }, index.h("div", { key: '06f401549f627d20c725353882f625b97df14267', class: "content" }, index.h("h3", { key: '83a457b4b81a96d857edb50919a305ac0eeb0c06' }, "Cuisine"), index.h("p", { key: '9cb3a03bfec4fcb2170439cf7c6ab3d5714c07c0' }, "Discover recipes from around the world."), index.h("select", { key: 'b839e0b5570e4d7f7b9bccd12a0a4f7ed13d7181', "aria-label": "Select recipe cuisine", onChange: this.handleArea }, index.h("option", { key: 'ab8df5981542546ad9c35732327dc8b9d40e7c4a', value: "" }, "All Cuisines"), this.areas.map(area => (index.h("option", { value: area, selected: this.selectedArea === area }, area)))))))));
+    }
+};
+RecipeBrowser.style = recipeBrowserCss();
+
+exports.recipe_browser = RecipeBrowser;

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

@@ -0,0 +1,24 @@
+'use strict';
+
+var index = require('./index-BgGiRDlK.js');
+
+const recipeButtonCss = () => `:host{display:inline-block}.button{min-width:120px;min-height:44px;padding:0 18px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer}.primary{border:none;background:#f97316;color:white}.secondary{border:1px solid #ddd;background:white;color:#777777}.primary:hover{background:#ea580c}.button:disabled{opacity:0.6;cursor:not-allowed}`;
+
+const RecipeButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    variant = 'primary';
+    type = 'button';
+    disabled = false;
+    render() {
+        return (index.h("button", { key: '69decd9fcbcb01bce1f5c78fdb79ccea94f4369d', type: this.type, class: {
+                button: true,
+                primary: this.variant === 'primary',
+                secondary: this.variant === 'secondary',
+            }, disabled: this.disabled }, index.h("slot", { key: '9561dcb8e2f50f8f85ccaacb0ff885b67a5eab1d' })));
+    }
+};
+RecipeButton.style = recipeButtonCss();
+
+exports.recipe_button = RecipeButton;

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

@@ -0,0 +1,78 @@
+'use strict';
+
+var index = require('./index-BgGiRDlK.js');
+
+const recipeCardCss = () => `:host{display:block;font-family:Arial, sans-serif}.recipe-card{position:relative;overflow:hidden;background:#ffffff;border:1px solid #eeeeee;border-radius:18px;box-shadow:0 6px 25px rgba(0, 0, 0, 0.05)}.image-container{position:relative;height:220px;overflow:hidden}.image-container img{width:100%;height:100%;display:block;object-fit:cover}.category{position:absolute;top:14px;left:14px;padding:6px 10px;border-radius:20px;background:rgba(255, 255, 255, 0.94);color:#444444;font-size:12px;font-weight:700}.favorite{position:absolute;top:12px;right:12px;width:38px;height:38px;border:none;border-radius:50%;background:rgba(255, 255, 255, 0.95);color:#777777;font-size:24px;cursor:pointer}.favorite.active{color:#e05252}.content{padding:18px}.cuisine{margin-bottom:8px;color:#f97316;font-size:12px;font-weight:600}.content h3{margin:0 0 16px;color:#2c2c2c;font-size:20px;line-height:1.3}.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}.view-button,.planner-button{width:100%;min-height:42px;border-radius:9px;font-family:Arial, sans-serif;font-size:13px;font-weight:600;cursor:pointer}.view-button{display:flex;align-items:center;justify-content:center;gap:6px;border:none;background:#f97316;color:white}.view-button:hover{background:#ea580c}.planner-button{border:1px solid #fed7aa;background:#fff7ed;color:#ea580c}.planner-button:hover{background:#ffedd5}.planner-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0, 0, 0, 0.45)}.planner-modal{width:min(420px, 100%);padding:24px;border-radius:18px;background:white;box-shadow:0 20px 60px rgba(0, 0, 0, 0.2)}.planner-header{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:22px}.planner-header h4{margin:0 0 6px;font-size:20px;color:#2c2c2c}.planner-header p{margin:0;color:#777777;font-size:13px;line-height:1.5}.close-button{width:32px;height:32px;border:none;border-radius:50%;background:#f5f5f5;font-size:22px;color:#555555;cursor:pointer}.close-button:hover{background:#eeeeee}.planner-modal label{display:block;margin-bottom:8px;font-size:13px;font-weight:600;color:#444444}.planner-modal select{width:100%;height:44px;padding:0 12px;border:1px solid #dddddd;border-radius:10px;background:white;font-family:Arial, sans-serif;font-size:14px;outline:none;box-sizing:border-box}.planner-actions{display:flex;gap:10px;margin-top:20px}.cancel-button,.add-button{flex:1;height:42px;border-radius:9px;font-family:Arial, sans-serif;font-size:14px;font-weight:700;cursor:pointer}.cancel-button{border:1px solid #dddddd;background:white;color:#555555}.cancel-button:hover{background:#f5f5f5}.add-button{border:none;background:#f97316;color:white}.add-button:hover:not(:disabled){background:#ea580c}.add-button:disabled{opacity:0.5;cursor:not-allowed}.field{padding-top:10px}`;
+
+const RecipeCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.favoriteToggle = index.createEvent(this, "favoriteToggle");
+        this.recipeClick = index.createEvent(this, "recipeClick");
+        this.addToPlanner = index.createEvent(this, "add-to-planner");
+    }
+    recipeId = '';
+    recipeTitle = '';
+    image = '';
+    category = '';
+    cuisine = '';
+    favorite = false;
+    favoriteToggle;
+    recipeClick;
+    addToPlanner;
+    showPlanner = false;
+    selectedDay = '';
+    selectedMeal = '';
+    handleViewRecipe = () => {
+        this.recipeClick.emit({
+            id: this.recipeId,
+        });
+    };
+    toggleFavorite = (event) => {
+        event.stopPropagation();
+        this.favoriteToggle.emit({
+            id: this.recipeId,
+        });
+    };
+    openPlanner = (event) => {
+        event.stopPropagation();
+        this.selectedDay = '';
+        this.selectedMeal = '';
+        this.showPlanner = true;
+    };
+    closePlanner = () => {
+        this.showPlanner = false;
+        this.selectedDay = '';
+        this.selectedMeal = '';
+    };
+    handleDayChange = (event) => {
+        const select = event.target;
+        this.selectedDay = select.value;
+    };
+    handleMealChange = (event) => {
+        const select = event.target;
+        this.selectedMeal = select.value;
+    };
+    confirmPlanner = () => {
+        if (!this.selectedDay || !this.selectedMeal) {
+            return;
+        }
+        this.addToPlanner.emit({
+            id: this.recipeId,
+            day: this.selectedDay,
+            mealType: this.selectedMeal,
+        });
+        this.closePlanner();
+    };
+    render() {
+        const favoriteLabel = this.favorite ? `Remove ${this.recipeTitle} from favorites` : `Add ${this.recipeTitle} to favorites`;
+        const canAdd = this.selectedDay !== '' && this.selectedMeal !== '';
+        return (index.h("article", { key: 'e9cac86199c4999118277c301095f0d5fdc0465e', class: "recipe-card" }, index.h("div", { key: '41cc1e4446a23d097181d023e28ef26ec8e1c709', class: "image-container" }, index.h("img", { key: '5f9d485af235d895d5ba410826fe00ead8795420', src: this.image, alt: this.recipeTitle, loading: "lazy", decoding: "async" }), this.category && index.h("span", { key: '8f50506474a6ec6d9cb973bec927640fe1bbc14e', class: "category" }, this.category), index.h("button", { key: 'cc2b1c5291f30e8fc8cb14591a884cebd3343018', type: "button", class: {
+                favorite: true,
+                active: this.favorite,
+            }, onClick: this.toggleFavorite, "aria-label": favoriteLabel, "aria-pressed": this.favorite }, this.favorite ? '♥' : '♡')), index.h("div", { key: '8cb4a3397069c51ee95baff05662bf9f3aee9c1d', class: "content" }, this.cuisine && (index.h("div", { key: 'de5ad5288350fe2f251ffa62cda82fa35bf53f3e', class: "cuisine" }, index.h("span", { key: '87aa4b6d69bd35acf850b5650b8f5a2db28adef0' }, "\u2726"), this.cuisine)), index.h("h3", { key: '332a9140cc9627d02ab1e5621fb0b2f0c0d8f754' }, this.recipeTitle), index.h("div", { key: '7c2962abe8ebb3cb22e91b61acf1362dc6216f81', class: "actions" }, index.h("button", { key: 'fc9b769b0198145d8a49dfaf837acbe24eee3f2e', type: "button", class: "view-button", onClick: this.handleViewRecipe }, "View Recipe", index.h("span", { key: '50f0f5e55f9caab5d70f16aaf3585c80c1e5ac7c' }, "\u2192")), index.h("button", { key: '6936bec5da6c7509f51abf2646312cc0315dbe99', type: "button", class: "planner-button", onClick: this.openPlanner }, "\uFF0B Add to Planner"))), this.showPlanner && (index.h("div", { key: 'a15cc6195d9331cadbec3eae206a9c82737be735', class: "planner-overlay", onClick: this.closePlanner }, index.h("div", { key: 'a5b74b52a845f1488e3eeb2356fc6044f1c15912', class: "planner-modal", onClick: event => event.stopPropagation() }, index.h("div", { key: '572800bf57b24b41cadfacb49da5dccef6a9f132', class: "planner-header" }, index.h("div", { key: 'cd7f730b46ef2fad37a22e05bc5bc3e1fdc6d0c6' }, index.h("h4", { key: 'c30504584428ffac7a3dfe0a1d5c2c7c895d1665' }, "Add to Meal Planner"), index.h("p", { key: 'dbee3ab4e4dc0b0b3c553684e447a931813b7c66' }, "Add ", index.h("strong", { key: '501eee64ac955ccaa7116a7f20f35473ecc2912d' }, this.recipeTitle))), index.h("button", { key: '55ca144a870c33892b1d61051c8b60dab1528bb8', type: "button", class: "close-button", onClick: this.closePlanner }, "\u00D7")), index.h("div", { key: 'b8e4b435c27e0a5536335897b59386bd9b4b1b1b', class: "field" }, index.h("label", { key: 'b26aec673a147830320a92389d6f2da7a4a901e4', htmlFor: "planner-day" }, "Day"), index.h("select", { key: '0b95a3b9b32278534a0157f469281a67e0c0ad9b', id: "planner-day", onChange: this.handleDayChange }, index.h("option", { key: 'c2e6e6d89ece44b371ae377b395aa8719935f326', value: "" }, "Select a day"), index.h("option", { key: '98c27f6fb8e49de25ecabda4f52436d8c3fac93b', value: "Monday" }, "Monday"), index.h("option", { key: '7e782ca431ad476040a87f4664341e679a435fd0', value: "Tuesday" }, "Tuesday"), index.h("option", { key: '12f03a59c1a6a4c9d087e612259b585ad1609128', value: "Wednesday" }, "Wednesday"), index.h("option", { key: '718c4397a7c13ad5e38603c97f3fe43f5da17fce', value: "Thursday" }, "Thursday"), index.h("option", { key: 'bde3aaa5cce683c0be7a07c2ad4514bf1ed259a4', value: "Friday" }, "Friday"), index.h("option", { key: '28adf4b21ed230171a653a173b6f1564fdadbd86', value: "Saturday" }, "Saturday"), index.h("option", { key: 'ba10816944f43c0f693d7e8e926d7cf9514b8f1a', value: "Sunday" }, "Sunday"))), index.h("div", { key: '2f2bbf50b1e3e515424770fe183f40321ed4a0ec', class: "field" }, index.h("label", { key: '3dbb417dd46359dbc524ab187a26b5af3001b809', htmlFor: "planner-meal" }, "Meal"), index.h("select", { key: 'ce276fce3064936bf7695897803fce10e83e345c', id: "planner-meal", onChange: this.handleMealChange }, index.h("option", { key: '6c05f317d30a94be195c432d926034e0b7d1bcb5', value: "" }, "Select a meal"), index.h("option", { key: '1392d0ae0d8922547329790707812474e63fcc3b', value: "Breakfast" }, "Breakfast"), index.h("option", { key: '2cc7682e5108e782220dbda63e403d90c04dbd5e', value: "Lunch" }, "Lunch"), index.h("option", { key: '255117f914a6112ccf9169f52ae35bc99df1c549', value: "Dinner" }, "Dinner"))), index.h("div", { key: 'efd8158033d291082b9cb131deee84b09a649411', class: "planner-actions" }, index.h("button", { key: '816d91efb664e45ea8bb49285049995536848ba5', type: "button", class: "cancel-button", onClick: this.closePlanner }, "Cancel"), index.h("button", { key: 'd4b72a6d50bfdf116210f34a67c8f15bc9d38a69', type: "button", class: "add-button", disabled: !canAdd, onClick: this.confirmPlanner }, "Add to Planner")))))));
+    }
+};
+RecipeCard.style = recipeCardCss();
+
+exports.recipe_card = RecipeCard;

package/dist/cjs/recipe-form-section.cjs.entry.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var index = require('./index-BgGiRDlK.js');
+
+const recipeFormSectionCss = () => `:host{display:block}.section{padding:30px;border:1px solid #e9e5e1;border-radius:22px;background:white}.section-heading{display:flex;gap:14px;margin-bottom:25px}.section-heading>span{width:32px;height:32px;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:50%;background:#f3e9e1;color:#f97316;font-size:16px;font-weight:700}.section-heading h2{margin:0;color:#2c2c2c;font-family:Arial, sans-serif;font-size:24px;font-weight:500}.section-heading p{margin:4px 0 0;color:#999999;font-size:16px}.content{display:block}@media (max-width: 600px){.section{padding:20px}}`;
+
+const RecipeFormSection = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    number;
+    formTitle;
+    description;
+    render() {
+        return (index.h("section", { key: '39aba625964827041a26eaf4e59e95fce101af07', class: "section" }, index.h("div", { key: '7f7ed2a37b09b8efa5bbcbe0087e7b575776e61b', class: "section-heading" }, index.h("span", { key: 'ae898bcf907768d9abe73e0ff18c39614b6ae23b' }, this.number), index.h("div", { key: '16c1e35edf0e0bba569ab260a640981419a83d44' }, index.h("h2", { key: '61def6637277c674aa708041c148925595493ad7' }, this.formTitle), index.h("p", { key: '62ab7295b08d2ade90ba9dbcb61e2cfe26929c84' }, this.description))), index.h("div", { key: 'e56052a380d5c72190b776ea8c7e80f1099a8442', class: "content" }, index.h("slot", { key: '7735bc4718c0d4c7c0805abd1d176fdf3270faa3' }))));
+    }
+};
+RecipeFormSection.style = recipeFormSectionCss();
+
+exports.recipe_form_section = RecipeFormSection;

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

@@ -0,0 +1,24 @@
+'use strict';
+
+var index = require('./index-BgGiRDlK.js');
+
+const recipeInputCss = () => `:host{display:block}.field{display:flex;flex-direction:column;gap:8px}label{color:#555555;font-size:16px;font-weight:700}input{width:100%;height:44px;padding:12px 13px;border:1px solid #eeeeee;border-radius:10px;outline:none;background:#fafafa;color:#333333;font-family:Arial, sans-serif;font-size:14px;box-sizing:border-box;transition:border-color 0.2s ease,      box-shadow 0.2s ease}input:focus{border-color:#f97316;background:white;box-shadow:0 0 0 3px rgba(163, 111, 66, 0.08)}input::placeholder{color:#bbb}small{color:#aaa;font-size:9px}`;
+
+const RecipeInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    label;
+    name;
+    type = 'text';
+    placeholder = '';
+    value = '';
+    required = false;
+    helper = '';
+    render() {
+        return (index.h("div", { key: '70a6dc59dc7c4367c091fa1cb69a6f9ab7936108', class: "field" }, index.h("label", { key: '4ac58bf5d0570aeb26333b6056429dd90483fddc', htmlFor: this.name }, this.label, this.required ? ' *' : ''), index.h("input", { key: '1146d0d67f77e85ffb058d8c705c739e5f4d8765', id: this.name, name: this.name, type: this.type, placeholder: this.placeholder, value: this.value, required: this.required }), this.helper && index.h("small", { key: '1bfde2d7cbffdc08d8d97e011fc08e89619a6926' }, this.helper)));
+    }
+};
+RecipeInput.style = recipeInputCss();
+
+exports.recipe_input = RecipeInput;

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

@@ -0,0 +1,30 @@
+'use strict';
+
+var index = require('./index-BgGiRDlK.js');
+
+const recipeNavbarCss = () => `:host{display:block}.navbar{display:flex;align-items:center;justify-content:space-between;padding:16px 40px;background:#f97316;border-bottom:1px solid #e5e7eb}.logo{color:#ffffff;text-decoration:none;font-size:28px;font-weight:700}.nav-links{display:flex;align-items:center;gap:26px}.nav-link{color:#ffffff;text-decoration:none;font-size:15px;font-weight:600;transition:color 0.2s ease}.nav-link:hover{color:#f9b787}@media (max-width: 700px){.navbar{flex-direction:column;gap:15px;padding:15px 20px}.logo{font-size:22px;text-align:center}.nav-links{gap:15px;flex-wrap:wrap;justify-content:center}}`;
+
+const RecipeNavbar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    currentPage = '';
+    render() {
+        return (index.h("nav", { key: '566b7977eb5d49698529bb053851bfd00ae3e6b7', class: "navbar" }, index.h("a", { key: '0486dfb39ffe360a78251520ce19aeeb02f9cbe8', href: "/", class: "logo" }, "\uD83C\uDF74 Recipe Finder and Meal Planner"), index.h("div", { key: '3c08b289c5845dfe5845dae53e48736e04c98f73', class: "nav-links" }, index.h("a", { key: 'ca549a73243a753de94117ac0a4c1136ec43d4d3', href: "/", class: {
+                'nav-link': true,
+                'active': this.currentPage === 'home',
+            } }, "Home"), index.h("a", { key: 'd8fc2d2b873d7e7f1eb17e5f3e53a367811124ba', href: "/favorites", class: {
+                'nav-link': true,
+                'active': this.currentPage === 'favorites',
+            } }, "Favorites"), index.h("a", { key: 'de54d4a21354713ee67e5f28675d8046e8093c0c', href: "/meal-plan", class: {
+                'nav-link': true,
+                'active': this.currentPage === 'meal-plan',
+            } }, "Meal Planner"), index.h("a", { key: '98a0114e219316138f9968f9b9f462ab90dc2144', href: "/my-recipes", class: {
+                'nav-link': true,
+                'active': this.currentPage === 'my-recipes',
+            } }, "My Recipes"))));
+    }
+};
+RecipeNavbar.style = recipeNavbarCss();
+
+exports.recipe_navbar = RecipeNavbar;

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

@@ -0,0 +1,23 @@
+'use strict';
+
+var index = require('./index-BgGiRDlK.js');
+
+const recipeTextareaCss = () => `:host{display:block}.field{display:flex;flex-direction:column;gap:8px}label{color:#555555;font-size:16px;font-weight:700}textarea{width:100%;padding:12px 13px;border:1px solid #eeeeee;border-radius:10px;outline:none;background:#fafafa;color:#333333;font-family:Arial, sans-serif;font-size:14px;line-height:1.7;resize:vertical;box-sizing:border-box;transition:border-color 0.2s ease,      box-shadow 0.2s ease}textarea:focus{border-color:#f97316;background:white;box-shadow:0 0 0 3px rgba(163, 111, 66, 0.08)}textarea::placeholder{color:#bbb}`;
+
+const RecipeTextarea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    label;
+    name;
+    rows = 5;
+    placeholder = '';
+    value = '';
+    required = false;
+    render() {
+        return (index.h("div", { key: '65e2378ab0cd0e4d0b255aebf5db8f9dd9b7cd23', class: "field" }, index.h("label", { key: '1806eef424c6305fc8456a9bd3209ac2cd6ccae3', htmlFor: this.name }, this.label, this.required ? ' *' : ''), index.h("textarea", { key: 'dfa80a318722b204622fc7d0935cf8fb346e2bd0', id: this.name, name: this.name, rows: this.rows, placeholder: this.placeholder, required: this.required }, this.value)));
+    }
+};
+RecipeTextarea.style = recipeTextareaCss();
+
+exports.recipe_textarea = RecipeTextarea;

package/dist/cjs/search-food.cjs.entry.js

@@ -0,0 +1,36 @@
+'use strict';
+
+var index = require('./index-BgGiRDlK.js');
+
+const searchFoodCss = () => `:host{display:block;font-family:Arial, sans-serif}.search-wrapper{width:100%;display:flex;justify-content:center;box-sizing:border-box;padding:24px 16px}.search-box{width:100%;max-width:700px;display:flex;align-items:center;padding:6px;background:#ffffff;border:1px solid #d7d2cd;border-radius:14px;box-shadow:0 6px 20px rgba(0, 0, 0, 0.06);transition:border-color 0.2s ease,      box-shadow 0.2s ease}.search-box:focus-within{border-color:#e0700f;box-shadow:0 0 0 3px rgba(163, 111, 66, 0.1),      0 8px 24px rgba(0, 0, 0, 0.07)}.search-icon{flex-shrink:0;margin-left:12px;margin-right:8px;font-size:20px}input{flex:1;min-width:0;padding:13px 8px;border:none;outline:none;background:transparent;color:#2c2c2c;font-family:Arial, sans-serif;font-size:16px}input::placeholder{color:#b7bdca}.clear-button{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:none;border-radius:50%;background:transparent;color:#999999;font-family:Arial, sans-serif;font-size:24px;cursor:pointer;transition:background-color 0.2s ease,      color 0.2s ease}.clear-button:hover{background:#f5f2ef;color:#555555}.search-button{flex-shrink:0;padding:12px 22px;border:none;border-radius:10px;background:#f97316;color:#ffffff;font-family:Arial, sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:background-color 0.2s ease,      transform 0.2s ease}.search-button:hover{background:#f97316;transform:translateY(-1px)}.search-button:active{transform:translateY(0)}@media (max-width: 600px){.search-wrapper{padding:18px 12px}.search-box{border-radius:12px}input{font-size:14px}.search-button{padding:11px 15px;font-size:13px}}@media (prefers-reduced-motion: reduce){.search-box,.clear-button,.search-button{transition:none}}`;
+
+const SearchFood = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.searchSubmit = index.createEvent(this, "searchSubmit");
+        this.searchClear = index.createEvent(this, "searchClear");
+    }
+    search = '';
+    searchSubmit;
+    searchClear;
+    handleInput = (event) => {
+        this.search = event.target.value;
+    };
+    handleSearch = () => {
+        const value = this.search.trim();
+        if (!value) {
+            return;
+        }
+        this.searchSubmit.emit(value);
+    };
+    clearSearch = () => {
+        this.search = '';
+        this.searchClear.emit();
+    };
+    render() {
+        return (index.h("div", { key: 'aec6c865acb5f9ebcacc2fd517641085c2339303', class: "search-wrapper" }, index.h("div", { key: 'f50a9844f4bb84b0ec4e1b04df5d6198e1fe3786', class: "search-box" }, index.h("span", { key: '013f2674aa34aeca8e8166ccc626299433230bc5', class: "search-icon", "aria-hidden": "true" }, "\uD83D\uDD0D"), index.h("input", { key: '4b8fad8626692ee6c44cacd05e48b46b00213b20', type: "text", value: this.search, placeholder: "Searching...", "aria-label": "Search for a food", onInput: this.handleInput }), this.search && (index.h("button", { key: '15af3cda9b0394918e4ca72e313259a006edf54d', type: "button", class: "clear-button", onClick: this.clearSearch, "aria-label": "Clear search" }, "\u00D7")), index.h("button", { key: '22cd49c7076666d2f560f83bf718eaaf7ceffbf1', type: "button", class: "search-button", onClick: this.handleSearch }, "Search"))));
+    }
+};
+SearchFood.style = searchFoodCss();
+
+exports.search_food = SearchFood;

package/dist/cjs/stencil-recipe-components.cjs.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('./index-BgGiRDlK.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.44.0 | 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('stencil-recipe-components.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["my-component.cjs",[[513,"my-component",{"first":[1],"middle":[1],"last":[1]}]]],["no-recipe-found.cjs",[[513,"no-recipe-found",{"header":[1],"message":[1],"buttonText":[1,"button-text"]}]]],["recipe-browser.cjs",[[513,"recipe-browser",{"categories":[16],"areas":[16],"ingredients":[16],"selectedCategory":[1,"selected-category"],"selectedArea":[1,"selected-area"],"selectedIngredient":[1,"selected-ingredient"]}]]],["recipe-button.cjs",[[769,"recipe-button",{"variant":[1],"type":[1],"disabled":[4]}]]],["recipe-card.cjs",[[513,"recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"cuisine":[1],"favorite":[4],"showPlanner":[32],"selectedDay":[32],"selectedMeal":[32]}]]],["recipe-form-section.cjs",[[769,"recipe-form-section",{"number":[1],"formTitle":[1,"form-title"],"description":[1]}]]],["recipe-input.cjs",[[513,"recipe-input",{"label":[1],"name":[1],"type":[1],"placeholder":[1],"value":[1],"required":[4],"helper":[1]}]]],["recipe-navbar.cjs",[[513,"recipe-navbar",{"currentPage":[1,"current-page"]}]]],["recipe-textarea.cjs",[[513,"recipe-textarea",{"label":[1],"name":[1],"rows":[2],"placeholder":[1],"value":[1],"required":[4]}]]],["search-food.cjs",[[513,"search-food",{"search":[1025]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,22 @@
+{
+  "entries": [
+    "components/recipe-browser/recipe-browser.js",
+    "components/my-component/my-component.js",
+    "components/no-recipe-found/no-recipe-found.js",
+    "components/recipe-button/recipe-button.js",
+    "components/recipe-card/recipe-card.js",
+    "components/recipe-form-section/recipe-form-section.js",
+    "components/recipe-input/recipe-input.js",
+    "components/recipe-navbar/recipe-navbar.js",
+    "components/recipe-textarea/recipe-textarea.js",
+    "components/search-food/search-food.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.44.0",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/my-component/my-component.cmp.test.js

@@ -0,0 +1,27 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+describe('my-component', () => {
+    it('renders', async () => {
+        const { root } = await render(h("my-component", null));
+        await expect(root).toEqualHtml(`
+      <my-component class="hydrated">
+        <mock:shadow-root>
+          <div>
+            Hello, World! I'm
+          </div>
+        </mock:shadow-root>
+      </my-component>
+    `);
+    });
+    it('renders with values', async () => {
+        const { root } = await render(h("my-component", { first: "Stencil", middle: "'Don't call me a framework'", last: "JS" }));
+        await expect(root).toEqualHtml(`
+      <my-component class="hydrated">
+        <mock:shadow-root>
+          <div>
+            Hello, World! I'm Stencil 'Don't call me a framework' JS
+          </div>
+        </mock:shadow-root>
+      </my-component>
+    `);
+    });
+});

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

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/my-component/my-component.js

@@ -0,0 +1,95 @@
+import { h } from "@stencil/core";
+import { format } from "../../utils/utils";
+export class MyComponent {
+    /**
+     * The first name
+     */
+    first;
+    /**
+     * The middle name
+     */
+    middle;
+    /**
+     * The last name
+     */
+    last;
+    getText() {
+        return format(this.first, this.middle, this.last);
+    }
+    render() {
+        return h("div", { key: 'edcd595f3b87cfa751442fba79e07a8823826cbc' }, "Hello, World! I'm ", this.getText());
+    }
+    static get is() { return "my-component"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["my-component.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["my-component.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "first": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The first name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "first"
+            },
+            "middle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The middle name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "middle"
+            },
+            "last": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The last name"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "last"
+            }
+        };
+    }
+}