@oslokommune/punkt-elements 18.4.0 → 18.5.1

package/src/components/progressbar/progressbar.ts

@@ -1,6 +1,7 @@
 import { classMap } from 'lit/directives/class-map.js'
 import { customElement, property, state } from 'lit/decorators.js'
 import { html, nothing } from 'lit'
+import { ifDefined } from 'lit/directives/if-defined.js'
 import { PktElement } from '@/base-elements/element'
 import { Ref, createRef, ref } from 'lit/directives/ref.js'
 import { styleMap } from 'lit/directives/style-map.js'
@@ -44,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, reflect: true }) id: string = uuidish()
+  @property({ type: String }) id: string = uuidish()
   @property({ type: String }) role: TProgressbarRole = 'progressbar'
   @property({ type: String }) skin: TProgressbarSkin = 'dark-blue'
   @property({ type: String }) statusPlacement: TProgressbarStatusPlacement = 'following'
@@ -58,17 +59,29 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
   // State
   @state() private labelWidth = 0
   @state() private progressbarId: string = this.id
-  @state() private computedAriaLabelledby: string | null = null
-  @state() private computedAriaValueText = ''
+  @state() private resolvedRole: TProgressbarRole = 'progressbar'
 
   // Private refs
   private labelRef: Ref<HTMLSpanElement> = createRef()
   private progressBarRef: Ref<HTMLDivElement> = createRef()
 
