snice 4.9.0 → 4.10.0

package/dist/components/recipe/snice-recipe.js

@@ -0,0 +1,552 @@
+import { __runInitializers, __esDecorate } from 'tslib';
+import { element, property, watch, dispatch, styles, render, css, html } from 'snice';
+
+var cssContent = ":host{display:block;font-family:var(--snice-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);color:var(--snice-color-text,rgb(23 23 23));contain:layout style paint;width:100%;--recipe-bg:var(--snice-color-background-element, rgb(252 251 249));--recipe-border:var(--snice-color-border, rgb(226 226 226));--recipe-text:var(--snice-color-text, rgb(23 23 23));--recipe-text-secondary:var(--snice-color-text-secondary, rgb(82 82 82));--recipe-text-tertiary:var(--snice-color-text-tertiary, rgb(115 115 115));--recipe-primary:var(--snice-color-primary, rgb(37 99 235));--recipe-success:var(--snice-color-success, rgb(22 163 74));--recipe-danger:var(--snice-color-danger, rgb(220 38 38));--recipe-radius:var(--snice-border-radius-lg, 0.5rem);--recipe-shadow:var(--snice-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1))}.recipe{background:var(--recipe-bg);border-radius:var(--recipe-radius);box-shadow:var(--recipe-shadow);overflow:hidden}.recipe__hero{position:relative;width:100%;overflow:hidden}.recipe__hero img{width:100%;height:auto;display:block;object-fit:cover;max-height:25rem}.recipe__header{padding:var(--snice-spacing-lg,1.5rem)}.recipe__title{margin:0 0 var(--snice-spacing-xs,.5rem);font-size:var(--snice-font-size-2xl, 1.5rem);font-weight:var(--snice-font-weight-bold,700);line-height:var(--snice-line-height-normal, 1.5);color:var(--recipe-text)}.recipe__description{margin:0 0 var(--snice-spacing-sm,.75rem);font-size:var(--snice-font-size-md, 1rem);color:var(--recipe-text-secondary);line-height:var(--snice-line-height-normal, 1.5)}.recipe__author{font-size:var(--snice-font-size-sm, .875rem);color:var(--recipe-text-tertiary)}.recipe__tags{display:flex;flex-wrap:wrap;gap:var(--snice-spacing-2xs,.25rem);margin-top:var(--snice-spacing-sm,.75rem)}.recipe__tag{display:inline-flex;align-items:center;padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-xs,.5rem);font-size:var(--snice-font-size-xs, .75rem);border-radius:9999px;background:var(--snice-color-background,rgb(255 255 255));border:1px solid var(--recipe-border);color:var(--recipe-text-secondary)}.recipe__meta{display:flex;flex-wrap:wrap;gap:var(--snice-spacing-md,1rem);padding:var(--snice-spacing-md,1rem) var(--snice-spacing-lg,1.5rem);border-top:1px solid var(--recipe-border);border-bottom:1px solid var(--recipe-border);background:var(--snice-color-background,rgb(255 255 255))}.recipe__meta-item{display:flex;flex-direction:column;align-items:center;gap:var(--snice-spacing-3xs,.125rem);min-width:4rem}.recipe__meta-label{font-size:var(--snice-font-size-xs, .75rem);color:var(--recipe-text-tertiary);text-transform:uppercase;letter-spacing:.05em}.recipe__meta-value{font-size:var(--snice-font-size-md, 1rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--recipe-text)}.recipe__difficulty--easy{color:var(--recipe-success)}.recipe__difficulty--medium{color:var(--snice-color-warning,rgb(234 179 8))}.recipe__difficulty--hard{color:var(--recipe-danger)}.recipe__content{display:grid;grid-template-columns:1fr 2fr;gap:var(--snice-spacing-lg,1.5rem);padding:var(--snice-spacing-lg,1.5rem)}@media (max-width:768px){.recipe__content{grid-template-columns:1fr}}.recipe__servings-adjuster{display:flex;align-items:center;gap:var(--snice-spacing-xs,.5rem);margin-bottom:var(--snice-spacing-md,1rem)}.recipe__servings-adjuster span{font-size:var(--snice-font-size-md, 1rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--recipe-text)}.recipe__servings-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--recipe-border);border-radius:50%;background:var(--snice-color-background,rgb(255 255 255));color:var(--recipe-text);font-size:var(--snice-font-size-lg, 1.125rem);cursor:pointer;transition:background var(--snice-transition-fast, 150ms),border-color var(--snice-transition-fast, 150ms);padding:0;line-height:1}.recipe__servings-btn:hover{border-color:var(--recipe-primary);background:var(--snice-color-primary-subtle,rgb(239 246 255))}.recipe__servings-btn:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.recipe__servings-count{min-width:2rem;text-align:center;font-weight:var(--snice-font-weight-bold,700);font-size:var(--snice-font-size-lg, 1.125rem)}.recipe__ingredients-section{position:relative}.recipe__section-title{font-size:var(--snice-font-size-lg, 1.125rem);font-weight:var(--snice-font-weight-semibold,600);margin:0 0 var(--snice-spacing-sm,.75rem);color:var(--recipe-text)}.recipe__ingredient-group-title{font-size:var(--snice-font-size-md, 1rem);font-weight:var(--snice-font-weight-medium,500);color:var(--recipe-text-secondary);margin:var(--snice-spacing-sm,.75rem) 0 var(--snice-spacing-2xs,.25rem)}.recipe__ingredients-list{list-style:none;padding:0;margin:0}.recipe__ingredient{display:flex;align-items:center;gap:var(--snice-spacing-xs,.5rem);padding:var(--snice-spacing-xs,.5rem) 0;border-bottom:1px solid var(--recipe-border);cursor:pointer;transition:opacity var(--snice-transition-fast, 150ms)}.recipe__ingredient:last-child{border-bottom:none}.recipe__ingredient--checked{opacity:.5}.recipe__ingredient--checked .recipe__ingredient-text{text-decoration:line-through}.recipe__ingredient-checkbox{appearance:none;width:1.125rem;height:1.125rem;border:2px solid var(--recipe-border);border-radius:3px;cursor:pointer;flex-shrink:0;position:relative;transition:background var(--snice-transition-fast, 150ms),border-color var(--snice-transition-fast, 150ms)}.recipe__ingredient-checkbox:checked{background:var(--recipe-primary);border-color:var(--recipe-primary)}.recipe__ingredient-checkbox:checked::after{content:'';position:absolute;left:3px;top:0;width:.375rem;height:.625rem;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}.recipe__ingredient-checkbox:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.recipe__ingredient-amount{font-weight:var(--snice-font-weight-semibold,600);white-space:nowrap;color:var(--recipe-text)}.recipe__ingredient-text{color:var(--recipe-text-secondary)}.recipe__steps-section{position:relative}.recipe__steps-list{list-style:none;padding:0;margin:0;counter-reset:step-counter}.recipe__step{display:flex;gap:var(--snice-spacing-md,1rem);padding:var(--snice-spacing-md,1rem) 0;border-bottom:1px solid var(--recipe-border);counter-increment:step-counter;transition:opacity var(--snice-transition-fast, 150ms)}.recipe__step:last-child{border-bottom:none}.recipe__step--completed{opacity:.5}.recipe__step--active{background:var(--snice-color-primary-subtle,rgb(239 246 255));margin:0 calc(-1 * var(--snice-spacing-sm,.75rem));padding-left:var(--snice-spacing-sm,.75rem);padding-right:var(--snice-spacing-sm,.75rem);border-radius:var(--snice-border-radius-md,.25rem)}.recipe__step-number{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:var(--recipe-primary);color:var(--snice-color-text-inverse,rgb(250 250 250));font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-bold,700);cursor:pointer;transition:background var(--snice-transition-fast, 150ms)}.recipe__step--completed .recipe__step-number{background:var(--recipe-success)}.recipe__step-number:hover{opacity:.8}.recipe__step-body{flex:1;min-width:0}.recipe__step-text{font-size:var(--snice-font-size-md, 1rem);line-height:var(--snice-line-height-normal, 1.5);color:var(--recipe-text)}.recipe__step-tip{margin-top:var(--snice-spacing-xs,.5rem);padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-sm,.75rem);background:var(--snice-color-primary-subtle,rgb(239 246 255));border-left:3px solid var(--recipe-primary);border-radius:0 var(--snice-border-radius-md,.25rem) var(--snice-border-radius-md,.25rem) 0;font-size:var(--snice-font-size-sm, .875rem);color:var(--recipe-text-secondary)}.recipe__step-image{margin-top:var(--snice-spacing-xs,.5rem);width:100%;max-width:20rem;border-radius:var(--snice-border-radius-md,.25rem)}.recipe__step-timer-btn{display:inline-flex;align-items:center;gap:var(--snice-spacing-3xs,.125rem);margin-top:var(--snice-spacing-xs,.5rem);padding:var(--snice-spacing-3xs,.125rem) var(--snice-spacing-xs,.5rem);border:1px solid var(--recipe-primary);border-radius:var(--snice-border-radius-md,.25rem);background:0 0;color:var(--recipe-primary);font-size:var(--snice-font-size-sm, .875rem);cursor:pointer;transition:background var(--snice-transition-fast, 150ms)}.recipe__step-timer-btn:hover{background:var(--snice-color-primary-subtle,rgb(239 246 255))}.recipe__step-timer-btn:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.recipe__step-timer-btn svg{width:.875rem;height:.875rem}.recipe__active-timer{display:inline-flex;align-items:center;gap:var(--snice-spacing-2xs,.25rem);margin-top:var(--snice-spacing-xs,.5rem);padding:var(--snice-spacing-2xs,.25rem) var(--snice-spacing-xs,.5rem);background:var(--snice-color-primary-subtle,rgb(239 246 255));border-radius:var(--snice-border-radius-md,.25rem);font-size:var(--snice-font-size-sm, .875rem);font-weight:var(--snice-font-weight-semibold,600);color:var(--recipe-primary)}.recipe__active-timer--done{background:var(--snice-color-success-subtle,rgb(220 252 231));color:var(--recipe-success)}.recipe__timer-cancel{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border:none;border-radius:50%;background:0 0;color:inherit;cursor:pointer;padding:0;font-size:.75rem}.recipe__timer-cancel:hover{background:rgb(0 0 0 / .1)}.recipe__nutrition{padding:var(--snice-spacing-lg,1.5rem);border-top:1px solid var(--recipe-border)}.recipe__nutrition-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(6rem,1fr));gap:var(--snice-spacing-md,1rem);margin-top:var(--snice-spacing-sm,.75rem)}.recipe__nutrition-item{text-align:center;padding:var(--snice-spacing-sm,.75rem);background:var(--snice-color-background,rgb(255 255 255));border-radius:var(--snice-border-radius-md,.25rem);border:1px solid var(--recipe-border)}.recipe__nutrition-value{font-size:var(--snice-font-size-lg, 1.125rem);font-weight:var(--snice-font-weight-bold,700);color:var(--recipe-text)}.recipe__nutrition-label{font-size:var(--snice-font-size-xs, .75rem);color:var(--recipe-text-tertiary);margin-top:var(--snice-spacing-3xs,.125rem)}.recipe__step-controls{display:flex;gap:var(--snice-spacing-xs,.5rem);padding:var(--snice-spacing-sm,.75rem) var(--snice-spacing-lg,1.5rem);border-top:1px solid var(--recipe-border)}.recipe__step-controls button{padding:var(--snice-spacing-xs,.5rem) var(--snice-spacing-md,1rem);border:1px solid var(--recipe-border);border-radius:var(--snice-border-radius-md,.25rem);background:var(--snice-color-background,rgb(255 255 255));color:var(--recipe-text);font-size:var(--snice-font-size-sm, .875rem);cursor:pointer;transition:background var(--snice-transition-fast, 150ms),border-color var(--snice-transition-fast, 150ms)}.recipe__step-controls button:hover{border-color:var(--recipe-primary);background:var(--snice-color-primary-subtle,rgb(239 246 255))}.recipe__step-controls button:disabled{opacity:.4;cursor:not-allowed}.recipe__step-controls button:focus-visible{outline:var(--snice-focus-ring-width,2px) solid var(--snice-focus-ring-color,rgb(59 130 246 / .5));outline-offset:var(--snice-focus-ring-offset,2px)}.recipe__print-btn{margin-left:auto}:host([variant=card]) .recipe__content{grid-template-columns:1fr;padding:var(--snice-spacing-md,1rem)}:host([variant=card]) .recipe__hero img{max-height:15rem}:host([variant=card]) .recipe__header{padding:var(--snice-spacing-md,1rem)}@media print{.recipe{box-shadow:none;border:1px solid #ccc}.recipe__active-timer,.recipe__servings-btn,.recipe__step-controls,.recipe__step-timer-btn,.recipe__timer-cancel{display:none!important}.recipe__ingredient--checked,.recipe__step--completed{opacity:1}.recipe__ingredient--checked .recipe__ingredient-text{text-decoration:none}}[hidden]{display:none!important}";
+
+let SniceRecipe = (() => {
+    let _classDecorators = [element('snice-recipe')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = HTMLElement;
+    let _instanceExtraInitializers = [];
+    let _title_decorators;
+    let _title_initializers = [];
+    let _title_extraInitializers = [];
+    let _description_decorators;
+    let _description_initializers = [];
+    let _description_extraInitializers = [];
+    let _image_decorators;
+    let _image_initializers = [];
+    let _image_extraInitializers = [];
+    let _author_decorators;
+    let _author_initializers = [];
+    let _author_extraInitializers = [];
+    let _prepTime_decorators;
+    let _prepTime_initializers = [];
+    let _prepTime_extraInitializers = [];
+    let _cookTime_decorators;
+    let _cookTime_initializers = [];
+    let _cookTime_extraInitializers = [];
+    let _servings_decorators;
+    let _servings_initializers = [];
+    let _servings_extraInitializers = [];
+    let _difficulty_decorators;
+    let _difficulty_initializers = [];
+    let _difficulty_extraInitializers = [];
+    let _cuisine_decorators;
+    let _cuisine_initializers = [];
+    let _cuisine_extraInitializers = [];
+    let _variant_decorators;
+    let _variant_initializers = [];
+    let _variant_extraInitializers = [];
+    let _ingredients_decorators;
+    let _ingredients_initializers = [];
+    let _ingredients_extraInitializers = [];
+    let _steps_decorators;
+    let _steps_initializers = [];
+    let _steps_extraInitializers = [];
+    let _nutrition_decorators;
+    let _nutrition_initializers = [];
+    let _nutrition_extraInitializers = [];
+    let _tags_decorators;
+    let _tags_initializers = [];
+    let _tags_extraInitializers = [];
+    let _currentServings_decorators;
+    let _currentServings_initializers = [];
+    let _currentServings_extraInitializers = [];
+    let _checkedIngredients_decorators;
+    let _checkedIngredients_initializers = [];
+    let _checkedIngredients_extraInitializers = [];
+    let _completedSteps_decorators;
+    let _completedSteps_initializers = [];
+    let _completedSteps_extraInitializers = [];
+    let _activeStep_decorators;
+    let _activeStep_initializers = [];
+    let _activeStep_extraInitializers = [];
+    let _timerVersion_decorators;
+    let _timerVersion_initializers = [];
+    let _timerVersion_extraInitializers = [];
+    let _onServingsChange_decorators;
+    let _onIngredientsChange_decorators;
+    let _onStepsChange_decorators;
+    let _emitServingChange_decorators;
+    let _emitStepComplete_decorators;
+    let _emitIngredientCheck_decorators;
+    let _styles_decorators;
+    let _template_decorators;
+    (class extends _classSuper {
+        static { _classThis = this; }
+        constructor() {
+            super(...arguments);
+            this.title = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _title_initializers, ''));
+            this.description = (__runInitializers(this, _title_extraInitializers), __runInitializers(this, _description_initializers, ''));
+            this.image = (__runInitializers(this, _description_extraInitializers), __runInitializers(this, _image_initializers, ''));
+            this.author = (__runInitializers(this, _image_extraInitializers), __runInitializers(this, _author_initializers, ''));
+            this.prepTime = (__runInitializers(this, _author_extraInitializers), __runInitializers(this, _prepTime_initializers, 0));
+            this.cookTime = (__runInitializers(this, _prepTime_extraInitializers), __runInitializers(this, _cookTime_initializers, 0));
+            this.servings = (__runInitializers(this, _cookTime_extraInitializers), __runInitializers(this, _servings_initializers, 4));
+            this.difficulty = (__runInitializers(this, _servings_extraInitializers), __runInitializers(this, _difficulty_initializers, 'medium'));
+            this.cuisine = (__runInitializers(this, _difficulty_extraInitializers), __runInitializers(this, _cuisine_initializers, ''));
+            this.variant = (__runInitializers(this, _cuisine_extraInitializers), __runInitializers(this, _variant_initializers, 'full'));
+            this.ingredients = (__runInitializers(this, _variant_extraInitializers), __runInitializers(this, _ingredients_initializers, []));
+            this.steps = (__runInitializers(this, _ingredients_extraInitializers), __runInitializers(this, _steps_initializers, []));
+            this.nutrition = (__runInitializers(this, _steps_extraInitializers), __runInitializers(this, _nutrition_initializers, null));
+            this.tags = (__runInitializers(this, _nutrition_extraInitializers), __runInitializers(this, _tags_initializers, []));
+            // Internal state
+            this.currentServings = (__runInitializers(this, _tags_extraInitializers), __runInitializers(this, _currentServings_initializers, 0));
+            this.checkedIngredients = (__runInitializers(this, _currentServings_extraInitializers), __runInitializers(this, _checkedIngredients_initializers, []));
+            this.completedSteps = (__runInitializers(this, _checkedIngredients_extraInitializers), __runInitializers(this, _completedSteps_initializers, []));
+            this.activeStep = (__runInitializers(this, _completedSteps_extraInitializers), __runInitializers(this, _activeStep_initializers, -1));
+            this.timerVersion = (__runInitializers(this, _activeStep_extraInitializers), __runInitializers(this, _timerVersion_initializers, 0));
+            this.activeTimers = (__runInitializers(this, _timerVersion_extraInitializers), new Map());
+            this.baseServings = 0;
+        }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _title_decorators = [property()];
+            _description_decorators = [property()];
+            _image_decorators = [property()];
+            _author_decorators = [property()];
+            _prepTime_decorators = [property({ type: Number, attribute: 'prep-time' })];
+            _cookTime_decorators = [property({ type: Number, attribute: 'cook-time' })];
+            _servings_decorators = [property({ type: Number })];
+            _difficulty_decorators = [property()];
+            _cuisine_decorators = [property()];
+            _variant_decorators = [property()];
+            _ingredients_decorators = [property({ type: Array })];
+            _steps_decorators = [property({ type: Array })];
+            _nutrition_decorators = [property({ type: Object })];
+            _tags_decorators = [property({ type: Array })];
+            _currentServings_decorators = [property({ type: Number })];
+            _checkedIngredients_decorators = [property({ type: Array })];
+            _completedSteps_decorators = [property({ type: Array })];
+            _activeStep_decorators = [property({ type: Number })];
+            _timerVersion_decorators = [property({ type: Number })];
+            _onServingsChange_decorators = [watch('servings')];
+            _onIngredientsChange_decorators = [watch('ingredients')];
+            _onStepsChange_decorators = [watch('steps')];
+            _emitServingChange_decorators = [dispatch('recipe-serving-change', { bubbles: true, composed: true })];
+            _emitStepComplete_decorators = [dispatch('recipe-step-complete', { bubbles: true, composed: true })];
+            _emitIngredientCheck_decorators = [dispatch('recipe-ingredient-check', { bubbles: true, composed: true })];
+            _styles_decorators = [styles()];
+            _template_decorators = [render()];
+            __esDecorate(this, null, _onServingsChange_decorators, { kind: "method", name: "onServingsChange", static: false, private: false, access: { has: obj => "onServingsChange" in obj, get: obj => obj.onServingsChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onIngredientsChange_decorators, { kind: "method", name: "onIngredientsChange", static: false, private: false, access: { has: obj => "onIngredientsChange" in obj, get: obj => obj.onIngredientsChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _onStepsChange_decorators, { kind: "method", name: "onStepsChange", static: false, private: false, access: { has: obj => "onStepsChange" in obj, get: obj => obj.onStepsChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitServingChange_decorators, { kind: "method", name: "emitServingChange", static: false, private: false, access: { has: obj => "emitServingChange" in obj, get: obj => obj.emitServingChange }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitStepComplete_decorators, { kind: "method", name: "emitStepComplete", static: false, private: false, access: { has: obj => "emitStepComplete" in obj, get: obj => obj.emitStepComplete }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _emitIngredientCheck_decorators, { kind: "method", name: "emitIngredientCheck", static: false, private: false, access: { has: obj => "emitIngredientCheck" in obj, get: obj => obj.emitIngredientCheck }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _styles_decorators, { kind: "method", name: "styles", static: false, private: false, access: { has: obj => "styles" in obj, get: obj => obj.styles }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _template_decorators, { kind: "method", name: "template", static: false, private: false, access: { has: obj => "template" in obj, get: obj => obj.template }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, null, _title_decorators, { kind: "field", name: "title", static: false, private: false, access: { has: obj => "title" in obj, get: obj => obj.title, set: (obj, value) => { obj.title = value; } }, metadata: _metadata }, _title_initializers, _title_extraInitializers);
+            __esDecorate(null, null, _description_decorators, { kind: "field", name: "description", static: false, private: false, access: { has: obj => "description" in obj, get: obj => obj.description, set: (obj, value) => { obj.description = value; } }, metadata: _metadata }, _description_initializers, _description_extraInitializers);
+            __esDecorate(null, null, _image_decorators, { kind: "field", name: "image", static: false, private: false, access: { has: obj => "image" in obj, get: obj => obj.image, set: (obj, value) => { obj.image = value; } }, metadata: _metadata }, _image_initializers, _image_extraInitializers);
+            __esDecorate(null, null, _author_decorators, { kind: "field", name: "author", static: false, private: false, access: { has: obj => "author" in obj, get: obj => obj.author, set: (obj, value) => { obj.author = value; } }, metadata: _metadata }, _author_initializers, _author_extraInitializers);
+            __esDecorate(null, null, _prepTime_decorators, { kind: "field", name: "prepTime", static: false, private: false, access: { has: obj => "prepTime" in obj, get: obj => obj.prepTime, set: (obj, value) => { obj.prepTime = value; } }, metadata: _metadata }, _prepTime_initializers, _prepTime_extraInitializers);
+            __esDecorate(null, null, _cookTime_decorators, { kind: "field", name: "cookTime", static: false, private: false, access: { has: obj => "cookTime" in obj, get: obj => obj.cookTime, set: (obj, value) => { obj.cookTime = value; } }, metadata: _metadata }, _cookTime_initializers, _cookTime_extraInitializers);
+            __esDecorate(null, null, _servings_decorators, { kind: "field", name: "servings", static: false, private: false, access: { has: obj => "servings" in obj, get: obj => obj.servings, set: (obj, value) => { obj.servings = value; } }, metadata: _metadata }, _servings_initializers, _servings_extraInitializers);
+            __esDecorate(null, null, _difficulty_decorators, { kind: "field", name: "difficulty", static: false, private: false, access: { has: obj => "difficulty" in obj, get: obj => obj.difficulty, set: (obj, value) => { obj.difficulty = value; } }, metadata: _metadata }, _difficulty_initializers, _difficulty_extraInitializers);
+            __esDecorate(null, null, _cuisine_decorators, { kind: "field", name: "cuisine", static: false, private: false, access: { has: obj => "cuisine" in obj, get: obj => obj.cuisine, set: (obj, value) => { obj.cuisine = value; } }, metadata: _metadata }, _cuisine_initializers, _cuisine_extraInitializers);
+            __esDecorate(null, null, _variant_decorators, { kind: "field", name: "variant", static: false, private: false, access: { has: obj => "variant" in obj, get: obj => obj.variant, set: (obj, value) => { obj.variant = value; } }, metadata: _metadata }, _variant_initializers, _variant_extraInitializers);
+            __esDecorate(null, null, _ingredients_decorators, { kind: "field", name: "ingredients", static: false, private: false, access: { has: obj => "ingredients" in obj, get: obj => obj.ingredients, set: (obj, value) => { obj.ingredients = value; } }, metadata: _metadata }, _ingredients_initializers, _ingredients_extraInitializers);
+            __esDecorate(null, null, _steps_decorators, { kind: "field", name: "steps", static: false, private: false, access: { has: obj => "steps" in obj, get: obj => obj.steps, set: (obj, value) => { obj.steps = value; } }, metadata: _metadata }, _steps_initializers, _steps_extraInitializers);
+            __esDecorate(null, null, _nutrition_decorators, { kind: "field", name: "nutrition", static: false, private: false, access: { has: obj => "nutrition" in obj, get: obj => obj.nutrition, set: (obj, value) => { obj.nutrition = value; } }, metadata: _metadata }, _nutrition_initializers, _nutrition_extraInitializers);
+            __esDecorate(null, null, _tags_decorators, { kind: "field", name: "tags", static: false, private: false, access: { has: obj => "tags" in obj, get: obj => obj.tags, set: (obj, value) => { obj.tags = value; } }, metadata: _metadata }, _tags_initializers, _tags_extraInitializers);
+            __esDecorate(null, null, _currentServings_decorators, { kind: "field", name: "currentServings", static: false, private: false, access: { has: obj => "currentServings" in obj, get: obj => obj.currentServings, set: (obj, value) => { obj.currentServings = value; } }, metadata: _metadata }, _currentServings_initializers, _currentServings_extraInitializers);
+            __esDecorate(null, null, _checkedIngredients_decorators, { kind: "field", name: "checkedIngredients", static: false, private: false, access: { has: obj => "checkedIngredients" in obj, get: obj => obj.checkedIngredients, set: (obj, value) => { obj.checkedIngredients = value; } }, metadata: _metadata }, _checkedIngredients_initializers, _checkedIngredients_extraInitializers);
+            __esDecorate(null, null, _completedSteps_decorators, { kind: "field", name: "completedSteps", static: false, private: false, access: { has: obj => "completedSteps" in obj, get: obj => obj.completedSteps, set: (obj, value) => { obj.completedSteps = value; } }, metadata: _metadata }, _completedSteps_initializers, _completedSteps_extraInitializers);
+            __esDecorate(null, null, _activeStep_decorators, { kind: "field", name: "activeStep", static: false, private: false, access: { has: obj => "activeStep" in obj, get: obj => obj.activeStep, set: (obj, value) => { obj.activeStep = value; } }, metadata: _metadata }, _activeStep_initializers, _activeStep_extraInitializers);
+            __esDecorate(null, null, _timerVersion_decorators, { kind: "field", name: "timerVersion", static: false, private: false, access: { has: obj => "timerVersion" in obj, get: obj => obj.timerVersion, set: (obj, value) => { obj.timerVersion = value; } }, metadata: _metadata }, _timerVersion_initializers, _timerVersion_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        onServingsChange() {
+            if (this.baseServings === 0) {
+                this.baseServings = this.servings;
+                this.currentServings = this.servings;
+            }
+        }
+        onIngredientsChange() {
+            this.checkedIngredients = new Array(this.ingredients.length).fill(false);
+        }
+        onStepsChange() {
+            this.completedSteps = new Array(this.steps.length).fill(false);
+            this.activeStep = -1;
+        }
+        setServings(count) {
+            if (count < 1)
+                return;
+            const previous = this.currentServings;
+            this.currentServings = count;
+            this.emitServingChange(previous);
+        }
+        print() {
+            window.print();
+        }
+        reset() {
+            this.checkedIngredients = new Array(this.ingredients.length).fill(false);
+            this.completedSteps = new Array(this.steps.length).fill(false);
+            this.activeStep = -1;
+            this.currentServings = this.baseServings || this.servings;
+            // Clear all active timers
+            for (const [, timer] of this.activeTimers.entries()) {
+                clearInterval(timer.intervalId);
+            }
+            this.activeTimers.clear();
+            this.timerVersion++;
+        }
+        scaleAmount(amount) {
+            const base = this.baseServings || this.servings;
+            if (base === 0)
+                return amount;
+            const scaled = (amount * this.currentServings) / base;
+            return Math.round(scaled * 100) / 100;
+        }
+        formatAmount(amount) {
+            const scaled = this.scaleAmount(amount);
+            if (scaled === Math.floor(scaled))
+                return scaled.toString();
+            // Common fractions
+            const frac = scaled - Math.floor(scaled);
+            const whole = Math.floor(scaled);
+            const fractionMap = [
+                [0.25, '\u00BC'], [0.33, '\u2153'], [0.5, '\u00BD'],
+                [0.67, '\u2154'], [0.75, '\u00BE'],
+            ];
+            for (const [val, sym] of fractionMap) {
+                if (Math.abs(frac - val) < 0.05) {
+                    return whole > 0 ? `${whole}${sym}` : sym;
+                }
+            }
+            return scaled.toFixed(1);
+        }
+        toggleIngredient(index) {
+            const updated = [...this.checkedIngredients];
+            updated[index] = !updated[index];
+            this.checkedIngredients = updated;
+            this.emitIngredientCheck(index, updated[index]);
+        }
+        toggleStepComplete(index) {
+            const updated = [...this.completedSteps];
+            updated[index] = !updated[index];
+            this.completedSteps = updated;
+            this.emitStepComplete(index, updated[index]);
+        }
+        decrementServings() {
+            if (this.currentServings > 1) {
+                this.setServings(this.currentServings - 1);
+            }
+        }
+        incrementServings() {
+            this.setServings(this.currentServings + 1);
+        }
+        goToPrevStep() {
+            if (this.activeStep > 0) {
+                this.activeStep = this.activeStep - 1;
+            }
+        }
+        goToNextStep() {
+            if (this.activeStep < this.steps.length - 1) {
+                this.activeStep = this.activeStep + 1;
+            }
+            else {
+                this.activeStep = -1;
+            }
+        }
+        startStepByStep() {
+            this.activeStep = 0;
+        }
+        startTimer(stepIndex, minutes) {
+            if (this.activeTimers.has(stepIndex))
+                return;
+            const remaining = minutes * 60;
+            const intervalId = window.setInterval(() => {
+                const timer = this.activeTimers.get(stepIndex);
+                if (!timer)
+                    return;
+                if (timer.remaining <= 1) {
+                    clearInterval(timer.intervalId);
+                    this.activeTimers.set(stepIndex, { ...timer, remaining: 0, done: true });
+                    this.timerVersion++;
+                    return;
+                }
+                this.activeTimers.set(stepIndex, { ...timer, remaining: timer.remaining - 1 });
+                this.timerVersion++;
+            }, 1000);
+            this.activeTimers.set(stepIndex, { remaining, intervalId, done: false });
+            this.timerVersion++;
+        }
+        cancelTimer(stepIndex) {
+            const timer = this.activeTimers.get(stepIndex);
+            if (timer) {
+                clearInterval(timer.intervalId);
+                this.activeTimers.delete(stepIndex);
+                this.timerVersion++;
+            }
+        }
+        formatTimer(seconds) {
+            const m = Math.floor(seconds / 60);
+            const s = seconds % 60;
+            return `${m}:${s.toString().padStart(2, '0')}`;
+        }
+        formatMinutes(minutes) {
+            if (minutes < 60)
+                return `${minutes} min`;
+            const hrs = Math.floor(minutes / 60);
+            const mins = minutes % 60;
+            return mins > 0 ? `${hrs}h ${mins}m` : `${hrs}h`;
+        }
+        emitServingChange(previousServings) {
+            return { servings: this.currentServings, previousServings };
+        }
+        emitStepComplete(stepIndex, completed) {
+            return { stepIndex, completed };
+        }
+        emitIngredientCheck(ingredientIndex, checked) {
+            return { ingredientIndex, checked, ingredient: this.ingredients[ingredientIndex] };
+        }
+        styles() {
+            return css /*css*/ `${cssContent}`;
+        }
+        template() {
+            // Initialize base servings on first render
+            if (this.baseServings === 0 && this.servings > 0) {
+                this.baseServings = this.servings;
+                this.currentServings = this.servings;
+            }
+            const totalTime = this.prepTime + this.cookTime;
+            // Group ingredients
+            const groups = new Map();
+            this.ingredients.forEach((ing, i) => {
+                const group = ing.group || '';
+                if (!groups.has(group))
+                    groups.set(group, []);
+                groups.get(group).push({ ingredient: ing, index: i });
+            });
+            const hasStepByStep = this.activeStep >= 0;
+            const hasTags = this.tags.length > 0 || this.cuisine.length > 0;
+            const hasCuisine = this.cuisine.length > 0;
+            const hasIngredients = this.ingredients.length > 0;
+            const hasSteps = this.steps.length > 0;
+            const hasContent = hasIngredients || hasSteps;
+            const hasMeta = this.prepTime > 0 || this.cookTime > 0 || this.servings > 0 || this.difficulty.length > 0;
+            // Pre-compute nutrition values to avoid null access in template
+            const hasNutrition = this.nutrition !== null;
+            const nutritionCalories = hasNutrition ? this.nutrition.calories : 0;
+            const nutritionProtein = hasNutrition ? this.nutrition.protein : 0;
+            const nutritionCarbs = hasNutrition ? this.nutrition.carbs : 0;
+            const nutritionFat = hasNutrition ? this.nutrition.fat : 0;
+            const nutritionFiber = hasNutrition ? this.nutrition.fiber : 0;
+            const nutritionSodium = hasNutrition ? this.nutrition.sodium : 0;
+            const hasFiber = hasNutrition && this.nutrition.fiber !== undefined;
+            const hasSodium = hasNutrition && this.nutrition.sodium !== undefined;
+            // Pre-build ingredient items to avoid nested template issues
+            const ingredientItems = [];
+            for (const [groupName, items] of groups.entries()) {
+                if (groupName) {
+                    ingredientItems.push(html `<li class="recipe__ingredient-group-title">${groupName}</li>`);
+                }
+                for (const { ingredient, index } of items) {
+                    const isChecked = this.checkedIngredients[index] || false;
+                    const checkedClass = isChecked ? 'recipe__ingredient--checked' : '';
+                    ingredientItems.push(html `
+          <li class="recipe__ingredient ${checkedClass}" @click=${() => this.toggleIngredient(index)}>
+            <input type="checkbox" class="recipe__ingredient-checkbox" ?checked=${isChecked} @click=${(e) => e.stopPropagation()} @change=${() => this.toggleIngredient(index)} />
+            <span class="recipe__ingredient-amount">${this.formatAmount(ingredient.amount)} ${ingredient.unit}</span>
+            <span class="recipe__ingredient-text">${ingredient.name}</span>
+          </li>
+        `);
+                }
+            }
+            return html /*html*/ `
+      <div class="recipe" part="container">
+        <if ${this.image}>
+          <div class="recipe__hero" part="hero">
+            <img src="${this.image}" alt="${this.title}" loading="lazy" />
+          </div>
+        </if>
+
+        <div class="recipe__header" part="header">
+          <h2 class="recipe__title">${this.title}</h2>
+          <if ${this.description}>
+            <p class="recipe__description">${this.description}</p>
+          </if>
+          <if ${this.author}>
+            <span class="recipe__author">By ${this.author}</span>
+          </if>
+          <if ${hasTags}>
+            <div class="recipe__tags">
+              <if ${hasCuisine}>
+                <span class="recipe__tag">${this.cuisine}</span>
+              </if>
+              ${this.tags.map(tag => html `<span class="recipe__tag">${tag}</span>`)}
+            </div>
+          </if>
+        </div>
+
+        <if ${hasMeta}>
+          <div class="recipe__meta" part="meta">
+            <if ${this.prepTime > 0}>
+              <div class="recipe__meta-item">
+                <span class="recipe__meta-label">Prep</span>
+                <span class="recipe__meta-value">${this.formatMinutes(this.prepTime)}</span>
+              </div>
+            </if>
+            <if ${this.cookTime > 0}>
+              <div class="recipe__meta-item">
+                <span class="recipe__meta-label">Cook</span>
+                <span class="recipe__meta-value">${this.formatMinutes(this.cookTime)}</span>
+              </div>
+            </if>
+            <if ${totalTime > 0}>
+              <div class="recipe__meta-item">
+                <span class="recipe__meta-label">Total</span>
+                <span class="recipe__meta-value">${this.formatMinutes(totalTime)}</span>
+              </div>
+            </if>
+            <if ${this.currentServings > 0}>
+              <div class="recipe__meta-item">
+                <span class="recipe__meta-label">Servings</span>
+                <span class="recipe__meta-value">${this.currentServings}</span>
+              </div>
+            </if>
+            <if ${this.difficulty}>
+              <div class="recipe__meta-item">
+                <span class="recipe__meta-label">Difficulty</span>
+                <span class="recipe__meta-value recipe__difficulty--${this.difficulty}">${this.difficulty}</span>
+              </div>
+            </if>
+          </div>
+        </if>
+
+        <if ${hasContent}>
+          <div class="recipe__content" part="content">
+            <if ${hasIngredients}>
+              <div class="recipe__ingredients-section" part="ingredients">
+                <h3 class="recipe__section-title">Ingredients</h3>
+                <div class="recipe__servings-adjuster">
+                  <button class="recipe__servings-btn" @click=${() => this.decrementServings()} aria-label="Decrease servings">-</button>
+                  <span class="recipe__servings-count">${this.currentServings}</span>
+                  <button class="recipe__servings-btn" @click=${() => this.incrementServings()} aria-label="Increase servings">+</button>
+                  <span>servings</span>
+                </div>
+                <ul class="recipe__ingredients-list">
+                  ${ingredientItems}
+                </ul>
+              </div>
+            </if>
+
+            <if ${hasSteps}>
+              <div class="recipe__steps-section" part="steps">
+                <h3 class="recipe__section-title">Instructions</h3>
+                <ol class="recipe__steps-list">
+                  ${this.steps.map((step, i) => {
+                const isCompleted = this.completedSteps[i] || false;
+                const isActive = this.activeStep === i;
+                const timer = this.activeTimers.get(i);
+                const hasTimer = timer !== undefined;
+                const timerDone = hasTimer && timer.done;
+                const timerClass = timerDone ? 'recipe__active-timer--done' : '';
+                const timerText = hasTimer ? (timer.done ? 'Done!' : this.formatTimer(timer.remaining)) : '';
+                const showTimerBtn = step.time && !hasTimer;
+                return html `
+                      <li class="recipe__step ${isCompleted ? 'recipe__step--completed' : ''} ${isActive ? 'recipe__step--active' : ''}">
+                        <span class="recipe__step-number" @click=${() => this.toggleStepComplete(i)} title="${isCompleted ? 'Mark incomplete' : 'Mark complete'}">
+                          ${isCompleted ? '\u2713' : i + 1}
+                        </span>
+                        <div class="recipe__step-body">
+                          <div class="recipe__step-text">${step.text}</div>
+                          <if ${step.tip}>
+                            <div class="recipe__step-tip">${step.tip}</div>
+                          </if>
+                          <if ${step.image}>
+                            <img class="recipe__step-image" src="${step.image}" alt="Step ${i + 1}" loading="lazy" />
+                          </if>
+                          <if ${showTimerBtn}>
+                            <button class="recipe__step-timer-btn" @click=${() => this.startTimer(i, step.time)}>
+                              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/>
+                              </svg>
+                              ${this.formatMinutes(step.time)}
+                            </button>
+                          </if>
+                          <if ${hasTimer}>
+                            <span class="recipe__active-timer ${timerClass}">
+                              ${timerText}
+                              <button class="recipe__timer-cancel" @click=${() => this.cancelTimer(i)} title="Cancel timer">\u2715</button>
+                            </span>
+                          </if>
+                        </div>
+                      </li>
+                    `;
+            })}
+                </ol>
+              </div>
+            </if>
+          </div>
+        </if>
+
+        <if ${hasNutrition}>
+          <div class="recipe__nutrition" part="nutrition">
+            <h3 class="recipe__section-title">Nutrition Facts</h3>
+            <span class="recipe__author">Per serving</span>
+            <div class="recipe__nutrition-grid">
+              <div class="recipe__nutrition-item">
+                <div class="recipe__nutrition-value">${nutritionCalories}</div>
+                <div class="recipe__nutrition-label">Calories</div>
+              </div>
+              <div class="recipe__nutrition-item">
+                <div class="recipe__nutrition-value">${nutritionProtein}g</div>
+                <div class="recipe__nutrition-label">Protein</div>
+              </div>
+              <div class="recipe__nutrition-item">
+                <div class="recipe__nutrition-value">${nutritionCarbs}g</div>
+                <div class="recipe__nutrition-label">Carbs</div>
+              </div>
+              <div class="recipe__nutrition-item">
+                <div class="recipe__nutrition-value">${nutritionFat}g</div>
+                <div class="recipe__nutrition-label">Fat</div>
+              </div>
+              <if ${hasFiber}>
+                <div class="recipe__nutrition-item">
+                  <div class="recipe__nutrition-value">${nutritionFiber}g</div>
+                  <div class="recipe__nutrition-label">Fiber</div>
+                </div>
+              </if>
+              <if ${hasSodium}>
+                <div class="recipe__nutrition-item">
+                  <div class="recipe__nutrition-value">${nutritionSodium}mg</div>
+                  <div class="recipe__nutrition-label">Sodium</div>
+                </div>
+              </if>
+            </div>
+          </div>
+        </if>
+
+        <if ${hasSteps}>
+          <div class="recipe__step-controls" part="controls">
+            <if ${!hasStepByStep}>
+              <button @click=${() => this.startStepByStep()}>Step-by-Step</button>
+            </if>
+            <if ${hasStepByStep}>
+              <button @click=${() => this.goToPrevStep()} ?disabled=${this.activeStep <= 0}>Previous</button>
+              <button @click=${() => this.goToNextStep()}>
+                ${this.activeStep >= this.steps.length - 1 ? 'Finish' : 'Next'}
+              </button>
+            </if>
+            <button class="recipe__print-btn" @click=${() => this.print()}>Print</button>
+            <button @click=${() => this.reset()}>Reset</button>
+          </div>
+        </if>
+      </div>
+    `;
+        }
+    });
+    return _classThis;
+})();
+
+export { SniceRecipe };
+//# sourceMappingURL=snice-recipe.js.map