@ssingh465/recipe-ui 0.2.0 → 0.2.2

package/dist/components/day-picker.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as s,createEvent as i,h as r,Host as t,transformTag as a}from"@stencil/core/internal/client";import{C as n,a as o}from"./icons.js";const c=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.planassign=i(this,"planassign",7),this.pickerclose=i(this,"pickerclose",7)}recipeId;days;label;planassign;pickerclose;open=!1;activeIndex=0;triggerEl;panelEl;dayEls=[];reposition=()=>this.positionPanel();handleOutsideClick=e=>{const s=e.composedPath();this.triggerEl&&this.panelEl&&(s.includes(this.triggerEl)||s.includes(this.panelEl)||this.closePanel(!1))};disconnectedCallback(){window.removeEventListener("resize",this.reposition),window.removeEventListener("scroll",this.reposition,!0),document.removeEventListener("pointerdown",this.handleOutsideClick,!0)}positionPanel(){if(!this.triggerEl||!this.panelEl)return;const e=this.triggerEl.getBoundingClientRect(),s=window.innerHeight-e.bottom<320?e.top-(this.panelEl.offsetHeight||324)-4:e.bottom+4;this.panelEl.style.left=e.left+"px",this.panelEl.style.top=s+"px"}openPanel=()=>{this.open=!0,this.activeIndex=0,requestAnimationFrame((()=>{this.panelEl?.showPopover?.(),this.positionPanel(),this.dayEls[0]?.focus(),window.addEventListener("resize",this.reposition),window.addEventListener("scroll",this.reposition,!0),document.addEventListener("pointerdown",this.handleOutsideClick,!0)}))};closePanel=e=>{this.open&&(this.open=!1,this.panelEl?.hidePopover?.(),window.removeEventListener("resize",this.reposition),window.removeEventListener("scroll",this.reposition,!0),document.removeEventListener("pointerdown",this.handleOutsideClick,!0),this.pickerclose.emit({}),e&&this.triggerEl?.focus())};selectDay(e){e.occupied||(this.planassign.emit({recipeId:this.recipeId,day:e.day}),this.closePanel(!0))}focusIndex(e){const s=this.days.length;this.activeIndex=(e+s)%s,this.dayEls[this.activeIndex]?.focus()}handlePanelKeydown=e=>{switch(e.key){case"ArrowDown":e.preventDefault(),this.focusIndex(this.activeIndex+1);break;case"ArrowUp":e.preventDefault(),this.focusIndex(this.activeIndex-1);break;case"Home":e.preventDefault(),this.focusIndex(0);break;case"End":e.preventDefault(),this.focusIndex(this.days.length-1);break;case"Tab":e.preventDefault();break;case"Escape":e.preventDefault(),this.closePanel(!0)}};render(){const{days:e,open:s,activeIndex:i}=this;return r(t,{key:"0de4643352b87a11a447f14ab7315a7f4b91039e"},r("button",{key:"d7f9eae4d0b1327978f4b494bb706181db5560d4",type:"button",part:"trigger",class:"trigger",ref:e=>this.triggerEl=e,"aria-haspopup":"true","aria-expanded":s?"true":"false",onClick:()=>this.open?this.closePanel(!0):this.openPanel()},n(),r("span",{key:"de1a521f9b5c7d9a7757d1e1d6fdc461bf258b93"},this.label)),r("div",{key:"61a5539fb3dee4f9b99e749daf2f967f3b95bbb9",part:"panel",class:"panel",popover:"manual",role:"group","aria-label":this.label,ref:e=>this.panelEl=e,onKeyDown:this.handlePanelKeydown},e.map(((e,s)=>r("button",{type:"button",part:"day",class:{day:!0,occupied:e.occupied},tabIndex:s===i?0:-1,"aria-disabled":e.occupied?"true":"false",ref:e=>{e&&(this.dayEls[s]=e)},onClick:()=>this.selectDay(e)},r("span",{class:"day-label"},e.label),e.occupied&&r("span",{class:"occupied-tag"},o(),"Already added"))))))}static get style(){return":host{display:inline-block;font-family:var(--rc-font-text, system-ui, sans-serif)}.trigger{display:inline-flex;align-items:center;gap:var(--rc-s-2, 0.5rem);height:36px;padding-inline:var(--rc-s-3, 0.75rem);min-width:44px;min-height:44px;background:transparent;color:var(--rc-text, #2a2420);border:1px solid var(--rc-border-strong, #d4c8b8);border-radius:var(--rc-radius-sm, 6px);font-size:var(--rc-fs-sm, 0.875rem);cursor:pointer}.trigger:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420)}.panel{position:fixed;width:14rem;margin:0;padding:var(--rc-s-2, 0.5rem);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius-sm, 6px);background:var(--rc-surface, #fff);box-shadow:var(--rc-shadow-hover, 0 8px 24px rgba(0, 0, 0, 0.12));color:var(--rc-text, #2a2420);font-family:var(--rc-font-text, system-ui, sans-serif)}.panel:not(:popover-open){display:none}.day{display:flex;align-items:center;justify-content:space-between;width:100%;height:44px;padding-inline:var(--rc-s-2, 0.5rem);border:none;border-radius:var(--rc-radius-sm, 6px);background:transparent;color:var(--rc-text, #2a2420);font-size:var(--rc-fs-body, 1rem);text-align:start;cursor:pointer}.day:hover,.day:focus-visible{background:var(--rc-accent-subtle, #fbede4)}.day:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420)}.day.occupied{color:var(--rc-text-subtle, #8f8377);cursor:default}.day.occupied:hover{background:transparent}.occupied-tag{display:inline-flex;align-items:center;gap:var(--rc-s-1, 0.25rem);font-size:var(--rc-fs-xs, 0.75rem)}"}},[513,"day-picker",{recipeId:[1,"recipe-id"],days:[16],label:[1],open:[32],activeIndex:[32]}]),d=c,l=function(){"undefined"!=typeof customElements&&["day-picker"].forEach((e=>{"day-picker"===e&&(customElements.get(a(e))||customElements.define(a(e),c))}))};export{d as DayPicker,l as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as s,createEvent as i,h as t,Host as r,transformTag as a}from"@stencil/core/internal/client";import{C as n,a as o}from"./icons.js";const c=e(class extends s{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.planassign=i(this,"planassign",7),this.pickerclose=i(this,"pickerclose",7)}recipeId;days;label;planassign;pickerclose;isOpen=!1;activeIndex=0;async open(){this.openPanel()}triggerEl;panelEl;dayEls=[];reposition=()=>this.positionPanel();handleOutsideClick=e=>{const s=e.composedPath();this.triggerEl&&this.panelEl&&(s.includes(this.triggerEl)||s.includes(this.panelEl)||this.closePanel(!1))};disconnectedCallback(){window.removeEventListener("resize",this.reposition),window.removeEventListener("scroll",this.reposition,!0),document.removeEventListener("pointerdown",this.handleOutsideClick,!0)}positionPanel(){if(!this.triggerEl||!this.panelEl)return;const e=this.triggerEl.getBoundingClientRect(),s=window.innerHeight-e.bottom<320?e.top-(this.panelEl.offsetHeight||324)-4:e.bottom+4;this.panelEl.style.left=e.left+"px",this.panelEl.style.top=s+"px"}openPanel=()=>{this.isOpen=!0,this.activeIndex=0,requestAnimationFrame((()=>{this.panelEl?.showPopover?.(),this.positionPanel(),this.dayEls[0]?.focus(),window.addEventListener("resize",this.reposition),window.addEventListener("scroll",this.reposition,!0),document.addEventListener("pointerdown",this.handleOutsideClick,!0)}))};closePanel=e=>{this.isOpen&&(this.isOpen=!1,this.panelEl?.hidePopover?.(),window.removeEventListener("resize",this.reposition),window.removeEventListener("scroll",this.reposition,!0),document.removeEventListener("pointerdown",this.handleOutsideClick,!0),this.pickerclose.emit({}),e&&this.triggerEl?.focus())};get safeDays(){return Array.isArray(this.days)?this.days:[]}selectDay(e){e.occupied||(this.planassign.emit({recipeId:this.recipeId,day:e.day}),this.closePanel(!0))}focusIndex(e){const s=this.safeDays.length;0!==s&&(this.activeIndex=(e+s)%s,this.dayEls[this.activeIndex]?.focus())}handlePanelKeydown=e=>{switch(e.key){case"ArrowDown":e.preventDefault(),this.focusIndex(this.activeIndex+1);break;case"ArrowUp":e.preventDefault(),this.focusIndex(this.activeIndex-1);break;case"Home":e.preventDefault(),this.focusIndex(0);break;case"End":e.preventDefault(),this.focusIndex(this.safeDays.length-1);break;case"Tab":e.preventDefault();break;case"Escape":e.preventDefault(),this.closePanel(!0)}};render(){const{isOpen:e,activeIndex:s}=this,i=this.safeDays;return t(r,{key:"9c0028bf4d040fe92afc70ba0f11d60d8f3c007c"},t("button",{key:"339f7b550c1107c8e2b4fa4a4f5f7db53b9027f2",type:"button",part:"trigger",class:"trigger",ref:e=>this.triggerEl=e,"aria-haspopup":"true","aria-expanded":e?"true":"false",onClick:()=>this.isOpen?this.closePanel(!0):this.openPanel()},n(),t("span",{key:"777a8b33570cd791b9e325b2bb5642e9aaa67518"},this.label)),t("div",{key:"813813afe66c7082d47fb39ad8aefffc4ccc850c",part:"panel",class:"panel",popover:"manual",role:"group","aria-label":this.label,ref:e=>this.panelEl=e,onKeyDown:this.handlePanelKeydown},i.map(((e,i)=>t("button",{type:"button",part:"day",class:{day:!0,occupied:e.occupied},tabIndex:i===s?0:-1,"aria-disabled":e.occupied?"true":"false",ref:e=>{e&&(this.dayEls[i]=e)},onClick:()=>this.selectDay(e)},t("span",{class:"day-label"},e.label),e.occupied&&t("span",{class:"occupied-tag"},o(),"Already added"))))))}static get style(){return":host{display:inline-block;font-family:var(--rc-font-text, system-ui, sans-serif)}.trigger{display:inline-flex;align-items:center;gap:var(--rc-s-2, 0.5rem);height:36px;padding-inline:var(--rc-s-3, 0.75rem);min-width:44px;min-height:44px;background:transparent;color:var(--rc-text, #2a2420);border:1px solid var(--rc-border-strong, #d4c8b8);border-radius:var(--rc-radius-sm, 6px);font-size:var(--rc-fs-sm, 0.875rem);cursor:pointer}.trigger:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420)}.panel{position:fixed;width:14rem;margin:0;padding:var(--rc-s-2, 0.5rem);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius-sm, 6px);background:var(--rc-surface, #fff);box-shadow:var(--rc-shadow-hover, 0 8px 24px rgba(0, 0, 0, 0.12));color:var(--rc-text, #2a2420);font-family:var(--rc-font-text, system-ui, sans-serif)}.panel:not(:popover-open){display:none}.day{display:flex;align-items:center;justify-content:space-between;width:100%;height:44px;padding-inline:var(--rc-s-2, 0.5rem);border:none;border-radius:var(--rc-radius-sm, 6px);background:transparent;color:var(--rc-text, #2a2420);font-size:var(--rc-fs-body, 1rem);text-align:start;cursor:pointer}.day:hover,.day:focus-visible{background:var(--rc-accent-subtle, #fbede4)}.day:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420)}.day.occupied{color:var(--rc-text-subtle, #8f8377);cursor:default}.day.occupied:hover{background:transparent}.occupied-tag{display:inline-flex;align-items:center;gap:var(--rc-s-1, 0.25rem);font-size:var(--rc-fs-xs, 0.75rem)}"}},[513,"day-picker",{recipeId:[1,"recipe-id"],days:[16],label:[1],isOpen:[32],activeIndex:[32],open:[64]}]),d=c,l=function(){"undefined"!=typeof customElements&&["day-picker"].forEach((e=>{"day-picker"===e&&(customElements.get(a(e))||customElements.define(a(e),c))}))};export{d as DayPicker,l as defineCustomElement}

