@oslokommune/punkt-elements 16.7.1 → 16.7.3

package/dist/select-De-n8on9.js

@@ -0,0 +1,230 @@
+import { n as h, t as c, b as a } from "./element-CPpT3rFQ.js";
+import { e as v, n as f } from "./ref-Bg_Swj5w.js";
+import { o as n } from "./if-defined-B0krMLad.js";
+import { r as _ } from "./state-C_1EOo3D.js";
+import { P as $ } from "./input-element-8nLwuQS4.js";
+import { P as x } from "./pkt-options-controller-B5YalfCb.js";
+import { s as m } from "./element-with-slot-Dqk6-TRR.js";
+import "./input-wrapper-Bs4CRNst.js";
+var b = Object.defineProperty, u = (r, t, e, i) => {
+  for (var s = void 0, o = r.length - 1, l; o >= 0; o--)
+    (l = r[o]) && (s = l(t, e, s) || s);
+  return s && b(t, e, s), s;
+};
+class p extends $ {
+  constructor() {
+    super(...arguments), this._optionsProp = [], this._options = [];
+  }
+  /**
+   * Public getter for options that includes selected state
+   * Override this in subclasses to customize the selected state logic
+   */
+  get options() {
+    return this._options.map((t) => ({
+      ...t,
+      selected: this.isOptionSelected(t)
+    }));
+  }
+  /**
+   * Public setter for options
+   */
+  set options(t) {
+    this._optionsProp = t, this.requestUpdate("_optionsProp", this._options);
+  }
+  /**
+   * Determines if an option is selected
+   * Subclasses should override this to implement their selection logic
+   *
+   * @param option - The option to check
+   * @returns True if the option is selected
+   * @protected
+   */
+  isOptionSelected(t) {
+    return Array.isArray(this.value) ? this.value.includes(t.value) : t.value === this.value;
+  }
+  /**
+   * Finds an option by its value
+   *
+   * @param value - The value to search for
+   * @returns The option if found, undefined otherwise
+   * @protected
+   */
+  findOptionByValue(t) {
+    return this._options.find((e) => e.value === t);
+  }
+  /**
+   * Gets all currently selected options
+   *
+   * @returns Array of selected options
+   * @protected
+   */
+  getSelectedOptions() {
+    return this._options.filter((t) => this.isOptionSelected(t));
+  }
+  /**
+   * Parses options from either props or slot controller
+   * Call this in connectedCallback to initialize options
+   *
+   * @protected
+   */
+  parseOptions() {
+    var i, s;
+    const t = this._optionsProp.length > 0, e = ((s = (i = this.optionsController) == null ? void 0 : i.nodes) == null ? void 0 : s.length) && this.optionsController.nodes.length > 0;
+    t ? this._options = this._optionsProp : e && (this._options = this.optionsController.options);
+  }
+  /**
+   * Re-parse options when the component updates
+   * This ensures options stay in sync when they change dynamically
+   *
+   * @protected
+   */
+  willUpdate(t) {
+    super.willUpdate(t), this.parseOptions();
+  }
+}
+u([
+  h({ type: Array, attribute: "options" })
+], p.prototype, "_optionsProp");
+u([
+  _()
+], p.prototype, "_options");
+var g = Object.defineProperty, I = (r, t, e, i) => {
+  for (var s = void 0, o = r.length - 1, l; o >= 0; o--)
+    (l = r[o]) && (s = l(t, e, s) || s);
+  return s && g(t, e, s), s;
+};
+class d extends p {
+  constructor() {
+    super(), this.inputRef = v(), this.value = "", this.selectedIndex = -1, this.selectedOptions = void 0, this.optionsController = new x(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.parseOptions(), this._options.forEach((t) => {
+      t.selected && !this.value && (this.value = t.value);
+    });
+  }
+  // Support native Select method `add`
+  add(t, e) {
+    const i = {
+      value: t.value || t.text,
+      label: t.text || t.value,
+      selected: t.selected,
+      disabled: t.disabled
+    };
+    if (e === void 0)
+      this._options.push(i);
+    else if (typeof e == "number")
+      this._options.splice(e, 0, i);
+    else {
+      const s = e.value || e.text, o = this._options.findIndex((l) => l.value === s);
+      o >= 0 ? this._options.splice(o, 0, i) : this._options.push(i);
+    }
+    t.selected && (this.value = t.value || t.text, this.selectedIndex = this._options.findIndex((s) => s.value === this.value)), this.requestUpdate();
+  }
+  // Support native Select method `remove`
+  remove(t) {
+    var e;
+    typeof t == "number" && (this.selectedIndex === t && (this.value = ((e = this._options[0]) == null ? void 0 : e.value) || ""), this._options.splice(t, 1), this.requestUpdate());
+  }
+  // Support native Select method `item`
+  item(t) {
+    var e;
+    return (e = this.inputRef.value) == null ? void 0 : e.item(t);
+  }
+  // Support native Select method `namedItem`
+  namedItem(t) {
+    var e;
+    return (e = this.inputRef.value) == null ? void 0 : e.namedItem(t);
+  }
+  // Support native Select method `showPicker`
+  showPicker() {
+    this.inputRef.value && "showPicker" in this.inputRef.value && this.inputRef.value.showPicker();
+  }
+  attributeChangedCallback(t, e, i) {
+    var s, o;
+    t === "options" && (this._options = i ? JSON.parse(i) : []), t === "value" && this.value !== e && (this.selectedIndex = this.touched ? this.returnNumberOrNull((s = this.inputRef.value) == null ? void 0 : s.selectedIndex) : this._options.findIndex((l) => l.value === i), this.selectedOptions = (o = this.inputRef.value) == null ? void 0 : o.selectedOptions, this.valueChanged(i, e)), super.attributeChangedCallback(t, e, i);
+  }
+  update(t) {
+    var e, i;
+    super.update(t), t.has("_optionsProp") && this._optionsProp.length > 0 && (this._options = this._optionsProp, this.requestUpdate("_options"), !this.value && this._options.length > 0 && (this.value = this._options[0].value, this.selectedIndex = 0)), t.has("value") && this.value !== t.get("value") && (this.selectedIndex = this.touched ? this.returnNumberOrNull((e = this.inputRef.value) == null ? void 0 : e.selectedIndex) : this._options.findIndex((s) => s.value === this.value), this.selectedOptions = (i = this.inputRef.value) == null ? void 0 : i.selectedOptions, this.valueChanged(this.value, t.get("value"))), t.has("id") && !this.name && this.id && (this.name = this.id);
+  }
+  firstUpdated(t) {
+    var e;
+    super.firstUpdated(t), this._optionsProp.length && (this._options = this._optionsProp), !this.value && this._options.length > 0 ? (this.value = this._options[0].value, this.selectedIndex = 0) : this.selectedIndex = this._options.findIndex((i) => i.value === this.value), this.selectedOptions = (e = this.inputRef.value) == null ? void 0 : e.selectedOptions;
+  }
+  render() {
+    const t = `pkt-input ${this.fullwidth ? "pkt-input--fullwidth" : ""}`;
+    return a`
+      <pkt-input-wrapper
+        ?counter=${this.counter}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasError}
+        ?hasFieldset=${this.hasFieldset}
+        ?inline=${this.inline}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        useWrapper=${this.useWrapper}
+        ariaDescribedBy=${n(this.ariaDescribedBy)}
+        class="pkt-select"
+        errorMessage=${n(this.errorMessage)}
+        forId=${this.id + "-input"}
+        helptext=${n(this.helptext)}
+        helptextDropdown=${n(this.helptextDropdown)}
+        helptextDropdownButton=${n(this.helptextDropdownButton)}
+        label=${n(this.label)}
+        optionalText=${n(this.optionalText)}
+        requiredText=${n(this.requiredText)}
+        tagText=${n(this.tagText)}
+      >
+        <select
+          class=${t}
+          aria-invalid=${this.hasError}
+          aria-errormessage=${`${this.id}-error`}
+          aria-labelledby=${n(this.ariaLabelledby)}
+          ?disabled=${this.disabled}
+          id=${this.id + "-input"}
+          name=${(this.name || this.id) + "-input"}
+          value=${this.value}
+          @change=${(e) => {
+      this.touched = !0, this.value = e.target.value, e.stopImmediatePropagation();
+    }}
+          @input=${(e) => {
+      this.onInput(), e.stopImmediatePropagation();
+    }}
+          @focus=${(e) => {
+      this.onFocus(), e.stopImmediatePropagation();
+    }}
+          @blur=${(e) => {
+      this.onBlur(), e.stopImmediatePropagation();
+    }}
+          ${f(this.inputRef)}
+        >
+          ${this._options.length > 0 ? this._options.map(
+      (e) => a`<option
+                    value=${e.value}
+                    ?selected=${this.value == e.value || e.selected}
+                    ?disabled=${e.disabled}
+                    ?hidden=${e.hidden}
+                  >
+                    ${e.label}
+                  </option>`
+    ) : ""}
+        </select>
+        <div class="pkt-contents" slot="helptext">${m(this, "helptext")}</div>
+      </pkt-input-wrapper>
+    `;
+  }
+  returnNumberOrNull(t) {
+    return t == null || isNaN(t) ? null : t;
+  }
+}
+I([
+  h({ type: String })
+], d.prototype, "value");
+try {
+  c("pkt-select")(d);
+} catch {
+  console.warn("Forsøker å definere <pkt-select>, men den er allerede definert");
+}
+export {
+  d as P
+};

package/dist/select-dTWibR6_.cjs

@@ -0,0 +1,49 @@
+"use strict";const p=require("./element-gR_VtSiD.cjs"),u=require("./ref-CL-Xk9Xm.cjs"),n=require("./if-defined-BOW3ODSj.cjs"),c=require("./state-Dg-53wQ8.cjs"),v=require("./input-element-DdVhUvva.cjs"),f=require("./pkt-options-controller-5LXbEzuk.cjs"),_=require("./element-with-slot-ZX-up7jO.cjs");require("./input-wrapper-Bv9aqqVq.cjs");var $=Object.defineProperty,d=(r,t,e,i)=>{for(var s=void 0,o=r.length-1,l;o>=0;o--)(l=r[o])&&(s=l(t,e,s)||s);return s&&$(t,e,s),s};class h extends v.PktInputElement{constructor(){super(...arguments),this._optionsProp=[],this._options=[]}get options(){return this._options.map(t=>({...t,selected:this.isOptionSelected(t)}))}set options(t){this._optionsProp=t,this.requestUpdate("_optionsProp",this._options)}isOptionSelected(t){return Array.isArray(this.value)?this.value.includes(t.value):t.value===this.value}findOptionByValue(t){return this._options.find(e=>e.value===t)}getSelectedOptions(){return this._options.filter(t=>this.isOptionSelected(t))}parseOptions(){var i,s;const t=this._optionsProp.length>0,e=((s=(i=this.optionsController)==null?void 0:i.nodes)==null?void 0:s.length)&&this.optionsController.nodes.length>0;t?this._options=this._optionsProp:e&&(this._options=this.optionsController.options)}willUpdate(t){super.willUpdate(t),this.parseOptions()}}d([p.n({type:Array,attribute:"options"})],h.prototype,"_optionsProp");d([c.r()],h.prototype,"_options");var x=Object.defineProperty,b=(r,t,e,i)=>{for(var s=void 0,o=r.length-1,l;o>=0;o--)(l=r[o])&&(s=l(t,e,s)||s);return s&&x(t,e,s),s};class a extends h{constructor(){super(),this.inputRef=u.e(),this.value="",this.selectedIndex=-1,this.selectedOptions=void 0,this.optionsController=new f.PktOptionsSlotController(this)}connectedCallback(){super.connectedCallback(),this.parseOptions(),this._options.forEach(t=>{t.selected&&!this.value&&(this.value=t.value)})}add(t,e){const i={value:t.value||t.text,label:t.text||t.value,selected:t.selected,disabled:t.disabled};if(e===void 0)this._options.push(i);else if(typeof e=="number")this._options.splice(e,0,i);else{const s=e.value||e.text,o=this._options.findIndex(l=>l.value===s);o>=0?this._options.splice(o,0,i):this._options.push(i)}t.selected&&(this.value=t.value||t.text,this.selectedIndex=this._options.findIndex(s=>s.value===this.value)),this.requestUpdate()}remove(t){var e;typeof t=="number"&&(this.selectedIndex===t&&(this.value=((e=this._options[0])==null?void 0:e.value)||""),this._options.splice(t,1),this.requestUpdate())}item(t){var e;return(e=this.inputRef.value)==null?void 0:e.item(t)}namedItem(t){var e;return(e=this.inputRef.value)==null?void 0:e.namedItem(t)}showPicker(){this.inputRef.value&&"showPicker"in this.inputRef.value&&this.inputRef.value.showPicker()}attributeChangedCallback(t,e,i){var s,o;t==="options"&&(this._options=i?JSON.parse(i):[]),t==="value"&&this.value!==e&&(this.selectedIndex=this.touched?this.returnNumberOrNull((s=this.inputRef.value)==null?void 0:s.selectedIndex):this._options.findIndex(l=>l.value===i),this.selectedOptions=(o=this.inputRef.value)==null?void 0:o.selectedOptions,this.valueChanged(i,e)),super.attributeChangedCallback(t,e,i)}update(t){var e,i;super.update(t),t.has("_optionsProp")&&this._optionsProp.length>0&&(this._options=this._optionsProp,this.requestUpdate("_options"),!this.value&&this._options.length>0&&(this.value=this._options[0].value,this.selectedIndex=0)),t.has("value")&&this.value!==t.get("value")&&(this.selectedIndex=this.touched?this.returnNumberOrNull((e=this.inputRef.value)==null?void 0:e.selectedIndex):this._options.findIndex(s=>s.value===this.value),this.selectedOptions=(i=this.inputRef.value)==null?void 0:i.selectedOptions,this.valueChanged(this.value,t.get("value"))),t.has("id")&&!this.name&&this.id&&(this.name=this.id)}firstUpdated(t){var e;super.firstUpdated(t),this._optionsProp.length&&(this._options=this._optionsProp),!this.value&&this._options.length>0?(this.value=this._options[0].value,this.selectedIndex=0):this.selectedIndex=this._options.findIndex(i=>i.value===this.value),this.selectedOptions=(e=this.inputRef.value)==null?void 0:e.selectedOptions}render(){const t=`pkt-input ${this.fullwidth?"pkt-input--fullwidth":""}`;return p.b`
+      <pkt-input-wrapper
+        ?counter=${this.counter}
+        ?disabled=${this.disabled}
+        ?hasError=${this.hasError}
+        ?hasFieldset=${this.hasFieldset}
+        ?inline=${this.inline}
+        ?optionalTag=${this.optionalTag}
+        ?requiredTag=${this.requiredTag}
+        useWrapper=${this.useWrapper}
+        ariaDescribedBy=${n.o(this.ariaDescribedBy)}
+        class="pkt-select"
+        errorMessage=${n.o(this.errorMessage)}
+        forId=${this.id+"-input"}
+        helptext=${n.o(this.helptext)}
+        helptextDropdown=${n.o(this.helptextDropdown)}
+        helptextDropdownButton=${n.o(this.helptextDropdownButton)}
+        label=${n.o(this.label)}
+        optionalText=${n.o(this.optionalText)}
+        requiredText=${n.o(this.requiredText)}
+        tagText=${n.o(this.tagText)}
+      >
+        <select
+          class=${t}
+          aria-invalid=${this.hasError}
+          aria-errormessage=${`${this.id}-error`}
+          aria-labelledby=${n.o(this.ariaLabelledby)}
+          ?disabled=${this.disabled}
+          id=${this.id+"-input"}
+          name=${(this.name||this.id)+"-input"}
+          value=${this.value}
+          @change=${e=>{this.touched=!0,this.value=e.target.value,e.stopImmediatePropagation()}}
+          @input=${e=>{this.onInput(),e.stopImmediatePropagation()}}
+          @focus=${e=>{this.onFocus(),e.stopImmediatePropagation()}}
+          @blur=${e=>{this.onBlur(),e.stopImmediatePropagation()}}
+          ${u.n(this.inputRef)}
+        >
+          ${this._options.length>0?this._options.map(e=>p.b`<option
+                    value=${e.value}
+                    ?selected=${this.value==e.value||e.selected}
+                    ?disabled=${e.disabled}
+                    ?hidden=${e.hidden}
+                  >
+                    ${e.label}
+                  </option>`):""}
+        </select>
+        <div class="pkt-contents" slot="helptext">${_.slotContent(this,"helptext")}</div>
+      </pkt-input-wrapper>
+    `}returnNumberOrNull(t){return t==null||isNaN(t)?null:t}}b([p.n({type:String})],a.prototype,"value");try{p.t("pkt-select")(a)}catch{console.warn("Forsøker å definere <pkt-select>, men den er allerede definert")}exports.PktSelect=a;

package/dist/tabitem-B9-jeV97.js

@@ -0,0 +1,334 @@
+import { P as w, s as y } from "./element-with-slot-Dqk6-TRR.js";
+import { t as $, b, n as c } from "./element-CPpT3rFQ.js";
+import { r as v } from "./state-C_1EOo3D.js";
+import { e as R, n as k } from "./ref-Bg_Swj5w.js";
+import { o as l } from "./if-defined-B0krMLad.js";
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let C = class extends Event {
+  constructor(t, e, r, s) {
+    super("context-request", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = e, this.callback = r, this.subscribe = s ?? !1;
+  }
+};
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let m = class {
+  constructor(t, e, r, s) {
+    if (this.subscribe = !1, this.provided = !1, this.value = void 0, this.t = (o, i) => {
+      this.unsubscribe && (this.unsubscribe !== i && (this.provided = !1, this.unsubscribe()), this.subscribe || this.unsubscribe()), this.value = o, this.host.requestUpdate(), this.provided && !this.subscribe || (this.provided = !0, this.callback && this.callback(o, i)), this.unsubscribe = i;
+    }, this.host = t, e.context !== void 0) {
+      const o = e;
+      this.context = o.context, this.callback = o.callback, this.subscribe = o.subscribe ?? !1;
+    } else this.context = e, this.callback = r, this.subscribe = s ?? !1;
+    this.host.addController(this);
+  }
+  hostConnected() {
+    this.dispatchRequest();
+  }
+  hostDisconnected() {
+    this.unsubscribe && (this.unsubscribe(), this.unsubscribe = void 0);
+  }
+  dispatchRequest() {
+    this.host.dispatchEvent(new C(this.context, this.host, this.t, this.subscribe));
+  }
+};
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+class A {
+  get value() {
+    return this.o;
+  }
+  set value(t) {
+    this.setValue(t);
+  }
+  setValue(t, e = !1) {
+    const r = e || !Object.is(t, this.o);
+    this.o = t, r && this.updateObservers();
+  }
+  constructor(t) {
+    this.subscriptions = /* @__PURE__ */ new Map(), this.updateObservers = () => {
+      for (const [e, { disposer: r }] of this.subscriptions) e(this.o, r);
+    }, t !== void 0 && (this.value = t);
+  }
+  addCallback(t, e, r) {
+    if (!r) return void t(this.value);
+    this.subscriptions.has(t) || this.subscriptions.set(t, { disposer: () => {
+      this.subscriptions.delete(t);
+    }, consumerHost: e });
+    const { disposer: s } = this.subscriptions.get(t);
+    t(this.value, s);
+  }
+  clearCallbacks() {
+    this.subscriptions.clear();
+  }
+}
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let P = class extends Event {
+  constructor(t, e) {
+    super("context-provider", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = e;
+  }
+};
+class g extends A {
+  constructor(t, e, r) {
+    var s, o;
+    super(e.context !== void 0 ? e.initialValue : r), this.onContextRequest = (i) => {
+      if (i.context !== this.context) return;
+      const a = i.contextTarget ?? i.composedPath()[0];
+      a !== this.host && (i.stopPropagation(), this.addCallback(i.callback, a, i.subscribe));
+    }, this.onProviderRequest = (i) => {
+      if (i.context !== this.context || (i.contextTarget ?? i.composedPath()[0]) === this.host) return;
+      const a = /* @__PURE__ */ new Set();
+      for (const [f, { consumerHost: x }] of this.subscriptions) a.has(f) || (a.add(f), x.dispatchEvent(new C(this.context, x, f, !0)));
+      i.stopPropagation();
+    }, this.host = t, e.context !== void 0 ? this.context = e.context : this.context = e, this.attachListeners(), (o = (s = this.host).addController) == null || o.call(s, this);
+  }
+  attachListeners() {
+    this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
+  }
+  hostConnected() {
+    this.host.dispatchEvent(new P(this.context, this.host));
+  }
+}
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function _({ context: n }) {
+  return (t, e) => {
+    const r = /* @__PURE__ */ new WeakMap();
+    if (typeof e == "object") return { get() {
+      return t.get.call(this);
+    }, set(s) {
+      return r.get(this).setValue(s), t.set.call(this, s);
+    }, init(s) {
+      return r.set(this, new g(this, { context: n, initialValue: s })), s;
+    } };
+    {
+      t.constructor.addInitializer(((i) => {
+        r.set(i, new g(i, { context: n }));
+      }));
+      const s = Object.getOwnPropertyDescriptor(t, e);
+      let o;
+      if (s === void 0) {
+        const i = /* @__PURE__ */ new WeakMap();
+        o = { get() {
+          return i.get(this);
+        }, set(a) {
+          r.get(this).setValue(a), i.set(this, a);
+        }, configurable: !0, enumerable: !0 };
+      } else {
+        const i = s.set;
+        o = { ...s, set(a) {
+          r.get(this).setValue(a), i == null || i.call(this, a);
+        } };
+      }
+      return void Object.defineProperty(t, e, o);
+    }
+  };
+}
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+function S({ context: n, subscribe: t }) {
+  return (e, r) => {
+    typeof r == "object" ? r.addInitializer((function() {
+      new m(this, { context: n, callback: (s) => {
+        e.set.call(this, s);
+      }, subscribe: t });
+    })) : e.constructor.addInitializer(((s) => {
+      new m(s, { context: n, callback: (o) => {
+        s[r] = o;
+      }, subscribe: t });
+    }));
+  };
+}
+const N = Symbol("pkt-tabs-context");
+var T = Object.defineProperty, p = (n, t, e, r) => {
+  for (var s = void 0, o = n.length - 1, i; o >= 0; o--)
+    (i = n[o]) && (s = i(t, e, s) || s);
+  return s && T(t, e, s), s;
+};
+class d extends w {
+  constructor() {
+    super(...arguments), this.arrowNav = !0, this.disableArrowNav = !1, this.tabRefs = [], this.tabCount = 0, this.context = {
+      useArrowNav: this.useArrowNav,
+      registerTab: this.registerTab.bind(this),
+      handleClick: this.handleClick.bind(this),
+      handleKeyUp: this.handleKeyUp.bind(this)
+    };
+  }
+  get useArrowNav() {
+    return this.arrowNav && !this.disableArrowNav;
+  }
+  // Update context when properties change
+  updated(t) {
+    (t.has("arrowNav") || t.has("disableArrowNav")) && (this.context = {
+      ...this.context,
+      useArrowNav: this.useArrowNav
+    });
+  }
+  registerTab(t, e) {
+    this.tabRefs[e] = t, this.tabCount = Math.max(this.tabCount, e + 1);
+  }
+  handleClick(t) {
+    this.dispatchEvent(
+      new CustomEvent("tab-selected", {
+        detail: { index: t },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  handleKeyUp(t, e) {
+    var r, s;
+    this.useArrowNav && (t.code === "ArrowLeft" && e !== 0 && ((r = this.tabRefs[e - 1]) == null || r.focus()), t.code === "ArrowRight" && e < this.tabCount - 1 && ((s = this.tabRefs[e + 1]) == null || s.focus()), (t.code === "ArrowDown" || t.code === "Space") && this.dispatchEvent(
+      new CustomEvent("tab-selected", {
+        detail: { index: e },
+        bubbles: !0,
+        composed: !0
+      })
+    ));
+  }
+  render() {
+    const t = this.useArrowNav ? "tablist" : "navigation";
+    return b`
+      <div class="pkt-tabs">
+        <div class="pkt-tabs__list" role=${t}>${y(this)}</div>
+      </div>
+    `;
+  }
+}
+p([
+  c({ type: Boolean, reflect: !0, attribute: "arrow-nav" })
+], d.prototype, "arrowNav");
+p([
+  c({ type: Boolean, reflect: !0, attribute: "disable-arrow-nav" })
+], d.prototype, "disableArrowNav");
+p([
+  v()
+], d.prototype, "tabRefs");
+p([
+  v()
+], d.prototype, "tabCount");
+p([
+  _({ context: N }),
+  v()
+], d.prototype, "context");
+try {
+  $("pkt-tabs")(d);
+} catch {
+  console.warn("Forsøker å definere <pkt-tabs>, men den er allerede definert");
+}
+var q = Object.defineProperty, u = (n, t, e, r) => {
+  for (var s = void 0, o = n.length - 1, i; o >= 0; o--)
+    (i = n[o]) && (s = i(t, e, s) || s);
+  return s && q(t, e, s), s;
+};
+class h extends w {
+  constructor() {
+    super(), this.active = !1, this.href = "", this.icon = "", this.controls = "", this.tag = "", this.tagSkin = "blue", this.index = 0, this.elementRef = R();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.updateComplete.then(() => {
+      this.elementRef.value && this.context && this.context.registerTab(this.elementRef.value, this.index);
+    });
+  }
+  handleClick() {
+    this.context && this.context.handleClick(this.index);
+  }
+  handleKeyUp(t) {
+    this.context && this.context.handleKeyUp(t, this.index);
+  }
+  render() {
+    var a;
+    const t = ((a = this.context) == null ? void 0 : a.useArrowNav) ?? !0, e = this.active ? "active" : "", r = t ? "tab" : void 0, s = t ? this.active : void 0, o = this.active || !t ? void 0 : -1, i = b`
+      ${this.icon ? b`<pkt-icon name=${this.icon} class="pkt-icon--small"></pkt-icon>` : ""}
+      <span>${y(this)}</span>
+      ${this.tag ? b`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>` : ""}
+    `;
+    return this.href ? b`
+        <a
+          ${k(this.elementRef)}
+          href=${this.href}
+          class="pkt-tabs__link ${e}"
+          role=${l(r)}
+          aria-selected=${l(s)}
+          aria-controls=${l(this.controls || void 0)}
+          tabindex=${l(o)}
+          @click=${this.handleClick}
+          @keyup=${this.handleKeyUp}
+        >
+          ${i}
+        </a>
+      ` : b`
+      <button
+        ${k(this.elementRef)}
+        type="button"
+        class="pkt-tabs__button pkt-link-button ${e}"
+        role=${l(r)}
+        aria-selected=${l(s)}
+        aria-controls=${l(this.controls || void 0)}
+        tabindex=${l(o)}
+        @click=${this.handleClick}
+        @keyup=${this.handleKeyUp}
+      >
+        ${i}
+      </button>
+    `;
+  }
+}
+u([
+  c({ type: Boolean, reflect: !0 })
+], h.prototype, "active");
+u([
+  c({ type: String, reflect: !0 })
+], h.prototype, "href");
+u([
+  c({ type: String, reflect: !0 })
+], h.prototype, "icon");
+u([
+  c({ type: String, reflect: !0 })
+], h.prototype, "controls");
+u([
+  c({ type: String, reflect: !0 })
+], h.prototype, "tag");
+u([
+  c({ type: String, reflect: !0, attribute: "tag-skin" })
+], h.prototype, "tagSkin");
+u([
+  c({ type: Number, reflect: !0 })
+], h.prototype, "index");
+u([
+  S({ context: N, subscribe: !0 }),
+  c({ attribute: !1 })
+], h.prototype, "context");
+try {
+  $("pkt-tab-item")(h);
+} catch {
+  console.warn("Forsøker å definere <pkt-tab-item>, men den er allerede definert");
+}
+export {
+  h as P,
+  d as a
+};