@gurpinderjitsingh/recipe-ui 0.1.0 → 0.1.2

package/dist/cjs/index.cjs.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var appModal_mealPlanDay_recipeCard_recipeFilterBar_recipeForm_recipeRating_recipeSearchBar_entry = require('./app-modal.meal-plan-day.recipe-card.recipe-filter-bar.recipe-form.recipe-rating.recipe-search-bar.entry.cjs.js');
+var appToast_entry = require('./app-toast.entry.cjs.js');
+require('./index-CRcwY0Fb.js');
+
+
+
+exports.AppModal = appModal_mealPlanDay_recipeCard_recipeFilterBar_recipeForm_recipeRating_recipeSearchBar_entry.app_modal;
+exports.MealPlanDay = appModal_mealPlanDay_recipeCard_recipeFilterBar_recipeForm_recipeRating_recipeSearchBar_entry.meal_plan_day;
+exports.RecipeCard = appModal_mealPlanDay_recipeCard_recipeFilterBar_recipeForm_recipeRating_recipeSearchBar_entry.recipe_card;
+exports.RecipeFilterBar = appModal_mealPlanDay_recipeCard_recipeFilterBar_recipeForm_recipeRating_recipeSearchBar_entry.recipe_filter_bar;
+exports.RecipeForm = appModal_mealPlanDay_recipeCard_recipeFilterBar_recipeForm_recipeRating_recipeSearchBar_entry.recipe_form;
+exports.RecipeRating = appModal_mealPlanDay_recipeCard_recipeFilterBar_recipeForm_recipeRating_recipeSearchBar_entry.recipe_rating;
+exports.RecipeSearchBar = appModal_mealPlanDay_recipeCard_recipeFilterBar_recipeForm_recipeRating_recipeSearchBar_entry.recipe_search_bar;
+exports.AppToast = appToast_entry.app_toast;

package/dist/cjs/loader.cjs.js

