recipe-planner-ui 1.0.0

package/dist/cjs/index.cjs.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-B6uIqnrk.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([["rp-filter-chips_5.cjs",[[514,"rp-filter-chips",{"options":[16],"selected":[1],"label":[1]}],[774,"rp-ingredient-list",{"items":[16]}],[774,"rp-modal",{"open":[516],"heading":[1],"focusFirstField":[64]},null,{"open":[{"onOpenChange":0}]}],[774,"rp-recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[516]}],[514,"rp-search-bar",{"value":[1],"placeholder":[1],"label":[1],"draft":[32]},null,{"value":[{"onValueChange":0}]}]]],["rp-day-slot.cjs",[[774,"rp-day-slot",{"day":[1],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"normalized":[32]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('./index-B6uIqnrk.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.44.1 | 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('recipe-planner-ui.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([["rp-filter-chips_5.cjs",[[514,"rp-filter-chips",{"options":[16],"selected":[1],"label":[1]}],[774,"rp-ingredient-list",{"items":[16]}],[774,"rp-modal",{"open":[516],"heading":[1],"focusFirstField":[64]},null,{"open":[{"onOpenChange":0}]}],[774,"rp-recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[516]}],[514,"rp-search-bar",{"value":[1],"placeholder":[1],"label":[1],"draft":[32]},null,{"value":[{"onValueChange":0}]}]]],["rp-day-slot.cjs",[[774,"rp-day-slot",{"day":[1],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"normalized":[32]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/cjs/rp-day-slot.cjs.entry.js

@@ -0,0 +1,57 @@
+'use strict';
+
+var index = require('./index-B6uIqnrk.js');
+
+const rpDaySlotCss = () => `.sc-rp-day-slot-h{display:block;font-family:var(--rp-font-sans);color:var(--rp-color-text)}.slot.sc-rp-day-slot{display:flex;flex-direction:column;height:100%;min-height:160px;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-md)}.head.sc-rp-day-slot{display:flex;gap:var(--rp-space-2);align-items:center;justify-content:space-between;padding:var(--rp-space-2) var(--rp-space-3);border-bottom:1px solid var(--rp-color-border)}.day.sc-rp-day-slot{margin:0;font-size:var(--rp-font-size-md);text-transform:capitalize}.add.sc-rp-day-slot{display:grid;place-items:center;width:28px;height:28px;padding:0;font-size:1.125rem;line-height:1;color:var(--rp-color-accent-contrast);cursor:pointer;background:var(--rp-color-accent);border:none;border-radius:50%}.meals.sc-rp-day-slot{flex:1;margin:0;padding:var(--rp-space-2);list-style:none;display:flex;flex-direction:column;gap:var(--rp-space-2)}.meal.sc-rp-day-slot{padding:var(--rp-space-2);background:var(--rp-color-surface-sunken);border-radius:var(--rp-radius-sm)}.meal-title.sc-rp-day-slot{display:block;font-size:var(--rp-font-size-sm);line-height:1.35}.meal-actions.sc-rp-day-slot{display:flex;gap:var(--rp-space-1);align-items:center;justify-content:space-between;margin-top:var(--rp-space-2)}.move-select.sc-rp-day-slot{max-width:100%;padding:2px var(--rp-space-1);font:inherit;font-size:var(--rp-font-size-sm);color:var(--rp-color-text-muted);background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-sm);text-transform:capitalize}.remove.sc-rp-day-slot{display:grid;place-items:center;width:24px;height:24px;padding:0;font-size:1.125rem;line-height:1;color:var(--rp-color-danger);cursor:pointer;background:none;border:none;border-radius:var(--rp-radius-sm)}.empty.sc-rp-day-slot{display:grid;flex:1;place-items:center;padding:var(--rp-space-3)}.empty-text.sc-rp-day-slot{margin:0;font-size:var(--rp-font-size-sm);color:var(--rp-color-text-muted)}.add.sc-rp-day-slot:focus-visible,.remove.sc-rp-day-slot:focus-visible,.move-select.sc-rp-day-slot:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}.sr-only.sc-rp-day-slot{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}`;
+
+const DaySlot = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.rpAddMeal = index.createEvent(this, "rpAddMeal");
+        this.rpRemoveMeal = index.createEvent(this, "rpRemoveMeal");
+        this.rpMoveMeal = index.createEvent(this, "rpMoveMeal");
+    }
+    /** Machine-readable day key, echoed in every event. */
+    day;
+    /** Human-readable day name shown as the column heading. */
+    dayLabel = '';
+    /** Meals planned for this day. Must be assigned as a DOM property. */
+    meals = [];
+    /** All day keys, used to populate each meal's move target list. */
+    days = [];
+    normalized = [];
+    /** Fired when the user asks to add a meal to this day. */
+    rpAddMeal;
+    /** Fired when a meal is removed from this day. */
+    rpRemoveMeal;
+    /** Fired when a meal is reassigned to a different day. */
+    rpMoveMeal;
+    componentWillLoad() {
+        this.normalized = Array.isArray(this.meals) ? this.meals : [];
+    }
+    componentWillUpdate() {
+        // Recomputed before each render rather than in a @Watch, because the property can be
+        // replaced before the element upgrades, which @Watch would miss.
+        this.normalized = Array.isArray(this.meals) ? this.meals : [];
+    }
+    onMove = (event, meal) => {
+        const select = event.target;
+        const to = select.value;
+        if (!to || to === this.day)
+            return;
+        this.rpMoveMeal.emit({ id: meal.id, from: this.day, to });
+        // The consumer re-renders from its own data; resetting avoids a stale selection
+        // if that render is delayed.
+        select.value = '';
+    };
+    render() {
+        const days = Array.isArray(this.days) ? this.days : [];
+        const meals = this.normalized;
+        return (index.h(index.Host, { key: '689cfc71ca7fc7106e29278d027ce1c36b3830c0' }, index.h("section", { key: 'd15ed9ae6f800be9962c4c1258397ff1043fef76', class: "slot" }, index.h("header", { key: '7f3ce1dcd4e94af5699b378ab1e461a34792acd8', class: "head" }, index.h("h3", { key: 'b62fe42a27f0072370e59a101452f77de8527ae0', class: "day" }, this.dayLabel || this.day), index.h("button", { key: '658191328f041bc2dd7534a3f5614746f26c0f28', type: "button", class: "add", onClick: () => this.rpAddMeal.emit(this.day), "aria-label": `Add a meal to ${this.dayLabel || this.day}` }, "+")), meals.length === 0 ? (index.h("div", { class: "empty" }, index.h("slot", null, index.h("p", { class: "empty-text" }, "No meals planned")))) : (index.h("ul", { class: "meals" }, meals.map((meal) => (index.h("li", { class: "meal", key: meal.id }, index.h("span", { class: "meal-title" }, meal.title), index.h("div", { class: "meal-actions" }, index.h("label", { class: "move" }, index.h("span", { class: "sr-only" }, `Move ${meal.title} to another day`), index.h("select", { class: "move-select", onChange: (event) => this.onMove(event, meal) }, index.h("option", { value: "" }, "Move\u2026"), days
+            .filter((day) => day !== this.day)
+            .map((day) => (index.h("option", { key: day, value: day }, day))))), index.h("button", { type: "button", class: "remove", onClick: () => this.rpRemoveMeal.emit({ id: meal.id, day: this.day }), "aria-label": `Remove ${meal.title}` }, "\u00D7"))))))))));
+    }
+};
+DaySlot.style = rpDaySlotCss();
+
+exports.rp_day_slot = DaySlot;

package/dist/cjs/rp-filter-chips_5.cjs.entry.js

@@ -0,0 +1,240 @@
+'use strict';
+
+var index = require('./index-B6uIqnrk.js');
+
+const rpFilterChipsCss = () => `.sc-rp-filter-chips-h{display:block;font-family:var(--rp-font-sans)}.chips.sc-rp-filter-chips{display:flex;flex-wrap:wrap;gap:var(--rp-space-2)}.chip.sc-rp-filter-chips{padding:var(--rp-space-1) var(--rp-space-3);font:inherit;font-size:var(--rp-font-size-sm);color:var(--rp-color-text);cursor:pointer;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:999px}.chip.sc-rp-filter-chips:hover{background:var(--rp-color-surface-sunken)}.chip.is-selected.sc-rp-filter-chips{color:var(--rp-color-accent-contrast);background:var(--rp-color-accent);border-color:var(--rp-color-accent)}.chip.sc-rp-filter-chips:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}`;
+
+const FilterChips = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.rpFilterChange = index.createEvent(this, "rpFilterChange");
+    }
+    /**
+     * Available filter values.
+     *
+     * An array has no attribute representation, so this must be assigned as a DOM
+     * property. Frameworks that set properties on custom elements do this automatically.
+     */
+    options = [];
+    /** Currently active value, or null when no filter is applied. */
+    selected = null;
+    /** Accessible label for the group. */
+    label = 'Filter';
+    /** Fired with the new selection, or null when the filter is cleared. */
+    rpFilterChange;
+    select(option) {
+        this.rpFilterChange.emit(this.selected === option ? null : option);
+    }
+    render() {
+        // A string prop arriving from an HTML attribute would be unusable; tolerate it so
+        // the component behaves predictably in a plain .html page.
+        const options = Array.isArray(this.options) ? this.options : [];
+        return (index.h(index.Host, { key: '656b969af2e55a7c4313bc0c2c422e000811af53' }, index.h("div", { key: '1da1173fc1d6d10a312a43466a0ea799b625caef', class: "chips", role: "group", "aria-label": this.label }, options.map((option) => (index.h("button", { key: option, type: "button", class: { chip: true, 'is-selected': this.selected === option }, "aria-pressed": String(this.selected === option), onClick: () => this.select(option) }, option))))));
+    }
+};
+FilterChips.style = rpFilterChipsCss();
+
+const rpIngredientListCss = () => `.sc-rp-ingredient-list-h{display:block;font-family:var(--rp-font-sans);color:var(--rp-color-text)}.heading.sc-rp-ingredient-list{margin:0 0 var(--rp-space-3);font-size:var(--rp-font-size-lg)}.list.sc-rp-ingredient-list{margin:0;padding:0;list-style:none;border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-md);overflow:hidden}.row.sc-rp-ingredient-list{display:flex;justify-content:space-between;gap:var(--rp-space-4);padding:var(--rp-space-2) var(--rp-space-3);font-size:var(--rp-font-size-md)}.row.sc-rp-ingredient-list:nth-child(odd){background:var(--rp-color-surface-sunken)}.measure.sc-rp-ingredient-list{flex-shrink:0;color:var(--rp-color-text-muted);font-variant-numeric:tabular-nums}.empty.sc-rp-ingredient-list{margin:0;font-size:var(--rp-font-size-md);color:var(--rp-color-text-muted)}.note.sc-rp-ingredient-list{margin-top:var(--rp-space-2);font-size:var(--rp-font-size-sm);color:var(--rp-color-text-muted)}.note.sc-rp-ingredient-list:not(:has(*)){display:none}`;
+
+const IngredientList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Ingredients to display. Must be assigned as a DOM property, not an attribute. */
+    items = [];
+    render() {
+        const items = Array.isArray(this.items) ? this.items : [];
+        return (index.h(index.Host, { key: '22708ae6e60de472b2f8e40fb54b33a2ec691ad1' }, index.h("section", { key: '6f922fc37e3c230511bbdf72e55826dfa73e167e', class: "wrap" }, index.h("slot", { key: 'e9f0b16183f5ded825a5c1663caa54dcb6c2d961', name: "heading" }, index.h("h2", { key: 'c68ebf97056bc6309d3c4e79d1796d89eede1325', class: "heading" }, "Ingredients")), items.length === 0 ? (index.h("p", { class: "empty" }, "No ingredients listed for this recipe.")) : (index.h("ul", { class: "list" }, items.map((item, index$1) => (
+        // Ingredient names repeat within a recipe (for example, oil listed twice
+        // with different measures), so the index is part of the identity.
+        index.h("li", { class: "row", key: `${item.name}-${index$1}` }, index.h("span", { class: "name" }, item.name), index.h("span", { class: "measure" }, item.measure)))))), index.h("div", { key: '28d26e1bbb9f14e5dedfb153ff87e44add5cfbfb', class: "note" }, index.h("slot", { key: '20410e710e3c7dbc2ee9f6ad9493984382693687' })))));
+    }
+};
+IngredientList.style = rpIngredientListCss();
+
+const rpModalCss = () => `.sc-rp-modal-h{display:contents;font-family:var(--rp-font-sans)}.backdrop.sc-rp-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--rp-space-4);background:rgb(0 0 0 / 0.5)}.dialog.sc-rp-modal{display:flex;flex-direction:column;width:min(560px, 100%);max-height:min(80vh, 640px);color:var(--rp-color-text);background:var(--rp-color-surface);border-radius:var(--rp-radius-lg);box-shadow:var(--rp-shadow-lg)}.head.sc-rp-modal{display:flex;gap:var(--rp-space-3);align-items:center;justify-content:space-between;padding:var(--rp-space-4);border-bottom:1px solid var(--rp-color-border)}.heading.sc-rp-modal{margin:0;font-size:var(--rp-font-size-lg)}.close.sc-rp-modal{display:grid;place-items:center;width:32px;height:32px;padding:0;font-size:1.5rem;line-height:1;color:var(--rp-color-text-muted);cursor:pointer;background:none;border:none;border-radius:var(--rp-radius-sm)}.close.sc-rp-modal:hover{background:var(--rp-color-surface-sunken)}.close.sc-rp-modal:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}.body.sc-rp-modal{flex:1;padding:var(--rp-space-4);overflow-y:auto}.foot.sc-rp-modal{display:flex;gap:var(--rp-space-2);justify-content:flex-end;padding:var(--rp-space-4);border-top:1px solid var(--rp-color-border)}.foot.sc-rp-modal:not(:has(*)){display:none}@media (prefers-reduced-motion: no-preference){.dialog.sc-rp-modal{animation:rp-modal-in 120ms ease-out}@keyframes rp-modal-in{from{opacity:0;transform:translateY(8px)}}}`;
+
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const Modal = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.rpClose = index.createEvent(this, "rpClose");
+    }
+    get el() { return index.getElement(this); }
+    /** Whether the dialog is visible. */
+    open = false;
+    /** Dialog heading, also used as its accessible name. */
+    heading = '';
+    /** Fired when the user dismisses the dialog via Escape, the backdrop, or the close button. */
+    rpClose;
+    previouslyFocused = null;
+    onOpenChange(isOpen) {
+        if (isOpen) {
+            this.previouslyFocused = document.activeElement;
+            document.addEventListener('keydown', this.onKeydown);
+            // The dialog content renders in the same tick, so defer focus until it exists.
+            requestAnimationFrame(() => this.focusFirstField());
+        }
+        else {
+            document.removeEventListener('keydown', this.onKeydown);
+            this.previouslyFocused?.focus();
+            this.previouslyFocused = null;
+        }
+    }
+    componentDidLoad() {
+        // A dialog can be mounted already open, in which case @Watch never fires.
+        if (this.open)
+            this.onOpenChange(true);
+    }
+    disconnectedCallback() {
+        // Without this, every mount of a page containing a modal leaks a document listener.
+        document.removeEventListener('keydown', this.onKeydown);
+    }
+    /**
+     * Moves focus to the first focusable control inside the dialog.
+     *
+     * Exposed as a method because "move focus now" is a one-shot action with no state to
+     * represent; a prop would have to be toggled and reset to fire it twice.
+     */
+    async focusFirstField() {
+        const first = this.el.querySelector(FOCUSABLE);
+        first?.focus();
+    }
+    onKeydown = (event) => {
+        if (!this.open)
+            return;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.rpClose.emit();
+            return;
+        }
+        if (event.key === 'Tab')
+            this.trapFocus(event);
+    };
+    trapFocus(event) {
+        const focusable = Array.from(this.el.querySelectorAll(FOCUSABLE));
+        if (focusable.length === 0)
+            return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = document.activeElement;
+        // Wrap in both directions so Tab never escapes the dialog into the page behind it.
+        if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    onBackdropClick = (event) => {
+        if (event.target === event.currentTarget)
+            this.rpClose.emit();
+    };
+    render() {
+        if (!this.open)
+            return null;
+        return (index.h(index.Host, null, index.h("div", { class: "backdrop", onClick: this.onBackdropClick }, index.h("div", { class: "dialog", role: "dialog", "aria-modal": "true", "aria-label": this.heading }, index.h("header", { class: "head" }, index.h("h2", { class: "heading" }, this.heading), index.h("button", { type: "button", class: "close", onClick: () => this.rpClose.emit(), "aria-label": "Close dialog" }, "\u00D7")), index.h("div", { class: "body" }, index.h("slot", null)), index.h("footer", { class: "foot" }, index.h("slot", { name: "footer" }))))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
+};
+Modal.style = rpModalCss();
+
+const rpRecipeCardCss = () => `.sc-rp-recipe-card-h{display:block;font-family:var(--rp-font-sans);color:var(--rp-color-text)}.card.sc-rp-recipe-card{display:flex;flex-direction:column;height:100%;overflow:hidden;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-lg);box-shadow:var(--rp-shadow-sm)}.media.sc-rp-recipe-card{position:relative;aspect-ratio:4 / 3;background:var(--rp-color-surface-sunken)}.media.sc-rp-recipe-card img.sc-rp-recipe-card{display:block;width:100%;height:100%;object-fit:cover}.media-fallback.sc-rp-recipe-card{width:100%;height:100%;background:linear-gradient(135deg, var(--rp-color-surface-sunken), var(--rp-color-border))}.badges.sc-rp-recipe-card{position:absolute;inset-block-start:var(--rp-space-2);inset-inline-start:var(--rp-space-2);display:flex;flex-wrap:wrap;gap:var(--rp-space-1)}.favorite.sc-rp-recipe-card{position:absolute;inset-block-start:var(--rp-space-2);inset-inline-end:var(--rp-space-2);display:grid;place-items:center;width:36px;height:36px;padding:0;cursor:pointer;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:50%;box-shadow:var(--rp-shadow-sm)}.favorite.sc-rp-recipe-card svg.sc-rp-recipe-card{fill:none;stroke:var(--rp-color-text-muted);stroke-width:1.8}[favorite].sc-rp-recipe-card-h .favorite.sc-rp-recipe-card svg.sc-rp-recipe-card{fill:var(--rp-color-favorite);stroke:var(--rp-color-favorite)}.favorite.sc-rp-recipe-card:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}.body.sc-rp-recipe-card{flex:1;padding:var(--rp-space-3) var(--rp-space-4)}.title.sc-rp-recipe-card{margin:0;font-size:var(--rp-font-size-lg);line-height:1.3}.category.sc-rp-recipe-card{margin:var(--rp-space-1) 0 0;font-size:var(--rp-font-size-sm);color:var(--rp-color-text-muted)}.actions.sc-rp-recipe-card{display:flex;gap:var(--rp-space-2);align-items:center;padding:0 var(--rp-space-4) var(--rp-space-4)}.actions.sc-rp-recipe-card:not(:has(*)){display:none}`;
+
+const RecipeCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.rpFavoriteToggle = index.createEvent(this, "rpFavoriteToggle");
+    }
+    get el() { return index.getElement(this); }
+    /** Identifier echoed back in the toggle event so consumers know which card fired. */
+    recipeId;
+    /**
+     * Recipe name, rendered as the card heading.
+     *
+     * Named `recipeTitle` rather than `title` because every HTMLElement already defines
+     * `title` on its prototype; shadowing it produces inconsistent behaviour across browsers.
+     */
+    recipeTitle;
+    /** Absolute URL of the recipe image. */
+    image;
+    /** Category label shown under the heading. */
+    category;
+    /** Whether this recipe is currently a favorite. Reflected for CSS hooks. */
+    favorite = false;
+    /** Fired when the favorite control is activated. */
+    rpFavoriteToggle;
+    toggleFavorite = () => {
+        // Emits the intended next state. The consumer owns the data and decides whether
+        // the change is applied, so this component never writes to its own prop.
+        this.rpFavoriteToggle.emit({ recipeId: this.recipeId, favorite: !this.favorite });
+    };
+    render() {
+        return (index.h(index.Host, { key: '7ac4bd65a2fa94815db81c986d17e3dff768334f' }, index.h("article", { key: 'b8ab03b01a7305ebac8fa8c7a512cf670afbd7c9', class: "card" }, index.h("div", { key: 'ddd9892bf42ed7fdd1300d439449ac4c471f11e3', class: "media" }, this.image ? (index.h("img", { src: this.image, alt: "", loading: "lazy", width: "320", height: "240" })) : (index.h("div", { class: "media-fallback", "aria-hidden": "true" })), index.h("div", { key: '211b2f1621e96b2350ff17598094790809c6fe81', class: "badges" }, index.h("slot", { key: 'ab834b8c4ff5c643c35d4f29c7bc9ddab5886e44' })), index.h("button", { key: '67d76da1db3b7d867d64042260cb69b30ea9fa2f', type: "button", class: "favorite", onClick: this.toggleFavorite, "aria-pressed": String(this.favorite), "aria-label": this.favorite ? `Remove ${this.recipeTitle} from favorites` : `Add ${this.recipeTitle} to favorites` }, index.h("svg", { key: 'ad94f74c83aba86af030d380d02ca331bf1edd66', viewBox: "0 0 24 24", width: "20", height: "20", "aria-hidden": "true" }, index.h("path", { key: 'cec837ac8a9e440730ed83f5746fba9833722d43', d: "M12 21s-7.5-4.7-9.3-9A5.2 5.2 0 0 1 12 6.5 5.2 5.2 0 0 1 21.3 12c-1.8 4.3-9.3 9-9.3 9z" })))), index.h("div", { key: '57e619602fb97b1197d1391e1bca37059fad4750', class: "body" }, index.h("h3", { key: '1576688c8d62e883132bb25f7f4f0832e7e102c2', class: "title" }, this.recipeTitle), this.category && index.h("p", { key: 'ca58ac4811bf94d13761ac0fd3fdd63a4b35c057', class: "category" }, this.category)), index.h("div", { key: 'fe7531c32eb5b110fe5aea2c4680a020848633bd', class: "actions" }, index.h("slot", { key: 'daf97a1324f3d2d08d1900d057cab1968be8c9d7', name: "actions" })))));
+    }
+};
+RecipeCard.style = rpRecipeCardCss();
+
+const rpSearchBarCss = () => `.sc-rp-search-bar-h{display:block;font-family:var(--rp-font-sans)}.bar.sc-rp-search-bar{display:flex;gap:var(--rp-space-2);align-items:center}.field.sc-rp-search-bar{flex:1;min-width:0;padding:var(--rp-space-2) var(--rp-space-3);font:inherit;font-size:var(--rp-font-size-md);color:var(--rp-color-text);background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-md)}.field.sc-rp-search-bar::-webkit-search-cancel-button{display:none}.field.sc-rp-search-bar:focus-visible,.submit.sc-rp-search-bar:focus-visible,.clear.sc-rp-search-bar:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}.clear.sc-rp-search-bar{display:grid;place-items:center;width:32px;height:32px;padding:0;font-size:1.25rem;line-height:1;color:var(--rp-color-text-muted);cursor:pointer;background:none;border:none;border-radius:50%}.clear.sc-rp-search-bar:hover{background:var(--rp-color-surface-sunken)}.submit.sc-rp-search-bar{padding:var(--rp-space-2) var(--rp-space-4);font:inherit;font-size:var(--rp-font-size-md);font-weight:600;color:var(--rp-color-accent-contrast);cursor:pointer;background:var(--rp-color-accent);border:none;border-radius:var(--rp-radius-md)}`;
+
+const SearchBar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.rpSearch = index.createEvent(this, "rpSearch");
+        this.rpClear = index.createEvent(this, "rpClear");
+    }
+    /** Initial query text. Changing it externally resets the field. */
+    value = '';
+    /** Placeholder shown when the field is empty. */
+    placeholder = 'Search recipes';
+    /** Accessible label for the input. */
+    label = 'Search recipes';
+    /**
+     * Live field contents. Held internally so typing does not require a round trip
+     * through the consumer, while `value` remains the externally controlled seed.
+     */
+    draft = '';
+    /** Fired on submit with the trimmed query. */
+    rpSearch;
+    /** Fired when the user clears a non-empty field. */
+    rpClear;
+    onValueChange(next) {
+        this.draft = next ?? '';
+    }
+    componentWillLoad() {
+        this.draft = this.value ?? '';
+    }
+    onSubmit = (event) => {
+        // The host page owns navigation, so the native GET submission must not fire.
+        event.preventDefault();
+        this.rpSearch.emit(this.draft.trim());
+    };
+    onInput = (event) => {
+        this.draft = event.target.value;
+    };
+    onClear = () => {
+        this.draft = '';
+        this.rpClear.emit();
+    };
+    render() {
+        return (index.h(index.Host, { key: '12550f4e6587473576e211fe1cfa5d075a02399f' }, index.h("form", { key: 'e1a61e15c159e8449770b7df63a649d84b136aa2', class: "bar", role: "search", onSubmit: this.onSubmit }, index.h("input", { key: 'defae81130bf361beae8a57c15633c6595437493', type: "search", class: "field", value: this.draft, placeholder: this.placeholder, "aria-label": this.label, onInput: this.onInput }), this.draft && (index.h("button", { key: '4cd2eac81b32f17d18e89c51a90e0a0d9edf7d01', type: "button", class: "clear", onClick: this.onClear, "aria-label": "Clear search" }, "\u00D7")), index.h("button", { key: 'b07034ed131233623d8edbdd16db3cfd8ffab4b7', type: "submit", class: "submit" }, "Search"))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "onValueChange": 0
+            }]
+    }; }
+};
+SearchBar.style = rpSearchBarCss();
+
+exports.rp_filter_chips = FilterChips;
+exports.rp_ingredient_list = IngredientList;
+exports.rp_modal = Modal;
+exports.rp_recipe_card = RecipeCard;
+exports.rp_search_bar = SearchBar;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,18 @@
+{
+  "entries": [
+    "components/rp-day-slot/rp-day-slot.js",
+    "components/rp-filter-chips/rp-filter-chips.js",
+    "components/rp-ingredient-list/rp-ingredient-list.js",
+    "components/rp-modal/rp-modal.js",
+    "components/rp-recipe-card/rp-recipe-card.js",
+    "components/rp-search-bar/rp-search-bar.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.44.1",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/rp-day-slot/rp-day-slot.css

@@ -0,0 +1,131 @@
+:host {
+  display: block;
+  font-family: var(--rp-font-sans);
+  color: var(--rp-color-text);
+}
+
+.slot {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 160px;
+  background: var(--rp-color-surface);
+  border: 1px solid var(--rp-color-border);
+  border-radius: var(--rp-radius-md);
+}
+
+.head {
+  display: flex;
+  gap: var(--rp-space-2);
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--rp-space-2) var(--rp-space-3);
+  border-bottom: 1px solid var(--rp-color-border);
+}
+
+.day {
+  margin: 0;
+  font-size: var(--rp-font-size-md);
+  text-transform: capitalize;
+}
+
+.add {
+  display: grid;
+  place-items: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  font-size: 1.125rem;
+  line-height: 1;
+  color: var(--rp-color-accent-contrast);
+  cursor: pointer;
+  background: var(--rp-color-accent);
+  border: none;
+  border-radius: 50%;
+}
+
+.meals {
+  flex: 1;
+  margin: 0;
+  padding: var(--rp-space-2);
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: var(--rp-space-2);
+}
+
+.meal {
+  padding: var(--rp-space-2);
+  background: var(--rp-color-surface-sunken);
+  border-radius: var(--rp-radius-sm);
+}
+
+.meal-title {
+  display: block;
+  font-size: var(--rp-font-size-sm);
+  line-height: 1.35;
+}
+
+.meal-actions {
+  display: flex;
+  gap: var(--rp-space-1);
+  align-items: center;
+  justify-content: space-between;
+  margin-top: var(--rp-space-2);
+}
+
+.move-select {
+  max-width: 100%;
+  padding: 2px var(--rp-space-1);
+  font: inherit;
+  font-size: var(--rp-font-size-sm);
+  color: var(--rp-color-text-muted);
+  background: var(--rp-color-surface);
+  border: 1px solid var(--rp-color-border);
+  border-radius: var(--rp-radius-sm);
+  text-transform: capitalize;
+}
+
+.remove {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  font-size: 1.125rem;
+  line-height: 1;
+  color: var(--rp-color-danger);
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-radius: var(--rp-radius-sm);
+}
+
+.empty {
+  display: grid;
+  flex: 1;
+  place-items: center;
+  padding: var(--rp-space-3);
+}
+
+.empty-text {
+  margin: 0;
+  font-size: var(--rp-font-size-sm);
+  color: var(--rp-color-text-muted);
+}
+
+.add:focus-visible,
+.remove:focus-visible,
+.move-select:focus-visible {
+  outline: var(--rp-focus-ring);
+  outline-offset: var(--rp-focus-offset);
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}