@gurpinderjitsingh/recipe-ui 0.3.0 → 0.5.0

package/dist/cjs/app-modal_7.cjs.entry.js

@@ -19,7 +19,7 @@ const RecipeCard = class {
         };
     }
     render() {
-        return (index.h("div", { key: '1602604f99f17895a29343bf269cf5aa64db2ee1', class: "card", onClick: () => this.cardClick.emit() }, index.h("div", { key: 'b57ab7677ba357e3897f7dff5a2d8bb50a6af417', class: "image-wrap" }, this.image ? index.h("img", { src: this.image, alt: this.recipeTitle }) : index.h("div", { class: "placeholder" }), index.h("button", { key: '6720508f3723573e4fe4eef2504cffc442d3ffe1', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), index.h("div", { key: 'e30557f6fa8ca3117d7f239c1f14e07e009500a2', class: "body" }, index.h("h3", { key: '11c63ca021b1204c78783b53d9defb1eddbe15fa' }, this.recipeTitle), this.category && index.h("span", { key: 'b3d2b2ebd8997d662ade303736b4ddd494a0e273', class: "category" }, this.category), index.h("div", { key: '80cc820f78f3fd4cb64f802e69ba03cfb441ce6c', class: "actions" }, index.h("slot", { key: '318cfb3954ad5392d56af94ba8a0e3cb3c220fa7', name: "actions" })))));
+        return (index.h("div", { key: 'd84f83b5082a49a5a05b93678538bfcfecd92e47', class: "card", onClick: () => this.cardClick.emit() }, index.h("div", { key: 'a0e4f5fae6b7c14c750263f8de9bef9fbd8180a0', class: "image-wrap" }, this.image ? index.h("img", { src: this.image, alt: this.recipeTitle }) : index.h("div", { class: "placeholder" }), index.h("button", { key: '9266af379f6ebeb2624131e5c3f287d64cf4b3a5', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), index.h("div", { key: 'd0b5fa56b17c14763ecc6301864ef797565c6313', class: "body" }, index.h("h3", { key: '0c67db81d80a820cce2e6bfedd2df2611358d1e8' }, this.recipeTitle), this.category && index.h("span", { key: '30f89cf328a098be1c109d3e71b8f9f15827c6f1', class: "category" }, this.category), index.h("div", { key: '353b2663855e7ac53817d17acaf7b83908c17d85', class: "actions" }, index.h("slot", { key: '0a04fc5024751df45d744814f579100913dcd1fc', name: "actions" })))));
     }
 };
 RecipeCard.style = recipeCardCss();
@@ -55,7 +55,7 @@ const RecipeSearchBar = class {
         this.internalValue = newVal;
     }
     render() {
-        return (index.h("div", { key: '65403c53fbbe3a809f1de94bb02b04a57e5b8cd1', class: "wrap" }, index.h("input", { key: '43fb8c2a103e9e700b62ad86de1a559fc3b71d5b', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), index.h("button", { key: '2399fce8ff18e60c83bf575454eeff0e74596c6b', onClick: () => this.search.emit({ value: this.internalValue }), "aria-label": "Search" }, "\uD83D\uDD0D")));
+        return (index.h("div", { key: '00fa553cd92086a5cac70ca6b13792dfa41fc1dd', class: "wrap" }, index.h("input", { key: 'a116c51839c228d4daff54347e6b2d56c9dc2579', type: "search", placeholder: this.placeholder, value: this.internalValue, onInput: this.onInput, onKeyDown: this.onKeyDown }), index.h("button", { key: 'e16a909061abd80889ad7b7646219a7428e4db4d', onClick: () => this.search.emit({ value: this.internalValue }), "aria-label": "Search" }, "\uD83D\uDD0D")));
     }
     static get watchers() { return {
         "value": [{
@@ -79,7 +79,7 @@ const RecipeFilterBar = class {
     }
     render() {
         const cats = Array.isArray(this.categories) ? this.categories : [];
-        return (index.h("div", { key: '5d0c846f0a8df8aa178915d4ee6b6fa0009cba07', class: "wrap" }, index.h("button", { key: '49f9fa32d23122cdcee7f51869f3c158d0ce86c0', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (index.h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
+        return (index.h("div", { key: '3088a84e81d49c06a12f93e491d4ae3e7022635f', class: "wrap" }, index.h("button", { key: '0e8b7455b1364eb76721d4f6c227a0803750c466', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (index.h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
     }
 };
 RecipeFilterBar.style = recipeFilterBarCss();
@@ -96,13 +96,18 @@ const RecipeRating = class {
     }
     render() {
         const stars = Array.from({ length: this.max }, (_, i) => i + 1);
-        return (index.h("div", { key: '37923bd59ca23e07af39ebaca47a3e613809c12b', class: "wrap", role: this.readonly ? undefined : 'radiogroup' }, stars.map((s) => (index.h("span", { class: { star: true, filled: s <= this.value, clickable: !this.readonly }, onClick: () => !this.readonly && this.ratingChange.emit({ value: s }) }, "\u2605")))));
+        return (index.h("div", { key: '09bd2482d310e73993faea601d5ab86f20fc6fb7', class: "wrap", role: this.readonly ? undefined : 'radiogroup' }, stars.map((s) => (index.h("span", { class: { star: true, filled: s <= this.value, clickable: !this.readonly }, onClick: () => !this.readonly && this.ratingChange.emit({ value: s }) }, "\u2605")))));
     }
 };
 RecipeRating.style = recipeRatingCss();
 
-const recipeFormCss = () => `:host{display:block;font-family:system-ui, sans-serif}form{display:flex;flex-direction:column;gap:14px}label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#333;font-weight:600}input,textarea{font-weight:400;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}.ingredient-row{display:flex;gap:6px}.ingredient-row input{flex:1}.ingredient-row button{border:none;background:#f4f4f4;border-radius:6px;cursor:pointer;width:30px}.add-btn{align-self:flex-start;border:1px dashed #bbb;background:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px;color:#555}.error{color:#e74c3c;font-size:12px;font-weight:400}.footer{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}.cancel-btn{border:1px solid #ddd;background:#fff;border-radius:8px;padding:8px 16px;cursor:pointer}.save-btn{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:8px 18px;cursor:pointer;font-weight:600}`;
+const recipeFormCss = () => `:host{display:block;font-family:system-ui, sans-serif}form{display:flex;flex-direction:column;gap:14px}label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:#333;font-weight:600}input,textarea,select{font-weight:400;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px;font-family:inherit;background:#fff;transition:border-color 0.15s ease, box-shadow 0.15s ease}input:focus,textarea:focus,select:focus{outline:none;border-color:#ff6b35;box-shadow:0 0 0 3px rgba(255, 107, 53, 0.14)}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;padding-right:34px;cursor:pointer;color:#1f2937;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:14px}select:hover{border-color:#bbb}select:invalid,select option[value=""]{color:#9ca3af}.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}@media (max-width: 480px){.row{grid-template-columns:1fr}}.field{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:600}.ingredient-row{display:flex;gap:6px}.ingredient-row input{flex:1}.ingredient-row button{border:none;background:#f4f4f4;border-radius:6px;cursor:pointer;width:30px}.add-btn{align-self:flex-start;border:1px dashed #bbb;background:none;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px;color:#555}.error{color:#e74c3c;font-size:12px;font-weight:400}.footer{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}.cancel-btn{border:1px solid #ddd;background:#fff;border-radius:8px;padding:8px 16px;cursor:pointer}.save-btn{border:none;background:#ff6b35;color:#fff;border-radius:8px;padding:8px 18px;cursor:pointer;font-weight:600}`;
 
+const DEFAULT_CATEGORIES = [
+    'Beef', 'Breakfast', 'Chicken', 'Dessert', 'Goat', 'Lamb',
+    'Miscellaneous', 'Pasta', 'Pork', 'Seafood', 'Side', 'Starter',
+    'Vegan', 'Vegetarian', 'Other',
+];
 const DEFAULT_AREAS = [
     'American', 'British', 'Chinese', 'Croatian', 'Dutch', 'Egyptian',
     'Filipino', 'French', 'Greek', 'Indian', 'Irish', 'Italian', 'Jamaican',
@@ -115,12 +120,16 @@ const RecipeForm = class {
         index.registerInstance(this, hostRef);
         this.save = index.createEvent(this, "save");
         this.cancel = index.createEvent(this, "cancel");
-        /** Cuisine/cuisine options for the dropdown — override to supply your own list */
-        this.cuisines = DEFAULT_AREAS;
+        this.categories = DEFAULT_CATEGORIES;
+        this.extraCategories = [];
+        this.areas = DEFAULT_AREAS;
+        this.extraAreas = [];
         this.title = '';
         this.image = '';
         this.category = '';
-        this.cuisine = '';
+        this.customCategory = '';
+        this.area = '';
+        this.customArea = '';
         this.ingredients = [''];
         this.instructions = '';
         this.errors = {};
@@ -128,12 +137,14 @@ const RecipeForm = class {
             e.preventDefault();
             if (!this.validate())
                 return;
+            const resolvedCategory = this.category === 'Other' ? this.customCategory.trim() : this.category;
+            const resolvedArea = this.area === 'Other' ? this.customArea.trim() : this.area;
             const data = {
                 id: this.initialData?.id,
                 title: this.title.trim(),
                 image: this.image.trim(),
-                category: this.category.trim(),
-                cuisine: this.cuisine.trim(),
+                category: resolvedCategory,
+                area: resolvedArea,
                 ingredients: this.ingredients.map((i) => i.trim()).filter(Boolean),
                 instructions: this.instructions.trim(),
             };
@@ -144,6 +155,9 @@ const RecipeForm = class {
         };
         this.removeIngredient = (index) => {
             this.ingredients = this.ingredients.filter((_, i) => i !== index);
+            const next = this.ingredients.filter((_, i) => i !== index);
+            this.ingredients = next;
+            this.clearErrorIf('ingredients', next.some((i) => i.trim()));
         };
     }
     componentWillLoad() {
@@ -152,6 +166,31 @@ const RecipeForm = class {
     onInitialDataChange() {
         this.loadInitialData();
     }
+    mergeList(base, extra) {
+        const withoutOther = base.filter((a) => a !== 'Other');
+        const merged = [...withoutOther];
+        for (const e of extra) {
+            if (e && !merged.includes(e))
+                merged.push(e);
+        }
+        merged.push('Other');
+        return merged;
+    }
+    get fullCategoryList() {
+        return this.mergeList(this.categories, this.extraCategories);
+    }
+    get fullAreaList() {
+        return this.mergeList(this.areas, this.extraAreas);
+    }
+    /** Removes a field's error as soon as it becomes valid, without waiting
+     *  for the next full submit — called from each field's input handler. */
+    clearErrorIf(key, isNowValid) {
+        if (isNowValid && this.errors[key]) {
+            const next = { ...this.errors };
+            delete next[key];
+            this.errors = next;
+        }
+    }
     loadInitialData() {
         let data;
         if (typeof this.initialData === 'string' && this.initialData) {
@@ -168,10 +207,26 @@ const RecipeForm = class {
         if (data) {
             this.title = data.title ?? '';
             this.image = data.image ?? '';
-            this.category = data.category ?? '';
-            this.cuisine = data.cuisine ?? '';
             this.ingredients = data.ingredients?.length ? [...data.ingredients] : [''];
             this.instructions = data.instructions ?? '';
+            const knownCategories = this.fullCategoryList.filter((a) => a !== 'Other');
+            if (data.category && !knownCategories.includes(data.category)) {
+                this.category = 'Other';
+                this.customCategory = data.category;
+            }
+            else {
+                this.category = data.category ?? '';
+                this.customCategory = '';
+            }
+            const knownAreas = this.fullAreaList.filter((a) => a !== 'Other');
+            if (data.area && !knownAreas.includes(data.area)) {
+                this.area = 'Other';
+                this.customArea = data.area;
+            }
+            else {
+                this.area = data.area ?? '';
+                this.customArea = '';
+            }
         }
     }
     validate() {
@@ -183,6 +238,18 @@ const RecipeForm = class {
             errors.ingredients = 'Add at least one ingredient.';
         if (!this.instructions.trim())
             errors.instructions = 'Instructions are required.';
+        if (!this.category.trim()) {
+            errors.category = 'Category is required.';
+        }
+        else if (this.category === 'Other' && !this.customCategory.trim()) {
+            errors.customCategory = 'Enter a category name.';
+        }
+        if (!this.area.trim()) {
+            errors.area = 'Cuisine / Area is required.';
+        }
+        else if (this.area === 'Other' && !this.customArea.trim()) {
+            errors.customArea = 'Enter a cuisine name.';
+        }
         this.errors = errors;
         return Object.keys(errors).length === 0;
     }
@@ -190,9 +257,33 @@ const RecipeForm = class {
         const next = [...this.ingredients];
         next[index] = value;
         this.ingredients = next;
+        this.clearErrorIf('ingredients', next.some((i) => i.trim()));
     }
     render() {
-        return (index.h("form", { key: '7268362cd88d1d924f4bf5e4061b136454935f7b', onSubmit: this.onSubmit }, index.h("slot", { key: '913490a0ba22ca884bcc1cac49c07573f2e8c214', name: "header" }), index.h("label", { key: 'cdc71ed3a3d297e7f111f7ec67c111818fe0fdf8' }, "Title", index.h("input", { key: 'c17da6820f298ee9fc786fa206ef3bc97e361735', type: "text", value: this.title, onInput: (e) => (this.title = e.target.value) }), this.errors.title && index.h("span", { key: '2c61cc6f37f87536e72fe281b50a3c6a2bdfd9f2', class: "error" }, this.errors.title)), index.h("label", { key: '28aca3cb1ffeae0f471477d3e564598fe0459cc7' }, "Image URL", index.h("input", { key: 'd523a018b35b7160061db9dc8059ee5ce3f58433', type: "text", value: this.image, onInput: (e) => (this.image = e.target.value) })), index.h("div", { key: 'c01339651af391405999f3081ee98ad2be33d6da', class: "row" }, index.h("label", { key: '656b72f2ccb9488d22900f1b26f0907ece8190af' }, "Category", index.h("input", { key: '1b973a0c12b3c66e3c585e92930b4bdbb7240b0e', type: "text", value: this.category, onInput: (e) => (this.category = e.target.value) })), index.h("label", { key: '9e25bad33d00c3285fd948f3e7535e5c9d8d45f9' }, "Cuisine / Area", index.h("select", { key: '52365ebccaa5fa2e2361ab8102b1151eb60cb5d6', onInput: (e) => (this.cuisine = e.target.value) }, index.h("option", { key: 'ad40fd1dde5cae8e241fced55455dbadfede6734', value: "", selected: this.cuisine === '' }, "Select a cuisine\u2026"), this.cuisines.map((a) => (index.h("option", { value: a, selected: a === this.cuisine }, a)))))), index.h("div", { key: '53173a3fbea53dad5625e28a67aebbbe9880c490', class: "field" }, index.h("span", { key: 'e5699c07f862027afa73ce59c1f450df48504f37' }, "Ingredients"), this.ingredients.map((ing, i) => (index.h("div", { class: "ingredient-row" }, index.h("input", { type: "text", value: ing, onInput: (e) => this.updateIngredient(i, e.target.value) }), index.h("button", { type: "button", onClick: () => this.removeIngredient(i), "aria-label": "Remove" }, "\u2715")))), index.h("button", { key: 'c37385b611c3b05eeb32a4f1a6de110b8a3b6be4', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && index.h("span", { key: '1e7c662423b1915bbfc7d2aeea9cea3cfef9d002', class: "error" }, this.errors.ingredients)), index.h("label", { key: '267e09ca2bb1a91ef552dc3522105d079570499d' }, "Instructions", index.h("textarea", { key: '99f4aa91fba6c3d499c4efa904794a6de75e62cd', rows: 5, onInput: (e) => (this.instructions = e.target.value) }, this.instructions), this.errors.instructions && index.h("span", { key: 'cde019552bf691ee8e5a737c8a8d3c493961b0f9', class: "error" }, this.errors.instructions)), index.h("div", { key: 'b4f40cb9ab323bcc27088e7d6c7609f26b6fd9cb', class: "footer" }, index.h("slot", { key: '150b900bcadc7f51cfdfd7fe9667c22c55a745fb', name: "footer" }), index.h("button", { key: '94e6ca7f8c291051f59b8fa4794c59833884d433', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), index.h("button", { key: '462f42ddfdd000af25066a1d4dbfc07be95abdd6', type: "submit", class: "save-btn" }, "Save Recipe"))));
+        return (index.h("form", { key: 'a6fd5f89975759b270bd41da834f364d11318033', onSubmit: this.onSubmit }, index.h("slot", { key: '263cc31f43b151d6c8c0a93d55adefd17a5ea293', name: "header" }), index.h("label", { key: '096dcfe6a821d4100f5a7988f4d993fb1808bb3e' }, "Title", index.h("input", { key: '36845960be21b66c2c0b54ae27203a6c778a1477', type: "text", value: this.title, onInput: (e) => {
+                (this.title = e.target.value);
+                this.clearErrorIf('title', !!this.title.trim());
+            } }), this.errors.title && index.h("span", { key: 'eea845094133a5372df59fd8e808c88c2c8d15d1', class: "error" }, this.errors.title)), index.h("label", { key: 'ac4aa2f034a22d255501e8de9c2f7ef2bd15cd58' }, "Image URL", index.h("input", { key: 'd9b1cc9221c842ec4390370e84ed7f7b5328c72f', type: "text", value: this.image, onInput: (e) => (this.image = e.target.value) })), index.h("div", { key: '2928e819a28ffa96bc3432804edd1c54e54aebdd', class: "row" }, index.h("label", { key: '57aca8b632ee87bdf546985ce23ee7ab3cd87a53' }, "Category", index.h("select", { key: '2b2e7d8bf2b6e01a6f1326cd99c60935b6584585', onInput: (e) => {
+                (this.category = e.target.value);
+                this.clearErrorIf('category', !!this.category);
+                if (this.category !== 'Other')
+                    this.clearErrorIf('customCategory', true);
+            } }, index.h("option", { key: '40e6d1397afd47b58119f48290b2b2916b90958f', value: "", selected: this.category === '' }, "Select a category\u2026"), this.fullCategoryList.map((c) => (index.h("option", { value: c, selected: c === this.category }, c)))), this.errors.category && index.h("span", { key: 'd3633212048f29ac38cc7b10aedee51c7d5a0fe4', class: "error" }, this.errors.category)), index.h("label", { key: '04960f3ef4a8de34652f86d729838bafe2e1644e' }, "Cuisine / Area", index.h("select", { key: '4aeaedcebbc100d3166aa876bc2ea94ad9b2e74b', onInput: (e) => {
+                (this.area = e.target.value);
+                this.clearErrorIf('area', !!this.area);
+                if (this.area !== 'Other')
+                    this.clearErrorIf('customArea', true);
+            } }, index.h("option", { key: '4945a5ee9b619807ca5e698fc82abb13b7437846', value: "", selected: this.area === '' }, "Select a cuisine\u2026"), this.fullAreaList.map((a) => (index.h("option", { value: a, selected: a === this.area }, a)))), this.errors.area && index.h("span", { key: '0e5f04ad9d214882e3d7e07b4d3f2ad9986f7c17', class: "error" }, this.errors.area))), (this.category === 'Other' || this.area === 'Other') && (index.h("div", { key: '92f8844bfd4dc85007746eb1d8679e06946922f3', class: "row" }, this.category === 'Other' && (index.h("label", { key: 'e8528349a8b9fa478b819d84f2f0b21ff87820b3', class: "custom-area-field" }, "Enter category name", index.h("input", { key: '9aae8f7a261f50ada7a79eeb553149b23d918e75', type: "text", placeholder: "e.g. Brunch", value: this.customCategory, onInput: (e) => {
+                (this.customCategory = e.target.value);
+                this.customCategory = e.target.value;
+                this.clearErrorIf('customCategory', !!this.customCategory.trim());
+            } }), this.errors.customCategory && index.h("span", { key: '9aa2a8ccd0a57816a7a0267e5e0f384d2cbf100f', class: "error" }, this.errors.customCategory))), this.area === 'Other' && (index.h("label", { key: '1d1f43fc855cf1b62e94b37032cdfe0b264c61f0', class: "custom-area-field" }, "Enter cuisine name", index.h("input", { key: '8a01e2c5c6168b2061ae95a3ae59611927e8776d', type: "text", placeholder: "e.g. Ethiopian", value: this.customArea, onInput: (e) => {
+                this.customArea = e.target.value;
+                this.clearErrorIf('customArea', !!this.customArea.trim());
+            } }), this.errors.customArea && index.h("span", { key: '0724a780a6c7f853dbf49aaa7c426abdf9dc763c', class: "error" }, this.errors.customArea))))), index.h("div", { key: '8eb6642721b9e82ef1e5e4becd0578248df9d6cc', class: "field" }, index.h("span", { key: 'b7bb449313eec9110c4dde9b63d3df682a7f4d31' }, "Ingredients"), this.ingredients.map((ing, i) => (index.h("div", { class: "ingredient-row" }, index.h("input", { type: "text", value: ing, onInput: (e) => this.updateIngredient(i, e.target.value) }), index.h("button", { type: "button", onClick: () => this.removeIngredient(i), "aria-label": "Remove" }, "\u2715")))), index.h("button", { key: '4de332018a519148d1fcb2fb32657bda5b706fe7', type: "button", class: "add-btn", onClick: this.addIngredient }, "+ Add ingredient"), this.errors.ingredients && index.h("span", { key: 'fdddfe5ca60493295cdef4ecb17a17aa40684512', class: "error" }, this.errors.ingredients)), index.h("label", { key: 'af2b50576e4a53eeba69d4f19c9a6ea5e1e127c5' }, "Instructions", index.h("textarea", { key: '27e741c9f135c34e8418a596bbf6780a99ff9f95', rows: 5, onInput: (e) => {
+                this.instructions = e.target.value;
+                this.clearErrorIf('instructions', !!this.instructions.trim());
+            } }, this.instructions), this.errors.instructions && index.h("span", { key: 'db1cb5b3f667fcb3124a1bf418aac8910f5e53ab', class: "error" }, this.errors.instructions)), index.h("div", { key: '562a94f516173f714a2e5816498fc18de0e1476b', class: "footer" }, index.h("slot", { key: '3feeebb32283ef5d48652b532df4bfd939d1cafc', name: "footer" }), index.h("button", { key: 'a1f66c6c39989944b0445750c2d41602e10e60a9', type: "button", class: "cancel-btn", onClick: () => this.cancel.emit() }, "Cancel"), index.h("button", { key: 'd420bf0d1d26319e53517de40df1339ffe68fadc', type: "submit", class: "save-btn" }, "Save Recipe"))));
     }
     static get watchers() { return {
         "initialData": [{

package/dist/cjs/app-toast.cjs.entry.js

@@ -18,7 +18,7 @@ const AppToast = class {
         }
     }
     render() {
-        return (index.h("div", { key: '77c3d328a79659573feaaabe30b8c53c2023fb06', class: `toast ${this.type}` }, index.h("span", { key: '0056d61321beb80bdebd957be4322516282fd07e' }, this.message), index.h("button", { key: 'f9b6161dcd74223f3241311e54ab5e2736dcbd3b', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
+        return (index.h("div", { key: '8b34f0098a8d17af8b9384ddf8838c8ad6eaf7f2', class: `toast ${this.type}` }, index.h("span", { key: '652ce04dad64022f77dbd0236ebfc1a0075ba121' }, this.message), index.h("button", { key: '760c2e84e1bf01c3b7a8c43addf983711453be3b', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
     }
 };
 AppToast.style = appToastCss();

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ 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([["app-modal_7.cjs",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16],"icon":[1]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[257,"recipe-form",{"initialData":[1,"initial-data"],"cuisines":[16],"title":[32],"image":[32],"category":[32],"cuisine":[32],"ingredients":[32],"instructions":[32],"errors":[32]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast.cjs",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
+  return index.bootstrapLazy([["app-modal_7.cjs",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16],"icon":[1]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[257,"recipe-form",{"initialData":[1,"initial-data"],"categories":[16],"extraCategories":[16],"areas":[16],"extraAreas":[16],"title":[32],"image":[32],"category":[32],"customCategory":[32],"area":[32],"customArea":[32],"ingredients":[32],"instructions":[32],"errors":[32]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast.cjs",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["app-modal_7.cjs",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16],"icon":[1]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[257,"recipe-form",{"initialData":[1,"initial-data"],"cuisines":[16],"title":[32],"image":[32],"category":[32],"cuisine":[32],"ingredients":[32],"instructions":[32],"errors":[32]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast.cjs",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
+  return index.bootstrapLazy([["app-modal_7.cjs",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16],"icon":[1]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[257,"recipe-form",{"initialData":[1,"initial-data"],"categories":[16],"extraCategories":[16],"areas":[16],"extraAreas":[16],"title":[32],"image":[32],"category":[32],"customCategory":[32],"area":[32],"customArea":[32],"ingredients":[32],"instructions":[32],"errors":[32]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast.cjs",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/components/app-toast/app-toast.js

@@ -12,7 +12,7 @@ export class AppToast {
         }
     }
     render() {
-        return (h("div", { key: '77c3d328a79659573feaaabe30b8c53c2023fb06', class: `toast ${this.type}` }, h("span", { key: '0056d61321beb80bdebd957be4322516282fd07e' }, this.message), h("button", { key: 'f9b6161dcd74223f3241311e54ab5e2736dcbd3b', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
+        return (h("div", { key: '8b34f0098a8d17af8b9384ddf8838c8ad6eaf7f2', class: `toast ${this.type}` }, h("span", { key: '652ce04dad64022f77dbd0236ebfc1a0075ba121' }, this.message), h("button", { key: '760c2e84e1bf01c3b7a8c43addf983711453be3b', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
     }
     static get is() { return "app-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/recipe-card/recipe-card.js

@@ -17,7 +17,7 @@ export class RecipeCard {
         };
     }
     render() {
-        return (h("div", { key: '1602604f99f17895a29343bf269cf5aa64db2ee1', class: "card", onClick: () => this.cardClick.emit() }, h("div", { key: 'b57ab7677ba357e3897f7dff5a2d8bb50a6af417', class: "image-wrap" }, this.image ? h("img", { src: this.image, alt: this.recipeTitle }) : h("div", { class: "placeholder" }), h("button", { key: '6720508f3723573e4fe4eef2504cffc442d3ffe1', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), h("div", { key: 'e30557f6fa8ca3117d7f239c1f14e07e009500a2', class: "body" }, h("h3", { key: '11c63ca021b1204c78783b53d9defb1eddbe15fa' }, this.recipeTitle), this.category && h("span", { key: 'b3d2b2ebd8997d662ade303736b4ddd494a0e273', class: "category" }, this.category), h("div", { key: '80cc820f78f3fd4cb64f802e69ba03cfb441ce6c', class: "actions" }, h("slot", { key: '318cfb3954ad5392d56af94ba8a0e3cb3c220fa7', name: "actions" })))));
+        return (h("div", { key: 'd84f83b5082a49a5a05b93678538bfcfecd92e47', class: "card", onClick: () => this.cardClick.emit() }, h("div", { key: 'a0e4f5fae6b7c14c750263f8de9bef9fbd8180a0', class: "image-wrap" }, this.image ? h("img", { src: this.image, alt: this.recipeTitle }) : h("div", { class: "placeholder" }), h("button", { key: '9266af379f6ebeb2624131e5c3f287d64cf4b3a5', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), h("div", { key: 'd0b5fa56b17c14763ecc6301864ef797565c6313', class: "body" }, h("h3", { key: '0c67db81d80a820cce2e6bfedd2df2611358d1e8' }, this.recipeTitle), this.category && h("span", { key: '30f89cf328a098be1c109d3e71b8f9f15827c6f1', class: "category" }, this.category), h("div", { key: '353b2663855e7ac53817d17acaf7b83908c17d85', class: "actions" }, h("slot", { key: '0a04fc5024751df45d744814f579100913dcd1fc', name: "actions" })))));
     }
     static get is() { return "recipe-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/recipe-filter-bar/recipe-filter-bar.js

@@ -15,7 +15,7 @@ export class RecipeFilterBar {
     }
     render() {
         const cats = Array.isArray(this.categories) ? this.categories : [];
-        return (h("div", { key: '5d0c846f0a8df8aa178915d4ee6b6fa0009cba07', class: "wrap" }, h("button", { key: '49f9fa32d23122cdcee7f51869f3c158d0ce86c0', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
+        return (h("div", { key: '3088a84e81d49c06a12f93e491d4ae3e7022635f', class: "wrap" }, h("button", { key: '0e8b7455b1364eb76721d4f6c227a0803750c466', class: { chip: true, active: this.active === '' }, onClick: () => this.select('') }, "All"), cats.map((c) => (h("button", { class: { chip: true, active: this.active === c }, onClick: () => this.select(c) }, c)))));
     }
     static get is() { return "recipe-filter-bar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/recipe-form/recipe-form.css

@@ -1,19 +1,141 @@
-:host { display: block; font-family: system-ui, sans-serif; }
-form { display: flex; flex-direction: column; gap: 14px; }
-label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: #333; font-weight: 600; }
-input, textarea {
-  font-weight: 400; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px;
-  font-size: 14px; font-family: inherit;
-}
-.field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
-.ingredient-row { display: flex; gap: 6px; }
-.ingredient-row input { flex: 1; }
-.ingredient-row button { border: none; background: #f4f4f4; border-radius: 6px; cursor: pointer; width: 30px; }
+:host {
+  display: block;
+  font-family: system-ui, sans-serif;
+}
+
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 13px;
+  color: #333;
+  font-weight: 600;
+}
+
+input,
+textarea,
+select {
+  font-weight: 400;
+  padding: 8px 10px;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  font-size: 14px;
+  font-family: inherit;
+  background: #fff;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+input:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: #ff6b35;
+  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.14);
+}
+
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  padding-right: 34px;
+  cursor: pointer;
+  color: #1f2937;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 10px center;
+  background-size: 14px;
+}
+
+select:hover {
+  border-color: #bbb;
+}
+
+select:invalid,
+select option[value=""] {
+  color: #9ca3af;
+}
+
+.row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 14px;
+}
+
+@media (max-width: 480px) {
+  .row {
+    grid-template-columns: 1fr;
+  }
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 13px;
+  font-weight: 600;
+}
+
+.ingredient-row {
+  display: flex;
+  gap: 6px;
+}
+
+.ingredient-row input {
+  flex: 1;
+}
+
+.ingredient-row button {
+  border: none;
+  background: #f4f4f4;
+  border-radius: 6px;
+  cursor: pointer;
+  width: 30px;
+}
+
 .add-btn {
-  align-self: flex-start; border: 1px dashed #bbb; background: none; border-radius: 6px;
-  padding: 6px 10px; cursor: pointer; font-size: 13px; color: #555;
+  align-self: flex-start;
+  border: 1px dashed #bbb;
+  background: none;
+  border-radius: 6px;
+  padding: 6px 10px;
+  cursor: pointer;
+  font-size: 13px;
+  color: #555;
+}
+
+.error {
+  color: #e74c3c;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 6px;
+}
+
+.cancel-btn {
+  border: 1px solid #ddd;
+  background: #fff;
+  border-radius: 8px;
+  padding: 8px 16px;
+  cursor: pointer;
 }
-.error { color: #e74c3c; font-size: 12px; font-weight: 400; }
-.footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
-.cancel-btn { border: 1px solid #ddd; background: #fff; border-radius: 8px; padding: 8px 16px; cursor: pointer; }
-.save-btn { border: none; background: #ff6b35; color: #fff; border-radius: 8px; padding: 8px 18px; cursor: pointer; font-weight: 600; }
+
+.save-btn {
+  border: none;
+  background: #ff6b35;
+  color: #fff;
+  border-radius: 8px;
+  padding: 8px 18px;
+  cursor: pointer;
+  font-weight: 600;
+}