package/dist/components/planner-day.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as r,createEvent as a,h as t,Host as s,transformTag as n}from"@stencil/core/internal/client";import{A as i,T as o,b as c}from"./icons.js";const d=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.entryremove=a(this,"entryremove",7),this.entrymoverequest=a(this,"entrymoverequest",7),this.daytoggle=a(this,"daytoggle",7)}day;dayLabel;entries=[];collapsed=!1;entryremove;entrymoverequest;daytoggle;handleToggle=()=>{this.daytoggle.emit({day:this.day,collapsed:!this.collapsed})};renderEntry(e){return t("li",{part:"entry",class:"entry",key:e.recipeId},e.thumbnail?t("img",{class:"thumb",src:e.thumbnail,alt:"",loading:"lazy",decoding:"async"}):t("span",{class:"thumb placeholder","aria-hidden":"true"}),t("span",{class:"name"},e.name),t("div",{class:"row-actions"},t("button",{type:"button",class:"icon-button","aria-label":"Move "+e.name,onClick:()=>this.entrymoverequest.emit({recipeId:e.recipeId,fromDay:this.day})},i()),t("button",{type:"button",class:"icon-button","aria-label":`Remove ${e.name} from ${this.dayLabel}`,onClick:()=>this.entryremove.emit({recipeId:e.recipeId,day:this.day})},o())))}render(){const{entries:e,collapsed:r,dayLabel:a}=this;return t(s,{key:"40b0dcd0a2fbcd12bff666cd235641767e5d111b"},t("section",{key:"09a509bd2b860eef48e326c8349b736754a2e3d6",part:"region",class:"region",role:"region","aria-label":a},t("div",{key:"70af75f77cd6fce67bdc4b786fcfc5eef543d430",part:"header",class:"header"},t("h3",{key:"7a606429a2794d846a03b4c67f0bc7debf5fec53",class:"day-name"},a),t("span",{key:"46e78433111505fd6ffced28abf8ce2ae3de1ee5",class:"count"},e.length),t("button",{key:"91da268f8a8920d1214b60c479e52fe161a7b073",type:"button",class:{toggle:!0,"is-collapsed":r},"aria-expanded":r?"false":"true","aria-label":r?"Expand "+a:"Collapse "+a,onClick:this.handleToggle},c())),!r&&(e.length?t("ul",{class:"entries"},e.map((e=>this.renderEntry(e)))):t("div",{class:"empty"},t("slot",{name:"empty"})))))}static get style(){return":host{display:block;font-family:var(--rc-font-text, system-ui, sans-serif)}.region{display:flex;flex-direction:column;height:100%;min-height:20rem;background:var(--rc-surface-sunken, #f6f1e9);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius, 14px);padding:var(--rc-s-4, 1rem);gap:var(--rc-s-3, 0.75rem);color:var(--rc-text, #2a2420)}.header{display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem)}.day-name{margin:0;flex:1;font-family:var(--rc-font-display, Georgia, serif);font-size:var(--rc-fs-h3, 1.25rem)}.count{color:var(--rc-text-muted, #6b5f55);font-size:var(--rc-fs-sm, 0.875rem)}.toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;color:var(--rc-text-muted, #6b5f55);cursor:pointer;transition:transform var(--rc-duration, 180ms) var(--rc-ease, ease)}.toggle.is-collapsed{transform:rotate(-90deg)}.toggle:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.entries{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rc-s-2, 0.5rem)}.entry{display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem);padding:var(--rc-s-2, 0.5rem);background:var(--rc-surface, #fff);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius-sm, 6px)}.thumb{flex:none;width:40px;height:40px;border-radius:var(--rc-radius-sm, 6px);object-fit:cover}.thumb.placeholder{background:var(--rc-border, #e7dfd3)}.name{flex:1;min-width:0;font-size:var(--rc-fs-sm, 0.875rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.row-actions{display:flex;gap:var(--rc-s-1, 0.25rem)}.icon-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;color:var(--rc-text-muted, #6b5f55);cursor:pointer}.icon-button:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--rc-text-subtle, #8f8377);font-size:var(--rc-fs-sm, 0.875rem)}"}},[769,"planner-day",{day:[1],dayLabel:[1,"day-label"],entries:[16],collapsed:[4]}]),l=d,f=function(){"undefined"!=typeof customElements&&["planner-day"].forEach((e=>{"planner-day"===e&&(customElements.get(n(e))||customElements.define(n(e),d))}))};export{l as PlannerDay,f as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as r,createEvent as a,h as t,Host as s,transformTag as n}from"@stencil/core/internal/client";import{A as i,T as o,b as c}from"./icons.js";const d=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.entryremove=a(this,"entryremove",7),this.entrymoverequest=a(this,"entrymoverequest",7),this.daytoggle=a(this,"daytoggle",7),this.recipeselect=a(this,"recipeselect",7)}day;dayLabel;entries=[];collapsed=!1;entryremove;entrymoverequest;daytoggle;recipeselect;handleToggle=()=>{this.daytoggle.emit({day:this.day,collapsed:!this.collapsed})};renderEntry(e){return t("li",{part:"entry",class:"entry",key:e.recipeId},e.thumbnail?t("img",{class:"thumb",src:e.thumbnail,alt:"",loading:"lazy",decoding:"async"}):t("span",{class:"thumb placeholder","aria-hidden":"true"}),t("button",{type:"button",class:"name",onClick:()=>this.recipeselect.emit({recipeId:e.recipeId})},e.name),t("div",{class:"row-actions"},t("button",{type:"button",class:"icon-button","aria-label":"Move "+e.name,onClick:()=>this.entrymoverequest.emit({recipeId:e.recipeId,fromDay:this.day})},i()),t("button",{type:"button",class:"icon-button","aria-label":`Remove ${e.name} from ${this.dayLabel}`,onClick:()=>this.entryremove.emit({recipeId:e.recipeId,day:this.day})},o())))}render(){const{collapsed:e,dayLabel:r}=this,a=Array.isArray(this.entries)?this.entries:[];return t(s,{key:"e6b3560cfbc696ca0c4902cc74bb40cb9c5bf6d5"},t("section",{key:"9b7fdbee72bcc92cd9b621988269133e5d9e287e",part:"region",class:"region",role:"region","aria-label":r},t("div",{key:"a9ce34dd506ece4907bc9bc68e52f3a570ff774d",part:"header",class:"header"},t("h3",{key:"3959df89c98ce8b92893bd0464d9691d085a4fd3",class:"day-name"},r),t("span",{key:"45390ce9f831aeaf049a4656de62ea95eb92173a",class:"count"},a.length),t("button",{key:"91244baaaf01c45374813c77935dddc837b35559",type:"button",class:{toggle:!0,"is-collapsed":e},"aria-expanded":e?"false":"true","aria-label":e?"Expand "+r:"Collapse "+r,onClick:this.handleToggle},c())),!e&&(a.length?t("ul",{class:"entries"},a.map((e=>this.renderEntry(e)))):t("div",{class:"empty"},t("slot",{name:"empty"})))))}static get style(){return":host{display:block;font-family:var(--rc-font-text, system-ui, sans-serif)}.region{display:flex;flex-direction:column;height:100%;min-height:20rem;background:var(--rc-surface-sunken, #f6f1e9);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius, 14px);padding:var(--rc-s-4, 1rem);gap:var(--rc-s-3, 0.75rem);color:var(--rc-text, #2a2420)}.header{display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem)}.day-name{margin:0;flex:1;font-family:var(--rc-font-display, Georgia, serif);font-size:var(--rc-fs-h3, 1.25rem)}.count{color:var(--rc-text-muted, #6b5f55);font-size:var(--rc-fs-sm, 0.875rem)}.toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;color:var(--rc-text-muted, #6b5f55);cursor:pointer;transition:transform var(--rc-duration, 180ms) var(--rc-ease, ease)}.toggle.is-collapsed{transform:rotate(-90deg)}.toggle:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.entries{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--rc-s-2, 0.5rem)}.entry{display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem);padding:var(--rc-s-2, 0.5rem);background:var(--rc-surface, #fff);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius-sm, 6px)}.thumb{flex:none;width:40px;height:40px;border-radius:var(--rc-radius-sm, 6px);object-fit:cover}.thumb.placeholder{background:var(--rc-border, #e7dfd3)}.name{flex:1;min-width:0;font-family:inherit;font-size:var(--rc-fs-sm, 0.875rem);color:inherit;background:transparent;border:none;padding:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;cursor:pointer}.name:hover{text-decoration:underline}.name:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.row-actions{display:flex;gap:var(--rc-s-1, 0.25rem)}.icon-button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;color:var(--rc-text-muted, #6b5f55);cursor:pointer}.icon-button:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--rc-text-subtle, #8f8377);font-size:var(--rc-fs-sm, 0.875rem)}"}},[769,"planner-day",{day:[1],dayLabel:[1,"day-label"],entries:[16],collapsed:[4]}]),l=d,f=function(){"undefined"!=typeof customElements&&["planner-day"].forEach((e=>{"planner-day"===e&&(customElements.get(n(e))||customElements.define(n(e),d))}))};export{l as PlannerDay,f as defineCustomElement}

