@manidecp/nagp-stencil-ui-kit 1.0.0

package/dist/components/meal-slot-card.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["mealSlotCardCss","MealSlotCard","__stencil_proxyCustomElement","HTMLElement","day","mealType","recipeName","removeMeal","addMeal","handleAddMeal","this","emit","handleRemoveMeal","render","h","key","class","type","onClick"],"sources":["src/components/meal-slot-card/meal-slot-card.css?tag=meal-slot-card&encapsulation=shadow","src/components/meal-slot-card/meal-slot-card.tsx"],"sourcesContent":[":host {\r\n  --meal-card-bg: #fff7ed;\r\n  --meal-card-border: #fed7aa;\r\n  --meal-card-text: #111827;\r\n  --meal-card-subtle: #9a5b00;\r\n  --meal-card-accent: #f97316;\r\n  display: block;\r\n}\r\n\r\n.meal-slot-card {\r\n  background: var(--meal-card-bg);\r\n  border: 1px solid var(--meal-card-border);\r\n  border-radius: 18px;\r\n  padding: 1rem;\r\n  max-width: 280px;\r\n  box-shadow: 0 10px 24px rgba(249, 115, 22, 0.08);\r\n}\r\n\r\n.card-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  margin-bottom: 0.75rem;\r\n  color: var(--meal-card-subtle);\r\n}\r\n\r\n.day-label {\r\n  font-weight: 700;\r\n}\r\n\r\n.meal-pill {\r\n  display: inline-flex;\r\n  padding: 0.25rem 0.55rem;\r\n  border-radius: 999px;\r\n  background: rgba(249, 115, 22, 0.12);\r\n  color: var(--meal-card-accent);\r\n  font-size: 0.7rem;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n}\r\n\r\n.content h3 {\r\n  margin: 0 0 0.5rem;\r\n  color: var(--meal-card-text);\r\n  font-size: 1.2rem;\r\n}\r\n\r\n.actions {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  gap: 0.5rem;\r\n  margin-top: 1rem;\r\n}\r\n\r\nbutton {\r\n  border: none;\r\n  border-radius: 10px;\r\n  padding: 0.5rem 0.8rem;\r\n  font-weight: 700;\r\n  cursor: pointer;\r\n}\r\n\r\nbutton.primary {\r\n  background: var(--meal-card-accent);\r\n  color: white;\r\n}\r\n\r\nbutton.secondary {\r\n  background: #fff;\r\n  color: #374151;\r\n  border: 1px solid rgba(15, 23, 42, 0.12);\r\n}\r\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'meal-slot-card',\r\n  styleUrl: 'meal-slot-card.css',\r\n  shadow: true,\r\n})\r\nexport class MealSlotCard {\r\n  @Prop() day: string = 'Monday';\r\n  @Prop() mealType: 'Breakfast' | 'Lunch' | 'Dinner' = 'Dinner';\r\n  @Prop() recipeName: string = 'No meal selected';\r\n\r\n  @Event() removeMeal: EventEmitter<{ day: string; mealType: 'Breakfast' | 'Lunch' | 'Dinner' }>;\r\n  @Event() addMeal: EventEmitter<{ day: string; mealType: 'Breakfast' | 'Lunch' | 'Dinner' }>;\r\n\r\n  private handleAddMeal = () => {\r\n    this.addMeal.emit({ day: this.day, mealType: this.mealType });\r\n  };\r\n\r\n  private handleRemoveMeal = () => {\r\n    this.removeMeal.emit({ day: this.day, mealType: this.mealType });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <article class=\"meal-slot-card\">\r\n        <header class=\"card-header\">\r\n          <span class=\"day-label\">{this.day}</span>\r\n          <span class=\"meal-pill\">{this.mealType}</span>\r\n        </header>\r\n\r\n        <div class=\"content\">\r\n          <h3>{this.recipeName}</h3>\r\n          <slot />\r\n        </div>\r\n\r\n        <div class=\"actions\">\r\n          <button type=\"button\" class=\"primary\" onClick={this.handleAddMeal}>\r\n            Add meal\r\n          </button>\r\n          <button type=\"button\" class=\"secondary\" onClick={this.handleRemoveMeal}>\r\n            Remove\r\n          </button>\r\n        </div>\r\n      </article>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"sDAAA,MAAMA,EAAkB,IAAM,2jC,MCOjBC,EAAYC,EAAA,MAAAD,UAAAE,E,qJACfC,IAAc,SACdC,SAA6C,SAC7CC,WAAqB,mBAEpBC,WACAC,QAEDC,cAAgB,KACtBC,KAAKF,QAAQG,KAAK,CAAEP,IAAKM,KAAKN,IAAKC,SAAUK,KAAKL,UAAW,EAGvDO,iBAAmB,KACzBF,KAAKH,WAAWI,KAAK,CAAEP,IAAKM,KAAKN,IAAKC,SAAUK,KAAKL,UAAW,EAGlE,MAAAQ,GACE,OACEC,EAAA,WAAAC,IAAA,2CAASC,MAAM,kBACbF,EAAA,UAAAC,IAAA,2CAAQC,MAAM,eACZF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,aAAaN,KAAKN,KAC9BU,EAAA,QAAAC,IAAA,2CAAMC,MAAM,aAAaN,KAAKL,WAGhCS,EAAA,OAAAC,IAAA,2CAAKC,MAAM,WACTF,EAAA,MAAAC,IAAA,4CAAKL,KAAKJ,YACVQ,EAAA,QAAAC,IAAA,8CAGFD,EAAA,OAAAC,IAAA,2CAAKC,MAAM,WACTF,EAAA,UAAAC,IAAA,2CAAQE,KAAK,SAASD,MAAM,UAAUE,QAASR,KAAKD,eAAa,YAGjEK,EAAA,UAAAC,IAAA,2CAAQE,KAAK,SAASD,MAAM,YAAYE,QAASR,KAAKE,kBAAgB,W","ignoreList":[]}

package/dist/components/recipe-badge.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RecipeBadge extends Components.RecipeBadge, HTMLElement {}
+export const RecipeBadge: {
+    prototype: RecipeBadge;
+    new (): RecipeBadge;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/recipe-badge.js

@@ -0,0 +1,2 @@
+import{t as e,p as a,H as t,h as r}from"./index.js";const n=()=>`:host{--badge-primary-bg:#f97316;--badge-secondary-bg:#e5e7eb;--badge-accent-bg:#7c3aed;--badge-text:#ffffff;display:inline-block}.badge{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:0.45rem 0.8rem;font-size:0.7rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--badge-text)}.variant-primary{background:var(--badge-primary-bg)}.variant-secondary{background:var(--badge-secondary-bg);color:#111827}.variant-accent{background:var(--badge-accent-bg)}`;const s=a(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow()}label="Featured";variant="primary";color;render(){const e=this.color?{background:this.color}:{};return r("span",{key:"35180a6a6346c97293dc0ddadb0819b7aa1ff9e5",class:{badge:true,[`variant-${this.variant}`]:true},style:e},this.label)}static get style(){return n()}},[513,"recipe-badge",{label:[1],variant:[1],color:[1]}]);function c(){if(typeof customElements==="undefined"){return}const a=["recipe-badge"];a.forEach((a=>{switch(a){case"recipe-badge":if(!customElements.get(e(a))){customElements.define(e(a),s)}break}}))}c();const i=s;const o=c;export{i as RecipeBadge,o as defineCustomElement};
+//# sourceMappingURL=recipe-badge.js.map

