@oslokommune/punkt-elements 16.26.7 → 17.0.2

package/src/components/searchinput/searchinput.ts

@@ -1,6 +1,6 @@
 import { PktElement } from '@/base-elements/element'
-import { html, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
+import { html, nothing, type PropertyValues } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 import { FocusModalityController } from '@/controllers/focus-modality-controller'
@@ -13,6 +13,7 @@ import type {
   TPktSearchInputAppearance,
   TPktSearchInputMethod,
 } from 'shared-types/searchinput'
+import type { TPktInputSize } from 'shared-types/size'
 
 export type {
   IPktSearchInput,
@@ -23,6 +24,7 @@ export type {
 
 export class PktSearchInput extends PktElement<IPktSearchInput> implements IPktSearchInput {
   @property({ type: String }) appearance: TPktSearchInputAppearance = 'local'
+  @property({ type: String, attribute: 'input-size' }) inputSize: TPktInputSize = 'medium'
   @property({ type: Boolean, reflect: true }) disabled: boolean = false
   @property({ type: Boolean, reflect: true }) fullwidth: boolean = false
   @property({ type: String, reflect: true }) id: string = ''
@@ -36,6 +38,17 @@ export class PktSearchInput extends PktElement<IPktSearchInput> implements IPktS
 
   focusModality = new FocusModalityController(this, '.pkt-searchinput')
 
+  @state() private inputAriaLabel?: string
+
+  override willUpdate(changed: PropertyValues): void {
+    super.willUpdate(changed)
+    const hostLabel = this.getAttribute('aria-label')
+    if (hostLabel) {
+      this.inputAriaLabel = hostLabel
+      this.removeAttribute('aria-label')
+    }
+  }
+
   private get suggestionsId() {
     return `${this.id}-suggestions`
   }
@@ -57,12 +70,14 @@ export class PktSearchInput extends PktElement<IPktSearchInput> implements IPktS
 
   private onInputKeydown(event: KeyboardEvent): void {
     if (event.key !== 'Enter') return
-    event.preventDefault()
+    // With an `action`, let the form submit natively (Enter triggers submit).
+    if (!this.action) event.preventDefault()
     this.dispatchSearch()
   }
 
   private onSearchClick(event: Event): void {
-    event.preventDefault()
+    // With an `action`, let the submit button submit the form natively.
+    if (!this.action) event.preventDefault()
     this.dispatchSearch()
   }
 
@@ -123,13 +138,14 @@ export class PktSearchInput extends PktElement<IPktSearchInput> implements IPktS
     const wrapperClasses = classMap({
       'pkt-searchinput': true,
       [`pkt-searchinput--${this.appearance}`]: true,
+      [`pkt-searchinput--${this.inputSize}`]: true,
       'pkt-searchinput--fullwidth': this.fullwidth,
     })
     const buttonClasses = classMap({
       'pkt-searchinput__button': true,
       'pkt-input-icon': this.appearance === 'local',
       'pkt-btn': true,
-      'pkt-btn--medium': true,
+      [`pkt-btn--${this.inputSize}`]: true,
       'pkt-btn--icon-only': true,
       'pkt-btn--tertiary': this.appearance === 'local',
       'pkt-btn--primary': this.appearance === 'global' || this.appearance === 'local-with-button',
@@ -137,10 +153,13 @@ export class PktSearchInput extends PktElement<IPktSearchInput> implements IPktS
     })
     const inputClasses = classMap({
       'pkt-input': true,
+      [`pkt-input--${this.inputSize}`]: true,
       'pkt-input--fullwidth': this.fullwidth,
     })
     const fieldClass =
-      this.appearance === 'local' ? 'pkt-input__container' : 'pkt-searchinput__field'
+      this.appearance === 'local'
+        ? `pkt-input__container pkt-input__container--${this.inputSize}`
+        : 'pkt-searchinput__field'
 
     const body = html`
       ${this.label
@@ -158,8 +177,9 @@ export class PktSearchInput extends PktElement<IPktSearchInput> implements IPktS
           .value=${this.value}
           ?disabled=${this.disabled}
           autocomplete="off"
-          aria-autocomplete="list"
-          aria-controls=${this.suggestionsId}
+          aria-label=${ifDefined(this.inputAriaLabel)}
+          aria-autocomplete=${this.suggestions ? 'list' : nothing}
+          aria-controls=${this.suggestions ? this.suggestionsId : nothing}
           @input=${this.onInput}
           @keydown=${this.onInputKeydown}
         />
@@ -169,7 +189,7 @@ export class PktSearchInput extends PktElement<IPktSearchInput> implements IPktS
           ?disabled=${this.disabled}
           @click=${this.onSearchClick}
         >
-          <pkt-icon class="pkt-btn__icon" name="magnifying-glass-big" />
+          <pkt-icon class="pkt-btn__icon" name="magnifying-glass-big"></pkt-icon>
           <span class="pkt-btn__text">${this.label || this.placeholder || 'Søk…'}</span>
         </button>
       </div>
@@ -192,9 +212,6 @@ export class PktSearchInput extends PktElement<IPktSearchInput> implements IPktS
         class=${wrapperClasses}
         action=${this.action}
         method=${ifDefined(this.method)}
-        @submit=${(event: Event) => {
-          event.preventDefault()
-        }}
       >
         ${body}
       </form>`

package/src/components/select/index.ts

@@ -1,5 +1,5 @@
 import { PktSelect } from './select'
 
 export { PktSelect } from './select'
-export type { TSelectOption } from './select'
+export type { IPktSelectOption, TSelectOption } from 'shared-types/select'
 export default PktSelect

package/src/components/select/select.test.ts

@@ -20,6 +20,7 @@ export interface SelectTestConfig extends Partial<IPktSelect>, BaseTestConfig {
   counter?: boolean
   inline?: boolean
   useWrapper?: boolean | string
+  'input-size'?: string
 }
 
 export const createSelectTest = async (config: SelectTestConfig = {}) => {
@@ -157,6 +158,33 @@ describe('pkt-select', () => {
     expect(selectElement?.className).toContain('pkt-input--fullwidth')
   })
 
+  test('applies pkt-input--medium class by default', async () => {
+    const { select } = await createSelectTest()
+
+    const selectElement = select.querySelector('select')
+    expect(selectElement?.classList.contains('pkt-input--medium')).toBe(true)
+  })
+
+  test('applies pkt-input--small class for input-size="small"', async () => {
+    const { select } = await createSelectTest({ 'input-size': 'small' })
+
+    expect(select.inputSize).toBe('small')
+
+    const selectElement = select.querySelector('select')
+    expect(selectElement?.classList.contains('pkt-input--small')).toBe(true)
+    expect(selectElement?.classList.contains('pkt-input--medium')).toBe(false)
+  })
+
+  test('applies pkt-input--xsmall class for input-size="xsmall"', async () => {
+    const { select } = await createSelectTest({ 'input-size': 'xsmall' })
+
+    expect(select.inputSize).toBe('xsmall')
+
+    const selectElement = select.querySelector('select')
+    expect(selectElement?.classList.contains('pkt-input--xsmall')).toBe(true)
+    expect(selectElement?.classList.contains('pkt-input--medium')).toBe(false)
+  })
+
   test('manages focus events correctly', async () => {
     const { select } = await createSelectTest()
 

package/src/components/select/select.ts

@@ -5,10 +5,10 @@ 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 type { TSelectOption } from 'shared-types'
+import type { TSelectOption } from 'shared-types/select'
 import '@/components/input-wrapper'
 
-export type { TSelectOption }
+export type { TSelectOption } from 'shared-types/select'
 
 export interface IPktSelect {
   options: TSelectOption[]
@@ -176,10 +176,11 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
   }
 
   render() {
-    const inputClass = `pkt-input ${this.fullwidth ? 'pkt-input--fullwidth' : ''}`
+    const inputClass = `pkt-input pkt-input--${this.inputSize} ${this.fullwidth ? 'pkt-input--fullwidth' : ''}`
 
     return html`
       <pkt-input-wrapper
+        .size=${this.inputSize}
         ?counter=${this.counter}
         ?disabled=${this.disabled}
         ?hasError=${this.hasError}

package/src/components/textarea/textarea.test.ts

@@ -4,6 +4,7 @@ import { fireEvent } from '@testing-library/dom'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import './textarea'
+import { TPktInputSize } from 'shared-types/size'
 
 export interface TextareaTestConfig extends BaseTestConfig {
   // From PktTextarea specific properties
@@ -29,6 +30,7 @@ export interface TextareaTestConfig extends BaseTestConfig {
   inline?: boolean
   ariaLabelledby?: string | null
   ariaDescribedBy?: string | null
+  inputSize?: TPktInputSize
 }
 
 // Use shared framework
@@ -156,9 +158,23 @@ describe('PktTextarea', () => {
     test('handles fullwidth styling', async () => {
       const { textarea } = await createTextareaTest({ fullwidth: true })
 
+      expect(textarea.hasAttribute('fullwidth')).toBe(true)
+
       const textareaElement = textarea.querySelector('textarea')
       expect(textareaElement?.className).toContain('pkt-input--fullwidth')
     })
+
+    test('applies inputSize to textarea and wrapper', async () => {
+      const { textarea } = await createTextareaTest({ label: 'Sized textarea' })
+      textarea.inputSize = 'xsmall'
+      await textarea.updateComplete
+
+      const textareaElement = textarea.querySelector('textarea')
+      expect(textareaElement?.classList.contains('pkt-input--xsmall')).toBe(true)
+
+      const inputWrapper = textarea.querySelector('.pkt-inputwrapper')
+      expect(inputWrapper?.classList.contains('pkt-inputwrapper--xsmall')).toBe(true)
+    })
   })
 
   describe('Character Counter', () => {

package/src/components/textarea/textarea.ts

@@ -44,6 +44,7 @@ export class PktTextarea extends PktInputElement<Props> {
   render() {
     const inputClasses = classMap({
       'pkt-input': true,
+      [`pkt-input--${this.inputSize}`]: true,
       'pkt-input--fullwidth': this.fullwidth,
       'pkt-input--counter-error':
         this.counter &&
@@ -74,6 +75,7 @@ export class PktTextarea extends PktInputElement<Props> {
       .optionalText=${this.optionalText}
       .requiredText=${this.requiredText}
       .tagText=${this.tagText}
+      .size=${this.inputSize}
       class="pkt-textarea"
     >
       <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
@@ -91,7 +93,7 @@ export class PktTextarea extends PktInputElement<Props> {
         aria-labelledby=${labelledBy}
         aria-invalid=${this.hasError}
         aria-errormessage=${`${this.id}-error`}
-        rows=${this.rows}
+        rows=${ifDefined(this.rows ?? undefined)}
         ?disabled=${this.disabled}
         @input=${(e: InputEvent) => {
           this.value = (e.target as HTMLInputElement).value

package/src/components/textinput/textinput.test.ts

@@ -15,6 +15,7 @@ export interface TextinputTestConfig extends BaseTestConfig {
   suffix?: string | null
   size?: number | null
   omitSearchIcon?: boolean
+  'input-size'?: string
 
   // From PktInputElement base class (commonly used ones)
   id?: string
@@ -146,6 +147,33 @@ describe('PktTextinput', () => {
       expect(inputElement?.hasAttribute('readonly')).toBe(true)
     })
 
+    test('applies pkt-input--medium class by default', async () => {
+      const { textinput } = await createTextinputTest()
+
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.classList.contains('pkt-input--medium')).toBe(true)
+    })
+
+    test('applies pkt-input--small class for input-size="small"', async () => {
+      const { textinput } = await createTextinputTest({ 'input-size': 'small' })
+
+      expect(textinput.inputSize).toBe('small')
+
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.classList.contains('pkt-input--small')).toBe(true)
+      expect(inputElement?.classList.contains('pkt-input--medium')).toBe(false)
+    })
+
+    test('applies pkt-input--xsmall class for input-size="xsmall"', async () => {
+      const { textinput } = await createTextinputTest({ 'input-size': 'xsmall' })
+
+      expect(textinput.inputSize).toBe('xsmall')
+
+      const inputElement = textinput.querySelector('input')
+      expect(inputElement?.classList.contains('pkt-input--xsmall')).toBe(true)
+      expect(inputElement?.classList.contains('pkt-input--medium')).toBe(false)
+    })
+
     test('handles required state', async () => {
       const { textinput } = await createTextinputTest({ required: true })
 

package/src/components/textinput/textinput.ts

@@ -60,6 +60,7 @@ export class PktTextinput extends PktInputElement<Props> {
       this.type === 'search' && !this.iconNameRight && !this.omitSearchIcon
     const inputClasses = classMap({
       'pkt-input': true,
+      [`pkt-input--${this.inputSize}`]: true,
       'pkt-input--fullwidth': this.fullwidth,
       'pkt-input--counter-error':
         this.counter &&
@@ -92,10 +93,11 @@ export class PktTextinput extends PktInputElement<Props> {
         .optionalText=${this.optionalText}
         .requiredText=${this.requiredText}
         .tagText=${this.tagText}
+        .size=${this.inputSize}
         class="pkt-textinput"
       >
         <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
-        <div class="pkt-input__container">
+        <div class=${`pkt-input__container pkt-input__container--${this.inputSize}`}>
           ${this.prefix ? html`<div class="pkt-input-prefix">${this.prefix}</div>` : nothing}
           <input
             ${ref(this.inputRef)}

package/src/components/timepicker/timepicker.test.ts

@@ -5,6 +5,7 @@ import { vi } from 'vitest'
 import { createElementTest, BaseTestConfig } from '../../tests/test-framework'
 import { CustomElementFor } from '../../tests/component-registry'
 import './timepicker'
+import { TPktInputSize } from 'shared-types/size'
 
 export interface TimepickerTestConfig extends BaseTestConfig {
   value?: string
@@ -22,6 +23,8 @@ export interface TimepickerTestConfig extends BaseTestConfig {
   helptext?: string
   id?: string
   name?: string
+  inputSize?: TPktInputSize
+  'input-size'?: TPktInputSize
 }
 
 export const createTimepickerTest = async (config: TimepickerTestConfig = {}) => {
@@ -184,6 +187,29 @@ describe('PktTimepicker', () => {
       expect(timepicker.classList.contains('pkt-timepicker--fullwidth')).toBe(true)
     })
 
+    test.each([
+      ['small', 'small'],
+      ['xsmall', 'xsmall'],
+    ] as const)(
+      'input-size="%s" applies size classes on host, container, inputs and clock button',
+      async (size, sizeClass) => {
+        const { timepicker } = await createTimepickerTest({
+          label: 'Tidspunkt',
+          id: 'test',
+          'input-size': size,
+        })
+        await timepicker.updateComplete
+
+        expect(timepicker.inputSize).toBe(size)
+        expect(timepicker.classList.contains(`pkt-timepicker--${sizeClass}`)).toBe(true)
+        expect(timepicker.querySelector(`.pkt-input__container--${sizeClass}`)).toBeTruthy()
+        expect(timepicker.querySelectorAll(`.pkt-input--${sizeClass}`)).toHaveLength(2)
+        expect(
+          timepicker.querySelector(`.pkt-timepicker__button.pkt-btn--${sizeClass}`),
+        ).toBeTruthy()
+      },
+    )
+
     test('min/max/step forwarded to hidden input', async () => {
       const { timepicker } = await createTimepickerTest({
         label: 'Tidspunkt',

package/src/components/timepicker/timepicker.ts

@@ -12,6 +12,7 @@ import { getMinuteStep, getHourOptions, getMinuteOptions } from 'shared-utils/ti
 import { stepTime } from 'shared-utils/timepicker/stepper'
 import '@/components/icon'
 import '@/components/input-wrapper'
+import { TPktInputSize } from 'shared-types/size'
 
 type Props = ElementProps<PktTimepicker, 'value' | 'hidePicker' | 'stepArrows'>
 
@@ -39,6 +40,7 @@ export interface IPktTimepicker {
   optionalText?: string
   tagText?: string | null
   inline?: boolean
+  inputSize?: TPktInputSize
 }
 
 export class PktTimepicker extends PktInputElement<Props> {
@@ -199,6 +201,9 @@ export class PktTimepicker extends PktInputElement<Props> {
     super.updated(changedProperties)
     this.classList.toggle('pkt-timepicker--stepper', this.stepArrows)
     this.classList.toggle('pkt-timepicker--fullwidth', this.fullwidth)
+    this.classList.toggle('pkt-timepicker--medium', this.inputSize === 'medium')
+    this.classList.toggle('pkt-timepicker--small', this.inputSize === 'small')
+    this.classList.toggle('pkt-timepicker--xsmall', this.inputSize === 'xsmall')
     if (changedProperties.has('step') && this.step !== null && !this._isValidStep(this.step)) {
       // eslint-disable-next-line no-console
       console.warn(
@@ -612,7 +617,7 @@ export class PktTimepicker extends PktInputElement<Props> {
     const minutesAriaLabel = this.label ? `${minutesLabel}, ${this.label}` : minutesLabel
     return html`
       <div
-        class="pkt-input__container"
+        class="pkt-input__container pkt-input__container--${this.inputSize}"
         @click=${(e: Event) => {
           const target = e.target as HTMLElement
           if (target.closest('button, input')) return
@@ -622,7 +627,7 @@ export class PktTimepicker extends PktInputElement<Props> {
         ${this.stepArrows
           ? html`
               <button
-                class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button pkt-timepicker__button--prev"
+                class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-btn--${this.inputSize} pkt-timepicker__button pkt-timepicker__button--prev"
                 type="button"
                 aria-label=${this.strings.timepicker?.prevTime ?? 'Forrige tidspunkt'}
                 ?disabled=${this.disabled}
@@ -641,7 +646,7 @@ export class PktTimepicker extends PktInputElement<Props> {
           inputmode="numeric"
           maxlength="2"
           size="2"
-          class="pkt-input pkt-timepicker__input"
+          class="pkt-input pkt-input--${this.inputSize} pkt-timepicker__input"
           id=${this.id + '-hours'}
           data-min="0"
           data-max="23"
@@ -672,7 +677,7 @@ export class PktTimepicker extends PktInputElement<Props> {
           inputmode="numeric"
           maxlength="2"
           size="2"
-          class="pkt-input pkt-timepicker__input"
+          class="pkt-input pkt-input--${this.inputSize} pkt-timepicker__input"
           id=${this.id + '-minutes'}
           data-min="0"
           data-max="59"
@@ -707,7 +712,7 @@ export class PktTimepicker extends PktInputElement<Props> {
           ? html`
               <button
                 ${ref(this.buttonRef)}
-                class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button"
+                class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-btn--${this.inputSize} pkt-timepicker__button"
                 type="button"
                 aria-label=${this.strings.timepicker?.openPicker ?? 'Åpne tidspunkt-velger'}
                 aria-haspopup="listbox"
@@ -726,7 +731,7 @@ export class PktTimepicker extends PktInputElement<Props> {
         ${this.stepArrows
           ? html`
               <button
-                class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-timepicker__button pkt-timepicker__button--next"
+                class="pkt-input-icon pkt-btn pkt-btn--icon-only pkt-btn--tertiary pkt-btn--${this.inputSize} pkt-timepicker__button pkt-timepicker__button--next"
                 type="button"
                 aria-label=${this.strings.timepicker?.nextTime ?? 'Neste tidspunkt'}
                 ?disabled=${this.disabled}
@@ -778,6 +783,7 @@ export class PktTimepicker extends PktInputElement<Props> {
         .optionalText=${this.optionalText}
         .requiredText=${this.requiredText}
         .tagText=${this.tagText}
+        .size=${this.inputSize}
       >
         <div class="pkt-contents" slot="helptext">${slotContent(this, 'helptext')}</div>
         ${!this.hidePicker && !this.stepArrows

package/dist/accordion-FISAiAbX.cjs

@@ -1,47 +0,0 @@
-const e=require("./element-DJzurxgt.cjs"),t=require("./class-map-CCZN5uS3.cjs"),n=require("./element-with-slot-BY7Jc-q8.cjs"),r=require("./if-defined-DrwbxQOj.cjs"),i=require("./ref-DO7TzO4O.cjs");var a=class extends e.i{constructor(...e){super(...e),this.ariaLabelledBy=``,this.compact=!1,this.skin=`borderless`,this.name=``}updated(e){e.has(`skin`)&&this.requestUpdate(),e.has(`name`)&&this.updateAccordionItemNames()}updateAccordionItemNames(){if(this.name){let e=this.renderRoot?.querySelector(`slot`);e&&e.assignedElements().forEach(e=>{e.tagName.toLowerCase()===`pkt-accordion-item`&&(e.hasAttribute(`name`)||e.setAttribute(`name`,this.name))})}}firstUpdated(){let e=this.renderRoot?.querySelector(`slot`);e&&e.addEventListener(`slotchange`,()=>{this.updateAccordionItemNames()})}render(){return e.p`
-      <div
-        part="container"
-        class=${t.t({"pkt-accordion":!0,"pkt-accordion--compact":this.compact,[`pkt-accordion--${this.skin}`]:this.skin})}
-        data-testid="pkt-accordion"
-        aria-labelledby=${this.ariaLabelledBy}
-      >
-        <slot></slot>
-      </div>
-    `}};e.n([e.o({type:String,reflect:!0,attribute:`aria-labelledby`})],a.prototype,`ariaLabelledBy`,void 0),e.n([e.o({type:Boolean,reflect:!0,attribute:`compact`})],a.prototype,`compact`,void 0),e.n([e.o({type:String,reflect:!0,attribute:`skin`})],a.prototype,`skin`,void 0),e.n([e.o({type:String,reflect:!0,attribute:`name`})],a.prototype,`name`,void 0);try{e.s(`pkt-accordion`)(a)}catch{console.warn(`Forsøker å definere <pkt-accordion>, men den er allerede definert`)}var o=class extends n.t{constructor(){super(),this.defaultOpen=!1,this.title=``,this.skin=void 0,this.compact=!1,this.isOpen=!1,this.name=void 0,this.accordionItemRef=i.t()}firstUpdated(e){this.defaultOpen&&(this.isOpen=!0)}render(){let a={"pkt-accordion-item":!0,"pkt-accordion-item--compact":this.compact,[`pkt-accordion-item--${this.skin}`]:!!this.skin},o=this.skin===`plus-minus`;return e.p`
-      <details
-        class=${t.t(a)}
-        id=${this.id}
-        ?open=${this.isOpen}
-        ${i.n(this.accordionItemRef)}
-        name=${r.t(this.name)}
-      >
-        <summary class="pkt-accordion-item__title" id=${`pkt-accordion-item-summary-${this.id}`}>
-          ${this.title}
-          ${o?e.p`
-                <pkt-icon
-                  name="plus-sign"
-                  class="pkt-accordion-item__icon pkt-accordion-item__icon--plus"
-                  aria-hidden="true"
-                ></pkt-icon>
-                <pkt-icon
-                  name="minus-sign"
-                  class="pkt-accordion-item__icon pkt-accordion-item__icon--minus"
-                  aria-hidden="true"
-                ></pkt-icon>
-              `:e.p`
-                <pkt-icon
-                  name="chevron-thin-down"
-                  class="pkt-accordion-item__icon"
-                  aria-hidden="true"
-                ></pkt-icon>
-              `}
-        </summary>
-        <div
-          class="pkt-accordion-item__content"
-          id="pkt-accordion-item__content-${this.id}"
-          role="region"
-        >
-          <div class="pkt-accordion-item__content-inner">${n.n(this)}</div>
-        </div>
-      </details>
-    `}};e.n([e.o({type:Boolean})],o.prototype,`defaultOpen`,void 0),e.n([e.o({type:String})],o.prototype,`title`,void 0),e.n([e.o({type:String,reflect:!0})],o.prototype,`skin`,void 0),e.n([e.o({type:Boolean,reflect:!0})],o.prototype,`compact`,void 0),e.n([e.o({type:Boolean,reflect:!0})],o.prototype,`isOpen`,void 0),e.n([e.o({type:String,reflect:!0})],o.prototype,`name`,void 0);try{e.s(`pkt-accordion-item`)(o)}catch{console.warn(`Forsøker å definere <pkt-accordion-item>, men den er allerede definert`)}var s=a;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return o}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return a}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return s}});

package/dist/button-C_YzTSuU.js

@@ -1,96 +0,0 @@
-import { d as e, n as t, o as n, p as r, s as i } from "./element-BoJrqauR.js";
-import { t as a } from "./class-map-CAQCRB1W.js";
-import { n as o, t as s } from "./element-with-slot-mXLg8gg8.js";
-import "./icon-DGFEIlco.js";
-import { t as c } from "./if-defined-D0bnetLJ.js";
-//#region src/components/button/button.ts
-var l = "https://punkt-cdn.oslo.kommune.no/latest/animations/";
-typeof window < "u" && (window.pktAnimationPath = window.pktAnimationPath || l);
-var u = class extends s {
-	constructor(...e) {
-		super(...e), this.iconName = "user", this.secondIconName = "user", this.mode = "light", this.size = "medium", this.fullWidth = !1, this.fullWidthOnMobile = !1, this.skin = "primary", this.variant = "label-only", this.state = "normal", this.type = "button", this.form = void 0, this.isLoading = !1, this.disabled = !1, this.loadingAnimationPath = typeof window < "u" ? window.pktAnimationPath : l;
-	}
-	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);
-	}
-	firstUpdated(e) {
-		super.firstUpdated(e), this.disabled === "false" && (this.disabled = !1), this.isLoading === "false" && (this.isLoading = !1);
-	}
-	render() {
-		let t = this.form ?? this.getAttribute("form") ?? void 0;
-		return r`
-      <button
-        class=${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--disabled": !!this.disabled,
-			"pkt-btn--isLoading": !!this.isLoading
-		})}
-        type=${this.type}
-        ?disabled=${!!this.disabled}
-        aria-busy=${c(this.isLoading ? "true" : void 0)}
-        aria-disabled=${c(this.disabled || this.isLoading ? "true" : void 0)}
-        form=${c(t)}
-      >
-        ${this.isLoading ? r`<pkt-icon
-              class="pkt-btn__icon pkt-btn__spinner"
-              name="spinner-blue"
-              path=${c(this.loadingAnimationPath)}
-            ></pkt-icon>` : e}
-        ${this.variant === "label-only" ? e : r`<pkt-icon
-              class="pkt-btn__icon pkt-icon"
-              name=${this.iconName}
-              path=${c(this.iconPath)}
-            ></pkt-icon>`}
-        <span class="pkt-btn__text">${o(this)}</span>
-        ${this.variant === "icons-right-and-left" ? r`<pkt-icon
-              class="pkt-btn__icon"
-              name=${this.secondIconName}
-              path=${c(this.secondIconPath)}
-            ></pkt-icon>` : e}
-      </button>
-    `;
-	}
-};
-t([n({ type: String })], u.prototype, "iconName", void 0), t([n({ type: String })], u.prototype, "secondIconName", void 0), t([n({ type: String })], u.prototype, "iconPath", void 0), t([n({ type: String })], u.prototype, "secondIconPath", void 0), t([n({ type: String })], u.prototype, "mode", void 0), t([n({ type: String })], u.prototype, "size", void 0), t([n({
-	type: Boolean,
-	attribute: "full-width"
-})], u.prototype, "fullWidth", void 0), t([n({
-	type: Boolean,
-	attribute: "full-width-on-mobile"
-})], u.prototype, "fullWidthOnMobile", void 0), t([n({ type: String })], u.prototype, "color", void 0), t([n({ type: String })], u.prototype, "skin", void 0), t([n({ type: String })], u.prototype, "variant", void 0), t([n({
-	type: String,
-	reflect: !0
-})], u.prototype, "state", void 0), t([n({
-	type: String,
-	reflect: !0
-})], u.prototype, "type", void 0), t([n({ type: String })], u.prototype, "form", void 0), t([n({
-	type: Boolean,
-	reflect: !0
-})], u.prototype, "isLoading", void 0), t([n({
-	type: Boolean,
-	reflect: !0
-})], u.prototype, "disabled", void 0), t([n({ type: String })], u.prototype, "loadingAnimationPath", void 0);
-try {
-	i("pkt-button")(u);
-} catch {
-	console.warn("Forsøker å definere <pkt-button>, men den er allerede definert");
-}
-//#endregion
-//#region src/components/button/index.ts
-var d = u;
-//#endregion
-export { u as n, d as t };