package/dist/components/recipe-card.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as r,createEvent as a,h as t,Host as i,transformTag as o}from"@stencil/core/internal/client";import{H as s}from"./icons.js";const c=[18,34,96,168,262,344],n=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.favoritetoggle=a(this,"favoritetoggle",7),this.recipeselect=a(this,"recipeselect",7)}recipe;favorited=!1;href;favoritetoggle;recipeselect;handleTitleClick=e=>{0!==e.button||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||(e.preventDefault(),this.recipeselect.emit({recipeId:this.recipe.id}))};handleFavoriteClick=()=>{this.favoritetoggle.emit({recipeId:this.recipe.id})};renderMedia(){const{thumbnail:e,name:r}=this.recipe;if(e)return t("img",{part:"media",class:"media",src:e,alt:"",loading:"lazy",decoding:"async"});const a=function(e){let r=0;for(let a=0;a<e.length;a++)r+=e.charCodeAt(a);return c[r%c.length]}(r);return t("div",{part:"media",class:"media tile",style:{"--tile-h":a+""}},t("span",{class:"tile-name"},r))}render(){const{recipe:e,favorited:r,href:a}=this;return t(i,{key:"d9a95f342122dd2c921f6bf1da454c02944a7525"},t("article",{key:"b82ce26208e24b574a95f69eb908fe19e041f549",part:"card",class:"card"},this.renderMedia(),t("div",{key:"f3257121d759ab1d99b1d1396629a84fcec3f4a8",class:"body"},t("a",{key:"02f435e3970d1739770feb6c35bb28c1fb50e0ed",part:"title",class:"title",href:a,onClick:this.handleTitleClick},e.name),t("p",{key:"9663bf33f969672445900e9fe34d370b1b283a77",class:"meta"},[e.category,e.area].filter(Boolean).join(" · ")),t("div",{key:"9892193b7cdef02242c627d91bb6cc0f7901cbfc",class:"actions-row"},t("button",{key:"cf42e00adfcfe0dbc1b28aa1d4af556a92e8c688",type:"button",class:"favorite","aria-pressed":r?"true":"false","aria-label":r?`Remove ${e.name} from favorites`:`Add ${e.name} to favorites`,onClick:this.handleFavoriteClick},s(r)),t("div",{key:"705afddf9be7cd0206aa7ba610369043ff2af751",part:"actions",class:"actions"},t("slot",{key:"6baeb35747ac54db6123b15d9998b8a8ce86aa1f",name:"actions"}))))))}static get style(){return":host{display:block;height:22rem;font-family:var(--rc-font-text, system-ui, sans-serif)}.card{display:flex;flex-direction:column;height:100%;background:var(--rc-surface, #fff);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius, 14px);box-shadow:var(--rc-shadow, 0 1px 2px rgba(0, 0, 0, 0.06));overflow:hidden;transition:box-shadow var(--rc-duration, 180ms) var(--rc-ease, ease),     border-color var(--rc-duration, 180ms) var(--rc-ease, ease),     transform var(--rc-duration, 180ms) var(--rc-ease, ease)}.card:hover{box-shadow:var(--rc-shadow-hover, 0 2px 8px rgba(0, 0, 0, 0.08));border-color:var(--rc-border-strong, #d4c8b8);transform:translateY(-2px)}.media{height:12rem;flex:none;margin:0}img.media{width:100%;object-fit:cover}.media.tile{display:flex;align-items:center;justify-content:center;padding:var(--rc-s-4, 1rem);text-align:center;background:hsl(var(--tile-h) 42% 88%);color:hsl(var(--tile-h) 45% 28%)}@media (prefers-color-scheme: dark){.media.tile{background:hsl(var(--tile-h) 30% 22%);color:hsl(var(--tile-h) 35% 82%)}}.tile-name{font-family:var(--rc-font-display, Georgia, serif);font-size:var(--rc-fs-h3, 1.25rem);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.body{flex:1;min-height:0;display:flex;flex-direction:column;padding:var(--rc-s-4, 1rem);gap:var(--rc-s-2, 0.5rem)}.title{font-family:var(--rc-font-display, Georgia, serif);font-size:var(--rc-fs-h3, 1.25rem);color:var(--rc-text, #2a2420);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.title:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.meta{margin:0;font-size:var(--rc-fs-sm, 0.875rem);color:var(--rc-text-muted, #6b5f55)}.actions-row{margin-top:auto;display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem)}.favorite{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;color:var(--rc-text-muted, #6b5f55);cursor:pointer;border-radius:var(--rc-radius-sm, 6px)}.favorite[aria-pressed='true']{color:var(--rc-accent, #bc4e1c)}.favorite:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420)}.actions{display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem)}"}},[769,"recipe-card",{recipe:[16],favorited:[4],href:[1]}]),d=n,l=function(){"undefined"!=typeof customElements&&["recipe-card"].forEach((e=>{"recipe-card"===e&&(customElements.get(o(e))||customElements.define(o(e),n))}))};export{d as RecipeCard,l as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as r,createEvent as t,h as a,Host as i,transformTag as o}from"@stencil/core/internal/client";import{H as s}from"./icons.js";const c=[18,34,96,168,262,344],n=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.favoritetoggle=t(this,"favoritetoggle",7),this.recipeselect=t(this,"recipeselect",7)}recipe;favorited=!1;href;favoritetoggle;recipeselect;handleTitleClick=e=>{0!==e.button||e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||(e.preventDefault(),this.recipeselect.emit({recipeId:this.recipe.id}))};handleFavoriteClick=()=>{this.favoritetoggle.emit({recipeId:this.recipe.id})};renderMedia(){const{thumbnail:e,name:r}=this.recipe;if(e)return a("img",{part:"media",class:"media",src:e,alt:"",loading:"lazy",decoding:"async"});const t=function(e){let r=0;for(let t=0;t<e.length;t++)r+=e.charCodeAt(t);return c[r%c.length]}(r);return a("div",{part:"media",class:"media tile",style:{"--tile-h":t+""}},a("span",{class:"tile-name"},r))}render(){const{recipe:e,favorited:r,href:t}=this;return e&&"object"==typeof e?a(i,null,a("article",{part:"card",class:"card"},this.renderMedia(),a("div",{class:"body"},a("a",{part:"title",class:"title",href:t,onClick:this.handleTitleClick},e.name),a("p",{class:"meta"},[e.category,e.area].filter(Boolean).join(" · ")),a("div",{class:"actions-row"},a("button",{type:"button",class:"favorite","aria-pressed":r?"true":"false","aria-label":r?`Remove ${e.name} from favorites`:`Add ${e.name} to favorites`,onClick:this.handleFavoriteClick},s(r)),a("div",{part:"actions",class:"actions"},a("slot",{name:"actions"})))))):a(i,null)}static get style(){return":host{display:block;height:22rem;font-family:var(--rc-font-text, system-ui, sans-serif)}.card{display:flex;flex-direction:column;height:100%;background:var(--rc-surface, #fff);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius, 14px);box-shadow:var(--rc-shadow, 0 1px 2px rgba(0, 0, 0, 0.06));overflow:hidden;transition:box-shadow var(--rc-duration, 180ms) var(--rc-ease, ease),     border-color var(--rc-duration, 180ms) var(--rc-ease, ease),     transform var(--rc-duration, 180ms) var(--rc-ease, ease)}.card:hover{box-shadow:var(--rc-shadow-hover, 0 2px 8px rgba(0, 0, 0, 0.08));border-color:var(--rc-border-strong, #d4c8b8);transform:translateY(-2px)}.media{height:12rem;flex:none;margin:0}img.media{width:100%;object-fit:cover}.media.tile{display:flex;align-items:center;justify-content:center;padding:var(--rc-s-4, 1rem);text-align:center;background:hsl(var(--tile-h) 42% 88%);color:hsl(var(--tile-h) 45% 28%)}@media (prefers-color-scheme: dark){.media.tile{background:hsl(var(--tile-h) 30% 22%);color:hsl(var(--tile-h) 35% 82%)}}.tile-name{font-family:var(--rc-font-display, Georgia, serif);font-size:var(--rc-fs-h3, 1.25rem);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.body{flex:1;min-height:0;display:flex;flex-direction:column;padding:var(--rc-s-4, 1rem);gap:var(--rc-s-2, 0.5rem)}.title{font-family:var(--rc-font-display, Georgia, serif);font-size:var(--rc-fs-h3, 1.25rem);color:var(--rc-text, #2a2420);text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.title:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420);border-radius:var(--rc-radius-sm, 6px)}.meta{margin:0;font-size:var(--rc-fs-sm, 0.875rem);color:var(--rc-text-muted, #6b5f55)}.actions-row{margin-top:auto;display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem)}.favorite{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:none;background:transparent;color:var(--rc-text-muted, #6b5f55);cursor:pointer;border-radius:var(--rc-radius-sm, 6px)}.favorite[aria-pressed='true']{color:var(--rc-accent, #bc4e1c)}.favorite:focus-visible{outline:none;box-shadow:var(--rc-focus-ring, 0 0 0 2px #fff, 0 0 0 4px #2a2420)}.actions{display:flex;align-items:center;gap:var(--rc-s-2, 0.5rem)}"}},[769,"recipe-card",{recipe:[16],favorited:[4],href:[1]}]),l=n,d=function(){"undefined"!=typeof customElements&&["recipe-card"].forEach((e=>{"recipe-card"===e&&(customElements.get(o(e))||customElements.define(o(e),n))}))};export{l as RecipeCard,d as defineCustomElement}