@@ -0,0 +1,13 @@
+'use strict';
+
+var index = require('./index-CRcwY0Fb.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
+
+const defineCustomElements = async (win, options) => {
+  if (typeof window === 'undefined') return undefined;
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["app-modal_7.cjs",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[257,"recipe-form",{"initialData":[1,"initial-data"],"title":[32],"image":[32],"category":[32],"ingredients":[32],"instructions":[32],"errors":[32]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast.cjs",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
+};
+
+exports.setNonce = index.setNonce;
+exports.defineCustomElements = defineCustomElements;

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

@@ -0,0 +1,25 @@
+'use strict';
+
+var index = require('./index-CRcwY0Fb.js');
+var appGlobals = require('./app-globals-V2Kpy_OQ.js');
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+/*
+ Stencil Client Patch Browser v4.44.0 | MIT Licensed | https://stenciljs.com
+ */
+
+var patchBrowser = () => {
+  const importMeta = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('recipe-ui.cjs.js', document.baseURI).href));
+  const opts = {};
+  if (importMeta !== "") {
+    opts.resourcesUrl = new URL(".", importMeta).href;
+  }
+  return index.promiseResolve(opts);
+};
+
+patchBrowser().then(async (options) => {
+  await appGlobals.globalScripts();
+  return index.bootstrapLazy([["app-modal_7.cjs",[[257,"app-modal",{"open":[4],"modalTitle":[1,"modal-title"]}],[1,"meal-plan-day",{"day":[1],"meals":[16]}],[257,"recipe-card",{"recipeTitle":[1,"recipe-title"],"image":[1],"category":[1],"favorite":[4]}],[1,"recipe-filter-bar",{"categories":[16],"active":[1]}],[257,"recipe-form",{"initialData":[1,"initial-data"],"title":[32],"image":[32],"category":[32],"ingredients":[32],"instructions":[32],"errors":[32]},null,{"initialData":[{"onInitialDataChange":0}]}],[1,"recipe-rating",{"value":[2],"readonly":[4],"max":[2]}],[1,"recipe-search-bar",{"placeholder":[1],"value":[1],"debounceMs":[2,"debounce-ms"],"internalValue":[32]},null,{"value":[{"onValuePropChange":0}]}]]],["app-toast.cjs",[[1,"app-toast",{"message":[1],"type":[1],"duration":[2]}]]]], options);
+});
+
+exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -0,0 +1,20 @@
+{
+  "entries": [
+    "components/meal-plan-day/meal-plan-day.js",
+    "components/recipe-form/recipe-form.js",
+    "components/recipe-card/recipe-card.js",
+    "components/recipe-search-bar/recipe-search-bar.js",
+    "components/recipe-filter-bar/recipe-filter-bar.js",
+    "components/recipe-rating/recipe-rating.js",
+    "components/app-modal/app-modal.js",
+    "components/app-toast/app-toast.js"
+  ],
+  "mixins": [],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.44.0",
+    "typescriptVersion": "5.8.3"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/app-modal/app-modal.css

@@ -0,0 +1,12 @@
+:host { font-family: system-ui, sans-serif; }
+.overlay {
+  position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45);
+  display: flex; align-items: center; justify-content: center; z-index: 1000;
+}
+.dialog {
+  background: #fff; border-radius: 12px; min-width: 320px; max-width: 90vw;
+  max-height: 85vh; overflow-y: auto; padding: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.2);
+}
+.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
+.header h2 { margin: 0; font-size: 18px; }
+.close-btn { border: none; background: none; font-size: 16px; cursor: pointer; color: #666; }

package/dist/collection/components/app-modal/app-modal.js

@@ -0,0 +1,87 @@
+import { h } from "@stencil/core";
+/** Generic modal dialog. Body content is provided via the default slot. */
+export class AppModal {
+    constructor() {
+        this.open = false;
+        this.modalTitle = '';
+    }
+    render() {
+        if (!this.open)
+            return null;
+        return (h("div", { class: "dialog", onClick: (e) => e.stopPropagation() }, h("div", { class: "header" }, h("h2", null, this.modalTitle), h("button", { class: "close-btn", onClick: () => this.close.emit(), "aria-label": "Close" }, "\u2715")), h("div", { class: "body" }, h("slot", null))));
+    }
+    static get is() { return "app-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["app-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["app-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "modalTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "modal-title",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/app-toast/app-toast.css

@@ -0,0 +1,9 @@
+:host { font-family: system-ui, sans-serif; display: block; }
+.toast {
+  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
+  border-radius: 8px; color: #fff; font-size: 14px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+.toast.success { background: #2ecc71; }
+.toast.error { background: #e74c3c; }
+.toast.info { background: #3498db; }
+button { border: none; background: none; color: inherit; cursor: pointer; margin-left: auto; }

package/dist/collection/components/app-toast/app-toast.js

@@ -0,0 +1,111 @@
+import { h } from "@stencil/core";
+/** Simple notification toast. Auto-dismisses after `duration` ms if > 0. */
+export class AppToast {
+    constructor() {
+        this.message = '';
+        this.type = 'info';
+        this.duration = 3000;
+    }
+    componentDidLoad() {
+        if (this.duration > 0) {
+            setTimeout(() => this.dismiss.emit(), this.duration);
+        }
+    }
+    render() {
+        return (h("div", { key: 'd9dcb405ffd97bfa44fee10fe49103bd021938a2', class: `toast ${this.type}` }, h("span", { key: '5fd291b9766dc41189f49c11c836654d6663c8d1' }, this.message), h("button", { key: '9f93921f20b17520ce339378c5a1ca66ef6a04bc', onClick: () => this.dismiss.emit(), "aria-label": "Dismiss" }, "\u2715")));
+    }
+    static get is() { return "app-toast"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["app-toast.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["app-toast.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "message",
+                "defaultValue": "''"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'success' | 'error' | 'info'",
+                    "resolved": "\"error\" | \"info\" | \"success\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'info'"
+            },
+            "duration": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "duration",
+                "defaultValue": "3000"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dismiss",
+                "name": "dismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/meal-plan-day/meal-plan-day.css

@@ -0,0 +1,19 @@
+:host { display: block; font-family: system-ui, sans-serif; }
+.day-col {
+  border: 1px solid #eee; border-radius: 10px; padding: 10px; min-width: 150px;
+  display: flex; flex-direction: column; gap: 8px; background: #fafafa;
+}
+h3 { margin: 0; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: #555; }
+.meals { display: flex; flex-direction: column; gap: 6px; min-height: 40px; }
+.meal-chip {
+  display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid #eee;
+  border-radius: 8px; padding: 4px 6px; font-size: 12px;
+}
+.meal-chip img { width: 24px; height: 24px; border-radius: 4px; object-fit: cover; }
+.meal-chip .title { flex: 1; }
+.meal-chip button { border: none; background: none; cursor: pointer; color: #999; }
+.empty { font-size: 12px; color: #aaa; margin: 4px 0; }
+.add-btn {
+  border: 1px dashed #ccc; background: none; border-radius: 8px; padding: 6px;
+  font-size: 12px; cursor: pointer; color: #666;
+}

package/dist/collection/components/meal-plan-day/meal-plan-day.js

@@ -0,0 +1,111 @@
+import { h } from "@stencil/core";
+/**
+ * One column of the weekly meal planner, representing a single day.
+ * `meals` is the list of recipes currently assigned to this day.
+ * Emits `removeMeal` when a meal's remove button is clicked, and
+ * `assignMeal` when the "+ Add meal" button is clicked (the parent app
+ * is expected to open its own picker/modal and then update `meals`).
+ */
+export class MealPlanDay {
+    constructor() {
+        this.day = '';
+        this.meals = [];
+    }
+    render() {
+        const meals = Array.isArray(this.meals) ? this.meals : [];
+        return (h("div", { key: '7a0b592fd4b8d9971d7f4912cecb5f9126be11b3', class: "day-col" }, h("h3", { key: 'b0f1f6a717ad409e6339219ea2f71b73d73bb1f3' }, this.day), h("div", { key: '2c978721af3aad27042572dd7825d5f2b5b659fb', class: "meals" }, meals.map((m) => (h("div", { class: "meal-chip" }, m.image && h("img", { src: m.image, alt: m.title }), h("span", { class: "title" }, m.title), h("button", { onClick: () => this.removeMeal.emit({ day: this.day, mealId: m.id }), "aria-label": "Remove meal" }, "\u2715")))), meals.length === 0 && h("p", { key: '326b5f3201df2416f43debc7257918a60a6ab6dd', class: "empty" }, "No meals planned")), h("button", { key: '3532de633a1f6cb83bb70f91a2df8fe1a9fcbc14', class: "add-btn", onClick: () => this.assignMeal.emit({ day: this.day }) }, "+ Add meal")));
+    }
+    static get is() { return "meal-plan-day"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["meal-plan-day.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["meal-plan-day.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "day": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "day",
+                "defaultValue": "''"
+            },
+            "meals": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "PlannedMeal[]",
+                    "resolved": "PlannedMeal[]",
+                    "references": {
+                        "PlannedMeal": {
+                            "location": "local",
+                            "path": "C:/Users/gurpi/Downloads/recipe-finder-project/recipe-finder/packages/recipe-ui/src/components/meal-plan-day/meal-plan-day.tsx",
+                            "id": "src/components/meal-plan-day/meal-plan-day.tsx::PlannedMeal"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "[]"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "assignMeal",
+                "name": "assignMeal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ day: string }",
+                    "resolved": "{ day: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "removeMeal",
+                "name": "removeMeal",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ day: string; mealId: string }",
+                    "resolved": "{ day: string; mealId: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/recipe-card/recipe-card.css

@@ -0,0 +1,23 @@
+:host { display: block; font-family: system-ui, sans-serif; }
+.card {
+  border: 1px solid #e5e5e5;
+  border-radius: 12px;
+  overflow: hidden;
+  cursor: pointer;
+  background: #fff;
+  transition: box-shadow 0.15s ease, transform 0.15s ease;
+}
+.card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
+.image-wrap { position: relative; aspect-ratio: 4 / 3; background: #f2f2f2; }
+.image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #eee, #ddd); }
+.fav-btn {
+  position: absolute; top: 8px; right: 8px; border: none;
+  background: rgba(255, 255, 255, 0.9); border-radius: 50%;
+  width: 32px; height: 32px; font-size: 16px; cursor: pointer; color: #f5a623;
+}
+.fav-btn.active { color: #ff6b35; }
+.body { padding: 12px 14px; }
+h3 { margin: 0 0 4px; font-size: 15px; line-height: 1.3; }
+.category { font-size: 12px; color: #777; text-transform: uppercase; letter-spacing: 0.03em; }
+.actions { margin-top: 8px; }

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

@@ -0,0 +1,149 @@
+import { h } from "@stencil/core";
+/**
+ * Displays a summary of a recipe (image, title, category) inside a card.
+ * Emits `cardClick` when the card body is clicked and `favoriteToggle`
+ * when the favorite button is pressed. Accepts a named `actions` slot
+ * for extra buttons supplied by the consuming app.
+ */
+export class RecipeCard {
+    constructor() {
+        /** Category / cuisine label */
+        this.category = '';
+        /** Whether this recipe is currently favorited */
+        this.favorite = false;
+        this.onFavoriteClick = (e) => {
+            e.stopPropagation();
+            this.favoriteToggle.emit({ favorite: !this.favorite });
+        };
+    }
+    render() {
+        return (h("div", { key: 'abd19b1d63409b52cf66f348131f5f6f77bb47a6', class: "card", onClick: () => this.cardClick.emit() }, h("div", { key: '1292c3f6dfe7d3b399943004f764c41a3d072188', class: "image-wrap" }, this.image ? h("img", { src: this.image, alt: this.recipeTitle }) : h("div", { class: "placeholder" }), h("button", { key: '0efdc01af349d011ca0e11c4df5438b79876b467', class: { 'fav-btn': true, active: this.favorite }, onClick: this.onFavoriteClick, "aria-label": "Toggle favorite" }, this.favorite ? '★' : '☆')), h("div", { key: '66c2c4d845d9cc082c07f24f5d827313f6ad51c4', class: "body" }, h("h3", { key: '779fc629c3b97b6158f99440d9bb17fafb708dd3' }, this.recipeTitle), this.category && h("span", { key: '259ec599a43a5c8a279ad5993ba36f8602125b76', class: "category" }, this.category), h("div", { key: '58ab20f9682b4b73b7d027571496641cbfa76d0b', class: "actions" }, h("slot", { key: '28103422d993e58b133c2350e37c06fddf24300f', name: "actions" })))));
+    }
+    static get is() { return "recipe-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["recipe-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["recipe-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "recipeTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Recipe title (named recipeTitle, not title, to avoid colliding with\nthe native HTML title/tooltip attribute every element already has)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "recipe-title"
+            },
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Image URL"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image"
+            },
+            "category": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Category / cuisine label"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "category",
+                "defaultValue": "''"
+            },
+            "favorite": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this recipe is currently favorited"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "favorite",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "favoriteToggle",
+                "name": "favoriteToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the favorite button is toggled"
+                },
+                "complexType": {
+                    "original": "{ favorite: boolean }",
+                    "resolved": "{ favorite: boolean; }",
+                    "references": {}
+                }
+            }, {
+                "method": "cardClick",
+                "name": "cardClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the card (excluding the favorite button) is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/recipe-filter-bar/recipe-filter-bar.css

@@ -0,0 +1,7 @@
+:host { display: block; font-family: system-ui, sans-serif; }
+.wrap { display: flex; flex-wrap: wrap; gap: 8px; }
+.chip {
+  border: 1px solid #ddd; background: #fff; border-radius: 999px;
+  padding: 6px 14px; font-size: 13px; cursor: pointer; color: #444;
+}
+.chip.active { background: #ff6b35; border-color: #ff6b35; color: #fff; }