recipe-planner-ui 1.0.0

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

@@ -0,0 +1,196 @@
+import { Host, h } from "@stencil/core";
+const FOCUSABLE = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+/**
+ * A modal dialog with a focus trap.
+ *
+ * Escape and focus containment are handled here rather than left to consumers, because
+ * getting them wrong is the usual reason a hand-rolled modal is inaccessible.
+ *
+ * @slot - Dialog body.
+ * @slot footer - Action row pinned to the bottom, typically confirm and cancel.
+ */
+export class Modal {
+    el;
+    /** Whether the dialog is visible. */
+    open = false;
+    /** Dialog heading, also used as its accessible name. */
+    heading = '';
+    /** Fired when the user dismisses the dialog via Escape, the backdrop, or the close button. */
+    rpClose;
+    previouslyFocused = null;
+    onOpenChange(isOpen) {
+        if (isOpen) {
+            this.previouslyFocused = document.activeElement;
+            document.addEventListener('keydown', this.onKeydown);
+            // The dialog content renders in the same tick, so defer focus until it exists.
+            requestAnimationFrame(() => this.focusFirstField());
+        }
+        else {
+            document.removeEventListener('keydown', this.onKeydown);
+            this.previouslyFocused?.focus();
+            this.previouslyFocused = null;
+        }
+    }
+    componentDidLoad() {
+        // A dialog can be mounted already open, in which case @Watch never fires.
+        if (this.open)
+            this.onOpenChange(true);
+    }
+    disconnectedCallback() {
+        // Without this, every mount of a page containing a modal leaks a document listener.
+        document.removeEventListener('keydown', this.onKeydown);
+    }
+    /**
+     * Moves focus to the first focusable control inside the dialog.
+     *
+     * Exposed as a method because "move focus now" is a one-shot action with no state to
+     * represent; a prop would have to be toggled and reset to fire it twice.
+     */
+    async focusFirstField() {
+        const first = this.el.querySelector(FOCUSABLE);
+        first?.focus();
+    }
+    onKeydown = (event) => {
+        if (!this.open)
+            return;
+        if (event.key === 'Escape') {
+            event.preventDefault();
+            this.rpClose.emit();
+            return;
+        }
+        if (event.key === 'Tab')
+            this.trapFocus(event);
+    };
+    trapFocus(event) {
+        const focusable = Array.from(this.el.querySelectorAll(FOCUSABLE));
+        if (focusable.length === 0)
+            return;
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        const active = document.activeElement;
+        // Wrap in both directions so Tab never escapes the dialog into the page behind it.
+        if (event.shiftKey && active === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && active === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    }
+    onBackdropClick = (event) => {
+        if (event.target === event.currentTarget)
+            this.rpClose.emit();
+    };
+    render() {
+        if (!this.open)
+            return null;
+        return (h(Host, null, h("div", { class: "backdrop", onClick: this.onBackdropClick }, h("div", { class: "dialog", role: "dialog", "aria-modal": "true", "aria-label": this.heading }, h("header", { class: "head" }, h("h2", { class: "heading" }, this.heading), h("button", { type: "button", class: "close", onClick: () => this.rpClose.emit(), "aria-label": "Close dialog" }, "\u00D7")), h("div", { class: "body" }, h("slot", null)), h("footer", { class: "foot" }, h("slot", { name: "footer" }))))));
+    }
+    static get is() { return "rp-modal"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rp-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rp-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the dialog is visible."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dialog heading, also used as its accessible name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rpClose",
+                "name": "rpClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the user dismisses the dialog via Escape, the backdrop, or the close button."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "focusFirstField": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Moves focus to the first focusable control inside the dialog.\n\nExposed as a method because \"move focus now\" is a one-shot action with no state to\nrepresent; a prop would have to be toggled and reset to fire it twice.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+}

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

@@ -0,0 +1,106 @@
+:host {
+  display: block;
+  font-family: var(--rp-font-sans);
+  color: var(--rp-color-text);
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background: var(--rp-color-surface);
+  border: 1px solid var(--rp-color-border);
+  border-radius: var(--rp-radius-lg);
+  box-shadow: var(--rp-shadow-sm);
+}
+
+.media {
+  position: relative;
+  aspect-ratio: 4 / 3;
+  background: var(--rp-color-surface-sunken);
+}
+
+.media img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.media-fallback {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(135deg, var(--rp-color-surface-sunken), var(--rp-color-border));
+}
+
+.badges {
+  position: absolute;
+  inset-block-start: var(--rp-space-2);
+  inset-inline-start: var(--rp-space-2);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--rp-space-1);
+}
+
+.favorite {
+  position: absolute;
+  inset-block-start: var(--rp-space-2);
+  inset-inline-end: var(--rp-space-2);
+  display: grid;
+  place-items: center;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  cursor: pointer;
+  background: var(--rp-color-surface);
+  border: 1px solid var(--rp-color-border);
+  border-radius: 50%;
+  box-shadow: var(--rp-shadow-sm);
+}
+
+.favorite svg {
+  fill: none;
+  stroke: var(--rp-color-text-muted);
+  stroke-width: 1.8;
+}
+
+:host([favorite]) .favorite svg {
+  fill: var(--rp-color-favorite);
+  stroke: var(--rp-color-favorite);
+}
+
+.favorite:focus-visible {
+  outline: var(--rp-focus-ring);
+  outline-offset: var(--rp-focus-offset);
+}
+
+.body {
+  flex: 1;
+  padding: var(--rp-space-3) var(--rp-space-4);
+}
+
+.title {
+  margin: 0;
+  font-size: var(--rp-font-size-lg);
+  line-height: 1.3;
+}
+
+.category {
+  margin: var(--rp-space-1) 0 0;
+  font-size: var(--rp-font-size-sm);
+  color: var(--rp-color-text-muted);
+}
+
+.actions {
+  display: flex;
+  gap: var(--rp-space-2);
+  align-items: center;
+  padding: 0 var(--rp-space-4) var(--rp-space-4);
+}
+
+/* Collapse the footer when the consumer supplies no actions, so empty cards keep
+   their proportions instead of leaving a stray gap. */
+.actions:not(:has(*)) {
+  display: none;
+}

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

@@ -0,0 +1,170 @@
+import { Host, h } from "@stencil/core";
+/**
+ * A recipe summary tile.
+ *
+ * Takes only primitives, so it can be driven from plain HTML attributes with no
+ * framework present. It has no idea where a recipe comes from or what a route is —
+ * consumers inject navigation through the `actions` slot.
+ *
+ * @slot - Badges rendered over the image, such as a category or source marker.
+ * @slot actions - Controls rendered in the footer, typically links to view or edit.
+ */
+export class RecipeCard {
+    el;
+    /** Identifier echoed back in the toggle event so consumers know which card fired. */
+    recipeId;
+    /**
+     * Recipe name, rendered as the card heading.
+     *
+     * Named `recipeTitle` rather than `title` because every HTMLElement already defines
+     * `title` on its prototype; shadowing it produces inconsistent behaviour across browsers.
+     */
+    recipeTitle;
+    /** Absolute URL of the recipe image. */
+    image;
+    /** Category label shown under the heading. */
+    category;
+    /** Whether this recipe is currently a favorite. Reflected for CSS hooks. */
+    favorite = false;
+    /** Fired when the favorite control is activated. */
+    rpFavoriteToggle;
+    toggleFavorite = () => {
+        // Emits the intended next state. The consumer owns the data and decides whether
+        // the change is applied, so this component never writes to its own prop.
+        this.rpFavoriteToggle.emit({ recipeId: this.recipeId, favorite: !this.favorite });
+    };
+    render() {
+        return (h(Host, { key: '7ac4bd65a2fa94815db81c986d17e3dff768334f' }, h("article", { key: 'b8ab03b01a7305ebac8fa8c7a512cf670afbd7c9', class: "card" }, h("div", { key: 'ddd9892bf42ed7fdd1300d439449ac4c471f11e3', class: "media" }, this.image ? (h("img", { src: this.image, alt: "", loading: "lazy", width: "320", height: "240" })) : (h("div", { class: "media-fallback", "aria-hidden": "true" })), h("div", { key: '211b2f1621e96b2350ff17598094790809c6fe81', class: "badges" }, h("slot", { key: 'ab834b8c4ff5c643c35d4f29c7bc9ddab5886e44' })), h("button", { key: '67d76da1db3b7d867d64042260cb69b30ea9fa2f', type: "button", class: "favorite", onClick: this.toggleFavorite, "aria-pressed": String(this.favorite), "aria-label": this.favorite ? `Remove ${this.recipeTitle} from favorites` : `Add ${this.recipeTitle} to favorites` }, h("svg", { key: 'ad94f74c83aba86af030d380d02ca331bf1edd66', viewBox: "0 0 24 24", width: "20", height: "20", "aria-hidden": "true" }, h("path", { key: 'cec837ac8a9e440730ed83f5746fba9833722d43', d: "M12 21s-7.5-4.7-9.3-9A5.2 5.2 0 0 1 12 6.5 5.2 5.2 0 0 1 21.3 12c-1.8 4.3-9.3 9-9.3 9z" })))), h("div", { key: '57e619602fb97b1197d1391e1bca37059fad4750', class: "body" }, h("h3", { key: '1576688c8d62e883132bb25f7f4f0832e7e102c2', class: "title" }, this.recipeTitle), this.category && h("p", { key: 'ca58ac4811bf94d13761ac0fd3fdd63a4b35c057', class: "category" }, this.category)), h("div", { key: 'fe7531c32eb5b110fe5aea2c4680a020848633bd', class: "actions" }, h("slot", { key: 'daf97a1324f3d2d08d1900d057cab1968be8c9d7', name: "actions" })))));
+    }
+    static get is() { return "rp-recipe-card"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rp-recipe-card.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rp-recipe-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "recipeId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Identifier echoed back in the toggle event so consumers know which card fired."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "recipe-id"
+            },
+            "recipeTitle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Recipe name, rendered as the card heading.\n\nNamed `recipeTitle` rather than `title` because every HTMLElement already defines\n`title` on its prototype; shadowing it produces inconsistent behaviour across browsers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "recipe-title"
+            },
+            "image": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Absolute URL of the recipe image."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "image"
+            },
+            "category": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Category label shown under the heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "category"
+            },
+            "favorite": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this recipe is currently a favorite. Reflected for CSS hooks."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "favorite",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rpFavoriteToggle",
+                "name": "rpFavoriteToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Fired when the favorite control is activated."
+                },
+                "complexType": {
+                    "original": "{ recipeId: string; favorite: boolean }",
+                    "resolved": "{ recipeId: string; favorite: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}

package/dist/collection/components/rp-search-bar/rp-search-bar.css

@@ -0,0 +1,65 @@
+:host {
+  display: block;
+  font-family: var(--rp-font-sans);
+}
+
+.bar {
+  display: flex;
+  gap: var(--rp-space-2);
+  align-items: center;
+}
+
+.field {
+  flex: 1;
+  min-width: 0;
+  padding: var(--rp-space-2) var(--rp-space-3);
+  font: inherit;
+  font-size: var(--rp-font-size-md);
+  color: var(--rp-color-text);
+  background: var(--rp-color-surface);
+  border: 1px solid var(--rp-color-border);
+  border-radius: var(--rp-radius-md);
+}
+
+/* The native clear affordance would sit beside our own button. */
+.field::-webkit-search-cancel-button {
+  display: none;
+}
+
+.field:focus-visible,
+.submit:focus-visible,
+.clear:focus-visible {
+  outline: var(--rp-focus-ring);
+  outline-offset: var(--rp-focus-offset);
+}
+
+.clear {
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  font-size: 1.25rem;
+  line-height: 1;
+  color: var(--rp-color-text-muted);
+  cursor: pointer;
+  background: none;
+  border: none;
+  border-radius: 50%;
+}
+
+.clear:hover {
+  background: var(--rp-color-surface-sunken);
+}
+
+.submit {
+  padding: var(--rp-space-2) var(--rp-space-4);
+  font: inherit;
+  font-size: var(--rp-font-size-md);
+  font-weight: 600;
+  color: var(--rp-color-accent-contrast);
+  cursor: pointer;
+  background: var(--rp-color-accent);
+  border: none;
+  border-radius: var(--rp-radius-md);
+}