-  firstUpdated(changedProperties: Map<string | number | symbol, unknown>) {
-    super.firstUpdated(changedProperties)
-    this.setComputedValues()
-    this.syncAttributes()
+  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) {
+      this.progressbarId = this.id
+    }
+    // Verdien må fanges FØR removeAttribute: den utløser attributeChangedCallback,
+    // som nuller propertyen.
+    const roleAttr = this.getAttribute('role')
+    if (roleAttr) {
+      this.resolvedRole = roleAttr as TProgressbarRole
+      this.removeAttribute('role')
+    } else if (this.role) {
+      this.resolvedRole = this.role
+    }
   }
 
   updated(changedProperties: Map<string | number | symbol, unknown>) {
@@ -77,30 +90,6 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
     if (changedProperties.has('valueCurrent') && this.labelRef.value) {
       this.labelWidth = this.labelRef.value.getBoundingClientRect().width || 0
     }
-    if (changedProperties.has('id') && this.id) {
-      this.progressBarId = this.id
-    }
-
-    if (
-      changedProperties.has('statusType') ||
-      changedProperties.has('id') ||
-      changedProperties.has('ariaLabelledby')
-    ) {
-      this.progressbarId = this.id || uuidish()
-      this.computedAriaLabelledby = this.ariaLabelledby || `${this.progressbarId}-title`
-    }
-    if (
-      changedProperties.has('ariaValueText') ||
-      changedProperties.has('valueCurrent') ||
-      changedProperties.has('valueMax')
-    ) {
-      this.computedAriaValueText =
-        this.statusType === 'fraction' && !this.ariaValueText
-          ? `${this.valueCurrent} av ${this.valueMax - this.valueMin}`
-          : this.ariaValueText || ''
-    }
-
-    this.syncAttributes()
   }
 
   render() {
@@ -114,6 +103,14 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
 
     const formattedTitle = `${this.valueCurrent} av ${totalSteps}`
 
+    const computedAriaValueText =
+      this.statusType === 'fraction' && !this.ariaValueText
+        ? `${this.valueCurrent} av ${this.valueMax - this.valueMin}`
+        : this.ariaValueText || ''
+    const computedAriaLabelledby = this.ariaLabel
+      ? undefined
+      : this.ariaLabelledby || `${this.progressbarId}-title`
+
     const barClasses = classMap({
       'pkt-progressbar__bar': true,
       [`pkt-progressbar__bar--${this.skin}`]: !!this.skin,
@@ -132,64 +129,46 @@ export class PktProgressbar extends PktElement implements IPktProgressbar {
       [`pkt-progressbar__status-placement--left`]: this.statusPlacement === 'left',
     })
 
-    return html` <div
-      class="pkt-progressbar__container"
-      .ref=${this.progressBarRef}
-      style=${styleMap({
-        '--pkt-progress-label-width': `${this.labelWidth}px`,
-        '--pkt-progress-width': `${currentPercentage}%`,
-      })}
+    return html`<div
+      ${ref(this.progressBarRef)}
+      id=${this.progressbarId}
+      role=${this.resolvedRole}
+      aria-live=${ifDefined(this.ariaLive || undefined)}
+      aria-atomic="true"
+      aria-valuenow=${this.valueCurrent}
+      aria-valuemin=${this.valueMin}
+      aria-valuemax=${this.valueMax}
+      aria-valuetext=${ifDefined(computedAriaValueText || undefined)}
+      aria-label=${ifDefined(this.ariaLabel || undefined)}
+      aria-labelledby=${ifDefined(computedAriaLabelledby)}
+      class="pkt-progressbar"
     >
-      ${this.title
-        ? html`<p id=${`${this.progressBarId}-title`} class=${titleClasses}>${this.title}</p>`
-        : nothing}
-
-      <div class="pkt-progressbar__bar-wrapper">
-        <div class=${barClasses}></div>
+      <div
+        class="pkt-progressbar__container"
+        style=${styleMap({
+          '--pkt-progress-label-width': `${this.labelWidth}px`,
+          '--pkt-progress-width': `${currentPercentage}%`,
+        })}
+      >
+        ${this.title
+          ? html`<p id=${`${this.progressbarId}-title`} class=${titleClasses}>${this.title}</p>`
+          : nothing}
+
+        <div class="pkt-progressbar__bar-wrapper">
+          <div class=${barClasses}></div>
+        </div>
+
+        ${hasStatus
+          ? html`<div class=${statusClasses}>
+              <span class=${placementClasses} ${ref(this.labelRef)}>
+                ${this.statusType === 'percentage' ? `${currentPercentage}%` : formattedTitle}
+              </span>
+            </div>`
+          : nothing}
       </div>
-
-      ${hasStatus
-        ? html`<div class=${statusClasses}>
-            <span class=${placementClasses} ${ref(this.labelRef)}>
-              ${this.statusType === 'percentage' ? `${currentPercentage}%` : formattedTitle}
-            </span>
-          </div>`
-        : nothing}
     </div>`
   }
 
-  // methods
-  private setComputedValues() {
-    this.progressbarId = this.id || uuidish()
-    this.computedAriaLabelledby = this.ariaLabelledby || `${this.progressbarId}-title`
-    this.computedAriaValueText =
-      this.statusType === 'fraction' && !this.ariaValueText
-        ? `${this.valueCurrent} av ${this.valueMax - this.valueMin}`
-        : this.ariaValueText || ''
-  }
-
-  private syncAttributes() {
-    this._handleAttribute('aria-live', this.ariaLive)
-    this._handleAttribute('aria-valuenow', this.valueCurrent)
-    this._handleAttribute('aria-valuemin', this.valueMin)
-    this._handleAttribute('aria-valuemax', this.valueMax)
-    this._handleAttribute('aria-valuetext', this.computedAriaValueText)
-    this._handleAttribute('aria-label', this.ariaLabel)
-    this._handleAttribute('role', this.role)
-    this._handleAttribute('aria-atomic', 'true')
-    this._handleAttribute('id', this.progressbarId)
-    if (!this.ariaLabel) {
-      this._handleAttribute('aria-labelledby', this.computedAriaLabelledby)
-    }
-  }
-
-  private _handleAttribute(name: string, value: string | number | null) {
-    if (value == null || value === '') {
-      this.removeAttribute(name)
-    } else {
-      this.setAttribute(name, String(value))
-    }
-  }
 }
 
 export default PktProgressbar

package/src/components/radiobutton/radiobutton.ts

@@ -105,7 +105,6 @@ export class PktRadioButton extends PktInputElement<Props> {
             id=${this.id + '-internal'}
             class=${inputCheckBoxClasses}
             type="radio"
-            role="radio"
             ?disabled=${this.disabled}
             form=""
             name=${this.name + '-internal'}

package/src/components/searchinput/searchinput.ts

@@ -1,4 +1,5 @@
 import { PktElement } from '@/base-elements/element'
+import { uuidish } from 'shared-utils/utils'
 import { html, nothing, type PropertyValues } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { classMap } from 'lit/directives/class-map.js'
@@ -27,7 +28,7 @@ export class PktSearchInput extends PktElement<IPktSearchInput> implements IPktS
   @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 = ''
+  @property({ type: String, reflect: true }) id: string = uuidish()
   @property({ type: String }) label: string | undefined
   @property({ type: String }) name: string | undefined
   /** @deprecated Bruk `strings={{ searchinput: { placeholder: '…' } }}` eller `setPktStrings()`. */
@@ -176,6 +177,7 @@ export class PktSearchInput extends PktElement<IPktSearchInput> implements IPktS
           name=${this.name || this.id}
           id=${this.id}
           placeholder=${this.placeholder || searchStrings.placeholder}
+          value=${this.value}
           .value=${this.value}
           ?disabled=${this.disabled}
           autocomplete="off"

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

@@ -82,7 +82,8 @@ describe('pkt-select', () => {
     expect(selectElement).toBeInTheDocument()
     expect(selectElement?.getAttribute('id')).toBe('my-select-input')
     expect(selectElement?.hasAttribute('disabled')).toBe(true)
-    expect(selectElement?.getAttribute('value')).toBe('option2')
+    expect(selectElement?.hasAttribute('value')).toBe(false)
+    expect(select.value).toBe('option2')
   })
 
   test('handles options array property', async () => {

package/src/components/select/select.ts

@@ -218,7 +218,6 @@ export class PktSelect extends PktOptionsInputElement<{}, TSelectOption> impleme
           ?disabled=${this.disabled}
           id=${this.id + '-input'}
           name=${(this.name || this.id) + '-input'}
-          value=${this.value}
           @change=${(e: Event) => {
             this.touched = true
             this.value = (e.target as HTMLSelectElement).value

package/dist/alert-BYDWYgyL.cjs

@@ -1,35 +0,0 @@
-const e=require("./element-DRc10X2R.cjs"),t=require("./class-map-BEib48YL.cjs"),n=require("./format-B8meU8Tm.cjs"),r=require("./element-with-slot-MkibfzHp.cjs"),i=require("./classutils-CbklAJDe.cjs"),a=require("./define-component-spec-DBNd2FJY.cjs");require("./icon-DBFTFd-J.cjs"),require("./button-C5BYwmoo.cjs");var o=[`off`,`polite`,`assertive`],s=[`info`,`success`,`warning`,`error`],c=[`medium`,`small`,`xsmall`],l=a.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:`Vue: 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:[...s],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:[...o],default:`polite`,category:`accessibility`},size:{name:`Størrelse`,description:`Endrer størrelsen på ulike elementer i alerten.`,type:[...c],default:`medium`,category:`ui`},closeAlert:{name:`Vis 'Lukk'-knapp`,description:`Viser 'Lukk'-knappen`,type:`boolean`,default:!1,category:`ui`}},slots:{default:{description:`Innholdet i meldingen`}},deprecated:{compact:{name:`Kompakt (deprecated)`,description:"Bruk `size` i stedet; uten eksplisitt `size` gir compact størrelsen 'small'.",type:`boolean`,category:`ui`,default:!1}}}),u=class extends r.t{constructor(){super(),this.compact=l.deprecated.compact.default,this.title=``,this.skin=l.props.skin.default,this.ariaLive=l.props.ariaLive.default,this.ariaLiveAttr=null,this.closeAlert=l.props.closeAlert.default,this.date=null,this.role=`status`,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}attributeChangedCallback(e,t,n){e===`ariaLive`&&(this.ariaLiveAttr=n),super.attributeChangedCallback(e,t,n)}updated(e){super.updated(e),e.has(`ariaLive`)&&(this.ariaLiveAttr=this.ariaLive),e.has(`_isClosed`)&&i.t(this,`pkt-hide`,this._isClosed)}render(){let i=this.size??(this.compact?`small`:`medium`),a={"pkt-alert":!0,[`pkt-alert--${i}`]:!0,[`pkt-alert--${this.skin}`]:!0,"pkt-hide":this._isClosed},o={"pkt-alert__grid":!0,"pkt-alert__noTitle":!this.title,"pkt-alert__noDate":!this.date};return e._`
-      <div class=${t.t(a)} aria-live=${this.ariaLiveAttr}>
-        <div class=${t.t(o)}>
-          <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="close"
-                    size=${i}
-                    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">${r.n(this)}</div>
-
-          ${this.date?e._`<div class="pkt-alert__date">
-                ${n.t(this.pktStrings.get(`alert`).lastUpdated,{date:this.date})}
-              </div>`:e.h}
-        </div>
-      </div>
-    `}};e.n([e.u({type:Boolean,reflect:!1})],u.prototype,`compact`,void 0),e.n([e.u({type:String,reflect:!0})],u.prototype,`title`,void 0),e.n([e.u({type:String,reflect:!0})],u.prototype,`skin`,void 0),e.n([e.u({type:String})],u.prototype,`ariaLive`,void 0),e.n([e.u({type:String,reflect:!0,attribute:`aria-live`})],u.prototype,`ariaLiveAttr`,void 0),e.n([e.u({type:Boolean,reflect:!0})],u.prototype,`closeAlert`,void 0),e.n([e.u({type:String,reflect:!0})],u.prototype,`date`,void 0),e.n([e.u({type:String,reflect:!0})],u.prototype,`role`,void 0),e.n([e.u({type:String,attribute:`size`})],u.prototype,`size`,void 0),e.n([e.l()],u.prototype,`_isClosed`,void 0);try{e.d(`pkt-alert`)(u)}catch{console.warn(`Forsøker å definere <pkt-alert>, men den er allerede definert`)}var d=u;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return d}});

