@oslokommune/punkt-elements 20.0.0 → 20.0.5

package/dist/{select-BvtUxW0Q.js → select-Curv4lWO.js}

@@ -1,12 +1,12 @@
-import { _ as e, d as t, l as n, n as r, u as i } from "./element-DLgZkx5L.js";
-import { n as a } from "./element-with-slot-mG-h7Sjw.js";
-import { r as o } from "./input-wrapper-DkpJS1hR.js";
-import { t as s } from "./if-defined-DiYi2v_Q.js";
-import { n as c, t as l } from "./ref-BAegS9BR.js";
-import { t as u } from "./input-element-De40zUox.js";
-import { t as d } from "./pkt-options-controller-CzvBlEPD.js";
-//#region src/base-elements/options-input-element.ts
-var f = class extends u {
+import { _ as e, d as t, l as n, n as r, u as i } from "./element-Bwc-likm.js";
+import { n as a, t as o } from "./ref-qE1RBrI7.js";
+import { t as s } from "./if-defined-B3pYog2C.js";
+import { t as c } from "./input-element-DE0FzjgP.js";
+import { t as l } from "./pkt-options-controller-Dz7DP0wC.js";
+import { n as u } from "./element-with-slot-47quDZRt.js";
+import { r as d } from "./input-wrapper-C6BRd-cu.js";
+// src/base-elements/options-input-element.ts
+var f = class extends c {
 	constructor(...e) {
 		super(...e), this._optionsProp = [], this._options = [];
 	}
@@ -40,11 +40,10 @@ r([i({
 	type: Array,
 	attribute: "options"
 })], f.prototype, "_optionsProp", void 0), r([n()], f.prototype, "_options", void 0);
-//#endregion
-//#region src/components/select/select.ts
+// src/components/select/select.ts
 var p = class extends f {
 	constructor() {
-		super(), this.inputRef = l(), this.value = "", this.selectedIndex = -1, this.selectedOptions = void 0, this.defaultedToFirstOption = !1, this.optionsController = new d(this);
+		super(), this.inputRef = o(), this.value = "", this.selectedIndex = -1, this.selectedOptions = void 0, this.defaultedToFirstOption = !1, this.optionsController = new l(this);
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.parseOptions(), this._options.forEach((e) => {
@@ -94,7 +93,7 @@ var p = class extends f {
 		let t = `pkt-input pkt-input--${this.inputSize} ${this.fullwidth ? "pkt-input--fullwidth" : ""}`;
 		return e`
       <pkt-input-wrapper
-        ${a(this, ["helptext"])}
+        ${u(this, ["helptext"])}
         .strings=${this.strings}
         .size=${this.inputSize}
         ?disabled=${this.isDisabled}
@@ -119,7 +118,7 @@ var p = class extends f {
           class=${t}
           aria-invalid=${this.hasError}
           aria-errormessage=${s(this.hasError ? `${this.id}-input-error` : void 0)}
-          aria-describedby=${s(o({
+          aria-describedby=${s(d({
 			id: this.id + "-input",
 			hasHelptext: !!this.helptext || this.hasSlotContent("helptext"),
 			hasCounter: !1,
@@ -141,7 +140,7 @@ var p = class extends f {
           @blur=${(e) => {
 			this.onBlur(), e.stopImmediatePropagation();
 		}}
-          ${c(this.inputRef)}
+          ${a(this.inputRef)}
         >
           ${this._options.length > 0 ? this._options.map((t) => e`<option
                     value=${t.value}
@@ -165,8 +164,6 @@ try {
 } catch {
 	console.warn("Forsøker å definere <pkt-select>, men den er allerede definert");
 }
-//#endregion
-//#region src/components/select/index.ts
+// src/components/select/index.ts
 var m = p;
-//#endregion
 export { p as n, m as t };

package/dist/shared-types/index.d.ts

@@ -46,8 +46,9 @@ export type { IPktTextareaBase, ITextareaSpecProps } from './textarea';
 export { TEXTINPUT_DEFAULTS, TEXTINPUT_TYPES } from './textinput';
 export type { TPktTextinputType, IPktTextinputBase, ITextinputSpecProps } from './textinput';
 export type { TPktCounterPosition, IPktInputWrapperBase, IInputWrapperSpecProps, } from './input-wrapper';
-export { TAG_SKINS, TAG_STATES } from './skin';
-export type { TMessageboxSkin, TTagSkin, TTagState } from './skin';
+export type { TMessageboxSkin } from './skin';
+export { TAG_SKINS, TAG_STATES, TAG_TEXT_STYLES, TAG_DEFAULTS } from './tag';
+export type { TTagSkin, TTagState, TTagTextStyle, IPktTagBase, ITagSpecProps } from './tag';
 export { MESSAGEBOX_SKINS, MESSAGEBOX_LIGHT_ONLY_SKINS, MESSAGEBOX_DEFAULTS } from './messagebox';
 export type { IPktMessageboxBase, IMessageboxSpecProps } from './messagebox';
 export { CALENDAR_DEFAULTS } from './calendar';

package/dist/shared-types/skin.d.ts

@@ -9,13 +9,4 @@ export { ALERT_SKINS, type TAlertSkin } from './alert';
 export { ACCORDION_SKINS, type TAccordionSkin } from './accordion';
 export { CARD_SKINS, type TCardSkin } from './card';
 export { MESSAGEBOX_SKINS, type TMessageboxSkin } from './messagebox';
-/**
- * Tag component skin variants — shared runtime source for types, specs and demo pages.
- */
-export declare const TAG_SKINS: readonly ['gray', 'gray-light', 'blue-dark', 'blue', 'blue-light', 'blue-pale', 'green', 'green-light', 'red', 'red-light', 'yellow', 'yellow-light', 'beige', 'beige-light'];
-export type TTagSkin = (typeof TAG_SKINS)[number];
-/**
- * Forces a tag into a visual state without the user interacting with it.
- */
-export declare const TAG_STATES: readonly ['hover', 'focus', 'active'];
-export type TTagState = (typeof TAG_STATES)[number];
+export { TAG_SKINS, TAG_STATES, type TTagSkin, type TTagState } from './tag';

package/dist/shared-types/tag.d.ts

@@ -0,0 +1,46 @@
+/**
+ * tag.ts
+ *
+ * Shared types and defaults for Tag, used by both React and Elements.
+ */
+import type { IPktStringsProps } from '../shared-strings';
+import type { THTMLButtonType } from './form';
+import type { TPktSizeBase } from './size';
+/** Tag skins: shared runtime source for types, specs and demo pages. */
+export declare const TAG_SKINS: readonly ['gray', 'gray-light', 'blue-dark', 'blue', 'blue-light', 'blue-pale', 'green', 'green-light', 'red', 'red-light', 'yellow', 'yellow-light', 'beige', 'beige-light'];
+export type TTagSkin = (typeof TAG_SKINS)[number];
+/** Forces a tag into a visual state without the user interacting with it. */
+export declare const TAG_STATES: readonly ['hover', 'focus', 'active'];
+export type TTagState = (typeof TAG_STATES)[number];
+export declare const TAG_TEXT_STYLES: readonly ['normal-text', 'thin-text'];
+export type TTagTextStyle = (typeof TAG_TEXT_STYLES)[number];
+/**
+ * Framework-agnostic props for Tag.
+ *
+ * @remarks React adds `onClose` and `children`, and only accepts `type` when
+ * `closeTag` is `true`. Elements narrows `iconName` to `PktIconName` and
+ * dispatches a `close` event instead of `onClose`.
+ */
+export interface IPktTagBase extends IPktStringsProps<'tag'> {
+    closeTag?: boolean;
+    size?: TPktSizeBase;
+    skin?: TTagSkin;
+    state?: TTagState | null;
+    textStyle?: TTagTextStyle | null;
+    iconName?: string;
+    type?: THTMLButtonType;
+    ariaLabel?: string | null;
+}
+/**
+ * Props documented in the component spec (docs and Preview).
+ * The spec file is type-checked against this.
+ */
+export type ITagSpecProps = Pick<IPktTagBase, 'size' | 'iconName' | 'skin' | 'closeTag' | 'state' | 'textStyle' | 'type' | 'ariaLabel'>;
+/** Default values, shared by React and Elements. */
+export declare const TAG_DEFAULTS: {
+    readonly closeTag: false;
+    readonly size: 'medium';
+    readonly skin: 'gray';
+    readonly textStyle: 'normal-text';
+    readonly type: 'button';
+};

package/dist/{tabs-Bu_-WfCK.js → tabs-Cg16Sl3u.js}

@@ -1,12 +1,12 @@
-import { _ as e, d as t, l as n, n as r, u as i } from "./element-DLgZkx5L.js";
-import { i as a, t as o } from "./element-with-slot-mG-h7Sjw.js";
-import { t as s } from "./if-defined-DiYi2v_Q.js";
-import { n as c, t as l } from "./consume-Bp12si68.js";
-import { t as u } from "./provide-_MnlMGnw.js";
-import { n as d, t as f } from "./ref-BAegS9BR.js";
-import "./tag-CkZ2Mn4a.js";
-//#region src/components/tabs/tabs-context.ts
-var p = c(Symbol("pkt-tabs-context")), m = class extends o {
+import { i as e, t } from "./element-with-slot-47quDZRt.js";
+import { _ as n, d as r, l as i, n as a, u as o } from "./element-Bwc-likm.js";
+import { t as s } from "./provide-DFu2tSv_.js";
+import { n as c, t as l } from "./consume-C6aWEFx-.js";
+import { n as u, t as d } from "./ref-qE1RBrI7.js";
+import { t as f } from "./if-defined-B3pYog2C.js";
+import "./tag-HXcXopyA.js";
+// src/components/tabs/tabs-context.ts
+var p = c(Symbol("pkt-tabs-context")), m = class extends t {
 	constructor(...e) {
 		super(...e), this.arrowNav = !0, this.disableArrowNav = !1, this.separatorIconName = "", this.separatorIconPath = "", this.tabRefs = [], this.disabledMap = {}, this.tabCount = 0, this.context = {
 			useArrowNav: this.useArrowNav,
@@ -80,41 +80,40 @@ var p = c(Symbol("pkt-tabs-context")), m = class extends o {
 		}
 	}
 	render() {
-		let t = this.useArrowNav ? "tablist" : "navigation", n = this.separatorIconName || this.separatorIconPath ? "pkt-tabs pkt-tabs--with-separator" : "pkt-tabs";
-		return e`
-      <div class=${n}>
-        <div class="pkt-tabs__list" role=${t}>${a(this)}</div>
+		let t = this.useArrowNav ? "tablist" : "navigation", r = this.separatorIconName || this.separatorIconPath ? "pkt-tabs pkt-tabs--with-separator" : "pkt-tabs";
+		return n`
+      <div class=${r}>
+        <div class="pkt-tabs__list" role=${t}>${e(this)}</div>
       </div>
     `;
 	}
 };
-r([i({
+a([o({
 	type: Boolean,
 	reflect: !0,
 	attribute: "arrow-nav"
-})], m.prototype, "arrowNav", void 0), r([i({
+})], m.prototype, "arrowNav", void 0), a([o({
 	type: Boolean,
 	reflect: !0,
 	attribute: "disable-arrow-nav"
-})], m.prototype, "disableArrowNav", void 0), r([i({
+})], m.prototype, "disableArrowNav", void 0), a([o({
 	type: String,
 	reflect: !0,
 	attribute: "separator-icon-name"
-})], m.prototype, "separatorIconName", void 0), r([i({
+})], m.prototype, "separatorIconName", void 0), a([o({
 	type: String,
 	reflect: !0,
 	attribute: "separator-icon-path"
-})], m.prototype, "separatorIconPath", void 0), r([n()], m.prototype, "tabRefs", void 0), r([n()], m.prototype, "disabledMap", void 0), r([n()], m.prototype, "tabCount", void 0), r([u({ context: p }), n()], m.prototype, "context", void 0);
+})], m.prototype, "separatorIconPath", void 0), a([i()], m.prototype, "tabRefs", void 0), a([i()], m.prototype, "disabledMap", void 0), a([i()], m.prototype, "tabCount", void 0), a([s({ context: p }), i()], m.prototype, "context", void 0);
 try {
-	t("pkt-tabs")(m);
+	r("pkt-tabs")(m);
 } catch {
 	console.warn("Forsøker å definere <pkt-tabs>, men den er allerede definert");
 }
-//#endregion
-//#region src/components/tabs/tabitem.ts
-var h = class extends o {
+// src/components/tabs/tabitem.ts
+var h = class extends t {
 	constructor() {
-		super(), this.active = !1, this.disabled = !1, this.href = "", this.icon = "", this.controls = "", this.tag = "", this.tagSkin = "blue", this.index = 0, this.elementRef = f();
+		super(), this.active = !1, this.disabled = !1, this.href = "", this.icon = "", this.controls = "", this.tag = "", this.tagSkin = "blue", this.index = 0, this.elementRef = d();
 	}
 	connectedCallback() {
 		super.connectedCallback(), this.updateComplete.then(() => {
@@ -131,81 +130,79 @@ var h = class extends o {
 		this.disabled && (e.key === "Enter" || e.key === " " || e.key === "Spacebar") ? (e.preventDefault(), e.stopPropagation()) : this.context && this.context.handleKeyUp(e, this.index);
 	}
 	render() {
-		let t = this.context?.useArrowNav ?? !0, n = this.active && !this.disabled, r = [n ? "active" : "", this.disabled ? "pkt-tabs__item--disabled" : ""].filter(Boolean).join(" "), i = t ? "tab" : void 0, o = t ? n : void 0, c = this.disabled ? -1 : n || !t ? void 0 : -1, l = `pkt-icon--small ${this.icon === "check" ? "pkt-tabs__status-icon" : ""}`, u = e`
-      ${this.icon ? e`<pkt-icon name=${this.icon} class=${l}></pkt-icon>` : ""}
-      <span>${a(this)}</span>
-      ${this.tag ? e`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>` : ""}
+		let t = this.context?.useArrowNav ?? !0, r = this.active && !this.disabled, i = [r ? "active" : "", this.disabled ? "pkt-tabs__item--disabled" : ""].filter(Boolean).join(" "), a = t ? "tab" : void 0, o = t ? r : void 0, s = this.disabled ? -1 : r || !t ? void 0 : -1, c = `pkt-icon--small ${this.icon === "check" ? "pkt-tabs__status-icon" : ""}`, l = n`
+      ${this.icon ? n`<pkt-icon name=${this.icon} class=${c}></pkt-icon>` : ""}
+      <span>${e(this)}</span>
+      ${this.tag ? n`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>` : ""}
     `;
-		return this.href ? e`
+		return this.href ? n`
         <a
-          ${d(this.elementRef)}
-          href=${s(this.disabled ? void 0 : this.href)}
-          class="pkt-tabs__link ${r}"
-          role=${s(i)}
-          aria-selected=${s(o)}
-          aria-disabled=${s(this.disabled ? "true" : void 0)}
-          aria-controls=${s(this.controls || void 0)}
-          tabindex=${s(c)}
+          ${u(this.elementRef)}
+          href=${f(this.disabled ? void 0 : this.href)}
+          class="pkt-tabs__link ${i}"
+          role=${f(a)}
+          aria-selected=${f(o)}
+          aria-disabled=${f(this.disabled ? "true" : void 0)}
+          aria-controls=${f(this.controls || void 0)}
+          tabindex=${f(s)}
           @click=${this.handleClick}
           @keydown=${this.handleKeyDown}
         >
-          ${u}
+          ${l}
         </a>
-      ` : e`
+      ` : n`
       <button
-        ${d(this.elementRef)}
+        ${u(this.elementRef)}
         type="button"
-        class="pkt-tabs__button pkt-link-button ${r}"
+        class="pkt-tabs__button pkt-link-button ${i}"
         ?disabled=${this.disabled}
-        aria-disabled=${s(this.disabled ? "true" : void 0)}
-        role=${s(i)}
-        aria-selected=${s(o)}
-        aria-controls=${s(this.controls || void 0)}
-        tabindex=${s(c)}
+        aria-disabled=${f(this.disabled ? "true" : void 0)}
+        role=${f(a)}
+        aria-selected=${f(o)}
+        aria-controls=${f(this.controls || void 0)}
+        tabindex=${f(s)}
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
       >
-        ${u}
+        ${l}
       </button>
     `;
 	}
 };
-r([i({
+a([o({
 	type: Boolean,
 	reflect: !0
-})], h.prototype, "active", void 0), r([i({
+})], h.prototype, "active", void 0), a([o({
 	type: Boolean,
 	reflect: !0
-})], h.prototype, "disabled", void 0), r([i({
+})], h.prototype, "disabled", void 0), a([o({
 	type: String,
 	reflect: !0
-})], h.prototype, "href", void 0), r([i({
+})], h.prototype, "href", void 0), a([o({
 	type: String,
 	reflect: !0
-})], h.prototype, "icon", void 0), r([i({
+})], h.prototype, "icon", void 0), a([o({
 	type: String,
 	reflect: !0
-})], h.prototype, "controls", void 0), r([i({
+})], h.prototype, "controls", void 0), a([o({
 	type: String,
 	reflect: !0
-})], h.prototype, "tag", void 0), r([i({
+})], h.prototype, "tag", void 0), a([o({
 	type: String,
 	reflect: !0,
 	attribute: "tag-skin"
-})], h.prototype, "tagSkin", void 0), r([i({
+})], h.prototype, "tagSkin", void 0), a([o({
 	type: Number,
 	reflect: !0
-})], h.prototype, "index", void 0), r([l({
+})], h.prototype, "index", void 0), a([l({
 	context: p,
 	subscribe: !0
-}), i({ attribute: !1 })], h.prototype, "context", void 0);
+}), o({ attribute: !1 })], h.prototype, "context", void 0);
 try {
-	t("pkt-tab-item")(h);
+	r("pkt-tab-item")(h);
 } catch {
 	console.warn("Forsøker å definere <pkt-tab-item>, men den er allerede definert");
 }
-//#endregion
-//#region src/components/tabs/index.ts
+// src/components/tabs/index.ts
 var g = m;
-//#endregion
 export { h as n, m as r, g as t };

package/dist/{tabs-Dwk5PKzP.cjs → tabs-n7hQWwyI.cjs}

@@ -1,40 +1,40 @@
-const e=require("./element-CEarCnHH.cjs"),t=require("./element-with-slot-CeKuRE3_.cjs"),n=require("./if-defined-Ci4ZQsgL.cjs"),r=require("./consume-kEjgTrAp.cjs"),i=require("./provide-Cz18sYug.cjs"),a=require("./ref-B6p6mQkO.cjs");require("./tag-1SSexs0H.cjs");var o=r.n(Symbol(`pkt-tabs-context`)),s=class extends t.t{constructor(...e){super(...e),this.arrowNav=!0,this.disableArrowNav=!1,this.separatorIconName=``,this.separatorIconPath=``,this.tabRefs=[],this.disabledMap={},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}willUpdate(e){(e.has(`arrowNav`)||e.has(`disableArrowNav`))&&(this.context={...this.context,useArrowNav:this.useArrowNav})}updated(){this.updateComplete.then(()=>this.syncSeparators())}syncSeparators(){let e=this.querySelector(`.pkt-tabs__list`);if(!e||(e.querySelectorAll(`.pkt-tabs__separator`).forEach(e=>e.remove()),!(this.separatorIconName||this.separatorIconPath)))return;let t=Array.from(e.children).filter(e=>!e.classList.contains(`pkt-tabs__separator`));for(let e=0;e<t.length-1;e++){let n=document.createElement(`span`);if(n.className=`pkt-tabs__separator`,n.setAttribute(`aria-hidden`,`true`),n.setAttribute(`role`,`presentation`),this.separatorIconPath){let e=document.createElement(`img`);e.setAttribute(`src`,this.separatorIconPath),e.setAttribute(`alt`,``),e.setAttribute(`aria-hidden`,`true`),n.appendChild(e)}else if(this.separatorIconName){let e=document.createElement(`pkt-icon`);e.setAttribute(`name`,this.separatorIconName),e.classList.add(`pkt-tabs__separator-icon`),n.appendChild(e)}t[e].after(n)}}registerTab(e,t,n=!1){this.tabRefs[t]=e,this.disabledMap[t]=n,this.tabCount=Math.max(this.tabCount,t+1)}isTabDisabled(e){return!!this.disabledMap[e]}findEnabledIndex(e,t){let n=e+t;for(;n>=0&&n<this.tabCount;){if(!this.isTabDisabled(n))return n;n+=t}return null}handleClick(e){this.isTabDisabled(e)||this.dispatchEvent(new CustomEvent(`tab-selected`,{detail:{index:e},bubbles:!0,composed:!0}))}handleKeyUp(e,t){if(this.useArrowNav){if(e.key===`ArrowLeft`){e.preventDefault();let n=this.findEnabledIndex(t,-1);n!==null&&this.tabRefs[n]?.focus()}if(e.key===`ArrowRight`){e.preventDefault();let n=this.findEnabledIndex(t,1);n!==null&&this.tabRefs[n]?.focus()}(e.key===`Enter`||e.key===` `||e.key===`Spacebar`||e.key===`ArrowDown`)&&(e.preventDefault(),this.handleClick(t))}}render(){let n=this.useArrowNav?`tablist`:`navigation`,r=this.separatorIconName||this.separatorIconPath?`pkt-tabs pkt-tabs--with-separator`:`pkt-tabs`;return e._`
+const e=require("./element-with-slot-D_8fAzCW.cjs"),t=require("./element-CEarCnHH.cjs"),n=require("./provide-Cz18sYug.cjs"),r=require("./consume-kEjgTrAp.cjs"),i=require("./ref-C6VUWwmF.cjs"),a=require("./if-defined-Ci4ZQsgL.cjs");require("./tag-BAikRN2Y.cjs");var o=r.n(Symbol(`pkt-tabs-context`)),s=class extends e.t{constructor(...e){super(...e),this.arrowNav=!0,this.disableArrowNav=!1,this.separatorIconName=``,this.separatorIconPath=``,this.tabRefs=[],this.disabledMap={},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}willUpdate(e){(e.has(`arrowNav`)||e.has(`disableArrowNav`))&&(this.context={...this.context,useArrowNav:this.useArrowNav})}updated(){this.updateComplete.then(()=>this.syncSeparators())}syncSeparators(){let e=this.querySelector(`.pkt-tabs__list`);if(!e||(e.querySelectorAll(`.pkt-tabs__separator`).forEach(e=>e.remove()),!(this.separatorIconName||this.separatorIconPath)))return;let t=Array.from(e.children).filter(e=>!e.classList.contains(`pkt-tabs__separator`));for(let e=0;e<t.length-1;e++){let n=document.createElement(`span`);if(n.className=`pkt-tabs__separator`,n.setAttribute(`aria-hidden`,`true`),n.setAttribute(`role`,`presentation`),this.separatorIconPath){let e=document.createElement(`img`);e.setAttribute(`src`,this.separatorIconPath),e.setAttribute(`alt`,``),e.setAttribute(`aria-hidden`,`true`),n.appendChild(e)}else if(this.separatorIconName){let e=document.createElement(`pkt-icon`);e.setAttribute(`name`,this.separatorIconName),e.classList.add(`pkt-tabs__separator-icon`),n.appendChild(e)}t[e].after(n)}}registerTab(e,t,n=!1){this.tabRefs[t]=e,this.disabledMap[t]=n,this.tabCount=Math.max(this.tabCount,t+1)}isTabDisabled(e){return!!this.disabledMap[e]}findEnabledIndex(e,t){let n=e+t;for(;n>=0&&n<this.tabCount;){if(!this.isTabDisabled(n))return n;n+=t}return null}handleClick(e){this.isTabDisabled(e)||this.dispatchEvent(new CustomEvent(`tab-selected`,{detail:{index:e},bubbles:!0,composed:!0}))}handleKeyUp(e,t){if(this.useArrowNav){if(e.key===`ArrowLeft`){e.preventDefault();let n=this.findEnabledIndex(t,-1);n!==null&&this.tabRefs[n]?.focus()}if(e.key===`ArrowRight`){e.preventDefault();let n=this.findEnabledIndex(t,1);n!==null&&this.tabRefs[n]?.focus()}(e.key===`Enter`||e.key===` `||e.key===`Spacebar`||e.key===`ArrowDown`)&&(e.preventDefault(),this.handleClick(t))}}render(){let n=this.useArrowNav?`tablist`:`navigation`,r=this.separatorIconName||this.separatorIconPath?`pkt-tabs pkt-tabs--with-separator`:`pkt-tabs`;return t._`
       <div class=${r}>
-        <div class="pkt-tabs__list" role=${n}>${t.i(this)}</div>
+        <div class="pkt-tabs__list" role=${n}>${e.i(this)}</div>
       </div>
-    `}};e.n([e.u({type:Boolean,reflect:!0,attribute:`arrow-nav`})],s.prototype,`arrowNav`,void 0),e.n([e.u({type:Boolean,reflect:!0,attribute:`disable-arrow-nav`})],s.prototype,`disableArrowNav`,void 0),e.n([e.u({type:String,reflect:!0,attribute:`separator-icon-name`})],s.prototype,`separatorIconName`,void 0),e.n([e.u({type:String,reflect:!0,attribute:`separator-icon-path`})],s.prototype,`separatorIconPath`,void 0),e.n([e.l()],s.prototype,`tabRefs`,void 0),e.n([e.l()],s.prototype,`disabledMap`,void 0),e.n([e.l()],s.prototype,`tabCount`,void 0),e.n([i.t({context:o}),e.l()],s.prototype,`context`,void 0);try{e.d(`pkt-tabs`)(s)}catch{console.warn(`Forsøker å definere <pkt-tabs>, men den er allerede definert`)}var c=class extends t.t{constructor(){super(),this.active=!1,this.disabled=!1,this.href=``,this.icon=``,this.controls=``,this.tag=``,this.tagSkin=`blue`,this.index=0,this.elementRef=a.t()}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this.elementRef.value&&this.context&&this.context.registerTab(this.elementRef.value,this.index,this.disabled)})}updated(){this.elementRef.value&&this.context&&this.context.registerTab(this.elementRef.value,this.index,this.disabled)}handleClick(e){this.disabled?(e.preventDefault(),e.stopPropagation()):this.context&&this.context.handleClick(this.index)}handleKeyDown(e){this.disabled&&(e.key===`Enter`||e.key===` `||e.key===`Spacebar`)?(e.preventDefault(),e.stopPropagation()):this.context&&this.context.handleKeyUp(e,this.index)}render(){let r=this.context?.useArrowNav??!0,i=this.active&&!this.disabled,o=[i?`active`:``,this.disabled?`pkt-tabs__item--disabled`:``].filter(Boolean).join(` `),s=r?`tab`:void 0,c=r?i:void 0,l=this.disabled?-1:i||!r?void 0:-1,u=`pkt-icon--small ${this.icon===`check`?`pkt-tabs__status-icon`:``}`,d=e._`
-      ${this.icon?e._`<pkt-icon name=${this.icon} class=${u}></pkt-icon>`:``}
-      <span>${t.i(this)}</span>
-      ${this.tag?e._`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>`:``}
-    `;return this.href?e._`
+    `}};t.n([t.u({type:Boolean,reflect:!0,attribute:`arrow-nav`})],s.prototype,`arrowNav`,void 0),t.n([t.u({type:Boolean,reflect:!0,attribute:`disable-arrow-nav`})],s.prototype,`disableArrowNav`,void 0),t.n([t.u({type:String,reflect:!0,attribute:`separator-icon-name`})],s.prototype,`separatorIconName`,void 0),t.n([t.u({type:String,reflect:!0,attribute:`separator-icon-path`})],s.prototype,`separatorIconPath`,void 0),t.n([t.l()],s.prototype,`tabRefs`,void 0),t.n([t.l()],s.prototype,`disabledMap`,void 0),t.n([t.l()],s.prototype,`tabCount`,void 0),t.n([n.t({context:o}),t.l()],s.prototype,`context`,void 0);try{t.d(`pkt-tabs`)(s)}catch{console.warn(`Forsøker å definere <pkt-tabs>, men den er allerede definert`)}var c=class extends e.t{constructor(){super(),this.active=!1,this.disabled=!1,this.href=``,this.icon=``,this.controls=``,this.tag=``,this.tagSkin=`blue`,this.index=0,this.elementRef=i.t()}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{this.elementRef.value&&this.context&&this.context.registerTab(this.elementRef.value,this.index,this.disabled)})}updated(){this.elementRef.value&&this.context&&this.context.registerTab(this.elementRef.value,this.index,this.disabled)}handleClick(e){this.disabled?(e.preventDefault(),e.stopPropagation()):this.context&&this.context.handleClick(this.index)}handleKeyDown(e){this.disabled&&(e.key===`Enter`||e.key===` `||e.key===`Spacebar`)?(e.preventDefault(),e.stopPropagation()):this.context&&this.context.handleKeyUp(e,this.index)}render(){let n=this.context?.useArrowNav??!0,r=this.active&&!this.disabled,o=[r?`active`:``,this.disabled?`pkt-tabs__item--disabled`:``].filter(Boolean).join(` `),s=n?`tab`:void 0,c=n?r:void 0,l=this.disabled?-1:r||!n?void 0:-1,u=`pkt-icon--small ${this.icon===`check`?`pkt-tabs__status-icon`:``}`,d=t._`
+      ${this.icon?t._`<pkt-icon name=${this.icon} class=${u}></pkt-icon>`:``}
+      <span>${e.i(this)}</span>
+      ${this.tag?t._`<pkt-tag skin=${this.tagSkin} size="small">${this.tag}</pkt-tag>`:``}
+    `;return this.href?t._`
         <a
-          ${a.n(this.elementRef)}
-          href=${n.t(this.disabled?void 0:this.href)}
+          ${i.n(this.elementRef)}
+          href=${a.t(this.disabled?void 0:this.href)}
           class="pkt-tabs__link ${o}"
-          role=${n.t(s)}
-          aria-selected=${n.t(c)}
-          aria-disabled=${n.t(this.disabled?`true`:void 0)}
-          aria-controls=${n.t(this.controls||void 0)}
-          tabindex=${n.t(l)}
+          role=${a.t(s)}
+          aria-selected=${a.t(c)}
+          aria-disabled=${a.t(this.disabled?`true`:void 0)}
+          aria-controls=${a.t(this.controls||void 0)}
+          tabindex=${a.t(l)}
           @click=${this.handleClick}
           @keydown=${this.handleKeyDown}
         >
           ${d}
         </a>
-      `:e._`
+      `:t._`
       <button
-        ${a.n(this.elementRef)}
+        ${i.n(this.elementRef)}
         type="button"
         class="pkt-tabs__button pkt-link-button ${o}"
         ?disabled=${this.disabled}
-        aria-disabled=${n.t(this.disabled?`true`:void 0)}
-        role=${n.t(s)}
-        aria-selected=${n.t(c)}
-        aria-controls=${n.t(this.controls||void 0)}
-        tabindex=${n.t(l)}
+        aria-disabled=${a.t(this.disabled?`true`:void 0)}
+        role=${a.t(s)}
+        aria-selected=${a.t(c)}
+        aria-controls=${a.t(this.controls||void 0)}
+        tabindex=${a.t(l)}
         @click=${this.handleClick}
         @keydown=${this.handleKeyDown}
       >
         ${d}
       </button>
-    `}};e.n([e.u({type:Boolean,reflect:!0})],c.prototype,`active`,void 0),e.n([e.u({type:Boolean,reflect:!0})],c.prototype,`disabled`,void 0),e.n([e.u({type:String,reflect:!0})],c.prototype,`href`,void 0),e.n([e.u({type:String,reflect:!0})],c.prototype,`icon`,void 0),e.n([e.u({type:String,reflect:!0})],c.prototype,`controls`,void 0),e.n([e.u({type:String,reflect:!0})],c.prototype,`tag`,void 0),e.n([e.u({type:String,reflect:!0,attribute:`tag-skin`})],c.prototype,`tagSkin`,void 0),e.n([e.u({type:Number,reflect:!0})],c.prototype,`index`,void 0),e.n([r.t({context:o,subscribe:!0}),e.u({attribute:!1})],c.prototype,`context`,void 0);try{e.d(`pkt-tab-item`)(c)}catch{console.warn(`Forsøker å definere <pkt-tab-item>, men den er allerede definert`)}var l=s;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return l}});
+    `}};t.n([t.u({type:Boolean,reflect:!0})],c.prototype,`active`,void 0),t.n([t.u({type:Boolean,reflect:!0})],c.prototype,`disabled`,void 0),t.n([t.u({type:String,reflect:!0})],c.prototype,`href`,void 0),t.n([t.u({type:String,reflect:!0})],c.prototype,`icon`,void 0),t.n([t.u({type:String,reflect:!0})],c.prototype,`controls`,void 0),t.n([t.u({type:String,reflect:!0})],c.prototype,`tag`,void 0),t.n([t.u({type:String,reflect:!0,attribute:`tag-skin`})],c.prototype,`tagSkin`,void 0),t.n([t.u({type:Number,reflect:!0})],c.prototype,`index`,void 0),t.n([r.t({context:o,subscribe:!0}),t.u({attribute:!1})],c.prototype,`context`,void 0);try{t.d(`pkt-tab-item`)(c)}catch{console.warn(`Forsøker å definere <pkt-tab-item>, men den er allerede definert`)}var l=s;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return l}});

package/dist/tag-BAikRN2Y.cjs

@@ -0,0 +1,27 @@
+const e=require("./element-CEarCnHH.cjs"),t=require("./class-map-C82GtM1w.cjs"),n=require("./format-B8meU8Tm.cjs"),r=require("./element-with-slot-D_8fAzCW.cjs");require("./shared-types-BvRk9kiK.cjs"),require("./icon-5A378_yh.cjs");const i=require("./if-defined-Ci4ZQsgL.cjs");var a={closeTag:!1,size:`medium`,skin:`gray`,textStyle:`normal-text`,type:`button`},o=class extends r.t{constructor(){super(),this.closeTag=a.closeTag,this.size=a.size,this.skin=a.skin,this.state=null,this.textStyle=a.textStyle,this.iconName=void 0,this.type=a.type,this.ariaLabel=null,this.buttonTabindex=void 0,this._isClosed=!1,this._ariaDescription=null,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent(`close`,{detail:{origin:e},bubbles:!1,composed:!0})),this.dispatchEvent(new CustomEvent(`on-close`,{detail:{origin:e},bubbles:!1,composed:!0}))},this._isClosed=!1}willUpdate(e){if(super.willUpdate(e),this.closeTag&&!this.ariaLabel){let e=r.r(this).getNodes().map(e=>e.textContent??``).join(``).trim();e&&(this._ariaDescription=n.t(this.pktStrings.get(`tag`).remove,{label:e}))}}render(){let n={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.state}`]:!!this.state,[`pkt-tag--${this.textStyle}`]:!!this.textStyle},a={"pkt-tag":!0,[`pkt-tag--${this.textStyle}`]:!!this.textStyle,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`pkt-tag--${this.state}`]:!!this.state,"pkt-hide":this._isClosed};return this.closeTag?e._`
+        <button
+          class=${t.t(a)}
+          type=${this.type}
+          tabindex=${i.t(this.buttonTabindex)}
+          @click=${this.close}
+          aria-label=${i.t(this.ariaLabel||void 0)}
+          aria-description=${i.t(this._ariaDescription||void 0)}
+        >
+          ${this.iconName&&e._`<pkt-icon
+              class="pkt-tag__icon"
+              name=${this.iconName}
+              aria-hidden="true"
+            ></pkt-icon>`}
+          <span>${r.i(this)}</span>
+          <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
+        </button>
+      `:e._`
+        <span class=${t.t(n)}>
+          ${this.iconName&&e._`<pkt-icon
+              class="pkt-tag__icon"
+              name=${this.iconName}
+              aria-hidden="true"
+            ></pkt-icon>`}
+          <span>${r.i(this)}</span>
+        </span>
+      `}};e.n([e.u({type:Boolean,reflect:!0})],o.prototype,`closeTag`,void 0),e.n([e.u({type:String,reflect:!0})],o.prototype,`size`,void 0),e.n([e.u({type:String,reflect:!0})],o.prototype,`skin`,void 0),e.n([e.u({type:String,reflect:!0})],o.prototype,`state`,void 0),e.n([e.u({type:String,reflect:!0})],o.prototype,`textStyle`,void 0),e.n([e.u({type:String,reflect:!0})],o.prototype,`iconName`,void 0),e.n([e.u({type:String})],o.prototype,`type`,void 0),e.n([e.u({type:String})],o.prototype,`ariaLabel`,void 0),e.n([e.u({type:Number,attribute:`button-tabindex`})],o.prototype,`buttonTabindex`,void 0),e.n([e.l()],o.prototype,`_isClosed`,void 0),e.n([e.l()],o.prototype,`_ariaDescription`,void 0);try{e.d(`pkt-tag`)(o)}catch{console.warn(`Forsøker å definere <pkt-tag>, men den er allerede definert`)}var s=o;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});

