@postnord/pn-marketweb-components 4.3.6 → 4.3.7

package/umd/modules/@postnord/web-components/collection/components/input/pn-search-field/pn-search-field.css

@@ -15,10 +15,13 @@ pn-search-field .pn-search-field-container {
   position: relative;
 }
 pn-search-field .pn-search-field-input {
+  min-height: 3em;
+  height: 100%;
+  width: 100%;
   color: #2d2013;
   background-color: #ffffff;
   border: 0.0625em solid #969087;
-  border-radius: 0.5em;
+  border-radius: 3em;
   padding: 0.75em;
   font-family: inherit;
   font-size: 1em;
@@ -63,14 +66,8 @@ pn-search-field .pn-search-field-input:disabled {
   background-color: #f3f2f2;
   border-color: #f3f2f2;
 }
-pn-search-field .pn-search-field-input {
-  min-height: 3em;
-  height: 100%;
-  width: 100%;
-  border-radius: 3em;
-}
-pn-search-field .pn-search-field-input::-webkit-search-cancel-button {
-  display: none;
+pn-search-field .pn-search-field-input::-webkit-calendar-picker-indicator, pn-search-field .pn-search-field-input::-webkit-search-cancel-button, pn-search-field .pn-search-field-input::-webkit-search-decoration {
+  display: none !important;
 }
 pn-search-field .pn-search-field-inline {
   pointer-events: none;

package/umd/modules/@postnord/web-components/collection/components/input/pn-search-field/pn-search-field.js

@@ -14,29 +14,26 @@ import { translations } from "./translations";
  */
 export class PnSearchField {
     id = `pn-search-field-${uuidv4()}`;
-    searchElement;
     hostElement;
     /** Provide an aria-label for the search field. */
     label;
-    /** Set the value of the search field. */
+    /** Override the pntopbar language. */
+    language = undefined;
+    /** Set the value of the search field. @category Native attributes */
     value = '';
-    /** Set a search field placeholder. This is no replacement for a `label`. */
-    placeholder;
-    /** Set a unique ID for the search input. */
-    searchid = this.id;
-    /** Set HTML name of the search input. */
+    /** Set HTML name of the search input. @category Native attributes */
     name;
-    /** Allow the browser to autocomplete the search field. */
+    /** Set a search field placeholder. @category Native attributes */
+    placeholder;
+    /** Allow the browser to autocomplete the search field. @category Native attributes */
     autocomplete;
-    /** Point to a datalist element with this id. */
+    /** Point to a datalist element with this id. @category Native attributes */
     list;
-    /** Override the pntopbar language. */
-    language = null;
-    /** Disable the search field. @category State */
-    disabled = false;
-    /** Set the search field as required. @category State */
+    /** Set the search field as required. @category Native attributes */
     required = false;
-    /** Display loading animation. @category State */
+    /** Disable the search field. @category Native attributes */
+    disabled = false;
+    /** Display loading animation. @category Features */
     loading = false;
     /**
      * Button variant changes the visual of the search field:
@@ -47,20 +44,31 @@ export class PnSearchField {
      *
      * @since v7.18.0: Use `''`, `simple`, `auto` or `jumbo`.
      *
-     * @category Button
+     * @category Features
      */
     button = '';
-    /** Label for the button element. @category Button */
+    /** Label for the button element. @category Features */
     buttonLabel;
-    /** Add a tooltip to the search button. @category Button */
+    /** Add a tooltip to the search button. @category Features */
     buttonTooltip;
     /**
      * Light instead of dark search button.
      *
      * @deprecated The color is now set automatically based on the button prop.
-     * @category Button
+     * @category Features
      */
     buttonLight = false;
+    /** Set a custom ID for the search input. @since v7.25.0 @category HTML attributes */
+    pnId;
+    /**
+     * Provide the label from another element via its ID.
+     * We strongly recommend you use the `label` prop instead.
+     * @since v7.25.0
+     * @category HTML attributes
+     */
+    pnAriaLabelledby;
+    /** Set a unique ID for the search input. @deprecated Use `pn-id` instead. @category HTML attributes  */
+    searchid;
     /** This is emitted on search submission both with keyboard and mouse. */
     search;
     /** Custom event that handles both clearing and input to have the option of just binding listeners to one event instead of two. */
@@ -69,9 +77,12 @@ export class PnSearchField {
         this.update.emit(this.value);
     }
     async componentWillLoad() {
-        if (this.language === null)
+        if (this.language === undefined)
             await awaitTopbar(this.hostElement);
     }
+    getId() {
+        return this.pnId || this.searchid || this.id;
+    }
     translate(prop) {
         return translations?.[prop]?.[this.language || en];
     }
@@ -91,6 +102,12 @@ export class PnSearchField {
         this.update.emit(this.value);
         this.hostElement.querySelector('input').focus();
     }
+    displayLabel() {
+        return !!this.label;
+    }
+    getAriaLabelledby() {
+        return !this.displayLabel() ? this.pnAriaLabelledby : null;
+    }
     getButtonLabel() {
         return this.buttonLabel || this.translate('SEARCH');
     }
@@ -112,7 +129,7 @@ export class PnSearchField {
         return this.searchSimple() ? 'outlined' : null;
     }
     render() {
-        return (h(Host, { key: 'd6e76c457e99f83b3d47a4b0c951168c6b5fc086' }, h("div", { key: '203055449e80dfd9bf19d94f340e4081d358a7b5', class: "pn-search-field", "data-inline": this.searchAuto(), "data-loading": this.loading, "data-searching": !!this.value, "data-jumbo": this.searchJumbo() }, h("div", { key: 'bb86197c5f7e88c162eac8c899557bb5941ed6c6', class: "pn-search-field-container" }, h("input", { key: 'ba497f96d2afd9554e842010edf8cef656a994fc', class: "pn-search-field-input", type: "search", value: this.value, id: this.searchid, name: this.name, "aria-label": this.label, placeholder: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: this.autocomplete, list: this.list, ref: el => (this.searchElement = el), onKeyDown: e => this.emitSearch({ button: e }), onInput: e => this.setVal(e) }), h("div", { key: 'bd11b1ec64b10dbc3b93fd0bcc163d5d120766cf', class: "pn-search-field-inline" }, this.searchAuto() && (h("pn-button", { key: 'c8961cb53609cc7d290b528af7e23a363a348833', class: "pn-search-field-button", type: "button", appearance: "light", small: true, icon: search, iconOnly: true, arialabel: this.getButtonLabel(), noTab: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })), !this.disabled && (h("pn-button", { key: '45197b884106304f5e3a4dc66b58333d8b79d4cb', small: true, class: "pn-search-field-clear", type: "button", appearance: "light", icon: close_small, iconOnly: true, arialabel: this.translate('CLEAR'), noTab: !this.value || this.loading, onPnClick: () => this.clearInput() })), this.searchAuto() && h("pn-spinner", { key: 'f681e4d08d66c9658f09b9cd947b70e4cd0f0837', class: "pn-search-field-spinner" }))), !this.searchAuto() && (h("pn-button", { key: '8498355d5d49c64755c58ce4d599938e3e25c84b', class: "pn-search-field-submit", label: this.getButtonLabel(), tooltip: this.buttonTooltip, appearance: this.searchButtonAppearance(), variant: this.searchButtonVariant(), icon: search, iconOnly: this.searchSimple() || this.searchJumbo(), arialabel: this.searchSimple() || this.searchJumbo() ? this.getButtonLabel() : null, loading: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })))));
+        return (h(Host, { key: '5ffa0c58cd54c1a6588147e5ec9a72e0045e16aa' }, h("div", { key: 'd18a2bdaef46229ff87fe1612d39489443fd70cc', class: "pn-search-field", "data-inline": this.searchAuto(), "data-loading": this.loading, "data-searching": !!this.value, "data-jumbo": this.searchJumbo() }, h("div", { key: '1a7c9e872e0c7696f0d1d84a3420eade2b1cd2ed', class: "pn-search-field-container" }, h("input", { key: '3ff3e9809123283f66ea933f7bc9fb5a92489e51', class: "pn-search-field-input", id: this.getId(), type: "search", value: this.value, name: this.name, placeholder: this.placeholder, autocomplete: this.autocomplete, list: this.list, required: this.required, disabled: this.disabled, "aria-label": this.label, "aria-labelledby": this.getAriaLabelledby(), onKeyDown: e => this.emitSearch({ button: e }), onInput: e => this.setVal(e) }), h("div", { key: 'eeb6d382c93f98da5561b30219ef829c668eab54', class: "pn-search-field-inline" }, this.searchAuto() && (h("pn-button", { key: '65d7049753656a7f4bce29e7e8c99305e99f15e2', class: "pn-search-field-button", type: "button", appearance: "light", small: true, icon: search, iconOnly: true, arialabel: this.getButtonLabel(), noTab: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })), !this.disabled && (h("pn-button", { key: '58bae5e2fc05c66cee21081e71904530ca75a0b9', small: true, class: "pn-search-field-clear", type: "button", appearance: "light", icon: close_small, iconOnly: true, arialabel: this.translate('CLEAR'), noTab: !this.value || this.loading, onPnClick: () => this.clearInput() })), this.searchAuto() && h("pn-spinner", { key: 'd3955278766f786897eb0024c7523179a2ad78c4', class: "pn-search-field-spinner" }))), !this.searchAuto() && (h("pn-button", { key: 'fd46d299cfd9600e671e827daa4a00675a6bd25b', class: "pn-search-field-submit", label: this.getButtonLabel(), tooltip: this.buttonTooltip, appearance: this.searchButtonAppearance(), variant: this.searchButtonVariant(), icon: search, iconOnly: this.searchSimple() || this.searchJumbo(), arialabel: this.searchSimple() || this.searchJumbo() ? this.getButtonLabel() : null, loading: this.loading, onPnClick: e => this.emitSearch({ click: e.detail }) })))));
     }
     static get is() { return "pn-search-field"; }
     static get originalStyleUrls() {
@@ -135,8 +152,8 @@ export class PnSearchField {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Provide an aria-label for the search field."
@@ -146,46 +163,57 @@ export class PnSearchField {
                 "reflect": false,
                 "attribute": "label"
             },
-            "value": {
+            "language": {
                 "type": "string",
-                "mutable": true,
+                "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "PnLanguages",
+                    "resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
+                    "references": {
+                        "PnLanguages": {
+                            "location": "import",
+                            "path": "@/globals/types",
+                            "id": "src/globals/types.ts::PnLanguages",
+                            "referenceLocation": "PnLanguages"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Set the value of the search field."
+                    "text": "Override the pntopbar language."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "value",
-                "defaultValue": "''"
+                "attribute": "language",
+                "defaultValue": "undefined"
             },
-            "placeholder": {
+            "value": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "Set a search field placeholder. This is no replacement for a `label`."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Set the value of the search field."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "placeholder"
+                "attribute": "value",
+                "defaultValue": "''"
             },
-            "searchid": {
+            "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -194,18 +222,20 @@ export class PnSearchField {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Set a unique ID for the search input."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Set HTML name of the search input."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "searchid",
-                "defaultValue": "this.id"
+                "attribute": "name"
             },
-            "name": {
+            "placeholder": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -216,13 +246,16 @@ export class PnSearchField {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Set HTML name of the search input."
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
+                    "text": "Set a search field placeholder."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "name"
+                "attribute": "placeholder"
             },
             "autocomplete": {
                 "type": "string",
@@ -235,7 +268,10 @@ export class PnSearchField {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
                     "text": "Allow the browser to autocomplete the search field."
                 },
                 "getter": false,
@@ -254,7 +290,10 @@ export class PnSearchField {
                 "required": false,
                 "optional": true,
                 "docs": {
-                    "tags": [],
+                    "tags": [{
+                            "name": "category",
+                            "text": "Native attributes"
+                        }],
                     "text": "Point to a datalist element with this id."
                 },
                 "getter": false,
@@ -262,34 +301,7 @@ export class PnSearchField {
                 "reflect": false,
                 "attribute": "list"
             },
-            "language": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "PnLanguages",
-                    "resolved": "\"\" | \"da\" | \"en\" | \"fi\" | \"no\" | \"sv\"",
-                    "references": {
-                        "PnLanguages": {
-                            "location": "import",
-                            "path": "@/globals/types",
-                            "id": "src/globals/types.ts::PnLanguages",
-                            "referenceLocation": "PnLanguages"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Override the pntopbar language."
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "language",
-                "defaultValue": "null"
-            },
-            "disabled": {
+            "required": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -302,17 +314,17 @@ export class PnSearchField {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "State"
+                            "text": "Native attributes"
                         }],
-                    "text": "Disable the search field."
+                    "text": "Set the search field as required."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "disabled",
+                "attribute": "required",
                 "defaultValue": "false"
             },
-            "required": {
+            "disabled": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -325,14 +337,14 @@ export class PnSearchField {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "State"
+                            "text": "Native attributes"
                         }],
-                    "text": "Set the search field as required."
+                    "text": "Disable the search field."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "required",
+                "attribute": "disabled",
                 "defaultValue": "false"
             },
             "loading": {
@@ -348,7 +360,7 @@ export class PnSearchField {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "State"
+                            "text": "Features"
                         }],
                     "text": "Display loading animation."
                 },
@@ -381,7 +393,7 @@ export class PnSearchField {
                             "text": "v7.18.0: Use `''`, `simple`, `auto` or `jumbo`."
                         }, {
                             "name": "category",
-                            "text": "Button"
+                            "text": "Features"
                         }],
                     "text": "Button variant changes the visual of the search field:\n- `''` Standard with a blue button.\n- `simple` | ~~`icon`~~ with simple white icon only button.\n- `auto` |\u00A0~~`icon-inline`~~ | ~~`none`~~ with a white inline search button.\n- `jumbo` with a larger blue icon only button."
                 },
@@ -404,7 +416,7 @@ export class PnSearchField {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "Button"
+                            "text": "Features"
                         }],
                     "text": "Label for the button element."
                 },
@@ -426,7 +438,7 @@ export class PnSearchField {
                 "docs": {
                     "tags": [{
                             "name": "category",
-                            "text": "Button"
+                            "text": "Features"
                         }],
                     "text": "Add a tooltip to the search button."
                 },
@@ -451,7 +463,7 @@ export class PnSearchField {
                             "text": "The color is now set automatically based on the button prop."
                         }, {
                             "name": "category",
-                            "text": "Button"
+                            "text": "Features"
                         }],
                     "text": "Light instead of dark search button."
                 },
@@ -460,6 +472,81 @@ export class PnSearchField {
                 "reflect": false,
                 "attribute": "button-light",
                 "defaultValue": "false"
+            },
+            "pnId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Set a custom ID for the search input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-id"
+            },
+            "pnAriaLabelledby": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "since",
+                            "text": "v7.25.0"
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Provide the label from another element via its ID.\nWe strongly recommend you use the `label` prop instead."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "pn-aria-labelledby"
+            },
+            "searchid": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "Use `pn-id` instead."
+                        }, {
+                            "name": "category",
+                            "text": "HTML attributes"
+                        }],
+                    "text": "Set a unique ID for the search input."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "searchid"
             }
         };
     }