package/dist/button-C5BYwmoo.cjs

@@ -1,30 +0,0 @@
-const e=require("./element-DRc10X2R.cjs"),t=require("./class-map-BEib48YL.cjs"),n=require("./element-with-slot-MkibfzHp.cjs");require("./icon-DBFTFd-J.cjs");const r=require("./if-defined-BeVQnl3C.cjs");var i=`https://punkt-cdn.oslo.kommune.no/latest/animations/`;typeof window<`u`&&(window.pktAnimationPath=window.pktAnimationPath||i);var a=class a extends n.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=`normal`,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`]}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--disabled":!!this.disabled,"pkt-btn--isLoading":!!this.isLoading};return e._`
-      <button
-        class=${t.t(a)}
-        type=${this.type}
-        ?disabled=${!!this.disabled}
-        aria-busy=${r.t(this.isLoading?`true`:void 0)}
-        aria-disabled=${r.t(this.disabled||this.isLoading?`true`:void 0)}
-        aria-haspopup=${r.t(this.relocatedAria[`aria-haspopup`])}
-        aria-expanded=${r.t(this.relocatedAria[`aria-expanded`])}
-        aria-controls=${r.t(this.relocatedAria[`aria-controls`])}
-        form=${r.t(i)}
-      >
-        ${this.isLoading?e._`<pkt-icon
-              class="pkt-btn__icon pkt-btn__spinner"
-              name="spinner-blue"
-              path=${r.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=${r.t(this.iconPath)}
-            ></pkt-icon>`}
-        <span class="pkt-btn__text">${n.n(this)}</span>
-        ${this.variant===`icons-right-and-left`?e._`<pkt-icon
-              class="pkt-btn__icon"
-              name=${this.secondIconName}
-              path=${r.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/card-DMKvuvNv.cjs

@@ -1,87 +0,0 @@
-const e=require("./element-DRc10X2R.cjs"),t=require("./class-map-BEib48YL.cjs"),n=require("./element-with-slot-MkibfzHp.cjs");require("./icon-DBFTFd-J.cjs");const r=require("./if-defined-BeVQnl3C.cjs");require("./tag-Bp9gJnYh.cjs"),require("./heading-BAoIzzJO.cjs");var i={name:`pkt-card`,react:`PktCard`,"css-class":`pkt-card`,isElement:!0,isPureReact:!0,"dark-mode":!0,props:{heading:{type:`string`,name:`Overskrift`,description:`Tittel på card`,category:`contents`},headingLevel:{type:[1,2,3,4,5,6],name:`Overskriftsnivå`,description:`Nivået på headingen. Brukes for tilgjengelighet.`,default:3,category:`accessibility`},subheading:{type:`string`,name:`Undertittel`,description:`Undertittel på card`,category:`contents`},layout:{type:[`vertical`,`horizontal`],name:`Layout`,description:`Horisontal eller vertikal layout. Ved horisontal layout vil bildet være plassert til venstre for teksten på desktop, og over teksten på mobil.`,default:`vertical`,category:`ui`},skin:{type:[`outlined`,`outlined-beige`,`gray`,`blue`,`beige`,`green`],name:`Utseende`,description:`Fargen på card. Velg mellom outlined, outlined-beige, gray, blue, beige og green. Ved padding=none er det ikke mulighet for outlined-skin. Card med kombinasjonen av propsene padding=none + layout=vertical vil alltid være transparante.`,default:`outlined`,category:`ui`},padding:{type:[`none`,`default`],name:`Padding`,description:`Padding rundt card. Ved "none" strekker innholdet i card seg ut til kantene, og dette er derfor ikke mulig å kombinere med outlined skin.`,default:`default`,category:`ui`},metaLead:{type:`string`,name:`Forfatter eller annen metadata`,description:`Undertekst med fet skriftvekt`,default:!1,category:`contents`},metaTrail:{type:`string`,name:`Dato eller annen metadata`,description:`Undertekst med normal skriftvekt`,default:!1,category:`contents`},tagPosition:{type:[`top`,`bottom`],name:`Tagplassering`,description:`Plassering av tags i card`,default:`top`,category:`ui`},clickCardLink:{type:`string`,name:`Lenke for klikkbart card`,description:`Href sendes inn som streng for å gjøre card klikkbart. Ved bruk MÅ heading sendes inn da denne vil brukes som lenketekst i klikkbart card.`,category:`contents`},openLinkInNewTab:{type:`boolean`,name:`Åpne i ny fane`,description:`Velg denne dersom du ønsker at lenken i card skal åpnes i ny fane.`,default:!1,category:`tech`},borderOnHover:{type:`boolean`,name:`Hover border for klikkbart card`,description:`Vi anbefaler hoverborder på klikkbart card. Kan slås av ved behov.`,default:!0,category:`ui`},image:{type:`object`,name:`Bilde`,description:`Bildet på card. Tar inn et objekt av typen {src: string, alt: string}.`,properties:{src:{type:`string`,description:`Stien til bildet`,required:!0},alt:{type:`string`,description:`Tekst til skjermleser. Skal kun sendes inn for bilder som ikke er dekorative`,required:!1}},category:`contents`},imageShape:{type:[`square`,`round`],name:`Bildeform`,description:`Valg for om bildet skal ha rektangulær eller rund form.`,default:`square`,category:`contents`},tags:{type:`array`,description:`Liste av tags på card. Tar inn et array med objekter med følgende stringproperties: skin, iconName, ariaLabel, text`,name:`Tags`,items:{type:`object`,name:`Tag`,properties:{skin:{type:[`blue`,`green`,`red`,`yellow`],description:`Farge på tag`},iconName:{type:`icon`,description:`Id på ikonet du ønsker å bruke til tag`},ariaLabel:{type:`string`,description:`Tekst for aria-label`},text:{type:`string`,description:`Tekst på tag`,required:!0}}},category:`contents`},ariaLabel:{type:`string`,name:`Aria-label for card`,description:`Tekst til skjermleser for aria-label på card. Settes automatisk til headingen, eller subheadingen der heading ikke eksisterer. Ved bruk av klikkbart card må heading alltid sendes inn da denne brukes som lenketekst.`,category:`accessibility`}},slots:{default:{description:`Innholdet i card`}}},a=class extends n.t{constructor(...e){super(...e),this.ariaLabel=``,this.metaLead=null,this.borderOnHover=!0,this.clickCardLink=null,this.metaTrail=null,this.layout=i.props.layout.default,this.heading=``,this.headinglevel=3,this.image={src:``,alt:``},this.imageShape=`square`,this.openLinkInNewTab=!1,this.padding=i.props.padding.default,this.skin=i.props.skin.default,this.subheading=``,this.tagPosition=`top`,this.tags=[]}connectedCallback(){super.connectedCallback()}render(){let n={"pkt-card":!0,[`pkt-card--${this.skin}`]:this.skin,[`pkt-card--${this.layout}`]:this.layout,[`pkt-card--padding-${this.padding}`]:this.padding,"pkt-card--border-on-hover":this.borderOnHover},i=this.ariaLabel?.trim()||(this.heading?`${this.heading} lenkekort`:`lenkekort`),a=this.ariaLabel?.trim()||(this.heading?this.heading:`kort`);return e._`
-      <article
-        class=${t.t(n)}
-        aria-label=${r.t(this.clickCardLink?i:a)}
-      >
-        ${this.renderImage()}
-        <div class="pkt-card__wrapper">
-          ${this.tagPosition===`top`?this.renderTags():e.h} 
-          ${this.renderHeader()}
-          ${this.renderSlot()} 
-          ${this.tagPosition===`bottom`?this.renderTags():e.h}
-          ${this.renderMetadata()}
-        </div>
-      </article>
-    `}renderImage(){let n={"pkt-card__image":!0,[`pkt-card__image-${this.imageShape}`]:this.imageShape};return e._`
-      ${this.image.src&&e._`
-        <div class=${t.t(n)}>
-          <img src=${this.image.src} alt=${this.image.alt||``} />
-        </div>
-      `}
-    `}renderHeading(){return e._`
-      ${this.heading&&!this.clickCardLink?e._`
-            <pkt-heading
-              class="pkt-card__heading"
-              .level=${this.headinglevel||3}
-              size="medium"
-              nospacing
-              weight="regular"
-            >
-              ${this.heading}
-            </pkt-heading>
-          `:e.h}
-    `}renderLinkHeading(){return e._`
-      ${this.clickCardLink?e._`
-            <pkt-heading
-              class="pkt-card__link-heading pkt-card__heading"
-              .level=${this.headinglevel||3}
-              size="medium"
-              weight="regular"
-              nospacing
-            >
-              <a
-                class="pkt-card__link"
-                href=${this.clickCardLink}
-                target=${this.openLinkInNewTab?`_blank`:`_self`}
-                >${this.heading}</a
-              >
-            </pkt-heading>
-          `:e.h}
-    `}renderSubheading(){return e._`
-      ${this.subheading?e._` <p class="pkt-card__subheading ">${this.subheading}</p> `:e.h}
-    `}renderHeader(){let t=!!this.heading||!!this.subheading;return e._`
-      ${t?e._`
-            <header class="pkt-card__header">
-              ${this.renderHeading()} 
-              ${this.renderLinkHeading()} 
-              ${this.renderSubheading()}
-            </header>
-          `:e.h}
-    `}renderTags(){let n={"pkt-card__tags":!0,[`pkt-card__tags-${this.tagPosition}`]:this.tagPosition};return e._`
-      ${this.tags.length>0?e._`
-            <div
-              class=${t.t(n)}
-              role="list"
-              aria-label=${this.tags.length>1?`merkelapper`:`merkelapp`}
-            >
-              ${this.tags.map(t=>e._`
-                  <pkt-tag
-                    role="listitem"
-                    textStyle="normal-text"
-                    size="medium"
-                    skin=${r.t(t.skin)}
-                    iconName=${r.t(t.iconName)}
-                  >
-                    <span>${t.text}</span>
-                  </pkt-tag>
-                `)}
-            </div>
-          `:e.h}
-    `}renderSlot(){return e._`<section class="pkt-card__content">${n.n(this)}</section>`}renderMetadata(){return e._`
-      ${this.metaLead||this.metaTrail?e._`
-            <footer class="pkt-card__metadata">
-              ${this.metaLead?e._`<span class="pkt-card__metadata-lead">${this.metaLead}</span>`:e.h}
-              ${this.metaTrail?e._`<span class="pkt-card__metadata-trail">${this.metaTrail}</span>`:e.h}
-            </footer>
-          `:e.h}
-    `}};e.n([e.u({type:String})],a.prototype,`ariaLabel`,void 0),e.n([e.u({type:String})],a.prototype,`metaLead`,void 0),e.n([e.u({type:Boolean})],a.prototype,`borderOnHover`,void 0),e.n([e.u({type:String,reflect:!0})],a.prototype,`clickCardLink`,void 0),e.n([e.u({type:String})],a.prototype,`metaTrail`,void 0),e.n([e.u({type:String})],a.prototype,`layout`,void 0),e.n([e.u({type:String})],a.prototype,`heading`,void 0),e.n([e.u({type:Number})],a.prototype,`headinglevel`,void 0),e.n([e.u({type:Object})],a.prototype,`image`,void 0),e.n([e.u({type:String})],a.prototype,`imageShape`,void 0),e.n([e.u({type:Boolean})],a.prototype,`openLinkInNewTab`,void 0),e.n([e.u({type:String})],a.prototype,`padding`,void 0),e.n([e.u({type:String,converter:{fromAttribute:e=>{let t=i.props.skin.type;return e&&t.includes(e)?e:(e&&!t.includes(e)&&console.warn(`Invalid skin value "${e}". Using default skin "${i.props.skin.default}".`),i.props.skin.default)},toAttribute:e=>e}})],a.prototype,`skin`,void 0),e.n([e.u({type:String})],a.prototype,`subheading`,void 0),e.n([e.u({type:String})],a.prototype,`tagPosition`,void 0),e.n([e.u({type:Array})],a.prototype,`tags`,void 0);try{e.d(`pkt-card`)(a)}catch{console.warn(`Forsøker å definere <pkt-card>, 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/progressbar-Bk_RsEjW.js

@@ -1,112 +0,0 @@
-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, t as l, u } from "./element-e2MAMNEP.js";
-import { t as d } from "./class-map-BL_YL_Ed.js";
-import "./icon-jEFbKTB_.js";
-import { n as f, t as p } from "./ref-lE1mGUOL.js";
-import { n as m } from "./utils-BwF4QSrq.js";
-//#region ../../node_modules/lit-html/directives/style-map.js
-var h = "important", g = " !" + h, _ = n(class extends c {
-	constructor(e) {
-		if (super(e), e.type !== o.ATTRIBUTE || e.name !== "style" || e.strings?.length > 2) throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.");
-	}
-	render(e) {
-		return Object.keys(e).reduce((t, n) => {
-			let r = e[n];
-			return r == null ? t : t + `${n = n.includes("-") ? n : n.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g, "-$&").toLowerCase()}:${r};`;
-		}, "");
-	}
-	update(e, [t]) {
-		let { style: n } = e.element;
-		if (this.ft === void 0) return this.ft = new Set(Object.keys(t)), this.render(t);
-		for (let e of this.ft) t[e] ?? (this.ft.delete(e), e.includes("-") ? n.removeProperty(e) : n[e] = null);
-		for (let e in t) {
-			let r = t[e];
-			if (r != null) {
-				this.ft.add(e);
-				let t = typeof r == "string" && r.endsWith(g);
-				e.includes("-") || t ? n.setProperty(e, t ? r.slice(0, -11) : r, t ? h : "") : n[e] = r;
-			}
-		}
-		return r;
-	}
-}), v = class extends l {
-	constructor() {
-		super(), this.ariaLabel = null, this.ariaLabelledby = null, this.ariaValueText = null, this.ariaLive = "polite", this.id = m(), this.role = "progressbar", this.skin = "dark-blue", this.statusPlacement = "following", this.statusType = "none", this.title = "", this.titlePosition = "left", this.valueCurrent = 0, this.valueMax = 100, this.valueMin = 0, this.labelWidth = 0, this.progressbarId = this.id, this.computedAriaLabelledby = null, this.computedAriaValueText = "", this.labelRef = p(), this.progressBarRef = p();
-	}
-	firstUpdated(e) {
-		super.firstUpdated(e), this.setComputedValues(), this.syncAttributes();
-	}
-	updated(e) {
-		super.updated(e), e.has("valueCurrent") && this.labelRef.value && (this.labelWidth = this.labelRef.value.getBoundingClientRect().width || 0), e.has("id") && this.id && (this.progressBarId = this.id), (e.has("statusType") || e.has("id") || e.has("ariaLabelledby")) && (this.progressbarId = this.id || m(), this.computedAriaLabelledby = this.ariaLabelledby || `${this.progressbarId}-title`), (e.has("ariaValueText") || e.has("valueCurrent") || e.has("valueMax")) && (this.computedAriaValueText = this.statusType === "fraction" && !this.ariaValueText ? `${this.valueCurrent} av ${this.valueMax - this.valueMin}` : this.ariaValueText || ""), this.syncAttributes();
-	}
-	render() {
-		let t = this.statusType !== "none", n = this.valueMax - this.valueMin, r = this.valueCurrent / n * 100, a = this.statusType === "fraction" ? Math.round(r) : Math.round((this.valueCurrent - this.valueMin) / (this.valueMax - this.valueMin) * 100), o = `${this.valueCurrent} av ${n}`, s = d({
-			"pkt-progressbar__bar": !0,
-			[`pkt-progressbar__bar--${this.skin}`]: !!this.skin
-		}), c = d({
-			"pkt-progressbar__title": !0,
-			"pkt-progressbar__title-center": this.titlePosition === "center"
-		}), l = d({
-			"pkt-progressbar__status": !0,
-			"pkt-progressbar__status--center": this.statusPlacement === "center"
-		}), u = d({
-			"pkt-progressbar__status-placement--following": this.statusPlacement === "following",
-			"pkt-progressbar__status-placement--center": this.statusPlacement === "center",
-			"pkt-progressbar__status-placement--left": this.statusPlacement === "left"
-		});
-		return e` <div
-      class="pkt-progressbar__container"
-      .ref=${this.progressBarRef}
-      style=${_({
-			"--pkt-progress-label-width": `${this.labelWidth}px`,
-			"--pkt-progress-width": `${a}%`
-		})}
-    >
-      ${this.title ? e`<p id=${`${this.progressBarId}-title`} class=${c}>${this.title}</p>` : i}
-
-      <div class="pkt-progressbar__bar-wrapper">
-        <div class=${s}></div>
-      </div>
-
-      ${t ? e`<div class=${l}>
-            <span class=${u} ${f(this.labelRef)}>
-              ${this.statusType === "percentage" ? `${a}%` : o}
-            </span>
-          </div>` : i}
-    </div>`;
-	}
-	setComputedValues() {
-		this.progressbarId = this.id || m(), this.computedAriaLabelledby = this.ariaLabelledby || `${this.progressbarId}-title`, this.computedAriaValueText = this.statusType === "fraction" && !this.ariaValueText ? `${this.valueCurrent} av ${this.valueMax - this.valueMin}` : this.ariaValueText || "";
-	}
-	syncAttributes() {
-		this._handleAttribute("aria-live", this.ariaLive), this._handleAttribute("aria-valuenow", this.valueCurrent), this._handleAttribute("aria-valuemin", this.valueMin), this._handleAttribute("aria-valuemax", this.valueMax), this._handleAttribute("aria-valuetext", this.computedAriaValueText), this._handleAttribute("aria-label", this.ariaLabel), this._handleAttribute("role", this.role), this._handleAttribute("aria-atomic", "true"), this._handleAttribute("id", this.progressbarId), this.ariaLabel || this._handleAttribute("aria-labelledby", this.computedAriaLabelledby);
-	}
-	_handleAttribute(e, t) {
-		t == null || t === "" ? this.removeAttribute(e) : this.setAttribute(e, String(t));
-	}
-};
-s([u({ type: String })], v.prototype, "ariaLabel", void 0), s([u({
-	type: String,
-	reflect: !0
-})], v.prototype, "ariaLabelledby", void 0), s([u({
-	type: String,
-	reflect: !0
-})], v.prototype, "ariaValueText", void 0), s([u({ type: String })], v.prototype, "ariaLive", void 0), s([u({
-	type: String,
-	reflect: !0
-})], v.prototype, "id", void 0), s([u({ type: String })], v.prototype, "role", void 0), s([u({ type: String })], v.prototype, "skin", void 0), s([u({ type: String })], v.prototype, "statusPlacement", void 0), s([u({ type: String })], v.prototype, "statusType", void 0), s([u({
-	type: String,
-	reflect: !0
-})], v.prototype, "title", void 0), s([u({ type: String })], v.prototype, "titlePosition", void 0), s([u({
-	type: Number,
-	reflect: !0
-})], v.prototype, "valueCurrent", void 0), s([u({ type: Number })], v.prototype, "valueMax", void 0), s([u({ type: Number })], v.prototype, "valueMin", void 0), s([a()], v.prototype, "labelWidth", void 0), s([a()], v.prototype, "progressbarId", void 0), s([a()], v.prototype, "computedAriaLabelledby", void 0), s([a()], v.prototype, "computedAriaValueText", void 0);
-try {
-	t("pkt-progressbar")(v);
-} catch {
-	console.warn("Forsøker å definere <pkt-progressbar>, men den er allerede definert");
-}
-//#endregion
-//#region src/components/progressbar/index.ts
-var y = v;
-//#endregion
-export { v as n, y as t };

