@ssejal8/recipe-ui-kit 0.1.0

package/packages/recipe-kit-stencil/src/components/rk-modal/rk-modal.css

@@ -0,0 +1,163 @@
+:host {
+  font-family: var(--rk-font);
+  font-size: var(--rk-font-size, 15px);
+  color: var(--rk-ink, #211a16);
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--rk-z-modal, 1000);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  background: rgba(24, 17, 13, 0.5);
+  backdrop-filter: blur(3px);
+  animation: rk-fade-in 140ms ease-out;
+  overflow-y: auto;
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-height: calc(100vh - 40px);
+  background: var(--rk-surface, #fff);
+  border-radius: var(--rk-radius-lg, 20px);
+  box-shadow: var(--rk-shadow-lg);
+  overflow: hidden;
+  animation: rk-pop-in 180ms cubic-bezier(0.2, 0, 0.2, 1);
+}
+
+.panel:focus {
+  outline: none;
+}
+
+.size-sm {
+  max-width: 420px;
+}
+
+.size-md {
+  max-width: 620px;
+}
+
+.size-lg {
+  max-width: 880px;
+}
+
+.header {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 22px 24px 16px;
+  border-bottom: 1px solid var(--rk-border, #ecdfd4);
+  flex: 0 0 auto;
+}
+
+.titles {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.heading {
+  margin: 0;
+  font-family: var(--rk-font-display, serif);
+  font-size: 1.32em;
+  font-weight: 650;
+  letter-spacing: -0.015em;
+  line-height: 1.25;
+}
+
+.subheading {
+  margin: 5px 0 0;
+  font-size: 0.9em;
+  color: var(--rk-muted, #857166);
+  line-height: 1.5;
+}
+
+.close {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  padding: 0;
+  border: 0;
+  border-radius: 50%;
+  background: var(--rk-surface-2, #fdf5ef);
+  color: var(--rk-ink-2, #52443c);
+  cursor: pointer;
+  transition: background var(--rk-transition), color var(--rk-transition);
+}
+
+.close:hover {
+  background: var(--rk-danger-soft, #fdeae1);
+  color: var(--rk-danger, #c2410c);
+}
+
+.close:focus-visible {
+  outline: none;
+  box-shadow: var(--rk-focus-ring);
+}
+
+.close svg {
+  width: 16px;
+  height: 16px;
+}
+
+.body {
+  padding: 20px 24px;
+  overflow-y: auto;
+  flex: 1 1 auto;
+  line-height: 1.6;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px 24px;
+  border-top: 1px solid var(--rk-border, #ecdfd4);
+  background: var(--rk-surface-2, #fdf5ef);
+  flex: 0 0 auto;
+}
+
+.footer.is-empty {
+  display: none;
+}
+
+@keyframes rk-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
+@keyframes rk-pop-in {
+  from {
+    opacity: 0;
+    transform: translateY(12px) scale(0.98);
+  }
+}
+
+@media (max-width: 560px) {
+  .backdrop {
+    padding: 0;
+    align-items: flex-end;
+  }
+
+  .panel {
+    border-radius: var(--rk-radius-lg, 20px) var(--rk-radius-lg, 20px) 0 0;
+    max-height: 92vh;
+    max-width: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .backdrop,
+  .panel {
+    animation: none;
+  }
+}

package/packages/recipe-kit-stencil/src/components/rk-modal/rk-modal.tsx

@@ -0,0 +1,176 @@
+import { Component, Element, Event, EventEmitter, h, Host, Prop, State, Watch } from '@stencil/core';
+
+/**
+ * An accessible dialog with a backdrop, Escape handling and focus restoration.
+ *
+ * The component is presentational: it emits `rkModalClose` and lets the host
+ * application own the `open` state.
+ *
+ * @slot - Dialog body.
+ * @slot header - Replaces the default heading row entirely.
+ * @slot footer - Action row pinned to the bottom of the dialog.
+ */
+@Component({
+  tag: 'rk-modal',
+  styleUrl: 'rk-modal.css',
+  shadow: true,
+})
+export class RkModal {
+  @Element() host!: HTMLElement;
+
+  /** Controls visibility. */
+  @Prop() open = false;
+
+  /** Heading text for the default header. */
+  @Prop() heading = '';
+
+  /** Optional supporting line under the heading. */
+  @Prop() subheading?: string;
+
+  /** Dialog width preset. */
+  @Prop() size: 'sm' | 'md' | 'lg' = 'md';
+
+  /** Set to false to require an explicit action to dismiss. */
+  @Prop() dismissible = true;
+
+  /** Emitted when the user requests dismissal (X, backdrop or Escape). */
+  @Event({ eventName: 'rkModalClose' }) rkModalClose!: EventEmitter<void>;
+
+  @State() private hasFooter = false;
+
+  private previouslyFocused?: HTMLElement;
+  private panelEl?: HTMLElement;
+
+  /** Collapses the footer region when no action row was projected into it. */
+  private syncFooterSlot = () => {
+    this.hasFooter = Array.from(this.host.children).some(node => node.getAttribute('slot') === 'footer');
+  };
+
+  @Watch('open')
+  protected onOpenChange(isOpen: boolean, wasOpen: boolean) {
+    if (isOpen === wasOpen) return;
+
+    if (isOpen) {
+      this.previouslyFocused = document.activeElement as HTMLElement;
+      document.addEventListener('keydown', this.handleGlobalKeyDown);
+      this.lockScroll(true);
+      // Wait a frame so the panel exists before moving focus into it.
+      requestAnimationFrame(() => this.focusFirst());
+    } else {
+      document.removeEventListener('keydown', this.handleGlobalKeyDown);
+      this.lockScroll(false);
+      this.previouslyFocused?.focus?.();
+      this.previouslyFocused = undefined;
+    }
+  }
+
+  componentWillLoad() {
+    this.syncFooterSlot();
+  }
+
+  componentDidLoad() {
+    if (this.open) this.onOpenChange(true, false);
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener('keydown', this.handleGlobalKeyDown);
+    this.lockScroll(false);
+  }
+
+  private lockScroll(locked: boolean) {
+    if (typeof document === 'undefined') return;
+    document.documentElement.style.overflow = locked ? 'hidden' : '';
+  }
+
+  private focusableElements(): HTMLElement[] {
+    if (!this.panelEl) return [];
+    const selector = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
+    // Slotted content lives in the light DOM, so both trees have to be queried.
+    const inShadow = Array.from(this.panelEl.querySelectorAll<HTMLElement>(selector));
+    const inLight = Array.from(this.host.querySelectorAll<HTMLElement>(selector));
+    return [...inShadow, ...inLight].filter(el => el.offsetParent !== null || el === document.activeElement);
+  }
+
+  private focusFirst() {
+    const [first] = this.focusableElements();
+    (first ?? this.panelEl)?.focus?.();
+  }
+
+  private handleGlobalKeyDown = (event: KeyboardEvent) => {
+    if (!this.open) return;
+
+    if (event.key === 'Escape' && this.dismissible) {
+      event.preventDefault();
+      this.rkModalClose.emit();
+      return;
+    }
+
+    if (event.key === 'Tab') {
+      const focusable = this.focusableElements();
+      if (focusable.length === 0) return;
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      const active = (this.host.shadowRoot?.activeElement ?? document.activeElement) as HTMLElement;
+
+      if (event.shiftKey && active === first) {
+        event.preventDefault();
+        last.focus();
+      } else if (!event.shiftKey && active === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  };
+
+  private handleBackdrop = (event: MouseEvent) => {
+    if (!this.dismissible) return;
+    if (event.target === event.currentTarget) this.rkModalClose.emit();
+  };
+
+  render() {
+    if (!this.open) return <Host aria-hidden="true" />;
+
+    return (
+      <Host>
+        <div class="backdrop" part="backdrop" onClick={this.handleBackdrop}>
+          <div
+            class={{ panel: true, [`size-${this.size}`]: true }}
+            part="panel"
+            role="dialog"
+            aria-modal="true"
+            aria-label={this.heading || 'Dialog'}
+            tabindex={-1}
+            ref={el => (this.panelEl = el)}
+          >
+            <header class="header" part="header">
+              <slot name="header">
+                <div class="titles">
+                  <h2 class="heading" part="heading">
+                    {this.heading}
+                  </h2>
+                  {this.subheading && <p class="subheading">{this.subheading}</p>}
+                </div>
+              </slot>
+
+              {this.dismissible && (
+                <button class="close" part="close" type="button" aria-label="Close dialog" onClick={() => this.rkModalClose.emit()}>
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true">
+                    <path d="M6 6l12 12M18 6 6 18" />
+                  </svg>
+                </button>
+              )}
+            </header>
+
+            <div class="body" part="body">
+              <slot />
+            </div>
+
+            <footer class={{ footer: true, 'is-empty': !this.hasFooter }} part="footer">
+              <slot name="footer" onSlotchange={this.syncFooterSlot} />
+            </footer>
+          </div>
+        </div>
+      </Host>
+    );
+  }
+}

package/packages/recipe-kit-stencil/src/components/rk-rating/readme.md

@@ -0,0 +1,42 @@
+# rk-rating
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Overview
+
+A star rating that works as a read-only display or an interactive input.
+
+## Properties
+
+| Property    | Attribute    | Description                                             | Type      | Default     |
+| ----------- | ------------ | ------------------------------------------------------- | --------- | ----------- |
+| `count`     | `count`      | Optional count of ratings, rendered as "(24)".          | `number`  | `undefined` |
+| `label`     | `label`      | Accessible label for the group.                         | `string`  | `'Rating'`  |
+| `max`       | `max`        | Number of stars.                                        | `number`  | `5`         |
+| `readonly`  | `readonly`   | When true the stars are display-only and not focusable. | `boolean` | `false`     |
+| `showValue` | `show-value` | Renders the numeric value next to the stars.            | `boolean` | `false`     |
+| `size`      | `size`       | Star size in pixels.                                    | `number`  | `18`        |
+| `value`     | `value`      | Current rating. Supports halves when `readonly`.        | `number`  | `0`         |
+
+
+## Events
+
+| Event            | Description                               | Type                  |
+| ---------------- | ----------------------------------------- | --------------------- |
+| `rkRatingChange` | Emitted when the user picks a new rating. | `CustomEvent<number>` |
+
+
+## Shadow Parts
+
+| Part      | Description |
+| --------- | ----------- |
+| `"stars"` |             |
+| `"value"` |             |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/packages/recipe-kit-stencil/src/components/rk-rating/rk-rating.css

@@ -0,0 +1,71 @@
+:host {
+  display: inline-block;
+  font-family: var(--rk-font);
+  --rk-star-size: 18px;
+}
+
+.stars {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  border-radius: var(--rk-radius-sm, 8px);
+}
+
+.stars:not(.is-readonly) {
+  cursor: pointer;
+}
+
+.stars:focus-visible {
+  outline: none;
+  box-shadow: var(--rk-focus-ring);
+}
+
+.star-wrap {
+  display: inline-flex;
+  padding: 1px;
+  transition: transform var(--rk-transition);
+}
+
+.stars:not(.is-readonly) .star-wrap:hover {
+  transform: scale(1.15);
+}
+
+.star {
+  width: var(--rk-star-size);
+  height: var(--rk-star-size);
+  display: block;
+}
+
+.star-bg {
+  fill: none;
+  stroke: var(--rk-border-strong, #d9c6b8);
+  stroke-width: 1.6;
+}
+
+.star-fg {
+  fill: var(--rk-warning, #a16207);
+  stroke: var(--rk-warning, #a16207);
+  stroke-width: 1.2;
+}
+
+.value {
+  margin-left: 7px;
+  font-size: 0.85em;
+  font-weight: 600;
+  color: var(--rk-ink-2, #52443c);
+  font-variant-numeric: tabular-nums;
+}
+
+.count {
+  margin-left: 4px;
+  font-weight: 500;
+  color: var(--rk-muted, #857166);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .star-wrap,
+  .stars:not(.is-readonly) .star-wrap:hover {
+    transition: none;
+    transform: none;
+  }
+}

package/packages/recipe-kit-stencil/src/components/rk-rating/rk-rating.tsx

@@ -0,0 +1,114 @@
+import { Component, Event, EventEmitter, h, Host, Prop, State } from '@stencil/core';
+
+/**
+ * A star rating that works as a read-only display or an interactive input.
+ */
+@Component({
+  tag: 'rk-rating',
+  styleUrl: 'rk-rating.css',
+  shadow: true,
+})
+export class RkRating {
+  /** Current rating. Supports halves when `readonly`. */
+  @Prop({ mutable: true }) value = 0;
+
+  /** Number of stars. */
+  @Prop() max = 5;
+
+  /** When true the stars are display-only and not focusable. */
+  @Prop() readonly = false;
+
+  /** Star size in pixels. */
+  @Prop() size = 18;
+
+  /** Accessible label for the group. */
+  @Prop() label = 'Rating';
+
+  /** Renders the numeric value next to the stars. */
+  @Prop() showValue = false;
+
+  /** Optional count of ratings, rendered as "(24)". */
+  @Prop() count?: number;
+
+  /** Emitted when the user picks a new rating. */
+  @Event({ eventName: 'rkRatingChange' }) rkRatingChange!: EventEmitter<number>;
+
+  @State() private hovered = 0;
+
+  private select(next: number) {
+    if (this.readonly) return;
+    // Clicking the active star clears the rating, which is the usual affordance.
+    const resolved = next === this.value ? 0 : next;
+    this.value = resolved;
+    this.rkRatingChange.emit(resolved);
+  }
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    if (this.readonly) return;
+    const step = event.key === 'ArrowRight' || event.key === 'ArrowUp' ? 1 : event.key === 'ArrowLeft' || event.key === 'ArrowDown' ? -1 : 0;
+    if (step === 0) return;
+    event.preventDefault();
+    const next = Math.min(this.max, Math.max(0, Math.round(this.value) + step));
+    this.value = next;
+    this.rkRatingChange.emit(next);
+  };
+
+  render() {
+    const active = this.hovered || this.value;
+    const stars = Array.from({ length: Math.max(1, Math.round(this.max)) }, (_, index) => index + 1);
+
+    return (
+      <Host style={{ '--rk-star-size': `${this.size}px` }}>
+        <div
+          class={{ stars: true, 'is-readonly': this.readonly }}
+          part="stars"
+          role={this.readonly ? 'img' : 'slider'}
+          aria-label={`${this.label}: ${this.value} out of ${this.max}`}
+          aria-valuenow={this.readonly ? null : String(this.value)}
+          aria-valuemin={this.readonly ? null : '0'}
+          aria-valuemax={this.readonly ? null : String(this.max)}
+          tabindex={this.readonly ? null : 0}
+          onKeyDown={this.handleKeyDown}
+          onMouseLeave={() => (this.hovered = 0)}
+        >
+          {stars.map(star => {
+            // Fractional fill only matters in read-only display mode.
+            const fill = this.readonly ? Math.min(1, Math.max(0, this.value - (star - 1))) : star <= active ? 1 : 0;
+
+            return (
+              <span
+                class="star-wrap"
+                key={star}
+                onMouseEnter={() => !this.readonly && (this.hovered = star)}
+                onClick={() => this.select(star)}
+                aria-hidden="true"
+              >
+                <svg class="star" viewBox="0 0 24 24">
+                  <path
+                    class="star-bg"
+                    d="M12 2.6l2.86 5.98 6.54.87-4.8 4.5 1.2 6.45L12 17.3l-5.8 3.1 1.2-6.45-4.8-4.5 6.54-.87z"
+                  />
+                  <clipPath id={`clip-${star}`}>
+                    <rect x="0" y="0" width={24 * fill} height="24" />
+                  </clipPath>
+                  <path
+                    class="star-fg"
+                    clip-path={`url(#clip-${star})`}
+                    d="M12 2.6l2.86 5.98 6.54.87-4.8 4.5 1.2 6.45L12 17.3l-5.8 3.1 1.2-6.45-4.8-4.5 6.54-.87z"
+                  />
+                </svg>
+              </span>
+            );
+          })}
+
+          {this.showValue && (
+            <span class="value" part="value">
+              {this.value ? this.value.toFixed(1) : '—'}
+              {typeof this.count === 'number' && <span class="count">({this.count})</span>}
+            </span>
+          )}
+        </div>
+      </Host>
+    );
+  }
+}

package/packages/recipe-kit-stencil/src/components/rk-recipe-card/readme.md

@@ -0,0 +1,66 @@
+# rk-recipe-card
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Overview
+
+The primary recipe tile used across discovery, favorites and search results.
+
+All data arrives as individual primitive properties rather than one object
+prop, so the component works with plain HTML attributes in any framework.
+
+## Properties
+
+| Property                | Attribute       | Description                                                               | Type                | Default     |
+| ----------------------- | --------------- | ------------------------------------------------------------------------- | ------------------- | ----------- |
+| `area`                  | `area`          | Cuisine / region, e.g. "Italian".                                         | `string`            | `undefined` |
+| `category`              | `category`      | Category, e.g. "Dessert".                                                 | `string`            | `undefined` |
+| `compact`               | `compact`       | Renders a compact horizontal layout, for dense lists and the planner.     | `boolean`           | `false`     |
+| `favorite`              | `favorite`      | Whether this recipe is currently favorited.                               | `boolean`           | `false`     |
+| `hideFavorite`          | `hide-favorite` | Hides the favorite button entirely (e.g. inside the planner).             | `boolean`           | `false`     |
+| `href`                  | `href`          | Real href used for accessibility, SEO and middle-click / open-in-new-tab. | `string`            | `undefined` |
+| `image`                 | `image`         | Thumbnail URL.                                                            | `string`            | `undefined` |
+| `minutes`               | `minutes`       | Total time in minutes. Hidden when omitted.                               | `number`            | `undefined` |
+| `name`                  | `name`          | Recipe title.                                                             | `string`            | `''`        |
+| `origin`                | `origin`        | `custom` recipes are user-authored and get an "Owned" badge.              | `"api" \| "custom"` | `'api'`     |
+| `recipeId` _(required)_ | `recipe-id`     | Stable identifier echoed back in every event payload.                     | `string`            | `undefined` |
+| `servings`              | `servings`      | Number of servings. Hidden when omitted.                                  | `number`            | `undefined` |
+
+
+## Events
+
+| Event              | Description                                                          | Type                                    |
+| ------------------ | -------------------------------------------------------------------- | --------------------------------------- |
+| `rkCardSelect`     | Emitted on primary activation. The host app performs the navigation. | `CustomEvent<RkRecipeCardSelectDetail>` |
+| `rkFavoriteToggle` | Emitted when the favorite button is pressed.                         | `CustomEvent<RkFavoriteToggleDetail>`   |
+
+
+## Slots
+
+| Slot        | Description                                                      |
+| ----------- | ---------------------------------------------------------------- |
+|             | Extra metadata rendered under the title (badges, tags, ratings). |
+| `"actions"` | Buttons rendered in the card footer (e.g. "Add to plan").        |
+
+
+## Shadow Parts
+
+| Part                | Description |
+| ------------------- | ----------- |
+| `"body"`            |             |
+| `"card"`            |             |
+| `"extra"`           |             |
+| `"favorite-button"` |             |
+| `"footer"`          |             |
+| `"media"`           |             |
+| `"meta"`            |             |
+| `"owned-badge"`     |             |
+| `"title"`           |             |
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*