package/umd/modules/@postnord/web-components/collection/components/input/pn-segmented-control/pn-segmented-control.css

@@ -136,7 +136,7 @@ pn-segmented-control .pn-sc-arrows > .pn-sc-arrow.pn-sc-arrow-right {
   border-radius: 50% 0 0 50%;
   box-shadow: -0.2rem 0.3rem 0.2rem rgba(0, 0, 0, 0.4);
 }
-pn-segmented-control .pn-sc-arrows.pn-sc-left-visible .pn-sc-arrow-left, pn-segmented-control .pn-sc-arrows.pn-sc-right-visible .pn-sc-arrow-right {
+pn-segmented-control .pn-sc-arrows[data-left] .pn-sc-arrow-left, pn-segmented-control .pn-sc-arrows[data-right] .pn-sc-arrow-right {
   opacity: 1;
   transform: translateX(0);
 }

package/umd/modules/@postnord/web-components/collection/components/input/pn-segmented-control/pn-segmented-control.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * By PostNord.
  */
-import { h, Host, forceUpdate } from "@stencil/core";
+import { h, Host, forceUpdate, transformTag } from "@stencil/core";
 import { arrow_left, arrow_right } from "pn-design-assets/pn-assets/icons.js";
 /**
  * The `pn-segmented-control` and `pn-segmented` is built with native `input[type="radio"]` in the background.
@@ -40,18 +40,24 @@ export class PnSegmentedControl {
         const { target } = event.detail;
         this.calcHighlight(target, true);
     }
-    componentDidLoad() {
-        if (this.mo)
-            this.mo.disconnect();
+    connectedCallback() {
         this.mo = new MutationObserver(() => {
             forceUpdate(this.hostElement);
             this.setSegments();
         });
-        this.mo.observe(this.hostElement, { childList: true });
+        this.mo.observe(this.hostElement, { childList: true, subtree: true });
+    }
+    disconnectedCallback() {
+        if (this.mo)
+            this.mo.disconnect();
+    }
+    componentDidLoad() {
         this.setSegments();
     }
     setSegments() {
-        this.segments = Array.from(this.hostElement.querySelectorAll('pn-segment'));
+        const segmentTag = transformTag('pn-segment');
+        const list = this.hostElement.querySelectorAll(segmentTag);
+        this.segments = Array.from(list);
         this.setActiveSegment();
     }
     setActiveSegment() {
@@ -74,7 +80,8 @@ export class PnSegmentedControl {
         const chip = hover ? this.hoverBg : this.activeBg;
         requestAnimationFrame(() => {
             const el = element || this.segments.find(({ value }) => value === this.value);
-            const elSegment = el?.closest('pn-segment');
+            const segmentTag = transformTag('pn-segment');
+            const elSegment = el?.closest(segmentTag);
             if (!elSegment)
                 return;
             const elRect = elSegment.getBoundingClientRect();
@@ -101,11 +108,12 @@ export class PnSegmentedControl {
             const distanceToStart = this.segmentContainer.scrollLeft;
             this.showLeftArrow = distanceToStart > 0;
             this.showRightArrow = distanceToEnd > 0;
-            return;
         }
-        this.showLeftArrow = false;
-        this.showRightArrow = false;
-        this.showScrollArrows = false;
+        else {
+            this.showLeftArrow = false;
+            this.showRightArrow = false;
+            this.showScrollArrows = false;
+        }
     }
     scroll(val) {
         let amount = this.segmentContainer.scrollLeft + val;
@@ -114,17 +122,9 @@ export class PnSegmentedControl {
             behavior: 'smooth',
         });
     }
-    scrollArrowClasses() {
-        const list = ['pn-sc-arrows'];
-        if (this.showLeftArrow)
-            list.push('pn-sc-left-visible');
-        if (this.showRightArrow)
-            list.push('pn-sc-right-visible');
-        return list.join(' ');
-    }
     /*---------------------------------------/SCROLL ARROW LOGIC-------------------------------------------*/
     render() {
-        return (h(Host, { key: '4ff48c9a0556397894d55f7d3dc0a266349ef8fc' }, h("div", { key: '82ef8456eda4724b55705f9a662577eb172df89d', class: "pn-segmented-control", ref: el => (this.segmentContainer = el) }, h("slot", { key: '9b2949cf6e7976795543f6f8a67c126bee02e59d' }), h("div", { key: '42ab10791de502f48aac3a16766425b435c1c52e', class: "pn-sc-bg", "data-active": true, ref: el => (this.activeBg = el) }), h("div", { key: '24060bf183aabe485b7ff66bbad9b44a7704df12', class: "pn-sc-bg", "data-hover": true, ref: el => (this.hoverBg = el) })), h("div", { key: '31790d3f9fccd0c4242b5584ba2ff6ee32df4297', class: this.scrollArrowClasses(), hidden: !this.showScrollArrows }, h("button", { key: '8ffa7498550bc0f052b77f5297b349b84efbccb8', "aria-label": "Left", class: "pn-sc-arrow pn-sc-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: '89d4ee843ade39e7264e08c31ad83c2dd32f7931', icon: arrow_left })), h("button", { key: '8f1707b0e2debb84451210d03187b51eba3f2897', "aria-label": "Right", class: "pn-sc-arrow pn-sc-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: '4fa0fcd57eb268e3c9cd9e42f5d4e84b433fafee', icon: arrow_right })))));
+        return (h(Host, { key: 'e50018a767b5280ce0144544f3fb213b8f025944' }, h("div", { key: '8f9f4beedc7b07d2431fde84456a96d501bdbf15', class: "pn-segmented-control", ref: el => (this.segmentContainer = el) }, h("slot", { key: '1caffca6e2cd27adcb2c5bfa5b45f52043c85829' }), h("div", { key: '3ef184c6e26f194aa3b5e3ef284313f73aa03a6e', class: "pn-sc-bg", "data-active": true, ref: el => (this.activeBg = el) }), h("div", { key: '90c56a3f631557e062f70b4ef98231eafc1f46d7', class: "pn-sc-bg", "data-hover": true, ref: el => (this.hoverBg = el) })), h("div", { key: '371d10511a314e69613a195858dba3073f7ca920', class: "pn-sc-arrows", "data-left": this.showLeftArrow, "data-right": this.showRightArrow, hidden: !this.showScrollArrows }, h("button", { key: 'e698d859b989e8fde8864185d3fdce81584280da', "aria-label": "Left", class: "pn-sc-arrow pn-sc-arrow-left", onClick: () => this.scroll(-120), tabindex: "-1" }, h("pn-icon", { key: 'e82f3b0257bd48dc281a6c113cecbd0cb551fd53', icon: arrow_left })), h("button", { key: '8eba509c3c48304c372d543e51edecaaf41cf564', "aria-label": "Right", class: "pn-sc-arrow pn-sc-arrow-right", onClick: () => this.scroll(120), tabindex: "-1" }, h("pn-icon", { key: '0ed1d7cd2b88a619f21e2ee8075c864f9bdcf561', icon: arrow_right })))));
     }
     static get is() { return "pn-segmented-control"; }
     static get originalStyleUrls() {
@@ -147,8 +147,8 @@ export class PnSegmentedControl {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "deprecated",
@@ -170,14 +170,14 @@ export class PnSegmentedControl {
                     "references": {}
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
                     "text": "Currently active segment value."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
                 "attribute": "value"
             }
         };