package/dist/progressbar-T5_MpZGN.cjs

@@ -1,17 +0,0 @@
-const e=require("./element-DRc10X2R.cjs"),t=require("./class-map-BEib48YL.cjs");require("./icon-DBFTFd-J.cjs");const n=require("./ref-BkV4Cd8U.cjs"),r=require("./utils-63cRpWut.cjs");var i=`important`,a=` !`+i,o=e.f(class extends e.p{constructor(t){if(super(t),t.type!==e.m.ATTRIBUTE||t.name!==`style`||t.strings?.length>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(e){return Object.keys(e).reduce((t,n)=>{let r=e[n];return r==null?t:t+`${n=n.includes(`-`)?n:n.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,`-$&`).toLowerCase()}:${r};`},``)}update(t,[n]){let{style:r}=t.element;if(this.ft===void 0)return this.ft=new Set(Object.keys(n)),this.render(n);for(let e of this.ft)n[e]??(this.ft.delete(e),e.includes(`-`)?r.removeProperty(e):r[e]=null);for(let e in n){let t=n[e];if(t!=null){this.ft.add(e);let n=typeof t==`string`&&t.endsWith(a);e.includes(`-`)||n?r.setProperty(e,n?t.slice(0,-11):t,n?i:``):r[e]=t}}return e.g}}),s=class extends e.t{constructor(){super(),this.ariaLabel=null,this.ariaLabelledby=null,this.ariaValueText=null,this.ariaLive=`polite`,this.id=r.n(),this.role=`progressbar`,this.skin=`dark-blue`,this.statusPlacement=`following`,this.statusType=`none`,this.title=``,this.titlePosition=`left`,this.valueCurrent=0,this.valueMax=100,this.valueMin=0,this.labelWidth=0,this.progressbarId=this.id,this.computedAriaLabelledby=null,this.computedAriaValueText=``,this.labelRef=n.t(),this.progressBarRef=n.t()}firstUpdated(e){super.firstUpdated(e),this.setComputedValues(),this.syncAttributes()}updated(e){super.updated(e),e.has(`valueCurrent`)&&this.labelRef.value&&(this.labelWidth=this.labelRef.value.getBoundingClientRect().width||0),e.has(`id`)&&this.id&&(this.progressBarId=this.id),(e.has(`statusType`)||e.has(`id`)||e.has(`ariaLabelledby`))&&(this.progressbarId=this.id||r.n(),this.computedAriaLabelledby=this.ariaLabelledby||`${this.progressbarId}-title`),(e.has(`ariaValueText`)||e.has(`valueCurrent`)||e.has(`valueMax`))&&(this.computedAriaValueText=this.statusType===`fraction`&&!this.ariaValueText?`${this.valueCurrent} av ${this.valueMax-this.valueMin}`:this.ariaValueText||``),this.syncAttributes()}render(){let r=this.statusType!==`none`,i=this.valueMax-this.valueMin,a=this.valueCurrent/i*100,s=this.statusType===`fraction`?Math.round(a):Math.round((this.valueCurrent-this.valueMin)/(this.valueMax-this.valueMin)*100),c=`${this.valueCurrent} av ${i}`,l=t.t({"pkt-progressbar__bar":!0,[`pkt-progressbar__bar--${this.skin}`]:!!this.skin}),u=t.t({"pkt-progressbar__title":!0,"pkt-progressbar__title-center":this.titlePosition===`center`}),d=t.t({"pkt-progressbar__status":!0,"pkt-progressbar__status--center":this.statusPlacement===`center`}),f=t.t({"pkt-progressbar__status-placement--following":this.statusPlacement===`following`,"pkt-progressbar__status-placement--center":this.statusPlacement===`center`,"pkt-progressbar__status-placement--left":this.statusPlacement===`left`});return e._` <div
-      class="pkt-progressbar__container"
-      .ref=${this.progressBarRef}
-      style=${o({"--pkt-progress-label-width":`${this.labelWidth}px`,"--pkt-progress-width":`${s}%`})}
-    >
-      ${this.title?e._`<p id=${`${this.progressBarId}-title`} class=${u}>${this.title}</p>`:e.h}
-
-      <div class="pkt-progressbar__bar-wrapper">
-        <div class=${l}></div>
-      </div>
-
-      ${r?e._`<div class=${d}>
-            <span class=${f} ${n.n(this.labelRef)}>
-              ${this.statusType===`percentage`?`${s}%`:c}
-            </span>
-          </div>`:e.h}
-    </div>`}setComputedValues(){this.progressbarId=this.id||r.n(),this.computedAriaLabelledby=this.ariaLabelledby||`${this.progressbarId}-title`,this.computedAriaValueText=this.statusType===`fraction`&&!this.ariaValueText?`${this.valueCurrent} av ${this.valueMax-this.valueMin}`:this.ariaValueText||``}syncAttributes(){this._handleAttribute(`aria-live`,this.ariaLive),this._handleAttribute(`aria-valuenow`,this.valueCurrent),this._handleAttribute(`aria-valuemin`,this.valueMin),this._handleAttribute(`aria-valuemax`,this.valueMax),this._handleAttribute(`aria-valuetext`,this.computedAriaValueText),this._handleAttribute(`aria-label`,this.ariaLabel),this._handleAttribute(`role`,this.role),this._handleAttribute(`aria-atomic`,`true`),this._handleAttribute(`id`,this.progressbarId),this.ariaLabel||this._handleAttribute(`aria-labelledby`,this.computedAriaLabelledby)}_handleAttribute(e,t){t==null||t===``?this.removeAttribute(e):this.setAttribute(e,String(t))}};e.n([e.u({type:String})],s.prototype,`ariaLabel`,void 0),e.n([e.u({type:String,reflect:!0})],s.prototype,`ariaLabelledby`,void 0),e.n([e.u({type:String,reflect:!0})],s.prototype,`ariaValueText`,void 0),e.n([e.u({type:String})],s.prototype,`ariaLive`,void 0),e.n([e.u({type:String,reflect:!0})],s.prototype,`id`,void 0),e.n([e.u({type:String})],s.prototype,`role`,void 0),e.n([e.u({type:String})],s.prototype,`skin`,void 0),e.n([e.u({type:String})],s.prototype,`statusPlacement`,void 0),e.n([e.u({type:String})],s.prototype,`statusType`,void 0),e.n([e.u({type:String,reflect:!0})],s.prototype,`title`,void 0),e.n([e.u({type:String})],s.prototype,`titlePosition`,void 0),e.n([e.u({type:Number,reflect:!0})],s.prototype,`valueCurrent`,void 0),e.n([e.u({type:Number})],s.prototype,`valueMax`,void 0),e.n([e.u({type:Number})],s.prototype,`valueMin`,void 0),e.n([e.l()],s.prototype,`labelWidth`,void 0),e.n([e.l()],s.prototype,`progressbarId`,void 0),e.n([e.l()],s.prototype,`computedAriaLabelledby`,void 0),e.n([e.l()],s.prototype,`computedAriaValueText`,void 0);try{e.d(`pkt-progressbar`)(s)}catch{console.warn(`Forsøker å definere <pkt-progressbar>, men den er allerede definert`)}var c=s;Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return s}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return c}});

package/dist/tag-Bp9gJnYh.cjs

@@ -1,27 +0,0 @@
-const e=require("./element-DRc10X2R.cjs"),t=require("./class-map-BEib48YL.cjs"),n=require("./format-B8meU8Tm.cjs"),r=require("./element-with-slot-MkibfzHp.cjs");require("./icon-DBFTFd-J.cjs");const i=require("./if-defined-BeVQnl3C.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 r.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}firstUpdated(e){if(super.firstUpdated(e),this.closeTag&&!this.ariaLabel){let e=this.querySelector(`button span, .pkt-tag > span`)?.textContent?.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.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=${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.n(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.n(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-BYUtL8cO.js → backlink-BHtxOlTw.js}

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