recipe-planner-ui 1.2.0 → 1.3.0

package/dist/cjs/{index-Cul1A0BY.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 {
@@ -1402,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));
       }
@@ -1885,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 */) {
@@ -1914,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$) {
@@ -1963,6 +1994,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$members$ = compactMeta[2];
       }
+      {
+        cmpMeta.$listeners$ = compactMeta[3];
+      }
       {
         cmpMeta.$attrsToReflect$ = [];
       }
@@ -1989,6 +2023,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           }
           if (!this.hasRegisteredEventListeners) {
             this.hasRegisteredEventListeners = true;
+            addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
           }
           if (appLoadFallback) {
             clearTimeout(appLoadFallback);
@@ -2058,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-Cul1A0BY.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],"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]}]]]], 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-Cul1A0BY.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],"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]}]]]], 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,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cul1A0BY.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: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}}`;
 

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Cul1A0BY.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: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}}`;
 
@@ -44,10 +44,10 @@ const IngredientList = class {
     items = [];
     render() {
         const items = Array.isArray(this.items) ? this.items : [];
-        return (index.h(index.Host, { key: '908db0a9d14068fff426be9e86908c67295ef413' }, index.h("section", { key: '28f9022e75e767ba85a2f9fcfaa23f6a14d83576', class: "wrap" }, index.h("slot", { key: '0909fca0976d34c2e5ccbc7c935bc7b1148480ec', name: "heading" }, index.h("h2", { key: '61922c8539936be7bfcbbd27d658ef0085b19c80', 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: 'e394fb29b9484d890dba642c6079e10621550843', class: "note" }, index.h("slot", { key: '92269d3f3158ae3a1f1ea8b86a37d2b1a66da069' })))));
+        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();
@@ -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);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)}.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)}}}@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 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) {
@@ -211,9 +211,9 @@ const RecipeCard = class {
         // toggle button with no announced state.
         const isFavorite = this.favorite === true;
         const showImage = this.image && !this.imageFailed;
-        return (index.h(index.Host, { key: '83f0c244c604277e29c6847a7841e3ddae41b050' }, index.h("article", { key: '7243fc16bee1c4c8ba78feeb658fc8138e9c799d', class: "card" }, index.h("div", { key: '67babe6087e8acaa52379a7749f4ea6001265539', 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: '7f3dd8af818e08c1c8528b2cb474caf7f045651d', class: "scrim", "aria-hidden": "true" }), index.h("div", { key: 'f3e6442a93cefdcbbe20a2e44026370ca6e5f9a6', class: "badges" }, index.h("slot", { key: '18351d8d6f05b507d754fe2760118f51d6ab7a2b' })), index.h("button", { key: 'c574fc6e66243f30c75f0ff618e27025a2c9dfd6', type: "button", class: { favorite: true, 'is-pulsing': this.pulsing }, onClick: this.toggleFavorite, "aria-pressed": isFavorite ? 'true' : 'false', "aria-label": isFavorite
+        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: '54ed86ab35d9afb25b21fe50c036ef7cb3a8d92a', viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true" }, index.h("path", { key: '4550aaf0e5cc38fc650014ae6c9cc5f7b0c4ec40', 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: '20710609101f93f2e3fda399e3c8fc6cab59531b', class: "body" }, index.h("h3", { key: 'dbd67d2f6b1645a90f3b5071dedf7196c57f14b0', class: "title" }, this.recipeTitle), index.h("div", { key: 'a48a0b6c1d60fa24bcb191857d8f04d76906bc78', class: "meta" }, this.category && index.h("span", { key: '6a4c805c85ac8fddb8e316ceca3d99148df78f47', class: "pill pill-category" }, this.category), this.area && index.h("span", { key: '0e69805236fff32521dbd983889f07f6b138b629', class: "pill" }, this.area), this.minutes ? index.h("span", { class: "pill" }, this.minutes, " min") : null)), index.h("div", { key: '362d3f73ec32326cc50e3fdec7977237b9cfd1c8', class: "actions" }, index.h("slot", { key: '6822a6ad44f0414afc97c6b802f0cec276e217d7', 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();
@@ -260,7 +260,7 @@ const SearchBar = class {
         this.rpClear.emit();
     };
     render() {
-        return (index.h(index.Host, { key: '8b9328563d52d5cc0ae412bb5c3d513385705467' }, index.h("form", { key: 'a05c8de20f34fb4411ce22d04685842e38bebb93', class: "bar", role: "search", onSubmit: this.onSubmit }, index.h("svg", { key: '486ce7975b594f929c254b4bcbaf366ff35da2a5', class: "icon", viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true" }, index.h("circle", { key: 'a3f1a9aa7e6b3309ef69273210a19b831ccfcfee', cx: "11", cy: "11", r: "7" }), index.h("path", { key: 'a4ebc02325f3ff0f24dfaca637a54e305be260ba', d: "m20 20-3.6-3.6" })), index.h("input", { key: '62361e4ae2ceaf13156d9feb6e3e8f5021badb86', type: "search", class: "field", value: this.draft, placeholder: this.placeholder, "aria-label": this.label, onInput: this.onInput }), this.draft && (index.h("button", { key: '81f67cb9edbdf6f5040fdabbb1d355b38d51ff9e', type: "button", class: "clear", onClick: this.onClear, "aria-label": "Clear search" }, index.h("svg", { key: 'de3195194e0a32075ba1f2e1e506d3409fd177fb', viewBox: "0 0 24 24", width: "14", height: "14", "aria-hidden": "true" }, index.h("path", { key: '03510f9ce6e1e2d7a27b03f72674819437f6d903', d: "M6 6l12 12M18 6L6 18" })))), index.h("button", { key: '17430f0dc661d72613a7a177488eab949ff561a0', 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": [{

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

@@ -0,0 +1,143 @@
+'use strict';
+
+var index = require('./index-CrJlwqe_.js');
+
+const rpFilterMenuCss = () => `.sc-rp-filter-menu-h{display:inline-block;font-family:var(--rp-font-sans)}.wrap.sc-rp-filter-menu{position:relative;display:inline-flex;align-items:center;gap:var(--rp-space-1)}.trigger.sc-rp-filter-menu{display:inline-flex;gap:var(--rp-space-2);align-items:center;padding:8px var(--rp-space-4);font:inherit;font-size:var(--rp-font-size-sm);font-weight:600;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),     box-shadow var(--rp-duration-fast) var(--rp-ease)}.trigger.sc-rp-filter-menu:hover{color:var(--rp-color-text);border-color:var(--rp-color-border-strong);box-shadow:var(--rp-shadow-sm)}.trigger.is-active.sc-rp-filter-menu{color:var(--rp-color-accent-contrast);background:var(--rp-color-accent);border-color:var(--rp-color-accent);box-shadow:var(--rp-shadow-sm)}[open].sc-rp-filter-menu-h .trigger.sc-rp-filter-menu{border-color:var(--rp-color-focus);box-shadow:var(--rp-focus-halo)}.trigger-value.sc-rp-filter-menu{max-width:12ch;overflow:hidden;font-weight:500;text-overflow:ellipsis;white-space:nowrap;opacity:0.85}.trigger-value.sc-rp-filter-menu::before{content:'· ';opacity:0.6}.chevron.sc-rp-filter-menu{flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--rp-duration-fast) var(--rp-ease)}[open].sc-rp-filter-menu-h .chevron.sc-rp-filter-menu{transform:rotate(180deg)}.clear.sc-rp-filter-menu{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:50%;transition:color var(--rp-duration-fast) var(--rp-ease),     background-color var(--rp-duration-fast) var(--rp-ease)}.clear.sc-rp-filter-menu svg.sc-rp-filter-menu{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}.clear.sc-rp-filter-menu:hover{color:var(--rp-color-danger);background:var(--rp-color-danger-soft)}.tray.sc-rp-filter-menu{position:absolute;inset-block-start:calc(100% + var(--rp-space-2));inset-inline-start:0;z-index:30;display:flex;flex-direction:column;width:max(240px, 100%);max-height:340px;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-lg)}.search.sc-rp-filter-menu{display:flex;gap:var(--rp-space-2);align-items:center;flex-shrink:0;padding:var(--rp-space-3);border-bottom:1px solid var(--rp-color-border)}.search-icon.sc-rp-filter-menu{flex-shrink:0;fill:none;stroke:var(--rp-color-text-subtle);stroke-width:2;stroke-linecap:round}.search-field.sc-rp-filter-menu{flex:1;min-width:0;font:inherit;font-size:var(--rp-font-size-sm);color:var(--rp-color-text);background:none;border:none}.search-field.sc-rp-filter-menu::placeholder{color:var(--rp-color-text-subtle)}.search-field.sc-rp-filter-menu:focus{outline:none}.options.sc-rp-filter-menu{flex:1;padding:var(--rp-space-1);overflow-y:auto;overscroll-behavior:contain}.option.sc-rp-filter-menu{display:flex;gap:var(--rp-space-2);align-items:center;justify-content:space-between;width:100%;padding:8px var(--rp-space-3);font:inherit;font-size:var(--rp-font-size-sm);color:var(--rp-color-text-body);text-align:start;cursor:pointer;background:none;border:none;border-radius:var(--rp-radius-sm)}.option.sc-rp-filter-menu svg.sc-rp-filter-menu{flex-shrink:0;fill:none;stroke:var(--rp-color-highlight);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}.option-text.sc-rp-filter-menu{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option.is-active.sc-rp-filter-menu{color:var(--rp-color-text);background:var(--rp-color-surface-sunken)}.option.is-selected.sc-rp-filter-menu{font-weight:600;color:var(--rp-color-text)}.no-match.sc-rp-filter-menu{margin:0;padding:var(--rp-space-4) var(--rp-space-3);font-size:var(--rp-font-size-sm);color:var(--rp-color-text-subtle);text-align:center}.tray-foot.sc-rp-filter-menu{flex-shrink:0;padding:var(--rp-space-2);border-top:1px solid var(--rp-color-border)}.reset.sc-rp-filter-menu{width:100%;padding:7px;font:inherit;font-size:var(--rp-font-size-sm);font-weight:600;color:var(--rp-color-danger);cursor:pointer;background:none;border:none;border-radius:var(--rp-radius-sm);transition:background-color var(--rp-duration-fast) var(--rp-ease)}.reset.sc-rp-filter-menu:hover{background:var(--rp-color-danger-soft)}.trigger.sc-rp-filter-menu:focus-visible,.clear.sc-rp-filter-menu:focus-visible,.option.sc-rp-filter-menu:focus-visible,.reset.sc-rp-filter-menu:focus-visible,.search-field.sc-rp-filter-menu:focus-visible{outline:var(--rp-focus-ring);outline-offset:var(--rp-focus-offset)}@media (prefers-reduced-motion: no-preference){.tray.sc-rp-filter-menu{animation:rp-tray-in var(--rp-duration-fast) var(--rp-ease);transform-origin:top}@keyframes rp-tray-in{from{opacity:0;transform:translateY(-6px) scale(0.98)}}}@media (prefers-reduced-motion: reduce){.trigger.sc-rp-filter-menu,.chevron.sc-rp-filter-menu,.clear.sc-rp-filter-menu,.reset.sc-rp-filter-menu{transition:none}}`;
+
+const FilterMenu = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.rpFilterChange = index.createEvent(this, "rpFilterChange");
+        this.rpMenuToggle = index.createEvent(this, "rpMenuToggle");
+    }
+    get el() { return index.getElement(this); }
+    /** Text on the trigger, e.g. "Category". */
+    label = 'Filter';
+    /**
+     * Available values. An array has no attribute representation, so this must be assigned
+     * as a DOM property.
+     */
+    options = [];
+    /** Currently active value, or null when no filter is applied. */
+    selected = null;
+    /** Placeholder for the in-tray search field. */
+    searchPlaceholder = 'Search…';
+    /**
+     * Hides the search field. Below roughly a dozen options the field costs more attention
+     * than the scanning it saves.
+     */
+    searchable = true;
+    /** Whether the tray is open. Reflected so a consumer can style the open state. */
+    open = false;
+    filterText = '';
+    /** Index of the option under keyboard focus, or -1 when none is. */
+    activeIndex = -1;
+    /** Fired with the new selection, or null when the filter is cleared. */
+    rpFilterChange;
+    /** Fired when the tray opens or closes, so a consumer can coordinate two menus. */
+    rpMenuToggle;
+    triggerEl;
+    searchEl;
+    onOpenChange(isOpen) {
+        this.rpMenuToggle.emit({ label: this.label, open: isOpen });
+        if (isOpen) {
+            this.filterText = '';
+            this.activeIndex = -1;
+            // The tray renders in the same tick, so focus has to wait for it to exist.
+            requestAnimationFrame(() => {
+                if (this.searchable)
+                    this.searchEl?.focus();
+            });
+        }
+    }
+    /**
+     * Dismisses on a press outside the component.
+     *
+     * Bound to the document rather than to a backdrop element: a backdrop would either
+     * block the page behind it or need to be transparent and full-screen, and both make
+     * two open menus fight over which one is on top.
+     */
+    onDocumentPointerDown(event) {
+        if (!this.open)
+            return;
+        if (!this.el.contains(event.target))
+            this.open = false;
+    }
+    onDocumentKeydown(event) {
+        if (!this.open || event.key !== 'Escape')
+            return;
+        event.preventDefault();
+        this.open = false;
+        this.triggerEl?.focus();
+    }
+    get visibleOptions() {
+        const all = Array.isArray(this.options) ? this.options : [];
+        const term = this.filterText.trim().toLowerCase();
+        return term ? all.filter((option) => option.toLowerCase().includes(term)) : all;
+    }
+    choose = (option) => {
+        this.rpFilterChange.emit(option);
+        this.open = false;
+        this.triggerEl?.focus();
+    };
+    /** Arrow keys move through the list; Enter commits whatever is highlighted. */
+    onTrayKeydown = (event) => {
+        const options = this.visibleOptions;
+        if (options.length === 0)
+            return;
+        if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+            event.preventDefault();
+            const step = event.key === 'ArrowDown' ? 1 : -1;
+            const next = this.activeIndex + step;
+            this.activeIndex = next < 0 ? options.length - 1 : next % options.length;
+            return;
+        }
+        if (event.key === 'Enter' && this.activeIndex >= 0) {
+            event.preventDefault();
+            this.choose(options[this.activeIndex]);
+        }
+    };
+    render() {
+        const options = this.visibleOptions;
+        const hasSelection = Boolean(this.selected);
+        const trayId = `rp-filter-tray-${this.label.replace(/\s+/g, '-').toLowerCase()}`;
+        return (index.h(index.Host, { key: 'b75b5ecc274711c500d7ab6b6da19d62f351cc68' }, index.h("div", { key: '2385440a8c3f8158082072b495e2e222f0c4a1b7', class: "wrap" }, index.h("button", { key: 'e7cc93fd2bfc2405f14ac3182161d28665a6d9c2', type: "button", class: { trigger: true, 'is-active': hasSelection }, ref: (element) => (this.triggerEl = element),
+            /*
+              Toggled on pointerdown, not click. A sibling menu dismisses itself on the
+              document's pointerdown from this same gesture; if this one waited for the
+              click, the two halves of one press would land as two separate updates and
+              whichever ran last would decide the state. Handling both on pointerdown
+              makes one press produce exactly one change.
+            */
+            onPointerDown: (event) => {
+                // Suppressed so the press does not steal focus from the tray's search field
+                // as it mounts; the trigger is focused explicitly instead, which keeps
+                // Escape able to return focus here.
+                event.preventDefault();
+                this.triggerEl?.focus();
+                this.open = !this.open;
+            },
+            /* Enter and Space on a focused button raise click without pointerdown. */
+            onKeyDown: (event) => {
+                if (event.key !== 'Enter' && event.key !== ' ')
+                    return;
+                event.preventDefault();
+                this.open = !this.open;
+            }, "aria-expanded": this.open ? 'true' : 'false', "aria-haspopup": "listbox", "aria-controls": trayId }, index.h("span", { key: '017c4c2f64f82dfd7f4cb9b713fb9fafd9607bc7', class: "trigger-label" }, this.label), hasSelection && index.h("span", { key: '5fc7e3e789297cadb7dc888403b18a4593e1bec3', class: "trigger-value" }, this.selected), index.h("svg", { key: '5ec9e4b2469f0032464b028687d98bea933550ff', class: "chevron", viewBox: "0 0 24 24", width: "13", height: "13", "aria-hidden": "true" }, index.h("path", { key: '317db24d4eb2413f1a45a5027742491125bae86b', d: "m6 9 6 6 6-6" }))), hasSelection && (index.h("button", { key: 'c4334ec227381d5e7bd94217dd46e51f51a009b3', type: "button", class: "clear", onClick: () => this.choose(null), "aria-label": `Clear ${this.label.toLowerCase()} filter` }, index.h("svg", { key: '169798991ca1e0f22431d3d17590ab83225c4c91', viewBox: "0 0 24 24", width: "12", height: "12", "aria-hidden": "true" }, index.h("path", { key: '79799a482f0989f20f1f83604b61014fa2d0b30b', d: "M6 6l12 12M18 6L6 18" })))), this.open && (index.h("div", { key: '1297345512d4a06ff044ba66d1e99c099ee39d5c', class: "tray", id: trayId, role: "listbox", "aria-label": this.label, onKeyDown: this.onTrayKeydown }, this.searchable && (index.h("div", { key: 'd941c5ae2e70ab3779a138d85aebed47110f09c5', class: "search" }, index.h("svg", { key: '5674c55b8f54429acb4c6e71f0449016190d20a5', class: "search-icon", viewBox: "0 0 24 24", width: "14", height: "14", "aria-hidden": "true" }, index.h("circle", { key: '46c1015878ce6d8e86fe1bf12c87ef811ab22516', cx: "11", cy: "11", r: "7" }), index.h("path", { key: '9562775081d6fae4688067c9a55d1bf036cf79fb', d: "m20 20-3.6-3.6" })), index.h("input", { key: '041d84883328d6b3d13574b1751ee809aea68768', type: "text", class: "search-field", ref: (element) => (this.searchEl = element), value: this.filterText, placeholder: this.searchPlaceholder, "aria-label": `Search ${this.label.toLowerCase()} options`, onInput: (event) => {
+                this.filterText = event.target.value;
+                this.activeIndex = -1;
+            } }))), index.h("div", { key: '3d3ee51a876bfc01d25785ce5a4da5a057c51144', class: "options" }, options.length === 0 ? (index.h("p", { class: "no-match" }, "No matches")) : (options.map((option, index$1) => (index.h("button", { key: option, type: "button", role: "option", "aria-selected": this.selected === option ? 'true' : 'false', class: {
+                option: true,
+                'is-selected': this.selected === option,
+                'is-active': this.activeIndex === index$1,
+            }, onClick: () => this.choose(option), onMouseEnter: () => (this.activeIndex = index$1) }, index.h("span", { class: "option-text" }, option), this.selected === option && (index.h("svg", { viewBox: "0 0 24 24", width: "14", height: "14", "aria-hidden": "true" }, index.h("path", { d: "m5 13 4 4L19 7" })))))))), hasSelection && (index.h("div", { key: '9e5de089306361cae946b04d70df76eb9062a482', class: "tray-foot" }, index.h("button", { key: '402c531a240a44a2570217e49ddec556b9d51108', type: "button", class: "reset", onClick: () => this.choose(null) }, "Clear selection"))))))));
+    }
+    static get watchers() { return {
+        "open": [{
+                "onOpenChange": 0
+            }]
+    }; }
+};
+FilterMenu.style = rpFilterMenuCss();
+
+exports.rp_filter_menu = FilterMenu;

package/dist/collection/collection-manifest.json

@@ -2,6 +2,7 @@
   "entries": [
     "components/rp-day-slot/rp-day-slot.js",
     "components/rp-filter-chips/rp-filter-chips.js",
+    "components/rp-filter-menu/rp-filter-menu.js",
     "components/rp-ingredient-list/rp-ingredient-list.js",
     "components/rp-modal/rp-modal.js",
     "components/rp-recipe-card/rp-recipe-card.js",