recipe-planner-ui 1.1.1 → 1.3.0

package/dist/cjs/{index-B6uIqnrk.js → index-CrJlwqe_.js}

@@ -152,6 +152,23 @@ var plt = {
   ce: (eventName, opts) => new CustomEvent(eventName, opts)
 };
 var supportsShadow = BUILD.shadowDom;
+var supportsListenerOptions = /* @__PURE__ */ (() => {
+  var _a;
+  let supportsListenerOptions2 = false;
+  try {
+    (_a = win.document) == null ? void 0 : _a.addEventListener(
+      "e",
+      null,
+      Object.defineProperty({}, "passive", {
+        get() {
+          supportsListenerOptions2 = true;
+        }
+      })
+    );
+  } catch (e) {
+  }
+  return supportsListenerOptions2;
+})();
 var promiseResolve = (v) => Promise.resolve(v);
 var supportsConstructableStylesheets = /* @__PURE__ */ (() => {
   try {
@@ -591,6 +608,9 @@ var parsePropertyValue = (propValue, propType, isFormAssociated) => {
         return propValue === "false" ? false : propValue === "" || !!propValue;
       }
     }
+    if (propType & 2 /* Number */) {
+      return typeof propValue === "string" ? parseFloat(propValue) : typeof propValue === "number" ? propValue : NaN;
+    }
     if (propType & 1 /* String */) {
       return String(propValue);
     }
@@ -636,7 +656,11 @@ var setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags, initialRen
       classList.remove(...oldClasses.filter((c) => c && !newClasses.includes(c)));
       classList.add(...newClasses.filter((c) => c && !oldClasses.includes(c)));
     }
-  } else if (memberName === "key") ; else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
+  } else if (memberName === "key") ; else if (memberName === "ref") {
+    if (newValue) {
+      queueRefAttachment(newValue, elm);
+    }
+  } else if ((!isProp ) && memberName[0] === "o" && memberName[1] === "n") {
     if (memberName[2] === "-") {
       memberName = memberName.slice(3);
     } else if (isMemberInElement(win, ln)) {
@@ -780,6 +804,8 @@ var useNativeShadowDom = false;
 var checkSlotFallbackVisibility = false;
 var checkSlotRelocate = false;
 var isSvgMode = false;
+var refCallbacksToRemove = [];
+var refCallbacksToAttach = [];
 var createElm = (oldParentVNode, newParentVNode, childIndex) => {
   var _a;
   const newVNode2 = newParentVNode.$children$[childIndex];
@@ -932,6 +958,7 @@ var removeVnodes = (vnodes, startIdx, endIdx) => {
     const vnode = vnodes[index];
     if (vnode) {
       const elm = vnode.$elm$;
+      nullifyVNodeRefs(vnode);
       if (elm) {
         {
           checkSlotFallbackVisibility = true;
@@ -1152,6 +1179,27 @@ var markSlotContentForRelocation = (elm) => {
     }
   }
 };
+var nullifyVNodeRefs = (vNode) => {
+  {
+    if (vNode.$attrs$ && vNode.$attrs$.ref) {
+      refCallbacksToRemove.push(() => vNode.$attrs$.ref(null));
+    }
+    vNode.$children$ && vNode.$children$.map(nullifyVNodeRefs);
+  }
+};
+var queueRefAttachment = (refCallback, elm) => {
+  {
+    refCallbacksToAttach.push(() => refCallback(elm));
+  }
+};
+var flushQueuedRefCallbacks = () => {
+  {
+    refCallbacksToRemove.forEach((cb) => cb());
+    refCallbacksToRemove.length = 0;
+    refCallbacksToAttach.forEach((cb) => cb());
+    refCallbacksToAttach.length = 0;
+  }
+};
 var insertBefore = (parent, newNode, reference, isInitialLoad) => {
   {
     if (typeof newNode["s-sn"] === "string" && !!newNode["s-sr"] && !!newNode["s-cr"]) {
@@ -1321,6 +1369,7 @@ var renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
     }
   }
   contentRef = void 0;
+  flushQueuedRefCallbacks();
 };
 
 // src/runtime/update-component.ts
@@ -1370,6 +1419,13 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
         hostRef.$deferredConnectedCallback$ = false;
         safeCall(instance, "connectedCallback", void 0, elm);
       }
+      {
+        hostRef.$flags$ |= 256 /* isListenReady */;
+        if (hostRef.$queuedListeners$) {
+          hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
+          hostRef.$queuedListeners$ = void 0;
+        }
+      }
       if (hostRef.$fetchedCbList$.length) {
         hostRef.$fetchedCbList$.forEach((cb) => cb(elm));
       }
@@ -1853,6 +1909,7 @@ var connectedCallback = (elm) => {
         initializeComponent(elm, hostRef, cmpMeta);
       }
     } else {
+      addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
       if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
         fireConnectedCallback(hostRef.$lazyInstance$, elm);
       } else if (hostRef.$flags$ & 1024 /* hasFailedLoad */) {
@@ -1882,6 +1939,12 @@ var disconnectInstance = (instance, elm) => {
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
+    {
+      if (hostRef == null ? void 0 : hostRef.$rmListeners$) {
+        hostRef.$rmListeners$.map((rmListener) => rmListener());
+        hostRef.$rmListeners$ = void 0;
+      }
+    }
     if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
       disconnectInstance(hostRef.$lazyInstance$, elm);
     } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
@@ -1931,6 +1994,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$members$ = compactMeta[2];
       }
+      {
+        cmpMeta.$listeners$ = compactMeta[3];
+      }
       {
         cmpMeta.$attrsToReflect$ = [];
       }
@@ -1957,6 +2023,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           }
           if (!this.hasRegisteredEventListeners) {
             this.hasRegisteredEventListeners = true;
+            addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
           }
           if (appLoadFallback) {
             clearTimeout(appLoadFallback);
@@ -2026,6 +2093,41 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   }
   endBootstrap();
 };
+var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
+  if (listeners && win.document) {
+    listeners.map(([flags, name, method]) => {
+      const target = getHostListenerTarget(win.document, elm, flags) ;
+      const handler = hostListenerProxy(hostRef, method);
+      const opts = hostListenerOpts(flags);
+      plt.ael(target, name, handler, opts);
+      (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
+    });
+  }
+};
+var hostListenerProxy = (hostRef, methodName) => (ev) => {
+  var _a;
+  try {
+    {
+      if (hostRef.$flags$ & 256 /* isListenReady */) {
+        (_a = hostRef.$lazyInstance$) == null ? void 0 : _a[methodName](ev);
+      } else {
+        (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+      }
+    }
+  } catch (e) {
+    consoleError(e, hostRef.$hostElement$);
+  }
+};
+var getHostListenerTarget = (doc, elm, flags) => {
+  if (flags & 4 /* TargetDocument */) {
+    return doc;
+  }
+  return elm;
+};
+var hostListenerOpts = (flags) => supportsListenerOptions ? {
+  passive: (flags & 1 /* Passive */) !== 0,
+  capture: (flags & 2 /* Capture */) !== 0
+} : (flags & 2 /* Capture */) !== 0;
 
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-B6uIqnrk.js');
+var index = require('./index-CrJlwqe_.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],"dayLabels":[16],"normalized":[32]}]]]], options);
+  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],"area":[1],"minutes":[2],"favorite":[516],"imageLoading":[32],"imageFailed":[32],"pulsing":[32]}],[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],"dayLabels":[16],"normalized":[32],"dropActive":[32],"draggingId":[32]}]]],["rp-filter-menu.cjs",[[514,"rp-filter-menu",{"label":[1],"options":[16],"selected":[1],"searchPlaceholder":[1,"search-placeholder"],"searchable":[4],"open":[1540],"filterText":[32],"activeIndex":[32]},[[5,"pointerdown","onDocumentPointerDown"],[4,"keydown","onDocumentKeydown"]],{"open":[{"onOpenChange":0}]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-B6uIqnrk.js');
+var index = require('./index-CrJlwqe_.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["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],"dayLabels":[16],"normalized":[32]}]]]], options);
+  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],"area":[1],"minutes":[2],"favorite":[516],"imageLoading":[32],"imageFailed":[32],"pulsing":[32]}],[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],"dayLabels":[16],"normalized":[32],"dropActive":[32],"draggingId":[32]}]]],["rp-filter-menu.cjs",[[514,"rp-filter-menu",{"label":[1],"options":[16],"selected":[1],"searchPlaceholder":[1,"search-placeholder"],"searchable":[4],"open":[1540],"filterText":[32],"activeIndex":[32]},[[5,"pointerdown","onDocumentPointerDown"],[4,"keydown","onDocumentKeydown"]],{"open":[{"onOpenChange":0}]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-B6uIqnrk.js');
+var index = require('./index-CrJlwqe_.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 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:200px;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-xs);transition:border-color var(--rp-duration) var(--rp-ease),     box-shadow var(--rp-duration) var(--rp-ease),     background-color var(--rp-duration) var(--rp-ease)}.slot.is-empty.sc-rp-day-slot{background:var(--rp-color-surface-sunken);border-style:dashed}.slot.is-drop-active.sc-rp-day-slot{background:var(--rp-color-highlight-soft);border-style:solid;border-color:var(--rp-color-highlight);box-shadow:var(--rp-shadow-md), inset 0 0 0 1px var(--rp-color-highlight)}.head.sc-rp-day-slot{display:flex;gap:var(--rp-space-2);align-items:center;justify-content:space-between;padding:var(--rp-space-3);border-bottom:1px solid var(--rp-color-border)}.day.sc-rp-day-slot{min-width:0;margin:0;overflow:hidden;font-size:var(--rp-font-size-xs);font-weight:700;letter-spacing:0.08em;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap;color:var(--rp-color-text-muted)}.head-right.sc-rp-day-slot{display:flex;flex-shrink:0;gap:var(--rp-space-2);align-items:center}.count.sc-rp-day-slot{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;font-size:0.6875rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--rp-caramel-600);background:var(--rp-color-highlight-soft);border-radius:var(--rp-radius-pill)}.add.sc-rp-day-slot{display:grid;place-items:center;width:26px;height:26px;padding:0;cursor:pointer;color:var(--rp-color-accent-contrast);background:var(--rp-color-accent);border:none;border-radius:50%;transition:transform var(--rp-duration-fast) var(--rp-ease),     background-color var(--rp-duration-fast) var(--rp-ease)}.add.sc-rp-day-slot svg.sc-rp-day-slot{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.add.sc-rp-day-slot:hover{background:var(--rp-color-highlight);transform:rotate(90deg) scale(1.1)}.add.sc-rp-day-slot:active{transform:rotate(90deg) scale(0.92)}.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{position:relative;padding:var(--rp-space-3) var(--rp-space-3) var(--rp-space-2);cursor:grab;background:var(--rp-color-surface-sunken);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-md);transition:transform var(--rp-duration-fast) var(--rp-ease),     box-shadow var(--rp-duration-fast) var(--rp-ease),     opacity var(--rp-duration-fast) var(--rp-ease)}.meal.sc-rp-day-slot:hover{background:var(--rp-color-surface);box-shadow:var(--rp-shadow-sm);transform:translateY(-1px)}.meal.sc-rp-day-slot:active{cursor:grabbing}.meal.is-dragging.sc-rp-day-slot{opacity:0.4;box-shadow:none;transform:none}.grip.sc-rp-day-slot{position:absolute;inset-block-start:var(--rp-space-2);inset-inline-end:var(--rp-space-2);display:block;opacity:0;transition:opacity var(--rp-duration-fast) var(--rp-ease)}.grip.sc-rp-day-slot svg.sc-rp-day-slot{display:block;fill:var(--rp-color-text-subtle)}.meal.sc-rp-day-slot:hover .grip.sc-rp-day-slot{opacity:1}.meal-title.sc-rp-day-slot{display:block;padding-inline-end:var(--rp-space-4);font-size:var(--rp-font-size-sm);font-weight:500;line-height:1.35;color:var(--rp-color-text)}.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:3px var(--rp-space-2);font:inherit;font-size:var(--rp-font-size-xs);color:var(--rp-color-text-muted);cursor:pointer;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-sm);transition:border-color var(--rp-duration-fast) var(--rp-ease)}.move-select.sc-rp-day-slot:hover{border-color:var(--rp-color-border-strong)}.remove.sc-rp-day-slot{display:grid;place-items:center;width:24px;height:24px;padding:0;color:var(--rp-color-text-subtle);cursor:pointer;background:none;border:none;border-radius:var(--rp-radius-sm);transition:color var(--rp-duration-fast) var(--rp-ease),     background-color var(--rp-duration-fast) var(--rp-ease)}.remove.sc-rp-day-slot svg.sc-rp-day-slot{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.remove.sc-rp-day-slot:hover{color:var(--rp-color-danger);background:var(--rp-color-danger-soft)}.empty.sc-rp-day-slot{display:flex;flex:1;flex-direction:column;gap:var(--rp-space-2);align-items:center;justify-content:center;padding:var(--rp-space-4) var(--rp-space-3);text-align:center}.empty-icon.sc-rp-day-slot{fill:none;stroke:var(--rp-color-text-subtle);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.empty-text.sc-rp-day-slot{margin:0;font-size:var(--rp-font-size-xs);color:var(--rp-color-text-subtle)}.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}@media (prefers-reduced-motion: reduce){.slot.sc-rp-day-slot,.meal.sc-rp-day-slot,.add.sc-rp-day-slot,.grip.sc-rp-day-slot,.remove.sc-rp-day-slot,.move-select.sc-rp-day-slot{transition:none}.meal.sc-rp-day-slot:hover,.add.sc-rp-day-slot:hover,.add.sc-rp-day-slot:active{transform:none}.grip.sc-rp-day-slot{opacity:1}}`;
 
 const DaySlot = class {
     constructor(hostRef) {
@@ -27,11 +27,20 @@ const DaySlot = class {
      */
     dayLabels = {};
     normalized = [];
+    /** True while a compatible meal is being dragged over this column. */
+    dropActive = false;
+    /** Id of the meal being dragged out of this column, dimmed at its origin. */
+    draggingId = null;
+    /**
+     * Nested children fire dragleave as the pointer crosses them, so a boolean flag would
+     * flicker off mid-column. Counting enter and leave pairs is what makes the state stable.
+     */
+    dragDepth = 0;
     /** 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. */
+    /** Fired when a meal is reassigned to a different day, by drag or by select. */
     rpMoveMeal;
     componentWillLoad() {
         this.normalized = Array.isArray(this.meals) ? this.meals : [];
@@ -41,23 +50,82 @@ const DaySlot = class {
         // replaced before the element upgrades, which @Watch would miss.
         this.normalized = Array.isArray(this.meals) ? this.meals : [];
     }
+    emitMove(id, from, to) {
+        if (!to || to === from)
+            return;
+        this.rpMoveMeal.emit({ id, from, to });
+    }
     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 });
+        this.emitMove(meal.id, this.day, select.value);
         // The consumer re-renders from its own data; resetting avoids a stale selection
         // if that render is delayed.
         select.value = '';
     };
+    onDragStart = (event, meal) => {
+        this.draggingId = meal.id;
+        // A custom MIME type is what lets dragover distinguish a meal from a dragged file or
+        // a text selection, so unrelated drags never light up a column as a drop target.
+        event.dataTransfer?.setData('application/x-rp-meal', JSON.stringify({ id: meal.id, from: this.day }));
+        // text/plain is set alongside it because some browsers refuse a drag with no
+        // conventional format attached.
+        event.dataTransfer?.setData('text/plain', meal.title);
+        if (event.dataTransfer)
+            event.dataTransfer.effectAllowed = 'move';
+    };
+    onDragEnd = () => {
+        this.draggingId = null;
+        this.dragDepth = 0;
+        this.dropActive = false;
+    };
+    hasMealPayload(event) {
+        return event.dataTransfer?.types.includes('application/x-rp-meal') ?? false;
+    }
+    onDragEnter = (event) => {
+        if (!this.hasMealPayload(event))
+            return;
+        this.dragDepth += 1;
+        this.dropActive = true;
+    };
+    onDragOver = (event) => {
+        if (!this.hasMealPayload(event))
+            return;
+        // Without preventDefault the browser treats the element as a non-drop zone and the
+        // drop event never fires.
+        event.preventDefault();
+        if (event.dataTransfer)
+            event.dataTransfer.dropEffect = 'move';
+    };
+    onDragLeave = (event) => {
+        if (!this.hasMealPayload(event))
+            return;
+        this.dragDepth = Math.max(0, this.dragDepth - 1);
+        if (this.dragDepth === 0)
+            this.dropActive = false;
+    };
+    onDrop = (event) => {
+        const payload = event.dataTransfer?.getData('application/x-rp-meal');
+        if (!payload)
+            return;
+        event.preventDefault();
+        this.dragDepth = 0;
+        this.dropActive = false;
+        try {
+            const { id, from } = JSON.parse(payload);
+            this.emitMove(id, from, this.day);
+        }
+        catch {
+            // A malformed payload means the drag did not originate here; ignoring it is
+            // preferable to throwing inside a drop handler, where nothing would catch it.
+        }
+    };
     render() {
         const days = Array.isArray(this.days) ? this.days : [];
         const labels = this.dayLabels ?? {};
         const meals = this.normalized;
-        return (index.h(index.Host, { key: '978933e713e714278d4913516ec1c1aca1593513' }, index.h("section", { key: '7f035218a49d75e8d96f675259d33de09a504334', class: "slot" }, index.h("header", { key: 'c7d620e25558ca4758f6d67ac3eaf74f1f1f756c', class: "head" }, index.h("h3", { key: 'b17841e7792ffc8c7179a395d7dc2219781179b5', class: "day" }, this.dayLabel || this.day), index.h("button", { key: 'f336aac8ff55e5d596c4d99a954218613b6686a2', 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
+        return (index.h(index.Host, { key: '755cdc190abccb9b0350caf7e4fad05675dd6e0e' }, index.h("section", { key: '927c1e962ce3f918e001965da10bb39b82cab5bc', class: { slot: true, 'is-drop-active': this.dropActive, 'is-empty': meals.length === 0 }, onDragEnter: this.onDragEnter, onDragOver: this.onDragOver, onDragLeave: this.onDragLeave, onDrop: this.onDrop }, index.h("header", { key: '415e9d56f9b190fd291af942c01427cc4b9b66ea', class: "head" }, index.h("h3", { key: 'd0f20de86c70d85da545ec9ec9c57790961b78f0', class: "day" }, this.dayLabel || this.day), index.h("div", { key: '484a1e743a3f251865288f345ead14d87741ff8e', class: "head-right" }, meals.length > 0 && index.h("span", { key: 'ac3324168f0061f4bb173090e21c4b6f2334a168', class: "count" }, meals.length), index.h("button", { key: '5ca123821d1b90cc822bb3036884ce93f8cae19c', type: "button", class: "add", onClick: () => this.rpAddMeal.emit(this.day), "aria-label": `Add a meal to ${this.dayLabel || this.day}` }, index.h("svg", { key: 'e7b09c139cfd3106a83481a1bbb48bf99e82d47c', viewBox: "0 0 24 24", width: "15", height: "15", "aria-hidden": "true" }, index.h("path", { key: '06c62bb2b09a4c0676977411644d15d4217361a8', d: "M12 5v14M5 12h14" }))))), meals.length === 0 ? (index.h("div", { class: "empty" }, index.h("slot", null, index.h("svg", { class: "empty-icon", viewBox: "0 0 24 24", width: "26", height: "26", "aria-hidden": "true" }, index.h("path", { d: "M4 4h16v16H4z", opacity: "0.35" }), index.h("path", { d: "M8 2v4M16 2v4M4 10h16" })), index.h("p", { class: "empty-text" }, "No meals planned")))) : (index.h("ul", { class: "meals" }, meals.map((meal) => (index.h("li", { class: { meal: true, 'is-dragging': this.draggingId === meal.id }, key: meal.id, draggable: true, onDragStart: (event) => this.onDragStart(event, meal), onDragEnd: this.onDragEnd }, index.h("span", { class: "grip", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", width: "12", height: "12" }, index.h("circle", { cx: "9", cy: "6", r: "1.4" }), index.h("circle", { cx: "15", cy: "6", r: "1.4" }), index.h("circle", { cx: "9", cy: "12", r: "1.4" }), index.h("circle", { cx: "15", cy: "12", r: "1.4" }), index.h("circle", { cx: "9", cy: "18", r: "1.4" }), index.h("circle", { cx: "15", cy: "18", r: "1.4" }))), 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 }, labels[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"))))))))));
+            .map((day) => (index.h("option", { key: day, value: day }, labels[day] ?? day))))), index.h("button", { type: "button", class: "remove", onClick: () => this.rpRemoveMeal.emit({ id: meal.id, day: this.day }), "aria-label": `Remove ${meal.title}` }, index.h("svg", { viewBox: "0 0 24 24", width: "13", height: "13", "aria-hidden": "true" }, index.h("path", { d: "M6 6l12 12M18 6L6 18" }))))))))))));
     }
 };
 DaySlot.style = rpDaySlotCss();

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-B6uIqnrk.js');
+var index = require('./index-CrJlwqe_.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 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:6px var(--rp-space-4);font:inherit;font-size:var(--rp-font-size-sm);font-weight:500;color:var(--rp-color-text-body);cursor:pointer;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-pill);transition:color var(--rp-duration-fast) var(--rp-ease),     background-color var(--rp-duration-fast) var(--rp-ease),     border-color var(--rp-duration-fast) var(--rp-ease),     transform var(--rp-duration-fast) var(--rp-ease),     box-shadow var(--rp-duration-fast) var(--rp-ease)}.chip.sc-rp-filter-chips:hover{color:var(--rp-color-text);background:var(--rp-color-surface-sunken);border-color:var(--rp-color-border-strong);transform:translateY(-1px)}.chip.sc-rp-filter-chips:active{transform:translateY(0) scale(0.97)}.chip.is-selected.sc-rp-filter-chips{color:var(--rp-color-accent-contrast);background:var(--rp-color-accent);border-color:var(--rp-color-accent);box-shadow:var(--rp-shadow-sm)}.chip.is-selected.sc-rp-filter-chips:hover{color:var(--rp-color-accent-contrast);background:var(--rp-color-accent-hover);border-color:var(--rp-color-accent-hover)}.chip.sc-rp-filter-chips:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}@media (prefers-reduced-motion: reduce){.chip.sc-rp-filter-chips{transition:none}.chip.sc-rp-filter-chips:hover,.chip.sc-rp-filter-chips:active{transform:none}}`;
 
 const FilterChips = class {
     constructor(hostRef) {
@@ -29,12 +29,12 @@ const FilterChips = class {
         // 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))))));
+        return (index.h(index.Host, { key: 'f695ec8ae5603061f1fcf027257563c416f8fde8' }, index.h("div", { key: '80b59e2aaedd649ec387534da5dd3dc5d9955be5', 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 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-4);font-family:var(--rp-font-serif);font-size:var(--rp-font-size-xl);font-weight:600;letter-spacing:-0.015em}.list.sc-rp-ingredient-list{margin:0;padding:var(--rp-space-2);list-style:none;background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-lg);box-shadow:var(--rp-shadow-xs);overflow:hidden}.row.sc-rp-ingredient-list{display:flex;justify-content:space-between;gap:var(--rp-space-4);padding:var(--rp-space-3);font-size:var(--rp-font-size-md);border-radius:var(--rp-radius-sm);transition:background-color var(--rp-duration-fast) var(--rp-ease)}.row.sc-rp-ingredient-list:hover{background:var(--rp-color-highlight-soft)}.name.sc-rp-ingredient-list{color:var(--rp-color-text-body)}.measure.sc-rp-ingredient-list{flex-shrink:0;font-size:var(--rp-font-size-sm);font-weight:600;color:var(--rp-caramel-600);font-variant-numeric:tabular-nums}.empty.sc-rp-ingredient-list{margin:0;padding:var(--rp-space-5);font-size:var(--rp-font-size-md);color:var(--rp-color-text-muted);text-align:center;background:var(--rp-color-surface-sunken);border:1px dashed var(--rp-color-border-strong);border-radius:var(--rp-radius-lg)}.note.sc-rp-ingredient-list{margin-top:var(--rp-space-3);font-size:var(--rp-font-size-sm);color:var(--rp-color-text-muted);text-align:center}.note.sc-rp-ingredient-list:not(:has(*)){display:none}@media (prefers-reduced-motion: reduce){.row.sc-rp-ingredient-list{transition:none}}`;
 
 const IngredientList = class {
     constructor(hostRef) {
@@ -44,15 +44,15 @@ const IngredientList = class {
     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) => (
+        return (index.h(index.Host, { key: '125fe2f063e9b5a816d815a8541375e424e68be6' }, index.h("section", { key: 'fcde8050442e5b8a49636ff38b9db7e3585b5290', class: "wrap" }, index.h("slot", { key: 'db3a3d738036b8e7292cdd2202b98f665b2b98fd', name: "heading" }, index.h("h2", { key: '256a5cf73cc89b3674b1ff421fa1acbaa4b0bf9a', 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' })))));
+        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: '1885bcef40eb856cb331f0cca95f6b2e5a044f3c', class: "note" }, index.h("slot", { key: '2381d91aeb01f0e67adb12fc417f6964432f5e06' })))));
     }
 };
 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 rpModalCss = () => `.sc-rp-modal-h{display:contents;font-family:var(--rp-font-sans)}.sc-rp-modal-h:not([open]){display:none}.backdrop.sc-rp-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--rp-space-4);background:rgb(44 24 16 / 0.42);backdrop-filter:blur(6px)}.dialog.sc-rp-modal{display:flex;flex-direction:column;width:min(560px, 100%);max-height:min(80vh, 640px);overflow:hidden;color:var(--rp-color-text);background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-xl);box-shadow:var(--rp-shadow-xl)}.head.sc-rp-modal{display:flex;gap:var(--rp-space-3);align-items:center;justify-content:space-between;padding:var(--rp-space-5) var(--rp-space-5) var(--rp-space-4);border-bottom:1px solid var(--rp-color-border)}.heading.sc-rp-modal{margin:0;font-family:var(--rp-font-serif);font-size:var(--rp-font-size-xl);font-weight:600;letter-spacing:-0.015em}.close.sc-rp-modal{display:grid;place-items:center;flex-shrink:0;width:32px;height:32px;padding:0;color:var(--rp-color-text-muted);cursor:pointer;background:none;border:none;border-radius:50%;transition:color var(--rp-duration-fast) var(--rp-ease),     background-color var(--rp-duration-fast) var(--rp-ease),     transform var(--rp-duration-fast) var(--rp-ease)}.close.sc-rp-modal svg.sc-rp-modal{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.close.sc-rp-modal:hover{color:var(--rp-color-text);background:var(--rp-color-surface-sunken);transform:rotate(90deg)}.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-5);font-size:var(--rp-font-size-md);color:var(--rp-color-text-body);overflow-y:auto}.foot.sc-rp-modal{display:flex;gap:var(--rp-space-2);justify-content:flex-end;padding:var(--rp-space-4) var(--rp-space-5) var(--rp-space-5);background:var(--rp-color-surface-sunken);border-top:1px solid var(--rp-color-border)}.foot.sc-rp-modal:not(:has(*)){display:none}@media (prefers-reduced-motion: no-preference){.backdrop.sc-rp-modal{animation:rp-backdrop-in var(--rp-duration) var(--rp-ease)}.dialog.sc-rp-modal{animation:rp-modal-in var(--rp-duration) var(--rp-ease)}@keyframes rp-backdrop-in{from{opacity:0}}@keyframes rp-modal-in{from{opacity:0;transform:translateY(12px) scale(0.97)}}}@media (prefers-reduced-motion: reduce){.close.sc-rp-modal{transition:none}.close.sc-rp-modal:hover{transform:none}}`;
 
 const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 const Modal = class {
@@ -135,7 +135,7 @@ const Modal = class {
     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" }))))));
+        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" }, index.h("svg", { viewBox: "0 0 24 24", width: "15", height: "15", "aria-hidden": "true" }, index.h("path", { d: "M6 6l12 12M18 6L6 18" })))), index.h("div", { class: "body" }, index.h("slot", null)), index.h("footer", { class: "foot" }, index.h("slot", { name: "footer" }))))));
     }
     static get watchers() { return {
         "open": [{
@@ -145,7 +145,7 @@ const Modal = class {
 };
 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 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);transition:transform var(--rp-duration) var(--rp-ease),     box-shadow var(--rp-duration) var(--rp-ease),     border-color var(--rp-duration) var(--rp-ease)}.sc-rp-recipe-card-h:hover .card.sc-rp-recipe-card{border-color:var(--rp-color-border-strong);box-shadow:var(--rp-shadow-lg);transform:translateY(-4px)}.media.sc-rp-recipe-card{position:relative;aspect-ratio:4 / 3;overflow:hidden;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;transition:transform var(--rp-duration-slow) var(--rp-ease),     opacity var(--rp-duration) var(--rp-ease)}.sc-rp-recipe-card-h:hover .media.sc-rp-recipe-card img.sc-rp-recipe-card{transform:scale(1.04)}.media.is-loading.sc-rp-recipe-card img.sc-rp-recipe-card{opacity:0}.media-fallback.sc-rp-recipe-card{width:100%;height:100%;background:radial-gradient(circle at 30% 25%, rgb(255 255 255 / 0.55), transparent 55%),     linear-gradient(135deg, var(--rp-caramel-100), var(--rp-cream-400))}.scrim.sc-rp-recipe-card{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom, rgb(44 24 16 / 0.18) 0%, transparent 34%)}.badges.sc-rp-recipe-card{position:absolute;inset-block-start:var(--rp-space-3);inset-inline-start:var(--rp-space-3);display:flex;flex-wrap:wrap;gap:var(--rp-space-1)}.favorite.sc-rp-recipe-card{position:absolute;inset-block-start:var(--rp-space-3);inset-inline-end:var(--rp-space-3);display:grid;place-items:center;width:36px;height:36px;padding:0;cursor:pointer;background:rgb(255 255 255 / 0.82);backdrop-filter:blur(8px);border:1px solid rgb(255 255 255 / 0.6);border-radius:50%;box-shadow:var(--rp-shadow-sm);transition:transform var(--rp-duration-fast) var(--rp-ease),     background-color var(--rp-duration-fast) var(--rp-ease)}.favorite.sc-rp-recipe-card:hover{background:var(--rp-color-surface);transform:scale(1.08)}.favorite.sc-rp-recipe-card:active{transform:scale(0.94)}.favorite.sc-rp-recipe-card svg.sc-rp-recipe-card{fill:none;stroke:var(--rp-espresso-800);stroke-width:1.9;stroke-linejoin:round;transition:fill var(--rp-duration-fast) var(--rp-ease),     stroke var(--rp-duration-fast) var(--rp-ease)}[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-strong)}[favorite].sc-rp-recipe-card-h .favorite.sc-rp-recipe-card:hover svg.sc-rp-recipe-card{fill:var(--rp-color-favorite-strong)}.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-4) var(--rp-space-4) var(--rp-space-3)}.title.sc-rp-recipe-card{margin:0;font-family:var(--rp-font-serif);font-size:1.0625rem;font-weight:600;line-height:1.28;letter-spacing:-0.01em;color:var(--rp-color-text);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}.meta.sc-rp-recipe-card{display:flex;flex-wrap:wrap;gap:var(--rp-space-1);margin-top:var(--rp-space-3)}.pill.sc-rp-recipe-card{padding:3px 10px;font-size:var(--rp-font-size-xs);font-weight:500;letter-spacing:0.01em;color:var(--rp-color-text-muted);background:var(--rp-color-surface-sunken);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-pill);white-space:nowrap}.pill-category.sc-rp-recipe-card{color:var(--rp-caramel-600);background:var(--rp-color-highlight-soft);border-color:transparent}.actions.sc-rp-recipe-card{display:flex;gap:var(--rp-space-3);align-items:center;padding:0 var(--rp-space-4) var(--rp-space-4)}.actions.sc-rp-recipe-card:not(:has(*)){display:none}@media (prefers-reduced-motion: no-preference){.media.is-loading.sc-rp-recipe-card::after{content:'';position:absolute;inset:0;background:linear-gradient(       100deg,       transparent 20%,       rgb(255 255 255 / 0.7) 50%,       transparent 80%     );background-size:220% 100%;animation:rp-card-shimmer 1.6s var(--rp-ease) infinite}@keyframes rp-card-shimmer{from{background-position:180% 0}to{background-position:-80% 0}}.favorite.is-pulsing.sc-rp-recipe-card{animation:rp-favorite-pop 400ms var(--rp-ease)}@keyframes rp-favorite-pop{0%{transform:scale(1)}35%{transform:scale(0.86)}70%{transform:scale(1.16)}100%{transform:scale(1)}}.favorite.is-pulsing.sc-rp-recipe-card svg.sc-rp-recipe-card{animation:rp-heart-beat 400ms var(--rp-ease);transform-origin:center}@keyframes rp-heart-beat{0%{transform:scale(1)}30%{transform:scale(0.7)}55%{transform:scale(1.35)}75%{transform:scale(0.94)}100%{transform:scale(1)}}}@media (prefers-reduced-motion: reduce){.card.sc-rp-recipe-card,.media.sc-rp-recipe-card img.sc-rp-recipe-card,.favorite.sc-rp-recipe-card{transition:none}.sc-rp-recipe-card-h:hover .card.sc-rp-recipe-card{transform:none}.sc-rp-recipe-card-h:hover .media.sc-rp-recipe-card img.sc-rp-recipe-card{transform:none}.media.is-loading.sc-rp-recipe-card img.sc-rp-recipe-card{opacity:1}}`;
 
 const RecipeCard = class {
     constructor(hostRef) {
@@ -166,28 +166,59 @@ const RecipeCard = class {
     image;
     /** Category label shown under the heading. */
     category;
+    /** Cuisine or region, shown as a second meta pill when present. */
+    area;
+    /** Preparation time in minutes, shown as a meta pill when present. */
+    minutes;
     /** Whether this recipe is currently a favorite. Reflected for CSS hooks. */
     favorite = false;
+    /**
+     * True between the image element being created and its load event.
+     *
+     * Drives the shimmer placeholder behind the image. Tracked in state rather than with a
+     * CSS-only trick because a cached image can complete before this component ever renders,
+     * and the load event would then never fire — `onLoad` plus the `complete` check in
+     * `onImageRef` covers both orderings.
+     */
+    imageLoading = true;
+    /** Set when the image URL fails, so a broken link falls back to the gradient. */
+    imageFailed = false;
+    /** Briefly true after a favorite toggle, driving the press animation. */
+    pulsing = false;
+    pulseTimer;
     /** Fired when the favorite control is activated. */
     rpFavoriteToggle;
+    disconnectedCallback() {
+        clearTimeout(this.pulseTimer);
+    }
     toggleFavorite = () => {
+        this.pulsing = true;
+        clearTimeout(this.pulseTimer);
+        this.pulseTimer = setTimeout(() => (this.pulsing = false), 400);
         // 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 });
     };
+    onImageRef = (element) => {
+        // A browser-cached image is already complete by the time the ref runs, and its load
+        // event fired before the listener was attached.
+        if (element?.complete)
+            this.imageLoading = false;
+    };
     render() {
         // Normalized because a consumer that omits the attribute entirely leaves the prop
         // undefined, and `aria-pressed="undefined"` would be dropped from the DOM, leaving a
         // toggle button with no announced state.
         const isFavorite = this.favorite === true;
-        return (index.h(index.Host, { key: '3b80c8e4ebd4e0e25d5aac0b09f39a458f82b0f2' }, index.h("article", { key: '7df757f7135b928eb0df9c5bf62bda72c6694975', class: "card" }, index.h("div", { key: '46d04f584290c5f894da560c4fc464968b51334c', 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: '8fb20568c256bf52b911d766acb826a78af54738', class: "badges" }, index.h("slot", { key: '7a6ae3d9ea493e89942bf46c414b9b81f9fb287c' })), index.h("button", { key: '252477d86dfb1131b4417e0a3a99810f6b2626a5', type: "button", class: "favorite", onClick: this.toggleFavorite, "aria-pressed": isFavorite ? 'true' : 'false', "aria-label": isFavorite
+        const showImage = this.image && !this.imageFailed;
+        return (index.h(index.Host, { key: '0853c21cb52a51e3b65b3cb056681f9c3976755f' }, index.h("article", { key: 'cb237de486c7300a7767ce3d9ae3a36880db48ec', class: "card" }, index.h("div", { key: '8dae01d89747a1838f56f4ca6e4dbdb33ef5d20e', class: { media: true, 'is-loading': showImage && this.imageLoading } }, showImage ? (index.h("img", { src: this.image, alt: "", loading: "lazy", width: "320", height: "240", ref: this.onImageRef, onLoad: () => (this.imageLoading = false), onError: () => (this.imageFailed = true) })) : (index.h("div", { class: "media-fallback", "aria-hidden": "true" })), index.h("div", { key: '3d147214228cc28f084c290309b80debca6d07da', class: "scrim", "aria-hidden": "true" }), index.h("div", { key: '7855d08ff646493f9e5a18c8e0a72333c4f68712', class: "badges" }, index.h("slot", { key: '3b0ceeedd343856ccc0d2e4e2f64d74ef281e956' })), index.h("button", { key: 'ec3df3f7b5ce63ce3af39b0f084cdad1aab23c87', type: "button", class: { favorite: true, 'is-pulsing': this.pulsing }, onClick: this.toggleFavorite, "aria-pressed": isFavorite ? 'true' : 'false', "aria-label": isFavorite
                 ? `Remove ${this.recipeTitle} from favorites`
-                : `Add ${this.recipeTitle} to favorites` }, index.h("svg", { key: '857ecd2421abd6a5177d0eccbc7f225e019bb4e8', viewBox: "0 0 24 24", width: "20", height: "20", "aria-hidden": "true" }, index.h("path", { key: 'c6f7af10fa1f938ba76c8f5363b5d347eb959f19', 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: 'f09729fe072a150d074b92f3c84f1b337b5e10af', class: "body" }, index.h("h3", { key: '79ce18be5cac3edb6ee23d221eb4eaf61ca910f8', class: "title" }, this.recipeTitle), this.category && index.h("p", { key: '47a0031f26046ea67bc31719fda810f9ccbd48fe', class: "category" }, this.category)), index.h("div", { key: 'cca23a5c5da2e80a58b7714ba53aa55122594b0f', class: "actions" }, index.h("slot", { key: 'cf828d445674da18c9a44545788a5d79685a325a', name: "actions" })))));
+                : `Add ${this.recipeTitle} to favorites` }, index.h("svg", { key: '0b817dc9b6a13e7e6b775b0023e27f3058addadc', viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true" }, index.h("path", { key: '3ae5280802bd9a503ab1d0991da56cdd81289607', 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: '631852cc8f9fd12f3af480fe77c9f9db210fb51e', class: "body" }, index.h("h3", { key: '334bd4822bbe8e81e98dd643b2e18945d5505c6f', class: "title" }, this.recipeTitle), index.h("div", { key: 'b91559eb5881354a9b20167b95a2be9892d4d9fb', class: "meta" }, this.category && index.h("span", { key: 'f993dfb8bf33257ee176773b6e1750bb6d938b5c', class: "pill pill-category" }, this.category), this.area && index.h("span", { key: '4af2e93af6c26e3dba6544d6f629f2b2fc21f78f', class: "pill" }, this.area), this.minutes ? index.h("span", { class: "pill" }, this.minutes, " min") : null)), index.h("div", { key: '3e05bc49f48af8e5112cc912018991ca9f3e8531', class: "actions" }, index.h("slot", { key: '948de8c02c3520b26134b93df0b460c659c3729f', 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 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;padding:5px 5px 5px var(--rp-space-4);background:var(--rp-color-surface);border:1px solid var(--rp-color-border);border-radius:var(--rp-radius-pill);box-shadow:var(--rp-shadow-sm);transition:border-color var(--rp-duration) var(--rp-ease),     box-shadow var(--rp-duration) var(--rp-ease)}.bar.sc-rp-search-bar:hover{border-color:var(--rp-color-border-strong)}.bar.sc-rp-search-bar:focus-within{border-color:var(--rp-color-focus);box-shadow:var(--rp-shadow-sm), var(--rp-focus-halo)}.icon.sc-rp-search-bar{flex-shrink:0;fill:none;stroke:var(--rp-color-text-subtle);stroke-width:2;stroke-linecap:round;transition:stroke var(--rp-duration) var(--rp-ease)}.bar.sc-rp-search-bar:focus-within .icon.sc-rp-search-bar{stroke:var(--rp-color-focus)}.field.sc-rp-search-bar{flex:1;min-width:0;padding:var(--rp-space-2) 0;font:inherit;font-size:var(--rp-font-size-md);color:var(--rp-color-text);background:none;border:none}.field.sc-rp-search-bar::placeholder{color:var(--rp-color-text-subtle)}.field.sc-rp-search-bar:focus{outline:none}.field.sc-rp-search-bar::-webkit-search-cancel-button{display:none}.clear.sc-rp-search-bar{display:grid;place-items:center;width:30px;height:30px;padding:0;color:var(--rp-color-text-subtle);cursor:pointer;background:none;border:none;border-radius:50%;transition:color var(--rp-duration-fast) var(--rp-ease),     background-color var(--rp-duration-fast) var(--rp-ease)}.clear.sc-rp-search-bar svg.sc-rp-search-bar{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}.clear.sc-rp-search-bar:hover{color:var(--rp-color-text);background:var(--rp-color-surface-sunken)}.submit.sc-rp-search-bar{flex-shrink:0;padding:var(--rp-space-2) var(--rp-space-5);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-pill);transition:background-color var(--rp-duration-fast) var(--rp-ease),     transform var(--rp-duration-fast) var(--rp-ease)}.submit.sc-rp-search-bar:hover{background:var(--rp-color-accent-hover)}.submit.sc-rp-search-bar:active{transform:scale(0.97)}.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)}@media (max-width: 480px){.submit.sc-rp-search-bar{padding-inline:var(--rp-space-4)}}@media (prefers-reduced-motion: reduce){.bar.sc-rp-search-bar,.icon.sc-rp-search-bar,.clear.sc-rp-search-bar,.submit.sc-rp-search-bar{transition:none}.submit.sc-rp-search-bar:active{transform:none}}`;
 
 const SearchBar = class {
     constructor(hostRef) {
@@ -229,7 +260,7 @@ const SearchBar = class {
         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"))));
+        return (index.h(index.Host, { key: '958692b102c49ab9636a6cb8c9ae24244255cd45' }, index.h("form", { key: 'b5a9f510d1a7a7e0a3240716d46fad11eb0c274a', class: "bar", role: "search", onSubmit: this.onSubmit }, index.h("svg", { key: 'd0cf5b683a6e09f6353d83092aa268a0ac9d7927', class: "icon", viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true" }, index.h("circle", { key: '5d20b9fffbc1b277476d1a525ecc5030483ba74a', cx: "11", cy: "11", r: "7" }), index.h("path", { key: '2619cf8d6701bb9fa8ad2e6dae48622ff90793c5', d: "m20 20-3.6-3.6" })), index.h("input", { key: '406028370f6179cb24253dda465531f465bd1f6e', type: "search", class: "field", value: this.draft, placeholder: this.placeholder, "aria-label": this.label, onInput: this.onInput }), this.draft && (index.h("button", { key: '5c0c3d9f0cc9635e91d78726f6da1c199bb10dad', type: "button", class: "clear", onClick: this.onClear, "aria-label": "Clear search" }, index.h("svg", { key: '83cdcaadfcca53df2fe73eff82d6bddbe3f81a6c', viewBox: "0 0 24 24", width: "14", height: "14", "aria-hidden": "true" }, index.h("path", { key: '89f434e831ec5410c83322b09cd4c570e941134f', d: "M6 6l12 12M18 6L6 18" })))), index.h("button", { key: '503500b25e4ea596ad33250ef46ce66c67d3e917', type: "submit", class: "submit" }, "Search"))));
     }
     static get watchers() { return {
         "value": [{