package/dist/components/recipe-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["recipeBadgeCss","RecipeBadge","__stencil_proxyCustomElement","HTMLElement","label","variant","color","render","style","this","background","h","key","class","badge"],"sources":["src/components/recipe-badge/recipe-badge.css?tag=recipe-badge&encapsulation=shadow","src/components/recipe-badge/recipe-badge.tsx"],"sourcesContent":[":host {\r\n  --badge-primary-bg: #f97316;\r\n  --badge-secondary-bg: #e5e7eb;\r\n  --badge-accent-bg: #7c3aed;\r\n  --badge-text: #ffffff;\r\n  display: inline-block;\r\n}\r\n\r\n.badge {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 999px;\r\n  padding: 0.45rem 0.8rem;\r\n  font-size: 0.7rem;\r\n  font-weight: 800;\r\n  letter-spacing: 0.06em;\r\n  text-transform: uppercase;\r\n  color: var(--badge-text);\r\n}\r\n\r\n.variant-primary {\r\n  background: var(--badge-primary-bg);\r\n}\r\n\r\n.variant-secondary {\r\n  background: var(--badge-secondary-bg);\r\n  color: #111827;\r\n}\r\n\r\n.variant-accent {\r\n  background: var(--badge-accent-bg);\r\n}\r\n","import { Component, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'recipe-badge',\r\n  styleUrl: 'recipe-badge.css',\r\n  shadow: true,\r\n})\r\nexport class RecipeBadge {\r\n  @Prop() label: string = 'Featured';\r\n  @Prop() variant: 'primary' | 'secondary' | 'accent' = 'primary';\r\n\r\n  // Backward-compatible alias for the original scaffolded API.\r\n  @Prop() color: string;\r\n\r\n  render() {\r\n    const style = this.color ? { background: this.color } : {};\r\n    return (\r\n      <span class={{ badge: true, [`variant-${this.variant}`]: true }} style={style}>\r\n        {this.label}\r\n      </span>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"oDAAA,MAAMA,EAAiB,IAAM,ygB,MCOhBC,EAAWC,EAAA,MAAAD,UAAAE,E,iFACdC,MAAgB,WAChBC,QAA8C,UAG9CC,MAER,MAAAC,GACE,MAAMC,EAAQC,KAAKH,MAAQ,CAAEI,WAAYD,KAAKH,OAAU,GACxD,OACEK,EAAA,QAAAC,IAAA,2CAAMC,MAAO,CAAEC,MAAO,KAAM,CAAC,WAAWL,KAAKJ,WAAY,MAAQG,MAAOA,GACrEC,KAAKL,M","ignoreList":[]}

package/dist/components/recipe-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RecipeCard extends Components.RecipeCard, HTMLElement {}
+export const RecipeCard: {
+    prototype: RecipeCard;
+    new (): RecipeCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/recipe-card.js

@@ -0,0 +1,2 @@
+import{t as e,p as r,H as a,c as i,h as t}from"./index.js";const c=()=>`:host{--recipe-card-bg:#ffffff;--recipe-card-text:#111827;--recipe-card-muted:#6b7280;--recipe-card-accent:#f97316;--recipe-card-border:#e5e7eb;display:block}.recipe-card{background:var(--recipe-card-bg);border:1px solid var(--recipe-card-border);border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(15, 23, 42, 0.08);cursor:pointer;transition:transform 0.2s ease, box-shadow 0.2s ease}.recipe-card:hover{transform:translateY(-2px);box-shadow:0 18px 32px rgba(15, 23, 42, 0.12)}.image-wrap{position:relative;height:180px;background:linear-gradient(135deg, #fff7ed, #ffedd5)}.image-wrap img,.image-placeholder{width:100%;height:100%;display:block;object-fit:cover}.image-placeholder{display:grid;place-items:center;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--recipe-card-accent)}.favorite{position:absolute;top:12px;right:12px;width:2.5rem;height:2.5rem;border:none;border-radius:50%;background:rgba(255, 255, 255, 0.9);color:#9ca3af;font-size:1.2rem;cursor:pointer}.favorite.active{background:rgba(249, 115, 22, 0.12);color:var(--recipe-card-accent)}.card-content{padding:1rem}.meta-row{display:flex;justify-content:flex-end;margin-bottom:0.5rem}.prep-time{font-size:0.75rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--recipe-card-accent)}h2{margin:0 0 0.75rem;font-size:1.25rem;color:var(--recipe-card-text)}.actions-row{display:flex;justify-content:flex-end;align-items:center;gap:0.5rem}`;const s=r(class e extends a{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.cardClick=i(this,"cardClick");this.favoriteToggle=i(this,"favoriteToggle")}recipeId="recipe-1";recipeTitle="Spicy Pasta";imageUrl="";prepTime=30;isFavorite=false;favoriteState=false;cardClick;favoriteToggle;componentWillLoad(){this.favoriteState=this.isFavorite}handleFavoritePropChange(e){this.favoriteState=e}async toggleFavorite(){this.favoriteState=!this.favoriteState;this.favoriteToggle.emit({recipeId:this.recipeId,recipeTitle:this.recipeTitle,isFavorite:this.favoriteState})}handleCardClick=()=>{this.cardClick.emit({recipeId:this.recipeId,recipeTitle:this.recipeTitle})};handleFavoriteClick=e=>{e.stopPropagation();this.toggleFavorite()};render(){return t("article",{key:"ea8d57192146e0c875ba9c357ea5e65ddf4e2c5e",class:"recipe-card",onClick:this.handleCardClick},t("div",{key:"f6dfc3b4481988fd07d23cd0548f1cb1984942f5",class:"image-wrap"},this.imageUrl?t("img",{src:this.imageUrl,alt:this.recipeTitle}):t("div",{class:"image-placeholder"},"Recipe"),t("button",{key:"f024d1784c817c7bb2ad937444365be8d192d4f8",type:"button",class:{favorite:true,active:this.favoriteState},"aria-label":this.favoriteState?"Remove favorite":"Add favorite",onClick:this.handleFavoriteClick},this.favoriteState?"♥":"♡")),t("div",{key:"e44fb2e9d90c8ef20d05a1f1baabc7d1e1b7a070",class:"card-content"},t("div",{key:"e34a861b6f82d9368d400d0115a329bf3a9b91f4",class:"meta-row"},t("span",{key:"925e5a0682f4923d51c28b07348b403ddac19065",class:"prep-time"},this.prepTime," min")),t("h2",{key:"7a576e9ed4af7fa83a5e34400ad2a0cfb32f7a1c"},this.recipeTitle),t("div",{key:"d4f3a287d889da78d1a785183aa43c53f9546c36",class:"actions-row"},t("slot",{key:"aeb6163d6243fbc55cf98f5fd7c3fbbf59a1a6e9",name:"actions"}))))}static get watchers(){return{isFavorite:[{handleFavoritePropChange:0}]}}static get style(){return c()}},[769,"recipe-card",{recipeId:[1,"recipe-id"],recipeTitle:[1,"recipe-title"],imageUrl:[1,"image-url"],prepTime:[2,"prep-time"],isFavorite:[4,"is-favorite"],favoriteState:[32],toggleFavorite:[64]},undefined,{isFavorite:[{handleFavoritePropChange:0}]}]);function o(){if(typeof customElements==="undefined"){return}const r=["recipe-card"];r.forEach((r=>{switch(r){case"recipe-card":if(!customElements.get(e(r))){customElements.define(e(r),s)}break}}))}o();const d=s;const n=o;export{d as RecipeCard,n as defineCustomElement};
+//# sourceMappingURL=recipe-card.js.map

package/dist/components/recipe-card.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["recipeCardCss","RecipeCard","__stencil_proxyCustomElement","HTMLElement","recipeId","recipeTitle","imageUrl","prepTime","isFavorite","favoriteState","cardClick","favoriteToggle","componentWillLoad","this","handleFavoritePropChange","newValue","toggleFavorite","emit","handleCardClick","handleFavoriteClick","event","stopPropagation","render","h","key","class","onClick","src","alt","type","favorite","active","name"],"sources":["src/components/recipe-card/recipe-card.css?tag=recipe-card&encapsulation=shadow","src/components/recipe-card/recipe-card.tsx"],"sourcesContent":[":host {\r\n  --recipe-card-bg: #ffffff;\r\n  --recipe-card-text: #111827;\r\n  --recipe-card-muted: #6b7280;\r\n  --recipe-card-accent: #f97316;\r\n  --recipe-card-border: #e5e7eb;\r\n  display: block;\r\n}\r\n\r\n.recipe-card {\r\n  background: var(--recipe-card-bg);\r\n  border: 1px solid var(--recipe-card-border);\r\n  border-radius: 18px;\r\n  overflow: hidden;\r\n  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);\r\n  cursor: pointer;\r\n  transition: transform 0.2s ease, box-shadow 0.2s ease;\r\n}\r\n\r\n.recipe-card:hover {\r\n  transform: translateY(-2px);\r\n  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.12);\r\n}\r\n\r\n.image-wrap {\r\n  position: relative;\r\n  height: 180px;\r\n  background: linear-gradient(135deg, #fff7ed, #ffedd5);\r\n}\r\n\r\n.image-wrap img,\r\n.image-placeholder {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n  object-fit: cover;\r\n}\r\n\r\n.image-placeholder {\r\n  display: grid;\r\n  place-items: center;\r\n  font-weight: 700;\r\n  letter-spacing: 0.08em;\r\n  text-transform: uppercase;\r\n  color: var(--recipe-card-accent);\r\n}\r\n\r\n.favorite {\r\n  position: absolute;\r\n  top: 12px;\r\n  right: 12px;\r\n  width: 2.5rem;\r\n  height: 2.5rem;\r\n  border: none;\r\n  border-radius: 50%;\r\n  background: rgba(255, 255, 255, 0.9);\r\n  color: #9ca3af;\r\n  font-size: 1.2rem;\r\n  cursor: pointer;\r\n}\r\n\r\n.favorite.active {\r\n  background: rgba(249, 115, 22, 0.12);\r\n  color: var(--recipe-card-accent);\r\n}\r\n\r\n.card-content {\r\n  padding: 1rem;\r\n}\r\n\r\n.meta-row {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  margin-bottom: 0.5rem;\r\n}\r\n\r\n.prep-time {\r\n  font-size: 0.75rem;\r\n  font-weight: 700;\r\n  letter-spacing: 0.04em;\r\n  text-transform: uppercase;\r\n  color: var(--recipe-card-accent);\r\n}\r\n\r\nh2 {\r\n  margin: 0 0 0.75rem;\r\n  font-size: 1.25rem;\r\n  color: var(--recipe-card-text);\r\n}\r\n\r\n.actions-row {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n}\r\n","import { Component, h, Prop, State, Event, EventEmitter, Method, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'recipe-card',\r\n  styleUrl: 'recipe-card.css',\r\n  shadow: true,\r\n})\r\nexport class RecipeCard {\r\n  @Prop() recipeId: string = 'recipe-1';\r\n  @Prop() recipeTitle: string = 'Spicy Pasta';\r\n  @Prop() imageUrl: string = '';\r\n  @Prop() prepTime: number = 30;\r\n  @Prop() isFavorite: boolean = false;\r\n\r\n  @State() favoriteState: boolean = false;\r\n\r\n  @Event() cardClick: EventEmitter<{ recipeId: string; recipeTitle: string }>;\r\n  @Event() favoriteToggle: EventEmitter<{ recipeId: string; recipeTitle: string; isFavorite: boolean }>;\r\n\r\n  componentWillLoad() {\r\n    this.favoriteState = this.isFavorite;\r\n  }\r\n\r\n  @Watch('isFavorite')\r\n  handleFavoritePropChange(newValue: boolean) {\r\n    this.favoriteState = newValue;\r\n  }\r\n\r\n  @Method()\r\n  async toggleFavorite() {\r\n    this.favoriteState = !this.favoriteState;\r\n    this.favoriteToggle.emit({\r\n      recipeId: this.recipeId,\r\n      recipeTitle: this.recipeTitle,\r\n      isFavorite: this.favoriteState,\r\n    });\r\n  }\r\n\r\n  private handleCardClick = () => {\r\n    this.cardClick.emit({\r\n      recipeId: this.recipeId,\r\n      recipeTitle: this.recipeTitle,\r\n    });\r\n  };\r\n\r\n  private handleFavoriteClick = (event: Event) => {\r\n    event.stopPropagation();\r\n    this.toggleFavorite();\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <article class=\"recipe-card\" onClick={this.handleCardClick}>\r\n        <div class=\"image-wrap\">\r\n          {this.imageUrl ? (\r\n            <img src={this.imageUrl} alt={this.recipeTitle} />\r\n          ) : (\r\n            <div class=\"image-placeholder\">Recipe</div>\r\n          )}\r\n          <button\r\n            type=\"button\"\r\n            class={{ favorite: true, active: this.favoriteState }}\r\n            aria-label={this.favoriteState ? 'Remove favorite' : 'Add favorite'}\r\n            onClick={this.handleFavoriteClick}\r\n          >\r\n            {this.favoriteState ? '♥' : '♡'}\r\n          </button>\r\n        </div>\r\n\r\n        <div class=\"card-content\">\r\n          <div class=\"meta-row\">\r\n            <span class=\"prep-time\">{this.prepTime} min</span>\r\n          </div>\r\n          <h2>{this.recipeTitle}</h2>\r\n          <div class=\"actions-row\">\r\n            <slot name=\"actions\" />\r\n          </div>\r\n        </div>\r\n      </article>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"2DAAA,MAAMA,EAAgB,IAAM,y7C,MCOfC,EAAUC,EAAA,MAAAD,UAAAE,E,iKACbC,SAAmB,WACnBC,YAAsB,cACtBC,SAAmB,GACnBC,SAAmB,GACnBC,WAAsB,MAErBC,cAAyB,MAEzBC,UACAC,eAET,iBAAAC,GACEC,KAAKJ,cAAgBI,KAAKL,U,CAI5B,wBAAAM,CAAyBC,GACvBF,KAAKJ,cAAgBM,C,CAIvB,oBAAMC,GACJH,KAAKJ,eAAiBI,KAAKJ,cAC3BI,KAAKF,eAAeM,KAAK,CACvBb,SAAUS,KAAKT,SACfC,YAAaQ,KAAKR,YAClBG,WAAYK,KAAKJ,e,CAIbS,gBAAkB,KACxBL,KAAKH,UAAUO,KAAK,CAClBb,SAAUS,KAAKT,SACfC,YAAaQ,KAAKR,aAClB,EAGIc,oBAAuBC,IAC7BA,EAAMC,kBACNR,KAAKG,gBAAgB,EAGvB,MAAAM,GACE,OACEC,EAAA,WAAAC,IAAA,2CAASC,MAAM,cAAcC,QAASb,KAAKK,iBACzCK,EAAA,OAAAC,IAAA,2CAAKC,MAAM,cACRZ,KAAKP,SACJiB,EAAA,OAAKI,IAAKd,KAAKP,SAAUsB,IAAKf,KAAKR,cAEnCkB,EAAA,OAAKE,MAAM,qBAAmB,UAEhCF,EAAA,UAAAC,IAAA,2CACEK,KAAK,SACLJ,MAAO,CAAEK,SAAU,KAAMC,OAAQlB,KAAKJ,eAAe,aACzCI,KAAKJ,cAAgB,kBAAoB,eACrDiB,QAASb,KAAKM,qBAEbN,KAAKJ,cAAgB,IAAM,MAIhCc,EAAA,OAAAC,IAAA,2CAAKC,MAAM,gBACTF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,YACTF,EAAA,QAAAC,IAAA,2CAAMC,MAAM,aAAaZ,KAAKN,SAAQ,SAExCgB,EAAA,MAAAC,IAAA,4CAAKX,KAAKR,aACVkB,EAAA,OAAAC,IAAA,2CAAKC,MAAM,eACTF,EAAA,QAAAC,IAAA,2CAAMQ,KAAK,c","ignoreList":[]}

package/dist/components/recipe-rating.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface RecipeRating extends Components.RecipeRating, HTMLElement {}
+export const RecipeRating: {
+    prototype: RecipeRating;
+    new (): RecipeRating;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/recipe-rating.js

@@ -0,0 +1,2 @@
+import{t as e,p as t,H as r,c as i,h as n}from"./index.js";const s=()=>`:host{--rating-filled:#fbbf24;--rating-empty:#d1d5db;display:inline-block}.rating{display:inline-flex;align-items:center;gap:0.15rem;font-size:1.2rem;line-height:1}.star{border:none;background:transparent;padding:0;margin:0;cursor:default;color:var(--rating-empty);user-select:none;font-size:inherit}.interactive .star{cursor:pointer}.star.filled{color:var(--rating-filled)}button.star{cursor:pointer}`;const a=t(class e extends r{constructor(e){super();if(e!==false){this.__registerHost()}this.__attachShadow();this.ratingChange=i(this,"ratingChange")}score=4;maxScore=5;interactive=false;value;max;currentScore=0;ratingChange;get effectiveScore(){return this.score??this.value??4}get effectiveMaxScore(){return this.maxScore??this.max??5}componentWillLoad(){this.currentScore=this.effectiveScore}handleScoreChange(e){this.currentScore=e}handleStarClick=e=>{if(!this.interactive){return}this.currentScore=e;this.ratingChange.emit(e)};render(){const e=this.effectiveMaxScore;const t=Array.from({length:e},((t,r)=>{const i=r+1;const s=i<=this.currentScore;if(this.interactive){return n("button",{type:"button",class:{star:true,filled:s},onClick:()=>this.handleStarClick(i),"aria-label":`Rate ${i} out of ${e}`,"aria-pressed":s},s?"★":"☆")}return n("span",{class:{star:true,filled:s},"aria-hidden":"true"},s?"★":"☆")}));return n("div",{class:"rating","aria-label":`Rated ${this.currentScore} out of ${e}`,role:"img"},t)}static get watchers(){return{score:[{handleScoreChange:0}]}}static get style(){return s()}},[513,"recipe-rating",{score:[2],maxScore:[2,"max-score"],interactive:[4],value:[2],max:[2],currentScore:[32]},undefined,{score:[{handleScoreChange:0}]}]);function o(){if(typeof customElements==="undefined"){return}const t=["recipe-rating"];t.forEach((t=>{switch(t){case"recipe-rating":if(!customElements.get(e(t))){customElements.define(e(t),a)}break}}))}o();const c=a;const l=o;export{c as RecipeRating,l as defineCustomElement};
+//# sourceMappingURL=recipe-rating.js.map

package/dist/components/recipe-rating.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["recipeRatingCss","RecipeRating","__stencil_proxyCustomElement","HTMLElement","score","maxScore","interactive","value","max","currentScore","ratingChange","effectiveScore","this","effectiveMaxScore","componentWillLoad","handleScoreChange","newValue","handleStarClick","emit","render","stars","Array","from","length","_","index","filled","h","type","class","star","onClick","role"],"sources":["src/components/recipe-rating/recipe-rating.css?tag=recipe-rating&encapsulation=shadow","src/components/recipe-rating/recipe-rating.tsx"],"sourcesContent":[":host {\r\n  --rating-filled: #fbbf24;\r\n  --rating-empty: #d1d5db;\r\n  display: inline-block;\r\n}\r\n\r\n.rating {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.15rem;\r\n  font-size: 1.2rem;\r\n  line-height: 1;\r\n}\r\n\r\n.star {\r\n  border: none;\r\n  background: transparent;\r\n  padding: 0;\r\n  margin: 0;\r\n  cursor: default;\r\n  color: var(--rating-empty);\r\n  user-select: none;\r\n  font-size: inherit;\r\n}\r\n\r\n.interactive .star {\r\n  cursor: pointer;\r\n}\r\n\r\n.star.filled {\r\n  color: var(--rating-filled);\r\n}\r\n\r\nbutton.star {\r\n  cursor: pointer;\r\n}\r\n","import { Component, h, Prop, State, Event, EventEmitter, Watch } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'recipe-rating',\r\n  styleUrl: 'recipe-rating.css',\r\n  shadow: true,\r\n})\r\nexport class RecipeRating {\r\n  @Prop() score: number = 4;\r\n  @Prop() maxScore: number = 5;\r\n  @Prop() interactive: boolean = false;\r\n\r\n  // Backward-compatible aliases for the original scaffolded API.\r\n  @Prop() value: number;\r\n  @Prop() max: number;\r\n\r\n  @State() currentScore: number = 0;\r\n\r\n  @Event() ratingChange: EventEmitter<number>;\r\n\r\n  private get effectiveScore(): number {\r\n    return this.score ?? this.value ?? 4;\r\n  }\r\n\r\n  private get effectiveMaxScore(): number {\r\n    return this.maxScore ?? this.max ?? 5;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.currentScore = this.effectiveScore;\r\n  }\r\n\r\n  @Watch('score')\r\n  handleScoreChange(newValue: number) {\r\n    this.currentScore = newValue;\r\n  }\r\n\r\n  private handleStarClick = (value: number) => {\r\n    if (!this.interactive) {\r\n      return;\r\n    }\r\n\r\n    this.currentScore = value;\r\n    this.ratingChange.emit(value);\r\n  };\r\n\r\n  render() {\r\n    const maxScore = this.effectiveMaxScore;\r\n    const stars = Array.from({ length: maxScore }, (_, index) => {\r\n      const value = index + 1;\r\n      const filled = value <= this.currentScore;\r\n\r\n      if (this.interactive) {\r\n        return (\r\n          <button\r\n            type=\"button\"\r\n            class={{ star: true, filled }}\r\n            onClick={() => this.handleStarClick(value)}\r\n            aria-label={`Rate ${value} out of ${maxScore}`}\r\n            aria-pressed={filled}\r\n          >\r\n            {filled ? '★' : '☆'}\r\n          </button>\r\n        );\r\n      }\r\n\r\n      return <span class={{ star: true, filled }} aria-hidden=\"true\">{filled ? '★' : '☆'}</span>;\r\n    });\r\n\r\n    return (\r\n      <div class=\"rating\" aria-label={`Rated ${this.currentScore} out of ${maxScore}`} role=\"img\">\r\n        {stars}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"mappings":"2DAAA,MAAMA,EAAkB,IAAM,oZ,MCOjBC,EAAYC,EAAA,MAAAD,UAAAE,E,0HACfC,MAAgB,EAChBC,SAAmB,EACnBC,YAAuB,MAGvBC,MACAC,IAECC,aAAuB,EAEvBC,aAET,kBAAYC,GACV,OAAOC,KAAKR,OAASQ,KAAKL,OAAS,C,CAGrC,qBAAYM,GACV,OAAOD,KAAKP,UAAYO,KAAKJ,KAAO,C,CAGtC,iBAAAM,GACEF,KAAKH,aAAeG,KAAKD,c,CAI3B,iBAAAI,CAAkBC,GAChBJ,KAAKH,aAAeO,C,CAGdC,gBAAmBV,IACzB,IAAKK,KAAKN,YAAa,CACrB,M,CAGFM,KAAKH,aAAeF,EACpBK,KAAKF,aAAaQ,KAAKX,EAAM,EAG/B,MAAAY,GACE,MAAMd,EAAWO,KAAKC,kBACtB,MAAMO,EAAQC,MAAMC,KAAK,CAAEC,OAAQlB,IAAY,CAACmB,EAAGC,KACjD,MAAMlB,EAAQkB,EAAQ,EACtB,MAAMC,EAASnB,GAASK,KAAKH,aAE7B,GAAIG,KAAKN,YAAa,CACpB,OACEqB,EAAA,UACEC,KAAK,SACLC,MAAO,CAAEC,KAAM,KAAMJ,UACrBK,QAAS,IAAMnB,KAAKK,gBAAgBV,GAAM,aAC9B,QAAQA,YAAgBF,IAAU,eAChCqB,GAEbA,EAAS,IAAM,I,CAKtB,OAAOC,EAAA,QAAME,MAAO,CAAEC,KAAM,KAAMJ,UAAQ,cAAc,QAAQA,EAAS,IAAM,IAAW,IAG5F,OACEC,EAAA,OAAKE,MAAM,SAAQ,aAAa,SAASjB,KAAKH,uBAAuBJ,IAAY2B,KAAK,OACnFZ,E","ignoreList":[]}

package/dist/esm/custom-modal.entry.js

@@ -0,0 +1,33 @@
+import { r as registerInstance, c as createEvent, h } from './index-DrjLtd7S.js';
+
+const customModalCss = () => `:host{--modal-overlay:rgba(15, 23, 42, 0.45);--modal-bg:#ffffff;--modal-border:#e5e7eb;--modal-text:#111827;--modal-muted:#6b7280;display:block}.modal-backdrop{position:fixed;inset:0;background:var(--modal-overlay);display:grid;place-items:center;padding:1rem;z-index:1000}.modal{width:min(420px, 100%);background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:18px;padding:1.25rem;box-shadow:0 20px 45px rgba(15, 23, 42, 0.25)}header{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem}h3{margin:0;font-size:1.25rem;color:var(--modal-text)}.close-button{width:2rem;height:2rem;border:none;border-radius:999px;background:#f3f4f6;color:var(--modal-muted);font-size:1.25rem;cursor:pointer}.modal-body{color:var(--modal-text)}.modal-footer{display:flex;justify-content:flex-end;gap:0.75rem;margin-top:1.25rem}`;
+
+const CustomModal = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.closeModal = createEvent(this, "closeModal");
+    }
+    isOpen = true;
+    modalTitle = 'Dialog';
+    closeModal;
+    handleOverlayClick = (event) => {
+        if (event.target.classList.contains('modal-backdrop')) {
+            this.closeModal.emit();
+        }
+    };
+    handleClose = () => {
+        this.closeModal.emit();
+    };
+    render() {
+        if (!this.isOpen) {
+            return null;
+        }
+        return (h("div", { class: "modal-backdrop", onClick: this.handleOverlayClick }, h("div", { class: "modal", role: "dialog", "aria-modal": "true", "aria-label": this.modalTitle }, h("header", null, h("h3", null, this.modalTitle), h("button", { type: "button", class: "close-button", onClick: this.handleClose, "aria-label": "Close modal" }, "\u00D7")), h("div", { class: "modal-body" }, h("slot", null)), h("div", { class: "modal-footer" }, h("slot", { name: "footer" })))));
+    }
+};
+CustomModal.style = customModalCss();
+
+export { CustomModal as custom_modal };
+//# sourceMappingURL=custom-modal.entry.js.map
+
+//# sourceMappingURL=custom-modal.entry.js.map

package/dist/esm/custom-modal.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-modal.entry.js","sources":["src/components/custom-modal/custom-modal.css?tag=custom-modal&encapsulation=shadow","src/components/custom-modal/custom-modal.tsx"],"sourcesContent":[":host {\r\n  --modal-overlay: rgba(15, 23, 42, 0.45);\r\n  --modal-bg: #ffffff;\r\n  --modal-border: #e5e7eb;\r\n  --modal-text: #111827;\r\n  --modal-muted: #6b7280;\r\n  display: block;\r\n}\r\n\r\n.modal-backdrop {\r\n  position: fixed;\r\n  inset: 0;\r\n  background: var(--modal-overlay);\r\n  display: grid;\r\n  place-items: center;\r\n  padding: 1rem;\r\n  z-index: 1000;\r\n}\r\n\r\n.modal {\r\n  width: min(420px, 100%);\r\n  background: var(--modal-bg);\r\n  border: 1px solid var(--modal-border);\r\n  border-radius: 18px;\r\n  padding: 1.25rem;\r\n  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25);\r\n}\r\n\r\nheader {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  gap: 1rem;\r\n  margin-bottom: 1rem;\r\n}\r\n\r\nh3 {\r\n  margin: 0;\r\n  font-size: 1.25rem;\r\n  color: var(--modal-text);\r\n}\r\n\r\n.close-button {\r\n  width: 2rem;\r\n  height: 2rem;\r\n  border: none;\r\n  border-radius: 999px;\r\n  background: #f3f4f6;\r\n  color: var(--modal-muted);\r\n  font-size: 1.25rem;\r\n  cursor: pointer;\r\n}\r\n\r\n.modal-body {\r\n  color: var(--modal-text);\r\n}\r\n\r\n.modal-footer {\r\n  display: flex;\r\n  justify-content: flex-end;\r\n  gap: 0.75rem;\r\n  margin-top: 1.25rem;\r\n}\r\n","import { Component, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'custom-modal',\r\n  styleUrl: 'custom-modal.css',\r\n  shadow: true,\r\n})\r\nexport class CustomModal {\r\n  @Prop() isOpen: boolean = true;\r\n  @Prop() modalTitle: string = 'Dialog';\r\n\r\n  @Event() closeModal: EventEmitter<void>;\r\n\r\n  private handleOverlayClick = (event: MouseEvent) => {\r\n    if ((event.target as HTMLElement).classList.contains('modal-backdrop')) {\r\n      this.closeModal.emit();\r\n    }\r\n  };\r\n\r\n  private handleClose = () => {\r\n    this.closeModal.emit();\r\n  };\r\n\r\n  render() {\r\n    if (!this.isOpen) {\r\n      return null;\r\n    }\r\n\r\n    return (\r\n      <div class=\"modal-backdrop\" onClick={this.handleOverlayClick}>\r\n        <div class=\"modal\" role=\"dialog\" aria-modal=\"true\" aria-label={this.modalTitle}>\r\n          <header>\r\n            <h3>{this.modalTitle}</h3>\r\n            <button type=\"button\" class=\"close-button\" onClick={this.handleClose} aria-label=\"Close modal\">\r\n              ×\r\n            </button>\r\n          </header>\r\n\r\n          <div class=\"modal-body\">\r\n            <slot />\r\n          </div>\r\n\r\n          <div class=\"modal-footer\">\r\n            <slot name=\"footer\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,cAAc,GAAG,MAAM,CAAC,g2BAAg2B,CAAC;;MCOl3B,WAAW,GAAA,MAAA;;;;;IACd,MAAM,GAAY,IAAI;IACtB,UAAU,GAAW,QAAQ;AAE5B,IAAA,UAAU;AAEX,IAAA,kBAAkB,GAAG,CAAC,KAAiB,KAAI;QACjD,IAAK,KAAK,CAAC,MAAsB,CAAC,SAAS,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EAAE;AACtE,YAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;;AAE1B,KAAC;IAEO,WAAW,GAAG,MAAK;AACzB,QAAA,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE;AACxB,KAAC;IAED,MAAM,GAAA;AACJ,QAAA,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;AAChB,YAAA,OAAO,IAAI;;AAGb,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,gBAAgB,EAAC,OAAO,EAAE,IAAI,CAAC,kBAAkB,EAAA,EAC1D,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAA,YAAA,EAAY,MAAM,EAAA,YAAA,EAAa,IAAI,CAAC,UAAU,EAAA,EAC5E,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAA,CAAA,IAAA,EAAA,IAAA,EAAK,IAAI,CAAC,UAAU,CAAM,EAC1B,CAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,YAAA,EAAa,aAAa,aAErF,CACF,EAET,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,MAAA,EAAA,IAAA,CAAQ,CACJ,EAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACF,CACF;;;;;;;"}