package/dist/components/recipe-grid.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as t,h as r,Host as s,transformTag as c}from"@stencil/core/internal/client";const i=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}columns=4;render(){return r(s,{key:"edcafbec07096f9fa9d0f1f6a8108a78e1038ff6"},r("div",{key:"4b5abbfceb7e20007b5e82c622395ac3efe29c3a",part:"grid",class:"grid",style:{"--columns":this.columns+""}},r("slot",{key:"0864cef351226d2646f8f209385fe846d14ebffb"})))}static get style(){return":host{display:block}.grid{display:grid;grid-template-columns:repeat(var(--columns), 1fr);gap:var(--rc-s-4, 1rem)}"}},[769,"recipe-grid",{columns:[2]}]),n=i,f=function(){"undefined"!=typeof customElements&&["recipe-grid"].forEach((e=>{"recipe-grid"===e&&(customElements.get(c(e))||customElements.define(c(e),i))}))};export{n as RecipeGrid,f as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as t,h as r,Host as s,transformTag as c}from"@stencil/core/internal/client";const d=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}columns=4;render(){return r(s,{key:"b307b429803a61d0163905e8e0752ffd276f0eca"},r("div",{key:"cf95edd18bc679d3aa8be431a12bf8ad87191202",part:"grid",class:"grid",style:{"--columns":this.columns+""}},r("slot",{key:"1e28d0a6e7fb180925e1cdf88dcf1bb5c2b8fef8"})))}static get style(){return":host{display:block}.grid{display:grid;grid-template-columns:repeat(var(--columns), 1fr);gap:var(--rc-s-4, 1rem)}"}},[769,"recipe-grid",{columns:[2]}]),i=d,n=function(){"undefined"!=typeof customElements&&["recipe-grid"].forEach((e=>{"recipe-grid"===e&&(customElements.get(c(e))||customElements.define(c(e),d))}))};export{i as RecipeGrid,n as defineCustomElement}

