@ssejal8/recipe-ui-kit 0.1.0 → 0.1.1

package/dist/collection/components/rk-search-bar/rk-search-bar.js

@@ -0,0 +1,291 @@
+import { h, Host } from "@stencil/core";
+/**
+ * A debounced search input with a clear affordance and a slot for extra controls.
+ *
+ * @slot actions - Rendered to the right of the input, inside the field shell.
+ *                 Useful for a "filters" toggle or a sort control.
+ */
+export class RkSearchBar {
+    constructor() {
+        /** Current text in the field. Two-way: updated as the user types. */
+        this.value = '';
+        /** Placeholder shown when the field is empty. */
+        this.placeholder = 'Search recipes, ingredients, cuisines…';
+        /** Accessible label for the input. */
+        this.label = 'Search recipes';
+        /** Milliseconds to wait after the last keystroke before emitting `rkSearch`. */
+        this.debounce = 350;
+        /** Disables the whole control. */
+        this.disabled = false;
+        /** Shows a busy indicator (e.g. while the app is fetching results). */
+        this.loading = false;
+        this.focused = false;
+        this.handleInput = (event) => {
+            const next = event.target.value;
+            this.value = next;
+            clearTimeout(this.timer);
+            this.timer = setTimeout(() => this.emit(next), Math.max(0, this.debounce));
+        };
+        this.handleKeyDown = (event) => {
+            if (event.key === 'Enter') {
+                event.preventDefault();
+                this.emit(this.value);
+            }
+            else if (event.key === 'Escape' && this.value) {
+                event.preventDefault();
+                this.handleClear();
+            }
+        };
+        this.handleClear = () => {
+            clearTimeout(this.timer);
+            this.value = '';
+            if (this.inputEl)
+                this.inputEl.value = '';
+            this.rkClear.emit();
+            this.rkSearch.emit('');
+            this.inputEl?.focus();
+        };
+    }
+    onValueChange(next, prev) {
+        // Keep the DOM input in sync when the value is driven from the outside.
+        if (this.inputEl && this.inputEl.value !== next && next !== prev) {
+            this.inputEl.value = next ?? '';
+        }
+    }
+    disconnectedCallback() {
+        clearTimeout(this.timer);
+    }
+    /** Programmatically focus the input. */
+    async setFocus() {
+        this.inputEl?.focus();
+    }
+    emit(query) {
+        clearTimeout(this.timer);
+        this.rkSearch.emit(query.trim());
+    }
+    render() {
+        const hasValue = (this.value ?? '').length > 0;
+        return (h(Host, { key: 'cf58faf063a6c13bada8f5713f0dcbb582962577' }, h("div", { key: '13bdb192a7cb4fd699ffae8a9f67fba3e1a68c16', class: { shell: true, 'is-focused': this.focused, 'is-disabled': this.disabled }, part: "shell" }, h("span", { key: 'fe65bb803f4e3c01c1bf1eab66ab70658256820e', class: "icon", "aria-hidden": "true" }, h("svg", { key: 'a20ca316e086189ad00f8e9fed05cfa21c43fa10', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" }, h("circle", { key: '8298c51dc269224356a1e3248838e2ff8c20aab3', cx: "11", cy: "11", r: "7" }), h("path", { key: '92acd9c5a363ad4a9e9f14cbcf6b4ff86aae2bf2', d: "m20 20-3.5-3.5" }))), h("input", { key: '5fef80ea1e552630361556381dd09b62874334ca', ref: el => (this.inputEl = el), class: "input", part: "input", type: "search", value: this.value, placeholder: this.placeholder, "aria-label": this.label, "aria-busy": this.loading ? 'true' : 'false', disabled: this.disabled, autocomplete: "off", autocapitalize: "off", spellcheck: false, enterkeyhint: "search", onInput: this.handleInput, onKeyDown: this.handleKeyDown, onFocus: () => (this.focused = true), onBlur: () => (this.focused = false) }), this.loading && h("span", { key: '17c0e5483cc3bea79642192c6cb8548f32071f02', class: "spinner", part: "spinner", "aria-hidden": "true" }), hasValue && !this.loading && (h("button", { key: '7df966f93f1de6a1d3a380c4856f235a671521ad', class: "clear", part: "clear", type: "button", onClick: this.handleClear, "aria-label": "Clear search", disabled: this.disabled }, h("svg", { key: '29457188a630e71e4c29f93939edbcb28862cade', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "aria-hidden": "true" }, h("path", { key: '64406c87eaaa582151fdf5d1ee7929a6f311cc4c', d: "M6 6l12 12M18 6 6 18" })))), h("span", { key: '7abf5bd0cdb2d15b7143491c5de5216df872deff', class: "actions", part: "actions" }, h("slot", { key: '09fa60e54e72af6c9e7187f3406a11e80d5a3004', name: "actions" }))), this.hint && (h("p", { key: '1dd826505bcfc2cb5b7712adc18e7e29dc814f2b', class: "hint", part: "hint" }, this.hint))));
+    }
+    static get is() { return "rk-search-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rk-search-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rk-search-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Current text in the field. Two-way: updated as the user types."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Placeholder shown when the field is empty."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Search recipes, ingredients, cuisines\u2026'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Search recipes'"
+            },
+            "debounce": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Milliseconds to wait after the last keystroke before emitting `rkSearch`."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "debounce",
+                "defaultValue": "350"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disables the whole control."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Shows a busy indicator (e.g. while the app is fetching results)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "hint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional helper text rendered under the field."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "hint"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "focused": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rkSearch",
+                "name": "rkSearch",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the (trimmed) query after the debounce window, or on submit."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }, {
+                "method": "rkClear",
+                "name": "rkClear",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user clears the field with the clear button or Escape."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically focus the input.",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "onValueChange"
+            }];
+    }
+}
+//# sourceMappingURL=rk-search-bar.js.map

package/dist/collection/components/rk-search-bar/rk-search-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rk-search-bar.js","sourceRoot":"","sources":["../../../src/components/rk-search-bar/rk-search-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Host, Method, Prop, State, Watch } from '@stencil/core';\n\n/**\n * A debounced search input with a clear affordance and a slot for extra controls.\n *\n * @slot actions - Rendered to the right of the input, inside the field shell.\n *                 Useful for a \"filters\" toggle or a sort control.\n */\n@Component({\n  tag: 'rk-search-bar',\n  styleUrl: 'rk-search-bar.css',\n  shadow: true,\n})\nexport class RkSearchBar {\n  /** Current text in the field. Two-way: updated as the user types. */\n  @Prop({ mutable: true }) value = '';\n\n  /** Placeholder shown when the field is empty. */\n  @Prop() placeholder = 'Search recipes, ingredients, cuisines…';\n\n  /** Accessible label for the input. */\n  @Prop() label = 'Search recipes';\n\n  /** Milliseconds to wait after the last keystroke before emitting `rkSearch`. */\n  @Prop() debounce = 350;\n\n  /** Disables the whole control. */\n  @Prop() disabled = false;\n\n  /** Shows a busy indicator (e.g. while the app is fetching results). */\n  @Prop() loading = false;\n\n  /** Optional helper text rendered under the field. */\n  @Prop() hint?: string;\n\n  /** Emitted with the (trimmed) query after the debounce window, or on submit. */\n  @Event({ eventName: 'rkSearch' }) rkSearch!: EventEmitter<string>;\n\n  /** Emitted when the user clears the field with the clear button or Escape. */\n  @Event({ eventName: 'rkClear' }) rkClear!: EventEmitter<void>;\n\n  @State() private focused = false;\n\n  private inputEl?: HTMLInputElement;\n  private timer?: ReturnType<typeof setTimeout>;\n\n  @Watch('value')\n  protected onValueChange(next: string, prev: string) {\n    // Keep the DOM input in sync when the value is driven from the outside.\n    if (this.inputEl && this.inputEl.value !== next && next !== prev) {\n      this.inputEl.value = next ?? '';\n    }\n  }\n\n  disconnectedCallback() {\n    clearTimeout(this.timer);\n  }\n\n  /** Programmatically focus the input. */\n  @Method()\n  async setFocus() {\n    this.inputEl?.focus();\n  }\n\n  private emit(query: string) {\n    clearTimeout(this.timer);\n    this.rkSearch.emit(query.trim());\n  }\n\n  private handleInput = (event: Event) => {\n    const next = (event.target as HTMLInputElement).value;\n    this.value = next;\n    clearTimeout(this.timer);\n    this.timer = setTimeout(() => this.emit(next), Math.max(0, this.debounce));\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      this.emit(this.value);\n    } else if (event.key === 'Escape' && this.value) {\n      event.preventDefault();\n      this.handleClear();\n    }\n  };\n\n  private handleClear = () => {\n    clearTimeout(this.timer);\n    this.value = '';\n    if (this.inputEl) this.inputEl.value = '';\n    this.rkClear.emit();\n    this.rkSearch.emit('');\n    this.inputEl?.focus();\n  };\n\n  render() {\n    const hasValue = (this.value ?? '').length > 0;\n\n    return (\n      <Host>\n        <div class={{ shell: true, 'is-focused': this.focused, 'is-disabled': this.disabled }} part=\"shell\">\n        <span class=\"icon\" aria-hidden=\"true\">\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\">\n            <circle cx=\"11\" cy=\"11\" r=\"7\" />\n            <path d=\"m20 20-3.5-3.5\" />\n          </svg>\n        </span>\n\n        <input\n          ref={el => (this.inputEl = el)}\n          class=\"input\"\n          part=\"input\"\n          type=\"search\"\n          value={this.value}\n          placeholder={this.placeholder}\n          aria-label={this.label}\n          aria-busy={this.loading ? 'true' : 'false'}\n          disabled={this.disabled}\n          autocomplete=\"off\"\n          autocapitalize=\"off\"\n          spellcheck={false}\n          enterkeyhint=\"search\"\n          onInput={this.handleInput}\n          onKeyDown={this.handleKeyDown}\n          onFocus={() => (this.focused = true)}\n          onBlur={() => (this.focused = false)}\n        />\n\n        {this.loading && <span class=\"spinner\" part=\"spinner\" aria-hidden=\"true\" />}\n\n        {hasValue && !this.loading && (\n          <button class=\"clear\" part=\"clear\" type=\"button\" onClick={this.handleClear} aria-label=\"Clear search\" disabled={this.disabled}>\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\n          <span class=\"actions\" part=\"actions\">\n            <slot name=\"actions\" />\n          </span>\n        </div>\n\n        {this.hint && (\n          <p class=\"hint\" part=\"hint\">\n            {this.hint}\n          </p>\n        )}\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/rk-segmented-control/rk-segmented-control.js

@@ -0,0 +1,196 @@
+import { h } from "@stencil/core";
+/**
+ * A single-select segmented control, used for sorting and view switching.
+ *
+ * `options` is a complex property. Frameworks should assign it as a DOM
+ * property; for plain HTML it also accepts a JSON string attribute.
+ */
+export class RkSegmentedControl {
+    constructor() {
+        /** The available segments. Accepts an array or a JSON-encoded string. */
+        this.options = [];
+        /** Accessible label for the group. */
+        this.label = 'View options';
+        /** Stretches the control to fill its container. */
+        this.stretch = false;
+        this.parsed = [];
+        this.handleKeyDown = (event, index) => {
+            const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;
+            if (step === 0)
+                return;
+            event.preventDefault();
+            const items = this.parsed.filter(option => !option.disabled);
+            if (items.length === 0)
+                return;
+            const currentIndex = items.indexOf(this.parsed[index]);
+            const next = items[(currentIndex + step + items.length) % items.length];
+            this.select(next);
+        };
+    }
+    onOptionsChange() {
+        this.parseOptions();
+    }
+    componentWillLoad() {
+        this.parseOptions();
+    }
+    /**
+     * Attributes can only carry strings, so a JSON payload is accepted as a
+     * fallback for consumers that cannot set DOM properties.
+     */
+    parseOptions() {
+        if (Array.isArray(this.options)) {
+            this.parsed = this.options;
+            return;
+        }
+        if (typeof this.options === 'string' && this.options.trim()) {
+            try {
+                const decoded = JSON.parse(this.options);
+                this.parsed = Array.isArray(decoded) ? decoded : [];
+            }
+            catch {
+                console.warn('[rk-segmented-control] `options` is not valid JSON:', this.options);
+                this.parsed = [];
+            }
+            return;
+        }
+        this.parsed = [];
+    }
+    select(option) {
+        if (option.disabled || option.value === this.value)
+            return;
+        this.value = option.value;
+        this.rkSegmentChange.emit(option.value);
+    }
+    render() {
+        return (h("div", { key: 'e2b6eec632ebe51b9f259c60b174126de1a9521c', class: { group: true, 'is-stretch': this.stretch }, part: "group", role: "tablist", "aria-label": this.label }, this.parsed.map((option, index) => {
+            const selected = option.value === this.value;
+            return (h("button", { key: option.value, class: { segment: true, 'is-selected': selected }, part: selected ? 'segment segment-selected' : 'segment', type: "button", role: "tab", "aria-selected": String(selected), disabled: option.disabled, tabindex: selected ? 0 : -1, onClick: () => this.select(option), onKeyDown: event => this.handleKeyDown(event, index) }, option.label, typeof option.count === 'number' && h("span", { class: "count" }, option.count)));
+        })));
+    }
+    static get is() { return "rk-segmented-control"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["rk-segmented-control.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["rk-segmented-control.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RkSegmentOption[] | string",
+                    "resolved": "RkSegmentOption[] | string",
+                    "references": {
+                        "RkSegmentOption": {
+                            "location": "local",
+                            "path": "/Users/sejal.sharma/NAGP/recipe-ui/packages/recipe-ui-kit/src/components/rk-segmented-control/rk-segmented-control.tsx",
+                            "id": "src/components/rk-segmented-control/rk-segmented-control.tsx::RkSegmentOption"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The available segments. Accepts an array or a JSON-encoded string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "options",
+                "defaultValue": "[]"
+            },
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the selected segment."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "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": "'View options'"
+            },
+            "stretch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stretches the control to fill its container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "stretch",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "rkSegmentChange",
+                "name": "rkSegmentChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted with the newly selected value."
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "options",
+                "methodName": "onOptionsChange"
+            }];
+    }
+}
+//# sourceMappingURL=rk-segmented-control.js.map

package/dist/collection/components/rk-segmented-control/rk-segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rk-segmented-control.js","sourceRoot":"","sources":["../../../src/components/rk-segmented-control/rk-segmented-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\nexport interface RkSegmentOption {\n  label: string;\n  value: string;\n  /** Optional trailing count, e.g. number of items in that segment. */\n  count?: number;\n  disabled?: boolean;\n}\n\n/**\n * A single-select segmented control, used for sorting and view switching.\n *\n * `options` is a complex property. Frameworks should assign it as a DOM\n * property; for plain HTML it also accepts a JSON string attribute.\n */\n@Component({\n  tag: 'rk-segmented-control',\n  styleUrl: 'rk-segmented-control.css',\n  shadow: true,\n})\nexport class RkSegmentedControl {\n  /** The available segments. Accepts an array or a JSON-encoded string. */\n  @Prop() options: RkSegmentOption[] | string = [];\n\n  /** The value of the selected segment. */\n  @Prop({ mutable: true }) value?: string;\n\n  /** Accessible label for the group. */\n  @Prop() label = 'View options';\n\n  /** Stretches the control to fill its container. */\n  @Prop() stretch = false;\n\n  /** Emitted with the newly selected value. */\n  @Event({ eventName: 'rkSegmentChange' }) rkSegmentChange!: EventEmitter<string>;\n\n  private parsed: RkSegmentOption[] = [];\n\n  @Watch('options')\n  protected onOptionsChange() {\n    this.parseOptions();\n  }\n\n  componentWillLoad() {\n    this.parseOptions();\n  }\n\n  /**\n   * Attributes can only carry strings, so a JSON payload is accepted as a\n   * fallback for consumers that cannot set DOM properties.\n   */\n  private parseOptions() {\n    if (Array.isArray(this.options)) {\n      this.parsed = this.options;\n      return;\n    }\n    if (typeof this.options === 'string' && this.options.trim()) {\n      try {\n        const decoded = JSON.parse(this.options);\n        this.parsed = Array.isArray(decoded) ? decoded : [];\n      } catch {\n        console.warn('[rk-segmented-control] `options` is not valid JSON:', this.options);\n        this.parsed = [];\n      }\n      return;\n    }\n    this.parsed = [];\n  }\n\n  private select(option: RkSegmentOption) {\n    if (option.disabled || option.value === this.value) return;\n    this.value = option.value;\n    this.rkSegmentChange.emit(option.value);\n  }\n\n  private handleKeyDown = (event: KeyboardEvent, index: number) => {\n    const step = event.key === 'ArrowRight' ? 1 : event.key === 'ArrowLeft' ? -1 : 0;\n    if (step === 0) return;\n    event.preventDefault();\n\n    const items = this.parsed.filter(option => !option.disabled);\n    if (items.length === 0) return;\n    const currentIndex = items.indexOf(this.parsed[index]);\n    const next = items[(currentIndex + step + items.length) % items.length];\n    this.select(next);\n  };\n\n  render() {\n    return (\n      <div class={{ group: true, 'is-stretch': this.stretch }} part=\"group\" role=\"tablist\" aria-label={this.label}>\n        {this.parsed.map((option, index) => {\n          const selected = option.value === this.value;\n          return (\n            <button\n              key={option.value}\n              class={{ segment: true, 'is-selected': selected }}\n              part={selected ? 'segment segment-selected' : 'segment'}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={String(selected)}\n              disabled={option.disabled}\n              tabindex={selected ? 0 : -1}\n              onClick={() => this.select(option)}\n              onKeyDown={event => this.handleKeyDown(event, index)}\n            >\n              {option.label}\n              {typeof option.count === 'number' && <span class=\"count\">{option.count}</span>}\n            </button>\n          );\n        })}\n      </div>\n    );\n  }\n}\n"]}