recipe-planner-ui 1.0.0 → 1.1.0

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["rp-filter-chips_5.cjs",[[514,"rp-filter-chips",{"options":[16],"selected":[1],"label":[1]}],[774,"rp-ingredient-list",{"items":[16]}],[774,"rp-modal",{"open":[516],"heading":[1],"focusFirstField":[64]},null,{"open":[{"onOpenChange":0}]}],[774,"rp-recipe-card",{"recipeId":[1,"recipe-id"],"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[516]}],[514,"rp-search-bar",{"value":[1],"placeholder":[1],"label":[1],"draft":[32]},null,{"value":[{"onValueChange":0}]}]]],["rp-day-slot.cjs",[[774,"rp-day-slot",{"day":[1],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"normalized":[32]}]]]], options);
+  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);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -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],"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],"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);
 });
 
 exports.setNonce = index.setNonce;

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

@@ -19,6 +19,13 @@ const DaySlot = class {
     meals = [];
     /** All day keys, used to populate each meal's move target list. */
     days = [];
+    /**
+     * Display names for the keys in `days`, as a key-to-label map.
+     *
+     * Without this the move control would offer raw keys like "mon". Optional, so a
+     * consumer whose keys are already human-readable can leave it unset.
+     */
+    dayLabels = {};
     normalized = [];
     /** Fired when the user asks to add a meal to this day. */
     rpAddMeal;
@@ -46,10 +53,11 @@ const DaySlot = class {
     };
     render() {
         const days = Array.isArray(this.days) ? this.days : [];
+        const labels = this.dayLabels ?? {};
         const meals = this.normalized;
-        return (index.h(index.Host, { key: '689cfc71ca7fc7106e29278d027ce1c36b3830c0' }, index.h("section", { key: 'd15ed9ae6f800be9962c4c1258397ff1043fef76', class: "slot" }, index.h("header", { key: '7f3ce1dcd4e94af5699b378ab1e461a34792acd8', class: "head" }, index.h("h3", { key: 'b62fe42a27f0072370e59a101452f77de8527ae0', class: "day" }, this.dayLabel || this.day), index.h("button", { key: '658191328f041bc2dd7534a3f5614746f26c0f28', type: "button", class: "add", onClick: () => this.rpAddMeal.emit(this.day), "aria-label": `Add a meal to ${this.dayLabel || this.day}` }, "+")), meals.length === 0 ? (index.h("div", { class: "empty" }, index.h("slot", null, index.h("p", { class: "empty-text" }, "No meals planned")))) : (index.h("ul", { class: "meals" }, meals.map((meal) => (index.h("li", { class: "meal", key: meal.id }, index.h("span", { class: "meal-title" }, meal.title), index.h("div", { class: "meal-actions" }, index.h("label", { class: "move" }, index.h("span", { class: "sr-only" }, `Move ${meal.title} to another day`), index.h("select", { class: "move-select", onChange: (event) => this.onMove(event, meal) }, index.h("option", { value: "" }, "Move\u2026"), days
+        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
             .filter((day) => day !== this.day)
-            .map((day) => (index.h("option", { key: day, value: day }, day))))), index.h("button", { type: "button", class: "remove", onClick: () => this.rpRemoveMeal.emit({ id: meal.id, day: this.day }), "aria-label": `Remove ${meal.title}` }, "\u00D7"))))))))));
+            .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"))))))))));
     }
 };
 DaySlot.style = rpDaySlotCss();

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