package/dist/components/skeleton-card.js

@@ -1 +1 @@
-import{proxyCustomElement as e,HTMLElement as r,h as t,Host as n,transformTag as a}from"@stencil/core/internal/client";const i=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}count=1;render(){const e=Array.from({length:Math.max(1,this.count)});return t(n,{key:"9f2fed95fde8f83a187c5b897b66f97d64a3f41e"},e.map(((e,r)=>t("div",{part:"skeleton",class:"skeleton",key:r,"aria-hidden":"true"},t("div",{class:"media"}),t("div",{class:"body"},t("div",{class:"line title"}),t("div",{class:"line meta"}))))))}static get style(){return":host{display:contents}.skeleton{height:22rem;display:flex;flex-direction:column;background:var(--rc-surface, #fff);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius, 14px);overflow:hidden}.media{height:12rem;flex:none;background:var(--rc-surface-sunken, #f6f1e9);position:relative;overflow:hidden}.body{flex:1;padding:var(--rc-s-4, 1rem);display:flex;flex-direction:column;gap:var(--rc-s-2, 0.5rem)}.line{border-radius:var(--rc-radius-sm, 6px);background:var(--rc-surface-sunken, #f6f1e9);position:relative;overflow:hidden}.line.title{height:1.25rem;width:70%}.line.meta{height:0.875rem;width:45%}.media::after,.line::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, transparent, var(--rc-border, #e7dfd3) 50%, transparent);opacity:0.3;animation:shimmer 1.4s infinite}@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@media (prefers-reduced-motion: reduce){.media::after,.line::after{animation:none;transform:none;opacity:0.2}}"}},[513,"skeleton-card",{count:[2]}]),s=i,o=function(){"undefined"!=typeof customElements&&["skeleton-card"].forEach((e=>{"skeleton-card"===e&&(customElements.get(a(e))||customElements.define(a(e),i))}))};export{s as SkeletonCard,o as defineCustomElement}
+import{proxyCustomElement as e,HTMLElement as r,h as t,Host as n,transformTag as a}from"@stencil/core/internal/client";const i=e(class extends r{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow()}count=1;render(){const e=Array.from({length:Math.max(1,this.count)});return t(n,{key:"d072f5e79cacb78baafc69a2e52e070fa5934805"},e.map(((e,r)=>t("div",{part:"skeleton",class:"skeleton",key:r,"aria-hidden":"true"},t("div",{class:"media"}),t("div",{class:"body"},t("div",{class:"line title"}),t("div",{class:"line meta"}))))))}static get style(){return":host{display:contents}.skeleton{height:22rem;display:flex;flex-direction:column;background:var(--rc-surface, #fff);border:1px solid var(--rc-border, #e7dfd3);border-radius:var(--rc-radius, 14px);overflow:hidden}.media{height:12rem;flex:none;background:var(--rc-surface-sunken, #f6f1e9);position:relative;overflow:hidden}.body{flex:1;padding:var(--rc-s-4, 1rem);display:flex;flex-direction:column;gap:var(--rc-s-2, 0.5rem)}.line{border-radius:var(--rc-radius-sm, 6px);background:var(--rc-surface-sunken, #f6f1e9);position:relative;overflow:hidden}.line.title{height:1.25rem;width:70%}.line.meta{height:0.875rem;width:45%}.media::after,.line::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg, transparent, var(--rc-border, #e7dfd3) 50%, transparent);opacity:0.3;animation:shimmer 1.4s infinite}@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}@media (prefers-reduced-motion: reduce){.media::after,.line::after{animation:none;transform:none;opacity:0.2}}"}},[513,"skeleton-card",{count:[2]}]),s=i,o=function(){"undefined"!=typeof customElements&&["skeleton-card"].forEach((e=>{"skeleton-card"===e&&(customElements.get(a(e))||customElements.define(a(e),i))}))};export{s as SkeletonCard,o as defineCustomElement}

