@oslokommune/punkt-elements 12.31.2 → 12.32.7

package/dist/{helptext-CqnoPodd.js → helptext-DfRusn5R.js}

@@ -1,11 +1,11 @@
-import { P as d, x as a, n as i, a as u, E as c } from "./element-C7XjZtLU.js";
-import { e as f, n as m } from "./ref-DbOSDQbk.js";
-import { o as x } from "./icon-BEUgV9Wo.js";
-import { e as v } from "./class-map-DWtqmIRS.js";
-import { r as w } from "./state-CDQk0DFQ.js";
-import { u as _ } from "./stringutils-DJjRa8dG.js";
-import { s as k } from "./input-wrapper-Bw9tARAD.js";
-import { P as b } from "./pkt-slot-controller-Clbye6cM.js";
+import { P as d, x as a, E as u, n as i, a as c } from "./element-DiqKrDty.js";
+import { e as f, n as m } from "./ref-B70YZNXm.js";
+import { o as x } from "./icon-BdY52BIt.js";
+import { e as _ } from "./class-map-D4tSZX70.js";
+import { r as w } from "./state-CDwPbiQj.js";
+import { u as v } from "./stringutils-DJjRa8dG.js";
+import { s as k } from "./input-wrapper-8iKEzDRZ.js";
+import { P as b } from "./pkt-slot-controller-BtVLTZb7.js";
 var D = Object.defineProperty, O = Object.getOwnPropertyDescriptor, n = (r, o, s, t) => {
   for (var e = t > 1 ? void 0 : t ? O(o, s) : o, l = r.length - 1, h; l >= 0; l--)
     (h = r[l]) && (e = (t ? h(o, s, e) : h(e)) || e);
@@ -13,7 +13,7 @@ var D = Object.defineProperty, O = Object.getOwnPropertyDescriptor, n = (r, o, s
 };
 let p = class extends d {
   constructor() {
-    super(), this.defaultSlot = f(), this.forId = _(), this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = k.props.helptextDropdownButton.default, this.isHelpTextOpen = !1, this.slotController = new b(this, this.defaultSlot);
+    super(), this.defaultSlot = f(), this.forId = v(), this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = k.props.helptextDropdownButton.default, this.isHelpTextOpen = !1, this.slotController = new b(this, this.defaultSlot);
   }
   render() {
     const r = () => {
@@ -37,7 +37,7 @@ let p = class extends d {
             <span class="pkt-btn__text">${x(this.helptextDropdownButton)}</span>
           </button>
           <div
-            class="${v({
+            class="${_({
       "pkt-inputwrapper__helptext": !0,
       "pkt-inputwrapper__helptext-expandable-open": this.isHelpTextOpen,
       "pkt-inputwrapper__helptext-expandable-closed": !this.isHelpTextOpen
@@ -45,8 +45,8 @@ let p = class extends d {
           >
             ${x(this.helptextDropdown)}
           </div>
-        </div>` : c;
-    return a`${a`<div>
+        </div>` : u;
+    return a`${a`<div class="pkt-inputwrapper__helptext-container">
         <div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
           <div class="pkt-contents" ${m(this.defaultSlot)} name="helptext"></div>
           ${this.helptext && x(this.helptext)}
@@ -71,7 +71,7 @@ n([
   w()
 ], p.prototype, "isHelpTextOpen", 2);
 p = n([
-  u("pkt-helptext")
+  c("pkt-helptext")
 ], p);
 export {
   p as P

package/dist/{helptext-B9kxDc2b.cjs → helptext-aHD9icur.cjs}

@@ -1,4 +1,4 @@
-"use strict";const e=require("./element-CzFXQBoS.cjs"),x=require("./ref-2anvRHT4.cjs"),h=require("./icon-BOKusjAA.cjs"),u=require("./class-map-Dj5mbCUg.cjs"),c=require("./state-HNj0_316.cjs"),a=require("./stringutils-CkVRq4jP.cjs"),d=require("./input-wrapper-jPnKsfEC.cjs"),k=require("./pkt-slot-controller-Oc32unDk.cjs");var v=Object.defineProperty,w=Object.getOwnPropertyDescriptor,r=(o,p,l,n)=>{for(var t=n>1?void 0:n?w(p,l):p,s=o.length-1,i;s>=0;s--)(i=o[s])&&(t=(n?i(p,l,t):i(t))||t);return n&&t&&v(p,l,t),t};exports.PktHelptext=class extends e.PktElement{constructor(){super(),this.defaultSlot=x.e(),this.forId=a.uuidish(),this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=d.specs.props.helptextDropdownButton.default,this.isHelpTextOpen=!1,this.slotController=new k.PktSlotController(this,this.defaultSlot)}render(){const p=()=>{const t=!this.isHelpTextOpen;this.isHelpTextOpen=t,this.dispatchEvent(new CustomEvent("toggleHelpText",{bubbles:!0,detail:{isOpen:t}}))},l=()=>this.helptextDropdown?e.x`<div class="pkt-inputwrapper__helptext-expandable">
+"use strict";const e=require("./element-DJpGVXjq.cjs"),x=require("./ref-CLqTsViF.cjs"),h=require("./icon-UtDKPH3R.cjs"),u=require("./class-map-DvBKxTiW.cjs"),c=require("./state-C4LdlTYO.cjs"),a=require("./stringutils-CkVRq4jP.cjs"),d=require("./input-wrapper-EoSAbU-U.cjs"),k=require("./pkt-slot-controller-plQxXRvV.cjs");var _=Object.defineProperty,w=Object.getOwnPropertyDescriptor,r=(s,p,l,n)=>{for(var t=n>1?void 0:n?w(p,l):p,o=s.length-1,i;o>=0;o--)(i=s[o])&&(t=(n?i(p,l,t):i(t))||t);return n&&t&&_(p,l,t),t};exports.PktHelptext=class extends e.PktElement{constructor(){super(),this.defaultSlot=x.e(),this.forId=a.uuidish(),this.helptext="",this.helptextDropdown="",this.helptextDropdownButton=d.specs.props.helptextDropdownButton.default,this.isHelpTextOpen=!1,this.slotController=new k.PktSlotController(this,this.defaultSlot)}render(){const p=()=>{const t=!this.isHelpTextOpen;this.isHelpTextOpen=t,this.dispatchEvent(new CustomEvent("toggleHelpText",{bubbles:!0,detail:{isOpen:t}}))},l=()=>this.helptextDropdown?e.x`<div class="pkt-inputwrapper__helptext-expandable">
           <button
             class="pkt-link pkt-link--icon-right pkt-btn pkt-btn--small pkt-btn--tertiary pkt-btn--icon-right"
             type="button"
@@ -15,7 +15,7 @@
           >
             ${h.o(this.helptextDropdown)}
           </div>
-        </div>`:e.E,n=()=>e.x`<div>
+        </div>`:e.E,n=()=>e.x`<div class="pkt-inputwrapper__helptext-container">
         <div class="pkt-inputwrapper__helptext" id="${this.forId}-helptext">
           <div class="pkt-contents" ${x.n(this.defaultSlot)} name="helptext"></div>
           ${this.helptext&&h.o(this.helptext)}

package/dist/helptext.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'pkt-icon': PktIcon;
@@ -8,6 +15,31 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-listbox': PktListbox;
+    }
+}
+
+
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-select': PktSelect & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/{icon-BEUgV9Wo.js → icon-BdY52BIt.js}

@@ -1,5 +1,5 @@
-import { E as f, T as v, P as m, x as y, n as h, a as P } from "./element-C7XjZtLU.js";
-import { i as k, t as _, e as g } from "./directive-B76A7YXI.js";
+import { E as f, T as v, P as m, x as y, n as h, a as P } from "./element-DiqKrDty.js";
+import { e as g, i as k, t as _ } from "./directive-oAbCiebi.js";
 /**
  * @license
  * Copyright 2017 Google LLC

package/dist/{icon-BOKusjAA.cjs → icon-UtDKPH3R.cjs}

@@ -1,4 +1,4 @@
-"use strict";const o=require("./element-CzFXQBoS.cjs"),a=require("./directive-C_VV3qwo.cjs");/**
+"use strict";const o=require("./element-DJpGVXjq.cjs"),a=require("./directive-C7oCP5Bh.cjs");/**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/icon.d.ts

@@ -1,6 +1,13 @@
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'pkt-icon': PktIcon;
@@ -8,6 +15,31 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-listbox': PktListbox;
+    }
+}
+
+
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-select': PktSelect & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/{if-defined-CpIkv1A4.cjs → if-defined-CoBDkDGb.cjs}

@@ -1,4 +1,4 @@
-"use strict";const t=require("./element-CzFXQBoS.cjs");/**
+"use strict";const t=require("./element-DJpGVXjq.cjs");/**
  * @license
  * Copyright 2018 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause

package/dist/{if-defined-eRX4e5zO.js → if-defined-DeANa4n5.js}

@@ -1,4 +1,4 @@
-import { E as r } from "./element-C7XjZtLU.js";
+import { E as r } from "./element-DiqKrDty.js";
 /**
  * @license
  * Copyright 2018 Google LLC

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import { nothing } from 'lit';
 import { PktIconName } from '@oslokommune/punkt-assets/dist/icons/icon';
 import { PropertyValues } from 'lit';
 import { ReactiveController } from 'lit';
@@ -93,6 +94,47 @@ export declare interface IPktButton {
     disabled?: boolean;
 }
 
+export declare interface IPktCombobox {
+    allowUserInput?: boolean;
+    typeahead?: boolean;
+    disabled?: boolean;
+    displayValueAs?: string;
+    errorMessage?: string;
+    fullwidth?: boolean;
+    hasError?: boolean;
+    helptext?: string | null;
+    helptextDropdown?: string | null;
+    helptextDropdownButton?: string | null;
+    id?: string;
+    includeSearch?: boolean;
+    label?: string | null;
+    maxlength?: number | null;
+    minlength?: number | null;
+    multiple?: boolean;
+    name?: string;
+    optionalTag?: boolean;
+    optionalText?: string;
+    options?: IPktComboboxOption[];
+    placeholder?: string | null;
+    requiredTag?: boolean;
+    requiredText?: string;
+    searchPlaceholder?: string;
+    tagPlacement?: TPktComboboxTagPlacement | null;
+    value?: string | string[];
+}
+
+export declare interface IPktComboboxOption {
+    description?: string;
+    disabled?: boolean;
+    fulltext?: string;
+    label?: string;
+    prefix?: string;
+    selected?: boolean;
+    tagSkinColor?: TTagSkin;
+    userAdded?: boolean;
+    value: string;
+}
+
 declare interface IPktLinkCard {
     title?: string;
     href?: string;
@@ -102,6 +144,21 @@ declare interface IPktLinkCard {
     skin?: TLinkCardSkin;
 }
 
+declare interface IPktListbox {
+    options: IPktComboboxOption[];
+    isOpen: boolean;
+    disabled: boolean;
+    includeSearch: boolean;
+    isMultiSelect: boolean;
+    allowUserInput: boolean;
+    maxIsReached: boolean;
+    customUserInput: string | null;
+    searchPlaceholder: string | null;
+    searchValue: string | null;
+    maxLength: number;
+    userMessage: string | null;
+}
+
 export declare interface IPktLoader {
     /**
      * The `delay` prop controls how much time the loading should be given before the loader is displayed.
@@ -209,6 +266,7 @@ export declare class PktBackLink extends PktElement<IPktBackLink> implements IPk
 export declare class PktButton extends PktElement<IPktButton> implements IPktButton {
     static formAssociated: boolean;
     private internals;
+    slotController: PktSlotController;
     defaultSlot: Ref<HTMLElement>;
     constructor();
     iconName: string;
@@ -343,6 +401,67 @@ export declare class PktCheckbox extends PktInputElement {
     private toggleChecked;
 }
 
+export declare class PktCombobox extends PktInputElement implements IPktCombobox {
+    private helptextSlot;
+    constructor();
+    value: string | string[];
+    options: IPktComboboxOption[];
+    allowUserInput: boolean;
+    typeahead: boolean;
+    includeSearch: boolean;
+    searchPlaceholder: string;
+    multiple: boolean;
+    maxlength: number | null;
+    displayValueAs: string;
+    tagPlacement: TPktComboboxTagPlacement | null;
+    private _options;
+    private _isOptionsOpen;
+    private _value;
+    private _userInfoMessage;
+    private _addValueText;
+    private _maxIsReached;
+    private _search;
+    private _inputFocus;
+    private _editingSingleValue;
+    inputRef: Ref<HTMLInputElement>;
+    arrowRef: Ref<HTMLButtonElement>;
+    listboxRef: Ref<PktListbox>;
+    focusRef: Ref<HTMLElement>;
+    optionTagRef: Ref<HTMLElement>;
+    connectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    render(): TemplateResult<1>;
+    renderInputField(): TemplateResult<1>;
+    renderSingleOrMultipleValues(): unknown;
+    renderValueTag(option: IPktComboboxOption | null): "" | TemplateResult<1>;
+    handleInput(e: InputEvent): void;
+    private handleFocus;
+    private handleFocusOut;
+    private handleBlur;
+    private handleInputClick;
+    private handleArrowClick;
+    private handleOptionToggled;
+    private handleSearch;
+    private handleInputKeydown;
+    private handleTagRemove;
+    private blurInput;
+    private checkForMatches;
+    private findValueInOptions;
+    private findIndexInOptions;
+    private isMaxItemsReached;
+    toggleValue(value: string | null): void;
+    private setSelected;
+    private removeSelected;
+    private addAllOptions;
+    private removeAllSelected;
+    private addValue;
+    private removeValue;
+    private addNewUserValue;
+    private resetComboboxInput;
+    private removeLastValue;
+}
+
 export declare class PktComponent extends PktElement {
     /**
      * Element attributes => props
@@ -524,6 +643,7 @@ declare class PktInputElement<T = {}> extends PktElement<Props_2 & T> {
     counter: boolean;
     hasError: boolean;
     inline: boolean;
+    hasFieldset: boolean;
     optionalTag: boolean;
     requiredTag: boolean;
     skipForwardTestid: boolean;
@@ -569,6 +689,8 @@ export declare class PktInputWrapper extends PktElement<Props_4> {
     counter: boolean;
     counterCurrent: number;
     counterMaxLength: number;
+    counterError: string | null;
+    counterPosition: TCounterPosition;
     optionalTag: boolean;
     optionalText: string;
     requiredTag: boolean;
@@ -581,10 +703,11 @@ export declare class PktInputWrapper extends PktElement<Props_4> {
     hasFieldset: boolean;
     useWrapper: boolean;
     role: string | null;
-    updateSlots(): void;
+    updateSlots(filledSlots: Set<string | null | undefined>): void;
     protected updated(changedProperties: PropertyValues): void;
     render(): TemplateResult<1>;
     private toggleDropdown;
+    private handleLabelClick;
 }
 
 export declare class PktLink extends PktElement {
@@ -614,6 +737,51 @@ export declare class PktLinkCard extends PktElement implements IPktLinkCard {
     render(): TemplateResult<1>;
 }
 
+declare class PktListbox extends PktElement implements IPktListbox {
+    id: string;
+    label: string | null;
+    options: IPktComboboxOption[];
+    isOpen: boolean;
+    disabled: boolean;
+    includeSearch: boolean;
+    isMultiSelect: boolean;
+    allowUserInput: boolean;
+    maxIsReached: boolean;
+    customUserInput: string | null;
+    searchPlaceholder: string | null;
+    searchValue: string | null;
+    maxLength: number;
+    userMessage: string | null;
+    private _selectedOptions;
+    private _filteredOptions;
+    connectedCallback(): void;
+    updated(changedProperties: PropertyValues): void;
+    attributeChangedCallback(name: string, _old: string | null, value: string | null): void;
+    render(): TemplateResult<1>;
+    renderCheckboxOrCheckIcon(option: IPktComboboxOption, index: number): TemplateResult<1> | typeof nothing;
+    renderList(): TemplateResult<1>;
+    renderNewOptionBanner(): TemplateResult<1> | typeof nothing;
+    renderMaximumReachedBanner(): TemplateResult<1> | typeof nothing;
+    renderUserMessage(): TemplateResult<1> | typeof nothing;
+    renderSearch(): TemplateResult<1> | typeof nothing;
+    handleSearchInput(e: InputEvent): void;
+    handleSearchKeydown(e: KeyboardEvent): void;
+    handleOptionKeydown(e: KeyboardEvent): void;
+    focusAndScrollIntoView(el: HTMLElement): void;
+    focusNextOption(target: HTMLElement): void;
+    focusPreviousOption(target: HTMLElement): void;
+    focusFirstOption(): void;
+    focusLastOption(): void;
+    focusFirstOrSelectedOption(): void;
+    toggleOption(option: IPktComboboxOption | HTMLElement): void;
+    selectAll(): void;
+    closeOptions(): void;
+    filterOptions(): void;
+    isLetterOrSpace(char: string): boolean;
+    handleTypeAhead(char: string): void;
+    getOptionElements(): HTMLElement[];
+}
+
 export declare class PktLoader extends PktElement implements IPktLoader {
     defaultSlot: Ref<HTMLElement>;
     constructor();
@@ -713,17 +881,6 @@ declare class PktRadioButton extends PktInputElement {
 export { PktRadioButton }
 export { PktRadioButton as PktRadiobutton }
 
-/**
- * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
- *
- * The component will prioritize options passed as a prop over options passed as children if both are provided.
- * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
- *
- * @slot (default) - Options to be rendered as children
- * @prop {TSelectOption[]} options - Options to be rendered as children
- *
- *
- */
 export declare class PktSelect extends PktInputElement implements IPktSelect {
     private inputRef;
     private helptextSlot;
@@ -743,6 +900,7 @@ declare class PktSlotController implements ReactiveController {
     nodes: Element[];
     slots: Ref<HTMLElement>[];
     observer: MutationObserver;
+    contentObserver: MutationObserver;
     filledSlots: Set<string | null | undefined>;
     skipOptions: boolean;
     private updatingSlots;
@@ -753,9 +911,10 @@ declare class PktSlotController implements ReactiveController {
     private updateNodes;
     private updateSlots;
     private handleMutations;
+    private handleSlotMutations;
 }
 
-export declare class PktTag extends PktElement implements IPktTag {
+export declare class PktTag extends PktElement<IPktTag> implements IPktTag {
     slotController: PktSlotController;
     defaultSlot: Ref<HTMLElement>;
     constructor();
@@ -804,7 +963,7 @@ export declare class PktTextinput extends PktInputElement<Props_5> {
     value: string;
     type: string;
     size: number | null;
-    autocomplete: string;
+    autocomplete: string | null;
     iconNameRight: string | null;
     prefix: string | null;
     suffix: string | null;
@@ -818,7 +977,7 @@ export declare class PktTextinput extends PktInputElement<Props_5> {
 
 declare type Props = ElementProps<PktElement, 'strings' | 'role'>;
 
-declare type Props_2 = ElementProps<PktInputElement, 'defaultValue' | 'disabled' | 'readonly' | 'required' | 'max' | 'maxlength' | 'min' | 'minlength' | 'ariaDescribedBy' | 'ariaLabelledby' | 'name' | 'pattern' | 'placeholder' | 'id' | 'counter' | 'hasError' | 'inline' | 'optionalTag' | 'requiredTag' | 'skipForwardTestid' | 'useWrapper' | 'fullwidth' | 'counterMaxLength' | 'errorMessage' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'label' | 'optionalText' | 'requiredText' | 'dataTestid'>;
+declare type Props_2 = ElementProps<PktInputElement, 'defaultValue' | 'disabled' | 'readonly' | 'required' | 'max' | 'maxlength' | 'min' | 'minlength' | 'ariaDescribedBy' | 'ariaLabelledby' | 'name' | 'pattern' | 'placeholder' | 'id' | 'counter' | 'hasError' | 'hasFieldset' | 'inline' | 'optionalTag' | 'requiredTag' | 'skipForwardTestid' | 'useWrapper' | 'fullwidth' | 'counterMaxLength' | 'errorMessage' | 'helptext' | 'helptextDropdown' | 'helptextDropdownButton' | 'label' | 'optionalText' | 'requiredText' | 'dataTestid'>;
 
 declare type Props_3 = ElementProps<PktIcon, 'path' | 'name'>;
 
@@ -862,6 +1021,8 @@ declare type TAriaSort = 'none' | 'ascending' | 'descending' | 'other';
 
 declare type TCardSkin = 'outlined' | 'gray' | 'beige' | 'green' | 'blue';
 
+declare type TCounterPosition = 'top' | 'bottom';
+
 declare type TDirection = 'portrait' | 'landscape';
 
 declare type TLinkCardSkin = 'normal' | 'blue' | 'beige' | 'green' | 'gray' | 'beige-outline' | 'gray-outline';
@@ -882,6 +1043,8 @@ export declare type TPktButtonType = 'button' | 'submit' | 'reset';
 
 export declare type TPktButtonVariant = 'label-only' | 'icon-left' | 'icon-right' | 'icon-only' | 'icons-right-and-left';
 
+export declare type TPktComboboxTagPlacement = 'inside' | 'outside';
+
 export declare type TPktLoaderVariant = 'blue' | 'rainbow' | 'shapes';
 
 declare type TPktSize = 'small' | 'medium' | 'large';
@@ -910,6 +1073,13 @@ export declare type TTagType = 'button' | 'reset' | 'submit';
 export { }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-combobox': PktCombobox & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface HTMLElementTagNameMap {
         'pkt-icon': PktIcon;
@@ -917,6 +1087,31 @@ declare global {
 }
 
 
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-listbox': PktListbox;
+    }
+}
+
+
+/**
+ * Pkt Select is a wrapper for the native select element using the pkt-input-wrapper component.
+ *
+ * The component will prioritize options passed as a prop over options passed as children if both are provided.
+ * This is to allow for dynamic options that might change in the case of both children/slot and props are provided.
+ *
+ * @slot (default) - Options to be rendered as children
+ * @prop {TSelectOption[]} options - Options to be rendered as children
+ *
+ *
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'pkt-select': PktSelect & HTMLSelectElement;
+    }
+}
+
+
 declare global {
     interface Window {
         pktTz: string;

package/dist/{input-element-BK8UkQli.js → input-element-C4mmTk6h.js}

@@ -1,32 +1,32 @@
-import { n as s, P as y, t as n } from "./element-C7XjZtLU.js";
-import { r as c } from "./state-CDQk0DFQ.js";
+import { P as y, t as l, n as s } from "./element-DiqKrDty.js";
+import { r as c } from "./state-CDwPbiQj.js";
 import { u as m } from "./stringutils-DJjRa8dG.js";
-import { s as g } from "./input-wrapper-Bw9tARAD.js";
-var v = Object.defineProperty, e = (p, t, r, l) => {
+import { s as g } from "./input-wrapper-8iKEzDRZ.js";
+var v = Object.defineProperty, e = (p, t, r, n) => {
   for (var a = void 0, h = p.length - 1, o; h >= 0; h--)
     (o = p[h]) && (a = o(t, r, a) || a);
   return a && v(t, r, a), a;
 };
 class i extends y {
   constructor() {
-    super(), this.defaultValue = null, this.disabled = !1, this.readonly = !1, this.required = !1, this.max = null, this.maxlength = null, this.min = null, this.minlength = null, this.ariaDescribedBy = null, this.ariaLabelledby = null, this.name = "", this.pattern = null, this.placeholder = null, this.id = m(), this.counter = !1, this.hasError = !1, this.inline = !1, this.optionalTag = !1, this.requiredTag = !1, this.skipForwardTestid = !1, this.useWrapper = !0, this.fullwidth = !1, this.counterMaxLength = 0, this.errorMessage = "", this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = g.props.helptextDropdownButton.default, this.label = null, this.optionalText = n.forms.labels.optional, this.requiredText = n.forms.labels.required, this.dataTestid = "", this.touched = !1, this.internals = this.attachInternals();
+    super(), this.defaultValue = null, this.disabled = !1, this.readonly = !1, this.required = !1, this.max = null, this.maxlength = null, this.min = null, this.minlength = null, this.ariaDescribedBy = null, this.ariaLabelledby = null, this.name = "", this.pattern = null, this.placeholder = null, this.id = m(), this.counter = !1, this.hasError = !1, this.inline = !1, this.hasFieldset = !1, this.optionalTag = !1, this.requiredTag = !1, this.skipForwardTestid = !1, this.useWrapper = !0, this.fullwidth = !1, this.counterMaxLength = 0, this.errorMessage = "", this.helptext = "", this.helptextDropdown = "", this.helptextDropdownButton = g.props.helptextDropdownButton.default, this.label = null, this.optionalText = l.forms.labels.optional, this.requiredText = l.forms.labels.required, this.dataTestid = "", this.touched = !1, this.internals = this.attachInternals();
   }
   static get formAssociated() {
     return !0;
   }
   manageValidity(t) {
-    var r, l, a, h, o, u, d, f;
-    t && (this.required && !this.value ? this.internals.setValidity({ valueMissing: !0 }, n.forms.messages.required, t) : (r = t.validity) != null && r.typeMismatch || (l = t.validity) != null && l.badInput ? this.internals.setValidity({ typeMismatch: !0 }, n.forms.messages.invalid, t) : (a = t.validity) != null && a.patternMismatch ? this.internals.setValidity(
+    var r, n, a, h, o, u, d, f;
+    t && (this.required && !this.value ? this.internals.setValidity({ valueMissing: !0 }, l.forms.messages.required, t) : (r = t.validity) != null && r.typeMismatch || (n = t.validity) != null && n.badInput ? this.internals.setValidity({ typeMismatch: !0 }, l.forms.messages.invalid, t) : (a = t.validity) != null && a.patternMismatch ? this.internals.setValidity(
       { patternMismatch: !0 },
-      n.forms.messages.invalidPattern,
+      l.forms.messages.invalidPattern,
       t
-    ) : (h = t.validity) != null && h.tooShort || this.minlength && this.minlength > 0 && this.value.length < this.minlength ? this.internals.setValidity({ tooShort: !0 }, n.forms.messages.tooShort, t) : (o = t.validity) != null && o.tooLong || this.maxlength && this.maxlength > 0 && this.value.length > this.maxlength ? this.internals.setValidity({ tooLong: !0 }, n.forms.messages.tooLong, t) : (u = t.validity) != null && u.rangeUnderflow ? this.internals.setValidity(
+    ) : (h = t.validity) != null && h.tooShort || this.minlength && this.minlength > 0 && this.value.length < this.minlength ? this.internals.setValidity({ tooShort: !0 }, l.forms.messages.tooShort, t) : (o = t.validity) != null && o.tooLong || this.maxlength && this.maxlength > 0 && this.value.length > this.maxlength ? this.internals.setValidity({ tooLong: !0 }, l.forms.messages.tooLong, t) : (u = t.validity) != null && u.rangeUnderflow ? this.internals.setValidity(
       { rangeUnderflow: !0 },
-      n.forms.messages.rangeUnderflow,
+      l.forms.messages.rangeUnderflow,
       t
     ) : (d = t.validity) != null && d.rangeOverflow ? this.internals.setValidity(
       { rangeOverflow: !0 },
-      n.forms.messages.rangeOverflow,
+      l.forms.messages.rangeOverflow,
       t
     ) : (f = t.validity) != null && f.customError ? this.internals.setValidity({ customError: !0 }, t.validationMessage, t) : this.internals.setValidity({}));
   }
@@ -34,8 +34,8 @@ class i extends y {
     if (this.internals)
       if (Array.isArray(t)) {
         const r = new FormData();
-        t.forEach((l) => {
-          r.append(this.name, l);
+        t.forEach((n) => {
+          r.append(this.name, n);
         }), this.internals.setFormValue(r);
       } else
         this.internals.setFormValue(t);
@@ -47,8 +47,8 @@ class i extends y {
     const r = this.internals.form || this.closest("form");
     r && r.querySelectorAll(
       `pkt-radiobutton[name=${this.name}], input[type=radio][name=${this.name}]`
-    ).forEach((l) => {
-      const a = l;
+    ).forEach((n) => {
+      const a = n;
       a.name === this.name && a.value !== this.value && a.checked && (a.checked = !1);
     }), typeof t == "string" ? (this.checked = t === "true", this.internals.ariaChecked = t === "true") : typeof t == "boolean" && (this.checked = t, this.internals.ariaChecked = t), this.checked ? (this.internals.setFormValue(this.value || "on", this.value || "on"), this.internals.states.add("--checked")) : (this.internals.setFormValue("", ""), this.internals.states.delete("--checked")), this.dispatchEvent(new Event("change")), this.dispatchEvent(
       new CustomEvent("value-change", {
@@ -59,7 +59,7 @@ class i extends y {
     ), this.internals.reportValidity();
   }
   valueChanged(t, r) {
-    (r !== this.value || r !== this._value) && (typeof t == "string" ? ((this.multiple || this.range) && t.includes(",") && (t = t.split(",")), this.value = t, this._value = Array.isArray(t) ? t : [t]) : Array.isArray(t) ? (this.value = t, this._value = t) : (this.value = "", this._value = []), (!this.value || this.value.length === 0) && r && r.length !== 0 ? this.clearInputValue() : this.value && this.value.toString() !== (r == null ? void 0 : r.toString()) && this.onChange(this.value), this.updateComplete.then(() => this.requestUpdate()));
+    (r !== this.value || r !== this._value) && (typeof t == "string" ? ((this.multiple || this.range) && t.includes(",") && (t = t.split(",")), this.value = t, this._value = Array.isArray(t) ? t : [t]) : Array.isArray(t) ? (this.value = this.multiple || this.range ? t : t[0], this._value = t) : (this.value = "", this._value = []), (!this.value || this.value.length === 0) && r && r.length !== 0 ? this.clearInputValue() : this.value && this.value.toString() !== (r == null ? void 0 : r.toString()) && this.onChange(this.value), this.updateComplete.then(() => this.requestUpdate()));
   }
   // When input goes from content to no content
   clearInputValue() {
@@ -164,6 +164,9 @@ e([
 e([
   s({ type: Boolean })
 ], i.prototype, "inline");
+e([
+  s({ type: Boolean })
+], i.prototype, "hasFieldset");
 e([
   s({ type: Boolean })
 ], i.prototype, "optionalTag");
@@ -174,7 +177,7 @@ e([
   s({ type: Boolean })
 ], i.prototype, "skipForwardTestid");
 e([
-  s({ type: Boolean })
+  s({ type: Boolean, reflect: !1 })
 ], i.prototype, "useWrapper");
 e([
   s({ type: Boolean, reflect: !0 })
@@ -192,16 +195,16 @@ e([
   s({ type: String })
 ], i.prototype, "helptextDropdown");
 e([
-  s({ type: String })
+  s({ type: String, reflect: !1 })
 ], i.prototype, "helptextDropdownButton");
 e([
   s({ type: String })
 ], i.prototype, "label");
 e([
-  s({ type: String })
+  s({ type: String, reflect: !1 })
 ], i.prototype, "optionalText");
 e([
-  s({ type: String })
+  s({ type: String, reflect: !1 })
 ], i.prototype, "requiredText");
 e([
   s({ type: String, attribute: "data-testid" })