@@ -16,6 +16,13 @@ export class DaySlot {
     meals = [];
     /** All day keys, used to populate each meal's move target list. */
     days = [];
+    /**
+     * Display names for the keys in `days`, as a key-to-label map.
+     *
+     * Without this the move control would offer raw keys like "mon". Optional, so a
+     * consumer whose keys are already human-readable can leave it unset.
+     */
+    dayLabels = {};
     normalized = [];
     /** Fired when the user asks to add a meal to this day. */
     rpAddMeal;
@@ -43,10 +50,11 @@ export class DaySlot {
     };
     render() {
         const days = Array.isArray(this.days) ? this.days : [];
+        const labels = this.dayLabels ?? {};
         const meals = this.normalized;
-        return (h(Host, { key: '689cfc71ca7fc7106e29278d027ce1c36b3830c0' }, h("section", { key: 'd15ed9ae6f800be9962c4c1258397ff1043fef76', class: "slot" }, h("header", { key: '7f3ce1dcd4e94af5699b378ab1e461a34792acd8', class: "head" }, h("h3", { key: 'b62fe42a27f0072370e59a101452f77de8527ae0', class: "day" }, this.dayLabel || this.day), h("button", { key: '658191328f041bc2dd7534a3f5614746f26c0f28', type: "button", class: "add", onClick: () => this.rpAddMeal.emit(this.day), "aria-label": `Add a meal to ${this.dayLabel || this.day}` }, "+")), meals.length === 0 ? (h("div", { class: "empty" }, h("slot", null, h("p", { class: "empty-text" }, "No meals planned")))) : (h("ul", { class: "meals" }, meals.map((meal) => (h("li", { class: "meal", key: meal.id }, h("span", { class: "meal-title" }, meal.title), h("div", { class: "meal-actions" }, h("label", { class: "move" }, h("span", { class: "sr-only" }, `Move ${meal.title} to another day`), h("select", { class: "move-select", onChange: (event) => this.onMove(event, meal) }, h("option", { value: "" }, "Move\u2026"), days
+        return (h(Host, { key: '978933e713e714278d4913516ec1c1aca1593513' }, h("section", { key: '7f035218a49d75e8d96f675259d33de09a504334', class: "slot" }, h("header", { key: 'c7d620e25558ca4758f6d67ac3eaf74f1f1f756c', class: "head" }, h("h3", { key: 'b17841e7792ffc8c7179a395d7dc2219781179b5', class: "day" }, this.dayLabel || this.day), 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 ? (h("div", { class: "empty" }, h("slot", null, h("p", { class: "empty-text" }, "No meals planned")))) : (h("ul", { class: "meals" }, meals.map((meal) => (h("li", { class: "meal", key: meal.id }, h("span", { class: "meal-title" }, meal.title), h("div", { class: "meal-actions" }, h("label", { class: "move" }, h("span", { class: "sr-only" }, `Move ${meal.title} to another day`), h("select", { class: "move-select", onChange: (event) => this.onMove(event, meal) }, h("option", { value: "" }, "Move\u2026"), days
             .filter((day) => day !== this.day)
-            .map((day) => (h("option", { key: day, value: day }, day))))), h("button", { type: "button", class: "remove", onClick: () => this.rpRemoveMeal.emit({ id: meal.id, day: this.day }), "aria-label": `Remove ${meal.title}` }, "\u00D7"))))))))));
+            .map((day) => (h("option", { key: day, value: day }, labels[day] ?? day))))), h("button", { type: "button", class: "remove", onClick: () => this.rpRemoveMeal.emit({ id: meal.id, day: this.day }), "aria-label": `Remove ${meal.title}` }, "\u00D7"))))))))));
     }
     static get is() { return "rp-day-slot"; }
     static get encapsulation() { return "scoped"; }
@@ -142,6 +150,29 @@ export class DaySlot {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "[]"
+            },
+            "dayLabels": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, string>",
+                    "resolved": "string",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display names for the keys in `days`, as a key-to-label map.\n\nWithout this the move control would offer raw keys like \"mon\". Optional, so a\nconsumer whose keys are already human-readable can leave it unset."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
             }
         };
     }

package/dist/components/rp-day-slot.js