package/dist/types/components/day-picker/day-picker.d.ts

@@ -8,6 +8,10 @@ import type { DayOfWeek, DayOption } from '../../utils/types';
  * in the browser's top layer — the one mechanism that reliably escapes a
  * card's `overflow: hidden` and any transformed ancestor's containing
  * block, which plain `position: fixed` inside a shadow tree does not.
+ *
+ * `open()` lets a host open the panel without a user click on the trigger —
+ * needed when the picker is surfaced in response to some other control (the
+ * planner's `Move` action) rather than being the primary affordance on screen.
  */
 export declare class DayPicker {
     recipeId: string;
@@ -18,8 +22,10 @@ export declare class DayPicker {
         day: DayOfWeek;
     }>;
     pickerclose: EventEmitter<Record<string, never>>;
-    open: boolean;
+    isOpen: boolean;
     activeIndex: number;
+    /** Opens the panel programmatically, exactly as a trigger click would. */
+    open(): Promise<void>;
     private triggerEl?;
     private panelEl?;
     private dayEls;
@@ -29,6 +35,7 @@ export declare class DayPicker {
     private positionPanel;
     private openPanel;
     private closePanel;
+    private get safeDays();
     private selectDay;
     private focusIndex;
     private handlePanelKeydown;

package/dist/types/components/planner-day/planner-day.d.ts

@@ -25,6 +25,9 @@ export declare class PlannerDay {
         day: DayOfWeek;
         collapsed: boolean;
     }>;
+    recipeselect: EventEmitter<{
+        recipeId: string;
+    }>;
     private handleToggle;
     private renderEntry;
     render(): any;

package/dist/types/components.d.ts

@@ -17,10 +17,17 @@ export namespace Components {
      * in the browser's top layer — the one mechanism that reliably escapes a
      * card's `overflow: hidden` and any transformed ancestor's containing
      * block, which plain `position: fixed` inside a shadow tree does not.
+     * `open()` lets a host open the panel without a user click on the trigger —
+     * needed when the picker is surfaced in response to some other control (the
+     * planner's `Move` action) rather than being the primary affordance on screen.
      */
     interface DayPicker {
         "days": DayOption[];
         "label": string;
+        /**
+          * Opens the panel programmatically, exactly as a trigger click would.
+         */
+        "open": () => Promise<void>;
         "recipeId": string;
     }
     /**
@@ -138,6 +145,9 @@ declare global {
      * in the browser's top layer — the one mechanism that reliably escapes a
      * card's `overflow: hidden` and any transformed ancestor's containing
      * block, which plain `position: fixed` inside a shadow tree does not.
+     * `open()` lets a host open the panel without a user click on the trigger —
+     * needed when the picker is surfaced in response to some other control (the
+     * planner's `Move` action) rather than being the primary affordance on screen.
      */
     interface HTMLDayPickerElement extends Components.DayPicker, HTMLStencilElement {
         addEventListener<K extends keyof HTMLDayPickerElementEventMap>(type: K, listener: (this: HTMLDayPickerElement, ev: DayPickerCustomEvent<HTMLDayPickerElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -189,6 +199,7 @@ declare global {
         "entryremove": { recipeId: string; day: DayOfWeek };
         "entrymoverequest": { recipeId: string; fromDay: DayOfWeek };
         "daytoggle": { day: DayOfWeek; collapsed: boolean };
+        "recipeselect": { recipeId: string };
     }
     /**
      * One day's column/section in the planner. Owns its complete accessible
@@ -299,6 +310,9 @@ declare namespace LocalJSX {
      * in the browser's top layer — the one mechanism that reliably escapes a
      * card's `overflow: hidden` and any transformed ancestor's containing
      * block, which plain `position: fixed` inside a shadow tree does not.
+     * `open()` lets a host open the panel without a user click on the trigger —
+     * needed when the picker is surfaced in response to some other control (the
+     * planner's `Move` action) rather than being the primary affordance on screen.
      */
     interface DayPicker {
         "days": DayOption[];
@@ -346,6 +360,7 @@ declare namespace LocalJSX {
         "onDaytoggle"?: (event: PlannerDayCustomEvent<{ day: DayOfWeek; collapsed: boolean }>) => void;
         "onEntrymoverequest"?: (event: PlannerDayCustomEvent<{ recipeId: string; fromDay: DayOfWeek }>) => void;
         "onEntryremove"?: (event: PlannerDayCustomEvent<{ recipeId: string; day: DayOfWeek }>) => void;
+        "onRecipeselect"?: (event: PlannerDayCustomEvent<{ recipeId: string }>) => void;
     }
     /**
      * The app's primary discovery/favorites/planner unit. Fixed 22rem height
@@ -450,6 +465,9 @@ declare module "@stencil/core" {
              * in the browser's top layer — the one mechanism that reliably escapes a
              * card's `overflow: hidden` and any transformed ancestor's containing
              * block, which plain `position: fixed` inside a shadow tree does not.
+             * `open()` lets a host open the panel without a user click on the trigger —
+             * needed when the picker is surfaced in response to some other control (the
+             * planner's `Move` action) rather than being the primary affordance on screen.
              */
             "day-picker": LocalJSX.IntrinsicElements["day-picker"] & JSXBase.HTMLAttributes<HTMLDayPickerElement>;
             /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssingh465/recipe-ui",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Stencil web component library for Recipe Finder & Meal Planner",
   "license": "MIT",
   "repository": {