@oslokommune/punkt-elements 19.5.0 → 19.5.1

package/src/components/helptext/helptext-association.test.ts

@@ -82,6 +82,85 @@ describe('helptext association', () => {
     expect(input?.getAttribute('aria-label')).toBe('Velg fil')
   })
 
+  describe('helptext from the slot', () => {
+    const slotCases: Array<[string, string]> = [
+      ['pkt-textinput', ''],
+      ['pkt-textarea', ''],
+      ['pkt-select', ''],
+      ['pkt-datepicker', ''],
+      ['pkt-timepicker', ''],
+      ['pkt-combobox', ''],
+      ['pkt-combobox', 'allow-user-input'],
+    ]
+
+    const settle = async (host: HTMLElement & { updateComplete: Promise<unknown> }) => {
+      for (let i = 0; i < 3; i++) {
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        await host.updateComplete
+        const nested = Array.from(
+          host.querySelectorAll<HTMLElement & { updateComplete: Promise<unknown> }>(
+            'pkt-input-wrapper, pkt-helptext',
+          ),
+        )
+        await Promise.all(nested.map((el) => el.updateComplete))
+      }
+    }
+
+    const mountWithSlot = async (tag: string, attrs: string, slot: string) => {
+      document.body.innerHTML = `<${tag} id="felt" name="felt" label="Etikett" ${attrs}>${slot}</${tag}>`
+      await customElements.whenDefined(tag)
+      const host = document.querySelector(tag) as HTMLElement & { updateComplete: Promise<unknown> }
+      await settle(host)
+      return host
+    }
+
+    const controls = (host: HTMLElement) =>
+      host.localName === 'pkt-timepicker'
+        ? Array.from(host.querySelectorAll('[role="spinbutton"]'))
+        : [host.querySelector(CONTROL)]
+
+    const expectDescribedBySlot = (host: HTMLElement) => {
+      const helptext = host.querySelector('.pkt-inputwrapper__helptext')
+      expect(helptext?.textContent).toContain('Hjelp fra slot')
+      controls(host).forEach((control) => {
+        expect(control?.getAttribute('aria-describedby')?.split(' ')).toContain(helptext?.id)
+      })
+    }
+
+    test.each(slotCases)('%s %s renders slotted helptext inside the helptext element', async (tag, attrs) => {
+      const host = await mountWithSlot(tag, attrs, '<div slot="helptext">Hjelp fra slot</div>')
+
+      expectDescribedBySlot(host)
+    })
+
+    test.each(slotCases)('%s %s picks up slotted helptext added after the first render', async (tag, attrs) => {
+      const host = await mountWithSlot(tag, attrs, '')
+      controls(host).forEach((control) => {
+        expect(control?.getAttribute('aria-describedby') ?? '').not.toContain('helptext')
+      })
+
+      const slotted = document.createElement('div')
+      slotted.setAttribute('slot', 'helptext')
+      slotted.textContent = 'Hjelp fra slot'
+      host.appendChild(slotted)
+      await settle(host)
+
+      expectDescribedBySlot(host)
+    })
+
+    test.each(slotCases)('%s %s drops the link when slotted helptext is removed', async (tag, attrs) => {
+      const host = await mountWithSlot(tag, attrs, '<div slot="helptext" class="slotted">Hjelp fra slot</div>')
+      expectDescribedBySlot(host)
+
+      host.querySelector('.slotted')?.remove()
+      await settle(host)
+
+      controls(host).forEach((control) => {
+        expect(control?.getAttribute('aria-describedby') ?? '').not.toContain('helptext')
+      })
+    })
+  })
+
   test('no label carries the description', async () => {
     for (const [tag, attrs] of cases) {
       const host = await mount(tag, attrs)

package/src/components/input-wrapper/input-wrapper.test.ts

@@ -373,6 +373,55 @@ describe('PktInputWrapper', () => {
     })
   })
 
+  describe('Fieldset name and description', () => {
+    const mountFieldset = async (attributes: string, content = '') => {
+      document.body.innerHTML = `<pkt-input-wrapper forId="g" label="Gruppe" hasFieldset ${attributes}>${content}</pkt-input-wrapper>`
+      await customElements.whenDefined('pkt-input-wrapper')
+      const wrapper = document.querySelector('pkt-input-wrapper') as CustomElementFor<'pkt-input-wrapper'>
+      await wrapper.updateComplete
+      return wrapper.querySelector('fieldset') as HTMLFieldSetElement
+    }
+
+    const describedByIds = (fieldset: HTMLFieldSetElement) =>
+      (fieldset.getAttribute('aria-describedby') ?? '').split(' ').filter(Boolean)
+
+    afterEach(() => {
+      document.body.innerHTML = ''
+    })
+
+    test('links slotted helptext to the fieldset', async () => {
+      const fieldset = await mountFieldset('', '<div class="pkt-contents" slot="helptext">Velg ett</div>')
+
+      expect(describedByIds(fieldset)).toEqual(['g-helptext'])
+    })
+
+    test('renders slotted helptext inside the helptext element', async () => {
+      await mountFieldset('', '<div slot="helptext">Velg ett</div>')
+
+      expect(document.getElementById('g-helptext')?.textContent).toContain('Velg ett')
+    })
+
+    test('links slotted helptext added after the first render', async () => {
+      const fieldset = await mountFieldset('')
+      expect(fieldset.hasAttribute('aria-describedby')).toBe(false)
+      await new Promise((resolve) => setTimeout(resolve, 0))
+
+      const wrapper = document.querySelector('pkt-input-wrapper') as CustomElementFor<'pkt-input-wrapper'>
+      const slotted = document.createElement('div')
+      slotted.setAttribute('slot', 'helptext')
+      slotted.textContent = 'Velg ett'
+      wrapper.appendChild(slotted)
+      for (let i = 0; i < 3; i++) {
+        await new Promise((resolve) => setTimeout(resolve, 0))
+        await wrapper.updateComplete
+        await (wrapper.querySelector('pkt-helptext') as CustomElementFor<'pkt-helptext'>).updateComplete
+      }
+
+      expect(describedByIds(fieldset)).toEqual(['g-helptext'])
+      expect(document.getElementById('g-helptext')?.textContent).toContain('Velg ett')
+    })
+  })
+
   describe('Wrapper functionality', () => {
     test('handles useWrapper property values', async () => {
       // Test true value

package/src/components/input-wrapper/input-wrapper.ts

@@ -1,5 +1,5 @@
 import { PktElementWithSlot } from '@/base-elements/element-with-slot'
-import { slotContent } from '@/directives/slot-content'
+import { forwardSlots, slotContent } from '@/directives/slot-content'
 import { counterStatusId, isCounterExceeded } from 'shared-utils/forms/described-by'
 import { formatString, type IPktStringsProps } from 'shared-strings'
 import { ifDefined } from 'lit/directives/if-defined.js'
@@ -99,9 +99,10 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
   render() {
     const tagClasses = 'pkt-tag pkt-tag--small pkt-tag--thin-text'
 
+    const hasHelptext = !!this.helptext || this.hasSlotContent('helptext')
     const describedBy = this.ariaDescribedby
       ? this.ariaDescribedby
-      : this.helptext
+      : hasHelptext
         ? `${this.forId}-helptext`
         : nothing
 
@@ -152,8 +153,10 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
     }
 
     const helptextElement = () => {
+      if (!hasHelptext && !this.helptextDropdown) return nothing
       return html`
         <pkt-helptext
+          ${forwardSlots(this, { helptext: null })}
           class="${ifDefined(!this.useWrapper ? 'pkt-hide' : undefined)}"
           .forId=${this.forId}
           .helptext=${this.helptext}
@@ -162,8 +165,7 @@ export class PktInputWrapper extends PktElementWithSlot<Props> {
           @toggleHelpText=${(e: CustomEvent) => {
             this.toggleDropdown(e)
           }}
-          >${slotContent(this, 'helptext')}</pkt-helptext
-        >
+        ></pkt-helptext>
       `
     }
 

package/src/components/progressbar/progressbar.test.ts

@@ -26,6 +26,25 @@ afterEach(() => {
 })
 
 describe('PktProgressbar', () => {
+  describe('Host id', () => {
+    afterEach(() => {
+      document.body.innerHTML = ''
+    })
+
+    test('keeps the id on the host element', async () => {
+      document.body.innerHTML = '<pkt-progressbar id="min-framdrift" title="Framdrift"></pkt-progressbar>'
+      const progressbar = document.querySelector('pkt-progressbar') as CustomElementFor<'pkt-progressbar'>
+      await progressbar.updateComplete
+
+      expect(document.getElementById('min-framdrift')).toBe(progressbar)
+      expect(document.querySelectorAll('[id="min-framdrift"]')).toHaveLength(1)
+      expect(progressbar.querySelector('[role="progressbar"]')).toHaveAttribute(
+        'aria-labelledby',
+        'min-framdrift-title',
+      )
+    })
+  })
+
   describe('Rendering and basic functionality', () => {
     test('renders without errors', async () => {
       const { progressbar } = await createProgressbarTest()

package/src/components/progressbar/progressbar.ts

@@ -45,7 +45,7 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
   @property({ type: String, reflect: true }) ariaLabelledby: string | null = null
   @property({ type: String, reflect: true }) ariaValueText: string | null = null
   @property({ type: String }) ariaLive: TAriaLive = 'polite'
-  @property({ type: String }) id: string = uuidish()
+  @property({ type: String, reflect: true }) id: string = uuidish()
   @property({ type: String }) role: TProgressbarRole = 'progressbar'
   @property({ type: String }) skin: TProgressbarSkin = 'dark-blue'
   @property({ type: String }) statusPlacement: TProgressbarStatusPlacement = 'following'
@@ -67,10 +67,7 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
 
   protected willUpdate(changedProperties: Map<string | number | symbol, unknown>) {
     super.willUpdate(changedProperties)
-    if (this.hasAttribute('id')) {
-      this.progressbarId = this.getAttribute('id') || this.progressbarId
-      this.removeAttribute('id')
-    } else if (this.id) {
+    if (this.id) {
       this.progressbarId = this.id
     }
     // Verdien må fanges FØR removeAttribute: den utløser attributeChangedCallback,
@@ -131,7 +128,6 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
 
     return html`<div
       ${ref(this.progressBarRef)}
-      id=${this.progressbarId}
       role=${this.resolvedRole}
       aria-live=${ifDefined(this.ariaLive || undefined)}
       aria-atomic="true"

package/src/components/select/select.ts

@@ -4,7 +4,7 @@ import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { PktOptionsInputElement } from '@/base-elements/options-input-element'
 import { PktOptionsSlotController } from '@/controllers/pkt-options-controller'
-import { slotContent } from '@/directives/slot-content'
+import { forwardSlots } from '@/directives/slot-content'
 import type { TSelectOption } from 'shared-types/select'
 import '@/components/input-wrapper'
 import { describedByIds } from 'shared-utils/forms/described-by'
@@ -182,6 +182,7 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
 
     return html`
       <pkt-input-wrapper
+        ${forwardSlots(this, ['helptext'])}
         .strings=${this.strings}
         .size=${this.inputSize}
         ?disabled=${this.disabled}
@@ -209,7 +210,7 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
           aria-describedby=${ifDefined(
             describedByIds({
               id: this.id + '-input',
-              hasHelptext: !!this.helptext,
+              hasHelptext: !!this.helptext || this.hasSlotContent('helptext'),
               hasCounter: false,
               ariaDescribedby: this.ariaDescribedby,
             }),
@@ -251,7 +252,6 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
               )
             : ''}
         </select>
-        <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
       </pkt-input-wrapper>
     `
   }

package/src/components/textarea/textarea.ts

@@ -5,7 +5,7 @@ import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { live } from 'lit/directives/live.js'
 import { PktInputElement } from '@/base-elements/input-element'
-import { slotContent } from '@/directives/slot-content'
+import { forwardSlots } from '@/directives/slot-content'
 
 import '@/components/input-wrapper'
 import '@/components/icon'
@@ -61,6 +61,7 @@ export class PktTextarea extends PktInputElement<Props> {
     const labelledBy = this.ariaLabelledby || `${this.id}-input-label`
 
     return html`<pkt-input-wrapper
+      ${forwardSlots(this, ['helptext'])}
       .strings=${this.strings}
       label=${this.label}
       ?counter=${showCounter}
@@ -85,7 +86,6 @@ export class PktTextarea extends PktInputElement<Props> {
       .tagText=${this.tagText}
       .size=${this.inputSize}
     >
-      <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
       <textarea
         ${ref(this.inputRef)}
         class=${inputClasses}
@@ -103,7 +103,7 @@ export class PktTextarea extends PktInputElement<Props> {
         aria-describedby=${ifDefined(
           describedByIds({
             id: this.id + '-input',
-            hasHelptext: !!this.helptext,
+            hasHelptext: !!this.helptext || this.hasSlotContent('helptext'),
             hasCounter: showCounter,
             ariaDescribedby: this.ariaDescribedby,
           }),

package/src/components/textinput/textinput.ts

@@ -5,7 +5,7 @@ import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { ElementProps } from '@/types/typeUtils'
 import { classMap } from 'lit/directives/class-map.js'
 import { PktInputElement } from '@/base-elements/input-element'
-import { slotContent } from '@/directives/slot-content'
+import { forwardSlots } from '@/directives/slot-content'
 
 import '@/components/input-wrapper'
 import '@/components/icon'
@@ -77,6 +77,7 @@ export class PktTextinput extends PktInputElement<Props> {
 
     return html`
       <pkt-input-wrapper
+        ${forwardSlots(this, ['helptext'])}
         .strings=${this.strings}
         label="${this.label}"
         ?counter=${showCounter}
@@ -101,7 +102,6 @@ export class PktTextinput extends PktInputElement<Props> {
         .tagText=${this.tagText}
         .size=${this.inputSize}
       >
-        <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
         <div class=${`pkt-input__container pkt-input__container--${this.inputSize}`}>
           ${this.prefix ? html`<div class="pkt-input-prefix">${this.prefix}</div>` : nothing}
           <input
@@ -127,7 +127,7 @@ export class PktTextinput extends PktInputElement<Props> {
             aria-describedby=${ifDefined(
               describedByIds({
                 id: this.id + '-input',
-                hasHelptext: !!this.helptext,
+                hasHelptext: !!this.helptext || this.hasSlotContent('helptext'),
                 hasCounter: showCounter,
                 ariaDescribedby: this.ariaDescribedby,
               }),

package/src/components/timepicker/timepicker.ts

@@ -4,7 +4,7 @@ import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { PktInputElement } from '@/base-elements/input-element'
-import { slotContent } from '@/directives/slot-content'
+import { forwardSlots } from '@/directives/slot-content'
 import { ElementProps } from '@/types/typeUtils'
 import { formatString, type IPktStringsProps } from 'shared-strings'
 import { isValidTimeString, timeToMinutes } from 'shared-utils/timepicker/time-utils'
@@ -149,7 +149,7 @@ export class PktTimepicker extends PktInputElement<Props> {
   private _describedBy(): string | undefined {
     return describedByIds({
       id: `${this.id}-hours`,
-      hasHelptext: !!this.helptext,
+      hasHelptext: !!this.helptext || this.hasSlotContent('helptext'),
       ariaDescribedby: this.ariaDescribedby,
     })
   }
@@ -784,6 +784,7 @@ export class PktTimepicker extends PktInputElement<Props> {
   render() {
     return html`
       <pkt-input-wrapper
+        ${forwardSlots(this, ['helptext'])}
         .strings=${this.strings}
         label="${this.label}"
         ?disabled=${this.disabled}
@@ -806,7 +807,6 @@ export class PktTimepicker extends PktInputElement<Props> {
         .tagText=${this.tagText}
         .size=${this.inputSize}
       >
-        <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
         ${!this.hidePicker && !this.stepArrows
           ? html`
               <div class="pkt-timepicker__anchor">

package/dist/alert-DcyO0WfW.cjs

@@ -1,40 +0,0 @@
-const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),n=require("./if-defined-2mkIDgOm.cjs"),r=require("./format-B8meU8Tm.cjs"),i=require("./element-with-slot-2PHu2w7O.cjs");require("./icon-Dnv6LtPC.cjs");const a=require("./classutils-CbklAJDe.cjs"),o=require("./define-component-spec-DBNd2FJY.cjs");require("./button-PcKtiNGS.cjs");var s=[`off`,`polite`,`assertive`],c=[`info`,`success`,`warning`,`error`],l=[`medium`,`small`,`xsmall`],u={compact:!1},d=o.t({name:`pkt-alert`,react:`PktAlert`,"css-class":`pkt-alert`,"dark-mode":!0,isElement:!0,isPureReact:!0,events:{onClose:{reactOnly:!0,description:`React: Klikk-event for 'Lukk'-knappen`},close:{elementsOnly:!0,description:`Elements: Klikk-event for 'Lukk'-knappen`}},props:{title:{name:`Tittel`,description:`Tittelen som vises øverst i på meldingen`,type:`string`,category:`contents`},skin:{name:`Utseende`,description:`Hvordan type melding er dette?`,type:[...c],default:`info`,category:`ui`},date:{name:`Sist oppdatert`,description:`Dato som vises nederst i på meldingen`,type:`string`,category:`contents`},ariaLive:{name:`aria-live`,description:`Hvordan skal skjermleseren lese opp meldingen?`,type:[...s],default:`polite`,category:`accessibility`},size:{name:`Størrelse`,description:`Endrer størrelsen på ulike elementer i alerten.`,type:[...l],default:`medium`,category:`ui`},closeAlert:{name:`Vis 'Lukk'-knapp`,description:`Viser 'Lukk'-knappen`,type:`boolean`,default:!1,category:`ui`},compact:{name:`Kompakt`,description:`Kompakt visning av alerten.`,deprecated:"Bruk `size` i stedet; uten eksplisitt `size` gir compact størrelsen 'small'.",type:`boolean`,category:`ui`,default:u.compact}},slots:{default:{description:`Innholdet i meldingen`}}}),f=class extends i.t{constructor(){super(),this.compact=u.compact,this.title=``,this.skin=d.props.skin.default,this.ariaLive=d.props.ariaLive.default,this.ariaLiveAttr=null,this.closeAlert=d.props.closeAlert.default,this.date=null,this.role=`status`,this._hostId=null,this._isClosed=!1,this.close=e=>{this._isClosed=!0,this.dispatchEvent(new CustomEvent(`close`,{detail:{origin:e},bubbles:!0,composed:!0})),this.dispatchEvent(new CustomEvent(`on-close`,{detail:{origin:e},bubbles:!0,composed:!0}))},this._isClosed=!1}connectedCallback(){super.connectedCallback(),this.ariaLiveAttr=this.getAttribute(`aria-live`)||this.ariaLive}willUpdate(e){super.willUpdate(e);let t=this.getAttribute(`id`);t&&(this._hostId=t,this.removeAttribute(`id`))}attributeChangedCallback(e,t,n){e===`ariaLive`&&(this.ariaLiveAttr=n),super.attributeChangedCallback(e,t,n)}updated(e){super.updated(e),e.has(`ariaLive`)&&e.get(`ariaLive`)!==void 0&&(this.ariaLiveAttr=this.ariaLive),e.has(`_isClosed`)&&a.t(this,`pkt-hide`,this._isClosed)}render(){let a=this.size??(this.compact?`small`:`medium`),o={"pkt-alert":!0,[`pkt-alert--${a}`]:!0,[`pkt-alert--${this.skin}`]:!0,"pkt-hide":this._isClosed},s={"pkt-alert__grid":!0,"pkt-alert__noTitle":!this.title,"pkt-alert__noDate":!this.date};return e._`
-      <div
-        class=${t.t(o)}
-        id=${n.t(this._hostId||void 0)}
-        aria-live=${this.ariaLiveAttr}
-        role=${this.role}
-      >
-        <div class=${t.t(s)}>
-          <pkt-icon
-            class="pkt-alert__icon"
-            aria-hidden="true"
-            name=${this.skin===`info`?`alert-information`:`alert-${this.skin}`}
-          ></pkt-icon>
-
-          ${this.closeAlert?e._`
-                <div class="pkt-alert__close">
-                  <pkt-button
-                    tabindex="0"
-                    aria-label=${this.pktStrings.get(`generic`).close}
-                    size=${a}
-                    type="button"
-                    skin="tertiary"
-                    iconName="close"
-                    variant="icon-only"
-                    @click=${this.close}
-                  >
-                    <span class="sr-only">${this.pktStrings.get(`generic`).close}</span>
-                  </pkt-button>
-                </div>
-              `:e.h}
-          ${this.title?e._`<div class="pkt-alert__title">${this.title}</div>`:e.h}
-
-          <div class="pkt-alert__text">${i.r(this)}</div>
-
-          ${this.date?e._`<div class="pkt-alert__date">
-                ${r.t(this.pktStrings.get(`alert`).lastUpdated,{date:this.date})}
-              </div>`:e.h}
-        </div>
-      </div>
-    `}};e.n([e.u({type:Boolean,reflect:!1})],f.prototype,`compact`,void 0),e.n([e.u({type:String,reflect:!0})],f.prototype,`title`,void 0),e.n([e.u({type:String,reflect:!0})],f.prototype,`skin`,void 0),e.n([e.u({type:String})],f.prototype,`ariaLive`,void 0),e.n([e.u({type:String,reflect:!0,attribute:`aria-live`})],f.prototype,`ariaLiveAttr`,void 0),e.n([e.u({type:Boolean,reflect:!0})],f.prototype,`closeAlert`,void 0),e.n([e.u({type:String,reflect:!0})],f.prototype,`date`,void 0),e.n([e.u({type:String})],f.prototype,`role`,void 0),e.n([e.l()],f.prototype,`_hostId`,void 0),e.n([e.u({type:String,attribute:`size`})],f.prototype,`size`,void 0),e.n([e.l()],f.prototype,`_isClosed`,void 0);try{e.d(`pkt-alert`)(f)}catch{console.warn(`Forsøker å definere <pkt-alert>, men den er allerede definert`)}var p=f;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return f}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return p}});

package/dist/button-PcKtiNGS.cjs

@@ -1,32 +0,0 @@
-const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),n=require("./if-defined-2mkIDgOm.cjs"),r=require("./element-with-slot-2PHu2w7O.cjs");require("./icon-Dnv6LtPC.cjs");var i=`https://punkt-cdn.oslo.kommune.no/latest/animations/`;typeof window<`u`&&(window.pktAnimationPath=window.pktAnimationPath||i);var a=class a extends r.t{constructor(...e){super(...e),this.iconName=`user`,this.secondIconName=`user`,this.size=`medium`,this.fullWidth=!1,this.fullWidthOnMobile=!1,this.skin=`primary`,this.variant=`label-only`,this.state=void 0,this.type=`button`,this.form=void 0,this.isLoading=!1,this.disabled=!1,this.loadingAnimationPath=typeof window<`u`?window.pktAnimationPath:i,this.relocatedAria={}}connectedCallback(){super.connectedCallback(),this.addEventListener(`click`,e=>{(this.disabled||this.hasAttribute(`disabled`)||this.isLoading)&&(e.preventDefault(),e.stopImmediatePropagation())},!0),this.addEventListener(`keydown`,e=>{(this.disabled||this.hasAttribute(`disabled`)||this.isLoading)&&(e.key===`Enter`||e.key===` `)&&(e.preventDefault(),e.stopImmediatePropagation())},!0)}attributeChangedCallback(e,t,n){super.attributeChangedCallback(e,t,n),e===`disabled`&&n===`false`&&(this.disabled=!1),(e===`isloading`||e===`isLoading`)&&n===`false`&&(this.isLoading=!1)}static{this.relocatedAriaAttributes=[`aria-haspopup`,`aria-expanded`,`aria-controls`,`aria-label`,`tabindex`]}willUpdate(e){super.willUpdate(e);let t=!1,n={...this.relocatedAria};for(let e of a.relocatedAriaAttributes){let r=this.getAttribute(e);r!==null&&(n[e]=r,this.removeAttribute(e),t=!0)}t&&(this.relocatedAria=n)}firstUpdated(e){super.firstUpdated(e),this.disabled===`false`&&(this.disabled=!1),this.isLoading===`false`&&(this.isLoading=!1)}render(){let i=this.form??this.getAttribute(`form`)??void 0,a={"pkt-btn":!0,[`pkt-btn--${this.size}`]:!!this.size,[`pkt-btn--${this.skin}`]:!!this.skin,[`pkt-btn--${this.variant}`]:!!this.variant,[`pkt-btn--${this.color}`]:!!this.color,[`pkt-btn--${this.state}`]:!!this.state,"pkt-btn--full":!!this.fullWidth,"pkt-btn--full-small":!!this.fullWidthOnMobile,"pkt-btn--isLoading":!!this.isLoading};return e._`
-      <button
-        class=${t.t(a)}
-        type=${this.type}
-        ?disabled=${!!this.disabled}
-        aria-busy=${n.t(this.isLoading?`true`:void 0)}
-        aria-disabled=${n.t(this.disabled||this.isLoading?`true`:void 0)}
-        aria-haspopup=${n.t(this.relocatedAria[`aria-haspopup`])}
-        aria-expanded=${n.t(this.relocatedAria[`aria-expanded`])}
-        aria-controls=${n.t(this.relocatedAria[`aria-controls`])}
-        aria-label=${n.t(this.relocatedAria[`aria-label`])}
-        tabindex=${n.t(this.relocatedAria.tabindex)}
-        form=${n.t(i)}
-      >
-        ${this.isLoading?e._`<pkt-icon
-                class="pkt-btn__icon pkt-btn__spinner"
-                name="spinner-blue"
-                path=${n.t(this.loadingAnimationPath)}
-              ></pkt-icon>`:e.h}
-        ${this.variant===`label-only`?e.h:e._`<pkt-icon
-                class="pkt-btn__icon pkt-icon"
-                name=${this.iconName}
-                path=${n.t(this.iconPath)}
-              ></pkt-icon>`}
-        <span class="pkt-btn__text">${r.r(this)}</span>
-        ${this.variant===`icons-right-and-left`?e._`<pkt-icon
-                class="pkt-btn__icon"
-                name=${this.secondIconName}
-                path=${n.t(this.secondIconPath)}
-              ></pkt-icon>`:e.h}
-      </button>
-    `}};e.n([e.u({type:String})],a.prototype,`iconName`,void 0),e.n([e.u({type:String})],a.prototype,`secondIconName`,void 0),e.n([e.u({type:String})],a.prototype,`iconPath`,void 0),e.n([e.u({type:String})],a.prototype,`secondIconPath`,void 0),e.n([e.u({type:String})],a.prototype,`size`,void 0),e.n([e.u({type:Boolean,attribute:`full-width`})],a.prototype,`fullWidth`,void 0),e.n([e.u({type:Boolean,attribute:`full-width-on-mobile`})],a.prototype,`fullWidthOnMobile`,void 0),e.n([e.u({type:String})],a.prototype,`color`,void 0),e.n([e.u({type:String})],a.prototype,`skin`,void 0),e.n([e.u({type:String})],a.prototype,`variant`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`state`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`type`,void 0),e.n([e.u({type:String})],a.prototype,`form`,void 0),e.n([e.u({type:Boolean,reflect:!0})],a.prototype,`isLoading`,void 0),e.n([e.u({type:Boolean,reflect:!0})],a.prototype,`disabled`,void 0),e.n([e.u({type:String})],a.prototype,`loadingAnimationPath`,void 0),e.n([e.l()],a.prototype,`relocatedAria`,void 0);try{e.d(`pkt-button`)(a)}catch{console.warn(`Forsøker å definere <pkt-button>, men den er allerede definert`)}var o=a;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return o}});

package/dist/element-with-slot-2PHu2w7O.cjs

@@ -1 +0,0 @@
-const e=require("./element-BOmr9YLv.cjs"),t=require("./async-directive-BGoo_npW.cjs");function n(e){return e.classList&&(e.classList.contains(`_dialog_overlay`)||e.classList.contains(`backdrop`))?!0:typeof e.hasAttribute==`function`&&e.hasAttribute(`data-skip`)}function r(e){return e.nodeName===`OPTION`||e.nodeName===`DATA`}function i(e){return e.nodeType===Node.TEXT_NODE&&e.nodeValue?.trim()!==``}var a=new WeakMap;function o(e){let t=a.get(e);return t||(t=new d(e),a.set(e,t)),t}var s=Symbol(`default`);function c(e){return e===void 0?s:e}function l(e,t){if(e.nodeType===Node.COMMENT_NODE)return!1;if(e.nodeType===Node.TEXT_NODE)return i(e)?(u(t,s,e),!0):!1;if(e.nodeType===Node.ELEMENT_NODE){let i=e;if(n(i)||r(i))return!1;if(i instanceof HTMLTemplateElement){let e=Array.from(i.content.childNodes),n=c(i.getAttribute(`slot`)??void 0);for(let r of e)u(t,n,r);return!0}let a=i.getAttribute(`slot`);return u(t,a===null?s:c(a),e),!0}return!1}function u(e,t,n){let r=e.get(t);r||(r=[],e.set(t,r)),r.push(n)}var d=class e{static{this.PLACEHOLDER_PREFIX=`pkt-slot`}constructor(e){this.observer=null,this.nodesBySlot=new Map,this.directives=new Set,this.observing=!1,this.trackedNodes=new Set,this.generation=0,this.initialCollectionDone=!1,this.processingMutations=!1,this.placeholderToNode=new Map,this.nodeToPlaceholder=new Map,this.host=e}collectNodes(){if(this.initialCollectionDone)return;this.initialCollectionDone=!0,this.generation++;let e=Array.from(this.host.childNodes);for(let t of e)l(t,this.nodesBySlot)&&this.trackedNodes.add(t)}addDirective(e){this.directives.add(e),this.startObserving()}removeDirective(e){this.directives.delete(e),this.directives.size===0&&this.stopObserving()}getNodes(e){return this.nodesBySlot.get(c(e))??[]}hasContent(e){return this.getNodes(e).length>0}ensurePlaceholder(t){if(this.nodeToPlaceholder.has(t)||t.parentNode!==this.host)return;let n=document.createComment(e.PLACEHOLDER_PREFIX);this.host.insertBefore(n,t),this.placeholderToNode.set(n,t),this.nodeToPlaceholder.set(t,n)}startObserving(){this.observing||(this.observing=!0,setTimeout(()=>{this.observing&&(this.observer=new MutationObserver(e=>{this.handleMutations(e)}),this.observer.observe(this.host,{childList:!0}))},0))}stopObserving(){this.observing&&(this.observing=!1,this.observer?.disconnect(),this.observer=null)}handleMutations(e){if(this.processingMutations)return;this.processingMutations=!0;let t=!1;for(let n of e)if(n.target===this.host){for(let e of n.removedNodes){let n=this.placeholderToNode.get(e);if(n){n.parentNode?.removeChild(n),this.trackedNodes.delete(n),this.removeFromSlots(n),this.placeholderToNode.delete(e),this.nodeToPlaceholder.delete(n),t=!0;continue}if(this.trackedNodes.has(e)){this.trackedNodes.delete(e),this.removeFromSlots(e);let n=this.nodeToPlaceholder.get(e);n&&(n.parentNode?.removeChild(n),this.placeholderToNode.delete(n),this.nodeToPlaceholder.delete(e)),t=!0}}for(let e of n.addedNodes)this.placeholderToNode.has(e)||!this.trackedNodes.has(e)&&this.isUserContent(e)&&l(e,this.nodesBySlot)&&(this.trackedNodes.add(e),t=!0)}t&&(this.generation++,this.notifyDirectives()),this.observer?.takeRecords(),this.processingMutations=!1}isUserContent(e){if(e.nodeType===Node.COMMENT_NODE)return!1;if(e.nodeType===Node.TEXT_NODE)return i(e);if(e.nodeType===Node.ELEMENT_NODE){let t=e;return!(n(t)||r(t))}return!1}removeFromSlots(e){for(let[t,n]of this.nodesBySlot){let r=n.indexOf(e);if(r!==-1){n.splice(r,1),n.length===0&&this.nodesBySlot.delete(t);return}}}notifyDirectives(){for(let e of this.directives)e.handleNodesChanged()}},f=class extends t.t{constructor(t){if(super(t),this.manager=null,this.lastGeneration=-1,t.type!==e.m.CHILD)throw Error(`slotContent() can only be used in child expressions`)}render(t,n){return e.g}update(e,[t,n]){return this.slotName=n,this.manager||(this.manager=o(t),this.manager.collectNodes(),this.manager.addDirective(this)),this.ensurePlaceholders(),this.getNodesOrNoChange()}handleNodesChanged(){if(!this.isConnected||!this.manager)return;this.ensurePlaceholders();let t=this.getNodesOrNoChange();t!==e.g&&this.setValue(t)}ensurePlaceholders(){if(!this.manager)return;let e=this.manager.getNodes(this.slotName);for(let t of e)this.manager.ensurePlaceholder(t)}disconnected(){this.manager?.removeDirective(this),this.manager=null,this.lastGeneration=-1}reconnected(){}getNodesOrNoChange(){if(!this.manager)return e.g;let t=this.manager.generation;return t===this.lastGeneration?e.g:(this.lastGeneration=t,this.manager.getNodes(this.slotName))}},p=e.f(f),m=class extends e.t{connectedCallback(){o(this).collectNodes(),super.connectedCallback()}hasSlotContent(e){return o(this).hasContent(e)}};Object.defineProperty(exports,"i",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return m}});

package/dist/tag--kFPXNaj.cjs

@@ -1,27 +0,0 @@
-const e=require("./element-BOmr9YLv.cjs"),t=require("./class-map-Drv0_anQ.cjs"),n=require("./if-defined-2mkIDgOm.cjs"),r=require("./format-B8meU8Tm.cjs"),i=require("./element-with-slot-2PHu2w7O.cjs");require("./icon-Dnv6LtPC.cjs");var a={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`,required:!1,default:`blue`,type:[`blue`,`blue-light`,`blue-dark`,`green`,`red`,`beige`,`yellow`,`gray`],category:`ui`},closeTag:{name:`Lukk tag`,description:`Skal taggen ha en lukkeknapp?`,type:`boolean`,required:!1,default:!1,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`}}},o=class extends i.t{constructor(){super(),this.closeTag=a.props.closeTag.default,this.size=a.props.size.default,this.skin=a.props.skin.default,this.textStyle=null,this.iconName=void 0,this.type=a.props.type.default,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=i.n(this).getNodes().map(e=>e.textContent??``).join(``).trim();e&&(this._ariaDescription=r.t(this.pktStrings.get(`tag`).remove,{label:e}))}}render(){let r={"pkt-tag":!0,[`pkt-tag--${this.size}`]:!!this.size,[`pkt-tag--${this.skin}`]:!!this.skin,[`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-hide":this._isClosed};return this.closeTag?e._`
-        <button
-          class=${t.t(a)}
-          type=${this.type}
-          tabindex=${n.t(this.buttonTabindex)}
-          @click=${this.close}
-          aria-label=${n.t(this.ariaLabel||void 0)}
-          aria-description=${n.t(this._ariaDescription||void 0)}
-        >
-          ${this.iconName&&e._`<pkt-icon
-            class="pkt-tag__icon"
-            name=${this.iconName}
-            aria-hidden="true"
-          ></pkt-icon>`}
-          <span>${i.r(this)}</span>
-          <pkt-icon class="pkt-tag__close-btn" name="close"></pkt-icon>
-        </button>
-      `:e._`
-        <span class=${t.t(r)}>
-          ${this.iconName&&e._`<pkt-icon
-            class="pkt-tag__icon"
-            name=${this.iconName}
-            aria-hidden="true"
-          ></pkt-icon>`}
-          <span>${i.r(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,`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/{backlink-DdyQq62f.js → backlink-BslFewn-.js}

@@ -1,6 +1,6 @@
 import { _ as e, d as t, n, t as r, u as i } from "./element-mwwC2Rra.js";
-import { t as a } from "./if-defined-Bebu3LXY.js";
 import "./icon-JigbxxF7.js";
+import { t as a } from "./if-defined-Bebu3LXY.js";
 //#region src/components/backlink/backlink.ts
 var o = class extends r {
 	constructor(...e) {

package/dist/{searchinput-DyjUl08X.js → searchinput-Co8tcq-l.js}

@@ -1,7 +1,7 @@
 import { _ as e, d as t, h as n, l as r, n as i, t as a, u as o } from "./element-mwwC2Rra.js";
 import { t as s } from "./class-map-C4hdfSfY.js";
-import { t as c } from "./if-defined-Bebu3LXY.js";
 import "./icon-JigbxxF7.js";
+import { t as c } from "./if-defined-Bebu3LXY.js";
 import { n as l } from "./utils-BwF4QSrq.js";
 import { t as u } from "./focus-modality-controller-Dc2S-KqR.js";
 //#region src/components/searchinput/searchinput.ts