@@ -1 +1 @@
-import{p as e,t as a,H as s,c as r,h as t,a as o}from"./index.js";const l=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.rpAddMeal=r(this,"rpAddMeal"),this.rpRemoveMeal=r(this,"rpRemoveMeal"),this.rpMoveMeal=r(this,"rpMoveMeal")}day;dayLabel="";meals=[];days=[];normalized=[];rpAddMeal;rpRemoveMeal;rpMoveMeal;componentWillLoad(){this.normalized=Array.isArray(this.meals)?this.meals:[]}componentWillUpdate(){this.normalized=Array.isArray(this.meals)?this.meals:[]}onMove=(e,a)=>{const s=e.target,r=s.value;r&&r!==this.day&&(this.rpMoveMeal.emit({id:a.id,from:this.day,to:r}),s.value="")};render(){const e=Array.isArray(this.days)?this.days:[],a=this.normalized;return t(o,{key:"689cfc71ca7fc7106e29278d027ce1c36b3830c0"},t("section",{key:"d15ed9ae6f800be9962c4c1258397ff1043fef76",class:"slot"},t("header",{key:"7f3ce1dcd4e94af5699b378ab1e461a34792acd8",class:"head"},t("h3",{key:"b62fe42a27f0072370e59a101452f77de8527ae0",class:"day"},this.dayLabel||this.day),t("button",{key:"658191328f041bc2dd7534a3f5614746f26c0f28",type:"button",class:"add",onClick:()=>this.rpAddMeal.emit(this.day),"aria-label":"Add a meal to "+(this.dayLabel||this.day)},"+")),0===a.length?t("div",{class:"empty"},t("slot",null,t("p",{class:"empty-text"},"No meals planned"))):t("ul",{class:"meals"},a.map((a=>t("li",{class:"meal",key:a.id},t("span",{class:"meal-title"},a.title),t("div",{class:"meal-actions"},t("label",{class:"move"},t("span",{class:"sr-only"},`Move ${a.title} to another day`),t("select",{class:"move-select",onChange:e=>this.onMove(e,a)},t("option",{value:""},"Move…"),e.filter((e=>e!==this.day)).map((e=>t("option",{key:e,value:e},e))))),t("button",{type:"button",class:"remove",onClick:()=>this.rpRemoveMeal.emit({id:a.id,day:this.day}),"aria-label":"Remove "+a.title},"×"))))))))}static get style(){return".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}"}},[774,"rp-day-slot",{day:[1],dayLabel:[1,"day-label"],meals:[16],days:[16],normalized:[32]}]);function i(){"undefined"!=typeof customElements&&["rp-day-slot"].forEach((e=>{"rp-day-slot"===e&&(customElements.get(a(e))||customElements.define(a(e),l))}))}i();const c=l,d=i;export{c as RpDaySlot,d as defineCustomElement}
+import{p as e,t as a,H as s,c as r,h as t,a as o}from"./index.js";const l=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.rpAddMeal=r(this,"rpAddMeal"),this.rpRemoveMeal=r(this,"rpRemoveMeal"),this.rpMoveMeal=r(this,"rpMoveMeal")}day;dayLabel="";meals=[];days=[];dayLabels={};normalized=[];rpAddMeal;rpRemoveMeal;rpMoveMeal;componentWillLoad(){this.normalized=Array.isArray(this.meals)?this.meals:[]}componentWillUpdate(){this.normalized=Array.isArray(this.meals)?this.meals:[]}onMove=(e,a)=>{const s=e.target,r=s.value;r&&r!==this.day&&(this.rpMoveMeal.emit({id:a.id,from:this.day,to:r}),s.value="")};render(){const e=Array.isArray(this.days)?this.days:[],a=this.dayLabels??{},s=this.normalized;return t(o,{key:"978933e713e714278d4913516ec1c1aca1593513"},t("section",{key:"7f035218a49d75e8d96f675259d33de09a504334",class:"slot"},t("header",{key:"c7d620e25558ca4758f6d67ac3eaf74f1f1f756c",class:"head"},t("h3",{key:"b17841e7792ffc8c7179a395d7dc2219781179b5",class:"day"},this.dayLabel||this.day),t("button",{key:"f336aac8ff55e5d596c4d99a954218613b6686a2",type:"button",class:"add",onClick:()=>this.rpAddMeal.emit(this.day),"aria-label":"Add a meal to "+(this.dayLabel||this.day)},"+")),0===s.length?t("div",{class:"empty"},t("slot",null,t("p",{class:"empty-text"},"No meals planned"))):t("ul",{class:"meals"},s.map((s=>t("li",{class:"meal",key:s.id},t("span",{class:"meal-title"},s.title),t("div",{class:"meal-actions"},t("label",{class:"move"},t("span",{class:"sr-only"},`Move ${s.title} to another day`),t("select",{class:"move-select",onChange:e=>this.onMove(e,s)},t("option",{value:""},"Move…"),e.filter((e=>e!==this.day)).map((e=>t("option",{key:e,value:e},a[e]??e))))),t("button",{type:"button",class:"remove",onClick:()=>this.rpRemoveMeal.emit({id:s.id,day:this.day}),"aria-label":"Remove "+s.title},"×"))))))))}static get style(){return".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}"}},[774,"rp-day-slot",{day:[1],dayLabel:[1,"day-label"],meals:[16],days:[16],dayLabels:[16],normalized:[32]}]);function i(){"undefined"!=typeof customElements&&["rp-day-slot"].forEach((e=>{"rp-day-slot"===e&&(customElements.get(a(e))||customElements.define(a(e),l))}))}i();const d=l,c=i;export{d as RpDaySlot,c as defineCustomElement}

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["rp-filter-chips_5",[[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",[[774,"rp-day-slot",{"day":[1],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"normalized":[32]}]]]], options);
+  return bootstrapLazy([["rp-filter-chips_5",[[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",[[774,"rp-day-slot",{"day":[1],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"dayLabels":[16],"normalized":[32]}]]]], options);
 };
 
 export { defineCustomElements };

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

@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["rp-filter-chips_5",[[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",[[774,"rp-day-slot",{"day":[1],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"normalized":[32]}]]]], options);
+  return bootstrapLazy([["rp-filter-chips_5",[[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",[[774,"rp-day-slot",{"day":[1],"dayLabel":[1,"day-label"],"meals":[16],"days":[16],"dayLabels":[16],"normalized":[32]}]]]], options);
 });

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

@@ -17,6 +17,13 @@ const DaySlot = class {
     meals = [];
     /** All day keys, used to populate each meal's move target list. */
     days = [];
+    /**
+     * Display names for the keys in `days`, as a key-to-label map.
+     *
+     * Without this the move control would offer raw keys like "mon". Optional, so a
+     * consumer whose keys are already human-readable can leave it unset.
+     */
+    dayLabels = {};
     normalized = [];
     /** Fired when the user asks to add a meal to this day. */
     rpAddMeal;
@@ -44,10 +51,11 @@ const DaySlot = class {
     };
     render() {
         const days = Array.isArray(this.days) ? this.days : [];
+        const labels = this.dayLabels ?? {};
         const meals = this.normalized;
-        return (h(Host, { key: '689cfc71ca7fc7106e29278d027ce1c36b3830c0' }, h("section", { key: 'd15ed9ae6f800be9962c4c1258397ff1043fef76', class: "slot" }, h("header", { key: '7f3ce1dcd4e94af5699b378ab1e461a34792acd8', class: "head" }, h("h3", { key: 'b62fe42a27f0072370e59a101452f77de8527ae0', class: "day" }, this.dayLabel || this.day), h("button", { key: '658191328f041bc2dd7534a3f5614746f26c0f28', type: "button", class: "add", onClick: () => this.rpAddMeal.emit(this.day), "aria-label": `Add a meal to ${this.dayLabel || this.day}` }, "+")), meals.length === 0 ? (h("div", { class: "empty" }, h("slot", null, h("p", { class: "empty-text" }, "No meals planned")))) : (h("ul", { class: "meals" }, meals.map((meal) => (h("li", { class: "meal", key: meal.id }, h("span", { class: "meal-title" }, meal.title), h("div", { class: "meal-actions" }, h("label", { class: "move" }, h("span", { class: "sr-only" }, `Move ${meal.title} to another day`), h("select", { class: "move-select", onChange: (event) => this.onMove(event, meal) }, h("option", { value: "" }, "Move\u2026"), days
+        return (h(Host, { key: '978933e713e714278d4913516ec1c1aca1593513' }, h("section", { key: '7f035218a49d75e8d96f675259d33de09a504334', class: "slot" }, h("header", { key: 'c7d620e25558ca4758f6d67ac3eaf74f1f1f756c', class: "head" }, h("h3", { key: 'b17841e7792ffc8c7179a395d7dc2219781179b5', class: "day" }, this.dayLabel || this.day), 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 ? (h("div", { class: "empty" }, h("slot", null, h("p", { class: "empty-text" }, "No meals planned")))) : (h("ul", { class: "meals" }, meals.map((meal) => (h("li", { class: "meal", key: meal.id }, h("span", { class: "meal-title" }, meal.title), h("div", { class: "meal-actions" }, h("label", { class: "move" }, h("span", { class: "sr-only" }, `Move ${meal.title} to another day`), h("select", { class: "move-select", onChange: (event) => this.onMove(event, meal) }, h("option", { value: "" }, "Move\u2026"), days
             .filter((day) => day !== this.day)
-            .map((day) => (h("option", { key: day, value: day }, day))))), h("button", { type: "button", class: "remove", onClick: () => this.rpRemoveMeal.emit({ id: meal.id, day: this.day }), "aria-label": `Remove ${meal.title}` }, "\u00D7"))))))))));
+            .map((day) => (h("option", { key: day, value: day }, labels[day] ?? day))))), h("button", { type: "button", class: "remove", onClick: () => this.rpRemoveMeal.emit({ id: meal.id, day: this.day }), "aria-label": `Remove ${meal.title}` }, "\u00D7"))))))))));
     }
 };
 DaySlot.style = rpDaySlotCss();

package/dist/recipe-planner-ui/p-0c8f7438.entry.js

@@ -0,0 +1 @@
+import{r as e,c as a,h as r,H as s}from"./p-B4wAFfci.js";const t=class{constructor(r){e(this,r),this.rpAddMeal=a(this,"rpAddMeal"),this.rpRemoveMeal=a(this,"rpRemoveMeal"),this.rpMoveMeal=a(this,"rpMoveMeal")}day;dayLabel="";meals=[];days=[];dayLabels={};normalized=[];rpAddMeal;rpRemoveMeal;rpMoveMeal;componentWillLoad(){this.normalized=Array.isArray(this.meals)?this.meals:[]}componentWillUpdate(){this.normalized=Array.isArray(this.meals)?this.meals:[]}onMove=(e,a)=>{const r=e.target,s=r.value;s&&s!==this.day&&(this.rpMoveMeal.emit({id:a.id,from:this.day,to:s}),r.value="")};render(){const e=Array.isArray(this.days)?this.days:[],a=this.dayLabels??{},t=this.normalized;return r(s,{key:"978933e713e714278d4913516ec1c1aca1593513"},r("section",{key:"7f035218a49d75e8d96f675259d33de09a504334",class:"slot"},r("header",{key:"c7d620e25558ca4758f6d67ac3eaf74f1f1f756c",class:"head"},r("h3",{key:"b17841e7792ffc8c7179a395d7dc2219781179b5",class:"day"},this.dayLabel||this.day),r("button",{key:"f336aac8ff55e5d596c4d99a954218613b6686a2",type:"button",class:"add",onClick:()=>this.rpAddMeal.emit(this.day),"aria-label":`Add a meal to ${this.dayLabel||this.day}`},"+")),0===t.length?r("div",{class:"empty"},r("slot",null,r("p",{class:"empty-text"},"No meals planned"))):r("ul",{class:"meals"},t.map((s=>r("li",{class:"meal",key:s.id},r("span",{class:"meal-title"},s.title),r("div",{class:"meal-actions"},r("label",{class:"move"},r("span",{class:"sr-only"},`Move ${s.title} to another day`),r("select",{class:"move-select",onChange:e=>this.onMove(e,s)},r("option",{value:""},"Move…"),e.filter((e=>e!==this.day)).map((e=>r("option",{key:e,value:e},a[e]??e))))),r("button",{type:"button",class:"remove",onClick:()=>this.rpRemoveMeal.emit({id:s.id,day:this.day}),"aria-label":`Remove ${s.title}`},"×"))))))))}};t.style=".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}";export{t as rp_day_slot}

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

@@ -1 +1 @@
-import{p as e,b as a}from"./p-B4wAFfci.js";export{s as setNonce}from"./p-B4wAFfci.js";import{g as r}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,r={};return""!==a&&(r.resourcesUrl=new URL(".",a).href),e(r)})().then((async e=>(await r(),a([["p-d54dbd37",[[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}]}]]],["p-66ba2983",[[774,"rp-day-slot",{day:[1],dayLabel:[1,"day-label"],meals:[16],days:[16],normalized:[32]}]]]],e))));
+import{p as e,b as a}from"./p-B4wAFfci.js";export{s as setNonce}from"./p-B4wAFfci.js";import{g as r}from"./p-DQuL1Twl.js";(()=>{const a=import.meta.url,r={};return""!==a&&(r.resourcesUrl=new URL(".",a).href),e(r)})().then((async e=>(await r(),a([["p-d54dbd37",[[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}]}]]],["p-0c8f7438",[[774,"rp-day-slot",{day:[1],dayLabel:[1,"day-label"],meals:[16],days:[16],dayLabels:[16],normalized:[32]}]]]],e))));

package/dist/types/components/rp-day-slot/rp-day-slot.d.ts

@@ -20,6 +20,13 @@ export declare class DaySlot {
     meals: PlannedMeal[];
     /** All day keys, used to populate each meal's move target list. */
     days: string[];
+    /**
+     * Display names for the keys in `days`, as a key-to-label map.
+     *
+     * Without this the move control would offer raw keys like "mon". Optional, so a
+     * consumer whose keys are already human-readable can leave it unset.
+     */
+    dayLabels: Record<string, string>;
     private normalized;
     /** Fired when the user asks to add a meal to this day. */
     rpAddMeal: EventEmitter<string>;

package/dist/types/components.d.ts

@@ -23,6 +23,11 @@ export namespace Components {
           * @default ''
          */
         "dayLabel": string;
+        /**
+          * Display names for the keys in `days`, as a key-to-label map.  Without this the move control would offer raw keys like "mon". Optional, so a consumer whose keys are already human-readable can leave it unset.
+          * @default {}
+         */
+        "dayLabels": Record<string, string>;
         /**
           * All day keys, used to populate each meal's move target list.
           * @default []
@@ -312,6 +317,11 @@ declare namespace LocalJSX {
           * @default ''
          */
         "dayLabel"?: string;
+        /**
+          * Display names for the keys in `days`, as a key-to-label map.  Without this the move control would offer raw keys like "mon". Optional, so a consumer whose keys are already human-readable can leave it unset.
+          * @default {}
+         */
+        "dayLabels"?: Record<string, string>;
         /**
           * All day keys, used to populate each meal's move target list.
           * @default []

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "recipe-planner-ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Framework-agnostic web components for recipe discovery and meal planning UIs.",
   "license": "MIT",
   "author": "sahilsoni432",
@@ -28,13 +28,14 @@
     },
     "./dist/recipe-planner-ui/recipe-planner-ui.css": "./dist/recipe-planner-ui/recipe-planner-ui.css",
     "./dist/*": "./dist/*",
+    "./package.json": "./package.json",
     "./components/*.js": {
       "types": "./dist/components/*.d.ts",
-      "import": "./dist/components/*.js"
+      "default": "./dist/components/*.js"
     },
     "./components/*": {
       "types": "./dist/components/*.d.ts",
-      "import": "./dist/components/*.js"
+      "default": "./dist/components/*.js"
     },
     "./loader": {
       "types": "./loader/index.d.ts",

package/readme.md

@@ -67,7 +67,7 @@ exists on the element.
 | `rp-search-bar` | `value`, `placeholder`, `label` | `rpSearch`, `rpClear` | — |
 | `rp-filter-chips` | `options[]`, `selected` | `rpFilterChange` | — |
 | `rp-ingredient-list` | `items[]` | — | `heading`, default |
-| `rp-day-slot` | `day`, `dayLabel`, `meals[]`, `days[]` | `rpAddMeal`, `rpRemoveMeal`, `rpMoveMeal` | default |
+| `rp-day-slot` | `day`, `dayLabel`, `meals[]`, `days[]`, `dayLabels` | `rpAddMeal`, `rpRemoveMeal`, `rpMoveMeal` | default |
 | `rp-modal` | `open`, `heading` | `rpClose` | default, `footer` |
 
 Per-component API documentation, generated from the source, lives in each component's

package/dist/recipe-planner-ui/p-66ba2983.entry.js

@@ -1 +0,0 @@
-import{r as e,c as r,h as a,H as s}from"./p-B4wAFfci.js";const o=class{constructor(a){e(this,a),this.rpAddMeal=r(this,"rpAddMeal"),this.rpRemoveMeal=r(this,"rpRemoveMeal"),this.rpMoveMeal=r(this,"rpMoveMeal")}day;dayLabel="";meals=[];days=[];normalized=[];rpAddMeal;rpRemoveMeal;rpMoveMeal;componentWillLoad(){this.normalized=Array.isArray(this.meals)?this.meals:[]}componentWillUpdate(){this.normalized=Array.isArray(this.meals)?this.meals:[]}onMove=(e,r)=>{const a=e.target,s=a.value;s&&s!==this.day&&(this.rpMoveMeal.emit({id:r.id,from:this.day,to:s}),a.value="")};render(){const e=Array.isArray(this.days)?this.days:[],r=this.normalized;return a(s,{key:"689cfc71ca7fc7106e29278d027ce1c36b3830c0"},a("section",{key:"d15ed9ae6f800be9962c4c1258397ff1043fef76",class:"slot"},a("header",{key:"7f3ce1dcd4e94af5699b378ab1e461a34792acd8",class:"head"},a("h3",{key:"b62fe42a27f0072370e59a101452f77de8527ae0",class:"day"},this.dayLabel||this.day),a("button",{key:"658191328f041bc2dd7534a3f5614746f26c0f28",type:"button",class:"add",onClick:()=>this.rpAddMeal.emit(this.day),"aria-label":`Add a meal to ${this.dayLabel||this.day}`},"+")),0===r.length?a("div",{class:"empty"},a("slot",null,a("p",{class:"empty-text"},"No meals planned"))):a("ul",{class:"meals"},r.map((r=>a("li",{class:"meal",key:r.id},a("span",{class:"meal-title"},r.title),a("div",{class:"meal-actions"},a("label",{class:"move"},a("span",{class:"sr-only"},`Move ${r.title} to another day`),a("select",{class:"move-select",onChange:e=>this.onMove(e,r)},a("option",{value:""},"Move…"),e.filter((e=>e!==this.day)).map((e=>a("option",{key:e,value:e},e))))),a("button",{type:"button",class:"remove",onClick:()=>this.rpRemoveMeal.emit({id:r.id,day:this.day}),"aria-label":`Remove ${r.title}`},"×"))))))))}};o.style=".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}";export{o as rp_day_slot}