package/dist/{tag-CkZ2Mn4a.js → tag-HXcXopyA.js}

@@ -1,109 +1,20 @@
-import { _ as e, d as t, l as n, n as r, u as i } from "./element-DLgZkx5L.js";
-import { t as a } from "./class-map-BDwVSgLb.js";
-import { t as o } from "./format-BTeSVkED.js";
-import { i as s, r as c, t as l } from "./element-with-slot-mG-h7Sjw.js";
-import "./icon-C1oCGwEe.js";
-import { t as u } from "./if-defined-DiYi2v_Q.js";
+import { _ as e, d as t, l as n, n as r, u as i } from "./element-Bwc-likm.js";
+import { t as a } from "./class-map-C9n5CNC8.js";
+import { t as o } from "./format-DwjTfa9h.js";
+import { i as s, r as c, t as l } from "./element-with-slot-47quDZRt.js";
+import "./shared-types-BvRk9kiK.js";
+import "./icon-CZDw42U7.js";
+import { t as u } from "./if-defined-B3pYog2C.js";
+// ../../shared-types/tag.ts
 var d = {
-	name: "pkt-tag",
-	react: "PktTag",
-	"css-class": "pkt-tag",
-	isElement: !0,
-	"dark-mode": !0,
-	props: {
-		size: {
-			name: "Størrelse",
-			description: "Størrelsen på taggen",
-			required: !1,
-			default: "medium",
-			type: [
-				"small",
-				"medium",
-				"large"
-			],
-			category: "ui"
-		},
-		iconName: {
-			name: "Ikon",
-			description: "Navnet på ikonet som skal vises i taggen",
-			type: "icon",
-			required: !1,
-			category: "ui"
-		},
-		skin: {
-			name: "Utseende",
-			description: "Utseendet til taggen. Bare standardutseendet gray har dark mode.",
-			required: !1,
-			default: "gray",
-			type: [
-				"gray",
-				"gray-light",
-				"blue-dark",
-				"blue",
-				"blue-light",
-				"blue-pale",
-				"green",
-				"green-light",
-				"red",
-				"red-light",
-				"yellow",
-				"yellow-light",
-				"beige",
-				"beige-light"
-			],
-			category: "ui"
-		},
-		closeTag: {
-			name: "Lukk tag",
-			description: "Skal taggen ha en lukkeknapp?",
-			type: "boolean",
-			required: !1,
-			default: !1,
-			category: "ui"
-		},
-		state: {
-			name: "Tvungen tilstand",
-			description: "Viser taggen i en gitt tilstand uten at brukeren samhandler med den",
-			required: !1,
-			type: [
-				"hover",
-				"focus",
-				"active"
-			],
-			category: "ui"
-		},
-		textStyle: {
-			name: "Tekststil",
-			description: "Stilen på teksten i taggen",
-			required: !1,
-			default: "normal-text",
-			type: ["thin-text", "normal-text"],
-			category: "ui"
-		},
-		type: {
-			name: "Type, dersom lukkeknapp",
-			description: "Type tag, brukes for å spesifisere om det er en knapp, submit eller reset",
-			required: !1,
-			default: "button",
-			type: [
-				"button",
-				"submit",
-				"reset"
-			],
-			category: "tech"
-		},
-		ariaLabel: {
-			name: "aria-label",
-			description: "aria-label for taggen, brukes for tilgjengelighet",
-			type: "string",
-			required: !1,
-			category: "accessibility"
-		}
-	},
-	slots: { default: { description: "Teksten til tag" } }
+	closeTag: !1,
+	size: "medium",
+	skin: "gray",
+	textStyle: "normal-text",
+	type: "button"
 }, f = class extends l {
 	constructor() {
-		super(), this.closeTag = d.props.closeTag.default, this.size = d.props.size.default, this.skin = d.props.skin.default, this.state = null, this.textStyle = null, this.iconName = void 0, this.type = d.props.type.default, this.ariaLabel = null, this.buttonTabindex = void 0, this._isClosed = !1, this._ariaDescription = null, this.close = (e) => {
+		super(), this.closeTag = d.closeTag, this.size = d.size, this.skin = d.skin, this.state = null, this.textStyle = d.textStyle, this.iconName = void 0, this.type = d.type, this.ariaLabel = null, this.buttonTabindex = void 0, this._isClosed = !1, this._ariaDescription = null, this.close = (e) => {
 			this._isClosed = !0, this.dispatchEvent(new CustomEvent("close", {
 				detail: { origin: e },
 				bubbles: !1,
@@ -192,8 +103,6 @@ try {
 } catch {
 	console.warn("Forsøker å definere <pkt-tag>, men den er allerede definert");
 }
-//#endregion
-//#region src/components/tag/index.ts
+// src/components/tag/index.ts
 var p = f;
-//#endregion
 export { f as n, p as t };

package/dist/{textarea-Djp5L2Zd.js → textarea-B1iUKCro.js}

@@ -1,14 +1,14 @@
-import { _ as e, d as t, f as n, g as r, h as i, l as a, m as o, n as s, p as c, u as l } from "./element-DLgZkx5L.js";
-import { t as u } from "./class-map-BDwVSgLb.js";
-import { i as d, r as f } from "./directive-helpers-BoDzpPID.js";
-import { n as p } from "./element-with-slot-mG-h7Sjw.js";
-import "./shared-types-A6iGIX-f.js";
-import "./icon-C1oCGwEe.js";
-import { r as m } from "./input-wrapper-DkpJS1hR.js";
-import { t as h } from "./if-defined-DiYi2v_Q.js";
-import { n as g, t as _ } from "./ref-BAegS9BR.js";
-import { t as v } from "./input-element-De40zUox.js";
-//#region ../../shared-types/textarea.ts
+import { _ as e, d as t, f as n, g as r, h as i, l as a, m as o, n as s, p as c, u as l } from "./element-Bwc-likm.js";
+import { t as u } from "./class-map-C9n5CNC8.js";
+import { i as d, r as f } from "./directive-helpers-KMRvtO9j.js";
+import { n as p } from "./element-with-slot-47quDZRt.js";
+import "./shared-types-BvRk9kiK.js";
+import "./icon-CZDw42U7.js";
+import { r as m } from "./input-wrapper-C6BRd-cu.js";
+import { t as h } from "./if-defined-B3pYog2C.js";
+import { n as g, t as _ } from "./ref-qE1RBrI7.js";
+import { t as v } from "./input-element-DE0FzjgP.js";
+// ../../shared-types/textarea.ts
 var y = {
 	autoComplete: "off",
 	required: !1,
@@ -133,8 +133,6 @@ try {
 } catch {
 	console.warn("Forsøker å definere <pkt-textarea>, men den er allerede definert");
 }
-//#endregion
-//#region src/components/textarea/index.ts
+// src/components/textarea/index.ts
 var S = x;
-//#endregion
 export { x as n, S as t };