@ssejal8/recipe-ui-kit 0.1.0 → 0.1.1

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

@@ -0,0 +1,256 @@
+import { h, Host } 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.
+ */
+export class RkModal {
+    constructor() {
+        /** Controls visibility. */
+        this.open = false;
+        /** Heading text for the default header. */
+        this.heading = '';
+        /** Dialog width preset. */
+        this.size = 'md';
+        /** Set to false to require an explicit action to dismiss. */
+        this.dismissible = true;
+        this.hasFooter = false;
+        /** Collapses the footer region when no action row was projected into it. */
+        this.syncFooterSlot = () => {
+            this.hasFooter = Array.from(this.host.children).some(node => node.getAttribute('slot') === 'footer');
+        };
+        this.handleGlobalKeyDown = (event) => {
+            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);
+                if (event.shiftKey && active === first) {
+                    event.preventDefault();
+                    last.focus();
+                }
+                else if (!event.shiftKey && active === last) {
+                    event.preventDefault();
+                    first.focus();
+                }
+            }
+        };
+        this.handleBackdrop = (event) => {
+            if (!this.dismissible)
+                return;
+            if (event.target === event.currentTarget)
+                this.rkModalClose.emit();
+        };
+    }
+    onOpenChange(isOpen, wasOpen) {
+        if (isOpen === wasOpen)
+            return;
+        if (isOpen) {
+            this.previouslyFocused = document.activeElement;
+            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);
+    }
+    lockScroll(locked) {
+        if (typeof document === 'undefined')
+            return;
+        document.documentElement.style.overflow = locked ? 'hidden' : '';
+    }
+    focusableElements() {
+        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(selector));
+        const inLight = Array.from(this.host.querySelectorAll(selector));
+        return [...inShadow, ...inLight].filter(el => el.offsetParent !== null || el === document.activeElement);
+    }
+    focusFirst() {
+        const [first] = this.focusableElements();
+        (first ?? this.panelEl)?.focus?.();
+    }
+    render() {
+        if (!this.open)
+            return h(Host, { "aria-hidden": "true" });
+        return (h(Host, null, h("div", { class: "backdrop", part: "backdrop", onClick: this.handleBackdrop }, h("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) }, h("header", { class: "header", part: "header" }, h("slot", { name: "header" }, h("div", { class: "titles" }, h("h2", { class: "heading", part: "heading" }, this.heading), this.subheading && h("p", { class: "subheading" }, this.subheading))), this.dismissible && (h("button", { class: "close", part: "close", type: "button", "aria-label": "Close dialog", onClick: () => this.rkModalClose.emit() }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { d: "M6 6l12 12M18 6 6 18" }))))), h("div", { class: "body", part: "body" }, h("slot", null)), h("footer", { class: { footer: true, 'is-empty': !this.hasFooter }, part: "footer" }, h("slot", { name: "footer", onSlotchange: this.syncFooterSlot }))))));
+    }
+    static get is() { return "rk-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rk-modal.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rk-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls visibility."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open",
+                "defaultValue": "false"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading text for the default header."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading",
+                "defaultValue": "''"
+            },
+            "subheading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional supporting line under the heading."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "subheading"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Dialog width preset."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to false to require an explicit action to dismiss."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasFooter": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rkModalClose",
+                "name": "rkModalClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user requests dismissal (X, backdrop or Escape)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "onOpenChange"
+            }];
+    }
+}
+//# sourceMappingURL=rk-modal.js.map

package/dist/collection/components/rk-modal/rk-modal.js.map

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

package/dist/collection/components/rk-rating/rk-rating.js

@@ -0,0 +1,228 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A star rating that works as a read-only display or an interactive input.
+ */
+export class RkRating {
+    constructor() {
+        /** Current rating. Supports halves when `readonly`. */
+        this.value = 0;
+        /** Number of stars. */
+        this.max = 5;
+        /** When true the stars are display-only and not focusable. */
+        this.readonly = false;
+        /** Star size in pixels. */
+        this.size = 18;
+        /** Accessible label for the group. */
+        this.label = 'Rating';
+        /** Renders the numeric value next to the stars. */
+        this.showValue = false;
+        this.hovered = 0;
+        this.handleKeyDown = (event) => {
+            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);
+        };
+    }
+    select(next) {
+        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);
+    }
+    render() {
+        const active = this.hovered || this.value;
+        const stars = Array.from({ length: Math.max(1, Math.round(this.max)) }, (_, index) => index + 1);
+        return (h(Host, { key: '2147d57f9887cec317ac42156632a11a92d031bd', style: { '--rk-star-size': `${this.size}px` } }, h("div", { key: '8b6ed7883e64adbebb6cb00166ef1dc3e63d8b6f', 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 (h("span", { class: "star-wrap", key: star, onMouseEnter: () => !this.readonly && (this.hovered = star), onClick: () => this.select(star), "aria-hidden": "true" }, h("svg", { class: "star", viewBox: "0 0 24 24" }, h("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" }), h("clipPath", { id: `clip-${star}` }, h("rect", { x: "0", y: "0", width: 24 * fill, height: "24" })), h("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" }))));
+        }), this.showValue && (h("span", { key: '0f3fd486aca3d9c05df656e723eeb6a30a7469c2', class: "value", part: "value" }, this.value ? this.value.toFixed(1) : '—', typeof this.count === 'number' && h("span", { key: '40a193f04a145644556dad621fcc3ee65fb101b3', class: "count" }, "(", this.count, ")"))))));
+    }
+    static get is() { return "rk-rating"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rk-rating.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rk-rating.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "number",
+                "mutable": true,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current rating. Supports halves when `readonly`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Number of stars."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max",
+                "defaultValue": "5"
+            },
+            "readonly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true the stars are display-only and not focusable."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "readonly",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Star size in pixels."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "18"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the group."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Rating'"
+            },
+            "showValue": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the numeric value next to the stars."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-value",
+                "defaultValue": "false"
+            },
+            "count": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional count of ratings, rendered as \"(24)\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "count"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hovered": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rkRatingChange",
+                "name": "rkRatingChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user picks a new rating."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=rk-rating.js.map

package/dist/collection/components/rk-rating/rk-rating.js.map

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